@sentropic/design-system-svelte 0.34.0 → 0.34.20

package/dist/PolygonChart.svelte

@@ -0,0 +1,189 @@
+<script lang="ts" module>
+  export type PolygonChartTone =
+    | "category1" | "category2" | "category3" | "category4"
+    | "category5" | "category6" | "category7" | "category8";
+
+  export type PolygonChartPoint = {
+    x: number;
+    y: number;
+  };
+</script>
+
+<script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
+  type PolygonChartProps = {
+    data: PolygonChartPoint[];
+    label: string;
+    tone?: PolygonChartTone;
+    width?: number;
+    height?: number;
+    class?: string;
+  };
+
+  let {
+    data,
+    label,
+    tone = "category1",
+    width = 480,
+    height = 360,
+    class: className
+  }: PolygonChartProps = $props();
+
+  const MARGIN = { top: 14, right: 18, bottom: 36, left: 48 };
+
+  function niceTicks(min: number, max: number, target = 5): number[] {
+    if (!Number.isFinite(min) || !Number.isFinite(max) || min === max) {
+      return [Number.isFinite(max) ? max : 0];
+    }
+    const range = max - min;
+    const rough = range / Math.max(target - 1, 1);
+    const pow = Math.pow(10, Math.floor(Math.log10(rough)));
+    const norm = rough / pow;
+    let step: number;
+    if (norm < 1.5) step = pow;
+    else if (norm < 3) step = 2 * pow;
+    else if (norm < 7) step = 5 * pow;
+    else step = 10 * pow;
+    const start = Math.floor(min / step) * step;
+    const end = Math.ceil(max / step) * step;
+    const ticks: number[] = [];
+    for (let v = start; v <= end + step / 2; v += step) ticks.push(Number(v.toFixed(10)));
+    return ticks;
+  }
+
+  function scaleLinear(v: number, d0: number, d1: number, r0: number, r1: number) {
+    if (d1 === d0) return r0;
+    return r0 + ((v - d0) * (r1 - r0)) / (d1 - d0);
+  }
+
+  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 hoveredIndex: number | null = $state(null);
+
+  // Non-finite coordinates are dropped before anything else.
+  const validData = $derived(
+    (data ?? []).filter((d) => Number.isFinite(d.x) && Number.isFinite(d.y))
+  );
+
+  const scales = $derived.by(() => {
+    const xs = validData.map((d) => d.x);
+    const ys = validData.map((d) => d.y);
+    const xTicks = niceTicks(Math.min(...xs), Math.max(...xs));
+    const yTicks = niceTicks(Math.min(...ys), Math.max(...ys));
+    const plotW = Math.max(width - MARGIN.left - MARGIN.right, 1);
+    const plotH = Math.max(height - MARGIN.top - MARGIN.bottom, 1);
+    return {
+      xTicks, yTicks,
+      xMin: xTicks[0], xMax: xTicks[xTicks.length - 1],
+      yMin: yTicks[0], yMax: yTicks[yTicks.length - 1],
+      plotW, plotH
+    };
+  });
+
+  const points = $derived.by(() => {
+    const { xMin, xMax, yMin, yMax, plotW, plotH } = scales;
+    return validData.map((d) => ({
+      cx: MARGIN.left + scaleLinear(d.x, xMin, xMax, 0, plotW),
+      cy: MARGIN.top + scaleLinear(d.y, yMin, yMax, plotH, 0),
+      datum: d
+    }));
+  });
+
+  const polygonPoints = $derived(points.map((p) => `${p.cx},${p.cy}`).join(" "));
+
+  const dataValueItems = $derived(validData.map((d) => `x ${d.x}, y ${d.y}`));
+
+  function handleVisualPointerMove(event: PointerEvent) {
+    const target = event.target;
+    if (!(target instanceof Element)) {
+      hoveredIndex = null;
+      return;
+    }
+    const index = Number(target.getAttribute("data-chart-index"));
+    hoveredIndex = Number.isInteger(index) ? index : null;
+  }
+
+  const classes = () => ["st-polygonChart", className].filter(Boolean).join(" ");
+</script>
+
+<div class={classes()}>
+  <div
+    class="st-polygonChart__visual"
+    role="img"
+    aria-label={label}
+    onpointermove={handleVisualPointerMove}
+    onpointerleave={() => (hoveredIndex = null)}
+  >
+    <svg viewBox="0 0 {width} {height}" preserveAspectRatio="xMidYMid meet" width="100%" height="100%" focusable="false" aria-hidden="true">
+      <!-- gridlines + ticks Y -->
+      {#each scales.yTicks as t (t)}
+        {@const y = MARGIN.top + scaleLinear(t, scales.yMin, scales.yMax, scales.plotH, 0)}
+        <line class="st-polygonChart__grid" x1={MARGIN.left} x2={width - MARGIN.right} y1={y} y2={y} />
+        <text class="st-polygonChart__tick" x={MARGIN.left - 6} y={y} text-anchor="end" dominant-baseline="middle">{fmt(t)}</text>
+      {/each}
+      <!-- ticks X -->
+      {#each scales.xTicks as t (t)}
+        {@const x = MARGIN.left + scaleLinear(t, scales.xMin, scales.xMax, 0, scales.plotW)}
+        <text class="st-polygonChart__tick" x={x} y={height - MARGIN.bottom + 16} text-anchor="middle">{fmt(t)}</text>
+      {/each}
+
+      <!-- axes -->
+      <line class="st-polygonChart__axis" x1={MARGIN.left} x2={MARGIN.left} y1={MARGIN.top} y2={height - MARGIN.bottom} />
+      <line class="st-polygonChart__axis" x1={MARGIN.left} x2={width - MARGIN.right} y1={height - MARGIN.bottom} y2={height - MARGIN.bottom} />
+
+      <!-- closed filled polygon connecting the points in order -->
+      {#if points.length >= 2}
+        <polygon class="st-polygonChart__polygon st-polygonChart__polygon--{tone}" points={polygonPoints} />
+      {/if}
+
+      <!-- vertex markers -->
+      {#each points as p, i (i)}
+        <circle
+          class="st-polygonChart__vertex st-polygonChart__vertex--{tone}"
+          cx={p.cx}
+          cy={p.cy}
+          r="3.5"
+          data-chart-index={i}
+        />
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
+
+  {#if hoveredIndex !== null && points[hoveredIndex]}
+    {@const p = points[hoveredIndex]}
+    <div class="st-polygonChart__tooltip" role="presentation" style="left: {(p.cx / width) * 100}%; top: {(p.cy / height) * 100}%">
+      <span class="st-polygonChart__tooltipValue">x {p.datum.x} · y {p.datum.y}</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .st-polygonChart { color: var(--st-semantic-text-secondary); display: block; font-family: inherit; position: relative; width: 100%; }
+  .st-polygonChart svg, .st-polygonChart__visual { display: block; overflow: visible; }
+  .st-polygonChart__grid { stroke: var(--st-semantic-border-subtle); stroke-dasharray: 2 3; stroke-width: 1; opacity: 0.7; }
+  .st-polygonChart__axis { stroke: var(--st-semantic-border-subtle); stroke-width: 1; }
+  .st-polygonChart__tick { fill: var(--st-semantic-text-secondary); font-size: 0.6875rem; }
+  .st-polygonChart__polygon { fill: currentColor; fill-opacity: 0.18; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
+  .st-polygonChart__vertex { fill: currentColor; }
+  .st-polygonChart__polygon--category1, .st-polygonChart__vertex--category1 { color: var(--st-semantic-data-category1); }
+  .st-polygonChart__polygon--category2, .st-polygonChart__vertex--category2 { color: var(--st-semantic-data-category2); }
+  .st-polygonChart__polygon--category3, .st-polygonChart__vertex--category3 { color: var(--st-semantic-data-category3); }
+  .st-polygonChart__polygon--category4, .st-polygonChart__vertex--category4 { color: var(--st-semantic-data-category4); }
+  .st-polygonChart__polygon--category5, .st-polygonChart__vertex--category5 { color: var(--st-semantic-data-category5); }
+  .st-polygonChart__polygon--category6, .st-polygonChart__vertex--category6 { color: var(--st-semantic-data-category6); }
+  .st-polygonChart__polygon--category7, .st-polygonChart__vertex--category7 { color: var(--st-semantic-data-category7); }
+  .st-polygonChart__polygon--category8, .st-polygonChart__vertex--category8 { color: var(--st-semantic-data-category8); }
+  .st-polygonChart__tooltip {
+    background: var(--st-semantic-surface-inverse); border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-inverse); display: inline-flex; flex-direction: column;
+    font-size: 0.75rem; gap: 0.125rem; line-height: 1.2; padding: 0.375rem 0.5rem;
+    pointer-events: none; position: absolute; transform: translate(-50%, calc(-100% - 8px)); white-space: nowrap; z-index: 1;
+  }
+  .st-polygonChart__tooltipValue { opacity: 0.85; }
+</style>

package/dist/PolygonChart.svelte.d.ts

@@ -0,0 +1,17 @@
+export type PolygonChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type PolygonChartPoint = {
+    x: number;
+    y: number;
+};
+type PolygonChartProps = {
+    data: PolygonChartPoint[];
+    label: string;
+    tone?: PolygonChartTone;
+    width?: number;
+    height?: number;
+    class?: string;
+};
+declare const PolygonChart: import("svelte").Component<PolygonChartProps, {}, "">;
+type PolygonChart = ReturnType<typeof PolygonChart>;
+export default PolygonChart;
+//# sourceMappingURL=PolygonChart.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PolygonChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/PolygonChart.svelte.ts"],"names":[],"mappings":"AAGE,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;CACX,CAAC;AAMF,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6IJ,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/Search.svelte

@@ -143,14 +143,17 @@
 
   .st-search--sm {
     min-height: var(--st-component-control-smHeight, 2rem);
+    font-size: 0.8125rem;
   }
 
   .st-search--md {
     min-height: var(--st-component-control-mdHeight, 2.5rem);
+    font-size: 0.875rem;
   }
 
   .st-search--lg {
     min-height: var(--st-component-control-lgHeight, 3rem);
+    font-size: 1rem;
   }
 
   .st-search:hover:not(:has(input:disabled)) {
@@ -210,18 +213,17 @@
     align-items: center;
     background: transparent;
     border: 0;
-    border-radius: 50%;
-    color: inherit;
+    border-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
+    color: var(--st-semantic-text-secondary);
     cursor: pointer;
     display: inline-flex;
     flex: 0 0 auto;
     font: inherit;
-    font-size: 1.125rem;
     height: 1.5rem;
     justify-content: center;
     line-height: 1;
-    margin-inline-end: 0.375rem;
-    padding: 0;
+    margin-inline-end: 0.25rem;
+    padding: 0 0.25rem;
     transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
     width: 1.5rem;
   }

package/dist/Select.svelte

@@ -144,14 +144,17 @@
 
   .st-select--sm {
     min-height: var(--st-component-control-smHeight, 2rem);
+    font-size: 0.8125rem;
   }
 
   .st-select--md {
     min-height: var(--st-component-control-mdHeight, 2.5rem);
+    font-size: 0.875rem;
   }
 
   .st-select--lg {
     min-height: var(--st-component-control-lgHeight, 3rem);
+    font-size: 1rem;
   }
 
   .st-select:focus-visible {

package/dist/StreamgraphChart.svelte

@@ -0,0 +1,283 @@
+<script lang="ts" module>
+  export type StreamgraphChartTone =
+    | "category1" | "category2" | "category3" | "category4"
+    | "category5" | "category6" | "category7" | "category8";
+
+  // Une série pour un point d'abscisse : un libellé + sa valeur.
+  export type StreamgraphChartSeriesValue = {
+    label: string;
+    value: number;
+    tone?: StreamgraphChartTone;
+  };
+
+  // Un point sur l'axe X (catégorie / temps) avec ses séries empilées.
+  export type StreamgraphChartDatum = {
+    category: string;
+    values: StreamgraphChartSeriesValue[];
+  };
+</script>
+
+<script lang="ts">
+  import ChartDataList from "./ChartDataList.svelte";
+
+  type StreamgraphChartProps = {
+    data: StreamgraphChartDatum[];
+    width?: number;
+    height?: number;
+    label: string;
+    smooth?: boolean;
+    showLegend?: boolean;
+    class?: string;
+  };
+
+  let {
+    data = [],
+    width = 480,
+    height = 240,
+    label,
+    smooth = true,
+    showLegend = true,
+    class: className
+  }: StreamgraphChartProps = $props();
+
+  const MARGIN = { top: 12, right: 16, bottom: 32, left: 16 };
+  const TONES = ["category1","category2","category3","category4","category5","category6","category7","category8"] as const;
+
+  const scaleLinear = (v: number, d0: number, d1: number, r0: number, r1: number) =>
+    d1 === d0 ? r0 : r0 + ((v - d0) * (r1 - r0)) / (d1 - d0);
+
+  function buildLinearPath(pts: { x: number; y: number }[]): string {
+    return pts.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(" ");
+  }
+
+  function buildSmoothPath(pts: { x: number; y: number }[]): string {
+    if (pts.length < 2) return buildLinearPath(pts);
+    const t = 0.18;
+    let d = `M${pts[0].x.toFixed(2)},${pts[0].y.toFixed(2)}`;
+    for (let i = 0; i < pts.length - 1; i++) {
+      const p0 = pts[i - 1] ?? pts[i];
+      const p1 = pts[i];
+      const p2 = pts[i + 1];
+      const p3 = pts[i + 2] ?? p2;
+      const c1x = p1.x + (p2.x - p0.x) * t;
+      const c1y = p1.y + (p2.y - p0.y) * t;
+      const c2x = p2.x - (p3.x - p1.x) * t;
+      const c2y = p2.y - (p3.y - p1.y) * t;
+      d += ` C${c1x.toFixed(2)},${c1y.toFixed(2)} ${c2x.toFixed(2)},${c2y.toFixed(2)} ${p2.x.toFixed(2)},${p2.y.toFixed(2)}`;
+    }
+    return d;
+  }
+
+  // Valeur non-finie ou négative → 0 (le streamgraph empile des grandeurs ≥ 0).
+  const safeValue = (v: number) => (Number.isFinite(v) && v > 0 ? v : 0);
+
+  const plotWidth = $derived(Math.max(width - MARGIN.left - MARGIN.right, 1));
+  const plotHeight = $derived(Math.max(height - MARGIN.top - MARGIN.bottom, 1));
+
+  // Ordre stable des séries (1re apparition) + ton associé.
+  const series = $derived.by(() => {
+    const seen = new Map<string, StreamgraphChartTone>();
+    data.forEach((d) =>
+      d.values.forEach((sv, i) => {
+        if (!seen.has(sv.label)) seen.set(sv.label, sv.tone ?? TONES[seen.size % TONES.length]);
+      })
+    );
+    return [...seen.entries()].map(([seriesLabel, tone]) => ({ seriesLabel, tone }));
+  });
+
+  // Échelle Y symétrique : demi-amplitude = max des sommes empilées / 2.
+  const halfMax = $derived.by(() => {
+    let max = 0;
+    for (const d of data) {
+      let sum = 0;
+      for (const sv of d.values) sum += safeValue(sv.value);
+      if (sum > max) max = sum;
+    }
+    return max / 2 || 1;
+  });
+
+  // Pour chaque x : abscisse en px + bornes basse/haute (px) par série,
+  // baseline « wiggle » centrée (pile centrée autour de 0 ⇒ baseline = -somme/2).
+  const layout = $derived.by(() => {
+    const n = data.length;
+    const xs = data.map((_, i) => {
+      const denom = Math.max(n - 1, 1);
+      const xRatio = n === 1 ? 0.5 : i / denom;
+      return MARGIN.left + xRatio * plotWidth;
+    });
+    const midY = MARGIN.top + plotHeight / 2;
+    // valToY : une grandeur signée (par rapport au centre) → coordonnée px.
+    const valToY = (signed: number) => midY - scaleLinear(signed, 0, halfMax, 0, plotHeight / 2);
+
+    // bands[seriesIndex][xIndex] = { x, top, bottom } en px.
+    const bands = series.map(() => [] as { x: number; top: number; bottom: number }[]);
+    data.forEach((d, xi) => {
+      const total = d.values.reduce((s, sv) => s + safeValue(sv.value), 0);
+      let acc = -total / 2; // baseline centrée
+      series.forEach((s, si) => {
+        const sv = d.values.find((v) => v.label === s.seriesLabel);
+        const v = sv ? safeValue(sv.value) : 0;
+        const lower = acc;
+        const upper = acc + v;
+        acc = upper;
+        bands[si].push({ x: xs[xi], top: valToY(upper), bottom: valToY(lower) });
+      });
+    });
+    return { xs, bands };
+  });
+
+  // Aire fermée par série (haut gauche→droite, puis bas droite→gauche).
+  const areas = $derived.by(() =>
+    series.map((s, si) => {
+      const band = layout.bands[si];
+      if (!band || band.length === 0) return { tone: s.tone, seriesLabel: s.seriesLabel, d: "" };
+      const topPts = band.map((b) => ({ x: b.x, y: b.top }));
+      const bottomPts = band.map((b) => ({ x: b.x, y: b.bottom })).reverse();
+      const topPath = smooth ? buildSmoothPath(topPts) : buildLinearPath(topPts);
+      const bottomPath = (smooth ? buildSmoothPath(bottomPts) : buildLinearPath(bottomPts)).replace(/^M/, "L");
+      return { tone: s.tone, seriesLabel: s.seriesLabel, d: `${topPath} ${bottomPath} Z` };
+    })
+  );
+
+  // Étiquettes d'axe X : jusqu'à 5 catégories réparties.
+  const xTickEntries = $derived.by(() => {
+    const n = data.length;
+    if (n === 0) return [] as { x: number; label: string }[];
+    const target = Math.min(5, n);
+    const stride = Math.max(1, Math.round((n - 1) / (target - 1 || 1)));
+    const entries: { x: number; label: string }[] = [];
+    for (let i = 0; i < n; i += stride) entries.push({ x: layout.xs[i], label: data[i].category });
+    const lastIdx = n - 1;
+    if (entries[entries.length - 1]?.label !== data[lastIdx].category) {
+      entries.push({ x: layout.xs[lastIdx], label: data[lastIdx].category });
+    }
+    return entries;
+  });
+
+  // Liste accessible : total par série + total global.
+  const dataValueItems = $derived.by(() => {
+    const items = series.map((s) => {
+      const total = data.reduce((sum, d) => {
+        const sv = d.values.find((v) => v.label === s.seriesLabel);
+        return sum + (sv ? safeValue(sv.value) : 0);
+      }, 0);
+      return `${s.seriesLabel}: ${total}`;
+    });
+    const grand = data.reduce((sum, d) => sum + d.values.reduce((s, sv) => s + safeValue(sv.value), 0), 0);
+    if (series.length > 0) items.push(`Total: ${grand}`);
+    return items;
+  });
+
+  let hovered: number | null = $state(null);
+
+  function handleVisualPointerMove(event: PointerEvent) {
+    const target = event.target;
+    if (!(target instanceof Element)) {
+      hovered = null;
+      return;
+    }
+    const si = Number(target.getAttribute("data-series-index"));
+    hovered = Number.isInteger(si) ? si : null;
+  }
+
+  const tooltip = $derived.by(() => {
+    if (hovered === null || !series[hovered]) return null;
+    const s = series[hovered];
+    const band = layout.bands[hovered];
+    if (!band || band.length === 0) return null;
+    const mid = band[Math.floor(band.length / 2)];
+    const total = data.reduce((sum, d) => {
+      const sv = d.values.find((v) => v.label === s.seriesLabel);
+      return sum + (sv ? safeValue(sv.value) : 0);
+    }, 0);
+    return { label: s.seriesLabel, value: total, cx: mid.x, cy: (mid.top + mid.bottom) / 2 };
+  });
+
+  const classes = () => ["st-streamgraphChart", className].filter(Boolean).join(" ");
+</script>
+
+<div class={classes()}>
+  <div
+    class="st-streamgraphChart__visual"
+    role="img"
+    aria-label={label}
+    onpointermove={handleVisualPointerMove}
+    onpointerleave={() => (hovered = null)}
+  >
+    <svg viewBox="0 0 {width} {height}" preserveAspectRatio="xMidYMid meet" width="100%" height="100%" focusable="false" aria-hidden="true">
+      <line class="st-streamgraphChart__axis" x1={MARGIN.left} x2={width - MARGIN.right} y1={height - MARGIN.bottom} y2={height - MARGIN.bottom} />
+
+      {#each xTickEntries as tick, i (i)}
+        <text class="st-streamgraphChart__tickLabel" x={tick.x} y={height - MARGIN.bottom + 16} text-anchor="middle">{tick.label}</text>
+      {/each}
+
+      {#each areas as area, si (area.seriesLabel)}
+        {#if area.d}
+          <path
+            class="st-streamgraphChart__area st-streamgraphChart__area--{area.tone}"
+            class:st-streamgraphChart__area--dim={hovered !== null && hovered !== si}
+            d={area.d}
+            data-series-index={si}
+          />
+        {/if}
+      {/each}
+    </svg>
+  </div>
+
+  <ChartDataList {label} items={dataValueItems} />
+
+  {#if tooltip}
+    <div class="st-streamgraphChart__tooltip" role="presentation" style="left: {(tooltip.cx / width) * 100}%; top: {(tooltip.cy / height) * 100}%">
+      <span class="st-streamgraphChart__tooltipLabel">{tooltip.label}</span>
+      <span class="st-streamgraphChart__tooltipValue">{tooltip.value}</span>
+    </div>
+  {/if}
+
+  {#if showLegend && series.length > 0}
+    <ul class="st-streamgraphChart__legend">
+      {#each series as item (item.seriesLabel)}
+        <li class="st-streamgraphChart__legendItem">
+          <span class="st-streamgraphChart__legendSwatch st-streamgraphChart__legendSwatch--{item.tone}" aria-hidden="true"></span>
+          {item.seriesLabel}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .st-streamgraphChart { color: var(--st-semantic-text-secondary); display: block; font-family: inherit; position: relative; width: 100%; }
+  .st-streamgraphChart svg, .st-streamgraphChart__visual { display: block; overflow: visible; }
+  .st-streamgraphChart__axis { stroke: var(--st-semantic-border-subtle); stroke-width: 1; }
+  .st-streamgraphChart__tickLabel { fill: var(--st-semantic-text-secondary); font-size: 0.6875rem; }
+  .st-streamgraphChart__area { cursor: pointer; stroke: var(--st-semantic-surface-default, #fff); stroke-width: 0.75; transition: opacity 120ms ease; }
+  .st-streamgraphChart__area--dim { opacity: 0.4; }
+  .st-streamgraphChart__area--category1 { fill: var(--st-semantic-data-category1); }
+  .st-streamgraphChart__area--category2 { fill: var(--st-semantic-data-category2); }
+  .st-streamgraphChart__area--category3 { fill: var(--st-semantic-data-category3); }
+  .st-streamgraphChart__area--category4 { fill: var(--st-semantic-data-category4); }
+  .st-streamgraphChart__area--category5 { fill: var(--st-semantic-data-category5); }
+  .st-streamgraphChart__area--category6 { fill: var(--st-semantic-data-category6); }
+  .st-streamgraphChart__area--category7 { fill: var(--st-semantic-data-category7); }
+  .st-streamgraphChart__area--category8 { fill: var(--st-semantic-data-category8); }
+  @media (prefers-reduced-motion: reduce) { .st-streamgraphChart__area { transition: none; } }
+  .st-streamgraphChart__tooltip {
+    background: var(--st-semantic-surface-inverse); border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-inverse); display: inline-flex; flex-direction: column; font-size: 0.75rem;
+    gap: 0.125rem; line-height: 1.2; padding: 0.375rem 0.5rem; pointer-events: none; position: absolute;
+    transform: translate(-50%, calc(-100% - 8px)); white-space: nowrap; z-index: 1;
+  }
+  .st-streamgraphChart__tooltipLabel { font-weight: 600; }
+  .st-streamgraphChart__tooltipValue { opacity: 0.85; }
+  .st-streamgraphChart__legend { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; margin: 0.5rem 0 0; padding: 0; }
+  .st-streamgraphChart__legendItem { align-items: center; color: var(--st-semantic-text-secondary); display: inline-flex; font-size: 0.75rem; gap: 0.35rem; }
+  .st-streamgraphChart__legendSwatch { border-radius: 2px; height: 0.7rem; width: 0.7rem; }
+  .st-streamgraphChart__legendSwatch--category1 { background: var(--st-semantic-data-category1); }
+  .st-streamgraphChart__legendSwatch--category2 { background: var(--st-semantic-data-category2); }
+  .st-streamgraphChart__legendSwatch--category3 { background: var(--st-semantic-data-category3); }
+  .st-streamgraphChart__legendSwatch--category4 { background: var(--st-semantic-data-category4); }
+  .st-streamgraphChart__legendSwatch--category5 { background: var(--st-semantic-data-category5); }
+  .st-streamgraphChart__legendSwatch--category6 { background: var(--st-semantic-data-category6); }
+  .st-streamgraphChart__legendSwatch--category7 { background: var(--st-semantic-data-category7); }
+  .st-streamgraphChart__legendSwatch--category8 { background: var(--st-semantic-data-category8); }
+</style>

package/dist/StreamgraphChart.svelte.d.ts

@@ -0,0 +1,23 @@
+export type StreamgraphChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type StreamgraphChartSeriesValue = {
+    label: string;
+    value: number;
+    tone?: StreamgraphChartTone;
+};
+export type StreamgraphChartDatum = {
+    category: string;
+    values: StreamgraphChartSeriesValue[];
+};
+type StreamgraphChartProps = {
+    data: StreamgraphChartDatum[];
+    width?: number;
+    height?: number;
+    label: string;
+    smooth?: boolean;
+    showLegend?: boolean;
+    class?: string;
+};
+declare const StreamgraphChart: import("svelte").Component<StreamgraphChartProps, {}, "">;
+type StreamgraphChart = ReturnType<typeof StreamgraphChart>;
+export default StreamgraphChart;
+//# sourceMappingURL=StreamgraphChart.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StreamgraphChart.svelte.d.ts","sourceRoot":"","sources":["../src/lib/StreamgraphChart.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,oBAAoB,GAC5B,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAG1D,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,oBAAoB,CAAC;CAC7B,CAAC;AAGF,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,2BAA2B,EAAE,CAAC;CACvC,CAAC;AAMF,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,qBAAqB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuNJ,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/StreamingMessage.svelte

@@ -34,6 +34,18 @@
 
   export type StreamingMessageMode = "live" | "passive";
 
+  /**
+   * Simple data-driven event shape (cross-framework parity with React/Vue
+   * ports). Distinguished from the rich event-stream shape by the absence of a
+   * `type` discriminant.
+   */
+  export type StreamingMessageSimpleEvent = {
+    id: string;
+    label: string;
+    text?: string;
+    status?: ChatMessageStatus;
+  };
+
   type ToolCallState = {
     toolCallId: string;
     toolName: string;
@@ -48,8 +60,14 @@
     status?: ChatMessageStatus;
     streamId?: string;
     initialEvents?: StreamingMessageEvent[];
-    events?: StreamingMessageEvent[];
+    events?: StreamingMessageEvent[] | StreamingMessageSimpleEvent[];
     finalContent?: string;
+    /**
+     * Plain message body (cross-framework parity with React/Vue ports). When
+     * provided, it is used as the rendered content (equivalent to
+     * `finalContent`). The canonical event-stream API still works.
+     */
+    text?: string;
     mode?: StreamingMessageMode;
     placeholder?: string;
     showTrail?: boolean;
@@ -65,6 +83,7 @@
     initialEvents = [],
     events = [],
     finalContent,
+    text,
     mode = "live",
     placeholder = "Streaming en cours…",
     showTrail = true,
@@ -76,10 +95,25 @@
 
   const classes = () => ["st-streamingMessage", className].filter(Boolean).join(" ");
 
-  const mergedEvents = () => [...initialEvents, ...events];
+  // A simple event lacks the `type` discriminant of the rich stream shape.
+  const isSimpleEvent = (
+    event: StreamingMessageEvent | StreamingMessageSimpleEvent
+  ): event is StreamingMessageSimpleEvent =>
+    event != null && typeof event === "object" && !("type" in event);
+
+  const simpleEvents = (): StreamingMessageSimpleEvent[] =>
+    (events as Array<StreamingMessageEvent | StreamingMessageSimpleEvent>).filter(isSimpleEvent);
+
+  const richEvents = (): StreamingMessageEvent[] =>
+    (events as Array<StreamingMessageEvent | StreamingMessageSimpleEvent>).filter(
+      (event): event is StreamingMessageEvent => !isSimpleEvent(event)
+    );
+
+  const mergedEvents = () => [...initialEvents, ...richEvents()];
 
   const resolvedContent = () => {
     if (finalContent) return finalContent;
+    if (text) return text;
     return mergedEvents()
       .filter((event) => event.type === "message.delta")
       .map((event) => event.delta)
@@ -242,6 +276,14 @@
       </ul>
     </details>
   {/if}
+
+  {#if simpleEvents().length > 0}
+    <ul class="st-streamingMessage__trailList">
+      {#each simpleEvents() as event (event.id)}
+        <li>{event.label}</li>
+      {/each}
+    </ul>
+  {/if}
 </ChatMessage>
 
 <style>