@agent-native/core 0.37.3 → 0.39.0

package/dist/client/blocks/library/DataModelBlock.js

@@ -0,0 +1,222 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { IconArrowNarrowRight, IconChevronRight, IconDatabase, IconKey, IconLink, IconPlus, IconTrash, } from "@tabler/icons-react";
+import { cn } from "../../utils.js";
+import { DevInput } from "./dev-doc-ui.js";
+/**
+ * Read + Edit renderers for a `data-model` block — a dbdiagram / Prisma-style
+ * entity-relationship diagram. Lives in core so any app can register the dev-doc
+ * block (no shadcn import).
+ */
+/* ── Resolution helpers (shared by Read + relation inference) ──────────────── */
+/** Split a `fk` string like `"User.id"` into `{ entity: "User", field: "id" }`. */
+function parseFk(fk) {
+    const trimmed = fk.trim();
+    const dot = trimmed.indexOf(".");
+    if (dot === -1)
+        return { entity: trimmed };
+    return {
+        entity: trimmed.slice(0, dot).trim(),
+        field: trimmed.slice(dot + 1).trim() || undefined,
+    };
+}
+/**
+ * Resolve an entity reference (used by `fk` targets and `relation.from`/`to`)
+ * against the entity list by `id` first, then by case-insensitive `name`. Returns
+ * the matched entity or `undefined`.
+ */
+function resolveEntity(entities, ref) {
+    const needle = ref.trim();
+    return (entities.find((entity) => entity.id === needle) ??
+        entities.find((entity) => entity.name.toLowerCase() === needle.toLowerCase()));
+}
+/** A short, readable label for an entity reference (its name, or the raw ref). */
+function entityLabel(entities, ref) {
+    return resolveEntity(entities, ref)?.name ?? ref;
+}
+/** The cardinality glyph shown in the relations list (1:1 / 1:n / n:n). */
+function relationGlyph(kind) {
+    if (kind === "1-1")
+        return "1:1";
+    if (kind === "n-n")
+        return "n:n";
+    return "1:n";
+}
+/**
+ * Relations to render: explicit `relations` when present, otherwise inferred —
+ * every `fk` field becomes a `1-n` relation from the referenced (parent) entity
+ * to the entity holding the foreign key, so the connectors list is never empty
+ * when the schema clearly implies them.
+ */
+function effectiveRelations(data) {
+    if (data.relations && data.relations.length > 0)
+        return data.relations;
+    const inferred = [];
+    for (const entity of data.entities) {
+        for (const field of entity.fields) {
+            if (!field.fk)
+                continue;
+            const target = resolveEntity(data.entities, parseFk(field.fk).entity);
+            if (!target)
+                continue;
+            inferred.push({
+                from: target.id,
+                to: entity.id,
+                kind: "1-n",
+                label: field.name,
+            });
+        }
+    }
+    return inferred;
+}
+/* ── Read (interactive ERD) ────────────────────────────────────────────────── */
+/**
+ * Read-only renderer for a `data-model` block — a dbdiagram / Prisma-style
+ * entity-relationship diagram. Each entity is a collapsible card: the header
+ * shows the entity name + field count, and expanding it reveals a compact field
+ * table (Field · Type · flags) with PK / FK / nullable indicators.
+ *
+ * INTERACTIVITY (the reason this is a custom block, not a plain table): hovering
+ * or clicking a foreign-key field highlights the referenced entity card — it
+ * scrolls into view, expands, and gets a temporary accent ring — so a reader can
+ * trace a relationship across the whole model. Explicit `relations` (or relations
+ * inferred from `fk` fields) render as a labeled connector list below the cards.
+ *
+ * Every color is theme-aware via Tailwind `dark:` variants or plan CSS vars, so
+ * the diagram reads correctly in both the `.dark` plan theme and light mode.
+ */
+export function DataModelRead({ data, blockId, title, summary, }) {
+    const entities = data.entities ?? [];
+    const relations = useMemo(() => effectiveRelations(data), [data]);
+    // Per-entity collapse state. Default: the first entity expanded (or all of them
+    // when the model is small) so the block is useful at a glance without a click.
+    const [expanded, setExpanded] = useState(() => {
+        const initial = {};
+        const expandAll = entities.length <= 2;
+        entities.forEach((entity, index) => {
+            initial[entity.id] = expandAll || index === 0;
+        });
+        return initial;
+    });
+    // Which entity is being hovered/clicked-to via an FK — drives the accent ring.
+    const [highlighted, setHighlighted] = useState(null);
+    const cardRefs = useRef({});
+    const toggle = useCallback((id) => {
+        setExpanded((current) => ({ ...current, [id]: !current[id] }));
+    }, []);
+    // Highlight + reveal a referenced entity: expand it, ring it, and scroll it
+    // into view. Used on FK hover (transient) and click (scroll).
+    const focusEntity = useCallback((targetId, scroll) => {
+        if (!targetId) {
+            setHighlighted(null);
+            return;
+        }
+        setHighlighted(targetId);
+        if (scroll) {
+            setExpanded((current) => ({ ...current, [targetId]: true }));
+            cardRefs.current[targetId]?.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+            });
+        }
+    }, []);
+    return (_jsxs("section", { className: "plan-block", "data-block-id": blockId, children: [title && _jsx("div", { className: "plan-block-label", children: title }), _jsx("div", { className: "flex flex-col gap-3", children: entities.map((entity) => {
+                    const isOpen = expanded[entity.id] ?? false;
+                    const isHighlighted = highlighted === entity.id;
+                    return (_jsxs("div", { ref: (node) => {
+                            cardRefs.current[entity.id] = node;
+                        }, "data-entity-id": entity.id, className: cn("overflow-hidden rounded-xl border bg-plan-block transition-shadow", isHighlighted
+                            ? "border-blue-400 ring-2 ring-blue-400/60 dark:border-blue-400 dark:ring-blue-400/50"
+                            : "border-plan-line"), children: [_jsxs("button", { type: "button", "data-plan-interactive": true, "aria-expanded": isOpen, onClick: () => toggle(entity.id), className: "flex w-full items-center gap-2 px-4 py-2.5 text-left transition-colors hover:bg-accent/40", children: [_jsx(IconChevronRight, { className: cn("size-4 shrink-0 text-plan-muted transition-transform", isOpen && "rotate-90") }), _jsx(IconDatabase, { className: "size-4 shrink-0 text-blue-600 dark:text-blue-300" }), _jsx("span", { className: "min-w-0 truncate font-mono text-sm font-semibold text-plan-text", children: entity.name }), _jsxs("span", { className: "ml-auto shrink-0 rounded-full bg-accent/50 px-2 py-0.5 text-[11px] font-medium text-plan-muted", children: [entity.fields.length, " ", entity.fields.length === 1 ? "field" : "fields"] })] }), isOpen && (_jsxs("div", { className: "border-t border-plan-line", children: [entity.note && (_jsx("p", { className: "px-4 pt-2 text-xs italic text-plan-muted", children: entity.note })), _jsx("table", { className: "w-full border-collapse text-sm", children: _jsxs("tbody", { children: [entity.fields.map((field, index) => {
+                                                    const fkTarget = field.fk
+                                                        ? resolveEntity(entities, parseFk(field.fk).entity)
+                                                        : undefined;
+                                                    return (_jsxs("tr", { className: cn("border-t border-plan-line/70 align-top first:border-t-0", field.fk && "cursor-pointer hover:bg-blue-500/5"), 
+                                                        // FK interactivity: hovering rings the referenced
+                                                        // entity card; clicking also scrolls it into view.
+                                                        onMouseEnter: fkTarget
+                                                            ? () => focusEntity(fkTarget.id, false)
+                                                            : undefined, onMouseLeave: fkTarget
+                                                            ? () => focusEntity(undefined, false)
+                                                            : undefined, onClick: fkTarget
+                                                            ? () => focusEntity(fkTarget.id, true)
+                                                            : undefined, children: [_jsx("td", { className: "w-px whitespace-nowrap py-1.5 pl-4 pr-2", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [field.pk && (_jsx(IconKey, { className: "size-3.5 shrink-0 text-amber-500 dark:text-amber-300", "aria-label": "Primary key" })), field.fk && (_jsx(IconLink, { className: "size-3.5 shrink-0 text-blue-500 dark:text-blue-300", "aria-label": "Foreign key" })), _jsx("span", { className: cn("font-mono text-xs", field.pk
+                                                                                ? "font-semibold text-plan-text"
+                                                                                : "text-plan-text"), children: field.name })] }) }), _jsx("td", { className: "py-1.5 pr-2", children: field.type && (_jsx("span", { className: "inline-block rounded bg-accent/40 px-1.5 py-0.5 font-mono text-[11px] text-plan-muted", children: field.type })) }), _jsxs("td", { className: "py-1.5 pr-4 text-right", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-1", children: [field.pk && (_jsx("span", { className: "rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-600 dark:text-amber-300 bg-amber-100 dark:bg-amber-500/15", children: "PK" })), field.fk && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-semibold text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-500/15", children: ["FK", _jsx("span", { className: "font-mono font-normal opacity-90", children: fkTarget
+                                                                                            ? `${fkTarget.name}${parseFk(field.fk).field
+                                                                                                ? `.${parseFk(field.fk).field}`
+                                                                                                : ""}`
+                                                                                            : field.fk })] })), field.nullable && (_jsx("span", { className: "rounded px-1.5 py-0.5 text-[10px] font-medium text-plan-muted bg-accent/50", children: "nullable" })), field.default != null &&
+                                                                                field.default !== "" && (_jsxs("span", { className: "rounded px-1.5 py-0.5 font-mono text-[10px] text-plan-muted bg-accent/40", children: ["= ", field.default] }))] }), field.note && (_jsx("div", { className: "mt-0.5 text-[11px] italic text-plan-muted", children: field.note }))] })] }, `${field.name}-${index}`));
+                                                }), entity.fields.length === 0 && (_jsx("tr", { children: _jsx("td", { className: "px-4 py-2 text-xs text-plan-muted", children: "No fields yet." }) }))] }) })] }))] }, entity.id));
+                }) }), relations.length > 0 && (_jsxs("div", { className: "mt-4", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-plan-muted", children: "Relations" }), _jsx("div", { className: "mt-2 flex flex-col gap-1.5", children: relations.map((relation, index) => {
+                            const fromEntity = resolveEntity(entities, relation.from);
+                            const toEntity = resolveEntity(entities, relation.to);
+                            return (_jsxs("button", { type: "button", "data-plan-interactive": true, className: "group flex w-fit items-center gap-2 rounded-md px-2 py-1 text-sm transition-colors hover:bg-accent/40", onMouseEnter: () => focusEntity(toEntity?.id, false), onMouseLeave: () => focusEntity(undefined, false), onClick: () => focusEntity(toEntity?.id, true), children: [_jsx("span", { className: "font-mono text-xs font-semibold text-plan-text", children: entityLabel(entities, relation.from) }), _jsxs("span", { className: "flex items-center gap-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-[10px] font-bold text-blue-700 dark:bg-blue-500/15 dark:text-blue-300", children: [relationGlyph(relation.kind), _jsx(IconArrowNarrowRight, { className: "size-3" })] }), _jsx("span", { className: "font-mono text-xs font-semibold text-plan-text", children: entityLabel(entities, relation.to) }), relation.label && (_jsxs("span", { className: "text-xs text-plan-muted", children: ["\u00B7 ", relation.label] })), !fromEntity || !toEntity ? (_jsx("span", { className: "text-[10px] text-amber-600 dark:text-amber-300", children: "(unresolved)" })) : null] }, `${relation.from}-${relation.to}-${index}`));
+                        }) })] })), summary && _jsx("p", { className: "mt-5 text-plan-muted", children: summary })] }));
+}
+/* ── Edit (panel form) ─────────────────────────────────────────────────────── */
+let entitySeq = 0;
+/** Stable-enough new entity id for a freshly-added entity in the editor. */
+function newEntityId() {
+    entitySeq += 1;
+    return `e_${Date.now().toString(36)}_${entitySeq}`;
+}
+/**
+ * Panel editor for a `data-model` block. A structured form: a list of entities
+ * (add/remove), each with a name Input, an optional note, and repeatable field
+ * rows (add/remove) carrying name / type / PK checkbox / FK input / nullable
+ * checkbox. Relations are derived from `fk` in v1, so the form focuses on the
+ * entities + fields. Renders BARE content (no `<section>`); the registry's panel
+ * surface supplies the popover chrome.
+ */
+export function DataModelEdit({ data, onChange, editable, }) {
+    const entities = data.entities ?? [];
+    const patchEntities = (next) => onChange({ ...data, entities: next });
+    const updateEntity = (index, next) => patchEntities(entities.map((entity, i) => i === index ? { ...entity, ...next } : entity));
+    const removeEntity = (index) => patchEntities(entities.filter((_, i) => i !== index));
+    const addEntity = () => patchEntities([
+        ...entities,
+        {
+            id: newEntityId(),
+            name: "NewEntity",
+            fields: [{ name: "id", pk: true }],
+        },
+    ]);
+    const updateField = (entityIndex, fieldIndex, next) => {
+        const entity = entities[entityIndex];
+        if (!entity)
+            return;
+        updateEntity(entityIndex, {
+            fields: entity.fields.map((field, i) => i === fieldIndex ? { ...field, ...next } : field),
+        });
+    };
+    const removeField = (entityIndex, fieldIndex) => {
+        const entity = entities[entityIndex];
+        if (!entity)
+            return;
+        updateEntity(entityIndex, {
+            fields: entity.fields.filter((_, i) => i !== fieldIndex),
+        });
+    };
+    const addField = (entityIndex) => {
+        const entity = entities[entityIndex];
+        if (!entity)
+            return;
+        updateEntity(entityIndex, {
+            fields: [...entity.fields, { name: "field" }],
+        });
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-4", "data-plan-interactive": true, children: [entities.map((entity, entityIndex) => (_jsxs("div", { className: "flex flex-col gap-2 rounded-lg border border-input p-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(IconDatabase, { className: "size-4 shrink-0 text-muted-foreground" }), _jsx(DevInput, { className: "h-8 font-mono text-sm font-semibold", value: entity.name, disabled: !editable, placeholder: "EntityName", onChange: (event) => updateEntity(entityIndex, { name: event.target.value }) }), editable && (_jsx("button", { type: "button", "data-plan-interactive": true, "aria-label": "Remove entity", className: "flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/60 hover:text-foreground", onClick: () => removeEntity(entityIndex), children: _jsx(IconTrash, { className: "size-4" }) }))] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [entity.fields.map((field, fieldIndex) => (_jsxs("div", { className: "flex flex-col gap-1.5 rounded-md border border-input/60 bg-accent/20 p-2", children: [_jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] gap-1.5", children: [_jsx(DevInput, { className: "h-7 font-mono text-xs", value: field.name, disabled: !editable, placeholder: "name", onChange: (event) => updateField(entityIndex, fieldIndex, {
+                                                    name: event.target.value,
+                                                }) }), _jsx(DevInput, { className: "h-7 font-mono text-xs", value: field.type ?? "", disabled: !editable, placeholder: "type (e.g. uuid)", onChange: (event) => updateField(entityIndex, fieldIndex, {
+                                                    type: event.target.value || undefined,
+                                                }) }), editable && (_jsx("button", { type: "button", "data-plan-interactive": true, "aria-label": "Remove field", className: "flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/60 hover:text-foreground", onClick: () => removeField(entityIndex, fieldIndex), children: _jsx(IconTrash, { className: "size-3.5" }) }))] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs("label", { className: "flex items-center gap-1.5 whitespace-nowrap text-xs text-muted-foreground", children: [_jsx("input", { type: "checkbox", className: "size-3.5 cursor-pointer accent-primary", checked: Boolean(field.pk), disabled: !editable, onChange: (event) => updateField(entityIndex, fieldIndex, {
+                                                            pk: event.target.checked || undefined,
+                                                        }) }), "PK"] }), _jsxs("label", { className: "flex items-center gap-1.5 whitespace-nowrap text-xs text-muted-foreground", children: [_jsx("input", { type: "checkbox", className: "size-3.5 cursor-pointer accent-primary", checked: Boolean(field.nullable), disabled: !editable, onChange: (event) => updateField(entityIndex, fieldIndex, {
+                                                            nullable: event.target.checked || undefined,
+                                                        }) }), "Nullable"] }), _jsx(DevInput, { className: "h-7 flex-1 font-mono text-xs", value: field.fk ?? "", disabled: !editable, placeholder: "FK \u2192 Entity.field", onChange: (event) => updateField(entityIndex, fieldIndex, {
+                                                    fk: event.target.value || undefined,
+                                                }) })] })] }, fieldIndex))), editable && (_jsxs("button", { type: "button", "data-plan-interactive": true, className: "flex w-fit items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent/60 hover:text-foreground", onClick: () => addField(entityIndex), children: [_jsx(IconPlus, { className: "size-3.5" }), "Add field"] }))] })] }, entity.id))), editable && (_jsxs("button", { type: "button", "data-plan-interactive": true, className: "flex items-center justify-center gap-1.5 rounded-md border border-dashed border-input py-2 text-sm text-muted-foreground hover:bg-accent/40 hover:text-foreground", onClick: addEntity, children: [_jsx(IconPlus, { className: "size-4" }), "Add entity"] }))] }));
+}
+//# sourceMappingURL=DataModelBlock.js.map

