@dxos/ui-editor 0.0.0 → 0.8.4-main.03d5cd7b56

package/src/extensions/snippets.ts

@@ -0,0 +1,67 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import { keymap } from '@codemirror/view';
+
+const defaultItems = ['hello world!', 'this is a test.', 'this is [DXOS](https://dxos.org)'];
+
+export type SnippetsOptions = {
+  delay?: number;
+  items?: string[];
+};
+
+/**
+ * Configurable plugin that lets users cycle through pre-configured input snippets.
+ */
+// TODO(burdon): Review https://github.com/sergeche/codemirror-movie?tab=readme-ov-file
+export const snippets = ({ delay = 75, items = defaultItems }: SnippetsOptions = {}): Extension => {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let index = 0; // TODO(burdon): Make global.
+
+  return [
+    keymap.of([
+      {
+        // Reset.
+        key: "alt-meta-'",
+        run: () => {
+          clearTimeout(timer);
+          index = 0;
+          return true;
+        },
+      },
+      {
+        // Next snippet.
+        // TODO(burdon): Press 1-9 to select snippet?
+        key: "Shift-Meta-'",
+        run: (view) => {
+          clearTimeout(timer);
+          // TODO(burdon): Add space if needed.
+          const text = items[index++];
+          if (index === items?.length) {
+            index = 0;
+          }
+
+          let offset = 0;
+          const insert = (delayMs = 0) => {
+            timer = setTimeout(() => {
+              const pos = view.state.selection.main.head;
+              view.dispatch({
+                changes: { from: pos, insert: text[offset++] },
+                selection: { anchor: pos + 1 },
+              });
+
+              if (offset < text.length) {
+                insert(Math.random() * delay * (text[offset] === ' ' ? 2 : 1));
+              }
+            }, delayMs);
+          };
+
+          insert();
+          return true;
+        },
+      },
+    ]),
+  ];
+};

package/src/extensions/tags/extended-markdown.test.ts

@@ -12,11 +12,24 @@ import { trim } from '@dxos/util';
 import { extendedMarkdown } from './extended-markdown';
 import { nodeToJson } from './xml-util';
 
+const testRegistry = {
+  prompt: { block: true },
+  suggestion: { block: true },
+  choice: { block: true },
+  toolkit: { block: true },
+  toolCall: { block: true },
+  summary: { block: true },
+  reasoning: { block: true },
+  stats: { block: true },
+  reference: { block: false },
+  select: { block: true },
+};
+
 describe('extended-markdown', () => {
-  const createEditorState = (doc: string) => {
+  const createEditorState = (doc: string, registry?: Record<string, any>) => {
     return EditorState.create({
       doc,
-      extensions: [extendedMarkdown()],
+      extensions: [extendedMarkdown({ registry: registry ?? testRegistry })],
     });
   };
 
@@ -121,6 +134,111 @@ describe('extended-markdown', () => {
     });
   });
 
+  test('self-closing tags with attributes should not consume subsequent content', ({ expect }) => {
+    const doc = trim`
+      <toolCall id="toolu_01ABC123" />
+
+      ## Architecture
+
+      Regular paragraph.
+    `;
+
+    const state = createEditorState(doc);
+    const tree = syntaxTree(state);
+
+    const nodeNames: string[] = [];
+    tree.iterate({
+      enter: (node) => {
+        nodeNames.push(node.name);
+      },
+    });
+
+    // The heading must be parsed as ATXHeading2, not swallowed into an HTMLBlock.
+    expect(nodeNames).toContain('ATXHeading2');
+  });
+
+  test('self-closing tags without attributes should parse correctly', ({ expect }) => {
+    const doc = trim`
+      <toolkit />
+
+      ## Heading After Self-Close
+
+      Paragraph text.
+    `;
+
+    const state = createEditorState(doc);
+    const tree = syntaxTree(state);
+
+    const nodeNames: string[] = [];
+    tree.iterate({
+      enter: (node) => {
+        nodeNames.push(node.name);
+      },
+    });
+
+    expect(nodeNames).toContain('ATXHeading2');
+  });
+
+  test('self-closing tags with trailing text should not consume subsequent content', ({ expect }) => {
+    const doc = trim`
+      <toolkit /> trailing text
+
+      ## Heading After Trailing
+    `;
+
+    const state = createEditorState(doc);
+    const tree = syntaxTree(state);
+
+    const nodeNames: string[] = [];
+    tree.iterate({
+      enter: (node) => {
+        nodeNames.push(node.name);
+      },
+    });
+
+    // The trailing text line should not be swallowed as an HTMLBlock.
+    expect(nodeNames).toContain('ATXHeading2');
+  });
+
+  test('mixed self-closing and block tags should not break markdown parsing', ({ expect }) => {
+    const doc = trim`
+      <prompt>What is markdown?</prompt>
+
+      <reasoning>
+      The user is asking about markdown.
+      </reasoning>
+
+      Some explanation text.
+
+      <toolCall id="toolu_01ABC123analyze" />
+
+      <summary>Analyzed 42 files.</summary>
+
+      ## Architecture
+
+      The project follows a modular pattern.
+
+      <stats>3 tool uses · 12.4k tokens</stats>
+
+      ### Sub-heading
+
+      More text.
+    `;
+
+    const state = createEditorState(doc);
+    const tree = syntaxTree(state);
+
+    const nodeNames: string[] = [];
+    tree.iterate({
+      enter: (node) => {
+        nodeNames.push(node.name);
+      },
+    });
+
+    expect(nodeNames).toContain('ATXHeading2');
+    expect(nodeNames).toContain('ATXHeading3');
+  });
+
   //
   // TODO(burdon): All tests below should test the tree.
   //

package/src/extensions/tags/extended-markdown.ts

@@ -5,15 +5,18 @@
 import { xmlLanguage } from '@codemirror/lang-xml';
 import { type Extension } from '@codemirror/state';
 import { type ParseWrapper, parseMixed } from '@lezer/common';
+import { type BlockParser } from '@lezer/markdown';
 
 import { createMarkdownExtensions } from '../markdown';
-
 import { type XmlWidgetRegistry } from './xml-tags';
 
 export type ExtendedMarkdownOptions = {
   registry?: XmlWidgetRegistry;
 };
 
+/** Escapes a string for safe embedding in RegExp source. */
+const escapeRegExpSource = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
 /**
  * Extended markdown parser with mixed parser for custom rendering of XML tags.
  */
@@ -29,6 +32,9 @@ export const extendedMarkdown = ({ registry }: ExtendedMarkdownOptions = {}): Ex
               name: 'SetextHeading',
               parse: () => false,
             },
