@dxos/react-ui-editor 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/src/extensions/markdown/decorate.ts

@@ -15,7 +15,6 @@ import { image } from './image';
 import { formattingStyles, bulletListIndentationWidth, orderedListIndentationWidth } from './styles';
 import { table } from './table';
 import { theme, type HeadingLevel } from '../../styles';
-import { type RenderCallback } from '../../types';
 import { wrapWithCatch } from '../../util';
 
 /**
@@ -46,7 +45,7 @@ class HorizontalRuleWidget extends WidgetType {
 class LinkButton extends WidgetType {
   constructor(
     private readonly url: string,
-    private readonly render: RenderCallback<{ url: string }>,
+    private readonly render: (el: HTMLElement, url: string) => void,
   ) {
     super();
   }
@@ -58,7 +57,7 @@ class LinkButton extends WidgetType {
   // TODO(burdon): Create icon and link directly without react?
   override toDOM(view: EditorView) {
     const el = document.createElement('span');
-    this.render(el, { url: this.url }, view);
+    this.render(el, this.url);
     return el;
   }
 }
@@ -129,10 +128,10 @@ class TextWidget extends WidgetType {
 }
 
 const hide = Decoration.replace({});
-const blockQuote = Decoration.line({ class: 'cm-blockquote' });
-const fencedCodeLine = Decoration.line({ class: 'cm-code cm-codeblock-line' });
-const fencedCodeLineFirst = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-start') });
-const fencedCodeLineLast = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-end') });
+const blockQuote = Decoration.line({ class: mx('cm-blockquote') });
+const fencedCodeLine = Decoration.line({ class: mx('cm-code cm-codeblock-line') });
+const fencedCodeLineFirst = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-first') });
+const fencedCodeLineLast = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-last') });
 const commentBlockLine = fencedCodeLine;
 const commentBlockLineFirst = fencedCodeLineFirst;
 const commentBlockLineLast = fencedCodeLineLast;
@@ -277,7 +276,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         // Set indentation.
         const list = getCurrentListLevel();
         const width = list.type === 'OrderedList' ? orderedListIndentationWidth : bulletListIndentationWidth;
-        const offset = (options?.listPaddingLeft ?? 0) + ((list.level ?? 0) + 1) * width;
+        const offset = ((list.level ?? 0) + 1) * width;
         if (node.from === line.to - 1) {
           // Abort if only the hyphen is typed.
           return false;
@@ -285,6 +284,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
 
         // Add line decoration for the continuation indent.
         // TODO(burdon): Bug if indentation is more than one indentation unit (e.g., 4 spaces) from the previous line.
+
         deco.add(
           line.from,
           line.from,
@@ -405,7 +405,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
           }
 
           const first = block.from <= node.from;
-          const last = block.to >= node.to && /```$/.test(state.doc.sliceString(block.from, block.to));
+          const last = block.to >= node.to && /^(\s>)*```$/.test(state.doc.sliceString(block.from, block.to));
           deco.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
 
           const editing = editingRange(state, node, focus);
@@ -519,9 +519,7 @@ export interface DecorateOptions {
    */
   selectionChangeDelay?: number;
   numberedHeadings?: { from: number; to?: number };
