npm - synthesisui - Versions diffs - 0.4.9 → 0.4.11 - Mend

synthesisui 0.4.9 → 0.4.11

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 (7) 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/commands/clean.js CHANGED Viewed

@@ -90,7 +90,9 @@ export async function clean(opts) {
     // 4. Default README.
     const readmePath = join(root, "README.md");
     const readmeSrc = await readIf(readmePath);
-    if (readmeSrc && /create-next-app/.test(readmeSrc) && /Getting Started/.test(readmeSrc)) {
+    if (readmeSrc &&
+        /create-next-app/.test(readmeSrc) &&
+        /Getting Started/.test(readmeSrc)) {
         actions.push({
             verb: "remove",
             path: "README.md",

package/dist/commands/template.js CHANGED Viewed

@@ -16,14 +16,15 @@ export async function template(slug, name, opts) {
     const target = opts.target === "general" || opts.target === "next"
         ? opts.target
         : config.target;
-    console.log(`→ generating "${name}" from "${slug}" (${target}) …`);
-    const generated = await fetchTemplate(base, slug, name, target, opts.version);
+    const asName = opts.as && /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(opts.as) ? opts.as : undefined;
+    console.log(`→ generating "${name}"${asName ? ` as "${asName}"` : ""} from "${slug}" (${target}) …`);
+    const generated = await fetchTemplate(base, slug, name, target, opts.version, asName);
     // --out targets the page (1st file); sibling files (e.g. the CSS) land in the
     // same directory. Without --out, everything goes under templates/<name>/ -
     // a loose landing.tsx at the app/ root read as a route without being one,
     // and a second template turned the app dir into soup.
     const [pageFile, ...siblings] = generated.files;
-    const defaultDir = join("templates", name);
+    const defaultDir = join("templates", asName ?? name);
     const pageRel = opts.out ?? join(defaultDir, pageFile.filename);
     const pageDir = dirname(join(root, pageRel));
     await mkdir(pageDir, { recursive: true });

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/index.js CHANGED Viewed

@@ -21,6 +21,7 @@ Usage - deterministic, FREE:
   synthesisui add <slug> [options]         materialize a DS into _synthesisui/ds/<slug>/
   synthesisui component <slug> <name>      bring one EXISTING component in as YOUR <Pascal>.tsx
   synthesisui template <slug> <name>       materialize a whole page from a DS template
+                                           (--as landing-home names the output - multi-page safe)
   synthesisui upgrade <slug>               update an installed DS + regenerate your components + migration brief
   synthesisui use <slug> "<intent>"        print a ready-to-paste agent prompt to build/modify on-system
   synthesisui clean [--force]              strip create-next-app boilerplate (dry run without --force)
@@ -178,7 +179,15 @@ async function main() {
             }
             const target = typeof flags.target === "string" ? flags.target : undefined;
             const out = typeof flags.out === "string" ? flags.out : undefined;
-            await template(slug, name, { registry, dir, out, target, version });
+            const as_ = typeof flags.as === "string" ? flags.as : undefined;
+            await template(slug, name, {
+                registry,
+                dir,
+                out,
+                target,
+                version,
+                as: as_,
+            });
             break;
         }
         case "component": {

package/dist/registry.js CHANGED Viewed

@@ -46,12 +46,14 @@ export async function fetchDesignSystem(base, slug, version) {
  * Fetches a whole page generated from a DS template (`?template=&target=`). The
  * server codegens it from `document.layouts[<template>]`; the CLI just writes it.
  */
-export async function fetchTemplate(base, slug, template, target, version) {
+export async function fetchTemplate(base, slug, template, target, version, as_) {
     const url = new URL(`${base}/api/registry/ds/${encodeURIComponent(slug)}`);
     url.searchParams.set("template", template);
     url.searchParams.set("target", target);
     if (version != null)
         url.searchParams.set("version", String(version));
+    if (as_)
+        url.searchParams.set("as", as_);
     const res = await request(url.toString());
     if (res.status === 404) {
         const body = (await res.json().catch(() => ({})));

package/package.json CHANGED Viewed

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