@stephen-netu/design-system 0.1.0

package/src/l0-layout/block-writer/BlockWriter.svelte

@@ -0,0 +1,219 @@
+<script module lang="ts">
+  // Re-export types for consumer convenience
+  export type {
+    WritingBlock,
+    BlockConnection,
+    BlockWriterSchema,
+    BlockWriterConfig,
+    WritingPhase,
+    BlockOrigin,
+    SplitDirection,
+  } from './block-writer-types.js';
+  export { PHASE_CONFIG } from './block-writer-types.js';
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type {
+    BlockWriterSchema,
+    BlockWriterConfig,
+    WritingBlock,
+    WritingPhase,
+    SplitDirection,
+  } from './block-writer-types.js';
+  import type { ZoneRect } from '../../spatial/zone-tiler-types.js';
+  import { flattenBsp } from '../../spatial/zone-tiler-types.js';
+  import ZoneTiler from '../../spatial/ZoneTiler.svelte';
+  import BlockItem from './BlockItem.svelte';
+  import BlockConnectionLines from './BlockConnectionLines.svelte';
+
+  // ── Props ────────────────────────────────────────────────────────────────
+
+  interface Props {
+    schema: BlockWriterSchema;
+    config?: BlockWriterConfig;
+    width: number;
+    height: number;
+    onSchemaChange?: (schema: BlockWriterSchema) => void;
+    onBlockFocus?: (blockId: string) => void;
+    onBlockContentChange?: (blockId: string, content: string) => void;
+    onBlockPhaseChange?: (blockId: string, phase: WritingPhase) => void;
+    onBlockAdd?: (afterBlockId: string, direction: SplitDirection) => void;
+    onBlockRemove?: (blockId: string) => void;
+    onBlockTitleChange?: (blockId: string, title: string) => void;
+    onBlockEditEnd?: (blockId: string) => void;
+    footer?: Snippet<[WritingBlock]>;
+  }
+
+  let {
+    schema,
+    config,
+    width,
+    height,
+    onSchemaChange,
+    onBlockFocus,
+    onBlockContentChange,
+    onBlockPhaseChange,
+    onBlockAdd,
+    onBlockRemove,
+    onBlockTitleChange,
+    onBlockEditEnd,
+    footer,
+  }: Props = $props();
+
+  // ── Computed layout ──────────────────────────────────────────────────────
+
+  const dividerThickness = $derived(config?.dividerThickness ?? 6);
+
+  const currentZones = $derived(
+    flattenBsp(schema.bspTree, 0, 0, width, height, dividerThickness).zones
+  );
+
+  // ── Local state ──────────────────────────────────────────────────────────
+
+  let focusedBlockId = $state('');
+  let editingBlockId: string | null = $state(null);
+
+  // Sync focus from schema prop (one-way: schema → local)
+  $effect(() => {
+    focusedBlockId = schema.focusedBlockId;
+  });
+
+  // ── Zone content lookup ──────────────────────────────────────────────────
+
+  function getBlockForZone(zoneId: string): WritingBlock | undefined {
+    return schema.blocks.find(b => b.id === zoneId);
+  }
+
+  // ── Event handlers ───────────────────────────────────────────────────────
+
+  function handleFocusChange(zoneId: string) {
+    focusedBlockId = zoneId;
+    editingBlockId = null;
+    onBlockFocus?.(zoneId);
+  }
+
+  function handleResize(tree: typeof schema.bspTree) {
+    onSchemaChange?.({ ...schema, bspTree: tree });
+  }
+
+  function handleSplitRequest(zoneId: string, direction: SplitDirection) {
+    onBlockAdd?.(zoneId, direction);
+  }
+
+  function handleEditStart(blockId: string) {
+    editingBlockId = blockId;
+    focusedBlockId = blockId;
+  }
+
+  function handleEditEnd(blockId: string) {
+    if (editingBlockId === blockId) {
+      editingBlockId = null;
+      onBlockEditEnd?.(blockId);
+    }
+  }
+
+  function handleContentChange(blockId: string, content: string) {
+    onBlockContentChange?.(blockId, content);
+  }
+
+  function handlePhaseChange(blockId: string, phase: WritingPhase) {
+    onBlockPhaseChange?.(blockId, phase);
+  }
+
+  function handleSplit(blockId: string, direction: SplitDirection) {
+    onBlockAdd?.(blockId, direction);
+  }
+
+  function handleDelete(blockId: string) {
+    onBlockRemove?.(blockId);
+  }
+
+  function handleTitleChange(blockId: string, title: string) {
+    onBlockTitleChange?.(blockId, title);
+  }
+
+  // ── Keyboard shortcuts ───────────────────────────────────────────────────
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (!focusedBlockId) return;
+
+    // Enter: start editing focused block (when not already editing)
+    if (e.key === 'Enter' && !editingBlockId && !e.ctrlKey && !e.metaKey) {
+      e.preventDefault();
+      editingBlockId = focusedBlockId;
+      return;
+    }
+
+    // Escape: exit editing
+    if (e.key === 'Escape' && editingBlockId) {
+      e.preventDefault();
+      editingBlockId = null;
+      return;
+    }
+  }
+
+  // ── ZoneTiler config ─────────────────────────────────────────────────────
+
+  const tilerConfig = $derived({
+    minZoneSize: config?.minBlockHeight ?? 80,
+    dividerThickness,
+  });
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="ds-block-writer"
+  style:width="{width}px"
+  style:height="{height}px"
+  onkeydown={handleKeydown}
+>
+  <!-- ZoneTiler: BSP layout where each zone = one block -->
+  <ZoneTiler
+    tree={schema.bspTree}
+    {width}
+    {height}
+    config={tilerConfig}
+    bind:focusedZoneId={focusedBlockId}
+    onResize={handleResize}
+    onFocusChange={handleFocusChange}
+    onSplitRequest={handleSplitRequest}
+  >
+    {#snippet zoneContent(zone: ZoneRect)}
+      {@const block = getBlockForZone(zone.id)}
+      {#if block}
+        <BlockItem
+          {block}
+          zoneRect={zone}
+          isFocused={zone.id === focusedBlockId}
+          isEditing={zone.id === editingBlockId}
+          allowHorizontalSplit={config?.allowHorizontalSplit ?? true}
+          onEditStart={handleEditStart}
+          onEditEnd={handleEditEnd}
+          onContentChange={handleContentChange}
+          onPhaseChange={handlePhaseChange}
+          onSplit={handleSplit}
+          onDelete={handleDelete}
+          onTitleChange={handleTitleChange}
+          {footer}
+        />
+      {/if}
+    {/snippet}
+  </ZoneTiler>
+
+  <!-- Connection lines SVG overlay -->
+  <BlockConnectionLines
+    connections={schema.connections}
+    zones={currentZones}
+    {focusedBlockId}
+  />
+</div>
+
+<style>
+  .ds-block-writer {
+    position: relative;
+    overflow: hidden;
+    background: var(--color-bg-app, #1a1a1a);
+    border-radius: var(--radius-md, 8px);
+  }
+</style>

package/src/l0-layout/block-writer/block-writer-types.ts

@@ -0,0 +1,63 @@
+// BlockWriter — data model types
+// Pure TypeScript — no Svelte, no DOM.
+//
+// WritingPhase is intentionally a subset of Ryu FlowColumn.
+// Writing doesn't need WEED, CONSULT, or PRUNE — those are task-management phases.
+
+import type { BspNode } from '../../spatial/zone-tiler-types.js';
+export type { SplitDirection } from '../../spatial/zone-tiler-types.js';
+
+/** Writing lifecycle — subset of Ryu FlowColumn */
+export type WritingPhase = 'seed' | 'sprout' | 'go' | 'freeze' | 'compost';
+
+/** Block origin — local equivalent of CardOrigin (no cross-package import) */
+export type BlockOrigin = 'authored' | 'ingested' | 'sovereign';
+
+/** A single writing block */
+export interface WritingBlock {
+  id: string;
+  title: string;
+  content: string;
+  phase: WritingPhase;
+  tags: string[];
+  links: string[];
+  annotation?: string;
+  file_path?: string;
+  origin: BlockOrigin;
+  created_at: number;
+  last_edited_at: number;
+}
+
+/** Connection between two blocks */
+export interface BlockConnection {
+  fromId: string;
+  toId: string;
+  label?: string;
+}
+
+/** Full schema — controlled state passed to BlockWriter */
+export interface BlockWriterSchema {
+  blocks: WritingBlock[];
+  bspTree: BspNode;
+  connections: BlockConnection[];
+  focusedBlockId: string;
+}
+
+/** BlockWriter configuration */
+export interface BlockWriterConfig {
+  /** Min block height in px. Default 80. */
+  minBlockHeight?: number;
+  /** Divider thickness in px. Default 6. (passed to ZoneTiler) */
+  dividerThickness?: number;
+  /** Allow horizontal splits (side-by-side blocks). Default true. */
+  allowHorizontalSplit?: boolean;
+}
+
+/** Phase display config — maps to Badge color variant */
+export const PHASE_CONFIG: Record<WritingPhase, { label: string; color: 'warning' | 'info' | 'success' | 'accent' | 'neutral' }> = {
+  seed:    { label: 'Seed',    color: 'warning' },
+  sprout:  { label: 'Sprout',  color: 'info' },
+  go:      { label: 'Go',      color: 'success' },
+  freeze:  { label: 'Freeze',  color: 'accent' },
+  compost: { label: 'Compost', color: 'neutral' },
+};

package/src/l0-layout/block-writer/index.ts

@@ -0,0 +1,24 @@
+// BlockWriter — layout composition for visual block-based writing
+// Controlled component — no internal store. Consumers own state.
+// Uses ZoneTiler (BSP) for layout, contenteditable for inline editing.
+
+export { default as BlockWriter } from './BlockWriter.svelte';
+export { default as BlockItem } from './BlockItem.svelte';
+export { default as BlockHeader } from './BlockHeader.svelte';
+export { default as BlockContent } from './BlockContent.svelte';
+export { default as BlockConnectionLines } from './BlockConnectionLines.svelte';
+
+export type {
+  WritingBlock,
+  BlockConnection,
+  BlockWriterSchema,
+  BlockWriterConfig,
+  WritingPhase,
+  BlockOrigin,
+} from './block-writer-types.js';
+
+// SplitDirection is re-exported from the spatial module
+
+export { PHASE_CONFIG } from './block-writer-types.js';
+
+export { renderMarkdown, renderInlineMarkdown } from './markdown.js';

package/src/l0-layout/block-writer/markdown.ts

@@ -0,0 +1,110 @@
+// BlockWriter — shared regex markdown renderer
+// Unified from DeskViewport.svelte (lines 60-92) and Atelier's MarkdownWithProvenance.svelte (lines 15-85).
+// Zero dependencies — pure regex transforms.
+//
+// DeskViewport adds: ~~del~~, [[wikilink]] support, * and _ emphasis
+// Atelier adds: proper <li>/<ul> grouping, <p> wrapping for paragraphs
+// Both: headings, blockquotes, hr, inline code/bold/italic
+
+/** Escape all 5 HTML entities. Atelier's version (full) merged with DeskViewport's (3-char). */
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+/** Inline markdown — bold, italic, del, code, wikilinks. Input is pre-escaped. */
+function renderInline(text: string): string {
+  return text
+    .replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*([^*<\n]{1,200})\*/g, '<em>$1</em>')
+    .replace(/__(.+?)__/g, '<strong>$1</strong>')
+    .replace(/_([^_<\n]{1,200})_/g, '<em>$1</em>')
+    .replace(/~~(.+?)~~/g, '<del>$1</del>')
+    .replace(/`([^`]{1,200})`/g, '<code class="md-code">$1</code>')
+    .replace(/\[\[([^\]|]{1,100})\|([^\]]{1,100})\]\]/g, '<span class="md-wiki">$2</span>')
+    .replace(/\[\[([^\]]{1,100})\]\]/g, '<span class="md-wiki">$1</span>');
+}
+
+/**
+ * Render markdown to HTML string.
+ * Handles: headings (h1-h6), unordered lists, ordered lists, blockquotes, hr,
+ * inline code/bold/italic/del/wikilinks.
+ *
+ * Input is treated as untrusted — all HTML entities are escaped before processing.
+ * Output is safe for {@html} without additional sanitization.
+ */
+export function renderMarkdown(md: string): string {
+  if (!md) return '';
+
+  const lines = md.split('\n');
+  const processed: string[] = [];
+
+  for (const line of lines) {
+    const escaped = escapeHtml(line);
+
+    // Headings
+    const hm = escaped.match(/^(#{1,6}) (.+)$/);
+    if (hm) {
+      processed.push(`<h${hm[1].length} class="md-h md-h${hm[1].length}">${renderInline(hm[2])}</h${hm[1].length}>`);
+      continue;
+    }
+
+    // Unordered list items
+    const ul = escaped.match(/^[-*+] (.+)$/);
+    if (ul) {
+      processed.push(`<li class="md-li">${renderInline(ul[1])}</li>`);
+      continue;
+    }
+
+    // Ordered list items
+    const ol = escaped.match(/^(\d+)\. (.+)$/);
+    if (ol) {
+      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>');
+      continue;
+    }
+
+    // Default: paragraph
+    processed.push(`<p class="md-p">${renderInline(escaped)}</p>`);
+  }
+
+  // Group consecutive <li> elements into <ul> (Atelier pattern)
+  let result = processed.join('\n');
+  result = result.replace(/(<li class="md-li">.*?<\/li>\n?)+/g, (match) => {
+    return `<ul class="md-ul">${match}</ul>`;
+  });
+
+  return result;
+}
+
+/**
+ * Render inline-only markdown (no block elements).
+ * Useful for single-line content like block titles, annotations, tooltips.
+ * Input is treated as untrusted.
+ */
+export function renderInlineMarkdown(text: string): string {
+  return renderInline(escapeHtml(text));
+}

package/src/l0-layout/chat-view/ChatViewLayout.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  
+  interface Props {
+    channelList?: Snippet; // E.g. Sidebar component tailored for channels
+    chatThread: Snippet;   // E.g. ChatPanel organism
+    memberList?: Snippet;  // E.g. ContextPanel showing right side members
+    class?: string;
+  }
+
+  let {
+    channelList,
+    chatThread,
+    memberList,
+    class: className = ''
+  }: Props = $props();
+</script>
+
+<div class="ds-chat-layout {className}">
+  {#if channelList}
+    <div class="ds-chat-layout-sidebar">
+      {@render channelList()}
+    </div>
+  {/if}
+
+  <main class="ds-chat-layout-main">
+    {@render chatThread()}
+  </main>
+
+  {#if memberList}
+    <div class="ds-chat-layout-members">
+      {@render memberList()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .ds-chat-layout {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .ds-chat-layout-sidebar {
+    height: 100%;
+    /* Typically the Sidebar organism handles its own width/border */
+  }
+
+  .ds-chat-layout-main {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    /* ChatPanel handles its own internal scrolling */
+  }
+
+  .ds-chat-layout-members {
+    height: 100%;
+    /* A ContextPanel is usually absolute, but can be static here */
+  }
+</style>

package/src/l0-layout/epistemic/AllayDetailPanel.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  import type { AllayStageView } from '../../epistemic/types.js';
+  import AllayGauge from '../../u0-primitives/allay-gauge/AllayGauge.svelte';
+
+  interface Props {
+    allay: AllayStageView;
+    class?: string;
+  }
+
+  let { allay, class: className = '' }: Props = $props();
+
+  const STAGE_DESCRIPTIONS = [
+    'Knowledge has been proposed but not yet evaluated.',
+    'Content has been parsed and structure verified.',
+    'Authorized — passed capability and schema checks.',
+    'Executed — reasoning chain verified by ASSAY signals.',
+    'Traced — provenance logged on the sigchain.',
+    'Replicated — independently witnessed by multiple parties.',
+  ];
+
+  const description = $derived(STAGE_DESCRIPTIONS[allay.stage] ?? '');
+  const confidencePct = $derived(`${Math.round(allay.confidence * 100)}%`);
+</script>
+
+<div class="ds-allay-detail {className}">
+  <div class="gauge-section">
+    <AllayGauge stage={allay.stage} confidence={allay.confidence} size="lg" showLabel />
+    <span class="confidence">{confidencePct}</span>
+  </div>
+
+  <div class="stage-info">
+    <div class="stage-name">Stage {allay.stage}: {allay.stageName}</div>
+    <div class="stage-desc">{description}</div>
+  </div>
+
+  <div class="scale-legend">
+    {#each [0, 1, 2, 3, 4, 5] as s}
+      <div class="scale-item" class:current={s === allay.stage}>
+        <AllayGauge stage={s as 0|1|2|3|4|5} confidence={0.5} size="sm" />
+        <span>{s}</span>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .ds-allay-detail {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    padding: var(--space-4);
+    background: var(--color-bg-panel);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-default);
+    min-width: 280px;
+    font-family: var(--font-sans);
+  }
+
+  .gauge-section {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+
+  .confidence {
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    color: var(--color-text-secondary);
+  }
+
+  .stage-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .stage-name {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+
+  .stage-desc {
+    font-size: var(--text-xs);
+    color: var(--color-text-secondary);
+    line-height: 1.5;
+  }
+
+  .scale-legend {
+    display: flex;
+    gap: var(--space-2);
+    padding-top: var(--space-2);
+    border-top: 1px solid var(--border-subtle);
+  }
+
+  .scale-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    opacity: 0.5;
+  }
+
+  .scale-item.current {
+    opacity: 1;
+  }
+
+  .scale-item span {
+    font-size: var(--text-xs);
+    font-family: var(--font-mono);
+    color: var(--color-text-tertiary);
+  }
+</style>