reend-components 1.0.0 → 1.2.0

package/dist/bin/cli.cjs

@@ -8813,201 +8813,10 @@ var chalk = createChalk();
 var chalkStderr = createChalk({ level: stderrColor ? stderrColor.level : 0 });
 var source_default = chalk;
 
-// src/cli/commands/init.ts
-var import_node_fs2 = require("node:fs");
-var import_node_path2 = require("node:path");
-var import_prompts = __toESM(require_prompts3(), 1);
-
-// src/cli/utils.ts
-var import_node_fs = require("node:fs");
-var import_node_path = require("node:path");
-var CONFIG_FILE = "reend-ui.config.json";
-function readConfig(cwd2) {
-  const configPath = (0, import_node_path.join)(cwd2, CONFIG_FILE);
-  if (!(0, import_node_fs.existsSync)(configPath)) return null;
-  try {
-    return JSON.parse((0, import_node_fs.readFileSync)(configPath, "utf-8"));
-  } catch {
-    return null;
-  }
-}
-function writeConfig(cwd2, config) {
-  const configPath = (0, import_node_path.join)(cwd2, CONFIG_FILE);
-  (0, import_node_fs.writeFileSync)(configPath, JSON.stringify(config, null, 2) + "\n", "utf-8");
-}
-function detectFramework(cwd2) {
-  const pkgPath = (0, import_node_path.join)(cwd2, "package.json");
-  if (!(0, import_node_fs.existsSync)(pkgPath)) return "vite";
-  try {
-    const pkg = JSON.parse((0, import_node_fs.readFileSync)(pkgPath, "utf-8"));
-    const allDeps = {
-      ...pkg.dependencies,
-      ...pkg.devDependencies
-    };
-    if (allDeps["next"]) return "next";
-    if (allDeps["@remix-run/react"]) return "remix";
-    if (allDeps["gatsby"]) return "gatsby";
-    return "vite";
-  } catch {
-    return "vite";
-  }
-}
-function detectTypeScript(cwd2) {
-  return (0, import_node_fs.existsSync)((0, import_node_path.join)(cwd2, "tsconfig.json")) || (0, import_node_fs.existsSync)((0, import_node_path.join)(cwd2, "tsconfig.app.json"));
-}
-function detectTailwindConfig(cwd2) {
-  const candidates = [
-    "tailwind.config.ts",
-    "tailwind.config.js",
-    "tailwind.config.mjs"
-  ];
-  for (const f of candidates) {
-    if ((0, import_node_fs.existsSync)((0, import_node_path.join)(cwd2, f))) return f;
-  }
-  return void 0;
-}
-async function fetchText(url) {
-  const res = await fetch(url);
-  if (!res.ok) {
-    throw new Error(`HTTP ${res.status} ${res.statusText} \u2014 ${url}`);
-  }
-  return res.text();
-}
-var log = {
-  info: (msg) => console.log(`  ${source_default.cyan("\u25C6")} ${msg}`),
-  success: (msg) => console.log(`  ${source_default.green("\u25C6")} ${source_default.green(msg)}`),
-  warn: (msg) => console.log(`  ${source_default.yellow("\u25C7")} ${source_default.yellow(msg)}`),
-  error: (msg) => console.error(`  ${source_default.red("\u2715")} ${source_default.red(msg)}`),
-  step: (msg) => console.log(`  ${source_default.dim("\u203A")} ${msg}`),
-  blank: () => console.log(),
-  header: (msg) => console.log(
-    `
-${source_default.bold.white("\u25C6")} ${source_default.bold.white(msg.toUpperCase())}
-`
-  )
-};
-
-// src/cli/commands/init.ts
-async function runInit(cwd2) {
-  log.header("ReEnd UI \u2014 Initialize");
-  if ((0, import_node_fs2.existsSync)((0, import_node_path2.join)(cwd2, "reend-ui.config.json"))) {
-    log.warn("reend-ui.config.json already exists.");
-    const { overwrite } = await (0, import_prompts.default)({
-      type: "confirm",
-      name: "overwrite",
-      message: "Overwrite existing config?",
-      initial: false
-    });
-    if (!overwrite) {
-      log.info("Init cancelled.");
-      return;
-    }
-  }
-  const framework = detectFramework(cwd2);
-  const isTypescript = detectTypeScript(cwd2);
-  const tailwindCfg = detectTailwindConfig(cwd2);
-  log.step(`Detected framework: ${source_default.cyan(framework)}`);
-  log.step(
-    `TypeScript: ${isTypescript ? source_default.green("yes") : source_default.yellow("no")}`
-  );
-  if (tailwindCfg) log.step(`Tailwind config: ${source_default.cyan(tailwindCfg)}`);
-  log.blank();
-  const response = await (0, import_prompts.default)([
-    {
-      type: "text",
-      name: "outputDir",
-      message: "Component output directory:",
-      initial: "components/ui"
-    },
-    {
-      type: "confirm",
-      name: "cssVariables",
-      message: "Copy CSS design tokens (variables.css)?",
-      initial: true
-    }
-  ]);
-  if (!response.outputDir) {
-    log.error("Init cancelled.");
-    return;
-  }
-  writeConfig(cwd2, {
-    version: "1.0",
-    framework,
-    typescript: isTypescript,
-    outputDir: response.outputDir,
-    cssVariables: response.cssVariables,
-    tailwindConfig: tailwindCfg
-  });
-  log.success("Created reend-ui.config.json");
-  const outDir = (0, import_node_path2.join)(cwd2, response.outputDir);
-  if (!(0, import_node_fs2.existsSync)(outDir)) {
-    (0, import_node_fs2.mkdirSync)(outDir, { recursive: true });
-    log.success(`Created directory: ${response.outputDir}`);
-  }
-  if (response.cssVariables) {
-    await copyVariablesCss(cwd2, response.outputDir);
-  }
-  log.blank();
-  console.log(source_default.bold.white("  \u25C6 NEXT STEPS\n"));
-  console.log(
-    source_default.dim("  Add the ReEnd Tailwind preset to your tailwind config:\n")
-  );
-  console.log(
-    source_default.cyan(`  // ${tailwindCfg ?? "tailwind.config.ts"}`) + "\n" + source_default.white("  import reendPreset from 'reend-components/tailwind'\n") + source_default.white("  export default {\n") + source_default.white("    presets: [reendPreset],\n") + source_default.white("    // ...your config\n") + source_default.white("  }") + "\n"
-  );
-  console.log(source_default.dim("  Import CSS variables in your global CSS:\n"));
-  console.log(source_default.white(`  @import 'reend-components/styles.css';`) + "\n");
-  console.log(source_default.dim("  Add components:\n"));
-  console.log(source_default.cyan("  npx reend-ui add button") + "\n");
-}
-async function copyVariablesCss(cwd2, outputDir) {
-  const stylesDir = (0, import_node_path2.join)(cwd2, "styles");
-  if (!(0, import_node_fs2.existsSync)(stylesDir)) {
-    (0, import_node_fs2.mkdirSync)(stylesDir, { recursive: true });
-  }
-  const destPath = (0, import_node_path2.join)(stylesDir, "reend-variables.css");
-  try {
-    const candidates = [
-      (0, import_node_path2.join)(
-        cwd2,
-        "node_modules",
-        "reend-components",
-        "src",
-        "styles",
-        "variables.css"
-      )
-    ];
-    for (const src of candidates) {
-      if ((0, import_node_fs2.existsSync)(src)) {
-        const content = (0, import_node_fs2.readFileSync)(src, "utf-8");
-        (0, import_node_fs2.writeFileSync)(destPath, content, "utf-8");
-        log.success("Copied variables.css \u2192 styles/reend-variables.css");
-        return;
-      }
-    }
-    const url = "https://raw.githubusercontent.com/VBeatDead/ReEnd-Components/main/src/styles/variables.css";
-    const res = await fetch(url);
-    if (res.ok) {
-      const content = await res.text();
-      (0, import_node_fs2.writeFileSync)(destPath, content, "utf-8");
-      log.success("Copied variables.css \u2192 styles/reend-variables.css");
-    } else {
-      log.warn(
-        "Could not copy variables.css \u2014 add manually from reend-components/styles.css"
-      );
-    }
-  } catch {
-    log.warn(
-      "Could not copy variables.css \u2014 add manually from reend-components/styles.css"
-    );
-  }
-}
-
-// src/cli/commands/add.ts
-var import_node_fs3 = require("node:fs");
-var import_node_path3 = require("node:path");
-
 // src/cli/registry.ts
