# Blueprint Modular — Agent Context File
# Version : 0.1.60
# Date    : 2026-06-11
# URL canonique : https://blueprint-modular.com/llms.txt
#
# Ce fichier est la référence machine de @blueprint-modular/core.
# Il est généré automatiquement depuis les sources TypeScript.
# À injecter dans le contexte de génération de code BPM.

## IMPORT OBLIGATOIRE
import { bpm } from '@blueprint-modular/core'
import '@blueprint-modular/core/dist/style.css'
INTERDIT : import { bpm.modal } ou tout autre destructuring

## RÈGLES CRITIQUES
- 'use client' — en première ligne, une seule fois
- Modal — {isOpen && bpm.modal({ isOpen:true, onClose, title, children })} — TOUJOURS dans return()
- Graphiques — bpm.plotlyChart UNIQUEMENT — jamais bpm.lineChart/barChart/areaChart
- Métriques — bpm.metricRow({ children: <> {bpm.metric(...)} </> })
- Table — prop render dans columns (pas renderCell) — jamais JSX dans data[]
- INTERDIT : renderCell — alias non supporté par Table.tsx ; utiliser render
- Spinner — size 'small'|'medium'|'large' — jamais 'md'/'sm'
- Toggle — prop value (booléen) — jamais checked
- Text — style={{ fontWeight:600 }} — jamais prop weight
- Routes — App Router UNIQUEMENT — jamais NextApiRequest/NextApiResponse
- Fetch — res.ok vérifié avant JSON.parse
- Data — Array.isArray(data) vérifié avant setItems(data)


## COMPOSANTS

## bpm.accordion
@component bpm.accordion @description Accordéon (sections repliables).
```
  sections?: AccordionSection[]
  allowMultiple?: boolean
  defaultOpenIds?: string[]
  className?: string
```

## bpm.activityFeed
@component bpm.activityFeed @description Flux chronologique d'activités métier avec avatars initiaux, horodatages relatifs en français et état vide. @example bpm.activityFeed({ activities: [ { id: "1", actor: "Alice", action: "a validé", target: "le devis DV-001", timestamp: new Date().toISOString(), color: "success" }, ], maxItems: 10, onLoadMore: () => fetchMore(), compact: true, }) @param {object} props @param {ActivityItem[]} props.activities - Liste ordonnée ; chaque entrée : `{ id, actor, action, target, timestamp (ISO), icon?, color? }`. Obligatoire. @param {number} [props.maxItems] - Nombre max d'entrées visibles ; si la liste est plus longue, affiche « Charger plus » si onLoadMore est fourni. Optionnel. @param {function} [props.onLoadMore] - Callback du bouton « Charger plus ». Optionnel. @param {string} [props.emptyMessage="Aucune activité récente."] - Message lorsque activities est vide. Optionnel. @param {boolean} [props.compact=false] - Densité réduite (typo et padding plus petits). Optionnel. @param {string} [props.className=""] - Classes CSS sur le conteneur racine. Optionnel. @usage Historique CRM, journal d'audit léger, timeline d'événements sur une fiche. @context PARENT: bpm.panel | bpm.card | colonne dashboard. ASSOCIATED: bpm.timeline, bpm.statusTracker. @note SSR : composant client (`use client`) ; les libellés relatifs utilisent `Date.now()` — prévoir hydratation côté client pour éviter un écart serveur/client sur l'horodatage affiché.
```
  activities*: ActivityItem[]  — Liste des activités à afficher (ordre = ordre d'affichage).
  maxItems?: number  — Limite d'affichage ; au-delà, le bouton « Charger plus » apparaît si onLoadMore est défini.
  onLoadMore?: () => void  — Déclenché au clic sur « Charger plus » lorsque activities.length > maxItems.
  emptyMessage?: string  — Texte centré affiché quand `activities` est vide. Défaut : « Aucune activité récente. »
  compact?: boolean  — Mode compact : lignes plus serrées et avatars plus petits. Défaut : `false`.
  className?: string  — Classes CSS additionnelles sur le conteneur `.bpm-activity-feed`. Défaut : `""`.
```

## bpm.addressInput
@component bpm.addressInput @description Champ de saisie d'adresse avec autocomplétion.
```
  mode?: AddressInputMode
  value?: {
  line1?: string
  line2?: string
  city?: string
  postal?: string
  onChange?: (v: { line1: string
  className?: string
```

## bpm.aiQueryBar
@component bpm.aiQueryBar @description Barre de requête IA (langage naturel → résultat structuré).
```
  onQuery*: (question: string) => Promise<string>
  placeholder?: string
  suggestions?: string[]
  loading?: boolean
  className?: string
```

## bpm.alarmPanel
@component bpm.alarmPanel @description Panneau d'alarmes industrielles (active, accusée, résolue).
```
  alarms*: Alarm[]
  onAcknowledge?: (id: string) => void
  onDismiss?: (id: string) => void
  className?: string
```

## bpm.altairChart
@component bpm.altairChart @description Graphique Altair / Vega-Lite.
```
  spec?: Record<string, unknown>  — Spécification Vega-Lite / Altair (JSON). À fournir côté app.
  iframeSrc?: string  — Ou URL d'un fichier JSON ou d'une vue compilée.
  width?: number | string
  height?: number | string
  className?: string
```

## bpm.anomalyAlert
@component bpm.anomalyAlert @description Alerte d'anomalie avec valeur attendue vs réelle.
```
  title?: string
  expected*: string | number
  actual*: string | number
  severity?: AnomalySeverity  — Niveau de gravité. Si omis et context fourni, dérivé automatiquement de interpret().severity.
  className?: string
  onDismiss?: () => void
  history?: TrajectoryPoint[]  — Historique v(t) [{t, v}] de la mesure — révèle la tendance dans le verdict si context est fourni.
  context?: InterpretContext  — Contexte de jugement { reference, direction, comparisonFrame? } : gravité auto-dérivée de la sévérité combinée (≥0.5 critical, >0.15 warning, sinon info) et verdict écart/tendance révélé. Additif : sans context, rendu inchangé.
```

## bpm.approvalFlow
@component bpm.approvalFlow @description Flux de validation multi-étapes (approve/reject par étape).
```
  steps*: ApprovalStep[]
  onApprove?: (stepId: string, comment?: string) => void
  onReject?: (stepId: string, comment?: string) => void
  direction?: "horizontal" | "vertical"
  showCommentInput?: boolean
  className?: string
```

## bpm.areaChart
@component bpm.areaChart @description Graphique en aires.
```
  data*: AreaChartDatum[]
  width?: number
  height?: number
  color?: string
  className?: string
  context?: InterpretContext  — Contexte de jugement { reference, direction, comparisonFrame? } : la série (trajectoire v(t), t = x) est jugée par interpret — repère pointillé, couleur d'aire selon le verdict, aria-label. Additif : sans context, rendu inchangé.
```

## bpm.assistantPanel
@component bpm.assistantPanel @description Panneau assistant IA (chips, saisie, réponses).
```
  demoAnswers?: Record<string, string>  — Si fourni, les chips affichent les réponses statiques (démo publique, pas d'appel API).
  title?: string  — Titre du panneau
  demo?: boolean  — Utilise demoAnswers si fourni ; le panneau s'ouvre toujours en volet droit (drawer).
  className?: string
```

## bpm.audio
@component bpm.audio @description Lecteur audio HTML5.
```
  src*: string
  controls?: boolean
  loop?: boolean
  className?: string
```

## bpm.autocomplete
@component bpm.autocomplete @description Champ de saisie avec suggestions.
```
  label?: string
  placeholder?: string
  value?: string
  onChange?: (value: string) => void
  options*: AutocompleteOption[]
  className?: string
```

## bpm.avatar
@component bpm.avatar @description Avatar utilisateur (image, initiales ou icône).
```
  src?: string | null  — URL de l'image de l'avatar.
  alt?: string  — Texte alternatif (accessibilité).
  initials?: string  — Initiales affichées si pas d'image. Ex. "JD".
  size?: AvatarSize  — Taille de l'avatar. Valeurs : 'small' | 'medium' | 'large'. Default: 'medium'.
  className?: string
  variant?: "default" | "sidebar"  — Affiche l'avatar dans un bloc type sidebar : avatar + name + subtitle, optionnellement bouton déconnexion. Valeurs : 'default' | 'sidebar'. Default: 'default'.
  name?: string  — Nom affiché à côté de l'avatar (variant sidebar).
  subtitle?: string  — Sous-titre (ex. email) sous le nom (variant sidebar).
  onLogout?: () => void  — Callback déconnexion (variant sidebar) ; si fourni, affiche un bouton.
  logoutLabel?: string  — Libellé du bouton déconnexion (variant sidebar). Default: 'Se déconnecter'.
  editable?: boolean  — Active le mode édition : overlay crayon au survol, file picker au clic.
  onImageChange?: (file: File) => void  — Callback appelé avec le File sélectionné.
```

## bpm.badge
@component bpm.badge @description Badge / étiquette (success, warning, etc.).
```
  children*: React.ReactNode  — PARENT: bpm.table (colonne statut) | bpm.metric | bpm.card. INTERDIT: texte long >20 chars — utiliser bpm.chip. ASSOCIÉ: bpm.table, bpm.metric, bpm.statusBox.
  variant?: BadgeVariant  — Style / couleur du badge. Valeurs : 'default' | 'primary' | 'success' | 'warning' | 'error'. Default: 'default'.
  className?: string
  size?: "sm" | "md" | "lg"  — Taille du badge. 'sm' (défaut) | 'md' | 'lg'. Additif — n'affecte pas le rendu existant.
```

## bpm.barChart
@component bpm.barChart @description Graphique en barres.
```
  data*: BarChartDatum[]
  width?: number
  height?: number
  color?: string
  className?: string
  context?: InterpretContext  — Contexte de jugement { reference, direction } : chaque barre est jugée individuellement (couleur par écart au repère), le repère est tracé en pointillé et la série entière reçoit un verdict global (aria-label, data-judgment). Additif : sans context, rendu inchangé.
```

## bpm.barcode
@component bpm.barcode @description Code-barres (EAN-13, Code 128).
```
  value*: string
  format?: "EAN13" | "CODE128"
  height?: number
  width?: number
  lineColor?: string
  background?: string
  className?: string
```

## bpm.breadcrumb
@component bpm.breadcrumb @description Fil d'Ariane simple.
```
  items?: BreadcrumbItem[]
  separator?: string
  className?: string
```

## bpm.breadcrumbs
@component bpm.breadcrumbs @description Fil d'Ariane avec items cliquables.
```
  items*: BreadcrumbsItem[]
  separator?: React.ReactNode
  maxItems?: number
  className?: string
```

## bpm.button
Accent BPM aligné référence — valeurs hex pour styles 100% inline (pas de var()). */ const ACCENT = "#00a3e2"; const ACCENT_DARK = "#008bc4"; const ACCENT_DARKER = "#007aa8"; const ACCENT_LIGHT = "#b3e0f4"; export type ButtonVariant = | "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link"; export type ButtonSize = "small" | "medium" | "large" | "sm" | "md" | "lg"; @component bpm.button @description Bouton d'action (primary, secondary, outline, ghost, destructive).
```
  children?: React.ReactNode
  onClick?: () => void
  variant?: ButtonVariant
  size?: ButtonSize
  raised?: boolean  — Toolbar : ghost avec hover surface + shadow
  icon?: string | null
  iconRight?: string | null
  loading?: boolean
  disabled?: boolean
  fullWidth?: boolean
  type?: "button" | "submit" | "reset"
  className?: string
  style?: React.CSSProperties
```

## bpm.caption
@component bpm.caption @description Légende ou texte secondaire.
```
  children*: React.ReactNode
  className?: string
  style?: React.CSSProperties
```

## bpm.card
@component bpm.card @description Carte avec titre et contenu.
```
  title?: React.ReactNode
  subtitle?: React.ReactNode
  image?: string
  imageAlt?: string
  children?: React.ReactNode
  actions?: React.ReactNode
  variant?: CardVariant
  inverted?: boolean  — Couleur inversée : fond sombre, texte blanc (style zone type Executive Summary).
  className?: string
```

## bpm.changelog
@component bpm.changelog @description Journal des modifications avec catégories et versions.
```
  changes*: ChangelogEntry[]
  groupByDate?: boolean
  maxItems?: number
  className?: string
```

## bpm.chat
Chat Ollama local (démo).
```
  model?: string
  placeholder?: string
```

## bpm.chatInterface
ISO ou texte libre, ou Date (affichage localisé court). */ timestamp?: string | Date; } @component bpm.chatInterface @description Interface de chat (messages, saisie, streaming).
```
  messages*: ChatMessage[]
  onSend*: (content: string) => void
  isLoading?: boolean  — @deprecated Préférez `typing`.
  typing?: boolean  — Indicateur « en cours de frappe » côté assistant.
  placeholder?: string
  systemContext?: string  — Contexte système affiché en haut si défini.
  title?: string  — Titre dans l’en-tête du panneau.
  disabled?: boolean
  height?: string
  className?: string
```

## bpm.checkbox
@component bpm.checkbox @description Case à cocher.
```
  label?: React.ReactNode
  checked?: boolean
  onChange?: (checked: boolean) => void
  disabled?: boolean
  className?: string
```

## bpm.chip
@component bpm.chip @description Pastille / chip (tag supprimable ou non).
```
  label*: React.ReactNode
  onDelete?: () => void
  onClick?: () => void
  variant?: ChipVariant
  disabled?: boolean
  className?: string
```

## bpm.codeBlock
@component bpm.codeBlock @description Bloc de code avec syntaxe colorée et bouton Copier.
```
  code*: string
  language?: string
  className?: string
```

## bpm.codeEditor
@component bpm.codeEditor @description Éditeur de code (textarea avec valeur, onChange, readOnly).
```
  value*: string
  onChange*: (value: string) => void
  language?: string
  readOnly?: boolean
  height?: string | number
  placeholder?: string
  className?: string
```

## bpm.colorPicker
@component bpm.colorPicker @description Sélecteur de couleur.
```
  label?: string
  value?: string
  onChange?: (value: string) => void
  help?: string | null
  disabled?: boolean
```

## bpm.column
@component bpm.column @description Mise en page multi-colonnes responsive.
```
  columns?: number  — Nombre de colonnes (1, 2, 3, 4, etc.).
  gap?: number | string  — Espacement entre les colonnes (CSS, ex. "1rem", 16).
  className?: string
  children?: React.ReactNode
```

## bpm.commandPalette
@component bpm.commandPalette @description Palette de commandes modale (fuzzy search, clavier, Cmd+K).
```
  commands*: Command[]
  isOpen?: boolean  — Mode contrôlé : si défini, l’ouverture au clavier doit être gérée via `onRequestOpen`.
  onClose*: () => void
  onRequestOpen?: () => void  — Appelé sur Cmd/Ctrl+K lorsque `isOpen` est fourni (mode contrôlé).
  placeholder?: string
  className?: string
```

## bpm.commentThread
@component bpm.commentThread @description Fil de commentaires avec réponses et avatars.
```
  comments*: Comment[]
  onPost*: (content: string, parentId?: string) => void | Promise<void>
  currentUser*: { id: string
  maxDepth?: number
  className?: string
```

