nudge-ui 0.2.1 → 0.2.3

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/InlineStyleWarning.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement } from "react";
+export interface InlineStyleWarningProps {
+    /** Inline declaration blocking the field; renders nothing when null. */
+    blockedBy: string | null;
+    dataTest?: string;
+    tooltipDataTest?: string;
+    className?: string;
+    symbolClassName?: string;
+}
+export declare function inlineStyleWarningContent(blockedBy: string | null): ReactElement | undefined;
+export declare function InlineStyleWarning({ blockedBy, dataTest, tooltipDataTest, className, symbolClassName, }: InlineStyleWarningProps): ReactElement | null;

package/dist/inspector/ui/InlineStyleWarning.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./classNames.js";
+import { Tooltip } from "./Tooltip.js";
+export function inlineStyleWarningContent(blockedBy) {
+    if (blockedBy === null)
+        return undefined;
+    return (_jsx("div", { className: "at-rule-tooltip__rules", children: _jsxs("div", { className: "at-rule-tooltip__rule at-rule-tooltip__rule--active", children: ["Set inline (", _jsx("code", { children: blockedBy }), "). Previews can't beat inline styles \u2014 move it to a stylesheet to edit it here."] }) }));
+}
+export function InlineStyleWarning({ blockedBy, dataTest = "inline-style-warning", tooltipDataTest, className, symbolClassName, }) {
+    if (blockedBy === null)
+        return null;
+    return (_jsx(Tooltip, { content: inlineStyleWarningContent(blockedBy), delay: 0, positionerClassName: "at-rule-tooltip-positioner", popupClassName: "at-rule-tooltip", "data-test": tooltipDataTest, children: _jsx("button", { type: "button", className: cx("inline-style-warning", className), "data-test": dataTest, "aria-label": `Blocked by inline style: ${blockedBy}`, children: _jsx("span", { className: cx("inline-style-warning__symbol", symbolClassName), "aria-hidden": "true", children: "!" }) }) }));
+}

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

@@ -7,6 +7,7 @@ export interface InspectorPopoverProps {
     side?: "top" | "bottom" | "left" | "right";
     align?: "start" | "center" | "end";
     sideOffset?: number;
+    triggerTooltip?: ReactNode;
     "data-test"?: string;
 }
 /**
@@ -14,4 +15,4 @@ export interface InspectorPopoverProps {
  * listbox popover, this leaves the popup content to the caller for compound
  * settings panels and field controls.
  */
-export declare function InspectorPopover({ triggerElement, children, open, onOpenChange, side, align, sideOffset, "data-test": dataTest, }: InspectorPopoverProps): ReactElement;
+export declare function InspectorPopover({ triggerElement, children, open, onOpenChange, side, align, sideOffset, triggerTooltip, "data-test": dataTest, }: InspectorPopoverProps): ReactElement;

package/dist/inspector/ui/InspectorPopover.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Popover as BasePopover } from "@base-ui/react/popover";
+import { Tooltip } from "./Tooltip.js";
+import { portalContainer } from "./portalContainer.js";
 /**
  * Base UI popover anchored inside the inspector shadow root. Unlike the
  * listbox popover, this leaves the popup content to the caller for compound
  * settings panels and field controls.
  */
