@hgdc/ui 0.1.1 → 0.2.1

package/dist/switch.d.ts

@@ -0,0 +1,17 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+/**
+ * Interrupteur — la forme qu'a un réglage qu'on allume et qu'on éteint.
+ *
+ * Il remplace le couple « phrase qui décrit l'état + bouton qui le change ».
+ * Ces deux-là disaient la même chose deux fois — « Notifications activées »
+ * au-dessus de « Désactiver » — et l'un des deux mentait toujours au premier
+ * coup d'œil, puisqu'un bouton porte l'action et la phrase porte l'état.
+ *
+ * Une pastille de texte avait d'abord pris leur place ; elle disait bien l'état
+ * mais ne se lisait pas comme un contrôle. L'interrupteur, lui, n'a pas besoin
+ * d'être expliqué : sa forme est son mode d'emploi.
+ *
+ * Dimensions calées sur iOS — 51 × 31 points, soit 3,25 × 2 rem — pour que le
+ * pouce le trouve sans viser.
+ */
+export declare function Switch({ checked, onCheckedChange, disabled, className, ...props }: SwitchPrimitive.Root.Props): React.JSX.Element;

package/dist/switch.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { cn } from "./cn.js";
+/**
+ * Interrupteur — la forme qu'a un réglage qu'on allume et qu'on éteint.
+ *
+ * Il remplace le couple « phrase qui décrit l'état + bouton qui le change ».
+ * Ces deux-là disaient la même chose deux fois — « Notifications activées »
+ * au-dessus de « Désactiver » — et l'un des deux mentait toujours au premier
+ * coup d'œil, puisqu'un bouton porte l'action et la phrase porte l'état.
+ *
+ * Une pastille de texte avait d'abord pris leur place ; elle disait bien l'état
+ * mais ne se lisait pas comme un contrôle. L'interrupteur, lui, n'a pas besoin
+ * d'être expliqué : sa forme est son mode d'emploi.
+ *
+ * Dimensions calées sur iOS — 51 × 31 points, soit 3,25 × 2 rem — pour que le
+ * pouce le trouve sans viser.
+ */
+export function Switch({ checked, onCheckedChange, disabled, className, ...props }) {
+    return (_jsx(SwitchPrimitive.Root, { checked: checked, onCheckedChange: onCheckedChange, disabled: disabled, className: cn("relative inline-flex h-8 w-[3.25rem] shrink-0 items-center rounded-full p-0.5", "transition-colors duration-200 ease-ios", "outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2", "focus-visible:ring-offset-background", "disabled:cursor-not-allowed disabled:opacity-50", "bg-muted data-checked:bg-status-active", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { className: cn("size-7 rounded-full bg-background shadow-sm ring-1 ring-foreground/5", 
+            // `translate` et non `left` : la position part sur le compositeur,
+            // le pouce ne voit donc pas la bascule sautiller quand la page est
+            // occupée ailleurs.
+            "transition-transform duration-200 ease-ios", "translate-x-0 data-checked:translate-x-5") }) }));
+}

