@w5-ui/svelte 0.1.0 → 0.2.0

package/src/lib/components/WaffleChart.svelte

@@ -1,28 +1,42 @@
-<script lang="ts">
+<script module lang="ts">
   export interface WaffleSegment {
     label: string;
     value: number;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    segments?: WaffleSegment[];
+    total?: number | undefined;
+    cols?: number;
+    rows?: number;
+    gap?: number;
+    ariaLabel?: string;
+  }
 
-  export let segments: WaffleSegment[] = [];
-  export let total: number | undefined = undefined;
-  export let cols: number = 10;
-  export let rows: number = 10;
-  export let gap: number = 2;
-  export let ariaLabel: string = 'Waffle chart';
+  let {
+    segments = [],
+    total = undefined,
+    cols = 10,
+    rows = 10,
+    gap = 2,
+    ariaLabel = 'Waffle chart'
+  }: Props = $props();
 
   const COLORS = ['#006FFF', '#00C7A8', '#F5A623', '#FF6B6B', '#A78BFA'];
   const VW = 280;
   const LEGEND_H = 24;
 
-  $: sum = total ?? segments.reduce((s, seg) => s + seg.value, 0);
-  $: cellSize = (VW - gap * (cols - 1)) / cols;
-  $: gridH = rows * cellSize + gap * (rows - 1);
-  $: svgH = gridH + LEGEND_H + 6;
-  $: totalCells = cols * rows;
+  let sum = $derived(total ?? segments.reduce((s, seg) => s + seg.value, 0));
+  let cellSize = $derived((VW - gap * (cols - 1)) / cols);
+  let gridH = $derived(rows * cellSize + gap * (rows - 1));
+  let svgH = $derived(gridH + LEGEND_H + 6);
+  let totalCells = $derived(cols * rows);
 
-  $: cellMap = (() => {
+  let cellMap = $derived((() => {
     const map: number[] = new Array(totalCells).fill(-1);
     let cursor = 0;
     segments.forEach((seg, si) => {
@@ -32,9 +46,9 @@
       }
     });
     return map;
-  })();
+  })());
 
-  $: cells = Array.from({ length: totalCells }, (_, i) => {
+  let cells = $derived(Array.from({ length: totalCells }, (_, i) => {
     const col = i % cols;
     const row = Math.floor(i / cols);
     const x = col * (cellSize + gap);
@@ -42,15 +56,15 @@
     const si = cellMap[i];
     const fill = si >= 0 ? (segments[si].color ?? COLORS[si % COLORS.length]) : 'rgba(255,255,255,0.06)';
     return { x, y, fill, width: cellSize, height: cellSize };
-  });
+  }));
 
-  $: legendItems = segments.map((seg, si) => ({
+  let legendItems = $derived(segments.map((seg, si) => ({
     color: seg.color ?? COLORS[si % COLORS.length],
     pct: Math.round((seg.value / sum) * 100),
     label: seg.label,
     lx: si * (VW / segments.length),
     ly: gridH + 8,
-  }));
+  })));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/WaterfallChart.svelte

@@ -1,13 +1,20 @@
-<script lang="ts">
+<script module lang="ts">
   export interface WaterfallBar {
     label: string;
     value: number;
     type?: 'start' | 'delta' | 'total';
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    bars?: WaterfallBar[];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let bars: WaterfallBar[] = [];
-  export let height: number = 160;
-  export let ariaLabel: string = 'Waterfall chart';
+  let { bars = [], height = 160, ariaLabel = 'Waterfall chart' }: Props = $props();
 
   const VW = 320;
   const PAD = { t: 12, r: 8, b: 24, l: 8 };
@@ -16,14 +23,14 @@
   const COLOR_NEG = '#F04949';
   const COLOR_TOTAL = '#A78BFA';
 
-  $: chartH = height - PAD.t - PAD.b;
-  $: chartW = VW - PAD.l - PAD.r;
-  $: n = bars.length;
-  $: colW = n > 0 ? chartW / n : chartW;
-  $: gap = colW * 0.15;
-  $: barW = colW - gap * 2;
+  let chartH = $derived(height - PAD.t - PAD.b);
+  let chartW = $derived(VW - PAD.l - PAD.r);
+  let n = $derived(bars.length);
+  let colW = $derived(n > 0 ? chartW / n : chartW);
+  let gap = $derived(colW * 0.15);
+  let barW = $derived(colW - gap * 2);
 
-  $: cumBases = (() => {
+  let cumBases = $derived((() => {
     const result: number[] = [];
     let acc = 0;
     for (const b of bars) {
@@ -36,25 +43,25 @@
       }
     }
     return result;
-  })();
+  })());
 
