@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1,112 @@
+import type { RegistryTemplate } from '@withpotter/lib/template-context';
+/**
+ * Choosing a template: the panel, the filters, the search and the grid.
+ *
+ * Extracted because onboarding kept growing a poorer copy of this page. Each
+ * time it was pointed out, the honest answer was the same: the entry does not
+ * need a smaller gallery, it needs THE gallery. A merchant meeting templates
+ * for the first time deserves the surface with filters and previews, not a
+ * stripped grid that silently selects and calls itself "View template".
+ *
+ * The page and the setup step now differ only in what they do with the choice
+ * and where the data comes from — which is all they should ever have differed
+ * in.
+ */
+export declare function TemplateGallery({ templates, categories, categoryMatch, loading, currentTemplateId, recommendedId, intents, owned, selectedId, previewId, brief, onSelect, onUse, using, useLabel, useIsPrimary, useBlockedReason, emptyNote, showCreateOwn, controlsLayout, previewMode, onClosePreview, }: {
+    templates: RegistryTemplate[];
+    categories?: {
+        id: string;
+        name: string;
+        count: number;
+    }[];
+    /**
+     * How a template belongs to a category chip. Default: its own `category` is
+     * the chip's id. The dashboard passes the business-category match onboarding
+     * uses, where one template can suit several kinds of business.
+     */
+    categoryMatch?: (template: RegistryTemplate, categoryId: string) => boolean;
+    /** Holds the grid's height while the shelf loads. Without it the page painted
+     *  as a title and a button with nothing between them, then the tiles arrived
+     *  and shoved the action several hundred pixels down. */
+    loading?: boolean;
+    /** The template already in use, badged so it is never re-chosen by accident. */
+    currentTemplateId?: string;
+    /** Floated to the top. No sash on the tile: order is the recommendation. */
+    recommendedId?: string | null;
+    /** The archetypes this business runs, so a tile can say what it cannot show. */
+    intents?: string[];
+    owned?: Set<string>;
+    selectedId: string | null;
+    /**
+     * Which template the panel is OPEN on, when that differs from which is
+     * chosen. It differs exactly once: onboarding preselects the archetype's
+     * match so a tile reads as chosen, and if the panel followed that, the
+     * merchant landed on one template's detail page under a heading that says
+     * "Pick a starting point" — the shelf pushed off the bottom of the screen by
+     * the recommendation. Being chosen is a badge; being previewed is something
+     * you asked for. Omit to keep them the same thing.
+     */
+    previewId?: string | null;
+    /**
+     * The brief, when the surface leads with one. It replaces the search field
+     * (two text boxes over one grid is a quiz about which box your sentence goes
+     * in) and turns the row above the grid into a titled section, which is what
+     * finally gives that row a left side.
+     */
+    brief?: {
+        value: string;
+        onChange: (next: string) => void;
+        suggestions: string[];
+        onSubmit: () => void;
+    };
+    onSelect: (id: string) => void;
+    /** What "use this one" means differs by surface, so the caller owns it. */
+    onUse: (template: RegistryTemplate) => void;
+    using?: boolean;
+    useLabel?: string;
+    /** False when the surface hosting the gallery has its own primary commit. */
+    useIsPrimary?: boolean;
+    /** Said in place of the use button when this person may not switch template. */
+    useBlockedReason?: string | null;
+    emptyNote?: React.ReactNode;
+    showCreateOwn?: boolean;
+    /**
+     * How the search and the category filters sit above the grid.
+     *
+     * `row` is the dashboard's: tabs left, search right, opposite each other in a
+     * toolbar under a page title that is already left-flush with them.
+     *
+     * `stacked` is setup's, where the title above is centred over a 1120px shelf
+     * with no column to hang off. A left-right toolbar under a centred title puts
+     * three different horizontal anchors in the first 120px of the screen. Here
+     * they stack on the title's own axis — search, then the filters — so the
+     * whole head of the shelf reads down one centre line.
+     */
+    controlsLayout?: 'row' | 'stacked';
+    /**
+     * What opening a template does to the shelf.
+     *
+     * `panel` keeps the grid and puts the template above it. That is the
+     * dashboard's, and it is not a style choice there: that page opens with the
+     * template you are ALREADY on selected, so the panel is a hero for your
+     * current site and the grid under it is the alternatives.
+     *
+     * `stage` replaces the shelf with the one template — one click, whole view,
+     * a way back at the top. That is setup's, where opening a template is
+     * something you asked for and the only question on screen is "this one?".
+     *
+     * `dialog` keeps the shelf exactly where it is and opens the one template
+     * over it as a popup, on every screen size. That is the change-template
+     * page: nothing is previewed until you click, and closing puts you back on
+     * the same shelf at the same scroll position.
+     *
+     * Deliberately not one behaviour for all, though everything else here is
+     * shared: the surfaces open a preview for different reasons, and only the
+     * dashboard's once opened it without being asked.
+     */
+    previewMode?: 'panel' | 'stage' | 'dialog';
+    /** Required by `stage` and `dialog`, which close back to the shelf. */
+    onClosePreview?: () => void;
+}): import("react").JSX.Element;
+/** One definition, so a template previews identically wherever it is met. */
+export declare const previewUrlFor: (id: string) => string;

