@stephen-netu/design-system 0.2.1 → 0.5.1

package/dist/index.d.ts

@@ -7,7 +7,6 @@ export * from './p0-primitives';
 export * from './u0-primitives';
 export * from './l0-layout';
 export * from './s0-lifecycle';
-export * from './s0-state';
 export * from './t0-transport';
 export * from './f0-forms';
 export * from './d0-data-viz';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,OAAO,YAAY,CAAC;AAEpB,OAAO,4CAA4C,CAAC;AACpD,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAGrC,cAAc,gBAAgB,CAAC;AAE/B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,aAAa,CAAC;AAE5B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,YAAY,CAAC;AAE3B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,YAAY,CAAC;AAE3B,cAAc,eAAe,CAAC;AAE9B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,aAAa,CAAC;AAE5B,cAAc,YAAY,CAAC;AAG3B,YAAY,EACV,SAAS,EACT,SAAS,EACT,aAAa,EACb,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,aAAa,EACb,aAAa,EACb,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,OAAO,YAAY,CAAC;AAGpB,OAAO,4CAA4C,CAAC;AACpD,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAGrC,cAAc,gBAAgB,CAAC;AAE/B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,aAAa,CAAC;AAE5B,cAAc,gBAAgB,CAAC;AAK/B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,YAAY,CAAC;AAE3B,cAAc,eAAe,CAAC;AAE9B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,YAAY,EACV,SAAS,EACT,SAAS,EACT,aAAa,EACb,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,aAAa,EACb,aAAa,EACb,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -6,6 +6,7 @@
 // CSS imports
 import './base.css';
 /* NOTE: control-room.css is opt-in via data-theme="control-room" — import it explicitly if needed */
+/* NOTE: ambient.css is opt-in decorative tokens/utilities for marketing/docs surfaces — import it explicitly if needed */
 import './p0-primitives/tokens/validity-tokens.css';
 import './n0-node-graph/n0-tokens.css';
 import './d0-data-viz/d0-tokens.css';
@@ -20,7 +21,8 @@ export * from './l0-layout';
 // S0 Lifecycle — Component lifecycle phases (constrain → layout → interact → render)
 export * from './s0-lifecycle';
 // S0 State — Store primitives (Svelte 5 runes)
-export * from './s0-state';
+// Subpath only: consumers must import via @stephen-netu/design-system/s0-state
+// to avoid module-scope singleton side effects from the root barrel.
 // T0 Transport — Tauri IPC
 export * from './t0-transport';
 // F0 Forms — Form primitives
@@ -29,9 +31,11 @@ export * from './f0-forms';
 export * from './d0-data-viz';
 // N0 Node Graph — Visual composition primitives (SVG DAG, <100 nodes)
 export * from './n0-node-graph';
-// Epistemic types — Assay, Allay, Expert, Provenance
+// Epistemic types — public LEAP plugin contracts for assay, allay,
+// expert identity, and provenance metadata.
 export * from './epistemic';
-// Platform — cross-boundary protocols (HUD, etc.)
+// Platform protocols — public LEAP shell/plugin boundary metadata,
+// including HUD contribution and indicator contracts.
 export * from './platform';
 export { EDGE_REVEAL_STAGGER_MS } from './n1-flow-canvas/types.js';
 export { nodeHitTest, domEventToCanvasCoords, parseMentionEdges, parseGroupedSequenceEdges } from './n1-flow-canvas/utils.js';

package/dist/l0-layout/SectionSplitter.svelte

