stera-ui 0.2.1 → 0.3.1

package/dist/cli.js

@@ -153,7 +153,7 @@ async function writeComponentFiles(items, config, projectRoot, options = {}) {
   const written = [];
   const skipped = [];
   for (const item of items) {
-    for (const file of item.files) {
+    for (const file of item.files ?? []) {
       const outputPath = resolveOutputPath(config, projectRoot, file);
       const relativePath = path3.relative(projectRoot, outputPath);
       if (fs2.existsSync(outputPath)) {
@@ -401,7 +401,7 @@ async function add(components, options) {
   }
   const resolved = await resolveDependencies(components);
   for (const item of resolved) {
-    for (const file of item.files) {
+    for (const file of item.files ?? []) {
       if (file.content) {
         file.content = applyTransforms(
           file.content,
@@ -451,9 +451,9 @@ async function add(components, options) {
 }
 
 // src/commands/init.ts
-import fs11 from "fs";
-import path12 from "path";
-import { select, confirm } from "@inquirer/prompts";
+import fs9 from "fs";
+import path10 from "path";
+import { select } from "@inquirer/prompts";
 
 // src/utils/detect-project.ts
 import fs5 from "fs";
@@ -626,243 +626,324 @@ function patchCssVariables(filePath, patches) {
   }
   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";
+// src/utils/update-fonts.ts
+import { existsSync, promises as 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");
+import {
+  Project,
+  ScriptKind,
+  SyntaxKind,
+  VariableDeclarationKind
+} from "ts-morph";
+var ROOT_FONT_VARIABLES = /* @__PURE__ */ new Set([
+  "--font-sans",
+  "--font-serif",
+  "--font-mono"
+]);
+function massageTreeForFonts(fonts, project) {
+  const result = {
+    cssVars: {},
+    dependencies: [],
+    cssImports: []
+  };
+  if (fonts.length === 0) return result;
+  const isNext = project.framework === "next";
+  for (const font of fonts) {
+    if (isNext) {
+      result.cssVars[font.font.variable] = `var(${font.font.variable})`;
+    } else {
+      const fontName = font.name.replace(/^font-/, "");
+      const fontSourceDep = font.font.dependency ?? `@fontsource-variable/${fontName}`;
+      result.dependencies.push(fontSourceDep);
+      result.cssImports.push(`@import "${fontSourceDep}";`);
+      result.cssVars[font.font.variable] = font.font.family;
+    }
+  }
+  return result;
 }
-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?`
+async function updateFonts(fonts, project, cwd, options = {}) {
+  if (fonts.length === 0) return;
+  if (project.framework !== "next") return;
+  const layoutPath = findLayoutFile(project, cwd);
+  if (!layoutPath) return;
+  if (options.silent) {
+    try {
+      const layoutContent = await fs8.readFile(layoutPath, "utf-8");
+      const updatedContent = transformLayoutFonts(layoutContent, fonts);
+      if (updatedContent !== layoutContent) {
+        await fs8.writeFile(layoutPath, updatedContent, "utf-8");
+      }
+    } catch {
+    }
+    return;
+  }
+  const spinner = createSpinner("Updating fonts");
+  try {
+    const layoutContent = await fs8.readFile(layoutPath, "utf-8");
+    const updatedContent = transformLayoutFonts(layoutContent, fonts);
+    if (updatedContent !== layoutContent) {
+      await fs8.writeFile(layoutPath, updatedContent, "utf-8");
+    }
+    spinner.succeed("Updated layout with font imports");
+  } catch {
+    spinner.fail("Failed to update fonts");
+  }
+}
+function findLayoutFile(project, cwd) {
+  if (!project.layoutFile) return null;
+  const fullPath = path9.join(cwd, project.layoutFile);
+  return existsSync(fullPath) ? fullPath : null;
+}
+function transformLayoutFonts(input, fonts) {
+  const project = new Project({ compilerOptions: {} });
+  const sourceFile = project.createSourceFile("layout.tsx", input, {
+    scriptKind: ScriptKind.TSX
+  });
+  const googleFonts = fonts.filter((f) => f.font.provider === "google");
+  const fontVariableNames = [];
+  const fontUtilityClasses = [];
+  for (const font of googleFonts) {
+    const importName = font.font.import;
+    if (!importName) continue;
+    const existingImport = sourceFile.getImportDeclaration(
+      (decl) => decl.getModuleSpecifierValue() === "next/font/google"
+    );
+    let hasExistingImport = false;
+    if (existingImport) {
+      const namedImports = existingImport.getNamedImports();
+      hasExistingImport = namedImports.some(
+        (imp) => imp.getName() === importName
       );
+      if (!hasExistingImport) {
+        existingImport.addNamedImport(importName);
+      }
+    } else {
+      sourceFile.addImportDeclaration({
+        moduleSpecifier: "next/font/google",
+        namedImports: [importName]
+      });
+    }
+    const varName = getFontVariableName(importName, font.font.variable);
+    const fontOptions = buildFontOptions(font);
+    const existingVarDecl = findFontVariableDeclaration(
+      sourceFile,
+      font.font.variable
+    );
+    if (hasExistingImport && !existingVarDecl && isRootFontVariable(font.font.variable)) {
+      continue;
+    }
+    if (existingVarDecl) {
+      existingVarDecl.setInitializer(`${importName}(${fontOptions})`);
+      if (existingVarDecl.getName() !== varName) {
+        existingVarDecl.rename(varName);
+      }
+    } else {
+      const insertPosition = findInsertPosition(sourceFile);
+      const statement = sourceFile.insertVariableStatement(insertPosition, {
+        declarationKind: VariableDeclarationKind.Const,
+        declarations: [
+          {
+            name: varName,
+            initializer: `${importName}(${fontOptions})`
+          }
+        ]
+      });
+      statement.appendWhitespace("\n");
+    }
+    fontVariableNames.push(varName);
+    if (shouldApplyFontUtilityToHtml(font)) {
+      fontUtilityClasses.push(font.font.variable.replace("--", ""));
     }
-    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");
+  const fontFamilyClasses = /* @__PURE__ */ new Set(["font-sans", "font-serif", "font-mono"]);
+  const lastFontFamilyClass = [...fontUtilityClasses].reverse().find((cls) => fontFamilyClasses.has(cls));
+  const filteredUtilityClasses = fontUtilityClasses.filter(
+    (cls) => !fontFamilyClasses.has(cls)
+  );
+  if (lastFontFamilyClass) {
+    filteredUtilityClasses.unshift(lastFontFamilyClass);
   }
-  return written;
+  if (fontVariableNames.length > 0) {
+    updateHtmlClassName(sourceFile, fontVariableNames, filteredUtilityClasses);
+  }
+  return sourceFile.getFullText();
 }
-
-// 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;
+function buildFontOptions(font) {
+  const options = {};
+  if (font.font.subsets?.length) options.subsets = font.font.subsets;
+  if (font.font.weight?.length) options.weight = font.font.weight;
+  options.variable = font.font.variable;
+  return JSON.stringify(options).replace(/"([^"]+)":/g, "$1:").replace(/"/g, "'");
 }
-
-@font-face {
-  font-family: 'Geist';
-  src: url('/fonts/geist/Geist-Italic.woff2') format('woff2');
-  font-weight: 100 900;
-  font-style: italic;
-  font-display: swap;
+function isRootFontVariable(variable) {
+  return ROOT_FONT_VARIABLES.has(variable);
 }
-
-/* \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;
+function shouldApplyFontUtilityToHtml(font) {
+  return !font.font.selector && isRootFontVariable(font.font.variable);
 }
-
-@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;
+function getFontVariableName(importName, variable) {
+  const baseName = toCamelCase(importName);
+  if (isRootFontVariable(variable)) return baseName;
+  return `${baseName}${toPascalCase(variable.replace(/^--font-/, ""))}`;
 }
-`;
-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 };
+function toCamelCase(str) {
+  return str.split("_").map(
+    (part, index) => index === 0 ? part.toLowerCase() : part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()
+  ).join("");
 }
-
-// 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 toPascalCase(str) {
+  return str.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
 }
-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;
+function findFontVariableDeclaration(sourceFile, variable) {
+  for (const statement of sourceFile.getVariableStatements()) {
+    for (const declaration of statement.getDeclarations()) {
+      const initializer = declaration.getInitializer();
+      if (!initializer || initializer.getKind() !== SyntaxKind.CallExpression)
+        continue;
+      const args = initializer.getArguments();
+      if (args.length === 0) continue;
+      const argText = args[0].getText();
+      if (argText.includes("variable:") && argText.includes(variable)) {
+        return declaration;
+      }
     }
   }
-  if (lastImportIndex >= 0) {
-    lines.splice(lastImportIndex + 1, 0, imports);
-  } else {
-    lines.unshift(imports);
-  }
-  return lines.join("\n");
+  return null;
 }
-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]}`
-    );
+function findInsertPosition(sourceFile) {
+  const imports = sourceFile.getImportDeclarations();
+  if (imports.length > 0) {
+    return imports[imports.length - 1].getChildIndex() + 1;
   }
-  const exprMatch = content.match(
-    /(<html[^>]*className=\{)([^}`]+)(\})/
+  return 0;
+}
+function updateHtmlClassName(sourceFile, fontVariableNames, fontUtilityClasses) {
+  const jsxElements = sourceFile.getDescendantsOfKind(
+    SyntaxKind.JsxOpeningElement
   );
-  if (exprMatch) {
-    return content.replace(
-      exprMatch[0],
-      `${exprMatch[1]}\`\${${exprMatch[2].trim()}} ${fontClasses}\`${exprMatch[3]}`
+  for (const element of jsxElements) {
+    if (element.getTagNameNode().getText() !== "html") continue;
+    const newUtilityClasses = fontUtilityClasses.map((cls) => `"${cls}"`);
+    const newVarExpressions = fontVariableNames.map(
+      (name) => `${name}.variable`
     );
+    const allNewArgs = [...newUtilityClasses, ...newVarExpressions];
+    const classNameAttr = element.getAttribute("className");
+    if (!classNameAttr) {
+      element.addAttribute({
+        name: "className",
+        initializer: `{cn(${allNewArgs.join(", ")})}`
+      });
+      ensureCnImport(sourceFile);
+      return;
+    }
+    if (classNameAttr.getKind() !== SyntaxKind.JsxAttribute) return;
+    const jsxAttr = classNameAttr.asKindOrThrow(SyntaxKind.JsxAttribute);
+    const initializer = jsxAttr.getInitializer();
+    if (!initializer) return;
+    if (initializer.getKind() === SyntaxKind.StringLiteral) {
+      const currentValue = initializer.getText().slice(1, -1);
+      ensureCnImport(sourceFile);
+      jsxAttr.setInitializer(
+        `{cn("${currentValue}", ${allNewArgs.join(", ")})}`
+      );
+    } else if (initializer.getKind() === SyntaxKind.JsxExpression) {
+      const jsxExpr = initializer.asKindOrThrow(SyntaxKind.JsxExpression);
+      const expr = jsxExpr.getExpression();
+      if (!expr) return;
+      const exprText = expr.getText();
+      if (exprText.startsWith("cn(")) {
+        const hasAllFontVars = newVarExpressions.every(
+          (v) => exprText.includes(v)
+        );
+        const hasAllUtilityClasses = fontUtilityClasses.every(
+          (cls) => exprText.includes(`"${cls}"`)
+        );
+        if (hasAllFontVars && hasAllUtilityClasses) continue;
+        let cleanedExpr = exprText;
+        for (const varExpr of newVarExpressions) {
+          cleanedExpr = cleanedExpr.replace(
+            new RegExp(`,?\\s*${varExpr.replace(".", "\\.")}`, "g"),
+            ""
+          );
+        }
+        cleanedExpr = cleanedExpr.replace(/cn\(\s*,/, "cn(");
+        const newExpr = cleanedExpr.replace(
+          /\)$/,
+          `, ${allNewArgs.join(", ")})`
+        );
+        jsxExpr.replaceWithText(`{${newExpr}}`);
+      } else if (/^\w+\.variable$/.test(exprText)) {
+        ensureCnImport(sourceFile);
+        jsxExpr.replaceWithText(`{cn(${allNewArgs.join(", ")})}`);
+      } else if (exprText.startsWith("`") && exprText.endsWith("`")) {
+        const cnArgs = parseTemplateLiteralToCnArgs(exprText);
+        ensureCnImport(sourceFile);
+        const allNewArgsSet = new Set(allNewArgs);
+        const fontFamilyLiterals = new Set(
+          ["font-sans", "font-serif", "font-mono"].map((c) => `"${c}"`)
+        );
+        const cleanedCnArgs = cnArgs.filter(
+          (arg) => !allNewArgsSet.has(arg) && !fontFamilyLiterals.has(arg)
+        );
+        jsxExpr.replaceWithText(
+          `{cn(${[...cleanedCnArgs, ...allNewArgs].join(", ")})}`
+        );
+      } else {
+        ensureCnImport(sourceFile);
+        jsxExpr.replaceWithText(`{cn(${exprText}, ${allNewArgs.join(", ")})}`);
+      }
+    }
   }
-  const stringMatch = content.match(
-    /(<html[^>]*className=)(["'])([^"']*)(["'])/
+}
+function ensureCnImport(sourceFile) {
+  const existingImport = sourceFile.getImportDeclaration(
+    (decl) => decl.getNamedImports().some((imp) => imp.getName() === "cn")
   );
-  if (stringMatch) {
-    const existing = stringMatch[3].trim();
-    const newClassName = existing ? `${existing} ${fontClasses}` : fontClasses;
-    return content.replace(
-      stringMatch[0],
-      `${stringMatch[1]}{\`${newClassName}\`}`
+  if (!existingImport) {
+    const utilsImport = sourceFile.getImportDeclaration(
+      (decl) => decl.getModuleSpecifierValue().includes("/lib/utils")
     );
+    if (utilsImport) {
+      const namedImports = utilsImport.getNamedImports();
+      if (!namedImports.some((imp) => imp.getName() === "cn")) {
+        utilsImport.addNamedImport("cn");
+      }
+    } else {
+      sourceFile.addImportDeclaration({
+        moduleSpecifier: "@/lib/utils",
+        namedImports: ["cn"]
+      });
+    }
   }
-  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)}`);
+function parseTemplateLiteralToCnArgs(templateLiteral) {
+  const staticArgs = [];
+  const variableArgs = [];
+  const content = templateLiteral.slice(1, -1);
+  const parts = content.split(/(\$\{[^}]+\})/);
+  for (const part of parts) {
+    if (!part) continue;
+    if (part.startsWith("${") && part.endsWith("}")) {
+      const expr = part.slice(2, -1).trim();
+      if (expr) variableArgs.push(expr);
+    } else {
+      const staticParts = part.trim().split(/\s+/).filter(Boolean);
+      for (const staticPart of staticParts) {
+        staticArgs.push(`"${staticPart}"`);
+      }
     }
-    removeCssImport(cssPath, "./fonts.css");
   }
-  return true;
+  return [...staticArgs, ...variableArgs];
 }
 
 // src/commands/init.ts
-function buildConfig(project, fontChoice) {
+var DEFAULT_FONT_NAMES = ["font-geist", "font-geist-mono"];
+function buildConfig(project, strategy) {
   let cssPath;
   if (project.existingCssFile) {
     cssPath = project.existingCssFile;
@@ -883,16 +964,32 @@ function buildConfig(project, fontChoice) {
       hooks: "@/hooks"
     },
     fonts: {
-      strategy: fontChoice.strategy,
-      ...fontChoice.useNextFont ? { nextFont: true } : {}
+      strategy
     }
   };
 }
-function stripTailwindCoreImport(content) {
-  return content.split("\n").filter((line) => !line.trim().match(/^@import\s+["']tailwindcss["']/)).join("\n");
+function stripImportLines(content) {
+  const lines = content.split("\n");
+  const imports = [];
+  const kept = [];
+  for (const line of lines) {
+    if (line.trim().match(/^@import\s+["'].+["']/)) {
+      if (!line.trim().match(/^@import\s+["']tailwindcss["']/)) {
+        imports.push(line.trim());
+      }
+    } else {
+      kept.push(line);
+    }
+  }
+  return { content: kept.join("\n"), imports };
 }
 function insertImportLine(filePath, importStatement) {
-  const content = fs11.readFileSync(filePath, "utf-8");
+  const content = fs9.readFileSync(filePath, "utf-8");
+  const importPath = importStatement.match(/["']([^"']+)["']/)?.[1];
+  if (importPath) {
+    const escaped = importPath.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    if (new RegExp(`@import\\s+["']${escaped}["']`).test(content)) return;
+  }
   const lines = content.split("\n");
   let lastImportIndex = -1;
   for (let i = 0; i < lines.length; i++) {
@@ -905,17 +1002,12 @@ function insertImportLine(filePath, importStatement) {
   } else {
     lines.unshift(importStatement);
   }
-  fs11.writeFileSync(filePath, lines.join("\n"), "utf-8");
+  fs9.writeFileSync(filePath, lines.join("\n"), "utf-8");
 }
-async function promptFontChoice(project, detected, skipPrompts) {
+async function promptFontStrategy(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 (skipPrompts) return defaultStrategy;
   if (hasExistingFonts) {
     const sources = [];
     if (detected.fontFamilies.length > 0) {
@@ -937,7 +1029,7 @@ async function promptFontChoice(project, detected, skipPrompts) {
   choices.push({
     value: "stera-default",
     name: "Use Stera UI default fonts (Geist Sans + Geist Mono)",
-    description: "Self-hosted, optimized variable fonts"
+    description: "Optimized variable fonts via next/font or fontsource"
   });
   choices.push({
     value: "skip",
@@ -949,56 +1041,79 @@ async function promptFontChoice(project, detected, skipPrompts) {
     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 };
+  return strategy;
+}
+async function fetchDefaultFonts() {
+  const fonts = [];
+  for (const name of DEFAULT_FONT_NAMES) {
+    try {
+      const item = await fetchRegistryItem(name);
+      if (item.type === "registry:font") {
+        fonts.push(item);
+      }
+    } catch {
+    }
+  }
+  return fonts;
 }
-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)) {
+async function executeFontStrategy(strategy, project, detected, config, cwd) {
+  if (strategy === "skip") return;
+  if (strategy === "keep-existing") {
+    const cssPath = path10.resolve(cwd, config.css);
+    const cssDir = path10.dirname(cssPath);
+    if (fs9.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
+        "--font-heading": fontValue,
+        "--font-sans": fontValue
       });
-      const steraUiPath = path12.join(cssDir, "stera-ui.css");
-      if (fs11.existsSync(steraUiPath)) {
+      const steraUiPath = path10.join(cssDir, "stera-ui.css");
+      if (fs9.existsSync(steraUiPath)) {
         patchCssVariables(steraUiPath, {
-          "--font-display": fontValue,
-          "--font-body": fontValue
+          "--font-heading": fontValue,
+          "--font-sans": fontValue
         });
       }
       if (patched.length > 0) {
         console.log(`  ${CHECK}  Updated font variables to use ${fontValue}`);
       }
     }
-    return {};
+    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 };
+  const fonts = await fetchDefaultFonts();
+  if (fonts.length === 0) return;
+  const fontTree = massageTreeForFonts(fonts, project);
+  if (fontTree.dependencies.length > 0) {
+    await installDependencies(fontTree.dependencies, cwd);
+  }
+  if (fontTree.cssImports.length > 0) {
+    const cssPath = path10.resolve(cwd, config.css);
+    const cssDir = path10.dirname(cssPath);
+    const targetCss = fs9.existsSync(path10.join(cssDir, "stera-ui.css")) ? path10.join(cssDir, "stera-ui.css") : cssPath;
+    if (fs9.existsSync(targetCss)) {
+      for (const importLine of fontTree.cssImports) {
+        insertImportLine(targetCss, importLine);
+      }
+      console.log(`  ${CHECK}  Added font imports to ${path10.relative(cwd, targetCss)}`);
+    }
   }
+  if (Object.keys(fontTree.cssVars).length > 0) {
+    const cssPath = path10.resolve(cwd, config.css);
+    const cssDir = path10.dirname(cssPath);
+    const targetCss = fs9.existsSync(path10.join(cssDir, "stera-ui.css")) ? path10.join(cssDir, "stera-ui.css") : cssPath;
+    if (fs9.existsSync(targetCss)) {
+      const patched = patchCssVariables(targetCss, fontTree.cssVars);
+      if (patched.length > 0) {
+        console.log(`  ${CHECK}  Updated font variables in ${path10.relative(cwd, targetCss)}`);
+      }
+    }
+  }
+  await updateFonts(fonts, project, cwd);
 }
 async function init(options) {
-  const cwd = options.cwd ? path12.resolve(options.cwd) : process.cwd();
+  const cwd = options.cwd ? path10.resolve(options.cwd) : process.cwd();
   console.log(`
   ${LOGO}  Stera UI
 `);
@@ -1008,8 +1123,8 @@ async function init(options) {
     console.log('  Run "stera-ui add <component>" to add components.\n');
     return;
   }
-  const pkgPath = path12.join(cwd, "package.json");
-  if (!fs11.existsSync(pkgPath)) {
+  const pkgPath = path10.join(cwd, "package.json");
+  if (!fs9.existsSync(pkgPath)) {
     console.error(
       "  Error: No package.json found. Please run this in a project directory."
     );
@@ -1025,35 +1140,37 @@ async function init(options) {
 `);
   }
   const detectedFonts = detectFonts(cwd, project);
-  const fontChoice = await promptFontChoice(
-    project,
+  const strategy = await promptFontStrategy(
     detectedFonts,
     options.yes ?? false
   );
-  const config = buildConfig(project, fontChoice);
-  const configPath = path12.join(cwd, CONFIG_FILE);
-  fs11.writeFileSync(
+  const config = buildConfig(project, strategy);
+  const configPath = path10.join(cwd, CONFIG_FILE);
+  fs9.writeFileSync(
     configPath,
     JSON.stringify(config, null, 2) + "\n",
     "utf-8"
   );
   console.log(`  ${CHECK}  Created components.json`);
-  const cssDir = path12.dirname(path12.resolve(cwd, config.css));
+  const cssDir = path10.dirname(path10.resolve(cwd, config.css));
   if (project.existingCssFile) {
     if (hasGlobalsCss(config, cwd)) {
       console.log(
-        `  ${CHECK}  Stera already initialised ${dim(`(${path12.join(path12.dirname(project.existingCssFile), "stera-ui.css")} exists)`)}`
+        `  ${CHECK}  Stera already initialised ${dim(`(${path10.join(path10.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 = 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);
+        const globalsContent = globalsItem.files?.[0]?.content ?? "";
+        const { content: steraUiContent, imports } = stripImportLines(globalsContent);
+        const steraUiPath = path10.join(cssDir, "stera-ui.css");
+        fs9.mkdirSync(cssDir, { recursive: true });
+        fs9.writeFileSync(steraUiPath, steraUiContent, "utf-8");
+        console.log(`  ${CHECK}  Created ${path10.relative(cwd, steraUiPath)}`);
+        const existingCssPath = path10.resolve(cwd, project.existingCssFile);
+        for (const imp of imports) {
+          insertImportLine(existingCssPath, imp);
+        }
         insertImportLine(existingCssPath, "@import './stera-ui.css';");
         console.log(`  ${CHECK}  Added @import to ${project.existingCssFile}`);
       } catch {
@@ -1061,13 +1178,14 @@ async function init(options) {
     }
   } else {
     const resolved = await resolveDependencies(["globals"]);
-    const { written } = await writeComponentFiles(resolved, config, cwd);
+    const filtered = resolved.filter((item) => item.name !== "fonts");
+    const { written } = await writeComponentFiles(filtered, config, cwd);
     for (const file of written) {
       console.log(`  ${CHECK}  Created ${file}`);
     }
   }
-  const fontResult = await executeFontStrategy(
-    fontChoice,
+  await executeFontStrategy(
+    strategy,
     project,
     detectedFonts,
     config,
@@ -1085,15 +1203,7 @@ async function init(options) {
   console.log("");
   console.log("  Next steps:");
   console.log("    stera-ui add <component>");
-  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") {
+  if (strategy === "skip") {
     console.log("");
     console.log(`  ${dim("Font setup was skipped. See https://ui.stera.sh for font configuration docs.")}`);
   }