stera-ui 0.1.2 → 0.2.0

package/dist/{chunk-57DNZ2YS.js → chunk-AXIACJ2C.js}

@@ -34,7 +34,11 @@ var configSchema = z.object({
     ui: z.string(),
     lib: z.string(),
     hooks: z.string()
-  })
+  }),
+  fonts: z.object({
+    strategy: z.enum(["stera-default", "keep-existing", "skip"]),
+    nextFont: z.boolean().optional()
+  }).optional()
 });
 
 export {

package/dist/{chunk-PUJGGJCB.js → chunk-MFUZBXO6.js}

@@ -165,7 +165,22 @@ function detectProject(cwd) {
     rsc = fs2.existsSync(path3.join(cwd, appDir));
   }
   const existingCssFile = findTailwindCssFile(cwd);
-  return { hasSrc, framework, rsc, existingCssFile };
+  let layoutFile = null;
+  if (framework === "next") {
+    const appDir = hasSrc ? "src/app" : "app";
+    for (const ext of ["tsx", "jsx", "ts", "js"]) {
+      const candidate = `${appDir}/layout.${ext}`;
+      if (fs2.existsSync(path3.join(cwd, candidate))) {
+        layoutFile = candidate;
+        break;
+      }
+    }
+  } else if (framework === "vite") {
+    if (fs2.existsSync(path3.join(cwd, "index.html"))) {
+      layoutFile = "index.html";
+    }
+  }
+  return { hasSrc, framework, rsc, existingCssFile, layoutFile };
 }
 
 // src/utils/detect-globals.ts
