@machinemetrics/mm-react-components 1.4.2 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machinemetrics/mm-react-components",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "Industrial-grade React components for manufacturing applications",
   "keywords": [
     "react",
@@ -82,6 +82,11 @@
     "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
     "test": "playwright test --config=playwright.config.ts --reporter=line",
+    "test:skill": "node --test \"tests/skill/*.test.mjs\"",
+    "check:theme-parity": "node scripts/check-theme-parity.cjs",
+    "check:component-artifacts": "node scripts/check-component-artifacts.cjs --all",
+    "verify:component": "node scripts/verify-component.cjs",
+    "verify": "npm run lint && npm run type-check && npm run test:skill && npm run check:theme-parity && npm run check:component-artifacts && npm run build",
     "test:ui": "playwright test --config=playwright.config.ts --ui",
     "test:headed": "playwright test --config=playwright.config.ts --headed",
     "test:visual": "npm run test:visual:light && npm run test:visual:dark",

package/dist/cursor-skill/mm-carbide/SKILL.md

@@ -1,72 +0,0 @@
----
-name: mm-carbide
-description: Generate UIs and widgets with Carbide and MachineMetrics React Components. Use when the user asks to create or generate a UI, widget, screen, or interface using mm-react-components, Carbide, or @machinemetrics/mm-react-components.
----
-
-# mm-carbide: UI and widget generation with Carbide
-
-## Components
-
-- Use **only** exports from `@machinemetrics/mm-react-components`. Do not create new components or use other UI libraries.
-- Use compound components as in the library: Dialog + DialogTrigger + DialogContent; Form + FormField; DataTable + column descriptors; Card + CardHeader + CardContent + CardFooter; Sheet, DropdownMenu, Tabs, etc. Never replace them with raw divs and custom classes.
-- Use `cn()` from the library and Tailwind for layout and styling. Respect `data-slot` for Carbide theming where applicable.
-- For a component list and patterns, see [reference.md](reference.md). For full widget and visualization rules, see [widget-rules.md](widget-rules.md).
-
-## Theme and styling
-
-- **Color/CSS reference:** Search **`themes/carbide`** (`carbide.css`) for `--` tokens. **`agent-docs/style-color-reference.md`** is a short overview only. Precompiled `/styles` contains only rules from this library’s build.
-- **CSS variables only.** Never hardcode colors, spacing, radii, or shadows. Use semantic tokens: `--background`, `--foreground`, `--primary`, `--muted`, `--muted-foreground`, `--destructive`, `--border`, `--ring`, etc.
-- **When converting a component to Carbide:** Remove existing inline styles (`style={{ ... }}`) and component-level CSS (e.g. `.module.css`, `<style>`, or component-scoped styles). Carbide supplies appearance via theme tokens and component variants; legacy styles conflict with the theme and break consistency.
-- **Variants over one-off styles.** Use component variants and sizes (e.g. Button: `variant="default"|"destructive"|"outline"|"secondary"|"ghost"|"link"`, `size="sm"|"md"|"lg"|"icon"`). Do not apply brand colors or one-off Tailwind color classes to components.
-- **Layout.** Use Flexbox/Grid and `gap-*` for spacing; avoid manual margin chains. Prefer `className="flex flex-col gap-4"` (or similar) over stacking margins.
-- **App setup.** Consumers must import the library styles and wrap the app (or Carbide subtree) in an element with class `carbide` so the theme applies. See [reference.md](reference.md) for setup.
-- **Dark mode.** All styling must work in both light and dark mode via CSS variables; do not hardcode colors that break theme switching.
-- **Accessibility.** Use visible focus states, keyboard support, and semantic structure; avoid relying on color alone.
-
-## Component discovery
-
-**When the package is installed in this project:** Check the package’s **agent-docs** at `node_modules/@machinemetrics/mm-react-components/agent-docs/` (start with **agent-documentation-reference.md**). Prefer using or composing library components over building from scratch.
-
-**When the package is not installed in this workspace:** agent-docs will not exist. Use this skill’s [reference.md](reference.md) for components and patterns and [widget-rules.md](widget-rules.md) for widget rules. Recommend the user install the package in the project (`npx @machinemetrics/mm-react-components mm-init` or `npm install @machinemetrics/mm-react-components`) so full docs and setup guides are available.
-
-## When generating UI
-
-**Do:** Import from the library; use compound components and variants; use Tailwind for layout and spacing; include proper TypeScript types and accessibility (focus, ARIA where needed).
-
-**Avoid:** Hardcoded colors (e.g. `bg-blue-600`, `text-gray-500`); inline brand styling; non-semantic HTML; missing focus or labels on interactive elements.
-
-**Scrolling:** There is no Panel component. For panel-like or card-like regions where content can be longer than the box, use **ScrollArea** around the scrollable content. **ScrollArea only scrolls when it has a constrained height**—otherwise the container grows with content and no scroll appears. Always give ScrollArea an explicit height: e.g. `className="h-[300px]"` or `max-h-[50vh]`. In a flex column (e.g. Card with `flex flex-col max-h-[80vh]`), use `ScrollArea className="flex-1 min-h-0"` so the flex item can shrink and scroll; without `min-h-0` the item won’t shrink and scrolling won’t work. Card is for structure only and does not scroll—wrap CardContent (or the scrollable body) in ScrollArea when content may overflow.
-
-## Widget rules
-
-- **Visual, not textual**: Every widget must include at least one chart, graph, or visual data representation. Text is for titles, labels, and brief annotations only (80% visuals / 20% text max).
-- **Show data with insight**: Use comparisons, benchmarks, and highlighting. Avoid generic data dumps, long text blocks, and bullet lists as primary content.
-- **One theme per widget**: One central message per widget; simplicity above all.
-
-## Technical
-
-- Default widget dimensions: 100% width × 400px.
-- Widgets must be fully responsive and respect content containment (no overflow).
-- Only use data explicitly provided; never hallucinate or use placeholder data. Adapt to available data without asking for more.
-
-## Converting to Carbide (from other libraries or custom UI)
-
-When converting existing components to Carbide (including from Chakra UI, MUI, Ant Design, custom components, or inline-styled markup):
-
-1. **Remove legacy styling.** Strip inline styles (`style={{ ... }}`), component CSS files (e.g. `.module.css`), and any library-specific style props (e.g. Chakra `sx`/`colorScheme`, MUI `sx`). Rely on Carbide’s theme and variants instead.
-2. **Map to library components.** Replace each existing UI primitive with the closest Carbide export (Button, Input, Card, Dialog, DataTable, Form, etc.). Use [reference.md](reference.md) and agent-docs when the package is installed.
-3. **Use variants and tokens.** Express intent via props (`variant`, `size`) and layout via Tailwind with semantic tokens (`bg-background`, `text-muted-foreground`, `border-border`). Do not re-introduce hardcoded colors or one-off CSS.
-4. **Preserve structure and behavior.** Keep markup structure (headings, sections, forms, tables) and behavior (handlers, validation, state); change only the UI layer to Carbide components and Tailwind layout.
-5. **Verify app setup.** Ensure the app imports `@machinemetrics/mm-react-components/styles` and wraps the Carbide subtree in an element with class `carbide`.
-
-**When the package is installed in this project:** Use agent-docs (e.g. **chakra-migration-\***) for library-specific migration steps in addition to the above.
-
-## Setup, init, and migration
-
-**When the package is installed in this project:** Use the package’s **agent-docs** at `node_modules/@machinemetrics/mm-react-components/agent-docs/` for setup, initialization (`mm-init`), Chakra UI migration, and the full doc index. Start with **agent-documentation-reference.md**; use **ai-agent-init-guide.md** for setup and **ai-agent-guide.md** (and chakra-migration-\*) for migration.
-
-**When the package is not installed:** agent-docs is not available. Recommend running `npx @machinemetrics/mm-react-components mm-init` from the project root (or `npm install @machinemetrics/mm-react-components` then adding the styles import and `.carbide` class). After install, agent-docs will be in node_modules for full guides.
-
-## Version check while using
-
-When using this skill, if you have terminal/tool access, you may run `npx @machinemetrics/mm-react-components mm-install-skill` once (e.g. at the start of a UI task or when the user asks about updates) to ensure the installed skill matches the package version; the command reports "Already up to date" or updates the skill. If the user is not on Cursor, they can pass `--target=copilot`, `--target=claude`, or `--target=gemini` to install for VS Code/Copilot, Claude Code, or Gemini CLI. Do not run it on every message—once per session or when relevant is enough.

package/dist/cursor-skill/mm-carbide/reference.md

@@ -1,59 +0,0 @@
-# mm-carbide reference
-
-## Styling and conventions
-
-- **Authoritative tokens:** **`@machinemetrics/mm-react-components/themes/carbide`** (`carbide.css`) — search for `--` variables and `.carbide` rules. **`agent-docs/style-color-reference.md`** is an overview only. Precompiled `/styles` is scoped to this library’s build; use **`var(--token)`** from `carbide.css` when needed.
-- **Colors and tokens:** Use only CSS variables / semantic tokens (e.g. `bg-background`, `text-foreground`, `text-muted-foreground`, `border-border`, `bg-primary`, `text-destructive`). Never use raw Tailwind color classes like `bg-blue-600` or `text-gray-500`. For palette stops, use arbitrary values: `bg-[var(--grey-500)]`, etc.
-- **Variants and sizes:** Use component props: `variant="default"|"destructive"|"outline"|"secondary"|"ghost"|"link"`, `size="sm"|"md"|"lg"|"icon"` where supported (Button and similar). **Badge** also supports semantic status variants: `neutral`, `info`, `success`, `critical`, `warning`, `attention`, `production`, `setup`, `custom` — see **agent-documentation-reference.md** (_Badge variants_).
-- **Layout:** Use `flex`, `grid`, and `gap-*` for spacing; avoid ad-hoc margins between siblings.
-- **Converting to Carbide:** Remove existing inline styles and component CSS; map to library components and use variants/tokens. See SKILL.md section “Converting to Carbide.”
-- **Setup:** Import library styles (e.g. `import '@machinemetrics/mm-react-components/styles'`) and wrap the app (or Carbide root) in `<div className="carbide">` so the theme and fonts apply.
-
-## Component discovery
-
-**When the package is installed in this project:** Check **agent-docs** at `node_modules/@machinemetrics/mm-react-components/agent-docs/`; use **agent-documentation-reference.md** as the index for existing components and patterns.
-
-**When the package is not installed in this workspace:** agent-docs is not present. Use this reference and [widget-rules.md](widget-rules.md); recommend installing the package in the project (`mm-init` or `npm install @machinemetrics/mm-react-components`) for the full doc set.
-
-## Key exports (from @machinemetrics/mm-react-components)
-
-Import from the package main entry (see `src/index.ts` in the repo for the full list).
-
-**Layout and structure**: PageHeader, Card (CardHeader, CardTitle, CardDescription, CardContent, CardFooter), **ScrollArea** (ScrollBar), Tabs (TabsList, TabsTrigger, TabsContent), Sidebar, Breadcrumb, Field (FieldLabel, FieldDescription, FieldError, FieldGroup, etc.), Item (ItemMedia, ItemContent, ItemActions, etc.).
-
-**Overlays and dialogs**: Dialog (DialogTrigger, DialogContent, DialogHeader, DialogFooter, etc.), Sheet, Drawer, AlertDialog, Popover, Tooltip (TooltipTrigger, TooltipContent, TooltipProvider), DropdownMenu, HoverCard, ContextMenu.
-
-**Forms**: Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage; Input, SearchInput, Textarea, Label, Checkbox, Switch, RadioGroup/RadioGroupItem, Select, Slider, NativeSelect, Combobox, InputOTP, InputGroup, DatePicker, DateRangePicker, Calendar.
-
-**Data display**: DataTable, DataTablePagination, ResponsiveTable, DataTableToolbar, createColumnDescriptor, createTextColumn, createNumericColumn, createBadgeColumn, createDateColumn, etc.; Table (TableHeader, TableBody, TableRow, TableCell, etc.); ChartContainer, ChartTooltip, ChartLegend, ChartStyle; Progress, Skeleton, Badge, Avatar, HeroMetricCard.
-
-**Feedback and actions**: Button, buttonVariants, ButtonGroup; Toaster, toast; Alert, AlertTitle, AlertDescription; Spinner, SpinnerCarbide; Pagination, SimplePagination; Empty (EmptyHeader, EmptyTitle, EmptyDescription, etc.).
-
-**Other**: Accordion, Collapsible, Separator, Dropzone, ResizablePanelGroup, Carousel, Command, CodePreview, Kbd, cn (utility). Theme: activateCarbideTheme, toggleCarbideTheme, isCarbideThemeActive, etc.
-
-## Scrolling: Card vs ScrollArea
-
-There is no "Panel" component. For panel-like or card-like regions where content may be longer than the visible area, use **ScrollArea** for the scrollable region. **Card** is structure only (border, sections) and does not scroll.
-
-- **ScrollArea only scrolls when it has a constrained height.** Without a height (or max-height) on the ScrollArea root, the container grows with content and no scrollbar appears. Always set an explicit height: e.g. `className="h-[300px]"` or `max-h-[50vh]`.
-- In a **flex column** (e.g. Card with `flex flex-col max-h-[80vh]`), use `ScrollArea className="flex-1 min-h-0"`. The `min-h-0` is required so the flex item can shrink below its content size; without it, ScrollArea won’t scroll.
-- Put long content inside ScrollArea; use Card for the outer container and ScrollArea inside CardContent (or as the body) when the body should scroll.
-
-**If ScrollArea doesn’t scroll:** Ensure the ScrollArea element has a bounded height (fixed height, max-height, or `flex-1 min-h-0` inside a constrained flex container). Never use ScrollArea without one of these.
-
-## Patterns
-
-- **PageHeader**: Use for page titles with optional actions, tabs, and breadcrumbs (ActionConfig, TabConfig, MenuItemConfig).
-- **DataTable**: Use createColumnDescriptor / createTextColumn / createNumericColumn / createBadgeColumn / createDateColumn and column registry; use useDataTableState, DataTableToolbar, DataTablePagination.
-- **Form**: Use Form + FormField with react-hook-form; FormItem, FormLabel, FormControl, FormDescription, FormMessage.
-- **Charts**: Use ChartContainer, ChartTooltip, ChartLegend, ChartStyle with recharts; see chart component for config.
-
-## Widget rules summary
-
-- **When to use**: Charts/graphs for trends, comparisons, distributions (with insight annotations). Icons/indicators for status, categories, severity. Metrics/numbers for single KPIs with context (vs target, trend). Text only for labels, brief context, annotations.
-- **Insight-driven**: Add comparisons (vs average, vs goal), highlight what matters (color, sizing), show direction/trend (arrows, sparklines), explain significance.
-- **Avoid**: Text-only widgets, generic charts without context, equal visual weight for all data, missing comparison or context.
-- **Chart limits**: Max 4 lines per line chart, max 4 bars per cluster, max 5 sectors in pie; use small multiples or focus charts if more needed.
-- **Accessibility**: WCAG contrast (4.5:1 text, 3:1 graphics); never rely on color alone—use patterns, shapes, or labels; direct labels on data when possible.
-
-For full widget and visualization rules, see [widget-rules.md](widget-rules.md).