@w5-ui/svelte 0.1.0 → 0.2.0

package/src/lib/components/Topbar.svelte

@@ -1,5 +1,9 @@
+<script module lang="ts">
+  export interface AppDef { id: string; label: string; logo: AppLogo }
+</script>
+
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  
   import { appLogos, type AppLogoKey as AppLogo } from '@w5-ui/assets';
   import IconButton from './IconButton.svelte';
   import Avatar from './Avatar.svelte';
@@ -9,26 +13,36 @@
   import BellIcon from '../icons/BellIcon.svelte';
   import HelpIcon from '../icons/HelpIcon.svelte';
 
-  export interface AppDef { id: string; label: string; logo: AppLogo }
   export const DEFAULT_APPS: AppDef[] = [
     { id: 'system', label: 'System', logo: 'system' },
     { id: 'instances', label: 'Instances', logo: 'instances' },
     { id: 'agents', label: 'Agents', logo: 'agents' },
   ];
 
-  export let siteName: string;
-  export let activeApp: string;
-  export let apps: AppDef[] = DEFAULT_APPS;
-  export let initials: string = 'MS';
-  export let notificationCount: number = 1;
-  const dispatch = createEventDispatcher<{ appchange: string }>();
+  interface Props {
+    siteName: string;
+    activeApp: string;
+    apps?: AppDef[];
+    initials?: string;
+    notificationCount?: number;
+    onappchange?: (payload: string) => void;
+  }
+
+  let {
+    siteName,
+    activeApp = $bindable(),
+    apps = DEFAULT_APPS,
+    initials = 'MS',
+    notificationCount = 1,
+    onappchange,
+  }: Props = $props();
 </script>
 
 <header class="topbar">
   <button type="button" class="site-switch" aria-label="Switch site: {siteName}" aria-haspopup="menu">
     <span class="status-ring"></span>
     <span class="site-name" aria-hidden="true">{siteName}</span>
