@sia-ui/cli 0.1.0

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

@@ -0,0 +1,193 @@
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type InputHTMLAttributes,
+  type ReactNode,
+} from "react";
+import { cn, toneClass } from "@sia-ui/utils";
+import type { ComponentTone } from "@sia-ui/tokens";
+import "./styles.css";
+
+type CheckboxValue = string | number;
+type CheckboxGroupContextValue = {
+  value: CheckboxValue[];
+  toggle: (value: CheckboxValue) => void;
+  disabled: boolean | undefined;
+  variant: "default" | "button";
+  size: "sm" | "md" | "lg";
+  tone: ComponentTone;
+};
+const CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(
+  null,
+);
+
+export interface CheckboxGroupProps {
+  value?: CheckboxValue[];
+  defaultValue?: CheckboxValue[];
+  onValueChange?: (value: CheckboxValue[]) => void;
+  disabled?: boolean;
+  variant?: "default" | "button";
+  orientation?: "horizontal" | "vertical";
+  size?: "sm" | "md" | "lg";
+  tone?: ComponentTone;
+  className?: string;
+  children: ReactNode;
+}
+
+export function CheckboxGroup({
+  value,
+  defaultValue = [],
+  onValueChange,
+  disabled,
+  variant = "default",
+  orientation = "vertical",
+  size = "md",
+  tone = "primary",
+  className,
+  children,
+}: CheckboxGroupProps) {
+  const [internal, setInternal] = useState(defaultValue);
+  const current = value ?? internal;
+  const toggle = (item: CheckboxValue) => {
+    const next = current.includes(item)
+      ? current.filter((value) => value !== item)
+      : [...current, item];
+    if (value === undefined) setInternal(next);
+    onValueChange?.(next);
+  };
+  return (
+    <CheckboxGroupContext.Provider
+      value={{ value: current, toggle, disabled, variant, size, tone }}
+    >
+      <div
+        role="group"
+        className={cn(
+          "sia-checkbox-group",
+          `sia-checkbox-group--${orientation}`,
+          `sia-checkbox-group--${variant}`,
+          toneClass("sia-tone", tone),
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </CheckboxGroupContext.Provider>
+  );
+}
+
+export interface CheckboxProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "type" | "value" | "size"
+> {
+  value?: CheckboxValue;
+  label?: ReactNode;
+  children?: ReactNode;
+  description?: ReactNode;
+  indeterminate?: boolean;
+  onValueChange?: (checked: boolean) => void;
+  size?: "sm" | "md" | "lg";
+  tone?: ComponentTone;
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  function Checkbox(
+    {
+      className,
+      value,
+      label,
+      children,
+      description,
+      indeterminate = false,
+      onValueChange,
+      size = "md",
+      tone = "primary",
+      disabled,
+      checked,
+      defaultChecked,
+      onChange,
+      ...props
+    },
+    forwardedRef,
+  ) {
+    const group = useContext(CheckboxGroupContext);
+    const localRef = useRef<HTMLInputElement>(null);
+    const grouped = Boolean(group && value !== undefined);
+
+    // Sans cet état, une case hors groupe et sans `checked` restait peinte
+    // « décochée » pour toujours : l'`<input>` réel basculait bien, mais il est
+    // masqué, et la case visible n'est dessinée que par la classe plus bas —
+    // qui, elle, ne bougeait pas.
+    const [internalChecked, setInternalChecked] = useState(
+      Boolean(defaultChecked),
+    );
+    const isControlled = checked !== undefined;
+    const resolvedChecked = grouped
+      ? group!.value.includes(value!)
+      : isControlled
+        ? checked
+        : internalChecked;
+    const resolvedDisabled = Boolean(disabled || group?.disabled);
+    const resolvedSize = group?.size ?? size;
+    const resolvedTone = group?.tone ?? tone;
+    const variant = group?.variant ?? "default";
+    useEffect(() => {
+      if (localRef.current) localRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    const setRef = (node: HTMLInputElement | null) => {
+      localRef.current = node;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    };
+    return (
+      <label
+        className={cn(
+          "sia-checkbox",
+          `sia-checkbox--${variant}`,
+          `sia-checkbox--${resolvedSize}`,
+          toneClass("sia-tone", resolvedTone),
+          resolvedChecked && "sia-checkbox--checked",
+          indeterminate && "sia-checkbox--indeterminate",
+          resolvedDisabled && "sia-checkbox--disabled",
+          className,
+        )}
+      >
+        <input
+          {...props}
+          ref={setRef}
+          // Le contrôle natif reste focusable et annoncé, mais sorti du rendu :
+          // en simple `opacity:0` il restait peint sous la case, et son propre
+          // dessin clignotait au clic.
+          className="sia-visually-hidden"
+          type="checkbox"
+          value={value}
+          checked={resolvedChecked}
+          disabled={resolvedDisabled}
+          onChange={(event) => {
+            if (grouped) group!.toggle(value!);
+            else if (!isControlled) setInternalChecked(event.target.checked);
+            onValueChange?.(event.target.checked);
+            onChange?.(event);
+          }}
+        />
+        <span className="sia-checkbox__box" aria-hidden="true">
+          <span />
+        </span>
+        {(label ?? children ?? description) && (
+          <span className="sia-checkbox__content">
+            {(label ?? children) && (
+              <span className="sia-checkbox__label">{label ?? children}</span>
+            )}
+            {description && (
+              <span className="sia-checkbox__description">{description}</span>
+            )}
+          </span>
+        )}
+      </label>
+    );
+  },
+);
+Checkbox.displayName = "Checkbox";

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

@@ -0,0 +1,39 @@
+/* Legacy closure: shared checkbox, radio, input, tooltip and popover variants. */
+.sia-checkbox-group { display:flex; gap:.65rem; }
+.sia-checkbox-group--vertical { flex-direction:column; align-items:flex-start; }
+.sia-checkbox-group--horizontal { flex-direction:row; flex-wrap:wrap; }
+.sia-checkbox { --sia-accent:var(--sia-primary); display:inline-flex; align-items:flex-start; gap:.6rem; color:var(--sia-foreground); cursor:pointer; }
+.sia-checkbox__box { display:grid; place-items:center; flex:none; width:1.1rem; height:1.1rem; margin-top:.12rem; border:1.5px solid var(--sia-border); border-radius:.3rem; background:var(--sia-background); transition:.15s; }
+.sia-checkbox__box span { width:.48rem; height:.28rem; border-bottom:2px solid transparent; border-left:2px solid transparent; transform:rotate(-45deg) translateY(-.05rem); scale:0; }
+.sia-checkbox--checked .sia-checkbox__box,.sia-checkbox--indeterminate .sia-checkbox__box { border-color:var(--sia-accent); background:var(--sia-accent); }
+.sia-checkbox--checked .sia-checkbox__box span,.sia-checkbox--indeterminate .sia-checkbox__box span { scale:1; }
+.sia-checkbox--checked .sia-checkbox__box span { border-color:var(--sia-accent-foreground); }
+.sia-checkbox--indeterminate .sia-checkbox__box span { width:.55rem; height:2px; border:0; background:var(--sia-accent-foreground); transform:none; }
+.sia-checkbox:focus-within .sia-checkbox__box { box-shadow:0 0 0 3px color-mix(in srgb,var(--sia-accent) 20%,transparent); }
+.sia-checkbox__content { display:grid; gap:.12rem; }
+.sia-checkbox__label { font-weight:600; }
+.sia-checkbox__description { color:var(--sia-muted); font-size:.8rem; }
+.sia-checkbox--sm { font-size:.85rem; }
+.sia-checkbox--lg { font-size:1.05rem; }
+.sia-checkbox--lg .sia-checkbox__box { width:1.25rem; height:1.25rem; }
+.sia-checkbox--disabled { opacity:.5; cursor:not-allowed; }
+.sia-checkbox--button { align-items:center; padding:.5rem .75rem; border:1px solid var(--sia-border); border-radius:var(--sia-radius); }
+.sia-checkbox--button.sia-checkbox--checked { color:var(--sia-accent); border-color:var(--sia-accent); background:color-mix(in srgb,var(--sia-accent) 8%,transparent); }
+.sia-checkbox--button .sia-checkbox__box { display:none; }
+
+/* La coche se trace au lieu d'apparaître. */
+.sia-checkbox__box {
+  transition:
+    background-color var(--sia-duration-fast) var(--sia-easing-standard),
+    border-color var(--sia-duration-fast) var(--sia-easing-standard),
+    box-shadow var(--sia-duration-fast) var(--sia-easing-standard);
+}
+
+.sia-checkbox__box span {
+  transition: scale var(--sia-duration-base) var(--sia-easing-spring);
+}
+
+.sia-checkbox:active:not(.sia-checkbox--disabled) .sia-checkbox__box {
+  transform: scale(0.92);
+  transition-duration: var(--sia-duration-instant);
+}

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

@@ -0,0 +1,6 @@
+import { forwardRef, useState, type InputHTMLAttributes } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+export interface ColorPickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> { onValueChange?: (value: string) => void; showValue?: boolean; }
+export const ColorPicker = forwardRef<HTMLInputElement, ColorPickerProps>(({ className, onValueChange, showValue = true, value, defaultValue = "#2563eb", ...props }, ref) => { const [internal, setInternal] = useState(String(defaultValue)); const current = value === undefined ? internal : String(value); return <span className={cn("sia-color-picker", className)}><input {...props} ref={ref} type="color" value={current} onChange={(event) => { if (value === undefined) setInternal(event.target.value); onValueChange?.(event.target.value); }} />{showValue && <code>{current}</code>}</span>; });
+ColorPicker.displayName = "ColorPicker";

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

@@ -0,0 +1,2 @@
+.sia-color-picker { display:flex; align-items:center; gap:.75rem; }
+.sia-color-picker input { width:3rem; height:2.5rem; padding:.15rem; border:1px solid var(--sia-border); border-radius:var(--sia-radius); background:var(--sia-background); }

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

@@ -0,0 +1,7 @@
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface CommandItem { id: string; label: string; description?: string; keywords?: string[]; icon?: ReactNode; disabled?: boolean; onSelect: () => void; }
+export interface CommandPaletteProps { open: boolean; onOpenChange: (open: boolean) => void; items: CommandItem[]; placeholder?: string; emptyLabel?: string; className?: string; }
+export function CommandPalette({ open, onOpenChange, items, placeholder = "Rechercher une commande...", emptyLabel = "Aucune commande", className }: CommandPaletteProps) { const [query, setQuery] = useState(""); const [active, setActive] = useState(0); const inputRef = useRef<HTMLInputElement>(null); const filtered = useMemo(() => { const needle = query.trim().toLowerCase(); return items.filter((item) => !needle || [item.label, item.description, ...(item.keywords ?? [])].filter(Boolean).join(" ").toLowerCase().includes(needle)); }, [items, query]); useEffect(() => { if (!open) return; setQuery(""); setActive(0); requestAnimationFrame(() => inputRef.current?.focus()); }, [open]); if (!open) return null; const select = (item: CommandItem | undefined) => { if (!item || item.disabled) return; item.onSelect(); onOpenChange(false); }; return <div className="sia-command-palette__backdrop" onMouseDown={(event) => event.target === event.currentTarget && onOpenChange(false)}><section className={cn("sia-command-palette", className)} role="dialog" aria-modal="true" aria-label="Palette de commandes"><input ref={inputRef} value={query} placeholder={placeholder} aria-label={placeholder} onChange={(event) => { setQuery(event.target.value); setActive(0); }} onKeyDown={(event) => { if (event.key === "Escape") onOpenChange(false); if (event.key === "ArrowDown") { event.preventDefault(); setActive((value) => Math.min(value + 1, filtered.length - 1)); } if (event.key === "ArrowUp") { event.preventDefault(); setActive((value) => Math.max(value - 1, 0)); } if (event.key === "Enter") select(filtered[active]); }} /><div role="listbox">{filtered.length === 0 ? <p>{emptyLabel}</p> : filtered.map((item, index) => <button type="button" role="option" aria-selected={index === active} key={item.id} disabled={item.disabled} onMouseEnter={() => setActive(index)} onClick={() => select(item)}>{item.icon}<span><strong>{item.label}</strong>{item.description && <small>{item.description}</small>}</span></button>)}</div></section></div>; }

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

@@ -0,0 +1,8 @@
+.sia-command-palette__backdrop { position:fixed; inset:0; z-index:1600; display:grid; align-items:start; justify-items:center; padding-top:12vh; background:rgb(2 6 23 / .55); }
+.sia-command-palette { width:min(92vw,38rem); overflow:hidden; border:1px solid var(--sia-border); border-radius:calc(var(--sia-radius) * 1.5); background:var(--sia-background); box-shadow:0 24px 70px rgb(2 6 23 / .3); }
+.sia-command-palette > input { width:100%; min-height:3.2rem; padding:0 1rem; border:0; border-bottom:1px solid var(--sia-border); background:transparent; font:inherit; }
+.sia-command-palette [role="listbox"] { max-height:22rem; overflow:auto; padding:.5rem; }
+.sia-command-palette [role="option"] { display:flex; gap:.75rem; width:100%; padding:.7rem; border:0; border-radius:.4rem; background:transparent; text-align:left; }
+.sia-command-palette [role="option"][aria-selected="true"] { background:var(--sia-surface); }
+.sia-command-palette [role="option"] span { display:grid; }
+.sia-command-palette small { color:var(--sia-muted); }

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

@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+import { Button } from "../Button";
+import type { ComponentTone } from "@sia-ui/tokens";
+import { Modal } from "../Modal";
+import { useSiaLocale } from "@sia-ui/headless";
+
+export interface ConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: ReactNode;
+  description?: ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  tone?: Extract<ComponentTone, "primary" | "danger">;
+  loading?: boolean;
+  onConfirm: () => void | Promise<void>;
+}
+
+export function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel: confirmLabelProp, cancelLabel: cancelLabelProp, tone = "primary", loading = false, onConfirm }: ConfirmDialogProps) {
+    const locale = useSiaLocale();
+    const cancelLabel = cancelLabelProp ?? locale.cancel;
+    const confirmLabel = confirmLabelProp ?? locale.confirm;
+  return <Modal open={open} onOpenChange={onOpenChange} title={title} description={description} closeOnBackdrop={!loading} footer={<><Button variant="ghost" disabled={loading} onClick={() => onOpenChange(false)}>{cancelLabel}</Button><Button className={tone === "danger" ? "sia-button--danger" : undefined} loading={loading} onClick={() => void onConfirm()}>{confirmLabel}</Button></>}>{description ? null : <p>Cette action nécessite votre confirmation.</p>}</Modal>;
+}

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

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export function Container({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("sia-container", className)} {...props} />;
+}
+
+export function Stack({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("sia-stack", className)} {...props} />;
+}

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

@@ -0,0 +1 @@
+.sia-container { width:min(100% - 2rem,80rem); margin-inline:auto; }

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

@@ -0,0 +1,3 @@
+import { Timer, type TimerProps } from "../Timer";
+export type CountdownProps = Omit<TimerProps, "direction">;
+export function Countdown(props: CountdownProps) { return <Timer {...props} direction="down" />; }

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

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+import { PageHeader } from "../PageHeader";
+import { AsyncState } from "../AsyncState";
+import { Pagination } from "../Pagination";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface CrudPageProps { title: ReactNode; description?: ReactNode; actions?: ReactNode; toolbar?: ReactNode; children: ReactNode; loading?: boolean; error?: ReactNode; empty?: boolean; emptyTitle?: ReactNode; page?: number; totalPages?: number; onPageChange?: (page: number) => void; className?: string; }
+export function CrudPage({ title, description, actions, toolbar, children, loading = false, error, empty = false, emptyTitle, page, totalPages, onPageChange, className }: CrudPageProps) { return <section className={cn("sia-crud-page", className)}><PageHeader title={title} description={description} actions={actions} />{toolbar}<AsyncState loading={loading} error={error} empty={empty} emptyTitle={emptyTitle}>{children}</AsyncState>{page !== undefined && totalPages !== undefined && onPageChange && <Pagination page={page} totalPages={totalPages} onPageChange={onPageChange} />}</section>; }

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

@@ -0,0 +1 @@
+.sia-crud-page { display:grid; gap:1.25rem; }

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

@@ -0,0 +1,15 @@
+import { forwardRef, useState, type InputHTMLAttributes } from "react";
+import { cn, formatCurrency, parseCurrency } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface CurrencyInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "inputMode"> { value?: number | null; defaultValue?: number | null; currency?: string; locale?: string; onValueChange?: (value: number | null) => void; invalid?: boolean; }
+
+export const CurrencyInput = forwardRef<HTMLInputElement, CurrencyInputProps>(({ value, defaultValue = null, currency = "XAF", locale = "fr-FR", onValueChange, invalid, className, onBlur, onFocus, ...props }, ref) => {
+  const [focused, setFocused] = useState(false);
+  const [internal, setInternal] = useState<number | null>(defaultValue);
+  const current = value === undefined ? internal : value;
+  const [draft, setDraft] = useState(current === null ? "" : String(current));
+  const display = focused ? draft : current === null ? "" : formatCurrency(current, { locale, currency });
+  return <input {...props} ref={ref} className={cn("sia-input", "sia-currency-input", invalid && "sia-input--invalid", className)} inputMode="decimal" value={display} aria-invalid={invalid || undefined} onFocus={(event) => { setDraft(current === null ? "" : String(current)); setFocused(true); onFocus?.(event); }} onChange={(event) => { setDraft(event.target.value); const next = parseCurrency(event.target.value, { locale }); if (value === undefined) setInternal(next); onValueChange?.(next); }} onBlur={(event) => { setFocused(false); onBlur?.(event); }} />;
+});
+CurrencyInput.displayName = "CurrencyInput";

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

@@ -0,0 +1 @@
+.sia-currency-input { text-align:right; font-variant-numeric:tabular-nums; }

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

@@ -0,0 +1,240 @@
+import { useMemo, type Key, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import {
+  useSiaLocale,
+  useTableQuery,
+  type TableQuery,
+  type TableQueryState,
+  type TableQueryStorage,
+  type TableSort,
+} from "@sia-ui/headless";
+import { ChevronDownIcon, ChevronUpIcon } from "../Icons";
+import "./styles.css";
+
+export interface DataTableColumn<T> {
+  key: string;
+  header: ReactNode;
+  cell: (row: T) => ReactNode;
+  align?: "left" | "center" | "right";
+  width?: string;
+  /** Rend l'entête cliquable. Le tri lui-même appartient au serveur. */
+  sortable?: boolean;
+  /** Le champ envoyé au serveur, si différent de `key`. */
+  sortKey?: string;
+}
+
+export interface DataTableProps<T> {
+  columns: Array<DataTableColumn<T>>;
+  data: T[];
+  getRowKey: (row: T) => Key;
+  caption?: string;
+  empty?: ReactNode;
+  loading?: boolean;
+  /** Le tri en vigueur — celui de `useTableQuery`, ou le vôtre. */
+  sort?: TableSort | null;
+  onSortChange?: (field: string) => void;
+  /** L'entête reste visible quand le tableau défile. */
+  stickyHeader?: boolean;
+  onRowClick?: (row: T) => void;
+  rowClassName?: (row: T) => string | undefined;
+  className?: string;
+}
+
+/**
+ * Un tableau de données.
+ *
+ * Il n'ordonne ni ne filtre rien lui-même : à partir de quelques centaines de
+ * lignes, trier côté client veut dire les avoir toutes téléchargées. Le tri
+ * est donc une intention envoyée au serveur — `onSortChange` — et le tableau
+ * ne fait qu'afficher ce qu'on lui rend.
+ */
+export function DataTable<T>({
+  columns,
+  data,
+  getRowKey,
+  caption,
+  empty: emptyProp,
+  loading = false,
+  sort,
+  onSortChange,
+  stickyHeader = false,
+  onRowClick,
+  rowClassName,
+  className,
+}: DataTableProps<T>) {
+  const locale = useSiaLocale();
+  const empty = emptyProp ?? locale.empty;
+
+  return (
+    <div
+      className={cn(
+        "sia-data-table",
+        stickyHeader && "sia-data-table--sticky",
+        onRowClick && "sia-data-table--clickable",
+        className,
+      )}
+      aria-busy={loading}
+    >
+      <table>
+        {caption && <caption>{caption}</caption>}
+        <thead>
+          <tr>
+            {columns.map((column) => {
+              const field = column.sortKey ?? column.key;
+              const active = sort?.field === field;
+              const sortable = Boolean(column.sortable && onSortChange);
+
+              return (
+                <th
+                  key={column.key}
+                  scope="col"
+                  style={{ textAlign: column.align, width: column.width }}
+                  {...(active
+                    ? {
+                        "aria-sort":
+                          sort?.direction === "asc"
+                            ? ("ascending" as const)
+                            : ("descending" as const),
+                      }
+                    : {})}
+                >
+                  {sortable ? (
+                    <button
+                      type="button"
+                      className="sia-data-table__sort"
+                      data-active={active || undefined}
+                      onClick={() => onSortChange?.(field)}
+                    >
+                      <span>{column.header}</span>
+                      <span className="sia-data-table__arrow" aria-hidden="true">
+                        {active && sort?.direction === "desc" ? (
+                          <ChevronDownIcon />
+                        ) : (
+                          <ChevronUpIcon />
+                        )}
+                      </span>
+                    </button>
+                  ) : (
+                    column.header
+                  )}
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {loading && data.length === 0 ? (
+            // Des lignes fantômes plutôt qu'un mot : la hauteur du tableau ne
+            // change pas quand les données arrivent, et rien ne saute.
+            Array.from({ length: 5 }, (_, index) => (
+              <tr key={`skeleton-${index}`} className="sia-data-table__ghost">
+                {columns.map((column) => (
+                  <td key={column.key}>
+                    <span className="sia-data-table__ghost-bar" />
+                  </td>
+                ))}
+              </tr>
+            ))
+          ) : data.length === 0 ? (
+            <tr>
+              <td colSpan={columns.length} className="sia-data-table__state">
+                {empty}
+              </td>
+            </tr>
+          ) : (
+            data.map((row) => (
+              <tr
+                key={getRowKey(row)}
+                className={rowClassName?.(row)}
+                {...(onRowClick
+                  ? {
+                      onClick: () => onRowClick(row),
+                      tabIndex: 0,
+                      onKeyDown: (event) => {
+                        if (event.key === "Enter") onRowClick(row);
+                      },
+                    }
+                  : {})}
+              >
+                {columns.map((column) => (
+                  <td key={column.key} style={{ textAlign: column.align }}>
+                    {column.cell(row)}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+
+      {/* Un rechargement en place — page suivante, tri changé — garde les
+          lignes visibles et les voile. Les faire disparaître donnerait
+          l'impression d'avoir perdu les données. */}
+      {loading && data.length > 0 && (
+        <div className="sia-data-table__veil" aria-hidden="true" />
+      )}
+    </div>
+  );
+}
+
+/**
+ * L'état du tableau dans la barre d'adresse.
+ *
+ * `history.replaceState` plutôt que `pushState` : trier une colonne trois
+ * fois de suite ne doit pas demander trois retours en arrière pour revenir
+ * d'où l'on vient.
+ */
+export function createUrlTableStorage(
+  mode: "replace" | "push" = "replace",
+): TableQueryStorage {
+  return {
+    read: () =>
+      typeof window === "undefined" ? "" : window.location.search,
+    write: (value) => {
+      if (typeof window === "undefined") return;
+      const url = `${window.location.pathname}${value ? `?${value}` : ""}${window.location.hash}`;
+      if (mode === "push") window.history.pushState(null, "", url);
+      else window.history.replaceState(null, "", url);
+    },
+    subscribe: (listener) => {
+      if (typeof window === "undefined") return () => {};
+      window.addEventListener("popstate", listener);
+      return () => window.removeEventListener("popstate", listener);
+    },
+  };
+}
+
+export interface UseDataTableQueryOptions {
+  defaultState?: Partial<TableQueryState>;
+  /** `false` garde l'état en mémoire — utile dans une modale. */
+  syncUrl?: boolean;
+  /** Empile une entrée d'historique à chaque changement. */
+  history?: "replace" | "push";
+  /** Préfixe des clés, pour deux tableaux sur la même page. */
+  prefix?: string;
+}
+
+/**
+ * Tri, filtres et pagination d'un tableau, synchronisés avec l'URL.
+ *
+ * Le calcul vit dans `@sia-ui/headless`; il n'y a ici que le branchement sur
+ * la barre d'adresse, qui est la seule partie propre au navigateur.
+ */
+export function useDataTableQuery(
+  options: UseDataTableQueryOptions = {},
+): TableQuery {
+  const { defaultState, syncUrl = true, history = "replace", prefix } = options;
+
+  // Créé une fois : un objet reconstruit à chaque rendu réabonnerait
+  // l'écouteur `popstate` en boucle.
+  const storage = useMemo(
+    () => (syncUrl ? createUrlTableStorage(history) : undefined),
+    [history, syncUrl],
+  );
+
+  return useTableQuery({
+    ...(defaultState ? { defaultState } : {}),
+    ...(storage ? { storage } : {}),
+    ...(prefix ? { prefix } : {}),
+  });
+}