@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1,121 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { motion, useReducedMotion } from "motion/react";
+import { ExternalLink } from "lucide-react";
+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 PANE_H = 720;
+const formatNgn = (n) => `\u20A6${n.toLocaleString("en-NG")}`;
+function TemplatePreviewSplit({
+  template,
+  previewUrl,
+  isCurrent,
+  isOwned,
+  using,
+  onUse,
+  useLabel,
+  useIsPrimary = true,
+  useBlockedReason
+}) {
+  const reduce = useReducedMotion();
+  const [live, setLive] = useState("pending");
+  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 author = template.author?.trim();
+  return /* @__PURE__ */ jsxs("section", { className: "grid h-[min(78vh,720px)] min-h-[520px] grid-cols-[minmax(320px,380px)_1fr] overflow-hidden rounded-2xl bg-[var(--bg-base)] shadow-[var(--shadow-stage)]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-col gap-4 overflow-y-auto p-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-4xl font-semibold leading-tight tracking-[-0.02em] text-[var(--text-primary)]", children: template.name }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          author && /* @__PURE__ */ jsxs("p", { className: "text-sm text-[var(--text-tertiary)]", children: [
+            "by ",
+            author
+          ] }),
+          isCurrent && /* @__PURE__ */ jsx(Badge, { variant: "success", children: "Current" })
+        ] })
+      ] }),
+      template.description && /* @__PURE__ */ jsx("p", { className: "text-base leading-6 text-[var(--text-secondary)]", children: template.description }),
+      template.tags.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-2", children: template.tags.slice(0, 6).map((tag) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Badge, { variant: "info", children: tag }) }, tag)) }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-auto flex flex-col gap-3 pt-4", children: [
+        isCurrent ? null : useBlockedReason ? /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-tertiary)]", children: useBlockedReason }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+          !isCurrent && !useBlockedReason && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: useIsPrimary ? "primary" : "secondary",
+              size: "md",
+              loading: using,
+              onClick: onUse,
+              children: needsPurchase ? `Buy \xB7 ${formatNgn(price)}` : useLabel ?? "Use this template"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              size: "md",
+              icon: /* @__PURE__ */ jsx(ExternalLink, { className: "h-[15px] w-[15px]" }),
+              className: isCurrent || useBlockedReason ? "col-span-2" : "",
+              onClick: () => window.open(previewUrl, "_blank", "noopener"),
+              children: "Preview"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "min-h-0 overflow-hidden bg-white",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        children: live === "failed" ? /* @__PURE__ */ jsx(
+          TemplateStill,
+          {
+            template,
+            className: "h-full w-full object-cover object-top"
+          }
+        ) : (
+          /* Scrolls itself once and stops, as the stacked panel does: the
+             preview is another origin, so its scrollTop is out of reach and
+             our own clipped box is what moves. */
+          /* @__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 - PANE_H) },
+              transition: reduce ? { duration: 0 } : { duration: 14, ease: "linear", delay: 1.2 },
+              allow: "autoplay; fullscreen"
+            }
+          )
+        )
+      },
+      template.id
+    )
+  ] });
+}
+export {
+  TemplatePreviewSplit
+};
+//# sourceMappingURL=template-preview-split.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/templates/template-preview-split.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { ExternalLink } from 'lucide-react';\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/** Roughly three screens of a template, slid up behind a clipped box. */\nconst PREVIEW_H = 2600;\nconst RENDER_GRACE_MS = 6000;\nconst PANE_H = 720;\n\nconst formatNgn = (n: number) => `₦${n.toLocaleString('en-NG')}`;\n\ninterface TemplatePreviewSplitProps {\n  template: RegistryTemplate;\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\n/**\n * The desktop template dialog: the template's details on the left, the site\n * running on the right.\n *\n * The stacked panel spent its top on a render and its bottom on one row of\n * name and buttons, so the description and tags the registry already carries\n * never had a place to be read. Side by side, the left column holds what the\n * template is — name, author, what it is for, what it suits — and the decision;\n * the right column is the whole height for the site.\n *\n * Desktop only. Below `lg` the dialog keeps the stacked panel, where the action\n * sits above the render so an iframe cannot swallow the gesture that reaches it.\n */\nexport function TemplatePreviewSplit({\n  template,\n  previewUrl,\n  isCurrent,\n  isOwned,\n  using,\n  onUse,\n  useLabel,\n  useIsPrimary = true,\n  useBlockedReason,\n}: TemplatePreviewSplitProps) {\n  const reduce = useReducedMotion();\n  const [live, setLive] = useState<'pending' | 'ok' | 'failed'>('pending');\n\n  // A different template forgets the last one's verdict, adjusted during render\n  // so the new one never paints a frame wearing the old one's fallback.\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; 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  const author = template.author?.trim();\n\n  return (\n    <section className=\"grid h-[min(78vh,720px)] min-h-[520px] grid-cols-[minmax(320px,380px)_1fr] overflow-hidden rounded-2xl bg-[var(--bg-base)] shadow-[var(--shadow-stage)]\">\n      <div className=\"flex min-h-0 flex-col gap-4 overflow-y-auto p-8\">\n        <div className=\"space-y-2\">\n          <h2 className=\"text-4xl font-semibold leading-tight tracking-[-0.02em] text-[var(--text-primary)]\">\n            {template.name}\n          </h2>\n          <div className=\"flex items-center gap-2\">\n            {author && (\n              <p className=\"text-sm text-[var(--text-tertiary)]\">by {author}</p>\n            )}\n            {isCurrent && <Badge variant=\"success\">Current</Badge>}\n          </div>\n        </div>\n\n        {template.description && (\n          <p className=\"text-base leading-6 text-[var(--text-secondary)]\">\n            {template.description}\n          </p>\n        )}\n\n        {template.tags.length > 0 && (\n          <ul className=\"flex flex-wrap gap-2\">\n            {template.tags.slice(0, 6).map((tag) => (\n              <li key={tag}>\n                <Badge variant=\"info\">{tag}</Badge>\n              </li>\n            ))}\n          </ul>\n        )}\n\n        <div className=\"mt-auto flex flex-col gap-3 pt-4\">\n          {isCurrent ? null : useBlockedReason ? (\n            <p className=\"text-sm text-[var(--text-tertiary)]\">\n              {useBlockedReason}\n            </p>\n          ) : null}\n          <div className=\"grid grid-cols-2 gap-2\">\n            {!isCurrent && !useBlockedReason && (\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            <Button\n              variant=\"secondary\"\n              size=\"md\"\n              icon={<ExternalLink className=\"h-[15px] w-[15px]\" />}\n              className={isCurrent || useBlockedReason ? 'col-span-2' : ''}\n              onClick={() => window.open(previewUrl, '_blank', 'noopener')}\n            >\n              Preview\n            </Button>\n          </div>\n        </div>\n      </div>\n\n      <motion.div\n        key={template.id}\n        className=\"min-h-0 overflow-hidden bg-white\"\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n      >\n        {live === 'failed' ? (\n          <TemplateStill\n            template={template}\n            className=\"h-full w-full object-cover object-top\"\n          />\n        ) : (\n          /* Scrolls itself once and stops, as the stacked panel does: the\n             preview is another origin, so its scrollTop is out of reach and\n             our own clipped box is what moves. */\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={\n              reduce || live !== 'ok' ? { y: 0 } : { y: -(PREVIEW_H - PANE_H) }\n            }\n            transition={\n              reduce\n                ? { duration: 0 }\n                : { duration: 14, ease: 'linear', delay: 1.2 }\n            }\n            allow=\"autoplay; fullscreen\"\n          />\n        )}\n      </motion.div>\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/templates/template-still.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A template's picture, for when its live preview did not answer.
+ *
+ * It used to be one address: the still generated into this app. A host that
+ * has not generated one for a template showed a broken image there, with the
+ * alt text standing in for the picture. So it tries each place a picture can
+ * come from, in order, and moves on when one does not load: the still in this
+ * app, the picture the registry lists for the template, then the one the
+ * renderer serves.
+ */
+export declare function TemplateStill({ template, className, }: {
+    template: {
+        id: string;
+        name: string;
+        thumbnail?: string | null;
+    };
+    className?: string;
+}): import("react").JSX.Element;

package/dist/templates/template-still.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { packagedThumbFor, stillFor } from "./template-tile";
+function TemplateStill({
+  template,
+  className
+}) {
+  const sources = [
+    stillFor(template.id),
+    template.thumbnail || null,
+    packagedThumbFor(template.id)
+  ].filter((src2) => Boolean(src2));
+  const [tried, setTried] = useState({ id: template.id, index: 0 });
+  const index = tried.id === template.id ? tried.index : 0;
+  const src = sources[Math.min(index, sources.length - 1)];
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt: `${template.name} preview`,
+        className,
+        onError: () => {
+          if (index < sources.length - 1)
+            setTried({ id: template.id, index: index + 1 });
+        }
+      }
+    )
+  );
+}
+export {
+  TemplateStill
+};
+//# sourceMappingURL=template-still.js.map

