@nqlib/nqui 0.5.3 → 0.5.5

package/dist/styles.css

@@ -75,7 +75,7 @@
 
 
 /* Custom dark mode variant - matches when .dark class is on element or ancestor */
-/* Non-dark themes — .light (warm paper) and .mid (dimmer neutral); both use light: utilities */
+/* Non-dark theme — .light (warm paper) uses light: utilities */
 /* Hit-area — https://bazza.dev/craft/2026/hit-area */
 /* Bazza hit-area utilities — https://bazza.dev/craft/2026/hit-area */
 
@@ -792,14 +792,11 @@
    nqui Additional System Variables
    ============================================ */
 
-/*
- * Non-dark surfaces: /* ============================================
+/* Default light theme variables (.dark block follows) */
+/* ============================================
    nqui Color System & Design Tokens
    ============================================ */
 
-:root + html.light = warm paper; html.mid = separate token block (showcase / comparison).
- * Dark = .dark. Showcase app uses next-themes classes light | mid | dark.
- */
 :root {
     /* ============================================
        Z-Index Elevation Scale
@@ -1029,18 +1026,18 @@
     /* Light / system UI — warm paper */
     --background: oklch(0.985 0.002 78);
     --foreground: oklch(0.2416 0.0219 57);
-    --card: oklch(0.9792 0.0042 78.3);
+    --card: oklch(0.977 0.004 78);
     --card-foreground: oklch(0.2416 0.0219 57);
-    --popover: oklch(0.9792 0.0042 78.3);
+    --popover: oklch(0.977 0.004 78);
     --popover-foreground: oklch(0.2416 0.0219 57);
-    --secondary: oklch(0.927 0.009 73.15);
+    --secondary: oklch(0.928 0.008 78);
     --secondary-foreground: oklch(0.3067 0.0309 56.81);
-    --muted: oklch(0.9111 0.0082 73.15);
+    --muted: oklch(0.914 0.007 78);
     --muted-foreground: oklch(0.5576 0.0222 57.81);
-    --accent: oklch(0.935 0.011 73.15);
+    --accent: oklch(0.936 0.007 78);
     --accent-foreground: oklch(0.2416 0.0219 57);
-    --border: oklch(0.89 0.0137 73.1);
-    --input: oklch(0.89 0.0137 73.1);
+    --border: oklch(0.892 0.006 78);
+    --input: oklch(0.892 0.006 78);
 
     /* Chart colors */
     --chart-1: oklch(0.809 0.105 251.813);
@@ -1053,48 +1050,13 @@
     --radius: 0.45rem;
 
     /* Sidebar */
-    --sidebar: oklch(0.9792 0.0042 78.3);
+    --sidebar: oklch(0.977 0.004 78);
     --sidebar-foreground: oklch(0.2416 0.0219 57);
     --sidebar-primary: var(--primary);
     --sidebar-primary-foreground: var(--primary-foreground);
-    --sidebar-accent: oklch(0.96 0.004 75);
+    --sidebar-accent: oklch(0.962 0.006 78);
     --sidebar-accent-foreground: oklch(0.205 0.015 55);
-    --sidebar-border: oklch(0.89 0.0137 73.1);
-    --sidebar-ring: var(--ring);
-}
-
-/* Mid — between warm paper and dark (neutral, slightly dimmer than light) */
-.mid {
-    --background: oklch(0.915 0.01 78);
-    --foreground: oklch(0.28 0.022 57);
-    --card: oklch(0.895 0.012 78);
-    --card-foreground: oklch(0.28 0.022 57);
-    --popover: oklch(0.895 0.012 78);
-    --popover-foreground: oklch(0.28 0.022 57);
-    --secondary: oklch(0.88 0.012 73);
-    --secondary-foreground: oklch(0.32 0.028 57);
-    --muted: oklch(0.855 0.012 73);
-    --muted-foreground: oklch(0.48 0.024 58);
-    --accent: oklch(0.87 0.014 73);
-    --accent-foreground: oklch(0.28 0.022 57);
-    --border: oklch(0.82 0.016 73);
-    --input: oklch(0.82 0.016 73);
-
-    --chart-1: oklch(0.809 0.105 251.813);
-    --chart-2: oklch(0.623 0.214 259.815);
-    --chart-3: oklch(0.546 0.245 262.881);
-    --chart-4: oklch(0.488 0.243 264.376);
-    --chart-5: oklch(0.424 0.199 265.638);
-
-    --radius: 0.45rem;
-
-    --sidebar: oklch(0.9 0.01 78);
-    --sidebar-foreground: oklch(0.28 0.022 57);
-    --sidebar-primary: var(--primary);
-    --sidebar-primary-foreground: var(--primary-foreground);
-    --sidebar-accent: oklch(0.875 0.012 75);
-    --sidebar-accent-foreground: oklch(0.26 0.018 55);
-    --sidebar-border: oklch(0.82 0.016 73);
+    --sidebar-border: oklch(0.892 0.006 78);
     --sidebar-ring: var(--ring);
 }
 
