From 7a5eb20924b8e631577df79209428e39306a3480 Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Mon, 3 Aug 2026 14:37:55 +0200
Subject: [PATCH 01/14] feat: add a ThemePanel bookmarklet for any shadcn site
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A javascript: loader injects dist/bookmarklet.global.js (self-contained
IIFE, React bundled, Tailwind CSS compiled and inlined at build time via
a tsup esbuild plugin) from jsDelivr. The panel mounts in a shadow root
bottom-right, seeds its source color from the host's --primary, and on
the first tweak forces the shadcn variables onto the page — unlayered
!important :root/.dark blocks, re-appended last in <head>, host document
and same-origin iframes alike (ui.shadcn.com/create previews in one).
Closing it (via its close button or clicking the bookmarklet again)
restores the site untouched.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G69EjEY89Q6nNGj1xvgeja
---
 .changeset/mtb-bookmarklet.md |   5 +
 README.md                     |  10 ++
 src/Bookmarklet.stories.tsx   |  53 +++++++++
 src/bookmarklet.css           |  58 ++++++++++
 src/bookmarklet.tsx           | 211 ++++++++++++++++++++++++++++++++++
 src/components/ui/tooltip.tsx |  21 +++-
 src/lib/shadcnStyle.test.ts   |  37 ++++++
 src/lib/shadcnStyle.ts        |  26 +++++
 tsup.config.ts                |  53 +++++++++
 9 files changed, 472 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/mtb-bookmarklet.md
 create mode 100644 src/Bookmarklet.stories.tsx
 create mode 100644 src/bookmarklet.css
 create mode 100644 src/bookmarklet.tsx
 create mode 100644 src/lib/shadcnStyle.test.ts
 create mode 100644 src/lib/shadcnStyle.ts

