npm - synthesisui - Versions diffs - 0.4.8 → 0.4.10 - Mend

synthesisui 0.4.8 → 0.4.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/commands/add.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { access, mkdir, readFile, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 import { syncClaudeMd } from "../claude-md.js";
 import { readProjectConfig, resolveRegistry } from "../config.js";
@@ -14,6 +14,19 @@ async function readRootLock(path) {
         return null;
     }
 }
+const exists = (path) => access(path).then(() => true, () => false);
+/**
+ * Where the app's routes live: the configured pagesDir at the project root
+ * (`app/`) or nested under `src/` (`src/app/` - create-next-app's other
+ * layout). Null when neither exists (instructions-only mode).
+ */
+async function detectAppDir(root, pagesDir) {
+    if (await exists(join(root, pagesDir)))
+        return pagesDir;
+    if (await exists(join(root, "src", pagesDir)))
+        return `src/${pagesDir}`;
+    return null;
+}
 /**
  * Materializes a published DS into `_synthesisui/ds/<slug>/v<version>/`, points
  * stable root re-exports (tokens.css/theme.css) and a `.lock` at it, and updates
@@ -115,36 +128,62 @@ export async function add(slug, opts) {
         return;
     const hasTheme = cssArtifacts.includes("theme.css");
     // ── DX: concrete paths + copy-pasteable snippets, with breathing room ──
+    // Where the app actually lives (app/ vs src/app/) drives every printed
+    // path: the @import depth, the layout example, and where fonts.ts lands.
+    const projectConfig = await readProjectConfig(projectRoot);
+    const appDir = (await detectAppDir(projectRoot, projectConfig.pagesDir)) ??
+        projectConfig.pagesDir;
+    const importPrefix = "../".repeat(appDir.split("/").length);
     console.log(section("One-time setup (once per app)"));
-    console.log(line("1. Import the system in your GLOBAL stylesheet, e.g. app/globals.css"));
-    console.log(line("   (the path is relative to that file - hence the leading ../):"));
+    console.log(line(`1. Import the system in your GLOBAL stylesheet, e.g. ${appDir}/globals.css`));
+    console.log(line(`   (the path is relative to that file - hence the leading ${importPrefix}):`));
     console.log("");
     console.log(snippet(hasTheme
         ? [
             `@import "tailwindcss";`,
-            `@import "../_synthesisui/ds/${payload.slug}/tokens.css";`,
-            `@import "../_synthesisui/ds/${payload.slug}/theme.css";  /* Tailwind utilities on your tokens */`,
+            `@import "${importPrefix}_synthesisui/ds/${payload.slug}/tokens.css";`,
+            `@import "${importPrefix}_synthesisui/ds/${payload.slug}/theme.css";  /* Tailwind utilities on your tokens */`,
         ]
-        : [`@import "../_synthesisui/ds/${payload.slug}/tokens.css";`]));
+        : [
+            `@import "${importPrefix}_synthesisui/ds/${payload.slug}/tokens.css";`,
+        ]));
     console.log("");
-    console.log(line(`2. Scope your app: add data-ds="${payload.slug}" to a ROOT element, e.g. app/layout.tsx:`));
+    console.log(line(`2. Scope your app: add data-ds="${payload.slug}" to a ROOT element, e.g. ${appDir}/layout.tsx:`));
     console.log("");
     console.log(snippet([`<body data-ds="${payload.slug}">{children}</body>`]));
     // 3. Load the type - the DS ships token NAMES, not the fonts themselves.
-    //    Next apps get the next/font recipe (self-hosted + preloaded + adjusted
-    //    fallback = no FOUT "blink" on refresh); the Google Fonts <link> stays
-    //    as the framework-agnostic path.
+    //    Next apps get fonts.ts MATERIALIZED (deterministic does, not teaches):
+    //    next/font = self-hosted + preloaded + adjusted fallback, no FOUT
+    //    "blink". The Google Fonts <link> stays as the framework-agnostic path.
     const families = payload.document.foundations.typography.families;
     const fontsHref = googleFontsHref(families);
-    const projectConfig = await readProjectConfig(projectRoot);
     const nextFonts = projectConfig.target === "next"
-        ? nextFontSnippet(families, payload.slug)
+        ? nextFontSnippet(families, payload.slug, appDir)
         : null;
     if (nextFonts) {
+        const fontsPath = join(projectRoot, ...appDir.split("/"), "fonts.ts");
+        let wroteFonts = false;
+        if (!(await exists(fontsPath)) &&
+            (await exists(join(projectRoot, ...appDir.split("/"))))) {
+            const header = [
+                `// Self-hosted type for the "${payload.slug}" design system (via next/font -`,
+                `// preloaded, no font flash). Generated by \`synthesisui add\`; edit freely.`,
+            ];
+            await writeFile(fontsPath, `${[...header, ...nextFonts.fontsFile.slice(1)].join("\n")}\n`, "utf8");
+            wroteFonts = true;
+        }
         console.log("");
