synthesisui 0.1.17 → 0.1.18

package/dist/commands/add.js

@@ -110,8 +110,15 @@ export async function add(slug, opts) {
     }
     console.log(`  CLAUDE.md ${claudeMd.created ? "created" : "updated"} (${claudeMd.count} system(s) installed)`);
     console.log("");
+    const hasTheme = cssArtifacts.includes("theme.css");
     console.log("Next steps:");
-    console.log(`  • @import "_synthesisui/ds/${payload.slug}/tokens.css" in your global CSS (stable path)`);
+    console.log("  • In your global CSS, import the system (use a path relative to that CSS file -");
+    console.log("    from `app/globals.css` in a Next App Router project that means a leading `../`):");
+    console.log(`      @import "_synthesisui/ds/${payload.slug}/tokens.css";`);
+    if (hasTheme) {
+        console.log(`      @import "_synthesisui/ds/${payload.slug}/theme.css";   /* Tailwind v4 utilities - required */`);
+        console.log('    (import `theme.css` after `tokens.css`, both after `@import "tailwindcss";`)');
+    }
     console.log(`  • scope your UI with data-ds="${payload.slug}"`);
     console.log(`  • details and rules in _synthesisui/ds/${payload.slug}/v${v}/GUIDE.md`);
 }

package/dist/guide.js

@@ -159,11 +159,14 @@ ${meta.narrative}
 ${rulesNote}
 ## How to apply
 
-1. Import the tokens once in your project's global CSS:
+1. Import the system once in your project's global CSS, using a path **relative to that CSS
+   file** - from \`app/globals.css\` in a Next App Router project that means a leading \`../\`:
    \`\`\`css
-   @import "./_synthesisui/ds/${slug}/tokens.css";
+   @import "../_synthesisui/ds/${slug}/tokens.css";
    \`\`\`
-   (adjust the relative path to where your CSS lives.)
+   (drop the \`../\` if your global CSS sits at the project root.)${hasTailwind
+        ? `\n   **Using Tailwind (this project's default)? You also need \`theme.css\` right after \`tokens.css\` -\n   without it the DS-backed utilities (\`bg-primary\`, \`p-md\`…) aren't generated and the UI renders\n   unstyled. See "Styling with Tailwind v4" below for the full import block.**`
+        : ""}
 
 2. Wrap the tree that should use the system with the scope attribute:
    \`\`\`html

package/dist/index.js

@@ -52,14 +52,22 @@ function parseFlags(argv) {
             flags.help = true;
         }
         else if (arg.startsWith("--")) {
-            const key = arg.slice(2);
-            const next = argv[i + 1];
-            if (next !== undefined && !next.startsWith("--")) {
-                flags[key] = next;
-                i++;
+            const body = arg.slice(2);
+            const eq = body.indexOf("=");
+            if (eq !== -1) {
+                // `--key=value` form (e.g. --out=templates/page.tsx)
+                flags[body.slice(0, eq)] = body.slice(eq + 1);
             }
             else {
-                flags[key] = true;
+                // `--key value` form
+                const next = argv[i + 1];
+                if (next !== undefined && !next.startsWith("--")) {
+                    flags[body] = next;
+                    i++;
+                }
+                else {
+                    flags[body] = true;
+                }
             }
         }
         else {

package/package.json

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