+            // Custom XML block parser that keeps registered tags as a single HTMLBlock
+            // even when their content contains blank lines.
+            ...xmlBlockParsers(registry),
           ],
         },
       ],
@@ -36,6 +42,79 @@ export const extendedMarkdown = ({ registry }: ExtendedMarkdownOptions = {}): Ex
   ];
 };
 
+/**
+ * Creates block parsers for registered XML tags that may contain blank lines.
+ *
+ * By default, the markdown parser treats custom HTML tags as type 6 HTML blocks,
+ * which end at blank lines. This causes tags like `<reasoning>...\n\n...</reasoning>`
+ * to be split into separate blocks, preventing the XML mixed parser from seeing the
+ * full element. This custom parser consumes all lines (including blanks) until the
+ * matching closing tag, emitting a single HTMLBlock.
+ */
+const xmlBlockParsers = (registry?: XmlWidgetRegistry): BlockParser[] => {
+  const customTags = Object.keys(registry ?? {});
+  if (customTags.length === 0) {
+    return [];
+  }
+
+  const tagPattern = customTags.map(escapeRegExpSource).join('|');
+  const selfClosePattern = new RegExp(`^\\s*<(${tagPattern})(\\s[^>]*)?\\/>\\s*$`);
+  const openPattern = new RegExp(`^\\s*<(${tagPattern})(\\s[^>]*)?\\/?>`);
+
+  return [
+    {
+      name: 'XMLBlock',
+      before: 'HTMLBlock',
+      parse: (cx, line) => {
+        const match = openPattern.exec(line.text);
+        if (!match) {
+          return false;
+        }
+
+        // Self-closing tag (e.g., `<tag />` or `<tag id="x" />`).
+        if (selfClosePattern.test(line.text)) {
+          const end = cx.lineStart + line.text.length;
+          cx.addElement(cx.elt('HTMLBlock', cx.lineStart, end));
+          cx.nextLine();
+          return true;
+        }
+
+        // Self-closing tag with trailing text (e.g., `<tag /> text`).
+        // Let markdown parse it as a normal paragraph.
+        if (match[0].trimEnd().endsWith('/>')) {
+          return false;
+        }
+
+        const tagName = match[1];
+        const closeTag = `</${tagName}>`;
+        const start = cx.lineStart;
+
+        // Check if closing tag is on the same line.
+        if (line.text.includes(closeTag)) {
+          cx.addElement(cx.elt('HTMLBlock', start, start + line.text.length));
+          cx.nextLine();
+          return true;
+        }
+
+        // Consume lines (including blank lines) until the closing tag.
+        let end = cx.lineStart + line.text.length;
+        while (cx.nextLine()) {
+          end = cx.lineStart + line.text.length;
+          if (line.text.includes(closeTag)) {
+            cx.addElement(cx.elt('HTMLBlock', start, end));
+            cx.nextLine();
+            return true;
+          }
+        }
+
+        // Unclosed tag (e.g., still streaming) — emit what we have.
+        cx.addElement(cx.elt('HTMLBlock', start, end));
+        return true;
+      },
+    },
+  ];
+};
+
 /**
  * Configure mixed parser to recognize custom tags.
  */

