@jini-ai/ui 0.5.4 → 0.5.6

package/dist/react/components/select-popover.d.ts

@@ -91,16 +91,18 @@ export declare function openSelectOnKey({ event, open, openPanel }: {
 }, { disabled }?: {
     disabled?: boolean | undefined;
 }): boolean;
+type SelectNavigationActions = {
+    preventDefault: () => void;
+    move: (delta: 1 | -1) => void;
+    edge: (edge: 'first' | 'last') => void;
+    choose: () => void;
+};
 /** Shared keyboard dispatch; adapters map navigation onto their enabled-value or filtered-index contract. */
 export declare function applySelectNavigationKey({ key, actions }: {
     key: string;
-    actions: {
-        preventDefault: () => void;
-        move: (delta: 1 | -1) => void;
-        edge: (edge: 'first' | 'last') => void;
-        choose: () => void;
-    };
+    actions: SelectNavigationActions;
 }, { spaceChooses }?: {
     spaceChooses?: boolean;
 }): boolean;
+export {};
 //# sourceMappingURL=select-popover.d.ts.map

package/dist/react/components/select-popover.js

@@ -8,11 +8,15 @@ const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled
 export function focusableInDomOrder({ exclude }, { root = document } = {}) {
     return Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => !exclude || !exclude.contains(el));
 }
