@stephen-netu/design-system 0.1.0

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

@@ -0,0 +1,213 @@
+<script lang="ts">
+  import { renderMarkdown } from './markdown.js';
+
+  interface Props {
+    content: string;
+    isEditing: boolean;
+    onEditStart?: () => void;
+    onEditEnd?: () => void;
+    onContentChange?: (content: string) => void;
+  }
+
+  let {
+    content = '',
+    isEditing = false,
+    onEditStart,
+    onEditEnd,
+    onContentChange,
+  }: Props = $props();
+
+  let editableEl: HTMLDivElement | undefined = $state();
+  let renderedHtml = $derived(renderMarkdown(content));
+  /** Guard: skip external sync while user is actively typing */
+  let isUserTyping = $state(false);
+  let typingTimer: ReturnType<typeof setTimeout> | undefined;
+
+  function handleFocus() {
+    onEditStart?.();
+  }
+
+  function handleBlur() {
+    isUserTyping = false;
+    clearTimeout(typingTimer);
+    onEditEnd?.();
+  }
+
+  function handleInput() {
+    if (!editableEl) return;
+    isUserTyping = true;
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(() => { isUserTyping = false; }, 500);
+    onContentChange?.(editableEl.innerText);
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      editableEl?.blur();
+    }
+    // Tab inserts two spaces via Selection/Range (no deprecated execCommand)
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      const sel = window.getSelection();
+      if (sel && sel.rangeCount > 0) {
+        const range = sel.getRangeAt(0);
+        range.deleteContents();
+        range.insertNode(document.createTextNode('  '));
+        range.collapse(false);
+        sel.removeAllRanges();
+        sel.addRange(range);
+        handleInput();
+      }
+    }
+  }
+
+  // Sync external content changes into the contenteditable — skip while user is typing
+  $effect(() => {
+    if (editableEl && isEditing && !isUserTyping && editableEl.innerText !== content) {
+      editableEl.innerText = content;
+    }
+  });
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="ds-block-content" ondblclick={onEditStart}>
+  {#if isEditing}
+    <!-- Editing mode: contenteditable div -->
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <div
+      bind:this={editableEl}
+      class="ds-block-editable"
+      contenteditable="true"
+      role="textbox"
+      aria-multiline="true"
+      tabindex="0"
+      onfocus={handleFocus}
+      onblur={handleBlur}
+      oninput={handleInput}
+      onkeydown={handleKeydown}
+    ></div>
+  {:else}
+    <!-- Rendered mode: parsed markdown -->
+    <div class="ds-block-rendered">
+      {@html renderedHtml}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .ds-block-content {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: var(--space-2, 8px) var(--space-3, 12px);
+    font-family: var(--font-mono, monospace);
+    font-size: var(--text-sm, 13px);
+    line-height: 1.6;
+    color: var(--color-text-primary, #e8e0d0);
+  }
+
+  .ds-block-editable {
+    min-height: 100%;
+    outline: none;
+    white-space: pre-wrap;
+    word-break: break-word;
+    caret-color: var(--color-accent, #b87333);
+  }
+
+  .ds-block-editable:empty::before {
+    content: 'Start writing...';
+    color: var(--color-text-muted, #a09880);
+    pointer-events: none;
+  }
+
+  .ds-block-rendered {
+    min-height: 2em;
+  }
+
+  /* Markdown rendered styles — scoped under :global for {@html} content */
+  .ds-block-rendered :global(.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 :global(.md-p) {
+    margin: 6px 0;
+  }
+
+  .ds-block-rendered :global(.md-ul) {
+    margin: 6px 0;
+    padding-left: 20px;
+    list-style: none;
+  }
+
+  .ds-block-rendered :global(.md-li) {
+    margin: 3px 0;
+  }
+
+  .ds-block-rendered :global(.md-li)::before {
+    content: '• ';
+    color: var(--color-accent, #b87333);
+  }
+
+  .ds-block-rendered :global(.md-bq) {
+    margin: 6px 0;
+    padding: 6px 10px;
+    border-left: 3px solid var(--color-accent, #b87333);
+    background: rgba(184, 115, 51, 0.08);
+    font-style: italic;
+  }
+
+  .ds-block-rendered :global(.md-hr) {
+    border: none;
+    border-top: 1px solid var(--color-border, #333);
+    margin: 12px 0;
+  }
+
+  .ds-block-rendered :global(.md-gap) {
+    height: 6px;
+  }
+
+  .ds-block-rendered :global(.md-code) {
+    padding: 1px 5px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: var(--radius-sm, 3px);
+    font-family: var(--font-mono, monospace);
+    font-size: 0.9em;
+    color: var(--color-accent, #b87333);
+  }
+
+  .ds-block-rendered :global(strong) {
+    font-weight: 600;
+    color: var(--color-text-primary, #e8e0d0);
+  }
+
+  .ds-block-rendered :global(em) {
+    font-style: italic;
+    color: var(--color-text-muted, #a09880);
+  }
+
+  .ds-block-rendered :global(del) {
+    text-decoration: line-through;
+    color: var(--color-text-muted, #a09880);
+  }
+
+  .ds-block-rendered :global(.md-wiki) {
+    color: var(--color-accent, #b87333);
+    text-decoration: underline;
+    text-decoration-style: dotted;
+    cursor: pointer;
+  }
+
+  .ds-block-rendered :global(.md-wiki:hover) {
+    text-decoration-style: solid;
+  }
+</style>

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

@@ -0,0 +1,230 @@
+<script lang="ts">
+  import { GripVertical, SplitSquareHorizontal, SplitSquareVertical, X } from '@lucide/svelte';
+  import Badge from '../../u0-primitives/badge/Badge.svelte';
+  import type { WritingPhase } from './block-writer-types.js';
+  import type { SplitDirection } from '../../spatial/zone-tiler-types.js';
+  import { PHASE_CONFIG } from './block-writer-types.js';
+
+  interface Props {
+    blockId: string;
+    title: string;
+    phase: WritingPhase;
+    isFocused: boolean;
+    allowHorizontalSplit?: boolean;
+    onPhaseChange?: (blockId: string, phase: WritingPhase) => void;
+    onSplit?: (blockId: string, direction: SplitDirection) => void;
+    onDelete?: (blockId: string) => void;
+    onTitleChange?: (blockId: string, title: string) => void;
+  }
+
+  let {
+    blockId,
+    title,
+    phase,
+    isFocused,
+    allowHorizontalSplit = true,
+    onPhaseChange,
+    onSplit,
+    onDelete,
+    onTitleChange,
+  }: Props = $props();
+
+  const phaseConfig = $derived(PHASE_CONFIG[phase]);
+
+  const phases: WritingPhase[] = ['seed', 'sprout', 'go', 'freeze', 'compost'];
+
+  function cyclePhase() {
+    const idx = phases.indexOf(phase);
+    const next = phases[(idx + 1) % phases.length];
+    onPhaseChange?.(blockId, next);
+  }
+
+  function handleTitleInput(e: Event) {
+    const target = e.target as HTMLElement;
+    onTitleChange?.(blockId, target.textContent ?? '');
+  }
+
+  function handleTitleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      (e.target as HTMLElement).blur();
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="ds-block-header" class:ds-block-header-focused={isFocused}>
+  <!-- Phase color bar (echoes KanbanCard priority bar) -->
+  <div
+    class="ds-block-phase-bar"
+    style="background-color: var(--color-{phaseConfig.color});"
+    title="Phase: {phaseConfig.label}"
+  ></div>
+
+  <!-- Drag handle -->
+  <div class="ds-block-drag-handle" title="Drag to reorder">
+    <GripVertical size={14} />
+  </div>
+
+  <!-- Phase badge (click to cycle) -->
+  <button
+    class="ds-block-phase-btn"
+    onclick={cyclePhase}
+    title="Cycle phase (current: {phaseConfig.label})"
+  >
+    <Badge variant="status" color={phaseConfig.color} size="sm">
+      {phaseConfig.label}
+    </Badge>
+  </button>
+
+  <!-- Editable title -->
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <div
+    class="ds-block-title"
+    contenteditable="true"
+    spellcheck="false"
+    tabindex="0"
+    role="textbox"
+    aria-label="Block title"
+    oninput={handleTitleInput}
+    onkeydown={handleTitleKeydown}
+  >{title}</div>
+
+  <!-- Actions (visible on focus/hover) -->
+  <div class="ds-block-actions">
+    {#if onSplit}
+      <button
+        class="ds-block-action-btn"
+        onclick={() => onSplit(blockId, 'vertical')}
+        title="Split below (Ctrl+Shift+V)"
+        aria-label="Split block below"
+      >
+        <SplitSquareVertical size={14} />
+      </button>
+      {#if allowHorizontalSplit}
+        <button
+          class="ds-block-action-btn"
+          onclick={() => onSplit(blockId, 'horizontal')}
+          title="Split beside (Ctrl+Shift+H)"
+          aria-label="Split block beside"
+        >
+          <SplitSquareHorizontal size={14} />
+        </button>
+      {/if}
+    {/if}
+    {#if onDelete}
+      <button
+        class="ds-block-action-btn ds-block-action-delete"
+        onclick={() => onDelete(blockId)}
+        title="Delete block"
+        aria-label="Delete block"
+      >
+        <X size={14} />
+      </button>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .ds-block-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 8px);
+    padding: var(--space-2, 8px) var(--space-3, 12px);
+    position: relative;
+    min-height: 32px;
+  }
+
+  .ds-block-phase-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 3px;
+    height: 100%;
+    border-radius: var(--radius-xs, 2px) 0 0 var(--radius-xs, 2px);
+  }
+
+  .ds-block-drag-handle {
+    color: var(--color-text-muted, #a09880);
+    cursor: grab;
+    padding: 2px;
+    border-radius: var(--radius-sm, 4px);
+    flex-shrink: 0;
+    transition: color var(--transition-fast, 150ms ease);
+  }
+
+  .ds-block-drag-handle:hover {
+    color: var(--color-text-secondary, #c0b8a8);
+    background: var(--color-bg-panel, #222);
+  }
+
+  .ds-block-phase-btn {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  .ds-block-title {
+    flex: 1;
+    min-width: 0;
+    font-size: var(--text-sm, 13px);
+    font-weight: 500;
+    color: var(--color-text-primary, #e8e0d0);
+    line-height: 1.3;
+    outline: none;
+    cursor: text;
+    padding: 1px 4px;
+    border-radius: var(--radius-sm, 4px);
+    transition: background var(--transition-fast, 150ms ease);
+  }
+
+  .ds-block-title:focus {
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  .ds-block-title:empty::before {
+    content: 'Untitled block';
+    color: var(--color-text-muted, #a09880);
+    pointer-events: none;
+  }
+
+  .ds-block-actions {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    opacity: 0;
+    transition: opacity var(--transition-fast, 150ms ease);
+    flex-shrink: 0;
+  }
+
+  .ds-block-header-focused .ds-block-actions,
+  .ds-block-header:hover .ds-block-actions {
+    opacity: 1;
+  }
+
+  .ds-block-action-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: var(--color-text-muted, #a09880);
+    padding: 4px;
+    border-radius: var(--radius-sm, 4px);
+    cursor: pointer;
+    transition: color var(--transition-fast, 150ms ease),
+                background var(--transition-fast, 150ms ease);
+  }
+
+  .ds-block-action-btn:hover {
+    color: var(--color-text-secondary, #c0b8a8);
+    background: rgba(255, 255, 255, 0.06);
+  }
+
+  .ds-block-action-delete:hover {
+    color: var(--color-error, #a65e5e);
+    background: rgba(166, 94, 94, 0.15);
+  }
+</style>

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

@@ -0,0 +1,177 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { WritingBlock, WritingPhase, SplitDirection } from './block-writer-types.js';
+  import type { ZoneRect } from '../../spatial/zone-tiler-types.js';
+  import BlockHeader from './BlockHeader.svelte';
+  import BlockContent from './BlockContent.svelte';
+
+  interface Props {
+    block: WritingBlock;
+    zoneRect: ZoneRect;
+    isFocused: boolean;
+    isEditing: boolean;
+    allowHorizontalSplit?: boolean;
+    onEditStart?: (blockId: string) => void;
+    onEditEnd?: (blockId: string) => void;
+    onContentChange?: (blockId: string, content: string) => void;
+    onPhaseChange?: (blockId: string, phase: WritingPhase) => void;
+    onSplit?: (blockId: string, direction: SplitDirection) => void;
+    onDelete?: (blockId: string) => void;
+    onTitleChange?: (blockId: string, title: string) => void;
+    footer?: Snippet<[WritingBlock]>;
+  }
+
+  let {
+    block,
+    zoneRect,
+    isFocused,
+    isEditing,
+    allowHorizontalSplit = true,
+    onEditStart,
+    onEditEnd,
+    onContentChange,
+    onPhaseChange,
+    onSplit,
+    onDelete,
+    onTitleChange,
+    footer,
+  }: Props = $props();
+
+  const isTiny = $derived(!isEditing && (zoneRect.width * zoneRect.height < 2000 || zoneRect.width < 80 || zoneRect.height < 60));
+</script>
+
+<div
+  class="ds-block-item"
+  class:ds-block-item-focused={isFocused}
+  class:ds-block-item-editing={isEditing}
+  class:ds-block-item-tiny={isTiny}
+  style:width="{zoneRect.width}px"
+  style:height="{zoneRect.height}px"
+>
+  {#if isTiny}
+    <div class="ds-tiny-indicator ds-phase-{block.phase}">
+      <div class="ds-tiny-id">{block.id.slice(0, 4)}</div>
+      {#if isFocused}
+        <div class="ds-tiny-hint">Press Enter to edit</div>
+      {/if}
+    </div>
+  {:else}
+    <BlockHeader
+      blockId={block.id}
+      title={block.title}
+      phase={block.phase}
+      isFocused={isFocused}
+      allowHorizontalSplit={allowHorizontalSplit}
+      onPhaseChange={onPhaseChange}
+      onSplit={onSplit}
+      onDelete={onDelete}
+      onTitleChange={onTitleChange}
+    />
+
+    <BlockContent
+      content={block.content}
+      isEditing={isEditing}
+      onEditStart={() => onEditStart?.(block.id)}
+      onEditEnd={() => onEditEnd?.(block.id)}
+      onContentChange={(content) => onContentChange?.(block.id, content)}
+    />
+  {/if}
+
+  {#if footer}
+    <div class="ds-block-footer">
+      {@render footer(block)}
+    </div>
+  {/if}
+
+  {#if block.annotation}
+    <div class="ds-block-annotation">
+      {block.annotation}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .ds-block-item {
+    display: flex;
+    flex-direction: column;
+    background: var(--color-bg-panel, #222);
+    border-radius: var(--radius-md, 8px);
+    overflow: hidden;
+    position: relative;
+    transition: box-shadow 0.15s ease;
+  }
+
+  .ds-block-item-focused {
+    box-shadow: inset 0 0 0 1.5px var(--color-accent, #b87333);
+  }
+
+  .ds-block-item-editing {
+    box-shadow: inset 0 0 0 1.5px var(--color-accent, #b87333),
+                0 0 12px rgba(184, 115, 51, 0.12);
+  }
+
+  .ds-block-item-tiny {
+    background: transparent;
+  }
+
+  .ds-tiny-indicator {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-1, 4px);
+    border-radius: var(--radius-md, 8px);
+    background: var(--color-bg-panel, #222);
+    cursor: pointer;
+    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); }
+
+  .ds-tiny-id {
+    font-family: var(--font-mono, monospace);
+    font-size: var(--text-xs, 10px);
+    color: var(--color-text-muted, #a09880);
+    opacity: 0.6;
+  }
+
+  .ds-tiny-hint {
+    font-size: var(--text-xs, 10px);
+    color: var(--color-accent, #b87333);
+    margin-top: 4px;
+    text-align: center;
+    line-height: 1.1;
+  }
+
+  .ds-block-footer {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 8px);
+    padding: var(--space-1, 4px) var(--space-3, 12px) var(--space-2, 8px);
+    font-size: var(--text-xs, 11px);
+    color: var(--color-text-muted, #a09880);
+    border-top: 1px solid var(--color-border, #333);
+    flex-shrink: 0;
+  }
+
+  .ds-block-annotation {
+    position: absolute;
+    top: var(--space-2, 8px);
+    right: var(--space-2, 8px);
+    max-width: 200px;
+    padding: var(--space-1, 4px) var(--space-2, 8px);
+    background: rgba(184, 115, 51, 0.12);
+    border: 1px solid rgba(184, 115, 51, 0.25);
+    border-radius: var(--radius-sm, 4px);
+    font-size: var(--text-xs, 11px);
+    color: var(--color-accent, #b87333);
+    font-style: italic;
+    pointer-events: none;
+    z-index: 1;
+  }
+</style>