## bpm.comparison
@component bpm.comparison @description Tableau de comparaison multi-items.
```
  items*: Record<string, unknown>[]
  dimensions*: string[]
  labels?: Record<string, string>
  highlightBest?: boolean
  className?: string
  contexts?: Record<string, InterpretContext>  — Contextes de jugement PAR DIMENSION { dim: { reference, direction } } : chaque cellule de la dimension est jugée par interpret — valeur colorée par le verdict, écart au repère en title, data-judgment par cellule. Additif : sans contexts, rendu inchangé.
```

## bpm.confirmModal
@component bpm.confirmModal @description Modal de confirmation pour actions destructives (danger, warning, info).
```
  isOpen*: boolean
  onConfirm*: () => void
  onCancel*: () => void
  title*: string
  message*: string
  confirmLabel?: string
  cancelLabel?: string
  variant?: ConfirmModalVariant
  isLoading?: boolean
```

## bpm.container
@component bpm.container @description Conteneur avec titre optionnel.
```
  children*: React.ReactNode
  className?: string
  style?: React.CSSProperties
```

## bpm.contextMenu
@component bpm.contextMenu @description Menu contextuel (clic droit ou clic bouton).
```
  items*: ContextMenuItem[]
  trigger*: React.ReactNode
  triggerOn?: "contextmenu" | "click"
  className?: string
```

## bpm.crud
Page CRUD générique : table + filtres + modal de création/édition/détail câblés sur un endpoint REST (GET/POST/PUT/DELETE). Utilise idKey pour les routes par identifiant.
```
  title*: string
  endpoint*: string
  columns*: CrudColumn[]
  fields*: CrudField[]
  domain?: string
  semantic?: string
  idKey?: string  — Champ utilisé comme identifiant pour GET/PUT/DELETE (défaut: "id").
```

## bpm.dataExplorer
@component bpm.dataExplorer @description Explorateur de données unifié (classique ou analytics).
```
```

## bpm.dateInput
@component bpm.dateInput @description Sélecteur de date.
```
  label?: string
  value?: Date | string | null
  onChange?: (value: Date | null) => void
  disabled?: boolean
  help?: string | null
  min?: Date | string | null
  max?: Date | string | null
```

## bpm.dateRangePicker
@component bpm.dateRangePicker @description Sélecteur de plage de dates.
```
  label?: string
  start?: Date | string | null
  end?: Date | string | null
  onChange?: (start: Date | null, end: Date | null) => void
  disabled?: boolean
  min?: Date | string | null
  max?: Date | string | null
```

## bpm.decisionTree
@component bpm.decisionTree @description Arbre de décision interactif (questions, actions, résultats).
```
  rootId*: string
  nodes*: DecisionNode[]
  currentNodeId?: string
  onNodeClick*: (nodeId: string, branch?: { label: string
```

## bpm.diffViewer
@component bpm.diffViewer @description Visualisation de diff texte/code (split ou unified).
```
  original*: string
  modified*: string
  language?: string
  mode?: "split" | "unified"
  title?: { original?: string
  className?: string
```

## bpm.divider
@component bpm.divider @description Séparateur horizontal avec label optionnel.
```
  label?: string
  orientation?: "horizontal" | "vertical"
  thickness?: number  — Épaisseur en pixels (défaut 1).
  color?: string  — Couleur de la ligne (CSS, ex. var(--bpm-border), #ccc, rgb(0,0,0)).
  className?: string
```

## bpm.drawer
@component bpm.drawer @description Tiroir / panneau latéral (détail, formulaire, filtres).
```
  children*: React.ReactNode
  open*: boolean
  onClose*: () => void
  title?: React.ReactNode
  side?: "left" | "right"
  width?: number | string
  className?: string
```

## bpm.drillDown
@component bpm.drillDown @description Navigation drill-down multi-niveaux dans des données hiérarchiques.
```
  levels*: DrillDownLevel<T>[]
  currentLevel*: number
  onDrill*: (item: T, nextLevel: number) => void
  onBack*: () => void
  breadcrumbs?: boolean
```

## bpm.emailComposer
@component bpm.emailComposer @description Composeur d'email (To, CC, objet, corps riche).
```
  to?: string
  subject?: string
  body?: string
  templates?: EmailTemplate[]
  useRichText?: boolean
  onSend?: (payload: { to: string
  onCancel?: () => void
  className?: string
```

## bpm.empty
@component bpm.empty @description État vide minimal (icône + message).
```
  children?: React.ReactNode
  className?: string
  style?: React.CSSProperties
```

## bpm.emptyState
@component bpm.emptyState @description État vide illustré (titre, description, action).
```
  title?: string
  description?: React.ReactNode
  icon?: React.ReactNode
  action?: React.ReactNode
  className?: string
```

## bpm.expander
@component bpm.expander @description Bloc repliable avec titre.
```
  title*: React.ReactNode
  children*: React.ReactNode
  defaultExpanded?: boolean
  className?: string
```

## bpm.exportButton
@component bpm.exportButton @description Bouton d'export de données (CSV, JSON, Excel).
```
  data*: T[] | (() => T[])
  filename*: string
  formats?: ("csv" | "json")[]
  columns?: ExportColumn<T>[]
  csvDelimiter?: "
  csvBOM?: boolean
  className?: string
```

## bpm.fab
@component bpm.fab @description Bouton d'action flottant (FAB).
```
  icon?: React.ReactNode
  label?: string
  onClick?: () => void
  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left"
  className?: string
```

## bpm.filePreview
@component bpm.filePreview @description Aperçu de fichier (image, PDF, texte/code).
```
  url*: string
  filename*: string
  mimeType?: string
  height?: string | number
  showDownload?: boolean
  className?: string
  file_url?: string  — Props snake_case (API Python) — normalisées en interne
  file_name?: string
  mime_type?: string
  show_download?: boolean
  class_name?: string
```

## bpm.fileUploader
@component bpm.fileUploader @description Upload de fichier(s) par glisser-déposer ou sélection.
```
  accept?: string
  multiple?: boolean
  maxSizeBytes?: number
  onFiles?: (files: File[]) => void
  disabled?: boolean
  label?: string
```

## bpm.filterPanel
@component bpm.filterPanel @description Panneau de filtres (select, multiselect, daterange, text, toggle).
```
  filters*: FilterConfig[]  — Liste des filtres à afficher.
  values?: Record<string, unknown>  — Valeurs courantes (clé = filter.key).
  onChange*: (key: string, value: unknown) => void  — Callback à chaque changement d'un filtre.
  onReset*: () => void  — Callback réinitialisation.
  orientation?: "horizontal" | "vertical"  — Disposition : horizontal (flex row) ou vertical (colonne 240px).
  collapsible?: boolean  — Afficher un bouton pour replier le panneau (avec badge si filtres actifs).
```

## bpm.flowDiagram
@component bpm.flowDiagram @description Diagramme d'états et transitions interactif (SVG).
```
  states*: FlowDiagramState[]
  transitions*: FlowDiagramTransition[]
  currentState?: string
  onTransition?: (from: string, to: string) => void
  direction?: "horizontal" | "vertical"
  className?: string
```

## bpm.funnelChart
@component bpm.funnelChart @description Graphique en entonnoir (tunnel de conversion).
```
  stages*: FunnelStage[]
  showPercentage?: boolean
  horizontal?: boolean
  className?: string
```

## bpm.gantt
@component bpm.gantt @description Diagramme de Gantt (tâches, jalons, dépendances).
```
  tasks*: GanttTask[]
  viewMode*: "day" | "week" | "month"
  onTaskClick*: (task: GanttTask) => void
  showDependencies?: boolean
  todayLine?: boolean
```

## bpm.geofence
@component bpm.geofence @description Carte interactive avec zones géographiques (geofences).
```
  zones*: GeofenceZone[]
  onZonesChange?: (next: GeofenceZone[]) => void
  center*: [number, number]
  zoom?: number
  height?: number | string
  className?: string
```

## bpm.gps
Carte Leaflet chargée côté client uniquement (évite erreurs SSR). */ const LeafletMap = dynamic( () => import("./GpsMap").then((m) => m.GpsMap), { ssr: false } ); État du cycle de vie de la géolocalisation. */ export type GpsStatus = "idle" | "loading" | "success" | "error"; @component bpm.gps @description Affichage ou sélection de position GPS.
```
  label?: string  — Titre affiché au-dessus du bloc.
  showMap?: boolean  — Afficher une carte Leaflet. Default: true.
  onLocation?: (coords: { lat: number  — Callback appelé quand la position est obtenue (mode display).
  height?: number  — Hauteur de la carte en px. Default: 300.
  className?: string  — Classes CSS additionnelles.
  mode?: "display" | "picker"  — Mode : 'display' = affichage position, 'picker' = sélection d'un point sur la carte. Default: 'display'.
  value?: { lat: number  — Position courante (mode picker).
  onChange?: (coords: { lat: number  — Callback à chaque déplacement du marker ou clic sur la carte (mode picker).
```

## bpm.grid
@component bpm.grid @description Grille responsive avec espacement configurable.
```
  cols?: number | { xs?: number
  gap?: number | string
  className?: string
  children?: React.ReactNode
```

## bpm.groupedList
@component bpm.groupedList @description Liste groupée par clé avec en-têtes de groupe.
```
  items*: T[]
  groupBy*: keyof T
  renderItem*: (item: T, index: number) => React.ReactNode
  renderGroupHeader?: (key: string, count: number) => React.ReactNode
  sortGroups?: "asc" | "desc"
  collapsible?: boolean
  defaultCollapsed?: boolean
```

## bpm.heatmap
@component bpm.heatmap @description Grille de valeurs numériques avec dégradé de couleur, infobulle au survol et clic optionnel sur cellule. @example bpm.heatmap({ data: [[1,2],[3,4]], xLabels: ["A","B"], yLabels: ["X","Y"], colorScale: { min: "#fff", max: "#f00" } }) @param {object} props @param {number[][]} props.data - Matrice 2D de valeurs numériques. Obligatoire. @param {string[]} props.xLabels - Libellés des colonnes. Obligatoire. @param {string[]} props.yLabels - Libellés des lignes. Obligatoire. @param {{ min: string; max: string }} props.colorScale - Couleurs min/max du dégradé. Obligatoire. @param {number} [props.valueMin] - Valeur minimale pour l'échelle. Optionnel, calculé automatiquement. @param {number} [props.valueMax] - Valeur maximale pour l'échelle. Optionnel, calculé automatiquement. @param {boolean} [props.showValues=false] - Affiche les valeurs dans les cellules. Optionnel. @param {function} [props.onCellClick] - Callback au clic sur une cellule (row, col, value). Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @param {InterpretContext} [props.context] - Contexte de jugement : chaque cellule est jugée vs le repère (liseré coloré sur les écarts, anomalies >2σ — comparisonFrame ou matrice — soulignées, infobulle enrichie du verdict). Optionnel.
```
  data*: number[][]
  xLabels*: string[]
  yLabels*: string[]
  colorScale*: { min: string
  valueMin?: number
  valueMax?: number
  showValues?: boolean
  onCellClick?: (row: number, col: number, value: number) => void
  className?: string
  context?: InterpretContext  — Contexte de jugement { reference, direction, comparisonFrame? } : chaque cellule est jugée par interpret — liseré coloré par verdict (hors zone neutre), data-judgment par cellule, infobulle enrichie. Anomalie >2σ évaluée contre comparisonFrame ou, à défaut, la matrice entière. Additif : sans context, rendu inchangé.
```

## bpm.highlightBox
@component bpm.highlightBox @description Bloc de mise en valeur avec barre latérale colorée, numéro, titre et sections RTB/Cible optionnelles. @example bpm.highlightBox({ value: 1, label: "DAILY", title: "Objectif quotidien", rtbPoints: ["Point 1", "Point 2"] }) @param {object} props @param {number} props.value - Numéro affiché dans la barre gauche. Obligatoire. @param {string} props.label - Texte sous le numéro (ex: "DAILY"). Obligatoire. @param {string} props.title - Titre principal du contenu. Obligatoire. @param {string} [props.momentDescription] - Description "Moment" affichée en italique. Optionnel. @param {string[]} [props.rtbPoints] - Points RTB séparés par "·". Optionnel. @param {string|string[]} [props.targetPoints] - Points Cible (chaîne ou liste). Optionnel. @param {string} [props.barColor="#212121"] - Couleur de la barre latérale. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel.
```
  value*: number  — Numéro affiché dans la barre gauche (ex. 1)
  label*: string  — Texte sous le numéro dans la barre (ex. "DAILY")
  title*: string  — Titre principal du contenu
  momentDescription?: string | null  — Description "Moment" (affichée en italique, gris)
  rtbPoints?: string[] | null  — Points RTB (affichés séparés par ·)
  targetPoints?: string | string[] | null  — Points Cible (chaîne ou liste)
  barColor?: string | null  — Couleur de la barre latérale (hex, rgb ou nom CSS). Par défaut : noir (#212121).
  className?: string
```

## bpm.html
@component bpm.html @description Affiche du HTML brut. À utiliser uniquement avec du contenu de confiance ou préalablement sanitisé. @example bpm.html({ html: "<p>Contenu <strong>HTML</strong></p>" }) @param {object} props @param {string} props.html - Contenu HTML brut à afficher. Obligatoire. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @param {React.CSSProperties} [props.style={}] - Styles inline additionnels. Optionnel.
```
  html*: string  — HTML brut à afficher (équivalent st.html). À n'utiliser qu'avec du contenu de confiance ou sanitized.
  className?: string
  style?: React.CSSProperties
```

## bpm.image
@component bpm.image @description Affiche une image avec chargement différé et options de dimensionnement/ajustement. @example bpm.image({ src: "/photo.jpg", alt: "Photo de profil", width: 200, fit: "cover" }) @param {object} props @param {string} props.src - URL de l'image. Obligatoire. @param {string} props.alt - Texte alternatif pour l'accessibilité. Obligatoire. @param {string} [props.title] - Titre affiché au survol. Optionnel. @param {number|string} [props.width] - Largeur en pixels ou CSS. Optionnel. @param {number|string} [props.height] - Hauteur en pixels ou CSS. Optionnel. @param {"contain"|"cover"|"fill"|"none"} [props.fit="contain"] - Mode d'ajustement object-fit. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel.
```
  src*: string
  alt*: string
  title?: string
  width?: number | string
  height?: number | string
  fit?: "contain" | "cover" | "fill" | "none"
  className?: string
```

## bpm.inlineEdit
@component bpm.inlineEdit @description Champ éditable au clic : texte, nombre ou select. Validation par Entrée/blur, annulation par Échap. @example bpm.inlineEdit({ value: "Mon texte", onSave: (v) => console.log(v), type: "text" }) @param {object} props @param {string|number} props.value - Valeur actuelle affichée. Obligatoire. @param {function} props.onSave - Callback appelé à la sauvegarde avec la nouvelle valeur. Obligatoire. @param {"text"|"number"|"select"} [props.type="text"] - Type d'édition. Optionnel. @param {{ value: string; label: string }[]} [props.options=[]] - Options pour le type select. Optionnel. @param {string} [props.placeholder=""] - Placeholder si valeur vide. Optionnel. @param {boolean} [props.disabled=false] - Désactive l'édition. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.table, bpm.labelValue
```
  value*: string | number
  onSave*: (next: string | number) => void | Promise<void>
  type?: InlineEditType
  options?: { value: string
  placeholder?: string
  disabled?: boolean
  className?: string
```

