@stephen-netu/design-system 0.2.1 → 0.5.1

package/dist/u0-primitives/command-palette/CommandPalette.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/command-palette/CommandPalette.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAmC,MAAM,iBAAiB,CAAC;AAGpF,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,KAAK;IACb,kEAAkE;IAClE,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,iDAAiD;IACjD,OAAO,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,4DAA4D;IAC5D,SAAS,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC;IAClG,uCAAuC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAmTH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CommandPalette.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/command-palette/CommandPalette.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAmC,MAAM,iBAAiB,CAAC;AAGpF,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,KAAK;IACb,kEAAkE;IAClE,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,iDAAiD;IACjD,OAAO,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,4DAA4D;IAC5D,SAAS,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC;IAClG,uCAAuC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAsUH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/u0-primitives/command-palette/CommandPalette.test.js

@@ -0,0 +1,202 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import CommandPalette from './CommandPalette.svelte';
+const sampleCommands = [
+    {
+        id: 'grove.invite',
+        path: ['grove', 'invite'],
+        description: 'Invite a user to the grove',
+        parameters: [
+            { name: 'user', description: 'User to invite', required: true, paramType: 'user' },
+            { name: 'role', description: 'Role to assign', required: false, paramType: 'string' },
+        ],
+        requiredCapabilities: ['grove.manage'],
+        contexts: ['grove'],
+    },
+    {
+        id: 'agent.mode',
+        path: ['agent', 'mode'],
+        description: 'Switch agent mode',
+        parameters: [
+            { name: 'mode', description: 'Mode name', required: true, paramType: 'choice', choices: ['fast', 'deep'] },
+        ],
+        requiredCapabilities: [],
+        contexts: ['agent'],
+    },
+    {
+        id: 'task.create',
+        path: ['task', 'create'],
+        description: 'Create a new task',
+        parameters: [
+            { name: 'title', description: 'Task title', required: true, paramType: 'string' },
+        ],
+        requiredCapabilities: ['task.write'],
+        contexts: ['global'],
+    },
+];
+function renderPalette(props = {}) {
+    return render(CommandPalette, {
+        props: {
+            commands: sampleCommands,
+            context: { realmId: 'r1' },
+            onExecute: vi.fn().mockResolvedValue({ success: true, message: 'Done' }),
+            onClose: vi.fn(),
+            ...props,
+        },
+    });
+}
+async function openPalette(container) {
+    await fireEvent.keyDown(window, { key: '/' });
+}
+describe('CommandPalette', () => {
+    afterEach(() => cleanup());
+    it('does not render when closed', () => {
+        const { container } = renderPalette();
+        expect(container.querySelector('.command-palette')).toBeNull();
+    });
+    it('renders the palette container when open', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        expect(container.querySelector('.command-palette')).not.toBeNull();
+    });
+    it('has role="dialog" on the palette container', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        expect(container.querySelector('.command-palette').getAttribute('role')).toBe('dialog');
+    });
+    it('shows the command list with commands when open', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        expect(container.querySelectorAll('[role="option"]').length).toBe(3);
+    });
+    it('renders command list with role="listbox"', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        expect(container.querySelector('[role="listbox"]')).not.toBeNull();
+    });
+    it('renders each command option with role="option"', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        const options = container.querySelectorAll('[role="option"]');
+        expect(options.length).toBe(3);
+    });
+    it('clicking a command selects it and shows parameter chips', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        const options = container.querySelectorAll('[role="option"]');
+        await fireEvent.click(options[0]);
+        expect(container.querySelectorAll('.param-chip').length).toBe(2);
+    });
+    it('shows parameter chips for the active command', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        await fireEvent.click(container.querySelectorAll('[role="option"]')[0]);
+        const chips = container.querySelectorAll('.param-chip');
+        expect(chips[0].textContent).toContain('user');
+        expect(chips[1].textContent).toContain('role');
+    });
+    it('displays keyboard help text', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        const help = container.querySelector('.help');
+        expect(help).not.toBeNull();
+        expect(help.textContent).toContain('Enter');
+        expect(help.textContent).toContain('Esc');
+    });
+    it('calls onClose when Escape is pressed in browse mode', async () => {
+        const handleClose = vi.fn();
+        const { container } = renderPalette({ onClose: handleClose });
+        await openPalette(container);
+        await fireEvent.keyDown(window, { key: 'Escape' });
+        expect(handleClose).toHaveBeenCalledTimes(1);
+    });
+    it('shows commands when open in browse mode', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        const options = container.querySelectorAll('[role="option"]');
+        expect(options.length).toBe(3);
+    });
+    it('marks required parameters with the required class', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        await fireEvent.click(container.querySelectorAll('[role="option"]')[0]);
+        const chips = container.querySelectorAll('.param-chip');
+        expect(chips[0].classList.contains('required')).toBe(true);
+    });
+    it('marks the current parameter with the current class', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        await fireEvent.click(container.querySelectorAll('[role="option"]')[0]);
+        const chips = container.querySelectorAll('.param-chip');
+        expect(chips[0].classList.contains('current')).toBe(true);
+    });
+    it('marks a filled parameter with the filled class', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        await fireEvent.click(container.querySelectorAll('[role="option"]')[0]);
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: 'alice' } });
+        await fireEvent.keyDown(input, { key: 'Enter' });
+        const chips = container.querySelectorAll('.param-chip');
+        expect(chips[0].classList.contains('filled')).toBe(true);
+    });
+    it('shows success feedback after successful command execution', async () => {
+        const handleExecute = vi.fn().mockResolvedValue({ success: true, message: 'Invited!' });
+        const { container } = renderPalette({ onExecute: handleExecute });
+        await openPalette(container);
+        await fireEvent.click(container.querySelectorAll('[role="option"]')[0]);
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: 'alice' } });
+        await fireEvent.keyDown(input, { key: 'Enter' });
+        await new Promise(r => setTimeout(r, 50));
+        const feedback = container.querySelector('.feedback');
+        expect(feedback).not.toBeNull();
+        expect(feedback.classList.contains('success')).toBe(true);
+        expect(feedback.textContent).toBe('Invited!');
+    });
+    it('shows error feedback after failed command execution', async () => {
+        const handleExecute = vi.fn().mockResolvedValue({ success: false, message: 'No permission' });
+        const { container } = renderPalette({ onExecute: handleExecute });
+        await openPalette(container);
+        await fireEvent.click(container.querySelectorAll('[role="option"]')[0]);
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: 'alice' } });
+        await fireEvent.keyDown(input, { key: 'Enter' });
+        await new Promise(r => setTimeout(r, 50));
+        const feedback = container.querySelector('.feedback');
+        expect(feedback).not.toBeNull();
+        expect(feedback.classList.contains('error')).toBe(true);
+        expect(feedback.textContent).toBe('No permission');
+    });
+    it('selects a command on Enter key in browse mode', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        const options = container.querySelectorAll('[role="option"]');
+        await fireEvent.keyDown(options[0], { key: 'Enter' });
+        expect(container.querySelectorAll('.param-chip').length).toBe(2);
+    });
+    it('has aria-label on the dialog', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        expect(container.querySelector('.command-palette').getAttribute('aria-label')).toBe('Command palette');
+    });
+    it('has aria-selected on command options', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        const options = container.querySelectorAll('[role="option"]');
+        expect(options[0].getAttribute('aria-selected')).toBe('true');
+        expect(options[1].getAttribute('aria-selected')).toBe('false');
+    });
+    it('renders the slash prefix in browse mode', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        expect(container.querySelector('.slash')).not.toBeNull();
+    });
+    it('renders command prefix when a command is active', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        await fireEvent.click(container.querySelectorAll('[role="option"]')[0]);
+        expect(container.querySelector('.command-prefix')).not.toBeNull();
+        expect(container.querySelector('.command-prefix').textContent).toBe('/grove,invite');
+    });
+});

