@sentropic/design-system-svelte 0.34.20 → 0.34.22

package/dist/AppChrome.svelte.d.ts

@@ -0,0 +1,74 @@
+import type { Snippet } from "svelte";
+/** Un lien de navigation principal du chrome. */
+export interface AppChromeNavItem {
+    label: string;
+    href: string;
+    /** Marqué actif (souligné, aria-current=page). */
+    active?: boolean;
+}
+/** Une option du sélecteur de thème. */
+export interface AppChromeThemeOption {
+    id: string;
+    label: string;
+}
+export type AppChromeColorMode = "light" | "dark" | "auto";
+export type AppChromeLocale = "fr" | "en";
+export interface AppChromeProps {
+    /** Nom de marque (défaut « Sentropic »). */
+    brandName?: string;
+    /** Sous-titre produit sous le nom (ex. « Design System », « dataviz »). */
+    productName?: string;
+    /** Source du logo carré (ex. `/SENT-logo-squared.svg`). */
+    logoSrc?: string;
+    /** Texte alternatif du logo (décoratif par défaut). */
+    logoAlt?: string;
+    /** Cible du lien de marque. Défaut `/`. */
+    brandHref?: string;
+    /** aria-label du lien de marque (sinon dérivé de brandName + productName). */
+    brandLabel?: string;
+    /** Liens de nav principaux (pills soulignées + état actif). */
+    nav?: AppChromeNavItem[];
+    /** aria-label de la nav principale. */
+    navLabel?: string;
+    /** Options de thème. Vide => le sélecteur est masqué. */
+    themes?: AppChromeThemeOption[];
+    /** Id du thème actif. */
+    theme?: string;
+    /** Callback de changement de thème. */
+    onThemeChange?: (id: string) => void;
+    /** aria-label du sélecteur de thème. */
+    themeLabel?: string;
+    /** Mode couleur actif. Undefined => le toggle est masqué. */
+    colorMode?: AppChromeColorMode;
+    /** Callback de changement (cycle light -> dark -> auto). */
+    onColorModeChange?: (mode: AppChromeColorMode) => void;
+    /** Libellés accessibles des 3 modes (light/dark/auto). */
+    colorModeLabels?: {
+        light: string;
+        dark: string;
+        auto: string;
+    };
+    /** Langue active. Undefined => le sélecteur est masqué. */
+    locale?: AppChromeLocale;
+    /** Callback de changement de langue. */
+    onLocaleChange?: (locale: AppChromeLocale) => void;
+    /** aria-label du sélecteur de langue. */
+    localeLabel?: string;
+    /** URL du dépôt. Undefined => le lien est masqué. */
+    githubHref?: string;
+    /** aria-label du lien GitHub. */
+    githubLabel?: string;
+    /** Zone identité à droite (IdentityMenu, bouton connexion, …). */
+    identity?: Snippet;
+    /** État ouvert du tiroir mobile (contrôlé). */
+    mobileMenuOpen?: boolean;
+    /** Callback de bascule du tiroir mobile. */
+    onMobileMenuToggle?: () => void;
+    /** aria-label du bouton burger. */
+    menuLabel?: string;
+    class?: string;
+}
+declare const AppChrome: import("svelte").Component<AppChromeProps, {}, "">;
+type AppChrome = ReturnType<typeof AppChrome>;
+export default AppChrome;
+//# sourceMappingURL=AppChrome.svelte.d.ts.map

package/dist/AppChrome.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppChrome.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AppChrome.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,iDAAiD;AACjD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wCAAwC;AACxC,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,cAAc;IAE7B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,+DAA+D;IAC/D,GAAG,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACzB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,yDAAyD;IACzD,MAAM,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAChC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,0DAA0D;IAC1D,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAGhE,2DAA2D;IAC3D,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,wCAAwC;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4CAA4C;IAC5C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqRH,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/AppChrome.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AppChrome.test.d.ts.map

package/dist/AppChrome.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppChrome.test.d.ts","sourceRoot":"","sources":["../src/lib/AppChrome.test.ts"],"names":[],"mappings":""}

package/dist/AppChrome.test.js

