@stephen-netu/design-system 0.1.0

package/src/demos/NodepadBlocksShowcase.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+  // EnchantedShowcase — Flat Nodepad-style blocks (NO nested cards)
+  // Key improvements from failed first attempt:
+  // - Single flat block (no card-within-card)
+  // - Click-and-type editing (no mode toggle, no cursor reset)
+  // - NO collapse button (content flows naturally)
+  
+  import { NodepadBlock, type EnchantedBlockData } from '@kos/design-system/x0-enchanted-blocks';
+  
+  // Mock blocks as EnchantedBlockData (not wrapped in TaskView)
+  const mockBlocks: EnchantedBlockData[] = [
+    {
+      id: 'wt-001',
+      type: 'task',
+      content: 'Short task: Brief description.',
+      createdAt: Date.now(),
+      modifiedAt: Date.now(),
+    },
+    {
+      id: 'wt-002',
+      type: 'idea',
+      content: 'Medium complexity idea that should wrap to a few lines. This demonstrates how the block adapts to content length without truncation or collapse buttons.',
+      createdAt: Date.now(),
+      modifiedAt: Date.now(),
+    },
+    {
+      id: 'wt-003',
+      type: 'question',
+      content: `How do we integrate Pretext for DOM-free text measurement?
+
+Key considerations:
+- Canvas-based measurement (no DOM thrash)
+- Adaptive sizing per content
+- 14-type classification from Nodepad
+- Inline editing without mode switches
+
+The block should just flow naturally—no collapse buttons needed.`,
+      annotation: 'Research note from Chenglou/pretext investigation',
+      createdAt: Date.now(),
+      modifiedAt: Date.now(),
+    },
+    {
+      id: 'wt-004',
+      type: 'claim',
+      content: 'Flat blocks with inline editing are superior to nested card containers.',
+      createdAt: Date.now(),
+      modifiedAt: Date.now(),
+    },
+    {
+      id: 'wt-005',
+      type: 'reference',
+      content: 'Nodepad spatial canvas research — 14 block types, no collapse buttons, click-and-type editing.',
+      annotation: 'github.com/mskayyali/nodepad',
+      createdAt: Date.now(),
+      modifiedAt: Date.now(),
+    },
+    {
+      id: 'wt-006',
+      type: 'general',
+      content: 'Completed: Pretext dependency added to design-system. Build passes.',
+      createdAt: Date.now() - 86400000,
+      modifiedAt: Date.now(),
+    },
+  ];
+  
+  // Local state for blocks (simulating store)
+  let blocks = $state<EnchantedBlockData[]>(mockBlocks);
+  
+  function handleChange(id: string, newContent: string) {
+    const block = blocks.find(b => b.id === id);
+    if (block) {
+      block.content = newContent;
+      block.modifiedAt = Date.now();
+    }
+    console.log(`Changed ${id}: ${newContent.slice(0, 30)}...`);
+  }
+  
+  function handleTypeChange(id: string, newType: string) {
+    const block = blocks.find(b => b.id === id);
+    if (block) {
+      (block as {type: string}).type = newType;
+    }
+  }
+</script>
+
+<div class="showcase">
+  <header class="showcase-header">
+    <h1>Nodepad-Style Blocks</h1>
+    <p class="subtitle">Flat layout • Click to edit • No collapse buttons • No nested cards</p>
+    <div class="features">
+      <span class="feature">✓ Single flat container</span>
+      <span class="feature">✓ Type in place (stable cursor)</span>
+      <span class="feature">✓ Auto-sized to content</span>
+      <span class="feature">✓ 14 types (click chip to cycle)</span>
+    </div>
+  </header>
+  
+  <main class="showcase-grid">
+    {#each blocks as block (block.id)}
+      <NodepadBlock
+        {block}
+        maxWidth={320}
+        onChange={(content) => handleChange(block.id, content)}
+        onTypeChange={(type) => handleTypeChange(block.id, type)}
+      />
+    {/each}
+  </main>
+  
+  <footer class="showcase-footer">
+    <p>Flat block architecture — no card-within-card nesting</p>
+    <p class="hint">Click any block to start typing. Click type chip to cycle types.</p>
+  </footer>
+</div>
+
+<style>
+  :global(body) {
+    margin: 0;
+    background: var(--color-bg-canvas, #1a1a1a);
+    font-family: "Sovereign Sans", system-ui, sans-serif;
+  }
+  
+  .showcase {
+    min-height: 100vh;
+    padding: 40px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+  }
+  
+  .showcase-header {
+    text-align: center;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  
+  h1 {
+    color: var(--color-text-primary, #e8e4dc);
+    font-size: 28px;
+    font-weight: 600;
+    margin: 0 0 8px 0;
+  }
+  
+  .subtitle {
+    color: var(--color-text-secondary, #a09880);
+    font-size: 16px;
+    margin: 0 0 20px 0;
+  }
+  
+  .features {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 12px 24px;
+    font-size: 13px;
+    color: var(--color-accent, #b87333);
+  }
+  
+  .feature {
+    white-space: nowrap;
+  }
+  
+  .showcase-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    align-items: start; /* KEY: Each card sizes to its own content, not row height */
+    gap: 20px;
+    max-width: 1400px;
+    margin: 0 auto;
+    width: 100%;
+    padding: 0 20px;
+  }
+  
+  .showcase-footer {
+    text-align: center;
+    margin-top: auto;
+    padding-top: 40px;
+    color: var(--color-text-muted, #706858);
+    font-size: 13px;
+  }
+  
+  .showcase-footer p {
+    margin: 4px 0;
+  }
+  
+  .hint {
+    font-style: italic;
+    opacity: 0.8;
+  }
+</style>

package/src/demos/index.ts

@@ -0,0 +1,7 @@
+// Demos — Design system showcase and examples
+// These are full-page demonstrations of design-system capabilities
+
+export { default as NodepadBlocksShowcase } from './NodepadBlocksShowcase.svelte';
+export { default as BspZoneDemo } from './BspZoneDemo.svelte';
+export { default as BspSizingInfographic } from './BspSizingInfographic.svelte';
+export { default as ControlRoomDemo } from './ControlRoomDemo.svelte';

package/src/editor/CodeEditor.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+  // wt-913: CodeEditor — CodeMirror 6 + language auto-detection
+  // Detects language from cell source extension or content heuristics.
+  // Falls back to plain text if no language matches.
+
+  import { onMount, onDestroy } from 'svelte';
+  import { EditorView, keymap } from '@codemirror/view';
+  import { EditorState } from '@codemirror/state';
+  import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+  import { LanguageDescription } from '@codemirror/language';
+  import { languages } from '@codemirror/language-data';
+  import type { Extension } from '@codemirror/state';
+
+  interface Props {
+    content: string;
+    /** Source hint — file path or URL, used for language detection */
+    source?: string;
+    isActive: boolean;
+    onContentChange?: (content: string) => void;
+    onBlur?: () => void;
+  }
+
+  let { content, source = '', isActive, onContentChange, onBlur }: Props = $props();
+
+  let container: HTMLElement | null = $state(null);
+  let view: EditorView | null = null;
+  let skipSync = false;
+  let detectedLang = $state('text');
+
+  // Detect language from source path/extension or content shebang
+  async function detectLanguageExtension(): Promise<Extension> {
+    // Try filename match
+    if (source) {
+      const filename = source.split('/').pop() ?? source;
+      const match = LanguageDescription.matchFilename(languages, filename);
+      if (match) {
+        detectedLang = match.name;
+        const lang = await match.load();
+        return lang;
+      }
+    }
+
+    // Try shebang heuristic
+    const firstLine = content.split('\n')[0] ?? '';
+    if (firstLine.startsWith('#!')) {
+      const shebangs: Record<string, string> = {
+        python: 'Python', node: 'JavaScript', ruby: 'Ruby',
+        bash: 'Shell', sh: 'Shell', zsh: 'Shell',
+      };
+      for (const [key, langName] of Object.entries(shebangs)) {
+        if (firstLine.includes(key)) {
+          const match = LanguageDescription.matchLanguageName(languages, langName);
+          if (match) {
+            detectedLang = match.name;
+            const lang = await match.load();
+            return lang;
+          }
+        }
+      }
+    }
+
+    // Try content-based heuristics
+    if (/^(fn |pub fn |use |mod |impl |struct |enum |trait )/m.test(content)) {
+      const rust = LanguageDescription.matchLanguageName(languages, 'Rust');
+      if (rust) { detectedLang = 'Rust'; return await rust.load(); }
+    }
+    if (/^(import |export |const |let |var |function |class |interface )/m.test(content)) {
+      const ts = LanguageDescription.matchLanguageName(languages, 'TypeScript');
+      if (ts) { detectedLang = 'TypeScript'; return await ts.load(); }
+    }
+    if (/^(def |class |import |from |if __name__)/m.test(content)) {
+      const py = LanguageDescription.matchLanguageName(languages, 'Python');
+      if (py) { detectedLang = 'Python'; return await py.load(); }
+    }
+
+    detectedLang = 'text';
+    return [];
+  }
+
+  // Loge dark theme (matches MarkdownEditor)
+  const logeTheme = EditorView.theme({
+    '&': { background: 'transparent', height: '100%', color: '#e8e0d0' },
+    '.cm-scroller': {
+      fontFamily: 'var(--font-mono, monospace)',
+      fontSize: '11px',
+      lineHeight: '1.6',
+      overflow: 'auto',
+    },
+    '.cm-content': { padding: '6px 8px', caretColor: '#b87333' },
+    '.cm-cursor': { borderLeftColor: '#b87333' },
+    '.cm-focused': { outline: 'none' },
+    '.cm-selectionBackground, ::selection': { background: 'rgba(184,115,51,0.2)' },
+    '.cm-gutters': {
+      background: '#1a1a1a',
+      borderRight: '1px solid #2a2a2a',
+      color: '#5a5248',
+      fontSize: '10px',
+    },
+    '.cm-lineNumbers .cm-gutterElement': { padding: '0 6px 0 4px' },
+    '.cm-activeLine': { background: 'rgba(184,115,51,0.05)' },
+    '.cm-activeLineGutter': { background: 'rgba(184,115,51,0.08)' },
+  }, { dark: true });
+
+  onMount(async () => {
+    if (!container) return;
+
+    const langExtension = await detectLanguageExtension();
+
+    const onEscape = keymap.of([{
+      key: 'Escape',
+      run: () => { onBlur?.(); return true; },
+    }]);
+
+    view = new EditorView({
+      state: EditorState.create({
+        doc: content,
+        extensions: [
+          history(),
+          keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
+          onEscape,
+          langExtension,
+          logeTheme,
+          EditorView.updateListener.of((update) => {
+            if (update.docChanged) {
+              skipSync = true;
+              onContentChange?.(update.state.doc.toString());
+            }
+          }),
+          EditorView.lineWrapping,
+        ],
+      }),
+      parent: container,
+    });
+
+    if (isActive) view.focus();
+  });
+
+  $effect(() => {
+    if (!view || skipSync) { skipSync = false; return; }
+    const current = view.state.doc.toString();
+    if (current !== content) {
+      view.dispatch({
+        changes: { from: 0, to: current.length, insert: content },
+      });
+    }
+  });
+
+  $effect(() => {
+    if (view && isActive) view.focus();
+  });
+
+  onDestroy(() => view?.destroy());
+</script>
+
+<div class="code-editor" bind:this={container}>
+  {#if detectedLang !== 'text'}
+    <div class="code-editor-lang-badge">{detectedLang}</div>
+  {/if}
+</div>
+
+<style>
+  .code-editor {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    background: #1a1a1a;
+  }
+
+  :global(.code-editor .cm-editor) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .code-editor-lang-badge {
+    position: absolute;
+    top: 4px;
+    right: 6px;
+    font-family: var(--font-mono, monospace);
+    font-size: 8px;
+    color: var(--color-text-muted, #a09880);
+    opacity: 0.4;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    pointer-events: none;
+    z-index: 1;
+  }
+</style>