@withpotter/components 0.13.0-next.101

package/dist/template-editor/status-pill.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle, CheckCircle2, Clock, Loader2 } from "lucide-react";
+const COLORS = {
+  draft: "border-yellow-300 bg-yellow-50 text-yellow-800 dark:border-yellow-500/30 dark:bg-yellow-500/10 dark:text-yellow-300",
+  saved: "border-blue-300 bg-blue-50 text-blue-800 dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-300",
+  published: "border-green-300 bg-green-50 text-green-800 dark:border-green-500/30 dark:bg-green-500/10 dark:text-green-300",
+  failed: "border-red-300 bg-red-50 text-red-800 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-300"
+};
+function StatusIcon({ status }) {
+  switch (status) {
+    case "draft":
+      return /* @__PURE__ */ jsx(Loader2, { className: "animate-spin", "aria-hidden": true });
+    case "saved":
+      return /* @__PURE__ */ jsx(Clock, { "aria-hidden": true });
+    case "published":
+      return /* @__PURE__ */ jsx(CheckCircle2, { "aria-hidden": true });
+    case "failed":
+      return /* @__PURE__ */ jsx(AlertCircle, { "aria-hidden": true });
+  }
+}
+function StatusPill({
+  status,
+  label,
+  onRetry,
+  className
+}) {
+  const isRetryable = status === "failed" && typeof onRetry === "function";
+  const baseClass = "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium leading-none";
+  const merged = [baseClass, COLORS[status], className].filter(Boolean).join(" ");
+  if (isRetryable) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onRetry,
+        className: `${merged} hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400`,
+        role: "status",
+        "aria-live": "polite",
+        "data-status": status,
+        children: [
+          /* @__PURE__ */ jsx(StatusIcon, { status }),
+          /* @__PURE__ */ jsx("span", { children: label })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: merged,
+      role: "status",
+      "aria-live": "polite",
+      "data-status": status,
+      children: [
+        /* @__PURE__ */ jsx(StatusIcon, { status }),
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+}
+export {
+  StatusPill
+};
+//# sourceMappingURL=status-pill.js.map

package/dist/template-editor/status-pill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/template-editor/status-pill.tsx"],"sourcesContent":["'use client';\n\nimport { AlertCircle, CheckCircle2, Clock, Loader2 } from 'lucide-react';\nimport type {\n  TemplateSettingsStatus,\n  UseTemplateSettingsStatusResult,\n} from '@withpotter/hooks/use-template-settings-status';\n\ninterface StatusPillProps extends UseTemplateSettingsStatusResult {\n  onRetry?: () => void;\n  className?: string;\n}\n\nconst COLORS: Record<TemplateSettingsStatus, string> = {\n  draft:\n    'border-yellow-300 bg-yellow-50 text-yellow-800 dark:border-yellow-500/30 dark:bg-yellow-500/10 dark:text-yellow-300',\n  saved:\n    'border-blue-300 bg-blue-50 text-blue-800 dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-300',\n  published:\n    'border-green-300 bg-green-50 text-green-800 dark:border-green-500/30 dark:bg-green-500/10 dark:text-green-300',\n  failed:\n    'border-red-300 bg-red-50 text-red-800 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-300',\n};\n\nfunction StatusIcon({ status }: { status: TemplateSettingsStatus }) {\n  switch (status) {\n    case 'draft':\n      return <Loader2 className=\"animate-spin\" aria-hidden />;\n    case 'saved':\n      return <Clock aria-hidden />;\n    case 'published':\n      return <CheckCircle2 aria-hidden />;\n    case 'failed':\n      return <AlertCircle aria-hidden />;\n  }\n}\n\n/**\n * Always-visible status pill in the template editor header.\n * Conveys whether the merchant is looking at unsaved keystrokes,\n * a persisted draft, the live published copy, or a stuck failure.\n */\nexport function StatusPill({\n  status,\n  label,\n  onRetry,\n  className,\n}: StatusPillProps) {\n  const isRetryable = status === 'failed' && typeof onRetry === 'function';\n  const baseClass =\n    'inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium leading-none';\n  const merged = [baseClass, COLORS[status], className]\n    .filter(Boolean)\n    .join(' ');\n\n  if (isRetryable) {\n    return (\n      <button\n        type=\"button\"\n        onClick={onRetry}\n        className={`${merged} hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400`}\n        role=\"status\"\n        aria-live=\"polite\"\n        data-status={status}\n      >\n        <StatusIcon status={status} />\n        <span>{label}</span>\n      </button>\n    );\n  }\n\n  return (\n    <span\n      className={merged}\n      role=\"status\"\n      aria-live=\"polite\"\n      data-status={status}\n    >\n      <StatusIcon status={status} />\n      <span>{label}</span>\n    </span>\n  );\n}\n"],"mappings":";AA2Ba,cA8BP,YA9BO;AAzBb,SAAS,aAAa,cAAc,OAAO,eAAe;AAW1D,MAAM,SAAiD;AAAA,EACrD,OACE;AAAA,EACF,OACE;AAAA,EACF,WACE;AAAA,EACF,QACE;AACJ;AAEA,SAAS,WAAW,EAAE,OAAO,GAAuC;AAClE,UAAQ,QAAQ;AAAA,IACd,KAAK;AACH,aAAO,oBAAC,WAAQ,WAAU,gBAAe,eAAW,MAAC;AAAA,IACvD,KAAK;AACH,aAAO,oBAAC,SAAM,eAAW,MAAC;AAAA,IAC5B,KAAK;AACH,aAAO,oBAAC,gBAAa,eAAW,MAAC;AAAA,IACnC,KAAK;AACH,aAAO,oBAAC,eAAY,eAAW,MAAC;AAAA,EACpC;AACF;AAOO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,cAAc,WAAW,YAAY,OAAO,YAAY;AAC9D,QAAM,YACJ;AACF,QAAM,SAAS,CAAC,WAAW,OAAO,MAAM,GAAG,SAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,MAAI,aAAa;AACf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,WAAW,GAAG,MAAM;AAAA,QACpB,MAAK;AAAA,QACL,aAAU;AAAA,QACV,eAAa;AAAA,QAEb;AAAA,8BAAC,cAAW,QAAgB;AAAA,UAC5B,oBAAC,UAAM,iBAAM;AAAA;AAAA;AAAA,IACf;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,MAAK;AAAA,MACL,aAAU;AAAA,MACV,eAAa;AAAA,MAEb;AAAA,4BAAC,cAAW,QAAgB;AAAA,QAC5B,oBAAC,UAAM,iBAAM;AAAA;AAAA;AAAA,EACf;AAEJ;","names":[]}

package/dist/template-editor/template-preview-inspector.d.ts

@@ -0,0 +1,10 @@
+interface TemplatePreviewInspectorProps {
+    previewOrigin: string;
+    templateId: string;
+    selectedSectionId: string | null;
+    selectedFieldName: string | null;
+    selectedPathname: string | null;
+}
+export declare function resolvePreviewPageId(pathname: string | null): string;
+export declare function TemplatePreviewInspector({ previewOrigin, templateId, selectedSectionId, selectedFieldName, selectedPathname, }: TemplatePreviewInspectorProps): import("react").JSX.Element;
+export {};

package/dist/template-editor/template-preview-inspector.js

@@ -0,0 +1,166 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Loader2, Type } from "lucide-react";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { FIELD_ICONS } from "@withpotter/pages-core/dashboard/settings/pages/_lib/constants";
+import { FieldRenderer } from "@withpotter/pages-core/dashboard/settings/pages/_components/field-renderer";
+import { ImageUploadProvider } from "@withpotter/components/dynamic-form";
+import { useTemplateDocument } from "@withpotter/lib/template-preview/use-template-document";
+import {
+  dispatchAuthorPatch,
+  loadStoredPatches,
+  persistAuthorPatch
+} from "@withpotter/lib/template-preview/preview-author-patch";
+function resolvePreviewPageId(pathname) {
+  if (!pathname) return "home";
+  const segments = pathname.split("/").filter(Boolean);
+  const previewIndex = segments.indexOf("preview");
+  return previewIndex >= 0 ? segments[previewIndex + 2] ?? "home" : "home";
+}
+function resolveBlockType(raw) {
+  if (!raw) return null;
+  let id = raw;
+  if (id.includes(".")) id = id.slice(0, id.indexOf("."));
+  id = id.replace(/[-:]\d+$/, "");
+  return id || null;
+}
+function TemplatePreviewInspector({
+  previewOrigin,
+  templateId,
+  selectedSectionId,
+  selectedFieldName,
+  selectedPathname
+}) {
+  const { user } = useAuth();
+  const userId = user?.id ?? null;
+  const { document, loading, error } = useTemplateDocument(
+    previewOrigin,
+    templateId
+  );
+  const blockTypeId = useMemo(
+    () => resolveBlockType(selectedSectionId),
+    [selectedSectionId]
+  );
+  const blockSchema = useMemo(() => {
+    if (!blockTypeId) return null;
+    const pageId = resolvePreviewPageId(selectedPathname);
+    return document?.pageBlockSchemas?.[pageId]?.[blockTypeId] ?? document?.blockSchemas?.[blockTypeId] ?? null;
+  }, [document, blockTypeId, selectedPathname]);
+  const [patches, setPatches] = useState({});
+  useEffect(() => {
+    if (!userId || !templateId) return;
+    setPatches(loadStoredPatches(userId, templateId));
+  }, [userId, templateId]);
+  const values = useMemo(() => {
+    if (!blockSchema || !blockTypeId) return {};
+    const acc = {};
+    for (const field of blockSchema.fields) {
+      const stored = patches[`${selectedPathname ?? "*"}:${blockTypeId}:${field.name}`] ?? patches[`${blockTypeId}:${field.name}`];
+      acc[field.name] = stored ? stored.value : field.default;
+    }
+    return acc;
+  }, [blockSchema, blockTypeId, patches, selectedPathname]);
+  const handleFieldChange = (field, value) => {
+    if (!blockTypeId) return;
+    const detail = dispatchAuthorPatch({
+      blockId: blockTypeId,
+      field: field.name,
+      pathname: selectedPathname ?? void 0,
+      value
+    });
+    persistAuthorPatch(userId, templateId, detail);
+    setPatches((prev) => ({
+      ...prev,
+      [`${selectedPathname ?? "*"}:${blockTypeId}:${field.name}`]: {
+        value: detail.value,
+        patchId: detail.patchId,
+        ts: detail.ts
+      }
+    }));
+  };
+  const section = useMemo(() => {
+    if (!blockSchema || !blockTypeId) return null;
+    return {
+      id: blockTypeId,
+      label: blockSchema.label,
+      fields: blockSchema.fields,
+      items: blockSchema.items
+    };
+  }, [blockSchema, blockTypeId]);
+  return /* @__PURE__ */ jsx(ImageUploadProvider, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-1 border-b border-[var(--border-subtle)] pb-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-wide text-[var(--text-muted)]", children: "Template preview" }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-[var(--text-primary)]", children: templateId }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: "Edits stream to the preview iframe and are saved locally on this device." })
+    ] }),
+    loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-[var(--text-muted)]", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "size-[13px] animate-spin", "aria-hidden": true }),
+      "Loading template document\u2026"
+    ] }) : error ? /* @__PURE__ */ jsxs("div", { className: "text-sm text-[var(--error,#b91c1c)]", children: [
+      "Failed to load template: ",
+      error
+    ] }) : !selectedSectionId ? /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--text-tertiary)]", children: "Select a block in the preview to inspect its fields." }) : !section ? /* @__PURE__ */ jsxs("div", { className: "text-sm text-[var(--text-tertiary)]", children: [
+      "No schema available for block ",
+      /* @__PURE__ */ jsx("code", { children: blockTypeId }),
+      "."
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "rounded-[1px] border border-[var(--border-subtle)] bg-[var(--bg-base)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-[var(--border-subtle)]", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-[var(--text-primary)]", children: section.label }),
+        /* @__PURE__ */ jsxs("div", { className: "text-[10px] uppercase tracking-wide text-[var(--text-tertiary)]", children: [
+          section.fields.length,
+          " field",
+          section.fields.length === 1 ? "" : "s"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 pt-3 space-y-4", children: section.fields.map((field) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-field-name": field.name,
+          className: `space-y-3 scroll-mt-24 ${field.name === selectedFieldName ? "ring-2 ring-[var(--accent-primary,var(--color-accent,#2563eb))] rounded-[1px] -mx-2 px-2" : ""}`,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)]", children: FIELD_ICONS[field.type] || /* @__PURE__ */ jsx(Type, { className: "size-[13px]" }) }),
+              /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium text-[var(--text-secondary)]", children: [
+                field.label,
+                field.required && /* @__PURE__ */ jsx("span", { className: "text-[var(--error)] ml-1", children: "*" })
+              ] })
+            ] }),
+            field.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: field.description }),
+            /* @__PURE__ */ jsx(
+              FieldRenderer,
+              {
+                field,
+                value: values[field.name],
+                sectionValues: values,
+                onChange: (v) => handleFieldChange(field, v)
+              }
+            )
+          ]
+        },
+        field.name
+      )) }),
+      section.items?.fields?.length ? /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-subtle)] px-4 py-3 space-y-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-[var(--text-muted)]", children: "Item fields" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] text-[var(--text-tertiary)]", children: "Item-level editing ships in a follow-up." }),
+        /* @__PURE__ */ jsx("ul", { className: "space-y-1 text-xs text-[var(--text-secondary)]", children: section.items.fields.map((field) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)]", children: FIELD_ICONS[field.type] || /* @__PURE__ */ jsx(Type, { className: "size-[13px]" }) }),
+              field.label,
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wide text-[var(--text-tertiary)]", children: field.type })
+            ]
+          },
+          `item-${field.name}`
+        )) })
+      ] }) : null
+    ] })
+  ] }) });
+}
+export {
+  TemplatePreviewInspector,
+  resolvePreviewPageId
+};
+//# sourceMappingURL=template-preview-inspector.js.map