-  $: tops = bars.map((b, i) => {
+  let tops = $derived(bars.map((b, i) => {
     if (b.type === 'start' || b.type === 'total') return b.value;
     return cumBases[i] + b.value;
-  });
+  }));
 
-  $: allVals = [0, ...cumBases, ...tops];
-  $: minV = allVals.length ? Math.min(...allVals) : 0;
-  $: maxV = allVals.length ? Math.max(...allVals) : 1;
-  $: range = maxV - minV || 1;
+  let allVals = $derived([0, ...cumBases, ...tops]);
+  let minV = $derived(allVals.length ? Math.min(...allVals) : 0);
+  let maxV = $derived(allVals.length ? Math.max(...allVals) : 1);
+  let range = $derived(maxV - minV || 1);
 
   function toY(v: number): number {
     return PAD.t + (1 - (v - minV) / range) * chartH;
   }
 
-  $: bot = PAD.t + chartH;
+  let bot = $derived(PAD.t + chartH);
 
-  $: rects = bars.map((b, i) => {
+  let rects = $derived(bars.map((b, i) => {
     const base = cumBases[i];
     const top = b.type === 'start' || b.type === 'total' ? b.value : base + b.value;
     const y0 = toY(Math.max(base, top));
@@ -62,20 +69,20 @@
     const x = PAD.l + i * colW + gap;
     const color = b.type === 'start' ? COLOR_START : b.type === 'total' ? COLOR_TOTAL : b.value >= 0 ? COLOR_POS : COLOR_NEG;
     return { x: x.toFixed(1), y: y0.toFixed(1), w: barW.toFixed(1), h: Math.max(y1 - y0, 1).toFixed(1), color };
-  });
+  }));
 
-  $: connectors = rects.slice(0, -1).map((r, i) => {
+  let connectors = $derived(rects.slice(0, -1).map((r, i) => {
     const nextX = PAD.l + (i + 1) * colW + gap;
     return { x1: parseFloat(r.x), x2: nextX + barW + gap, y: parseFloat(r.y) };
-  });
+  }));
 
-  $: labels = bars.map((b, i) => ({
+  let labels = $derived(bars.map((b, i) => ({
     x: (PAD.l + (i + 0.5) * colW).toFixed(1),
     y: (bot + 10).toFixed(1),
     label: b.label,
-  }));
+  })));
 
-  $: gridLines = [0.25, 0.5, 0.75, 1].map((f) => (PAD.t + (1 - f) * chartH).toFixed(1));
+  let gridLines = $derived([0.25, 0.5, 0.75, 1].map((f) => (PAD.t + (1 - f) * chartH).toFixed(1)));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/WordCloud.svelte

@@ -1,13 +1,20 @@
-<script lang="ts">
+<script module lang="ts">
   export interface WordCloudItem {
     word: string;
     weight: number;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    items?: WordCloudItem[];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let items: WordCloudItem[] = [];
-  export let height: number = 160;
-  export let ariaLabel: string = 'Word cloud';
+  let { items = [], height = 160, ariaLabel = 'Word cloud' }: Props = $props();
 
   const VW = 380;
   const PAD = 14;
@@ -16,12 +23,12 @@
   const GAP = 6;
   const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342', '#00C875', '#FF7BB1'];
 
-  $: sorted = [...items].sort((a, b) => b.weight - a.weight);
-  $: maxW = sorted[0]?.weight ?? 1;
-  $: minW = sorted[sorted.length - 1]?.weight ?? 0;
-  $: range = maxW - minW || 1;
+  let sorted = $derived([...items].sort((a, b) => b.weight - a.weight));
+  let maxW = $derived(sorted[0]?.weight ?? 1);
+  let minW = $derived(sorted[sorted.length - 1]?.weight ?? 0);
+  let range = $derived(maxW - minW || 1);
 
-  $: words = sorted.map((item, i) => {
+  let words = $derived(sorted.map((item, i) => {
     const t = (item.weight - minW) / range;
     const fontSize = MIN_FONT + t * (MAX_FONT - MIN_FONT);
     const approxW = item.word.length * fontSize * 0.56 + GAP * 2;
@@ -33,9 +40,9 @@
       color: item.color ?? COLORS[i % COLORS.length],
       bold: fontSize >= 16,
     };
-  });
+  }));
 
-  $: placed = (() => {
+  let placed = $derived((() => {
     const usableW = VW - PAD * 2;
     const rows: (typeof words)[] = [];
     let row: typeof words = [];
@@ -67,9 +74,9 @@
         return { ...w, cx, cy: baseY + w.fontSize };
       });
     });
-  })();
+  })());
 