@@ -0,0 +1,122 @@
+import { fireEvent, render } from "@testing-library/svelte";
+import { createRawSnippet } from "svelte";
+import { describe, expect, it, vi } from "vitest";
+import AppChrome from "./AppChrome.svelte";
+const snippet = (html) => createRawSnippet(() => ({ render: () => `<span>${html}</span>` }));
+const themes = [
+    { id: "sent-tech", label: "Sentropic" },
+    { id: "forge", label: "Forge" },
+    { id: "entropic", label: "Entropic" },
+    { id: "carbon", label: "Carbon" },
+    { id: "dsfr", label: "DSFR" },
+    { id: "airbus", label: "Airbus" },
+];
+const nav = [
+    { label: "Vues", href: "/views", active: true },
+    { label: "Données", href: "/data" },
+    { label: "Réglages", href: "/settings" },
+];
+describe("AppChrome — marque", () => {
+    it("renders the canonical brand block (logo + name + product)", () => {
+        const { container } = render(AppChrome, {
+            props: { brandName: "Sentropic", productName: "dataviz", logoSrc: "/SENT-logo-squared.svg", brandHref: "/home" },
+        });
+        const brand = container.querySelector("a.st-appChrome__brand");
+        expect(brand).toBeTruthy();
+        expect(brand.getAttribute("href")).toBe("/home");
+        expect(brand.getAttribute("aria-label")).toBe("Sentropic dataviz");
+        expect(container.querySelector("img.st-appChrome__brandMark").getAttribute("src")).toBe("/SENT-logo-squared.svg");
+        expect(container.querySelector(".st-appChrome__brandName")?.textContent).toBe("Sentropic");
+        expect(container.querySelector(".st-appChrome__brandProduct")?.textContent).toBe("dataviz");
+    });
+    it("defaults brandName to Sentropic", () => {
+        const { container } = render(AppChrome, { props: { productName: "dataviz" } });
+        expect(container.querySelector(".st-appChrome__brandName")?.textContent).toBe("Sentropic");
+    });
+});
+describe("AppChrome — navigation", () => {
+    it("renders nav links and marks the active one with aria-current", () => {
+        const { container } = render(AppChrome, { props: { nav } });
+        const links = Array.from(container.querySelectorAll(".st-appChrome__navLink"));
+        expect(links.map((a) => a.textContent?.trim())).toEqual(["Vues", "Données", "Réglages"]);
+        expect(links[0].getAttribute("aria-current")).toBe("page");
+        expect(links[1].getAttribute("aria-current")).toBeNull();
+        expect(links[0].classList.contains("st-appHeader__navLink")).toBe(true);
+    });
+});
+describe("AppChrome — contrôle thème", () => {
+    it("shows the active theme label and fires onThemeChange on selection", async () => {
+        const onThemeChange = vi.fn();
+        const { container } = render(AppChrome, { props: { themes, theme: "sent-tech", onThemeChange } });
+        const trigger = container.querySelector(".st-appChrome__themeWrap button");
+        expect(trigger.textContent).toContain("Sentropic");
+        await fireEvent.click(trigger);
+        expect(container.querySelector('[role="menu"]')).toBeTruthy();
+        const carbon = Array.from(container.querySelectorAll(".st-appChrome__menuItem")).find((b) => b.textContent?.includes("Carbon"));
+        await fireEvent.click(carbon);
+        expect(onThemeChange).toHaveBeenCalledWith("carbon");
+    });
+    it("hides the theme selector when themes is empty", () => {
+        const { container } = render(AppChrome);
+        expect(container.querySelector(".st-appChrome__themeWrap")).toBeNull();
+    });
+});
+describe("AppChrome — mode couleur", () => {
+    it("cycles light -> dark -> auto via onColorModeChange", async () => {
+        const onColorModeChange = vi.fn();
+        const { container, rerender } = render(AppChrome, { props: { colorMode: "light", onColorModeChange } });
+        await fireEvent.click(container.querySelector(".st-appChrome__iconControl"));
+        expect(onColorModeChange).toHaveBeenCalledWith("dark");
+        await rerender({ colorMode: "dark", onColorModeChange });
+        await fireEvent.click(container.querySelector(".st-appChrome__iconControl"));
+        expect(onColorModeChange).toHaveBeenLastCalledWith("auto");
+        await rerender({ colorMode: "auto", onColorModeChange });
+        await fireEvent.click(container.querySelector(".st-appChrome__iconControl"));
+        expect(onColorModeChange).toHaveBeenLastCalledWith("light");
+    });
+    it("hides the color-mode toggle when colorMode is undefined", () => {
+        const { container } = render(AppChrome, { props: { nav } });
+        expect(container.querySelector(".st-appChrome__iconControl")).toBeNull();
+    });
+});
+describe("AppChrome — langue", () => {
+    it("shows the active locale and fires onLocaleChange on selection", async () => {
+        const onLocaleChange = vi.fn();
+        const { container } = render(AppChrome, { props: { locale: "fr", onLocaleChange } });
+        const trigger = container.querySelector(".st-appChrome__localeWrap button");
+        expect(trigger.textContent).toContain("FR");
+        await fireEvent.click(trigger);
+        const en = Array.from(container.querySelectorAll(".st-appChrome__menuItem")).find((b) => b.textContent?.includes("English"));
+        await fireEvent.click(en);
+        expect(onLocaleChange).toHaveBeenCalledWith("en");
+    });
+});
+describe("AppChrome — github + identité", () => {
+    it("renders the github link with the provided href", () => {
+        const { container } = render(AppChrome, { props: { githubHref: "https://github.com/x/y" } });
+        const link = container.querySelector('.st-appChrome__utilityNav a[target="_blank"]');
+        expect(link.getAttribute("href")).toBe("https://github.com/x/y");
+    });
+    it("renders the identity snippet content", () => {
+        const { container } = render(AppChrome, { props: { identity: snippet("account-zone") } });
+        expect(container.querySelector(".st-appChrome__identity")?.textContent).toContain("account-zone");
+    });
+});
+describe("AppChrome — mobile burger + tiroir", () => {
+    it("wires the burger aria-controls to the drawer id and renders the drawer when open", () => {
+        const { container } = render(AppChrome, { props: { nav, mobileMenuOpen: true } });
+        const burger = container.querySelector(".st-appChrome__burgerTrigger");
+        const drawer = container.querySelector(".st-appChrome__drawer");
+        expect(drawer).toBeTruthy();
+        expect(burger.getAttribute("aria-expanded")).toBe("true");
+        expect(burger.getAttribute("aria-controls")).toBe(drawer.id);
+        expect(drawer.querySelectorAll(".st-appChrome__drawerLink").length).toBeGreaterThanOrEqual(3);
+    });
+    it("does not render the drawer when closed and toggles via callback", async () => {
+        const onMobileMenuToggle = vi.fn();
+        const { container } = render(AppChrome, { props: { nav, onMobileMenuToggle } });
+        expect(container.querySelector(".st-appChrome__drawer")).toBeNull();
+        await fireEvent.click(container.querySelector(".st-appChrome__burgerTrigger"));
+        expect(onMobileMenuToggle).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/ConfigItemCard.svelte

@@ -0,0 +1,303 @@
+<script lang="ts" module>
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { Snippet } from "svelte";
+
+  export type ConfigItemSourceLevel = "code" | "admin" | "user";
+
+  export type ConfigItem = {
+    id: string;
+    name: string;
+    key?: string;
+    description?: string | null;
+    /** Provenance : `code`/`admin` = système (verrouillé), `user` = personnalisé. */
+    sourceLevel: ConfigItemSourceLevel;
+    /** Identifiant du parent si l'item est une copie d'un défaut système. */
+    parentId?: string | null;
+    version?: number;
+  };
+
+  export type ConfigItemCardProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** L'item de configuration décrit par la carte. */
+    item: ConfigItem;
+    /** Vrai si une copie de cet item système existe déjà : masque l'action Copier. */
+    hasCopy?: boolean;
+    /** Action Copier (items système uniquement). */
+    onCopy?: (id: string) => void;
+    /** Action Éditer (items copiés ou créés par l'utilisateur). */
+    onEdit?: (id: string) => void;
+    /** Action Réinitialiser (items copiés uniquement). */
+    onReset?: (id: string) => void;
+    /** Action Supprimer (items créés par l'utilisateur uniquement). */
+    onDelete?: (id: string) => void;
+    /** Désactive toutes les actions. */
+    disabled?: boolean;
+    class?: string;
+    /** Contenu supplémentaire sous la carte (formulaire d'édition, détails…). */
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  let {
+    item,
+    hasCopy = false,
+    onCopy,
+    onEdit,
+    onReset,
+    onDelete,
+    disabled = false,
+    class: className,
+    children,
+    ...rest
+  }: ConfigItemCardProps = $props();
+
+  const isSystem = $derived(item.sourceLevel === "code" || item.sourceLevel === "admin");
+  const isCopied = $derived(item.sourceLevel === "user" && !!item.parentId);
+  const isUserCreated = $derived(item.sourceLevel === "user" && !item.parentId);
+
+  const classes = $derived(["st-configItemCard", className].filter(Boolean).join(" "));
+</script>
+
+<article
+  {...rest}
+  class={classes}
+  data-testid={`config-item-card-${item.key ?? item.id}`}
+>
+  <div class="st-configItemCard__header">
+    <span class="st-configItemCard__name">{item.name}</span>
+    {#if isSystem}
+      <span class="st-configItemCard__badge st-configItemCard__badge--system">
+        <svg
+          class="st-configItemCard__badgeIcon"
+          width="12"
+          height="12"
+          viewBox="0 0 14 14"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <path
+            d="M4 6V4.5a3 3 0 0 1 6 0V6M3.5 6h7A1.5 1.5 0 0 1 12 7.5v3A1.5 1.5 0 0 1 10.5 12h-7A1.5 1.5 0 0 1 2 10.5v-3A1.5 1.5 0 0 1 3.5 6Z"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.25"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+        Système
+      </span>
+    {:else if isCopied}
+      <span class="st-configItemCard__badge st-configItemCard__badge--custom">
+        Personnalisé
+      </span>
+    {/if}
+  </div>
+
+  {#if item.key}
+    <div class="st-configItemCard__key">{item.key}</div>
+  {/if}
+
+  {#if item.description}
+    <p class="st-configItemCard__description">{item.description}</p>
+  {/if}
+
+  {#if (isSystem && !hasCopy && onCopy) || ((isCopied || isUserCreated) && onEdit) || (isCopied && onReset) || (isUserCreated && onDelete)}
+    <div class="st-configItemCard__actions">
+      {#if isSystem && !hasCopy && onCopy}
+        <button
+          type="button"
+          class="st-configItemCard__action"
+          title="Copier"
+          aria-label="Copier"
+          {disabled}
+          onclick={() => onCopy?.(item.id)}
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+            <path
+              d="M5.5 5.5V3.75A1.25 1.25 0 0 1 6.75 2.5h5.5A1.25 1.25 0 0 1 13.5 3.75v5.5a1.25 1.25 0 0 1-1.25 1.25H10.5M3.75 5.5h5.5A1.25 1.25 0 0 1 10.5 6.75v5.5a1.25 1.25 0 0 1-1.25 1.25h-5.5A1.25 1.25 0 0 1 2.5 12.25v-5.5A1.25 1.25 0 0 1 3.75 5.5Z"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.25"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+      {/if}
+      {#if (isCopied || isUserCreated) && onEdit}
+        <button
+          type="button"
+          class="st-configItemCard__action"
+          title="Éditer"
+          aria-label="Éditer"
+          {disabled}
+          onclick={() => onEdit?.(item.id)}
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+            <path
+              d="m10.5 2.5 3 3L6 13l-3.5.5L3 10l7.5-7.5Z"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.25"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+      {/if}
+      {#if isCopied && onReset}
+        <button
+          type="button"
+          class="st-configItemCard__action st-configItemCard__action--warning"
+          title="Réinitialiser"
+          aria-label="Réinitialiser"
+          {disabled}
+          onclick={() => onReset?.(item.id)}
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+            <path
+              d="M3 8a5 5 0 1 1 1.5 3.5M3 8V5M3 8h3"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.25"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+      {/if}
+      {#if isUserCreated && onDelete}
+        <button
+          type="button"
+          class="st-configItemCard__action st-configItemCard__action--danger"
+          title="Supprimer"
+          aria-label="Supprimer"
+          {disabled}
+          onclick={() => onDelete?.(item.id)}
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+            <path
+              d="M3 4.5h10M6 4.5V3.25A.75.75 0 0 1 6.75 2.5h2.5a.75.75 0 0 1 .75.75V4.5M4.25 4.5l.5 8A1 1 0 0 0 5.75 13.5h4.5a1 1 0 0 0 1-.99l.5-8"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.25"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+      {/if}
+    </div>
+  {/if}
+
+  {@render children?.()}
+</article>
+
+<style>
+  .st-configItemCard {
+    background: var(--st-component-card-background, var(--st-semantic-surface-raised));
+    border-width: var(--st-component-card-anatomy-shape-borderWidth, 1px);
+    border-style: var(--st-component-card-anatomy-shape-borderStyle, solid);
+    border-color: var(--st-component-card-border, var(--st-semantic-border-subtle));
+    border-radius: var(--st-component-card-anatomy-shape-radius, 0.5rem);
+    color: var(--st-semantic-text-primary);
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-1, 0.25rem);
+    padding: var(--st-spacing-4, 1rem);
+  }
+
+  .st-configItemCard__header {
+    align-items: center;
+    display: flex;
+    gap: var(--st-spacing-2, 0.5rem);
+    justify-content: space-between;
+  }
+
+  .st-configItemCard__name {
+    color: var(--st-semantic-text-primary);
+    font-weight: 600;
+  }
+
+  .st-configItemCard__badge {
+    align-items: center;
+    border-radius: 9999px;
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: 0.6875rem;
+    font-weight: 500;
+    gap: var(--st-spacing-1, 0.25rem);
+    line-height: 1;
+    padding: 0.1875rem var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-configItemCard__badge--system {
+    background: var(--st-semantic-surface-subtle);
+    color: var(--st-semantic-text-secondary);
+  }
+
+  .st-configItemCard__badge--custom {
+    background: var(--st-semantic-feedback-info);
+    color: var(--st-semantic-text-inverse);
+  }
+
+  .st-configItemCard__badgeIcon {
+    display: block;
+    flex: 0 0 auto;
+  }
+
+  .st-configItemCard__key {
+    color: var(--st-semantic-text-muted);
+    font-size: 0.75rem;
+  }
+
+  .st-configItemCard__description {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.875rem;
+    line-height: 1.4;
+    margin: var(--st-spacing-1, 0.25rem) 0 0;
+  }
+
+  .st-configItemCard__actions {
+    display: flex;
+    gap: var(--st-spacing-1, 0.25rem);
+    margin-top: var(--st-spacing-3, 0.75rem);
+  }
+
+  .st-configItemCard__action {
+    align-items: center;
+    background: transparent;
+    border: none;
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-muted);
+    cursor: var(--st-cursor-interactive, pointer);
+    display: inline-flex;
+    justify-content: center;
+    padding: var(--st-spacing-1, 0.25rem);
+    transition: color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-configItemCard__action:hover:not(:disabled) {
+    background: var(--st-semantic-surface-hover);
+    color: var(--st-semantic-text-primary);
+  }
+
+  .st-configItemCard__action--warning:hover:not(:disabled) {
+    color: var(--st-semantic-feedback-warning);
+  }
+
+  .st-configItemCard__action--danger:hover:not(:disabled) {
+    color: var(--st-semantic-feedback-error);
+  }
+
+  .st-configItemCard__action:focus-visible {
+    outline: 2px solid var(--st-semantic-border-interactive);
+    outline-offset: 2px;
+  }
+
+  .st-configItemCard__action:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+</style>

package/dist/ConfigItemCard.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+export type ConfigItemSourceLevel = "code" | "admin" | "user";
+export type ConfigItem = {
+    id: string;
+    name: string;
+    key?: string;
+    description?: string | null;
+    /** Provenance : `code`/`admin` = système (verrouillé), `user` = personnalisé. */
+    sourceLevel: ConfigItemSourceLevel;
+    /** Identifiant du parent si l'item est une copie d'un défaut système. */
+    parentId?: string | null;
+    version?: number;
+};
+export type ConfigItemCardProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** L'item de configuration décrit par la carte. */
+    item: ConfigItem;
+    /** Vrai si une copie de cet item système existe déjà : masque l'action Copier. */
+    hasCopy?: boolean;
+    /** Action Copier (items système uniquement). */
+    onCopy?: (id: string) => void;
+    /** Action Éditer (items copiés ou créés par l'utilisateur). */
+    onEdit?: (id: string) => void;
+    /** Action Réinitialiser (items copiés uniquement). */
+    onReset?: (id: string) => void;
+    /** Action Supprimer (items créés par l'utilisateur uniquement). */
+    onDelete?: (id: string) => void;
+    /** Désactive toutes les actions. */
+    disabled?: boolean;
+    class?: string;
+    /** Contenu supplémentaire sous la carte (formulaire d'édition, détails…). */
+    children?: Snippet;
+};
+declare const ConfigItemCard: import("svelte").Component<ConfigItemCardProps, {}, "">;
+type ConfigItemCard = ReturnType<typeof ConfigItemCard>;
+export default ConfigItemCard;
+//# sourceMappingURL=ConfigItemCard.svelte.d.ts.map

package/dist/ConfigItemCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigItemCard.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ConfigItemCard.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,iFAAiF;IACjF,WAAW,EAAE,qBAAqB,CAAC;IACnC,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC7E,mDAAmD;IACnD,IAAI,EAAE,UAAU,CAAC;IACjB,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gDAAgD;IAChD,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,+DAA+D;IAC/D,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA0FJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/DataTable.svelte.d.ts

@@ -44,7 +44,7 @@ type DataTableProps = Omit<HTMLTableAttributes, "class"> & {
     onRowClick?: (row: DataTableRow) => void;
     class?: string;
 };
-declare const DataTable: import("svelte").Component<DataTableProps, {}, "selectedIds" | "page" | "sortBy">;
+declare const DataTable: import("svelte").Component<DataTableProps, {}, "page" | "selectedIds" | "sortBy">;
 type DataTable = ReturnType<typeof DataTable>;
 export default DataTable;
 //# sourceMappingURL=DataTable.svelte.d.ts.map

package/dist/ErrorSummary.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  /** A single field error: `href` points to the offending control, `text` is the message. */
+  export type ErrorSummaryItem = { href: string; text: string };
+
+  type ErrorSummaryProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** Summary heading. */
+    heading?: string;
+    /** The list of errors, each linking to the field that needs attention. */
+    errors?: ErrorSummaryItem[];
+    class?: string;
+  };
+
+  let {
+    heading = "There was a problem",
+    errors = [],
+    class: className,
+    ...rest
+  }: ErrorSummaryProps = $props();
+
+  const classes = () => ["st-error-summary", className].filter(Boolean).join(" ");
+</script>
+
+<!--
+  ErrorSummary — GCDS « Error summary »: an aggregated list of a form's errors,
+  each entry linking to the field that needs attention. role="alert" + tabindex
+  so it can take focus when shown after a failed submission.
+-->
+<section {...rest} class={classes()} role="alert" tabindex="-1">
+  <h2 class="st-error-summary__heading">{heading}</h2>
+  {#if errors.length > 0}
+    <ul class="st-error-summary__list">
+      {#each errors as error (error.href)}
+        <li class="st-error-summary__item">
+          <a class="st-error-summary__link" href={error.href}>{error.text}</a>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</section>
+
+<style>
+  .st-error-summary {
+    background: var(--st-semantic-surface-default);
+    border: 2px solid var(--st-semantic-feedback-error);
+    border-radius: var(--st-radius-md, 0.25rem);
+    color: var(--st-semantic-text-primary);
+    padding: var(--st-spacing-4, 1rem);
+  }
+
+  .st-error-summary__heading {
+    font-size: 1.125rem;
+    font-weight: 700;
+    margin: 0 0 var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-error-summary__list {
+    display: grid;
+    gap: var(--st-spacing-1, 0.25rem);
+    margin: 0;
+    padding-left: var(--st-spacing-4, 1rem);
+  }
+
+  .st-error-summary__link {
+    color: var(--st-semantic-feedback-error);
+    font-weight: 600;
+    text-decoration: underline;
+  }
+
+  .st-error-summary__link:hover,
+  .st-error-summary__link:focus-visible {
+    text-decoration: none;
+  }
+</style>

package/dist/ErrorSummary.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from "svelte/elements";
+/** A single field error: `href` points to the offending control, `text` is the message. */
+export type ErrorSummaryItem = {
+    href: string;
+    text: string;
+};
+type ErrorSummaryProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** Summary heading. */
+    heading?: string;
+    /** The list of errors, each linking to the field that needs attention. */
+    errors?: ErrorSummaryItem[];
+    class?: string;
+};
+declare const ErrorSummary: import("svelte").Component<ErrorSummaryProps, {}, "">;
+type ErrorSummary = ReturnType<typeof ErrorSummary>;
+export default ErrorSummary;
+//# sourceMappingURL=ErrorSummary.svelte.d.ts.map

package/dist/ErrorSummary.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorSummary.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ErrorSummary.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,2FAA2F;AAC3F,MAAM,MAAM,gBAAgB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACpE,uBAAuB;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAkCJ,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}