-        console.log(line("3. Load the type via next/font (recommended: self-hosted, preloaded, no font flash on refresh). Three small blocks:"));
-        console.log("");
-        console.log(snippet(nextFonts.fontsFile));
+        if (wroteFonts) {
+            console.log(line(`3. ✓ wrote ${appDir}/fonts.ts - self-hosted type via next/font (preloaded, no font flash).`));
+            console.log(line("   Finish the wiring with two small edits:"));
+        }
+        else {
+            console.log(line(`3. Load the type via next/font (${appDir}/fonts.ts already exists - left untouched; it should export:)`));
+            console.log("");
+            console.log(snippet(nextFonts.fontsFile));
+            console.log("");
+            console.log(line("   Then finish the wiring:"));
+        }
         console.log("");
         console.log(snippet(nextFonts.layout));
         console.log("");

package/dist/fonts.js CHANGED Viewed

@@ -46,7 +46,7 @@ export function googleFontsHref(families) {
  * `<link href="fonts.googleapis.com...">` stays as the framework-agnostic
  * fallback - it works everywhere but swaps visibly on cold loads.
  */
-export function nextFontSnippet(families, slug) {
+export function nextFontSnippet(families, slug, appDir = "app") {
     const roles = ["display", "body", "mono"].filter((role) => {
         const name = families[role]?.trim();
         return name && !GENERIC_FAMILIES.has(name.toLowerCase());
@@ -66,7 +66,7 @@ export function nextFontSnippet(families, slug) {
         }
     }
     const fontsFile = [
-        `// app/fonts.ts`,
+        `// ${appDir}/fonts.ts`,
         `import { ${importNames.join(", ")} } from "next/font/google";`,
         ...consts,
     ];
@@ -75,12 +75,12 @@ export function nextFontSnippet(families, slug) {
         return `--font-ds-${seen.get(name)}`;
     };
     const layout = [
-        `// app/layout.tsx`,
+        `// ${appDir}/layout.tsx`,
         `import { ${[...new Set(roles.map((r) => seen.get(families[r].trim())))].join(", ")} } from "./fonts";`,
         `<body data-ds="${slug}" className={\`${[...new Set(roles.map((r) => `\${${seen.get(families[r].trim())}.variable}`))].join(" ")}\`}>`,
     ];
     const css = [
-        `/* app/globals.css - AFTER the tokens.css import */`,
+        `/* ${appDir}/globals.css - AFTER the tokens.css import */`,
         `[data-ds="${slug}"] {`,
         ...roles.map((role) => `  --ds-typography-families-${role}: var(${roleVar(role)});`),
         `}`,

package/dist/guide.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { nextFontSnippet } from "./fonts.js";
 const kebab = (v) => v.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 const list = (items) => items.length ? items.map((i) => `\`${i}\``).join(", ") : "_(none)_";
 const dataAttrs = (variants) => Object.entries(variants).map(([axis, opts]) => `data-${kebab(axis)}="${Object.keys(opts).join("|")}"`);
@@ -67,6 +68,7 @@ export function buildGuide(payload) {
             .map((n) => `family=${n.replace(/ /g, "+")}:wght@400;500;600;700`)
             .join("&")}&display=swap`
         : null;
+    const nextFonts = nextFontSnippet(foundations.typography.families, slug);
     const fontsSection = fontsHref
         ? `
 ## Fonts
@@ -74,15 +76,29 @@ export function buildGuide(payload) {
 This system's type relies on ${list(fontFamilies)} - **the DS ships token names, not the
 fonts themselves.** If you don't load them they fall back to a generic family and the system loses
 its typographic identity. Load them once (any one approach):
-- **Google Fonts** - drop in your \`<head>\` (or root layout):
+${nextFonts
+            ? `
+- **Next.js (recommended)** - \`next/font\` self-hosts the families (preloaded, size-adjusted
+  fallbacks - no font flash on refresh). Three small blocks:
+  \`\`\`ts
+${nextFonts.fontsFile.map((l) => `  ${l}`).join("\n")}
+  \`\`\`
+  \`\`\`tsx
+${nextFonts.layout.map((l) => `  ${l}`).join("\n")}
+  \`\`\`
+  \`\`\`css
+${nextFonts.css.map((l) => `  ${l}`).join("\n")}
+  \`\`\``
+            : ""}
+- **Anywhere else** - Google Fonts \`<link>\` in the \`<head>\` (works everywhere, may flash on
+  cold loads):
   \`\`\`html
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link rel="stylesheet" href="${fontsHref}" />
   \`\`\`
-- **Next.js** (\`next/font/google\`), **Fontsource**, or self-hosted \`@font-face\` work too - just
-  register the families above. If a family isn't on Google Fonts, self-host it.
+- **Fontsource** or self-hosted \`@font-face\` work too - just register the families above.
+  If a family isn't on Google Fonts, self-host it.
 ---
 `

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "synthesisui",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "description": "Traz design systems do SynthesisUI para qualquer projeto (materializa em _local/ds/).",
   "type": "module",
   "bin": {