nudge-ui 0.2.0

package/dist/inspector/selection/editScope.js

@@ -0,0 +1,140 @@
+import { getRenderedInstanceOverride, createRenderedInstanceOverride, buildRenderedInstanceOverrideForTarget, captureRenderedInstance, clearRenderedInstanceOverride, resolveRenderedInstance, } from "../projection/renderedInstance.js";
+import { sourceSiteSelector } from "./sourceSite.js";
+export { sourceSiteSelector } from "./sourceSite.js";
+let sourceSiteMatchCounts = new WeakMap();
+/** Test hook: clears the memoized source-site match counts. */
+export function resetSourceSiteMatchCounts() {
+    sourceSiteMatchCounts = new WeakMap();
+}
+function querySourceSiteMatches(el) {
+    const cid = el.getAttribute("data-cid") ?? "";
+    const src = el.getAttribute("data-src") ?? "";
+    const selector = sourceSiteSelector(cid, src);
+    if (!selector)
+        return 0;
+    const doc = el.ownerDocument ?? document;
+    try {
+        return doc.querySelectorAll(selector).length;
+    }
+    catch {
+        return 0;
+    }
+}
+/**
+ * Counts the rendered elements matching a source site. The result is memoized
+ * per (element identity, scope revision) so the selection render path no longer
+ * runs a full-document querySelectorAll on every render; it only recomputes
+ * when the caller's scope revision changes.
+ */
+export function countSourceSiteMatches(el, revision = 0) {
+    const cid = el.getAttribute("data-cid") ?? "";
+    const src = el.getAttribute("data-src") ?? "";
+    const doc = el.ownerDocument ?? document;
+    const key = `${cid}\u0000${src}\u0000${revision}`;
+    let documentCache = sourceSiteMatchCounts.get(doc);
+    if (!documentCache) {
+        documentCache = new WeakMap();
+        sourceSiteMatchCounts.set(doc, documentCache);
+    }
+    let cache = documentCache.get(el);
+    if (!cache) {
+        cache = new Map();
+        documentCache.set(el, cache);
+    }
+    const cached = cache.get(key);
+    if (cached !== undefined)
+        return cached;
+    const count = querySourceSiteMatches(el);
+    if (cache.size >= 4096)
+        cache.clear();
+    cache.set(key, count);
+    return count;
+}
+export function unlinkElement(el) {
+    return getRenderedInstanceOverride(el)?.id ?? createRenderedInstanceOverride(el)?.id ?? null;
+}
+export function relinkElement(el) {
+    return clearRenderedInstanceOverride(el)?.id ?? null;
+}
+export function getEditScope(el) {
+    return getRenderedInstanceOverride(el) ? "rendered-instance" : "source-site";
+}
+/**
+ * Plans the scope for every target in a batch edit without mutating the DOM or
+ * transient instance state. A partial repeated-source group is editable only
+ * when each selected output has evidence that resolves uniquely.
+ */
+function analyzeBatchEditScopes(selectedElements) {
+    const plan = new Map();
+    if (selectedElements.length <= 1) {
+        for (const element of selectedElements) {
+            const existing = getRenderedInstanceOverride(element);
+            plan.set(element, existing
+                ? { scope: "rendered-instance", instanceOverride: existing }
+                : { scope: "source-site" });
+        }
+        return plan;
+    }
+    const selectedBySource = new Map();
+    for (const element of selectedElements) {
+        const selector = selectorForElement(element);
+        if (selector)
+            selectedBySource.set(selector, (selectedBySource.get(selector) ?? 0) + 1);
+    }
+    for (const element of selectedElements) {
+        const existing = getRenderedInstanceOverride(element);
+        if (existing) {
+            plan.set(element, { scope: "rendered-instance", instanceOverride: existing });
+            continue;
+        }
+        const selector = selectorForElement(element);
+        if (!selector) {
+            plan.set(element, { scope: "source-site" });
+            continue;
+        }
+        const selectedForSource = selectedBySource.get(selector) ?? 0;
+        const totalForSource = querySourceSiteMatches(element);
+        if (totalForSource <= 1 || selectedForSource >= totalForSource) {
+            plan.set(element, { scope: "source-site" });
+            continue;
+        }
+        const target = captureRenderedInstance(element);
+        if (!target)
+            return null;
+        const resolution = resolveRenderedInstance(element.ownerDocument, target);
+        if (resolution.status !== "resolved" || resolution.element !== element)
+            return null;
+        plan.set(element, { scope: "new-rendered-instance", target });
+    }
+    return plan;
+}
+/** Returns whether every element can be addressed safely by one batch edit. */
+export function canPlanBatchEditScopes(selectedElements) {
+    return analyzeBatchEditScopes(selectedElements) !== null;
+}
+/** Resolves safe scopes immediately before a write is committed. */
+export function planBatchEditScopes(selectedElements) {
+    const decisions = analyzeBatchEditScopes(selectedElements);
+    if (!decisions)
+        return null;
+    const plan = new Map();
+    for (const [element, decision] of decisions) {
+        plan.set(element, decision.scope === "new-rendered-instance"
+            ? {
+                scope: "rendered-instance",
+                instanceOverride: buildRenderedInstanceOverrideForTarget(decision.target),
+            }
+            : decision);
+    }
+    return plan;
+}
+export function selectorForElement(el) {
+    return sourceSiteSelector(el.getAttribute("data-cid") ?? "", el.getAttribute("data-src") ?? "");
+}
+export function getInstanceEvidence(el) {
+    const selector = sourceSiteSelector(el.getAttribute("data-cid") ?? "", el.getAttribute("data-src") ?? "");
+    const matches = selector ? Array.from(el.ownerDocument.querySelectorAll(selector)) : [];
+    const renderedIndex = Math.max(0, matches.indexOf(el));
+    const text = el.textContent?.replace(/\s+/g, " ").trim().slice(0, 120) || null;
+    return { renderedIndex, props: el.getAttribute("data-cprops"), text, ariaLabel: el.getAttribute("aria-label") };
+}

