makersclaw 0.1.0 → 0.3.0

package/registry/blocks/page-builder/sections.js

@@ -0,0 +1,209 @@
+// The built-in blocks and starter templates, as plain data. Server-safe.
+//
+// Every block is an HTML string with `pb-` classes; BASE_CSS styles those
+// classes with theme tokens only (var(--color-…), --theme-font-*,
+// --theme-radius), so a page built from them repaints with the theme.
+// `data-gjs-name` names a section in the Layers panel. A consumer adds its
+// own blocks in the same shape (README: "Your own sections"); a block may
+// carry its own `css`, which the editor adds once.
+//
+// `thumb` picks the small wireframe the Add panel draws for the block:
+// hero · split · features · logos · quote · pricing · faq · cta · footer ·
+// heading · text · button · image · columns · divider · spacer · list ·
+// blank.
+
+export const BASE_CSS = `
+.pb-section{padding:88px 24px;background-color:var(--color-background);color:var(--color-foreground)}
+.pb-container{max-width:1080px;margin-left:auto;margin-right:auto}
+.pb-narrow{max-width:720px;margin-left:auto;margin-right:auto}
+.pb-center{text-align:center}
+.pb-kicker{display:inline-block;margin:0 0 16px;padding:4px 12px;border:1px solid var(--color-border);border-radius:9999px;font-size:0.8125rem;font-weight:500;color:var(--color-muted-foreground)}
+.pb-display{margin:0 0 20px;font-family:var(--theme-font-display);font-size:3.25rem;line-height:1.05;font-weight:700;letter-spacing:-0.02em}
+.pb-h2{margin:0 0 12px;font-family:var(--theme-font-display);font-size:2.25rem;line-height:1.15;font-weight:700;letter-spacing:-0.015em}
+.pb-h3{margin:0 0 8px;font-size:1.125rem;line-height:1.4;font-weight:600}
+.pb-lead{margin:0 0 32px;font-size:1.25rem;line-height:1.55;color:var(--color-muted-foreground)}
+.pb-text{margin:0 0 16px;font-size:1rem;line-height:1.65}
+.pb-muted{color:var(--color-muted-foreground)}
+.pb-small{font-size:0.875rem;line-height:1.5}
+.pb-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
+.pb-center .pb-actions{justify-content:center}
+.pb-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:var(--theme-radius);background-color:var(--color-primary);color:var(--color-primary-foreground);font-weight:600;font-size:0.9375rem;text-decoration:none;border:1px solid transparent}
+.pb-button-quiet{background-color:transparent;color:var(--color-foreground);border-color:var(--color-border)}
+.pb-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:center}
+.pb-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
+.pb-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;padding:16px 0;min-height:80px}
+.pb-col{min-height:48px}
+.pb-card{padding:28px;border:1px solid var(--color-border);border-radius:calc(var(--theme-radius) * 1.5);background-color:var(--color-card);color:var(--color-card-foreground)}
+.pb-dot{width:36px;height:36px;margin-bottom:20px;border-radius:var(--theme-radius);background-color:var(--color-accent);border:1px solid var(--color-border)}
+.pb-media{aspect-ratio:4/3;width:100%;border-radius:calc(var(--theme-radius) * 1.5);background-color:var(--color-muted);border:1px solid var(--color-border)}
+.pb-img{display:block;max-width:100%;height:auto;border-radius:var(--theme-radius)}
+.pb-head{margin-bottom:48px}
+.pb-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 48px;margin-top:20px;font-family:var(--theme-font-display);font-size:1.25rem;font-weight:600;color:var(--color-muted-foreground)}
+.pb-logos-section{padding:48px 24px;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
+.pb-quote{margin:0 0 24px;font-family:var(--theme-font-display);font-size:1.75rem;line-height:1.35;font-weight:500;letter-spacing:-0.01em}
+.pb-price{margin:8px 0 4px;font-family:var(--theme-font-display);font-size:2.5rem;font-weight:700;line-height:1.1}
+.pb-plan-strong{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}
+.pb-list{margin:20px 0 28px;padding-left:20px;line-height:1.9}
+.pb-faq{border-top:1px solid var(--color-border);padding:20px 0}
+.pb-cta{padding:72px 24px;background-color:var(--color-primary);color:var(--color-primary-foreground)}
+.pb-cta .pb-lead{color:var(--color-primary-foreground);opacity:0.85}
+.pb-cta .pb-button{background-color:var(--color-primary-foreground);color:var(--color-primary)}
+.pb-footer{padding:48px 24px;border-top:1px solid var(--color-border);background-color:var(--color-background);color:var(--color-muted-foreground);font-size:0.875rem}
+.pb-footer-row{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
+.pb-footer-links{display:flex;flex-wrap:wrap;gap:8px 24px}
+.pb-footer a{color:inherit;text-decoration:none}
+.pb-brand{font-family:var(--theme-font-display);font-weight:700;font-size:1.125rem;color:var(--color-foreground)}
+.pb-divider{height:1px;border:0;margin:32px 0;background-color:var(--color-border)}
+.pb-spacer{height:64px}
+@media (max-width: 768px){
+.pb-section{padding:56px 20px}
+.pb-display{font-size:2.25rem}
+.pb-h2{font-size:1.75rem}
+.pb-lead{font-size:1.0625rem}
+.pb-quote{font-size:1.375rem}
+.pb-grid-2,.pb-grid-3,.pb-cols{grid-template-columns:minmax(0,1fr);gap:24px}
+.pb-cta{padding:56px 20px}
+}
+`.trim();
+
+const hero = `<section class="pb-section pb-center" data-gjs-name="Hero">
+  <div class="pb-narrow">
+    <p class="pb-kicker">New · Early access is open</p>
+    <h1 class="pb-display">The calm way to run your week</h1>
+    <p class="pb-lead">Plan the work, share the plan, and see what moved — in one place your whole team will actually open.</p>
+    <div class="pb-actions">
+      <a class="pb-button" href="/signup">Start free</a>
+      <a class="pb-button pb-button-quiet" href="/tour">Take the tour</a>
+    </div>
+  </div>
+</section>`;
+
+const split = `<section class="pb-section" data-gjs-name="Hero, split">
+  <div class="pb-container pb-grid-2">
+    <div>
+      <h1 class="pb-display">Every customer, one clear picture</h1>
+      <p class="pb-lead">Notes, deals and conversations sit together, so the next step is always obvious.</p>
+      <div class="pb-actions">
+        <a class="pb-button" href="/signup">Get started</a>
+        <a class="pb-button pb-button-quiet" href="/demo">Book a demo</a>
+      </div>
+    </div>
+    <div class="pb-media" data-gjs-name="Picture"></div>
+  </div>
+</section>`;
+
+const features = `<section class="pb-section" data-gjs-name="Features">
+  <div class="pb-container">
+    <div class="pb-head pb-narrow pb-center">
+      <h2 class="pb-h2">Built for the way small teams work</h2>
+      <p class="pb-lead">Three things we obsess over, so you do not have to.</p>
+    </div>
+    <div class="pb-grid-3">
+      <div class="pb-card"><div class="pb-dot"></div><h3 class="pb-h3">Set up in minutes</h3><p class="pb-text pb-muted">Import what you have and start where you left off. No training day required.</p></div>
+      <div class="pb-card"><div class="pb-dot"></div><h3 class="pb-h3">Everyone on the same page</h3><p class="pb-text pb-muted">One shared view of priorities, owners and dates — updated the moment anything changes.</p></div>
+      <div class="pb-card"><div class="pb-dot"></div><h3 class="pb-h3">Private by default</h3><p class="pb-text pb-muted">Your data stays yours. Export everything, any time, in plain formats.</p></div>
+    </div>
+  </div>
+</section>`;
+
+const logos = `<section class="pb-logos-section pb-center" data-gjs-name="Logos">
+  <p class="pb-small pb-muted">Trusted by teams at</p>
+  <div class="pb-logos"><span>Northwind</span><span>Halcyon</span><span>Brightline</span><span>Tessellate</span><span>Oakridge</span></div>
+</section>`;
+
+const quote = `<section class="pb-section pb-center" data-gjs-name="Quote">
+  <div class="pb-narrow">
+    <p class="pb-quote">“We replaced three tools and a weekly status meeting. The team finally knows what matters this week.”</p>
+    <p class="pb-text"><strong>Maya Okafor</strong><br><span class="pb-muted pb-small">Head of Operations, Brightline</span></p>
+  </div>
+</section>`;
+
+const pricing = `<section class="pb-section" data-gjs-name="Pricing">
+  <div class="pb-container">
+    <div class="pb-head pb-narrow pb-center">
+      <h2 class="pb-h2">Simple pricing</h2>
+      <p class="pb-lead">Start free. Upgrade when your team grows.</p>
+    </div>
+    <div class="pb-grid-2" style="align-items:stretch">
+      <div class="pb-card"><h3 class="pb-h3">Starter</h3><p class="pb-price">Free</p><p class="pb-text pb-muted">For you and a teammate.</p><ul class="pb-list"><li>Up to 3 projects</li><li>Shared views</li><li>Email support</li></ul><a class="pb-button pb-button-quiet" href="/signup">Start free</a></div>
+      <div class="pb-card pb-plan-strong"><h3 class="pb-h3">Team</h3><p class="pb-price">$12</p><p class="pb-text pb-muted">Per person, per month.</p><ul class="pb-list"><li>Unlimited projects</li><li>Guests and permissions</li><li>Priority support</li></ul><a class="pb-button" href="/signup?plan=team">Try Team free</a></div>
+    </div>
+  </div>
+</section>`;
+
+const faq = `<section class="pb-section" data-gjs-name="Questions">
+  <div class="pb-narrow">
+    <h2 class="pb-h2">Questions, answered</h2>
+    <div class="pb-faq"><h3 class="pb-h3">Can I try it before I pay?</h3><p class="pb-text pb-muted">Yes. Every plan starts with a free trial, and the Starter plan is free for good.</p></div>
+    <div class="pb-faq"><h3 class="pb-h3">Can I bring my data with me?</h3><p class="pb-text pb-muted">Import a spreadsheet or connect the tools you already use. It takes a few clicks.</p></div>
+    <div class="pb-faq"><h3 class="pb-h3">What happens if I cancel?</h3><p class="pb-text pb-muted">You keep read access and can export everything. No questions, no hoops.</p></div>
+  </div>
+</section>`;
+
+const cta = `<section class="pb-cta pb-center" data-gjs-name="Call to action">
+  <div class="pb-narrow">
+    <h2 class="pb-h2">Ready when you are</h2>
+    <p class="pb-lead">Set up your first project in the next five minutes.</p>
+    <div class="pb-actions"><a class="pb-button" href="/signup">Start free</a></div>
+  </div>
+</section>`;
+
+const footer = `<footer class="pb-footer" data-gjs-name="Footer">
+  <div class="pb-container pb-footer-row">
+    <span class="pb-brand">Acme</span>
+    <nav class="pb-footer-links"><a href="/about">About</a><a href="/pricing">Pricing</a><a href="/blog">Blog</a><a href="/privacy">Privacy</a></nav>
+    <span>© 2026 Acme, Inc.</span>
+  </div>
+</footer>`;
+
+/** The built-in blocks. Sections first, then the basics. */
+export const SECTION_BLOCKS = [
+  { id: "hero", label: "Hero", category: "Sections", thumb: "hero", description: "A headline, a line of detail and two buttons, centred.", html: hero },
+  { id: "hero-split", label: "Hero, split", category: "Sections", thumb: "split", description: "Headline and buttons beside a picture.", html: split },
+  { id: "features", label: "Features", category: "Sections", thumb: "features", description: "Three cards that each make one point.", html: features },
+  { id: "logos", label: "Logos", category: "Sections", thumb: "logos", description: "A quiet row of customer names.", html: logos },
+  { id: "quote", label: "Quote", category: "Sections", thumb: "quote", description: "One customer, in their own words.", html: quote },
+  { id: "pricing", label: "Pricing", category: "Sections", thumb: "pricing", description: "Two plans side by side.", html: pricing },
+  { id: "faq", label: "Questions", category: "Sections", thumb: "faq", description: "The questions people ask before they sign up.", html: faq },
+  { id: "cta", label: "Call to action", category: "Sections", thumb: "cta", description: "A bold band with one button.", html: cta },
+  { id: "footer", label: "Footer", category: "Sections", thumb: "footer", description: "Brand, links and the small print.", html: footer },
+];
+
+export const BASIC_BLOCKS = [
+  { id: "heading", label: "Heading", category: "Basics", thumb: "heading", html: `<h2 class="pb-h2">A clear heading</h2>` },
+  { id: "text", label: "Text", category: "Basics", thumb: "text", html: `<p class="pb-text">Write a sentence or two that says what this part of the page is about.</p>` },
+  { id: "button", label: "Button", category: "Basics", thumb: "button", html: `<a class="pb-button" href="/signup">Get started</a>` },
+  { id: "image", label: "Image", category: "Basics", thumb: "image", content: { type: "image", classes: ["pb-img"], attributes: { alt: "" } } },
+  { id: "columns", label: "Two columns", category: "Basics", thumb: "columns", html: `<div class="pb-cols" data-gjs-name="Columns"><div class="pb-col" data-gjs-name="Column"></div><div class="pb-col" data-gjs-name="Column"></div></div>` },
+  { id: "list", label: "List", category: "Basics", thumb: "list", html: `<ul class="pb-list"><li>First point</li><li>Second point</li><li>Third point</li></ul>` },
+  { id: "divider", label: "Divider", category: "Basics", thumb: "divider", html: `<hr class="pb-divider">` },
+  { id: "spacer", label: "Space", category: "Basics", thumb: "spacer", html: `<div class="pb-spacer" data-gjs-name="Space"></div>` },
+  { id: "section", label: "Empty section", category: "Basics", thumb: "blank", html: `<section class="pb-section" data-gjs-name="Section"><div class="pb-container"><h2 class="pb-h2">New section</h2><p class="pb-text pb-muted">Drop blocks here.</p></div></section>` },
+];
+
+const joinBlocks = (ids) => ids.map((id) => SECTION_BLOCKS.find((b) => b.id === id)?.html ?? "").join("\n");
+
+/** The built-in starter templates. A template is a whole page. */
+export const STARTER_TEMPLATES = [
+  {
+    id: "launch",
+    label: "Product launch",
+    description: "Hero, logos, features, a quote and a call to action.",
+    thumbs: ["hero", "logos", "features", "cta"],
+    html: joinBlocks(["hero", "logos", "features", "quote", "cta", "footer"]),
+  },
+  {
+    id: "sales",
+    label: "Sales page",
+    description: "A split hero, features, pricing and questions.",
+    thumbs: ["split", "features", "pricing", "faq"],
+    html: joinBlocks(["hero-split", "features", "pricing", "faq", "footer"]),
+  },
+  {
+    id: "simple",
+    label: "One-pager",
+    description: "Just a hero and a footer to build on.",
+    thumbs: ["hero", "footer"],
+    html: joinBlocks(["hero", "footer"]),
+  },
+];