package/dist/template-editor/template-preview-inspector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/template-editor/template-preview-inspector.tsx"],"sourcesContent":["'use client';\n\n/**\n * Editable template-document inspector used when the editor canvas is\n * loading a web-render preview URL via `?previewTemplate=...`. Renders the\n * `blockSchemas[blockType]` fields from the template document using the\n * same `FieldRenderer` UI as the regular dashboard page editor and emits a\n * `PB_AUTHOR_PATCH` postMessage to the preview iframe (via the dispatched\n * CustomEvent picked up by StorefrontPreview) on every edit.\n *\n * Patches are persisted to\n * `localStorage['pb:preview-author:<userId>:<templateId>']` so the input\n * state survives a reload and Step 5 (web-render-side listener) can replay\n * them on iframe rehydrate.\n *\n * Cross-repo contract:\n *   `withpotter/roadmap/handoffs/in-dashboard-author-mode.md` §4.\n */\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { Loader2, Type } from 'lucide-react';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport type {\n  PageSection,\n  PageSectionField,\n} from '@withpotter/lib/template-types';\nimport { FIELD_ICONS } from '@withpotter/pages-core/dashboard/settings/pages/_lib/constants';\nimport { FieldRenderer } from '@withpotter/pages-core/dashboard/settings/pages/_components/field-renderer';\nimport { ImageUploadProvider } from '@withpotter/components/dynamic-form';\nimport { useTemplateDocument } from '@withpotter/lib/template-preview/use-template-document';\nimport {\n  dispatchAuthorPatch,\n  loadStoredPatches,\n  persistAuthorPatch,\n  type StoredPatchSet,\n} from '@withpotter/lib/template-preview/preview-author-patch';\n\ninterface TemplatePreviewInspectorProps {\n  previewOrigin: string;\n  templateId: string;\n  selectedSectionId: string | null;\n  selectedFieldName: string | null;\n  selectedPathname: string | null;\n}\n\nexport function resolvePreviewPageId(pathname: string | null): string {\n  if (!pathname) return 'home';\n  const segments = pathname.split('/').filter(Boolean);\n  const previewIndex = segments.indexOf('preview');\n  return previewIndex >= 0 ? (segments[previewIndex + 2] ?? 'home') : 'home';\n}\n\n/**\n * Resolve a clicked block id (e.g. `hero`, `trust-0`, `hero.button`) to the\n * top-level block type key used in `blockSchemas`. Trailing `-N` / `:N`\n * suffixes denote item indices inside a repeater (the parent block is what\n * has a schema entry); a `.field` suffix is the field path inside the block.\n */\nfunction resolveBlockType(raw: string | null): string | null {\n  if (!raw) return null;\n  let id = raw;\n  if (id.includes('.')) id = id.slice(0, id.indexOf('.'));\n  // Strip `:N` or `-N` (item-index) suffixes.\n  id = id.replace(/[-:]\\d+$/, '');\n  return id || null;\n}\n\nexport function TemplatePreviewInspector({\n  previewOrigin,\n  templateId,\n  selectedSectionId,\n  selectedFieldName,\n  selectedPathname,\n}: TemplatePreviewInspectorProps) {\n  const { user } = useAuth();\n  const userId = user?.id ?? null;\n  const { document, loading, error } = useTemplateDocument(\n    previewOrigin,\n    templateId,\n  );\n\n  const blockTypeId = useMemo(\n    () => resolveBlockType(selectedSectionId),\n    [selectedSectionId],\n  );\n\n  const blockSchema = useMemo(() => {\n    if (!blockTypeId) return null;\n    const pageId = resolvePreviewPageId(selectedPathname);\n    return (\n      document?.pageBlockSchemas?.[pageId]?.[blockTypeId] ??\n      document?.blockSchemas?.[blockTypeId] ??\n      null\n    );\n  }, [document, blockTypeId, selectedPathname]);\n\n  const [patches, setPatches] = useState<StoredPatchSet>({});\n\n  useEffect(() => {\n    if (!userId || !templateId) return;\n    setPatches(loadStoredPatches(userId, templateId));\n  }, [userId, templateId]);\n\n  // Build the `values` map FieldRenderer expects from stored patches +\n  // schema defaults.\n  const values = useMemo(() => {\n    if (!blockSchema || !blockTypeId) return {} as Record<string, unknown>;\n    const acc: Record<string, unknown> = {};\n    for (const field of blockSchema.fields) {\n      const stored =\n        patches[`${selectedPathname ?? '*'}:${blockTypeId}:${field.name}`] ??\n        patches[`${blockTypeId}:${field.name}`];\n      acc[field.name] = stored ? stored.value : field.default;\n    }\n    return acc;\n  }, [blockSchema, blockTypeId, patches, selectedPathname]);\n\n  const handleFieldChange = (field: PageSectionField, value: unknown) => {\n    if (!blockTypeId) return;\n    const detail = dispatchAuthorPatch({\n      blockId: blockTypeId,\n      field: field.name,\n      pathname: selectedPathname ?? undefined,\n      value,\n    });\n    persistAuthorPatch(userId, templateId, detail);\n    setPatches((prev) => ({\n      ...prev,\n      [`${selectedPathname ?? '*'}:${blockTypeId}:${field.name}`]: {\n        value: detail.value,\n        patchId: detail.patchId,\n        ts: detail.ts,\n      },\n    }));\n  };\n\n  // Cast TemplateBlockSchema → PageSection-shaped object so FieldRenderer\n  // (which expects PageSectionField) can render it directly.\n  const section: PageSection | null = useMemo(() => {\n    if (!blockSchema || !blockTypeId) return null;\n    return {\n      id: blockTypeId,\n      label: blockSchema.label,\n      fields: blockSchema.fields as unknown as PageSectionField[],\n      items: blockSchema.items as PageSection['items'],\n    };\n  }, [blockSchema, blockTypeId]);\n\n  return (\n    <ImageUploadProvider>\n    <div className=\"flex h-full flex-col gap-4 p-4\">\n      <header className=\"flex flex-col gap-1 border-b border-[var(--border-subtle)] pb-3\">\n        <div className=\"text-xs uppercase tracking-wide text-[var(--text-muted)]\">\n          Template preview\n        </div>\n        <div className=\"text-sm font-medium text-[var(--text-primary)]\">\n          {templateId}\n        </div>\n        <p className=\"text-xs text-[var(--text-tertiary)]\">\n          Edits stream to the preview iframe and are saved locally on this\n          device.\n        </p>\n      </header>\n\n      {loading ? (\n        <div className=\"flex items-center gap-2 text-sm text-[var(--text-muted)]\">\n          <Loader2 className=\"size-[13px] animate-spin\" aria-hidden />\n          Loading template document…\n        </div>\n      ) : error ? (\n        <div className=\"text-sm text-[var(--error,#b91c1c)]\">\n          Failed to load template: {error}\n        </div>\n      ) : !selectedSectionId ? (\n        <div className=\"text-sm text-[var(--text-tertiary)]\">\n          Select a block in the preview to inspect its fields.\n        </div>\n      ) : !section ? (\n        <div className=\"text-sm text-[var(--text-tertiary)]\">\n          No schema available for block <code>{blockTypeId}</code>.\n        </div>\n      ) : (\n        <div className=\"rounded-[1px] border border-[var(--border-subtle)] bg-[var(--bg-base)]\">\n          <div className=\"flex items-center gap-3 px-4 py-3 border-b border-[var(--border-subtle)]\">\n            <div className=\"text-sm font-medium text-[var(--text-primary)]\">\n              {section.label}\n            </div>\n            <div className=\"text-[10px] uppercase tracking-wide text-[var(--text-tertiary)]\">\n              {section.fields.length} field\n              {section.fields.length === 1 ? '' : 's'}\n            </div>\n          </div>\n\n          <div className=\"px-4 pb-4 pt-3 space-y-4\">\n            {section.fields.map((field) => (\n              <div\n                key={field.name}\n                data-field-name={field.name}\n                className={`space-y-3 scroll-mt-24 ${\n                  field.name === selectedFieldName\n                    ? 'ring-2 ring-[var(--accent-primary,var(--color-accent,#2563eb))] rounded-[1px] -mx-2 px-2'\n                    : ''\n                }`}\n              >\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-[var(--text-muted)]\">\n                    {FIELD_ICONS[field.type] || (\n                      <Type className=\"size-[13px]\" />\n                    )}\n                  </span>\n                  <label className=\"text-sm font-medium text-[var(--text-secondary)]\">\n                    {field.label}\n                    {field.required && (\n                      <span className=\"text-[var(--error)] ml-1\">*</span>\n                    )}\n                  </label>\n                </div>\n                {field.description && (\n                  <p className=\"text-xs text-[var(--text-tertiary)]\">\n                    {field.description}\n                  </p>\n                )}\n                <FieldRenderer\n                  field={field}\n                  value={values[field.name]}\n                  sectionValues={values}\n                  onChange={(v) => handleFieldChange(field, v)}\n                />\n              </div>\n            ))}\n          </div>\n\n          {section.items?.fields?.length ? (\n            <div className=\"border-t border-[var(--border-subtle)] px-4 py-3 space-y-2\">\n              <div className=\"text-xs font-medium uppercase tracking-wide text-[var(--text-muted)]\">\n                Item fields\n              </div>\n              <p className=\"text-[11px] text-[var(--text-tertiary)]\">\n                Item-level editing ships in a follow-up.\n              </p>\n              <ul className=\"space-y-1 text-xs text-[var(--text-secondary)]\">\n                {section.items.fields.map((field) => (\n                  <li\n                    key={`item-${field.name}`}\n                    className=\"flex items-center gap-2\"\n                  >\n                    <span className=\"text-[var(--text-muted)]\">\n                      {FIELD_ICONS[field.type] || (\n                        <Type className=\"size-[13px]\" />\n                      )}\n                    </span>\n                    {field.label}\n                    <span className=\"text-[10px] uppercase tracking-wide text-[var(--text-tertiary)]\">\n                      {field.type}\n                    </span>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ) : null}\n        </div>\n      )}\n    </div>\n    </ImageUploadProvider>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/templates/category-label.d.ts

@@ -0,0 +1,18 @@
+import type { RegistryTemplate } from '@withpotter/lib/template-context';
+type Category = {
+    id: string;
+    name: string;
+    count: number;
+};
+/**
+ * The words under a tile's name. The filter's own words, so a tile and the chip
+ * that finds it agree. One template can suit several businesses; name the first
+ * two it fits.
+ */
+export declare function categoryLabeller(categories: Category[] | undefined, categoryMatch?: (template: RegistryTemplate, categoryId: string) => boolean): (t: RegistryTemplate) => string;
+/**
+ * Recommended: the one picked for this business, plus every template that can
+ * present everything the business sells.
+ */
+export declare function fitsBusiness(t: RegistryTemplate, recommendedId?: string | null, intents?: string[]): boolean;
+export {};

package/dist/templates/category-label.js

@@ -0,0 +1,20 @@
+import { missingFor } from "@withpotter/lib/intents/archetype-flow";
+function categoryLabeller(categories, categoryMatch) {
+  const names = new Map((categories ?? []).map((c) => [c.id, c.name]));
+  return (t) => {
+    if (categoryMatch) {
+      const fits = (categories ?? []).filter((c) => categoryMatch(t, c.id)).map((c) => c.name);
+      if (fits.length > 0) return fits.slice(0, 2).join(" \xB7 ");
+    }
+    const id = t.category;
+    return names.get(id) ?? (id ? id.replace(/[-_]/g, " ").replace(/^./, (c) => c.toUpperCase()) : "");
+  };
+}
+function fitsBusiness(t, recommendedId, intents) {
+  return t.id === recommendedId || (intents?.length ?? 0) > 0 && missingFor(t, intents ?? []).length === 0;
+}
+export {
+  categoryLabeller,
+  fitsBusiness
+};
+//# sourceMappingURL=category-label.js.map

package/dist/templates/category-label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/templates/category-label.ts"],"sourcesContent":["import type { RegistryTemplate } from '@withpotter/lib/template-context';\nimport { missingFor } from '@withpotter/lib/intents/archetype-flow';\n\ntype Category = { id: string; name: string; count: number };\n\n/**\n * The words under a tile's name. The filter's own words, so a tile and the chip\n * that finds it agree. One template can suit several businesses; name the first\n * two it fits.\n */\nexport function categoryLabeller(\n  categories: Category[] | undefined,\n  categoryMatch?: (template: RegistryTemplate, categoryId: string) => boolean,\n) {\n  const names = new Map((categories ?? []).map((c) => [c.id, c.name]));\n  return (t: RegistryTemplate) => {\n    if (categoryMatch) {\n      const fits = (categories ?? [])\n        .filter((c) => categoryMatch(t, c.id))\n        .map((c) => c.name);\n      if (fits.length > 0) return fits.slice(0, 2).join(' · ');\n    }\n    const id = t.category;\n    return (\n      names.get(id) ??\n      (id ? id.replace(/[-_]/g, ' ').replace(/^./, (c) => c.toUpperCase()) : '')\n    );\n  };\n}\n\n/**\n * Recommended: the one picked for this business, plus every template that can\n * present everything the business sells.\n */\nexport function fitsBusiness(\n  t: RegistryTemplate,\n  recommendedId?: string | null,\n  intents?: string[],\n) {\n  return (\n    t.id === recommendedId ||\n    ((intents?.length ?? 0) > 0 && missingFor(t, intents ?? []).length === 0)\n  );\n}\n"],"mappings":"AACA,SAAS,kBAAkB;AASpB,SAAS,iBACd,YACA,eACA;AACA,QAAM,QAAQ,IAAI,KAAK,cAAc,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AACnE,SAAO,CAAC,MAAwB;AAC9B,QAAI,eAAe;AACjB,YAAM,QAAQ,cAAc,CAAC,GAC1B,OAAO,CAAC,MAAM,cAAc,GAAG,EAAE,EAAE,CAAC,EACpC,IAAI,CAAC,MAAM,EAAE,IAAI;AACpB,UAAI,KAAK,SAAS,EAAG,QAAO,KAAK,MAAM,GAAG,CAAC,EAAE,KAAK,QAAK;AAAA,IACzD;AACA,UAAM,KAAK,EAAE;AACb,WACE,MAAM,IAAI,EAAE,MACX,KAAK,GAAG,QAAQ,SAAS,GAAG,EAAE,QAAQ,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,IAAI;AAAA,EAE3E;AACF;AAMO,SAAS,aACd,GACA,eACA,SACA;AACA,SACE,EAAE,OAAO,kBACP,SAAS,UAAU,KAAK,KAAK,WAAW,GAAG,WAAW,CAAC,CAAC,EAAE,WAAW;AAE3E;","names":[]}

package/dist/templates/create-own.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The "Create your own" tile — an AI-generated storefront, coming soon. Sits at
+ * the end of the gallery as the alternative to picking an off-the-shelf template.
+ */
+export declare function CreateOwnCard(): import("react").JSX.Element;

package/dist/templates/create-own.js

@@ -0,0 +1,82 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { motion } from "motion/react";
+import { Check, Plus } from "lucide-react";
+import { springs } from "@withpotter/lib/motion";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter
+} from "@withpotter/ui-kit/dialog";
+import { Button } from "@withpotter/ui-kit/button";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+const POINTS = [
+  ["Built from your products", "Not filler and stock photos."],
+  [
+    "Your palette, type and wordmark",
+    "It reads like your brand, because it is."
+  ],
+  ["Fully editable after", "Everything stays yours to change."]
+];
+function CreateOwnCard() {
+  const { toast } = useToast();
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "group", children: [
+      /* @__PURE__ */ jsxs(
+        motion.button,
+        {
+          type: "button",
+          onClick: () => setOpen(true),
+          whileHover: { y: -4 },
+          transition: springs.snappy,
+          className: "flex aspect-[16/9] w-full flex-col items-center justify-center gap-2 rounded-xl border-[1.5px] border-dashed border-[var(--border-default)] text-center transition-colors hover:border-[var(--border-strong)]",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "grid h-11 w-11 place-items-center rounded-xl bg-[var(--bg-muted)] text-[var(--text-primary)]", children: /* @__PURE__ */ jsx(Plus, { className: "size-5" }) }),
+            /* @__PURE__ */ jsx("span", { className: "rounded-full bg-[var(--bg-muted)] px-2 py-0.5 text-3xs font-semibold uppercase tracking-wide text-[var(--text-tertiary)]", children: "Coming soon" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("h3", { className: "mt-3 text-lg font-semibold tracking-[-0.01em] text-[var(--text-primary)]", children: "Create your own" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-[var(--text-tertiary)]", children: "Describe your brand, we generate the store." })
+    ] }),
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: "Create your own storefront" }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: "A site built for you, not picked off a shelf." })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-[var(--text-secondary)]", children: "Point Box at your catalogue and describe the vibe. It generates a full, on-brand storefront from your own products, then you tweak it in the editor like any other template." }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: POINTS.map(([title, body]) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx(Check, { className: "mt-0.5 h-[15px] w-[15px] flex-shrink-0 text-brand-500" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-tertiary)]", children: body })
+        ] })
+      ] }, title)) }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: () => setOpen(false), children: "Not now" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "primary",
+            onClick: () => {
+              setOpen(false);
+              toast({
+                title: "Nice. We'll let you know the moment it's ready."
+              });
+            },
+            children: "Notify me when it's ready"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  CreateOwnCard
+};
+//# sourceMappingURL=create-own.js.map

