@dxos/ui-editor 0.8.4-main.fcfe5033a5 → 0.9.0

package/src/extensions/tags/xml-block-decoration.ts

@@ -0,0 +1,123 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { xmlLanguage } from '@codemirror/lang-xml';
+import { type Extension, type Range } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+
+export type XmlBlockDecorationOptions = {
+  /**
+   * Tag name to match (e.g. `'prompt'`).
+   */
+  tag: string;
+
+  /**
+   * Class added via `Decoration.line` to each line that intersects the element's content
+   * range. Use to style the bubble container (e.g. flex alignment, vertical margin).
+   */
+  lineClass?: string;
+
+  /**
+   * Class added via `Decoration.mark` covering the inner content (between the open and
+   * close tags). Use to style the bubble surface (background, padding, rounding).
+   */
+  contentClass?: string;
+
+  /**
+   * When true, the open and close tag delimiters are hidden via `Decoration.replace`
+   * with no widget, so the rendered text is the inner content only.
+   */
+  hideTags?: boolean;
+};
+
+/**
+ * Walks the doc with the Lezer XML parser and decorates `<tag>…</tag>` elements without
+ * replacing them with a widget — the source text remains in the document and can still
+ * be matched by other extensions (e.g. `xmlFormatting`). Use this for "bubble"-style
+ * styling of XML blocks (chat prompts, callouts, etc.) where the inner content should
+ * stay editable/copyable rather than living inside a CodeMirror widget.
+ */
+export const xmlBlockDecoration = ({
+  tag,
+  lineClass,
+  contentClass,
+  hideTags,
+}: XmlBlockDecorationOptions): Extension => {
+  const lineDecoration = lineClass ? Decoration.line({ class: lineClass }) : undefined;
+  const contentDecoration = contentClass ? Decoration.mark({ class: contentClass }) : undefined;
+  const hideDecoration = hideTags ? Decoration.replace({}) : undefined;
+
+  const buildDecorations = (view: EditorView): DecorationSet => {
+    const text = view.state.sliceDoc(0, view.state.doc.length);
+    if (!text.includes(`<${tag}`)) {
+      return Decoration.none;
+    }
+
+    const tree = xmlLanguage.parser.parse(text);
+    const ranges: Range<Decoration>[] = [];
+    tree.iterate({
+      enter: (node) => {
+        if (node.type.name !== 'Element') {
+          return;
+        }
+        const openTag = node.node.getChild('OpenTag');
+        const closeTag = node.node.getChild('CloseTag') ?? node.node.getChild('MismatchedCloseTag');
+        const tagNameNode = openTag?.getChild('TagName');
+        if (!openTag || !tagNameNode) {
+          return;
+        }
+        if (text.slice(tagNameNode.from, tagNameNode.to) !== tag) {
+          return;
+        }
+
+        const contentFrom = openTag.to;
+        const contentTo = closeTag?.from ?? node.node.to;
+
+        if (hideDecoration) {
+          ranges.push(hideDecoration.range(openTag.from, openTag.to));
+          if (closeTag) {
+            ranges.push(hideDecoration.range(closeTag.from, closeTag.to));
+          }
+        }
+
+        if (contentDecoration && contentFrom < contentTo) {
+          ranges.push(contentDecoration.range(contentFrom, contentTo));
+        }
+
+        if (lineDecoration && contentFrom <= view.state.doc.length) {
+          // Apply line decoration to every line that intersects the content range.
+          let pos = contentFrom;
+          while (pos <= contentTo && pos <= view.state.doc.length) {
+            const line = view.state.doc.lineAt(pos);
+            ranges.push(lineDecoration.range(line.from));
+            if (line.to >= contentTo) {
+              break;
+            }
+            pos = line.to + 1;
+          }
+        }
+      },
+    });
+    return Decoration.set(ranges, true);
+  };
+
+  return ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet;
+
+      constructor(view: EditorView) {
+        this.decorations = buildDecorations(view);
+      }
+
+      update(update: ViewUpdate) {
+        if (update.docChanged) {
+          this.decorations = buildDecorations(update.view);
+        }
+      }
+    },
+    {
+      decorations: (instance) => instance.decorations,
+    },
+  );
+};

package/src/extensions/tags/xml-formatting.ts