diff --git a/.changeset/mtb-bookmarklet.md b/.changeset/mtb-bookmarklet.md
new file mode 100644
index 00000000..041a4ca2
--- /dev/null
+++ b/.changeset/mtb-bookmarklet.md
@@ -0,0 +1,5 @@
+---
+"material-theme-builder": minor
+---
+
+Add a `ThemePanel` bookmarklet: a `javascript:` snippet (see README) that mounts the panel on any shadcn-based site and re-themes it live by forcing the shadcn variables — same mapping as `toShadcn()`, same-origin preview iframes included. Ships as a self-contained `dist/bookmarklet.global.js` IIFE served from jsDelivr; the panel renders in a shadow root, styled by the very variables it edits, and closing it restores the site untouched.
diff --git a/README.md b/README.md
index 6329eed3..469424d4 100644
--- a/README.md
+++ b/README.md
@@ -137,6 +137,16 @@ import { Mtb, ThemePanel } from "material-theme-builder/react";
 </Mtb>;
 ```
 
+### Bookmarklet
+
+Try the `ThemePanel` on **any shadcn-based site** — no install. Create a bookmark with this URL:
+
+```
+javascript:(()=>{var s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/material-theme-builder@3/dist/bookmarklet.global.js";document.body.append(s)})()
+```
+
+Click it on a shadcn site (try [ui.shadcn.com/create](https://ui.shadcn.com/create)): the panel mounts bottom-right and every tweak re-themes the page live, by forcing the [shadcn variables](https://ui.shadcn.com/docs/theming#list-of-variables) (same mapping as `toShadcn()`) on the page — same-origin preview iframes included. The panel itself lives in a shadow root and is styled by the very variables it edits. Click the bookmarklet again — or its ✕ button — to restore the site untouched.
+
 ## Tailwind
 
 Compatible through [theme variables](https://tailwindcss.com/docs/theme):
diff --git a/src/Bookmarklet.stories.tsx b/src/Bookmarklet.stories.tsx
new file mode 100644
index 00000000..f7a996c8
--- /dev/null
+++ b/src/Bookmarklet.stories.tsx
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+/**
+ * The `javascript:` snippet users paste (or drag) into their bookmarks bar.
+ *
+ * A bookmarklet URL can only hold a few KB, so it is a tiny loader: it
+ * injects a `<script>` pointing at the self-contained IIFE bundle
+ * (`dist/bookmarklet.global.js`, React included) served from jsDelivr.
+ * Floating on the major (`@3`) keeps existing bookmarks up to date with
+ * every release.
+ */
+export const BOOKMARKLET_HREF = `javascript:(()=>{var s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/material-theme-builder@3/dist/bookmarklet.global.js";document.body.append(s)})()`;
+
+function BookmarkletLink() {
+  return (
+    <div className="prose p-8">
+      <h1>ThemePanel bookmarklet</h1>
+      <p>
+        Drag the link below to your bookmarks bar, then click it on any
+        shadcn-based site (try{" "}
+        <a href="https://ui.shadcn.com/create" target="_blank" rel="noreferrer">
+          ui.shadcn.com/create
+        </a>
+        ): the <code>ThemePanel</code> appears bottom-right and re-themes the
+        page live. Click the bookmarklet again — or the ✕ button — to restore
+        the site untouched.
+      </p>
+      <p>
+        <a
+          href={BOOKMARKLET_HREF}
+          className="inline-block rounded-md border px-3 py-1.5 font-medium no-underline"
+          onClick={(e) => e.preventDefault()}
+        >
+          🎨 MTB ThemePanel
+        </a>
+      </p>
+      <p>
+        (Clicking it here is a no-op — Storybook runs in an iframe. Drag it to
+        the bookmarks bar instead, or copy the snippet from the README.)
+      </p>
+    </div>
+  );
+}
+
+const meta = {
+  title: "Bookmarklet",
+  component: BookmarkletLink,
+} satisfies Meta<typeof BookmarkletLink>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/bookmarklet.css b/src/bookmarklet.css
new file mode 100644
index 00000000..162fbc7b
--- /dev/null
+++ b/src/bookmarklet.css
@@ -0,0 +1,58 @@
+/*
+ * Stylesheet for the bookmarklet's shadow root — compiled by Tailwind at
+ * build time (see tsup.config.ts) and injected as a <style> inside the
+ * shadow DOM, never into the host page.
+ *
+ * Scans only the files the panel actually renders (source(none) + explicit
+ * @source), so the host page's own markup never inflates the bundle.
+ *
+ * The @theme inline block maps Tailwind color tokens straight onto the
+ * host page's shadcn variables: custom properties inherit through the
+ * shadow boundary, so the panel is styled by the very theme it is editing
+ * — including dark mode, whose values flow in through the same variables.
+ *
+ * Deliberately NO `:root { --background: … }` defaults here (unlike
+ * src/styles/shadcn.css): a `.dark { --background: … }` fallback block
+ * would match the mirrored `.dark` wrapper inside the shadow root and
+ * override the host's inherited values with stock zinc.
+ */
+
+@import "tailwindcss" source(none);
+@import "tw-animate-css";
+
+@source "./ThemePanel.tsx";
+@source "./bookmarklet.tsx";
+@source "./components/ui/button.tsx";
+@source "./components/ui/button-group.tsx";
+@source "./components/ui/separator.tsx";
+@source "./components/ui/tooltip.tsx";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  /* --radius falls back: unlike colors, a missing radius silently unsets
+     every rounded-* utility rather than looking obviously broken. */
+  --radius-sm: calc(var(--radius, 0.625rem) - 4px);
+  --radius-md: calc(var(--radius, 0.625rem) - 2px);
+  --radius-lg: var(--radius, 0.625rem);
+  --radius-xl: calc(var(--radius, 0.625rem) + 4px);
+}
diff --git a/src/bookmarklet.tsx b/src/bookmarklet.tsx
new file mode 100644
index 00000000..9d23e9d5
--- /dev/null
+++ b/src/bookmarklet.tsx
@@ -0,0 +1,211 @@
+/*
+ * Bookmarklet entry — a self-contained IIFE (React bundled, see
+ * tsup.config.ts) that mounts <ThemePanel> on any shadcn site and applies
+ * the tweaked theme to the page as forced shadcn variables.
+ *
+ * The panel lives in a shadow root: its Tailwind styles (preflight
+ * included) stay confined there, and the host page's styles can't reach
+ * it. Custom properties DO inherit through the shadow boundary, so the
+ * panel is styled by the very shadcn variables it edits.
+ */
+
+import { X } from "lucide-react";
+import { useEffect } from "react";
+import { createRoot, type Root } from "react-dom/client";
+
+// Compiled by Tailwind at build time and inlined as a string (tsup plugin).
+import cssText from "./bookmarklet.css?raw";
+
+import { Button } from "./components/ui/button";
+import {
+  TooltipPortalContainerContext,
+  TooltipProvider,
+} from "./components/ui/tooltip";
+import { builder } from "./lib/builder";
+import { shadcnStyleSheet } from "./lib/shadcnStyle";
+import { Mtb } from "./Mtb";
+import { useMtb } from "./Mtb.context";
+import { ThemePanel } from "./ThemePanel";
+
+const HOST_ID = "mtb-bookmarklet";
+const STYLE_ID = "mtb-shadcn";
+const FALLBACK_SOURCE = "#769CDF";
+
+type MtbHost = HTMLDivElement & { __mtbCleanup?: () => void };
+
+/**
+ * Resolve a CSS variable of the host page to a hex color.
+ *
+ * The computed value may serialize as `oklch(…)`; painting it on a 1×1
+ * canvas and reading the pixel back normalizes any color the browser can
+ * parse to sRGB bytes.
+ */
+function readHostColor(varName: string): string | null {
+  if (
+    !getComputedStyle(document.documentElement).getPropertyValue(varName).trim()
+  ) {
+    return null;
+  }
+
+  const probe = document.createElement("span");
+  probe.style.color = `var(${varName})`;
+  document.body.appendChild(probe);
+  const computed = getComputedStyle(probe).color;
+  probe.remove();
+
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = 1;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  ctx.fillStyle = computed;
+  ctx.fillRect(0, 0, 1, 1);
+  const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+  return `#${[r, g, b].map((c) => (c ?? 0).toString(16).padStart(2, "0")).join("")}`;
+}
+
+/**
+ * The host document plus every same-origin iframe document — sites like
+ * ui.shadcn.com/create render their preview in an iframe, which has its
+ * own <head> our variables would never reach. Cross-origin frames throw
+ * on access and are skipped.
+ */
+function themableDocuments(): Document[] {
+  const docs = [document];
+  for (const frame of Array.from(document.querySelectorAll("iframe"))) {
+    try {
+      if (frame.contentDocument?.head) docs.push(frame.contentDocument);
+    } catch {
+      // cross-origin
+    }
+  }
+  return docs;
+}
+
+function removeInjectedStyles() {
+  for (const doc of themableDocuments()) {
+    doc.getElementById(STYLE_ID)?.remove();
+  }
+}
+
+/**
+ * Applies the panel's config to the host page as forced shadcn variables
+ * (see {@link shadcnStyleSheet}) — but not before the first actual tweak:
+ * the regenerated theme differs from the site's own even when seeded from
+ * it, and opening the panel must not repaint the page.
+ */
+function ApplyToHost() {
+  const { initials, mcuConfig } = useMtb();
+
+  useEffect(() => {
+    if (JSON.stringify(mcuConfig) === JSON.stringify(initials)) return;
+
+    const { toShadcn } = builder(mcuConfig.source, mcuConfig);
+    const css = shadcnStyleSheet(toShadcn());
+
+    for (const doc of themableDocuments()) {
+      let style = doc.getElementById(STYLE_ID) as HTMLStyleElement | null;
+      if (!style) {
+        style = doc.createElement("style");
+        style.id = STYLE_ID;
+      }
+      style.textContent = css;
+      // (Re-)append: staying last in <head> wins the source-order fight
+      // against the site's own unlayered styles. Also re-themes an iframe
+      // that reloaded since the previous update.
+      doc.head.append(style);
+    }
+  }, [initials, mcuConfig]);
+
+  return null;
+}
+
+function App({
+  container,
+  source,
+  onClose,
+}: {
+  container: HTMLElement;
+  source: string;
+  onClose: () => void;
+}) {
+  return (
+    <TooltipPortalContainerContext.Provider value={container}>
+      <TooltipProvider>
+        <Mtb source={source}>
+          <ApplyToHost />
+          <div className="flex items-center gap-1">
+            <ThemePanel />
+            <Button
+              variant="outline"
+              size="icon"
+              aria-label="Close"
+              onClick={onClose}
+            >
+              <X />
+            </Button>
+          </div>
+        </Mtb>
+      </TooltipProvider>
+    </TooltipPortalContainerContext.Provider>
+  );
+}
+
+function open() {
+  const host = document.createElement("div") as MtbHost;
+  host.id = HOST_ID;
+  host.style.cssText =
+    "position:fixed;bottom:16px;right:16px;z-index:2147483647;";
+  const shadow = host.attachShadow({ mode: "open" });
+
+  const style = document.createElement("style");
+  style.textContent = cssText;
+  shadow.appendChild(style);
+
+  const wrapper = document.createElement("div");
+  shadow.appendChild(wrapper);
+
+  // Mirror the page's `.dark` class onto the in-shadow wrapper: compiled
+  // `dark:` variants match ancestors, and the page's <html> is outside the
+  // shadow boundary.
+  const syncDark = () =>
+    wrapper.classList.toggle(
+      "dark",
+      document.documentElement.classList.contains("dark"),
+    );
+  syncDark();
+  const observer = new MutationObserver(syncDark);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+
+  document.body.appendChild(host);
+
+  let root: Root | null = createRoot(wrapper);
+
+  const close = () => {
+    observer.disconnect();
+    root?.unmount();
+    root = null;
+    host.remove();
+    removeInjectedStyles();
+  };
+  // Stashed on the element so a later load of this script (fresh module
+  // scope) can tear this instance down — that's what makes it a toggle.
+  host.__mtbCleanup = close;
+
+  root.render(
+    <App
+      container={wrapper}
+      source={readHostColor("--primary") ?? FALLBACK_SOURCE}
+      onClose={close}
+    />,
+  );
+}
+
+const existing = document.getElementById(HOST_ID) as MtbHost | null;
+if (existing) {
+  existing.__mtbCleanup?.();
+} else {
+  open();
+}
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index 9dad1692..c55a29ea 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -3,6 +3,16 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
+/**
+ * Where tooltip portals land — `null` (the default) portals to
+ * `document.body`, Radix's own default. The bookmarklet provides a node
+ * inside its shadow root instead: content portalled to `document.body`
+ * would escape the shadow boundary and lose every style.
+ */
+const TooltipPortalContainerContext = React.createContext<HTMLElement | null>(
+  null,
+);
+
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -34,8 +44,9 @@ function TooltipContent({
   children,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  const container = React.useContext(TooltipPortalContainerContext);
   return (
-    <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Portal container={container ?? undefined}>
       <TooltipPrimitive.Content
         data-slot="tooltip-content"
         sideOffset={sideOffset}
@@ -52,4 +63,10 @@ function TooltipContent({
   );
 }
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipPortalContainerContext,
+  TooltipProvider,
+  TooltipTrigger,
+};
diff --git a/src/lib/shadcnStyle.test.ts b/src/lib/shadcnStyle.test.ts
new file mode 100644
index 00000000..ce6e8af1
--- /dev/null
+++ b/src/lib/shadcnStyle.test.ts
@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+
+import { builder } from "./builder";
+import { SHADCN_MAPPING } from "./builder.shadcn";
+import { shadcnStyleSheet } from "./shadcnStyle";
+
+const SOURCE = "#6750A4";
+
+describe("shadcnStyleSheet()", () => {
+  const css = shadcnStyleSheet(builder(SOURCE).toShadcn());
+
+  it("should emit a :root block and a .dark block, in that order", () => {
+    const rootIndex = css.indexOf(":root {");
+    const darkIndex = css.indexOf(".dark {");
+    expect(rootIndex).toBeGreaterThanOrEqual(0);
+    expect(darkIndex).toBeGreaterThan(rootIndex);
+  });
+
+  it("should declare every shadcn variable in both blocks", () => {
+    for (const [cssVar] of SHADCN_MAPPING) {
+      const occurrences = css.split(`${cssVar}: `).length - 1;
+      expect(occurrences, cssVar).toBe(2);
+    }
+  });
+
+  it("should mark every declaration !important", () => {
+    const declarations = css.match(/--[a-z1-5-]+: [^;]+;/g) ?? [];
+    expect(declarations.length).toBe(2 * SHADCN_MAPPING.length);
+    for (const declaration of declarations) {
+      expect(declaration).toMatch(/ !important;$/);
+    }
+  });
+
+  it("should not wrap anything in @layer (unlayered wins the cascade)", () => {
+    expect(css).not.toContain("@layer");
+  });
+});
diff --git a/src/lib/shadcnStyle.ts b/src/lib/shadcnStyle.ts
new file mode 100644
index 00000000..b69c392c
--- /dev/null
+++ b/src/lib/shadcnStyle.ts
@@ -0,0 +1,26 @@
+import type { ShadcnTheme } from "./builder.shadcn";
+
+/**
+ * Serialize a {@link ShadcnTheme} into a stylesheet that *forces* the theme
+ * onto a host page — `:root { … }` for light, `.dark { … }` for dark.
+ *
+ * Built to win the cascade on a page we don't control:
+ *
+ * - Declarations are `!important`: shadcn theme-switchers commonly set the
+ *   variables as inline `style` on `<html>`, which beats any normal
+ *   stylesheet declaration — but not an important one.
+ * - No `@layer`: unlayered normal declarations beat layered ones (where
+ *   Tailwind v4 sites put their theme), and for important declarations the
+ *   order inverts — a layered sheet would *lose* to the site's.
+ *
+ * The remaining fight — unlayered site styles injected after ours — is won
+ * by re-appending the `<style>` element on every update (the caller's job).
+ */
+export function shadcnStyleSheet(theme: ShadcnTheme): string {
+  const block = (vars: Record<string, string>) =>
+    Object.entries(vars)
+      .map(([name, value]) => `  --${name}: ${value} !important;`)
+      .join("\n");
+
+  return `:root {\n${block(theme.light)}\n}\n.dark {\n${block(theme.dark)}\n}\n`;
+}
diff --git a/tsup.config.ts b/tsup.config.ts
index f37098d9..b1b3d97d 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -1,4 +1,9 @@
+import tailwindPostcss from "@tailwindcss/postcss";
+import type { Plugin } from "esbuild";
 import { copyFileSync } from "fs";
+import { readFile } from "fs/promises";
+import path from "path";
+import postcss from "postcss";
 import { defineConfig } from "tsup";
 
 // Three bundles rather than one, so that `"use client"` lands only on the
@@ -14,6 +19,33 @@ import { defineConfig } from "tsup";
 // registers every export of a client module it reaches, re-export included,
 // so a barrel spanning both surfaces cannot be tree-shaken back apart.
 
+// Resolves `import css from "./x.css?raw"` by running the file through
+// Tailwind (postcss) and inlining the compiled CSS as a string — the
+// bookmarklet injects it into its shadow root at runtime.
+const tailwindAsText: Plugin = {
+  name: "tailwind-as-text",
+  setup(build) {
+    // The resolved path keeps its `?raw` suffix on purpose: tsup registers
+    // its own onLoad for /\.css$/ with no namespace restriction, which
+    // would otherwise claim the file before ours runs.
+    build.onResolve({ filter: /\.css\?raw$/ }, (args) => ({
+      path: path.resolve(args.resolveDir, args.path),
+      namespace: "tailwind-as-text",
+    }));
+    build.onLoad(
+      { filter: /.*/, namespace: "tailwind-as-text" },
+      async (args) => {
+        const file = args.path.replace(/\?raw$/, "");
+        const source = await readFile(file, "utf8");
+        const result = await postcss([
+          tailwindPostcss({ optimize: true }),
+        ]).process(source, { from: file });
+        return { contents: result.css, loader: "text" };
+      },
+    );
+  },
+};
+
 const shared = {
   format: ["esm"] as const,
   outDir: "dist",
@@ -50,4 +82,25 @@ export default defineConfig([
     outDir: "dist",
     clean: false,
   },
+  // The bookmarklet: a self-contained IIFE — React and every dependency
+  // bundled, no externals — fetched at runtime from a CDN by the tiny
+  // `javascript:` loader (see README). Ships as dist/bookmarklet.global.js.
+  {
+    entryPoints: ["src/bookmarklet.tsx"],
+    format: ["iife"],
+    outDir: "dist",
+    dts: false,
+    clean: false,
+    minify: true,
+    esbuildPlugins: [tailwindAsText],
+    esbuildOptions(options) {
+      options.jsx = "automatic";
+      // react-dom reads process.env.NODE_ENV, which doesn't exist in a
+      // browser IIFE — pin it to the production build.
+      options.define = {
+        ...options.define,
+        "process.env.NODE_ENV": '"production"',
+      };
+    },
+  },
 ]);

From ebc65749de453d9d600eaa212f5aa74deedcefbd Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Mon, 3 Aug 2026 15:02:49 +0200
Subject: [PATCH 02/14] feat: add download-theme and copy-CLI-command buttons
 to the bookmarklet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The action cluster next to the panel gains two buttons: ArrowDownToLine
downloads the current theme as a shadcn registry item (mtb-theme.json,
installable as-is with the shadcn CLI — toShadcn() already matches the
cssVars field), and Terminal copies the matching 'npx shadcn@latest add
./mtb-theme.json' command to the clipboard.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G69EjEY89Q6nNGj1xvgeja
---
 .changeset/mtb-bookmarklet.md |   2 +-
 src/bookmarklet.tsx           | 117 ++++++++++++++++++++++++++++++----
 2 files changed, 107 insertions(+), 12 deletions(-)

diff --git a/.changeset/mtb-bookmarklet.md b/.changeset/mtb-bookmarklet.md
index 041a4ca2..142e8fcb 100644
--- a/.changeset/mtb-bookmarklet.md
+++ b/.changeset/mtb-bookmarklet.md
@@ -2,4 +2,4 @@
 "material-theme-builder": minor
 ---
 
-Add a `ThemePanel` bookmarklet: a `javascript:` snippet (see README) that mounts the panel on any shadcn-based site and re-themes it live by forcing the shadcn variables — same mapping as `toShadcn()`, same-origin preview iframes included. Ships as a self-contained `dist/bookmarklet.global.js` IIFE served from jsDelivr; the panel renders in a shadow root, styled by the very variables it edits, and closing it restores the site untouched.
+Add a `ThemePanel` bookmarklet: a `javascript:` snippet (see README) that mounts the panel on any shadcn-based site and re-themes it live by forcing the shadcn variables — same mapping as `toShadcn()`, same-origin preview iframes included. Ships as a self-contained `dist/bookmarklet.global.js` IIFE served from jsDelivr; the panel renders in a shadow root, styled by the very variables it edits, and closing it restores the site untouched. Next to the panel: a button downloading the current theme as a shadcn registry item (`mtb-theme.json`, installable with the shadcn CLI) and one copying the matching `npx shadcn@latest add` command.
diff --git a/src/bookmarklet.tsx b/src/bookmarklet.tsx
index 9d23e9d5..23e0c6ff 100644
--- a/src/bookmarklet.tsx
+++ b/src/bookmarklet.tsx
@@ -9,19 +9,23 @@
  * panel is styled by the very shadcn variables it edits.
  */
 
-import { X } from "lucide-react";
-import { useEffect } from "react";
+import { ArrowDownToLine, Check, Terminal, X } from "lucide-react";
+import { useEffect, useState } from "react";
 import { createRoot, type Root } from "react-dom/client";
 
 // Compiled by Tailwind at build time and inlined as a string (tsup plugin).
 import cssText from "./bookmarklet.css?raw";
 
 import { Button } from "./components/ui/button";
+import { ButtonGroup } from "./components/ui/button-group";
 import {
+  Tooltip,
+  TooltipContent,
   TooltipPortalContainerContext,
   TooltipProvider,
+  TooltipTrigger,
 } from "./components/ui/tooltip";
-import { builder } from "./lib/builder";
+import { builder, type MtbConfig } from "./lib/builder";
 import { shadcnStyleSheet } from "./lib/shadcnStyle";
 import { Mtb } from "./Mtb";
 import { useMtb } from "./Mtb.context";
@@ -119,6 +123,104 @@ function ApplyToHost() {
   return null;
 }
 
+const THEME_FILENAME = "mtb-theme.json";
+const INSTALL_COMMAND = `npx shadcn@latest add ./${THEME_FILENAME}`;
+
+// The current theme as a shadcn registry item — installable as-is with the
+// standard shadcn CLI (toShadcn() already matches the cssVars field).
+function registryItem(config: MtbConfig) {
+  return {
+    $schema: "https://ui.shadcn.com/schema/registry-item.json",
+    name: "mtb-theme",
+    type: "registry:theme",
+    cssVars: builder(config.source, config).toShadcn(),
+  };
+}
+
+/**
+ * The action cluster next to the panel: copy the shadcn CLI install
+ * command, download the theme as a registry item, close.
+ */
+function Actions({ onClose }: { onClose: () => void }) {
+  const { mcuConfig } = useMtb();
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!copied) return;
+    const timer = setTimeout(() => setCopied(false), 1500);
+    return () => clearTimeout(timer);
+  }, [copied]);
+
+  const copyCommand = async () => {
+    await navigator.clipboard.writeText(INSTALL_COMMAND);
+    setCopied(true);
+  };
+
+  const downloadTheme = () => {
+    const blob = new Blob([JSON.stringify(registryItem(mcuConfig), null, 2)], {
+      type: "application/json",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = THEME_FILENAME;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <ButtonGroup>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="outline"
+            size="icon"
+            aria-label="Copy install command"
+            onClick={copyCommand}
+          >
+            {copied ? <Check /> : <Terminal />}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          {copied ? "Copied!" : INSTALL_COMMAND}
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="outline"
+            size="icon"
+            aria-label="Download theme"
+            onClick={downloadTheme}
+          >
+            <ArrowDownToLine />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          Download theme ({THEME_FILENAME})
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="outline"
+            size="icon"
+            aria-label="Close"
+            onClick={onClose}
+          >
+            <X />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">Close</TooltipContent>
+      </Tooltip>
+    </ButtonGroup>
+  );
+}
+
 function App({
   container,
   source,
@@ -135,14 +237,7 @@ function App({
           <ApplyToHost />
           <div className="flex items-center gap-1">
             <ThemePanel />
-            <Button
-              variant="outline"
-              size="icon"
-              aria-label="Close"
-              onClick={onClose}
-            >
-              <X />
-            </Button>
+            <Actions onClose={onClose} />
           </div>
         </Mtb>
       </TooltipProvider>

From 78e35b76fa4a3bdb575489d33ee23c602af6ebd5 Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Mon, 3 Aug 2026 15:14:34 +0200
Subject: [PATCH 03/14] fix: unexport the bookmarklet href from the story;
 reorder action buttons

- BOOKMARKLET_HREF was a named export in a CSF file: Storybook registers
  every named export as a story, and Chromatic failed hanging parameters
  off the string. Module-level const now.
- Download now sits before the copy-command button, and the close button
  moves to its own ButtonGroup.
- Keeps 'npx shadcn add ./mtb-theme.json' as the copied command: 'apply'
  only takes named presets or ui.shadcn.com/create codes, not local
  registry item files (verified against shadcn@latest).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G69EjEY89Q6nNGj1xvgeja
---
 src/Bookmarklet.stories.tsx |  5 +-
 src/bookmarklet.tsx         | 98 +++++++++++++++++++------------------
 2 files changed, 55 insertions(+), 48 deletions(-)

diff --git a/src/Bookmarklet.stories.tsx b/src/Bookmarklet.stories.tsx
index f7a996c8..5ac61f87 100644
--- a/src/Bookmarklet.stories.tsx
+++ b/src/Bookmarklet.stories.tsx
@@ -8,8 +8,11 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
  * (`dist/bookmarklet.global.js`, React included) served from jsDelivr.
  * Floating on the major (`@3`) keeps existing bookmarks up to date with
  * every release.
+ *
+ * NOT exported: Storybook treats every named export of a story file as a
+ * story, and Chromatic chokes trying to hang `parameters` off a string.
  */
-export const BOOKMARKLET_HREF = `javascript:(()=>{var s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/material-theme-builder@3/dist/bookmarklet.global.js";document.body.append(s)})()`;
+const BOOKMARKLET_HREF = `javascript:(()=>{var s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/material-theme-builder@3/dist/bookmarklet.global.js";document.body.append(s)})()`;
 
 function BookmarkletLink() {
   return (
diff --git a/src/bookmarklet.tsx b/src/bookmarklet.tsx
index 23e0c6ff..8a2f94f9 100644
--- a/src/bookmarklet.tsx
+++ b/src/bookmarklet.tsx
@@ -171,53 +171,57 @@ function Actions({ onClose }: { onClose: () => void }) {
   };
 
   return (
-    <ButtonGroup>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="outline"
-            size="icon"
-            aria-label="Copy install command"
-            onClick={copyCommand}
-          >
-            {copied ? <Check /> : <Terminal />}
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent side="bottom">
-          {copied ? "Copied!" : INSTALL_COMMAND}
-        </TooltipContent>
-      </Tooltip>
-
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="outline"
-            size="icon"
-            aria-label="Download theme"
-            onClick={downloadTheme}
-          >
-            <ArrowDownToLine />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent side="bottom">
-          Download theme ({THEME_FILENAME})
-        </TooltipContent>
-      </Tooltip>
-
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="outline"
-            size="icon"
-            aria-label="Close"
-            onClick={onClose}
-          >
-            <X />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent side="bottom">Close</TooltipContent>
-      </Tooltip>
-    </ButtonGroup>
+    <>
+      <ButtonGroup>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              aria-label="Download theme"
+              onClick={downloadTheme}
+            >
+              <ArrowDownToLine />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            Download theme ({THEME_FILENAME})
+          </TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              aria-label="Copy install command"
+              onClick={copyCommand}
+            >
+              {copied ? <Check /> : <Terminal />}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            {copied ? "Copied!" : INSTALL_COMMAND}
+          </TooltipContent>
+        </Tooltip>
+      </ButtonGroup>
+
+      <ButtonGroup>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              aria-label="Close"
+              onClick={onClose}
+            >
+              <X />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">Close</TooltipContent>
+        </Tooltip>
+      </ButtonGroup>
+    </>
   );
 }
 

From d64175adf6b699f834416ab95801041cc79dd365 Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Mon, 3 Aug 2026 15:17:01 +0200
Subject: [PATCH 04/14] =?UTF-8?q?fix:=20set=20the=20bookmarklet=20href=20i?=
 =?UTF-8?q?mperatively=20=E2=80=94=20React=20blocks=20javascript:=20URLs?=
 =?UTF-8?q?=20in=20JSX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

React swaps javascript: hrefs for a thrower string as a security
precaution, which is precisely what a bookmarklet link is. Setting the
attribute in a ref callback sidesteps the sanitizer; the drag-to-
bookmarks-bar flow now carries the real snippet.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G69EjEY89Q6nNGj1xvgeja
---
 src/Bookmarklet.stories.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Bookmarklet.stories.tsx b/src/Bookmarklet.stories.tsx
index 5ac61f87..39d201d2 100644
--- a/src/Bookmarklet.stories.tsx
+++ b/src/Bookmarklet.stories.tsx
@@ -29,8 +29,11 @@ function BookmarkletLink() {
         the site untouched.
       </p>
       <p>
+        {/* React refuses javascript: URLs in a JSX href (it swaps in a
+            thrower string), which is exactly what a bookmarklet is — so the
+            attribute is set imperatively, outside React's sanitizer. */}
         <a
-          href={BOOKMARKLET_HREF}
+          ref={(el) => el?.setAttribute("href", BOOKMARKLET_HREF)}
           className="inline-block rounded-md border px-3 py-1.5 font-medium no-underline"
           onClick={(e) => e.preventDefault()}
         >

From 0184e64b8c5a2e8ad34f845c6ebaa917c0487067 Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Mon, 3 Aug 2026 15:20:45 +0200
Subject: [PATCH 05/14] feat: point the Storybook dev bookmarklet at the
 locally-built bundle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In dev the story link targets /dist/bookmarklet.global.js served by
Storybook itself (staticDirs) — run pnpm build to refresh — while the
built Storybook keeps the jsDelivr URL. The story now prints which
bundle the link carries.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G69EjEY89Q6nNGj1xvgeja
---
 .storybook/main.ts          |  3 +++
 src/Bookmarklet.stories.tsx | 14 +++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 37105760..9ccb95dc 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -4,6 +4,9 @@ import tsconfigPaths from "vite-tsconfig-paths";
 const config: StorybookConfig = {
   framework: "@storybook/react-vite",
   stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  // Serves dist/ so the Bookmarklet story's dev link can point at the
+  // locally-built bundle (run `pnpm build` to refresh it).
+  staticDirs: [{ from: "../dist", to: "/dist" }],
   addons: [
     "@storybook/addon-docs",
     "@storybook/addon-themes",
diff --git a/src/Bookmarklet.stories.tsx b/src/Bookmarklet.stories.tsx
index 39d201d2..db13ba8e 100644
--- a/src/Bookmarklet.stories.tsx
+++ b/src/Bookmarklet.stories.tsx
@@ -11,8 +11,16 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
  *
  * NOT exported: Storybook treats every named export of a story file as a
  * story, and Chromatic chokes trying to hang `parameters` off a string.
+ *
+ * In dev the link targets the locally-built bundle, served by this very
+ * Storybook (staticDirs) — run `pnpm build` to refresh it. The built
+ * Storybook keeps the jsDelivr URL.
  */
-const BOOKMARKLET_HREF = `javascript:(()=>{var s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/material-theme-builder@3/dist/bookmarklet.global.js";document.body.append(s)})()`;
+const BUNDLE_URL = import.meta.env.DEV
+  ? `${window.location.origin}/dist/bookmarklet.global.js`
+  : "https://cdn.jsdelivr.net/npm/material-theme-builder@3/dist/bookmarklet.global.js";
+
+const BOOKMARKLET_HREF = `javascript:(()=>{var s=document.createElement("script");s.src="${BUNDLE_URL}";document.body.append(s)})()`;
 
 function BookmarkletLink() {
   return (
@@ -40,6 +48,10 @@ function BookmarkletLink() {
           🎨 MTB ThemePanel
         </a>
       </p>
+      <p>
+        Bundle: <code>{BUNDLE_URL}</code>
+        {import.meta.env.DEV && " (local build — run pnpm build to refresh)"}
+      </p>
       <p>
         (Clicking it here is a no-op — Storybook runs in an iframe. Drag it to
         the bookmarks bar instead, or copy the snippet from the README.)

From 75de3c59e4131b64cb4950db60cbc7a7afc0a955 Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Mon, 3 Aug 2026 15:35:05 +0200
Subject: [PATCH 06/14] =?UTF-8?q?fix:=20make=20the=20Storybook=20dist=20st?=
 =?UTF-8?q?aticDir=20conditional=20=E2=80=94=20CI=20has=20no=20dist/?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Chromatic builds Storybook without building the package, so the
unconditional staticDirs entry crashed the build. Declared only when
dist/ exists; the built Storybook's bookmarklet targets jsDelivr anyway.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G69EjEY89Q6nNGj1xvgeja
---
 .storybook/main.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 9ccb95dc..cfd51cf3 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,12 +1,19 @@
+import { existsSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+
 import type { StorybookConfig } from "@storybook/react-vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
+const dist = fileURLToPath(new URL("../dist", import.meta.url));
+
 const config: StorybookConfig = {
   framework: "@storybook/react-vite",
   stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   // Serves dist/ so the Bookmarklet story's dev link can point at the
-  // locally-built bundle (run `pnpm build` to refresh it).
-  staticDirs: [{ from: "../dist", to: "/dist" }],
+  // locally-built bundle (run `pnpm build` to refresh it). Conditional:
+  // dist/ doesn't exist on CI (Chromatic builds Storybook only), and the
+  // built Storybook's link targets jsDelivr anyway.
+  staticDirs: existsSync(dist) ? [{ from: "../dist", to: "/dist" }] : [],
   addons: [
     "@storybook/addon-docs",
     "@storybook/addon-themes",

From 862d79640bc360b2ce0f77114ec03b23c3ca7d25 Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Mon, 3 Aug 2026 16:07:27 +0200
Subject: [PATCH 07/14] =?UTF-8?q?feat:=20copy=20a=20self-contained=20insta?=
 =?UTF-8?q?ll=20command=20=E2=80=94=20theme=20embedded=20as=20a=20base64?=
 =?UTF-8?q?=20data:=20URL?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Terminal button now copies
'npx shadcn@latest add "data:application/json;base64,<theme>"' built
from the current config at click time — nothing to download or host
first. add fetches data: URLs fine (verified end-to-end in a real Vite
project); apply would corrupt them by appending its ?base=&rtl= params
into the payload, and only accepts named presets, create codes, or
http(s) URLs anyway.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G69EjEY89Q6nNGj1xvgeja
---
 .changeset/mtb-bookmarklet.md |  2 +-
 src/bookmarklet.tsx           | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/.changeset/mtb-bookmarklet.md b/.changeset/mtb-bookmarklet.md
index 142e8fcb..205932e0 100644
--- a/.changeset/mtb-bookmarklet.md
+++ b/.changeset/mtb-bookmarklet.md
@@ -2,4 +2,4 @@
 "material-theme-builder": minor
 ---
 
-Add a `ThemePanel` bookmarklet: a `javascript:` snippet (see README) that mounts the panel on any shadcn-based site and re-themes it live by forcing the shadcn variables — same mapping as `toShadcn()`, same-origin preview iframes included. Ships as a self-contained `dist/bookmarklet.global.js` IIFE served from jsDelivr; the panel renders in a shadow root, styled by the very variables it edits, and closing it restores the site untouched. Next to the panel: a button downloading the current theme as a shadcn registry item (`mtb-theme.json`, installable with the shadcn CLI) and one copying the matching `npx shadcn@latest add` command.
+Add a `ThemePanel` bookmarklet: a `javascript:` snippet (see README) that mounts the panel on any shadcn-based site and re-themes it live by forcing the shadcn variables — same mapping as `toShadcn()`, same-origin preview iframes included. Ships as a self-contained `dist/bookmarklet.global.js` IIFE served from jsDelivr; the panel renders in a shadow root, styled by the very variables it edits, and closing it restores the site untouched. Next to the panel: a button downloading the current theme as a shadcn registry item (`mtb-theme.json`, installable with the shadcn CLI) and one copying a self-contained install command — the theme rides along as a base64 `data:` URL (`npx shadcn@latest add "data:application/json;base64,…"`), nothing to host or download first.
diff --git a/src/bookmarklet.tsx b/src/bookmarklet.tsx
index 8a2f94f9..b30d16d0 100644
--- a/src/bookmarklet.tsx
+++ b/src/bookmarklet.tsx
@@ -124,7 +124,6 @@ function ApplyToHost() {
 }
 
 const THEME_FILENAME = "mtb-theme.json";
-const INSTALL_COMMAND = `npx shadcn@latest add ./${THEME_FILENAME}`;
 
 // The current theme as a shadcn registry item — installable as-is with the
 // standard shadcn CLI (toShadcn() already matches the cssVars field).
@@ -137,6 +136,15 @@ function registryItem(config: MtbConfig) {
   };
 }
 
+// Self-contained install command: the registry item rides along as a
+// base64 data: URL, so there is nothing to download or host first. `add`
+// fetches data: URLs fine; `apply` would corrupt them by appending its
+// ?base=…&rtl=… params into the payload.
+function installCommand(config: MtbConfig) {
+  const b64 = btoa(JSON.stringify(registryItem(config)));
+  return `npx shadcn@latest add "data:application/json;base64,${b64}"`;
+}
+
 /**
  * The action cluster next to the panel: copy the shadcn CLI install
  * command, download the theme as a registry item, close.
@@ -152,7 +160,7 @@ function Actions({ onClose }: { onClose: () => void }) {
   }, [copied]);
 
   const copyCommand = async () => {
-    await navigator.clipboard.writeText(INSTALL_COMMAND);
+    await navigator.clipboard.writeText(installCommand(mcuConfig));
     setCopied(true);
   };
 
@@ -201,7 +209,9 @@ function Actions({ onClose }: { onClose: () => void }) {
             </Button>
           </TooltipTrigger>
           <TooltipContent side="bottom">
-            {copied ? "Copied!" : INSTALL_COMMAND}
+            {copied
+              ? "Copied!"
+              : 'Copy install command — npx shadcn add "data:…" (theme embedded)'}
           </TooltipContent>
         </Tooltip>
       </ButtonGroup>

From be0f7fa344f25c56bd724da995960d0c20d0465d Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Mon, 3 Aug 2026 16:18:09 +0200
Subject: [PATCH 08/14] fix: cache-bust the dev bookmarklet bundle at click
 time

The dev server sends no Cache-Control, so Chrome's heuristic caching
serves a stale bundle; the dev loader now appends ?t=Date.now() when it
runs. The built Storybook's jsDelivr URL stays clean.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G69EjEY89Q6nNGj1xvgeja
---
 src/Bookmarklet.stories.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/Bookmarklet.stories.tsx b/src/Bookmarklet.stories.tsx
index db13ba8e..075ba302 100644
--- a/src/Bookmarklet.stories.tsx
+++ b/src/Bookmarklet.stories.tsx
@@ -20,7 +20,12 @@ const BUNDLE_URL = import.meta.env.DEV
   ? `${window.location.origin}/dist/bookmarklet.global.js`
   : "https://cdn.jsdelivr.net/npm/material-theme-builder@3/dist/bookmarklet.global.js";
 
-const BOOKMARKLET_HREF = `javascript:(()=>{var s=document.createElement("script");s.src="${BUNDLE_URL}";document.body.append(s)})()`;
+// Dev only: cache-bust at CLICK time (Date.now() runs inside the
+// bookmarklet) — the ad-hoc dev server sends no Cache-Control, and
+// Chrome's heuristic caching would happily serve a stale bundle.
+const BOOKMARKLET_HREF = import.meta.env.DEV
+  ? `javascript:(()=>{var s=document.createElement("script");s.src="${BUNDLE_URL}?t="+Date.now();document.body.append(s)})()`
+  : `javascript:(()=>{var s=document.createElement("script");s.src="${BUNDLE_URL}";document.body.append(s)})()`;
 
 function BookmarkletLink() {
   return (

From 287eba8635908a5f62e2765b2b59e8b9dd7144bf Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Mon, 3 Aug 2026 16:39:35 +0200
Subject: [PATCH 09/14] feat: download globals.css instead of a registry item;
 pnpm dev watch loop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- The download button now saves the theme's CSS variables as a
  globals.css snippet (à la /create's Copy Theme) — plain declarations,
  no !important; shadcnStyleSheet() gains an { important } option and
  the forcing path passes it explicitly. The CLI-install path is already
  covered by the copied data: URL command.
- pnpm dev runs tsup --watch and Storybook together (concurrently):
  paired with the click-time cache-buster, every source change is live
  on the next bookmarklet click. The tailwind-as-text plugin declares
  watchFiles (the css + its @source scans) so the inlined CSS can't go
  stale in watch mode.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G69EjEY89Q6nNGj1xvgeja
---
 .changeset/mtb-bookmarklet.md |  2 +-
 package.json                  |  4 ++-
 pnpm-lock.yaml                | 65 +++++++++++++++++++++++++++++++++++
 src/Bookmarklet.stories.tsx   |  3 +-
 src/bookmarklet.tsx           | 16 +++++----
 src/lib/shadcnStyle.test.ts   | 18 +++++++---
 src/lib/shadcnStyle.ts        | 32 +++++++++--------
 tsup.config.ts                | 12 ++++++-
 8 files changed, 123 insertions(+), 29 deletions(-)

diff --git a/.changeset/mtb-bookmarklet.md b/.changeset/mtb-bookmarklet.md
index 205932e0..a1269c1c 100644
--- a/.changeset/mtb-bookmarklet.md
+++ b/.changeset/mtb-bookmarklet.md
@@ -2,4 +2,4 @@
 "material-theme-builder": minor
 ---
 
-Add a `ThemePanel` bookmarklet: a `javascript:` snippet (see README) that mounts the panel on any shadcn-based site and re-themes it live by forcing the shadcn variables — same mapping as `toShadcn()`, same-origin preview iframes included. Ships as a self-contained `dist/bookmarklet.global.js` IIFE served from jsDelivr; the panel renders in a shadow root, styled by the very variables it edits, and closing it restores the site untouched. Next to the panel: a button downloading the current theme as a shadcn registry item (`mtb-theme.json`, installable with the shadcn CLI) and one copying a self-contained install command — the theme rides along as a base64 `data:` URL (`npx shadcn@latest add "data:application/json;base64,…"`), nothing to host or download first.
+Add a `ThemePanel` bookmarklet: a `javascript:` snippet (see README) that mounts the panel on any shadcn-based site and re-themes it live by forcing the shadcn variables — same mapping as `toShadcn()`, same-origin preview iframes included. Ships as a self-contained `dist/bookmarklet.global.js` IIFE served from jsDelivr; the panel renders in a shadow root, styled by the very variables it edits, and closing it restores the site untouched. Next to the panel: a button downloading the theme's CSS variables as a `globals.css` snippet (à la ui.shadcn.com/create's "Copy Theme") and one copying a self-contained install command — the theme rides along as a base64 `data:` URL (`npx shadcn@latest add "data:application/json;base64,…"`), nothing to host or download first.
diff --git a/package.json b/package.json
index 1288a8b3..c5270415 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "chromatic": "^15.1.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "concurrently": "^10.0.4",
     "culori": "^4.0.2",
     "d3": "^7.9.0",
     "eslint": "^10.0.0",
@@ -112,7 +113,8 @@
     "build-figma": "vite build --config figma-plugin/vite.config.ts && tsup --config figma-plugin/tsup.config.ts",
     "chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN",
     "prepare": "pnpm run pretest && husky",
-    "changeset": "pnpm exec changeset"
+    "changeset": "pnpm exec changeset",
+    "dev": "concurrently -k -n tsup,storybook \"tsup --watch\" \"pnpm storybook\""
   },
   "peerDependencies": {
     "react": "^19.2.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f0617b45..3b96f8e0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,6 +93,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      concurrently:
+        specifier: ^10.0.4
+        version: 10.0.4
       culori:
         specifier: ^4.0.2
         version: 4.0.2
@@ -2820,6 +2823,10 @@ packages:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
 
+  cliui@9.0.1:
+    resolution: {integrity: sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==}
+    engines: {node: '>=20'}
+
   clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
@@ -2861,6 +2868,11 @@ packages:
     resolution: {integrity: sha512-aRDkn3uyIlCFfk5NUA+VdwMmMsh8JGhc4hapfV4yxymHGQ3BVskMQfoXGpCo5IoBuQ9tS5iiVKhCpTcB4pW4qw==}
     engines: {node: '>= 12.0.0'}
 
+  concurrently@10.0.4:
+    resolution: {integrity: sha512-trZql+7l/0+WRAsAnEdctr4+iiOS6ZrViI6H8QWcCF9MFS/LT0dKpe8vluB1to6it+OxSI4VospFTIFMW8DJRw==}
+    engines: {node: '>=22'}
+    hasBin: true
+
   confbox@0.1.8:
     resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
 
@@ -4565,6 +4577,9 @@ packages:
   rw@1.3.3:
     resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
 
+  rxjs@7.8.2:
+    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
+
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
@@ -4619,6 +4634,10 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  shell-quote@1.9.0:
+    resolution: {integrity: sha512-Iov+JwFv/2HcTpcwNMKd8+IWNb8tboQJNQTkAY/LLVK7gGH9jy+LGkVqPxfekHl+yMmiqXszdGWXgkfml7hjqA==}
+    engines: {node: '>= 0.4'}
+
   side-channel-list@1.0.0:
     resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
     engines: {node: '>= 0.4'}
@@ -4769,6 +4788,10 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
+  supports-color@10.2.2:
+    resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==}
+    engines: {node: '>=18'}
+
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -5240,6 +5263,10 @@ packages:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
 
+  yargs-parser@22.0.0:
+    resolution: {integrity: sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=23}
+
   yargs@16.2.0:
     resolution: {integrity: sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==}
     engines: {node: '>=10'}
@@ -5248,6 +5275,10 @@ packages:
     resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
     engines: {node: '>=12'}
 
+  yargs@18.0.0:
+    resolution: {integrity: sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=23}
+
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
@@ -7954,6 +7985,12 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
+  cliui@9.0.1:
+    dependencies:
+      string-width: 7.2.0
+      strip-ansi: 7.1.2
+      wrap-ansi: 9.0.2
+
   clsx@2.1.1: {}
 
   code-block-writer@13.0.3: {}
@@ -7978,6 +8015,15 @@ snapshots:
 
   comment-parser@1.4.5: {}
 
+  concurrently@10.0.4:
+    dependencies:
+      chalk: 5.6.2
+      rxjs: 7.8.2
+      shell-quote: 1.9.0
+      supports-color: 10.2.2
+      tree-kill: 1.2.2
+      yargs: 18.0.0
+
   confbox@0.1.8: {}
 
   consola@3.4.2: {}
@@ -9761,6 +9807,10 @@ snapshots:
 
   rw@1.3.3: {}
 
+  rxjs@7.8.2:
+    dependencies:
+      tslib: 2.8.1
+
   safer-buffer@2.1.2: {}
 
   saxes@6.0.0:
@@ -9860,6 +9910,8 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  shell-quote@1.9.0: {}
+
   side-channel-list@1.0.0:
     dependencies:
       es-errors: 1.3.0
@@ -10019,6 +10071,8 @@ snapshots:
       tinyglobby: 0.2.15
       ts-interface-checker: 0.1.13
 
+  supports-color@10.2.2: {}
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -10406,6 +10460,8 @@ snapshots:
 
   yargs-parser@21.1.1: {}
 
+  yargs-parser@22.0.0: {}
+
   yargs@16.2.0:
     dependencies:
       cliui: 7.0.4
@@ -10426,6 +10482,15 @@ snapshots:
       y18n: 5.0.8
       yargs-parser: 21.1.1
 
+  yargs@18.0.0:
+    dependencies:
+      cliui: 9.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      string-width: 7.2.0
+      y18n: 5.0.8
+      yargs-parser: 22.0.0
+
   yocto-queue@0.1.0: {}
 
   yoctocolors-cjs@2.1.3: {}
diff --git a/src/Bookmarklet.stories.tsx b/src/Bookmarklet.stories.tsx
index 075ba302..cc0630b4 100644
--- a/src/Bookmarklet.stories.tsx
+++ b/src/Bookmarklet.stories.tsx
@@ -55,7 +55,8 @@ function BookmarkletLink() {
       </p>
       <p>
         Bundle: <code>{BUNDLE_URL}</code>
-        {import.meta.env.DEV && " (local build — run pnpm build to refresh)"}
+        {import.meta.env.DEV &&
+          " (local build — keep pnpm dev running and it recompiles on change)"}
       </p>
       <p>
         (Clicking it here is a no-op — Storybook runs in an iframe. Drag it to
diff --git a/src/bookmarklet.tsx b/src/bookmarklet.tsx
index b30d16d0..18f57a4c 100644
--- a/src/bookmarklet.tsx
+++ b/src/bookmarklet.tsx
@@ -104,7 +104,7 @@ function ApplyToHost() {
     if (JSON.stringify(mcuConfig) === JSON.stringify(initials)) return;
 
     const { toShadcn } = builder(mcuConfig.source, mcuConfig);
-    const css = shadcnStyleSheet(toShadcn());
+    const css = shadcnStyleSheet(toShadcn(), { important: true });
 
     for (const doc of themableDocuments()) {
       let style = doc.getElementById(STYLE_ID) as HTMLStyleElement | null;
@@ -123,7 +123,7 @@ function ApplyToHost() {
   return null;
 }
 
-const THEME_FILENAME = "mtb-theme.json";
+const THEME_FILENAME = "globals.css";
 
 // The current theme as a shadcn registry item — installable as-is with the
 // standard shadcn CLI (toShadcn() already matches the cssVars field).
@@ -164,10 +164,14 @@ function Actions({ onClose }: { onClose: () => void }) {
     setCopied(true);
   };
 
+  // The globals.css snippet, à la ui.shadcn.com/create's "Copy Theme" —
+  // plain declarations (no !important): it's meant to be merged into the
+  // user's stylesheet, not to fight one.
   const downloadTheme = () => {
-    const blob = new Blob([JSON.stringify(registryItem(mcuConfig), null, 2)], {
-      type: "application/json",
-    });
+    const css = shadcnStyleSheet(
+      builder(mcuConfig.source, mcuConfig).toShadcn(),
+    );
+    const blob = new Blob([css], { type: "text/css" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
@@ -193,7 +197,7 @@ function Actions({ onClose }: { onClose: () => void }) {
             </Button>
           </TooltipTrigger>
           <TooltipContent side="bottom">
-            Download theme ({THEME_FILENAME})
+            Download theme CSS ({THEME_FILENAME})
           </TooltipContent>
         </Tooltip>
 
diff --git a/src/lib/shadcnStyle.test.ts b/src/lib/shadcnStyle.test.ts
index ce6e8af1..c1df5d6c 100644
--- a/src/lib/shadcnStyle.test.ts
+++ b/src/lib/shadcnStyle.test.ts
@@ -23,6 +23,20 @@ describe("shadcnStyleSheet()", () => {
     }
   });
 
+  it("should emit plain declarations by default (globals.css snippet)", () => {
+    expect(css).not.toContain("!important");
+  });
+
+  it("should not wrap anything in @layer (unlayered wins the cascade)", () => {
+    expect(css).not.toContain("@layer");
+  });
+});
+
+describe("shadcnStyleSheet({ important: true })", () => {
+  const css = shadcnStyleSheet(builder(SOURCE).toShadcn(), {
+    important: true,
+  });
+
   it("should mark every declaration !important", () => {
     const declarations = css.match(/--[a-z1-5-]+: [^;]+;/g) ?? [];
     expect(declarations.length).toBe(2 * SHADCN_MAPPING.length);
@@ -30,8 +44,4 @@ describe("shadcnStyleSheet()", () => {
       expect(declaration).toMatch(/ !important;$/);
     }
   });
-
-  it("should not wrap anything in @layer (unlayered wins the cascade)", () => {
-    expect(css).not.toContain("@layer");
-  });
 });
diff --git a/src/lib/shadcnStyle.ts b/src/lib/shadcnStyle.ts
index b69c392c..d26b7382 100644
--- a/src/lib/shadcnStyle.ts
+++ b/src/lib/shadcnStyle.ts
@@ -1,25 +1,27 @@
 import type { ShadcnTheme } from "./builder.shadcn";
 
 /**
- * Serialize a {@link ShadcnTheme} into a stylesheet that *forces* the theme
- * onto a host page — `:root { … }` for light, `.dark { … }` for dark.
+ * Serialize a {@link ShadcnTheme} into a stylesheet — `:root { … }` for
+ * light, `.dark { … }` for dark. Two audiences:
  *
- * Built to win the cascade on a page we don't control:
- *
- * - Declarations are `!important`: shadcn theme-switchers commonly set the
- *   variables as inline `style` on `<html>`, which beats any normal
- *   stylesheet declaration — but not an important one.
- * - No `@layer`: unlayered normal declarations beat layered ones (where
- *   Tailwind v4 sites put their theme), and for important declarations the
- *   order inverts — a layered sheet would *lose* to the site's.
- *
- * The remaining fight — unlayered site styles injected after ours — is won
- * by re-appending the `<style>` element on every update (the caller's job).
+ * - Default: the paste-into-your-`globals.css` snippet, shadcn's own
+ *   theming format (what ui.shadcn.com/create's "Copy Theme" emits).
+ * - `important: true`: a sheet that *forces* the theme onto a page we
+ *   don't control. `!important` beats the inline `style` on `<html>` that
+ *   shadcn theme-switchers commonly write; staying unlayered beats
+ *   `@layer base` (and for important declarations the layer order
+ *   inverts, so a layered sheet would *lose*). The remaining fight —
+ *   unlayered site styles injected after ours — is won by re-appending
+ *   the `<style>` element on every update (the caller's job).
  */
-export function shadcnStyleSheet(theme: ShadcnTheme): string {
+export function shadcnStyleSheet(
+  theme: ShadcnTheme,
+  { important = false }: { important?: boolean } = {},
+): string {
+  const bang = important ? " !important" : "";
   const block = (vars: Record<string, string>) =>
     Object.entries(vars)
-      .map(([name, value]) => `  --${name}: ${value} !important;`)
+      .map(([name, value]) => `  --${name}: ${value}${bang};`)
       .join("\n");
 
   return `:root {\n${block(theme.light)}\n}\n.dark {\n${block(theme.dark)}\n}\n`;
diff --git a/tsup.config.ts b/tsup.config.ts
index b1b3d97d..984aca8b 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -40,7 +40,17 @@ const tailwindAsText: Plugin = {
         const result = await postcss([
           tailwindPostcss({ optimize: true }),
         ]).process(source, { from: file });
-        return { contents: result.css, loader: "text" };
+        // Watch mode: recompile when the css itself OR any file it
+        // @source-scans changes — esbuild would otherwise serve the cached
+        // text while the scanned classes drift.
+        const scanned = [...source.matchAll(/@source "(.+?)";/g)].map((m) =>
+          path.resolve(path.dirname(file), m[1] ?? ""),
+        );
+        return {
+          contents: result.css,
+          loader: "text",
+          watchFiles: [file, ...scanned],
+        };
       },
     );
   },

From 8cf3e009b4252623f133a38747fae11c4729ec39 Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Mon, 3 Aug 2026 17:13:17 +0200
Subject: [PATCH 10/14] feat: an About popover behind the bookmarklet's info
 button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The info button, in a group of its own, opens a popover over an animated
Flowfield backdrop painted with the host page's own shadcn variables —
they inherit through the shadow boundary, so the About card previews the
theme being edited, dark mode included. Dimmed, or the peaks swallow the
text.

The popover portals into the shadow root like the tooltips do, so the
container context moves out of tooltip.tsx into lib/portalContainer.ts,
shared by both.

Also: `ThemePanel` gains a `customColors` prop (default `true`), which
the bookmarklet turns off. Custom colors map to no shadcn variable —
on a host page they were a control that did nothing.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G69EjEY89Q6nNGj1xvgeja
---
 .changeset/mtb-bookmarklet.md |   4 +-
 src/ThemePanel.tsx            | 185 ++++++++++++++++++----------------
 src/bookmarklet.css           |   1 +
 src/bookmarklet.tsx           | 107 ++++++++++++++++++--
 src/components/ui/popover.tsx |  48 +++++++++
 src/components/ui/tooltip.tsx |  21 +---
 src/lib/portalContainer.ts    |  13 +++
 7 files changed, 268 insertions(+), 111 deletions(-)
 create mode 100644 src/components/ui/popover.tsx
 create mode 100644 src/lib/portalContainer.ts

diff --git a/.changeset/mtb-bookmarklet.md b/.changeset/mtb-bookmarklet.md
index a1269c1c..50fe2202 100644
--- a/.changeset/mtb-bookmarklet.md
+++ b/.changeset/mtb-bookmarklet.md
@@ -2,4 +2,6 @@
 "material-theme-builder": minor
 ---
 
-Add a `ThemePanel` bookmarklet: a `javascript:` snippet (see README) that mounts the panel on any shadcn-based site and re-themes it live by forcing the shadcn variables — same mapping as `toShadcn()`, same-origin preview iframes included. Ships as a self-contained `dist/bookmarklet.global.js` IIFE served from jsDelivr; the panel renders in a shadow root, styled by the very variables it edits, and closing it restores the site untouched. Next to the panel: a button downloading the theme's CSS variables as a `globals.css` snippet (à la ui.shadcn.com/create's "Copy Theme") and one copying a self-contained install command — the theme rides along as a base64 `data:` URL (`npx shadcn@latest add "data:application/json;base64,…"`), nothing to host or download first.
+Add a `ThemePanel` bookmarklet: a `javascript:` snippet (see README) that mounts the panel on any shadcn-based site and re-themes it live by forcing the shadcn variables — same mapping as `toShadcn()`, same-origin preview iframes included. Ships as a self-contained `dist/bookmarklet.global.js` IIFE served from jsDelivr; the panel renders in a shadow root, styled by the very variables it edits, and closing it restores the site untouched. Next to the panel: a button downloading the theme's CSS variables as a `globals.css` snippet (à la ui.shadcn.com/create's "Copy Theme") and one copying a self-contained install command — the theme rides along as a base64 `data:` URL (`npx shadcn@latest add "data:application/json;base64,…"`), nothing to host or download first. An info button opens an About popover backed by an animated `Flowfield`, itself painted with the theme's variables.
+
+`ThemePanel` also gains a `customColors` prop (default `true`): the bookmarklet turns it off, since custom colors map to no shadcn variable and would be a control that does nothing there.
diff --git a/src/ThemePanel.tsx b/src/ThemePanel.tsx
index b2e771c0..51247fde 100644
--- a/src/ThemePanel.tsx
+++ b/src/ThemePanel.tsx
@@ -74,7 +74,17 @@ function Pill({
  * </Mtb>
  * ```
  */
-export function ThemePanel(props: ComponentProps<typeof ButtonGroup>) {
+export function ThemePanel({
+  customColors = true,
+  ...props
+}: {
+  /**
+   * Whether the expanded panel offers custom colors. Turn them off where
+   * they can't show up in the output — the bookmarklet, for one, only ever
+   * writes the core shadcn variables, which no custom color maps to.
+   */
+  customColors?: boolean;
+} & ComponentProps<typeof ButtonGroup>) {
   const { initials, setMcuConfig, allPalettes } = useMtb();
 
   const [config, setConfig] = useState<MtbConfig>(() => initials);
@@ -209,93 +219,98 @@ export function ThemePanel(props: ComponentProps<typeof ButtonGroup>) {
 
           {/* Custom colors */}
 
-          {(config.customColors ?? []).map(({ name, hex }, i) => (
-            <Tooltip key={name}>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  className="relative"
-                  onClick={clickColorInput}
-                >
-                  <Pill color={hex} />
-                  <input
-                    tabIndex={-1}
-                    type="color"
-                    value={hex}
-                    onChange={(e) => {
-                      const updated = (config.customColors ?? []).map((c, j) =>
-                        j === i ? { ...c, hex: e.target.value } : c,
-                      );
-                      update({ customColors: updated });
-                    }}
-                    className="opacity-0 absolute bottom-0 left-0 right-0 h-0 pointer-events-none"
-                  />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom">
-                <span className="flex items-center gap-1">
+          {customColors && (
+            <>
+              {(config.customColors ?? []).map(({ name, hex }, i) => (
+                <Tooltip key={name}>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      className="relative"
+                      onClick={clickColorInput}
+                    >
+                      <Pill color={hex} />
+                      <input
+                        tabIndex={-1}
+                        type="color"
+                        value={hex}
+                        onChange={(e) => {
+                          const updated = (config.customColors ?? []).map(
+                            (c, j) =>
+                              j === i ? { ...c, hex: e.target.value } : c,
+                          );
+                          update({ customColors: updated });
+                        }}
+                        className="opacity-0 absolute bottom-0 left-0 right-0 h-0 pointer-events-none"
+                      />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">
+                    <span className="flex items-center gap-1">
+                      <Button
+                        variant="ghost"
+                        size="icon-xs"
+                        onClick={() => {
+                          const updated = (config.customColors ?? []).filter(
+                            (_, j) => j !== i,
+                          );
+                          update({ customColors: updated });
+                        }}
+                      >
+                        <X />
+                      </Button>
+                      {name}
+                    </span>
+                  </TooltipContent>
+                </Tooltip>
+              ))}
+
+              {/* Add custom color */}
+              <Tooltip>
+                <TooltipTrigger asChild>
                   <Button
-                    variant="ghost"
-                    size="icon-xs"
-                    onClick={() => {
-                      const updated = (config.customColors ?? []).filter(
-                        (_, j) => j !== i,
-                      );
-                      update({ customColors: updated });
-                    }}
+                    variant="outline"
+                    size="icon"
+                    className="relative"
+                    onClick={clickColorInput}
                   >
-                    <X />
-                  </Button>
-                  {name}
-                </span>
-              </TooltipContent>
-            </Tooltip>
-          ))}
-
-          {/* Add custom color */}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="relative"
-                onClick={clickColorInput}
-              >
-                <Pill />
-                <input
-                  tabIndex={-1}
-                  type="color"
-                  onChange={(e) => {
-                    const hex = e.target.value;
-                    const existing = config.customColors ?? [];
-                    const idx = pendingAddIndexRef.current;
+                    <Pill />
+                    <input
+                      tabIndex={-1}
+                      type="color"
+                      onChange={(e) => {
+                        const hex = e.target.value;
+                        const existing = config.customColors ?? [];
+                        const idx = pendingAddIndexRef.current;
 
-                    if (idx !== null && idx < existing.length) {
-                      const updated = existing.map((c, j) =>
-                        j === idx ? { ...c, hex } : c,
-                      );
-                      update({ customColors: updated });
-                    } else {
-                      pendingAddIndexRef.current = existing.length;
-                      update({
-                        customColors: [
-                          ...existing,
-                          {
-                            name: `customColor${existing.length + 1}`,
-                            hex,
-                            blend: true,
-                          },
-                        ],
-                      });
-                    }
-                  }}
-                  className="opacity-0 absolute bottom-0 left-0 right-0 h-0 pointer-events-none"
-                />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="bottom">Add custom color</TooltipContent>
-          </Tooltip>
+                        if (idx !== null && idx < existing.length) {
+                          const updated = existing.map((c, j) =>
+                            j === idx ? { ...c, hex } : c,
+                          );
+                          update({ customColors: updated });
+                        } else {
+                          pendingAddIndexRef.current = existing.length;
+                          update({
+                            customColors: [
+                              ...existing,
+                              {
+                                name: `customColor${existing.length + 1}`,
+                                hex,
+                                blend: true,
+                              },
+                            ],
+                          });
+                        }
+                      }}
+                      className="opacity-0 absolute bottom-0 left-0 right-0 h-0 pointer-events-none"
+                    />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">Add custom color</TooltipContent>
+              </Tooltip>
+            </>
+          )}
         </>
       )}
 
diff --git a/src/bookmarklet.css b/src/bookmarklet.css
index 162fbc7b..0aa93771 100644
--- a/src/bookmarklet.css
+++ b/src/bookmarklet.css
@@ -24,6 +24,7 @@
 @source "./bookmarklet.tsx";
 @source "./components/ui/button.tsx";
 @source "./components/ui/button-group.tsx";
+@source "./components/ui/popover.tsx";
 @source "./components/ui/separator.tsx";
 @source "./components/ui/tooltip.tsx";
 
diff --git a/src/bookmarklet.tsx b/src/bookmarklet.tsx
index 18f57a4c..61bcba68 100644
--- a/src/bookmarklet.tsx
+++ b/src/bookmarklet.tsx
@@ -9,7 +9,7 @@
  * panel is styled by the very shadcn variables it edits.
  */
 
-import { ArrowDownToLine, Check, Terminal, X } from "lucide-react";
+import { ArrowDownToLine, Check, Info, Terminal, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { createRoot, type Root } from "react-dom/client";
 
@@ -18,14 +18,20 @@ import cssText from "./bookmarklet.css?raw";
 
 import { Button } from "./components/ui/button";
 import { ButtonGroup } from "./components/ui/button-group";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "./components/ui/popover";
 import {
   Tooltip,
   TooltipContent,
-  TooltipPortalContainerContext,
   TooltipProvider,
   TooltipTrigger,
 } from "./components/ui/tooltip";
+import { Flowfield, type Peak } from "./Flowfield";
 import { builder, type MtbConfig } from "./lib/builder";
+import { PortalContainerContext } from "./lib/portalContainer";
 import { shadcnStyleSheet } from "./lib/shadcnStyle";
 import { Mtb } from "./Mtb";
 import { useMtb } from "./Mtb.context";
@@ -145,9 +151,90 @@ function installCommand(config: MtbConfig) {
   return `npx shadcn@latest add "data:application/json;base64,${b64}"`;
 }
 
+const REPO_URL = "https://github.com/abernier/material-theme-builder";
+
+/*
+ * The flowfield behind the About popover, painted with the host page's own
+ * shadcn variables — they inherit through the shadow boundary, so the
+ * backdrop is itself a live preview of the theme being edited, dark mode
+ * included. Base thresholds stay below the peaks', as in Flowfield's own
+ * defaults: the base grid is the terrain, each peak paints over it.
+ */
+const FLOWFIELD_BASE_COLORS: Record<number, string> = {
+  100: "var(--popover)",
+  200: "var(--muted)",
+  300: "var(--accent)",
+  400: "var(--secondary)",
+  500: "var(--border)",
+};
+
+const FLOWFIELD_PEAKS: Peak[] = [
+  { id: "primary", colors: { 600: "var(--chart-4)", 900: "var(--chart-1)" } },
+  { id: "secondary", colors: { 600: "var(--chart-5)", 900: "var(--chart-2)" } },
+  { id: "tertiary", colors: { 600: "var(--chart-3)", 900: "var(--primary)" } },
+];
+
 /**
- * The action cluster next to the panel: copy the shadcn CLI install
- * command, download the theme as a registry item, close.
+ * The About popover — what this thing is and where it comes from, over an
+ * animated flowfield backdrop.
+ */
+function InfoPopover() {
+  return (
+    <Popover>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <PopoverTrigger asChild>
+            <Button variant="outline" size="icon" aria-label="About">
+              <Info />
+            </Button>
+          </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">About</TooltipContent>
+      </Tooltip>
+
+      <PopoverContent
+        side="top"
+        align="end"
+        className="relative overflow-hidden p-0"
+      >
+        {/* Dimmed — at full strength the peaks swallow the text, more so in
+            dark mode where they are the lightest thing on screen. */}
+        <div
+          className="absolute inset-0 opacity-60 dark:opacity-40"
+          aria-hidden="true"
+        >
+          <Flowfield
+            peaks={FLOWFIELD_PEAKS}
+            baseColors={FLOWFIELD_BASE_COLORS}
+            gridScale={8}
+          />
+        </div>
+
+        {/* Later sibling: paints over the backdrop, no z-index needed. */}
+        <div className="relative flex flex-col gap-1.5 p-4">
+          <p className="text-sm font-medium">Material Theme Builder</p>
+          <p className="text-xs text-muted-foreground">
+            Rebuilds this page's shadcn theme from a single source color, the
+            Material&nbsp;You way. Tweak it, grab the CSS or the install
+            command, close to restore the site.
+          </p>
+          <a
+            href={REPO_URL}
+            target="_blank"
+            rel="noreferrer"
+            className="text-xs font-medium underline underline-offset-2"
+          >
+            github.com/abernier/material-theme-builder
+          </a>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+/**
+ * The action cluster next to the panel: about, download the theme as a
+ * globals.css snippet, copy the shadcn CLI install command, close.
  */
 function Actions({ onClose }: { onClose: () => void }) {
   const { mcuConfig } = useMtb();
@@ -184,6 +271,10 @@ function Actions({ onClose }: { onClose: () => void }) {
 
   return (
     <>
+      <ButtonGroup>
+        <InfoPopover />
+      </ButtonGroup>
+
       <ButtonGroup>
         <Tooltip>
           <TooltipTrigger asChild>
@@ -249,17 +340,19 @@ function App({
   onClose: () => void;
 }) {
   return (
-    <TooltipPortalContainerContext.Provider value={container}>
+    <PortalContainerContext.Provider value={container}>
       <TooltipProvider>
         <Mtb source={source}>
           <ApplyToHost />
           <div className="flex items-center gap-1">
-            <ThemePanel />
+            {/* No custom colors: they map to no shadcn variable, so on a
+                host page they would be a control that does nothing. */}
+            <ThemePanel customColors={false} />
             <Actions onClose={onClose} />
           </div>
         </Mtb>
       </TooltipProvider>
-    </TooltipPortalContainerContext.Provider>
+    </PortalContainerContext.Provider>
   );
 }
 
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 00000000..8aeba76e
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,48 @@
+import { Popover as PopoverPrimitive } from "radix-ui";
+import * as React from "react";
+
+import { PortalContainerContext } from "@/lib/portalContainer";
+import { cn } from "@/lib/utils";
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  const container = React.useContext(PortalContainerContext);
+  return (
+    <PopoverPrimitive.Portal container={container ?? undefined}>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index c55a29ea..ce019f17 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -1,18 +1,9 @@
 import { Tooltip as TooltipPrimitive } from "radix-ui";
 import * as React from "react";
 
+import { PortalContainerContext } from "@/lib/portalContainer";
 import { cn } from "@/lib/utils";
 
-/**
- * Where tooltip portals land — `null` (the default) portals to
- * `document.body`, Radix's own default. The bookmarklet provides a node
- * inside its shadow root instead: content portalled to `document.body`
- * would escape the shadow boundary and lose every style.
- */
-const TooltipPortalContainerContext = React.createContext<HTMLElement | null>(
-  null,
-);
-
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -44,7 +35,7 @@ function TooltipContent({
   children,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  const container = React.useContext(TooltipPortalContainerContext);
+  const container = React.useContext(PortalContainerContext);
   return (
     <TooltipPrimitive.Portal container={container ?? undefined}>
       <TooltipPrimitive.Content
@@ -63,10 +54,4 @@ function TooltipContent({
   );
 }
 
-export {
-  Tooltip,
-  TooltipContent,
-  TooltipPortalContainerContext,
-  TooltipProvider,
-  TooltipTrigger,
-};
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
diff --git a/src/lib/portalContainer.ts b/src/lib/portalContainer.ts
new file mode 100644
index 00000000..674778c4
--- /dev/null
+++ b/src/lib/portalContainer.ts
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+/**
+ * Where Radix portals — tooltips, popovers — land. `null`, the default,
+ * leaves Radix its own default of `document.body`.
+ *
+ * The bookmarklet provides a node inside its shadow root instead: content
+ * portalled to `document.body` would escape the shadow boundary and lose
+ * every style.
+ */
+export const PortalContainerContext = React.createContext<HTMLElement | null>(
+  null,
+);

From dc178a35ef553c5874aa45e633c4d9c6421da0fc Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Mon, 3 Aug 2026 17:14:36 +0200
Subject: [PATCH 11/14] refactor: dot-scope the bookmarklet-owned lib files
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`bookmarklet.` prefix on everything the feature owns, tests included, so
dropping the bookmarklet one day is a matter of deleting its files rather
than working out which of lib/ belonged to it. The shadcn components stay
as they are — they are generated files that happen to read the portal
container context.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G69EjEY89Q6nNGj1xvgeja
---
 src/bookmarklet.tsx                                           | 4 ++--
 src/components/ui/popover.tsx                                 | 2 +-
 src/components/ui/tooltip.tsx                                 | 2 +-
 .../{portalContainer.ts => bookmarklet.portalContainer.ts}    | 0
 .../{shadcnStyle.test.ts => bookmarklet.shadcnStyle.test.ts}  | 2 +-
 src/lib/{shadcnStyle.ts => bookmarklet.shadcnStyle.ts}        | 0
 6 files changed, 5 insertions(+), 5 deletions(-)
 rename src/lib/{portalContainer.ts => bookmarklet.portalContainer.ts} (100%)
 rename src/lib/{shadcnStyle.test.ts => bookmarklet.shadcnStyle.test.ts} (95%)
 rename src/lib/{shadcnStyle.ts => bookmarklet.shadcnStyle.ts} (100%)

diff --git a/src/bookmarklet.tsx b/src/bookmarklet.tsx
index 61bcba68..6bb39255 100644
--- a/src/bookmarklet.tsx
+++ b/src/bookmarklet.tsx
@@ -30,9 +30,9 @@ import {
   TooltipTrigger,
 } from "./components/ui/tooltip";
 import { Flowfield, type Peak } from "./Flowfield";
+import { PortalContainerContext } from "./lib/bookmarklet.portalContainer";
+import { shadcnStyleSheet } from "./lib/bookmarklet.shadcnStyle";
 import { builder, type MtbConfig } from "./lib/builder";
-import { PortalContainerContext } from "./lib/portalContainer";
-import { shadcnStyleSheet } from "./lib/shadcnStyle";
 import { Mtb } from "./Mtb";
 import { useMtb } from "./Mtb.context";
 import { ThemePanel } from "./ThemePanel";
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index 8aeba76e..630c32a6 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -1,7 +1,7 @@
 import { Popover as PopoverPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { PortalContainerContext } from "@/lib/portalContainer";
+import { PortalContainerContext } from "@/lib/bookmarklet.portalContainer";
 import { cn } from "@/lib/utils";
 
 function Popover({
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index ce019f17..59bc66f0 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -1,7 +1,7 @@
 import { Tooltip as TooltipPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { PortalContainerContext } from "@/lib/portalContainer";
+import { PortalContainerContext } from "@/lib/bookmarklet.portalContainer";
 import { cn } from "@/lib/utils";
 
 function TooltipProvider({
diff --git a/src/lib/portalContainer.ts b/src/lib/bookmarklet.portalContainer.ts
similarity index 100%
rename from src/lib/portalContainer.ts
rename to src/lib/bookmarklet.portalContainer.ts
diff --git a/src/lib/shadcnStyle.test.ts b/src/lib/bookmarklet.shadcnStyle.test.ts
similarity index 95%
rename from src/lib/shadcnStyle.test.ts
rename to src/lib/bookmarklet.shadcnStyle.test.ts
index c1df5d6c..f9a7702b 100644
--- a/src/lib/shadcnStyle.test.ts
+++ b/src/lib/bookmarklet.shadcnStyle.test.ts
@@ -1,8 +1,8 @@
 import { describe, expect, it } from "vitest";
 
+import { shadcnStyleSheet } from "./bookmarklet.shadcnStyle";
 import { builder } from "./builder";
 import { SHADCN_MAPPING } from "./builder.shadcn";
-import { shadcnStyleSheet } from "./shadcnStyle";
 
 const SOURCE = "#6750A4";
 
diff --git a/src/lib/shadcnStyle.ts b/src/lib/bookmarklet.shadcnStyle.ts
similarity index 100%
rename from src/lib/shadcnStyle.ts
rename to src/lib/bookmarklet.shadcnStyle.ts

From b3666a2b87e76f88fb8f54788f96f256f019067c Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Mon, 3 Aug 2026 17:20:19 +0200
Subject: [PATCH 12/14] feat: put the info button first, and let it be the only
 thing that closes the popover

It leads the cluster now, in its own group before the panel. And the
popover ignores outside interaction: every tweak on the panel repaints
its flowfield backdrop, which dismiss-on-outside-click made impossible to
watch. The button toggles it back off.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G69EjEY89Q6nNGj1xvgeja
---
 src/bookmarklet.tsx | 38 +++++++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/bookmarklet.tsx b/src/bookmarklet.tsx
index 6bb39255..c6384da5 100644
--- a/src/bookmarklet.tsx
+++ b/src/bookmarklet.tsx
@@ -181,21 +181,27 @@ const FLOWFIELD_PEAKS: Peak[] = [
 function InfoPopover() {
   return (
     <Popover>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <PopoverTrigger asChild>
-            <Button variant="outline" size="icon" aria-label="About">
-              <Info />
-            </Button>
-          </PopoverTrigger>
-        </TooltipTrigger>
-        <TooltipContent side="bottom">About</TooltipContent>
-      </Tooltip>
+      <ButtonGroup>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="icon" aria-label="About">
+                <Info />
+              </Button>
+            </PopoverTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">About</TooltipContent>
+        </Tooltip>
+      </ButtonGroup>
 
       <PopoverContent
         side="top"
-        align="end"
+        align="start"
         className="relative overflow-hidden p-0"
+        // Only the info button dismisses it. Every tweak on the panel next
+        // to it repaints the backdrop, which an outside click closing the
+        // popover would make impossible to watch.
+        onInteractOutside={(e) => e.preventDefault()}
       >
         {/* Dimmed — at full strength the peaks swallow the text, more so in
             dark mode where they are the lightest thing on screen. */}
@@ -233,8 +239,8 @@ function InfoPopover() {
 }
 
 /**
- * The action cluster next to the panel: about, download the theme as a
- * globals.css snippet, copy the shadcn CLI install command, close.
+ * The action cluster after the panel: download the theme as a globals.css
+ * snippet, copy the shadcn CLI install command, close.
  */
 function Actions({ onClose }: { onClose: () => void }) {
   const { mcuConfig } = useMtb();
@@ -271,10 +277,6 @@ function Actions({ onClose }: { onClose: () => void }) {
 
   return (
     <>
-      <ButtonGroup>
-        <InfoPopover />
-      </ButtonGroup>
-
       <ButtonGroup>
         <Tooltip>
           <TooltipTrigger asChild>
@@ -345,6 +347,8 @@ function App({
         <Mtb source={source}>
           <ApplyToHost />
           <div className="flex items-center gap-1">
+            <InfoPopover />
+
             {/* No custom colors: they map to no shadcn variable, so on a
                 host page they would be a control that does nothing. */}
             <ThemePanel customColors={false} />

From 68f5886dd69fe80235f9ab7b9e0de68ede91a2dd Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Mon, 3 Aug 2026 17:25:26 +0200
Subject: [PATCH 13/14] feat: bigger controls, centered at the bottom
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`size="lg"` everywhere in the bookmarklet — 36px hit targets on someone
else's site, where the panel competes with the page's own chrome — via a
new `size` prop on ThemePanel that scales its buttons with it.

And the host is now a click-through full-width strip that centers the
panel, rather than a box pinned bottom-right. Not `left:50%` + a
translate: a transformed ancestor would become the containing block of
the fixed-positioned Radix popper living in the shadow root.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G69EjEY89Q6nNGj1xvgeja
---
 .changeset/mtb-bookmarklet.md |  2 +-
 src/ThemePanel.tsx            | 21 ++++++++++++++++-----
 src/bookmarklet.tsx           | 19 +++++++++++++------
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/.changeset/mtb-bookmarklet.md b/.changeset/mtb-bookmarklet.md
index 50fe2202..668d62b8 100644
--- a/.changeset/mtb-bookmarklet.md
+++ b/.changeset/mtb-bookmarklet.md
@@ -4,4 +4,4 @@
 
 Add a `ThemePanel` bookmarklet: a `javascript:` snippet (see README) that mounts the panel on any shadcn-based site and re-themes it live by forcing the shadcn variables — same mapping as `toShadcn()`, same-origin preview iframes included. Ships as a self-contained `dist/bookmarklet.global.js` IIFE served from jsDelivr; the panel renders in a shadow root, styled by the very variables it edits, and closing it restores the site untouched. Next to the panel: a button downloading the theme's CSS variables as a `globals.css` snippet (à la ui.shadcn.com/create's "Copy Theme") and one copying a self-contained install command — the theme rides along as a base64 `data:` URL (`npx shadcn@latest add "data:application/json;base64,…"`), nothing to host or download first. An info button opens an About popover backed by an animated `Flowfield`, itself painted with the theme's variables.
 
-`ThemePanel` also gains a `customColors` prop (default `true`): the bookmarklet turns it off, since custom colors map to no shadcn variable and would be a control that does nothing there.
+`ThemePanel` also gains two props: `customColors` (default `true`), which the bookmarklet turns off since custom colors map to no shadcn variable and would be a control that does nothing there, and `size` (`"default" | "lg"`), which scales every control up for an overlay meant to be hit on any page.
diff --git a/src/ThemePanel.tsx b/src/ThemePanel.tsx
index 51247fde..d5ed2452 100644
--- a/src/ThemePanel.tsx
+++ b/src/ThemePanel.tsx
@@ -76,6 +76,7 @@ function Pill({
  */
 export function ThemePanel({
   customColors = true,
+  size = "default",
   ...props
 }: {
   /**
@@ -84,8 +85,11 @@ export function ThemePanel({
    * writes the core shadcn variables, which no custom color maps to.
    */
   customColors?: boolean;
+  /** Control scale — `"lg"` for an overlay meant to be hit on any page. */
+  size?: "default" | "lg";
 } & ComponentProps<typeof ButtonGroup>) {
   const { initials, setMcuConfig, allPalettes } = useMtb();
+  const iconSize = size === "lg" ? "icon-lg" : "icon";
 
   const [config, setConfig] = useState<MtbConfig>(() => initials);
 
@@ -131,7 +135,7 @@ export function ThemePanel({
         <TooltipTrigger asChild>
           <Button
             variant="outline"
-            size="icon"
+            size={iconSize}
             className="relative"
             onClick={() => setExpanded((v) => !v)}
             onKeyDown={(e) => {
@@ -182,7 +186,7 @@ export function ThemePanel({
                 <TooltipTrigger asChild>
                   <Button
                     variant="outline"
-                    size="icon"
+                    size={iconSize}
                     className="relative"
                     onClick={clickColorInput}
                   >
@@ -226,7 +230,7 @@ export function ThemePanel({
                   <TooltipTrigger asChild>
                     <Button
                       variant="outline"
-                      size="icon"
+                      size={iconSize}
                       className="relative"
                       onClick={clickColorInput}
                     >
@@ -271,7 +275,7 @@ export function ThemePanel({
                 <TooltipTrigger asChild>
                   <Button
                     variant="outline"
-                    size="icon"
+                    size={iconSize}
                     className="relative"
                     onClick={clickColorInput}
                   >
@@ -317,11 +321,13 @@ export function ThemePanel({
       <ContrastToggle
         contrast={config.contrast}
         onChange={(v) => update({ contrast: v })}
+        size={iconSize}
       />
 
       <SchemeToggle
         scheme={config.scheme}
         onChange={(v) => update({ scheme: v })}
+        size={size}
       />
     </ButtonGroup>
   );
@@ -339,9 +345,11 @@ const CONTRAST_ICON_SIZE: Record<number, string> = {
 function ContrastToggle({
   contrast,
   onChange,
+  size,
 }: {
   contrast?: number;
   onChange: (v: number) => void;
+  size: ComponentProps<typeof Button>["size"];
 }) {
   const current = contrast ?? 0;
   const currentLevel =
@@ -351,7 +359,7 @@ function ContrastToggle({
       <TooltipTrigger asChild>
         <Button
           variant="outline"
-          size="icon"
+          size={size}
           onClick={() => {
             const i = CONTRAST_LEVELS.findIndex((l) => l.value === current);
             const next =
@@ -376,9 +384,11 @@ function ContrastToggle({
 function SchemeToggle({
   scheme,
   onChange,
+  size,
 }: {
   scheme?: (typeof schemeNames)[number];
   onChange: (v: (typeof schemeNames)[number]) => void;
+  size: ComponentProps<typeof Button>["size"];
 }) {
   const current = scheme ?? "tonalSpot";
   const i = schemeNames.indexOf(current);
@@ -388,6 +398,7 @@ function SchemeToggle({
       <TooltipTrigger asChild>
         <Button
           variant="outline"
+          size={size}
           onClick={() =>
             onChange(
               schemeNames[(i + 1) % schemeNames.length] ?? schemeNames[0],
diff --git a/src/bookmarklet.tsx b/src/bookmarklet.tsx
index c6384da5..e083a153 100644
--- a/src/bookmarklet.tsx
+++ b/src/bookmarklet.tsx
@@ -185,7 +185,7 @@ function InfoPopover() {
         <Tooltip>
           <TooltipTrigger asChild>
             <PopoverTrigger asChild>
-              <Button variant="outline" size="icon" aria-label="About">
+              <Button variant="outline" size="icon-lg" aria-label="About">
                 <Info />
               </Button>
             </PopoverTrigger>
@@ -282,7 +282,7 @@ function Actions({ onClose }: { onClose: () => void }) {
           <TooltipTrigger asChild>
             <Button
               variant="outline"
-              size="icon"
+              size="icon-lg"
               aria-label="Download theme"
               onClick={downloadTheme}
             >
@@ -298,7 +298,7 @@ function Actions({ onClose }: { onClose: () => void }) {
           <TooltipTrigger asChild>
             <Button
               variant="outline"
-              size="icon"
+              size="icon-lg"
               aria-label="Copy install command"
               onClick={copyCommand}
             >
@@ -318,7 +318,7 @@ function Actions({ onClose }: { onClose: () => void }) {
           <TooltipTrigger asChild>
             <Button
               variant="outline"
-              size="icon"
+              size="icon-lg"
               aria-label="Close"
               onClick={onClose}
             >
@@ -351,7 +351,7 @@ function App({
 
             {/* No custom colors: they map to no shadcn variable, so on a
                 host page they would be a control that does nothing. */}
-            <ThemePanel customColors={false} />
+            <ThemePanel customColors={false} size="lg" />
             <Actions onClose={onClose} />
           </div>
         </Mtb>
@@ -363,8 +363,13 @@ function App({
 function open() {
   const host = document.createElement("div") as MtbHost;
   host.id = HOST_ID;
+  // Centered at the bottom: a full-width strip that centers the panel,
+  // rather than `left:50%` + a translate — a transformed ancestor would
+  // become the containing block of the fixed-positioned Radix popper
+  // inside the shadow root. Click-through, since the strip spans the page.
   host.style.cssText =
-    "position:fixed;bottom:16px;right:16px;z-index:2147483647;";
+    "position:fixed;bottom:16px;left:0;right:0;display:flex;" +
+    "justify-content:center;pointer-events:none;z-index:2147483647;";
   const shadow = host.attachShadow({ mode: "open" });
 
   const style = document.createElement("style");
@@ -372,6 +377,8 @@ function open() {
   shadow.appendChild(style);
 
   const wrapper = document.createElement("div");
+  // Re-enables what the click-through host strip turned off.
+  wrapper.style.pointerEvents = "auto";
   shadow.appendChild(wrapper);
 
   // Mirror the page's `.dark` class onto the in-shadow wrapper: compiled

From e9ceea3f3242d17c84229d4aafedd85d319d73fb Mon Sep 17 00:00:00 2001
From: Antoine BERNIER <antoine.bernier@gmail.com>
Date: Tue, 4 Aug 2026 08:48:24 +0200
Subject: [PATCH 14/14] feat: migrate the bookmarklet to a Chrome extension
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A bookmarklet asks a lot of a user: create a bookmark by hand, paste a
`javascript:` URL, hope the browser doesn't strip it. A toolbar button
asks for one click, so the panel now ships as an MV3 extension built out
of `chrome-extension/` with Vite + CRXJS — the same idiom as
`figma-plugin/`, and the same shared `src/` panel underneath.

`src/bookmarklet.tsx` becomes the content script nearly verbatim: the
shadow root, the forced shadcn variables, the iframe walk, the About
popover all carry over untouched. What changed is how it gets there.

It is *not* a declared content script. React on every page someone
browses would be a poor trade for a panel they open now and then, so the
service worker injects it on click. That is also what lets the manifest
get by on `activeTab`: no host permissions, nothing read until the button
is pressed.

Injection is not the toggle, either. `executeScript` re-runs the loader,
but the module it dynamic-imports stays cached in that tab's isolated
world, so a second click would be a no-op. The live instance toggles
itself over a message instead, and a failed ping is what tells the worker
there is no instance yet.

The `?raw` + custom tsup postcss plugin that compiled Tailwind for the
shadow root is gone: Vite's `?inline` does it, through the repo's own
postcss config.

Distribution: `pnpm zip-extension` on every version bump, attached to the
GitHub release (the documented "load unpacked" path), plus a Web Store
upload that stays skipped until `CHROME_EXTENSION_ID` and its OAuth
secrets exist. The listing copy and the one-time store setup live in
chrome-extension/README.md.

Icons come out of `builder()` itself — a seed disc ringed by three of the
tones it derives — so the mark can't drift from what the tool produces.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G69EjEY89Q6nNGj1xvgeja
---
 .changeset/mtb-bookmarklet.md                 |   7 -
 .changeset/mtb-chrome-extension.md            |   9 +
 .github/workflows/ci.yml                      |  96 +++++++++
 .gitignore                                    |   1 +
 .storybook/main.ts                            |  10 -
 README.md                                     |  25 ++-
 chrome-extension/README.md                    |  99 +++++++++
 chrome-extension/icons/icon-128.png           | Bin 0 -> 11891 bytes
 chrome-extension/icons/icon-16.png            | Bin 0 -> 1614 bytes
 chrome-extension/icons/icon-32.png            | Bin 0 -> 3313 bytes
 chrome-extension/icons/icon-48.png            | Bin 0 -> 4788 bytes
 chrome-extension/icons/icon.svg               |   6 +
 chrome-extension/manifest.config.ts           |  47 +++++
 chrome-extension/src/background.ts            |  62 ++++++
 .../src/content.css                           |  20 +-
 .../src/content.tsx                           |  80 ++++---
 chrome-extension/src/messages.ts              |  17 ++
 chrome-extension/src/vite-env.d.ts            |   6 +
 chrome-extension/vite.config.ts               |  30 +++
 eslint.config.mjs                             |   8 +-
 package.json                                  |   7 +-
 pnpm-lock.yaml                                | 199 ++++++++++++++++++
 scripts/make-extension-icons.mjs              |  79 +++++++
 src/Bookmarklet.stories.tsx                   |  77 -------
 src/ThemePanel.tsx                            |   4 +-
 src/components/ui/popover.tsx                 |   2 +-
 src/components/ui/tooltip.tsx                 |   2 +-
 ...tainer.ts => extension.portalContainer.ts} |   2 +-
 ....test.ts => extension.shadcnStyle.test.ts} |   2 +-
 ...hadcnStyle.ts => extension.shadcnStyle.ts} |   0
 tsconfig.json                                 |   4 +-
 tsup.config.ts                                |  63 ------
 32 files changed, 755 insertions(+), 209 deletions(-)
 delete mode 100644 .changeset/mtb-bookmarklet.md
 create mode 100644 .changeset/mtb-chrome-extension.md
 create mode 100644 chrome-extension/README.md
 create mode 100644 chrome-extension/icons/icon-128.png
 create mode 100644 chrome-extension/icons/icon-16.png
 create mode 100644 chrome-extension/icons/icon-32.png
 create mode 100644 chrome-extension/icons/icon-48.png
 create mode 100644 chrome-extension/icons/icon.svg
 create mode 100644 chrome-extension/manifest.config.ts
 create mode 100644 chrome-extension/src/background.ts
 rename src/bookmarklet.css => chrome-extension/src/content.css (79%)
 rename src/bookmarklet.tsx => chrome-extension/src/content.tsx (84%)
 create mode 100644 chrome-extension/src/messages.ts
 create mode 100644 chrome-extension/src/vite-env.d.ts
 create mode 100644 chrome-extension/vite.config.ts
 create mode 100644 scripts/make-extension-icons.mjs
 delete mode 100644 src/Bookmarklet.stories.tsx
 rename src/lib/{bookmarklet.portalContainer.ts => extension.portalContainer.ts} (81%)
 rename src/lib/{bookmarklet.shadcnStyle.test.ts => extension.shadcnStyle.test.ts} (95%)
 rename src/lib/{bookmarklet.shadcnStyle.ts => extension.shadcnStyle.ts} (100%)

diff --git a/.changeset/mtb-bookmarklet.md b/.changeset/mtb-bookmarklet.md
deleted file mode 100644
index 668d62b8..00000000
--- a/.changeset/mtb-bookmarklet.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-"material-theme-builder": minor
----
-
-Add a `ThemePanel` bookmarklet: a `javascript:` snippet (see README) that mounts the panel on any shadcn-based site and re-themes it live by forcing the shadcn variables — same mapping as `toShadcn()`, same-origin preview iframes included. Ships as a self-contained `dist/bookmarklet.global.js` IIFE served from jsDelivr; the panel renders in a shadow root, styled by the very variables it edits, and closing it restores the site untouched. Next to the panel: a button downloading the theme's CSS variables as a `globals.css` snippet (à la ui.shadcn.com/create's "Copy Theme") and one copying a self-contained install command — the theme rides along as a base64 `data:` URL (`npx shadcn@latest add "data:application/json;base64,…"`), nothing to host or download first. An info button opens an About popover backed by an animated `Flowfield`, itself painted with the theme's variables.
-
-`ThemePanel` also gains two props: `customColors` (default `true`), which the bookmarklet turns off since custom colors map to no shadcn variable and would be a control that does nothing there, and `size` (`"default" | "lg"`), which scales every control up for an overlay meant to be hit on any page.
diff --git a/.changeset/mtb-chrome-extension.md b/.changeset/mtb-chrome-extension.md
new file mode 100644
index 00000000..2f1b86aa
--- /dev/null
+++ b/.changeset/mtb-chrome-extension.md
@@ -0,0 +1,9 @@
+---
+"material-theme-builder": minor
+---
+
+Add a Chrome extension: click its toolbar button on any shadcn-based site and the `ThemePanel` mounts on the page, re-theming it live by forcing the shadcn variables — same mapping as `toShadcn()`, same-origin preview iframes included. The panel renders in a shadow root, styled by the very variables it edits, and closing it restores the site untouched. Next to the panel: a button downloading the theme's CSS variables as a `globals.css` snippet (à la ui.shadcn.com/create's "Copy Theme") and one copying a self-contained install command — the theme rides along as a base64 `data:` URL (`npx shadcn@latest add "data:application/json;base64,…"`), nothing to host or download first. An info button opens an About popover backed by an animated `Flowfield`, itself painted with the theme's variables.
+
+It asks for `activeTab` alone: nothing is read or injected until the button is clicked, and the panel is not a declared content script. Built with Vite + CRXJS out of `chrome-extension/`, shipped as a zip on each GitHub release (and to the Chrome Web Store once its credentials are configured) — not as part of this npm package.
+
+`ThemePanel` also gains two props: `customColors` (default `true`), which the extension turns off since custom colors map to no shadcn variable and would be a control that does nothing there, and `size` (`"default" | "lg"`), which scales every control up for an overlay meant to be hit on any page.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 712fc5e2..9c68e695 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -134,3 +134,99 @@ jobs:
           fi
 
           echo "Figma plugin v${VERSION} published successfully"
+
+  #
+  # Chrome extension — only on version bump (release merge).
+  #
+  # Two outputs, independent: the zip is always attached to the GitHub release
+  # (that's the "load unpacked" install path documented in the README), and the
+  # Web Store upload runs only once the store credentials exist as repo
+  # secrets. See chrome-extension/README.md for how to obtain them.
+  #
+
+  chrome-extension:
+    needs: ci
+    if: needs.ci.outputs.changed == 'true'
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write # gh release upload
+
+    steps:
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: ".nvmrc"
+          cache: "pnpm"
+      - run: pnpm install --frozen-lockfile
+
+      - name: Build & zip
+        run: pnpm run zip-extension
+
+      # Changesets tags a single-package repo `v<version>` and creates the
+      # release; this only adds the asset to it.
+      - name: Attach to the GitHub release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh release upload "v${{ needs.ci.outputs.version }}" \
+            chrome-extension/material-theme-builder-chrome.zip --clobber
+
+      - name: Publish to the Chrome Web Store
+        if: vars.CHROME_EXTENSION_ID != ''
+        env:
+          EXTENSION_ID: ${{ vars.CHROME_EXTENSION_ID }}
+          CLIENT_ID: ${{ secrets.CHROME_CLIENT_ID }}
+          CLIENT_SECRET: ${{ secrets.CHROME_CLIENT_SECRET }}
+          REFRESH_TOKEN: ${{ secrets.CHROME_REFRESH_TOKEN }}
+        run: |
+          set -euo pipefail
+
+          VERSION="${{ needs.ci.outputs.version }}"
+          ZIP="chrome-extension/material-theme-builder-chrome.zip"
+
+          echo "Publishing Chrome extension v${VERSION} (item id: ${EXTENSION_ID})"
+
+          ACCESS_TOKEN=$(curl -s -X POST "https://oauth2.googleapis.com/token" \
+            -d "client_id=${CLIENT_ID}" \
+            -d "client_secret=${CLIENT_SECRET}" \
+            -d "refresh_token=${REFRESH_TOKEN}" \
+            -d "grant_type=refresh_token" | jq -r '.access_token')
+
+          if [[ -z "$ACCESS_TOKEN" || "$ACCESS_TOKEN" == "null" ]]; then
+            echo "::error::Could not refresh the Chrome Web Store access token"
+            exit 1
+          fi
+
+          # Upload the new package, then flip it to published. `uploadState`
+          # is FAILURE on e.g. a version that isn't higher than the live one.
+          UPLOAD=$(curl -s \
+            -X PUT \
+            -H "Authorization: Bearer ${ACCESS_TOKEN}" \
+            -H "x-goog-api-version: 2" \
+            -T "$ZIP" \
+            "https://www.googleapis.com/upload/chromewebstore/v1.1/items/${EXTENSION_ID}")
+
+          echo "$UPLOAD" | jq . 2>/dev/null || echo "$UPLOAD"
+
+          if [[ "$(echo "$UPLOAD" | jq -r '.uploadState')" != "SUCCESS" ]]; then
+            echo "::error::Chrome Web Store upload failed"
+            exit 1
+          fi
+
+          PUBLISH=$(curl -s \
+            -X POST \
+            -H "Authorization: Bearer ${ACCESS_TOKEN}" \
+            -H "x-goog-api-version: 2" \
+            -H "Content-Length: 0" \
+            "https://www.googleapis.com/chromewebstore/v1.1/items/${EXTENSION_ID}/publish")
+
+          echo "$PUBLISH" | jq . 2>/dev/null || echo "$PUBLISH"
+
+          if echo "$PUBLISH" | jq -e '.error' >/dev/null 2>&1; then
+            echo "::error::Chrome Web Store publish failed"
+            exit 1
+          fi
+
+          echo "Chrome extension v${VERSION} submitted for review"
diff --git a/.gitignore b/.gitignore
index 507036bc..eb3c8a93 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 node_modules
 dist
+*.zip
 *storybook.log
 storybook-static
 package-lock.json
diff --git a/.storybook/main.ts b/.storybook/main.ts
index cfd51cf3..37105760 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,19 +1,9 @@
-import { existsSync } from "node:fs";
-import { fileURLToPath } from "node:url";
-
 import type { StorybookConfig } from "@storybook/react-vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
-const dist = fileURLToPath(new URL("../dist", import.meta.url));
-
 const config: StorybookConfig = {
   framework: "@storybook/react-vite",
   stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  // Serves dist/ so the Bookmarklet story's dev link can point at the
-  // locally-built bundle (run `pnpm build` to refresh it). Conditional:
-  // dist/ doesn't exist on CI (Chromatic builds Storybook only), and the
-  // built Storybook's link targets jsDelivr anyway.
-  staticDirs: existsSync(dist) ? [{ from: "../dist", to: "/dist" }] : [],
   addons: [
     "@storybook/addon-docs",
     "@storybook/addon-themes",
diff --git a/README.md b/README.md
index 469424d4..58883107 100644
--- a/README.md
+++ b/README.md
@@ -137,15 +137,28 @@ import { Mtb, ThemePanel } from "material-theme-builder/react";
 </Mtb>;
 ```
 
-### Bookmarklet
+### Chrome extension
 
-Try the `ThemePanel` on **any shadcn-based site** — no install. Create a bookmark with this URL:
+Try the `ThemePanel` on **any shadcn-based site**, without touching its code.
 
-```
-javascript:(()=>{var s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/material-theme-builder@3/dist/bookmarklet.global.js";document.body.append(s)})()
-```
+Grab the latest `material-theme-builder-chrome.zip` from
+[Releases](https://github.com/abernier/material-theme-builder/releases), unzip it, then
+`chrome://extensions` → **Developer mode** → **Load unpacked** → pick the folder. Pin the
+extension and click its toolbar button on a shadcn site (try
+[ui.shadcn.com/create](https://ui.shadcn.com/create)).
+
+The panel appears at the bottom of the page and every tweak re-themes it live, by forcing
+the [shadcn variables](https://ui.shadcn.com/docs/theming#list-of-variables) (same mapping
+as `toShadcn()`) onto the page — same-origin preview iframes included. The panel itself
+lives in a shadow root and is styled by the very variables it edits. Click the toolbar
+button again — or the panel's ✕ — to restore the site untouched.
+
+Next to the panel: a button to download the theme as a `globals.css` snippet, and one to
+copy a self-contained `npx shadcn add` command with the theme embedded.
 
-Click it on a shadcn site (try [ui.shadcn.com/create](https://ui.shadcn.com/create)): the panel mounts bottom-right and every tweak re-themes the page live, by forcing the [shadcn variables](https://ui.shadcn.com/docs/theming#list-of-variables) (same mapping as `toShadcn()`) on the page — same-origin preview iframes included. The panel itself lives in a shadow root and is styled by the very variables it edits. Click the bookmarklet again — or its ✕ button — to restore the site untouched.
+The extension asks for `activeTab` and nothing else: it can't see any page until you click
+its button, and it sends nothing anywhere. Source and build in
+[`chrome-extension/`](chrome-extension/).
 
 ## Tailwind
 
diff --git a/chrome-extension/README.md b/chrome-extension/README.md
new file mode 100644
index 00000000..8f089fd5
--- /dev/null
+++ b/chrome-extension/README.md
@@ -0,0 +1,99 @@
+# Chrome extension
+
+`ThemePanel` on any shadcn site, from the toolbar. See the
+[main README](../README.md#chrome-extension) for what it does and how to install a build.
+
+## Layout
+
+| File                 | What                                                                                      |
+| -------------------- | ----------------------------------------------------------------------------------------- |
+| `manifest.config.ts` | The MV3 manifest, built by CRXJS. Version tracks `package.json`.                          |
+| `src/background.ts`  | Service worker. The toolbar button, the badge, and injecting the panel the first time.    |
+| `src/content.tsx`    | The panel itself, in a shadow root. Injected on demand, never a declared content script.  |
+| `src/content.css`    | Tailwind for the shadow root, imported `?inline` (a string) so it never reaches the page. |
+| `src/messages.ts`    | The two messages crossing between the two.                                                |
+| `icons/`             | Generated — `node scripts/make-extension-icons.mjs` (needs ImageMagick).                  |
+
+## Develop
+
+```sh
+pnpm dev-extension
+```
+
+Vite writes `chrome-extension/dist/` and keeps it live: load that folder once via
+`chrome://extensions` → Developer mode → **Load unpacked**, and edits to `content.tsx` (or
+anything under `src/` it imports) hot-reload in the page with the panel open.
+
+Two things are not HMR: `content.css` and the manifest. Both trigger a rebuild, but you
+have to close and reopen the panel to see the CSS change, and reload the extension for a
+manifest change.
+
+## Build & package
+
+```sh
+pnpm build-extension   # -> chrome-extension/dist/
+pnpm zip-extension     # -> chrome-extension/material-theme-builder-chrome.zip
+```
+
+CI attaches that zip to every GitHub release, and uploads it to the Chrome Web Store when
+the store credentials are configured (see below).
+
+## Publishing to the Chrome Web Store
+
+One-time setup, all of it outside this repo:
+
+1. Register a developer account (one-off $5 fee) at the
+   [Developer Dashboard](https://chrome.google.com/webstore/devconsole).
+2. Upload `material-theme-builder-chrome.zip` by hand once — the API can only update an
+   item that already exists. Fill in the listing (copy below), submit for review.
+3. Enable the Chrome Web Store API in a Google Cloud project, create an OAuth client
+   (type: Desktop), and mint a refresh token — see
+   [the official guide](https://developer.chrome.com/docs/webstore/using-api).
+4. Add to the repo: variable `CHROME_EXTENSION_ID`, secrets `CHROME_CLIENT_ID`,
+   `CHROME_CLIENT_SECRET`, `CHROME_REFRESH_TOKEN`.
+
+With those set, `.github/workflows/ci.yml` uploads and publishes a new version on every
+release. Without them the job is skipped, and only the GitHub release zip is produced.
+
+### Listing
+
+**Category** Developer Tools — **Language** English
+
+**Short description** (132 char max)
+
+> Rebuild any shadcn site's theme from a single source color, the Material You way — live, on the page.
+
+**Detailed description**
+
+> Material Theme Builder brings Google's Material You color system to shadcn/ui.
+>
+> Open it on any shadcn-based site and the page's theme is regenerated from a single source
+> color: pick a color, a scheme (tonal spot, vibrant, expressive, …) and a contrast level,
+> and every shadcn variable on the page updates live — light and dark mode, same-origin
+> preview iframes included.
+>
+> When you like what you see, download the theme as a `globals.css` snippet, or copy a
+> one-line `npx shadcn add` command with the theme embedded — nothing to host first. Close
+> the panel and the site is exactly as you found it.
+>
+> The same color engine is available as an npm package, a CLI and a Figma plugin:
+> https://github.com/abernier/material-theme-builder
+>
+> Open source, MIT.
+
+**Permission justifications**
+
+- `activeTab` — the panel is injected into the page you are on, and only when you click the
+  toolbar button. This is what lets the extension read that page's shadcn variables and
+  restyle it.
+- `scripting` — required to perform that injection.
+- `clipboardWrite` — the panel's "copy install command" button writes an `npx shadcn add`
+  line to the clipboard.
+- No host permissions, no remote code, no network requests, no analytics. Nothing leaves
+  your browser.
+
+**Privacy** Single purpose: preview a Material You color theme on the current page. The
+extension collects and transmits no user data.
+
+**Screenshots** (1280×800 or 640×400, at least one) — the panel open on
+`ui.shadcn.com/create`, collapsed and expanded, in light and dark mode.
diff --git a/chrome-extension/icons/icon-128.png b/chrome-extension/icons/icon-128.png
new file mode 100644
index 0000000000000000000000000000000000000000..52f04ae396da09b783d0874f87abd2347859c4e1
GIT binary patch
literal 11891
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
Ci?Nje

literal 0
HcmV?d00001

diff --git a/chrome-extension/icons/icon-16.png b/chrome-extension/icons/icon-16.png
new file mode 100644
index 0000000000000000000000000000000000000000..b451fce593e912ce8d7b4c0cb93461b8eec81e9b
GIT binary patch
literal 1614
zcmZ{ke>l?#9LK*g^K&9U)@`!F*!i(WnvB-8VN>QevlR1d@#HMG5#vxJv>TmaB_%3O
z>dddSIzOUqREKc-A^CO9DTF#*q}$y+&pppQ&)w(qd_J$w^Z7jQ=l$O&-<RqM(Sm6K
z005zoN&ZUe{aJcoW%r3PH&bGJ6xrV!0MaZ0Ad3e8AC;@DSpeW*0AMZx0B|AzfU+(~
z{9Kg>aO43`l9I~!op>ix2~8F`^lK#ve^n$g>X33!XH&f0)#o%oV1!j|PkxDVg=D+a
z*wGAj3@$1uMhU<H<AAlp?6Jc*24b+dUG}(LPBs_}4uiq#<$nH`AR#e2E;jZ51wP(*
zqEdkR$AKM}5c4&gk-+*7jq~3oWM*_10H}RIA-M&TWf>)0-$0I`tV1z=I0EK=5t>S>
zBxqT}j6P@}!S(?j-)#at>J=~D&oVGLSWpa!pUe8;q+gs6^sR5Vp;q?sbUhb83)^K|
zJtJBtl(81^BR4T~9gPxQ%*3ap^zT)ytyL_ZL!$h`>Idb^a;v*l1C;{>T~>M2!BGNB
zNZCCW)jnfmVrR#;u@2sr*gyMlQ8N0XU$Ok4EhT=Q_D!|=bn(ho_yuZ+pE$$CVx&##
z*ed3trY+5*>Ww)^L9WorEy)1|BlM?k#xs{1N`HGCtV7dfm}Om8729^0<u6SbNk8Uz
zW%Q142CE((WYvA%w{&oyG>j=tWqKlYqeOA1w0V;%V<ekrGad(Xfqmup*-f3hbC5qc
z%i0LH&kDJG=mk$+trTnOeEepmBVJW=OEl0W(u^lpk(L21YJlmy%x#{uo(<^aSCqmZ
zzw~bpfnN>SYR7*`p-Vj8Pp0KH5Z=K8=d7L9S-Mdzxk7!^u5lxITTAj4`-Cee2A&2H
z%Rk@1ax!<c2sy2<lT`RKWSsRGy*3rJpq#nwp4Cd%*jh{Ra|LJ52B*$?LsI@K{e25B
z3|(@jTG+oz;A!~1kk6IbROjD9siYgacc3)!g-h620P<yF;cLV>iGgWz@R(!(+K4}E
zTm-3evSXyy)hviRRkR7J!yXwWr&f1wE`3o}T-}GWPT5GeG#7+X-1kq#%8Pcub(_k9
z6DOV!-zItV5Brr%SvLt?`K1LvQD2CGPuj3@&*v)>U8;@SJJ3FY1_P4{CoOLT;+nBU
zzWc(!ls<Tg99~I7pR;c~qCde6dD^<om#C%#^*V6Xe0Bskc(|^rUSm@2+mgZT5LBVY
zS(7Ufy~y-O!<2DKfY-;DB`Y(<AA&<1lHnPztW`d6`fbfNB{jKvQhU%3h;78I3eM~k
zs3%;o8I~c*ahdg3gqG3OLNAe!?5#y>J^N%O6kpIg+n6S?NtU?@P=16{_R)LhZn6Pn
zRxSLsj^>st3Xpsnlvl4y7?Ph|hrPOWWA4e=xYK3$!rRJ_!}|$u@@&(F_OPdP)8e<y
zy5K-C+Q}SRc7l9yEn|D^+vUC$scCh`1}z9-)*vbk`Ay(>Vxi{^*Jx}~w@~2fRlOaJ
zv+C{r89h9Cy4K=-7)L-)47ad);4;(SLlZG_e~(8gV2Y}2ZuR0oiL40{V9gvxB+y4q
zHNsZc?dtF=du0pvzAC%J(7b5b8*Lwploi8oA0JvBF$dclhC}nnq{r&d=#PtXo7I9@
zr{Jj;KR5H5P2&nGrWTE6^cT+k=%xr!%saM#S@mL{<l4AnP4!K}1Khq=-$<$8u8lWv
z<C?R@!wp|V?1$kK%QE<K=xxKGBNgndcG6t&7fIO0rJ&=mpsMe_**h5RqD-zh(>S~b
zy2NS24!aJo7k2YpB1=Wcn+02Hg<iid=l-fU0b;H>zNyi9mQeIdh5z^LcLu7L`mP5~
z)>!$zn`aMQ1v=liK8UZu5^lAJOIE!DcV6p;jytQ|p%>O%+ttlyd|Ex~rhT5Hh~Vji
z#gL7+GB`TBA;<36yta(qUD?JQ)oSM*>Ro(38si{3bb7ictw2Ea*}3y{q?CCK42V7(
zPq&8hFAoX#Qtuxi25#`1Q~6IJ{QHN5FB4Ju*lNqP+eMVV^SMk153D`)aAz$YKNT;%
s&fv!&?2{FR0Y?M;8&eji?qfcw4~`*liC5KPl#dmlxKl|t_eY%k1K(@L82|tP

literal 0
HcmV?d00001

diff --git a/chrome-extension/icons/icon-32.png b/chrome-extension/icons/icon-32.png
new file mode 100644
index 0000000000000000000000000000000000000000..e4f467d81d75d52adcf7c1aed057297b10b8355b
GIT binary patch
literal 3313
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
OfF?p$^__}6_J06c;vhr-

literal 0
HcmV?d00001

diff --git a/chrome-extension/icons/icon-48.png b/chrome-extension/icons/icon-48.png
new file mode 100644
index 0000000000000000000000000000000000000000..edfed4ce791378f376aba637b6594f7e2c5eeadb
GIT binary patch
literal 4788
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

literal 0
HcmV?d00001

diff --git a/chrome-extension/icons/icon.svg b/chrome-extension/icons/icon.svg
new file mode 100644
index 00000000..4013ce1e
--- /dev/null
+++ b/chrome-extension/icons/icon.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128">
+  <path fill="#194683" d="M64.00 4.00 A60 60 0 0 1 115.96 94.00 L98.64 84.00 A40 40 0 0 0 64.00 24.00 Z" />
+  <path fill="#5177B8" d="M115.96 94.00 A60 60 0 0 1 12.04 94.00 L29.36 84.00 A40 40 0 0 0 98.64 84.00 Z" />
+  <path fill="#AAC7FF" d="M12.04 94.00 A60 60 0 0 1 64.00 4.00 L64.00 24.00 A40 40 0 0 0 29.36 84.00 Z" />
+  <circle cx="64" cy="64" r="30" fill="#769CDF" />
+</svg>
diff --git a/chrome-extension/manifest.config.ts b/chrome-extension/manifest.config.ts
new file mode 100644
index 00000000..ebf64f98
--- /dev/null
+++ b/chrome-extension/manifest.config.ts
@@ -0,0 +1,47 @@
+import { defineManifest } from "@crxjs/vite-plugin";
+
+import pkg from "../package.json" with { type: "json" };
+
+/*
+ * MV3 manifest. Built by CRXJS from this object rather than a static
+ * manifest.json so the version tracks the npm package's — CI publishes the
+ * extension off the same changesets version bump as the Figma plugin.
+ *
+ * No `content_scripts` entry on purpose: the panel is a React bundle, and
+ * declaring it here would load it into every page the user visits. It is
+ * injected on demand instead (see src/background.ts), which is also what
+ * lets the extension get by on `activeTab` — no host permissions, no
+ * access to anything until the toolbar button is clicked.
+ */
+export default defineManifest({
+  manifest_version: 3,
+  name: "Material Theme Builder",
+  description:
+    "Rebuild any shadcn site's theme from a single source color, the Material You way — live, on the page.",
+  version: pkg.version,
+  // None of the three carries a user-facing warning. `activeTab` is the
+  // reason there are no `host_permissions`: it grants access to one tab,
+  // on click, and expires. `clipboardWrite` is for the panel's copy-install-
+  // command button — the async Clipboard API is unreliable from an isolated
+  // world without it.
+  permissions: ["scripting", "activeTab", "clipboardWrite"],
+  background: {
+    service_worker: "src/background.ts",
+    type: "module",
+  },
+  action: {
+    default_title: "Material Theme Builder",
+    default_icon: {
+      "16": "icons/icon-16.png",
+      "32": "icons/icon-32.png",
+      "48": "icons/icon-48.png",
+      "128": "icons/icon-128.png",
+    },
+  },
+  icons: {
+    "16": "icons/icon-16.png",
+    "32": "icons/icon-32.png",
+    "48": "icons/icon-48.png",
+    "128": "icons/icon-128.png",
+  },
+});
diff --git a/chrome-extension/src/background.ts b/chrome-extension/src/background.ts
new file mode 100644
index 00000000..1a2ea28a
--- /dev/null
+++ b/chrome-extension/src/background.ts
@@ -0,0 +1,62 @@
+/*
+ * MV3 service worker — the toolbar button, and nothing else.
+ *
+ * Clicking it toggles the panel on the active tab. The panel is not a
+ * declared content script (see manifest.config.ts): it is injected the
+ * first time, then driven by messages.
+ *
+ * Injection is not the toggle. `executeScript` re-runs the loader file, but
+ * the module it dynamic-imports stays cached in that tab's isolated world,
+ * so a second click would be a no-op. The live instance toggles itself
+ * instead, and a failed ping is what tells us there is no instance yet.
+ */
+
+// CRXJS emits a loader for this entry and hands back its filename — HMR
+// included, so editing the panel updates it in place. Swap for `?iife` if a
+// page's CSP ever rejects the loader's dynamic import.
+import contentScript from "./content?script";
+
+import {
+  PANEL_CLOSED,
+  PANEL_TOGGLE,
+  type PanelMessage,
+  type PanelState,
+} from "./messages";
+
+const BADGE_TEXT = "ON";
+
+async function toggle(tabId: number) {
+  const state: PanelState | undefined = await chrome.tabs
+    .sendMessage(tabId, { type: PANEL_TOGGLE })
+    .catch(() => undefined);
+
+  if (state) return setBadge(tabId, state.open);
+
+  await chrome.scripting.executeScript({
+    target: { tabId },
+    files: [contentScript],
+  });
+  setBadge(tabId, true);
+}
+
+function setBadge(tabId: number, open: boolean) {
+  void chrome.action.setBadgeText({ tabId, text: open ? BADGE_TEXT : "" });
+}
+
+chrome.action.onClicked.addListener((tab) => {
+  if (tab.id !== undefined) void toggle(tab.id);
+});
+
+// The ✕ button closes the panel without going through us.
+chrome.runtime.onMessage.addListener((message, sender) => {
+  const tabId = sender.tab?.id;
+  if (tabId !== undefined && (message as PanelMessage).type === PANEL_CLOSED) {
+    setBadge(tabId, false);
+  }
+});
+
+// A navigation takes the panel with it; the badge is per-tab and would
+// otherwise outlive it.
+chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
+  if (changeInfo.status === "loading") setBadge(tabId, false);
+});
diff --git a/src/bookmarklet.css b/chrome-extension/src/content.css
similarity index 79%
rename from src/bookmarklet.css
rename to chrome-extension/src/content.css
index 0aa93771..de733587 100644
--- a/src/bookmarklet.css
+++ b/chrome-extension/src/content.css
@@ -1,7 +1,7 @@
 /*
- * Stylesheet for the bookmarklet's shadow root — compiled by Tailwind at
- * build time (see tsup.config.ts) and injected as a <style> inside the
- * shadow DOM, never into the host page.
+ * Stylesheet for the panel's shadow root — compiled by Tailwind at build
+ * time and imported by content.tsx as a string (`?inline`), then injected
+ * as a <style> inside the shadow DOM, never into the host page.
  *
  * Scans only the files the panel actually renders (source(none) + explicit
  * @source), so the host page's own markup never inflates the bundle.
@@ -20,13 +20,13 @@
 @import "tailwindcss" source(none);
 @import "tw-animate-css";
 
-@source "./ThemePanel.tsx";
-@source "./bookmarklet.tsx";
-@source "./components/ui/button.tsx";
-@source "./components/ui/button-group.tsx";
-@source "./components/ui/popover.tsx";
-@source "./components/ui/separator.tsx";
-@source "./components/ui/tooltip.tsx";
+@source "./content.tsx";
+@source "../../src/ThemePanel.tsx";
+@source "../../src/components/ui/button.tsx";
+@source "../../src/components/ui/button-group.tsx";
+@source "../../src/components/ui/popover.tsx";
+@source "../../src/components/ui/separator.tsx";
+@source "../../src/components/ui/tooltip.tsx";
 
 @custom-variant dark (&:is(.dark *));
 
diff --git a/src/bookmarklet.tsx b/chrome-extension/src/content.tsx
similarity index 84%
rename from src/bookmarklet.tsx
rename to chrome-extension/src/content.tsx
index e083a153..bb7d1d02 100644
--- a/src/bookmarklet.tsx
+++ b/chrome-extension/src/content.tsx
@@ -1,7 +1,10 @@
 /*
- * Bookmarklet entry — a self-contained IIFE (React bundled, see
- * tsup.config.ts) that mounts <ThemePanel> on any shadcn site and applies
- * the tweaked theme to the page as forced shadcn variables.
+ * Content script — mounts <ThemePanel> on any shadcn site and applies the
+ * tweaked theme to the page as forced shadcn variables.
+ *
+ * Injected on demand by the service worker (src/background.ts), never
+ * declared in the manifest: React on every page the user browses would be
+ * a poor trade for a panel they open now and then.
  *
  * The panel lives in a shadow root: its Tailwind styles (preflight
  * included) stay confined there, and the host page's styles can't reach
@@ -13,31 +16,39 @@ import { ArrowDownToLine, Check, Info, Terminal, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { createRoot, type Root } from "react-dom/client";
 
-// Compiled by Tailwind at build time and inlined as a string (tsup plugin).
-import cssText from "./bookmarklet.css?raw";
+// `?inline` (not `?raw`): Vite runs the file through Tailwind first and
+// hands back the compiled CSS as a string, which goes into the shadow root.
+import cssText from "./content.css?inline";
 
-import { Button } from "./components/ui/button";
-import { ButtonGroup } from "./components/ui/button-group";
+import { Button } from "@/components/ui/button";
+import { ButtonGroup } from "@/components/ui/button-group";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "./components/ui/popover";
+} from "@/components/ui/popover";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "./components/ui/tooltip";
-import { Flowfield, type Peak } from "./Flowfield";
-import { PortalContainerContext } from "./lib/bookmarklet.portalContainer";
-import { shadcnStyleSheet } from "./lib/bookmarklet.shadcnStyle";
-import { builder, type MtbConfig } from "./lib/builder";
-import { Mtb } from "./Mtb";
-import { useMtb } from "./Mtb.context";
-import { ThemePanel } from "./ThemePanel";
-
-const HOST_ID = "mtb-bookmarklet";
+} from "@/components/ui/tooltip";
+import { Flowfield, type Peak } from "@/Flowfield";
+import { builder, type MtbConfig } from "@/lib/builder";
+import { PortalContainerContext } from "@/lib/extension.portalContainer";
+import { shadcnStyleSheet } from "@/lib/extension.shadcnStyle";
+import { Mtb } from "@/Mtb";
+import { useMtb } from "@/Mtb.context";
+import { ThemePanel } from "@/ThemePanel";
+
+import {
+  PANEL_CLOSED,
+  PANEL_TOGGLE,
+  type PanelMessage,
+  type PanelState,
+} from "./messages";
+
+const HOST_ID = "mtb-panel";
 const STYLE_ID = "mtb-shadcn";
 const FALLBACK_SOURCE = "#769CDF";
 
@@ -222,7 +233,7 @@ function InfoPopover() {
           <p className="text-xs text-muted-foreground">
             Rebuilds this page's shadcn theme from a single source color, the
             Material&nbsp;You way. Tweak it, grab the CSS or the install
-            command, close to restore the site.
+            command, close to restore the site untouched.
           </p>
           <a
             href={REPO_URL}
@@ -406,9 +417,14 @@ function open() {
     root = null;
     host.remove();
     removeInjectedStyles();
+    // The ✕ button closes without the service worker's knowledge; its badge
+    // would otherwise still read ON.
+    void chrome.runtime
+      .sendMessage({ type: PANEL_CLOSED } satisfies PanelMessage)
+      .catch(() => {});
   };
-  // Stashed on the element so a later load of this script (fresh module
-  // scope) can tear this instance down — that's what makes it a toggle.
+  // Stashed on the element so the toggle below needs no module state of its
+  // own — and keeps working even if this script is ever executed twice.
   host.__mtbCleanup = close;
 
   root.render(
@@ -420,9 +436,23 @@ function open() {
   );
 }
 
-const existing = document.getElementById(HOST_ID) as MtbHost | null;
-if (existing) {
-  existing.__mtbCleanup?.();
-} else {
+/** Opens the panel, or tears down the one already on the page. */
+function toggle(): PanelState {
+  const existing = document.getElementById(HOST_ID) as MtbHost | null;
+  if (existing) {
+    existing.__mtbCleanup?.();
+    return { open: false };
+  }
   open();
+  return { open: true };
 }
+
+// Injection is a one-off: every later click on the toolbar button arrives
+// here as a message, because re-running this file would not re-run this
+// module (see src/background.ts).
+chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+  if ((message as PanelMessage).type !== PANEL_TOGGLE) return;
+  sendResponse(toggle());
+});
+
+toggle();
diff --git a/chrome-extension/src/messages.ts b/chrome-extension/src/messages.ts
new file mode 100644
index 00000000..64b58400
--- /dev/null
+++ b/chrome-extension/src/messages.ts
@@ -0,0 +1,17 @@
+/*
+ * The two messages crossing between the service worker and the injected
+ * panel. Shared so a rename can't drift one side out of sync with the other.
+ */
+
+/** Service worker → panel. Answered with a {@link PanelState}. */
+export const PANEL_TOGGLE = "mtb:toggle";
+
+/** Panel → service worker, when it closes itself (the ✕ button). */
+export const PANEL_CLOSED = "mtb:closed";
+
+export type PanelMessage =
+  | { type: typeof PANEL_TOGGLE }
+  | { type: typeof PANEL_CLOSED };
+
+/** What the panel answers a {@link PANEL_TOGGLE} with. */
+export type PanelState = { open: boolean };
diff --git a/chrome-extension/src/vite-env.d.ts b/chrome-extension/src/vite-env.d.ts
new file mode 100644
index 00000000..b5f1ac65
--- /dev/null
+++ b/chrome-extension/src/vite-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+/// <reference types="chrome" />
+
+// `?script` and friends — CRXJS hands back the built filename, which the
+// service worker feeds to chrome.scripting.executeScript().
+/// <reference types="@crxjs/vite-plugin/client" />
diff --git a/chrome-extension/vite.config.ts b/chrome-extension/vite.config.ts
new file mode 100644
index 00000000..b3995a5b
--- /dev/null
+++ b/chrome-extension/vite.config.ts
@@ -0,0 +1,30 @@
+import { crx } from "@crxjs/vite-plugin";
+import react from "@vitejs/plugin-react";
+import { resolve } from "node:path";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+import manifest from "./manifest.config";
+
+const dir = import.meta.dirname;
+const repo = resolve(dir, "..");
+
+export default defineConfig({
+  // Not the cwd: this config is run from the repo root
+  // (`vite build --config chrome-extension/vite.config.ts`).
+  root: dir,
+  plugins: [
+    react(),
+    crx({ manifest }),
+    // The panel is `src/` code — @/ThemePanel, @/Mtb, @/components/ui/*.
+    tsconfigPaths({ root: repo }),
+  ],
+  // The repo's postcss.config.js (@tailwindcss/postcss), pinned rather than
+  // discovered: Vite would search upward from `root` and find it anyway, but
+  // only by walking out of this directory.
+  css: { postcss: repo },
+  build: {
+    outDir: resolve(dir, "dist"),
+    emptyOutDir: true,
+  },
+});
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 73d3f657..e5841804 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -4,11 +4,15 @@ import sonarjs from "eslint-plugin-sonarjs";
 import { defineConfig } from "eslint/config";
 import tseslint from "typescript-eslint";
 
-const SOURCE_FILES = ["src/**/*.{ts,tsx}", ".storybook/**/*.{ts,tsx}"];
+const SOURCE_FILES = [
+  "src/**/*.{ts,tsx}",
+  "chrome-extension/**/*.{ts,tsx}",
+  ".storybook/**/*.{ts,tsx}",
+];
 
 export default defineConfig([
   {
-    ignores: ["dist/**", "storybook-static/**", "node_modules/**"],
+    ignores: ["**/dist/**", "storybook-static/**", "node_modules/**"],
   },
   {
     ...reactHooks.configs.flat.recommended,
diff --git a/package.json b/package.json
index c5270415..70998eb2 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "@arethetypeswrong/cli": "^0.18.2",
     "@changesets/cli": "^2.27.7",
     "@chromatic-com/storybook": "^5.0.0",
+    "@crxjs/vite-plugin": "^2.7.1",
     "@eslint/js": "^10.0.1",
     "@figma/plugin-typings": "^1.123.0",
     "@storybook/addon-docs": "^10.1.11",
@@ -50,6 +51,7 @@
     "@tailwindcss/postcss": "^4.1.18",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.1",
+    "@types/chrome": "^0.2.5",
     "@types/culori": "^4.0.1",
     "@types/d3": "^7.4.3",
     "@types/lodash-es": "^4.17.12",
@@ -99,7 +101,7 @@
   "scripts": {
     "build": "tsup",
     "lint": "eslint .",
-    "lgtm": "pnpm run build && pnpm run build-figma && pnpm run lint && pnpm run check-format && pnpm run check-exports && pnpm run typecheck && pnpm run test",
+    "lgtm": "pnpm run build && pnpm run build-figma && pnpm run build-extension && pnpm run lint && pnpm run check-format && pnpm run check-exports && pnpm run typecheck && pnpm run test",
     "typecheck": "tsc",
     "test": "vitest run",
     "pretest": "bash scripts/download-dtcg-schemas.sh",
@@ -111,6 +113,9 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "build-figma": "vite build --config figma-plugin/vite.config.ts && tsup --config figma-plugin/tsup.config.ts",
+    "build-extension": "vite build --config chrome-extension/vite.config.ts",
+    "dev-extension": "vite --config chrome-extension/vite.config.ts",
+    "zip-extension": "pnpm run build-extension && rm -f chrome-extension/material-theme-builder-chrome.zip && cd chrome-extension/dist && zip -qr ../material-theme-builder-chrome.zip . -x '*.DS_Store'",
     "chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN",
     "prepare": "pnpm run pretest && husky",
     "changeset": "pnpm exec changeset",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3b96f8e0..a3dee351 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -33,6 +33,9 @@ importers:
       '@chromatic-com/storybook':
         specifier: ^5.0.0
         version: 5.0.1(storybook@10.2.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
+      '@crxjs/vite-plugin':
+        specifier: ^2.7.1
+        version: 2.7.1(vite@7.3.1(@types/node@25.3.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))
       '@eslint/js':
         specifier: ^10.0.1
         version: 10.0.1(eslint@10.0.2(jiti@2.6.1))
@@ -57,6 +60,9 @@ importers:
       '@testing-library/react':
         specifier: ^16.3.1
         version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@types/chrome':
+        specifier: ^0.2.5
+        version: 0.2.5
       '@types/culori':
         specifier: ^4.0.1
         version: 4.0.1
@@ -508,6 +514,11 @@ packages:
     resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
     engines: {node: '>=0.1.90'}
 
+  '@crxjs/vite-plugin@2.7.1':
+    resolution: {integrity: sha512-mn77Lc1ilIvbO7ZqijjNy+AnRgc8srkfHOtV6HrGrYZgRe8YI3aIcSjHJCU5Kq75SejEZGrdAoHdn3gBGeKpEA==}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+
   '@csstools/color-helpers@6.0.1':
     resolution: {integrity: sha512-NmXRccUJMk2AWA5A7e5a//3bCIMyOu2hAtdRYrhPPHjDxINuCwX1w6rnIZ4xjLcp0ayv6h8Pc3X0eJUGiAAXHQ==}
     engines: {node: '>=20.19.0'}
@@ -2302,6 +2313,9 @@ packages:
   '@types/chai@5.2.3':
     resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
 
+  '@types/chrome@0.2.5':
+    resolution: {integrity: sha512-DwLFgwj3D0zjxRBhQ3610RBso2g+yI1cakq/JdIGopZ9Bc5UhQluyfcLGZwivFE4t2h4b2QZYZhPV7KylExSbA==}
+
   '@types/culori@4.0.1':
     resolution: {integrity: sha512-43M51r/22CjhbOXyGT361GZ9vncSVQ39u62x5eJdBQFviI8zWp2X5jzqg7k4M6PVgDQAClpy2bUe2dtwEgEDVQ==}
 
@@ -2410,9 +2424,18 @@ packages:
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
+  '@types/filesystem@0.0.36':
+    resolution: {integrity: sha512-vPDXOZuannb9FZdxgHnqSwAG/jvdGM8Wq+6N4D/d80z+D4HWH+bItqsZaVRQykAn6WEVeEkLm2oQigyHtgb0RA==}
+
+  '@types/filewriter@0.0.33':
+    resolution: {integrity: sha512-xFU8ZXTw4gd358lb2jw25nxY9QAgqn2+bKKjKOYfNCzN4DKCFetK7sPtrlpg66Ywe3vWY9FNxprZawAh9wfJ3g==}
+
   '@types/geojson@7946.0.16':
     resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
 
+  '@types/har-format@1.2.16':
+    resolution: {integrity: sha512-fluxdy7ryD3MV6h8pTfTYpy/xQzCFC7m89nOH9y94cNqJ1mDIDPut7MnRHI3F6qRmh/cT2fUjG1MLdCNb4hE9A==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -2557,6 +2580,9 @@ packages:
   '@vitest/utils@4.0.18':
     resolution: {integrity: sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA==}
 
+  '@webcomponents/custom-elements@1.6.0':
+    resolution: {integrity: sha512-CqTpxOlUCPWRNUPZDxT5v2NnHXA4oox612iUGnmTUGQFhZ1Gkj8kirtl/2wcF6MqX7+PqqicZzOCBKKfIn0dww==}
+
   accepts@2.0.0:
     resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
     engines: {node: '>= 0.6'}
@@ -2566,6 +2592,10 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
+  acorn-walk@8.3.5:
+    resolution: {integrity: sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw==}
+    engines: {node: '>=0.4.0'}
+
   acorn@8.16.0:
     resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
     engines: {node: '>=0.4.0'}
@@ -2676,6 +2706,9 @@ packages:
     resolution: {integrity: sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==}
     engines: {node: '>=18'}
 
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+
   brace-expansion@5.0.3:
     resolution: {integrity: sha512-fy6KJm2RawA5RcHkLa1z/ScpBeA762UF9KmZQxwIbDtRJrgLzM10depAiEQ+CXYcoiqW1/m96OAAoke2nE9EeA==}
     engines: {node: 18 || 20 || >=22}
@@ -2920,10 +2953,17 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
+
   css-tree@3.1.0:
     resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
 
+  css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
+
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
@@ -3161,6 +3201,19 @@ packages:
   dom-accessibility-api@0.6.3:
     resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
 
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
   dotenv@17.3.1:
     resolution: {integrity: sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==}
     engines: {node: '>=12'}
@@ -3204,6 +3257,10 @@ packages:
     resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
     engines: {node: '>=8.6'}
 
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
   entities@6.0.1:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
@@ -3227,6 +3284,9 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
+  es-module-lexer@0.10.5:
+    resolution: {integrity: sha512-+7IwY/kiGAacQfY+YBhKMvEmyAJnw5grTUgjG85Pe7vcUI/6b7pZjZG8nQ7+48YhzEAEqrEgD2dCz/JIK+AYvw==}
+
   es-module-lexer@1.7.0:
     resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
 
@@ -3454,6 +3514,10 @@ packages:
     resolution: {integrity: sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==}
     engines: {node: '>=14.14'}
 
+  fs-extra@11.4.0:
+    resolution: {integrity: sha512-EQsFzMUJkCKGr1ePqlYADkIUmHW1s3ZXr5Yqy6wbGrfUCphpl2maM/kyOIRA2HpP3AaFQTZXD4ldjek+nccddA==}
+    engines: {node: '>=14.14'}
+
   fs-extra@7.0.1:
     resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
     engines: {node: '>=6 <7 || >=8'}
@@ -3564,6 +3628,10 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+
   headers-polyfill@4.0.3:
     resolution: {integrity: sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==}
 
@@ -4120,6 +4188,9 @@ packages:
     resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  node-html-parser@7.1.0:
+    resolution: {integrity: sha512-iJo8b2uYGT40Y8BTyy5ufL6IVbN8rbm/1QK2xffXU/1a/v3AAa0d1YAoqBNYqaS4R/HajkWIpIfdE6KcyFh1AQ==}
+
   node-releases@2.0.27:
     resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
 
@@ -4131,6 +4202,9 @@ packages:
     resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
     engines: {node: '>=18'}
 
+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -4304,6 +4378,10 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  picomatch@4.0.5:
+    resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
+    engines: {node: '>=12'}
+
   pidtree@0.6.0:
     resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
     engines: {node: '>=0.10'}
@@ -4553,6 +4631,11 @@ packages:
   robust-predicates@3.0.2:
     resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
 
+  rollup@2.80.0:
+    resolution: {integrity: sha512-cIFJOD1DESzpjOBl763Kp1AH7UE/0fcdHe6rZXUdQ9c50uvgigvW97u3IcSeBwOkgqL/PXPBktBCh0KEu5L8XQ==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+
   rollup@4.55.1:
     resolution: {integrity: sha512-wDv/Ht1BNHB4upNbK74s9usvl7hObDnvVzknxqY/E/O3X6rW1U1rV1aENEfJ54eFZDTNo7zv1f5N4edCluH7+A==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -4577,6 +4660,9 @@ packages:
   rw@1.3.3:
     resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
 
+  rxjs@7.5.7:
+    resolution: {integrity: sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==}
+
   rxjs@7.8.2:
     resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
 
@@ -4849,6 +4935,10 @@ packages:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+
   tinyrainbow@2.0.0:
     resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
     engines: {node: '>=14.0.0'}
@@ -5835,6 +5925,26 @@ snapshots:
   '@colors/colors@1.5.0':
     optional: true
 
+  '@crxjs/vite-plugin@2.7.1(vite@7.3.1(@types/node@25.3.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))':
+    dependencies:
+      '@webcomponents/custom-elements': 1.6.0
+      acorn-walk: 8.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      es-module-lexer: 0.10.5
+      fs-extra: 11.4.0
+      jsesc: 3.1.0
+      magic-string: 0.30.21
+      node-html-parser: 7.1.0
+      pathe: 2.0.3
+      picocolors: 1.1.1
+      rollup: 2.80.0
+      rxjs: 7.5.7
+      tinyglobby: 0.2.17
+      vite: 7.3.1(@types/node@25.3.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - supports-color
+
   '@csstools/color-helpers@6.0.1': {}
 
   '@csstools/css-calc@3.1.1(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
@@ -7429,6 +7539,11 @@ snapshots:
       '@types/deep-eql': 4.0.2
       assertion-error: 2.0.1
 
+  '@types/chrome@0.2.5':
+    dependencies:
+      '@types/filesystem': 0.0.36
+      '@types/har-format': 1.2.16
+
   '@types/culori@4.0.1': {}
 
   '@types/d3-array@3.2.2': {}
@@ -7556,8 +7671,16 @@ snapshots:
 
   '@types/estree@1.0.8': {}
 
+  '@types/filesystem@0.0.36':
+    dependencies:
+      '@types/filewriter': 0.0.33
+
+  '@types/filewriter@0.0.33': {}
+
   '@types/geojson@7946.0.16': {}
 
+  '@types/har-format@1.2.16': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/lodash-es@4.17.12':
@@ -7756,6 +7879,8 @@ snapshots:
       '@vitest/pretty-format': 4.0.18
       tinyrainbow: 3.0.3
 
+  '@webcomponents/custom-elements@1.6.0': {}
+
   accepts@2.0.0:
     dependencies:
       mime-types: 3.0.2
@@ -7765,6 +7890,10 @@ snapshots:
     dependencies:
       acorn: 8.16.0
 
+  acorn-walk@8.3.5:
+    dependencies:
+      acorn: 8.16.0
+
   acorn@8.16.0: {}
 
   agent-base@7.1.4: {}
@@ -7861,6 +7990,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  boolbase@1.0.0: {}
+
   brace-expansion@5.0.3:
     dependencies:
       balanced-match: 4.0.4
@@ -8060,11 +8191,21 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css-select@5.2.2:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
   css-tree@3.1.0:
     dependencies:
       mdn-data: 2.12.2
       source-map-js: 1.2.1
 
+  css-what@6.2.2: {}
+
   css.escape@1.5.1: {}
 
   cssesc@3.0.0: {}
@@ -8292,6 +8433,24 @@ snapshots:
 
   dom-accessibility-api@0.6.3: {}
 
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  domelementtype@2.3.0: {}
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
   dotenv@17.3.1: {}
 
   dunder-proto@1.0.1:
@@ -8331,6 +8490,8 @@ snapshots:
       ansi-colors: 4.1.3
       strip-ansi: 6.0.1
 
+  entities@4.5.0: {}
+
   entities@6.0.1: {}
 
   env-paths@2.2.1: {}
@@ -8345,6 +8506,8 @@ snapshots:
 
   es-errors@1.3.0: {}
 
+  es-module-lexer@0.10.5: {}
+
   es-module-lexer@1.7.0: {}
 
   es-object-atoms@1.1.1:
@@ -8639,6 +8802,10 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.3
 
+  fdir@6.5.0(picomatch@4.0.5):
+    optionalDependencies:
+      picomatch: 4.0.5
+
   fetch-blob@3.2.0:
     dependencies:
       node-domexception: 1.0.0
@@ -8708,6 +8875,12 @@ snapshots:
       jsonfile: 6.2.0
       universalify: 2.0.1
 
+  fs-extra@11.4.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
   fs-extra@7.0.1:
     dependencies:
       graceful-fs: 4.2.11
@@ -8812,6 +8985,8 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  he@1.2.0: {}
+
   headers-polyfill@4.0.3: {}
 
   hermes-estree@0.25.1: {}
@@ -9286,6 +9461,11 @@ snapshots:
       fetch-blob: 3.2.0
       formdata-polyfill: 4.0.10
 
+  node-html-parser@7.1.0:
+    dependencies:
+      css-select: 5.2.2
+      he: 1.2.0
+
   node-releases@2.0.27: {}
 
   npm-run-path@4.0.1:
@@ -9297,6 +9477,10 @@ snapshots:
       path-key: 4.0.0
       unicorn-magic: 0.3.0
 
+  nth-check@2.1.1:
+    dependencies:
+      boolbase: 1.0.0
+
   object-assign@4.1.1: {}
 
   object-deep-merge@2.0.0: {}
@@ -9458,6 +9642,8 @@ snapshots:
 
   picomatch@4.0.3: {}
 
+  picomatch@4.0.5: {}
+
   pidtree@0.6.0: {}
 
   pify@4.0.1: {}
@@ -9727,6 +9913,10 @@ snapshots:
 
   robust-predicates@3.0.2: {}
 
+  rollup@2.80.0:
+    optionalDependencies:
+      fsevents: 2.3.3
+
   rollup@4.55.1:
     dependencies:
       '@types/estree': 1.0.8
@@ -9807,6 +9997,10 @@ snapshots:
 
   rw@1.3.3: {}
 
+  rxjs@7.5.7:
+    dependencies:
+      tslib: 2.8.1
+
   rxjs@7.8.2:
     dependencies:
       tslib: 2.8.1
@@ -10117,6 +10311,11 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
+  tinyglobby@0.2.17:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.5)
+      picomatch: 4.0.5
+
   tinyrainbow@2.0.0: {}
 
   tinyrainbow@3.0.3: {}
diff --git a/scripts/make-extension-icons.mjs b/scripts/make-extension-icons.mjs
new file mode 100644
index 00000000..154355d1
--- /dev/null
+++ b/scripts/make-extension-icons.mjs
@@ -0,0 +1,79 @@
+/*
+ * Draws the Chrome extension's icon and rasterizes it to the four sizes the
+ * manifest asks for.
+ *
+ * The mark is the tool in one shape: a solid seed disc, ringed by three
+ * tones the library derives from it. Both come out of `builder()` itself,
+ * so the icon can't drift from what the extension actually produces.
+ *
+ *   node scripts/make-extension-icons.mjs
+ *
+ * Needs ImageMagick (`brew install imagemagick`). Run it by hand — the
+ * output is committed, so neither the build nor CI depends on it.
+ */
+
+import { execFileSync } from "node:child_process";
+import { mkdirSync, writeFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { builder } from "../dist/index.js";
+
+const SEED = "#769CDF";
+const SIZES = [16, 32, 48, 128];
+const ICONS = resolve(dirname(fileURLToPath(import.meta.url)), "../chrome-extension/icons"); // prettier-ignore
+
+const { primary } = builder(SEED).toJson().palettes;
+
+const CX = 64;
+const CY = 64;
+const OUTER = 60;
+const INNER = 40;
+const SEED_RADIUS = 30;
+
+const point = (radius, deg) => {
+  const rad = ((deg - 90) * Math.PI) / 180;
+  return [CX + radius * Math.cos(rad), CY + radius * Math.sin(rad)].map((n) =>
+    n.toFixed(2),
+  );
+};
+
+// One 120° slice of the ring: out along the outer arc, back along the inner.
+const slice = (from, to, fill) => {
+  const [ax, ay] = point(OUTER, from);
+  const [bx, by] = point(OUTER, to);
+  const [cx, cy] = point(INNER, to);
+  const [dx, dy] = point(INNER, from);
+  return (
+    `  <path fill="${fill}" d="M${ax} ${ay} A${OUTER} ${OUTER} 0 0 1 ${bx} ${by} ` +
+    `L${cx} ${cy} A${INNER} ${INNER} 0 0 0 ${dx} ${dy} Z" />`
+  );
+};
+
+const svg = [
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128">',
+  slice(0, 120, primary[30]),
+  slice(120, 240, primary[50]),
+  slice(240, 360, primary[80]),
+  `  <circle cx="${CX}" cy="${CY}" r="${SEED_RADIUS}" fill="${SEED}" />`,
+  "</svg>",
+  "",
+].join("\n");
+
+mkdirSync(ICONS, { recursive: true });
+writeFileSync(resolve(ICONS, "icon.svg"), svg);
+
+for (const size of SIZES) {
+  execFileSync("magick", [
+    "-background",
+    "none",
+    "-density",
+    String(size * 4),
+    resolve(ICONS, "icon.svg"),
+    "-resize",
+    `${size}x${size}`,
+    resolve(ICONS, `icon-${size}.png`),
+  ]);
+}
+
+console.log(`Wrote icon.svg + ${SIZES.map((s) => `icon-${s}.png`).join(", ")}`);
diff --git a/src/Bookmarklet.stories.tsx b/src/Bookmarklet.stories.tsx
deleted file mode 100644
index cc0630b4..00000000
--- a/src/Bookmarklet.stories.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-/**
- * The `javascript:` snippet users paste (or drag) into their bookmarks bar.
- *
- * A bookmarklet URL can only hold a few KB, so it is a tiny loader: it
- * injects a `<script>` pointing at the self-contained IIFE bundle
- * (`dist/bookmarklet.global.js`, React included) served from jsDelivr.
- * Floating on the major (`@3`) keeps existing bookmarks up to date with
- * every release.
- *
- * NOT exported: Storybook treats every named export of a story file as a
- * story, and Chromatic chokes trying to hang `parameters` off a string.
- *
- * In dev the link targets the locally-built bundle, served by this very
- * Storybook (staticDirs) — run `pnpm build` to refresh it. The built
- * Storybook keeps the jsDelivr URL.
- */
-const BUNDLE_URL = import.meta.env.DEV
-  ? `${window.location.origin}/dist/bookmarklet.global.js`
-  : "https://cdn.jsdelivr.net/npm/material-theme-builder@3/dist/bookmarklet.global.js";
-
-// Dev only: cache-bust at CLICK time (Date.now() runs inside the
-// bookmarklet) — the ad-hoc dev server sends no Cache-Control, and
-// Chrome's heuristic caching would happily serve a stale bundle.
-const BOOKMARKLET_HREF = import.meta.env.DEV
-  ? `javascript:(()=>{var s=document.createElement("script");s.src="${BUNDLE_URL}?t="+Date.now();document.body.append(s)})()`
-  : `javascript:(()=>{var s=document.createElement("script");s.src="${BUNDLE_URL}";document.body.append(s)})()`;
-
-function BookmarkletLink() {
-  return (
-    <div className="prose p-8">
-      <h1>ThemePanel bookmarklet</h1>
-      <p>
-        Drag the link below to your bookmarks bar, then click it on any
-        shadcn-based site (try{" "}
-        <a href="https://ui.shadcn.com/create" target="_blank" rel="noreferrer">
-          ui.shadcn.com/create
-        </a>
-        ): the <code>ThemePanel</code> appears bottom-right and re-themes the
-        page live. Click the bookmarklet again — or the ✕ button — to restore
-        the site untouched.
-      </p>
-      <p>
-        {/* React refuses javascript: URLs in a JSX href (it swaps in a
-            thrower string), which is exactly what a bookmarklet is — so the
-            attribute is set imperatively, outside React's sanitizer. */}
-        <a
-          ref={(el) => el?.setAttribute("href", BOOKMARKLET_HREF)}
-          className="inline-block rounded-md border px-3 py-1.5 font-medium no-underline"
-          onClick={(e) => e.preventDefault()}
-        >
-          🎨 MTB ThemePanel
-        </a>
-      </p>
-      <p>
-        Bundle: <code>{BUNDLE_URL}</code>
-        {import.meta.env.DEV &&
-          " (local build — keep pnpm dev running and it recompiles on change)"}
-      </p>
-      <p>
-        (Clicking it here is a no-op — Storybook runs in an iframe. Drag it to
-        the bookmarks bar instead, or copy the snippet from the README.)
-      </p>
-    </div>
-  );
-}
-
-const meta = {
-  title: "Bookmarklet",
-  component: BookmarkletLink,
-} satisfies Meta<typeof BookmarkletLink>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
diff --git a/src/ThemePanel.tsx b/src/ThemePanel.tsx
index d5ed2452..8f0bd232 100644
--- a/src/ThemePanel.tsx
+++ b/src/ThemePanel.tsx
@@ -81,8 +81,8 @@ export function ThemePanel({
 }: {
   /**
    * Whether the expanded panel offers custom colors. Turn them off where
-   * they can't show up in the output — the bookmarklet, for one, only ever
-   * writes the core shadcn variables, which no custom color maps to.
+   * they can't show up in the output — the Chrome extension, for one, only
+   * ever writes the core shadcn variables, which no custom color maps to.
    */
   customColors?: boolean;
   /** Control scale — `"lg"` for an overlay meant to be hit on any page. */
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index 630c32a6..33e7ee7e 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -1,7 +1,7 @@
 import { Popover as PopoverPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { PortalContainerContext } from "@/lib/bookmarklet.portalContainer";
+import { PortalContainerContext } from "@/lib/extension.portalContainer";
 import { cn } from "@/lib/utils";
 
 function Popover({
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index 59bc66f0..30f617c7 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -1,7 +1,7 @@
 import { Tooltip as TooltipPrimitive } from "radix-ui";
 import * as React from "react";
 
-import { PortalContainerContext } from "@/lib/bookmarklet.portalContainer";
+import { PortalContainerContext } from "@/lib/extension.portalContainer";
 import { cn } from "@/lib/utils";
 
 function TooltipProvider({
diff --git a/src/lib/bookmarklet.portalContainer.ts b/src/lib/extension.portalContainer.ts
similarity index 81%
rename from src/lib/bookmarklet.portalContainer.ts
rename to src/lib/extension.portalContainer.ts
index 674778c4..00a1f8a4 100644
--- a/src/lib/bookmarklet.portalContainer.ts
+++ b/src/lib/extension.portalContainer.ts
@@ -4,7 +4,7 @@ import * as React from "react";
  * Where Radix portals — tooltips, popovers — land. `null`, the default,
  * leaves Radix its own default of `document.body`.
  *
- * The bookmarklet provides a node inside its shadow root instead: content
+ * The Chrome extension provides a node inside its shadow root instead: content
  * portalled to `document.body` would escape the shadow boundary and lose
  * every style.
  */
diff --git a/src/lib/bookmarklet.shadcnStyle.test.ts b/src/lib/extension.shadcnStyle.test.ts
similarity index 95%
rename from src/lib/bookmarklet.shadcnStyle.test.ts
rename to src/lib/extension.shadcnStyle.test.ts
index f9a7702b..9e21366e 100644
--- a/src/lib/bookmarklet.shadcnStyle.test.ts
+++ b/src/lib/extension.shadcnStyle.test.ts
@@ -1,8 +1,8 @@
 import { describe, expect, it } from "vitest";
 
-import { shadcnStyleSheet } from "./bookmarklet.shadcnStyle";
 import { builder } from "./builder";
 import { SHADCN_MAPPING } from "./builder.shadcn";
+import { shadcnStyleSheet } from "./extension.shadcnStyle";
 
 const SOURCE = "#6750A4";
 
diff --git a/src/lib/bookmarklet.shadcnStyle.ts b/src/lib/extension.shadcnStyle.ts
similarity index 100%
rename from src/lib/bookmarklet.shadcnStyle.ts
rename to src/lib/extension.shadcnStyle.ts
diff --git a/tsconfig.json b/tsconfig.json
index 80ee5af9..cecdff6f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,6 +25,6 @@
     "jsx": "react-jsx",
     "noEmit": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
+  "include": ["src/**/*", "chrome-extension/**/*"],
+  "exclude": ["node_modules", "**/dist"]
 }
diff --git a/tsup.config.ts b/tsup.config.ts
index 984aca8b..f37098d9 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -1,9 +1,4 @@
-import tailwindPostcss from "@tailwindcss/postcss";
-import type { Plugin } from "esbuild";
 import { copyFileSync } from "fs";
-import { readFile } from "fs/promises";
-import path from "path";
-import postcss from "postcss";
 import { defineConfig } from "tsup";
 
 // Three bundles rather than one, so that `"use client"` lands only on the
@@ -19,43 +14,6 @@ import { defineConfig } from "tsup";
 // registers every export of a client module it reaches, re-export included,
 // so a barrel spanning both surfaces cannot be tree-shaken back apart.
 
-// Resolves `import css from "./x.css?raw"` by running the file through
-// Tailwind (postcss) and inlining the compiled CSS as a string — the
-// bookmarklet injects it into its shadow root at runtime.
-const tailwindAsText: Plugin = {
-  name: "tailwind-as-text",
-  setup(build) {
-    // The resolved path keeps its `?raw` suffix on purpose: tsup registers
-    // its own onLoad for /\.css$/ with no namespace restriction, which
-    // would otherwise claim the file before ours runs.
-    build.onResolve({ filter: /\.css\?raw$/ }, (args) => ({
-      path: path.resolve(args.resolveDir, args.path),
-      namespace: "tailwind-as-text",
-    }));
-    build.onLoad(
-      { filter: /.*/, namespace: "tailwind-as-text" },
-      async (args) => {
-        const file = args.path.replace(/\?raw$/, "");
-        const source = await readFile(file, "utf8");
-        const result = await postcss([
-          tailwindPostcss({ optimize: true }),
-        ]).process(source, { from: file });
-        // Watch mode: recompile when the css itself OR any file it
-        // @source-scans changes — esbuild would otherwise serve the cached
-        // text while the scanned classes drift.
-        const scanned = [...source.matchAll(/@source "(.+?)";/g)].map((m) =>
-          path.resolve(path.dirname(file), m[1] ?? ""),
-        );
-        return {
-          contents: result.css,
-          loader: "text",
-          watchFiles: [file, ...scanned],
-        };
-      },
-    );
-  },
-};
-
 const shared = {
   format: ["esm"] as const,
   outDir: "dist",
@@ -92,25 +50,4 @@ export default defineConfig([
     outDir: "dist",
     clean: false,
   },
-  // The bookmarklet: a self-contained IIFE — React and every dependency
-  // bundled, no externals — fetched at runtime from a CDN by the tiny
-  // `javascript:` loader (see README). Ships as dist/bookmarklet.global.js.
-  {
-    entryPoints: ["src/bookmarklet.tsx"],
-    format: ["iife"],
-    outDir: "dist",
-    dts: false,
-    clean: false,
-    minify: true,
-    esbuildPlugins: [tailwindAsText],
-    esbuildOptions(options) {
-      options.jsx = "automatic";
-      // react-dom reads process.env.NODE_ENV, which doesn't exist in a
-      // browser IIFE — pin it to the production build.
-      options.define = {
-        ...options.define,
-        "process.env.NODE_ENV": '"production"',
-      };
-    },
-  },
 ]);