@@ -1180,14 +1142,14 @@
     --card-foreground: oklch(0.92 0 0);
     --popover: oklch(0.205 0 0);
     --popover-foreground: oklch(0.92 0 0);
-    --secondary: oklch(0.274 0.006 286.033);
+    --secondary: oklch(0.274 0.003 0);
     --secondary-foreground: oklch(0.92 0 0);
-    --muted: oklch(0.24 0 0);
+    --muted: oklch(0.24 0.002 0);
     --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.27 0 0);
+    --accent: oklch(0.27 0.003 0);
     --accent-foreground: oklch(0.92 0 0);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 0.07);
+    --border: oklch(0.34 0.004 0);
+    --input: oklch(0.30 0.003 0);
 
     /* Chart colors (same for both modes) */
     --chart-1: oklch(0.809 0.105 251.813);
@@ -1197,17 +1159,32 @@
     --chart-5: oklch(0.424 0.199 265.638);
 
     /* Sidebar for dark mode */
-    --sidebar: oklch(0.205 0 0);
+    --sidebar: oklch(0.205 0.001 0);
     --sidebar-foreground: oklch(0.92 0 0);
     --sidebar-primary: var(--primary);
     --sidebar-primary-foreground: var(--primary-foreground);
-    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent: oklch(0.269 0.003 0);
     --sidebar-accent-foreground: oklch(0.92 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-border: oklch(0.34 0.004 0);
     --sidebar-ring: oklch(0.556 0 0);
 }
 
-/*
- * html.light — next-themes; surface tokens match :root (warm paper).
- * html.mid — next-themes; surfaces use .mid block above (distinct from light).
- */
+/* Elevation component styles from elevation.css */
+/**
+   * Card surface elevation — semantic --border + light shadow stack.
+   * Dark mode matches v0.4.x (no inset / multi-stack drop shadows).
+   * Lives here with the elevation system (was JS-injected from card.tsx).
+   */
+  .nqui-card {
+    border: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
+    box-shadow:
+      0 1px 0 0 color-mix(in oklch, var(--border) 40%, transparent),
+      0 1px 2px 0 oklch(0.15 0 0 / 0.05);
+  }
+
+  .dark .nqui-card {
+    border: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
+    box-shadow:
+      0 1px 0 0 color-mix(in oklch, var(--border) 40%, transparent),
+      0 1px 2px 0 oklch(0 0 0 / 0.3);
+  }

package/docs/nqui-skills/SKILL.md

@@ -1,8 +1,7 @@
 ---
-
-## name: nqui
-
+name: nqui
 description: Hub for nqui component library skills and impeccable design skills. Use /nqui-components, /nqui-design-system, /impeccable, /audit, or specific skill names to invoke them.
+---
 
 # nqui Skills (Hub)
 
@@ -14,7 +13,6 @@ Installed into `.cursor/nqui-skills/` via `npx @nqlib/nqui init-skills`.
 
 ## nqui Component Library
 