package/dist/templates/template-gallery.js

@@ -0,0 +1,274 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { motion } from "motion/react";
+import { columnItemVariants } from "@withpotter/lib/motion";
+import { TabNav } from "@withpotter/ui-kit/tab-nav";
+import { Select } from "@withpotter/ui-kit/select";
+import { SearchField } from "@withpotter/ui-kit/search-field";
+import { useMobileTemplatePreview } from "./use-mobile-template-preview";
+import { useGrowingShelf } from "./use-growing-shelf";
+import { useRecentTemplates } from "./use-recent-templates";
+import { categoryLabeller, fitsBusiness } from "./category-label";
+import { TemplateToolbar } from "./template-toolbar";
+import { TemplateTile } from "./template-tile";
+import { TemplateBrief, briefScore } from "./template-brief";
+import { TemplatePreviewDialog } from "./template-preview-dialog";
+import { TemplatePreviewPanel } from "./template-preview-panel";
+import { CreateOwnCard } from "./create-own";
+const ALL = "all";
+function TemplateGallery({
+  templates,
+  categories,
+  categoryMatch,
+  loading,
+  currentTemplateId,
+  recommendedId,
+  intents,
+  owned,
+  selectedId,
+  previewId,
+  brief,
+  onSelect,
+  onUse,
+  using,
+  useLabel,
+  useIsPrimary,
+  useBlockedReason,
+  emptyNote,
+  showCreateOwn = true,
+  controlsLayout = "row",
+  previewMode = "panel",
+  onClosePreview
+}) {
+  const mobilePreview = useMobileTemplatePreview();
+  const [filter, setFilter] = useState(ALL);
+  const [query, setQuery] = useState("");
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [browseMode, setBrowseMode] = useState("all");
+  const { recents, remember } = useRecentTemplates();
+  useEffect(() => {
+    const openSearch = () => {
+      setSearchOpen(true);
+      window.setTimeout(() => {
+        document.querySelector(
+          'input[aria-label="Search templates"]'
+        )?.focus();
+      }, 0);
+    };
+    window.addEventListener("templates:search", openSearch);
+    return () => window.removeEventListener("templates:search", openSearch);
+  }, []);
+  const shown = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const written = brief?.value.trim() ?? "";
+    const fits = (t) => fitsBusiness(t, recommendedId, intents);
+    const list = templates.filter((t) => {
+      if (browseMode === "recommended") return fits(t);
+      if (browseMode === "recent")
+        return recents.includes(t.id) || t.id === currentTemplateId;
+      return true;
+    }).filter(
+      (t) => filter === ALL || (categoryMatch ? categoryMatch(t, filter) : t.category === filter)
+    ).filter(
+      (t) => !q || t.name.toLowerCase().includes(q) || (t.description ?? "").toLowerCase().includes(q) || (t.author ?? "").toLowerCase().includes(q) || (t.tags ?? []).some((tag) => tag.toLowerCase().includes(q))
+    );
+    if (written) {
+      return [...list].sort(
+        (a, b) => briefScore(b, written) - briefScore(a, written)
+      );
+    }
+    return list.sort((a, b) => {
+      if (browseMode === "recent") {
+        const rank = (id) => {
+          const i = recents.indexOf(id);
+          return i === -1 ? 999 : i;
+        };
+        return rank(a.id) - rank(b.id);
+      }
+      if (browseMode === "recommended") {
+        return a.id === recommendedId ? -1 : b.id === recommendedId ? 1 : 0;
+      }
+      return a.id === currentTemplateId ? -1 : b.id === currentTemplateId ? 1 : 0;
+    });
+  }, [
+    templates,
+    filter,
+    query,
+    recommendedId,
+    currentTemplateId,
+    browseMode,
+    brief?.value,
+    recents,
+    intents,
+    categoryMatch
+  ]);
+  const { visible, hasMore, sentinelRef } = useGrowingShelf(shown, PER_PAGE);
+  const neighbour = (step) => {
+    const i = shown.findIndex((t) => t.id === previewingId);
+    if (i < 0) return shown[0]?.id ?? "";
+    return shown[(i + step + shown.length) % shown.length].id;
+  };
+  const previewingId = previewId === void 0 ? selectedId : previewId;
+  const previewing = useMemo(
+    () => templates.find((t) => t.id === previewingId) ?? null,
+    [templates, previewingId]
+  );
+  const categoryLabelFor = useMemo(
+    () => categoryLabeller(categories, categoryMatch),
+    [categories, categoryMatch]
+  );
+  const tabs = useMemo(
+    () => [
+      { id: ALL, label: "All" },
+      ...(categories ?? []).filter((c) => c.count > 0).map((c) => ({ id: c.id, label: c.name }))
+    ],
+    [categories]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-4", children: [
+    /* @__PURE__ */ jsx(
+      TemplatePreviewDialog,
+      {
+        open: !!previewing && mobilePreview.shows(previewMode),
+        onClose: () => mobilePreview.close(onClosePreview),
+        template: previewing,
+        canStep: shown.length > 1,
+        onStep: (step) => onSelect(neighbour(step)),
+        previewUrl: previewing ? previewUrlFor(previewing.id) : "",
+        isCurrent: !!previewing && previewing.id === currentTemplateId,
+        isOwned: !!previewing && (owned?.has(previewing.id) ?? false),
+        using: !!using,
+        onUse: () => previewing && mobilePreview.close(() => onUse(previewing)),
+        useLabel,
+        useIsPrimary,
+        useBlockedReason
+      }
+    ),
+    brief && /* @__PURE__ */ jsx(
+      TemplateBrief,
+      {
+        value: brief.value,
+        onChange: brief.onChange,
+        suggestions: brief.suggestions,
+        onSubmit: brief.onSubmit
+      }
+    ),
+    previewMode === "panel" && previewing && /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsx(
+      TemplatePreviewPanel,
+      {
+        template: previewing,
+        previewUrl: previewUrlFor(previewing.id),
+        isCurrent: previewing.id === currentTemplateId,
+        isOwned: owned?.has(previewing.id) ?? false,
+        using: !!using,
+        onUse: () => onUse(previewing),
+        useLabel,
+        useIsPrimary,
+        useBlockedReason
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      brief ? /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-wrap items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-3xl font-semibold leading-8 tracking-[-0.02em] text-[var(--text-primary)]", children: "Start with a template" }),
+        tabs.length > 1 && /* @__PURE__ */ jsx(TabNav, { tabs, activeTab: filter, onTabChange: setFilter })
+      ] }) : controlsLayout === "stacked" ? (
+        /* SEARCH AND ONE FILTER, ARRIVING AS THEIR OWN BEAT.
+        
+                     They were cut once as clutter and they were — stacked above the
+                     grid with everything landing on one frame, they were three of the
+                     five things standing between the title and the first template. In
+                     their own beat, after the title and before the grid, they read as
+                     the shelf assembling itself.
+        
+                     The filter is a Select, not the tab strip it was: All / Shops 10 /
+                     beauty 1 / fitness 1, four chips across the middle of the screen,
+                     two of them lowercase because the registry never named those
+                     categories and one template deep. John: *"we need a flter button
+                     that you click then get a dropdwon, so we can remove these guys"*.
+                     The rule already said so — CLAUDE.md puts an exclusive narrowing of
+                     a list in the filters, not in a row under the title. A strip that
+                     wide spends the shelf's best row on a control nobody presses; a
+                     Select spends 168px and says the same thing. */
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            variants: columnItemVariants,
+            className: "mb-8 flex w-full flex-wrap items-center justify-center gap-3",
+            children: /* @__PURE__ */ jsx(
+              SearchField,
+              {
+                tall: true,
+                value: query,
+                onChange: setQuery,
+                placeholder: "Search templates",
+                className: "w-full max-w-[520px]",
+                trailing: tabs.length > 1 ? /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    value: filter,
+                    onChange: setFilter,
+                    options: tabs.map((t) => ({
+                      value: t.id,
+                      label: t.label
+                    })),
+                    bare: true,
+                    className: "w-auto max-w-[132px]"
+                  }
+                ) : void 0
+              }
+            )
+          }
+        )
+      ) : (tabs.length > 1 || templates.length > 6) && /* @__PURE__ */ jsx(
+        TemplateToolbar,
+        {
+          browse: browseMode,
+          onBrowse: setBrowseMode,
+          query,
+          onQuery: setQuery,
+          categories: tabs.filter((tab) => tab.id !== ALL),
+          category: filter,
+          allCategory: ALL,
+          onCategory: setFilter,
+          searchOpen
+        }
+      ),
+      loading ? /* @__PURE__ */ jsx("div", { className: GRID_CLASS, "aria-busy": true, children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "aspect-[16/9] w-full animate-pulse rounded-xl bg-[var(--bg-subtle)]" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3 h-4 w-1/3 animate-pulse rounded bg-[var(--bg-subtle)]" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-2 h-3 w-2/3 animate-pulse rounded bg-[var(--bg-subtle)]" })
+      ] }, i)) }) : shown.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-[var(--border-subtle)] bg-[var(--bg-subtle)] px-4 py-10 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-secondary)]", children: query ? `No templates match \u201C${query}\u201D.` : browseMode === "recent" ? "Templates you open will show up here." : browseMode === "recommended" ? "Nothing is recommended for your business yet. Try Browse." : emptyNote }) }) : /* @__PURE__ */ jsxs(motion.div, { variants: columnItemVariants, className: GRID_CLASS, children: [
+        shown.slice(0, visible).map((t) => /* @__PURE__ */ jsx(
+          TemplateTile,
+          {
+            template: t,
+            previewUrl: previewUrlFor(t.id),
+            isCurrent: t.id === currentTemplateId,
+            isSelected: t.id === selectedId,
+            isOwned: owned?.has(t.id) ?? false,
+            categoryLabel: categoryLabelFor(t),
+            intents,
+            selectedLabel: previewMode === "stage" ? "Selected" : void 0,
+            onSelect: () => {
+              remember(t.id);
+              onSelect(t.id);
+              mobilePreview.openIfMobile();
+            }
+          },
+          t.id
+        )),
+        showCreateOwn && filter === ALL && !query && !hasMore && /* @__PURE__ */ jsx(CreateOwnCard, {})
+      ] }),
+      hasMore && !loading && /* @__PURE__ */ jsx("div", { ref: sentinelRef, "aria-hidden": "true" })
+    ] })
+  ] });
+}
+const GRID_CLASS = "grid grid-cols-2 gap-x-3 gap-y-4 sm:gap-x-4 sm:gap-y-7 lg:grid-cols-3 xl:grid-cols-4";
+const WEB_URL = process.env.NEXT_PUBLIC_WEB_URL || "http://localhost:3000";
+const previewUrlFor = (id) => `${WEB_URL}/preview/${id}?chrome=0`;
+const PER_PAGE = 8;
+export {
+  TemplateGallery,
+  previewUrlFor
+};
+//# sourceMappingURL=template-gallery.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/templates/template-gallery.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { motion } from 'motion/react';\nimport { columnItemVariants } from '@withpotter/lib/motion';\nimport type { RegistryTemplate } from '@withpotter/lib/template-context';\nimport { TabNav } from '@withpotter/ui-kit/tab-nav';\nimport { Select } from '@withpotter/ui-kit/select';\nimport { SearchField } from '@withpotter/ui-kit/search-field';\nimport { useMobileTemplatePreview } from './use-mobile-template-preview';\nimport { useGrowingShelf } from './use-growing-shelf';\nimport { useRecentTemplates } from './use-recent-templates';\nimport { categoryLabeller, fitsBusiness } from './category-label';\nimport { TemplateToolbar } from './template-toolbar';\nimport { TemplateTile } from './template-tile';\nimport { TemplateBrief, briefScore } from './template-brief';\nimport { TemplatePreviewDialog } from './template-preview-dialog';\nimport { TemplatePreviewPanel } from './template-preview-panel';\nimport { CreateOwnCard } from './create-own';\n\nconst ALL = 'all';\n\n/**\n * Choosing a template: the panel, the filters, the search and the grid.\n *\n * Extracted because onboarding kept growing a poorer copy of this page. Each\n * time it was pointed out, the honest answer was the same: the entry does not\n * need a smaller gallery, it needs THE gallery. A merchant meeting templates\n * for the first time deserves the surface with filters and previews, not a\n * stripped grid that silently selects and calls itself \"View template\".\n *\n * The page and the setup step now differ only in what they do with the choice\n * and where the data comes from — which is all they should ever have differed\n * in.\n */\nexport function TemplateGallery({\n  templates,\n  categories,\n  categoryMatch,\n  loading,\n  currentTemplateId,\n  recommendedId,\n  intents,\n  owned,\n  selectedId,\n  previewId,\n  brief,\n  onSelect,\n  onUse,\n  using,\n  useLabel,\n  useIsPrimary,\n  useBlockedReason,\n  emptyNote,\n  showCreateOwn = true,\n  controlsLayout = 'row',\n  previewMode = 'panel',\n  onClosePreview,\n}: {\n  templates: RegistryTemplate[];\n  categories?: { id: string; name: string; count: number }[];\n  /**\n   * How a template belongs to a category chip. Default: its own `category` is\n   * the chip's id. The dashboard passes the business-category match onboarding\n   * uses, where one template can suit several kinds of business.\n   */\n  categoryMatch?: (template: RegistryTemplate, categoryId: string) => boolean;\n  /** Holds the grid's height while the shelf loads. Without it the page painted\n   *  as a title and a button with nothing between them, then the tiles arrived\n   *  and shoved the action several hundred pixels down. */\n  loading?: boolean;\n  /** The template already in use, badged so it is never re-chosen by accident. */\n  currentTemplateId?: string;\n  /** Floated to the top. No sash on the tile: order is the recommendation. */\n  recommendedId?: string | null;\n  /** The archetypes this business runs, so a tile can say what it cannot show. */\n  intents?: string[];\n  owned?: Set<string>;\n  selectedId: string | null;\n  /**\n   * Which template the panel is OPEN on, when that differs from which is\n   * chosen. It differs exactly once: onboarding preselects the archetype's\n   * match so a tile reads as chosen, and if the panel followed that, the\n   * merchant landed on one template's detail page under a heading that says\n   * \"Pick a starting point\" — the shelf pushed off the bottom of the screen by\n   * the recommendation. Being chosen is a badge; being previewed is something\n   * you asked for. Omit to keep them the same thing.\n   */\n  previewId?: string | null;\n  /**\n   * The brief, when the surface leads with one. It replaces the search field\n   * (two text boxes over one grid is a quiz about which box your sentence goes\n   * in) and turns the row above the grid into a titled section, which is what\n   * finally gives that row a left side.\n   */\n  brief?: {\n    value: string;\n    onChange: (next: string) => void;\n    suggestions: string[];\n    onSubmit: () => void;\n  };\n  onSelect: (id: string) => void;\n  /** What \"use this one\" means differs by surface, so the caller owns it. */\n  onUse: (template: RegistryTemplate) => void;\n  using?: boolean;\n  useLabel?: string;\n  /** False when the surface hosting the gallery has its own primary commit. */\n  useIsPrimary?: boolean;\n  /** Said in place of the use button when this person may not switch template. */\n  useBlockedReason?: string | null;\n  emptyNote?: React.ReactNode;\n  showCreateOwn?: boolean;\n  /**\n   * How the search and the category filters sit above the grid.\n   *\n   * `row` is the dashboard's: tabs left, search right, opposite each other in a\n   * toolbar under a page title that is already left-flush with them.\n   *\n   * `stacked` is setup's, where the title above is centred over a 1120px shelf\n   * with no column to hang off. A left-right toolbar under a centred title puts\n   * three different horizontal anchors in the first 120px of the screen. Here\n   * they stack on the title's own axis — search, then the filters — so the\n   * whole head of the shelf reads down one centre line.\n   */\n  controlsLayout?: 'row' | 'stacked';\n  /**\n   * What opening a template does to the shelf.\n   *\n   * `panel` keeps the grid and puts the template above it. That is the\n   * dashboard's, and it is not a style choice there: that page opens with the\n   * template you are ALREADY on selected, so the panel is a hero for your\n   * current site and the grid under it is the alternatives.\n   *\n   * `stage` replaces the shelf with the one template — one click, whole view,\n   * a way back at the top. That is setup's, where opening a template is\n   * something you asked for and the only question on screen is \"this one?\".\n   *\n   * `dialog` keeps the shelf exactly where it is and opens the one template\n   * over it as a popup, on every screen size. That is the change-template\n   * page: nothing is previewed until you click, and closing puts you back on\n   * the same shelf at the same scroll position.\n   *\n   * Deliberately not one behaviour for all, though everything else here is\n   * shared: the surfaces open a preview for different reasons, and only the\n   * dashboard's once opened it without being asked.\n   */\n  previewMode?: 'panel' | 'stage' | 'dialog';\n  /** Required by `stage` and `dialog`, which close back to the shelf. */\n  onClosePreview?: () => void;\n}) {\n  const mobilePreview = useMobileTemplatePreview();\n  const [filter, setFilter] = useState<string>(ALL);\n  const [query, setQuery] = useState('');\n  const [searchOpen, setSearchOpen] = useState(false);\n  const [browseMode, setBrowseMode] = useState<\n    'all' | 'recent' | 'recommended'\n  >('all');\n  const { recents, remember } = useRecentTemplates();\n\n  useEffect(() => {\n    const openSearch = () => {\n      setSearchOpen(true);\n      window.setTimeout(() => {\n        document\n          .querySelector<HTMLInputElement>(\n            'input[aria-label=\"Search templates\"]',\n          )\n          ?.focus();\n      }, 0);\n    };\n    window.addEventListener('templates:search', openSearch);\n    return () => window.removeEventListener('templates:search', openSearch);\n  }, []);\n\n  const shown = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    const written = brief?.value.trim() ?? '';\n\n    const fits = (t: RegistryTemplate) =>\n      fitsBusiness(t, recommendedId, intents);\n\n    const list = templates\n      .filter((t) => {\n        if (browseMode === 'recommended') return fits(t);\n        if (browseMode === 'recent')\n          return recents.includes(t.id) || t.id === currentTemplateId;\n        return true;\n      })\n      .filter(\n        (t) =>\n          filter === ALL ||\n          (categoryMatch ? categoryMatch(t, filter) : t.category === filter),\n      )\n      .filter(\n        (t) =>\n          !q ||\n          t.name.toLowerCase().includes(q) ||\n          (t.description ?? '').toLowerCase().includes(q) ||\n          (t.author ?? '').toLowerCase().includes(q) ||\n          (t.tags ?? []).some((tag) => tag.toLowerCase().includes(q)),\n      );\n\n    // A brief REORDERS rather than filters. Hiding templates on a rough word\n    // match would let one unlucky sentence empty the shelf, and the shelf is the\n    // fallback for everyone the brief does not serve.\n    if (written) {\n      return [...list].sort(\n        (a, b) => briefScore(b, written) - briefScore(a, written),\n      );\n    }\n\n    return list.sort((a, b) => {\n      if (browseMode === 'recent') {\n        const rank = (id: string) => {\n          const i = recents.indexOf(id);\n          return i === -1 ? 999 : i;\n        };\n        return rank(a.id) - rank(b.id);\n      }\n      if (browseMode === 'recommended') {\n        return a.id === recommendedId ? -1 : b.id === recommendedId ? 1 : 0;\n      }\n      return a.id === currentTemplateId\n        ? -1\n        : b.id === currentTemplateId\n          ? 1\n          : 0;\n    });\n  }, [\n    templates,\n    filter,\n    query,\n    recommendedId,\n    currentTemplateId,\n    browseMode,\n    brief?.value,\n    recents,\n    intents,\n    categoryMatch,\n  ]);\n\n  const { visible, hasMore, sentinelRef } = useGrowingShelf(shown, PER_PAGE);\n\n  /** The next or previous template on the shelf, wrapping at both ends. */\n  const neighbour = (step: 1 | -1) => {\n    const i = shown.findIndex((t) => t.id === previewingId);\n    if (i < 0) return shown[0]?.id ?? '';\n    return shown[(i + step + shown.length) % shown.length].id;\n  };\n\n  const previewingId = previewId === undefined ? selectedId : previewId;\n  const previewing = useMemo(\n    () => templates.find((t) => t.id === previewingId) ?? null,\n    [templates, previewingId],\n  );\n\n  const categoryLabelFor = useMemo(\n    () => categoryLabeller(categories, categoryMatch),\n    [categories, categoryMatch],\n  );\n\n  const tabs = useMemo(\n    () => [\n      { id: ALL, label: 'All' },\n      ...(categories ?? [])\n        .filter((c) => c.count > 0)\n        .map((c) => ({ id: c.id, label: c.name })),\n    ],\n    [categories],\n  );\n\n  return (\n    <div className=\"w-full space-y-4\">\n      <TemplatePreviewDialog\n        open={!!previewing && mobilePreview.shows(previewMode)}\n        onClose={() => mobilePreview.close(onClosePreview)}\n        template={previewing}\n        canStep={shown.length > 1}\n        onStep={(step) => onSelect(neighbour(step))}\n        previewUrl={previewing ? previewUrlFor(previewing.id) : ''}\n        isCurrent={!!previewing && previewing.id === currentTemplateId}\n        isOwned={!!previewing && (owned?.has(previewing.id) ?? false)}\n        using={!!using}\n        onUse={() => previewing && mobilePreview.close(() => onUse(previewing))}\n        useLabel={useLabel}\n        useIsPrimary={useIsPrimary}\n        useBlockedReason={useBlockedReason}\n      />\n\n      {brief && (\n        <TemplateBrief\n          value={brief.value}\n          onChange={brief.onChange}\n          suggestions={brief.suggestions}\n          onSubmit={brief.onSubmit}\n        />\n      )}\n\n      {previewMode === 'panel' && previewing && (\n        <div className=\"hidden sm:block\">\n          <TemplatePreviewPanel\n            template={previewing}\n            previewUrl={previewUrlFor(previewing.id)}\n            isCurrent={previewing.id === currentTemplateId}\n            isOwned={owned?.has(previewing.id) ?? false}\n            using={!!using}\n            onUse={() => onUse(previewing)}\n            useLabel={useLabel}\n            useIsPrimary={useIsPrimary}\n            useBlockedReason={useBlockedReason}\n          />\n        </div>\n      )}\n\n      <div>\n        {/* THE ROW ALWAYS HAS A LEFT SIDE NOW.\n            Search used to render alone, right-aligned, floating above the grid\n            with nothing opposite it — not a placement decision but the surviving\n            half of a toolbar whose tabs had collapsed, because every template\n            came back tagged `ecommerce` from the stale table. Two things fix it:\n            the registry gives real categories, and a brief-led surface names the\n            section on the left the way v0 does, so the filters have something to\n            sit opposite whatever the data says. */}\n        {brief ? (\n          <div className=\"mb-4 flex flex-wrap items-center justify-between gap-3\">\n            <h2 className=\"text-3xl font-semibold leading-8 tracking-[-0.02em] text-[var(--text-primary)]\">\n              Start with a template\n            </h2>\n            {tabs.length > 1 && (\n              <TabNav tabs={tabs} activeTab={filter} onTabChange={setFilter} />\n            )}\n          </div>\n        ) : controlsLayout === 'stacked' ? (\n          /* SEARCH AND ONE FILTER, ARRIVING AS THEIR OWN BEAT.\n\n             They were cut once as clutter and they were — stacked above the\n             grid with everything landing on one frame, they were three of the\n             five things standing between the title and the first template. In\n             their own beat, after the title and before the grid, they read as\n             the shelf assembling itself.\n\n             The filter is a Select, not the tab strip it was: All / Shops 10 /\n             beauty 1 / fitness 1, four chips across the middle of the screen,\n             two of them lowercase because the registry never named those\n             categories and one template deep. John: *\"we need a flter button\n             that you click then get a dropdwon, so we can remove these guys\"*.\n             The rule already said so — CLAUDE.md puts an exclusive narrowing of\n             a list in the filters, not in a row under the title. A strip that\n             wide spends the shelf's best row on a control nobody presses; a\n             Select spends 168px and says the same thing. */\n          <motion.div\n            variants={columnItemVariants}\n            /* ONE STEP EITHER SIDE. The gap above this row is the shell's\n               `mt-8` under the title and the gap below was `mb-4` — 32px in,\n               16px out, on a centred column where the eye reads the two as one\n               rhythm (John: *\"the space from the title of the page to the\n               search bar is different from the space from the search bar and\n               the templates why\"*). Both are 32 now, which is also the step\n               between the controls and the grid. */\n            className=\"mb-8 flex w-full flex-wrap items-center justify-center gap-3\"\n          >\n            <SearchField\n              tall\n              value={query}\n              onChange={setQuery}\n              placeholder=\"Search templates\"\n              className=\"w-full max-w-[520px]\"\n              /* THE FILTER LIVES IN THE FIELD. Searching and narrowing are the\n                 same question here — \"which of these\" — and two bordered boxes\n                 side by side made it look like two (John: *\"put the filter\n                 inthe search bar\"*). */\n              trailing={\n                tabs.length > 1 ? (\n                  <Select\n                    value={filter}\n                    onChange={setFilter}\n                    options={tabs.map((t) => ({\n                      value: t.id,\n                      label: t.label,\n                    }))}\n                    bare\n                    /* SIZED TO THE WORD, NOT TO THE LONGEST WORD.\n \n                       It was a fixed 132px, and the trigger lays its label out\n                       `justify-between` — so \"All\", which is what this says\n                       until somebody narrows anything, sat with about a\n                       hundred pixels of nothing between it and its chevron\n                       (John: *\"this is too too long why why all that space\"*).\n                       Auto width puts the chevron against the label; the cap\n                       keeps a long category name inside the padding the field\n                       reserves for it (`pr-[152px]` in `SearchField`), so a\n                       label can never run under the typing area. */\n                    className=\"w-auto max-w-[132px]\"\n                  />\n                ) : undefined\n              }\n            />\n          </motion.div>\n        ) : (\n          (tabs.length > 1 || templates.length > 6) && (\n            <TemplateToolbar\n              browse={browseMode}\n              onBrowse={setBrowseMode}\n              query={query}\n              onQuery={setQuery}\n              categories={tabs.filter((tab) => tab.id !== ALL)}\n              category={filter}\n              allCategory={ALL}\n              onCategory={setFilter}\n              searchOpen={searchOpen}\n            />\n          )\n        )}\n\n        {loading ? (\n          <div className={GRID_CLASS} aria-busy>\n            {Array.from({ length: 6 }).map((_, i) => (\n              <div key={i}>\n                <div className=\"aspect-[16/9] w-full animate-pulse rounded-xl bg-[var(--bg-subtle)]\" />\n                <div className=\"mt-3 h-4 w-1/3 animate-pulse rounded bg-[var(--bg-subtle)]\" />\n                <div className=\"mt-2 h-3 w-2/3 animate-pulse rounded bg-[var(--bg-subtle)]\" />\n              </div>\n            ))}\n          </div>\n        ) : shown.length === 0 ? (\n          <div className=\"rounded-xl border border-[var(--border-subtle)] bg-[var(--bg-subtle)] px-4 py-10 text-center\">\n            <p className=\"text-sm text-[var(--text-secondary)]\">\n              {query\n                ? `No templates match “${query}”.`\n                : browseMode === 'recent'\n                  ? 'Templates you open will show up here.'\n                  : browseMode === 'recommended'\n                    ? 'Nothing is recommended for your business yet. Try Browse.'\n                    : emptyNote}\n            </p>\n          </div>\n        ) : (\n          <motion.div variants={columnItemVariants} className={GRID_CLASS}>\n            {shown.slice(0, visible).map((t) => (\n              <TemplateTile\n                key={t.id}\n                template={t}\n                previewUrl={previewUrlFor(t.id)}\n                isCurrent={t.id === currentTemplateId}\n                isSelected={t.id === selectedId}\n                isOwned={owned?.has(t.id) ?? false}\n                categoryLabel={categoryLabelFor(t)}\n                intents={intents}\n                // \"Previewing\" is only true where the preview is on screen\n                // beside the tile. On a stage the grid is what you come BACK\n                // to, and by then you are not previewing anything — the mark\n                // is saying which one you were looking at.\n                selectedLabel={previewMode === 'stage' ? 'Selected' : undefined}\n                onSelect={() => {\n                  remember(t.id);\n                  onSelect(t.id);\n                  mobilePreview.openIfMobile();\n                }}\n              />\n            ))}\n            {showCreateOwn && filter === ALL && !query && !hasMore && (\n              <CreateOwnCard />\n            )}\n          </motion.div>\n        )}\n\n        {hasMore && !loading && <div ref={sentinelRef} aria-hidden=\"true\" />}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Two up, then three, then four once the frame is genuinely open.\n *\n * It was three from 1024, which on the onboarding column put a whole storefront\n * — navigation, hero, headline, product grid — inside 277px. At that size the\n * thing being judged is unreadable, so every tile reads as a grey rectangle and\n * the merchant has to open all of them to learn anything. A template shelf is\n * one of the few grids where tile size IS the function.\n *\n * Four at `xl` is safe now for the reason three was not then: the shelf only\n * ever renders with the panel collapsed, so at 1440 the row is the full frame\n * and a tile is ~330px — wider than the 277 that caused the complaint, not\n * narrower. Below that it steps down rather than squeezing.\n *\n * Shared by the grid and its loading skeleton so the two cannot drift, which is\n * the whole point of reserving the height.\n */\nconst GRID_CLASS =\n  'grid grid-cols-2 gap-x-3 gap-y-4 sm:gap-x-4 sm:gap-y-7 lg:grid-cols-3 xl:grid-cols-4';\n\nconst WEB_URL = process.env.NEXT_PUBLIC_WEB_URL || 'http://localhost:3000';\n/** One definition, so a template previews identically wherever it is met. */\nexport const previewUrlFor = (id: string) =>\n  `${WEB_URL}/preview/${id}?chrome=0`;\n\nconst PER_PAGE = 8;\n"],"mappings":"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","names":[]}

