@texuli/blocks 0.0.0-stage → 0.1.0-next.0

package/dist/diagram/TreeDiagram.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+import { layoutTree } from './layout.js';
+import type { TreeDiagram } from './schema.js';
+import { DIAGRAM_PAD, toneBorder } from './tones.js';
+import './diagram.css';
+
+/**
+ * Tree: file-tree is a nested list; org is layoutTree elbows + sr list alt text.
+ */
+let { block }: { block: TreeDiagram } = $props();
+
+const layout = $derived(layoutTree(block));
+const byId = $derived(new Map(block.nodes.map((node) => [node.id, node])));
+const positions = $derived(new Map(layout.positions.map((p) => [p.id, p])));
+const children = $derived.by(() => {
+  const map = new Map<string | null, string[]>();
+  for (const node of block.nodes) {
+    map.set(node.parentId, [...(map.get(node.parentId) ?? []), node.id]);
+  }
+  return map;
+});
+const roots = $derived(children.get(null) ?? []);
+const stageW = $derived(layout.width + DIAGRAM_PAD * 2);
+const stageH = $derived(layout.height + DIAGRAM_PAD * 2);
+const summary = $derived(
+  `${block.style === 'org' ? 'Organization chart' : 'File tree'} with ${block.nodes.length} ${
+    block.nodes.length === 1 ? 'item' : 'items'
+  }`
+);
+
+function elbow(from: string, to: string): string {
+  const a = positions.get(from);
+  const b = positions.get(to);
+  if (!a || !b) return '';
+  const mid = a.y + a.height + (b.y - a.y - a.height) / 2;
+  return `M ${a.x + a.width / 2} ${a.y + a.height} V ${mid} H ${b.x + b.width / 2} V ${b.y}`;
+}
+
+function nodeStyle(node: { x: number; y: number; width: number; height: number }): string {
+  return [
+    `--tx-dx:${node.x + DIAGRAM_PAD}px`,
+    `--tx-dy:${node.y + DIAGRAM_PAD}px`,
+    `--tx-dw:${node.width}px`,
+    `--tx-dh:${node.height}px`,
+  ].join(';');
+}
+</script>
+
+{#snippet branch(id: string, visual: boolean)}
+  {@const node = byId.get(id)}
+  {@const kids = children.get(id) ?? []}
+  {#if node}
+    <li>
+      {#if visual}
+        <span class="tx-diagram-filetree__row">
+          <svg
+            class={`tx-diagram-filetree__icon ${kids.length > 0 ? 'tx-diagram-filetree__icon--folder' : ''}`}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+            focusable="false"
+          >
+            {#if kids.length > 0}
+              <path
+                d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
+              />
+            {:else}
+              <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+              <path d="M14 2v4a2 2 0 0 0 2 2h4M16 13H8m8 4H8m2-8H8" />
+            {/if}
+          </svg>
+          <span class={kids.length > 0 ? 'tx-diagram-filetree__name--folder' : ''}>{node.label}</span>
+          {#if kids.length > 0}
+            <span class="tx-diagram-sr"
+              >(folder, {kids.length} {kids.length === 1 ? 'item' : 'items'})</span
+            >
+          {/if}
+        </span>
+      {:else}
+        {node.label}
+      {/if}
+      {#if kids.length > 0}
+        <ul>
+          {#each kids as kid (kid)}
+            {@render branch(kid, visual)}
+          {/each}
+        </ul>
+      {/if}
+    </li>
+  {/if}
+{/snippet}
+
+<figure class="tx-diagram" data-tx-diagram="tree" data-style={block.style}>
+  {#if block.style === 'file-tree'}
+    <div class="tx-diagram-filetree">
+      <ul aria-label={summary}>
+        {#each roots as root (root)}
+          {@render branch(root, true)}
+        {/each}
+      </ul>
+    </div>
+  {:else}
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -- wide chart scrolls; keyboard users must reach it. -->
+    <div class="tx-diagram__scroll" role="region" aria-label={summary} tabindex="0">
+      <ul class="tx-diagram-sr">
+        {#each roots as root (root)}
+          {@render branch(root, false)}
+        {/each}
+      </ul>
+      <div
+        class="tx-diagram__stage"
+        aria-hidden="true"
+        style={`--tx-diagram-w:${stageW}px;--tx-diagram-h:${stageH}px`}
+      >
+        <svg
+          class="tx-diagram__svg"
+          width={stageW}
+          height={stageH}
+          viewBox={`${-DIAGRAM_PAD} ${-DIAGRAM_PAD} ${stageW} ${stageH}`}
+          focusable="false"
+        >
+          {#each layout.edges as edge (`${edge.from}-${edge.to}`)}
+            <path
+              d={elbow(edge.from, edge.to)}
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              data-edge="parent"
+            />
+          {/each}
+        </svg>
+        {#each layout.positions as node (node.id)}
+          <div
+            class={`tx-diagram-node tx-diagram-node--org ${toneBorder(node.tone)}`}
+            style={nodeStyle(node)}
+            title={node.label}
+            data-node={node.id}
+          >
+            <span class="tx-diagram-node__label">{node.label}</span>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</figure>

package/dist/diagram/TreeDiagram.svelte.d.ts

@@ -0,0 +1,8 @@
+/// <reference path="../css-modules.d.ts" />
+import type { TreeDiagram } from './schema.js';
+type $$ComponentProps = {
+    block: TreeDiagram;
+};
+declare const TreeDiagram: import("svelte").Component<$$ComponentProps, {}, "">;
+type TreeDiagram = ReturnType<typeof TreeDiagram>;
+export default TreeDiagram;

package/dist/diagram/diagram.css

@@ -0,0 +1,287 @@
+/**
+ * Diagram family — @layer tx.components. Geometry uses CSS custom properties
+ * set from validated layout numbers (no free-form style strings).
+ */
+@layer tx.components {
+  .tx-diagram {
+    display: grid;
+    gap: 0.5rem;
+  }
+
+  .tx-diagram__scroll {
+    overflow-x: auto;
+    border-radius: var(--tx-radius-lg, 0.5rem);
+    outline: none;
+  }
+
+  .tx-diagram__scroll:focus-visible {
+    outline: var(--tx-focus-ring-width, 2px) solid var(--tx-ring, Highlight);
+    outline-offset: var(--tx-focus-ring-offset, 2px);
+  }
+
+  .tx-diagram__stage {
+    position: relative;
+    inline-size: var(--tx-diagram-w);
+    block-size: var(--tx-diagram-h);
+  }
+
+  .tx-diagram__svg {
+    position: absolute;
+    inset: 0;
+    overflow: visible;
+    color: var(--tx-muted-foreground, GrayText);
+  }
+
+  .tx-diagram-node {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    inset-inline-start: var(--tx-dx);
+    inset-block-start: var(--tx-dy);
+    inline-size: var(--tx-dw);
+    block-size: var(--tx-dh);
+    border-radius: var(--tx-radius-lg, 0.5rem);
+    border: 1px solid var(--tx-border, currentColor);
+    border-inline-start-width: 4px;
+    background-color: var(--tx-surface, Canvas);
+    color: var(--tx-surface-foreground, CanvasText);
+    padding-inline: 0.75rem;
+    font-size: var(--tx-font-size-sm, 0.875rem);
+    box-shadow: var(--tx-shadow-soft, none);
+  }
+
+  .tx-diagram-node--org {
+    justify-content: center;
+    text-align: center;
+    border-inline-start-width: 1px;
+    border-block-start-width: 4px;
+  }
+
+  .tx-diagram-node__index {
+    flex-shrink: 0;
+    font-family: var(--tx-font-mono, ui-monospace, monospace);
+    font-size: var(--tx-font-size-xs, 0.75rem);
+    color: var(--tx-muted-foreground, GrayText);
+  }
+
+  .tx-diagram-node__label {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .tx-diagram-tone--neutral {
+    border-color: var(--tx-border, currentColor);
+  }
+  .tx-diagram-tone--accent {
+    border-color: var(--tx-primary, Highlight);
+  }
+  .tx-diagram-tone--info {
+    border-color: var(--tx-info, dodgerblue);
+  }
+  .tx-diagram-tone--success {
+    border-color: var(--tx-success, green);
+  }
+  .tx-diagram-tone--warning {
+    border-color: var(--tx-warning, orange);
+  }
+  .tx-diagram-tone--danger {
+    border-color: var(--tx-destructive, crimson);
+  }
+
+  .tx-diagram-board {
+    display: flex;
+    min-inline-size: max-content;
+    gap: 1rem;
+    padding: 0.25rem;
+  }
+
+  .tx-diagram-column {
+    display: grid;
+    inline-size: 14rem;
+    flex-shrink: 0;
+    align-content: start;
+    gap: 0.5rem;
+    border-radius: var(--tx-radius-lg, 0.5rem);
+    border: 1px solid var(--tx-border, currentColor);
+    background-color: color-mix(in srgb, var(--tx-muted, Canvas) 40%, transparent);
+    padding: 0.5rem;
+  }
+
+  .tx-diagram-column__title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0;
+    padding-inline: 0.25rem;
+    font-size: var(--tx-font-size-sm, 0.875rem);
+    font-weight: var(--tx-font-weight-semibold, 600);
+  }
+
+  .tx-diagram-column__count {
+    font-size: var(--tx-font-size-xs, 0.75rem);
+    font-weight: 400;
+    color: var(--tx-muted-foreground, GrayText);
+  }
+
+  .tx-diagram-cards {
+    display: grid;
+    gap: 0.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .tx-diagram-card {
+    margin: 0;
+    border-radius: var(--tx-radius-md, 0.375rem);
+    border: 1px solid var(--tx-border, currentColor);
+    border-inline-start-width: 4px;
+    background-color: var(--tx-surface, Canvas);
+    color: var(--tx-surface-foreground, CanvasText);
+    padding-block: 0.5rem;
+    padding-inline: 0.75rem;
+    font-size: var(--tx-font-size-sm, 0.875rem);
+    list-style: none;
+  }
+
+  .tx-diagram-empty {
+    margin: 0;
+    padding-inline: 0.25rem;
+    font-size: var(--tx-font-size-xs, 0.75rem);
+    color: var(--tx-muted-foreground, GrayText);
+  }
+
+  .tx-diagram-terminal {
+    overflow: hidden;
+    border-radius: var(--tx-radius-lg, 0.5rem);
+    border: 1px solid var(--tx-border, currentColor);
+    background-color: var(--tx-surface, Canvas);
+    color: var(--tx-surface-foreground, CanvasText);
+  }
+
+  .tx-diagram-terminal__chrome {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    border-block-end: 1px solid var(--tx-border, currentColor);
+    padding-block: 0.5rem;
+    padding-inline: 0.75rem;
+  }
+
+  .tx-diagram-terminal__dot {
+    inline-size: 0.625rem;
+    block-size: 0.625rem;
+    border-radius: 9999px;
+    background-color: color-mix(in srgb, var(--tx-muted-foreground, GrayText) 40%, transparent);
+  }
+
+  .tx-diagram-terminal__lines {
+    display: grid;
+    gap: 0.125rem;
+    margin: 0;
+    padding: 0.75rem;
+    font-family: var(--tx-font-mono, ui-monospace, monospace);
+    font-size: 13px;
+    line-height: 1.6;
+    list-style: none;
+  }
+
+  .tx-diagram-terminal__line {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  .tx-diagram-terminal__line[data-kind="comment"] {
+    font-style: italic;
+    color: var(--tx-muted-foreground, GrayText);
+  }
+
+  .tx-diagram-terminal__prompt-mark {
+    user-select: none;
+    font-weight: 600;
+    color: var(--tx-primary, Highlight);
+  }
+
+  .tx-diagram-terminal__prompt-text {
+    font-weight: 600;
+  }
+
+  .tx-diagram-filetree {
+    overflow-x: auto;
+    border-radius: var(--tx-radius-lg, 0.5rem);
+    border: 1px solid var(--tx-border, currentColor);
+    background-color: var(--tx-surface, Canvas);
+    color: var(--tx-surface-foreground, CanvasText);
+    padding: 0.75rem;
+    font-family: var(--tx-font-mono, ui-monospace, monospace);
+    font-size: var(--tx-font-size-sm, 0.875rem);
+  }
+
+  .tx-diagram-filetree ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .tx-diagram-filetree ul ul {
+    margin-inline-start: 0.5rem;
+    border-inline-start: 1px solid var(--tx-border, currentColor);
+    padding-inline-start: 1rem;
+  }
+
+  .tx-diagram-filetree__row {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding-block: 0.125rem;
+  }
+
+  .tx-diagram-filetree__icon {
+    inline-size: 1rem;
+    block-size: 1rem;
+    flex-shrink: 0;
+    color: var(--tx-muted-foreground, GrayText);
+  }
+
+  .tx-diagram-filetree__icon--folder {
+    color: var(--tx-primary, Highlight);
+  }
+
+  .tx-diagram-filetree__name--folder {
+    font-weight: 500;
+  }
+
+  .tx-diagram-fallback {
+    margin: 0;
+    border-radius: var(--tx-radius-md, 0.375rem);
+    border: 1px solid var(--tx-border, currentColor);
+    background-color: color-mix(in srgb, var(--tx-muted, Canvas) 40%, transparent);
+    padding: 1rem;
+    font-size: var(--tx-font-size-sm, 0.875rem);
+    color: var(--tx-muted-foreground, GrayText);
+  }
+
+  .tx-diagram-sr {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  @media (forced-colors: active) {
+    .tx-diagram-node,
+    .tx-diagram-card,
+    .tx-diagram-column {
+      border: 1px solid ButtonText;
+      forced-color-adjust: none;
+    }
+  }
+}

package/dist/diagram/diagram.css.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/diagram/engine.d.ts

@@ -0,0 +1,16 @@
+/**
+ * `@texuli/blocks/diagram/engine` — Svelte-free diagram models, limits and layout math.
+ * No `.svelte` and no `svelte` imports. Use `@texuli/blocks/diagram` for loaders.
+ */
+import type { FieldIssue } from '../core/schema/primitives.js';
+import type { Diagram, DiagramType } from './schema.js';
+export { type DiagramEdge, type DiagramLayout, type DiagramPosition, layoutBoard, layoutFlow, layoutTerminal, layoutTree, } from './layout.js';
+export { type BoardCard, type BoardColumn, type BoardDiagram, DIAGRAM_BLOCK_TYPES, DIAGRAM_LIMITS, type Diagram, type DiagramParseResult, type DiagramType, diagramJsonPath, type FlowDiagram, type FlowNode, parseDiagram, type TerminalDiagram, type TerminalLine, type TreeDiagram, type TreeNode, } from './schema.js';
+export { DIAGRAM_PAD, TONE_BORDER, toneBorder } from './tones.js';
+export type DiagramFamilyBlock = Diagram;
+export declare function isDiagramFamilyBlock(value: unknown): value is Diagram;
+export declare function isDiagramFamilyType(type: string): type is DiagramType;
+export interface DiagramBlockViewProps {
+    block: unknown;
+    oninvalid?: (issues: FieldIssue[]) => void;
+}

package/dist/diagram/engine.js

@@ -0,0 +1,14 @@
+/**
+ * `@texuli/blocks/diagram/engine` — Svelte-free diagram models, limits and layout math.
+ * No `.svelte` and no `svelte` imports. Use `@texuli/blocks/diagram` for loaders.
+ */
+import { DIAGRAM_BLOCK_TYPES, parseDiagram } from "./schema.js";
+export { layoutBoard, layoutFlow, layoutTerminal, layoutTree, } from "./layout.js";
+export { DIAGRAM_BLOCK_TYPES, DIAGRAM_LIMITS, diagramJsonPath, parseDiagram, } from "./schema.js";
+export { DIAGRAM_PAD, TONE_BORDER, toneBorder } from "./tones.js";
+export function isDiagramFamilyBlock(value) {
+    return parseDiagram(value).success;
+}
+export function isDiagramFamilyType(type) {
+    return DIAGRAM_BLOCK_TYPES.includes(type);
+}

package/dist/diagram/family.d.ts

@@ -0,0 +1,7 @@
+import type { Component } from 'svelte';
+import type { DiagramBlockViewProps } from './engine.js';
+export { DIAGRAM_BLOCK_TYPES, type Diagram, type DiagramBlockViewProps, type DiagramFamilyBlock, type DiagramType, isDiagramFamilyBlock, isDiagramFamilyType, } from './engine.js';
+/** Lazily loads the diagram family renderer (its own chunk). */
+export declare function loadDiagramFamily(): Promise<{
+    default: Component<DiagramBlockViewProps>;
+}>;

package/dist/diagram/family.js

@@ -0,0 +1,5 @@
+export { DIAGRAM_BLOCK_TYPES, isDiagramFamilyBlock, isDiagramFamilyType, } from "./engine.js";
+/** Lazily loads the diagram family renderer (its own chunk). */
+export function loadDiagramFamily() {
+    return import('./DiagramFamily.svelte');
+}

package/dist/diagram/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference path="../css-modules.d.ts" />
+/**
+ * `@texuli/blocks/diagram` — flow, sequence/org tree, board and terminal
+ * diagrams from validated data. Layout math is framework-free; Svelte
+ * renderers load through `loadDiagramFamily()`.
+ */
+export { DIAGRAM_BLOCK_TYPES, type DiagramBlockViewProps, type DiagramFamilyBlock, isDiagramFamilyBlock, isDiagramFamilyType, loadDiagramFamily, } from './family.js';
+export { type DiagramEdge, type DiagramLayout, type DiagramPosition, layoutBoard, layoutFlow, layoutTerminal, layoutTree, } from './layout.js';
+export { type BoardCard, type BoardColumn, type BoardDiagram, DIAGRAM_LIMITS, type Diagram, type DiagramParseResult, type DiagramType, diagramJsonPath, type FlowDiagram, type FlowNode, parseDiagram, type TerminalDiagram, type TerminalLine, type TreeDiagram, type TreeNode, } from './schema.js';
+export { DIAGRAM_PAD, TONE_BORDER, toneBorder } from './tones.js';

package/dist/diagram/index.js

@@ -0,0 +1,9 @@
+/**
+ * `@texuli/blocks/diagram` — flow, sequence/org tree, board and terminal
+ * diagrams from validated data. Layout math is framework-free; Svelte
+ * renderers load through `loadDiagramFamily()`.
+ */
+export { DIAGRAM_BLOCK_TYPES, isDiagramFamilyBlock, isDiagramFamilyType, loadDiagramFamily, } from "./family.js";
+export { layoutBoard, layoutFlow, layoutTerminal, layoutTree, } from "./layout.js";
+export { DIAGRAM_LIMITS, diagramJsonPath, parseDiagram, } from "./schema.js";
+export { DIAGRAM_PAD, TONE_BORDER, toneBorder } from "./tones.js";

package/dist/diagram/layout.d.ts

@@ -0,0 +1,26 @@
+import type { BoardDiagram, FlowDiagram, TerminalDiagram, TreeDiagram } from './schema.js';
+export interface DiagramPosition {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    label: string;
+    tone?: string;
+    kind?: 'prompt' | 'output' | 'comment';
+}
+export interface DiagramEdge {
+    from: string;
+    to: string;
+    kind: 'flow' | 'parent' | 'loop-back';
+}
+export interface DiagramLayout {
+    width: number;
+    height: number;
+    positions: DiagramPosition[];
+    edges: DiagramEdge[];
+}
+export declare function layoutFlow(diagram: FlowDiagram): DiagramLayout;
+export declare function layoutTree(diagram: TreeDiagram): DiagramLayout;
+export declare function layoutBoard(diagram: BoardDiagram): DiagramLayout;
+export declare function layoutTerminal(diagram: TerminalDiagram): DiagramLayout;