@w5-ui/svelte 0.1.0

package/src/lib/components/Histogram.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  export interface HistogramBin {
+    x0: number;
+    x1: number;
+    count: number;
+  }
+
+  export let bins: HistogramBin[] = [];
+  export let height: number = 160;
+  export let color: string = '#006FFF';
+  export let xUnit: string = '';
+  export let ariaLabel: string = 'Histogram';
+
+  const VW = 320;
+  const PAD_L = 36;
+  const PAD_R = 8;
+  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;
+
+  $: yTicks = [0, 1, 2, 3].map((i) => Math.round((maxCount * i) / 3));
+
+  $: xStep = bins.length <= 6 ? 1 : Math.ceil(bins.length / 5);
+  $: xLabels = (() => {
+    const labels: { x: number; label: string }[] = [];
+    bins.forEach((bin, i) => {
+      if (i % xStep === 0) {
+        labels.push({ x: PAD_L + i * barW, label: String(bin.x0) + xUnit });
+      }
+    });
+    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;
+  }
+  function by(count: number): number {
+    return PAD_T + PLOT_H - bh(count);
+  }
+</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 yTicks as tick, i (i)}
+      {@const ty = PAD_T + PLOT_H - (tick / maxCount) * PLOT_H}
+      <g>
+        <line
+          x1={PAD_L} y1={ty}
+          x2={PAD_L + PLOT_W} y2={ty}
+          stroke="rgba(255,255,255,0.06)" stroke-width="1"
+        />
+        <text
+          x={PAD_L - 4} y={ty + 4}
+          fill="#6E7079" font-size="9" text-anchor="end" font-family="inherit"
+        >{tick}</text>
+      </g>
+    {/each}
+
+    {#each bins as bin, i (i)}
+      <rect
+        x={PAD_L + i * barW + 1}
+        y={by(bin.count)}
+        width={Math.max(barW - 2, 1)}
+        height={bh(bin.count)}
+        fill={color}
+        opacity="0.85"
+      />
+    {/each}
+
+    <line
+      x1={PAD_L} y1={PAD_T + PLOT_H}
+      x2={PAD_L + PLOT_W} y2={PAD_T + PLOT_H}
+      stroke="rgba(255,255,255,0.12)" stroke-width="1"
+    />
+
+    {#each xLabels as lbl, i (i)}
+      <text
+        x={lbl.x} y={PAD_T + PLOT_H + 14}
+        fill="#6E7079" font-size="9" text-anchor="middle" font-family="inherit"
+      >{lbl.label}</text>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/HorizonChart.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  export interface HorizonSeries {
+    label: string;
+    values: number[];
+    color?: string;
+  }
+
+  export let series: HorizonSeries[] = [];
+  export let xLabels: string[] | undefined = undefined;
+  export let bands = 3;
+  export let ariaLabel = 'Horizon chart';
+
+  const LABEL_W = 72;
+  const ROW_H = 24;
+  const ROW_GAP = 3;
+  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);
+
+  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) => {
+    const rowY = si * (ROW_H + ROW_GAP);
+    const color = s.color ?? '#006FFF';
+    const rowBands: Band[] = [];
+    s.values.forEach((v, ti) => {
+      for (let k = 0; k < bands; k++) {
+        const lo = k * step;
+        const fill = Math.min(Math.max(v - lo, 0), step) / step;
+        if (fill <= 0) continue;
+        const alpha = 0.25 + 0.3 * k;
+        const rH = fill * ROW_H;
+        rowBands.push({ x: LABEL_W + ti * colW, y: rowY + ROW_H - rH, w: Math.max(colW - 0.5, 0.5), h: rH, alpha, color });
+      }
+    });
+    return { rowY, color, label: s.label, bands: rowBands } as Row;
+  });
+
+  $: xTickPositions = 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}
+  <div role="img" aria-label={ariaLabel} style="width:100%;">
+    <svg viewBox="0 0 {W} {totalH}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+      {#each rows as row, si (si)}
+        <text x={LABEL_W - 6} y={row.rowY + ROW_H / 2 + 4} text-anchor="end" fill="#C8C9D0" font-size="9" font-family="inherit">{row.label}</text>
+        <rect x={LABEL_W} y={row.rowY} width={chartW} height={ROW_H} fill="rgba(255,255,255,0.04)" rx="2" />
+        {#each row.bands as b, bi (bi)}
+          <rect x={b.x} y={b.y} width={b.w} height={b.h} fill={b.color} opacity={b.alpha} rx="1" />
+        {/each}
+      {/each}
+      {#each xTickPositions as tick, i (i)}
+        <text x={tick.x} y={totalH} text-anchor={tick.anchor} fill="#6E7079" font-size="8" font-family="inherit">{tick.label}</text>
+      {/each}
+    </svg>
+  </div>
+{/if}

package/src/lib/components/HoverCard.svelte

@@ -0,0 +1,45 @@
+<script context="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 };
+
+  const id = `dash-ui-hovercard-${++counter}`;
+  let open = false;
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  function show() {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => { open = true; }, delay);
+  }
+
+  function hide() {
+    if (timer) clearTimeout(timer);
+    open = false;
+  }
+
+  onDestroy(() => { if (timer) clearTimeout(timer); });
+</script>
+
+<div
+  role="group"
+  class="hovercard-wrapper hovercard-{placement} {className}"
+  on:mouseenter={show}
+  on:mouseleave={hide}
+  on:focusin={show}
+  on:focusout={hide}
+>
+  <div class="hovercard-trigger" aria-describedby={open ? id : undefined}>
+    <slot name="trigger" />
+  </div>
+  {#if open}
+    <div {id} role="tooltip" class="hovercard">
+      <slot name="content" />
+    </div>
+  {/if}
+</div>

package/src/lib/components/IPInput.svelte

@@ -0,0 +1,103 @@
+<script context="module" lang="ts">
+  let counter = 0;
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let label: string | undefined = undefined;
+  export let value: string = '0.0.0.0';
+  export let disabled: boolean = false;
+  let className = '';
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{ change: string }>();
+  const uid = `dash-ui-ip-${++counter}`;
+
+  function clampOctet(s: string): string {
+    if (s === '') return s;
+    const n = Number(s);
+    if (isNaN(n)) return s;
+    return String(Math.min(255, Math.max(0, n)));
+  }
+
+  function parseIP(ip: string): [string, string, string, string] {
+    const parts = ip.split('.');
+    return [parts[0] ?? '0', parts[1] ?? '0', parts[2] ?? '0', parts[3] ?? '0'];
+  }
+
+  let octets: [string, string, string, string] = parseIP(value);
+  let inputs: (HTMLInputElement | null)[] = [null, null, null, null];
+
+  function focusAt(i: number) {
+    const el = inputs[i];
+    if (el) { el.focus(); el.select(); }
+  }
+
+  function commitOctet(i: number, raw: string) {
+    if (!/^\d{0,3}$/.test(raw)) return;
+    octets[i] = clampOctet(raw);
+    octets = octets as [string, string, string, string];
+    value = octets.join('.');
+    dispatch('change', value);
+    if (raw.length === 3 && i < 3) setTimeout(() => focusAt(i + 1), 0);
+  }
+
+  function handleKey(i: number, e: KeyboardEvent) {
+    const el = inputs[i]!;
+    if (e.key === '.') {
+      e.preventDefault();
+      if (i < 3) focusAt(i + 1);
+    } else if (e.key === 'ArrowRight' && el.selectionStart === el.value.length) {
+      if (i < 3) { e.preventDefault(); focusAt(i + 1); }
+    } else if (e.key === 'ArrowLeft' && el.selectionStart === 0) {
+      if (i > 0) { e.preventDefault(); focusAt(i - 1); }
+    } else if (e.key === 'Backspace' && el.value === '' && i > 0) {
+      e.preventDefault(); focusAt(i - 1);
+    }
+  }
+
+  function handlePaste(e: ClipboardEvent) {
+    const text = e.clipboardData?.getData('text').trim() ?? '';
+    if (/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(text)) {
+      e.preventDefault();
+      octets = text.split('.').map(clampOctet) as [string, string, string, string];
+      value = octets.join('.');
+      dispatch('change', value);
+      setTimeout(() => focusAt(3), 0);
+    }
+  }
+</script>
+
+<div class="ip-input-wrapper {className}">
+  {#if label}
+    <label for="{uid}-0" class="ip-input__label">{label}</label>
+  {/if}
+  <div class="ip-input{disabled ? ' ip-input--disabled' : ''}" role="group" aria-label={label ?? 'IP address'}>
+    {#each octets as oct, i}
+      <input
+        bind:this={inputs[i]}
+        id={i === 0 ? `${uid}-0` : undefined}
+        type="text"
+        inputmode="numeric"
+        pattern="[0-9]*"
+        role="spinbutton"
+        aria-label="Octet {i + 1} of 4"
+        aria-valuenow={oct === '' ? 0 : Number(oct)}
+        aria-valuemin={0}
+        aria-valuemax={255}
+        value={oct}
+        {disabled}
+        maxlength={3}
+        class="ip-input__octet"
+        on:input={(e) => commitOctet(i, e.currentTarget.value)}
+        on:keydown={(e) => handleKey(i, e)}
+        on:paste={handlePaste}
+        on:focus={(e) => e.currentTarget.select()}
+      />
+      {#if i < 3}
+        <span class="ip-input__dot" aria-hidden="true">.</span>
+      {/if}
+    {/each}
+  </div>
+</div>

package/src/lib/components/IcicleChart.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  export interface IcicleNode {
+    label: string;
+    value?: number;
+    color?: string;
+    children?: IcicleNode[];
+  }
+
+  export let root: IcicleNode;
+  export let height = 160;
+  export let ariaLabel = 'Icicle chart';
+
+  const PALETTE = ['#FF7B7B', '#F5A623', '#A78BFA', '#34D399', '#006FFF', '#00C875', '#FB923C'];
+  const VW = 340;
+  const GAP = 1.5;
+
+  interface FlatCell {
+    x: number; y: number; w: number; h: number;
+    label: string; color: string; depth: number;
+  }
+
+  function nodeValue(node: IcicleNode): number {
+    if (node.children?.length) return node.children.reduce((s, c) => s + nodeValue(c), 0);
+    return node.value ?? 1;
+  }
+
+  function treeDepth(node: IcicleNode): number {
+    if (!node.children?.length) return 0;
+    return 1 + Math.max(...node.children.map(treeDepth));
+  }
+
+  function flatten(node: IcicleNode, x: number, y: number, w: number, levelH: number, depth: number, inheritColor: string, colorIdx: { n: number }): FlatCell[] {
+    let color = node.color ?? '';
+    if (!color) {
+      if (depth === 0) color = 'rgba(255,255,255,0.10)';
+      else if (depth === 1) color = PALETTE[colorIdx.n++ % PALETTE.length];
+      else color = inheritColor;
+    }
+    const cells: FlatCell[] = [{ x, y, w, h: levelH, label: node.label, color, depth }];
+    if (node.children?.length && w > 0) {
+      const total = nodeValue(node);
+      let cx = x;
+      for (const child of node.children) {
+        const cw = total > 0 ? (nodeValue(child) / total) * w : 0;
+        cells.push(...flatten(child, cx, y + levelH, cw, levelH, depth + 1, color, colorIdx));
+        cx += cw;
+      }
+    }
+    return cells;
+  }
+
+  $: depth = treeDepth(root);
+  $: levelH = height / (depth + 1);
+  $: cells = flatten(root, 0, 0, VW, levelH, 0, PALETTE[0], { n: 0 });
+</script>
+
+{#if cells.length > 0}
+  <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 cells as cell, i (i)}
+        {#if cell.w > GAP * 2}
+          <g>
+            <rect
+              x={cell.x + GAP / 2}
+              y={cell.y + GAP / 2}
+              width={Math.max(0, cell.w - GAP)}
+              height={Math.max(0, cell.h - GAP)}
+              fill={cell.color}
+              fill-opacity={cell.depth === 0 ? 1 : cell.depth === 1 ? 0.7 : 0.85}
+              rx={2}
+            />
+            {#if cell.w > 32}
+              <text
+                x={cell.x + cell.w / 2}
+                y={cell.y + cell.h / 2 + 4}
+                text-anchor="middle"
+                font-size={Math.min(10, (cell.w - GAP) / 6, cell.h - 4)}
+                fill="#fff"
+                font-family="inherit"
+              >{cell.label}</text>
+            {/if}
+          </g>
+        {/if}
+      {/each}
+    </svg>
+  </div>
+{/if}

package/src/lib/components/IconButton.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let title: string | undefined = undefined;
+  export let type: 'button' | 'submit' | 'reset' = 'button';
+  let className = '';
+  export { className as class };
+  export let style: string = '';
+</script>
+
+<button
+  {type}
+  class="icon-btn {className}"
+  {title}
+  {style}
+  {...$$restProps}
+  aria-label={$$restProps['aria-label'] ?? title}
+  on:click
+>
+  <slot />
+</button>

package/src/lib/components/InlineEdit.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+
+  export let value: string;
+  export let onconfirm: (v: string) => void;
+  export let label: string;
+  export let placeholder: string = '';
+
+  let editing = false;
+  let draft = value;
+  let inputEl: HTMLInputElement;
+  let editBtnEl: HTMLButtonElement;
+
+  async function startEdit() {
+    draft = value;
+    editing = true;
+    await tick();
+    inputEl?.focus();
+  }
+
+  async function confirm() {
+    const trimmed = draft.trim();
+    if (trimmed) onconfirm(trimmed);
+    editing = false;
+    await tick();
+    editBtnEl?.focus();
+  }
+
+  async function cancel() {
+    draft = value;
+    editing = false;
+    await tick();
+    editBtnEl?.focus();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') { e.preventDefault(); confirm(); }
+    if (e.key === 'Escape') { e.preventDefault(); cancel(); }
+  }
+</script>
+
+{#if editing}
+  <span class="ie ie--editing">
+    <input
+      bind:this={inputEl}
+      class="ie__input"
+      aria-label="Edit {label}"
+      bind:value={draft}
+      {placeholder}
+      on:keydown={handleKeydown}
+    />
+    <button type="button" class="ie__btn ie__btn--save" aria-label="Save" on:click={confirm}>
+      <svg viewBox="0 0 14 14" width="12" height="12" fill="none" aria-hidden="true" focusable="false">
+        <path d="M2.5 7.5l3.5 3.5L12 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </button>
+    <button type="button" class="ie__btn ie__btn--cancel" aria-label="Cancel" on:click={cancel}>
+      <svg viewBox="0 0 14 14" width="12" height="12" fill="none" aria-hidden="true" focusable="false">
+        <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+      </svg>
+    </button>
+  </span>
+{:else}
+  <span class="ie">
+    <span class="ie__text">{value}</span>
+    <button bind:this={editBtnEl} type="button" class="ie__edit" aria-label="Edit {label}" on:click={startEdit}>
+      <svg viewBox="0 0 14 14" width="12" height="12" fill="none" aria-hidden="true" focusable="false">
+        <path d="M9.5 2l2.5 2.5-8 8H1.5v-2.5l8-8z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </button>
+  </span>
+{/if}

package/src/lib/components/Input.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  export let value: string = '';
+  export let placeholder: string = '';
+  export let type: string = 'text';
+  let className = '';
+  export { className as class };
+  export let style: string = '';
+</script>
+
+{#if type === 'text'}
+  <input class="input {className}" type="text" {placeholder} bind:value {style} on:input on:change on:focus on:blur />
+{:else if type === 'password'}
+  <input class="input {className}" type="password" {placeholder} bind:value {style} on:input on:change on:focus on:blur />
+{:else if type === 'number'}
+  <input class="input {className}" type="number" {placeholder} bind:value {style} on:input on:change on:focus on:blur />
+{:else}
+  <input class="input {className}" {type} {placeholder} value={value} {style} on:input on:change on:focus on:blur />
+{/if}

package/src/lib/components/InputGroup.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  export let prefix: string | undefined = undefined;
+  export let suffix: string | undefined = undefined;
+</script>
+
+<div class="input-group">
+  {#if prefix !== undefined}
+    <span class="input-group-addon input-group-addon--prefix">{prefix}</span>
+  {/if}
+  <slot />
+  {#if suffix !== undefined}
+    <span class="input-group-addon input-group-addon--suffix">{suffix}</span>
+  {/if}
+</div>

package/src/lib/components/JsonViewer.svelte

@@ -0,0 +1,15 @@
+<script context="module" lang="ts">
+  export type { JsVal } from './JsonViewerNode.svelte';
+</script>
+
+<script lang="ts">
+  import JsonViewerNode from './JsonViewerNode.svelte';
+  export let data: unknown;
+  export let label: string = 'JSON viewer';
+  export let defaultExpanded: boolean = true;
+  export let maxDepth: number = 3;
+</script>
+
+<div class="json-viewer" role="tree" aria-label={label}>
+  <JsonViewerNode v={data} depth={0} {maxDepth} startOpen={defaultExpanded} />
+</div>

package/src/lib/components/JsonViewerNode.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  export type JsVal = string | number | boolean | null | JsVal[] | { [k: string]: JsVal };
+  export let v: JsVal;
+  export let k: string | undefined = undefined;
+  export let depth = 0;
+  export let maxDepth = 3;
+  export let startOpen = true;
+
+  $: isArr = Array.isArray(v);
+  $: isObj = v !== null && typeof v === 'object';
+  $: expandable = isArr || isObj;
+
+  let open = startOpen && depth < maxDepth;
+
+  $: entries = isArr
+    ? (v as JsVal[]).map((item: JsVal, i: number) => ({ ek: String(i), ev: item, arrItem: true }))
+    : isObj
+    ? Object.entries(v as { [key: string]: JsVal }).map(([ek, ev]) => ({ ek, ev, arrItem: false }))
+    : [];
+  $: count = entries.length;
+  $: ob = isArr ? '[' : '{';
+  $: cb = isArr ? ']' : '}';
+  $: indent = depth * 14;
+</script>
+
+{#if !expandable}
+  <div role="treeitem" aria-selected="false" class="jv-row" style:padding-left="{indent}px">
+    {#if k != null}<span class="jv-key">"{k}"</span><span class="jv-colon">: </span>{/if}
+    {#if v === null}<span class="jv-null">null</span>
+    {:else if typeof v === 'string'}<span class="jv-string">"{v}"</span>
+    {:else if typeof v === 'number'}<span class="jv-number">{v}</span>
+    {:else}<span class="jv-boolean">{String(v)}</span>{/if}
+  </div>
+{:else}
+  <div role="treeitem" aria-selected="false" aria-expanded={open} class="jv-node">
+    <button
+      type="button"
+      class="jv-toggle-row"
+      on:click={() => (open = !open)}
+      aria-label="{open ? 'Collapse' : 'Expand'} {k ?? (isArr ? 'array' : 'object')}"
+      style:padding-left="{indent}px"
+    >
+      <span class="jv-caret" aria-hidden="true">{open ? '▾' : '▸'}</span>
+      {#if k != null}<span class="jv-key">"{k}"</span><span class="jv-colon">: </span>{/if}
+      <span class="jv-bracket">{ob}</span>
+      {#if !open}<span class="jv-count">&thinsp;{count}&thinsp;</span><span class="jv-bracket">{cb}</span>{/if}
+    </button>
+    {#if open}
+      <div role="group" class="jv-children">
+        {#each entries as { ek, ev, arrItem } (ek)}
+          <svelte:self v={ev} k={arrItem ? undefined : ek} depth={depth + 1} {maxDepth} {startOpen} />
+        {/each}
+        <div class="jv-row jv-close" style:padding-left="{indent}px">
+          <span class="jv-bracket">{cb}</span>
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}

package/src/lib/components/KVTable.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  export let rows: Array<{ label: string; value: string; valueColor?: string }> = [];
+  export let caption: string | undefined = undefined;
+</script>
+
+<table class="kv-table">
+  {#if caption}
+    <caption class="sr-only">{caption}</caption>
+  {/if}
+  <tbody>
+    {#each rows as { label, value, valueColor }}
+      <tr class="kv-table__row">
+        <th scope="row" class="kv-table__label">{label}</th>
+        <td class="kv-table__value" style={valueColor ? `color:${valueColor}` : undefined}>{value}</td>
+      </tr>
+    {/each}
+  </tbody>
+</table>