nudge-ui 0.2.4 → 0.2.5

package/dist/inspector/tokens/resolution.js

@@ -1,5 +1,6 @@
 import { readTailwindV4AlphaUtility, tailwindV4AlphaExpression } from "../../css/dialects/index.js";
 import { getElementComputedStyle } from "../runtime/domRealm.js";
+import { createContainerQueryEvaluator } from "./resolution/containerQueryEvaluator.js";
 import { collectRules as collectCssomRules, documentRevisions as getDocumentRevisions, registerResolutionLineage, } from "./resolution/cssomCollector.js";
 import { createRuleMatcher, matchRuleForElement } from "./resolution/ruleMatching.js";
 import { compareAuthorCascade } from "./resolution/cascade.js";
@@ -126,46 +127,14 @@ function hydratePropertyOpacityRows(rows, computed) {
 function capabilityFor(property, value, tokenTable) {
     return interpretValue(property, value, createInspectorValueContext(tokenTable))[0].capability;
 }
-let containerProbeSequence = 0;
-/**
- * Container conditions are element-relative. CSSOM exposes their text but has
- * no `matches` API, so ask the browser by applying an inert custom property to
- * the selected element inside an equivalent temporary @container wrapper.
- */
-function matchesContainerQuery(el, params) {
-    const doc = el.ownerDocument;
-    if (!doc.head || !params)
-        return false;
-    const id = ++containerProbeSequence;
-    const marker = `data-container-probe-${id}`;
-    const property = `--container-probe-${id}`;
-    const style = doc.createElement("style");
-    style.setAttribute("data-nudge-ui", "container-probe");
-    style.textContent = `@container ${params} { [${marker}] { ${property}: 1; } }`;
-    el.setAttribute(marker, "");
-    doc.head.appendChild(style);
-    try {
-        return getElementComputedStyle(el).getPropertyValue(property).trim() === "1";
-    }
-    catch {
-        return false;
-    }
-    finally {
-        style.remove();
-        el.removeAttribute(marker);
-    }
-}
-function atRulesApplyToElement(el, atRules) {
+function atRulesApplyToElement(el, atRules, evaluator) {
     const view = el.ownerDocument.defaultView;
-    return (atRules ?? []).every((atRule) => {
-        if (atRule.kind === "container")
-            return matchesContainerQuery(el, atRule.params);
-        if (atRule.kind === "supports")
-            return view?.CSS?.supports(atRule.params) ?? false;
-        return true;
-    });
+    if ((atRules ?? []).some((rule) => rule.kind === "supports" && !view?.CSS?.supports(rule.params)))
+        return false;
+    const conditions = (atRules ?? []).filter((rule) => rule.kind === "container").map((rule) => rule.params);
+    return conditions.length === 0 || evaluator.matches(el, conditions);
 }
-function collectLocalAliases(el, rules, ruleApplies) {
+function collectLocalAliases(el, rules) {
     // Custom properties inherit independently of the property being resolved.
     // Resolve the winning declaration separately for each element in the
     // ancestor chain, then let the nearest declaration override inherited ones.
@@ -179,15 +148,18 @@ function collectLocalAliases(el, rules, ruleApplies) {
     }
     const aliases = new Map();
     for (const element of lineage.reverse()) {
+        const ruleApplies = makeRuleApplies(element);
         const candidates = new Map();
         rules.forEach((rule, index) => {
             if (rule.active === false)
                 return;
-            if (!ruleApplies(rule))
-                return;
             const match = matchRuleForElement(element, { rule, selectorText: rule.selectorText });
             if (!match)
                 return;
+            if (!rule.declarations.some((declaration) => declaration.property.startsWith("--")))
+                return;
+            if (!ruleApplies(rule))
+                return;
             const sourceOrder = rule.sourceOrder ?? index;
             const { specificity } = match;
             for (const declaration of rule.declarations) {
@@ -230,7 +202,7 @@ function collectLocalAliases(el, rules, ruleApplies) {
     }
     return aliases;
 }
-function makeRuleApplies(el) {
+function makeRuleApplies(el, evaluator = createContainerQueryEvaluator(el.ownerDocument)) {
     const matchingContexts = new Map();
     return (rule) => {
         const atRules = rule.atRules;
@@ -240,7 +212,7 @@ function makeRuleApplies(el) {
         const cached = matchingContexts.get(key);
         if (cached !== undefined)
             return cached;
-        const result = atRulesApplyToElement(el, atRules);
+        const result = atRulesApplyToElement(el, atRules, evaluator);
         matchingContexts.set(key, result);
         return result;
     };
@@ -251,79 +223,84 @@ function makeRuleApplies(el) {
  * inherited phase. Local aliases are collected per element so no ancestor
  * re-walks the lineage × rules.
  */
-function resolveLineage(el, matcher) {
-    const lineage = [];
-    let current = el;
-    while (current) {
-        lineage.push(current);
-        current = current.parentElement;
+function relevantAncestorRule(rule) {
+    return rule.declarations.some(({ property }) => property.startsWith("--") || INHERITED_PROPERTIES.has(property));
+}
+function lineageElements(el) {
+    const elements = [];
+    for (let current = el; current; current = current.parentElement)
+        elements.unshift(current);
+    return elements;
+}
+function queryPairs(el, matcher) {
+    const pairs = [];
+    for (const element of lineageElements(el)) {
+        for (const { rule } of matcher.matchesForElement(element).matched) {
+            if (element !== el && !relevantAncestorRule(rule))
+                continue;
+            if (rule.declarations.length === 0)
+                continue;
+            if (rule.atRules?.some((context) => context.kind === "supports" && !element.ownerDocument.defaultView?.CSS?.supports(context.params)))
+                continue;
+            const conditions = (rule.atRules ?? []).filter((context) => context.kind === "container").map((context) => context.params);
+            if (conditions.length > 0)
+                pairs.push({ element, conditions });
+        }
     }
-    lineage.reverse();
-    const selectorMatches = new Map();
-    const allSelectorMatches = new Map();
-    for (const element of lineage) {
-        const { matched, allMatched } = matcher.matchesForElement(element);
-        selectorMatches.set(element, matched);
-        allSelectorMatches.set(element, allMatched);
+    return pairs;
+}
+/** Prepares both cascades together so a selection refresh inserts one probe sheet. */
+export function prefetchContainerQueries(elements, state, evaluator) {
+    const pairs = [];
+    for (const element of elements) {
+        const { rules } = collectCssomRules(element.ownerDocument);
+        pairs.push(...queryPairs(element, createRuleMatcher(rules, state)));
+        if (state === "base")
+            pairs.push(...queryPairs(element, createRuleMatcher(rules, "stable")));
     }
+    evaluator.prefetch(pairs);
+}
+function resolveLineage(el, matcher, evaluator) {
+    const lineage = lineageElements(el);
+    evaluator.prefetch(queryPairs(el, matcher));
     const byElement = new Map();
-    for (let index = 0; index < lineage.length; index++) {
-        const element = lineage[index];
-        const ruleApplies = makeRuleApplies(element);
-        const aliases = new Map();
-        for (const lineageElement of lineage.slice(0, index + 1)) {
-            const candidates = new Map();
-            for (const match of selectorMatches.get(lineageElement) ?? []) {
-                if (!ruleApplies(match.rule))
-                    continue;
-                const sourceOrder = match.rule.sourceOrder ?? 0;
-                for (const declaration of match.rule.declarations) {
-                    if (!declaration.property.startsWith("--"))
-                        continue;
-                    const candidate = {
-                        value: declaration.value.trim(),
-                        important: declaration.important,
-                        layer: match.rule.layer,
-                        layerOrder: match.rule.layerOrder,
-                        specificity: match.specificity,
-                        sourceOrder,
-                    };
-                    const previous = candidates.get(declaration.property);
-                    if (!previous || compareAuthorCascade(candidate, previous) >= 0) {
-                        candidates.set(declaration.property, candidate);
-                    }
-                }
-            }
-            for (const property of Array.from(lineageElement.style)) {
-                if (!property.startsWith("--"))
+    const inheritedAliases = new Map();
+    for (const element of lineage) {
+        const ruleApplies = makeRuleApplies(element, evaluator);
+        const { matched: selectorMatches, allMatched } = matcher.matchesForElement(element);
+        const matched = selectorMatches.filter(({ rule }) => (element === el || relevantAncestorRule(rule)) && rule.declarations.length > 0 && ruleApplies(rule));
+        const candidates = new Map();
+        for (const match of matched) {
+            // Conditions have already been evaluated against the declaration's own
+            // element. Descendants inherit its resulting alias, not its condition.
+            for (const declaration of match.rule.declarations) {
+                if (!declaration.property.startsWith("--"))
                     continue;
                 const candidate = {
-                    value: lineageElement.style.getPropertyValue(property).trim(),
-                    important: lineageElement.style.getPropertyPriority(property) === "important",
-                    inline: true,
-                    specificity: 100000000,
-                    sourceOrder: Number.MAX_SAFE_INTEGER,
+                    value: declaration.value.trim(), important: declaration.important,
+                    layer: match.rule.layer, layerOrder: match.rule.layerOrder,
+                    specificity: match.specificity, sourceOrder: match.rule.sourceOrder ?? 0,
                 };
-                const previous = candidates.get(property);
-                if (!previous || compareAuthorCascade(candidate, previous) >= 0) {
-                    candidates.set(property, candidate);
-                }
+                const previous = candidates.get(declaration.property);
+                if (!previous || compareAuthorCascade(candidate, previous) >= 0)
+                    candidates.set(declaration.property, candidate);
             }
-            for (const [name, candidate] of candidates)
-                aliases.set(name, candidate.value);
         }
-        const matched = [];
-        for (const match of selectorMatches.get(element) ?? []) {
-            if (!ruleApplies(match.rule))
+        for (const property of Array.from(element.style)) {
+            if (!property.startsWith("--"))
                 continue;
-            matched.push(match);
+            const candidate = {
+                value: element.style.getPropertyValue(property).trim(),
+                important: element.style.getPropertyPriority(property) === "important", inline: true,
+                specificity: 100000000, sourceOrder: Number.MAX_SAFE_INTEGER,
+            };
+            const previous = candidates.get(property);
+            if (!previous || compareAuthorCascade(candidate, previous) >= 0)
+                candidates.set(property, candidate);
         }
-        byElement.set(element, {
-            element,
-            matched,
-            allMatched: allSelectorMatches.get(element) ?? matched,
-            aliases,
-        });
+        for (const [name, candidate] of candidates)
+            inheritedAliases.set(name, candidate.value);
+        byElement.set(element, { element, matched, allMatched, aliases: new Map(inheritedAliases) });
     }
     return { lineage, byElement };
 }
@@ -453,7 +430,7 @@ export function resolveRuleFixture(el, rules, tokenTable) {
             continue;
         matched.push(match);
     }
-    const localAliases = collectLocalAliases(el, rules, ruleApplies);
+    const localAliases = collectLocalAliases(el, rules);
     return rowsFromMatches(el, matched, localAliases, tokenTable, allMatched);
 }
 function compareCandidate(a, b) {
@@ -569,10 +546,10 @@ function annotatePaintedValues(el, result, computed, inaccessible, mode) {
         }
     }
 }
-export function getResolvedProperties(el, tokenTable) {
+export function getResolvedProperties(el, tokenTable, evaluator = createContainerQueryEvaluator(el.ownerDocument)) {
     const doc = el.ownerDocument ?? document;
     const { rules, inaccessible } = collectCssomRules(doc);
-    const lineage = resolveLineage(el, createRuleMatcher(rules, "live"));
+    const lineage = resolveLineage(el, createRuleMatcher(rules, "live"), evaluator);
     return resolveMatchedProperties(el, tokenTable, lineage, inaccessible, "live");
 }
 function applyInlineDeclarations(el, result, tokenTable, computed, inaccessible) {
@@ -646,7 +623,7 @@ function promoteNumericCalcRows(result, tokenTable) {
  * values with no authored declaration still fall back to the browser's live
  * computed value in the field layer.
  */
-export function getResolvedPropertiesForState(el, tokenTable, state) {
+export function getResolvedPropertiesForState(el, tokenTable, state, evaluator = createContainerQueryEvaluator(el.ownerDocument)) {
     const doc = el.ownerDocument ?? document;
     const revisions = getDocumentRevisions(doc);
     const { rules, inaccessible } = collectCssomRules(doc);
@@ -659,13 +636,14 @@ export function getResolvedPropertiesForState(el, tokenTable, state) {
     }
     const cached = snapshots.get(state);
     if (cached
+        && queryPairs(el, matcher).length === 0
         && cached.elementRevision === revisions.element
         && cached.stylesheetRevision === revisions.stylesheet
         && cached.tokenTable === tokenTable
         && cached.dynamicMatchKey === dynamicMatchKey) {
         return cached.rows;
     }
-    const lineage = resolveLineage(el, matcher);
+    const lineage = resolveLineage(el, matcher, evaluator);
     const rows = resolveMatchedProperties(el, tokenTable, lineage, inaccessible, state);
     registerResolutionLineage(el);
     snapshots.set(state, {
@@ -683,7 +661,7 @@ const stableTokenCache = new WeakMap();
  * an editor must stay linked to the stable token beneath a live :hover/:focus
  * paint. Memoized per (element, revisions, tokenTable).
  */
-export function getResolvedPropertiesStable(el, tokenTable) {
+export function getResolvedPropertiesStable(el, tokenTable, evaluator = createContainerQueryEvaluator(el.ownerDocument)) {
     const doc = el.ownerDocument ?? document;
     const revisions = getDocumentRevisions(doc);
     const { rules, inaccessible } = collectCssomRules(doc);
@@ -691,13 +669,14 @@ export function getResolvedPropertiesStable(el, tokenTable) {
     const dynamicMatchKey = matcher.dynamicMatchKey(el);
     const cached = stableTokenCache.get(el);
     if (cached
+        && queryPairs(el, matcher).length === 0
         && cached.elementRevision === revisions.element
         && cached.stylesheetRevision === revisions.stylesheet
         && cached.tokenTable === tokenTable
         && cached.dynamicMatchKey === dynamicMatchKey) {
         return cached.rows;
     }
-    const lineage = resolveLineage(el, matcher);
+    const lineage = resolveLineage(el, matcher, evaluator);
     const rows = resolveMatchedProperties(el, tokenTable, lineage, inaccessible, "stable");
     stableTokenCache.set(el, {
         elementRevision: revisions.element,

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

@@ -1,3 +1,3 @@
-import type { TokenChangeRecord } from "../changes/changesLog.js";
+import type { TokenChangeRecord } from "../changes/types.js";
 import type { TokenCatalogRow } from "./catalog.js";
 export declare function setGlobalTokenValue(row: TokenCatalogRow, value: string): TokenChangeRecord | null;

package/dist/inspector/tokens/tokenEdits.js

@@ -1,4 +1,4 @@
-import { appendChange } from "../changes/changesLog.js";
+import { appendChange } from "../drafts/store.js";
 export function setGlobalTokenValue(row, value) {
     const nextValue = value.trim();
     if (!row.activeDeclaration || !nextValue)

package/dist/inspector/ui/InlineStyleWarning.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } 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."] }) }));
+    return (_jsx("div", { className: "at-rule-tooltip__rules", children: _jsx("div", { className: "at-rule-tooltip__rule at-rule-tooltip__rule--active", children: "This is set as inline style. Can't be edited here." }) }));
 }
 export function InlineStyleWarning({ blockedBy, dataTest = "inline-style-warning", tooltipDataTest, className, symbolClassName, }) {
     if (blockedBy === null)

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

@@ -0,0 +1,8 @@
+import { type ReactElement } from "react";
+interface InspectorStyleProps {
+    readonly css: string;
+    readonly testId?: string;
+}
+/** Inspector UI styles; adopted into the shadow root when the page's CSP blocks `<style>`. */
+export declare function InspectorStyle({ css, testId }: InspectorStyleProps): ReactElement | null;
+export {};

package/dist/inspector/ui/InspectorStyle.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect } from "react";
+import { NUDGE_UI_MOUNT_ID } from "../../transport/routes.js";
+import { adoptStylesheet, allowsStyleElements, releaseAdoptedStylesheet } from "../runtime/ownedStylesheets.js";
+const adoptedUsers = new Map();
+/** Inspector UI styles; adopted into the shadow root when the page's CSP blocks `<style>`. */
+export function InspectorStyle({ css, testId }) {
+    const adopted = typeof document !== "undefined" && !allowsStyleElements(document);
+    useLayoutEffect(() => {
+        const root = adopted ? document.getElementById(NUDGE_UI_MOUNT_ID)?.shadowRoot : null;
+        if (!root)
+            return;
+        adoptedUsers.set(css, (adoptedUsers.get(css) ?? 0) + 1);
+        adoptStylesheet(root, css, css);
+        return () => {
+            const users = (adoptedUsers.get(css) ?? 1) - 1;
+            if (users > 0) {
+                adoptedUsers.set(css, users);
+                return;
+            }
+            adoptedUsers.delete(css);
+            releaseAdoptedStylesheet(root, css);
+        };
+    }, [adopted, css]);
+    return adopted ? null : _jsx("style", { "data-test": testId, children: css });
+}

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

@@ -21,6 +21,7 @@ export interface PopoverListboxProps {
     searchable?: boolean;
     searchPlaceholder?: string;
     searchAriaLabel?: string;
+    searchOnKeyDown?: KeyboardEventHandler<HTMLInputElement>;
     placeholder?: string;
     inputRef?: Ref<HTMLInputElement>;
     inputClassName?: string;
@@ -35,4 +36,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, triggerTooltip, 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, searchOnKeyDown, placeholder, inputRef, inputClassName, inputAppearance, inputDataTest, inputOnFocus, inputOnBlur, inputOnKeyDown, disabled, className, onQueryChange, onOpenChange, onSelect, }: PopoverListboxProps): ReactElement;

package/dist/inspector/ui/PopoverListbox.js

@@ -4,7 +4,7 @@ import { Autocomplete } from "@base-ui/react/autocomplete";
 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, }) {
+export function PopoverListbox({ value = null, query, items, open, trigger, triggerElement, triggerClassName, triggerDataTest, triggerAriaLabel, triggerTooltip, searchable = false, searchPlaceholder = "Search…", searchAriaLabel = "Search options", searchOnKeyDown, 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) {
@@ -13,10 +13,10 @@ export function PopoverListbox({ value = null, query, items, open, trigger, trig
     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: [_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
+            }, 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", sideOffset: 4, 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", onKeyDown: searchOnKeyDown }), _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: 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))) }) }) }) })] })) }));
+                                        : 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", sideOffset: 4, 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/Toast.d.ts

@@ -0,0 +1,14 @@
+import type { ReactElement } from "react";
+export type ToastTone = "success" | "error";
+export interface ShowToastOptions {
+    readonly title: string;
+    readonly description?: string;
+    readonly tone?: ToastTone;
+    readonly timeout?: number;
+}
+export declare function showToast({ title, description, tone, timeout }: ShowToastOptions): string;
+/**
+ * Renders inspector toasts inside the inspector's shadow root, centered above
+ * the canvas toolbar in the space the inspector panel leaves free.
+ */
+export declare function ToastRegion(): ReactElement;

package/dist/inspector/ui/Toast.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import { IconAlertTriangleFilled, IconCircleCheckFilled } from "@tabler/icons-react";
+import { portalContainer } from "./portalContainer.js";
+import { useInspectorOpen } from "../shell/openStore.js";
+/** Module-level manager so stores and async flows can raise toasts outside React. */
+const toastManager = BaseToast.createToastManager();
+export function showToast({ title, description, tone = "success", timeout }) {
+    return toastManager.add({
+        title,
+        description,
+        type: tone,
+        priority: tone === "error" ? "high" : "low",
+        timeout: timeout ?? (tone === "error" ? 5000 : 2000),
+    });
+}
+function ToastList() {
+    const { toasts } = BaseToast.useToastManager();
+    return (_jsx(_Fragment, { children: toasts.map((toast) => (_jsxs(BaseToast.Root, { toast: toast, className: "toast", "data-test": "toast", "data-tone": toast.type, children: [toast.type === "error"
+                    ? _jsx(IconAlertTriangleFilled, { className: "toast__icon", size: "var(--icon-size-small)", "aria-hidden": "true" })
+                    : _jsx(IconCircleCheckFilled, { className: "toast__icon", size: "var(--icon-size-small)", "aria-hidden": "true" }), _jsxs(BaseToast.Content, { className: "toast__content", children: [_jsx(BaseToast.Title, { className: "toast__title" }), toast.description ? _jsx(BaseToast.Description, { className: "toast__description" }) : null] })] }, toast.id))) }));
+}
+/**
+ * Renders inspector toasts inside the inspector's shadow root, centered above
+ * the canvas toolbar in the space the inspector panel leaves free.
+ */
+export function ToastRegion() {
+    const inspectorOpen = useInspectorOpen();
+    return (_jsx(BaseToast.Provider, { toastManager: toastManager, limit: 3, children: _jsx(BaseToast.Portal, { container: portalContainer(), children: _jsx(BaseToast.Viewport, { className: "toast__viewport", "data-inspector-open": inspectorOpen ? "true" : "false", "data-test": "toast-viewport", children: _jsx(ToastList, {}) }) }) }));
+}

package/dist/inspector/ui/assets/canvasIllustration.d.ts

@@ -0,0 +1,2 @@
+/** Inline markup so pages whose `img-src` blocks `data:` images still render it. */
+export declare const CANVAS_ILLUSTRATION_SVG = "<svg width=\"182\" height=\"104\" viewBox=\"0 0 182 104\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"30\" y=\"54\" width=\"17\" height=\"4\" rx=\"2\" fill=\"#0096FF\"/>\n<path d=\"M62.5 32.5V79.5H15.5V32.5H62.5Z\" stroke=\"#0096FF\"/>\n<path opacity=\"0.3\" d=\"M165.5 56.5V103.5H118.5V56.5H165.5Z\" stroke=\"black\"/>\n<rect opacity=\"0.3\" x=\"102.5\" y=\"0.5\" width=\"47\" height=\"47\" stroke=\"black\"/>\n<g clip-path=\"url(#clip0_1882_2967)\">\n<path d=\"M38 64.75V58.375C38 58.0766 38.1185 57.7905 38.3295 57.5795C38.5405 57.3685 38.8266 57.25 39.125 57.25C39.4234 57.25 39.7095 57.3685 39.9205 57.5795C40.1315 57.7905 40.25 58.0766 40.25 58.375V64\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M40.25 63.625V62.125C40.25 61.9773 40.2791 61.831 40.3356 61.6945C40.3922 61.558 40.475 61.434 40.5795 61.3295C40.684 61.225 40.808 61.1422 40.9445 61.0856C41.081 61.0291 41.2273 61 41.375 61C41.5227 61 41.669 61.0291 41.8055 61.0856C41.942 61.1422 42.066 61.225 42.1705 61.3295C42.275 61.434 42.3578 61.558 42.4144 61.6945C42.4709 61.831 42.5 61.9773 42.5 62.125V64\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M42.5 62.875C42.5 62.5766 42.6185 62.2905 42.8295 62.0795C43.0405 61.8685 43.3266 61.75 43.625 61.75C43.9234 61.75 44.2095 61.8685 44.4205 62.0795C44.6315 62.2905 44.75 62.5766 44.75 62.875V64\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M44.7499 63.625C44.7499 63.3266 44.8684 63.0405 45.0794 62.8295C45.2904 62.6185 45.5765 62.5 45.8749 62.5C46.1733 62.5 46.4594 62.6185 46.6704 62.8295C46.8814 63.0405 46.9999 63.3266 46.9999 63.625V67C46.9999 68.1935 46.5258 69.3381 45.6819 70.182C44.838 71.0259 43.6934 71.5 42.4999 71.5H40.9999H41.1559C40.4106 71.5001 39.677 71.3152 39.0209 70.9617C38.3648 70.6083 37.8068 70.0974 37.3969 69.475C37.3477 69.4001 37.2987 69.3251 37.2499 69.25C37.0159 68.8907 36.1946 67.459 34.7854 64.954C34.6417 64.6986 34.6034 64.3973 34.6784 64.1141C34.7535 63.8309 34.9361 63.5882 35.1874 63.4375C35.4551 63.2769 35.7687 63.2103 36.0785 63.2484C36.3883 63.2864 36.6765 63.4269 36.8974 63.6475L37.9999 64.75\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</g>\n<path d=\"M107 47.5V57.5C107 61.9183 110.582 65.5 115 65.5H117.5\" stroke=\"#B2B2B2\" stroke-dasharray=\"2 2\"/>\n<path d=\"M49 55H58.4171H66.5H79C83.4183 55 87 51.4183 87 47V37.5C87 33.0817 90.5817 29.5 95 29.5H102\" stroke=\"#0096FF\" stroke-dasharray=\"2 2\"/>\n<path d=\"M49 55H58.4171H66.5H79C83.4183 55 87 51.4183 87 47V37.5C87 33.0817 90.5817 29.5 95 29.5H102\" stroke=\"#0096FF\" stroke-dasharray=\"2 2\"/>\n<defs>\n<clipPath id=\"clip0_1882_2967\">\n<rect width=\"18\" height=\"18\" fill=\"white\" transform=\"translate(32 55)\"/>\n</clipPath>\n</defs>\n</svg>";

package/dist/inspector/ui/assets/canvasIllustration.js

@@ -0,0 +1,21 @@
+/** Inline markup so pages whose `img-src` blocks `data:` images still render it. */
+export const CANVAS_ILLUSTRATION_SVG = `<svg width="182" height="104" viewBox="0 0 182 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="30" y="54" width="17" height="4" rx="2" fill="#0096FF"/>
+<path d="M62.5 32.5V79.5H15.5V32.5H62.5Z" stroke="#0096FF"/>
+<path opacity="0.3" d="M165.5 56.5V103.5H118.5V56.5H165.5Z" stroke="black"/>
+<rect opacity="0.3" x="102.5" y="0.5" width="47" height="47" stroke="black"/>
+<g clip-path="url(#clip0_1882_2967)">
+<path d="M38 64.75V58.375C38 58.0766 38.1185 57.7905 38.3295 57.5795C38.5405 57.3685 38.8266 57.25 39.125 57.25C39.4234 57.25 39.7095 57.3685 39.9205 57.5795C40.1315 57.7905 40.25 58.0766 40.25 58.375V64" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40.25 63.625V62.125C40.25 61.9773 40.2791 61.831 40.3356 61.6945C40.3922 61.558 40.475 61.434 40.5795 61.3295C40.684 61.225 40.808 61.1422 40.9445 61.0856C41.081 61.0291 41.2273 61 41.375 61C41.5227 61 41.669 61.0291 41.8055 61.0856C41.942 61.1422 42.066 61.225 42.1705 61.3295C42.275 61.434 42.3578 61.558 42.4144 61.6945C42.4709 61.831 42.5 61.9773 42.5 62.125V64" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M42.5 62.875C42.5 62.5766 42.6185 62.2905 42.8295 62.0795C43.0405 61.8685 43.3266 61.75 43.625 61.75C43.9234 61.75 44.2095 61.8685 44.4205 62.0795C44.6315 62.2905 44.75 62.5766 44.75 62.875V64" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M44.7499 63.625C44.7499 63.3266 44.8684 63.0405 45.0794 62.8295C45.2904 62.6185 45.5765 62.5 45.8749 62.5C46.1733 62.5 46.4594 62.6185 46.6704 62.8295C46.8814 63.0405 46.9999 63.3266 46.9999 63.625V67C46.9999 68.1935 46.5258 69.3381 45.6819 70.182C44.838 71.0259 43.6934 71.5 42.4999 71.5H40.9999H41.1559C40.4106 71.5001 39.677 71.3152 39.0209 70.9617C38.3648 70.6083 37.8068 70.0974 37.3969 69.475C37.3477 69.4001 37.2987 69.3251 37.2499 69.25C37.0159 68.8907 36.1946 67.459 34.7854 64.954C34.6417 64.6986 34.6034 64.3973 34.6784 64.1141C34.7535 63.8309 34.9361 63.5882 35.1874 63.4375C35.4551 63.2769 35.7687 63.2103 36.0785 63.2484C36.3883 63.2864 36.6765 63.4269 36.8974 63.6475L37.9999 64.75" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<path d="M107 47.5V57.5C107 61.9183 110.582 65.5 115 65.5H117.5" stroke="#B2B2B2" stroke-dasharray="2 2"/>
+<path d="M49 55H58.4171H66.5H79C83.4183 55 87 51.4183 87 47V37.5C87 33.0817 90.5817 29.5 95 29.5H102" stroke="#0096FF" stroke-dasharray="2 2"/>
+<path d="M49 55H58.4171H66.5H79C83.4183 55 87 51.4183 87 47V37.5C87 33.0817 90.5817 29.5 95 29.5H102" stroke="#0096FF" stroke-dasharray="2 2"/>
+<defs>
+<clipPath id="clip0_1882_2967">
+<rect width="18" height="18" fill="white" transform="translate(32 55)"/>
+</clipPath>
+</defs>
+</svg>`;

package/dist/inspector/ui/assets/gridIllustration.d.ts

@@ -0,0 +1,2 @@
+/** Inline markup so pages whose `img-src` blocks `data:` images still render it. */
+export declare const GRID_ILLUSTRATION_SVG = "<svg width=\"182\" height=\"72\" viewBox=\"0 0 182 72\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"11.5\" y=\"11.5\" width=\"47\" height=\"47\" stroke=\"black\" stroke-opacity=\"0.15\"/>\n<rect x=\"67.5\" y=\"11.5\" width=\"47\" height=\"47\" stroke=\"#0096FF\"/>\n<rect x=\"123.5\" y=\"11.5\" width=\"47\" height=\"47\" stroke=\"black\" stroke-opacity=\"0.15\"/>\n<mask id=\"path-4-inside-1_4219_25901\" fill=\"white\">\n<path d=\"M3 11H180V59H3V11Z\"/>\n</mask>\n<path d=\"M3 59V59.5H4.00568V59V58.5H3V59ZM6.01705 59V59.5H8.02841V59V58.5H6.01705V59ZM10.0398 59V59.5H12.0511V59V58.5H10.0398V59ZM14.0625 59V59.5H16.0739V59V58.5H14.0625V59ZM18.0852 59V59.5H20.0966V59V58.5H18.0852V59ZM22.108 59V59.5H24.1193V59V58.5H22.108V59ZM26.1307 59V59.5H28.142V59V58.5H26.1307V59ZM30.1534 59V59.5H32.1648V59V58.5H30.1534V59ZM34.1761 59V59.5H36.1875V59V58.5H34.1761V59ZM38.1989 59V59.5H40.2102V59V58.5H38.1989V59ZM42.2216 59V59.5H44.233V59V58.5H42.2216V59ZM46.2443 59V59.5H48.2557V59V58.5H46.2443V59ZM50.2671 59V59.5H52.2784V59V58.5H50.2671V59ZM54.2898 59V59.5H56.3011V59V58.5H54.2898V59ZM58.3125 59V59.5H60.3239V59V58.5H58.3125V59ZM62.3352 59V59.5H64.3466V59V58.5H62.3352V59ZM66.358 59V59.5H68.3693V59V58.5H66.358V59ZM70.3807 59V59.5H72.392V59V58.5H70.3807V59ZM74.4034 59V59.5H76.4148V59V58.5H74.4034V59ZM78.4261 59V59.5H80.4375V59V58.5H78.4261V59ZM82.4488 59V59.5H84.4602V59V58.5H82.4488V59ZM86.4716 59V59.5H88.4829V59V58.5H86.4716V59ZM90.4943 59V59.5H92.5056V59V58.5H90.4943V59ZM94.517 59V59.5H96.5284V59V58.5H94.517V59ZM98.5397 59V59.5H100.551V59V58.5H98.5397V59ZM102.562 59V59.5H104.574V59V58.5H102.562V59ZM106.585 59V59.5H108.597V59V58.5H106.585V59ZM110.608 59V59.5H112.619V59V58.5H110.608V59ZM114.631 59V59.5H116.642V59V58.5H114.631V59ZM118.653 59V59.5H120.665V59V58.5H118.653V59ZM122.676 59V59.5H124.687V59V58.5H122.676V59ZM126.699 59V59.5H128.71V59V58.5H126.699V59ZM130.721 59V59.5H132.733V59V58.5H130.721V59ZM134.744 59V59.5H136.756V59V58.5H134.744V59ZM138.767 59V59.5H140.778V59V58.5H138.767V59ZM142.79 59V59.5H144.801V59V58.5H142.79V59ZM146.812 59V59.5H148.824V59V58.5H146.812V59ZM150.835 59V59.5H152.847V59V58.5H150.835V59ZM154.858 59V59.5H156.869V59V58.5H154.858V59ZM158.881 59V59.5H160.892V59V58.5H158.881V59ZM162.903 59V59.5H164.915V59V58.5H162.903V59ZM166.926 59V59.5H168.937V59V58.5H166.926V59ZM170.949 59V59.5H172.96V59V58.5H170.949V59ZM174.972 59V59.5H176.983V59V58.5H174.972V59ZM178.994 59V59.5H180V59V58.5H178.994V59ZM180 11V10.5H178.994V11V11.5H180V11ZM176.983 11V10.5H174.972V11V11.5H176.983V11ZM172.96 11V10.5H170.949V11V11.5H172.96V11ZM168.938 11V10.5H166.926V11V11.5H168.938V11ZM164.915 11V10.5H162.903V11V11.5H164.915V11ZM160.892 11V10.5H158.881V11V11.5H160.892V11ZM156.869 11V10.5H154.858V11V11.5H156.869V11ZM152.847 11V10.5H150.835V11V11.5H152.847V11ZM148.824 11V10.5H146.812V11V11.5H148.824V11ZM144.801 11V10.5H142.79V11V11.5H144.801V11ZM140.778 11V10.5H138.767V11V11.5H140.778V11ZM136.756 11V10.5H134.744V11V11.5H136.756V11ZM132.733 11V10.5H130.722V11V11.5H132.733V11ZM128.71 11V10.5H126.699V11V11.5H128.71V11ZM124.687 11V10.5H122.676V11V11.5H124.687V11ZM120.665 11V10.5H118.653V11V11.5H120.665V11ZM116.642 11V10.5H114.631V11V11.5H116.642V11ZM112.619 11V10.5H110.608V11V11.5H112.619V11ZM108.597 11V10.5H106.585V11V11.5H108.597V11ZM104.574 11V10.5H102.563V11V11.5H104.574V11ZM100.551 11V10.5H98.5398V11V11.5H100.551V11ZM96.5284 11V10.5H94.5171V11V11.5H96.5284V11ZM92.5057 11V10.5H90.4944V11V11.5H92.5057V11ZM88.483 11V10.5H86.4716V11V11.5H88.483V11ZM84.4603 11V10.5H82.4489V11V11.5H84.4603V11ZM80.4376 11V10.5H78.4262V11V11.5H80.4376V11ZM76.4148 11V10.5H74.4035V11V11.5H76.4148V11ZM72.3921 11V10.5H70.3808V11V11.5H72.3921V11ZM68.3694 11V10.5H66.358V11V11.5H68.3694V11ZM64.3467 11V10.5H62.3353V11V11.5H64.3467V11ZM60.324 11V10.5H58.3126V11V11.5H60.324V11ZM56.3012 11V10.5H54.2899V11V11.5H56.3012V11ZM52.2785 11V10.5H50.2671V11V11.5H52.2785V11ZM48.2558 11V10.5H46.2444V11V11.5H48.2558V11ZM44.2331 11V10.5H42.2217V11V11.5H44.2331V11ZM40.2103 11V10.5H38.1989V11V11.5H40.2103V11ZM36.1876 11V10.5H34.1762V11V11.5H36.1876V11ZM32.1648 11V10.5H30.1535V11V11.5H32.1648V11ZM28.1421 11V10.5H26.1307V11V11.5H28.1421V11ZM24.1194 11V10.5H22.108V11V11.5H24.1194V11ZM20.0966 11V10.5H18.0853V11V11.5H20.0966V11ZM16.0739 11V10.5H14.0625V11V11.5H16.0739V11ZM12.0512 11V10.5H10.0398V11V11.5H12.0512V11ZM8.02843 11V10.5H6.01706V11V11.5H8.02843V11ZM4.00569 11V10.5H3V11V11.5H4.00569V11ZM3 59V60H4.00568V59V58H3V59ZM6.01705 59V60H8.02841V59V58H6.01705V59ZM10.0398 59V60H12.0511V59V58H10.0398V59ZM14.0625 59V60H16.0739V59V58H14.0625V59ZM18.0852 59V60H20.0966V59V58H18.0852V59ZM22.108 59V60H24.1193V59V58H22.108V59ZM26.1307 59V60H28.142V59V58H26.1307V59ZM30.1534 59V60H32.1648V59V58H30.1534V59ZM34.1761 59V60H36.1875V59V58H34.1761V59ZM38.1989 59V60H40.2102V59V58H38.1989V59ZM42.2216 59V60H44.233V59V58H42.2216V59ZM46.2443 59V60H48.2557V59V58H46.2443V59ZM50.2671 59V60H52.2784V59V58H50.2671V59ZM54.2898 59V60H56.3011V59V58H54.2898V59ZM58.3125 59V60H60.3239V59V58H58.3125V59ZM62.3352 59V60H64.3466V59V58H62.3352V59ZM66.358 59V60H68.3693V59V58H66.358V59ZM70.3807 59V60H72.392V59V58H70.3807V59ZM74.4034 59V60H76.4148V59V58H74.4034V59ZM78.4261 59V60H80.4375V59V58H78.4261V59ZM82.4488 59V60H84.4602V59V58H82.4488V59ZM86.4716 59V60H88.4829V59V58H86.4716V59ZM90.4943 59V60H92.5056V59V58H90.4943V59ZM94.517 59V60H96.5284V59V58H94.517V59ZM98.5397 59V60H100.551V59V58H98.5397V59ZM102.562 59V60H104.574V59V58H102.562V59ZM106.585 59V60H108.597V59V58H106.585V59ZM110.608 59V60H112.619V59V58H110.608V59ZM114.631 59V60H116.642V59V58H114.631V59ZM118.653 59V60H120.665V59V58H118.653V59ZM122.676 59V60H124.687V59V58H122.676V59ZM126.699 59V60H128.71V59V58H126.699V59ZM130.721 59V60H132.733V59V58H130.721V59ZM134.744 59V60H136.756V59V58H134.744V59ZM138.767 59V60H140.778V59V58H138.767V59ZM142.79 59V60H144.801V59V58H142.79V59ZM146.812 59V60H148.824V59V58H146.812V59ZM150.835 59V60H152.847V59V58H150.835V59ZM154.858 59V60H156.869V59V58H154.858V59ZM158.881 59V60H160.892V59V58H158.881V59ZM162.903 59V60H164.915V59V58H162.903V59ZM166.926 59V60H168.937V59V58H166.926V59ZM170.949 59V60H172.96V59V58H170.949V59ZM174.972 59V60H176.983V59V58H174.972V59ZM178.994 59V60H180V59V58H178.994V59ZM180 11V10H178.994V11V12H180V11ZM176.983 11V10H174.972V11V12H176.983V11ZM172.96 11V10H170.949V11V12H172.96V11ZM168.938 11V10H166.926V11V12H168.938V11ZM164.915 11V10H162.903V11V12H164.915V11ZM160.892 11V10H158.881V11V12H160.892V11ZM156.869 11V10H154.858V11V12H156.869V11ZM152.847 11V10H150.835V11V12H152.847V11ZM148.824 11V10H146.812V11V12H148.824V11ZM144.801 11V10H142.79V11V12H144.801V11ZM140.778 11V10H138.767V11V12H140.778V11ZM136.756 11V10H134.744V11V12H136.756V11ZM132.733 11V10H130.722V11V12H132.733V11ZM128.71 11V10H126.699V11V12H128.71V11ZM124.687 11V10H122.676V11V12H124.687V11ZM120.665 11V10H118.653V11V12H120.665V11ZM116.642 11V10H114.631V11V12H116.642V11ZM112.619 11V10H110.608V11V12H112.619V11ZM108.597 11V10H106.585V11V12H108.597V11ZM104.574 11V10H102.563V11V12H104.574V11ZM100.551 11V10H98.5398V11V12H100.551V11ZM96.5284 11V10H94.5171V11V12H96.5284V11ZM92.5057 11V10H90.4944V11V12H92.5057V11ZM88.483 11V10H86.4716V11V12H88.483V11ZM84.4603 11V10H82.4489V11V12H84.4603V11ZM80.4376 11V10H78.4262V11V12H80.4376V11ZM76.4148 11V10H74.4035V11V12H76.4148V11ZM72.3921 11V10H70.3808V11V12H72.3921V11ZM68.3694 11V10H66.358V11V12H68.3694V11ZM64.3467 11V10H62.3353V11V12H64.3467V11ZM60.324 11V10H58.3126V11V12H60.324V11ZM56.3012 11V10H54.2899V11V12H56.3012V11ZM52.2785 11V10H50.2671V11V12H52.2785V11ZM48.2558 11V10H46.2444V11V12H48.2558V11ZM44.2331 11V10H42.2217V11V12H44.2331V11ZM40.2103 11V10H38.1989V11V12H40.2103V11ZM36.1876 11V10H34.1762V11V12H36.1876V11ZM32.1648 11V10H30.1535V11V12H32.1648V11ZM28.1421 11V10H26.1307V11V12H28.1421V11ZM24.1194 11V10H22.108V11V12H24.1194V11ZM20.0966 11V10H18.0853V11V12H20.0966V11ZM16.0739 11V10H14.0625V11V12H16.0739V11ZM12.0512 11V10H10.0398V11V12H12.0512V11ZM8.02843 11V10H6.01706V11V12H8.02843V11ZM4.00569 11V10H3V11V12H4.00569V11Z\" fill=\"#0096FF\" mask=\"url(#path-4-inside-1_4219_25901)\"/>\n<mask id=\"path-6-inside-2_4219_25901\" fill=\"white\">\n<path d=\"M67 68L67 2L115 2L115 68L67 68Z\"/>\n</mask>\n<path d=\"M115 68L115.5 68L115.5 67.0294L115 67.0294L114.5 67.0294L114.5 68L115 68ZM115 65.0882L115.5 65.0882L115.5 63.1471L115 63.1471L114.5 63.1471L114.5 65.0882L115 65.0882ZM115 61.2059L115.5 61.2059L115.5 59.2647L115 59.2647L114.5 59.2647L114.5 61.2059L115 61.2059ZM115 57.3235L115.5 57.3235L115.5 55.3824L115 55.3824L114.5 55.3824L114.5 57.3235L115 57.3235ZM115 53.4412L115.5 53.4412L115.5 51.5L115 51.5L114.5 51.5L114.5 53.4412L115 53.4412ZM115 49.5588L115.5 49.5588L115.5 47.6176L115 47.6176L114.5 47.6176L114.5 49.5588L115 49.5588ZM115 45.6765L115.5 45.6765L115.5 43.7353L115 43.7353L114.5 43.7353L114.5 45.6765L115 45.6765ZM115 41.7941L115.5 41.7941L115.5 39.8529L115 39.8529L114.5 39.8529L114.5 41.7941L115 41.7941ZM115 37.9118L115.5 37.9118L115.5 35.9706L115 35.9706L114.5 35.9706L114.5 37.9118L115 37.9118ZM115 34.0294L115.5 34.0294L115.5 32.0882L115 32.0882L114.5 32.0882L114.5 34.0294L115 34.0294ZM115 30.147L115.5 30.147L115.5 28.2059L115 28.2059L114.5 28.2059L114.5 30.147L115 30.147ZM115 26.2647L115.5 26.2647L115.5 24.3235L115 24.3235L114.5 24.3235L114.5 26.2647L115 26.2647ZM115 22.3823L115.5 22.3823L115.5 20.4412L115 20.4412L114.5 20.4412L114.5 22.3823L115 22.3823ZM115 18.5L115.5 18.5L115.5 16.5588L115 16.5588L114.5 16.5588L114.5 18.5L115 18.5ZM115 14.6176L115.5 14.6176L115.5 12.6765L115 12.6765L114.5 12.6765L114.5 14.6176L115 14.6176ZM115 10.7353L115.5 10.7353L115.5 8.7941L115 8.7941L114.5 8.7941L114.5 10.7353L115 10.7353ZM115 6.85292L115.5 6.85292L115.5 4.91174L115 4.91174L114.5 4.91174L114.5 6.85292L115 6.85292ZM115 2.97056L115.5 2.97056L115.5 2L115 2L114.5 2L114.5 2.97056L115 2.97056ZM67 2L66.5 2L66.5 2.97059L67 2.97059L67.5 2.97059L67.5 2L67 2ZM67 4.91177L66.5 4.91177L66.5 6.85294L67 6.85294L67.5 6.85294L67.5 4.91177L67 4.91177ZM67 8.79412L66.5 8.79412L66.5 10.7353L67 10.7353L67.5 10.7353L67.5 8.79412L67 8.79412ZM67 12.6765L66.5 12.6765L66.5 14.6176L67 14.6176L67.5 14.6176L67.5 12.6765L67 12.6765ZM67 16.5588L66.5 16.5588L66.5 18.5L67 18.5L67.5 18.5L67.5 16.5588L67 16.5588ZM67 20.4412L66.5 20.4412L66.5 22.3824L67 22.3824L67.5 22.3824L67.5 20.4412L67 20.4412ZM67 24.3235L66.5 24.3235L66.5 26.2647L67 26.2647L67.5 26.2647L67.5 24.3235L67 24.3235ZM67 28.2059L66.5 28.2059L66.5 30.1471L67 30.1471L67.5 30.1471L67.5 28.2059L67 28.2059ZM67 32.0882L66.5 32.0882L66.5 34.0294L67 34.0294L67.5 34.0294L67.5 32.0882L67 32.0882ZM67 35.9706L66.5 35.9706L66.5 37.9118L67 37.9118L67.5 37.9118L67.5 35.9706L67 35.9706ZM67 39.8529L66.5 39.8529L66.5 41.7941L67 41.7941L67.5 41.7941L67.5 39.8529L67 39.8529ZM67 43.7353L66.5 43.7353L66.5 45.6765L67 45.6765L67.5 45.6765L67.5 43.7353L67 43.7353ZM67 47.6177L66.5 47.6177L66.5 49.5588L67 49.5588L67.5 49.5588L67.5 47.6177L67 47.6177ZM67 51.5L66.5 51.5L66.5 53.4412L67 53.4412L67.5 53.4412L67.5 51.5L67 51.5ZM67 55.3824L66.5 55.3824L66.5 57.3235L67 57.3235L67.5 57.3235L67.5 55.3824L67 55.3824ZM67 59.2647L66.5 59.2647L66.5 61.2059L67 61.2059L67.5 61.2059L67.5 59.2647L67 59.2647ZM67 63.1471L66.5 63.1471L66.5 65.0883L67 65.0883L67.5 65.0883L67.5 63.1471L67 63.1471ZM67 67.0294L66.5 67.0294L66.5 68L67 68L67.5 68L67.5 67.0294L67 67.0294ZM115 68L116 68L116 67.0294L115 67.0294L114 67.0294L114 68L115 68ZM115 65.0882L116 65.0882L116 63.1471L115 63.1471L114 63.1471L114 65.0882L115 65.0882ZM115 61.2059L116 61.2059L116 59.2647L115 59.2647L114 59.2647L114 61.2059L115 61.2059ZM115 57.3235L116 57.3235L116 55.3824L115 55.3824L114 55.3824L114 57.3235L115 57.3235ZM115 53.4412L116 53.4412L116 51.5L115 51.5L114 51.5L114 53.4412L115 53.4412ZM115 49.5588L116 49.5588L116 47.6176L115 47.6176L114 47.6176L114 49.5588L115 49.5588ZM115 45.6765L116 45.6765L116 43.7353L115 43.7353L114 43.7353L114 45.6765L115 45.6765ZM115 41.7941L116 41.7941L116 39.8529L115 39.8529L114 39.8529L114 41.7941L115 41.7941ZM115 37.9118L116 37.9118L116 35.9706L115 35.9706L114 35.9706L114 37.9118L115 37.9118ZM115 34.0294L116 34.0294L116 32.0882L115 32.0882L114 32.0882L114 34.0294L115 34.0294ZM115 30.147L116 30.147L116 28.2059L115 28.2059L114 28.2059L114 30.147L115 30.147ZM115 26.2647L116 26.2647L116 24.3235L115 24.3235L114 24.3235L114 26.2647L115 26.2647ZM115 22.3823L116 22.3823L116 20.4412L115 20.4412L114 20.4412L114 22.3823L115 22.3823ZM115 18.5L116 18.5L116 16.5588L115 16.5588L114 16.5588L114 18.5L115 18.5ZM115 14.6176L116 14.6176L116 12.6765L115 12.6765L114 12.6765L114 14.6176L115 14.6176ZM115 10.7353L116 10.7353L116 8.7941L115 8.7941L114 8.7941L114 10.7353L115 10.7353ZM115 6.85292L116 6.85292L116 4.91174L115 4.91174L114 4.91174L114 6.85292L115 6.85292ZM115 2.97056L116 2.97056L116 2L115 2L114 2L114 2.97056L115 2.97056ZM67 2L66 2L66 2.97059L67 2.97059L68 2.97059L68 2L67 2ZM67 4.91177L66 4.91177L66 6.85294L67 6.85294L68 6.85294L68 4.91177L67 4.91177ZM67 8.79412L66 8.79412L66 10.7353L67 10.7353L68 10.7353L68 8.79412L67 8.79412ZM67 12.6765L66 12.6765L66 14.6176L67 14.6176L68 14.6176L68 12.6765L67 12.6765ZM67 16.5588L66 16.5588L66 18.5L67 18.5L68 18.5L68 16.5588L67 16.5588ZM67 20.4412L66 20.4412L66 22.3824L67 22.3824L68 22.3824L68 20.4412L67 20.4412ZM67 24.3235L66 24.3235L66 26.2647L67 26.2647L68 26.2647L68 24.3235L67 24.3235ZM67 28.2059L66 28.2059L66 30.1471L67 30.1471L68 30.1471L68 28.2059L67 28.2059ZM67 32.0882L66 32.0882L66 34.0294L67 34.0294L68 34.0294L68 32.0882L67 32.0882ZM67 35.9706L66 35.9706L66 37.9118L67 37.9118L68 37.9118L68 35.9706L67 35.9706ZM67 39.8529L66 39.8529L66 41.7941L67 41.7941L68 41.7941L68 39.8529L67 39.8529ZM67 43.7353L66 43.7353L66 45.6765L67 45.6765L68 45.6765L68 43.7353L67 43.7353ZM67 47.6177L66 47.6177L66 49.5588L67 49.5588L68 49.5588L68 47.6177L67 47.6177ZM67 51.5L66 51.5L66 53.4412L67 53.4412L68 53.4412L68 51.5L67 51.5ZM67 55.3824L66 55.3824L66 57.3235L67 57.3235L68 57.3235L68 55.3824L67 55.3824ZM67 59.2647L66 59.2647L66 61.2059L67 61.2059L68 61.2059L68 59.2647L67 59.2647ZM67 63.1471L66 63.1471L66 65.0883L67 65.0883L68 65.0883L68 63.1471L67 63.1471ZM67 67.0294L66 67.0294L66 68L67 68L68 68L68 67.0294L67 67.0294Z\" fill=\"#0096FF\" mask=\"url(#path-6-inside-2_4219_25901)\"/>\n<path d=\"M99.8275 63.5419L94.2119 49L109.294 55.1409L101.79 56.0727L99.8275 63.5419Z\" fill=\"black\" stroke=\"white\"/>\n</svg>";

package/dist/inspector/ui/assets/{grid.svg → gridIllustration.js}

@@ -1,4 +1,5 @@
-<svg width="182" height="72" viewBox="0 0 182 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+/** Inline markup so pages whose `img-src` blocks `data:` images still render it. */
+export const GRID_ILLUSTRATION_SVG = `<svg width="182" height="72" viewBox="0 0 182 72" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect x="11.5" y="11.5" width="47" height="47" stroke="black" stroke-opacity="0.15"/>
 <rect x="67.5" y="11.5" width="47" height="47" stroke="#0096FF"/>
 <rect x="123.5" y="11.5" width="47" height="47" stroke="black" stroke-opacity="0.15"/>
@@ -11,4 +12,4 @@
 </mask>
 <path d="M115 68L115.5 68L115.5 67.0294L115 67.0294L114.5 67.0294L114.5 68L115 68ZM115 65.0882L115.5 65.0882L115.5 63.1471L115 63.1471L114.5 63.1471L114.5 65.0882L115 65.0882ZM115 61.2059L115.5 61.2059L115.5 59.2647L115 59.2647L114.5 59.2647L114.5 61.2059L115 61.2059ZM115 57.3235L115.5 57.3235L115.5 55.3824L115 55.3824L114.5 55.3824L114.5 57.3235L115 57.3235ZM115 53.4412L115.5 53.4412L115.5 51.5L115 51.5L114.5 51.5L114.5 53.4412L115 53.4412ZM115 49.5588L115.5 49.5588L115.5 47.6176L115 47.6176L114.5 47.6176L114.5 49.5588L115 49.5588ZM115 45.6765L115.5 45.6765L115.5 43.7353L115 43.7353L114.5 43.7353L114.5 45.6765L115 45.6765ZM115 41.7941L115.5 41.7941L115.5 39.8529L115 39.8529L114.5 39.8529L114.5 41.7941L115 41.7941ZM115 37.9118L115.5 37.9118L115.5 35.9706L115 35.9706L114.5 35.9706L114.5 37.9118L115 37.9118ZM115 34.0294L115.5 34.0294L115.5 32.0882L115 32.0882L114.5 32.0882L114.5 34.0294L115 34.0294ZM115 30.147L115.5 30.147L115.5 28.2059L115 28.2059L114.5 28.2059L114.5 30.147L115 30.147ZM115 26.2647L115.5 26.2647L115.5 24.3235L115 24.3235L114.5 24.3235L114.5 26.2647L115 26.2647ZM115 22.3823L115.5 22.3823L115.5 20.4412L115 20.4412L114.5 20.4412L114.5 22.3823L115 22.3823ZM115 18.5L115.5 18.5L115.5 16.5588L115 16.5588L114.5 16.5588L114.5 18.5L115 18.5ZM115 14.6176L115.5 14.6176L115.5 12.6765L115 12.6765L114.5 12.6765L114.5 14.6176L115 14.6176ZM115 10.7353L115.5 10.7353L115.5 8.7941L115 8.7941L114.5 8.7941L114.5 10.7353L115 10.7353ZM115 6.85292L115.5 6.85292L115.5 4.91174L115 4.91174L114.5 4.91174L114.5 6.85292L115 6.85292ZM115 2.97056L115.5 2.97056L115.5 2L115 2L114.5 2L114.5 2.97056L115 2.97056ZM67 2L66.5 2L66.5 2.97059L67 2.97059L67.5 2.97059L67.5 2L67 2ZM67 4.91177L66.5 4.91177L66.5 6.85294L67 6.85294L67.5 6.85294L67.5 4.91177L67 4.91177ZM67 8.79412L66.5 8.79412L66.5 10.7353L67 10.7353L67.5 10.7353L67.5 8.79412L67 8.79412ZM67 12.6765L66.5 12.6765L66.5 14.6176L67 14.6176L67.5 14.6176L67.5 12.6765L67 12.6765ZM67 16.5588L66.5 16.5588L66.5 18.5L67 18.5L67.5 18.5L67.5 16.5588L67 16.5588ZM67 20.4412L66.5 20.4412L66.5 22.3824L67 22.3824L67.5 22.3824L67.5 20.4412L67 20.4412ZM67 24.3235L66.5 24.3235L66.5 26.2647L67 26.2647L67.5 26.2647L67.5 24.3235L67 24.3235ZM67 28.2059L66.5 28.2059L66.5 30.1471L67 30.1471L67.5 30.1471L67.5 28.2059L67 28.2059ZM67 32.0882L66.5 32.0882L66.5 34.0294L67 34.0294L67.5 34.0294L67.5 32.0882L67 32.0882ZM67 35.9706L66.5 35.9706L66.5 37.9118L67 37.9118L67.5 37.9118L67.5 35.9706L67 35.9706ZM67 39.8529L66.5 39.8529L66.5 41.7941L67 41.7941L67.5 41.7941L67.5 39.8529L67 39.8529ZM67 43.7353L66.5 43.7353L66.5 45.6765L67 45.6765L67.5 45.6765L67.5 43.7353L67 43.7353ZM67 47.6177L66.5 47.6177L66.5 49.5588L67 49.5588L67.5 49.5588L67.5 47.6177L67 47.6177ZM67 51.5L66.5 51.5L66.5 53.4412L67 53.4412L67.5 53.4412L67.5 51.5L67 51.5ZM67 55.3824L66.5 55.3824L66.5 57.3235L67 57.3235L67.5 57.3235L67.5 55.3824L67 55.3824ZM67 59.2647L66.5 59.2647L66.5 61.2059L67 61.2059L67.5 61.2059L67.5 59.2647L67 59.2647ZM67 63.1471L66.5 63.1471L66.5 65.0883L67 65.0883L67.5 65.0883L67.5 63.1471L67 63.1471ZM67 67.0294L66.5 67.0294L66.5 68L67 68L67.5 68L67.5 67.0294L67 67.0294ZM115 68L116 68L116 67.0294L115 67.0294L114 67.0294L114 68L115 68ZM115 65.0882L116 65.0882L116 63.1471L115 63.1471L114 63.1471L114 65.0882L115 65.0882ZM115 61.2059L116 61.2059L116 59.2647L115 59.2647L114 59.2647L114 61.2059L115 61.2059ZM115 57.3235L116 57.3235L116 55.3824L115 55.3824L114 55.3824L114 57.3235L115 57.3235ZM115 53.4412L116 53.4412L116 51.5L115 51.5L114 51.5L114 53.4412L115 53.4412ZM115 49.5588L116 49.5588L116 47.6176L115 47.6176L114 47.6176L114 49.5588L115 49.5588ZM115 45.6765L116 45.6765L116 43.7353L115 43.7353L114 43.7353L114 45.6765L115 45.6765ZM115 41.7941L116 41.7941L116 39.8529L115 39.8529L114 39.8529L114 41.7941L115 41.7941ZM115 37.9118L116 37.9118L116 35.9706L115 35.9706L114 35.9706L114 37.9118L115 37.9118ZM115 34.0294L116 34.0294L116 32.0882L115 32.0882L114 32.0882L114 34.0294L115 34.0294ZM115 30.147L116 30.147L116 28.2059L115 28.2059L114 28.2059L114 30.147L115 30.147ZM115 26.2647L116 26.2647L116 24.3235L115 24.3235L114 24.3235L114 26.2647L115 26.2647ZM115 22.3823L116 22.3823L116 20.4412L115 20.4412L114 20.4412L114 22.3823L115 22.3823ZM115 18.5L116 18.5L116 16.5588L115 16.5588L114 16.5588L114 18.5L115 18.5ZM115 14.6176L116 14.6176L116 12.6765L115 12.6765L114 12.6765L114 14.6176L115 14.6176ZM115 10.7353L116 10.7353L116 8.7941L115 8.7941L114 8.7941L114 10.7353L115 10.7353ZM115 6.85292L116 6.85292L116 4.91174L115 4.91174L114 4.91174L114 6.85292L115 6.85292ZM115 2.97056L116 2.97056L116 2L115 2L114 2L114 2.97056L115 2.97056ZM67 2L66 2L66 2.97059L67 2.97059L68 2.97059L68 2L67 2ZM67 4.91177L66 4.91177L66 6.85294L67 6.85294L68 6.85294L68 4.91177L67 4.91177ZM67 8.79412L66 8.79412L66 10.7353L67 10.7353L68 10.7353L68 8.79412L67 8.79412ZM67 12.6765L66 12.6765L66 14.6176L67 14.6176L68 14.6176L68 12.6765L67 12.6765ZM67 16.5588L66 16.5588L66 18.5L67 18.5L68 18.5L68 16.5588L67 16.5588ZM67 20.4412L66 20.4412L66 22.3824L67 22.3824L68 22.3824L68 20.4412L67 20.4412ZM67 24.3235L66 24.3235L66 26.2647L67 26.2647L68 26.2647L68 24.3235L67 24.3235ZM67 28.2059L66 28.2059L66 30.1471L67 30.1471L68 30.1471L68 28.2059L67 28.2059ZM67 32.0882L66 32.0882L66 34.0294L67 34.0294L68 34.0294L68 32.0882L67 32.0882ZM67 35.9706L66 35.9706L66 37.9118L67 37.9118L68 37.9118L68 35.9706L67 35.9706ZM67 39.8529L66 39.8529L66 41.7941L67 41.7941L68 41.7941L68 39.8529L67 39.8529ZM67 43.7353L66 43.7353L66 45.6765L67 45.6765L68 45.6765L68 43.7353L67 43.7353ZM67 47.6177L66 47.6177L66 49.5588L67 49.5588L68 49.5588L68 47.6177L67 47.6177ZM67 51.5L66 51.5L66 53.4412L67 53.4412L68 53.4412L68 51.5L67 51.5ZM67 55.3824L66 55.3824L66 57.3235L67 57.3235L68 57.3235L68 55.3824L67 55.3824ZM67 59.2647L66 59.2647L66 61.2059L67 61.2059L68 61.2059L68 59.2647L67 59.2647ZM67 63.1471L66 63.1471L66 65.0883L67 65.0883L68 65.0883L68 63.1471L67 63.1471ZM67 67.0294L66 67.0294L66 68L67 68L68 68L68 67.0294L67 67.0294Z" fill="#0096FF" mask="url(#path-6-inside-2_4219_25901)"/>
 <path d="M99.8275 63.5419L94.2119 49L109.294 55.1409L101.79 56.0727L99.8275 63.5419Z" fill="black" stroke="white"/>
-</svg>
+</svg>`;

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

@@ -10,14 +10,19 @@ export declare const DRAG_CURSOR_HOTSPOT: {
     readonly x: 14.4;
     readonly y: 12;
 };
+export type CursorImage = "design-select" | "drag" | "sketch" | "eraser" | "comment";
 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 ERASER_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;
+/** Image files for hosts that serve cursors from a base URL; the comment cursor uses default tokens. */
+export declare function cursorImageFiles(): Record<CursorImage, 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 const ERASER_CURSOR: string;
 export declare function rendererCursorValue(cursor: RendererCursor, commentCursor?: string): string;