@dxos/react-ui-editor 0.8.4-main.f9ba587 → 0.8.4-main.fcc0d83b33

package/dist/types/src/testing/util.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/testing/util.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,GAAG,GAAI,GAAG,OAAO,MAAM,EAAE,WAAqB,CAAC"}

package/dist/types/src/types/index.d.ts

@@ -1,2 +0,0 @@
-export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC"}

package/dist/types/src/types/types.d.ts

@@ -1,21 +0,0 @@
-import { type EditorView } from '@codemirror/view';
-import { Schema } from 'effect';
-export type Range = {
-    from: number;
-    to: number;
-};
-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;
-export declare const EditorViewModes: readonly ["preview", "readonly", "source"];
-export declare const EditorViewMode: Schema.Schema<"preview" | "readonly" | "source", "preview" | "readonly" | "source", never>;
-export type EditorViewMode = Schema.Schema.Type<typeof EditorViewMode>;
-export declare const EditorInputModes: readonly ["default", "vim", "vscode"];
-export declare const EditorInputMode: Schema.Schema<"default" | "vim" | "vscode", "default" | "vim" | "vscode", never>;
-export type EditorInputMode = Schema.Schema.Type<typeof EditorInputMode>;
-//# sourceMappingURL=types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAGhC,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAIF,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,cAAc,CAAC,KAAK,SAAS,MAAM,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;AAE7G,eAAO,MAAM,eAAe,4CAA6C,CAAC;AAC1E,eAAO,MAAM,cAAc,4FAAuE,CAAC;AACnG,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,cAAc,CAAC,CAAC;AAEvE,eAAO,MAAM,gBAAgB,uCAAwC,CAAC;AACtE,eAAO,MAAM,eAAe,kFAAwE,CAAC;AACrG,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/types/src/util/cursor.d.ts

@@ -1,31 +0,0 @@
-import { type EditorState } from '@codemirror/state';
-import { type Range } from '../types';
-/**
- * Determines if two ranges overlap.
- * A range is considered to overlap if there is any intersection
- * between the two ranges, inclusive of their boundaries.
- */
-export declare const overlap: (a: Range, b: Range) => boolean;
-/**
- * Converts indexes into the text document into stable peer-independent cursors.
- *
- * See:
- *  - https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
- *  - https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
- *
- * @param {assoc} number Negative values will associate the cursor with the previous character
- *  while positive - with the next one.
- */
-export interface CursorConverter {
-    toCursor(position: number, assoc?: -1 | 1 | undefined): string;
-    fromCursor(cursor: string): number;
-}
-export declare class Cursor {
-    static readonly converter: import("@codemirror/state").Facet<unknown, CursorConverter>;
-    static readonly getCursorFromRange: (state: EditorState, range: Range) => string;
-    static readonly getRangeFromCursor: (state: EditorState, cursor: string) => {
-        from: number;
-        to: number;
-    } | undefined;
-}
-//# sourceMappingURL=cursor.d.ts.map

package/dist/types/src/util/cursor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cursor.d.ts","sourceRoot":"","sources":["../../../../src/util/cursor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,UAAU,CAAC;AAEtC;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,GAAG,KAAK,EAAE,GAAG,KAAK,KAAG,OAA2C,CAAC;AAEzF;;;;;;;;;GASG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/D,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAOD,qBAAa,MAAM;IACjB,MAAM,CAAC,QAAQ,CAAC,SAAS,8DAA4C;IAErE,MAAM,CAAC,QAAQ,CAAC,kBAAkB,GAAI,OAAO,WAAW,EAAE,OAAO,KAAK,YAKpE;IAEF,MAAM,CAAC,QAAQ,CAAC,kBAAkB,GAAI,OAAO,WAAW,EAAE,QAAQ,MAAM;;;kBAOtE;CACH"}

package/dist/types/src/util/debug.d.ts

