@nqlib/nqui 0.6.0 → 0.6.1

package/docs/nqui-skills/nqui-components/SKILL.md

@@ -64,6 +64,7 @@ Before picking components, read **`../COMPOSITION.md`** (or `docs/nqui-skills/CO
 ## Key Conventions
 
 - React 18+ and 19 supported
+- **cmdk list rows:** nqui ≥ 0.6.1 uses `aria-selected:bg-accent` in `floatingListItemInteractive`. Do not add custom `data-selected:bg-accent` on `CommandItem` (React 19 + `[data-selected]` highlights every row). See `docs/components/nqui-command-palette.md`.
 - Control sizes: sm=h-6, default=h-7, lg=h-8
 - Enhanced vs Core: default is enhanced; use Core* for plain
 - Z-index: CSS vars from elevation.css only

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nqlib/nqui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "A React component library with enhanced UI components and developer tools",
   "type": "module",
   "main": "./dist/nqui.cjs.js",

package/scripts/build-styles.js

@@ -103,7 +103,8 @@ function extractStandaloneCSS() {
   // These need to be preserved in the final output for zero-config setup
   // Match pattern: /* comment */ @source inline( ... ); (multiline)
   // Tailwind v4 requires: @source inline("class1 class2 class3");
-  const sourceInlineRegex = /\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\/\s*@source\s+inline\([\s\S]*?\)\s*;/g;
+  // Match only real directives (not comments that mention "@source inline")
+  const sourceInlineRegex = /\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\/\s*@source\s+inline\("[^"]*"\)\s*;/g;
   const sourceInlineMatches = indexCss.match(sourceInlineRegex) || [];
   
   // Convert multiline format to single-line format required by Tailwind v4
@@ -145,10 +146,10 @@ function extractStandaloneCSS() {
     .replace(/\/\*\s*Import elevation system\s*\*\//g, '')
     .replace(/\/\*\s*Hit-area utilities \(expanded pointer targets\)\s*\*\/\s*\n/g, '')
     // Remove @source inline() directives (already extracted above) - must match multiline
-    .replace(/\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\/\s*@source\s+inline\([\s\S]*?\)\s*;/g, '')
+    .replace(/\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\/\s*@source\s+inline\("[^"]*"\)\s*;/g, '')
     // Remove other @source directives (non-inline ones)
     .replace(/@source\s+(?!inline\()[^;]+;?\s*\n/g, '')
-    .replace(/@custom-variant\s+[^;]+;?\s*\n/g, '');
+    .replace(/@custom-variant\s+[^\n]+;\s*\n/g, '');
 
   if (hitAreaCss) {
     indexCss = indexCss.replace(

package/scripts/install-claude-skills.js

@@ -19,6 +19,7 @@ const SKILLS_SOURCE = join(root, 'docs', 'nqui-skills');
 const COMPONENTS_SOURCE = join(root, 'docs', 'components');
 const CLAUDE_SKILLS = join(homedir(), '.claude', 'skills');
 
+// Root docs that live in the nqui hub directory (~/.claude/skills/nqui/)
 const HUB_FILES = [
   'SKILL.md',
   'README.md',
@@ -26,8 +27,21 @@ const HUB_FILES = [
   'COMPOSITION.md',
   'COMPONENTS_INDEX.md',
   'READ_BUDGET.md',
+  // Apple-craft + production AI skills (v0.6+)
+  'RECIPES.md',
+  'STATES.md',
+  'WRITING.md',
+  'MOTION.md',
+  'ELEVATION.md',
+  'AGENT_PROMPT.md',
+  'EVAL.md',
+  'THEMING.md',
+  'MIGRATION.md',
 ];
 
+// Slash-command entry points (/design, /edit) — bundled in docs/_claude-commands/
+const SLASH_COMMANDS = ['design', 'edit'];
+
 function ensureDir(dir) {
   if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
 }
@@ -86,20 +100,45 @@ export async function installClaudeSkills({ force = true } = {}) {
     console.log('✅', name, '→', dest);
   }
 
-  const componentsDest = join(CLAUDE_SKILLS, 'nqui-components', 'components');
+  // Per-component docs go in the hub at nqui/components/ (where AGENT_PROMPT.md
+  // and READ_BUDGET.md route to). Also keep a copy at nqui-components/components/
+  // for backward compatibility with the previous routing.
   if (existsSync(COMPONENTS_SOURCE)) {
-    if (existsSync(componentsDest) && !force) {
-      console.log('⏭️  nqui-components/components — use --force to overwrite');
+    const hubComponentsDest = join(CLAUDE_SKILLS, 'nqui', 'components');
+    const legacyComponentsDest = join(CLAUDE_SKILLS, 'nqui-components', 'components');
+    if (existsSync(hubComponentsDest) && !force) {
+      console.log('⏭️  nqui/components — use --force to overwrite');
     } else {
-      ensureDir(join(CLAUDE_SKILLS, 'nqui-components'));
-      cpSync(COMPONENTS_SOURCE, componentsDest, { recursive: true, force: true });
-      console.log('✅ Component docs →', componentsDest);
+      ensureDir(join(CLAUDE_SKILLS, 'nqui'));
+      cpSync(COMPONENTS_SOURCE, hubComponentsDest, { recursive: true, force: true });
+      console.log('✅ Component docs →', hubComponentsDest);
+    }
+    if (existsSync(join(CLAUDE_SKILLS, 'nqui-components'))) {
+      cpSync(COMPONENTS_SOURCE, legacyComponentsDest, { recursive: true, force: true });
+    }
+  }
+
+  // Slash command entry points — /design and /edit become Claude Code tools
+  const slashSrc = join(SKILLS_SOURCE, '_claude-commands');
+  if (existsSync(slashSrc)) {
+    for (const cmd of SLASH_COMMANDS) {
+      const cmdSrc = join(slashSrc, cmd);
+      const cmdDest = join(CLAUDE_SKILLS, cmd);
+      if (!existsSync(cmdSrc)) continue;
+      if (existsSync(cmdDest) && !force) {
+        console.log(`⏭️  /${cmd} — use --force to overwrite`);
+        continue;
+      }
+      cpSync(cmdSrc, cmdDest, { recursive: true, force: true });
+      console.log(`✅ /${cmd} →`, cmdDest);
     }
   }
 
   console.log('\n📚 Claude skills installed under ~/.claude/skills/');
   console.log('   Restart Claude Code or Claude Desktop to pick them up.');
-  console.log('   Hub: /nqui · Components: /nqui-components · Design: /nqui-design-system');
+  console.log('   Try: /design [a login form]    — build a new screen');
+  console.log('        /edit  [the sprint page]  — refine existing UI');
+  console.log('   Hub: /nqui · Components: /nqui-components · Tokens: /nqui-design-system');
 }
 
 const force = process.argv.includes('--force') || !process.argv.includes('--no-force');