@dxos/ui-editor 0.8.4-main.dfabb4ec29 → 0.8.4-main.f466a3d56e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/ui-editor",
-  "version": "0.8.4-main.dfabb4ec29",
+  "version": "0.8.4-main.f466a3d56e",
   "description": "Text editor components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": false,
   "type": "module",
@@ -62,27 +62,27 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.4-main.dfabb4ec29",
-    "@dxos/async": "0.8.4-main.dfabb4ec29",
-    "@dxos/client": "0.8.4-main.dfabb4ec29",
-    "@dxos/context": "0.8.4-main.dfabb4ec29",
-    "@dxos/display-name": "0.8.4-main.dfabb4ec29",
-    "@dxos/echo": "0.8.4-main.dfabb4ec29",
-    "@dxos/debug": "0.8.4-main.dfabb4ec29",
-    "@dxos/lit-ui": "0.8.4-main.dfabb4ec29",
-    "@dxos/echo-db": "0.8.4-main.dfabb4ec29",
-    "@dxos/invariant": "0.8.4-main.dfabb4ec29",
-    "@dxos/log": "0.8.4-main.dfabb4ec29",
-    "@dxos/protocols": "0.8.4-main.dfabb4ec29",
-    "@dxos/ui": "0.8.4-main.dfabb4ec29",
-    "@dxos/ui-types": "0.8.4-main.dfabb4ec29",
-    "@dxos/util": "0.8.4-main.dfabb4ec29",
-    "@dxos/ui-theme": "0.8.4-main.dfabb4ec29"
+    "@dxos/app-graph": "0.8.4-main.f466a3d56e",
+    "@dxos/debug": "0.8.4-main.f466a3d56e",
+    "@dxos/async": "0.8.4-main.f466a3d56e",
+    "@dxos/client": "0.8.4-main.f466a3d56e",
+    "@dxos/display-name": "0.8.4-main.f466a3d56e",
+    "@dxos/context": "0.8.4-main.f466a3d56e",
+    "@dxos/echo-db": "0.8.4-main.f466a3d56e",
+    "@dxos/invariant": "0.8.4-main.f466a3d56e",
+    "@dxos/log": "0.8.4-main.f466a3d56e",
+    "@dxos/echo": "0.8.4-main.f466a3d56e",
+    "@dxos/lit-ui": "0.8.4-main.f466a3d56e",
+    "@dxos/protocols": "0.8.4-main.f466a3d56e",
+    "@dxos/ui-theme": "0.8.4-main.f466a3d56e",
+    "@dxos/ui-types": "0.8.4-main.f466a3d56e",
+    "@dxos/ui": "0.8.4-main.f466a3d56e",
+    "@dxos/util": "0.8.4-main.f466a3d56e"
   },
   "devDependencies": {
     "@automerge/automerge": "3.2.6",
-    "@automerge/automerge-repo": "2.6.0-subduction.17",
-    "@automerge/automerge-repo-network-broadcastchannel": "2.6.0-subduction.17",
+    "@automerge/automerge-repo": "2.6.0-subduction.20",
+    "@automerge/automerge-repo-network-broadcastchannel": "2.6.0-subduction.20",
     "@effect/platform": "0.94.4",
     "@types/chai": "^4.2.15",
     "@types/chai-dom": "^1.11.0",
@@ -95,21 +95,21 @@
     "happy-dom": "^20.0.0",
     "jsdom": "^27.0.0",
     "mocha": "^10.6.0",
-    "vite": "^8.0.10",
+    "vite": "^8.0.13",
     "vite-plugin-top-level-await": "^1.6.0",
     "vite-plugin-wasm": "^3.6.0",
-    "@dxos/config": "0.8.4-main.dfabb4ec29",
-    "@dxos/echo": "0.8.4-main.dfabb4ec29",
-    "@dxos/random": "0.8.4-main.dfabb4ec29",
-    "@dxos/schema": "0.8.4-main.dfabb4ec29",
-    "@dxos/keyboard": "0.8.4-main.dfabb4ec29",
-    "@dxos/ui-theme": "0.8.4-main.dfabb4ec29",
-    "@dxos/storybook-utils": "0.8.4-main.dfabb4ec29"
+    "@dxos/config": "0.8.4-main.f466a3d56e",
+    "@dxos/echo": "0.8.4-main.f466a3d56e",
+    "@dxos/keyboard": "0.8.4-main.f466a3d56e",
+    "@dxos/random": "0.8.4-main.f466a3d56e",
+    "@dxos/schema": "0.8.4-main.f466a3d56e",
+    "@dxos/storybook-utils": "0.8.4-main.f466a3d56e",
+    "@dxos/ui-theme": "0.8.4-main.f466a3d56e"
   },
   "peerDependencies": {
     "@effect/platform": "0.94.4",
     "effect": "3.20.0",
-    "@dxos/ui-theme": "0.8.4-main.dfabb4ec29"
+    "@dxos/ui-theme": "0.8.4-main.f466a3d56e"
   },
   "publishConfig": {
     "access": "public"

package/src/extensions/factories.ts

@@ -33,7 +33,7 @@ import { baseTheme, createFontTheme, editorGutter } from '../styles';
 import { automerge } from './automerge';
 import { SpaceAwarenessProvider, awareness } from './awareness';
 import { focus } from './focus';
-import { scrollPastEnd } from './scroll-past-end';
+import { scrollPastEnd } from './scrolling';
 
 //
 // Basic

package/src/extensions/index.ts

@@ -4,7 +4,6 @@
 
 export * from './annotations';
 export * from './autocomplete';
-export * from './auto-scroll';
 export * from './automerge';
 export * from './awareness';
 export * from './blast';
@@ -26,8 +25,7 @@ export * from './modes';
 export * from './outliner';
 export * from './preview';
 export * from './replacer';
-export * from './scroll-past-end';
-export * from './scroller';
+export * from './scrolling';
 export * from './selection';
 export * from './snippets';
 export * from './state';

package/src/extensions/outliner/outliner.ts

@@ -156,7 +156,7 @@ const decorations = () => [
       },
 
       '.cm-list-item-focused': {
-        borderColor: 'var(--color-neutral-focus-indicator)',
+        borderColor: 'var(--color-focus-ring-subtle)',
       },
       '&:focus-within .cm-list-item-selected': {
         borderColor: 'var(--color-separator)',

package/src/extensions/{auto-scroll.ts → scrolling/auto-scroll.ts}

@@ -9,7 +9,7 @@ import { addEventListener, combine, throttle } from '@dxos/async';
 import { Domino } from '@dxos/ui';
 import { getSize } from '@dxos/ui-theme';
 
-import { scrollerCrawlEffect, scrollerLineEffect } from './scroller';
+import { crawlerActiveEffect, crawlerLineEffect } from './crawler';
 
 /** Enable or disable autoscroll. */
 export const autoScrollEffect = StateEffect.define<boolean>();
@@ -54,11 +54,11 @@ export const autoScroll = ({ scrollOnResize = true }: AutoScrollProps = {}) => {
             if (enabled) {
               setPinned(true);
               view.dispatch({
-                effects: scrollerCrawlEffect.of(true),
+                effects: crawlerActiveEffect.of(true),
               });
             } else {
               view.dispatch({
-                effects: scrollerCrawlEffect.of(false),
+                effects: crawlerActiveEffect.of(false),
               });
             }
           }
@@ -96,7 +96,7 @@ export const autoScroll = ({ scrollOnResize = true }: AutoScrollProps = {}) => {
           const delta = scrollHeight - scrollTop - clientHeight;
           if (delta > 0) {
             setPinned(true);
-            view.dispatch({ effects: scrollerCrawlEffect.of(true) });
+            view.dispatch({ effects: crawlerActiveEffect.of(true) });
           } else if (delta < -1) {
             setPinned(false);
           }
@@ -133,7 +133,7 @@ export const autoScroll = ({ scrollOnResize = true }: AutoScrollProps = {}) => {
                   }
 
                   view.scrollDOM.scrollTo({ top: view.scrollDOM.scrollHeight, behavior: 'instant' });
-                  view.dispatch({ effects: scrollerCrawlEffect.of(false) });
+                  view.dispatch({ effects: crawlerActiveEffect.of(false) });
                 });
               }, 50);
 
