@jimmy_harika/websitekit 0.3.1

package/src/catalogs/publisher/catalog.tsx

@@ -0,0 +1,308 @@
+/**
+ * Publisher catalog for `@jimmy_harika/websitekit`.
+ *
+ * Composes the shared, design-system-agnostic blocks (`../../blocks`) into engine
+ * `SectionDefinition`s for publishing-house / press websites. Lives in the package
+ * (not in any one app) so every app that serves publishers inherits it — and
+ * improvements here upgrade all of them. Reuses the SAME block components as the
+ * author catalog, re-framed with publisher copy, labels, and defaults.
+ *
+ * Live data (the press's real catalogue of titles) is NOT fetched here: book
+ * blocks declare `items`/`item` in their schema and carry a `source: "live"`
+ * descriptor; the consuming app resolves the live list into those props before
+ * render and strips them before save (so the site stays live). See the app-side
+ * book resolver.
+ */
+import { type ComponentType } from "react";
+import { z } from "zod";
+import {
+  buildCatalog,
+  type Catalog,
+  type FieldDescriptor,
+  type SectionDefinition,
+  type SectionVariant,
+} from "../../registry";
+import {
+  AuthorBio,
+  AuthorHero,
+  BookGrid,
+  BookSpotlight,
+  Contact,
+  Newsletter,
+} from "../../blocks";
+
+/* ── helpers ─────────────────────────────────────────────────────────────── */
+/** Erase a strongly-typed block component to the engine's prop-agnostic slot.
+ *  (The engine injects `edit` + validated props at runtime.) */
+const comp = (C: ComponentType<never>): ComponentType<Record<string, unknown>> =>
+  C as unknown as ComponentType<Record<string, unknown>>;
+
+const text = (key: string, label: string, placeholder?: string): FieldDescriptor => ({
+  key,
+  label,
+  widget: "text",
+  ...(placeholder ? { placeholder } : {}),
+});
+const textarea = (key: string, label: string): FieldDescriptor => ({ key, label, widget: "textarea" });
+const image = (key: string, label: string): FieldDescriptor => ({ key, label, widget: "image" });
+const select = (
+  key: string,
+  label: string,
+  options: { value: string; label: string }[],
+): FieldDescriptor => ({ key, label, widget: "select", options });
+const list = (key: string, label: string, help: string): FieldDescriptor => ({
+  key,
+  label,
+  widget: "list",
+  help,
+});
+
+const bookItemSchema = z.object({
+  id: z.string().optional(),
+  title: z.string(),
+  subtitle: z.string().optional(),
+  coverUrl: z.string().optional(),
+  description: z.string().optional(),
+  links: z.array(z.object({ label: z.string(), url: z.string() })).optional(),
+});
+
+/** Parse a "Label | https://url" list-field string into a links array. */
+function parseLinks(raw: unknown): { label: string; url: string }[] | undefined {
+  if (typeof raw !== "string" || !raw.trim()) return undefined;
+  const links = raw
+    .split("\n")
+    .map((line) => line.split("|").map((s) => s.trim()))
+    .filter((parts) => parts[0])
+    .map(([label, u]) => ({ label: label ?? "", url: u ?? "#" }));
+  return links.length ? links : undefined;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   1. HEADER — publisherHero
+   ════════════════════════════════════════════════════════════════════════════ */
+const publisherHero: SectionDefinition = {
+  type: "publisherHero",
+  label: "Publisher Hero",
+  category: "Header",
+  description: "Your press name + positioning line, over a banner or as a tall type-only masthead.",
+  schema: z.object({
+    eyebrow: z.string().optional(),
+    name: z.string(),
+    tagline: z.string().optional(),
+    portrait: z.string().optional(),
+    align: z.enum(["center", "left"]).optional(),
+  }),
+  defaults: {
+    eyebrow: "Independent Press · Est. 1992",
+    name: "Lantern House",
+    tagline: "An independent press for ambitious literary fiction and the books that outlast their season.",
+    portrait: "https://images.unsplash.com/photo-1507842217343-583bb7270b66?w=1600&q=80",
+    align: "center",
+  },
+  inline: { name: "text", tagline: "text", portrait: "image" },
+  variants: [
+    { id: "portrait", label: "Over banner", props: { align: "center" } },
+    { id: "type-only", label: "Type only", props: { align: "center", portrait: "" } },
+    { id: "split", label: "Split", props: { align: "left" } },
+  ] satisfies SectionVariant[],
+  fields: [
+    text("eyebrow", "Eyebrow", "Small line above the press name"),
+    text("name", "Press name"),
+    text("tagline", "Positioning line"),
+    image("portrait", "Banner image"),
+    select("align", "Layout", [
+      { value: "center", label: "Centered over banner" },
+      { value: "left", label: "Split (text + banner)" },
+    ]),
+  ],
+  Component: comp(AuthorHero),
+};
+
+/* ════════════════════════════════════════════════════════════════════════════
+   2. STORY — aboutPress
+   ════════════════════════════════════════════════════════════════════════════ */
+const aboutPress: SectionDefinition = {
+  type: "aboutPress",
+  label: "About the press",
+  category: "Story",
+  description: "The story of the house — beside an image of the office, shelves, or team.",
+  schema: z.object({
+    eyebrow: z.string().optional(),
+    heading: z.string(),
+    body: z.string(),
+    portrait: z.string().optional(),
+    flip: z.boolean().optional(),
+  }),
+  defaults: {
+    eyebrow: "About the press",
+    heading: "Publishing since 1992.",
+    body: "We're a small house with a long memory. For three decades we've published writers other presses passed on, and stayed with them book after book.\n\nWe believe a backlist is a promise, not an archive. This is the part where you tell readers and booksellers what your house stands for.",
+    portrait: "https://images.unsplash.com/photo-1521587760476-6c12a4b040da?w=1400&q=80",
+    flip: false,
+  },
+  inline: { heading: "text", body: "text", portrait: "image" },
+  variants: [
+    { id: "image-left", label: "Image left", props: { flip: false } },
+    { id: "image-right", label: "Image right", props: { flip: true } },
+  ] satisfies SectionVariant[],
+  fields: [
+    text("eyebrow", "Eyebrow"),
+    text("heading", "Heading"),
+    textarea("body", "Body"),
+    image("portrait", "Image"),
+  ],
+  Component: comp(AuthorBio),
+};
+
+/* ════════════════════════════════════════════════════════════════════════════
+   3. CATALOGUE — featuredTitle, catalogGrid  (items resolved live by the app)
+   ════════════════════════════════════════════════════════════════════════════ */
+const featuredTitle: SectionDefinition = {
+  type: "featuredTitle",
+  label: "Featured Title",
+  category: "Catalogue",
+  description: "Feature one title — cover, blurb, and buy links. Pulls your latest release by default.",
+  schema: z.object({
+    eyebrow: z.string().optional(),
+    heading: z.string().optional(),
+    layout: z.enum(["cover-left", "cover-right"]).optional(),
+    source: z.enum(["live", "manual"]).optional(),
+    item: bookItemSchema.optional(),
+  }),
+  defaults: {
+    eyebrow: "New release",
+    heading: "This season's lead title",
+    layout: "cover-left",
+    source: "live",
+  },
+  inline: { heading: "text" },
+  variants: [
+    { id: "cover-left", label: "Cover left", props: { layout: "cover-left" } },
+    { id: "cover-right", label: "Cover right", props: { layout: "cover-right" } },
+  ] satisfies SectionVariant[],
+  fields: [
+    text("eyebrow", "Eyebrow"),
+    text("heading", "Heading"),
+    select("layout", "Cover side", [
+      { value: "cover-left", label: "Left" },
+      { value: "cover-right", label: "Right" },
+    ]),
+  ],
+  Component: comp(BookSpotlight),
+};
+
+const catalogGrid: SectionDefinition = {
+  type: "catalogGrid",
+  label: "Catalogue Grid",
+  category: "Catalogue",
+  description: "Your list — a responsive grid of the press's titles.",
+  schema: z.object({
+    eyebrow: z.string().optional(),
+    heading: z.string().optional(),
+    columns: z.union([z.number(), z.string()]).optional(),
+    limit: z.number().optional(),
+    source: z.enum(["live", "manual"]).optional(),
+    items: z.array(bookItemSchema).optional(),
+  }),
+  defaults: {
+    eyebrow: "The list",
+    heading: "Our Catalogue",
+    columns: 3,
+    limit: 12,
+    source: "live",
+  },
+  inline: { heading: "text" },
+  fields: [
+    text("eyebrow", "Eyebrow"),
+    text("heading", "Heading"),
+    select("columns", "Columns", [
+      { value: "2", label: "2" },
+      { value: "3", label: "3" },
+      { value: "4", label: "4" },
+    ]),
+  ],
+  Component: comp(BookGrid),
+};
+
+/* ════════════════════════════════════════════════════════════════════════════
+   4. CONNECT — newsletter, contact
+   ════════════════════════════════════════════════════════════════════════════ */
+const newsletter: SectionDefinition = {
+  type: "newsletter",
+  label: "Newsletter",
+  category: "Connect",
+  description: "Email capture for new-release announcements from the press.",
+  schema: z.object({
+    eyebrow: z.string().optional(),
+    heading: z.string().optional(),
+    body: z.string().optional(),
+    cta: z.string().optional(),
+    placeholder: z.string().optional(),
+    actionUrl: z.string().optional(),
+  }),
+  defaults: {
+    eyebrow: "Newsletter",
+    heading: "New releases from the press",
+    body: "Season announcements, cover reveals, and news from our authors. No spam.",
+    cta: "Subscribe",
+  },
+  fields: [
+    text("eyebrow", "Eyebrow"),
+    text("heading", "Heading"),
+    textarea("body", "Body"),
+    text("cta", "Button label"),
+  ],
+  Component: comp(Newsletter),
+};
+
+/** Contact wraps the block to parse the inspector `socials` list-string into a
+ *  `links` array (the list widget stores a raw string). */
+const ContactWrapped: ComponentType<Record<string, unknown>> = (props) => {
+  const links = parseLinks(props.socials) ?? (props.links as { label: string; url: string }[] | undefined);
+  return <Contact {...(props as Record<string, never>)} links={links} />;
+};
+ContactWrapped.displayName = "ContactWrapped";
+
+const contact: SectionDefinition = {
+  type: "contact",
+  label: "Contact",
+  category: "Connect",
+  description: "Rights, submissions, and contact — plus social links to close the page.",
+  schema: z.object({
+    eyebrow: z.string().optional(),
+    heading: z.string().optional(),
+    body: z.string().optional(),
+    email: z.string().optional(),
+    socials: z.string().optional(),
+    links: z.array(z.object({ label: z.string(), url: z.string() })).optional(),
+  }),
+  defaults: {
+    eyebrow: "Rights & submissions",
+    heading: "Work with the press",
+    body: "Submissions, foreign and translation rights, press and events — start here.",
+    email: "submissions@yourpress.com",
+    socials: "Instagram | https://instagram.com\nBluesky | https://bsky.app",
+  },
+  inline: { heading: "text", body: "text" },
+  fields: [
+    text("eyebrow", "Eyebrow"),
+    text("heading", "Heading"),
+    textarea("body", "Body"),
+    text("email", "Email"),
+    list("socials", "Social links", "One per line: Label | https://url"),
+  ],
+  Component: ContactWrapped,
+};
+
+/** The publisher catalog — ordered to emit: Header → Story → Catalogue → Connect. */
+export const PUBLISHER_CATALOG: Catalog = buildCatalog([
+  publisherHero,
+  aboutPress,
+  catalogGrid,
+  featuredTitle,
+  newsletter,
+  contact,
+]);
+
+/** Section types whose `items`/`item` the app should resolve from live books. */
+export const PUBLISHER_BOOK_SECTION_TYPES = ["featuredTitle", "catalogGrid"] as const;

package/src/catalogs/publisher/index.ts

@@ -0,0 +1,10 @@
+/**
+ * `@jimmy_harika/websitekit/catalogs/publisher` — the publisher-website vertical:
+ * catalog (block definitions) + starter templates for publishing houses. A
+ * consuming app imports `PUBLISHER_CATALOG` for the editor + renderer,
+ * `PUBLISHER_TEMPLATES` for the template gallery, and resolves live titles into
+ * `PUBLISHER_BOOK_SECTION_TYPES`.
+ */
+export { PUBLISHER_CATALOG, PUBLISHER_BOOK_SECTION_TYPES } from "./catalog";
+export { PUBLISHER_TEMPLATES, blankPublisherDocument } from "./templates";
+export { type BookItem } from "../../blocks";

package/src/catalogs/publisher/templates.ts

@@ -0,0 +1,158 @@
+/**
+ * Publisher website templates — complete starter sites on the publisher catalog.
+ * Each `build()` returns a themed `PageDocument`. Catalogue sections carry only a
+ * `source: "live"` descriptor; the app injects the press's real titles at render.
+ */
+import { createSectionId, type PageDocument, type Section, type TemplateMeta } from "../../model";
+
+const sec = (type: string, props: Record<string, unknown>, variant?: string): Section => ({
+  id: createSectionId(),
+  type,
+  ...(variant ? { variant } : {}),
+  props,
+});
+
+/* ── Folio — classic literary serif, cream ──────────────────────────────────── */
+function folio(): PageDocument {
+  return {
+    theme: {
+      fontHeading: "Cormorant Garamond",
+      fontBody: "Jost",
+      colors: { bg: "#f7f4ed", text: "#221f1a", primary: "#221f1a", accent: "#7c5a36", muted: "#6f6a62" },
+      radius: "sm",
+      spacing: "roomy",
+    },
+    sections: [
+      sec("publisherHero", {
+        eyebrow: "Independent Literary Press · Est. 1992",
+        name: "Lantern House",
+        tagline: "An independent press for ambitious literary fiction and the books that outlast their season.",
+        portrait: "https://images.unsplash.com/photo-1507842217343-583bb7270b66?w=1600&q=80",
+        align: "center",
+      }, "portrait"),
+      sec("aboutPress", {
+        eyebrow: "About the press",
+        heading: "Publishing since 1992.",
+        body: "We're a small house with a long memory. For three decades we've published writers other presses passed on, and stayed with them book after book — first novels, mid-career risks, the quiet masterpiece nobody saw coming.\n\nWe believe a backlist is a promise, not an archive. Every title we print, we keep in print.",
+        portrait: "https://images.unsplash.com/photo-1521587760476-6c12a4b040da?w=1400&q=80",
+        flip: false,
+      }, "image-left"),
+      sec("catalogGrid", { eyebrow: "The list", heading: "Our Catalogue", columns: 3, limit: 12, source: "live" }),
+      sec("featuredTitle", {
+        eyebrow: "New release",
+        heading: "This season's lead title",
+        layout: "cover-left",
+        source: "live",
+      }, "cover-left"),
+      sec("newsletter", {
+        eyebrow: "Newsletter",
+        heading: "New releases from the press",
+        body: "Season announcements, cover reveals, and news from our authors. No spam, ever.",
+        cta: "Subscribe",
+      }),
+      sec("contact", {
+        eyebrow: "Rights & submissions",
+        heading: "Work with the press",
+        body: "We read unagented submissions twice a year. Foreign and translation rights, press, and events — start here.",
+        email: "submissions@lanternhouse.press",
+        socials: "Instagram | https://instagram.com\nBluesky | https://bsky.app",
+      }),
+    ],
+  };
+}
+
+/* ── Press — modern sans, ink-dark ─────────────────────────────────────────── */
+function press(): PageDocument {
+  return {
+    theme: {
+      fontHeading: "Space Grotesk",
+      fontBody: "Inter",
+      colors: { bg: "#101114", text: "#f1f0ee", primary: "#f1f0ee", accent: "#e0563b", muted: "#9a978f" },
+      radius: "md",
+      spacing: "normal",
+    },
+    sections: [
+      sec("publisherHero", {
+        eyebrow: "Independent Publisher · Since 2009",
+        name: "North Press",
+        tagline: "We publish books that argue with the present — narrative nonfiction, ideas, and design that travels.",
+        portrait: "https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=1600&q=80",
+        align: "center",
+      }, "portrait"),
+      sec("featuredTitle", {
+        eyebrow: "Out now",
+        heading: "The new one",
+        layout: "cover-right",
+        source: "live",
+      }, "cover-right"),
+      sec("aboutPress", {
+        eyebrow: "About the press",
+        heading: "A house built for the long argument.",
+        body: "Founded in 2009 around a simple bet: that serious books, made beautifully, still find their people. We publish fifteen titles a year and over-invest in every one — the edit, the cover, the campaign.\n\nNo filler list, no churn. If we sign it, we're with it for a decade.",
+        portrait: "https://images.unsplash.com/photo-1526243741027-444d633d7365?w=1400&q=80",
+        flip: true,
+      }, "image-right"),
+      sec("catalogGrid", { eyebrow: "The list", heading: "Our Catalogue", columns: 4, limit: 16, source: "live" }),
+      sec("newsletter", {
+        eyebrow: "The list",
+        heading: "New releases from the press",
+        body: "Season catalogues, early excerpts, and event invites — straight to your inbox.",
+        cta: "Join",
+      }),
+      sec("contact", {
+        eyebrow: "Rights & submissions",
+        heading: "Get in touch",
+        body: "Agented submissions and subsidiary rights to the editorial desk; press and events below.",
+        email: "rights@northpress.co",
+        socials: "X | https://x.com\nLinkedIn | https://linkedin.com",
+      }),
+    ],
+  };
+}
+
+export const PUBLISHER_TEMPLATES: TemplateMeta[] = [
+  {
+    id: "folio",
+    name: "Folio",
+    category: "Publisher",
+    description: "Classic literary serif on cream — for independent and literary presses.",
+    build: folio,
+  },
+  {
+    id: "press",
+    name: "Press",
+    category: "Publisher",
+    description: "Modern sans, ink-dark and bold — for nonfiction, ideas, and design-led houses.",
+    build: press,
+  },
+];
+
+/** The blank starting point when no template is chosen. */
+export function blankPublisherDocument(): PageDocument {
+  return {
+    theme: {
+      fontHeading: "Cormorant Garamond",
+      fontBody: "Jost",
+      colors: { bg: "#f7f4ed", text: "#221f1a", primary: "#221f1a", accent: "#7c5a36", muted: "#6f6a62" },
+      radius: "sm",
+      spacing: "roomy",
+    },
+    sections: [
+      sec("publisherHero", {
+        eyebrow: "Independent Press · Est. 19XX",
+        name: "Your Press",
+        tagline: "A line that says what your house publishes, and who for.",
+        portrait: "https://images.unsplash.com/photo-1507842217343-583bb7270b66?w=1600&q=80",
+        align: "center",
+      }),
+      sec("catalogGrid", { eyebrow: "The list", heading: "Our Catalogue", columns: 3, limit: 12, source: "live" }),
+      sec("contact", {
+        eyebrow: "Rights & submissions",
+        heading: "Work with the press",
+        body: "Submissions, rights, press, and events — start here.",
+        email: "submissions@yourpress.com",
+        socials: "Instagram | https://instagram.com\nBluesky | https://bsky.app",
+      }),
+    ],
+  };
+}

package/src/editable.tsx

@@ -0,0 +1,76 @@
+/**
+ * Block ↔ editor bridge — the trick that lets ONE block component render in both
+ * production (pure RSC, no JS) and the editor canvas (inline editable), with no
+ * divergence.
+ *
+ * A block receives an optional `edit` prop. In production it is absent, so
+ * `renderText`/`renderImage` emit plain server elements. In the editor the
+ * canvas injects client primitives, so the same fields become inline-editable.
+ * Blocks opt in simply by using these helpers instead of raw `{value}`.
+ */
+import { createElement, type CSSProperties, type ElementType, type ReactNode } from "react";
+
+export interface TextEditProps {
+  field: string;
+  value: string;
+  as?: ElementType;
+  className?: string;
+  style?: CSSProperties;
+  placeholder?: string;
+  multiline?: boolean;
+}
+
+export interface ImageEditProps {
+  field: string;
+  src?: string;
+  alt?: string;
+  className?: string;
+  style?: CSSProperties;
+  /** Intrinsic pixel dimensions — emitted to avoid CLS. */
+  width?: number;
+  height?: number;
+  /** Mark the LCP/above-the-fold image so it loads eagerly + high-priority. */
+  priority?: boolean;
+}
+
+/** Injected by the editor canvas; absent in production. */
+export interface EditPrimitives {
+  Text: ElementType<TextEditProps>;
+  Image: ElementType<ImageEditProps>;
+}
+
+/** Prop convention every section Component spreads. */
+export interface WithEdit {
+  edit?: EditPrimitives;
+}
+
+/** Render an inline-editable (editor) or static (production) text field. */
+export function renderText(
+  edit: EditPrimitives | undefined,
+  props: TextEditProps,
+): ReactNode {
+  if (edit) return createElement(edit.Text, props);
+  const { as = "span", value, className, style, placeholder } = props;
+  return createElement(as, { className, style }, value || placeholder || "");
+}
+
+/** Render an inline-editable (editor) or static (production) image field. */
+export function renderImage(
+  edit: EditPrimitives | undefined,
+  props: ImageEditProps,
+): ReactNode {
+  if (edit) return createElement(edit.Image, props);
+  const { src, alt = "", className, style, width, height, priority } = props;
+  if (!src) return null;
+  return createElement("img", {
+    src,
+    alt,
+    className,
+    style,
+    ...(width ? { width } : {}),
+    ...(height ? { height } : {}),
+    loading: priority ? "eager" : "lazy",
+    // fetchPriority (React 19) — high for the LCP image, auto otherwise.
+    fetchPriority: priority ? "high" : "auto",
+  });
+}

package/src/editor/BlockLibrary.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+/**
+ * The "Add section" library (screenshot #3): categories on the left, live mini
+ * previews of each section + its layout variants on the right. Click inserts at
+ * the chosen index. Previews render the real catalog Component (scaled), so what
+ * you see is what you get.
+ */
+import { createElement, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+import {
+  type Catalog,
+  type SectionDefinition,
+  defaultPropsFor,
+} from "../registry";
+import { createSectionId } from "../model";
+import { themeVars } from "../theme";
+import { useBuilder } from "../store";
+import { useEditorUi } from "./ui-context";
+import { cn } from "../lib/cn";
+
+export function BlockLibrary({ catalog }: { catalog: Catalog }) {
+  const ui = useEditorUi();
+  const theme = useBuilder((s) => s.doc.theme);
+  const insertSection = useBuilder((s) => s.insertSection);
+  const [active, setActive] = useState(catalog.categories[0] ?? "");
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  if (ui.libraryIndex === null || !mounted) return null;
+  const items = Object.values(catalog.sections).filter((d) => d.category === active);
+
+  function add(def: SectionDefinition, variant?: string) {
+    insertSection(
+      {
+        id: createSectionId(),
+        type: def.type,
+        variant,
+        props: defaultPropsFor(def, variant),
+      },
+      ui.libraryIndex ?? undefined,
+    );
+    ui.closeLibrary();
+  }
+
+  return createPortal(
+    <div className="fixed inset-0 z-[100] flex">
+      <div className="flex-1 bg-black/50" onClick={() => ui.closeLibrary()} />
+      <div className="flex h-full w-full max-w-3xl flex-col bg-card text-foreground shadow-2xl">
+        <div className="flex items-center justify-between border-b border-border px-5 py-3">
+          <h2 className="text-sm font-semibold">Add section</h2>
+          <button
+            onClick={() => ui.closeLibrary()}
+            className="rounded p-1 hover:bg-accent"
+          >
+            <X className="size-5" />
+          </button>
+        </div>
+        <div className="flex min-h-0 flex-1">
+          <nav className="w-40 shrink-0 overflow-auto border-r p-2">
+            {catalog.categories.map((c) => (
+              <button
+                key={c}
+                onClick={() => setActive(c)}
+                className={cn(
+                  "block w-full rounded px-3 py-2 text-left text-sm",
+                  active === c
+                    ? "bg-secondary font-medium text-secondary-foreground"
+                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                )}
+              >
+                {c}
+              </button>
+            ))}
+          </nav>
+          <div className="grid flex-1 grid-cols-1 content-start gap-4 overflow-auto p-4 sm:grid-cols-2">
+            {items.flatMap((def) => {
+              const variants =
+                def.variants && def.variants.length
+                  ? def.variants
+                  : [{ id: undefined as string | undefined, label: def.label }];
+              return variants.map((v) => (
+                <button
+                  key={def.type + (v.id ?? "")}
+                  onClick={() => add(def, v.id)}
+                  className="group overflow-hidden rounded-lg border bg-muted text-left transition hover:border-sky-400 hover:shadow"
+                >
+                  <div className="relative h-32 overflow-hidden bg-background">
+                    <div
+                      className="pointer-events-none absolute left-0 top-0 origin-top-left"
+                      style={{ ...themeVars(theme), width: 1100, transform: "scale(0.318)" }}
+                    >
+                      {createElement(def.Component, defaultPropsFor(def, v.id))}
+                    </div>
+                  </div>
+                  <div className="border-t px-3 py-2 text-xs font-medium text-foreground">
+                    {def.label}
+                    {variants.length > 1 ? ` · ${v.label}` : ""}
+                  </div>
+                </button>
+              ));
+            })}
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}