@withpotter/components 0.13.0-next.101

package/dist/templates/template-live-thumb.js

@@ -0,0 +1,186 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { resolveWebUrl } from "@withpotter/lib/web-url";
+import { tileSource } from "./template-tile-source";
+const BASE_WIDTH = 1280;
+const RENDER_GRACE_MS = 6e3;
+function TemplateLiveThumb({
+  url,
+  preview,
+  image,
+  name
+}) {
+  const ref = useRef(null);
+  const videoRef = useRef(null);
+  const [scale, setScale] = useState(0.3);
+  const [shouldLoadVideo, setShouldLoadVideo] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const [videoFailed, setVideoFailed] = useState(false);
+  const [posterFailed, setPosterFailed] = useState(false);
+  const [rendered, setRendered] = useState(null);
+  const candidates = (Array.isArray(image) ? image : [image]).filter(
+    (src) => !!src
+  );
+  const [failedCount, setFailedCount] = useState(0);
+  const still = candidates[failedCount] ?? null;
+  const media = preview ? {
+    poster: `${resolveWebUrl()}${preview.poster}`,
+    webm: preview.webm ? `${resolveWebUrl()}${preview.webm}` : void 0,
+    mp4: preview.mp4 ? `${resolveWebUrl()}${preview.mp4}` : void 0
+  } : null;
+  useEffect(() => {
+    if (!preview) return;
+    const connection = navigator.connection;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches || connection?.saveData === true) {
+      return;
+    }
+    const host = ref.current;
+    if (!host) return;
+    const loadObserver = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        setShouldLoadVideo(true);
+        loadObserver.disconnect();
+      },
+      { rootMargin: "600px 0px" }
+    );
+    const visibilityObserver = new IntersectionObserver(
+      ([entry]) => setIsVisible(entry.isIntersecting),
+      { threshold: 0.01 }
+    );
+    loadObserver.observe(host);
+    visibilityObserver.observe(host);
+    return () => {
+      loadObserver.disconnect();
+      visibilityObserver.disconnect();
+    };
+  }, [preview]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const syncPlayback = () => {
+      if (isVisible && document.visibilityState === "visible") {
+        void video.play().catch((error) => {
+          if (error instanceof DOMException && error.name === "AbortError") {
+            return;
+          }
+          setVideoFailed(true);
+        });
+      } else {
+        video.pause();
+      }
+    };
+    syncPlayback();
+    document.addEventListener("visibilitychange", syncPlayback);
+    return () => document.removeEventListener("visibilitychange", syncPlayback);
+  }, [isVisible, shouldLoadVideo]);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      if (entry) setScale(entry.contentRect.width / BASE_WIDTH);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  useEffect(() => {
+    if (still) return;
+    const t = setTimeout(
+      () => setRendered((r) => r === null ? false : r),
+      RENDER_GRACE_MS
+    );
+    return () => clearTimeout(t);
+  }, [still]);
+  const source = tileSource({
+    hasVideo: !!media && (!!media.mp4 || !!media.webm),
+    hasPoster: !!media?.poster,
+    videoWanted: !!media && shouldLoadVideo,
+    videoFailed,
+    posterFailed,
+    stillAvailable: !!still,
+    renderGaveUp: rendered === false
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: "relative aspect-[16/9] w-full overflow-hidden bg-white",
+      children: source === "video" && media ? /* @__PURE__ */ jsxs(
+        "video",
+        {
+          ref: videoRef,
+          className: "absolute inset-0 h-full w-full object-cover object-top",
+          muted: true,
+          loop: true,
+          playsInline: true,
+          preload: "metadata",
+          poster: media.poster,
+          "aria-hidden": true,
+          onError: () => setVideoFailed(true),
+          onCanPlay: () => {
+            if (!isVisible || document.visibilityState !== "visible") return;
+            void videoRef.current?.play().catch((error) => {
+              if (error instanceof DOMException && error.name === "AbortError") {
+                return;
+              }
+              setVideoFailed(true);
+            });
+          },
+          children: [
+            media.mp4 ? /* @__PURE__ */ jsx("source", { src: media.mp4, type: "video/mp4" }) : null,
+            media.webm ? /* @__PURE__ */ jsx("source", { src: media.webm, type: "video/webm" }) : null
+          ]
+        }
+      ) : source === "poster" && media ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: media.poster,
+            alt: "",
+            "aria-hidden": true,
+            loading: "lazy",
+            onError: () => setPosterFailed(true),
+            className: "absolute inset-0 h-full w-full object-cover object-top"
+          }
+        )
+      ) : source === "still" && still ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: still,
+            alt: "",
+            "aria-hidden": true,
+            loading: "lazy",
+            onError: () => setFailedCount((n) => n + 1),
+            className: "absolute inset-0 h-full w-full object-cover object-top"
+          }
+        )
+      ) : source === "unavailable" ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-[var(--bg-elevated)] px-3 text-center", children: /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--text-tertiary)]", children: [
+        name ?? "Preview",
+        " unavailable"
+      ] }) }) : /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          src: url,
+          tabIndex: -1,
+          "aria-hidden": true,
+          loading: "lazy",
+          onLoad: () => setRendered(true),
+          className: "pointer-events-none absolute left-0 top-0 origin-top-left border-0",
+          style: {
+            width: BASE_WIDTH,
+            height: BASE_WIDTH * (5 / 3),
+            transform: `scale(${scale})`
+          }
+        }
+      )
+    }
+  );
+}
+export {
+  TemplateLiveThumb
+};
+//# sourceMappingURL=template-live-thumb.js.map

