create-izi-noir 0.2.1 → 0.2.5

package/dist/index.js

@@ -6,7 +6,7 @@ import { Command } from "commander";
 // src/commands/init.ts
 import path2 from "path";
 import { execSync } from "child_process";
-import pc4 from "picocolors";
+import pc3 from "picocolors";
 
 // src/prompts/project.ts
 import prompts from "prompts";
@@ -17,8 +17,7 @@ var TEMPLATES = [
   { title: "Balance Proof only", value: "balance-proof" }
 ];
 var NETWORKS = [
-  { title: "Solana (recommended)", value: "solana", description: "Uses Groth16 for on-chain verification" },
-  { title: "EVM (Ethereum, Base, etc.)", value: "evm", description: "Uses UltraHonk proofs" }
+  { title: "Solana", value: "solana", description: "Uses Groth16 for on-chain verification" }
 ];
 function networkToProvider(network) {
   return network === "solana" ? "arkworks" : "barretenberg";
@@ -117,44 +116,8 @@ async function isDirectoryEmpty(dir) {
   }
 }
 
-// src/utils/spinner.ts
-import pc2 from "picocolors";
-var frames = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
-var Spinner = class {
-  message;
-  interval = null;
-  frameIndex = 0;
-  constructor(message) {
-    this.message = message;
-  }
-  start() {
-    process.stdout.write("\x1B[?25l");
-    this.interval = setInterval(() => {
-      const frame = pc2.cyan(frames[this.frameIndex]);
-      process.stdout.write(`\r${frame} ${this.message}`);
-      this.frameIndex = (this.frameIndex + 1) % frames.length;
-    }, 80);
-  }
-  stop(success = true) {
-    if (this.interval) {
-      clearInterval(this.interval);
-      this.interval = null;
-    }
-    process.stdout.write("\x1B[?25h");
-    const icon = success ? pc2.green("\u2713") : pc2.red("\u2717");
-    process.stdout.write(`\r${icon} ${this.message}
-`);
-  }
-  update(message) {
-    this.message = message;
-  }
-};
-function createSpinner(message) {
-  return new Spinner(message);
-}
-
 // src/utils/progress.ts