package/registry/blocks/page-builder/theme.js

@@ -0,0 +1,87 @@
+// GrapesJS in the workspace theme — the one place its look is mapped. Like
+// sketch-canvas's theme.js for Excalidraw.
+//
+// With <Canvas> (custom UI) GrapesJS draws no panels at all. What it still
+// draws, around the iframe, is: the hover and selection outlines, the name
+// badge, the small toolbar on the selected element (select parent, move,
+// copy, delete), resize handles, the drop placeholder while dragging, and
+// the rich-text toolbar while a text is edited. Its stylesheet paints them
+// from --gjs-* variables set on :root; each is pointed at a token here,
+// set on our wrapper (a nearer ancestor wins). The few colours it writes
+// literally (white toolbar text, white resize handles) are overridden with
+// `!` utilities: its stylesheet is unlayered, and !important inside a
+// layer is the one thing that outranks it.
+//
+// --gjs-left-width / --gjs-canvas-top are the room its default panels
+// would take; there are none, so the canvas fills the frame.
+export const GJS_VARS = [
+  "[--gjs-color-blue:var(--color-primary)]",
+  "[--gjs-color-highlight:var(--color-primary)]",
+  "[--gjs-placeholder-background-color:var(--color-primary)]",
+  "[--gjs-color-yellow:var(--color-warning)]",
+  "[--gjs-color-warn:var(--color-warning)]",
+  "[--gjs-color-red:var(--color-destructive)]",
+  "[--gjs-color-green:var(--color-success)]",
+  "[--gjs-primary-color:var(--color-muted)]",
+  "[--gjs-secondary-color:var(--color-foreground)]",
+  "[--gjs-main-color:var(--color-popover)]",
+  "[--gjs-font-color:var(--color-popover-foreground)]",
+  "[--gjs-font-color-active:var(--color-foreground)]",
+  "[--gjs-main-dark-color:var(--color-border)]",
+  "[--gjs-main-light-color:var(--color-accent)]",
+  "[--gjs-soft-light-color:var(--color-accent)]",
+  "[--gjs-main-font:var(--theme-font-sans)]",
+  "[--gjs-font-size:0.8125rem]",
+  "[--gjs-left-width:0px]",
+  "[--gjs-canvas-top:0px]",
+].join(" ");
+
+export const GJS_THEME = [
+  // the editor and the canvas behind the frame
+  "[&_.gjs-editor]:bg-muted!",
+  "[&_.gjs-cv-canvas]:bg-muted!",
+  "[&_.gjs-frame-wrapper]:transition-[width]",
+  "[&_.gjs-frame-wrapper]:motion-reduce:transition-none",
+  // the selected element's toolbar and the name badge
+  "[&_.gjs-toolbar]:text-primary-foreground!",
+  "[&_.gjs-toolbar]:rounded-md!",
+  "[&_.gjs-toolbar]:overflow-hidden",
+  "[&_.gjs-toolbar]:shadow-sm",
+  "[&_.gjs-toolbar-item]:w-7!",
+  "[&_.gjs-toolbar-item]:p-1.5!",
+  "[&_.gjs-toolbar-item:hover]:bg-primary-foreground/15",
+  "[&_.gjs-badge]:text-primary-foreground!",
+  "[&_.gjs-badge]:rounded-md!",
+  "[&_.gjs-badge]:px-2!",
+  "[&_.gjs-badge]:py-0.5!",
+  "[&_.gjs-badge]:text-xs!",
+  "[&_.gjs-badge]:font-medium!",
+  // resize handles
+  "[&_.gjs-resizer-h]:bg-background!",
+  "[&_.gjs-resizer-h]:rounded-full",
+  // the text toolbar
+  "[&_.gjs-rte-toolbar]:rounded-lg!",
+  "[&_.gjs-rte-toolbar]:border!",
+  "[&_.gjs-rte-toolbar]:border-border!",
+  "[&_.gjs-rte-toolbar]:shadow-md",
+  "[&_.gjs-rte-toolbar]:overflow-hidden",
+  "[&_.gjs-rte-toolbar-ui]:border-0!",
+  "[&_.gjs-rte-action]:w-8!",
+  "[&_.gjs-rte-action]:h-8!",
+  "[&_.gjs-rte-action]:text-popover-foreground!",
+  // the drop placeholder
+  "[&_.gjs-placeholder-int]:rounded-full",
+].join(" ");
+
+/** The frame's own stylesheet (inside the iframe; never exported): the
+ *  page's base on the theme, a calm dashed outline for empty boxes while
+ *  editing, and a hint in an empty frame. The tokens it reads are written
+ *  into the frame beside it (tokens.js tokenCss). */
+export const FRAME_CSS =
+  "body{margin:0;min-height:100vh;background-color:var(--color-background);color:var(--color-foreground);" +
+  "font-family:var(--theme-font-sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}" +
+  "*,*::before,*::after{box-sizing:border-box}img{max-width:100%}" +
+  "a{color:inherit}" +
+  ".gjs-dashed *[data-gjs-highlightable]{outline:1px dashed var(--color-border)!important;outline-offset:-1px}" +
+  ".gjs-dashed .pb-col:empty,.gjs-dashed .pb-spacer{background-color:var(--color-muted)}" +
+  "::selection{background-color:var(--color-accent)}";

