@stephen-netu/design-system 0.1.0 → 0.2.1

package/dist/l0-layout/ValidityScoreDisplay.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+  import ValidityBadge from '../u0-primitives/badge/ValidityBadge.svelte';
+  import { getValidityColor, getValidityLabel } from '../u0-primitives/badge/validity-utils';
+
+  interface Props {
+    score: number;
+    total?: number;
+    label?: string;
+    size?: 'sm' | 'md' | 'lg';
+    showProgress?: boolean;
+    showLabel?: boolean;
+    class?: string;
+  }
+
+  let {
+    score,
+    total = 1000,
+    label,
+    size = 'md',
+    showProgress = false,
+    showLabel = false,
+    class: className = ''
+  }: Props = $props();
+
+  const validityColor = $derived(getValidityColor(score));
+  const validityLabel = $derived(getValidityLabel(score));
+  const percentage = $derived(total > 0 ? Math.round((score / total) * 100) : 0);
+  const clampedPercentage = $derived(Math.max(0, Math.min(100, percentage)));
+
+  function getValidityColorClass(score: number): string {
+    if (score >= 900) return 'validity-high';
+    if (score >= 700) return 'validity-medium';
+    if (score >= 500) return 'validity-low';
+    return 'validity-critical';
+  }
+</script>
+
+<div class="ds-validity-score-display {getValidityColorClass(score)} {className}" role="region" aria-label={label || validityLabel}>
+  {#if label}
+    <div class="ds-validity-label-main">{label}</div>
+  {/if}
+  
+  <div class="ds-validity-score-row">
+    <ValidityBadge {score} {total} {size} {showLabel} />
+    
+    {#if showProgress}
+      <div class="ds-validity-progress-container">
+        <div 
+          class="ds-validity-progress-bar" 
+          style="width: {clampedPercentage}%"
+          role="progressbar"
+          aria-valuenow={score}
+          aria-valuemin={0}
+          aria-valuemax={total}
+          aria-label="Validity score: {score} of {total}"
+        ></div>
+      </div>
+      <span class="ds-validity-percentage">{percentage}%</span>
+    {/if}
+  </div>
+  
+  {#if showLabel && !showProgress}
+    <div class="ds-validity-sublabel">{validityLabel}</div>
+  {/if}
+</div>
+
+<style>
+  .ds-validity-score-display {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    padding: 0.5rem;
+    border-radius: var(--radius-md);
+    transition: all var(--transition-fast);
+  }
+
+  .ds-validity-label-main {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--color-text-secondary);
+  }
+
+  .ds-validity-score-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .ds-validity-progress-container {
+    flex: 1;
+    min-width: 80px;
+    max-width: 200px;
+    height: var(--validity-progress-height);
+    background: var(--validity-progress-bg);
+    border-radius: var(--validity-progress-border-radius);
+    overflow: hidden;
+  }
+
+  .ds-validity-progress-bar {
+    height: 100%;
+    border-radius: var(--validity-progress-border-radius);
+    transition: width var(--transition-normal);
+  }
+
+  .ds-validity-percentage {
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    min-width: 2.5rem;
+    text-align: right;
+  }
+
+  .ds-validity-sublabel {
+    font-size: var(--text-xs);
+    opacity: 0.7;
+  }
+
+  /* High Validity */
+  .validity-high {
+    border-left: 3px solid var(--validity-high);
+  }
+  .validity-high .ds-validity-progress-bar {
+    background: var(--validity-high);
+  }
+
+  /* Medium Validity */
+  .validity-medium {
+    border-left: 3px solid var(--validity-medium);
+  }
+  .validity-medium .ds-validity-progress-bar {
+    background: var(--validity-medium);
+  }
+
+  /* Low Validity */
+  .validity-low {
+    border-left: 3px solid var(--validity-low);
+  }
+  .validity-low .ds-validity-progress-bar {
+    background: var(--validity-low);
+  }
+
+  /* Critical Validity */
+  .validity-critical {
+    border-left: 3px solid var(--validity-critical);
+  }
+  .validity-critical .ds-validity-progress-bar {
+    background: var(--validity-critical);
+  }
+
+  /* Hover effect */
+  .ds-validity-score-display:hover {
+    background: var(--color-bg-panel-elevated);
+  }
+</style>

package/dist/l0-layout/ValidityScoreDisplay.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    score: number;
+    total?: number;
+    label?: string;
+    size?: 'sm' | 'md' | 'lg';
+    showProgress?: boolean;
+    showLabel?: boolean;
+    class?: string;
+}
+declare const ValidityScoreDisplay: import("svelte").Component<Props, {}, "">;
+type ValidityScoreDisplay = ReturnType<typeof ValidityScoreDisplay>;
+export default ValidityScoreDisplay;
+//# sourceMappingURL=ValidityScoreDisplay.svelte.d.ts.map

package/dist/l0-layout/ValidityScoreDisplay.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidityScoreDisplay.svelte.d.ts","sourceRoot":"","sources":["../../src/l0-layout/ValidityScoreDisplay.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsDH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/l0-layout/VirtualGrid.svelte

@@ -0,0 +1,225 @@
+<script lang="ts" module>
+  /**
+   * VirtualGrid — Virtualized grid layout with item preloading
+   * 
+   * A generalized version of NNJAS VirtualNodeGrid for the LEAP design system.
+   * Efficiently renders large grids by only mounting visible items.
+   * 
+   * @example
+   * <VirtualGrid
+   *   items={nodes}
+   *   itemHeight={120}
+   *   columns={5}
+   *   gap={8}
+   *   let:item
+   *   let:index
+   * >
+   *   <Card title={item.title} />
+   * </VirtualGrid>
+   */
+  export interface GridItem {
+    id: string;
+    [key: string]: unknown;
+  }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { createVirtualGrid, createPreloader } from '../s0-state/virtual.js';
+
+  interface Props {
+    items: GridItem[];
+    columns?: number;
+    itemHeight?: number;
+    gap?: number;
+    overscan?: number;
+    containerHeight: number;
+    containerWidth: number;
+    preloadAhead?: number;
+    /**
+     * Snippet for rendering each item.
+     * Receives the item and its index.
+     */
+    children: Snippet<[GridItem, number]>;
+    /**
+     * Optional snippet for rendering while loading
+     */
+    loadingSnippet?: Snippet;
+    class?: string;
+  }
+
+  let {
+    items,
+    columns = 5,
+    itemHeight = 120,
+    gap = 8,
+    overscan = 2,
+    containerHeight,
+    containerWidth,
+    preloadAhead = 2,
+    children,
+    loadingSnippet,
+    class: className = ''
+  }: Props = $props();
+
+  // Grid calculation
+  let effectiveColumns = $derived(
+    Math.max(1, Math.floor((containerWidth + gap) / (Math.floor((containerWidth - (columns - 1) * gap) / columns) + gap)))
+  );
+
+  // Virtual grid state
+  let scrollTop = $state(0);
+  let scrollContainer: HTMLDivElement | undefined = $state();
+
+  let virtualGrid = $derived(
+    createVirtualGrid({
+      totalItems: items.length,
+      columns: effectiveColumns,
+      itemHeight,
+      gap,
+      overscan,
+      containerHeight
+    })
+  );
+
+  let visibleRows = $derived(virtualGrid.getVisibleRows(scrollTop));
+
+  // Flatten visible rows to items with positions
+  let visibleItems = $derived.by(() => {
+    const result: Array<{ item: GridItem; index: number; style: string }> = [];
+
+    for (const row of visibleRows) {
+      const rowItems = virtualGrid.getItemsInRow(row.index);
+      for (let col = 0; col < rowItems.length; col++) {
+        const index = rowItems[col];
+        if (index < items.length) {
+          const x = col * (containerWidth / effectiveColumns);
+          const y = row.offset;
+          result.push({
+            item: items[index],
+            index,
+            style: `position: absolute; left: ${x}px; top: ${y}px; width: ${containerWidth / effectiveColumns - gap}px; height: ${itemHeight}px;`
+          });
+        }
+      }
+    }
+
+    return result;
+  });
+
+  // Preloader for content
+  let preloader = $derived(
+    createPreloader<string>({ preloadAhead, keepBehind: 1 })
+  );
+
+  // Track loaded content
+  let loadedContent = $state<Set<string>>(new Set());
+  let loadingContent = $state<Set<string>>(new Set());
+
+  // Update preloader when visible items change
+  $effect(() => {
+    const visibleIds = visibleItems.map(v => v.item.id);
+    const allIds = items.map(i => i.id);
+    const state = preloader.update(visibleIds, allIds);
+
+    // Mark for loading
+    for (const id of state.toLoad) {
+      if (!loadingContent.has(id) && !loadedContent.has(id)) {
+        loadingContent.add(id);
+        // Simulate async load - in real use, this would fetch content
+        setTimeout(() => {
+          loadedContent.add(id);
+          loadingContent.delete(id);
+        }, 50);
+      }
+    }
+
+    // Mark for unloading (cleanup)
+    for (const id of state.toUnload) {
+      loadedContent.delete(id);
+    }
+  });
+
+  function handleScroll(e: Event) {
+    const target = e.target as HTMLDivElement;
+    scrollTop = target.scrollTop;
+  }
+</script>
+
+<div
+  class="virtual-grid {className}"
+  style="height: {containerHeight}px;"
+>
+  <div
+    class="virtual-grid-scroll"
+    bind:this={scrollContainer}
+    onscroll={handleScroll}
+    style="height: 100%; overflow-y: auto;"
+  >
+    <div
+      class="virtual-grid-content"
+      style="height: {virtualGrid.totalHeight}px; position: relative;"
+    >
+      {#each visibleItems as { item, index, style } (item.id)}
+        <div class="virtual-grid-item" {style}>
+          {#if loadedContent.has(item.id)}
+            {@render children(item, index)}
+          {:else if loadingSnippet}
+            {@render loadingSnippet()}
+          {:else}
+            <div class="virtual-grid-placeholder" style="width: 100%; height: 100%;"></div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  .virtual-grid {
+    position: relative;
+    width: 100%;
+    background: var(--color-bg-canvas, #1a1a1a);
+  }
+
+  .virtual-grid-scroll {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-text-muted, #666) var(--color-bg-panel, #222);
+  }
+
+  .virtual-grid-scroll::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .virtual-grid-scroll::-webkit-scrollbar-track {
+    background: var(--color-bg-panel, #222);
+  }
+
+  .virtual-grid-scroll::-webkit-scrollbar-thumb {
+    background: var(--color-text-muted, #666);
+    border-radius: 4px;
+  }
+
+  .virtual-grid-content {
+    width: 100%;
+  }
+
+  .virtual-grid-item {
+    box-sizing: border-box;
+  }
+
+  .virtual-grid-placeholder {
+    background: var(--color-bg-panel, #222);
+    border-radius: var(--radius-md, 4px);
+    animation: pulse 2s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% {
+      opacity: 0.5;
+    }
+    50% {
+      opacity: 0.8;
+    }
+  }
+</style>

package/dist/l0-layout/VirtualGrid.svelte.d.ts

@@ -0,0 +1,47 @@
+/**
+ * VirtualGrid — Virtualized grid layout with item preloading
+ *
+ * A generalized version of NNJAS VirtualNodeGrid for the LEAP design system.
+ * Efficiently renders large grids by only mounting visible items.
+ *
+ * @example
+ * <VirtualGrid
+ *   items={nodes}
+ *   itemHeight={120}
+ *   columns={5}
+ *   gap={8}
+ *   let:item
+ *   let:index
+ * >
+ *   <Card title={item.title} />
+ * </VirtualGrid>
+ */
+export interface GridItem {
+    id: string;
+    [key: string]: unknown;
+}
+import type { Snippet } from 'svelte';
+interface Props {
+    items: GridItem[];
+    columns?: number;
+    itemHeight?: number;
+    gap?: number;
+    overscan?: number;
+    containerHeight: number;
+    containerWidth: number;
+    preloadAhead?: number;
+    /**
+     * Snippet for rendering each item.
+     * Receives the item and its index.
+     */
+    children: Snippet<[GridItem, number]>;
+    /**
+     * Optional snippet for rendering while loading
+     */
+    loadingSnippet?: Snippet;
+    class?: string;
+}
+declare const VirtualGrid: import("svelte").Component<Props, {}, "">;
+type VirtualGrid = ReturnType<typeof VirtualGrid>;
+export default VirtualGrid;
+//# sourceMappingURL=VirtualGrid.svelte.d.ts.map

package/dist/l0-layout/VirtualGrid.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualGrid.svelte.d.ts","sourceRoot":"","sources":["../../src/l0-layout/VirtualGrid.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IACtC;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgIH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/{src → dist}/l0-layout/block-writer/BlockConnectionLines.svelte

@@ -76,7 +76,7 @@
   }
 
   .ds-block-conn-line {
-    stroke: var(--color-accent, #b87333);
+    stroke: var(--color-accent, var(--color-accent));
     stroke-opacity: 0.35;
     stroke-width: 1.5;
     stroke-dasharray: 4 3;

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

@@ -0,0 +1,11 @@
+import type { BlockConnection } from './block-writer-types.js';
+import type { ZoneRect } from '../../spatial/zone-tiler-types.js';
+interface Props {
+    connections: BlockConnection[];
+    zones: ZoneRect[];
+    focusedBlockId?: string;
+}
+declare const BlockConnectionLines: import("svelte").Component<Props, {}, "">;
+type BlockConnectionLines = ReturnType<typeof BlockConnectionLines>;
+export default BlockConnectionLines;
+//# sourceMappingURL=BlockConnectionLines.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockConnectionLines.svelte.d.ts","sourceRoot":"","sources":["../../../src/l0-layout/block-writer/BlockConnectionLines.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAGhE,UAAU,KAAK;IACb,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAwDH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/{src → dist}/l0-layout/block-writer/BlockContent.svelte

@@ -112,7 +112,7 @@
     outline: none;
     white-space: pre-wrap;
     word-break: break-word;
-    caret-color: var(--color-accent, #b87333);
+    caret-color: var(--color-accent, var(--color-accent));
   }
 
   .ds-block-editable:empty::before {
@@ -155,14 +155,14 @@
 
   .ds-block-rendered :global(.md-li)::before {
     content: '• ';
-    color: var(--color-accent, #b87333);
+    color: var(--color-accent, var(--color-accent));
   }
 
   .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);
+    border-left: 3px solid var(--color-accent, var(--color-accent));
+    background: var(--color-accent-subtle);
     font-style: italic;
   }
 
@@ -182,7 +182,7 @@
     border-radius: var(--radius-sm, 3px);
     font-family: var(--font-mono, monospace);
     font-size: 0.9em;
-    color: var(--color-accent, #b87333);
+    color: var(--color-accent, var(--color-accent));
   }
 
   .ds-block-rendered :global(strong) {
@@ -201,7 +201,7 @@
   }
 
   .ds-block-rendered :global(.md-wiki) {
-    color: var(--color-accent, #b87333);
+    color: var(--color-accent, var(--color-accent));
     text-decoration: underline;
     text-decoration-style: dotted;
     cursor: pointer;

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

@@ -0,0 +1,11 @@
+interface Props {
+    content: string;
+    isEditing: boolean;
+    onEditStart?: () => void;
+    onEditEnd?: () => void;
+    onContentChange?: (content: string) => void;
+}
+declare const BlockContent: import("svelte").Component<Props, {}, "">;
+type BlockContent = ReturnType<typeof BlockContent>;
+export default BlockContent;
+//# sourceMappingURL=BlockContent.svelte.d.ts.map

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

@@ -0,0 +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"}

package/{src → dist}/l0-layout/block-writer/BlockHeader.svelte

@@ -193,7 +193,7 @@
   .ds-block-actions {
     display: flex;
     align-items: center;
-    gap: 2px;
+    gap: var(--space-05);
     opacity: 0;
     transition: opacity var(--transition-fast, 150ms ease);
     flex-shrink: 0;

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

@@ -0,0 +1,17 @@
+import type { WritingPhase } from './block-writer-types.js';
+import type { SplitDirection } from '../../spatial/zone-tiler-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;
+}
+declare const BlockHeader: import("svelte").Component<Props, {}, "">;
+type BlockHeader = ReturnType<typeof BlockHeader>;
+export default BlockHeader;
+//# sourceMappingURL=BlockHeader.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/l0-layout/block-writer/BlockHeader.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAItE,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/D,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1D;AAyFH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/{src → dist}/l0-layout/block-writer/BlockItem.svelte

@@ -102,12 +102,12 @@
   }
 
   .ds-block-item-focused {
-    box-shadow: inset 0 0 0 1.5px var(--color-accent, #b87333);
+    box-shadow: inset 0 0 0 1.5px var(--color-accent, var(--color-accent));
   }
 
   .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);
+    box-shadow: inset 0 0 0 1.5px var(--color-accent, var(--color-accent)),
+                0 0 12px var(--color-accent-subtle);
   }
 
   .ds-block-item-tiny {
@@ -142,7 +142,7 @@
 
   .ds-tiny-hint {
     font-size: var(--text-xs, 10px);
-    color: var(--color-accent, #b87333);
+    color: var(--color-accent, var(--color-accent));
     margin-top: 4px;
     text-align: center;
     line-height: 1.1;
@@ -165,11 +165,11 @@
     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);
+    background: var(--color-accent-subtle);
+    border: 1px solid var(--color-accent-muted);
     border-radius: var(--radius-sm, 4px);
     font-size: var(--text-xs, 11px);
-    color: var(--color-accent, #b87333);
+    color: var(--color-accent, var(--color-accent));
     font-style: italic;
     pointer-events: none;
     z-index: 1;

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

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { WritingBlock, WritingPhase, SplitDirection } from './block-writer-types.js';
+import type { ZoneRect } from '../../spatial/zone-tiler-types.js';
+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]>;
+}
+declare const BlockItem: import("svelte").Component<Props, {}, "">;
+type BlockItem = ReturnType<typeof BlockItem>;
+export default BlockItem;
+//# sourceMappingURL=BlockItem.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/l0-layout/block-writer/BlockItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC1F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAKhE,UAAU,KAAK;IACb,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/D,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;CAClC;AA2DH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,23 @@
+export type { WritingBlock, BlockConnection, BlockWriterSchema, BlockWriterConfig, WritingPhase, BlockOrigin, SplitDirection, } from './block-writer-types.js';
+export { PHASE_CONFIG } from './block-writer-types.js';
+import type { Snippet } from 'svelte';
+import type { BlockWriterSchema, BlockWriterConfig, WritingBlock, WritingPhase, SplitDirection } from './block-writer-types.js';
+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]>;
+}
+declare const BlockWriter: import("svelte").Component<Props, {}, "">;
+type BlockWriter = ReturnType<typeof BlockWriter>;
+export default BlockWriter;
+//# sourceMappingURL=BlockWriter.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlockWriter.svelte.d.ts","sourceRoot":"","sources":["../../../src/l0-layout/block-writer/BlockWriter.svelte.ts"],"names":[],"mappings":"AAIE,YAAY,EACV,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,cAAc,GACf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGzD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EACR,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAUjC,UAAU,KAAK;IACb,MAAM,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACrD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACpE,UAAU,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IACvE,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;CAClC;AAqJH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}