@@ -161,20 +161,30 @@ export const autoScroll = ({ scrollOnResize = true }: AutoScrollProps = {}) => {
       class {
         private readonly cleanup: () => void;
         constructor(view: EditorView) {
-          this.cleanup = createUserScrollDetector(
-            view.scrollDOM,
-            throttle(() => {
-              requestAnimationFrame(() => {
-                const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
-                const delta = scrollHeight - scrollTop - clientHeight;
-                const pinned = delta === 0;
-                setPinned(pinned);
-                if (!pinned) {
-                  view.dispatch({ effects: scrollerCrawlEffect.of(false) });
-                }
-              });
-            }, 500),
-          );
+          // Re-pin check is throttled so the listener doesn't thrash while scrolling, but
+          // unpinning must be immediate — otherwise content arriving during the throttle
+          // window re-applies the crawl effect and yanks the viewport back to the bottom.
+          const onUserScroll = throttle(() => {
+            requestAnimationFrame(() => {
+              const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
+              const delta = scrollHeight - scrollTop - clientHeight;
+              // Sub-pixel tolerance: fractional scroll positions can leave delta at e.g. 0.5
+              // even when the user is visually at the bottom.
+              const pinned = Math.abs(delta) <= 1;
+              setPinned(pinned);
+              if (!pinned) {
+                view.dispatch({ effects: crawlerActiveEffect.of(false) });
+              }
+            });
+          }, 500);
+
+          this.cleanup = createUserScrollDetector(view.scrollDOM, () => {
+            if (isPinned) {
+              setPinned(false);
+              view.dispatch({ effects: crawlerActiveEffect.of(false) });
+            }
+            onUserScroll();
+          });
         }
         destroy() {
           this.cleanup();
@@ -196,7 +206,7 @@ export const autoScroll = ({ scrollOnResize = true }: AutoScrollProps = {}) => {
             .on('click', () => {
               setPinned(true);
               view.dispatch({
-                effects: scrollerLineEffect.of({ line: -1, position: 'end', behavior: 'smooth' }),
+                effects: crawlerLineEffect.of({ line: -1, position: 'end', behavior: 'smooth' }),
               });
             });
 

package/src/extensions/{scroller.ts → scrolling/crawler.ts}

@@ -40,10 +40,10 @@ export type ScrollToProps = {
 };
 
 /** Scroll to a specific line. */
-export const scrollerLineEffect = StateEffect.define<ScrollToProps>();
+export const crawlerLineEffect = StateEffect.define<ScrollToProps>();
 
 /** Start/stop crawling the end of the document. */
-export const scrollerCrawlEffect = StateEffect.define<boolean>();
+export const crawlerActiveEffect = StateEffect.define<boolean>();
 
 /**
  * Helper function to scroll to a specific line.
@@ -51,22 +51,29 @@ export const scrollerCrawlEffect = StateEffect.define<boolean>();
  */
 export const scrollToLine = (view: EditorView, options: ScrollToProps) => {
   view.dispatch({
-    effects: scrollerLineEffect.of(options),
+    effects: crawlerLineEffect.of(options),
   });
 };
 
-export type ScrollerOptions = {
+export type CrawlerOptions = {
   /** Threshold in px to trigger scroll from bottom. */
   overScroll?: number;
 };
 
 /**
- * Extension that provides smooth scrolling to specific lines in the editor.
+ * Imperative scroll-control primitive for streaming editor views.
+ *
+ * Owns the scroll-related effects (`crawlerLineEffect`, `crawlerActiveEffect`), the spring
+ * crawler that follows the bottom of the document, and the `.cm-scroller` theme (overflow,
+ * scrollbar styling, and the `::after` overscroll spacer).
+ *
+ * Use directly for jump-to-line navigation, or pair with `autoScroll` for a pin-to-bottom
+ * streaming policy. The composite `streamScroll` bundles both for the common case.
  */
-export const scroller = ({ overScroll = 0 }: ScrollerOptions = {}) => {
+export const crawler = ({ overScroll = 0 }: CrawlerOptions = {}) => {
   // ViewPlugin to manage scroll animations.
-  const scrollPlugin = ViewPlugin.fromClass(
-    class ScrollerPlugin {
+  const crawlerPlugin = ViewPlugin.fromClass(
+    class CrawlerPlugin {
       private readonly crawler: ReturnType<typeof createCrawler>;
       constructor(private readonly view: EditorView) {
         this.crawler = createCrawler(this.view);
@@ -126,18 +133,18 @@ export const scroller = ({ overScroll = 0 }: ScrollerOptions = {}) => {
   );
 
   return [
-    scrollPlugin,
+    crawlerPlugin,
 
     // Listen for effect.
     EditorView.updateListener.of((update) => {
       update.transactions.forEach((transaction) => {
         try {
-          const plugin = update.view.plugin(scrollPlugin);
+          const plugin = update.view.plugin(crawlerPlugin);
           if (plugin) {
             for (const effect of transaction.effects) {
-              if (effect.is(scrollerCrawlEffect)) {
+              if (effect.is(crawlerActiveEffect)) {
                 plugin.crawl(effect.value);
-              } else if (effect.is(scrollerLineEffect)) {
+              } else if (effect.is(crawlerLineEffect)) {
                 plugin.scroll(effect.value);
               }
             }

package/src/extensions/scrolling/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './auto-scroll';
+export * from './crawler';
+export * from './scroll-past-end';
+export * from './scroller';

package/src/extensions/{scroll-past-end.ts → scrolling/scroll-past-end.ts}

@@ -12,15 +12,15 @@ import { EditorView, ViewPlugin } from '@codemirror/view';
  */
 const scrollPastEndPlugin = ViewPlugin.fromClass(
   class {
-    height = 1000;
-    attrs: { style: string } | null = { style: 'padding-bottom: 1000px' };
+    _height = 1_000;
+    _attrs: { style: string } | null = { style: `padding-bottom: ${this._height}px` };
 
     update({ view }: { view: EditorView }) {
       const lastLineBlock = view.lineBlockAt(view.state.doc.length);
       const height = view.dom.clientHeight - lastLineBlock.height - view.documentPadding.top - 0.5;
-      if (height >= 0 && height !== this.height) {
-        this.height = height;
-        this.attrs = { style: `padding-bottom: ${height}px` };
+      if (height >= 0 && height !== this._height) {
+        this._height = height;
+        this._attrs = { style: `padding-bottom: ${height}px` };
       }
     }
   },
@@ -28,5 +28,5 @@ const scrollPastEndPlugin = ViewPlugin.fromClass(
 
 export const scrollPastEnd = (): Extension => [
   scrollPastEndPlugin,
-  EditorView.contentAttributes.of((view) => view.plugin(scrollPastEndPlugin)?.attrs ?? null),
+  EditorView.contentAttributes.of((view) => view.plugin(scrollPastEndPlugin)?._attrs ?? null),
 ];

package/src/extensions/scrolling/scroller.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+
+import { isTruthy } from '@dxos/util';
+
+import { type AutoScrollProps, autoScroll as autoScrollExtension } from './auto-scroll';
+import { type CrawlerOptions, crawler } from './crawler';
+
+export type ScrollerOptions = CrawlerOptions &
+  AutoScrollProps & {
+    /**
+     * Include the auto-scroll policy (pin-to-bottom, user-scroll unpin, scroll-to-bottom button).
+     * Set to `false` to get only the crawler primitive (line jumps, theme, overscroll spacer).
+     * @default true
+     */
+    autoScroll?: boolean;
+  };
+
+/**
+ * Composite scroll extension for streaming editor views (chat threads, transcripts, logs).
+ */
+export const scroller = ({ overScroll, scrollOnResize, autoScroll = true }: ScrollerOptions = {}): Extension[] => {
+  return [crawler({ overScroll }), autoScroll && autoScrollExtension({ scrollOnResize })].filter(isTruthy);
+};

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

@@ -111,7 +111,7 @@ export const xmlFormatting = ({ skip }: XmlFormattingOptions = {}): Extension =>
 
     EditorView.baseTheme({
       '.cm-xml-element': {
-        backgroundColor: 'var(--color-active-surface)',
+        backgroundColor: 'var(--color-current-surface)',
         borderRadius: '0.25rem',
         padding: '0.25rem',
       },

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

@@ -21,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';
 
 /**
@@ -299,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;
@@ -325,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' }),
             });
           }
 

package/src/styles/theme.ts

@@ -108,7 +108,7 @@ export const baseTheme = EditorView.baseTheme({
    * Scroller
    */
   '.cm-scroller': {
-    // Browser scroll-anchoring: see comment in `scroller.ts`. `auto` lets the browser pin a
+    // 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',
@@ -227,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)',
@@ -266,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-foreground)',
   },
   '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section': {
     paddingLeft: '4px !important',
-    color: 'var(--color-base-surface-text)',
+    color: 'var(--color-base-foreground)',
   },
 
   /**
@@ -291,7 +292,7 @@ export const baseTheme = EditorView.baseTheme({
     padding: '0 4px',
   },
   '.cm-completionMatchedText': {
-    color: 'var(--color-base-surface-text)',
+    color: 'var(--color-base-foreground)',
     textDecoration: 'none !important',
   },
 
@@ -327,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',
@@ -340,7 +341,7 @@ 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': {

package/dist/types/src/extensions/auto-scroll.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"auto-scroll.d.ts","sourceRoot":"","sources":["../../../../src/extensions/auto-scroll.ts"],"names":[],"mappings":"AAaA,oCAAoC;AACpC,eAAO,MAAM,gBAAgB,sDAAgC,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,wBAA+B,eAAe,4CAoLpE,CAAC"}

package/dist/types/src/extensions/scroll-past-end.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"scroll-past-end.d.ts","sourceRoot":"","sources":["../../../../src/extensions/scroll-past-end.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAwBnD,eAAO,MAAM,aAAa,QAAO,SAGhC,CAAC"}

package/dist/types/src/extensions/scroller.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"scroller.d.ts","sourceRoot":"","sources":["../../../../src/extensions/scroller.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAc,MAAM,kBAAkB,CAAC;AAI1D;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,iCAAiC;AACjC,eAAO,MAAM,kBAAkB,4DAAsC,CAAC;AAEtE,mDAAmD;AACnD,eAAO,MAAM,mBAAmB,sDAAgC,CAAC;AAEjE;;;GAGG;AACH,eAAO,MAAM,YAAY,SAAU,UAAU,WAAW,aAAa,SAIpE,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,oBAAwB,eAAe,4CA0H3D,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,SAAI,EAAE,aAAa,SAAI,EAAE,YAAY,SAAK;IAiC3F,MAAM;IAON,MAAM;EAST"}