@sia-ui/cli 0.7.0 → 0.8.0

package/dist/registry/package/components/JobProgress/index.tsx

@@ -0,0 +1,289 @@
+import { useEffect, useState, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import type { ComponentTone } from "@sia-ui/tokens";
+import { formatMessage, useSiaLocale, type SiaLocale } from "@sia-ui/headless";
+import { Alert, type AlertProps } from "../Alert";
+import { StatusBadge, type StatusBadgeProps } from "../Badge";
+import { Button, type ButtonProps } from "../Button";
+import { DurationDisplay, type DurationDisplayProps } from "../DurationDisplay";
+import { Progress, type ProgressProps } from "../Progress";
+import { Steps, type StepItem, type StepsProps } from "../Steps";
+import "./styles.css";
+
+/** Le cycle de vie d'une opération asynchrone. */
+export type JobStatus = "queued" | "running" | "succeeded" | "failed" | "cancelled";
+
+/** Un instant : une date ISO, un horodatage ou une `Date`. */
+export type JobInstant = string | number | Date;
+
+/**
+ * Les textes du composant, à remplacer au cas par cas. Leur valeur par défaut
+ * vient du groupe `jobProgress` de la locale (`JobProgressMessages`) ; ici,
+ * un texte peut aussi être un nœud, et `attempts` une fonction.
+ */
+export interface JobProgressLabels {
+  queued: ReactNode;
+  running: ReactNode;
+  succeeded: ReactNode;
+  failed: ReactNode;
+  cancelled: ReactNode;
+  /** « Essai 2 sur 3 », ou « Essai 2 » sans maximum connu. */
+  attempts: (current: number, max?: number) => ReactNode;
+  /** Le titre de l'encadré d'erreur. */
+  errorTitle: ReactNode;
+  retry: ReactNode;
+  cancel: ReactNode;
+}
+
+/** Les libellés par défaut, tirés de la locale. */
+function libelles(locale: SiaLocale): JobProgressLabels {
+  const m = locale.jobProgress;
+  return {
+    queued: m.queued,
+    running: m.running,
+    succeeded: m.succeeded,
+    failed: m.failed,
+    cancelled: m.cancelled,
+    attempts: (current, max) =>
+      max === undefined
+        ? formatMessage(m.attempt, { current })
+        : formatMessage(m.attemptOf, { current, max }),
+    errorTitle: m.errorTitle,
+    retry: m.retry,
+    cancel: locale.cancel,
+  };
+}
+
+const TONS: Record<JobStatus, ComponentTone> = {
+  queued: "neutral",
+  running: "primary",
+  succeeded: "success",
+  failed: "danger",
+  cancelled: "warning",
+};
+
+export interface JobProgressProps
+  extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  status: JobStatus;
+  /** L'avancement, de 0 à 100. Absent pendant `queued`/`running` : indéterminé. */
+  progress?: number;
+  /** L'étape en cours : « Construction de l'image ». */
+  step?: ReactNode;
+  /** Les étapes de l'opération, affichées en liste ; `currentStep` la met en avant. */
+  steps?: StepItem[];
+  /** L'index de l'étape en cours dans `steps`. */
+  currentStep?: number;
+  /** L'essai en cours, et le nombre maximal quand il est connu. */
+  attempts?: { current: number; max?: number };
+  startedAt?: JobInstant;
+  /** Absent pendant `running` : la durée avance chaque seconde. */
+  finishedAt?: JobInstant;
+  /** Le message d'échec, affiché quand `status` vaut `failed`. */
+  error?: ReactNode;
+  /** Affiche « Relancer » quand l'opération a échoué. */
+  onRetry?: () => void;
+  /** Affiche « Annuler » tant que l'opération est en file ou en cours. */
+  onCancel?: () => void;
+  /** Un emplacement libre sous le reste : un journal, une sortie de commande. */
+  logs?: ReactNode;
+  title?: ReactNode;
+  labels?: Partial<JobProgressLabels>;
+  /** Le ton de chaque statut, pour la pastille et la barre. */
+  statusTones?: Partial<Record<JobStatus, ComponentTone>>;
+
+  /** Les props de la pastille de statut. Sans `value`, `tones` ni `labels`, tirés du statut. */
+  statusBadgeProps?: Partial<Omit<StatusBadgeProps, "value" | "tones" | "labels">>;
+  /** Les props de la barre. Sans `value`, tirée de `progress`. */
+  progressProps?: Partial<Omit<ProgressProps, "value">>;
+  /** Les props de la liste d'étapes. Sans `items` ni `current`. */
+  stepsProps?: Partial<Omit<StepsProps, "items" | "current">>;
+  /** Les props de la durée. Sans `milliseconds`, calculée des deux instants. */
+  durationProps?: Partial<Omit<DurationDisplayProps, "milliseconds">>;
+  /** Les props de l'encadré d'erreur. Sans `children`, qui est `error`. */
+  alertProps?: Partial<Omit<AlertProps, "children">>;
+  /** Les props du bouton « Relancer ». Sans `onClick`, qui est `onRetry`. */
+  retryButtonProps?: Partial<Omit<ButtonProps, "onClick">>;
+  /** Les props du bouton « Annuler ». Sans `onClick`, qui est `onCancel`. */
+  cancelButtonProps?: Partial<Omit<ButtonProps, "onClick">>;
+}
+
+function instant(value: JobInstant | undefined): number | undefined {
+  if (value === undefined) return undefined;
+  const time = new Date(value).getTime();
+  return Number.isNaN(time) ? undefined : time;
+}
+
+/**
+ * Le suivi d'une opération asynchrone : un déploiement, un import, un export.
+ *
+ * Statut, étape, progression, essais, erreur et relance : chaque projet
+ * recomposait ce motif avec les mêmes briques, et chacun oubliait une chose
+ * différente — la durée figée pendant l'exécution, le bouton d'annulation
+ * resté visible après l'échec. Le composant tranche ce qui s'affiche selon le
+ * statut ; l'appelant ne fournit que l'état de l'opération.
+ *
+ * Pensé pour un tiroir de 28 à 40rem : dense, sur une colonne.
+ */
+export function JobProgress({
+  status,
+  progress,
+  step,
+  steps,
+  currentStep = 0,
+  attempts,
+  startedAt,
+  finishedAt,
+  error,
+  onRetry,
+  onCancel,
+  logs,
+  title,
+  labels: labelsProp,
+  statusTones,
+  statusBadgeProps,
+  progressProps,
+  stepsProps,
+  durationProps,
+  alertProps,
+  retryButtonProps,
+  cancelButtonProps,
+  className,
+  ...props
+}: JobProgressProps) {
+  const locale = useSiaLocale();
+  const labels = { ...libelles(locale), ...labelsProp };
+  const statusLabels: Record<JobStatus, ReactNode> = {
+    queued: labels.queued,
+    running: labels.running,
+    succeeded: labels.succeeded,
+    failed: labels.failed,
+    cancelled: labels.cancelled,
+  };
+  const tones = { ...TONS, ...statusTones };
+  const active = status === "queued" || status === "running";
+
+  const debut = instant(startedAt);
+  const fin = instant(finishedAt);
+  // La durée d'une opération en cours avance d'elle-même : sans horloge, elle
+  // resterait figée à la valeur du dernier rendu, et l'on croirait l'opération
+  // bloquée. L'horloge ne tourne que tant qu'il y a quelque chose à compter.
+  const ticking = status === "running" && debut !== undefined && fin === undefined;
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (!ticking) return;
+    setNow(Date.now());
+    const id = window.setInterval(() => setNow(Date.now()), 1000);
+    return () => window.clearInterval(id);
+  }, [ticking]);
+
+  const end = fin ?? (ticking ? now : undefined);
+  const duration = debut !== undefined && end !== undefined ? end - debut : undefined;
+
+  // Une opération terminée n'a de barre que si l'on sait où elle s'est
+  // arrêtée : une barre indéterminée après coup dirait « je travaille ».
+  const showProgress = active || progress !== undefined;
+
+  const stepItems =
+    steps && status === "failed"
+      ? steps.map((item, index) =>
+          index === currentStep && !item.status ? { ...item, status: "error" as const } : item,
+        )
+      : steps;
+  // Réussie, toutes les étapes sont faites, y compris la dernière.
+  const stepIndex = status === "succeeded" && steps ? steps.length : currentStep;
+
+  const canRetry = status === "failed" && onRetry !== undefined;
+  const canCancel = active && onCancel !== undefined;
+
+  return (
+    <section
+      className={cn("sia-job-progress", `sia-job-progress--${status}`, className)}
+      aria-busy={active || undefined}
+      {...props}
+    >
+      <header className="sia-job-progress__header">
+        {title && <div className="sia-job-progress__title">{title}</div>}
+        {/* Seule la pastille est une région vivante : y mettre la durée ferait
+            annoncer chaque seconde qui passe. */}
+        <span role="status" className="sia-job-progress__status">
+          <StatusBadge
+            {...statusBadgeProps}
+            value={status}
+            tones={tones}
+            labels={statusLabels}
+          />
+        </span>
+        {duration !== undefined && (
+          <DurationDisplay
+            style="clock"
+            {...durationProps}
+            className={cn("sia-job-progress__duration", durationProps?.className)}
+            milliseconds={duration}
+          />
+        )}
+      </header>
+
+      {(step || showProgress) && (
+        <div className="sia-job-progress__progress">
+          {showProgress ? (
+            <Progress
+              size="sm"
+              tone={tones[status]}
+              showValue
+              {...(step ? { label: step } : {})}
+              {...progressProps}
+              className={cn("sia-job-progress__bar", progressProps?.className)}
+              // Pas de `value` pendant la file ou l'exécution sans avancement
+              // connu : Progress passe alors en indéterminé.
+              {...(progress !== undefined ? { value: progress } : {})}
+            />
+          ) : (
+            <div className="sia-job-progress__step">{step}</div>
+          )}
+        </div>
+      )}
+
+      {stepItems && stepItems.length > 0 && (
+        <Steps
+          orientation="vertical"
+          size="sm"
+          {...stepsProps}
+          className={cn("sia-job-progress__steps", stepsProps?.className)}
+          items={stepItems}
+          current={stepIndex}
+        />
+      )}
+
+      {attempts && (
+        <div className="sia-job-progress__attempts">
+          {labels.attempts(attempts.current, attempts.max)}
+        </div>
+      )}
+
+      {status === "failed" && error && (
+        <Alert title={labels.errorTitle} {...alertProps} tone="danger">
+          {error}
+        </Alert>
+      )}
+
+      {(canRetry || canCancel) && (
+        <div className="sia-job-progress__actions">
+          {canCancel && (
+            <Button variant="outline" tone="neutral" size="sm" {...cancelButtonProps} onClick={onCancel}>
+              {cancelButtonProps?.children ?? labels.cancel}
+            </Button>
+          )}
+          {canRetry && (
+            <Button size="sm" {...retryButtonProps} onClick={onRetry}>
+              {retryButtonProps?.children ?? labels.retry}
+            </Button>
+          )}
+        </div>
+      )}
+
+      {logs !== undefined && logs !== null && (
+        <div className="sia-job-progress__logs">{logs}</div>
+      )}
+    </section>
+  );
+}