+var CLI_VERSION = "1.2.0";
+var GITHUB_RAW_ROOT = "https://raw.githubusercontent.com/VBeatDead/ReEnd-Components";
+var BASE_DEPS = ["clsx", "tailwind-merge", "class-variance-authority"];
 var REGISTRY = {
   // ── Core (Tier 1) ───────────────────────────────────────────────────────
   button: {
@@ -9034,6 +8843,14 @@ var REGISTRY = {
     deps: [],
     description: "Corner bracket decoration with 6 sub-components"
   },
+  "link-card": {
+    name: "link-card",
+    displayName: "LinkCard",
+    type: "core",
+    files: ["card.tsx"],
+    deps: [],
+    description: "Navigation card with icon, title, and animated arrow (\u2192). Uses clip-corner hover effect."
+  },
   input: {
     name: "input",
     displayName: "Input",
@@ -9148,6 +8965,14 @@ var REGISTRY = {
     deps: ["@radix-ui/react-tooltip"],
     description: "Tooltip with Radix primitives"
   },
+  sonner: {
+    name: "sonner",
+    displayName: "Sonner",
+    type: "core",
+    files: ["sonner.tsx"],
+    deps: ["sonner"],
+    description: "Toast notifications with notify helper, 5 types, auto-dismiss"
+  },
   // ── Core (Tier 6 — Extended) ────────────────────────────────────────────
   skeleton: {
     name: "skeleton",
@@ -9155,7 +8980,7 @@ var REGISTRY = {
     type: "core",
     files: ["skeleton.tsx"],
     deps: [],
-    description: "SkeletonLine/Text/Avatar/Card with shimmer animation"
+    description: "SkeletonLine/Text/Avatar/Card/Image/TableRow with shimmer animation"
   },
   "empty-state": {
     name: "empty-state",
@@ -9163,7 +8988,7 @@ var REGISTRY = {
     type: "core",
     files: ["empty-state.tsx"],
     deps: [],
-    description: "5 preset variants: search/error/permission/empty/default"
+    description: "8 context variants: search/empty-list/no-notifications/error-loading/no-permission/empty-filter/inbox-zero/no-connection"
   },
   alert: {
     name: "alert",
@@ -9171,7 +8996,7 @@ var REGISTRY = {
     type: "core",
     files: ["alert.tsx"],
     deps: [],
-    description: "4 variants: info/success/warning/error, dismissible, ARIA"
+    description: "4 variants: info/success/warning/error, dismissible, ARIA, TopBanner"
   },
   timeline: {
     name: "timeline",
@@ -9213,6 +9038,185 @@ var REGISTRY = {
     deps: [],
     description: "+/\u2212 stepper input with min/max/step, keyboard support"
   },
+  // ── Core (P1 New — v1.1.0) ──────────────────────────────────────────────
+  "view-toggle": {
+    name: "view-toggle",
+    displayName: "ViewToggle",
+    type: "core",
+    files: ["view-toggle.tsx"],
+    deps: [],
+    description: "Grid/List toggle with localStorage persistence"
+  },
+  "filter-bar": {
+    name: "filter-bar",
+    displayName: "FilterBar",
+    type: "core",
+    files: ["filter-bar.tsx"],
+    deps: [],
+    description: "Filter bar with chips and clear-all"
+  },
+  "otp-input": {
+    name: "otp-input",
+    displayName: "OTPInput",
+    type: "core",
+    files: ["otp-input.tsx"],
+    deps: [],
+    description: "OTP/PIN input with auto-advance, paste, shake-on-error"
+  },
+  "date-picker": {
+    name: "date-picker",
+    displayName: "DatePicker",
+    type: "core",
+    files: ["date-picker.tsx"],
+    deps: ["@radix-ui/react-popover"],
+    description: "Date picker with Endfield styling"
+  },
+  rating: {
+    name: "rating",
+    displayName: "Rating",
+    type: "core",
+    files: ["rating.tsx"],
+    deps: [],
+    description: "Star/diamond rating with \u25C6/\u25C7 indicators"
+  },
+  "session-timeout-modal": {
+    name: "session-timeout-modal",
+    displayName: "SessionTimeoutModal",
+    type: "core",
+    files: ["session-timeout-modal.tsx", "dialog.tsx", "button.tsx"],
+    deps: ["@radix-ui/react-dialog", "@radix-ui/react-slot"],
+    description: "Session expiry modal with CountdownTimer"
+  },
+  "file-upload": {
+    name: "file-upload",
+    displayName: "FileUpload",
+    type: "core",
+    files: ["file-upload.tsx"],
+    deps: [],
+    description: "Drag-and-drop file upload with 8 states"
+  },
+  "bottom-sheet": {
+    name: "bottom-sheet",
+    displayName: "BottomSheet",
+    type: "core",
+    files: ["bottom-sheet.tsx"],
+    deps: [],
+    description: "Mobile bottom sheet with slide-up animation"
+  },
+  carousel: {
+    name: "carousel",
+    displayName: "Carousel",
+    type: "core",
+    files: ["carousel.tsx"],
+    deps: [],
+    description: "CSS scroll-snap carousel with \u25C6/\u25C7 dots"
+  },
+  resizable: {
+    name: "resizable",
+    displayName: "ResizablePanels",
+    type: "core",
+    files: ["resizable.tsx"],
+    deps: ["react-resizable-panels"],
+    description: "Resizable panel layout with Endfield handle"
+  },
+  chart: {
+    name: "chart",
+    displayName: "Chart",
+    type: "core",
+    files: ["chart.tsx"],
+    deps: ["recharts"],
+    description: "Recharts wrapper with Endfield palette (--chart-1 to --chart-8)"
+  },
+  footer: {
+    name: "footer",
+    displayName: "Footer",
+    type: "core",
+    files: ["footer.tsx"],
+    deps: [],
+    description: "Footer with FooterColumn and FooterLink, 3-column grid, brand bar"
+  },
+  // ── Data Display ───────────────────────────────────────────────────────
+  table: {
+    name: "table",
+    displayName: "Table",
+    type: "core",
+    files: ["table.tsx"],
+    deps: [],
+    description: "Data table with sortable columns, sticky header, hover/selected states, empty slot"
+  },
+  list: {
+    name: "list",
+    displayName: "List",
+    type: "core",
+    files: ["list.tsx"],
+    deps: [],
+    description: "Diamond bullet, numbered (01/02), description, and link list variants"
+  },
+  stat: {
+    name: "stat",
+    displayName: "Stat",
+    type: "core",
+    files: ["stat.tsx"],
+    deps: [],
+    description: "Stat/metric card with Orbitron value, trend indicators, StatGrid layout"
+  },
+  // ── Overlay & Utility (Part 7) ─────────────────────────────────────────
+  "copy-clipboard": {
+    name: "copy-clipboard",
+    displayName: "CopyClipboard",
+    type: "core",
+    files: ["copy-clipboard.tsx"],
+    deps: [],
+    description: "Copy-to-clipboard button with \u2713 feedback and configurable reset delay"
+  },
+  "back-to-top": {
+    name: "back-to-top",
+    displayName: "BackToTop",
+    type: "core",
+    files: ["back-to-top.tsx"],
+    deps: [],
+    description: "Fixed back-to-top button with scroll threshold and smooth behavior"
+  },
+  "scroll-progress": {
+    name: "scroll-progress",
+    displayName: "ScrollProgress",
+    type: "core",
+    files: ["scroll-progress.tsx"],
+    deps: [],
+    description: "Fixed top progress bar tracking page scroll position (progressbar ARIA)"
+  },
+  "cookie-consent": {
+    name: "cookie-consent",
+    displayName: "CookieConsent",
+    type: "core",
+    files: ["cookie-consent.tsx"],
+    deps: [],
+    description: "Fixed bottom cookie consent banner with onAccept / onCustomize callbacks"
+  },
+  "command-palette": {
+    name: "command-palette",
+    displayName: "CommandPalette",
+    type: "core",
+    files: ["command-palette.tsx"],
+    deps: [],
+    description: "\u2318K command palette with search, grouped results, arrow-key navigation"
+  },
+  dropdown: {
+    name: "dropdown",
+    displayName: "Dropdown",
+    type: "core",
+    files: ["dropdown.tsx"],
+    deps: ["@radix-ui/react-popover"],
+    description: "Dropdown menu with grouped items and danger variant (Radix Popover base)"
+  },
+  "context-menu": {
+    name: "context-menu",
+    displayName: "ContextMenu",
+    type: "core",
+    files: ["context-menu.tsx"],
+    deps: [],
+    description: "Right-click context menu with keyboard shortcuts and portal rendering"
+  },
   // ── Signature (Phase 0) ─────────────────────────────────────────────────
   "glitch-text": {
     name: "glitch-text",
@@ -9235,7 +9239,7 @@ var REGISTRY = {
     displayName: "TacticalPanel",
     type: "signature",
     files: ["signature/tactical-panel.tsx"],
-    deps: [],
+    deps: ["lucide-react"],
     description: "HUD-style panel with status, headerAction, collapsible"
   },
   "holo-card": {
@@ -9243,7 +9247,7 @@ var REGISTRY = {
     displayName: "HoloCard",
     type: "signature",
     files: ["signature/holo-card.tsx"],
-    deps: ["framer-motion"],
+    deps: [],
     description: "Holographic stat card with tilt hover effect"
   },
   "data-stream": {
@@ -9251,7 +9255,7 @@ var REGISTRY = {
     displayName: "DataStream",
     type: "signature",
     files: ["signature/data-stream.tsx"],
-    deps: [],
+    deps: ["framer-motion", "lucide-react"],
     description: "Scrolling data feed terminal with speed/messageType"
   },
   "tactical-badge": {
@@ -9267,7 +9271,7 @@ var REGISTRY = {
     displayName: "WarningBanner",
     type: "signature",
     files: ["signature/warning-banner.tsx"],
-    deps: [],
+    deps: ["lucide-react"],
     description: "Alert banner with caution/alert/critical severity"
   },
   "scan-divider": {
@@ -9366,11 +9370,298 @@ var REGISTRY = {
     files: ["signature/countdown-timer.tsx"],
     deps: [],
     description: "Tactical mission countdown, onComplete, 3 sizes"
+  },
+  "rich-text-editor": {
+    name: "rich-text-editor",
+    displayName: "RichTextEditor",
+    type: "core",
+    files: ["rich-text-editor.tsx"],
+    deps: [],
+    description: "WYSIWYG markdown editor with toolbar (B/I/U/S/H1-H3/quote/list/link/divider), character count, and MARKDOWN/PREVIEW toggle"
+  },
+  "sort-control": {
+    name: "sort-control",
+    displayName: "SortControl",
+    type: "core",
+    files: ["sort-control.tsx"],
+    deps: [],
+    description: "Sort options row with tri-state direction cycling (asc/desc/none) and \u25B2/\u25BC indicators"
+  },
+  "pull-to-refresh": {
+    name: "pull-to-refresh",
+    displayName: "PullToRefresh",
+    type: "core",
+    files: ["pull-to-refresh.tsx"],
+    deps: [],
+    description: "Mobile pull-to-refresh with diamond spinner, phase machine (idle\u2192pulling\u2192threshold\u2192refreshing\u2192complete), haptic feedback"
+  },
+  "swipeable-item": {
+    name: "swipeable-item",
+    displayName: "SwipeableItem",
+    type: "core",
+    files: ["swipeable-item.tsx"],
+    deps: [],
+    description: "Touch-swipeable list item with left/right action reveal, 80/160px thresholds, haptic feedback"
+  },
+  "spoiler-block": {
+    name: "spoiler-block",
+    displayName: "SpoilerBlock",
+    type: "core",
+    files: ["spoiler-block.tsx"],
+    deps: [],
+    description: "Spoiler content block with blur overlay and reveal toggle"
+  },
+  "theme-switcher": {
+    name: "theme-switcher",
+    displayName: "ThemeSwitcher",
+    type: "core",
+    files: ["theme-switcher.tsx"],
+    deps: ["lucide-react"],
+    description: "Light/dark theme toggle with localStorage persistence"
+  },
+  toast: {
+    name: "toast",
+    displayName: "Toast",
+    type: "core",
+    files: ["toast.tsx", "toaster.tsx"],
+    hooks: ["use-toast.ts"],
+    deps: ["@radix-ui/react-toast", "lucide-react"],
+    description: "Radix toast primitives + Toaster portal + useToast hook (imperative API)"
   }
 };
+function getFileUrl(filePath, ref = "main") {
+  return `${GITHUB_RAW_ROOT}/${ref}/src/components/ui/${filePath}`;
+}
+function getHookUrl(filePath, ref = "main") {
+  return `${GITHUB_RAW_ROOT}/${ref}/src/hooks/${filePath}`;
+}
+
+// src/cli/commands/init.ts
+var import_node_fs2 = require("node:fs");
+var import_node_path2 = require("node:path");
+var import_prompts = __toESM(require_prompts3(), 1);
+
+// src/cli/utils.ts
+var import_node_fs = require("node:fs");
+var import_node_path = require("node:path");
+var CONFIG_FILE = "reend-ui.config.json";
+function readConfig(cwd2) {
+  const configPath = (0, import_node_path.join)(cwd2, CONFIG_FILE);
+  if (!(0, import_node_fs.existsSync)(configPath)) return null;
+  try {
+    return JSON.parse((0, import_node_fs.readFileSync)(configPath, "utf-8"));
+  } catch {
+    return null;
+  }
+}
+function writeConfig(cwd2, config) {
+  const configPath = (0, import_node_path.join)(cwd2, CONFIG_FILE);
+  (0, import_node_fs.writeFileSync)(configPath, JSON.stringify(config, null, 2) + "\n", "utf-8");
+}
+function detectFramework(cwd2) {
+  const pkgPath = (0, import_node_path.join)(cwd2, "package.json");
+  if (!(0, import_node_fs.existsSync)(pkgPath)) return "vite";
+  try {
+    const pkg = JSON.parse((0, import_node_fs.readFileSync)(pkgPath, "utf-8"));
+    const allDeps = {
+      ...pkg.dependencies,
+      ...pkg.devDependencies
+    };
+    if (allDeps["next"]) return "next";
+    if (allDeps["@remix-run/react"]) return "remix";
+    if (allDeps["gatsby"]) return "gatsby";
+    return "vite";
+  } catch {
+    return "vite";
+  }
+}
+function detectTypeScript(cwd2) {
+  return (0, import_node_fs.existsSync)((0, import_node_path.join)(cwd2, "tsconfig.json")) || (0, import_node_fs.existsSync)((0, import_node_path.join)(cwd2, "tsconfig.app.json"));
+}
+function detectTailwindConfig(cwd2) {
+  const candidates = [
+    "tailwind.config.ts",
+    "tailwind.config.js",
+    "tailwind.config.mjs"
+  ];
+  for (const f of candidates) {
+    if ((0, import_node_fs.existsSync)((0, import_node_path.join)(cwd2, f))) return f;
+  }
+  return void 0;
+}
+async function fetchText(url) {
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error(`HTTP ${res.status} ${res.statusText} \u2014 ${url}`);
+  }
+  return res.text();
+}
+var log = {
+  info: (msg) => console.log(`  ${source_default.cyan("\u25C6")} ${msg}`),
+  success: (msg) => console.log(`  ${source_default.green("\u25C6")} ${source_default.green(msg)}`),
+  warn: (msg) => console.log(`  ${source_default.yellow("\u25C7")} ${source_default.yellow(msg)}`),
+  error: (msg) => console.error(`  ${source_default.red("\u2715")} ${source_default.red(msg)}`),
+  step: (msg) => console.log(`  ${source_default.dim("\u203A")} ${msg}`),
+  blank: () => console.log(),
+  header: (msg) => console.log(
+    `
+${source_default.bold.white("\u25C6")} ${source_default.bold.white(msg.toUpperCase())}
+`
+  )
+};
+
+// src/cli/commands/init.ts
+async function runInit(cwd2) {
+  log.header("ReEnd UI \u2014 Initialize");
+  if ((0, import_node_fs2.existsSync)((0, import_node_path2.join)(cwd2, "reend-ui.config.json"))) {
+    log.warn("reend-ui.config.json already exists.");
+    const { overwrite } = await (0, import_prompts.default)({
+      type: "confirm",
+      name: "overwrite",
+      message: "Overwrite existing config?",
+      initial: false
+    });
+    if (!overwrite) {
+      log.info("Init cancelled.");
+      return;
+    }
+  }
+  const framework = detectFramework(cwd2);
+  const isTypescript = detectTypeScript(cwd2);
+  const tailwindCfg = detectTailwindConfig(cwd2);
+  log.step(`Detected framework: ${source_default.cyan(framework)}`);
+  log.step(
+    `TypeScript: ${isTypescript ? source_default.green("yes") : source_default.yellow("no")}`
+  );
+  if (tailwindCfg) log.step(`Tailwind config: ${source_default.cyan(tailwindCfg)}`);
+  log.blank();
+  const response = await (0, import_prompts.default)([
+    {
+      type: "text",
+      name: "outputDir",
+      message: "Component output directory:",
+      initial: "components/ui"
+    },
+    {
+      type: "confirm",
+      name: "cssVariables",
+      message: "Copy CSS design tokens (variables.css)?",
+      initial: true
+    }
+  ]);
+  if (!response.outputDir) {
+    log.error("Init cancelled.");
+    return;
+  }
+  writeConfig(cwd2, {
+    version: "1.0",
+    framework,
+    typescript: isTypescript,
+    outputDir: response.outputDir,
+    cssVariables: response.cssVariables,
+    tailwindConfig: tailwindCfg
+  });
+  log.success("Created reend-ui.config.json");
+  const outDir = (0, import_node_path2.join)(cwd2, response.outputDir);
+  if (!(0, import_node_fs2.existsSync)(outDir)) {
+    (0, import_node_fs2.mkdirSync)(outDir, { recursive: true });
+    log.success(`Created directory: ${response.outputDir}`);
+  }
+  const projectBase = (0, import_node_path2.join)(outDir, "..", "..");
+  createCnUtility(projectBase);
+  if (response.cssVariables) {
+    await copyVariablesCss(cwd2, projectBase);
+  }
+  log.blank();
+  console.log(source_default.bold.white("  \u25C6 NEXT STEPS\n"));
+  console.log(source_default.dim("  Install the base dependencies used by every component:\n"));
+  console.log(
+    source_default.cyan("  npm install clsx tailwind-merge class-variance-authority") + "\n"
+  );
+  console.log(
+    source_default.dim("  Add the ReEnd Tailwind preset to your tailwind config:\n")
+  );
+  console.log(
+    source_default.cyan(`  // ${tailwindCfg ?? "tailwind.config.ts"}`) + "\n" + source_default.white("  import reendPreset from 'reend-components/tailwind'\n") + source_default.white("  export default {\n") + source_default.white("    presets: [reendPreset],\n") + source_default.white("    // ...your config\n") + source_default.white("  }") + "\n"
+  );
+  console.log(source_default.dim("  Import CSS variables in your global CSS:\n"));
+  console.log(source_default.white(`  @import 'reend-components/styles.css';`) + "\n");
+  console.log(source_default.dim("  Add components:\n"));
+  console.log(source_default.cyan("  npx reend-ui add button") + "\n");
+}
+var CN_UTILITY = `import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`;
+function createCnUtility(projectBase) {
+  const libDir = (0, import_node_path2.join)(projectBase, "lib");
+  const destPath = (0, import_node_path2.join)(libDir, "utils.ts");
+  if ((0, import_node_fs2.existsSync)(destPath)) {
+    log.step("lib/utils.ts already exists \u2014 keeping yours");
+    return;
+  }
+  if (!(0, import_node_fs2.existsSync)(libDir)) {
+    (0, import_node_fs2.mkdirSync)(libDir, { recursive: true });
+  }
+  (0, import_node_fs2.writeFileSync)(destPath, CN_UTILITY, "utf-8");
+  log.success("Created lib/utils.ts (cn helper)");
+}
+async function copyVariablesCss(cwd2, projectBase) {
+  const stylesDir = (0, import_node_path2.join)(projectBase, "styles");
+  if (!(0, import_node_fs2.existsSync)(stylesDir)) {
+    (0, import_node_fs2.mkdirSync)(stylesDir, { recursive: true });
+  }
+  const destPath = (0, import_node_path2.join)(stylesDir, "reend-variables.css");
+  try {
+    const candidates = [
+      (0, import_node_path2.join)(
+        cwd2,
+        "node_modules",
+        "reend-components",
+        "src",
+        "styles",
+        "variables.css"
+      )
+    ];
+    for (const src of candidates) {
+      if ((0, import_node_fs2.existsSync)(src)) {
+        const content = (0, import_node_fs2.readFileSync)(src, "utf-8");
+        (0, import_node_fs2.writeFileSync)(destPath, content, "utf-8");
+        log.success("Copied variables.css \u2192 styles/reend-variables.css");
+        return;
+      }
+    }
+    const url = "https://raw.githubusercontent.com/VBeatDead/ReEnd-Components/main/src/styles/variables.css";
+    const res = await fetch(url);
+    if (res.ok) {
+      const content = await res.text();
+      (0, import_node_fs2.writeFileSync)(destPath, content, "utf-8");
+      log.success("Copied variables.css \u2192 styles/reend-variables.css");
+    } else {
+      log.warn(
+        "Could not copy variables.css \u2014 add manually from reend-components/styles.css"
+      );
+    }
+  } catch {
+    log.warn(
+      "Could not copy variables.css \u2014 add manually from reend-components/styles.css"
+    );
+  }
+}
 
 // src/cli/commands/add.ts
-var GITHUB_RAW_BASE = "https://raw.githubusercontent.com/VBeatDead/ReEnd-Components/main/src/components/ui";
+var import_node_fs3 = require("node:fs");
+var import_node_path3 = require("node:path");
+async function fetchRegistryFile(urlFor) {
+  try {
+    return await fetchText(urlFor(`v${CLI_VERSION}`));
+  } catch {
+    return fetchText(urlFor("main"));
+  }
+}
 async function runAdd(components, cwd2, opts) {
   log.header("ReEnd UI \u2014 Add Components");
   const config = readConfig(cwd2);
@@ -9379,6 +9670,8 @@ async function runAdd(components, cwd2, opts) {
     process.exit(1);
   }
   const outputDir = (0, import_node_path3.join)(cwd2, config.outputDir);
+  const projectBase = (0, import_node_path3.join)(outputDir, "..", "..");
+  const hooksDir = (0, import_node_path3.join)(projectBase, "hooks");
   const depsToInstall = /* @__PURE__ */ new Set();
   const added = [];
   const skipped = [];
@@ -9391,28 +9684,41 @@ async function runAdd(components, cwd2, opts) {
       continue;
     }
     log.info(`Adding ${source_default.cyan(entry.displayName)}...`);
+    const targets = [
+      ...entry.files.map((file) => ({
+        file,
+        dest: (0, import_node_path3.join)(outputDir, file),
+        hook: false
+      })),
+      ...(entry.hooks ?? []).map((file) => ({
+        file,
+        dest: (0, import_node_path3.join)(hooksDir, file),
+        hook: true
+      }))
+    ];
     let componentSuccess = true;
-    for (const file of entry.files) {
-      const destPath = (0, import_node_path3.join)(outputDir, file);
-      const destDir = (0, import_node_path3.dirname)(destPath);
-      if ((0, import_node_fs3.existsSync)(destPath) && !opts.overwrite) {
-        log.warn(`  ${file} already exists \u2014 use --overwrite to replace`);
+    for (const { file, dest, hook } of targets) {
+      const destDir = (0, import_node_path3.dirname)(dest);
+      const label = hook ? `hooks/${file}` : file;
+      if ((0, import_node_fs3.existsSync)(dest) && !opts.overwrite) {
+        log.warn(`  ${label} already exists \u2014 use --overwrite to replace`);
         skipped.push(entry.displayName);
         componentSuccess = false;
         continue;
       }
       try {
-        const url = `${GITHUB_RAW_BASE}/${file}`;
-        log.step(`Fetching ${file}...`);
-        const content = await fetchText(url);
+        log.step(`Fetching ${label}...`);
+        const content = await fetchRegistryFile(
+          (ref) => hook ? getHookUrl(file, ref) : getFileUrl(file, ref)
+        );
         if (!(0, import_node_fs3.existsSync)(destDir)) {
           (0, import_node_fs3.mkdirSync)(destDir, { recursive: true });
         }
-        (0, import_node_fs3.writeFileSync)(destPath, content, "utf-8");
-        log.success(`  Added \u2192 ${config.outputDir}/${file}`);
+        (0, import_node_fs3.writeFileSync)(dest, content, "utf-8");
+        log.success(`  Added \u2192 ${label}`);
       } catch (err) {
         const message = err instanceof Error ? err.message : String(err);
-        log.error(`  Failed to fetch ${file}: ${message}`);
+        log.error(`  Failed to fetch ${label}: ${message}`);
         componentSuccess = false;
         failed.push(entry.displayName);
       }
@@ -9434,22 +9740,21 @@ async function runAdd(components, cwd2, opts) {
   if (failed.length > 0) {
     log.error(`Failed: ${failed.join(", ")}`);
   }
+  if (added.length > 0) {
+    for (const dep of BASE_DEPS) {
+      depsToInstall.add(dep);
+    }
+  }
   if (depsToInstall.size > 0) {
     const deps = Array.from(depsToInstall).join(" ");
     log.blank();
-    console.log(source_default.bold.yellow("  \u26A1 Install peer dependencies:\n"));
+    console.log(source_default.bold.yellow("  \u26A1 Install dependencies:\n"));
     console.log(source_default.cyan(`  npm install ${deps}`) + "\n");
   }
-  if (added.length > 0) {
+  if (added.length > 0 && !(0, import_node_fs3.existsSync)((0, import_node_path3.join)(projectBase, "lib", "utils.ts"))) {
     log.blank();
-    console.log(
-      source_default.dim(
-        "  Components require the cn() utility. Add to your project:\n"
-      )
-    );
-    console.log(source_default.white("  import { cn } from 'reend-components'") + "\n");
-    console.log(
-      source_default.dim("  Or copy the cn utility from: lib/utils.ts") + "\n"
+    log.warn(
+      "lib/utils.ts (cn helper) not found \u2014 run `npx reend-ui init` to create it."
     );
   }
 }
@@ -9503,10 +9808,9 @@ async function runUpdate(components, cwd2) {
   const outputDir = (0, import_node_path4.join)(cwd2, config.outputDir);
   let targets = components;
   if (targets.length === 0) {
-    targets = Object.keys(REGISTRY).filter((name) => {
-      const entry = REGISTRY[name];
-      return entry.files.some((f) => (0, import_node_fs4.existsSync)((0, import_node_path4.join)(outputDir, f)));
-    });
+    targets = Object.keys(REGISTRY).filter(
+      (name) => (0, import_node_fs4.existsSync)((0, import_node_path4.join)(outputDir, REGISTRY[name].files[0]))
+    );
     if (targets.length === 0) {
       log.warn("No installed components found. Use: npx reend-ui add <name>");
       return;
@@ -9523,7 +9827,7 @@ async function runUpdate(components, cwd2) {
       log.error(`Unknown component: "${name}"`);
       continue;
     }
-    const isInstalled = entry.files.some((f) => (0, import_node_fs4.existsSync)((0, import_node_path4.join)(outputDir, f)));
+    const isInstalled = (0, import_node_fs4.existsSync)((0, import_node_path4.join)(outputDir, entry.files[0]));
     if (isInstalled) {
       existing.push(name);
     } else {
@@ -9547,7 +9851,7 @@ program2.name("reend-ui").description(
   source_default.bold.white(
     "\u25C6 ReEnd UI \u2014 Arknights: Endfield React Component Library\n"
   ) + source_default.dim("  Shadcn-style copy-paste workflow for ReEnd components.\n")
-).version("1.0.0");
+).version(CLI_VERSION);
 program2.command("init").description("Initialize ReEnd UI in your project").action(async () => {
   await runInit(cwd);
 });