@hirobius/design-system 0.8.1 → 0.10.0

package/dist/tokens.js

@@ -42,6 +42,12 @@ const a = {
         700: "#047857",
         950: "#022c22"
       },
+      violet: {
+        50: "#f5f3ff",
+        400: "#a78bfa",
+        700: "#6d28d9",
+        950: "#2e1065"
+      },
       amber: {
         50: "#fffbeb",
         400: "#fbbf24",

package/dist/types/src/app/components/badge.d.ts

@@ -6,7 +6,7 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const badgeVariants: (props?: {
-    tone?: "success" | "danger" | "warning" | "info" | "neutral";
+    tone?: "success" | "danger" | "warning" | "info" | "neutral" | "inProgress";
 } & import("class-variance-authority/dist/types").ClassProp) => string;
 type BadgeVariantProps = VariantProps<typeof badgeVariants>;
 /** @public */

package/dist/types/src/app/components/button.d.ts

@@ -8,6 +8,7 @@ import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: {
     variant?: "primary" | "secondary" | "tertiary";
+    tone?: "success" | "danger" | "warning" | "info" | "neutral";
     size?: "sm" | "md" | "lg";
     iconOnly?: boolean;
 } & import("class-variance-authority/dist/types").ClassProp) => string;

package/dist/types/src/app/design-system/generated-token-refs.d.ts

@@ -55,6 +55,12 @@ export declare const tokenRefs: {
                 readonly "700": "var(--primitive-color-green-700)";
                 readonly "950": "var(--primitive-color-green-950)";
             };
+            readonly violet: {
+                readonly "50": "var(--primitive-color-violet-50)";
+                readonly "400": "var(--primitive-color-violet-400)";
+                readonly "700": "var(--primitive-color-violet-700)";
+                readonly "950": "var(--primitive-color-violet-950)";
+            };
             readonly amber: {
                 readonly "50": "var(--primitive-color-amber-50)";
                 readonly "400": "var(--primitive-color-amber-400)";
@@ -267,11 +273,13 @@ export declare const tokenRefs: {
                 readonly success: "var(--semantic-color-feedback-success)";
                 readonly warning: "var(--semantic-color-feedback-warning)";
                 readonly info: "var(--semantic-color-feedback-info)";
+                readonly inProgress: "var(--semantic-color-feedback-inProgress)";
                 readonly bg: {
                     readonly error: "var(--semantic-color-feedback-bg-error)";
                     readonly success: "var(--semantic-color-feedback-bg-success)";
                     readonly warning: "var(--semantic-color-feedback-bg-warning)";
                     readonly info: "var(--semantic-color-feedback-bg-info)";
+                    readonly inProgress: "var(--semantic-color-feedback-bg-inProgress)";
                 };
             };
         };

package/dist/types/src/app/design-system/generated-token-values.d.ts

@@ -56,6 +56,12 @@ export declare const tokenValues: {
                 readonly "700": "#047857";
                 readonly "950": "#022c22";
             };
+            readonly violet: {
+                readonly "50": "#f5f3ff";
+                readonly "400": "#a78bfa";
+                readonly "700": "#6d28d9";
+                readonly "950": "#2e1065";
+            };
             readonly amber: {
                 readonly "50": "#fffbeb";
                 readonly "400": "#fbbf24";

package/dist/types/src/index.d.ts

@@ -216,6 +216,25 @@ export declare const tokens: {
                 };
                 $description: string;
             };
+            violet: {
+                "50": {
+                    $value: string;
+                    $description: string;
+                };
+                "400": {
+                    $value: string;
+                    $description: string;
+                };
+                "700": {
+                    $value: string;
+                    $description: string;
+                };
+                "950": {
+                    $value: string;
+                    $description: string;
+                };
+                $description: string;
+            };
             amber: {
                 "50": {
                     $value: string;
@@ -1223,6 +1242,18 @@ export declare const tokens: {
                         };
                     };
                 };
+                inProgress: {
+                    $type: string;
+                    $value: string;
+                    $extensions: {
+                        "com.figma.variables": {
+                            modes: {
+                                Light: string;
+                                Dark: string;
+                            };
+                        };
+                    };
+                };
                 bg: {
                     error: {
                         $type: string;
@@ -1272,6 +1303,18 @@ export declare const tokens: {
                             };
                         };
                     };
