synthesisui 0.1.23 → 0.1.24

package/dist/commands/component.js

@@ -0,0 +1,27 @@
+import { mkdir, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import { resolveRegistry } from "../config.js";
+import { fetchComponent } from "../registry.js";
+/**
+ * Brings ONE component from a design system into the project (granular "bring
+ * specific", INS-18 fatia 3) - its recipe + compiled CSS, written under
+ * `_synthesisui/ds/<slug>/components/`. Handy for a component you refit/created
+ * on the platform. The component's styles reference the DS tokens, so the system
+ * itself must be installed (`synthesisui add <slug>`) for `tokens.css` to resolve.
+ */
+export async function component(slug, name, opts) {
+    const base = resolveRegistry(opts.registry);
+    const root = opts.dir ?? process.cwd();
+    console.log(`→ fetching "${name}" from "${slug}" …`);
+    const res = await fetchComponent(base, slug, name, opts.version);
+    const dir = join(root, "_synthesisui", "ds", slug, "components");
+    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");
+    console.log(`✓ ${res.name} → _synthesisui/ds/${slug}/components/${res.name}.{json,css}  (${slug} v${res.version})`);
+    console.log("");
+    console.log("Use it:");
+    console.log(`  • ensure the DS is installed: synthesisui add ${slug} (provides tokens.css)`);
+    console.log(`  • @import "_synthesisui/ds/${slug}/components/${res.name}.css" in your CSS`);
+    console.log(`  • <div data-ds="${slug}"><div class="ds-${res.name}">…</div></div>`);
+}

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 { component } from "./commands/component.js";
 import { generate } from "./commands/generate.js";
 import { init } from "./commands/init.js";
 import { list } from "./commands/list.js";
@@ -16,6 +17,7 @@ Usage:
   synthesisui list [options]               list the published design systems
   synthesisui add <slug> [options]         materialize a DS into _synthesisui/ds/<slug>/
   synthesisui template <slug> <name>       materialize a whole page from a DS template
+  synthesisui component <slug> <name>      bring one component (recipe + css) into the project
   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)
@@ -41,6 +43,7 @@ Examples:
   synthesisui add halogen --version 3
   synthesisui template halogen dashboard-sidebar
   synthesisui template halogen landing --out app/page.tsx
+  synthesisui component halogen pricing-tier
   synthesisui use halogen "a pricing section with three tiers and a highlighted plan"
   synthesisui use halogen "make the card shadow softer in components/StatCard.tsx"
   synthesisui advise "habit-building app for tracking personal finances"
@@ -153,6 +156,26 @@ async function main() {
             await template(slug, name, { registry, dir, out, target, version });
             break;
         }
+        case "component": {
+            const slug = args[0];
+            const name = args[1];
+            if (!slug || !name) {
+                console.error("error: provide slug and component name - `synthesisui component <slug> <name>`");
+                process.exitCode = 1;
+                return;
+            }
+            let version;
+            if (typeof flags.version === "string") {
+                version = Number.parseInt(flags.version.replace(/^v/i, ""), 10);
+                if (!Number.isInteger(version) || version < 1) {
+                    console.error(`error: invalid --version "${flags.version}" - use an integer ≥ 1`);
+                    process.exitCode = 1;
+                    return;
+                }
+            }
+            await component(slug, name, { registry, dir, version });
+            break;
+        }
         case "use": {
             const slug = args[0];
             if (!slug) {

package/dist/registry.js

@@ -63,6 +63,27 @@ export async function fetchTemplate(base, slug, template, target, version) {
     }
     return (await res.json());
 }
+/**
+ * Fetches ONE component from a DS (`?component=<name>`): its recipe + compiled
+ * CSS. Granular "bring specific" - the system must exist; works for public DS
+ * without login (private/owned needs the token).
+ */
+export async function fetchComponent(base, slug, name, version) {
+    const url = new URL(`${base}/api/registry/ds/${encodeURIComponent(slug)}`);
+    url.searchParams.set("component", name);
+    if (version != null)
+        url.searchParams.set("version", String(version));
+    const res = await request(url.toString());
+    if (res.status === 404) {
+        const body = (await res.json().catch(() => ({})));
+        throw new RegistryError(body.message ??
+            `No component "${name}" in "${slug}". Run \`synthesisui add ${slug}\` and check its components.`);
+    }
+    if (!res.ok) {
+        throw new RegistryError(`Registry responded ${res.status} while fetching "${name}".`);
+    }
+    return (await res.json());
+}
 /**
  * Calls the hosted advisor (`POST /api/ai/advisor`). Gated + metered server-side:
  * 401 = not logged in, 429 = daily quota reached. Sends the Bearer token if present.

package/package.json

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