package/dist/registry/package/components/JobProgress/styles.css

@@ -0,0 +1,58 @@
+/* Une seule colonne, un seul écart : le composant vit dans un tiroir de 28 à
+   40rem, où deux colonnes se marcheraient dessus. */
+.sia-job-progress {
+  display: flex;
+  flex-direction: column;
+  gap: .75rem;
+  min-width: 0;
+  color: var(--sia-foreground);
+  font-size: .875rem;
+}
+
+/* Le titre prend la place qui reste ; pastille et durée restent collées à
+   droite, et passent dessous plutôt que d'écraser un titre long. */
+.sia-job-progress__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .5rem;
+  min-width: 0;
+}
+.sia-job-progress__title {
+  flex: 1 1 12rem;
+  min-width: 0;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.sia-job-progress__status { display: inline-flex; flex: none; }
+
+/* Des chiffres de même largeur : la durée qui avance ne fait pas danser la
+   ligne à chaque seconde. */
+.sia-job-progress__duration {
+  flex: none;
+  margin-left: auto;
+  color: var(--sia-muted);
+  font-size: .8rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.sia-job-progress__progress { display: grid; gap: .35rem; min-width: 0; }
+.sia-job-progress__bar .sia-progress__label { min-width: 0; overflow-wrap: anywhere; }
+.sia-job-progress__step { color: var(--sia-muted); overflow-wrap: anywhere; }
+
+.sia-job-progress__attempts {
+  color: var(--sia-muted);
+  font-size: .8rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.sia-job-progress__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: .5rem;
+}
+
+/* Un journal est souvent large : sans `min-width: 0`, il élargirait la
+   colonne entière au lieu de défiler dans sa propre boîte. */
+.sia-job-progress__logs { min-width: 0; }

package/dist/registry/package/components/JsonEditor/index.tsx

@@ -1,8 +1,23 @@
 import { useMemo, useState, type TextareaHTMLAttributes } from "react";
-import { Textarea } from "../Textarea";
+import { Textarea, type TextareaProps } from "../Textarea";
 import { cn } from "@sia-ui/utils";
+import { useSiaLocale } from "@sia-ui/headless";
 import "./styles.css";
-export interface JsonEditorProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "onChange"> { value?: string; defaultValue?: string; onValueChange?: (value: string, parsed: unknown | undefined) => void; formatOnBlur?: boolean; }
+export interface JsonEditorProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "onChange"> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string, parsed: unknown | undefined) => void;
+  formatOnBlur?: boolean;
+  /**
+   * La zone de saisie elle-même : `resize`, classe, correcteur.
+   *
+   * La valeur, la saisie et `invalid` suivent l'analyse du JSON ; `onBlur`
+   * se passe au composant, qui l'enchaîne après le formatage.
+   */
+  textareaProps?: Partial<
+    Omit<TextareaProps, "value" | "defaultValue" | "onChange" | "invalid" | "onBlur">
+  >;
+}
 /**
  * Une zone de saisie qui connaît la forme de ce qu'on y écrit.
  *
@@ -10,4 +25,4 @@ export interface JsonEditorProps extends Omit<TextareaHTMLAttributes<HTMLTextAre
  * analysé à côté du texte : l'appelant reçoit donc les deux, et n'a pas à
  * refaire un `JSON.parse` dans un `try`.
  */