package/dist/textarea.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+/**
+ * `field-sizing: content` fait grandir la zone avec le texte, mais ignore
+ * `rows` : vide, elle retombait à `min-h-16`, et un exemple de plusieurs lignes
+ * en placeholder était coupé (le « Message » d'une annonce, 2026-09-27).
+ * `rows` devient donc une hauteur minimale, en lignes (`lh`) plus le padding.
+ */
+declare function Textarea({ className, rows, style, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+export { Textarea };

package/dist/textarea.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useFieldDescribedBy, useFieldId } from "./field.js";
+import { cn } from "./cn.js";
+/**
+ * `field-sizing: content` fait grandir la zone avec le texte, mais ignore
+ * `rows` : vide, elle retombait à `min-h-16`, et un exemple de plusieurs lignes
+ * en placeholder était coupé (le « Message » d'une annonce, 2026-09-27).
+ * `rows` devient donc une hauteur minimale, en lignes (`lh`) plus le padding.
+ */
+function Textarea({ className, rows, style, ...props }) {
+    const fieldId = useFieldId();
+    const describedBy = useFieldDescribedBy();
+    return (_jsx("textarea", { "data-slot": "textarea", rows: rows, style: rows ? { minHeight: `calc(${rows}lh + 1.5rem)`, ...style } : style, "aria-describedby": props["aria-describedby"] ?? describedBy, className: cn("flex field-sizing-content min-h-16 touch-field w-full resize-none rounded-2xl bg-background px-3.5 py-3 text-base ring-1 ring-border/70 transition-[color,box-shadow,background-color] duration-(--duration-fast) outline-none ring-inset placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-2 aria-invalid:ring-destructive/60 md:text-sm", className), id: props.id ?? fieldId, ...props }));
+}
+export { Textarea };

package/dist/theme.d.ts

@@ -0,0 +1,21 @@
+export type Theme = "dark" | "light" | "system";
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+};
+export type ThemeProviderState = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+};
+/**
+ * Script anti-flash de thème. DOIT être placé dans le <head>, avant la feuille
+ * de styles render-blocking : il pose la classe `.dark`/`.light` sur <html>
+ * pendant le parsing du head, donc avant que le CSS ne peigne. Sans ça, le CSS
+ * s'applique avec le thème clair par défaut (`:root --background` blanc) le
+ * temps que le script tourne → flash blanc au lancement de la PWA.
+ */
+export declare const themeInitScript: string;
+export declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): React.JSX.Element;
+export declare function useTheme(): ThemeProviderState;
+export {};

