@sia-ui/cli 0.1.0

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

@@ -0,0 +1,149 @@
+import { type ReactNode } from "react";
+import { cn, toneClass } from "@sia-ui/utils";
+import type { ComponentSize, ComponentTone } from "@sia-ui/tokens";
+import { useComponentDefaults, useSiaLocale } from "@sia-ui/headless";
+import "./styles.css";
+
+export interface ProgressProps {
+  /** La valeur courante. Omise, la barre passe en indéterminé. */
+  value?: number | undefined;
+  max?: number;
+  shape?: "bar" | "circle";
+  tone?: ComponentTone;
+  size?: ComponentSize;
+  /** Épaisseur du trait, en pixels. Par défaut selon la taille. */
+  thickness?: number | undefined;
+  /** Affiche le pourcentage — au centre du cercle, en bout de barre. */
+  showValue?: boolean;
+  /** Remplace l'affichage par défaut. */
+  format?: ((percent: number, value: number, max: number) => ReactNode) | undefined;
+  label?: ReactNode;
+  className?: string;
+}
+
+const BAR_HEIGHT: Record<ComponentSize, number> = { sm: 4, md: 8, lg: 12 };
+const CIRCLE_SIZE: Record<ComponentSize, number> = { sm: 36, md: 56, lg: 84 };
+const CIRCLE_STROKE: Record<ComponentSize, number> = { sm: 4, md: 6, lg: 8 };
+
+/**
+ * L'avancement d'une tâche.
+ *
+ * Sans `value`, le composant passe en indéterminé plutôt que d'afficher zéro :
+ * « je travaille » et « je n'ai rien fait » ne se ressemblent pas.
+ */
+export function Progress(props: ProgressProps) {
+  const defaults = useComponentDefaults<ProgressProps>("progress");
+  const {
+    value,
+    max = 100,
+    shape = "bar",
+    tone = "primary",
+    size = "md",
+    thickness,
+    showValue = false,
+    format,
+    label,
+    className,
+  } = { ...defaults, ...props };
+
+  const locale = useSiaLocale();
+  const indeterminate = value === undefined || value === null;
+  const safeMax = max > 0 ? max : 100;
+  const clamped = indeterminate ? 0 : Math.min(Math.max(value, 0), safeMax);
+  const percent = Math.round((clamped / safeMax) * 100);
+  const text = format
+    ? format(percent, clamped, safeMax)
+    : `${percent}\u00A0%`;
+
+  const aria = {
+    role: "progressbar" as const,
+    "aria-valuemin": 0,
+    "aria-valuemax": safeMax,
+    ...(indeterminate ? {} : { "aria-valuenow": clamped }),
+    ...(indeterminate ? { "aria-label": locale.loading } : {}),
+  };
+
+  if (shape === "circle") {
+    const box = CIRCLE_SIZE[size];
+    const stroke = thickness ?? CIRCLE_STROKE[size];
+    const radius = (box - stroke) / 2;
+    const circumference = 2 * Math.PI * radius;
+
+    return (
+      <div
+        className={cn(
+          "sia-progress",
+          "sia-progress--circle",
+          toneClass("sia-progress", tone),
+          indeterminate && "sia-progress--indeterminate",
+          className,
+        )}
+        {...aria}
+      >
+        <svg width={box} height={box} viewBox={`0 0 ${box} ${box}`} aria-hidden="true">
+          <circle
+            className="sia-progress__track"
+            cx={box / 2}
+            cy={box / 2}
+            r={radius}
+            strokeWidth={stroke}
+          />
+          <circle
+            className="sia-progress__indicator"
+            cx={box / 2}
+            cy={box / 2}
+            r={radius}
+            strokeWidth={stroke}
+            strokeDasharray={circumference}
+            // Le trait se dessine par le décalage du pointillé : une seule
+            // propriété animée, sur le compositeur, sans reflow.
+            strokeDashoffset={
+              indeterminate
+                ? circumference * 0.75
+                : circumference - (clamped / safeMax) * circumference
+            }
+          />
+        </svg>
+        {(showValue || label) && (
+          <span className="sia-progress__center">
+            {showValue && !indeterminate && (
+              <strong className="sia-progress__value">{text}</strong>
+            )}
+            {label && <span className="sia-progress__label">{label}</span>}
+          </span>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "sia-progress",
+        "sia-progress--bar",
+        toneClass("sia-progress", tone),
+        indeterminate && "sia-progress--indeterminate",
+        className,
+      )}
+    >
+      {(label || (showValue && !indeterminate)) && (
+        <div className="sia-progress__header">
+          {label && <span className="sia-progress__label">{label}</span>}
+          {showValue && !indeterminate && (
+            <span className="sia-progress__value">{text}</span>
+          )}
+        </div>
+      )}
+      <div
+        className="sia-progress__track"
+        style={{ height: thickness ?? BAR_HEIGHT[size] }}
+        {...aria}
+      >
+        <div
+          className="sia-progress__indicator"
+          style={indeterminate ? undefined : { width: `${percent}%` }}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,101 @@
+.sia-progress { --sia-progress-color: var(--sia-primary); display: grid; gap: .375rem; }
+
+.sia-progress__header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
+.sia-progress__label { color: var(--sia-muted); font-size: .8rem; }
+.sia-progress__value { color: var(--sia-foreground); font-size: .8rem; font-variant-numeric: tabular-nums; font-weight: 600; }
+
+/* ── Barre ─────────────────────────────────────────────────────────────── */
+
+.sia-progress--bar .sia-progress__track {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--sia-progress-color) 14%, var(--sia-surface));
+}
+
+.sia-progress--bar .sia-progress__indicator {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--sia-progress-color) 80%, white),
+    var(--sia-progress-color)
+  );
+  /* La largeur s'anime : un saut de 20 % à 80 % doit se voir monter, sinon on
+     ne sait pas si la valeur a changé ou si la page a été rechargée. */
+  transition: width var(--sia-duration-slow) var(--sia-easing-standard);
+}
+
+/* Le reflet : une bande claire qui traverse la barre, lentement. Elle ne dit
+   rien de plus que « ça avance », mais c'est précisément ce qu'on regarde. */
+.sia-progress--bar .sia-progress__indicator::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgb(255 255 255 / 0.35),
+    transparent
+  );
+  transform: translateX(-100%);
+  animation: sia-progress-sheen 2.2s var(--sia-easing-standard) infinite;
+}
+
+.sia-progress--bar.sia-progress--indeterminate .sia-progress__indicator {
+  width: 40%;
+  transition: none;
+  animation: sia-progress-slide 1.4s var(--sia-easing-standard) infinite;
+}
+.sia-progress--bar.sia-progress--indeterminate .sia-progress__indicator::after { animation: none; }
+
+@keyframes sia-progress-sheen {
+  0% { transform: translateX(-100%); }
+  60%, 100% { transform: translateX(100%); }
+}
+@keyframes sia-progress-slide {
+  0% { margin-left: -40%; }
+  100% { margin-left: 100%; }
+}
+
+/* ── Cercle ────────────────────────────────────────────────────────────── */
+
+.sia-progress--circle { position: relative; display: inline-grid; place-items: center; gap: 0; }
+.sia-progress--circle svg { display: block; transform: rotate(-90deg); }
+
+.sia-progress--circle .sia-progress__track {
+  fill: none;
+  stroke: color-mix(in srgb, var(--sia-progress-color) 14%, var(--sia-surface));
+}
+.sia-progress--circle .sia-progress__indicator {
+  fill: none;
+  stroke: var(--sia-progress-color);
+  stroke-linecap: round;
+  transition: stroke-dashoffset var(--sia-duration-slow) var(--sia-easing-standard);
+}
+.sia-progress--circle.sia-progress--indeterminate svg {
+  animation: sia-spin 1.1s linear infinite;
+}
+.sia-progress--circle.sia-progress--indeterminate .sia-progress__indicator {
+  transition: none;
+}
+
+.sia-progress__center {
+  position: absolute;
+  display: grid;
+  gap: 0;
+  justify-items: center;
+  line-height: 1.1;
+  text-align: center;
+}
+.sia-progress--circle .sia-progress__label { font-size: .7rem; }
+
+/* ── Tons ──────────────────────────────────────────────────────────────── */
+
+.sia-progress--neutral { --sia-progress-color: var(--sia-muted); }
+.sia-progress--primary { --sia-progress-color: var(--sia-primary); }
+.sia-progress--info { --sia-progress-color: var(--sia-info); }
+.sia-progress--success { --sia-progress-color: var(--sia-success); }
+.sia-progress--warning { --sia-progress-color: var(--sia-warning); }
+.sia-progress--danger { --sia-progress-color: var(--sia-danger); }

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

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface QRCodeProps { value: string; size?: number; label?: string; render?: (value: string, size: number) => ReactNode; className?: string; }
+export function QRCode({ value, size = 160, label = "Code QR", render, className }: QRCodeProps) { return <figure className={cn("sia-qr-code", className)} aria-label={label} style={{ width: size }}><div className="sia-qr-code__frame" style={{ width: size, height: size }}>{render ? render(value, size) : <div className="sia-qr-code__adapter"><strong>QR</strong><span>Encodeur requis</span></div>}</div><figcaption>{value}</figcaption></figure>; }

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

