@w5-ui/svelte 0.1.0 → 0.2.0

package/src/lib/components/CommandPalette.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export interface CommandItem {
     id: string;
     label: string;
@@ -8,26 +8,32 @@
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher, tick } from 'svelte';
+  import { tick } from 'svelte';
   import Kbd from './Kbd.svelte';
 
-  export let open: boolean = false;
-  export let items: CommandItem[] = [];
-  export let placeholder: string = 'Search pages and actions…';
-
-  const dispatch = createEventDispatcher<{ select: string; close: void }>();
+  interface Props {
+    open?: boolean;
+    items?: CommandItem[];
+    placeholder?: string;
+    onselect?: (payload: string) => void;
+    onclose?: () => void;
+  }
 
-  let query = '';
-  let activeIdx = 0;
-  let inputEl: HTMLInputElement;
+  let { open = false, items = [], placeholder = 'Search pages and actions…',
+    onselect,
+    onclose,
+  }: Props = $props();
+  let query = $state('');
+  let activeIdx = $state(0);
+  let inputEl = $state<HTMLInputElement | undefined>(undefined);
   const listboxId = `cp-list-${Math.random().toString(36).slice(2)}`;
 
-  $: filtered =
-    query.trim() === ''
+  let filtered =
+    $derived(query.trim() === ''
       ? items
-      : items.filter((i) => i.label.toLowerCase().includes(query.toLowerCase()));
+      : items.filter((i) => i.label.toLowerCase().includes(query.toLowerCase())));
 
-  $: grouped = filtered.reduce(
+  let grouped = $derived(filtered.reduce(
     (acc, item) => {
       const g = item.group ?? '';
       const found = acc.find((a: { group: string }) => a.group === g);
@@ -36,15 +42,19 @@
       return acc;
     },
     [] as { group: string; items: CommandItem[] }[],
-  );
+  ));
 
-  $: if (open) {
-    query = '';
-    activeIdx = 0;
-    tick().then(() => inputEl?.focus());
-  }
+  $effect(() => {
+    if (open) {
+      query = '';
+      activeIdx = 0;
+      tick().then(() => inputEl?.focus());
+    }
+  });
 