package/src/extensions/tags/fader.ts

@@ -0,0 +1,195 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Extension, StateEffect, StateField } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin } from '@codemirror/view';
+
+const DEFAULT_REMOVAL_DELAY = 5_000; // ms.
+const DEFAULT_COALESCE_WINDOW = 100; // ms.
+const CLEANUP_INTERVAL = 1_000; // ms.
+
+export type FaderOptions = {
+  /** Time window in ms to coalesce adjacent appends into a single decoration. */
+  coalesce?: number;
+};
+
+/**
+ * Extension that decorates appended text with a fade-in effect.
+ * Adjacent appends within the coalesce window are merged into a single decoration.
+ * Decorations are queued with an expiry and removed by a timer.
+ */
+export const fader = (options: FaderOptions = {}): Extension => {
+  const removalDelay = DEFAULT_REMOVAL_DELAY;
+  const coalesceWindow = options.coalesce ?? DEFAULT_COALESCE_WINDOW;
+
+  let lastCount = -1;
+  const log = (expiries: number[]) => {
+    if (expiries.length !== lastCount) {
+      lastCount = expiries.length;
+      // console.log('[fader] decorations:', lastCount);
+    }
+  };
+
+  // Effect to remove all expired decorations.
+  const dequeue = StateEffect.define<number>();
+
+  // FIFO of expiry timestamps paired with a decoration set.
+  // Tracks `batchStart` — the time the current coalesce batch began.
+  type FaderState = {
+    decorations: DecorationSet;
+    expiries: number[];
+    batchStart: number;
+  };
+
+  const fadeField = StateField.define<FaderState>({
+    create: () => ({ decorations: Decoration.none, expiries: [], batchStart: 0 }),
+    update: ({ decorations, expiries, batchStart }, tr) => {
+      // Remove expired entries by count (FIFO order matches decoration insertion order).
+      for (const effect of tr.effects) {
+        if (effect.is(dequeue)) {
+          const now = effect.value;
+          let removeCount = 0;
+          while (removeCount < expiries.length && expiries[removeCount] <= now) {
+            removeCount++;
+          }
+          if (removeCount > 0) {
+            expiries = expiries.slice(removeCount);
+            let skipped = 0;
+            decorations = decorations.update({
+              filter: () => {
+                if (skipped < removeCount) {
+                  skipped++;
+                  return false;
+                }
+                return true;
+              },
+            });
+          }
+        }
+      }
+
+      if (!tr.docChanged) {
+        log(expiries);
+        return { decorations, expiries, batchStart };
+      }
+
+      // Reset when document is cleared or fully replaced.
+      let isReset = tr.state.doc.length === 0;
+      if (!isReset && tr.startState.doc.length > 0) {
+        tr.changes.iterChanges((fromA, toA) => {
+          if (fromA === 0 && toA === tr.startState.doc.length) {
+            isReset = true;
+          }
+        });
+      }
+      if (isReset) {
+        log([]);
+        return { decorations: Decoration.none, expiries: [], batchStart: 0 };
+      }
+
+      // Collect appended ranges.
+      const now = Date.now();
+      const add: { from: number; to: number }[] = [];
+      tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
+        if (toA === tr.startState.doc.length && inserted.length > 0) {
+          add.push({ from: fromB, to: toB });
+        }
+      });
+
+      if (add.length > 0) {
+        const canCoalesce = expiries.length > 0 && batchStart > 0 && now - batchStart < coalesceWindow;
+        if (canCoalesce) {
+          // Extend the last decoration: remove it, then add a merged one.
+          let lastFrom = -1;
+          let lastTo = -1;
+          decorations.between(0, tr.state.doc.length, (from, to) => {
+            lastFrom = from;
+            lastTo = to;
+          });
+
+          if (lastFrom >= 0) {
+            decorations = decorations.update({
+              filter: (from, to) => !(from === lastFrom && to === lastTo),
+            });
+
+            const mergedFrom = Math.min(lastFrom, add[0].from);
+            const mergedTo = add[add.length - 1].to;
+            decorations = decorations.update({
+              add: [Decoration.mark({ class: 'cm-fader' }).range(mergedFrom, mergedTo)],
+            });
+
+            // Update the last expiry rather than adding a new one.
+            expiries = [...expiries.slice(0, -1), now + removalDelay];
+          }
+        } else {
+          // New batch — record when it started.
+          batchStart = now;
+          expiries = [...expiries, now + removalDelay];
+          decorations = decorations.update({
+            add: add.map(({ from, to }) => Decoration.mark({ class: 'cm-fader' }).range(from, to)),
+          });
+        }
+      }
+
+      log(expiries);
+      return { decorations, expiries, batchStart };
+    },
+    provide: (f) => EditorView.decorations.from(f, (value) => value.decorations),
+  });
+
+  // Timer that schedules removal based on the next pending expiry.
+  const cleanup = ViewPlugin.fromClass(
+    class {
+      #timer: ReturnType<typeof setTimeout> | undefined;
+
+      constructor(private view: EditorView) {
+        this.#schedule();
+      }
+
+      update() {
+        this.#schedule();
+      }
+
+      #schedule() {
+        const { expiries } = this.view.state.field(fadeField);
+        if (expiries.length === 0) {
+          clearTimeout(this.#timer);
+          this.#timer = undefined;
+          return;
+        }
+
+        if (this.#timer !== undefined) {
+          return;
+        }
+
+        // Wait at least CLEANUP_INTERVAL after the oldest expiry to batch removals.
+        const delay = Math.max(CLEANUP_INTERVAL, expiries[0] - Date.now());
+        this.#timer = setTimeout(() => {
+          this.#timer = undefined;
+          this.view.dispatch({ effects: dequeue.of(Date.now()) });
+        }, delay);
+      }
+
+      destroy() {
+        clearTimeout(this.#timer);
+      }
+    },
+  );
+
+  return [
+    fadeField,
+    cleanup,
+    EditorView.theme({
+      '.cm-fader': {
+        animation: 'fader 1s ease-out forwards',
+      },
+      '@keyframes fader': {
+        '0%': {
+          textShadow: '0 0 16px rgba(100, 200, 255, 1), 0 0 32px rgba(100, 200, 255, 0.6)',
+        },
+        '100%': {},
+      },
+    }),
+  ];
+};