package/dist/inspector/selection/editTarget.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A style edit target is deliberately smaller than the selection model. The
+ * editor only needs the rendered DOM nodes that will receive one declaration;
+ * source metadata and selection ordering stay inside the selection module.
+ */
+export type EditTarget = HTMLElement | readonly HTMLElement[];
+export declare function targetElements(target: EditTarget): readonly HTMLElement[];
+export declare function isMultiTarget(target: EditTarget): boolean;

package/dist/inspector/selection/editTarget.js

@@ -0,0 +1,11 @@
+function isElementList(target) {
+    return Array.isArray(target);
+}
+export function targetElements(target) {
+    if (isElementList(target))
+        return target;
+    return [target];
+}
+export function isMultiTarget(target) {
+    return targetElements(target).length > 1;
+}

package/dist/inspector/selection/hierarchy.d.ts

@@ -0,0 +1,7 @@
+export declare function computeHierarchy(el: HTMLElement): HTMLElement[];
+export interface DescendantNode {
+    element: HTMLElement;
+    depth: number;
+}
+/** Returns the nearest tracked descendants, breadth-first and document-ordered. */
+export declare function computeDescendants(el: HTMLElement, maxDepth?: number, maxNodes?: number): DescendantNode[];

package/dist/inspector/selection/hierarchy.js

@@ -0,0 +1,42 @@
+import { isShadowRootInDocument } from "../runtime/domRealm.js";
+function isInsideInspector(el) {
+    if (el.id === "nudge-ui-root")
+        return true;
+    if (el.closest("#nudge-ui-root"))
+        return true;
+    const root = el.getRootNode();
+    return isShadowRootInDocument(root, el.ownerDocument) && root.host.id === "nudge-ui-root";
+}
+export function computeHierarchy(el) {
+    if (isInsideInspector(el))
+        return [];
+    const chain = [];
+    let node = el;
+    while (node && node !== el.ownerDocument.body && node.tagName !== "BODY") {
+        if (node.id === "nudge-ui-root")
+            break;
+        if (node.hasAttribute("data-cid"))
+            chain.push(node);
+        node = node.parentElement;
+    }
+    return chain;
+}
+/** Returns the nearest tracked descendants, breadth-first and document-ordered. */
+export function computeDescendants(el, maxDepth = 2, maxNodes = 2) {
+    if (maxDepth < 1 || maxNodes < 1)
+        return [];
+    const descendants = Array.from(el.querySelectorAll('[data-cid]'))
+        .map((element, order) => {
+        let depth = 1;
+        let ancestor = element.parentElement;
+        while (ancestor && ancestor !== el) {
+            if (ancestor.hasAttribute('data-cid'))
+                depth += 1;
+            ancestor = ancestor.parentElement;
+        }
+        return ancestor === el ? { element, depth, order } : null;
+    })
+        .filter((node) => node !== null && node.depth <= maxDepth)
+        .sort((left, right) => left.depth - right.depth || left.order - right.order);
+    return descendants.slice(0, maxNodes).map(({ element, depth }) => ({ element, depth }));
+}