package/registry/blocks/page-builder/thumbs.jsx

@@ -0,0 +1,189 @@
+// Small wireframes of the blocks, for the Add panel and the template cards.
+// Drawn from tokens with plain boxes (decoration, hidden from readers): a
+// bar is a line of text, a filled bar a button, a tinted box a picture.
+// Server-safe. A block names one with `thumb`; an unknown name draws
+// "blank".
+import { cx } from "../../ui";
+
+const Bar = ({ w = "w-2/3", strong = false, className }) => (
+  <span className={cx("block h-1 rounded-full", strong ? "bg-foreground/70" : "bg-muted-foreground/35", w, className)} />
+);
+const Btn = ({ quiet = false, className }) => (
+  <span className={cx("block h-2 w-6 rounded-sm", quiet ? "border border-border" : "bg-primary", className)} />
+);
+const Pic = ({ className }) => <span className={cx("block rounded-sm border border-border bg-accent", className)} />;
+const Card = ({ children }) => <span className="flex flex-1 flex-col gap-1 rounded-sm border border-border bg-card p-1">{children}</span>;
+
+const THUMBS = {
+  hero: (
+    <span className="flex h-full flex-col items-center justify-center gap-1.5">
+      <Bar w="w-8" />
+      <Bar w="w-3/4" strong className="h-1.5" />
+      <Bar w="w-1/2" />
+      <span className="flex gap-1">
+        <Btn />
+        <Btn quiet />
+      </span>
+    </span>
+  ),
+  split: (
+    <span className="flex h-full items-center gap-2 px-1">
+      <span className="flex flex-1 flex-col gap-1.5">
+        <Bar w="w-full" strong className="h-1.5" />
+        <Bar w="w-3/4" />
+        <Btn />
+      </span>
+      <Pic className="h-10 flex-1" />
+    </span>
+  ),
+  features: (
+    <span className="flex h-full flex-col justify-center gap-1.5">
+      <Bar w="w-1/2" strong className="mx-auto" />
+      <span className="flex gap-1">
+        {[0, 1, 2].map((i) => (
+          <Card key={i}>
+            <Pic className="size-1.5" />
+            <Bar w="w-full" />
+            <Bar w="w-2/3" />
+          </Card>
+        ))}
+      </span>
+    </span>
+  ),
+  logos: (
+    <span className="flex h-full flex-col items-center justify-center gap-2">
+      <Bar w="w-1/3" />
+      <span className="flex w-full justify-center gap-1.5">
+        {[0, 1, 2, 3].map((i) => (
+          <Bar key={i} w="w-4" strong className="h-1.5" />
+        ))}
+      </span>
+    </span>
+  ),
+  quote: (
+    <span className="flex h-full flex-col items-center justify-center gap-1.5">
+      <Bar w="w-5/6" strong />
+      <Bar w="w-2/3" strong />
+      <Bar w="w-1/4" className="mt-1" />
+    </span>
+  ),
+  pricing: (
+    <span className="flex h-full items-center gap-1.5 px-2">
+      {[0, 1].map((i) => (
+        <Card key={i}>
+          <Bar w="w-1/2" />
+          <Bar w="w-1/3" strong className="h-1.5" />
+          <Bar w="w-full" />
+          <Btn quiet={i === 0} className="w-full" />
+        </Card>
+      ))}
+    </span>
+  ),
+  faq: (
+    <span className="flex h-full flex-col justify-center gap-1.5 px-3">
+      <Bar w="w-1/2" strong />
+      {[0, 1, 2].map((i) => (
+        <span key={i} className="flex flex-col gap-0.5 border-t border-border pt-1">
+          <Bar w="w-2/3" />
+        </span>
+      ))}
+    </span>
+  ),
+  cta: (
+    <span className="flex h-full flex-col items-center justify-center gap-1.5 rounded-sm bg-primary">
+      <span className="block h-1.5 w-1/2 rounded-full bg-primary-foreground/80" />
+      <span className="block h-2 w-6 rounded-sm bg-primary-foreground" />
+    </span>
+  ),
+  footer: (
+    <span className="flex h-full flex-col justify-end">
+      <span className="flex items-center justify-between gap-1 border-t border-border px-1 pt-2">
+        <Bar w="w-4" strong />
+        <span className="flex gap-1">
+          <Bar w="w-3" />
+          <Bar w="w-3" />
+          <Bar w="w-3" />
+        </span>
+      </span>
+    </span>
+  ),
+  heading: (
+    <span className="flex h-full items-center px-2">
+      <Bar w="w-3/4" strong className="h-2" />
+    </span>
+  ),
+  text: (
+    <span className="flex h-full flex-col justify-center gap-1 px-2">
+      <Bar w="w-full" />
+      <Bar w="w-full" />
+      <Bar w="w-2/3" />
+    </span>
+  ),
+  button: (
+    <span className="flex h-full items-center justify-center">
+      <span className="block h-3 w-10 rounded-sm bg-primary" />
+    </span>
+  ),
+  image: (
+    <span className="flex h-full items-center justify-center px-3 py-1.5">
+      <Pic className="h-full w-full" />
+    </span>
+  ),
+  columns: (
+    <span className="flex h-full items-stretch gap-1.5 p-1.5">
+      <span className="flex-1 rounded-sm border border-dashed border-border" />
+      <span className="flex-1 rounded-sm border border-dashed border-border" />
+    </span>
+  ),
+  list: (
+    <span className="flex h-full flex-col justify-center gap-1 px-3">
+      {[0, 1, 2].map((i) => (
+        <span key={i} className="flex items-center gap-1">
+          <span className="block size-1 rounded-full bg-muted-foreground/60" />
+          <Bar w="w-2/3" />
+        </span>
+      ))}
+    </span>
+  ),
+  divider: (
+    <span className="flex h-full items-center px-2">
+      <span className="block h-px w-full bg-border" />
+    </span>
+  ),
+  spacer: (
+    <span className="flex h-full flex-col items-center justify-center gap-0.5 text-muted-foreground/60">
+      <span className="block h-px w-6 bg-muted-foreground/40" />
+      <span className="block h-3 w-px bg-muted-foreground/40" />
+      <span className="block h-px w-6 bg-muted-foreground/40" />
+    </span>
+  ),
+  blank: (
+    <span className="flex h-full items-center justify-center p-1.5">
+      <span className="block h-full w-full rounded-sm border border-dashed border-border" />
+    </span>
+  ),
+};
+
+/** One block's wireframe, filling its box. */
+export function BlockThumb({ name, className }) {
+  return (
+    <span aria-hidden="true" className={cx("block overflow-hidden rounded-md border border-border bg-background p-1.5", className)}>
+      {THUMBS[name] ?? THUMBS.blank}
+    </span>
+  );
+}
+
+/** A whole page's wireframe: its sections stacked, for a template card. */
+export function PageThumb({ names = [], className }) {
+  return (
+    <span aria-hidden="true" className={cx("flex flex-col gap-1 overflow-hidden rounded-md border border-border bg-background p-1.5", className)}>
+      {(names.length ? names : ["blank"]).slice(0, 4).map((n, i) => (
+        <span key={i} className="block h-9 shrink-0">
+          {THUMBS[n] ?? THUMBS.blank}
+        </span>
+      ))}
+    </span>
+  );
+}
+
+export const THUMB_NAMES = Object.keys(THUMBS);