@zvoove/unity-ui 2.26.2 → 2.27.0

package/dist/bin/cli.mjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-#!/usr/bin/env node
+import{createRequire}from"module";const require=createRequire(import.meta.url);
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -91,7 +91,7 @@ var init_config = __esm({
         },
         rules: {
           output: ".",
-          targets: ["cursorrules", "claude"]
+          filename: "UNITYUI.md"
         }
       }
     };
@@ -3668,31 +3668,7 @@ function ask(rl, question, defaultValue) {
     );
   });
 }
-function askChoice(rl, question, options, defaultValue) {
-  const optionsList = options.map((o) => o.label).join(" / ");
-  return new Promise((resolve) => {
-    rl.question(
-      `  \x1B[36m?\x1B[0m ${question} \x1B[90m(${defaultValue})\x1B[0m [${optionsList}] `,
-      (answer) => {
-        const trimmed = answer.trim().toLowerCase();
-        const match = options.find(
-          (o) => o.label.toLowerCase() === trimmed || o.alias === trimmed
-        );
-        if (match) {
-          resolve(match.value);
-        } else {
-          const defaultOption = options.find(
-            (o) => o.label.toLowerCase() === defaultValue.toLowerCase() || o.alias === defaultValue.toLowerCase()
-          );
-          resolve(defaultOption ? defaultOption.value : options[0].value);
-        }
-      }
-    );
-  });
-}
 function generateConfigContent(config) {
-  const targets = config.ai.rules.targets;
-  const targetsStr = targets.map((t) => `'${t}'`).join(", ");
   return `// unity-ui.config.mjs \u2014 generated by \`npx unity-ui init\`
 import { defineConfig } from '@zvoove/unity-ui/config';
 
@@ -3707,7 +3683,6 @@ export default defineConfig({
     },
     rules: {
       output: '${config.ai.rules.output}',
-      targets: [${targetsStr}],
     },
   },
 });
@@ -3735,17 +3710,6 @@ async function runInit() {
     "Where is your main index/barrel file?",
     DEFAULTS.components.indexFile
   );
-  const rulesTargets = await askChoice(
-    rl,
-    "Generate AI rules for which tools?",
-    [
-      { label: "Both", alias: "b", value: ["cursorrules", "claude"] },
-      { label: "Claude", alias: "c", value: ["claude"] },
-      { label: "Cursor", alias: "u", value: ["cursorrules"] },
-      { label: "None", alias: "n", value: [] }
-    ],
-    "Both"
-  );
   const skillsOutput = await ask(
     rl,
     "Where should Agent Skills be generated?",
@@ -3764,7 +3728,7 @@ async function runInit() {
     },
     ai: {
       skills: { output: skillsOutput },
-      rules: { output: rulesOutput, targets: rulesTargets }
+      rules: { output: rulesOutput }
     }
   };
   const content = generateConfigContent(config);
@@ -3775,31 +3739,151 @@ async function runInit() {
   console.log(`  Components:  ${config.components.directory}/`);
   console.log(`  Index file:  ${config.components.indexFile}`);
   console.log(`  Skills dir:  ${config.ai.skills.output}/skills/`);
-  if (config.ai.rules.targets.length > 0) {
-    console.log(
-      `  Rules:       ${config.ai.rules.targets.join(", ")} \u2192 ${config.ai.rules.output}/`
-    );
-  } else {
-    console.log(`  Rules:       disabled`);
-  }
+  console.log(`  Rules:       ${config.ai.rules.output}/UNITYUI.md`);
   console.log("");
 }
 
 // bin/commands/rules.mjs
 init_config();
-
-// bin/commands/skills.mjs
 import fs4 from "fs";
 import path4 from "path";
+function generateRulesContent() {
+  return `# Unity UI \u2014 Rules
+
+> Auto-generated by \`npx unity-ui rules\`. Do not edit manually.
+> Full API docs live in Agent Skills \u2014 this file contains only conventions and routing.
+
+## General Rules
+
+- Always import components from \`@zvoove/unity-ui\`
+- Never recreate components that exist in this library
+- Use responsive props where applicable (single value or breakpoint object)
+- Use design tokens from theme.css \u2014 never hardcode colors, spacing, or shadows
+- Use \`tv()\` from tailwind-variants for component styling \u2014 never inline conditional classes
+- Dark mode uses \`data-theme="dark"\` attribute, not \`className="dark"\`
+- Default/placeholder texts should be in German
+- Font (Source Sans 3) is bundled via \`@font-face\` in theme.css \u2014 no extra setup needed
+- NEVER pass \`className\` or \`style\` to ANY Unity UI component \u2014 use their props API only; put token-based Tailwind on native HTML wrappers (\`div\`, \`section\`, etc.) when you need extra layout or chrome
+- Stack \`align\` defaults to \`baseline\` \u2014 always set \`align\` explicitly when centering or stretching is needed
+- Stack with a Divider needs \`width="100%"\` \u2014 otherwise the divider will not span the full container width
+- Use Stack and Grid for layout \u2014 do not use Card, div, or CSS for layout
+- Card is a visual container, NOT a layout tool \u2014 use Stack/Grid INSIDE a Card
+- Use Typography for all text \u2014 never use raw \`<p>\`, \`<h1>\`, \`<span>\` etc.
+- Use the spacing scale for gap/padding/margin \u2014 never use arbitrary pixel values
+- Icons use semantic names as strings (e.g., \`"search"\`, \`"delete"\`, \`"edit"\`) \u2014 never import Phosphor icon components directly
+
+## Skill Routing
+
+Before building UI with Unity UI, load the relevant skill for your task:
+
+| Task | Skill to load |
+|------|---------------|
+| Installation & setup | \`unity-ui-setup\` |
+| Find the right component | \`unity-ui-index\` |
+| Page layout / app shell | \`unity-ui-layouts\` |
+| Build a form (with validation) | \`unity-ui-forms\` |
+| Styling / Tailwind / design tokens | \`unity-ui-styling\` |
+| Create a custom component | \`unity-ui-custom-component\` |
+| Dark mode / theme toggle | \`unity-ui-dark-mode\` |
+| Icon names | \`unity-ui-icons\` |
+| Migrate from shadcn/ui | \`unity-ui-migrate-shadcn\` |
+| Migrate from MUI | \`unity-ui-migrate-mui\` |
+| Figma Code Connect | \`unity-ui-figma-code-connect\` |
+
+## Component Directory
+
+Load the matching skill for full props, examples, and rules:
+
+| Component | Skill |
+|-----------|-------|
+| Accordion | \`unity-ui-accordion\` |
+| Avatar / AvatarGroup | \`unity-ui-avatar\` |
+| Badge | \`unity-ui-badge\` |
+| Breadcrumbs | \`unity-ui-breadcrumbs\` |
+| Button | \`unity-ui-button\` |
+| Card | \`unity-ui-card\` |
+| Checkbox | \`unity-ui-checkbox\` |
+| Chip | \`unity-ui-chip\` |
+| CodeBlock | \`unity-ui-code-block\` |
+| ConfirmationCard | \`unity-ui-confirmation-card\` |
+| ContentBlock | \`unity-ui-content-block\` |
+| DatePicker | \`unity-ui-date-picker\` |
+| Dialog | \`unity-ui-dialog\` |
+| Divider | \`unity-ui-divider\` |
+| Expandable | \`unity-ui-expandable\` |
+| Flag Icons | \`unity-ui-flag-icons\` |
+| FormLabel | \`unity-ui-form-label\` |
+| Grid | \`unity-ui-grid\` |
+| Icon | \`unity-ui-icon\` |
+| InfoBox | \`unity-ui-info-box\` |
+| ListMenu | \`unity-ui-list-menu\` |
+| MidSectionMenus | \`unity-ui-mid-section-menus\` |
+| Pagination | \`unity-ui-pagination\` |
+| PopUpMenu | \`unity-ui-pop-up-menu\` |
+| ProgressIndicator | \`unity-ui-progress-indicator\` |
+| Radio / RadioGroup | \`unity-ui-radio\` |
+| Segment / SegmentGroup | \`unity-ui-segment\` |
+| Select | \`unity-ui-select\` |
+| Sheet | \`unity-ui-sheet\` |
+| SideNavigation | \`unity-ui-side-navigation\` |
+| Skeleton | \`unity-ui-skeleton\` |
+| Snackbar | \`unity-ui-snackbar\` |
+| Stack | \`unity-ui-stack\` |
+| Switch | \`unity-ui-switch\` |
+| Table | \`unity-ui-table\` |
+| Tabs | \`unity-ui-tabs\` |
+| Tag | \`unity-ui-tag\` |
+| TextField | \`unity-ui-text-field\` |
+| Textarea | \`unity-ui-textarea\` |
+| Tooltip | \`unity-ui-tooltip\` |
+| TopBar | \`unity-ui-top-bar\` |
+| Typography | \`unity-ui-typography\` |
+| Uploader | \`unity-ui-uploader\` |
+| useBreakpoint | \`unity-ui-use-breakpoint\` |
+| useClickOutside | \`unity-ui-use-click-outside\` |
+
+> If unsure which component to use, load \`unity-ui-index\` for the full equivalence table (shadcn/ui \u2192 Unity UI).
+`;
+}
+async function runRules({ output: outputDir } = {}) {
+  const config = await loadConfig();
+  const resolvedDir = path4.resolve(
+    process.cwd(),
+    outputDir || config.ai.rules.output
+  );
+  const filename = config.ai.rules.filename || "UNITYUI.md";
+  const rulesContent = generateRulesContent();
+  fs4.mkdirSync(resolvedDir, { recursive: true });
+  const rulesPath = path4.join(resolvedDir, filename);
+  fs4.writeFileSync(rulesPath, rulesContent, "utf8");
+  const relativePath = path4.relative(process.cwd(), rulesPath);
+  console.log(`
+  \u2705 Generated ${relativePath}
+`);
+  console.log(`  Add a reference to your AI rules file:
+`);
+  console.log(`  \x1B[36mCLAUDE.md / .cursorrules / .windsurfrules:\x1B[0m`);
+  console.log(`    See @${relativePath} for Unity UI design system rules.
+`);
+  console.log(`  \x1B[36m.github/copilot-instructions.md:\x1B[0m`);
+  console.log(
+    `    This project uses Unity UI. See ${relativePath} for conventions.
+`
+  );
+}
+
+// bin/commands/skills.mjs
+import fs5 from "fs";
+import path5 from "path";
 import { fileURLToPath as fileURLToPath2 } from "url";
 var __filename2 = fileURLToPath2(import.meta.url);
