nudge-ui 0.2.0 → 0.2.2

package/dist/inspector/inline-text/inlineTextEditor.js

@@ -2,9 +2,11 @@ import { useSyncExternalStore } from "react";
 import { appendChange } from "../changes/changesLog.js";
 import { registerInlineTextClearHandler } from "./inlineTextLifecycle.js";
 import { isNudgeUiDev } from "../runtime/devFlag.js";
-import { createComponentPropChange, } from "../componentSemantics/changeModel.js";
+import { initialTextEditDecision, chooseTextEditBinding, getTextEditScopeChoices, getTextEditBinding, prepareTextEditChange, } from "./textEditChange.js";
 import { resolveTextBinding, } from "../componentSemantics/textBinding.js";
-import { captureTextProjectionTarget, EMPTY_TEXT_PROJECTION_ATTR, EMPTY_TEXT_PROJECTION_PATH_ATTR, getTextContentChangeById, resolveTextProjectionTarget, resolveTextProjectionTextNode, textProjectionSelector, } from "../projection/textProjection.js";
+import { captureTextProjectionTarget, EMPTY_TEXT_PROJECTION_ATTR, EMPTY_TEXT_PROJECTION_PATH_ATTR, getTextContentChangeById, resolveTextProjectionTarget, resolveTextProjectionTextNode, } from "../projection/textProjection.js";
+import { clearInlineTextDiagnostics, recordInlineTextDiagnostic, } from "./inlineTextDiagnostics.js";
+export { clearInlineTextDiagnostics, getInlineTextDiagnostic, getInlineTextDiagnostics, subscribeInlineTextDiagnostics, useInlineTextDiagnostic, } from "./inlineTextDiagnostics.js";
 const listeners = new Set();
 let activeSession = null;
 let activeSessionDocument = null;
@@ -14,8 +16,6 @@ let pendingEditIntent = null;
 let handoffPointerArmed = false;
 let pendingReplayScheduled = false;
 let sessionRevision = 0;