package/dist/u0-primitives/command-palette/commandStore.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"commandStore.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/command-palette/commandStore.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,cAAc,EAGd,WAAW,EACZ,MAAM,iBAAiB,CAAC;AAOzB,8CAA8C;AAC9C,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,kDAAkD;AAClD,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,aAAa,CAAC;IACvB,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACvB;AAgBD,cAAM,YAAY;IAEhB,QAAQ,6BAAoD;IAC5D,aAAa,8BAA6C;IAC1D,YAAY,cAAkC;IAC9C,WAAW,UAAiB;IAC5B,UAAU,uBAAsC;IAGhD,cAAc,kBAGZ;IAGF,cAAc,iBAAoC;IAGlD,iBAAiB,kBAKf;IAGF,OAAO,CAAC,eAAe,CAAgC;IAEvD;;;OAGG;IACG,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAiB1C;;;OAGG;IACH,QAAQ,CAAC,MAAM,EAAE,aAAa,GAAG,IAAI;IAMrC;;;OAGG;IACH,YAAY,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO;IAyBxC;;OAEG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAgCrC;;OAEG;IACH,YAAY,IAAI,OAAO;IAcvB;;OAEG;IACH,MAAM,IAAI,IAAI;IASd;;;;;OAKG;IACG,OAAO,IAAI,OAAO,CAAC,aAAa,CAAC;IA+DvC;;OAEG;IACG,YAAY,CAChB,IAAI,EAAE,WAAW,EACjB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACjC,OAAO,CAAC,aAAa,CAAC;IAczB;;;OAGG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG;QAAE,OAAO,CAAC,EAAE,aAAa,CAAC;QAAC,IAAI,EAAE,MAAM,EAAE,CAAA;KAAE;IA4BjE;;OAEG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,EAAE;IAQtC;;OAEG;IACH,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMzC;;OAEG;IACH,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI;IAYrC;;OAEG;IACH,OAAO,IAAI,IAAI;CAKhB;AAGD,eAAO,MAAM,YAAY,cAAqB,CAAC"}
+{"version":3,"file":"commandStore.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/command-palette/commandStore.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,cAAc,EAGd,WAAW,EACZ,MAAM,iBAAiB,CAAC;AAYzB,8CAA8C;AAC9C,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,kDAAkD;AAClD,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,aAAa,CAAC;IACvB,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACvB;AAgBD,cAAM,YAAY;IAEhB,QAAQ,6BAAoD;IAC5D,aAAa,8BAA6C;IAC1D,YAAY,cAAkC;IAC9C,WAAW,UAAiB;IAC5B,UAAU,uBAAsC;IAGhD,cAAc,kBAGZ;IAGF,cAAc,iBAAoC;IAGlD,iBAAiB,kBAKf;IAGF,OAAO,CAAC,eAAe,CAAgC;IAEvD;;;OAGG;IACG,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAiB1C;;;OAGG;IACH,QAAQ,CAAC,MAAM,EAAE,aAAa,GAAG,IAAI;IAMrC;;;OAGG;IACH,YAAY,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO;IAyBxC;;OAEG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAgCrC;;OAEG;IACH,YAAY,IAAI,OAAO;IAcvB;;OAEG;IACH,MAAM,IAAI,IAAI;IASd;;;;;OAKG;IACG,OAAO,IAAI,OAAO,CAAC,aAAa,CAAC;IA+DvC;;OAEG;IACG,YAAY,CAChB,IAAI,EAAE,WAAW,EACjB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACjC,OAAO,CAAC,aAAa,CAAC;IAczB;;;OAGG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG;QAAE,OAAO,CAAC,EAAE,aAAa,CAAC;QAAC,IAAI,EAAE,MAAM,EAAE,CAAA;KAAE;IA4BjE;;OAEG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,EAAE;IAQtC;;OAEG;IACH,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMzC;;OAEG;IACH,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI;IAYrC;;OAEG;IACH,OAAO,IAAI,IAAI;CAKhB;AAGD,eAAO,MAAM,YAAY,cAAqB,CAAC"}