-var __dirname2 = path4.dirname(__filename2);
-var packageRoot = path4.resolve(__dirname2, "..", "..");
+var __dirname2 = path5.dirname(__filename2);
+var packageRoot = path5.resolve(__dirname2, "..", "..");
 function findLlmsTxt() {
-  const fromDist = path4.resolve(packageRoot, "dist", "llms.txt");
-  if (fs4.existsSync(fromDist)) return fromDist;
-  const fromRoot = path4.resolve(packageRoot, "llms.txt");
-  if (fs4.existsSync(fromRoot)) return fromRoot;
+  const fromDist = path5.resolve(packageRoot, "dist", "llms.txt");
+  if (fs5.existsSync(fromDist)) return fromDist;
+  const fromRoot = path5.resolve(packageRoot, "llms.txt");
+  if (fs5.existsSync(fromRoot)) return fromRoot;
   return null;
 }
 var NAME_MAP = {
@@ -5408,9 +5492,9 @@ If the project contains components from shadcn/ui, MUI, Ant Design, Lovable, Fig
 `;
 }
 function writeSkill(outputDir, slug, content) {
-  const skillDir = path4.join(outputDir, slug);
-  fs4.mkdirSync(skillDir, { recursive: true });
-  fs4.writeFileSync(path4.join(skillDir, "SKILL.md"), content, "utf8");
+  const skillDir = path5.join(outputDir, slug);
+  fs5.mkdirSync(skillDir, { recursive: true });
+  fs5.writeFileSync(path5.join(skillDir, "SKILL.md"), content, "utf8");
 }
 async function runSkills({ output: outputBase } = {}) {
   const { loadConfig: loadConfig2 } = await Promise.resolve().then(() => (init_config(), config_exports));
@@ -5424,13 +5508,13 @@ async function runSkills({ output: outputBase } = {}) {
     process.exit(1);
   }
   const projectRoot = process.cwd();
-  const outputDir = path4.resolve(projectRoot, resolvedOutput, "skills");
-  const content = fs4.readFileSync(llmsPath, "utf8");
+  const outputDir = path5.resolve(projectRoot, resolvedOutput, "skills");
+  const content = fs5.readFileSync(llmsPath, "utf8");
   const parsed = parseLlmsTxt(content);
-  if (fs4.existsSync(outputDir)) {
-    for (const entry of fs4.readdirSync(outputDir)) {
+  if (fs5.existsSync(outputDir)) {
+    for (const entry of fs5.readdirSync(outputDir)) {
       if (entry.startsWith("unity-ui-")) {
-        fs4.rmSync(path4.join(outputDir, entry), { recursive: true });
+        fs5.rmSync(path5.join(outputDir, entry), { recursive: true });
       }
     }
   }
@@ -5473,7 +5557,7 @@ async function runSkills({ output: outputBase } = {}) {
     generateFigmaCodeConnectSkill()
   );
   count += 12;
-  const relOutput = path4.relative(projectRoot, outputDir);
+  const relOutput = path5.relative(projectRoot, outputDir);
   console.log(`
   Unity UI \u2014 Agent Skills Generator
 `);
@@ -5512,96 +5596,6 @@ async function runSkills({ output: outputBase } = {}) {
 `);
 }
 