package/dist/inspector/selection/resolveSelection.d.ts

@@ -0,0 +1,10 @@
+import type { SelectedElement } from "./selectionStore.js";
+import { type SelectionTargetMode } from "./selectionTarget.js";
+export interface ParsedSrc {
+    file: string;
+    line: number;
+    column: number;
+}
+export declare function parseDataSrc(src: string): ParsedSrc | null;
+export declare function resolveSelectionFromElement(el: HTMLElement): SelectedElement | null;
+export declare function resolveSelectionFromEvent(e: MouseEvent, inspectorHost: Element, mode?: SelectionTargetMode): SelectedElement | null;

package/dist/inspector/selection/resolveSelection.js

@@ -0,0 +1,60 @@
+import { inspectComponentTargets } from "../componentSemantics/index.js";
+import { resolveSelectionTarget, selectionTargetMode } from "./selectionTarget.js";
+const REACT_FIBER_KEY = /^__reactFiber\$/;
+const REACT_INTERNAL_KEY = /^__reactInternalInstance\$/;
+const SRC_PATTERN = /^(.*):(\d+):(\d+)$/;
+export function parseDataSrc(src) {
+    const match = SRC_PATTERN.exec(src);
+    if (!match)
+        return null;
+    const file = match[1];
+    const line = Number(match[2]);
+    const column = Number(match[3]);
+    if (file === undefined || Number.isNaN(line) || Number.isNaN(column))
+        return null;
+    return { file, line, column };
+}
+function findReactFiber(el) {
+    const keys = Object.keys(el);
+    for (const key of keys) {
+        if (REACT_FIBER_KEY.test(key) || REACT_INTERNAL_KEY.test(key)) {
+            return Reflect.get(el, key);
+        }
+    }
+    return undefined;
+}
+export function resolveSelectionFromElement(el) {
+    const componentTargets = inspectComponentTargets(el);
+    const nearestComponent = componentTargets[0];
+    const cid = el.getAttribute("data-cid") ?? nearestComponent?.meta.componentName ?? null;
+    if (!cid)
+        return null;
+    const src = el.getAttribute("data-src") ?? nearestComponent?.meta.callsiteId ?? "";
+    const parsed = parseDataSrc(src);
+    const cpropsAttr = el.getAttribute("data-cprops");
+    const fiber = findReactFiber(el);
+    return {
+        cid,
+        src,
+        cprops: cpropsAttr,
+        file: parsed?.file ?? src,
+        line: parsed?.line ?? 0,
+        column: parsed?.column ?? 0,
+        domElement: el,
+        fiber,
+        componentTargets,
+    };
+}
+export function resolveSelectionFromEvent(e, inspectorHost, mode = selectionTargetMode(e)) {
+    const target = e.target;
+    if (!(target instanceof Element))
+        return null;
+    if (inspectorHost === target || inspectorHost.contains(target))
+        return null;
+    const root = target.getRootNode();
+    if (root instanceof ShadowRoot && root.host instanceof HTMLElement && root.host.id === "nudge-ui-root") {
+        return null;
+    }
+    const el = resolveSelectionTarget(target, mode);
+    return el ? resolveSelectionFromElement(el) : null;
+}

package/dist/inspector/selection/selectionStore.d.ts

