{ beginStroke(e, spaceHeldRef.current); }} onPointerMove={moveStroke} onPointerUp={endStroke} onPointerCancel={endStroke} onPointerLeave={onLeave} />, host ); } // ───────────────────────────────────────────────────────────────────────────── // SVG — portaled INTO `.dc-world` so the world's CSS zoom + translate apply // natively, which is what makes drawn ink scale with the zoom. Selection chrome // and card hairlines opt into `vector-effect="non-scaling-stroke"` per element // to stay px-thick; drawn ink deliberately does not (see `common` in // `renderStroke`). `pointer-events: none` on the container — strokes are decorative // for now (Phase 5.1 Task 6 will reintroduce hit-test via the selection store). function AnnotationsSvg({ worldRef, strokes, anchorsById, selectMode, selectedStrokes, marquee, snapGuides, bindHintId, resizeInfo, connDraft, addTextHintId, ghost, editingTarget, editCaretPoint, inkColor, onCommitEdit, onCancelEdit, }: { worldRef: ReturnType; strokes: readonly Stroke[]; anchorsById: Map; selectMode: boolean; selectedStrokes: readonly Stroke[]; marquee: { ax: number; ay: number; bx: number; by: number } | null; /** FigJam v3 — smart-guide lines painted while a drag is snapping. */ snapGuides: SnapGuide[] | null; /** FigJam v3 — host a dragged arrow endpoint would bind to (accent halo). */ bindHintId: string | null; /** FigJam v3 — live size label + dimension-match halos while resizing. */ resizeInfo: { box: { x: number; y: number; w: number; h: number } | null; matchIds: string[]; } | null; /** FigJam v3 — in-flight connector drawn from a connection dot. */ connDraft: { x1: number; y1: number; x2: number; y2: number; startBind: { hostId: string; nx: number; ny: number }; endBind?: { hostId: string; nx: number; ny: number }; } | null; /** FigJam v3 — hovered empty shape that shows the "Add text" ghost label. */ addTextHintId: string | null; ghost: GhostDescriptor | null; editingTarget: EditingTarget; /** The click that opened the editor — caret-at-click on mount (Phase 3). */ editCaretPoint: { x: number; y: number } | null; /** Live default ink (theme-aware) for a not-yet-born pending text caret. */ inkColor: string; onCommitEdit: (text: string, fmt?: EditorFmt, measuredH?: number) => void; onCancelEdit: () => void; }) { const [, force] = useState({}); useEffect(() => { if (worldRef?.current) return; const id = setTimeout(() => force({}), 0); return () => clearTimeout(id); }, [worldRef]); const target = worldRef?.current ?? null; if (!target) return null; // A sticky whose body is being edited hides its read-only text so the // editor textarea (rendered below at the same bbox) isn't double-painted. const editingStickyId = editingTarget?.kind === 'sticky' ? editingTarget.sticky.id : null; // Same double-paint issue for a section being renamed — its label chip must // hide while the StandaloneTextEditor sits at the same spot, else the old // label reads through behind the new text. const editingSectionId = editingTarget?.kind === 'section' ? editingTarget.section.id : null; const anchoredExisting = editingTarget?.kind === 'anchored' ? (strokes.find((s) => s.tool === 'text' && s.anchorId === editingTarget.anchorId) as | TextStroke | undefined) : undefined; // Same double-paint issue for a shape's anchored text — hide the read-only // stroke while TextEditor sits at the same bbox (Phase 1 jump-fix // companion). Only applies once the TextStroke exists; a not-yet-created // one has nothing to hide. const editingAnchoredTextId = anchoredExisting?.id ?? null; // A standalone text being re-edited hides its read-only too — the // editor paints at the same x/y, so leaving it visible double-paints (the // pre-Phase-2 "ghost" under the editor). const editingStandaloneTextId = editingTarget?.kind === 'standalone' ? editingTarget.text.id : null; return ( <> {createPortal( , target )} ); } /** * The active annotation text editor, rendered as PLAIN HTML absolutely * positioned in the world div — NOT as SVG foreignObject. Same architectural * move as MediaRefPlayers below (read its docblock): foreignObject content * under the transformed `.dc-world` mis-hit-tests clicks at most zoom levels * (WebKit + Chromium), and the `.dc-annot-svg` root's pointer-events:none * additionally swallowed in-editor clicks — so caret-at-click could never * work. HTML children of the transformed div hit-test correctly by * construction. World coords map 1:1 (the div carries the pan/zoom * transform), so each editor's old foreignObject x/y/w/h becomes left/top/ * width/height verbatim. The [data-annot-editor] attr keeps document-capture * annotation handlers out (isAnnotEditorTarget guard, mirroring * [data-mediaref-player]). */ function AnnotEditors({ worldRef, editingTarget, anchoredExisting, caretPoint, inkColor, onCommitEdit, onCancelEdit, }: { worldRef: ReturnType; editingTarget: EditingTarget; anchoredExisting: TextStroke | undefined; caretPoint: { x: number; y: number } | null; inkColor: string; onCommitEdit: (text: string, fmt?: EditorFmt, measuredH?: number) => void; onCancelEdit: () => void; }) { const target = worldRef?.current ?? null; if (!target || !editingTarget) return null; return createPortal( <> {editingTarget.kind === 'anchored' ? ( onCommitEdit(text, fmt)} onCancel={onCancelEdit} /> ) : null} {editingTarget.kind === 'sticky' ? ( ) : null} {editingTarget.kind === 'standalone' ? ( ) : null} {editingTarget.kind === 'pending' ? ( ) : null} {editingTarget.kind === 'section' ? ( ) : null} , target ); } /** * DDR-150 dogfood #8 — the mediaref chips' inline players, rendered as PLAIN * HTML absolutely positioned in the world div (which carries the pan/zoom CSS * transform), NOT as SVG foreignObject: Chromium hit-tests foreignObject * content under a transformed ancestor in the un-transformed coordinate space, * so real clicks miss the player at most zoom levels. HTML children of the * transformed div hit-test correctly. The [data-mediaref-player] attr keeps * every document-capture annotation handler out (isMediaPlayerTarget guard). */ function MediaRefPlayers({ worldRef, strokes, visible, }: { // Same shape the context actually hands out (nullable OUTSIDE a world // provider, exactly like the sibling overlay at MediaRefChrome) — the old // `RefObject` both mis-typed the caller and let // `worldRef.current` be dereferenced on a null context. worldRef: ReturnType; strokes: readonly Stroke[]; visible: boolean; }) { const target = worldRef?.current ?? null; if (!target || !visible) return null; const HEADER = 26; const refs = strokes.filter( (s): s is MediaRefStroke => s.tool === 'mediaref' && !!s.src && Math.abs(s.h) > HEADER + 12 ); if (refs.length === 0) return null; return createPortal( <> {refs.map((s) => { const x = Math.min(s.x, s.x + s.w); const y = Math.min(s.y, s.y + s.h); const w = Math.abs(s.w); const h = Math.abs(s.h); const mediaUrl = resolveAssetHref(s.src); const isAudio = s.mediaKind === 'audio'; return (