-import pc3 from "picocolors";
+import pc2 from "picocolors";
 var THINKING_PHRASES = [
   "Initializing ZK environment",
   "Configuring proof system",
@@ -191,15 +154,15 @@ var ProgressReporter = class {
     this.showThinking();
   }
   showThinking() {
-    const frames2 = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+    const frames = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
     let frameIndex = 0;
     let dotCount = 0;
     this.thinkingInterval = setInterval(() => {
-      const frame = pc3.cyan(frames2[frameIndex]);
+      const frame = pc2.cyan(frames[frameIndex]);
       const phrase = THINKING_PHRASES[this.thinkingIndex % THINKING_PHRASES.length];
       const dots = ".".repeat(dotCount % 4);
-      process.stdout.write(`\r${frame} ${pc3.dim(phrase)}${dots}   `);
-      frameIndex = (frameIndex + 1) % frames2.length;
+      process.stdout.write(`\r${frame} ${pc2.dim(phrase)}${dots}   `);
+      frameIndex = (frameIndex + 1) % frames.length;
       dotCount++;
       if (dotCount % 12 === 0) {
         this.thinkingIndex++;
@@ -215,29 +178,29 @@ var ProgressReporter = class {
   }
   async reportFile(filename, isLast = false) {
     const icon = getFileIcon(filename);
-    const line = `  ${icon} ${pc3.dim("created")} ${pc3.white(filename)}`;
-    process.stdout.write("  " + icon + " " + pc3.dim("created") + " ");
+    const line = `  ${icon} ${pc2.dim("created")} ${pc2.white(filename)}`;
+    process.stdout.write("  " + icon + " " + pc2.dim("created") + " ");
     for (const char of filename) {
-      process.stdout.write(pc3.white(char));
+      process.stdout.write(pc2.white(char));
       await sleep(8 + Math.random() * 12);
     }
     process.stdout.write("\n");
     this.currentLine = line;
   }
   async reportDirectory(dirname) {
-    process.stdout.write(`  \u{1F4C1} ${pc3.dim("mkdir")}   ${pc3.blue(dirname)}/
+    process.stdout.write(`  \u{1F4C1} ${pc2.dim("mkdir")}   ${pc2.blue(dirname)}/
 `);
     await sleep(30);
   }
   showSuccess(message) {
     process.stdout.write("\x1B[?25h");
     console.log();
-    console.log(pc3.green("\u2713") + " " + message);
+    console.log(pc2.green("\u2713") + " " + message);
   }
   showError(message) {
     process.stdout.write("\x1B[?25h");
     console.log();
-    console.log(pc3.red("\u2717") + " " + message);
+    console.log(pc2.red("\u2717") + " " + message);
   }
 };
 function createProgressReporter() {
@@ -260,18 +223,18 @@ var InstallProgress = class {
   start() {
     process.stdout.write("\x1B[?25l");
     const barWidth = 30;
-    const frames2 = ["\u25D0", "\u25D3", "\u25D1", "\u25D2"];
+    const frames = ["\u25D0", "\u25D3", "\u25D1", "\u25D2"];
     let frameIndex = 0;
     this.interval = setInterval(() => {
-      const frame = pc3.cyan(frames2[frameIndex]);
+      const frame = pc2.cyan(frames[frameIndex]);
       const filled = Math.floor(this.progress / 100 * barWidth);
       const empty = barWidth - filled;
-      const bar = pc3.green("\u2588".repeat(filled)) + pc3.dim("\u2591".repeat(empty));
+      const bar = pc2.green("\u2588".repeat(filled)) + pc2.dim("\u2591".repeat(empty));
       const pkg = this.packages[this.currentPackage % this.packages.length];
       process.stdout.write(
-        `\r${frame} Installing dependencies ${bar} ${pc3.dim(pkg)}   `
+        `\r${frame} Installing dependencies ${bar} ${pc2.dim(pkg)}   `
       );
-      frameIndex = (frameIndex + 1) % frames2.length;
+      frameIndex = (frameIndex + 1) % frames.length;
       if (this.progress < 95) {
         this.progress += Math.random() * 3;
         if (this.progress > (this.currentPackage + 1) * 12) {
@@ -287,7 +250,7 @@ var InstallProgress = class {
     }
     process.stdout.write("\x1B[?25h");
     process.stdout.write("\r\x1B[K");
-    const icon = success ? pc3.green("\u2713") : pc3.red("\u2717");
+    const icon = success ? pc2.green("\u2713") : pc2.red("\u2717");
     const message = success ? "Dependencies installed" : "Failed to install dependencies";
     console.log(`${icon} ${message}`);
   }
@@ -295,17 +258,61 @@ var InstallProgress = class {
 function createInstallProgress() {
   return new InstallProgress();
 }
+var GitProgress = class {
+  interval = null;
+  phases = [
+    "Initializing repository",
+    "Setting up version control",
+    "Creating .git directory",
+    "Configuring git objects",
+    "Preparing initial branch"
+  ];
+  phaseIndex = 0;
+  dotCount = 0;
+  start() {
+    process.stdout.write("\x1B[?25l");
+    const frames = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+    let frameIndex = 0;
+    this.interval = setInterval(() => {
+      const frame = pc2.cyan(frames[frameIndex]);
+      const phase = this.phases[this.phaseIndex % this.phases.length];
+      const dots = ".".repeat(this.dotCount % 4);
+      process.stdout.write(`\r${frame} ${pc2.dim(phase)}${dots}   `);
+      frameIndex = (frameIndex + 1) % frames.length;
+      this.dotCount++;
+      if (this.dotCount % 8 === 0) {
+        this.phaseIndex++;
+      }
+    }, 80);
+  }
+  stop(success = true) {
+    if (this.interval) {
+      clearInterval(this.interval);
+      this.interval = null;
+    }
+    process.stdout.write("\x1B[?25h");
+    process.stdout.write("\r\x1B[K");
+    const icon = success ? pc2.green("\u2713") : pc2.red("\u2717");
+    const message = success ? "Git repository initialized" : "Failed to initialize git";
+    console.log(`${icon} ${message}`);
+  }
+};
+function createGitProgress() {
+  return new GitProgress();
+}
 
 // src/generators/package-json.ts
 function generatePackageJson(options) {
   const isSolana = options.provider === "arkworks";
   const dependencies = {
-    "@izi-noir/sdk": "^0.1.4",
+    "@izi-noir/sdk": "^0.1.5",
     "@noir-lang/acvm_js": "1.0.0-beta.13-1d260df.nightly",
     "@noir-lang/noirc_abi": "1.0.0-beta.13-1d260df.nightly",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "prism-react-renderer": "^2.4.1"
+    "prism-react-renderer": "^2.4.1",
+    "buffer": "^6.0.3",
+    "util": "^0.12.5"
   };
   if (isSolana) {
     dependencies["@solana/wallet-adapter-react"] = "^0.15.0";
@@ -592,14 +599,23 @@ export default defineConfig({
     alias: {
       "@": path.resolve(__dirname, "./src"),
       buffer: "buffer/",
+      util: "util/",
     },
   },
   define: {
     "global": "globalThis",
+    "process.env": {},
   },
   optimizeDeps: {
-    exclude: ["@noir-lang/noir_wasm", "@aztec/bb.js", "@izi-noir/sdk"],
-    include: ["buffer"],
+    exclude: [
+      "@noir-lang/noir_wasm",
+      "@noir-lang/noir_js",
+      "@noir-lang/acvm_js",
+      "@noir-lang/noirc_abi",
+      "@aztec/bb.js",
+      "@izi-noir/sdk",
+    ],
+    include: ["buffer", "util"],
   },
   build: {
     rollupOptions: {
@@ -633,6 +649,9 @@ function generateIndexHtml(options) {
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>${options.projectName} - ZK Proof Demo</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>
@@ -765,10 +784,17 @@ import { Chain, Network } from '@izi-noir/sdk';` : "";
                 </div>
 
                 <div className="verify-box">
+                  {publicInputs && (
+                    <div className="public-inputs-display">
+                      <span>Public inputs:</span>
+                      <code>{JSON.stringify(publicInputs)}</code>
+                    </div>
+                  )}
                   <button
                     onClick={handleVerify}
                     disabled={!vkAccount || isVerifying}
                     className="btn btn-primary"
+                    style={{ marginTop: publicInputs ? '0.5rem' : 0 }}
                   >
                     {isVerifying ? 'Verifying...' : verified ? 'Verified!' : 'Verify On-Chain'}
                   </button>
@@ -836,6 +862,7 @@ function App() {
   const [proofTime, setProofTime] = useState<number | null>(null);
   const [proofError, setProofError] = useState<string | null>(null);
   const [localVerified, setLocalVerified] = useState<boolean | null>(null);
+  const [publicInputs, setPublicInputs] = useState<string[] | null>(null);
 
   // IziNoir instance
   const [iziInstance, setIziInstance] = useState<IziNoir | null>(null);
@@ -852,6 +879,7 @@ ${solanaState}
       setProof(null);
       setProofTime(null);
       setLocalVerified(null);
+      setPublicInputs(null);
       setNoirCode(null);
     }
   }, [selectedCircuit]);
@@ -924,6 +952,7 @@ ${solanaState}
       const endTime = performance.now();
       setProof(proofBytes);
       setProofTime(Math.round(endTime - startTime));
+      setPublicInputs(publicInputsHex);
     } catch (error) {
       console.error('Proof generation error:', error);
       setProofError((error as Error).message);
@@ -937,7 +966,7 @@ ${solanaHandlers}
     <div className="app">
       <header>
         <h1>${options.projectName}</h1>
-        <p>Zero-Knowledge Proof Demo</p>
+        <p>Built with IZI-NOIR</p>
       </header>
 
       <main>
@@ -1100,29 +1129,65 @@ function capitalizeFirst(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 function generateAppCss() {
-  return `* {
+  return `/* ================================
+   CSS Variables - IZI-NOIR Theme
+   ================================ */
+:root {
+  --solana-purple: #9945FF;
+  --solana-green: #14F195;
+  --noir-primary: #050505;
+  --noir-elevated: #0A0A0A;
+  --noir-orange: #FF6B35;
+  --izi-cyan: #00D4FF;
+  --text: #ffffff;
+  --text-muted: #888888;
+  --border: rgba(255, 255, 255, 0.1);
+}
+
+/* ================================
+   Reset & Base Styles
+   ================================ */
+* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 
-:root {
-  --purple: #9945FF;
-  --green: #14F195;
-  --bg: #0a0a0a;
-  --bg-elevated: #111111;
-  --border: #222222;
-  --text: #ffffff;
-  --text-muted: #888888;
+html {
+  scroll-behavior: smooth;
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: var(--bg);
+  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background-color: var(--noir-primary);
+  /* Noise texture + radial gradients like the main frontend */
+  background-image:
+    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3E%3C/svg%3E"),
+    radial-gradient(
+      ellipse 60% 40% at 50% 30%,
+      rgba(153, 69, 255, 0.06) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      ellipse 80% 50% at 50% 110%,
+      rgba(20, 241, 149, 0.04) 0%,
+      transparent 40%
+    );
+  background-attachment: fixed;
   color: var(--text);
   line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+  background: rgba(153, 69, 255, 0.3);
+  color: white;
 }
 
+/* ================================
+   Layout
+   ================================ */
 .app {
   min-height: 100vh;
   display: flex;
@@ -1133,11 +1198,14 @@ header {
   padding: 2rem;
   text-align: center;
   border-bottom: 1px solid var(--border);
+  backdrop-filter: blur(8px);
+  background: rgba(0, 0, 0, 0.3);
 }
 
 header h1 {
   font-size: 2rem;
-  background: linear-gradient(90deg, var(--purple), var(--green));
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--solana-purple) 0%, var(--noir-orange) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -1156,34 +1224,51 @@ main {
   width: 100%;
 }
 
+/* ================================
+   Section Cards - Glassmorphism
+   ================================ */
 .section {
   margin-bottom: 2rem;
   padding: 1.5rem;
-  background: var(--bg-elevated);
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(8px);
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: 16px;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.section:hover {
+  border-color: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0 30px rgba(153, 69, 255, 0.1);
 }
 
 .section h2 {
   font-size: 1.25rem;
+  font-weight: 600;
   margin-bottom: 1rem;
   color: var(--text);
 }
 
+/* ================================
+   Form Controls
+   ================================ */
 .select {
   width: 100%;
-  padding: 0.75rem;
-  background: var(--bg);
+  padding: 0.75rem 1rem;
+  background: rgba(0, 0, 0, 0.4);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 12px;
   color: var(--text);
+  font-family: inherit;
   font-size: 1rem;
   cursor: pointer;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 .select:focus {
   outline: none;
-  border-color: var(--purple);
+  border-color: var(--solana-purple);
+  box-shadow: 0 0 20px rgba(153, 69, 255, 0.2);
 }
 
 .inputs-grid {
@@ -1208,71 +1293,93 @@ main {
 
 .input-badge {
   font-size: 0.625rem;
-  padding: 0.125rem 0.375rem;
-  border-radius: 4px;
+  padding: 0.125rem 0.5rem;
+  border-radius: 6px;
   text-transform: uppercase;
   font-weight: 600;
+  letter-spacing: 0.05em;
 }
 
 .input-badge.public {
-  background: var(--green);
-  color: #000;
+  background: rgba(20, 241, 149, 0.2);
+  color: var(--solana-green);
+  border: 1px solid rgba(20, 241, 149, 0.3);
 }
 
 .input-badge.private {
-  background: var(--purple);
-  color: #fff;
+  background: rgba(153, 69, 255, 0.2);
+  color: var(--solana-purple);
+  border: 1px solid rgba(153, 69, 255, 0.3);
 }
 
 .input-group input {
-  padding: 0.75rem;
-  background: var(--bg);
+  padding: 0.75rem 1rem;
+  background: rgba(0, 0, 0, 0.4);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 12px;
   color: var(--text);
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
   font-size: 1rem;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 .input-group input:focus {
   outline: none;
-  border-color: var(--purple);
+  border-color: var(--solana-purple);
+  box-shadow: 0 0 20px rgba(153, 69, 255, 0.2);
 }
 
+/* ================================
+   Buttons - Animated Gradient
+   ================================ */
 .btn {
   padding: 0.75rem 1.5rem;
   font-size: 1rem;
   font-weight: 600;
   border: none;
-  border-radius: 8px;
+  border-radius: 12px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.3s ease;
 }
 
 .btn:disabled {
-  opacity: 0.5;
+  opacity: 0.4;
   cursor: not-allowed;
 }
 
 .btn-primary {
-  background: linear-gradient(90deg, var(--purple), var(--green));
+  background: linear-gradient(
+    90deg,
+    var(--solana-purple) 0%,
+    var(--solana-purple) 50%,
+    var(--solana-green) 100%
+  );
+  background-size: 200% 100%;
+  background-position: 0% 0%;
   color: white;
+  box-shadow: 0 0 20px rgba(153, 69, 255, 0.3);
 }
 
 .btn-primary:hover:not(:disabled) {
+  background-position: 100% 0%;
   transform: translateY(-2px);
-  box-shadow: 0 4px 20px rgba(153, 69, 255, 0.3);
+  box-shadow: 0 0 30px rgba(20, 241, 149, 0.3);
 }
 
 .btn-secondary {
-  background: var(--bg);
+  background: rgba(0, 0, 0, 0.4);
   border: 1px solid var(--border);
   color: var(--text);
 }
 
 .btn-secondary:hover:not(:disabled) {
-  border-color: var(--purple);
+  border-color: var(--solana-purple);
+  box-shadow: 0 0 20px rgba(153, 69, 255, 0.15);
 }
 
+/* ================================
+   Results Grid
+   ================================ */
 .results {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -1280,22 +1387,36 @@ main {
   margin-top: 1rem;
 }
 
+@media (max-width: 640px) {
+  .results {
+    grid-template-columns: 1fr;
+  }
+}
+
 .result-card {
-  padding: 1rem;
-  background: var(--bg);
+  padding: 1.25rem;
+  background: rgba(0, 0, 0, 0.3);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 12px;
   text-align: center;
+  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.result-card:hover {
+  border-color: rgba(255, 255, 255, 0.15);
+  transform: translateY(-4px);
+  box-shadow: 0 0 25px rgba(153, 69, 255, 0.15);
 }
 
 .result-value {
-  font-size: 1.25rem;
-  font-weight: 600;
+  font-size: 1.5rem;
+  font-weight: 700;
+  font-family: 'JetBrains Mono', monospace;
   display: block;
 }
 
 .result-value.success {
-  color: var(--green);
+  color: var(--solana-green);
 }
 
 .result-value.error {
@@ -1306,22 +1427,40 @@ main {
   font-size: 0.75rem;
   color: var(--text-muted);
   text-transform: uppercase;
-  margin-top: 0.25rem;
+  letter-spacing: 0.1em;
+  margin-top: 0.5rem;
   display: block;
 }
 
+/* ================================
+   Messages
+   ================================ */
 .error {
-  color: #ff4444;
+  color: #ff6b6b;
   font-size: 0.875rem;
   margin-top: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: rgba(255, 107, 107, 0.1);
+  border: 1px solid rgba(255, 107, 107, 0.2);
+  border-radius: 8px;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
 }
 
 .success {
-  color: var(--green);
+  color: var(--solana-green);
   font-size: 0.875rem;
   margin-top: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: rgba(20, 241, 149, 0.1);
+  border: 1px solid rgba(20, 241, 149, 0.2);
+  border-radius: 8px;
 }
 
+/* ================================
+   Noir Code Details
+   ================================ */
 .noir-details {
   margin-top: 1rem;
 }
@@ -1330,12 +1469,21 @@ main {
   cursor: pointer;
   color: var(--text-muted);
   font-size: 0.875rem;
+  padding: 0.5rem 0;
+  transition: color 0.3s ease;
 }
 
 .noir-details summary:hover {
-  color: var(--text);
+  color: var(--solana-purple);
 }
 
+.noir-details[open] summary {
+  color: var(--solana-purple);
+}
+
+/* ================================
+   Deploy & Verify Section
+   ================================ */
 .deploy-verify-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -1343,38 +1491,118 @@ main {
   margin-top: 1rem;
 }
 
+@media (max-width: 640px) {
+  .deploy-verify-row {
+    grid-template-columns: 1fr;
+  }
+}
+
 .deploy-box,
 .verify-box {
-  padding: 1rem;
-  background: var(--bg);
+  padding: 1.25rem;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+  word-break: break-word;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.deploy-box:hover,
+.verify-box:hover {
+  border-color: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0 20px rgba(153, 69, 255, 0.1);
+}
+
+.public-inputs-display {
+  margin-top: 0.75rem;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+.public-inputs-display code {
+  display: block;
+  margin-top: 0.5rem;
+  padding: 0.75rem;
+  background: rgba(0, 0, 0, 0.4);
   border: 1px solid var(--border);
   border-radius: 8px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.7rem;
+  overflow-x: auto;
+  max-width: 100%;
 }
 
+/* ================================
+   Footer
+   ================================ */
 footer {
   padding: 1.5rem;
   text-align: center;
   border-top: 1px solid var(--border);
+  backdrop-filter: blur(8px);
+  background: rgba(0, 0, 0, 0.3);
   color: var(--text-muted);
   font-size: 0.875rem;
 }
 
 footer a {
-  color: var(--purple);
+  color: var(--solana-purple);
   text-decoration: none;
+  transition: color 0.3s ease;
 }
 
 footer a:hover {
-  text-decoration: underline;
+  color: var(--solana-green);
+}
+
+/* ================================
+   Custom Scrollbar
+   ================================ */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--noir-primary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 9999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* ================================
+   Accessibility - Reduced Motion
+   ================================ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }
 `;
 }
 function generateIndexCss() {
-  return `body {
+  return `/* Base styles - fonts are loaded in index.html */
+body {
   margin: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+/* Ensure mono font is applied to code elements */
+code, pre, .mono {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+}
 `;
 }
 function generateViteEnvDts() {
@@ -1553,14 +1781,14 @@ async function initCommand(projectName, options) {
     });
   }
   if (!projectOptions) {
-    console.log(pc4.yellow("\nOperation cancelled."));
+    console.log(pc3.yellow("\nOperation cancelled."));
     process.exit(0);
   }
   const projectDir = path2.resolve(process.cwd(), projectOptions.projectName);
   if (await directoryExists(projectDir)) {
     if (!await isDirectoryEmpty(projectDir)) {
       console.log(
-        pc4.red(`
+        pc3.red(`
 Error: Directory "${projectOptions.projectName}" already exists and is not empty.`)
       );
       process.exit(1);
@@ -1572,23 +1800,23 @@ Error: Directory "${projectOptions.projectName}" already exists and is not empty
     await progress.startThinking();
     await new Promise((r) => setTimeout(r, 800));
     progress.stopThinking();
-    console.log(pc4.bold("\n  Scaffolding your ZK project...\n"));
+    console.log(pc3.bold("\n  Scaffolding your ZK project...\n"));
     await createProjectStructure(projectDir, projectOptions, progress);
     progress.showSuccess("Project structure created");
   } catch (error) {
     progress.showError("Failed to create project structure");
-    console.error(pc4.red("\n"), error);
+    console.error(pc3.red("\n"), error);
     process.exit(1);
   }
   if (!projectOptions.skipGit) {
-    const gitSpinner = createSpinner("Initializing git repository...");
-    gitSpinner.start();
+    const gitProgress = createGitProgress();
+    gitProgress.start();
     try {
       execSync("git init", { cwd: projectDir, stdio: "ignore" });
-      gitSpinner.stop(true);
+      gitProgress.stop(true);
     } catch {
-      gitSpinner.stop(false);
-      console.log(pc4.yellow("  Warning: Failed to initialize git repository"));
+      gitProgress.stop(false);
+      console.log(pc3.yellow("  Warning: Failed to initialize git repository"));
     }
   }
   if (!projectOptions.skipInstall) {
@@ -1599,7 +1827,7 @@ Error: Directory "${projectOptions.projectName}" already exists and is not empty
       installProgress.stop(true);
     } catch {
       installProgress.stop(false);
-      console.log(pc4.yellow('  Run "npm install" manually.'));
+      console.log(pc3.yellow('  Run "npm install" manually.'));
     }
   }
   printSuccessMessage(projectOptions);
@@ -1653,26 +1881,26 @@ async function createProjectStructure(projectDir, options, progress) {
 }
 function printSuccessMessage(options) {
   console.log();
-  console.log(pc4.green("\u2713") + " Project created successfully!");
+  console.log(pc3.green("\u2713") + " Project created successfully!");
   console.log();
   console.log("Next steps:");
   console.log();
-  console.log(pc4.cyan(`  cd ${options.projectName}`));
+  console.log(pc3.cyan(`  cd ${options.projectName}`));
   if (options.skipInstall) {
-    console.log(pc4.cyan("  npm install"));
+    console.log(pc3.cyan("  npm install"));
   }
-  console.log(pc4.cyan("  npm run dev"));
+  console.log(pc3.cyan("  npm run dev"));
   console.log();
-  console.log("Then open " + pc4.blue("http://localhost:5173") + " in your browser.");
+  console.log("Then open " + pc3.blue("http://localhost:5173") + " in your browser.");
   console.log();
   console.log("To add circuits:");
   console.log();
-  console.log(pc4.dim("  1. Create a new circuit in circuits/*.ts"));
-  console.log(pc4.dim("  2. Export it from circuits/index.ts"));
-  console.log(pc4.dim("  3. Add it to CIRCUITS array in src/App.tsx"));
+  console.log(pc3.dim("  1. Create a new circuit in circuits/*.ts"));
+  console.log(pc3.dim("  2. Export it from circuits/index.ts"));
+  console.log(pc3.dim("  3. Add it to CIRCUITS array in src/App.tsx"));
   console.log();
   console.log(
-    pc4.dim("Learn more: ") + pc4.blue("https://github.com/izi-noir/izi-noir")
+    pc3.dim("Learn more: ") + pc3.blue("https://github.com/izi-noir/izi-noir")
   );
   console.log();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-izi-noir",
-  "version": "0.2.1",
+  "version": "0.2.5",
   "description": "CLI to scaffold IZI-NOIR ZK projects",
   "type": "module",
   "bin": {