-/** Find the trigger's Tab neighbour, wrapping within its modal dialog to avoid inert page controls. */
-export function resolveTabTarget({ panel, trigger, shiftKey }, _optional = {}) {
+/** The open dialog that owns the trigger, but only when it is modal (its neighbours are inert). */
+function modalDialogOf({ trigger }) {
     const dialog = trigger?.closest("dialog[open]");
     // An open non-modal dialog permits focus outside it; only showModal() creates inert neighbours.
-    const modalDialog = dialog?.matches(":modal") ? dialog : null;
+    return dialog?.matches(":modal") ? dialog : null;
+}
+/** Find the trigger's Tab neighbour, wrapping within its modal dialog to avoid inert page controls. */
+export function resolveTabTarget({ panel, trigger, shiftKey }, _optional = {}) {
+    const modalDialog = modalDialogOf({ trigger });
     const nodes = focusableInDomOrder({ exclude: panel }, { root: modalDialog ?? document });
     const triggerIndex = trigger ? nodes.indexOf(trigger) : -1;
     if (triggerIndex < 0)
@@ -28,23 +32,25 @@ export function resolveSelectPortalContainer({ trigger }, { container } = {}) {
 export function isSelectEventInside({ target, trigger, panel }, _optional = {}) {
     return Boolean(trigger?.contains(target) || panel?.contains(target));
 }
+/** True when the trigger's rect lies wholly outside the viewport on any side. */
+function isOutsideViewport(rect) {
+    return rect.bottom <= 0 || rect.top >= window.innerHeight || rect.right <= 0 || rect.left >= window.innerWidth;
+}
+/** True when hit-testing is available and something unrelated to the trigger is topmost at its centre. */
+function isObscured({ trigger, rect }) {
+    if (typeof document.elementFromPoint !== 'function')
+        return false;
+    const topmostAtCenter = document.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2);
+    return !topmostAtCenter || !(trigger.contains(topmostAtCenter) || topmostAtCenter.contains(trigger));
+}
 /** Apply the variant's geometry port; widget selects additionally dismiss a clipped/obscured trigger. */
 export function repositionSelectPopover({ trigger, measurePosition, setPosition }, { onOutOfView } = {}) {
     if (onOutOfView) {
         const rect = trigger.getBoundingClientRect();
-        const outOfViewport = rect.bottom <= 0 || rect.top >= window.innerHeight || rect.right <= 0 || rect.left >= window.innerWidth;
-        if (outOfViewport) {
+        if (isOutsideViewport(rect) || isObscured({ trigger, rect })) {
             onOutOfView();
             return;
         }
-        if (typeof document.elementFromPoint === 'function') {
-            const topmostAtCenter = document.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2);
-            const obscured = !topmostAtCenter || !(trigger.contains(topmostAtCenter) || topmostAtCenter.contains(trigger));
-            if (obscured) {
-                onOutOfView();
-                return;
-            }
-        }
     }
     setPosition(measurePosition({ trigger }));
 }
@@ -188,23 +194,21 @@ export function openSelectOnKey({ event, open, openPanel }, { disabled } = {}) {
     openPanel();
     return true;
 }
+// A Map rather than an object literal so an inherited key such as `toString` never matches.
+const NAVIGATION_KEY_ACTIONS = new Map([
+    ['ArrowDown', (actions) => actions.move(1)],
+    ['ArrowUp', (actions) => actions.move(-1)],
+    ['Home', (actions) => actions.edge('first')],
+    ['End', (actions) => actions.edge('last')],
+    ['Enter', (actions) => actions.choose()],
+]);
 /** Shared keyboard dispatch; adapters map navigation onto their enabled-value or filtered-index contract. */
 export function applySelectNavigationKey({ key, actions }, { spaceChooses = false } = {}) {
-    if (key === 'ArrowDown' || key === 'ArrowUp') {
-        actions.preventDefault();
-        actions.move(key === 'ArrowDown' ? 1 : -1);
-        return true;
-    }
-    if (key === 'Home' || key === 'End') {
-        actions.preventDefault();
-        actions.edge(key === 'Home' ? 'first' : 'last');
-        return true;
-    }
-    if (key === 'Enter' || (spaceChooses && key === ' ')) {
-        actions.preventDefault();
-        actions.choose();
-        return true;
-    }
-    return false;
+    const apply = spaceChooses && key === ' ' ? NAVIGATION_KEY_ACTIONS.get('Enter') : NAVIGATION_KEY_ACTIONS.get(key);
+    if (!apply)
+        return false;
+    actions.preventDefault();
+    apply(actions);
+    return true;
 }
 //# sourceMappingURL=select-popover.js.map

package/dist/react/mcp-ui/McpUiHost.d.ts

@@ -8,7 +8,7 @@ export interface McpUiHostProps extends McpUiHostOptions {
     /** Follow the View's reported height. Defaults to `true`. */
     readonly autoResize?: boolean;
     /** Ceiling for the followed height, so a View reporting an enormous size cannot push the rest of the page off-screen. */
-    readonly maxHeight?: number;
+    readonly maxHeight?: number | undefined;
 }
 /**
  * Renders a View and runs its protocol session.

package/dist/react/mcp-ui/McpUiHost.js

@@ -16,28 +16,27 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { AppRenderer } from '@mcp-ui/client';
 import { useRef } from 'react';
-import { applyHostSurfaceTokens } from '../../features/mcp-ui/surfaces/host-theme.js';
 import { useHostSurfaceTokens } from './useHostSurfaceTokens.js';
+import { resolveFrameHeight, resolveThemedViewSession } from './mcp-ui-host-frame.js';
 import { useMcpUiHost } from './useMcpUiHost.js';
-const DEFAULT_INITIAL_HEIGHT = 220;
-const DEFAULT_MAX_HEIGHT = 720;
 /**
  * Renders a View and runs its protocol session.
  *
  * @param props - See {@link McpUiHostProps}.
  */
 export function McpUiHost(props) {
-    const { title, className, initialHeight = DEFAULT_INITIAL_HEIGHT, autoResize = true, maxHeight = DEFAULT_MAX_HEIGHT } = props;
+    const { title, className } = props;
     const wrapperRef = useRef(null);
     const hostTokens = useHostSurfaceTokens(wrapperRef);
-    const html = hostTokens === undefined ? props.html : applyHostSurfaceTokens(props.html, hostTokens);
-    // Only a document the theme actually changed takes the theme into its key, so a third-party View
-    // (left untouched) never remounts when the host's theme moves.
-    const sessionKey = `${String(props.sessionKey ?? props.html)}${html === props.html ? '' : JSON.stringify(hostTokens)}`;
+    const { html, sessionKey } = resolveThemedViewSession({ html: props.html, sessionKey: props.sessionKey, hostTokens });
     const host = useMcpUiHost({ ...props, html, sessionKey });
-    const reported = host.size?.height;
-    const height = autoResize && reported !== undefined ? Math.min(Math.max(reported, 1), maxHeight) : initialHeight;
-    return (_jsx("div", { ref: wrapperRef, className: className, "data-mcpui-host": "", "data-mcpui-state": host.state, "aria-label": title, style: { display: 'block', width: '100%', height }, children: hostTokens !== undefined && _jsx(AppRenderer
+    const height = resolveFrameHeight({ reported: host.size?.height }, props);
+    return (_jsx("div", { ref: wrapperRef, className: className, "data-mcpui-host": "", "data-mcpui-state": host.state, "aria-label": title, 
+        // `colorScheme: 'normal'` (inherited by the iframe) keeps the frame see-through on a dark
+        // host. Chrome paints an iframe's canvas OPAQUE (white) whenever the frame element's used
+        // color-scheme differs from its document's, and a surface declares none -- so under a host's
+        // `:root { color-scheme: dark }` every card sat in a white 16px frame (owner, 2026-10-21).
+        style: { display: 'block', width: '100%', height, colorScheme: 'normal' }, children: hostTokens !== undefined && _jsx(AppRenderer
         // Keyed by the session so replacing the document remounts `AppRenderer` — a fresh
         // `AppBridge`, a fresh sandbox iframe, a fresh handshake. `AppRenderer` itself provides no
         // "replace the document in place" mode; remount via `key` is the supported way to start a

package/dist/react/mcp-ui/host-message-source.d.ts

@@ -14,10 +14,22 @@
  * Doing this in a `useEffect` instead loses every message posted between mount-commit and effect-run
  * — a window that a lazy import, a Suspense boundary, or one expensive sibling render makes real.
  *
- * The `typeof window` guard is for SSR: importing this module during a server render must not throw.
+ * The missing-`window` guard in `forwardWindowMessages` is for SSR: importing this module during a server render must not throw.
  * Nothing subscribes there, and the module has no other side effect.
  */
-import { type BufferedWindowMessage } from '../../features/mcp-ui/early-message-buffer.js';
+import { type BufferedWindowMessage, type EarlyMessageBuffer } from '../../features/mcp-ui/early-message-buffer.js';
+/** The slice of `window` the listener needs. */
+export interface MessageEventTarget {
+    addEventListener(type: 'message', listener: (event: MessageEvent) => void): void;
+}
+/**
+ * Forwards every `message` event on `scope.window` into `into`. A scope without a `window` (a
+ * server render) is a no-op — that is the SSR guard, and taking the global scope as a parameter
+ * lets both the browser and the server path be exercised from one test environment.
+ */
+export declare function forwardWindowMessages(scope: {
+    readonly window?: MessageEventTarget;
+}, into: EarlyMessageBuffer): void;
 /** How a Host receives raw window messages. Injectable so a test can drive one without a real `postMessage`. */
 export type ViewMessageSource = (handler: (message: BufferedWindowMessage) => void) => () => void;
 /** The default {@link ViewMessageSource}: the shared, module-scope buffer above. */

package/dist/react/mcp-ui/host-message-source.js

@@ -14,16 +14,26 @@
  * Doing this in a `useEffect` instead loses every message posted between mount-commit and effect-run
  * — a window that a lazy import, a Suspense boundary, or one expensive sibling render makes real.
  *
- * The `typeof window` guard is for SSR: importing this module during a server render must not throw.
+ * The missing-`window` guard in `forwardWindowMessages` is for SSR: importing this module during a server render must not throw.
  * Nothing subscribes there, and the module has no other side effect.
  */
 import { createEarlyMessageBuffer, } from '../../features/mcp-ui/early-message-buffer.js';
-const buffer = createEarlyMessageBuffer();
-if (typeof window !== 'undefined') {
-    window.addEventListener('message', (event) => {
-        buffer.push({ data: event.data, origin: event.origin, source: event.source });
+/**
+ * Forwards every `message` event on `scope.window` into `into`. A scope without a `window` (a
+ * server render) is a no-op — that is the SSR guard, and taking the global scope as a parameter
+ * lets both the browser and the server path be exercised from one test environment.
+ */
+export function forwardWindowMessages(scope, into) {
+    const target = scope.window;
+    if (!target)
+        return;
+    target.addEventListener('message', (event) => {
+        into.push({ data: event.data, origin: event.origin, source: event.source });
     });
 }
+const buffer = createEarlyMessageBuffer();
+// Module scope, on purpose — see the header: this runs at first import, before any Host mounts.
+forwardWindowMessages(globalThis, buffer);
 /** The default {@link ViewMessageSource}: the shared, module-scope buffer above. */
 export const subscribeToViewMessages = (handler) => buffer.subscribe(handler);
 /** Backlogged message count — diagnostics and tests only. */

package/dist/react/mcp-ui/mcp-ui-host-frame.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @module react/mcp-ui/mcp-ui-host-frame
+ *
+ * Pure decisions behind `McpUiHost.tsx`'s chrome — which document a View is handed, which session
+ * key it runs under, and how tall its frame is — kept out of the component so each rule is one
+ * small, directly testable function. No protocol or sandbox decision lives here.
+ */
+import { type HostSurfaceTokens } from '../../features/mcp-ui/surfaces/host-theme.js';
+/** The document a View is mounted with, and the session key that remounts it when it changes. */
+export interface ThemedViewSession {
+    readonly html: string;
+    readonly sessionKey: string;
+}
+/**
+ * Writes the host's live theme into a Jini-built surface document and derives the session key.
+ *
+ * @param input - The caller's document, its optional session key, and the host's tokens
+ *   (`undefined` until the wrapper has been measured).
+ * @returns The document to mount and the key to mount it under.
+ */
+export declare function resolveThemedViewSession(input: {
+    readonly html: string;
+    readonly sessionKey: string | number | undefined;
+    readonly hostTokens: HostSurfaceTokens | undefined;
+}): ThemedViewSession;
+/**
+ * The frame height: the View's reported height (clamped to `[1, maxHeight]`) while following it,
+ * otherwise the fixed initial height.
+ *
+ * @param input - The height the View last reported, if any.
+ * @param options - `initialHeight` (default 220), `autoResize` (default `true`), `maxHeight` (default 720).
+ * @returns The frame height in pixels.
+ */
+export declare function resolveFrameHeight(input: {
+    readonly reported: number | undefined;
+}, options?: {
+    readonly initialHeight?: number;
+    readonly autoResize?: boolean;
+    readonly maxHeight?: number | undefined;
+}): number;
+//# sourceMappingURL=mcp-ui-host-frame.d.ts.map

package/dist/react/mcp-ui/mcp-ui-host-frame.js

@@ -0,0 +1,39 @@
+/**
+ * @module react/mcp-ui/mcp-ui-host-frame
+ *
+ * Pure decisions behind `McpUiHost.tsx`'s chrome — which document a View is handed, which session
+ * key it runs under, and how tall its frame is — kept out of the component so each rule is one
+ * small, directly testable function. No protocol or sandbox decision lives here.
+ */
+import { applyHostSurfaceTokens } from '../../features/mcp-ui/surfaces/host-theme.js';
+const DEFAULT_INITIAL_HEIGHT = 220;
+const DEFAULT_MAX_HEIGHT = 720;
+/**
+ * Writes the host's live theme into a Jini-built surface document and derives the session key.
+ *
+ * @param input - The caller's document, its optional session key, and the host's tokens
+ *   (`undefined` until the wrapper has been measured).
+ * @returns The document to mount and the key to mount it under.
+ */
+export function resolveThemedViewSession(input) {
+    const { hostTokens } = input;
+    const html = hostTokens === undefined ? input.html : applyHostSurfaceTokens(input.html, hostTokens);
+    // Only a document the theme actually changed takes the theme into its key, so a third-party View
+    // (left untouched) never remounts when the host's theme moves.
+    const sessionKey = `${String(input.sessionKey ?? input.html)}${html === input.html ? '' : JSON.stringify(hostTokens)}`;
+    return { html, sessionKey };
+}
+/**
+ * The frame height: the View's reported height (clamped to `[1, maxHeight]`) while following it,
+ * otherwise the fixed initial height.
+ *
+ * @param input - The height the View last reported, if any.
+ * @param options - `initialHeight` (default 220), `autoResize` (default `true`), `maxHeight` (default 720).
+ * @returns The frame height in pixels.
+ */
+export function resolveFrameHeight(input, options = {}) {
+    const { initialHeight = DEFAULT_INITIAL_HEIGHT, autoResize = true, maxHeight = DEFAULT_MAX_HEIGHT } = options;
+    const { reported } = input;
+    return autoResize && reported !== undefined ? Math.min(Math.max(reported, 1), maxHeight) : initialHeight;
+}
+//# sourceMappingURL=mcp-ui-host-frame.js.map

package/dist/renderers/annotation-canvas/react/components/AnnotationCanvas.js

@@ -10,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * `../../source-map.md`.
  */
 import { createPortal } from 'react-dom';
-import { useAnnotationCanvas } from '../hooks/useAnnotationCanvas.js';
+import { useAnnotationCanvas, } from '../hooks/useAnnotationCanvas.js';
 import { DEFAULT_ANNOTATION_CANVAS_ICONS } from './icons.js';
 import { useT } from '../../../react/i18n.js';
 function maybePortal(node, host) {
@@ -18,7 +18,6 @@ function maybePortal(node, host) {
 }
 export function AnnotationCanvas(props) {
     const { children, toolbarHost, icons: iconOverrides, className } = props;
-    const t = useT();
     const icons = { ...DEFAULT_ANNOTATION_CANVAS_ICONS, ...iconOverrides };
     const c = useAnnotationCanvas(props);
     // `c.imagePreviews[c.previewIndex]` is a TS-only possibly-undefined lookup
@@ -29,74 +28,103 @@ export function AnnotationCanvas(props) {
     // unconditionally resets `previewIndex` to `null` in that same update — so
     // this can never actually be `undefined` while `previewIndex !== null`.
     const activePreview = c.previewIndex !== null ? c.imagePreviews[c.previewIndex] : null;
-    return (_jsxs("div", { ref: c.wrapRef, className: className, "data-annotation-canvas-active": props.active ? 'true' : 'false', style: { position: 'absolute', inset: 0, width: '100%', height: '100%' }, children: [children, c.showCanvas ? (_jsx("canvas", { ref: c.canvasRef, onPointerDown: c.onPointerDown, onPointerMove: c.onPointerMove, onPointerUp: c.onPointerUp, onPointerCancel: c.onPointerUp, style: {
-                    position: 'absolute',
-                    inset: 0,
-                    pointerEvents: props.active ? 'auto' : 'none',
-                    cursor: props.active ? (c.markTool === 'text' ? 'text' : 'crosshair') : 'default',
-                    visibility: c.chromeHidden ? 'hidden' : 'visible',
-                    touchAction: 'none',
-                    userSelect: 'none',
-                } })) : null, c.textLayerVisible ? (_jsx("div", { style: { position: 'absolute', inset: 0, pointerEvents: 'none', visibility: c.chromeHidden ? 'hidden' : 'visible' }, children: c.textMarks.map((mark) => (_jsxs("div", { onPointerDown: (e) => c.onTextPointerDown(e, mark), onPointerMove: (e) => c.onTextPointerMove(e, mark), onPointerUp: (e) => c.onTextPointerUp(e, mark), onPointerCancel: (e) => c.onTextPointerUp(e, mark), style: {
-                        position: 'absolute',
-                        left: `${mark.x * 100}%`,
-                        top: `${mark.y * 100}%`,
-                        pointerEvents: c.markTool === 'text' ? 'auto' : 'none',
-                        cursor: mark.editing ? 'default' : 'move',
-                        touchAction: 'none',
-                    }, children: [_jsx("textarea", { ref: (el) => {
-                                c.registerTextArea(mark.id, el);
-                                if (el)
-                                    c.autosizeTextArea(el);
-                            }, value: mark.text, wrap: "off", rows: 1, spellCheck: false, readOnly: !mark.editing, "aria-label": t('Text annotation'), onChange: (e) => {
-                                c.updateTextMark(mark.id, e.target.value);
-                                c.autosizeTextArea(e.currentTarget);
-                            }, onBlur: () => c.handleTextBlur(mark.id), onKeyDown: (e) => {
-                                if (e.key === 'Escape') {
-                                    e.stopPropagation();
-                                    c.handleTextEscape(mark.id, e.currentTarget);
-                                }
-                            }, style: {
-                                display: 'block',
-                                margin: 0,
-                                padding: 0,
-                                border: 'none',
-                                outline: 'none',
-                                background: 'transparent',
-                                resize: 'none',
-                                overflow: 'hidden',
-                                whiteSpace: 'pre',
-                                color: 'var(--jini-danger)',
-                                caretColor: 'var(--jini-danger)',
-                                fontWeight: 600,
-                                fontSize: c.textFontPx,
-                                lineHeight: 1.25,
-                                minWidth: Math.max(2, Math.round(c.textFontPx * 0.5)),
-                                pointerEvents: mark.editing ? 'auto' : 'none',
-                                userSelect: mark.editing ? 'text' : 'none',
-                                cursor: mark.editing ? 'text' : 'move',
-                            } }), c.markTool === 'text' ? (_jsx("button", { type: "button", onPointerDown: (e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                            }, onClick: () => c.removeTextMark(mark.id), "aria-label": t('Remove text annotation'), title: t('Remove text annotation'), children: icons.close() })) : null] }, mark.id))) })) : null, props.active
-                ? maybePortal(_jsxs("div", { ref: c.dockRef, "data-annotation-canvas-dock-layout": c.dockPlacement.layout, "data-annotation-canvas-dock-side": c.dockPlacement.side ?? undefined, style: { position: 'absolute', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, ...c.dockPlacement.style }, children: [c.captureWarning ? (_jsx("div", { role: "status", "aria-live": "polite", style: { visibility: c.chromeHidden ? 'hidden' : undefined }, children: _jsx("span", { children: c.captureWarning.message }) })) : null, c.imagePreviews.length > 0 ? (_jsx("div", { "aria-label": t('Attached images'), style: { display: 'flex', gap: 6, visibility: c.chromeHidden ? 'hidden' : undefined }, children: c.imagePreviews.map((item, i) => (_jsxs("div", { style: { position: 'relative' }, children: [_jsx("button", { type: "button", onClick: () => c.setPreviewIndex(i), disabled: c.sending, title: item.file.name, "aria-label": item.file.name, children: _jsx("img", { src: item.url, alt: "", "aria-hidden": true, style: { width: 44, height: 44, objectFit: 'cover' } }) }), _jsx("button", { type: "button", onClick: () => c.removeExtraFile(i), disabled: c.sending, "aria-label": t('Remove attached image'), title: t('Remove attached image'), children: icons.close() })] }, item.url))) })) : null, _jsxs("div", { role: "toolbar", "aria-label": t('Annotation tools'), style: { display: 'flex', alignItems: 'center', gap: 6, visibility: c.chromeHidden ? 'hidden' : undefined }, children: [_jsxs("div", { style: { position: 'relative' }, ref: c.markToolMenuRef, children: [_jsxs("button", { type: "button", onClick: () => c.setMarkToolMenuOpen(!c.markToolMenuOpen), disabled: c.sending, "aria-haspopup": "menu", "aria-expanded": c.markToolMenuOpen, "aria-label": c.currentMarkTool.label, title: c.currentMarkTool.label, children: [icons[c.currentMarkTool.tool](), icons['chevron-down']()] }), c.markToolMenuOpen ? (_jsx("div", { role: "menu", "aria-label": c.currentMarkTool.label, children: c.markToolOptions.map((item) => {
-                                                const isActive = c.markTool === item.tool;
-                                                return (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": isActive, "aria-label": item.label, disabled: c.sending, onClick: () => c.selectMarkTool(item.tool), children: [icons[item.tool](), _jsx("span", { children: item.label }), isActive ? icons.check() : null] }, item.tool));
-                                            }) })) : null] }), _jsx("button", { type: "button", onClick: c.undoStroke, disabled: !c.canUndo, "aria-label": t('Undo'), title: t('Undo'), children: icons.undo() }), _jsx("button", { type: "button", onClick: c.redoStroke, disabled: !c.canRedo, "aria-label": t('Redo'), title: t('Redo'), children: icons.redo() }), _jsx("input", { ref: c.fileInputRef, type: "file", accept: "image/*", multiple: true, style: { display: 'none' }, onChange: c.onFileInputChange }), _jsx("button", { type: "button", onClick: () => {
-                                        props.onToolbarClick?.('attach_image');
-                                        c.fileInputRef.current?.click();
-                                    }, disabled: c.sending, "aria-label": t('Attach image'), title: t('Attach image'), children: icons.attach() }), _jsx("input", { value: c.note, onChange: (e) => c.setNote(e.target.value), onPaste: c.onNotePaste, disabled: c.sending, placeholder: t('Add a note…'), "aria-label": t('Annotation note'), onCompositionStart: c.onCompositionStart, onCompositionEnd: c.onCompositionEnd, onKeyDown: c.onNoteKeyDown }), _jsxs("div", { style: { position: 'relative', display: 'inline-flex' }, ref: c.submitMenuRef, children: [_jsxs("button", { type: "button", onClick: () => void c.send(c.submitAction), disabled: c.sending || !c.currentSubmit.enabled, "aria-label": c.sending ? c.currentSubmit.pendingLabel : c.currentSubmit.label, title: c.sending ? c.currentSubmit.pendingLabel : c.currentSubmit.title, children: [c.sending ? icons.spinner() : icons[c.submitAction](), _jsx("span", { children: c.currentSubmit.label })] }), _jsx("button", { type: "button", onClick: () => c.setSubmitMenuOpen(!c.submitMenuOpen), disabled: c.sending || !c.canSubmit, "aria-haspopup": "menu", "aria-expanded": c.submitMenuOpen, "aria-label": t('Submit options'), title: t('Submit options'), children: c.submitMenuOpen ? icons['chevron-down']() : icons['chevron-up']() }), c.submitMenuOpen ? (_jsx("div", { role: "menu", "aria-label": t('Submit options'), children: c.submitOptions.map((opt) => {
-                                                const isActive = c.submitAction === opt.action;
-                                                return (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": isActive, "aria-label": opt.label, disabled: !c.sending && opt.enabled ? undefined : true, title: opt.title, onClick: () => c.chooseSubmitAction(opt.action), children: [icons[opt.action](), _jsx("span", { children: opt.label }), isActive ? icons.check() : null] }, opt.action));
-                                            }) })) : null] })] }), _jsx("button", { type: "button", onClick: () => {
-                                props.onToolbarClick?.('exit');
-                                c.closeOverlay();
-                            }, disabled: c.sending, "aria-label": t('Close annotation tools'), title: t('Close annotation tools'), children: icons.close() })] }), toolbarHost)
+    return (_jsxs("div", { ref: c.wrapRef, className: className, "data-annotation-canvas-active": props.active ? 'true' : 'false', style: { position: 'absolute', inset: 0, width: '100%', height: '100%' }, children: [children, c.showCanvas ? _jsx(DrawingCanvas, { c: c, active: props.active }) : null, c.textLayerVisible ? _jsx(TextLayer, { c: c, icons: icons }) : null, props.active
+                ? maybePortal(_jsx(AnnotationDock, { c: c, icons: icons, onToolbarClick: props.onToolbarClick }), toolbarHost)
                 : null, activePreview && typeof document !== 'undefined'
-                ? createPortal(_jsx("div", { role: "dialog", "aria-modal": "true", "aria-label": activePreview.file.name, onMouseDown: (e) => {
-                        if (e.target === e.currentTarget)
-                            c.setPreviewIndex(null);
-                    }, children: _jsxs("div", { children: [_jsxs("div", { children: [_jsx("span", { title: activePreview.file.name, children: activePreview.file.name }), _jsx("button", { type: "button", onClick: () => c.setPreviewIndex(null), "aria-label": t('Close'), title: t('Close'), children: icons.close() })] }), _jsx("img", { src: activePreview.url, alt: activePreview.file.name })] }) }), document.body)
+                ? createPortal(_jsx(ImagePreviewDialog, { c: c, icons: icons, preview: activePreview }), document.body)
                 : null] }));
 }
+function DrawingCanvas({ c, active }) {
+    return (_jsx("canvas", { ref: c.canvasRef, onPointerDown: c.onPointerDown, onPointerMove: c.onPointerMove, onPointerUp: c.onPointerUp, onPointerCancel: c.onPointerUp, style: {
+            position: 'absolute',
+            inset: 0,
+            pointerEvents: active ? 'auto' : 'none',
+            cursor: active ? (c.markTool === 'text' ? 'text' : 'crosshair') : 'default',
+            visibility: c.chromeHidden ? 'hidden' : 'visible',
+            touchAction: 'none',
+            userSelect: 'none',
+        } }));
+}
+function TextLayer({ c, icons }) {
+    return (_jsx("div", { style: { position: 'absolute', inset: 0, pointerEvents: 'none', visibility: c.chromeHidden ? 'hidden' : 'visible' }, children: c.textMarks.map((mark) => (_jsx(TextMarkItem, { c: c, icons: icons, mark: mark }, mark.id))) }));
+}
+function TextMarkItem({ c, icons, mark }) {
+    const t = useT();
+    return (_jsxs("div", { onPointerDown: (e) => c.onTextPointerDown(e, mark), onPointerMove: (e) => c.onTextPointerMove(e, mark), onPointerUp: (e) => c.onTextPointerUp(e, mark), onPointerCancel: (e) => c.onTextPointerUp(e, mark), style: {
+            position: 'absolute',
+            left: `${mark.x * 100}%`,
+            top: `${mark.y * 100}%`,
+            pointerEvents: c.markTool === 'text' ? 'auto' : 'none',
+            cursor: mark.editing ? 'default' : 'move',
+            touchAction: 'none',
+        }, children: [_jsx("textarea", { ref: (el) => {
+                    c.registerTextArea(mark.id, el);
+                    if (el)
+                        c.autosizeTextArea(el);
+                }, value: mark.text, wrap: "off", rows: 1, spellCheck: false, readOnly: !mark.editing, "aria-label": t('Text annotation'), onChange: (e) => {
+                    c.updateTextMark(mark.id, e.target.value);
+                    c.autosizeTextArea(e.currentTarget);
+                }, onBlur: () => c.handleTextBlur(mark.id), onKeyDown: (e) => {
+                    if (e.key === 'Escape') {
+                        e.stopPropagation();
+                        c.handleTextEscape(mark.id, e.currentTarget);
+                    }
+                }, style: {
+                    display: 'block',
+                    margin: 0,
+                    padding: 0,
+                    border: 'none',
+                    outline: 'none',
+                    background: 'transparent',
+                    resize: 'none',
+                    overflow: 'hidden',
+                    whiteSpace: 'pre',
+                    color: 'var(--jini-danger)',
+                    caretColor: 'var(--jini-danger)',
+                    fontWeight: 600,
+                    fontSize: c.textFontPx,
+                    lineHeight: 1.25,
+                    minWidth: Math.max(2, Math.round(c.textFontPx * 0.5)),
+                    pointerEvents: mark.editing ? 'auto' : 'none',
+                    userSelect: mark.editing ? 'text' : 'none',
+                    cursor: mark.editing ? 'text' : 'move',
+                } }), c.markTool === 'text' ? (_jsx("button", { type: "button", onPointerDown: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, onClick: () => c.removeTextMark(mark.id), "aria-label": t('Remove text annotation'), title: t('Remove text annotation'), children: icons.close() })) : null] }));
+}
+function AnnotationDock({ c, icons, onToolbarClick, }) {
+    const t = useT();
+    return (_jsxs("div", { ref: c.dockRef, "data-annotation-canvas-dock-layout": c.dockPlacement.layout, "data-annotation-canvas-dock-side": c.dockPlacement.side ?? undefined, style: { position: 'absolute', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, ...c.dockPlacement.style }, children: [c.captureWarning ? (_jsx("div", { role: "status", "aria-live": "polite", style: { visibility: c.chromeHidden ? 'hidden' : undefined }, children: _jsx("span", { children: c.captureWarning.message }) })) : null, c.imagePreviews.length > 0 ? _jsx(AttachedImages, { c: c, icons: icons }) : null, _jsxs("div", { role: "toolbar", "aria-label": t('Annotation tools'), style: { display: 'flex', alignItems: 'center', gap: 6, visibility: c.chromeHidden ? 'hidden' : undefined }, children: [_jsx(MarkToolPicker, { c: c, icons: icons }), _jsx("button", { type: "button", onClick: c.undoStroke, disabled: !c.canUndo, "aria-label": t('Undo'), title: t('Undo'), children: icons.undo() }), _jsx("button", { type: "button", onClick: c.redoStroke, disabled: !c.canRedo, "aria-label": t('Redo'), title: t('Redo'), children: icons.redo() }), _jsx("input", { ref: c.fileInputRef, type: "file", accept: "image/*", multiple: true, style: { display: 'none' }, onChange: c.onFileInputChange }), _jsx("button", { type: "button", onClick: () => {
+                            onToolbarClick?.('attach_image');
+                            c.fileInputRef.current?.click();
+                        }, disabled: c.sending, "aria-label": t('Attach image'), title: t('Attach image'), children: icons.attach() }), _jsx("input", { value: c.note, onChange: (e) => c.setNote(e.target.value), onPaste: c.onNotePaste, disabled: c.sending, placeholder: t('Add a note…'), "aria-label": t('Annotation note'), onCompositionStart: c.onCompositionStart, onCompositionEnd: c.onCompositionEnd, onKeyDown: c.onNoteKeyDown }), _jsx(SubmitPicker, { c: c, icons: icons })] }), _jsx("button", { type: "button", onClick: () => {
+                    onToolbarClick?.('exit');
+                    c.closeOverlay();
+                }, disabled: c.sending, "aria-label": t('Close annotation tools'), title: t('Close annotation tools'), children: icons.close() })] }));
+}
+function AttachedImages({ c, icons }) {
+    const t = useT();
+    return (_jsx("div", { "aria-label": t('Attached images'), style: { display: 'flex', gap: 6, visibility: c.chromeHidden ? 'hidden' : undefined }, children: c.imagePreviews.map((item, i) => (_jsxs("div", { style: { position: 'relative' }, children: [_jsx("button", { type: "button", onClick: () => c.setPreviewIndex(i), disabled: c.sending, title: item.file.name, "aria-label": item.file.name, children: _jsx("img", { src: item.url, alt: "", "aria-hidden": true, style: { width: 44, height: 44, objectFit: 'cover' } }) }), _jsx("button", { type: "button", onClick: () => c.removeExtraFile(i), disabled: c.sending, "aria-label": t('Remove attached image'), title: t('Remove attached image'), children: icons.close() })] }, item.url))) }));
+}
+function MarkToolPicker({ c, icons }) {
+    return (_jsxs("div", { style: { position: 'relative' }, ref: c.markToolMenuRef, children: [_jsxs("button", { type: "button", onClick: () => c.setMarkToolMenuOpen(!c.markToolMenuOpen), disabled: c.sending, "aria-haspopup": "menu", "aria-expanded": c.markToolMenuOpen, "aria-label": c.currentMarkTool.label, title: c.currentMarkTool.label, children: [icons[c.currentMarkTool.tool](), icons['chevron-down']()] }), c.markToolMenuOpen ? (_jsx("div", { role: "menu", "aria-label": c.currentMarkTool.label, children: c.markToolOptions.map((item) => {
+                    const isActive = c.markTool === item.tool;
+                    return (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": isActive, "aria-label": item.label, disabled: c.sending, onClick: () => c.selectMarkTool(item.tool), children: [icons[item.tool](), _jsx("span", { children: item.label }), isActive ? icons.check() : null] }, item.tool));
+                }) })) : null] }));
+}
+function SubmitPicker({ c, icons }) {
+    const t = useT();
+    return (_jsxs("div", { style: { position: 'relative', display: 'inline-flex' }, ref: c.submitMenuRef, children: [_jsxs("button", { type: "button", onClick: () => void c.send(c.submitAction), disabled: c.sending || !c.currentSubmit.enabled, "aria-label": c.sending ? c.currentSubmit.pendingLabel : c.currentSubmit.label, title: c.sending ? c.currentSubmit.pendingLabel : c.currentSubmit.title, children: [c.sending ? icons.spinner() : icons[c.submitAction](), _jsx("span", { children: c.currentSubmit.label })] }), _jsx("button", { type: "button", onClick: () => c.setSubmitMenuOpen(!c.submitMenuOpen), disabled: c.sending || !c.canSubmit, "aria-haspopup": "menu", "aria-expanded": c.submitMenuOpen, "aria-label": t('Submit options'), title: t('Submit options'), children: c.submitMenuOpen ? icons['chevron-down']() : icons['chevron-up']() }), c.submitMenuOpen ? (_jsx("div", { role: "menu", "aria-label": t('Submit options'), children: c.submitOptions.map((opt) => {
+                    const isActive = c.submitAction === opt.action;
+                    return (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": isActive, "aria-label": opt.label, disabled: !c.sending && opt.enabled ? undefined : true, title: opt.title, onClick: () => c.chooseSubmitAction(opt.action), children: [icons[opt.action](), _jsx("span", { children: opt.label }), isActive ? icons.check() : null] }, opt.action));
+                }) })) : null] }));
+}
+function ImagePreviewDialog({ c, icons, preview }) {
+    const t = useT();
+    return (_jsx("div", { role: "dialog", "aria-modal": "true", "aria-label": preview.file.name, onMouseDown: (e) => {
+            if (e.target === e.currentTarget)
+                c.setPreviewIndex(null);
+        }, children: _jsxs("div", { children: [_jsxs("div", { children: [_jsx("span", { title: preview.file.name, children: preview.file.name }), _jsx("button", { type: "button", onClick: () => c.setPreviewIndex(null), "aria-label": t('Close'), title: t('Close'), children: icons.close() })] }), _jsx("img", { src: preview.url, alt: preview.file.name })] }) }));
+}
 //# sourceMappingURL=AnnotationCanvas.js.map