package/dist/templates/template-live-thumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/templates/template-live-thumb.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { resolveWebUrl } from '@withpotter/lib/web-url';\nimport { tileSource } from './template-tile-source';\n\nconst BASE_WIDTH = 1280;\n/** Long enough for a cold render, short enough not to hold a blank tile. */\nconst RENDER_GRACE_MS = 6000;\n\nexport interface TemplatePreviewMedia {\n  poster: string;\n  webm?: string;\n  mp4?: string;\n  width: number;\n  height: number;\n  durationMs: number;\n  sourceHash: string;\n}\n\n/**\n * A template's picture.\n *\n * PREFERS A STILL, FALLS BACK TO A LIVE RENDER. It used to be a live\n * `/preview/{id}` iframe unconditionally, which meant a gallery booted a full\n * storefront render per tile just to show a thumbnail. Slow on a Lagos\n * connection, uncacheable, and — the part that actually bit — a hard runtime\n * dependency on the renderer for a static need. With web-render down or\n * mid-deploy, every tile in the product was a blank white box.\n *\n * So: a real image when one exists, the live render only when it does not, and\n * a legible placeholder when neither answers. The live path stays because it is\n * genuinely useful (it can never be stale, and it is right for the preview\n * panel where someone asked to see the thing work), but it is no longer the\n * only way a template can be seen.\n */\nexport function TemplateLiveThumb({\n  url,\n  preview,\n  image,\n  name,\n}: {\n  url: string;\n  preview?: TemplatePreviewMedia | null;\n  /**\n   * Pictures to try, best first. When one loads, nothing is rendered live.\n   *\n   * A LIST, not one path, because there are two places a real picture can come\n   * from and only one of them was being read. `stillFor` points at a still\n   * generated into this app's own `public/templates/`, which has to be\n   * regenerated by hand whenever a template is added — so the three most recent\n   * templates had no still, fell straight through to the live iframe, and every\n   * one of them showed as a blank white box. Meanwhile the template package\n   * itself ships `thumbnail.png`, a clean full-page capture, and nothing in this\n   * app ever asked for it.\n   */\n  image?: string | (string | null | undefined)[] | null;\n  /** Named in the placeholder, so a failed tile is still identifiable. */\n  name?: string;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const [scale, setScale] = useState(0.3);\n  const [shouldLoadVideo, setShouldLoadVideo] = useState(false);\n  const [isVisible, setIsVisible] = useState(false);\n  const [videoFailed, setVideoFailed] = useState(false);\n  /** The poster is its own failure: a video that is not there must not take a working poster with it. */\n  const [posterFailed, setPosterFailed] = useState(false);\n  /** null while the frame is given a chance, false once it is not coming. */\n  const [rendered, setRendered] = useState<boolean | null>(null);\n  /**\n   * A picture that 404s must fall through to the next one, not sit there broken.\n   *\n   * `stillFor` always returns a path — it cannot know whether the file exists —\n   * so the `image` prop is never falsy and the stated precedence (picture, then\n   * live render, then placeholder) silently collapsed to its first step.\n   */\n  const candidates = (Array.isArray(image) ? image : [image]).filter(\n    (src): src is string => !!src,\n  );\n  const [failedCount, setFailedCount] = useState(0);\n  const still = candidates[failedCount] ?? null;\n  const media = preview\n    ? {\n        poster: `${resolveWebUrl()}${preview.poster}`,\n        webm: preview.webm ? `${resolveWebUrl()}${preview.webm}` : undefined,\n        mp4: preview.mp4 ? `${resolveWebUrl()}${preview.mp4}` : undefined,\n      }\n    : null;\n\n  useEffect(() => {\n    if (!preview) return;\n    const connection = (\n      navigator as Navigator & { connection?: { saveData?: boolean } }\n    ).connection;\n    if (\n      window.matchMedia('(prefers-reduced-motion: reduce)').matches ||\n      connection?.saveData === true\n    ) {\n      return;\n    }\n    const host = ref.current;\n    if (!host) return;\n    const loadObserver = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry.isIntersecting) return;\n        setShouldLoadVideo(true);\n        loadObserver.disconnect();\n      },\n      { rootMargin: '600px 0px' },\n    );\n    const visibilityObserver = new IntersectionObserver(\n      ([entry]) => setIsVisible(entry.isIntersecting),\n      { threshold: 0.01 },\n    );\n    loadObserver.observe(host);\n    visibilityObserver.observe(host);\n    return () => {\n      loadObserver.disconnect();\n      visibilityObserver.disconnect();\n    };\n  }, [preview]);\n\n  useEffect(() => {\n    const video = videoRef.current;\n    if (!video) return;\n    const syncPlayback = () => {\n      if (isVisible && document.visibilityState === 'visible') {\n        void video.play().catch((error: unknown) => {\n          if (error instanceof DOMException && error.name === 'AbortError') {\n            return;\n          }\n          setVideoFailed(true);\n        });\n      } else {\n        video.pause();\n      }\n    };\n    syncPlayback();\n    document.addEventListener('visibilitychange', syncPlayback);\n    return () => document.removeEventListener('visibilitychange', syncPlayback);\n  }, [isVisible, shouldLoadVideo]);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const ro = new ResizeObserver(([entry]) => {\n      if (entry) setScale(entry.contentRect.width / BASE_WIDTH);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  useEffect(() => {\n    if (still) return;\n    // A refused connection never fires onLoad, so the only way to know the\n    // render is not coming is to stop waiting for it.\n    const t = setTimeout(\n      () => setRendered((r) => (r === null ? false : r)),\n      RENDER_GRACE_MS,\n    );\n    return () => clearTimeout(t);\n  }, [still]);\n\n  const source = tileSource({\n    hasVideo: !!media && (!!media.mp4 || !!media.webm),\n    hasPoster: !!media?.poster,\n    videoWanted: !!media && shouldLoadVideo,\n    videoFailed,\n    posterFailed,\n    stillAvailable: !!still,\n    renderGaveUp: rendered === false,\n  });\n\n  return (\n    <div\n      ref={ref}\n      className=\"relative aspect-[16/9] w-full overflow-hidden bg-white\"\n    >\n      {source === 'video' && media ? (\n        <video\n          ref={videoRef}\n          className=\"absolute inset-0 h-full w-full object-cover object-top\"\n          muted\n          loop\n          playsInline\n          preload=\"metadata\"\n          poster={media.poster}\n          aria-hidden\n          onError={() => setVideoFailed(true)}\n          onCanPlay={() => {\n            if (!isVisible || document.visibilityState !== 'visible') return;\n            void videoRef.current?.play().catch((error: unknown) => {\n              if (\n                error instanceof DOMException &&\n                error.name === 'AbortError'\n              ) {\n                return;\n              }\n              setVideoFailed(true);\n            });\n          }}\n        >\n          {media.mp4 ? <source src={media.mp4} type=\"video/mp4\" /> : null}\n          {media.webm ? <source src={media.webm} type=\"video/webm\" /> : null}\n        </video>\n      ) : source === 'poster' && media ? (\n        // eslint-disable-next-line @next/next/no-img-element\n        <img\n          src={media.poster}\n          alt=\"\"\n          aria-hidden\n          loading=\"lazy\"\n          onError={() => setPosterFailed(true)}\n          className=\"absolute inset-0 h-full w-full object-cover object-top\"\n        />\n      ) : source === 'still' && still ? (\n        // eslint-disable-next-line @next/next/no-img-element\n        <img\n          src={still}\n          alt=\"\"\n          aria-hidden\n          loading=\"lazy\"\n          // Try the next candidate, then the live render, then the placeholder.\n          onError={() => setFailedCount((n) => n + 1)}\n          className=\"absolute inset-0 h-full w-full object-cover object-top\"\n        />\n      ) : source === 'unavailable' ? (\n        <div className=\"absolute inset-0 flex items-center justify-center bg-[var(--bg-elevated)] px-3 text-center\">\n          <span className=\"text-xs text-[var(--text-tertiary)]\">\n            {name ?? 'Preview'} unavailable\n          </span>\n        </div>\n      ) : (\n        <iframe\n          src={url}\n          tabIndex={-1}\n          aria-hidden\n          loading=\"lazy\"\n          onLoad={() => setRendered(true)}\n          className=\"pointer-events-none absolute left-0 top-0 origin-top-left border-0\"\n          style={{\n            width: BASE_WIDTH,\n            height: BASE_WIDTH * (5 / 3),\n            transform: `scale(${scale})`,\n          }}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAoLQ,SAuBe,KAvBf;AAlLR,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAE3B,MAAM,aAAa;AAEnB,MAAM,kBAAkB;AA4BjB,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAkBG;AACD,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,GAAG;AACtC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAC5D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAyB,IAAI;AAQ7D,QAAM,cAAc,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,GAAG;AAAA,IAC1D,CAAC,QAAuB,CAAC,CAAC;AAAA,EAC5B;AACA,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,QAAQ,WAAW,WAAW,KAAK;AACzC,QAAM,QAAQ,UACV;AAAA,IACE,QAAQ,GAAG,cAAc,CAAC,GAAG,QAAQ,MAAM;AAAA,IAC3C,MAAM,QAAQ,OAAO,GAAG,cAAc,CAAC,GAAG,QAAQ,IAAI,KAAK;AAAA,IAC3D,KAAK,QAAQ,MAAM,GAAG,cAAc,CAAC,GAAG,QAAQ,GAAG,KAAK;AAAA,EAC1D,IACA;AAEJ,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AACd,UAAM,aACJ,UACA;AACF,QACE,OAAO,WAAW,kCAAkC,EAAE,WACtD,YAAY,aAAa,MACzB;AACA;AAAA,IACF;AACA,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC,KAAM;AACX,UAAM,eAAe,IAAI;AAAA,MACvB,CAAC,CAAC,KAAK,MAAM;AACX,YAAI,CAAC,MAAM,eAAgB;AAC3B,2BAAmB,IAAI;AACvB,qBAAa,WAAW;AAAA,MAC1B;AAAA,MACA,EAAE,YAAY,YAAY;AAAA,IAC5B;AACA,UAAM,qBAAqB,IAAI;AAAA,MAC7B,CAAC,CAAC,KAAK,MAAM,aAAa,MAAM,cAAc;AAAA,MAC9C,EAAE,WAAW,KAAK;AAAA,IACpB;AACA,iBAAa,QAAQ,IAAI;AACzB,uBAAmB,QAAQ,IAAI;AAC/B,WAAO,MAAM;AACX,mBAAa,WAAW;AACxB,yBAAmB,WAAW;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,MAAO;AACZ,UAAM,eAAe,MAAM;AACzB,UAAI,aAAa,SAAS,oBAAoB,WAAW;AACvD,aAAK,MAAM,KAAK,EAAE,MAAM,CAAC,UAAmB;AAC1C,cAAI,iBAAiB,gBAAgB,MAAM,SAAS,cAAc;AAChE;AAAA,UACF;AACA,yBAAe,IAAI;AAAA,QACrB,CAAC;AAAA,MACH,OAAO;AACL,cAAM,MAAM;AAAA,MACd;AAAA,IACF;AACA,iBAAa;AACb,aAAS,iBAAiB,oBAAoB,YAAY;AAC1D,WAAO,MAAM,SAAS,oBAAoB,oBAAoB,YAAY;AAAA,EAC5E,GAAG,CAAC,WAAW,eAAe,CAAC;AAE/B,YAAU,MAAM;AACd,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AACT,UAAM,KAAK,IAAI,eAAe,CAAC,CAAC,KAAK,MAAM;AACzC,UAAI,MAAO,UAAS,MAAM,YAAY,QAAQ,UAAU;AAAA,IAC1D,CAAC;AACD,OAAG,QAAQ,EAAE;AACb,WAAO,MAAM,GAAG,WAAW;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,MAAO;AAGX,UAAM,IAAI;AAAA,MACR,MAAM,YAAY,CAAC,MAAO,MAAM,OAAO,QAAQ,CAAE;AAAA,MACjD;AAAA,IACF;AACA,WAAO,MAAM,aAAa,CAAC;AAAA,EAC7B,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,SAAS,WAAW;AAAA,IACxB,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,OAAO,CAAC,CAAC,MAAM;AAAA,IAC7C,WAAW,CAAC,CAAC,OAAO;AAAA,IACpB,aAAa,CAAC,CAAC,SAAS;AAAA,IACxB;AAAA,IACA;AAAA,IACA,gBAAgB,CAAC,CAAC;AAAA,IAClB,cAAc,aAAa;AAAA,EAC7B,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MAET,qBAAW,WAAW,QACrB;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAK;AAAA,UACL,MAAI;AAAA,UACJ,aAAW;AAAA,UACX,SAAQ;AAAA,UACR,QAAQ,MAAM;AAAA,UACd,eAAW;AAAA,UACX,SAAS,MAAM,eAAe,IAAI;AAAA,UAClC,WAAW,MAAM;AACf,gBAAI,CAAC,aAAa,SAAS,oBAAoB,UAAW;AAC1D,iBAAK,SAAS,SAAS,KAAK,EAAE,MAAM,CAAC,UAAmB;AACtD,kBACE,iBAAiB,gBACjB,MAAM,SAAS,cACf;AACA;AAAA,cACF;AACA,6BAAe,IAAI;AAAA,YACrB,CAAC;AAAA,UACH;AAAA,UAEC;AAAA,kBAAM,MAAM,oBAAC,YAAO,KAAK,MAAM,KAAK,MAAK,aAAY,IAAK;AAAA,YAC1D,MAAM,OAAO,oBAAC,YAAO,KAAK,MAAM,MAAM,MAAK,cAAa,IAAK;AAAA;AAAA;AAAA,MAChE,IACE,WAAW,YAAY;AAAA;AAAA,QAEzB;AAAA,UAAC;AAAA;AAAA,YACC,KAAK,MAAM;AAAA,YACX,KAAI;AAAA,YACJ,eAAW;AAAA,YACX,SAAQ;AAAA,YACR,SAAS,MAAM,gBAAgB,IAAI;AAAA,YACnC,WAAU;AAAA;AAAA,QACZ;AAAA,UACE,WAAW,WAAW;AAAA;AAAA,QAExB;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAI;AAAA,YACJ,eAAW;AAAA,YACX,SAAQ;AAAA,YAER,SAAS,MAAM,eAAe,CAAC,MAAM,IAAI,CAAC;AAAA,YAC1C,WAAU;AAAA;AAAA,QACZ;AAAA,UACE,WAAW,gBACb,oBAAC,SAAI,WAAU,8FACb,+BAAC,UAAK,WAAU,uCACb;AAAA,gBAAQ;AAAA,QAAU;AAAA,SACrB,GACF,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,UAAU;AAAA,UACV,eAAW;AAAA,UACX,SAAQ;AAAA,UACR,QAAQ,MAAM,YAAY,IAAI;AAAA,UAC9B,WAAU;AAAA,UACV,OAAO;AAAA,YACL,OAAO;AAAA,YACP,QAAQ,cAAc,IAAI;AAAA,YAC1B,WAAW,SAAS,KAAK;AAAA,UAC3B;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/templates/template-preview-dialog.d.ts

@@ -0,0 +1,25 @@
+import type { RegistryTemplate } from '@withpotter/lib/template-context';
+/**
+ * One template, opened over the shelf it came from.
+ *
+ * Split out of `template-gallery` on the 500-line rule, and the seam is a real
+ * one: the gallery is a list — filtering, paging, which tile is chosen — and
+ * this is the single thing being LOOKED at, with the controls that belong to
+ * looking. Nothing here needs to know how the shelf was narrowed.
+ */
+export declare function TemplatePreviewDialog({ open, onClose, template, canStep, onStep, previewUrl, isCurrent, isOwned, using, onUse, useLabel, useIsPrimary, useBlockedReason, }: {
+    open: boolean;
+    onClose: () => void;
+    template: RegistryTemplate | null;
+    /** False when the shelf holds one template and there is nowhere to step. */
+    canStep: boolean;
+    onStep: (step: 1 | -1) => void;
+    previewUrl: string;
+    isCurrent: boolean;
+    isOwned: boolean;
+    using: boolean;
+    onUse: () => void;
+    useLabel?: string;
+    useIsPrimary?: boolean;
+    useBlockedReason?: string | null;
+}): import("react").JSX.Element;

package/dist/templates/template-preview-dialog.js

@@ -0,0 +1,70 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Dialog, DialogContent, DialogTitle } from "@withpotter/ui-kit/dialog";
+import { useIsMobile } from "@withpotter/hooks/use-mobile";
+import { TemplatePreviewPanel } from "./template-preview-panel";
+import { TemplatePreviewSplit } from "./template-preview-split";
+function TemplatePreviewDialog({
+  open,
+  onClose,
+  template,
+  canStep,
+  onStep,
+  previewUrl,
+  isCurrent,
+  isOwned,
+  using,
+  onUse,
+  useLabel,
+  useIsPrimary,
+  useBlockedReason
+}) {
+  const isMobile = useIsMobile();
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (v) => !v && onClose(), children: /* @__PURE__ */ jsx(DialogContent, { className: "max-w-6xl overflow-visible p-0", children: template && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(DialogTitle, { className: "sr-only", children: [
+      template.name,
+      " preview"
+    ] }),
+    canStep && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Previous template",
+          onClick: () => onStep(-1),
+          className: "absolute -left-14 top-1/2 z-10 hidden size-10 -translate-y-1/2 place-items-center rounded-full bg-[var(--bg-base)]/80 text-[var(--text-primary)] shadow-md backdrop-blur transition-colors hover:bg-[var(--bg-base)] sm:grid",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Next template",
+          onClick: () => onStep(1),
+          className: "absolute -right-14 top-1/2 z-10 hidden size-10 -translate-y-1/2 place-items-center rounded-full bg-[var(--bg-base)]/80 text-[var(--text-primary)] shadow-md backdrop-blur transition-colors hover:bg-[var(--bg-base)] sm:grid",
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+        }
+      )
+    ] }),
+    (() => {
+      const shared = {
+        template,
+        previewUrl,
+        isCurrent,
+        isOwned,
+        using,
+        onUse,
+        useLabel,
+        useIsPrimary,
+        useBlockedReason
+      };
+      return isMobile ? /* @__PURE__ */ jsx(TemplatePreviewPanel, { ...shared, size: "stage" }) : /* @__PURE__ */ jsx(TemplatePreviewSplit, { ...shared });
+    })()
+  ] }) }) });
+}
+export {
+  TemplatePreviewDialog
+};
+//# sourceMappingURL=template-preview-dialog.js.map

