react-principles-cli 0.0.1

package/dist/index.js

@@ -0,0 +1,4440 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/index.ts
+var import_commander = require("commander");
+var import_picocolors3 = __toESM(require("picocolors"));
+
+// src/commands/init.ts
+var import_fs4 = require("fs");
+var import_path4 = require("path");
+var import_prompts = __toESM(require("prompts"));
+var import_picocolors = __toESM(require("picocolors"));
+
+// src/utils/fs.ts
+var import_fs = require("fs");
+var import_path = require("path");
+var CONFIG_FILE = "components.json";
+var DEFAULT_CONFIG = {
+  framework: "next",
+  rsc: true,
+  tsx: true,
+  componentsDir: "src/components/ui",
+  hooksDir: "src/hooks",
+  libDir: "src/lib",
+  aliases: {
+    components: "@/components/ui",
+    hooks: "@/hooks",
+    lib: "@/lib"
+  }
+};
+function readConfig(cwd) {
+  const path = (0, import_path.join)(cwd, CONFIG_FILE);
+  if (!(0, import_fs.existsSync)(path)) return null;
+  try {
+    return JSON.parse((0, import_fs.readFileSync)(path, "utf8"));
+  } catch {
+    return null;
+  }
+}
+function writeConfig(config, cwd) {
+  (0, import_fs.writeFileSync)((0, import_path.join)(cwd, CONFIG_FILE), JSON.stringify(config, null, 2) + "\n", "utf8");
+}
+function getDefaultConfig() {
+  return structuredClone(DEFAULT_CONFIG);
+}
+function detectTsconfigAliases(cwd) {
+  const candidates = ["tsconfig.json", "tsconfig.app.json", "jsconfig.json"];
+  for (const file of candidates) {
+    const tsConfigPath = (0, import_path.join)(cwd, file);
+    if (!(0, import_fs.existsSync)(tsConfigPath)) continue;
+    try {
+      const raw = (0, import_fs.readFileSync)(tsConfigPath, "utf8").replace(/\/\/.*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "");
+      const tsConfig = JSON.parse(raw);
+      const paths = tsConfig.compilerOptions?.paths ?? {};
+      const aliases = {};
+      for (const [alias] of Object.entries(paths)) {
+        const clean = alias.replace(/\/\*$/, "");
+        if (clean === "@") {
+          aliases.components = `${clean}/components/ui`;
+          aliases.hooks = `${clean}/hooks`;
+          aliases.lib = `${clean}/lib`;
+        }
+      }
+      return aliases;
+    } catch {
+    }
+  }
+  return {};
+}
+function detectFramework(cwd) {
+  const pkgPath = (0, import_path.join)(cwd, "package.json");
+  if (!(0, import_fs.existsSync)(pkgPath)) return "other";
+  try {
+    const pkg = JSON.parse((0, import_fs.readFileSync)(pkgPath, "utf8"));
+    const deps = {
+      ...pkg.dependencies,
+      ...pkg.devDependencies
+    };
+    if (deps["next"]) return "next";
+    if (deps["remix"] || deps["@remix-run/react"]) return "remix";
+    if (deps["vite"] || deps["@vitejs/plugin-react"]) return "vite";
+    return "other";
+  } catch {
+    return "other";
+  }
+}
+function resolveOutputPath(outputFile, target, config, cwd) {
+  const base = target === "components" ? config.componentsDir : target === "hooks" ? config.hooksDir : config.libDir;
+  return (0, import_path.join)(cwd, base, outputFile);
+}
+function writeFile(content, outputPath) {
+  const dir = (0, import_path.dirname)(outputPath);
+  if (!(0, import_fs.existsSync)(dir)) {
+    (0, import_fs.mkdirSync)(dir, { recursive: true });
+  }
+  if ((0, import_fs.existsSync)(outputPath)) return false;
+  (0, import_fs.writeFileSync)(outputPath, content, "utf8");
+  return true;
+}
+
+// src/registry/templates.ts
+var TEMPLATES = {
+  "utils": `import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Merges class names using clsx and resolves Tailwind CSS conflicts
+ * with tailwind-merge. Accepts the same arguments as clsx.
+ *
+ * @example
+ * cn("px-2 py-1", "px-4") // => "px-4 py-1"
+ * cn("text-red-500", condition && "text-blue-500")
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}`,
+  "use-animated-mount": `"use client";
+
+import { useState, useEffect } from "react";
+
+// \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export interface AnimatedMountResult {
+  /** Whether the component should be in the DOM (stays true during exit animation) */
+  mounted: boolean;
+  /** Whether the "open" state is active \u2014 drives CSS enter/exit classes */
+  visible: boolean;
+}
+
+// \u2500\u2500\u2500 Hook \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+/**
+ * Manages mount/unmount timing for animated overlays.
+ *
+ * - \`mounted\` controls DOM presence. Stays \`true\` during the exit animation
+ *   so the element can animate out before being removed.
+ * - \`visible\` drives CSS classes. Flip \`visible\` immediately on open/close;
+ *   flip \`mounted\` only after the exit \`duration\` has elapsed.
+ *
+ * @example
+ * const { mounted, visible } = useAnimatedMount(open, 200);
+ * if (!mounted) return null;
+ * return (
+ *   <div className={visible ? "animate-in fade-in" : "animate-out fade-out"}>
+ *     {children}
+ *   </div>
+ * );
+ */
+export function useAnimatedMount(open: boolean, duration = 200): AnimatedMountResult {
+  const [mounted, setMounted] = useState(open);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      // Double rAF ensures the element is painted before adding the visible
+      // class, guaranteeing the CSS transition fires on the first frame.
+      const raf = requestAnimationFrame(() => {
+        requestAnimationFrame(() => setVisible(true));
+      });
+      return () => cancelAnimationFrame(raf);
+    } else {
+      setVisible(false);
+      const t = setTimeout(() => setMounted(false), duration);
+      return () => clearTimeout(t);
+    }
+  }, [open, duration]);
+
+  return { mounted, visible };
+}`,
+  "Accordion": `import {
+  createContext,
+  useContext,
+  useState,
+  type HTMLAttributes,
+  type ButtonHTMLAttributes,
+  type ReactNode,
+} from "react";
+import { cn } from "@/lib/utils";
+
+// \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export type AccordionType = "single" | "multiple";
+
+export interface AccordionProps {
+  type?: AccordionType;
+  defaultValue?: string | string[];
+  value?: string | string[];
+  onChange?: (value: string | string[]) => void;
+  collapsible?: boolean;
+  children: ReactNode;
+  className?: string;
+}
+
+export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+  value: string;
+  children: ReactNode;
+}
+
+export interface AccordionTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+}
+
+export interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+// \u2500\u2500\u2500 Context \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+interface AccordionCtx {
+  isOpen: (value: string) => boolean;
+  toggle: (value: string) => void;
+}
+
+interface ItemCtx {
+  value: string;
+  open: boolean;
+}
+
+const AccordionContext = createContext<AccordionCtx | null>(null);
+const ItemContext = createContext<ItemCtx | null>(null);
+
+function useAccordion() {
+  const ctx = useContext(AccordionContext);
+  if (!ctx) throw new Error("AccordionTrigger/Content must be inside <AccordionItem>");
+  return ctx;
+}
+
+function useItem() {
+  const ctx = useContext(ItemContext);
+  if (!ctx) throw new Error("AccordionTrigger/Content must be inside <AccordionItem>");
+  return ctx;
+}
+
+// \u2500\u2500\u2500 Components \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export function Accordion({
+  type = "single",
+  defaultValue,
+  value: controlledValue,
+  onChange,
+  collapsible = true,
+  children,
+  className,
+}: AccordionProps) {
+  const toSet = (v?: string | string[]): Set<string> => {
+    if (!v) return new Set();
+    return new Set(Array.isArray(v) ? v : [v]);
+  };
+
+  const [internal, setInternal] = useState<Set<string>>(() => toSet(defaultValue));
+  const isControlled = controlledValue !== undefined;
+  const active = isControlled ? toSet(controlledValue) : internal;
+
+  const toggle = (val: string) => {
+    let next: Set<string>;
+
+    if (type === "single") {
+      if (active.has(val)) {
+        next = collapsible ? new Set() : new Set([val]);
+      } else {
+        next = new Set([val]);
+      }
+    } else {
+      next = new Set(active);
+      if (next.has(val)) { next.delete(val); } else { next.add(val); }
+    }
+
+    if (!isControlled) setInternal(next);
+
+    if (onChange) {
+      const arr = [...next];
+      onChange(type === "single" ? (arr[0] ?? "") : arr);
+    }
+  };
+
+  const isOpen = (val: string) => active.has(val);
+
+  return (
+    <AccordionContext.Provider value={{ isOpen, toggle }}>
+      <div className={cn("w-full divide-y divide-slate-200 dark:divide-[#1f2937] rounded-xl border border-slate-200 dark:border-[#1f2937] overflow-hidden", className)}>
+        {children}
+      </div>
+    </AccordionContext.Provider>
+  );
+}
+
+Accordion.Item = function AccordionItem({ value, children, className, ...props }: AccordionItemProps) {
+  const { isOpen } = useAccordion();
+  const open = isOpen(value);
+
+  return (
+    <ItemContext.Provider value={{ value, open }}>
+      <div className={cn("bg-white dark:bg-[#161b22]", className)} {...props}>
+        {children}
+      </div>
+    </ItemContext.Provider>
+  );
+}
+
+Accordion.Trigger = function AccordionTrigger({ children, className, ...props }: AccordionTriggerProps) {
+  const { toggle } = useAccordion();
+  const { value, open } = useItem();
+
+  return (
+    <button
+      type="button"
+      aria-expanded={open}
+      onClick={() => toggle(value)}
+      className={cn(
+        "flex w-full items-center justify-between px-5 py-4 text-left text-sm font-medium",
+        "text-slate-900 dark:text-white",
+        "hover:bg-slate-50 dark:hover:bg-[#1f2937] transition-colors",
+        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/40",
+        className
+      )}
+      {...props}
+    >
+      <span>{children}</span>
+      <svg
+        className={cn("h-4 w-4 shrink-0 text-slate-400 transition-transform duration-200", open && "rotate-180")}
+        viewBox="0 0 16 16"
+        fill="none"
+      >
+        <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </button>
+  );
+}
+
+Accordion.Content = function AccordionContent({ children, className, ...props }: AccordionContentProps) {
+  const { open } = useItem();
+
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateRows: open ? "1fr" : "0fr",
+        transition: "grid-template-rows 0.2s ease",
+      }}
+    >
+      <div style={{ overflow: "hidden" }}>
+        <div
+          className={cn("px-5 pb-4 text-sm text-slate-600 dark:text-slate-400 leading-relaxed", className)}
+          {...props}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}`,
+  "Alert": `import type { ButtonHTMLAttributes, HTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+export type AlertVariant = "default" | "success" | "warning" | "error" | "info";
+
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: AlertVariant;
+}
+
+const VARIANT_CLASSES: Record<AlertVariant, string> = {
+  default: "border-slate-200 bg-white dark:border-[#1f2937] dark:bg-[#161b22]",
+  success: "border-green-300 bg-green-50 dark:border-green-900 dark:bg-green-950/30",
+  warning: "border-amber-300 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/30",
+  error: "border-red-300 bg-red-50 dark:border-red-900 dark:bg-red-950/30",
+  info: "border-blue-300 bg-blue-50 dark:border-blue-900 dark:bg-blue-950/30",
+};
+
+export function Alert({ variant = "default", className, ...props }: AlertProps) {
+  return (
+    <div
+      role="alert"
+      className={cn("rounded-xl border p-4", VARIANT_CLASSES[variant], className)}
+      {...props}
+    />
+  );
+}
+
+Alert.Title = function AlertTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h4
+      className={cn("text-sm font-semibold text-slate-900 dark:text-white", className)}
+      {...props}
+    />
+  );
+}
+
+Alert.Description = function AlertDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p
+      className={cn("mt-1 text-xs leading-relaxed text-slate-600 dark:text-slate-400", className)}
+      {...props}
+    />
+  );
+}
+
+Alert.Footer = function AlertFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("mt-3 flex items-center gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+Alert.Action = function AlertAction({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        "rounded-md bg-primary px-2.5 py-1.5 text-xs font-medium text-white transition-opacity hover:opacity-90",
+        className
+      )}
+      {...props}
+    />
+  );
+}`,
+  "AlertDialog": `import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@/lib/utils";
+import { useAnimatedMount } from "@/hooks/use-animated-mount";
+
+// \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export type AlertDialogVariant = "destructive" | "warning" | "default";
+
+export interface AlertDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  description: string;
+  cancelLabel?: string;
+  confirmLabel?: string;
+  variant?: AlertDialogVariant;
+  isLoading?: boolean;
+}
+
+// \u2500\u2500\u2500 Constants \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+const CONFIRM_CLASSES: Record<AlertDialogVariant, string> = {
+  destructive: "bg-red-500 hover:bg-red-600 text-white focus-visible:ring-red-400/40",
+  warning: "bg-amber-500 hover:bg-amber-600 text-white focus-visible:ring-amber-400/40",
+  default: "bg-primary hover:bg-primary/90 text-white focus-visible:ring-primary/40",
+};
+
+const ICON_BG: Record<AlertDialogVariant, string> = {
+  destructive: "bg-red-100 dark:bg-red-900/30 text-red-500",
+  warning: "bg-amber-100 dark:bg-amber-900/30 text-amber-500",
+  default: "bg-primary/10 text-primary",
+};
+
+// \u2500\u2500\u2500 Icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+function VariantIcon({ variant }: { variant: AlertDialogVariant }) {
+  if (variant === "destructive") {
+    return (
+      <svg className="h-5 w-5" viewBox="0 0 20 20" fill="none">
+        <path d="M10 2a8 8 0 1 0 0 16A8 8 0 0 0 10 2zm0 5v4m0 2.5v.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      </svg>
+    );
+  }
+  if (variant === "warning") {
+    return (
+      <svg className="h-5 w-5" viewBox="0 0 20 20" fill="none">
+        <path d="M8.485 3.495a1.75 1.75 0 0 1 3.03 0l6.28 10.875A1.75 1.75 0 0 1 16.28 17H3.72a1.75 1.75 0 0 1-1.515-2.63L8.485 3.495zM10 8v3m0 2.5v.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    );
+  }
+  return (
+    <svg className="h-5 w-5" viewBox="0 0 20 20" fill="none">
+      <circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M10 6v4m0 2.5v.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+// \u2500\u2500\u2500 Spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+function Spinner() {
+  return (
+    <svg className="h-4 w-4 animate-spin" viewBox="0 0 16 16" fill="none">
+      <circle cx="8" cy="8" r="6" stroke="currentColor" strokeOpacity="0.25" strokeWidth="2" />
+      <path d="M14 8a6 6 0 0 0-6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+// \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export function AlertDialog({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  cancelLabel = "Cancel",
+  confirmLabel = "Confirm",
+  variant = "default",
+  isLoading = false,
+}: AlertDialogProps) {
+  const { mounted, visible } = useAnimatedMount(open, 200);
+
+  // Scroll lock only \u2014 no Escape dismiss (by design)
+  useEffect(() => {
+    if (!open) return;
+    document.body.style.overflow = "hidden";
+    return () => { document.body.style.overflow = ""; };
+  }, [open]);
+
+  if (!mounted) return null;
+
+  const panel = (
+    // Backdrop \u2014 clicking does NOT close (intentional)
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div
+        className={cn(
+          "absolute inset-0 bg-black/50 backdrop-blur-xs transition-opacity duration-200",
+          visible ? "opacity-100" : "opacity-0"
+        )}
+      />
+
+      <div
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="alert-title"
+        aria-describedby="alert-desc"
+        className={cn(
+          "relative w-full max-w-md rounded-2xl bg-white dark:bg-[#161b22] border border-slate-200 dark:border-[#1f2937] shadow-2xl shadow-black/20",
+          "transition-all duration-200",
+          visible ? "opacity-100 scale-100" : "opacity-0 scale-95"
+        )}
+      >
+        <div className="p-6">
+          {/* Icon + Title */}
+          <div className="flex items-start gap-4">
+            <div className={cn("mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-full", ICON_BG[variant])}>
+              <VariantIcon variant={variant} />
+            </div>
+            <div className="flex-1 min-w-0">
+              <h2 id="alert-title" className="text-base font-semibold text-slate-900 dark:text-white leading-snug">
+                {title}
+              </h2>
+              <p id="alert-desc" className="mt-1.5 text-sm text-slate-500 dark:text-slate-400 leading-relaxed">
+                {description}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="px-6 pb-6 flex items-center justify-end gap-3">
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="px-4 py-2 rounded-lg text-sm font-medium text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-[#1f2937] hover:bg-slate-50 dark:hover:bg-[#1f2937] disabled:opacity-50 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary/40"
+          >
+            {cancelLabel}
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={isLoading}
+            className={cn(
+              "inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-70 transition-colors focus-visible:outline-hidden focus-visible:ring-2",
+              CONFIRM_CLASSES[variant]
+            )}
+          >
+            {isLoading && <Spinner />}
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+
+  return createPortal(panel, document.body);
+}`,
+  "Avatar": `"use client";
+/* eslint-disable @next/next/no-img-element */
+
+import { createContext, useContext, useState, type ImgHTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+
+export interface AvatarProps {
+  size?: AvatarSize;
+  className?: string;
+  children?: ReactNode;
+}
+
+interface AvatarContextValue {
+  hasImageError: boolean;
+  setHasImageError: (value: boolean) => void;
+}
+
+const AvatarContext = createContext<AvatarContextValue | null>(null);
+
+function useAvatarContext() {
+  const context = useContext(AvatarContext);
+  if (!context) throw new Error("Avatar sub-components must be used inside <Avatar>");
+  return context;
+}
+
+const SIZE_CLASSES: Record<AvatarSize, string> = {
+  sm: "h-8 w-8 text-xs",
+  md: "h-10 w-10 text-sm",
+  lg: "h-14 w-14 text-base",
+  xl: "h-20 w-20 text-lg",
+};
+
+export function Avatar({ size = "md", className, children }: AvatarProps) {
+  const [hasImageError, setHasImageError] = useState(false);
+
+  return (
+    <AvatarContext.Provider value={{ hasImageError, setHasImageError }}>
+      <span
+        className={cn(
+          "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-slate-100 text-slate-700 dark:bg-[#1f2937] dark:text-slate-200",
+          SIZE_CLASSES[size],
+          className
+        )}
+      >
+        {children}
+      </span>
+    </AvatarContext.Provider>
+  );
+}
+
+Avatar.Image = function AvatarImage({ className, onError, alt, ...props }: ImgHTMLAttributes<HTMLImageElement>) {
+  const { hasImageError, setHasImageError } = useAvatarContext();
+
+  if (hasImageError) return null;
+
+  return (
+    <img
+      className={cn("h-full w-full object-cover", className)}
+      alt={alt ?? ""}
+      onError={(event) => {
+        setHasImageError(true);
+        onError?.(event);
+      }}
+      {...props}
+    />
+  );
+}
+
+Avatar.Fallback = function AvatarFallback({ className, children }: { className?: string; children: ReactNode }) {
+  const { hasImageError } = useAvatarContext();
+  if (!hasImageError) return null;
+
+  return <span className={cn("font-semibold uppercase", className)}>{children}</span>;
+}`,
+  "Badge": `import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+export type BadgeVariant = "default" | "success" | "warning" | "error" | "info" | "outline";
+export type BadgeSize = "sm" | "md" | "lg";
+
+export interface BadgeProps {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  children: ReactNode;
+  className?: string;
+}
+
+const VARIANT_CLASSES: Record<BadgeVariant, string> = {
+  default: "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300",
+  success: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400",
+  warning: "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400",
+  error: "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400",
+  info: "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400",
+  outline: "border border-slate-300 text-slate-600 dark:border-slate-600 dark:text-slate-400",
+};
+
+const SIZE_CLASSES: Record<BadgeSize, string> = {
+  sm: "text-[10px] px-2 py-0.5",
+  md: "text-xs px-2.5 py-0.5",
+  lg: "text-sm px-3 py-1",
+};
+
+export function Badge({ variant = "default", size = "md", children, className }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center font-medium rounded-full",
+        VARIANT_CLASSES[variant],
+        SIZE_CLASSES[size],
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}`,
+  "Breadcrumb": `import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+export function Breadcrumb({ className, ...props }: HTMLAttributes<HTMLElement>) {
+  return <nav aria-label="Breadcrumb" className={cn("w-full", className)} {...props} />;
+}
+
+Breadcrumb.List = function BreadcrumbList({ className, ...props }: HTMLAttributes<HTMLOListElement>) {
+  return <ol className={cn("flex items-center gap-1.5 text-sm", className)} {...props} />;
+}
+
+Breadcrumb.Item = function BreadcrumbItem({ className, ...props }: HTMLAttributes<HTMLLIElement>) {
+  return <li className={cn("inline-flex items-center gap-1.5", className)} {...props} />;
+}
+
+Breadcrumb.Link = function BreadcrumbLink({ className, ...props }: AnchorHTMLAttributes<HTMLAnchorElement>) {
+  return (
+    <a
+      className={cn(
+        "text-slate-500 transition-colors hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+Breadcrumb.Page = function BreadcrumbPage({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cn("font-medium text-slate-900 dark:text-white", className)} {...props} />;
+}
+
+Breadcrumb.Separator = function BreadcrumbSeparator({ className, children = <span aria-hidden="true">/</span> }: { className?: string; children?: ReactNode }) {
+  return <span className={cn("text-slate-400 dark:text-slate-500", className)}>{children}</span>;
+}`,
+  "Button": `import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "destructive" | "outline";
+export type ButtonSize = "sm" | "md" | "lg";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  isLoading?: boolean;
+  children: ReactNode;
+}
+
+const VARIANT_CLASSES: Record<ButtonVariant, string> = {
+  primary:
+    "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary/40",
+  secondary:
+    "bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700 focus-visible:ring-slate-400/40",
+  ghost:
+    "text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800 focus-visible:ring-slate-400/40",
+  destructive:
+    "bg-red-600 text-white hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-600 focus-visible:ring-red-500/40",
+  outline:
+    "border border-slate-300 text-slate-700 hover:bg-slate-50 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-800/50 focus-visible:ring-slate-400/40",
+};
+
+const SIZE_CLASSES: Record<ButtonSize, string> = {
+  sm: "text-xs px-3 py-1.5 h-7 gap-1.5",
+  md: "text-sm px-4 py-2 h-9 gap-2",
+  lg: "text-base px-6 py-2.5 h-11 gap-2",
+};
+
+function Spinner() {
+  return (
+    <svg className="animate-spin h-4 w-4 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+    </svg>
+  );
+}
+
+export function Button({
+  variant = "primary",
+  size = "md",
+  isLoading = false,
+  disabled,
+  children,
+  className,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      {...props}
+      disabled={disabled || isLoading}
+      className={cn(
+        "inline-flex items-center justify-center font-semibold rounded-lg transition-all",
+        "focus-visible:outline-hidden focus-visible:ring-2",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        VARIANT_CLASSES[variant],
+        SIZE_CLASSES[size],
+        className,
+      )}
+    >
+      {isLoading && <Spinner />}
+      {children}
+    </button>
+  );
+}`,
+  "Card": `import type { HTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+export type CardVariant = "default" | "elevated" | "flat";
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: CardVariant;
+}
+
+const CARD_VARIANT_CLASSES: Record<CardVariant, string> = {
+  default: "bg-white dark:bg-[#161b22] border border-slate-200 dark:border-[#1f2937]",
+  elevated: "bg-white dark:bg-[#161b22] border border-slate-200 dark:border-[#1f2937] shadow-lg shadow-slate-200/60 dark:shadow-black/30",
+  flat: "bg-slate-50 dark:bg-[#0d1117] border border-transparent",
+};
+
+export function Card({ variant = "default", className, children, ...props }: CardProps) {
+  return (
+    <div className={cn("rounded-xl", CARD_VARIANT_CLASSES[variant], className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+Card.Header = function CardHeader({ className, children, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("p-6 pb-4", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+Card.Title = function CardTitle({ className, children, ...props }: HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3 className={cn("text-base font-bold text-slate-900 dark:text-white leading-snug", className)} {...props}>
+      {children}
+    </h3>
+  );
+}
+
+Card.Description = function CardDescription({ className, children, ...props }: HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p className={cn("mt-1 text-sm text-slate-500 dark:text-slate-400 leading-relaxed", className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+Card.Content = function CardContent({ className, children, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("px-6 pb-4", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+Card.Footer = function CardFooter({ className, children, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("px-6 pb-6 flex items-center gap-3", className)} {...props}>
+      {children}
+    </div>
+  );
+}`,
+  "Checkbox": `import { useRef, useEffect } from "react";
+import { cn } from "@/lib/utils";
+
+export type CheckboxSize = "sm" | "md" | "lg";
+
+export interface CheckboxProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  size?: CheckboxSize;
+  label?: string;
+  description?: string;
+  id?: string;
+  name?: string;
+  onChange?: (checked: boolean) => void;
+  className?: string;
+}
+
+const BOX_SIZES: Record<CheckboxSize, string> = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6",
+};
+
+const ICON_SIZES: Record<CheckboxSize, string> = {
+  sm: "h-2.5 w-2.5",
+  md: "h-3 w-3",
+  lg: "h-3.5 w-3.5",
+};
+
+const LABEL_SIZES: Record<CheckboxSize, string> = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+};
+
+function CheckIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 12 12" fill="none">
+      <path d="M2 6l3 3 5-5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function MinusIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 12 12" fill="none">
+      <path d="M2.5 6h7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function Checkbox({
+  checked,
+  defaultChecked,
+  indeterminate = false,
+  disabled = false,
+  size = "md",
+  label,
+  description,
+  id,
+  name,
+  onChange,
+  className,
+}: CheckboxProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+
+  const isChecked = checked ?? false;
+  const isFilled = isChecked || indeterminate;
+
+  return (
+    <label
+      className={cn(
+        "inline-flex items-start gap-3",
+        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+        className,
+      )}
+    >
+      <div className="relative mt-0.5 shrink-0">
+        <input
+          ref={inputRef}
+          type="checkbox"
+          id={id}
+          name={name}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          disabled={disabled}
+          onChange={(e) => onChange?.(e.target.checked)}
+          className="sr-only"
+        />
+        <div
+          className={cn(
+            "flex items-center justify-center rounded-sm border-2 transition-all",
+            BOX_SIZES[size],
+            isFilled
+              ? "bg-primary border-primary"
+              : "bg-white dark:bg-[#0d1117] border-slate-300 dark:border-slate-600",
+            !disabled && !isFilled && "hover:border-primary",
+          )}
+        >
+          {isChecked && <CheckIcon className={cn("text-white", ICON_SIZES[size])} />}
+          {indeterminate && !isChecked && <MinusIcon className={cn("text-white", ICON_SIZES[size])} />}
+        </div>
+      </div>
+
+      {(label ?? description) && (
+        <div className="min-w-0">
+          {label && (
+            <span className={cn("block font-medium text-slate-900 dark:text-white leading-tight", LABEL_SIZES[size])}>
+              {label}
+            </span>
+          )}
+          {description && (
+            <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5 leading-relaxed">
+              {description}
+            </p>
+          )}
+        </div>
+      )}
+    </label>
+  );
+}`,
+  "Combobox": `import { useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+export interface ComboboxOption {
+  label: string;
+  value: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+export interface ComboboxProps {
+  options: ComboboxOption[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+  emptyText?: string;
+  label?: string;
+  description?: string;
+  className?: string;
+}
+
+export function Combobox({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder = "Search...",
+  emptyText = "No results",
+  label,
+  description,
+  className,
+}: ComboboxProps) {
+  const [query, setQuery] = useState("");
+  const [open, setOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isControlled = value !== undefined;
+  const selectedValue = isControlled ? value : internalValue;
+
+  const selectedOption = useMemo(
+    () => options.find((option) => option.value === selectedValue),
+    [options, selectedValue]
+  );
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return options;
+    return options.filter(
+      (option) =>
+        option.label.toLowerCase().includes(q) || option.description?.toLowerCase().includes(q)
+    );
+  }, [options, query]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: MouseEvent) => {
+      if (!containerRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+    window.addEventListener("mousedown", onPointerDown);
+    return () => window.removeEventListener("mousedown", onPointerDown);
+  }, [open]);
+
+  useEffect(() => {
+    if (selectedOption && !open) {
+      setQuery(selectedOption.label);
+    }
+  }, [selectedOption, open]);
+
+  const selectValue = (nextValue: string) => {
+    if (!isControlled) setInternalValue(nextValue);
+    onValueChange?.(nextValue);
+    const nextOption = options.find((option) => option.value === nextValue);
+    setQuery(nextOption?.label ?? "");
+    setOpen(false);
+  };
+
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      {label && <label className="text-sm font-medium text-slate-700 dark:text-slate-300">{label}</label>}
+
+      <div ref={containerRef} className="relative">
+        <input
+          value={query}
+          onChange={(event) => {
+            setQuery(event.target.value);
+            setOpen(true);
+            setHighlightedIndex(0);
+          }}
+          onFocus={() => setOpen(true)}
+          onKeyDown={(event) => {
+            if (!open && event.key === "ArrowDown") {
+              setOpen(true);
+              return;
+            }
+            if (event.key === "ArrowDown") {
+              event.preventDefault();
+              setHighlightedIndex((index) => Math.min(index + 1, filtered.length - 1));
+            }
+            if (event.key === "ArrowUp") {
+              event.preventDefault();
+              setHighlightedIndex((index) => Math.max(index - 1, 0));
+            }
+            if (event.key === "Enter") {
+              event.preventDefault();
+              const option = filtered[highlightedIndex];
+              if (option && !option.disabled) selectValue(option.value);
+            }
+            if (event.key === "Escape") {
+              setOpen(false);
+            }
+          }}
+          placeholder={placeholder}
+          className={cn(
+            "h-10 w-full rounded-lg border border-slate-200 bg-white px-3.5 text-sm text-slate-900 outline-hidden transition-all",
+            "hover:border-slate-300 focus:border-primary focus:ring-2 focus:ring-primary/20",
+            "dark:border-[#1f2937] dark:bg-[#0d1117] dark:text-white dark:hover:border-slate-600"
+          )}
+        />
+        <span className="material-symbols-outlined pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[18px] text-slate-400">
+          {open ? "expand_less" : "expand_more"}
+        </span>
+
+        {open && (
+          <div className="absolute z-40 mt-2 max-h-64 w-full overflow-y-auto rounded-xl border border-slate-200 bg-white p-1 shadow-lg dark:border-[#1f2937] dark:bg-[#161b22]">
+            {filtered.length === 0 && (
+              <p className="px-3 py-2 text-xs text-slate-500 dark:text-slate-400">{emptyText}</p>
+            )}
+            {filtered.map((option, index) => {
+              const isSelected = selectedValue === option.value;
+              const isHighlighted = index === highlightedIndex;
+              return (
+                <button
+                  key={option.value}
+                  type="button"
+                  disabled={option.disabled}
+                  onMouseEnter={() => setHighlightedIndex(index)}
+                  onClick={() => !option.disabled && selectValue(option.value)}
+                  className={cn(
+                    "flex w-full items-start gap-2 rounded-lg px-3 py-2 text-left transition-colors",
+                    isHighlighted && "bg-primary/10",
+                    !isHighlighted && "hover:bg-slate-50 dark:hover:bg-[#0d1117]",
+                    option.disabled && "cursor-not-allowed opacity-50"
+                  )}
+                >
+                  <span
+                    className={cn(
+                      "mt-0.5 material-symbols-outlined text-[16px]",
+                      isSelected ? "text-primary" : "text-transparent"
+                    )}
+                  >
+                    check
+                  </span>
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate text-sm text-slate-900 dark:text-white">{option.label}</span>
+                    {option.description && (
+                      <span className="mt-0.5 block truncate text-xs text-slate-500 dark:text-slate-400">
+                        {option.description}
+                      </span>
+                    )}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {description && <p className="text-xs text-slate-500 dark:text-slate-400">{description}</p>}
+    </div>
+  );
+}`,
+  "Command": `import { createContext, useContext, useMemo, useState, type HTMLAttributes, type InputHTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+interface CommandContextValue {
+  query: string;
+  setQuery: (query: string) => void;
+}
+
+const CommandContext = createContext<CommandContextValue | null>(null);
+
+function useCommandContext() {
+  const context = useContext(CommandContext);
+  if (!context) throw new Error("Command sub-components must be used inside <Command>");
+  return context;
+}
+
+export function Command({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  const [query, setQuery] = useState("");
+
+  return (
+    <CommandContext.Provider value={{ query, setQuery }}>
+      <div
+        className={cn(
+          "rounded-xl border border-slate-200 bg-white dark:border-[#1f2937] dark:bg-[#161b22]",
+          className
+        )}
+        {...props}
+      />
+    </CommandContext.Provider>
+  );
+}
+
+Command.Input = function CommandInput({ className, ...props }: InputHTMLAttributes<HTMLInputElement>) {
+  const { query, setQuery } = useCommandContext();
+
+  return (
+    <div className="flex items-center gap-2 border-b border-slate-100 px-3 py-2 dark:border-[#1f2937]">
+      <span className="material-symbols-outlined text-[18px] text-slate-400">search</span>
+      <input
+        value={query}
+        onChange={(event) => setQuery(event.target.value)}
+        className={cn(
+          "h-8 w-full bg-transparent text-sm text-slate-900 outline-hidden placeholder:text-slate-400 dark:text-white",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+Command.List = function CommandList({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("max-h-64 overflow-y-auto p-1", className)} {...props} />;
+}
+
+interface CommandItemProps extends HTMLAttributes<HTMLButtonElement> {
+  value: string;
+  keywords?: string[];
+  children: ReactNode;
+}
+
+Command.Item = function CommandItem({ value, keywords, className, children, ...props }: CommandItemProps) {
+  const { query } = useCommandContext();
+
+  const visible = useMemo(() => {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized) return true;
+    const terms = [value, ...(keywords ?? [])].join(" ").toLowerCase();
+    return terms.includes(normalized);
+  }, [query, value, keywords]);
+
+  if (!visible) return null;
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm text-slate-700 transition-colors hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-[#0d1117]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+Command.Empty = function CommandEmpty({ className, children = "No results" }: { className?: string; children?: ReactNode }) {
+  const { query } = useCommandContext();
+  if (!query.trim()) return null;
+  return <p className={cn("px-3 py-5 text-center text-xs text-slate-500 dark:text-slate-400", className)}>{children}</p>;
+}
+
+Command.Group = function CommandGroup({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("space-y-1", className)} {...props} />;
+}
+
+Command.Label = function CommandLabel({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p
+      className={cn("px-3 py-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400", className)}
+      {...props}
+    />
+  );
+}
+
+Command.Separator = function CommandSeparator({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("my-1 h-px bg-slate-200 dark:bg-[#1f2937]", className)} {...props} />;
+}`,
+  "DatePicker": `import { forwardRef, type InputHTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+export interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label?: string;
+  description?: string;
+  error?: string;
+}
+
+export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(function DatePickerRoot(
+  { label, description, error, className, id, ...props },
+  ref
+) {
+  const inputId = id ?? (label ? label.toLowerCase().replace(/\\s+/g, "-") : undefined);
+
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      {label && (
+        <label htmlFor={inputId} className="text-sm font-medium text-slate-700 dark:text-slate-300">
+          {label}
+        </label>
+      )}
+      <input
+        ref={ref}
+        id={inputId}
+        type="date"
+        className={cn(
+          "h-10 w-full rounded-lg border border-slate-200 bg-white px-3.5 text-sm text-slate-900 outline-hidden transition-all",
+          "hover:border-slate-300 focus:border-primary focus:ring-2 focus:ring-primary/20",
+          "dark:border-[#1f2937] dark:bg-[#0d1117] dark:text-white dark:hover:border-slate-600",
+          error && "border-red-400 focus:border-red-400 focus:ring-red-400/20 dark:border-red-500"
+        )}
+        {...props}
+      />
+      {description && !error && <p className="text-xs text-slate-500 dark:text-slate-400">{description}</p>}
+      {error && <p className="text-xs text-red-500 dark:text-red-400">{error}</p>}
+    </div>
+  );
+});`,
+  "Dialog": `"use client";
+
+import { useEffect, useRef, type HTMLAttributes, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@/lib/utils";
+import { useAnimatedMount } from "@/hooks/use-animated-mount";
+
+// \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export type DialogSize = "sm" | "md" | "lg" | "xl";
+
+export interface DialogProps {
+  open: boolean;
+  onClose: () => void;
+  size?: DialogSize;
+  children: ReactNode;
+  className?: string;
+}
+
+export interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export interface DialogTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+  children: ReactNode;
+}
+
+export interface DialogDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+  children: ReactNode;
+}
+
+export interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+// \u2500\u2500\u2500 Constants \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+const SIZE_CLASSES: Record<DialogSize, string> = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+};
+
+// \u2500\u2500\u2500 Sub-components \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+Dialog.Header = function DialogHeader({ children, className, ...props }: DialogHeaderProps) {
+  return (
+    <div className={cn("px-6 pt-6 pb-4", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+Dialog.Title = function DialogTitle({ children, className, ...props }: DialogTitleProps) {
+  return (
+    <h2 className={cn("text-lg font-semibold text-slate-900 dark:text-white pr-8", className)} {...props}>
+      {children}
+    </h2>
+  );
+}
+
+Dialog.Description = function DialogDescription({ children, className, ...props }: DialogDescriptionProps) {
+  return (
+    <p className={cn("mt-1.5 text-sm text-slate-500 dark:text-slate-400 leading-relaxed", className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+Dialog.Content = function DialogContent({ children, className, ...props }: DialogContentProps) {
+  return (
+    <div className={cn("px-6 py-2", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+Dialog.Footer = function DialogFooter({ children, className, ...props }: DialogFooterProps) {
+  return (
+    <div className={cn("px-6 py-4 flex items-center justify-end gap-3 border-t border-slate-100 dark:border-[#1f2937]", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+// \u2500\u2500\u2500 Dialog \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export function Dialog({ open, onClose, size = "md", children, className }: DialogProps) {
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const { mounted, visible } = useAnimatedMount(open, 200);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+
+    document.addEventListener("keydown", handleKey);
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.removeEventListener("keydown", handleKey);
+      document.body.style.overflow = "";
+    };
+  }, [open, onClose]);
+
+  if (!mounted) return null;
+
+  const panel = (
+    <div
+      ref={overlayRef}
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      onClick={(e) => {
+        if (e.target === overlayRef.current) onClose();
+      }}
+    >
+      {/* Backdrop */}
+      <div
+        className={cn(
+          "absolute inset-0 bg-black/50 backdrop-blur-xs transition-opacity duration-200",
+          visible ? "opacity-100" : "opacity-0"
+        )}
+      />
+
+      {/* Panel */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        className={cn(
+          "relative w-full rounded-2xl bg-white dark:bg-[#161b22] shadow-2xl shadow-black/20",
+          "border border-slate-200 dark:border-[#1f2937]",
+          "transition-all duration-200",
+          visible ? "opacity-100 scale-100" : "opacity-0 scale-95",
+          SIZE_CLASSES[size],
+          className
+        )}
+      >
+        {/* Close button */}
+        <button
+          onClick={onClose}
+          className="absolute right-4 top-4 rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 dark:hover:bg-[#1f2937] hover:text-slate-600 dark:hover:text-slate-200 transition-colors"
+          aria-label="Close dialog"
+        >
+          <svg className="h-4 w-4" viewBox="0 0 16 16" fill="none">
+            <path d="M12 4L4 12M4 4l8 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+          </svg>
+        </button>
+
+        {children}
+      </div>
+    </div>
+  );
+
+  return createPortal(panel, document.body);
+}`,
+  "Drawer": `"use client";
+
+import { useEffect, useRef, type HTMLAttributes, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@/lib/utils";
+import { useAnimatedMount } from "@/hooks/use-animated-mount";
+
+// \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export type DrawerSide = "right" | "left";
+export type DrawerSize = "sm" | "md" | "lg" | "full";
+
+export interface DrawerProps {
+  open: boolean;
+  onClose: () => void;
+  side?: DrawerSide;
+  size?: DrawerSize;
+  children: ReactNode;
+  className?: string;
+}
+
+export interface DrawerHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export interface DrawerTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+  children: ReactNode;
+}
+
+export interface DrawerDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+  children: ReactNode;
+}
+
+export interface DrawerContentProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export interface DrawerFooterProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+// \u2500\u2500\u2500 Constants \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+const SIZE_CLASSES: Record<DrawerSize, string> = {
+  sm: "w-80",
+  md: "w-96",
+  lg: "w-lg",
+  full: "w-full",
+};
+
+const SIDE_CLASSES: Record<DrawerSide, { panel: string; hidden: string }> = {
+  right: { panel: "right-0 inset-y-0", hidden: "translate-x-full" },
+  left: { panel: "left-0 inset-y-0", hidden: "-translate-x-full" },
+};
+
+// \u2500\u2500\u2500 Sub-components \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+Drawer.Header = function DrawerHeader({ children, className, ...props }: DrawerHeaderProps) {
+  return (
+    <div className={cn("px-6 pt-6 pb-4 border-b border-slate-100 dark:border-[#1f2937]", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+Drawer.Title = function DrawerTitle({ children, className, ...props }: DrawerTitleProps) {
+  return (
+    <h2 className={cn("text-lg font-semibold text-slate-900 dark:text-white pr-8", className)} {...props}>
+      {children}
+    </h2>
+  );
+}
+
+Drawer.Description = function DrawerDescription({ children, className, ...props }: DrawerDescriptionProps) {
+  return (
+    <p className={cn("mt-1 text-sm text-slate-500 dark:text-slate-400 leading-relaxed", className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+Drawer.Content = function DrawerContent({ children, className, ...props }: DrawerContentProps) {
+  return (
+    <div className={cn("flex-1 overflow-y-auto px-6 py-4", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+Drawer.Footer = function DrawerFooter({ children, className, ...props }: DrawerFooterProps) {
+  return (
+    <div className={cn("px-6 py-4 border-t border-slate-100 dark:border-[#1f2937] flex items-center justify-end gap-3 shrink-0", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+// \u2500\u2500\u2500 Drawer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export function Drawer({ open, onClose, side = "right", size = "md", children, className }: DrawerProps) {
+  const backdropRef = useRef<HTMLDivElement>(null);
+  const { mounted, visible } = useAnimatedMount(open, 300);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+
+    document.addEventListener("keydown", handleKey);
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.removeEventListener("keydown", handleKey);
+      document.body.style.overflow = "";
+    };
+  }, [open, onClose]);
+
+  if (!mounted) return null;
+
+  const { panel, hidden } = SIDE_CLASSES[side];
+
+  const drawer = (
+    <div
+      ref={backdropRef}
+      className="fixed inset-0 z-50 flex"
+      onClick={(e) => {
+        if (e.target === backdropRef.current) onClose();
+      }}
+    >
+      {/* Backdrop */}
+      <div
+        className={cn(
+          "absolute inset-0 bg-black/50 backdrop-blur-xs transition-opacity duration-300",
+          visible ? "opacity-100" : "opacity-0"
+        )}
+      />
+
+      {/* Panel */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        className={cn(
+          "absolute flex flex-col h-full bg-white dark:bg-[#161b22]",
+          "border-slate-200 dark:border-[#1f2937]",
+          side === "right" ? "border-l" : "border-r",
+          "shadow-2xl shadow-black/20",
+          "transition-transform duration-300 ease-in-out",
+          visible ? "translate-x-0" : hidden,
+          SIZE_CLASSES[size],
+          panel,
+          className
+        )}
+      >
+        {/* Close button */}
+        <button
+          onClick={onClose}
+          className="absolute right-4 top-4 z-10 rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 dark:hover:bg-[#1f2937] hover:text-slate-600 dark:hover:text-slate-200 transition-colors"
+          aria-label="Close drawer"
+        >
+          <svg className="h-4 w-4" viewBox="0 0 16 16" fill="none">
+            <path d="M12 4L4 12M4 4l8 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+          </svg>
+        </button>
+
+        {children}
+      </div>
+    </div>
+  );
+
+  return createPortal(drawer, document.body);
+}`,
+  "DropdownMenu": `import { createContext, useCallback, useContext, useEffect, useRef, useState, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+interface DropdownMenuContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const DropdownMenuContext = createContext<DropdownMenuContextValue | null>(null);
+
+function useDropdownMenuContext() {
+  const context = useContext(DropdownMenuContext);
+  if (!context) throw new Error("DropdownMenu sub-components must be used inside <DropdownMenu>");
+  return context;
+}
+
+export interface DropdownMenuProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: ReactNode;
+  className?: string;
+}
+
+export interface DropdownMenuTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+}
+
+export interface DropdownMenuContentProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export interface DropdownMenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  inset?: boolean;
+  onSelect?: () => void;
+}
+
+export function DropdownMenu({ open, defaultOpen = false, onOpenChange, children, className }: DropdownMenuProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isControlled = open !== undefined;
+  const isOpen = isControlled ? open : internalOpen;
+
+  const setOpen = useCallback((next: boolean) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  }, [isControlled, onOpenChange]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const onPointerDown = (event: MouseEvent) => {
+      if (!containerRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+
+    window.addEventListener("mousedown", onPointerDown);
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      window.removeEventListener("mousedown", onPointerDown);
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isOpen, setOpen]);
+
+  return (
+    <DropdownMenuContext.Provider value={{ open: isOpen, setOpen }}>
+      <div ref={containerRef} className={cn("relative inline-block", className)}>
+        {children}
+      </div>
+    </DropdownMenuContext.Provider>
+  );
+}
+
+DropdownMenu.Trigger = function DropdownMenuTrigger({ children, className, onClick, ...props }: DropdownMenuTriggerProps) {
+  const { open, setOpen } = useDropdownMenuContext();
+
+  return (
+    <button
+      type="button"
+      onClick={(event) => {
+        onClick?.(event);
+        setOpen(!open);
+      }}
+      className={cn(
+        "inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 transition-all",
+        "hover:bg-slate-50 dark:border-[#1f2937] dark:bg-[#0d1117] dark:text-slate-200 dark:hover:bg-[#161b22]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+DropdownMenu.Content = function DropdownMenuContent({ children, className, ...props }: DropdownMenuContentProps) {
+  const { open } = useDropdownMenuContext();
+  if (!open) return null;
+
+  return (
+    <div
+      className={cn(
+        "absolute right-0 top-[calc(100%+8px)] z-50 min-w-56 rounded-xl border border-slate-200 bg-white p-1 shadow-xl",
+        "dark:border-[#1f2937] dark:bg-[#161b22]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+DropdownMenu.Label = function DropdownMenuLabel({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("px-2.5 py-1.5 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400", className)}
+      {...props}
+    />
+  );
+}
+
+DropdownMenu.Separator = function DropdownMenuSeparator({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("my-1 h-px bg-slate-200 dark:bg-[#1f2937]", className)} {...props} />;
+}
+
+DropdownMenu.Item = function DropdownMenuItem({ inset = false, onSelect, onClick, className, disabled, ...props }: DropdownMenuItemProps) {
+  const { setOpen } = useDropdownMenuContext();
+
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={(event) => {
+        onClick?.(event);
+        if (disabled) return;
+        onSelect?.();
+        setOpen(false);
+      }}
+      className={cn(
+        "flex w-full items-center rounded-lg px-2.5 py-2 text-left text-sm text-slate-700 transition-all",
+        "hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-[#0d1117]",
+        inset && "pl-8",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      )}
+      {...props}
+    />
+  );
+}`,
+  "FloatingLines": `import { useEffect, useRef } from "react";
+import {
+  Scene,
+  OrthographicCamera,
+  WebGLRenderer,
+  PlaneGeometry,
+  Mesh,
+  ShaderMaterial,
+  Vector3,
+  Vector2,
+  Clock,
+} from "three";
+
+const vertexShader = \`
+precision highp float;
+
+void main() {
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+\`;
+
+const fragmentShader = \`
+precision highp float;
+
+uniform float iTime;
+uniform vec3 iResolution;
+uniform float animationSpeed;
+
+uniform bool enableTop;
+uniform bool enableMiddle;
+uniform bool enableBottom;
+
+uniform int topLineCount;
+uniform int middleLineCount;
+uniform int bottomLineCount;
+
+uniform float topLineDistance;
+uniform float middleLineDistance;
+uniform float bottomLineDistance;
+
+uniform vec3 topWavePosition;
+uniform vec3 middleWavePosition;
+uniform vec3 bottomWavePosition;
+
+uniform vec2 iMouse;
+uniform bool interactive;
+uniform float bendRadius;
+uniform float bendStrength;
+uniform float bendInfluence;
+
+uniform bool parallax;
+uniform float parallaxStrength;
+uniform vec2 parallaxOffset;
+
+uniform vec3 lineGradient[8];
+uniform int lineGradientCount;
+
+const vec3 BLACK = vec3(0.0);
+const vec3 PINK = vec3(233.0, 71.0, 245.0) / 255.0;
+const vec3 BLUE = vec3(47.0, 75.0, 162.0) / 255.0;
+
+mat2 rotate(float r) {
+  return mat2(cos(r), sin(r), -sin(r), cos(r));
+}
+
+vec3 background_color(vec2 uv) {
+  vec3 col = vec3(0.0);
+  float y = sin(uv.x - 0.2) * 0.3 - 0.1;
+  float m = uv.y - y;
+  col += mix(BLUE, BLACK, smoothstep(0.0, 1.0, abs(m)));
+  col += mix(PINK, BLACK, smoothstep(0.0, 1.0, abs(m - 0.8)));
+  return col * 0.5;
+}
+
+vec3 getLineColor(float t, vec3 baseColor) {
+  if (lineGradientCount <= 0) return baseColor;
+
+  vec3 gradientColor;
+  if (lineGradientCount == 1) {
+    gradientColor = lineGradient[0];
+  } else {
+    float clampedT = clamp(t, 0.0, 0.9999);
+    float scaled = clampedT * float(lineGradientCount - 1);
+    int idx = int(floor(scaled));
+    float f = fract(scaled);
+    int idx2 = min(idx + 1, lineGradientCount - 1);
+    vec3 c1 = lineGradient[idx];
+    vec3 c2 = lineGradient[idx2];
+    gradientColor = mix(c1, c2, f);
+  }
+  return gradientColor * 0.5;
+}
+
+float wave(vec2 uv, float offset, vec2 screenUv, vec2 mouseUv, bool shouldBend) {
+  float time = iTime * animationSpeed;
+  float x_offset = offset;
+  float x_movement = time * 0.1;
+  float amp = sin(offset + time * 0.2) * 0.3;
+  float y = sin(uv.x + x_offset + x_movement) * amp;
+
+  if (shouldBend) {
+    vec2 d = screenUv - mouseUv;
+    float influence = exp(-dot(d, d) * bendRadius);
+    float bendOffset = (mouseUv.y - screenUv.y) * influence * bendStrength * bendInfluence;
+    y += bendOffset;
+  }
+
+  float m = uv.y - y;
+  return 0.0175 / max(abs(m) + 0.01, 1e-3) + 0.01;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 baseUv = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
+  baseUv.y *= -1.0;
+
+  if (parallax) baseUv += parallaxOffset;
+
+  vec3 col = vec3(0.0);
+  vec3 b = lineGradientCount > 0 ? vec3(0.0) : background_color(baseUv);
+
+  vec2 mouseUv = vec2(0.0);
+  if (interactive) {
+    mouseUv = (2.0 * iMouse - iResolution.xy) / iResolution.y;
+    mouseUv.y *= -1.0;
+  }
+
+  if (enableBottom) {
+    for (int i = 0; i < bottomLineCount; ++i) {
+      float fi = float(i);
+      float t = fi / max(float(bottomLineCount - 1), 1.0);
+      vec3 lineCol = getLineColor(t, b);
+      float angle = bottomWavePosition.z * log(length(baseUv) + 1.0);
+      vec2 ruv = baseUv * rotate(angle);
+      col += lineCol * wave(
+        ruv + vec2(bottomLineDistance * fi + bottomWavePosition.x, bottomWavePosition.y),
+        1.5 + 0.2 * fi, baseUv, mouseUv, interactive
+      ) * 0.2;
+    }
+  }
+
+  if (enableMiddle) {
+    for (int i = 0; i < middleLineCount; ++i) {
+      float fi = float(i);
+      float t = fi / max(float(middleLineCount - 1), 1.0);
+      vec3 lineCol = getLineColor(t, b);
+      float angle = middleWavePosition.z * log(length(baseUv) + 1.0);
+      vec2 ruv = baseUv * rotate(angle);
+      col += lineCol * wave(
+        ruv + vec2(middleLineDistance * fi + middleWavePosition.x, middleWavePosition.y),
+        2.0 + 0.15 * fi, baseUv, mouseUv, interactive
+      );
+    }
+  }
+
+  if (enableTop) {
+    for (int i = 0; i < topLineCount; ++i) {
+      float fi = float(i);
+      float t = fi / max(float(topLineCount - 1), 1.0);
+      vec3 lineCol = getLineColor(t, b);
+      float angle = topWavePosition.z * log(length(baseUv) + 1.0);
+      vec2 ruv = baseUv * rotate(angle);
+      ruv.x *= -1.0;
+      col += lineCol * wave(
+        ruv + vec2(topLineDistance * fi + topWavePosition.x, topWavePosition.y),
+        1.0 + 0.2 * fi, baseUv, mouseUv, interactive
+      ) * 0.1;
+    }
+  }
+
+  fragColor = vec4(col, 1.0);
+}
+
+void main() {
+  vec4 color = vec4(0.0);
+  mainImage(color, gl_FragCoord.xy);
+  gl_FragColor = color;
+}
+\`;
+
+const MAX_GRADIENT_STOPS = 8;
+
+function hexToVec3(hex: string): Vector3 {
+  const value = hex.trim().replace(/^#/, "");
+  let r = 255, g = 255, b = 255;
+
+  if (value.length === 3) {
+    r = parseInt((value[0] ?? "f") + (value[0] ?? "f"), 16);
+    g = parseInt((value[1] ?? "f") + (value[1] ?? "f"), 16);
+    b = parseInt((value[2] ?? "f") + (value[2] ?? "f"), 16);
+  } else if (value.length === 6) {
+    r = parseInt(value.slice(0, 2), 16);
+    g = parseInt(value.slice(2, 4), 16);
+    b = parseInt(value.slice(4, 6), 16);
+  }
+
+  return new Vector3(r / 255, g / 255, b / 255);
+}
+
+export interface WavePosition {
+  x?: number;
+  y?: number;
+  rotate?: number;
+}
+
+export interface FloatingLinesProps {
+  linesGradient?: string[];
+  enabledWaves?: Array<"top" | "middle" | "bottom">;
+  lineCount?: number | number[];
+  lineDistance?: number | number[];
+  topWavePosition?: WavePosition;
+  middleWavePosition?: WavePosition;
+  bottomWavePosition?: WavePosition;
+  animationSpeed?: number;
+  interactive?: boolean;
+  bendRadius?: number;
+  bendStrength?: number;
+  mouseDamping?: number;
+  parallax?: boolean;
+  parallaxStrength?: number;
+  mixBlendMode?: React.CSSProperties["mixBlendMode"];
+  className?: string;
+}
+
+type WaveType = "top" | "middle" | "bottom";
+
+export function FloatingLines({
+  linesGradient,
+  enabledWaves = ["top", "middle", "bottom"],
+  lineCount = 6,
+  lineDistance = 5,
+  topWavePosition,
+  middleWavePosition,
+  bottomWavePosition = { x: 2.0, y: -0.7, rotate: -1 },
+  animationSpeed = 1,
+  interactive = true,
+  bendRadius = 5.0,
+  bendStrength = -0.5,
+  mouseDamping = 0.05,
+  parallax = true,
+  parallaxStrength = 0.2,
+  mixBlendMode = "screen",
+  className,
+}: FloatingLinesProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const targetMouseRef = useRef(new Vector2(-1000, -1000));
+  const currentMouseRef = useRef(new Vector2(-1000, -1000));
+  const targetInfluenceRef = useRef(0);
+  const currentInfluenceRef = useRef(0);
+  const targetParallaxRef = useRef(new Vector2(0, 0));
+  const currentParallaxRef = useRef(new Vector2(0, 0));
+
+  const getLineCount = (waveType: WaveType): number => {
+    if (typeof lineCount === "number") return lineCount;
+    if (!enabledWaves.includes(waveType)) return 0;
+    const index = enabledWaves.indexOf(waveType);
+    return lineCount[index] ?? 6;
+  };
+
+  const getLineDistance = (waveType: WaveType): number => {
+    if (typeof lineDistance === "number") return lineDistance;
+    if (!enabledWaves.includes(waveType)) return 0.1;
+    const index = enabledWaves.indexOf(waveType);
+    return lineDistance[index] ?? 0.1;
+  };
+
+  const topLineCount = enabledWaves.includes("top") ? getLineCount("top") : 0;
+  const middleLineCount = enabledWaves.includes("middle") ? getLineCount("middle") : 0;
+  const bottomLineCount = enabledWaves.includes("bottom") ? getLineCount("bottom") : 0;
+
+  const topLineDistance = enabledWaves.includes("top") ? getLineDistance("top") * 0.01 : 0.01;
+  const middleLineDistance = enabledWaves.includes("middle") ? getLineDistance("middle") * 0.01 : 0.01;
+  const bottomLineDistance = enabledWaves.includes("bottom") ? getLineDistance("bottom") * 0.01 : 0.01;
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const scene = new Scene();
+    const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    camera.position.z = 1;
+
+    const renderer = new WebGLRenderer({ antialias: true, alpha: false });
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+    renderer.domElement.style.width = "100%";
+    renderer.domElement.style.height = "100%";
+    containerRef.current.appendChild(renderer.domElement);
+
+    const uniforms = {
+      iTime: { value: 0 },
+      iResolution: { value: new Vector3(1, 1, 1) },
+      animationSpeed: { value: animationSpeed },
+
+      enableTop: { value: enabledWaves.includes("top") },
+      enableMiddle: { value: enabledWaves.includes("middle") },
+      enableBottom: { value: enabledWaves.includes("bottom") },
+
+      topLineCount: { value: topLineCount },
+      middleLineCount: { value: middleLineCount },
+      bottomLineCount: { value: bottomLineCount },
+
+      topLineDistance: { value: topLineDistance },
+      middleLineDistance: { value: middleLineDistance },
+      bottomLineDistance: { value: bottomLineDistance },
+
+      topWavePosition: {
+        value: new Vector3(
+          topWavePosition?.x ?? 10.0,
+          topWavePosition?.y ?? 0.5,
+          topWavePosition?.rotate ?? -0.4,
+        ),
+      },
+      middleWavePosition: {
+        value: new Vector3(
+          middleWavePosition?.x ?? 5.0,
+          middleWavePosition?.y ?? 0.0,
+          middleWavePosition?.rotate ?? 0.2,
+        ),
+      },
+      bottomWavePosition: {
+        value: new Vector3(
+          bottomWavePosition?.x ?? 2.0,
+          bottomWavePosition?.y ?? -0.7,
+          bottomWavePosition?.rotate ?? 0.4,
+        ),
+      },
+
+      iMouse: { value: new Vector2(-1000, -1000) },
+      interactive: { value: interactive },
+      bendRadius: { value: bendRadius },
+      bendStrength: { value: bendStrength },
+      bendInfluence: { value: 0 },
+
+      parallax: { value: parallax },
+      parallaxStrength: { value: parallaxStrength },
+      parallaxOffset: { value: new Vector2(0, 0) },
+
+      lineGradient: {
+        value: Array.from({ length: MAX_GRADIENT_STOPS }, () => new Vector3(1, 1, 1)),
+      },
+      lineGradientCount: { value: 0 },
+    };
+
+    if (linesGradient && linesGradient.length > 0) {
+      const stops = linesGradient.slice(0, MAX_GRADIENT_STOPS);
+      uniforms.lineGradientCount.value = stops.length;
+      stops.forEach((hex, i) => {
+        const color = hexToVec3(hex);
+        const gradientEntry = uniforms.lineGradient.value[i];
+        if (gradientEntry) gradientEntry.set(color.x, color.y, color.z);
+      });
+    }
+
+    const material = new ShaderMaterial({ uniforms, vertexShader, fragmentShader });
+    const geometry = new PlaneGeometry(2, 2);
+    const mesh = new Mesh(geometry, material);
+    scene.add(mesh);
+
+    const clock = new Clock();
+
+    const setSize = () => {
+      const el = containerRef.current;
+      if (!el) return;
+      const width = el.clientWidth || 1;
+      const height = el.clientHeight || 1;
+      renderer.setSize(width, height, false);
+      const cw = renderer.domElement.width;
+      const ch = renderer.domElement.height;
+      uniforms.iResolution.value.set(cw, ch, 1);
+    };
+
+    setSize();
+
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(setSize) : null;
+    if (ro && containerRef.current) ro.observe(containerRef.current);
+
+    const handlePointerMove = (event: PointerEvent) => {
+      const rect = renderer.domElement.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      const dpr = renderer.getPixelRatio();
+      targetMouseRef.current.set(x * dpr, (rect.height - y) * dpr);
+      targetInfluenceRef.current = 1.0;
+
+      if (parallax) {
+        const cx = rect.width / 2;
+        const cy = rect.height / 2;
+        targetParallaxRef.current.set(
+          ((x - cx) / rect.width) * parallaxStrength,
+          (-(y - cy) / rect.height) * parallaxStrength,
+        );
+      }
+    };
+
+    const handlePointerLeave = () => {
+      targetInfluenceRef.current = 0.0;
+    };
+
+    if (interactive) {
+      renderer.domElement.addEventListener("pointermove", handlePointerMove);
+      renderer.domElement.addEventListener("pointerleave", handlePointerLeave);
+    }
+
+    let raf = 0;
+    const renderLoop = () => {
+      uniforms.iTime.value = clock.getElapsedTime();
+
+      if (interactive) {
+        currentMouseRef.current.lerp(targetMouseRef.current, mouseDamping);
+        uniforms.iMouse.value.copy(currentMouseRef.current);
+        currentInfluenceRef.current +=
+          (targetInfluenceRef.current - currentInfluenceRef.current) * mouseDamping;
+        uniforms.bendInfluence.value = currentInfluenceRef.current;
+      }
+
+      if (parallax) {
+        currentParallaxRef.current.lerp(targetParallaxRef.current, mouseDamping);
+        uniforms.parallaxOffset.value.copy(currentParallaxRef.current);
+      }
+
+      renderer.render(scene, camera);
+      raf = requestAnimationFrame(renderLoop);
+    };
+    renderLoop();
+
+    return () => {
+      cancelAnimationFrame(raf);
+      ro?.disconnect();
+
+      if (interactive) {
+        renderer.domElement.removeEventListener("pointermove", handlePointerMove);
+        renderer.domElement.removeEventListener("pointerleave", handlePointerLeave);
+      }
+
+      geometry.dispose();
+      material.dispose();
+      renderer.dispose();
+      if (renderer.domElement.parentElement) {
+        renderer.domElement.parentElement.removeChild(renderer.domElement);
+      }
+    };
+  }, [
+    linesGradient,
+    enabledWaves,
+    lineCount,
+    lineDistance,
+    topWavePosition,
+    middleWavePosition,
+    bottomWavePosition,
+    animationSpeed,
+    interactive,
+    bendRadius,
+    bendStrength,
+    mouseDamping,
+    parallax,
+    parallaxStrength,
+    topLineCount,
+    middleLineCount,
+    bottomLineCount,
+    topLineDistance,
+    middleLineDistance,
+    bottomLineDistance,
+  ]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      style={{ mixBlendMode, position: "absolute", inset: 0, width: "100%", height: "100%" }}
+    />
+  );
+}`,
+  "Input": `import { forwardRef, type InputHTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+// \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export type InputSize = "sm" | "md" | "lg";
+export type InputVariant = "default" | "filled" | "ghost";
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  label?: string;
+  description?: string;
+  error?: string;
+  size?: InputSize;
+  variant?: InputVariant;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
+}
+
+// \u2500\u2500\u2500 Constants \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+const SIZE_CLASSES: Record<InputSize, { input: string; label: string; icon: string }> = {
+  sm: { input: "h-8 px-3 text-xs", label: "text-xs", icon: "h-3.5 w-3.5" },
+  md: { input: "h-10 px-3.5 text-sm", label: "text-sm", icon: "h-4 w-4" },
+  lg: { input: "h-12 px-4 text-base", label: "text-sm", icon: "h-4.5 w-4.5" },
+};
+
+const VARIANT_BASE: Record<InputVariant, string> = {
+  default:
+    "border border-slate-200 dark:border-[#1f2937] bg-white dark:bg-[#0d1117] " +
+    "hover:border-slate-300 dark:hover:border-slate-600 " +
+    "focus-within:border-primary dark:focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20",
+  filled:
+    "border border-transparent bg-slate-100 dark:bg-[#161b22] " +
+    "hover:bg-slate-150 dark:hover:bg-[#1f2937] " +
+    "focus-within:border-primary dark:focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 focus-within:bg-white dark:focus-within:bg-[#0d1117]",
+  ghost:
+    "border border-transparent bg-transparent " +
+    "hover:bg-slate-50 dark:hover:bg-[#161b22] " +
+    "focus-within:border-primary dark:focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20",
+};
+
+const ERROR_OVERRIDE =
+  "border-red-400 dark:border-red-500 focus-within:border-red-400 dark:focus-within:border-red-500 focus-within:ring-red-400/20";
+
+// \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function InputRoot(
+  {
+    label,
+    description,
+    error,
+    size = "md",
+    variant = "default",
+    leadingIcon,
+    trailingIcon,
+    disabled,
+    className,
+    id,
+    ...rest
+  },
+  ref
+) {
+  const s = SIZE_CLASSES[size];
+  const inputId = id ?? (label ? label.toLowerCase().replace(/\\s+/g, "-") : undefined);
+
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      {label && (
+        <label
+          htmlFor={inputId}
+          className={cn(
+            "font-medium text-slate-700 dark:text-slate-300",
+            s.label,
+            disabled && "opacity-50"
+          )}
+        >
+          {label}
+        </label>
+      )}
+
+      <div
+        className={cn(
+          "relative flex items-center rounded-lg transition-all",
+          VARIANT_BASE[variant],
+          error && ERROR_OVERRIDE,
+          disabled && "opacity-50 cursor-not-allowed pointer-events-none"
+        )}
+      >
+        {leadingIcon && (
+          <span className={cn("absolute left-3 flex shrink-0 items-center text-slate-400", s.icon)}>
+            {leadingIcon}
+          </span>
+        )}
+
+        <input
+          ref={ref}
+          id={inputId}
+          disabled={disabled}
+          className={cn(
+            "w-full bg-transparent outline-hidden text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-500",
+            s.input,
+            leadingIcon && (size === "sm" ? "pl-8" : size === "lg" ? "pl-10" : "pl-9"),
+            trailingIcon && (size === "sm" ? "pr-8" : size === "lg" ? "pr-10" : "pr-9")
+          )}
+          {...rest}
+        />
+
+        {trailingIcon && (
+          <span className={cn("absolute right-3 flex shrink-0 items-center text-slate-400", s.icon)}>
+            {trailingIcon}
+          </span>
+        )}
+      </div>
+
+      {description && !error && (
+        <p className="text-xs text-slate-500 dark:text-slate-400">{description}</p>
+      )}
+      {error && (
+        <p className="text-xs text-red-500 dark:text-red-400">{error}</p>
+      )}
+    </div>
+  );
+});`,
+  "Pagination": `import { cn } from "@/lib/utils";
+
+type PaginationToken = number | "ellipsis";
+
+export interface PaginationProps {
+  page: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  siblingCount?: number;
+  className?: string;
+}
+
+function buildRange(page: number, totalPages: number, siblingCount: number): PaginationToken[] {
+  const pages: PaginationToken[] = [];
+  const totalButtons = siblingCount * 2 + 5;
+
+  if (totalPages <= totalButtons) {
+    for (let i = 1; i <= totalPages; i += 1) pages.push(i);
+    return pages;
+  }
+
+  const leftSibling = Math.max(page - siblingCount, 1);
+  const rightSibling = Math.min(page + siblingCount, totalPages);
+  const showLeftEllipsis = leftSibling > 2;
+  const showRightEllipsis = rightSibling < totalPages - 1;
+
+  pages.push(1);
+
+  if (showLeftEllipsis) {
+    pages.push("ellipsis");
+  } else {
+    for (let i = 2; i < leftSibling; i += 1) pages.push(i);
+  }
+
+  for (let i = leftSibling; i <= rightSibling; i += 1) {
+    if (i !== 1 && i !== totalPages) pages.push(i);
+  }
+
+  if (showRightEllipsis) {
+    pages.push("ellipsis");
+  } else {
+    for (let i = rightSibling + 1; i < totalPages; i += 1) pages.push(i);
+  }
+
+  if (totalPages > 1) pages.push(totalPages);
+
+  return pages;
+}
+
+export function Pagination({ page, totalPages, onPageChange, siblingCount = 1, className }: PaginationProps) {
+  const clampedPage = Math.min(Math.max(page, 1), Math.max(totalPages, 1));
+  const range = buildRange(clampedPage, totalPages, siblingCount);
+
+  return (
+    <nav aria-label="Pagination" className={cn("inline-flex items-center gap-1", className)}>
+      <button
+        type="button"
+        onClick={() => onPageChange(clampedPage - 1)}
+        disabled={clampedPage <= 1}
+        className="rounded-md border border-slate-200 px-2.5 py-1.5 text-xs text-slate-700 transition-all hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-[#1f2937] dark:text-slate-200 dark:hover:bg-[#161b22]"
+      >
+        Prev
+      </button>
+
+      {range.map((token, index) =>
+        token === "ellipsis" ? (
+          <span key={\`ellipsis-\${index}\`} className="px-1 text-xs text-slate-400">
+            ...
+          </span>
+        ) : (
+          <button
+            key={token}
+            type="button"
+            onClick={() => onPageChange(token)}
+            aria-current={token === clampedPage ? "page" : undefined}
+            className={cn(
+              "min-w-8 rounded-md px-2.5 py-1.5 text-xs font-medium transition-all",
+              token === clampedPage
+                ? "bg-primary text-white"
+                : "border border-slate-200 text-slate-700 hover:bg-slate-50 dark:border-[#1f2937] dark:text-slate-200 dark:hover:bg-[#161b22]"
+            )}
+          >
+            {token}
+          </button>
+        )
+      )}
+
+      <button
+        type="button"
+        onClick={() => onPageChange(clampedPage + 1)}
+        disabled={clampedPage >= totalPages}
+        className="rounded-md border border-slate-200 px-2.5 py-1.5 text-xs text-slate-700 transition-all hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-[#1f2937] dark:text-slate-200 dark:hover:bg-[#161b22]"
+      >
+        Next
+      </button>
+    </nav>
+  );
+}`,
+  "Popover": `import { createContext, useCallback, useContext, useEffect, useRef, useState, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+type PopoverSide = "top" | "bottom";
+type PopoverAlign = "start" | "center" | "end";
+
+interface PopoverContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  side: PopoverSide;
+  align: PopoverAlign;
+}
+
+const PopoverContext = createContext<PopoverContextValue | null>(null);
+
+function usePopoverContext() {
+  const context = useContext(PopoverContext);
+  if (!context) throw new Error("Popover sub-components must be used inside <Popover>");
+  return context;
+}
+
+export interface PopoverProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  side?: PopoverSide;
+  align?: PopoverAlign;
+  children: ReactNode;
+  className?: string;
+}
+
+export interface PopoverTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+}
+
+export interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export interface PopoverCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children?: ReactNode;
+}
+
+export function Popover({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  side = "bottom",
+  align = "start",
+  children,
+  className,
+}: PopoverProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isControlled = open !== undefined;
+  const isOpen = isControlled ? open : internalOpen;
+
+  const setOpen = useCallback((next: boolean) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  }, [isControlled, onOpenChange]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleOutside = (event: MouseEvent) => {
+      if (!containerRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+
+    window.addEventListener("mousedown", handleOutside);
+    window.addEventListener("keydown", handleEscape);
+
+    return () => {
+      window.removeEventListener("mousedown", handleOutside);
+      window.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen, setOpen]);
+
+  return (
+    <PopoverContext.Provider value={{ open: isOpen, setOpen, side, align }}>
+      <div ref={containerRef} className={cn("relative inline-block", className)}>
+        {children}
+      </div>
+    </PopoverContext.Provider>
+  );
+}
+
+Popover.Trigger = function PopoverTrigger({ children, className, onClick, ...props }: PopoverTriggerProps) {
+  const { open, setOpen } = usePopoverContext();
+
+  return (
+    <button
+      type="button"
+      onClick={(event) => {
+        onClick?.(event);
+        setOpen(!open);
+      }}
+      className={cn(
+        "inline-flex items-center justify-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700 transition-all",
+        "hover:bg-slate-50 dark:border-[#1f2937] dark:text-slate-200 dark:hover:bg-[#161b22]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+const SIDE_CLASS: Record<PopoverSide, string> = {
+  top: "bottom-[calc(100%+8px)]",
+  bottom: "top-[calc(100%+8px)]",
+};
+
+const ALIGN_CLASS: Record<PopoverAlign, string> = {
+  start: "left-0",
+  center: "left-1/2 -translate-x-1/2",
+  end: "right-0",
+};
+
+Popover.Content = function PopoverContent({ children, className, ...props }: PopoverContentProps) {
+  const { open, side, align } = usePopoverContext();
+
+  if (!open) return null;
+
+  return (
+    <div
+      className={cn(
+        "absolute z-50 w-72 rounded-xl border border-slate-200 bg-white p-4 shadow-xl dark:border-[#1f2937] dark:bg-[#161b22]",
+        SIDE_CLASS[side],
+        ALIGN_CLASS[align],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+Popover.Close = function PopoverClose({ children = "Close", className, onClick, ...props }: PopoverCloseProps) {
+  const { setOpen } = usePopoverContext();
+
+  return (
+    <button
+      type="button"
+      onClick={(event) => {
+        onClick?.(event);
+        setOpen(false);
+      }}
+      className={cn("text-sm font-medium text-primary hover:underline", className)}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}`,
+  "Progress": `import type { HTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+  value: number;
+  max?: number;
+}
+
+export function Progress({ value, max = 100, className, ...props }: ProgressProps) {
+  const safeMax = max > 0 ? max : 100;
+  const clamped = Math.min(Math.max(value, 0), safeMax);
+  const percentage = (clamped / safeMax) * 100;
+
+  return (
+    <div
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={safeMax}
+      aria-valuenow={Math.round(clamped)}
+      className={cn("h-2 w-full overflow-hidden rounded-full bg-slate-200 dark:bg-[#1f2937]", className)}
+      {...props}
+    >
+      <div
+        className="h-full rounded-full bg-primary transition-all duration-300"
+        style={{ width: \`\${percentage}%\` }}
+      />
+    </div>
+  );
+}`,
+  "ProgressBar": `import { cn } from "@/lib/utils";
+
+// \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export interface ProgressBarProps {
+  /** Current progress 0\u2013100 */
+  progress: number;
+  /** Whether the bar is visible (false triggers fade-out) */
+  visible: boolean;
+}
+
+// \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+/**
+ * Thin top-of-page progress bar for navigation feedback.
+ * Pair with \`useProgressBar\` hook.
+ */
+export function ProgressBar({ progress, visible }: ProgressBarProps) {
+  return (
+    <div
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={progress}
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none fixed left-0 top-0 z-200 h-0.5 bg-primary",
+        // Glow effect matching the primary color
+        "shadow-[0_0_8px_1px_rgba(70,40,241,0.7)]",
+        "transition-opacity duration-300",
+        visible ? "opacity-100" : "opacity-0"
+      )}
+      style={{
+        width: \`\${progress}%\`,
+        // Instant reset to 0, ease-out for forward progress
+        transition: \`width \${progress === 0 ? "0ms" : progress === 100 ? "150ms" : "350ms"} ease-out, opacity 300ms\`,
+      }}
+    />
+  );
+}`,
+  "RadioGroup": `import { createContext, useContext, useId, useState, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+export interface RadioGroupProps extends HTMLAttributes<HTMLDivElement> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  name?: string;
+  children: ReactNode;
+}
+
+export interface RadioGroupItemProps extends HTMLAttributes<HTMLButtonElement> {
+  value: string;
+  disabled?: boolean;
+  label?: string;
+  description?: string;
+}
+
+interface RadioGroupContextValue {
+  value: string;
+  name: string;
+  setValue: (value: string) => void;
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
+
+function useRadioGroupContext() {
+  const context = useContext(RadioGroupContext);
+  if (!context) {
+    throw new Error("RadioGroup sub-components must be used inside <RadioGroup>");
+  }
+  return context;
+}
+
+export function RadioGroup({
+  value,
+  defaultValue = "",
+  onValueChange,
+  name,
+  children,
+  className,
+  ...props
+}: RadioGroupProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const autoName = useId();
+  const isControlled = value !== undefined;
+  const active = isControlled ? value : internalValue;
+
+  const setValue = (next: string) => {
+    if (!isControlled) setInternalValue(next);
+    onValueChange?.(next);
+  };
+
+  return (
+    <RadioGroupContext.Provider value={{ value: active, setValue, name: name ?? autoName }}>
+      <div className={cn("space-y-2", className)} role="radiogroup" {...props}>
+        {children}
+      </div>
+    </RadioGroupContext.Provider>
+  );
+}
+
+RadioGroup.Item = function RadioGroupItem({
+  value,
+  disabled = false,
+  label,
+  description,
+  children,
+  className,
+  ...props
+}: RadioGroupItemProps) {
+  const context = useRadioGroupContext();
+  const checked = context.value === value;
+
+  return (
+    <button
+      type="button"
+      role="radio"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => !disabled && context.setValue(value)}
+      className={cn(
+        "flex w-full items-start gap-3 rounded-lg border p-3 text-left transition-all",
+        checked
+          ? "border-primary bg-primary/5"
+          : "border-slate-200 bg-white hover:border-slate-300 dark:border-[#1f2937] dark:bg-[#0d1117] dark:hover:border-slate-600",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className={cn(
+          "mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border",
+          checked ? "border-primary" : "border-slate-400 dark:border-slate-500"
+        )}
+      >
+        {checked && <span className="h-2 w-2 rounded-full bg-primary" />}
+      </span>
+      <span className="min-w-0 flex-1">
+        {label && <span className="block text-sm font-medium text-slate-900 dark:text-white">{label}</span>}
+        {description && <span className="mt-0.5 block text-xs text-slate-500 dark:text-slate-400">{description}</span>}
+        {children}
+      </span>
+      <input readOnly tabIndex={-1} type="radio" name={context.name} value={value} checked={checked} className="sr-only" />
+    </button>
+  );
+}`,
+  "SearchDialog": `import { useEffect, useRef, useState } from "react";
+import { useAnimatedMount } from "@/hooks/use-animated-mount";
+import { cn } from "@/lib/utils";
+
+export interface SearchItem {
+  title: string;
+  href: string;
+  description?: string;
+  group: "Docs" | "Cookbook";
+  section?: string;
+  icon?: string;
+}
+
+interface SearchDialogProps {
+  open: boolean;
+  items: SearchItem[];
+  onClose: () => void;
+  onNavigate: (href: string) => void;
+  savedSlugs?: string[];
+}
+
+export function SearchDialog({ open, items, onClose, onNavigate, savedSlugs = [] }: SearchDialogProps) {
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { mounted, visible } = useAnimatedMount(open, 150);
+
+  const results = query.trim()
+    ? items.filter(
+      (item) =>
+        item.title.toLowerCase().includes(query.toLowerCase()) ||
+        item.description?.toLowerCase().includes(query.toLowerCase()),
+    )
+    : items.slice(0, 8);
+
+  const docsResults = results.filter((r) => r.group === "Docs");
+  const cookbookResults = results.filter((r) => r.group === "Cookbook");
+
+  // Focus input and reset state on open
+  useEffect(() => {
+    if (open) {
+      setQuery("");
+      setActiveIndex(0);
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [open]);
+
+  // Reset active index when results change
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [query]);
+
+  // Keyboard navigation
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(i + 1, results.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter") {
+        const item = results[activeIndex];
+        if (item) {
+          onNavigate(item.href);
+          onClose();
+        }
+      } else if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, results, activeIndex, onNavigate, onClose]);
+
+  if (!mounted) return null;
+
+  return (
+    <div
+      className={cn(
+        "fixed inset-0 z-50 flex items-start justify-center pt-[15vh] transition-opacity duration-150",
+        visible ? "opacity-100" : "opacity-0",
+      )}
+    >
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-xs"
+        onClick={onClose}
+      />
+
+      {/* Panel */}
+      <div
+        className={cn(
+          "relative z-10 mx-4 w-full max-w-xl rounded-xl border border-slate-200 dark:border-[#1f2937] bg-white dark:bg-[#161b22] shadow-2xl transition-all duration-150",
+          visible ? "scale-100 opacity-100" : "scale-95 opacity-0",
+        )}
+      >
+        {/* Input */}
+        <div className="flex items-center gap-3 border-b border-slate-100 dark:border-[#1f2937] px-4 py-3.5">
+          <span className="material-symbols-outlined text-[20px] text-slate-400">
+            search
+          </span>
+          <input
+            ref={inputRef}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search docs, components, patterns..."
+            className="flex-1 bg-transparent text-sm text-slate-900 dark:text-white placeholder:text-slate-400 focus:outline-hidden"
+          />
+          {query ? (
+            <button
+              onClick={() => setQuery("")}
+              className="text-slate-400 transition-colors hover:text-slate-600 dark:hover:text-slate-200"
+            >
+              <span className="material-symbols-outlined text-[18px]">close</span>
+            </button>
+          ) : (
+            <kbd className="hidden rounded-sm border border-slate-200 dark:border-[#1f2937] px-1.5 py-0.5 text-[10px] font-medium text-slate-400 sm:inline-flex">
+              ESC
+            </kbd>
+          )}
+        </div>
+
+        {/* Results */}
+        <div className="max-h-[55vh] overflow-y-auto p-2">
+          {results.length === 0 ? (
+            <div className="flex flex-col items-center py-12 text-slate-400">
+              <span className="material-symbols-outlined mb-2 text-[40px]">
+                search_off
+              </span>
+              <p className="text-sm">No results for &ldquo;{query}&rdquo;</p>
+            </div>
+          ) : (
+            <>
+              {docsResults.length > 0 && (
+                <ResultGroup
+                  title="Docs"
+                  items={docsResults}
+                  allResults={results}
+                  query={query}
+                  activeIndex={activeIndex}
+                  savedSlugs={savedSlugs}
+                  onSelect={(href) => {
+                    onNavigate(href);
+                    onClose();
+                  }}
+                  onHover={setActiveIndex}
+                />
+              )}
+              {cookbookResults.length > 0 && (
+                <ResultGroup
+                  title="Cookbook"
+                  items={cookbookResults}
+                  allResults={results}
+                  query={query}
+                  activeIndex={activeIndex}
+                  savedSlugs={savedSlugs}
+                  onSelect={(href) => {
+                    onNavigate(href);
+                    onClose();
+                  }}
+                  onHover={setActiveIndex}
+                />
+              )}
+            </>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between border-t border-slate-100 dark:border-[#1f2937] px-4 py-2.5 text-[11px] text-slate-400">
+          <div className="flex items-center gap-3">
+            <span className="flex items-center gap-1">
+              <kbd className="rounded-sm border border-slate-200 dark:border-[#2d3748] px-1 py-0.5 font-mono">
+                \u2191
+              </kbd>
+              <kbd className="rounded-sm border border-slate-200 dark:border-[#2d3748] px-1 py-0.5 font-mono">
+                \u2193
+              </kbd>
+              navigate
+            </span>
+            <span className="flex items-center gap-1">
+              <kbd className="rounded-sm border border-slate-200 dark:border-[#2d3748] px-1 py-0.5 font-mono">
+                \u21B5
+              </kbd>
+              select
+            </span>
+          </div>
+          <span>
+            {results.length} result{results.length !== 1 ? "s" : ""}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// --- helpers ---
+
+function highlight(text: string, query: string) {
+  if (!query.trim()) return text;
+  const idx = text.toLowerCase().indexOf(query.toLowerCase());
+  if (idx === -1) return text;
+  return (
+    <>
+      {text.slice(0, idx)}
+      <mark className="rounded-xs bg-primary/20 px-0.5 font-semibold text-primary not-italic">
+        {text.slice(idx, idx + query.length)}
+      </mark>
+      {text.slice(idx + query.length)}
+    </>
+  );
+}
+
+interface ResultGroupProps {
+  title: string;
+  items: SearchItem[];
+  allResults: SearchItem[];
+  query: string;
+  activeIndex: number;
+  savedSlugs: string[];
+  onSelect: (href: string) => void;
+  onHover: (index: number) => void;
+}
+
+function ResultGroup({
+  title,
+  items,
+  allResults,
+  query,
+  activeIndex,
+  savedSlugs,
+  onSelect,
+  onHover,
+}: ResultGroupProps) {
+  return (
+    <div className="mb-1">
+      <p className="px-2 py-1.5 text-[10px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500">
+        {title}
+      </p>
+      {items.map((item) => {
+        const globalIdx = allResults.indexOf(item);
+        const isActive = globalIdx === activeIndex;
+        const cookbookMatch = item.href.match(/\\/(nextjs|vitejs)\\/cookbook\\/(.+)/);
+        const slug = cookbookMatch ? cookbookMatch[2] : null;
+        const isSaved = slug ? savedSlugs.includes(slug) : false;
+        return (
+          <button
+            key={item.href}
+            onMouseEnter={() => onHover(globalIdx)}
+            onClick={() => onSelect(item.href)}
+            className={cn(
+              "flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors",
+              isActive
+                ? "bg-primary/10 dark:bg-primary/20"
+                : "hover:bg-slate-50 dark:hover:bg-[#0d1117]",
+            )}
+          >
+            <span
+              className={cn(
+                "material-symbols-outlined shrink-0 text-[18px]",
+                isActive ? "text-primary" : "text-slate-400",
+              )}
+            >
+              {item.icon ?? (title === "Docs" ? "article" : "menu_book")}
+            </span>
+            <div className="min-w-0 flex-1">
+              <p
+                className={cn(
+                  "flex items-center gap-1.5 truncate text-sm font-medium",
+                  isActive ? "text-primary" : "text-slate-900 dark:text-white",
+                )}
+              >
+                {highlight(item.title, query)}
+                {isSaved && (
+                  <span
+                    className="material-symbols-outlined shrink-0 text-[13px] text-primary"
+                    style={{ fontVariationSettings: "'FILL' 1" }}
+                  >
+                    bookmark
+                  </span>
+                )}
+              </p>
+              {item.description && (
+                <p className="mt-0.5 truncate text-xs text-slate-500 dark:text-slate-400">
+                  {highlight(item.description, query)}
+                </p>
+              )}
+              {item.section && !item.description && (
+                <p className="mt-0.5 truncate text-xs text-slate-400 dark:text-slate-500">
+                  {item.section}
+                </p>
+              )}
+            </div>
+            {isActive && (
+              <span className="material-symbols-outlined shrink-0 text-[16px] text-primary">
+                arrow_forward
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}`,
+  "Select": `import { forwardRef, type SelectHTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+export type SelectSize = "sm" | "md" | "lg";
+
+export interface SelectOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+  label?: string;
+  description?: string;
+  error?: string;
+  size?: SelectSize;
+  options?: SelectOption[];
+  placeholder?: string;
+}
+
+const SIZE_CLASSES: Record<SelectSize, string> = {
+  sm: "h-8 px-3 pr-9 text-xs",
+  md: "h-10 px-3.5 pr-10 text-sm",
+  lg: "h-12 px-4 pr-11 text-base",
+};
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function SelectRoot(
+  { label, description, error, size = "md", options, placeholder, className, id, children, ...props },
+  ref
+) {
+  const inputId = id ?? (label ? label.toLowerCase().replace(/\\s+/g, "-") : undefined);
+
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      {label && <label htmlFor={inputId} className="text-sm font-medium text-slate-700 dark:text-slate-300">{label}</label>}
+
+      <div className="relative">
+        <select
+          ref={ref}
+          id={inputId}
+          className={cn(
+            "w-full appearance-none rounded-lg border bg-white outline-hidden transition-all",
+            "border-slate-200 text-slate-900 hover:border-slate-300",
+            "focus:border-primary focus:ring-2 focus:ring-primary/20",
+            "dark:border-[#1f2937] dark:bg-[#0d1117] dark:text-white dark:hover:border-slate-600",
+            error && "border-red-400 focus:border-red-400 focus:ring-red-400/20 dark:border-red-500",
+            SIZE_CLASSES[size]
+          )}
+          {...props}
+        >
+          {placeholder && <option value="">{placeholder}</option>}
+          {options?.map((option) => (
+            <option key={option.value} value={option.value} disabled={option.disabled}>
+              {option.label}
+            </option>
+          ))}
+          {children}
+        </select>
+        <span className="material-symbols-outlined pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[18px] text-slate-400">
+          expand_more
+        </span>
+      </div>
+
+      {description && !error && <p className="text-xs text-slate-500 dark:text-slate-400">{description}</p>}
+      {error && <p className="text-xs text-red-500 dark:text-red-400">{error}</p>}
+    </div>
+  );
+});`,
+  "Separator": `import type { HTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+export type SeparatorOrientation = "horizontal" | "vertical";
+
+export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: SeparatorOrientation;
+  decorative?: boolean;
+}
+
+export function Separator({
+  orientation = "horizontal",
+  decorative = true,
+  className,
+  ...props
+}: SeparatorProps) {
+  return (
+    <div
+      role={decorative ? "presentation" : "separator"}
+      aria-orientation={orientation}
+      className={cn(
+        "shrink-0 bg-slate-200 dark:bg-[#1f2937]",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className
+      )}
+      {...props}
+    />
+  );
+}`,
+  "Skeleton": `import { cn } from "@/lib/utils";
+
+export type SkeletonVariant = "line" | "rect" | "circle";
+
+export interface SkeletonProps {
+  variant?: SkeletonVariant;
+  width?: number | string;
+  height?: number | string;
+  className?: string;
+}
+
+export function Skeleton({ variant = "line", width, height, className }: SkeletonProps) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "inline-block animate-pulse bg-slate-200 dark:bg-[#1f2937]",
+        variant === "line" && "h-4 w-40 rounded-md",
+        variant === "rect" && "h-24 w-full rounded-xl",
+        variant === "circle" && "h-10 w-10 rounded-full",
+        className
+      )}
+      style={{ width, height }}
+    />
+  );
+}`,
+  "Slider": `import { useState } from "react";
+import { cn } from "@/lib/utils";
+
+export interface SliderProps {
+  value?: number;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  onValueChange?: (value: number) => void;
+  label?: string;
+  showValue?: boolean;
+  className?: string;
+}
+
+export function Slider({
+  value,
+  defaultValue = 50,
+  min = 0,
+  max = 100,
+  step = 1,
+  onValueChange,
+  label,
+  showValue = true,
+  className,
+}: SliderProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = value !== undefined;
+  const current = isControlled ? value : internalValue;
+
+  return (
+    <div className={cn("w-full", className)}>
+      {(label || showValue) && (
+        <div className="mb-2 flex items-center justify-between gap-3">
+          {label && <label className="text-sm font-medium text-slate-700 dark:text-slate-300">{label}</label>}
+          {showValue && <span className="text-xs text-slate-500 dark:text-slate-400">{Math.round(current)}</span>}
+        </div>
+      )}
+
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={current}
+        onChange={(event) => {
+          const next = Number(event.target.value);
+          if (!isControlled) setInternalValue(next);
+          onValueChange?.(next);
+        }}
+        className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-slate-200 accent-primary dark:bg-[#1f2937]"
+      />
+    </div>
+  );
+}`,
+  "Switch": `import { useMemo, useState } from "react";
+import { cn } from "@/lib/utils";
+
+export type SwitchSize = "sm" | "md" | "lg";
+
+export interface SwitchProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  size?: SwitchSize;
+  label?: string;
+  description?: string;
+  className?: string;
+}
+
+const TRACK_SIZES: Record<SwitchSize, string> = {
+  sm: "h-5 w-9",
+  md: "h-6 w-11",
+  lg: "h-7 w-14",
+};
+
+const THUMB_SIZES: Record<SwitchSize, string> = {
+  sm: "h-4 w-4 data-[checked=true]:translate-x-4",
+  md: "h-5 w-5 data-[checked=true]:translate-x-5",
+  lg: "h-6 w-6 data-[checked=true]:translate-x-7",
+};
+
+export function Switch({
+  checked,
+  defaultChecked = false,
+  onChange,
+  disabled = false,
+  size = "md",
+  label,
+  description,
+  className,
+}: SwitchProps) {
+  const [internal, setInternal] = useState(defaultChecked);
+  const isControlled = checked !== undefined;
+  const isOn = isControlled ? checked : internal;
+
+  const stateLabel = useMemo(() => (isOn ? "enabled" : "disabled"), [isOn]);
+
+  const toggle = () => {
+    if (disabled) return;
+    const next = !isOn;
+    if (!isControlled) setInternal(next);
+    onChange?.(next);
+  };
+
+  return (
+    <div className={cn("inline-flex items-start gap-3", className)}>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={isOn}
+        aria-label={label ?? "Switch"}
+        aria-disabled={disabled}
+        data-state={isOn ? "checked" : "unchecked"}
+        onClick={toggle}
+        className={cn(
+          "relative shrink-0 rounded-full p-0.5 transition-all outline-hidden",
+          "focus-visible:ring-2 focus-visible:ring-primary/40",
+          TRACK_SIZES[size],
+          isOn ? "bg-primary" : "bg-slate-300 dark:bg-slate-700",
+          disabled && "cursor-not-allowed opacity-50"
+        )}
+      >
+        <span
+          data-checked={isOn}
+          className={cn(
+            "block rounded-full bg-white shadow-sm transition-transform duration-200",
+            THUMB_SIZES[size]
+          )}
+        />
+      </button>
+
+      {(label ?? description) && (
+        <div className="min-w-0">
+          {label && <p className="text-sm font-medium text-slate-900 dark:text-white">{label}</p>}
+          {description && (
+            <p className="mt-0.5 text-xs text-slate-500 dark:text-slate-400">
+              {description} ({stateLabel})
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}`,
+  "Tabs": `import {
+  createContext,
+  useContext,
+  useState,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import { cn } from "@/lib/utils";
+
+// \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export type TabsVariant = "underline" | "pills";
+
+export interface TabsProps {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  variant?: TabsVariant;
+  children: ReactNode;
+  className?: string;
+}
+
+export interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export interface TabsTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+  value: string;
+  children: ReactNode;
+}
+
+export interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
+  value: string;
+  children: ReactNode;
+}
+
+// \u2500\u2500\u2500 Context \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+interface TabsContextValue {
+  active: string;
+  setActive: (value: string) => void;
+  variant: TabsVariant;
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+function useTabsContext() {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error("Tabs sub-components must be used inside <Tabs> or <Tabs>");
+  return ctx;
+}
+
+// \u2500\u2500\u2500 Components \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+export function Tabs({
+  value,
+  defaultValue = "",
+  onChange,
+  variant = "underline",
+  children,
+  className,
+}: TabsProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = value !== undefined;
+  const active = isControlled ? value : internalValue;
+
+  const setActive = (next: string) => {
+    if (!isControlled) setInternalValue(next);
+    onChange?.(next);
+  };
+
+  return (
+    <TabsContext.Provider value={{ active, setActive, variant }}>
+      <div className={cn("w-full", className)}>{children}</div>
+    </TabsContext.Provider>
+  );
+}
+
+Tabs.List = function TabsList({ children, className, ...props }: TabsListProps) {
+  const { variant } = useTabsContext();
+
+  return (
+    <div
+      role="tablist"
+      className={cn(
+        "flex",
+        variant === "underline" && "border-b border-slate-200 dark:border-[#1f2937] gap-0",
+        variant === "pills" && "gap-1 p-1 rounded-xl bg-slate-100 dark:bg-[#161b22] w-fit",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+Tabs.Trigger = function TabsTrigger({ value, children, disabled, className, ...props }: TabsTriggerProps) {
+  const { active, setActive, variant } = useTabsContext();
+  const isActive = active === value;
+
+  return (
+    <button
+      role="tab"
+      aria-selected={isActive}
+      disabled={disabled}
+      onClick={() => setActive(value)}
+      className={cn(
+        "text-sm font-medium transition-all outline-hidden focus-visible:ring-2 focus-visible:ring-primary/40 rounded-sm",
+        disabled && "opacity-40 cursor-not-allowed pointer-events-none",
+
+        // underline variant
+        variant === "underline" && [
+          "px-4 py-2.5 -mb-px border-b-2",
+          isActive
+            ? "border-primary text-primary"
+            : "border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600",
+        ],
+
+        // pills variant
+        variant === "pills" && [
+          "px-4 py-1.5 rounded-lg",
+          isActive
+            ? "bg-white dark:bg-[#0d1117] text-slate-900 dark:text-white shadow-xs"
+            : "text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200",
+        ],
+
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+Tabs.Content = function TabsContent({ value, children, className, ...props }: TabsContentProps) {
+  const { active } = useTabsContext();
+
+  if (active !== value) return null;
+
+  return (
+    <div
+      role="tabpanel"
+      className={cn("mt-4 animate-fade-in", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}`,
+  "Textarea": `import { forwardRef, type ReactNode, type TextareaHTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+export type TextareaSize = "sm" | "md" | "lg";
+export type TextareaVariant = "default" | "filled" | "ghost";
+
+export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> {
+  label?: string;
+  description?: string;
+  error?: string;
+  size?: TextareaSize;
+  variant?: TextareaVariant;
+  children?: ReactNode;
+}
+
+const SIZE_CLASSES: Record<TextareaSize, string> = {
+  sm: "min-h-20 px-3 py-2 text-xs",
+  md: "min-h-24 px-3.5 py-2.5 text-sm",
+  lg: "min-h-32 px-4 py-3 text-base",
+};
+
+const VARIANT_CLASSES: Record<TextareaVariant, string> = {
+  default:
+    "border border-slate-200 dark:border-[#1f2937] bg-white dark:bg-[#0d1117] hover:border-slate-300 dark:hover:border-slate-600",
+  filled:
+    "border border-transparent bg-slate-100 dark:bg-[#161b22] hover:bg-slate-200/80 dark:hover:bg-[#1f2937]",
+  ghost:
+    "border border-transparent bg-transparent hover:bg-slate-50 dark:hover:bg-[#161b22]",
+};
+
+const ERROR_CLASSES =
+  "border-red-400 dark:border-red-500 focus-within:border-red-400 dark:focus-within:border-red-500 focus-within:ring-red-400/20";
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function TextareaRoot(
+  {
+    label,
+    description,
+    error,
+    size = "md",
+    variant = "default",
+    disabled,
+    className,
+    id,
+    ...props
+  },
+  ref
+) {
+  const inputId = id ?? (label ? label.toLowerCase().replace(/\\s+/g, "-") : undefined);
+
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      {label && (
+        <label
+          htmlFor={inputId}
+          className={cn("text-sm font-medium text-slate-700 dark:text-slate-300", disabled && "opacity-50")}
+        >
+          {label}
+        </label>
+      )}
+
+      <div
+        className={cn(
+          "rounded-lg transition-all focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary dark:focus-within:border-primary",
+          VARIANT_CLASSES[variant],
+          error && ERROR_CLASSES,
+          disabled && "opacity-50"
+        )}
+      >
+        <textarea
+          ref={ref}
+          id={inputId}
+          disabled={disabled}
+          className={cn(
+            "w-full resize-y rounded-lg bg-transparent outline-hidden",
+            "text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-500",
+            SIZE_CLASSES[size]
+          )}
+          {...props}
+        />
+      </div>
+
+      {description && !error && <p className="text-xs text-slate-500 dark:text-slate-400">{description}</p>}
+      {error && <p className="text-xs text-red-500 dark:text-red-400">{error}</p>}
+    </div>
+  );
+});`,
+  "Toast": `"use client";
+
+import { createContext, useContext, useEffect, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { useAnimatedMount } from "@/hooks/use-animated-mount";
+import { cn } from "@/lib/utils";
+
+export type ToastVariant = "default" | "success" | "warning" | "error";
+export type ToastPosition = "top-right" | "bottom-right" | "top-left" | "bottom-left";
+
+interface ToastContextValue {
+  onClose: () => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+function useToastContext() {
+  const context = useContext(ToastContext);
+  if (!context) throw new Error("Toast sub-components must be used inside <Toast>");
+  return context;
+}
+
+export interface ToastProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  duration?: number;
+  variant?: ToastVariant;
+  position?: ToastPosition;
+  children: ReactNode;
+  className?: string;
+}
+
+const VARIANT_CLASSES: Record<ToastVariant, string> = {
+  default: "border-slate-200 bg-white dark:border-[#1f2937] dark:bg-[#161b22]",
+  success: "border-green-300 bg-green-50 dark:border-green-900 dark:bg-green-950/30",
+  warning: "border-amber-300 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/30",
+  error: "border-red-300 bg-red-50 dark:border-red-900 dark:bg-red-950/30",
+};
+
+const POSITION_CLASSES: Record<ToastPosition, string> = {
+  "top-right": "right-4 top-4",
+  "bottom-right": "right-4 bottom-4",
+  "top-left": "left-4 top-4",
+  "bottom-left": "left-4 bottom-4",
+};
+
+export function Toast({
+  open,
+  onOpenChange,
+  duration = 3000,
+  variant = "default",
+  position = "top-right",
+  children,
+  className,
+}: ToastProps) {
+  const { mounted, visible } = useAnimatedMount(open, 180);
+
+  useEffect(() => {
+    if (!open || duration <= 0) return;
+    const timeout = setTimeout(() => onOpenChange(false), duration);
+    return () => clearTimeout(timeout);
+  }, [open, duration, onOpenChange]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onOpenChange(false);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, onOpenChange]);
+
+  if (!mounted) return null;
+
+  return createPortal(
+    <ToastContext.Provider value={{ onClose: () => onOpenChange(false) }}>
+      <div className={cn("fixed z-[70] w-full max-w-sm", POSITION_CLASSES[position])}>
+        <div
+          role="status"
+          className={cn(
+            "rounded-xl border p-4 shadow-xl transition-all",
+            VARIANT_CLASSES[variant],
+            visible ? "translate-y-0 opacity-100" : "translate-y-2 opacity-0",
+            className
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    </ToastContext.Provider>,
+    document.body
+  );
+}
+
+Toast.Title = function ToastTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
+  return <h4 className={cn("text-sm font-semibold text-slate-900 dark:text-white", className)} {...props} />;
+}
+
+Toast.Description = function ToastDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("mt-1 text-xs text-slate-600 dark:text-slate-400", className)} {...props} />;
+}
+
+Toast.Action = function ToastAction({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      type="button"
+      className={cn("rounded-md bg-primary px-2.5 py-1.5 text-xs font-medium text-white transition-opacity hover:opacity-90", className)}
+      {...props}
+    />
+  );
+}
+
+Toast.Close = function ToastClose({ className, onClick, children = "Dismiss", ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
+  const { onClose } = useToastContext();
+
+  return (
+    <button
+      type="button"
+      onClick={(event) => {
+        onClick?.(event);
+        onClose();
+      }}
+      className={cn("text-xs font-medium text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200", className)}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+Toast.Footer = function ToastFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("mt-3 flex items-center justify-end gap-2", className)} {...props} />;
+}`,
+  "Tooltip": `import { createContext, useContext, useState, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+type TooltipSide = "top" | "bottom" | "left" | "right";
+
+interface TooltipContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  side: TooltipSide;
+}
+
+const TooltipContext = createContext<TooltipContextValue | null>(null);
+
+function useTooltipContext() {
+  const context = useContext(TooltipContext);
+  if (!context) throw new Error("Tooltip sub-components must be used inside <Tooltip>");
+  return context;
+}
+
+export interface TooltipProps {
+  defaultOpen?: boolean;
+  side?: TooltipSide;
+  children: ReactNode;
+  className?: string;
+}
+
+export interface TooltipTriggerProps extends HTMLAttributes<HTMLSpanElement> {
+  children: ReactNode;
+}
+
+export interface TooltipContentProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export function Tooltip({ defaultOpen = false, side = "top", children, className }: TooltipProps) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <TooltipContext.Provider value={{ open, setOpen, side }}>
+      <span className={cn("relative inline-flex", className)}>{children}</span>
+    </TooltipContext.Provider>
+  );
+}
+
+Tooltip.Trigger = function TooltipTrigger({ children, className, ...props }: TooltipTriggerProps) {
+  const { setOpen } = useTooltipContext();
+
+  return (
+    <span
+      className={cn("inline-flex", className)}
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      onFocus={() => setOpen(true)}
+      onBlur={() => setOpen(false)}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
+
+const SIDE_CLASSES: Record<TooltipSide, string> = {
+  top: "bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2",
+  bottom: "top-[calc(100%+8px)] left-1/2 -translate-x-1/2",
+  left: "right-[calc(100%+8px)] top-1/2 -translate-y-1/2",
+  right: "left-[calc(100%+8px)] top-1/2 -translate-y-1/2",
+};
+
+Tooltip.Content = function TooltipContent({ children, className, ...props }: TooltipContentProps) {
+  const { open, side } = useTooltipContext();
+
+  return (
+    <div
+      role="tooltip"
+      className={cn(
+        "pointer-events-none absolute z-50 rounded-md bg-slate-900 px-2.5 py-1.5 text-xs text-white shadow-lg transition-all",
+        SIDE_CLASSES[side],
+        open ? "translate-y-0 opacity-100" : "translate-y-1 opacity-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}`
+};
+
+// src/registry/index.ts
+var REGISTRY = [
+  // ── Utilities ────────────────────────────────────────────────────────────
+  {
+    name: "utils",
+    description: "cn() utility for merging Tailwind classes",
+    templateKey: "utils",
+    outputFile: "utils.ts",
+    internalDeps: [],
+    npmDeps: ["clsx", "tailwind-merge"],
+    target: "lib"
+  },
+  {
+    name: "use-animated-mount",
+    description: "Hook for managing animated mount/unmount timing",
+    templateKey: "use-animated-mount",
+    outputFile: "use-animated-mount.ts",
+    internalDeps: [],
+    npmDeps: [],
+    target: "hooks"
+  },
+  // ── Components ───────────────────────────────────────────────────────────
+  {
+    name: "accordion",
+    description: "Collapsible content sections",
+    templateKey: "Accordion",
+    outputFile: "Accordion.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "alert",
+    description: "Inline status messages",
+    templateKey: "Alert",
+    outputFile: "Alert.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "alert-dialog",
+    description: "Confirmation dialog with destructive actions",
+    templateKey: "AlertDialog",
+    outputFile: "AlertDialog.tsx",
+    internalDeps: ["utils", "use-animated-mount"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "avatar",
+    description: "User avatar with size variants",
+    templateKey: "Avatar",
+    outputFile: "Avatar.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "badge",
+    description: "Status and label tags",
+    templateKey: "Badge",
+    outputFile: "Badge.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "breadcrumb",
+    description: "Navigation breadcrumb trail",
+    templateKey: "Breadcrumb",
+    outputFile: "Breadcrumb.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "button",
+    description: "Primary, secondary, ghost, outline, destructive variants",
+    templateKey: "Button",
+    outputFile: "Button.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "card",
+    description: "Content container with variants",
+    templateKey: "Card",
+    outputFile: "Card.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "checkbox",
+    description: "Controlled checkbox with label",
+    templateKey: "Checkbox",
+    outputFile: "Checkbox.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "combobox",
+    description: "Searchable dropdown select",
+    templateKey: "Combobox",
+    outputFile: "Combobox.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "command",
+    description: "Command palette container",
+    templateKey: "Command",
+    outputFile: "Command.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "date-picker",
+    description: "Date input",
+    templateKey: "DatePicker",
+    outputFile: "DatePicker.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "dialog",
+    description: "Modal dialog with compound sub-components",
+    templateKey: "Dialog",
+    outputFile: "Dialog.tsx",
+    internalDeps: ["utils", "use-animated-mount"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "drawer",
+    description: "Slide-in panel (left/right)",
+    templateKey: "Drawer",
+    outputFile: "Drawer.tsx",
+    internalDeps: ["utils", "use-animated-mount"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "dropdown-menu",
+    description: "Contextual dropdown",
+    templateKey: "DropdownMenu",
+    outputFile: "DropdownMenu.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "floating-lines",
+    description: "Decorative animated background",
+    templateKey: "FloatingLines",
+    outputFile: "FloatingLines.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "input",
+    description: "Text input with variants",
+    templateKey: "Input",
+    outputFile: "Input.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "pagination",
+    description: "Page navigation",
+    templateKey: "Pagination",
+    outputFile: "Pagination.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "popover",
+    description: "Floating content anchored to a trigger",
+    templateKey: "Popover",
+    outputFile: "Popover.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "progress",
+    description: "Linear progress bar",
+    templateKey: "Progress",
+    outputFile: "Progress.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "progress-bar",
+    description: "Animated top progress bar tied to navigation",
+    templateKey: "ProgressBar",
+    outputFile: "ProgressBar.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "radio-group",
+    description: "Radio button group",
+    templateKey: "RadioGroup",
+    outputFile: "RadioGroup.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "search-dialog",
+    description: "Full-screen search dialog",
+    templateKey: "SearchDialog",
+    outputFile: "SearchDialog.tsx",
+    internalDeps: ["utils", "use-animated-mount"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "select",
+    description: "Native select with styling",
+    templateKey: "Select",
+    outputFile: "Select.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "separator",
+    description: "Horizontal/vertical divider",
+    templateKey: "Separator",
+    outputFile: "Separator.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "skeleton",
+    description: "Loading placeholder shapes",
+    templateKey: "Skeleton",
+    outputFile: "Skeleton.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "slider",
+    description: "Range input",
+    templateKey: "Slider",
+    outputFile: "Slider.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "switch",
+    description: "Toggle switch",
+    templateKey: "Switch",
+    outputFile: "Switch.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "tabs",
+    description: "Tabbed content panels",
+    templateKey: "Tabs",
+    outputFile: "Tabs.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "textarea",
+    description: "Multi-line text input",
+    templateKey: "Textarea",
+    outputFile: "Textarea.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "toast",
+    description: "Transient notification",
+    templateKey: "Toast",
+    outputFile: "Toast.tsx",
+    internalDeps: ["utils", "use-animated-mount"],
+    npmDeps: [],
+    target: "components"
+  },
+  {
+    name: "tooltip",
+    description: "Hover tooltip with positioning",
+    templateKey: "Tooltip",
+    outputFile: "Tooltip.tsx",
+    internalDeps: ["utils"],
+    npmDeps: [],
+    target: "components"
+  }
+];
+var BY_NAME = new Map(REGISTRY.map((e) => [e.name, e]));
+function getEntry(name) {
+  return BY_NAME.get(name);
+}
+function getAll() {
+  return REGISTRY;
+}
+function resolve(name) {
+  const entry = BY_NAME.get(name);
+  if (!entry) return [];
+  const visited = /* @__PURE__ */ new Set();
+  const result = [];
+  function walk(e) {
+    if (visited.has(e.name)) return;
+    visited.add(e.name);
+    for (const dep of e.internalDeps) {
+      const d = BY_NAME.get(dep);
+      if (d) walk(d);
+    }
+    result.push(e);
+  }
+  walk(entry);
+  return result;
+}
+function getTemplate(key) {
+  return TEMPLATES[key] ?? "";
+}
+
+// src/utils/pm.ts
+var import_child_process = require("child_process");
+var import_fs2 = require("fs");
+var import_path2 = require("path");
+function detectPackageManager(cwd) {
+  if ((0, import_fs2.existsSync)((0, import_path2.join)(cwd, "pnpm-lock.yaml"))) return "pnpm";
+  if ((0, import_fs2.existsSync)((0, import_path2.join)(cwd, "yarn.lock"))) return "yarn";
+  return "npm";
+}
+function installPackages(deps, cwd) {
+  if (deps.length === 0) return;
+  const pm = detectPackageManager(cwd);
+  const cmd = pm === "yarn" ? "yarn add" : `${pm} install`;
+  const list = deps.join(" ");
+  (0, import_child_process.execSync)(`${cmd} ${list}`, { cwd, stdio: "inherit" });
+}
+
+// src/utils/css.ts
+var import_fs3 = require("fs");
+var import_path3 = require("path");
+var GLOBALS_CANDIDATES = [
+  "src/app/globals.css",
+  "src/index.css",
+  "src/styles/globals.css",
+  "src/styles/index.css",
+  "app/globals.css"
+];
+var TAILWIND_IMPORT = '@import "tailwindcss";';
+function setupGlobalsCss(cwd, framework) {
+  if (framework === "vite") return null;
+  for (const candidate of GLOBALS_CANDIDATES) {
+    const fullPath = (0, import_path3.join)(cwd, candidate);
+    if (!(0, import_fs3.existsSync)(fullPath)) continue;
+    const content = (0, import_fs3.readFileSync)(fullPath, "utf8");
+    if (content.includes("@import") && content.includes("tailwindcss")) return null;
+    const updated = `${TAILWIND_IMPORT}
+${content}`.trimEnd() + "\n";
+    (0, import_fs3.writeFileSync)(fullPath, updated, "utf8");
+    return candidate;
+  }
+  return null;
+}
+
+// src/commands/init.ts
+var FRAMEWORK_LABELS = {
+  next: "Next.js",
+  vite: "Vite",
+  remix: "Remix",
+  other: "Other"
+};
+async function init(cwd, frameworkFlag) {
+  const existing = readConfig(cwd);
+  if (existing) {
+    console.log(import_picocolors.default.yellow("components.json already exists. Remove it to re-run init."));
+    return;
+  }
+  console.log(import_picocolors.default.bold("\nInitializing react-principles components...\n"));
+  const detectedFramework = frameworkFlag ?? detectFramework(cwd);
+  const detectedAliases = detectTsconfigAliases(cwd);
+  const defaults = getDefaultConfig();
+  if (detectedAliases.components) defaults.aliases.components = detectedAliases.components;
+  if (detectedAliases.hooks) defaults.aliases.hooks = detectedAliases.hooks;
+  if (detectedAliases.lib) defaults.aliases.lib = detectedAliases.lib;
+  const answers = await (0, import_prompts.default)(
+    [
+      {
+        type: "select",
+        name: "framework",
+        message: "Which framework are you using?",
+        choices: [
+          { title: "Next.js", value: "next" },
+          { title: "Vite", value: "vite" },
+          { title: "Remix", value: "remix" },
+          { title: "Other", value: "other" }
+        ],
+        initial: ["next", "vite", "remix", "other"].indexOf(detectedFramework),
+        hint: detectedFramework !== "other" ? `detected: ${FRAMEWORK_LABELS[detectedFramework]}` : void 0
+      },
+      {
+        type: "text",
+        name: "componentsDir",
+        message: "Where should components be installed?",
+        initial: defaults.componentsDir
+      },
+      {
+        type: "text",
+        name: "hooksDir",
+        message: "Where should hooks be installed?",
+        initial: defaults.hooksDir
+      },
+      {
+        type: "text",
+        name: "libDir",
+        message: "Where should utilities be installed?",
+        initial: defaults.libDir
+      }
+    ],
+    {
+      onCancel: () => {
+        console.log(import_picocolors.default.red("\nSetup cancelled."));
+        process.exit(0);
+      }
+    }
+  );
+  const framework = answers.framework;
+  const rsc = framework === "next";
+  const config = {
+    framework,
+    rsc,
+    tsx: true,
+    componentsDir: answers.componentsDir,
+    hooksDir: answers.hooksDir,
+    libDir: answers.libDir,
+    aliases: {
+      components: `@/${answers.componentsDir.replace(/^src\//, "")}`,
+      hooks: `@/${answers.hooksDir.replace(/^src\//, "")}`,
+      lib: `@/${answers.libDir.replace(/^src\//, "")}`
+    }
+  };
+  writeConfig(config, cwd);
+  console.log(import_picocolors.default.green("\n\u2713") + " Created components.json");
+  const utilsEntry = getEntry("utils");
+  if (utilsEntry) {
+    const outputPath = resolveOutputPath(utilsEntry.outputFile, utilsEntry.target, config, cwd);
+    const written = writeFile(getTemplate(utilsEntry.templateKey), outputPath);
+    const rel = (0, import_path4.join)(config.libDir, utilsEntry.outputFile);
+    console.log(
+      written ? import_picocolors.default.green("\u2713") + ` Created ${rel}` : import_picocolors.default.gray("\u2013") + ` Skipped ${rel} (already exists)`
+    );
+    const hasDeps = utilsEntry.npmDeps.some((d) => !(0, import_fs4.existsSync)((0, import_path4.join)(cwd, "node_modules", d)));
+    if (hasDeps) {
+      console.log(import_picocolors.default.cyan("\nInstalling dependencies..."));
+      installPackages([...utilsEntry.npmDeps, "tailwind-animate"], cwd);
+    }
+  }
+  const cssResult = setupGlobalsCss(cwd, framework);
+  if (cssResult) console.log(import_picocolors.default.green("\u2713") + ` Updated ${cssResult}`);
+  console.log(
+    import_picocolors.default.bold(import_picocolors.default.green("\nDone!")) + ` Framework: ${FRAMEWORK_LABELS[framework]} | RSC: ${rsc ? "yes" : "no"}
+Run ${import_picocolors.default.cyan("npx react-principles-cli add <component>")} to add components.
+`
+  );
+}
+
+// src/commands/add.ts
+var import_picocolors2 = __toESM(require("picocolors"));
+async function add(names, cwd) {
+  const config = readConfig(cwd);
+  if (!config) {
+    console.log(import_picocolors2.default.red("No components.json found. Run `npx react-principles-cli init` first."));
+    process.exit(1);
+  }
+  const targets = names.length === 1 && names[0] === "--all" ? getAll().filter((e) => e.target === "components").map((e) => e.name) : names;
+  const unknown = targets.filter((n) => !getEntry(n));
+  if (unknown.length > 0) {
+    console.log(import_picocolors2.default.red(`Unknown component(s): ${unknown.join(", ")}`));
+    console.log(import_picocolors2.default.gray("Run `npx react-principles-cli list` to see available components."));
+    process.exit(1);
+  }
+  const seen = /* @__PURE__ */ new Set();
+  const toInstall = targets.flatMap((n) => resolve(n)).filter((e) => {
+    if (seen.has(e.name)) return false;
+    seen.add(e.name);
+    return true;
+  });
+  const allNpmDeps = /* @__PURE__ */ new Set();
+  const written = [];
+  const skipped = [];
+  for (const entry of toInstall) {
+    const outputPath = resolveOutputPath(entry.outputFile, entry.target, config, cwd);
+    const content = getTemplate(entry.templateKey);
+    if (!content) {
+      console.log(import_picocolors2.default.yellow(`\u26A0 No template found for ${entry.name}, skipping.`));
+      continue;
+    }
+    const didWrite = writeFile(content, outputPath);
+    const label = [config.componentsDir, config.hooksDir, config.libDir].find((d) => outputPath.includes(d))?.concat("/", entry.outputFile) ?? entry.outputFile;
+    if (didWrite) {
+      written.push(label);
+    } else {
+      skipped.push(label);
+    }
+    for (const dep of entry.npmDeps) allNpmDeps.add(dep);
+  }
+  for (const f of written) console.log(import_picocolors2.default.green("\u2713") + ` Created ${f}`);
+  for (const f of skipped) console.log(import_picocolors2.default.gray("\u2013") + ` Skipped ${f} (already exists)`);
+  if (allNpmDeps.size > 0) {
+    console.log(import_picocolors2.default.cyan("\nInstalling dependencies..."));
+    installPackages([...allNpmDeps], cwd);
+  }
+  if (written.length > 0) {
+    console.log(import_picocolors2.default.bold(import_picocolors2.default.green("\nDone!\n")));
+  }
+}
+
+// src/index.ts
+var program = new import_commander.Command();
+program.name("react-principles").description("Add react-principles UI components to your project").version("0.0.1");
+program.command("init").description("Initialize components.json config and install the cn() utility").option("-t, --template <framework>", "Framework: next | vite | remix | other").action(async (opts) => {
+  await init(process.cwd(), opts.template);
+});
+program.command("add <components...>").description("Add one or more components to your project").action(async (components) => {
+  await add(components, process.cwd());
+});
+program.command("list").description("List all available components").action(() => {
+  const entries = getAll().filter((e) => e.target === "components");
+  console.log(import_picocolors3.default.bold("\nAvailable components:\n"));
+  for (const e of entries) {
+    console.log(`  ${import_picocolors3.default.cyan(e.name.padEnd(20))} ${import_picocolors3.default.gray(e.description)}`);
+  }
+  console.log();
+});
+program.parse();