@withpotter/components 0.13.0-next.101

package/dist/storefront-preview/storefront-preview.js

@@ -0,0 +1,380 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { motion, useReducedMotion } from "motion/react";
+import { springs } from "@withpotter/lib/motion";
+import { Monitor, RefreshCw, Smartphone, Tablet } from "lucide-react";
+import {
+  triggerPreviewRefresh,
+  usePreviewRefreshSignal
+} from "./preview-refresh";
+import { CanvasBanner } from "@withpotter/components/template-editor/canvas-banner";
+import { Button } from "@withpotter/ui-kit/button";
+import { normalizeStorefrontDomain } from "@withpotter/lib/storefront";
+import { readPublicConfig } from "@withpotter/lib/runtime-config";
+const PREVIEW_SESSION_KEY_PREFIX = "pb:storefront-preview:session-link";
+const DESKTOP_PREVIEW_MIN_WIDTH = 1024;
+const DESKTOP_PREVIEW_MAX_WIDTH = 1440;
+const DESKTOP_PREVIEW_TARGET_SCALE = 0.72;
+const WEB_URL = process.env.NEXT_PUBLIC_WEB_URL;
+function normalizeBaseUrl(url) {
+  return url.replace(/\/+$/, "");
+}
+function resolveWebBaseUrl() {
+  if (WEB_URL) {
+    return normalizeBaseUrl(WEB_URL);
+  }
+  if (typeof window !== "undefined") {
+    const { origin, hostname } = window.location;
+    if (hostname !== "localhost" && hostname !== "127.0.0.1") {
+      return normalizeBaseUrl(origin);
+    }
+  }
+  return "http://localhost:3000";
+}
+const PAGE_PATH_OVERRIDES = {
+  productDetail: "/shop"
+};
+function buildPreviewUrl(tenantSlug, pageKey) {
+  const pagePath = pageKey && pageKey !== "home" ? PAGE_PATH_OVERRIDES[pageKey] ?? `/${pageKey}` : "";
+  const storefrontDomain = normalizeStorefrontDomain(
+    readPublicConfig().storefrontDomain ?? void 0
+  );
+  const baseUrl = storefrontDomain ? `https://${tenantSlug}.${storefrontDomain}` : `${resolveWebBaseUrl()}/${tenantSlug}`;
+  return `${baseUrl}${pagePath}`;
+}
+function createSessionToken() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+function getSessionPreviewToken(tenantSlug, pageKey) {
+  if (typeof window === "undefined") return createSessionToken();
+  const key = `${PREVIEW_SESSION_KEY_PREFIX}:${tenantSlug}:${pageKey || "home"}`;
+  const existing = window.sessionStorage.getItem(key);
+  if (existing) {
+    return existing;
+  }
+  const token = createSessionToken();
+  window.sessionStorage.setItem(key, token);
+  return token;
+}
+function buildSessionPreviewUrl(tenantSlug, pageKey) {
+  const base = buildPreviewUrl(tenantSlug, pageKey);
+  const token = getSessionPreviewToken(tenantSlug, pageKey);
+  const separator = base.includes("?") ? "&" : "?";
+  return `${base}${separator}pb_preview_session=${encodeURIComponent(token)}&pb_preview=draft`;
+}
+function getFrameWidth(mode) {
+  if (mode === "mobile") return "390px";
+  if (mode === "tablet") return "820px";
+  return "100%";
+}
+function getViewportWidth(mode, desktopViewportWidth) {
+  if (mode === "mobile") return 390;
+  if (mode === "tablet") return 820;
+  return desktopViewportWidth;
+}
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function joinClassNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function StorefrontPreview({
+  tenantSlug,
+  pageKey,
+  className,
+  hasDraftChanges = false,
+  publicUrl,
+  previewUrlOverride,
+  previewTemplateLabel,
+  onExitTemplatePreview,
+  bare = false,
+  deviceMode: deviceModeProp,
+  onBlockSelected,
+  onFieldSelected,
+  onFieldChanged,
+  toolbarActions
+}) {
+  const [deviceModeState, setDeviceMode] = useState("desktop");
+  const deviceMode = deviceModeProp ?? deviceModeState;
+  const [status, setStatus] = useState("idle");
+  const [linkCopied, setLinkCopied] = useState(false);
+  const [linkOpened, setLinkOpened] = useState(false);
+  const iframeRef = useRef(null);
+  const frameContainerRef = useRef(null);
+  const [frameContainerWidth, setFrameContainerWidth] = useState(0);
+  const reducedMotion = useReducedMotion();
+  const isTemplatePreview = Boolean(previewUrlOverride);
+  const previewUrl = useMemo(
+    () => previewUrlOverride ?? buildSessionPreviewUrl(tenantSlug, pageKey),
+    [previewUrlOverride, tenantSlug, pageKey]
+  );
+  const targetOrigin = useMemo(() => {
+    try {
+      return new URL(previewUrl).origin;
+    } catch {
+      return "*";
+    }
+  }, [previewUrl]);
+  useEffect(() => {
+    const container = frameContainerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver((entries) => {
+      const [entry] = entries;
+      if (!entry) return;
+      setFrameContainerWidth(entry.contentRect.width);
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+  const desktopViewportWidth = useMemo(() => {
+    if (frameContainerWidth <= 0) {
+      return 1280;
+    }
+    return clamp(
+      Math.round(frameContainerWidth / DESKTOP_PREVIEW_TARGET_SCALE),
+      DESKTOP_PREVIEW_MIN_WIDTH,
+      DESKTOP_PREVIEW_MAX_WIDTH
+    );
+  }, [frameContainerWidth]);
+  const viewportWidth = useMemo(
+    () => getViewportWidth(deviceMode, desktopViewportWidth),
+    [deviceMode, desktopViewportWidth]
+  );
+  const shouldScaleDesktop = deviceMode === "desktop";
+  const desktopScale = useMemo(() => {
+    if (!shouldScaleDesktop || frameContainerWidth <= 0) return 1;
+    return Math.min(1, frameContainerWidth / viewportWidth);
+  }, [shouldScaleDesktop, frameContainerWidth, viewportWidth]);
+  const postRefresh = useCallback(
+    (ts) => {
+      const frame = iframeRef.current;
+      const frameWindow = frame?.contentWindow;
+      if (!frameWindow) {
+        setStatus("error");
+        return;
+      }
+      const message = {
+        type: "PB_PREVIEW_REFRESH",
+        source: "dashboard",
+        ts: ts || Date.now()
+      };
+      try {
+        setStatus("refreshing");
+        frameWindow.postMessage(message, targetOrigin);
+        window.setTimeout(() => setStatus("updated"), 220);
+        window.setTimeout(() => setStatus("idle"), 1100);
+      } catch {
+        setStatus("error");
+        window.setTimeout(() => setStatus("idle"), 1100);
+      }
+    },
+    [targetOrigin]
+  );
+  usePreviewRefreshSignal((detail) => {
+    postRefresh(detail.ts);
+  });
+  useEffect(() => {
+    if (!onBlockSelected && !onFieldSelected) return;
+    let allowedOrigin = null;
+    try {
+      allowedOrigin = new URL(previewUrl).origin;
+    } catch {
+      return;
+    }
+    const handler = (event) => {
+      if (event.origin !== allowedOrigin) return;
+      const frame = iframeRef.current;
+      if (!frame || event.source !== frame.contentWindow) return;
+      const data = event.data;
+      if (!data || typeof data !== "object") return;
+      if ("type" in data && data.type === "PB_FIELD_CHANGED") {
+        const changed = data;
+        if (typeof changed.blockId !== "string" || !changed.blockId || typeof changed.fieldId !== "string" || !changed.fieldId || typeof changed.value !== "string") {
+          return;
+        }
+        onFieldChanged?.(changed.blockId, changed.fieldId, changed.value);
+        return;
+      }
+      if ("type" in data && data.type === "PB_FIELD_SELECTED") {
+        const fieldData = data;
+        if (typeof fieldData.blockId !== "string" || !fieldData.blockId || typeof fieldData.fieldId !== "string" || !fieldData.fieldId) {
+          return;
+        }
+        onFieldSelected?.(fieldData.blockId, fieldData.fieldId);
+        onBlockSelected?.(fieldData.blockId);
+        return;
+      }
+      if ("type" in data && data.type === "PB_BLOCK_SELECTED") {
+        const blockData = data;
+        if (typeof blockData.id !== "string" || !blockData.id) return;
+        onBlockSelected?.(blockData.id);
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [onBlockSelected, onFieldSelected, previewUrl]);
+  const handleCopySessionLink = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(previewUrl);
+      setLinkCopied(true);
+      window.setTimeout(() => setLinkCopied(false), 1200);
+    } catch {
+      setStatus("error");
+      window.setTimeout(() => setStatus("idle"), 1200);
+    }
+  }, [previewUrl]);
+  const handleOpenSessionLink = useCallback(() => {
+    window.open(previewUrl, "_blank", "noopener,noreferrer");
+    setLinkOpened(true);
+    window.setTimeout(() => setLinkOpened(false), 1200);
+  }, [previewUrl]);
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: joinClassNames(
+        "flex h-full min-h-0 flex-col overflow-hidden bg-[var(--bg-base)]",
+        bare ? void 0 : "rounded-md border border-[var(--border-default)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: joinClassNames(
+              "flex items-center justify-between border-b border-[var(--border-subtle)] px-3 py-2",
+              bare ? "hidden" : void 0
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-[var(--text-secondary)]", children: [
+                /* @__PURE__ */ jsx(Monitor, { className: "size-4" }),
+                /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Live preview" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                toolbarActions,
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-[var(--border-default)] p-1", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setDeviceMode("mobile"),
+                      className: `rounded-md p-1 ${deviceMode === "mobile" ? "bg-[var(--interactive-active)] text-brand-500" : "text-[var(--text-tertiary)]"}`,
+                      "aria-label": "Mobile preview",
+                      children: /* @__PURE__ */ jsx(Smartphone, { className: "size-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setDeviceMode("tablet"),
+                      className: `rounded-md p-1 ${deviceMode === "tablet" ? "bg-[var(--interactive-active)] text-brand-500" : "text-[var(--text-tertiary)]"}`,
+                      "aria-label": "Tablet preview",
+                      children: /* @__PURE__ */ jsx(Tablet, { className: "size-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setDeviceMode("desktop"),
+                      className: `rounded-md p-1 ${deviceMode === "desktop" ? "bg-[var(--interactive-active)] text-brand-500" : "text-[var(--text-tertiary)]"}`,
+                      "aria-label": "Desktop preview",
+                      children: /* @__PURE__ */ jsx(Monitor, { className: "size-4" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "secondary",
+                    size: "sm",
+                    onClick: () => {
+                      triggerPreviewRefresh("manual");
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(RefreshCw, {}),
+                      /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Refresh" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: handleCopySessionLink, children: linkCopied ? "Copied" : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Copy link" }),
+                  /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: "Copy" })
+                ] }) }),
+                /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: handleOpenSessionLink, children: linkOpened ? "Opened" : "Open" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: joinClassNames(
+              "relative flex-1 overflow-hidden bg-[var(--bg-muted)]",
+              bare ? "p-0" : "p-3"
+            ),
+            children: [
+              isTemplatePreview ? /* @__PURE__ */ jsx(
+                CanvasBanner,
+                {
+                  visible: true,
+                  variant: "previewing-template",
+                  templateLabel: previewTemplateLabel,
+                  onExitPreview: onExitTemplatePreview
+                }
+              ) : /* @__PURE__ */ jsx(CanvasBanner, { visible: hasDraftChanges, liveUrl: publicUrl }),
+              /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  ref: frameContainerRef,
+                  className: joinClassNames(
+                    "mx-auto h-full overflow-hidden bg-white",
+                    bare ? void 0 : "rounded-md border border-[var(--border-default)]"
+                  ),
+                  initial: false,
+                  animate: {
+                    width: shouldScaleDesktop ? "100%" : getFrameWidth(deviceMode)
+                  },
+                  transition: reducedMotion ? { duration: 0 } : springs.gentle,
+                  style: { maxWidth: "100%" },
+                  children: /* @__PURE__ */ jsx(
+                    "iframe",
+                    {
+                      ref: iframeRef,
+                      src: previewUrl,
+                      title: "Live preview",
+                      className: "border-0 bg-white",
+                      style: shouldScaleDesktop ? {
+                        width: `${viewportWidth}px`,
+                        height: `${100 / desktopScale}%`,
+                        transform: `scale(${desktopScale})`,
+                        transformOrigin: "top left"
+                      } : { width: "100%", height: "100%" },
+                      sandbox: "allow-scripts allow-same-origin allow-forms allow-popups"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-subtle)] px-3 py-1 text-xs text-[var(--text-tertiary)]", children: [
+          status === "refreshing" && "Refreshing preview...",
+          status === "updated" && "Preview updated",
+          status === "error" && "Preview refresh unavailable",
+          status === "idle" && "Auto-refreshes on save and publish"
+        ] })
+      ]
+    }
+  );
+}
+export {
+  StorefrontPreview,
+  buildPreviewUrl,
+  buildSessionPreviewUrl
+};
+//# sourceMappingURL=storefront-preview.js.map

