nexoreui-cli 1.6.0 → 1.7.1

package/dist/index.js

@@ -2713,6 +2713,1651 @@ export default function DocsPlatformTemplate() {
 `
 };
 
+// src/registry/template-healthcare-portal.ts
+var templateHealthcarePortal = {
+  name: "template-healthcare-portal",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-healthcare-portal.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { Activity, Heart, Calendar, Pill, CheckCircle2, Video, TrendingUp } from "lucide-react";
+
+export default function HealthcarePortalTemplate() {
+  const [checkedMeds, setCheckedMeds] = useState<string[]>(["med-1"]);
+
+  const vitals = [
+    { label: "Resting Heart Rate", value: "64", unit: "BPM", delta: "-3 bpm vs avg", status: "Optimal" },
+    { label: "Blood Oxygen (SpO2)", value: "98.8", unit: "%", delta: "+0.4% healthy", status: "Optimal" },
+    { label: "Sleep Recovery", value: "88", unit: "/100", delta: "7h 42m deep sleep", status: "High" },
+    { label: "Heart Rate Var.", value: "58", unit: "ms", delta: "+7ms resilience", status: "Normal" },
+  ];
+
+  const medications = [
+    { id: "med-1", name: "Atorvastatin Calcium", dose: "20mg \u2022 Morning with meal", days: "24 days left" },
+    { id: "med-2", name: "Omega-3 Pure EPA/DHA", dose: "1000mg \u2022 Midday with water", days: "18 days left" },
+    { id: "med-3", name: "Magnesium Glycinate", dose: "400mg \u2022 Evening before sleep", days: "6 days left" },
+  ];
+
+  return (
+    <div className="min-h-screen bg-[#090b10] text-zinc-100 font-sans p-6 sm:p-8">
+      <header className="max-w-6xl mx-auto flex justify-between items-center pb-6 border-b border-white/10">
+        <div>
+          <span className="text-xs uppercase font-mono tracking-widest text-teal-400">PulseCare Telehealth</span>
+          <h1 className="text-2xl font-bold">Patient Health Telemetry</h1>
+        </div>
+        <button className="px-4 py-2 rounded-xl text-xs font-semibold bg-teal-600 hover:bg-teal-500 text-white flex items-center gap-2">
+          <Video className="h-3.5 w-3.5" />
+          <span>Book Specialist</span>
+        </button>
+      </header>
+
+      <main className="max-w-6xl mx-auto py-8 space-y-6">
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+          {vitals.map((v) => (
+            <div key={v.label} className="p-4 rounded-2xl border border-white/10 bg-[#12141c]">
+              <span className="text-xs text-zinc-400">{v.label}</span>
+              <div className="text-2xl sm:text-3xl font-bold font-mono my-1">
+                {v.value} <span className="text-xs font-normal opacity-60">{v.unit}</span>
+              </div>
+              <span className="text-xs text-teal-400 font-semibold flex items-center gap-1">
+                <TrendingUp className="h-3 w-3" />
+                {v.delta}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        <div className="p-6 rounded-2xl border border-white/10 bg-[#12141c] space-y-4">
+          <h2 className="font-bold text-base flex items-center gap-2">
+            <Pill className="h-4 w-4 text-teal-400" />
+            <span>Daily Prescriptions</span>
+          </h2>
+          <div className="space-y-2">
+            {medications.map((m) => {
+              const isDone = checkedMeds.includes(m.id);
+              return (
+                <div
+                  key={m.id}
+                  onClick={() =>
+                    setCheckedMeds((prev) =>
+                      prev.includes(m.id) ? prev.filter((i) => i !== m.id) : [...prev, m.id]
+                    )
+                  }
+                  className="p-3.5 rounded-xl border border-white/5 bg-[#181a24] flex items-center justify-between cursor-pointer hover:border-white/20"
+                >
+                  <div className="flex items-center gap-3">
+                    <div
+                      className={\`w-5 h-5 rounded-lg border flex items-center justify-center \${
+                        isDone ? "bg-teal-600 border-teal-600 text-white" : "border-zinc-500"
+                      }\`}
+                    >
+                      {isDone && <CheckCircle2 className="h-3.5 w-3.5" />}
+                    </div>
+                    <div>
+                      <div className={\`text-xs font-semibold \${isDone ? "line-through opacity-50" : ""}\`}>
+                        {m.name}
+                      </div>
+                      <div className="text-[10px] text-zinc-400">{m.dose}</div>
+                    </div>
+                  </div>
+                  <span className="text-xs font-mono text-zinc-400">{m.days}</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+`
+};
+
+// src/registry/template-web3-dex.ts
+var templateWeb3Dex = {
+  name: "template-web3-dex",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-web3-dex.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { ArrowDownUp, Zap, Wallet, TrendingUp } from "lucide-react";
+
+export default function Web3DexTemplate() {
+  const [fromAmount, setFromAmount] = useState("1.5");
+  const [isSwapping, setIsSwapping] = useState(false);
+
+  return (
+    <div className="min-h-screen bg-[#08090d] text-zinc-100 font-sans p-6 flex flex-col items-center justify-center">
+      <div className="w-full max-w-md p-6 rounded-3xl border border-white/10 bg-[#12141c] space-y-4 shadow-2xl">
+        <div className="flex justify-between items-center">
+          <span className="font-bold text-base">NovaSwap DEX</span>
+          <span className="text-xs px-2.5 py-1 rounded-full bg-cyan-500/10 text-cyan-400 font-mono">12 Gwei</span>
+        </div>
+
+        <div className="p-4 rounded-2xl border border-white/5 bg-[#181a24] space-y-1">
+          <div className="flex justify-between text-xs text-zinc-400">
+            <span>You Pay</span>
+            <span>Balance: 4.82 ETH</span>
+          </div>
+          <div className="flex justify-between items-center">
+            <input
+              type="text"
+              value={fromAmount}
+              onChange={(e) => setFromAmount(e.target.value)}
+              className="text-2xl font-mono font-bold bg-transparent outline-none w-1/2"
+            />
+            <span className="px-3 py-1 rounded-xl bg-white/10 font-bold text-xs">ETH</span>
+          </div>
+        </div>
+
+        <div className="flex justify-center -my-2">
+          <div className="p-2 rounded-xl bg-[#12141c] border border-white/10">
+            <ArrowDownUp className="h-4 w-4 text-cyan-400" />
+          </div>
+        </div>
+
+        <div className="p-4 rounded-2xl border border-white/5 bg-[#181a24] space-y-1">
+          <div className="flex justify-between text-xs text-zinc-400">
+            <span>You Receive (Est.)</span>
+            <span>Balance: 14,850 USDC</span>
+          </div>
+          <div className="flex justify-between items-center">
+            <div className="text-2xl font-mono font-bold">
+              {(parseFloat(fromAmount || "0") * 2640.5).toFixed(2)}
+            </div>
+            <span className="px-3 py-1 rounded-xl bg-white/10 font-bold text-xs">USDC</span>
+          </div>
+        </div>
+
+        <button
+          onClick={() => {
+            setIsSwapping(true);
+            setTimeout(() => setIsSwapping(false), 1200);
+          }}
+          className="w-full py-3.5 rounded-xl font-bold text-xs text-white bg-cyan-600 hover:bg-cyan-500 shadow-lg flex items-center justify-center gap-2 transition-transform active:scale-95"
+        >
+          <Zap className="h-4 w-4" />
+          <span>{isSwapping ? "Routing via Smart Contract..." : "Swap Tokens"}</span>
+        </button>
+      </div>
+    </div>
+  );
+}
+`
+};
+
+// src/registry/template-edtech-learning.ts
+var templateEdtechLearning = {
+  name: "template-edtech-learning",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-edtech-learning.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { BookOpen, CheckCircle2, Code2, Award, Flame, Play } from "lucide-react";
+
+export default function EdtechLearningTemplate() {
+  const [selectedIdx, setSelectedIdx] = useState<number | null>(1);
+  const [isDone, setIsDone] = useState(false);
+
+  return (
+    <div className="min-h-screen bg-[#090b10] text-zinc-100 font-sans p-6 sm:p-8">
+      <header className="max-w-5xl mx-auto flex justify-between items-center pb-6 border-b border-white/10">
+        <div className="flex items-center gap-2">
+          <BookOpen className="h-5 w-5 text-emerald-400" />
+          <span className="font-bold text-base">Polymath Academy</span>
+        </div>
+        <div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-amber-500/10 text-amber-400 text-xs font-semibold">
+          <Flame className="h-3.5 w-3.5 fill-current" />
+          <span>14 Day Streak</span>
+        </div>
+      </header>
+
+      <main className="max-w-5xl mx-auto py-8 grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2 p-6 rounded-2xl border border-white/10 bg-[#12141c] space-y-4">
+          <div className="text-xs font-mono text-zinc-400">Module 2 \u2022 Lesson 2.2</div>
+          <h1 className="text-2xl font-bold">Raft Consensus & Majority Quorums</h1>
+          <p className="text-xs text-zinc-300 leading-relaxed">
+            In Raft, a cluster of 5 nodes requires an affirmative vote from at least 3 nodes before committing any state machine transition.
+          </p>
+
+          <div className="space-y-2 pt-2">
+            {[
+              "Any follower can commit independently without Leader confirmation.",
+              "A quorum majority (3 of 5 nodes) ensures overlapping sets and prevents split-brain.",
+              "Logs are replicated only during leader step-down events.",
+            ].map((ans, i) => (
+              <button
+                key={i}
+                onClick={() => setSelectedIdx(i)}
+                className={\`w-full p-3.5 rounded-xl border text-left text-xs transition-colors \${
+                  selectedIdx === i
+                    ? "border-emerald-500 bg-emerald-500/10 text-white font-semibold"
+                    : "border-white/10 bg-[#181a24] text-zinc-300"
+                }\`}
+              >
+                {ans}
+              </button>
+            ))}
+          </div>
+
+          <button
+            onClick={() => setIsDone(true)}
+            className="px-5 py-2.5 rounded-xl text-xs font-bold text-white bg-emerald-600 hover:bg-emerald-500 shadow-md flex items-center gap-2 mt-4"
+          >
+            <Play className="h-3.5 w-3.5 fill-current" />
+            <span>{isDone ? "Solution Verified \u2713 (+150 XP)" : "Verify Solution"}</span>
+          </button>
+        </div>
+      </main>
+    </div>
+  );
+}
+`
+};
+
+// src/registry/template-conference-event.ts
+var templateConferenceEvent = {
+  name: "template-conference-event",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-conference-event.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Calendar, MapPin, Ticket, Sparkles, Check } from "lucide-react";
+
+export default function ConferenceEventTemplate() {
+  const [selectedDay, setSelectedDay] = useState("day-1");
+
+  const schedule = [
+    { time: "09:00 AM", title: "Opening Keynote: Autonomous Inference at Edge", speaker: "Dr. Elena Vance" },
+    { time: "11:00 AM", title: "Deterministic Design Systems for 100M+ Users", speaker: "Marcus Sterling" },
+    { time: "02:00 PM", title: "Zero-Downtime eBPF State Replication", speaker: "Hiroshi Tanaka" },
+  ];
+
+  return (
+    <div className="min-h-screen bg-[#08090e] text-zinc-100 font-sans p-6 sm:p-12">
+      <header className="max-w-5xl mx-auto flex justify-between items-center pb-6 border-b border-white/10">
+        <span className="font-extrabold text-base tracking-tight">Vertex Summit 2027</span>
+        <button className="px-4 py-2 rounded-xl text-xs font-bold text-white bg-purple-600 hover:bg-purple-500 shadow-md">
+          Claim Pass
+        </button>
+      </header>
+
+      <main className="max-w-4xl mx-auto py-16 text-center space-y-6">
+        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-xs font-mono">
+          <Calendar className="h-3.5 w-3.5" />
+          <span>October 14\u201316, 2027 \u2022 San Francisco, CA & Virtual</span>
+        </div>
+
+        <h1 className="text-4xl sm:text-6xl font-black tracking-tight leading-tight">
+          The Convergence of Autonomous Systems
+        </h1>
+
+        <p className="text-sm text-zinc-400 max-w-xl mx-auto">
+          Gathering 4,500+ systems engineers and AI leaders to build the future of software infrastructure.
+        </p>
+
+        <div className="p-6 rounded-2xl border border-white/10 bg-[#12141c] text-left space-y-3 mt-8">
+          <h2 className="font-bold text-sm">Day 1 Schedule (Oct 14)</h2>
+          <div className="space-y-2">
+            {schedule.map((item) => (
+              <div key={item.time} className="p-3 rounded-xl border border-white/5 bg-[#181a24] flex items-center justify-between text-xs">
+                <div>
+                  <div className="font-bold">{item.title}</div>
+                  <div className="text-[10px] text-zinc-400">{item.speaker}</div>
+                </div>
+                <span className="font-mono text-purple-400 font-bold">{item.time}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
+`
+};
+
+// src/registry/template-audio-podcast.ts
+var templateAudioPodcast = {
+  name: "template-audio-podcast",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-audio-podcast.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Headphones, Play, Pause, RotateCcw, RotateCw, Download } from "lucide-react";
+
+export default function AudioPodcastTemplate() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentSec, setCurrentSec] = useState(255); // 04:15
+
+  const chapters = [
+    { time: "00:00", title: "Cold Open & Benchmarks" },
+    { time: "04:15", title: "Lockless Ring Buffers vs Channels" },
+    { time: "18:40", title: "Kernel-Bypass Networking with io_uring" },
+  ];
+
+  return (
+    <div className="min-h-screen bg-[#08090d] text-zinc-100 font-sans p-6 pb-24">
+      <header className="max-w-4xl mx-auto flex justify-between items-center pb-6 border-b border-white/10">
+        <div className="flex items-center gap-2">
+          <Headphones className="h-5 w-5 text-indigo-400" />
+          <span className="font-bold text-base">EchoWave Studio</span>
+        </div>
+        <button className="px-3.5 py-1.5 rounded-xl border border-white/10 text-xs hover:bg-white/10">
+          Subscribe RSS
+        </button>
+      </header>
+
+      <main className="max-w-4xl mx-auto py-10 space-y-6">
+        <div className="p-6 rounded-2xl border border-white/10 bg-[#12141c] space-y-3">
+          <span className="text-xs font-mono text-indigo-400">Episode 148 \u2022 54m 20s</span>
+          <h1 className="text-2xl sm:text-3xl font-bold">Zero-Cost Abstractions & High-Throughput I/O</h1>
+          <p className="text-xs text-zinc-400">Featuring Linus M. Discussing memory barriers and lock-free concurrency queues.</p>
+        </div>
+
+        <div className="space-y-2">
+          <h2 className="font-bold text-xs uppercase tracking-wider text-zinc-400">Chapters</h2>
+          {chapters.map((ch) => (
+            <div key={ch.time} className="p-3.5 rounded-xl border border-white/10 bg-[#12141c] flex items-center justify-between text-xs">
+              <span>{ch.title}</span>
+              <span className="font-mono text-indigo-400">{ch.time}</span>
+            </div>
+          ))}
+        </div>
+      </main>
+
+      <footer className="fixed bottom-0 inset-x-0 p-4 border-t border-white/10 bg-[#08090d]/95 backdrop-blur-xl">
+        <div className="max-w-4xl mx-auto flex items-center justify-between gap-4">
+          <button
+            onClick={() => setIsPlaying(!isPlaying)}
+            className="p-3 rounded-full bg-indigo-600 hover:bg-indigo-500 text-white shadow-md"
+          >
+            {isPlaying ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5 fill-current ml-0.5" />}
+          </button>
+          <span className="text-xs font-mono text-zinc-400">04:15 / 54:20</span>
+        </div>
+      </footer>
+    </div>
+  );
+}
+`
+};
+
+// src/registry/template-real-estate.ts
+var templateRealEstate = {
+  name: "template-real-estate",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-real-estate.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Building2, MapPin, Calendar, Users, Check } from "lucide-react";
+
+export default function RealEstateTemplate() {
+  const [nights, setNights] = useState(4);
+  const baseRate = 2450;
+
+  return (
+    <div className="min-h-screen bg-[#0c0d12] text-zinc-100 font-sans p-6 sm:p-12">
+      <header className="max-w-5xl mx-auto flex justify-between items-center pb-6 border-b border-white/10">
+        <span className="font-serif text-base uppercase tracking-widest font-light">Haven Luxury Estates</span>
+        <span className="text-xs uppercase tracking-widest font-mono text-zinc-400">Aspen \u2022 Kyoto \u2022 Zurich</span>
+      </header>
+
+      <main className="max-w-5xl mx-auto py-12 space-y-8">
+        <div className="space-y-3">
+          <div className="text-xs font-mono text-zinc-400">Aspen Valley, Colorado \u2022 Residence #04</div>
+          <h1 className="text-3xl sm:text-5xl font-serif font-light">The Obsidian Pavilion</h1>
+          <p className="text-xs sm:text-sm text-zinc-400 max-w-2xl leading-relaxed">
+            A 9,400 sq.ft cantilevered cedar and blackened steel retreat with panoramic mountain views and private helipad.
+          </p>
+        </div>
+
+        <div className="p-6 rounded-2xl border border-white/10 bg-[#14161f] flex flex-col sm:flex-row justify-between items-center gap-4">
+          <div>
+            <div className="text-xs text-zinc-400">Nightly Rate: $2,450 USD</div>
+            <div className="text-2xl font-serif font-bold mt-0.5">
+              \${(baseRate * nights).toLocaleString()} USD <span className="text-xs font-sans font-normal text-zinc-400">({nights} nights)</span>
+            </div>
+          </div>
+          <button className="px-6 py-3 rounded-xl text-xs font-serif uppercase tracking-wider font-bold bg-white text-black hover:bg-zinc-200 shadow-md">
+            Reserve Residence
+          </button>
+        </div>
+      </main>
+    </div>
+  );
+}
+`
+};
+
+// src/registry/template-uptime-status.ts
+var templateUptimeStatus = {
+  name: "template-uptime-status",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-uptime-status.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { CheckCircle2, ShieldCheck, Server, Bell, Globe } from "lucide-react";
+
+export default function UptimeStatusTemplate() {
+  const services = [
+    { name: "Global Anycast Edge CDN", uptime: "100.0%", ping: "11ms" },
+    { name: "Authentication Engine & SSO", uptime: "99.99%", ping: "24ms" },
+    { name: "Distributed Vector Indexing", uptime: "99.97%", ping: "38ms" },
+    { name: "PostgreSQL Database Clusters", uptime: "99.95%", ping: "14ms" },
+  ];
+
+  return (
+    <div className="min-h-screen bg-[#08090d] text-zinc-100 font-sans p-6 sm:p-12">
+      <header className="max-w-4xl mx-auto flex justify-between items-center pb-6 border-b border-white/10">
+        <div className="flex items-center gap-2 font-bold text-base">
+          <ShieldCheck className="h-5 w-5 text-emerald-500" />
+          <span>Beacon Status</span>
+        </div>
+        <button className="px-3.5 py-1.5 rounded-xl border border-white/10 text-xs hover:bg-white/10 flex items-center gap-1.5">
+          <Bell className="h-3.5 w-3.5" />
+          <span>Subscribe</span>
+        </button>
+      </header>
+
+      <main className="max-w-4xl mx-auto py-10 space-y-6">
+        <div className="p-5 rounded-2xl border border-emerald-500/30 bg-emerald-500/10 flex items-center justify-between text-xs text-emerald-400 font-semibold">
+          <div className="flex items-center gap-2">
+            <CheckCircle2 className="h-5 w-5" />
+            <span>All Core Services Operational \u2014 99.994% Availability</span>
+          </div>
+          <span className="font-mono">Past 90 Days</span>
+        </div>
+
+        <div className="space-y-3">
+          {services.map((s) => (
+            <div key={s.name} className="p-4 rounded-xl border border-white/10 bg-[#12141c] flex items-center justify-between text-xs">
+              <div>
+                <div className="font-bold">{s.name}</div>
+                <div className="text-[10px] text-zinc-400 font-mono">Latency: {s.ping}</div>
+              </div>
+              <span className="text-xs font-mono font-bold text-emerald-400">{s.uptime}</span>
+            </div>
+          ))}
+        </div>
+      </main>
+    </div>
+  );
+}
+`
+};
+
+// src/registry/template-agent-workflow.ts
+var templateAgentWorkflow = {
+  name: "template-agent-workflow",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-agent-workflow.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Play, Zap, Database, Cpu, Send, CheckCircle2 } from "lucide-react";
+
+export default function AgentWorkflowTemplate() {
+  const [isRunning, setIsRunning] = useState(false);
+  const [log, setLog] = useState<string | null>(null);
+
+  const handleRun = () => {
+    setIsRunning(true);
+    setLog("Trigger received. Querying vector database...");
+    setTimeout(() => {
+      setLog("Claude 3.5 Sonnet generated solution. Dispatching webhook...");
+      setTimeout(() => {
+        setIsRunning(false);
+        setLog("\u2713 Execution completed in 680ms. Payload delivered.");
+      }, 700);
+    }, 800);
+  };
+
+  return (
+    <div className="min-h-screen bg-[#08090d] text-zinc-100 font-sans p-6 sm:p-12">
+      <header className="max-w-4xl mx-auto flex justify-between items-center pb-6 border-b border-white/10">
+        <span className="font-bold text-base">Nexus Nodes Canvas</span>
+        <button
+          onClick={handleRun}
+          disabled={isRunning}
+          className="px-4 py-2 rounded-xl text-xs font-bold text-white bg-blue-600 hover:bg-blue-500 flex items-center gap-2 shadow-md"
+        >
+          <Play className="h-3.5 w-3.5 fill-current" />
+          <span>{isRunning ? "Running..." : "Test Workflow"}</span>
+        </button>
+      </header>
+
+      <main className="max-w-4xl mx-auto py-12 space-y-6">
+        <div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
+          {[
+            { name: "Webhook Ingress", icon: Zap, color: "text-amber-400" },
+            { name: "Pinecone Retrieval", icon: Database, color: "text-cyan-400" },
+            { name: "Claude 3.5 Reasoning", icon: Cpu, color: "text-blue-400" },
+            { name: "Slack Dispatcher", icon: Send, color: "text-emerald-400" },
+          ].map((n) => {
+            const Icon = n.icon;
+            return (
+              <div key={n.name} className="p-4 rounded-2xl border border-white/10 bg-[#12141c] space-y-2 text-xs">
+                <Icon className={\`h-4 w-4 \${n.color}\`} />
+                <div className="font-bold">{n.name}</div>
+              </div>
+            );
+          })}
+        </div>
+
+        {log && (
+          <div className="p-4 rounded-xl border border-white/10 bg-[#06070a] font-mono text-xs text-blue-400">
+            {log}
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
+`
+};
+
+// src/registry/template-restaurant-culinary.ts
+var templateRestaurantCulinary = {
+  name: "template-restaurant-culinary",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-restaurant-culinary.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Utensils, Calendar, Users, Award, Wine } from "lucide-react";
+
+export default function RestaurantCulinaryTemplate() {
+  const [guests, setGuests] = useState(2);
+  const [confirmed, setConfirmed] = useState(false);
+
+  return (
+    <div className="min-h-screen bg-[#0e0d0b] text-[#f5f2eb] font-sans p-6 sm:p-12">
+      <header className="max-w-4xl mx-auto flex justify-between items-center pb-6 border-b border-[#2e2b24]">
+        <div>
+          <span className="text-[10px] uppercase font-mono tracking-widest text-amber-500">Komorebi Gastronomy</span>
+          <h1 className="text-xl font-serif">Contemporary Seasonal Dining</h1>
+        </div>
+        <div className="flex items-center gap-1.5 text-xs text-amber-500 font-serif">
+          <Award className="h-4 w-4" />
+          <span>Two Michelin Stars</span>
+        </div>
+      </header>
+
+      <main className="max-w-4xl mx-auto py-12 space-y-8">
+        <div className="space-y-2 text-center">
+          <h2 className="text-3xl sm:text-4xl font-serif font-light">Autumn Tasting Menu (8 Courses)</h2>
+          <p className="text-xs text-[#b8b3a5] max-w-xl mx-auto">
+            Hokkaido sea urchin, wild matsutake, and binchotan-charred Miyazaki A5 wagyu tenderloin.
+          </p>
+        </div>
+
+        <div className="p-6 rounded-3xl border border-[#2e2b24] bg-[#171512] max-w-md mx-auto space-y-4">
+          <div className="font-serif font-bold text-sm">Table Reservation</div>
+          <div className="flex gap-2">
+            {[2, 4, 6].map((g) => (
+              <button
+                key={g}
+                onClick={() => setGuests(g)}
+                className={\`flex-1 py-2 rounded-xl border text-xs font-serif \${
+                  guests === g ? "bg-amber-700 text-white border-amber-700" : "border-[#2e2b24] text-[#b8b3a5]"
+                }\`}
+              >
+                {g} Guests
+              </button>
+            ))}
+          </div>
+
+          <button
+            onClick={() => setConfirmed(true)}
+            className="w-full py-3 rounded-xl font-serif uppercase tracking-widest text-xs font-bold text-white bg-amber-700 hover:bg-amber-600 shadow-lg"
+          >
+            {confirmed ? "Table Reserved \u2713" : "Reserve Table for " + guests}
+          </button>
+        </div>
+      </main>
+    </div>
+  );
+}
+`
+};
+
+// src/registry/template-help-center.ts
+var templateHelpCenter = {
+  name: "template-help-center",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-help-center.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Search, LifeBuoy, CreditCard, ShieldCheck, Code2, ChevronDown } from "lucide-react";
+
+export default function HelpCenterTemplate() {
+  const [query, setQuery] = useState("");
+
+  const categories = [
+    { title: "Getting Started", icon: LifeBuoy, count: "14 articles" },
+    { title: "Billing & Invoicing", icon: CreditCard, count: "9 articles" },
+    { title: "Security & 2FA", icon: ShieldCheck, count: "18 articles" },
+    { title: "Developer API", icon: Code2, count: "22 articles" },
+  ];
+
+  return (
+    <div className="min-h-screen bg-[#090b10] text-zinc-100 font-sans p-6 sm:p-12">
+      <header className="max-w-4xl mx-auto flex justify-between items-center pb-6 border-b border-white/10">
+        <span className="font-bold text-base">Resolv Support Desk</span>
+        <button className="px-3.5 py-1.5 rounded-xl text-xs font-semibold bg-indigo-600 hover:bg-indigo-500 text-white shadow-md">
+          Submit Ticket
+        </button>
+      </header>
+
+      <main className="max-w-4xl mx-auto py-12 space-y-8 text-center">
+        <h1 className="text-3xl sm:text-4xl font-extrabold">How can our support team help you?</h1>
+
+        <div className="max-w-md mx-auto relative">
+          <Search className="absolute left-3.5 top-3 h-4 w-4 opacity-50" />
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search guides, 2FA, billing..."
+            className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-white/10 bg-[#12141c] text-xs outline-none"
+          />
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-left">
+          {categories.map((c) => {
+            const Icon = c.icon;
+            return (
+              <div key={c.title} className="p-4 rounded-2xl border border-white/10 bg-[#12141c] flex items-center justify-between text-xs">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 rounded-xl bg-indigo-500/10 text-indigo-400">
+                    <Icon className="h-4 w-4" />
+                  </div>
+                  <div>
+                    <div className="font-bold">{c.title}</div>
+                    <div className="text-[10px] text-zinc-400">{c.count}</div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </main>
+    </div>
+  );
+}
+`
+};
+
+// src/registry/template-fitness-athletics.ts
+var templateFitnessAthletics = {
+  name: "template-fitness-athletics",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-fitness-athletics.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Activity, Heart, Flame, Trophy, Timer, Plus, CheckCircle2 } from "lucide-react";
+
+export default function FitnessAthleticsTemplate() {
+  const [bpm, setBpm] = useState(158);
+  const [intervals, setIntervals] = useState([
+    { title: "Dynamic Hip Mobility", target: "10 min \u2022 Zone 1", done: true },
+    { title: "Progressive Aerobic Build", target: "15 min @ 140 BPM", done: true },
+    { title: "4 x 1,000m Lactate Repeats", target: "4 reps @ 3:42/km", done: false },
+  ]);
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <Activity className="w-5 h-5 text-rose-500" />
+          <span className="font-bold text-base">AeroPulse Athletics</span>
+        </div>
+        <div className="text-xs font-mono px-3 py-1.5 rounded-full border" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+          Recovery: 88% Ready
+        </div>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <div className="p-4 rounded-xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+            <span className="text-xs opacity-70">Daily Strain</span>
+            <div className="text-2xl font-extrabold mt-1">14.8 / 21.0</div>
+          </div>
+          <div className="p-4 rounded-xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+            <span className="text-xs opacity-70">Current Target BPM</span>
+            <div className="text-2xl font-extrabold text-indigo-600 mt-1">{bpm} BPM</div>
+          </div>
+          <div className="p-4 rounded-xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+            <span className="text-xs opacity-70">Resting Heart Rate</span>
+            <div className="text-2xl font-extrabold text-emerald-600 mt-1">48 bpm</div>
+          </div>
+        </div>
+
+        <div className="p-6 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <h3 className="font-bold text-sm mb-2">Cardio Zone Spectrum</h3>
+          <input
+            type="range"
+            min="100"
+            max="195"
+            value={bpm}
+            onChange={(e) => setBpm(Number(e.target.value))}
+            className="w-full accent-indigo-600"
+          />
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-wilderness-travel.ts
+var templateWildernessTravel = {
+  name: "template-wilderness-travel",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-wilderness-travel.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Compass, Mountain, Scale, Radio, Tent } from "lucide-react";
+
+export default function WildernessTravelTemplate() {
+  const [baseWeight, setBaseWeight] = useState(6.4);
+  const [foodDays, setFoodDays] = useState(6);
+  const totalWeight = (baseWeight + foodDays * 0.75 + 2.0).toFixed(1);
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <Compass className="w-5 h-5 text-emerald-600" />
+          <span className="font-bold text-base">NomadRoute Expeditions</span>
+        </div>
+        <button className="px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white bg-emerald-600">
+          Reserve Permits
+        </button>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="p-6 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <h2 className="text-xl font-extrabold mb-1">Patagonia High Icefield Crossing</h2>
+          <p className="text-xs opacity-70">148 km \u2022 +6,850m Cumulative Gain \u2022 8 Days</p>
+        </div>
+
+        <div className="p-6 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="font-bold text-sm">Skin-Out Pack Weight: {totalWeight} kg</h3>
+            <span className="text-xs px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-600 font-bold">Ultralight Load</span>
+          </div>
+          <input
+            type="range"
+            min="4.0"
+            max="12.0"
+            step="0.2"
+            value={baseWeight}
+            onChange={(e) => setBaseWeight(parseFloat(e.target.value))}
+            className="w-full accent-emerald-600"
+          />
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-devops-kubernetes.ts
+var templateDevopsKubernetes = {
+  name: "template-devops-kubernetes",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-devops-kubernetes.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Server, Cpu, Database, Terminal, Search, SlidersHorizontal } from "lucide-react";
+
+export default function DevopsKubernetesTemplate() {
+  const [canary, setCanary] = useState(15);
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-mono max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b font-sans" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <Server className="w-5 h-5 text-indigo-600" />
+          <span className="font-bold text-base">KubeOrbit Cloud</span>
+        </div>
+        <span className="text-xs px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-600 border border-emerald-500/20 font-mono">
+          242/248 Pods Healthy
+        </span>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="p-6 rounded-2xl border font-sans" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <h3 className="font-bold text-sm mb-2">Canary Ingress Weight: {canary}%</h3>
+          <input
+            type="range"
+            min="0"
+            max="100"
+            value={canary}
+            onChange={(e) => setCanary(Number(e.target.value))}
+            className="w-full accent-indigo-600"
+          />
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-audio-daw.ts
+var templateAudioDaw = {
+  name: "template-audio-daw",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-audio-daw.tsx",
+  content: `"use client";
+
+import React, { useState, useEffect } from "react";
+import { Play, Pause, Disc, Sliders, Volume2, ShoppingBag } from "lucide-react";
+
+export default function AudioDawTemplate() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [bpm, setBpm] = useState(140);
+  const [step, setStep] = useState(0);
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+    if (isPlaying) {
+      interval = setInterval(() => setStep((s) => (s + 1) % 16), (60 / bpm / 4) * 1000);
+    }
+    return () => clearInterval(interval);
+  }, [isPlaying, bpm]);
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <Disc className="w-5 h-5 text-purple-600" />
+          <span className="font-bold text-base">SoundForge Studio</span>
+        </div>
+        <button onClick={() => setIsPlaying(!isPlaying)} className="px-4 py-2 rounded-xl text-xs font-semibold text-white bg-purple-600 flex items-center gap-1.5">
+          {isPlaying ? <Pause className="w-3.5 h-3.5" /> : <Play className="w-3.5 h-3.5" />}
+          <span>{isPlaying ? "Pause" : "Play Groove"}</span>
+        </button>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="p-6 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <div className="flex justify-between items-center mb-4">
+            <h3 className="font-bold text-sm">16-Step Beat Grid ({bpm} BPM)</h3>
+            <span className="font-mono text-xs opacity-60">Step {step + 1} / 16</span>
+          </div>
+          <div className="grid grid-cols-16 gap-1">
+            {Array.from({ length: 16 }).map((_, i) => (
+              <div key={i} className={\`h-10 rounded border \${step === i && isPlaying ? "bg-purple-600 text-white" : "bg-zinc-100 dark:bg-zinc-800"}\`} />
+            ))}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-gamified-habits.ts
+var templateGamifiedHabits = {
+  name: "template-gamified-habits",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-gamified-habits.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Shield, Sword, Sparkles, Coins, Flame, CheckCircle2 } from "lucide-react";
+
+export default function GamifiedHabitsTemplate() {
+  const [xp, setXp] = useState(2450);
+  const [gold, setGold] = useState(1420);
+  const [quests, setQuests] = useState([
+    { id: 1, title: "Slay 90m Deep Focus Work Block", xp: 180, done: false },
+    { id: 2, title: "Drink 2.5L Water Elixir", xp: 60, done: true },
+  ]);
+
+  const toggle = (id: number, questXp: number) => {
+    setQuests((prev) =>
+      prev.map((q) => {
+        if (q.id === id && !q.done) {
+          setXp((x) => x + questXp);
+          setGold((g) => g + 40);
+          return { ...q, done: true };
+        }
+        return q;
+      })
+    );
+  };
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <Shield className="w-5 h-5 text-amber-500" />
+          <span className="font-bold text-base">QuestCraft RPG</span>
+        </div>
+        <div className="text-xs font-mono font-bold text-amber-500 flex items-center gap-1">
+          <Coins className="w-3.5 h-3.5" />
+          <span>{gold} Gold</span>
+        </div>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="p-6 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <h2 className="font-extrabold text-base mb-1">Level 14 Paladin \u2022 {xp} / 3,000 XP</h2>
+          <div className="w-full h-2 bg-zinc-200 dark:bg-zinc-800 rounded-full overflow-hidden">
+            <div className="h-full bg-amber-500" style={{ width: \`\${(xp / 3000) * 100}%\` }} />
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-global-logistics.ts
+var templateGlobalLogistics = {
+  name: "template-global-logistics",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-global-logistics.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Ship, Truck, Thermometer, Anchor, Navigation } from "lucide-react";
+
+export default function GlobalLogisticsTemplate() {
+  const [activeStage, setActiveStage] = useState(2);
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <Anchor className="w-5 h-5 text-cyan-600" />
+          <span className="font-bold text-base">Vanguard Logistics</span>
+        </div>
+        <span className="text-xs font-mono text-emerald-600 font-bold">14 Vessels Active</span>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="p-6 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <span className="text-xs font-mono opacity-60">MASTER BILL OF LADING</span>
+          <h2 className="text-xl font-extrabold font-mono mt-1">BOL-849204-HKG</h2>
+          <p className="text-xs opacity-70 mt-1">Shenzhen (YTN) &rarr; Rotterdam Gateway (RTM)</p>
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-gaming-esports.ts
+var templateGamingEsports = {
+  name: "template-gaming-esports",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-gaming-esports.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Trophy, Tv, Users, Target, Crown } from "lucide-react";
+
+export default function GamingEsportsTemplate() {
+  const [votes, setVotes] = useState(64);
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <Trophy className="w-5 h-5 text-rose-500" />
+          <span className="font-bold text-base">Valkyrie Esports</span>
+        </div>
+        <span className="text-xs font-bold text-rose-500 font-mono">LIVE \u2022 284k Viewers</span>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="p-6 rounded-2xl border flex items-center justify-between" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <div className="font-extrabold text-lg">Sentinels (11)</div>
+          <div className="font-mono text-xs opacity-60">Map 5 Inferno</div>
+          <div className="font-extrabold text-lg">Cloud9 (9)</div>
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-architecture-spatial.ts
+var templateArchitectureSpatial = {
+  name: "template-architecture-spatial",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-architecture-spatial.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Layers, Sun, Building, FileText } from "lucide-react";
+
+export default function ArchitectureSpatialTemplate() {
+  const [hour, setHour] = useState(13);
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <Building className="w-5 h-5 text-amber-600" />
+          <span className="font-bold text-base">Arcform Spatial</span>
+        </div>
+        <span className="text-xs px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-600 font-mono">
+          LEED Platinum \u2022 620 m\xB2
+        </span>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="p-6 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <h3 className="font-bold text-sm mb-2">Solar Daylight Azimuth ({hour}:00 JST)</h3>
+          <input
+            type="range"
+            min="8"
+            max="18"
+            value={hour}
+            onChange={(e) => setHour(Number(e.target.value))}
+            className="w-full accent-amber-600"
+          />
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-cybersecurity-soc.ts
+var templateCybersecuritySoc = {
+  name: "template-cybersecurity-soc",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-cybersecurity-soc.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { ShieldAlert, Terminal, Lock, CheckCircle2 } from "lucide-react";
+
+export default function CybersecuritySocTemplate() {
+  const [quarantined, setQuarantined] = useState(false);
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-mono max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b font-sans" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <ShieldAlert className="w-5 h-5 text-rose-600" />
+          <span className="font-bold text-base">Aegis SOC</span>
+        </div>
+        <button
+          onClick={() => setQuarantined(!quarantined)}
+          className={\`px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white \${quarantined ? "bg-gray-600" : "bg-rose-600"}\`}
+        >
+          {quarantined ? "Host Air-Gapped" : "Isolate Host"}
+        </button>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="p-6 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <div className="text-xs text-rose-600 font-bold mb-1">CRITICAL \u2022 MITRE T1021.002</div>
+          <h2 className="text-base font-extrabold font-sans">Pass-the-Hash Lateral Movement via SMB</h2>
+          <p className="text-xs opacity-70 mt-1">Target Host: srv-dc-primary-01.internal (10.240.12.8)</p>
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-cleantech-agriculture.ts
+var templateCleantechAgriculture = {
+  name: "template-cleantech-agriculture",
+  dependencies: ["framer-motion", "lucide-react"],
+  fileName: "template-cleantech-agriculture.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Sprout, Droplets, Sun, Wind, Leaf } from "lucide-react";
+
+export default function CleantechAgricultureTemplate() {
+  const [ph, setPh] = useState(6.2);
+  const [red, setRed] = useState(65);
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <Sprout className="w-5 h-5 text-emerald-600" />
+          <span className="font-bold text-base">Verdant IoT</span>
+        </div>
+        <span className="text-xs font-mono text-emerald-600 font-bold">98.4% Water Recycled</span>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="p-6 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <h3 className="font-bold text-sm mb-2">Hydroponic pH Level: {ph}</h3>
+          <input
+            type="range"
+            min="5.5"
+            max="7.0"
+            step="0.1"
+            value={ph}
+            onChange={(e) => setPh(parseFloat(e.target.value))}
+            className="w-full accent-emerald-600"
+          />
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-juris-vault.ts
+var templateJurisVault = {
+  name: "template-juris-vault",
+  dependencies: ["lucide-react"],
+  fileName: "template-juris-vault.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Scale, FileText, CheckCircle2, AlertTriangle, PenTool } from "lucide-react";
+
+export default function JurisVaultTemplate() {
+  const [signed, setSigned] = useState(false);
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <Scale className="w-5 h-5 text-indigo-600" />
+          <span className="font-bold text-base">JurisVault AI</span>
+        </div>
+        <button
+          onClick={() => setSigned(true)}
+          className="px-3.5 py-1.5 rounded-xl text-xs font-semibold text-white bg-indigo-600 transition-opacity hover:opacity-90"
+        >
+          {signed ? "Executed & Signed" : "Approve & E-Sign"}
+        </button>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="p-6 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <div className="text-xs text-rose-600 font-bold mb-1">CRITICAL RISK \u2022 SEC-8.2</div>
+          <h2 className="text-base font-bold">Limitation of Liability & Consequential Damages</h2>
+          <p className="text-xs opacity-70 mt-2">Counterparty proposes uncapped liability. Recommended: Insert 2x ACV fallback clause.</p>
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-orbitalx-mission.ts
+var templateOrbitalxMission = {
+  name: "template-orbitalx-mission",
+  dependencies: ["lucide-react"],
+  fileName: "template-orbitalx-mission.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Satellite, Radio, Compass, Zap, Terminal } from "lucide-react";
+
+export default function OrbitalXTemplate() {
+  const [armed, setArmed] = useState(false);
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-mono max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b font-sans" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <Satellite className="w-5 h-5 text-blue-600" />
+          <span className="font-bold text-base">OrbitalX Operations</span>
+        </div>
+        <span className="text-xs font-mono text-emerald-500 font-bold">AOS in 04m 12s</span>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="p-6 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <div className="text-xs opacity-60">ORBITAL VELOCITY: 7.58 km/s \u2022 LEO 545 km</div>
+          <h2 className="text-base font-bold font-sans mt-1">AstraConstellation-07 (NORAD 58210)</h2>
+          <p className="text-xs opacity-75 mt-2">Propellant: 78.4% Hydrazine \u2022 Solar: 1,420 W Nominal</p>
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-cineboard-studio.ts
+var templateCineboardStudio = {
+  name: "template-cineboard-studio",
+  dependencies: ["lucide-react"],
+  fileName: "template-cineboard-studio.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Clapperboard, Film, Camera, Video } from "lucide-react";
+
+export default function CineBoardTemplate() {
+  const [ratio, setRatio] = useState("2.39:1");
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <Clapperboard className="w-5 h-5 text-rose-600" />
+          <span className="font-bold text-base">CineBoard Studio</span>
+        </div>
+        <div className="text-xs font-mono font-bold bg-rose-600/10 text-rose-600 px-2 py-1 rounded">
+          Framing: {ratio}
+        </div>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="p-6 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <h2 className="text-base font-bold">SCENE 14A \u2022 SHOT 01 (EXT. HIGHWAY DUSK)</h2>
+          <p className="text-xs opacity-75 mt-1">Cooke Anamorphic 40mm T2.3 \u2022 Drone Push-In (3.2m/s)</p>
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-domus-living.ts
+var templateDomusLiving = {
+  name: "template-domus-living",
+  dependencies: ["lucide-react"],
+  fileName: "template-domus-living.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Home, Thermometer, Sun, Zap, ShieldCheck } from "lucide-react";
+
+export default function DomusLivingTemplate() {
+  const [temp, setTemp] = useState(21.5);
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <Home className="w-5 h-5 text-emerald-600" />
+          <span className="font-bold text-base">Domus Living</span>
+        </div>
+        <span className="text-xs font-semibold text-emerald-600">Perimeter Armed</span>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="p-6 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <h3 className="font-bold text-sm mb-2">Living Pavilion Climate: {temp}\xB0C</h3>
+          <input
+            type="range"
+            min="18.0"
+            max="26.0"
+            step="0.5"
+            value={temp}
+            onChange={(e) => setTemp(parseFloat(e.target.value))}
+            className="w-full accent-emerald-600"
+          />
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-hyperion-ev.ts
+var templateHyperionEv = {
+  name: "template-hyperion-ev",
+  dependencies: ["lucide-react"],
+  fileName: "template-hyperion-ev.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Car, BatteryCharging, Zap, Gauge } from "lucide-react";
+
+export default function HyperionEvTemplate() {
+  const [soc, setSoc] = useState(74);
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <Car className="w-5 h-5 text-cyan-600" />
+          <span className="font-bold text-base">Hyperion Fleet EV</span>
+        </div>
+        <span className="text-xs font-mono font-bold text-cyan-600">{soc}% SoC</span>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="p-6 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <h2 className="text-base font-bold">Hyperion Freight Hauler Max (CA-941-EV)</h2>
+          <p className="text-xs opacity-75 mt-1">Usable Capacity: 210 kWh / 280 kWh \u2022 780V Architecture</p>
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-sovereign-auctions.ts
+var templateSovereignAuctions = {
+  name: "template-sovereign-auctions",
+  dependencies: ["lucide-react"],
+  fileName: "template-sovereign-auctions.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Gavel, ShieldCheck, DollarSign, Award } from "lucide-react";
+
+export default function SovereignAuctionsTemplate() {
+  const [bid, setBid] = useState(2450000);
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <Gavel className="w-5 h-5 text-amber-600" />
+          <span className="font-bold text-base">Sovereign Auctions</span>
+        </div>
+        <span className="text-xs font-mono font-bold text-amber-600">\${bid.toLocaleString()}</span>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="p-6 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <div className="text-xs opacity-60">LOT 24 \u2022 EVENING SALE LONDON</div>
+          <h2 className="text-base font-bold mt-1">Composition in Cadmium & Cobalt Resonance, 1988</h2>
+          <button
+            onClick={() => setBid(bid + 50000)}
+            className="mt-4 px-4 py-2 rounded-xl text-xs font-bold text-white bg-amber-600 transition-opacity hover:opacity-90"
+          >
+            Raise Bid +$50,000
+          </button>
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-scholaris-archive.ts
+var templateScholarisArchive = {
+  name: "template-scholaris-archive",
+  dependencies: ["lucide-react"],
+  fileName: "template-scholaris-archive.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { BookOpen, FileText, Download, Award } from "lucide-react";
+
+export default function ScholarisArchiveTemplate() {
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <BookOpen className="w-5 h-5 text-sky-600" />
+          <span className="font-bold text-base">Scholaris Archive</span>
+        </div>
+        <span className="text-xs font-mono text-emerald-600 font-bold">Reproducibility: 9.8/10</span>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="p-6 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <div className="text-xs text-sky-600 font-mono font-bold mb-1">DOI: 10.1038/s41586-026-09214-x</div>
+          <h2 className="text-base font-bold">Sub-Quadratic Attention via Orthogonal State Space Projections</h2>
+          <p className="text-xs opacity-75 mt-2">Dr. Evelyn Zhao (Stanford) \u2022 Prof. Kenneth Sterling (MIT)</p>
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-talentorbit-hr.ts
+var templateTalentorbitHr = {
+  name: "template-talentorbit-hr",
+  dependencies: ["lucide-react"],
+  fileName: "template-talentorbit-hr.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Users, Calendar, Award, MapPin } from "lucide-react";
+
+export default function TalentOrbitTemplate() {
+  const [ptoDays, setPtoDays] = useState(18);
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <Users className="w-5 h-5 text-violet-600" />
+          <span className="font-bold text-base">TalentOrbit HR</span>
+        </div>
+        <span className="text-xs font-semibold text-violet-600">{ptoDays} Days PTO Left</span>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="p-6 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <h2 className="text-base font-bold">Sophia Lindqvist \u2022 VP of Engineering</h2>
+          <p className="text-xs opacity-70 mt-1">Stockholm (UTC+1) \u2022 24 Direct Reports \u2022 Top Performer (9-Box 1A)</p>
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-miseenplace-kds.ts
+var templateMiseenplaceKds = {
+  name: "template-miseenplace-kds",
+  dependencies: ["lucide-react"],
+  fileName: "template-miseenplace-kds.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { UtensilsCrossed, Flame, Clock, Check } from "lucide-react";
+
+export default function MiseEnPlaceTemplate() {
+  const [bumped, setBumped] = useState(false);
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <UtensilsCrossed className="w-5 h-5 text-orange-600" />
+          <span className="font-bold text-base">MiseEnPlace KDS</span>
+        </div>
+        <span className="text-xs font-mono font-bold text-orange-600">3 ACTIVE ORDERS</span>
+      </header>
+
+      <main className="py-8 space-y-6">
+        <div className="p-6 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <div className="text-xs font-mono font-bold text-rose-600 mb-1">TABLE 12 \u2022 04:15 ELAPSED</div>
+          <h2 className="text-base font-bold">2x 45-Day Dry Aged Ribeye (Med-Rare)</h2>
+          <p className="text-xs opacity-75 mt-1">Station: GRILL \u2022 Extra flaky Maldon salt</p>
+          <button
+            onClick={() => setBumped(true)}
+            className="mt-4 px-4 py-2 rounded-xl text-xs font-bold text-white bg-orange-600 transition-opacity hover:opacity-90"
+          >
+            {bumped ? "Order Bumped" : "Bump Order"}
+          </button>
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
+// src/registry/template-aurasolace-sanctuary.ts
+var templateAurasolaceSanctuary = {
+  name: "template-aurasolace-sanctuary",
+  dependencies: ["lucide-react"],
+  fileName: "template-aurasolace-sanctuary.tsx",
+  content: `"use client";
+
+import React, { useState } from "react";
+import { Heart, Wind, Volume2, Sparkles } from "lucide-react";
+
+export default function AuraSolaceTemplate() {
+  const [phase, setPhase] = useState("Inhale (4s)");
+
+  return (
+    <div
+      className="min-h-screen transition-colors text-left p-6 font-sans max-w-5xl mx-auto"
+      style={{
+        backgroundColor: "var(--template-bg, #ffffff)",
+        color: "var(--template-fg, #0f172a)",
+      }}
+    >
+      <header className="flex justify-between items-center pb-6 border-b" style={{ borderColor: "var(--template-border, #e2e8f0)" }}>
+        <div className="flex items-center gap-2">
+          <Heart className="w-5 h-5 text-teal-600" />
+          <span className="font-bold text-base">AuraSolace Sanctuary</span>
+        </div>
+        <span className="text-xs font-semibold text-teal-600">Peaceful Grounded</span>
+      </header>
+
+      <main className="py-8 space-y-6 text-center">
+        <div className="p-8 rounded-2xl border" style={{ backgroundColor: "var(--template-surface, #f8f9fa)", borderColor: "var(--template-border, #e2e8f0)" }}>
+          <div className="w-32 h-32 rounded-full border-2 border-teal-500 mx-auto flex items-center justify-center font-bold text-xs text-teal-600">
+            {phase}
+          </div>
+          <h2 className="text-base font-bold mt-4">Parasympathetic Nervous System Regulation</h2>
+        </div>
+      </main>
+    </div>
+  );
+}`
+};
+
 // src/registry/index.ts
 var registry = {
   button,
@@ -2734,7 +4379,37 @@ var registry = {
   "template-ai-chat": templateAiChat,
   "template-project-management": templateProjectManagement,
   "template-startup-waitlist": templateStartupWaitlist,
-  "template-docs-platform": templateDocsPlatform
+  "template-docs-platform": templateDocsPlatform,
+  "template-healthcare-portal": templateHealthcarePortal,
+  "template-web3-dex": templateWeb3Dex,
+  "template-edtech-learning": templateEdtechLearning,
+  "template-conference-event": templateConferenceEvent,
+  "template-audio-podcast": templateAudioPodcast,
+  "template-real-estate": templateRealEstate,
+  "template-uptime-status": templateUptimeStatus,
+  "template-agent-workflow": templateAgentWorkflow,
+  "template-restaurant-culinary": templateRestaurantCulinary,
+  "template-help-center": templateHelpCenter,
+  "template-fitness-athletics": templateFitnessAthletics,
+  "template-wilderness-travel": templateWildernessTravel,
+  "template-devops-kubernetes": templateDevopsKubernetes,
+  "template-audio-daw": templateAudioDaw,
+  "template-gamified-habits": templateGamifiedHabits,
+  "template-global-logistics": templateGlobalLogistics,
+  "template-gaming-esports": templateGamingEsports,
+  "template-architecture-spatial": templateArchitectureSpatial,
+  "template-cybersecurity-soc": templateCybersecuritySoc,
+  "template-cleantech-agriculture": templateCleantechAgriculture,
+  "template-juris-vault": templateJurisVault,
+  "template-orbitalx-mission": templateOrbitalxMission,
+  "template-cineboard-studio": templateCineboardStudio,
+  "template-domus-living": templateDomusLiving,
+  "template-hyperion-ev": templateHyperionEv,
+  "template-sovereign-auctions": templateSovereignAuctions,
+  "template-scholaris-archive": templateScholarisArchive,
+  "template-talentorbit-hr": templateTalentorbitHr,
+  "template-miseenplace-kds": templateMiseenplaceKds,
+  "template-aurasolace-sanctuary": templateAurasolaceSanctuary
 };
 
 // src/commands/add.ts
@@ -2959,6 +4634,15 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url))
             updated = true;
           }
         }
+        if (!viteContent.includes("@tailwindcss/vite")) {
+          let updatedVite = `import tailwindcss from '@tailwindcss/vite'
+` + viteContent;
+          if (updatedVite.includes("plugins: [")) {
+            updatedVite = updatedVite.replace(/plugins:\s*\[/, "plugins: [tailwindcss(), ");
+            fs4.writeFileSync(vitePath, updatedVite, "utf8");
+            updated = true;
+          }
+        }
         break;
       }
     }
@@ -2977,13 +4661,25 @@ function injectThemeCss(baseDir, cssRelativePath, themeName, radiusValue) {
   --color-foreground: var(--foreground);
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
   --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
   --radius-lg: var(--radius);
   --radius-md: calc(var(--radius) - 2px);
   --radius-sm: calc(var(--radius) - 4px);
-  --font-sans: system-ui, -apple-system, sans-serif;
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
 :root {
@@ -2991,10 +4687,25 @@ function injectThemeCss(baseDir, cssRelativePath, themeName, radiusValue) {
   --foreground: hsl(240 10% 3.9%);
   --card: hsl(0 0% 100%);
   --card-foreground: hsl(240 10% 3.9%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(240 10% 3.9%);
   --primary: ${palette.light};
   --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(240 4.8% 95.9%);
+  --secondary-foreground: hsl(240 5.9% 10%);
+  --muted: hsl(240 4.8% 95.9%);
+  --muted-foreground: hsl(240 3.8% 46.1%);
+  --accent: hsl(240 4.8% 95.9%);
+  --accent-foreground: hsl(240 5.9% 10%);
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(0 0% 98%);
   --border: hsl(240 5.9% 90%);
+  --input: hsl(240 5.9% 90%);
+  --ring: ${palette.light};
   --radius: ${radius}rem;
+  --glow-radius: 12px;
+  --glow-strength: 0.15;
+  --glow-color: ${palette.rgb};
 }
 
 .dark {
@@ -3002,10 +4713,25 @@ function injectThemeCss(baseDir, cssRelativePath, themeName, radiusValue) {
   --foreground: hsl(0 0% 98%);
   --card: hsl(240 10% 3.9%);
   --card-foreground: hsl(0 0% 98%);
+  --popover: hsl(240 10% 3.9%);
+  --popover-foreground: hsl(0 0% 98%);
   --primary: ${palette.dark};
   --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(240 3.7% 15.9%);
+  --secondary-foreground: hsl(0 0% 98%);
+  --muted: hsl(240 3.7% 15.9%);
+  --muted-foreground: hsl(240 5% 64.9%);
+  --accent: hsl(240 3.7% 15.9%);
+  --accent-foreground: hsl(0 0% 98%);
+  --destructive: hsl(0 62.8% 30.6%);
+  --destructive-foreground: hsl(0 0% 98%);
   --border: hsl(240 3.7% 15.9%);
+  --input: hsl(240 3.7% 15.9%);
+  --ring: ${palette.dark};
   --radius: ${radius}rem;
+  --glow-radius: 20px;
+  --glow-strength: 0.35;
+  --glow-color: ${palette.rgb};
 }
 `;
   if (fs4.existsSync(cssAbsolutePath)) {