@stephen-netu/design-system 0.2.2 → 0.5.1

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/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/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/index.d.ts

@@ -1,3 +1,4 @@
+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';

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;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"}
+{"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,4 +1,5 @@
 // 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';

package/dist/l0-layout/kanban/KanbanBoard.svelte

@@ -246,7 +246,7 @@
 
   .ds-kanban-move-toast {
     padding: var(--space-2) var(--space-5);
-    background: var(--color-accent-faint, rgba(184,115,51,0.1));
+    background: var(--color-accent-faint, rgba(128,128,128,0.08));
     border-bottom: var(--border-width-thin) solid var(--border-subtle);
     color: var(--color-text-secondary);
     font-size: var(--text-sm);

package/dist/l0-layout/kanban/KanbanColumn.svelte

@@ -253,7 +253,7 @@
   }
 
   .ds-kanban-column-content.is-drag-target {
-    background: var(--color-accent-faint, rgba(184,115,51,0.06));
+    background: var(--color-accent-faint, rgba(128,128,128,0.05));
   }
 
   .ds-kanban-drop-indicator {

package/dist/n1-flow-canvas/FlowCanvas.svelte

@@ -7,10 +7,11 @@
   import { Canvas, Layer } from 'svelte-canvas';
   import { getArrow } from 'perfect-arrows';
   import type { GraphSnapshot, GraphStateApi } from './types.js';
+  import type { CanvasTheme } from '../p0-primitives/canvas-theme';
   import { GraphState } from './graph-state.svelte.js';
   import { runLayout } from './layout.js';
   import { EDGE_REVEAL_STAGGER_MS } from './types.js';
-   import { getCanvasTheme } from '../p0-primitives/canvas-theme';
+  import { getCanvasTheme } from '../p0-primitives/canvas-theme';
 
   // ── Props ────────────────────────────────────────────────────────────────────
 
@@ -89,6 +90,18 @@
 
   const NODE_RADIUS = 4;
   const FONT = '12px var(--font-mono, monospace)';
+  const BADGE_FONT = '10px var(--font-mono, monospace)';
+
+  function statusColors(status: unknown, theme: CanvasTheme) {
+    switch (status) {
+      case 'Running': return { fill: theme.quaternion.j + '22', stroke: theme.quaternion.j, label: theme.quaternion.j };
+      case 'Passed':  return { fill: theme.quaternion.j + '18', stroke: theme.quaternion.j, label: theme.quaternion.j };
+      case 'Failed':  return { fill: theme.severity.critical + '22', stroke: theme.severity.critical, label: theme.severity.critical };
+      case 'Crashed': return { fill: theme.severity.critical + '22', stroke: theme.severity.critical, label: theme.severity.critical };
+      case 'Skipped': return { fill: theme.node, stroke: theme.severity.minor, label: theme.severity.minor };
+      default:        return { fill: theme.node, stroke: theme.nodeBorder, label: theme.nodeText };
+    }
+  }
 
   // ── Render ──────────────────────────────────────────────────────────────────
 
@@ -165,10 +178,12 @@
 
       const isFocus  = node.id === focusId;
       const { x, y, width: w, height: h } = pos;
+      const status = node.data?.['status'];
+      const { fill, stroke, label: labelColor } = statusColors(status, COLORS);
 
       // Node body
-      context.fillStyle   = isFocus ? COLORS.focus : COLORS.node;
-      context.strokeStyle = COLORS.nodeBorder;
+      context.fillStyle   = isFocus ? COLORS.focus : fill;
+      context.strokeStyle = isFocus ? COLORS.focus : stroke;
       context.lineWidth   = isFocus ? 2 : 1;
 
       context.beginPath();
@@ -177,14 +192,43 @@
       context.stroke();
 
       // Label
-      context.fillStyle  = COLORS.nodeText;
+      context.fillStyle  = isFocus ? '#000' : labelColor;
       context.font       = FONT;
       context.textAlign  = 'center';
       context.textBaseline = 'middle';
-      // Truncate if needed
       const maxWidth = w - 16;
-      const label = node.label.length > 18 ? node.label.slice(0, 16) + '…' : node.label;
+      const label = node.label.length > 20 ? node.label.slice(0, 18) + '…' : node.label;
       context.fillText(label, x + w / 2, y + h / 2, maxWidth);
+
+      // Error indicator
+      if (node.data?.['error']) {
+        context.fillStyle = COLORS.severity.critical;
+        context.font = '11px var(--font-mono, monospace)';
+        context.textAlign = 'right';
+        context.textBaseline = 'top';
+        context.fillText('⚠', x + w - 4, y + 4);
+      }
+
+      // Attempt badge (when > 1)
+      const attempt = node.data?.['attempt'];
+      if (typeof attempt === 'number' && attempt > 1) {
+        const badge = `#${attempt}`;
+        context.font = BADGE_FONT;
+        const bw = context.measureText(badge).width + 8;
+        const bh = 14;
+        const bx = x + w - bw - 4;
+        const by = y + h - bh - 4;
+
+        context.fillStyle = COLORS.accentRamp.solid;
+        context.beginPath();
+        context.roundRect(bx, by, bw, bh, 3);
+        context.fill();
+
+        context.fillStyle = '#000';
+        context.textAlign = 'center';
+        context.textBaseline = 'middle';
+        context.fillText(badge, bx + bw / 2, by + bh / 2);
+      }
     }
   }
 </script>

