@avocadostudio-ai/preview-adapter 0.19.0 → 0.21.0

package/dist/bridge-controller.js

@@ -258,8 +258,9 @@ export function attachBridge(config) {
             const blockId = String(msg.payload.blockId ?? "");
             const editablePath = String(msg.payload.editablePath ?? "");
             const active = Boolean(msg.payload.active);
-            state.activeShimmer = active ? { blockId, editablePath } : null;
-            applyAiFieldLoading(blockId, editablePath, active);
+            const scope = msg.payload.scope === "page" ? "page" : "block";
+            state.activeShimmer = active ? { blockId, editablePath, scope } : null;
+            applyAiFieldLoading(blockId, editablePath, active, scope);
         }
         if (msg.type === "scrollToBlock") {
             const blockId = String(msg.payload.blockId ?? "");

package/dist/bridge-functions.d.ts

@@ -231,7 +231,17 @@ export declare function removeOverlayControls(deleteConfirmTimer: {
     current: number | null;
 }): void;
 export declare function clearAllHighlights(): void;
-export declare function applyAiFieldLoading(blockId: string, editablePath: string, active: boolean): void;
+/** What the editor says is being worked on: one block, or the whole page. */
+export type AiLoadingScope = "block" | "page";
+/**
+ * True when everything `applyAiFieldLoading` would paint for this target is
+ * already on the page. React re-renders drop the block overlay without
+ * touching the page frame, so the two are checked separately.
+ */
+export declare function isAiFieldLoadingApplied(blockId: string, editablePath: string, scope?: AiLoadingScope): boolean;
+/** Remove every shimmer this module painted and give blocks their position back. */
+export declare function clearAiFieldLoading(): void;
+export declare function applyAiFieldLoading(blockId: string, editablePath: string, active: boolean, scope?: AiLoadingScope): void;
 export declare function cleanupOverlayElements(): void;
 /** Callbacks for communicating user actions back to the editor/widget. */
 export type BridgeCallbacks = {
@@ -359,6 +369,7 @@ export type BridgeState = {
     activeShimmer: {
         blockId: string;
         editablePath: string;
+        scope: AiLoadingScope;
     } | null;
 };
 export declare function createBridgeState(): BridgeState;

package/dist/bridge-functions.js

@@ -703,72 +703,109 @@ export function removeOverlayControls(deleteConfirmTimer) {
 export function clearAllHighlights() {
     document.querySelectorAll(".editor-highlight").forEach((node) => node.classList.remove("editor-highlight"));
 }
-export function applyAiFieldLoading(blockId, editablePath, active) {
-    // Early-out: if shimmer is already active on the same target, skip DOM rebuild
-    if (active) {
-        const existing = document.querySelector(".aifx-shimmer-overlay");
-        const existingBlockId = existing?.getAttribute("data-aifx-block-id") ?? "";
-        const existingPath = existing?.getAttribute("data-aifx-editable-path") ?? "";
-        if (existingBlockId === (blockId ?? "") && existingPath === (editablePath ?? "")) {
-            return;
-        }
+const AIFX_KEY_ATTR = "data-aifx-key";
+const AIFX_PREV_POSITION_ATTR = "data-aifx-prev-position";
+const AIFX_SPARKLE_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>';
+function aiLoadingKey(scope, blockId, editablePath) {
+    return `${scope}|${blockId}|${editablePath}`;
+}
+function createSparkle() {
+    const sparkle = document.createElement("div");
+    sparkle.className = "aifx-shimmer-sparkle";
+    sparkle.innerHTML = AIFX_SPARKLE_SVG;
+    return sparkle;
+}
+/**
+ * True when everything `applyAiFieldLoading` would paint for this target is
+ * already on the page. React re-renders drop the block overlay without
+ * touching the page frame, so the two are checked separately.
+ */
+export function isAiFieldLoadingApplied(blockId, editablePath, scope = "block") {
+    const key = aiLoadingKey(scope, blockId, editablePath);
+    if (scope === "page") {
+        const frame = document.querySelector(".aifx-page-shimmer");
+        if (frame?.getAttribute(AIFX_KEY_ATTR) !== key)
+            return false;
     }
-    // Remove all existing shimmer overlays and restore inline styles
-    document.querySelectorAll(".aifx-shimmer-sparkle").forEach((el) => el.remove());
-    document.querySelectorAll(".aifx-shimmer-overlay").forEach((el) => {
-        const parent = el.parentElement;
-        el.remove();
-        if (parent) {
-            const prevOverflow = parent.getAttribute("data-aifx-prev-overflow");
-            if (prevOverflow !== null) {
-                if (prevOverflow.length > 0)
-                    parent.style.overflow = prevOverflow;
-                else
-                    parent.style.removeProperty("overflow");
-                parent.removeAttribute("data-aifx-prev-overflow");
-            }
-            const prevPosition = parent.getAttribute("data-aifx-prev-position");
-            if (prevPosition !== null) {
-                if (prevPosition.length > 0)
-                    parent.style.position = prevPosition;
-                else
-                    parent.style.removeProperty("position");
-                parent.removeAttribute("data-aifx-prev-position");
-            }
-            if (!parent.style.cssText.trim())
-                parent.removeAttribute("style");
-        }
+    if (!blockId)
+        return scope === "page" || !document.querySelector(".aifx-shimmer-overlay");
+    const node = findBlockNode(blockId);
+    if (!node)
+        return false;
+    const overlay = Array.from(node.children).find((child) => child.classList.contains("aifx-shimmer-overlay"));
+    return overlay?.getAttribute(AIFX_KEY_ATTR) === key;
+}
+/** Remove every shimmer this module painted and give blocks their position back. */
+export function clearAiFieldLoading() {
+    document
+        .querySelectorAll(".aifx-shimmer-overlay, .aifx-shimmer-sparkle, .aifx-page-shimmer")
+        .forEach((el) => el.remove());
+    document.querySelectorAll(`[${AIFX_PREV_POSITION_ATTR}]`).forEach((node) => {
+        const prev = node.getAttribute(AIFX_PREV_POSITION_ATTR) ?? "";
+        if (prev)
+            node.style.position = prev;
+        else
+            node.style.removeProperty("position");
+        node.removeAttribute(AIFX_PREV_POSITION_ATTR);
+        if (!node.style.cssText.trim())
+            node.removeAttribute("style");
     });
-    if (active) {
-        const scopedBlock = (blockId ? findBlockNode(blockId) : null) ??
-            document.querySelector(".editor-highlight[data-block-id]") ??
-            document.querySelector("[data-block-id]") ??
-            document.querySelector("main.editor-mode, main");
-        if (!scopedBlock)
-            return;
-        // Always paint shimmer on block/root so it's clearly visible in preview.
-        // Field-level nodes are often inline/small and can make shimmer imperceptible.
-        const target = scopedBlock;
-        const overlay = document.createElement("div");
-        overlay.className = "aifx-shimmer-overlay";
-        overlay.setAttribute("data-aifx-block-id", blockId ?? "");
-        overlay.setAttribute("data-aifx-editable-path", editablePath ?? "");
-        const sparkle = document.createElement("div");
-        sparkle.className = "aifx-shimmer-sparkle";
-        sparkle.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>';
-        if (!target.hasAttribute("data-aifx-prev-position")) {
-            target.setAttribute("data-aifx-prev-position", target.style.position);
-        }
-        target.style.position = target.style.position || "relative";
-        target.appendChild(overlay);
-        if (blockId) {
-            target.appendChild(sparkle);
-        }
+}
+/*
+ * Paint "AI is working on this" into the preview.
+ *
+ * `scope: "page"` frames the viewport, because the request is about the page
+ * rather than any one block — "review this page" writes no ops, so there is no
+ * block to point at, and pointing at the selected one says the wrong thing.
+ * A `blockId` alongside it adds the sweep to the block currently being
+ * written, so a page-wide rewrite shows both the scope and the progress.
+ *
+ * There is deliberately no fallback. This used to paint the selected block, or
+ * failing that the first block on the page, whenever it was not told which
+ * block — which is how a page review came to shimmer the site header. A block
+ * that is not in the DOM yet paints nothing; the editor re-sends while the
+ * turn runs, and `smoothRefresh` re-applies after a re-render.
+ */
+export function applyAiFieldLoading(blockId, editablePath, active, scope = "block") {
+    blockId = blockId ?? "";
+    editablePath = editablePath ?? "";
+    if (active && isAiFieldLoadingApplied(blockId, editablePath, scope))
+        return;
+    clearAiFieldLoading();
+    if (!active)
+        return;
+    const key = aiLoadingKey(scope, blockId, editablePath);
+    if (scope === "page" && document.body) {
+        const frame = document.createElement("div");
+        frame.className = "aifx-page-shimmer";
+        frame.setAttribute(AIFX_KEY_ATTR, key);
+        frame.appendChild(createSparkle());
+        document.body.appendChild(frame);
+    }
+    const block = blockId ? findBlockNode(blockId) : null;
+    if (!block)
+        return;
+    // Paint on the block, not the field: field nodes are often inline and small
+    // enough to make the sweep imperceptible.
+    const overlay = document.createElement("div");
+    overlay.className = "aifx-shimmer-overlay";
+    overlay.setAttribute(AIFX_KEY_ATTR, key);
+    // The overlay is absolutely positioned, so the block must be a containing
+    // block — but only a static one needs help. Forcing `relative` on a block
+    // whose stylesheet makes it sticky or fixed un-sticks it for the whole turn.
+    if (getComputedStyle(block).position === "static") {
+        if (!block.hasAttribute(AIFX_PREV_POSITION_ATTR))
+            block.setAttribute(AIFX_PREV_POSITION_ATTR, block.style.position);
+        block.style.position = "relative";
     }
+    block.appendChild(overlay);
+    // One sparkle per shimmer: the page frame carries it when there is one.
+    if (scope === "block")
+        block.appendChild(createSparkle());
 }
 export function cleanupOverlayElements() {
     document
-        .querySelectorAll(".aifx-shimmer-overlay, .aifx-shimmer-sparkle, .editor-image-change-btn, .editor-integration-warning")
+        .querySelectorAll(".aifx-shimmer-overlay, .aifx-shimmer-sparkle, .aifx-page-shimmer, .editor-image-change-btn, .editor-integration-warning")
         .forEach((el) => el.remove());
     document.documentElement.removeAttribute("data-editor-active");
     document.documentElement.removeAttribute("data-editor-selection-mode");
@@ -1575,17 +1612,14 @@ export function createBridgeFunctions(state, callbacks, config) {
             // Re-apply shimmer after DOM settles — poll briefly since React
             // reconciliation after router.refresh() is async and rAF isn't enough.
             if (state.activeShimmer) {
-                const { blockId, editablePath } = state.activeShimmer;
+                const { blockId, editablePath, scope } = state.activeShimmer;
                 let attempts = 0;
                 const tryReapply = () => {
-                    if (!state.activeShimmer || state.activeShimmer.blockId !== blockId)
+                    const current = state.activeShimmer;
+                    if (!current || current.blockId !== blockId || current.scope !== scope)
                         return;
-                    applyAiFieldLoading(blockId, editablePath, true);
-                    const node = blockId ? findBlockNode(blockId) : null;
-                    const hasOverlay = node
-                        ? Boolean(node.querySelector(".aifx-shimmer-overlay"))
-                        : Boolean(document.querySelector(".aifx-shimmer-overlay"));
-                    if (!hasOverlay && attempts < 8) {
+                    applyAiFieldLoading(blockId, editablePath, true, scope);
+                    if (!isAiFieldLoadingApplied(blockId, editablePath, scope) && attempts < 8) {
                         attempts++;
                         setTimeout(tryReapply, 60);
                     }

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { PreviewBridge } from "./preview-bridge.tsx";
 export { PreviewBridgeCore } from "./preview-bridge-core.tsx";
 export type { PreviewBridgeConfig, PreviewBridgeCoreProps } from "./preview-bridge-core.tsx";
 export { getPreviewWrapperProps } from "./selectable.ts";
-export { createBridgeFunctions, createBridgeState, findBlockNode, findEditableNode, scrollBlockIntoView, parseListItemPath, supportsInlineEditablePath, readNodeText, placeCaretAtEnd, orderedBlockNodes, blockOrderIndex, computeMoveAfter, computeInsertBefore, groupListItemNodes, commonItemRoot, markdownToHtml, withPreviewParams, setNestedLabelsVisibility, clearChildFocus, clearListItemSelection, removeOverlayControls, clearAllHighlights, showSkeleton, removeSkeletons, ensureBlockBadges, applyAiFieldLoading, cleanupOverlayElements, isImageEditable, isInlineEditable, isMultilineEditable, missingBlockWrapperWarning, previewIntegrationWarnings, } from "./bridge-functions.ts";
-export type { BridgeCallbacks, BridgeState, BridgeFunctions } from "./bridge-functions.ts";
+export { createBridgeFunctions, createBridgeState, findBlockNode, findEditableNode, scrollBlockIntoView, parseListItemPath, supportsInlineEditablePath, readNodeText, placeCaretAtEnd, orderedBlockNodes, blockOrderIndex, computeMoveAfter, computeInsertBefore, groupListItemNodes, commonItemRoot, markdownToHtml, withPreviewParams, setNestedLabelsVisibility, clearChildFocus, clearListItemSelection, removeOverlayControls, clearAllHighlights, showSkeleton, removeSkeletons, ensureBlockBadges, applyAiFieldLoading, clearAiFieldLoading, isAiFieldLoadingApplied, cleanupOverlayElements, isImageEditable, isInlineEditable, isMultilineEditable, missingBlockWrapperWarning, previewIntegrationWarnings, } from "./bridge-functions.ts";
+export type { AiLoadingScope, BridgeCallbacks, BridgeState, BridgeFunctions } from "./bridge-functions.ts";
 export { LivePreviewProvider, useLivePreviewBlocks, useLivePreviewBridgeApi, } from "./live-preview-store.tsx";
 export type { LivePreviewPage, LivePreviewBridgeApi } from "./live-preview-store.tsx";

package/dist/index.js

@@ -1,5 +1,5 @@
 export { PreviewBridge } from "./preview-bridge.js";
 export { PreviewBridgeCore } from "./preview-bridge-core.js";
 export { getPreviewWrapperProps } from "./selectable.js";
-export { createBridgeFunctions, createBridgeState, findBlockNode, findEditableNode, scrollBlockIntoView, parseListItemPath, supportsInlineEditablePath, readNodeText, placeCaretAtEnd, orderedBlockNodes, blockOrderIndex, computeMoveAfter, computeInsertBefore, groupListItemNodes, commonItemRoot, markdownToHtml, withPreviewParams, setNestedLabelsVisibility, clearChildFocus, clearListItemSelection, removeOverlayControls, clearAllHighlights, showSkeleton, removeSkeletons, ensureBlockBadges, applyAiFieldLoading, cleanupOverlayElements, isImageEditable, isInlineEditable, isMultilineEditable, missingBlockWrapperWarning, previewIntegrationWarnings, } from "./bridge-functions.js";
+export { createBridgeFunctions, createBridgeState, findBlockNode, findEditableNode, scrollBlockIntoView, parseListItemPath, supportsInlineEditablePath, readNodeText, placeCaretAtEnd, orderedBlockNodes, blockOrderIndex, computeMoveAfter, computeInsertBefore, groupListItemNodes, commonItemRoot, markdownToHtml, withPreviewParams, setNestedLabelsVisibility, clearChildFocus, clearListItemSelection, removeOverlayControls, clearAllHighlights, showSkeleton, removeSkeletons, ensureBlockBadges, applyAiFieldLoading, clearAiFieldLoading, isAiFieldLoadingApplied, cleanupOverlayElements, isImageEditable, isInlineEditable, isMultilineEditable, missingBlockWrapperWarning, previewIntegrationWarnings, } from "./bridge-functions.js";
 export { LivePreviewProvider, useLivePreviewBlocks, useLivePreviewBridgeApi, } from "./live-preview-store.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avocadostudio-ai/preview-adapter",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -37,7 +37,7 @@
     "src/styles.css"
   ],
   "dependencies": {
-    "@avocadostudio-ai/shared": "^0.19.0"
+    "@avocadostudio-ai/shared": "^0.21.0"
   },
   "peerDependencies": {
     "next": ">=15.0.0",

package/src/styles.css

@@ -265,34 +265,50 @@
   background: rgba(148, 163, 184, 0.06);
 }
 
-/* AI field loading shimmer */
+/*
+ * "AI is working on this" — the sweep over one block (.aifx-shimmer-overlay)
+ * or the frame round the whole page (.aifx-page-shimmer), which the bridge
+ * paints when the request is about the page rather than a block.
+ *
+ * The sweep is tinted, not white. It used to be a white band, which on a white
+ * section paints nothing at all; the accent flanks show on light backgrounds
+ * and the white core on dark ones, so one gradient serves both. The old
+ * `prefers-color-scheme: light` variant keyed on the OS, not on the site's own
+ * theme, and was all but identical anyway.
+ *
+ * The page frame lives on <body>, outside every `.editor-selectable`, where
+ * the editor tokens are not defined — hence the fallbacks.
+ */
+.aifx-shimmer-overlay,
+.aifx-page-shimmer {
+  --aifx-rgb: var(--editor-accent-rgb, 37, 99, 235);
+  --aifx-sweep: linear-gradient(
+    110deg,
+    transparent 0%,
+    transparent 34%,
+    rgba(var(--aifx-rgb), 0.10) 42%,
+    rgba(255, 255, 255, 0.42) 50%,
+    rgba(var(--aifx-rgb), 0.14) 57%,
+    transparent 66%,
+    transparent 100%
+  );
+  pointer-events: none;
+  overflow: hidden;
+}
+
 .aifx-shimmer-overlay {
   position: absolute;
   inset: 0;
   z-index: 21;
-  pointer-events: none;
   border-radius: inherit;
-  overflow: hidden;
-  background: transparent;
-  mix-blend-mode: normal;
-  box-shadow: none;
 }
 
-.aifx-shimmer-overlay::before {
+.aifx-shimmer-overlay::before,
+.aifx-page-shimmer::before {
   content: "";
   position: absolute;
   inset: 0;
-  background: linear-gradient(
-    110deg,
-    transparent 0%,
-    transparent 38%,
-    rgba(255, 255, 255, 0.0) 42%,
-    rgba(255, 255, 255, 0.42) 50%,
-    rgba(219, 234, 254, 0.30) 54%,
-    rgba(255, 255, 255, 0.0) 60%,
-    transparent 66%,
-    transparent 100%
-  );
+  background: var(--aifx-sweep);
   transform: translateX(120%);
   animation: aifx-shimmer-slide 2.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 }
@@ -302,6 +318,34 @@
   100% { transform: translateX(-120%); }
 }
 
+/* Fixed, so it frames what the user is looking at wherever they scroll. */
+.aifx-page-shimmer {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483000;
+  box-shadow:
+    inset 0 0 0 2px rgba(var(--aifx-rgb), 0.5),
+    inset 0 0 32px rgba(var(--aifx-rgb), 0.16);
+  animation: aifx-page-pulse 2.4s ease-in-out infinite;
+}
+
+.aifx-page-shimmer::before {
+  opacity: 0.7;
+  animation-duration: 3.6s;
+  transition: opacity 240ms ease;
+}
+
+/* Once a block is being written, the frame says "page" and the block's sweep
+   says "here, now". Two sweeps at two speeds just read as noise. */
+body:has(.aifx-shimmer-overlay) > .aifx-page-shimmer::before {
+  opacity: 0;
+}
+
+@keyframes aifx-page-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
 /* Force chrome visible while AI shimmer is active */
 .editor-block-badge:has(.aifx-shimmer-sparkle) {
   opacity: 1 !important;
@@ -326,6 +370,14 @@
   animation: aifx-sparkle-blink 1.6s ease-in-out infinite;
 }
 
+/* Bottom corner: the top-right of a page is where the site's header puts its
+   own buttons. */
+.aifx-page-shimmer > .aifx-shimmer-sparkle {
+  top: auto;
+  right: 14px;
+  bottom: 14px;
+}
+
 .aifx-shimmer-sparkle svg {
   display: block;
   width: 13px;
@@ -338,34 +390,27 @@
   50% { transform: scale(0.9); opacity: 0.65; }
 }
 
-@media (prefers-color-scheme: light) {
-  .aifx-shimmer-overlay {
-    background: transparent;
-    box-shadow: none;
-  }
-
-  .aifx-shimmer-overlay::before {
-    background: linear-gradient(
-      110deg,
-      transparent 0%,
-      transparent 36%,
-      rgba(255, 255, 255, 0.0) 41%,
-      rgba(255, 255, 255, 0.46) 50%,
-      rgba(191, 219, 254, 0.34) 54%,
-      rgba(255, 255, 255, 0.0) 60%,
-      transparent 66%,
-      transparent 100%
-    );
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .aifx-shimmer-overlay,
   .aifx-shimmer-overlay::before,
+  .aifx-page-shimmer,
+  .aifx-page-shimmer::before,
   .aifx-shimmer-sparkle,
   .editor-skeleton-block::before {
     animation: none !important;
   }
+
+  /* A stopped sweep rests off-canvas at translateX(120%), which left nothing
+     on screen at all. Hold a still tint instead; the page frame's border
+     already reads without motion. */
+  .aifx-shimmer-overlay::before {
+    transform: none;
+    background: rgba(var(--aifx-rgb), 0.08);
+  }
+
+  .aifx-page-shimmer::before {
+    display: none;
+  }
 }
 
 [data-editor-active] .editor-highlight::before {
@@ -1234,6 +1279,8 @@
     animation: none !important;
   }
   .aifx-shimmer-overlay,
+  .aifx-page-shimmer,
+  .aifx-page-shimmer::before,
   .aifx-shimmer-sparkle {
     animation: none !important;
   }