nudge-ui 0.2.2 → 0.2.3

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 !== 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 })] })) }));
+            : {}), 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}`, 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"}`, 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`, 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;

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

@@ -0,0 +1,26 @@
+import type { ReactElement, ReactNode } from "react";
+export interface TooltipGroupProps {
+    children?: ReactNode;
+    delay?: number;
+    closeDelay?: number;
+    timeout?: number;
+}
+export declare function TooltipGroup({ children, delay, closeDelay, timeout, }: TooltipGroupProps): ReactElement;
+export interface TooltipProps {
+    children: ReactElement;
+    content?: ReactNode;
+    shortcut?: ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+    delay?: number;
+    closeDelay?: number;
+    disableFocus?: boolean;
+    disabled?: boolean;
+    stableTrigger?: boolean;
+    triggerClassName?: string;
+    positionerClassName?: string;
+    popupClassName?: string;
+    "data-test"?: string;
+}
+export declare function Tooltip({ children, content, shortcut, side, align, sideOffset, delay, closeDelay, disableFocus, disabled, stableTrigger, triggerClassName, positionerClassName, popupClassName, "data-test": dataTest, }: TooltipProps): ReactElement;

package/dist/inspector/ui/Tooltip.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { cx } from "./classNames.js";
+import { portalContainer } from "./portalContainer.js";
+export function TooltipGroup({ children, delay = 500, closeDelay = 0, timeout = 400, }) {
+    return (_jsx(BaseTooltip.Provider, { delay: delay, closeDelay: closeDelay, timeout: timeout, children: children }));
+}
+function isDisabledTrigger(element) {
+    // SAFETY: Inspector triggers are host elements with optional disabled props.
+    return Boolean(element.props.disabled);
+}
+function defaultTooltipContent(element) {
+    // SAFETY: Inspector triggers carry label or aria-label for tooltip text.
+    const props = element.props;
+    return props.label ?? props["aria-label"] ?? null;
+}
+function preventFocusOpening(event) {
+    if (!("preventBaseUIHandler" in event))
+        return;
+    // SAFETY: The `in` guard proves preventBaseUIHandler exists on this Base UI focus event.
+    const preventBaseUIHandler = event.preventBaseUIHandler;
+    if (typeof preventBaseUIHandler === "function")
+        preventBaseUIHandler();
+}
+export function Tooltip({ children, content, shortcut, side = "top", align = "center", sideOffset = 8, delay, closeDelay, disableFocus = false, disabled = false, stableTrigger = false, triggerClassName, positionerClassName, popupClassName, "data-test": dataTest, }) {
+    if (disabled)
+        return children;
+    const childDisabled = isDisabledTrigger(children);
+    const trigger = stableTrigger || childDisabled ? (_jsx("span", { className: cx("tooltip__trigger", triggerClassName), "data-tooltip-trigger-disabled": childDisabled ? "" : undefined, children: children })) : children;
+    const tooltipContent = content ?? defaultTooltipContent(children);
+    return (_jsxs(BaseTooltip.Root, { disableHoverablePopup: true, children: [_jsx(BaseTooltip.Trigger, { render: trigger, delay: delay, closeDelay: closeDelay, onFocus: disableFocus ? preventFocusOpening : undefined }), _jsx(BaseTooltip.Portal, { container: portalContainer(), children: _jsx(BaseTooltip.Positioner, { className: cx("tooltip__positioner", positionerClassName), side: side, align: align, sideOffset: sideOffset, children: _jsxs(BaseTooltip.Popup, { className: cx("tooltip__popup", popupClassName), "data-test": dataTest, children: [_jsx("div", { className: "tooltip__content", children: tooltipContent }), shortcut !== undefined ? _jsx("span", { className: "tooltip__shortcut", children: shortcut }) : null] }) }) })] }));
+}

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

@@ -0,0 +1,2 @@
+/** Joins truthy class names with spaces. */
+export declare function cx(...classNames: ReadonlyArray<string | false | null | undefined>): string;

package/dist/inspector/ui/classNames.js

@@ -0,0 +1,4 @@
+/** Joins truthy class names with spaces. */
+export function cx(...classNames) {
+    return classNames.filter(Boolean).join(" ");
+}

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

@@ -0,0 +1,23 @@
+export type RendererCursor = "design" | "drag" | "comment";
+/** Custom property the renderer sets on its root to drive the interaction cursor. */
+export declare const INTERACTION_CURSOR_PROPERTY = "--nudge-ui-interaction-cursor";
+/** Rendered size and hotspot of the drag cursor, shared with the pointer-lock stand-in. */
+export declare const DRAG_CURSOR_SIZE: {
+    readonly width: 28.8;
+    readonly height: 24;
+};
+export declare const DRAG_CURSOR_HOTSPOT: {
+    readonly x: 14.4;
+    readonly y: 12;
+};
+export declare const DESIGN_SELECT_CURSOR_URL: string;
+export declare const DRAG_CURSOR_URL: string;
+export declare const SKETCH_CURSOR_URL: string;
+export declare const DESIGN_SELECT_CURSOR: string;
+/** Cursor SVGs are separate images, so resolve CSS tokens before encoding them. */
+export declare function createCommentCursor(tokenSource?: Element | null): string;
+export declare const COMMENT_CURSOR: string;
+export declare const PAN_CURSOR = "grab";
+export declare const DRAG_CURSOR: string;
+export declare const SKETCH_CURSOR: string;
+export declare function rendererCursorValue(cursor: RendererCursor, commentCursor?: string): string;

package/dist/inspector/ui/customCursors.js

@@ -0,0 +1,122 @@
+const foundationStyles = ":host {\n  all: initial;\n  --surface-panel: #F5F5F4;\n  --surface-control: var(--surface-well);\n  --surface-control-hover: var(--surface-well-2x);\n  --surface-raised: #FAFAFA;\n  --surface-raised-2x: #fff ;\n  --surface-raised-hover: #F5F5F4;\n  --surface-well: hsla(0, 0%, 0%, 0.05);\n  --surface-well-2x: hsla(0, 0%, 0%, 0.10);\n\n  --border-subtle: hsla(0, 0%, 0%, 0.1);\n  --border-medium: hsla(0, 0%, 0%, 0.2);\n  --border-strong: #d8d8d8;\n\n  --text-primary: #242424;\n  --text-secondary: #6f6f6f;\n  --text-muted: #777777;\n  --text-muted-subtle: #a1a1a1;\n\n  --accent: #0096ff;\n  --accent-surface: rgba(0, 176, 255, 0.15);\n  --warning: #d97706;\n  --warning-text: #9a5b00;\n  --warning-surface: #fff6e5;\n  --danger: #df4b4b;\n  --danger-text: #bd3636;\n  --danger-surface: rgba(223, 75, 75, 0.2);\n  --success: #2e7d52;\n\n  --space-0: 0;\n  --space-4: 4px;\n  --space-8: 8px;\n  --space-12: 12px;\n  --space-16: 16px;\n  --space-20: 20px;\n  --space-24: 24px;\n  --space-32: 32px;\n  --space-40: 40px;\n  --space-48: 48px;\n\n  /* Radius */\n  --radius-0: 0;\n  --radius-4: 4px;\n  --radius-8: 8px;\n  --radius-12: 12px;\n  --radius-16: 16px;\n  --radius-20: 20px;\n  --radius-24: 24px;\n  --radius-pill: 999px;\n\n  --radius-control: var(--radius-8);\n  --shadow-outline: 0 0 0 1px rgba(0, 0, 0, 0.05);\n  --shadow-popup: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.10);\n  --shadow-control: inset 0 -2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.25);\n  --z-index: 2147483647;\n\n  --font-family: \"Inter Variable\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --font-size-base: 12px;\n  --font-size-small: 10px;\n  --font-weight-base: 400;\n  --font-weight-label: 600;\n\n  /* Control semantic sizes */\n  --control-height-small: 24px;\n  --control-height-large: 32px;\n  --control-height-xlarge: 40px;\n  --label-column: 104px;\n\n  --icon-size-small: 16px;\n  --icon-size-large: 20px;\n  --icon-stroke-width: 1.5px;\n\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-index);\n  pointer-events: none;\n  font-family: var(--font-family);\n  background: transparent;\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nbutton,\ninput,\nselect {\n  font-family: inherit;\n}\n";
+/** Custom property the renderer sets on its root to drive the interaction cursor. */
+export const INTERACTION_CURSOR_PROPERTY = "--nudge-ui-interaction-cursor";
+const DESIGN_SELECT_CURSOR_SVG = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1681_15)">
+<g filter="url(#filter0_d_1681_15)">
+<path d="M17.3586 9.11501L12.9167 10.8333L12.6544 10.95C12.457 11.0271 12.2776 11.1443 12.1278 11.2942C11.9779 11.444 11.8607 11.6234 11.7836 11.8208L9.94861 16.5242C9.42111 17.8783 7.47944 17.8058 7.05444 16.4158L3.40277 4.48418C3.04277 3.30918 4.14277 2.21001 5.31777 2.56918L17.2503 6.22085C18.6403 6.64668 18.7128 8.58668 17.3586 9.11501Z" fill="black"/>
+<path d="M17.3586 9.11501L12.9167 10.8333L12.6544 10.95C12.457 11.0271 12.2776 11.1443 12.1278 11.2942C11.9779 11.444 11.8607 11.6234 11.7836 11.8208L9.94861 16.5242C9.42111 17.8783 7.47944 17.8058 7.05444 16.4158L3.40277 4.48418C3.04277 3.30918 4.14277 2.21001 5.31777 2.56918L17.2503 6.22085C18.6403 6.64668 18.7128 8.58668 17.3586 9.11501Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_1681_15" x="0.332611" y="0.332662" width="21.002" height="21.0009" 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="0.833333"/>
+<feGaussianBlur stdDeviation="1.25"/>
+<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="effect1_dropShadow_1681_15"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1681_15" result="shape"/>
+</filter>
+<clipPath id="clip0_1681_15">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>`;
+/** Rendered size and hotspot of the drag cursor, shared with the pointer-lock stand-in. */
+export const DRAG_CURSOR_SIZE = { width: 28.8, height: 24 };
+export const DRAG_CURSOR_HOTSPOT = { x: 14.4, y: 12 };
+const DRAG_CURSOR_SVG = `<svg width="${DRAG_CURSOR_SIZE.width}" height="${DRAG_CURSOR_SIZE.height}" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1681_26)">
+<path d="M13.2767 13.6586V7.616C13.2767 7.17654 13.736 6.88812 14.1318 7.07897L20.3982 10.1003C20.8478 10.3171 20.8478 10.9575 20.3982 11.1743L14.1318 14.1956C13.736 14.3864 13.2767 14.098 13.2767 13.6586Z" fill="black"/>
+<path d="M13.2767 13.6586V7.616C13.2767 7.17654 13.736 6.88812 14.1318 7.07897L20.3982 10.1003C20.8478 10.3171 20.8478 10.9575 20.3982 11.1743L14.1318 14.1956C13.736 14.3864 13.2767 14.098 13.2767 13.6586Z" stroke="white"/>
+</g>
+<g filter="url(#filter1_d_1681_26)">
+<path d="M9.74729 13.6586V7.616C9.74729 7.17654 9.28803 6.88812 8.89218 7.07897L2.62582 10.1003C2.17614 10.3171 2.17614 10.9575 2.62582 11.1743L8.89218 14.1956C9.28803 14.3864 9.74729 14.098 9.74729 13.6586Z" fill="black"/>
+<path d="M9.74729 13.6586V7.616C9.74729 7.17654 9.28803 6.88812 8.89218 7.07897L2.62582 10.1003C2.17614 10.3171 2.17614 10.9575 2.62582 11.1743L8.89218 14.1956C9.28803 14.3864 9.74729 14.098 9.74729 13.6586Z" stroke="white"/>
+</g>
+<defs>
+<filter id="filter0_d_1681_26" x="10.9881" y="5.32606" width="12.0358" height="11.8148" 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="0.596185"/>
+<feGaussianBlur stdDeviation="0.894277"/>
+<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="effect1_dropShadow_1681_26"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1681_26" result="shape"/>
+</filter>
+<filter id="filter1_d_1681_26" x="4.76837e-06" y="5.32606" width="12.0358" height="11.8148" 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="0.596185"/>
+<feGaussianBlur stdDeviation="0.894277"/>
+<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="effect1_dropShadow_1681_26"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1681_26" result="shape"/>
+</filter>
+</defs>
+</svg>`;
+const SKETCH_CURSOR_SVG = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1681_8)">
+<g filter="url(#filter0_d_1681_8)">
+<path d="M11.6667 5L17.5 10.8333L14.1667 14.1667" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.62132 15.6544C5.33535 15.5359 5.07552 15.3622 4.85667 15.1433C4.63776 14.9245 4.46411 14.6647 4.34563 14.3787C4.22715 14.0927 4.16617 13.7862 4.16617 13.4767C4.16617 13.1671 4.22715 12.8606 4.34563 12.5746C4.46411 12.2887 4.63776 12.0288 4.85667 11.81L13.6783 2.98833C13.8331 2.8335 14.0169 2.71067 14.2191 2.62687C14.4214 2.54307 14.6382 2.49994 14.8571 2.49994C15.076 2.49994 15.2928 2.54307 15.495 2.62687C15.6973 2.71067 15.8811 2.8335 16.0358 2.98833L17.0117 3.96417C17.1665 4.11894 17.2893 4.3027 17.3731 4.50495C17.4569 4.70721 17.5001 4.92399 17.5001 5.14292C17.5001 5.36184 17.4569 5.57862 17.3731 5.78088C17.2893 5.98313 17.1665 6.16689 17.0117 6.32167L8.19 15.1433C7.97116 15.3622 7.71133 15.5359 7.42536 15.6544C7.13939 15.7729 6.83288 15.8338 6.52334 15.8338C6.2138 15.8338 5.90729 15.7729 5.62132 15.6544Z" fill="white" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.33334 16.6667L4.80668 15.1934" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_1681_8" x="0.333344" y="0.333272" width="20.1667" height="20.1667" 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="0.833333"/>
+<feGaussianBlur stdDeviation="1.25"/>
+<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="effect1_dropShadow_1681_8"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1681_8" result="shape"/>
+</filter>
+<clipPath id="clip0_1681_8">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>`;
+function cursorDataUrl(svg) {
+    return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+export const DESIGN_SELECT_CURSOR_URL = cursorDataUrl(DESIGN_SELECT_CURSOR_SVG);
+export const DRAG_CURSOR_URL = cursorDataUrl(DRAG_CURSOR_SVG);
+export const SKETCH_CURSOR_URL = cursorDataUrl(SKETCH_CURSOR_SVG);
+export const DESIGN_SELECT_CURSOR = `url("${DESIGN_SELECT_CURSOR_URL}") 3 4, default`;
+/** Cursor SVGs are separate images, so resolve CSS tokens before encoding them. */
+export function createCommentCursor(tokenSource) {
+    const styles = tokenSource?.ownerDocument.defaultView?.getComputedStyle(tokenSource);
+    const token = (name) => styles?.getPropertyValue(name).trim()
+        || foundationStyles.match(new RegExp(`${name}:\\s*([^;]+);`))[1].trim();
+    const svg = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#comment-clip)"><g filter="url(#comment-shadow)">
+<path d="M4.3 16.1L3 20L7.7 19C11.659 20.922 16.608 19.942 19.274 16.707C21.94 13.472 21.5 8.983 18.245 6.206C14.99 3.43 9.926 3.225 6.4 5.726C2.874 8.228 1.976 12.663 4.3 16.1Z" fill="${token("--text-primary")}" stroke="${token("--surface-raised-2x")}" stroke-width="${token("--icon-stroke-width")}" stroke-linecap="round" stroke-linejoin="round"/>
+</g></g>
+<defs>
+<filter id="comment-shadow" x="-0.0000152588" y="1.81214" width="24.0141" height="22.0212" 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="0.833333"/><feGaussianBlur stdDeviation="1.25"/>
+<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="dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="dropShadow" result="shape"/>
+</filter>
+<clipPath id="comment-clip"><rect width="24" height="24" fill="white"/></clipPath>
+</defs></svg>`;
+    return `url("${cursorDataUrl(svg)}") 3 20, crosshair`;
+}
+export const COMMENT_CURSOR = createCommentCursor();
+export const PAN_CURSOR = "grab";
+export const DRAG_CURSOR = `url("${DRAG_CURSOR_URL}") ${DRAG_CURSOR_HOTSPOT.x} ${DRAG_CURSOR_HOTSPOT.y}, grab`;
+export const SKETCH_CURSOR = `url("${SKETCH_CURSOR_URL}") 3 17, crosshair`;
+export function rendererCursorValue(cursor, commentCursor = COMMENT_CURSOR) {
+    return cursor === "comment" ? commentCursor : cursor === "drag" ? PAN_CURSOR : DESIGN_SELECT_CURSOR;
+}

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