@@ -183,7 +198,8 @@ function hasGlobalsCss(config, projectRoot) {
 // src/utils/install-deps.ts
 import fs4 from "fs";
 import path5 from "path";
-import { spawn } from "child_process";
+import { detect } from "@antfu/ni";
+import { execa } from "execa";
 
 // src/utils/format.ts
 var BRAND = "\x1B[38;2;166;244;48m";
@@ -241,10 +257,16 @@ function createSpinner(text) {
 }
 
 // src/utils/install-deps.ts
-function detectPackageManager(cwd) {
-  if (fs4.existsSync(path5.join(cwd, "pnpm-lock.yaml"))) return "pnpm";
-  if (fs4.existsSync(path5.join(cwd, "bun.lockb"))) return "bun";
-  if (fs4.existsSync(path5.join(cwd, "yarn.lock"))) return "yarn";
+async function detectPackageManager(cwd) {
+  const detected = await detect({ programmatic: true, cwd });
+  if (detected === "pnpm@6" || detected === "pnpm") return "pnpm";
+  if (detected === "yarn@berry" || detected === "yarn") return "yarn";
+  if (detected === "bun") return "bun";
+  if (detected === "npm") return "npm";
+  const userAgent = process.env.npm_config_user_agent || "";
+  if (userAgent.startsWith("pnpm")) return "pnpm";
+  if (userAgent.startsWith("yarn")) return "yarn";
+  if (userAgent.startsWith("bun")) return "bun";
   return "npm";
 }
 function getInstallArgs(pm, deps) {
@@ -272,25 +294,16 @@ async function installDependencies(deps, cwd) {
   }
   const toInstall = deps.filter((dep) => !existing.has(dep));
   if (toInstall.length === 0) return;
-  const pm = detectPackageManager(cwd);
+  const pm = await detectPackageManager(cwd);
   const [cmd, args] = getInstallArgs(pm, toInstall);
   const spinner = createSpinner(`Installing with ${pm}`);
-  await new Promise((resolve, reject) => {
-    const proc = spawn(cmd, args, { cwd, stdio: "pipe" });
-    proc.on("close", (code) => {
-      if (code === 0) {
-        spinner.succeed(`Installed with ${pm}`);
-        resolve();
-      } else {
-        spinner.fail(`Install failed (exit ${code})`);
-        reject(new Error(`${pm} exited with code ${code}`));
-      }
-    });
-    proc.on("error", (err) => {
-      spinner.fail(`Install failed`);
-      reject(err);
-    });
-  });
+  try {
+    await execa(cmd, args, { cwd });
+    spinner.succeed(`Installed with ${pm}`);
+  } catch (error) {
+    spinner.fail(`Install failed`);
+    throw error;
+  }
 }
 
 // src/utils/write-files.ts

package/dist/cli.js

@@ -182,7 +182,8 @@ async function writeComponentFiles(items, config, projectRoot, options = {}) {
 // src/utils/install-deps.ts
 import fs3 from "fs";
 import path4 from "path";
-import { spawn } from "child_process";
+import { detect } from "@antfu/ni";
+import { execa } from "execa";
 
 // src/utils/format.ts
 var BRAND = "\x1B[38;2;166;244;48m";
@@ -240,10 +241,16 @@ function createSpinner(text) {
 }
 
 // src/utils/install-deps.ts
-function detectPackageManager(cwd) {
-  if (fs3.existsSync(path4.join(cwd, "pnpm-lock.yaml"))) return "pnpm";
-  if (fs3.existsSync(path4.join(cwd, "bun.lockb"))) return "bun";
-  if (fs3.existsSync(path4.join(cwd, "yarn.lock"))) return "yarn";
+async function detectPackageManager(cwd) {
+  const detected = await detect({ programmatic: true, cwd });
+  if (detected === "pnpm@6" || detected === "pnpm") return "pnpm";
+  if (detected === "yarn@berry" || detected === "yarn") return "yarn";
+  if (detected === "bun") return "bun";
+  if (detected === "npm") return "npm";
+  const userAgent = process.env.npm_config_user_agent || "";
+  if (userAgent.startsWith("pnpm")) return "pnpm";
+  if (userAgent.startsWith("yarn")) return "yarn";
+  if (userAgent.startsWith("bun")) return "bun";
   return "npm";
 }
 function getInstallArgs(pm, deps) {
@@ -271,25 +278,16 @@ async function installDependencies(deps, cwd) {
   }
   const toInstall = deps.filter((dep) => !existing.has(dep));
   if (toInstall.length === 0) return;
-  const pm = detectPackageManager(cwd);
+  const pm = await detectPackageManager(cwd);
   const [cmd, args] = getInstallArgs(pm, toInstall);
   const spinner = createSpinner(`Installing with ${pm}`);
-  await new Promise((resolve, reject) => {
-    const proc = spawn(cmd, args, { cwd, stdio: "pipe" });
-    proc.on("close", (code) => {
-      if (code === 0) {
-        spinner.succeed(`Installed with ${pm}`);
-        resolve();
-      } else {
-        spinner.fail(`Install failed (exit ${code})`);
-        reject(new Error(`${pm} exited with code ${code}`));
-      }
-    });
-    proc.on("error", (err) => {
-      spinner.fail(`Install failed`);
-      reject(err);
-    });
-  });
+  try {
+    await execa(cmd, args, { cwd });
+    spinner.succeed(`Installed with ${pm}`);
+  } catch (error) {
+    spinner.fail(`Install failed`);
+    throw error;
+  }
 }
 
 // src/utils/transform.ts
@@ -446,8 +444,9 @@ async function add(components, options) {
 }
 
 // src/commands/init.ts
-import fs6 from "fs";
-import path8 from "path";
+import fs11 from "fs";
+import path12 from "path";
+import { select, confirm } from "@inquirer/prompts";
 
 // src/utils/detect-project.ts
 import fs5 from "fs";
@@ -488,11 +487,375 @@ function detectProject(cwd) {
     rsc = fs5.existsSync(path7.join(cwd, appDir));
   }
   const existingCssFile = findTailwindCssFile(cwd);
-  return { hasSrc, framework, rsc, existingCssFile };
+  let layoutFile = null;
+  if (framework === "next") {
+    const appDir = hasSrc ? "src/app" : "app";
+    for (const ext of ["tsx", "jsx", "ts", "js"]) {
+      const candidate = `${appDir}/layout.${ext}`;
+      if (fs5.existsSync(path7.join(cwd, candidate))) {
+        layoutFile = candidate;
+        break;
+      }
+    }
+  } else if (framework === "vite") {
+    if (fs5.existsSync(path7.join(cwd, "index.html"))) {
+      layoutFile = "index.html";
+    }
+  }
+  return { hasSrc, framework, rsc, existingCssFile, layoutFile };
+}
+
+// src/utils/detect-fonts.ts
+import fs6 from "fs";
+import path8 from "path";
+function readIfExists(filePath) {
+  try {
+    return fs6.readFileSync(filePath, "utf-8");
+  } catch {
+    return null;
+  }
+}
+function detectNextFont(layoutContent) {
+  const hasNextFont = /import.*from\s+['"]next\/font/.test(layoutContent) || /import.*from\s+['"]@next\/font/.test(layoutContent) || /import.*from\s+['"]geist\/font/.test(layoutContent);
+  let nextFontVariable = null;
+  const varMatch = layoutContent.match(/variable:\s*['"](--.+?)['"]/);
+  if (varMatch) {
+    nextFontVariable = varMatch[1];
+  }
+  return { hasNextFont, nextFontVariable };
+}
+function detectFontFace(cssContent) {
+  const hasFontFace = /@font-face\s*\{/.test(cssContent);
+  const fontFamilies = [];
+  const regex = /font-family:\s*['"]?([^'";}\n]+?)['"]?\s*;/g;
+  let match;
+  while ((match = regex.exec(cssContent)) !== null) {
+    const family = match[1].trim();
+    if (family && !fontFamilies.includes(family)) {
+      fontFamilies.push(family);
+    }
+  }
+  return { hasFontFace, fontFamilies };
+}
+function detectGoogleFonts(content) {
+  return content.includes("fonts.googleapis.com") || content.includes("fonts.gstatic.com");
+}
+function detectFonts(cwd, project) {
+  const result = {
+    hasNextFont: false,
+    hasFontFace: false,
+    hasGoogleFontsLink: false,
+    fontFamilies: [],
+    nextFontVariable: null
+  };
+  if (project.layoutFile) {
+    const layoutContent = readIfExists(path8.join(cwd, project.layoutFile));
+    if (layoutContent) {
+      const nextFontResult = detectNextFont(layoutContent);
+      result.hasNextFont = nextFontResult.hasNextFont;
+      result.nextFontVariable = nextFontResult.nextFontVariable;
+      if (detectGoogleFonts(layoutContent)) {
+        result.hasGoogleFontsLink = true;
+      }
+    }
+  }
+  if (project.existingCssFile) {
+    const cssContent = readIfExists(path8.join(cwd, project.existingCssFile));
+    if (cssContent) {
+      const fontFaceResult = detectFontFace(cssContent);
+      result.hasFontFace = fontFaceResult.hasFontFace;
+      result.fontFamilies.push(...fontFaceResult.fontFamilies);
+      if (detectGoogleFonts(cssContent)) {
+        result.hasGoogleFontsLink = true;
+      }
+      const importRegex = /@import\s+['"](.+?)['"]/g;
+      let importMatch;
+      while ((importMatch = importRegex.exec(cssContent)) !== null) {
+        const importPath = importMatch[1];
+        const resolvedPath = path8.join(
+          cwd,
+          path8.dirname(project.existingCssFile),
+          importPath
+        );
+        const importedContent = readIfExists(resolvedPath);
+        if (importedContent) {
+          const imported = detectFontFace(importedContent);
+          if (imported.hasFontFace) result.hasFontFace = true;
+          for (const family of imported.fontFamilies) {
+            if (!result.fontFamilies.includes(family)) {
+              result.fontFamilies.push(family);
+            }
+          }
+        }
+      }
+    }
+  }
+  for (const htmlFile of ["index.html", "src/index.html"]) {
+    const htmlContent = readIfExists(path8.join(cwd, htmlFile));
+    if (htmlContent && detectGoogleFonts(htmlContent)) {
+      result.hasGoogleFontsLink = true;
+    }
+  }
+  return result;
+}
+
+// src/utils/patch-css-vars.ts
+import fs7 from "fs";
+function patchCssVariables(filePath, patches) {
+  const content = fs7.readFileSync(filePath, "utf-8");
+  const lines = content.split("\n");
+  const patched = [];
+  for (let i = 0; i < lines.length; i++) {
+    for (const [prop, newValue] of Object.entries(patches)) {
+      const regex = new RegExp(`(\\s*${escapeRegex(prop)}:\\s*).+?(;)`);
+      if (regex.test(lines[i])) {
+        lines[i] = lines[i].replace(regex, `$1${newValue}$2`);
+        if (!patched.includes(prop)) patched.push(prop);
+      }
+    }
+  }
+  if (patched.length > 0) {
+    fs7.writeFileSync(filePath, lines.join("\n"), "utf-8");
+  }
+  return patched;
+}
+function removeCssImport(filePath, importPath) {
+  const content = fs7.readFileSync(filePath, "utf-8");
+  const pattern = new RegExp(
+    `@import\\s+['"]${escapeRegex(importPath)}['"]\\s*;?\\n?`
+  );
+  if (!pattern.test(content)) return false;
+  fs7.writeFileSync(filePath, content.replace(pattern, ""), "utf-8");
+  return true;
+}
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+// src/utils/setup-fonts-generic.ts
+import fs9 from "fs";
+import path10 from "path";
+
+// src/utils/copy-fonts.ts
+import fs8 from "fs";
+import path9 from "path";
+import { createRequire } from "module";
+var FONT_FILES = [
+  {
+    src: "geist-sans/Geist-Variable.woff2",
+    dest: "geist/Geist-Variable.woff2"
+  },
+  {
+    src: "geist-sans/Geist-Italic[wght].woff2",
+    dest: "geist/Geist-Italic.woff2"
+  },
+  {
+    src: "geist-mono/GeistMono-Variable.woff2",
+    dest: "geist-mono/GeistMono-Variable.woff2"
+  },
+  {
+    src: "geist-mono/GeistMono-Italic[wght].woff2",
+    dest: "geist-mono/GeistMono-Italic.woff2"
+  }
+];
+function resolveGeistFontsDir(cwd) {
+  const require2 = createRequire(path9.join(cwd, "package.json"));
+  const geistEntry = require2.resolve("geist/font/sans");
+  const distDir = path9.dirname(geistEntry);
+  return path9.join(distDir, "fonts");
+}
+function copyFonts(cwd) {
+  const spinner = createSpinner("Copying font files");
+  const fontsDir = resolveGeistFontsDir(cwd);
+  const publicFontsDir = path9.join(cwd, "public", "fonts");
+  const written = [];
+  for (const file of FONT_FILES) {
+    const srcPath = path9.join(fontsDir, file.src);
+    const destPath = path9.join(publicFontsDir, file.dest);
+    if (fs8.existsSync(destPath)) continue;
+    if (!fs8.existsSync(srcPath)) {
+      spinner.fail(`Font file not found: ${file.src}`);
+      throw new Error(
+        `Could not find ${srcPath}. Is the geist package installed?`
+      );
+    }
+    fs8.mkdirSync(path9.dirname(destPath), { recursive: true });
+    fs8.copyFileSync(srcPath, destPath);
+    written.push(path9.relative(cwd, destPath));
+  }
+  if (written.length > 0) {
+    spinner.succeed(`Copied ${written.length} font files to public/fonts/`);
+  } else {
+    spinner.succeed("Font files already exist");
+  }
+  return written;
+}
+
+// src/utils/setup-fonts-generic.ts
+var FONTS_CSS_CONTENT = `/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+   Stera UI font registry
+   To add a font:
+     1. Drop .woff2 file(s) into public/fonts/{family-name}/
+     2. Add an @font-face block below
+     3. Add a --font-* variable in globals.css
+\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/* \u2500\u2500\u2500 Geist Sans \u2500\u2500\u2500 */
+@font-face {
+  font-family: 'Geist';
+  src: url('/fonts/geist/Geist-Variable.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Geist';
+  src: url('/fonts/geist/Geist-Italic.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* \u2500\u2500\u2500 Geist Mono \u2500\u2500\u2500 */
+@font-face {
+  font-family: 'Geist Mono';
+  src: url('/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Geist Mono';
+  src: url('/fonts/geist-mono/GeistMono-Italic.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}
+`;
+var PRELOAD_TAGS = `<link rel="preload" href="/fonts/geist/Geist-Variable.woff2" as="font" type="font/woff2" crossorigin />
+<link rel="preload" href="/fonts/geist-mono/GeistMono-Variable.woff2" as="font" type="font/woff2" crossorigin />`;
+function setupFontsGeneric(cwd, cssDir) {
+  copyFonts(cwd);
+  const fontsPath = path10.join(cssDir, "fonts.css");
+  if (!fs9.existsSync(fontsPath)) {
+    fs9.mkdirSync(path10.dirname(fontsPath), { recursive: true });
+    fs9.writeFileSync(fontsPath, FONTS_CSS_CONTENT, "utf-8");
+    console.log(`  ${CHECK}  Created ${path10.relative(cwd, fontsPath)}`);
+  } else {
+    console.log(`  ${dim(path10.relative(cwd, fontsPath) + " (already exists, skipped)")}`);
+  }
+  return { preloadTags: PRELOAD_TAGS };
+}
+
+// src/utils/setup-fonts-nextjs.ts
+import fs10 from "fs";
+import path11 from "path";
+var GEIST_IMPORTS = `import { GeistSans } from "geist/font/sans"
+import { GeistMono } from "geist/font/mono"`;
+function canPatchLayout(content) {
+  if (!/<html[\s>]/.test(content)) return false;
+  if ((content.match(/<html[\s>]/g) || []).length > 1) return false;
+  return true;
+}
+function insertImports(content, imports) {
+  const lines = content.split("\n");
+  let lastImportIndex = -1;
+  for (let i = 0; i < lines.length; i++) {
+    const trimmed = lines[i].trim();
+    if (trimmed.startsWith("import ") || trimmed.startsWith("import{") || trimmed.startsWith("import	")) {
+      lastImportIndex = i;
+    }
+  }
+  if (lastImportIndex >= 0) {
+    lines.splice(lastImportIndex + 1, 0, imports);
+  } else {
+    lines.unshift(imports);
+  }
+  return lines.join("\n");
+}
+function addClassNameToHtml(content) {
+  const fontClasses = "${GeistSans.variable} ${GeistMono.variable}";
+  const templateMatch = content.match(
+    /(<html[^>]*className=\{`)(.*?)(`\})/s
+  );
+  if (templateMatch) {
+    const existing = templateMatch[2].trim();
+    const newClassName = existing ? `${existing} ${fontClasses}` : fontClasses;
+    return content.replace(
+      templateMatch[0],
+      `${templateMatch[1]}${newClassName}${templateMatch[3]}`
+    );
+  }
+  const exprMatch = content.match(
+    /(<html[^>]*className=\{)([^}`]+)(\})/
+  );
+  if (exprMatch) {
+    return content.replace(
+      exprMatch[0],
+      `${exprMatch[1]}\`\${${exprMatch[2].trim()}} ${fontClasses}\`${exprMatch[3]}`
+    );
+  }
+  const stringMatch = content.match(
+    /(<html[^>]*className=)(["'])([^"']*)(["'])/
+  );
+  if (stringMatch) {
+    const existing = stringMatch[3].trim();
+    const newClassName = existing ? `${existing} ${fontClasses}` : fontClasses;
+    return content.replace(
+      stringMatch[0],
+      `${stringMatch[1]}{\`${newClassName}\`}`
+    );
+  }
+  return content.replace(
+    /<html(\s)/,
+    `<html className={\`${fontClasses}\`}$1`
+  );
+}
+function generateSnippet() {
+  return `
+  Add these imports to your root layout file:
+
+    ${dim(GEIST_IMPORTS)}
+
+  Then add the font variables to your <html> tag:
+
+    ${dim("<html className={`${GeistSans.variable} ${GeistMono.variable}`}>")}
+`;
+}
+function setupFontsNextjs(cwd, layoutFile, cssFile) {
+  const layoutPath = path11.join(cwd, layoutFile);
+  const cssPath = path11.join(cwd, cssFile);
+  let layoutContent = fs10.readFileSync(layoutPath, "utf-8");
+  if (layoutContent.includes("geist/font/sans") || layoutContent.includes("GeistSans")) {
+    console.log(`  ${dim("geist/font already configured in " + layoutFile)}`);
+    return true;
+  }
+  if (!canPatchLayout(layoutContent)) {
+    console.log(`  ${WARN}  Could not auto-patch ${layoutFile}`);
+    console.log(generateSnippet());
+    return false;
+  }
+  layoutContent = insertImports(layoutContent, GEIST_IMPORTS);
+  layoutContent = addClassNameToHtml(layoutContent);
+  fs10.writeFileSync(layoutPath, layoutContent, "utf-8");
+  console.log(`  ${CHECK}  Updated ${layoutFile} with geist/font imports`);
+  if (fs10.existsSync(cssPath)) {
+    const patched = patchCssVariables(cssPath, {
+      "--font-display": "var(--font-geist-sans)",
+      "--font-body": "var(--font-geist-sans)"
+    });
+    if (patched.length > 0) {
+      console.log(`  ${CHECK}  Updated font variables in ${path11.relative(cwd, cssPath)}`);
+    }
+    removeCssImport(cssPath, "./fonts.css");
+  }
+  return true;
 }
 
 // src/commands/init.ts
-function buildConfig(project) {
+function buildConfig(project, fontChoice) {
   let cssPath;
   if (project.existingCssFile) {
     cssPath = project.existingCssFile;
@@ -511,6 +874,10 @@ function buildConfig(project) {
       ui: "@/components/ui",
       lib: "@/lib",
       hooks: "@/hooks"
+    },
+    fonts: {
+      strategy: fontChoice.strategy,
+      ...fontChoice.useNextFont ? { nextFont: true } : {}
     }
   };
 }
@@ -518,7 +885,7 @@ function stripTailwindCoreImport(content) {
   return content.split("\n").filter((line) => !line.trim().match(/^@import\s+["']tailwindcss["']/)).join("\n");
 }
 function insertImportLine(filePath, importStatement) {
-  const content = fs6.readFileSync(filePath, "utf-8");
+  const content = fs11.readFileSync(filePath, "utf-8");
   const lines = content.split("\n");
   let lastImportIndex = -1;
   for (let i = 0; i < lines.length; i++) {
@@ -531,10 +898,100 @@ function insertImportLine(filePath, importStatement) {
   } else {
     lines.unshift(importStatement);
   }
-  fs6.writeFileSync(filePath, lines.join("\n"), "utf-8");
+  fs11.writeFileSync(filePath, lines.join("\n"), "utf-8");
+}
+async function promptFontChoice(project, detected, skipPrompts) {
+  const hasExistingFonts = detected.hasNextFont || detected.hasFontFace || detected.hasGoogleFontsLink;
+  const defaultStrategy = hasExistingFonts ? "keep-existing" : "stera-default";
+  if (skipPrompts) {
+    return {
+      strategy: defaultStrategy,
+      useNextFont: project.framework === "next" && defaultStrategy === "stera-default"
+    };
+  }
+  if (hasExistingFonts) {
+    const sources = [];
+    if (detected.fontFamilies.length > 0) {
+      sources.push(detected.fontFamilies.join(", "));
+    }
+    if (detected.hasNextFont) sources.push("next/font");
+    if (detected.hasGoogleFontsLink) sources.push("Google Fonts");
+    console.log(`  Detected existing fonts: ${sources.join(" via ")}
+`);
+  }
+  const choices = [];
+  if (hasExistingFonts) {
+    choices.push({
+      value: "keep-existing",
+      name: "Keep my current fonts",
+      description: "Update CSS variables to use your existing fonts"
+    });
+  }
+  choices.push({
+    value: "stera-default",
+    name: "Use Stera UI default fonts (Geist Sans + Geist Mono)",
+    description: "Self-hosted, optimized variable fonts"
+  });
+  choices.push({
+    value: "skip",
+    name: "Skip font setup",
+    description: "Configure fonts manually later"
+  });
+  const strategy = await select({
+    message: "How would you like to set up fonts?",
+    choices,
+    default: defaultStrategy
+  });
+  let useNextFont = false;
+  if (project.framework === "next" && strategy === "stera-default") {
+    useNextFont = await confirm({
+      message: "Use next/font for automatic optimization? (recommended)",
+      default: true
+    });
+  }
+  console.log("");
+  return { strategy, useNextFont };
+}
+async function executeFontStrategy(fontChoice, project, detected, config, cwd) {
+  const cssDir = path12.dirname(path12.resolve(cwd, config.css));
+  const cssPath = path12.resolve(cwd, config.css);
+  if (fontChoice.strategy === "skip") {
+    return {};
+  }
+  if (fontChoice.strategy === "keep-existing") {
+    if (fs11.existsSync(cssPath)) {
+      const fontFamily = detected.fontFamilies.length > 0 ? detected.fontFamilies[0] : null;
+      const fontValue = detected.nextFontVariable ? `var(${detected.nextFontVariable})` : fontFamily ?? "Geist";
+      const patched = patchCssVariables(cssPath, {
+        "--font-display": fontValue,
+        "--font-body": fontValue
+      });
+      const steraUiPath = path12.join(cssDir, "stera-ui.css");
+      if (fs11.existsSync(steraUiPath)) {
+        patchCssVariables(steraUiPath, {
+          "--font-display": fontValue,
+          "--font-body": fontValue
+        });
+      }
+      if (patched.length > 0) {
+        console.log(`  ${CHECK}  Updated font variables to use ${fontValue}`);
+      }
+    }
+    return {};
+  }
+  if (fontChoice.useNextFont && project.layoutFile) {
+    await installDependencies(["geist"], cwd);
+    const targetCss = fs11.existsSync(path12.join(cssDir, "stera-ui.css")) ? path12.join(cssDir, "stera-ui.css") : cssPath;
+    setupFontsNextjs(cwd, project.layoutFile, targetCss);
+    return {};
+  } else {
+    await installDependencies(["geist"], cwd);
+    const result = setupFontsGeneric(cwd, cssDir);
+    return { preloadTags: result.preloadTags };
+  }
 }
 async function init(options) {
-  const cwd = options.cwd ? path8.resolve(options.cwd) : process.cwd();
+  const cwd = options.cwd ? path12.resolve(options.cwd) : process.cwd();
   console.log(`
   ${LOGO}  Stera UI
 `);
@@ -544,8 +1001,8 @@ async function init(options) {
     console.log('  Run "stera-ui add <component>" to add components.\n');
     return;
   }
-  const pkgPath = path8.join(cwd, "package.json");
-  if (!fs6.existsSync(pkgPath)) {
+  const pkgPath = path12.join(cwd, "package.json");
+  if (!fs11.existsSync(pkgPath)) {
     console.error(
       "  Error: No package.json found. Please run this in a project directory."
     );
@@ -560,47 +1017,41 @@ async function init(options) {
     console.log(`  Detected ${parts.join(" project with ")} project
 `);
   }
-  const config = buildConfig(project);
-  const configPath = path8.join(cwd, CONFIG_FILE);
-  fs6.writeFileSync(
+  const detectedFonts = detectFonts(cwd, project);
+  const fontChoice = await promptFontChoice(
+    project,
+    detectedFonts,
+    options.yes ?? false
+  );
+  const config = buildConfig(project, fontChoice);
+  const configPath = path12.join(cwd, CONFIG_FILE);
+  fs11.writeFileSync(
     configPath,
     JSON.stringify(config, null, 2) + "\n",
     "utf-8"
   );
   console.log(`  ${CHECK}  Created components.json`);
-  const cssDir = path8.dirname(path8.resolve(cwd, config.css));
+  const cssDir = path12.dirname(path12.resolve(cwd, config.css));
   if (project.existingCssFile) {
     if (hasGlobalsCss(config, cwd)) {
       console.log(
-        `  ${CHECK}  Stera already initialised ${dim(`(${path8.join(path8.dirname(project.existingCssFile), "stera-ui.css")} exists)`)}`
+        `  ${CHECK}  Stera already initialised ${dim(`(${path12.join(path12.dirname(project.existingCssFile), "stera-ui.css")} exists)`)}`
       );
     } else {
       try {
         const globalsItem = await fetchRegistryItem("globals");
         const globalsContent = globalsItem.files[0].content ?? "";
         const steraUiContent = stripTailwindCoreImport(globalsContent);
-        const steraUiPath = path8.join(cssDir, "stera-ui.css");
-        fs6.mkdirSync(cssDir, { recursive: true });
-        fs6.writeFileSync(steraUiPath, steraUiContent, "utf-8");
-        console.log(`  ${CHECK}  Created ${path8.relative(cwd, steraUiPath)}`);
-        const existingCssPath = path8.resolve(cwd, project.existingCssFile);
+        const steraUiPath = path12.join(cssDir, "stera-ui.css");
+        fs11.mkdirSync(cssDir, { recursive: true });
+        fs11.writeFileSync(steraUiPath, steraUiContent, "utf-8");
+        console.log(`  ${CHECK}  Created ${path12.relative(cwd, steraUiPath)}`);
+        const existingCssPath = path12.resolve(cwd, project.existingCssFile);
         insertImportLine(existingCssPath, "@import './stera-ui.css';");
         console.log(`  ${CHECK}  Added @import to ${project.existingCssFile}`);
       } catch {
       }
     }
-    try {
-      const fontsItem = await fetchRegistryItem("fonts");
-      const fontsPath = path8.join(cssDir, "fonts.css");
-      fs6.mkdirSync(path8.dirname(fontsPath), { recursive: true });
-      if (!fs6.existsSync(fontsPath)) {
-        fs6.writeFileSync(fontsPath, fontsItem.files[0].content ?? "", "utf-8");
-        console.log(`  ${CHECK}  Created ${path8.relative(cwd, fontsPath)}`);
-      } else {
-        console.log(`  ${dim(path8.relative(cwd, fontsPath) + " (already exists, skipped)")}`);
-      }
-    } catch {
-    }
   } else {
     const resolved = await resolveDependencies(["globals"]);
     const { written } = await writeComponentFiles(resolved, config, cwd);
@@ -608,6 +1059,13 @@ async function init(options) {
       console.log(`  ${CHECK}  Created ${file}`);
     }
   }
+  const fontResult = await executeFontStrategy(
+    fontChoice,
+    project,
+    detectedFonts,
+    config,
+    cwd
+  );
   try {
     const globalsItem = await fetchRegistryItem("globals");
     if (globalsItem.dependencies) {
@@ -620,8 +1078,18 @@ async function init(options) {
   console.log("");
   console.log("  Next steps:");
   console.log("    stera-ui add <component>");
-  console.log("");
-  console.log(`  ${dim("See the README for font setup instructions.")}`);
+  if (fontResult.preloadTags) {
+    console.log("");
+    console.log(`  ${dim("For optimal font loading, add these to your HTML <head>:")}`);
+    console.log("");
+    for (const line of fontResult.preloadTags.split("\n")) {
+      console.log(`    ${dim(line)}`);
+    }
+  }
+  if (fontChoice.strategy === "skip") {
+    console.log("");
+    console.log(`  ${dim("Font setup was skipped. See https://ui.stera.sh for font configuration docs.")}`);
+  }
   console.log("");
 }
 

package/dist/index.js

@@ -11,7 +11,7 @@ import {
   registryItemFileSchema,
   registryItemSchema,
   registryItemTypeSchema
-} from "./chunk-57DNZ2YS.js";
+} from "./chunk-AXIACJ2C.js";
 import {
   CHECK,
   CONFIG_FILE,
@@ -31,7 +31,7 @@ import {
   resolveOutputPath,
   transformImports,
   writeComponentFiles
-} from "./chunk-PUJGGJCB.js";
+} from "./chunk-MFUZBXO6.js";
 export {
   CHECK,
   CONFIG_FILE,

package/dist/schema/index.d.ts

@@ -8,13 +8,13 @@ declare const registryItemFileSchema: z.ZodObject<{
     content: z.ZodOptional<z.ZodString>;
     target: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
-    path: string;
     type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
+    path: string;
     content?: string | undefined;
     target?: string | undefined;
 }, {
-    path: string;
     type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
+    path: string;
     content?: string | undefined;
     target?: string | undefined;
 }>;
@@ -30,33 +30,33 @@ declare const registryItemSchema: z.ZodObject<{
         content: z.ZodOptional<z.ZodString>;
         target: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
-        path: string;
         type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
+        path: string;
         content?: string | undefined;
         target?: string | undefined;
     }, {
-        path: string;
         type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
+        path: string;
         content?: string | undefined;
         target?: string | undefined;
     }>, "many">;
 }, "strip", z.ZodTypeAny, {
-    type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
     name: string;
+    type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
     files: {
-        path: string;
         type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
+        path: string;
         content?: string | undefined;
         target?: string | undefined;
     }[];
     dependencies?: string[] | undefined;
     registryDependencies?: string[] | undefined;
 }, {
-    type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
     name: string;
+    type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
     files: {
-        path: string;
         type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
+        path: string;
         content?: string | undefined;
         target?: string | undefined;
     }[];
@@ -77,33 +77,33 @@ declare const registryIndexSchema: z.ZodObject<{
             content: z.ZodOptional<z.ZodString>;
             target: z.ZodOptional<z.ZodString>;
         }, "strip", z.ZodTypeAny, {
-            path: string;
             type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
+            path: string;
             content?: string | undefined;
             target?: string | undefined;
         }, {
-            path: string;
             type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
+            path: string;
             content?: string | undefined;
             target?: string | undefined;
         }>, "many">;
     }, "strip", z.ZodTypeAny, {
-        type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
         name: string;
+        type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
         files: {
-            path: string;
             type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
+            path: string;
             content?: string | undefined;
             target?: string | undefined;
         }[];
         dependencies?: string[] | undefined;
         registryDependencies?: string[] | undefined;
     }, {
-        type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
         name: string;
+        type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
         files: {
-            path: string;
             type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
+            path: string;
             content?: string | undefined;
             target?: string | undefined;
         }[];
@@ -113,11 +113,11 @@ declare const registryIndexSchema: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     name: string;
     items: {
-        type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
         name: string;
+        type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
         files: {
-            path: string;
             type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
+            path: string;
             content?: string | undefined;
             target?: string | undefined;
         }[];
@@ -127,11 +127,11 @@ declare const registryIndexSchema: z.ZodObject<{
 }, {
     name: string;
     items: {
-        type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
         name: string;
+        type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
         files: {
-            path: string;
             type: "registry:ui" | "registry:component" | "registry:hook" | "registry:lib" | "registry:style";
+            path: string;
             content?: string | undefined;
             target?: string | undefined;
         }[];
@@ -163,6 +163,16 @@ declare const configSchema: z.ZodObject<{
         lib: string;
         hooks: string;
     }>;
+    fonts: z.ZodOptional<z.ZodObject<{
+        strategy: z.ZodEnum<["stera-default", "keep-existing", "skip"]>;
+        nextFont: z.ZodOptional<z.ZodBoolean>;
+    }, "strip", z.ZodTypeAny, {
+        strategy: "stera-default" | "keep-existing" | "skip";
+        nextFont?: boolean | undefined;
+    }, {
+        strategy: "stera-default" | "keep-existing" | "skip";
+        nextFont?: boolean | undefined;
+    }>>;
 }, "strip", z.ZodTypeAny, {
     version: 1;
     css: string;
@@ -174,6 +184,10 @@ declare const configSchema: z.ZodObject<{
         hooks: string;
     };
     $schema?: string | undefined;
+    fonts?: {
+        strategy: "stera-default" | "keep-existing" | "skip";
+        nextFont?: boolean | undefined;
+    } | undefined;
 }, {
     version: 1;
     css: string;
@@ -185,6 +199,10 @@ declare const configSchema: z.ZodObject<{
         hooks: string;
     };
     $schema?: string | undefined;
+    fonts?: {
+        strategy: "stera-default" | "keep-existing" | "skip";
+        nextFont?: boolean | undefined;
+    } | undefined;
 }>;
 type SteraConfig = z.infer<typeof configSchema>;
 

package/dist/schema/index.js

@@ -4,7 +4,7 @@ import {
   registryItemFileSchema,
   registryItemSchema,
   registryItemTypeSchema
-} from "../chunk-57DNZ2YS.js";
+} from "../chunk-AXIACJ2C.js";
 export {
   configSchema,
   registryIndexSchema,

package/dist/utils/index.d.ts

@@ -12,6 +12,10 @@ interface SteraConfig {
         lib: string;
         hooks: string;
     };
+    fonts?: {
+        strategy: "stera-default" | "keep-existing" | "skip";
+        nextFont?: boolean;
+    };
 }
 declare const CONFIG_FILE = "components.json";
 declare function findConfigPath(cwd: string): string | null;
@@ -50,6 +54,8 @@ interface ProjectInfo {
     framework: "next" | "vite" | "other";
     rsc: boolean;
     existingCssFile: string | null;
+    /** Path to the root layout file (layout.tsx for Next.js, index.html for Vite) */
+    layoutFile: string | null;
 }
 /**
  * Detect the project structure to inform configuration defaults.
@@ -69,7 +75,7 @@ declare function detectProject(cwd: string): ProjectInfo;
 declare function hasGlobalsCss(config: SteraConfig, projectRoot: string): boolean;
 
 type PackageManager = "pnpm" | "npm" | "yarn" | "bun";
-declare function detectPackageManager(cwd: string): PackageManager;
+declare function detectPackageManager(cwd: string): Promise<PackageManager>;
 /**
  * Install npm dependencies, skipping any already in the consumer's package.json.
  */

package/dist/utils/index.js

@@ -17,7 +17,7 @@ import {
   resolveOutputPath,
   transformImports,
   writeComponentFiles
-} from "../chunk-PUJGGJCB.js";
+} from "../chunk-MFUZBXO6.js";
 export {
   CHECK,
   CONFIG_FILE,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stera-ui",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "description": "Add Stera UI components to your project.",
   "license": "MIT",
@@ -33,7 +33,10 @@
     "dist"
   ],
   "dependencies": {
+    "@antfu/ni": "^30.0.0",
+    "@inquirer/prompts": "^7.0.0",
     "commander": "^13.1.0",
+    "execa": "^9.6.1",
     "tsconfig-paths": "^4.2.0",
     "zod": "^3.24.0"
   },