synthesisui 0.1.0 → 0.1.2

package/README.md

@@ -1,7 +1,7 @@
 # synthesisui
 
 CLI para trazer design systems publicados no [SynthesisUI](https://www.synthesisui.com)
-para dentro de qualquer projeto. Materializa o sistema em `_local/ds/<slug>/` e injeta
+para dentro de qualquer projeto. Materializa o sistema em `_synthesisui/ds/<slug>/` e injeta
 um bloco gerenciado no `CLAUDE.md` da raiz, de forma que o Claude Code construa
 componentes seguindo o design system.
 
@@ -12,7 +12,7 @@ Sem instalar nada:
 ```bash
 npx synthesisui login        # conecta o CLI à sua conta (device-flow no browser)
 npx synthesisui list         # lista os design systems disponíveis
-npx synthesisui add <slug>   # traz um DS para _local/ds/<slug>/
+npx synthesisui add <slug>   # traz um DS para _synthesisui/ds/<slug>/
 ```
 
 Ou instale globalmente:
@@ -24,7 +24,7 @@ synthesisui add halogen
 
 ### O que o `add` materializa
 
-Em `_local/ds/<slug>/`:
+Em `_synthesisui/ds/<slug>/`:
 
 - `design-system.json` — a verdade canônica do design system
 - `tokens.css` — CSS custom properties escopadas por `data-ds`

package/dist/claude-md.js

@@ -2,9 +2,9 @@ import { readdir, readFile, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 const START = "<!-- synthesisui:start -->";
 const END = "<!-- synthesisui:end -->";
-/** Lê os DSs instalados a partir dos .lock em _local/ds/<slug>/. */
+/** Lê os DSs instalados a partir dos .lock em _synthesisui/ds/<slug>/. */
 async function readInstalled(projectRoot) {
-    const dsDir = join(projectRoot, "_local", "ds");
+    const dsDir = join(projectRoot, "_synthesisui", "ds");
     let entries = [];
     try {
         const dirents = await readdir(dsDir, { withFileTypes: true });
@@ -31,14 +31,16 @@ function renderRegion(installed) {
         return `${START}\n${END}`;
     }
     const lines = installed
-        .map((ds) => `- **${ds.name}** (\`${ds.slug}\`, v${ds.version}) — guia: \`_local/ds/${ds.slug}/GUIDE.md\``)
+        .map((ds) => `- **${ds.name}** (\`${ds.slug}\`, v${ds.version}) — guia: \`_synthesisui/ds/${ds.slug}/GUIDE.md\``)
         .join("\n");
     const body = `## Design Systems (via SynthesisUI)
 
 Este projeto usa design system(s) trazido(s) pelo \`synthesisui\` CLI. **Ao criar ou editar
 componentes, leia o GUIDE.md do sistema e siga-o:** use apenas tokens semânticos
 (\`var(--ds-color-semantic-*)\`, \`--ds-spacing-*\`, etc.), escope a UI com \`data-ds="<slug>"\`,
-e reaproveite as classes \`.ds-*\`. Não use valores crus fora da escala do sistema.
+e reaproveite as classes \`.ds-*\`. Não use valores crus fora da escala do sistema. **Para revisar um
+componente, crie uma página de amostra isolada (ex.: \`app/synthesisui-samples/<componente>/\`) — não
+aplique a páginas reais de produção a menos que seja pedido.**
 
 ${lines}
 

package/dist/commands/add.js

@@ -5,14 +5,14 @@ import { resolveRegistry } from "../config.js";
 import { buildGuide } from "../guide.js";
 import { fetchDesignSystem } from "../registry.js";
 /**
- * Materializa um DS publicado em `_local/ds/<slug>/` e atualiza o CLAUDE.md.
+ * Materializa um DS publicado em `_synthesisui/ds/<slug>/` e atualiza o CLAUDE.md.
  */
 export async function add(slug, opts) {
     const base = resolveRegistry(opts.registry);
     const projectRoot = opts.dir ?? process.cwd();
     console.log(`→ buscando "${slug}" em ${base} …`);
     const payload = await fetchDesignSystem(base, slug);
-    const targetDir = join(projectRoot, "_local", "ds", payload.slug);
+    const targetDir = join(projectRoot, "_synthesisui", "ds", payload.slug);
     await mkdir(targetDir, { recursive: true });
     // 1. artifacts compilados pelo servidor (tokens.css, e futuros theme.css…)
     for (const [filename, content] of Object.entries(payload.artifacts)) {
@@ -39,12 +39,12 @@ export async function add(slug, opts) {
         "GUIDE.md",
         ".lock",
     ];
-    console.log(`✓ ${payload.name} v${payload.version} → _local/ds/${payload.slug}/`);
+    console.log(`✓ ${payload.name} v${payload.version} → _synthesisui/ds/${payload.slug}/`);
     console.log(`  ${files.join(", ")}`);
     console.log(`  CLAUDE.md ${claudeMd.created ? "criado" : "atualizado"} (${claudeMd.count} sistema(s) instalado(s))`);
     console.log("");
     console.log("Próximos passos:");
-    console.log(`  • @import "_local/ds/${payload.slug}/tokens.css" no seu CSS global`);
+    console.log(`  • @import "_synthesisui/ds/${payload.slug}/tokens.css" no seu CSS global`);
     console.log(`  • escope sua UI com data-ds="${payload.slug}"`);
-    console.log(`  • detalhes e regras em _local/ds/${payload.slug}/GUIDE.md`);
+    console.log(`  • detalhes e regras em _synthesisui/ds/${payload.slug}/GUIDE.md`);
 }

package/dist/guide.js

@@ -44,7 +44,7 @@ ${meta.narrative}
 
 1. Importe os tokens uma vez no CSS global do projeto:
    \`\`\`css
-   @import "./_local/ds/${slug}/tokens.css";
+   @import "./_synthesisui/ds/${slug}/tokens.css";
    \`\`\`
    (ajuste o caminho relativo conforme a localização do seu CSS.)
 
@@ -61,7 +61,7 @@ ${hasAlt
    \`\`\`
 `
         : ""}
-Artefatos disponíveis em \`_local/ds/${slug}/\`: ${artifactList}, \`design-system.json\` (verdade canônica), \`GUIDE.md\` (este arquivo).
+Artefatos disponíveis em \`_synthesisui/ds/${slug}/\`: ${artifactList}, \`design-system.json\` (verdade canônica), \`GUIDE.md\` (este arquivo).
 
 ---
 
@@ -83,6 +83,16 @@ Artefatos disponíveis em \`_local/ds/${slug}/\`: ${artifactList}, \`design-syst
 
 ---
 
+## Onde testar/preview
+
+**Preview isolado, nunca em página real.** Ao criar ou demonstrar um componente, gere uma página de
+amostra dedicada — \`app/synthesisui-samples/<componente>/\` no Next.js App Router (ou a rota/pasta de
+samples equivalente na stack do projeto). **Não** aplique o componente a páginas reais de produção
+(home, layout, rotas existentes) a menos que seja explicitamente pedido. As amostras deixam revisar o
+componente no contexto do design system sem tocar no app.
+
+---
+
 ## Componentes prontos
 
 Cada recipe vira uma classe \`.ds-<nome>\` (dentro do escopo \`[data-ds="${slug}"]\`).

package/dist/index.js

@@ -8,7 +8,7 @@ const HELP = `synthesisui — traz design systems do SynthesisUI para o seu proj
 Uso:
   synthesisui login [opções]           conecta o CLI à sua conta (device-flow)
   synthesisui list [opções]            lista os DSs publicados
-  synthesisui add <slug> [opções]      materializa um DS em _local/ds/<slug>/
+  synthesisui add <slug> [opções]      materializa um DS em _synthesisui/ds/<slug>/
 
 Opções:
   --registry <url>   URL do registry (ou env SYNTHESISUI_REGISTRY_URL)

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "synthesisui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Traz design systems do SynthesisUI para qualquer projeto (materializa em _local/ds/).",
   "type": "module",
   "bin": {
     "synthesisui": "dist/index.js"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "keywords": [
     "synthesisui",
     "design-system",