package/src/extensions/tags/index.ts

@@ -3,5 +3,8 @@
 //
 
 export * from './extended-markdown';
-export * from './streamer';
+export * from './fader';
+export * from './typewriter';
+export * from './xml-block-decoration';
+export * from './xml-formatting';
 export * from './xml-tags';

package/src/extensions/tags/testing/text.md

@@ -0,0 +1,36 @@
+<prompt>summarize the posts</prompt>
+<reasoning>The user wants me to summarize the posts related to the magazine in context. Let me first load the magazine object to understand its structure, and then list the candidate posts.</reasoning>
+<status>Loading the magazine and listing candidate posts…</status>
+<toolCall id="toolu_01WMMcsaHxTvuGxcMh2CkfL4" />
+<toolCall id="toolu_01CxWNvXZ4jExfLEJumfMzqm" />
+<reasoning>The magazine has 10 posts already curated, and there are no uncurated candidate posts. The user wants me to summarize the posts that are already in the magazine. Let me load them.</reasoning>
+<status>No uncurated candidates — loading the 10 posts already in the magazine…</status>
+<toolCall id="toolu_0152ftz33GL5M1DDi8GGDHi2" />
+<reasoning>The magazine has 10 posts, but several are duplicates. Let me deduplicate by title/guid and summarize the unique articles. Unique articles:
+
+1. "FBI affidavit quotes White House press dinner shooting suspect expressing rage at 'a pedophile, rapist and traitor' – US politics live" - About Cole Allen's manifesto and charges, plus King Charles visiting Trump at the White House.
+2. "Australia news live: UK inquiry says 'cracks already beginning to show' on Aukus; search for missing five-year-old near Alice Springs grows" - Live blog covering Aukus inquiry, David Brat nominated as ambassador to Australia, fuel reserve crisis.
+3. "Rebel Wilson gives evidence in high-profile defamation case against star of directorial debut" - Rebel Wilson testifying in defamation case brought by Charlotte MacInnes.
+4. "Baby on board: US woman gives birth on Delta flight" - Ashley Blair delivered her baby aboard a Delta flight traveling from Atlanta to Portland.
+5. "'Shortcomings and failures' could sink Aukus nuclear submarines plan, UK inquiry warns" - A UK House of Commons defence committee report identifies significant funding gaps threatening the Aukus submarine program.</reasoning>
+   Here's a summary of the **5 unique articles** currently in the magazine (some posts are duplicates):
+
+6. **FBI affidavit quotes White House press dinner shooting suspect**
+   Federal charges filed against Cole Allen include excerpts from a manifesto he emailed to family and friends before attempting to charge into the White House Correspondents' Dinner. Separately, King Charles and Queen Camilla visited Donald Trump at the White House for tea and a beehive tour.
+
+7. **Australia news live: Aukus 'cracks' & missing child search**
+   A UK House of Commons inquiry reveals "shortcomings and failings" in the Aukus submarine program. Also covered: David Brat nominated as the next US ambassador to Australia, and a push to extend Australia's fuel reserves from 30 to 60 days amid rising security concerns.
+
+8. **Rebel Wilson testifies in defamation case**
+   Hollywood star Rebel Wilson gave evidence in a defamation lawsuit brought by Charlotte MacInnes, the lead actor of Wilson's directorial debut _The Deb_. The case centres on claims MacInnes confided to Wilson about being uncomfortable with a bathing request from a colleague.
+
+9. **Baby born on Delta flight**
+   Passenger Ashley Blair went into labor on a packed Delta flight from Atlanta to Portland. Two off-duty EMTs on the plane delivered baby Brielle Renee just before landing — using a shoelace as a tourniquet for an IV. Mother and baby were healthy on arrival.
+
+10. **UK inquiry warns Aukus submarine plan at risk**
+    A detailed House of Commons defence committee report finds UK submarine funding has "cracks already beginning to show," with chronic under-investment in shipbuilding and only one submarine yard (Barrow-in-Furness) already behind schedule. Australia has committed A$4.6 billion to help, but the committee warns political drift could derail the entire program.
+    <prompt>how many articles are there?</prompt>
+    <reasoning>The user is asking about the number of articles. From my previous analysis, there are 10 posts in the magazine, but only 5 unique articles (the rest are duplicates). Let me answer based on what I already know.</reasoning>
+    There are **10 posts** in the magazine, but only **5 unique articles** — each article appears twice (as duplicates from the two feeds).
+    <prompt>say your name inside an xml tag</prompt>
+    <name>Kai</name>

