nudge-ui 0.2.0 → 0.2.2

package/dist/inspector/tokens/tokenAvailability.d.ts

@@ -0,0 +1,18 @@
+import type { TokenDefinition, TokenEntry, TokenTable } from "../../css/model/index.js";
+export declare function buildTokenTable(entries: readonly TokenEntry[]): TokenTable;
+export declare function getTokenTable(): TokenTable;
+/**
+ * The build-time catalog is intentionally an inventory of every project token.
+ * Element edits must instead use only custom properties resolved in that
+ * element's cascade; a token defined by a lazy stylesheet is not usable until
+ * that stylesheet is attached to the document. Entries are cached per element
+ * until the element or stylesheet revision changes; the derived table reuses
+ * `buildTokenTable`'s input-identity memo.
+ */
+export declare function getAvailableTokenEntriesForElement(el: HTMLElement, definitions?: readonly TokenDefinition[]): TokenEntry[];
+/**
+ * Produces the page catalog used by the global Tokens settings section. When
+ * the document exposes mappable source identities, declarations from unloaded
+ * CSS files are removed. Opaque compiled URLs leave the adapter catalog intact.
+ */
+export declare function getAvailableTokenCatalog(root?: HTMLElement, definitions?: readonly TokenDefinition[]): TokenDefinition[];

package/dist/inspector/tokens/tokenAvailability.js