## bpm.input
@component bpm.input @description Champ de saisie texte avec label optionnel. Supporte différents types HTML (text, email, password, etc.). @example bpm.input({ label: "Email", value: email, onChange: setEmail, type: "email", placeholder: "exemple@mail.com" }) @param {object} props @param {string} [props.label] - Label affiché au-dessus du champ. Optionnel. @param {string} [props.value=""] - Valeur contrôlée. Optionnel. @param {function} [props.onChange] - Callback recevant la valeur string directement. Optionnel. @param {string} [props.placeholder=""] - Texte indicatif. Optionnel. @param {"text"|"email"|"password"|"number"|"search"|"date"} [props.type="text"] - Type HTML du champ. Optionnel. @param {boolean} [props.disabled=false] - Désactive le champ. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @parent bpm.modal, bpm.panel, bpm.card @associated bpm.button, bpm.selectbox
```
  label?: string  — Label affiché au-dessus du champ.
  value?: string  — Valeur contrôlée.
  onChange?: (value: string) => void  — Callback — reçoit la valeur string, pas un Event. Ex: (v) => setValue(v)
  placeholder?: string
  type?: "text" | "email" | "password" | "number" | "search" | "date"  — Type HTML. Default: 'text'.
  disabled?: boolean  — Désactive le champ.
  className?: string
```

## bpm.invoiceTemplate
@component bpm.invoiceTemplate @description Modèle de facture A4 prêt pour impression avec lignes, TVA et totaux calculés automatiquement. @example bpm.invoiceTemplate({ issuer: "Ma Société", client: "Client SA", lines: [{ label: "Service", qty: 2, unitPrice: 100 }] }) @param {object} props @param {string} [props.title="Facture"] - Titre du document. Optionnel. @param {string} props.issuer - Informations de l'émetteur. Obligatoire. @param {string} props.client - Informations du client. Obligatoire. @param {InvoiceLine[]} props.lines - Lignes de facturation (label, qty, unitPrice). Obligatoire. @param {number} [props.taxRate=0.2] - Taux de TVA (0.2 = 20%). Optionnel. @param {string} [props.invoiceNo="—"] - Numéro de facture. Optionnel. @param {string} [props.date] - Date de la facture (YYYY-MM-DD). Optionnel, défaut aujourd'hui. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.printLayout export interface InvoiceLine { label: string; qty: number; unitPrice: number; } @component bpm.invoiceTemplate @description Modèle de facture (émetteur, client, lignes, total).
```
  title?: string
  issuer*: string
  client*: string
  lines*: InvoiceLine[]
  taxRate?: number
  invoiceNo?: string
  date?: string
  className?: string
```

## bpm.jsonEditor
@component bpm.jsonEditor @description Éditeur JSON avec validation en temps réel, formatage automatique au blur et indicateur de validité. @example bpm.jsonEditor({ value: '{"key": "value"}', onChange: (v, valid) => console.log(v, valid) }) @param {object} props @param {string} props.value - Contenu JSON sous forme de chaîne. Obligatoire. @param {function} props.onChange - Callback (value, isValid) appelé à chaque modification. Obligatoire. @param {boolean} [props.readOnly=false] - Mode lecture seule (affiche un CodeBlock). Optionnel. @param {string|number} [props.height=300] - Hauteur du textarea. Optionnel. @param {boolean} [props.showValidation=true] - Affiche l'indicateur de validité. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.jsonViewer, bpm.codeBlock
```
  value*: string
  onChange*: (value: string, isValid: boolean) => void
  readOnly?: boolean
  height?: string | number
  showValidation?: boolean
  className?: string
```

## bpm.jsonViewer
@component bpm.jsonViewer @description Affichage JSON formaté et repliable.
```
  data*: unknown  — Objet ou chaîne JSON à afficher.
  defaultExpandedLevel?: number  — Nombre de niveaux ouverts par défaut (0 = tout replié).
  maxHeight?: number  — Hauteur max en px pour scroll.
  className?: string
```

## bpm.labelValue
@component bpm.labelValue @description Affiche une paire label/valeur avec options de style, orientation et bouton copier. @example bpm.labelValue({ label: "Référence", value: "REF-001", copyable: true, valueStyle: "bold" }) @param {object} props @param {string} props.label - Libellé affiché en majuscules. Obligatoire. @param {string|number|React.ReactNode} props.value - Valeur à afficher. Obligatoire. @param {"horizontal"|"vertical"} [props.orientation="horizontal"] - Disposition label/valeur. Optionnel. @param {"sm"|"md"|"lg"} [props.size="md"] - Taille du texte. Optionnel. @param {"default"|"bold"|"accent"|"muted"} [props.valueStyle="default"] - Style de la valeur. Optionnel. @param {boolean} [props.copyable=false] - Affiche un bouton pour copier la valeur. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @param {TrajectoryPoint[]} [props.trajectory] - Trajectoire v(t) de la valeur, jugée si context fourni. Optionnel. @param {InterpretContext} [props.context] - Contexte de jugement : la valeur est colorée et un verdict écart/tendance est révélé. Optionnel. @parent bpm.card, bpm.panel @associated bpm.metric, bpm.inlineEdit
```
  label*: string
  value*: string | number | React.ReactNode
  orientation?: "horizontal" | "vertical"
  size?: "sm" | "md" | "lg"
  valueStyle?: "default" | "bold" | "accent" | "muted"
  copyable?: boolean
  className?: string
  trajectory?: TrajectoryPoint[]  — Trajectoire v(t) [{t, v}] de la mesure (la valeur affichée reste value) — jugée si context est fourni.
  context?: InterpretContext  — Contexte de jugement { reference, direction, comparisonFrame? } : la valeur prend la couleur du verdict et un suffixe écart/tendance role=status est révélé. Additif : sans context, rendu inchangé.
```

## bpm.lineChart
@component bpm.lineChart @description Graphique en ligne SVG simple et responsive pour afficher une série de données. @example bpm.lineChart({ data: [{ x: 0, y: 10 }, { x: 1, y: 25 }], color: "#3b82f6" }) @param {object} props @param {LineChartDatum[]} props.data - Tableau de points { x, y }. Obligatoire. @param {number} [props.width=400] - Largeur du SVG. Optionnel. @param {number} [props.height=200] - Hauteur du SVG. Optionnel. @param {string} [props.color="var(--bpm-accent)"] - Couleur de la ligne. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @param {InterpretContext} [props.context] - Contexte de jugement : ligne de repère pointillée, couleur de série jugée, aria-label descriptif. Optionnel. @associated bpm.areaChart, bpm.barChart, bpm.scatterChart export interface LineChartDatum { x: number | string; y: number; }/** @component bpm.lineChart @description Graphique en courbes.
```
  data*: LineChartDatum[]
  width?: number
  height?: number
  color?: string
  className?: string
  context?: InterpretContext  — Contexte de jugement { reference, direction, comparisonFrame? } : la série (lue comme trajectoire v(t), t = x) est jugée par interpret — repère tracé en pointillé, couleur de ligne selon le verdict, aria-label. Additif : sans context, rendu inchangé.
```

## bpm.liveChart
@component bpm.liveChart @description Graphique temps réel avec fenêtre glissante, seuils en pointillés et rafraîchissement automatique. @example bpm.liveChart({ data: [{ timestamp: Date.now(), value: 42 }], bufferDuration: 60, refreshInterval: 1000 }) @param {object} props @param {LiveChartDatum[]} props.data - Points { timestamp, value }. Obligatoire. @param {number} [props.bufferDuration=120] - Durée de la fenêtre en secondes. Optionnel. @param {{ value: number; label?: string }[]} [props.thresholds=[]] - Lignes de seuil horizontales. Optionnel. @param {number} [props.refreshInterval] - Intervalle de rafraîchissement en ms. Optionnel. @param {number} [props.width=400] - Largeur du graphique. Optionnel. @param {number} [props.height=180] - Hauteur du graphique. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @param {InterpretContext} [props.context] - Contexte de jugement : courbe colorée par le verdict, repère pointillé, verdict sous le graphique. Optionnel. @associated bpm.liveGauge, bpm.lineChart, bpm.sparkline export interface LiveChartDatum { timestamp: number; value: number; } @component bpm.liveChart @description Graphique en temps réel (mise à jour continue).
```
  data*: LiveChartDatum[]
  bufferDuration?: number
  thresholds?: { value: number
  refreshInterval?: number
  width?: number
  height?: number
  className?: string
  context?: InterpretContext  — Contexte de jugement { reference, direction, comparisonFrame? } : la fenêtre courante est jugée par interpret (couleur de courbe selon le verdict, repère pointillé, verdict écart/tendance sous le graphique). Additif : sans context, rendu inchangé.
```

## bpm.liveGauge
@component bpm.liveGauge @description Jauge demi-cercle avec aiguille et zones colorées (normal/avertissement/critique). @example bpm.liveGauge({ value: 75, min: 0, max: 100, warningAbove: 70, criticalAbove: 90, label: "CPU" }) @param {object} props @param {number} props.value - Valeur actuelle affichée. Obligatoire. @param {number} [props.min=0] - Valeur minimale de l'échelle. Optionnel. @param {number} [props.max=100] - Valeur maximale de l'échelle. Optionnel. @param {number} [props.warningAbove] - Seuil d'avertissement (zone jaune). Optionnel. @param {number} [props.criticalAbove] - Seuil critique (zone rouge). Optionnel. @param {"sm"|"md"|"lg"} [props.size="md"] - Taille de la jauge. Optionnel. @param {string} [props.label] - Libellé affiché sous la jauge. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @param {InterpretContext} [props.context] - Contexte de jugement : la valeur affichée prend la couleur du jugement, écart/tendance révélés sous la jauge. Optionnel. @associated bpm.liveChart, bpm.metric, bpm.progress
```
  value*: number | TrajectoryPoint[]  — Valeur actuelle, ou trajectoire v(t) [{t, v}] (l'aiguille pointe le dernier point ; tendance jugée si context fourni).
  min?: number
  max?: number
  warningAbove?: number
  criticalAbove?: number
  size?: LiveGaugeSize
  label?: string
  className?: string
  context?: InterpretContext  — Contexte de jugement { reference, direction, comparisonFrame? } : interpret() colore la valeur et révèle écart au repère + tendance + anomalie sous la jauge. Additif : sans context, rendu inchangé.
```

## bpm.loadingBar
@component bpm.loadingBar @description Barre de chargement (sweep, blocks, iso, stacked, arc, dots).
```
  variant?: LoadingBarVariant  — Variant visuel (sweep, blocks, iso, stacked, arc, dots).
  value?: number  — Pour les barres déterminées (ex. iso) : 0–100. Non fourni = indéterminé.
  size?: "thin" | "default" | "thick"  — Hauteur : thin (6px), default (8px), thick (12px).
  animated?: boolean  — Désactive l'animation (utile pour screenshots ou prefers-reduced-motion).
  className?: string
```

## bpm.machineStatus
@component bpm.machineStatus @description Carte d'état machine avec indicateur LED animé (clignotement en production ou défaut). @example bpm.machineStatus({ title: "Machine A", state: "running", detail: "Lot #1234" }) @param {object} props @param {string} props.title - Nom de la machine. Obligatoire. @param {"running"|"idle"|"fault"|"unknown"} props.state - État actuel. Obligatoire. @param {string} [props.detail] - Détail additionnel affiché sous l'état. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @param {number|TrajectoryPoint[]} [props.value] - Mesure de production associée (scalaire ou trajectoire v(t)), jugée si context fourni. Optionnel. @param {InterpretContext} [props.context] - Contexte de jugement : verdict écart/tendance révélé sous l'état. Optionnel. @associated bpm.sensorGrid, bpm.liveGauge, bpm.statusBox
```
  title*: string
  state*: MachineStatusState
  detail?: string
  className?: string
  value?: number | TrajectoryPoint[]  — Mesure de production associée (cadence, TRS… ; scalaire ou trajectoire v(t) [{t,v}]) — jugée via interpret si context est fourni.
  context?: InterpretContext  — Contexte de jugement { reference, direction, comparisonFrame? } : un verdict écart/tendance/anomalie est révélé sous l'état (role=status) et la bordure gauche prend la couleur du jugement. Additif : sans context, rendu inchangé.
```

## bpm.map
@component bpm.map @description Carte OpenStreetMap embarquée en iframe. Utiliser MapView pour des fonctionnalités interactives. @example bpm.map({ lat: 48.8566, lng: 2.3522, height: 300 }) @param {object} props @param {string} [props.iframeSrc] - URL iframe personnalisée. Optionnel. @param {number} [props.lat] - Latitude du centre. Optionnel. @param {number} [props.lng] - Longitude du centre. Optionnel. @param {number|string} [props.width="100%"] - Largeur. Optionnel. @param {number|string} [props.height=400] - Hauteur. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.mapView, bpm.gps
```
  iframeSrc?: string
  lat?: number
  lng?: number
  width?: number | string
  height?: number | string
  className?: string
```

## bpm.mapView
@component bpm.mapView @description Carte Leaflet interactive avec marqueurs, polylignes, polygones et gestion des clics. @example bpm.mapView({ center: [48.8566, 2.3522], zoom: 13, markers: [{ position: [48.8566, 2.3522], label: "Paris" }] }) @param {object} props @param {[number, number]} props.center - Coordonnées [lat, lng] du centre. Obligatoire. @param {number} [props.zoom=13] - Niveau de zoom initial. Optionnel. @param {number|string} [props.height=320] - Hauteur de la carte. Optionnel. @param {MapMarker[]} [props.markers=[]] - Liste des marqueurs. Optionnel. @param {function} [props.onMarkerClick] - Callback au clic sur un marqueur. Optionnel. @param {string} [props.tileUrl] - URL du serveur de tuiles. Optionnel. @param {string} [props.tileAttribution] - Attribution du fournisseur de tuiles. Optionnel. @param {[number, number][][]} [props.polylines] - Lignes à tracer. Optionnel. @param {string} [props.polylineColor] - Couleur des polylignes. Optionnel. @param {MapPolygonSpec[]} [props.polygons] - Polygones à afficher. Optionnel. @param {function} [props.onMapClick] - Callback au clic sur la carte. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.map, bpm.routePlanner, bpm.gps
```
  center*: [number, number]
  zoom?: number
  height?: number | string
  markers?: MapMarker[]
  onMarkerClick?: (index: number, marker: MapMarker) => void
  tileUrl?: string
  tileAttribution?: string
  polylines?: [number, number][][]
  polylineColor?: string
  polygons?: MapPolygonSpec[]
  onMapClick?: (latlng: [number, number]) => void
  className?: string
```

## bpm.markdown
@component bpm.markdown @description Rendu Markdown sécurisé.
```
  text*: string  — Contenu Markdown. Utilisez `---` sur une ligne pour une ligne horizontale (hr).
  className?: string
```

## bpm.masterDetail
@component bpm.masterDetail @description Vue liste + détail responsive (recherche, mobile).
```
  items*: T[]
  columns*: MasterDetailColumn<T>[]
  renderDetail*: (item: T) => React.ReactElement
  selectedId?: string
  onSelect*: (item: T) => void
  idKey?: string
  searchable?: boolean
  emptyDetailMessage?: string
  splitRatio?: number
  className?: string
```

## bpm.message
@component bpm.message @description Bandeau info/success/warning/error.
```
  type?: MessageType
  children*: React.ReactNode
  className?: string
```

## bpm.metric
Locales courants pour le format nombre (ex. "fr-FR" → 1 000,50, "en-US" → 1,000.50). */ export type MetricValueLocale = "fr-FR" | "en-US" | "de-DE" | string; @component bpm.metric @description Affiche une métrique chiffrée avec label, valeur, variation delta et options de formatage (devise, locale). @example bpm.metric({ label: "Chiffre d'affaires", value: 125000, delta: "+12%", currency: "EUR" }) @param {object} props @param {string} props.label - Libellé de la métrique. Obligatoire. @param {string|number} props.value - Valeur principale. Obligatoire. @param {number|string} [props.delta] - Variation affichée (ex: "+12%"). Optionnel. @param {string} [props.name] - Nom pour référencer dans le chat IA. Optionnel. @param {"aucun"|"normal"|"inverse"} [props.deltaType="normal"] - Coloration du delta. Optionnel. @param {string} [props.help] - Texte d'aide au survol. Optionnel. @param {number} [props.deltaDecimals=0] - Décimales pour le delta. Optionnel. @param {string} [props.currency="EUR"] - Devise pour l'affichage. Optionnel. @param {string} [props.valueLocale] - Locale pour formatage (fr-FR, en-US). Optionnel. @param {number} [props.valueDecimals=0] - Décimales pour la valeur. Optionnel. @param {boolean} [props.valueGrouping=true] - Séparateur de milliers. Optionnel. @param {boolean} [props.border=true] - Affiche la bordure. Optionnel. @param {React.ReactNode} [props.icon] - Icône à gauche du label. Optionnel. @param {string} [props.subtext] - Texte contextuel sous la valeur. Optionnel. @param {string} [props.accentColor] - Couleur d'accent. Optionnel. @param {boolean} [props.compact=false] - Mode compact réduit. Optionnel. @param {boolean} [props.trackContext=false] - Expose au contexte IA. Optionnel. @param {InterpretContext} [props.context] - Contexte de jugement { reference, direction, comparisonFrame? } : révèle écart/tendance/anomalie via interpret. Optionnel. @parent bpm.metricRow, bpm.grid, bpm.card @associated bpm.badge, bpm.plotlyChart
```
  label*: string  — Libellé affiché au-dessus de la valeur.
  value*: string | number | TrajectoryPoint[]  — Valeur principale (string, number, ou trajectoire v(t) [{t, v}] — affiche le dernier point et révèle la tendance si context est fourni).
  delta?: number | string | null  — Variation affichée. Format string (ex. "+12%") ou number.
  name?: string | null  — Nom optionnel pour référencer la métrique dans le chat IA : $metric:name ou @name
  deltaType?: "aucun" | "normal" | "inverse"  — Aucun = pas de couleur, normal = + vert / - rouge, inverse = + rouge / - vert
  help?: string | null
  deltaDecimals?: number
  currency?: string
  valueLocale?: MetricValueLocale  — Locale pour formater value (et delta) quand ce sont des nombres. Ex. "fr-FR" (1 000,50), "en-US" (1,000.50).
  valueDecimals?: number  — Nombre de décimales pour value (si value est un number et valueLocale est défini).
  valueGrouping?: boolean  — Afficher le séparateur de milliers (true par défaut). false → 1000,50 au lieu de 1 000,50.
  border?: boolean  — Afficher la bordure autour de la métrique (true par défaut).
  icon?: React.ReactNode | null  — Icône distinctive (ex. lucide-react) affichée à gauche du label.
  subtext?: string | null  — Micro-info contextuelle sous la métrique (gris clair).
  accentColor?: string | null  — Couleur d'accent (bordure gauche ou fond icône).
  compact?: boolean  — Mode compact : hauteur réduite (~80px), padding et typo plus serrés.
  trackContext?: boolean  — Si true, expose cette métrique au contexte IA.
  context?: InterpretContext  — Contexte de jugement { reference, direction, comparisonFrame? } : la métrique porte alors un jugement via interpret(value, context) — écart au repère, tendance (si trajectoire), anomalie — révélé sous la valeur. Additif : sans context, rendu inchangé.
```