package/dist/client/blocks/library/DataModelBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataModelBlock.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/DataModelBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useMemo, useRef, useState } from \"react\";\nimport {\n  IconArrowNarrowRight,\n  IconChevronRight,\n  IconDatabase,\n  IconKey,\n  IconLink,\n  IconPlus,\n  IconTrash,\n} from \"@tabler/icons-react\";\nimport { cn } from \"../../utils.js\";\nimport type { BlockEditProps, BlockReadProps } from \"../types.js\";\nimport type {\n  DataModelData,\n  DataModelEntity,\n  DataModelField,\n  DataModelRelation,\n  DataModelRelationKind,\n} from \"./data-model.config.js\";\nimport { DevInput } from \"./dev-doc-ui.js\";\n\n/**\n * Read + Edit renderers for a `data-model` block — a dbdiagram / Prisma-style\n * entity-relationship diagram. Lives in core so any app can register the dev-doc\n * block (no shadcn import).\n */\n\n/* ── Resolution helpers (shared by Read + relation inference) ──────────────── */\n\n/** Split a `fk` string like `\"User.id\"` into `{ entity: \"User\", field: \"id\" }`. */\nfunction parseFk(fk: string): { entity: string; field?: string } {\n  const trimmed = fk.trim();\n  const dot = trimmed.indexOf(\".\");\n  if (dot === -1) return { entity: trimmed };\n  return {\n    entity: trimmed.slice(0, dot).trim(),\n    field: trimmed.slice(dot + 1).trim() || undefined,\n  };\n}\n\n/**\n * Resolve an entity reference (used by `fk` targets and `relation.from`/`to`)\n * against the entity list by `id` first, then by case-insensitive `name`. Returns\n * the matched entity or `undefined`.\n */\nfunction resolveEntity(\n  entities: DataModelEntity[],\n  ref: string,\n): DataModelEntity | undefined {\n  const needle = ref.trim();\n  return (\n    entities.find((entity) => entity.id === needle) ??\n    entities.find(\n      (entity) => entity.name.toLowerCase() === needle.toLowerCase(),\n    )\n  );\n}\n\n/** A short, readable label for an entity reference (its name, or the raw ref). */\nfunction entityLabel(entities: DataModelEntity[], ref: string): string {\n  return resolveEntity(entities, ref)?.name ?? ref;\n}\n\n/** The cardinality glyph shown in the relations list (1:1 / 1:n / n:n). */\nfunction relationGlyph(kind?: DataModelRelationKind): string {\n  if (kind === \"1-1\") return \"1:1\";\n  if (kind === \"n-n\") return \"n:n\";\n  return \"1:n\";\n}\n\n/**\n * Relations to render: explicit `relations` when present, otherwise inferred —\n * every `fk` field becomes a `1-n` relation from the referenced (parent) entity\n * to the entity holding the foreign key, so the connectors list is never empty\n * when the schema clearly implies them.\n */\nfunction effectiveRelations(data: DataModelData): DataModelRelation[] {\n  if (data.relations && data.relations.length > 0) return data.relations;\n  const inferred: DataModelRelation[] = [];\n  for (const entity of data.entities) {\n    for (const field of entity.fields) {\n      if (!field.fk) continue;\n      const target = resolveEntity(data.entities, parseFk(field.fk).entity);\n      if (!target) continue;\n      inferred.push({\n        from: target.id,\n        to: entity.id,\n        kind: \"1-n\",\n        label: field.name,\n      });\n    }\n  }\n  return inferred;\n}\n\n/* ── Read (interactive ERD) ────────────────────────────────────────────────── */\n\n/**\n * Read-only renderer for a `data-model` block — a dbdiagram / Prisma-style\n * entity-relationship diagram. Each entity is a collapsible card: the header\n * shows the entity name + field count, and expanding it reveals a compact field\n * table (Field · Type · flags) with PK / FK / nullable indicators.\n *\n * INTERACTIVITY (the reason this is a custom block, not a plain table): hovering\n * or clicking a foreign-key field highlights the referenced entity card — it\n * scrolls into view, expands, and gets a temporary accent ring — so a reader can\n * trace a relationship across the whole model. Explicit `relations` (or relations\n * inferred from `fk` fields) render as a labeled connector list below the cards.\n *\n * Every color is theme-aware via Tailwind `dark:` variants or plan CSS vars, so\n * the diagram reads correctly in both the `.dark` plan theme and light mode.\n */\nexport function DataModelRead({\n  data,\n  blockId,\n  title,\n  summary,\n}: BlockReadProps<DataModelData>) {\n  const entities = data.entities ?? [];\n  const relations = useMemo(() => effectiveRelations(data), [data]);\n\n  // Per-entity collapse state. Default: the first entity expanded (or all of them\n  // when the model is small) so the block is useful at a glance without a click.\n  const [expanded, setExpanded] = useState<Record<string, boolean>>(() => {\n    const initial: Record<string, boolean> = {};\n    const expandAll = entities.length <= 2;\n    entities.forEach((entity, index) => {\n      initial[entity.id] = expandAll || index === 0;\n    });\n    return initial;\n  });\n\n  // Which entity is being hovered/clicked-to via an FK — drives the accent ring.\n  const [highlighted, setHighlighted] = useState<string | null>(null);\n  const cardRefs = useRef<Record<string, HTMLDivElement | null>>({});\n\n  const toggle = useCallback((id: string) => {\n    setExpanded((current) => ({ ...current, [id]: !current[id] }));\n  }, []);\n\n  // Highlight + reveal a referenced entity: expand it, ring it, and scroll it\n  // into view. Used on FK hover (transient) and click (scroll).\n  const focusEntity = useCallback(\n    (targetId: string | undefined, scroll: boolean) => {\n      if (!targetId) {\n        setHighlighted(null);\n        return;\n      }\n      setHighlighted(targetId);\n      if (scroll) {\n        setExpanded((current) => ({ ...current, [targetId]: true }));\n        cardRefs.current[targetId]?.scrollIntoView({\n          behavior: \"smooth\",\n          block: \"nearest\",\n        });\n      }\n    },\n    [],\n  );\n\n  return (\n    <section className=\"plan-block\" data-block-id={blockId}>\n      {title && <div className=\"plan-block-label\">{title}</div>}\n\n      <div className=\"flex flex-col gap-3\">\n        {entities.map((entity) => {\n          const isOpen = expanded[entity.id] ?? false;\n          const isHighlighted = highlighted === entity.id;\n          return (\n            <div\n              key={entity.id}\n              ref={(node) => {\n                cardRefs.current[entity.id] = node;\n              }}\n              data-entity-id={entity.id}\n              className={cn(\n                \"overflow-hidden rounded-xl border bg-plan-block transition-shadow\",\n                isHighlighted\n                  ? \"border-blue-400 ring-2 ring-blue-400/60 dark:border-blue-400 dark:ring-blue-400/50\"\n                  : \"border-plan-line\",\n              )}\n            >\n              {/* Entity header — always visible, toggles the field table. */}\n              <button\n                type=\"button\"\n                data-plan-interactive\n                aria-expanded={isOpen}\n                onClick={() => toggle(entity.id)}\n                className=\"flex w-full items-center gap-2 px-4 py-2.5 text-left transition-colors hover:bg-accent/40\"\n              >\n                <IconChevronRight\n                  className={cn(\n                    \"size-4 shrink-0 text-plan-muted transition-transform\",\n                    isOpen && \"rotate-90\",\n                  )}\n                />\n                <IconDatabase className=\"size-4 shrink-0 text-blue-600 dark:text-blue-300\" />\n                <span className=\"min-w-0 truncate font-mono text-sm font-semibold text-plan-text\">\n                  {entity.name}\n                </span>\n                <span className=\"ml-auto shrink-0 rounded-full bg-accent/50 px-2 py-0.5 text-[11px] font-medium text-plan-muted\">\n                  {entity.fields.length}{\" \"}\n                  {entity.fields.length === 1 ? \"field\" : \"fields\"}\n                </span>\n              </button>\n\n              {/* Expanded field table. */}\n              {isOpen && (\n                <div className=\"border-t border-plan-line\">\n                  {entity.note && (\n                    <p className=\"px-4 pt-2 text-xs italic text-plan-muted\">\n                      {entity.note}\n                    </p>\n                  )}\n                  <table className=\"w-full border-collapse text-sm\">\n                    <tbody>\n                      {entity.fields.map((field, index) => {\n                        const fkTarget = field.fk\n                          ? resolveEntity(entities, parseFk(field.fk).entity)\n                          : undefined;\n                        return (\n                          <tr\n                            key={`${field.name}-${index}`}\n                            className={cn(\n                              \"border-t border-plan-line/70 align-top first:border-t-0\",\n                              field.fk && \"cursor-pointer hover:bg-blue-500/5\",\n                            )}\n                            // FK interactivity: hovering rings the referenced\n                            // entity card; clicking also scrolls it into view.\n                            onMouseEnter={\n                              fkTarget\n                                ? () => focusEntity(fkTarget.id, false)\n                                : undefined\n                            }\n                            onMouseLeave={\n                              fkTarget\n                                ? () => focusEntity(undefined, false)\n                                : undefined\n                            }\n                            onClick={\n                              fkTarget\n                                ? () => focusEntity(fkTarget.id, true)\n                                : undefined\n                            }\n                          >\n                            <td className=\"w-px whitespace-nowrap py-1.5 pl-4 pr-2\">\n                              <div className=\"flex items-center gap-1.5\">\n                                {field.pk && (\n                                  <IconKey\n                                    className=\"size-3.5 shrink-0 text-amber-500 dark:text-amber-300\"\n                                    aria-label=\"Primary key\"\n                                  />\n                                )}\n                                {field.fk && (\n                                  <IconLink\n                                    className=\"size-3.5 shrink-0 text-blue-500 dark:text-blue-300\"\n                                    aria-label=\"Foreign key\"\n                                  />\n                                )}\n                                <span\n                                  className={cn(\n                                    \"font-mono text-xs\",\n                                    field.pk\n                                      ? \"font-semibold text-plan-text\"\n                                      : \"text-plan-text\",\n                                  )}\n                                >\n                                  {field.name}\n                                </span>\n                              </div>\n                            </td>\n                            <td className=\"py-1.5 pr-2\">\n                              {field.type && (\n                                <span className=\"inline-block rounded bg-accent/40 px-1.5 py-0.5 font-mono text-[11px] text-plan-muted\">\n                                  {field.type}\n                                </span>\n                              )}\n                            </td>\n                            <td className=\"py-1.5 pr-4 text-right\">\n                              <div className=\"flex flex-wrap items-center justify-end gap-1\">\n                                {field.pk && (\n                                  <span className=\"rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-600 dark:text-amber-300 bg-amber-100 dark:bg-amber-500/15\">\n                                    PK\n                                  </span>\n                                )}\n                                {field.fk && (\n                                  <span className=\"inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-semibold text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-500/15\">\n                                    FK\n                                    <span className=\"font-mono font-normal opacity-90\">\n                                      {fkTarget\n                                        ? `${fkTarget.name}${\n                                            parseFk(field.fk).field\n                                              ? `.${parseFk(field.fk).field}`\n                                              : \"\"\n                                          }`\n                                        : field.fk}\n                                    </span>\n                                  </span>\n                                )}\n                                {field.nullable && (\n                                  <span className=\"rounded px-1.5 py-0.5 text-[10px] font-medium text-plan-muted bg-accent/50\">\n                                    nullable\n                                  </span>\n                                )}\n                                {field.default != null &&\n                                  field.default !== \"\" && (\n                                    <span className=\"rounded px-1.5 py-0.5 font-mono text-[10px] text-plan-muted bg-accent/40\">\n                                      = {field.default}\n                                    </span>\n                                  )}\n                              </div>\n                              {field.note && (\n                                <div className=\"mt-0.5 text-[11px] italic text-plan-muted\">\n                                  {field.note}\n                                </div>\n                              )}\n                            </td>\n                          </tr>\n                        );\n                      })}\n                      {entity.fields.length === 0 && (\n                        <tr>\n                          <td className=\"px-4 py-2 text-xs text-plan-muted\">\n                            No fields yet.\n                          </td>\n                        </tr>\n                      )}\n                    </tbody>\n                  </table>\n                </div>\n              )}\n            </div>\n          );\n        })}\n      </div>\n\n      {/* Relations / connectors list. */}\n      {relations.length > 0 && (\n        <div className=\"mt-4\">\n          <div className=\"text-xs font-semibold uppercase tracking-wide text-plan-muted\">\n            Relations\n          </div>\n          <div className=\"mt-2 flex flex-col gap-1.5\">\n            {relations.map((relation, index) => {\n              const fromEntity = resolveEntity(entities, relation.from);\n              const toEntity = resolveEntity(entities, relation.to);\n              return (\n                <button\n                  key={`${relation.from}-${relation.to}-${index}`}\n                  type=\"button\"\n                  data-plan-interactive\n                  className=\"group flex w-fit items-center gap-2 rounded-md px-2 py-1 text-sm transition-colors hover:bg-accent/40\"\n                  onMouseEnter={() => focusEntity(toEntity?.id, false)}\n                  onMouseLeave={() => focusEntity(undefined, false)}\n                  onClick={() => focusEntity(toEntity?.id, true)}\n                >\n                  <span className=\"font-mono text-xs font-semibold text-plan-text\">\n                    {entityLabel(entities, relation.from)}\n                  </span>\n                  <span className=\"flex items-center gap-1 rounded bg-blue-100 px-1.5 py-0.5 font-mono text-[10px] font-bold text-blue-700 dark:bg-blue-500/15 dark:text-blue-300\">\n                    {relationGlyph(relation.kind)}\n                    <IconArrowNarrowRight className=\"size-3\" />\n                  </span>\n                  <span className=\"font-mono text-xs font-semibold text-plan-text\">\n                    {entityLabel(entities, relation.to)}\n                  </span>\n                  {relation.label && (\n                    <span className=\"text-xs text-plan-muted\">\n                      · {relation.label}\n                    </span>\n                  )}\n                  {!fromEntity || !toEntity ? (\n                    <span className=\"text-[10px] text-amber-600 dark:text-amber-300\">\n                      (unresolved)\n                    </span>\n                  ) : null}\n                </button>\n              );\n            })}\n          </div>\n        </div>\n      )}\n\n      {summary && <p className=\"mt-5 text-plan-muted\">{summary}</p>}\n    </section>\n  );\n}\n\n/* ── Edit (panel form) ─────────────────────────────────────────────────────── */\n\nlet entitySeq = 0;\n/** Stable-enough new entity id for a freshly-added entity in the editor. */\nfunction newEntityId(): string {\n  entitySeq += 1;\n  return `e_${Date.now().toString(36)}_${entitySeq}`;\n}\n\n/**\n * Panel editor for a `data-model` block. A structured form: a list of entities\n * (add/remove), each with a name Input, an optional note, and repeatable field\n * rows (add/remove) carrying name / type / PK checkbox / FK input / nullable\n * checkbox. Relations are derived from `fk` in v1, so the form focuses on the\n * entities + fields. Renders BARE content (no `<section>`); the registry's panel\n * surface supplies the popover chrome.\n */\nexport function DataModelEdit({\n  data,\n  onChange,\n  editable,\n}: BlockEditProps<DataModelData>) {\n  const entities = data.entities ?? [];\n\n  const patchEntities = (next: DataModelEntity[]) =>\n    onChange({ ...data, entities: next });\n\n  const updateEntity = (index: number, next: Partial<DataModelEntity>) =>\n    patchEntities(\n      entities.map((entity, i) =>\n        i === index ? { ...entity, ...next } : entity,\n      ),\n    );\n\n  const removeEntity = (index: number) =>\n    patchEntities(entities.filter((_, i) => i !== index));\n\n  const addEntity = () =>\n    patchEntities([\n      ...entities,\n      {\n        id: newEntityId(),\n        name: \"NewEntity\",\n        fields: [{ name: \"id\", pk: true }],\n      },\n    ]);\n\n  const updateField = (\n    entityIndex: number,\n    fieldIndex: number,\n    next: Partial<DataModelField>,\n  ) => {\n    const entity = entities[entityIndex];\n    if (!entity) return;\n    updateEntity(entityIndex, {\n      fields: entity.fields.map((field, i) =>\n        i === fieldIndex ? { ...field, ...next } : field,\n      ),\n    });\n  };\n\n  const removeField = (entityIndex: number, fieldIndex: number) => {\n    const entity = entities[entityIndex];\n    if (!entity) return;\n    updateEntity(entityIndex, {\n      fields: entity.fields.filter((_, i) => i !== fieldIndex),\n    });\n  };\n\n  const addField = (entityIndex: number) => {\n    const entity = entities[entityIndex];\n    if (!entity) return;\n    updateEntity(entityIndex, {\n      fields: [...entity.fields, { name: \"field\" }],\n    });\n  };\n\n  return (\n    <div className=\"flex flex-col gap-4\" data-plan-interactive>\n      {entities.map((entity, entityIndex) => (\n        <div\n          key={entity.id}\n          className=\"flex flex-col gap-2 rounded-lg border border-input p-3\"\n        >\n          <div className=\"flex items-center gap-2\">\n            <IconDatabase className=\"size-4 shrink-0 text-muted-foreground\" />\n            <DevInput\n              className=\"h-8 font-mono text-sm font-semibold\"\n              value={entity.name}\n              disabled={!editable}\n              placeholder=\"EntityName\"\n              onChange={(event) =>\n                updateEntity(entityIndex, { name: event.target.value })\n              }\n            />\n            {editable && (\n              <button\n                type=\"button\"\n                data-plan-interactive\n                aria-label=\"Remove entity\"\n                className=\"flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/60 hover:text-foreground\"\n                onClick={() => removeEntity(entityIndex)}\n              >\n                <IconTrash className=\"size-4\" />\n              </button>\n            )}\n          </div>\n\n          {/* Field rows. */}\n          <div className=\"flex flex-col gap-1.5\">\n            {entity.fields.map((field, fieldIndex) => (\n              <div\n                key={fieldIndex}\n                className=\"flex flex-col gap-1.5 rounded-md border border-input/60 bg-accent/20 p-2\"\n              >\n                <div className=\"grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] gap-1.5\">\n                  <DevInput\n                    className=\"h-7 font-mono text-xs\"\n                    value={field.name}\n                    disabled={!editable}\n                    placeholder=\"name\"\n                    onChange={(event) =>\n                      updateField(entityIndex, fieldIndex, {\n                        name: event.target.value,\n                      })\n                    }\n                  />\n                  <DevInput\n                    className=\"h-7 font-mono text-xs\"\n                    value={field.type ?? \"\"}\n                    disabled={!editable}\n                    placeholder=\"type (e.g. uuid)\"\n                    onChange={(event) =>\n                      updateField(entityIndex, fieldIndex, {\n                        type: event.target.value || undefined,\n                      })\n                    }\n                  />\n                  {editable && (\n                    <button\n                      type=\"button\"\n                      data-plan-interactive\n                      aria-label=\"Remove field\"\n                      className=\"flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/60 hover:text-foreground\"\n                      onClick={() => removeField(entityIndex, fieldIndex)}\n                    >\n                      <IconTrash className=\"size-3.5\" />\n                    </button>\n                  )}\n                </div>\n                <div className=\"flex flex-wrap items-center gap-3\">\n                  <label className=\"flex items-center gap-1.5 whitespace-nowrap text-xs text-muted-foreground\">\n                    <input\n                      type=\"checkbox\"\n                      className=\"size-3.5 cursor-pointer accent-primary\"\n                      checked={Boolean(field.pk)}\n                      disabled={!editable}\n                      onChange={(event) =>\n                        updateField(entityIndex, fieldIndex, {\n                          pk: event.target.checked || undefined,\n                        })\n                      }\n                    />\n                    PK\n                  </label>\n                  <label className=\"flex items-center gap-1.5 whitespace-nowrap text-xs text-muted-foreground\">\n                    <input\n                      type=\"checkbox\"\n                      className=\"size-3.5 cursor-pointer accent-primary\"\n                      checked={Boolean(field.nullable)}\n                      disabled={!editable}\n                      onChange={(event) =>\n                        updateField(entityIndex, fieldIndex, {\n                          nullable: event.target.checked || undefined,\n                        })\n                      }\n                    />\n                    Nullable\n                  </label>\n                  <DevInput\n                    className=\"h-7 flex-1 font-mono text-xs\"\n                    value={field.fk ?? \"\"}\n                    disabled={!editable}\n                    placeholder=\"FK → Entity.field\"\n                    onChange={(event) =>\n                      updateField(entityIndex, fieldIndex, {\n                        fk: event.target.value || undefined,\n                      })\n                    }\n                  />\n                </div>\n              </div>\n            ))}\n            {editable && (\n              <button\n                type=\"button\"\n                data-plan-interactive\n                className=\"flex w-fit items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent/60 hover:text-foreground\"\n                onClick={() => addField(entityIndex)}\n              >\n                <IconPlus className=\"size-3.5\" />\n                Add field\n              </button>\n            )}\n          </div>\n        </div>\n      ))}\n\n      {editable && (\n        <button\n          type=\"button\"\n          data-plan-interactive\n          className=\"flex items-center justify-center gap-1.5 rounded-md border border-dashed border-input py-2 text-sm text-muted-foreground hover:bg-accent/40 hover:text-foreground\"\n          onClick={addEntity}\n        >\n          <IconPlus className=\"size-4\" />\n          Add entity\n        </button>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/client/blocks/library/DiffBlock.d.ts

