@stephen-netu/design-system 0.1.0 → 0.2.0

package/dist/u0-primitives/VerticalToolbar.svelte.d.ts

@@ -0,0 +1,32 @@
+/**
+ * VerticalToolbar — Icon bar for collapsed sidebar peek mode
+ *
+ * A generalized version of NNJAS IconStrip for the LEAP design system.
+ * Provides VS Code-style vertical navigation with tooltips and badges.
+ *
+ * @example
+ * <VerticalToolbar
+ *   items={[
+ *     { id: 'files', icon: folderIcon, label: 'Files', onClick: () => {} },
+ *     { id: 'search', icon: searchIcon, label: 'Search', badge: 3 },
+ *   ]}
+ * />
+ */
+export interface ToolbarItem {
+    id: string;
+    icon: string;
+    label: string;
+    active?: boolean;
+    badge?: string | number;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+interface Props {
+    items: ToolbarItem[];
+    position?: 'left' | 'right';
+    class?: string;
+}
+declare const VerticalToolbar: import("svelte").Component<Props, {}, "">;
+type VerticalToolbar = ReturnType<typeof VerticalToolbar>;
+export default VerticalToolbar;
+//# sourceMappingURL=VerticalToolbar.svelte.d.ts.map

package/dist/u0-primitives/VerticalToolbar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/u0-primitives/VerticalToolbar.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,KAAK;IACb,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgDH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/u0-primitives/accordion/Accordion.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+  /**
+   * Accordion Component
+   * 
+   * A vertically stacked set of interactive headings that each reveal a panel of associated content.
+   * 
+   * @package @kos/design-system/u0-primitives
+   */
+  import type { Snippet } from 'svelte';
+
+  interface Panel {
+    /** Unique identifier for the panel */
+    id: string;
+    /** Heading/title of the panel */
+    title: string;
+    /** Content of the panel */
+    content: Snippet;
+    /** Whether the panel is disabled */
+    disabled?: boolean;
+  }
+
+  export interface Props {
+    /** Array of panels to display */
+    panels: Panel[];
+    /** Whether only one panel can be open at a time */
+    singleOpen?: boolean;
+    /** Default open panel IDs (for uncontrolled mode) */
+    defaultOpen?: string[];
+    /** Currently open panel IDs (for controlled mode) */
+    open?: string[];
+    /** Callback when open state changes */
+    onOpenChange?: (openIds: string[]) => void;
+  }
+
+  let {
+    panels,
+    singleOpen = false,
+    defaultOpen = [],
+    open: controlledOpen,
+    onOpenChange,
+  }: Props = $props();
+
+  let internalOpenIds = $state<string[]>([...defaultOpen]);
+
+  function setInternalOpenIds(fn: (prev: string[]) => string[]) {
+    internalOpenIds = fn(internalOpenIds);
+  }
+
+  const isControlled = $derived(controlledOpen !== undefined);
+  const openIds = $derived(isControlled ? (controlledOpen ?? []) : internalOpenIds);
+
+  function togglePanel(id: string): void {
+    if (isControlled) {
+      const current = controlledOpen ?? [];
+      onOpenChange?.(current.includes(id)
+        ? current.filter((openId: string) => openId !== id)
+        : [...current, id]);
+    } else {
+      setInternalOpenIds((prev: string[]) => {
+        if (singleOpen) {
+          return [id];
+        }
+        if (prev.includes(id)) {
+          return prev.filter((openId: string) => openId !== id);
+        }
+        return [...prev, id];
+      });
+    }
+  }
+
+  function isOpen(id: string): boolean {
+    return openIds.includes(id);
+  }
+
+  function isDisabled(id: string): boolean {
+    const panel = panels.find(p => p.id === id);
+    return panel?.disabled ?? false;
+  }
+</script>
+
+{#if panels.length > 0}
+<div class="accordion">
+  {#each panels as panel}
+    <div class="accordion-item"
+         class:disabled={isDisabled(panel.id)}
+         class:open={isOpen(panel.id)}>
+      <div class="accordion-header"
+           id={`accordion-header-${panel.id}`}
+           onclick={() => !isDisabled(panel.id) && togglePanel(panel.id)}
+           onkeydown={(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (!isDisabled(panel.id)) togglePanel(panel.id); } }}
+           aria-expanded={isOpen(panel.id)}
+           aria-controls={`accordion-panel-${panel.id}`}
+           role="button"
+           tabindex={isDisabled(panel.id) ? -1 : 0}>
+        <div class="accordion-title">
+          {panel.title}
+        </div>
+        <div class="accordion-icon">
+          {#if isOpen(panel.id)}
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          {:else}
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="6 15 12 9 18 15"></polyline>
+            </svg>
+          {/if}
+        </div>
+      </div>
+
+      {#if isOpen(panel.id)}
+        <div class="accordion-panel" 
+             id={`accordion-panel-${panel.id}`}
+             role="region"
+             aria-labelledby={`accordion-header-${panel.id}`}>
+          <div class="accordion-content">
+            {@render panel.content()}
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>
+{/if}
+
+<style>
+  .accordion {
+    border-radius: var(--radius-md, 0.25rem);
+    overflow: hidden;
+    border: 1px solid var(--color-border, var(--border-default, #3a3630));
+    background: var(--color-bg-app, #0b0d0f);
+  }
+
+  .accordion-item {
+    border-bottom: 1px solid var(--color-border, var(--border-default, #3a3630));
+  }
+
+  .accordion-item:last-child {
+    border-bottom: none;
+  }
+
+  .accordion-item.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .accordion-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-4, 1rem);
+    cursor: pointer;
+    user-select: none;
+    transition: background-color var(--duration-normal, 200ms) ease-in-out;
+  }
+
+  .accordion-header:hover:not(.disabled) {
+    background: var(--color-bg-secondary, var(--color-bg-canvas, #121518));
+  }
+
+  /* Removed duplicate focus-visible — the box-shadow variant below supersedes. */
+
+  /* Focus styles for keyboard navigation */
+  .accordion-header:focus-visible {
+    box-shadow: 0 0 0 2px var(--color-accent, var(--color-accent));
+  }
+
+  /* Disabled states */
+  .accordion-item.disabled .accordion-header {
+    cursor: not-allowed;
+  }
+
+  .accordion-item.disabled .accordion-header:hover {
+    background: transparent;
+  }
+
+  .accordion-panel {
+    display: block;
+  }
+
+  .accordion-content {
+    padding: var(--space-4, 1rem);
+    padding-top: 0;
+  }
+</style>

package/dist/u0-primitives/accordion/Accordion.svelte.d.ts

@@ -0,0 +1,34 @@
+/**
+   * Accordion Component
+   *
+   * A vertically stacked set of interactive headings that each reveal a panel of associated content.
+   *
+   * @package @kos/design-system/u0-primitives
+   */
+import type { Snippet } from 'svelte';
+interface Panel {
+    /** Unique identifier for the panel */
+    id: string;
+    /** Heading/title of the panel */
+    title: string;
+    /** Content of the panel */
+    content: Snippet;
+    /** Whether the panel is disabled */
+    disabled?: boolean;
+}
+export interface Props {
+    /** Array of panels to display */
+    panels: Panel[];
+    /** Whether only one panel can be open at a time */
+    singleOpen?: boolean;
+    /** Default open panel IDs (for uncontrolled mode) */
+    defaultOpen?: string[];
+    /** Currently open panel IDs (for controlled mode) */
+    open?: string[];
+    /** Callback when open state changes */
+    onOpenChange?: (openIds: string[]) => void;
+}
+declare const Accordion: import("svelte").Component<Props, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;
+//# sourceMappingURL=Accordion.svelte.d.ts.map

package/dist/u0-primitives/accordion/Accordion.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/accordion/Accordion.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;KAMK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,KAAK;IACpB,iCAAiC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC5C;AAyFH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/u0-primitives/accordion/Accordion.test.js

@@ -0,0 +1,99 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import Accordion from './Accordion.svelte';
+const samplePanels = [
+    { id: 'p1', title: 'First', content: () => 'Content 1' },
+    { id: 'p2', title: 'Second', content: () => 'Content 2' },
+    { id: 'p3', title: 'Third', content: () => 'Content 3' },
+];
+describe('Accordion', () => {
+    afterEach(() => cleanup());
+    it('renders all panel titles', () => {
+        const { container } = render(Accordion, { panels: samplePanels });
+        const items = container.querySelectorAll('.accordion-item');
+        expect(items.length).toBe(3);
+        expect(container.textContent).toContain('First');
+        expect(container.textContent).toContain('Second');
+        expect(container.textContent).toContain('Third');
+    });
+    it('renders no panels initially (uncontrolled, no defaultOpen)', () => {
+        const { container } = render(Accordion, { panels: samplePanels });
+        expect(container.querySelectorAll('[role="region"]').length).toBe(0);
+    });
+    it('opens a panel when its header is clicked', async () => {
+        const { container } = render(Accordion, { panels: samplePanels });
+        const header = container.querySelector('[role="button"]');
+        await fireEvent.click(header);
+        expect(container.querySelectorAll('[role="region"]').length).toBe(1);
+    });
+    it('toggles panel closed when header is clicked again', async () => {
+        const { container } = render(Accordion, { panels: samplePanels });
+        const header = container.querySelector('[role="button"]');
+        await fireEvent.click(header);
+        expect(container.querySelectorAll('[role="region"]').length).toBe(1);
+        await fireEvent.click(header);
+        expect(container.querySelectorAll('[role="region"]').length).toBe(0);
+    });
+    it('opens panels listed in defaultOpen', () => {
+        const { container } = render(Accordion, { panels: samplePanels, defaultOpen: ['p2'] });
+        const items = container.querySelectorAll('.accordion-item');
+        const secondItem = Array.from(items).find(i => i.textContent?.includes('Second'));
+        const firstItem = Array.from(items).find(i => i.textContent?.includes('First'));
+        expect(secondItem.classList.contains('open')).toBe(true);
+        expect(firstItem.classList.contains('open')).toBe(false);
+    });
+    it('only allows one panel open when singleOpen is true', async () => {
+        const { container } = render(Accordion, { panels: samplePanels, singleOpen: true });
+        const buttons = container.querySelectorAll('[role="button"]');
+        const h1 = buttons[0];
+        const h2 = buttons[1];
+        await fireEvent.click(h1);
+        expect(container.querySelectorAll('[role="region"]').length).toBe(1);
+        await fireEvent.click(h2);
+        expect(container.querySelectorAll('[role="region"]').length).toBe(1);
+    });
+    it('does not open disabled panels', async () => {
+        const panels = [
+            { id: 'p1', title: 'Enabled', content: () => 'E' },
+            { id: 'p2', title: 'Disabled', content: () => 'D', disabled: true },
+        ];
+        const { container } = render(Accordion, { panels });
+        const buttons = container.querySelectorAll('[role="button"]');
+        const header = buttons[1]; // Disabled is second
+        await fireEvent.click(header);
+        expect(container.querySelectorAll('[role="region"]').length).toBe(0);
+    });
+    it('calls onOpenChange callback with new open ids in controlled mode', async () => {
+        const handleOpen = vi.fn();
+        const { container } = render(Accordion, { panels: samplePanels, open: [], onOpenChange: handleOpen });
+        const button = container.querySelector('[role="button"]');
+        await fireEvent.click(button);
+        expect(handleOpen).toHaveBeenCalledWith(['p1']);
+    });
+    it('applies aria-expanded to headers', async () => {
+        const { container } = render(Accordion, { panels: samplePanels });
+        const header = container.querySelector('[role="button"]');
+        expect(header.getAttribute('aria-expanded')).toBe('false');
+        await fireEvent.click(header);
+        expect(header.getAttribute('aria-expanded')).toBe('true');
+    });
+    it('displays nothing when panels array is empty', () => {
+        const { container } = render(Accordion, { panels: [] });
+        expect(container.querySelector('.accordion')).toBeNull();
+    });
+    it('sets aria-controls on header pointing to region', async () => {
+        const { container } = render(Accordion, { panels: samplePanels });
+        const header = container.querySelector('[role="button"]');
+        await fireEvent.click(header);
+        const controls = header.getAttribute('aria-controls');
+        expect(controls).toBeTruthy();
+        expect(container.querySelector(`#${controls}`)).not.toBeNull();
+    });
+    it('open panel region has role="region"', async () => {
+        const { container } = render(Accordion, { panels: samplePanels });
+        const header = container.querySelector('[role="button"]');
+        await fireEvent.click(header);
+        const region = container.querySelector('[role="region"]');
+        expect(region).not.toBeNull();
+    });
+});

package/dist/u0-primitives/accordion/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Accordion } from './Accordion.svelte';
+export type { Props } from './Accordion.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/u0-primitives/accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,YAAY,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/u0-primitives/accordion/index.js

@@ -0,0 +1 @@
+export { default as Accordion } from './Accordion.svelte';

package/dist/u0-primitives/allay-gauge/AllayGauge.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  interface Props {
+    stage: 0 | 1 | 2 | 3 | 4 | 5;
+    confidence: number;
+    size?: 'sm' | 'md' | 'lg';
+    showLabel?: boolean;
+  }
+
+  let { stage, confidence, size = 'md', showLabel = false }: Props = $props();
+
+  const STAGE_NAMES = ['Propose', 'Parse', 'Authorize', 'Execute', 'Trace', 'Replicate'];
+  const stageName = $derived(STAGE_NAMES[stage] ?? 'Unknown');
+  const pct = $derived(`${Math.round(confidence * 100)}%`);
+</script>
+
+<div class="allay-gauge size-{size}">
+  <div class="gauge-ring" style="--stage: {stage}; --confidence: {confidence}">
+    <span class="gauge-stage">{stage}</span>
+  </div>
+  {#if showLabel}
+    <span class="gauge-label">{stageName} · {pct}</span>
+  {/if}
+</div>
+
+<style>
+  .allay-gauge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+  .gauge-ring {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    border: 2px solid var(--color-accent);
+    background: conic-gradient(
+      var(--color-accent) calc(var(--confidence) * 360deg),
+      var(--border-subtle) calc(var(--confidence) * 360deg)
+    );
+  }
+  .size-sm .gauge-ring { width: 24px; height: 24px; }
+  .size-md .gauge-ring { width: 32px; height: 32px; }
+  .size-lg .gauge-ring { width: 48px; height: 48px; }
+  .gauge-stage {
+    font-family: var(--font-mono);
+    font-weight: 700;
+    color: var(--color-text-primary);
+  }
+  .size-sm .gauge-stage { font-size: 10px; }
+  .size-md .gauge-stage { font-size: var(--text-xs); }
+  .size-lg .gauge-stage { font-size: var(--text-sm); }
+  .gauge-label {
+    font-size: var(--text-xs);
+    color: var(--color-text-secondary);
+    font-family: var(--font-sans);
+  }
+</style>

package/dist/u0-primitives/allay-gauge/AllayGauge.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    stage: 0 | 1 | 2 | 3 | 4 | 5;
+    confidence: number;
+    size?: 'sm' | 'md' | 'lg';
+    showLabel?: boolean;
+}
+declare const AllayGauge: import("svelte").Component<Props, {}, "">;
+type AllayGauge = ReturnType<typeof AllayGauge>;
+export default AllayGauge;
+//# sourceMappingURL=AllayGauge.svelte.d.ts.map

package/dist/u0-primitives/allay-gauge/AllayGauge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AllayGauge.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/allay-gauge/AllayGauge.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAwBH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/{src → dist}/u0-primitives/animated-icon/AnimatedIcon.svelte

@@ -59,7 +59,7 @@
     
     <!-- Core -->
     <circle cx="20" cy="20" r="8" fill="currentColor"/>
-    <circle cx="17" cy="17" r="3" fill="white" opacity="0.3"/>
+     <circle cx="17" cy="17" r="3" fill="var(--color-text-inverse)" opacity="0.3"/>
     
   {:else if name === 'activity'}
     <!-- Activity bars -->
@@ -91,7 +91,7 @@
     </line>
     
     <!-- Data packet -->
-    <circle cx="12" cy="20" r="2" fill="white">
+     <circle cx="12" cy="20" r="2" fill="var(--color-text-inverse)">
       <animate attributeName="cx" values="12;28;12" dur={calcDuration(1500)} repeatCount="indefinite"/>
     </circle>
     
@@ -117,9 +117,9 @@
     <!-- Power plant silhouette with cooling tower -->
     <defs>
       <linearGradient id="brassGrad-{size}" x1="0%" y1="0%" x2="100%" y2="100%">
-        <stop offset="0%" stop-color="#d4956a"/>
-        <stop offset="50%" stop-color="#b87333"/>
-        <stop offset="100%" stop-color="#8a5626"/>
+        <stop offset="0%" stop-color="var(--color-accent-hover)"/>
+        <stop offset="50%" stop-color="var(--color-accent)"/>
+        <stop offset="100%" stop-color="var(--color-accent-active)"/>
       </linearGradient>
     </defs>
     
@@ -133,7 +133,7 @@
     
     {#if animation === 'steam'}
       <!-- Steam plumes -->
-      <g stroke="#d4956a" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.6">
+      <g stroke="var(--color-accent-hover)" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.6">
         <path d="M14 5 Q10 -5 15 -12">
           <animate attributeName="d" 
                    values="M14 5 Q10 -5 15 -12;M14 5 Q20 -5 10 -12;M14 5 Q10 -5 15 -12" 
@@ -204,7 +204,7 @@
     
     {#if animation === 'steam'}
       <!-- Rising particles -->
-      <g fill="#d4956a">
+      <g fill="var(--color-accent-hover)">
         <circle cx="17" cy="10" r="1.5" opacity="0">
           <animate attributeName="cy" values="12;-8" dur={calcDuration(2500)} repeatCount="indefinite"/>
           <animate attributeName="opacity" values="0;0.8;0" dur={calcDuration(2500)} repeatCount="indefinite"/>

package/dist/u0-primitives/animated-icon/AnimatedIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+ * AnimatedIcon - U0 Primitive
+ *
+ * SMIL-based animated SVG icons. Zero JS overhead, GPU-accelerated.
+ * Aligns with x0-enchanted-blocks "enchanted" philosophy via declarative animation.
+ *
+ * @package @kos/design-system/u0-primitives
+ * @adr 2026-04-17-smil-animated-icons
+ */
+type AnimationType = 'pulse' | 'orbit' | 'wave' | 'breathe' | 'spin' | 'steam' | 'energy-arcs';
+type IconName = 'power-node' | 'activity' | 'connection' | 'status-ring' | 'power-plant' | 'orbital-ring' | 'steam-tower' | 'energy-pulse';
+interface Props {
+    name: IconName;
+    size?: number;
+    color?: string;
+    animation?: AnimationType;
+    speed?: number;
+}
+declare const AnimatedIcon: import("svelte").Component<Props, {}, "">;
+type AnimatedIcon = ReturnType<typeof AnimatedIcon>;
+export default AnimatedIcon;
+//# sourceMappingURL=AnimatedIcon.svelte.d.ts.map

package/dist/u0-primitives/animated-icon/AnimatedIcon.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedIcon.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/animated-icon/AnimatedIcon.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;GAQG;AAEH,KAAK,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,aAAa,CAAC;AAC/F,KAAK,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GAAG,aAAa,GAAG,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,cAAc,CAAC;AAE3I,UAAU,KAAK;IACb,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6OH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/u0-primitives/animated-icon/README.md

@@ -0,0 +1,70 @@
+# AnimatedIcon
+
+SMIL-based animated SVG icons. Zero JavaScript overhead, GPU-accelerated via browser-native SVG animation.
+
+## Philosophy
+
+Aligns with LEAP's "enchanted" component philosophy from x0-enchanted-blocks:
+- **Declarative**: Animations defined in markup, not JavaScript
+- **Performant**: SMIL runs on the browser's compositor thread
+- **Accessible**: Respects `prefers-reduced-motion` automatically
+
+## Usage
+
+```svelte
+<script>
+  import { AnimatedIcon } from '@kos/design-system/u0-primitives/animated-icon';
+</script>
+
+<AnimatedIcon name="power-node" animation="pulse" size={40} />
+<AnimatedIcon name="activity" animation="wave" speed={0.5} />
+<AnimatedIcon name="connection" color="#27ae60" />
+<AnimatedIcon name="energy-pulse" animation="energy-arcs" />
+```
+
+## Icons
+
+| Name | Description | Animations |
+|------|-------------|------------|
+| `power-node` | Energy/data center node | `pulse`, `orbit` |
+| `activity` | Audio/video activity bars | `wave` (default) |
+| `connection` | Network/data flow | `pulse` (default) |
+| `status-ring` | Loading/progress ring | `spin`, `breathe` |
+| `power-plant` | Power plant silhouette with cooling tower | `steam`, `pulse` |
+| `orbital-ring` | Orbital ring with rotating elements | `pulse` (default) |
+| `steam-tower` | Minimal steam tower with rising particles | `steam` (default) |
+| `energy-pulse` | Energy pulse with radiating arcs | `pulse`, `energy-arcs` |
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `IconName` | required | Icon identifier |
+| `size` | `number` | `40` | ViewBox size (px) |
+| `color` | `string` | `var(--color-accent)` | CSS color value |
+| `animation` | `AnimationType` | `'pulse'` | Animation style |
+| `speed` | `number` | `1` | Multiplier (0.5 = slower, 2 = faster) |
+
+## Animation Types
+
+| Animation | Icons | Description |
+|-----------|-------|-------------|
+| `pulse` | power-node, connection, status-ring, power-plant, orbital-ring, steam-tower, energy-pulse | Pulsing/radiating opacity or size |
+| `orbit` | power-node | Orbiting dot around center |
+| `wave` | activity | Bar height oscillation |
+| `spin` | status-ring | Rotating segments |
+| `breathe` | status-ring | Opacity fade in/out |
+| `steam` | power-plant, steam-tower | Rising steam/particle plumes |
+| `energy-arcs` | energy-pulse | Radiating line arcs in 4 directions |
+
+## Design Tokens
+
+Uses standard LEAP accent colors:
+- `--color-accent` (primary)
+- `--color-accent-hover`
+- `--epistemic-live` (success states)
+- `--epistemic-pending` (warning states)
+
+## Browser Support
+
+SMIL is supported in all modern browsers. For legacy environments, icons degrade gracefully to static SVG.

package/dist/u0-primitives/animated-icon/index.d.ts

@@ -0,0 +1,9 @@
+export { default as AnimatedIcon } from './AnimatedIcon.svelte';
+export type AnimatedIconName = 'power-node' | 'activity' | 'connection' | 'status-ring' | 'power-plant' | 'orbital-ring' | 'steam-tower' | 'energy-pulse';
+export type AnimationType = 'pulse' | 'orbit' | 'wave' | 'breathe' | 'spin' | 'steam' | 'energy-arcs';
+export declare const ANIMATION_SPEEDS: {
+    readonly slow: 0.5;
+    readonly normal: 1;
+    readonly fast: 2;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/u0-primitives/animated-icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/animated-icon/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGhE,MAAM,MAAM,gBAAgB,GACxB,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,aAAa,GACb,aAAa,GACb,cAAc,GACd,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,MAAM,aAAa,GACrB,OAAO,GACP,OAAO,GACP,MAAM,GACN,SAAS,GACT,MAAM,GACN,OAAO,GACP,aAAa,CAAC;AAGlB,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC"}

package/dist/u0-primitives/animated-icon/index.js

@@ -0,0 +1,9 @@
+// AnimatedIcon - SMIL-based animated SVG icons
+// Zero JS overhead, GPU-accelerated declarative animations
+export { default as AnimatedIcon } from './AnimatedIcon.svelte';
+// Animation duration presets (ms)
+export const ANIMATION_SPEEDS = {
+    slow: 0.5, // 2x duration
+    normal: 1, // base duration
+    fast: 2, // 0.5x duration
+};

package/{src → dist}/u0-primitives/avatar/Avatar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
 
-  interface Props {
+  export interface Props {
     src?: string;
     name?: string;
     size?: 'sm' | 'md' | 'lg' | 'xl';
@@ -142,7 +142,7 @@
     z-index: 10;
   }
 
-  .status-online { background-color: var(--color-online); box-shadow: 0 0 6px rgba(74, 222, 128, 0.4); }
+   .status-online { background-color: var(--color-online); box-shadow: 0 0 6px var(--color-cyan-glow); }
   .status-away { background-color: var(--color-away); }
   .status-busy { background-color: var(--color-busy); }
   .status-offline { background-color: var(--color-offline); }
@@ -162,7 +162,7 @@
   .typing-dot {
     width: 3px;
     height: 3px;
-    background-color: #111;
+     background-color: var(--color-text-inverse);
     border-radius: var(--radius-full);
     animation: typing-bounce 1.4s infinite ease-in-out both;
   }

package/dist/u0-primitives/avatar/Avatar.svelte.d.ts

@@ -0,0 +1,11 @@
+export interface Props {
+    src?: string;
+    name?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    status?: 'online' | 'offline' | 'away' | 'busy' | 'typing' | null;
+    class?: string;
+}
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;
+//# sourceMappingURL=Avatar.svelte.d.ts.map

package/dist/u0-primitives/avatar/Avatar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/avatar/Avatar.svelte.ts"],"names":[],"mappings":"AAME,MAAM,WAAW,KAAK;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuDH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}