## bpm.metricRow
@component bpm.metricRow @description Ligne de métriques (conteneur pour plusieurs bpm.metric).
```
  children*: React.ReactNode
  className?: string
```

## bpm.modal
@component bpm.modal @description Fenêtre modale avec backdrop, fermeture Échap/clic extérieur. Pattern: {isOpen && bpm.modal({...})} @example bpm.modal({ isOpen: true, onClose: () => setOpen(false), title: "Confirmation", children: <p>Contenu</p> }) @param {object} props @param {boolean} props.isOpen - Contrôle l'affichage. Obligatoire. @param {function} props.onClose - Callback de fermeture. Obligatoire. @param {React.ReactNode} [props.title] - Titre de la modale. Optionnel. @param {React.ReactNode} props.children - Contenu. Obligatoire. @param {"small"|"medium"|"large"} [props.size="medium"] - Taille (400/600/800px). Optionnel. @param {boolean} [props.showCloseButton=true] - Affiche le bouton fermer. Optionnel. @associated bpm.button, bpm.input, bpm.selectbox, bpm.confirmModal @forbidden bpm.modal (pas d'imbrication) Modal dialog. PATTERN : {isOpen && bpm.modal({ isOpen:true, onClose, title, children })} — TOUJOURS dans return(), jamais après.
```
  isOpen*: boolean  — Contrôle l'affichage. PATTERN OBLIGATOIRE : {isOpen && bpm.modal({ isOpen:true, ... })}
  onClose*: () => void  — Callback de fermeture — obligatoire.
  title?: React.ReactNode
  children*: React.ReactNode  — Contenu du modal.
  size?: ModalSize  — Largeur : small=400px, medium=600px, large=800px.
  showCloseButton?: boolean
```

## bpm.modelSelector
@component bpm.modelSelector @description Sélecteur de modèle IA avec dropdown groupé par fournisseur et affichage des capacités. @example bpm.modelSelector({ models: [{ id: "gpt-4", label: "GPT-4", provider: "OpenAI" }], selected: "gpt-4", onChange: setModel }) @param {object} props @param {ModelOption[]} props.models - Liste des modèles disponibles. Obligatoire. @param {string} props.selected - ID du modèle sélectionné. Obligatoire. @param {function} props.onChange - Callback au changement de sélection. Obligatoire. @param {boolean} [props.showCapabilities=true] - Affiche les capacités et fenêtre de contexte. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.chatInterface, bpm.promptInput export interface ModelOption { id: string; label: string; provider: string; capabilities?: string[]; contextWindow?: number; } @component bpm.modelSelector @description Sélecteur de modèle IA (par fournisseur, capacités).
```
  models*: ModelOption[]
  selected*: string
  onChange*: (modelId: string) => void
  showCapabilities?: boolean
  className?: string
```

## bpm.nfcBadge
@component bpm.nfcBadge @description Badge indicateur de statut NFC/scannable avec icône et variantes de couleur. @example bpm.nfcBadge({ label: "Actif", variant: "success" }) @param {object} props @param {string} [props.label="Scannable"] - Texte affiché. Optionnel. @param {"default"|"primary"|"success"} [props.variant="default"] - Variante de couleur. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.badge, bpm.qrCode, bpm.barcode
```
  label?: string
  variant?: "default" | "primary" | "success"
  className?: string
```

## bpm.notificationCenter
@component bpm.notificationCenter @description Centre de notifications (liste, marquage, suppression).
```
  notifications*: NotificationItem[]
  onMarkRead*: (id: string) => void
  onMarkAllRead?: () => void
  onDismiss?: (id: string) => void
  maxVisible?: number
  emptyMessage?: string
  className?: string
```

## bpm.numberInput
@component bpm.numberInput @description Champ de saisie numérique avec validation min/max et formatage au blur. @example bpm.numberInput({ label: "Quantité", value: 10, onChange: setQty, min: 0, max: 100, step: 1 }) @param {object} props @param {string} [props.label] - Label affiché au-dessus. Optionnel. @param {number|null} [props.value] - Valeur contrôlée. Optionnel. @param {function} [props.onChange] - Callback (number | null). Optionnel. @param {number|null} [props.min] - Valeur minimale autorisée. Optionnel. @param {number|null} [props.max] - Valeur maximale autorisée. Optionnel. @param {number} [props.step=1] - Pas d'incrémentation. Optionnel. @param {boolean} [props.disabled=false] - Désactive le champ. Optionnel. @param {string} [props.help] - Texte d'aide au survol. Optionnel. @param {string} [props.placeholder=""] - Placeholder. Optionnel. @parent bpm.modal, bpm.panel @associated bpm.input, bpm.slider
```
  label?: string
  value?: number | null
  onChange?: (value: number | null) => void
  min?: number | null
  max?: number | null
  step?: number
  disabled?: boolean
  help?: string | null
  placeholder?: string
```

## bpm.offlineIndicator
@component bpm.offlineIndicator @description Indicateur de statut hors ligne avec compteur de requêtes en attente et bouton de synchronisation. @example bpm.offlineIndicator({ demo: false }) @param {object} props @param {boolean} [props.demo=false] - Mode démo pour afficher le composant même sans file. Optionnel. @associated bpm.toast, bpm.statusBox
```
  demo?: boolean  — Affiche le composant même sans file (pour démo / page composants).
```

## bpm.orgChart
@component bpm.orgChart @description Organigramme hiérarchique HTML/CSS (repliable).
```
  nodes*: OrgChartNode[]
  direction?: "vertical" | "horizontal"
  onNodeClick?: (node: OrgChartNode) => void
  expandable?: boolean
  rootId?: string
  className?: string
```

## bpm.page
Conteneur page (core) — props : children.
```
  children*: React.ReactNode
```