package/dist/theme.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react-refresh/only-export-components */
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+const THEME_STORAGE_KEY = "theme";
+// Clair par défaut, quel que soit le réglage du système : le sombre se choisit dans le menu.
+const THEME_DEFAULT = "light";
+function buildThemeScript(storageKey, defaultTheme) {
+    return `(function(){try{var k=${JSON.stringify(storageKey)};var d=${JSON.stringify(defaultTheme)};var t=localStorage.getItem(k);if(t!=='light'&&t!=='dark'&&t!=='system'){t=d}var m=matchMedia('(prefers-color-scheme: dark)').matches;var r=t==='system'?(m?'dark':'light'):t;var e=document.documentElement;e.classList.add(r);e.style.colorScheme=r}catch(e){}})();`;
+}
+/**
+ * Script anti-flash de thème. DOIT être placé dans le <head>, avant la feuille
+ * de styles render-blocking : il pose la classe `.dark`/`.light` sur <html>
+ * pendant le parsing du head, donc avant que le CSS ne peigne. Sans ça, le CSS
+ * s'applique avec le thème clair par défaut (`:root --background` blanc) le
+ * temps que le script tourne → flash blanc au lancement de la PWA.
+ */
+export const themeInitScript = buildThemeScript(THEME_STORAGE_KEY, THEME_DEFAULT);
+const ThemeProviderContext = createContext({
+    theme: "light",
+    setTheme: () => { },
+});
+function resolveTheme(theme) {
+    if (theme !== "system")
+        return theme;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function applyTheme(resolved) {
+    const root = document.documentElement;
+    root.classList.remove("light", "dark");
+    root.classList.add(resolved);
+    root.style.colorScheme = resolved;
+}
+function isTheme(value) {
+    return value === "light" || value === "dark" || value === "system";
+}
+export function ThemeProvider({ children, defaultTheme = THEME_DEFAULT, storageKey = THEME_STORAGE_KEY, }) {
+    const [theme, setThemeState] = useState(() => {
+        if (typeof window === "undefined")
+            return defaultTheme;
+        const stored = localStorage.getItem(storageKey);
+        return isTheme(stored) ? stored : defaultTheme;
+    });
+    const mounted = useRef(false);
+    useEffect(() => {
+        if (!mounted.current) {
+            mounted.current = true;
+            return;
+        }
+        applyTheme(resolveTheme(theme));
+    }, [theme]);
+    useEffect(() => {
+        if (theme !== "system")
+            return undefined;
+        const media = window.matchMedia("(prefers-color-scheme: dark)");
+        const onChange = () => applyTheme(media.matches ? "dark" : "light");
+        media.addEventListener("change", onChange);
+        return () => media.removeEventListener("change", onChange);
+    }, [theme]);
+    const setTheme = useCallback((next) => {
+        localStorage.setItem(storageKey, next);
+        setThemeState(next);
+    }, [storageKey]);
+    const value = useMemo(() => ({ theme, setTheme }), [theme, setTheme]);
+    return _jsx(ThemeProviderContext, { value: value, children: children });
+}
+export function useTheme() {
+    return useContext(ThemeProviderContext);
+}

package/dist/use-media-query.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Lecture d'une media query, sûre au rendu serveur.
+ *
+ * `useSyncExternalStore` rend un `false` stable au serveur (pas de
+ * clignotement), puis s'abonne à `matchMedia` une fois hydraté.
+ *
+ * Un couple `subscribe`/`getSnapshot` par requête, mémorisé au niveau du
+ * module. React compare l'IDENTITÉ de `subscribe` : une fonction fabriquée
+ * pendant le rendu fait retirer puis reposer l'écouteur `matchMedia` après
+ * CHAQUE rendu. Sur le board « Suivi », trente cartes qui se rendent à chaque
+ * image d'un glisser, cela faisait des milliers de poses et de retraits
+ * d'écouteurs par seconde pour un booléen qui ne bouge pas.
+ *
+ * `window.matchMedia` est en revanche rappelé à chaque lecture, et non gardé :
+ * un test qui remplace la fonction doit voir sa valeur prise en compte.
+ *
+ * @see https://react.dev/reference/react/useSyncExternalStore — « If you pass a
+ * different subscribe function between re-renders, React will re-subscribe to
+ * the store. »
+ */
+export declare function useMediaQuery(query: string): boolean;
+/** Mobile = viewport < 1024px (matches lg: Tailwind breakpoint). */
+export declare function useIsMobile(): boolean;

package/dist/use-media-query.js

@@ -0,0 +1,51 @@
+/**
+ * Lecture d'une media query, sûre au rendu serveur.
+ *
+ * `useSyncExternalStore` rend un `false` stable au serveur (pas de
+ * clignotement), puis s'abonne à `matchMedia` une fois hydraté.
+ *
+ * Un couple `subscribe`/`getSnapshot` par requête, mémorisé au niveau du
+ * module. React compare l'IDENTITÉ de `subscribe` : une fonction fabriquée
+ * pendant le rendu fait retirer puis reposer l'écouteur `matchMedia` après
+ * CHAQUE rendu. Sur le board « Suivi », trente cartes qui se rendent à chaque
+ * image d'un glisser, cela faisait des milliers de poses et de retraits
+ * d'écouteurs par seconde pour un booléen qui ne bouge pas.
+ *
+ * `window.matchMedia` est en revanche rappelé à chaque lecture, et non gardé :
+ * un test qui remplace la fonction doit voir sa valeur prise en compte.
+ *
+ * @see https://react.dev/reference/react/useSyncExternalStore — « If you pass a
+ * different subscribe function between re-renders, React will re-subscribe to
+ * the store. »
+ */
+import { useSyncExternalStore } from "react";
+const stores = new Map();
+function storeFor(query) {
+    const cached = stores.get(query);
+    if (cached)
+        return cached;
+    const store = {
+        subscribe: (callback) => {
+            if (typeof window === "undefined")
+                return noop;
+            const list = window.matchMedia(query);
+            list.addEventListener("change", callback);
+            return () => list.removeEventListener("change", callback);
+        },
+        getSnapshot: () => typeof window !== "undefined" && window.matchMedia(query).matches,
+    };
+    stores.set(query, store);
+    return store;
+}
+function noop() { }
+function serverSnapshot() {
+    return false;
+}
+export function useMediaQuery(query) {
+    const store = storeFor(query);
+    return useSyncExternalStore(store.subscribe, store.getSnapshot, serverSnapshot);
+}
+/** Mobile = viewport < 1024px (matches lg: Tailwind breakpoint). */
+export function useIsMobile() {
+    return useMediaQuery("(max-width: 1023px)");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "Interface de la H family : jetons de la DA, thèmes, polices et composants.",
   "license": "UNLICENSED",
   "homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",
@@ -15,21 +15,39 @@
     "access": "public"
   },
   "files": [
-    "dist"
+    "dist",
+    "styles.css"
+  ],
+  "sideEffects": [
+    "*.css"
   ],
-  "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./package.json": "./package.json"
+    "./styles.css": "./styles.css",
+    "./package.json": "./package.json",
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*.js"
+    }
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json"
   },
