Composants

Inspector

Le composant canonique « détail d'une sélection » de toutes les surfaces : aperçu d'artefact, propriétés, détail de ligne ou de tâche. Une intégration, un contenu — le mode (docké ou overlay) est un comportement, pas un composant à choisir.

Nouveau (DS 2.0). En mode="auto" (défaut), l'Inspector docke sur desktop et bascule en overlay sur mobile — l'app n'a plus à gérer le mobile. Il compose les moteurs socle sans rien réimplémenter : le DetailPanel (docké, sur Layout + Resizable Astryx) et le SlideOver (overlay, sur Dialog Astryx).

import { Inspector, DetailSection, DetailRow, Button, Badge } from "@forme-ch/ui/controls";

// À poser comme dernier enfant d'un conteneur flex horizontal.
// mode="auto" par défaut : docké desktop, overlay mobile.
<Inspector
  isOpen={selected != null}
  onClose={() => setSelected(null)}
  title="Atelier Dubois"
  autoSaveId="clients-inspector"
  footer={
    <>
      <Button label="Annuler" variant="ghost" onClick={close} />
      <Button label="Enregistrer" variant="primary" onClick={save} />
    </>
  }
>
  <DetailSection title="Identité">
    <DetailRow label="Client">Atelier Dubois</DetailRow>
    <DetailRow label="Statut"><Badge tone="success" label="Actif" /></DetailRow>
  </DetailSection>
</Inspector>

Anatomie

Le contenu se compose avec <DetailSection title> (un groupe titré) et <DetailRow label> (une paire label/valeur) — identique quel que soit le mode. Seule la coque change : colonne dockée redimensionnable, ou panneau overlay avec voile. Le corps défile, la tête et le pied restent fixes.

Quand quoi

✓ Inspector

Le détail d'une sélection qui accompagne une liste, un board ou un canvas (clic → détail). Laisse mode="auto" dans le doute.

✓ SlideOver

Un drawer overlay générique hors inspecteur : un formulaire de création, une édition rapide bloquante (« Nouveau contact », « Classer le crédit »).

Props

Prop	Type	Défaut	Description
`isOpen` *	`boolean`	—	Ouvert / fermé.
`onClose` *	`() => void`	—	Fermeture (bouton ×, clic hors-zone & Échap en overlay).
`mode`	`"auto" \| "docked" \| "overlay"`	`"auto"`	`auto` : docké sur desktop, overlay sous le breakpoint. Sinon forcé.
`breakpoint`	`number`	`768`	Largeur (px) sous laquelle `auto` bascule en overlay.
`title`	`ReactNode`	—	Titre en tête du panneau.
`actions`	`ReactNode`	—	Actions à droite du titre (mode docké).
`footer`	`ReactNode`	—	Barre d'actions collée en bas.
`defaultWidth / minWidth / maxWidth`	`number`	`372 / 320 / 640`	Docké : dimensions de la colonne redimensionnable (px).
`autoSaveId`	`string`	—	Docké : clé `localStorage` pour mémoriser la largeur.
`wide`	`boolean`	`false`	Overlay : version large (640px au lieu de 480px).

Accessibilité

En overlay, le focus est piégé, Échap et le clic hors-zone ferment ; en docké, la poignée de redimensionnement porte le rôle separator et se manipule au clavier. Fournis un title lisible (ou ariaLabel) pour nommer la région.