nudge-ui 0.2.0 → 0.2.2

package/dist/inspector/index.js

@@ -1,11 +1,12 @@
 import { createElement } from "react";
 import { createRoot } from "react-dom/client";
-import { InspectorShell, toggleInspector, setInspectorOpen, setInspectorHost } from "./shell/InspectorShell.js";
+import { InspectorShell, toggleInspector, setInspectorOpen } from "./shell/InspectorShell.js";
 import { setSelectedElement } from "./selection/selectionStore.js";
 import { removeManagedSheet } from "./projection/managedStylesheet.js";
-import { isInspectorToggleShortcut } from "./shell/shortcuts.js";
-import { clearInspectorLayout } from "./shell/panelLayout.js";
+import { isInspectorToggleShortcut, isOriginalPreviewShortcut, SEND_PROMPT_HOTKEY_EVENT, } from "./shell/shortcuts.js";
 import { isCanvasRenderer } from "./canvas/roleDetection.js";
+import { isKeyboardShortcutMessage } from "./canvas/frameProtocol.js";
+import { subscribeCanvasRendererMessages } from "./canvas/rendererMessageRouter.js";
 import { bootstrapRenderer } from "./canvas/rendererBootstrap.js";
 import { hydrateSession, enableAutoSave, scheduleAutoSave, scheduleCanvasSave, setRestoreCount, } from "./canvas/sessionStore.js";
 import { subscribeChanges, getChangesList } from "./changes/changesLog.js";
@@ -15,14 +16,18 @@ import { cancelStaleDetection, startStaleDetection } from "./canvas/staleChangeD
 import { LockedWorkspaceNotice } from "./canvas/LockedWorkspaceNotice.js";
 import { AppShell } from "./shell/AppShell.js";
 import { installInspectionBridge } from "./inspection/bridge.js";
-import { disposeBrowserCssInspection } from "./inspection/browserCssInspectionRegistry.js";
-import { releaseDocumentProjection } from "./projection/structuralProjection.js";
+import { releaseDocumentProjection, subscribeStructuralChanges } from "./projection/structuralProjection.js";
 import { cancelInlineTextEdit } from "./inline-text/inlineTextEditor.js";
 import { configureNudgeUiRuntime, getNudgeUiRuntimeConfig, isDemoRuntime } from "./runtime/runtimeConfig.js";
 import { setCanvasMode } from "./canvas/canvasStore.js";
 import { isNudgeUiDev, setNudgeUiHostDevFlag } from "./runtime/devFlag.js";
-import { clearClipboardHandoff, startClipboardHandoffController, subscribeClipboardHandoff, } from "./prompt/clipboardHandoff.js";
+import { clearClipboardHandoff, subscribeClipboardHandoff, } from "./prompt/clipboardHandoff.js";
 import { createWorkspace, InspectorSessionProvider, } from "./session/index.js";
+import { clearSketchClipboardHandoff } from "./sketch/handoff.js";
+import { cancelSketchInteraction, isSketchInteractionActive } from "./sketch/interaction.js";
+import { setOriginalPreviewActive } from "./shell/originalPreview.js";
+import { initializeSketchStore } from "./sketch/store.js";
+export { resolveNudgeUiClientEntry } from "../transport/editor.js";
 let hostElement = null;
 let reactRoot = null;
 let lockedRoot = null;
@@ -33,11 +38,47 @@ let beforeUnloadAttached = false;
 let persistenceSubscribed = false;
 let unsubscribeOwnership = null;
 let removeInspectionBridge = null;