+                    inProgress: {
+                        $type: string;
+                        $value: string;
+                        $extensions: {
+                            "com.figma.variables": {
+                                modes: {
+                                    Light: string;
+                                    Dark: string;
+                                };
+                            };
+                        };
+                    };
                 };
             };
         };

package/dist/types/src/mui/index.d.ts

@@ -0,0 +1,64 @@
+/**
+ * `@hirobius/design-system/mui` — theme preset that maps HDS design tokens to a
+ * Material UI (v6+) palette, so MUI-based apps theme from HDS without a local
+ * Style-Dictionary / token-copy step.
+ *
+ * It returns a plain `ThemeOptions`-shaped object whose palette values are HDS
+ * **token CSS variables** (`var(--semantic-…)`). Because those variables already
+ * switch light/dark via `[data-theme]` on the HDS scope, one preset covers both
+ * modes — MUI follows the same variables. This is designed for MUI's CSS-variables
+ * mode:
+ *
+ *     import { createTheme, ThemeProvider } from '@mui/material';
+ *     import { hdsMuiThemeOptions } from '@hirobius/design-system/mui';
+ *
+ *     const theme = createTheme({ cssVariables: true, ...hdsMuiThemeOptions() });
+ *     // render inside a `data-hds` scope so the HDS token vars resolve.
+ *     <ThemeProvider theme={theme}>…</ThemeProvider>
+ *
+ * `@mui/material` is NOT a dependency of this package — the return type is
+ * structural, so this module adds zero weight and no peer requirement unless you
+ * import it. HDS's `error/warning/info/success` map to the semantic feedback
+ * tokens (the same ones behind `<Button tone>` / `<Badge tone>`), so MUI status
+ * colors and HDS status colors stay identical.
+ */
+/** A CSS `var(--…)` reference to an HDS design token. */
+type TokenVar = `var(--${string})`;
+/** Minimal structural shape of the palette this preset fills in. */
+export interface HdsMuiPalette {
+    primary: {
+        main: TokenVar;
+    };
+    error: {
+        main: TokenVar;
+    };
+    warning: {
+        main: TokenVar;
+    };
+    info: {
+        main: TokenVar;
+    };
+    success: {
+        main: TokenVar;
+    };
+    background: {
+        default: TokenVar;
+        paper: TokenVar;
+    };
+    text: {
+        primary: TokenVar;
+        secondary: TokenVar;
+    };
+    divider: TokenVar;
+}
+/** Structural subset of MUI's `ThemeOptions` this preset returns. */
+export interface HdsMuiThemeOptions {
+    cssVariables: true;
+    palette: HdsMuiPalette;
+}
+/**
+ * MUI `ThemeOptions` (partial) whose palette is wired to HDS token variables.
+ * Spread into `createTheme({ cssVariables: true, ...hdsMuiThemeOptions() })`.
+ */
+export declare function hdsMuiThemeOptions(): HdsMuiThemeOptions;
+export default hdsMuiThemeOptions;

package/dist/variables.css

@@ -48,6 +48,10 @@
   --primitive-color-green-400: #34d399;
   --primitive-color-green-700: #047857;
   --primitive-color-green-950: #022c22;
+  --primitive-color-violet-50: #f5f3ff;
+  --primitive-color-violet-400: #a78bfa;
+  --primitive-color-violet-700: #6d28d9;
+  --primitive-color-violet-950: #2e1065;
   --primitive-color-amber-50: #fffbeb;
   --primitive-color-amber-400: #fbbf24;
   --primitive-color-amber-800: #92400e;
@@ -197,10 +201,12 @@
   --semantic-color-feedback-success: var(--primitive-color-green-700);
   --semantic-color-feedback-warning: var(--primitive-color-amber-800);
   --semantic-color-feedback-info: var(--primitive-color-blue-500);