package/dist/storefront-preview/storefront-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/storefront-preview/storefront-preview.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { springs } from '@withpotter/lib/motion';\nimport { Monitor, RefreshCw, Smartphone, Tablet } from 'lucide-react';\nimport {\n  triggerPreviewRefresh,\n  usePreviewRefreshSignal,\n} from './preview-refresh';\nimport { CanvasBanner } from '@withpotter/components/template-editor/canvas-banner';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { normalizeStorefrontDomain } from '@withpotter/lib/storefront';\nimport { readPublicConfig } from '@withpotter/lib/runtime-config';\n\nexport type DeviceMode = 'mobile' | 'tablet' | 'desktop';\n\ninterface StorefrontPreviewProps {\n  tenantSlug: string;\n  pageKey?: string;\n  className?: string;\n  /**\n   * Whether the current draft differs from the published version — controls\n   * the \"Previewing draft — not live\" canvas banner per merchant-dashboard#177.\n   */\n  hasDraftChanges?: boolean;\n  /** Public storefront URL surfaced as the \"View live site\" link in the banner. */\n  publicUrl?: string;\n  /** Validated template preview URL to load instead of the tenant storefront. */\n  previewUrlOverride?: string;\n  /** Human-readable template label shown in the override banner. */\n  previewTemplateLabel?: string;\n  /** Invoked when the merchant exits an arbitrary template preview. */\n  onExitTemplatePreview?: () => void;\n  /**\n   * Invoked when the iframe posts a `PB_BLOCK_SELECTED` message (the merchant\n   * clicked a tagged block in the live preview). Origin-checked against the\n   * iframe's own origin before dispatch. See\n   * `withpotter/roadmap/handoffs/editor-preview-deep-link.md` (§3.2, §3.5).\n   * (merchant-dashboard#170)\n   */\n  /**\n   * Drops the preview's own toolbar. The editor floats its chrome over the\n   * canvas now and already owns device, refresh, copy-link and open, so a\n   * second bar inside the frame was the same four controls twice.\n   */\n  bare?: boolean;\n  /**\n   * Controlled device mode. `bare` hides the preview's own switcher, so\n   * whoever hid it has to provide one — otherwise removing the toolbar quietly\n   * removes the ability to look at the site on a phone, which is the view most\n   * of a Nigerian merchant's customers will actually use.\n   */\n  deviceMode?: DeviceMode;\n  onBlockSelected?: (blockId: string) => void;\n  /**\n   * Invoked when the iframe posts a `PB_FIELD_SELECTED` message (the\n   * merchant clicked a specific field inside a tagged block — e.g. a\n   * heading, a paragraph, a CTA label, or an image). Same origin/source\n   * guards as `onBlockSelected`. `fieldId` is the schema field name.\n   */\n  onFieldSelected?: (blockId: string, fieldId: string) => void;\n  /** Text committed on the canvas. Write it through the same save path the\n   *  inspector uses — a second write path would go stale against the first. */\n  onFieldChanged?: (blockId: string, fieldId: string, value: string) => void;\n  /** Editor-owned actions rendered before the viewport controls. */\n  toolbarActions?: ReactNode;\n}\n\ninterface PreviewMessage {\n  type: 'PB_PREVIEW_REFRESH';\n  source: 'dashboard';\n  ts: number;\n}\n\ninterface BlockSelectedMessage {\n  type: 'PB_BLOCK_SELECTED';\n  id: string;\n}\n\ninterface FieldSelectedMessage {\n  type: 'PB_FIELD_SELECTED';\n  blockId: string;\n  fieldId: string;\n}\n\n/**\n * Text typed directly on the canvas. The return leg of a channel that, until\n * now, only ever spoke outwards: the frame reported what you clicked and the\n * dashboard opened a form field somewhere else, which is why the one thing\n * anyone expects of an editor — click a sentence, write — could not be done.\n */\ninterface FieldChangedMessage {\n  type: 'PB_FIELD_CHANGED';\n  blockId: string;\n  fieldId: string;\n  value: string;\n}\n\nconst PREVIEW_SESSION_KEY_PREFIX = 'pb:storefront-preview:session-link';\nconst DESKTOP_PREVIEW_MIN_WIDTH = 1024;\nconst DESKTOP_PREVIEW_MAX_WIDTH = 1440;\nconst DESKTOP_PREVIEW_TARGET_SCALE = 0.72;\n\nconst WEB_URL = process.env.NEXT_PUBLIC_WEB_URL;\n\nfunction normalizeBaseUrl(url: string): string {\n  return url.replace(/\\/+$/, '');\n}\n\nfunction resolveWebBaseUrl(): string {\n  if (WEB_URL) {\n    return normalizeBaseUrl(WEB_URL);\n  }\n\n  if (typeof window !== 'undefined') {\n    const { origin, hostname } = window.location;\n    if (hostname !== 'localhost' && hostname !== '127.0.0.1') {\n      // In deployed environments, prefer the current origin over localhost.\n      return normalizeBaseUrl(origin);\n    }\n  }\n\n  return 'http://localhost:3000';\n}\n\n// Map page keys that don't match their URL path\nconst PAGE_PATH_OVERRIDES: Record<string, string> = {\n  productDetail: '/shop',\n};\n\nexport function buildPreviewUrl(tenantSlug: string, pageKey?: string): string {\n  const pagePath =\n    pageKey && pageKey !== 'home'\n      ? (PAGE_PATH_OVERRIDES[pageKey] ?? `/${pageKey}`)\n      : '';\n  // Read at call time: a box's storefront domain is injected at runtime, not\n  // baked into the build.\n  const storefrontDomain = normalizeStorefrontDomain(\n    readPublicConfig().storefrontDomain ?? undefined,\n  );\n  const baseUrl = storefrontDomain\n    ? `https://${tenantSlug}.${storefrontDomain}`\n    : `${resolveWebBaseUrl()}/${tenantSlug}`;\n  return `${baseUrl}${pagePath}`;\n}\n\nfunction createSessionToken(): string {\n  if (\n    typeof crypto !== 'undefined' &&\n    typeof crypto.randomUUID === 'function'\n  ) {\n    return crypto.randomUUID();\n  }\n  return `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;\n}\n\nfunction getSessionPreviewToken(tenantSlug: string, pageKey?: string): string {\n  if (typeof window === 'undefined') return createSessionToken();\n\n  const key = `${PREVIEW_SESSION_KEY_PREFIX}:${tenantSlug}:${pageKey || 'home'}`;\n  const existing = window.sessionStorage.getItem(key);\n  if (existing) {\n    return existing;\n  }\n\n  const token = createSessionToken();\n  window.sessionStorage.setItem(key, token);\n  return token;\n}\n\nexport function buildSessionPreviewUrl(\n  tenantSlug: string,\n  pageKey?: string,\n): string {\n  const base = buildPreviewUrl(tenantSlug, pageKey);\n  const token = getSessionPreviewToken(tenantSlug, pageKey);\n  const separator = base.includes('?') ? '&' : '?';\n  return `${base}${separator}pb_preview_session=${encodeURIComponent(token)}&pb_preview=draft`;\n}\n\nfunction getFrameWidth(mode: DeviceMode): string {\n  if (mode === 'mobile') return '390px';\n  if (mode === 'tablet') return '820px';\n  return '100%';\n}\n\nfunction getViewportWidth(\n  mode: DeviceMode,\n  desktopViewportWidth: number,\n): number {\n  if (mode === 'mobile') return 390;\n  if (mode === 'tablet') return 820;\n  return desktopViewportWidth;\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.max(min, Math.min(max, value));\n}\n\nfunction joinClassNames(...classes: Array<string | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nexport function StorefrontPreview({\n  tenantSlug,\n  pageKey,\n  className,\n  hasDraftChanges = false,\n  publicUrl,\n  previewUrlOverride,\n  previewTemplateLabel,\n  onExitTemplatePreview,\n  bare = false,\n  deviceMode: deviceModeProp,\n  onBlockSelected,\n  onFieldSelected,\n  onFieldChanged,\n  toolbarActions,\n}: StorefrontPreviewProps) {\n  const [deviceModeState, setDeviceMode] = useState<DeviceMode>('desktop');\n  const deviceMode = deviceModeProp ?? deviceModeState;\n  const [status, setStatus] = useState<\n    'idle' | 'refreshing' | 'updated' | 'error'\n  >('idle');\n  const [linkCopied, setLinkCopied] = useState(false);\n  const [linkOpened, setLinkOpened] = useState(false);\n  const iframeRef = useRef<HTMLIFrameElement | null>(null);\n  const frameContainerRef = useRef<HTMLDivElement | null>(null);\n  const [frameContainerWidth, setFrameContainerWidth] = useState(0);\n  const reducedMotion = useReducedMotion();\n\n  const isTemplatePreview = Boolean(previewUrlOverride);\n  const previewUrl = useMemo(\n    () => previewUrlOverride ?? buildSessionPreviewUrl(tenantSlug, pageKey),\n    [previewUrlOverride, tenantSlug, pageKey],\n  );\n\n  const targetOrigin = useMemo(() => {\n    try {\n      return new URL(previewUrl).origin;\n    } catch {\n      return '*';\n    }\n  }, [previewUrl]);\n\n  useEffect(() => {\n    const container = frameContainerRef.current;\n    if (!container) return;\n\n    const observer = new ResizeObserver((entries) => {\n      const [entry] = entries;\n      if (!entry) return;\n      setFrameContainerWidth(entry.contentRect.width);\n    });\n\n    observer.observe(container);\n    return () => observer.disconnect();\n  }, []);\n\n  const desktopViewportWidth = useMemo(() => {\n    if (frameContainerWidth <= 0) {\n      return 1280;\n    }\n\n    return clamp(\n      Math.round(frameContainerWidth / DESKTOP_PREVIEW_TARGET_SCALE),\n      DESKTOP_PREVIEW_MIN_WIDTH,\n      DESKTOP_PREVIEW_MAX_WIDTH,\n    );\n  }, [frameContainerWidth]);\n\n  const viewportWidth = useMemo(\n    () => getViewportWidth(deviceMode, desktopViewportWidth),\n    [deviceMode, desktopViewportWidth],\n  );\n  const shouldScaleDesktop = deviceMode === 'desktop';\n  const desktopScale = useMemo(() => {\n    if (!shouldScaleDesktop || frameContainerWidth <= 0) return 1;\n    return Math.min(1, frameContainerWidth / viewportWidth);\n  }, [shouldScaleDesktop, frameContainerWidth, viewportWidth]);\n\n  const postRefresh = useCallback(\n    (ts?: number) => {\n      const frame = iframeRef.current;\n      const frameWindow = frame?.contentWindow;\n      if (!frameWindow) {\n        setStatus('error');\n        return;\n      }\n\n      const message: PreviewMessage = {\n        type: 'PB_PREVIEW_REFRESH',\n        source: 'dashboard',\n        ts: ts || Date.now(),\n      };\n\n      try {\n        setStatus('refreshing');\n        frameWindow.postMessage(message, targetOrigin);\n        window.setTimeout(() => setStatus('updated'), 220);\n        window.setTimeout(() => setStatus('idle'), 1100);\n      } catch {\n        setStatus('error');\n        window.setTimeout(() => setStatus('idle'), 1100);\n      }\n    },\n    [targetOrigin],\n  );\n\n  usePreviewRefreshSignal((detail) => {\n    postRefresh(detail.ts);\n  });\n\n  // PB_BLOCK_SELECTED / PB_FIELD_SELECTED listener — dashboard side of the\n  // editor deep-link contract (merchant-dashboard#170). Origin allowlist is\n  // derived from the iframe URL we constructed: only that exact origin is\n  // trusted to post selection messages.\n  useEffect(() => {\n    if (!onBlockSelected && !onFieldSelected) return;\n    let allowedOrigin: string | null = null;\n    try {\n      allowedOrigin = new URL(previewUrl).origin;\n    } catch {\n      return;\n    }\n\n    const handler = (event: MessageEvent) => {\n      if (event.origin !== allowedOrigin) return;\n      const frame = iframeRef.current;\n      if (!frame || event.source !== frame.contentWindow) return;\n      const data = event.data as\n        | Partial<BlockSelectedMessage>\n        | Partial<FieldSelectedMessage>\n        | Partial<FieldChangedMessage>\n        | undefined;\n      if (!data || typeof data !== 'object') return;\n      if ('type' in data && data.type === 'PB_FIELD_CHANGED') {\n        const changed = data as Partial<FieldChangedMessage>;\n        if (\n          typeof changed.blockId !== 'string' ||\n          !changed.blockId ||\n          typeof changed.fieldId !== 'string' ||\n          !changed.fieldId ||\n          typeof changed.value !== 'string'\n        ) {\n          return;\n        }\n        onFieldChanged?.(changed.blockId, changed.fieldId, changed.value);\n        return;\n      }\n      if ('type' in data && data.type === 'PB_FIELD_SELECTED') {\n        const fieldData = data as Partial<FieldSelectedMessage>;\n        if (\n          typeof fieldData.blockId !== 'string' ||\n          !fieldData.blockId ||\n          typeof fieldData.fieldId !== 'string' ||\n          !fieldData.fieldId\n        ) {\n          return;\n        }\n        onFieldSelected?.(fieldData.blockId, fieldData.fieldId);\n        // Also surface as a block selection so existing handlers (section\n        // expand, page route) still fire when only `onBlockSelected` is\n        // wired by a host that doesn't yet handle fields.\n        onBlockSelected?.(fieldData.blockId);\n        return;\n      }\n      if ('type' in data && data.type === 'PB_BLOCK_SELECTED') {\n        const blockData = data as Partial<BlockSelectedMessage>;\n        if (typeof blockData.id !== 'string' || !blockData.id) return;\n        onBlockSelected?.(blockData.id);\n      }\n    };\n\n    window.addEventListener('message', handler);\n    return () => window.removeEventListener('message', handler);\n  }, [onBlockSelected, onFieldSelected, previewUrl]);\n\n  const handleCopySessionLink = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(previewUrl);\n      setLinkCopied(true);\n      window.setTimeout(() => setLinkCopied(false), 1200);\n    } catch {\n      setStatus('error');\n      window.setTimeout(() => setStatus('idle'), 1200);\n    }\n  }, [previewUrl]);\n\n  const handleOpenSessionLink = useCallback(() => {\n    window.open(previewUrl, '_blank', 'noopener,noreferrer');\n    setLinkOpened(true);\n    window.setTimeout(() => setLinkOpened(false), 1200);\n  }, [previewUrl]);\n\n  return (\n    <aside\n      className={joinClassNames(\n        'flex h-full min-h-0 flex-col overflow-hidden bg-[var(--bg-base)]',\n        bare ? undefined : 'rounded-md border border-[var(--border-default)]',\n        className,\n      )}\n    >\n      <div\n        className={joinClassNames(\n          'flex items-center justify-between border-b border-[var(--border-subtle)] px-3 py-2',\n          bare ? 'hidden' : undefined,\n        )}\n      >\n        <div className=\"flex items-center gap-2 text-sm text-[var(--text-secondary)]\">\n          <Monitor className=\"size-4\" />\n          <span className=\"hidden sm:inline\">Live preview</span>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {toolbarActions}\n          <div className=\"flex items-center rounded-md border border-[var(--border-default)] p-1\">\n            <button\n              type=\"button\"\n              onClick={() => setDeviceMode('mobile')}\n              className={`rounded-md p-1 ${\n                deviceMode === 'mobile'\n                  ? 'bg-[var(--interactive-active)] text-brand-500'\n                  : 'text-[var(--text-tertiary)]'\n              }`}\n              aria-label=\"Mobile preview\"\n            >\n              <Smartphone className=\"size-4\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => setDeviceMode('tablet')}\n              className={`rounded-md p-1 ${\n                deviceMode === 'tablet'\n                  ? 'bg-[var(--interactive-active)] text-brand-500'\n                  : 'text-[var(--text-tertiary)]'\n              }`}\n              aria-label=\"Tablet preview\"\n            >\n              <Tablet className=\"size-4\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => setDeviceMode('desktop')}\n              className={`rounded-md p-1 ${\n                deviceMode === 'desktop'\n                  ? 'bg-[var(--interactive-active)] text-brand-500'\n                  : 'text-[var(--text-tertiary)]'\n              }`}\n              aria-label=\"Desktop preview\"\n            >\n              <Monitor className=\"size-4\" />\n            </button>\n          </div>\n          <Button\n            variant=\"secondary\"\n            size=\"sm\"\n            onClick={() => {\n              triggerPreviewRefresh('manual');\n            }}\n          >\n            <RefreshCw />\n            <span className=\"hidden sm:inline\">Refresh</span>\n          </Button>\n          <Button variant=\"secondary\" size=\"sm\" onClick={handleCopySessionLink}>\n            {linkCopied ? (\n              'Copied'\n            ) : (\n              <>\n                <span className=\"hidden sm:inline\">Copy link</span>\n                <span className=\"sm:hidden\">Copy</span>\n              </>\n            )}\n          </Button>\n          <Button variant=\"secondary\" size=\"sm\" onClick={handleOpenSessionLink}>\n            {linkOpened ? 'Opened' : 'Open'}\n          </Button>\n        </div>\n      </div>\n\n      <div\n        className={joinClassNames(\n          'relative flex-1 overflow-hidden bg-[var(--bg-muted)]',\n          bare ? 'p-0' : 'p-3',\n        )}\n      >\n        {isTemplatePreview ? (\n          <CanvasBanner\n            visible\n            variant=\"previewing-template\"\n            templateLabel={previewTemplateLabel}\n            onExitPreview={onExitTemplatePreview}\n          />\n        ) : (\n          <CanvasBanner visible={hasDraftChanges} liveUrl={publicUrl} />\n        )}\n        {/* The frame RESIZES between devices rather than snapping. A phone is\n            a different shape of the same site, and watching the page reflow\n            into it is the whole point of the control — an instant jump gives\n            you a before and an after with nothing in between, so you cannot\n            see what actually moved. Spring, not duration, because widths are\n            interruptible: hit tablet halfway through and it carries over. */}\n        <motion.div\n          ref={frameContainerRef}\n          className={joinClassNames(\n            'mx-auto h-full overflow-hidden bg-white',\n            bare\n              ? undefined\n              : 'rounded-md border border-[var(--border-default)]',\n          )}\n          initial={false}\n          animate={{\n            width: shouldScaleDesktop ? '100%' : getFrameWidth(deviceMode),\n          }}\n          transition={reducedMotion ? { duration: 0 } : springs.gentle}\n          style={{ maxWidth: '100%' }}\n        >\n          <iframe\n            ref={iframeRef}\n            src={previewUrl}\n            title=\"Live preview\"\n            className=\"border-0 bg-white\"\n            style={\n              shouldScaleDesktop\n                ? {\n                    width: `${viewportWidth}px`,\n                    height: `${100 / desktopScale}%`,\n                    transform: `scale(${desktopScale})`,\n                    transformOrigin: 'top left',\n                  }\n                : { width: '100%', height: '100%' }\n            }\n            sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups\"\n          />\n        </motion.div>\n      </div>\n\n      <div className=\"border-t border-[var(--border-subtle)] px-3 py-1 text-xs text-[var(--text-tertiary)]\">\n        {status === 'refreshing' && 'Refreshing preview...'}\n        {status === 'updated' && 'Preview updated'}\n        {status === 'error' && 'Preview refresh unavailable'}\n        {status === 'idle' && 'Auto-refreshes on save and publish'}\n      </div>\n    </aside>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/storefront-preview/storefront-thumbnail.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A lightweight, non-interactive snapshot of the live storefront — a framed
+ * "browser window" around an iframe of the public site. This is the reusable
+ * imagery primitive for surfaces that should SHOW the merchant's site (Business
+ * snapshot, Home launcher) without becoming the editor. Pointer events are off
+ * by default so it reads as a picture, not a tool; the whole frame links out.
+ */
+interface StorefrontThumbnailProps {
+    /** Public storefront URL to frame. */
+    url: string;
+    /** Height of the preview viewport (px). Defaults to 260. */
+    height?: number;
+    className?: string;
+}
+export declare function StorefrontThumbnail({ url, height, className, }: StorefrontThumbnailProps): import("react").JSX.Element;
+export {};

package/dist/storefront-preview/storefront-thumbnail.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+function StorefrontThumbnail({
+  url,
+  height = 260,
+  className
+}) {
+  let host = url;
+  try {
+    host = new URL(url).host;
+  } catch {
+  }
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: `group block overflow-hidden rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] transition-colors hover:border-[var(--border-strong)] ${className ?? ""}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-[var(--border-subtle)] bg-[var(--bg-subtle)] px-3 py-2", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-[var(--border-strong)]" }),
+            /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-[var(--border-strong)]" }),
+            /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-[var(--border-strong)]" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "mx-auto max-w-[70%] truncate rounded-md bg-[var(--bg-base)] px-3 py-1 text-2xs text-[var(--text-tertiary)]", children: host })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative overflow-hidden bg-[var(--bg-muted)]",
+            style: { height },
+            children: [
+              /* @__PURE__ */ jsx(
+                "iframe",
+                {
+                  src: url,
+                  title: "Storefront preview",
+                  loading: "lazy",
+                  tabIndex: -1,
+                  "aria-hidden": "true",
+                  className: "pointer-events-none h-full w-full border-0"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "absolute inset-0 bg-transparent transition-colors group-hover:bg-[var(--text-primary)]/[0.03]" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  StorefrontThumbnail
+};
+//# sourceMappingURL=storefront-thumbnail.js.map

package/dist/storefront-preview/storefront-thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/storefront-preview/storefront-thumbnail.tsx"],"sourcesContent":["'use client';\n\n/**\n * A lightweight, non-interactive snapshot of the live storefront — a framed\n * \"browser window\" around an iframe of the public site. This is the reusable\n * imagery primitive for surfaces that should SHOW the merchant's site (Business\n * snapshot, Home launcher) without becoming the editor. Pointer events are off\n * by default so it reads as a picture, not a tool; the whole frame links out.\n */\ninterface StorefrontThumbnailProps {\n  /** Public storefront URL to frame. */\n  url: string;\n  /** Height of the preview viewport (px). Defaults to 260. */\n  height?: number;\n  className?: string;\n}\n\nexport function StorefrontThumbnail({\n  url,\n  height = 260,\n  className,\n}: StorefrontThumbnailProps) {\n  let host = url;\n  try {\n    host = new URL(url).host;\n  } catch {\n    /* keep raw url as label */\n  }\n\n  return (\n    <a\n      href={url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={`group block overflow-hidden rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] transition-colors hover:border-[var(--border-strong)] ${className ?? ''}`}\n    >\n      {/* Browser chrome */}\n      <div className=\"flex items-center gap-2 border-b border-[var(--border-subtle)] bg-[var(--bg-subtle)] px-3 py-2\">\n        <span className=\"flex gap-2\">\n          <span className=\"h-2.5 w-2.5 rounded-full bg-[var(--border-strong)]\" />\n          <span className=\"h-2.5 w-2.5 rounded-full bg-[var(--border-strong)]\" />\n          <span className=\"h-2.5 w-2.5 rounded-full bg-[var(--border-strong)]\" />\n        </span>\n        <span className=\"mx-auto max-w-[70%] truncate rounded-md bg-[var(--bg-base)] px-3 py-1 text-2xs text-[var(--text-tertiary)]\">\n          {host}\n        </span>\n      </div>\n      {/* Live site, non-interactive */}\n      <div\n        className=\"relative overflow-hidden bg-[var(--bg-muted)]\"\n        style={{ height }}\n      >\n        <iframe\n          src={url}\n          title=\"Storefront preview\"\n          loading=\"lazy\"\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none h-full w-full border-0\"\n        />\n        {/* Hover affordance — the frame is a link out */}\n        <span className=\"absolute inset-0 bg-transparent transition-colors group-hover:bg-[var(--text-primary)]/[0.03]\" />\n      </div>\n    </a>\n  );\n}\n"],"mappings":";AAsCQ,SACE,KADF;AArBD,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA,SAAS;AAAA,EACT;AACF,GAA6B;AAC3B,MAAI,OAAO;AACX,MAAI;AACF,WAAO,IAAI,IAAI,GAAG,EAAE;AAAA,EACtB,QAAQ;AAAA,EAER;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,WAAW,0JAA0J,aAAa,EAAE;AAAA,MAGpL;AAAA,6BAAC,SAAI,WAAU,kGACb;AAAA,+BAAC,UAAK,WAAU,cACd;AAAA,gCAAC,UAAK,WAAU,sDAAqD;AAAA,YACrE,oBAAC,UAAK,WAAU,sDAAqD;AAAA,YACrE,oBAAC,UAAK,WAAU,sDAAqD;AAAA,aACvE;AAAA,UACA,oBAAC,UAAK,WAAU,8GACb,gBACH;AAAA,WACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,OAAO;AAAA,YAEhB;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,OAAM;AAAA,kBACN,SAAQ;AAAA,kBACR,UAAU;AAAA,kBACV,eAAY;AAAA,kBACZ,WAAU;AAAA;AAAA,cACZ;AAAA,cAEA,oBAAC,UAAK,WAAU,iGAAgG;AAAA;AAAA;AAAA,QAClH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/styles/mobile/theme.d.ts

@@ -0,0 +1,31 @@
+import type { CSSProperties } from 'react';
+export interface MobileTheme {
+    canvas: string;
+    surface: string;
+    card: string;
+    elevated: string;
+    border: string;
+    borderStrong: string;
+    text: string;
+    textSecondary: string;
+    textTertiary: string;
+    textMuted: string;
+    accent: string;
+    accentFg: string;
+    good: string;
+    warn: string;
+    bad: string;
+}
+export declare const mobileThemes: {
+    charcoal: MobileTheme;
+    paper: MobileTheme;
+    apple: MobileTheme;
+    obsidian: MobileTheme;
+    cool: MobileTheme;
+};
+export type MobileThemeName = keyof typeof mobileThemes;
+export declare const ACTIVE_DARK: MobileThemeName;
+export declare const ACTIVE_LIGHT: MobileThemeName;
+export declare const tokens: MobileTheme;
+export declare const lightTokens: MobileTheme;
+export declare function cssVarsFromTheme(theme: MobileTheme): CSSProperties;

package/dist/styles/mobile/theme.js

@@ -0,0 +1,112 @@
+const charcoal = {
+  canvas: "#000000",
+  // true black page background
+  surface: "#000000",
+  // chrome (matches canvas)
+  card: "#161616",
+  // first elevation — readable contrast against pure black
+  elevated: "#1F1F1F",
+  // raised elements (sheets, pressed states)
+  border: "#2A2A2A",
+  borderStrong: "#3A3A3A",
+  text: "#F3F4F6",
+  textSecondary: "#D1D5DB",
+  textTertiary: "#9CA3AF",
+  textMuted: "#6B7280",
+  accent: "#116DFF",
+  accentFg: "#FFFFFF",
+  good: "#4ADE80",
+  warn: "#F4B740",
+  bad: "#F87171"
+};
+const paper = {
+  canvas: "#FFFFFF",
+  surface: "#FFFFFF",
+  card: "#F7F6F3",
+  elevated: "#F0EEE8",
+  border: "#EAE6DC",
+  borderStrong: "#D6CFBF",
+  text: "#1A1916",
+  textSecondary: "#4A4842",
+  textTertiary: "#7A786E",
+  textMuted: "#A39F92",
+  accent: "#116DFF",
+  accentFg: "#FFFFFF",
+  good: "#16A34A",
+  warn: "#D97706",
+  bad: "#DC2626"
+};
+const apple = {
+  canvas: "#F2F2F7",
+  surface: "#FFFFFF",
+  card: "#FFFFFF",
+  elevated: "#E5E5EA",
+  border: "#D1D1D6",
+  borderStrong: "#C6C6C8",
+  text: "#1C1C1E",
+  textSecondary: "#3C3C43",
+  textTertiary: "#8E8E93",
+  textMuted: "#AEAEB2",
+  accent: "#116DFF",
+  accentFg: "#FFFFFF",
+  good: "#34C759",
+  warn: "#FF9500",
+  bad: "#FF3B30"
+};
+const obsidian = {
+  ...charcoal,
+  canvas: "#000000",
+  surface: "#0B0E14",
+  card: "#11151E",
+  elevated: "#1A2030",
+  border: "#2A3142",
+  borderStrong: "#3A4358"
+};
+const cool = {
+  ...paper,
+  canvas: "#F6F8FB",
+  elevated: "#EEF1F6",
+  border: "#E2E6EE",
+  borderStrong: "#CCD2DD"
+};
+const mobileThemes = {
+  charcoal,
+  paper,
+  apple,
+  obsidian,
+  cool
+};
+const ACTIVE_DARK = "charcoal";
+const ACTIVE_LIGHT = "paper";
+const tokens = mobileThemes[ACTIVE_DARK];
+const lightTokens = mobileThemes[ACTIVE_LIGHT];
+function cssVarsFromTheme(theme) {
+  return {
+    "--mb-canvas": theme.canvas,
+    "--mb-surface": theme.surface,
+    "--mb-card": theme.card,
+    "--mb-elevated": theme.elevated,
+    "--mb-border": theme.border,
+    "--mb-border-strong": theme.borderStrong,
+    "--mb-text": theme.text,
+    "--mb-text-secondary": theme.textSecondary,
+    "--mb-text-tertiary": theme.textTertiary,
+    "--mb-text-muted": theme.textMuted,
+    // Follow the box brand accent when set (via `box brand`); otherwise fall
+    // back to the palette's own accent so unbranded boxes are unaffected.
+    "--mb-accent": `var(--accent-primary, ${theme.accent})`,
+    "--mb-accent-fg": theme.accentFg,
+    "--mb-good": theme.good,
+    "--mb-warn": theme.warn,
+    "--mb-bad": theme.bad
+  };
+}
+export {
+  ACTIVE_DARK,
+  ACTIVE_LIGHT,
+  cssVarsFromTheme,
+  lightTokens,
+  mobileThemes,
+  tokens
+};
+//# sourceMappingURL=theme.js.map