@machinemetrics/mm-react-components 1.2.1 → 1.2.3

package/dist/preview/CardPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardPreview.d.ts","sourceRoot":"","sources":["../../src/preview/CardPreview.tsx"],"names":[],"mappings":"AAcA,MAAM,CAAC,OAAO,UAAU,WAAW,4CAsLlC"}
+{"version":3,"file":"CardPreview.d.ts","sourceRoot":"","sources":["../../src/preview/CardPreview.tsx"],"names":[],"mappings":"AAcA,MAAM,CAAC,OAAO,UAAU,WAAW,4CAkMlC"}

package/dist/preview/ColorsPreview.d.ts

@@ -1,4 +1,6 @@
-export type ColorsSection = 'Carbide Palette' | 'Core' | 'Sidebar' | 'Inputs & Surfaces' | 'Tabs' | 'Table' | 'Overlay' | 'Spinner' | 'Charts';
+export type ColorsSection = 'Carbide Palette' | 'Core' | 'Sidebar' | 'Inputs & Surfaces' | 'Tabs' | 'Table' | 'Overlay' | 'Spinner' | 'Charts' | 'Buttons' | 'Code' | 'Style reference';
+/** Page header tab order — single source for `App.tsx` and Colors visual tests. */
+export declare const COLORS_SECTION_ORDER: readonly ["Carbide Palette", "Core", "Sidebar", "Inputs & Surfaces", "Tabs", "Table", "Overlay", "Spinner", "Charts", "Buttons", "Code", "Style reference"];
 interface ColorsPreviewProps {
     section?: ColorsSection;
 }