+  --semantic-color-feedback-inProgress: var(--primitive-color-violet-700);
   --semantic-color-feedback-bg-error: var(--primitive-color-red-50);
   --semantic-color-feedback-bg-success: var(--primitive-color-green-50);
   --semantic-color-feedback-bg-warning: var(--primitive-color-amber-50);
   --semantic-color-feedback-bg-info: var(--primitive-color-blue-50);
+  --semantic-color-feedback-bg-inProgress: var(--primitive-color-violet-50);
   --semantic-space-subgrid-hairline: var(--primitive-space-px1);
   --semantic-space-subgrid-xs: var(--primitive-space-px2);
   --semantic-space-subgrid-gap: var(--primitive-space-1);
@@ -444,10 +450,12 @@
   --semantic-color-feedback-success: var(--primitive-color-green-400);
   --semantic-color-feedback-warning: var(--primitive-color-amber-400);
   --semantic-color-feedback-info: var(--primitive-color-blue-300);
+  --semantic-color-feedback-inProgress: var(--primitive-color-violet-400);
   --semantic-color-feedback-bg-error: var(--primitive-color-red-950);
   --semantic-color-feedback-bg-success: var(--primitive-color-green-950);
   --semantic-color-feedback-bg-warning: var(--primitive-color-amber-950);
   --semantic-color-feedback-bg-info: var(--primitive-color-blue-900);
+  --semantic-color-feedback-bg-inProgress: var(--primitive-color-violet-950);
   --semantic-accent-rest: var(--primitive-color-blue-500);
   --semantic-accent-hover: var(--primitive-color-blue-450);
   --semantic-accent-pressed: var(--primitive-color-blue-400);

package/hirobius.tokens.json

@@ -149,6 +149,25 @@
         },
         "$description": "Discrete values within the green range at defined lightness steps."
       },
+      "violet": {
+        "50": {
+          "$value": "#f5f3ff",
+          "$description": "Specific value within the violet range at a defined lightness step."
+        },
+        "400": {
+          "$value": "#a78bfa",
+          "$description": "Specific value within the violet range at a defined lightness step."
+        },
+        "700": {
+          "$value": "#6d28d9",
+          "$description": "Specific value within the violet range at a defined lightness step."
+        },
+        "950": {
+          "$value": "#2e1065",
+          "$description": "Specific value within the violet range at a defined lightness step."
+        },
+        "$description": "Discrete values within the violet range at defined lightness steps."
+      },
       "amber": {
         "50": {
           "$value": "#fffbeb",
@@ -1170,6 +1189,18 @@
             }
           }
         },
+        "inProgress": {
+          "$type": "color",
+          "$value": "{primitive.color.violet.700}",
+          "$extensions": {
+            "com.figma.variables": {
+              "modes": {
+                "Light": "{primitive.color.violet.700}",
+                "Dark": "{primitive.color.violet.400}"
+              }
+            }
+          }
+        },
         "bg": {
           "error": {
             "$type": "color",
@@ -1218,6 +1249,18 @@
                 }
               }
             }
+          },
+          "inProgress": {
+            "$type": "color",
+            "$value": "{primitive.color.violet.50}",
+            "$extensions": {
+              "com.figma.variables": {
+                "modes": {
+                  "Light": "{primitive.color.violet.50}",
+                  "Dark": "{primitive.color.violet.950}"
+                }
+              }
+            }
           }
         }
       }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hirobius/design-system",
   "description": "Hirobius Design Systems Architecture: token-governed React components, documentation surfaces, and distribution tooling.",
   "private": false,
-  "version": "0.8.1",
+  "version": "0.10.0",
   "engines": {
     "node": ">=20",
     "pnpm": ">=8"
@@ -25,6 +25,7 @@
       "default": "./dist/hirobius-ui.js"
     },
     "./tokens.css": "./dist/tokens.css",
+    "./styles.css": "./dist/styles.css",
     "./variables.css": "./dist/variables.css",
     "./tokens": {
       "types": "./dist/types/src/app/design-system/tokens.d.ts",
@@ -51,16 +52,15 @@
       "import": "./dist/form.js",
       "default": "./dist/form.js"
     },