package/src/extensions/tags/testing/text.txt

@@ -0,0 +1,35 @@
+<prompt>summarize the posts</prompt>
+<reasoning>The user wants me to summarize the posts related to the magazine in context. Let me first load the magazine object to understand its structure, and then list the candidate posts.</reasoning>
+<status>Loading the magazine and listing candidate posts…</status>
+<toolCall id="toolu_01WMMcsaHxTvuGxcMh2CkfL4" />
+<toolCall id="toolu_01CxWNvXZ4jExfLEJumfMzqm" />
+<reasoning>The magazine has 10 posts already curated, and there are no uncurated candidate posts. The user wants me to summarize the posts that are already in the magazine. Let me load them.</reasoning>
+<status>No uncurated candidates — loading the 10 posts already in the magazine…</status>
+<toolCall id="toolu_0152ftz33GL5M1DDi8GGDHi2" />
+<reasoning>The magazine has 10 posts, but several are duplicates. Let me deduplicate by title/guid and summarize the unique articles. Unique articles:
+1. "FBI affidavit quotes White House press dinner shooting suspect expressing rage at 'a pedophile, rapist and traitor' – US politics live" - About Cole Allen's manifesto and charges, plus King Charles visiting Trump at the White House.
+2. "Australia news live: UK inquiry says 'cracks already beginning to show' on Aukus; search for missing five-year-old near Alice Springs grows" - Live blog covering Aukus inquiry, David Brat nominated as ambassador to Australia, fuel reserve crisis. 
+3. "Rebel Wilson gives evidence in high-profile defamation case against star of directorial debut" - Rebel Wilson testifying in defamation case brought by Charlotte MacInnes.
+4. "Baby on board: US woman gives birth on Delta flight" - Ashley Blair delivered her baby aboard a Delta flight traveling from Atlanta to Portland.
+5. "'Shortcomings and failures' could sink Aukus nuclear submarines plan, UK inquiry warns" - A UK House of Commons defence committee report identifies significant funding gaps threatening the Aukus submarine program.</reasoning>
+Here's a summary of the **5 unique articles** currently in the magazine (some posts are duplicates):
+
+1. **FBI affidavit quotes White House press dinner shooting suspect**
+   Federal charges filed against Cole Allen include excerpts from a manifesto he emailed to family and friends before attempting to charge into the White House Correspondents' Dinner. Separately, King Charles and Queen Camilla visited Donald Trump at the White House for tea and a beehive tour.
+
+2. **Australia news live: Aukus 'cracks' & missing child search**
+   A UK House of Commons inquiry reveals "shortcomings and failings" in the Aukus submarine program. Also covered: David Brat nominated as the next US ambassador to Australia, and a push to extend Australia's fuel reserves from 30 to 60 days amid rising security concerns.
+
+3. **Rebel Wilson testifies in defamation case**
+   Hollywood star Rebel Wilson gave evidence in a defamation lawsuit brought by Charlotte MacInnes, the lead actor of Wilson's directorial debut *The Deb*. The case centres on claims MacInnes confided to Wilson about being uncomfortable with a bathing request from a colleague.
+
+4. **Baby born on Delta flight**
+   Passenger Ashley Blair went into labor on a packed Delta flight from Atlanta to Portland. Two off-duty EMTs on the plane delivered baby Brielle Renee just before landing — using a shoelace as a tourniquet for an IV. Mother and baby were healthy on arrival.
+
+5. **UK inquiry warns Aukus submarine plan at risk**
+   A detailed House of Commons defence committee report finds UK submarine funding has "cracks already beginning to show," with chronic under-investment in shipbuilding and only one submarine yard (Barrow-in-Furness) already behind schedule. Australia has committed A$4.6 billion to help, but the committee warns political drift could derail the entire program.
+<prompt>how many articles are there?</prompt>
+<reasoning>The user is asking about the number of articles. From my previous analysis, there are 10 posts in the magazine, but only 5 unique articles (the rest are duplicates). Let me answer based on what I already know.</reasoning>
+There are **10 posts** in the magazine, but only **5 unique articles** — each article appears twice (as duplicates from the two feeds).
+<prompt>say your name inside an xml tag</prompt>
+<name>Kai</name>