-// bin/commands/rules.mjs
-import fs5 from "fs";
-import path5 from "path";
-function generateRulesContent(llmsContent) {
-  return `# Unity UI \u2014 AI Rules
-
-> Auto-generated by \`npx unity-ui rules\`. Do not edit manually.
-> Source: @zvoove/unity-ui llms.txt
-
-## General Rules
-
-- Always import components from \`@zvoove/unity-ui\`
-- Never recreate components that exist in this library
-- Use responsive props where applicable (single value or breakpoint object)
-- Use design tokens from theme.css \u2014 never hardcode colors, spacing, or shadows
-- Use \`tv()\` from tailwind-variants for component styling \u2014 never inline conditional classes
-- Dark mode uses \`data-theme="dark"\` attribute, not \`className="dark"\`
-- Default/placeholder texts should be in German
-- Font (Source Sans 3) is bundled via \`@font-face\` in theme.css \u2014 no extra setup needed
-- Never pass \`className\` or \`style\` to Unity UI components \u2014 use their props only; put token-based Tailwind on native HTML wrappers (\`div\`, \`section\`, etc.) when you need extra layout or chrome
-
-## Setup
-
-\`\`\`bash
-npm install @zvoove/unity-ui
-\`\`\`
-
-\`\`\`css
-@import '@zvoove/unity-ui/theme.css';
-@import '@zvoove/unity-ui/unity-ui.css';
-\`\`\`
-
-## Responsive Props
-
-Breakpoints: minimum (0px), mobile (320px), tablet (768px), laptop (1024px), desktop (1440px).
-
-\`\`\`tsx
-<Button size="md" />
-<Button size={{ mobile: 'sm', tablet: 'md', desktop: 'lg' }} />
-\`\`\`
-
-## Component Reference
-
-${llmsContent}
-`;
-}
-async function runRules({ output: outputDir } = {}) {
-  const config = await loadConfig();
-  const resolvedDir = path5.resolve(
-    process.cwd(),
-    outputDir || config.ai.rules.output
-  );
-  const targets = config.ai.rules.targets;
-  const llmsPath = findLlmsTxt();
-  if (!llmsPath) {
-    console.error(
-      "Could not find llms.txt. Make sure @zvoove/unity-ui is installed and built."
-    );
-    process.exit(1);
-  }
-  const llmsContent = fs5.readFileSync(llmsPath, "utf8");
-  const rulesContent = generateRulesContent(llmsContent);
-  fs5.mkdirSync(resolvedDir, { recursive: true });
-  if (targets.includes("cursorrules")) {
-    const cursorRulesPath = path5.join(resolvedDir, ".cursorrules");
-    fs5.writeFileSync(cursorRulesPath, rulesContent, "utf8");
-    console.log(
-      `\u2705 Generated ${path5.relative(process.cwd(), cursorRulesPath)}`
-    );
-  }
-  if (targets.includes("claude")) {
-    const claudeMdPath = path5.join(resolvedDir, "CLAUDE.md");
-    fs5.writeFileSync(claudeMdPath, rulesContent, "utf8");
-    console.log(`\u2705 Generated ${path5.relative(process.cwd(), claudeMdPath)}`);
-  }
-  if (targets.length > 0) {
-    console.log(
-      `
-  Your AI assistant now knows how to use Unity UI components.
-`
-    );
-  } else {
-    console.log(
-      `
-  No rule targets configured. Set targets in unity-ui.config.mjs.
-`
-    );
-  }
-}
-
 // node_modules/.pnpm/commander@14.0.3/node_modules/commander/esm.mjs
 var import_index = __toESM(require_commander(), 1);
 var {
@@ -5625,5 +5619,5 @@ program2.name("unity-ui").description("Unity UI Design System CLI").version("1.0
 program2.command("init").description("Initialize unity-ui.config.mjs with project settings").action(() => runInit());
 program2.command("skills").description("Generate Agent Skills files from llms.txt").option("-o, --output <dir>", "Base directory for skills output").action((opts) => runSkills(opts));
 program2.command("create").description("Scaffold a new component").argument("<name>", "Component name (PascalCase)").action((name) => runCreate(name));
-program2.command("rules").description("Generate AI rules files (.cursorrules + CLAUDE.md)").option("-o, --output <dir>", "Output directory").action((opts) => runRules(opts));
+program2.command("rules").description("Generate AI rules file (UNITYUI.md)").option("-o, --output <dir>", "Output directory").action((opts) => runRules(opts));
 program2.parse();

package/dist/bin/generate-skills.mjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-#!/usr/bin/env node
+import{createRequire}from"module";const require=createRequire(import.meta.url);
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __esm = (fn, res) => function __init() {
@@ -62,7 +62,7 @@ var init_config = __esm({
         },
         rules: {
           output: ".",
-          targets: ["cursorrules", "claude"]
+          filename: "UNITYUI.md"
         }
       }
     };