-  renderLinkButton?: RenderCallback<{ url: string }>;
-  // TODO(burdon): Additional padding for each line.
-  listPaddingLeft?: number;
+  renderLinkButton?: (el: Element, url: string) => void;
 }
 
 export const decorateMarkdown = (options: DecorateOptions = {}) => {

package/src/extensions/markdown/formatting.ts

@@ -5,19 +5,19 @@
 import { snippet } from '@codemirror/autocomplete';
 import { syntaxTree } from '@codemirror/language';
 import {
-  type ChangeSpec,
-  EditorSelection,
   type Extension,
-  type EditorState,
-  type Line,
   type StateCommand,
+  type EditorState,
+  type ChangeSpec,
   type Text,
+  EditorSelection,
+  type Line,
 } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';
 import { useMemo } from 'react';
 
-import { type Live } from '@dxos/live-object';
+import { type ReactiveObject } from '@dxos/live-object';
 
 import { type EditorToolbarState } from '../../components';
 
@@ -1250,7 +1250,7 @@ export const getFormatting = (state: EditorState): Formatting => {
 /**
  * Hook provides an extension to compute the current formatting state.
  */
-export const useFormattingState = (state: Live<EditorToolbarState>): Extension => {
+export const useFormattingState = (state: ReactiveObject<EditorToolbarState>): Extension => {
   return useMemo(
     () =>
       EditorView.updateListener.of((update) => {

package/src/extensions/markdown/image.ts

@@ -51,6 +51,16 @@ export const image = (_options: ImageOptions = {}): Extension => {
   ];
 };
 
+const preloaded = new Set<string>();
+
+const preloadImage = (url: string) => {
+  if (!preloaded.has(url)) {
+    const img = document.createElement('img');
+    img.src = url;
+    preloaded.add(url);
+  }
+};
+
 const buildDecorations = (from: number, to: number, state: EditorState) => {
   const decorations: Range<Decoration>[] = [];
   const cursor = state.selection.main.head;
@@ -84,23 +94,13 @@ const buildDecorations = (from: number, to: number, state: EditorState) => {
   return decorations;
 };
 
-const preloaded = new Set<string>();
-
-const preloadImage = (url: string) => {
-  if (!preloaded.has(url)) {
-    const img = document.createElement('img');
-    img.src = url;
-    preloaded.add(url);
-  }
-};
-
 class ImageWidget extends WidgetType {
   constructor(readonly _url: string) {
     super();
   }
 
   override eq(other: this) {
-    return this._url === other._url;
+    return this._url === (other as any as ImageWidget)._url;
   }
 
   override toDOM(view: EditorView) {
@@ -113,7 +113,6 @@ class ImageWidget extends WidgetType {
     } else {
       img.classList.add('cm-loaded-image');
     }
-
     return img;
   }
 }

package/src/extensions/markdown/index.ts

@@ -10,5 +10,4 @@ export * from './formatting';
 export * from './highlight';
 export * from './image';
 export * from './link';
-export * from './outliner';
 export * from './table';

package/src/extensions/markdown/link.ts

@@ -9,39 +9,30 @@ import { type SyntaxNode } from '@lezer/common';
 
 import { tooltipContent } from '@dxos/react-ui-theme';
 
-import { type RenderCallback } from '../../types';
+export const linkTooltip = (render: (el: HTMLElement, url: string) => void) => {
+  return hoverTooltip((view, pos, side) => {
+    const syntax = syntaxTree(view.state).resolveInner(pos, side);
+    let link = null;
+    for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
+      link = node.name === 'Link' ? node : null;
+    }
 
-export const linkTooltip = (renderTooltip: RenderCallback<{ url: string }>) => {
-  return hoverTooltip(
-    (view, pos, side) => {
-      const syntax = syntaxTree(view.state).resolveInner(pos, side);
-      let link = null;
-      for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
-        link = node.name === 'Link' ? node : null;
-      }
+    const url = link && link.getChild('URL');
+    if (!url || !link) {
+      return null;
+    }
 
-      const url = link && link.getChild('URL');
-      if (!url || !link) {
-        return null;
-      }
-
-      const urlText = view.state.sliceDoc(url.from, url.to);
-      return {
-        pos: link.from,
-        end: link.to,
-        // NOTE: Forcing above causes the tooltip to flicker.
-        // above: true,
-        create: () => {
-          const el = document.createElement('div');
-          el.className = tooltipContent({});
-          renderTooltip(el, { url: urlText }, view);
-          return { dom: el, offset: { x: 0, y: 4 } };
-        },
-      };
-    },
-    {
-      // NOTE: 0 = default of 300ms.
-      hoverTime: 1,
-    },
-  );
+    const urlText = view.state.sliceDoc(url.from, url.to);
+    return {
+      pos: link.from,
+      end: link.to,
+      above: true,
+      create: () => {
+        const el = document.createElement('div');
+        el.className = tooltipContent({}, 'pli-2 plb-1');
+        render(el, urlText);
+        return { dom: el, offset: { x: 0, y: 4 } };
+      },
+    };
+  });
 };

package/src/extensions/markdown/styles.ts

@@ -59,11 +59,11 @@ export const formattingStyles = EditorView.theme({
     background: 'var(--dx-cmCodeblock)',
     paddingInline: '1rem !important',
   },
-  '& .cm-codeblock-start': {
+  '& .cm-codeblock-first': {
     borderTopLeftRadius: '.25rem',
     borderTopRightRadius: '.25rem',
   },
-  '& .cm-codeblock-end': {
+  '& .cm-codeblock-last': {
     borderBottomLeftRadius: '.25rem',
     borderBottomRightRadius: '.25rem',
   },

package/src/extensions/modes.ts

@@ -6,17 +6,18 @@ import { type Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 import { vim } from '@replit/codemirror-vim';
 import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
-import { Schema } from 'effect';
+
+import { S } from '@dxos/echo-schema';
 
 import { singleValueFacet } from '../util';
 
 export const EditorViewModes = ['preview', 'readonly', 'source'] as const;
-export const EditorViewMode = Schema.Union(...EditorViewModes.map((mode) => Schema.Literal(mode)));
-export type EditorViewMode = Schema.Schema.Type<typeof EditorViewMode>;
+export const EditorViewMode = S.Union(...EditorViewModes.map((mode) => S.Literal(mode)));
+export type EditorViewMode = S.Schema.Type<typeof EditorViewMode>;
 
 export const EditorInputModes = ['default', 'vim', 'vscode'] as const;
-export const EditorInputMode = Schema.Union(...EditorInputModes.map((mode) => Schema.Literal(mode)));
-export type EditorInputMode = Schema.Schema.Type<typeof EditorInputMode>;
+export const EditorInputMode = S.Union(...EditorInputModes.map((mode) => S.Literal(mode)));
+export type EditorInputMode = S.Schema.Type<typeof EditorInputMode>;
 
 export type EditorInputConfig = {
   type?: string;

package/src/fragments.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { mx } from '@dxos/react-ui-theme';
+
+// TODO(burdon): Move this to a common plugin.
+
+export const stackItemContentEditorClassNames = (role?: string) =>
+  mx(
+    'attention-surface dx-focus-ring-inset data-[toolbar=disabled]:pbs-2',
+    role === 'section' ? '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24' : 'min-bs-0',
+  );
+
+export const stackItemContentToolbarClassNames = (role?: string) =>
+  mx(
+    'attention-surface is-full border-be !border-separator',
+    role === 'section' && 'sticky block-start-0 z-[1] -mbe-px min-is-0',
+  );

package/src/hooks/index.ts

@@ -2,4 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './useActionHandler';
 export * from './useTextEditor';

package/src/hooks/useActionHandler.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import { useCallback } from 'react';
+
+import { type EditorAction, processEditorPayload } from '../extensions';
+
+export const useActionHandler = (view?: EditorView | null) => {
+  return useCallback((action: EditorAction) => view && processEditorPayload(view, action.properties), [view]);
+};

package/src/hooks/useTextEditor.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { EditorState, type EditorStateConfig, type Text } from '@codemirror/state';
+import { EditorState, type EditorStateConfig } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { useFocusableGroup, type TabsterTypes } from '@fluentui/react-tabster';
 import {
@@ -43,7 +43,6 @@ export type CursorInfo = {
 
 export type UseTextEditorProps = Pick<EditorStateConfig, 'extensions'> & {
   id?: string;
-  doc?: Text;
   initialValue?: string;
   className?: string;
   autoFocus?: boolean;
@@ -62,7 +61,7 @@ export const useTextEditor = (
   props: MaybeProvider<UseTextEditorProps> = {},
   deps: DependencyList = [],
 ): UseTextEditor => {
-  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } =
+  const { id, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } =
     useMemo<UseTextEditorProps>(() => getProviderValue(props), deps ?? []);
 
   // NOTE: Increments by 2 in strict mode.
@@ -88,7 +87,7 @@ export const useTextEditor = (
 
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
       const state = EditorState.create({
-        doc: doc ?? initialValue,
+        doc: initialValue,
         // selection: initialSelection,
         extensions: [
           id && documentId.of(id),

package/src/styles/theme.ts

@@ -119,9 +119,6 @@ export const defaultTheme: ThemeStyles = {
   '.cm-selectionBackground': {
     background: 'var(--dx-cmSelection)',
   },
-  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
-    background: 'var(--dx-cmFocusedSelection)',
-  },
 
   /**
    * Search.

package/src/types.ts

@@ -2,8 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
-
 // Runtime data structure.
 export type Range = {
   from: number;
@@ -16,8 +14,3 @@ export type Comment = {
   id: string;
   cursor?: string;
 };
-
-/**
- * Callback that renders into a DOM element within the editor.
- */
-export type RenderCallback<Props extends object> = (el: HTMLElement, props: Props, view: EditorView) => void;

package/src/util/react.tsx

@@ -2,14 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type FC, type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { ThemeProvider, Tooltip } from '@dxos/react-ui';
+import { ThemeProvider } from '@dxos/react-ui';
 import { defaultTx } from '@dxos/react-ui-theme';
 
-import { type RenderCallback } from '../types';
-
 // TODO(burdon): Factor out.
 
 export type ElementOptions = {
@@ -34,19 +32,3 @@ export const renderRoot = <T extends Element>(root: T, node: ReactNode): T => {
   createRoot(root).render(<ThemeProvider tx={defaultTx}>{node}</ThemeProvider>);
   return root;
 };
-
-/**
- * Utility to create a renderer for a React component.
- */
-export const createRenderer =
-  <Props extends object>(Component: FC<Props>): RenderCallback<Props> =>
-  (el, props) => {
-    renderRoot(
-      el,
-      <ThemeProvider tx={defaultTx}>
-        <Tooltip.Provider>
-          <Component {...props} />
-        </Tooltip.Provider>
-      </ThemeProvider>,
-    );
-  };

package/dist/lib/browser/testing/index.mjs

@@ -1,67 +0,0 @@
-// packages/ui/react-ui-editor/src/testing/RefPopover.tsx
-import { createContext } from "@radix-ui/react-context";
-import React, { useRef, useState, useEffect, useCallback } from "react";
-import { addEventListener } from "@dxos/async";
-import { Popover } from "@dxos/react-ui";
-var customEventOptions = {
-  capture: true,
-  passive: false
-};
-var REF_POPOVER = "RefPopover";
-var [RefPopoverContextProvider, useRefPopover] = createContext(REF_POPOVER, {});
-var RefPopoverProvider = ({ children, onLookup }) => {
-  const trigger = useRef(null);
-  const [value, setValue] = useState({});
-  const [rootRef, setRootRef] = useState(null);
-  const [open, setOpen] = useState(false);
-  const handleDxRefTagActivate = useCallback((event) => {
-    const { ref, label, trigger: dxTrigger } = event;
-    setValue((value2) => ({
-      ...value2,
-      link: {
-        label,
-        ref
-      },
-      pending: true
-    }));
-    trigger.current = dxTrigger;
-    queueMicrotask(() => setOpen(true));
-    void onLookup?.({
-      label,
-      ref
-    }).then((target) => setValue((value2) => ({
-      ...value2,
-      target: target ?? void 0,
-      pending: false
-    })));
-  }, [
-    onLookup
-  ]);
-  useEffect(() => {
-    return rootRef ? addEventListener(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions) : void 0;
-  }, [
-    rootRef
-  ]);
-  return /* @__PURE__ */ React.createElement(RefPopoverContextProvider, {
-    pending: value.pending,
-    link: value.link,
-    target: value.target
-  }, /* @__PURE__ */ React.createElement(Popover.Root, {
-    open,
-    onOpenChange: setOpen
-  }, /* @__PURE__ */ React.createElement(Popover.VirtualTrigger, {
-    virtualRef: trigger
-  }), /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: "contents",
-    ref: setRootRef
-  }, children)));
-};
-var RefPopover = {
-  Provider: RefPopoverProvider
-};
-export {
-  RefPopover,
-  useRefPopover
-};
-//# sourceMappingURL=index.mjs.map

package/dist/lib/browser/testing/index.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/testing/RefPopover.tsx"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { createContext } from '@radix-ui/react-context';\nimport React, { type PropsWithChildren, useRef, useState, useEffect, useCallback, type RefObject } from 'react';\n\nimport { addEventListener } from '@dxos/async';\nimport { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';\nimport { Popover } from '@dxos/react-ui';\n\nimport { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../extensions';\n\nconst customEventOptions = { capture: true, passive: false };\n\n// Create a context for the dxn value.\ntype RefPopoverValue = Partial<{ link: PreviewLinkRef; target: PreviewLinkTarget; pending: boolean }>;\nconst REF_POPOVER = 'RefPopover';\nconst [RefPopoverContextProvider, useRefPopover] = createContext<RefPopoverValue>(REF_POPOVER, {});\n\ntype RefPopoverProviderProps = PropsWithChildren<{ onLookup?: PreviewLookup }>;\n\nconst RefPopoverProvider = ({ children, onLookup }: RefPopoverProviderProps) => {\n  const trigger = useRef<DxRefTag | null>(null);\n  const [value, setValue] = useState<RefPopoverValue>({});\n  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);\n  const [open, setOpen] = useState(false);\n\n  const handleDxRefTagActivate = useCallback(\n    (event: DxRefTagActivate) => {\n      const { ref, label, trigger: dxTrigger } = event;\n      setValue((value) => ({\n        ...value,\n        link: { label, ref },\n        pending: true,\n      }));\n      trigger.current = dxTrigger;\n      queueMicrotask(() => setOpen(true));\n      void onLookup?.({ label, ref }).then((target) =>\n        setValue((value) => ({\n          ...value,\n          target: target ?? undefined,\n          pending: false,\n        })),\n      );\n    },\n    [onLookup],\n  );\n\n  useEffect(() => {\n    return rootRef\n      ? addEventListener(rootRef, 'dx-ref-tag-activate', handleDxRefTagActivate, customEventOptions)\n      : undefined;\n  }, [rootRef]);\n\n  return (\n    <RefPopoverContextProvider pending={value.pending} link={value.link} target={value.target}>\n      <Popover.Root open={open} onOpenChange={setOpen}>\n        <Popover.VirtualTrigger virtualRef={trigger as unknown as RefObject<HTMLButtonElement>} />\n        <div role='none' className='contents' ref={setRootRef}>\n          {children}\n        </div>\n      </Popover.Root>\n    </RefPopoverContextProvider>\n  );\n};\n\nexport const RefPopover = {\n  Provider: RefPopoverProvider,\n};\n\nexport { useRefPopover };\n\nexport type { RefPopoverProviderProps, RefPopoverValue };\n"],
-  "mappings": ";AAIA,SAASA,qBAAqB;AAC9B,OAAOC,SAAiCC,QAAQC,UAAUC,WAAWC,mBAAmC;AAExG,SAASC,wBAAwB;AAEjC,SAASC,eAAe;AAIxB,IAAMC,qBAAqB;EAAEC,SAAS;EAAMC,SAAS;AAAM;AAI3D,IAAMC,cAAc;AACpB,IAAM,CAACC,2BAA2BC,aAAAA,IAAiBC,cAA+BH,aAAa,CAAC,CAAA;AAIhG,IAAMI,qBAAqB,CAAC,EAAEC,UAAUC,SAAQ,MAA2B;AACzE,QAAMC,UAAUC,OAAwB,IAAA;AACxC,QAAM,CAACC,OAAOC,QAAAA,IAAYC,SAA0B,CAAC,CAAA;AACrD,QAAM,CAACC,SAASC,UAAAA,IAAcF,SAAgC,IAAA;AAC9D,QAAM,CAACG,MAAMC,OAAAA,IAAWJ,SAAS,KAAA;AAEjC,QAAMK,yBAAyBC,YAC7B,CAACC,UAAAA;AACC,UAAM,EAAEC,KAAKC,OAAOb,SAASc,UAAS,IAAKH;AAC3CR,aAAS,CAACD,YAAW;MACnB,GAAGA;MACHa,MAAM;QAAEF;QAAOD;MAAI;MACnBI,SAAS;IACX,EAAA;AACAhB,YAAQiB,UAAUH;AAClBI,mBAAe,MAAMV,QAAQ,IAAA,CAAA;AAC7B,SAAKT,WAAW;MAAEc;MAAOD;IAAI,CAAA,EAAGO,KAAK,CAACC,WACpCjB,SAAS,CAACD,YAAW;MACnB,GAAGA;MACHkB,QAAQA,UAAUC;MAClBL,SAAS;IACX,EAAA,CAAA;EAEJ,GACA;IAACjB;GAAS;AAGZuB,YAAU,MAAA;AACR,WAAOjB,UACHkB,iBAAiBlB,SAAS,uBAAuBI,wBAAwBnB,kBAAAA,IACzE+B;EACN,GAAG;IAAChB;GAAQ;AAEZ,SACE,sBAAA,cAACX,2BAAAA;IAA0BsB,SAASd,MAAMc;IAASD,MAAMb,MAAMa;IAAMK,QAAQlB,MAAMkB;KACjF,sBAAA,cAACI,QAAQC,MAAI;IAAClB;IAAYmB,cAAclB;KACtC,sBAAA,cAACgB,QAAQG,gBAAc;IAACC,YAAY5B;MACpC,sBAAA,cAAC6B,OAAAA;IAAIC,MAAK;IAAOC,WAAU;IAAWnB,KAAKN;KACxCR,QAAAA,CAAAA,CAAAA;AAKX;AAEO,IAAMkC,aAAa;EACxBC,UAAUpC;AACZ;",
-  "names": ["createContext", "React", "useRef", "useState", "useEffect", "useCallback", "addEventListener", "Popover", "customEventOptions", "capture", "passive", "REF_POPOVER", "RefPopoverContextProvider", "useRefPopover", "createContext", "RefPopoverProvider", "children", "onLookup", "trigger", "useRef", "value", "setValue", "useState", "rootRef", "setRootRef", "open", "setOpen", "handleDxRefTagActivate", "useCallback", "event", "ref", "label", "dxTrigger", "link", "pending", "current", "queueMicrotask", "then", "target", "undefined", "useEffect", "addEventListener", "Popover", "Root", "onOpenChange", "VirtualTrigger", "virtualRef", "div", "role", "className", "RefPopover", "Provider"]
-}

package/dist/lib/node/testing/index.cjs

@@ -1,101 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var testing_exports = {};
-__export(testing_exports, {
-  RefPopover: () => RefPopover,
-  useRefPopover: () => useRefPopover
-});
-module.exports = __toCommonJS(testing_exports);
-var import_react_context = require("@radix-ui/react-context");
-var import_react = __toESM(require("react"));
-var import_async = require("@dxos/async");
-var import_react_ui = require("@dxos/react-ui");
-var customEventOptions = {
-  capture: true,
-  passive: false
-};
-var REF_POPOVER = "RefPopover";
-var [RefPopoverContextProvider, useRefPopover] = (0, import_react_context.createContext)(REF_POPOVER, {});
-var RefPopoverProvider = ({ children, onLookup }) => {
-  const trigger = (0, import_react.useRef)(null);
-  const [value, setValue] = (0, import_react.useState)({});
-  const [rootRef, setRootRef] = (0, import_react.useState)(null);
-  const [open, setOpen] = (0, import_react.useState)(false);
-  const handleDxRefTagActivate = (0, import_react.useCallback)((event) => {
-    const { ref, label, trigger: dxTrigger } = event;
-    setValue((value2) => ({
-      ...value2,
-      link: {
-        label,
-        ref
-      },
-      pending: true
-    }));
-    trigger.current = dxTrigger;
-    queueMicrotask(() => setOpen(true));
-    void onLookup?.({
-      label,
-      ref
-    }).then((target) => setValue((value2) => ({
-      ...value2,
-      target: target ?? void 0,
-      pending: false
-    })));
-  }, [
-    onLookup
-  ]);
-  (0, import_react.useEffect)(() => {
-    return rootRef ? (0, import_async.addEventListener)(rootRef, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions) : void 0;
-  }, [
-    rootRef
-  ]);
-  return /* @__PURE__ */ import_react.default.createElement(RefPopoverContextProvider, {
-    pending: value.pending,
-    link: value.link,
-    target: value.target
-  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Popover.Root, {
-    open,
-    onOpenChange: setOpen
-  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Popover.VirtualTrigger, {
-    virtualRef: trigger
-  }), /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "none",
-    className: "contents",
-    ref: setRootRef
-  }, children)));
-};
-var RefPopover = {
-  Provider: RefPopoverProvider
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  RefPopover,
-  useRefPopover
-});
-//# sourceMappingURL=index.cjs.map

package/dist/lib/node/testing/index.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/testing/RefPopover.tsx"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { createContext } from '@radix-ui/react-context';\nimport React, { type PropsWithChildren, useRef, useState, useEffect, useCallback, type RefObject } from 'react';\n\nimport { addEventListener } from '@dxos/async';\nimport { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';\nimport { Popover } from '@dxos/react-ui';\n\nimport { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../extensions';\n\nconst customEventOptions = { capture: true, passive: false };\n\n// Create a context for the dxn value.\ntype RefPopoverValue = Partial<{ link: PreviewLinkRef; target: PreviewLinkTarget; pending: boolean }>;\nconst REF_POPOVER = 'RefPopover';\nconst [RefPopoverContextProvider, useRefPopover] = createContext<RefPopoverValue>(REF_POPOVER, {});\n\ntype RefPopoverProviderProps = PropsWithChildren<{ onLookup?: PreviewLookup }>;\n\nconst RefPopoverProvider = ({ children, onLookup }: RefPopoverProviderProps) => {\n  const trigger = useRef<DxRefTag | null>(null);\n  const [value, setValue] = useState<RefPopoverValue>({});\n  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);\n  const [open, setOpen] = useState(false);\n\n  const handleDxRefTagActivate = useCallback(\n    (event: DxRefTagActivate) => {\n      const { ref, label, trigger: dxTrigger } = event;\n      setValue((value) => ({\n        ...value,\n        link: { label, ref },\n        pending: true,\n      }));\n      trigger.current = dxTrigger;\n      queueMicrotask(() => setOpen(true));\n      void onLookup?.({ label, ref }).then((target) =>\n        setValue((value) => ({\n          ...value,\n          target: target ?? undefined,\n          pending: false,\n        })),\n      );\n    },\n    [onLookup],\n  );\n\n  useEffect(() => {\n    return rootRef\n      ? addEventListener(rootRef, 'dx-ref-tag-activate', handleDxRefTagActivate, customEventOptions)\n      : undefined;\n  }, [rootRef]);\n\n  return (\n    <RefPopoverContextProvider pending={value.pending} link={value.link} target={value.target}>\n      <Popover.Root open={open} onOpenChange={setOpen}>\n        <Popover.VirtualTrigger virtualRef={trigger as unknown as RefObject<HTMLButtonElement>} />\n        <div role='none' className='contents' ref={setRootRef}>\n          {children}\n        </div>\n      </Popover.Root>\n    </RefPopoverContextProvider>\n  );\n};\n\nexport const RefPopover = {\n  Provider: RefPopoverProvider,\n};\n\nexport { useRefPopover };\n\nexport type { RefPopoverProviderProps, RefPopoverValue };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,2BAA8B;AAC9B,mBAAwG;AAExG,mBAAiC;AAEjC,sBAAwB;AAIxB,IAAMA,qBAAqB;EAAEC,SAAS;EAAMC,SAAS;AAAM;AAI3D,IAAMC,cAAc;AACpB,IAAM,CAACC,2BAA2BC,aAAAA,QAAiBC,oCAA+BH,aAAa,CAAC,CAAA;AAIhG,IAAMI,qBAAqB,CAAC,EAAEC,UAAUC,SAAQ,MAA2B;AACzE,QAAMC,cAAUC,qBAAwB,IAAA;AACxC,QAAM,CAACC,OAAOC,QAAAA,QAAYC,uBAA0B,CAAC,CAAA;AACrD,QAAM,CAACC,SAASC,UAAAA,QAAcF,uBAAgC,IAAA;AAC9D,QAAM,CAACG,MAAMC,OAAAA,QAAWJ,uBAAS,KAAA;AAEjC,QAAMK,6BAAyBC,0BAC7B,CAACC,UAAAA;AACC,UAAM,EAAEC,KAAKC,OAAOb,SAASc,UAAS,IAAKH;AAC3CR,aAAS,CAACD,YAAW;MACnB,GAAGA;MACHa,MAAM;QAAEF;QAAOD;MAAI;MACnBI,SAAS;IACX,EAAA;AACAhB,YAAQiB,UAAUH;AAClBI,mBAAe,MAAMV,QAAQ,IAAA,CAAA;AAC7B,SAAKT,WAAW;MAAEc;MAAOD;IAAI,CAAA,EAAGO,KAAK,CAACC,WACpCjB,SAAS,CAACD,YAAW;MACnB,GAAGA;MACHkB,QAAQA,UAAUC;MAClBL,SAAS;IACX,EAAA,CAAA;EAEJ,GACA;IAACjB;GAAS;AAGZuB,8BAAU,MAAA;AACR,WAAOjB,cACHkB,+BAAiBlB,SAAS,uBAAuBI,wBAAwBnB,kBAAAA,IACzE+B;EACN,GAAG;IAAChB;GAAQ;AAEZ,SACE,6BAAAmB,QAAA,cAAC9B,2BAAAA;IAA0BsB,SAASd,MAAMc;IAASD,MAAMb,MAAMa;IAAMK,QAAQlB,MAAMkB;KACjF,6BAAAI,QAAA,cAACC,wBAAQC,MAAI;IAACnB;IAAYoB,cAAcnB;KACtC,6BAAAgB,QAAA,cAACC,wBAAQG,gBAAc;IAACC,YAAY7B;MACpC,6BAAAwB,QAAA,cAACM,OAAAA;IAAIC,MAAK;IAAOC,WAAU;IAAWpB,KAAKN;KACxCR,QAAAA,CAAAA,CAAAA;AAKX;AAEO,IAAMmC,aAAa;EACxBC,UAAUrC;AACZ;",
-  "names": ["customEventOptions", "capture", "passive", "REF_POPOVER", "RefPopoverContextProvider", "useRefPopover", "createContext", "RefPopoverProvider", "children", "onLookup", "trigger", "useRef", "value", "setValue", "useState", "rootRef", "setRootRef", "open", "setOpen", "handleDxRefTagActivate", "useCallback", "event", "ref", "label", "dxTrigger", "link", "pending", "current", "queueMicrotask", "then", "target", "undefined", "useEffect", "addEventListener", "React", "Popover", "Root", "onOpenChange", "VirtualTrigger", "virtualRef", "div", "role", "className", "RefPopover", "Provider"]
-}