@kotao/storefront 0.2.4 → 0.2.6

package/dist/chunk-O6YZEY7X.js

@@ -0,0 +1,1382 @@
+// src/editor/bridge.ts
+var HOST_SOURCE = "kotao:workspaces-editor";
+var PREVIEW_SOURCE = "kotao:storefront-preview";
+function isReservedSectionId(sectionId) {
+  return sectionId.startsWith("theme:");
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isSettings(value) {
+  return isRecord(value);
+}
+function isOptionalSettings(value) {
+  return value === void 0 || isSettings(value);
+}
+function isBlockId(value) {
+  return typeof value === "string" && value.length > 0;
+}
+function isResolvedBlock(value) {
+  return isRecord(value) && (value.id === void 0 || isBlockId(value.id)) && typeof value.type === "string" && isSettings(value.settings);
+}
+function isResolvedSection(value) {
+  if (!isRecord(value)) return false;
+  return typeof value.id === "string" && typeof value.type === "string" && isSettings(value.settings) && Array.isArray(value.blocks) && value.blocks.every(isResolvedBlock);
+}
+function isValuesDocument(value) {
+  return isRecord(value) && typeof value.shopId === "string" && value.shopId.length > 0 && isResolvedSectionArray(value.sections);
+}
+function isSettingOption(value) {
+  return isRecord(value) && typeof value.value === "string" && typeof value.label === "string";
+}
+function isOptionalString(value) {
+  return value === void 0 || typeof value === "string";
+}
+function isOptionalFiniteNumber(value) {
+  return value === void 0 || typeof value === "number" && Number.isFinite(value);
+}
+function isOptionalPositiveInteger(value) {
+  return value === void 0 || typeof value === "number" && Number.isInteger(value) && value > 0;
+}
+function isSettingInput(value) {
+  if (!isRecord(value) || typeof value.type !== "string" || typeof value.name !== "string" || typeof value.label !== "string") {
+    return false;
+  }
+  return isOptionalString(value.placeholder) && isOptionalString(value.helpText) && isOptionalString(value.group) && isOptionalString(value.unit) && isOptionalFiniteNumber(value.min) && isOptionalFiniteNumber(value.max) && isOptionalFiniteNumber(value.step) && (value.options === void 0 || Array.isArray(value.options) && value.options.every(isSettingOption));
+}
+function isBlockSchema(value) {
+  return isRecord(value) && typeof value.type === "string" && typeof value.label === "string" && Array.isArray(value.settings) && value.settings.every(isSettingInput) && isOptionalPositiveInteger(value.limit);
+}
+function isSectionPresetBlock(value) {
+  return isRecord(value) && typeof value.type === "string" && isOptionalSettings(value.settings);
+}
+function isSectionPreset(value) {
+  return isRecord(value) && typeof value.name === "string" && isOptionalSettings(value.settings) && (value.blocks === void 0 || Array.isArray(value.blocks) && value.blocks.every(isSectionPresetBlock));
+}
+function isSectionSchema(value) {
+  return isRecord(value) && typeof value.type === "string" && typeof value.label === "string" && Array.isArray(value.settings) && value.settings.every(isSettingInput) && isOptionalPositiveInteger(value.maxBlocks) && (value.blocks === void 0 || Array.isArray(value.blocks) && value.blocks.every(isBlockSchema)) && (value.presets === void 0 || Array.isArray(value.presets) && value.presets.every(isSectionPreset));
+}
+function isResolvedSectionArray(value) {
+  return Array.isArray(value) && value.every(isResolvedSection);
+}
+function isSectionSchemaRecord(value) {
+  return isRecord(value) && Object.values(value).every(isSectionSchema);
+}
+function isSettingInputArray(value) {
+  return Array.isArray(value) && value.every(isSettingInput);
+}
+function isThemeStyle(value) {
+  return isRecord(value) && typeof value.name === "string" && isSettings(value.settings);
+}
+function isThemeStyleArray(value) {
+  return Array.isArray(value) && value.every(isThemeStyle);
+}
+function validValuesDocuments(value) {
+  if (!isRecord(value)) return void 0;
+  const documents = {};
+  for (const [handle, document] of Object.entries(value)) {
+    if (isValuesDocument(document)) documents[handle] = document;
+  }
+  return documents;
+}
+function isSelectionScope(value) {
+  return isRecord(value) && (value.kind === "template" || value.kind === "sectionGroup") && typeof value.handle === "string" && value.handle.trim() !== "";
+}
+function isHttpsUrl(value) {
+  if (typeof value !== "string") return false;
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" && url.username === "" && url.password === "";
+  } catch {
+    return false;
+  }
+}
+function isBareHttpOrigin(value) {
+  if (typeof value !== "string") return false;
+  try {
+    const url = new URL(value);
+    return (url.protocol === "https:" || url.protocol === "http:") && url.username === "" && url.password === "" && url.pathname === "/" && url.search === "" && url.hash === "";
+  } catch {
+    return false;
+  }
+}
+function isAppExtensionPreview(value) {
+  if (!isRecord(value) || value.kind !== "app_embed" && value.kind !== "app_section" && value.kind !== "app_block" || typeof value.instanceId !== "string" || typeof value.appId !== "string" || typeof value.appName !== "string" || typeof value.extensionId !== "string" || typeof value.extensionName !== "string" || typeof value.version !== "string" || !isHttpsUrl(value.entrypointUrl) || !Array.isArray(value.stylesheetUrls) || !value.stylesheetUrls.every(isHttpsUrl) || !Array.isArray(value.capabilities) || !value.capabilities.every((capability) => typeof capability === "string") || !Array.isArray(value.allowedOrigins) || !value.allowedOrigins.every(isBareHttpOrigin) || !isSettings(value.settings) || typeof value.position !== "number" || !Number.isInteger(value.position) || value.position < 0) {
+    return false;
+  }
+  if (value.kind === "app_embed") {
+    return value.embedLocation === "head" || value.embedLocation === "body_start" || value.embedLocation === "body_end";
+  }
+  if (value.kind === "app_section") {
+    return isRecord(value.target) && (value.target.kind === "template" || value.target.kind === "section_group") && typeof value.target.handle === "string" && value.target.handle !== "";
+  }
+  return typeof value.templateHandle === "string" && isBlockId(value.sectionInstanceId);
+}
+function parseHostMessage(data, shopId) {
+  if (!isRecord(data) || data.source !== HOST_SOURCE || data.shopId !== shopId) return null;
+  switch (data.type) {
+    case "editor.ready.request":
+      return {
+        source: HOST_SOURCE,
+        type: "editor.ready.request",
+        shopId
+      };
+    case "section.hover":
+    case "section.activate":
+      if (data.sectionId !== null && (typeof data.sectionId !== "string" || isReservedSectionId(data.sectionId))) {
+        return null;
+      }
+      if (data.blockId !== void 0 && (data.type !== "section.activate" || !isBlockId(data.blockId))) {
+        return null;
+      }
+      return {
+        source: HOST_SOURCE,
+        type: data.type,
+        shopId,
+        sectionId: data.sectionId,
+        ...data.blockId !== void 0 ? { blockId: data.blockId } : {}
+      };
+    case "settings.patchSection":
+      return typeof data.sectionId === "string" && !isReservedSectionId(data.sectionId) && isSettings(data.settings) ? {
+        source: HOST_SOURCE,
+        type: "settings.patchSection",
+        shopId,
+        sectionId: data.sectionId,
+        settings: data.settings
+      } : null;
+    case "settings.patchGlobal":
+      return isSettings(data.settings) ? { source: HOST_SOURCE, type: "settings.patchGlobal", shopId, settings: data.settings } : null;
+    case "sections.insert":
+      return isResolvedSection(data.section) && !isReservedSectionId(data.section.id) ? {
+        source: HOST_SOURCE,
+        type: "sections.insert",
+        shopId,
+        section: data.section,
+        ...typeof data.index === "number" ? { index: data.index } : {}
+      } : null;
+    case "sections.remove":
+      return typeof data.sectionId === "string" && !isReservedSectionId(data.sectionId) ? {
+        source: HOST_SOURCE,
+        type: "sections.remove",
+        shopId,
+        sectionId: data.sectionId
+      } : null;
+    case "sections.reorder":
+      return typeof data.sectionId === "string" && !isReservedSectionId(data.sectionId) && typeof data.index === "number" ? {
+        source: HOST_SOURCE,
+        type: "sections.reorder",
+        shopId,
+        sectionId: data.sectionId,
+        index: data.index
+      } : null;
+    case "settings.patchBlock":
+      return typeof data.sectionId === "string" && !isReservedSectionId(data.sectionId) && isBlockId(data.blockId) && isSettings(data.settings) ? {
+        source: HOST_SOURCE,
+        type: "settings.patchBlock",
+        shopId,
+        sectionId: data.sectionId,
+        blockId: data.blockId,
+        settings: data.settings
+      } : null;
+    case "blocks.insert":
+      return typeof data.sectionId === "string" && !isReservedSectionId(data.sectionId) && isResolvedBlock(data.block) ? {
+        source: HOST_SOURCE,
+        type: "blocks.insert",
+        shopId,
+        sectionId: data.sectionId,
+        block: data.block,
+        ...typeof data.index === "number" ? { index: data.index } : {}
+      } : null;
+    case "blocks.remove":
+      return typeof data.sectionId === "string" && !isReservedSectionId(data.sectionId) && isBlockId(data.blockId) ? {
+        source: HOST_SOURCE,
+        type: "blocks.remove",
+        shopId,
+        sectionId: data.sectionId,
+        blockId: data.blockId
+      } : null;
+    case "blocks.reorder":
+      return typeof data.sectionId === "string" && !isReservedSectionId(data.sectionId) && isBlockId(data.blockId) && typeof data.index === "number" ? {
+        source: HOST_SOURCE,
+        type: "blocks.reorder",
+        shopId,
+        sectionId: data.sectionId,
+        blockId: data.blockId,
+        index: data.index
+      } : null;
+    case "template.replace":
+      return typeof data.handle === "string" && isValuesDocument(data.document) ? {
+        source: HOST_SOURCE,
+        type: "template.replace",
+        shopId,
+        handle: data.handle,
+        document: data.document
+      } : null;
+    case "sectionGroup.replace":
+      return typeof data.handle === "string" && data.handle.trim() !== "" && isValuesDocument(data.document) ? {
+        source: HOST_SOURCE,
+        type: "sectionGroup.replace",
+        shopId,
+        handle: data.handle,
+        document: data.document
+      } : null;
+    case "appExtensions.replace":
+      return Array.isArray(data.extensions) && data.extensions.every(isAppExtensionPreview) ? {
+        source: HOST_SOURCE,
+        type: "appExtensions.replace",
+        shopId,
+        extensions: data.extensions
+      } : null;
+    default:
+      return null;
+  }
+}
+function parsePreviewSelection(data, shopId) {
+  if (!isRecord(data) || data.source !== PREVIEW_SOURCE || data.shopId !== shopId) return null;
+  if (data.type !== "section.select" || typeof data.sectionId !== "string") return null;
+  if (data.blockId !== void 0 && !isBlockId(data.blockId)) return null;
+  if (data.block !== void 0 && !isResolvedBlock(data.block)) return null;
+  if (data.block !== void 0 && data.blockId === void 0) return null;
+  if (data.section !== void 0 && !isResolvedSection(data.section)) return null;
+  if (data.sections !== void 0 && !isResolvedSectionArray(data.sections)) return null;
+  if (data.schema !== void 0 && !isSectionSchema(data.schema)) return null;
+  if (data.schemas !== void 0 && !isSectionSchemaRecord(data.schemas)) return null;
+  if (data.scope !== void 0 && !isSelectionScope(data.scope)) return null;
+  return {
+    source: PREVIEW_SOURCE,
+    type: "section.select",
+    shopId,
+    sectionId: data.sectionId,
+    ...data.blockId !== void 0 ? { blockId: data.blockId } : {},
+    ...data.block !== void 0 ? { block: data.block } : {},
+    ...data.scope !== void 0 ? { scope: data.scope } : {},
+    ...data.section !== void 0 ? { section: data.section } : {},
+    ...data.sections !== void 0 ? { sections: data.sections } : {},
+    ...data.schema !== void 0 ? { schema: data.schema } : {},
+    ...data.schemas !== void 0 ? { schemas: data.schemas } : {}
+  };
+}
+var SECTION_CANVAS_ACTIONS = /* @__PURE__ */ new Set([
+  "section.addBefore",
+  "section.addAfter",
+  "section.duplicate",
+  "section.toggleVisibility",
+  "section.moveUp",
+  "section.moveDown",
+  "section.remove"
+]);
+var BLOCK_CANVAS_ACTIONS = /* @__PURE__ */ new Set([
+  "block.duplicate",
+  "block.toggleVisibility",
+  "block.moveUp",
+  "block.moveDown",
+  "block.remove"
+]);
+function parsePreviewCanvasAction(data, shopId) {
+  if (!isRecord(data) || data.source !== PREVIEW_SOURCE || data.shopId !== shopId) return null;
+  if (data.type !== "editor.action" || typeof data.action !== "string" || typeof data.sectionId !== "string" || data.sectionId === "" || isReservedSectionId(data.sectionId)) {
+    return null;
+  }
+  if (data.scope !== void 0 && !isSelectionScope(data.scope)) return null;
+  if (SECTION_CANVAS_ACTIONS.has(data.action)) {
+    if (data.blockId !== void 0) return null;
+    return {
+      source: PREVIEW_SOURCE,
+      type: "editor.action",
+      shopId,
+      action: data.action,
+      sectionId: data.sectionId,
+      ...data.scope !== void 0 ? { scope: data.scope } : {}
+    };
+  }
+  if (BLOCK_CANVAS_ACTIONS.has(data.action) && isBlockId(data.blockId)) {
+    return {
+      source: PREVIEW_SOURCE,
+      type: "editor.action",
+      shopId,
+      action: data.action,
+      sectionId: data.sectionId,
+      blockId: data.blockId,
+      ...data.scope !== void 0 ? { scope: data.scope } : {}
+    };
+  }
+  return null;
+}
+function parsePreviewHover(data, shopId) {
+  if (!isRecord(data) || data.source !== PREVIEW_SOURCE || data.shopId !== shopId) return null;
+  if (data.type !== "section.hover") return null;
+  if (data.sectionId !== null && (typeof data.sectionId !== "string" || isReservedSectionId(data.sectionId))) {
+    return null;
+  }
+  return {
+    source: PREVIEW_SOURCE,
+    type: "section.hover",
+    shopId,
+    sectionId: data.sectionId
+  };
+}
+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.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;
+  if (data.themeStyles !== void 0 && !isThemeStyleArray(data.themeStyles)) return null;
+  const templates = data.templates === void 0 ? void 0 : validValuesDocuments(data.templates);
+  const sectionGroups = data.sectionGroups === void 0 ? void 0 : validValuesDocuments(data.sectionGroups);
+  return {
+    source: PREVIEW_SOURCE,
+    type: "editor.ready",
+    shopId,
+    sections: data.sections,
+    ...data.global !== void 0 ? { global: data.global } : {},
+    ...data.schemas !== void 0 ? { schemas: data.schemas } : {},
+    ...data.globalInputs !== void 0 ? { globalInputs: data.globalInputs } : {},
+    ...data.themeStyles !== void 0 ? { themeStyles: data.themeStyles } : {},
+    ...templates !== void 0 ? { templates } : {},
+    ...sectionGroups !== void 0 ? { sectionGroups } : {}
+  };
+}
+function postHostMessage(target, previewOrigin, message) {
+  target.postMessage(message, previewOrigin);
+}
+var EDITOR_AFFORDANCE_STYLE_ID = "kotao-storefront-editor-affordances";
+var EDITOR_CANVAS_ID = "kotao-storefront-editor-canvas";
+var EDITOR_AFFORDANCE_CSS = `
+html[data-kotao-editor="true"] [id^="shopify-section-"] {
+  cursor: pointer;
+  position: relative;
+}
+html[data-kotao-editor="true"] [id^="shopify-section-"][data-kotao-editor-hovered="true"] {
+  outline: 2px solid #2c6ecb !important;
+  outline-offset: -2px;
+}
+html[data-kotao-editor="true"] [id^="shopify-section-"][data-kotao-editor-selected="true"] {
+  outline: 2px solid #005bd3 !important;
+  outline-offset: -2px;
+}
+html[data-kotao-editor="true"] [id^="shopify-section-"][data-kotao-editor-hovered="true"]::before {
+  content: attr(data-kotao-editor-label);
+  position: absolute;
+  z-index: 2147483646;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  max-width: calc(100% - 16px);
+  padding: 5px 9px;
+  border-radius: 0 0 6px 0;
+  background: #005bd3;
+  color: #fff;
+  font: 600 12px/1.25 ui-sans-serif, system-ui, sans-serif;
+  letter-spacing: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+html[data-kotao-editor="true"] [data-kotao-editor-block-hovered="true"],
+html[data-kotao-editor="true"] [data-kotao-editor-block-selected="true"] {
+  position: relative;
+  outline: 2px solid #005bd3 !important;
+  outline-offset: -2px;
+}
+#${EDITOR_CANVAS_ID} {
+  position: fixed;
+  z-index: 2147483647;
+  display: none;
+  align-items: center;
+  max-width: calc(100vw - 16px);
+  height: 38px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, .22);
+  border-radius: 8px;
+  background: #202223;
+  color: #fff;
+  box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
+  font: 600 12px/1 ui-sans-serif, system-ui, sans-serif;
+  letter-spacing: 0;
+}
+#${EDITOR_CANVAS_ID}[data-visible="true"] { display: flex; }
+#${EDITOR_CANVAS_ID} [data-kotao-editor-canvas-label] {
+  min-width: 0;
+  max-width: 180px;
+  overflow: hidden;
+  padding: 0 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#${EDITOR_CANVAS_ID} [data-kotao-editor-canvas-actions] {
+  display: flex;
+  align-self: stretch;
+  border-inline-start: 1px solid rgba(255, 255, 255, .18);
+}
+#${EDITOR_CANVAS_ID} button {
+  display: inline-flex;
+  width: 36px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-inline-end: 1px solid rgba(255, 255, 255, .12);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: 600 14px/1 ui-sans-serif, system-ui, sans-serif;
+}
+#${EDITOR_CANVAS_ID} button:hover,
+#${EDITOR_CANVAS_ID} button:focus-visible {
+  outline: 0;
+  background: #3b82f6;
+}
+#${EDITOR_CANVAS_ID} button:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
+#${EDITOR_CANVAS_ID} button[data-destructive="true"]:hover,
+#${EDITOR_CANVAS_ID} button[data-destructive="true"]:focus-visible { background: #d72c0d; }
+#${EDITOR_CANVAS_ID} button:disabled { cursor: not-allowed; opacity: .38; }
+`;
+function positionStorefrontEditorCanvasToolbar(anchor, toolbar, viewport) {
+  const gap = 8;
+  const maxLeft = Math.max(gap, viewport.width - toolbar.width - gap);
+  const left = Math.min(Math.max(anchor.left, gap), maxLeft);
+  const placement = anchor.top >= toolbar.height + gap * 2 ? "above" : "below";
+  const requestedTop = placement === "above" ? anchor.top - toolbar.height - gap : anchor.bottom + gap;
+  const maxTop = Math.max(gap, viewport.height - toolbar.height - gap);
+  return {
+    left: Math.round(left),
+    top: Math.round(Math.min(Math.max(requestedTop, gap), maxTop)),
+    placement
+  };
+}
+function defaultEditorDocument() {
+  const candidate = globalThis.document;
+  if (!isRecord(candidate)) return void 0;
+  if (typeof candidate.addEventListener !== "function" || typeof candidate.removeEventListener !== "function" || typeof candidate.getElementById !== "function" || typeof candidate.createElement !== "function" || !isRecord(candidate.documentElement)) {
+    return void 0;
+  }
+  return candidate;
+}
+function appExtensionFrameDocument(extension) {
+  const assetOrigin = new URL(extension.entrypointUrl).origin;
+  const connectSources = extension.capabilities.includes("network:fetch") ? extension.allowedOrigins.join(" ") : "'none'";
+  const csp = [
+    "default-src 'none'",
+    `script-src ${assetOrigin}`,
+    `style-src ${assetOrigin}`,
+    `connect-src ${connectSources}`,
+    `img-src data: ${assetOrigin} ${extension.allowedOrigins.join(" ")}`.trim(),
+    `font-src ${assetOrigin}`
+  ].join("; ");
+  const styles = extension.stylesheetUrls.map((url) => `<link rel="stylesheet" href="${htmlAttribute(url)}">`).join("");
+  return [
+    '<!doctype html><html><head><meta charset="utf-8">',
+    `<meta http-equiv="Content-Security-Policy" content="${htmlAttribute(csp)}">`,
+    '<meta name="viewport" content="width=device-width,initial-scale=1">',
+    styles,
+    '</head><body><div id="kotao-app-root"></div>',
+    `<script type="module" src="${htmlAttribute(extension.entrypointUrl)}"></script>`,
+    "</body></html>"
+  ].join("");
+}
+function replaceAppExtensionPreviewFrames(editorDocument, extensions) {
+  if (editorDocument === void 0) return;
+  const document = editorDocument;
+  if (typeof document.querySelectorAll !== "function" || typeof document.createElement !== "function") {
+    return;
+  }
+  for (const element of document.querySelectorAll("[data-kotao-editor-app-extension]")) {
+    element.remove?.();
+  }
+  const sectionElements = () => [...document.querySelectorAll('[data-section-id], [id^="shopify-section-"]')].filter(
+    (element) => !element.hasAttribute("data-kotao-editor-app-extension")
+  );
+  const sectionById = (id) => sectionElements().find(
+    (element) => element.getAttribute("data-section-id") === id || element.id === `shopify-section-${id}`
+  ) ?? null;
+  for (const extension of extensions) {
+    if (extension.settings.disabled === true) continue;
+    const frame = document.createElement("iframe");
+    frame.dataset.kotaoAppExtension = extension.instanceId;
+    frame.dataset.kotaoAppId = extension.appId;
+    frame.title = `${extension.appName} \u2014 ${extension.extensionName}`;
+    frame.setAttribute("sandbox", "allow-scripts");
+    frame.setAttribute("referrerpolicy", "no-referrer");
+    frame.loading = "lazy";
+    frame.name = JSON.stringify({
+      instanceId: extension.instanceId,
+      appId: extension.appId,
+      extensionId: extension.extensionId,
+      version: extension.version,
+      capabilities: extension.capabilities,
+      allowedOrigins: extension.allowedOrigins,
+      settings: extension.settings,
+      context: extension.capabilities.includes("storefront:context:read") ? {
+        templateHandle: extension.templateHandle ?? extension.target?.handle ?? null,
+        sectionInstanceId: extension.sectionInstanceId ?? null
+      } : null
+    });
+    frame.srcdoc = appExtensionFrameDocument(extension);
+    if (extension.kind === "app_embed") {
+      frame.setAttribute("data-kotao-editor-app-extension", "true");
+      frame.hidden = true;
+      const parent = extension.embedLocation === "head" ? document.head : document.body;
+      if (extension.embedLocation === "body_start") parent.prepend(frame);
+      else parent.append(frame);
+      continue;
+    }
+    frame.style.cssText = "display:block;width:100%;min-height:1px;border:0";
+    if (extension.kind === "app_block") {
+      const section = sectionById(extension.sectionInstanceId ?? "");
+      if (section === null) continue;
+      frame.setAttribute("data-kotao-editor-app-extension", "true");
+      frame.setAttribute("data-block-id", extension.instanceId);
+      section.append(frame);
+      continue;
+    }
+    const wrapper = document.createElement("div");
+    wrapper.id = `shopify-section-${extension.instanceId}`;
+    wrapper.setAttribute("data-section-id", extension.instanceId);
+    wrapper.setAttribute("data-kotao-editor-app-extension", "true");
+    wrapper.append(frame);
+    if (extension.target?.kind === "section_group") {
+      const group = [...document.querySelectorAll("[data-section-group]")].find(
+        (element) => element.getAttribute("data-section-group") === extension.target?.handle
+      );
+      if (group !== void 0) group.append(wrapper);
+      else if (extension.target.handle.includes("header")) document.body.prepend(wrapper);
+      else document.body.append(wrapper);
+      continue;
+    }
+    const sections = sectionElements();
+    const target = sections[Math.min(extension.position, sections.length - 1)];
+    if (target !== void 0 && extension.position < sections.length) target.before(wrapper);
+    else (document.querySelector("main") ?? document.body).append(wrapper);
+  }
+}
+function sectionElementFromTarget(target) {
+  if (!isRecord(target) || typeof target.closest !== "function") return null;
+  const element = target.closest('[id^="shopify-section-"]');
+  if (!isRecord(element) || typeof element.id !== "string") return null;
+  if (!element.id.startsWith("shopify-section-")) return null;
+  return element;
+}
+function blockElementFromTarget(target) {
+  if (!isRecord(target) || typeof target.closest !== "function") return null;
+  const element = target.closest(
+    '[data-block-id], [data-shopify-editor-block], [id^="shopify-block-"]'
+  );
+  if (!isRecord(element) || typeof element.id !== "string") return null;
+  return element;
+}
+function blockIdForElement(element) {
+  const direct = element.getAttribute?.("data-block-id");
+  if (direct) return direct;
+  const serialized = element.getAttribute?.("data-shopify-editor-block");
+  if (serialized) {
+    try {
+      const value = JSON.parse(serialized);
+      if (isRecord(value) && isBlockId(value.id)) return value.id;
+    } catch {
+    }
+  }
+  return element.id.startsWith("shopify-block-") ? element.id.slice("shopify-block-".length) : null;
+}
+function findBlockElement(document, blockId) {
+  const candidates = document.querySelectorAll?.(
+    '[data-block-id], [data-shopify-editor-block], [id^="shopify-block-"]'
+  );
+  return candidates?.find((element) => blockIdForElement(element) === blockId) ?? null;
+}
+function htmlAttribute(value) {
+  return value.replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;");
+}
+var SECTION_CANVAS_BUTTONS = [
+  { action: "section.addBefore", label: "Add section above", glyph: "+\u2191" },
+  { action: "section.moveUp", label: "Move section up", glyph: "\u2191" },
+  { action: "section.moveDown", label: "Move section down", glyph: "\u2193" },
+  { action: "section.duplicate", label: "Duplicate section", glyph: "\u29C9" },
+  { action: "section.toggleVisibility", label: "Hide or show section", glyph: "\u25C9" },
+  { action: "section.remove", label: "Delete section", glyph: "\u232B", destructive: true },
+  { action: "section.addAfter", label: "Add section below", glyph: "+\u2193" }
+];
+var BLOCK_CANVAS_BUTTONS = [
+  { action: "block.moveUp", label: "Move block up", glyph: "\u2191" },
+  { action: "block.moveDown", label: "Move block down", glyph: "\u2193" },
+  { action: "block.duplicate", label: "Duplicate block", glyph: "\u29C9" },
+  { action: "block.toggleVisibility", label: "Hide or show block", glyph: "\u25C9" },
+  { action: "block.remove", label: "Delete block", glyph: "\u232B", destructive: true }
+];
+function canvasToolbarHtml(label, block, state) {
+  const buttons = block ? BLOCK_CANVAS_BUTTONS : SECTION_CANVAS_BUTTONS;
+  return `<span data-kotao-editor-canvas-label>${htmlAttribute(label)}</span><span data-kotao-editor-canvas-actions>${buttons.map(({ action, destructive, glyph, label: staticLabel }) => {
+    const actionLabel = action.endsWith("toggleVisibility") ? `${state.hidden ? "Show" : "Hide"} ${block ? "block" : "section"}` : staticLabel;
+    const disabled = action.endsWith("moveUp") && !state.canMoveUp || action.endsWith("moveDown") && !state.canMoveDown || action.endsWith("duplicate") && !state.canDuplicate || action.startsWith("section.add") && !state.canAddSection;
+    return `<button type="button" data-kotao-editor-action="${action}"${destructive ? ' data-destructive="true"' : ""}${disabled ? " disabled" : ""} aria-label="${htmlAttribute(actionLabel)}" title="${htmlAttribute(actionLabel)}">${glyph}</button>`;
+  }).join("")}</span>`;
+}
+function createEditorAffordances({
+  document,
+  labelForBlock,
+  labelForSection,
+  onCanvasAction,
+  onHoverSection,
+  onSelect,
+  stateForSelection
+}) {
+  let hoveredElement = null;
+  let hoveredBlockElement = null;
+  let selectedElement = null;
+  let selectedBlockElement = null;
+  let selectedSectionId = null;
+  let selectedBlockId = null;
+  let ownedStyle = null;
+  let ownedToolbar = null;
+  const setElementState = (kind, sectionId) => {
+    const previous = kind === "hovered" ? hoveredElement : selectedElement;
+    previous?.removeAttribute(`data-kotao-editor-${kind}`);
+    if (sectionId === null) return null;
+    const element = document.getElementById(`shopify-section-${sectionId}`);
+    if (element === null || !("setAttribute" in element)) return null;
+    const sectionElement = element;
+    sectionElement.setAttribute(`data-kotao-editor-${kind}`, "true");
+    sectionElement.setAttribute("data-kotao-editor-label", labelForSection(sectionId));
+    return sectionElement;
+  };
+  const setHovered = (sectionId) => {
+    hoveredElement = setElementState("hovered", sectionId);
+  };
+  const positionToolbar = () => {
+    const anchor = selectedBlockElement ?? selectedElement;
+    const anchorRect = anchor?.getBoundingClientRect?.();
+    if (ownedToolbar === null || anchorRect === void 0) return;
+    const toolbarRect = ownedToolbar.getBoundingClientRect?.() ?? {
+      width: 420,
+      height: 38
+    };
+    const position = positionStorefrontEditorCanvasToolbar(anchorRect, toolbarRect, {
+      width: document.defaultView?.innerWidth ?? 1024,
+      height: document.defaultView?.innerHeight ?? 768
+    });
+    ownedToolbar.setAttribute("style", `left:${position.left}px;top:${position.top}px`);
+    ownedToolbar.setAttribute("data-placement", position.placement);
+  };
+  const renderToolbar = () => {
+    if (ownedToolbar === null) return;
+    if (selectedSectionId === null) {
+      ownedToolbar.removeAttribute("data-visible");
+      return;
+    }
+    const isBlock = selectedBlockId !== null;
+    if (selectedBlockId !== null) {
+      ownedToolbar.innerHTML = canvasToolbarHtml(
+        labelForBlock(selectedSectionId, selectedBlockId),
+        true,
+        stateForSelection(selectedSectionId, selectedBlockId)
+      );
+    } else {
+      ownedToolbar.innerHTML = canvasToolbarHtml(
+        labelForSection(selectedSectionId),
+        false,
+        stateForSelection(selectedSectionId)
+      );
+    }
+    ownedToolbar.setAttribute("data-visible", "true");
+    ownedToolbar.setAttribute("aria-label", isBlock ? "Block actions" : "Section actions");
+    positionToolbar();
+  };
+  const setSelected = (sectionId, blockId) => {
+    selectedBlockElement?.removeAttribute("data-kotao-editor-block-selected");
+    selectedBlockElement = null;
+    selectedBlockId = blockId ?? null;
+    selectedSectionId = sectionId;
+    selectedElement = setElementState("selected", sectionId);
+    if (sectionId !== null && blockId !== void 0) {
+      selectedBlockElement = findBlockElement(document, blockId);
+      selectedBlockElement?.setAttribute("data-kotao-editor-block-selected", "true");
+      selectedBlockElement?.setAttribute(
+        "data-kotao-editor-label",
+        labelForBlock(sectionId, blockId)
+      );
+    }
+    renderToolbar();
+  };
+  const onPointerOver = (event) => {
+    const element = sectionElementFromTarget(event.target);
+    if (element === null) return;
+    const sectionId = element.id.slice("shopify-section-".length);
+    if (sectionId === "" || isReservedSectionId(sectionId)) return;
+    const nextBlockElement = blockElementFromTarget(event.target);
+    if (element === hoveredElement && nextBlockElement === hoveredBlockElement) return;
+    hoveredBlockElement?.removeAttribute("data-kotao-editor-block-hovered");
+    hoveredBlockElement = nextBlockElement;
+    const blockId = hoveredBlockElement ? blockIdForElement(hoveredBlockElement) : null;
+    if (hoveredBlockElement !== null && blockId !== null) {
+      hoveredBlockElement.setAttribute("data-kotao-editor-block-hovered", "true");
+      hoveredBlockElement.setAttribute("data-kotao-editor-label", labelForBlock(sectionId, blockId));
+    }
+    if (element !== hoveredElement) {
+      setHovered(sectionId);
+      onHoverSection(sectionId);
+    }
+  };
+  const onPointerOut = (event) => {
+    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);
+    onHoverSection(null);
+  };
+  const onClick = (event) => {
+    if (isRecord(event.target) && typeof event.target.closest === "function") {
+      const canvas = event.target.closest(`#${EDITOR_CANVAS_ID}`);
+      if (canvas !== null) return;
+    }
+    const section = sectionElementFromTarget(event.target);
+    if (section === null) return;
+    const sectionId = section.id.slice("shopify-section-".length);
+    if (sectionId === "" || isReservedSectionId(sectionId)) return;
+    const block = blockElementFromTarget(event.target);
+    const blockId = block === null ? null : blockIdForElement(block);
+    setSelected(sectionId, blockId ?? void 0);
+    onSelect(sectionId, blockId ?? void 0);
+  };
+  const onToolbarClick = (event) => {
+    if (!isRecord(event.target) || typeof event.target.closest !== "function") return;
+    const button = event.target.closest("[data-kotao-editor-action]");
+    if (!isRecord(button) || typeof button.getAttribute !== "function") return;
+    const action = button.getAttribute("data-kotao-editor-action");
+    if (typeof action !== "string" || selectedSectionId === null) return;
+    event.preventDefault?.();
+    event.stopPropagation?.();
+    if (SECTION_CANVAS_ACTIONS.has(action)) {
+      onCanvasAction({
+        action,
+        sectionId: selectedSectionId
+      });
+      return;
+    }
+    if (selectedBlockId !== null && BLOCK_CANVAS_ACTIONS.has(action)) {
+      onCanvasAction({
+        action,
+        sectionId: selectedSectionId,
+        blockId: selectedBlockId
+      });
+    }
+  };
+  document.documentElement.setAttribute("data-kotao-editor", "true");
+  if (document.getElementById(EDITOR_AFFORDANCE_STYLE_ID) === null && document.head !== void 0) {
+    ownedStyle = document.createElement("style");
+    ownedStyle.id = EDITOR_AFFORDANCE_STYLE_ID;
+    ownedStyle.textContent = EDITOR_AFFORDANCE_CSS;
+    document.head.appendChild(ownedStyle);
+  }
+  if (document.body !== void 0) {
+    ownedToolbar = document.createElement("div");
+    ownedToolbar.id = EDITOR_CANVAS_ID;
+    ownedToolbar.setAttribute("role", "toolbar");
+    ownedToolbar.setAttribute("data-kotao-editor-canvas", "true");
+    ownedToolbar.addEventListener?.("click", onToolbarClick);
+    document.body.appendChild(ownedToolbar);
+  }
+  document.addEventListener("pointerover", onPointerOver, true);
+  document.addEventListener("pointerout", onPointerOut, true);
+  document.addEventListener("click", onClick, true);
+  document.defaultView?.addEventListener?.("scroll", positionToolbar, true);
+  document.defaultView?.addEventListener?.("resize", positionToolbar);
+  return {
+    setHovered,
+    setSelected,
+    dispose() {
+      setHovered(null);
+      setSelected(null);
+      document.documentElement.removeAttribute("data-kotao-editor");
+      document.removeEventListener("pointerover", onPointerOver, true);
+      document.removeEventListener("pointerout", onPointerOut, true);
+      document.removeEventListener("click", onClick, true);
+      document.defaultView?.removeEventListener?.("scroll", positionToolbar, true);
+      document.defaultView?.removeEventListener?.("resize", positionToolbar);
+      ownedToolbar?.removeEventListener?.("click", onToolbarClick);
+      ownedToolbar?.remove?.();
+      ownedStyle?.remove();
+    }
+  };
+}
+function createStorefrontEditorBridge({
+  adminOrigin,
+  document: editorDocument,
+  globalInputs,
+  themeStyles,
+  schemas,
+  sectionGroups,
+  shopId,
+  store,
+  target,
+  templates,
+  transport
+}) {
+  const postHoverSection = (sectionId) => {
+    if (sectionId !== null && isReservedSectionId(sectionId)) return;
+    const message = {
+      source: PREVIEW_SOURCE,
+      type: "section.hover",
+      shopId,
+      sectionId
+    };
+    target.postMessage(message, adminOrigin);
+  };
+  const labelForSection = (sectionId) => {
+    const snapshot = store.getSnapshot();
+    const documents = [
+      snapshot.sections,
+      ...Object.values(snapshot.sectionGroups ?? {}).flatMap(
+        (document) => document === void 0 ? [] : [document.sections]
+      ),
+      ...Object.values(snapshot.templates ?? {}).flatMap(
+        (document) => document === void 0 ? [] : [document.sections]
+      )
+    ];
+    const section = documents.flatMap((document) => document).find((candidate) => candidate.id === sectionId);
+    return section === void 0 ? sectionId : schemas?.[section.type]?.label ?? section.type;
+  };
+  const labelForBlock = (sectionId, blockId) => {
+    const snapshot = store.getSnapshot();
+    const documents = [
+      snapshot.sections,
+      ...Object.values(snapshot.sectionGroups ?? {}).flatMap(
+        (document) => document === void 0 ? [] : [document.sections]
+      ),
+      ...Object.values(snapshot.templates ?? {}).flatMap(
+        (document) => document === void 0 ? [] : [document.sections]
+      )
+    ];
+    const section = documents.flatMap((document) => document).find((candidate) => candidate.id === sectionId);
+    const block = section?.blocks.find((candidate) => candidate.id === blockId);
+    const schema = section === void 0 ? void 0 : schemas?.[section.type];
+    return block === void 0 ? blockId : schema?.blocks?.find((candidate) => candidate.type === block.type)?.label ?? block.type;
+  };
+  const stateForSelection = (sectionId, blockId) => {
+    const snapshot = store.getSnapshot();
+    const documents = [
+      snapshot.sections,
+      ...Object.values(snapshot.sectionGroups ?? {}).flatMap(
+        (document) => document === void 0 ? [] : [document.sections]
+      ),
+      ...Object.values(snapshot.templates ?? {}).flatMap(
+        (document) => document === void 0 ? [] : [document.sections]
+      )
+    ];
+    const sections = documents.find(
+      (document) => document.some((candidate) => candidate.id === sectionId)
+    );
+    const sectionIndex = sections?.findIndex((candidate) => candidate.id === sectionId) ?? -1;
+    const section = sectionIndex === -1 ? void 0 : sections?.[sectionIndex];
+    const canAddSection = Object.values(schemas ?? {}).some(
+      (schema) => (schema.presets?.length ?? 0) > 0
+    );
+    if (blockId === void 0) {
+      return {
+        canAddSection,
+        canDuplicate: section !== void 0,
+        canMoveDown: sections !== void 0 && sectionIndex < sections.length - 1,
+        canMoveUp: sectionIndex > 0,
+        hidden: section?.settings.disabled === true
+      };
+    }
+    const blockIndex = section?.blocks.findIndex((candidate) => candidate.id === blockId) ?? -1;
+    const block = blockIndex === -1 ? void 0 : section?.blocks[blockIndex];
+    const sectionSchema = section === void 0 ? void 0 : schemas?.[section.type];
+    const blockSchema = block ? sectionSchema?.blocks?.find((candidate) => candidate.type === block.type) : void 0;
+    const underSectionLimit = section !== void 0 && (sectionSchema?.maxBlocks === void 0 || section.blocks.length < sectionSchema.maxBlocks);
+    const underBlockLimit = block !== void 0 && (blockSchema?.limit === void 0 || (section?.blocks.filter((candidate) => candidate.type === block.type).length ?? 0) < blockSchema.limit);
+    return {
+      canAddSection,
+      canDuplicate: sectionSchema !== void 0 && blockSchema !== void 0 && underSectionLimit && underBlockLimit,
+      canMoveDown: section !== void 0 && blockIndex !== -1 && blockIndex < section.blocks.length - 1,
+      canMoveUp: blockIndex > 0,
+      hidden: block?.settings.disabled === true
+    };
+  };
+  const postSelection = (sectionId, blockId) => {
+    if (isReservedSectionId(sectionId)) return;
+    const snapshot = store.getSnapshot();
+    let sections = snapshot.sections;
+    let section = sections.find((candidate) => candidate.id === sectionId);
+    let scope;
+    if (section === void 0) {
+      for (const [handle, document] of Object.entries(snapshot.sectionGroups ?? {})) {
+        const candidate = document?.sections.find((item) => item.id === sectionId);
+        if (candidate === void 0) continue;
+        section = candidate;
+        sections = document.sections;
+        scope = { kind: "sectionGroup", handle };
+        break;
+      }
+    }
+    if (section === void 0) {
+      for (const [handle, document] of Object.entries(snapshot.templates ?? {})) {
+        const candidate = document?.sections.find((item) => item.id === sectionId);
+        if (candidate === void 0) continue;
+        section = candidate;
+        sections = document.sections;
+        scope = { kind: "template", handle };
+        break;
+      }
+    }
+    const block = blockId === void 0 ? void 0 : section?.blocks.find((item) => item.id === blockId);
+    if (blockId !== void 0 && block === void 0) return;
+    const schema = section !== void 0 ? schemas?.[section.type] : void 0;
+    const message = {
+      source: PREVIEW_SOURCE,
+      type: "section.select",
+      shopId,
+      sectionId,
+      ...blockId !== void 0 ? { blockId } : {},
+      ...block !== void 0 ? { block } : {},
+      ...scope !== void 0 ? { scope } : {},
+      ...section !== void 0 ? { section } : {},
+      sections,
+      ...schema !== void 0 ? { schema } : {},
+      ...schemas !== void 0 ? { schemas } : {}
+    };
+    target.postMessage(message, adminOrigin);
+  };
+  const postCanvasAction = (action) => {
+    const message = {
+      source: PREVIEW_SOURCE,
+      type: "editor.action",
+      shopId,
+      ...action
+    };
+    target.postMessage(message, adminOrigin);
+  };
+  const resolvedDocument = editorDocument ?? defaultEditorDocument();
+  const affordances = resolvedDocument === void 0 ? null : createEditorAffordances({
+    document: resolvedDocument,
+    labelForBlock,
+    labelForSection,
+    onCanvasAction: postCanvasAction,
+    onHoverSection: postHoverSection,
+    onSelect: postSelection,
+    stateForSelection
+  });
+  const postReady = () => {
+    const snapshot = store.getSnapshot();
+    const message = {
+      source: PREVIEW_SOURCE,
+      type: "editor.ready",
+      shopId,
+      sections: snapshot.sections,
+      global: snapshot.global,
+      ...schemas !== void 0 ? { schemas } : {},
+      ...globalInputs !== void 0 ? { globalInputs } : {},
+      ...themeStyles !== void 0 ? { themeStyles } : {},
+      ...templates !== void 0 ? { templates } : {},
+      ...sectionGroups !== void 0 ? { sectionGroups } : {}
+    };
+    target.postMessage(message, adminOrigin);
+  };
+  const onMessage = (event) => {
+    if (event.origin !== adminOrigin) return;
+    if (event.source !== void 0 && event.source !== null && event.source !== target) return;
+    const message = parseHostMessage(event.data, shopId);
+    if (message === null) return;
+    switch (message.type) {
+      case "editor.ready.request":
+        postReady();
+        break;
+      case "section.hover":
+        affordances?.setHovered(message.sectionId);
+        break;
+      case "section.activate":
+        affordances?.setSelected(message.sectionId, message.blockId);
+        break;
+      case "settings.patchSection":
+        store.patchSection(message.sectionId, message.settings);
+        break;
+      case "settings.patchGlobal":
+        store.patchGlobal(message.settings);
+        break;
+      case "sections.insert":
+        store.insertSection(message.section, message.index);
+        break;
+      case "sections.remove":
+        store.removeSection(message.sectionId);
+        break;
+      case "sections.reorder":
+        store.moveSection(message.sectionId, message.index);
+        break;
+      case "settings.patchBlock":
+        store.patchBlock(message.sectionId, message.blockId, message.settings);
+        break;
+      case "blocks.insert":
+        store.insertBlock(message.sectionId, message.block, message.index);
+        break;
+      case "blocks.remove":
+        store.removeBlock(message.sectionId, message.blockId);
+        break;
+      case "blocks.reorder":
+        store.moveBlock(message.sectionId, message.blockId, message.index);
+        break;
+      case "template.replace":
+        store.replaceSections(message.document.sections);
+        break;
+      case "sectionGroup.replace":
+        store.replaceSectionGroup(message.handle, message.document);
+        break;
+      case "appExtensions.replace":
+        replaceAppExtensionPreviewFrames(resolvedDocument, message.extensions);
+        break;
+    }
+  };
+  transport.addEventListener("message", onMessage);
+  return {
+    ready: postReady,
+    hoverSection: (sectionId) => {
+      if (sectionId !== null && isReservedSectionId(sectionId)) return;
+      affordances?.setHovered(sectionId);
+      postHoverSection(sectionId);
+    },
+    selectSection: (sectionId) => {
+      if (isReservedSectionId(sectionId)) return;
+      affordances?.setSelected(sectionId);
+      postSelection(sectionId);
+    },
+    selectBlock: (sectionId, blockId) => {
+      if (isReservedSectionId(sectionId) || !isBlockId(blockId)) return;
+      affordances?.setSelected(sectionId, blockId);
+      postSelection(sectionId, blockId);
+    },
+    dispose: () => {
+      replaceAppExtensionPreviewFrames(resolvedDocument, []);
+      affordances?.dispose();
+      transport.removeEventListener("message", onMessage);
+    }
+  };
+}
+function createStorefrontEditorHostBridge({
+  onCanvasAction,
+  onHoverSection,
+  onReady,
+  onSelectSection,
+  previewOrigin,
+  resolveTarget,
+  shopId,
+  target,
+  transport
+}) {
+  const currentTarget = () => resolveTarget?.() ?? target;
+  const onMessage = (event) => {
+    if (event.origin !== previewOrigin) return;
+    if (event.source !== void 0 && event.source !== null && event.source !== currentTarget())
+      return;
+    const ready = parsePreviewReady(event.data, shopId);
+    if (ready !== null) {
+      onReady?.({
+        sections: ready.sections,
+        ...ready.global !== void 0 ? { global: ready.global } : {},
+        ...ready.schemas !== void 0 ? { schemas: ready.schemas } : {},
+        ...ready.globalInputs !== void 0 ? { globalInputs: ready.globalInputs } : {},
+        ...ready.themeStyles !== void 0 ? { themeStyles: ready.themeStyles } : {},
+        ...ready.templates !== void 0 ? { templates: ready.templates } : {},
+        ...ready.sectionGroups !== void 0 ? { sectionGroups: ready.sectionGroups } : {}
+      });
+      return;
+    }
+    const hover = parsePreviewHover(event.data, shopId);
+    if (hover !== null) {
+      onHoverSection?.(hover.sectionId);
+      return;
+    }
+    const canvasAction = parsePreviewCanvasAction(event.data, shopId);
+    if (canvasAction !== null) {
+      onCanvasAction?.(
+        canvasAction.blockId === void 0 ? {
+          action: canvasAction.action,
+          sectionId: canvasAction.sectionId,
+          ...canvasAction.scope !== void 0 ? { scope: canvasAction.scope } : {}
+        } : {
+          action: canvasAction.action,
+          sectionId: canvasAction.sectionId,
+          blockId: canvasAction.blockId,
+          ...canvasAction.scope !== void 0 ? { scope: canvasAction.scope } : {}
+        }
+      );
+      return;
+    }
+    const message = parsePreviewSelection(event.data, shopId);
+    if (message === null || isReservedSectionId(message.sectionId)) return;
+    onSelectSection({
+      sectionId: message.sectionId,
+      ...message.blockId !== void 0 ? { blockId: message.blockId } : {},
+      ...message.block !== void 0 ? { block: message.block } : {},
+      ...message.scope !== void 0 ? { scope: message.scope } : {},
+      ...message.section !== void 0 ? { section: message.section } : {},
+      ...message.sections !== void 0 ? { sections: message.sections } : {},
+      ...message.schema !== void 0 ? { schema: message.schema } : {},
+      ...message.schemas !== void 0 ? { schemas: message.schemas } : {}
+    });
+  };
+  transport.addEventListener("message", onMessage);
+  return {
+    requestReady: () => {
+      postHostMessage(currentTarget(), previewOrigin, {
+        source: HOST_SOURCE,
+        type: "editor.ready.request",
+        shopId
+      });
+    },
+    hoverSection: (sectionId) => {
+      if (sectionId !== null && isReservedSectionId(sectionId)) return;
+      postHostMessage(currentTarget(), previewOrigin, {
+        source: HOST_SOURCE,
+        type: "section.hover",
+        shopId,
+        sectionId
+      });
+    },
+    activateSection: (sectionId, blockId) => {
+      if (sectionId !== null && isReservedSectionId(sectionId)) return;
+      if (blockId !== void 0 && !isBlockId(blockId)) return;
+      postHostMessage(currentTarget(), previewOrigin, {
+        source: HOST_SOURCE,
+        type: "section.activate",
+        shopId,
+        sectionId,
+        ...blockId !== void 0 ? { blockId } : {}
+      });
+    },
+    patchSection: (sectionId, settings) => {
+      if (isReservedSectionId(sectionId)) return;
+      postHostMessage(currentTarget(), previewOrigin, {
+        source: HOST_SOURCE,
+        type: "settings.patchSection",
+        shopId,
+        sectionId,
+        settings
+      });
+    },
+    patchGlobal: (settings) => {
+      postHostMessage(currentTarget(), previewOrigin, {
+        source: HOST_SOURCE,
+        type: "settings.patchGlobal",
+        shopId,
+        settings
+      });
+    },
+    insertSection: (section, index) => {
+      if (isReservedSectionId(section.id)) return;
+      postHostMessage(currentTarget(), previewOrigin, {
+        source: HOST_SOURCE,
+        type: "sections.insert",
+        shopId,
+        section,
+        ...index !== void 0 ? { index } : {}
+      });
+    },
+    removeSection: (sectionId) => {
+      if (isReservedSectionId(sectionId)) return;
+      postHostMessage(currentTarget(), previewOrigin, {
+        source: HOST_SOURCE,
+        type: "sections.remove",
+        shopId,
+        sectionId
+      });
+    },
+    reorderSection: (sectionId, index) => {
+      if (isReservedSectionId(sectionId)) return;
+      postHostMessage(currentTarget(), previewOrigin, {
+        source: HOST_SOURCE,
+        type: "sections.reorder",
+        shopId,
+        sectionId,
+        index
+      });
+    },
+    patchBlock: (sectionId, blockId, settings) => {
+      if (isReservedSectionId(sectionId)) return;
+      postHostMessage(currentTarget(), previewOrigin, {
+        source: HOST_SOURCE,
+        type: "settings.patchBlock",
+        shopId,
+        sectionId,
+        blockId,
+        settings
+      });
+    },
+    insertBlock: (sectionId, block, index) => {
+      if (isReservedSectionId(sectionId)) return;
+      postHostMessage(currentTarget(), previewOrigin, {
+        source: HOST_SOURCE,
+        type: "blocks.insert",
+        shopId,
+        sectionId,
+        block,
+        ...index !== void 0 ? { index } : {}
+      });
+    },
+    removeBlock: (sectionId, blockId) => {
+      if (isReservedSectionId(sectionId)) return;
+      postHostMessage(currentTarget(), previewOrigin, {
+        source: HOST_SOURCE,
+        type: "blocks.remove",
+        shopId,
+        sectionId,
+        blockId
+      });
+    },
+    reorderBlock: (sectionId, blockId, index) => {
+      if (isReservedSectionId(sectionId)) return;
+      postHostMessage(currentTarget(), previewOrigin, {
+        source: HOST_SOURCE,
+        type: "blocks.reorder",
+        shopId,
+        sectionId,
+        blockId,
+        index
+      });
+    },
+    replaceTemplate: (handle, document) => {
+      postHostMessage(currentTarget(), previewOrigin, {
+        source: HOST_SOURCE,
+        type: "template.replace",
+        shopId,
+        handle,
+        document
+      });
+    },
+    replaceSectionGroup: (handle, document) => {
+      if (handle.trim() === "") return;
+      postHostMessage(currentTarget(), previewOrigin, {
+        source: HOST_SOURCE,
+        type: "sectionGroup.replace",
+        shopId,
+        handle,
+        document
+      });
+    },
+    replaceAppExtensions: (extensions) => {
+      postHostMessage(currentTarget(), previewOrigin, {
+        source: HOST_SOURCE,
+        type: "appExtensions.replace",
+        shopId,
+        extensions
+      });
+    },
+    dispose: () => {
+      transport.removeEventListener("message", onMessage);
+    }
+  };
+}
+
+// src/editor/custom-css.ts
+var STOREFRONT_SECTION_CUSTOM_CSS_SETTING = "__kotaoCustomCss";
+var CSS_GROUP_AT_RULE = /^@(?:media|supports|container|layer|scope)\b/iu;
+function rawCss(value) {
+  const css = Array.isArray(value) ? value.filter((entry) => typeof entry === "string").join("\n") : typeof value === "string" ? value : "";
+  return css.replace(/\/\*[\s\S]*?\*\//gu, "").replace(/<\/style/giu, "").trim();
+}
+function splitTopLevelSelectors(selectorList) {
+  const selectors = [];
+  let parentheses = 0;
+  let brackets = 0;
+  let quote = null;
+  let current = "";
+  for (let index = 0; index < selectorList.length; index += 1) {
+    const character = selectorList[index] ?? "";
+    if (quote !== null) {
+      current += character;
+      if (character === "\\") {
+        current += selectorList[index + 1] ?? "";
+        index += 1;
+      } else if (character === quote) quote = null;
+      continue;
+    }
+    if (character === '"' || character === "'") quote = character;
+    else if (character === "(") parentheses += 1;
+    else if (character === ")") parentheses = Math.max(0, parentheses - 1);
+    else if (character === "[") brackets += 1;
+    else if (character === "]") brackets = Math.max(0, brackets - 1);
+    if (character === "," && parentheses === 0 && brackets === 0) {
+      selectors.push(current);
+      current = "";
+    } else current += character;
+  }
+  selectors.push(current);
+  return selectors;
+}
+function splitTopLevelRules(css) {
+  const rules = [];
+  let prelude = "";
+  let quote = null;
+  for (let index = 0; index < css.length; index += 1) {
+    const character = css[index] ?? "";
+    if (quote !== null) {
+      prelude += character;
+      if (character === "\\") {
+        prelude += css[index + 1] ?? "";
+        index += 1;
+      } else if (character === quote) quote = null;
+      continue;
+    }
+    if (character === '"' || character === "'") {
+      quote = character;
+      prelude += character;
+      continue;
+    }
+    if (character === "{") {
+      let depth = 1;
+      let body = "";
+      let bodyQuote = null;
+      index += 1;
+      for (; index < css.length; index += 1) {
+        const nested = css[index] ?? "";
+        if (bodyQuote !== null) {
+          body += nested;
+          if (nested === "\\") {
+            body += css[index + 1] ?? "";
+            index += 1;
+          } else if (nested === bodyQuote) bodyQuote = null;
+          continue;
+        }
+        if (nested === '"' || nested === "'") {
+          bodyQuote = nested;
+          body += nested;
+        } else if (nested === "{") {
+          depth += 1;
+          body += nested;
+        } else if (nested === "}") {
+          depth -= 1;
+          if (depth === 0) break;
+          body += nested;
+        } else body += nested;
+      }
+      rules.push({ prelude: prelude.trim(), body });
+      prelude = "";
+    } else if (character === ";") {
+      if (prelude.trim() !== "") rules.push({ prelude: prelude.trim(), body: null });
+      prelude = "";
+    } else prelude += character;
+  }
+  if (prelude.trim() !== "") rules.push({ prelude: prelude.trim(), body: null });
+  return rules;
+}
+function scopeRules(css, scope) {
+  return splitTopLevelRules(css).map(({ prelude, body }) => {
+    if (body === null) return `${prelude};`;
+    if (prelude.startsWith("@")) {
+      return CSS_GROUP_AT_RULE.test(prelude) ? `${prelude} {
+${scopeRules(body, scope)}
+}` : `${prelude} {${body}}`;
+    }
+    const selectors = splitTopLevelSelectors(prelude).map((selector) => selector.trim()).filter(Boolean).map(
+      (selector) => selector.includes("&") ? selector.replaceAll("&", scope) : `${scope} ${selector}`
+    ).join(", ");
+    return selectors === "" ? "" : `${selectors} {${body}}`;
+  }).filter(Boolean).join("\n");
+}
+function scopeStorefrontSectionCss(value, sectionId) {
+  const css = rawCss(value);
+  return css === "" ? "" : scopeRules(css, `#shopify-section-${sectionId}`).trim();
+}
+
+export { STOREFRONT_SECTION_CUSTOM_CSS_SETTING, createStorefrontEditorBridge, createStorefrontEditorHostBridge, positionStorefrontEditorCanvasToolbar, scopeStorefrontSectionCss };
+//# sourceMappingURL=chunk-O6YZEY7X.js.map
+//# sourceMappingURL=chunk-O6YZEY7X.js.map