## bpm.pageLayout
@component bpm.pageLayout @description Layout d'application avec sidebar rétractable, navigation par icônes Material et switch de thème. @example bpm.pageLayout({ title: "Mon App", items: [{ key: "home", label: "Accueil", icon: "home" }], currentItem: "home", onNavigate: setPage, children: <Content /> }) @param {object} props @param {string} props.title - Titre affiché dans la sidebar. Obligatoire. @param {SidebarItem[]} props.items - Éléments de navigation (key, label, icon). Obligatoire. @param {string} props.currentItem - Clé de l'élément actif. Obligatoire. @param {function} props.onNavigate - Callback au clic sur un item (key). Obligatoire. @param {React.ReactNode} props.children - Contenu principal. Obligatoire. @param {boolean} [props.defaultCollapsed=false] - Sidebar rétractée par défaut. Optionnel. @param {"light"|"dark"} [props.theme] - Thème actuel. Optionnel. @param {function} [props.onThemeChange] - Callback changement de thème. Optionnel. @associated bpm.topNav, bpm.sidebar export interface SidebarItem { Clé unique de l’entrée. */ key: string; Libellé affiché (mode expanded). */ label: string; Nom de l’icône Material Symbol (snake_case), ex: "dashboard", "inventory_2", "widgets". Voir https://fonts.google.com/icons (weight 200). */ icon: string; } @component bpm.pageLayout @description Layout avec sidebar repliable, titre et zone de contenu.
```
  title*: string
  items*: SidebarItem[]
  currentItem*: string
  onNavigate*: (key: string) => void
  children*: React.ReactNode
  defaultCollapsed?: boolean
  theme?: "light" | "dark"  — Thème courant (optionnel). Si fourni avec onThemeChange, affiche le bouton thème en bas de la sidebar (aligné .Maker).
  onThemeChange?: (theme: "light" | "dark") => void  — Callback changement de thème (clair ↔ sombre). Affiche le bouton thème en bas si défini.
```

## bpm.pagination
@component bpm.pagination @description Contrôle de pagination avec boutons précédent/suivant, indicateur de page et compteur d'éléments. @example bpm.pagination({ page: 1, totalPages: 10, onPageChange: setPage, totalItems: 100, pageSize: 10 }) @param {object} props @param {number} props.page - Page courante (1-based). Obligatoire. @param {number} props.totalPages - Nombre total de pages. Obligatoire. @param {function} props.onPageChange - Callback au changement de page. Obligatoire. @param {number} [props.pageSize] - Taille de page pour affichage. Optionnel. @param {number} [props.totalItems] - Nombre total d'éléments. Optionnel. @param {string} [props.label] - Libellé personnalisé. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.table, bpm.crud
```
  page*: number  — Page courante (1-based).
  totalPages*: number  — Nombre total de pages.
  onPageChange*: (page: number) => void  — Callback au changement de page. Reçoit le numéro de page.
  pageSize?: number  — Taille de page (optionnel, pour affichage).
  totalItems?: number  — Nombre total d’éléments (optionnel).
  label?: string  — Libellé optionnel (ex. "Page 1 sur 5").
  className?: string
```

## bpm.panel
@component bpm.panel @description Panneau informatif (info, success, warning, error).
```
  variant?: "info" | "success" | "warning" | "error"  — PARENT: page directe | bpm.grid | bpm.tabs (contenu onglet). INTERDIT: bpm.panel imbriqué trop profond (max 2 niveaux). ASSOCIÉ: bpm.title, bpm.metric, bpm.table, bpm.plotlyChart.
  title?: string | null
  icon?: string | null | false
  inverted?: boolean  — Couleur inversée : fond sombre, texte blanc (style zone type Executive Summary).
  children?: React.ReactNode
  className?: string
```

## bpm.pdfViewer
@component bpm.pdfViewer @description Visionneuse PDF embarquée en iframe avec dimensions personnalisables. @example bpm.pdfViewer({ src: "/documents/rapport.pdf", title: "Rapport annuel", height: 600 }) @param {object} props @param {string} props.src - URL du fichier PDF. Obligatoire. @param {string} [props.title="PDF"] - Titre pour l'accessibilité. Optionnel. @param {number|string} [props.width="100%"] - Largeur. Optionnel. @param {number|string} [props.height="600px"] - Hauteur. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.filePreview, bpm.fileUploader
```
  src*: string
  title?: string
  width?: number | string
  height?: number | string
  className?: string
```

## bpm.pivotTable
@component bpm.pivotTable @description Tableau croisé dynamique avec agrégation (sum, avg, count, min, max), tri et heatmap. @example bpm.pivotTable({ data: rows, rowKey: "region", colKey: "produit", valueKey: "ventes", agg: "sum" }) @param {object} props @param {Record<string, unknown>[]} props.data - Données source. Obligatoire. @param {string} props.rowKey - Clé pour les lignes. Obligatoire. @param {string} props.colKey - Clé pour les colonnes. Obligatoire. @param {string} props.valueKey - Clé pour les valeurs à agréger. Obligatoire. @param {"sum"|"avg"|"count"|"min"|"max"} [props.agg="sum"] - Fonction d'agrégation. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.table, bpm.dataExplorer, bpm.heatmap
```
  data*: Record<string, unknown>[]
  rowKey*: string
  colKey*: string
  valueKey*: string
  agg?: PivotAgg
  className?: string
```

## bpm.plcConnector
@component bpm.plcConnector @description Formulaire de configuration de connexion automate industriel (Modbus, OPC UA, MQTT, EtherNet/IP). @example bpm.plcConnector({ className: "my-class" }) @param {object} props @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.machineStatus, bpm.sensorGrid, bpm.liveChart
```
  className?: string
```

## bpm.plotlyChart
@component bpm.plotlyChart @description Graphique interactif Plotly.js avec support de tous types de traces (bar, line, scatter, etc.). @example bpm.plotlyChart({ data: [{ type: "bar", x: ["A", "B"], y: [10, 20] }], height: 400 }) @param {object} props @param {object[]} [props.data] - Tableau de traces Plotly. Optionnel. @param {object} [props.layout] - Config layout Plotly (title, axes). Optionnel. @param {object} [props.config] - Config Plotly (responsive, displayModeBar). Optionnel. @param {number} [props.height=400] - Hauteur en pixels. Optionnel. @param {number|string} [props.width="100%"] - Largeur. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @param {string} [props.iframeSrc] - URL iframe (compatibilité ascendante). Optionnel. @parent bpm.panel, bpm.card, bpm.tabs @associated bpm.metric, bpm.selectbox, bpm.dateRangePicker
```
  data?: object[]  — Tableau de traces Plotly (ex. [{type:'bar', x:[], y:[]}]). Obligatoire.
  layout?: object  — Config layout Plotly (title, xaxis, yaxis, etc.).
  config?: object  — Config Plotly (responsive, displayModeBar, etc.).
  height?: number  — Hauteur en pixels. Default: 400.
  width?: number | string
  className?: string
  iframeSrc?: string
```

## bpm.popover
@component bpm.popover @description Bulle contextuelle positionnée autour d'un déclencheur avec fermeture au clic extérieur. @example bpm.popover({ trigger: <button>Info</button>, children: <p>Contenu</p>, placement: "bottom" }) @param {object} props @param {React.ReactNode} props.trigger - Élément déclencheur. Obligatoire. @param {React.ReactNode} props.children - Contenu de la bulle. Obligatoire. @param {"top"|"bottom"|"left"|"right"} [props.placement="bottom"] - Position de la bulle. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.tooltip, bpm.dropdown
```
  trigger*: React.ReactNode
  children*: React.ReactNode
  placement?: "top" | "bottom" | "left" | "right"
  className?: string
```

## bpm.predictiveChart
@component bpm.predictiveChart @description Graphique de prévision avec données historiques, prédictions et intervalle de confiance. @example bpm.predictiveChart({ historical: [{x:1,y:10}], predicted: [{x:2,y:15}], confidenceUpper: [{x:2,y:18}], confidenceLower: [{x:2,y:12}], todayX: 1.5 }) @param {object} props @param {{ x: number; y: number }[]} props.historical - Points historiques. Obligatoire. @param {{ x: number; y: number }[]} props.predicted - Points prédits (ligne pointillée). Obligatoire. @param {{ x: number; y: number }[]} [props.confidenceUpper] - Borne supérieure de confiance. Optionnel. @param {{ x: number; y: number }[]} [props.confidenceLower] - Borne inférieure de confiance. Optionnel. @param {number} [props.todayX] - Position X de la ligne "aujourd'hui". Optionnel. @param {number} [props.width=520] - Largeur du SVG. Optionnel. @param {number} [props.height=220] - Hauteur du SVG. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @param {InterpretContext} [props.context] - Contexte de jugement : la trajectoire PRÉDITE est jugée par interpret (couleur de la prévision, repère pointillé, verdict). Optionnel. @associated bpm.lineChart, bpm.liveChart, bpm.metric
```
  historical*: { x: number
  predicted*: { x: number
  confidenceUpper?: { x: number
  confidenceLower?: { x: number
  todayX?: number
  width?: number
  height?: number
  className?: string
  context?: InterpretContext  — Contexte de jugement { reference, direction } : la trajectoire prédite est jugée par interpret — la prévision (pointillés) prend la couleur du verdict, le repère est tracé, l'aria-label décrit le jugement. Additif : sans context, rendu inchangé.
```

## bpm.printLayout
@component bpm.printLayout @description Mise en page optimisée pour l'impression A4 avec en-tête, pied de page et marges personnalisables. @example bpm.printLayout({ children: <Content />, orientation: "portrait", header: <Logo />, footer: "Page 1", marginsMm: { top: 20 } }) @param {object} props @param {React.ReactNode} props.children - Contenu principal. Obligatoire. @param {"portrait"|"landscape"} [props.orientation="portrait"] - Orientation de la page. Optionnel. @param {React.ReactNode} [props.header] - En-tête affiché en haut. Optionnel. @param {React.ReactNode} [props.footer] - Pied de page. Optionnel. @param {PrintLayoutMarginsMm} [props.marginsMm] - Marges en mm (top, right, bottom, left). Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.invoiceTemplate, bpm.reportPage export interface PrintLayoutMarginsMm { top?: number; right?: number; bottom?: number; left?: number; } @component bpm.printLayout @description Mise en page optimisée pour l'impression.
```
  children*: React.ReactNode
  orientation?: "portrait" | "landscape"
  header?: React.ReactNode
  footer?: React.ReactNode
  marginsMm?: PrintLayoutMarginsMm
  className?: string
```

## bpm.progress
@component bpm.progress @description Barre de progression.
```
  value?: number | TrajectoryPoint[]  — Valeur actuelle, ou trajectoire v(t) [{t, v}] (le dernier point remplit la barre ; la tendance est jugée si context est fourni).
  max?: number
  label?: string
  showValue?: boolean
  className?: string
  context?: InterpretContext  — Contexte de jugement { reference, direction, comparisonFrame? } : la barre prend la couleur du jugement et une ligne écart/tendance est révélée sous la barre. Additif : sans context, rendu inchangé.
```

## bpm.progressRing
@component bpm.progressRing @description Anneau de progression circulaire SVG avec animation de transition. @example bpm.progressRing({ value: 75, max: 100, size: 80, strokeWidth: 8 }) @param {object} props @param {number} props.value - Valeur actuelle (ou trajectoire v(t) [{t,v}] : dernier point). Obligatoire. @param {number} [props.max=100] - Valeur maximale. Optionnel. @param {number} [props.size=72] - Diamètre en pixels. Optionnel. @param {number} [props.strokeWidth=8] - Épaisseur du trait. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @param {InterpretContext} [props.context] - Contexte de jugement : couleur de l'anneau selon l'écart au repère, flèche de tendance au centre si trajectoire. Optionnel. @associated bpm.progress, bpm.liveGauge, bpm.metric
```
  value*: number | TrajectoryPoint[]  — Valeur actuelle, ou trajectoire v(t) [{t, v}] (le dernier point remplit l'anneau, la tendance est révélée au centre si context est fourni).
  max?: number
  size?: number
  strokeWidth?: number
  className?: string
  context?: InterpretContext  — Contexte de jugement { reference, direction, comparisonFrame? } : l'anneau prend la couleur du jugement (favorable/neutre/défavorable) au lieu de l'accent. Additif : sans context, rendu inchangé.
```

## bpm.promptInput
@component bpm.promptInput @description Zone de saisie multi-lignes pour prompts IA avec auto-resize, compteur de tokens et envoi Ctrl+Enter. @example bpm.promptInput({ value: prompt, onChange: setPrompt, onSubmit: handleSend, placeholder: "Posez votre question...", isLoading: false }) @param {object} props @param {string} props.value - Contenu du prompt. Obligatoire. @param {function} props.onChange - Callback au changement de texte. Obligatoire. @param {function} props.onSubmit - Callback à l'envoi (Ctrl+Enter ou bouton). Obligatoire. @param {string} [props.placeholder="Écrivez votre message..."] - Placeholder. Optionnel. @param {boolean} [props.isLoading=false] - État de chargement (désactive l'envoi). Optionnel. @param {boolean} [props.disabled=false] - Désactive la saisie et l'envoi. Optionnel. @param {number} [props.maxLength] - Longueur maximale. Optionnel. @param {boolean} [props.showTokenCount=false] - Affiche le compteur de tokens estimé. Optionnel. @param {number} [props.minRows=3] - Nombre minimum de lignes. Optionnel. @param {number} [props.maxRows=8] - Nombre maximum de lignes. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @parent bpm.chatInterface @associated bpm.modelSelector, bpm.streamingText
```
  value*: string
  onChange*: (value: string) => void
  onSubmit*: (value: string) => void
  placeholder?: string
  isLoading?: boolean
  disabled?: boolean  — Désactive la zone de saisie et l’envoi (ex. chat désactivé).
  maxLength?: number
  showTokenCount?: boolean
  minRows?: number
  maxRows?: number
  className?: string
```

## bpm.qrCode
@component bpm.qrCode @description Génère un QR code SVG à partir d'une valeur texte avec couleurs personnalisables. @example bpm.qrCode({ value: "https://example.com", size: 150, fgColor: "#000" }) @param {object} props @param {string} props.value - Texte/URL à encoder. Obligatoire. @param {number} [props.size=128] - Taille en pixels. Optionnel. @param {string} [props.fgColor="var(--bpm-text-primary)"] - Couleur des modules. Optionnel. @param {string} [props.bgColor="var(--bpm-bg-primary)"] - Couleur de fond. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.barcode, bpm.nfcBadge
```
  value*: string
  size?: number
  fgColor?: string
  bgColor?: string
  className?: string
```

## bpm.radarChart
@component bpm.radarChart @description Graphique radar SVG pour comparer des valeurs sur plusieurs axes. @example bpm.radarChart({ axes: ["Vitesse", "Force", "Endurance"], values: [80, 60, 90], max: 100 }) @param {object} props @param {string[]} props.axes - Libellés des axes. Obligatoire. @param {number[]} props.values - Valeurs correspondantes aux axes. Obligatoire. @param {number} [props.max] - Valeur maximale de l'échelle. Optionnel, calculé auto. @param {number} [props.width=320] - Largeur du SVG. Optionnel. @param {number} [props.height=320] - Hauteur du SVG. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.plotlyChart, bpm.lineChart
```
  axes*: string[]
  values*: number[]
  max?: number
  width?: number
  height?: number
  className?: string
  context?: InterpretContext  — Contexte de repère { reference, direction } : un anneau de repère pointillé est tracé au niveau de reference (même échelle que les axes). Pas de verdict agrégé : un polygone sur N axes hétérogènes n'a pas de couleur de jugement unique — la lecture se fait par axe vs l'anneau. Additif : sans context, rendu inchangé.
```

## bpm.radioGroup
@component bpm.radioGroup @description Groupe de boutons radio avec disposition verticale ou horizontale. @example bpm.radioGroup({ name: "choix", label: "Choisissez", options: ["A", "B", "C"], value: selected, onChange: setSelected }) @param {object} props @param {string} [props.name] - Nom du groupe pour le formulaire. Optionnel. @param {string} [props.label] - Label affiché au-dessus. Optionnel. @param {RadioOption[]} [props.options=[]] - Options (string ou { value, label }). Optionnel. @param {string} [props.value] - Valeur sélectionnée. Optionnel. @param {function} [props.onChange] - Callback au changement. Optionnel. @param {boolean} [props.disabled=false] - Désactive le groupe. Optionnel. @param {"vertical"|"horizontal"} [props.layout="vertical"] - Disposition. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.checkbox, bpm.selectbox, bpm.input
```
  name?: string
  label?: string
  options?: RadioOption[]
  value?: string
  onChange?: (value: string) => void
  disabled?: boolean
  layout?: "vertical" | "horizontal"
  className?: string
```

## bpm.rating
@component bpm.rating @description Composant d'évaluation par étoiles cliquables avec taille personnalisable. @example bpm.rating({ value: 3, max: 5, onChange: setRating, size: "medium" }) @param {object} props @param {number} [props.value=0] - Note actuelle. Optionnel. @param {number} [props.max=5] - Nombre maximum d'étoiles. Optionnel. @param {function} [props.onChange] - Callback au clic sur une étoile. Optionnel. @param {boolean} [props.disabled=false] - Désactive l'interaction. Optionnel. @param {"small"|"medium"|"large"} [props.size="medium"] - Taille des étoiles. Optionnel. @param {TrajectoryPoint[]} [props.history] - Historique v(t) de la note, pour la tendance. Optionnel. @param {InterpretContext} [props.context] - Contexte de jugement (ex. note cible) : étoiles colorées par le verdict + suffixe écart/tendance. Optionnel. @associated bpm.slider, bpm.metric
```
  value?: number
  max?: number
  onChange?: (value: number) => void
  disabled?: boolean
  size?: "small" | "medium" | "large"
  history?: TrajectoryPoint[]  — Historique v(t) [{t, v}] de la note — révèle la tendance si context est fourni.
  context?: InterpretContext  — Contexte de jugement { reference, direction } (ex. note cible 4.0) : les étoiles pleines prennent la couleur du verdict et un suffixe écart/tendance role=status est révélé. Additif : sans context, rendu inchangé.
```

## bpm.relationGraph
@component bpm.relationGraph @description Graphe relationnel SVG interactif avec layouts force/grille/circulaire, zoom, panoramique et drag-and-drop des nœuds. @example bpm.relationGraph({ nodes: [{ id: "1", label: "A" }], edges: [{ from: "1", to: "2" }], layout: "force" }) @param {object} props @param {GraphNode[]} props.nodes - Liste des nœuds (id, label, width?, height?). Obligatoire. @param {GraphEdge[]} props.edges - Liste des arêtes (from, to). Obligatoire. @param {"force"|"grid"|"circular"} [props.layout="force"] - Algorithme de placement. Optionnel. @param {number} [props.width=640] - Largeur du SVG. Optionnel. @param {number} [props.height=420] - Hauteur du SVG. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.orgChart, bpm.treeview export interface GraphNode { id: string; label: string; width?: number; height?: number; } export interface GraphEdge { from: string; to: string; } export type RelationGraphLayout = "force" | "grid" | "circular"; @component bpm.relationGraph @description Graphe de relations interactif (nœuds et arêtes).
```
  nodes*: GraphNode[]
  edges*: GraphEdge[]
  layout?: RelationGraphLayout
  width?: number
  height?: number
  className?: string
```

## bpm.reportPage
@component bpm.reportPage @description Page de rapport structurée avec sections (titre, texte, tableau, graphique, KPI), impression PDF via window.print. @example bpm.reportPage({ title: "Rapport mensuel", sections: [{ type: "heading", text: "Résumé" }, { type: "kpi", label: "CA", value: "150k€" }] }) @param {object} props @param {string} props.title - Titre principal du rapport. Obligatoire. @param {string} [props.subtitle] - Sous-titre. Optionnel. @param {string} [props.date] - Date du rapport. Optionnel. @param {React.ReactNode} [props.logo] - Logo affiché en haut à droite. Optionnel. @param {ReportSection[]} props.sections - Sections du rapport (heading, text, table, chart, kpi, divider). Obligatoire. @param {boolean} [props.exportable=true] - Affiche le bouton Imprimer/PDF. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.printLayout, bpm.invoiceTemplate, bpm.lineChart export type ReportSection = | { type: "heading"; text: string; level?: 1 | 2 | 3 } | { type: "text"; content: string } | { type: "table"; headers: string[]; rows: string[][] } | { type: "chart"; title?: string; data: { timestamp: number; value: number }[] } | { type: "kpi"; label: string; value: string; hint?: string } | { type: "divider" }; @component bpm.reportPage @description Page de rapport structuré (titre, sections, contenu).
```
  title*: string
  subtitle?: string
  date?: string
  logo?: React.ReactNode
  sections*: ReportSection[]
  exportable?: boolean
  className?: string
```