+  "dependencies": {
+    "@base-ui/react": "^1.9.0",
+    "@fontsource-variable/geist": "^5.3.0",
+    "@fontsource-variable/inter": "^5.3.0",
+    "@hugeicons/core-free-icons": "^4.3.5",
+    "@hugeicons/react": "^1.1.10",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "input-otp": "^1.5.0",
+    "shadcn": "^4.21.4",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.6.0"
+  },
   "peerDependencies": {
     "react": "^19.3.0",
-    "react-dom": "^19.3.0"
+    "react-dom": "^19.3.0",
+    "tailwindcss": "^4.3.3"
   }
 }

package/styles.css

@@ -0,0 +1,380 @@
+/*
+ * @hgdc/ui : jetons, thèmes clair et sombre, polices et utilitaires de la DA HGDC.
+ *
+ * À importer juste après Tailwind, avant les styles propres au produit :
+ *
+ *   @import "tailwindcss";
+ *   @import "@hgdc/ui/styles.css";
+ *
+ * Un produit redéfinit un jeton (`--accent`, `--chart-1`…) dans son propre `:root` ou `.dark`,
+ * après cet import.
+ */
+
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/geist";
+@import "@fontsource-variable/inter";
+
+/* Tailwind ignore node_modules : les classes des composants du kit sont déclarées ici. */
+@source "./dist";
+
+@custom-variant dark (&:is(.dark *));
+
+/* Courbes et durées. Pas d'ease-in : il démarre lentement à l'instant où l'œil regarde. */
+@theme {
+  --ease-ios: cubic-bezier(0.2, 0, 0, 1);
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --duration-instant: 100ms;
+  --duration-fast: 150ms;
+  --duration-base: 200ms;
+  --duration-slow: 300ms;
+  --duration-drawer: 350ms;
+}
+
+@theme inline {
+  --font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-heading: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent-soft: var(--accent-soft);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-shell: var(--shell);
+  --color-shell-foreground: var(--shell-foreground);
+  --color-shell-muted: var(--shell-muted-foreground);
+  --color-shell-hover: var(--shell-hover);
+  --color-shell-active: var(--shell-active);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-status-active: var(--status-active);
+  --color-status-paused: var(--status-paused);
+  --color-status-done: var(--status-done);
+  --color-status-active-ink: var(--status-active-ink);
+  --color-status-paused-ink: var(--status-paused-ink);
+  --color-info: var(--info);
+  --color-info-ink: var(--info-ink);
+  --color-chart-1: var(--chart-1);
+  --color-inverse: var(--inverse);
+  --color-inverse-foreground: var(--inverse-foreground);
+  --color-inverse-muted: var(--inverse-muted);
+  --color-inverse-code: var(--inverse-code);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+/* Chrome monochrome OKLCH, un seul accent violet, rare : focus, lien, élément actif,
+   un geste principal par écran. Les couleurs vives restent aux graphiques et aux statuts. */
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  /* Synonymes gardés pour les primitives shadcn : ils suivent leur jeton de rôle. */
+  --popover: var(--card);
+  --popover-foreground: var(--card-foreground);
+  /* Menus et sélecteurs (`floating.ts`) : fond opaque, un cran au-dessus de la carte en sombre. */
+  --floating: oklch(1 0 0);
+  --floating-muted: oklch(0.97 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: var(--muted);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  /* L=0.52 : 4,5:1 sur `muted`. */
+  --muted-foreground: oklch(0.52 0 0);
+  /* `--brand-accent*` : couleur d’un client posée par le produit, sans toucher au kit. */
+  --accent: var(--brand-accent, oklch(0.55 0.25 296));
+  --accent-foreground: var(--brand-accent-foreground, oklch(0.985 0 0));
+  --accent-soft: color-mix(in oklch, var(--accent) 10%, transparent);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: var(--accent);
+  /* Coque de l'application : barre latérale et en-tête. */
+  --shell: oklch(0.955 0 0);
+  --shell-foreground: oklch(0.145 0 0);
+  --shell-muted-foreground: oklch(0.45 0 0);
+  --shell-hover: oklch(0 0 0 / 5%);
+  --shell-active: oklch(0 0 0 / 8%);
+  --chart-1: oklch(0.62 0.19 256);
+  --status-active: oklch(0.55 0.15 156);
+  --status-paused: oklch(0.62 0.14 75);
+  --status-done: oklch(0.52 0.2 293);
+  /* Encres : le texte d'un statut sur son lavis (4,5:1), la couleur vive restant aux pastilles. */
+  --status-active-ink: oklch(0.45 0.12 155);
+  --status-paused-ink: oklch(0.5 0.12 70);
+  /* Information : bleu, pour que le violet reste l'accent. */
+  --info: oklch(0.62 0.19 256);
+  --info-ink: oklch(0.48 0.17 256);
+  --success: oklch(0.58 0.15 152);
+  --success-foreground: oklch(0.985 0 0);
+  /* Panneau inversé de la vitrine : encre sombre dans les deux thèmes. */
+  --inverse: oklch(0.205 0 0);
+  --inverse-foreground: oklch(0.985 0 0);
+  --inverse-muted: oklch(0.708 0 0);
+  --inverse-code: oklch(0.82 0.11 296);
+  --radius: 0.85rem;
+  --scrollbar-thumb: color-mix(in oklch, var(--foreground) 18%, transparent);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --floating: oklch(0.255 0 0);
+  --floating-muted: oklch(0.315 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: var(--brand-accent-dark, oklch(0.74 0.19 296));
+  --accent-foreground: var(--brand-accent-dark-foreground, oklch(0.205 0 0));
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --shell: oklch(0.08 0 0);
+  --shell-foreground: oklch(0.985 0 0);
+  --shell-muted-foreground: oklch(0.708 0 0);
+  --shell-hover: oklch(1 0 0 / 6%);
+  --shell-active: oklch(1 0 0 / 12%);
+  --chart-1: oklch(0.68 0.16 256);
+  --status-active: oklch(0.74 0.14 156);
+  --status-paused: oklch(0.82 0.15 86);
+  --status-done: oklch(0.68 0.17 293);
+  --status-active-ink: var(--status-active);
+  --status-paused-ink: var(--status-paused);
+  --info: oklch(0.7 0.16 256);
+  --info-ink: var(--info);
+  --success: oklch(0.7 0.15 152);
+  --success-foreground: oklch(0.16 0.02 152);
+  --inverse: oklch(0.1 0 0);
+}
+
+@layer base {
+  /* Une grille sans colonnes déclarées a une seule piste qui ne s'élargit jamais pour un
+     texte long : sans ça, `min-width: auto` pousse la page en défilement horizontal sur
+     téléphone. Les `grid-cols-*` (couche utilities) passent devant. */
+  .grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  * {
+    @apply border-border outline-ring/50;
+  }
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+    border-radius: 9999px;
+  }
+  html {
+    @apply font-sans;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    overflow-x: clip;
+  }
+  body {
+    @apply bg-background text-foreground;
+    min-height: 100dvh;
+  }
+  h1,
+  h2,
+  h3 {
+    @apply font-heading;
+    text-wrap: balance;
+    letter-spacing: -0.02em;
+  }
+  ::view-transition-group(root) {
+    animation-duration: var(--duration-slow);
+    animation-timing-function: var(--ease-ios);
+  }
+}
+
+/* ── Surfaces ──────────────────────────────────────────────────────────── */
+
+/* Niveau 1 de la DA : une teinte, ni ombre ni bordure. `muted` en clair, `card` en sombre
+   (un cran plus clair que la page). */
+@utility surface {
+  background-color: var(--muted);
+  :where(.dark) & {
+    background-color: var(--card);
+  }
+}
+
+/* Surface cliquable : le survol fonce la teinte, sans ombre. */
+@utility surface-link {
+  background-color: var(--muted);
+  transition: background-color var(--duration-fast) var(--ease-out);
+  &:hover {
+    background-color: oklch(0.94 0 0);
+  }
+  :where(.dark) & {
+    background-color: var(--card);
+  }
+  :where(.dark) &:hover {
+    background-color: var(--muted);
+  }
+}
+
+/* ── Mouvement ─────────────────────────────────────────────────────────── */
+
+@utility pressable {
+  transition:
+    transform var(--duration-slow) var(--ease-bounce),
+    background-color var(--duration-fast) var(--ease-out);
+  &:active {
+    transform: scale(0.96);
+    transition-duration: var(--duration-instant);
+    transition-timing-function: var(--ease-out);
+  }
+}
+
+@utility pressable-card {
+  transition:
+    transform var(--duration-slow) var(--ease-bounce),
+    background-color var(--duration-fast) var(--ease-out);
+  &:active {
+    transform: scale(0.985);
+    transition-duration: var(--duration-instant);
+    transition-timing-function: var(--ease-out);
+  }
+}
+
+/* Zone tactile de 44 px sur écran tactile, sans changer la taille visible. */
+@utility touch-target {
+  @media (hover: none) and (pointer: coarse) {
+    position: relative;
+    &::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      translate: -50% -50%;
+      min-width: 44px;
+      min-height: 44px;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+@utility touch-field {
+  @media (hover: none) and (pointer: coarse) {
+    min-height: 2.75rem;
+  }
+}
+
+@utility date-field {
+  appearance: none;
+}
+
+@keyframes soft-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+@utility soft-in {
+  animation: soft-in var(--duration-base) var(--ease-out) both;
+}
+
+@keyframes pop-in {
+  from {
+    opacity: 0;
+    scale: 0.6;
+  }
+}
+@utility pop-in {
+  animation: pop-in var(--duration-base) var(--ease-ios) both;
+}
+
+/* Une ligne qui arrive dans un flux en direct : elle se pose, une seule fois. */
+@utility card-in {
+  transition:
+    opacity var(--duration-base) var(--ease-out),
+    translate var(--duration-base) var(--ease-out),
+    background-color var(--duration-slow) var(--ease-out);
+  @starting-style {
+    opacity: 0;
+    translate: 0 -6px;
+  }
+}
+
+@keyframes skeleton-pulse {
+  50% {
+    opacity: 0.6;
+  }
+}
+@utility skeleton-pulse {
+  animation: skeleton-pulse 1.8s ease-in-out infinite;
+}
+
+/* Le point « en direct » : un anneau qui s'élargit et s'efface. */
+@keyframes live-ping {
+  from {
+    transform: scale(0.8);
+    opacity: 0.6;
+  }
+  to {
+    transform: scale(2.2);
+    opacity: 0;
+  }
+}
+@utility live-ping {
+  animation: live-ping 1.6s var(--ease-out) infinite;
+}
+
+/* Des étapes qui montent l'une après l'autre au premier affichage. */
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+}
+@utility rise {
+  animation: rise 420ms var(--ease-ios) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .soft-in,
+  .pop-in,
+  .rise,
+  .live-ping,
+  .skeleton-pulse {
+    animation: none;
+  }
+  .pressable:active,
+  .pressable-card:active {
+    transform: none;
+  }
+  .card-in {
+    transition: none;
+  }
+}

package/dist/index.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/index.js

@@ -1,2 +0,0 @@
-export {};
-// Paquet réservé : contenu livré par le chantier A de la vague 1 (HANDOFF.md).