package/dist/templates/create-own.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/templates/create-own.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { motion } from 'motion/react';\nimport { Check, Plus } from 'lucide-react';\nimport { springs } from '@withpotter/lib/motion';\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n  DialogFooter,\n} from '@withpotter/ui-kit/dialog';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { useToast } from '@withpotter/ui-kit/use-toast';\n\nconst POINTS = [\n  ['Built from your products', 'Not filler and stock photos.'],\n  [\n    'Your palette, type and wordmark',\n    'It reads like your brand, because it is.',\n  ],\n  ['Fully editable after', 'Everything stays yours to change.'],\n] as const;\n\n/**\n * The \"Create your own\" tile — an AI-generated storefront, coming soon. Sits at\n * the end of the gallery as the alternative to picking an off-the-shelf template.\n */\nexport function CreateOwnCard() {\n  const { toast } = useToast();\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <div className=\"group\">\n        <motion.button\n          type=\"button\"\n          onClick={() => setOpen(true)}\n          whileHover={{ y: -4 }}\n          transition={springs.snappy}\n          className=\"flex aspect-[16/9] w-full flex-col items-center justify-center gap-2 rounded-xl border-[1.5px] border-dashed border-[var(--border-default)] text-center transition-colors hover:border-[var(--border-strong)]\"\n        >\n          <span className=\"grid h-11 w-11 place-items-center rounded-xl bg-[var(--bg-muted)] text-[var(--text-primary)]\">\n            <Plus className=\"size-5\" />\n          </span>\n          <span className=\"rounded-full bg-[var(--bg-muted)] px-2 py-0.5 text-3xs font-semibold uppercase tracking-wide text-[var(--text-tertiary)]\">\n            Coming soon\n          </span>\n        </motion.button>\n        <h3 className=\"mt-3 text-lg font-semibold tracking-[-0.01em] text-[var(--text-primary)]\">\n          Create your own\n        </h3>\n        <p className=\"mt-0.5 text-xs text-[var(--text-tertiary)]\">\n          Describe your brand, we generate the store.\n        </p>\n      </div>\n\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Create your own storefront</DialogTitle>\n            <DialogDescription>\n              A site built for you, not picked off a shelf.\n            </DialogDescription>\n          </DialogHeader>\n          <p className=\"text-sm leading-relaxed text-[var(--text-secondary)]\">\n            Point Box at your catalogue and describe the vibe. It generates a\n            full, on-brand storefront from your own products, then you tweak it\n            in the editor like any other template.\n          </p>\n          <div className=\"space-y-3\">\n            {POINTS.map(([title, body]) => (\n              <div key={title} className=\"flex items-start gap-3\">\n                <Check className=\"mt-0.5 h-[15px] w-[15px] flex-shrink-0 text-brand-500\" />\n                <div className=\"min-w-0\">\n                  <p className=\"text-sm font-medium text-[var(--text-primary)]\">\n                    {title}\n                  </p>\n                  <p className=\"text-sm text-[var(--text-tertiary)]\">{body}</p>\n                </div>\n              </div>\n            ))}\n          </div>\n          <DialogFooter>\n            <Button variant=\"ghost\" onClick={() => setOpen(false)}>\n              Not now\n            </Button>\n            <Button\n              variant=\"primary\"\n              onClick={() => {\n                setOpen(false);\n                toast({\n                  title: \"Nice. We'll let you know the moment it's ready.\",\n                });\n              }}\n            >\n              Notify me when it&apos;s ready\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}\n"],"mappings":";AAmCI,mBAUQ,KARJ,YAFJ;AAjCJ,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,OAAO,YAAY;AAC5B,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,gBAAgB;AAEzB,MAAM,SAAS;AAAA,EACb,CAAC,4BAA4B,8BAA8B;AAAA,EAC3D;AAAA,IACE;AAAA,IACA;AAAA,EACF;AAAA,EACA,CAAC,wBAAwB,mCAAmC;AAC9D;AAMO,SAAS,gBAAgB;AAC9B,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,SACE,iCACE;AAAA,yBAAC,SAAI,WAAU,SACb;AAAA;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM,QAAQ,IAAI;AAAA,UAC3B,YAAY,EAAE,GAAG,GAAG;AAAA,UACpB,YAAY,QAAQ;AAAA,UACpB,WAAU;AAAA,UAEV;AAAA,gCAAC,UAAK,WAAU,gGACd,8BAAC,QAAK,WAAU,UAAS,GAC3B;AAAA,YACA,oBAAC,UAAK,WAAU,4HAA2H,yBAE3I;AAAA;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,QAAG,WAAU,4EAA2E,6BAEzF;AAAA,MACA,oBAAC,OAAE,WAAU,8CAA6C,yDAE1D;AAAA,OACF;AAAA,IAEA,oBAAC,UAAO,MAAY,cAAc,SAChC,+BAAC,iBACC;AAAA,2BAAC,gBACC;AAAA,4BAAC,eAAY,wCAA0B;AAAA,QACvC,oBAAC,qBAAkB,2DAEnB;AAAA,SACF;AAAA,MACA,oBAAC,OAAE,WAAU,wDAAuD,0LAIpE;AAAA,MACA,oBAAC,SAAI,WAAU,aACZ,iBAAO,IAAI,CAAC,CAAC,OAAO,IAAI,MACvB,qBAAC,SAAgB,WAAU,0BACzB;AAAA,4BAAC,SAAM,WAAU,yDAAwD;AAAA,QACzE,qBAAC,SAAI,WAAU,WACb;AAAA,8BAAC,OAAE,WAAU,kDACV,iBACH;AAAA,UACA,oBAAC,OAAE,WAAU,uCAAuC,gBAAK;AAAA,WAC3D;AAAA,WAPQ,KAQV,CACD,GACH;AAAA,MACA,qBAAC,gBACC;AAAA,4BAAC,UAAO,SAAQ,SAAQ,SAAS,MAAM,QAAQ,KAAK,GAAG,qBAEvD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,MAAM;AACb,sBAAQ,KAAK;AACb,oBAAM;AAAA,gBACJ,OAAO;AAAA,cACT,CAAC;AAAA,YACH;AAAA,YACD;AAAA;AAAA,QAED;AAAA,SACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,43 @@
+import type { RegistryTemplate } from '@withpotter/lib/template-context';
+/**
+ * The brief: say what the site should be, in your own words.
+ *
+ * Shaped after v0's front door, measured off it rather than eyeballed — a 690px
+ * box at 12px radius over a 1px hairline, 14px inside, under a 32/40 heading at
+ * -0.04em, with suggestion chips beneath at 32px tall and fully rounded. The
+ * reason to copy the shape is that v0 solved the thing this screen kept getting
+ * wrong: the input IS the primary control and the shelf sits under it as the
+ * alternative, so neither has to pretend to be a toolbar.
+ *
+ * WHAT IT ACTUALLY DOES TODAY, stated plainly because the temptation here is a
+ * facade: it filters and reorders the shelf. Type "padel court booking" and the
+ * bookable templates come first. There is no generation behind it yet, so there
+ * is no button promising any, and the arrow opens the best match rather than
+ * pretending to build something. The text is kept on the draft so the builder
+ * can pick it up when it exists — which is the only part of this that is a
+ * placeholder, and it is a placeholder for data, not for behaviour.
+ *
+ * It replaces the search field rather than joining it. Two text inputs over one
+ * grid, one labelled "describe your site" and one labelled "search templates",
+ * would be asking the merchant to know which of two boxes their sentence
+ * belongs in.
+ */
+export declare function TemplateBrief({ value, onChange, suggestions, onSubmit, }: {
+    value: string;
+    onChange: (next: string) => void;
+    /** Drawn from the archetype, so the examples are the merchant's own trade. */
+    suggestions: string[];
+    /** Opens the closest match. Nothing is generated. */
+    onSubmit: () => void;
+}): import("react").JSX.Element;
+/**
+ * How well a template answers a brief.
+ *
+ * Deliberately dumb: word overlap against everything the registry declares —
+ * name, description, tags, categories, behaviors. It is a filter, not a model,
+ * and it should not read like one. Returns 0 for no match so the caller can
+ * decide between reordering and hiding.
+ */
+export declare function briefScore(t: RegistryTemplate, brief: string): number;
+/** Example briefs per archetype, so the chips speak the merchant's trade. */
+export declare function briefSuggestions(intent: string | undefined): string[];