## bpm.richTextEditor
@component bpm.richTextEditor @description Éditeur WYSIWYG contentEditable avec barre d'outils (gras, italique, titres, listes, liens, images) et export HTML/Markdown. @example bpm.richTextEditor({ value: html, onChange: ({ html, markdown }) => save(html), placeholder: "Rédigez ici..." }) @param {object} props @param {string} [props.defaultHtml=""] - HTML initial. Optionnel. @param {string} [props.value] - HTML contrôlé. Optionnel. @param {function} [props.onChange] - Callback ({ html, markdown }). Optionnel. @param {"html"|"markdown"} [props.format="html"] - Affiche l'aperçu Markdown si "markdown". Optionnel. @param {number} [props.minHeight=160] - Hauteur minimale. Optionnel. @param {number} [props.maxHeight=360] - Hauteur maximale. Optionnel. @param {boolean} [props.readOnly=false] - Mode lecture seule. Optionnel. @param {string} [props.placeholder=""] - Placeholder. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.textarea, bpm.markdown, bpm.codeEditor
```
  defaultHtml?: string
  value?: string
  onChange?: (payload: { html: string
  format?: RichTextExportFormat
  minHeight?: number
  maxHeight?: number
  readOnly?: boolean
  placeholder?: string
  className?: string
```

## bpm.routePlanner
@component bpm.routePlanner @description Planificateur d'itinéraire avec liste de points réordonnables, carte Leaflet et calcul de distance orthodromique. @example bpm.routePlanner({ stops: [{ id: "1", label: "Paris", position: [48.85, 2.35] }], onReorder: setStops, showDistance: true }) @param {object} props @param {RouteStop[]} props.stops - Points de l'itinéraire (id, label, position [lat, lng]). Obligatoire. @param {function} [props.onReorder] - Callback à la réorganisation. Optionnel. @param {boolean} [props.showDistance=true] - Affiche la distance totale. Optionnel. @param {number|string} [props.mapHeight=360] - Hauteur de la carte. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.mapView, bpm.gps, bpm.timeline export interface RouteStop { id: string; label?: string; position: [number, number]; } function haversineKm(a: [number, number], b: [number, number]): number { const R = 6371; const toRad = (x: number) => (x * Math.PI) / 180; const dLat = toRad(b[0] - a[0]); const dLon = toRad(b[1] - a[1]); const lat1 = toRad(a[0]); const lat2 = toRad(b[0]); const h = Math.sin(dLat / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) ** 2; return 2 * R * Math.asin(Math.min(1, Math.sqrt(h))); } @component bpm.routePlanner @description Planificateur d'itinéraire (arrêts, distances).
```
  stops*: RouteStop[]
  onReorder?: (next: RouteStop[]) => void
  showDistance?: boolean
  mapHeight?: number | string
  className?: string
```

## bpm.scatterChart
@component bpm.scatterChart @description Graphique de dispersion (nuage de points) SVG simple et responsive. @example bpm.scatterChart({ data: [{ x: 1, y: 10 }, { x: 2, y: 25 }], color: "#3b82f6", radius: 5 }) @param {object} props @param {ScatterChartDatum[]} props.data - Points { x, y }. Obligatoire. @param {number} [props.width=400] - Largeur du SVG. Optionnel. @param {number} [props.height=200] - Hauteur du SVG. Optionnel. @param {string} [props.color="var(--bpm-accent)"] - Couleur des points. Optionnel. @param {number} [props.radius=4] - Rayon des cercles. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @param {InterpretContext} [props.context] - Contexte de jugement : points colorés par écart individuel, anomalies (>2σ du nuage) cerclées, repère pointillé, verdict global. Optionnel. @associated bpm.lineChart, bpm.areaChart, bpm.plotlyChart export interface ScatterChartDatum { x: number; y: number; } @component bpm.scatterChart @description Graphique en nuage de points.
```
  data*: ScatterChartDatum[]
  width?: number
  height?: number
  color?: string
  radius?: number
  className?: string
  context?: InterpretContext  — Contexte de jugement { reference, direction, comparisonFrame? } : chaque point est jugé (couleur par écart au repère ; anomalie >2σ — du comparisonFrame ou, à défaut, du nuage lui-même — cerclée), repère pointillé tracé, verdict global de la série en aria-label + data-judgment. Additif : sans context, rendu inchangé.
```

## bpm.scheduler
@component bpm.scheduler @description Calendrier/agenda avec vues jour, semaine et mois, gestion d'événements et de ressources. @example bpm.scheduler({ view: "week", events: [{ id: "1", title: "Réunion", start: "2024-01-15T10:00", end: "2024-01-15T11:00" }], onEventClick: handleEvent, onSlotClick: handleSlot }) @param {object} props @param {"day"|"week"|"month"} props.view - Vue active. Obligatoire. @param {SchedulerEvent[]} props.events - Liste des événements (id, title, start, end, resourceId?, color?). Obligatoire. @param {SchedulerResource[]} [props.resources] - Ressources associables (id, label). Optionnel. @param {function} props.onEventClick - Callback au clic sur un événement. Obligatoire. @param {function} props.onSlotClick - Callback au clic sur un créneau vide (dayStart, hour). Obligatoire. @param {number} [props.startHour=8] - Première heure affichée. Optionnel. @param {number} [props.endHour=20] - Dernière heure affichée. Optionnel. @associated bpm.calendar, bpm.timeline const DAY_MS = 24 * 60 * 60 * 1000; function parseMs(iso: string): number { const t = Date.parse(iso); return Number.isNaN(t) ? 0 : t; } function startOfLocalDay(d: Date): Date { return new Date(d.getFullYear(), d.getMonth(), d.getDate()); } function addDays(d: Date, n: number): Date { const x = new Date(d); x.setDate(x.getDate() + n); return x; } function startOfWeekMonday(d: Date): Date { const s = startOfLocalDay(d); const day = s.getDay(); const diff = day === 0 ? -6 : 1 - day; return addDays(s, diff); } function daysInMonth(y: number, m: number): number { return new Date(y, m + 1, 0).getDate(); } const WEEKDAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; export type SchedulerEvent = { id: string; title: string; start: string; end: string; resourceId?: string; color?: string; }; export type SchedulerResource = { id: string; label: string; }; @component bpm.scheduler @description Planificateur / agenda (semaine, jour, mois).
```
  view*: "day" | "week" | "month"
  events*: SchedulerEvent[]
  resources?: SchedulerResource[]
  onEventClick*: (ev: SchedulerEvent) => void
  onSlotClick*: (dayStart: Date, hour: number) => void
  startHour?: number
  endHour?: number
```

## bpm.scrollContainer
@component bpm.scrollContainer @description Conteneur avec scroll vertical, horizontal ou bidirectionnel et option pour masquer la scrollbar. @example bpm.scrollContainer({ children: <Content />, height: 400, direction: "vertical", hideScrollbar: true }) @param {object} props @param {React.ReactNode} props.children - Contenu scrollable. Obligatoire. @param {string|number} [props.height="100%"] - Hauteur du conteneur. Optionnel. @param {string|number} [props.maxHeight] - Hauteur maximale. Optionnel. @param {"vertical"|"horizontal"|"both"} [props.direction="vertical"] - Direction du scroll. Optionnel. @param {boolean} [props.hideScrollbar=false] - Masque la scrollbar visuellement. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @parent bpm.panel, bpm.card
```
  children*: React.ReactNode
  height?: string | number  — Hauteur du conteneur (défaut '100%').
  maxHeight?: string | number  — Hauteur max pour limiter le scroll.
  direction?: "vertical" | "horizontal" | "both"  — Direction du scroll (défaut 'vertical').
  hideScrollbar?: boolean  — Masquer la scrollbar visuelle (défaut false).
  className?: string
```

## bpm.selectbox
@component bpm.selectbox @description Liste déroulante avec dropdown portalé, support clavier et placeholder. @example bpm.selectbox({ label: "Pays", options: ["France", "Belgique", "Suisse"], value: selected, onChange: setSelected }) @param {object} props @param {string} [props.label] - Label affiché au-dessus. Optionnel. @param {SelectboxOption[]} [props.options=[]] - Options (string ou { value, label }). Optionnel. @param {string|null} [props.value] - Valeur sélectionnée. Optionnel. @param {function} [props.onChange] - Callback au changement. Optionnel. @param {boolean} [props.disabled=false] - Désactive le composant. Optionnel. @param {string} [props.help] - Texte d'aide au survol. Optionnel. @param {string} [props.placeholder="Sélectionner..."] - Placeholder. Optionnel. @param {boolean} [props.required=false] - Champ obligatoire. Optionnel. @param {number} [props.triggerHeight] - Hauteur du trigger en pixels. Optionnel. @parent bpm.panel, bpm.modal, bpm.card @associated bpm.input, bpm.radioGroup, bpm.autocomplete
```
  label?: string  — Label affiché au-dessus.
  options?: SelectboxOption[]  — Liste d'options. Format : string[] ou [{value, label}].
  value?: string | null  — Valeur sélectionnée (contrôlé).
  onChange?: (value: string) => void  — Callback — reçoit la valeur string sélectionnée.
  disabled?: boolean
  help?: string | null
  placeholder?: string
  required?: boolean
  triggerHeight?: number  — Hauteur du trigger (px) pour alignement avec d'autres champs (ex. FilterPanel).
```

## bpm.sensorGrid
@component bpm.sensorGrid @description Grille de cartes capteur avec valeur, unité, statut coloré et détail optionnel. @example bpm.sensorGrid({ sensors: [{ id: "1", label: "Température", value: 24.5, unit: "°C", status: "ok" }], columns: 3 }) @param {object} props @param {SensorReading[]} props.sensors - Liste des capteurs (id, label, value, unit?, status, detail?). Obligatoire. @param {number} [props.columns=3] - Nombre de colonnes de la grille. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.machineStatus, bpm.liveGauge, bpm.metric export interface SensorReading { id: string; label: string; value: string | number; unit?: string; status: SensorStatus; detail?: string; Historique v(t) [{t, v}] du capteur — révèle la tendance si context est fourni. */ history?: TrajectoryPoint[]; Contexte de jugement propre au capteur { reference, direction, comparisonFrame? } : la carte est jugée par interpret (bordure colorée par le verdict, ligne écart/tendance). Additif : sans context, rendu inchangé. */ context?: InterpretContext; } @component bpm.sensorGrid @description Grille de capteurs industriels (valeur, seuil, état).
```
  sensors*: SensorReading[]
  columns?: number
  className?: string
```

## bpm.signaturePad
@component bpm.signaturePad @description Zone de signature canvas avec export data URL PNG et boutons effacer/enregistrer. @example bpm.signaturePad({ width: 400, height: 160, onChangeDataUrl: setSignature }) @param {object} props @param {number} [props.width=400] - Largeur du canvas. Optionnel. @param {number} [props.height=160] - Hauteur du canvas. Optionnel. @param {string} [props.lineColor="var(--bpm-text-primary)"] - Couleur du trait. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @param {function} [props.onChangeDataUrl] - Callback (dataUrl | null). Optionnel. @associated bpm.fileUploader, bpm.image
```
  width?: number
  height?: number
  lineColor?: string
  className?: string
  onChangeDataUrl?: (dataUrl: string | null) => void
```

## bpm.skeleton
@component bpm.skeleton @description Placeholder de chargement (skeleton screen).
```
  variant?: SkeletonVariant
  width?: number | string
  height?: number | string
  className?: string
  animated?: boolean  — Désactive l'animation pulse (utile pour screenshots, tests, prefers-reduced-motion).
  shimmer?: boolean  — Animation shimmer (dégradé balayant) en alternative au pulse.
  rounded?: SkeletonRounded  — Contrôle le rayon des bords (ignoré si variant === "circular").
  lines?: number  — Nombre de lignes de skeleton empilées (variant text). Default: 1.
```

## bpm.slider
@component bpm.slider @description Curseur min/max/step.
```
  value?: number
  min?: number
  max?: number
  step?: number
  onChange?: (value: number) => void
  label?: string
  disabled?: boolean
  className?: string
```

## bpm.sparkline
@component bpm.sparkline @description Courbe SVG compacte pour afficher une tendance avec couleur selon la direction (up/down/flat). @example bpm.sparkline({ values: [10, 15, 12, 18, 22], width: 120, height: 36, trend: "up" }) @param {object} props @param {number[]} props.values - Valeurs de la série. Obligatoire. @param {number} [props.width=120] - Largeur du SVG. Optionnel. @param {number} [props.height=36] - Hauteur du SVG. Optionnel. @param {"up"|"down"|"flat"} [props.trend="flat"] - Tendance pour la couleur. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @param {InterpretContext} [props.context] - Contexte de jugement : couleur déduite de la tendance jugée (interpret), ligne de repère pointillée, aria-label descriptif. Optionnel. @associated bpm.metric, bpm.lineChart, bpm.liveChart
```
  values*: number[]  — Valeurs de la série (t implicite = index). Trajectoire v(t) explicite possible via points [{t, v}].
  width?: number
  height?: number
  trend?: SparklineTrend
  className?: string
  points?: TrajectoryPoint[]  — Trajectoire v(t) explicite [{t, v}] — prioritaire sur values pour le jugement (les v sont aussi tracés).
  context?: InterpretContext  — Contexte de jugement { reference, direction } : la couleur suit la tendance jugée (improving→succès, worsening→erreur) au lieu de la prop trend, et le repère est tracé en pointillé. Additif : sans context, rendu inchangé.
```

## bpm.spinner
@component bpm.spinner @description Indicateur de chargement (roue).
```
  text?: string
  size?: SpinnerSize
  variant?: SpinnerVariant
  neutral?: boolean  — Utilise la couleur texte (gris) au lieu de l'accent pour homogénéiser avec flèches/icônes neutres
  className?: string
```

## bpm.spinnerDot
@component bpm.spinnerDot @description Spinner compact type cercle tournant pour indicateur de chargement inline. @example bpm.spinnerDot({ size: "medium" }) @param {object} props @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @param {"small"|"medium"|"large"} [props.size="medium"] - Taille (16/24/32px). Optionnel. @associated bpm.spinner, bpm.loadingBar, bpm.skeleton
```
  className?: string
  size?: "small" | "medium" | "large"  — Taille : small (16px), medium (24px), large (32px).
```

## bpm.splitView
@component bpm.splitView @description Deux volets redimensionnables avec séparateur draggable. Empile verticalement sous 640px. @example bpm.splitView({ left: <List />, right: <Detail />, defaultSplit: 30, direction: "horizontal" }) @param {object} props @param {React.ReactNode} props.left - Contenu du volet gauche/haut. Obligatoire. @param {React.ReactNode} props.right - Contenu du volet droit/bas. Obligatoire. @param {number} [props.defaultSplit=50] - Pourcentage initial du premier volet. Optionnel. @param {number} [props.minLeft=15] - Pourcentage minimum du premier volet. Optionnel. @param {number} [props.minRight=15] - Pourcentage minimum du second volet. Optionnel. @param {"horizontal"|"vertical"} [props.direction="horizontal"] - Direction du split. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.masterDetail, bpm.panel
```
  left*: React.ReactNode
  right*: React.ReactNode
  defaultSplit?: number
  minLeft?: number
  minRight?: number
  direction?: "horizontal" | "vertical"
  className?: string
```