{isAudio ? ( // biome-ignore lint/a11y/useMediaCaption: user-dropped reference media — there is no caption source to point a at.

); })} , target ); } // An empty flex-centered contentEditable has no line box for `justifyContent: // 'center'` to center — WebKit parks the caret at the box's top, then jumps it // to the true centered position the instant a real character exists. A // zero-width space gives the box real (invisible) content from mount, so the // caret starts centered and never jumps. Stripped back off on commit. const JUMP_SENTINEL = '\u200B'; function stripJumpSentinel(text: string): string { return text.startsWith(JUMP_SENTINEL) ? text.slice(JUMP_SENTINEL.length) : text; } // Unified caret style across every contentEditable text surface (annotation // editors here + the artboard inline editor's `.dc-text-editing` CSS in // canvas-shell.tsx use the SAME `--maude-hud-accent` so the caret reads the // same everywhere). An explicit caretColor makes the caret visible against any // background. NOTE: deliberately NO `transform: translateZ(0)` / `will-change` // here \u2014 promoting a contentEditable onto its own compositing layer is a known // WebKit caret-BLINK killer (the compositor caches the layer and never repaints // the blink, so the caret shows as a static line). A prior dogfood pass added // translateZ(0) to "restore" the caret and instead froze its blink; removing it // lets WebKit run the native blink. The editor already lives inside the // transformed `.dc-world`, but that ancestor transform alone does not stop the // blink \u2014 only a compositing trigger ON the editable does. const CARET_FIX_STYLE = { caretColor: 'var(--maude-hud-accent, #4a63e7)', } as const; /** * Phase 3 (unified-text-editing) — shared caret behavior for every annotation * editor. On mount: focus, place a collapsed caret at the entry click point * (`placeCaretAt`, the SAME chain the artboard's enterEditModeAt uses; * keyboard entry has no point → select-all, the rename convention), and mount * the custom blinking caret (text-caret.ts) for the session. Afterwards every * plain in-editor click re-places the caret from its coordinates on pointerup * so repositioning never depends on native hit-testing (synthetic e2e clicks * take the same path — untrusted events get no UA caret action at all). * Shift-clicks and drag-selections keep native behavior; ⌘A stays native. */ function useEditorCaret( ref: RefObject, caretPoint: { x: number; y: number } | null | undefined ) { const entryPointRef = useRef(caretPoint ?? null); useEffect(() => { const el = ref.current; if (!el) return; el.focus(); placeCaretAt(el, window, entryPointRef.current ?? undefined); return mountCaret(el, window); }, [ref]); const downRef = useRef<{ x: number; y: number } | null>(null); const onPointerDown = useCallback((e: ReactPointerEvent) => { downRef.current = e.button === 0 && !e.shiftKey ? { x: e.clientX, y: e.clientY } : null; }, []); const onPointerUp = useCallback( (e: ReactPointerEvent) => { const d = downRef.current; downRef.current = null; if (!d || e.shiftKey) return; // A real drag is a range-selection gesture — leave it to the engine. if (Math.hypot(e.clientX - d.x, e.clientY - d.y) > 3) return; const el = ref.current; if (!el) return; const sel = window.getSelection(); if (sel && !sel.isCollapsed) return; // double-click word-select etc. placeCaretAt(el, window, { x: e.clientX, y: e.clientY }, false); }, [ref] ); return { onPointerDown, onPointerUp }; } /** * issue-106 — the body an annotation editor hands React as its contentEditable * children, snapshotted for the life of ONE edit session. * * These editors are uncontrolled: the user types straight into the DOM. If the * rendered children value changes while the session is open, React writes the * new string into the live node and everything typed since — line breaks * included — is gone. That is exactly what a peer's commit arriving over * shared-doc sync (DDR-064) used to do, and what the hazard note above * `useEditorFormat` warns about for local mutations. Snapshotting per target id * makes the children a constant for the session, so no store update can reach * the DOM; the commit path reads `innerText` from the node itself, which is the * user's real content either way. Re-keys when the editor is reused for a * different stroke. * * `listType` is snapshotted through the same hook: the body is prefixed with * list markers at OPEN time and stripped again at commit, so if a peer flipped * the stroke's list style mid-session the strip would run a different rule than * the prefix did — turning a bullet into a literal "• " in the stored text, or * eating a leading "1. " the user actually typed. */ function useSessionValue(id: string, compute: () => T): T { const ref = useRef<{ id: string; value: T } | null>(null); if (ref.current === null || ref.current.id !== id) ref.current = { id, value: compute() }; return ref.current.value; } function TextEditor({ anchorId, host, existing, caretPoint, onCommit, onCancel, }: { anchorId: string; host: AnchorHost | null; existing: TextStroke | undefined; caretPoint?: { x: number; y: number } | null; onCommit: (anchorId: string, text: string, fmt?: EditorFmt) => void; onCancel: () => void; }) { const ref = useRef(null); // Show list markers WHILE editing so the read↔edit swap doesn't flicker // (item 4c) — stripped back to raw text on commit. const sessionListType = useSessionValue(anchorId, () => existing?.listType); const initial = useSessionValue(anchorId, () => listPrefixedBody(existing?.text ?? '', sessionListType) ); // Cmd/Ctrl+B/I/U formatting while editing (item 4d). const { fmtRef, style: fmtStyle, onFormatKey, } = useEditorFormat({ bold: existing?.bold, italic: existing?.italic, underline: existing?.underline, strike: existing?.strike, fontSize: existing?.fontSize ?? DEFAULT_FONT_SIZE, align: existing?.align ?? 'center', }); // Both commit sites below (outside-click + Cmd/Ctrl+Enter) need the same // sentinel-strip + marker-strip pipeline. Memoized so the outside-click // effect below can depend on it directly instead of its own copy of // existing?.listType (lint/correctness/useExhaustiveDependencies). const toCommittedText = useCallback( (raw: string) => stripEditorMarkers(stripJumpSentinel(raw), sessionListType), [sessionListType] ); // Caret-at-click on entry + custom blinking caret + click re-placement // (select-all only for keyboard entry — see useEditorCaret). const caretHandlers = useEditorCaret(ref, caretPoint); // Commit on outside click; cancel-on-Esc handled in onKeyDown below. useEffect(() => { if (typeof document === 'undefined') return; const onDown = (e: PointerEvent) => { if (isMediaPlayerTarget(e)) return; // mediaref inline player owns this event const el = ref.current; if (!el) return; if (el.contains(e.target as Node)) return; // FigJam v3 — the edit-mode text toolbar drives THIS editor; clicking // it must not commit-and-close the session. if ((e.target as Element | null)?.closest?.('.dc-annot-ctx')) return; onCommit(anchorId, toCommittedText(el.innerText || ''), fmtRef.current); }; document.addEventListener('pointerdown', onDown, true); return () => document.removeEventListener('pointerdown', onDown, true); }, [anchorId, onCommit, fmtRef, toCommittedText]); if (!host) return null; const bbox = strokeBBox(host); if (!bbox) return null; const fontSize = existing?.fontSize ?? DEFAULT_FONT_SIZE; // Phase 24 — match the committed render's bold / strike / align (anchored // default align = centre). const align = existing?.align ?? 'center'; return ( // Plain HTML host in the world div (NOT foreignObject — see AnnotEditors' // docblock): world coords map 1:1 to left/top, clicks hit-test correctly.