@@ -1,17 +0,0 @@
-import { type Transaction } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
-export declare const wrapWithCatch: (fn: (...args: any[]) => any) => (...args: any[]) => any;
-/**
- * CodeMirror callbacks swallow errors so wrap handlers.
- */
-export declare const callbackWrapper: <T extends Function>(fn: T) => T;
-/**
- * Log all changes before dispatching them to the view.
- * https://codemirror.net/docs/ref/#view.EditorView.dispatch
- */
-export declare const debugDispatcher: (trs: readonly Transaction[], view: EditorView) => void;
-/**
- * Util to log transactions in update listener.
- */
-export declare const logChanges: (trs: readonly Transaction[]) => void;
-//# sourceMappingURL=debug.d.ts.map

package/dist/types/src/util/debug.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../../../../src/util/debug.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAInD,eAAO,MAAM,aAAa,GAAI,IAAI,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,MAC/C,GAAG,MAAM,GAAG,EAAE,QAOvB,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,QAAQ,EAAE,IAAI,CAAC,KAAG,CAOxC,CAAC;AAErB;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,KAAK,SAAS,WAAW,EAAE,EAAE,MAAM,UAAU,SAG5E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,KAAK,SAAS,WAAW,EAAE,SAmBrD,CAAC"}

package/dist/types/src/util/dom.d.ts

@@ -1,20 +0,0 @@
-export interface Rect {
-    readonly left: number;
-    readonly right: number;
-    readonly top: number;
-    readonly bottom: number;
-}
-export declare const flattenRect: (rect: Rect, left: boolean) => {
-    left: number;
-    right: number;
-    top: number;
-    bottom: number;
-};
-export declare const textRange: (node: Text, from: number, to?: number) => Range;
-export declare const clientRectsFor: (dom: Node) => DOMRectList;
-export type ElementOptions = {
-    className?: string;
-    text?: string;
-};
-export declare const createElement: (tag: string, options?: ElementOptions, children?: HTMLElement[]) => HTMLElement;
-//# sourceMappingURL=dom.d.ts.map

package/dist/types/src/util/dom.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../../src/util/dom.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,IAAI;IACnB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,GAAI,MAAM,IAAI,EAAE,MAAM,OAAO;;;;;CAGpD,CAAC;AAIF,eAAO,MAAM,SAAS,GAAI,MAAM,IAAI,EAAE,MAAM,MAAM,EAAE,WAAS,UAK5D,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,IAAI,gBAQvC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,EAAE,UAAU,cAAc,EAAE,WAAW,WAAW,EAAE,KAAG,WAa/F,CAAC"}

package/dist/types/src/util/facet.d.ts

@@ -1,3 +0,0 @@
-import { Facet } from '@codemirror/state';
-export declare const singleValueFacet: <I, O = I>(defaultValue?: O) => Facet<I, O>;
-//# sourceMappingURL=facet.d.ts.map

package/dist/types/src/util/facet.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"facet.d.ts","sourceRoot":"","sources":["../../../../src/util/facet.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,eAAe,CAAC,gBAMvD,CAAC"}

package/src/components/EditorToolbar/util.ts