package/dist/preview/ColorsPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorsPreview.d.ts","sourceRoot":"","sources":["../../src/preview/ColorsPreview.tsx"],"names":[],"mappings":"AAubA,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,MAAM,GACN,SAAS,GACT,mBAAmB,GACnB,MAAM,GACN,OAAO,GACP,SAAS,GACT,SAAS,GACT,QAAQ,CAAC;AAEb,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE,kBAAkB,2CAgGpE"}
+{"version":3,"file":"ColorsPreview.d.ts","sourceRoot":"","sources":["../../src/preview/ColorsPreview.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,MAAM,GACN,SAAS,GACT,mBAAmB,GACnB,MAAM,GACN,OAAO,GACP,SAAS,GACT,SAAS,GACT,QAAQ,GACR,SAAS,GACT,MAAM,GACN,iBAAiB,CAAC;AAEtB,mFAAmF;AACnF,eAAO,MAAM,oBAAoB,6JAaY,CAAC;AAE9C,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,OAAO,EAAE,EAAE,kBAAkB,2CA0GpE"}

package/dist/preview/HoverCardPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCardPreview.d.ts","sourceRoot":"","sources":["../../src/preview/HoverCardPreview.tsx"],"names":[],"mappings":"AAYA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CAmCvC"}
+{"version":3,"file":"HoverCardPreview.d.ts","sourceRoot":"","sources":["../../src/preview/HoverCardPreview.tsx"],"names":[],"mappings":"AAWA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CAmCvC"}

package/dist/preview/SidebarPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarPreview.d.ts","sourceRoot":"","sources":["../../src/preview/SidebarPreview.tsx"],"names":[],"mappings":"AAcA,MAAM,CAAC,OAAO,UAAU,cAAc,4CAwCrC"}
+{"version":3,"file":"SidebarPreview.d.ts","sourceRoot":"","sources":["../../src/preview/SidebarPreview.tsx"],"names":[],"mappings":"AAcA,MAAM,CAAC,OAAO,UAAU,cAAc,4CA2CrC"}

package/dist/preview/StyleReferenceProbesGrid.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Semantic Tailwind class probes for Carbide `@theme` tokens (Colors → Style reference).
+ * Layout matches other Colors sections (`mmc-colors__*`); swatches use `rounded-full` like
+ * the palette, except border/ring probes use `rounded-md` so corners read clearly.
+ */
+export declare function StyleReferenceProbesGrid(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StyleReferenceProbesGrid.d.ts.map

package/dist/preview/StyleReferenceProbesGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyleReferenceProbesGrid.d.ts","sourceRoot":"","sources":["../../src/preview/StyleReferenceProbesGrid.tsx"],"names":[],"mappings":"AAkBA;;;;GAIG;AACH,wBAAgB,wBAAwB,4CA0DvC"}

package/dist/preview/colors-preview-data.d.ts

@@ -0,0 +1,133 @@
+/**
+ * Dev-only: Colors preview token lists + style reference probes.
+ * Update when `src/themes/carbide.css` changes (no build step).
+ */
+export type TokenGroup = {
+    title: string;
+    tokens: string[];
+};
+export type ManualToken = {
+    name: string;
+    light: string;
+    dark: string;
+};
+/**
+ * Literal class probes for the Style reference tab (see `colors.spec.ts` screenshots).
+ * Not derived from carbide.css — class strings must appear as literals in source for the library build.
+ */
+/**
+ * Slugs for `--color-*` entries in `carbide.css` `@theme inline` (semantic color keys).
+ */
+export declare const THEME_INLINE_COLOR_SLUGS: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "primary", "primary-foreground", "secondary", "secondary-foreground", "muted", "muted-foreground", "accent", "accent-foreground", "destructive", "border", "input", "ring", "chart-1", "chart-2", "chart-3", "chart-4", "chart-5", "sidebar", "sidebar-foreground", "sidebar-primary", "sidebar-primary-foreground", "sidebar-accent", "sidebar-accent-foreground", "sidebar-border", "sidebar-ring"];
+export type ThemeInlineColorSlug = (typeof THEME_INLINE_COLOR_SLUGS)[number];
+/**
+ * Literal class strings for each `@theme` color (content scan + Playwright).
+ * Do not build these with template literals — each class must appear verbatim in source.
+ */
+export declare const STYLE_REFERENCE_PROBES: readonly [{
+    readonly className: "bg-background";
+    readonly kind: "background";
+}, {
+    readonly className: "text-foreground";
+    readonly kind: "text";
+}, {
+    readonly className: "bg-card";
+    readonly kind: "background";
+}, {
+    readonly className: "text-card-foreground";
+    readonly kind: "text";
+}, {
+    readonly className: "bg-popover";
+    readonly kind: "background";
+}, {
+    readonly className: "text-popover-foreground";
+    readonly kind: "text";
+}, {
+    readonly className: "bg-primary";
+    readonly kind: "background";
+}, {
+    readonly className: "text-primary-foreground";
+    readonly kind: "text";
+}, {
+    readonly className: "bg-secondary";
+    readonly kind: "background";
+}, {
+    readonly className: "text-secondary-foreground";
+    readonly kind: "text";
+}, {
+    readonly className: "bg-muted";
+    readonly kind: "background";
+}, {
+    readonly className: "text-muted-foreground";
+    readonly kind: "text";
+}, {
+    readonly className: "bg-accent";
+    readonly kind: "background";
+}, {
+    readonly className: "text-accent-foreground";
+    readonly kind: "text";
+}, {
+    readonly className: "bg-destructive";
+    readonly kind: "background";
+}, {
+    readonly className: "text-destructive-foreground";
+    readonly kind: "text";
+}, {
+    readonly className: "border-2 border-border";
+    readonly kind: "border";
+}, {
+    readonly className: "bg-input";
+    readonly kind: "background";
+}, {
+    readonly className: "ring-2 ring-ring";
+    readonly kind: "ring";
+}, {
+    readonly className: "bg-chart-1";
+    readonly kind: "background";
+}, {
+    readonly className: "bg-chart-2";
+    readonly kind: "background";
+}, {
+    readonly className: "bg-chart-3";
+    readonly kind: "background";
+}, {
+    readonly className: "bg-chart-4";
+    readonly kind: "background";
+}, {
+    readonly className: "bg-chart-5";
+    readonly kind: "background";
+}, {
+    readonly className: "bg-sidebar";
+    readonly kind: "background";
+}, {
+    readonly className: "text-sidebar-foreground";
+    readonly kind: "text";
+}, {
+    readonly className: "bg-sidebar-primary";
+    readonly kind: "background";
+}, {
+    readonly className: "text-sidebar-primary-foreground";
+    readonly kind: "text";
+}, {
+    readonly className: "bg-sidebar-accent";
+    readonly kind: "background";
+}, {
+    readonly className: "text-sidebar-accent-foreground";
+    readonly kind: "text";
+}, {
+    readonly className: "border-2 border-sidebar-border";
+    readonly kind: "border";
+}, {
+    readonly className: "ring-2 ring-sidebar-ring";
+    readonly kind: "ring";
+}];
+export type StyleProbeKind = 'background' | 'text' | 'border' | 'ring';
+export type StyleReferenceProbe = {
+    className: string;
+    kind: StyleProbeKind;
+};
+/** Probes used by Colors preview (Style reference tab); covered by `colors.spec.ts` screenshots. */
+export declare function getStyleReferenceProbes(): StyleReferenceProbe[];
+export declare const CARBIDE_TOKEN_GROUPS: TokenGroup[];
+export declare const CARBIDE_MANUAL_SEMANTIC: Record<string, ManualToken[]>;
+//# sourceMappingURL=colors-preview-data.d.ts.map

package/dist/preview/colors-preview-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors-preview-data.d.ts","sourceRoot":"","sources":["../../src/preview/colors-preview-data.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAExE;;;GAGG;AAEH;;GAEG;AACH,eAAO,MAAM,wBAAwB,yeAgC3B,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7E;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCzB,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEvE,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,cAAc,CAAC;CACtB,CAAC;AAEF,oGAAoG;AACpG,wBAAgB,uBAAuB,IAAI,mBAAmB,EAAE,CAE/D;AAED,eAAO,MAAM,oBAAoB,EAAE,UAAU,EAsN5C,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,CA0VjE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machinemetrics/mm-react-components",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Industrial-grade React components for manufacturing applications",
   "keywords": [
     "react",
@@ -38,7 +38,8 @@
     "./README": "./dist/README.md",
     "./migration/config": "./dist/scripts/chakra-to-shadcn-migrator/chakra-to-shadcn.config.json",
     "./agent-docs": "./agent-docs/",
-    "./agent-docs/lovable": "./agent-docs/lovable.md"
+    "./agent-docs/lovable": "./agent-docs/lovable.md",
+    "./agent-docs/style-color-reference": "./agent-docs/style-color-reference.md"
   },
   "engines": {
     "node": ">=20"
@@ -79,16 +80,16 @@
     "type-check": "tsc --noEmit",
     "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",
-    "test:ui": "playwright test --ui",
-    "test:headed": "playwright test --headed",
+    "test": "playwright test --config=playwright.config.ts --reporter=line",
+    "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",
     "test:visual:light": "playwright test --config=playwright.config.ts --project=chromium",
-    "test:visual:dark": "cross-env PLAYWRIGHT_DARK_RUN=1 playwright test --config=playwright.config.ts --project=chromium-dark --workers=1",
+    "test:visual:dark": "playwright test --config=playwright.config.ts --project=chromium-dark",
     "test:visual:ui": "playwright test --config=playwright.config.ts --ui",
     "test:visual:update": "npm run test:visual:update:light && npm run test:visual:update:dark",
     "test:visual:update:light": "playwright test --config=playwright.config.ts --project=chromium --update-snapshots",
-    "test:visual:update:dark": "cross-env PLAYWRIGHT_DARK_RUN=1 playwright test --config=playwright.config.ts --project=chromium-dark --workers=1 --update-snapshots",
+    "test:visual:update:dark": "playwright test --config=playwright.config.ts --project=chromium-dark --update-snapshots",
     "test:visual:ci": "npm run test:visual:light -- --reporter=github && npm run test:visual:dark -- --reporter=github",
     "update-components": "tsx scripts/update-components.ts",
     "update-components:bash": "./scripts/update-components.sh",

package/src/index.css

@@ -49,6 +49,91 @@
   border: none;
 }
 
+/*
+ * Playwright element screenshots use the element's client box; overflow-y-auto on
+ * component_preview clips content below the fold. In visual-test mode, grow the
+ * preview column to full content height (no internal scroll in that pane).
+ * Excludes data-table: that preview needs a fixed viewport + internal scroll.
+ */
+html[data-visual-test]
+  [data-slot='preview_app_root']:not([data-preview-component='data-table']) {
+  height: auto !important;
+  min-height: 100dvh !important;
+  overflow: visible !important;
+}
+
+html[data-visual-test]
+  [data-slot='preview_app_root']:not([data-preview-component='data-table'])
+  [data-slot='main_content'] {
+  align-self: flex-start !important;
+  overflow: visible !important;
+}
+
+html[data-visual-test]
+  [data-slot='preview_app_root']:not([data-preview-component='data-table'])
+  [data-slot='preview_column'] {
+  flex: 0 0 auto !important;
+  min-height: auto !important;
+  overflow: visible !important;
+}
+
+html[data-visual-test]
+  [data-slot='preview_app_root']:not([data-preview-component='data-table'])
+  [data-slot='component_preview'] {
+  flex: 0 0 auto !important;
+  max-height: none !important;
+  min-height: auto !important;
+  overflow: visible !important;
+}
+
+/*
+ * CodePreview wraps demos in [data-slot="code-preview-container"] with overflow-x-auto.
+ * On most engines that creates a scroll container that also clips overflow on the other axis,
+ * so NavigationMenu / dropdown surfaces are cut off in screenshots even when the app root is visible.
+ */
+html[data-visual-test] [data-slot='code-preview-container'] {
+  overflow: visible !important;
+}
+
+/*
+ * Mobile Playwright viewports (375–430px): screenshots target the component, not CodePreview
+ * chrome (outer padding, card border, inner p-6). Small inset (8px) from the PNG edge for readability.
+ * Desktop / author UX unchanged. Skip data-table: its preview relies on full chrome + scroll layout.
+ */
+@media (max-width: 480px) {
+  html[data-visual-test]
+    [data-slot='preview_app_root']:not([data-preview-component='data-table'])
+    [data-slot='component_preview'] {
+    padding: 8px !important;
+  }
+
+  /* Preview roots use `p-8` + data-testid; avoid matching inner widgets that reuse data-testid. */
+  html[data-visual-test]
+    [data-slot='preview_app_root']:not([data-preview-component='data-table'])
+    [data-slot='component_preview']
+    div[data-testid].p-8 {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  html[data-visual-test]
+    [data-slot='preview_app_root']:not([data-preview-component='data-table'])
+    [data-slot='code-preview-container'] {
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    background: transparent !important;
+  }
+
+  html[data-visual-test]
+    [data-slot='preview_app_root']:not([data-preview-component='data-table'])
+    [data-slot='code-preview-output'] {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    border-bottom: none !important;
+  }
+}
+
 /* Animated ellipsis for in-progress labels */
 @keyframes mm-ellipsis {
   0% {