{ if (onFormatKey(e)) return; // Cmd/Ctrl+B/I/U if (e.key === 'Escape') { e.preventDefault(); onCancel(); return; } // issue-106 — Shift+Enter ADDS a line. On keyboard entry the whole // body is still select-all'd (the retype convention), so letting the // break replace the selection wiped the text. Collapse that entry // selection to its end first; a user's own partial selection is left // alone. See collapseEntrySelectAll. if (e.key === 'Enter' && e.shiftKey && ref.current) { collapseEntrySelectAll(ref.current, window); } // Unified across every text surface: plain Enter commits, // Shift+Enter inserts a newline (falls through untouched). ⌘/Ctrl // +Enter also commits AND chains a connected sibling (quick-create). if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); const el = ref.current; onCommit(anchorId, toCommittedText(el?.innerText || ''), fmtRef.current); if (e.metaKey || e.ctrlKey) { document.dispatchEvent( new CustomEvent('maude:chain-create', { detail: { id: anchorId } }) ); } } }} > {initial || JUMP_SENTINEL}

); } // Phase 21 — sticky body editor, hosted as plain HTML at the card's bbox in // the world div (word-wrap + zoom come from the div's own box + the world // transform). Commit on blur, cancel on Esc; Enter commits, Shift+Enter // inserts a newline. function StickyEditor({ sticky, caretPoint, onCommit, onCancel, }: { sticky: StickyStroke; caretPoint?: { x: number; y: number } | null; onCommit: (text: string, fmt?: EditorFmt, measuredH?: number) => void; onCancel: () => void; }) { // A flex-centered contentEditable (NOT a textarea) so the edit view matches // the committed `.dc-sticky-body` exactly — text stays centered, no jump on // commit. Multi-line: Shift+Enter inserts a line break, plain Enter commits; // Esc cancels; blur commits; Cmd/Ctrl+B/I/U format (unified with the others). const ref = useRef(null); const doneRef = useRef(false); const sessionListType = useSessionValue(sticky.id, () => sticky.listType); const sessionBody = useSessionValue(sticky.id, () => stickyBodyText(sticky)); const { fmtRef, style: fmtStyle, onFormatKey, } = useEditorFormat({ bold: sticky.bold, italic: sticky.italic, underline: sticky.underline, strike: sticky.strike, fontSize: sticky.fontSize, align: sticky.align ?? 'left', }); const commit = () => { if (doneRef.current) return; doneRef.current = true; const el = ref.current; // issue-106 — the editor IS the measurement: same class, same width, same // font as the committed body, and laid out in world units (the pan/zoom // transform on `.dc-world` doesn't change layout), so its scrollHeight is // the height the card needs. No offscreen measuring rig required. onCommit( stripEditorMarkers(el?.innerText ?? '', sessionListType), fmtRef.current, el?.scrollHeight ); }; // FigJam v3 — a toolbar click steals focus for a tick; don't treat it as // "done editing" (the button's onMouseDown preventDefault usually stops the // blur, this guards the browsers where it doesn't). const onBlur = (e: { relatedTarget?: EventTarget | null }) => { const to = e.relatedTarget as Element | null; if (to?.closest?.('.dc-annot-ctx')) return; commit(); }; // Caret-at-click on entry + custom blinking caret + click re-placement. const caretHandlers = useEditorCaret(ref, caretPoint); const x = Math.min(sticky.x, sticky.x + sticky.w); const y = Math.min(sticky.y, sticky.y + sticky.h); const w = Math.abs(sticky.w); const h = Math.abs(sticky.h); const r = sticky.cornerRadius ?? STICKY_CORNER_RADIUS; return (

); } // Phase 21 — standalone text editor. A single-line contentEditable box anchored // at the world (x, y). Enter / blur / outside-click commit; Esc cancels. function StandaloneTextEditor({ x, y, fontSize, color, initialText, bold, italic, strike, underline, align, listType, singleLine, boxStyle, caretPoint, onCommit, onCancel, }: { x: number; y: number; fontSize: number; color: string; initialText: string; bold?: boolean; italic?: boolean; strike?: boolean; underline?: boolean; align?: TextAlign; listType?: ListType; /** The click that opened the editor — caret lands there (Phase 3). */ caretPoint?: { x: number; y: number } | null; /** A one-line field (e.g. a section title rename) — plain Enter commits * instead of inserting a newline, matching a native text-input's Enter. */ singleLine?: boolean; /** Extra style merged onto the editable box — e.g. a section rename wants * the same chip background/padding/radius the read-only label chip has. */ boxStyle?: CSSProperties; onCommit: (text: string, fmt?: EditorFmt) => void; onCancel: () => void; }) { const ref = useRef(null); // Cmd/Ctrl+B/I/U formatting while editing (item 4d). const { fmtRef, style: fmtStyle, onFormatKey, } = useEditorFormat({ bold, italic, underline, strike, fontSize, align: align ?? 'left', }); // Single-fire commit guard — outside-click + blur can both fire in one tick; // without this the text would commit twice (two undo records). Markers shown // while editing (item 4c) are stripped back to raw text here on commit. const doneRef = useRef(false); const commitOnce = useCallback( (text: string) => { if (doneRef.current) return; doneRef.current = true; onCommit(stripEditorMarkers(text, listType), fmtRef.current); }, [onCommit, listType, fmtRef] ); // Caret-at-click on entry + custom blinking caret + click re-placement. const caretHandlers = useEditorCaret(ref, caretPoint); // Commit on outside click. useEffect(() => { if (typeof document === 'undefined') return; const onDown = (e: PointerEvent) => { if (isMediaPlayerTarget(e)) return; // mediaref inline player owns this event const el = ref.current; if (!el) return; if (el.contains(e.target as Node)) return; // FigJam v3 — clicks into the edit-mode text toolbar keep the session. if ((e.target as Element | null)?.closest?.('.dc-annot-ctx')) return; commitOnce(el.innerText || ''); }; document.addEventListener('pointerdown', onDown, true); return () => document.removeEventListener('pointerdown', onDown, true); }, [commitOnce]); return ( // Generous box so multi-line text isn't clipped while typing (item 4a). // The host passes pointer events through (empty area is not the editor — // outside-click must still commit); only the editable itself is // interactive, so clicks in it place the caret.