@@ -1,65 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type EditorView } from '@codemirror/view';
-import { type Rx } from '@effect-rx/rx-react';
-import { useMemo } from 'react';
-
-import { type Action } from '@dxos/app-graph';
-import { live, type Live } from '@dxos/live-object';
-import { type ThemedClassName } from '@dxos/react-ui';
-import {
-  type ActionGraphProps,
-  type MenuActionProperties,
-  type MenuItemGroup,
-  type MenuSeparator,
-  type ToolbarMenuActionGroupProperties,
-  createMenuAction,
-  createMenuItemGroup,
-} from '@dxos/react-ui-menu';
-
-import type { EditorAction, Formatting } from '../../extensions';
-import { translationKey } from '../../translations';
-import { type EditorViewMode } from '../../types';
-
-export type EditorToolbarState = Formatting & Partial<{ viewMode: EditorViewMode }>;
-
-export const useEditorToolbarState = (initialState: Partial<EditorToolbarState> = {}) => {
-  return useMemo(() => live<EditorToolbarState>(initialState), []);
-};
-
-export type EditorToolbarFeatureFlags = Partial<{
-  headings: boolean;
-  formatting: boolean;
-  lists: boolean;
-  blocks: boolean;
-  search: boolean;
-  // TODO(wittjosiah): Factor out. Depend on plugin-level capabilities.
-  image: () => void;
-  viewMode: (mode: EditorViewMode) => void;
-}>;
-
-export type EditorToolbarActionGraphProps = {
-  state: Live<EditorToolbarState>;
-  getView: () => EditorView;
-  // TODO(wittjosiah): Control positioning.
-  customActions?: Rx.Rx<ActionGraphProps>;
-};
-
-export type EditorToolbarProps = ThemedClassName<
-  EditorToolbarActionGraphProps & EditorToolbarFeatureFlags & { attendableId?: string; role?: string }
->;
-
-export type EditorToolbarItem = EditorAction | MenuItemGroup | MenuSeparator;
-
-export const createEditorAction = (id: string, invoke: () => void, properties: Partial<MenuActionProperties>) => {
-  const { label = [`${id} label`, { ns: translationKey }], ...rest } = properties;
-  return createMenuAction(id, invoke, { label, ...rest }) as Action<MenuActionProperties>;
-};
-
-export const createEditorActionGroup = (
-  id: string,
-  props: Omit<ToolbarMenuActionGroupProperties, 'icon'>,
-  icon?: string,
-) => createMenuItemGroup(id, { icon, iconOnly: true, ...props });

package/src/components/Popover/CommandMenu.tsx

