{"_id":"@aphrody/m3-theme","_rev":"5-787d513a879519b78914ae4d6190f724","name":"@aphrody/m3-theme","dist-tags":{"latest":"3.2.6"},"versions":{"3.2.1":{"name":"@aphrody/m3-theme","version":"3.2.1","keywords":["design-tokens","material-3","md3","shadcn","tailwind"],"author":"aphrody-code","license":"Apache-2.0","_id":"@aphrody/m3-theme@3.2.1","maintainers":[{"name":"yohan971","email":"yohanpierre@live.fr"}],"homepage":"https://github.com/aphrody-code/material-web/tree/main/packages/m3-theme#readme","bugs":{"url":"https://github.com/aphrody-code/material-web/issues"},"dist":{"shasum":"755de7a53b847e4d837f8e253fb1e998a8da7e9c","tarball":"https://registry.npmjs.org/@aphrody/m3-theme/-/m3-theme-3.2.1.tgz","fileCount":14,"integrity":"sha512-dAxsrL1gPLu0VSRbhvSRL8Jbcdlb399vwSEECf+qfBkwzXQRb3qhH5rFsplI9fGL5v4fs8j3vE+usp46CGsmQg==","signatures":[{"sig":"MEUCIAx2kKGoi9QCzPjT2CIHoOll44QV2DeA6XcU7vsHONl5AiEAk1ABycW+QVDha9CwFg8KiI+TEUZWHoSc+h9ezyC4p50=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34675},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","shasum":"755de7a53b847e4d837f8e253fb1e998a8da7e9c","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./react":{"types":"./dist/react.d.ts","default":"./dist/react.js"},"./tauri":{"types":"./dist/tauri.d.ts","default":"./dist/tauri.js"},"./tokens.css":"./tokens.css"},"scripts":{"fmt":"oxfmt .","lint":"oxlint","build":"tsup && tsc -p tsconfig.build.json","generate":"bun run generate.ts && oxfmt tokens.css","typecheck":"tsc --noEmit","typecheck:fast":"tsgo --noEmit"},"_npmUser":{"name":"yohan971","email":"yohanpierre@live.fr"},"_integrity":"sha512-dAxsrL1gPLu0VSRbhvSRL8Jbcdlb399vwSEECf+qfBkwzXQRb3qhH5rFsplI9fGL5v4fs8j3vE+usp46CGsmQg==","repository":{"url":"git+https://github.com/aphrody-code/material-web.git","type":"git","directory":"packages/m3-theme"},"_npmVersion":"10.8.3","description":"Canonical Material 3 fusion tokens (M3 + shadcn/ui + Tailwind v4), light + dark — one generated stylesheet mapping the shadcn and Tailwind colour aliases onto the M3 --md-sys-color-* roles emitted by @aphrody/material-web.","directories":{},"_nodeVersion":"24.3.0","dependencies":{"@aphrody/m3-tokens":"3.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","react":"^19.2.6","bun-types":"^1.3.14","react-dom":"^19.2.6","typescript":"^6.0.3","@types/react":"^19.2.15","@aphrody/bun-rs":"3.2.1","@types/react-dom":"^19.2.3"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/m3-theme_3.2.1_1780527340478_0.23981021009451853","host":"s3://npm-registry-packages-npm-production"}},"3.2.2":{"name":"@aphrody/m3-theme","version":"3.2.2","keywords":["design-tokens","material-3","md3","shadcn","tailwind"],"author":"aphrody-code","license":"Apache-2.0","_id":"@aphrody/m3-theme@3.2.2","maintainers":[{"name":"yohan971","email":"yohanpierre@live.fr"}],"homepage":"https://github.com/aphrody-code/material-web/tree/main/packages/m3-theme#readme","bugs":{"url":"https://github.com/aphrody-code/material-web/issues"},"dist":{"shasum":"e582614465327f9c5b7aed0cfa27965e253b89f1","tarball":"https://registry.npmjs.org/@aphrody/m3-theme/-/m3-theme-3.2.2.tgz","fileCount":14,"integrity":"sha512-xeD57uqMWAbJsGVKZ3MKoERnJK21KmCuQist9IpM2aQMGBBaiAmMrI6bJ/N2DlLA28/NZNx+PQagwmw5BP9GIg==","signatures":[{"sig":"MEUCIGde03tg72pd0oqQv0qLv/r7ldZV1RyBeUmVf3T4XVuxAiEAjdL5LAahBGPnwEacPtIcIQ9CVvUMJheYxuGP3n6cio8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34675},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","shasum":"e582614465327f9c5b7aed0cfa27965e253b89f1","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./react":{"types":"./dist/react.d.ts","default":"./dist/react.js"},"./tauri":{"types":"./dist/tauri.d.ts","default":"./dist/tauri.js"},"./tokens.css":"./tokens.css"},"scripts":{"fmt":"oxfmt .","lint":"oxlint","build":"tsup && tsc -p tsconfig.build.json","generate":"bun run generate.ts && oxfmt tokens.css","typecheck":"tsc --noEmit","typecheck:fast":"tsgo --noEmit"},"_npmUser":{"name":"yohan971","email":"yohanpierre@live.fr"},"_integrity":"sha512-xeD57uqMWAbJsGVKZ3MKoERnJK21KmCuQist9IpM2aQMGBBaiAmMrI6bJ/N2DlLA28/NZNx+PQagwmw5BP9GIg==","repository":{"url":"git+https://github.com/aphrody-code/material-web.git","type":"git","directory":"packages/m3-theme"},"_npmVersion":"10.8.3","description":"Canonical Material 3 fusion tokens (M3 + shadcn/ui + Tailwind v4), light + dark — one generated stylesheet mapping the shadcn and Tailwind colour aliases onto the M3 --md-sys-color-* roles emitted by @aphrody/material-web.","directories":{},"_nodeVersion":"24.3.0","dependencies":{"@aphrody/m3-tokens":"3.2.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","react":"^19.2.6","bun-types":"^1.3.14","react-dom":"^19.2.6","typescript":"^6.0.3","@types/react":"^19.2.15","@aphrody/bun-rs":"3.2.1","@types/react-dom":"^19.2.3"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/m3-theme_3.2.2_1780528052435_0.2101424421243736","host":"s3://npm-registry-packages-npm-production"}},"3.2.4":{"name":"@aphrody/m3-theme","version":"3.2.4","keywords":["design-tokens","material-3","md3","shadcn","tailwind"],"author":"aphrody-code","license":"Apache-2.0","_id":"@aphrody/m3-theme@3.2.4","maintainers":[{"name":"yohan971","email":"yohanpierre@live.fr"}],"homepage":"https://github.com/aphrody-code/material-web/tree/main/packages/m3-theme#readme","bugs":{"url":"https://github.com/aphrody-code/material-web/issues"},"dist":{"shasum":"7df076558e1ecff975480824320a071297877aa5","tarball":"https://registry.npmjs.org/@aphrody/m3-theme/-/m3-theme-3.2.4.tgz","fileCount":14,"integrity":"sha512-hj7Xc0RF1dC4LYhA7qlEbDASBJbx7rr8kEvgm3W6hJ1FpT4kvt3/hHEEbr0CCLm1sKXSM50y+f51jmb9NG8A0A==","signatures":[{"sig":"MEUCIGJz9Lv007Wa5oWN4CotG97St+Qm1EZVXiLXAJgYKxTkAiEA63ZLV+nJCJNoNCRhX5aH8IDG2xyOvYl72dyNQDZ24k4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34675},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","shasum":"7df076558e1ecff975480824320a071297877aa5","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./react":{"types":"./dist/react.d.ts","default":"./dist/react.js"},"./tauri":{"types":"./dist/tauri.d.ts","default":"./dist/tauri.js"},"./tokens.css":"./tokens.css"},"scripts":{"fmt":"oxfmt .","lint":"oxlint","build":"tsup && tsc -p tsconfig.build.json","generate":"bun run generate.ts && oxfmt tokens.css","typecheck":"tsc --noEmit","typecheck:fast":"tsgo --noEmit"},"_npmUser":{"name":"yohan971","email":"yohanpierre@live.fr"},"_integrity":"sha512-hj7Xc0RF1dC4LYhA7qlEbDASBJbx7rr8kEvgm3W6hJ1FpT4kvt3/hHEEbr0CCLm1sKXSM50y+f51jmb9NG8A0A==","repository":{"url":"git+https://github.com/aphrody-code/material-web.git","type":"git","directory":"packages/m3-theme"},"_npmVersion":"10.8.3","description":"Canonical Material 3 fusion tokens (M3 + shadcn/ui + Tailwind v4), light + dark — one generated stylesheet mapping the shadcn and Tailwind colour aliases onto the M3 --md-sys-color-* roles emitted by @aphrody/material-web.","directories":{},"_nodeVersion":"24.3.0","dependencies":{"@aphrody/m3-tokens":"3.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","react":"^19.2.6","bun-types":"^1.3.14","react-dom":"^19.2.6","typescript":"^6.0.3","@types/react":"^19.2.15","@aphrody/bun-rs":"3.2.2","@types/react-dom":"^19.2.3"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/m3-theme_3.2.4_1786525660030_0.2071814460231889","host":"s3://npm-registry-packages-npm-production"}},"3.2.5":{"name":"@aphrody/m3-theme","version":"3.2.5","keywords":["design-tokens","material-3","md3","shadcn","tailwind"],"author":"aphrody-code","license":"Apache-2.0","_id":"@aphrody/m3-theme@3.2.5","maintainers":[{"name":"yohan971","email":"yohanpierre@live.fr"}],"homepage":"https://github.com/aphrody-code/material-web/tree/main/packages/m3-theme#readme","bugs":{"url":"https://github.com/aphrody-code/material-web/issues"},"dist":{"shasum":"1bbb8413721837ce2da2beb2c0a575568836dc21","tarball":"https://registry.npmjs.org/@aphrody/m3-theme/-/m3-theme-3.2.5.tgz","fileCount":14,"integrity":"sha512-khq8gDkoWLbtWVUULV63JDU7AhfMB2Eg3PyPPZI3isHMnpt50IfDS1OCg/vkirKiCP+L+VD7WFbcQCOYYzrwVw==","signatures":[{"sig":"MEQCIAoLDOCwU3QdX+KjTakuG2VD3KAmFypS7EGozupbCBIRAiA5xpd7qRuvPNq8X3yf4eZKPfvW6nO3i6vx3DyS9fkGwA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34676},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","shasum":"1bbb8413721837ce2da2beb2c0a575568836dc21","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./react":{"types":"./dist/react.d.ts","default":"./dist/react.js"},"./tauri":{"types":"./dist/tauri.d.ts","default":"./dist/tauri.js"},"./tokens.css":"./tokens.css"},"scripts":{"fmt":"oxfmt .","lint":"oxlint","build":"tsup && tsc -p tsconfig.build.json","generate":"bun run generate.ts && oxfmt tokens.css","typecheck":"tsc --noEmit","typecheck:fast":"tsgo --noEmit"},"_npmUser":{"name":"yohan971","email":"yohanpierre@live.fr"},"_integrity":"sha512-khq8gDkoWLbtWVUULV63JDU7AhfMB2Eg3PyPPZI3isHMnpt50IfDS1OCg/vkirKiCP+L+VD7WFbcQCOYYzrwVw==","repository":{"url":"git+https://github.com/aphrody-code/material-web.git","type":"git","directory":"packages/m3-theme"},"_npmVersion":"10.8.3","description":"Canonical Material 3 fusion tokens (M3 + shadcn/ui + Tailwind v4), light + dark — one generated stylesheet mapping the shadcn and Tailwind colour aliases onto the M3 --md-sys-color-* roles emitted by @aphrody/material-web.","directories":{},"_nodeVersion":"24.3.0","dependencies":{"@aphrody/m3-tokens":"^3.2.4"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","react":"^19.2.6","bun-types":"^1.3.14","react-dom":"^19.2.6","typescript":"^6.0.3","@types/react":"^19.2.15","@aphrody/bun-rs":"3.2.2","@types/react-dom":"^19.2.3"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/m3-theme_3.2.5_1786525720053_0.4477172539186882","host":"s3://npm-registry-packages-npm-production"}},"3.2.6":{"name":"@aphrody/m3-theme","version":"3.2.6","description":"Canonical Material 3 fusion tokens (M3 + shadcn/ui + Tailwind v4), light + dark — one generated stylesheet mapping the shadcn and Tailwind colour aliases onto the M3 --md-sys-color-* roles emitted by @aphrody/material-web.","keywords":["design-tokens","material-3","md3","shadcn","tailwind"],"homepage":"https://github.com/aphrody-code/material-web/tree/main/packages/m3-theme#readme","bugs":{"url":"https://github.com/aphrody-code/material-web/issues"},"license":"Apache-2.0","author":{"name":"aphrody-code"},"repository":{"type":"git","url":"git+https://github.com/aphrody-code/material-web.git","directory":"packages/m3-theme"},"type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./react":{"types":"./dist/react.d.ts","default":"./dist/react.js"},"./tauri":{"types":"./dist/tauri.d.ts","default":"./dist/tauri.js"},"./tokens.css":"./tokens.css"},"publishConfig":{"access":"public"},"scripts":{"generate":"bun run generate.ts && oxfmt tokens.css","build":"tsup && tsc -p tsconfig.build.json","lint":"oxlint","fmt":"oxfmt .","typecheck":"tsc --noEmit","typecheck:fast":"tsgo --noEmit"},"dependencies":{"@aphrody/m3-tokens":"^3.2.4"},"devDependencies":{"@aphrody/bun-rs":"workspace:*","@types/react":"catalog:","@types/react-dom":"catalog:","bun-types":"catalog:","react":"catalog:","react-dom":"catalog:","tsup":"catalog:","typescript":"catalog:"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"gitHead":"6981e124848acb9ce5364d87af955fd5fe992e23","_id":"@aphrody/m3-theme@3.2.6","_nodeVersion":"24.3.0","_npmVersion":"9.2.0","dist":{"integrity":"sha512-t/4goF9+gDGjiopCsBh1gOlaSZGAo/Yizp8ZujnC0SI9IzHW3lirlta5UCni7FY4b6XtceNf5B054ED3z5cVfw==","shasum":"8f3d213cff27545118e8c955223c04aeda983233","tarball":"https://registry.npmjs.org/@aphrody/m3-theme/-/m3-theme-3.2.6.tgz","fileCount":3,"unpackedSize":15661,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIErIRZXFwlUECiTPh57wG+pZAMSIASlh3GBYDv1Z5IrHAiEA43JqyGZsKQZEvIWW7DHS8IO6fQYWvT0PJ+A5OEfiwns="}]},"_npmUser":{"name":"yohan971","email":"yohanpierre@live.fr"},"directories":{},"maintainers":[{"name":"yohan971","email":"yohanpierre@live.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/m3-theme_3.2.6_1789022172559_0.6688277352104195"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-03T22:55:40.314Z","modified":"2026-09-10T06:36:12.870Z","3.2.1":"2026-06-03T22:55:40.651Z","3.2.2":"2026-06-03T23:07:32.577Z","3.2.4":"2026-08-12T09:07:40.181Z","3.2.5":"2026-08-12T09:08:40.189Z","3.2.6":"2026-09-10T06:36:12.691Z"},"bugs":{"url":"https://github.com/aphrody-code/material-web/issues"},"author":{"name":"aphrody-code"},"license":"Apache-2.0","homepage":"https://github.com/aphrody-code/material-web/tree/main/packages/m3-theme#readme","keywords":["design-tokens","material-3","md3","shadcn","tailwind"],"repository":{"type":"git","url":"git+https://github.com/aphrody-code/material-web.git","directory":"packages/m3-theme"},"description":"Canonical Material 3 fusion tokens (M3 + shadcn/ui + Tailwind v4), light + dark — one generated stylesheet mapping the shadcn and Tailwind colour aliases onto the M3 --md-sys-color-* roles emitted by @aphrody/material-web.","maintainers":[{"name":"yohan971","email":"yohanpierre@live.fr"}],"readme":"<!-- SPDX-License-Identifier: Apache-2.0 -->\n\n# @aphrody/m3-theme\n\nCanonical **Material 3 fusion** tokens — one generated stylesheet\n(`tokens.css`), light and dark, that maps the **shadcn/ui** and **Tailwind v4**\ncolour aliases onto the Material 3 system roles (`--md-sys-color-*`) emitted by\n[`@aphrody/material-web`](../material-web). Import it once and style with\neither vocabulary; no app hand-rolls colour values.\n\n## What's in `tokens.css`\n\n- the M3 system palette `--md-sys-color-*` (light `:root`, dark via\n  `@media (prefers-color-scheme: dark)` **and** a `.dark` class for a forced\n  theme);\n- the **shadcn/ui** alias block (`--background`, `--primary`, `--border`, …)\n  mapped onto the M3 roles;\n- the **Tailwind v4** `@theme inline` block (`--color-background`, …).\n\nBecause the shadcn and Tailwind aliases reference `var(--md-sys-color-*)`, the\ndark theme only re-declares the M3 palette — the aliases follow automatically.\n\n## Use\n\n```ts\n// In any Bun/web app — Bun bundles the CSS into the page.\nimport \"@aphrody/m3-theme/tokens.css\";\n```\n\n```html\n<!-- force the dark theme regardless of the OS preference -->\n<html class=\"dark\"></html>\n```\n\nThen style with the M3 roles (`background: var(--md-sys-color-surface)`) or the\nshadcn aliases (`var(--background)` / `var(--primary)`).\n\n## Regenerate\n\n```sh\nbun run generate     # regenerates tokens.css, then formats it (oxfmt)\n```\n\n`generate.ts` is self-contained and bun-native: the source of truth is the\nMaterial 3 **baseline** palette (seed `#6750A4`) plus the shadcn/Tailwind alias\nmaps, both declared once in the script. The dark palette and both alias layers\nare derived from those declarations so the sheet never drifts by hand. To theme\nfrom a different seed, swap the palette for the output of\n[`@aphrody/m3-tokens/dynamic-color`](../m3-tokens) `schemeFromSeed(seed, { dark })`.\n\n## Dynamic Runtime Theme System\n\nIn addition to the static `tokens.css` stylesheet, `@aphrody/m3-theme` provides a fully dynamic runtime theme system for both JavaScript/TypeScript environments and React applications.\n\nThis system derives the complete set of Material 3 custom properties (`--md-sys-color-*`) dynamically from a single seed color, automatically maps the shadcn/ui and Tailwind v4 color variables, and manages light/dark/system mode.\n\n### 1. Vanilla JS/TS: `applyDynamicFusionTheme`\n\nTo dynamically update the theme on the DOM without a full rebuild:\n\n```ts\nimport { applyDynamicFusionTheme } from \"@aphrody/m3-theme\";\n\n// Applies theme inline to document.documentElement (HTML element)\napplyDynamicFusionTheme(\"#6750A4\", {\n  dark: false, // forces light mode (omitting resolves from DOM/OS preference)\n  contrastLevel: 0.0, // standard contrast, ranges from -1.0 to 1.0\n  variant: \"tonalSpot\", // \"tonalSpot\" | \"content\" | \"fidelity\" | \"expressive\" | \"vibrant\" | \"neutral\" | \"monochrome\"\n});\n```\n\nOptions:\n\n- `dark`: Forces light/dark mode. If omitted, it will automatically detect the theme from the target's `.dark` class or the system's `(prefers-color-scheme: dark)` media query.\n- `target`: The target `HTMLElement` (defaults to `document.documentElement`).\n- `contrastLevel`: Color contrast offset in `[-1.0, 1.0]` (0.0 standard).\n- `variant`: The dynamic scheme algorithm variant (defaults to `\"tonalSpot\"`).\n\n### 2. React Hook & Provider: `M3ThemeProvider` & `useM3Theme`\n\nWrap your React app in the provider to handle user-facing theme configuration, light/dark/system mode, and seed color switching. This updates both `@aphrody/material-web` (Lit components) and Tailwind v4 / shadcn/ui (React layout components) synchronously.\n\n```tsx\nimport { M3ThemeProvider, useM3Theme } from \"@aphrody/m3-theme/react\";\n\nfunction App() {\n  return (\n    <M3ThemeProvider defaultSeedColor=\"#6750a4\" defaultThemeMode=\"system\">\n      <ThemePicker />\n      <YourMainAppLayout />\n    </M3ThemeProvider>\n  );\n}\n\nfunction ThemePicker() {\n  const { themeMode, setThemeMode, seedColor, setSeedColor, resolvedTheme } = useM3Theme();\n\n  return (\n    <div className=\"p-4 flex gap-4\">\n      <select\n        value={themeMode}\n        onChange={(e) => setThemeMode(e.target.value as any)}\n        className=\"border p-2 rounded\"\n      >\n        <option value=\"light\">Light</option>\n        <option value=\"dark\">Dark</option>\n        <option value=\"system\">System ({resolvedTheme})</option>\n      </select>\n\n      <input\n        type=\"color\"\n        value={seedColor}\n        onChange={(e) => setSeedColor(e.target.value)}\n        className=\"w-12 h-10 border rounded\"\n      />\n    </div>\n  );\n}\n```\n\n### 3. Tauri 2.0 Integration: `useM3TauriThemeSync` & `M3TauriTitlebar`\n\nFor React applications compiled into Tauri 2.0 desktop shells, this package provides seamless, zero-dependency integration helpers to manage native window styling:\n\n*   **`useM3TauriThemeSync`**: A custom React hook that automatically synchronizes the M3 theme mode (light/dark) back to the Tauri native window context, allowing native context menus and dialog boxes to match your application's appearance.\n*   **`M3TauriTitlebar`**: A highly polished, Material Design 3 custom titlebar component. It handles window dragging (`data-tauri-drag-region`), maximize/restore state, and window actions (minimize, maximize, close) without external library requirements, automatically hiding when the application runs in a normal web browser.\n\n```tsx\nimport { M3ThemeProvider } from \"@aphrody/m3-theme/react\";\nimport { M3TauriTitlebar, useM3TauriThemeSync } from \"@aphrody/m3-theme/tauri\";\n\nfunction MainAppLayout() {\n  // Syncs M3 theme mode back to Tauri window\n  useM3TauriThemeSync();\n\n  return (\n    <div className=\"flex flex-col h-screen\">\n      {/* Renders a custom M3 borderless titlebar for the desktop app */}\n      <M3TauriTitlebar title=\"My Material App\" logo={<AppLogo />} />\n      <div className=\"flex-1 overflow-auto\">\n        {/* Your content */}\n      </div>\n    </div>\n  );\n}\n```\n\n## Relationship to `@aphrody/m3-tokens`\n\n`m3-tokens` is the **engine** (MUI-theme → M3 token generation, runtime Material\nYou via `material-color-utilities`, the raw `--md-sys-color-*` and breakpoint\nCSS). `m3-theme` is the **opinionated fusion sheet** built on top of it: the M3\npalette plus the shadcn + Tailwind alias surface, ready to drop into a site that\nmixes M3 web components with shadcn/Tailwind utilities.\n","readmeFilename":"README.md"}