@sia-ui/cli 0.1.0

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

@@ -0,0 +1,32 @@
+import { useState } from "react";
+import { TimePicker, type TimePickerProps } from "../TimePicker";
+import { cn, toneClass } from "@sia-ui/utils";
+import type { ComponentTone } from "@sia-ui/tokens";
+import { ArrowRightIcon } from "../Icons";
+import { useSiaLocale } from "@sia-ui/headless";
+import "./styles.css";
+
+export interface TimeRangeValue { start: string; end: string; }
+export interface TimeRangePickerProps extends Pick<TimePickerProps, "minuteStep" | "secondStep" | "showSeconds" | "hourFormat" | "needConfirm" | "allowClear"> {
+  value?: TimeRangeValue;
+  defaultValue?: TimeRangeValue;
+  onValueChange?: (value: TimeRangeValue) => void;
+  order?: boolean;
+  startLabel?: string;
+  endLabel?: string;
+  tone?: ComponentTone;
+  invalid?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+export function TimeRangePicker({ value, defaultValue = { start: "", end: "" }, onValueChange, order = true, startLabel: startLabelProp, endLabel: endLabelProp, minuteStep = 1, secondStep = 1, showSeconds = false, hourFormat = 24, needConfirm = false, allowClear = true, tone = "primary", invalid, disabled, className }: TimeRangePickerProps) {
+    const locale = useSiaLocale();
+    const endLabel = endLabelProp ?? locale.endTime;
+    const startLabel = startLabelProp ?? locale.startTime;
+  const [internal, setInternal] = useState(defaultValue);
+  const current = value ?? internal;
+  const update = (next: TimeRangeValue) => { const normalized = order && next.start && next.end && next.start > next.end ? { start: next.end, end: next.start } : next; if (value === undefined) setInternal(normalized); onValueChange?.(normalized); };
+  const rangeInvalid = Boolean(invalid || (!order && current.start && current.end && current.start > current.end));
+  const shared = { minuteStep, secondStep, showSeconds, hourFormat, needConfirm, allowClear, tone, ...(disabled !== undefined ? { disabled } : {}) };
+  return <div className={cn("sia-time-range-picker", toneClass("sia-tone", tone), rangeInvalid && "sia-time-range-picker--invalid", className)}><TimePicker {...shared} aria-label={startLabel} value={current.start} {...(!order && current.end ? { max: current.end } : {})} invalid={rangeInvalid} onValueChange={(start) => update({ ...current, start })} /><ArrowRightIcon className="sia-range-picker__separator" /><TimePicker {...shared} aria-label={endLabel} value={current.end} {...(!order && current.start ? { min: current.start } : {})} invalid={rangeInvalid} onValueChange={(end) => update({ ...current, end })} /></div>;
+}

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

@@ -0,0 +1 @@
+.sia-time-range-picker--invalid { color:var(--sia-danger); }

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

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+import { cn } from "@sia-ui/utils";
+import type { ComponentTone } from "@sia-ui/tokens";
+import "./styles.css";
+
+export interface TimelineItem { key: string; title: ReactNode; description?: ReactNode; time?: ReactNode; tone?: ComponentTone; }
+export interface TimelineProps { items: TimelineItem[]; pending?: ReactNode; className?: string; }
+export function Timeline({ items, pending, className }: TimelineProps) { return <ol className={cn("sia-timeline", className)}>{items.map((item) => <li key={item.key} className={`sia-timeline__item sia-timeline__item--${item.tone ?? "primary"}`}><span className="sia-timeline__dot" /><div><strong>{item.title}</strong>{item.description && <p>{item.description}</p>}{item.time && <small>{item.time}</small>}</div></li>)}{pending && <li className="sia-timeline__item sia-timeline__item--pending"><span className="sia-timeline__dot" /><div>{pending}</div></li>}</ol>; }

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

@@ -0,0 +1,12 @@
+.sia-timeline { display:grid; gap:0; padding:0; margin:0; list-style:none; }
+.sia-timeline__item { position:relative; display:grid; grid-template-columns:1rem 1fr; gap:.75rem; padding-bottom:1.25rem; }
+.sia-timeline__item:not(:last-child)::before { content:""; position:absolute; top:.8rem; bottom:0; left:.32rem; width:1px; background:var(--sia-border); }
+.sia-timeline__dot { position:relative; z-index:1; width:.7rem; height:.7rem; margin-top:.3rem; border-radius:50%; background:var(--sia-primary); }
+.sia-timeline__item--neutral .sia-timeline__dot { background:var(--sia-muted); }
+.sia-timeline__item--info .sia-timeline__dot { background:var(--sia-info); }
+.sia-timeline__item--success .sia-timeline__dot { background:var(--sia-success); }
+.sia-timeline__item--warning .sia-timeline__dot { background:var(--sia-warning); }
+.sia-timeline__item--danger .sia-timeline__dot { background:var(--sia-danger); }
+.sia-timeline p { margin:.25rem 0; color:var(--sia-muted); }
+.sia-timeline small { color:var(--sia-muted); }
+.sia-timeline__item--primary .sia-timeline__dot { background:var(--sia-primary); }

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

@@ -0,0 +1,9 @@
+import { useEffect, useRef, useState } from "react";
+import { cn } from "@sia-ui/utils";
+
+export interface TimerProps { duration?: number; initialValue?: number; direction?: "down" | "up"; running?: boolean; interval?: number; onChange?: (milliseconds: number) => void; onFinish?: () => void; format?: (milliseconds: number) => string; className?: string; }
+export interface TimeParts { hours: number; minutes: number; seconds: number; }
+export function parseTimeValue(value = ""): TimeParts { const [hours = 0, minutes = 0, seconds = 0] = value.split(":").map(Number); return { hours: Math.min(Math.max(hours || 0, 0), 23), minutes: Math.min(Math.max(minutes || 0, 0), 59), seconds: Math.min(Math.max(seconds || 0, 0), 59) }; }
+export function formatTimeValue(parts: TimeParts, showSeconds = false) { const base = `${String(parts.hours).padStart(2, "0")}:${String(parts.minutes).padStart(2, "0")}`; return showSeconds ? `${base}:${String(parts.seconds).padStart(2, "0")}` : base; }
+export function formatDuration(milliseconds: number, showMilliseconds = false) { const total = Math.max(0, milliseconds); const hours = Math.floor(total / 3600000); const minutes = Math.floor((total % 3600000) / 60000); const seconds = Math.floor((total % 60000) / 1000); const ms = Math.floor((total % 1000) / 10); return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}${showMilliseconds ? `.${String(ms).padStart(2, "0")}` : ""}`; }
+export function Timer({ duration = 60000, initialValue = 0, direction = "down", running = true, interval = 250, onChange, onFinish, format = formatDuration, className }: TimerProps) { const initial = direction === "down" ? duration : initialValue; const [value, setValue] = useState(initial); const finishCalled = useRef(false); useEffect(() => { setValue(direction === "down" ? duration : initialValue); finishCalled.current = false; }, [direction, duration, initialValue]); useEffect(() => { if (!running) return; const startedAt = Date.now(); const base = value; const update = () => { const elapsed = Date.now() - startedAt; const next = direction === "down" ? Math.max(0, base - elapsed) : base + elapsed; setValue(next); onChange?.(next); if (direction === "down" && next === 0 && !finishCalled.current) { finishCalled.current = true; onFinish?.(); } }; update(); const id = window.setInterval(update, interval); return () => window.clearInterval(id); }, [running, direction, interval]); return <time className={cn("sia-timer", className)} aria-live="polite">{format(value)}</time>; }

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

@@ -0,0 +1,426 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type PointerEvent as ReactPointerEvent,
+  type PropsWithChildren,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@sia-ui/utils";
+import {
+  toast,
+  toastStore,
+  useSiaLocale,
+  useToasts,
+  type ToastId,
+  type ToastOptions,
+  type ToastPlacement,
+  type ToastRecord,
+  type ToastTone,
+} from "@sia-ui/headless";
+import { usePortal } from "@sia-ui/react";
+import { AlertCircleIcon, CheckIcon, InfoIcon, XIcon } from "../Icons";
+import { Spinner } from "../Spinner";
+import "./styles.css";
+
+export type { ToastId, ToastOptions, ToastPlacement, ToastTone };
+
+/**
+ * L'API des annonces, appelable de n'importe où.
+ *
+ * `toast("Enregistré")`, `toast.success(…)`, `toast.promise(…)`. Ce n'est pas
+ * un hook : le magasin vit hors de React, donc un intercepteur HTTP ou une
+ * fonction utilitaire peut poser une annonce sans être un composant.
+ */
+export { toast, toastStore };
+
+const TONE_ICON: Record<ToastTone, ReactNode> = {
+  neutral: null,
+  primary: <InfoIcon />,
+  info: <InfoIcon />,
+  success: <CheckIcon />,
+  warning: <AlertCircleIcon />,
+  danger: <AlertCircleIcon />,
+  loading: <Spinner size="sm" tone="current" />,
+};
+
+/** Le temps laissé à l'animation de sortie avant le retrait définitif. */
+const EXIT_DELAY = 260;
+
+const PLACEMENTS: ToastPlacement[] = [
+  "top-left",
+  "top-center",
+  "top-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right",
+];
+
+export interface ToasterProps {
+  /** Coin par défaut des annonces qui n'en précisent pas. */
+  placement?: ToastPlacement;
+  /** Nombre visible simultanément. Au-delà, la plus ancienne s'efface. */
+  limit?: number;
+  /** Durée par défaut, pour les tons qui n'en imposent pas une. */
+  duration?: number;
+  /** Largeur d'une annonce. */
+  width?: number | string;
+  /** Décalage depuis le bord de l'écran. */
+  offset?: number | string;
+  /**
+   * Où rendre la pile. Par défaut, un nœud créé sous `document.body`.
+   *
+   * À fournir quand le thème est porté par un conteneur plutôt que par la
+   * racine du document : sorties de ce conteneur, les annonces perdraient
+   * ses variables et s'afficheraient dans le thème clair.
+   */
+  container?: HTMLElement | null | undefined;
+  className?: string;
+}
+
+/**
+ * La pile visible.
+ *
+ * Un seul `<Toaster />` à la racine de l'application. Il rend les six coins :
+ * une annonce peut choisir le sien, ce qui permet à une confirmation
+ * d'apparaître près du geste qui l'a déclenchée et à une panne générale de
+ * s'imposer en haut de l'écran.
+ */
+export function Toaster({
+  placement = "bottom-right",
+  limit,
+  duration,
+  width = "24rem",
+  offset = "1rem",
+  container,
+  className,
+}: ToasterProps) {
+  const records = useToasts<ReactNode>();
+  const node = usePortal(container ? { container } : { id: "sia-toaster" });
+  const locale = useSiaLocale();
+
+  useEffect(() => {
+    toastStore.configure({
+      ...(limit !== undefined ? { limit } : {}),
+      ...(duration !== undefined ? { defaultDuration: duration } : {}),
+    });
+  }, [duration, limit]);
+
+  const byPlacement = useMemo(() => {
+    const groups = new Map<ToastPlacement, Array<ToastRecord<ReactNode>>>();
+    for (const record of records) {
+      const corner = record.placement ?? placement;
+      const list = groups.get(corner);
+      if (list) list.push(record);
+      else groups.set(corner, [record]);
+    }
+    return groups;
+  }, [placement, records]);
+
+  if (!node) return null;
+
+  return createPortal(
+    <>
+      {PLACEMENTS.filter((corner) => byPlacement.has(corner)).map((corner) => {
+        const list = byPlacement.get(corner) ?? [];
+        // En haut, la plus récente arrive au-dessus de la pile; en bas, elle
+        // arrive au-dessous. Dans les deux cas elle est la plus proche du
+        // bord, donc la première lue.
+        const ordered = corner.startsWith("top") ? [...list].reverse() : list;
+
+        return (
+          <div
+            key={corner}
+            className={cn("sia-toaster", `sia-toaster--${corner}`, className)}
+            style={
+              {
+                "--sia-toaster-width": typeof width === "number" ? `${width}px` : width,
+                "--sia-toaster-offset":
+                  typeof offset === "number" ? `${offset}px` : offset,
+              } as CSSProperties
+            }
+            role="region"
+            aria-label={locale.notifications}
+          >
+            {ordered.map((record) => (
+              <ToastItem
+                key={record.id}
+                record={record}
+                placement={corner}
+                closeLabel={locale.close}
+              />
+            ))}
+          </div>
+        );
+      })}
+    </>,
+    node,
+  );
+}
+
+interface ToastItemProps {
+  record: ToastRecord<ReactNode>;
+  placement: ToastPlacement;
+  closeLabel: string;
+}
+
+function ToastItem({ record, placement, closeLabel }: ToastItemProps) {
+  const tone = record.tone ?? "neutral";
+  const icon = record.icon === undefined ? TONE_ICON[tone] : record.icon;
+  const closable = record.closable ?? tone !== "loading";
+  const duration = toastStore.durationOf(record);
+  const timed = Number.isFinite(duration) && duration > 0;
+
+  const dismiss = useCallback(() => toastStore.dismiss(record.id), [record.id]);
+
+  // Le retrait définitif est déclenché par une minuterie, pas par la fin de
+  // l'animation : `animationend` ne se produit pas si l'animation n'a jamais
+  // tourné — préférence de mouvement réduit, onglet en arrière-plan — et
+  // l'annonce resterait alors dans le magasin pour toujours.
+  useEffect(() => {
+    if (record.open) return undefined;
+    const timer = setTimeout(() => toastStore.remove(record.id), EXIT_DELAY);
+    return () => clearTimeout(timer);
+  }, [record.id, record.open]);
+
+  // La fermeture automatique, suspendue au survol et au focus clavier.
+  const [paused, setPaused] = useState(false);
+  const remaining = useRef(duration);
+  const startedAt = useRef(Date.now());
+
+  // Une mise à jour — ce que fait `toast.promise` — rend son temps entier à
+  // l'annonce : la nouvelle phrase doit pouvoir être lue.
+  //
+  // La remise à zéro se fait pendant le rendu, pas dans un effet. Un effet
+  // s'exécuterait *après* celui qui arme la minuterie, qui lirait alors la
+  // durée précédente. Quand elle valait `Infinity` — le cas d'une annonce
+  // en chargement qui devient un succès — `setTimeout` reçoit une valeur
+  // qui déborde son entier 32 bits et se déclenche immédiatement : la carte
+  // de succès disparaissait avant d'avoir été vue.
+  const signature = `${duration}|${record.title}|${record.description}|${record.tone}`;
+  const lastSignature = useRef(signature);
+  if (lastSignature.current !== signature) {
+    lastSignature.current = signature;
+    remaining.current = duration;
+  }
+
+  useEffect(() => {
+    if (!timed || !record.open || paused) return undefined;
+    if (!Number.isFinite(remaining.current)) return undefined;
+
+    startedAt.current = Date.now();
+    const timer = setTimeout(dismiss, remaining.current);
+    return () => {
+      clearTimeout(timer);
+      remaining.current = Math.max(
+        0,
+        remaining.current - (Date.now() - startedAt.current),
+      );
+    };
+  }, [dismiss, paused, record.open, signature, timed]);
+
+  const swipe = useSwipeToDismiss(placement, dismiss);
+
+  const run = (action: NonNullable<ToastRecord["action"]>) => {
+    action.onSelect();
+    if (action.dismiss ?? true) dismiss();
+  };
+
+  return (
+    <div
+      className={cn(
+        "sia-toast",
+        `sia-toast--${tone}`,
+        `sia-toast--from-${edgeOf(placement)}`,
+        record.className,
+      )}
+      data-state={record.open ? "open" : "closed"}
+      data-swiping={swipe.swiping || undefined}
+      style={swipe.style}
+      // `alert` interrompt la lecture d'écran, `status` attend une pause. Une
+      // erreur mérite l'interruption; une confirmation ne la mérite pas.
+      role={tone === "danger" ? "alert" : "status"}
+      aria-live={tone === "danger" ? "assertive" : "polite"}
+      onMouseEnter={() => setPaused(true)}
+      onMouseLeave={() => setPaused(false)}
+      onFocusCapture={() => setPaused(true)}
+      onBlurCapture={() => setPaused(false)}
+      onPointerDown={swipe.onPointerDown}
+      onPointerMove={swipe.onPointerMove}
+      onPointerUp={swipe.onPointerUp}
+      onPointerCancel={swipe.onPointerUp}
+    >
+      {record.render ? (
+        record.render({ id: record.id, dismiss })
+      ) : (
+        <>
+          {icon && (
+            <span className="sia-toast__icon" aria-hidden="true">
+              {icon}
+            </span>
+          )}
+
+          <div className="sia-toast__body">
+            {record.title && (
+              <strong className="sia-toast__title">{record.title}</strong>
+            )}
+            {record.description && (
+              <p className="sia-toast__description">{record.description}</p>
+            )}
+
+            {(record.action || record.cancel) && (
+              <div className="sia-toast__actions">
+                {record.action && (
+                  <button
+                    type="button"
+                    className="sia-toast__action"
+                    onClick={() => run(record.action!)}
+                  >
+                    {record.action.label}
+                  </button>
+                )}
+                {record.cancel && (
+                  <button
+                    type="button"
+                    className="sia-toast__cancel"
+                    onClick={() => run(record.cancel!)}
+                  >
+                    {record.cancel.label}
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
+
+          {closable && (
+            <button
+              type="button"
+              className="sia-toast__close"
+              aria-label={closeLabel}
+              onClick={dismiss}
+            >
+              <XIcon />
+            </button>
+          )}
+
+          {timed && record.open && (
+            <span
+              className="sia-toast__timer"
+              style={{ animationDuration: `${duration}ms` }}
+              data-paused={paused || undefined}
+              aria-hidden="true"
+            />
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+function edgeOf(placement: ToastPlacement): "left" | "right" | "center" {
+  if (placement.endsWith("left")) return "left";
+  if (placement.endsWith("center")) return "center";
+  return "right";
+}
+
+/** Seuil, en pixels, au-delà duquel le geste ferme l'annonce. */
+const SWIPE_THRESHOLD = 60;
+
+/**
+ * Balayer pour écarter.
+ *
+ * Le sens suit le bord le plus proche : une annonce à droite se chasse vers
+ * la droite. Une pile au centre se chasse verticalement, vers le bord dont
+ * elle vient.
+ */
+function useSwipeToDismiss(placement: ToastPlacement, dismiss: () => void) {
+  const axis = placement.endsWith("center") ? "y" : "x";
+  const sign = useMemo(() => {
+    if (axis === "y") return placement.startsWith("top") ? -1 : 1;
+    return placement.endsWith("left") ? -1 : 1;
+  }, [axis, placement]);
+
+  const origin = useRef<{ x: number; y: number } | null>(null);
+  const [offset, setOffset] = useState(0);
+  const [swiping, setSwiping] = useState(false);
+
+  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
+    // Un clic sur un bouton n'est pas un balayage : capter le pointeur ici
+    // avalerait l'action.
+    if ((event.target as HTMLElement).closest("button")) return;
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+
+    origin.current = { x: event.clientX, y: event.clientY };
+    setSwiping(true);
+  };
+
+  const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (!origin.current) return;
+
+    const delta =
+      axis === "x"
+        ? event.clientX - origin.current.x
+        : event.clientY - origin.current.y;
+
+    // Seul le sens de la sortie répond; tirer dans l'autre sens ne fait rien,
+    // ce qui évite de décoller la carte de son bord.
+    setOffset(delta * sign > 0 ? delta : 0);
+  };
+
+  const onPointerUp = () => {
+    if (!origin.current) return;
+    origin.current = null;
+    setSwiping(false);
+
+    if (Math.abs(offset) >= SWIPE_THRESHOLD) dismiss();
+    else setOffset(0);
+  };
+
+  return {
+    swiping,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    style:
+      offset === 0
+        ? undefined
+        : ({
+            transform:
+              axis === "x"
+                ? `translate3d(${offset}px, 0, 0)`
+                : `translate3d(0, ${offset}px, 0)`,
+            opacity: Math.max(0.3, 1 - Math.abs(offset) / 160),
+          } as CSSProperties),
+  };
+}
+
+export interface ToastProviderProps extends PropsWithChildren, ToasterProps {}
+
+/**
+ * Enveloppe les enfants et monte le `Toaster`.
+ *
+ * Aucun contexte : le magasin vit hors de React. Ce composant n'existe que
+ * pour monter la pile au bon endroit sans y penser.
+ */
+export function ToastProvider({ children, ...props }: ToastProviderProps) {
+  return (
+    <>
+      {children}
+      <Toaster {...props} />
+    </>
+  );
+}
+
+/**
+ * L'API des annonces, pour ceux qui préfèrent un hook.
+ *
+ * Elle rend exactement l'objet `toast`, dont l'identité ne change jamais :
+ * l'appeler dans un `useCallback` ou un `useEffect` ne relance rien.
+ */
+export function useToast() {
+  return toast;
+}

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

@@ -0,0 +1,175 @@
+.sia-toaster {
+  position: fixed;
+  z-index: 70;
+  display: flex;
+  flex-direction: column;
+  gap: .625rem;
+  width: min(var(--sia-toaster-width, 24rem), calc(100vw - 2rem));
+  padding: var(--sia-toaster-offset, 1rem);
+  /* La pile ne doit pas voler les clics à la page; chaque annonce les reprend. */
+  pointer-events: none;
+}
+.sia-toaster > * { pointer-events: auto; }
+
+.sia-toaster--top-left { top: 0; left: 0; }
+.sia-toaster--top-center { top: 0; left: 50%; transform: translateX(-50%); }
+.sia-toaster--top-right { top: 0; right: 0; }
+.sia-toaster--bottom-left { bottom: 0; left: 0; }
+.sia-toaster--bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); }
+.sia-toaster--bottom-right { bottom: 0; right: 0; }
+
+.sia-toast {
+  --sia-toast-color: var(--sia-muted);
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: .75rem;
+  overflow: hidden;
+  padding: .875rem 1rem;
+  border: 1px solid var(--sia-border);
+  border-radius: calc(var(--sia-radius) + 2px);
+  background: var(--sia-surface-raised);
+  box-shadow: var(--sia-elevation-overlay);
+  /* Le balayage ne doit pas déclencher le défilement de la page. */
+  touch-action: none;
+  user-select: none;
+}
+
+.sia-toast[data-state="open"] {
+  animation: sia-toast-in var(--sia-duration-slow) var(--sia-easing-spring) both;
+}
+
+/* La sortie est plus courte que l'entrée : ce qui arrive se remarque, ce qui
+   part ne doit pas se faire attendre. */
+.sia-toast[data-state="closed"] {
+  animation: sia-toast-out var(--sia-duration-base) var(--sia-easing-exit) forwards;
+  pointer-events: none;
+}
+
+/* Pendant le geste, la carte suit le doigt sans transition : une interpolation
+   donnerait un retard visible entre le pointeur et la carte. */
+.sia-toast[data-swiping] { transition: none; cursor: grabbing; }
+.sia-toast:not([data-swiping]) {
+  transition:
+    transform var(--sia-duration-base) var(--sia-easing-standard),
+    opacity var(--sia-duration-base) var(--sia-easing-standard);
+}
+
+@keyframes sia-toast-in {
+  from { opacity: 0; transform: translate3d(var(--sia-toast-from, 110%), 0, 0) scale(.96); }
+  to { opacity: 1; transform: none; }
+}
+@keyframes sia-toast-out {
+  from { opacity: 1; transform: none; max-height: 10rem; }
+  to { opacity: 0; transform: translate3d(0, -.5rem, 0) scale(.94); max-height: 0; margin-top: -.625rem; padding-block: 0; }
+}
+
+.sia-toast--from-right { --sia-toast-from: 110%; }
+.sia-toast--from-left { --sia-toast-from: -110%; }
+.sia-toast--from-center { --sia-toast-from: 0; }
+
+.sia-toast__icon {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 999px;
+  font-size: .875rem;
+  background: color-mix(in srgb, var(--sia-toast-color) 14%, transparent);
+  color: var(--sia-toast-color);
+  /* L'icône entre après le panneau : l'œil suit le bloc, puis le signe. */
+  animation: sia-toast-icon var(--sia-duration-slow) var(--sia-easing-spring) both;
+  animation-delay: 60ms;
+}
+@keyframes sia-toast-icon {
+  from { opacity: 0; transform: scale(.4); }
+  to { opacity: 1; transform: none; }
+}
+
+.sia-toast__body { flex: 1; display: grid; gap: .15rem; min-width: 0; }
+.sia-toast__title { color: var(--sia-foreground); font-size: .9rem; line-height: 1.35; }
+.sia-toast__description { margin: 0; color: var(--sia-muted); font-size: .825rem; line-height: 1.45; }
+
+.sia-toast__actions { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
+
+.sia-toast__action,
+.sia-toast__cancel {
+  padding: .3rem .65rem;
+  border-radius: var(--sia-radius);
+  font-size: .8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background-color var(--sia-duration-fast) var(--sia-easing-standard),
+    color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+
+/* L'action principale porte la couleur du ton : c'est le geste qu'on attend
+   de la personne, et il doit se voir sans lire. */
+.sia-toast__action {
+  border: 1px solid color-mix(in srgb, var(--sia-toast-color) 32%, transparent);
+  background: color-mix(in srgb, var(--sia-toast-color) 12%, transparent);
+  color: var(--sia-toast-color);
+}
+.sia-toast__action:hover {
+  background: color-mix(in srgb, var(--sia-toast-color) 20%, transparent);
+}
+
+.sia-toast__cancel {
+  border: 0;
+  background: transparent;
+  color: var(--sia-muted);
+}
+.sia-toast__cancel:hover { color: var(--sia-foreground); }
+
+.sia-toast__close {
+  flex: none;
+  padding: .1rem;
+  border: 0;
+  background: transparent;
+  color: var(--sia-muted);
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
+  opacity: .6;
+  transition: opacity var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-toast__close:hover { opacity: 1; }
+
+/* La barre de temps : elle dit combien il reste, et se fige au survol — la
+   suspension de la minuterie et l'animation doivent raconter la même chose. */
+.sia-toast__timer {
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 2px;
+  transform-origin: left;
+  background: var(--sia-toast-color);
+  opacity: .4;
+  animation: sia-toast-timer linear forwards;
+}
+.sia-toast__timer[data-paused] { animation-play-state: paused; }
+
+@keyframes sia-toast-timer {
+  from { transform: scaleX(1); }
+  to { transform: scaleX(0); }
+}
+
+/* Les tons reprennent ceux d'`Alert` : un même événement doit avoir la même
+   couleur en bandeau dans la page et en annonce flottante. */
+.sia-toast--neutral { --sia-toast-color: var(--sia-muted); }
+.sia-toast--loading { --sia-toast-color: var(--sia-muted); }
+.sia-toast--primary { --sia-toast-color: var(--sia-primary); }
+.sia-toast--info { --sia-toast-color: var(--sia-info); }
+.sia-toast--success { --sia-toast-color: var(--sia-success); }
+.sia-toast--warning { --sia-toast-color: var(--sia-warning); }
+.sia-toast--danger { --sia-toast-color: var(--sia-danger); }
+
+.sia-toast--danger { border-color: color-mix(in srgb, var(--sia-danger) 28%, var(--sia-border)); }
+.sia-toast--loading .sia-toast__icon { background: transparent; }
+
+@media (max-width: 640px) {
+  .sia-toaster { width: 100vw; padding: .75rem; }
+  .sia-toast--from-right,
+  .sia-toast--from-left { --sia-toast-from: 0; }
+}