@@ -1,279 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type EditorView } from '@codemirror/view';
-import React, { useCallback, useEffect, useRef } from 'react';
-
-import { Icon, type Label, Popover, toLocalizedString, useThemeContext, useTranslation } from '@dxos/react-ui';
-import { type MaybePromise } from '@dxos/util';
-
-import { commandRangeEffect } from '../../extensions';
-
-export type CommandMenuGroup = {
-  id: string;
-  label?: Label;
-  items: CommandMenuItem[];
-};
-
-export type CommandMenuItem = {
-  id: string;
-  label: Label;
-  icon?: string;
-  onSelect?: (view: EditorView, head: number) => MaybePromise<void>;
-};
-
-export type CommandMenuProps = {
-  groups: CommandMenuGroup[];
-  currentItem?: string;
-  onSelect: (item: CommandMenuItem) => void;
-};
-
-// NOTE: Not using DropdownMenu because the command menu needs to manage focus explicitly.
-export const CommandMenu = ({ groups, currentItem, onSelect }: CommandMenuProps) => {
-  const { tx } = useThemeContext();
-  const groupsWithItems = groups.filter((group) => group.items.length > 0);
-  return (
-    <Popover.Portal>
-      <Popover.Content
-        align='start'
-        onOpenAutoFocus={(event) => event.preventDefault()}
-        classNames={tx('menu.content', 'menu--exotic-unfocusable', { elevation: 'positioned' }, [
-          'max-h-[300px] overflow-y-auto',
-        ])}
-      >
-        <Popover.Viewport classNames={tx('menu.viewport', 'menu__viewport--exotic-unfocusable', {})}>
-          <ul>
-            {groupsWithItems.map((group, index) => (
-              <React.Fragment key={group.id}>
-                <CommandGroup group={group} currentItem={currentItem} onSelect={onSelect} />
-                {index < groupsWithItems.length - 1 && <div className={tx('menu.separator', 'menu__item', {})} />}
-              </React.Fragment>
-            ))}
-          </ul>
-        </Popover.Viewport>
-      </Popover.Content>
-    </Popover.Portal>
-  );
-};
-
-const CommandGroup = ({
-  group,
-  currentItem,
-  onSelect,
-}: {
-  group: CommandMenuGroup;
-  currentItem?: string;
-  onSelect: (item: CommandMenuItem) => void;
-}) => {
-  const { tx } = useThemeContext();
-  const { t } = useTranslation();
-  return (
-    <>
-      {group.label && (
-        <div className={tx('menu.groupLabel', 'menu__group__label', {})}>
-          <span>{toLocalizedString(group.label, t)}</span>
-        </div>
-      )}
-      {group.items.map((item) => (
-        <CommandItem key={item.id} item={item} current={currentItem === item.id} onSelect={onSelect} />
-      ))}
-    </>
-  );
-};
-
-const CommandItem = ({
-  item,
-  current,
-  onSelect,
-}: {
-  item: CommandMenuItem;
-  current: boolean;
-  onSelect: (item: CommandMenuItem) => void;
-}) => {
-  const ref = useRef<HTMLLIElement>(null);
-  const { tx } = useThemeContext();
-  const { t } = useTranslation();
-  const handleSelect = useCallback(() => onSelect(item), [item, onSelect]);
-
-  useEffect(() => {
-    if (current && ref.current) {
-      ref.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    }
-  }, [current]);
-
-  return (
-    <li
-      ref={ref}
-      className={tx('menu.item', 'menu__item--exotic-unfocusable', {}, [current && 'bg-hoverSurface'])}
-      onClick={handleSelect}
-    >
-      {item.icon && <Icon icon={item.icon} size={5} />}
-      <span className='grow truncate'>{toLocalizedString(item.label, t)}</span>
-    </li>
-  );
-};
-
-// TODO(wittjosiah): Factor out into a separate file.
-
-//
-// Helpers
-//
-
-export const getItem = (groups: CommandMenuGroup[], id?: string): CommandMenuItem | undefined => {
-  return groups.flatMap((group) => group.items).find((item) => item.id === id);
-};
-
-export const getNextItem = (groups: CommandMenuGroup[], id?: string): CommandMenuItem => {
-  const items = groups.flatMap((group) => group.items);
-  const index = items.findIndex((item) => item.id === id);
-  return items[(index + 1) % items.length];
-};
-
-export const getPreviousItem = (groups: CommandMenuGroup[], id?: string): CommandMenuItem => {
-  const items = groups.flatMap((group) => group.items);
-  const index = items.findIndex((item) => item.id === id);
-  return items[(index - 1 + items.length) % items.length];
-};
-
-export const filterItems = (
-  groups: CommandMenuGroup[],
-  filter: (item: CommandMenuItem) => boolean,
-): CommandMenuGroup[] => {
-  return groups.map((group) => ({
-    ...group,
-    items: group.items.filter(filter),
-  }));
-};
-
-export const insertAtCursor = (view: EditorView, head: number, insert: string) => {
-  view.dispatch({
-    changes: { from: head, to: head, insert },
-    selection: { anchor: head + insert.length, head: head + insert.length },
-  });
-};
-
-/**
- * If the cursor is at the start of a line, insert the text at the cursor.
- * Otherwise, insert the text on a new line.
- */
-export const insertAtLineStart = (view: EditorView, head: number, insert: string) => {
-  const line = view.state.doc.lineAt(head);
-  if (line.from === head) {
-    insertAtCursor(view, head, insert);
-  } else {
-    insert = '\n' + insert;
-    view.dispatch({
-      changes: { from: line.to, to: line.to, insert },
-      selection: { anchor: line.to + insert.length, head: line.to + insert.length },
-    });
-  }
-};
-
-export const coreSlashCommands: CommandMenuGroup = {
-  id: 'markdown',
-  label: 'Markdown',
-  items: [
-    {
-      id: 'heading-1',
-      label: 'Heading 1',
-      icon: 'ph--text-h-one--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '# '),
-    },
-    {
-      id: 'heading-2',
-      label: 'Heading 2',
-      icon: 'ph--text-h-two--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '## '),
-    },
-    {
-      id: 'heading-3',
-      label: 'Heading 3',
-      icon: 'ph--text-h-three--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '### '),
-    },
-    {
-      id: 'heading-4',
-      label: 'Heading 4',
-      icon: 'ph--text-h-four--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '#### '),
-    },
-    {
-      id: 'heading-5',
-      label: 'Heading 5',
-      icon: 'ph--text-h-five--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '##### '),
-    },
-    {
-      id: 'heading-6',
-      label: 'Heading 6',
-      icon: 'ph--text-h-six--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '###### '),
-    },
-    {
-      id: 'bullet-list',
-      label: 'Bullet List',
-      icon: 'ph--list-bullets--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '- '),
-    },
-    {
-      id: 'numbered-list',
-      label: 'Numbered List',
-      icon: 'ph--list-numbers--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '1. '),
-    },
-    {
-      id: 'task-list',
-      label: 'Task List',
-      icon: 'ph--list-checks--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '- [ ] '),
-    },
-    {
-      id: 'quote',
-      label: 'Quote',
-      icon: 'ph--quotes--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '> '),
-    },
-    {
-      id: 'code-block',
-      label: 'Code Block',
-      icon: 'ph--code-block--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '```\n\n```'),
-    },
-    {
-      id: 'table',
-      label: 'Table',
-      icon: 'ph--table--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '| | | |\n|---|---|---|\n| | | |'),
-    },
-  ],
-};
-
-export const linkSlashCommands: CommandMenuGroup = {
-  id: 'link',
-  label: 'Link',
-  items: [
-    {
-      id: 'inline-link',
-      label: 'Inline link',
-      icon: 'ph--link--regular',
-      onSelect: (view, head) =>
-        view.dispatch({
-          changes: { from: head, insert: '@' },
-          selection: { anchor: head + 1, head: head + 1 },
-          effects: commandRangeEffect.of({ trigger: '@', range: { from: head, to: head + 1 } }),
-        }),
-    },
-    {
-      id: 'block-embed',
-      label: 'Block embed',
-      icon: 'ph--lego--regular',
-      onSelect: (view, head) =>
-        view.dispatch({
-          changes: { from: head, insert: '@@' },
-          selection: { anchor: head + 2, head: head + 2 },
-          effects: commandRangeEffect.of({ trigger: '@', range: { from: head, to: head + 2 } }),
-        }),
-    },
-  ],
-};