package/dist/templates/template-preview-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/templates/template-preview-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport type { RegistryTemplate } from '@withpotter/lib/template-context';\nimport { Dialog, DialogContent, DialogTitle } from '@withpotter/ui-kit/dialog';\nimport { useIsMobile } from '@withpotter/hooks/use-mobile';\nimport { TemplatePreviewPanel } from './template-preview-panel';\nimport { TemplatePreviewSplit } from './template-preview-split';\n\n/**\n * One template, opened over the shelf it came from.\n *\n * Split out of `template-gallery` on the 500-line rule, and the seam is a real\n * one: the gallery is a list — filtering, paging, which tile is chosen — and\n * this is the single thing being LOOKED at, with the controls that belong to\n * looking. Nothing here needs to know how the shelf was narrowed.\n */\nexport function TemplatePreviewDialog({\n  open,\n  onClose,\n  template,\n  canStep,\n  onStep,\n  previewUrl,\n  isCurrent,\n  isOwned,\n  using,\n  onUse,\n  useLabel,\n  useIsPrimary,\n  useBlockedReason,\n}: {\n  open: boolean;\n  onClose: () => void;\n  template: RegistryTemplate | null;\n  /** False when the shelf holds one template and there is nowhere to step. */\n  canStep: boolean;\n  onStep: (step: 1 | -1) => void;\n  previewUrl: string;\n  isCurrent: boolean;\n  isOwned: boolean;\n  using: boolean;\n  onUse: () => void;\n  useLabel?: string;\n  useIsPrimary?: boolean;\n  useBlockedReason?: string | null;\n}) {\n  const isMobile = useIsMobile();\n\n  return (\n    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>\n      {/* `overflow-visible` ON PURPOSE, and it is what lets the arrows be\n          outside. `DialogContent` ships `max-h-[calc(100dvh-2rem)]\n          overflow-y-auto` so a tall dialog can scroll — and CSS will not let\n          one axis be `auto` while the other is `visible`, so `overflow-x`\n          computes to `auto` too and silently clips anything positioned past the\n          panel edge. The arrows were rendering and being cut off.\n\n          Safe here because this dialog cannot outgrow the viewport: the render\n          is capped at `72vh` and the footer is one row. */}\n      <DialogContent className=\"max-w-6xl overflow-visible p-0\">\n        {template && (\n          <>\n            {/* THE DIALOG HAS TO BE NAMED. Radix logs a hard warning without it\n                and a screen reader announces an unlabelled dialog, which is the\n                whole point of reaching for the primitive. The name is already\n                on screen in the footer, so this is the same string, hidden. */}\n            <DialogTitle className=\"sr-only\">\n              {template.name} preview\n            </DialogTitle>\n\n            {/* STEP THROUGH THE SHELF WITHOUT LEAVING IT.\n                John, 2026-09-08: *\"the modal can have front and back arow to\n                move to the next temaplte\"*. Comparing two templates meant\n                closing, finding the next tile and opening it again — three acts\n                for the one thing anybody does here, which is look at them one\n                after another.\n\n                They WRAP on purpose: the shelf is a ring of options, not a\n                document with a beginning, and somebody on the last template\n                pressing next wants the first one, not a dead control.\n\n                OUTSIDE THE PANEL (John, 2026-09-08). Inside, they sat on the\n                storefront being judged — two chips laid over the thing the\n                whole modal exists to show, covering its left and right edges,\n                which on a web page is where the navigation and the cart live.\n                Out on the scrim they are unmistakably controls of the VIEWER\n                rather than parts of the page. At `max-w-5xl` on a 1440 screen\n                there is 208px of scrim each side, so a 56px offset clears the\n                panel and still lands well inside the viewport; below `sm` there\n                is no room for that and no hover to find them with, so they are\n                hidden and the shelf underneath is the way back. */}\n            {canStep && (\n              <>\n                <button\n                  type=\"button\"\n                  aria-label=\"Previous template\"\n                  onClick={() => onStep(-1)}\n                  className=\"absolute -left-14 top-1/2 z-10 hidden size-10 -translate-y-1/2 place-items-center rounded-full bg-[var(--bg-base)]/80 text-[var(--text-primary)] shadow-md backdrop-blur transition-colors hover:bg-[var(--bg-base)] sm:grid\"\n                >\n                  <ChevronLeft className=\"size-4\" />\n                </button>\n                <button\n                  type=\"button\"\n                  aria-label=\"Next template\"\n                  onClick={() => onStep(1)}\n                  className=\"absolute -right-14 top-1/2 z-10 hidden size-10 -translate-y-1/2 place-items-center rounded-full bg-[var(--bg-base)]/80 text-[var(--text-primary)] shadow-md backdrop-blur transition-colors hover:bg-[var(--bg-base)] sm:grid\"\n                >\n                  <ChevronRight className=\"size-4\" />\n                </button>\n              </>\n            )}\n\n            {(() => {\n              const shared = {\n                template,\n                previewUrl,\n                isCurrent,\n                isOwned,\n                using,\n                onUse,\n                useLabel,\n                useIsPrimary,\n                useBlockedReason,\n              };\n              return isMobile ? (\n                <TemplatePreviewPanel {...shared} size=\"stage\" />\n              ) : (\n                <TemplatePreviewSplit {...shared} />\n              );\n            })()}\n          </>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AAmEY,SA0BE,UAOI,KAjCN;AAjEZ,SAAS,aAAa,oBAAoB;AAE1C,SAAS,QAAQ,eAAe,mBAAmB;AACnD,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AAU9B,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAeG;AACD,QAAM,WAAW,YAAY;AAE7B,SACE,oBAAC,UAAO,MAAY,cAAc,CAAC,MAAM,CAAC,KAAK,QAAQ,GAUrD,8BAAC,iBAAc,WAAU,kCACtB,sBACC,iCAKE;AAAA,yBAAC,eAAY,WAAU,WACpB;AAAA,eAAS;AAAA,MAAK;AAAA,OACjB;AAAA,IAuBC,WACC,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAW;AAAA,UACX,SAAS,MAAM,OAAO,EAAE;AAAA,UACxB,WAAU;AAAA,UAEV,8BAAC,eAAY,WAAU,UAAS;AAAA;AAAA,MAClC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAW;AAAA,UACX,SAAS,MAAM,OAAO,CAAC;AAAA,UACvB,WAAU;AAAA,UAEV,8BAAC,gBAAa,WAAU,UAAS;AAAA;AAAA,MACnC;AAAA,OACF;AAAA,KAGA,MAAM;AACN,YAAM,SAAS;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,aAAO,WACL,oBAAC,wBAAsB,GAAG,QAAQ,MAAK,SAAQ,IAE/C,oBAAC,wBAAsB,GAAG,QAAQ;AAAA,IAEtC,GAAG;AAAA,KACL,GAEJ,GACF;AAEJ;","names":[]}

package/dist/templates/template-preview-panel.d.ts

@@ -0,0 +1,75 @@
+import type { RegistryTemplate } from '@withpotter/lib/template-context';
+interface TemplatePreviewPanelProps {
+    template: RegistryTemplate;
+    previewUrl: string;
+    isCurrent: boolean;
+    isOwned: boolean;
+    using: boolean;
+    onUse: () => void;
+    /** Setup says "Start with this"; the gallery says "Use this template". Same
+     *  panel, because the difference is a word, not a surface. */
+    useLabel?: string;
+    /**
+     * Whether this panel's action is the page's primary move.
+     *
+     * On the dashboard it is: choosing a template is the whole errand, and there
+     * is no other commit on screen. Inside setup there IS one — the flow's own
+     * Continue — and both were rendering as primary at once, so opening a preview
+     * put two bright buttons on screen that did the same thing. The flow keeps
+     * the primary and this becomes the quieter way to take it from where you are
+     * already looking.
+     */
+    useIsPrimary?: boolean;
+    /**
+     * Why this person cannot switch template, or null when they can.
+     *
+     * The api gates the switch on `canManageBusinessProfile | canManageSettings`,
+     * so a staff member pressing this got a refusal instead of a template. Said
+     * here, in place of the button, for the reason the note below already gives:
+     * a control you cannot press is not a control.
+     */
+    useBlockedReason?: string | null;
+    /**
+     * `panel` sits above a grid of other templates and shares the screen with
+     * them. `stage` IS the screen — the shelf has been replaced by this one
+     * template — so the render gets the height the grid gave up, and the
+     * description earns its place.
+     */
+    size?: 'panel' | 'stage';
+    /** The way out, drawn above the render. Omit on `panel`, where the grid is
+     *  still on screen underneath and is its own way back. */
+    onBack?: () => void;
+    /**
+     * Kept on the contract, unread since the workflow view was removed.
+     *
+     * The workflow belongs to the ARCHETYPE, not to the template — two bookings
+     * templates run the identical one, and a padel club and a salon differ in
+     * what they look like rather than in what happens after somebody books. So
+     * this takes the merchant's own intents rather than reading anything off the
+     * template. With none, the toggle does not render: there is nothing to draw.
+     */
+    intents?: string[];
+}
+/**
+ * The opened-up template — the site itself, running, with its name and the Use
+ * action under it. Lives above the gallery so the rest of the templates flow
+ * beneath it.
+ *
+ * IT ONLY APPEARS WHEN ASKED FOR. The gallery drove this off whatever was
+ * selected, and onboarding preselects the archetype's match, so the step opened
+ * on one template's panel with the shelf pushed off the bottom of the screen —
+ * under a heading reading "Pick a starting point". `previewId` separates the
+ * two: chosen is a badge on a tile, previewed is a thing you tapped.
+ *
+ * Everything else here got smaller. A device toggle, an author line and a
+ * description all sat around a live render of the site, describing in words
+ * what was on screen in full. What is left is the render and the decision.
+ *
+ * TWO SIZES, because it does two jobs. As a `panel` it sits above the shelf and
+ * shares the screen with it. As a `stage` it has REPLACED the shelf — one click
+ * on a tile and this is the whole view — so it takes the height the grid gave
+ * up, carries the way back, and earns its description back, there being nothing
+ * else on screen to read it against.
+ */
+export declare function TemplatePreviewPanel({ template, previewUrl, isCurrent, isOwned, using, onUse, useLabel, useIsPrimary, useBlockedReason, size, onBack, }: TemplatePreviewPanelProps): import("react").JSX.Element;
+export {};

package/dist/templates/template-preview-panel.js

@@ -0,0 +1,151 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { motion, useReducedMotion } from "motion/react";
+import { ArrowLeft, ExternalLink } from "lucide-react";
+import { springs } from "@withpotter/lib/motion";
+import { Button } from "@withpotter/ui-kit/button";
+import { Badge } from "@withpotter/ui-kit/badge";
+import { TemplateStill } from "./template-still";
+const PREVIEW_H = 2600;
+const RENDER_GRACE_MS = 6e3;
+const formatNgn = (n) => `\u20A6${n.toLocaleString("en-NG")}`;
+function TemplatePreviewPanel({
+  template,
+  previewUrl,
+  isCurrent,
+  isOwned,
+  using,
+  onUse,
+  useLabel,
+  useIsPrimary = true,
+  useBlockedReason,
+  size = "panel",
+  onBack
+}) {
+  const [live, setLive] = useState("pending");
+  const reduce = useReducedMotion();
+  const [shownId, setShownId] = useState(template.id);
+  if (shownId !== template.id) {
+    setShownId(template.id);
+    setLive("pending");
+  }
+  useEffect(() => {
+    const t = setTimeout(
+      () => setLive((s) => s === "pending" ? "failed" : s),
+      RENDER_GRACE_MS
+    );
+    return () => clearTimeout(t);
+  }, [previewUrl]);
+  const price = template.price ?? 0;
+  const needsPurchase = price > 0 && !isOwned;
+  const frame = live === "failed" ? /* @__PURE__ */ jsx(
+    TemplateStill,
+    {
+      template,
+      className: "h-full w-full object-cover object-top"
+    }
+  ) : (
+    /* IT SCROLLS ITSELF. John, 2026-09-08: *"make sure the tempalte is auto
+            scrolling on its own to show the site"*.
+    
+            The frame shows the top ~700px of a storefront, which is a hero and
+            part of a nav — the same thing every template has. What tells one apart
+            from another is what comes after it, and nobody scrolls a preview they
+            opened to glance at.
+    
+            The TRANSFORM moves, not the iframe's scroll position: the preview is a
+            different origin, so its scrollTop is unreachable from here by design.
+            Rendering it at `PREVIEW_H` inside a clipped box and translating that
+            box upward is our own element moving, which needs no permission and
+            stays on the compositor.
+    
+            It plays once and stops at the bottom rather than looping. A panel that
+            scrolls forever is a carousel, and a carousel makes you wait for the
+            part you wanted to look at. */
+    /* @__PURE__ */ jsx(
+      motion.iframe,
+      {
+        src: previewUrl,
+        title: `${template.name} preview`,
+        onLoad: () => setLive("ok"),
+        className: "w-full border-0 bg-white",
+        style: { height: PREVIEW_H },
+        initial: { y: 0 },
+        animate: reduce || live !== "ok" ? { y: 0 } : { y: -(PREVIEW_H - 720) },
+        transition: reduce ? { duration: 0 } : { duration: 14, ease: "linear", delay: 1.2 },
+        allow: "autoplay; fullscreen"
+      }
+    )
+  );
+  return /* @__PURE__ */ jsxs("section", { className: "flex flex-col overflow-hidden rounded-2xl border border-[var(--border-default)] bg-[var(--bg-base)] shadow-[var(--shadow-stage)]", children: [
+    onBack && /* @__PURE__ */ jsx("div", { className: "flex border-b border-[var(--border-subtle)] px-4 py-2", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onBack,
+        className: "inline-flex items-center gap-2 text-sm text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]",
+        children: [
+          /* @__PURE__ */ jsx(ArrowLeft, {}),
+          "All templates"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: (
+          /* ON THE STAGE THE ACTION SITS ABOVE THE RENDER, not under it.
+             The frame is 72vh of iframe, and an iframe eats the scroll gesture
+             that would reach anything below it — so on a phone the merchant who
+             tapped a template met a full-screen site with no visible way on,
+             and the only control still in view was "Skip for now". They pressed
+             it, which threw away the choice they had just made. `order-last`
+             moves only the frame: name, decision, site. */
+          size === "stage" ? "order-last h-[72vh] min-h-[560px]" : "h-[62vh] min-h-[460px]"
+        ),
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        transition: springs.gentle,
+        children: /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-hidden bg-white", children: frame })
+      },
+      template.id
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4 border-t border-[var(--border-subtle)] px-4 py-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold text-[var(--text-primary)]", children: template.name }),
+          isCurrent && /* @__PURE__ */ jsx(Badge, { variant: "success", children: "Current" })
+        ] }),
+        size === "stage" && template.description && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 max-w-[52ch] text-sm text-[var(--text-tertiary)]", children: template.description })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            size: "md",
+            icon: /* @__PURE__ */ jsx(ExternalLink, { className: "h-[15px] w-[15px]" }),
+            className: "hidden sm:inline-flex",
+            onClick: () => window.open(previewUrl, "_blank", "noopener"),
+            children: "Open preview"
+          }
+        ),
+        isCurrent ? null : useBlockedReason ? /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: useBlockedReason }) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: useIsPrimary ? "primary" : "secondary",
+            size: "md",
+            loading: using,
+            onClick: onUse,
+            children: needsPurchase ? `Buy \xB7 ${formatNgn(price)}` : useLabel ?? "Use this template"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  TemplatePreviewPanel
+};
+//# sourceMappingURL=template-preview-panel.js.map