## bpm.stateMachine
@component bpm.stateMachine @description Visualisation d'une machine à états avec graphe circulaire, transitions cliquables et historique. @example bpm.stateMachine({ states: ["A", "B", "C"], transitions: [{ from: "A", to: "B" }], currentState: "A", onTransition: handleTransition }) @param {object} props @param {string[]} props.states - Liste des états. Obligatoire. @param {StateTransition[]} props.transitions - Liste des transitions (from, to, label?). Obligatoire. @param {string} props.currentState - État actuel. Obligatoire. @param {string[]} [props.history=[]] - Historique des états traversés. Optionnel. @param {function} [props.onTransition] - Callback (from, to) au clic sur une transition. Optionnel. @param {number} [props.width=420] - Largeur du SVG. Optionnel. @param {number} [props.height=420] - Hauteur du SVG. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.stepper, bpm.timeline, bpm.relationGraph export interface StateTransition { from: string; to: string; label?: string; } @component bpm.stateMachine @description Visualiseur de machine à états finis.
```
  states*: string[]
  transitions*: StateTransition[]
  currentState*: string
  history?: string[]
  onTransition?: (from: string, to: string) => void
  width?: number
  height?: number
  className?: string
```

## bpm.statusBox
@component bpm.statusBox @description Boîte de statut (success, warning, error, info).
```
  label*: string
  state?: "running" | "complete" | "error"
  children?: React.ReactNode
  defaultExpanded?: boolean
  compact?: boolean  — Réduit le padding pour contextes denses.
  className?: string
  value?: number | TrajectoryPoint[]  — Valeur mesurée associée au statut (scalaire ou trajectoire v(t) [{t,v}]) — jugée si context est fourni.
  context?: InterpretContext  — Contexte de jugement { reference, direction, comparisonFrame? } : un verdict écart/tendance/anomalie est révélé à droite du libellé et la bordure gauche prend la couleur du jugement. Additif : sans context, rendu inchangé.
```

## bpm.statusTracker
@component bpm.statusTracker @description Suivi de statut en étapes (completed/current/pending/error).
```
  stages*: StatusTrackerStage[]
  direction?: "horizontal" | "vertical"
  compact?: boolean
  className?: string
```

## bpm.stepper
@component bpm.stepper @description Progression multi-étapes (horizontal/vertical).
```
  steps?: StepperStep[]
  currentStep?: number
  direction?: "horizontal" | "vertical"
  onStepClick?: (stepIndex: number) => void
  size?: "sm" | "md" | "lg"
  className?: string
```

## bpm.streamingText
@component bpm.streamingText @description Affichage de texte en streaming avec curseur clignotant et rendu Markdown optionnel. @example bpm.streamingText({ content: partialText, isStreaming: true, renderMarkdown: true }) @param {object} props @param {string} props.content - Texte courant (s'allonge au fil du stream). Obligatoire. @param {boolean} [props.isStreaming=false] - Affiche le curseur clignotant. Optionnel. @param {boolean} [props.renderMarkdown=true] - Interprète le contenu comme Markdown. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @parent bpm.chatInterface @associated bpm.markdown, bpm.promptInput
```
  content*: string  — Texte courant (s'allonge au fil du stream).
  isStreaming?: boolean  — Affiche le curseur clignotant quand true.
  renderMarkdown?: boolean  — Passe le contenu dans bpm.markdown (défaut true).
  className?: string
```

## bpm.suggestionCard
@component bpm.suggestionCard @description Carte de suggestion IA avec titre, description, barre de confiance et boutons d'action. @example bpm.suggestionCard({ title: "Suggestion", description: "Détail...", confidence: 85, actions: [{ label: "Appliquer", onClick: apply, variant: "primary" }] }) @param {object} props @param {string} props.title - Titre de la suggestion. Obligatoire. @param {string} props.description - Description détaillée. Obligatoire. @param {number} [props.confidence] - Niveau de confiance 0-100. Optionnel. @param {string} [props.icon] - Nom d'icône Material Symbols. Optionnel. @param {{ label: string; onClick: () => void; variant?: "primary" | "secondary" }[]} props.actions - Boutons d'action. Obligatoire. @param {boolean} [props.dismissable] - Affiche le bouton fermer. Optionnel. @param {function} [props.onDismiss] - Callback à la fermeture. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.card, bpm.message
```
  title*: string
  description*: string
  confidence?: number
  icon?: string
  actions*: { label: string
  dismissable?: boolean
  onDismiss?: () => void
  className?: string
```

## bpm.table
@component bpm.table @description Tableau de données triable avec colonnes personnalisables, formatage numérique et scroll horizontal. @example bpm.table({ columns: [{ key: "nom", label: "Nom" }, { key: "montant", label: "Montant", align: "right" }], data: rows, striped: true, hover: true }) @param {object} props @param {TableColumn[]} props.columns - Définition des colonnes (key, label, align?, render?, decimals?). Obligatoire. @param {Record<string, unknown>[]} props.data - Tableau de données. Obligatoire. @param {boolean} [props.striped=true] - Lignes alternées. Optionnel. @param {boolean} [props.hover=true] - Surbrillance au survol. Optionnel. @param {function} [props.onRowClick] - Callback au clic sur une ligne. Optionnel. @param {string} [props.defaultSortColumn] - Colonne triée par défaut. Optionnel. @param {"asc"|"desc"} [props.defaultSortDirection="asc"] - Direction de tri par défaut. Optionnel. @param {string} [props.name] - Nom pour référence IA. Optionnel. @param {string} [props.keyColumn] - Colonne d'ID unique. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @param {string} [props.valueLocale="fr-FR"] - Locale pour formatage. Optionnel. @param {number} [props.valueDecimals=0] - Décimales par défaut. Optionnel. @param {boolean} [props.valueGrouping=true] - Séparateur de milliers. Optionnel. @param {number} [props.minWidth] - Largeur minimale en pixels. Optionnel. @param {boolean} [props.trackContext=false] - Expose au contexte IA. Optionnel. @param {string} [props.emptyMessage="Aucune donnée disponible"] - Message si vide. Optionnel. @parent bpm.panel, bpm.container @associated bpm.pagination, bpm.input, bpm.badge, bpm.button @forbidden bpm.card (overflow caché) export interface TableColumn { key: string; label: React.ReactNode; align?: "left" | "center" | "right"; className?: string; Renderer personnalisé (valeur + ligne). Seule prop supportée — pas renderCell. */ render?: (value: unknown, row: Record<string, unknown>) => React.ReactNode; Décimales pour cette colonne (surcharge valueDecimals du tableau). */ decimals?: number; Si true, l'en-tête de colonne ne passe pas à la ligne (whitespace-nowrap). */ noWrap?: boolean; Contexte de jugement de la colonne { reference, direction, comparisonFrame? } : chaque cellule numérique est jugée par interpret — valeur colorée par le verdict, écart en title, data-judgment. Ignoré si render est fourni. Additif : sans context, rendu inchangé. */ context?: InterpretContext; } @component bpm.table @description Tableau triable avec colonnes configurables.
```
  columns*: TableColumn[]  — Définition des colonnes — obligatoire.
  data*: Record<string, unknown>[]  — Tableau de données — obligatoire. INTERDIT : JSX dans data[], utiliser render dans TableColumn.
  striped?: boolean
  hover?: boolean
  onRowClick?: (row: Record<string, unknown>) => void  — Callback au clic sur une ligne.
  defaultSortColumn?: string | null
  defaultSortDirection?: "asc" | "desc"
  name?: string | null
  keyColumn?: string | null
  className?: string
  valueLocale?: MetricValueLocale  — Locale pour formater les nombres (ex. "fr-FR", "en-US").
  valueDecimals?: number  — Nombre de décimales par défaut pour les cellules numériques.
  valueGrouping?: boolean  — Séparateur de milliers (true = 1 000,50).
  minWidth?: number  — Largeur minimale du tableau en px (déclenche le scroll horizontal dans le wrapper si conteneur plus étroit). Non défini = pas de min-width.
  trackContext?: boolean  — Si true, expose ce tableau au contexte IA.
  emptyMessage?: string  — Message affiché quand data est vide. Default: "Aucune donnée disponible".
  loading?: boolean  — État chargement : affiche des lignes squelettes (aria-busy). Additif : défaut false.
  error?: string | null  — État erreur : affiche le message en ligne role=alert (prioritaire sur loading/empty). Additif : défaut null.
  density?: "normal" | "compact"  — Densité d'affichage : "normal" (défaut, rendu historique) ou "compact" (padding réduit).
```
INTERDIT : Tableau de données — obligatoire. INTERDIT : JSX dans data[], utiliser render dans TableColumn. */

## bpm.tabs
@component bpm.tabs @description Système d'onglets avec contenu associé, scroll horizontal si débordement. @example bpm.tabs({ tabs: [{ label: "Aperçu", content: <Overview /> }, { label: "Détails", content: <Details /> }], defaultTab: 0 }) @param {object} props @param {TabsItems} [props.tabs=[]] - Onglets (string[] ou { label, content, key? }[]). Optionnel. @param {number} [props.defaultTab=0] - Index de l'onglet actif au montage. Optionnel. @param {function} [props.onChange] - Callback au changement d'onglet (index). Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @parent bpm.panel, bpm.container @associated bpm.table, bpm.plotlyChart, bpm.metric @forbidden bpm.tabs (pas d'imbrication) export interface TabItem { label: string; content: React.ReactNode | null; key?: string | number; } export type TabsItems = (string | TabItem)[]; @component bpm.tabs @description Onglets pour organiser le contenu.
```
  tabs?: TabsItems  — Onglets : tableau de { label, content } ou chaînes (label uniquement).
  defaultTab?: number  — Index de l'onglet actif au montage. Default: 0.
  onChange?: (index: number) => void
  className?: string
```

## bpm.text
@component bpm.text @description Texte simple (niveau corps).
```
  children*: React.ReactNode
  mono?: boolean  — Style inline comme st.text (monospace).
  className?: string
  style?: React.CSSProperties
```

## bpm.textarea
@component bpm.textarea @description Zone de texte multiligne.
```
  label?: string
  value?: string
  onChange?: (value: string) => void
  placeholder?: string
  rows?: number
  disabled?: boolean
  inverted?: boolean  — Couleur inversée : fond sombre, texte blanc (style zone type PJ).
  className?: string
```

## bpm.theme
@component bpm.theme @description Sélecteur de thème clair/sombre avec toggle ou select, persiste en localStorage. @example bpm.theme({ variant: "toggle", label: "Mode sombre" }) @param {object} props @param {"toggle"|"select"} [props.variant="toggle"] - Type de contrôle. Optionnel. @param {React.ReactNode} [props.label] - Label du toggle. Optionnel. @param {string} [props.lightLabel="Clair"] - Libellé option claire. Optionnel. @param {string} [props.darkLabel="Sombre"] - Libellé option sombre. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.toggle, bpm.pageLayout
```
  variant?: ThemeVariant  — Type de contrôle : interrupteur (toggle) ou liste (select).
  label?: React.ReactNode  — Label à côté du toggle (variant toggle uniquement).
  lightLabel?: string  — Libellé option "Clair" (variant select).
  darkLabel?: string  — Libellé option "Sombre" (variant select).
  className?: string
```

## bpm.timeInput
@component bpm.timeInput @description Champ de sélection d'heure avec popover heures/minutes. @example bpm.timeInput({ label: "Heure de début", value: time, onChange: setTime }) @param {object} props @param {string} [props.label] - Label affiché au-dessus. Optionnel. @param {Date|string|null} [props.value] - Valeur (Date ou "HH:MM"). Optionnel. @param {function} [props.onChange] - Callback (Date | null). Optionnel. @param {boolean} [props.disabled=false] - Désactive le champ. Optionnel. @param {string} [props.min] - Heure minimale "HH:MM". Optionnel. @param {string} [props.max] - Heure maximale "HH:MM". Optionnel. @associated bpm.dateInput, bpm.timePickerPopover, bpm.scheduler
```
  label?: string
  value?: Date | string | null
  onChange?: (value: Date | null) => void
  disabled?: boolean
  min?: string
  max?: string
```

## bpm.timeline
@deprecated Utilisez TimelineEvent avec la prop `events`. Conservé pour rétrocompatibilité. */ export interface TimelineItem { id?: string; title: React.ReactNode; description?: React.ReactNode; date?: string; status?: "done" | "current" | "upcoming"; } export interface TimelineEvent { date: string; title: string; description?: string; actor?: string; icon?: string; color?: "default" | "info" | "success" | "warning" | "error"; metadata?: Record<string, string>; } @component bpm.timeline @description Frise chronologique (événements ISO, groupement par date).
```
  events?: TimelineEvent[]  — Nouvelle API — fil chronologique riche.
  items?: TimelineItem[]  — Ancienne API — conservée pour compatibilité.
  maxItems?: number
  sortOrder?: "asc" | "desc"
  groupByDate?: boolean
  className?: string
```

## bpm.title
Titre h1 minimal (core) — children uniquement. Pour titres hiérarchiques : bpm.title1 … title4 ou titleBpm.
```
  children*: React.ReactNode
```

## bpm.title1
@component bpm.title @description Titre h1 minimal. — bpm.title1 : niveau 1 implicite, ne pas passer level.
```
  children*: React.ReactNode
  level?: 1 | 2 | 3 | 4
  size?: string | null  — Taille de police (ex. "1.5rem", "24px"). Surcharge le défaut du niveau.
  bold?: boolean | number | null  — Gras : true = 700, false = 400, ou nombre (ex. 600). Surcharge le défaut du niveau.
  color?: string | null  — Couleur du texte (ex. "var(--bpm-text-primary)", "#333"). Surcharge la couleur par défaut.
  bar?: boolean  — Barre verticale sombre à gauche du titre (comme en-tête de section).
  barColor?: string | null  — Couleur de la barre gauche (hex, rgb ou nom CSS). Ignoré si bar=false.
  inverted?: boolean  — Couleur inversée : fond sombre, texte blanc (style badge / scénario).
  invertedBackground?: string | null  — Couleur de fond quand inverted=true (hex, rgb ou nom CSS). Par défaut : #1d1d1f.
  logoUrl?: string | null  — Optional logo URL (e.g. from localStorage). Shown only when level === 1.
  onLogoClick?: () => void
```

## bpm.title2
@component bpm.title @description Titre h1 minimal. — bpm.title2 : niveau 2 implicite, ne pas passer level.
```
  children*: React.ReactNode
  level?: 1 | 2 | 3 | 4
  size?: string | null  — Taille de police (ex. "1.5rem", "24px"). Surcharge le défaut du niveau.
  bold?: boolean | number | null  — Gras : true = 700, false = 400, ou nombre (ex. 600). Surcharge le défaut du niveau.
  color?: string | null  — Couleur du texte (ex. "var(--bpm-text-primary)", "#333"). Surcharge la couleur par défaut.
  bar?: boolean  — Barre verticale sombre à gauche du titre (comme en-tête de section).
  barColor?: string | null  — Couleur de la barre gauche (hex, rgb ou nom CSS). Ignoré si bar=false.
  inverted?: boolean  — Couleur inversée : fond sombre, texte blanc (style badge / scénario).
  invertedBackground?: string | null  — Couleur de fond quand inverted=true (hex, rgb ou nom CSS). Par défaut : #1d1d1f.
  logoUrl?: string | null  — Optional logo URL (e.g. from localStorage). Shown only when level === 1.
  onLogoClick?: () => void
```