-
 | Skill                           | When to use                                                        |
 | ------------------------------- | ------------------------------------------------------------------ |
 | **nqui-components**             | Implementing UI, choosing components, component props and examples |
@@ -24,14 +22,12 @@ Installed into `.cursor/nqui-skills/` via `npx @nqlib/nqui init-skills`.
 | **nqui-bundle-size**            | Bundle size best practices when adding deps or creating packages   |
 | **nqui-local-published-toggle** | Switching between local and published @nqlib/nqui                  |
 
-
 ---
 
 ## Impeccable Design Skills
 
 Design quality and anti-pattern detection. Run `/impeccable teach` first to establish design context.
 
-
 | Skill          | When to use                                                                   |
 | -------------- | ----------------------------------------------------------------------------- |
 | **impeccable** | Build distinctive, production-grade UI; avoid AI slop aesthetics              |
@@ -52,7 +48,6 @@ Design quality and anti-pattern detection. Run `/impeccable teach` first to esta
 | **/critique**  | Heuristic-based UI review                                                     |
 | **/overdrive** | Push good UI to excellent                                                     |
 
-
 ---
 
 ## Usage
@@ -62,4 +57,4 @@ Skills are invoked by name — e.g. `/nqui-components`, `/impeccable`, `/audit i
 For component questions, always read the relevant doc first:
 
 - `.cursor/nqui-skills/components/nqui-<name>.md` (after init-skills)
-- `node_modules/@nqlib/nqui/docs/components/nqui-<name>.md` (npm install)
+- `node_modules/@nqlib/nqui/docs/components/nqui-<name>.md` (npm install)

package/package.json

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

package/scripts/build-styles.js

@@ -22,6 +22,23 @@ const elevationCssPath = join(projectRoot, 'src', 'styles', 'elevation.css');
 const hitAreaCssPath = join(projectRoot, 'src', 'styles', 'hit-area.css');
 const outputPath = join(projectRoot, 'dist', 'styles.css');
 
+function extractLayerBlock(css, layerName) {
+  const layerStart = css.indexOf(`@layer ${layerName}`);
+  if (layerStart === -1) return '';
+  const firstBrace = css.indexOf('{', layerStart);
+  if (firstBrace === -1) return '';
+  let depth = 1;
+  let i = firstBrace + 1;
+  while (i < css.length && depth > 0) {
+    const ch = css[i];
+    if (ch === '{') depth++;
+    if (ch === '}') depth--;
+    i++;
+  }
+  if (depth !== 0) return '';
+  return css.slice(firstBrace + 1, i - 1).trim();
+}
+
 function extractStandaloneCSS() {
   // Read the source CSS files
   if (!existsSync(indexCssPath)) {
@@ -47,15 +64,22 @@ function extractStandaloneCSS() {
 
   // Extract :root block from elevation.css (it's wrapped in @layer base)
   let elevationRootContent = '';
+  let elevationComponentContent = '';
   if (elevationCss) {
-    const elevationRootMatch = elevationCss.match(/@layer base\s*\{\s*:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}\s*\}/s);
-    if (elevationRootMatch) {
-      elevationRootContent = elevationRootMatch[1].trim();
+    const elevationBaseLayer = extractLayerBlock(elevationCss, 'base');
+    if (elevationBaseLayer) {
+      const elevationRootMatch = elevationBaseLayer.match(/:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
+      if (elevationRootMatch) {
+        elevationRootContent = elevationRootMatch[1].trim();
+      }
     } else {
       // Fallback: try to extract without @layer base wrapper
       const rootMatch = elevationCss.match(/:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
       if (rootMatch) elevationRootContent = rootMatch[1].trim();
     }
+
+    // Keep component-level elevation classes (e.g. .nqui-card) in dist/styles.css.
+    elevationComponentContent = extractLayerBlock(elevationCss, 'components');
   }
 
   // Extract :root and .dark blocks from colors.css (they're wrapped in @layer base)
@@ -229,6 +253,10 @@ function extractStandaloneCSS() {
                   combinedCss.slice(rootIndex);
   }
 
+  if (elevationComponentContent) {
+    combinedCss += '\n\n/* Elevation component styles from elevation.css */\n' + elevationComponentContent + '\n';
+  }
+
   // Clean up extra blank lines
   combinedCss = combinedCss.replace(/\n{4,}/g, '\n\n\n');
 

package/scripts/publish-npmjs.js

@@ -6,7 +6,7 @@
  */
 
 import { readFileSync, writeFileSync, existsSync } from 'fs';
-import { execSync } from 'child_process';
+import { execSync, spawn } from 'child_process';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
 
@@ -16,116 +16,193 @@ const rootDir = join(__dirname, '..');
 const packageJsonPath = join(rootDir, 'package.json');
 const npmrcPath = join(rootDir, '.npmrc');
 
-// Read package.json
-const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
-
-// Save originals for restore
-const originalPublishConfig = packageJson.publishConfig;
-const originalDependencies = { ...packageJson.dependencies };
+function printSslTroubleshooting() {
+  console.error(`
+💡 TLS / network (e.g. ERR_SSL_SSL\\TLS_ALERT_BAD_RECORD_MAC) is usually environmental:
+   • Run publish again; transient failures often work on a second attempt
+   • Disable VPN or try another network; corporate proxies and inspection break TLS
+   • Update Node LTS; ensure no antivirus is MITM’ing npm traffic
+   • Retry later if registry.npmjs.com is flaking
+   • Set NPM_PUBLISH_RETRIES=5 for more attempts (default 3)
+`);
+}
 
-// Remove workspace:* deps (npm doesn't support workspace: protocol).
-// nqcode/nqappbuilder are dev/showcase-only and not bundled in the library.
-const workspaceDeps = ['@nqlib/nqcode', '@nqlib/nqappbuilder'];
-for (const name of workspaceDeps) {
-  if (packageJson.dependencies?.[name] === 'workspace:*') {
-    delete packageJson.dependencies[name];
-    console.log(`   Removed ${name} (workspace dep)`);
+function isVersionAlreadyPublished(pkgName, version, cwd) {
+  try {
+    const result = execSync(`npm view ${pkgName}@${version} version --registry=https://registry.npmjs.com`, {
+      encoding: 'utf-8',
+      cwd,
+      stdio: ['ignore', 'pipe', 'pipe'],
+    }).trim();
+    return result === version;
+  } catch (error) {
+    const errText = `${error?.message || ''} ${error?.stderr?.toString?.() || ''}`;
+    if (errText.includes('404') || errText.includes('E404')) {
+      return false;
+    }
+    throw error;
   }
 }
 
