@w5-ui/svelte 0.1.0

package/src/lib/components/Toast.svelte

@@ -0,0 +1,52 @@
+<script context="module" lang="ts">
+  import { writable } from 'svelte/store';
+
+  export type ToastVariant = 'success' | 'info' | 'warn' | 'danger';
+
+  interface ToastItem {
+    id: string;
+    message: string;
+    variant: ToastVariant;
+  }
+
+  const store = writable<ToastItem[]>([]);
+  let seq = 0;
+
+  function dismiss(id: string) {
+    store.update((prev) => prev.filter((t) => t.id !== id));
+  }
+
+  export const toast = {
+    show(message: string, variant: ToastVariant = 'info') {
+      const id = String(++seq);
+      store.update((prev) => [...prev, { id, message, variant }]);
+      setTimeout(() => dismiss(id), 4000);
+    },
+    success: (msg: string) => toast.show(msg, 'success'),
+    warn: (msg: string) => toast.show(msg, 'warn'),
+    danger: (msg: string) => toast.show(msg, 'danger'),
+    info: (msg: string) => toast.show(msg, 'info'),
+  };
+</script>
+
+<script lang="ts">
+  // store and dismiss are in module scope — accessible in template via $store
+</script>
+
+<div class="toaster" role="log" aria-label="Notifications" aria-live="polite" aria-atomic="false">
+  {#each $store as item (item.id)}
+    <div class="toast toast-{item.variant}" role={item.variant === 'danger' ? 'alert' : 'status'}>
+      <span class="toast-msg">{item.message}</span>
+      <button
+        type="button"
+        class="toast-dismiss icon-btn"
+        on:click={() => dismiss(item.id)}
+        aria-label="Dismiss notification"
+      >
+        <svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false">
+          <path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+      </button>
+    </div>
+  {/each}
+</div>

package/src/lib/components/Toggle.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  export let on: boolean = false;
+  export let ariaLabel: string | undefined = undefined;
+  export let ariaDescribedBy: string | undefined = undefined;
+  const dispatch = createEventDispatcher<{ toggle: boolean }>();
+  function flip() {
+    on = !on;
+    dispatch('toggle', on);
+  }
+</script>
+
+<button
+  type="button"
+  role="switch"
+  aria-checked={on}
+  aria-label={ariaLabel}
+  aria-describedby={ariaDescribedBy}
+  class="toggle-track {on ? 'on' : 'off'}"
+  on:click={flip}
+>
+  <span class="knob"></span>
+</button>

package/src/lib/components/ToggleGroup.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let options: { value: string; label: string; disabled?: boolean }[] = [];
+  export let value: string[] = [];
+  export let ariaLabel: string = '';
+  export let size: 'sm' | 'md' = 'md';
+  let klass: string = '';
+  export { klass as class };
+
+  const dispatch = createEventDispatcher<{ change: string[] }>();
+
+  function toggle(v: string) {
+    const next = value.includes(v) ? value.filter((x) => x !== v) : [...value, v];
+    value = next;
+    dispatch('change', next);
+  }
+</script>
+
+<div role="group" aria-label={ariaLabel} class="tg-group tg-group--{size}{klass ? ` ${klass}` : ''}">
+  {#each options as opt}
+    <button
+      type="button"
+      aria-pressed={value.includes(opt.value)}
+      disabled={opt.disabled}
+      class="tg-btn{value.includes(opt.value) ? ' tg-btn--on' : ''}"
+      on:click={() => toggle(opt.value)}
+    >
+      {opt.label}
+    </button>
+  {/each}
+</div>

package/src/lib/components/Tooltip.svelte

@@ -0,0 +1,16 @@
+<script context="module" lang="ts">
+  let counter = 0;
+</script>
+
+<script lang="ts">
+  export let label: string;
+  export let placement: 'top' | 'bottom' | 'left' | 'right' = 'top';
+  let className = '';
+  export { className as class };
+  const id = `dash-ui-tooltip-${++counter}`;
+</script>
+
+<span class="tooltip-wrapper tooltip-{placement} {className}">
+  <span class="tooltip-trigger" aria-describedby={id}><slot /></span>
+  <span {id} role="tooltip" class="tooltip-content">{label}</span>
+</span>

package/src/lib/components/Topbar.svelte

@@ -0,0 +1,63 @@
+<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';
+  import CaretIcon from '../icons/CaretIcon.svelte';
+  import SearchIcon from '../icons/SearchIcon.svelte';
+  import UpdatesIcon from '../icons/UpdatesIcon.svelte';
+  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 }>();
+</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" />
+  </button>
+  <nav class="app-tabs" aria-label="Apps">
+    {#each apps as a (a.id)}
+      <button
+        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); }}
+      >
+        <img src={appLogos[a.logo]} alt="" width="24" height="24" />
+        <span class="label">{a.label}</span>
+      </button>
+    {/each}
+  </nav>
+  <div class="topbar-spacer"></div>
+  <div class="topbar-right">
+    <IconButton aria-label="Search" title="Search"><SearchIcon /></IconButton>
+    <IconButton aria-label="Updates" title="Updates"><UpdatesIcon /></IconButton>
+    <IconButton
+      aria-label={notificationCount > 0 ? `Notifications, ${notificationCount} new` : 'Notifications'}
+      title="Notifications"
+      style="position:relative;"
+    >
+      <BellIcon />
+      {#if notificationCount > 0}
+        <span aria-hidden="true" style="position:absolute;top:6px;right:6px;width:6px;height:6px;background:#F03A3A;border-radius:50%;border:1.5px solid #0A0A0B;"></span>
+      {/if}
+    </IconButton>
+    <IconButton aria-label="Help" title="Help"><HelpIcon /></IconButton>
+    <Avatar initials={initials} size="sm" alt="Account, {initials}" />
+  </div>
+</header>

package/src/lib/components/TransferList.svelte

@@ -0,0 +1,184 @@
+<script context="module" lang="ts">
+  export interface TransferListItem {
+    id: string;
+    label: string;
+    description?: string;
+  }
+</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 };
+
+  const dispatch = createEventDispatcher<{ change: { source: TransferListItem[]; target: TransferListItem[] } }>();
+
+  let selSrc = new Set<string>();
+  let selTgt = new Set<string>();
+  let focSrc = 0;
+  let focTgt = 0;
+  let srcEls: (HTMLLIElement | null)[] = [];
+  let tgtEls: (HTMLLIElement | null)[] = [];
+
+  function commit() {
+    dispatch('change', { source, target });
+  }
+
+  function moveRight(ids: Set<string>) {
+    if (!ids.size) return;
+    const moving = source.filter((i) => ids.has(i.id));
+    source = source.filter((i) => !ids.has(i.id));
+    target = [...target, ...moving];
+    selSrc = new Set();
+    focSrc = 0;
+    commit();
+  }
+
+  function moveLeft(ids: Set<string>) {
+    if (!ids.size) return;
+    const moving = target.filter((i) => ids.has(i.id));
+    target = target.filter((i) => !ids.has(i.id));
+    source = [...source, ...moving];
+    selTgt = new Set();
+    focTgt = 0;
+    commit();
+  }
+
+  function toggleSrc(id: string) {
+    const n = new Set(selSrc);
+    n.has(id) ? n.delete(id) : n.add(id);
+    selSrc = n;
+  }
+
+  function toggleTgt(id: string) {
+    const n = new Set(selTgt);
+    n.has(id) ? n.delete(id) : n.add(id);
+    selTgt = n;
+  }
+
+  function srcKey(e: KeyboardEvent) {
+    if (!source.length) return;
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      focSrc = Math.min(focSrc + 1, source.length - 1);
+      srcEls[focSrc]?.focus();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      focSrc = Math.max(focSrc - 1, 0);
+      srcEls[focSrc]?.focus();
+    } else if (e.key === ' ') {
+      e.preventDefault();
+      const item = source[focSrc];
+      if (item) toggleSrc(item.id);
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      moveRight(selSrc);
+    }
+  }
+
+  function tgtKey(e: KeyboardEvent) {
+    if (!target.length) return;
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      focTgt = Math.min(focTgt + 1, target.length - 1);
+      tgtEls[focTgt]?.focus();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      focTgt = Math.max(focTgt - 1, 0);
+      tgtEls[focTgt]?.focus();
+    } else if (e.key === ' ') {
+      e.preventDefault();
+      const item = target[focTgt];
+      if (item) toggleTgt(item.id);
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      moveLeft(selTgt);
+    }
+  }
+</script>
+
+<div class="tl {className}">
+  <div class="tl__panel">
+    <div class="tl__header">
+      {sourceLabel} <span class="tl__count">{source.length}</span>
+    </div>
+    <ul
+      role="listbox"
+      aria-label={sourceLabel}
+      aria-multiselectable="true"
+      class="tl__list"
+      on:keydown={srcKey}
+    >
+      {#if source.length === 0}
+        <li class="tl__empty" role="option" aria-selected="false" aria-disabled="true">Empty</li>
+      {:else}
+        {#each source as item, i (item.id)}
+          <li
+            bind:this={srcEls[i]}
+            role="option"
+            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); } }}
+          >
+            <span class="tl__item-label">{item.label}</span>
+            {#if item.description}<span class="tl__item-desc">{item.description}</span>{/if}
+          </li>
+        {/each}
+      {/if}
+    </ul>
+  </div>
+
+  <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>
+    <button type="button" class="tl__btn" aria-label="Move selected to {targetLabel}"
+      disabled={selSrc.size === 0}
+      on:click={() => 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>
+    <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>
+  </div>
+
+  <div class="tl__panel">
+    <div class="tl__header">
+      {targetLabel} <span class="tl__count">{target.length}</span>
+    </div>
+    <ul
+      role="listbox"
+      aria-label={targetLabel}
+      aria-multiselectable="true"
+      class="tl__list"
+      on:keydown={tgtKey}
+    >
+      {#if target.length === 0}
+        <li class="tl__empty" role="option" aria-selected="false" aria-disabled="true">Empty</li>
+      {:else}
+        {#each target as item, i (item.id)}
+          <li
+            bind:this={tgtEls[i]}
+            role="option"
+            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); } }}
+          >
+            <span class="tl__item-label">{item.label}</span>
+            {#if item.description}<span class="tl__item-desc">{item.description}</span>{/if}
+          </li>
+        {/each}
+      {/if}
+    </ul>
+  </div>
+</div>

package/src/lib/components/TreeItem.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  export interface TreeNode {
+    id: string;
+    label: string;
+    meta?: string;
+    children?: TreeNode[];
+  }
+
+  export let node: TreeNode;
+  export let expanded: Set<string>;
+  export let selected: string | undefined;
+  export let focusedId: string;
+
+  $: hasChildren = !!node.children?.length;
+  $: isExpanded = expanded.has(node.id);
+  $: isSelected = selected === node.id;
+</script>
+
+<li
+  role="treeitem"
+  aria-expanded={hasChildren ? isExpanded : undefined}
+  aria-selected={isSelected}
+  tabindex={focusedId === node.id ? 0 : -1}
+  data-tree-id={node.id}
+  class="tree__item"
+>
+  <div class="tree__row{isSelected ? ' tree__row--selected' : ''}">
+    {#if hasChildren}
+      <svg
+        class="tree__chevron{isExpanded ? ' tree__chevron--open' : ''}"
+        viewBox="0 0 12 12"
+        fill="none"
+        aria-hidden="true"
+      >
+        <path
+          d="M4 2l4 4-4 4"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    {:else}
+      <span class="tree__indent" aria-hidden="true"></span>
+    {/if}
+    <span class="tree__label">{node.label}</span>
+    {#if node.meta}<span class="tree__meta">{node.meta}</span>{/if}
+  </div>
+  {#if hasChildren && isExpanded}
+    <ul role="group" class="tree__group">
+      {#each node.children as child (child.id)}
+        <svelte:self
+          node={child}
+          {expanded}
+          {selected}
+          {focusedId}
+        />
+      {/each}
+    </ul>
+  {/if}
+</li>

package/src/lib/components/TreeMap.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  export interface TreeMapNode {
+    label: string;
+    value: number;
+    color?: string;
+  }
+
+  export let nodes: TreeMapNode[] = [];
+  export let height: number = 160;
+  export let ariaLabel: string = 'Treemap chart';
+
+  const VW = 320;
+  const PAD = 4;
+  const GAP = 2;
+  const PALETTE = ['#006FFF', '#00C875', '#F04949', '#A78BFA', '#F5A623', '#50B8E7'];
+
+  interface LayoutRect {
+    x: number; y: number; w: number; h: number;
+    label: string; value: number; color: string;
+  }
+
+  function layout(
+    ns: { label: string; value: number; color: string }[],
+    x: number, y: number, w: number, h: number
+  ): LayoutRect[] {
+    if (!ns.length) return [];
+    if (ns.length === 1) return [{ x, y, w: Math.max(w, 0), h: Math.max(h, 0), ...ns[0] }];
+    const total = ns.reduce((s, n) => s + n.value, 0);
+    let acc = 0;
+    let split = ns.length - 1;
+    for (let i = 0; i < ns.length - 1; i++) {
+      acc += ns[i].value;
+      if (acc / total >= 0.5) { split = i + 1; break; }
+    }
+    const ratio = ns.slice(0, split).reduce((s, n) => s + n.value, 0) / total;
+    if (w > h) {
+      const w1 = Math.max((w - GAP) * ratio, 0);
+      return [...layout(ns.slice(0, split), x, y, w1, h), ...layout(ns.slice(split), x + w1 + GAP, y, Math.max(w - w1 - GAP, 0), h)];
+    }
+    const h1 = Math.max((h - GAP) * ratio, 0);
+    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 = (() => {
+    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%;">
+  <svg viewBox="0 0 {VW} {height}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+    {#each rects as r, i (i)}
+      {@const showLabel = r.w >= 36 && r.h >= 22}
+      {@const fs = Math.min(10, Math.max(7, Math.floor(r.w / 6)))}
+      <g>
+        <rect
+          x={r.x.toFixed(1)}
+          y={r.y.toFixed(1)}
+          width={r.w.toFixed(1)}
+          height={r.h.toFixed(1)}
+          fill={r.color}
+          fill-opacity="0.85"
+          rx="3"
+        />
+        {#if showLabel}
+          <text
+            x={(r.x + r.w / 2).toFixed(1)}
+            y={(r.y + r.h / 2 - 4).toFixed(1)}
+            text-anchor="middle"
+            fill="#fff"
+            font-size={fs}
+            font-family="inherit"
+            font-weight="600"
+          >{r.label}</text>
+          <text
+            x={(r.x + r.w / 2).toFixed(1)}
+            y={(r.y + r.h / 2 + 9).toFixed(1)}
+            text-anchor="middle"
+            fill="rgba(255,255,255,0.65)"
+            font-size={Math.max(fs - 1, 7)}
+            font-family="inherit"
+          >{r.value}</text>
+        {/if}
+      </g>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/TreeView.svelte

@@ -0,0 +1,130 @@
+<script context="module" lang="ts">
+  export interface TreeNode {
+    id: string;
+    label: string;
+    meta?: string;
+    children?: TreeNode[];
+  }
+</script>
+
+<script lang="ts">
+  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 = '';
+
+  let expanded = new Set<string>(defaultExpanded);
+  let focusedId: string = nodes[0]?.id ?? '';
+  let rootEl: HTMLUListElement;
+
+  function visibleIds(list: TreeNode[]): string[] {
+    const ids: string[] = [];
+    function walk(ns: TreeNode[]) {
+      for (const n of ns) {
+        ids.push(n.id);
+        if (n.children?.length && expanded.has(n.id)) walk(n.children);
+      }
+    }
+    walk(list);
+    return ids;
+  }
+
+  function findNode(id: string, list: TreeNode[]): TreeNode | undefined {
+    for (const n of list) {
+      if (n.id === id) return n;
+      if (n.children) {
+        const found = findNode(id, n.children);
+        if (found) return found;
+      }
+    }
+  }
+
+  async function moveFocus(id: string) {
+    focusedId = id;
+    await tick();
+    rootEl?.querySelector<HTMLElement>(`[data-tree-id="${id}"]`)?.focus();
+  }
+
+  function toggle(id: string) {
+    if (expanded.has(id)) expanded.delete(id);
+    else expanded.add(id);
+    expanded = expanded;
+  }
+
+  function handleFocusin(e: FocusEvent) {
+    const el = (e.target as HTMLElement).closest('[data-tree-id]');
+    if (el) focusedId = el.getAttribute('data-tree-id') ?? focusedId;
+  }
+
+  function handleClick(e: MouseEvent) {
+    const row = (e.target as HTMLElement).closest('.tree__row');
+    if (!row) return;
+    const item = row.closest('[data-tree-id]');
+    if (!item) return;
+    const id = item.getAttribute('data-tree-id');
+    if (!id) return;
+    selected = id;
+    focusedId = id;
+    const node = findNode(id, nodes);
+    if (node?.children?.length) toggle(id);
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    const el = (e.target as HTMLElement).closest('[data-tree-id]');
+    if (!el) return;
+    const id = el.getAttribute('data-tree-id');
+    if (!id) return;
+
+    const visible = visibleIds(nodes);
+    const idx = visible.indexOf(id);
+    const node = findNode(id, nodes);
+    const hasChildren = !!node?.children?.length;
+    const isNodeExpanded = expanded.has(id);
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      const next = visible[idx + 1];
+      if (next) moveFocus(next);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      const prev = visible[idx - 1];
+      if (prev) moveFocus(prev);
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      if (hasChildren && !isNodeExpanded) toggle(id);
+      else if (hasChildren && isNodeExpanded) moveFocus(node!.children![0]!.id);
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      if (hasChildren && isNodeExpanded) toggle(id);
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      if (visible[0]) moveFocus(visible[0]);
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      const last = visible[visible.length - 1];
+      if (last) moveFocus(last);
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      selected = id;
+      focusedId = id;
+    }
+  }
+</script>
+
+<ul
+  bind:this={rootEl}
+  role="tree"
+  aria-label={label}
+  class={`tree${className ? ' ' + className : ''}`}
+  on:keydown={handleKeydown}
+  on:focusin={handleFocusin}
+  on:click={handleClick}
+>
+  {#each nodes as node (node.id)}
+    <TreeItem {node} {expanded} {selected} {focusedId} />
+  {/each}
+</ul>