synthesisui 0.4.2 → 0.4.4

package/dist/commands/clean.js

@@ -0,0 +1,120 @@
+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). Match by
+    //    the `create-next-app` utm markers its links carry (stable across Next
+    //    versions) plus the boilerplate copy - so a newer scaffold isn't missed.
+    const pagePath = join(appDir, "page.tsx");
+    const pageSrc = await readIf(pagePath);
+    if (pageSrc &&
+        /create-next-app|get started by editing|to get started, edit/i.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

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

@@ -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";
@@ -22,6 +23,7 @@ Usage - deterministic, FREE:
   synthesisui template <slug> <name>       materialize a whole page from a DS template
   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)
 
 Usage - AI, USES CREDITS (login required):
   synthesisui generate "<desc>"            AI-create a NEW component your DS doesn't have (token-only recipe)
@@ -39,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
 
@@ -199,6 +203,7 @@ async function main() {
                 dir,
                 version,
                 artifactsOnly: flags["artifacts-only"] === true,
+                interactive: flags.interactive === true,
             });
             break;
         }
@@ -242,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

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

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