-  $: svgH = (() => {
+  let svgH = $derived((() => {
     const ROW_H = 32;
     const usableW = VW - PAD * 2;
     let rows = 1; let rowW = 0;
@@ -78,7 +85,7 @@
       else rowW += w.approxW;
     }
     return Math.max(height, rows * ROW_H + PAD * 2);
-  })();
+  })());
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/icons/AlarmIcon.svelte

@@ -1,4 +1,7 @@
-<script lang="ts">export let size: number = 16;</script>
+<script lang="ts">
+  interface Props { size?: number }
+  let { size = 16 }: Props = $props();
+</script>
 <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
   <path d="m8 2 6 11H2L8 2Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
   <path d="M8 7v3M8 11.5h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />

package/src/lib/icons/BellIcon.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  export let size: number = 16;
+  interface Props { size?: number }
+  let { size = 16 }: Props = $props();
 </script>
 <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
   <path d="M4 6.5a4 4 0 0 1 8 0V9l1.2 2H2.8L4 9V6.5ZM6.5 12.5a1.5 1.5 0 0 0 3 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />

package/src/lib/icons/CaretIcon.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-  let className = '';
-  export { className as class };
-  export let size: number = 14;
+  interface Props {
+    class?: string;
+    size?: number;
+  }
+  let { class: className = '', size = 14 }: Props = $props();
 </script>
 <svg width={size} height={size} viewBox="0 0 20 20" fill="none" aria-hidden="true" focusable="false" class={className}>
   <path d="M5.5 8 10 12.5 14.5 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />

package/src/lib/icons/ClientsIcon.svelte

@@ -1,4 +1,7 @@
-<script lang="ts">export let size: number = 16;</script>
+<script lang="ts">
+  interface Props { size?: number }
+  let { size = 16 }: Props = $props();
+</script>
 <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
   <circle cx="8" cy="6" r="2.5" stroke="currentColor" stroke-width="1.5" />
   <path d="M3 13c0-2.5 2.2-4.5 5-4.5s5 2 5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />

package/src/lib/icons/CloseIcon.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  export let size: number = 14;
+  interface Props { size?: number }
+  let { size = 14 }: Props = $props();
 </script>
 <svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden="true" focusable="false">
   <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />

package/src/lib/icons/DashboardIcon.svelte

@@ -1,4 +1,7 @@
-<script lang="ts">export let size: number = 16;</script>
+<script lang="ts">
+  interface Props { size?: number }
+  let { size = 16 }: Props = $props();
+</script>
 <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
   <rect x="2" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />
   <rect x="9" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.5" />

package/src/lib/icons/DevicesIcon.svelte

@@ -1,4 +1,7 @@
-<script lang="ts">export let size: number = 16;</script>
+<script lang="ts">
+  interface Props { size?: number }
+  let { size = 16 }: Props = $props();
+</script>
 <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
   <rect x="2.5" y="3.5" width="11" height="9" rx="1.5" stroke="currentColor" stroke-width="1.5" />
   <line x1="2.5" y1="6.5" x2="13.5" y2="6.5" stroke="currentColor" stroke-width="1.5" />

package/src/lib/icons/DownloadIcon.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  export let size: number = 14;
+  interface Props { size?: number }
+  let { size = 14 }: Props = $props();
 </script>
 <svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden="true" focusable="false">
   <path d="M7 1.5v7m0 0L4.5 6m2.5 2.5L9.5 6M2 11h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />

package/src/lib/icons/HelpIcon.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  export let size: number = 16;
+  interface Props { size?: number }
+  let { size = 16 }: Props = $props();
 </script>
 <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
   <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5" />

package/src/lib/icons/InfraIcon.svelte

@@ -1,4 +1,7 @@
-<script lang="ts">export let size: number = 16;</script>
+<script lang="ts">
+  interface Props { size?: number }
+  let { size = 16 }: Props = $props();
+</script>
 <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
   <rect x="2" y="2" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1.5" />
   <rect x="10" y="2" width="4" height="4" rx="0.5" stroke="currentColor" stroke-width="1.5" />

package/src/lib/icons/IntegrationsIcon.svelte

@@ -1,4 +1,7 @@
-<script lang="ts">export let size: number = 16;</script>
+<script lang="ts">
+  interface Props { size?: number }
+  let { size = 16 }: Props = $props();
+</script>
 <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
   <circle cx="5" cy="8" r="2.5" stroke="currentColor" stroke-width="1.5" />
   <circle cx="11" cy="8" r="2.5" stroke="currentColor" stroke-width="1.5" />

package/src/lib/icons/LogsIcon.svelte