package/src/components/Popover/RefDropdownMenu.tsx

@@ -1,85 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useRef, useState, useEffect, useCallback, type RefObject } from 'react';
-
-import { addEventListener } from '@dxos/async';
-import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
-import { DropdownMenu } from '@dxos/react-ui';
-
-import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../../extensions';
-
-// TODO(burdon): Reconcile this file with RefPopover?
-
-const customEventOptions = { capture: true, passive: false };
-
-// Create a context for the dxn value.
-type RefDropdownMenuValue = Partial<{
-  link: PreviewLinkRef;
-  target: PreviewLinkTarget;
-  pending: boolean;
-}>;
-
-const REF_DROPDOWN_MENU = 'RefDropdownMenu';
-const [RefDropdownMenuContextProvider, useRefDropdownMenu] = createContext<RefDropdownMenuValue>(REF_DROPDOWN_MENU, {});
-
-type RefDropdownMenuProviderProps = PropsWithChildren<{
-  onLookup?: PreviewLookup;
-}>;
-
-const RefDropdownMenuProvider = ({ children, onLookup }: RefDropdownMenuProviderProps) => {
-  const trigger = useRef<DxRefTag | null>(null);
-  const [value, setValue] = useState<RefDropdownMenuValue>({});
-  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
-  const [open, setOpen] = useState(false);
-
-  const handleDxRefTagActivate = useCallback(
-    (event: DxRefTagActivate) => {
-      const { refId, label, trigger: dxTrigger } = event;
-      setValue((value) => ({
-        ...value,
-        link: { label, ref: refId },
-        pending: true,
-      }));
-      trigger.current = dxTrigger;
-      queueMicrotask(() => setOpen(true));
-      void onLookup?.({ label, ref: refId }).then((target) =>
-        setValue((value) => ({
-          ...value,
-          target: target ?? undefined,
-          pending: false,
-        })),
-      );
-    },
-    [onLookup],
-  );
-
-  useEffect(() => {
-    if (!rootRef) {
-      return;
-    }
-
-    return addEventListener(rootRef, 'dx-ref-tag-activate' as any, handleDxRefTagActivate, customEventOptions);
-  }, [rootRef]);
-
-  return (
-    <RefDropdownMenuContextProvider pending={value.pending} link={value.link} target={value.target}>
-      <DropdownMenu.Root open={open} onOpenChange={setOpen}>
-        <DropdownMenu.VirtualTrigger virtualRef={trigger as unknown as RefObject<HTMLButtonElement>} />
-        <div role='none' className='contents' ref={setRootRef}>
-          {children}
-        </div>
-      </DropdownMenu.Root>
-    </RefDropdownMenuContextProvider>
-  );
-};
-
-export const RefDropdownMenu = {
-  Provider: RefDropdownMenuProvider,
-};
-
-export { useRefDropdownMenu };
-
-export type { RefDropdownMenuProviderProps, RefDropdownMenuValue };

