@sentropic/design-system-svelte 0.34.50 → 0.34.52

package/README.md

@@ -0,0 +1,62 @@
+# `@sentropic/design-system-svelte`
+
+Svelte implementation of the Sentropic design-system component catalog. The package ships ESM JavaScript, TypeScript declarations, and the shared component CSS.
+
+## Installation
+
+```bash
+npm install @sentropic/design-system-svelte @sentropic/design-system-themes
+```
+
+Svelte is a peer dependency:
+
+```bash
+npm install svelte
+```
+
+## Usage
+
+Import the package CSS once at the app or preview boundary, then render components inside `ThemeProvider`.
+
+```svelte
+<script>
+  import { Button, Card, ThemeProvider } from "@sentropic/design-system-svelte";
+  import "@sentropic/design-system-svelte/styles.css";
+</script>
+
+<ThemeProvider>
+  <Card>
+    <strong>Release plan</strong>
+    <Button>Open plan</Button>
+  </Card>
+</ThemeProvider>
+```
+
+`ThemeProvider` defaults to the Sent Tech theme. Tenant themes can be supplied from `@sentropic/design-system-themes`, `@sentropic/design-system-theme-dsfr`, or `@sentropic/design-system-theme-carbon`.
+
+```svelte
+<script>
+  import { ThemeProvider } from "@sentropic/design-system-svelte";
+  import { carbonTheme } from "@sentropic/design-system-theme-carbon";
+</script>
+
+<ThemeProvider theme={carbonTheme}>
+  <!-- your content -->
+</ThemeProvider>
+```
+
+## Exports
+
+- `@sentropic/design-system-svelte`: all public Svelte components and TypeScript props.
+- `@sentropic/design-system-svelte/styles.css`: component CSS consumed by every theme.
+
+The package includes declarations through `dist/index.d.ts` and marks `dist/styles.css` as a side effect so bundlers keep the stylesheet import.
+
+## Build
+
+```bash
+npm --workspace @sentropic/design-system-svelte run build
+npm --workspace @sentropic/design-system-svelte run test
+```
+
+Publishing is handled by `.github/workflows/svelte-publish.yml` with a `svelte-v*` tag.

package/dist/AnomalySwimLaneChart.svelte

@@ -23,6 +23,8 @@
     | "category1" | "category2" | "category3" | "category4"
     | "category5" | "category6" | "category7" | "category8";
 
+  export type AnomalySwimLaneChartScale = "categorical" | "sequential";
+
   export type AnomalySwimLaneBucket = {
     at: number;
     score: number;
@@ -40,6 +42,7 @@
   type AnomalySwimLaneChartProps = {
     data: AnomalySwimLaneSeries[];
     max?: number;
+    scale?: AnomalySwimLaneChartScale;
     label?: string;
     width?: number;
     height?: number;
@@ -50,6 +53,7 @@
   let {
     data = [],
     max,
+    scale = "sequential",
     label,
     width,
     height = 300,
@@ -73,6 +77,10 @@
     return TONES[index];
   }
 
+  function normalizedScale(value: AnomalySwimLaneChartScale | undefined): AnomalySwimLaneChartScale {
+    return value === "categorical" ? "categorical" : "sequential";
+  }
+
   // Tronque une étiquette à la largeur de la marge gauche (approx. par char).
   function ellipsize(text: string, maxChars: number): string {
     if (text.length <= maxChars) return text;
@@ -87,6 +95,7 @@
   }
 
   let hoveredKey: string | null = $state(null);
+  const resolvedScale = $derived(normalizedScale(scale));
 
   const plotWidth = $derived(Math.max(resolvedWidth - MARGIN.left - MARGIN.right, 1));
   const plotHeight = $derived(Math.max(height - MARGIN.top - MARGIN.bottom, 1));
@@ -190,7 +199,7 @@
     return null;
   });
 
-  const classes = () => ["st-anomalySwimLaneChart", className].filter(Boolean).join(" ");
+  const classes = () => ["st-anomalySwimLaneChart", `st-anomalySwimLaneChart--${resolvedScale}`, className].filter(Boolean).join(" ");
 </script>
 
 <div class={classes()}>