-let inlineTextDiagnostics = [];
-const diagnosticListeners = new Set();
 function discardPendingInlineTextEdit(ownerDocument) {
     if (!ownerDocument || pendingEditIntent?.ownerDocument === ownerDocument) {
         pendingEditIntent = null;
@@ -31,23 +31,8 @@ function notify() {
     sessionRevision += 1;
     listeners.forEach((listener) => listener());
 }
-function notifyDiagnostics() {
-    for (const listener of diagnosticListeners)
-        listener();
-}
-function recordDiagnostic(diagnostic) {
-    inlineTextDiagnostics = [...inlineTextDiagnostics.slice(-31), diagnostic];
-    notifyDiagnostics();
-}
-export function getInlineTextDiagnostics() {
-    return inlineTextDiagnostics;
-}
-export function getInlineTextDiagnostic() {
-    return inlineTextDiagnostics[inlineTextDiagnostics.length - 1] ?? null;
-}
-export function subscribeInlineTextDiagnostics(listener) {
-    diagnosticListeners.add(listener);
-    return () => diagnosticListeners.delete(listener);
+function recordDiagnostic(diagnostic, target) {
+    recordInlineTextDiagnostic(diagnostic, target?.ownerDocument, target);
 }
 export function getInlineTextSession() {
     return activeSession;
@@ -61,18 +46,27 @@ export function isInlineTextEditingActive() {
 }
 export function cancelInlineTextEdit() {
     discardPendingInlineTextEdit();
-    activeSession?.cancel("cancel");
+    if (activeSession)
+        activeSession.cancel("cancel");
+    else
+        clearInlineTextDiagnostics();
 }
 /** End a session owned by a document/frame that is about to be disposed. */
 export function disposeInlineTextEdit(reason = "frame-disposed", ownerDocument) {
     if (!ownerDocument) {
         discardPendingInlineTextEdit();
-        activeSession?.cancel(reason);
+        if (activeSession)
+            activeSession.cancel(reason);
+        else
+            clearInlineTextDiagnostics();
         return;
     }
     discardPendingInlineTextEdit(ownerDocument);
-    if (activeSessionDocument === ownerDocument)
+    if (activeSessionDocument === ownerDocument) {
         activeSession?.cancel(reason);
+        return;
+    }
+    clearInlineTextDiagnostics(ownerDocument);
 }
 function ownerHTMLElement(element) {
     const OwnerHTMLElement = element.ownerDocument.defaultView?.HTMLElement;
@@ -83,9 +77,12 @@ function ownerHTMLElement(element) {
         : null;
 }
 function currentIntentTarget(intent) {
+    const pointed = intent.ownerDocument.elementFromPoint?.(intent.point.x, intent.point.y) ?? null;
+    if (pointed?.closest(`[${EMPTY_TEXT_PROJECTION_ATTR}]`))
+        return pointed;
     if (intent.target.isConnected)
         return intent.target;
-    return intent.ownerDocument.elementFromPoint?.(intent.point.x, intent.point.y) ?? null;
+    return pointed;
 }
 function resolveInlineTextEditIntent(intent) {
     const eventTarget = currentIntentTarget(intent);
@@ -107,6 +104,12 @@ function resolveInlineTextEditIntent(intent) {
     }
     return null;
 }
+function isApplicationOwnedEditingSurface(target) {
+    const host = target.closest("[contenteditable]");
+    return Boolean(host
+        && host.getAttribute("data-inline-editor") !== "true"
+        && host.getAttribute("contenteditable") !== "false");
+}
 function beginInlineTextEditIntent(intent) {
     const resolved = resolveInlineTextEditIntent(intent);
     if (!resolved)
@@ -144,6 +147,12 @@ function requestInlineTextEdit(target, point) {
             return "stop-propagation";
         }
     }
+    // Application-owned contenteditable surfaces must retain native editing
+    // semantics. They are intentionally rejected by text binding, but that
+    // rejection must not become an inspector-level suppression when another
+    // inline edit is already active.
+    if (isApplicationOwnedEditingSurface(target))
+        return "pass-through";
     const intent = {
         ownerDocument: target.ownerDocument,
         target,
@@ -153,7 +162,7 @@ function requestInlineTextEdit(target, point) {
         return activeSession ? "suppress" : "pass-through";
     if (!activeSession) {
         const result = beginInlineTextEditIntent(intent);
-        return result && !("kind" in result) ? "suppress" : "pass-through";
+        return result ? "suppress" : "pass-through";
     }
     pendingEditIntent = intent;
     activeSession.commit("blur");
@@ -182,6 +191,15 @@ export function handleInlineTextEditIntent(intent) {
 function isTextEditRejection(value) {
     return "kind" in value && value.kind === "rejected";
 }
+function recordTextEditRejection(target, rejection) {
+    recordDiagnostic({
+        kind: "inline-text",
+        status: "rejected",
+        reason: rejection.reason,
+        before: target.textContent ?? "",
+    }, target);
+    return rejection;
+}
 function captureSelection(doc) {
     const selection = doc.getSelection?.();
     if (!selection)
@@ -316,59 +334,6 @@ function flattenHostText(host) {
     host.replaceChildren(host.ownerDocument.createTextNode(text));
     return text;
 }
-function sourceForChoice(candidate, choice) {
-    if (choice?.renderedSource)
-        return choice.renderedSource;
-    if (candidate.renderedSource
-        && (!choice || candidate.renderedSource.evidence?.callsiteId === choice.binding.target.callsiteId
-            && candidate.renderedSource.evidence.property === choice.binding.property)) {
-        return candidate.renderedSource;
-    }
-    const parsed = /^(.*):(\d+):(\d+)$/.exec(candidate.element.getAttribute("data-src") ?? "");
-    const target = choice?.binding.target;
-    const authoredAs = choice?.authoredAs === "literal"
-        ? "literal"
-        : choice?.authoredAs === "expression" || choice?.authoredAs === "spread"
-            ? "expression"
-            : "unknown";
-    return {
-        file: target?.file ?? parsed?.[1] ?? candidate.element.getAttribute("data-src") ?? "",
-        line: target?.line ?? Number(parsed?.[2] ?? 0),
-        column: target?.column ?? Number(parsed?.[3] ?? 0),
-        component: target?.componentName ?? candidate.element.getAttribute("data-cid") ?? "Rendered text",
-        selector: candidate.binding.kind === "rendered-text"
-            ? textProjectionSelector(candidate.binding.target) ?? ""
-            : "",
-        authoredAs,
-        evidence: choice ? {
-            callsiteId: choice.binding.target.callsiteId,
-            componentName: choice.binding.target.componentName,
-            property: choice.binding.property,
-            mountedCount: choice.mountedCount,
-        } : undefined,
-    };
-}
-function componentEvidence(candidate, choice) {
-    const target = choice.renderedTarget
-        ?? candidate.renderedTarget
-        ?? captureTextProjectionTarget(candidate.element, candidate.before, candidate.textNode);
-    return {
-        occurrence: target?.occurrence ?? 0,
-        props: target?.props ?? candidate.element.getAttribute("data-cprops"),
-        ariaLabel: target?.ariaLabel ?? candidate.element.getAttribute("aria-label"),
-        beforeText: candidate.before,
-        mountedCount: choice.mountedCount,
-    };
-}
-function textTargetFor(candidate, binding, choice) {
-    if (choice?.renderedTarget)
-        return choice.renderedTarget;
-    if (candidate.renderedTarget)
-        return candidate.renderedTarget;
-    if (binding.kind === "rendered-text")
-        return binding.target;
-    return captureTextProjectionTarget(candidate.element, candidate.before, candidate.textNode);
-}
 function resolveEmptyProjectionCandidate(marker) {
     if (!marker.isConnected) {
         return {
@@ -439,7 +404,8 @@ function resolveEmptyProjectionCandidate(marker) {
 function makeSession(candidate) {
     const doc = candidate.element.ownerDocument;
     const originalSelection = captureSelection(doc);
-    const previousActiveElement = doc.activeElement instanceof HTMLElement
+    const OwnerHTMLElement = doc.defaultView?.HTMLElement;
+    const previousActiveElement = OwnerHTMLElement && doc.activeElement instanceof OwnerHTMLElement
         ? doc.activeElement
         : null;
     const originalParent = candidate.textNode.parentNode;
@@ -481,100 +447,7 @@ function makeSession(candidate) {
     const originalReplaceState = history?.replaceState;
     let patchedPushState = null;
     let patchedReplaceState = null;
-    let selectedChoice = candidate.bindingChoices?.length === 1
-        ? candidate.bindingChoices[0]
-        : null;
-    let selectedScope = candidate.scope
-        ?? (candidate.binding.kind === "rendered-text" ? "rendered-instance" : "source-site");
-    function currentBinding() {
-        if (!selectedChoice)
-            return candidate.binding;
-        if (selectedChoice.mountedCount > 1 && selectedChoice.authoredAs !== "literal") {
-            const target = selectedChoice.renderedTarget
-                ?? candidate.renderedTarget
-                ?? capturedTarget;
-            return target ? { kind: "rendered-text", target } : selectedChoice.binding;
-        }
-        return selectedChoice.binding;
-    }
-    function currentScopeChoices() {
-        if (selectedChoice) {
-            if (selectedChoice.mountedCount > 1 && selectedChoice.authoredAs === "literal") {
-                return ["rendered-instance", "source-site"];
-            }
-            return [];
-        }
-        return candidate.scopeChoices ?? [];
-    }
-    function choiceForCommit() {
-        const choice = selectedChoice ?? candidate.bindingChoices?.[0];
-        const target = candidate.editableTarget;
-        if (choice || !target || candidate.mountedCount === undefined)
-            return choice ?? null;
-        const property = candidate.binding.kind === "component-prop"
-            ? candidate.binding.property
-            : "children";
-        return {
-            binding: candidate.binding.kind === "component-prop"
-                ? candidate.binding
-                : {
-                    kind: "component-prop",
-                    property,
-                    target: {
-                        framework: target.framework,
-                        componentId: target.contract.componentId,
-                        callsiteId: target.meta.callsiteId,
-                        componentName: target.meta.componentName,
-                        file: target.meta.file,
-                        line: target.meta.line,
-                        column: target.meta.column,
-                    },
-                },
-            editableTarget: target,
-            mountedCount: candidate.mountedCount,
-            authoredAs: target.meta.authoredProps[property] ?? "default",
-            renderedTarget: candidate.renderedTarget ?? null,
-            renderedSource: candidate.renderedSource,
-        };
-    }
-    function prepareChange(after, binding, choice) {
-        if (binding.kind === "component-prop" && selectedScope === "source-site") {
-            const editableTarget = choice?.editableTarget ?? candidate.editableTarget;
-            const prop = editableTarget?.contract.props.find((item) => item.name === binding.property && item.control === "text");
-            if (!editableTarget || !prop)
-                return null;
-            return createComponentPropChange(editableTarget, prop, after, {
-                scope: "source-site",
-                evidence: choice && choice.mountedCount > 1
-                    ? componentEvidence(candidate, choice)
-                    : undefined,
-            });
-        }
-        const textTarget = textTargetFor(candidate, binding, choice);
-        const source = sourceForChoice(candidate, choice);
-        const renderedSource = source.selector || !textTarget
-            ? source
-            : { ...source, selector: textProjectionSelector(textTarget) ?? "" };
-        if (!textTarget || !renderedSource.selector)
-            return null;
-        return {
-            kind: "text-content",
-            id: `text-${globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(36).slice(2)}`}`,
-            target: textTarget,
-            source: {
-                file: renderedSource.file,
-                line: renderedSource.line,
-                column: renderedSource.column,
-                component: renderedSource.component,
-            },
-            selector: renderedSource.selector,
-            before: candidate.before,
-            after,
-            authoredAs: renderedSource.authoredAs,
-            scope: selectedScope,
-            evidence: renderedSource.evidence,
-        };
-    }
+    let editDecision = initialTextEditDecision(candidate);
     function restoreHostText(text) {
         host.replaceChildren(doc.createTextNode(text));
         lastSafeText = text;
@@ -602,11 +475,12 @@ function makeSession(candidate) {
             reason,
             before: candidate.before,
             after: host.textContent ?? "",
-        });
+        }, candidate.element);
     }
     function editorOwnsFocus() {
         const active = doc.activeElement;
-        return active === host || (active instanceof Node && host.contains(active));
+        const OwnerNode = doc.defaultView?.Node;
+        return active === host || Boolean(OwnerNode && active instanceof OwnerNode && host.contains(active));
     }
     function cancelForReconciliation(discardedDraft) {
         if (finished)
@@ -685,7 +559,7 @@ function makeSession(candidate) {
         if (candidate.emptyProjectionMarker?.isConnected) {
             candidate.emptyProjectionMarker.hidden = false;
         }
-        recordDiagnostic({ kind: "inline-text", status, reason, before: candidate.before, after });
+        recordDiagnostic({ kind: "inline-text", status, reason, before: candidate.before, after }, candidate.element);
         schedulePendingInlineTextEdit();
     }
     function onKeyDown(event) {
@@ -899,7 +773,8 @@ function makeSession(candidate) {
         if (finished)
             return;
         const target = event.target;
-        if (!(target instanceof Node))
+        const OwnerNode = doc.defaultView?.Node;
+        if (!OwnerNode || !(target instanceof OwnerNode))
             return;
         if (host.contains(target)) {
             // All down/up events must reach the native editing host so caret and
@@ -983,40 +858,35 @@ function makeSession(candidate) {
     }
     session = {
         get binding() {
-            return currentBinding();
+            return getTextEditBinding(candidate, editDecision, capturedTarget);
         },
         get bindingChoices() {
             return candidate.bindingChoices ?? [];
         },
         get selectedBindingIndex() {
-            if (!selectedChoice)
-                return null;
-            return candidate.bindingChoices?.indexOf(selectedChoice) ?? null;
+            return editDecision.bindingIndex;
         },
         get scope() {
-            return selectedScope;
+            return editDecision.scope;
         },
         get scopeChoices() {
-            return currentScopeChoices();
+            return getTextEditScopeChoices(candidate, editDecision);
         },
         host,
         before: candidate.before,
         chooseBinding(index) {
             if (finished)
                 return;
-            const choice = candidate.bindingChoices?.[index];
-            if (!choice)
+            const decision = chooseTextEditBinding(candidate, index);
+            if (!decision)
                 return;
-            selectedChoice = choice;
-            selectedScope = choice.mountedCount > 1 && choice.authoredAs === "literal"
-                ? "rendered-instance"
-                : choice.mountedCount > 1 ? "rendered-instance" : "source-site";
+            editDecision = decision;
             notify();
         },
         chooseScope(scope) {
-            if (finished || !currentScopeChoices().includes(scope))
+            if (finished || !getTextEditScopeChoices(candidate, editDecision).includes(scope))
                 return;
-            selectedScope = scope;
+            editDecision = { ...editDecision, scope };
             notify();
         },
         commit(reason = "commit") {
@@ -1026,7 +896,7 @@ function makeSession(candidate) {
                 blurPending = true;
                 return null;
             }
-            if ((candidate.bindingChoices?.length ?? 0) > 1 && !selectedChoice)
+            if ((candidate.bindingChoices?.length ?? 0) > 1 && editDecision.bindingIndex === null)
                 return null;
             if (!hostIsOwned(candidate, host, ownership)) {
                 endLifecycle(!candidate.element.isConnected ? "app-reconciled" : "host-removed");
@@ -1038,10 +908,8 @@ function makeSession(candidate) {
                 restoreHostText(lastSafeText);
                 return null;
             }
-            const binding = currentBinding();
-            const choice = choiceForCommit();
             const unchanged = after === candidate.before;
-            const change = unchanged ? null : prepareChange(after, binding, choice);
+            const change = unchanged ? null : prepareTextEditChange(candidate, editDecision, capturedTarget, after);
             if (!unchanged && !change) {
                 endLifecycle("app-reconciled", after);
                 return null;
@@ -1053,7 +921,7 @@ function makeSession(candidate) {
                 cancelForReconciliation();
                 return null;
             }
-            if (change?.kind === "text-content" && selectedScope === "rendered-instance") {
+            if (change?.kind === "text-content" && editDecision.scope === "rendered-instance") {
                 // The second text value is alternate evidence for re-entry after a
                 // previous projection. Validation happens after unwrapping because a
                 // mounted draft can make another identical root look unique.
@@ -1131,7 +999,7 @@ function makeSession(candidate) {
     activeSessionDocument = doc;
     unregisterClearHandler = registerInlineTextClearHandler(cancelInlineTextEdit);
     notify();
-    recordDiagnostic({ kind: "inline-text", status: "started", reason: "start", before: candidate.before });
+    recordDiagnostic({ kind: "inline-text", status: "started", reason: "start", before: candidate.before }, candidate.element);
     host.focus();
     selectAll(host);
     return session;
@@ -1146,15 +1014,15 @@ export const inlineTextEditor = {
             };
         }
         if (activeSession) {
-            return {
+            return recordTextEditRejection(element, {
                 kind: "rejected",
                 reason: "editing-active",
                 message: "Finish the current inline text edit first.",
-            };
+            });
         }
         const candidate = resolveTextBinding(element, point);
         if (isTextEditRejection(candidate))
-            return candidate;
+            return recordTextEditRejection(element, candidate);
         return makeSession(candidate);
     },
 };
@@ -1169,15 +1037,15 @@ export function beginInlineTextEditFromEmptyProjection(marker) {
         };
     }
     if (activeSession) {
-        return {
+        return recordTextEditRejection(marker, {
             kind: "rejected",
             reason: "editing-active",
             message: "Finish the current inline text edit first.",
-        };
+        });
     }
     const candidate = resolveEmptyProjectionCandidate(marker);
     if (isTextEditRejection(candidate))
-        return candidate;
+        return recordTextEditRejection(marker, candidate);
     // Hide the affordance while its retained empty Text node is wrapped by the
     // native editor. The marker is restored on cancel and removed by projection
     // reconciliation on a successful non-empty commit.
@@ -1187,11 +1055,11 @@ export function beginInlineTextEditFromEmptyProjection(marker) {
     }
     catch {
         marker.hidden = false;
-        return {
+        return recordTextEditRejection(marker, {
             kind: "rejected",
             reason: "no-binding",
             message: "The empty rendered text could not be reopened safely.",
-        };
+        });
     }
 }
 export function beginInlineTextEdit(element, point) {

package/dist/inspector/inline-text/inlineTextFeedback.d.ts

@@ -0,0 +1,5 @@
+import type { InlineTextDiagnostic } from "./inlineTextEditor.js";
+export interface InlineTextFeedback {
+    readonly message: string;
+}
+export declare function getInlineTextFeedback(diagnostic: InlineTextDiagnostic | null): InlineTextFeedback | null;

package/dist/inspector/inline-text/inlineTextFeedback.js

@@ -0,0 +1,27 @@
+const FEEDBACK_BY_REASON = {
+    "no-text": {
+        message: "Cannot edit text - No visible text",
+    },
+    "no-binding": {
+        message: "Cannot edit text - No safe source binding",
+    },
+    "ambiguous-binding": {
+        message: "Cannot edit text - Ambiguous source binding",
+    },
+    "editing-active": {
+        message: "Cannot edit text - Another edit is active",
+    },
+    "unsafe-target": {
+        message: "Cannot edit text - Unsupported text markup",
+    },
+};
+function isTextEditRejectionReason(reason) {
+    return reason in FEEDBACK_BY_REASON;
+}
+export function getInlineTextFeedback(diagnostic) {
+    if (!diagnostic || diagnostic.status !== "rejected")
+        return null;
+    if (!isTextEditRejectionReason(diagnostic.reason))
+        return null;
+    return FEEDBACK_BY_REASON[diagnostic.reason];
+}

package/dist/inspector/inline-text/inlineTextLifecycle.js

@@ -4,6 +4,7 @@
  * changesLog can then cancel it without importing the editor back through a
  * circular module edge.
  */
+import { clearInlineTextDiagnostics } from "./inlineTextDiagnostics.js";
 let clearHandler = null;
 export function registerInlineTextClearHandler(handler) {
     clearHandler = handler;
@@ -14,4 +15,5 @@ export function registerInlineTextClearHandler(handler) {
 }
 export function cancelInlineTextForClear() {
     clearHandler?.();
+    clearInlineTextDiagnostics();
 }

package/dist/inspector/inline-text/textEditChange.d.ts

@@ -0,0 +1,14 @@
+import type { TextBindingCandidate, TextEditBinding } from "../componentSemantics/textBinding.js";
+import type { ChangeRecord } from "../changes/types.js";
+import type { TextProjectionScope, TextProjectionTarget } from "./textChangeBoundary.js";
+/** Binding and scope decisions, independent of native editor lifecycle state. */
+export interface TextEditDecision {
+    bindingIndex: number | null;
+    scope: TextProjectionScope;
+}
+export declare function initialTextEditDecision(candidate: TextBindingCandidate): TextEditDecision;
+export declare function chooseTextEditBinding(candidate: TextBindingCandidate, index: number): TextEditDecision | null;
+export declare function getTextEditScopeChoices(candidate: TextBindingCandidate, decision: TextEditDecision): readonly TextProjectionScope[];
+export declare function getTextEditBinding(candidate: TextBindingCandidate, decision: TextEditDecision, capturedTarget: TextProjectionTarget | null): TextEditBinding;
+/** Builds a canonical record without changing the DOM, appending history, or ending a draft. */
+export declare function prepareTextEditChange(candidate: TextBindingCandidate, decision: TextEditDecision, capturedTarget: TextProjectionTarget | null, after: string): ChangeRecord | null;