@machinemetrics/mm-react-components 1.0.0-rc.0 → 1.0.0-rc.1

package/dist/scripts/ascii-logo.cjs

@@ -0,0 +1,24 @@
+/**
+ * MM React Components - ASCII logo (single source of truth)
+ * Used by: npx-init.cjs, init.cjs, install-skill.cjs
+ */
+
+const ASCII_LOGO = [
+  '         ########   ####      ',
+  '      ##########   ####       ',
+  '    ######        ####   #    ',
+  '  #####          ####   ####  ',
+  ' ####    ####   ####     #### ',
+  ' ###    ####   ####       ### ',
+  '####   ####   ####        ####',
+  '####  ####   ####         ####',
+  '#### ####   ####   ####   ####',
+  ' #######   ####   ####    ### ',
+  ' ######   ####   ####    #### ',
+  '  ####   ####   ####   #####  ',
+  '    #   ####   ####  #####    ',
+  '       ####   ##########      ',
+  '             ########         ',
+].join('\n');
+
+module.exports = { ASCII_LOGO };

package/dist/scripts/init.cjs

@@ -14,7 +14,10 @@ const fs = require('fs');
 const path = require('path');
 const readline = require('readline');
 
+const { ASCII_LOGO } = require(path.join(__dirname, 'ascii-logo.cjs'));
+
 // Colors for console output