package/dist/u0-primitives/command-palette/commandStore.svelte.js

@@ -9,7 +9,8 @@
  *   - S-05: AbortController for killable operations
  */
 async function tauriInvoke(command, payload) {
-    const mod = await import('@tauri-apps/api/core');
+    const spec = '@tauri-apps/api/core';
+    const mod = await import(/* @vite-ignore */ spec);
     return mod.invoke(command, payload);
 }
 class CommandStore {

package/dist/u0-primitives/dropdown/Dropdown.svelte

@@ -204,14 +204,14 @@
 
   .ds-dropdown-menu {
     position: absolute;
-    top: calc(100% + var(--space-2));
+    top: calc(100% + 2px);
     background: var(--color-bg-panel-elevated);
     border: 1px solid var(--border-default);
-    border-radius: var(--radius-md);
-     box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.3);
-    padding: var(--space-1);
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
     z-index: 1000;
-    animation: ds-scale-in var(--transition-fast) transform-origin;
+    animation: ds-fade-in var(--transition-fast) linear;
   }
 
   /* Alignments */
@@ -223,18 +223,22 @@
     display: flex;
     align-items: center;
     width: 100%;
-    padding: var(--space-2) var(--space-3);
+    height: var(--ui-row-h);
+    padding: 0 var(--ui-pad-x);
     border: none;