package/dist/templates/template-preview-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/templates/template-preview-panel.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { ArrowLeft, ExternalLink } from 'lucide-react';\nimport { springs } from '@withpotter/lib/motion';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Badge } from '@withpotter/ui-kit/badge';\nimport type { RegistryTemplate } from '@withpotter/lib/template-context';\nimport { TemplateStill } from './template-still';\n\n/** Same six seconds the gallery thumbnail waits. Long enough for a cold\n *  render, short enough not to hold a blank panel. */\n/**\n * How much of the storefront the frame holds while it scrolls itself.\n *\n * 2600px is roughly three screens of a template — hero, the section under it,\n * and enough of the next to show the page has a rhythm. Taller than that and\n * the pass either crawls or has to move fast enough to be unreadable.\n */\nconst PREVIEW_H = 2600;\n\nconst RENDER_GRACE_MS = 6000;\n\ninterface TemplatePreviewPanelProps {\n  template: RegistryTemplate;\n  previewUrl: string;\n  isCurrent: boolean;\n  isOwned: boolean;\n  using: boolean;\n  onUse: () => void;\n  /** Setup says \"Start with this\"; the gallery says \"Use this template\". Same\n   *  panel, because the difference is a word, not a surface. */\n  useLabel?: string;\n  /**\n   * Whether this panel's action is the page's primary move.\n   *\n   * On the dashboard it is: choosing a template is the whole errand, and there\n   * is no other commit on screen. Inside setup there IS one — the flow's own\n   * Continue — and both were rendering as primary at once, so opening a preview\n   * put two bright buttons on screen that did the same thing. The flow keeps\n   * the primary and this becomes the quieter way to take it from where you are\n   * already looking.\n   */\n  useIsPrimary?: boolean;\n  /**\n   * Why this person cannot switch template, or null when they can.\n   *\n   * The api gates the switch on `canManageBusinessProfile | canManageSettings`,\n   * so a staff member pressing this got a refusal instead of a template. Said\n   * here, in place of the button, for the reason the note below already gives:\n   * a control you cannot press is not a control.\n   */\n  useBlockedReason?: string | null;\n  /**\n   * `panel` sits above a grid of other templates and shares the screen with\n   * them. `stage` IS the screen — the shelf has been replaced by this one\n   * template — so the render gets the height the grid gave up, and the\n   * description earns its place.\n   */\n  size?: 'panel' | 'stage';\n  /** The way out, drawn above the render. Omit on `panel`, where the grid is\n   *  still on screen underneath and is its own way back. */\n  onBack?: () => void;\n  /**\n   * Kept on the contract, unread since the workflow view was removed.\n   *\n   * The workflow belongs to the ARCHETYPE, not to the template — two bookings\n   * templates run the identical one, and a padel club and a salon differ in\n   * what they look like rather than in what happens after somebody books. So\n   * this takes the merchant's own intents rather than reading anything off the\n   * template. With none, the toggle does not render: there is nothing to draw.\n   */\n  intents?: string[];\n}\n\nconst formatNgn = (n: number) => `₦${n.toLocaleString('en-NG')}`;\n\n/**\n * The opened-up template — the site itself, running, with its name and the Use\n * action under it. Lives above the gallery so the rest of the templates flow\n * beneath it.\n *\n * IT ONLY APPEARS WHEN ASKED FOR. The gallery drove this off whatever was\n * selected, and onboarding preselects the archetype's match, so the step opened\n * on one template's panel with the shelf pushed off the bottom of the screen —\n * under a heading reading \"Pick a starting point\". `previewId` separates the\n * two: chosen is a badge on a tile, previewed is a thing you tapped.\n *\n * Everything else here got smaller. A device toggle, an author line and a\n * description all sat around a live render of the site, describing in words\n * what was on screen in full. What is left is the render and the decision.\n *\n * TWO SIZES, because it does two jobs. As a `panel` it sits above the shelf and\n * shares the screen with it. As a `stage` it has REPLACED the shelf — one click\n * on a tile and this is the whole view — so it takes the height the grid gave\n * up, carries the way back, and earns its description back, there being nothing\n * else on screen to read it against.\n */\nexport function TemplatePreviewPanel({\n  template,\n  previewUrl,\n  isCurrent,\n  isOwned,\n  using,\n  onUse,\n  useLabel,\n  useIsPrimary = true,\n  useBlockedReason,\n  size = 'panel',\n  onBack,\n}: TemplatePreviewPanelProps) {\n  const [live, setLive] = useState<'pending' | 'ok' | 'failed'>('pending');\n\n  // Opening a different template has to forget the last one's verdict, or a\n  // template whose render failed would condemn every template picked after it.\n  // Adjusted during render rather than in an effect so the new template never\n  // paints one frame wearing the old one's fallback.\n  const reduce = useReducedMotion();\n  const [shownId, setShownId] = useState(template.id);\n  if (shownId !== template.id) {\n    setShownId(template.id);\n    setLive('pending');\n  }\n\n  useEffect(() => {\n    // A refused connection never fires onLoad, so the only way to know the\n    // render is not coming is to stop waiting for it.\n    const t = setTimeout(\n      () => setLive((s) => (s === 'pending' ? 'failed' : s)),\n      RENDER_GRACE_MS,\n    );\n    return () => clearTimeout(t);\n  }, [previewUrl]);\n\n  const price = template.price ?? 0;\n  const needsPurchase = price > 0 && !isOwned;\n\n  /**\n   * THE PANEL IS LIVE. The tile is a picture; this is the site.\n   *\n   * It briefly ran the tile's still-first precedence, on the argument that a\n   * gallery should not need the renderer to be up. That argument holds for\n   * eleven thumbnails and collapses here: someone who opened a template asked to\n   * SEE it, and a static capture of the top 900px is not a site — you cannot\n   * scroll it, the menu does not open, and the thing being judged is whether\n   * this is somewhere a customer could buy. The still is the fallback now, in\n   * the one case that justifies it: the renderer did not answer.\n   */\n  const frame =\n    live === 'failed' ? (\n      <TemplateStill\n        template={template}\n        className=\"h-full w-full object-cover object-top\"\n      />\n    ) : (\n      /* IT SCROLLS ITSELF. John, 2026-09-08: *\"make sure the tempalte is auto\n         scrolling on its own to show the site\"*.\n \n         The frame shows the top ~700px of a storefront, which is a hero and\n         part of a nav — the same thing every template has. What tells one apart\n         from another is what comes after it, and nobody scrolls a preview they\n         opened to glance at.\n \n         The TRANSFORM moves, not the iframe's scroll position: the preview is a\n         different origin, so its scrollTop is unreachable from here by design.\n         Rendering it at `PREVIEW_H` inside a clipped box and translating that\n         box upward is our own element moving, which needs no permission and\n         stays on the compositor.\n \n         It plays once and stops at the bottom rather than looping. A panel that\n         scrolls forever is a carousel, and a carousel makes you wait for the\n         part you wanted to look at. */\n      <motion.iframe\n        src={previewUrl}\n        title={`${template.name} preview`}\n        onLoad={() => setLive('ok')}\n        className=\"w-full border-0 bg-white\"\n        style={{ height: PREVIEW_H }}\n        initial={{ y: 0 }}\n        animate={reduce || live !== 'ok' ? { y: 0 } : { y: -(PREVIEW_H - 720) }}\n        transition={\n          reduce\n            ? { duration: 0 }\n            : { duration: 14, ease: 'linear', delay: 1.2 }\n        }\n        allow=\"autoplay; fullscreen\"\n      />\n    );\n\n  return (\n    <section className=\"flex flex-col overflow-hidden rounded-2xl border border-[var(--border-default)] bg-[var(--bg-base)] shadow-[var(--shadow-stage)]\">\n      {/* The way back OUT of one template, which the stage owes and the panel\n          does not: the panel leaves the shelf on screen underneath it, so the\n          shelf is its own way back. */}\n      {onBack && (\n        <div className=\"flex border-b border-[var(--border-subtle)] px-4 py-2\">\n          <button\n            type=\"button\"\n            onClick={onBack}\n            className=\"inline-flex items-center gap-2 text-sm text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]\"\n          >\n            <ArrowLeft />\n            All templates\n          </button>\n        </div>\n      )}\n      {/* No device toggle. It was two icons that changed nothing a merchant is\n          deciding here — nobody rejects a template because they have not seen\n          its phone layout at this point in setup, and it cost the panel a whole\n          chrome bar above the thing it exists to show. The site is responsive;\n          the place to look at it on a phone is on a phone. */}\n      {/* NO WORKFLOW VIEW (John, 2026-09-07: *\"remove the workflow seciton we\n          dont need it\"*). It drew the archetype's flow on a canvas beside the\n          template — a second full-height surface, on the one screen whose only\n          question is \"this one?\". It also answered about the ARCHETYPE rather\n          than the template, so switching template left it unchanged, which is\n          the tell that it was not part of this decision. */}\n\n      <motion.div\n        key={template.id}\n        /* TALLER, both of them — John, 2026-09-03: *\"this section can be\n           longer height wise.\"* At 46vh the render cut off inside the first\n           screen of the site: a merchant saw the header, the trust strip and\n           the top of \"Shop by category\", which is enough to tell one template\n           from another and not enough to judge one. The point of a live render\n           over a still is that it is the real page, and a real page you cannot\n           see a section of is a still with extra steps. `stage` moves with it\n           so the two keep their order — the stage has replaced the shelf and\n           must never be the shorter of the two. */\n        className={\n          /* ON THE STAGE THE ACTION SITS ABOVE THE RENDER, not under it.\n             The frame is 72vh of iframe, and an iframe eats the scroll gesture\n             that would reach anything below it — so on a phone the merchant who\n             tapped a template met a full-screen site with no visible way on,\n             and the only control still in view was \"Skip for now\". They pressed\n             it, which threw away the choice they had just made. `order-last`\n             moves only the frame: name, decision, site. */\n          size === 'stage'\n            ? 'order-last h-[72vh] min-h-[560px]'\n            : 'h-[62vh] min-h-[460px]'\n        }\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n        transition={springs.gentle}\n      >\n        {/* CLIPPED. The frame is rendered at PREVIEW_H and slid upward, so\n            without this the extra 1900px paints straight over the footer —\n            the name and both actions disappeared under a storefront. */}\n        <div className=\"h-full w-full overflow-hidden bg-white\">{frame}</div>\n      </motion.div>\n\n      {/* Identity + actions.\n          Name and action only. The author line said \"by Box Studio\" on every\n          template, and the description repeated in prose what the merchant is\n          looking directly at — a full-bleed render of the site sits six pixels\n          above it. At this point in setup the question is \"this one?\", and two\n          lines of copy are answering a question nobody asked. */}\n      <div className=\"flex flex-wrap items-center justify-between gap-4 border-t border-[var(--border-subtle)] px-4 py-3\">\n        <div className=\"flex min-w-0 flex-col gap-0.5\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            <p className=\"text-lg font-semibold text-[var(--text-primary)]\">\n              {template.name}\n            </p>\n            {isCurrent && <Badge variant=\"success\">Current</Badge>}\n          </div>\n          {/* ON THE STAGE ONLY.\n              The argument for cutting this stands wherever the grid is still\n              on screen: a line of prose describing the site, six pixels under a\n              full-bleed render of that site, while eleven other tiles are\n              waiting to be compared. On the stage there is nothing to compare\n              against and nothing else to read — the description is the only\n              thing here that says what the template is FOR rather than what it\n              looks like. */}\n          {size === 'stage' && template.description && (\n            <p className=\"line-clamp-2 max-w-[52ch] text-sm text-[var(--text-tertiary)]\">\n              {template.description}\n            </p>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <Button\n            variant=\"secondary\"\n            size=\"md\"\n            icon={<ExternalLink className=\"h-[15px] w-[15px]\" />}\n            className=\"hidden sm:inline-flex\"\n            onClick={() => window.open(previewUrl, '_blank', 'noopener')}\n          >\n            Open preview\n          </Button>\n          {/* NOTHING WHERE THE BADGE ALREADY SPOKE.\n              The row used to carry a disabled \"In use\" button beside a\n              \"Current\" badge on the same line, saying one thing twice — John:\n              *\"current and in use is redundant, pick one\"*. The badge stays,\n              because it belongs to the template's name; the button goes,\n              because a control you cannot press is not a control.\n\n              The star went with it. A rating is an opinion the product asks\n              for, and asking for one in a toolbar — between an action and a\n              badge, while the merchant is looking at something else — is the\n              shape the whole prompt system exists to avoid. It is asked after\n              the flow now, from the dock, like every other question we ask.\n              John: *\"it should either be a pop up on the middle center of the\n              page or below and should be after a flow\"*. */}\n          {isCurrent ? null : useBlockedReason ? (\n            <p className=\"text-xs text-[var(--text-tertiary)]\">\n              {useBlockedReason}\n            </p>\n          ) : (\n            <Button\n              variant={useIsPrimary ? 'primary' : 'secondary'}\n              size=\"md\"\n              loading={using}\n              onClick={onUse}\n            >\n              {needsPurchase\n                ? `Buy · ${formatNgn(price)}`\n                : (useLabel ?? 'Use this template')}\n            </Button>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";AAuJM,cA8CI,YA9CJ;AArJN,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,wBAAwB;AACzC,SAAS,WAAW,oBAAoB;AACxC,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,aAAa;AAEtB,SAAS,qBAAqB;AAW9B,MAAM,YAAY;AAElB,MAAM,kBAAkB;AAsDxB,MAAM,YAAY,CAAC,MAAc,SAAI,EAAE,eAAe,OAAO,CAAC;AAuBvD,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAA8B;AAC5B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAsC,SAAS;AAMvE,QAAM,SAAS,iBAAiB;AAChC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,SAAS,EAAE;AAClD,MAAI,YAAY,SAAS,IAAI;AAC3B,eAAW,SAAS,EAAE;AACtB,YAAQ,SAAS;AAAA,EACnB;AAEA,YAAU,MAAM;AAGd,UAAM,IAAI;AAAA,MACR,MAAM,QAAQ,CAAC,MAAO,MAAM,YAAY,WAAW,CAAE;AAAA,MACrD;AAAA,IACF;AACA,WAAO,MAAM,aAAa,CAAC;AAAA,EAC7B,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,QAAQ,SAAS,SAAS;AAChC,QAAM,gBAAgB,QAAQ,KAAK,CAAC;AAapC,QAAM,QACJ,SAAS,WACP;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmBA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,KAAK;AAAA,QACL,OAAO,GAAG,SAAS,IAAI;AAAA,QACvB,QAAQ,MAAM,QAAQ,IAAI;AAAA,QAC1B,WAAU;AAAA,QACV,OAAO,EAAE,QAAQ,UAAU;AAAA,QAC3B,SAAS,EAAE,GAAG,EAAE;AAAA,QAChB,SAAS,UAAU,SAAS,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,YAAY,KAAK;AAAA,QACtE,YACE,SACI,EAAE,UAAU,EAAE,IACd,EAAE,UAAU,IAAI,MAAM,UAAU,OAAO,IAAI;AAAA,QAEjD,OAAM;AAAA;AAAA,IACR;AAAA;AAGJ,SACE,qBAAC,aAAQ,WAAU,oIAIhB;AAAA,cACC,oBAAC,SAAI,WAAU,yDACb;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,WAAU;AAAA,QAEV;AAAA,8BAAC,aAAU;AAAA,UAAE;AAAA;AAAA;AAAA,IAEf,GACF;AAAA,IAcF;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QAWC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQE,SAAS,UACL,sCACA;AAAA;AAAA,QAEN,SAAS,EAAE,SAAS,EAAE;AAAA,QACtB,SAAS,EAAE,SAAS,EAAE;AAAA,QACtB,YAAY,QAAQ;AAAA,QAKpB,8BAAC,SAAI,WAAU,0CAA0C,iBAAM;AAAA;AAAA,MA7B1D,SAAS;AAAA,IA8BhB;AAAA,IAQA,qBAAC,SAAI,WAAU,sGACb;AAAA,2BAAC,SAAI,WAAU,iCACb;AAAA,6BAAC,SAAI,WAAU,mCACb;AAAA,8BAAC,OAAE,WAAU,oDACV,mBAAS,MACZ;AAAA,UACC,aAAa,oBAAC,SAAM,SAAQ,WAAU,qBAAO;AAAA,WAChD;AAAA,QASC,SAAS,WAAW,SAAS,eAC5B,oBAAC,OAAE,WAAU,iEACV,mBAAS,aACZ;AAAA,SAEJ;AAAA,MAEA,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,MAAM,oBAAC,gBAAa,WAAU,qBAAoB;AAAA,YAClD,WAAU;AAAA,YACV,SAAS,MAAM,OAAO,KAAK,YAAY,UAAU,UAAU;AAAA,YAC5D;AAAA;AAAA,QAED;AAAA,QAeC,YAAY,OAAO,mBAClB,oBAAC,OAAE,WAAU,uCACV,4BACH,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,eAAe,YAAY;AAAA,YACpC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,SAAS;AAAA,YAER,0BACG,YAAS,UAAU,KAAK,CAAC,KACxB,YAAY;AAAA;AAAA,QACnB;AAAA,SAEJ;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/templates/template-preview-split.d.ts

@@ -0,0 +1,27 @@
+import type { RegistryTemplate } from '@withpotter/lib/template-context';
+interface TemplatePreviewSplitProps {
+    template: RegistryTemplate;
+    previewUrl: string;
+    isCurrent: boolean;
+    isOwned: boolean;
+    using: boolean;
+    onUse: () => void;
+    useLabel?: string;
+    useIsPrimary?: boolean;
+    useBlockedReason?: string | null;
+}
+/**
+ * The desktop template dialog: the template's details on the left, the site
+ * running on the right.
+ *
+ * The stacked panel spent its top on a render and its bottom on one row of
+ * name and buttons, so the description and tags the registry already carries
+ * never had a place to be read. Side by side, the left column holds what the
+ * template is — name, author, what it is for, what it suits — and the decision;
+ * the right column is the whole height for the site.
+ *
+ * Desktop only. Below `lg` the dialog keeps the stacked panel, where the action
+ * sits above the render so an iframe cannot swallow the gesture that reaches it.
+ */
+export declare function TemplatePreviewSplit({ template, previewUrl, isCurrent, isOwned, using, onUse, useLabel, useIsPrimary, useBlockedReason, }: TemplatePreviewSplitProps): import("react").JSX.Element;
+export {};