-  $: if (query !== undefined) activeIdx = 0;
+  $effect(() => {
+    if (query !== undefined) activeIdx = 0;
+  });
 
   function handleKey(e: KeyboardEvent) {
     if (e.key === 'ArrowDown') {
@@ -59,24 +69,24 @@
       if (item) commit(item.id);
     } else if (e.key === 'Escape') {
       e.preventDefault();
-      dispatch('close');
+      onclose?.();
     }
   }
 
   function commit(id: string) {
-    dispatch('select', id);
-    dispatch('close');
+    onselect?.(id);
+    onclose?.();
     query = '';
   }
 
   function handleBackdrop(e: MouseEvent) {
-    if (e.target === e.currentTarget) dispatch('close');
+    if (e.target === e.currentTarget) onclose?.();
   }
 </script>
 
 {#if open}
-  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-  <div class="cp-backdrop" role="presentation" on:click={handleBackdrop} on:keydown={handleKey}>
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <div class="cp-backdrop" role="presentation" onclick={handleBackdrop} onkeydown={handleKey}>
     <div
       role="dialog"
       aria-modal="true"
@@ -110,7 +120,7 @@
           aria-controls={listboxId}
           {placeholder}
           bind:value={query}
-          on:keydown={handleKey}
+          onkeydown={handleKey}
         />
         <span class="cp-kbd">Esc</span>
       </div>
@@ -125,15 +135,15 @@
               {/if}
               {#each groupItems as item}
                 {@const idx = filtered.indexOf(item)}
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <div
                   role="option"
                   tabindex="-1"
                   aria-selected={idx === activeIdx}
                   data-active={idx === activeIdx ? 'true' : undefined}
                   class="cp-item"
-                  on:click={() => commit(item.id)}
-                  on:mouseenter={() => (activeIdx = idx)}
+                  onclick={() => commit(item.id)}
+                  onmouseenter={() => (activeIdx = idx)}
                 >
                   {item.label}
                   {#if item.shortcut}

package/src/lib/components/ConfirmDialog.svelte

@@ -1,16 +1,30 @@
 <script lang="ts">
-  import { onDestroy, afterUpdate } from 'svelte';
+  import { onDestroy } from 'svelte';
 
-  export let open = false;
-  export let title = '';
-  export let description: string | undefined = undefined;
-  export let confirmLabel = 'Confirm';
-  export let cancelLabel = 'Cancel';
-  export let variant: 'danger' | 'warning' | 'info' = 'info';
-  export let onConfirm: () => void = () => {};
-  export let onCancel: () => void = () => {};
+  interface Props {
+    open?: boolean;
+    title?: string;
+    description?: string | undefined;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: 'danger' | 'warning' | 'info';
+    onConfirm?: () => void;
+    onCancel?: () => void;
+  }
+
+  let {
+    open = false,
+    title = '',
+    description = undefined,
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    variant = 'info',
+    onConfirm = () => {},
+    onCancel = () => {},
+  }: Props = $props();
 
-  const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+  const FOCUSABLE =
+    'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
 
   const VARIANT_CLASS: Record<string, string> = {
     danger: 'btn cd-confirm cd-confirm--danger',
@@ -18,49 +32,66 @@
     info: 'btn cd-confirm cd-confirm--info',
   };
 
-  let dialogEl: HTMLDivElement;
+  let dialogEl = $state<HTMLDivElement | undefined>(undefined);
   let prev: HTMLElement | null = null;
   let prevOverflow = '';
 
   function onKey(e: KeyboardEvent) {
-    if (e.key === 'Escape') { onCancel(); return; }
+    if (e.key === 'Escape') {
+      onCancel();
+      return;
+    }
     if (e.key !== 'Tab' || !dialogEl) return;
     const els = Array.from(dialogEl.querySelectorAll<HTMLElement>(FOCUSABLE));
-    if (!els.length) { e.preventDefault(); return; }
+    if (!els.length) {
+      e.preventDefault();
+      return;
+    }
     const first = els[0]!;
     const last = els[els.length - 1]!;
     const active = document.activeElement;
-    if (e.shiftKey && active === first) { e.preventDefault(); last.focus(); }
-    else if (!e.shiftKey && active === last) { e.preventDefault(); first.focus(); }
-  }
-
-  $: if (open) {
-    prev = document.activeElement as HTMLElement | null;
-    prevOverflow = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    window.addEventListener('keydown', onKey);
+    if (e.shiftKey && active === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && active === last) {
+      e.preventDefault();
+      first.focus();
+    }
   }
 
-  afterUpdate(() => {
-    if (open && dialogEl) {
-      const first = dialogEl.querySelector<HTMLElement>(FOCUSABLE);
-      (first ?? dialogEl).focus();
+  // Replaces the old `$: if (open) { ... }` + `afterUpdate` combo. `$effect`
+  // runs after the DOM commits, so `dialogEl` is bound before we query it.
+  $effect(() => {
+    if (open) {
+      prev = document.activeElement as HTMLElement | null;
+      prevOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      window.addEventListener('keydown', onKey);
+      if (dialogEl) {
+        const firstFocusable = dialogEl.querySelector<HTMLElement>(FOCUSABLE);
+        (firstFocusable ?? dialogEl).focus();
+      }
+      return () => {
+        window.removeEventListener('keydown', onKey);
+        document.body.style.overflow = prevOverflow;
+        prev?.focus?.();
+      };
     }
   });
 
-  $: if (!open) {
-    window.removeEventListener('keydown', onKey);
-    document.body.style.overflow = prevOverflow;
-    prev?.focus?.();
-  }
-
   onDestroy(() => {
     window.removeEventListener('keydown', onKey);
     document.body.style.overflow = prevOverflow;
   });
 </script>
 
-<div class="backdrop {open ? 'show' : ''}" role="presentation" on:click={(e) => { if (e.target === e.currentTarget) onCancel(); }}>
+<div
+  class="backdrop {open ? 'show' : ''}"
+  role="presentation"
+  onclick={(e) => {
+    if (e.target === e.currentTarget) onCancel();
+  }}
+>
   <div
     bind:this={dialogEl}
     class="modal cd-dialog"
@@ -77,8 +108,8 @@
       <div id="cd-desc" class="cd-body">{description}</div>
     {/if}
     <div class="modal-f">
-      <button type="button" class="btn btn-ghost" on:click={onCancel}>{cancelLabel}</button>
-      <button type="button" class={VARIANT_CLASS[variant]} on:click={onConfirm}>{confirmLabel}</button>
+      <button type="button" class="btn btn-ghost" onclick={onCancel}>{cancelLabel}</button>
+      <button type="button" class={VARIANT_CLASS[variant]} onclick={onConfirm}>{confirmLabel}</button>
     </div>
   </div>
 </div>

package/src/lib/components/ContextMenu.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   export interface ContextMenuItem {
     id: string;
     label: string;
@@ -9,36 +9,47 @@
 </script>
 
 <script lang="ts">
-  import { onDestroy, tick, createEventDispatcher } from 'svelte';
+  import { onDestroy, tick } from 'svelte';
 
-  export let items: ContextMenuEntry[] = [];
-  export let x = 0;
-  export let y = 0;
-  export let open = false;
-  export let label = 'Context menu';
-
-  const dispatch = createEventDispatcher<{ close: void; action: string }>();
+  interface Props {
+    items?: ContextMenuEntry[];
+    x?: number;
+    y?: number;
+    open?: boolean;
+    label?: string;
+    onclose?: () => void;
+    onaction?: (payload: string) => void;
+  }
 
-  let menuEl: HTMLUListElement;
-  let activeIdx = 0;
+  let {
+    items = [],
+    x = 0,
+    y = 0,
+    open = false,
+    label = 'Context menu',
+    onclose,
+    onaction,
+  }: Props = $props();
+  let menuEl = $state<HTMLUListElement | undefined>(undefined);
+  let activeIdx = $state(0);
 
-  $: actionItems = items.reduce<ContextMenuItem[]>((acc, e) => {
+  let actionItems = $derived(items.reduce<ContextMenuItem[]>((acc, e) => {
     if (!('separator' in e)) acc.push(e);
     return acc;
-  }, []);
+  }, []));
 
   const menuW = 168;
-  $: menuH = items.length * 30 + 8;
-  $: cx = Math.min(x, (typeof window !== 'undefined' ? window.innerWidth : 1200) - menuW - 8);
-  $: cy = Math.min(y, (typeof window !== 'undefined' ? window.innerHeight : 800) - menuH - 8);
+  let menuH = $derived(items.length * 30 + 8);
+  let cx = $derived(Math.min(x, (typeof window !== 'undefined' ? window.innerWidth : 1200) - menuW - 8));
+  let cy = $derived(Math.min(y, (typeof window !== 'undefined' ? window.innerHeight : 800) - menuH - 8));
 
   function activate(id: string) {
-    dispatch('action', id);
-    dispatch('close');
+    onaction?.(id);
+    onclose?.();
   }
 
   function handleKeyDown(e: KeyboardEvent) {
-    if (e.key === 'Escape') { e.preventDefault(); dispatch('close'); }
+    if (e.key === 'Escape') { e.preventDefault(); onclose?.(); }
     else if (e.key === 'ArrowDown') { e.preventDefault(); activeIdx = Math.min(activeIdx + 1, actionItems.length - 1); }
     else if (e.key === 'ArrowUp') { e.preventDefault(); activeIdx = Math.max(activeIdx - 1, 0); }
     else if (e.key === 'Home') { e.preventDefault(); activeIdx = 0; }
@@ -48,20 +59,22 @@
       const item = actionItems[activeIdx];
       if (item && !item.disabled) activate(item.id);
     }
-    else if (e.key === 'Tab') { dispatch('close'); }
+    else if (e.key === 'Tab') { onclose?.(); }
   }
 
   function handleOutside(e: MouseEvent) {
-    if (!menuEl?.contains(e.target as Node)) dispatch('close');
+    if (!menuEl?.contains(e.target as Node)) onclose?.();
   }
 
-  $: if (open) {
-    activeIdx = 0;
-    tick().then(() => menuEl?.focus());
-    document.addEventListener('mousedown', handleOutside);
-  } else {
-    document.removeEventListener('mousedown', handleOutside);
-  }
+  $effect(() => {
+    if (open) {
+      activeIdx = 0;
+      tick().then(() => menuEl?.focus());
+      document.addEventListener('mousedown', handleOutside);
+    } else {
+      document.removeEventListener('mousedown', handleOutside);
+    }
+  });
 
   onDestroy(() => {
     document.removeEventListener('mousedown', handleOutside);
@@ -74,7 +87,7 @@
 </script>
 
 {#if open}
-  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
   <ul
     bind:this={menuEl}
     role="menu"
@@ -82,13 +95,13 @@
     tabindex="-1"
     class="ctx-menu"
     style="left:{cx}px;top:{cy}px"
-    on:keydown={handleKeyDown}
+    onkeydown={handleKeyDown}
   >
     {#each items as entry, i (i)}
       {#if 'separator' in entry}
         <li role="separator" class="ctx-menu-sep"></li>
       {:else}
-        <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+        <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
         <li
           role="menuitem"
           tabindex="-1"
@@ -96,8 +109,8 @@
           data-active={actionIndex(entry) === activeIdx ? 'true' : undefined}
           data-danger={entry.danger || undefined}
           class="ctx-menu-item"
-          on:mouseenter={() => (activeIdx = actionIndex(entry))}
-          on:mousedown|preventDefault={() => { if (!entry.disabled) activate(entry.id); }}
+          onmouseenter={() => (activeIdx = actionIndex(entry))}
+          onmousedown={(e) => { e.preventDefault(); (() => { if (!entry.disabled) activate(entry.id); })(); }}
         >
           {entry.label}
         </li>

package/src/lib/components/ContextualHelp.svelte

@@ -1,21 +1,25 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
 </script>
 
 <script lang="ts">
   import { onMount, onDestroy, tick } from 'svelte';
 
-  export let title: string;
-  export let body: string;
-  export let placement: 'top' | 'bottom' = 'top';
+  interface Props {
+    title: string;
+    body: string;
+    placement?: 'top' | 'bottom';
+  }
+
+  let { title, body, placement = 'top' }: Props = $props();
 
   const uid = `dash-ui-ch-${++counter}`;
   const titleId = `${uid}-title`;
 
-  let open = false;
-  let rootEl: HTMLSpanElement;
-  let triggerEl: HTMLButtonElement;
-  let panelEl: HTMLDivElement;
+  let open = $state(false);
+  let rootEl = $state<HTMLSpanElement | undefined>(undefined);
+  let triggerEl = $state<HTMLButtonElement | undefined>(undefined);
+  let panelEl = $state<HTMLDivElement | undefined>(undefined);
 
   async function toggle() {
     open = !open;
@@ -56,7 +60,7 @@
     aria-label="Help"
     aria-haspopup="dialog"
     aria-expanded={open}
-    on:click={toggle}
+    onclick={toggle}
   >?</button>
   {#if open}
     <div

package/src/lib/components/ContourPlot.svelte

@@ -1,16 +1,31 @@
-<script lang="ts">
+<script module lang="ts">
   export interface ContourPoint {
     x: number;
     y: number;
   }
+</script>
 
-  export let points: ContourPoint[] = [];
-  export let xRange: [number, number] | undefined = undefined;
-  export let yRange: [number, number] | undefined = undefined;
-  export let height = 200;
-  export let bandwidth = 3.5;
-  export let color = '#006FFF';
-  export let ariaLabel = 'Contour plot';
+<script lang="ts">
+
+  interface Props {
+    points?: ContourPoint[];
+    xRange?: [number, number] | undefined;
+    yRange?: [number, number] | undefined;
+    height?: number;
+    bandwidth?: number;
+    color?: string;
+    ariaLabel?: string;
+  }
+
+  let {
+    points = [],
+    xRange = undefined,
+    yRange = undefined,
+    height = 200,
+    bandwidth = 3.5,
+    color = '#006FFF',
+    ariaLabel = 'Contour plot'
+  }: Props = $props();
 
   const VW = 340;
   const PAD_L = 28;
@@ -78,34 +93,34 @@
     return [];
   }
 
-  $: PW = VW - PAD_L - PAD_R;
-  $: PH = 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;
-
-  $: gridPts = points.map((p) => ({
+  let PW = $derived(VW - PAD_L - PAD_R);
+  let PH = $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);
+
+  let gridPts = $derived(points.map((p) => ({
     gx: ((p.x - xMin) / xSpan) * GW,
     gy: (1 - (p.y - yMin) / ySpan) * GH,
-  }));
-  $: grid = buildGrid(gridPts, bandwidth);
-  $: cellW = PW / GW;
-  $: cellH = PH / GH;
+  })));
+  let grid = $derived(buildGrid(gridPts, bandwidth));
+  let cellW = $derived(PW / GW);
+  let cellH = $derived(PH / GH);
 
   function svgX(col: number, lx: number): number { return PAD_L + (col + lx) * cellW; }
   function svgY(row: number, ly: number): number { return PAD_T + (row + ly) * cellH; }
   function tyY(v: number): number { return PAD_T + (1 - (v - yMin) / ySpan) * PH; }
   function txX(v: number): number { return PAD_L + ((v - xMin) / xSpan) * PW; }
 
-  $: yTicks = [yMin, (yMin + yMax) / 2, yMax];
-  $: xTicks = [xMin, (xMin + xMax) / 2, xMax];
+  let yTicks = $derived([yMin, (yMin + yMax) / 2, yMax]);
+  let xTicks = $derived([xMin, (xMin + xMax) / 2, xMax]);
 
-  $: levelLines = LEVELS.map((t, li) => {
+  let levelLines = $derived(LEVELS.map((t, li) => {
     const opacity = 0.28 + li * 0.18;
     const sw = 0.55 + li * 0.28;
     const lines: Array<{ key: string; x1: number; y1: number; x2: number; y2: number }> = [];
@@ -125,7 +140,7 @@
       }
     }
     return { opacity, sw, lines };
-  });
+  }));
 </script>
 
 {#if points.length > 0}

package/src/lib/components/CopyButton.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
-  export let text: string;
-  export let label: string = 'Copy';
+  interface Props {
+    text: string;
+    label?: string;
+  }
+
+  let { text, label = 'Copy' }: Props = $props();
 
-  let copied = false;
+  let copied = $state(false);
   let timer: ReturnType<typeof setTimeout>;
 
   function handleCopy() {
@@ -18,7 +22,7 @@
   type="button"
   class="copy-btn {copied ? 'copy-btn--done' : ''}"
   aria-label={copied ? 'Copied!' : label}
-  on:click={handleCopy}
+  onclick={handleCopy}
 >
   {#if copied}
     <svg viewBox="0 0 14 14" width="14" height="14" fill="none" aria-hidden="true" focusable="false">

package/src/lib/components/CorrelationMatrix.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
-  export let labels: string[] = [];
-  export let data: number[][] = [];
-  export let cellSize: number = 52;
-  export let ariaLabel: string = 'Correlation matrix';
+  interface Props {
+    labels?: string[];
+    data?: number[][];
+    cellSize?: number;
+    ariaLabel?: string;
+  }
+
+  let {
+    labels = [],
+    data = [],
+    cellSize = 52,
+    ariaLabel = 'Correlation matrix'
+  }: Props = $props();
 
   const LABEL_W = 68;
   const LABEL_H = 26;
@@ -25,9 +34,9 @@
     return `rgb(${lerp(r0, r1, t)},${lerp(g0, g1, t)},${lerp(b0, b1, t)})`;
   }
 
-  $: n = labels.length;
-  $: svgW = LABEL_W + n * cellSize;
-  $: svgH = LABEL_H + n * cellSize;
+  let n = $derived(labels.length);
+  let svgW = $derived(LABEL_W + n * cellSize);
+  let svgH = $derived(LABEL_H + n * cellSize);
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">