@@ -0,0 +1,5 @@
+.sia-qr-code { display:grid; gap:.5rem; margin:0; }
+.sia-qr-code__frame { display:grid; place-items:center; overflow:hidden; border:1px solid var(--sia-border); background:#fff; }
+.sia-qr-code__adapter { display:grid; place-items:center; gap:.25rem; color:#0f172a; }
+.sia-qr-code__adapter strong { font-size:2rem; }
+.sia-qr-code__adapter span,.sia-qr-code figcaption { overflow:hidden; color:var(--sia-muted); font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }

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

@@ -0,0 +1,29 @@
+import { createContext, useContext, useId, 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 RadioValue = string | number;
+type RadioContextValue = { name: string; value: RadioValue | undefined; setValue: (value: RadioValue) => void; disabled: boolean | undefined; size: "sm" | "md" | "lg"; tone: ComponentTone; };
+const RadioGroupContext = createContext<RadioContextValue | null>(null);
+
+export interface RadioGroupProps {
+  id?: string; name?: string; label?: ReactNode; value?: RadioValue; defaultValue?: RadioValue; onValueChange?: (value: RadioValue) => void; orientation?: "horizontal" | "vertical"; disabled?: boolean; size?: "sm" | "md" | "lg"; tone?: ComponentTone; className?: string; "aria-describedby"?: string; "aria-labelledby"?: string; "aria-invalid"?: boolean; "aria-required"?: boolean; children: ReactNode;
+}
+export function RadioGroup({ id, name, label, value, defaultValue, onValueChange, orientation = "vertical", disabled, size = "md", tone = "primary", className, children, ...ariaProps }: RadioGroupProps) {
+  const generatedName = useId(); const [internal, setInternal] = useState(defaultValue); const current = value ?? internal;
+  const setValue = (next: RadioValue) => { if (value === undefined) setInternal(next); onValueChange?.(next); };
+  return <fieldset id={id} className={cn("sia-radio-group", `sia-radio-group--${orientation}`, toneClass("sia-tone", tone), className)} disabled={disabled} {...ariaProps}>{label && <legend className="sia-radio-group__legend">{label}</legend>}<RadioGroupContext.Provider value={{ name: name ?? generatedName, value: current, setValue, disabled, size, tone }}>{children}</RadioGroupContext.Provider></fieldset>;
+}
+
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "name" | "value" | "size"> { value: RadioValue; label?: ReactNode; children?: ReactNode; }
+export function Radio({ value, label, children, className, disabled, onChange, ...props }: RadioProps) {
+  const group = useContext(RadioGroupContext); if (!group) throw new Error("Radio must be used inside RadioGroup."); const checked = group.value === value; const resolvedDisabled = Boolean(disabled || group.disabled);
+  return <label className={cn("sia-radio", `sia-radio--${group.size}`, toneClass("sia-tone", group.tone), checked && "sia-radio--checked", resolvedDisabled && "sia-radio--disabled", className)}><input {...props} className="sia-visually-hidden" type="radio" name={group.name} value={value} checked={checked} disabled={resolvedDisabled} onChange={(event) => { group.setValue(value); onChange?.(event); }} /><span className="sia-radio__dot" aria-hidden="true" /><span className="sia-radio__label">{label ?? children}</span></label>;
+}
+
+export interface RadioButtonProps { value: RadioValue; disabled?: boolean; children: ReactNode; className?: string; }
+export function RadioButton({ value, disabled, children, className }: RadioButtonProps) {
+  const group = useContext(RadioGroupContext); if (!group) throw new Error("RadioButton must be used inside RadioGroup."); const checked = group.value === value; const resolvedDisabled = Boolean(disabled || group.disabled);
+  return <button type="button" role="radio" aria-checked={checked} disabled={resolvedDisabled} className={cn("sia-radio-button", `sia-radio-button--${group.size}`, toneClass("sia-tone", group.tone), checked && "sia-radio-button--checked", className)} onClick={() => group.setValue(value)}>{children}</button>;
+}

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

@@ -0,0 +1,20 @@
+.sia-radio-group { display:flex; gap:.75rem; padding:0; margin:0; border:0; }
+.sia-radio-group--vertical { flex-direction:column; }
+.sia-radio-group--horizontal { flex-direction:row; flex-wrap:wrap; }
+.sia-radio-group__legend { margin-bottom:.65rem; font-weight:600; }
+.sia-radio { --sia-accent:var(--sia-primary); display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; }
+.sia-radio__dot { display:grid; place-items:center; width:1.1rem; height:1.1rem; border:1.5px solid var(--sia-border); border-radius:50%; }
+.sia-radio__dot::after { content:""; width:.52rem; height:.52rem; border-radius:50%; background:transparent; }
+.sia-radio--checked .sia-radio__dot { border-color:var(--sia-accent); }
+.sia-radio--checked .sia-radio__dot::after { background:var(--sia-accent); }
+.sia-radio:focus-within .sia-radio__dot { box-shadow:0 0 0 3px color-mix(in srgb,var(--sia-accent) 20%,transparent); }
+.sia-radio--disabled { opacity:.5; cursor:not-allowed; }
+.sia-radio--sm { font-size:.85rem; }
+.sia-radio--lg { font-size:1.05rem; }
+.sia-radio-button { --sia-accent:var(--sia-primary); min-height:2.35rem; padding:0 .8rem; border:1px solid var(--sia-border); color:var(--sia-foreground); background:var(--sia-background); font:inherit; cursor:pointer; }
+.sia-radio-button:first-of-type { border-radius:var(--sia-radius) 0 0 var(--sia-radius); }
+.sia-radio-button:last-of-type { border-radius:0 var(--sia-radius) var(--sia-radius) 0; }
+.sia-radio-button + .sia-radio-button { margin-left:-1px; }
+.sia-radio-button--checked { position:relative; z-index:1; color:var(--sia-accent); border-color:var(--sia-accent); background:color-mix(in srgb,var(--sia-accent) 9%,transparent); }
+.sia-radio-button--sm { min-height:2rem; }
+.sia-radio-button--lg { min-height:2.75rem; }

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

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import { cn } from "@sia-ui/utils";
+import { StarIcon } from "../Icons";
+import "./styles.css";
+export interface RatingProps {
+  id?: string;
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  max?: number;
+  /** Autorise les demi-valeurs — 3,5 sur 5. */
+  allowHalf?: boolean;
+  allowClear?: boolean;
+  disabled?: boolean;
+  label?: string;
+  className?: string;
+  "aria-describedby"?: string;
+  "aria-labelledby"?: string;
+  "aria-invalid"?: boolean;
+  "aria-required"?: boolean;
+}
+export function Rating({
+  id,
+  value,
+  defaultValue = 0,
+  onValueChange,
+  max = 5,
+  allowHalf = false,
+  allowClear = true,
+  disabled,
+  label = "Note",
+  className,
+  ...ariaProps
+}: RatingProps) {
+  const [internal, setInternal] = useState(defaultValue);
+  const current = value ?? internal;
+  const update = (next: number) => {
+    const resolved = allowClear && next === current ? 0 : next;
+    if (value === undefined) setInternal(resolved);
+    onValueChange?.(resolved);
+  };
+  return (
+    <div
+      id={id}
+      role="radiogroup"
+      aria-label={label}
+      className={cn("sia-rating", className)}
+      {...ariaProps}
+    >
+      {Array.from({ length: max }, (_, index) => index + 1).map((item) => {
+        // Part remplie de CETTE étoile : pleine, vide, ou entre les deux.
+        // Impossible avec un caractère — d'où le passage au tracé.
+        const filled = Math.min(1, Math.max(0, current - item + 1));
+
+        return (
+          <button
+            key={item}
+            type="button"
+            role="radio"
+            aria-checked={current === item}
+            aria-label={`${item} sur ${max}`}
+            disabled={disabled}
+            className={filled > 0 ? "is-active" : ""}
+            style={{ "--sia-rating-fill": `${filled * 100}%` } as React.CSSProperties}
+            onClick={(event) => {
+              if (!allowHalf) return update(item);
+              // Moitié gauche du bouton = demi-étoile.
+              const box = event.currentTarget.getBoundingClientRect();
+              const half = event.clientX - box.left < box.width / 2;
+              update(half ? item - 0.5 : item);
+            }}
+          >
+            <span className="sia-rating__star" aria-hidden="true">
+              <StarIcon className="sia-rating__outline" />
+              <StarIcon className="sia-rating__fill" fill="currentColor" />
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,41 @@
+.sia-rating { display:inline-flex; gap:.2rem; }
+.sia-rating button { padding:.1rem; border:0; color:var(--sia-border); background:transparent; font-size:1.5rem; cursor:pointer; }
+.sia-rating button.is-active { color:var(--sia-warning); }
+
+/* La demi-étoile : deux tracés superposés, celui du dessus rogné à la part
+   remplie. Un caractère ne permettait pas ça — d'où son remplacement. */
+.sia-rating__star {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+}
+
+.sia-rating__outline,
+.sia-rating__fill {
+  grid-area: 1 / 1;
+  width: 1em;
+  height: 1em;
+}
+
+.sia-rating__outline {
+  color: var(--sia-border-strong);
+}
+
+.sia-rating__fill {
+  color: var(--sia-warning);
+  clip-path: inset(0 calc(100% - var(--sia-rating-fill, 0%)) 0 0);
+  transition: clip-path var(--sia-duration-base) var(--sia-easing-standard);
+}
+
+.sia-rating button {
+  transition: transform var(--sia-duration-fast) var(--sia-easing-spring);
+}
+
+.sia-rating button:hover:not(:disabled) {
+  transform: scale(1.15);
+}
+
+.sia-rating button:active:not(:disabled) {
+  transform: scale(0.95);
+  transition-duration: var(--sia-duration-instant);
+}

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import { Autocomplete, type AutocompleteProps } from "../Autocomplete";
+import type { SelectOption } from "../Select";
+import "./styles.css";
+export interface ReferenceOption extends SelectOption { description?: ReactNode; }
+export interface ReferenceSelectProps extends Omit<AutocompleteProps, "options"> { options: ReferenceOption[]; }
+export function ReferenceSelect({ options, ...props }: ReferenceSelectProps) { return <Autocomplete {...props} options={options.map((option) => ({ ...option, label: <span className="sia-reference-select__option"><strong>{option.label}</strong>{option.description && <small>{option.description}</small>}</span> }))} />; }

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

@@ -0,0 +1,2 @@
+.sia-reference-select__option { display:grid; }
+.sia-reference-select__option small { color:var(--sia-muted); }

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

@@ -0,0 +1,22 @@
+import { useEffect, useState, type HTMLAttributes } from "react";
+import { cn, formatDate, formatTimeAgo } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface RelativeTimeProps extends Omit<HTMLAttributes<HTMLTimeElement>, "dateTime"> {
+  value: Date | string | number;
+  locale?: string;
+  prefix?: string;
+  refreshInterval?: number;
+}
+
+export function RelativeTime({ value, locale = "fr-FR", prefix, refreshInterval = 60_000, className, title, ...props }: RelativeTimeProps) {
+  const [, refresh] = useState(0);
+  useEffect(() => {
+    if (refreshInterval <= 0) return;
+    const id = window.setInterval(() => refresh((current) => current + 1), refreshInterval);
+    return () => window.clearInterval(id);
+  }, [refreshInterval]);
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  return <time className={cn("sia-relative-time", className)} dateTime={date.toISOString()} title={title ?? formatDate(date, { locale, dateStyle:"full", timeStyle:"short" })} {...props}>{formatTimeAgo(date, { locale, ...(prefix ? { prefix } : {}) })}</time>;
+}

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

@@ -0,0 +1 @@
+.sia-relative-time { color:var(--sia-muted); font-size:.875rem; }

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

@@ -0,0 +1,127 @@
+import { useEffect, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import {
+  useSession,
+  type PermissionRule,
+  type SessionState,
+  type SessionStore,
+} from "@sia-ui/headless";
+import { Spinner } from "../Spinner";
+import "./styles.css";
+
+export interface RequireSessionProps<TUser, TTenant, TRule> {
+  session: SessionStore<TUser, TTenant, TRule>;
+  children: ReactNode;
+  /** La règle de droits exigée, s'il y en a une. */
+  require?: TRule;
+  /**
+   * Affiché pendant la vérification.
+   *
+   * Ce rendu est ce qui distingue cette garde d'un `if (!user) redirect` :
+   * tant que le serveur n'a pas répondu, on attend. Rediriger pendant la
+   * vérification renvoie à la page de connexion quelqu'un qui est connecté.
+   */
+  pending?: ReactNode;
+  /** Rendu quand il n'y a pas de session. */
+  fallback?: ReactNode;
+  /** Rendu quand la session existe mais que les droits manquent. */
+  forbidden?: ReactNode;
+  /** Laisse passer une session `incomplete` — profil pas encore rempli. */
+  allowIncomplete?: boolean;
+  /**
+   * Appelé une fois quand la vérification conclut à l'absence de session.
+   *
+   * C'est ici que l'application navigue : `navigate("/login")`,
+   * `router.push(…)`, ou rien du tout si `fallback` suffit. La garde ne
+   * connaît aucun routeur.
+   */
+  onUnauthenticated?: (state: SessionState<TUser, TTenant>) => void;
+  onForbidden?: (state: SessionState<TUser, TTenant>) => void;
+  onIncomplete?: (state: SessionState<TUser, TTenant>) => void;
+  className?: string;
+}
+
+/**
+ * Ce qui se trouve derrière une session valide.
+ *
+ * Écrite cinq fois dans les projets du disque D, cinq fois de la même façon
+ * à la cible de redirection près. Elle ne dépend d'aucun routeur : elle rend
+ * un état et prévient, l'application décide où aller.
+ *
+ * > Ceci protège l'interface, pas les données. Une route masquée reste une
+ * > route ouverte tant que le serveur ne refuse pas l'appel.
+ */
+export function RequireSession<TUser, TTenant, TRule = PermissionRule>({
+  session,
+  children,
+  require: rule,
+  pending,
+  fallback = null,
+  forbidden = null,
+  allowIncomplete = false,
+  onUnauthenticated,
+  onForbidden,
+  onIncomplete,
+  className,
+}: RequireSessionProps<TUser, TTenant, TRule>) {
+  const state = useSession(session);
+
+  const denied =
+    state.status === "authenticated" &&
+    rule !== undefined &&
+    !session.access.can(rule);
+  const incomplete = state.status === "incomplete" && !allowIncomplete;
+
+  // Les rappels partent d'un effet, jamais du rendu : naviguer pendant un
+  // rendu démonte l'arbre que React est en train de construire.
+  useEffect(() => {
+    if (state.status === "anonymous") onUnauthenticated?.(state);
+    else if (incomplete) onIncomplete?.(state);
+    else if (denied) onForbidden?.(state);
+    // Seul le statut compte : réagir à chaque changement de l'objet d'état
+    // relancerait la navigation à chaque rendu.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.status, denied, incomplete]);
+
+  if (state.status === "checking") {
+    return (
+      <div className={cn("sia-require-session", className)} aria-busy="true">
+        {pending ?? (
+          <div className="sia-require-session__pending">
+            <Spinner />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (state.status === "anonymous") return <>{fallback}</>;
+  if (incomplete) return <>{fallback}</>;
+  if (denied) return <>{forbidden}</>;
+
+  return <>{children}</>;
+}
+
+export interface CanProps<TUser, TTenant, TRule> {
+  session: SessionStore<TUser, TTenant, TRule>;
+  require: TRule;
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+/**
+ * Un morceau d'interface derrière un droit.
+ *
+ * `PermissionGate` fait la même chose à partir d'un tableau de permissions
+ * passé à la main; celui-ci lit la session et suit son évaluateur — jokers,
+ * expression textuelle ou égalité stricte selon le serveur.
+ */
+export function Can<TUser, TTenant, TRule = PermissionRule>({
+  session,
+  require: rule,
+  children,
+  fallback = null,
+}: CanProps<TUser, TTenant, TRule>) {
+  useSession(session);
+  return <>{session.access.can(rule) ? children : fallback}</>;
+}

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

@@ -0,0 +1,13 @@
+.sia-require-session { display: contents; }
+
+/* Pendant la vérification, la place est tenue plutôt que laissée vide : une
+   page qui se remplit d'un coup après un écran blanc se lit comme un
+   rechargement, pas comme un chargement. */
+.sia-require-session__pending {
+  display: grid;
+  place-items: center;
+  min-height: 12rem;
+  padding: 2rem;
+  color: var(--sia-muted);
+  animation: sia-fade-in var(--sia-duration-base) var(--sia-easing-standard);
+}

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

@@ -0,0 +1,6 @@
+import { useState, type PointerEvent, type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+
+export interface ResizablePanelProps { first: ReactNode; second: ReactNode; defaultSize?: number; minSize?: number; maxSize?: number; direction?: "horizontal" | "vertical"; className?: string; }
+export function ResizablePanel({ first, second, defaultSize = 50, minSize = 20, maxSize = 80, direction = "horizontal", className }: ResizablePanelProps) { const [size, setSize] = useState(defaultSize); const start = (event: PointerEvent<HTMLDivElement>) => { const container = event.currentTarget.parentElement; if (!container) return; event.currentTarget.setPointerCapture(event.pointerId); const move = (moveEvent: globalThis.PointerEvent) => { const rect = container.getBoundingClientRect(); const next = direction === "horizontal" ? ((moveEvent.clientX - rect.left) / rect.width) * 100 : ((moveEvent.clientY - rect.top) / rect.height) * 100; setSize(Math.min(maxSize, Math.max(minSize, next))); }; const stop = () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", stop); }; window.addEventListener("pointermove", move); window.addEventListener("pointerup", stop); }; const firstStyle = { flexBasis: `${size}%` }; return <div className={cn("sia-resizable-panel", `sia-resizable-panel--${direction}`, className)}><section style={firstStyle}>{first}</section><div className="sia-resizable-panel__handle" role="separator" aria-orientation={direction} aria-valuenow={Math.round(size)} tabIndex={0} onPointerDown={start} onKeyDown={(event) => { const delta = event.key === "ArrowLeft" || event.key === "ArrowUp" ? -5 : event.key === "ArrowRight" || event.key === "ArrowDown" ? 5 : 0; if (delta) { event.preventDefault(); setSize((current) => Math.min(maxSize, Math.max(minSize, current + delta))); } }} /><section>{second}</section></div>; }

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

@@ -0,0 +1,5 @@
+.sia-resizable-panel { display:flex; min-height:18rem; overflow:hidden; border:1px solid var(--sia-border); }
+.sia-resizable-panel--vertical { flex-direction:column; }
+.sia-resizable-panel > section { min-width:0; min-height:0; flex:1; overflow:auto; padding:1rem; }
+.sia-resizable-panel__handle { flex:none; width:.4rem; background:var(--sia-border); cursor:col-resize; }
+.sia-resizable-panel--vertical .sia-resizable-panel__handle { width:auto; height:.4rem; cursor:row-resize; }

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

@@ -0,0 +1,5 @@
+import { useEffect, useRef, type HTMLAttributes } from "react";
+import { cn } from "@sia-ui/utils";
+import "./styles.css";
+export interface RichTextEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> { value?: string; defaultValue?: string; onValueChange?: (html: string) => void; placeholder?: string; disabled?: boolean; }
+export function RichTextEditor({ value, defaultValue = "", onValueChange, placeholder = "Saisir du contenu...", disabled, className, ...props }: RichTextEditorProps) { const editorRef = useRef<HTMLDivElement>(null); useEffect(() => { if (value !== undefined && editorRef.current && editorRef.current.innerHTML !== value) editorRef.current.innerHTML = value; }, [value]); const command = (name: string) => { editorRef.current?.focus(); document.execCommand(name); onValueChange?.(editorRef.current?.innerHTML ?? ""); }; return <div className={cn("sia-rich-text-editor", disabled && "sia-rich-text-editor--disabled", className)}><div className="sia-editor-toolbar"><button type="button" disabled={disabled} aria-label="Gras" onClick={() => command("bold")}><strong>B</strong></button><button type="button" disabled={disabled} aria-label="Italique" onClick={() => command("italic")}><em>I</em></button><button type="button" disabled={disabled} aria-label="Liste" onClick={() => command("insertUnorderedList")}>• Liste</button></div><div {...props} ref={editorRef} role="textbox" aria-multiline="true" contentEditable={!disabled} suppressContentEditableWarning data-placeholder={placeholder} dangerouslySetInnerHTML={value === undefined ? { __html: defaultValue } : undefined} onInput={(event) => onValueChange?.(event.currentTarget.innerHTML)} /></div>; }

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

@@ -0,0 +1,2 @@
+.sia-rich-text-editor [contenteditable]:empty::before { content:attr(data-placeholder); color:var(--sia-muted); }
+.sia-rich-text-editor--disabled { opacity:.55; }