@web-my-money/tokens 1.0.0

package/dist/react.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { c as FontSizeName, e as ThemeName } from './font-size-runtime-DlvZXy2n.js';
+
+/**
+ * @web-my-money/tokens/react — versioned React theme helpers.
+ * Wraps the framework-agnostic runtime (theme-runtime.ts) so every app shares one
+ * theme vocabulary: light / dark / wmm (default dark, persisted as `wmm-theme`).
+ *
+ *   import { ThemeProvider, ThemeToggle, useTheme } from "@web-my-money/tokens/react";
+ *
+ * React is an OPTIONAL peer — the core tokens package stays framework-agnostic;
+ * React is only pulled in if you import this subpath.
+ */
+
+interface ThemeCtx {
+    theme: ThemeName;
+    setTheme: (t: ThemeName) => void;
+    themes: readonly ThemeName[];
+}
+declare function ThemeProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+declare function useTheme(): ThemeCtx;
+/** Minimal segmented theme switcher styled from token CSS vars. */
+declare function ThemeToggle({ className }: {
+    className?: string;
+}): React.JSX.Element;
+/** Persisted 3-step text-size preference, synced with whatever `fontSizeBootScript` already applied. */
+declare function useFontSizePreference(): [FontSizeName, (size: FontSizeName) => void];
+/**
+ * Three "A" buttons that scale the whole UI via `html.font-*` classes. Modeled
+ * directly on wmm-finance-hr's real FontSizeToggle. Uses inline `style` with
+ * token CSS vars (not Tailwind utility classes) — same reasoning as
+ * `ThemeToggle` above: `tokens` ships no rendered-JSX Tailwind classes, so
+ * consuming apps never need a `@source` directive for this package.
+ */
+declare function FontSizeToggle({ className }: {
+    className?: string;
+}): React.JSX.Element;
+declare const BREAKPOINTS: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly "2xl": 1536;
+};
+type Breakpoint = keyof typeof BREAKPOINTS;
+/**
+ * SSR-safe media query hook — `false` on the server and on first client render
+ * (avoids hydration mismatch), then updates after mount. Prefer CSS (`md:flex`)
+ * for pure styling; reach for this only when a component needs the boolean in
+ * JS (e.g. choosing AppShell's drawer vs. static sidebar, swapping a chart's
+ * orientation, rendering a Sheet on mobile vs. a Dialog on desktop).
+ *
+ *   const isMobile = !useBreakpoint("md"); // true below 768px
+ */
+declare function useMediaQuery(query: string): boolean;
+/** True once the viewport is at or above the named breakpoint. SSR-safe (see useMediaQuery). */
+declare function useBreakpoint(bp: Breakpoint): boolean;
+
+export { type Breakpoint, FontSizeToggle, ThemeProvider, ThemeToggle, useBreakpoint, useFontSizePreference, useMediaQuery, useTheme };

package/dist/react.js