package/dist/templates/template-live-thumb.d.ts

@@ -0,0 +1,44 @@
+export interface TemplatePreviewMedia {
+    poster: string;
+    webm?: string;
+    mp4?: string;
+    width: number;
+    height: number;
+    durationMs: number;
+    sourceHash: string;
+}
+/**
+ * A template's picture.
+ *
+ * PREFERS A STILL, FALLS BACK TO A LIVE RENDER. It used to be a live
+ * `/preview/{id}` iframe unconditionally, which meant a gallery booted a full
+ * storefront render per tile just to show a thumbnail. Slow on a Lagos
+ * connection, uncacheable, and — the part that actually bit — a hard runtime
+ * dependency on the renderer for a static need. With web-render down or
+ * mid-deploy, every tile in the product was a blank white box.
+ *
+ * So: a real image when one exists, the live render only when it does not, and
+ * a legible placeholder when neither answers. The live path stays because it is
+ * genuinely useful (it can never be stale, and it is right for the preview
+ * panel where someone asked to see the thing work), but it is no longer the
+ * only way a template can be seen.
+ */
+export declare function TemplateLiveThumb({ url, preview, image, name, }: {
+    url: string;
+    preview?: TemplatePreviewMedia | null;
+    /**
+     * Pictures to try, best first. When one loads, nothing is rendered live.
+     *
+     * A LIST, not one path, because there are two places a real picture can come
+     * from and only one of them was being read. `stillFor` points at a still
+     * generated into this app's own `public/templates/`, which has to be
+     * regenerated by hand whenever a template is added — so the three most recent
+     * templates had no still, fell straight through to the live iframe, and every
+     * one of them showed as a blank white box. Meanwhile the template package
+     * itself ships `thumbnail.png`, a clean full-page capture, and nothing in this
+     * app ever asked for it.
+     */
+    image?: string | (string | null | undefined)[] | null;
+    /** Named in the placeholder, so a failed tile is still identifiable. */
+    name?: string;
+}): import("react").JSX.Element;