package/dist/n1-flow-canvas/FlowCanvas.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/n1-flow-canvas/FlowCanvas.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAS7D,UAAU,KAAK;IACb,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA8LH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FlowCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/n1-flow-canvas/FlowCanvas.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAU7D,UAAU,KAAK;IACb,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA0OH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/n1-flow-canvas/index.d.ts

@@ -3,4 +3,6 @@ export { EDGE_REVEAL_STAGGER_MS } from './types.js';
 export { default as FlowCanvas } from './FlowCanvas.svelte';
 export { GraphState } from './graph-state.svelte';
 export { nodeHitTest, domEventToCanvasCoords, parseMentionEdges, parseGroupedSequenceEdges } from './utils.js';
+export { pipelineStateToSnapshot, createEmptyPipelineSnapshot, PIPELINE_STAGE_NAMES, } from './pipeline-adapter.js';
+export type { PipelineState, PipelineStageData, PipelineStatus, PipelineTermination, } from './pipeline-adapter.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/n1-flow-canvas/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/n1-flow-canvas/index.ts"],"names":[],"mappings":"AAGA,YAAY,EACV,SAAS,EACT,SAAS,EACT,aAAa,EACb,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,aAAa,EACb,aAAa,EACb,eAAe,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/n1-flow-canvas/index.ts"],"names":[],"mappings":"AAGA,YAAY,EACV,SAAS,EACT,SAAS,EACT,aAAa,EACb,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,aAAa,EACb,aAAa,EACb,eAAe,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC;AAC/G,OAAO,EACL,uBAAuB,EACvB,2BAA2B,EAC3B,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EACV,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,mBAAmB,GACpB,MAAM,uBAAuB,CAAC"}

package/dist/n1-flow-canvas/index.js

@@ -4,3 +4,4 @@ export { EDGE_REVEAL_STAGGER_MS } from './types.js';
 export { default as FlowCanvas } from './FlowCanvas.svelte';
 export { GraphState } from './graph-state.svelte';
 export { nodeHitTest, domEventToCanvasCoords, parseMentionEdges, parseGroupedSequenceEdges } from './utils.js';
+export { pipelineStateToSnapshot, createEmptyPipelineSnapshot, PIPELINE_STAGE_NAMES, } from './pipeline-adapter.js';

package/dist/n1-flow-canvas/pipeline-adapter.d.ts

@@ -0,0 +1,37 @@
+import type { GraphSnapshot } from './types.js';
+export interface PipelineTermination {
+    reason: string;
+    final_tokens: number;
+}
+export interface PipelineStageData {
+    id: string;
+    name: string;
+    status: PipelineStatus;
+    attempt: number;
+    selected_model: string | null;
+    termination: PipelineTermination | null;
+    artifact_path: string | null;
+    error: string | null;
+    locked_by: string | null;
+    started_at: string | null;
+    completed_at: string | null;
+}
+export type PipelineStatus = 'Pending' | 'Running' | 'Passed' | 'Failed' | 'Skipped' | 'Crashed';
+export interface PipelineState {
+    run_id: string;
+    task_id: string;
+    requested_id: string;
+    base_main_sha: string | null;
+    prior_tos_status: string | null;
+    worktree_path: string | null;
+    stages: PipelineStageData[];
+    remediation_count: number;
+    max_remediation: number;
+    locked_by: string;
+    created_at: string;
+    updated_at: string;
+}
+export declare const PIPELINE_STAGE_NAMES: string[];
+export declare function pipelineStateToSnapshot(state: PipelineState): GraphSnapshot;
+export declare function createEmptyPipelineSnapshot(): GraphSnapshot;
+//# sourceMappingURL=pipeline-adapter.d.ts.map

package/dist/n1-flow-canvas/pipeline-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pipeline-adapter.d.ts","sourceRoot":"","sources":["../../src/n1-flow-canvas/pipeline-adapter.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAwB,MAAM,YAAY,CAAC;AAItE,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,WAAW,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACxC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjG,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB;AA0CD,eAAO,MAAM,oBAAoB,UAA6D,CAAC;AAE/F,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,aAAa,GAAG,aAAa,CAiG3E;AAcD,wBAAgB,2BAA2B,IAAI,aAAa,CAe3D"}