synthesisui 0.1.10 → 0.1.12

package/dist/commands/generate.js

@@ -0,0 +1,53 @@
+import { mkdir, readdir, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import { resolveRegistry } from "../config.js";
+import { postGenerate, RegistryError } from "../registry.js";
+/** Slugs materialized under `_synthesisui/ds/` in the project. */
+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);
+    }
+    catch {
+        return [];
+    }
+}
+/**
+ * Generates a token-only component recipe for the project's design system
+ * (chat-gen PRO, hosted) and materializes it additively under
+ * `_synthesisui/ds/<slug>/generated/`. The recipe wears the DS by construction;
+ * the prompt lives server-side. Nothing else in the project is touched.
+ */
+export async function generate(description, opts) {
+    const base = resolveRegistry(opts.registry);
+    const root = opts.dir ?? process.cwd();
+    let slug = opts.ds;
+    if (!slug) {
+        const slugs = await installedSlugs(root);
+        if (slugs.length === 1) {
+            slug = slugs[0];
+        }
+        else if (slugs.length === 0) {
+            throw new RegistryError("No design system installed here. Run `synthesisui add <slug>` first, or pass --ds <slug>.");
+        }
+        else {
+            throw new RegistryError(`Multiple design systems installed (${slugs.join(", ")}). Pick one with --ds <slug>.`);
+        }
+    }
+    console.log(`→ generating a component for "${slug}" at ${base} …`);
+    const res = await postGenerate(base, { slug, description, name: opts.name });
+    const dir = join(root, "_synthesisui", "ds", slug, "generated");
+    await mkdir(dir, { recursive: true });
+    await writeFile(join(dir, `${res.name}.json`), `${JSON.stringify(res.recipe, null, 2)}\n`, "utf8");
+    await writeFile(join(dir, `${res.name}.css`), `${res.css}\n`, "utf8");
+    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}`);
+    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)`);
+}

package/dist/guide.js

@@ -94,6 +94,9 @@ its typographic identity. Load them once (any one approach):
     const hasTailwind = "theme.css" in payload.artifacts;
     const hasParts = Object.values(components).some((r) => r.parts && Object.keys(r.parts).length > 0);
     const componentLines = Object.entries(components).map(([cname, recipe]) => componentEntry(cname, recipe));
+    // Engagement blocks (gamification library) — category apart from core components.
+    const blockEntries = Object.entries(doc.blocks ?? {});
+    const blockLines = blockEntries.map(([bname, recipe]) => componentEntry(bname, recipe));
     const artifactList = Object.keys(payload.artifacts)
         .map((f) => `\`${f}\``)
         .join(", ");
@@ -278,7 +281,21 @@ Each recipe becomes a \`.ds-<name>\` class (inside the \`[data-ds="${slug}"]\` s
 multi-part components expose \`.ds-<name>-<part>\` classes (listed under each).
 
 ${componentLines.join("\n\n")}
+${blockEntries.length
+        ? `
+---
+
+## Engagement blocks (optional)
 
+A small gamification library the AI advisor (\`synthesisui advise\`) can propose — same
+\`.ds-<name>\` recipe shape as the components above, token-only so they wear the system. Use them
+**only where they fit the product** (progress, retention, recognition); they're a library to compose
+from, not a default — and lean against over-gamifying a serious B2B product. Each is a \`.ds-<name>\`
+class inside the \`[data-ds="${slug}"]\` scope; multi-part ones expose \`.ds-<name>-<part>\`.
+
+${blockLines.join("\n\n")}
+`
+        : ""}
 ---
 
 _Full canonical source of truth (including values and keyframes) in \`design-system.json\`._

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 { generate } from "./commands/generate.js";
 import { list } from "./commands/list.js";
 import { login } from "./commands/login.js";
 import { RegistryError } from "./registry.js";
@@ -11,11 +12,14 @@ Usage:
   synthesisui list [options]           list the published design systems
   synthesisui add <slug> [options]     materialize a DS into _synthesisui/ds/<slug>/
   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)
 
 Options:
   --registry <url>   registry URL (or env SYNTHESISUI_REGISTRY_URL)
   --dir <path>       consumer project root (default: current directory)
   --version <n>      install a specific version (default: latest)
+  --ds <slug>        target design system for generate (default: the installed one)
+  --name <name>      preferred component name for generate
   -h, --help         this help
 
 Examples:
@@ -25,6 +29,7 @@ Examples:
   synthesisui add halogen --version 3
   synthesisui add halogen --registry http://localhost:3737
   synthesisui advise "habit-building app for tracking personal finances"
+  synthesisui generate "an upgrade banner with a title, message and a primary CTA"
 `;
 /** Extracts simple `--flag value` pairs and the remaining positionals. */
 function parseFlags(argv) {
@@ -97,6 +102,18 @@ async function main() {
             await advise(valueProp, { registry, dir });
             break;
         }
+        case "generate": {
+            const description = args.join(" ").trim();
+            if (!description) {
+                console.error('error: describe the component — `synthesisui generate "<description>"`');
+                process.exitCode = 1;
+                return;
+            }
+            const ds = typeof flags.ds === "string" ? flags.ds : undefined;
+            const name = typeof flags.name === "string" ? flags.name : undefined;
+            await generate(description, { registry, dir, ds, name });
+            break;
+        }
         default:
             console.error(`unknown command: "${command}"\n`);
             console.log(HELP);

package/dist/registry.js

@@ -68,3 +68,29 @@ export async function postAdvisor(base, context) {
     }
     return (await res.json());
 }
+/**
+ * Gera uma recipe token-only (chat-gen PRO) via `POST /api/ai/generate`.
+ * Gated + metered server-side: 401 = sem login, 429 = cota diária estourada.
+ */
+export async function postGenerate(base, payload) {
+    let res;
+    try {
+        res = await fetch(`${base}/api/ai/generate`, {
+            method: "POST",
+            headers: { "content-type": "application/json", ...(await authHeaders()) },
+            body: JSON.stringify(payload),
+        });
+    }
+    catch {
+        throw new RegistryError(`Could not reach the registry at ${base}. ` +
+            `Check the URL (--registry / SYNTHESISUI_REGISTRY_URL) and your connection.`);
+    }
+    if (res.status === 401) {
+        throw new RegistryError("Not authenticated. Run `synthesisui login` first.");
+    }
+    if (!res.ok) {
+        const body = (await res.json().catch(() => ({})));
+        throw new RegistryError(body.message ?? `Generate responded ${res.status}.`);
+    }
+    return (await res.json());
+}

package/package.json

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