-    "./protocol": {
-      "import": "./protocol/envelope.mjs",
-      "default": "./protocol/envelope.mjs"
+    "./mui": {
+      "types": "./dist/types/src/mui/index.d.ts",
+      "import": "./dist/mui.js",
+      "default": "./dist/mui.js"
     },
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
-    "protocol/envelope.mjs",
-    "protocol/figma-snapshot.schema.json",
     "hirobius.tokens.json",
     "public/hds-manifest.json"
   ],
@@ -220,11 +220,10 @@
     "audit:sbom": "node scripts/audit-sbom.mjs",
     "audit:sidecar": "node scripts/generate-security-posture.mjs",
     "audit:style-dictionary": "bash scripts/poc/style-dictionary-poc/run.sh",
-    "bridge": "node --env-file=.env.local scripts/hds-bridge.mjs",
     "build": "pnpm sync:health && node scripts/sync-icons.mjs && vite build --configLoader native",
     "build:ssr": "vite build --ssr src/entry-server.tsx --outDir .ssr-cache --configLoader native",
     "build:prerender": "pnpm build && pnpm build:ssr && node scripts/prerender.mjs",
-    "build:lib": "vite build -c vite.config.lib.ts && pnpm build:types && node scripts/build-vars-css.mjs && node scripts/embed-fonts.mjs",
+    "build:lib": "vite build -c vite.config.lib.ts && pnpm build:types && node scripts/build-vars-css.mjs && node scripts/embed-fonts.mjs && node scripts/build-styles-css.mjs",
     "build:types": "tsc -p tsconfig.dts.json && node scripts/strip-dts-side-effects.mjs",
     "catalog": "node scripts/generate-visual-catalog.mjs",
     "changelog:generate": "node scripts/generate-changelog.mjs",
@@ -276,7 +275,7 @@
     "check:page-shell": "node scripts/check-page-shell.mjs",
     "check:refs": "node scripts/check-ref-forwarding.mjs",
     "check:registry": "node scripts/check-registry.mjs",
-    "check:release": "pnpm check:full && node scripts/check-style-discipline.mjs && pnpm build && pnpm perf:budget && pnpm test:a11y && pnpm test:visual && pnpm test:responsive && pnpm test:collision && pnpm check:size",
+    "check:release": "pnpm check:full && node scripts/check-style-discipline.mjs && pnpm build && pnpm test:a11y && pnpm test:visual && pnpm test:responsive && pnpm test:collision && pnpm check:size",
     "check:routes": "node scripts/check-link-integrity.mjs --route-links-only",
     "check:secrets": "node scripts/check-secrets.mjs",
     "check:security": "node scripts/check-security-baseline.mjs",
@@ -300,7 +299,6 @@
     "docs:changelogs": "node scripts/generate-component-changelogs.mjs",
     "docs:llms": "node scripts/generate-llms-txt.mjs",
     "figma-variables": "node scripts/build-figma-variables.mjs",
-    "figma:bridge:smoke": "node scripts/figma-bridge-smoke.mjs",
     "figma:diff": "node scripts/figma-diff.mjs",
     "figma:snapshot": "node scripts/normalize-figma-snapshot.mjs",
     "figma:stream": "node scripts/llm-stream-bridge.mjs",
@@ -316,7 +314,6 @@
     "manifest:generate": "node scripts/generate-manifest.mjs && node scripts/generate-component-api.mjs && node scripts/enrich-manifest.mjs",
     "manifest:project": "node scripts/generate-manifest-projection.mjs",
     "nav:generate": "node scripts/generate-nav-model.mjs",
-    "perf:budget": "node -e \"require('fs').readdirSync('.lighthouseci').filter(f=>f.startsWith('lhr-')).forEach(f=>require('fs').unlinkSync('.lighthouseci/'+f))\" 2>/dev/null; lhci collect --config=.lighthouserc.json && lhci assert --config=.lighthouserc.json; find . -maxdepth 1 -type d -name 'C:*' -exec rm -rf {} + 2>/dev/null; true",
     "prebuild": "node scripts/validate-manifest.mjs",
     "prebuild:lib": "node scripts/generate-component-api.mjs",
     "pretest": "node scripts/validate-manifest.mjs && node scripts/check-manifest-drift.mjs && node scripts/check-manifest-schema-semver.mjs && node scripts/audit-component-integrity.mjs --completeness && node scripts/check-source-canon.mjs && node scripts/check-binding-drift.mjs && node scripts/test-figma-masters-snapshot.mjs && node scripts/test-doc-pages-snapshot.mjs && node scripts/check-registry.mjs && node scripts/check-tenant-tokens.mjs && knip --no-exit-code",

