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

package/CHANGELOG.md

@@ -5,39 +5,43 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## [1.0.0] - 2025-02-04
+
+Summary of changes from v0.2.x (main) to 1.0: full shadcn component set, one-command init, Carbide AI skill, zero-config default, and package/docs cleanup.
 
 ### Added
 
-- Initial component library setup
-- Button component with multiple variants
-- Input component with validation states
-- TypeScript support with full type definitions
-- Tailwind CSS integration
-- ESLint and Prettier configuration
-- Playwright testing setup
+- Full shadcn/ui-based component set (50+ components): DataTable (server-side pagination, events, toolbar), Chart, PageHeader, Sheet, Drawer, Form, DatePicker, DateRangePicker, HeroMetricCard, Sidebar, Command, Carousel, Combobox, Field, Empty, Item, Menubar, NavigationMenu, and remaining shadcn components with Carbide theming.
+- `mm-init` CLI: one-command setup via `npx @machinemetrics/mm-react-components mm-init` (install library, add `/styles`, create examples, optional skill install or Chakra migration).
+- `mm-install-skill` CLI and mm-carbide Agent Skill for Cursor, Copilot, Claude, Gemini (`--target`, `--scope=project|user`).
+- Zero-config default: pre-compiled `/styles` import; no Tailwind or PostCSS required.
+- Chakra-to-shadcn migration: `chakra-to-shadcn` bin and `migrate:chakra-to-shadcn` script.
+- Static preview build (`build:static`, `serve:static`) and font extraction (fonts as separate files, not base64).
+- AI agent docs: component reference, init/setup guides, Chakra migration docs.
 
 ### Changed
 
-- N/A
-
-### Deprecated
-
-- N/A
+- Public init is `mm-init` (npx). All docs and agent-docs use mm-init and `/styles`; zero-config first.
+- Component layout: base shadcn in `shadcn/`, overrides in `ui/` for easier `shadcn add` updates.
+- Playwright: OS-agnostic snapshots, `domcontentloaded` (replaced `networkidle`), fewer flaky tests.
+- Carbide theme: expanded data-slot coverage (alert-dialog, select, dropdown sub-menus). Fonts via @fontsource.
+- Scripts: removed init.js, setup script, migrate-components-since, backups; single init path. Setup link: `https://components.machinemetrics.com/setup`.
 
 ### Removed
 
-- N/A
+- Tailwind config and TAILWIND_SETUP from published package. Zero-config only; theme-only doc in repo only.
+- Package exports `./tailwind.config` and `./docs/tailwind-setup`.
 
 ### Fixed
 
-- N/A
+- Package `files`: removed non-existent `tailwind.config.export.js`; docs use `/styles` or inline config.
+- Removed unused debug images. DataTable event passthrough and toolbar search events.
 
 ### Security
 
 - N/A
 
-## [0.1.0] - 2025-01-27
+## [0.2.0] - 2025-09-23
 
 ### Added
 

package/README.md

@@ -44,7 +44,7 @@ npm install @machinemetrics/mm-react-components
 
 **Automated Tools:**
 
-- ✅ Init script: `npx @machinemetrics/mm-react-components init`
+- ✅ Init script: `npx @machinemetrics/mm-react-components mm-init`
 - ✅ Migration script: `npx @machinemetrics/mm-react-components chakra-to-shadcn`
 - ✅ 98% automation rate for Chakra UI conversion
 - ✅ Zero-config setup option (no build tools needed!)
@@ -55,23 +55,18 @@ npm install @machinemetrics/mm-react-components
 
 ### 🚀 Automated Setup (Recommended)
 
-The fastest way to get started:
+The fastest way to get started (from your React project root):
 
 ```bash
-# Install the package
-npm install @machinemetrics/mm-react-components
-
-# Run the automated setup
-npx @machinemetrics/mm-react-components/setup
+npx @machinemetrics/mm-react-components mm-init
 ```
 
 This will automatically:
 
-- ✅ Copy Tailwind configuration
-- ✅ Create PostCSS configuration
-- ✅ Set up the complete theme
-- ✅ Create an example component
-- ✅ Generate all necessary files
+- ✅ Install the component library
+- ✅ Add pre-compiled CSS import to your `index.css`
+- ✅ Create example components
+- ✅ Optionally install the Carbide AI skill and offer Chakra UI migration if detected
 
 ### 📋 Manual Setup
 