package/dist/templates/template-still.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/templates/template-still.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { packagedThumbFor, stillFor } from './template-tile';\n\n/**\n * A template's picture, for when its live preview did not answer.\n *\n * It used to be one address: the still generated into this app. A host that\n * has not generated one for a template showed a broken image there, with the\n * alt text standing in for the picture. So it tries each place a picture can\n * come from, in order, and moves on when one does not load: the still in this\n * app, the picture the registry lists for the template, then the one the\n * renderer serves.\n */\nexport function TemplateStill({\n  template,\n  className,\n}: {\n  template: { id: string; name: string; thumbnail?: string | null };\n  className?: string;\n}) {\n  const sources = [\n    stillFor(template.id),\n    template.thumbnail || null,\n    packagedThumbFor(template.id),\n  ].filter((src): src is string => Boolean(src));\n  const [tried, setTried] = useState({ id: template.id, index: 0 });\n  // A different template starts again from its first picture.\n  const index = tried.id === template.id ? tried.index : 0;\n  const src = sources[Math.min(index, sources.length - 1)];\n\n  return (\n    // eslint-disable-next-line @next/next/no-img-element\n    <img\n      src={src}\n      alt={`${template.name} preview`}\n      className={className}\n      onError={() => {\n        if (index < sources.length - 1)\n          setTried({ id: template.id, index: index + 1 });\n      }}\n    />\n  );\n}\n"],"mappings":";AAkCI;AAhCJ,SAAS,gBAAgB;AACzB,SAAS,kBAAkB,gBAAgB;AAYpC,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AACF,GAGG;AACD,QAAM,UAAU;AAAA,IACd,SAAS,SAAS,EAAE;AAAA,IACpB,SAAS,aAAa;AAAA,IACtB,iBAAiB,SAAS,EAAE;AAAA,EAC9B,EAAE,OAAO,CAACA,SAAuB,QAAQA,IAAG,CAAC;AAC7C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE,IAAI,SAAS,IAAI,OAAO,EAAE,CAAC;AAEhE,QAAM,QAAQ,MAAM,OAAO,SAAS,KAAK,MAAM,QAAQ;AACvD,QAAM,MAAM,QAAQ,KAAK,IAAI,OAAO,QAAQ,SAAS,CAAC,CAAC;AAEvD;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAK,GAAG,SAAS,IAAI;AAAA,QACrB;AAAA,QACA,SAAS,MAAM;AACb,cAAI,QAAQ,QAAQ,SAAS;AAC3B,qBAAS,EAAE,IAAI,SAAS,IAAI,OAAO,QAAQ,EAAE,CAAC;AAAA,QAClD;AAAA;AAAA,IACF;AAAA;AAEJ;","names":["src"]}

package/dist/templates/template-tile-source.d.ts

@@ -0,0 +1,24 @@
+/** What a template tile draws, best first. */
+export type TileSource = 'video' | 'poster' | 'still' | 'unavailable' | 'live';
+/**
+ * Which picture a template tile shows.
+ *
+ * The order is a video once one is near the screen, else the template's own poster, else a still, else the live render, else
+ * a placeholder. A failure moves a tile down only as far as the thing that failed: a video that does not exist leaves the
+ * poster showing. It used to drop the tile all the way to the live render, which asks the engine for `/preview/<id>` once per
+ * tile (about twenty requests, most of them 404 on a Box that does not serve those templates) and ended in "unavailable"
+ * after the render grace, with a perfectly good poster loaded and thrown away.
+ */
+export declare function tileSource({ hasVideo, hasPoster, videoWanted, videoFailed, posterFailed, stillAvailable, renderGaveUp, }: {
+    /** The template has a video (an mp4 or a webm). */
+    hasVideo: boolean;
+    hasPoster: boolean;
+    /** The tile is near the screen and the visitor has not asked for less motion. */
+    videoWanted: boolean;
+    videoFailed: boolean;
+    posterFailed: boolean;
+    /** A still picture is left to try (one that has not failed). */
+    stillAvailable: boolean;
+    /** The live render did not answer in time. */
+    renderGaveUp: boolean;
+}): TileSource;

package/dist/templates/template-tile-source.js

@@ -0,0 +1,18 @@
+function tileSource({
+  hasVideo,
+  hasPoster,
+  videoWanted,
+  videoFailed,
+  posterFailed,
+  stillAvailable,
+  renderGaveUp
+}) {
+  if (hasVideo && videoWanted && !videoFailed && !posterFailed) return "video";
+  if (hasPoster && !posterFailed) return "poster";
+  if (stillAvailable) return "still";
+  return renderGaveUp ? "unavailable" : "live";
+}
+export {
+  tileSource
+};
+//# sourceMappingURL=template-tile-source.js.map

package/dist/templates/template-tile-source.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/templates/template-tile-source.ts"],"sourcesContent":["/** What a template tile draws, best first. */\nexport type TileSource = 'video' | 'poster' | 'still' | 'unavailable' | 'live';\n\n/**\n * Which picture a template tile shows.\n *\n * The order is a video once one is near the screen, else the template's own poster, else a still, else the live render, else\n * a placeholder. A failure moves a tile down only as far as the thing that failed: a video that does not exist leaves the\n * poster showing. It used to drop the tile all the way to the live render, which asks the engine for `/preview/<id>` once per\n * tile (about twenty requests, most of them 404 on a Box that does not serve those templates) and ended in \"unavailable\"\n * after the render grace, with a perfectly good poster loaded and thrown away.\n */\nexport function tileSource({\n  hasVideo,\n  hasPoster,\n  videoWanted,\n  videoFailed,\n  posterFailed,\n  stillAvailable,\n  renderGaveUp,\n}: {\n  /** The template has a video (an mp4 or a webm). */\n  hasVideo: boolean;\n  hasPoster: boolean;\n  /** The tile is near the screen and the visitor has not asked for less motion. */\n  videoWanted: boolean;\n  videoFailed: boolean;\n  posterFailed: boolean;\n  /** A still picture is left to try (one that has not failed). */\n  stillAvailable: boolean;\n  /** The live render did not answer in time. */\n  renderGaveUp: boolean;\n}): TileSource {\n  if (hasVideo && videoWanted && !videoFailed && !posterFailed) return 'video';\n  if (hasPoster && !posterFailed) return 'poster';\n  if (stillAvailable) return 'still';\n  return renderGaveUp ? 'unavailable' : 'live';\n}\n"],"mappings":"AAYO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAYe;AACb,MAAI,YAAY,eAAe,CAAC,eAAe,CAAC,aAAc,QAAO;AACrE,MAAI,aAAa,CAAC,aAAc,QAAO;AACvC,MAAI,eAAgB,QAAO;AAC3B,SAAO,eAAe,gBAAgB;AACxC;","names":[]}

package/dist/templates/template-tile.d.ts

@@ -0,0 +1,71 @@
+import type { RegistryTemplate } from '@withpotter/lib/template-context';
+interface TemplateTileProps {
+    template: RegistryTemplate;
+    previewUrl: string;
+    isCurrent: boolean;
+    isSelected: boolean;
+    isOwned: boolean;
+    /** What kind of business it suits, under the name, so a merchant can tell which is theirs. */
+    categoryLabel?: string;
+    /** The archetypes this business runs, so the tile can say what it cannot show. */
+    intents?: string[];
+    /** What the mark on a selected tile says. "Previewing" is right only while
+     *  the preview is on screen with it; a stage sends you back here after. */
+    selectedLabel?: string;
+    onSelect: () => void;
+}
+/**
+ * A picture of the actual site.
+ *
+ * `scripts/generate-template-stills.mjs` writes public/templates/{id}.png — a
+ * 1440x900 capture of the storefront itself.
+ *
+ * THE GENERATED FILE WINS. The declared `thumbnail` used to take precedence on
+ * the reasoning that it is data someone chose. It is not: the registry sets it
+ * to `/api/templates/{id}/og`, which is an Open Graph social card — the
+ * template's name, its description, its palette swatches and its typeface names
+ * on a flat background. Correct for a link unfurling in WhatsApp, and useless
+ * as a preview. Reading the registry instead of the table brought that field
+ * with it, so the panel started showing a spec sheet where a padel club should
+ * have been. A screenshot of the site beats a card describing it.
+ *
+ * So the declared thumbnail is not a fallback either, it is simply not a
+ * preview. A template with no generated still falls through to the live render,
+ * which is the real thing rather than a picture of a description of it.
+ */
+export declare const stillFor: (id: string) => string;
+/**
+ * The picture the TEMPLATE ships, served by the renderer.
+ *
+ * `stillFor` above is generated into this app by a script somebody has to
+ * remember to re-run. Nobody did, so `event-hall-01`, `lagoon-house-01` and
+ * `ike-padel-02` had no still and fell through to a live iframe — which on the
+ * staging dashboard was refused by the renderer's frame-ancestors CSP, so all
+ * three showed as blank white boxes. "The new templates don't have thumbnails"
+ * was two failures stacked: a still nobody generated, and the fallback for it
+ * being blocked.
+ *
+ * A template package can carry its own `thumbnail.png`, and several already do —
+ * a clean full-page capture with no preview banner on it. That is a picture the
+ * template author shipped deliberately, it updates with the template, and it
+ * needs no script run. It is the second thing tried, ahead of booting a whole
+ * storefront to photograph it.
+ *
+ * NOT the registry's `thumbnail` field, which is a different thing wearing the
+ * same name: it resolves to `/api/templates/{id}/og`, an Open Graph social card
+ * showing the template's name, description and palette swatches. Correct for a
+ * link unfurling in WhatsApp, useless as a preview — it is a picture of a
+ * description of the site rather than the site.
+ */
+export declare const packagedThumbFor: (id: string) => string;
+/**
+ * A gallery tile — a live desktop preview in a card, with the name and byline
+ * sitting below it.
+ *
+ * Shared, deliberately. Its own note said it was laid out "the way onboarding
+ * lays them out", and onboarding then grew a second grid of its own anyway.
+ * Both surfaces render this one now, so a template can never look like two
+ * different things depending on where you meet it.
+ */
+export declare function TemplateTile({ template, previewUrl, isCurrent, isSelected, isOwned, categoryLabel, intents, selectedLabel, onSelect, }: TemplateTileProps): import("react").JSX.Element;
+export {};

package/dist/templates/template-tile.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { Check } from "lucide-react";
+import { springs, PRESS_SCALE_LARGE } from "@withpotter/lib/motion";
+import { missingFor } from "@withpotter/lib/intents/archetype-flow";
+import { resolveWebUrl } from "@withpotter/lib/web-url";
+import {
+  TemplateLiveThumb
+} from "./template-live-thumb";
+import { Badge } from "@withpotter/ui-kit";
+const ARCHETYPE_NOUN = {
+  "sell-products": "products",
+  "rent-property": "rooms",
+  "take-bookings": "bookings",
+  "dine-in": "a menu",
+  "food-orders": "a menu",
+  "event-tickets": "events",
+  subscriptions: "memberships"
+};
+const formatNgn = (n) => `\u20A6${n.toLocaleString("en-NG")}`;
+const stillFor = (id) => `/templates/${id}.png`;
+const packagedThumbFor = (id) => `${resolveWebUrl()}/templates/${id}/thumbnail.png`;
+function TemplateTile({
+  template,
+  previewUrl,
+  isCurrent,
+  isSelected,
+  isOwned,
+  categoryLabel,
+  intents,
+  selectedLabel,
+  onSelect
+}) {
+  const isPaid = (template.price ?? 0) > 0;
+  const missing = missingFor(template, intents ?? []).map(
+    (a) => ARCHETYPE_NOUN[a] ?? a
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "group", children: [
+    /* @__PURE__ */ jsx(
+      motion.button,
+      {
+        type: "button",
+        onClick: onSelect,
+        whileTap: { scale: PRESS_SCALE_LARGE },
+        transition: springs.snappy,
+        "aria-label": `Preview ${template.name}`,
+        className: "block w-full",
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `relative w-full overflow-hidden rounded-xl border bg-[var(--bg-subtle)] transition-[transform,box-shadow,border-color] duration-[var(--motion-normal)] ease-settle group-hover:-translate-y-1 ${isSelected ? "border-brand-500 ring-1 ring-brand-500" : "border-[var(--border-subtle)] group-hover:border-[var(--border-default)]"}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                TemplateLiveThumb,
+                {
+                  url: previewUrl,
+                  preview: template.preview,
+                  image: [stillFor(template.id), packagedThumbFor(template.id)],
+                  name: template.name
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/0 transition-colors duration-[var(--motion-normal)] group-hover:bg-black/30 [@media(hover:none)]:hidden", children: /* @__PURE__ */ jsx("span", { className: "inline-flex min-h-[var(--control-h)] translate-y-1 items-center justify-center rounded-lg bg-brand-500 px-3 text-xs font-medium text-white opacity-0 shadow-[var(--shadow-button-filled),var(--shadow-sm)] transition duration-[var(--motion-normal)] group-hover:translate-y-0 group-hover:opacity-100", children: "View template" }) }),
+              /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute bottom-2 right-2 hidden items-center rounded-lg bg-brand-500 px-2 py-1 text-2xs font-medium text-white shadow-[var(--shadow-button-filled),var(--shadow-sm)] [@media(hover:none)]:inline-flex", children: "View" }),
+              isCurrent && /* @__PURE__ */ jsx(Badge, { className: "absolute left-2 top-2 bg-[var(--bg-base)]/90 shadow-sm", children: "Current" }),
+              isSelected && /* @__PURE__ */ jsxs("span", { className: "absolute right-2 top-2 hidden items-center gap-1 rounded-lg bg-brand-500 px-2 py-1 text-2xs font-semibold text-white shadow-sm sm:inline-flex", children: [
+                /* @__PURE__ */ jsx(Check, {}),
+                selectedLabel ?? "Previewing"
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    missing.length > 0 && /* @__PURE__ */ jsxs("p", { className: "mt-2 text-xs leading-snug text-[var(--warning)]", children: [
+      "No page for ",
+      missing.join(" or ")
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: "truncate text-lg font-semibold tracking-[-0.01em] text-[var(--text-primary)]", children: template.name }),
+      isOwned ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs font-medium text-[var(--success)]", children: "Owned" }) : isPaid ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm font-semibold tabular-nums text-[var(--text-primary)]", children: formatNgn(template.price) }) : null
+    ] }),
+    categoryLabel && /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-sm text-[var(--text-tertiary)]", children: categoryLabel })
+  ] });
+}
+export {
+  TemplateTile,
+  packagedThumbFor,
+  stillFor
+};
+//# sourceMappingURL=template-tile.js.map

package/dist/templates/template-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/templates/template-tile.tsx"],"sourcesContent":["'use client';\n\nimport { motion } from 'motion/react';\nimport { Check } from 'lucide-react';\nimport { springs, PRESS_SCALE_LARGE } from '@withpotter/lib/motion';\nimport type { RegistryTemplate } from '@withpotter/lib/template-context';\nimport { missingFor } from '@withpotter/lib/intents/archetype-flow';\nimport { resolveWebUrl } from '@withpotter/lib/web-url';\nimport {\n  TemplateLiveThumb,\n  type TemplatePreviewMedia,\n} from './template-live-thumb';\nimport { Badge } from '@withpotter/ui-kit';\n\ninterface TemplateTileProps {\n  template: RegistryTemplate;\n  previewUrl: string;\n  isCurrent: boolean;\n  isSelected: boolean;\n  isOwned: boolean;\n  /** What kind of business it suits, under the name, so a merchant can tell which is theirs. */\n  categoryLabel?: string;\n  /** The archetypes this business runs, so the tile can say what it cannot show. */\n  intents?: string[];\n  /** What the mark on a selected tile says. \"Previewing\" is right only while\n   *  the preview is on screen with it; a stage sends you back here after. */\n  selectedLabel?: string;\n  onSelect: () => void;\n}\n\n/**\n * What a merchant calls the thing a surface is for.\n *\n * Their word, not ours. \"No page for rooms\" is a sentence a landlord reads;\n * \"does not cover rent-property\" is one an engineer reads.\n */\nconst ARCHETYPE_NOUN: Record<string, string> = {\n  'sell-products': 'products',\n  'rent-property': 'rooms',\n  'take-bookings': 'bookings',\n  'dine-in': 'a menu',\n  'food-orders': 'a menu',\n  'event-tickets': 'events',\n  subscriptions: 'memberships',\n};\n\nconst formatNgn = (n: number) => `₦${n.toLocaleString('en-NG')}`;\n\n/**\n * A picture of the actual site.\n *\n * `scripts/generate-template-stills.mjs` writes public/templates/{id}.png — a\n * 1440x900 capture of the storefront itself.\n *\n * THE GENERATED FILE WINS. The declared `thumbnail` used to take precedence on\n * the reasoning that it is data someone chose. It is not: the registry sets it\n * to `/api/templates/{id}/og`, which is an Open Graph social card — the\n * template's name, its description, its palette swatches and its typeface names\n * on a flat background. Correct for a link unfurling in WhatsApp, and useless\n * as a preview. Reading the registry instead of the table brought that field\n * with it, so the panel started showing a spec sheet where a padel club should\n * have been. A screenshot of the site beats a card describing it.\n *\n * So the declared thumbnail is not a fallback either, it is simply not a\n * preview. A template with no generated still falls through to the live render,\n * which is the real thing rather than a picture of a description of it.\n */\nexport const stillFor = (id: string) => `/templates/${id}.png`;\n\n/**\n * The picture the TEMPLATE ships, served by the renderer.\n *\n * `stillFor` above is generated into this app by a script somebody has to\n * remember to re-run. Nobody did, so `event-hall-01`, `lagoon-house-01` and\n * `ike-padel-02` had no still and fell through to a live iframe — which on the\n * staging dashboard was refused by the renderer's frame-ancestors CSP, so all\n * three showed as blank white boxes. \"The new templates don't have thumbnails\"\n * was two failures stacked: a still nobody generated, and the fallback for it\n * being blocked.\n *\n * A template package can carry its own `thumbnail.png`, and several already do —\n * a clean full-page capture with no preview banner on it. That is a picture the\n * template author shipped deliberately, it updates with the template, and it\n * needs no script run. It is the second thing tried, ahead of booting a whole\n * storefront to photograph it.\n *\n * NOT the registry's `thumbnail` field, which is a different thing wearing the\n * same name: it resolves to `/api/templates/{id}/og`, an Open Graph social card\n * showing the template's name, description and palette swatches. Correct for a\n * link unfurling in WhatsApp, useless as a preview — it is a picture of a\n * description of the site rather than the site.\n */\nexport const packagedThumbFor = (id: string) =>\n  `${resolveWebUrl()}/templates/${id}/thumbnail.png`;\n\n/**\n * A gallery tile — a live desktop preview in a card, with the name and byline\n * sitting below it.\n *\n * Shared, deliberately. Its own note said it was laid out \"the way onboarding\n * lays them out\", and onboarding then grew a second grid of its own anyway.\n * Both surfaces render this one now, so a template can never look like two\n * different things depending on where you meet it.\n */\nexport function TemplateTile({\n  template,\n  previewUrl,\n  isCurrent,\n  isSelected,\n  isOwned,\n  categoryLabel,\n  intents,\n  selectedLabel,\n  onSelect,\n}: TemplateTileProps) {\n  const isPaid = (template.price ?? 0) > 0;\n  const missing = missingFor(template, intents ?? []).map(\n    (a) => ARCHETYPE_NOUN[a] ?? a,\n  );\n  return (\n    <div className=\"group\">\n      {/* THE THING THAT DETECTS HOVER MUST NOT MOVE.\n       *\n       * The lift used to be `whileHover={{ y: -4 }}` on this button, and it\n       * fought itself: motion hit-tests the TRANSFORMED box, so with the\n       * pointer anywhere in the bottom four pixels the card rose out from under\n       * it, hover ended, it dropped back under the pointer, hover began — and\n       * \"View template\" strobed for as long as you held still. Which is the\n       * report: the label comes and goes while hovering one tile.\n       *\n       * So the hover source is now this wrapper, whose layout box a child's\n       * transform cannot move, and the lift is a `group-hover` transform on the\n       * card inside it. Same 4px, same curve, no oscillation. The press stays on\n       * the button because a press has no such loop — it ends when you let go.\n       */}\n      <motion.button\n        type=\"button\"\n        onClick={onSelect}\n        whileTap={{ scale: PRESS_SCALE_LARGE }}\n        transition={springs.snappy}\n        aria-label={`Preview ${template.name}`}\n        className=\"block w-full\"\n      >\n        <div\n          className={`relative w-full overflow-hidden rounded-xl border bg-[var(--bg-subtle)] transition-[transform,box-shadow,border-color] duration-[var(--motion-normal)] ease-settle group-hover:-translate-y-1 ${\n            isSelected\n              ? 'border-brand-500 ring-1 ring-brand-500'\n              : 'border-[var(--border-subtle)] group-hover:border-[var(--border-default)]'\n          }`}\n        >\n          {/* The still when the template has one; the renderer only when it\n              does not. A gallery should not need the storefront to be up. */}\n          <TemplateLiveThumb\n            url={previewUrl}\n            preview={\n              (\n                template as typeof template & {\n                  preview?: TemplatePreviewMedia | null;\n                }\n              ).preview\n            }\n            image={[stillFor(template.id), packagedThumbFor(template.id)]}\n            name={template.name}\n          />\n\n          {/* Hover affordance — a CTA that rises in, like onboarding.\n              Hover-capable devices only: `group-hover` is the whole mechanism,\n              so on a phone this scrim and its button never existed. */}\n          <span className=\"pointer-events-none absolute inset-0 flex items-center justify-center bg-black/0 transition-colors duration-[var(--motion-normal)] group-hover:bg-black/30 [@media(hover:none)]:hidden\">\n            {/* IT LOOKS LIKE THE APP'S BUTTON BECAUSE IT IS THE APP'S BUTTON,\n                minus the element. It cannot BE a `<Button>` — it lives inside\n                the tile's own `<button>`, and a button inside a button is\n                invalid markup that React will not render as intended — so it\n                is a span wearing the primary recipe exactly: `--control-h`,\n                `px-3`, `text-xs`, `font-medium`, `rounded-lg` and the filled\n                bevel. It was `py-2 text-sm font-semibold shadow-sm`, which is\n                taller, heavier and flatter than any real button in the\n                product, on a surface where it sits next to none of them so\n                nothing gave it away. */}\n            <span className=\"inline-flex min-h-[var(--control-h)] translate-y-1 items-center justify-center rounded-lg bg-brand-500 px-3 text-xs font-medium text-white opacity-0 shadow-[var(--shadow-button-filled),var(--shadow-sm)] transition duration-[var(--motion-normal)] group-hover:translate-y-0 group-hover:opacity-100\">\n              View template\n            </span>\n          </span>\n\n          {/* THE SAME AFFORDANCE, FOR A HAND. A phone cannot hover, so the\n              tile above said nothing about being pressable — it read as a\n              picture of a website on a screen asking you to choose one. A\n              corner mark rather than the centred button, because the hover\n              version is allowed to cover the artwork for as long as a cursor\n              is on it and a permanent one is not: the artwork IS the\n              decision. */}\n          <span className=\"pointer-events-none absolute bottom-2 right-2 hidden items-center rounded-lg bg-brand-500 px-2 py-1 text-2xs font-medium text-white shadow-[var(--shadow-button-filled),var(--shadow-sm)] [@media(hover:none)]:inline-flex\">\n            View\n          </span>\n\n          {/* The badge, with its ground made opaque: this one sits ON the\n              template's artwork, so it has to hide what is behind it rather than\n              tint it. */}\n          {isCurrent && (\n            <Badge className=\"absolute left-2 top-2 bg-[var(--bg-base)]/90 shadow-sm\">\n              Current\n            </Badge>\n          )}\n\n          {/* \"Previewing\", not \"Chosen\". Clicking a tile has not chosen anything\n              — it put the template in the viewer above, and choosing is a\n              separate, deliberate act (\"Use this template\"). A badge claiming\n              otherwise made the grid and the viewer disagree about what state\n              you were in.\n              Radius matches the tile's own language rather than a pill: a\n              rounded-full chip on a rounded-xl card is a different vocabulary\n              stuck to the corner of it. */}\n          {isSelected && (\n            <span className=\"absolute right-2 top-2 hidden items-center gap-1 rounded-lg bg-brand-500 px-2 py-1 text-2xs font-semibold text-white shadow-sm sm:inline-flex\">\n              <Check />\n              {selectedLabel ?? 'Previewing'}\n            </span>\n          )}\n        </div>\n      </motion.button>\n\n      {/* What this template cannot show THIS business.\n       *\n       * Stated, never enforced. A merchant who picks a template with no page\n       * for their rooms may have a reason, and a rule forbidding it is one we\n       * would be fighting the day someone runs two archetypes. What is not\n       * acceptable is the silence we had: a short-let picked a listening bar\n       * and found out when every /stay link 404'd.\n       *\n       * Nothing renders when it covers everything, so the common case stays\n       * quiet. */}\n      {missing.length > 0 && (\n        <p className=\"mt-2 text-xs leading-snug text-[var(--warning)]\">\n          No page for {missing.join(' or ')}\n        </p>\n      )}\n\n      <div className=\"mt-3 flex items-baseline justify-between gap-2\">\n        <h3 className=\"truncate text-lg font-semibold tracking-[-0.01em] text-[var(--text-primary)]\">\n          {template.name}\n        </h3>\n        {isOwned ? (\n          <span className=\"shrink-0 text-xs font-medium text-[var(--success)]\">\n            Owned\n          </span>\n        ) : isPaid ? (\n          <span className=\"shrink-0 text-sm font-semibold tabular-nums text-[var(--text-primary)]\">\n            {formatNgn(template.price as number)}\n          </span>\n        ) : null}\n      </div>\n      {categoryLabel && (\n        <p className=\"mt-0.5 truncate text-sm text-[var(--text-tertiary)]\">\n          {categoryLabel}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAwJU,cA6DE,YA7DF;AAtJV,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,SAAS,yBAAyB;AAE3C,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,OAEK;AACP,SAAS,aAAa;AAwBtB,MAAM,iBAAyC;AAAA,EAC7C,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,eAAe;AACjB;AAEA,MAAM,YAAY,CAAC,MAAc,SAAI,EAAE,eAAe,OAAO,CAAC;AAqBvD,MAAM,WAAW,CAAC,OAAe,cAAc,EAAE;AAyBjD,MAAM,mBAAmB,CAAC,OAC/B,GAAG,cAAc,CAAC,cAAc,EAAE;AAW7B,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,UAAU,SAAS,SAAS,KAAK;AACvC,QAAM,UAAU,WAAW,UAAU,WAAW,CAAC,CAAC,EAAE;AAAA,IAClD,CAAC,MAAM,eAAe,CAAC,KAAK;AAAA,EAC9B;AACA,SACE,qBAAC,SAAI,WAAU,SAeb;AAAA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU,EAAE,OAAO,kBAAkB;AAAA,QACrC,YAAY,QAAQ;AAAA,QACpB,cAAY,WAAW,SAAS,IAAI;AAAA,QACpC,WAAU;AAAA,QAEV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,iMACT,aACI,2CACA,0EACN;AAAA,YAIA;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,SAEI,SAGA;AAAA,kBAEJ,OAAO,CAAC,SAAS,SAAS,EAAE,GAAG,iBAAiB,SAAS,EAAE,CAAC;AAAA,kBAC5D,MAAM,SAAS;AAAA;AAAA,cACjB;AAAA,cAKA,oBAAC,UAAK,WAAU,0LAWd,8BAAC,UAAK,WAAU,2SAA0S,2BAE1T,GACF;AAAA,cASA,oBAAC,UAAK,WAAU,8NAA6N,kBAE7O;AAAA,cAKC,aACC,oBAAC,SAAM,WAAU,0DAAyD,qBAE1E;AAAA,cAWD,cACC,qBAAC,UAAK,WAAU,iJACd;AAAA,oCAAC,SAAM;AAAA,gBACN,iBAAiB;AAAA,iBACpB;AAAA;AAAA;AAAA,QAEJ;AAAA;AAAA,IACF;AAAA,IAYC,QAAQ,SAAS,KAChB,qBAAC,OAAE,WAAU,mDAAkD;AAAA;AAAA,MAChD,QAAQ,KAAK,MAAM;AAAA,OAClC;AAAA,IAGF,qBAAC,SAAI,WAAU,kDACb;AAAA,0BAAC,QAAG,WAAU,gFACX,mBAAS,MACZ;AAAA,MACC,UACC,oBAAC,UAAK,WAAU,sDAAqD,mBAErE,IACE,SACF,oBAAC,UAAK,WAAU,0EACb,oBAAU,SAAS,KAAe,GACrC,IACE;AAAA,OACN;AAAA,IACC,iBACC,oBAAC,OAAE,WAAU,uDACV,yBACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/templates/template-toolbar.d.ts

@@ -0,0 +1,28 @@
+export type BrowseMode = 'all' | 'recent' | 'recommended';
+/**
+ * The row under the page title: how to browse, search, and the filter.
+ *
+ * The same row the Toolkit draws — switch left, search filling the middle, one
+ * sliders button at the end — so moving between the two pages does not mean
+ * learning a second toolbar. Categories live in the filter rather than as a
+ * strip of chips, which is where every list in the app puts an exclusive
+ * narrowing.
+ *
+ * `all` is the category that means "every one"; the filter panel's own empty
+ * value is what stands for it, so the two are mapped at this edge.
+ */
+export declare function TemplateToolbar({ browse, onBrowse, query, onQuery, categories, category, allCategory, onCategory, searchOpen, }: {
+    browse: BrowseMode;
+    onBrowse: (next: BrowseMode) => void;
+    query: string;
+    onQuery: (next: string) => void;
+    categories: {
+        id: string;
+        label: string;
+    }[];
+    category: string;
+    allCategory: string;
+    onCategory: (next: string) => void;
+    /** Phones keep the field behind the header's search action until asked. */
+    searchOpen: boolean;
+}): import("react").JSX.Element;

package/dist/templates/template-toolbar.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ViewSwitch } from "@withpotter/ui-kit/view-switch";
+import { FilterPanel } from "@withpotter/ui-kit/filter-panel";
+import {
+  ToolbarSearch,
+  FLAT_CONTROL,
+  TOOLBAR_H
+} from "@withpotter/ui-kit/toolbar-parts";
+const BROWSE = [
+  { value: "all", label: "All" },
+  { value: "recommended", label: "Recommended" },
+  { value: "recent", label: "Recent" }
+];
+function TemplateToolbar({
+  browse,
+  onBrowse,
+  query,
+  onQuery,
+  categories,
+  category,
+  allCategory,
+  onCategory,
+  searchOpen
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      ViewSwitch,
+      {
+        "aria-label": "Browse templates",
+        options: BROWSE,
+        value: browse,
+        onChange: onBrowse,
+        className: `${TOOLBAR_H} ${FLAT_CONTROL}`
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: searchOpen ? "contents" : "hidden sm:contents", children: /* @__PURE__ */ jsx(ToolbarSearch, { noun: "templates", value: query, onChange: onQuery }) }),
+    categories.length > 0 && /* @__PURE__ */ jsx(
+      FilterPanel,
+      {
+        className: TOOLBAR_H,
+        groups: [
+          {
+            allLabel: "All categories",
+            options: categories.map((c) => ({
+              value: c.id,
+              label: c.label
+            })),
+            value: category === allCategory ? "" : category,
+            onChange: (next) => onCategory(next || allCategory)
+          }
+        ]
+      }
+    )
+  ] });
+}
+export {
+  TemplateToolbar
+};
+//# sourceMappingURL=template-toolbar.js.map

package/dist/templates/template-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/templates/template-toolbar.tsx"],"sourcesContent":["'use client';\n\nimport { ViewSwitch } from '@withpotter/ui-kit/view-switch';\nimport { FilterPanel } from '@withpotter/ui-kit/filter-panel';\nimport {\n  ToolbarSearch,\n  FLAT_CONTROL,\n  TOOLBAR_H,\n} from '@withpotter/ui-kit/toolbar-parts';\n\nexport type BrowseMode = 'all' | 'recent' | 'recommended';\n\nconst BROWSE = [\n  { value: 'all' as const, label: 'All' },\n  { value: 'recommended' as const, label: 'Recommended' },\n  { value: 'recent' as const, label: 'Recent' },\n];\n\n/**\n * The row under the page title: how to browse, search, and the filter.\n *\n * The same row the Toolkit draws — switch left, search filling the middle, one\n * sliders button at the end — so moving between the two pages does not mean\n * learning a second toolbar. Categories live in the filter rather than as a\n * strip of chips, which is where every list in the app puts an exclusive\n * narrowing.\n *\n * `all` is the category that means \"every one\"; the filter panel's own empty\n * value is what stands for it, so the two are mapped at this edge.\n */\nexport function TemplateToolbar({\n  browse,\n  onBrowse,\n  query,\n  onQuery,\n  categories,\n  category,\n  allCategory,\n  onCategory,\n  searchOpen,\n}: {\n  browse: BrowseMode;\n  onBrowse: (next: BrowseMode) => void;\n  query: string;\n  onQuery: (next: string) => void;\n  categories: { id: string; label: string }[];\n  category: string;\n  allCategory: string;\n  onCategory: (next: string) => void;\n  /** Phones keep the field behind the header's search action until asked. */\n  searchOpen: boolean;\n}) {\n  return (\n    <div className=\"mb-4 flex flex-wrap items-center gap-2\">\n      <ViewSwitch\n        aria-label=\"Browse templates\"\n        options={BROWSE}\n        value={browse}\n        onChange={onBrowse}\n        className={`${TOOLBAR_H} ${FLAT_CONTROL}`}\n      />\n      <div className={searchOpen ? 'contents' : 'hidden sm:contents'}>\n        <ToolbarSearch noun=\"templates\" value={query} onChange={onQuery} />\n      </div>\n      {categories.length > 0 && (\n        <FilterPanel\n          className={TOOLBAR_H}\n          groups={[\n            {\n              allLabel: 'All categories',\n              options: categories.map((c) => ({\n                value: c.id,\n                label: c.label,\n              })),\n              value: category === allCategory ? '' : category,\n              onChange: (next) => onCategory(next || allCategory),\n            },\n          ]}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAqDI,SACE,KADF;AAnDJ,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,MAAM,SAAS;AAAA,EACb,EAAE,OAAO,OAAgB,OAAO,MAAM;AAAA,EACtC,EAAE,OAAO,eAAwB,OAAO,cAAc;AAAA,EACtD,EAAE,OAAO,UAAmB,OAAO,SAAS;AAC9C;AAcO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAWG;AACD,SACE,qBAAC,SAAI,WAAU,0CACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW,GAAG,SAAS,IAAI,YAAY;AAAA;AAAA,IACzC;AAAA,IACA,oBAAC,SAAI,WAAW,aAAa,aAAa,sBACxC,8BAAC,iBAAc,MAAK,aAAY,OAAO,OAAO,UAAU,SAAS,GACnE;AAAA,IACC,WAAW,SAAS,KACnB;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,QAAQ;AAAA,UACN;AAAA,YACE,UAAU;AAAA,YACV,SAAS,WAAW,IAAI,CAAC,OAAO;AAAA,cAC9B,OAAO,EAAE;AAAA,cACT,OAAO,EAAE;AAAA,YACX,EAAE;AAAA,YACF,OAAO,aAAa,cAAc,KAAK;AAAA,YACvC,UAAU,CAAC,SAAS,WAAW,QAAQ,WAAW;AAAA,UACpD;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/templates/use-growing-shelf.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A shelf that grows as you reach the bottom of it.
+ *
+ * `visible` is how many of `items` to draw; put `sentinelRef` on an empty
+ * element after the list. A new `items` array is a new shelf (a filter or a
+ * search), so it starts from the top again — tracked during render rather than
+ * in an effect, which would paint the old length first.
+ */
+export declare function useGrowingShelf<T>(items: readonly T[], step: number): {
+    visible: number;
+    hasMore: boolean;
+    sentinelRef: import("react").RefObject<HTMLDivElement | null>;
+};

package/dist/templates/use-growing-shelf.js

@@ -0,0 +1,29 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+function useGrowingShelf(items, step) {
+  const [visible, setVisible] = useState(step);
+  const [forItems, setForItems] = useState(items);
+  if (forItems !== items) {
+    setForItems(items);
+    setVisible(step);
+  }
+  const hasMore = visible < items.length;
+  const sentinelRef = useRef(null);
+  useEffect(() => {
+    const el = sentinelRef.current;
+    if (!el || !hasMore) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) setVisible((n) => n + step);
+      },
+      { rootMargin: "600px 0px" }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [hasMore, visible, step]);
+  return { visible, hasMore, sentinelRef };
+}
+export {
+  useGrowingShelf
+};
+//# sourceMappingURL=use-growing-shelf.js.map

package/dist/templates/use-growing-shelf.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/templates/use-growing-shelf.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\n/**\n * A shelf that grows as you reach the bottom of it.\n *\n * `visible` is how many of `items` to draw; put `sentinelRef` on an empty\n * element after the list. A new `items` array is a new shelf (a filter or a\n * search), so it starts from the top again — tracked during render rather than\n * in an effect, which would paint the old length first.\n */\nexport function useGrowingShelf<T>(items: readonly T[], step: number) {\n  const [visible, setVisible] = useState(step);\n  const [forItems, setForItems] = useState(items);\n  if (forItems !== items) {\n    setForItems(items);\n    setVisible(step);\n  }\n\n  const hasMore = visible < items.length;\n  const sentinelRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    const el = sentinelRef.current;\n    if (!el || !hasMore) return;\n    // Start before the bottom is reached, so the next row is already there\n    // when you arrive rather than appearing under your thumb.\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((e) => e.isIntersecting)) setVisible((n) => n + step);\n      },\n      { rootMargin: '600px 0px' },\n    );\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [hasMore, visible, step]);\n\n  return { visible, hasMore, sentinelRef };\n}\n"],"mappings":";AAEA,SAAS,WAAW,QAAQ,gBAAgB;AAUrC,SAAS,gBAAmB,OAAqB,MAAc;AACpE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,MAAI,aAAa,OAAO;AACtB,gBAAY,KAAK;AACjB,eAAW,IAAI;AAAA,EACjB;AAEA,QAAM,UAAU,UAAU,MAAM;AAChC,QAAM,cAAc,OAAuB,IAAI;AAC/C,YAAU,MAAM;AACd,UAAM,KAAK,YAAY;AACvB,QAAI,CAAC,MAAM,CAAC,QAAS;AAGrB,UAAM,WAAW,IAAI;AAAA,MACnB,CAAC,YAAY;AACX,YAAI,QAAQ,KAAK,CAAC,MAAM,EAAE,cAAc,EAAG,YAAW,CAAC,MAAM,IAAI,IAAI;AAAA,MACvE;AAAA,MACA,EAAE,YAAY,YAAY;AAAA,IAC5B;AACA,aAAS,QAAQ,EAAE;AACnB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,SAAS,SAAS,IAAI,CAAC;AAE3B,SAAO,EAAE,SAAS,SAAS,YAAY;AACzC;","names":[]}

package/dist/templates/use-mobile-template-preview.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Whether the phone's template preview dialog is open.
+ *
+ * The `panel` preview sits above the grid and is `hidden sm:block`, so on a
+ * phone tapping a template selected it and showed nothing at all: View did
+ * nothing, because the one place the preview could appear was display:none.
+ * The dashboard opens with the CURRENT template already selected, so the
+ * dialog cannot key off the selection alone or it would cover the page on
+ * arrival. It opens only on a tap, which is what this tracks.
+ */
+export declare function useMobileTemplatePreview(): {
+    /** Should the preview dialog be showing, in this preview mode? */
+    shows: (previewMode: "panel" | "stage" | "dialog") => boolean;
+    /** Called when a template is tapped; a no-op where the panel is visible. */
+    openIfMobile: () => void;
+    /** Close, then run whatever the caller was going to do next. */
+    close: (then?: () => void) => void;
+};