@pilotiq/tiptap 3.11.0 → 3.13.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @pilotiq/tiptap
 
+## 3.13.0
+
+### Minor Changes
+
+- ded54a8: Ship five built-in **inline content blocks** in every `RichTextField` (free + pro): **FAQ**, **Alert** (info/warning/success/tip), **Summary**, **Key takeaways**, and **Pros & cons**.
+
+  They are **inline editable nodes** — a small label on top, content typed straight into the block in place (no card, no popup, no border/background). Inserted from the slash menu's **Content** group. Each renders read-side to semantic `pilotiq-*` HTML via `renderRichTextToHtml` (consumer owns the CSS). Quote and Table remain the native `blockquote` / table extensions.
+
+  - Nodes live in `extensions/contentBlocks.ts`; registered by default in the editor.
+  - Alert's type is the label (Info/Warning/Success/Tip), chosen from the slash menu.
+  - Pros & cons is two labelled list columns.
+
+  The `Block.make().schema([...])` API (card + side-panel form) stays for **custom** blocks via `RichTextField.blocks([...])`, but no schema block ships as a default. `Block.toMeta()` / `RichTextField.toMeta()` are now `async` so option-fields (Select/Radio/ToggleButtons) resolve correctly inside custom schema blocks.
+
+## 3.12.0
+
+### Minor Changes
+
+- 7252aaa: GitHub-style line-mode rendering for the AI inline diff. `startAiInlineDiff` / `applySurgicalAiInlineDiff` accept an optional `displayMode: 'inline' | 'lines'` — in `'lines'` mode every block touched by an insert renders as a full-width green row (`+` gutter) and deleted content renders as stacked red rows (`−` gutter) above the change, instead of the inline word-flow. `useAiInlineDiff` gained `resolveDisplayMode`, and all three editor surfaces (rich text, markdown, collab text) resolve it from a `data-ai-diff-view` wrapper marker — stamped by `@pilotiq-pro/ai`'s `Field.aiDiffView('lines')` setter. Default stays `'inline'`.
+
 ## 3.11.0
 
 ### Minor Changes

package/dist/Block.d.ts

@@ -41,7 +41,13 @@ export declare class Block {
     getLabel(): string;
     getIcon(): string | undefined;
     getSchema(): readonly Field[];
-    /** @internal */
-    toMeta(): BlockMeta;
+    /**
+     * @internal
+     * Async because schema fields can be async — `SelectField` / `RadioField` /
+     * `ToggleButtonsField` resolve their options at meta-build time and return a
+     * `Promise<FieldMeta>`. We await every field so the serialized schema never
+     * contains an unresolved Promise (which would JSON-stringify to `{}`).
+     */
+    toMeta(): Promise<BlockMeta>;
 }
 //# sourceMappingURL=Block.d.ts.map

package/dist/Block.js

