@w5-ui/svelte 0.1.0

package/src/lib/components/RadioGroup.svelte

@@ -0,0 +1,48 @@
+<script context="module" lang="ts">
+  let counter = 0;
+  export interface RadioOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  export let legend: string;
+  export let name: string | undefined = undefined;
+  export let options: RadioOption[] = [];
+  export let value: string | undefined = undefined;
+  export let srOnlyLegend: boolean = false;
+  export let horizontal: boolean = false;
+
+  const groupName = name ?? `dash-ui-rg-${++counter}`;
+</script>
+
+<fieldset class="radio-group {horizontal ? 'radio-group--h' : ''}">
+  <legend class={srOnlyLegend ? 'sr-only' : 'radio-group__legend'}>{legend}</legend>
+  {#each options as opt}
+    {@const optId = `${groupName}-${opt.value}`}
+    <label
+      for={optId}
+      class="radio-option{opt.disabled ? ' radio-option--disabled' : ''}"
+    >
+      <input
+        type="radio"
+        id={optId}
+        name={groupName}
+        value={opt.value}
+        checked={value === opt.value}
+        disabled={opt.disabled}
+        class="radio"
+        on:change={() => { value = opt.value; }}
+      />
+      <span class="radio-text">
+        <span>{opt.label}</span>
+        {#if opt.description}
+          <span class="radio-description">{opt.description}</span>
+        {/if}
+      </span>
+    </label>
+  {/each}
+</fieldset>

package/src/lib/components/RangeSlider.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let label: string | undefined = undefined;
+  export let min = 0;
+  export let max = 100;
+  export let step = 1;
+  export let low = 0;
+  export let high = 100;
+  export let suffix: string | undefined = undefined;
+  export let disabled = false;
+
+  const dispatch = createEventDispatcher<{ change: [number, number] }>();
+
+  $: lowPct = max === min ? 0 : ((low - min) / (max - min)) * 100;
+  $: highPct = max === min ? 0 : ((high - min) / (max - min)) * 100;
+  $: lowOnTop = low >= max - step;
+
+  function handleLow(e: Event) {
+    low = Math.min(Number((e.target as HTMLInputElement).value), high - step);
+    dispatch('change', [low, high]);
+  }
+
+  function handleHigh(e: Event) {
+    high = Math.max(Number((e.target as HTMLInputElement).value), low + step);
+    dispatch('change', [low, high]);
+  }
+</script>
+
+<div class="range-slider">
+  {#if label}
+    <div class="range-slider__header">
+      <span class="range-slider__label">{label}</span>
+      <span class="range-slider__value" aria-live="polite">{low}{suffix ?? ''} &ndash; {high}{suffix ?? ''}</span>
+    </div>
+  {/if}
+  <div
+    class="range-slider__wrap"
+    style="--rs-low:{lowPct}%;--rs-high:{highPct}%"
+    role="group"
+    aria-label={label}
+  >
+    <div class="range-slider__track-bg"></div>
+    <div class="range-slider__fill"></div>
+    <input
+      type="range"
+      class="range-slider__input"
+      {min} {max} {step}
+      value={low}
+      {disabled}
+      style="z-index:{lowOnTop ? 2 : 1}"
+      aria-label={label ? `${label} minimum` : 'Minimum'}
+      aria-valuetext={suffix ? `${low}${suffix}` : String(low)}
+      on:input={handleLow}
+    />
+    <input
+      type="range"
+      class="range-slider__input"
+      {min} {max} {step}
+      value={high}
+      {disabled}
+      style="z-index:{lowOnTop ? 1 : 2}"
+      aria-label={label ? `${label} maximum` : 'Maximum'}
+      aria-valuetext={suffix ? `${high}${suffix}` : String(high)}
+      on:input={handleHigh}
+    />
+  </div>
+</div>

package/src/lib/components/RankedList.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  export interface RankedItem {
+    label: string;
+    value: number;
+    sublabel?: string;
+    color?: string;
+  }
+
+  export let items: RankedItem[];
+  export let unit: string | undefined = undefined;
+  export let max: number | undefined = undefined;
+  export let ariaLabel: string = 'Ranked list';
+
+  $: resolvedMax = max ?? Math.max(...items.map((i) => i.value), 1);
+</script>
+
+<table class="rl" aria-label={ariaLabel}>
+  <caption class="sr-only">{ariaLabel}</caption>
+  <thead class="sr-only">
+    <tr>
+      <th scope="col">#</th>
+      <th scope="col">Name</th>
+      <th scope="col">Distribution</th>
+      <th scope="col">{unit ?? 'Value'}</th>
+    </tr>
+  </thead>
+  <tbody>
+    {#each items as item, i}
+      <tr class="rl-row">
+        <td class="rl-rank">{i + 1}</td>
+        <td class="rl-label-cell">
+          <div class="rl-label">{item.label}</div>
+          {#if item.sublabel}<div class="rl-sublabel">{item.sublabel}</div>{/if}
+        </td>
+        <td class="rl-bar-col" aria-hidden="true">
+          <div class="rl-bar-track">
+            <div
+              class="rl-bar-fill"
+              style="width:{((item.value / resolvedMax) * 100).toFixed(1)}%;background:{item.color ?? '#006FFF'}"
+            ></div>
+          </div>
+        </td>
+        <td class="rl-val">
+          {item.value.toLocaleString()}{#if unit}<span class="rl-unit"> {unit}</span>{/if}
+        </td>
+      </tr>
+    {/each}
+  </tbody>
+</table>

package/src/lib/components/ResizablePanel.svelte

@@ -0,0 +1,77 @@
+<script context="module" lang="ts">
+  export type ResizableOrientation = 'horizontal' | 'vertical';
+</script>
+
+<script lang="ts">
+  export let defaultSize: number = 50;
+  export let min: number = 20;
+  export let max: number = 80;
+  export let orientation: ResizableOrientation = 'vertical';
+  export let label: string = 'Resize panels';
+  export let style: string = '';
+
+  let size = defaultSize;
+  let container: HTMLDivElement;
+
+  function clamp(v: number) { return Math.min(max, Math.max(min, v)); }
+
+  function onMouseDown(e: MouseEvent) {
+    e.preventDefault();
+
+    function onMove(me: MouseEvent) {
+      if (!container) return;
+      const rect = container.getBoundingClientRect();
+      const pct = orientation === 'vertical'
+        ? ((me.clientX - rect.left) / rect.width) * 100
+        : ((me.clientY - rect.top) / rect.height) * 100;
+      size = clamp(Math.round(pct));
+    }
+
+    function onUp() {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    }
+
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    const step = e.shiftKey ? 10 : 1;
+    if (orientation === 'vertical') {
+      if (e.key === 'ArrowLeft') { e.preventDefault(); size = clamp(size - step); }
+      if (e.key === 'ArrowRight') { e.preventDefault(); size = clamp(size + step); }
+    } else {
+      if (e.key === 'ArrowUp') { e.preventDefault(); size = clamp(size - step); }
+      if (e.key === 'ArrowDown') { e.preventDefault(); size = clamp(size + step); }
+    }
+    if (e.key === 'Home') { e.preventDefault(); size = min; }
+    if (e.key === 'End') { e.preventDefault(); size = max; }
+  }
+
+  $: firstStyle = orientation === 'vertical'
+    ? `flex: 0 0 ${size}%; min-width: 0;`
+    : `flex: 0 0 ${size}%; min-height: 0;`;
+</script>
+
+<div bind:this={container} class="rp rp--{orientation}" {style}>
+  <div class="rp-pane" style={firstStyle}>
+    <slot name="first" />
+  </div>
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex a11y-no-noninteractive-element-interactions -->
+  <div
+    role="separator"
+    tabindex="0"
+    aria-orientation={orientation}
+    aria-valuenow={size}
+    aria-valuemin={min}
+    aria-valuemax={max}
+    aria-label={label}
+    class="rp-handle"
+    on:mousedown={onMouseDown}
+    on:keydown={onKeyDown}
+  />
+  <div class="rp-pane rp-pane--second">
+    <slot name="second" />
+  </div>
+</div>

package/src/lib/components/RidgelinePlot.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  export interface RidgelineSeries {
+    label: string;
+    values: number[];
+    color?: string;
+  }
+
+  export let series: RidgelineSeries[] = [];
+  export let xRange: [number, number] | undefined = undefined;
+  export let height: number = 180;
+  export let ariaLabel: string = 'Ridgeline plot';
+
+  const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342'];
+  const SQRT_TWO_PI = Math.sqrt(2 * Math.PI);
+  const NUM_PTS = 80;
+
+  function bw(vals: number[]): number {
+    const n = vals.length;
+    const m = vals.reduce((a, b) => a + b, 0) / n;
+    const s = Math.sqrt(vals.reduce((a, b) => a + (b - m) ** 2, 0) / n);
+    return Math.max(0.9 * s * Math.pow(n, -0.2), 0.5);
+  }
+
+  function kde(vals: number[], h: number, pts: number[]): number[] {
+    const n = vals.length;
+    const c = 1 / (n * h * SQRT_TWO_PI);
+    return pts.map(x => c * vals.reduce((acc, v) => {
+      const z = (x - v) / h;
+      return acc + Math.exp(-0.5 * z * z);
+    }, 0));
+  }
+
+  const VW = 380;
+  $: VH = height;
+  const PAD_L = 56;
+  const PAD_R = 12;
+  const PAD_T = 16;
+  const PAD_B = 20;
+
+  $: TRACK_W = VW - PAD_L - PAD_R;
+  $: TRACK_H = VH - PAD_T - PAD_B;
+  $: n = series.length;
+  $: rowH = TRACK_H / n;
+  $: maxDensH = rowH * 1.6;
+
+  $: allVals = series.flatMap(s => s.values);
+  $: xMin = xRange ? xRange[0] : Math.min(...allVals);
+  $: xMax = xRange ? xRange[1] : Math.max(...allVals);
+
+  $: evalPts = Array.from({ length: NUM_PTS }, (_, i) =>
+    xMin + (i / (NUM_PTS - 1)) * (xMax - xMin)
+  );
+
+  function xSvg(v: number): number {
+    return PAD_L + ((v - xMin) / (xMax - xMin)) * TRACK_W;
+  }
+
+  $: ridges = series.map((s, si) => {
+    const h = bw(s.values);
+    const dens = kde(s.values, h, evalPts);
+    const maxD = Math.max(...dens, 1e-9);
+    const baselineY = PAD_T + (si + 1) * rowH;
+    const color = s.color ?? COLORS[si % COLORS.length];
+
+    const d = [
+      `M${xSvg(xMin).toFixed(1)},${baselineY.toFixed(1)}`,
+      ...evalPts.map((v, i) => `L${xSvg(v).toFixed(1)},${(baselineY - (dens[i] / maxD) * maxDensH).toFixed(1)}`),
+      `L${xSvg(xMax).toFixed(1)},${baselineY.toFixed(1)}`,
+      'Z',
+    ].join(' ');
+
+    return { d, baselineY, color, label: s.label };
+  });
+
+  $: reversedRidges = [...ridges].reverse();
+
+  $: xTicks = [0, 0.25, 0.5, 0.75, 1].map(t => {
+    const v = xMin + t * (xMax - xMin);
+    return { v, x: xSvg(v) };
+  });
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg
+    viewBox="0 0 {VW} {VH}"
+    style="width:100%;height:auto;display:block;"
+    aria-hidden="true"
+    focusable="false"
+  >
+    {#each xTicks as tick (tick.v)}
+      <line x1={tick.x} y1={PAD_T} x2={tick.x} y2={VH - PAD_B} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+      <text x={tick.x} y={VH - PAD_B + 12} fill="#6E7079" font-size="8" text-anchor="middle" font-family="inherit">{tick.v.toFixed(0)}</text>
+    {/each}
+    {#each reversedRidges as r (r.label)}
+      <line x1={PAD_L} y1={r.baselineY} x2={VW - PAD_R} y2={r.baselineY} stroke="rgba(255,255,255,0.08)" stroke-width="0.5" />
+      <path d={r.d} fill={r.color} opacity="0.45" />
+      <path d={r.d} fill="none" stroke={r.color} stroke-width="1.2" opacity="0.9" />
+    {/each}
+    {#each ridges as r, si (si)}
+      <text x={PAD_L - 4} y={r.baselineY - 2} fill="#A4A7B5" font-size="8" text-anchor="end" font-family="inherit">{r.label}</text>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/RowToggle.svelte

@@ -0,0 +1,19 @@
+<script context="module" lang="ts">
+  let counter = 0;
+</script>
+
+<script lang="ts">
+  import Toggle from './Toggle.svelte';
+  export let title: string;
+  export let description: string;
+  export let on: boolean = false;
+  const descId = `dash-ui-rowtoggle-${++counter}`;
+</script>
+
+<div class="row-toggle">
+  <div class="info">
+    <div class="t">{title}</div>
+    <div class="d" id={descId}>{description}</div>
+  </div>
+  <Toggle bind:on ariaLabel={title} ariaDescribedBy={descId} on:toggle />
+</div>

package/src/lib/components/SankeyDiagram.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  export interface SankeyLink { source: string; target: string; value: number; }
+  export interface SankeyNode { id: string; label: string; color?: string; }
+
+  export let nodes: SankeyNode[] = [];
+  export let links: SankeyLink[] = [];
+  export let height: number = 180;
+  export let ariaLabel: string = 'Sankey diagram';
+
+  const VW = 320;
+  const NODE_W = 10;
+  const NODE_GAP = 8;
+  const PAD = 16;
+  const PALETTE = ['#006FFF', '#00C875', '#A78BFA', '#F5A623', '#50B8E7', '#F04949'];
+
+  interface PositionedNode { id: string; label: string; color: string; x: number; y: number; h: number; side: 'left' | 'right'; }
+  interface PathData { d: string; color: string; }
+
+  $: ({ positioned, paths } = (() => {
+    if (!nodes.length || !links.length) return { positioned: [] as PositionedNode[], paths: [] as PathData[] };
+
+    const nodeMap = new Map(nodes.map((n, i) => [n.id, { ...n, color: n.color ?? PALETTE[i % PALETTE.length] }]));
+    const outflow = new Map<string, number>();
+    const inflow = new Map<string, number>();
+    for (const l of links) {
+      outflow.set(l.source, (outflow.get(l.source) ?? 0) + l.value);
+      inflow.set(l.target, (inflow.get(l.target) ?? 0) + l.value);
+    }
+
+    const leftIds = [...new Set(links.map(l => l.source))].filter(id => !inflow.has(id));
+    const rightIds = [...new Set(links.map(l => l.target))].filter(id => !outflow.has(id));
+    const totalFlow = links.reduce((s, l) => s + l.value, 0);
+
+    const leftAvailH = height - PAD * 2 - (leftIds.length - 1) * NODE_GAP;
+    const rightAvailH = height - PAD * 2 - (rightIds.length - 1) * NODE_GAP;
+
+    const positioned: PositionedNode[] = [];
+
+    let y = PAD;
+    for (const id of leftIds) {
+      const n = nodeMap.get(id)!;
+      const h = Math.max(4, (outflow.get(id) ?? 0) / totalFlow * leftAvailH);
+      positioned.push({ id, label: n.label, color: n.color, x: PAD, y, h, side: 'left' });
+      y += h + NODE_GAP;
+    }
+
+    y = PAD;
+    for (const id of rightIds) {
+      const n = nodeMap.get(id)!;
+      const h = Math.max(4, (inflow.get(id) ?? 0) / totalFlow * rightAvailH);
+      positioned.push({ id, label: n.label, color: n.color, x: VW - PAD - NODE_W, y, h, side: 'right' });
+      y += h + NODE_GAP;
+    }
+
+    const sourcePort = new Map<string, number>(positioned.filter(n => n.side === 'left').map(n => [n.id, n.y]));
+    const targetPort = new Map<string, number>(positioned.filter(n => n.side === 'right').map(n => [n.id, n.y]));
+
+    const paths: PathData[] = [];
+    for (const l of links) {
+      const srcNode = positioned.find(n => n.id === l.source);
+      const tgtNode = positioned.find(n => n.id === l.target);
+      if (!srcNode || !tgtNode) continue;
+
+      const lh = Math.max(1, l.value / totalFlow * leftAvailH);
+      const sy = sourcePort.get(l.source)!;
+      const ty = targetPort.get(l.target)!;
+      sourcePort.set(l.source, sy + lh);
+      targetPort.set(l.target, ty + lh);
+
+      const x1 = srcNode.x + NODE_W;
+      const x2 = tgtNode.x;
+      const cx = (x1 + x2) / 2;
+      const d = `M${x1},${sy.toFixed(1)} C${cx},${sy.toFixed(1)} ${cx},${ty.toFixed(1)} ${x2},${ty.toFixed(1)} L${x2},${(ty + lh).toFixed(1)} C${cx},${(ty + lh).toFixed(1)} ${cx},${(sy + lh).toFixed(1)} ${x1},${(sy + lh).toFixed(1)} Z`;
+      paths.push({ d, color: srcNode.color });
+    }
+
+    return { positioned, paths };
+  })());
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg viewBox="0 0 {VW} {height}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+    {#each paths as p, i (i)}
+      <path d={p.d} fill={p.color} fill-opacity="0.35" />
+    {/each}
+    {#each positioned as n (n.id)}
+      <g>
+        <rect x={n.x} y={n.y.toFixed(1)} width={NODE_W} height={n.h.toFixed(1)} fill={n.color} rx="2" />
+        <text
+          x={n.side === 'left' ? n.x + NODE_W + 5 : n.x - 5}
+          y={(n.y + n.h / 2 + 4).toFixed(1)}
+          text-anchor={n.side === 'left' ? 'start' : 'end'}
+          fill="#C8C9D0"
+          font-size="9"
+          font-family="inherit"
+        >{n.label}</text>
+      </g>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/ScatterPlot.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  export interface ScatterPoint {
+    x: number;
+    y: number;
+    color?: string;
+    r?: number;
+    key?: string;
+  }
+
+  export let points: ScatterPoint[] = [];
+  export let xRange: [number, number] | undefined = undefined;
+  export let yRange: [number, number] | undefined = undefined;
+  export let height: number = 160;
+  export let ariaLabel: string = 'Scatter plot';
+
+  const VW = 400;
+  const PAD = { t: 12, r: 8, b: 12, l: 8 };
+
+  $: xs = points.map((p) => p.x);
+  $: ys = points.map((p) => p.y);
+  $: x0 = xRange ? xRange[0] : xs.length ? Math.min(...xs) : 0;
+  $: x1 = xRange ? xRange[1] : xs.length ? Math.max(...xs) : 1;
+  $: y0 = yRange ? yRange[0] : ys.length ? Math.min(...ys) : 0;
+  $: y1 = yRange ? yRange[1] : ys.length ? Math.max(...ys) : 1;
+  $: xSpan = x1 - x0 || 1;
+  $: ySpan = y1 - y0 || 1;
+  $: chartW = VW - PAD.l - PAD.r;
+  $: chartH = height - PAD.t - PAD.b;
+
+  $: gridLines = [0.25, 0.5, 0.75].map((f) => ({
+    gx: (PAD.l + f * chartW).toFixed(1),
+    gy: (PAD.t + (1 - f) * chartH).toFixed(1),
+  }));
+
+  $: dots = points.map((p, i) => ({
+    cx: (PAD.l + ((p.x - x0) / xSpan) * chartW).toFixed(1),
+    cy: (PAD.t + chartH - ((p.y - y0) / ySpan) * chartH).toFixed(1),
+    r: p.r ?? 5,
+    color: p.color ?? '#006FFF',
+    key: p.key ?? String(i),
+  }));
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg viewBox="0 0 {VW} {height}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+    {#each gridLines as g}
+      <line x1={g.gx} y1={PAD.t} x2={g.gx} y2={PAD.t + chartH} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+      <line x1={PAD.l} y1={g.gy} x2={VW - PAD.r} y2={g.gy} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+    {/each}
+    {#each dots as d (d.key)}
+      <circle cx={d.cx} cy={d.cy} r={d.r} fill={d.color} fill-opacity="0.8" />
+    {/each}
+  </svg>
+</div>

package/src/lib/components/SearchBox.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import SearchIcon from '../icons/SearchIcon.svelte';
+  export let placeholder: string = '';
+  export let value: string = '';
+  export let ariaLabel: string = '';
+</script>
+
+<div class="search" role="search">
+  <span aria-hidden="true" style="display:inline-flex"><SearchIcon size={14} style="color:#6E7079" /></span>
+  <input type="search" {placeholder} aria-label={ariaLabel || placeholder} bind:value on:input on:change />
+</div>

package/src/lib/components/SegmentedControl.svelte

@@ -0,0 +1,51 @@
+<script context="module" lang="ts">
+  export interface SegmentOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import { tick } from 'svelte';
+
+  export let label: string;
+  export let options: SegmentOption[] = [];
+  export let value: string = options[0]?.value ?? '';
+
+  let root: HTMLDivElement;
+
+  async function handleKeyDown(e: KeyboardEvent) {
+    const enabled = options.filter((o) => !o.disabled);
+    const idx = enabled.findIndex((o) => o.value === value);
+    let next = -1;
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+      e.preventDefault();
+      next = (idx + 1) % enabled.length;
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      next = (idx - 1 + enabled.length) % enabled.length;
+    }
+    if (next !== -1) {
+      value = enabled[next].value;
+      await tick();
+      root?.querySelector<HTMLButtonElement>('button[tabindex="0"]')?.focus();
+    }
+  }
+</script>
+
+<div bind:this={root} role="radiogroup" aria-label={label} class="seg-ctrl" tabindex="-1" on:keydown={handleKeyDown}>
+  {#each options as opt (opt.value)}
+    <button
+      type="button"
+      role="radio"
+      aria-checked={value === opt.value}
+      disabled={opt.disabled}
+      tabindex={value === opt.value ? 0 : -1}
+      class="seg-ctrl__btn{value === opt.value ? ' seg-ctrl__btn--active' : ''}"
+      on:click={() => { value = opt.value; }}
+    >
+      {opt.label}
+    </button>
+  {/each}
+</div>