-export function JsonEditor({ value, defaultValue = "{}", onValueChange, formatOnBlur = true, className, ...props }: JsonEditorProps) { const [internal, setInternal] = useState(defaultValue); const current = value ?? internal; const result = useMemo(() => { try { return { valid: true, parsed: JSON.parse(current) as unknown }; } catch { return { valid: false, parsed: undefined }; } }, [current]); const update = (next: string) => { let parsed: unknown | undefined; try { parsed = JSON.parse(next) as unknown; } catch { parsed = undefined; } if (value === undefined) setInternal(next); onValueChange?.(next, parsed); }; return <div className={cn("sia-code-editor", className)}><Textarea {...props} value={current} invalid={!result.valid} resize="vertical" spellCheck={false} onChange={(event) => update(event.target.value)} onBlur={(event) => { if (formatOnBlur && result.valid) update(JSON.stringify(result.parsed, null, 2)); props.onBlur?.(event); }} /><small className={result.valid ? "is-valid" : "is-invalid"}>{result.valid ? "JSON valide" : "JSON invalide"}</small></div>; }
+export function JsonEditor({ value, defaultValue = "{}", onValueChange, formatOnBlur = true, className, textareaProps, ...props }: JsonEditorProps) { const messages = useSiaLocale().jsonEditor; const [internal, setInternal] = useState(defaultValue); const current = value ?? internal; const result = useMemo(() => { try { return { valid: true, parsed: JSON.parse(current) as unknown }; } catch { return { valid: false, parsed: undefined }; } }, [current]); const update = (next: string) => { let parsed: unknown | undefined; try { parsed = JSON.parse(next) as unknown; } catch { parsed = undefined; } if (value === undefined) setInternal(next); onValueChange?.(next, parsed); }; return <div className={cn("sia-code-editor", className)}><Textarea {...props} resize="vertical" spellCheck={false} {...textareaProps} value={current} invalid={!result.valid} onChange={(event) => update(event.target.value)} onBlur={(event) => { if (formatOnBlur && result.valid) update(JSON.stringify(result.parsed, null, 2)); props.onBlur?.(event); }} /><small className={result.valid ? "is-valid" : "is-invalid"}>{result.valid ? messages.valid : messages.invalid}</small></div>; }