@@ -0,0 +1,125 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { xmlLanguage } from '@codemirror/lang-xml';
+import { type Extension, type Range } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+
+/**
+ * Lezer XML node names that represent the angle-bracket delimited portions of an element.
+ */
+const XML_TAG_NODES = new Set(['OpenTag', 'CloseTag', 'SelfClosingTag', 'MismatchedCloseTag']);
+
+const xmlElementMark = Decoration.mark({ class: 'cm-xml-element' });
+const xmlTagMark = Decoration.mark({ class: 'cm-xml-tag' });
+const xmlContentMark = Decoration.mark({ class: 'cm-xml-content' });
+
+export type XmlFormattingOptions = {
+  /**
+   * Tag names whose elements should NOT receive xmlFormatting decorations. Use to
+   * opt-out tags rendered by another extension (e.g. `xmlBlockDecoration` for `<prompt>`)
+   * so the two don't double-wrap the same content with stacked styling.
+   *
+   * Skipping is recursive: descendants of a skipped element are also untouched, so a
+   * `<foo>` inside a skipped `<prompt>` still appears literally without xmlFormatting
+   * styling.
+   */
+  skip?: string[];
+};
+
+/**
+ * Mark decoration extension that highlights XML tag delimiters
+ * (e.g., `<tag>`, `</tag>`, `<tag attr="x"/>`) with the `cm-xml-tag` class.
+ *
+ * Uses `@codemirror/lang-xml`'s Lezer parser standalone — only to compute
+ * decoration ranges — without changing the editor's primary language. This
+ * keeps the document plain text while still handling nesting and attributes
+ * correctly.
+ */
+export const xmlFormatting = ({ skip }: XmlFormattingOptions = {}): Extension => {
+  const skipSet = skip && skip.length > 0 ? new Set(skip) : undefined;
+
+  const buildDecorations = (view: EditorView): DecorationSet => {
+    const text = view.state.sliceDoc(0, view.state.doc.length);
+    if (!text.includes('<')) {
+      return Decoration.none;
+    }
+
+    const tagNameAt = (node: { from: number; to: number }) => text.slice(node.from, node.to);
+
+    const tree = xmlLanguage.parser.parse(text);
+    const ranges: Range<Decoration>[] = [];
+    tree.iterate({
+      enter: (node) => {
+        const name = node.type.name;
+        if (name === 'SelfClosingTag' && node.from < node.to) {
+          if (skipSet) {
+            const tagNameNode = node.node.getChild('TagName');
+            if (tagNameNode && skipSet.has(tagNameAt(tagNameNode))) {
+              return false;
+            }
+          }
+          // Self-closing tag is its own outer block and tag delimiter.
+          ranges.push(xmlElementMark.range(node.from, node.to));
+          ranges.push(xmlTagMark.range(node.from, node.to));
+          return;
+        }
+        if (XML_TAG_NODES.has(name) && node.from < node.to) {
+          ranges.push(xmlTagMark.range(node.from, node.to));
+          return;
+        }
+        if (name === 'Element' && node.from < node.to) {
+          const openTag = node.node.getChild('OpenTag');
+          if (openTag && skipSet) {
+            const tagNameNode = openTag.getChild('TagName');
+            if (tagNameNode && skipSet.has(tagNameAt(tagNameNode))) {
+              // Skip this element AND its descendants — another extension owns rendering.
+              return false;
+            }
+          }
+          const closeTag = node.node.getChild('CloseTag') ?? node.node.getChild('MismatchedCloseTag');
+          ranges.push(xmlElementMark.range(node.from, node.to));
+          if (openTag && closeTag && openTag.to < closeTag.from) {
+            ranges.push(xmlContentMark.range(openTag.to, closeTag.from));
+          }
+        }
+      },
+    });
+    return Decoration.set(ranges, true);
+  };
+
+  return [
+    ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet;
+
+        constructor(view: EditorView) {
+          this.decorations = buildDecorations(view);
+        }
+
+        update(update: ViewUpdate) {
+          if (update.docChanged) {
+            this.decorations = buildDecorations(update.view);
+          }
+        }
+      },
+      {
+        decorations: (instance) => instance.decorations,
+      },
+    ),
+
+    EditorView.baseTheme({
+      '.cm-xml-element': {
+        backgroundColor: 'var(--color-current-surface)',
+        borderRadius: '0.25rem',
+        padding: '0.25rem',
+      },
+      '.cm-xml-tag': {
+        color: 'var(--color-blue-500)',
+        fontFamily: 'var(--font-mono)',
+      },
+      '.cm-xml-content': {},
+    }),
+  ];
+};