@@ -1,4 +1,7 @@
-<script lang="ts">export let size: number = 16;</script>
+<script lang="ts">
+  interface Props { size?: number }
+  let { size = 16 }: Props = $props();
+</script>
 <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
   <rect x="3" y="2.5" width="10" height="11" rx="1.5" stroke="currentColor" stroke-width="1.5" />
   <line x1="5.5" y1="6" x2="10.5" y2="6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />

package/src/lib/icons/PlusIcon.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  export let size: number = 12;
+  interface Props { size?: number }
+  let { size = 12 }: Props = $props();
 </script>
 <svg width={size} height={size} viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false">
   <path d="M6 1.5v9M1.5 6h9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />

package/src/lib/icons/PortsIcon.svelte

@@ -1,4 +1,7 @@
-<script lang="ts">export let size: number = 16;</script>
+<script lang="ts">
+  interface Props { size?: number }
+  let { size = 16 }: Props = $props();
+</script>
 <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
   <rect x="2" y="5" width="12" height="6" rx="1" stroke="currentColor" stroke-width="1.5" />
   <line x1="5" y1="11" x2="5" y2="13" stroke="currentColor" stroke-width="1.5" />

package/src/lib/icons/SearchIcon.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-  let className = '';
-  export { className as class };
-  export let size: number = 16;
-  export let style: string = '';
+  interface Props {
+    class?: string;
+    size?: number;
+    style?: string;
+  }
+  let { class: className = '', size = 16, style = '' }: Props = $props();
 </script>
 <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false" class={className} {style}>
   <circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.5" />

package/src/lib/icons/SecurityIcon.svelte

@@ -1,4 +1,7 @@
-<script lang="ts">export let size: number = 16;</script>
+<script lang="ts">
+  interface Props { size?: number }
+  let { size = 16 }: Props = $props();
+</script>
 <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
   <path d="m8 1.5 5 2v4.5c0 3-2 5.5-5 6.5-3-1-5-3.5-5-6.5V3.5l5-2Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
 </svg>

package/src/lib/icons/SettingsIcon.svelte

@@ -1,4 +1,7 @@
-<script lang="ts">export let size: number = 16;</script>
+<script lang="ts">
+  interface Props { size?: number }
+  let { size = 16 }: Props = $props();
+</script>
 <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
   <circle cx="8" cy="8" r="2.2" stroke="currentColor" stroke-width="1.5" />
   <path d="M8 1.5v1.6M8 12.9v1.6M14.5 8h-1.6M3.1 8H1.5m11-4.6-1.1 1.1M4.6 11.4l-1.1 1.1m0-9 1.1 1.1m6.7 6.7 1.1 1.1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />

package/src/lib/icons/TopologyIcon.svelte

@@ -1,4 +1,7 @@
-<script lang="ts">export let size: number = 16;</script>
+<script lang="ts">
+  interface Props { size?: number }
+  let { size = 16 }: Props = $props();
+</script>
 <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
   <circle cx="8" cy="3.5" r="1.6" stroke="currentColor" stroke-width="1.5" />
   <circle cx="3.5" cy="12.5" r="1.6" stroke="currentColor" stroke-width="1.5" />

package/src/lib/icons/UpdatesIcon.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  export let size: number = 16;
+  interface Props { size?: number }
+  let { size = 16 }: Props = $props();
 </script>
 <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
   <path d="M8 2v6m0 0L5 5.5M8 8l3-2.5M3 12h10M3 14h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />

package/src/lib/icons/VpnIcon.svelte

@@ -1,4 +1,7 @@
-<script lang="ts">export let size: number = 16;</script>
+<script lang="ts">
+  interface Props { size?: number }
+  let { size = 16 }: Props = $props();
+</script>
 <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
   <rect x="3" y="6" width="10" height="8" rx="1.5" stroke="currentColor" stroke-width="1.5" />
   <path d="M5.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="currentColor" stroke-width="1.5" />

package/src/lib/icons/WifiIcon.svelte

@@ -1,4 +1,7 @@
-<script lang="ts">export let size: number = 16;</script>
+<script lang="ts">
+  interface Props { size?: number }
+  let { size = 16 }: Props = $props();
+</script>
 <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
   <path d="M2 6c3-3 9-3 12 0M4 9c2.5-2.5 5.5-2.5 8 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
   <circle cx="8" cy="12" r="1" fill="currentColor" />

package/src/lib/icons/WirelessIcon.svelte

@@ -1,4 +1,7 @@
-<script lang="ts">export let size: number = 16;</script>
+<script lang="ts">
+  interface Props { size?: number }
+  let { size = 16 }: Props = $props();
+</script>
 <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
   <path d="M2 11s1.5-1 6-1 6 1 6 1M2 8s1.5-1.5 6-1.5 6 1.5 6 1.5M2 5s1.5-2 6-2 6 2 6 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
 </svg>