+    border-bottom: 1px solid var(--border-default);
     background: transparent;
-    border-radius: var(--radius-sm);
+    border-radius: 0;
     color: var(--color-text-primary);
     font-family: var(--font-sans);
-    font-size: var(--text-sm);
+    font-size: var(--ui-font);
     text-align: left;
     cursor: pointer;
-    transition: background var(--transition-fast), color var(--transition-fast);
+    transition: background var(--transition-fast) linear;
   }
 
+  .ds-dropdown-item:last-child { border-bottom: 0; }
+
   .ds-dropdown-item:hover,
   .ds-dropdown-item:focus {
     background: var(--color-bg-panel);
@@ -242,7 +246,8 @@
   }
 
   .ds-dropdown-item:focus-visible {
-    background: var(--color-accent-muted); /* Suble brass focus */
+    background: var(--color-accent-subtle);
+    box-shadow: inset 2px 0 0 var(--color-accent);
   }
 
   .ds-dropdown-item:disabled {
@@ -284,25 +289,15 @@
   .ds-dropdown-shortcut {
     margin-left: var(--space-4);
     font-family: var(--font-mono);
-    font-size: var(--text-xs);
+    font-size: var(--ui-label);
     color: var(--color-text-muted);
     background: var(--color-bg-app);
-    padding: 2px 6px;
-    border-radius: var(--radius-sm, 4px);
+    padding: 1px 5px;
     border: 1px solid var(--border-subtle);
   }
 
-  @keyframes ds-scale-in {
-    from { opacity: 0; transform: scale(0.95); }
-    to { opacity: 1; transform: scale(1); }
-  }
-
-  .align-center {
-    animation-name: ds-scale-in-center;
-  }
-
-  @keyframes ds-scale-in-center {
-    from { opacity: 0; transform: translateX(-50%) scale(0.95); }
-    to { opacity: 1; transform: translateX(-50%) scale(1); }
+  @keyframes ds-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
   }
 </style>

package/dist/u0-primitives/dropdown/Dropdown.test.js

@@ -9,7 +9,7 @@ const sampleItems = [
 function renderDropdown(props = {}) {
     return render(Dropdown, {
         items: sampleItems,
-        trigger: () => '<button>Open</button>',
+        trigger: (() => ''),
         ...props,
     });
 }

package/dist/u0-primitives/grant-badge/GrantStatusBadge.svelte

@@ -44,10 +44,10 @@
     display: inline-flex;
     align-items: center;
     gap: var(--space-1);
-    font-family: var(--font-sans);
+    font-family: var(--font-mono);
     font-weight: 600;
     white-space: nowrap;
-    border-radius: var(--radius-full);
+    border-radius: 0;
   }
 
   .ds-grant-status-dot {

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

@@ -3,6 +3,9 @@ export { default as Input } from './input/Input.svelte';
 export { default as Card } from './card/Card.svelte';
 export { default as Badge } from './badge/Badge.svelte';
 export { default as ValidityBadge } from './badge/ValidityBadge.svelte';
+export { default as LiveDot } from './live-dot/LiveDot.svelte';
+export { default as ThemeSwatchGroup } from './theme-swatch-group/ThemeSwatchGroup.svelte';
+export { default as WindowFrame } from './window-frame/WindowFrame.svelte';
 export { default as Avatar } from './avatar/Avatar.svelte';
 export { default as Toggle } from './toggle/Toggle.svelte';
 export { default as Tooltip } from './tooltip/Tooltip.svelte';
@@ -10,6 +13,8 @@ export { default as Dropdown } from './dropdown/Dropdown.svelte';
 export { default as Tabs } from './tabs/Tabs.svelte';
 export type { Tab } from './tabs/tabs-types';
 export { default as Spinner } from './spinner/Spinner.svelte';
+export { default as SurfaceState } from './surface-state/SurfaceState.svelte';
+export type { SurfaceStateKind, Props as SurfaceStateProps } from './surface-state/SurfaceState.svelte';
 export { default as Modal } from './modal/Modal.svelte';
 export { default as AnimatedIcon } from './animated-icon/AnimatedIcon.svelte';
 export type { AnimatedIconName, AnimationType } from './animated-icon/index.js';
@@ -24,4 +29,7 @@ export * from './rsvp/rsvp-utils';
 export { CommandPalette, commandStore } from './command-palette';
 export type { CommandSchema, CommandParameter, CommandResult, CommandContext, InvocationContext, CommandUIState, ActiveCommandSession, } from './command-palette';
 export { default as GrantStatusBadge } from './grant-badge/GrantStatusBadge.svelte';
+export { default as AllayGauge } from './allay-gauge/AllayGauge.svelte';
+export { KosButton } from './web-components/button-component';
+export { KosInput } from './web-components/input-component';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/u0-primitives/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,oBAAoB,CAAC;AACrD,YAAY,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAC9E,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAGhF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,YAAY,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AACvE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGlE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACjE,cAAc,mBAAmB,CAAC;AAGlC,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjE,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,oBAAoB,GACrB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uCAAuC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/u0-primitives/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,oBAAoB,CAAC;AACrD,YAAY,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAC9E,YAAY,EAAE,gBAAgB,EAAE,KAAK,IAAI,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxG,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAC9E,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAGhF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,YAAY,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AACvE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGlE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACjE,cAAc,mBAAmB,CAAC;AAGlC,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjE,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,oBAAoB,GACrB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAGpF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAGxE,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC"}

package/dist/u0-primitives/index.js

@@ -4,12 +4,16 @@ export { default as Input } from './input/Input.svelte';
 export { default as Card } from './card/Card.svelte';
 export { default as Badge } from './badge/Badge.svelte';
 export { default as ValidityBadge } from './badge/ValidityBadge.svelte';
+export { default as LiveDot } from './live-dot/LiveDot.svelte';
+export { default as ThemeSwatchGroup } from './theme-swatch-group/ThemeSwatchGroup.svelte';
+export { default as WindowFrame } from './window-frame/WindowFrame.svelte';
 export { default as Avatar } from './avatar/Avatar.svelte';
 export { default as Toggle } from './toggle/Toggle.svelte';
 export { default as Tooltip } from './tooltip/Tooltip.svelte';
 export { default as Dropdown } from './dropdown/Dropdown.svelte';
 export { default as Tabs } from './tabs/Tabs.svelte';
 export { default as Spinner } from './spinner/Spinner.svelte';
+export { default as SurfaceState } from './surface-state/SurfaceState.svelte';
 export { default as Modal } from './modal/Modal.svelte';
 export { default as AnimatedIcon } from './animated-icon/AnimatedIcon.svelte';
 // New from NNJAS port
@@ -23,3 +27,8 @@ export * from './rsvp/rsvp-utils';
 export { CommandPalette, commandStore } from './command-palette';
 // Grant Status Badge — Grant lifecycle status indicator
 export { default as GrantStatusBadge } from './grant-badge/GrantStatusBadge.svelte';
+// Allay Gauge — Allay-pipeline stage + confidence indicator
+export { default as AllayGauge } from './allay-gauge/AllayGauge.svelte';
+// Web Component wrappers for non-Svelte consumers
+export { KosButton } from './web-components/button-component';
+export { KosInput } from './web-components/input-component';

package/dist/u0-primitives/input/Input.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { EditorState } from '@codemirror/state';
   import type { Snippet } from 'svelte';
-
-  export interface AutocompleteResult {
-    completions: Array<{ label: string; type?: string; detail?: string }>;
-  }
+  import type { Completion, CompletionSource } from '../../editor/extensions/types';
 
   export interface AutocompleteConfig {
-    source: { complete: (query: string) => Promise<AutocompleteResult> | AutocompleteResult };
+    source: CompletionSource;
     maxVisible?: number;
     minChars?: number;
   }
@@ -25,6 +24,8 @@
     autocomplete?: AutocompleteConfig;
   }
 
+  type CompletionItem = Pick<Completion, 'label' | 'type' | 'detail'>;
+
   let {
     value = $bindable(''),
     type = 'text',
@@ -41,32 +42,90 @@
 
   let isFocused = $state(false);
   let showPassword = $state(false);
-  let completions = $state<Array<{ label: string; type?: string; detail?: string }>>([]);
+  let completions = $state<CompletionItem[]>([]);
   let showCompletions = $state(false);
   let selectedIndex = $state(0);
+  let fetchSeq = $state(0);
+  let completionFrom = $state(0);
+  let completionTo = $state(0);
+
+  onDestroy(() => {
+    fetchSeq += 1;
+  });
 
   let currentType = $derived(type === 'password' && showPassword ? 'text' : type);
   let maxVisible = $derived(autocomplete?.maxVisible ?? 8);
   let minChars = $derived(autocomplete?.minChars ?? 1);
 
+  function createCompletionContext(query: string): Parameters<CompletionSource>[0] {
+    const state = EditorState.create({ doc: query });
+
+    return {
+      state,
+      pos: query.length,
+      explicit: true,
+      matchBefore: (regexp) => {
+        const match = query.match(regexp);
+
+        if (!match || match.index === undefined) {
+          return null;
+        }
+
+        return {
+          from: match.index,
+          to: match.index + match[0].length,
+          text: match[0],
+        };
+      },
+    } as Parameters<CompletionSource>[0];
+  }
+
   async function fetchCompletions(query: string) {
-    if (!autocomplete || query.length < minChars) {
+    if (!autocomplete || disabled || query.length < minChars) {
       completions = [];
       showCompletions = false;
       return;
     }
-    const result = await autocomplete.source.complete(query);
-    completions = result.completions.slice(0, maxVisible);
-    selectedIndex = 0;
-    showCompletions = completions.length > 0;
+
+    const seq = fetchSeq;
+
+    try {
+      const result = await autocomplete.source(createCompletionContext(query));
+
+      if (seq !== fetchSeq) return;
+
+      const options = result?.options ?? [];
+
+      completionFrom = result?.from ?? 0;
+      completionTo = result?.to ?? query.length;
+
+      completions = options.slice(0, maxVisible).map((completion) => ({
+        label: completion.label,
+        type: completion.type,
+        detail: completion.detail,
+      }));
+      selectedIndex = 0;
+      showCompletions = completions.length > 0;
+    } catch {
+      if (seq !== fetchSeq) return;
+      completions = [];
+      showCompletions = false;
+    }
   }
 
-  function applyCompletion(completion: { label: string }) {
-    value = completion.label;
+  function applyCompletion(completion: CompletionItem) {
+    value = value.slice(0, completionFrom) + completion.label + value.slice(completionTo);
     completions = [];
     showCompletions = false;
   }
 
+  function handleCompletionKeydown(e: KeyboardEvent, completion: CompletionItem) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      applyCompletion(completion);
+    }
+  }
+
   function handleInput() {
     fetchCompletions(value);
   }
@@ -131,6 +190,7 @@
     aria-invalid={error ? 'true' : undefined}
     aria-disabled={disabled ? 'true' : undefined}
     aria-autocomplete={autocomplete ? 'list' : undefined}
+    aria-controls={showCompletions ? 'autocomplete-list' : undefined}
     aria-expanded={showCompletions ? 'true' : 'false'}
     aria-activedescendant={showCompletions ? `autocomplete-option-${selectedIndex}` : undefined}
     autocomplete="off"
@@ -182,8 +242,10 @@
           id="autocomplete-option-{i}"
           role="option"
           aria-selected={i === selectedIndex}
+          tabindex={i === selectedIndex ? 0 : -1}
           class:selected={i === selectedIndex}
           onclick={() => applyCompletion(completion)}
+          onkeydown={(e) => handleCompletionKeydown(e, completion)}
           class="ds-input-autocomplete__item"
         >
           {#if completion.type}
@@ -241,14 +303,14 @@
   .ds-input-element {
     flex: 1;
     width: 100%;
-    height: 2.25rem;
-    padding: 0 var(--space-3);
+    height: var(--ui-control-h);
+    padding: 0 var(--ui-pad-x);
     background: transparent;
     border: none;
     outline: none;
     color: var(--color-text-primary);
     font-family: var(--font-sans);
-    font-size: var(--text-sm);
+    font-size: var(--ui-font);
   }
 
   .ds-input-wrapper.has-leading .ds-input-element {
@@ -316,12 +378,12 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 1px;
+    height: 2px;
     background: var(--color-accent);
     transform: scaleX(0);
     transform-origin: center;
     transition: transform var(--transition-normal);
-    box-shadow: 0 -1px 4px var(--color-accent-glow);
+    /* crisp accent live-edge on focus — no glow halo (depth by edge, not blur) */
   }
 
   .ds-input-wrapper.is-focused .ds-input-glow {
@@ -368,8 +430,9 @@
 
   .ds-input-autocomplete__item:hover,
   .ds-input-autocomplete__item.selected {
-    background: var(--color-accent, #b87333);
-    color: #fff;
+    background: var(--color-accent-subtle);
+    color: var(--color-text-primary);
+    box-shadow: inset 2px 0 0 var(--color-accent);
   }
 
   .ds-input-autocomplete__type {
@@ -385,8 +448,7 @@
 
   .ds-input-autocomplete__item:hover .ds-input-autocomplete__type,
   .ds-input-autocomplete__item.selected .ds-input-autocomplete__type {
-    background: rgba(255, 255, 255, 0.15);
-    color: rgba(255, 255, 255, 0.8);
+    color: var(--color-text-secondary);
   }
 
   .ds-input-autocomplete__label {
@@ -405,6 +467,6 @@
 
   .ds-input-autocomplete__item:hover .ds-input-autocomplete__detail,
   .ds-input-autocomplete__item.selected .ds-input-autocomplete__detail {
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--color-text-tertiary);
   }
 </style>

package/dist/u0-primitives/input/Input.svelte.d.ts

@@ -1,15 +1,7 @@
 import type { Snippet } from 'svelte';
-export interface AutocompleteResult {
-    completions: Array<{
-        label: string;
-        type?: string;
-        detail?: string;
-    }>;
-}
+import type { CompletionSource } from '../../editor/extensions/types';
 export interface AutocompleteConfig {
-    source: {
-        complete: (query: string) => Promise<AutocompleteResult> | AutocompleteResult;
-    };
+    source: CompletionSource;
     maxVisible?: number;
     minChars?: number;
 }

package/dist/u0-primitives/input/Input.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/input/Input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACvE;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE;QAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,kBAAkB,CAAC,GAAG,kBAAkB,CAAA;KAAE,CAAC;IAC1F,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,kBAAkB,CAAC;CACnC;AA+IH,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/input/Input.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAc,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAGhF,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,kBAAkB,CAAC;CACnC;AA8MH,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}