@stephen-netu/design-system 0.1.0 → 0.2.1

package/{src → dist}/d0-data-viz/CheckpointBar.svelte

@@ -295,7 +295,7 @@
     align-items: center;
     height: var(--checkpoint-bar-height, 48px);
     background: rgba(26, 26, 26, 0.95);
-    border-top: 1px solid rgba(184, 115, 51, 0.2);
+    border-top: 1px solid var(--color-accent-muted);
     padding: 0 0.5rem;
     gap: 0.5rem;
     user-select: none;
@@ -303,7 +303,7 @@
   }
 
   .checkpoint-bar:focus-visible {
-    outline: 2px solid var(--color-accent, #b87333);
+    outline: 2px solid var(--color-accent, var(--color-accent));
     outline-offset: -2px;
   }
 
@@ -328,7 +328,7 @@
   }
 
   .scroll-indicator:hover {
-    color: var(--color-accent, #b87333);
+    color: var(--color-accent, var(--color-accent));
   }
 
   .timeline-track {
@@ -355,7 +355,7 @@
     right: 0;
     top: 50%;
     height: 2px;
-    background: rgba(184, 115, 51, 0.3);
+    background: var(--color-accent-muted);
     transform: translateY(-50%);
     pointer-events: none;
     z-index: 0;
@@ -392,14 +392,14 @@
     content: '';
     position: absolute;
     inset: -4px;
-    border: 2px solid var(--node-color, var(--node-fallback, #b87333));
+    border: 2px solid var(--node-color, var(--node-fallback, var(--color-accent)));
     border-radius: 50%;
     opacity: 0.5;
   }
 
   .checkpoint-node.preview {
     transform: scale(1.5);
-    box-shadow: 0 0 8px var(--node-color, var(--node-fallback, #b87333));
+    box-shadow: 0 0 8px var(--node-color, var(--node-fallback, var(--color-accent)));
   }
 
   .node-symbol {
@@ -415,7 +415,7 @@
     left: 50%;
     transform: translateX(-50%) scale(0.95);
     background: rgba(34, 34, 34, 0.98);
-    border: 1px solid rgba(184, 115, 51, 0.3);
+    border: 1px solid var(--color-accent-muted);
     border-radius: 6px;
     padding: 0.75rem 1rem;
     min-width: 200px;
@@ -435,7 +435,7 @@
     left: 50%;
     transform: translateX(-50%);
     border: 6px solid transparent;
-    border-top-color: rgba(184, 115, 51, 0.3);
+    border-top-color: var(--color-accent-muted);
   }
 
   .checkpoint-node:hover .checkpoint-tooltip,
@@ -457,7 +457,7 @@
 
   .version {
     font-size: 0.65rem;
-    color: var(--color-accent, #b87333);
+    color: var(--color-accent, var(--color-accent));
     font-weight: 500;
   }
 
@@ -492,7 +492,7 @@
     margin-left: 0.5rem;
     flex-shrink: 0;
     cursor: grab;
-    color: var(--color-accent, #b87333);
+    color: var(--color-accent, var(--color-accent));
   }
 
   .now-label {
@@ -504,7 +504,7 @@
     display: flex;
     align-items: center;
     padding-left: 0.75rem;
-    border-left: 1px solid rgba(184, 115, 51, 0.2);
+    border-left: 1px solid var(--color-accent-muted);
     margin-left: 0.25rem;
     flex-shrink: 0;
   }
@@ -522,7 +522,7 @@
   }
 
   .preview-badge {
-    color: var(--color-accent, #b87333);
+    color: var(--color-accent, var(--color-accent));
     animation: pulse 2s ease-in-out infinite;
   }
 

package/dist/d0-data-viz/CheckpointBar.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Checkpoint } from './checkpoint-types';
+interface Props {
+    checkpoints: Checkpoint[];
+    currentSeqno: number;
+    previewSeqno?: number | null;
+    onCheckpointClick?: (checkpoint: Checkpoint) => void;
+    onCheckpointDoubleClick?: (checkpoint: Checkpoint) => void;
+    onNowHandleDrag?: (seqno: number) => void;
+    onExitPreview?: () => void;
+    'aria-label'?: string;
+}
+declare const CheckpointBar: import("svelte").Component<Props, {}, "">;
+type CheckpointBar = ReturnType<typeof CheckpointBar>;
+export default CheckpointBar;
+//# sourceMappingURL=CheckpointBar.svelte.d.ts.map

package/dist/d0-data-viz/CheckpointBar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckpointBar.svelte.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/CheckpointBar.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACR,UAAU,EAGX,MAAM,oBAAoB,CAAC;AAW5B,UAAU,KAAK;IACb,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,uBAAuB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC3D,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA0OH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/{src → dist}/d0-data-viz/CheckpointPill.svelte

@@ -32,7 +32,9 @@
 
   // Current checkpoint for display
   let currentCheckpoint = $derived(
-    checkpoints.find((c) => c.seqno === currentSeqno) ?? checkpoints[checkpoints.length - 1]
+    checkpoints.length === 0
+      ? null
+      : (checkpoints.find((c) => c.seqno === currentSeqno) ?? checkpoints[checkpoints.length - 1])
   );
 
   // Display checkpoint (preview takes precedence)
@@ -150,7 +152,7 @@
     display: inline-flex;
     align-items: center;
     background: rgba(26, 26, 26, 0.95);
-    border: 1px solid rgba(184, 115, 51, 0.3);
+    border: 1px solid var(--color-accent-muted);
     border-radius: 4px;
     cursor: pointer;
     transition: all 200ms ease;
@@ -159,26 +161,26 @@
   }
 
   .checkpoint-pill:hover {
-    border-color: rgba(184, 115, 51, 0.5);
+    border-color: var(--color-accent-muted);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   }
 
   .checkpoint-pill:focus-visible {
-    outline: 2px solid var(--color-accent, #b87333);
+    outline: 2px solid var(--color-accent, var(--color-accent));
     outline-offset: 2px;
   }
 
   .checkpoint-pill.preview {
-    border-color: rgba(184, 115, 51, 0.6);
+    border-color: var(--color-accent-muted);
     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);
+      box-shadow: 0 0 0 0 var(--color-accent-muted);
     }
     50% {
-      box-shadow: 0 0 0 4px rgba(184, 115, 51, 0.1);
+      box-shadow: 0 0 0 4px var(--color-accent-subtle);
     }
   }
 
@@ -212,7 +214,7 @@
   }
 
   .checkpoint-pill:hover .pill-arrow {
-    color: var(--color-accent, #b87333);
+    color: var(--color-accent, var(--color-accent));
   }
 
   /* Expanded State */
@@ -228,7 +230,7 @@
     align-items: center;
     justify-content: space-between;
     padding: 0.5rem 0.75rem;
-    border-bottom: 1px solid rgba(184, 115, 51, 0.2);
+    border-bottom: 1px solid var(--color-accent-muted);
   }
 
   .pill-label {
@@ -255,12 +257,12 @@
   }
 
   .pill-close:hover {
-    background: rgba(184, 115, 51, 0.1);
-    color: var(--color-accent, #b87333);
+    background: var(--color-accent-subtle);
+    color: var(--color-accent, var(--color-accent));
   }
 
   .pill-close:focus-visible {
-    outline: 1px solid var(--color-accent, #b87333);
+    outline: 1px solid var(--color-accent, var(--color-accent));
   }
 
   .pill-content {

package/dist/d0-data-viz/CheckpointPill.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Checkpoint } from './checkpoint-types';
+interface Props {
+    checkpoints: Checkpoint[];
+    currentSeqno: number;
+    previewSeqno?: number | null;
+    onCheckpointClick?: (checkpoint: Checkpoint) => void;
+    onCheckpointDoubleClick?: (checkpoint: Checkpoint) => void;
+    onExitPreview?: () => void;
+    'aria-label'?: string;
+}
+declare const CheckpointPill: import("svelte").Component<Props, {}, "">;
+type CheckpointPill = ReturnType<typeof CheckpointPill>;
+export default CheckpointPill;
+//# sourceMappingURL=CheckpointPill.svelte.d.ts.map

package/dist/d0-data-viz/CheckpointPill.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckpointPill.svelte.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/CheckpointPill.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKnD,UAAU,KAAK;IACb,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IACrD,uBAAuB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAuHH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/d0-data-viz/ConnectionHealth.svelte

@@ -0,0 +1,366 @@
+<script lang="ts" module>
+  /**
+   * ConnectionHealth — Network connection quality indicator with latency graph
+   * 
+   * A generalized version of NNJAS ConnectionQuality for the LEAP design system.
+   * Displays real-time connection metrics with a historical latency graph.
+   * 
+   * @example
+   * <ConnectionHealth 
+   *   metrics={qualityMetrics}
+   *   showGraph={true}
+   *   onRetry={handleReconnect}
+   * />
+   */
+  export interface QualityMetrics {
+    latency: number | null;
+    jitter: number | null;
+    lossRate: number;
+    quality: QualityLevel;
+    history: QualitySample[];
+  }
+
+  export interface QualitySample {
+    timestamp: number;
+    latency: number | null;
+    lost: boolean;
+  }
+
+  export type QualityLevel = 'excellent' | 'good' | 'fair' | 'poor' | 'disconnected';
+
+  export function getQualityColor(quality: QualityLevel): string {
+    switch (quality) {
+      case 'excellent': return 'var(--color-success, #27ae60)';
+      case 'good': return 'var(--color-success, #27ae60)';
+      case 'fair': return 'var(--color-warning, #f39c12)';
+      case 'poor': return 'var(--color-error, #c0392b)';
+      case 'disconnected': return 'var(--color-text-muted, #666)';
+    }
+  }
+
+  export function getQualityLabel(quality: QualityLevel): string {
+    switch (quality) {
+      case 'excellent': return 'Excellent';
+      case 'good': return 'Good';
+      case 'fair': return 'Fair';
+      case 'poor': return 'Poor';
+      case 'disconnected': return 'Disconnected';
+    }
+  }
+</script>
+
+<script lang="ts">
+  interface Props {
+    metrics: QualityMetrics | null;
+    showGraph?: boolean;
+    expanded?: boolean;
+    onRetry?: () => void;
+    onToggleExpand?: () => void;
+    class?: string;
+  }
+
+  let { 
+    metrics, 
+    showGraph = true, 
+    expanded = false,
+    onRetry,
+    onToggleExpand,
+    class: className = ''
+  }: Props = $props();
+
+  const GRAPH_WIDTH = 120;
+  const GRAPH_HEIGHT = 40;
+  const GRAPH_POINTS = 12;
+
+  let qualityColor = $derived(metrics ? getQualityColor(metrics.quality) : 'var(--color-text-muted)');
+  let qualityLabel = $derived(metrics ? getQualityLabel(metrics.quality) : 'Unknown');
+
+  function generateGraphPath(history: QualitySample[]): string {
+    if (history.length === 0) return '';
+
+    const recent = history.slice(-GRAPH_POINTS);
+    const maxLatency = Math.max(500, ...recent.filter(s => !s.lost).map(s => s.latency || 0));
+    const stepX = GRAPH_WIDTH / (GRAPH_POINTS - 1);
+
+    return recent
+      .map((sample, i) => {
+        const x = i * stepX;
+        if (sample.lost) {
+          return `M${x},${GRAPH_HEIGHT - 2} L${x + 2},${GRAPH_HEIGHT - 2}`;
+        }
+        const y = GRAPH_HEIGHT - ((sample.latency || 0) / maxLatency) * (GRAPH_HEIGHT - 4) + 2;
+        return `${i === 0 ? 'M' : 'L'}${x},${y.toFixed(1)}`;
+      })
+      .join(' ');
+  }
+
+  function generateLossPath(history: QualitySample[]): string {
+    if (history.length === 0) return '';
+
+    const recent = history.slice(-GRAPH_POINTS);
+    const stepX = GRAPH_WIDTH / (GRAPH_POINTS - 1);
+
+    return recent
+      .map((sample, i) => {
+        if (!sample.lost) return '';
+        const x = i * stepX;
+        return `M${x},0 L${x + 4},0 L${x + 4},${GRAPH_HEIGHT} L${x},${GRAPH_HEIGHT} Z`;
+      })
+      .filter(Boolean)
+      .join(' ');
+  }
+
+  function formatLatency(latency: number | null): string {
+    if (latency === null) return '—';
+    return `${Math.round(latency)}ms`;
+  }
+
+  function formatJitter(jitter: number | null): string {
+    if (jitter === null) return '—';
+    return `±${Math.round(jitter)}ms`;
+  }
+
+  function handleRetry() {
+    onRetry?.();
+  }
+
+  function handleToggle() {
+    onToggleExpand?.();
+  }
+</script>
+
+<div class="connection-health {className}" class:expanded>
+  <!-- Header / Compact View -->
+  <button 
+    class="health-header" 
+    onclick={handleToggle}
+    type="button"
+    aria-expanded={expanded}
+  >
+    <span class="health-indicator" style="background-color: {qualityColor}"></span>
+    <span class="health-label">{qualityLabel}</span>
+    
+    {#if metrics && !expanded}
+      <span class="health-latency">{formatLatency(metrics.latency)}</span>
+    {/if}
+
+    {#if showGraph && metrics?.history.length}
+      <svg 
+        class="health-sparkline" 
+        viewBox="0 0 {GRAPH_WIDTH} {GRAPH_HEIGHT}" 
+        width="60" 
+        height="20"
+      >
+        <path 
+          d={generateLossPath(metrics.history)} 
+          fill="var(--color-error, #c0392b)" 
+          opacity="0.3"
+        />
+        <path 
+          d={generateGraphPath(metrics.history)} 
+          fill="none" 
+          stroke={qualityColor}
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    {/if}
+
+    <span class="expand-icon" aria-hidden="true">
+      {expanded ? '▼' : '▶'}
+    </span>
+  </button>
+
+  <!-- Expanded Details -->
+  {#if expanded && metrics}
+    <div class="health-details">
+      <div class="metrics-grid">
+        <div class="metric">
+          <span class="metric-value" style="color: {qualityColor}">
+            {formatLatency(metrics.latency)}
+          </span>
+          <span class="metric-label">Latency</span>
+        </div>
+        <div class="metric">
+          <span class="metric-value">{formatJitter(metrics.jitter)}</span>
+          <span class="metric-label">Jitter</span>
+        </div>
+        <div class="metric">
+          <span class="metric-value" class:has-loss={metrics.lossRate > 0}>
+            {Math.round(metrics.lossRate * 100)}%
+          </span>
+          <span class="metric-label">Loss</span>
+        </div>
+      </div>
+
+      {#if showGraph && metrics.history.length > 0}
+        <div class="graph-container">
+          <svg 
+            class="health-graph" 
+            viewBox="0 0 {GRAPH_WIDTH} {GRAPH_HEIGHT}" 
+            width="100%" 
+            height="{GRAPH_HEIGHT}px"
+          >
+            <defs>
+              <linearGradient id="graph-gradient" x1="0" x2="0" y1="0" y2="1">
+                <stop offset="0%" stop-color={qualityColor} stop-opacity="0.3"/>
+                <stop offset="100%" stop-color={qualityColor} stop-opacity="0"/>
+              </linearGradient>
+            </defs>
+            <path 
+              d={generateLossPath(metrics.history)} 
+              fill="var(--color-error, #c0392b)" 
+              opacity="0.2"
+            />
+            <path 
+              d={generateGraphPath(metrics.history)} 
+              fill="none" 
+              stroke={qualityColor}
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <span class="graph-label">Last 60s</span>
+        </div>
+      {/if}
+
+      {#if metrics.quality === 'poor' || metrics.quality === 'disconnected'}
+        <button class="retry-button" onclick={handleRetry} type="button">
+          Retry Connection
+        </button>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .connection-health {
+    background: var(--color-bg-panel, #222);
+    border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.06));
+    border-radius: var(--radius-md, 4px);
+    overflow: hidden;
+  }
+
+  .health-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 0.5rem);
+    width: 100%;
+    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+    background: transparent;
+    border: none;
+    color: var(--color-text-secondary, #888);
+    font-size: var(--text-sm, 0.875rem);
+    cursor: pointer;
+    transition: background 0.15s ease;
+  }
+
+  .health-header:hover {
+    background: var(--color-bg-hover, rgba(255,255,255,0.03));
+  }
+
+  .health-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--radius-full, 9999px);
+    flex-shrink: 0;
+  }
+
+  .health-label {
+    font-weight: 500;
+    flex: 1;
+    text-align: left;
+  }
+
+  .health-latency {
+    font-family: var(--font-mono, monospace);
+    font-size: var(--text-xs, 0.75rem);
+    color: var(--color-text-muted, #666);
+  }
+
+  .health-sparkline {
+    flex-shrink: 0;
+  }
+
+  .expand-icon {
+    font-size: 10px;
+    color: var(--color-text-muted, #666);
+  }
+
+  .health-details {
+    padding: var(--space-3, 0.75rem);
+    border-top: 1px solid var(--color-border-subtle, rgba(255,255,255,0.06));
+  }
+
+  .metrics-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-3, 0.75rem);
+    margin-bottom: var(--space-3, 0.75rem);
+  }
+
+  .metric {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-1, 0.25rem);
+  }
+
+  .metric-value {
+    font-family: var(--font-mono, monospace);
+    font-size: var(--text-lg, 1.125rem);
+    font-weight: 600;
+    color: var(--color-text-primary, #f2efe9);
+  }
+
+  .metric-value.has-loss {
+    color: var(--color-error, #c0392b);
+  }
+
+  .metric-label {
+    font-size: var(--text-xs, 0.75rem);
+    color: var(--color-text-muted, #666);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .graph-container {
+    position: relative;
+    background: var(--color-bg-canvas, #1a1a1a);
+    border-radius: var(--radius-sm, 2px);
+    padding: var(--space-2, 0.5rem);
+    margin-bottom: var(--space-3, 0.75rem);
+  }
+
+  .health-graph {
+    display: block;
+  }
+
+  .graph-label {
+    position: absolute;
+    bottom: var(--space-1, 0.25rem);
+    right: var(--space-2, 0.5rem);
+    font-size: var(--text-2xs, 0.625rem);
+    color: var(--color-text-muted, #666);
+  }
+
+  .retry-button {
+    width: 100%;
+    padding: var(--space-2, 0.5rem);
+    background: var(--color-accent-subtle, var(--color-accent-muted));
+    color: var(--color-accent, var(--color-accent));
+    border: 1px solid var(--color-accent, var(--color-accent));
+    border-radius: var(--radius-md, 4px);
+    font-size: var(--text-sm, 0.875rem);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .retry-button:hover {
+    background: var(--color-accent, var(--color-accent));
+    color: var(--color-bg-app, #141414);
+  }
+</style>

package/dist/d0-data-viz/ConnectionHealth.svelte.d.ts

@@ -0,0 +1,40 @@
+/**
+ * ConnectionHealth — Network connection quality indicator with latency graph
+ *
+ * A generalized version of NNJAS ConnectionQuality for the LEAP design system.
+ * Displays real-time connection metrics with a historical latency graph.
+ *
+ * @example
+ * <ConnectionHealth
+ *   metrics={qualityMetrics}
+ *   showGraph={true}
+ *   onRetry={handleReconnect}
+ * />
+ */
+export interface QualityMetrics {
+    latency: number | null;
+    jitter: number | null;
+    lossRate: number;
+    quality: QualityLevel;
+    history: QualitySample[];
+}
+export interface QualitySample {
+    timestamp: number;
+    latency: number | null;
+    lost: boolean;
+}
+export type QualityLevel = 'excellent' | 'good' | 'fair' | 'poor' | 'disconnected';
+export declare function getQualityColor(quality: QualityLevel): string;
+export declare function getQualityLabel(quality: QualityLevel): string;
+interface Props {
+    metrics: QualityMetrics | null;
+    showGraph?: boolean;
+    expanded?: boolean;
+    onRetry?: () => void;
+    onToggleExpand?: () => void;
+    class?: string;
+}
+declare const ConnectionHealth: import("svelte").Component<Props, {}, "">;
+type ConnectionHealth = ReturnType<typeof ConnectionHealth>;
+export default ConnectionHealth;
+//# sourceMappingURL=ConnectionHealth.svelte.d.ts.map

package/dist/d0-data-viz/ConnectionHealth.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionHealth.svelte.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/ConnectionHealth.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,cAAc,CAAC;AAEnF,wBAAgB,eAAe,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,CAQ7D;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,CAQ7D;AAED,UAAU,KAAK;IACb,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqJH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/{src → dist}/d0-data-viz/MetricCard.svelte

@@ -59,10 +59,10 @@
   .d0-metric-card {
     display: flex;
     flex-direction: column;
-    gap: 4px;
-    padding: 12px 16px;
+    gap: var(--space-1);
+    padding: var(--space-3) var(--space-4);
     background: var(--d0-chart-bg, #222);
-    border: 1px solid var(--color-accent-subtle, rgba(184, 115, 51, 0.15));
+    border: 1px solid var(--color-accent-subtle, var(--color-accent-muted));
     border-radius: var(--radius-lg, 8px);
     min-width: 120px;
   }
@@ -79,7 +79,7 @@
   .d0-metric-value-row {
     display: flex;
     align-items: baseline;
-    gap: 4px;
+    gap: var(--space-1);
   }
 
   .d0-metric-value {
@@ -125,7 +125,7 @@
   .d0-metric-inline {
     display: inline-flex;
     align-items: baseline;
-    gap: 4px;
+    gap: var(--space-1);
     font-family: var(--font-mono, ui-monospace, monospace);
   }
 

package/dist/d0-data-viz/MetricCard.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { MetricCardProps } from './types';
+declare const MetricCard: import("svelte").Component<MetricCardProps, {}, "">;
+type MetricCard = ReturnType<typeof MetricCard>;
+export default MetricCard;
+//# sourceMappingURL=MetricCard.svelte.d.ts.map

package/dist/d0-data-viz/MetricCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCard.svelte.d.ts","sourceRoot":"","sources":["../../src/d0-data-viz/MetricCard.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAoD/C,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/{src → dist}/d0-data-viz/SparkLine.svelte

@@ -61,6 +61,6 @@
   }
 
   .d0-sparkline-path {
-    stroke: var(--d0-chart-accent, #b87333);
+    stroke: var(--d0-chart-accent, var(--color-accent));
   }
 </style>