package/src/extensions/tags/xml-tags.ts

@@ -13,7 +13,6 @@ import {
   WidgetType,
   keymap,
 } from '@codemirror/view';
-// TODO(burdon): Factor out agnostic types (React/solid).
 import { type FunctionComponent } from 'react';
 
 import { invariant } from '@dxos/invariant';
@@ -22,7 +21,7 @@ import { Domino } from '@dxos/ui';
 
 import { type Range } from '../../types';
 import { decorationSetToArray } from '../../util';
-import { scrollerLineEffect } from '../scroller';
+import { crawlerLineEffect } from '../scrolling';
 import { nodeToJson } from './xml-util';
 
 /**
@@ -200,17 +199,8 @@ export type XmlTagsOptions = {
 
   /** Called when widgets are mounted or unmounted. */
   setWidgets?: (widgets: XmlWidgetState[]) => void;
-
-  /**
-   * When set, adds top margin on block widget lines that immediately follow a line without
-   * a `data-xml-widget` host (typically narrative text before portaled or status widgets).
-   */
-  paragraphToWidgetGapRem?: number;
 };
 
-/** Marks widget roots used by `paragraphToWidgetGapRem` line spacing in the editor theme. */
-export const XML_WIDGET_DATA_ATTR = 'data-xml-widget';
-
 /**
  * Implements custom XML tags via CodeMirror-native Widgets and portaled React/Solid components.
  *
@@ -221,22 +211,9 @@ export const XML_WIDGET_DATA_ATTR = 'data-xml-widget';
  * - Widget state can be update via effects.
  *   - NOTE: Widget state may be updated BEFORE the widget is mounted.
  */
