@blurrow/ui 0.0.0-stage → 0.2.0

package/dist/cli.js

@@ -0,0 +1,1477 @@
+#!/usr/bin/env node
+
+// cli/index.ts
+import { spawnSync } from "child_process";
+import fs3 from "fs";
+import path3 from "path";
+
+// cli/term.ts
+import readline from "readline";
+var tty = Boolean(process.stdout.isTTY);
+var colour = tty && !process.env.NO_COLOR && process.env.TERM !== "dumb";
+var paint = (open, close) => (s) => colour ? `\x1B[${open}m${s}\x1B[${close}m` : String(s);
+var c = {
+  bold: paint(1, 22),
+  dim: paint(2, 22),
+  red: paint(31, 39),
+  green: paint(32, 39),
+  yellow: paint(33, 39),
+  cyan: paint(36, 39),
+  gray: paint(90, 39)
+};
+var sym = {
+  ok: c.green("\u2713"),
+  warn: c.yellow("!"),
+  fail: c.red("\u2717"),
+  info: c.cyan("\u203A"),
+  dot: c.gray("\xB7")
+};
+var log = {
+  line: (s = "") => console.log(s),
+  ok: (s) => console.log(`  ${sym.ok} ${s}`),
+  warn: (s) => console.log(`  ${sym.warn} ${s}`),
+  fail: (s) => console.log(`  ${sym.fail} ${s}`),
+  info: (s) => console.log(`  ${sym.info} ${s}`),
+  step: (s) => console.log(`
+${c.bold(s)}`),
+  hint: (s) => console.log(`    ${c.gray(s)}`)
+};
+var interactive = tty && Boolean(process.stdin.isTTY) && !process.env.CI;
+async function confirm(question, fallback = true, assumeYes = false) {
+  if (assumeYes) return true;
+  if (!interactive) return fallback;
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  const hint = fallback ? "Y/n" : "y/N";
+  const answer = await new Promise((r) => rl.question(`  ${c.cyan("?")} ${question} ${c.gray(`(${hint})`)} `, r));
+  rl.close();
+  const a = answer.trim().toLowerCase();
+  if (!a) return fallback;
+  return a === "y" || a === "yes";
+}
+async function choose(question, options, fallback) {
+  if (!interactive) return fallback;
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  const keys = options.map((o) => o.key === fallback ? c.bold(o.label) : o.label).join(c.gray(" / "));
+  const answer = await new Promise((r) => rl.question(`  ${c.cyan("?")} ${question} ${keys} `, r));
+  rl.close();
+  const a = answer.trim().toLowerCase();
+  return options.find((o) => o.label.toLowerCase().startsWith(a) && a)?.key ?? fallback;
+}
+async function multiselect(title, items) {
+  if (!interactive) return [];
+  const stdin = process.stdin;
+  const out = process.stdout;
+  const picked = /* @__PURE__ */ new Set();
+  let cursor = 0;
+  let filter = "";
+  let drawn = 0;
+  const rows = Math.max(6, Math.min(14, (out.rows ?? 24) - 6));
+  const visible = () => {
+    const f = filter.toLowerCase();
+    return f ? items.filter((i) => i.label.toLowerCase().includes(f) || i.value.includes(f)) : items;
+  };
+  const draw = () => {
+    const list2 = visible();
+    cursor = Math.min(cursor, Math.max(0, list2.length - 1));
+    const start = Math.max(0, Math.min(cursor - Math.floor(rows / 2), list2.length - rows));
+    const page = list2.slice(start, start + rows);
+    const lines = [];
+    lines.push(`  ${c.cyan("?")} ${c.bold(title)} ${c.gray(filter ? `filter: ${filter}` : "type to filter")}`);
+    if (!list2.length) lines.push(`    ${c.gray("nothing matches")}`);
+    page.forEach((item, i) => {
+      const at = start + i === cursor;
+      const box = picked.has(item.value) ? c.green("\u25C9") : c.gray("\u25CB");
+      const label = at ? c.cyan(item.label) : item.label;
+      const group = item.group ? c.gray(` ${item.group}`) : "";
+      lines.push(`  ${at ? c.cyan("\u276F") : " "} ${box} ${label}${group}${at && item.hint ? c.gray(`  ${item.hint}`) : ""}`);
+    });
+    lines.push(c.gray(`    \u2191\u2193 move \xB7 space pick \xB7 ctrl+a all \xB7 enter done \xB7 esc cancel   ${picked.size} picked`));
+    if (drawn) out.write(`\x1B[${drawn}A\x1B[J`);
+    out.write(lines.join("\n") + "\n");
+    drawn = lines.length;
+  };
+  readline.emitKeypressEvents(stdin);
+  stdin.setRawMode(true);
+  stdin.resume();
+  out.write("\x1B[?25l");
+  return new Promise((resolve) => {
+    const done = (value) => {
+      stdin.off("keypress", onKey);
+      stdin.setRawMode(false);
+      stdin.pause();
+      out.write("\x1B[?25h");
+      resolve(value);
+    };
+    const onKey = (str, key) => {
+      const list2 = visible();
+      if (key.ctrl && key.name === "c") {
+        out.write("\x1B[?25h\n");
+        process.exit(130);
+      }
+      if (key.name === "escape") return done([]);
+      if (key.name === "return") return done([...picked]);
+      if (key.name === "up" || key.ctrl && key.name === "p") cursor = (cursor - 1 + list2.length) % Math.max(1, list2.length);
+      else if (key.name === "down" || key.ctrl && key.name === "n") cursor = (cursor + 1) % Math.max(1, list2.length);
+      else if (key.name === "space") {
+        const v = list2[cursor]?.value;
+        if (v) picked.has(v) ? picked.delete(v) : picked.add(v);
+      } else if (key.name === "backspace") filter = filter.slice(0, -1);
+      else if (key.ctrl && key.name === "a") {
+        const all = list2.every((i) => picked.has(i.value));
+        list2.forEach((i) => all ? picked.delete(i.value) : picked.add(i.value));
+      } else if (str && /^[a-z0-9 -]$/i.test(str)) {
+        filter += str.toLowerCase();
+        cursor = 0;
+      }
+      draw();
+    };
+    stdin.on("keypress", onKey);
+    draw();
+  });
+}
+
+// cli/components.ts
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+// ../../lib/registry.ts
+var categories = [
+  "actions",
+  "forms",
+  "navigation",
+  "overlays",
+  "feedback",
+  "data display",
+  "cards",
+  "editorial"
+];
+var ex = (name, title, description) => ({
+  name,
+  title,
+  description
+});
+var registry = [
+  /* ── Actions ─────────────────────────────────────────────────── */
+  {
+    slug: "button",
+    name: "button",
+    category: "actions",
+    description: "a raised face sitting in a bezel. the bezel stays put, the face lifts when you hover and sinks when you press.",
+    file: "Button",
+    usage: `<Button variant="primary">get started</Button>`,
+    examples: [
+      ex("button-demo", "default"),
+      ex("button-variants", "variants", "primary and secondary are layered; outline is a lighter bezel; ghost is a single flat face."),
+      ex("button-sizes", "sizes"),
+      ex("button-with-icon", "with icon", "a trailing icon leans toward where the button is taking you."),
+      ex("button-icon", "icon only", 'use size="icon" for a bezel-less key, or square for a layered one.'),
+      ex("button-on-dark", "on a dark surface", `tone="dark" swaps secondary and outline to a dark face so they don't glare.`)
+    ]
+  },
+  {
+    slug: "button-group",
+    name: "button group",
+    category: "actions",
+    description: "a few keys sharing one bezel. handy for toolbars and social links.",
+    file: "ButtonGroup",
+    usage: `<ButtonGroup
+  label="text formatting"
+  items={[
+    { label: "bold", content: <BoldIcon /> },
+    { label: "italic", content: <ItalicIcon /> },
+  ]}
+/>`,
+    examples: [
+      ex("button-group-demo", "default"),
+      ex("button-group-wide", "wide keys", "set wide on an item to size it to its content instead of a square.")
+    ]
+  },
+  {
+    slug: "close-button",
+    name: "close button",
+    category: "actions",
+    description: "the little key that closes alerts, banners, modals and drawers.",
+    file: "CloseButton",
+    usage: `<CloseButton onClick={onClose} />`,
+    examples: [
+      ex("close-button-demo", "default"),
+      ex("close-button-dark", "dark tone")
+    ]
+  },
+  /* ── Forms ───────────────────────────────────────────────────── */
+  {
+    slug: "input",
+    name: "input",
+    category: "forms",
+    description: "a text field set into the surface. when you focus it, the well comes up flush and draws its border.",
+    file: "Input",
+    usage: `<Input label="email" placeholder="you@example.com" />`,
+    examples: [
+      ex("input-demo", "default"),
+      ex("input-with-label", "with label and hint"),
+      ex("input-with-icon", "with icon"),
+      ex("input-error", "error"),
+      ex("input-disabled", "disabled")
+    ]
+  },
+  {
+    slug: "textarea",
+    name: "textarea",
+    category: "forms",
+    description: "a field for longer writing. it can grow with what you type if you'd like.",
+    file: "Textarea",
+    usage: `<Textarea label="bio" placeholder="tell us about yourself\u2026" />`,
+    examples: [
+      ex("textarea-demo", "default"),
+      ex("textarea-auto-resize", "auto resize"),
+      ex("textarea-error", "error")
+    ]
+  },
+  {
+    slug: "select",
+    name: "select",
+    category: "forms",
+    description: "looks like a field, opens a panel of options. works with the keyboard too.",
+    file: "Select",
+    usage: `<Select options={options} value={value} onChange={setValue} />`,
+    examples: [
+      ex("select-demo", "default"),
+      ex("select-with-label", "with label"),
+      ex("select-disabled", "disabled")
+    ]
+  },
+  {
+    slug: "checkbox",
+    name: "checkbox",
+    category: "forms",
+    description: "a small sunken box. the check pops in and draws itself when you tick it.",
+    file: "Checkbox",
+    usage: `<Checkbox label="weekly digest" checked={checked} onChange={setChecked} />`,
+    examples: [
+      ex("checkbox-demo", "default"),
+      ex("checkbox-with-description", "with description"),
+      ex("checkbox-indeterminate", "indeterminate"),
+      ex("checkbox-disabled", "disabled")
+    ]
+  },
+  {
+    slug: "radio-group",
+    name: "radio group",
+    category: "forms",
+    description: "pick one option from a few. the dot slides over to whatever you choose.",
+    file: "Radio",
+    usage: `<RadioGroup options={options} value={value} onChange={setValue} />`,
+    examples: [
+      ex("radio-group-demo", "default"),
+      ex("radio-group-disabled", "disabled option")
+    ]
+  },
+  {
+    slug: "toggle",
+    name: "toggle",
+    category: "forms",
+    description: "a switch for settings that should take effect right away.",
+    file: "Toggle",
+    usage: `<Toggle label="email notifications" checked={on} onChange={setOn} />`,
+    examples: [
+      ex("toggle-demo", "default"),
+      ex("toggle-with-description", "with description"),
+      ex("toggle-disabled", "disabled")
+    ]
+  },
+  {
+    slug: "tag-input",
+    name: "tag input",
+    category: "forms",
+    description: "type a word, hit enter or a comma, and it turns into a tag. backspace takes it away.",
+    file: "TagInput",
+    usage: `<TagInput value={tags} onChange={setTags} label="tags" />`,
+    examples: [
+      ex("tag-input-demo", "default"),
+      ex("tag-input-max", "limited", "maxtags caps how many tags can be added.")
+    ]
+  },
+  /* ── Navigation ──────────────────────────────────────────────── */
+  {
+    slug: "tabs",
+    name: "tabs",
+    category: "navigation",
+    description: "a sunken well with a raised thumb that slides between tabs. arrow keys work as well.",
+    file: "Tabs",
+    usage: `<Tabs
+  tabs={[
+    { key: "overview", label: "overview", content: <p>\u2026</p> },
+    { key: "posts", label: "posts", content: <p>\u2026</p> },
+  ]}
+/>`,
+    examples: [
+      ex("tabs-demo", "default"),
+      ex("tabs-segmented", "segmented control", "leave out content and listen to onchange to use the well as a segmented control.")
+    ]
+  },
+  {
+    slug: "pagination",
+    name: "pagination",
+    category: "navigation",
+    description: "page numbers in a well, with a thumb that slides to the page you're on.",
+    file: "Pagination",
+    usage: `<Pagination currentPage={page} totalPages={12} onPageChange={setPage} />`,
+    examples: [ex("pagination-demo", "default")]
+  },
+  {
+    slug: "breadcrumb",
+    name: "breadcrumb",
+    category: "navigation",
+    description: "shows where you are, and how you got there.",
+    file: "Breadcrumb",
+    usage: `<Breadcrumb items={[{ label: "home", href: "/" }, { label: "components" }]} />`,
+    examples: [ex("breadcrumb-demo", "default")]
+  },
+  {
+    slug: "sidebar",
+    name: "sidebar",
+    category: "navigation",
+    description: "grouped navigation in a panel. a dark pill slides to whatever's active.",
+    file: "Sidebar",
+    usage: `<Sidebar sections={sections} active={active} onSelect={setActive} />`,
+    examples: [ex("sidebar-demo", "default")]
+  },
+  {
+    slug: "steps",
+    name: "steps",
+    category: "navigation",
+    description: "shows how far along someone is in a flow with a few steps.",
+    file: "Steps",
+    usage: `<Steps current={1} steps={[{ label: "account" }, { label: "profile" }, { label: "done" }]} />`,
+    examples: [
+      ex("steps-demo", "default"),
+      ex("steps-interactive", "interactive")
+    ]
+  },
+  {
+    slug: "table-of-contents",
+    name: "table of contents",
+    category: "navigation",
+    description: "a thin track with a marker that follows the heading you're reading. the one on the right of these pages is this component.",
+    file: "TableOfContents",
+    usage: `<TableOfContents items={headings} activeKey={active} onSelect={scrollTo} />`,
+    examples: [ex("table-of-contents-demo", "default")]
+  },
+  {
+    slug: "command-palette",
+    name: "command palette",
+    category: "navigation",
+    description: "a searchable list of actions in a dialog. press \u2318k on this site to try the one that searches these docs.",
+    file: "CommandPalette",
+    usage: `<CommandPalette open={open} onClose={() => setOpen(false)} sections={sections} />`,
+    examples: [ex("command-palette-demo", "default")]
+  },
+  /* ── Overlays ────────────────────────────────────────────────── */
+  {
+    slug: "modal",
+    name: "modal",
+    category: "overlays",
+    description: "a dialog that springs in over the page. escape closes it and focus goes back where it was.",
+    file: "Modal",
+    usage: `<Modal open={open} onClose={() => setOpen(false)} title="delete post?" actions={actions} />`,
+    examples: [
+      ex("modal-demo", "default"),
+      ex("modal-with-form", "with content")
+    ]
+  },
+  {
+    slug: "drawer",
+    name: "drawer",
+    category: "overlays",
+    description: "a panel that slides in from the side, for things that don't need the whole page.",
+    file: "Drawer",
+    usage: `<Drawer open={open} onClose={() => setOpen(false)} title="edit settings">\u2026</Drawer>`,
+    examples: [
+      ex("drawer-demo", "default"),
+      ex("drawer-left", "left side")
+    ]
+  },
+  {
+    slug: "popover",
+    name: "popover",
+    category: "overlays",
+    description: "a bit of content that opens next to whatever you clicked.",
+    file: "Popover",
+    usage: `<Popover trigger={<Button variant="secondary">open</Button>}>\u2026</Popover>`,
+    examples: [
+      ex("popover-demo", "default"),
+      ex("popover-positions", "positions")
+    ]
+  },
+  {
+    slug: "tooltip",
+    name: "tooltip",
+    category: "overlays",
+    description: "a short label that shows up when you hover or focus something.",
+    file: "Tooltip",
+    usage: `<Tooltip content="edit post"><Button>edit</Button></Tooltip>`,
+    examples: [
+      ex("tooltip-demo", "default"),
+      ex("tooltip-positions", "positions")
+    ]
+  },
+  {
+    slug: "dropdown-menu",
+    name: "dropdown menu",
+    category: "overlays",
+    description: "a menu of actions under a trigger, with shortcuts, dividers and a red one for deleting.",
+    file: "DropdownMenu",
+    usage: `<DropdownMenu trigger={<Button variant="secondary">options</Button>} items={items} onSelect={handle} />`,
+    examples: [
+      ex("dropdown-menu-demo", "default"),
+      ex("dropdown-menu-with-icons", "with icons")
+    ]
+  },
+  {
+    slug: "toast",
+    name: "toast",
+    category: "overlays",
+    description: "little notes that stack up in the corner and fan out when you hover. wrap your app in ToastProvider, then call toast() from anywhere.",
+    file: "Toast",
+    usage: `// app/layout.tsx
+<ToastProvider>{children}</ToastProvider>
+
+// anywhere below it
+const { toast } = useToast();
+toast({ title: "post saved", variant: "success" });`,
+    examples: [
+      ex("toast-demo", "default"),
+      ex("toast-variants", "variants")
+    ]
+  },
+  /* ── Feedback ────────────────────────────────────────────────── */
+  {
+    slug: "alert",
+    name: "alert",
+    category: "feedback",
+    description: "a message that sits in the page, with an icon tile that changes per variant.",
+    file: "Alert",
+    usage: `<Alert variant="success" title="published" description="your post is live." />`,
+    examples: [
+      ex("alert-demo", "default"),
+      ex("alert-variants", "variants"),
+      ex("alert-dismissible", "dismissible")
+    ]
+  },
+  {
+    slug: "banner",
+    name: "banner",
+    category: "feedback",
+    description: "a wide announcement strip, built just like a primary button.",
+    file: "Banner",
+    usage: `<Banner dismissible>blurrow v1.0 is out.</Banner>`,
+    examples: [
+      ex("banner-demo", "default"),
+      ex("banner-variants", "variants"),
+      ex("banner-with-action", "with action")
+    ]
+  },
+  {
+    slug: "progress",
+    name: "progress",
+    category: "feedback",
+    description: "a track that fills up as something gets done.",
+    file: "Progress",
+    usage: `<Progress label="uploading" value={64} showValue />`,
+    examples: [
+      ex("progress-demo", "default"),
+      ex("progress-stacked", "stacked")
+    ]
+  },
+  {
+    slug: "skeleton",
+    name: "skeleton",
+    category: "feedback",
+    description: "placeholders while things load. one band of light sweeps across all of them together.",
+    file: "Skeleton",
+    usage: `<Skeleton variant="text" lines={3} />`,
+    examples: [
+      ex("skeleton-demo", "default"),
+      ex("skeleton-card", "cards")
+    ]
+  },
+  {
+    slug: "empty-state",
+    name: "empty state",
+    category: "feedback",
+    description: "what to show when a list or page has nothing in it yet, plus something to do about it.",
+    file: "EmptyState",
+    usage: `<EmptyState title="no posts yet" description="\u2026" action={<Button>create post</Button>} />`,
+    examples: [ex("empty-state-demo", "default")]
+  },
+  /* ── Data display ────────────────────────────────────────────── */
+  {
+    slug: "badge",
+    name: "badge",
+    category: "data display",
+    description: "a small raised label for status and little bits of info.",
+    file: "Badge",
+    usage: `<Badge variant="accent">new</Badge>`,
+    examples: [
+      ex("badge-demo", "default"),
+      ex("badge-variants", "variants")
+    ]
+  },
+  {
+    slug: "avatar",
+    name: "avatar",
+    category: "data display",
+    description: "someone's photo, or their initials on a raised tile when there isn't one.",
+    file: "Avatar",
+    usage: `<Avatar name="ada lovelace" />`,
+    examples: [
+      ex("avatar-demo", "default"),
+      ex("avatar-sizes", "sizes"),
+      ex("avatar-group", "group", "avatargroup overlaps its children and collapses the rest into a count.")
+    ]
+  },
+  {
+    slug: "kbd",
+    name: "kbd",
+    category: "data display",
+    description: "a little keycap for keyboard shortcuts.",
+    file: "Kbd",
+    usage: `<Kbd>\u2318k</Kbd>`,
+    examples: [ex("kbd-demo", "default")]
+  },
+  {
+    slug: "table",
+    name: "table",
+    category: "data display",
+    description: "rows of data in a panel. you can render cells however you like and make rows clickable.",
+    file: "Table",
+    usage: `<Table columns={columns} rows={rows} title="recent posts" />`,
+    examples: [ex("table-demo", "default")]
+  },
+  {
+    slug: "data-list",
+    name: "data list",
+    category: "data display",
+    description: "labels and values, for describing one thing in detail.",
+    file: "DataList",
+    usage: `<DataList items={[{ label: "author", value: "ada" }]} />`,
+    examples: [
+      ex("data-list-demo", "default"),
+      ex("data-list-two-columns", "two columns")
+    ]
+  },
+  {
+    slug: "stat",
+    name: "stat",
+    category: "data display",
+    description: "a big number that counts up into place, with a label and a trend.",
+    file: "Stat",
+    usage: `<StatRow>
+  <Stat value={2847} label="total reads" trend="\u2191 12%" />
+</StatRow>`,
+    examples: [ex("stat-demo", "default")]
+  },
+  {
+    slug: "stat-card",
+    name: "stat card",
+    category: "data display",
+    description: "a number on a card, with how it's changed and an optional sparkline.",
+    file: "StatCard",
+    usage: `<StatCard label="monthly readers" value={24891} delta={{ value: "12.4%", direction: "up" }} />`,
+    examples: [
+      ex("stat-card-demo", "default"),
+      ex("stat-card-dark", "dark")
+    ]
+  },
+  {
+    slug: "timeline",
+    name: "timeline",
+    category: "data display",
+    description: "a list of things that happened, newest first.",
+    file: "Timeline",
+    usage: `<Timeline items={events} />`,
+    examples: [ex("timeline-demo", "default")]
+  },
+  {
+    slug: "code-block",
+    name: "code block",
+    category: "data display",
+    description: "code on a raised face, with the filename up top, light highlighting and a copy key.",
+    file: "CodeBlock",
+    usage: `<CodeBlock language="tsx" title="app.tsx" code={source} />`,
+    examples: [
+      ex("code-block-demo", "default"),
+      ex("code-block-plain", "plain text", "languages other than js/ts are shown without highlighting.")
+    ]
+  },
+  {
+    slug: "accordion",
+    name: "accordion",
+    category: "data display",
+    description: "sections that open up when you click them.",
+    file: "Accordion",
+    usage: `<Accordion items={[{ key: "1", title: "is it free?", content: "yes." }]} />`,
+    examples: [
+      ex("accordion-demo", "default"),
+      ex("accordion-multiple", "multiple open")
+    ]
+  },
+  /* ── Cards ───────────────────────────────────────────────────── */
+  {
+    slug: "card-shell",
+    name: "card shell",
+    category: "cards",
+    description: "the frame every card is built on: a bezel holding a face. content goes on the face, buttons and context go on the strip below.",
+    file: "CardShell",
+    usage: `<CardShell rail={<Button size="sm">open</Button>}>\u2026</CardShell>`,
+    examples: [
+      ex("card-shell-demo", "default"),
+      ex("card-shell-text-rail", "text rail", `railkind="text" indents plain context to the face's text edge.`),
+      ex("card-shell-dark", "dark")
+    ]
+  },
+  {
+    slug: "card",
+    name: "card",
+    category: "cards",
+    description: "ready-made cards in two layouts: split (title and picture side by side) and stack (picture on top).",
+    file: "Card",
+    usage: `<Card title="newsletter" subtitle="ideas in your inbox" actions={<Button size="sm">subscribe</Button>} />`,
+    examples: [
+      ex("card-demo", "split"),
+      ex("card-stack", "stack"),
+      ex("card-grid", "grid", "cardgrid lays cards out two-up and stacks them on small screens.")
+    ]
+  },
+  {
+    slug: "quote-card",
+    name: "quote card",
+    category: "cards",
+    description: "a quote, with who said it on the strip below.",
+    file: "QuoteCard",
+    usage: `<QuoteCard quote="\u2026" author="ada lovelace" role="analyst" />`,
+    examples: [
+      ex("quote-card-demo", "default"),
+      ex("quote-card-dark", "dark")
+    ]
+  },
+  {
+    slug: "spotlight-card",
+    name: "spotlight card",
+    category: "cards",
+    description: "a big card for announcements, with room for an eyebrow, an icon and a couple of buttons.",
+    file: "SpotlightCard",
+    usage: `<SpotlightCard title="realtime collaboration is here." subtitle="\u2026" actions={\u2026} />`,
+    examples: [
+      ex("spotlight-card-demo", "default"),
+      ex("spotlight-card-light", "light")
+    ]
+  },
+  {
+    slug: "author-card",
+    name: "author card",
+    category: "cards",
+    description: "an author's avatar, name and bio, with a follow button.",
+    file: "AuthorCard",
+    usage: `<AuthorCard name="ada lovelace" bio="\u2026" onFollow={follow} />`,
+    examples: [ex("author-card-demo", "default")]
+  },
+  {
+    slug: "carousel",
+    name: "carousel",
+    category: "cards",
+    description: "slides that move on by themselves or when you nudge them, with a thin line showing time left.",
+    file: "Carousel",
+    usage: `<Carousel autoPlay items={[<CarouselSlide key="a" title="\u2026" />]} />`,
+    examples: [ex("carousel-demo", "default")]
+  },
+  /* ── Editorial ───────────────────────────────────────────────── */
+  {
+    slug: "reading-progress",
+    name: "reading progress",
+    category: "editorial",
+    description: "a thin line along the top of the window that fills as you read.",
+    file: "ReadingProgress",
+    usage: `<ReadingProgress />`,
+    examples: [ex("reading-progress-demo", "default", "it's mounted on this page. scroll and watch the top edge of the window.")]
+  },
+  {
+    slug: "reading-time",
+    name: "reading time",
+    category: "editorial",
+    description: "roughly how long an article takes to read.",
+    file: "ReadingTime",
+    usage: `<ReadingTime minutes={8} />`,
+    examples: [ex("reading-time-demo", "default")]
+  },
+  {
+    slug: "reaction-bar",
+    name: "reaction bar",
+    category: "editorial",
+    description: "emoji reactions that count up when readers tap them.",
+    file: "ReactionBar",
+    usage: `<ReactionBar />`,
+    examples: [ex("reaction-bar-demo", "default")]
+  },
+  {
+    slug: "share-buttons",
+    name: "share buttons",
+    category: "editorial",
+    description: "share a post to social sites, or copy its link.",
+    file: "ShareButtons",
+    usage: `<ShareButtons url={url} title={title} />`,
+    examples: [ex("share-buttons-demo", "default")]
+  }
+];
+
+// cli/components.ts
+var SOURCE_DIR = fileURLToPath(new URL("./registry/", import.meta.url));
+var squash = (s) => s.toLowerCase().replace(/[^a-z0-9]/g, "");
+function findEntry(name) {
+  const k = squash(name);
+  return registry.find((e) => squash(e.slug) === k || squash(e.file) === k || squash(e.name) === k);
+}
+function distance(a, b) {
+  const dp = Array.from({ length: a.length + 1 }, (_, i) => [i, ...Array(b.length).fill(0)]);
+  for (let j = 1; j <= b.length; j++) dp[0][j] = j;
+  for (let i = 1; i <= a.length; i++)
+    for (let j = 1; j <= b.length; j++)
+      dp[i][j] = Math.min(dp[i - 1][j] + 1, dp[i][j - 1] + 1, dp[i - 1][j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
+  return dp[a.length][b.length];
+}
+function suggest(name) {
+  const k = squash(name);
+  return registry.map((e) => ({ slug: e.slug, d: Math.min(distance(k, squash(e.slug)), squash(e.slug).startsWith(k) ? 0 : 99) })).filter((x) => x.d <= Math.max(2, Math.floor(k.length / 3))).sort((a, b) => a.d - b.d).slice(0, 3).map((x) => x.slug);
+}
+function sourceFile(file) {
+  for (const ext of [".tsx", ".ts"]) {
+    const p = path.join(SOURCE_DIR, file + ext);
+    if (fs.existsSync(p)) return { name: file + ext, code: fs.readFileSync(p, "utf8") };
+  }
+  throw new Error(`source for ${file} is missing from the package`);
+}
+function withDependencies(files) {
+  const seen = /* @__PURE__ */ new Map();
+  const visit = (file) => {
+    if (seen.has(file)) return;
+    const src = sourceFile(file);
+    seen.set(file, src);
+    for (const m of src.code.matchAll(/from\s+["']\.\/([\w-]+)["']/g)) visit(m[1]);
+  };
+  files.forEach(visit);
+  return [...seen.values()];
+}
+function diffLines(a, b) {
+  const x = a.split("\n");
+  const y = b.split("\n");
+  const n = x.length;
+  const m = y.length;
+  const lcs = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
+  for (let i2 = n - 1; i2 >= 0; i2--)
+    for (let j2 = m - 1; j2 >= 0; j2--) lcs[i2][j2] = x[i2] === y[j2] ? lcs[i2 + 1][j2 + 1] + 1 : Math.max(lcs[i2 + 1][j2], lcs[i2][j2 + 1]);
+  const out = [];
+  let i = 0;
+  let j = 0;
+  while (i < n && j < m) {
+    if (x[i] === y[j]) {
+      out.push({ kind: " ", text: x[i] });
+      i++;
+      j++;
+    } else if (lcs[i + 1][j] >= lcs[i][j + 1]) out.push({ kind: "-", text: x[i++] });
+    else out.push({ kind: "+", text: y[j++] });
+  }
+  while (i < n) out.push({ kind: "-", text: x[i++] });
+  while (j < m) out.push({ kind: "+", text: y[j++] });
+  return out;
+}
+function hunks(lines, context = 3) {
+  const keep = /* @__PURE__ */ new Set();
+  lines.forEach((l, i) => {
+    if (l.kind !== " ") for (let k = i - context; k <= i + context; k++) keep.add(k);
+  });
+  const out = [];
+  let last = -2;
+  lines.forEach((l, i) => {
+    if (!keep.has(i)) return;
+    if (i !== last + 1 && out.length) out.push(null);
+    out.push(l);
+    last = i;
+  });
+  return out;
+}
+
+// cli/project.ts
+import fs2 from "fs";
+import path2 from "path";
+var PKG = "@blurrow/ui";
+var CONFIG_FILE = "blurrow.json";
+function readProject(root) {
+  const pkgPath = path2.join(root, "package.json");
+  const pkg = fs2.existsSync(pkgPath) ? JSON.parse(fs2.readFileSync(pkgPath, "utf8")) : null;
+  const deps = { ...pkg?.dependencies ?? {}, ...pkg?.devDependencies ?? {} };
+  const cfgPath = path2.join(root, CONFIG_FILE);
+  const config = fs2.existsSync(cfgPath) ? JSON.parse(fs2.readFileSync(cfgPath, "utf8")) : null;
+  return { root, pkg, deps, pm: detectPm(root), config };
+}
+function detectPm(root) {
+  const has = (f) => fs2.existsSync(path2.join(root, f));
+  if (has("pnpm-lock.yaml")) return "pnpm";
+  if (has("yarn.lock")) return "yarn";
+  if (has("bun.lockb") || has("bun.lock")) return "bun";
+  const agent = process.env.npm_config_user_agent ?? "";
+  if (agent.startsWith("pnpm")) return "pnpm";
+  if (agent.startsWith("yarn")) return "yarn";
+  if (agent.startsWith("bun")) return "bun";
+  return "npm";
+}
+function installCommand(pm, pkgs) {
+  const verb = pm === "npm" ? "install" : "add";
+  return [pm, verb, ...pkgs];
+}
+function majorOf(range) {
+  if (!range) return null;
+  const m = range.match(/(\d+)/);
+  return m ? Number(m[1]) : null;
+}
+function installedMajor(root, name, range) {
+  const p = path2.join(root, "node_modules", name, "package.json");
+  if (fs2.existsSync(p)) return majorOf(JSON.parse(fs2.readFileSync(p, "utf8")).version);
+  return majorOf(range);
+}
+var CSS_CANDIDATES = [
+  "app/globals.css",
+  "src/app/globals.css",
+  "styles/globals.css",
+  "src/styles/globals.css",
+  "src/index.css",
+  "src/styles.css",
+  "src/global.css",
+  "app/app.css"
+];
+function findCss(p) {
+  if (p.config?.css && fs2.existsSync(path2.join(p.root, p.config.css))) return p.config.css;
+  const importsTailwind = (rel2) => /@import\s+["']tailwindcss["']/.test(fs2.readFileSync(path2.join(p.root, rel2), "utf8"));
+  for (const rel2 of CSS_CANDIDATES) {
+    if (fs2.existsSync(path2.join(p.root, rel2)) && importsTailwind(rel2)) return rel2;
+  }
+  for (const rel2 of walk(p.root, (f) => f.endsWith(".css"), 4)) {
+    if (importsTailwind(rel2)) return rel2;
+  }
+  return null;
+}
+var LAYOUT_CANDIDATES = ["app/layout.tsx", "src/app/layout.tsx", "app/layout.jsx", "src/app/layout.jsx", "app/root.tsx", "src/main.tsx", "src/App.tsx"];
+function findLayout(root) {
+  return LAYOUT_CANDIDATES.find((rel2) => fs2.existsSync(path2.join(root, rel2))) ?? null;
+}
+function defaultComponentsDir(root) {
+  return fs2.existsSync(path2.join(root, "src")) ? "src/components/ui" : "components/ui";
+}
+function walk(root, match, depth = 6) {
+  const out = [];
+  const skip = /* @__PURE__ */ new Set(["node_modules", ".next", ".git", "dist", "build", "out", ".turbo", ".vercel", "coverage"]);
+  const go = (dir, d) => {
+    if (d > depth) return;
+    let entries = [];
+    try {
+      entries = fs2.readdirSync(path2.join(root, dir), { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const e of entries) {
+      if (e.name.startsWith(".") && e.name !== ".") continue;
+      const rel2 = dir ? `${dir}/${e.name}` : e.name;
+      if (e.isDirectory()) {
+        if (!skip.has(e.name)) go(rel2, d + 1);
+      } else if (match(rel2)) out.push(rel2);
+    }
+  };
+  go("", 0);
+  return out;
+}
+function sourcePathFor(cssRel) {
+  const fromDir = path2.dirname(cssRel);
+  const rel2 = path2.relative(fromDir, `node_modules/${PKG}`).split(path2.sep).join("/");
+  return rel2.startsWith(".") ? rel2 : `./${rel2}`;
+}
+function inspectCss(root, cssRel) {
+  const css = fs2.readFileSync(path2.join(root, cssRel), "utf8");
+  const tailwind = /@import\s+["']tailwindcss["']/.test(css);
+  const styles = css.includes(`${PKG}/styles.css`) ? "package" : /@import\s+["'][^"']*styles\.css["']/.test(css) ? "local" : null;
+  const m = css.match(new RegExp(`@source\\s+["']([^"']*${PKG.replace("/", "\\/")}[^"']*)["']`));
+  const source = m ? { line: m[1], ok: fs2.existsSync(path2.resolve(root, path2.dirname(cssRel), m[1])) } : null;
+  return { tailwind, styles, source };
+}
+function patchCss(text, cssRel, mode, localStylesRel) {
+  let out = text;
+  const tailwindLine = out.match(/@import\s+["']tailwindcss["'][^;]*;\n?/);
+  const insertAfterTailwind = (line) => {
+    if (tailwindLine) {
+      const at = out.indexOf(tailwindLine[0]) + tailwindLine[0].length;
+      out = out.slice(0, at) + (tailwindLine[0].endsWith("\n") ? "" : "\n") + line + "\n" + out.slice(at);
+    } else {
+      out = `@import "tailwindcss";
+${line}
+` + out;
+    }
+  };
+  if (mode === "package") {
+    if (!out.includes(`${PKG}/styles.css`)) insertAfterTailwind(`@import "${PKG}/styles.css";`);
+    const want = sourcePathFor(cssRel);
+    const existing = out.match(new RegExp(`@source\\s+["']([^"']*${PKG.replace("/", "\\/")}[^"']*)["'];?`));
+    if (!existing) {
+      const anchor = out.match(new RegExp(`@import\\s+["']${PKG.replace("/", "\\/")}\\/styles\\.css["'];?\\n?`));
+      const at = anchor ? out.indexOf(anchor[0]) + anchor[0].length : 0;
+      out = out.slice(0, at) + `
+/* let tailwind see the classes ${PKG} uses */
+@source "${want}";
+` + out.slice(at);
+    } else if (existing[1] !== want) {
+      out = out.replace(existing[0], `@source "${want}";`);
+    }
+  } else if (localStylesRel) {
+    const rel2 = path2.relative(path2.dirname(cssRel), localStylesRel).split(path2.sep).join("/");
+    const spec = rel2.startsWith(".") ? rel2 : `./${rel2}`;
+    if (!out.includes(spec)) insertAfterTailwind(`@import "${spec}";`);
+  }
+  return out === text ? null : out;
+}
+function writeFile(root, rel2, text, dryRun) {
+  if (dryRun) return;
+  const abs = path2.join(root, rel2);
+  fs2.mkdirSync(path2.dirname(abs), { recursive: true });
+  fs2.writeFileSync(abs, text);
+}
+function patchLayout(text, needFont, needToasts) {
+  let out = text;
+  const lastImport = [...out.matchAll(/^import[^;]*;[ \t]*$/gm)].pop();
+  if (!lastImport) return null;
+  const imports = [];
+  const decls = [];
+  if (needFont) {
+    const html = out.match(/<html\b[^>]*>/);
+    if (!html) return null;
+    let tag = html[0];
+    const literal = tag.match(/className="([^"]*)"/);
+    const expr = tag.match(/className=\{([^}]*)\}/);
+    if (literal) tag = tag.replace(literal[0], `className={\`\${archivo.variable} ${literal[1]}\`}`);
+    else if (expr) tag = tag.replace(expr[0], `className={\`\${archivo.variable} \${${expr[1].trim()}}\`}`);
+    else tag = tag.replace(/<html\b/, "<html className={archivo.variable}");
+    out = out.replace(html[0], tag);
+    if (!/from\s+["']next\/font\/google["']/.test(out)) imports.push(`import { Archivo } from "next/font/google";`);
+    else if (!/\bArchivo\b/.test(out)) return null;
+    decls.push(`const archivo = Archivo({ subsets: ["latin"], variable: "--font-archivo" });`);
+  }
+  if (needToasts) {
+    const body = out.match(/<body\b[^>]*>([\s\S]*?)<\/body>/);
+    if (!body || !body[1].includes("{children}")) return null;
+    out = out.replace(body[0], body[0].replace("{children}", "<ToastProvider>{children}</ToastProvider>"));
+    imports.push(`import { ToastProvider } from "${PKG}";`);
+  }
+  if (!imports.length && !decls.length && out === text) return null;
+  const at = out.indexOf(lastImport[0]) + lastImport[0].length;
+  const head = imports.length ? "\n" + imports.join("\n") : "";
+  const tail = decls.length ? "\n\n" + decls.join("\n") : "";
+  out = out.slice(0, at) + head + tail + out.slice(at);
+  return out;
+}
+
+// cli/index.ts
+function parse(argv) {
+  const flags = { yes: false, dryRun: false, overwrite: false, fix: false, install: true, cwd: process.cwd() };
+  const rest = [];
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "-y" || a === "--yes") flags.yes = true;
+    else if (a === "--dry-run") flags.dryRun = true;
+    else if (a === "--overwrite") flags.overwrite = true;
+    else if (a === "--fix") flags.fix = true;
+    else if (a === "--no-install") flags.install = false;
+    else if (a === "--cwd") flags.cwd = path3.resolve(argv[++i] ?? ".");
+    else if (a.startsWith("--cwd=")) flags.cwd = path3.resolve(a.slice(6));
+    else if (a === "--dir") flags.dir = argv[++i];
+    else if (a.startsWith("--dir=")) flags.dir = a.slice(6);
+    else rest.push(a);
+  }
+  return { command: rest[0], args: rest.slice(1), flags };
+}
+var HELP = `
+${c.bold("blurrow")} ${c.gray(`v${"0.2.0"}`)}  ${c.gray("tactile react components")}
+
+${c.bold("usage")}
+  npx @blurrow/ui ${c.cyan("<command>")} [options]     ${c.gray("or, once installed: npx blurrow <command>")}
+
+${c.bold("commands")}
+  ${c.cyan("init")}               set up this project: install, styles, font, config
+  ${c.cyan("add")} [names\u2026]       copy components' source into your project ${c.gray("(picker if no names)")}
+  ${c.cyan("list")}               every component, and which ones you've copied
+  ${c.cyan("diff")} [name]        what you've changed in copied components
+  ${c.cyan("doctor")}             check the setup and say how to fix anything off
+
+${c.bold("options")}
+  -y, --yes          accept the defaults, don't ask
+  --dry-run          show what would change, write nothing
+  --cwd <path>       run as if from another folder
+  --dir <path>       where copied components go ${c.gray("(default: components/ui)")}
+  --overwrite        replace copied files even if you've changed them
+  --fix              (doctor) repair the stylesheet setup
+  --no-install       (init) don't install anything
+  -v, --version      print the version
+
+${c.bold("examples")}
+  npx @blurrow/ui init
+  npx @blurrow/ui add button tabs toast
+  npx @blurrow/ui diff
+`;
+function header(title) {
+  log.line(`
+${c.bold("blurrow")} ${c.gray("\xB7")} ${title}${c.gray(`  v${"0.2.0"}`)}`);
+}
+function requireProject(flags) {
+  const p = useProject(readProject(flags.cwd));
+  if (!p.pkg) {
+    log.line();
+    log.fail(`no package.json in ${c.bold(rel(flags.cwd))}`);
+    log.hint("run this inside your app, or point at it with --cwd <path>");
+    process.exit(1);
+  }
+  return p;
+}
+var rel = (abs) => path3.relative(process.cwd(), abs) || ".";
+var bin = `npx ${PKG}`;
+var useProject = (p) => {
+  bin = p.deps[PKG] && fs3.existsSync(path3.join(p.root, "node_modules", PKG)) ? "npx blurrow" : `npx ${PKG}`;
+  return p;
+};
+function componentsDir(p, flags) {
+  return flags.dir ?? p.config?.componentsDir ?? defaultComponentsDir(p.root);
+}
+function run(cmd, flags, cwd) {
+  log.info(c.gray(cmd.join(" ")));
+  if (flags.dryRun) return true;
+  const r = spawnSync(cmd[0], cmd.slice(1), { cwd, stdio: "inherit", shell: process.platform === "win32" });
+  return r.status === 0;
+}
+function printHunks(lines) {
+  for (const l of lines) {
+    if (!l) log.line(c.gray("    \u22EF"));
+    else if (l.kind === "-") log.line(c.red(`    - ${l.text}`));
+    else if (l.kind === "+") log.line(c.green(`    + ${l.text}`));
+    else log.line(c.gray(`      ${l.text}`));
+  }
+}
+function importPathFor(p, dir, file) {
+  try {
+    const raw = fs3.readFileSync(path3.join(p.root, "tsconfig.json"), "utf8").replace(/\/\/.*$/gm, "").replace(/,(\s*[}\]])/g, "$1");
+    const paths = JSON.parse(raw)?.compilerOptions?.paths ?? {};
+    for (const [alias, targets] of Object.entries(paths)) {
+      const prefix = alias.replace(/\*$/, "");
+      const target = (targets[0] ?? "").replace(/^\.\//, "").replace(/\*$/, "");
+      if (dir.startsWith(target)) return `${prefix}${dir.slice(target.length)}/${file}`.replace(/\/+/g, "/");
+    }
+  } catch {
+  }
+  return `./${dir}/${file}`;
+}
+var LAYOUT_SNIPPET = (isNext) => isNext ? `import { Archivo } from "next/font/google";
+import { ToastProvider } from "${PKG}";
+
+const archivo = Archivo({ subsets: ["latin"], variable: "--font-archivo" });
+
+// on <html>:   className={archivo.variable}
+// in <body>:   <ToastProvider>{children}</ToastProvider>   (only if you use toasts)` : `<!-- in your html <head> -->
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap" />
+<style>:root { --font-archivo: "Archivo"; }</style>
+
+// around your app, if you use toasts:
+import { ToastProvider } from "${PKG}";
+<ToastProvider><App /></ToastProvider>`;
+async function init(flags) {
+  header("init");
+  const p = requireProject(flags);
+  const isNext = Boolean(p.deps.next);
+  const ask = (q, d = true) => confirm(q, d, flags.yes);
+  log.step("project");
+  log.ok(`${c.bold(String(p.pkg?.name ?? path3.basename(p.root)))} ${c.gray(`\xB7 ${isNext ? "next.js" : "react"} \xB7 ${p.pm}`)}`);
+  const react = installedMajor(p.root, "react", p.deps.react);
+  if (react === null) log.warn("react isn't installed here");
+  else if (react < 19) log.warn(`react ${react} found; ${PKG} is built for react 19`);
+  else log.ok(`react ${react}`);
+  const tw = installedMajor(p.root, "tailwindcss", p.deps.tailwindcss);
+  if (tw !== null && tw >= 4) log.ok(`tailwind css ${tw}`);
+  else {
+    log.warn(tw === null ? "tailwind css isn't installed" : `tailwind css ${tw} found; v4 is needed`);
+    const pkgs = isNext ? ["tailwindcss@4", "@tailwindcss/postcss@4"] : ["tailwindcss@4"];
+    if (flags.install && await ask("install tailwind css v4 now?")) {
+      if (!run(installCommand(p.pm, pkgs), flags, p.root)) log.fail("couldn't install tailwind; try it yourself and run init again");
+    } else log.hint(`later: ${installCommand(p.pm, pkgs).join(" ")}`);
+  }
+  if (p.deps[PKG]) log.ok(`${PKG} ${c.gray(p.deps[PKG])}`);
+  else if (flags.install && await ask(`install ${PKG}?`)) {
+    if (!run(installCommand(p.pm, [PKG]), flags, p.root)) {
+      log.fail(`install failed; run ${installCommand(p.pm, [PKG]).join(" ")} and try again`);
+      process.exit(1);
+    }
+    log.ok(`installed ${PKG}`);
+  } else log.hint(`later: ${installCommand(p.pm, [PKG]).join(" ")}`);
+  log.step("styles");
+  const css = findCss(p);
+  if (!css) {
+    log.warn("couldn't find the stylesheet that imports tailwind");
+    log.hint(`add these lines to it yourself:`);
+    log.line(c.cyan(`
+    @import "tailwindcss";
+    @import "${PKG}/styles.css";
+    @source "<path to>/node_modules/${PKG}";
+`));
+  } else {
+    const before = fs3.readFileSync(path3.join(p.root, css), "utf8");
+    const after = patchCss(before, css, "package");
+    if (!after) log.ok(`${css} is already set up`);
+    else {
+      log.info(`${c.bold(css)} needs:`);
+      printHunks(hunks(diffLines(before, after), 1));
+      if (await ask(`update ${css}?`)) {
+        writeFile(p.root, css, after, flags.dryRun);
+        log.ok(`updated ${css}`);
+      } else log.hint(`skipped; run ${bin} doctor --fix whenever you like`);
+    }
+  }
+  log.step("font & toasts");
+  const layout = findLayout(p.root);
+  const layoutText = layout ? fs3.readFileSync(path3.join(p.root, layout), "utf8") : "";
+  const hasFont = layoutText.includes("--font-archivo");
+  const hasToasts = layoutText.includes("ToastProvider");
+  if (hasFont) log.ok(`archivo is loaded in ${layout}`);
+  if (hasToasts) log.ok(`ToastProvider is in ${layout}`);
+  let layoutDone = hasFont && hasToasts;
+  if (!layoutDone && layout && isNext) {
+    const patched = patchLayout(layoutText, !hasFont, !hasToasts);
+    if (patched) {
+      log.info(`${c.bold(layout)} needs:`);
+      printHunks(hunks(diffLines(layoutText, patched), 1));
+      if (await ask(`update ${layout}?`)) {
+        writeFile(p.root, layout, patched, flags.dryRun);
+        log.ok(`updated ${layout}`);
+        layoutDone = true;
+      }
+    }
+  }
+  if (!layoutDone) {
+    log.info(`add this to ${c.bold(layout ?? "your root layout")}:`);
+    log.line(
+      "\n" + LAYOUT_SNIPPET(isNext).split("\n").map((l) => c.cyan(`    ${l}`)).join("\n") + "\n"
+    );
+  }
+  const config = { componentsDir: componentsDir(p, flags), ...css ? { css } : {} };
+  const cfgText = JSON.stringify(config, null, 2) + "\n";
+  const cfgPath = path3.join(p.root, CONFIG_FILE);
+  if (!fs3.existsSync(cfgPath) || fs3.readFileSync(cfgPath, "utf8") !== cfgText) {
+    writeFile(p.root, CONFIG_FILE, cfgText, flags.dryRun);
+    log.step("config");
+    log.ok(`wrote ${CONFIG_FILE} ${c.gray(`(components go to ${config.componentsDir})`)}`);
+  }
+  log.line(`
+${c.bold("all set!")} ${flags.dryRun ? c.yellow("(dry run, nothing was written)") : ""}`);
+  log.line(`  ${c.gray("use it:")}    import { Button } from "${PKG}";`);
+  log.line(`  ${c.gray("own it:")}    ${bin} add button`);
+  log.line(`  ${c.gray("check it:")}  ${bin} doctor
+`);
+}
+async function add(names, flags) {
+  header("add");
+  const p = requireProject(flags);
+  const dir = componentsDir(p, flags);
+  if (!names.length) {
+    if (!interactive) {
+      log.fail(`which components? e.g. ${bin} add button tabs`);
+      process.exit(1);
+    }
+    log.line();
+    names = await multiselect(
+      "pick components to copy",
+      registry.map((e) => ({
+        value: e.slug,
+        label: e.slug,
+        group: e.category,
+        hint: e.description
+      }))
+    );
+    if (!names.length) {
+      log.line(c.gray("\n  nothing picked, nothing copied.\n"));
+      return;
+    }
+  }
+  const unknown = names.filter((n) => !findEntry(n));
+  if (unknown.length) {
+    log.line();
+    for (const n of unknown) {
+      const s = suggest(n);
+      log.fail(`no component called ${c.bold(n)}${s.length ? c.gray(`. did you mean ${s.map((x) => c.cyan(x)).join(", ")}?`) : ""}`);
+    }
+    log.hint(`see them all with: ${bin} list`);
+    process.exit(1);
+  }
+  const entries = [...new Set(names.map((n) => findEntry(n)))];
+  const files = withDependencies(entries.map((e) => e.file));
+  const extra = files.length - entries.length;
+  log.line();
+  log.info(
+    `copying ${c.bold(entries.map((e) => e.slug).join(", "))}${extra > 0 ? c.gray(` + ${extra} file${extra > 1 ? "s" : ""} they need`) : ""} into ${c.bold(dir)}`
+  );
+  const result = { added: [], updated: [], same: [], skipped: [] };
+  for (const f of files) {
+    const target = `${dir}/${f.name}`;
+    const abs = path3.join(p.root, target);
+    if (fs3.existsSync(abs)) {
+      const current = fs3.readFileSync(abs, "utf8");
+      if (current === f.code) {
+        result.same.push(f.name);
+        continue;
+      }
+      let decision = flags.overwrite ? "overwrite" : "skip";
+      while (!flags.overwrite && interactive && !flags.yes) {
+        decision = await choose(`${c.bold(target)} has your changes.`, [
+          { key: "skip", label: "skip" },
+          { key: "overwrite", label: "overwrite" },
+          { key: "diff", label: "diff" }
+        ], "skip");
+        if (decision !== "diff") break;
+        printHunks(hunks(diffLines(current, f.code)));
+      }
+      if (decision === "overwrite") {
+        writeFile(p.root, target, f.code, flags.dryRun);
+        result.updated.push(f.name);
+      } else result.skipped.push(f.name);
+      continue;
+    }
+    writeFile(p.root, target, f.code, flags.dryRun);
+    result.added.push(f.name);
+  }
+  const css = findCss(p);
+  const cssState = css ? inspectCss(p.root, css) : null;
+  if (!cssState?.styles) {
+    const stylesRel = `${dir}/styles.css`;
+    if (!fs3.existsSync(path3.join(p.root, stylesRel))) {
+      writeFile(p.root, stylesRel, fs3.readFileSync(path3.join(SOURCE_DIR, "styles.css"), "utf8"), flags.dryRun);
+      result.added.push("styles.css");
+    }
+    if (css) {
+      const patched = patchCss(fs3.readFileSync(path3.join(p.root, css), "utf8"), css, "local", stylesRel);
+      if (patched) {
+        writeFile(p.root, css, patched, flags.dryRun);
+        log.ok(`imported the tokens in ${css}`);
+      }
+    } else log.warn(`import ${stylesRel} in your global stylesheet, right after tailwind`);
+  }
+  log.line();
+  for (const n of result.added) log.ok(`${c.green("added")}    ${dir}/${n}`);
+  for (const n of result.updated) log.ok(`${c.yellow("updated")}  ${dir}/${n}`);
+  for (const n of result.same) log.line(`  ${sym.dot} ${c.gray(`same     ${dir}/${n}`)}`);
+  for (const n of result.skipped) log.warn(`${c.yellow("skipped")}  ${dir}/${n} ${c.gray("(kept your changes; --overwrite to replace)")}`);
+  const first = entries[0];
+  log.line(`
+  ${c.gray("import it:")} import { ${first.file} } from "${importPathFor(p, dir, first.file)}";`);
+  if (flags.dryRun) log.line(`  ${c.yellow("dry run, nothing was written")}`);
+  log.line();
+}
+function list(flags) {
+  const p = useProject(readProject(flags.cwd));
+  const dir = p.pkg ? componentsDir(p, flags) : null;
+  const copied = (file) => dir && [".tsx", ".ts"].some((ext) => fs3.existsSync(path3.join(p.root, dir, file + ext)));
+  log.line(`
+${c.bold("blurrow")} ${c.gray(`\xB7 ${registry.length} components`)}
+`);
+  const width = Math.max(...registry.map((e) => e.slug.length)) + 2;
+  for (const cat of categories) {
+    log.line(`  ${c.bold(cat)}`);
+    for (const e of registry.filter((x) => x.category === cat)) {
+      const mark = copied(e.file) ? c.green("\u25CF") : " ";
+      const desc = e.description.length > 64 ? e.description.slice(0, 63) + "\u2026" : e.description;
+      log.line(`  ${mark} ${c.cyan(e.slug.padEnd(width))}${c.gray(desc)}`);
+    }
+    log.line();
+  }
+  log.line(c.gray(`  ${c.green("\u25CF")} copied into ${dir ?? "your project"}   \xB7   ${bin} add <name>
+`));
+}
+function diff(names, flags) {
+  header("diff");
+  const p = requireProject(flags);
+  const dir = componentsDir(p, flags);
+  const copied = registry.filter((e) => [".tsx", ".ts"].some((ext) => fs3.existsSync(path3.join(p.root, dir, e.file + ext))));
+  let targets = copied;
+  if (names.length) {
+    targets = [];
+    for (const n of names) {
+      const e = findEntry(n);
+      if (!e) {
+        const s = suggest(n);
+        log.fail(`no component called ${c.bold(n)}${s.length ? c.gray(`. did you mean ${s.join(", ")}?`) : ""}`);
+        process.exit(1);
+      }
+      if (!copied.includes(e)) {
+        log.fail(`${e.slug} isn't copied into ${dir}`);
+        log.hint(`copy it with: ${bin} add ${e.slug}`);
+        process.exit(1);
+      }
+      targets.push(e);
+    }
+  }
+  if (!targets.length) {
+    log.line();
+    log.info(`no copied components in ${dir}`);
+    log.hint(`if you use the package, there's nothing to diff. to own a component: ${bin} add <name>`);
+    log.line();
+    return;
+  }
+  let changed = 0;
+  log.line();
+  for (const e of targets) {
+    const shipped = sourceFile(e.file);
+    const local = fs3.readFileSync(path3.join(p.root, dir, shipped.name), "utf8");
+    if (local === shipped.code) {
+      log.ok(`${e.slug} ${c.gray("matches v0.2.0")}`);
+      continue;
+    }
+    changed++;
+    const lines = diffLines(shipped.code, local);
+    const plus = lines.filter((l) => l.kind === "+").length;
+    const minus = lines.filter((l) => l.kind === "-").length;
+    log.warn(`${c.bold(e.slug)} ${c.green(`+${plus}`)} ${c.red(`-${minus}`)} ${c.gray(`vs v${"0.2.0"}`)}`);
+    if (names.length) printHunks(hunks(lines));
+  }
+  log.line();
+  if (changed && !names.length) log.hint(`see the changes in one: ${bin} diff <name>`);
+  if (changed) log.hint(`take the shipped version: ${bin} add <name> --overwrite`);
+  log.line();
+}
+function doctor(flags) {
+  header("doctor");
+  const p = requireProject(flags);
+  let problems = 0;
+  let warnings = 0;
+  const fail = (msg, fix) => {
+    problems++;
+    log.fail(msg);
+    if (fix) log.hint(fix);
+  };
+  const warn = (msg, fix) => {
+    warnings++;
+    log.warn(msg);
+    if (fix) log.hint(fix);
+  };
+  log.step("dependencies");
+  const react = installedMajor(p.root, "react", p.deps.react);
+  if (react === null) fail("react isn't installed", installCommand(p.pm, ["react", "react-dom"]).join(" "));
+  else if (react < 19) fail(`react ${react}; the kit needs react 19`, installCommand(p.pm, ["react@19", "react-dom@19"]).join(" "));
+  else log.ok(`react ${react}`);
+  const tw = installedMajor(p.root, "tailwindcss", p.deps.tailwindcss);
+  if (tw === null) fail("tailwind css isn't installed", installCommand(p.pm, ["tailwindcss@4"]).join(" "));
+  else if (tw < 4) fail(`tailwind css ${tw}; the kit needs v4`, "see https://tailwindcss.com/docs/upgrade-guide");
+  else log.ok(`tailwind css ${tw}`);
+  const dir = componentsDir(p, flags);
+  const usesPackage = Boolean(p.deps[PKG]);
+  const copiedCount = registry.filter((e) => [".tsx", ".ts"].some((x) => fs3.existsSync(path3.join(p.root, dir, e.file + x)))).length;
+  if (usesPackage) {
+    const installed = fs3.existsSync(path3.join(p.root, "node_modules", PKG));
+    if (installed) log.ok(`${PKG} ${c.gray(p.deps[PKG])}`);
+    else fail(`${PKG} is in package.json but not installed`, `${p.pm} install`);
+  } else if (copiedCount) log.ok(`${copiedCount} copied component${copiedCount > 1 ? "s" : ""} in ${dir}`);
+  else fail(`${PKG} isn't installed and no components are copied`, `npx ${PKG} init`);
+  log.step("styles");
+  const css = findCss(p);
+  let cssProblems = 0;
+  if (!css) fail("no stylesheet imports tailwind", `add @import "tailwindcss"; to your global css, then run doctor again`);
+  else {
+    const s = inspectCss(p.root, css);
+    let fixable = false;
+    log.ok(`tailwind imported in ${css}`);
+    if (s.styles === "package") log.ok(`tokens imported from ${PKG}/styles.css`);
+    else if (s.styles === "local") log.ok("tokens imported from a local styles.css");
+    else {
+      fixable = true;
+      cssProblems++;
+      fail("the kit's tokens aren't imported", `add @import "${PKG}/styles.css"; after tailwind`);
+    }
+    if (usesPackage) {
+      if (!s.source) {
+        fixable = true;
+        cssProblems++;
+        fail("tailwind can't see the package's classes, so components render unstyled", `add @source "${sourcePathFor(css)}";`);
+      } else if (!s.source.ok) {
+        fixable = true;
+        cssProblems++;
+        fail(`@source "${s.source.line}" points at nothing`, `it should be @source "${sourcePathFor(css)}";`);
+      } else log.ok(`tailwind scans ${s.source.line}`);
+    }
+    if (fixable && flags.fix) {
+      const before = fs3.readFileSync(path3.join(p.root, css), "utf8");
+      const mode = usesPackage ? "package" : "local";
+      const after = patchCss(before, css, mode, mode === "local" ? `${dir}/styles.css` : void 0);
+      if (after) {
+        writeFile(p.root, css, after, flags.dryRun);
+        problems -= cssProblems;
+        log.ok(c.green(`fixed ${css}`) + (flags.dryRun ? c.yellow(" (dry run)") : ""));
+        printHunks(hunks(diffLines(before, after), 1));
+      }
+    } else if (fixable) log.hint(`let doctor fix it: ${bin} doctor --fix`);
+  }
+  log.step("font & toasts");
+  const layout = findLayout(p.root);
+  const sources = walk(p.root, (f) => /\.(tsx|jsx|ts|js|html)$/.test(f));
+  const cache = /* @__PURE__ */ new Map();
+  const read = (f) => {
+    if (!cache.has(f)) cache.set(f, fs3.readFileSync(path3.join(p.root, f), "utf8"));
+    return cache.get(f);
+  };
+  const fontFile = sources.find((f) => read(f).includes("--font-archivo"));
+  if (fontFile) log.ok(`archivo loaded in ${fontFile}`);
+  else warn("archivo isn't loaded, so the kit falls back to the system font", `load it as --font-archivo in ${layout ?? "your root layout"} (${bin} init prints the snippet)`);
+  const usesToast = sources.find((f) => /\buseToast\s*\(/.test(read(f)) && !f.includes(dir));
+  const hasProvider = sources.some((f) => /<ToastProvider/.test(read(f)) && !f.includes(dir));
+  if (usesToast && !hasProvider) fail(`${usesToast} calls useToast() but nothing renders <ToastProvider>`, `wrap your app in <ToastProvider> in ${layout ?? "your root layout"}`);
+  else if (hasProvider) log.ok("ToastProvider is set up");
+  else log.line(`  ${sym.dot} ${c.gray("no toasts used yet")}`);
+  log.line();
+  if (!problems && !warnings) log.line(`${c.green(c.bold("all good!"))} everything's set up.
+`);
+  else
+    log.line(
+      `${problems ? c.red(`${problems} problem${problems > 1 ? "s" : ""}`) : c.green("no problems")}${warnings ? c.gray(", ") + c.yellow(`${warnings} warning${warnings > 1 ? "s" : ""}`) : ""}
+`
+    );
+  if (problems) process.exitCode = 1;
+}
+async function main() {
+  const { command, args, flags } = parse(process.argv.slice(2));
+  if (command === "-v" || command === "--version") return log.line("0.2.0");
+  if (!command || command === "help" || command === "-h" || command === "--help") return log.line(HELP);
+  switch (command) {
+    case "init":
+      return init(flags);
+    case "add":
+      return add(args, flags);
+    case "list":
+    case "ls":
+      return list(flags);
+    case "diff":
+      return diff(args, flags);
+    case "doctor":
+      return doctor(flags);
+    default: {
+      const known = ["init", "add", "list", "diff", "doctor"];
+      const guess = known.find((k) => k.startsWith(command.slice(0, 2)));
+      log.line();
+      log.fail(`unknown command ${c.bold(command)}${guess ? c.gray(`. did you mean ${c.cyan(guess)}?`) : ""}`);
+      log.hint(`${bin} --help`);
+      log.line();
+      process.exitCode = 1;
+    }
+  }
+}
+main().catch((err) => {
+  log.line();
+  log.fail(err instanceof Error ? err.message : String(err));
+  process.exitCode = 1;
+});