@sentropic/design-system-svelte 0.34.49 → 0.34.51

package/dist/ContextPanel.svelte

@@ -0,0 +1,86 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export interface ContextPanelProps {
+    title?: string;
+    subtitle?: string;
+    label?: string;
+    actions?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    class?: string;
+  }
+</script>
+
+<script lang="ts">
+  let { title, subtitle, label, actions, footer, children, class: className }: ContextPanelProps = $props();
+  const classes = $derived(["st-contextPanel", className].filter(Boolean).join(" "));
+</script>
+
+<aside class={classes} aria-label={label ?? title ?? "Context panel"}>
+  {#if title || subtitle || actions}
+    <header class="st-contextPanel__header">
+      <div class="st-contextPanel__heading">
+        {#if title}<h2 class="st-contextPanel__title">{title}</h2>{/if}
+        {#if subtitle}<p class="st-contextPanel__subtitle">{subtitle}</p>{/if}
+      </div>
+      {#if actions}<div class="st-contextPanel__actions">{@render actions()}</div>{/if}
+    </header>
+  {/if}
+  <div class="st-contextPanel__body">{@render children?.()}</div>
+  {#if footer}<footer class="st-contextPanel__footer">{@render footer()}</footer>{/if}
+</aside>
+
+<style>
+  .st-contextPanel {
+    background: var(--st-component-contextPanel-surface, var(--st-semantic-surface-raised));
+    color: var(--st-semantic-text-primary);
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    block-size: 100%;
+    min-block-size: 0;
+  }
+
+  .st-contextPanel__header,
+  .st-contextPanel__footer {
+    border-color: var(--st-component-contextPanel-border, var(--st-semantic-border-subtle));
+    padding: var(--st-spacing-4, 1rem);
+  }
+
+  .st-contextPanel__header {
+    align-items: start;
+    border-block-end-style: solid;
+    border-block-end-width: 1px;
+    display: flex;
+    gap: var(--st-spacing-3, 0.75rem);
+    justify-content: space-between;
+  }
+
+  .st-contextPanel__footer {
+    border-block-start-style: solid;
+    border-block-start-width: 1px;
+  }
+
+  .st-contextPanel__title,
+  .st-contextPanel__subtitle {
+    margin: 0;
+  }
+
+  .st-contextPanel__title {
+    font-size: 1rem;
+    line-height: 1.3;
+  }
+
+  .st-contextPanel__subtitle {
+    color: var(--st-semantic-text-secondary);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    margin-block-start: var(--st-spacing-1, 0.25rem);
+  }
+
+  .st-contextPanel__body {
+    min-block-size: 0;
+    overflow: auto;
+    padding: var(--st-spacing-4, 1rem);
+  }
+</style>

package/dist/ContextPanel.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+export interface ContextPanelProps {
+    title?: string;
+    subtitle?: string;
+    label?: string;
+    actions?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const ContextPanel: import("svelte").Component<ContextPanelProps, {}, "">;
+type ContextPanel = ReturnType<typeof ContextPanel>;
+export default ContextPanel;
+//# sourceMappingURL=ContextPanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextPanel.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ContextPanel.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2BH,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,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/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>

package/dist/Dashboard.svelte.d.ts

@@ -0,0 +1,21 @@
+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;
+};
+declare const Dashboard: import("svelte").Component<DashboardProps, {}, "">;
+type Dashboard = ReturnType<typeof Dashboard>;
+export default Dashboard;
+//# sourceMappingURL=Dashboard.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Dashboard.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,WAAW,gBAAiB,SAAQ,WAAW;CAAG;AAExD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA6DJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}