-export const xmlTags = ({
-  registry,
-  setWidgets,
-  bookmarks,
-  paragraphToWidgetGapRem,
-}: XmlTagsOptions = {}): Extension => {
+export const xmlTags = ({ registry, setWidgets, bookmarks }: XmlTagsOptions = {}): Extension => {
   const notifier = createWidgetMap(setWidgets);
   const widgetDecorationsField = createWidgetDecorationsField(registry, notifier);
-  const paragraphGapTheme =
-    paragraphToWidgetGapRem != null && paragraphToWidgetGapRem > 0
-      ? EditorView.baseTheme({
-          [`& .cm-content > .cm-line:not(:has([${XML_WIDGET_DATA_ATTR}])) + .cm-line:has([${XML_WIDGET_DATA_ATTR}])`]: {
-            marginTop: `${paragraphToWidgetGapRem}rem`,
-          },
-        })
-      : null;
 
   return [
     widgetContextStateField,
@@ -245,7 +222,6 @@ export const xmlTags = ({
     createWidgetUpdatePlugin(widgetDecorationsField, notifier),
     createNavigationEffectPlugin(widgetDecorationsField, bookmarks),
     bookmarks?.length ? Prec.highest(keyHandlers) : [],
-    ...(paragraphGapTheme ? [paragraphGapTheme] : []),
   ];
 };
 
@@ -323,7 +299,7 @@ const createNavigationEffectPlugin = (
           const line = view.state.doc.lineAt(widget?.from ?? 0);
           view.dispatch({
             selection: { anchor: line.from, head: line.from },
-            effects: scrollerLineEffect.of({ line: line.number - 1, offset: -16 }),
+            effects: crawlerLineEffect.of({ line: line.number - 1, offset: -16 }),
           });
 
           continue;
@@ -349,13 +325,13 @@ const createNavigationEffectPlugin = (
             const line = view.state.doc.lineAt(widget?.from);
             view.dispatch({
               selection: { anchor: line.to, head: line.to },
-              effects: scrollerLineEffect.of({ line: line.number - 1, offset: -16 }),
+              effects: crawlerLineEffect.of({ line: line.number - 1, offset: -16 }),
             });
           } else {
             const line = view.state.doc.lineAt(view.state.doc.length);
             view.dispatch({
               selection: { anchor: line.to, head: line.to },
-              effects: scrollerLineEffect.of({ line: line.number - 1, position: 'end' }),
+              effects: crawlerLineEffect.of({ line: line.number - 1, position: 'end' }),
             });
           }
 
@@ -661,9 +637,7 @@ class PlaceholderWidget<TProps extends XmlWidgetProps> extends WidgetType {
   override toDOM(view: EditorView) {
     this.#view = view;
     // NOTE: Set min-height to avoid jumps while scrolling.
-    this.#root = Domino.of('div')
-      .classNames('min-h-[24px]')
-      .attributes({ [XML_WIDGET_DATA_ATTR]: '' }).root;
+    this.#root = Domino.of('div').classNames('min-h-[24px]').root;
     const props = Object.assign({}, this.props, { view }) as TProps;
     this.notifier.mounted({ id: this.id, root: this.#root, props, Component: this.Component });
     return this.#root;

package/src/extensions/tags/xml-util.test.ts

@@ -2,13 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import { syntaxTree } from '@codemirror/language';
+import { ensureSyntaxTree, syntaxTree } from '@codemirror/language';
 import { EditorState } from '@codemirror/state';
 import { describe, test } from 'vitest';
 
 import { trim } from '@dxos/util';
 
 import { extendedMarkdown } from './extended-markdown';
+import TEXT from './testing/text.md?raw';
 import { xmlTags } from './xml-tags';
 import { nodeToJson, type Tag } from './xml-util';
 
@@ -27,16 +28,18 @@ const parseElements = (doc: string, registry: Record<string, any> = {}): ParsedE
     extensions: [extendedMarkdown({ registry }), xmlTags({ registry })],
   });
 
+  const tree = ensureSyntaxTree(state, doc.length, 5000) ?? syntaxTree(state);
   const elements: ParsedElement[] = [];
-  syntaxTree(state).iterate({
+  tree.iterate({
     enter: (node) => {
       if (node.type.name === 'Element') {
         const tag = nodeToJson(state, node.node);
         if (tag) {
           const hasCloseTag = !!node.node.getChild('CloseTag');
+          const hasSelfClose = !!node.node.getChild('SelfClosingTag');
           elements.push({
             ...tag,
-            complete: hasCloseTag,
+            complete: hasCloseTag || hasSelfClose,
           });
         }
         return false;
@@ -117,6 +120,34 @@ describe('nodeToJson', () => {
     expect(elements[0].complete).toBe(true);
   });
 
+  // Regression: when reasoning text contains escaped XML (e.g. `&lt;foo&gt;`), Lezer XML
+  // splits the inline content into Text + EntityReference + Text + EntityReference + Text
+  // siblings. The walker used to skip entity references and push each text segment as a
+  // separate child, so `getXmlTextChild(children)` only saw the prefix before the first
+  // `&lt;` (e.g. ``"The user sent `"``).
+  test('should preserve text containing entity references as a single child', ({ expect }) => {
+    const xml = trim`
+      <reasoning>The user sent \`&lt;foo&gt;\`, which appears to be an XML-like tag.</reasoning>
+    `;
+
+    const registry = { reasoning: { block: true } };
+    const elements = parseElements(xml, registry);
+    expect(elements).toHaveLength(1);
+    expect(elements[0]._tag).toBe('reasoning');
+    expect(elements[0].children).toEqual(['The user sent `<foo>`, which appears to be an XML-like tag.']);
+  });
+
+  test('should decode numeric character references', ({ expect }) => {
+    const xml = trim`
+      <reasoning>arrow &#8594; and hex &#x2192;</reasoning>
+    `;
+
+    const registry = { reasoning: { block: true } };
+    const elements = parseElements(xml, registry);
+    expect(elements).toHaveLength(1);
+    expect(elements[0].children).toEqual(['arrow → and hex →']);
+  });
+
   test('should parse tag with multiple blank lines in content', ({ expect }) => {
     const xml = trim`
       <reasoning>
@@ -133,4 +164,60 @@ describe('nodeToJson', () => {
     expect(elements[0]._tag).toBe('reasoning');
     expect(elements[0].complete).toBe(true);
   });
+
+  // Regression: when an unregistered XML tag like `<prompt>` appears earlier in the doc,
+  // the markdown parser treats it as a paragraph that lazy-continues into subsequent lines,
+  // and a later multi-line tag (e.g. `<reasoning>` whose body contains an ordered list) gets
+  // its HTMLBlock truncated to its first line — losing the closing tag and breaking widget
+  // rendering. Including the surrounding tag in the registry as a block-only entry (no
+  // factory/Component) lets `xmlBlockParsers` keep each tag as its own block.
+  test('multi-line reasoning is complete when preceded by a registered prompt block', ({ expect }) => {
+    const xml = [
+      '<prompt>summarize the posts</prompt>',
+      '<toolCall id="x" />',
+      '<reasoning>multi line content',
+      '1. "First" - desc',
+      '5. "Last" - desc</reasoning>',
+    ].join('\n');
+    const registry = {
+      prompt: { block: true },
+      reasoning: { block: true },
+      toolCall: { block: true },
+    };
+    const elements = parseElements(xml, registry);
+    expect(elements.map((e) => `${e._tag}${e.complete ? '' : '!'}`)).toEqual(['prompt', 'toolCall', 'reasoning']);
+  });
+
+  test('should parse text.md', ({ expect }) => {
+    // Mirror the live ChatThread registry, including `prompt` as a block-only entry so
+    // unregistered-paragraph lazy-continuation does not break later multi-line tags.
+    const registry = {
+      prompt: { block: true },
+      reasoning: { block: true },
+      status: { block: true },
+      toolCall: { block: true },
+      name: { block: true },
+    };
+    const elements = parseElements(TEXT, registry);
+    const tags = elements.map((element) => element._tag);
+    expect(tags).toEqual([
+      'prompt',
+      'reasoning',
+      'status',
+      'toolCall',
+      'toolCall',
+      'reasoning',
+      'status',
+      'toolCall',
+      'reasoning',
+      'prompt',
+      'reasoning',
+      'prompt',
+      'name',
+    ]);
+    // Every element must be `complete` so the widget renderer wraps it. The bug we fixed:
+    // third multi-line `<reasoning>` (lines 9-14) used to be truncated by markdown's
+    // OrderedList parser breaking the HTMLBlock, leaving an Element node with no CloseTag.
+    expect(elements.filter((e) => !e.complete)).toEqual([]);
+  });
 });

package/src/extensions/tags/xml-util.ts

@@ -65,14 +65,25 @@ export const nodeToJson = (state: EditorState, node: SyntaxNode): Tag | undefine
       const children: any[] = [];
       let child = node.node.firstChild;
 
+      const appendText = (raw: string) => {
+        if (raw.length === 0) {
+          return;
+        }
+        const last = children[children.length - 1];
+        if (typeof last === 'string') {
+          children[children.length - 1] = last + raw;
+        } else {
+          children.push(raw);
+        }
+      };
+
       while (child) {
         // Skip the opening and closing tags.
         if (child.type.name !== 'OpenTag' && child.type.name !== 'CloseTag') {
           if (child.type.name === 'Text') {
-            const text = state.doc.sliceString(child.from, child.to).trim();
-            if (text) {
-              children.push(text);
-            }
+            appendText(state.doc.sliceString(child.from, child.to));
+          } else if (child.type.name === 'EntityReference' || child.type.name === 'CharacterReference') {
+            appendText(decodeXmlEntity(state.doc.sliceString(child.from, child.to)));
           } else if (child.type.name === 'Element') {
             const data = nodeToJson(state, child);
             if (data) {
@@ -83,11 +94,57 @@ export const nodeToJson = (state: EditorState, node: SyntaxNode): Tag | undefine
         child = child.nextSibling;
       }
 
+      // Trim only leading/trailing whitespace on the outer-boundary string segments —
+      // interior strings are preserved verbatim so meaningful whitespace around inline
+      // child elements (e.g. `<reasoning>foo <ref/> bar</reasoning>`) is not collapsed.
+      if (children.length > 0 && typeof children[0] === 'string') {
+        children[0] = children[0].trimStart();
+      }
       if (children.length > 0) {
-        tag.children = children;
+        const lastIndex = children.length - 1;
+        const last = children[lastIndex];
+        if (typeof last === 'string') {
+          children[lastIndex] = last.trimEnd();
+        }
+      }
+      const trimmed = children.filter((value) => typeof value !== 'string' || value.length > 0);
+
+      if (trimmed.length > 0) {
+        tag.children = trimmed;
       }
     }
 
     return tag;
   }
 };
+
+/**
+ * Decode the common XML named entities and numeric character references that
+ * Lezer XML produces as `EntityReference` / `CharacterReference` nodes.
+ */
+const XML_NAMED_ENTITIES: Record<string, string> = {
+  '&lt;': '<',
+  '&gt;': '>',
+  '&amp;': '&',
+  '&quot;': '"',
+  '&apos;': "'",
+};
+
+const decodeXmlEntity = (raw: string): string => {
+  const named = XML_NAMED_ENTITIES[raw];
+  if (named !== undefined) {
+    return named;
+  }
+  const numeric = /^&#(x?)([0-9a-fA-F]+);$/.exec(raw);
+  if (numeric) {
+    const code = parseInt(numeric[2], numeric[1] ? 16 : 10);
+    if (Number.isFinite(code)) {
+      try {
+        return String.fromCodePoint(code);
+      } catch {
+        // Fall through and return the raw text on out-of-range code points.
+      }
+    }
+  }
+  return raw;
+};

package/src/index.ts

@@ -10,5 +10,4 @@ export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 
 export * from './defaults';
 export * from './extensions';
-export * from './types';
 export * from './util';

package/src/styles/theme.ts

@@ -108,12 +108,21 @@ export const baseTheme = EditorView.baseTheme({
    * Scroller
    */
   '.cm-scroller': {
-    overflowAnchor: 'none',
+    // Browser scroll-anchoring: see comment in `scrolling/crawler.ts`. `auto` lets the browser pin a
+    // stable element near the viewport top so widget resizes (e.g. tool-block TogglePanel
+    // open/close) don't jump the user's view.
+    overflowAnchor: 'auto',
   },
   '.cm-scroller::-webkit-scrollbar': {
-    width: '8px',
+    width: 'var(--scrollbar-size,8px)',
+    height: 'var(--scrollbar-size,8px)',
+  },
+  '.cm-scroller::-webkit-scrollbar-corner': {
+    background: 'transparent',
+  },
+  '.cm-scroller::-webkit-scrollbar-track': {
+    background: 'transparent',
   },
-  '.cm-scroller::-webkit-scrollbar-track': {},
   '.cm-scroller::-webkit-scrollbar-thumb': {
     background: 'transparent',
     transition: 'background 0.15s',
@@ -152,7 +161,7 @@ export const baseTheme = EditorView.baseTheme({
    * Height is set to match the corresponding line (which may have wrapped).
    */
   '.cm-gutterElement': {
-    lineHeight: 1.5,
+    lineHeight: '24px',
     fontSize: '12px',
   },
 
@@ -218,6 +227,7 @@ export const baseTheme = EditorView.baseTheme({
     textDecorationColor: 'var(--color-separator)',
     textUnderlineOffset: '2px',
     borderRadius: '.125rem',
+    cursor: 'pointer',
   },
   '.cm-link > span': {
     color: 'var(--color-accent-text)',
@@ -257,12 +267,12 @@ export const baseTheme = EditorView.baseTheme({
     padding: '4px',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {
-    background: 'var(--color-active-surface)',
-    color: 'var(--color-base-surface-text)',
+    background: 'var(--color-current-surface)',
+    color: 'var(--color-base-fg)',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section': {
     paddingLeft: '4px !important',
-    color: 'var(--color-base-surface-text)',
+    color: 'var(--color-base-fg)',
   },
 
   /**
@@ -282,7 +292,7 @@ export const baseTheme = EditorView.baseTheme({
     padding: '0 4px',
   },
   '.cm-completionMatchedText': {
-    color: 'var(--color-base-surface-text)',
+    color: 'var(--color-base-fg)',
     textDecoration: 'none !important',
   },
 
@@ -318,7 +328,7 @@ export const baseTheme = EditorView.baseTheme({
     backgroundColor: 'var(--color-input-surface)',
   },
   '.cm-panel input:focus, .cm-panel button:focus': {
-    outline: '1px solid var(--color-neutral-focus-indicator)',
+    outline: '1px solid var(--color-focus-ring-subtle)',
   },
   '.cm-panel label': {
     display: 'inline-flex',
@@ -331,15 +341,15 @@ export const baseTheme = EditorView.baseTheme({
     height: '8px',
     marginRight: '6px !important',
     padding: '2px !important',
-    color: 'var(--color-neutral-focus-indicator)',
+    color: 'var(--color-focus-ring-subtle)',
   },
   '.cm-panel button': {
     '&:hover': {
-      // TODO(burdon): Replace with layer and @apply bg-accent-surface-hover
-      backgroundColor: 'var(--color-accent-surface-hover) !important',
+      // TODO(burdon): Replace with layer and @apply bg-accent-bg-hover
+      backgroundColor: 'var(--color-accent-bg-hover) !important',
     },
     '&:active': {
-      backgroundColor: 'var(--color-accent-surface-hover)',
+      backgroundColor: 'var(--color-accent-bg-hover)',
     },
   },
   '.cm-panel.cm-search': {

package/src/typings.d.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+declare module '*.md?raw' {
+  const content: string;
+  export default content;
+}