@@ -1,5 +1,3 @@
-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: {

package/dist/inspector/ui/dragCursor.js

@@ -1,12 +1,4 @@
-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`;
+import { DRAG_CURSOR, DRAG_CURSOR_HOTSPOT, DRAG_CURSOR_SIZE, DRAG_CURSOR_URL } from "./customCursors.js";
 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) {
@@ -15,7 +7,7 @@ export function showLockedDragCursor(doc, point) {
     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;`;
+    cursor.style.cssText = `all: initial; position: fixed; left: ${point.x - DRAG_CURSOR_HOTSPOT.x}px; top: ${point.y - DRAG_CURSOR_HOTSPOT.y}px; width: ${DRAG_CURSOR_SIZE.width}px; height: ${DRAG_CURSOR_SIZE.height}px; pointer-events: none; z-index: 2147483647; user-select: none;`;
     doc.documentElement.append(cursor);
     return () => cursor.remove();
 }

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

@@ -0,0 +1,2 @@
+/** Portal target inside the inspector's shadow root, so popups inherit its styles. */
+export declare function portalContainer(): HTMLElement | ShadowRoot | null;

package/dist/inspector/ui/portalContainer.js

@@ -0,0 +1,6 @@
+/** Portal target inside the inspector's shadow root, so popups inherit its styles. */
+export function portalContainer() {
+    if (typeof document === "undefined")
+        return null;
+    return document.getElementById("nudge-ui-root")?.shadowRoot ?? document.body;
+}