+
 const colors = {
   reset: '\x1b[0m',
   bright: '\x1b[1m',
@@ -24,6 +27,10 @@ const colors = {
   yellow: '\x1b[33m',
 };
 
+function logLogo() {
+  console.log(`${colors.bright}${colors.green}${ASCII_LOGO}${colors.reset}\n`);
+}
+
 function log(message, color = 'reset') {
   console.log(`${colors[color]}${message}${colors.reset}`);
 }
@@ -59,7 +66,8 @@ function askQuestion(question) {
 }
 
 async function main() {
-  log('🚀 MM React Components - Zero-Config Setup', 'bright');
+  logLogo();
+  log('MM React Components - Zero-Config Setup', 'bright');
   log(
     'Installing MachineMetrics React Components with pre-compiled CSS...\n',
     'blue',

package/dist/scripts/install-skill.cjs

@@ -25,6 +25,8 @@ const fs = require('fs');
 const path = require('path');
 const os = require('os');
 
+const { ASCII_LOGO } = require(path.join(__dirname, 'ascii-logo.cjs'));
+
 const colors = {
   reset: '\x1b[0m',
   bright: '\x1b[1m',
@@ -35,6 +37,10 @@ const colors = {
   red: '\x1b[31m',
 };
 
+function logLogo() {
+  console.log(`${colors.bright}${colors.green}${ASCII_LOGO}${colors.reset}\n`);
+}
+
 function log(message, color = 'reset') {
   console.log(`${colors[color]}${message}${colors.reset}`);
 }
@@ -70,6 +76,8 @@ function copyRecursive(src, dest) {
 }
 
 function main() {
+  logLogo();
+
   const force = process.argv.includes('--force');
   const target = parseArg('target') || 'cursor';
   const scope = parseArg('scope') || 'project';

package/dist/scripts/npx-init.cjs

@@ -21,6 +21,8 @@ const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
 const version = packageJson.version;
 
 // Colors for console output
+const { ASCII_LOGO } = require(path.join(__dirname, 'ascii-logo.cjs'));
+
 const colors = {
   reset: '\x1b[0m',
   bright: '\x1b[1m',
@@ -31,6 +33,10 @@ const colors = {
   red: '\x1b[31m',
 };
 
+function logLogo() {
+  console.log(`${colors.bright}${colors.green}${ASCII_LOGO}${colors.reset}\n`);
+}
+
 function log(message, color = 'reset') {
   console.log(`${colors[color]}${message}${colors.reset}`);
 }
@@ -94,7 +100,8 @@ function checkReactProject() {
 }
 
 async function main() {
-  log('🚀 MM React Components - NPX Setup', 'bright');
+  logLogo();
+  log('MM React Components - NPX Setup', 'bright');
   log(
     'Setting up MachineMetrics React Components in your project...\n',
     'blue',
@@ -346,6 +353,52 @@ document.documentElement.classList.add('carbide');
     log('  • Dependencies: docs/DEPENDENCIES.md');
     log('  • GitHub: https://github.com/machinemetrics/mm-react-components');
 
+    // Offer Carbide AI skill installation
+    log('\n🤖 Carbide AI skill', 'bright');
+    log(
+      '  Install the mm-carbide skill so your AI assistant can generate Carbide-styled UIs.\n',
+      'cyan',
+    );
+    const installSkillAnswer = await askQuestion(
+      '  Install the Carbide skill for your AI editor? (y/N): ',
+    );
+    if (
+      installSkillAnswer.toLowerCase() === 'y' ||
+      installSkillAnswer.toLowerCase() === 'yes'
+    ) {
+      const aiPrompt =
+        '  Which AI do you use? (1) Cursor  (2) VS Code / GitHub Copilot  (3) Claude Code  (4) Gemini CLI: ';
+      const aiAnswer = (await askQuestion(aiPrompt)).trim().toLowerCase();
+      const targetMap = {
+        '1': 'cursor',
+        cursor: 'cursor',
+        '2': 'copilot',
+        copilot: 'copilot',
+        '3': 'claude',
+        claude: 'claude',
+        '4': 'gemini',
+        gemini: 'gemini',
+      };
+      const target = targetMap[aiAnswer] || 'cursor';
+      const installSkillPath = path.join(__dirname, 'install-skill.cjs');
+      if (fs.existsSync(installSkillPath)) {
+        try {
+          execSync(
+            `node "${installSkillPath}" --target=${target} --scope=project`,
+            { stdio: 'inherit' },
+          );
+        } catch (err) {
+          log('  Could not run skill installer.', 'yellow');
+          log(
+            '  You can install later: npx @machinemetrics/mm-react-components mm-install-skill --target=<cursor|copilot|claude|gemini>',
+            'cyan',
+          );
+        }
+      } else {
+        log('  Skill installer not found; install later with mm-install-skill.', 'yellow');
+      }
+    }
+
     // Offer Chakra migration if detected
     if (hasChakra) {
       log('\n🔄 Chakra UI Detected!', 'yellow');

package/dist/themes/carbide.css

@@ -1214,6 +1214,28 @@ tr
   [data-slot='tabs-trigger'][data-state='active'] {
   color: var(--foreground);
 }
+/* =============================
+   DEFAULT BORDER COLOR (border = theme border; no need for border-border)
+  ============================= */
+.carbide .border,
+.carbide .border-t,
+.carbide .border-b,
+.carbide .border-l,
+.carbide .border-r,
+.carbide .border-x,
+.carbide .border-y,
+.carbide .border-s,
+.carbide .border-e {
+  border-color: var(--border);
+}
+/* border-2, border-4, etc. when used without a color */
+.carbide .border-2,
+.carbide .border-4,
+.carbide .border-8,
+.carbide .border-dashed {
+  border-color: var(--border);
+}
+
 /* =============================
    UTILITY OVERRIDES
   ============================= */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machinemetrics/mm-react-components",
-  "version": "1.0.0-rc.0",
+  "version": "1.0.0-rc.1",
   "description": "Industrial-grade React components for manufacturing applications",
   "keywords": [
     "react",
@@ -31,8 +31,6 @@
     },
     "./styles": "./dist/lib/mm-react-components.css",
     "./themes/carbide": "./dist/themes/carbide.css",
-    "./tailwind.config": "./dist/tailwind.base.config.js",
-    "./docs/tailwind-setup": "./docs/TAILWIND_SETUP.md",
     "./docs/getting-started": "./dist/docs/GETTING_STARTED.md",
     "./README": "./dist/README.md",
     "./migration/config": "./dist/scripts/chakra-to-shadcn-migrator/chakra-to-shadcn.config.json",
@@ -204,8 +202,6 @@
     "dist",
     "agent-docs",
     "src/index.css",
-    "tailwind.config.export.js",
-    "docs/TAILWIND_SETUP.md",
     "README.md",
     "CHANGELOG.md",
     "LICENSE"

package/dist/docs/TAILWIND_SETUP.md

@@ -1,343 +0,0 @@
-# Tailwind CSS Setup for MM React Components
-
-This guide shows how to configure Tailwind CSS in your consuming application to get the same styling as the component preview interface.
-
-## Quick Setup
-
-### 1. Install Dependencies
-
-```bash
-npm install @machinemetrics/mm-react-components tailwindcss postcss autoprefixer
-```
-
-### 2. Copy Tailwind Configuration
-
-Copy the `tailwind.config.export.js` file to your project and rename it to `tailwind.config.js`:
-
-```bash
-cp node_modules/@machinemetrics/mm-react-components/tailwind.config.export.js tailwind.config.js
-```
-
-### 3. Import Theme CSS
-
-**Option A: Complete All-in-One (Recommended)**
-
-```css
-/* Import everything in one go - includes Tailwind reset, base theme, and Carbide theme */
-@import '@machinemetrics/mm-react-components/themes/complete';
-```
-
-**Option B: Manual Setup**
-
-```css
-/* Import base theme */
-@import '@machinemetrics/mm-react-components/themes/base';
-
-/* Import Carbide theme (optional) */
-@import '@machinemetrics/mm-react-components/themes/carbide';
-```
-
-### 4. Configure PostCSS
-
-Create or update your `postcss.config.js`:
-
-```javascript
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
-```
-
-## Complete Setup Example
-
-### package.json
-
-```json
-{
-  "dependencies": {
-    "@machinemetrics/mm-react-components": "^0.2.1",
-    "tailwindcss": "^3.4.17",
-    "postcss": "^8.4.35",
-    "autoprefixer": "^10.4.17"
-  }
-}
-```
-
-### tailwind.config.js
-
-```javascript
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@machinemetrics/mm-react-components/dist/**/*.{js,ts,jsx,tsx}',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        background: 'var(--background)',
-        foreground: 'var(--foreground)',
-        card: 'var(--card)',
-        'card-foreground': 'var(--card-foreground)',
-        popover: 'var(--popover)',
-        'popover-foreground': 'var(--popover-foreground)',
-        primary: 'var(--primary)',
-        'primary-foreground': 'var(--primary-foreground)',
-        secondary: 'var(--secondary)',
-        'secondary-foreground': 'var(--secondary-foreground)',
-        muted: 'var(--muted)',
-        'muted-foreground': 'var(--muted-foreground)',
-        accent: 'var(--accent)',
-        'accent-foreground': 'var(--accent-foreground)',
-        destructive: 'var(--destructive)',
-        'destructive-foreground': 'var(--destructive-foreground)',
-        border: 'var(--border)',
-        input: 'var(--input)',
-        'bg-input': 'var(--bg-input)',
-        'border-input': 'var(--border-input)',
-        ring: 'var(--ring)',
-        // Chart colors for data visualization
-        'chart-1': 'var(--chart-1)',
-        'chart-2': 'var(--chart-2)',
-        'chart-3': 'var(--chart-3)',
-        'chart-4': 'var(--chart-4)',
-        'chart-5': 'var(--chart-5)',
-        // Sidebar colors
-        sidebar: 'var(--sidebar)',
-        'sidebar-foreground': 'var(--sidebar-foreground)',
-        'sidebar-primary': 'var(--sidebar-primary)',
-        'sidebar-primary-foreground': 'var(--sidebar-primary-foreground)',
-        'sidebar-accent': 'var(--sidebar-accent)',
-        'sidebar-accent-foreground': 'var(--sidebar-accent-foreground)',
-        'sidebar-border': 'var(--sidebar-border)',
-        'sidebar-ring': 'var(--sidebar-ring)',
-      },
-      borderRadius: {
-        sm: 'var(--radius-sm)',
-        md: 'var(--radius-md)',
-        lg: 'var(--radius-lg)',
-        xl: 'var(--radius-xl)',
-      },
-      fontFamily: {
-        sans: [
-          'Noto Sans',
-          'Inter',
-          'ui-sans-serif',
-          'system-ui',
-          '-apple-system',
-          'BlinkMacSystemFont',
-          'Segoe UI',
-          'Roboto',
-          'Helvetica Neue',
-          'Arial',
-          'sans-serif',
-          'Apple Color Emoji',
-          'Segoe UI Emoji',
-          'Segoe UI Symbol',
-          'Noto Color Emoji',
-        ],
-        mono: [
-          'Inconsolata',
-          'ui-monospace',
-          'SFMono-Regular',
-          'Menlo',
-          'Monaco',
-          'Consolas',
-          'Liberation Mono',
-          'Courier New',
-          'monospace',
-        ],
-      },
-      fontWeight: {
-        normal: '400',
-        medium: '500',
-        semibold: '600',
-        bold: 'var(--font-weight-bold)',
-      },
-      spacing: {
-        sidebar: '16rem', // 256px for sidebar width
-      },
-      animation: {
-        'fade-in': 'fadeIn 0.2s ease-in-out',
-        'slide-in': 'slideIn 0.3s ease-out',
-      },
-      keyframes: {
-        fadeIn: {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
-        },
-        slideIn: {
-          '0%': { transform: 'translateX(-10px)', opacity: '0' },
-          '100%': { transform: 'translateX(0)', opacity: '1' },
-        },
-      },
-    },
-  },
-  plugins: [
-    function ({ addUtilities, theme }) {
-      const newUtilities = {
-        '.preview-sidebar': {
-          width: '16rem',
-          minHeight: '100vh',
-          backgroundColor: 'var(--muted)',
-          borderRight: '1px solid var(--border)',
-          padding: '1rem',
-        },
-        '.preview-main': {
-          flex: '1',
-          minWidth: '0',
-          padding: '2rem',
-        },
-        '.preview-card': {
-          backgroundColor: 'var(--card)',
-          border: '1px solid var(--border)',
-          borderRadius: 'var(--radius-lg)',
-          padding: '1.5rem',
-        },
-        '.preview-nav-item': {
-          width: '100%',
-          textAlign: 'left',
-          padding: '0.75rem',
-          borderRadius: '0.375rem',
-          fontSize: '0.875rem',
-          fontWeight: '500',
-          transition: 'colors 0.2s ease-in-out',
-          '&:hover': {
-            backgroundColor: 'var(--muted)',
-            color: 'var(--foreground)',
-          },
-          '&.active': {
-            backgroundColor: 'var(--primary)',
-            color: 'var(--primary-foreground)',
-          },
-        },
-      };
-      addUtilities(newUtilities);
-    },
-  ],
-};
-```
-
-### src/index.css
-
-```css
-@import '@machinemetrics/mm-react-components/themes/base';
-@import '@machinemetrics/mm-react-components/themes/carbide';
-@import 'tailwindcss';
-```
-
-### postcss.config.js
-
-```javascript
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
-```
-
-## Component Preview Interface
-
-To recreate the component preview interface from the library, use these utility classes:
-
-```tsx
-// Main layout container
-<div className="min-h-screen bg-background flex">
-  {/* Left Navigation Sidebar */}
-  <div className="preview-sidebar">
-    <h1 className="text-xl font-bold text-foreground mb-6">MM Components</h1>
-
-    {/* Theme Toggles */}
-    <div className="mb-6 space-y-3">
-      {/* Add your theme toggle components here */}
-    </div>
-
-    {/* Component Navigation */}
-    <nav className="space-y-2">
-      <button className="preview-nav-item active">Button</button>
-      <button className="preview-nav-item">Input</button>
-      {/* Add more component navigation items */}
-    </nav>
-  </div>
-
-  {/* Main Preview Pane */}
-  <div className="preview-main">
-    <div>
-      <div className="mb-6">
-        <h2 className="text-2xl font-semibold text-foreground capitalize">
-          Component Name
-        </h2>
-        <p className="text-muted-foreground mt-1">
-          Preview and test the component
-        </p>
-      </div>
-      <div className="preview-card">{/* Your component preview content */}</div>
-    </div>
-  </div>
-</div>
-```
-
-## Theme Customization
-
-### Using Base Theme Only
-
-```css
-@import '@machinemetrics/mm-react-components/themes/base';
-```
-
-### Using Carbide Theme
-
-```css
-@import '@machinemetrics/mm-react-components/themes/base';
-@import '@machinemetrics/mm-react-components/themes/carbide';
-```
-
-### Custom Theme Overrides
-
-You can override theme variables in your CSS:
-
-```css
-:root {
-  --primary: #your-custom-color;
-  --background: #your-custom-background;
-  /* Override other variables as needed */
-}
-```
-
-## Available Utility Classes
-
-The exported configuration includes these custom utility classes:
-
-- `.preview-sidebar` - Sidebar styling
-- `.preview-main` - Main content area styling
-- `.preview-card` - Component preview card styling
-- `.preview-nav-item` - Navigation item styling
-
-## Color System
-
-The configuration includes a comprehensive color system:
-
-- **Semantic Colors**: `background`, `foreground`, `primary`, `secondary`, etc.
-- **Chart Colors**: `chart-1` through `chart-5` for data visualization
-- **Sidebar Colors**: Complete sidebar color system
-- **Input Colors**: Specialized input styling colors
-
-## Typography
-
-- **Sans Font**: Noto Sans (primary), Inter, system fonts
-  - Note: When using `/styles` export, Noto Sans is embedded via @fontsource
-  - When using `/themes/carbide`, import fonts separately or use Google Fonts CDN
-- **Mono Font**: Inconsolata (primary), system monospace fonts
-  - Note: When using `/styles` export, Inconsolata is embedded via @fontsource
-- **Font Weights**: Normal (400), Medium (500), Semibold (600)
-  - Note: Bold (700) is not used; Carbide theme overrides bold to 600 (semibold)
-
-## Animation
-
-- **Fade In**: `animate-fade-in`
-- **Slide In**: `animate-slide-in`
-
-This configuration ensures your consuming application will have the same professional styling as the component preview interface.

package/dist/tailwind.base.config.js

@@ -1,89 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: 'class',
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {
-      colors: {
-        background: 'var(--background)',
-        foreground: 'var(--foreground)',
-        card: 'var(--card)',
-        'card-foreground': 'var(--card-foreground)',
-        popover: 'var(--popover)',
-        'popover-foreground': 'var(--popover-foreground)',
-        primary: 'var(--primary)',
-        'primary-foreground': 'var(--primary-foreground)',
-        secondary: 'var(--secondary)',
-        'secondary-foreground': 'var(--secondary-foreground)',
-        muted: 'var(--muted)',
-        'muted-foreground': 'var(--muted-foreground)',
-        accent: 'var(--accent)',
-        'accent-foreground': 'var(--accent-foreground)',
-        destructive: 'var(--destructive)',
-        border: 'var(--border)',
-        input: 'var(--input)',
-        'bg-input': 'var(--bg-input)',
-        'border-input': 'var(--border-input)',
-        ring: 'var(--ring)',
-      },
-      borderRadius: {
-        sm: 'var(--radius-sm)',
-        md: 'var(--radius-md)',
-        lg: 'var(--radius-lg)',
-        xl: 'var(--radius-xl)',
-      },
-      fontFamily: {
-        sans: [
-          'var(--font-sans)',
-          'Noto Sans Variable',
-          'Inter',
-          'ui-sans-serif',
-          'system-ui',
-          '-apple-system',
-          'BlinkMacSystemFont',
-          'Segoe UI',
-          'Roboto',
-          'Helvetica Neue',
-          'Arial',
-          'sans-serif',
-          'Apple Color Emoji',
-          'Segoe UI Emoji',
-          'Segoe UI Symbol',
-          'Noto Color Emoji',
-        ],
-      },
-      fontWeight: {
-        normal: '400',
-        medium: '500',
-        semibold: '600',
-        bold: 'var(--font-weight-bold)',
-      },
-      keyframes: {
-        'collapsible-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-collapsible-content-height)' },
-        },
-        'collapsible-up': {
-          from: { height: 'var(--radix-collapsible-content-height)' },
-          to: { height: '0' },
-        },
-        'accordion-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-accordion-content-height)' },
-        },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: '0' },
-        },
-      },
-      animation: {
-        'collapsible-down':
-          'collapsible-down 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-        'collapsible-up': 'collapsible-up 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-        'accordion-down': 'accordion-down 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-        'accordion-up': 'accordion-up 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-      },
-    },
-  },
-  plugins: [],
-};