package/dist/AnomalySwimLaneChart.svelte.d.ts

@@ -19,6 +19,7 @@
  *   class   string
  */
 export type AnomalySwimLaneTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type AnomalySwimLaneChartScale = "categorical" | "sequential";
 export type AnomalySwimLaneBucket = {
     at: number;
     score: number;
@@ -30,6 +31,7 @@ export type AnomalySwimLaneSeries = {
 type AnomalySwimLaneChartProps = {
     data: AnomalySwimLaneSeries[];
     max?: number;
+    scale?: AnomalySwimLaneChartScale;
     label?: string;
     width?: number;
     height?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"AnomalySwimLaneChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AnomalySwimLaneChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,mBAAmB,GAC3B,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,qBAAqB,EAAE,CAAC;CAClC,CAAC;AAMF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,qBAAqB,EAAE,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+MJ,QAAA,MAAM,oBAAoB,+DAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"AnomalySwimLaneChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AnomalySwimLaneChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,mBAAmB,GAC3B,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,yBAAyB,GAAG,aAAa,GAAG,YAAY,CAAC;AAErE,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,qBAAqB,EAAE,CAAC;CAClC,CAAC;AAMF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,qBAAqB,EAAE,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqNJ,QAAA,MAAM,oBAAoB,+DAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/CalendarHeatmapChart.svelte

@@ -16,6 +16,8 @@
     date: string;
     value: number;
   };
+
+  export type CalendarHeatmapChartScale = "categorical" | "sequential";
 </script>
 
 <script lang="ts">
@@ -29,6 +31,7 @@
   type CalendarHeatmapChartProps = {
     data: CalendarHeatmapChartDatum[];
     label: string;
+    scale?: CalendarHeatmapChartScale;
     width?: number;
     height?: number;
     class?: string;
@@ -37,6 +40,7 @@
   let {
     data = [],
     label,
+    scale = "sequential",
     width = 480,
     height = 140,
     class: className
@@ -75,6 +79,12 @@
     return Math.round((tsB - tsA) / 86400000);
   }
 
+  function normalizedScale(value: CalendarHeatmapChartScale | undefined): CalendarHeatmapChartScale {
+    return value === "categorical" ? "categorical" : "sequential";
+  }
+
+  const resolvedScale = $derived(normalizedScale(scale));
+
   // Group data by week and day-of-week
   const grid = $derived.by(() => {
     if (data.length === 0) return { cells: [], weeks: 0, monthLabels: [] };
@@ -187,7 +197,7 @@
     hoveredDate = target.getAttribute("data-chart-date") ?? null;
   }
 
-  const classes = () => ["st-calendarHeatmapChart", className].filter(Boolean).join(" ");
+  const classes = () => ["st-calendarHeatmapChart", `st-calendarHeatmapChart--${resolvedScale}`, className].filter(Boolean).join(" ");
 </script>
 
 <div class={classes()}>

package/dist/CalendarHeatmapChart.svelte.d.ts

@@ -15,9 +15,11 @@ export type CalendarHeatmapChartDatum = {
     date: string;
     value: number;
 };
+export type CalendarHeatmapChartScale = "categorical" | "sequential";
 type CalendarHeatmapChartProps = {
     data: CalendarHeatmapChartDatum[];
     label: string;
+    scale?: CalendarHeatmapChartScale;
     width?: number;
     height?: number;
     class?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarHeatmapChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CalendarHeatmapChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAMF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,yBAAyB,EAAE,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAgNJ,QAAA,MAAM,oBAAoB,+DAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"CalendarHeatmapChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CalendarHeatmapChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,aAAa,GAAG,YAAY,CAAC;AAMrE,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,yBAAyB,EAAE,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuNJ,QAAA,MAAM,oBAAoB,+DAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/Combobox.svelte

@@ -56,6 +56,8 @@
   let expanded = $state(false);
   let activeIndex = $state(-1);
 
+  const inputId = $derived((rest as { id?: string }).id ?? `st-combobox-${Math.random().toString(36).slice(2, 9)}`);
+
   const fieldClasses = () => ["st-field", className].filter(Boolean).join(" ");
   const groupClasses = () => ["st-combobox", `st-combobox--${size}`].join(" ");
   const isInvalid = () => invalid || Boolean(errorText);
@@ -93,6 +95,7 @@
 
   function clear() {
     value = "";
+    activeIndex = -1;
     onchange?.("");
   }
 
@@ -131,11 +134,12 @@
 </script>
 
 <div class={fieldClasses()}>
-  <label class="st-field__control">
+  <label class="st-field__control" for={inputId}>
     {#if label}<span class="st-field__label">{label}</span>{/if}
     <span class={groupClasses()}>
       <input
         {...rest}
+        id={inputId}
         type="text"
         class="st-combobox__control"
         role="combobox"

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Combobox.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAIH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,aAAa,GAAG,IAAI,CACvB,mBAAmB,EACnB,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CACjD,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAsJJ,QAAA,MAAM,QAAQ,wDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Combobox.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Combobox.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAIH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,aAAa,GAAG,IAAI,CACvB,mBAAmB,EACnB,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CACjD,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAyJJ,QAAA,MAAM,QAAQ,wDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/ContourChart.svelte

@@ -27,30 +27,34 @@
     | "category1" | "category2" | "category3" | "category4"
     | "category5" | "category6" | "category7" | "category8";
 
+  export type ContourChartScale = "categorical" | "sequential";
+
   export type ContourChartDatum = {
     x: number;
     y: number;
     /** Valeur scalaire de la cellule : pilote la bande de couleur. */
     value: number;
   };
-</script>
-
-<script lang="ts">
-  import ChartDataList from "./ChartDataList.svelte";
 
-  type ContourChartProps = {
+  export type ContourChartProps = {
     data: ContourChartDatum[];
     levels?: number;
+    scale?: ContourChartScale;
     label?: string;
     width?: number;
     height?: number;
     size?: number;
     class?: string;
   };
+</script>
+
+<script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
 
   let {
     data = [],
     levels = 6,
+    scale = "sequential",
     label,
     width = 640,
     height = 320,
@@ -90,12 +94,17 @@
     return r0 + ((v - d0) * (r1 - r0)) / (d1 - d0);
   }
 
+  function normalizedScale(value: ContourChartScale | undefined): ContourChartScale {
+    return value === "categorical" ? "categorical" : "sequential";
+  }
+
   function fmt(v: number): string {
     if (Math.abs(v) >= 1000) return `${(v / 1000).toFixed(v % 1000 === 0 ? 0 : 1)}k`;
     return Number.isInteger(v) ? String(v) : v.toFixed(1);
   }
 
   let hoveredKey: string | null = $state(null);
+  const resolvedScale = $derived(normalizedScale(scale));
 
   // Points valides : coordonnées finies, valeur finie.
   const validData = $derived(
@@ -120,13 +129,17 @@
     return { min, max };
   });
 
+  function toneForBand(band: number): ContourChartTone {
+    const toneIndex = Math.max(0, Math.min(TONES.length - 1, Math.floor((band / Math.max(levelCount - 1, 1)) * (TONES.length - 1))));
+    return TONES[toneIndex];
+  }
+
   // Palier (0..levelCount-1) puis ton catégoriel : valeur normalisée 0..1 → bande.
   function bandOf(value: number): { band: number; tone: ContourChartTone } {
     const { min, max } = valueRange;
     const ratio = max > min ? (value - min) / (max - min) : 0;
     const band = Math.max(0, Math.min(levelCount - 1, Math.floor(ratio * levelCount)));
-    const toneIndex = Math.max(0, Math.min(TONES.length - 1, Math.floor((band / Math.max(levelCount - 1, 1)) * (TONES.length - 1))));
-    return { band, tone: TONES[toneIndex] };
+    return { band, tone: toneForBand(band) };
   }
 
   const scales = $derived.by(() => {
@@ -157,17 +170,22 @@
 
   // Une bande rectangulaire par cellule de grille, peinte selon sa value.
   const cells = $derived.by(() => {
-    const { xMin, xMax, yMin, yMax, plotW, plotH } = scales;
+    const { xMin, xMax, yMin, yMax, plotW, plotH, xValues, yValues } = scales;
     const { dx, dy } = cellSpan;
+    const xIndexByValue = new Map(xValues.map((value, index) => [value, index]));
+    const yIndexByValue = new Map(yValues.map((value, index) => [value, index]));
     return validData.map((d, i) => {
       const left = MARGIN.left + scaleLinear(d.x - dx / 2, xMin, xMax, 0, plotW);
       const right = MARGIN.left + scaleLinear(d.x + dx / 2, xMin, xMax, 0, plotW);
       const top = MARGIN.top + scaleLinear(d.y + dy / 2, yMin, yMax, plotH, 0);
       const bottom = MARGIN.top + scaleLinear(d.y - dy / 2, yMin, yMax, plotH, 0);
-      const { tone } = bandOf(d.value);
+      const { band, tone } = bandOf(d.value);
       return {
         key: `${i}`,
         datum: d,
+        band,
+        col: xIndexByValue.get(d.x) ?? 0,
+        row: yIndexByValue.get(d.y) ?? 0,
         x: Math.min(left, right),
         y: Math.min(top, bottom),
         width: Math.abs(right - left),
@@ -179,14 +197,41 @@
     });
   });
 
+  const contourSegments = $derived.by(() => {
+    const byGrid = new Map(cells.map((cell) => [`${cell.col}:${cell.row}`, cell]));
+    const segments = [];
+    for (const cell of cells) {
+      const right = byGrid.get(`${cell.col + 1}:${cell.row}`);
+      if (right && right.band !== cell.band) {
+        segments.push({
+          key: `${cell.key}:right`,
+          x1: cell.x + cell.width,
+          y1: cell.y,
+          x2: cell.x + cell.width,
+          y2: cell.y + cell.height
+        });
+      }
+      const upper = byGrid.get(`${cell.col}:${cell.row + 1}`);
+      if (upper && upper.band !== cell.band) {
+        segments.push({
+          key: `${cell.key}:top`,
+          x1: cell.x,
+          y1: cell.y,
+          x2: cell.x + cell.width,
+          y2: cell.y
+        });
+      }
+    }
+    return segments;
+  });
+
   const dataValueItems = $derived(
     validData.map((d) => `x ${d.x}, y ${d.y} · ${fmt(d.value)}`)
   );
 
   const legendItems = $derived(
     Array.from({ length: levelCount }, (_, band) => {
-      const toneIndex = Math.max(0, Math.min(TONES.length - 1, Math.floor((band / Math.max(levelCount - 1, 1)) * (TONES.length - 1))));
-      return { band, tone: TONES[toneIndex] };
+      return { band, tone: toneForBand(band) };
     })
   );
   const hasLegend = $derived(validData.length > 0);
@@ -205,7 +250,7 @@
     return cells.find((c) => c.key === hoveredKey) ?? null;
   });
 
-  const classes = () => ["st-contourChart", className].filter(Boolean).join(" ");
+  const classes = () => ["st-contourChart", `st-contourChart--${resolvedScale}`, className].filter(Boolean).join(" ");
 </script>
 
 <div class={classes()}>
@@ -237,6 +282,16 @@
         />
       {/each}
 
+      {#each contourSegments as segment (segment.key)}
+        <line
+          class="st-contourChart__isoline"
+          x1={segment.x1}
+          y1={segment.y1}
+          x2={segment.x2}
+          y2={segment.y2}
+        />
+      {/each}
+
       <!-- gridlines + ticks Y -->
       {#each scales.yTicks as t (t)}
         {@const y = MARGIN.top + scaleLinear(t, scales.yMin, scales.yMax, scales.plotH, 0)}
@@ -319,7 +374,7 @@
 
   .st-contourChart__cell {
     cursor: pointer;
-    stroke: var(--st-semantic-surface-default, Canvas);
+    stroke: var(--st-semantic-surface-default);
     stroke-width: 0.5;
     transition: opacity 120ms ease;
   }
@@ -328,6 +383,14 @@
     opacity: 0.35;
   }
 
+  .st-contourChart__isoline {
+    pointer-events: none;
+    stroke: var(--st-semantic-border-strong);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 1.5;
+  }
+
   .st-contourChart__cell--category1 { fill: var(--st-semantic-data-category1); }
   .st-contourChart__cell--category2 { fill: var(--st-semantic-data-category2); }
   .st-contourChart__cell--category3 { fill: var(--st-semantic-data-category3); }

package/dist/ContourChart.svelte.d.ts

@@ -23,15 +23,17 @@
  *   class   string
  */
 export type ContourChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type ContourChartScale = "categorical" | "sequential";
 export type ContourChartDatum = {
     x: number;
     y: number;
     /** Valeur scalaire de la cellule : pilote la bande de couleur. */
     value: number;
 };
-type ContourChartProps = {
+export type ContourChartProps = {
     data: ContourChartDatum[];
     levels?: number;
+    scale?: ContourChartScale;
     label?: string;
     width?: number;
     height?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"ContourChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ContourChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,MAAM,gBAAgB,GACxB,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAMF,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4NJ,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ContourChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ContourChart.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,MAAM,gBAAgB,GACxB,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,iBAAiB,GAAG,aAAa,GAAG,YAAY,CAAC;AAE7D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6QJ,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/CopyButton.svelte

@@ -4,6 +4,7 @@
 
   type CopyButtonProps = Omit<HTMLButtonAttributes, "class" | "type"> & {
     value: string;
+    locale?: string;
     label?: string;
     copiedLabel?: string;
     feedbackTimeoutMs?: number;
@@ -15,8 +16,9 @@
 
   let {
     value,
-    label = "Copy",
-    copiedLabel = "Copied",
+    locale = "fr-FR",
+    label,
+    copiedLabel,
     feedbackTimeoutMs = 1500,
     size = "md",
     onCopied,
@@ -26,6 +28,10 @@
     ...rest
   }: CopyButtonProps = $props();
 
+  const isFr = $derived(locale.toLowerCase().startsWith("fr"));
+  const resolvedLabel = $derived(label ?? (isFr ? "Copier" : "Copy"));
+  const resolvedCopiedLabel = $derived(copiedLabel ?? (isFr ? "Copié" : "Copied"));
+
   let copied = $state(false);
   let timeoutId: ReturnType<typeof setTimeout> | undefined;
 
@@ -65,7 +71,7 @@
       <Copy size={14} strokeWidth={2} aria-hidden="true" />
     {/if}
   </span>
-  <span class="st-copyButton__label">{copied ? copiedLabel : label}</span>
+  <span class="st-copyButton__label">{copied ? resolvedCopiedLabel : resolvedLabel}</span>
 </button>
 
 <style>

package/dist/CopyButton.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { HTMLButtonAttributes } from "svelte/elements";
 type CopyButtonProps = Omit<HTMLButtonAttributes, "class" | "type"> & {
     value: string;
+    locale?: string;
     label?: string;
     copiedLabel?: string;
     feedbackTimeoutMs?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CopyButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAI1D,KAAK,eAAe,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA0DJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"CopyButton.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CopyButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAI1D,KAAK,eAAe,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+DJ,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/Dashboard.svelte

@@ -0,0 +1,155 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { SideNavItem } from "./SideNav.svelte";
+
+  export interface DashboardNavItem extends SideNavItem {}
+
+  export interface DashboardKpi {
+    label: string;
+    value: string;
+    unit?: string;
+    trend?: "up" | "down" | "flat";
+  }
+
+  export type DashboardProps = {
+    appTitle: string;
+    navItems?: DashboardNavItem[];
+    pageTitle: string;
+    kpis?: DashboardKpi[];
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import SideNav from "./SideNav.svelte";
+
+  let {
+    appTitle,
+    navItems = [],
+    pageTitle,
+    kpis = [],
+    children,
+  }: DashboardProps = $props();
+</script>
+
+<div class="st-dash">
+  <header class="st-dash__header">
+    <span class="st-dash__appTitle">{appTitle}</span>
+  </header>
+  <div class="st-dash__body">
+    {#if navItems.length > 0}
+      <aside class="st-dash__aside">
+        <SideNav items={navItems} />
+      </aside>
+    {/if}
+    <main class="st-dash__main">
+      <h1 class="st-dash__pageTitle">{pageTitle}</h1>
+      {#if kpis.length > 0}
+        <div class="st-dash__kpi-row">
+          {#each kpis as kpi}
+            <div class="st-dash__kpi">
+              <span class="st-dash__kpiLabel">{kpi.label}</span>
+              <span class="st-dash__kpiValue">
+                {kpi.value}{#if kpi.unit}<span class="st-dash__kpiUnit"> {kpi.unit}</span>{/if}
+              </span>
+              {#if kpi.trend}
+                <span class="st-dash__kpiTrend st-dash__kpiTrend--{kpi.trend}" aria-label="Tendance {kpi.trend}">
+                  {#if kpi.trend === "up"}↑{:else if kpi.trend === "down"}↓{:else}→{/if}
+                </span>
+              {/if}
+            </div>
+          {/each}
+        </div>
+      {/if}
+      {#if children}
+        <div class="st-dash__content">
+          {@render children()}
+        </div>
+      {/if}
+    </main>
+  </div>
+</div>
+
+<style>
+  .st-dash {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    min-block-size: 100vh;
+    background: var(--st-semantic-surface-default);
+    color: var(--st-semantic-text-primary);
+  }
+  .st-dash__header {
+    border-block-end: 1px solid var(--st-semantic-border-subtle);
+    padding: var(--st-spacing-3, 0.75rem) var(--st-spacing-6, 1.5rem);
+    display: flex;
+    align-items: center;
+  }
+  .st-dash__appTitle {
+    font-weight: 700;
+    font-size: 1rem;
+  }
+  .st-dash__body {
+    display: grid;
+    grid-template-columns: 220px 1fr;
+    overflow: hidden;
+  }
+  .st-dash__aside {
+    border-inline-end: 1px solid var(--st-semantic-border-subtle);
+    background: var(--st-semantic-surface-raised);
+    overflow-y: auto;
+  }
+  .st-dash__main {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-6, 1.5rem);
+    padding: var(--st-spacing-6, 1.5rem);
+    overflow-y: auto;
+  }
+  .st-dash__pageTitle {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin: 0;
+  }
+  .st-dash__kpi-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+    gap: var(--st-spacing-4, 1rem);
+  }
+  .st-dash__kpi {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-1, 0.25rem);
+    padding: var(--st-spacing-4, 1rem) var(--st-spacing-5, 1.25rem);
+    background: var(--st-semantic-surface-raised);
+    border: 1px solid var(--st-semantic-border-subtle);
+    border-radius: var(--st-radius-md, 0.5rem);
+  }
+  .st-dash__kpiLabel {
+    font-size: 0.75rem;
+    color: var(--st-semantic-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  .st-dash__kpiValue {
+    font-size: 1.75rem;
+    font-weight: 700;
+    line-height: 1;
+  }
+  .st-dash__kpiUnit {
+    font-size: 0.875rem;
+    font-weight: 400;
+    color: var(--st-semantic-text-secondary);
+  }
+  .st-dash__kpiTrend {
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+  .st-dash__kpiTrend--up { color: var(--st-semantic-color-success, #16a34a); }
+  .st-dash__kpiTrend--down { color: var(--st-semantic-color-error, #dc2626); }
+  .st-dash__kpiTrend--flat { color: var(--st-semantic-text-secondary); }
+  .st-dash__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-4, 1rem);
+  }
+</style>