commitOnce(ref.current?.innerText || '')} onPointerDown={caretHandlers.onPointerDown} onPointerUp={caretHandlers.onPointerUp} onKeyDown={(e) => { if (onFormatKey(e)) return; // Cmd/Ctrl+B/I/U if (e.key === 'Escape') { e.preventDefault(); // Mark done so the unmount blur that follows doesn't commit. doneRef.current = true; onCancel(); return; } // issue-106 — same guard as the other two editors, for the multi-line // case only (a singleLine field commits on Shift+Enter anyway). if (e.key === 'Enter' && e.shiftKey && !singleLine && ref.current) { collapseEntrySelectAll(ref.current, window); } // Unified: plain Enter commits, Shift+Enter inserts a newline. A // singleLine field (section rename) is a title — Shift+Enter commits // too rather than adding a newline the one-line chip can't show. if (e.key === 'Enter' && (!e.shiftKey || singleLine)) { e.preventDefault(); commitOnce(ref.current?.innerText || ''); } }} > {listPrefixedBody(initialText, listType)}

); } /** * FigJam v3 — centered ghost "Add text" label on a hovered EMPTY rect/ellipse * (FigJam shows the same invitation). Pure chrome; double-click / Enter edits. */ function AddTextHint({ strokes, hintId }: { strokes: readonly Stroke[]; hintId: string | null }) { if (!hintId) return null; const host = strokes.find((s) => s.id === hintId); if (!host || (host.tool !== 'rect' && host.tool !== 'ellipse' && host.tool !== 'polygon')) return null; const bb = strokeBBox(host); if (!bb || bb.w < 48 || bb.h < 28) return null; const rot = strokeRotation(host); const label = ( Add text ); if (rot === 0) return label; return ( {label} ); } /** * FigJam v3 — connection dots: the four side magnets of a selected bindable * shape, screen-constant size, accent-ringed. Dragging one starts a bound * connector (the layer owns the gesture; dots are in CHROME_SELECTOR so the * marquee/drag handler yields). */ function ConnectorDots({ stroke }: { stroke: Stroke }) { // LIVE zoom, deliberately not the published one. These are the counter-scaled // chrome elements (connector dots, selection bbox, section-label chips): they // must hold a constant SCREEN size while the world scales. Publishing is // settle-only since the gesture-static change, so reading published zoom here // would let this chrome grow and shrink with the world through a pinch and // then jump back at settle — the visible fidelity-pop a previous LOD attempt // was reverted for. These components render only for selected/hovered // strokes, so tracking the gesture frame-by-frame stays cheap. const zoom = useLiveViewport().zoom || 1; if (!isBindable(stroke)) return null; const center = strokeCenter(stroke); if (!center) return null; const magnets: Array<[number, number]> = [ [0.5, 0], [1, 0.5], [0.5, 1], [0, 0.5], ]; // FigJam parity — the dots float a step OUTSIDE the edge (along the outward // normal), which also keeps them clear of the mid-edge RESIZE handles that // sit exactly on the edge midpoints (DOM, higher layer — they'd swallow the // drag otherwise). Deriving the normal from center→anchor keeps rotated // shapes correct for free. const offset = 16 / zoom; return ( {magnets.map(([nx, ny]) => { const pt = anchorPoint(stroke, nx, ny); if (!pt) return null; const dx = pt[0] - center[0]; const dy = pt[1] - center[1]; const len = Math.hypot(dx, dy) || 1; return ( ); })} ); } /** * FigJam v3 — right-click context menu for annotation strokes. Reuses the * `.dc-context-menu` visual language (stylesheet injected by context-menu.tsx) * so the annotation menu and the canvas menu read as one product surface. */ function AnnotationContextMenu({ pos, selCount, canUngroup, canReplace, canEditPhoto, onAction, onClose, }: { pos: { x: number; y: number }; selCount: number; canUngroup: boolean; /** Stage F3 — exactly one ImageStroke/MediaRefStroke is selected. */ canReplace: boolean; /** feature-photo-editor (Task 17) — exactly one content-addressed ImageStroke. */ canEditPhoto: boolean; onAction: (action: string) => void; onClose: () => void; }) { ensureCtxMenuStyles(); const ref = useRef(null); const [at, setAt] = useState<{ x: number; y: number }>(pos); useEffect(() => { const el = ref.current; if (!el || typeof window === 'undefined') return; const r = el.getBoundingClientRect(); let nx = pos.x; let ny = pos.y; if (nx + r.width > window.innerWidth - 8) nx = Math.max(8, window.innerWidth - r.width - 8); if (ny + r.height > window.innerHeight - 8) ny = Math.max(8, window.innerHeight - r.height - 8); if (nx !== at.x || ny !== at.y) setAt({ x: nx, y: ny }); el.querySelector('button.dc-menu-item:not([disabled])')?.focus(); const onDown = (e: PointerEvent) => { if (isMediaPlayerTarget(e)) return; // mediaref inline player owns this event if (!el.contains(e.target as Node)) onClose(); }; const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') { e.preventDefault(); onClose(); } }; document.addEventListener('pointerdown', onDown, true); document.addEventListener('keydown', onKey, true); return () => { document.removeEventListener('pointerdown', onDown, true); document.removeEventListener('keydown', onKey, true); }; }, [pos, onClose, at.x, at.y]); const item = ( id: string, label: string, shortcut?: string, opts?: { destructive?: boolean; disabled?: boolean } ) => ( ); return (