@stephen-netu/design-system 0.1.0 → 0.2.1

package/dist/u0-primitives/VerticalToolbar.svelte

@@ -0,0 +1,208 @@
+<script lang="ts" module>
+  /**
+   * 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;
+  }
+</script>
+
+<script lang="ts">
+  interface Props {
+    items: ToolbarItem[];
+    position?: 'left' | 'right';
+    class?: string;
+  }
+
+  let { items, position = 'left', class: className = '' }: Props = $props();
+
+  let hoveredId = $state<string | null>(null);
+
+  function handleClick(item: ToolbarItem) {
+    if (!item.disabled) {
+      item.onClick?.();
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent, item: ToolbarItem) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleClick(item);
+    }
+  }
+</script>
+
+<nav class="vertical-toolbar vertical-toolbar--{position} {className}" aria-label="Toolbar">
+  {#each items as item (item.id)}
+    <button
+      class="toolbar-item"
+      class:active={item.active}
+      class:disabled={item.disabled}
+      onclick={() => handleClick(item)}
+      onmouseenter={() => hoveredId = item.id}
+      onmouseleave={() => hoveredId = null}
+      onfocus={() => hoveredId = item.id}
+      onblur={() => hoveredId = null}
+      onkeydown={(e) => handleKeydown(e, item)}
+      aria-label={item.label}
+      type="button"
+      disabled={item.disabled}
+    >
+      <span class="toolbar-icon">
+        {@html item.icon}
+      </span>
+
+      {#if item.badge !== undefined && item.badge !== null && item.badge !== ''}
+        <span class="toolbar-badge">{item.badge}</span>
+      {/if}
+
+      {#if hoveredId === item.id}
+        <span 
+          class="toolbar-tooltip"
+          class:tooltip-right={position === 'left'}
+          class:tooltip-left={position === 'right'}
+        >
+          {item.label}
+        </span>
+      {/if}
+    </button>
+  {/each}
+</nav>
+
+<style>
+  .vertical-toolbar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-1, 0.25rem);
+    padding: var(--space-2, 0.5rem) 0;
+    height: 100%;
+    overflow-y: auto;
+    background: var(--color-bg-canvas);
+  }
+
+  .vertical-toolbar--left {
+    border-right: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.06));
+  }
+
+  .vertical-toolbar--right {
+    border-left: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.06));
+  }
+
+  .toolbar-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--radius-md, 4px);
+    color: var(--color-text-muted, var(--color-text-muted-token, #6b6558));
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .toolbar-item:hover:not(:disabled) {
+    background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
+    color: var(--color-text-secondary, #a8a08c);
+  }
+
+  .toolbar-item:focus-visible {
+    outline: 2px solid var(--color-accent, var(--color-accent));
+    outline-offset: -2px;
+  }
+
+  .toolbar-item.active {
+    color: var(--color-accent, var(--color-accent));
+    background: var(--color-accent-subtle, var(--color-accent-muted));
+    border-color: var(--color-accent-muted, var(--color-accent-muted));
+  }
+
+  .toolbar-item.active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 20px;
+    background: var(--color-accent, var(--color-accent));
+    border-radius: 0 2px 2px 0;
+  }
+
+  .toolbar-item:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .toolbar-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+  }
+
+  .toolbar-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .toolbar-badge {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    min-width: 14px;
+    height: 14px;
+    padding: 0 4px;
+    background: var(--color-accent, var(--color-accent));
+    color: var(--color-bg-app, #141414);
+    font-size: 10px;
+    font-weight: 600;
+    border-radius: var(--radius-full, 9999px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .toolbar-tooltip {
+    position: absolute;
+    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
+    background: var(--color-bg-panel-elevated, #2a2a2a);
+    color: var(--color-text-primary, #f2efe9);
+    font-size: var(--text-xs, 0.75rem);
+    white-space: nowrap;
+    border-radius: var(--radius-md, 4px);
+    pointer-events: none;
+    z-index: 1000;
+    box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.3));
+  }
+
+  .toolbar-tooltip.tooltip-right {
+    left: calc(100% + var(--space-2, 0.5rem));
+  }
+
+  .toolbar-tooltip.tooltip-left {
+    right: calc(100% + var(--space-2, 0.5rem));
+  }
+</style>

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"}