package/public/hds-manifest.json

@@ -2,7 +2,7 @@
   "name": "Hirobius Design System",
   "description": "Three-tier design token system for Adrian Milsap's portfolio site. Tokens flow primitive → semantic → component. All visual decisions trace back to hirobius.tokens.json.",
   "version": "1",
-  "generated": "2026-06-18T07:22:17.015Z",
+  "generated": "2026-07-01T06:53:00.024Z",
   "source": "hirobius.tokens.json",
   "format": "W3C DTCG 2025.10",
   "docs": "https://adrianmilsap.com/hds",
@@ -2833,6 +2833,7 @@
       },
       "consumers": [
         "src/app/components/componentPreviewRegistry.tsx",
+        "src/app/lib/nav-active.ts",
         "src/stories/nav-group.stories.tsx"
       ],
       "tokenMapping": {},
@@ -5681,6 +5682,7 @@
         "src/app/components/lab/legacy-token-detail.tsx",
         "src/app/data/hdsEditorial.tsx",
         "src/app/design-system/generated-token-descriptions.ts",
+        "src/mui/index.ts",
         "src/stories/badge.stories.tsx",
         "src/stories/code-block.stories.tsx",
         "src/stories/combobox.stories.tsx",
@@ -8808,6 +8810,34 @@
         "description": "Specific value within the green range at a defined lightness step.",
         "value": "#022c22"
       },
+      {
+        "path": "primitive.color.violet.50",
+        "cssVar": "--primitive-color-violet-50",
+        "type": "color",
+        "description": "Specific value within the violet range at a defined lightness step.",
+        "value": "#f5f3ff"
+      },
+      {
+        "path": "primitive.color.violet.400",
+        "cssVar": "--primitive-color-violet-400",
+        "type": "color",
+        "description": "Specific value within the violet range at a defined lightness step.",
+        "value": "#a78bfa"
+      },
+      {
+        "path": "primitive.color.violet.700",
+        "cssVar": "--primitive-color-violet-700",
+        "type": "color",
+        "description": "Specific value within the violet range at a defined lightness step.",
+        "value": "#6d28d9"
+      },
+      {
+        "path": "primitive.color.violet.950",
+        "cssVar": "--primitive-color-violet-950",
+        "type": "color",
+        "description": "Specific value within the violet range at a defined lightness step.",
+        "value": "#2e1065"
+      },
       {
         "path": "primitive.color.amber.50",
         "cssVar": "--primitive-color-amber-50",
@@ -9824,6 +9854,17 @@
           "resolvedValue": "oklch(0.70 0.2903 266.54)"
         }
       },
+      {
+        "path": "semantic.color.feedback.inProgress",
+        "cssVar": "--semantic-color-feedback-inProgress",
+        "type": "color",
+        "alias": "{primitive.color.violet.700}",
+        "resolvedValue": "#6d28d9",
+        "dark": {
+          "alias": "{primitive.color.violet.400}",
+          "resolvedValue": "#a78bfa"
+        }
+      },
       {
         "path": "semantic.color.feedback.bg.error",
         "cssVar": "--semantic-color-feedback-bg-error",
@@ -9868,6 +9909,17 @@
           "resolvedValue": "oklch(0.22 0.05 266.54)"
         }
       },
+      {
+        "path": "semantic.color.feedback.bg.inProgress",
+        "cssVar": "--semantic-color-feedback-bg-inProgress",
+        "type": "color",
+        "alias": "{primitive.color.violet.50}",
+        "resolvedValue": "#f5f3ff",
+        "dark": {
+          "alias": "{primitive.color.violet.950}",
+          "resolvedValue": "#2e1065"
+        }
+      },
       {
         "path": "semantic.space.subgrid.hairline",
         "cssVar": "--semantic-space-subgrid-hairline",