npm - synthesisui - Versions diffs - 0.4.0 → 0.4.2 - Mend

synthesisui 0.4.0 → 0.4.2

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 (8) hide show

package/dist/commands/add.js +17 -0
package/dist/commands/advise.js +38 -1
package/dist/commands/generate.js +44 -5
package/dist/commands/refit.js +36 -3
package/dist/component-codegen.js +56 -0
package/dist/fonts.js +40 -0
package/dist/index.js +7 -5
package/package.json +1 -1

package/dist/commands/add.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 import { syncClaudeMd } from "../claude-md.js";
 import { resolveRegistry } from "../config.js";
+import { customFontFamilies, googleFontsHref } from "../fonts.js";
 import { buildGuide } from "../guide.js";
 import { body as line, section, snippet } from "../output.js";
 import { fetchDesignSystem } from "../registry.js";
@@ -129,6 +130,22 @@ export async function add(slug, opts) {
     console.log(line(`2. Scope your app: add data-ds="${payload.slug}" to a ROOT element, e.g. app/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.
+    //    Without this, display/body silently fall back and the identity is lost.
+    const families = payload.document.foundations.typography.families;
+    const fontsHref = googleFontsHref(families);
+    if (fontsHref) {
+        console.log("");
+        console.log(line("3. Load the type - this system ships font NAMES, not the fonts. Add to your app's <head> (e.g. app/layout.tsx) so the families resolve (else they fall back and the look is lost):"));
+        console.log("");
+        console.log(snippet([
+            `<link rel="preconnect" href="https://fonts.googleapis.com" />`,
+            `<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />`,
+            `<link rel="stylesheet" href="${fontsHref}" />`,
+        ]));
+        console.log("");
+        console.log(line(`   Prefer next/font or self-hosting? Fine - just register these exact families: ${customFontFamilies(families).join(", ")}.`));
+    }
     console.log(section("Next"));
     console.log(line(`synthesisui component ${payload.slug} button    bring a component in as YOUR code`));
     console.log(line(`synthesisui template ${payload.slug} landing    materialize a whole page`));

package/dist/commands/advise.js CHANGED Viewed

@@ -1,6 +1,39 @@
+import { readdir, readFile } from "node:fs/promises";
+import { join } from "node:path";
 import { resolveRegistry } from "../config.js";
 import { postAdvisor } from "../registry.js";
 import { buildRepoContext } from "../repo-context.js";
+/**
+ * Component names of the design system(s) installed in this project (from each
+ * DS's design-system.json). Grounds the advisor in what the DS ACTUALLY has, so
+ * it prefers real blocks and flags missing ones (instead of a fixed vocabulary).
+ */
+async function installedBlocks(root) {
+    const dsRoot = join(root, "_synthesisui", "ds");
+    const blocks = new Set();
+    let slugs = [];
+    try {
+        const entries = await readdir(dsRoot, { withFileTypes: true });
+        slugs = entries.filter((e) => e.isDirectory()).map((e) => e.name);
+    }
+    catch {
+        return [];
+    }
+    for (const slug of slugs) {
+        try {
+            const lockRaw = await readFile(join(dsRoot, slug, ".lock"), "utf8");
+            const version = JSON.parse(lockRaw).version ?? 1;
+            const docRaw = await readFile(join(dsRoot, slug, `v${version}`, "design-system.json"), "utf8");
+            const doc = JSON.parse(docRaw);
+            for (const name of Object.keys(doc.components ?? {}))
+                blocks.add(name);
+        }
+        catch {
+            // skip a DS we can't read - the advisor still works without its catalog
+        }
+    }
+    return [...blocks].sort();
+}
 /**
  * Asks the hosted advisor for engagement-pattern proposals, grounded in THIS
  * project (the CLI gathers a compact repo summary) + the value proposition you
@@ -10,7 +43,11 @@ export async function advise(valueProp, opts) {
     const base = resolveRegistry(opts.registry);
     const root = opts.dir ?? process.cwd();
     const repo = await buildRepoContext(root);
-    const context = `Proposta de valor: ${valueProp}\n\n${repo}`;
+    const blocks = await installedBlocks(root);
+    const catalog = blocks.length
+        ? `\n\nDesign-system blocks available in this project (prefer these; anything else can be created with \`synthesisui generate\`): ${blocks.join(", ")}`
+        : "";
+    const context = `Value proposition: ${valueProp}\n\n${repo}${catalog}`;
     console.log(`→ asking the advisor at ${base} …`);
     const res = await postAdvisor(base, context);
     if (res.proposals.length === 0) {

package/dist/commands/generate.js CHANGED Viewed

@@ -1,7 +1,23 @@
-import { mkdir, readdir, writeFile } from "node:fs/promises";
+import { mkdir, readdir, readFile, writeFile } from "node:fs/promises";
 import { join } from "node:path";
-import { resolveRegistry } from "../config.js";
+import { generateComponentFiles } from "../component-codegen.js";
+import { readProjectConfig, resolveRegistry } from "../config.js";
 import { postGenerate, RegistryError } from "../registry.js";
+/** PascalCase para o hint de import (course-card → CourseCard). */
+function pascalName(name) {
+    return name.replace(/(^|[-_])([a-z0-9])/g, (_, __, c) => c.toUpperCase());
+}
+/** Versão ativa do DS instalado (do `.lock`); 1 se ausente - só nomeia o header. */
+async function readActiveVersion(root, slug) {
+    try {
+        const raw = await readFile(join(root, "_synthesisui", "ds", slug, ".lock"), "utf8");
+        const lock = JSON.parse(raw);
+        return typeof lock.version === "number" ? lock.version : 1;
+    }
+    catch {
+        return 1;
+    }
+}
 /** Slugs materialized under `_synthesisui/ds/` in the project. */
 async function installedSlugs(root) {
     try {
@@ -45,9 +61,32 @@ export async function generate(description, opts) {
     const tries = `${res.tries} ${res.tries === 1 ? "try" : "tries"}`;
     console.log(`✓ ${res.name} generated (${res.model}, ${tries})`);
     console.log(`  → _synthesisui/ds/${slug}/generated/${res.name}.{json,css}`);
+    // Materialize YOUR component (.tsx) too - the SAME codegen `component` uses -
+    // so a generated component is as usable as a brought-in one, not just a
+    // recipe you have to wire by hand.
+    const config = await readProjectConfig(root);
+    let materialized = false;
+    if (config.target === "next") {
+        const version = await readActiveVersion(root, slug);
+        const compDir = join(root, config.componentsDir, res.name);
+        await mkdir(compDir, { recursive: true });
+        const files = generateComponentFiles(slug, res.name, res.recipe, res.css, version, config.styles);
+        for (const file of files) {
+            await writeFile(join(compDir, file.filename), file.code, "utf8");
+        }
+        materialized = true;
+        console.log(`✓ ${config.componentsDir}/${res.name}/ → ${files.map((f) => f.filename).join(", ")}  (styles: ${config.styles})`);
+    }
     console.log("");
     console.log("Use it:");
-    console.log(`  • @import "_synthesisui/ds/${slug}/generated/${res.name}.css" in your CSS`);
-    console.log(`  • <div data-ds="${slug}"><div class="ds-${res.name}">…</div></div>`);
-    console.log(`  (${res.usage.inputTokens} in / ${res.usage.outputTokens} out tokens - recipe is additive; nothing else changed)`);
+    if (materialized) {
+        const comp = pascalName(res.name);
+        console.log(`  • import { ${comp} } from "@/${config.componentsDir}/${res.name}";`);
+        console.log(`  • <${comp} /> - compose its parts + content (see the recipe)`);
+    }
+    else {
+        console.log(`  • @import "_synthesisui/ds/${slug}/generated/${res.name}.css" in your CSS`);
+        console.log(`  • <div data-ds="${slug}"><div class="ds-${res.name}">…</div></div>`);
+    }
+    console.log(`  (${res.usage.inputTokens} in / ${res.usage.outputTokens} out tokens · AI action - additive; nothing else changed)`);
 }

package/dist/commands/refit.js CHANGED Viewed

@@ -1,21 +1,44 @@
-import { mkdir, readdir, readFile, writeFile } from "node:fs/promises";
+import { access, mkdir, readdir, readFile, writeFile } from "node:fs/promises";
 import { basename, join } from "node:path";
 import { generateComponentFiles } from "../component-codegen.js";
 import { readProjectConfig, resolveRegistry } from "../config.js";
 import { body, section, snippet } from "../output.js";
 import { fetchComponent, postRefit, postSaveComponent, RegistryError, } from "../registry.js";
-/** Slugs materialized under `_synthesisui/ds/` in the project. */
+/** Slugs INSTALLED under `_synthesisui/ds/` (a `.lock` marks a real install -
+ *  a folder holding only refit artifacts doesn't count). */
 async function installedSlugs(root) {
     try {
         const entries = await readdir(join(root, "_synthesisui", "ds"), {
             withFileTypes: true,
         });
-        return entries.filter((e) => e.isDirectory()).map((e) => e.name);
+        const slugs = [];
+        for (const entry of entries) {
+            if (!entry.isDirectory())
+                continue;
+            try {
+                await access(join(root, "_synthesisui", "ds", entry.name, ".lock"));
+                slugs.push(entry.name);
+            }
+            catch {
+                // artifacts-only folder (e.g. a refit before `add`) - not installed
+            }
+        }
+        return slugs;
     }
     catch {
         return [];
     }
 }
+/** True when the system is actually installed (tokens.css present). */
+async function isInstalled(root, slug) {
+    try {
+        await access(join(root, "_synthesisui", "ds", slug, ".lock"));
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
 /**
  * Marco B5 - the REVERSE bridge, from the CLI: takes a component that lives in
  * YOUR app (arbitrary React/CSS), re-expresses it in the design system's
@@ -116,6 +139,16 @@ export async function refit(file, opts) {
         materialized = true;
         console.log(`✓ ${config.componentsDir}/${res.name}/ → ${files.map((f) => f.filename).join(", ")}  (styles: ${config.styles})`);
     }
+    // The materialized component references this system's tokens - without the
+    // install (tokens.css + scope) it renders unstyled. Say so, concretely.
+    if (!(await isInstalled(root, slug))) {
+        console.log(section("Heads up - system not installed here yet"));
+        console.log(body(`The component references "${slug}" tokens that this project doesn't have yet.`));
+        console.log("");
+        console.log(snippet([`npx synthesisui add ${slug}`]));
+        console.log("");
+        console.log(body("(then follow its one-time setup: global @import + data-ds scope)"));
+    }
     if (res.suggestedRule) {
         console.log(section("Suggested rule"));
         console.log(body("The AI inferred a reusable rule from this component:"));

package/dist/component-codegen.js CHANGED Viewed

@@ -136,7 +136,30 @@ const STATIC = {
     width: { "100%": "w-full" },
     height: { "100%": "h-full" },
     textDecoration: { none: "no-underline", underline: "underline" },
+    overflow: {
+        hidden: "overflow-hidden",
+        auto: "overflow-auto",
+        scroll: "overflow-scroll",
+        visible: "overflow-visible",
+        clip: "overflow-clip",
+    },
+    position: {
+        relative: "relative",
+        absolute: "absolute",
+        fixed: "fixed",
+        sticky: "sticky",
+        static: "static",
+    },
 };
+/** Fixed rem → Tailwind numeric scale step (0.25rem base), or null if not a
+ *  clean multiple. So `0.5rem` → `2` (h-2/w-2) instead of an arbitrary value. */
+function remToTwScale(value) {
+    const m = value.trim().match(/^(\d*\.?\d+)rem$/);
+    if (!m)
+        return null;
+    const n = Number.parseFloat(m[1]) / 0.25;
+    return Number.isInteger(n) && n >= 0 && n <= 96 ? String(n) : null;
+}
 /** One declaration → Tailwind classes (pretty when mappable, arbitrary-property
  *  otherwise - never dropped). */
 function declToTailwind(prop, value) {
@@ -224,6 +247,18 @@ function declToTailwind(prop, value) {
             if (/^\{typography\.scale\./.test(value))
                 return [];
             break;
+        case "height": {
+            const n = remToTwScale(value);
+            if (n)
+                return [`h-${n}`];
+            break;
+        }
+        case "width": {
+            const n = remToTwScale(value);
+            if (n)
+                return [`w-${n}`];
+            break;
+        }
     }
     return [arbitrary(prop, value)];
 }
@@ -257,6 +292,25 @@ function header(slug, name, version, mode) {
     ].join("\n");
 }
 const joinCls = (parts) => `[${parts.join(", ")}].filter(Boolean).join(" ")`;
+/** JSDoc showing how to compose the component with its parts + content, so the
+ *  materialized code doesn't read as "a bare shell renders nothing" (dogfood
+ *  #5). Built from the recipe's parts. */
+function compositionHint(comp, name, recipe) {
+    const partNames = Object.keys(recipe.parts ?? {});
+    if (partNames.length === 0) {
+        return `/** Wears the "${name}" recipe. Put your content inside: <${comp}>…</${comp}>. */`;
+    }
+    const inner = partNames
+        .map((p) => ` *     <${comp}${pascal(p)}>…</${comp}${pascal(p)}>`)
+        .join("\n");
+    return `/**
+ * Compose it with its parts + your own content - a bare <${comp} /> is just the
+ * empty shell. For example:
+ *   <${comp}>
+${inner}
+ *   </${comp}>
+ */`;
+}
 function emitCssMode(slug, name, recipe, version) {
     const { tag, attrs, voidEl } = elementFor(name, recipe);
     const axes = axesOf(recipe.variants);
@@ -291,6 +345,7 @@ import type { ComponentPropsWithoutRef } from "react";
 type ${comp}Props = ${propsType(axes, tag)};
+${compositionHint(comp, name, recipe)}
 export function ${comp}({ ${destructure} }: ${comp}Props) {
   return (
 ${rootJsx}
@@ -335,6 +390,7 @@ ${[...variantConsts, ...booleanConsts].join("\n")}
 type ${comp}Props = ${propsType(axes, tag)};
+${compositionHint(comp, name, recipe)}
 export function ${comp}({ ${destructure} }: ${comp}Props) {
   return (
     <${tag}${attrs}

package/dist/fonts.js ADDED Viewed

@@ -0,0 +1,40 @@
+// Fallbacks genéricos do CSS - não são webfonts.
+const GENERIC_FAMILIES = new Set([
+    "sans-serif",
+    "serif",
+    "monospace",
+    "system-ui",
+    "ui-sans-serif",
+    "ui-serif",
+    "ui-monospace",
+    "cursive",
+    "fantasy",
+    "inherit",
+    "initial",
+]);
+/** Famílias CUSTOM (display/body/mono), dedup e sem os genéricos. */
+export function customFontFamilies(families) {
+    const seen = new Set();
+    const names = [];
+    for (const family of [families.display, families.body, families.mono]) {
+        const name = family?.trim();
+        if (!name)
+            continue;
+        const key = name.toLowerCase();
+        if (GENERIC_FAMILIES.has(key) || seen.has(key))
+            continue;
+        seen.add(key);
+        names.push(name);
+    }
+    return names;
+}
+/** URL do Google Fonts CSS2 pras famílias do documento, ou null se só genéricos. */
+export function googleFontsHref(families) {
+    const names = customFontFamilies(families);
+    if (names.length === 0)
+        return null;
+    const query = names
+        .map((name) => `family=${name.replace(/ /g, "+")}:wght@400;500;600;700`)
+        .join("&");
+    return `https://fonts.googleapis.com/css2?${query}&display=swap`;
+}

package/dist/index.js CHANGED Viewed

@@ -13,18 +13,20 @@ import { use } from "./commands/use.js";
 import { RegistryError } from "./registry.js";
 const HELP = `synthesisui - bring SynthesisUI design systems into your project
-Usage:
+Usage - deterministic, FREE:
   synthesisui login [options]              connect the CLI to your account (device-flow)
   synthesisui init [options]               write _synthesisui/config.json (target, dirs); --ds to bring one in
   synthesisui list [options]               list the published design systems
   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
-  synthesisui component <slug> <name>      bring one component in - artifacts + YOUR <Pascal>.tsx in componentsDir
   synthesisui upgrade <slug>               update an installed DS + regenerate your components + migration brief
-  synthesisui refit <file> [--ds <slug>]   send an app component INTO your DS (token-only) and get it back as code
   synthesisui use <slug> "<intent>"        print a ready-to-paste agent prompt to build/modify on-system
-  synthesisui advise "<value prop>"        engagement-pattern proposals for this project (login required)
-  synthesisui generate "<desc>"            generate a token-only component recipe for your DS (login required)
+Usage - AI, USES CREDITS (login required):
+  synthesisui generate "<desc>"            AI-create a NEW component your DS doesn't have (token-only recipe)
+  synthesisui advise "<value prop>"        AI engagement-pattern proposals for this project
+  synthesisui refit <file> [--ds <slug>]   AI-adapt an app component INTO your DS, get it back as code
 Options:
   --registry <url>   registry URL (or env SYNTHESISUI_REGISTRY_URL)

package/package.json CHANGED Viewed

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