oh-my-design-cli 0.1.3 → 1.0.0

package/dist/bin/oh-my-design.js

@@ -1,717 +1,10 @@
 #!/usr/bin/env node
-import {
-  listReferences,
-  loadReference
-} from "../chunk-N2JG6N4Q.js";
-import {
-  applyOverrides,
-  contrastForeground,
-  darken,
-  generateColorScale,
-  hexToHsl,
-  hslToHex,
-  lighten
-} from "../chunk-MHFYGZSO.js";
 
 // bin/oh-my-design.ts
 import { Command } from "commander";
 import { readFileSync, existsSync } from "fs";
 import { dirname, join } from "path";
 import { fileURLToPath } from "url";
-
-// src/cli/index.ts
-import * as p2 from "@clack/prompts";
-import { writeFileSync } from "fs";
-import { resolve } from "path";
-
-// src/cli/prompts.ts
-import * as p from "@clack/prompts";
-import pc from "picocolors";
-async function runPrompts() {
-  p.intro(`${pc.bold("oh-my-design")} \u2014 Generate your DESIGN.md from real design systems`);
-  const refs = listReferences();
-  const categories = [...new Set(refs.map((r) => r.category))];
-  const category = await p.select({
-    message: "Pick a category:",
-    options: categories.map((cat) => {
-      const count = refs.filter((r) => r.category === cat).length;
-      return { value: cat, label: `${cat}`, hint: `${count} references` };
-    })
-  });
-  if (p.isCancel(category)) {
-    p.cancel("Cancelled.");
-    process.exit(0);
-  }
-  const categoryRefs = refs.filter((r) => r.category === category);
-  const refId = await p.select({
-    message: `Select a design system reference:`,
-    options: categoryRefs.map((r) => ({
-      value: r.id,
-      label: `${r.name}`,
-      hint: `${r.primaryColor}`
-    }))
-  });
-  if (p.isCancel(refId)) {
-    p.cancel("Cancelled.");
-    process.exit(0);
-  }
-  const reference = loadReference(refId);
-  p.log.info(`${pc.bold(reference.name)} loaded`);
-  p.log.info(`  Primary: ${pc.bold(reference.colors.primary)} ${reference.colors.primaryName}`);
-  p.log.info(`  Font: ${reference.typography.primary}`);
-  p.log.info(`  Radius: ${reference.radius}`);
-  if (reference.mood) {
-    p.log.info(`  Mood: ${reference.mood.slice(0, 120)}...`);
-  }
-  const mode = await p.select({
-    message: "How do you want to use this design system?",
-    options: [
-      { value: "as-is", label: "Use as-is", hint: "Copy the reference DESIGN.md directly" },
-      { value: "customized", label: "Customize", hint: "Modify colors, fonts, radius, etc." }
-    ]
-  });
-  if (p.isCancel(mode)) {
-    p.cancel("Cancelled.");
-    process.exit(0);
-  }
-  if (mode === "as-is") {
-    const darkMode = await p.confirm({
-      message: "Include dark mode notes?",
-      initialValue: false
-    });
-    if (p.isCancel(darkMode)) {
-      p.cancel("Cancelled.");
-      process.exit(0);
-    }
-    return {
-      reference,
-      overrides: { darkMode },
-      outputMode: "as-is"
-    };
-  }
-  const overrides = await p.group(
-    {
-      primaryColor: () => p.text({
-        message: `Primary color (current: ${reference.colors.primary}):`,
-        placeholder: "Press enter to keep, or type a hex like #6366f1",
-        validate: (val) => {
-          if (val && !/^#[0-9a-fA-F]{6}$/.test(val)) return "Invalid hex color";
-        }
-      }),
-      fontFamily: () => p.select({
-        message: `Primary font (current: ${reference.typography.primary}):`,
-        options: [
-          { value: "", label: `Keep "${reference.typography.primary}"`, hint: "No change" },
-          { value: "Inter", label: "Inter", hint: "Clean, geometric sans-serif" },
-          { value: "system-ui", label: "System UI", hint: "Native OS fonts" },
-          { value: "JetBrains Mono", label: "JetBrains Mono", hint: "Monospace, technical" },
-          { value: "Geist", label: "Geist", hint: "Vercel's modern sans" }
-        ]
-      }),
-      headingWeight: () => p.select({
-        message: `Heading weight (current: ${reference.typography.headingWeight}):`,
-        options: [
-          { value: "", label: `Keep ${reference.typography.headingWeight}`, hint: "No change" },
-          { value: "300", label: "300 \u2014 Light", hint: "Whisper authority (Stripe style)" },
-          { value: "400", label: "400 \u2014 Regular" },
-          { value: "500", label: "500 \u2014 Medium", hint: "Balanced emphasis" },
-          { value: "600", label: "600 \u2014 Semibold", hint: "Strong headings" },
-          { value: "700", label: "700 \u2014 Bold", hint: "Maximum impact" }
-        ]
-      }),
-      borderRadius: () => p.select({
-        message: `Border radius (current: ${reference.radius}):`,
-        options: [
-          { value: "", label: `Keep "${reference.radius}"`, hint: "No change" },
-          { value: "2px", label: "Sharp (2px)", hint: "Technical, precise" },
-          { value: "4px", label: "Tight (4px)", hint: "Conservative" },
-          { value: "6px", label: "Moderate (6px)", hint: "Balanced" },
-          { value: "8px", label: "Comfortable (8px)", hint: "Friendly" },
-          { value: "12px", label: "Rounded (12px)", hint: "Soft, approachable" },
-          { value: "9999px", label: "Pill", hint: "Fully rounded" }
-        ]
-      }),
-      darkMode: () => p.confirm({
-        message: "Generate dark mode variant?",
-        initialValue: false
-      }),
-      additionalNotes: () => p.text({
-        message: "Any additional customization notes? (optional)",
-        placeholder: 'e.g. "Use more warm tones" or press enter to skip'
-      })
-    },
-    {
-      onCancel: () => {
-        p.cancel("Cancelled.");
-        process.exit(0);
-      }
-    }
-  );
-  return {
-    reference,
-    overrides: {
-      primaryColor: overrides.primaryColor || void 0,
-      fontFamily: overrides.fontFamily || void 0,
-      headingWeight: overrides.headingWeight || void 0,
-      borderRadius: overrides.borderRadius || void 0,
-      darkMode: overrides.darkMode,
-      additionalNotes: overrides.additionalNotes || void 0
-    },
-    outputMode: "customized"
-  };
-}
-
-// src/core/preview-generator.ts
-function generatePreviewHtml(data) {
-  const {
-    name,
-    basedOn,
-    primary,
-    background,
-    foreground,
-    font,
-    headingWeight,
-    radius,
-    colors,
-    darkMode,
-    shadcnCss
-  } = data;
-  const isLightBg = isLight(background);
-  const scale = generateColorScale(primary);
-  const radiusPx = radius === "9999px" ? "24px" : radius;
-  const borderColor = colors.border;
-  const accent = colors.accent;
-  const muted = colors.muted;
-  const chart = colors.chart;
-  const darkBg = hslToHex(hexToHsl(primary)[0], 15, 7);
-  const darkFg = "#fafafa";
-  const darkBorder = hslToHex(hexToHsl(primary)[0], 10, 18);
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>${esc(name)} \u2014 Design System Preview</title>
-<style>
-  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-  :root {
-    --bg: ${background};
-    --fg: ${foreground};
-    --primary: ${primary};
-    --primary-fg: ${contrastForeground(primary)};
-    --accent: ${accent};
-    --muted: ${muted};
-    --muted-fg: ${lighten(foreground, 40)};
-    --border: ${borderColor};
-    --destructive: #ef4444;
-    --card: ${isLightBg ? "#ffffff" : lighten(background, 3)};
-    --radius: ${radiusPx};
-  }
-
-  .dark {
-    --bg: ${darkBg};
-    --fg: ${darkFg};
-    --card: ${lighten(darkBg, 3)};
-    --muted: ${hslToHex(hexToHsl(primary)[0], 10, 15)};
-    --muted-fg: ${darken(darkFg, 35)};
-    --border: ${darkBorder};
-  }
-
-  body {
-    font-family: "${font}", "Inter", system-ui, sans-serif;
-    background: var(--bg);
-    color: var(--fg);
-    line-height: 1.5;
-    transition: background 0.25s, color 0.25s;
-  }
-
-  .shell { max-width: 1100px; margin: 0 auto; padding: 40px 24px 80px; }
-
-  /* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-  .header {
-    display: flex; justify-content: space-between; align-items: center;
-    padding-bottom: 24px; margin-bottom: 40px;
-    border-bottom: 1px solid var(--border);
-  }
-  .header h1 {
-    font-size: 2rem; font-weight: ${headingWeight};
-    letter-spacing: -0.02em;
-  }
-  .header .sub {
-    font-size: 0.875rem; color: var(--muted-fg); margin-top: 4px;
-  }
-  .controls { display: flex; gap: 8px; }
-  .ctrl-btn {
-    padding: 8px 16px; border-radius: var(--radius);
-    font-size: 0.8125rem; font-family: inherit; cursor: pointer;
-    transition: all 0.15s; border: 1px solid var(--border);
-    background: var(--card); color: var(--fg);
-  }
-  .ctrl-btn:hover { opacity: 0.85; }
-  .ctrl-btn.primary { background: var(--primary); color: var(--primary-fg); border-color: transparent; }
-
-  /* \u2500\u2500 Sections \u2500\u2500\u2500\u2500\u2500 */
-  .section { margin-bottom: 48px; }
-  .section-title {
-    font-size: 1.375rem; font-weight: ${headingWeight};
-    letter-spacing: -0.01em; margin-bottom: 16px;
-  }
-  .section-sub { font-size: 0.8125rem; color: var(--muted-fg); margin-bottom: 16px; }
-
-  /* \u2500\u2500 Color Scale \u2500\u2500 */
-  .scale-row {
-    display: flex; border-radius: var(--radius); overflow: hidden;
-    border: 1px solid var(--border); margin-bottom: 24px;
-  }
-  .scale-stop {
-    flex: 1; padding: 28px 4px 8px; text-align: center;
-    font-size: 10px; font-family: monospace; cursor: pointer;
-    transition: transform 0.1s; position: relative;
-  }
-  .scale-stop:hover { z-index: 1; transform: scaleY(1.12); }
-  .scale-stop .lbl { display: block; opacity: 0.7; margin-bottom: 2px; }
-  .scale-stop .hex {
-    background: rgba(0,0,0,0.2); color: #fff;
-    padding: 1px 4px; border-radius: 3px; font-size: 9px;
-  }
-
-  /* \u2500\u2500 Color Chips \u2500\u2500 */
-  .chip-grid {
-    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
-  }
-  .chip {
-    border-radius: var(--radius); overflow: hidden;
-    border: 1px solid var(--border); cursor: pointer;
-    transition: transform 0.15s, box-shadow 0.15s;
-  }
-  .chip:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
-  .chip .sw { height: 64px; display: flex; align-items: end; padding: 6px; }
-  .chip .sw span {
-    font-size: 10px; font-family: monospace;
-    background: rgba(0,0,0,0.25); color: #fff;
-    padding: 1px 5px; border-radius: 3px;
-  }
-  .chip .inf { padding: 8px; background: var(--card); }
-  .chip .inf .n { font-size: 0.75rem; font-weight: 500; }
-  .chip .inf .v { font-size: 10px; color: var(--muted-fg); font-family: monospace; }
-
-  /* \u2500\u2500 Typography \u2500\u2500 */
-  .type-rows { display: flex; flex-direction: column; gap: 8px; }
-  .type-row {
-    display: flex; align-items: baseline; gap: 16px;
-    padding: 12px 16px; border-radius: var(--radius);
-    background: var(--card); border: 1px solid var(--border);
-  }
-  .type-row .lbl {
-    min-width: 48px; font-size: 0.75rem; color: var(--muted-fg);
-    font-family: monospace; flex-shrink: 0;
-  }
-  .type-row .sample { flex: 1; }
-
-  /* \u2500\u2500 Components \u2500\u2500 */
-  .comp-card {
-    padding: 24px; border-radius: var(--radius);
-    background: var(--card); border: 1px solid var(--border);
-    margin-bottom: 16px;
-  }
-  .comp-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 16px; }
-  .comp-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
-
-  .btn {
-    display: inline-flex; align-items: center; justify-content: center;
-    font-family: inherit; font-weight: 500; cursor: pointer;
-    transition: all 0.15s; border: none; font-size: 0.8125rem;
-    padding: 8px 16px; height: 36px; border-radius: var(--radius);
-  }
-  .btn-primary { background: var(--primary); color: var(--primary-fg); }
-  .btn-secondary { background: var(--muted); color: var(--fg); }
-  .btn-outline { background: transparent; color: var(--fg); border: 1px solid var(--border); }
-  .btn-ghost { background: transparent; color: var(--fg); }
-  .btn-destructive { background: var(--destructive); color: #fff; }
-  .btn:hover { opacity: 0.9; }
-
-  .badge {
-    display: inline-flex; font-size: 0.6875rem; font-weight: 500;
-    padding: 2px 10px; border-radius: 9999px;
-  }
-  .badge-primary { background: var(--primary); color: var(--primary-fg); }
-  .badge-secondary { background: var(--muted); color: var(--fg); }
-  .badge-outline { background: transparent; color: var(--fg); border: 1px solid var(--border); }
-
-  .input-demo {
-    width: 100%; max-width: 320px; font-family: inherit;
-    background: var(--bg); color: var(--fg);
-    border: 1px solid var(--border); border-radius: var(--radius);
-    padding: 8px 12px; font-size: 0.8125rem; outline: none;
-    transition: border-color 0.15s;
-  }
-  .input-demo:focus {
-    border-color: var(--primary);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
-  }
-
-  .demo-table {
-    width: 100%; border-collapse: collapse; font-size: 0.8125rem;
-  }
-  .demo-table th, .demo-table td {
-    padding: 10px 12px; text-align: left;
-    border-bottom: 1px solid var(--border);
-  }
-  .demo-table th {
-    font-weight: 500; color: var(--muted-fg);
-    font-size: 0.75rem; text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-  .demo-table tr:hover td { background: var(--muted); }
-
-  .demo-card {
-    padding: 20px; border-radius: var(--radius);
-    background: var(--card); border: 1px solid var(--border);
-    max-width: 340px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
-  }
-  .demo-card h4 { font-weight: 600; margin-bottom: 6px; }
-  .demo-card p { font-size: 0.8125rem; color: var(--muted-fg); margin-bottom: 14px; }
-
-  .demo-dialog {
-    padding: 24px; border-radius: var(--radius);
-    background: var(--card); box-shadow: 0 20px 40px rgba(0,0,0,0.15);
-    max-width: 400px; border: 1px solid var(--border);
-  }
-  .demo-dialog h4 { font-weight: 600; margin-bottom: 8px; }
-  .demo-dialog p { font-size: 0.8125rem; color: var(--muted-fg); margin-bottom: 16px; }
-  .demo-dialog .acts { display: flex; justify-content: flex-end; gap: 8px; }
-
-  .tabs {
-    display: flex; background: var(--muted); border-radius: var(--radius); padding: 4px; gap: 2px;
-  }
-  .tab {
-    padding: 6px 14px; border-radius: calc(var(--radius) - 2px);
-    font-size: 0.8125rem; font-family: inherit; font-weight: 500;
-    border: none; cursor: pointer; background: transparent;
-    color: var(--muted-fg); transition: all 0.15s;
-  }
-  .tab.active {
-    background: var(--bg); color: var(--fg);
-    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
-  }
-  .tab:hover:not(.active) { color: var(--fg); }
-
-  /* \u2500\u2500 CSS Block \u2500\u2500\u2500\u2500 */
-  .css-block {
-    position: relative; background: var(--card);
-    border: 1px solid var(--border); border-radius: var(--radius);
-    overflow: hidden;
-  }
-  .css-block pre {
-    padding: 20px; overflow-x: auto; font-family: monospace;
-    font-size: 11px; line-height: 1.6; color: var(--fg);
-  }
-  .css-block .copy-css { position: absolute; top: 8px; right: 8px; }
-
-  /* \u2500\u2500 Spacing \u2500\u2500\u2500\u2500\u2500\u2500 */
-  .spacing-vis {
-    display: flex; align-items: end; gap: 8px; padding: 24px;
-    background: var(--card); border: 1px solid var(--border);
-    border-radius: var(--radius);
-  }
-  .sp-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; }
-  .sp-bar .bar { background: var(--primary); border-radius: 2px; width: 28px; }
-  .sp-bar .val { font-size: 10px; font-family: monospace; color: var(--muted-fg); }
-
-  /* \u2500\u2500 Radius \u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-  .radius-grid { display: flex; gap: 16px; flex-wrap: wrap; }
-  .radius-demo {
-    width: 72px; height: 72px; background: var(--primary);
-    display: flex; align-items: center; justify-content: center;
-    color: var(--primary-fg); font-size: 0.6875rem; font-family: monospace;
-  }
-
-  /* \u2500\u2500 Toast \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-  .toast-popup {
-    position: fixed; bottom: 24px; right: 24px;
-    padding: 10px 20px; background: var(--fg); color: var(--bg);
-    border-radius: var(--radius); font-size: 0.8125rem;
-    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
-    transform: translateY(100px); opacity: 0;
-    transition: all 0.3s; z-index: 100;
-  }
-  .toast-popup.show { transform: translateY(0); opacity: 1; }
-
-  @media (max-width: 768px) {
-    .shell { padding: 16px 12px 48px; }
-    .header { flex-direction: column; gap: 12px; align-items: flex-start; }
-    .chip-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
-  }
-</style>
-</head>
-<body>
-<div class="shell">
-
-  <div class="header">
-    <div>
-      <h1>${esc(name)}</h1>
-      <div class="sub">Based on ${esc(basedOn)} &middot; Generated by oh-my-design</div>
-    </div>
-    <div class="controls">
-      ${darkMode ? '<button class="ctrl-btn" onclick="toggleTheme()" id="theme-btn">\u{1F319} Dark</button>' : ""}
-      <button class="ctrl-btn primary" onclick="copyCss()">Copy CSS</button>
-    </div>
-  </div>
-
-  <!-- Primary Scale -->
-  <div class="section">
-    <h2 class="section-title">Primary Color Scale</h2>
-    <div class="section-sub">Click to copy hex value</div>
-    <div class="scale-row">
-${Object.entries(scale).map(([stop, hex]) => `      <div class="scale-stop" style="background:${hex};color:${isLight(hex) ? "#000" : "#fff"}" onclick="copy('${hex}')">
-        <span class="lbl">${stop}</span><span class="hex">${hex}</span>
-      </div>`).join("\n")}
-    </div>
-  </div>
-
-  <!-- Semantic Colors -->
-  <div class="section">
-    <h2 class="section-title">Semantic Colors</h2>
-    <div class="chip-grid">
-${[
-    { n: "Primary", bg: primary, v: "--primary" },
-    { n: "Accent", bg: accent, v: "--accent" },
-    { n: "Muted", bg: muted, v: "--muted" },
-    { n: "Destructive", bg: "#ef4444", v: "--destructive" },
-    { n: "Background", bg: background, v: "--background" },
-    { n: "Foreground", bg: foreground, v: "--foreground" },
-    { n: "Border", bg: borderColor, v: "--border" },
-    { n: "Card", bg: isLightBg ? "#ffffff" : lighten(background, 3), v: "--card" }
-  ].map((c) => `      <div class="chip" onclick="copy('${c.bg}')">
-        <div class="sw" style="background:${c.bg}"><span>${c.bg}</span></div>
-        <div class="inf"><div class="n">${c.n}</div><div class="v">${c.v}</div></div>
-      </div>`).join("\n")}
-    </div>
-  </div>
-
-  <!-- Chart Colors -->
-  <div class="section">
-    <h2 class="section-title">Chart Colors</h2>
-    <div style="display:flex;gap:8px;">
-${chart.map((c, i) => `      <div style="width:48px;height:48px;border-radius:var(--radius);background:${c};cursor:pointer;" onclick="copy('${c}')" title="Chart ${i + 1}: ${c}"></div>`).join("\n")}
-    </div>
-  </div>
-
-  <!-- Typography -->
-  <div class="section">
-    <h2 class="section-title">Typography</h2>
-    <div class="type-rows">
-      <div class="type-row">
-        <span class="lbl">H1</span>
-        <span class="sample" style="font-size:2.25rem;font-weight:${headingWeight};letter-spacing:-0.02em;line-height:1.2">Page Title Heading</span>
-      </div>
-      <div class="type-row">
-        <span class="lbl">H2</span>
-        <span class="sample" style="font-size:1.875rem;font-weight:${headingWeight};letter-spacing:-0.01em;line-height:1.25">Section Heading</span>
-      </div>
-      <div class="type-row">
-        <span class="lbl">H3</span>
-        <span class="sample" style="font-size:1.5rem;font-weight:${headingWeight};line-height:1.3">Subsection</span>
-      </div>
-      <div class="type-row">
-        <span class="lbl">body</span>
-        <span class="sample" style="font-size:1rem;">The quick brown fox jumps over the lazy dog. \uB2E4\uB78C\uC950 \uD5CC \uCCC7\uBC14\uD034\uC5D0 \uD0C0\uACE0\uD30C.</span>
-      </div>
-      <div class="type-row">
-        <span class="lbl">sm</span>
-        <span class="sample" style="font-size:0.875rem;color:var(--muted-fg)">Secondary text, labels, and metadata</span>
-      </div>
-      <div class="type-row">
-        <span class="lbl">mono</span>
-        <span class="sample" style="font-family:monospace;font-size:0.875rem">const theme = generateDesignSystem();</span>
-      </div>
-    </div>
-  </div>
-
-  <!-- Radius -->
-  <div class="section">
-    <h2 class="section-title">Border Radius</h2>
-    <div class="radius-grid">
-      <div style="text-align:center"><div class="radius-demo" style="border-radius:0">0</div><div style="font-size:10px;margin-top:4px;color:var(--muted-fg)">none</div></div>
-      <div style="text-align:center"><div class="radius-demo" style="border-radius:${radiusPx}">${radiusPx}</div><div style="font-size:10px;margin-top:4px;color:var(--muted-fg)">base</div></div>
-      <div style="text-align:center"><div class="radius-demo" style="border-radius:${parseInt(radiusPx) * 2}px">${parseInt(radiusPx) * 2}px</div><div style="font-size:10px;margin-top:4px;color:var(--muted-fg)">lg</div></div>
-      <div style="text-align:center"><div class="radius-demo" style="border-radius:9999px">pill</div><div style="font-size:10px;margin-top:4px;color:var(--muted-fg)">full</div></div>
-    </div>
-  </div>
-
-  <!-- Components -->
-  <div class="section">
-    <h2 class="section-title">Components</h2>
-
-    <!-- Buttons -->
-    <div class="comp-card">
-      <h3>Buttons</h3>
-      <div class="comp-row">
-        <button class="btn btn-primary">Primary</button>
-        <button class="btn btn-secondary">Secondary</button>
-        <button class="btn btn-outline">Outline</button>
-        <button class="btn btn-ghost">Ghost</button>
-        <button class="btn btn-destructive">Delete</button>
-      </div>
-    </div>
-
-    <!-- Badges -->
-    <div class="comp-card">
-      <h3>Badges</h3>
-      <div class="comp-row">
-        <span class="badge badge-primary">Active</span>
-        <span class="badge badge-secondary">Draft</span>
-        <span class="badge badge-outline">Archived</span>
-      </div>
-    </div>
-
-    <!-- Input -->
-    <div class="comp-card">
-      <h3>Input</h3>
-      <div style="display:flex;flex-direction:column;gap:12px;max-width:400px;">
-        <div>
-          <label style="font-size:0.8125rem;font-weight:500;display:block;margin-bottom:4px;">Email</label>
-          <input class="input-demo" type="email" placeholder="you@example.com">
-        </div>
-        <div>
-          <label style="font-size:0.8125rem;font-weight:500;display:block;margin-bottom:4px;">Password</label>
-          <input class="input-demo" type="password" placeholder="\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022">
-        </div>
-      </div>
-    </div>
-
-    <!-- Card -->
-    <div class="comp-card">
-      <h3>Card</h3>
-      <div class="comp-row" style="align-items:stretch;">
-        <div class="demo-card">
-          <h4>Project Overview</h4>
-          <p>A summary card showing key metrics and status for your project.</p>
-          <button class="btn btn-primary" style="height:32px;font-size:0.75rem;">View Details</button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Table -->
-    <div class="comp-card">
-      <h3>Table</h3>
-      <div style="overflow-x:auto;">
-        <table class="demo-table">
-          <thead><tr><th>Name</th><th>Status</th><th>Role</th><th>Email</th></tr></thead>
-          <tbody>
-            <tr><td>Kim Minjae</td><td><span class="badge badge-primary" style="font-size:10px;">Active</span></td><td>Developer</td><td>minjae@example.com</td></tr>
-            <tr><td>Lee Soyeon</td><td><span class="badge badge-secondary" style="font-size:10px;">Pending</span></td><td>Designer</td><td>soyeon@example.com</td></tr>
-            <tr><td>Park Jiwoo</td><td><span class="badge badge-outline" style="font-size:10px;">Inactive</span></td><td>PM</td><td>jiwoo@example.com</td></tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
-    <!-- Dialog -->
-    <div class="comp-card">
-      <h3>Dialog</h3>
-      <div class="demo-dialog">
-        <h4>Delete item?</h4>
-        <p>This action cannot be undone.</p>
-        <div class="acts">
-          <button class="btn btn-outline" style="height:32px;">Cancel</button>
-          <button class="btn btn-destructive" style="height:32px;">Delete</button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Tabs -->
-    <div class="comp-card">
-      <h3>Tabs</h3>
-      <div class="tabs">
-        <button class="tab active">Overview</button>
-        <button class="tab">Analytics</button>
-        <button class="tab">Settings</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- shadcn CSS -->
-  <div class="section">
-    <h2 class="section-title">shadcn/ui CSS Variables</h2>
-    <div class="section-sub">Ready to paste into globals.css</div>
-    <div class="css-block">
-      <button class="ctrl-btn copy-css" onclick="copyCss()" style="position:absolute;top:8px;right:8px;">Copy</button>
-      <pre id="css-output">${escHtml(shadcnCss)}</pre>
-    </div>
-  </div>
-
-</div>
-
-<div class="toast-popup" id="toast">Copied!</div>
-
-<script>
-let isDark = false;
-function toggleTheme() {
-  isDark = !isDark;
-  document.body.classList.toggle('dark', isDark);
-  const btn = document.getElementById('theme-btn');
-  if (btn) btn.textContent = isDark ? '\u2600\uFE0F Light' : '\u{1F319} Dark';
-}
-function showToast(msg) {
-  const el = document.getElementById('toast');
-  el.textContent = msg;
-  el.classList.add('show');
-  setTimeout(() => el.classList.remove('show'), 1800);
-}
-function copy(val) {
-  navigator.clipboard.writeText(val).then(() => showToast('Copied: ' + val));
-}
-function copyCss() {
-  const css = document.getElementById('css-output').textContent;
-  navigator.clipboard.writeText(css).then(() => showToast('CSS variables copied!'));
-}
-document.querySelectorAll('.tab').forEach(t => {
-  t.addEventListener('click', () => {
-    t.parentElement.querySelectorAll('.tab').forEach(x => x.classList.remove('active'));
-    t.classList.add('active');
-  });
-});
-</script>
-</body>
-</html>`;
-}
-function isLight(hex) {
-  const h = hex.replace("#", "");
-  const r = parseInt(h.slice(0, 2), 16);
-  const g = parseInt(h.slice(2, 4), 16);
-  const b = parseInt(h.slice(4, 6), 16);
-  return (r * 299 + g * 587 + b * 114) / 1e3 > 140;
-}
-function esc(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-function escHtml(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-
-// src/cli/index.ts
-async function run() {
-  const { reference, overrides, outputMode } = await runPrompts();
-  const s = p2.spinner();
-  s.start(`Building design system based on ${reference.name}...`);
-  const { designMd, shadcnCss, previewData } = applyOverrides(reference, overrides, outputMode);
-  previewData.shadcnCss = shadcnCss;
-  previewData.designMd = designMd;
-  const html = generatePreviewHtml(previewData);
-  const outputDir = process.cwd();
-  const mdPath = resolve(outputDir, "DESIGN.md");
-  const htmlPath = resolve(outputDir, "DESIGN.preview.html");
-  writeFileSync(mdPath, designMd, "utf-8");
-  writeFileSync(htmlPath, html, "utf-8");
-  s.stop("Done!");
-  p2.log.success(`DESIGN.md       \u2192 ${mdPath}`);
-  p2.log.success(`Preview HTML    \u2192 ${htmlPath}`);
-  p2.outro("Open DESIGN.preview.html in your browser to explore your design system.");
-}
-
-// bin/oh-my-design.ts
 function readPackageVersion() {
   let cur = dirname(fileURLToPath(import.meta.url));
   for (let i = 0; i < 8; i++) {
@@ -730,61 +23,10 @@ function readPackageVersion() {
   return "0.0.0";
 }
 var program = new Command();
-program.name("oh-my-design").description("Interactive CLI to generate DESIGN.md files for AI coding agents").version(readPackageVersion()).showSuggestionAfterError(true).showHelpAfterError(true);
-program.command("generate").description("Generate DESIGN.md and interactive preview").option("--config <hash>", "Apply a config hash from the web builder").action(async (opts) => {
-  if (opts.config) {
-    const { writeFileSync: writeFileSync2 } = await import("fs");
-    const { resolve: resolve2 } = await import("path");
-    let b64 = opts.config.replace(/-/g, "+").replace(/_/g, "/");
-    while (b64.length % 4) b64 += "=";
-    const decoded = Buffer.from(b64, "base64").toString("utf-8");
-    const parts = decoded.split("|");
-    const refId = parts[0] || "vercel";
-    const overrides = {
-      primaryColor: parts[1] || void 0,
-      fontFamily: parts[2] || void 0,
-      headingWeight: parts[3] || void 0,
-      borderRadius: parts[4] || void 0,
-      darkMode: parts[5] === "1"
-    };
-    const components = parts[6] ? parts[6].split(",").filter(Boolean) : [];
-    const stylePrefs = {};
-    if (parts[7]) {
-      for (const pair of parts[7].split(";")) {
-        const [k, v] = pair.split("=");
-        if (k && v) stylePrefs[k] = v;
-      }
-    }
-    const { loadReference: loadReference2 } = await import("../reference-parser-TM3CJPNE.js");
-    const { applyOverrides: applyOverrides2 } = await import("../customizer-CM76752R.js");
-    const ref = loadReference2(refId);
-    const mode = overrides.primaryColor || overrides.fontFamily ? "customized" : "as-is";
-    const { designMd, shadcnCss, previewData } = applyOverrides2(ref, {
-      primaryColor: overrides.primaryColor,
-      fontFamily: overrides.fontFamily,
-      headingWeight: overrides.headingWeight,
-      borderRadius: overrides.borderRadius,
-      darkMode: overrides.darkMode
-    }, mode, components);
-    previewData.shadcnCss = shadcnCss;
-    previewData.designMd = designMd;
-    const outputDir = process.cwd();
-    const mdPath = resolve2(outputDir, "DESIGN.md");
-    writeFileSync2(mdPath, designMd, "utf-8");
-    console.log(`\x1B[32m\u2713\x1B[0m DESIGN.md generated at ${mdPath}`);
-    console.log(`  Based on: ${ref.name}`);
-    if (overrides.primaryColor) console.log(`  Primary: ${overrides.primaryColor}`);
-    if (overrides.fontFamily) console.log(`  Font: ${overrides.fontFamily}`);
-    if (overrides.headingWeight) console.log(`  Weight: ${overrides.headingWeight}`);
-    if (overrides.borderRadius) console.log(`  Radius: ${overrides.borderRadius}`);
-    if (overrides.darkMode) console.log(`  Dark mode: included`);
-  } else {
-    await run();
-  }
-});
-program.command("install-skills").description("Install omd:* skill files into agent directories (.claude/, .codex/, .opencode/)").option("--dir <path>", "Project root (defaults to cwd)").option("--agent <name...>", "Restrict to specific agents (claude-code | codex | opencode)").option("--force", "Overwrite existing files even without the omd marker").action(
+program.name("oh-my-design").description("Bootstrap oh-my-design skills + agents into your project. After install, talk to your agent in natural language \u2014 no other CLI commands.").version(readPackageVersion()).showSuggestionAfterError(true).showHelpAfterError(true);
+program.command("install-skills").description("Install omd skill files + canonical agents into agent directories (.claude/, .codex/, .opencode/)").option("--dir <path>", "Project root (defaults to cwd)").option("--agent <name...>", "Restrict to specific agents (claude-code | codex | opencode)").option("--force", "Overwrite existing files even without the omd marker").action(
   async (opts) => {
-    const { runInstallSkills } = await import("../install-skills-CM6VXFZJ.js");
+    const { runInstallSkills } = await import("../install-skills-SVIYKXOE.js");
     const validAgents = ["claude-code", "codex", "opencode"];
     const agents = opts.agent ? opts.agent.filter(
       (a) => validAgents.includes(a)
@@ -797,62 +39,5 @@ program.command("install-skills").description("Install omd:* skill files into ag
     if (code !== 0) process.exit(code);
   }
 );
-var referenceCmd = program.command("reference").description("Inspect bundled design references");
-referenceCmd.command("list").description("List all bundled reference ids").action(async () => {
-  const { runReferenceList } = await import("../reference-YMNAOXJQ.js");
-  process.exit(runReferenceList());
-});
-referenceCmd.command("show <id>").description("Print the full reference DESIGN.md to stdout").action(async (id) => {
-  const { runReferenceShow } = await import("../reference-YMNAOXJQ.js");
-  process.exit(runReferenceShow(id));
-});
-var initCmd = program.command("init").description("Bootstrap DESIGN.md from a reference + project description");
-initCmd.command("recommend <description...>").description("Recommend references matching a project description").option("--top <n>", "Number of recommendations", "5").option("--json", "Emit machine-readable JSON").action(
-  async (descParts, opts) => {
-    const { runInitRecommend } = await import("../init-UMM4XIV5.js");
-    const code = runInitRecommend({
-      description: descParts.join(" "),
-      topK: opts.top ? Number(opts.top) : 5,
-      json: opts.json
-    });
-    if (code !== 0) process.exit(code);
-  }
-);
-initCmd.command("prepare").description("Stage init context: rename existing DESIGN.md, compute delta_set, write .omd/init-context.json").requiredOption("--ref <id>", "Reference id (e.g. vercel, linear.app)").requiredOption("--description <text>", "Project description").option("--dir <path>", "Project root (defaults to cwd)").option("--reason <text>", "Reason for deprecation header", "user-initiated omd init").option("--json", "Emit machine-readable JSON").action(async (opts) => {
-  const { runInitPrepare } = await import("../init-UMM4XIV5.js");
-  const code = runInitPrepare(opts);
-  if (code !== 0) process.exit(code);
-});
-program.command("learn").description("List preferences and flip status (applied/rejected)").option("--dir <path>", "Project root (defaults to cwd)").option("--all", "Include all statuses (default: pending only)").option("--status <s>", "Filter by status: pending|applied|rejected|superseded").option("--scope <s>", "Filter by scope").option("--mark-applied <id>", "Mark entry as applied").option("--mark-rejected <id>", "Mark entry as rejected (requires --reason)").option("--reason <text>", "Reason for rejection").option("--hash <value>", "DESIGN.md hash to stamp on applied entry (defaults to current file)").action(async (opts) => {
-  const { runLearn } = await import("../learn-33LHKEJA.js");
-  const code = await runLearn(opts);
-  if (code !== 0) process.exit(code);
-});
-program.command("remember <note...>").description("Append a design preference/correction to .omd/preferences.md").option("--dir <path>", "Project root (defaults to cwd)").option("--scope <scope>", "Explicit scope (e.g. color, components.button)").option("--agent <name>", "Source agent (e.g. claude-code, codex)").option("--context <text>", "Source file/line context").action(
-  async (noteParts, opts) => {
-    const { runRemember } = await import("../remember-UAFA5B2O.js");
-    const code = await runRemember(noteParts.join(" "), opts);
-    if (code !== 0) process.exit(code);
-  }
-);
-program.command("sync").description("Sync DESIGN.md shim files (CLAUDE.md, AGENTS.md, .cursor/rules/omd-design.mdc)").option("--dir <path>", "Project root (defaults to cwd)").option("--force", "Overwrite drift without prompting").option("--check", "Exit non-zero if any shim has drift; do not write").action(async (opts) => {
-  const { runSync } = await import("../sync-FDYRKNFE.js");
-  const code = await runSync(opts);
-  if (code !== 0) process.exit(code);
-});
-program.command("preview").description("Open the preview HTML in the default browser").action(async () => {
-  const { existsSync: existsSync2 } = await import("fs");
-  const { resolve: resolve2 } = await import("path");
-  const previewPath = resolve2(process.cwd(), "DESIGN.preview.html");
-  if (!existsSync2(previewPath)) {
-    console.error("No DESIGN.preview.html found. Run `oh-my-design generate` first.");
-    process.exit(1);
-  }
-  const { exec } = await import("child_process");
-  const platform = process.platform;
-  const cmd = platform === "darwin" ? "open" : platform === "win32" ? "start" : "xdg-open";
-  exec(`${cmd} "${previewPath}"`);
-  console.log(`Opening ${previewPath}...`);
-});
 program.parse();
 //# sourceMappingURL=oh-my-design.js.map