-export function InspectorPopover({ triggerElement, children, open, onOpenChange, side = "bottom", align = "center", sideOffset = 6, "data-test": dataTest, }) {
-    const portalContainer = typeof document !== "undefined"
-        ? document.getElementById("nudge-ui-root")?.shadowRoot ?? document.body
-        : null;
-    return (_jsxs(BasePopover.Root, { open: open, onOpenChange: onOpenChange, children: [_jsx(BasePopover.Trigger, { render: triggerElement, "data-test": dataTest }), _jsx(BasePopover.Portal, { container: portalContainer, children: _jsx(BasePopover.Positioner, { className: "inspector-popover__positioner", side: side, align: align, sideOffset: sideOffset, children: _jsx(BasePopover.Popup, { className: "inspector-popover__popup", "data-test": dataTest ? `${dataTest}-popover` : undefined, children: children }) }) })] }));
+export function InspectorPopover({ triggerElement, children, open, onOpenChange, side = "bottom", align = "center", sideOffset = 6, triggerTooltip, "data-test": dataTest, }) {
+    return (_jsxs(BasePopover.Root, { open: open, onOpenChange: onOpenChange, children: [_jsx(Tooltip, { content: triggerTooltip, disabled: triggerTooltip === undefined, children: _jsx(BasePopover.Trigger, { render: triggerElement, "data-test": dataTest }) }), _jsx(BasePopover.Portal, { container: portalContainer(), children: _jsx(BasePopover.Positioner, { className: "inspector-popover__positioner", side: side, align: align, sideOffset: sideOffset, children: _jsx(BasePopover.Popup, { className: "inspector-popover__popup", "data-test": dataTest ? `${dataTest}-popover` : undefined, children: children }) }) })] }));
 }

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

@@ -17,6 +17,7 @@ export interface PopoverListboxProps {
     triggerClassName?: string;
     triggerDataTest?: string;
     triggerAriaLabel?: string;
+    triggerTooltip?: ReactNode;
     searchable?: boolean;
     searchPlaceholder?: string;
     searchAriaLabel?: string;
@@ -34,4 +35,4 @@ export interface PopoverListboxProps {
     onOpenChange: (open: boolean) => void;
     onSelect: (value: string) => void;
 }
-export declare function PopoverListbox({ value, query, items, open, trigger, triggerElement, triggerClassName, triggerDataTest, triggerAriaLabel, searchable, searchPlaceholder, searchAriaLabel, placeholder, inputRef, inputClassName, inputAppearance, inputDataTest, inputOnFocus, inputOnBlur, inputOnKeyDown, disabled, className, onQueryChange, onOpenChange, onSelect, }: PopoverListboxProps): ReactElement;
+export declare function PopoverListbox({ value, query, items, open, trigger, triggerElement, triggerClassName, triggerDataTest, triggerAriaLabel, triggerTooltip, searchable, searchPlaceholder, searchAriaLabel, placeholder, inputRef, inputClassName, inputAppearance, inputDataTest, inputOnFocus, inputOnBlur, inputOnKeyDown, disabled, className, onQueryChange, onOpenChange, onSelect, }: PopoverListboxProps): ReactElement;

package/dist/inspector/ui/PopoverListbox.js

@@ -1,21 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react/combobox";
 import { Autocomplete } from "@base-ui/react/autocomplete";
-export function PopoverListbox({ value = null, query, items, open, trigger, triggerElement, triggerClassName, triggerDataTest, triggerAriaLabel, searchable = false, searchPlaceholder = "Search…", searchAriaLabel = "Search options", placeholder, inputRef, inputClassName, inputAppearance = "default", inputDataTest, inputOnFocus, inputOnBlur, inputOnKeyDown, disabled = false, className, onQueryChange, onOpenChange, onSelect, }) {
-    const portalContainer = typeof document !== "undefined"
-        ? document.getElementById("nudge-ui-root")?.shadowRoot ?? document.body
-        : null;
+import { cx } from "./classNames.js";
+import { Tooltip } from "./Tooltip.js";
+import { portalContainer } from "./portalContainer.js";
+export function PopoverListbox({ value = null, query, items, open, trigger, triggerElement, triggerClassName, triggerDataTest, triggerAriaLabel, triggerTooltip, searchable = false, searchPlaceholder = "Search…", searchAriaLabel = "Search options", placeholder, inputRef, inputClassName, inputAppearance = "default", inputDataTest, inputOnFocus, inputOnBlur, inputOnKeyDown, disabled = false, className, onQueryChange, onOpenChange, onSelect, }) {
     const itemByValue = new Map(items.map((item) => [item.value, item]));
+    const resolvedTriggerTooltip = triggerTooltip ?? (triggerElement ? triggerAriaLabel : undefined);
     function renderComboboxItem(item) {
         return (_jsxs(Combobox.Item, { value: item.value, className: "popover-listbox__item", "data-test": item["data-test"], children: [item.leading ? _jsx("span", { className: "popover-listbox__leading", children: item.leading }) : null, _jsx("span", { className: "popover-listbox__label", children: item.label }), item.trailing ? _jsx("span", { className: "popover-listbox__trailing", children: item.trailing }) : null] }, item.value));
     }
-    return (_jsx("div", { className: `popover-listbox${className ? ` ${className}` : ""}`, children: trigger || triggerElement ? (_jsxs(Combobox.Root, { value: value, inputValue: searchable ? undefined : query, open: open, items: items.map((item) => item.value), filteredItems: searchable ? undefined : items.map((item) => item.value), autoHighlight: true, itemToStringLabel: (item) => itemByValue.get(item)?.label ?? item, onInputValueChange: (next) => onQueryChange(next), onOpenChange: (next) => onOpenChange(next), onValueChange: (next) => {
+    return (_jsx("div", { className: cx("popover-listbox", className), children: trigger || triggerElement ? (_jsxs(Combobox.Root, { value: value, inputValue: searchable ? undefined : query, open: open, items: items.map((item) => item.value), filteredItems: searchable ? undefined : items.map((item) => item.value), autoHighlight: true, itemToStringLabel: (item) => itemByValue.get(item)?.label ?? item, onInputValueChange: (next) => onQueryChange(next), onOpenChange: (next) => onOpenChange(next), onValueChange: (next) => {
                 if (typeof next === "string")
                     onSelect(next);
-            }, children: [triggerElement ? (_jsx(Combobox.Trigger, { render: triggerElement, className: `popover-listbox__trigger${triggerClassName ? ` ${triggerClassName}` : ""}`, "data-test": triggerDataTest, "aria-label": triggerAriaLabel, disabled: disabled })) : (_jsx(Combobox.Trigger, { className: `popover-listbox__trigger${triggerClassName ? ` ${triggerClassName}` : ""}`, "data-test": triggerDataTest, "aria-label": triggerAriaLabel, disabled: disabled, children: trigger })), _jsx(Combobox.Portal, { container: portalContainer, children: _jsx(Combobox.Positioner, { className: "popover-listbox__positioner", children: _jsxs(Combobox.Popup, { className: `popover-listbox__popup${searchable ? " popover-listbox__popup--searchable" : ""}`, children: [searchable ? (_jsxs(_Fragment, { children: [_jsx(Combobox.Input, { className: "popover-listbox__search-input", placeholder: searchPlaceholder, "aria-label": searchAriaLabel, "data-test": triggerDataTest ? `${triggerDataTest}-search` : "popover-listbox-search" }), _jsx(Combobox.Empty, { className: "popover-listbox__empty", children: "No matching options." })] })) : null, _jsx(Combobox.List, { className: `popover-listbox__list${searchable ? " popover-listbox__list--searchable" : ""}`, children: searchable
+            }, children: [_jsx(Tooltip, { content: resolvedTriggerTooltip, disabled: resolvedTriggerTooltip === undefined, stableTrigger: true, children: _jsx(Combobox.Trigger, { render: triggerElement, className: cx("popover-listbox__trigger", triggerClassName), "data-test": triggerDataTest, "aria-label": triggerAriaLabel, disabled: disabled, children: triggerElement ? undefined : trigger }) }), _jsx(Combobox.Portal, { container: portalContainer(), children: _jsx(Combobox.Positioner, { className: "popover-listbox__positioner", children: _jsxs(Combobox.Popup, { className: cx("popover-listbox__popup", searchable && "popover-listbox__popup--searchable"), children: [searchable ? (_jsxs(_Fragment, { children: [_jsx(Combobox.Input, { className: "popover-listbox__search-input", placeholder: searchPlaceholder, "aria-label": searchAriaLabel, "data-test": triggerDataTest ? `${triggerDataTest}-search` : "popover-listbox-search" }), _jsx(Combobox.Empty, { className: "popover-listbox__empty", children: "No matching options." })] })) : null, _jsx(Combobox.List, { className: cx("popover-listbox__list", searchable && "popover-listbox__list--searchable"), children: searchable
                                         ? ((itemValue) => {
                                             const item = itemByValue.get(itemValue);
                                             return item ? renderComboboxItem(item) : null;
                                         })
-                                        : items.map((item) => renderComboboxItem(item)) })] }) }) })] })) : (_jsxs(Autocomplete.Root, { value: query, open: open, items: items.map((item) => item.value), filteredItems: items.map((item) => item.value), autoHighlight: true, mode: "none", openOnInputClick: true, onValueChange: onQueryChange, onOpenChange: (next) => onOpenChange(next), children: [_jsx(Autocomplete.Input, { ref: inputRef, className: `text-input${inputAppearance === "embedded" ? " text-input--embedded" : ""}${inputClassName ? ` ${inputClassName}` : ""}`, placeholder: placeholder, "data-test": inputDataTest, onFocus: inputOnFocus, onBlur: inputOnBlur, onKeyDownCapture: inputOnKeyDown, disabled: disabled }), _jsx(Autocomplete.Portal, { container: portalContainer, children: _jsx(Autocomplete.Positioner, { className: "popover-listbox__positioner", children: _jsx(Autocomplete.Popup, { className: "popover-listbox__popup", children: _jsx(Autocomplete.List, { className: "popover-listbox__list", children: items.map((item) => (_jsxs(Autocomplete.Item, { value: item.value, className: "popover-listbox__item", "data-test": item["data-test"], onClick: () => onSelect(item.value), children: [item.leading ? _jsx("span", { className: "popover-listbox__leading", children: item.leading }) : null, _jsx("span", { className: "popover-listbox__label", children: item.label }), item.trailing ? _jsx("span", { className: "popover-listbox__trailing", children: item.trailing }) : null] }, item.value))) }) }) }) })] })) }));
+                                        : items.map((item) => renderComboboxItem(item)) })] }) }) })] })) : (_jsxs(Autocomplete.Root, { value: query, open: open, items: items.map((item) => item.value), filteredItems: items.map((item) => item.value), autoHighlight: true, mode: "none", openOnInputClick: true, onValueChange: onQueryChange, onOpenChange: (next) => onOpenChange(next), children: [_jsx(Autocomplete.Input, { ref: inputRef, className: cx("text-input", inputAppearance === "embedded" && "text-input--embedded", inputClassName), placeholder: placeholder, "data-test": inputDataTest, onFocus: inputOnFocus, onBlur: inputOnBlur, onKeyDownCapture: inputOnKeyDown, disabled: disabled }), _jsx(Autocomplete.Portal, { container: portalContainer(), children: _jsx(Autocomplete.Positioner, { className: "popover-listbox__positioner", children: _jsx(Autocomplete.Popup, { className: "popover-listbox__popup", children: _jsx(Autocomplete.List, { className: "popover-listbox__list", children: items.map((item) => (_jsxs(Autocomplete.Item, { value: item.value, className: "popover-listbox__item", "data-test": item["data-test"], onClick: () => onSelect(item.value), children: [item.leading ? _jsx("span", { className: "popover-listbox__leading", children: item.leading }) : null, _jsx("span", { className: "popover-listbox__label", children: item.label }), item.trailing ? _jsx("span", { className: "popover-listbox__trailing", children: item.trailing }) : null] }, item.value))) }) }) }) })] })) }));
 }

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

@@ -14,11 +14,12 @@ interface SegmentedControlProps<T extends string> {
     "data-test"?: string;
     "data-property"?: string;
     className?: string;
+    disabled?: boolean;
     /** Allows the active option to be cleared by clicking it again. */
     allowDeselect?: boolean;
     /** Restores the value represented by an unselected control. */
     onDeselect?: () => void;
 }
 /** A compact single-choice control for adjacent, peer actions. */
-export declare function SegmentedControl<T extends string>({ value, options, onChange, "aria-label": ariaLabel, "data-test": dataTest, "data-property": dataProperty, className, allowDeselect, onDeselect, }: SegmentedControlProps<T>): ReactElement;
+export declare function SegmentedControl<T extends string>({ value, options, onChange, "aria-label": ariaLabel, "data-test": dataTest, "data-property": dataProperty, className, disabled, allowDeselect, onDeselect, }: SegmentedControlProps<T>): ReactElement;
 export {};

package/dist/inspector/ui/SegmentedControl.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
 /** A compact single-choice control for adjacent, peer actions. */
-export function SegmentedControl({ value, options, onChange, "aria-label": ariaLabel, "data-test": dataTest, "data-property": dataProperty, className, allowDeselect = false, onDeselect, }) {
+export function SegmentedControl({ value, options, onChange, "aria-label": ariaLabel, "data-test": dataTest, "data-property": dataProperty, className, disabled = false, allowDeselect = false, onDeselect, }) {
     return (_jsx("div", { className: `segmented-control${className ? ` ${className}` : ""}`, role: "group", "aria-label": ariaLabel, "data-test": dataTest, "data-property": dataProperty, children: options.map((option) => {
             const selected = option.value === value;
-            return (_jsx(Toggle, { type: "button", className: `button segmented-control__button${selected ? " segmented-control__button--selected" : ""}`, pressed: selected, "aria-label": option.label, title: option.label, "data-test": option.testId, "data-active": selected ? "true" : "false", onPressedChange: (pressed) => {
+            return (_jsx(Toggle, { type: "button", className: `button segmented-control__button${selected ? " segmented-control__button--selected" : ""}`, pressed: selected, disabled: disabled, "aria-label": option.label, "data-test": option.testId, "data-active": selected ? "true" : "false", onPressedChange: (pressed) => {
                     if (pressed) {
                         onChange(option.value);
                     }

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

@@ -1,4 +1,5 @@
-import type { ButtonHTMLAttributes, ReactElement } from "react";
+import { Select as BaseSelect } from "@base-ui/react/select";
+import type { ButtonHTMLAttributes, ComponentProps, ReactElement } from "react";
 import type { ControlAppearance } from "./ControlSurface.js";
 export interface SelectOption {
     value: string;
@@ -15,7 +16,11 @@ export type SelectProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChang
     groups?: SelectGroup[];
     placeholder?: string;
     compact?: boolean;
+    /** Uses the shared icon button as the trigger; requires an accessible label. */
+    iconOnly?: boolean;
     appearance?: ControlAppearance;
+    /** Overrides popup placement, including text alignment for icon-only triggers. */
+    popupPosition?: Pick<ComponentProps<typeof BaseSelect.Positioner>, "side" | "align" | "alignItemWithTrigger">;
     searchable?: boolean;
     searchPlaceholder?: string;
     searchAriaLabel?: string;

package/dist/inspector/ui/Select.js

@@ -2,25 +2,24 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select as BaseSelect } from "@base-ui/react/select";
 import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
 import { IconCheck, IconChevronDown } from "@tabler/icons-react";
+import { portalContainer } from "./portalContainer.js";
+import { IconButton } from "./IconButton.js";
 export function Select(props) {
     if (props.searchable)
         return _jsx(SearchableSelect, { ...props });
     return _jsx(NativeSelect, { ...props });
 }
-function NativeSelect({ value, options = [], groups = [], placeholder, compact, appearance = "default", searchable: _searchable, searchPlaceholder: _searchPlaceholder, searchAriaLabel: _searchAriaLabel, className, disabled, children, ...props }) {
+function NativeSelect({ value, options = [], groups = [], placeholder, compact, iconOnly, appearance = "default", popupPosition, searchable: _searchable, searchPlaceholder: _searchPlaceholder, searchAriaLabel: _searchAriaLabel, className, disabled, children, ...props }) {
     const allOptions = [...options, ...groups.flatMap((group) => group.options)];
     const selectedOption = allOptions.find((option) => option.value === value);
-    const portalContainer = typeof document !== "undefined"
-        ? document.getElementById("nudge-ui-root")?.shadowRoot ?? document.body
-        : null;
     function handleValueChange(next) {
         if (typeof next === "string")
             props.onValueChange?.(next);
     }
     const { onValueChange: _onValueChange, ...triggerProps } = props;
-    return (_jsxs(BaseSelect.Root, { value: value || null, disabled: disabled, items: allOptions.map((option) => ({ value: option.value, label: option.label })), onValueChange: handleValueChange, children: [_jsxs(BaseSelect.Trigger, { ...triggerProps, disabled: disabled, className: `select${compact ? " select--compact" : ""}${appearance === "embedded" ? " select--embedded" : ""}${className ? ` ${className}` : ""}`, children: [_jsx(BaseSelect.Value, { className: "select__value", placeholder: placeholder, children: selectedOption?.label ?? (value || undefined) }), _jsx(BaseSelect.Icon, { className: "select__icon", children: _jsx(IconChevronDown, { size: 15, stroke: 1.8, "aria-hidden": "true" }) }), children] }), _jsx(BaseSelect.Portal, { container: portalContainer, children: _jsx(BaseSelect.Positioner, { className: "select__positioner", sideOffset: 4, children: _jsx(BaseSelect.Popup, { className: "select__popup", children: _jsxs(BaseSelect.List, { className: "select__list", children: [options.map((option) => _jsx(SelectItem, { option: option }, option.value)), groups.map((group) => (_jsxs(BaseSelect.Group, { className: "select__group", children: [_jsx(BaseSelect.GroupLabel, { className: "select__group-label", children: group.label }), group.options.map((option) => _jsx(SelectItem, { option: option }, `${group.label}-${option.value}`))] }, group.label)))] }) }) }) })] }));
+    return (_jsxs(BaseSelect.Root, { value: value || null, disabled: disabled, items: allOptions.map((option) => ({ value: option.value, label: option.label })), onValueChange: handleValueChange, children: [_jsxs(BaseSelect.Trigger, { ...triggerProps, render: iconOnly ? _jsx(IconButton, { label: props["aria-label"] ?? "Select option" }) : undefined, disabled: disabled, className: `select${iconOnly ? " select--icon-only" : ""}${compact ? " select--compact" : ""}${appearance === "embedded" ? " select--embedded" : ""}${className ? ` ${className}` : ""}`, children: [_jsx(BaseSelect.Value, { className: "select__value", placeholder: placeholder, children: selectedOption?.label ?? (value || undefined) }), _jsx(BaseSelect.Icon, { className: "select__icon", children: _jsx(IconChevronDown, { size: 15, stroke: 1.8, "aria-hidden": "true" }) }), children] }), _jsx(BaseSelect.Portal, { container: portalContainer(), children: _jsx(BaseSelect.Positioner, { className: "select__positioner", sideOffset: 4, ...popupPosition, alignItemWithTrigger: iconOnly ? false : popupPosition?.alignItemWithTrigger, children: _jsx(BaseSelect.Popup, { className: "select__popup", children: _jsxs(BaseSelect.List, { className: "select__list", children: [options.map((option) => _jsx(SelectItem, { option: option }, option.value)), groups.map((group) => (_jsxs(BaseSelect.Group, { className: "select__group", children: [_jsx(BaseSelect.GroupLabel, { className: "select__group-label", children: group.label }), group.options.map((option) => _jsx(SelectItem, { option: option }, `${group.label}-${option.value}`))] }, group.label)))] }) }) }) })] }));
 }
-function SearchableSelect({ value, options = [], groups = [], placeholder, compact, appearance = "default", searchable: _searchable, searchPlaceholder = "Search…", searchAriaLabel = "Search options", className, disabled, children, "data-test": dataTest, ...props }) {
+function SearchableSelect({ value, options = [], groups = [], placeholder, compact, iconOnly, appearance = "default", popupPosition, searchable: _searchable, searchPlaceholder = "Search…", searchAriaLabel = "Search options", className, disabled, children, "data-test": dataTest, ...props }) {
     const allOptions = [...options, ...groups.flatMap((group) => group.options)];
     const selectedOption = allOptions.find((option) => option.value === value);
     const optionByValue = new Map(allOptions.map((option) => [option.value, option]));
@@ -34,16 +33,13 @@ function SearchableSelect({ value, options = [], groups = [], placeholder, compa
             items: group.options.map((option) => option.value),
         })),
     ];
-    const portalContainer = typeof document !== "undefined"
-        ? document.getElementById("nudge-ui-root")?.shadowRoot ?? document.body
-        : null;
     function handleValueChange(next) {
         if (typeof next === "string")
             props.onValueChange?.(next);
     }
     const { onValueChange: _onValueChange, ...triggerProps } = props;
-    const triggerClassName = `select${compact ? " select--compact" : ""}${appearance === "embedded" ? " select--embedded" : ""}${className ? ` ${className}` : ""}`;
-    return (_jsxs(BaseCombobox.Root, { value: value || null, disabled: disabled, items: searchableGroups, itemToStringLabel: (item) => optionByValue.get(item)?.label ?? item, autoHighlight: true, onValueChange: handleValueChange, children: [_jsxs(BaseCombobox.Trigger, { ...triggerProps, "data-test": dataTest, disabled: disabled, className: triggerClassName, children: [_jsx("span", { className: "select__value", children: _jsx(BaseCombobox.Value, { placeholder: placeholder, children: selectedOption?.label ?? (value || undefined) }) }), _jsx(BaseCombobox.Icon, { className: "select__icon", children: _jsx(IconChevronDown, { size: 15, stroke: 1.8, "aria-hidden": "true" }) }), children] }), _jsx(BaseCombobox.Portal, { container: portalContainer, children: _jsx(BaseCombobox.Positioner, { className: "select__positioner", sideOffset: 4, children: _jsxs(BaseCombobox.Popup, { className: "select__popup select__popup--searchable", children: [_jsx(BaseCombobox.Input, { className: "select__search-input", placeholder: searchPlaceholder, "aria-label": searchAriaLabel, "data-test": dataTest ? `${dataTest}-search` : "select-search" }), _jsx(BaseCombobox.Empty, { className: "select__empty", children: "No matching options." }), _jsx(BaseCombobox.List, { className: "select__list select__list--searchable", children: (group) => (_jsxs(BaseCombobox.Group, { className: "select__group", items: group.items, children: [group.label ? (_jsx(BaseCombobox.GroupLabel, { className: "select__group-label", children: group.label })) : null, _jsx(BaseCombobox.Collection, { children: (item) => {
+    const triggerClassName = `select${iconOnly ? " select--icon-only" : ""}${compact ? " select--compact" : ""}${appearance === "embedded" ? " select--embedded" : ""}${className ? ` ${className}` : ""}`;
+    return (_jsxs(BaseCombobox.Root, { value: value || null, disabled: disabled, items: searchableGroups, itemToStringLabel: (item) => optionByValue.get(item)?.label ?? item, autoHighlight: true, onValueChange: handleValueChange, children: [_jsxs(BaseCombobox.Trigger, { ...triggerProps, render: iconOnly ? _jsx(IconButton, { label: props["aria-label"] ?? "Select option" }) : undefined, "data-test": dataTest, disabled: disabled, className: triggerClassName, children: [_jsx("span", { className: "select__value", children: _jsx(BaseCombobox.Value, { placeholder: placeholder, children: selectedOption?.label ?? (value || undefined) }) }), _jsx(BaseCombobox.Icon, { className: "select__icon", children: _jsx(IconChevronDown, { size: 15, stroke: 1.8, "aria-hidden": "true" }) }), children] }), _jsx(BaseCombobox.Portal, { container: portalContainer(), children: _jsx(BaseCombobox.Positioner, { className: "select__positioner", sideOffset: 4, side: popupPosition?.side, align: popupPosition?.align, children: _jsxs(BaseCombobox.Popup, { className: "select__popup select__popup--searchable", children: [_jsx(BaseCombobox.Input, { className: "select__search-input", placeholder: searchPlaceholder, "aria-label": searchAriaLabel, "data-test": dataTest ? `${dataTest}-search` : "select-search" }), _jsx(BaseCombobox.Empty, { className: "select__empty", children: "No matching options." }), _jsx(BaseCombobox.List, { className: "select__list select__list--searchable", children: (group) => (_jsxs(BaseCombobox.Group, { className: "select__group", items: group.items, children: [group.label ? (_jsx(BaseCombobox.GroupLabel, { className: "select__group-label", children: group.label })) : null, _jsx(BaseCombobox.Collection, { children: (item) => {
                                                 const option = optionByValue.get(item);
                                                 return option ? _jsx(SearchableSelectItem, { option: option }, item) : null;
                                             } })] }, group.value)) })] }) }) })] }));

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

@@ -0,0 +1,6 @@
+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,13 @@
+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) {
+    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 - 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;
+}