@@ -43,13 +43,19 @@ export class Block {
     getLabel() { return this._label ?? this._name; }
     getIcon() { return this._icon; }
     getSchema() { return this._schema; }
-    /** @internal */
-    toMeta() {
+    /**
+     * @internal
+     * Async because schema fields can be async — `SelectField` / `RadioField` /
+     * `ToggleButtonsField` resolve their options at meta-build time and return a
+     * `Promise<FieldMeta>`. We await every field so the serialized schema never
+     * contains an unresolved Promise (which would JSON-stringify to `{}`).
+     */
+    async toMeta() {
         return {
             name: this._name,
             label: this._label ?? this._name,
             icon: this._icon,
-            schema: this._schema.map((f) => f.toMeta()),
+            schema: (await Promise.all(this._schema.map((f) => f.toMeta()))),
         };
     }
 }

package/dist/RichTextField.d.ts

@@ -107,6 +107,7 @@ export interface RichTextFieldMeta extends FieldMeta {
  */
 export declare class RichTextField extends Field {
     private _blocks;
+    private _includeDefaultBlocks;
     private _slashCommand;
     /** `undefined` = use default, `null` = hidden, array = explicit override. */
     private _toolbarOverride;
@@ -127,8 +128,22 @@ export declare class RichTextField extends Field {
     private _mentionsUrl?;
     private constructor();
     static make(name: string): RichTextField;
-    /** Custom blocks available via the slash menu. */
+    /** Custom blocks available via the slash menu (merged on top of the defaults). */
     blocks(blocks: Block[]): this;
+    /**
+     * Toggle the built-in default blocks (FAQ, Alert, Summary, Key takeaways,
+     * Pros & cons) for this field. On by default — every field gets them in the
+     * slash menu and the agent block catalog. Pass `false` to ship only the
+     * blocks declared via `.blocks([...])`.
+     */
+    withDefaultBlocks(enabled?: boolean): this;
+    /**
+     * The blocks this field actually exposes — the default set (unless opted
+     * out) merged with the field's own `.blocks([...])`. A field block with the
+     * same name overrides the default. This is what the editor slash menu, the
+     * side panel, and the agent block catalog all consume.
+     */
+    private resolveBlocks;
     /** Toggle the slash menu (`/`) on/off. Defaults to `true`. */
     slashCommand(enabled: boolean): this;
     /**
@@ -281,6 +296,6 @@ export declare class RichTextField extends Field {
      */
     getToolbarGroups(): ToolbarGroups | null;
     isFloatingToolbarEnabled(): boolean;
-    toMeta(ctx?: RenderContext): RichTextFieldMeta;
+    toMeta(ctx?: RenderContext): Promise<RichTextFieldMeta>;
 }
 //# sourceMappingURL=RichTextField.d.ts.map

package/dist/RichTextField.js

@@ -1,4 +1,5 @@
 import { Field } from '@pilotiq/pilotiq';
+import { defaultBlocks } from './blocks/index.js';
 /** Default top-level toolbar groups — mirrors the reference admin's layout. */
 export const DEFAULT_TOOLBAR_GROUPS = [
     ['bold', 'italic', 'underline', 'strike', 'subscript', 'superscript', 'link'],
@@ -59,6 +60,7 @@ export const DEFAULT_HIGHLIGHT_COLORS = [
  */
 export class RichTextField extends Field {
     _blocks = [];
+    _includeDefaultBlocks = true;
     _slashCommand = true;
     /** `undefined` = use default, `null` = hidden, array = explicit override. */
     _toolbarOverride = undefined;
@@ -83,11 +85,37 @@ export class RichTextField extends Field {
     static make(name) {
         return new RichTextField(name);
     }
-    /** Custom blocks available via the slash menu. */
+    /** Custom blocks available via the slash menu (merged on top of the defaults). */
     blocks(blocks) {
         this._blocks = blocks;
         return this;
     }
+    /**
+     * Toggle the built-in default blocks (FAQ, Alert, Summary, Key takeaways,
+     * Pros & cons) for this field. On by default — every field gets them in the
+     * slash menu and the agent block catalog. Pass `false` to ship only the
+     * blocks declared via `.blocks([...])`.
+     */
+    withDefaultBlocks(enabled = true) {
+        this._includeDefaultBlocks = enabled;
+        return this;
+    }
+    /**
+     * The blocks this field actually exposes — the default set (unless opted
+     * out) merged with the field's own `.blocks([...])`. A field block with the
+     * same name overrides the default. This is what the editor slash menu, the
+     * side panel, and the agent block catalog all consume.
+     */
+    resolveBlocks() {
+        const byName = new Map();
+        if (this._includeDefaultBlocks) {
+            for (const b of defaultBlocks)
+                byName.set(b.getName(), b);
+        }
+        for (const b of this._blocks)
+            byName.set(b.getName(), b);
+        return [...byName.values()];
+    }
     /** Toggle the slash menu (`/`) on/off. Defaults to `true`. */
     slashCommand(enabled) {
         this._slashCommand = enabled;
@@ -256,7 +284,7 @@ export class RichTextField extends Field {
         this._mentions = providers;
         return this;
     }
-    getBlocks() { return this._blocks; }
+    getBlocks() { return this.resolveBlocks(); }
     getMergeTags() { return this._mergeTags; }
     getMentionProviders() { return this._mentions; }
     /**
@@ -326,10 +354,13 @@ export class RichTextField extends Field {
     isFloatingToolbarEnabled() {
         return this._floatingToolbar;
     }
-    toMeta(ctx) {
-        // RichTextField has no async resolvers, so the parent always returns
-        // the sync FieldMeta branch — cast away the union for the spread.
-        const base = super.toMeta(ctx);
+    async toMeta(ctx) {
+        // Block fields can be async — Select / Radio / ToggleButtons resolve their
+        // options at meta-build time and return `Promise<FieldMeta>`. So block
+        // metas, and therefore this method, are async. The core resolves every
+        // field via `await field.toMeta(ctx)` (`resolveField`), so returning a
+        // Promise is the supported path.
+        const base = (await Promise.resolve(super.toMeta(ctx)));
         // Strip `attachFiles` server-side when the panel hasn't registered an
         // upload adapter — same posture as `MarkdownField` and the editor
         // chrome stays clean. `uploadUrl` is the wire-side URL for the picker
@@ -342,7 +373,7 @@ export class RichTextField extends Field {
                 .filter(g => g.length > 0) ?? null;
         return {
             ...base,
-            blocks: this._blocks.map((b) => b.toMeta()),
+            blocks: await Promise.all(this.resolveBlocks().map((b) => b.toMeta())),
             slashCommand: this._slashCommand,
             toolbarGroups: filteredGroups,
             floatingToolbar: this._floatingToolbar,

package/dist/blocks/alert.d.ts

@@ -0,0 +1,10 @@
+import { Block } from '../Block.js';
+/**
+ * Default **Alert** (callout) block — a typed notice.
+ *
+ * Wire shape: `{ type: 'info' | 'warning' | 'success' | 'tip'; content: string }`.
+ * Renders read-side as `<div class="pilotiq-alert pilotiq-alert-<type>">`. An
+ * empty / unknown `type` falls back to `info` at render time.
+ */
+export declare const alertBlock: Block;
+//# sourceMappingURL=alert.d.ts.map

package/dist/blocks/alert.js

@@ -0,0 +1,23 @@
+import { SelectField, TextareaField } from '@pilotiq/pilotiq';
+import { Block } from '../Block.js';
+/**
+ * Default **Alert** (callout) block — a typed notice.
+ *
+ * Wire shape: `{ type: 'info' | 'warning' | 'success' | 'tip'; content: string }`.
+ * Renders read-side as `<div class="pilotiq-alert pilotiq-alert-<type>">`. An
+ * empty / unknown `type` falls back to `info` at render time.
+ */
+export const alertBlock = Block.make('alert')
+    .label('Alert')
+    .icon('⚠️')
+    .schema([
+    SelectField.make('type')
+        .label('Type')
+        .options([
+        { value: 'info', label: 'Info' },
+        { value: 'warning', label: 'Warning' },
+        { value: 'success', label: 'Success' },
+        { value: 'tip', label: 'Tip' },
+    ]),
+    TextareaField.make('content').label('Content').placeholder('Alert message…'),
+]);

package/dist/blocks/faq.d.ts

@@ -0,0 +1,9 @@
+import { Block } from '../Block.js';
+/**
+ * Default **FAQ** block — a list of question / answer pairs.
+ *
+ * Wire shape: `{ items: Array<{ question: string; answer: string }> }`.
+ * Renders read-side as a `<div class="pilotiq-faq">` of `<details>` items.
+ */
+export declare const faqBlock: Block;
+//# sourceMappingURL=faq.d.ts.map

package/dist/blocks/faq.js

@@ -0,0 +1,21 @@
+import { Repeater, TextField, TextareaField } from '@pilotiq/pilotiq';
+import { Block } from '../Block.js';
+/**
+ * Default **FAQ** block — a list of question / answer pairs.
+ *
+ * Wire shape: `{ items: Array<{ question: string; answer: string }> }`.
+ * Renders read-side as a `<div class="pilotiq-faq">` of `<details>` items.
+ */
+export const faqBlock = Block.make('faq')
+    .label('FAQ')
+    .icon('❓')
+    .schema([
+    Repeater.make('items')
+        .label('Questions')
+        .schema([
+        TextField.make('question').label('Question').placeholder('What is …?'),
+        TextareaField.make('answer').label('Answer').placeholder('A short, direct answer.'),
+    ])
+        .reorderable()
+        .addActionLabel('Add question'),
+]);

package/dist/blocks/index.d.ts

@@ -0,0 +1,22 @@
+import type { Block } from '../Block.js';
+/**
+ * Schema-form block factories — `Block.make().schema([...])` style, edited via
+ * the right-docked side panel. Kept for **custom / legacy** use via
+ * `RichTextField.blocks([...])`. They are NO LONGER defaults.
+ *
+ * The built-in content blocks — FAQ, Alert, Summary, Key takeaways, Pros & cons
+ * — are now **inline editable nodes** (`extensions/contentBlocks.ts`):
+ * labelled, edited in place, registered directly in the editor + slash menu.
+ */
+export { faqBlock } from './faq.js';
+export { alertBlock } from './alert.js';
+export { summaryBlock } from './summary.js';
+export { keyTakeawaysBlock } from './keyTakeaways.js';
+export { prosConsBlock } from './prosCons.js';
+/**
+ * Schema blocks shipped by default in every `RichTextField`. Empty — the
+ * default content blocks are inline nodes now, not schema-form blocks. A
+ * field's own `.blocks([...])` still merge in via `RichTextField`.
+ */
+export declare const defaultBlocks: readonly Block[];
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/index.js

@@ -0,0 +1,20 @@
+/**
+ * Schema-form block factories — `Block.make().schema([...])` style, edited via
+ * the right-docked side panel. Kept for **custom / legacy** use via
+ * `RichTextField.blocks([...])`. They are NO LONGER defaults.
+ *
+ * The built-in content blocks — FAQ, Alert, Summary, Key takeaways, Pros & cons
+ * — are now **inline editable nodes** (`extensions/contentBlocks.ts`):
+ * labelled, edited in place, registered directly in the editor + slash menu.
+ */
+export { faqBlock } from './faq.js';
+export { alertBlock } from './alert.js';
+export { summaryBlock } from './summary.js';
+export { keyTakeawaysBlock } from './keyTakeaways.js';
+export { prosConsBlock } from './prosCons.js';
+/**
+ * Schema blocks shipped by default in every `RichTextField`. Empty — the
+ * default content blocks are inline nodes now, not schema-form blocks. A
+ * field's own `.blocks([...])` still merge in via `RichTextField`.
+ */
+export const defaultBlocks = [];

package/dist/blocks/keyTakeaways.d.ts

@@ -0,0 +1,10 @@
+import { Block } from '../Block.js';
+/**
+ * Default **Key takeaways** block — a short bulleted list of the article's
+ * main points.
+ *
+ * Wire shape: `{ points: string[] }`. Renders read-side as
+ * `<div class="pilotiq-key-takeaways">` with a label and a `<ul>`.
+ */
+export declare const keyTakeawaysBlock: Block;
+//# sourceMappingURL=keyTakeaways.d.ts.map

package/dist/blocks/keyTakeaways.js

@@ -0,0 +1,15 @@
+import { TagsInput } from '@pilotiq/pilotiq';
+import { Block } from '../Block.js';
+/**
+ * Default **Key takeaways** block — a short bulleted list of the article's
+ * main points.
+ *
+ * Wire shape: `{ points: string[] }`. Renders read-side as
+ * `<div class="pilotiq-key-takeaways">` with a label and a `<ul>`.
+ */
+export const keyTakeawaysBlock = Block.make('key-takeaways')
+    .label('Key takeaways')
+    .icon('🔑')
+    .schema([
+    TagsInput.make('points').label('Key takeaways'),
+]);

package/dist/blocks/prosCons.d.ts

@@ -0,0 +1,9 @@
+import { Block } from '../Block.js';
+/**
+ * Default **Pros & cons** block — two lists, side by side.
+ *
+ * Wire shape: `{ pros: string[]; cons: string[] }`. Renders read-side as
+ * `<div class="pilotiq-pros-cons">` with a `pros` and a `cons` column.
+ */
+export declare const prosConsBlock: Block;
+//# sourceMappingURL=prosCons.d.ts.map

package/dist/blocks/prosCons.js

@@ -0,0 +1,15 @@
+import { TagsInput } from '@pilotiq/pilotiq';
+import { Block } from '../Block.js';
+/**
+ * Default **Pros & cons** block — two lists, side by side.
+ *
+ * Wire shape: `{ pros: string[]; cons: string[] }`. Renders read-side as
+ * `<div class="pilotiq-pros-cons">` with a `pros` and a `cons` column.
+ */
+export const prosConsBlock = Block.make('pros-cons')
+    .label('Pros & cons')
+    .icon('⚖️')
+    .schema([
+    TagsInput.make('pros').label('Pros'),
+    TagsInput.make('cons').label('Cons'),
+]);

package/dist/blocks/summary.d.ts

@@ -0,0 +1,9 @@
+import { Block } from '../Block.js';
+/**
+ * Default **Summary** block — a short, labelled summary of the article.
+ *
+ * Wire shape: `{ content: string }`. Renders read-side as
+ * `<div class="pilotiq-summary">` with a label and the body.
+ */
+export declare const summaryBlock: Block;
+//# sourceMappingURL=summary.d.ts.map

package/dist/blocks/summary.js

@@ -0,0 +1,14 @@
+import { TextareaField } from '@pilotiq/pilotiq';
+import { Block } from '../Block.js';
+/**
+ * Default **Summary** block — a short, labelled summary of the article.
+ *
+ * Wire shape: `{ content: string }`. Renders read-side as
+ * `<div class="pilotiq-summary">` with a label and the body.
+ */
+export const summaryBlock = Block.make('summary')
+    .label('Summary')
+    .icon('📝')
+    .schema([
+    TextareaField.make('content').label('Summary').placeholder('A short summary of the article…'),
+]);

package/dist/extensions/AiInlineDiffExtension.d.ts

@@ -48,7 +48,7 @@ declare module '@tiptap/core' {
              * banner / approve handlers can correlate the editor state with
              * the queue entry.
              */
-            startAiInlineDiff: (id: string, newDocSlice: Slice) => ReturnType;
+            startAiInlineDiff: (id: string, newDocSlice: Slice, displayMode?: AiDiffDisplayMode) => ReturnType;
             /**
              * Start the inline-diff review session for a surgical edit.
              * Snapshots the current doc as the baseline, then runs
@@ -62,7 +62,7 @@ declare module '@tiptap/core' {
              * `delete_block` / `update_block_mark` AI ops. Returns false (no
              * dispatch) when `applyFn` produced no doc change.
              */
-            applySurgicalAiInlineDiff: (id: string, applyFn: (tr: Transaction) => void) => ReturnType;
+            applySurgicalAiInlineDiff: (id: string, applyFn: (tr: Transaction) => void, displayMode?: AiDiffDisplayMode) => ReturnType;
             /** Clear diff state. Current doc IS the accepted state. */
             acceptAiInlineDiff: () => ReturnType;
             /** Revert doc to the captured baseline and clear diff state. */
@@ -70,12 +70,24 @@ declare module '@tiptap/core' {
         };
     }
 }
+/**
+ * How the pending diff renders:
+ *   - `'inline'` (default) — word-flow: green inline decorations on
+ *     inserted ranges, deleted text struck through in place.
+ *   - `'lines'` — GitHub-style: every block touched by an insert gets a
+ *     full-width green row (`+` gutter), deleted content renders as a
+ *     full-width red row (`−` gutter) above the change. Suits markdown
+ *     sources / structured text where lines are the meaningful unit.
+ */
+export type AiDiffDisplayMode = 'inline' | 'lines';
 interface DiffState {
     id: string;
     /** Original doc captured at `startAiInlineDiff` time — used for revert. */
     baseline: ProseMirrorNode;
     /** ChangeSet accumulating diffs since baseline. */
     changeset: ChangeSet;
+    /** Rendering mode for the decorations — see `AiDiffDisplayMode`. */
+    displayMode: AiDiffDisplayMode;
 }
 export declare const aiInlineDiffPluginKey: PluginKey<DiffState | null>;
 /** Read the active diff state, if any. Public for hosts that want to

package/dist/extensions/AiInlineDiffExtension.js

@@ -73,30 +73,64 @@ export const AiInlineDiffExtension = Extension.create({
         color: rgb(153, 27, 27);
         padding: 0 0.125em;
       }
+      .${prefix}-inserted-line {
+        display: block;
+        background-color: rgba(187, 247, 208, 0.45);
+        border-radius: 2px;
+        padding-left: 1.25em;
+        position: relative;
+        /* Some text surfaces style the editor root as a flex row (input
+           mimic); full-basis keeps each diff row on its own line there. */
+        flex: 0 0 100%;
+        width: 100%;
+      }
+      .${prefix}-inserted-line::before {
+        content: '+';
+        position: absolute;
+        left: 0.25em;
+        color: rgb(20, 83, 45);
+        opacity: 0.7;
+      }
+      .${prefix}-deleted-lines { display: block; flex: 0 0 100%; width: 100%; }
+      .${prefix}-lines-active { display: block !important; }
+      .${prefix}-deleted-line {
+        background-color: rgba(254, 226, 226, 0.55);
+        color: rgb(153, 27, 27);
+        border-radius: 2px;
+        padding-left: 1.25em;
+        position: relative;
+        white-space: pre-wrap;
+      }
+      .${prefix}-deleted-line::before {
+        content: '−';
+        position: absolute;
+        left: 0.25em;
+        opacity: 0.7;
+      }
     `;
         document.head.appendChild(style);
     },
     addCommands() {
         return {
-            startAiInlineDiff: (id, newDocSlice) => ({ tr, state, dispatch }) => {
+            startAiInlineDiff: (id, newDocSlice, displayMode) => ({ tr, state, dispatch }) => {
                 const baseline = state.doc;
                 const docEnd = state.doc.content.size;
                 // Replace the whole doc body with the proposed content. The
                 // schema enforces validity — if the slice doesn't fit, ProseMirror
                 // throws (callers should pre-validate via `editor.schema`).
                 tr.replaceRange(0, docEnd, newDocSlice);
-                const meta = { type: 'start', id, baseline };
+                const meta = { type: 'start', id, baseline, ...(displayMode ? { displayMode } : {}) };
                 tr.setMeta(aiInlineDiffPluginKey, meta);
                 if (dispatch)
                     dispatch(tr);
                 return true;
             },
-            applySurgicalAiInlineDiff: (id, applyFn) => ({ tr, state, dispatch }) => {
+            applySurgicalAiInlineDiff: (id, applyFn, displayMode) => ({ tr, state, dispatch }) => {
                 const baseline = state.doc;
                 applyFn(tr);
                 if (!tr.docChanged)
                     return false;
-                const meta = { type: 'start', id, baseline };
+                const meta = { type: 'start', id, baseline, ...(displayMode ? { displayMode } : {}) };
                 tr.setMeta(aiInlineDiffPluginKey, meta);
                 if (dispatch)
                     dispatch(tr);
@@ -141,7 +175,7 @@ export const AiInlineDiffExtension = Extension.create({
                             // the transaction's step list to compute the diff between
                             // the baseline doc and the post-transaction doc.
                             const cs = ChangeSet.create(meta.baseline).addSteps(tr.doc, tr.mapping.maps, null);
-                            return { id: meta.id, baseline: meta.baseline, changeset: cs };
+                            return { id: meta.id, baseline: meta.baseline, changeset: cs, displayMode: meta.displayMode ?? 'inline' };
                         }
                         if (meta?.type === 'clear')
                             return null;
@@ -164,12 +198,25 @@ export const AiInlineDiffExtension = Extension.create({
                             return DecorationSet.empty;
                         return buildDiffDecorations(state, ds, ext.options.classPrefix ?? 'pilotiq-ai-diff');
                     },
+                    // While a LINES-mode diff is active, force the editor root to
+                    // block layout. Some text surfaces style the root as a flex row
+                    // (single-line input mimic) — without this the stacked diff
+                    // rows lay out as overflowing columns. Drops automatically on
+                    // accept / reject.
+                    attributes(state) {
+                        const ds = aiInlineDiffPluginKey.getState(state);
+                        return ds?.displayMode === 'lines'
+                            ? { class: `${ext.options.classPrefix ?? 'pilotiq-ai-diff'}-lines-active` }
+                            : {};
+                    },
                 },
             }),
         ];
     },
 });
 function buildDiffDecorations(state, ds, prefix) {
+    if (ds.displayMode === 'lines')
+        return buildLineDiffDecorations(state, ds, prefix);
     const decos = [];
     const docSize = state.doc.content.size;
     for (const change of ds.changeset.changes) {
@@ -213,3 +260,126 @@ function buildDeletedWidget(text, prefix, id) {
     root.appendChild(inner);
     return root;
 }
+/**
+ * GitHub-style line rendering. Unlike the inline mode (which walks the
+ * changeset's MINIMAL change ranges), lines mode treats whole top-level
+ * blocks as the diff unit — an LCS over the baseline's block texts vs
+ * the current doc's block texts. A partially-edited line therefore
+ * renders as one full red row (the old line) above one full green row
+ * (the new line), instead of fragmented word-level shards. Mark-only
+ * changes (same text, different formatting) read as "kept" here — the
+ * block unit is text; use inline mode when formatting deltas matter.
+ *
+ * The changeset state still drives baseline capture / accept / reject;
+ * lines mode just re-derives its presentation from baseline-vs-current
+ * on every decoration pass, so remote collab edits during review stay
+ * correct for free.
+ */
+function buildLineDiffDecorations(state, ds, prefix) {
+    const decos = [];
+    const baseTexts = topLevelBlockTexts(ds.baseline);
+    const current = [];
+    state.doc.forEach((node, pos) => {
+        current.push({ text: node.textContent, pos, nodeSize: node.nodeSize });
+    });
+    // Walk tokens with a pointer into the CURRENT doc's blocks. Removed
+    // baseline lines accumulate and flush as ONE widget anchored before
+    // the next current block (or at doc end), so consecutive deletions
+    // render as a contiguous red row group.
+    let j = 0;
+    let pendingRemoved = [];
+    const flushRemoved = (anchor) => {
+        if (pendingRemoved.length === 0)
+            return;
+        const lines = pendingRemoved;
+        pendingRemoved = [];
+        decos.push(Decoration.widget(anchor, () => buildDeletedLinesWidget(lines.join('\n'), prefix, ds.id), {
+            side: -1,
+            ignoreSelection: true,
+            key: `pilotiq-ai-diff:deleted-lines:${anchor}:${lines.length}`,
+        }));
+    };
+    for (const tok of lcsBlockDiffTokens(baseTexts, current.map(c => c.text))) {
+        if (tok.kind === 'kept') {
+            flushRemoved(current[j].pos);
+            j++;
+            continue;
+        }
+        if (tok.kind === 'added') {
+            flushRemoved(current[j].pos);
+            decos.push(Decoration.node(current[j].pos, current[j].pos + current[j].nodeSize, {
+                class: `${prefix}-inserted-line`,
+                'data-pilotiq-ai-diff-id': ds.id,
+            }));
+            j++;
+            continue;
+        }
+        // removed — baseline-only line; accumulate for the next flush.
+        pendingRemoved.push(tok.text);
+    }
+    flushRemoved(state.doc.content.size);
+    return DecorationSet.create(state.doc, decos);
+}
+function topLevelBlockTexts(doc) {
+    const out = [];
+    doc.forEach((node) => { out.push(node.textContent); });
+    return out;
+}
+/** Standard LCS walk over two block-text arrays, emitting tokens in
+ *  presentation order with removed-before-added on replacements. */
+function lcsBlockDiffTokens(a, b) {
+    const n = a.length;
+    const m = b.length;
+    const dp = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
+    for (let i = 1; i <= n; i++) {
+        for (let j = 1; j <= m; j++) {
+            if (a[i - 1] === b[j - 1])
+                dp[i][j] = dp[i - 1][j - 1] + 1;
+            else
+                dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+        }
+    }
+    const out = [];
+    let i = n;
+    let j = m;
+    while (i > 0 && j > 0) {
+        if (a[i - 1] === b[j - 1]) {
+            out.push({ kind: 'kept', text: a[i - 1] });
+            i--;
+            j--;
+        }
+        // Strict `>` ties toward pushing `added` first in this backward walk,
+        // which renders removed-before-added after the final reverse.
+        else if (dp[i - 1][j] > dp[i][j - 1]) {
+            out.push({ kind: 'removed', text: a[i - 1] });
+            i--;
+        }
+        else {
+            out.push({ kind: 'added', text: b[j - 1] });
+            j--;
+        }
+    }
+    while (i > 0) {
+        out.push({ kind: 'removed', text: a[i - 1] });
+        i--;
+    }
+    while (j > 0) {
+        out.push({ kind: 'added', text: b[j - 1] });
+        j--;
+    }
+    out.reverse();
+    return out;
+}
+function buildDeletedLinesWidget(text, prefix, id) {
+    const root = document.createElement('div');
+    root.className = `${prefix}-deleted-lines`;
+    root.setAttribute('data-pilotiq-ai-diff-id', id);
+    root.contentEditable = 'false';
+    for (const line of text.split('\n')) {
+        const row = document.createElement('div');
+        row.className = `${prefix}-deleted-line`;
+        row.textContent = line || ' ';
+        root.appendChild(row);
+    }
+    return root;
+}