-let stopClipboardHandoffController = null;
+let keyboardPeekHeld = false;
 function onKeydown(e) {
+    if (isSketchInteractionActive())
+        return;
     if (isInspectorToggleShortcut(e)) {
         toggleInspector();
         e.preventDefault();
+        return;
+    }
+    if (isOriginalPreviewShortcut(e)) {
+        keyboardPeekHeld = true;
+        setOriginalPreviewActive(true);
+        e.preventDefault();
+    }
+}
+function onKeyup(e) {
+    // Release only a keyboard-started peek so a button-held preview survives
+    // unrelated Backslash keyups (e.g. the panel-toggle shortcuts pressed
+    // mid-hold). A guarded keydown never sets the flag, so this stays a no-op
+    // for keyups without a matching hold.
+    if (e.code === "Backslash" && keyboardPeekHeld) {
+        keyboardPeekHeld = false;
+        setOriginalPreviewActive(false);
+    }
+}
+function onRendererKeyboardShortcut(message, identity) {
+    if (!isKeyboardShortcutMessage(message, identity))
+        return;
+    if (message.code === "KeyS" && message.phase === "keydown") {
+        window.dispatchEvent(new Event(SEND_PROMPT_HOTKEY_EVENT));
+        return;
+    }
+    if (message.code !== "Backslash")
+        return;
+    if (message.phase === "keydown") {
+        keyboardPeekHeld = true;
+        setOriginalPreviewActive(true);
+    }
+    else if (keyboardPeekHeld) {
+        keyboardPeekHeld = false;
+        setOriginalPreviewActive(false);
     }
 }
 function disposeInspectorSession() {
@@ -57,11 +98,15 @@ export function bootstrapNudgeUi(inspectorHost) {
         // for its own document. The bundle mode name alone must never flip it,
         // so every build without both opt-ins stays governed by ADR-0002.
         setNudgeUiHostDevFlag(true);
-        // Public demo builds intentionally expose only the static inspector. The
-        // Canvas workspace, write lease, persistence, and agent bridge stay out
-        // of the embedded frame.
-        setCanvasMode("inspect");
+        if (runtimeConfig.capabilities.canvas && isCanvasRenderer()) {
+            rendererBootstrapHandle = bootstrapRenderer() ?? null;
+            return;
+        }
+        // The public demo shares the iframe editor while keeping the write lease,
+        // persistence, and agent bridge disabled.
+        setCanvasMode("canvas");
         mountInspector(inspectorHost);
+        setInspectorOpen(false);
         return;
     }
     if (!runtimeConfig.capabilities.canvas) {
@@ -94,6 +139,7 @@ function startController(inspectorHost) {
         lockedRoot.unmount();
         lockedRoot = null;
     }
+    void initializeSketchStore(getNudgeUiRuntimeConfig().projectId).catch(() => undefined);
     unsubscribeOwnership?.();
     unsubscribeOwnership = subscribeOwnership((hasLease) => {
         if (!hasLease)
@@ -107,9 +153,12 @@ function startController(inspectorHost) {
             startStaleDetection(restored);
         }
     }
+    if (getNudgeUiRuntimeConfig().capabilities.canvas) {
+        // Normal controllers always host the iframe workspace. Hydration runs
+        // first so this mode change cannot discard cards, camera, or edits.
+        setCanvasMode("canvas");
+    }
     mountInspector(inspectorHost);
-    stopClipboardHandoffController?.();
-    stopClipboardHandoffController = startClipboardHandoffController(document);
     enableAutoSave();
     if (!beforeUnloadAttached) {
         // enableAutoSave registers its flush listener first. Release the lease only
@@ -120,14 +169,13 @@ function startController(inspectorHost) {
     }
     if (!persistenceSubscribed) {
         subscribeChanges(() => scheduleAutoSave());
+        subscribeStructuralChanges(() => scheduleAutoSave());
         subscribeClipboardHandoff(() => scheduleAutoSave());
         subscribeCanvas(() => scheduleCanvasSave());
         persistenceSubscribed = true;
     }
 }
 function mountLockedNotice(host) {
-    stopClipboardHandoffController?.();
-    stopClipboardHandoffController = null;
     if (reactRoot) {
         reactRoot.unmount();
         reactRoot = null;
@@ -139,8 +187,9 @@ function mountLockedNotice(host) {
         cancelStaleDetection();
         setInspectorOpen(false);
         cancelInlineTextEdit();
+        cancelSketchInteraction();
+        clearSketchClipboardHandoff();
         setSelectedElement(null);
-        clearInspectorLayout();
         removeManagedSheet();
         releaseDocumentProjection(document);
         hostElement = null;
@@ -159,14 +208,12 @@ export function mountInspector(host) {
     const demo = isDemoRuntime();
     if (!demo && !hasWriteLease())
         return;
-    if (host.dataset.nudgeUiDebug === "true") {
-        const runtimeConfig = getNudgeUiRuntimeConfig();
-        if (runtimeConfig.capabilities.domNavigation !== true) {
-            configureNudgeUiRuntime({
-                ...runtimeConfig,
-                capabilities: { ...runtimeConfig.capabilities, domNavigation: true },
-            });
-        }
+    const runtimeConfig = getNudgeUiRuntimeConfig();
+    if (runtimeConfig.capabilities.domNavigation !== true) {
+        configureNudgeUiRuntime({
+            ...runtimeConfig,
+            capabilities: { ...runtimeConfig.capabilities, domNavigation: true },
+        });
     }
     if (lockedRoot) {
         lockedRoot.unmount();
@@ -178,21 +225,20 @@ export function mountInspector(host) {
     if (!reactRoot) {
         reactRoot = createRoot(shadow);
         inspectorSession = workspace.createInspectorSession(host);
-        const documentSession = inspectorSession.createDocumentSession(document);
-        documentSession.registerCleanup(() => disposeBrowserCssInspection(document));
-        documentSession.registerCleanup(() => releaseDocumentProjection(document));
         inspectorSession.registerCleanup(() => window.removeEventListener("keydown", onKeydown));
-        setInspectorHost(host);
-        reactRoot.render(createElement(InspectorSessionProvider, { inspector: inspectorSession, documentSession }, createElement(demo ? InspectorShell : AppShell)));
+        inspectorSession.registerCleanup(() => window.removeEventListener("keyup", onKeyup));
+        inspectorSession.registerCleanup(subscribeCanvasRendererMessages(({ identity, message }) => {
+            onRendererKeyboardShortcut(message, identity);
+        }));
+        reactRoot.render(createElement(InspectorSessionProvider, { inspector: inspectorSession, documentSession: null }, createElement(AppShell)));
         window.addEventListener("keydown", onKeydown);
+        window.addEventListener("keyup", onKeyup);
     }
     setInspectorOpen(true);
 }
 export function unmountInspector() {
     rendererBootstrapHandle?.teardown();
     rendererBootstrapHandle = null;
-    stopClipboardHandoffController?.();
-    stopClipboardHandoffController = null;
     unsubscribeOwnership?.();
     unsubscribeOwnership = null;
     if (lockedRoot) {
@@ -201,6 +247,7 @@ export function unmountInspector() {
     }
     cancelStaleDetection();
     cancelInlineTextEdit();
+    cancelSketchInteraction();
     setSelectedElement(null);
     if (reactRoot) {
         reactRoot.unmount();
@@ -215,8 +262,8 @@ export function unmountInspector() {
         // a session (gestures, workspace projection) cannot leak across unmount.
         releaseDocumentProjection(document);
         clearClipboardHandoff();
+        clearSketchClipboardHandoff();
         removeManagedSheet();
-        clearInspectorLayout();
         removeInspectionBridge?.();
         removeInspectionBridge = null;
         hostElement = null;
@@ -227,6 +274,7 @@ export { InspectorShell } from "./shell/InspectorShell.js";
 export { detectFramework } from "./prompt/detectFramework.js";
 export { installStaticHtmlRuntimeIdentity, isRuntimeGeneratedSource, RUNTIME_ELEMENT_CID_PREFIX, RUNTIME_UNKNOWN_SOURCE_PREFIX, } from "./runtime/staticHtmlRuntimeIdentity.js";
 export { isCanvasRenderer } from "./canvas/roleDetection.js";
+export { createNudgeUiEditorUrl, hasNudgeUiDirectTabIntent, isNudgeUiDirectUrl, readNudgeUiEditorTarget, rememberNudgeUiDirectTabIntent, } from "../transport/editor.js";
 export { NUDGE_UI_INSPECTION_VERSION, inspectElement, installInspectionBridge } from "./inspection/bridge.js";
 export { beginInlineTextEdit, cancelInlineTextEdit, disposeInlineTextEdit, getInlineTextDiagnostic, getInlineTextDiagnostics, getInlineTextSession, inlineTextEditor, isInlineTextEditingActive, subscribeInlineTextDiagnostics, resolveTextBinding, useInlineTextSession, } from "./inline-text/inlineTextEditor.js";
 export { projectInspectorValues, projectionSides } from "./spacing/projection.js";

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

@@ -0,0 +1,10 @@
+import type { InlineTextDiagnostic } from "./inlineTextEditor.js";
+export declare function recordInlineTextDiagnostic(diagnostic: InlineTextDiagnostic, ownerDocument?: Document, target?: Element): void;
+export declare function getInlineTextDiagnostics(): readonly InlineTextDiagnostic[];
+export declare function getInlineTextDiagnostic(): InlineTextDiagnostic | null;
+export declare function subscribeInlineTextDiagnostics(listener: () => void): () => void;
+export declare function useInlineTextDiagnostic(): InlineTextDiagnostic | null;
+/** Clear the current diagnostic, optionally only when it belongs to a frame. */
+export declare function clearInlineTextDiagnostics(ownerDocument?: Document): void;
+/** Keep feedback for the target that was just selected, but clear stale feedback. */
+export declare function clearInlineTextDiagnosticsForSelection(selectedElements: readonly HTMLElement[]): void;

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

@@ -0,0 +1,65 @@
+import { useSyncExternalStore } from "react";
+const listeners = new Set();
+let diagnostics = [];
+let revision = 0;
+function notify() {
+    revision += 1;
+    for (const listener of listeners)
+        listener();
+}
+function sameDiagnostic(left, right) {
+    return left.kind === right.kind
+        && left.status === right.status
+        && left.reason === right.reason
+        && left.before === right.before
+        && left.after === right.after;
+}
+export function recordInlineTextDiagnostic(diagnostic, ownerDocument, target) {
+    const resolvedDocument = ownerDocument ?? target?.ownerDocument;
+    const previous = diagnostics.at(-1);
+    if (previous
+        && previous.ownerDocument === resolvedDocument
+        && previous.target === target
+        && sameDiagnostic(previous.diagnostic, diagnostic)) {
+        return;
+    }
+    diagnostics = [
+        ...diagnostics.slice(-31),
+        { diagnostic, ownerDocument: resolvedDocument, target },
+    ];
+    notify();
+}
+export function getInlineTextDiagnostics() {
+    return diagnostics.map(({ diagnostic }) => diagnostic);
+}
+export function getInlineTextDiagnostic() {
+    return diagnostics.at(-1)?.diagnostic ?? null;
+}
+export function subscribeInlineTextDiagnostics(listener) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+}
+export function useInlineTextDiagnostic() {
+    useSyncExternalStore(subscribeInlineTextDiagnostics, () => revision, () => revision);
+    return getInlineTextDiagnostic();
+}
+/** Clear the current diagnostic, optionally only when it belongs to a frame. */
+export function clearInlineTextDiagnostics(ownerDocument) {
+    const current = diagnostics.at(-1);
+    if (!current)
+        return;
+    if (ownerDocument && current.ownerDocument !== ownerDocument)
+        return;
+    diagnostics = [];
+    notify();
+}
+/** Keep feedback for the target that was just selected, but clear stale feedback. */
+export function clearInlineTextDiagnosticsForSelection(selectedElements) {
+    const current = diagnostics.at(-1);
+    if (!current)
+        return;
+    const target = current.target;
+    if (target && selectedElements.length === 1 && selectedElements[0] === target)
+        return;
+    clearInlineTextDiagnostics();
+}

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

@@ -1,4 +1,4 @@
-import { type TextBindingChoice, type TextEditBinding, type TextEditRejection } from "../componentSemantics/textBinding.js";
+import { type TextBindingChoice, type TextEditBinding, type TextEditRejection, type TextEditRejectionReason } from "../componentSemantics/textBinding.js";
 import type { ChangeRecord } from "../changes/types.js";
 import type { TextProjectionScope } from "./textChangeBoundary.js";
 export type { TextEditBinding, TextEditRejection } from "../componentSemantics/textBinding.js";
@@ -28,13 +28,11 @@ export type InlineTextInputRejectionReason = "cross-host-range" | "rich-input" |
 export interface InlineTextDiagnostic {
     kind: "inline-text";
     status: "started" | "committed" | "cancelled" | "rejected";
-    reason: InlineTextSessionEndReason | InlineTextInputRejectionReason;
+    reason: InlineTextSessionEndReason | InlineTextInputRejectionReason | TextEditRejectionReason;
     before: string;
     after?: string;
 }
-export declare function getInlineTextDiagnostics(): readonly InlineTextDiagnostic[];
-export declare function getInlineTextDiagnostic(): InlineTextDiagnostic | null;
-export declare function subscribeInlineTextDiagnostics(listener: () => void): () => void;
+export { clearInlineTextDiagnostics, getInlineTextDiagnostic, getInlineTextDiagnostics, subscribeInlineTextDiagnostics, useInlineTextDiagnostic, } from "./inlineTextDiagnostics.js";
 export declare function getInlineTextSession(): InlineTextSession | null;
 export declare function useInlineTextSession(): InlineTextSession | null;
 export declare function isInlineTextEditingActive(): boolean;