-    <CaretIcon class="caret" aria-hidden="true" />
+    <CaretIcon class="caret" />
   </button>
   <nav class="app-tabs" aria-label="Apps">
     {#each apps as a (a.id)}
@@ -36,7 +50,7 @@
         type="button"
         class="app-tab {a.id === activeApp ? 'active' : ''}"
         aria-current={a.id === activeApp ? 'page' : undefined}
-        on:click={() => { activeApp = a.id; dispatch('appchange', a.id); }}
+        onclick={() => { activeApp = a.id; onappchange?.(a.id); }}
       >
         <img src={appLogos[a.logo]} alt="" width="24" height="24" />
         <span class="label">{a.label}</span>

package/src/lib/components/TransferList.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export interface TransferListItem {
     id: string;
     label: string;
@@ -7,26 +7,33 @@
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
-  export let sourceLabel: string = 'Available';
-  export let targetLabel: string = 'Selected';
-  export let source: TransferListItem[] = [];
-  export let target: TransferListItem[] = [];
-  let className = '';
-  export { className as class };
+  interface Props {
+    sourceLabel?: string;
+    targetLabel?: string;
+    source?: TransferListItem[];
+    target?: TransferListItem[];
+    class?: string;
+    onchange?: (payload: { source: TransferListItem[]; target: TransferListItem[] }) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ change: { source: TransferListItem[]; target: TransferListItem[] } }>();
+  let {
+    sourceLabel = 'Available',
+    targetLabel = 'Selected',
+    source = $bindable([]),
+    target = $bindable([]),
+    class: className = '',
+    onchange,
+  }: Props = $props();
 
-  let selSrc = new Set<string>();
-  let selTgt = new Set<string>();
-  let focSrc = 0;
-  let focTgt = 0;
-  let srcEls: (HTMLLIElement | null)[] = [];
-  let tgtEls: (HTMLLIElement | null)[] = [];
+  let selSrc = $state(new Set<string>());
+  let selTgt = $state(new Set<string>());
+  let focSrc = $state(0);
+  let focTgt = $state(0);
+  let srcEls: (HTMLLIElement | null)[] = $state([]);
+  let tgtEls: (HTMLLIElement | null)[] = $state([]);
 
   function commit() {
-    dispatch('change', { source, target });
+    onchange?.({ source, target });
   }
 
   function moveRight(ids: Set<string>) {
@@ -112,7 +119,7 @@
       aria-label={sourceLabel}
       aria-multiselectable="true"
       class="tl__list"
-      on:keydown={srcKey}
+      onkeydown={srcKey}
     >
       {#if source.length === 0}
         <li class="tl__empty" role="option" aria-selected="false" aria-disabled="true">Empty</li>
@@ -124,8 +131,8 @@
             aria-selected={selSrc.has(item.id)}
             tabindex={i === focSrc ? 0 : -1}
             class="tl__item{selSrc.has(item.id) ? ' tl__item--sel' : ''}"
-            on:click={() => { focSrc = i; toggleSrc(item.id); }}
-            on:keydown={(e) => { if (e.key === ' ') { e.preventDefault(); focSrc = i; toggleSrc(item.id); } }}
+            onclick={() => { focSrc = i; toggleSrc(item.id); }}
+            onkeydown={(e) => { if (e.key === ' ') { e.preventDefault(); focSrc = i; toggleSrc(item.id); } }}
           >
             <span class="tl__item-label">{item.label}</span>
             {#if item.description}<span class="tl__item-desc">{item.description}</span>{/if}
@@ -138,16 +145,16 @@
   <div class="tl__controls" role="group" aria-label="Transfer controls">
     <button type="button" class="tl__btn" aria-label="Move all to {targetLabel}"
       disabled={source.length === 0}
-      on:click={() => moveRight(new Set(source.map((i) => i.id)))}>»</button>
+      onclick={() => moveRight(new Set(source.map((i) => i.id)))}>»</button>
     <button type="button" class="tl__btn" aria-label="Move selected to {targetLabel}"
       disabled={selSrc.size === 0}
-      on:click={() => moveRight(selSrc)}>›</button>
+      onclick={() => moveRight(selSrc)}>›</button>
     <button type="button" class="tl__btn" aria-label="Move selected back to {sourceLabel}"
       disabled={selTgt.size === 0}
-      on:click={() => moveLeft(selTgt)}>‹</button>
+      onclick={() => moveLeft(selTgt)}>‹</button>
     <button type="button" class="tl__btn" aria-label="Move all back to {sourceLabel}"
       disabled={target.length === 0}
-      on:click={() => moveLeft(new Set(target.map((i) => i.id)))}>«</button>
+      onclick={() => moveLeft(new Set(target.map((i) => i.id)))}>«</button>
   </div>
 
   <div class="tl__panel">
@@ -159,7 +166,7 @@
       aria-label={targetLabel}
       aria-multiselectable="true"
       class="tl__list"
-      on:keydown={tgtKey}
+      onkeydown={tgtKey}
     >
       {#if target.length === 0}
         <li class="tl__empty" role="option" aria-selected="false" aria-disabled="true">Empty</li>
@@ -171,8 +178,8 @@
             aria-selected={selTgt.has(item.id)}
             tabindex={i === focTgt ? 0 : -1}
             class="tl__item{selTgt.has(item.id) ? ' tl__item--sel' : ''}"
-            on:click={() => { focTgt = i; toggleTgt(item.id); }}
-            on:keydown={(e) => { if (e.key === ' ') { e.preventDefault(); focTgt = i; toggleTgt(item.id); } }}
+            onclick={() => { focTgt = i; toggleTgt(item.id); }}
+            onkeydown={(e) => { if (e.key === ' ') { e.preventDefault(); focTgt = i; toggleTgt(item.id); } }}
           >
             <span class="tl__item-label">{item.label}</span>
             {#if item.description}<span class="tl__item-desc">{item.description}</span>{/if}

package/src/lib/components/TreeItem.svelte

@@ -1,19 +1,32 @@
-<script lang="ts">
+<script module lang="ts">
   export interface TreeNode {
     id: string;
     label: string;
     meta?: string;
     children?: TreeNode[];
   }
+</script>
+
+<script lang="ts">
+  import TreeItem from './TreeItem.svelte';
+
+  interface Props {
+    node: TreeNode;
+    expanded: Set<string>;
+    selected: string | undefined;
+    focusedId: string;
+  }
 
-  export let node: TreeNode;
-  export let expanded: Set<string>;
-  export let selected: string | undefined;
-  export let focusedId: string;
+  let {
+    node,
+    expanded,
+    selected,
+    focusedId
+  }: Props = $props();
 
-  $: hasChildren = !!node.children?.length;
-  $: isExpanded = expanded.has(node.id);
-  $: isSelected = selected === node.id;
+  let hasChildren = $derived(!!node.children?.length);
+  let isExpanded = $derived(expanded.has(node.id));
+  let isSelected = $derived(selected === node.id);
 </script>
 
 <li
@@ -46,10 +59,10 @@
     <span class="tree__label">{node.label}</span>
     {#if node.meta}<span class="tree__meta">{node.meta}</span>{/if}
   </div>
-  {#if hasChildren && isExpanded}
+  {#if hasChildren && isExpanded && node.children}
     <ul role="group" class="tree__group">
       {#each node.children as child (child.id)}
-        <svelte:self
+        <TreeItem
           node={child}
           {expanded}
           {selected}

package/src/lib/components/TreeMap.svelte

@@ -1,13 +1,20 @@
-<script lang="ts">
+<script module lang="ts">
   export interface TreeMapNode {
     label: string;
     value: number;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    nodes?: TreeMapNode[];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let nodes: TreeMapNode[] = [];
-  export let height: number = 160;
-  export let ariaLabel: string = 'Treemap chart';
+  let { nodes = [], height = 160, ariaLabel = 'Treemap chart' }: Props = $props();
 
   const VW = 320;
   const PAD = 4;
@@ -41,13 +48,13 @@
     return [...layout(ns.slice(0, split), x, y, w, h1), ...layout(ns.slice(split), x, y + h1 + GAP, w, Math.max(h - h1 - GAP, 0))];
   }
 
-  $: rects = (() => {
+  let rects = $derived((() => {
     if (!nodes.length) return [] as LayoutRect[];
     const sorted = [...nodes]
       .sort((a, b) => b.value - a.value)
       .map((n, i) => ({ ...n, color: n.color ?? PALETTE[i % PALETTE.length] }));
     return layout(sorted, PAD, PAD, VW - PAD * 2, height - PAD * 2);
-  })();
+  })());
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/TreeView.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export interface TreeNode {
     id: string;
     label: string;
@@ -11,15 +11,27 @@
   import { tick } from 'svelte';
   import TreeItem from './TreeItem.svelte';
 
-  export let nodes: TreeNode[] = [];
-  export let selected: string | undefined = undefined;
-  export let defaultExpanded: string[] = [];
-  export let label: string | undefined = undefined;
-  export let className: string = '';
+  interface Props {
+    nodes?: TreeNode[];
+    selected?: string | undefined;
+    defaultExpanded?: string[];
+    label?: string | undefined;
+    className?: string;
+  }
+
+  let {
+    nodes = [],
+    selected = $bindable(undefined),
+    defaultExpanded = [],
+    label = undefined,
+    className = ''
+  }: Props = $props();
 
-  let expanded = new Set<string>(defaultExpanded);
-  let focusedId: string = nodes[0]?.id ?? '';
-  let rootEl: HTMLUListElement;
+  // svelte-ignore state_referenced_locally
+  let expanded = $state(new Set<string>(defaultExpanded));
+  // svelte-ignore state_referenced_locally
+  let focusedId: string = $state(nodes[0]?.id ?? '');
+  let rootEl = $state<HTMLUListElement | undefined>(undefined);
 
   function visibleIds(list: TreeNode[]): string[] {
     const ids: string[] = [];
@@ -120,9 +132,9 @@
   role="tree"
   aria-label={label}
   class={`tree${className ? ' ' + className : ''}`}
-  on:keydown={handleKeydown}
-  on:focusin={handleFocusin}
-  on:click={handleClick}
+  onkeydown={handleKeydown}
+  onfocusin={handleFocusin}
+  onclick={handleClick}
 >
   {#each nodes as node (node.id)}
     <TreeItem {node} {expanded} {selected} {focusedId} />

package/src/lib/components/UptimeTimeline.svelte

@@ -1,20 +1,27 @@
-<script lang="ts">
+<script module lang="ts">
   export type UptimeStatus = 'up' | 'degraded' | 'down';
-
   export interface UptimeSegment {
     from: number;
     to: number;
     status: UptimeStatus;
   }
-
   export interface UptimeSeries {
     label: string;
     segments: UptimeSegment[];
   }
+</script>
+
+<script lang="ts">
+
+
+
+  interface Props {
+    series?: UptimeSeries[];
+    xLabels?: string[];
+    ariaLabel?: string;
+  }
 
-  export let series: UptimeSeries[] = [];
-  export let xLabels: string[] = [];
-  export let ariaLabel: string = 'Uptime timeline';
+  let { series = [], xLabels = [], ariaLabel = 'Uptime timeline' }: Props = $props();
 
   const VW = 400;
   const LABEL_W = 88;
@@ -38,13 +45,13 @@
     { status: 'down', label: 'Down' },
   ];
 
-  $: trackW = VW - LABEL_W - PAD_R;
-  $: rowsH = series.length * (ROW_H + ROW_GAP) - ROW_GAP;
-  $: totalH = PAD_T + rowsH + PAD_B;
-  $: xlblY = PAD_T + rowsH + XLBL_H;
-  $: legY = xlblY + LEG_H;
+  let trackW = $derived(VW - LABEL_W - PAD_R);
+  let rowsH = $derived(series.length * (ROW_H + ROW_GAP) - ROW_GAP);
+  let totalH = $derived(PAD_T + rowsH + PAD_B);
+  let xlblY = $derived(PAD_T + rowsH + XLBL_H);
+  let legY = $derived(xlblY + LEG_H);
 
-  $: rows = series.map((s, si) => ({
+  let rows = $derived(series.map((s, si) => ({
     label: s.label,
     y: PAD_T + si * (ROW_H + ROW_GAP),
     midY: PAD_T + si * (ROW_H + ROW_GAP) + ROW_H / 2 + 4,
@@ -53,13 +60,13 @@
       w: (seg.to - seg.from) * trackW,
       color: STATUS_COLOR[seg.status],
     })),
-  }));
+  })));
 
-  $: xlbls = xLabels.map((lbl, i) => ({
+  let xlbls = $derived(xLabels.map((lbl, i) => ({
     lbl,
     x: LABEL_W + (xLabels.length > 1 ? i / (xLabels.length - 1) : 0) * trackW,
     anchor: i === 0 ? 'start' : i === xLabels.length - 1 ? 'end' : 'middle',
-  }));
+  })));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/VennDiagram.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script module lang="ts">
   export interface VennSet {
     id: string;
     label: string;
@@ -9,11 +9,23 @@
     sets: string[];
     value: number;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    sets?: VennSet[];
+    intersections?: VennIntersection[];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let sets: VennSet[] = [];
-  export let intersections: VennIntersection[] = [];
-  export let height = 240;
-  export let ariaLabel = 'Venn diagram';
+  let {
+    sets = [],
+    intersections = [],
+    height = 240,
+    ariaLabel = 'Venn diagram'
+  }: Props = $props();
 
   const PALETTE = ['#006FFF', '#00C875', '#A78BFA'];
   const VW = 340;
@@ -22,12 +34,12 @@
     return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);
   }
 
-  $: valid = sets.length >= 2 && sets.length <= 3;
-  $: is3 = sets.length === 3;
-  $: cx = VW / 2;
-  $: cy = height / 2;
+  let valid = $derived(sets.length >= 2 && sets.length <= 3);
+  let is3 = $derived(sets.length === 3);
+  let cx = $derived(VW / 2);
+  let cy = $derived(height / 2);
 
-  $: circles = is3
+  let circles = $derived(is3
     ? [
         { x: cx,      y: cy - 40, r: 75 },
         { x: cx - 65, y: cy + 50, r: 75 },
@@ -36,9 +48,9 @@
     : [
         { x: cx - 58, y: cy, r: 85 },
         { x: cx + 58, y: cy, r: 85 },
-      ];
+      ]);
 
-  $: exclusiveValues = sets.map((s) =>
+  let exclusiveValues = $derived(sets.map((s) =>
     Math.max(
       0,
       s.value -
@@ -46,7 +58,7 @@
           .filter((i) => i.sets.includes(s.id))
           .reduce((sum, i) => sum + i.value, 0),
     ),
-  );
+  ));
 
   function getPt(inter: VennIntersection): { x: number; y: number } | null {
     const idxById: Record<string, number> = {};

package/src/lib/components/ViolinPlot.svelte

@@ -1,14 +1,26 @@
-<script lang="ts">
+<script module lang="ts">
   export interface ViolinSeries {
     label: string;
     values: number[];
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    series?: ViolinSeries[];
+    yRange?: [number, number] | undefined;
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let series: ViolinSeries[] = [];
-  export let yRange: [number, number] | undefined = undefined;
-  export let height: number = 160;
-  export let ariaLabel: string = 'Violin plot';
+  let {
+    series = [],
+    yRange = undefined,
+    height = 160,
+    ariaLabel = 'Violin plot'
+  }: Props = $props();
 
   const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342'];
   const SQRT_TWO_PI = Math.sqrt(2 * Math.PI);
@@ -37,30 +49,30 @@
   }
 
   const VW = 380;
-  $: VH = height;
+  let VH = $derived(height);
   const PAD_L = 28;
   const PAD_R = 8;
   const PAD_T = 8;
   const PAD_B = 20;
 
-  $: allVals = series.flatMap(s => s.values);
-  $: yMin = yRange ? yRange[0] : Math.min(...allVals);
-  $: yMax = yRange ? yRange[1] : Math.max(...allVals);
+  let allVals = $derived(series.flatMap(s => s.values));
+  let yMin = $derived(yRange ? yRange[0] : Math.min(...allVals));
+  let yMax = $derived(yRange ? yRange[1] : Math.max(...allVals));
 
-  $: TRACK_W = VW - PAD_L - PAD_R;
-  $: TRACK_H = VH - PAD_T - PAD_B;
-  $: slotW = TRACK_W / series.length;
-  $: maxHalfW = slotW * 0.38;
+  let TRACK_W = $derived(VW - PAD_L - PAD_R);
+  let TRACK_H = $derived(VH - PAD_T - PAD_B);
+  let slotW = $derived(TRACK_W / series.length);
+  let maxHalfW = $derived(slotW * 0.38);
 
-  $: evalPts = Array.from({ length: NUM_PTS }, (_, i) =>
+  let evalPts = $derived(Array.from({ length: NUM_PTS }, (_, i) =>
     yMin + (i / (NUM_PTS - 1)) * (yMax - yMin)
-  );
+  ));
 
   function ySvg(v: number): number {
     return PAD_T + ((yMax - v) / (yMax - yMin)) * TRACK_H;
   }
 
-  $: violins = series.map((s, si) => {
+  let violins = $derived(series.map((s, si) => {
     const h = bw(s.values);
     const dens = kde(s.values, h, evalPts);
     const maxD = Math.max(...dens, 1e-9);
@@ -78,12 +90,12 @@
       color: s.color ?? COLORS[si % COLORS.length],
       label: s.label,
     };
-  });
+  }));
 
-  $: ticks = [0, 0.25, 0.5, 0.75, 1].map(t => {
+  let ticks = $derived([0, 0.25, 0.5, 0.75, 1].map(t => {
     const v = yMin + t * (yMax - yMin);
     return { v, y: ySvg(v) };
-  });
+  }));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/VirtualList.svelte

@@ -1,17 +1,29 @@
 <script lang="ts">
-  export let items: unknown[] = [];
-  export let itemHeight: number = 48;
-  export let height: number = 400;
-  export let label: string | undefined = undefined;
-  export let overscan: number = 3;
+  interface Props {
+    items?: unknown[];
+    itemHeight?: number;
+    height?: number;
+    label?: string | undefined;
+    overscan?: number;
+    children?: import('svelte').Snippet<[any]>;
+  }
 
-  let scrollTop = 0;
+  let {
+    items = [],
+    itemHeight = 48,
+    height = 400,
+    label = undefined,
+    overscan = 3,
+    children
+  }: Props = $props();
 
-  $: totalHeight = items.length * itemHeight;
-  $: firstVisible = Math.floor(scrollTop / itemHeight);
-  $: startIndex = Math.max(0, firstVisible - overscan);
-  $: endIndex = Math.min(items.length, firstVisible + Math.ceil(height / itemHeight) + overscan + 1);
-  $: visible = items.slice(startIndex, endIndex).map((item, i) => ({ item, index: startIndex + i }));
+  let scrollTop = $state(0);
+
+  let totalHeight = $derived(items.length * itemHeight);
+  let firstVisible = $derived(Math.floor(scrollTop / itemHeight));
+  let startIndex = $derived(Math.max(0, firstVisible - overscan));
+  let endIndex = $derived(Math.min(items.length, firstVisible + Math.ceil(height / itemHeight) + overscan + 1));
+  let visible = $derived(items.slice(startIndex, endIndex).map((item, i) => ({ item, index: startIndex + i })));
 </script>
 
 <div
@@ -20,7 +32,7 @@
   class="vl"
   style:height="{height}px"
   style:overflow-y="auto"
-  on:scroll={(e) => (scrollTop = e.currentTarget.scrollTop)}
+  onscroll={(e) => (scrollTop = e.currentTarget.scrollTop)}
 >
   <div style:height="{totalHeight}px" style:position="relative">
     <div style:position="absolute" style:top="{startIndex * itemHeight}px" style:width="100%">
@@ -30,7 +42,7 @@
           style:height="{itemHeight}px"
           style:overflow="hidden"
         >
-          <slot {item} {index} />
+          {@render children?.({ item, index, })}
         </div>
       {/each}
     </div>