@@ -0,0 +1,41 @@
+import type { RuntimeComponentTarget } from "../componentSemantics/types.js";
+export interface SelectedElement {
+    cid: string;
+    src: string;
+    cprops: string | null;
+    file: string;
+    line: number;
+    column: number;
+    domElement: HTMLElement;
+    fiber?: unknown;
+    componentTargets: RuntimeComponentTarget[];
+}
+/** The ordered selection presented to the inspector. */
+export interface Selection {
+    elements: readonly SelectedElement[];
+    primary: SelectedElement;
+}
+declare function subscribe(cb: () => void): () => void;
+declare function getSelectedElement(): SelectedElement | null;
+declare function getSelectedElements(): readonly SelectedElement[];
+declare function getSelection(): Selection | null;
+declare function getHierarchy(): HTMLElement[];
+declare function getHierarchyIndex(): number;
+export declare function setSelectedElement(el: SelectedElement | null): void;
+/** Replaces the selection with one or more ordered targets. */
+export declare function setSelectedElements(elements: readonly SelectedElement[]): void;
+/** Adds or removes one target while keeping the toggled target primary. */
+export declare function toggleSelectedElement(el: SelectedElement): void;
+/** Removes one rendered node from the group, preserving the remaining order. */
+export declare function removeSelectedElement(el: HTMLElement): void;
+/** Refreshes metadata for one selected DOM node without collapsing a group. */
+export declare function refreshSelectedElement(el: SelectedElement): void;
+export declare function stepUp(): void;
+export declare function stepDown(): void;
+export declare function setHierarchyIndex(i: number): void;
+export { subscribe, getSelectedElement, getSelectedElements, getSelection, getHierarchy, getHierarchyIndex, };
+export declare function useSelectedElement(): SelectedElement | null;
+export declare function useSelectedElements(): readonly SelectedElement[];
+export declare function useSelection(): Selection | null;
+export declare function useHierarchy(): HTMLElement[];
+export declare function useHierarchyIndex(): number;

package/dist/inspector/selection/selectionStore.js

