npm - synthesisui - Versions diffs - 0.4.1 → 0.4.3 - Mend

synthesisui 0.4.1 → 0.4.3

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

package/dist/commands/add.js +17 -0
package/dist/commands/advise.js +38 -1
package/dist/commands/clean.js +117 -0
package/dist/commands/component.js +24 -5
package/dist/commands/generate.js +44 -5
package/dist/component-codegen.js +56 -0
package/dist/fonts.js +40 -0
package/dist/index.js +15 -5
package/dist/interactive-templates.js +158 -0
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/clean.js ADDED Viewed

@@ -0,0 +1,117 @@
+import { readFile, rm, stat, writeFile } from "node:fs/promises";
+import { join, relative } from "node:path";
+import { body, section } from "../output.js";
+// The five SVGs create-next-app drops into public/. Filenames are specific
+// enough to be safe, and the dry-run + --force gate is the real guard.
+const DEFAULT_SVGS = [
+    "next.svg",
+    "vercel.svg",
+    "file.svg",
+    "globe.svg",
+    "window.svg",
+];
+const MINIMAL_PAGE = `export default function Home() {
+  return (
+    <main>
+      <h1>New app</h1>
+    </main>
+  );
+}
+`;
+async function pathExists(p) {
+    try {
+        await stat(p);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+async function readIf(p) {
+    try {
+        return await readFile(p, "utf8");
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Strips create-next-app boilerplate so a fresh project starts clean before you
+ * dress it in a design system. Content-matched: files you've edited are left
+ * untouched. Dry-run by default - re-run with --force to apply. (Dogfood #2b.)
+ */
+export async function clean(opts) {
+    const root = opts.dir ?? process.cwd();
+    const appDir = (await pathExists(join(root, "src", "app")))
+        ? join(root, "src", "app")
+        : join(root, "app");
+    const rel = (p) => relative(root, p).replace(/\\/g, "/");
+    const actions = [];
+    // 1. Default public SVGs.
+    for (const svg of DEFAULT_SVGS) {
+        const p = join(root, "public", svg);
+        if (await pathExists(p)) {
+            actions.push({
+                verb: "remove",
+                path: `public/${svg}`,
+                why: "create-next-app default asset",
+                run: () => rm(p),
+            });
+        }
+    }
+    // 2. Default landing page → minimal placeholder (only if unedited).
+    const pagePath = join(appDir, "page.tsx");
+    const pageSrc = await readIf(pagePath);
+    if (pageSrc && /Get started by editing|Deploy now|Read our docs/.test(pageSrc)) {
+        actions.push({
+            verb: "reset",
+            path: rel(pagePath),
+            why: "default landing → minimal placeholder",
+            run: () => writeFile(pagePath, MINIMAL_PAGE, "utf8"),
+        });
+    }
+    // 3. Layout metadata still says "Create Next App".
+    const layoutPath = join(appDir, "layout.tsx");
+    const layoutSrc = await readIf(layoutPath);
+    if (layoutSrc &&
+        /"Create Next App"|"Generated by create next app"/.test(layoutSrc)) {
+        actions.push({
+            verb: "reset",
+            path: rel(layoutPath),
+            why: 'metadata "Create Next App" → neutral',
+            run: () => writeFile(layoutPath, layoutSrc
+                .replace(/"Create Next App"/g, '"App"')
+                .replace(/"Generated by create next app"/g, '""'), "utf8"),
+        });
+    }
+    // 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)) {
+        actions.push({
+            verb: "remove",
+            path: "README.md",
+            why: "create-next-app default README",
+            run: () => rm(readmePath),
+        });
+    }
+    if (actions.length === 0) {
+        console.log(section("Clean up scaffold"));
+        console.log(body("Nothing to clean - this project is already tidy."));
+        console.log("");
+        return;
+    }
+    console.log(section(opts.force ? "Cleaned up scaffold" : "Clean up scaffold (dry run)"));
+    const pad = Math.max(...actions.map((a) => a.path.length));
+    for (const a of actions) {
+        const mark = opts.force ? "✓" : "•";
+        console.log(body(`${mark} ${a.verb.padEnd(6)} ${a.path.padEnd(pad)}   ${a.why}`));
+        if (opts.force)
+            await a.run();
+    }
+    console.log("");
+    console.log(body(opts.force
+        ? `Done - ${actions.length} item(s) tidied.`
+        : "Dry run - nothing changed. Re-run with `synthesisui clean --force` to apply."));
+    console.log("");
+}

package/dist/commands/component.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { mkdir, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 import { generateComponentFiles } from "../component-codegen.js";
 import { readProjectConfig, resolveRegistry } from "../config.js";
+import { hasInteractiveTemplate, interactiveTemplate, } from "../interactive-templates.js";
 import { body, section, snippet } from "../output.js";
 import { fetchComponent, RegistryError } from "../registry.js";
 /** Slugs/names are kebab-case by contract; reject anything else before it ever
@@ -42,15 +43,33 @@ export async function component(slug, name, opts) {
     // 2. YOUR component - a real, importable `export function <Pascal>()` in the
     //    project's flavor (config: styles css|tailwind), under componentsDir.
     const config = await readProjectConfig(root);
+    const wantInteractive = opts.interactive && hasInteractiveTemplate(res.name);
     if (!opts.artifactsOnly && config.target === "next") {
         const compDir = join(root, config.componentsDir, res.name);
         await mkdir(compDir, { recursive: true });
-        const files = generateComponentFiles(slug, res.name, res.recipe, res.css, res.version, config.styles);
-        for (const file of files) {
-            await writeFile(join(compDir, file.filename), file.code, "utf8");
+        let filenames;
+        if (wantInteractive) {
+            // Curated interactive variant: the behaving .tsx + the compiled classes
+            // it wears (.css) + the barrel. Ignores the css|tailwind flavor - the
+            // template drives itself off the .ds-* classes.
+            const tsx = interactiveTemplate(res.name);
+            await writeFile(join(compDir, `${res.name}.tsx`), tsx, "utf8");
+            await writeFile(join(compDir, `${res.name}.css`), `${res.css}\n`, "utf8");
+            await writeFile(join(compDir, "index.ts"), `export * from "./${res.name}";\n`, "utf8");
+            filenames = [`${res.name}.tsx`, `${res.name}.css`, "index.ts"];
         }
-        const names = files.map((f) => f.filename).join(", ");
-        console.log(`✓ ${config.componentsDir}/${res.name}/ → ${names}  (styles: ${config.styles})`);
+        else {
+            const files = generateComponentFiles(slug, res.name, res.recipe, res.css, res.version, config.styles);
+            for (const file of files) {
+                await writeFile(join(compDir, file.filename), file.code, "utf8");
+            }
+            filenames = files.map((f) => f.filename);
+        }
+        const flavor = wantInteractive ? "interactive" : `styles: ${config.styles}`;
+        console.log(`✓ ${config.componentsDir}/${res.name}/ → ${filenames.join(", ")}  (${flavor})`);
+    }
+    else if (opts.interactive && !hasInteractiveTemplate(res.name)) {
+        console.log(`  note: no interactive template for "${res.name}" - materialized the standard shell.`);
     }
     // ── DX: concrete paths + copy-pasteable snippets, with breathing room ──
     const tailwind = config.styles === "tailwind";

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/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

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 import { add } from "./commands/add.js";
 import { advise } from "./commands/advise.js";
+import { clean } from "./commands/clean.js";
 import { component } from "./commands/component.js";
 import { generate } from "./commands/generate.js";
 import { init } from "./commands/init.js";
@@ -13,18 +14,21 @@ 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)
+  synthesisui clean [--force]              strip create-next-app boilerplate (dry run without --force)
+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)
@@ -37,10 +41,12 @@ Options:
   --components-dir <dir>  init: folder where components live (default: components)
   --styles <s>       init: component code flavor: css | tailwind (default: css)
   --artifacts-only   component: skip the .tsx materialization (recipe + css only)
+  --interactive      component: materialize the rich/behaving variant (join-field, streak, xp-bar)
   --replace <name>   refit: replace an existing DS component (keeps its name)
   --support <file>   refit: supporting CSS file (globals/vars the code references)
   --instruction <s>  refit: extra guidance for the adaptation
   --dry              refit: adapt and print, but save nothing
+  --force            clean: apply the changes (without it, dry run)
   --out <path>       output path for the generated template (default: <pagesDir>/<file>)
   -h, --help         this help
@@ -197,6 +203,7 @@ async function main() {
                 dir,
                 version,
                 artifactsOnly: flags["artifacts-only"] === true,
+                interactive: flags.interactive === true,
             });
             break;
         }
@@ -240,6 +247,9 @@ async function main() {
             await use(slug, intent, { dir });
             break;
         }
+        case "clean":
+            await clean({ dir, force: flags.force === true });
+            break;
         case "advise": {
             const valueProp = args.join(" ").trim();
             if (!valueProp) {

package/dist/interactive-templates.js ADDED Viewed

@@ -0,0 +1,158 @@
+/**
+ * Curated INTERACTIVE component templates (dogfood #5-full). `component <name>
+ * --interactive` materializes one of these instead of the bare shell, so a
+ * generated component behaves like the gallery demo (state + sample content),
+ * not an empty `<div className="ds-*">`.
+ *
+ * Each template is self-contained: it wears the compiled `.ds-<name>*` classes
+ * (so it still needs the component's `.css`), and drives behavior with local
+ * React state. Motion uses CANONICAL tokens (`--ds-motion-*-standard/base`), so
+ * the template is DS-agnostic. Ported from the platform's showcase renderers.
+ */
+/** Component names that have an interactive/rich template. */
+export function hasInteractiveTemplate(name) {
+    return name in TEMPLATES;
+}
+/** The `.tsx` source for a component's interactive/rich variant, or null. */
+export function interactiveTemplate(name) {
+    return TEMPLATES[name] ?? null;
+}
+const JOIN_FIELD = `"use client";
+import { useEffect, useRef, useState, type CSSProperties } from "react";
+import "./join-field.css";
+const EASE = "var(--ds-motion-easings-standard, cubic-bezier(0.2, 0.7, 0.2, 1))";
+const DUR = "var(--ds-motion-durations-base, 300ms)";
+/** One layer of the morph, sharing a single grid cell (no layout shift). */
+function layer(visible: boolean, fromBelow = true): CSSProperties {
+  return {
+    gridColumn: 1,
+    gridRow: 1,
+    transition: \`opacity \${DUR} \${EASE}, transform \${DUR} \${EASE}\`,
+    transitionDelay: visible ? "0.18s" : "0s",
+    opacity: visible ? 1 : 0,
+    transform: visible ? "translateY(0)" : \`translateY(\${fromBelow ? "4px" : "-4px"})\`,
+    pointerEvents: visible ? "auto" : "none",
+  };
+}
+/**
+ * Join CTA that morphs: pill -> inline email field + Join -> success. The three
+ * layers share one grid cell, so the surrounding layout never shifts. Wire the
+ * submit to your API where marked.
+ */
+export function JoinField({ label = "Join the next cohort" }: { label?: string }) {
+  const [open, setOpen] = useState(false);
+  const [joined, setJoined] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const expanded = open || joined;
+  useEffect(() => {
+    if (!open || joined) return;
+    const id = requestAnimationFrame(() => inputRef.current?.focus());
+    return () => cancelAnimationFrame(id);
+  }, [open, joined]);
+  return (
+    <div style={{ display: "flex", justifyContent: "center", width: "100%" }}>
+      <div
+        className="ds-join-field"
+        style={{ display: "inline-grid", alignItems: "center", width: "min(27rem, 100%)" }}
+      >
+        {/* Collapsed CTA */}
+        <button
+          type="button"
+          className="ds-join-field-trigger"
+          aria-hidden={expanded}
+          tabIndex={expanded ? -1 : 0}
+          onClick={() => setOpen(true)}
+          style={{ ...layer(!expanded, false), justifyContent: "center", width: "100%" }}
+        >
+          <span aria-hidden>✨</span>
+          {label}
+          <span aria-hidden>→</span>
+        </button>
+        {/* Email form */}
+        <form
+          aria-hidden={!open || joined}
+          onSubmit={(e) => {
+            e.preventDefault();
+            // TODO: send inputRef.current?.value to your API, then:
+            setJoined(true);
+          }}
+          style={{ ...layer(open && !joined), display: "flex", alignItems: "stretch", gap: 8 }}
+        >
+          <span className="ds-join-field-input" style={{ flex: 1, minWidth: 0 }}>
+            <span aria-hidden>✉</span>
+            <input
+              ref={inputRef}
+              type="email"
+              placeholder="Enter your best e-mail"
+              tabIndex={open && !joined ? 0 : -1}
+              style={{ flex: 1, minWidth: 0, height: "100%", border: "none", outline: "none", background: "transparent", color: "inherit", font: "inherit", padding: 0 }}
+            />
+          </span>
+          <button type="submit" className="ds-join-field-submit" tabIndex={open && !joined ? 0 : -1}>
+            Join
+          </button>
+        </form>
+        {/* Success (click to reset) */}
+        <button
+          type="button"
+          className="ds-join-field-success"
+          aria-hidden={!joined}
+          tabIndex={joined ? 0 : -1}
+          title="Reset"
+          onClick={() => {
+            setJoined(false);
+            setOpen(false);
+          }}
+          style={{ ...layer(joined), textAlign: "left", width: "100%" }}
+        >
+          <span aria-hidden>✓</span>
+          <span>
+            <strong style={{ display: "block", lineHeight: 1.2 }}>You&apos;re in.</strong>
+            <span style={{ opacity: 0.8, fontSize: "0.85em" }}>See you on day one.</span>
+          </span>
+        </button>
+      </div>
+    </div>
+  );
+}
+`;
+const STREAK = `import "./streak.css";
+/** Streak chip - flame + day count. Populated + prop-driven (not an empty shell). */
+export function Streak({ days = 12 }: { days?: number }) {
+  return (
+    <span className="ds-streak">
+      <span aria-hidden>🔥</span>
+      <span className="ds-streak-count">{days}</span>
+      <span className="ds-streak-label">day streak</span>
+    </span>
+  );
+}
+`;
+const XP_BAR = `import "./xp-bar.css";
+/** XP progress bar - the fill grows to \`percent\`. Prop-driven (not an empty shell). */
+export function XpBar({ percent = 62 }: { percent?: number }) {
+  return (
+    <div className="ds-xp-bar">
+      <div
+        className="ds-xp-bar-fill"
+        style={{ width: \`\${Math.max(0, Math.min(100, percent))}%\` }}
+      />
+    </div>
+  );
+}
+`;
+const TEMPLATES = {
+    "join-field": JOIN_FIELD,
+    streak: STREAK,
+    "xp-bar": XP_BAR,
+};

package/package.json CHANGED Viewed

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