-// Override publishConfig for npmjs.com
-packageJson.publishConfig = {
-  registry: 'https://registry.npmjs.com',
-  access: 'public'
-};
-
-// Write modified package.json
-writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
-
-// Handle .npmrc file if it exists
-let originalNpmrc = null;
-let npmrcExists = false;
-
-if (existsSync(npmrcPath)) {
-  npmrcExists = true;
-  originalNpmrc = readFileSync(npmrcPath, 'utf-8');
-
-  // Remove or comment out scoped registry line that points to GitHub Packages
-  const lines = originalNpmrc.split('\n');
-  const modifiedLines = lines.map(line => {
-    // Comment out scoped registry lines for @nqlib
-    if (line.trim().startsWith('@nqlib:registry=')) {
-      return `# ${line} # Temporarily disabled for npmjs.com publish`;
+async function main() {
+  // Read package.json
+  const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+
+  // Save originals for restore
+  const originalPublishConfig = packageJson.publishConfig;
+  const originalDependencies = { ...packageJson.dependencies };
+
+  // Remove workspace:* deps (npm doesn't support workspace: protocol).
+  const workspaceDeps = ['@nqlib/nqcode', '@nqlib/nqappbuilder'];
+  for (const name of workspaceDeps) {
+    if (packageJson.dependencies?.[name] === 'workspace:*') {
+      delete packageJson.dependencies[name];
+      console.log(`   Removed ${name} (workspace dep)`);
     }
-    return line;
-  });
+  }
 
-  writeFileSync(npmrcPath, modifiedLines.join('\n'));
-  console.log('📝 Temporarily modified .npmrc');
-}
+  packageJson.publishConfig = {
+    registry: 'https://registry.npmjs.com',
+    access: 'public',
+  };
 
-try {
-  // Check if user is logged in to npm
-  console.log('🔐 Checking npm authentication...');
-  try {
-    const whoami = execSync('npm whoami --registry=https://registry.npmjs.com', {
-      encoding: 'utf-8',
-      cwd: rootDir,
-      env: {
-        ...process.env,
-        npm_config_registry: 'https://registry.npmjs.com'
+  writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
+
+  let originalNpmrc = null;
+  let npmrcExists = false;
+
+  if (existsSync(npmrcPath)) {
+    npmrcExists = true;
+    originalNpmrc = readFileSync(npmrcPath, 'utf-8');
+    const lines = originalNpmrc.split('\n');
+    const modifiedLines = lines.map((line) => {
+      if (line.trim().startsWith('@nqlib:registry=')) {
+        return `# ${line} # Temporarily disabled for npmjs.com publish`;
       }
-    }).trim();
-    console.log(`✅ Logged in as: ${whoami}`);
-  } catch (authError) {
-    console.error('❌ Not logged in to npmjs.com');
-    console.error('💡 Please run: npm login --registry=https://registry.npmjs.com');
-    console.error('💡 Or create an access token at: https://www.npmjs.com/settings/YOUR_USERNAME/tokens');
-    throw new Error('Authentication required. Please login to npmjs.com first.');
+      return line;
+    });
+    writeFileSync(npmrcPath, modifiedLines.join('\n'));
+    console.log('📝 Temporarily modified .npmrc');
   }
 
-  console.log('📦 Publishing to npmjs.com...');
-  execSync('npm publish --registry=https://registry.npmjs.com --access=public', {
-    stdio: 'inherit',
-    cwd: rootDir,
-    env: {
+  try {
+    console.log('🔐 Checking npm authentication...');
+    try {
+      const whoami = execSync('npm whoami --registry=https://registry.npmjs.com', {
+        encoding: 'utf-8',
+        cwd: rootDir,
+        env: {
+          ...process.env,
+          npm_config_registry: 'https://registry.npmjs.com',
+        },
+      }).trim();
+      console.log(`✅ Logged in as: ${whoami}`);
+    } catch {
+      console.error('❌ Not logged in to npmjs.com');
+      console.error('💡 Please run: npm login --registry=https://registry.npmjs.com');
+      console.error(
+        '💡 Or create an access token at: https://www.npmjs.com/settings/YOUR_USERNAME/tokens'
+      );
+      throw new Error('Authentication required. Please login to npmjs.com first.');
+    }
+
+    const publishEnv = {
       ...process.env,
-      // Force npm to use npmjs.com registry
-      npm_config_registry: 'https://registry.npmjs.com'
+      npm_config_registry: 'https://registry.npmjs.com',
+    };
+
+    const pkgName = packageJson.name;
+    const pkgVersion = packageJson.version;
+    if (isVersionAlreadyPublished(pkgName, pkgVersion, rootDir)) {
+      throw new Error(
+        `Version ${pkgVersion} is already published for ${pkgName}. Bump package.json version before publishing (e.g. npm version patch --no-git-tag-version).`
+      );
     }
-  });
-  console.log('✅ Published to npmjs.com successfully!');
-} catch (error) {
-  console.error('❌ Failed to publish to npmjs.com');
-  if (error.message && error.message.includes('Authentication required')) {
-    throw error;
-  }
-  if (error.status === 404 || (error.output && error.output.toString().includes('404'))) {
-    console.error('💡 Package not found. This might be the first publish.');
-    console.error('💡 Make sure the @nqlib scope exists on npmjs.com');
-    console.error('💡 For scoped packages, you need to own the scope or be added to it');
-  }
-  if (error.status === 401 || (error.output && error.output.toString().includes('401'))) {
-    console.error('💡 Authentication failed. Please login: npm login --registry=https://registry.npmjs.com');
-  }
-  throw error;
-} finally {
-  // Restore original publishConfig and dependencies
-  if (originalPublishConfig) {
-    packageJson.publishConfig = originalPublishConfig;
-  } else {
-    delete packageJson.publishConfig;
-  }
-  if (originalDependencies) {
-    packageJson.dependencies = originalDependencies;
-  }
-  writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
-  console.log('🔄 Restored package.json');
 
-  // Restore .npmrc if it existed
-  if (npmrcExists && originalNpmrc !== null) {
-    writeFileSync(npmrcPath, originalNpmrc);
-    console.log('🔄 Restored .npmrc');
+    const maxAttempts = Math.min(
+      5,
+      Math.max(1, parseInt(process.env.NPM_PUBLISH_RETRIES || '3', 10) || 3)
+    );
+
+    const runPublish = () =>
+      new Promise((resolve, reject) => {
+        const child = spawn(
+          'npm',
+          ['publish', '--registry=https://registry.npmjs.com', '--access', 'public'],
+          { stdio: 'inherit', cwd: rootDir, env: publishEnv, shell: false }
+        );
+        child.on('error', reject);
+        child.on('close', (code) => {
+          if (code === 0) resolve();
+          else {
+            const err = new Error(`npm publish exited with code ${code}`);
+            err.status = code;
+            reject(err);
+          }
+        });
+      });
+
+    console.log('📦 Publishing to npmjs.com...');
+    let lastError;
+    for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+      try {
+        await runPublish();
+        lastError = null;
+        break;
+      } catch (e) {
+        lastError = e;
+        if (attempt < maxAttempts) {
+          const wait = attempt * 2000;
+          console.warn(
+            `⚠️  Publish failed (attempt ${attempt}/${maxAttempts}). Retrying in ${wait / 1000}s (transient TLS/network often succeeds on retry)…`
+          );
+          await new Promise((r) => setTimeout(r, wait));
+        }
+      }
+    }
+    if (lastError) throw lastError;
+    console.log('✅ Published to npmjs.com successfully!');
+  } catch (error) {
+    console.error('❌ Failed to publish to npmjs.com');
+    if (error.message && error.message.includes('Authentication required')) {
+      throw error;
+    }
+    if (error.message && error.message.includes('already published')) {
+      console.error(`💡 ${error.message}`);
+      throw error;
+    }
+    const errText = `${error.message || ''} ${(error.output && error.output.toString()) || ''}`;
+    if (error.status === 404 || errText.includes('404')) {
+      console.error('💡 Package not found. This might be the first publish.');
+      console.error('💡 Make sure the @nqlib scope exists on npmjs.com');
+      console.error('💡 For scoped packages, you need to own the scope or be added to it');
+    }
+    if (error.status === 401 || errText.includes('401')) {
+      console.error(
+        '💡 Authentication failed. Please login: npm login --registry=https://registry.npmjs.com'
+      );
+    }
+    printSslTroubleshooting();
+    throw error;
+  } finally {
+    if (originalPublishConfig) {
+      packageJson.publishConfig = originalPublishConfig;
+    } else {
+      delete packageJson.publishConfig;
+    }
+    if (originalDependencies) {
+      packageJson.dependencies = originalDependencies;
+    }
+    writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
+    console.log('🔄 Restored package.json');
+    if (npmrcExists && originalNpmrc !== null) {
+      writeFileSync(npmrcPath, originalNpmrc);
+      console.log('🔄 Restored .npmrc');
+    }
   }
 }
 
+main().catch((e) => {
+  if (e && e.message) console.error(e.message);
+  process.exit(1);
+});