@@ -0,0 +1,262 @@
+import { useSyncExternalStore } from "react";
+import { computeHierarchy } from "./hierarchy.js";
+import { resolveSelectionFromElement } from "./resolveSelection.js";
+let currentSelection = null;
+const EMPTY_SELECTION = [];
+let chain = [];
+let index = 0;
+const listeners = new Set();
+function subscribe(cb) {
+    listeners.add(cb);
+    return () => {
+        listeners.delete(cb);
+    };
+}
+function getSelectedElement() {
+    return currentSelection?.primary ?? null;
+}
+function getSelectedElements() {
+    return currentSelection?.elements ?? EMPTY_SELECTION;
+}
+function getSelection() {
+    return currentSelection;
+}
+function getHierarchy() {
+    return chain;
+}
+function getHierarchyIndex() {
+    return index;
+}
+function notify() {
+    listeners.forEach((l) => l());
+}
+function sameComponentTargets(a, b) {
+    if (a.length !== b.length)
+        return false;
+    return a.every((left, index) => {
+        const right = b[index];
+        if (!right || left.framework !== right.framework)
+            return false;
+        const leftMeta = left.meta;
+        const rightMeta = right.meta;
+        if (leftMeta.callsiteId !== rightMeta.callsiteId
+            || leftMeta.componentId !== rightMeta.componentId
+            || leftMeta.componentName !== rightMeta.componentName
+            || leftMeta.file !== rightMeta.file
+            || leftMeta.line !== rightMeta.line
+            || leftMeta.column !== rightMeta.column
+            || JSON.stringify(leftMeta.authoredProps) !== JSON.stringify(rightMeta.authoredProps)) {
+            return false;
+        }
+        // Runtime props can contain React elements and fibers with circular or
+        // intentionally unstable object identities. Only primitive values are
+        // consumed by the editable component-prop controls, so compare those and
+        // ignore opaque values that cannot affect this panel.
+        const keys = new Set([...Object.keys(left.props), ...Object.keys(right.props)]);
+        for (const key of keys) {
+            const leftValue = left.props[key];
+            const rightValue = right.props[key];
+            const leftPrimitive = typeof leftValue === "string"
+                || typeof leftValue === "number"
+                || typeof leftValue === "boolean";
+            const rightPrimitive = typeof rightValue === "string"
+                || typeof rightValue === "number"
+                || typeof rightValue === "boolean";
+            if (leftPrimitive || rightPrimitive) {
+                if (leftValue !== rightValue)
+                    return false;
+            }
+        }
+        return true;
+    });
+}
+function sameResolvedMetadata(a, b) {
+    return a.cprops === b.cprops
+        && a.file === b.file
+        && a.line === b.line
+        && a.column === b.column
+        && sameComponentTargets(a.componentTargets, b.componentTargets);
+}
+export function setSelectedElement(el) {
+    if (!el) {
+        if (!currentSelection)
+            return;
+        currentSelection = null;
+        chain = [];
+        index = 0;
+        notify();
+        return;
+    }
+    const current = currentSelection?.primary ?? null;
+    if ((currentSelection?.elements.length ?? 0) > 1) {
+        // setSelectedElement is the replacement API used by an ordinary click,
+        // Canvas selection, and single-target actions. It must collapse a group
+        // even when the clicked node is already the primary target.
+        publishSelection([el], el);
+        return;
+    }
+    if (current === el)
+        return;
+    // Re-clicks and post-edit refreshes re-resolve a fresh object with the same
+    // source-site identity. Keep the existing selection and hierarchy step so
+    // the panel pipeline does not churn (including after step-up); edits still
+    // refresh the panel via the document revision subscription.
+    if (el && current
+        && current.cid === el.cid
+        && current.src === el.src
+        && current.domElement === el.domElement) {
+        if (!sameResolvedMetadata(current, el)) {
+            currentSelection = { elements: [el], primary: el };
+            notify();
+        }
+        return;
+    }
+    currentSelection = { elements: [el], primary: el };
+    chain = computeHierarchy(el.domElement);
+    index = 0;
+    notify();
+}
+function sameSelection(left, right) {
+    if (left === right)
+        return true;
+    if (!left || !right)
+        return false;
+    if (left.primary.domElement !== right.primary.domElement)
+        return false;
+    if (left.elements.length !== right.elements.length)
+        return false;
+    return left.elements.every((element, elementIndex) => {
+        const candidate = right.elements[elementIndex];
+        return candidate
+            && candidate.domElement === element.domElement
+            && candidate.cid === element.cid
+            && candidate.src === element.src
+            && sameResolvedMetadata(candidate, element);
+    });
+}
+function publishSelection(elements, primary) {
+    const unique = [];
+    const seen = new Set();
+    for (const element of elements) {
+        if (seen.has(element.domElement))
+            continue;
+        seen.add(element.domElement);
+        unique.push(element);
+    }
+    if (unique.length === 0) {
+        setSelectedElement(null);
+        return;
+    }
+    const nextPrimary = unique.find((element) => element.domElement === primary.domElement) ?? unique.at(-1);
+    const next = { elements: unique, primary: nextPrimary };
+    if (sameSelection(currentSelection, next))
+        return;
+    currentSelection = next;
+    if (unique.length === 1) {
+        chain = computeHierarchy(nextPrimary.domElement);
+        index = 0;
+    }
+    else {
+        // Hierarchy stepping is a single-element operation. Clearing it here also
+        // prevents a stale parent chain from being rendered for a group.
+        chain = [];
+        index = 0;
+    }
+    notify();
+}
+/** Replaces the selection with one or more ordered targets. */
+export function setSelectedElements(elements) {
+    const primary = elements.at(-1);
+    if (!primary) {
+        setSelectedElement(null);
+        return;
+    }
+    publishSelection(elements, primary);
+}
+/** Adds or removes one target while keeping the toggled target primary. */
+export function toggleSelectedElement(el) {
+    const selectedElements = getSelectedElements();
+    const existingIndex = selectedElements.findIndex((selected) => selected.domElement === el.domElement);
+    if (existingIndex >= 0) {
+        const remaining = selectedElements.filter((_, index) => index !== existingIndex);
+        if (remaining.length === 0) {
+            setSelectedElement(null);
+            return;
+        }
+        const primary = remaining.at(-1);
+        publishSelection(remaining, primary);
+        return;
+    }
+    publishSelection([...selectedElements, el], el);
+}
+/** Removes one rendered node from the group, preserving the remaining order. */
+export function removeSelectedElement(el) {
+    const selectedElements = getSelectedElements();
+    const remaining = selectedElements.filter((selected) => selected.domElement !== el);
+    if (remaining.length === selectedElements.length)
+        return;
+    if (remaining.length === 0) {
+        setSelectedElement(null);
+        return;
+    }
+    const primary = currentSelection?.primary.domElement === el
+        ? remaining.at(-1)
+        : currentSelection?.primary ?? remaining.at(-1);
+    publishSelection(remaining, primary);
+}
+/** Refreshes metadata for one selected DOM node without collapsing a group. */
+export function refreshSelectedElement(el) {
+    const selectedElements = getSelectedElements();
+    const targetIndex = selectedElements.findIndex((selected) => selected.domElement === el.domElement);
+    if (targetIndex < 0) {
+        setSelectedElement(el);
+        return;
+    }
+    const refreshed = selectedElements.slice();
+    refreshed[targetIndex] = el;
+    const primary = currentSelection?.primary.domElement === el.domElement
+        ? el
+        : currentSelection?.primary ?? el;
+    publishSelection(refreshed, primary);
+}
+function applyStep(newIndex) {
+    if (newIndex < 0 || newIndex >= chain.length)
+        return;
+    if (newIndex === index)
+        return;
+    index = newIndex;
+    const node = chain[index];
+    if (node) {
+        const resolved = resolveSelectionFromElement(node);
+        if (resolved)
+            currentSelection = { elements: [resolved], primary: resolved };
+    }
+    notify();
+}
+export function stepUp() {
+    if (index < chain.length - 1)
+        applyStep(index + 1);
+}
+export function stepDown() {
+    if (index > 0)
+        applyStep(index - 1);
+}
+export function setHierarchyIndex(i) {
+    applyStep(i);
+}
+export { subscribe, getSelectedElement, getSelectedElements, getSelection, getHierarchy, getHierarchyIndex, };
+export function useSelectedElement() {
+    return useSyncExternalStore(subscribe, getSelectedElement, getSelectedElement);
+}
+export function useSelectedElements() {
+    return useSyncExternalStore(subscribe, getSelectedElements, getSelectedElements);
+}
+export function useSelection() {
+    return useSyncExternalStore(subscribe, getSelection, getSelection);
+}
+export function useHierarchy() {
+    return useSyncExternalStore(subscribe, getHierarchy, getHierarchy);
+}
+export function useHierarchyIndex() {
+    return useSyncExternalStore(subscribe, getHierarchyIndex, getHierarchyIndex);
+}