## bpm.title3
@component bpm.title @description Titre h1 minimal. — bpm.title3 : niveau 3 implicite, ne pas passer level.
```
  children*: React.ReactNode
  level?: 1 | 2 | 3 | 4
  size?: string | null  — Taille de police (ex. "1.5rem", "24px"). Surcharge le défaut du niveau.
  bold?: boolean | number | null  — Gras : true = 700, false = 400, ou nombre (ex. 600). Surcharge le défaut du niveau.
  color?: string | null  — Couleur du texte (ex. "var(--bpm-text-primary)", "#333"). Surcharge la couleur par défaut.
  bar?: boolean  — Barre verticale sombre à gauche du titre (comme en-tête de section).
  barColor?: string | null  — Couleur de la barre gauche (hex, rgb ou nom CSS). Ignoré si bar=false.
  inverted?: boolean  — Couleur inversée : fond sombre, texte blanc (style badge / scénario).
  invertedBackground?: string | null  — Couleur de fond quand inverted=true (hex, rgb ou nom CSS). Par défaut : #1d1d1f.
  logoUrl?: string | null  — Optional logo URL (e.g. from localStorage). Shown only when level === 1.
  onLogoClick?: () => void
```

## bpm.title4
@component bpm.title @description Titre h1 minimal. — bpm.title4 : niveau 4 implicite, ne pas passer level.
```
  children*: React.ReactNode
  level?: 1 | 2 | 3 | 4
  size?: string | null  — Taille de police (ex. "1.5rem", "24px"). Surcharge le défaut du niveau.
  bold?: boolean | number | null  — Gras : true = 700, false = 400, ou nombre (ex. 600). Surcharge le défaut du niveau.
  color?: string | null  — Couleur du texte (ex. "var(--bpm-text-primary)", "#333"). Surcharge la couleur par défaut.
  bar?: boolean  — Barre verticale sombre à gauche du titre (comme en-tête de section).
  barColor?: string | null  — Couleur de la barre gauche (hex, rgb ou nom CSS). Ignoré si bar=false.
  inverted?: boolean  — Couleur inversée : fond sombre, texte blanc (style badge / scénario).
  invertedBackground?: string | null  — Couleur de fond quand inverted=true (hex, rgb ou nom CSS). Par défaut : #1d1d1f.
  logoUrl?: string | null  — Optional logo URL (e.g. from localStorage). Shown only when level === 1.
  onLogoClick?: () => void
```

## bpm.titleBpm
@component bpm.title @description Titre h1 minimal.
```
  children*: React.ReactNode
  level?: 1 | 2 | 3 | 4
  size?: string | null  — Taille de police (ex. "1.5rem", "24px"). Surcharge le défaut du niveau.
  bold?: boolean | number | null  — Gras : true = 700, false = 400, ou nombre (ex. 600). Surcharge le défaut du niveau.
  color?: string | null  — Couleur du texte (ex. "var(--bpm-text-primary)", "#333"). Surcharge la couleur par défaut.
  bar?: boolean  — Barre verticale sombre à gauche du titre (comme en-tête de section).
  barColor?: string | null  — Couleur de la barre gauche (hex, rgb ou nom CSS). Ignoré si bar=false.
  inverted?: boolean  — Couleur inversée : fond sombre, texte blanc (style badge / scénario).
  invertedBackground?: string | null  — Couleur de fond quand inverted=true (hex, rgb ou nom CSS). Par défaut : #1d1d1f.
  logoUrl?: string | null  — Optional logo URL (e.g. from localStorage). Shown only when level === 1.
  onLogoClick?: () => void
```

## bpm.toast
Toast visuel ; en production préférer useToast().
```
  message*: string  — Texte principal
  type?: string  — success | error | warning | info
  title?: string | null
  pageName?: string | null
  pageIcon?: string | null  — SVG HTML
  id?: number  — Clé React
  onClose*: () => void  — Fermeture — apps : ToastProvider + useToast()
```

## bpm.toggle
@component bpm.toggle @description Interrupteur on/off.
```
  label?: React.ReactNode
  value?: boolean
  onChange?: (checked: boolean) => void
  disabled?: boolean
  className?: string
```

## bpm.tooltip
@component bpm.tooltip @description Info-bulle au survol.
```
  text*: string
  children*: React.ReactNode
  position?: TooltipPlacement
  backgroundColor?: string | null  — Couleur de fond du tooltip (hex, rgb ou nom CSS). Par défaut : noir.
  textColor?: string | null  — Couleur du texte du tooltip (hex, rgb ou nom CSS). Par défaut : blanc.
```

## bpm.topNav
@component bpm.topNav @description Barre de navigation horizontale avec titre/logo et liens/boutons. @example bpm.topNav({ title: "Mon App", titleHref: "/", items: [{ label: "Accueil", href: "/" }, { label: "Aide", onClick: showHelp }] }) @param {object} props @param {React.ReactNode} [props.title] - Titre ou logo. Optionnel. @param {string} [props.titleHref="#"] - Lien du titre. Optionnel. @param {TopNavItem[]} [props.items=[]] - Éléments de navigation (label, href?, onClick?). Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.pageLayout, bpm.sidebar, bpm.breadcrumb export interface TopNavItem { label: string; href?: string; onClick?: () => void; } @component bpm.topNav @description Barre de navigation supérieure (titre + liens).
```
  title?: React.ReactNode
  titleHref?: string
  items?: TopNavItem[]
  className?: string
```

## bpm.tour
@component bpm.tour @description Visite guidée interactive avec overlay sombre et mise en surbrillance des éléments cibles étape par étape. @example bpm.tour({ steps: [{ target: "#btn", title: "Bienvenue", content: "Cliquez ici" }], isActive: true, onClose: () => setActive(false) }) @param {object} props @param {TourStep[]} props.steps - Liste des étapes (target sélecteur CSS, title, content). Obligatoire. @param {boolean} props.isActive - Active/désactive la visite. Obligatoire. @param {function} [props.onClose] - Callback à la fermeture. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.modal, bpm.stepper export interface TourStep { target: string; title: string; content: string; } @component bpm.tour @description Visite guidée interactive (étapes et popups).
```
  steps*: TourStep[]
  isActive*: boolean
  onClose?: () => void
  className?: string
```

## bpm.transition
@component bpm.transition @description Animation de transition entre états.
```
  activeIndex*: number  — Index de la page / vue active (0-based).
  variant?: TransitionVariant  — Variant de transition : fade (slide), shimmer, border, grid.
  children*: ReactNode[]  — Enfants : tableau de nœuds (une « page » par entrée).
  duration?: number  — Durée de la transition fade (ms). Défaut 380.
  onTransitionEnd?: () => void  — Callback à la fin de la transition.
  className?: string
```

## bpm.treemap
@component bpm.treemap @description Visualisation treemap (carte de chaleur hiérarchique) en SVG avec algorithme squarify. @example bpm.treemap({ data: [{ name: "A", value: 50 }, { name: "B", value: 30 }], width: 400, height: 300 }) @param {object} props @param {TreemapItem[]} props.data - Données à afficher (name, value, fill optionnel). Obligatoire. @param {number} [props.width=400] - Largeur du SVG en pixels. Optionnel. @param {number} [props.height=280] - Hauteur du SVG en pixels. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @param {InterpretContext} [props.context] - Contexte de jugement par tuile : chaque cellule est jugée vs le repère (contour coloré par le verdict hors zone neutre, data-judgment par tuile). Optionnel. @associated bpm.heatmap, bpm.pieChart, bpm.sunburst export interface TreemapItem { name: string; value: number; fill?: string; } @component bpm.treemap @description Carte arborescente (treemap) pour données hiérarchiques.
```
  data*: TreemapItem[]
  width?: number
  height?: number
  className?: string
  context?: InterpretContext  — Contexte de jugement { reference, direction } : chaque tuile est jugée individuellement par interpret vs le repère (contour coloré par le verdict hors zone neutre, data-judgment par tuile). Pas de verdict agrégé : un total de tuiles hétérogènes n'a pas de jugement unique. Additif : sans context, rendu inchangé.
```

## bpm.treeview
@component bpm.treeview @description Arborescence hiérarchique dépliable avec sélection de nœud. @example bpm.treeview({ nodes: [{ id: "1", label: "Parent", children: [{ id: "1.1", label: "Enfant" }] }], onSelect: handleSelect }) @param {object} props @param {TreeviewNode[]} [props.nodes=[]] - Liste des nœuds racines (id, label, children, defaultOpen). Optionnel. @param {function} [props.onSelect] - Callback à la sélection d'un nœud (node). Optionnel. @param {string|null} [props.selectedId=null] - ID du nœud sélectionné. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.sidebar, bpm.accordion, bpm.menu export interface TreeviewNode { id: string; label: React.ReactNode; children?: TreeviewNode[]; defaultOpen?: boolean; } @component bpm.treeview @description Arbre de nœuds repliables et sélectionnables.
```
  nodes?: TreeviewNode[]
  onSelect?: (node: TreeviewNode) => void
  selectedId?: string | null
  className?: string
```

## bpm.video
@component bpm.video @description Lecteur vidéo HTML5 avec contrôles natifs et options de lecture en boucle/silencieux. @example bpm.video({ src: "/videos/demo.mp4", controls: true, width: 640, height: 360 }) @param {object} props @param {string} props.src - URL de la vidéo. Obligatoire. @param {boolean} [props.controls=true] - Affiche les contrôles natifs. Optionnel. @param {boolean} [props.loop=false] - Lecture en boucle. Optionnel. @param {boolean} [props.muted=false] - Lecture silencieuse. Optionnel. @param {number} [props.width] - Largeur en pixels. Optionnel. @param {number} [props.height] - Hauteur en pixels. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @associated bpm.image, bpm.carousel, bpm.lightbox
```
  src*: string
  controls?: boolean
  loop?: boolean
  muted?: boolean
  width?: number
  height?: number
  className?: string
```

## bpm.waterfall
@component bpm.waterfall @description Graphique en cascade (waterfall chart) montrant l'évolution cumulative de valeurs positives/négatives. @example bpm.waterfall({ data: [{ label: "Début", value: 100, type: "start" }, { label: "+Ventes", value: 50 }, { label: "Total", value: 150, type: "total" }] }) @param {object} props @param {WaterfallDatum[]} props.data - Données (label, value, type optionnel: "start"|"delta"|"total"). Obligatoire. @param {number} [props.width=480] - Largeur du SVG en pixels. Optionnel. @param {number} [props.height=260] - Hauteur du SVG en pixels. Optionnel. @param {string} [props.className=""] - Classes CSS additionnelles. Optionnel. @param {InterpretContext} [props.context] - Contexte de jugement : le cumul final de la cascade est jugé vs le repère, verdict révélé sous le graphique. Optionnel. @associated bpm.barChart, bpm.stackedBarChart, bpm.kpi export interface WaterfallDatum { label: string; value: number; type?: "start" | "delta" | "total"; } @component bpm.waterfall @description Graphique en cascade (waterfall).
```
  data*: WaterfallDatum[]
  width?: number
  height?: number
  className?: string
  context?: InterpretContext  — Contexte de jugement { reference, direction } : le cumul FINAL de la cascade est jugé par interpret — verdict écart au repère révélé sous le graphique (role=status), data-judgment. Additif : sans context, rendu inchangé.
```

## bpm.wizardForm
@component bpm.wizardForm @description Formulaire multi-étapes avec stepper et validation.
```
  steps*: WizardStep[]
  onComplete*: () => void
  onCancel?: () => void
  submitLabel?: string
  showSummary?: boolean
  className?: string
```

## bpm.dataExplorerAnalytics
```
  mode*: "analytics"
  data*: Record<string, unknown>[]
  columns*: ExplorerAnalyticsColumn[]
  chartConfig?: { type: "bar" | "line" | "pie"
  onFilter?: (filtered: Record<string, unknown>[]) => void
  className?: string
```

## bpm.dataExplorerClassic
```
  data*: Record<string, unknown>[]
  columns?: ColumnDef[]
  title?: string
  searchable?: boolean
  exportable?: boolean
  pageSize?: number
  className?: string
```

## bpm.datePickerPopover
```
  anchorRef*: React.RefObject<HTMLElement | null>
  value*: Date | null
  min?: Date | null
  max?: Date | null
  onSelect*: (date: Date) => void
  onClose*: () => void
```

## bpm.gpsMap
```
  mode*: "display" | "picker"
  center*: { lat: number
  markerPosition*: { lat: number
  onMarkerChange?: (lat: number, lng: number) => void
  onMapClick?: (lat: number, lng: number) => void
  height*: number
```

## bpm.mapViewLeaflet
```
  rl*: typeof import("react-leaflet")
  L*: typeof import("leaflet")
  center*: [number, number]
  zoom*: number
  height*: number | string
  markers*: MapMarker[]
  onMarkerClick?: (index: number, marker: MapMarker) => void
  tileUrl*: string
  tileAttribution?: string
  polylines?: [number, number][][]
  polylineColor?: string
  polygons?: MapPolygonSpec[]
  onMapClick?: (latlng: [number, number]) => void
  className?: string
```

## bpm.timePickerPopover
@component bpm.timePickerPopover @description Popover de sélection heures/minutes utilisé par TimeInput. @example // Usage interne via bpm.timeInput @param {object} props @param {React.RefObject<HTMLElement>} props.anchorRef - Référence à l'élément ancre. Obligatoire. @param {Date|null} props.value - Heure actuelle. Obligatoire. @param {function} props.onSelect - Callback (hours, minutes). Obligatoire. @param {function} props.onClose - Callback à la fermeture. Obligatoire. @parent bpm.timeInput
```
  anchorRef*: React.RefObject<HTMLElement | null>
  value*: Date | null
  onSelect*: (hours: number, minutes: number) => void
  onClose*: () => void
```


## PATTERN MODAL OBLIGATOIRE
```tsx
const [isOpen, setIsOpen] = useState(false)
const [form, setForm] = useState({ nom: '', valeur: 0 })
const [saving, setSaving] = useState(false)

const handleSave = async () => {
  setSaving(true)
  try {
    const res = await fetch('/api/items', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(form),
    })
    if (!res.ok) throw new Error('Erreur serveur')
    setIsOpen(false)
  } catch (e) { console.error(e) }
  finally { setSaving(false) }
}

// Dans return() :
{isOpen && bpm.modal({ isOpen: true, onClose: () => setIsOpen(false), title: 'Créer',
  children: (
    <>
      {bpm.input({ label: 'Nom', value: form.nom, onChange: (v) => setForm({ ...form, nom: v }) })}
      {bpm.button({ children: saving ? '...' : 'Enregistrer', onClick: handleSave, disabled: saving })}
    </>
  )
})}
```


## ROUTES API — App Router uniquement
```ts
// app/api/items/route.ts
import { NextResponse } from 'next/server'
export async function GET() {
  return NextResponse.json([])
}
export async function POST(req: Request) {
  const body = await req.json()
  return NextResponse.json({ success: true, data: body })
}
// INTERDIT : NextApiRequest / export default dans app/api/
```