package/dist/registry/package/components/JsonView/index.tsx

@@ -0,0 +1,282 @@
+import { useMemo, useState, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import { formatMessage, plural, useSiaLocale, type JsonViewMessages } from "@sia-ui/headless";
+import { useCopyToClipboard } from "@sia-ui/react";
+import { Alert, type AlertProps } from "../Alert";
+import { Button, type ButtonProps } from "../Button";
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from "../Icons";
+import { ScrollArea, type ScrollAreaProps } from "../ScrollArea";
+import "./styles.css";
+
+export interface JsonViewProps {
+  /** Une valeur déjà analysée : objet, tableau, scalaire. */
+  value?: unknown;
+  /**
+   * Un texte JSON, analysé ici. S'il est invalide, il s'affiche tel quel
+   * sous une alerte discrète : une réponse serveur tronquée reste lisible.
+   * Prioritaire sur `value`.
+   */
+  source?: string;
+  /** Les niveaux ouverts au premier affichage. `2` par défaut. */
+  defaultExpandDepth?: number;
+  /** Faux : un simple bloc mis en forme, tout ouvert, sans bascule. */
+  collapsible?: boolean;
+  /** Au-delà, la zone défile. */
+  maxHeight?: number | string;
+  /** Vrai par défaut : un bouton copie le JSON mis en forme. */
+  copyable?: boolean;
+  copyLabel?: string;
+  copiedLabel?: string;
+  /** Le titre de l'alerte quand `source` ne s'analyse pas. */
+  invalidLabel?: ReactNode;
+  className?: string;
+
+  /** Le bouton de copie. Son action et son libellé suivent la copie. */
+  copyButtonProps?: Partial<Omit<ButtonProps, "onClick" | "children">>;
+  /** L'alerte d'un texte invalide. Son contenu est l'erreur d'analyse. */
+  alertProps?: Partial<Omit<AlertProps, "children">>;
+  /** La zone défilante. Sa hauteur maximale passe par `maxHeight`. */
+  scrollAreaProps?: Partial<Omit<ScrollAreaProps, "children" | "maxHeight">>;
+}
+
+type Analyse = { ok: true; data: unknown } | { ok: false; error: string };
+
+interface Contexte {
+  depth: number;
+  collapsible: boolean;
+  /** Les textes, lus une fois par le composant et descendus aux nœuds. */
+  m: JsonViewMessages;
+  language: string;
+}
+
+function estComposite(value: unknown): value is Record<string, unknown> | unknown[] {
+  return typeof value === "object" && value !== null && !(value instanceof Date);
+}
+
+function scalaire(value: unknown) {
+  if (typeof value === "string") {
+    return <span className="sia-json-view__string">{JSON.stringify(value)}</span>;
+  }
+  if (typeof value === "number" || typeof value === "bigint") {
+    return <span className="sia-json-view__number">{String(value)}</span>;
+  }
+  if (typeof value === "boolean") {
+    return <span className="sia-json-view__boolean">{String(value)}</span>;
+  }
+  if (value instanceof Date) {
+    return <span className="sia-json-view__string">{JSON.stringify(value)}</span>;
+  }
+  // `null`, et ce que JSON ne sait pas écrire — `undefined`, une fonction :
+  // affichés quand même, en retrait, plutôt que de disparaître en silence.
+  return <span className="sia-json-view__null">{value === null ? "null" : String(value)}</span>;
+}
+
+interface NoeudProps {
+  /** Une clé d'objet, un indice de tableau, ou rien pour la racine. */
+  name?: string | number;
+  value: unknown;
+  level: number;
+  last: boolean;
+  ctx: Contexte;
+}
+
+/**
+ * Un nœud de l'arbre. Chacun tient son propre état d'ouverture : replier
+ * une branche ne redessine qu'elle, et un nœud replié ne rend pas ses
+ * enfants du tout.
+ */
+function Noeud({ name, value, level, last, ctx }: NoeudProps) {
+  const [ouvert, setOuvert] = useState(!ctx.collapsible || level < ctx.depth);
+  const virgule = last ? null : <span className="sia-json-view__punct">,</span>;
+
+  const cle =
+    name === undefined ? null : (
+      <>
+        <span className={typeof name === "number" ? "sia-json-view__index" : "sia-json-view__key"}>
+          {typeof name === "number" ? name : JSON.stringify(name)}
+        </span>
+        <span className="sia-json-view__punct">: </span>
+      </>
+    );
+
+  if (!estComposite(value)) {
+    return (
+      <li className="sia-json-view__node">
+        <div className="sia-json-view__row">
+          {cle}
+          {scalaire(value)}
+          {virgule}
+        </div>
+      </li>
+    );
+  }
+
+  const tableau = Array.isArray(value);
+  const enfants: Array<[string | number, unknown]> = tableau
+    ? value.map((v, i) => [i, v])
+    : Object.entries(value);
+  const [debut, fin] = tableau ? ["[", "]"] : ["{", "}"];
+
+  if (enfants.length === 0) {
+    return (
+      <li className="sia-json-view__node">
+        <div className="sia-json-view__row">
+          {cle}
+          <span className="sia-json-view__punct">{debut + fin}</span>
+          {virgule}
+        </div>
+      </li>
+    );
+  }
+
+  const n = enfants.length;
+  const resume = tableau ? String(n) : plural(ctx.m, "keys", n, ctx.language);
+  const nom = name === undefined ? ctx.m.root : String(name);
+
+  return (
+    <li className="sia-json-view__node">
+      <div className="sia-json-view__row">
+        {/*
+          Un bouton natif et non `IconButton` : il y en a un par nœud, sur
+          des lignes d'une hauteur de texte, là où `IconButton` impose une
+          cible de bouton de barre d'outils.
+        */}
+        {ctx.collapsible && (
+          <button
+            type="button"
+            className="sia-json-view__toggle"
+            aria-expanded={ouvert}
+            aria-label={formatMessage(ouvert ? ctx.m.collapse : ctx.m.expand, { name: nom })}
+            onClick={() => setOuvert(!ouvert)}
+          >
+            {ouvert ? <ChevronDownIcon /> : <ChevronRightIcon />}
+          </button>
+        )}
+        {cle}
+        {ouvert ? (
+          <span className="sia-json-view__punct">{debut}</span>
+        ) : (
+          <>
+            <span className="sia-json-view__punct">{`${debut}…${fin}`}</span>
+            <span className="sia-json-view__summary">{resume}</span>
+            {virgule}
+          </>
+        )}
+      </div>
+      {ouvert && (
+        <>
+          <ul className="sia-json-view__children">
+            {enfants.map(([k, v], i) => (
+              <Noeud key={k} name={k} value={v} level={level + 1} last={i === n - 1} ctx={ctx} />
+            ))}
+          </ul>
+          <div className="sia-json-view__row">
+              <span className="sia-json-view__punct">{fin}</span>
+            {virgule}
+          </div>
+        </>
+      )}
+    </li>
+  );
+}
+
+/**
+ * Un JSON en lecture seule, que l'on déplie.
+ *
+ * Pour une réponse d'API, une charge utile, une configuration : les types se
+ * distinguent à la couleur, les branches profondes restent repliées, et un
+ * nœud replié dit ce qu'il contient — `{…} 3 clés`. À la différence de
+ * `JsonEditor`, rien ne s'y saisit.
+ */
+export function JsonView({
+  value,
+  source,
+  defaultExpandDepth = 2,
+  collapsible = true,
+  maxHeight,
+  copyable = true,
+  copyLabel: copyLabelProp,
+  copiedLabel: copiedLabelProp,
+  invalidLabel: invalidLabelProp,
+  className,
+  copyButtonProps,
+  alertProps,
+  scrollAreaProps,
+}: JsonViewProps) {
+  const locale = useSiaLocale();
+  const m = locale.jsonView;
+  const copyLabel = copyLabelProp ?? locale.copy;
+  const copiedLabel = copiedLabelProp ?? locale.copied;
+  const invalidLabel = invalidLabelProp ?? m.invalid;
+  const { copy, copied } = useCopyToClipboard();
+
+  const analyse = useMemo<Analyse>(() => {
+    if (source === undefined) return { ok: true, data: value };
+    try {
+      return { ok: true, data: JSON.parse(source) as unknown };
+    } catch (erreur) {
+      return { ok: false, error: erreur instanceof Error ? erreur.message : String(erreur) };
+    }
+  }, [source, value]);
+
+  const ctx = useMemo<Contexte>(
+    () => ({ depth: defaultExpandDepth, collapsible, m, language: locale.language }),
+    [defaultExpandDepth, collapsible, m, locale.language],
+  );
+
+  // Au clic seulement : mettre en forme un gros document à chaque rendu
+  // coûterait pour une copie que personne ne fera peut-être.
+  const copier = () => {
+    const texte = analyse.ok
+      ? (JSON.stringify(analyse.data, null, 2) ?? String(analyse.data))
+      : (source ?? "");
+    void copy(texte);
+  };
+
+  return (
+    <div
+      className={cn(
+        "sia-json-view",
+        !collapsible && "sia-json-view--static",
+        copyable && "sia-json-view--copyable",
+        className,
+      )}
+    >
+      {!analyse.ok && (
+        <Alert tone="warning" title={invalidLabel} {...alertProps}>
+          {/* Le message du moteur (« Unexpected end of JSON input ») est en
+              anglais et varie d'un navigateur à l'autre : une phrase stable,
+              le détail technique en infobulle pour qui le cherche. */}
+          <span title={analyse.error}>{m.invalidDescription}</span>
+        </Alert>
+      )}
+      <div className="sia-json-view__frame">
+        {copyable && (
+          <Button
+            variant="ghost"
+            size="sm"
+            {...(copied ? { leftIcon: <CheckIcon /> } : {})}
+            {...copyButtonProps}
+            className={cn("sia-json-view__copy", copyButtonProps?.className)}
+            onClick={copier}
+          >
+            {copied ? copiedLabel : copyLabel}
+          </Button>
+        )}
+        <ScrollArea
+          {...scrollAreaProps}
+          {...(maxHeight !== undefined ? { maxHeight } : {})}
+          className={cn("sia-json-view__scroll", scrollAreaProps?.className)}
+        >
+          {analyse.ok ? (
+            <ul className="sia-json-view__tree">
+              <Noeud value={analyse.data} level={0} last ctx={ctx} />
+            </ul>
+          ) : (
+            <pre className="sia-json-view__raw">{source}</pre>
+          )}
+        </ScrollArea>
+      </div>
+    </div>
+  );
+}