@@ -89,19 +84,7 @@ npm install @machinemetrics/mm-react-components
 npm install -D tailwindcss postcss autoprefixer
 ```
 
-#### 2. (Optional) Configure Tailwind CSS
-
-> 💡 Skip this step if using `/styles` - Tailwind configuration is not needed!
-
-**Only if using `/themes/carbide`:**
-
-```bash
-cp node_modules/@machinemetrics/mm-react-components/tailwind.config.export.js tailwind.config.js
-```
-
-Note: The exported config is the main config (no preview-only utilities). The preview app in this repo uses a separate `tailwind.preview.config.js` that imports the main config and adds preview utilities.
-
-#### 3. Import Styles
+#### 2. Import Styles
 
 Import the complete styles including Tailwind CSS, base styles, and Carbide theme:
 
@@ -120,7 +103,7 @@ document.documentElement.classList.add('carbide');
 - ✅ Dark mode support
 - ✅ Animations and utilities
 
-#### 4. Use Components
+#### 3. Use Components
 
 ```tsx
 import { Button, Input } from '@machinemetrics/mm-react-components';
@@ -146,7 +129,6 @@ function App() {
 **For Developers:**
 
 - [Getting Started Guide](./docs/GETTING_STARTED.md) - Complete setup guide
-- [Tailwind Setup Guide](./docs/TAILWIND_SETUP.md) - Detailed configuration
 - [Chakra Migration Guide](./docs/CHAKRA_MIGRATION_GUIDE.md) - Detailed migration reference
 - [Component Mapping Summary](./docs/COMPONENT_MAPPING_SUMMARY.md) - All 83 component mappings
 

package/agent-docs/agent-documentation-reference.md

@@ -341,20 +341,19 @@ ai-agent-guide.md (main guide)
 
 The following files are exported via package.json for AI agent access:
 
-### **Init Setup Exports**
+### **Init setup (files in agent-docs/)**
 
-- `./init/guide` → `ai-agent-init-guide.md`
-- `./init/reference` → `setup-reference.md`
-- `./init/troubleshooting` → `init-troubleshooting.md`
-- `./init/readme` → `init-readme.md`
+- `ai-agent-init-guide.md` – main setup guide (use `mm-init`, zero-config with `/styles`)
+- `setup-reference.md` – technical reference
+- `init-troubleshooting.md` – init failures and edge cases
+- `init-readme.md` – overview
 
-### **Chakra Migration Exports**
+The package exports the whole folder: `@machinemetrics/mm-react-components/agent-docs` (or `./agent-docs` in package.json). There are no separate `./init/guide` subpath exports.
 
-- `./migration/config` → `chakra-to-shadcn.config.json`
-- `./migration/guide` → `ai-agent-guide.md`
-- `./migration/reference` → `component-mapping-reference.md`
-- `./migration/troubleshooting` → `chakra-migration-troubleshooting.md`
-- `./migration/readme` → `chakra-migration-readme.md`
+### **Chakra migration (files in agent-docs/)**
+
+- `chakra-migration-readme.md`, `ai-agent-guide.md`, `component-mapping-reference.md`, `chakra-migration-troubleshooting.md`
+- Package export for migration config: `./migration/config` → `chakra-to-shadcn.config.json`
 
 ## Best Practices
 
@@ -363,16 +362,14 @@ The following files are exported via package.json for AI agent access:
 1. **Always start with the main guide** for comprehensive instructions
 2. **Use reference files** for technical details and specific information
 3. **Check troubleshooting guides** when issues arise
-4. **Use fallback scripts** when automated tools fail
-5. **Validate setup** using provided checklists
+4. **Validate setup** using provided checklists (e.g. /styles import, carbide class)
 
 ### **For Documentation Maintenance**
 
 1. **Keep guides updated** with new components and features
 2. **Update troubleshooting guides** with new issues and solutions
 3. **Maintain reference files** with current dependency versions
-4. **Test fallback scripts** regularly to ensure they work
-5. **Update package.json exports** when adding new files
+4. **Update package.json exports** when adding new files
 
 ## Support and Resources
 

package/agent-docs/ai-agent-init-guide.md

@@ -22,8 +22,8 @@ The library uses a **ZERO-CONFIG** approach - no build tools, no configuration f
 ### 1. Automated Initialization (Recommended)
 
 ```bash
-# Run the init script via npx
-npx @machinemetrics/mm-react-components init
+# Run the init script via npx (from your React project root)
+npx @machinemetrics/mm-react-components mm-init
 
 # This installs the library and sets up the CSS import
 ```
@@ -130,20 +130,21 @@ function MyComponent() {
 
 **Done!** Components are ready to use.
 
-## Project Structure After Setup
+## Project Structure After Setup (zero-config)
 
 ```
 your-project/
 ├── src/
-│   ├── index.css (or main.css)
-│   └── App.tsx (or App.jsx)
-├── tailwind.config.js
-├── postcss.config.js
+│   ├── index.css (with @import '.../styles')
+│   └── App.tsx (root with className="carbide")
+├── mm-components-examples/   (if you ran mm-init)
 ├── package.json
 └── node_modules/
     └── @machinemetrics/mm-react-components/
 ```
 
+No `tailwind.config.js` or `postcss.config.js` required when using `/styles`.
+
 ## Framework-Specific Setup
 
 ### React with Vite
@@ -154,7 +155,7 @@ npm create vite@latest my-app -- --template react-ts
 cd my-app
 
 # Run init script
-npx @machinemetrics/mm-react-components init
+npx @machinemetrics/mm-react-components mm-init
 
 # Start development server
 npm run dev
@@ -168,7 +169,7 @@ npx create-next-app@latest my-app --typescript --tailwind --eslint
 cd my-app
 
 # Run init script
-npx @machinemetrics/mm-react-components init
+npx @machinemetrics/mm-react-components mm-init
 
 # Start development server
 npm run dev
@@ -182,17 +183,17 @@ npx create-react-app my-app --template typescript
 cd my-app
 
 # Run init script
-npx @machinemetrics/mm-react-components init
+npx @machinemetrics/mm-react-components mm-init
 
 # Start development server
 npm start
 ```
 
-## Advanced Configuration
+## Advanced Configuration (optional)
 
 ### Custom Tailwind Configuration
 
-If you need to extend the Tailwind configuration:
+Only needed if you use theme-only CSS (`/themes/carbide`) with your own Tailwind build. For zero-config, skip this.
 
 ```javascript
 /** @type {import('tailwindcss').Config} */
@@ -218,9 +219,9 @@ module.exports = {
 };
 ```
 
-### Custom CSS Setup
+### Custom CSS Setup (theme-only; optional)
 
-For more control over CSS imports:
+Default is `/styles` (pre-compiled). Only if you run your own Tailwind:
 
 ```css
 /* src/index.css */
@@ -261,8 +262,8 @@ If using TypeScript, ensure your `tsconfig.json` includes the component library
 # Install npx globally
 npm install -g npx
 
-# Or use npm directly
-npm init @machinemetrics/mm-react-components
+# Run init (same command)
+npx @machinemetrics/mm-react-components mm-init
 ```
 
 ### Issue: "Cannot find module" errors
@@ -282,22 +283,12 @@ rm -rf node_modules package-lock.json
 npm install
 
 # Run init script again
-npx @machinemetrics/mm-react-components init
+npx @machinemetrics/mm-react-components mm-init
 ```
 
 ### Issue: Tailwind CSS not working
 
-**Cause**: Tailwind configuration not set up correctly.
-
-**Solution**:
-
-```bash
-# Initialize Tailwind manually
-npx tailwindcss init -p
-
-# Update tailwind.config.js with correct content paths
-# Ensure PostCSS is configured
-```
+**Only relevant if** you chose to use theme-only CSS (`/themes/carbide`) with your own Tailwind. For zero-config, use `/styles` instead—no Tailwind needed.
 
 ### Issue: Components not styling correctly
 
@@ -306,8 +297,8 @@ npx tailwindcss init -p
 **Solution**:
 
 ```tsx
-// Ensure CSS is imported in your main file
-import '@machinemetrics/mm-react-components/themes/carbide';
+// Ensure pre-compiled CSS is imported in your main CSS file (e.g. src/index.css):
+// @import '@machinemetrics/mm-react-components/styles';
 
 // Ensure carbide class is applied to root element
 <div className="carbide">

package/agent-docs/init-readme.md

@@ -15,19 +15,15 @@ This directory contains comprehensive documentation and tools for setting up the
 
 ### Scripts and Tools
 
-- **`init.cjs`** - Main initialization script (in `scripts/` directory)
-- **`npx-init.cjs`** - NPX-specific initialization script (in `scripts/` directory)
+- **mm-init** – Package bin (run via `npx @machinemetrics/mm-react-components mm-init`). Uses `npx-init.cjs` under the hood and installs the library, adds `/styles` import, creates examples, and optionally installs the Carbide skill or runs Chakra migration.
 
 ## Quick Start
 
 ### 1. Automated Setup (Preferred)
 
 ```bash
-# Run the main init script
-npx @machinemetrics/mm-react-components init
-
-# Or use the direct script
-npx mm-init
+# From your React project root (run via npx; no install needed)
+npx @machinemetrics/mm-react-components mm-init
 ```
 
 ### 2. Manual Setup (Complete Control)
@@ -39,26 +35,23 @@ Follow the detailed instructions in `ai-agent-init-guide.md` for step-by-step ma
 ### Dependencies Installed
 
 - **Core Library**: `@machinemetrics/mm-react-components`
-- **Peer Dependencies**: `class-variance-authority`, `clsx`, `tailwind-merge`, `@radix-ui/react-slot`, `lucide-react`
-- **Build Dependencies**: `tailwindcss`, `autoprefixer`, `postcss`
-- **TypeScript Dependencies**: `@types/react`, `@types/react-dom`, `typescript` (if enabled)
+- **React**: ^18.2.0 or ^19.0.0 (peer)
+- No Tailwind, PostCSS, or other build tools required for zero-config.
 
-### Configuration Files Created
+### What mm-init Does
 
-- **`tailwind.config.js`** - Tailwind CSS configuration with component library paths
-- **`postcss.config.js`** - PostCSS configuration for CSS processing
-- **`src/index.css`** - CSS file with Carbide theme import
+- Installs the library and adds the pre-compiled CSS import to your `index.css` (or creates it).
+- Creates example components in `mm-components-examples/`.
+- Optionally installs the Carbide AI skill and offers Chakra UI migration if detected.
 
-### Project Structure
+### Project Structure (zero-config)
 
 ```
 your-project/
 ├── src/
-│   ├── index.css (with Carbide theme import)
-│   ├── App.tsx (with carbide class)
-│   └── Example.tsx (example component)
-├── tailwind.config.js
-├── postcss.config.js
+│   ├── index.css (with @import '.../styles')
+│   └── App.tsx (add className="carbide" to root)
+├── mm-components-examples/   (created by mm-init)
 ├── package.json
 └── node_modules/
     └── @machinemetrics/mm-react-components/
@@ -75,11 +68,7 @@ your-project/
 
 ### Framework-Specific Setup
 
-Each framework has specific configuration requirements:
-
-- **Next.js**: Requires `transpilePackages` configuration
-- **Vite**: Requires CSS processing configuration
-- **CRA**: Requires CRACO for Tailwind support
+With zero-config (`/styles`), no framework-specific build config is required. If using Next.js, add `transpilePackages: ['@machinemetrics/mm-react-components']` to next.config.js so the package is compiled.
 
 ## Usage Examples
 
@@ -91,7 +80,7 @@ npx create-react-app my-app --template typescript
 cd my-app
 
 # Run init script
-npx @machinemetrics/mm-react-components init
+npx @machinemetrics/mm-react-components mm-init
 
 # Start development server
 npm start
@@ -105,7 +94,7 @@ npx create-next-app@latest my-app --typescript --tailwind --eslint
 cd my-app
 
 # Run init script
-npx @machinemetrics/mm-react-components init
+npx @machinemetrics/mm-react-components mm-init
 
 # Start development server
 npm run dev
@@ -119,7 +108,7 @@ npm create vite@latest my-app -- --template react-ts
 cd my-app
 
 # Run init script
-npx @machinemetrics/mm-react-components init
+npx @machinemetrics/mm-react-components mm-init
 
 # Start development server
 npm run dev
@@ -144,7 +133,7 @@ npm run dev
 ### Debugging Steps
 
 1. **Check dependencies**: `npm list @machinemetrics/mm-react-components`
-2. **Verify configuration**: Check `tailwind.config.js` and `postcss.config.js`
+2. **Verify configuration**: Check that `index.css` imports `@machinemetrics/mm-react-components/styles` and root has `carbide` class
 3. **Test imports**: Try importing a component
 4. **Check CSS**: Ensure theme is imported and applied
 
@@ -154,19 +143,15 @@ npm run dev
 
 AI agents can use these files to:
 
-1. **Automated Setup**: Use the main init script for standard setups
-2. **Fallback Setup**: Use the fallback script when main script fails
-3. **Manual Setup**: Follow the detailed guides for complex scenarios
-4. **Troubleshooting**: Use the troubleshooting guide to resolve issues
+1. **Automated Setup**: Use `npx @machinemetrics/mm-react-components mm-init` for standard setups
+2. **Manual Setup**: Follow ai-agent-init-guide.md (install library, add /styles import, add carbide class)
+3. **Troubleshooting**: Use init-troubleshooting.md when the init script fails or for edge cases
 
 ### AI Agent Commands
 
 ```bash
-# Automated setup
-node scripts/init.cjs
-
-# Or with npx
-npx @machinemetrics/mm-react-components init
+# Automated setup (from consumer project; no need to clone the repo)
+npx @machinemetrics/mm-react-components mm-init
 
 # Manual setup (follow ai-agent-init-guide.md)
 # 1. Install dependencies
@@ -184,8 +169,6 @@ After setup, verify:
 - [ ] `@machinemetrics/mm-react-components` is installed
 - [ ] All peer dependencies are installed
 - [ ] CSS file imports the Carbide theme
-- [ ] Tailwind CSS is configured
-- [ ] PostCSS is configured
 - [ ] Root element has `carbide` class
 - [ ] Components can be imported and used
 - [ ] Build process works without errors
@@ -239,10 +222,12 @@ module.exports = {
 };
 ```
 
-### Custom CSS Setup
+### Custom CSS Setup (optional theme-only path)
+
+For zero-config, use `/styles`. Only if you run your own Tailwind build, you can use theme-only:
 
 ```css
-/* src/index.css */
+/* src/index.css - theme-only (requires your own Tailwind config) */
 @import '@machinemetrics/mm-react-components/themes/carbide';
 
 /* Custom CSS variables */
@@ -280,4 +265,4 @@ module.exports = {
 
 This initialization setup provides comprehensive tools and documentation for setting up the MachineMetrics React Components library. Whether using automated scripts or manual setup, the goal is to provide a smooth development experience with industrial-grade components.
 
-For AI agents, these files provide everything needed to automate the setup process and handle edge cases when the main scripts fail. The fallback script ensures that setup can always be completed, even in complex scenarios.
+For AI agents, these files provide everything needed to automate the setup process and handle edge cases when mm-init fails or for manual setup.

package/agent-docs/init-troubleshooting.md

@@ -14,11 +14,8 @@
 # Install NPX globally
 npm install -g npx
 
-# Or use npm directly
-npm init @machinemetrics/mm-react-components
-
-# Alternative: Use the package directly
-npx @machinemetrics/mm-react-components init
+# Run init (correct command)
+npx @machinemetrics/mm-react-components mm-init
 ```
 
 #### Error: `Permission denied`
@@ -50,7 +47,7 @@ npm cache clean --force
 npm config set registry https://registry.npmjs.org/
 
 # Retry with verbose output
-npx @machinemetrics/mm-react-components init --verbose
+npx @machinemetrics/mm-react-components mm-init
 ```
 
 ### 2. Dependency Installation Issues
@@ -80,16 +77,7 @@ npm list @machinemetrics/mm-react-components
 
 **Solution**:
 
-```bash
-# Install all peer dependencies
-npm install class-variance-authority clsx tailwind-merge @radix-ui/react-slot lucide-react
-
-# Install build dependencies
-npm install -D tailwindcss autoprefixer postcss
-
-# Check for version conflicts
-npm ls
-```
+For **zero-config** (recommended), you only need the library and React. Ensure `@import '@machinemetrics/mm-react-components/styles'` is in your CSS and the root has `className="carbide"`. If you see peer warnings for tailwind/PostCSS, they are optional when using `/styles`.
 
 #### Error: `EACCES: permission denied`
 
@@ -112,48 +100,11 @@ nvm use node
 
 #### Error: `Cannot find module 'tailwindcss'`
 
-**Cause**: Tailwind CSS not installed or not configured.
-
-**Solution**:
-
-```bash
-# Install Tailwind CSS
-npm install -D tailwindcss
-
-# Initialize Tailwind
-npx tailwindcss init -p
-
-# Update tailwind.config.js
-module.exports = {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/@machinemetrics/mm-react-components/dist/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-```
+**Only relevant if** you are not using zero-config (`/styles`). For zero-config, use `@import '@machinemetrics/mm-react-components/styles'` in your CSS—no Tailwind needed. If you use Tailwind (theme-only path), run `npm install -D tailwindcss` and add content paths and theme extension per library docs.
 
 #### Error: `PostCSS plugin tailwindcss requires Tailwind CSS`
 
-**Cause**: PostCSS configuration missing or incorrect.
-
-**Solution**:
-
-```bash
-# Install PostCSS dependencies
-npm install -D postcss autoprefixer
-
-# Create postcss.config.js
-echo "module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}" > postcss.config.js
-```
+**Only relevant if** you use Tailwind. For zero-config, use `/styles` and skip PostCSS/Tailwind. If you use Tailwind, add `postcss.config.js` with `tailwindcss` and `autoprefixer` plugins.
 
 #### Error: `Cannot resolve dependency 'lucide-react'`
 
@@ -444,7 +395,7 @@ ls -la dist/
 
 ```bash
 # Run with verbose output
-npx @machinemetrics/mm-react-components init --verbose
+npx @machinemetrics/mm-react-components mm-init
 
 # Check npm logs
 npm config get loglevel