@@ -52,7 +52,7 @@
     justify-content: center;
     cursor: ns-resize;
     background: var(--color-bg-panel, #222);
-    border-top: 1px solid var(--border-color, #333);
+    border-top: 1px solid var(--color-border, #333);
     flex-shrink: 0;
     user-select: none;
     transition: background 0.1s, border-top-color 0.1s;
@@ -60,8 +60,8 @@
 
   .section-splitter:hover,
   .section-splitter--active {
-    background: color-mix(in srgb, var(--accent-primary, var(--color-accent)) 10%, var(--color-bg-panel, #222));
-    border-top-color: var(--accent-primary, var(--color-accent));
+    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-panel, #222));
+    border-top-color: var(--color-accent);
   }
 
   /* Three-line grip — center line via element, top/bottom via box-shadow */
@@ -77,7 +77,7 @@
 
   .section-splitter:hover .section-splitter__grip,
   .section-splitter--active .section-splitter__grip {
-    background: var(--accent-primary, var(--color-accent));
-    box-shadow: 0 -4px 0 var(--accent-primary, var(--color-accent)), 0 4px 0 var(--accent-primary, var(--color-accent));
+    background: var(--color-accent);
+    box-shadow: 0 -4px 0 var(--color-accent), 0 4px 0 var(--color-accent);
   }
 </style>

package/dist/l0-layout/block-writer/BlockContent.svelte

@@ -95,7 +95,8 @@
   {/if}
 </div>
 
-<style>
+  <!-- svelte-ignore css_unused_selector -->
+  <style>
   .ds-block-content {
     flex: 1;
     min-height: 0;
@@ -125,40 +126,40 @@
     min-height: 2em;
   }
 
-  /* Markdown rendered styles — scoped under :global for {@html} content */
-  .ds-block-rendered :global(.md-h) {
+  /* Markdown rendered styles — scoped descendants for {@html} content */
+  .ds-block-rendered .md-h {
     margin: 12px 0 6px 0;
     font-weight: 600;
     color: var(--color-text-primary, #e8e0d0);
   }
 
-  .ds-block-rendered :global(.md-h1) { font-size: 1.4em; }
-  .ds-block-rendered :global(.md-h2) { font-size: 1.2em; }
-  .ds-block-rendered :global(.md-h3) { font-size: 1.1em; }
-  .ds-block-rendered :global(.md-h4),
-  .ds-block-rendered :global(.md-h5),
-  .ds-block-rendered :global(.md-h6) { font-size: 1em; }
+  .ds-block-rendered .md-h1 { font-size: 1.4em; }
+  .ds-block-rendered .md-h2 { font-size: 1.2em; }
+  .ds-block-rendered .md-h3 { font-size: 1.1em; }
+  .ds-block-rendered .md-h4,
+  .ds-block-rendered .md-h5,
+  .ds-block-rendered .md-h6 { font-size: 1em; }
 
-  .ds-block-rendered :global(.md-p) {
+  .ds-block-rendered .md-p {
     margin: 6px 0;
   }
 
-  .ds-block-rendered :global(.md-ul) {
+  .ds-block-rendered .md-ul {
     margin: 6px 0;
     padding-left: 20px;
     list-style: none;
   }
 
-  .ds-block-rendered :global(.md-li) {
+  .ds-block-rendered .md-li {
     margin: 3px 0;
   }
 
-  .ds-block-rendered :global(.md-li)::before {
+  .ds-block-rendered .md-li::before {
     content: '• ';
     color: var(--color-accent, var(--color-accent));
   }
 
-  .ds-block-rendered :global(.md-bq) {
+  .ds-block-rendered .md-bq {
     margin: 6px 0;
     padding: 6px 10px;
     border-left: 3px solid var(--color-accent, var(--color-accent));
@@ -166,17 +167,17 @@
     font-style: italic;
   }
 
-  .ds-block-rendered :global(.md-hr) {
+  .ds-block-rendered .md-hr {
     border: none;
     border-top: 1px solid var(--color-border, #333);
     margin: 12px 0;
   }
 
-  .ds-block-rendered :global(.md-gap) {
+  .ds-block-rendered .md-gap {
     height: 6px;
   }
 
-  .ds-block-rendered :global(.md-code) {
+  .ds-block-rendered .md-code {
     padding: 1px 5px;
     background: rgba(0, 0, 0, 0.3);
     border-radius: var(--radius-sm, 3px);
@@ -185,29 +186,29 @@
     color: var(--color-accent, var(--color-accent));
   }
 
-  .ds-block-rendered :global(strong) {
+  .ds-block-rendered strong {
     font-weight: 600;
     color: var(--color-text-primary, #e8e0d0);
   }
 
-  .ds-block-rendered :global(em) {
+  .ds-block-rendered em {
     font-style: italic;
     color: var(--color-text-muted, #a09880);
   }
 
-  .ds-block-rendered :global(del) {
+  .ds-block-rendered del {
     text-decoration: line-through;
     color: var(--color-text-muted, #a09880);
   }
 
-  .ds-block-rendered :global(.md-wiki) {
+  .ds-block-rendered .md-wiki {
     color: var(--color-accent, var(--color-accent));
     text-decoration: underline;
     text-decoration-style: dotted;
     cursor: pointer;
   }
 
-  .ds-block-rendered :global(.md-wiki:hover) {
+  .ds-block-rendered .md-wiki:hover {
     text-decoration-style: solid;
   }
 </style>

package/dist/l0-layout/block-writer/BlockContent.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockContent.svelte.d.ts","sourceRoot":"","sources":["../../../src/l0-layout/block-writer/BlockContent.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAoFH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"BlockContent.svelte.d.ts","sourceRoot":"","sources":["../../../src/l0-layout/block-writer/BlockContent.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAqFH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/l0-layout/block-writer/BlockContent.test.js

@@ -0,0 +1,47 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render } from '@testing-library/svelte';
+import BlockContent from './BlockContent.svelte';
+const markdown = [
+    '# Heading',
+    '',
+    '> quote',
+    '',
+    '- alpha',
+    '- beta',
+    '',
+    '---',
+    '',
+    'Use `code` and [[wiki|label]].'
+].join('\n');
+describe('BlockContent', () => {
+    afterEach(() => cleanup());
+    it('renders the contenteditable editor when editing', () => {
+        const { container } = render(BlockContent, { isEditing: true, content: '' });
+        expect(container.querySelector('.ds-block-editable')).not.toBeNull();
+        expect(container.querySelector('.ds-block-editable')?.getAttribute('contenteditable')).toBe('true');
+    });
+    it('renders markdown as scoped rendered content when not editing', () => {
+        const { container } = render(BlockContent, { content: markdown });
+        expect(container.querySelector('.ds-block-rendered')).not.toBeNull();
+        expect(container.querySelector('.md-h1')?.textContent).toBe('Heading');
+        expect(Array.from(container.querySelectorAll('.md-li')).map(node => node.textContent)).toEqual(['alpha', 'beta']);
+        expect(container.querySelector('.md-bq')?.textContent).toBe('quote');
+        expect(container.querySelector('.md-hr')).not.toBeNull();
+        expect(container.querySelector('.md-code')?.textContent).toBe('code');
+        expect(container.querySelector('.md-wiki')?.textContent).toBe('label');
+    });
+    it('emits content changes from the editor', async () => {
+        const handleChange = vi.fn();
+        const { container } = render(BlockContent, { isEditing: true, onContentChange: handleChange });
+        const editor = container.querySelector('.ds-block-editable');
+        await fireEvent.input(editor, { target: { innerText: 'new content' } });
+        expect(handleChange).toHaveBeenCalledWith('new content');
+    });
+    it('blurs the editor when Escape is pressed', async () => {
+        const { container } = render(BlockContent, { isEditing: true });
+        const editor = container.querySelector('.ds-block-editable');
+        editor.focus();
+        await fireEvent.keyDown(editor, { key: 'Escape' });
+        expect(document.activeElement).not.toBe(editor);
+    });
+});

package/dist/l0-layout/block-writer/BlockItem.svelte

@@ -128,10 +128,12 @@
     overflow: hidden;
   }
 
-  .ds-tiny-indicator.ds-phase-seed { border-left: 3px solid var(--color-phase-seed, #8fbc8f); }
-  .ds-tiny-indicator.ds-phase-sprout { border-left: 3px solid var(--color-phase-sprout, #90ee90); }
-  .ds-tiny-indicator.ds-phase-flower { border-left: 3px solid var(--color-phase-flower, #ffa500); }
-  .ds-tiny-indicator.ds-phase-scelle { border-left: 3px solid var(--color-phase-scelle, #ff4500); }
+  /* Phase colors follow PHASE_CONFIG (block-writer-types.ts) */
+  .ds-tiny-indicator.ds-phase-seed { border-left: 3px solid var(--color-warning); }
+  .ds-tiny-indicator.ds-phase-sprout { border-left: 3px solid var(--color-info); }
+  .ds-tiny-indicator.ds-phase-go { border-left: 3px solid var(--color-success); }
+  .ds-tiny-indicator.ds-phase-freeze { border-left: 3px solid var(--color-accent); }
+  .ds-tiny-indicator.ds-phase-compost { border-left: 3px solid var(--color-neutral); }
 
   .ds-tiny-id {
     font-family: var(--font-mono, monospace);

package/dist/l0-layout/block-writer/markdown.js

@@ -41,6 +41,17 @@ export function renderMarkdown(md) {
     const lines = md.split('\n');
     const processed = [];
     for (const line of lines) {
+        // Blockquotes — match raw line before escaping
+        const bq = line.match(/^> (.+)$/);
+        if (bq) {
+            processed.push(`<blockquote class="md-bq">${renderInline(escapeHtml(bq[1]))}</blockquote>`);
+            continue;
+        }
+        // Horizontal rule — match raw line before escaping
+        if (/^[-*]{3,}$/.test(line.trim())) {
+            processed.push('<hr class="md-hr">');
+            continue;
+        }
         const escaped = escapeHtml(line);
         // Headings
         const hm = escaped.match(/^(#{1,6}) (.+)$/);
@@ -60,17 +71,6 @@ export function renderMarkdown(md) {
             processed.push(`<li class="md-li">${renderInline(ol[2])}</li>`);
             continue;
         }
-        // Blockquotes
-        const bq = escaped.match(/^> (.+)$/);
-        if (bq) {
-            processed.push(`<blockquote class="md-bq">${renderInline(bq[1])}</blockquote>`);
-            continue;
-        }
-        // Horizontal rule
-        if (/^[-*]{3,}$/.test(escaped.trim())) {
-            processed.push('<hr class="md-hr">');
-            continue;
-        }
         // Empty line
         if (escaped.trim() === '') {
             processed.push('<div class="md-gap"></div>');

package/dist/l0-layout/block-writer/markdown.test.js

@@ -0,0 +1,81 @@
+import { describe, it, expect } from 'vitest';
+import { renderMarkdown, renderInlineMarkdown } from './markdown';
+describe('block-writer/renderMarkdown', () => {
+    it('returns empty string for empty input', () => {
+        expect(renderMarkdown('')).toBe('');
+    });
+    it('renders headings h1–h6', () => {
+        expect(renderMarkdown('# H1')).toContain('<h1 class="md-h md-h1">H1</h1>');
+        expect(renderMarkdown('## H2')).toContain('<h2 class="md-h md-h2">H2</h2>');
+        expect(renderMarkdown('###### H6')).toContain('<h6 class="md-h md-h6">H6</h6>');
+    });
+    it('renders blockquotes', () => {
+        const html = renderMarkdown('> important quote');
+        expect(html).toContain('<blockquote class="md-bq">important quote</blockquote>');
+    });
+    it('escapes HTML entities inside blockquotes', () => {
+        const html = renderMarkdown('<script>alert(1)</script>');
+        expect(html).not.toContain('<script>');
+        expect(html).toContain('&lt;script&gt;');
+    });
+    it('renders unordered list items grouped in ul', () => {
+        const html = renderMarkdown('- a\n- b\n- c');
+        expect(html).toContain('<ul class="md-ul">');
+        expect(html).toContain('<li class="md-li">a</li>');
+        expect(html).toContain('<li class="md-li">b</li>');
+        expect(html).toContain('<li class="md-li">c</li>');
+    });
+    it('renders ordered list items grouped in ul', () => {
+        const html = renderMarkdown('1. first\n2. second');
+        expect(html).toContain('<ul class="md-ul">');
+        expect(html).toContain('<li class="md-li">first</li>');
+        expect(html).toContain('<li class="md-li">second</li>');
+    });
+    it('renders horizontal rules', () => {
+        expect(renderMarkdown('---')).toContain('<hr class="md-hr">');
+        expect(renderMarkdown('***')).toContain('<hr class="md-hr">');
+    });
+    it('renders paragraphs for plain text', () => {
+        const html = renderMarkdown('just some text');
+        expect(html).toContain('<p class="md-p">just some text</p>');
+    });
+    it('renders inline code', () => {
+        const html = renderMarkdown('Use `console.log` for debugging');
+        expect(html).toContain('<code class="md-code">console.log</code>');
+    });
+    it('renders wikilinks', () => {
+        const html = renderMarkdown('See [[Target Page]]');
+        expect(html).toContain('<span class="md-wiki">Target Page</span>');
+    });
+    it('renders labeled wikilinks', () => {
+        const html = renderMarkdown('See [[Target Page|display text]]');
+        expect(html).toContain('<span class="md-wiki">display text</span>');
+    });
+    it('renders bold and italic', () => {
+        expect(renderMarkdown('**bold**')).toContain('<strong>bold</strong>');
+        expect(renderMarkdown('*italic*')).toContain('<em>italic</em>');
+    });
+    it('renders strikethrough', () => {
+        expect(renderMarkdown('~~deleted~~')).toContain('<del>deleted</del>');
+    });
+    it('renders empty lines as gap divs', () => {
+        expect(renderMarkdown('')).toBe('');
+        const html = renderMarkdown('before\n\nafter');
+        expect(html).toContain('<div class="md-gap"></div>');
+    });
+});
+describe('block-writer/renderInlineMarkdown', () => {
+    it('returns empty string for empty input', () => {
+        expect(renderInlineMarkdown('')).toBe('');
+    });
+    it('renders inline markdown without block elements', () => {
+        const html = renderInlineMarkdown('**bold** and `code`');
+        expect(html).toContain('<strong>bold</strong>');
+        expect(html).toContain('<code class="md-code">code</code>');
+    });
+    it('escapes HTML entities', () => {
+        const html = renderInlineMarkdown('<em>tag</em>');
+        expect(html).not.toContain('<em>tag</em>');
+        expect(html).toContain('&lt;em&gt;tag&lt;/em&gt;');
+    });
+});

package/dist/l0-layout/card/CompactCard.svelte

@@ -78,11 +78,11 @@
 </Card>
 
 <style>
-  .ds-compact-card {
+  :global(.ds-compact-card) {
     transition: box-shadow var(--transition-normal);
   }
   
-  .ds-compact-card:hover {
+  :global(.ds-compact-card:hover) {
     box-shadow: var(--shadow-card-hover);
   }
   
@@ -104,11 +104,12 @@
   }
   
   /* Hide overflow preview text when not hovered */
-  .ds-compact-card:hover .ds-card-preview {
+  :global(.ds-compact-card:hover) .ds-card-preview {
     max-height: 4.5rem; /* ~3 lines */
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 3;
+    line-clamp: 3;
   }
 </style>

package/dist/l0-layout/card/StackedCard.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import Card from '../../u0-primitives/card/Card.svelte';
+  import type { Snippet } from 'svelte';
+
+  export interface Props {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    class: className = '',
+    children
+  }: Props = $props();
+</script>
+
+<div class="ds-stacked-card {className}">
+  <div class="ds-stacked-card-sheet sheet-back-2" aria-hidden="true"></div>
+  <div class="ds-stacked-card-sheet sheet-back-1" aria-hidden="true"></div>
+  <div class="ds-stacked-card-sheet sheet-front">
+    <Card variant="elevated">
+      {#if children}
+        {@render children()}
+      {/if}
+    </Card>
+  </div>
+</div>
+
+<style>
+  .ds-stacked-card {
+    position: relative;
+    /* The rotated back sheets are calibrated for a compact card, not a
+       full-bleed block — at very wide containers the rotation angle
+       translates to a large vertical skew. Cap width by default; override
+       via the class prop if a different size is genuinely wanted. */
+    max-width: 30rem;
+  }
+
+  .ds-stacked-card-sheet {
+    border: var(--border-width-thin) solid var(--border-default);
+  }
+
+  .sheet-back-1,
+  .sheet-back-2 {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    transition: transform var(--transition-normal);
+  }
+
+  .sheet-back-1 {
+    background: var(--color-accent-subtle);
+    border-color: var(--color-accent-muted);
+    transform: rotate(-2deg) translate(10px, 12px);
+  }
+
+  .sheet-back-2 {
+    background: var(--overlay-white-04);
+    transform: rotate(2deg) translate(-8px, 10px);
+  }
+
+  .sheet-front {
+    position: relative;
+    z-index: 1;
+    box-shadow: var(--shadow-sm);
+    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
+  }
+
+  .ds-stacked-card:hover .sheet-back-1 {
+    transform: rotate(-3deg) translate(14px, 16px);
+  }
+
+  .ds-stacked-card:hover .sheet-back-2 {
+    transform: rotate(3deg) translate(-11px, 14px);
+  }
+
+  .ds-stacked-card:hover .sheet-front {
+    transform: translateY(-3px);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sheet-back-1,
+    .sheet-back-2,
+    .sheet-front {
+      transition: none;
+    }
+  }
+</style>

package/dist/l0-layout/card/StackedCard.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const StackedCard: import("svelte").Component<Props, {}, "">;
+type StackedCard = ReturnType<typeof StackedCard>;
+export default StackedCard;
+//# sourceMappingURL=StackedCard.svelte.d.ts.map

package/dist/l0-layout/card/StackedCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/l0-layout/card/StackedCard.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA4BH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/l0-layout/card/StackedCard.test.js

@@ -0,0 +1,29 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import StackedCard from './StackedCard.svelte';
+const textSnippet = (text) => createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
+describe('StackedCard', () => {
+    afterEach(() => cleanup());
+    it('renders three stacked sheets', () => {
+        const { container } = render(StackedCard);
+        expect(container.querySelectorAll('.ds-stacked-card-sheet')).toHaveLength(3);
+    });
+    it('hides the decorative back sheets from assistive tech', () => {
+        const { container } = render(StackedCard);
+        expect(container.querySelector('.sheet-back-1')?.getAttribute('aria-hidden')).toBe('true');
+        expect(container.querySelector('.sheet-back-2')?.getAttribute('aria-hidden')).toBe('true');
+    });
+    it('renders children inside the front sheet', () => {
+        const { container, getByText } = render(StackedCard, {
+            children: textSnippet('Evidence panel')
+        });
+        const front = container.querySelector('.sheet-front');
+        expect(front).not.toBeNull();
+        expect(getByText('Evidence panel')).toBeDefined();
+    });
+    it('renders an underlying Card in the front sheet', () => {
+        const { container } = render(StackedCard);
+        expect(container.querySelector('.sheet-front .ds-card')).not.toBeNull();
+    });
+});

package/dist/l0-layout/grant/GrantCard.svelte

@@ -47,15 +47,23 @@
   let cardClasses = $derived(
     `ds-grant-card ${className}${isInteractive ? ' is-interactive' : ''}${selected ? ' is-selected' : ''}`
   );
+  let cardAttrs = $derived(isInteractive ? {
+    role: 'button',
+    tabindex: 0,
+    onclick,
+    onkeydown: (e: KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        onclick?.(new MouseEvent('click'));
+      }
+    },
+    'aria-pressed': selected
+  } : {});
 </script>
 
 <div
   class={cardClasses}
-  role={isInteractive ? 'button' : 'region'}
-  tabindex={isInteractive ? 0 : undefined}
-  onclick={onclick}
-  onkeydown={isInteractive ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onclick?.(new MouseEvent('click')); } } : undefined}
-  aria-pressed={isInteractive ? selected : undefined}
+  {...cardAttrs}
 >
   <div class="ds-grant-card-header">
     <h3 class="ds-grant-card-title" title={title}>{title}</h3>
@@ -129,6 +137,7 @@
     flex: 1;
     display: -webkit-box;
     -webkit-line-clamp: 2;
+    line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
@@ -156,6 +165,7 @@
     margin: 0;
     display: -webkit-box;
     -webkit-line-clamp: 3;
+    line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     line-height: 1.4;

package/dist/l0-layout/grant/GrantCard.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GrantCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/l0-layout/grant/GrantCard.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAuEH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"GrantCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/l0-layout/grant/GrantCard.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAmFH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/l0-layout/index.d.ts

@@ -1,9 +1,12 @@
+export { default as StackedCard } from './card/StackedCard.svelte';
 export { default as WorkspaceLayout } from './workspace/WorkspaceLayout.svelte';
 export { default as ChatViewLayout } from './chat-view/ChatViewLayout.svelte';
 export { default as KanbanViewLayout } from './kanban/KanbanViewLayout.svelte';
 export { default as KanbanBoard } from './kanban/KanbanBoard.svelte';
 export { default as KanbanColumn } from './kanban/KanbanColumn.svelte';
 export { default as KanbanCard } from './kanban/KanbanCard.svelte';
+export type { ColumnData } from './kanban/KanbanColumn.svelte';
+export type { CardData } from './kanban/KanbanCard.svelte';
 export { default as SnapPanel } from './SnapPanel.svelte';
 export { default as VirtualGrid } from './VirtualGrid.svelte';
 export type { PanelPosition, PanelMode, PanelSnap } from './SnapPanel.svelte';

package/dist/l0-layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/l0-layout/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGnE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC9E,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAClE,YAAY,EACV,UAAU,EACV,cAAc,EACd,UAAU,EACV,SAAS,EACT,UAAU,GACX,MAAM,qBAAqB,CAAC;AAG7B,cAAc,sBAAsB,CAAC;AAGrC,OAAO,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,YAAY,EACZ,oBAAoB,EACpB,YAAY,EACZ,cAAc,EACd,oBAAoB,GACrB,MAAM,yBAAyB,CAAC;AAEjC,YAAY,EACV,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,WAAW,GACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAGhF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAGtE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/l0-layout/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACnE,YAAY,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC/D,YAAY,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC9E,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAClE,YAAY,EACV,UAAU,EACV,cAAc,EACd,UAAU,EACV,SAAS,EACT,UAAU,GACX,MAAM,qBAAqB,CAAC;AAG7B,cAAc,sBAAsB,CAAC;AAGrC,OAAO,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,YAAY,EACZ,oBAAoB,EACpB,YAAY,EACZ,cAAc,EACd,oBAAoB,GACrB,MAAM,yBAAyB,CAAC;AAEjC,YAAY,EACV,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,WAAW,GACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAGhF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAGtE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,iCAAiC,CAAC"}

package/dist/l0-layout/index.js

@@ -1,7 +1,9 @@
 // L0 Layout — Layout composition templates
+export { default as StackedCard } from './card/StackedCard.svelte';
 export { default as WorkspaceLayout } from './workspace/WorkspaceLayout.svelte';
 export { default as ChatViewLayout } from './chat-view/ChatViewLayout.svelte';
 export { default as KanbanViewLayout } from './kanban/KanbanViewLayout.svelte';
+// Kanban — canonical l0-layout surface (F-24)
 export { default as KanbanBoard } from './kanban/KanbanBoard.svelte';
 export { default as KanbanColumn } from './kanban/KanbanColumn.svelte';
 export { default as KanbanCard } from './kanban/KanbanCard.svelte';