@kotao/storefront 0.2.6 → 0.2.7

package/dist/{chunk-O6YZEY7X.js → chunk-RFKLO6TD.js}

@@ -1,6 +1,7 @@
 // src/editor/bridge.ts
 var HOST_SOURCE = "kotao:workspaces-editor";
 var PREVIEW_SOURCE = "kotao:storefront-preview";
+var VISUAL_READY_REQUEST_ID = /^[A-Za-z0-9_-]{1,128}$/u;
 function isReservedSectionId(sectionId) {
   return sectionId.startsWith("theme:");
 }
@@ -121,6 +122,13 @@ function parseHostMessage(data, shopId) {
         type: "editor.ready.request",
         shopId
       };
+    case "editor.visual-ready.request":
+      return typeof data.requestId === "string" && VISUAL_READY_REQUEST_ID.test(data.requestId) ? {
+        source: HOST_SOURCE,
+        type: "editor.visual-ready.request",
+        shopId,
+        requestId: data.requestId
+      } : null;
     case "section.hover":
     case "section.activate":
       if (data.sectionId !== null && (typeof data.sectionId !== "string" || isReservedSectionId(data.sectionId))) {
@@ -136,6 +144,8 @@ function parseHostMessage(data, shopId) {
         sectionId: data.sectionId,
         ...data.blockId !== void 0 ? { blockId: data.blockId } : {}
       };
+    case "inspector.set":
+      return typeof data.enabled === "boolean" ? { source: HOST_SOURCE, type: "inspector.set", shopId, enabled: data.enabled } : null;
     case "settings.patchSection":
       return typeof data.sectionId === "string" && !isReservedSectionId(data.sectionId) && isSettings(data.settings) ? {
         source: HOST_SOURCE,
@@ -318,6 +328,7 @@ function parsePreviewHover(data, shopId) {
 function parsePreviewReady(data, shopId) {
   if (!isRecord(data) || data.source !== PREVIEW_SOURCE || data.shopId !== shopId) return null;
   if (data.type !== "editor.ready" || !isResolvedSectionArray(data.sections)) return null;
+  if (data.visualReadyProtocol !== void 0 && data.visualReadyProtocol !== 1) return null;
   if (data.global !== void 0 && !isSettings(data.global)) return null;
   if (data.schemas !== void 0 && !isSectionSchemaRecord(data.schemas)) return null;
   if (data.globalInputs !== void 0 && !isSettingInputArray(data.globalInputs)) return null;
@@ -329,6 +340,7 @@ function parsePreviewReady(data, shopId) {
     type: "editor.ready",
     shopId,
     sections: data.sections,
+    ...data.visualReadyProtocol === 1 ? { visualReadyProtocol: 1 } : {},
     ...data.global !== void 0 ? { global: data.global } : {},
     ...data.schemas !== void 0 ? { schemas: data.schemas } : {},
     ...data.globalInputs !== void 0 ? { globalInputs: data.globalInputs } : {},
@@ -337,6 +349,33 @@ function parsePreviewReady(data, shopId) {
     ...sectionGroups !== void 0 ? { sectionGroups } : {}
   };
 }
+function parsePreviewVisualReady(data, shopId) {
+  if (!isRecord(data) || data.source !== PREVIEW_SOURCE || data.shopId !== shopId) return null;
+  if (data.type !== "editor.visual-ready" || typeof data.requestId !== "string" || !VISUAL_READY_REQUEST_ID.test(data.requestId)) {
+    return null;
+  }
+  return {
+    source: PREVIEW_SOURCE,
+    type: "editor.visual-ready",
+    shopId,
+    requestId: data.requestId
+  };
+}
+function parsePreviewNavigation(data, shopId, previewOrigin) {
+  if (!isRecord(data) || data.source !== PREVIEW_SOURCE || data.shopId !== shopId) return null;
+  if (data.type !== "preview.navigate" || typeof data.href !== "string" || data.href.trim() === "") {
+    return null;
+  }
+  try {
+    const href = new URL(data.href);
+    if (href.protocol !== "https:" && href.protocol !== "http:" || href.username !== "" || href.password !== "" || href.origin !== previewOrigin) {
+      return null;
+    }
+  } catch {
+    return null;
+  }
+  return { source: PREVIEW_SOURCE, type: "preview.navigate", shopId, href: data.href };
+}
 function postHostMessage(target, previewOrigin, message) {
   target.postMessage(message, previewOrigin);
 }
@@ -583,6 +622,40 @@ function findBlockElement(document, blockId) {
   );
   return candidates?.find((element) => blockIdForElement(element) === blockId) ?? null;
 }
+function isModifiedClick(event) {
+  return event.metaKey === true || event.ctrlKey === true || event.shiftKey === true || event.altKey === true;
+}
+function anchorElementFromTarget(target) {
+  if (!isRecord(target) || typeof target.closest !== "function") return null;
+  const anchor = target.closest("a[href]");
+  if (!isRecord(anchor) || typeof anchor.getAttribute !== "function") return null;
+  return anchor;
+}
+function classifyAnchorClick(event, anchor, document) {
+  const download = anchor.getAttribute?.("download");
+  if (event.defaultPrevented === true || event.button !== void 0 && event.button !== 0 || isModifiedClick(event) || anchor.getAttribute?.("target")?.toLowerCase() === "_blank" || download !== null && download !== void 0) {
+    return null;
+  }
+  const rawHref = anchor.getAttribute?.("href");
+  const location = document.defaultView?.location;
+  if (typeof rawHref !== "string" || rawHref.trim() === "" || location === void 0) return null;
+  const hasFragmentDelimiter = rawHref.includes("#");
+  let href;
+  let current;
+  try {
+    href = new URL(rawHref, location.href);
+    current = new URL(location.href);
+  } catch {
+    return { kind: "unsafe" };
+  }
+  if (href.protocol === "javascript:" || href.protocol === "data:") return { kind: "unsafe" };
+  if (href.protocol === "mailto:" || href.protocol === "tel:") return { kind: "scheme" };
+  if (href.protocol !== "https:" && href.protocol !== "http:") return { kind: "unsafe" };
+  if (href.origin === location.origin && href.pathname === current.pathname && href.search === current.search && (href.hash !== "" || hasFragmentDelimiter)) {
+    return { kind: "hash" };
+  }
+  return href.origin === location.origin ? { kind: "internal", href: href.href } : { kind: "external", href: href.href };
+}
 function htmlAttribute(value) {
   return value.replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;");
 }
@@ -616,6 +689,7 @@ function createEditorAffordances({
   labelForSection,
   onCanvasAction,
   onHoverSection,
+  onNavigate,
   onSelect,
   stateForSelection
 }) {
@@ -627,6 +701,7 @@ function createEditorAffordances({
   let selectedBlockId = null;
   let ownedStyle = null;
   let ownedToolbar = null;
+  let inspectorEnabled = true;
   const setElementState = (kind, sectionId) => {
     const previous = kind === "hovered" ? hoveredElement : selectedElement;
     previous?.removeAttribute(`data-kotao-editor-${kind}`);
@@ -639,8 +714,14 @@ function createEditorAffordances({
     return sectionElement;
   };
   const setHovered = (sectionId) => {
+    if (!inspectorEnabled && sectionId !== null) return;
     hoveredElement = setElementState("hovered", sectionId);
   };
+  const clearHovered = () => {
+    hoveredBlockElement?.removeAttribute("data-kotao-editor-block-hovered");
+    hoveredBlockElement = null;
+    setHovered(null);
+  };
   const positionToolbar = () => {
     const anchor = selectedBlockElement ?? selectedElement;
     const anchorRect = anchor?.getBoundingClientRect?.();
@@ -681,6 +762,7 @@ function createEditorAffordances({
     positionToolbar();
   };
   const setSelected = (sectionId, blockId) => {
+    if (!inspectorEnabled && sectionId !== null) return;
     selectedBlockElement?.removeAttribute("data-kotao-editor-block-selected");
     selectedBlockElement = null;
     selectedBlockId = blockId ?? null;
@@ -697,6 +779,7 @@ function createEditorAffordances({
     renderToolbar();
   };
   const onPointerOver = (event) => {
+    if (!inspectorEnabled) return;
     const element = sectionElementFromTarget(event.target);
     if (element === null) return;
     const sectionId = element.id.slice("shopify-section-".length);
@@ -716,12 +799,11 @@ function createEditorAffordances({
     }
   };
   const onPointerOut = (event) => {
+    if (!inspectorEnabled) return;
     if (hoveredElement === null) return;
     const nextElement = sectionElementFromTarget(event.relatedTarget);
     if (nextElement === hoveredElement || hoveredElement.contains(event.relatedTarget)) return;
-    hoveredBlockElement?.removeAttribute("data-kotao-editor-block-hovered");
-    hoveredBlockElement = null;
-    setHovered(null);
+    clearHovered();
     onHoverSection(null);
   };
   const onClick = (event) => {
@@ -729,6 +811,35 @@ function createEditorAffordances({
       const canvas = event.target.closest(`#${EDITOR_CANVAS_ID}`);
       if (canvas !== null) return;
     }
+    const anchor = anchorElementFromTarget(event.target);
+    if (anchor !== null) {
+      const disposition = classifyAnchorClick(event, anchor, document);
+      if (disposition === null) return;
+      if (inspectorEnabled) {
+        event.preventDefault?.();
+        event.stopPropagation?.();
+      } else {
+        switch (disposition.kind) {
+          case "internal":
+            event.preventDefault?.();
+            event.stopPropagation?.();
+            onNavigate(disposition.href);
+            break;
+          case "external":
+            event.preventDefault?.();
+            event.stopPropagation?.();
+            document.defaultView?.open?.(disposition.href, "_blank", "noopener,noreferrer");
+            break;
+          case "unsafe":
+            event.preventDefault?.();
+            event.stopPropagation?.();
+            break;
+        }
+        return;
+      }
+    } else if (!inspectorEnabled) {
+      return;
+    }
     const section = sectionElementFromTarget(event.target);
     if (section === null) return;
     const sectionId = section.id.slice("shopify-section-".length);
@@ -784,8 +895,15 @@ function createEditorAffordances({
   return {
     setHovered,
     setSelected,
+    setInspectorEnabled(enabled) {
+      inspectorEnabled = enabled;
+      if (!enabled) {
+        clearHovered();
+        setSelected(null);
+      }
+    },
     dispose() {
-      setHovered(null);
+      clearHovered();
       setSelected(null);
       document.documentElement.removeAttribute("data-kotao-editor");
       document.removeEventListener("pointerover", onPointerOver, true);
@@ -947,13 +1065,25 @@ function createStorefrontEditorBridge({
     };
     target.postMessage(message, adminOrigin);
   };
+  const postNavigation = (href) => {
+    const message = {
+      source: PREVIEW_SOURCE,
+      type: "preview.navigate",
+      shopId,
+      href
+    };
+    target.postMessage(message, adminOrigin);
+  };
   const resolvedDocument = editorDocument ?? defaultEditorDocument();
+  let disposed = false;
+  const pendingAnimationFrames = /* @__PURE__ */ new Set();
   const affordances = resolvedDocument === void 0 ? null : createEditorAffordances({
     document: resolvedDocument,
     labelForBlock,
     labelForSection,
     onCanvasAction: postCanvasAction,
     onHoverSection: postHoverSection,
+    onNavigate: postNavigation,
     onSelect: postSelection,
     stateForSelection
   });
@@ -964,6 +1094,7 @@ function createStorefrontEditorBridge({
       type: "editor.ready",
       shopId,
       sections: snapshot.sections,
+      visualReadyProtocol: 1,
       global: snapshot.global,
       ...schemas !== void 0 ? { schemas } : {},
       ...globalInputs !== void 0 ? { globalInputs } : {},
@@ -973,21 +1104,67 @@ function createStorefrontEditorBridge({
     };
     target.postMessage(message, adminOrigin);
   };
+  const postVisualReadyAfterPaint = (requestId) => {
+    const view = resolvedDocument?.defaultView;
+    const requestAnimationFrame = view?.requestAnimationFrame?.bind(view);
+    if (requestAnimationFrame === void 0) {
+      queueMicrotask(() => {
+        queueMicrotask(() => {
+          if (disposed) return;
+          target.postMessage(
+            {
+              source: PREVIEW_SOURCE,
+              type: "editor.visual-ready",
+              shopId,
+              requestId
+            },
+            adminOrigin
+          );
+        });
+      });
+      return;
+    }
+    const firstFrame = requestAnimationFrame(() => {
+      pendingAnimationFrames.delete(firstFrame);
+      if (disposed) return;
+      const secondFrame = requestAnimationFrame(() => {
+        pendingAnimationFrames.delete(secondFrame);
+        if (disposed) return;
+        target.postMessage(
+          {
+            source: PREVIEW_SOURCE,
+            type: "editor.visual-ready",
+            shopId,
+            requestId
+          },
+          adminOrigin
+        );
+      });
+      pendingAnimationFrames.add(secondFrame);
+    });
+    pendingAnimationFrames.add(firstFrame);
+  };
   const onMessage = (event) => {
     if (event.origin !== adminOrigin) return;
-    if (event.source !== void 0 && event.source !== null && event.source !== target) return;
+    if (event.source !== target) return;
     const message = parseHostMessage(event.data, shopId);
     if (message === null) return;
     switch (message.type) {
       case "editor.ready.request":
         postReady();
         break;
+      case "editor.visual-ready.request":
+        postVisualReadyAfterPaint(message.requestId);
+        break;
       case "section.hover":
         affordances?.setHovered(message.sectionId);
         break;
       case "section.activate":
         affordances?.setSelected(message.sectionId, message.blockId);
         break;
+      case "inspector.set":
+        affordances?.setInspectorEnabled(message.enabled);
+        break;
       case "settings.patchSection":
         store.patchSection(message.sectionId, message.settings);
         break;
@@ -1045,6 +1222,11 @@ function createStorefrontEditorBridge({
       postSelection(sectionId, blockId);
     },
     dispose: () => {
+      disposed = true;
+      for (const requestId of pendingAnimationFrames) {
+        resolvedDocument?.defaultView?.cancelAnimationFrame?.(requestId);
+      }
+      pendingAnimationFrames.clear();
       replaceAppExtensionPreviewFrames(resolvedDocument, []);
       affordances?.dispose();
       transport.removeEventListener("message", onMessage);
@@ -1054,8 +1236,10 @@ function createStorefrontEditorBridge({
 function createStorefrontEditorHostBridge({
   onCanvasAction,
   onHoverSection,
+  onNavigate,
   onReady,
   onSelectSection,
+  onVisualReady,
   previewOrigin,
   resolveTarget,
   shopId,
@@ -1065,12 +1249,23 @@ function createStorefrontEditorHostBridge({
   const currentTarget = () => resolveTarget?.() ?? target;
   const onMessage = (event) => {
     if (event.origin !== previewOrigin) return;
-    if (event.source !== void 0 && event.source !== null && event.source !== currentTarget())
+    const expectedTarget = currentTarget();
+    if (event.source !== expectedTarget) return;
+    const visualReady = parsePreviewVisualReady(event.data, shopId);
+    if (visualReady !== null) {
+      onVisualReady?.(visualReady.requestId);
       return;
+    }
+    const navigation = parsePreviewNavigation(event.data, shopId, previewOrigin);
+    if (navigation !== null) {
+      onNavigate?.({ href: navigation.href });
+      return;
+    }
     const ready = parsePreviewReady(event.data, shopId);
     if (ready !== null) {
       onReady?.({
         sections: ready.sections,
+        ...ready.visualReadyProtocol === 1 ? { visualReadyProtocol: 1 } : {},
         ...ready.global !== void 0 ? { global: ready.global } : {},
         ...ready.schemas !== void 0 ? { schemas: ready.schemas } : {},
         ...ready.globalInputs !== void 0 ? { globalInputs: ready.globalInputs } : {},
@@ -1123,6 +1318,15 @@ function createStorefrontEditorHostBridge({
         shopId
       });
     },
+    requestVisualReady: (requestId) => {
+      if (!VISUAL_READY_REQUEST_ID.test(requestId)) return;
+      postHostMessage(currentTarget(), previewOrigin, {
+        source: HOST_SOURCE,
+        type: "editor.visual-ready.request",
+        shopId,
+        requestId
+      });
+    },
     hoverSection: (sectionId) => {
       if (sectionId !== null && isReservedSectionId(sectionId)) return;
       postHostMessage(currentTarget(), previewOrigin, {
@@ -1260,6 +1464,14 @@ function createStorefrontEditorHostBridge({
         extensions
       });
     },
+    setInspectorEnabled: (enabled) => {
+      postHostMessage(currentTarget(), previewOrigin, {
+        source: HOST_SOURCE,
+        type: "inspector.set",
+        shopId,
+        enabled
+      });
+    },
     dispose: () => {
       transport.removeEventListener("message", onMessage);
     }
@@ -1378,5 +1590,5 @@ function scopeStorefrontSectionCss(value, sectionId) {
 }
 
 export { STOREFRONT_SECTION_CUSTOM_CSS_SETTING, createStorefrontEditorBridge, createStorefrontEditorHostBridge, positionStorefrontEditorCanvasToolbar, scopeStorefrontSectionCss };
-//# sourceMappingURL=chunk-O6YZEY7X.js.map
-//# sourceMappingURL=chunk-O6YZEY7X.js.map
+//# sourceMappingURL=chunk-RFKLO6TD.js.map
+//# sourceMappingURL=chunk-RFKLO6TD.js.map