stera-ui 0.2.1 → 0.3.0

package/dist/{chunk-KIEC5SPW.js → chunk-26HP67ZM.js}

@@ -334,7 +334,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 = path6.relative(projectRoot, outputPath);
       if (fs5.existsSync(outputPath)) {
@@ -360,6 +360,317 @@ async function writeComponentFiles(items, config, projectRoot, options = {}) {
   return { written, skipped };
 }
 
+// src/utils/update-fonts.ts
+import { existsSync, promises as fs6 } from "fs";
+import path7 from "path";
+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;
+}
+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 fs6.readFile(layoutPath, "utf-8");
+      const updatedContent = transformLayoutFonts(layoutContent, fonts);
+      if (updatedContent !== layoutContent) {
+        await fs6.writeFile(layoutPath, updatedContent, "utf-8");
+      }
+    } catch {
+    }
+    return;
+  }
+  const spinner = createSpinner("Updating fonts");
+  try {
+    const layoutContent = await fs6.readFile(layoutPath, "utf-8");
+    const updatedContent = transformLayoutFonts(layoutContent, fonts);
+    if (updatedContent !== layoutContent) {
+      await fs6.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 = path7.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("--", ""));
+    }
+  }
+  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);
+  }
+  if (fontVariableNames.length > 0) {
+    updateHtmlClassName(sourceFile, fontVariableNames, filteredUtilityClasses);
+  }
+  return sourceFile.getFullText();
+}
+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, "'");
+}
+function isRootFontVariable(variable) {
+  return ROOT_FONT_VARIABLES.has(variable);
+}
+function shouldApplyFontUtilityToHtml(font) {
+  return !font.font.selector && isRootFontVariable(font.font.variable);
+}
+function getFontVariableName(importName, variable) {
+  const baseName = toCamelCase(importName);
+  if (isRootFontVariable(variable)) return baseName;
+  return `${baseName}${toPascalCase(variable.replace(/^--font-/, ""))}`;
+}
+function toCamelCase(str) {
+  return str.split("_").map(
+    (part, index) => index === 0 ? part.toLowerCase() : part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()
+  ).join("");
+}
+function toPascalCase(str) {
+  return str.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+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;
+      }
+    }
+  }
+  return null;
+}
+function findInsertPosition(sourceFile) {
+  const imports = sourceFile.getImportDeclarations();
+  if (imports.length > 0) {
+    return imports[imports.length - 1].getChildIndex() + 1;
+  }
+  return 0;
+}
+function updateHtmlClassName(sourceFile, fontVariableNames, fontUtilityClasses) {
+  const jsxElements = sourceFile.getDescendantsOfKind(
+    SyntaxKind.JsxOpeningElement
+  );
+  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(", ")})}`);
+      }
+    }
+  }
+}
+function ensureCnImport(sourceFile) {
+  const existingImport = sourceFile.getImportDeclaration(
+    (decl) => decl.getNamedImports().some((imp) => imp.getName() === "cn")
+  );
+  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"]
+      });
+    }
+  }
+}
+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}"`);
+      }
+    }
+  }
+  return [...staticArgs, ...variableArgs];
+}
+
 export {
   applyTransforms,
   transformImports,
@@ -378,5 +689,7 @@ export {
   createSpinner,
   detectPackageManager,
   installDependencies,
-  writeComponentFiles
+  writeComponentFiles,
+  massageTreeForFonts,
+  updateFonts
 };

package/dist/{chunk-AXIACJ2C.js → chunk-3KADOWKC.js}

@@ -5,7 +5,8 @@ var registryItemTypeSchema = z.enum([
   "registry:component",
   "registry:hook",
   "registry:lib",
-  "registry:style"
+  "registry:style",
+  "registry:font"
 ]);
 var registryItemFileSchema = z.object({
   path: z.string(),
@@ -13,13 +14,33 @@ var registryItemFileSchema = z.object({
   content: z.string().optional(),
   target: z.string().optional()
 });
-var registryItemSchema = z.object({
+var registryItemFontSchema = z.object({
+  family: z.string(),
+  provider: z.literal("google"),
+  import: z.string(),
+  variable: z.string(),
+  weight: z.array(z.string()).optional(),
+  subsets: z.array(z.string()).optional(),
+  selector: z.string().optional(),
+  dependency: z.string().optional()
+});
+var registryItemCommonSchema = z.object({
   name: z.string(),
-  type: registryItemTypeSchema,
   dependencies: z.array(z.string()).optional(),
   registryDependencies: z.array(z.string()).optional(),
-  files: z.array(registryItemFileSchema)
+  files: z.array(registryItemFileSchema).optional()
 });
+var registryItemSchema = z.discriminatedUnion("type", [
+  registryItemCommonSchema.extend({
+    type: z.literal("registry:font"),
+    font: registryItemFontSchema,
+    files: z.array(registryItemFileSchema).optional()
+  }),
+  registryItemCommonSchema.extend({
+    type: registryItemTypeSchema.exclude(["registry:font"]),
+    files: z.array(registryItemFileSchema)
+  })
+]);
 var registryIndexSchema = z.object({
   name: z.string(),
   items: z.array(registryItemSchema)
@@ -44,6 +65,7 @@ var configSchema = z.object({
 export {
   registryItemTypeSchema,
   registryItemFileSchema,
+  registryItemFontSchema,
   registryItemSchema,
   registryIndexSchema,
   configSchema