package/src/extensions/tags/typewriter.test.ts

@@ -0,0 +1,65 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { trim } from '@dxos/util';
+
+import { xmlElementLength } from './typewriter';
+
+describe('typewriter', () => {
+  test('xmlElementLength handles hyphenated custom element names', ({ expect }) => {
+    const inner = 'Hello';
+    const el = `<dom-widget>${inner}</dom-widget>`;
+    expect(xmlElementLength(el)).toBe(el.length);
+  });
+
+  test('xmlElementLength handle multi-line tags', ({ expect }) => {
+    const el = trim`
+      <summary>
+        Line 1
+
+        Line 2
+      </summary>
+    `;
+    expect(xmlElementLength(el)).toBe(el.length);
+  });
+
+  test('xmlElementLength handles simple tag names', ({ expect }) => {
+    const el = '<prompt>Hi</prompt>';
+    expect(xmlElementLength(el)).toBe(el.length);
+  });
+
+  test('xmlElementLength returns 0 until closing tag is complete', ({ expect }) => {
+    expect(xmlElementLength('<dom-widget>x')).toBe(0);
+  });
+
+  test('xmlElementLength handles tags with blank lines in content', ({ expect }) => {
+    const el = trim`
+      <reasoning>
+      The user is asking me to think deeply about what markdown is.
+
+      But given the context of our conversation - we've been trying to scrape slab data from a website - I think they might be hinting at something specific.
+      </reasoning>
+    `;
+    expect(xmlElementLength(el)).toBe(el.length);
+  });
+
+  test('xmlElementLength handles tags with multiple blank lines', ({ expect }) => {
+    const el = trim`
+      <reasoning>
+      First paragraph.
+
+
+      Second paragraph after two blank lines.
+      </reasoning>
+    `;
+    expect(xmlElementLength(el)).toBe(el.length);
+  });
+
+  test('xmlElementLength handles tags with only blank lines', ({ expect }) => {
+    const el = '<reasoning>\n\n\n</reasoning>';
+    expect(xmlElementLength(el)).toBe(el.length);
+  });
+});