@@ -0,0 +1,6 @@
+import type { BlockEditProps, BlockReadProps } from "../types.js";
+import type { DiffData } from "./diff.config.js";
+declare function DiffRead({ data, blockId, title, summary }: BlockReadProps<DiffData>): import("react/jsx-runtime").JSX.Element;
+declare function DiffEdit({ data, onChange, editable }: BlockEditProps<DiffData>): import("react/jsx-runtime").JSX.Element;
+export { DiffRead, DiffEdit };
+//# sourceMappingURL=DiffBlock.d.ts.map

package/dist/client/blocks/library/DiffBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiffBlock.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/DiffBlock.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,KAAK,EAAE,QAAQ,EAAY,MAAM,kBAAkB,CAAC;AAsP3D,iBAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,2CA4E5E;AA6ND,iBAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,2CA+EvE;AAED,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC"}

package/dist/client/blocks/library/DiffBlock.js

@@ -0,0 +1,293 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { IconColumns, IconDotsVertical, IconFileDiff, IconList, } from "@tabler/icons-react";
+import { cn } from "../../utils.js";
+import { DevInput, DevLabel, DevTextarea, DevSelect } from "./dev-doc-ui.js";
+/**
+ * Split text into lines, each KEEPING its trailing newline (so the change
+ * `value`s concatenate back to the original and `splitLines` below behaves the
+ * same as it did against jsdiff output).
+ */
+function toLineTokens(text) {
+    if (text === "")
+        return [];
+    const out = [];
+    let start = 0;
+    for (let i = 0; i < text.length; i += 1) {
+        if (text[i] === "\n") {
+            out.push(text.slice(start, i + 1));
+            start = i + 1;
+        }
+    }
+    if (start < text.length)
+        out.push(text.slice(start));
+    return out;
+}
+/**
+ * A minimal line-level diff producing jsdiff-compatible `Change[]` records
+ * (`{ value }` for context, `{ value, added: true }`, `{ value, removed: true }`).
+ * Uses a classic LCS table over line tokens; the inputs here are short code
+ * snippets so the O(n·m) table is fine. Removed lines are emitted before added
+ * lines within a change region, matching jsdiff's ordering.
+ */
+function diffLines(before, after) {
+    const a = toLineTokens(before);
+    const b = toLineTokens(after);
+    const n = a.length;
+    const m = b.length;
+    // LCS length table.
+    const lcs = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
+    for (let i = n - 1; i >= 0; i -= 1) {
+        for (let j = m - 1; j >= 0; j -= 1) {
+            lcs[i][j] =
+                a[i] === b[j]
+                    ? lcs[i + 1][j + 1] + 1
+                    : Math.max(lcs[i + 1][j], lcs[i][j + 1]);
+        }
+    }
+    const changes = [];
+    // Push a token onto the last change if same kind, else open a new change.
+    const push = (value, kind) => {
+        const last = changes[changes.length - 1];
+        const sameKind = last &&
+            Boolean(last.added) === (kind === "added") &&
+            Boolean(last.removed) === (kind === "removed");
+        if (sameKind) {
+            last.value += value;
+        }
+        else {
+            changes.push({
+                value,
+                added: kind === "added" ? true : undefined,
+                removed: kind === "removed" ? true : undefined,
+            });
+        }
+    };
+    let i = 0;
+    let j = 0;
+    while (i < n && j < m) {
+        if (a[i] === b[j]) {
+            push(a[i], "context");
+            i += 1;
+            j += 1;
+        }
+        else if (lcs[i + 1][j] >= lcs[i][j + 1]) {
+            push(a[i], "removed");
+            i += 1;
+        }
+        else {
+            push(b[j], "added");
+            j += 1;
+        }
+    }
+    while (i < n) {
+        push(a[i], "removed");
+        i += 1;
+    }
+    while (j < m) {
+        push(b[j], "added");
+        j += 1;
+    }
+    return changes;
+}
+/** Number of context lines above which an unchanged run is collapsed. */
+const COLLAPSE_THRESHOLD = 6;
+/** Context lines kept visible at each edge of a collapsed run. */
+const CONTEXT_EDGE = 3;
+/**
+ * Split a change `value` into individual lines. Most hunks carry a trailing
+ * newline; drop the empty final element it produces so a 2-line change does not
+ * render a phantom 3rd blank line.
+ */
+function splitLines(value) {
+    const lines = value.split("\n");
+    if (lines.length > 0 && lines[lines.length - 1] === "")
+        lines.pop();
+    return lines;
+}
+/** Flatten change objects into numbered diff rows. */
+function buildRows(changes) {
+    const rows = [];
+    let oldNo = 0;
+    let newNo = 0;
+    for (const change of changes) {
+        const lines = splitLines(change.value);
+        for (const text of lines) {
+            if (change.added) {
+                newNo += 1;
+                rows.push({ kind: "added", newNo, text });
+            }
+            else if (change.removed) {
+                oldNo += 1;
+                rows.push({ kind: "removed", oldNo, text });
+            }
+            else {
+                oldNo += 1;
+                newNo += 1;
+                rows.push({ kind: "context", oldNo, newNo, text });
+            }
+        }
+    }
+    return rows;
+}
+/**
+ * Group rows into segments, collapsing interior runs of >COLLAPSE_THRESHOLD
+ * context rows (keeping CONTEXT_EDGE visible at each side). Leading/trailing runs
+ * collapse too, but keep only the inner edge visible.
+ */
+function segmentRows(rows) {
+    const segments = [];
+    let i = 0;
+    while (i < rows.length) {
+        if (rows[i].kind !== "context") {
+            segments.push(rows[i]);
+            i += 1;
+            continue;
+        }
+        // Gather the full contiguous context run.
+        let j = i;
+        while (j < rows.length && rows[j].kind === "context")
+            j += 1;
+        const run = rows.slice(i, j);
+        if (run.length <= COLLAPSE_THRESHOLD) {
+            for (const row of run)
+                segments.push(row);
+        }
+        else {
+            const atStart = i === 0;
+            const atEnd = j === rows.length;
+            const head = atStart ? [] : run.slice(0, CONTEXT_EDGE);
+            const tail = atEnd ? [] : run.slice(run.length - CONTEXT_EDGE);
+            const hidden = run.slice(head.length, run.length - tail.length);
+            for (const row of head)
+                segments.push(row);
+            if (hidden.length > 0)
+                segments.push({ collapsed: true, rows: hidden });
+            for (const row of tail)
+                segments.push(row);
+        }
+        i = j;
+    }
+    return segments;
+}
+/* ── Theme-aware row styling (light + dark) ────────────────────────────────── */
+const ROW_BG = {
+    added: "bg-emerald-500/10 dark:bg-emerald-400/15",
+    removed: "bg-rose-500/10 dark:bg-rose-400/15",
+    context: "",
+};
+const GUTTER_BG = {
+    added: "bg-emerald-500/15 dark:bg-emerald-400/20",
+    removed: "bg-rose-500/15 dark:bg-rose-400/20",
+    context: "bg-transparent",
+};
+const SIGN_COLOR = {
+    added: "text-emerald-700 dark:text-emerald-300",
+    removed: "text-rose-700 dark:text-rose-300",
+    context: "text-plan-muted",
+};
+const SIGN = {
+    added: "+",
+    removed: "−",
+    context: " ",
+};
+const LINE_NO_CLASS = "select-none px-2 text-right font-mono text-[11px] leading-5 text-plan-muted/70 tabular-nums";
+/* ── Read ──────────────────────────────────────────────────────────────────── */
+function DiffRead({ data, blockId, title, summary }) {
+    const [mode, setMode] = useState(data.mode ?? "unified");
+    const [expanded, setExpanded] = useState(() => new Set());
+    const rows = useMemo(() => buildRows(diffLines(data.before, data.after)), [data.before, data.after]);
+    const added = rows.filter((r) => r.kind === "added").length;
+    const removed = rows.filter((r) => r.kind === "removed").length;
+    const unchanged = data.before === data.after;
+    const toggleRun = (index) => setExpanded((prev) => {
+        const next = new Set(prev);
+        if (next.has(index))
+            next.delete(index);
+        else
+            next.add(index);
+        return next;
+    });
+    return (_jsxs("section", { className: "plan-block", "data-block-id": blockId, children: [title && _jsx("div", { className: "plan-block-label", children: title }), _jsxs("div", { className: "overflow-hidden rounded-lg border border-plan-line bg-plan-code", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-plan-line bg-plan-block px-3 py-2", children: [_jsx(IconFileDiff, { className: "size-4 shrink-0 text-plan-muted" }), _jsx("span", { className: "min-w-0 truncate font-mono text-sm font-medium text-plan-text", children: data.filename || "diff" }), data.language && (_jsx("span", { className: "shrink-0 rounded border border-plan-line px-1.5 py-0.5 font-mono text-[11px] uppercase tracking-wide text-plan-muted", children: data.language })), _jsxs("span", { className: "ml-1 flex shrink-0 items-center gap-2 font-mono text-xs", children: [_jsxs("span", { className: "text-emerald-700 dark:text-emerald-300", children: ["+", added] }), _jsxs("span", { className: "text-rose-700 dark:text-rose-300", children: ["\u2212", removed] })] }), _jsxs("div", { className: "ml-auto flex shrink-0 items-center overflow-hidden rounded-md border border-plan-line", children: [_jsx(ModeButton, { active: mode === "unified", onClick: () => setMode("unified"), icon: _jsx(IconList, { className: "size-3.5" }), label: "Unified" }), _jsx(ModeButton, { active: mode === "split", onClick: () => setMode("split"), icon: _jsx(IconColumns, { className: "size-3.5" }), label: "Split" })] })] }), unchanged ? (_jsx("div", { className: "px-4 py-6 text-center font-mono text-sm text-plan-muted", children: "No changes" })) : mode === "split" ? (_jsx(SplitView, { rows: rows })) : (_jsx(UnifiedView, { rows: rows, expanded: expanded, onToggleRun: toggleRun }))] }), summary && _jsx("p", { className: "mt-5 text-plan-muted", children: summary })] }));
+}
+function ModeButton({ active, onClick, icon, label, }) {
+    return (_jsxs("button", { type: "button", "data-plan-interactive": true, onClick: onClick, "aria-pressed": active, className: cn("flex cursor-pointer items-center gap-1 px-2 py-1 text-xs font-medium transition-colors", active
+            ? "bg-plan-code text-plan-text"
+            : "text-plan-muted hover:bg-plan-code/60 hover:text-plan-text"), children: [icon, label] }));
+}
+/* ── Unified view ──────────────────────────────────────────────────────────── */
+function UnifiedView({ rows, expanded, onToggleRun, }) {
+    const segments = useMemo(() => segmentRows(rows), [rows]);
+    let runIndex = 0;
+    return (_jsx("div", { className: "overflow-x-auto", children: _jsx("div", { className: "min-w-full font-mono text-[13px] leading-5", children: segments.map((segment, idx) => {
+                if ("collapsed" in segment) {
+                    const key = runIndex++;
+                    const open = expanded.has(key);
+                    return (_jsxs("div", { children: [_jsx(CollapsedRow, { count: segment.rows.length, open: open, onClick: () => onToggleRun(key) }), open &&
+                                segment.rows.map((row, ri) => (_jsx(UnifiedRow, { row: row }, `run-${key}-${ri}`)))] }, `run-${key}`));
+                }
+                return _jsx(UnifiedRow, { row: segment }, idx);
+            }) }) }));
+}
+function UnifiedRow({ row }) {
+    return (_jsxs("div", { className: cn("flex w-full", ROW_BG[row.kind]), children: [_jsx("span", { className: cn(LINE_NO_CLASS, "w-10"), children: row.oldNo ?? "" }), _jsx("span", { className: cn(LINE_NO_CLASS, "w-10"), children: row.newNo ?? "" }), _jsx("span", { className: cn("w-6 shrink-0 select-none text-center font-semibold", GUTTER_BG[row.kind], SIGN_COLOR[row.kind]), children: SIGN[row.kind] }), _jsx("pre", { className: "m-0 flex-1 overflow-visible whitespace-pre px-2 text-plan-text", children: row.text || " " })] }));
+}
+function CollapsedRow({ count, open, onClick, }) {
+    return (_jsxs("button", { type: "button", "data-plan-interactive": true, onClick: onClick, className: "flex w-full cursor-pointer items-center gap-2 border-y border-plan-line/60 bg-plan-block/50 px-3 py-1 text-left text-xs text-plan-muted transition-colors hover:bg-plan-block", children: [_jsx(IconDotsVertical, { className: "size-3.5 shrink-0" }), _jsxs("span", { children: [open ? "Hide" : "Show", " ", count, " unchanged line", count === 1 ? "" : "s"] })] }));
+}
+/**
+ * Pair removed lines (left) with added lines (right) so a modification shows the
+ * old and new side by side; context lines mirror on both columns. Leftover adds
+ * or removes fall through as half-empty rows (GitHub split behavior).
+ */
+function pairSplitRows(rows) {
+    const out = [];
+    let i = 0;
+    while (i < rows.length) {
+        const row = rows[i];
+        if (row.kind === "context") {
+            out.push({ left: row, right: row });
+            i += 1;
+            continue;
+        }
+        // Collect a contiguous block of removed-then-added rows.
+        const removed = [];
+        const added = [];
+        while (i < rows.length && rows[i].kind === "removed")
+            removed.push(rows[i++]);
+        while (i < rows.length && rows[i].kind === "added")
+            added.push(rows[i++]);
+        const max = Math.max(removed.length, added.length);
+        for (let k = 0; k < max; k += 1) {
+            out.push({ left: removed[k], right: added[k] });
+        }
+    }
+    return out;
+}
+function SplitView({ rows }) {
+    const pairs = useMemo(() => pairSplitRows(rows), [rows]);
+    return (_jsx("div", { className: "overflow-x-auto", children: _jsx("div", { className: "grid min-w-full grid-cols-2 font-mono text-[13px] leading-5", children: pairs.map((pair, idx) => (_jsx(SplitRowView, { pair: pair }, idx))) }) }));
+}
+function SplitRowView({ pair }) {
+    return (_jsxs(_Fragment, { children: [_jsx(SplitCell, { row: pair.left, side: "old" }), _jsx(SplitCell, { row: pair.right, side: "new" })] }));
+}
+function SplitCell({ row, side }) {
+    if (!row) {
+        return (_jsx("div", { className: cn("min-h-5 bg-plan-block/40", side === "old" && "border-r border-plan-line") }));
+    }
+    const sign = side === "old" ? "−" : "+";
+    const showSign = row.kind !== "context";
+    return (_jsxs("div", { className: cn("flex", ROW_BG[row.kind], side === "old" && "border-r border-plan-line"), children: [_jsx("span", { className: cn(LINE_NO_CLASS, "w-10"), children: side === "old" ? (row.oldNo ?? "") : (row.newNo ?? "") }), _jsx("span", { className: cn("w-5 shrink-0 select-none text-center font-semibold", GUTTER_BG[row.kind], SIGN_COLOR[row.kind]), children: showSign ? sign : " " }), _jsx("pre", { className: "m-0 flex-1 overflow-visible whitespace-pre px-2 text-plan-text", children: row.text || " " })] }));
+}
+/* ── Edit (panel) ──────────────────────────────────────────────────────────── */
+const codeAreaClass = "min-h-[140px] font-mono text-xs leading-5";
+function DiffEdit({ data, onChange, editable }) {
+    const patch = (next) => onChange({ ...data, ...next });
+    const mode = data.mode ?? "unified";
+    return (_jsxs("div", { className: "flex flex-col gap-3", "data-plan-interactive": true, children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DevLabel, { htmlFor: "diff-filename", className: "text-xs", children: "Filename" }), _jsx(DevInput, { id: "diff-filename", value: data.filename ?? "", placeholder: "src/add.ts", disabled: !editable, onChange: (event) => patch({ filename: event.target.value || undefined }) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DevLabel, { htmlFor: "diff-language", className: "text-xs", children: "Language" }), _jsx(DevInput, { id: "diff-language", value: data.language ?? "", placeholder: "ts", disabled: !editable, onChange: (event) => patch({ language: event.target.value || undefined }) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DevLabel, { className: "text-xs", children: "Layout" }), _jsx(DevSelect, { value: mode, disabled: !editable, onValueChange: (value) => patch({ mode: value }), options: [
+                            { value: "unified", label: "Unified" },
+                            { value: "split", label: "Split (side-by-side)" },
+                        ] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DevLabel, { htmlFor: "diff-before", className: "text-xs", children: "Before" }), _jsx(DevTextarea, { id: "diff-before", spellCheck: false, className: codeAreaClass, value: data.before, disabled: !editable, onChange: (event) => patch({ before: event.target.value }) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DevLabel, { htmlFor: "diff-after", className: "text-xs", children: "After" }), _jsx(DevTextarea, { id: "diff-after", spellCheck: false, className: codeAreaClass, value: data.after, disabled: !editable, onChange: (event) => patch({ after: event.target.value }) })] })] }));
+}
+export { DiffRead, DiffEdit };
+//# sourceMappingURL=DiffBlock.js.map