@w5-ui/svelte 0.1.0 → 0.2.1

package/src/lib/components/ForceGraph.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script module lang="ts">
   export interface FDNode {
     id: string;
     label?: string;
@@ -9,11 +9,23 @@
     source: string;
     target: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    nodes?: FDNode[];
+    links?: FDLink[];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let nodes: FDNode[] = [];
-  export let links: FDLink[] = [];
-  export let height = 260;
-  export let ariaLabel = 'Force-directed network graph';
+  let {
+    nodes = [],
+    links = [],
+    height = 260,
+    ariaLabel = 'Force-directed network graph'
+  }: Props = $props();
 
   const PALETTE = ['#006FFF', '#00C875', '#FF7B7B', '#F5C26B', '#A78BFA', '#34D399'];
   const VW = 340;
@@ -77,8 +89,8 @@
     return state.map((s) => ({ x: s.x, y: s.y }));
   }
 
-  $: pos = nodes.length > 0 ? layout(VW, height) : [];
-  $: idxById = Object.fromEntries(nodes.map((n, i) => [n.id, i]));
+  let pos = $derived(nodes.length > 0 ? layout(VW, height) : []);
+  let idxById = $derived(Object.fromEntries(nodes.map((n, i) => [n.id, i])));
 </script>
 
 {#if nodes.length > 0}

package/src/lib/components/FunnelChart.svelte

@@ -1,28 +1,35 @@
-<script lang="ts">
+<script module lang="ts">
   export interface FunnelSegment {
     label: string;
     value: number;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    segments?: FunnelSegment[];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let segments: FunnelSegment[] = [];
-  export let height: number = 160;
-  export let ariaLabel: string = 'Funnel chart';
+  let { segments = [], height = 160, ariaLabel = 'Funnel chart' }: Props = $props();
 
   const VW = 320;
   const PAD = { t: 4, r: 8, b: 4, l: 8 };
   const SEP = 2;
   const DEFAULT_COLORS = ['#006FFF', '#0092FF', '#00B4C2', '#00C875', '#F5A623'];
 
-  $: maxVal = segments.length ? Math.max(...segments.map((s) => s.value)) : 1;
-  $: n = segments.length;
-  $: chartH = height - PAD.t - PAD.b;
-  $: slotH = n > 0 ? (chartH - SEP * (n - 1)) / n : chartH;
-  $: chartW = VW - PAD.l - PAD.r;
-  $: cx = PAD.l + chartW / 2;
-  $: widths = segments.map((s) => (s.value / (maxVal || 1)) * chartW);
+  let maxVal = $derived(segments.length ? Math.max(...segments.map((s) => s.value)) : 1);
+  let n = $derived(segments.length);
+  let chartH = $derived(height - PAD.t - PAD.b);
+  let slotH = $derived(n > 0 ? (chartH - SEP * (n - 1)) / n : chartH);
+  let chartW = $derived(VW - PAD.l - PAD.r);
+  let cx = $derived(PAD.l + chartW / 2);
+  let widths = $derived(segments.map((s) => (s.value / (maxVal || 1)) * chartW));
 
-  $: shapes = segments.map((s, i) => {
+  let shapes = $derived(segments.map((s, i) => {
     const tw = widths[i];
     const bw = i + 1 < n ? widths[i + 1] : widths[i] * 0.7;
     const y0 = PAD.t + i * (slotH + SEP);
@@ -35,7 +42,7 @@
       cx: cx.toFixed(1),
       cy: ((y0 + y1) / 2).toFixed(1),
     };
-  });
+  }));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/GanttChart.svelte

@@ -1,14 +1,21 @@
-<script lang="ts">
+<script module lang="ts">
   export interface GanttTask {
     label: string;
     start: number;
     end: number;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    tasks?: GanttTask[];
+    xLabels?: string[];
+    ariaLabel?: string;
+  }
 
-  export let tasks: GanttTask[] = [];
-  export let xLabels: string[] = [];
-  export let ariaLabel: string = 'Gantt chart';
+  let { tasks = [], xLabels = [], ariaLabel = 'Gantt chart' }: Props = $props();
 
   const VW = 340;
   const LABEL_W = 100;
@@ -19,11 +26,11 @@
   const PAD_T = 6;
   const AXIS_H = 18;
 
-  $: svgH = PAD_T + tasks.length * ROW_H + AXIS_H;
-  $: ticks = xLabels.map((lbl, i) => ({
+  let svgH = $derived(PAD_T + tasks.length * ROW_H + AXIS_H);
+  let ticks = $derived(xLabels.map((lbl, i) => ({
     x: LABEL_W + (i / (xLabels.length - 1 || 1)) * TRACK_W,
     lbl,
-  }));
+  })));
 
   function tx(v: number): number {
     return LABEL_W + v * TRACK_W;

package/src/lib/components/Gauge.svelte

@@ -1,21 +1,31 @@
 <script lang="ts">
-  export let value: number = 0;
-  export let label: string = '';
-  export let color: string = '#006FFF';
-  export let size: number = 120;
-  export let ariaLabel: string | undefined = undefined;
+  interface Props {
+    value?: number;
+    label?: string;
+    color?: string;
+    size?: number;
+    ariaLabel?: string | undefined;
+  }
 
-  $: sw = 10;
-  $: cx = size / 2;
-  $: cy = size / 2;
-  $: r = cx - sw / 2 - 2;
-  $: svgH = Math.round(size * 0.7);
-  $: pathLen = Math.PI * r;
-  $: fillLen = (Math.min(100, Math.max(0, value)) / 100) * pathLen;
-  $: d = `M ${cx - r},${cy} A ${r},${r} 0 1 1 ${cx + r},${cy}`;
-  $: valY = cy + Math.round(size * 0.06);
-  $: lblY = valY + Math.round(size * 0.13) + 2;
-  $: a11yLabel = ariaLabel ?? `${label} ${value}%`;
+  let {
+    value = 0,
+    label = '',
+    color = '#006FFF',
+    size = 120,
+    ariaLabel = undefined
+  }: Props = $props();
+
+  const sw = 10;
+  let cx = $derived(size / 2);
+  let cy = $derived(size / 2);
+  let r = $derived(cx - sw / 2 - 2);
+  let svgH = $derived(Math.round(size * 0.7));
+  let pathLen = $derived(Math.PI * r);
+  let fillLen = $derived((Math.min(100, Math.max(0, value)) / 100) * pathLen);
+  let d = $derived(`M ${cx - r},${cy} A ${r},${r} 0 1 1 ${cx + r},${cy}`);
+  let valY = $derived(cy + Math.round(size * 0.06));
+  let lblY = $derived(valY + Math.round(size * 0.13) + 2);
+  let a11yLabel = $derived(ariaLabel ?? `${label} ${value}%`);
 </script>
 
 <div

package/src/lib/components/GroupedList.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export type GroupedListItemStatus = 'danger' | 'warn' | 'success' | 'info' | 'neutral';
 
   export interface GroupedListItem {
@@ -17,9 +17,13 @@
 </script>
 
 <script lang="ts">
-  export let groups: GroupedListGroup[];
-  export let collapsible: boolean = true;
-  export let ariaLabel: string = 'Grouped list';
+  interface Props {
+    groups: GroupedListGroup[];
+    collapsible?: boolean;
+    ariaLabel?: string;
+  }
+
+  let { groups, collapsible = true, ariaLabel = 'Grouped list' }: Props = $props();
 
   const STATUS_COLORS: Record<GroupedListItemStatus, string> = {
     danger: '#F03A3A',
@@ -30,7 +34,10 @@
   };
 
   const uid = Math.random().toString(36).slice(2, 9);
-  let open: boolean[] = groups.map(g => g.defaultOpen !== false);
+  // Initial open state mirrors each group's `defaultOpen` once; afterwards
+  // the user toggles each entry independently.
+  // svelte-ignore state_referenced_locally
+  let open: boolean[] = $state(groups.map((g) => g.defaultOpen !== false));
 
   function toggle(i: number) { open[i] = !open[i]; open = [...open]; }
 </script>
@@ -46,7 +53,7 @@
           class="gl-header"
           aria-expanded={isOpen}
           aria-controls={panelId}
-          on:click={() => toggle(gi)}
+          onclick={() => toggle(gi)}
         >
           {#if group.color}<span class="gl-color-dot" style="background:{group.color}" aria-hidden="true"></span>{/if}
           <span class="gl-title">{group.label}</span>

package/src/lib/components/HealthBar.svelte

@@ -1,9 +1,18 @@
 <script lang="ts">
-  export let value: number;
-  export let fillStyle: string = '';
-  export let label: string | undefined = undefined;
-  export let valueText: string | undefined = undefined;
-  $: clamped = Math.max(0, Math.min(100, value));
+  interface Props {
+    value: number;
+    fillStyle?: string;
+    label?: string | undefined;
+    valueText?: string | undefined;
+  }
+
+  let {
+    value,
+    fillStyle = '',
+    label = undefined,
+    valueText = undefined
+  }: Props = $props();
+  let clamped = $derived(Math.max(0, Math.min(100, value)));
 </script>
 
 <div

package/src/lib/components/HeatMap.svelte

@@ -1,10 +1,21 @@
 <script lang="ts">
-  export let data: number[][] = [];
-  export let colors: string[] = ['#1B2D5A', '#3F7BC4', '#7FB6FF', '#F5C26B', '#F5A623', '#FF7B7B'];
-  export let xLabels: string[] = [];
-  export let height: number = 160;
-  export let cellGap: number = 1;
-  export let ariaLabel: string = 'Heat map';
+  interface Props {
+    data?: number[][];
+    colors?: string[];
+    xLabels?: string[];
+    height?: number;
+    cellGap?: number;
+    ariaLabel?: string;
+  }
+
+  let {
+    data = [],
+    colors = ['#1B2D5A', '#3F7BC4', '#7FB6FF', '#F5C26B', '#F5A623', '#FF7B7B'],
+    xLabels = [],
+    height = 160,
+    cellGap = 1,
+    ariaLabel = 'Heat map'
+  }: Props = $props();
 
   const VW = 400;
   const PAD_BASE = { t: 4, r: 4, l: 4 };
@@ -24,15 +35,15 @@
     return `rgb(${Math.round(r1 + f * (r2 - r1))},${Math.round(g1 + f * (g2 - g1))},${Math.round(b1 + f * (b2 - b1))})`;
   }
 
-  $: rows = data.length;
-  $: cols = data[0]?.length ?? 0;
-  $: padB = xLabels.length ? 16 : 4;
-  $: chartW = VW - PAD_BASE.l - PAD_BASE.r;
-  $: chartH = height - PAD_BASE.t - padB;
-  $: cellW = cols > 0 ? (chartW - (cols - 1) * cellGap) / cols : 0;
-  $: cellH = rows > 0 ? (chartH - (rows - 1) * cellGap) / rows : 0;
+  let rows = $derived(data.length);
+  let cols = $derived(data[0]?.length ?? 0);
+  let padB = $derived(xLabels.length ? 16 : 4);
+  let chartW = $derived(VW - PAD_BASE.l - PAD_BASE.r);
+  let chartH = $derived(height - PAD_BASE.t - padB);
+  let cellW = $derived(cols > 0 ? (chartW - (cols - 1) * cellGap) / cols : 0);
+  let cellH = $derived(rows > 0 ? (chartH - (rows - 1) * cellGap) / rows : 0);
 
-  $: rects = rows > 0 && cols > 0
+  let rects = $derived(rows > 0 && cols > 0
     ? data.flatMap((rowData, row) =>
         rowData.map((val, col) => ({
           key: `${row}-${col}`,
@@ -43,13 +54,13 @@
           fill: interpolateColor(colors, val),
         }))
       )
-    : [];
+    : []);
 
-  $: labelNodes = xLabels.map((lbl, i) => ({
+  let labelNodes = $derived(xLabels.map((lbl, i) => ({
     lbl,
     x: (PAD_BASE.l + (xLabels.length > 1 ? (i / (xLabels.length - 1)) * chartW : chartW / 2)).toFixed(1),
     y: height - 2,
-  }));
+  })));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/HexbinChart.svelte

@@ -1,15 +1,29 @@
-<script lang="ts">
+<script module lang="ts">
   export interface HexbinPoint {
     x: number;
     y: number;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    points?: HexbinPoint[];
+    xRange?: [number, number] | undefined;
+    yRange?: [number, number] | undefined;
+    height?: number;
+    hexRadius?: number;
+    ariaLabel?: string;
+  }
 
-  export let points: HexbinPoint[] = [];
-  export let xRange: [number, number] | undefined = undefined;
-  export let yRange: [number, number] | undefined = undefined;
-  export let height = 200;
-  export let hexRadius = 10;
-  export let ariaLabel = 'Hexbin chart';
+  let {
+    points = [],
+    xRange = undefined,
+    yRange = undefined,
+    height = 200,
+    hexRadius = 10,
+    ariaLabel = 'Hexbin chart'
+  }: Props = $props();
 
   const ROOT3 = Math.sqrt(3);
   const VW = 340;
@@ -43,18 +57,18 @@
     return `M${pts.join('L')}Z`;
   }
 
-  $: PLOT_W = VW - PAD_L - PAD_R;
-  $: PLOT_H = height - PAD_T - PAD_B;
-  $: xs = points.map((p) => p.x);
-  $: ys = points.map((p) => p.y);
-  $: xMin = xRange ? xRange[0] : (xs.length ? Math.min(...xs) : 0);
-  $: xMax = xRange ? xRange[1] : (xs.length ? Math.max(...xs) : 1);
-  $: yMin = yRange ? yRange[0] : (ys.length ? Math.min(...ys) : 0);
-  $: yMax = yRange ? yRange[1] : (ys.length ? Math.max(...ys) : 1);
-  $: xSpan = xMax - xMin || 1;
-  $: ySpan = yMax - yMin || 1;
+  let PLOT_W = $derived(VW - PAD_L - PAD_R);
+  let PLOT_H = $derived(height - PAD_T - PAD_B);
+  let xs = $derived(points.map((p) => p.x));
+  let ys = $derived(points.map((p) => p.y));
+  let xMin = $derived(xRange ? xRange[0] : (xs.length ? Math.min(...xs) : 0));
+  let xMax = $derived(xRange ? xRange[1] : (xs.length ? Math.max(...xs) : 1));
+  let yMin = $derived(yRange ? yRange[0] : (ys.length ? Math.min(...ys) : 0));
+  let yMax = $derived(yRange ? yRange[1] : (ys.length ? Math.max(...ys) : 1));
+  let xSpan = $derived(xMax - xMin || 1);
+  let ySpan = $derived(yMax - yMin || 1);
 
-  $: bins = (() => {
+  let bins = $derived((() => {
     const map = new Map<string, { q: number; r: number; count: number }>();
     for (const pt of points) {
       const px = ((pt.x - xMin) / xSpan) * PLOT_W;
@@ -66,11 +80,11 @@
       else map.set(key, { q, r, count: 1 });
     }
     return [...map.values()];
-  })();
+  })());
 
-  $: maxCount = bins.length ? Math.max(...bins.map((b) => b.count)) : 1;
-  $: yTicks = [yMin, (yMin + yMax) / 2, yMax];
-  $: xTicks = [xMin, (xMin + xMax) / 2, xMax];
+  let maxCount = $derived(bins.length ? Math.max(...bins.map((b) => b.count)) : 1);
+  let yTicks = $derived([yMin, (yMin + yMax) / 2, yMax]);
+  let xTicks = $derived([xMin, (xMin + xMax) / 2, xMax]);
 
   function ty(v: number): number { return PAD_T + (1 - (v - yMin) / ySpan) * PLOT_H; }
   function tx(v: number): number { return PAD_L + ((v - xMin) / xSpan) * PLOT_W; }

package/src/lib/components/Histogram.svelte

@@ -1,15 +1,28 @@
-<script lang="ts">
+<script module lang="ts">
   export interface HistogramBin {
     x0: number;
     x1: number;
     count: number;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    bins?: HistogramBin[];
+    height?: number;
+    color?: string;
+    xUnit?: string;
+    ariaLabel?: string;
+  }
 
-  export let bins: HistogramBin[] = [];
-  export let height: number = 160;
-  export let color: string = '#006FFF';
-  export let xUnit: string = '';
-  export let ariaLabel: string = 'Histogram';
+  let {
+    bins = [],
+    height = 160,
+    color = '#006FFF',
+    xUnit = '',
+    ariaLabel = 'Histogram'
+  }: Props = $props();
 
   const VW = 320;
   const PAD_L = 36;
@@ -17,15 +30,15 @@
   const PAD_T = 8;
   const PAD_B = 28;
 
-  $: PLOT_W = VW - PAD_L - PAD_R;
-  $: PLOT_H = height - PAD_T - PAD_B;
-  $: maxCount = Math.max(...bins.map((b) => b.count), 1);
-  $: barW = PLOT_W / bins.length;
+  let PLOT_W = $derived(VW - PAD_L - PAD_R);
+  let PLOT_H = $derived(height - PAD_T - PAD_B);
+  let maxCount = $derived(Math.max(...bins.map((b) => b.count), 1));
+  let barW = $derived(PLOT_W / bins.length);
 
-  $: yTicks = [0, 1, 2, 3].map((i) => Math.round((maxCount * i) / 3));
+  let yTicks = $derived([0, 1, 2, 3].map((i) => Math.round((maxCount * i) / 3)));
 
-  $: xStep = bins.length <= 6 ? 1 : Math.ceil(bins.length / 5);
-  $: xLabels = (() => {
+  let xStep = $derived(bins.length <= 6 ? 1 : Math.ceil(bins.length / 5));
+  let xLabels = $derived((() => {
     const labels: { x: number; label: string }[] = [];
     bins.forEach((bin, i) => {
       if (i % xStep === 0) {
@@ -34,7 +47,7 @@
     });
     labels.push({ x: PAD_L + PLOT_W, label: String(bins[bins.length - 1].x1) + xUnit });
     return labels;
-  })();
+  })());
 
   function bh(count: number): number {
     return (count / maxCount) * PLOT_H;

package/src/lib/components/HorizonChart.svelte

@@ -1,14 +1,26 @@
-<script lang="ts">
+<script module lang="ts">
   export interface HorizonSeries {
     label: string;
     values: number[];
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    series?: HorizonSeries[];
+    xLabels?: string[] | undefined;
+    bands?: number;
+    ariaLabel?: string;
+  }
 
-  export let series: HorizonSeries[] = [];
-  export let xLabels: string[] | undefined = undefined;
-  export let bands = 3;
-  export let ariaLabel = 'Horizon chart';
+  let {
+    series = [],
+    xLabels = undefined,
+    bands = 3,
+    ariaLabel = 'Horizon chart'
+  }: Props = $props();
 
   const LABEL_W = 72;
   const ROW_H = 24;
@@ -16,18 +28,18 @@
   const X_H = 14;
   const W = 400;
 
-  $: n = series[0]?.values.length ?? 0;
-  $: allVals = series.flatMap((s) => s.values);
-  $: maxVal = Math.max(...allVals, 1);
-  $: step = maxVal / bands;
-  $: chartW = W - LABEL_W;
-  $: colW = chartW / Math.max(n, 1);
-  $: totalH = series.length * (ROW_H + ROW_GAP) - ROW_GAP + (xLabels ? X_H + 4 : 0);
+  let n = $derived(series[0]?.values.length ?? 0);
+  let allVals = $derived(series.flatMap((s) => s.values));
+  let maxVal = $derived(Math.max(...allVals, 1));
+  let step = $derived(maxVal / bands);
+  let chartW = $derived(W - LABEL_W);
+  let colW = $derived(chartW / Math.max(n, 1));
+  let totalH = $derived(series.length * (ROW_H + ROW_GAP) - ROW_GAP + (xLabels ? X_H + 4 : 0));
 
   interface Band { x: number; y: number; w: number; h: number; alpha: number; color: string; }
   interface Row { rowY: number; color: string; label: string; bands: Band[]; }
 
-  $: rows = series.map((s, si) => {
+  let rows = $derived(series.map((s, si) => {
     const rowY = si * (ROW_H + ROW_GAP);
     const color = s.color ?? '#006FFF';
     const rowBands: Band[] = [];
@@ -42,15 +54,15 @@
       }
     });
     return { rowY, color, label: s.label, bands: rowBands } as Row;
-  });
+  }));
 
-  $: xTickPositions = xLabels
+  let xTickPositions = $derived(xLabels
     ? xLabels.map((label, i) => ({
         label,
         x: LABEL_W + (i / Math.max(xLabels!.length - 1, 1)) * chartW,
         anchor: i === 0 ? 'start' : i === xLabels!.length - 1 ? 'end' : 'middle',
       }))
-    : [];
+    : []);
 </script>
 
 {#if series.length}

package/src/lib/components/HoverCard.svelte

@@ -1,16 +1,28 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
 </script>
 
 <script lang="ts">
   import { onDestroy } from 'svelte';
-  export let placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';
-  export let delay: number = 300;
-  let className = '';
-  export { className as class };
+  interface Props {
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    delay?: number;
+    class?: string;
+    trigger?: import('svelte').Snippet;
+    content?: import('svelte').Snippet;
+  }
+
+  let {
+    placement = 'bottom',
+    delay = 300,
+    class: className = '',
+    trigger,
+    content
+  }: Props = $props();
+  
 
   const id = `dash-ui-hovercard-${++counter}`;
-  let open = false;
+  let open = $state(false);
   let timer: ReturnType<typeof setTimeout> | null = null;
 
   function show() {
@@ -29,17 +41,17 @@
 <div
   role="group"
   class="hovercard-wrapper hovercard-{placement} {className}"
-  on:mouseenter={show}
-  on:mouseleave={hide}
-  on:focusin={show}
-  on:focusout={hide}
+  onmouseenter={show}
+  onmouseleave={hide}
+  onfocusin={show}
+  onfocusout={hide}
 >
   <div class="hovercard-trigger" aria-describedby={open ? id : undefined}>
-    <slot name="trigger" />
+    {@render trigger?.()}
   </div>
   {#if open}
     <div {id} role="tooltip" class="hovercard">
-      <slot name="content" />
+      {@render content?.()}
     </div>
   {/if}
 </div>