package/dist/inspector/selection/selectionTarget.d.ts

@@ -0,0 +1,5 @@
+import { type ClickModifiers } from "../overlay/clickPolicy.js";
+export type SelectionTargetMode = "primary" | "deep";
+export declare function selectionTargetMode(event: ClickModifiers): SelectionTargetMode;
+export declare function trackedElementStack(target: EventTarget | null): HTMLElement[];
+export declare function resolveSelectionTarget(target: EventTarget | null, mode?: SelectionTargetMode): HTMLElement | null;

package/dist/inspector/selection/selectionTarget.js

@@ -0,0 +1,50 @@
+import { isDeepSelectionClick } from "../overlay/clickPolicy.js";
+const INTERACTIVE_TAGS = new Set([
+    "a",
+    "area",
+    "button",
+    "input",
+    "option",
+    "select",
+    "summary",
+    "textarea",
+]);
+const INTERACTIVE_ROLES = new Set([
+    "button",
+    "checkbox",
+    "link",
+    "menuitem",
+    "option",
+    "radio",
+    "switch",
+    "tab",
+]);
+export function selectionTargetMode(event) {
+    return isDeepSelectionClick(event) ? "deep" : "primary";
+}
+export function trackedElementStack(target) {
+    if (!(target instanceof Element))
+        return [];
+    const stack = [];
+    let element = target;
+    while (element) {
+        if (element instanceof HTMLElement && element.hasAttribute("data-cid")) {
+            stack.push(element);
+        }
+        element = element.parentElement;
+    }
+    return stack;
+}
+function isPrimaryElement(element) {
+    const tag = element.localName.toLowerCase();
+    if (INTERACTIVE_TAGS.has(tag))
+        return true;
+    const role = element.getAttribute("role")?.trim().toLowerCase();
+    return role ? INTERACTIVE_ROLES.has(role) : false;
+}
+export function resolveSelectionTarget(target, mode = "primary") {
+    const stack = trackedElementStack(target);
+    if (mode === "deep")
+        return stack[0] ?? null;
+    return stack.find(isPrimaryElement) ?? stack[0] ?? null;
+}

package/dist/inspector/selection/sourceSite.d.ts

@@ -0,0 +1,2 @@
+/** Stable JSX instrumentation selector, shared by source and instance edits. */
+export declare function sourceSiteSelector(cid: string, src: string): string | null;

package/dist/inspector/selection/sourceSite.js

@@ -0,0 +1,12 @@
+import { escapeAttrValue } from "../projection/cssEscapes.js";
+/** Stable JSX instrumentation selector, shared by source and instance edits. */
+export function sourceSiteSelector(cid, src) {
+    if (!cid)
+        return null;
+    if (!src)
+        return `[data-cid="${escapeAttrValue(cid)}"]`;
+    // A source site is the complete file:line:column identity injected by the
+    // Vite transform. Keeping only file:line makes separate JSX elements on a
+    // single formatted line share a managed rule.
+    return `[data-cid="${escapeAttrValue(cid)}"][data-src="${escapeAttrValue(src)}"]`;
+}