@@ -0,0 +1,204 @@
+import { interpretValue } from "../../css/value-semantics/index.js";
+import { getElementComputedStyle } from "../runtime/domRealm.js";
+import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
+import { createInspectorValueContext } from "./valueSemanticsAdapter.js";
+import { collectRules as collectCssomRules, documentRevisions as getDocumentRevisions, registerResolutionLineage, } from "./resolution/cssomCollector.js";
+const tokenTableMemo = new WeakMap();
+export function buildTokenTable(entries) {
+    const cached = tokenTableMemo.get(entries);
+    if (cached)
+        return cached;
+    const table = {};
+    for (const entry of entries) {
+        table[entry.name] = entry;
+        if (entry.cssName)
+            table[entry.cssName] = entry;
+    }
+    tokenTableMemo.set(entries, table);
+    return table;
+}
+let tableCache = null;
+let tableSource = null;
+export function getTokenTable() {
+    const { tokens } = getNudgeUiRuntimeConfig();
+    if (tableCache !== null && tableSource === tokens)
+        return tableCache;
+    tableCache = buildTokenTable(tokens);
+    tableSource = tokens;
+    return tableCache;
+}
+function isCustomPropertyToken(definition) {
+    return definition.cssName.startsWith("--");
+}
+function entryFromDefinition(definition, value) {
+    return {
+        name: definition.name,
+        cssName: definition.cssName,
+        value,
+        source: definition.declarations[0]?.source ?? "",
+        cssValue: definition.cssValue,
+        adapter: definition.adapter,
+        origin: definition.origin,
+        editable: definition.editable,
+    };
+}
+const tokenEntriesCache = new WeakMap();
+/**
+ * The build-time catalog is intentionally an inventory of every project token.
+ * Element edits must instead use only custom properties resolved in that
+ * element's cascade; a token defined by a lazy stylesheet is not usable until
+ * that stylesheet is attached to the document. Entries are cached per element
+ * until the element or stylesheet revision changes; the derived table reuses
+ * `buildTokenTable`'s input-identity memo.
+ */
+export function getAvailableTokenEntriesForElement(el, definitions = getNudgeUiRuntimeConfig().tokenCatalog) {
+    const revisions = getDocumentRevisions(el.ownerDocument ?? document);
+    const cached = tokenEntriesCache.get(el);
+    if (cached && cached.elementRevision === revisions.element
+        && cached.stylesheetRevision === revisions.stylesheet
+        && cached.definitions === definitions) {
+        return cached.entries;
+    }
+    registerResolutionLineage(el);
+    const computed = getElementComputedStyle(el);
+    const available = definitions.flatMap((definition) => {
+        if (!isCustomPropertyToken(definition)) {
+            // Literal adapters (for example Tailwind v3) do not have a browser
+            // custom property to probe. Their adapter owns their availability.
+            return [entryFromDefinition(definition, definition.declarations[0]?.value ?? "")];
+        }
+        const value = computed.getPropertyValue(definition.cssName).trim();
+        return value ? [entryFromDefinition(definition, value)] : [];
+    });
+    const intermediateTable = buildTokenTable(available);
+    const entries = available.map((entry) => ({
+        ...entry,
+        value: interpretValue("--nudge-ui-token", entry.value, createInspectorValueContext(intermediateTable))[0].resolvedValue,
+    }));
+    tokenEntriesCache.set(el, {
+        elementRevision: revisions.element,
+        stylesheetRevision: revisions.stylesheet,
+        definitions,
+        entries,
+    });
+    return entries;
+}
+/**
+ * Replaces build-time token declaration hints with declarations serialized by
+ * the browser from the stylesheets currently attached to this document.
+ */
+function hydrateTokenCatalogFromCssom(definitions, doc = document) {
+    const needsHydration = (definition) => definition.declarations.length === 0
+        || (definition.adapter === "vanilla-extract" && definition.declarations.every((declaration) => declaration.value.trim() === `var(${definition.cssName})`
+            && !declaration.context.selector
+            && !declaration.context.wrappers?.length));
+    const known = new Set(definitions.filter(needsHydration).map((definition) => definition.cssName));
+    const declarations = new Map();
+    for (const rule of collectCssomRules(doc).rules) {
+        if (rule.source === "#nudge-ui-styles")
+            continue;
+        for (const declaration of rule.declarations) {
+            if (!known.has(declaration.property))
+                continue;
+            const wrappers = [
+                ...(rule.layer ? [{ kind: "layer", params: rule.layer }] : []),
+                ...(rule.atRules ?? []).flatMap((atRule) => atRule.kind === "media" || atRule.kind === "supports"
+                    ? [{ kind: atRule.kind, params: atRule.params }]
+                    : []),
+            ];
+            const list = declarations.get(declaration.property) ?? [];
+            list.push({
+                id: `${declaration.property}\u0000${rule.source ?? "cssom"}\u0000${rule.sourceOrder ?? list.length}`,
+                order: rule.sourceOrder,
+                value: declaration.value,
+                source: rule.source ?? "cssom",
+                important: Boolean(declaration.important),
+                context: {
+                    selector: rule.selectorText,
+                    ...(wrappers.length > 0 ? { wrappers } : {}),
+                },
+            });
+            declarations.set(declaration.property, list);
+        }
+    }
+    return definitions.map((definition) => {
+        if (!needsHydration(definition))
+            return definition;
+        const accepted = declarations.get(definition.cssName);
+        return accepted?.length ? { ...definition, declarations: accepted } : definition;
+    });
+}
+function sourceFile(source) {
+    return source.replace(/:\d+$/, "").split(/[?#]/, 1)[0] ?? source;
+}
+function normalizedPath(value) {
+    return decodeURIComponent(value).replace(/\\/g, "/").replace(/^file:\/\//, "").replace(/\/+$/, "");
+}
+function loadedStylesheetSources(doc) {
+    const sourceIdentityByPath = new Map();
+    for (const node of doc.querySelectorAll('style[data-vite-dev-id], link[rel~="stylesheet"][href]')) {
+        const providesAuthoredIdentity = node.tagName === "STYLE";
+        const source = providesAuthoredIdentity
+            ? node.dataset.viteDevId
+            : node.getAttribute("href");
+        if (!source)
+            continue;
+        const path = normalizedPath(source.split(/[?#]/, 1)[0] ?? source);
+        sourceIdentityByPath.set(path, providesAuthoredIdentity || sourceIdentityByPath.get(path) === true);
+    }
+    return Array.from(sourceIdentityByPath, ([path, providesAuthoredIdentity]) => ({
+        path,
+        providesAuthoredIdentity,
+    }));
+}
+function isLoadedCssSource(source, loadedSources) {
+    const file = sourceFile(source);
+    if (!/\.css$/i.test(file) || loadedSources.length === 0)
+        return true;
+    const normalizedFile = normalizedPath(file);
+    return loadedSources.some((loaded) => loaded === normalizedFile
+        || loaded.endsWith(`/${normalizedFile}`)
+        || normalizedFile.endsWith(`/${loaded}`));
+}
+/**
+ * Returns stylesheet identities only when the browser gave us a complete,
+ * authored-source mapping. A compiled host can expose a mixture of source-like
+ * and opaque CSS URLs; treating the mapped subset as complete would make
+ * declarations behind the opaque URLs look lazy even while their variables are
+ * live in the document.
+ */
+function confidentlyLoadedStylesheetSources(definitions, loadedSources) {
+    const cssSources = definitions.flatMap((definition) => definition.declarations
+        .map((declaration) => declaration.source)
+        .filter((source) => /\.css$/i.test(sourceFile(source))));
+    const known = new Set();
+    for (const loaded of loadedSources) {
+        if (loaded.providesAuthoredIdentity
+            || cssSources.some((source) => isLoadedCssSource(source, [loaded.path]))) {
+            known.add(loaded.path);
+            continue;
+        }
+        // One opaque compiled URL can contain any authored declaration, so the
+        // document does not provide enough evidence to remove unloaded sources.
+        return [];
+    }
+    return [...known];
+}
+/**
+ * Produces the page catalog used by the global Tokens settings section. When
+ * the document exposes mappable source identities, declarations from unloaded
+ * CSS files are removed. Opaque compiled URLs leave the adapter catalog intact.
+ */
+export function getAvailableTokenCatalog(root = document.documentElement, definitions = getNudgeUiRuntimeConfig().tokenCatalog) {
+    const computed = getElementComputedStyle(root);
+    const hydrated = hydrateTokenCatalogFromCssom(definitions, root.ownerDocument ?? document);
+    const loadedSources = confidentlyLoadedStylesheetSources(hydrated, loadedStylesheetSources(root.ownerDocument ?? document));
+    return hydrated.flatMap((definition) => {
+        if (!isCustomPropertyToken(definition))
+            return [definition];
+        if (!computed.getPropertyValue(definition.cssName).trim())
+            return [];
+        const declarations = definition.declarations.filter((declaration) => isLoadedCssSource(declaration.source, loadedSources));
+        return declarations.length > 0 ? [{ ...definition, declarations }] : [];
+    });
+}

package/dist/inspector/ui/Button.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonHTMLAttributes, ReactElement } from "react";
 export type ButtonVariant = "primary" | "secondary" | "quiet" | "danger" | "disabled";
-export type ButtonSize = "default" | "compact";
+export type ButtonSize = "default" | "compact" | "large";
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: ButtonVariant;
     size?: ButtonSize;

package/dist/inspector/ui/Disclosure.d.ts

@@ -0,0 +1,22 @@
+import type { ReactElement, ReactNode } from "react";
+export interface DisclosureProps {
+    readonly title: ReactNode;
+    /** Optional accessory rendered between the label and the chevron (e.g. a count badge). */
+    readonly badge?: ReactNode;
+    readonly children: ReactNode;
+    readonly className?: string;
+    readonly triggerClassName?: string;
+    readonly panelClassName?: string;
+    readonly defaultOpen?: boolean;
+    readonly open?: boolean;
+    readonly onOpenChange?: (open: boolean) => void;
+    /** Keeps panel content in the DOM while collapsed, matching native details behavior. */
+    readonly keepMounted?: boolean;
+    readonly "data-test"?: string;
+    readonly triggerDataTest?: string;
+}
+/**
+ * A single collapsible disclosure built on Base UI Collapsible.
+ * Replaces native details/summary for consistent 12px label styling and chevron.
+ */
+export declare function Disclosure({ title, badge, children, className, triggerClassName, panelClassName, defaultOpen, open, onOpenChange, keepMounted, "data-test": dataTest, triggerDataTest, }: DisclosureProps): ReactElement;

package/dist/inspector/ui/Disclosure.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+import { IconChevronDown } from "@tabler/icons-react";
+/**
+ * A single collapsible disclosure built on Base UI Collapsible.
+ * Replaces native details/summary for consistent 12px label styling and chevron.
+ */
+export function Disclosure({ title, badge, children, className, triggerClassName, panelClassName, defaultOpen, open, onOpenChange, keepMounted = true, "data-test": dataTest, triggerDataTest, }) {
+    function handleOpenChange(next) {
+        onOpenChange?.(next);
+    }
+    return (_jsxs(Collapsible.Root, { className: `disclosure${className ? ` ${className}` : ""}`, "data-test": dataTest, defaultOpen: defaultOpen, open: open, onOpenChange: handleOpenChange, children: [_jsxs(Collapsible.Trigger, { className: `disclosure__trigger${triggerClassName ? ` ${triggerClassName}` : ""}`, "data-test": triggerDataTest, children: [_jsx("span", { className: "disclosure__label", children: title }), badge, _jsx(IconChevronDown, { className: "disclosure__chevron", size: 15, stroke: 2, "aria-hidden": "true" })] }), _jsx(Collapsible.Panel, { keepMounted: keepMounted, className: `disclosure__panel${panelClassName ? ` ${panelClassName}` : ""}`, children: children })] }));
+}

package/dist/inspector/ui/SideValuesField.js

@@ -36,7 +36,7 @@ export function SideValuesField({ label, sides, pairedControls, defaultExpanded
     }
     return (_jsx("div", { className: "side-values", "data-test": dataTest, "data-property": dataProperty, "data-empty": empty ? "true" : undefined, ...(hasPairedControls
             ? { "data-expanded": isExpanded ? "true" : "false" }
-            : {}), children: empty ? (_jsxs("div", { className: "side-values__header", children: [_jsx("span", { className: "side-values__label", children: displayLabel }), emptyAction ?? (_jsx(IconButton, { variant: "quiet", size: "default", "data-test": "add-value", label: `Add ${labelText}`, title: `Add ${labelText}`, onClick: onAdd, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) }))] })) : hasPairedControls ? (_jsxs(_Fragment, { children: [showLabel ? (_jsx("div", { className: "side-values__header", children: _jsx("span", { className: "side-values__label", children: displayLabel }) })) : null, _jsxs("div", { className: "side-values__value-row", children: [isExpanded ? (_jsx(SideControls, { label: label, sides: sides })) : (_jsx("div", { className: "side-values__pairs", role: "group", "aria-label": `${labelText} Grouped Sides`, children: orderedPairedControls.map(({ axis, control, icon }) => (_jsxs(ControlSurface, { className: "side-values__side", "data-test": `pair-value-${axis}`, "data-axis": axis, "aria-label": `${labelText} ${axis === "horizontal" ? "Left And Right" : "Top And Bottom"}`, title: `${labelText} ${axis === "horizontal" ? "Left And Right" : "Top And Bottom"}`, children: [icon ?? _jsx(AxisIndicator, { axis: axis }), _jsx("div", { className: "side-values__control", children: control })] }, axis))) })), _jsx(ToggleButton, { variant: "quiet", size: "default", "data-test": "individual-sides", label: isExpanded ? `Collapse ${labelText} Sides` : `Expand ${labelText} Sides`, title: isExpanded ? "Collapse To Grouped Sides" : "Expand To Individual Sides", pressed: isExpanded, onPressedChange: toggleExpanded, children: _jsx(IconBorderSides, { size: 16, "aria-hidden": "true" }) })] })] })) : (_jsxs(_Fragment, { children: [showLabel ? (_jsx("div", { className: "side-values__header", children: _jsx("span", { className: "side-values__label", children: displayLabel }) })) : null, _jsx(SideControls, { label: label, sides: sides })] })) }));
+            : {}), children: empty ? (_jsxs("div", { className: "side-values__header", children: [_jsx("span", { className: "side-values__label", children: displayLabel }), emptyAction ?? (_jsx(IconButton, { variant: "quiet", size: "default", "data-test": "add-value", label: `Add ${labelText}`, title: `Add ${labelText}`, onClick: onAdd, children: _jsx(IconPlus, { size: 16, "aria-hidden": "true" }) }))] })) : hasPairedControls ? (_jsxs(_Fragment, { children: [showLabel ? (_jsx("div", { className: "side-values__header", children: _jsx("span", { className: "side-values__label", children: displayLabel }) })) : null, _jsxs("div", { className: "side-values__value-row", children: [isExpanded ? (_jsx(SideControls, { label: label, sides: sides })) : (_jsx("div", { className: "side-values__pairs", role: "group", "aria-label": `${labelText} Grouped Sides`, children: orderedPairedControls.map(({ axis, control, icon }) => (_jsxs(ControlSurface, { className: "side-values__side", "data-test": `pair-value-${axis}`, "data-axis": axis, "aria-label": `${labelText} ${axis === "horizontal" ? "Left And Right" : "Top And Bottom"}`, title: `${labelText} ${axis === "horizontal" ? "Left And Right" : "Top And Bottom"}`, children: [icon !== undefined ? icon : _jsx(AxisIndicator, { axis: axis }), _jsx("div", { className: "side-values__control", children: control })] }, axis))) })), _jsx(ToggleButton, { variant: "quiet", size: "default", "data-test": "individual-sides", label: isExpanded ? `Collapse ${labelText} Sides` : `Expand ${labelText} Sides`, title: isExpanded ? "Collapse To Grouped Sides" : "Expand To Individual Sides", pressed: isExpanded, onPressedChange: toggleExpanded, children: _jsx(IconBorderSides, { size: 16, "aria-hidden": "true" }) })] })] })) : (_jsxs(_Fragment, { children: [showLabel ? (_jsx("div", { className: "side-values__header", children: _jsx("span", { className: "side-values__label", children: displayLabel }) })) : null, _jsx(SideControls, { label: label, sides: sides })] })) }));
 }
 export function SideControls({ label, sides, layout = "sides", }) {
     const displayOrder = layout === "corners" ? SIDE_NAMES : SIDE_DISPLAY_ORDER;
@@ -45,7 +45,7 @@ export function SideControls({ label, sides, layout = "sides", }) {
         .filter((slot) => slot !== undefined);
     const labelText = typeof label === "string" ? formatInspectorLabel(label) : String(label);
     const itemGroupLabel = layout === "corners" ? "Individual Corners" : "Individual Sides";
-    return (_jsx("div", { className: "side-values__grid", "data-layout": layout, role: "group", "aria-label": `${labelText} ${itemGroupLabel}`, children: orderedSides.map(({ side, control, icon, sideLabel }) => (_jsxs(ControlSurface, { className: "side-values__side", "data-test": `side-value-${side}`, "data-side": side, "aria-label": `${labelText} ${sideLabel ?? formatInspectorLabel(side)}`, children: [icon ?? _jsx(SideIndicator, { side: side }), _jsx("div", { className: "side-values__control", children: control })] }, side))) }));
+    return (_jsx("div", { className: "side-values__grid", "data-layout": layout, role: "group", "aria-label": `${labelText} ${itemGroupLabel}`, children: orderedSides.map(({ side, control, icon, sideLabel }) => (_jsxs(ControlSurface, { className: "side-values__side", "data-test": `side-value-${side}`, "data-side": side, "aria-label": `${labelText} ${sideLabel ?? formatInspectorLabel(side)}`, children: [icon !== undefined ? icon : _jsx(SideIndicator, { side: side }), _jsx("div", { className: "side-values__control", children: control })] }, side))) }));
 }
 function AxisIndicator({ axis }) {
     const emphasis = axis === "horizontal"

package/dist/inspector/ui/StatusCallout.d.ts

@@ -5,5 +5,8 @@ export interface StatusCalloutProps {
     className?: string;
     "data-test"?: string;
     "data-lost"?: string;
+    role?: "status" | "alert";
+    "aria-live"?: "off" | "polite" | "assertive";
+    "aria-atomic"?: "true" | "false";
 }
-export declare function StatusCallout({ children, tone, className, "data-test": dataTest, "data-lost": dataLost }: StatusCalloutProps): ReactElement;
+export declare function StatusCallout({ children, tone, className, "data-test": dataTest, "data-lost": dataLost, role, "aria-live": ariaLive, "aria-atomic": ariaAtomic, }: StatusCalloutProps): ReactElement;

package/dist/inspector/ui/StatusCallout.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function StatusCallout({ children, tone = "neutral", className, "data-test": dataTest, "data-lost": dataLost }) {
-    return (_jsx("div", { className: `status-callout status-callout--${tone}${className ? ` ${className}` : ""}`, "data-test": dataTest, "data-lost": dataLost, children: children }));
+export function StatusCallout({ children, tone = "neutral", className, "data-test": dataTest, "data-lost": dataLost, role, "aria-live": ariaLive, "aria-atomic": ariaAtomic, }) {
+    return (_jsx("div", { className: `status-callout status-callout--${tone}${className ? ` ${className}` : ""}`, "data-test": dataTest, "data-lost": dataLost, role: role, "aria-live": ariaLive, "aria-atomic": ariaAtomic, children: children }));
 }

package/dist/inspector/ui/dragCursor.d.ts

@@ -0,0 +1,8 @@
+export declare const DRAG_CURSOR_URL: string;
+export declare const DRAG_CURSOR: string;
+export declare const DRAG_CURSOR_STYLES: string;
+/** Shows the same cursor at a fixed viewport point while the native cursor is locked. */
+export declare function showLockedDragCursor(doc: Document, point: {
+    x: number;
+    y: number;
+}): () => void;

package/dist/inspector/ui/dragCursor.js

@@ -0,0 +1,21 @@
+const DRAG_CURSOR_SVG = `<svg width="18" height="9.5" viewBox="0 0 36 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#right)"><path d="M19.1253 13.3682V3.50181C19.1253 2.77104 19.8836 2.28706 20.5464 2.5948L31.1718 7.52799C31.9436 7.88635 31.9436 8.98365 31.1718 9.34201L20.5464 14.2752C19.8836 14.5829 19.1253 14.099 19.1253 13.3682Z" fill="black" stroke="white"/></g>
+<g filter="url(#left)"><path d="M16.1253 13.3682V3.50181C16.1253 2.77104 15.367 2.28706 14.7042 2.5948L4.07889 7.52799C3.30704 7.88635 3.30704 8.98365 4.07889 9.34201L14.7042 14.2752C15.367 14.5829 16.1253 14.099 16.1253 13.3682Z" fill="black" stroke="white"/></g>
+<defs>
+<filter id="right" x="15.6253" y="0" width="19.6253" height="18.87" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="1.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="shadow"/><feBlend mode="normal" in="SourceGraphic" in2="shadow" result="shape"/></filter>
+<filter id="left" x="0" y="0" width="19.6253" height="18.87" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="1.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="shadow"/><feBlend mode="normal" in="SourceGraphic" in2="shadow" result="shape"/></filter>
+</defs></svg>`;
+export const DRAG_CURSOR_URL = `data:image/svg+xml,${encodeURIComponent(DRAG_CURSOR_SVG)}`;
+export const DRAG_CURSOR = `url("${DRAG_CURSOR_URL}") 9 4, ew-resize`;
+export const DRAG_CURSOR_STYLES = `:host { --nudge-drag-cursor: ${DRAG_CURSOR}; }`;
+/** Shows the same cursor at a fixed viewport point while the native cursor is locked. */
+export function showLockedDragCursor(doc, point) {
+    const cursor = doc.createElement("img");
+    cursor.src = DRAG_CURSOR_URL;
+    cursor.alt = "";
+    cursor.setAttribute("aria-hidden", "true");
+    cursor.dataset.test = "locked-drag-cursor";
+    cursor.style.cssText = `all: initial; position: fixed; left: ${point.x - 9}px; top: ${point.y - 4}px; width: 18px; height: 9.5px; pointer-events: none; z-index: 2147483647; user-select: none;`;
+    doc.documentElement.append(cursor);
+    return () => cursor.remove();
+}