package/dist/templates/template-brief.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { motion } from "motion/react";
+import { ArrowRight } from "lucide-react";
+import { springs } from "@withpotter/lib/motion";
+import { Button, Textarea } from "@withpotter/ui-kit";
+function TemplateBrief({
+  value,
+  onChange,
+  suggestions,
+  onSubmit
+}) {
+  const [focused, setFocused] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit: (e) => {
+          e.preventDefault();
+          onSubmit();
+        },
+        className: `w-full max-w-[690px] rounded-xl border bg-[var(--bg-subtle)] px-4 py-3 transition-colors ${focused ? "border-[var(--border-strong)]" : "border-[var(--border-subtle)]"}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              variant: "bare",
+              value,
+              onChange: (e) => onChange(e.target.value),
+              onFocus: () => setFocused(true),
+              onBlur: () => setFocused(false),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  onSubmit();
+                }
+              },
+              rows: 2,
+              placeholder: "Describe the site you want",
+              "aria-label": "Describe the site you want",
+              className: "block text-md leading-[1.5]"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center justify-end", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "submit",
+              disabled: !value.trim(),
+              "aria-label": "Show the closest match",
+              className: "grid h-8 w-8 place-items-center rounded-lg bg-brand-500 text-white transition-opacity hover:bg-brand-600 disabled:opacity-30",
+              children: /* @__PURE__ */ jsx(ArrowRight, { className: "h-[15px] w-[15px]" })
+            }
+          ) })
+        ]
+      }
+    ),
+    suggestions.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap items-center justify-center gap-2", children: suggestions.map((s, i) => (
+      // A suggestion fires and forgets — it fills the brief and is
+      // gone — so it is a Button, not an OptionButton: there is no
+      // state here to hold or to look held. The stagger moves to a
+      // wrapper so the entrance survives the primitive.
+      /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { opacity: 0, y: 4 },
+          animate: { opacity: 1, y: 0 },
+          transition: { ...springs.gentle, delay: 0.05 + i * 0.04 },
+          children: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => onChange(s), children: s })
+        },
+        s
+      )
+    )) })
+  ] });
+}
+function briefScore(t, brief) {
+  const words = brief.toLowerCase().split(/[^a-z0-9]+/).filter((w) => w.length > 2);
+  if (words.length === 0) return 0;
+  const haystack = [
+    t.name,
+    t.description,
+    t.category,
+    ...t.tags ?? [],
+    ...t.relevantCategories ?? [],
+    ...t.behaviors ?? []
+  ].join(" ").toLowerCase();
+  return words.reduce((n, w) => haystack.includes(w) ? n + 1 : n, 0);
+}
+function briefSuggestions(intent) {
+  return BRIEF_SUGGESTIONS[intent ?? ""] ?? [];
+}
+const BRIEF_SUGGESTIONS = {
+  "take-bookings": ["Court booking", "Coaching sessions", "Memberships"],
+  "rent-property": ["Short lets", "Event space", "Availability calendar"],
+  "sell-products": ["Clothing store", "Home goods", "Lookbook"],
+  "digital-products": ["Downloads", "Presets", "Course"],
+  "event-tickets": ["Ticket tiers", "Line-up", "Merch"],
+  "food-orders": ["Menu and delivery", "Daily specials"],
+  "dine-in": ["Table reservations", "Menu"],
+  subscriptions: ["Membership tiers", "Monthly box"],
+  "send-invoices": ["Services and rates", "Client enquiries"],
+  "capture-leads": ["Enquiry form", "Services"]
+};
+export {
+  TemplateBrief,
+  briefScore,
+  briefSuggestions
+};
+//# sourceMappingURL=template-brief.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/templates/template-brief.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { motion } from 'motion/react';\nimport { ArrowRight } from 'lucide-react';\nimport { springs } from '@withpotter/lib/motion';\nimport type { RegistryTemplate } from '@withpotter/lib/template-context';\nimport { Button, Textarea } from '@withpotter/ui-kit';\n\n/**\n * The brief: say what the site should be, in your own words.\n *\n * Shaped after v0's front door, measured off it rather than eyeballed — a 690px\n * box at 12px radius over a 1px hairline, 14px inside, under a 32/40 heading at\n * -0.04em, with suggestion chips beneath at 32px tall and fully rounded. The\n * reason to copy the shape is that v0 solved the thing this screen kept getting\n * wrong: the input IS the primary control and the shelf sits under it as the\n * alternative, so neither has to pretend to be a toolbar.\n *\n * WHAT IT ACTUALLY DOES TODAY, stated plainly because the temptation here is a\n * facade: it filters and reorders the shelf. Type \"padel court booking\" and the\n * bookable templates come first. There is no generation behind it yet, so there\n * is no button promising any, and the arrow opens the best match rather than\n * pretending to build something. The text is kept on the draft so the builder\n * can pick it up when it exists — which is the only part of this that is a\n * placeholder, and it is a placeholder for data, not for behaviour.\n *\n * It replaces the search field rather than joining it. Two text inputs over one\n * grid, one labelled \"describe your site\" and one labelled \"search templates\",\n * would be asking the merchant to know which of two boxes their sentence\n * belongs in.\n */\nexport function TemplateBrief({\n  value,\n  onChange,\n  suggestions,\n  onSubmit,\n}: {\n  value: string;\n  onChange: (next: string) => void;\n  /** Drawn from the archetype, so the examples are the merchant's own trade. */\n  suggestions: string[];\n  /** Opens the closest match. Nothing is generated. */\n  onSubmit: () => void;\n}) {\n  const [focused, setFocused] = useState(false);\n\n  return (\n    <div className=\"flex flex-col items-center\">\n      <form\n        onSubmit={(e) => {\n          e.preventDefault();\n          onSubmit();\n        }}\n        className={`w-full max-w-[690px] rounded-xl border bg-[var(--bg-subtle)] px-4 py-3 transition-colors ${\n          focused\n            ? 'border-[var(--border-strong)]'\n            : 'border-[var(--border-subtle)]'\n        }`}\n      >\n        <Textarea\n          variant=\"bare\"\n          value={value}\n          onChange={(e) => onChange(e.target.value)}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' && !e.shiftKey) {\n              e.preventDefault();\n              onSubmit();\n            }\n          }}\n          rows={2}\n          placeholder=\"Describe the site you want\"\n          aria-label=\"Describe the site you want\"\n          className=\"block text-md leading-[1.5]\"\n        />\n\n        <div className=\"mt-2 flex items-center justify-end\">\n          <button\n            type=\"submit\"\n            disabled={!value.trim()}\n            aria-label=\"Show the closest match\"\n            className=\"grid h-8 w-8 place-items-center rounded-lg bg-brand-500 text-white transition-opacity hover:bg-brand-600 disabled:opacity-30\"\n          >\n            <ArrowRight className=\"h-[15px] w-[15px]\" />\n          </button>\n        </div>\n      </form>\n\n      {suggestions.length > 0 && (\n        <div className=\"mt-3 flex flex-wrap items-center justify-center gap-2\">\n          {suggestions.map((s, i) => (\n            // A suggestion fires and forgets — it fills the brief and is\n            // gone — so it is a Button, not an OptionButton: there is no\n            // state here to hold or to look held. The stagger moves to a\n            // wrapper so the entrance survives the primitive.\n            <motion.div\n              key={s}\n              initial={{ opacity: 0, y: 4 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ ...springs.gentle, delay: 0.05 + i * 0.04 }}\n            >\n              <Button variant=\"secondary\" onClick={() => onChange(s)}>\n                {s}\n              </Button>\n            </motion.div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * How well a template answers a brief.\n *\n * Deliberately dumb: word overlap against everything the registry declares —\n * name, description, tags, categories, behaviors. It is a filter, not a model,\n * and it should not read like one. Returns 0 for no match so the caller can\n * decide between reordering and hiding.\n */\nexport function briefScore(t: RegistryTemplate, brief: string): number {\n  const words = brief\n    .toLowerCase()\n    .split(/[^a-z0-9]+/)\n    .filter((w) => w.length > 2);\n  if (words.length === 0) return 0;\n\n  const haystack = [\n    t.name,\n    t.description,\n    t.category,\n    ...(t.tags ?? []),\n    ...(t.relevantCategories ?? []),\n    ...(t.behaviors ?? []),\n  ]\n    .join(' ')\n    .toLowerCase();\n\n  return words.reduce((n, w) => (haystack.includes(w) ? n + 1 : n), 0);\n}\n\n/** Example briefs per archetype, so the chips speak the merchant's trade. */\nexport function briefSuggestions(intent: string | undefined): string[] {\n  return BRIEF_SUGGESTIONS[intent ?? ''] ?? [];\n}\n\nconst BRIEF_SUGGESTIONS: Record<string, string[]> = {\n  'take-bookings': ['Court booking', 'Coaching sessions', 'Memberships'],\n  'rent-property': ['Short lets', 'Event space', 'Availability calendar'],\n  'sell-products': ['Clothing store', 'Home goods', 'Lookbook'],\n  'digital-products': ['Downloads', 'Presets', 'Course'],\n  'event-tickets': ['Ticket tiers', 'Line-up', 'Merch'],\n  'food-orders': ['Menu and delivery', 'Daily specials'],\n  'dine-in': ['Table reservations', 'Menu'],\n  subscriptions: ['Membership tiers', 'Monthly box'],\n  'send-invoices': ['Services and rates', 'Client enquiries'],\n  'capture-leads': ['Enquiry form', 'Services'],\n};\n"],"mappings":"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","names":[]}