package/src/components/Popover/RefPopover.tsx

@@ -1,99 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { createContext } from '@radix-ui/react-context';
-import React, {
-  type PropsWithChildren,
-  useRef,
-  useState,
-  useEffect,
-  useCallback,
-  type RefObject,
-  forwardRef,
-} from 'react';
-
-import { addEventListener } from '@dxos/async';
-import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
-import { Popover } from '@dxos/react-ui';
-
-import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../../extensions';
-
-const customEventOptions = { capture: true, passive: false };
-
-export type RefPopoverProps = PropsWithChildren<{
-  modal?: boolean;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  onActivate?: (event: DxRefTagActivate) => void;
-}>;
-
-export const RefPopover = forwardRef<DxRefTag | null, RefPopoverProps>(
-  ({ children, open, onOpenChange, modal, onActivate }, ref) => {
-    const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
-
-    useEffect(() => {
-      if (!rootRef || !onActivate) {
-        return;
-      }
-
-      return addEventListener(rootRef, 'dx-ref-tag-activate' as any, onActivate, customEventOptions);
-    }, [rootRef, onActivate]);
-
-    return (
-      <Popover.Root open={open} onOpenChange={onOpenChange} modal={modal}>
-        <Popover.VirtualTrigger virtualRef={ref as unknown as RefObject<HTMLButtonElement>} />
-        <div role='none' className='contents' ref={setRootRef}>
-          {children}
-        </div>
-      </Popover.Root>
-    );
-  },
-);
-
-// Create a context for the dxn value.
-type RefPopoverValue = Partial<{ link: PreviewLinkRef; target: PreviewLinkTarget; pending: boolean }>;
-
-const REF_POPOVER = 'RefPopover';
-const [RefPopoverContextProvider, useRefPopover] = createContext<RefPopoverValue>(REF_POPOVER, {});
-
-type PreviewProviderProps = PropsWithChildren<{ onLookup?: PreviewLookup }>;
-
-const PreviewProvider = ({ children, onLookup }: PreviewProviderProps) => {
-  const trigger = useRef<DxRefTag | null>(null);
-  const [value, setValue] = useState<RefPopoverValue>({});
-  const [open, setOpen] = useState(false);
-
-  const handleDxRefTagActivate = useCallback(
-    (event: DxRefTagActivate) => {
-      const { refId, label, trigger: dxTrigger } = event;
-      setValue((value) => ({
-        ...value,
-        link: { label, ref: refId },
-        pending: true,
-      }));
-      trigger.current = dxTrigger;
-      queueMicrotask(() => setOpen(true));
-      void onLookup?.({ label, ref: refId }).then((target) =>
-        setValue((value) => ({
-          ...value,
-          target: target ?? undefined,
-          pending: false,
-        })),
-      );
-    },
-    [onLookup],
-  );
-
-  return (
-    <RefPopoverContextProvider pending={value.pending} link={value.link} target={value.target}>
-      <RefPopover ref={trigger} open={open} onOpenChange={setOpen} onActivate={handleDxRefTagActivate}>
-        {children}
-      </RefPopover>
-    </RefPopoverContextProvider>
-  );
-};
-
-export { PreviewProvider, useRefPopover };
-
-export type { PreviewProviderProps, RefPopoverValue };

package/src/components/Popover/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export * from './CommandMenu';
-export * from './RefPopover';
-export * from './RefDropdownMenu';