@@ -0,0 +1,232 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react.tsx
+var react_exports = {};
+__export(react_exports, {
+  FontSizeToggle: () => FontSizeToggle,
+  ThemeProvider: () => ThemeProvider,
+  ThemeToggle: () => ThemeToggle,
+  useBreakpoint: () => useBreakpoint,
+  useFontSizePreference: () => useFontSizePreference,
+  useMediaQuery: () => useMediaQuery,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(react_exports);
+var React = __toESM(require("react"));
+
+// src/theme-runtime.ts
+var THEMES = ["light", "dark", "wmm"];
+var DEFAULT_THEME = "dark";
+var THEME_STORAGE_KEY = "wmm-theme";
+function isThemeName(v) {
+  return typeof v === "string" && THEMES.includes(v);
+}
+var themeBootScript = `(function(){try{var t=localStorage.getItem('${THEME_STORAGE_KEY}');if(t==='light'||t==='dark'||t==='wmm'){document.documentElement.setAttribute('data-theme',t);}}catch(e){}})();`;
+function getStoredTheme() {
+  if (typeof window === "undefined") return null;
+  try {
+    const t = window.localStorage.getItem(THEME_STORAGE_KEY);
+    return isThemeName(t) ? t : null;
+  } catch {
+    return null;
+  }
+}
+function applyTheme(name) {
+  if (typeof document !== "undefined") {
+    document.documentElement.setAttribute("data-theme", name);
+  }
+  try {
+    window.localStorage.setItem(THEME_STORAGE_KEY, name);
+  } catch {
+  }
+}
+
+// src/font-size-runtime.ts
+var FONT_SIZES = ["md", "lg", "xl"];
+var DEFAULT_FONT_SIZE = "md";
+var FONT_SIZE_STORAGE_KEY = "wmm-font-size";
+var fontSizeBootScript = `(function(){try{var f=localStorage.getItem('${FONT_SIZE_STORAGE_KEY}');if(f==='md'||f==='lg'||f==='xl'){document.documentElement.classList.add('font-'+f);}}catch(e){}})();`;
+function applyFontSize(name) {
+  if (typeof document !== "undefined") {
+    const d = document.documentElement;
+    for (const s of FONT_SIZES) d.classList.remove(`font-${s}`);
+    d.classList.add(`font-${name}`);
+  }
+  try {
+    window.localStorage.setItem(FONT_SIZE_STORAGE_KEY, name);
+  } catch {
+  }
+}
+
+// src/react.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Ctx = React.createContext(null);
+function ThemeProvider({ children }) {
+  const [theme, setThemeState] = React.useState(DEFAULT_THEME);
+  React.useEffect(() => {
+    setThemeState(getStoredTheme() ?? DEFAULT_THEME);
+  }, []);
+  const setTheme = React.useCallback((t) => {
+    applyTheme(t);
+    setThemeState(t);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ctx.Provider, { value: { theme, setTheme, themes: THEMES }, children });
+}
+function useTheme() {
+  const ctx = React.useContext(Ctx);
+  if (!ctx) throw new Error("useTheme must be used within <ThemeProvider>");
+  return ctx;
+}
+var LABELS = { light: "Light", dark: "Dark", wmm: "WMM" };
+function ThemeToggle({ className }) {
+  const { theme, setTheme, themes } = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": "Theme",
+      className,
+      style: { display: "inline-flex", gap: 4 },
+      children: themes.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          role: "radio",
+          "aria-checked": theme === t,
+          onClick: () => setTheme(t),
+          style: {
+            borderRadius: 6,
+            padding: "4px 10px",
+            fontSize: 14,
+            cursor: "pointer",
+            background: theme === t ? "var(--primary)" : "transparent",
+            color: theme === t ? "var(--primary-foreground)" : "var(--muted-foreground)",
+            border: "1px solid var(--border)"
+          },
+          children: LABELS[t] ?? t
+        },
+        t
+      ))
+    }
+  );
+}
+var fontSizeListeners = /* @__PURE__ */ new Set();
+function getFontSizeSnapshot() {
+  if (typeof document === "undefined") return DEFAULT_FONT_SIZE;
+  const classList = document.documentElement.classList;
+  for (const s of FONT_SIZES) if (classList.contains(`font-${s}`)) return s;
+  return DEFAULT_FONT_SIZE;
+}
+function subscribeFontSize(cb) {
+  fontSizeListeners.add(cb);
+  return () => {
+    fontSizeListeners.delete(cb);
+  };
+}
+function useFontSizePreference() {
+  const size = React.useSyncExternalStore(subscribeFontSize, getFontSizeSnapshot, () => DEFAULT_FONT_SIZE);
+  const setSize = React.useCallback((next) => {
+    applyFontSize(next);
+    fontSizeListeners.forEach((l) => l());
+  }, []);
+  return [size, setSize];
+}
+var FONT_SIZE_TITLES = {
+  md: "Normal text (14px)",
+  lg: "Comfortable text (16px)",
+  xl: "Large text (18px)"
+};
+var FONT_SIZE_LABEL_PX = { md: 11, lg: 13, xl: 15 };
+function FontSizeToggle({ className }) {
+  const [size, setSize] = useFontSizePreference();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Text size",
+      className,
+      style: { display: "inline-flex", gap: 2 },
+      children: FONT_SIZES.map((s) => {
+        const active = size === s;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSize(s),
+            title: FONT_SIZE_TITLES[s],
+            "aria-label": FONT_SIZE_TITLES[s],
+            "aria-pressed": active,
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: 6,
+              padding: "4px 8px",
+              fontSize: FONT_SIZE_LABEL_PX[s],
+              fontWeight: 700,
+              fontFamily: "ui-monospace, monospace",
+              cursor: "pointer",
+              background: active ? "var(--primary-dim, color-mix(in srgb, var(--primary) 10%, transparent))" : "transparent",
+              color: active ? "var(--primary)" : "var(--muted-foreground, var(--muted))",
+              border: `1px solid ${active ? "var(--primary)" : "transparent"}`
+            },
+            children: "A"
+          },
+          s
+        );
+      })
+    }
+  );
+}
+var BREAKPOINTS = { sm: 640, md: 768, lg: 1024, xl: 1280, "2xl": 1536 };
+function useMediaQuery(query) {
+  const [matches, setMatches] = React.useState(false);
+  React.useEffect(() => {
+    const mql = window.matchMedia(query);
+    setMatches(mql.matches);
+    const onChange = () => setMatches(mql.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
+function useBreakpoint(bp) {
+  return useMediaQuery(`(min-width: ${BREAKPOINTS[bp]}px)`);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FontSizeToggle,
+  ThemeProvider,
+  ThemeToggle,
+  useBreakpoint,
+  useFontSizePreference,
+  useMediaQuery,
+  useTheme
+});

package/dist/react.mjs

@@ -0,0 +1,155 @@
+"use client";
+import {
+  DEFAULT_FONT_SIZE,
+  DEFAULT_THEME,
+  FONT_SIZES,
+  THEMES,
+  applyFontSize,
+  applyTheme,
+  getStoredTheme
+} from "./chunk-2IXFKPNU.mjs";
+
+// src/react.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Ctx = React.createContext(null);
+function ThemeProvider({ children }) {
+  const [theme, setThemeState] = React.useState(DEFAULT_THEME);
+  React.useEffect(() => {
+    setThemeState(getStoredTheme() ?? DEFAULT_THEME);
+  }, []);
+  const setTheme = React.useCallback((t) => {
+    applyTheme(t);
+    setThemeState(t);
+  }, []);
+  return /* @__PURE__ */ jsx(Ctx.Provider, { value: { theme, setTheme, themes: THEMES }, children });
+}
+function useTheme() {
+  const ctx = React.useContext(Ctx);
+  if (!ctx) throw new Error("useTheme must be used within <ThemeProvider>");
+  return ctx;
+}
+var LABELS = { light: "Light", dark: "Dark", wmm: "WMM" };
+function ThemeToggle({ className }) {
+  const { theme, setTheme, themes } = useTheme();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": "Theme",
+      className,
+      style: { display: "inline-flex", gap: 4 },
+      children: themes.map((t) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          role: "radio",
+          "aria-checked": theme === t,
+          onClick: () => setTheme(t),
+          style: {
+            borderRadius: 6,
+            padding: "4px 10px",
+            fontSize: 14,
+            cursor: "pointer",
+            background: theme === t ? "var(--primary)" : "transparent",
+            color: theme === t ? "var(--primary-foreground)" : "var(--muted-foreground)",
+            border: "1px solid var(--border)"
+          },
+          children: LABELS[t] ?? t
+        },
+        t
+      ))
+    }
+  );
+}
+var fontSizeListeners = /* @__PURE__ */ new Set();
+function getFontSizeSnapshot() {
+  if (typeof document === "undefined") return DEFAULT_FONT_SIZE;
+  const classList = document.documentElement.classList;
+  for (const s of FONT_SIZES) if (classList.contains(`font-${s}`)) return s;
+  return DEFAULT_FONT_SIZE;
+}
+function subscribeFontSize(cb) {
+  fontSizeListeners.add(cb);
+  return () => {
+    fontSizeListeners.delete(cb);
+  };
+}
+function useFontSizePreference() {
+  const size = React.useSyncExternalStore(subscribeFontSize, getFontSizeSnapshot, () => DEFAULT_FONT_SIZE);
+  const setSize = React.useCallback((next) => {
+    applyFontSize(next);
+    fontSizeListeners.forEach((l) => l());
+  }, []);
+  return [size, setSize];
+}
+var FONT_SIZE_TITLES = {
+  md: "Normal text (14px)",
+  lg: "Comfortable text (16px)",
+  xl: "Large text (18px)"
+};
+var FONT_SIZE_LABEL_PX = { md: 11, lg: 13, xl: 15 };
+function FontSizeToggle({ className }) {
+  const [size, setSize] = useFontSizePreference();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Text size",
+      className,
+      style: { display: "inline-flex", gap: 2 },
+      children: FONT_SIZES.map((s) => {
+        const active = size === s;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSize(s),
+            title: FONT_SIZE_TITLES[s],
+            "aria-label": FONT_SIZE_TITLES[s],
+            "aria-pressed": active,
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: 6,
+              padding: "4px 8px",
+              fontSize: FONT_SIZE_LABEL_PX[s],
+              fontWeight: 700,
+              fontFamily: "ui-monospace, monospace",
+              cursor: "pointer",
+              background: active ? "var(--primary-dim, color-mix(in srgb, var(--primary) 10%, transparent))" : "transparent",
+              color: active ? "var(--primary)" : "var(--muted-foreground, var(--muted))",
+              border: `1px solid ${active ? "var(--primary)" : "transparent"}`
+            },
+            children: "A"
+          },
+          s
+        );
+      })
+    }
+  );
+}
+var BREAKPOINTS = { sm: 640, md: 768, lg: 1024, xl: 1280, "2xl": 1536 };
+function useMediaQuery(query) {
+  const [matches, setMatches] = React.useState(false);
+  React.useEffect(() => {
+    const mql = window.matchMedia(query);
+    setMatches(mql.matches);
+    const onChange = () => setMatches(mql.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
+function useBreakpoint(bp) {
+  return useMediaQuery(`(min-width: ${BREAKPOINTS[bp]}px)`);
+}
+export {
+  FontSizeToggle,
+  ThemeProvider,
+  ThemeToggle,
+  useBreakpoint,
+  useFontSizePreference,
+  useMediaQuery,
+  useTheme
+};

package/dist/tailwind-preset.d.mts

@@ -0,0 +1,14 @@
+import { Config } from 'tailwindcss';
+
+/**
+ * Shared Tailwind preset — import in any app's tailwind.config.ts:
+ *
+ *   import { wmmPreset } from "@web-my-money/tokens/tailwind-preset";
+ *   export default { presets: [wmmPreset], ... };
+ *
+ * Includes all design tokens: colors, typography, spacing, shadows, animations.
+ */
+
+declare const wmmPreset: Partial<Config>;
+
+export { wmmPreset };

package/dist/tailwind-preset.d.ts

@@ -0,0 +1,14 @@
+import { Config } from 'tailwindcss';
+
+/**
+ * Shared Tailwind preset — import in any app's tailwind.config.ts:
+ *
+ *   import { wmmPreset } from "@web-my-money/tokens/tailwind-preset";
+ *   export default { presets: [wmmPreset], ... };
+ *
+ * Includes all design tokens: colors, typography, spacing, shadows, animations.
+ */
+
+declare const wmmPreset: Partial<Config>;
+
+export { wmmPreset };

package/dist/tailwind-preset.js

@@ -0,0 +1,225 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/tailwind-preset.ts
+var tailwind_preset_exports = {};
+__export(tailwind_preset_exports, {
+  wmmPreset: () => wmmPreset
+});
+module.exports = __toCommonJS(tailwind_preset_exports);
+
+// src/typography.ts
+var fontFamily = {
+  /** Body text — Inter or system sans */
+  sans: [
+    "var(--font-inter)",
+    "ui-sans-serif",
+    "system-ui",
+    "-apple-system",
+    "BlinkMacSystemFont",
+    "Segoe UI",
+    "Roboto",
+    "Helvetica Neue",
+    "Arial",
+    "sans-serif"
+  ],
+  /** Display / hero headings — Satoshi */
+  display: [
+    "Satoshi",
+    "ui-sans-serif",
+    "system-ui",
+    "-apple-system",
+    "sans-serif"
+  ],
+  /** Labels, badges, section headers — Space Grotesk */
+  label: [
+    "var(--font-space-grotesk)",
+    "ui-sans-serif",
+    "system-ui",
+    "sans-serif"
+  ],
+  /** Code blocks */
+  mono: [
+    "var(--font-geist-mono)",
+    "ui-monospace",
+    "SFMono-Regular",
+    "Menlo",
+    "Monaco",
+    "Consolas",
+    "monospace"
+  ]
+};
+
+// src/shadows.ts
+var boxShadow = {
+  /** Subtle teal glow for CTAs */
+  glow: "0 0 30px rgba(0, 196, 180, 0.15)",
+  /** Strong teal glow on hover */
+  glowStrong: "0 0 40px rgba(0, 196, 180, 0.4)",
+  /** Deep panel shadow with inset highlight (glassmorphism) */
+  panel: "0 24px 80px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.08)",
+  /** Glass panel shadow */
+  glass: "0 28px 90px rgba(0, 0, 0, 0.38), 0 0 36px rgba(0, 196, 180, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.06)"
+};
+
+// src/animations.ts
+var keyframes = {
+  marquee: {
+    "0%": { transform: "translate3d(0, 0, 0)" },
+    "100%": { transform: "translate3d(-50%, 0, 0)" }
+  },
+  "marquee-reverse": {
+    "0%": { transform: "translate3d(-50%, 0, 0)" },
+    "100%": { transform: "translate3d(0, 0, 0)" }
+  },
+  shimmer: {
+    "0%": { transform: "translate3d(-150%, 0, 0)" },
+    "100%": { transform: "translate3d(150%, 0, 0)" }
+  },
+  float: {
+    "0%, 100%": { transform: "translate3d(0, 0, 0)" },
+    "50%": { transform: "translate3d(0, -12px, 0)" }
+  },
+  pulseGlow: {
+    "0%, 100%": { boxShadow: "0 0 0 rgba(0, 196, 180, 0.0)" },
+    "50%": { boxShadow: "0 0 36px rgba(0, 196, 180, 0.18)" }
+  }
+};
+var animation = {
+  marquee: "marquee 28s linear infinite",
+  "marquee-slow": "marquee 42s linear infinite",
+  "marquee-reverse": "marquee-reverse 32s linear infinite",
+  shimmer: "shimmer 4.2s linear infinite",
+  float: "float 8s ease-in-out infinite",
+  "pulse-glow": "pulseGlow 5s ease-in-out infinite"
+};
+
+// src/gradients.ts
+var backgroundImage = {
+  /** CTA gradient: navy → aqua (production brand) */
+  "cta-gradient": "linear-gradient(135deg, #1f2d56, #8fccb6)",
+  /** Grid pattern overlay for hero backgrounds */
+  "hero-grid": "linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px)"
+};
+
+// src/spacing.ts
+var container = {
+  center: true,
+  padding: {
+    DEFAULT: "1.25rem",
+    sm: "1.5rem",
+    lg: "2rem",
+    xl: "2.5rem",
+    "2xl": "3rem"
+  },
+  screens: {
+    "2xl": "1320px"
+  }
+};
+
+// src/tailwind-preset.ts
+var wmmPreset = {
+  darkMode: ["class"],
+  theme: {
+    container,
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+        card: {
+          DEFAULT: "var(--card)",
+          foreground: "var(--card-foreground)"
+        },
+        popover: {
+          DEFAULT: "var(--popover)",
+          foreground: "var(--popover-foreground)"
+        },
+        primary: {
+          DEFAULT: "var(--primary)",
+          foreground: "var(--primary-foreground)"
+        },
+        secondary: {
+          DEFAULT: "var(--secondary)",
+          foreground: "var(--secondary-foreground)"
+        },
+        muted: {
+          DEFAULT: "var(--muted)",
+          foreground: "var(--muted-foreground)"
+        },
+        accent: {
+          DEFAULT: "var(--accent)",
+          foreground: "var(--accent-foreground)"
+        },
+        destructive: "var(--destructive)",
+        border: "var(--border)",
+        input: "var(--input)",
+        ring: "var(--ring)",
+        // Brand accents (from theme CSS — available when WMM theme is loaded)
+        teal: "var(--teal, #8fccb6)",
+        violet: "var(--violet, #869ce2)",
+        // Sidebar
+        sidebar: {
+          DEFAULT: "var(--sidebar)",
+          foreground: "var(--sidebar-foreground)",
+          primary: "var(--sidebar-primary)",
+          "primary-foreground": "var(--sidebar-primary-foreground)",
+          accent: "var(--sidebar-accent)",
+          "accent-foreground": "var(--sidebar-accent-foreground)",
+          border: "var(--sidebar-border)",
+          ring: "var(--sidebar-ring)"
+        },
+        // Charts
+        chart: {
+          1: "var(--chart-1)",
+          2: "var(--chart-2)",
+          3: "var(--chart-3)",
+          4: "var(--chart-4)",
+          5: "var(--chart-5)"
+        }
+      },
+      fontFamily: {
+        // spread the `as const` token tuples → mutable string[] (Tailwind's Config type)
+        sans: [...fontFamily.sans],
+        display: [...fontFamily.display],
+        label: [...fontFamily.label],
+        mono: [...fontFamily.mono]
+      },
+      backgroundImage,
+      boxShadow,
+      keyframes,
+      animation,
+      borderRadius: {
+        sm: "calc(var(--radius) * 0.6)",
+        md: "calc(var(--radius) * 0.8)",
+        lg: "var(--radius)",
+        xl: "calc(var(--radius) * 1.4)",
+        "2xl": "calc(var(--radius) * 1.8)",
+        "3xl": "calc(var(--radius) * 2.2)",
+        "4xl": "calc(var(--radius) * 2.6)"
+      },
+      backdropBlur: {
+        xs: "4px"
+      }
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  wmmPreset
+});