@stephen-netu/design-system 0.1.0

package/src/d0-data-viz/CheckpointPill.svelte

@@ -0,0 +1,297 @@
+<script lang="ts">
+  // CheckpointPill.svelte — Collapsible checkpoint indicator
+  // ADR: ui-timeline-checkpoint-bar-001 (Phase 1: Pill Component)
+  // Svelte 5 runes pattern — collapsed by default, expands to full timeline
+
+  import type { Checkpoint } from './checkpoint-types';
+  import { getCheckpointColor } from './checkpoint-types';
+  import CheckpointBar from './CheckpointBar.svelte';
+
+  interface Props {
+    checkpoints: Checkpoint[];
+    currentSeqno: number;
+    previewSeqno?: number | null;
+    onCheckpointClick?: (checkpoint: Checkpoint) => void;
+    onCheckpointDoubleClick?: (checkpoint: Checkpoint) => void;
+    onExitPreview?: () => void;
+    'aria-label'?: string;
+  }
+
+  let {
+    checkpoints,
+    currentSeqno,
+    previewSeqno = null,
+    onCheckpointClick,
+    onCheckpointDoubleClick,
+    onExitPreview,
+    'aria-label': ariaLabel = 'Checkpoint navigation. Click to expand timeline.',
+  }: Props = $props();
+
+  // Collapsed state (default: true for minimal footprint)
+  let isExpanded = $state(false);
+
+  // Current checkpoint for display
+  let currentCheckpoint = $derived(
+    checkpoints.find((c) => c.seqno === currentSeqno) ?? checkpoints[checkpoints.length - 1]
+  );
+
+  // Display checkpoint (preview takes precedence)
+  let displayCheckpoint = $derived(
+    previewSeqno !== null
+      ? (checkpoints.find((c) => c.seqno === previewSeqno) ?? currentCheckpoint)
+      : currentCheckpoint
+  );
+
+  // Is in preview mode
+  let isPreview = $derived(previewSeqno !== null);
+
+  // Color for current component type
+  let componentColor = $derived(
+    displayCheckpoint ? getCheckpointColor(displayCheckpoint.componentType, true) : '#b87333'
+  );
+
+  // Toggle expanded state
+  function toggleExpanded() {
+    isExpanded = !isExpanded;
+  }
+
+  // Collapse when clicking outside (handled by parent or escape key)
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Escape' && isExpanded) {
+      event.preventDefault();
+      isExpanded = false;
+      // Also exit preview if active
+      if (previewSeqno !== null) {
+        onExitPreview?.();
+      }
+    }
+  }
+
+  // Handle checkpoint selection from expanded bar
+  function handleCheckpointClick(checkpoint: Checkpoint) {
+    onCheckpointClick?.(checkpoint);
+    // Keep expanded after selection for better UX
+  }
+
+  // Handle checkpoint activation (double click/Shift+Enter)
+  function handleCheckpointActivate(checkpoint: Checkpoint) {
+    onCheckpointDoubleClick?.(checkpoint);
+    // Collapse after activation
+    isExpanded = false;
+  }
+</script>
+
+<div
+  class="checkpoint-pill"
+  class:expanded={isExpanded}
+  class:preview={isPreview}
+  role="button"
+  tabindex="0"
+  aria-label={ariaLabel}
+  aria-expanded={isExpanded}
+  onclick={toggleExpanded}
+  onkeydown={(e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      toggleExpanded();
+    } else {
+      handleKeyDown(e);
+    }
+  }}
+>
+  {#if !isExpanded}
+    <!-- Collapsed Pill -->
+    <div class="pill-collapsed">
+      <span class="pill-icon" style="color: {componentColor}">
+        {#if isPreview}
+          ◎
+        {:else}
+          ◉
+        {/if}
+      </span>
+      <span class="pill-seqno">
+        {displayCheckpoint?.seqno ?? currentSeqno}
+      </span>
+      <span class="pill-arrow">▼</span>
+    </div>
+  {:else}
+    <!-- Expanded Bar -->
+    <div class="pill-expanded">
+      <div class="pill-header">
+        <span class="pill-label">Checkpoint Timeline</span>
+        <button
+          class="pill-close"
+          onclick={(e) => {
+            e.stopPropagation();
+            isExpanded = false;
+          }}
+          aria-label="Collapse timeline"
+        >
+          ▲
+        </button>
+      </div>
+      <div class="pill-content" onclick={(e) => e.stopPropagation()}>
+        <CheckpointBar
+          {checkpoints}
+          {currentSeqno}
+          {previewSeqno}
+          onCheckpointClick={handleCheckpointClick}
+          onCheckpointDoubleClick={handleCheckpointActivate}
+          {onExitPreview}
+          aria-label="Checkpoint timeline navigation"
+        />
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .checkpoint-pill {
+    display: inline-flex;
+    align-items: center;
+    background: rgba(26, 26, 26, 0.95);
+    border: 1px solid rgba(184, 115, 51, 0.3);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 200ms ease;
+    user-select: none;
+    outline: none;
+  }
+
+  .checkpoint-pill:hover {
+    border-color: rgba(184, 115, 51, 0.5);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .checkpoint-pill:focus-visible {
+    outline: 2px solid var(--color-accent, #b87333);
+    outline-offset: 2px;
+  }
+
+  .checkpoint-pill.preview {
+    border-color: rgba(184, 115, 51, 0.6);
+    animation: pulse-border 2s ease-in-out infinite;
+  }
+
+  @keyframes pulse-border {
+    0%, 100% {
+      box-shadow: 0 0 0 0 rgba(184, 115, 51, 0.2);
+    }
+    50% {
+      box-shadow: 0 0 0 4px rgba(184, 115, 51, 0.1);
+    }
+  }
+
+  /* Collapsed State */
+  .pill-collapsed {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.75rem;
+    height: 28px;
+  }
+
+  .pill-icon {
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  .pill-seqno {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--color-text-primary, #e8e0d0);
+    font-family: var(--font-mono, monospace);
+    min-width: 2ch;
+    text-align: center;
+  }
+
+  .pill-arrow {
+    font-size: 8px;
+    color: var(--color-text-muted, #808080);
+    transition: transform 200ms ease;
+  }
+
+  .checkpoint-pill:hover .pill-arrow {
+    color: var(--color-accent, #b87333);
+  }
+
+  /* Expanded State */
+  .checkpoint-pill.expanded {
+    display: block;
+    cursor: default;
+    border-radius: 6px;
+    min-width: 320px;
+  }
+
+  .pill-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid rgba(184, 115, 51, 0.2);
+  }
+
+  .pill-label {
+    font-size: 0.7rem;
+    font-weight: 500;
+    color: var(--color-text-secondary, #a09880);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .pill-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    background: transparent;
+    border: none;
+    color: var(--color-text-muted, #808080);
+    font-size: 10px;
+    cursor: pointer;
+    border-radius: 3px;
+    transition: all 150ms ease;
+  }
+
+  .pill-close:hover {
+    background: rgba(184, 115, 51, 0.1);
+    color: var(--color-accent, #b87333);
+  }
+
+  .pill-close:focus-visible {
+    outline: 1px solid var(--color-accent, #b87333);
+  }
+
+  .pill-content {
+    padding: 0.5rem;
+  }
+
+  /* Reduced Motion */
+  @media (prefers-reduced-motion: reduce) {
+    .checkpoint-pill,
+    .pill-arrow,
+    .pill-close {
+      transition: none;
+    }
+
+    .checkpoint-pill.preview {
+      animation: none;
+    }
+  }
+
+  /* High Contrast */
+  @media (prefers-contrast: high) {
+    .checkpoint-pill {
+      border-color: #fff;
+    }
+
+    .checkpoint-pill:hover {
+      border-color: #fff;
+    }
+
+    .pill-seqno {
+      color: #fff;
+    }
+  }
+</style>

package/src/d0-data-viz/MetricCard.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+  import type { MetricCardProps } from './types';
+
+  let {
+    label,
+    value,
+    unit,
+    trend,
+    trendValue,
+    size = 'default',
+  }: MetricCardProps = $props();
+
+  let trendArrow = $derived(
+    trend === 'up' ? '\u25B2' : trend === 'down' ? '\u25BC' : trend === 'flat' ? '\u2192' : ''
+  );
+</script>
+
+{#if size === 'inline'}
+  <span class="d0-metric-inline">
+    <span class="d0-metric-inline__label">{label}</span>
+    <span class="d0-metric-inline__value">{value}</span>
+    {#if unit}<span class="d0-metric-inline__unit">{unit}</span>{/if}
+    {#if trend && trendValue}
+      <span
+        class="d0-metric-inline__trend"
+        class:trend-up={trend === 'up'}
+        class:trend-down={trend === 'down'}
+        class:trend-flat={trend === 'flat'}
+      >{trendArrow} {trendValue}</span>
+    {/if}
+  </span>
+{:else}
+  <div class="d0-metric-card">
+    <span class="d0-metric-label">{label}</span>
+    <div class="d0-metric-value-row">
+      <span class="d0-metric-value">{value}</span>
+      {#if unit}
+        <span class="d0-metric-unit">{unit}</span>
+      {/if}
+    </div>
+    {#if trend}
+      <span
+        class="d0-metric-trend"
+        class:trend-up={trend === 'up'}
+        class:trend-down={trend === 'down'}
+        class:trend-flat={trend === 'flat'}
+        aria-label={trend === 'up' ? 'trending up' : trend === 'down' ? 'trending down' : 'stable'}
+      >
+        {trendArrow}
+        {#if trendValue}
+          <span class="d0-metric-trend-value">{trendValue}</span>
+        {/if}
+      </span>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .d0-metric-card {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 12px 16px;
+    background: var(--d0-chart-bg, #222);
+    border: 1px solid var(--color-accent-subtle, rgba(184, 115, 51, 0.15));
+    border-radius: var(--radius-lg, 8px);
+    min-width: 120px;
+  }
+
+  .d0-metric-label {
+    font-family: var(--font-sans, system-ui, sans-serif);
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--d0-chart-text, #a09880);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .d0-metric-value-row {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+  }
+
+  .d0-metric-value {
+    font-family: var(--font-sans, system-ui, sans-serif);
+    font-size: 28px;
+    font-weight: 600;
+    color: var(--color-text-primary, #e8e0d0);
+    line-height: 1;
+  }
+
+  .d0-metric-unit {
+    font-family: var(--font-sans, system-ui, sans-serif);
+    font-size: 13px;
+    color: var(--d0-chart-text, #a09880);
+  }
+
+  .d0-metric-trend {
+    font-family: var(--font-sans, system-ui, sans-serif);
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    gap: 3px;
+  }
+
+  .d0-metric-trend.trend-up {
+    color: var(--d0-metric-trend-up, #27ae60);
+  }
+
+  .d0-metric-trend.trend-down {
+    color: var(--d0-metric-trend-down, #c0392b);
+  }
+
+  .d0-metric-trend.trend-flat {
+    color: var(--d0-chart-text, #a09880);
+  }
+
+  .d0-metric-trend-value {
+    font-size: 12px;
+  }
+
+  /* ── Inline variant ───────────────────────────────────────────────────── */
+
+  .d0-metric-inline {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 4px;
+    font-family: var(--font-mono, ui-monospace, monospace);
+  }
+
+  .d0-metric-inline__label {
+    font-size: 10px;
+    font-weight: 500;
+    color: var(--color-text-muted, #5a5245);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .d0-metric-inline__value {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--color-text-primary, #f2efe9);
+    line-height: 1;
+  }
+
+  .d0-metric-inline__unit {
+    font-size: 11px;
+    color: var(--color-text-secondary, #a09880);
+  }
+
+  .d0-metric-inline__trend {
+    font-size: 11px;
+  }
+
+  .d0-metric-inline__trend.trend-up   { color: var(--color-success, #27ae60); }
+  .d0-metric-inline__trend.trend-down { color: var(--color-error, #c0392b); }
+  .d0-metric-inline__trend.trend-flat { color: var(--color-text-muted, #5a5245); }
+</style>

package/src/d0-data-viz/SparkLine.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  interface SparkLineProps {
+    data: number[];
+    width?: number;
+    height?: number;
+    color?: string;
+    strokeWidth?: number;
+    'aria-label'?: string;
+  }
+
+  let {
+    data,
+    width = 120,
+    height = 32,
+    color,
+    strokeWidth = 2,
+    'aria-label': ariaLabel = 'Sparkline',
+  }: SparkLineProps = $props();
+
+  let pathD = $derived.by(() => {
+    if (data.length < 2) return '';
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+    const padY = strokeWidth;
+    const drawH = height - padY * 2;
+    const stepX = width / (data.length - 1);
+
+    return data
+      .map((v, i) => {
+        const x = i * stepX;
+        const y = padY + drawH - ((v - min) / range) * drawH;
+        return `${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)}`;
+      })
+      .join(' ');
+  });
+</script>
+
+<svg
+  class="d0-sparkline"
+  viewBox="0 0 {width} {height}"
+  xmlns="http://www.w3.org/2000/svg"
+  role="img"
+  aria-label={ariaLabel}
+>
+  <path
+    class="d0-sparkline-path"
+    d={pathD}
+    fill="none"
+    stroke={color ?? undefined}
+    stroke-width={strokeWidth}
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
+
+<style>
+  .d0-sparkline {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .d0-sparkline-path {
+    stroke: var(--d0-chart-accent, #b87333);
+  }
+</style>

package/src/d0-data-viz/StorageMap.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import { computeTreemap, formatBytes, TIER_COLORS } from './storage-map-types';
+  import type { StorageNode, StorageMapConfig, TreemapCell } from './storage-map-types';
+
+  interface Props {
+    nodes: StorageNode[];
+    width?: number;
+    height?: number;
+    config?: StorageMapConfig;
+    onnodeclick?: (node: StorageNode) => void;
+  }
+
+  let {
+    nodes,
+    width = 600,
+    height = 400,
+    config = {},
+    onnodeclick,
+  }: Props = $props();
+
+  let layout = $derived(computeTreemap(nodes, width, height, config));
+  let totalLabel = $derived(formatBytes(layout.totalBytes));
+
+  function tierStyle(cell: TreemapCell): string {
+    const c = TIER_COLORS[cell.ownerTier];
+    return `left:${cell.x}px;top:${cell.y}px;width:${cell.width}px;height:${cell.height}px;background:${c.fill};border-color:${c.stroke};`;
+  }
+
+  function tierClasses(cell: TreemapCell): string {
+    return `sm-cell sm-cell--${cell.ownerTier}`;
+  }
+
+  function handleClick(cell: TreemapCell) {
+    const node = nodes.find((n) => n.path === cell.path);
+    if (node && onnodeclick) {
+      onnodeclick(node);
+    }
+  }
+</script>
+
+<div class="sm-root" style="width: {width}px; height: {height}px;">
+  {#if layout.cells.length === 0}
+    <div class="sm-empty">No storage data to display</div>
+  {:else}
+    <div class="sm-header">
+      <span class="sm-total">{totalLabel}</span>
+      <div class="sm-legend">
+        <span class="sm-legend-item">
+          <span class="sm-swatch sm-swatch--kos"></span>
+          KOS
+        </span>
+        <span class="sm-legend-item">
+          <span class="sm-swatch sm-swatch--external"></span>
+          External
+        </span>
+        <span class="sm-legend-item">
+          <span class="sm-swatch sm-swatch--unknown"></span>
+          Unknown
+        </span>
+      </div>
+    </div>
+    <div class="sm-canvas">
+      {#each layout.cells as cell (cell.path)}
+        <div
+          class={tierClasses(cell)}
+          style={tierStyle(cell)}
+          role="button"
+          tabindex="0"
+          aria-label="{cell.label}: {formatBytes(cell.bytes)}"
+          onclick={() => handleClick(cell)}
+          onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleClick(cell); }}
+          title="{cell.path} — {formatBytes(cell.bytes)}"
+        >
+          {#if cell.width > 60 && cell.height > 30}
+            <span class="sm-label">{cell.label}</span>
+          {/if}
+          {#if cell.width > 80 && cell.height > 44}
+            <span class="sm-size">{formatBytes(cell.bytes)}</span>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .sm-root {
+    position: relative;
+    background: var(--color-bg-surface, #222);
+    border: 1px solid var(--color-accent-subtle, rgba(184, 115, 51, 0.15));
+    border-radius: var(--radius-lg, 8px);
+    overflow: hidden;
+    font-family: var(--font-mono, ui-monospace, monospace);
+  }
+
+  .sm-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background: var(--color-bg-elevated, #2a2a2a);
+    border-bottom: 1px solid var(--color-border-subtle, rgba(184, 115, 51, 0.1));
+  }
+
+  .sm-total {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-text-primary, #e8e0d0);
+  }
+
+  .sm-legend {
+    display: flex;
+    gap: 12px;
+    font-size: 11px;
+    color: var(--color-text-secondary, #a09880);
+  }
+
+  .sm-legend-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .sm-swatch {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+  }
+
+  .sm-swatch--kos { background: var(--color-accent, #b87333); }
+  .sm-swatch--external { background: #a09880; }
+  .sm-swatch--unknown { background: #5a5245; }
+
+  .sm-canvas {
+    position: relative;
+    width: 100%;
+    height: calc(100% - 37px);
+  }
+
+  .sm-cell {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    cursor: pointer;
+    transition: opacity 0.15s ease;
+    border: 1px solid transparent;
+  }
+
+  .sm-cell:hover {
+    opacity: 0.85;
+    border-color: var(--color-accent, #b87333);
+  }
+
+  .sm-label {
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--color-text-primary, #e8e0d0);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 90%;
+    text-align: center;
+  }
+
+  .sm-size {
+    font-size: 10px;
+    color: var(--color-text-muted, #706858);
+  }
+
+  .sm-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--color-text-muted, #5a5245);
+    font-size: 13px;
+  }
+</style>