@web-my-money/tokens 1.0.0

package/bin/doctor.mjs

@@ -0,0 +1,189 @@
+#!/usr/bin/env node
+/**
+ * `wmm-doctor` — consumer-setup checker for apps installing @web-my-money/*.
+ *
+ * Adapted from Astryx's `astryx doctor`: diagnose the exact setup gotchas this
+ * design system has actually hit in production onboarding (wmm-finance-hr,
+ * wmm-os), each with an actionable fix, instead of a silent broken render.
+ *
+ * Checks:
+ *   1. Tailwind version          — v4 required (v3 needs the tailwind-preset instead)
+ *   2. .npmrc registry mapping   — @web-my-money:registry must resolve to GitHub Packages
+ *   3. @source directives        — one per installed @web-my-money/* package (Tailwind v4
+ *                                  does not scan node_modules by default — see LAYOUT_GUIDE.md §8)
+ *   4. --color-danger alias      — only checked for apps with their own hand-rolled
+ *                                  @theme inline block (not needed if the app wholesale-
+ *                                  imports @web-my-money/tokens/theme)
+ *
+ * Usage:  npx wmm-doctor   (run from the consuming app's npm project directory)
+ * Exit 0 = clean, Exit 1 = problem(s) found.
+ */
+import { readFileSync, existsSync, readdirSync, statSync } from "node:fs";
+import { join } from "node:path";
+
+const CWD = process.cwd();
+const SKIP_DIRS = new Set(["node_modules", ".git", ".next", "dist", "build"]);
+
+function readJson(path) {
+  try {
+    return JSON.parse(readFileSync(path, "utf8"));
+  } catch {
+    return null;
+  }
+}
+
+function findGlobalsCss() {
+  const candidates = [
+    "app/globals.css",
+    "src/app/globals.css",
+    "styles/globals.css",
+    "src/styles/globals.css",
+  ];
+  for (const c of candidates) {
+    const abs = join(CWD, c);
+    if (existsSync(abs)) return abs;
+  }
+  // Fallback: shallow search for any globals.css, bounded depth.
+  const found = [];
+  (function walk(dir, depth) {
+    if (depth > 4 || found.length) return;
+    let entries;
+    try {
+      entries = readdirSync(dir);
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      if (SKIP_DIRS.has(entry)) continue;
+      const full = join(dir, entry);
+      let st;
+      try {
+        st = statSync(full);
+      } catch {
+        continue;
+      }
+      if (st.isDirectory()) walk(full, depth + 1);
+      else if (entry === "globals.css") found.push(full);
+    }
+  })(CWD, 0);
+  return found[0] ?? null;
+}
+
+const problems = [];
+const oks = [];
+
+function fail(msg, fix) {
+  problems.push({ msg, fix });
+}
+function ok(msg) {
+  oks.push(msg);
+}
+
+const pkgJson = readJson(join(CWD, "package.json"));
+if (!pkgJson) {
+  console.error("✗ wmm-doctor: no package.json found in " + CWD + " — run this from your app's npm project directory.");
+  process.exit(1);
+}
+
+const deps = { ...pkgJson.dependencies, ...pkgJson.devDependencies };
+const wmmPackages = Object.keys(deps).filter((d) => d.startsWith("@web-my-money/"));
+
+if (wmmPackages.length === 0) {
+  console.log("wmm-doctor: no @web-my-money/* packages found in package.json — nothing to check.");
+  process.exit(0);
+}
+
+// Packages that ship CSS/tokens/hooks only — no rendered JSX/TSX components —
+// so they never need an @source directive (confirmed against the wmm-finance-hr
+// migration: its globals.css @sources blocks/preset-wmm/brand/primitives but not tokens).
+const NO_SOURCE_NEEDED = new Set(["@web-my-money/tokens"]);
+const sourceCheckPackages = wmmPackages.filter((p) => !NO_SOURCE_NEEDED.has(p));
+
+// 1. Tailwind version
+const tailwindRange = deps.tailwindcss;
+if (!tailwindRange) {
+  fail("tailwindcss is not a dependency.", "Install Tailwind v4: npm install tailwindcss@^4");
+} else {
+  const major = parseInt(tailwindRange.replace(/[^\d.]/g, "").split(".")[0], 10);
+  if (Number.isFinite(major) && major < 4) {
+    fail(
+      `tailwindcss is on v${major} (found "${tailwindRange}").`,
+      "Upgrade to Tailwind v4, or use @web-my-money/tokens/tailwind-preset for v3 (see INSTALL_GUIDE.md).",
+    );
+  } else {
+    ok(`tailwindcss ${tailwindRange} (v4+)`);
+  }
+}
+
+// 2. .npmrc registry mapping
+const npmrcPath = join(CWD, ".npmrc");
+if (!existsSync(npmrcPath)) {
+  fail(
+    ".npmrc not found in this directory.",
+    'Add .npmrc here with:\n    @web-my-money:registry=https://npm.pkg.github.com\n    //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}',
+  );
+} else {
+  const npmrc = readFileSync(npmrcPath, "utf8");
+  if (!/@web-my-money:registry\s*=\s*https:\/\/npm\.pkg\.github\.com/.test(npmrc)) {
+    fail(
+      ".npmrc exists but is missing the @web-my-money registry mapping.",
+      "Add: @web-my-money:registry=https://npm.pkg.github.com",
+    );
+  } else {
+    ok(".npmrc maps @web-my-money to GitHub Packages");
+  }
+}
+
+// 3 & 4. globals.css checks
+const globalsCssPath = findGlobalsCss();
+if (!globalsCssPath) {
+  fail(
+    "Could not find a globals.css in this app.",
+    "If your stylesheet has a different name/path, the @source and theme checks below can't run — verify manually against LAYOUT_GUIDE.md §8.",
+  );
+} else {
+  const css = readFileSync(globalsCssPath, "utf8");
+  const relCss = globalsCssPath.replace(CWD, ".").replace(/\\/g, "/");
+
+  const missingSource = sourceCheckPackages.filter((pkg) => !css.includes(pkg));
+  if (sourceCheckPackages.length === 0) {
+    // nothing to check
+  } else if (missingSource.length > 0) {
+    fail(
+      `${relCss} is missing @source directives for: ${missingSource.join(", ")}`,
+      `Tailwind v4 does not scan node_modules by default. Add one @source per package:\n` +
+        missingSource.map((p) => `    @source "../../node_modules/${p}/dist";`).join("\n") +
+        `\n  (adjust the ../.. depth to your globals.css location — see LAYOUT_GUIDE.md §8)`,
+    );
+  } else {
+    ok(`${relCss} has @source directives for all installed @web-my-money packages`);
+  }
+
+  const wholesaleImport = /@import\s+["']@web-my-money\/tokens\/theme["']/.test(css);
+  const hasOwnThemeBlock = /@theme\s+inline/.test(css);
+  if (!wholesaleImport && hasOwnThemeBlock) {
+    if (!css.includes("--color-danger")) {
+      fail(
+        `${relCss} has its own @theme inline block but no --color-danger alias.`,
+        'Add `--color-danger: var(--destructive);` (or your danger color) to your @theme inline block — ' +
+          "AppShell badges and other DS components read --color-danger.",
+      );
+    } else {
+      ok(`${relCss} @theme inline block has --color-danger aliased`);
+    }
+  }
+}
+
+console.log(`wmm-doctor — checked ${wmmPackages.length} @web-my-money package(s) in ${CWD}\n`);
+for (const msg of oks) console.log(`  ✓ ${msg}`);
+if (problems.length === 0) {
+  console.log("\n✓ all checks passed");
+  process.exit(0);
+}
+console.log("");
+for (const p of problems) {
+  console.error(`  ✗ ${p.msg}`);
+  console.error(`    fix: ${p.fix}\n`);
+}
+console.error(`✗ wmm-doctor found ${problems.length} problem(s)`);
+process.exit(1);

package/dist/chunk-2IXFKPNU.mjs

@@ -0,0 +1,72 @@
+// 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";
+function isFontSizeName(v) {
+  return typeof v === "string" && FONT_SIZES.includes(v);
+}
+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 getStoredFontSize() {
+  if (typeof window === "undefined") return null;
+  try {
+    const f = window.localStorage.getItem(FONT_SIZE_STORAGE_KEY);
+    return isFontSizeName(f) ? f : null;
+  } catch {
+    return null;
+  }
+}
+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 {
+  }
+}
+
+export {
+  THEMES,
+  DEFAULT_THEME,
+  THEME_STORAGE_KEY,
+  isThemeName,
+  themeBootScript,
+  getStoredTheme,
+  applyTheme,
+  FONT_SIZES,
+  DEFAULT_FONT_SIZE,
+  FONT_SIZE_STORAGE_KEY,
+  isFontSizeName,
+  fontSizeBootScript,
+  getStoredFontSize,
+  applyFontSize
+};

package/dist/chunk-4FF2FHY6.mjs

@@ -0,0 +1,265 @@
+// 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"
+  ]
+};
+var fontSize = {
+  xs: ["0.75rem", { lineHeight: "1rem" }],
+  sm: ["0.875rem", { lineHeight: "1.25rem" }],
+  base: ["1rem", { lineHeight: "1.5rem" }],
+  lg: ["1.125rem", { lineHeight: "1.75rem" }],
+  xl: ["1.25rem", { lineHeight: "1.75rem" }],
+  "2xl": ["1.5rem", { lineHeight: "2rem" }],
+  "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
+  "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
+  "5xl": ["3rem", { lineHeight: "1.15" }],
+  "6xl": ["3.75rem", { lineHeight: "1.1" }]
+};
+var letterSpacing = {
+  tighter: "-0.05em",
+  tight: "-0.025em",
+  normal: "0em",
+  wide: "0.025em",
+  wider: "0.05em",
+  label: "0.15em"
+};
+
+// 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"
+};
+var easing = {
+  spring: [0.22, 1, 0.36, 1],
+  smooth: [0.4, 0, 0.2, 1],
+  snappy: [0.2, 0, 0, 1]
+};
+
+// 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)"
+};
+var glassPanel = {
+  background: `radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 42%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
+    rgba(15, 23, 42, 0.84)`,
+  border: "1px solid rgba(255, 255, 255, 0.08)",
+  backdropFilter: "blur(20px)"
+};
+var spotlight = {
+  background: `radial-gradient(circle at 50% 0%, rgba(0, 196, 180, 0.18), transparent 28%),
+    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.2), transparent 25%)`
+};
+var darkBody = {
+  background: `radial-gradient(circle at top, rgba(14, 165, 233, 0.12), transparent 32%),
+    radial-gradient(circle at 80% 10%, rgba(124, 58, 237, 0.14), transparent 28%),
+    linear-gradient(180deg, #070b14 0%, #080b14 45%, #09111f 100%)`
+};
+
+// src/spacing.ts
+var radius = {
+  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)",
+  full: "9999px"
+};
+var radiusBase = "0.625rem";
+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"
+      }
+    }
+  }
+};
+
+export {
+  fontFamily,
+  fontSize,
+  letterSpacing,
+  radius,
+  radiusBase,
+  container,
+  boxShadow,
+  keyframes,
+  animation,
+  easing,
+  backgroundImage,
+  glassPanel,
+  spotlight,
+  darkBody,
+  wmmPreset
+};

package/dist/font-size-runtime-DlvZXy2n.d.mts

@@ -0,0 +1,48 @@
+/**
+ * Framework-agnostic 3-theme runtime — light / dark / wmm.
+ *
+ * Apps switch themes via the `data-theme` attribute on <html>. Drop
+ * `themeBootScript` into <head> (before paint) to avoid a flash, and call
+ * `applyTheme()` from a toggle. No React dependency — wire your own UI.
+ */
+declare const THEMES: readonly ["light", "dark", "wmm"];
+type ThemeName = (typeof THEMES)[number];
+declare const DEFAULT_THEME: ThemeName;
+declare const THEME_STORAGE_KEY = "wmm-theme";
+declare function isThemeName(v: unknown): v is ThemeName;
+/**
+ * Inline <script> body — run BEFORE React hydrates so the stored theme is
+ * applied on first paint (no dark↔light flash). Safe to dangerouslySetInnerHTML.
+ */
+declare const themeBootScript: string;
+declare function getStoredTheme(): ThemeName | null;
+/** Set the active theme on <html> and persist it. */
+declare function applyTheme(name: ThemeName): void;
+
+/**
+ * Framework-agnostic font-size preference runtime — three-step text scale
+ * (md/lg/xl → 14/16/18px), applied via an `html.font-*` class.
+ *
+ * Generalizes wmm-finance-hr's real, proven `font-size-toggle.tsx` pattern
+ * (its own localStorage key there — this ships the DS's own canonical key,
+ * `wmm-font-size`, same naming convention as `theme-runtime.ts`'s `wmm-theme`).
+ *
+ * Drop `fontSizeBootScript` into <head> (before paint) to avoid a flash, and
+ * call `applyFontSize()` from a toggle. No React dependency — wire your own
+ * UI, or use `FontSizeToggle` from `@web-my-money/tokens/react`.
+ */
+declare const FONT_SIZES: readonly ["md", "lg", "xl"];
+type FontSizeName = (typeof FONT_SIZES)[number];
+declare const DEFAULT_FONT_SIZE: FontSizeName;
+declare const FONT_SIZE_STORAGE_KEY = "wmm-font-size";
+declare function isFontSizeName(v: unknown): v is FontSizeName;
+/**
+ * Inline <script> body — run BEFORE React hydrates so the stored size is
+ * applied on first paint (no layout jump). Safe to dangerouslySetInnerHTML.
+ */
+declare const fontSizeBootScript: string;
+declare function getStoredFontSize(): FontSizeName | null;
+/** Set the active font size on <html> (`font-{size}` class) and persist it. */
+declare function applyFontSize(name: FontSizeName): void;
+
+export { DEFAULT_FONT_SIZE as D, FONT_SIZES as F, THEMES as T, DEFAULT_THEME as a, FONT_SIZE_STORAGE_KEY as b, type FontSizeName as c, THEME_STORAGE_KEY as d, type ThemeName as e, applyFontSize as f, applyTheme as g, fontSizeBootScript as h, getStoredFontSize as i, getStoredTheme as j, isFontSizeName as k, isThemeName as l, themeBootScript as t };

package/dist/font-size-runtime-DlvZXy2n.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Framework-agnostic 3-theme runtime — light / dark / wmm.
+ *
+ * Apps switch themes via the `data-theme` attribute on <html>. Drop
+ * `themeBootScript` into <head> (before paint) to avoid a flash, and call
+ * `applyTheme()` from a toggle. No React dependency — wire your own UI.
+ */
+declare const THEMES: readonly ["light", "dark", "wmm"];
+type ThemeName = (typeof THEMES)[number];
+declare const DEFAULT_THEME: ThemeName;
+declare const THEME_STORAGE_KEY = "wmm-theme";
+declare function isThemeName(v: unknown): v is ThemeName;
+/**
+ * Inline <script> body — run BEFORE React hydrates so the stored theme is
+ * applied on first paint (no dark↔light flash). Safe to dangerouslySetInnerHTML.
+ */
+declare const themeBootScript: string;
+declare function getStoredTheme(): ThemeName | null;
+/** Set the active theme on <html> and persist it. */
+declare function applyTheme(name: ThemeName): void;
+
+/**
+ * Framework-agnostic font-size preference runtime — three-step text scale
+ * (md/lg/xl → 14/16/18px), applied via an `html.font-*` class.
+ *
+ * Generalizes wmm-finance-hr's real, proven `font-size-toggle.tsx` pattern
+ * (its own localStorage key there — this ships the DS's own canonical key,
+ * `wmm-font-size`, same naming convention as `theme-runtime.ts`'s `wmm-theme`).
+ *
+ * Drop `fontSizeBootScript` into <head> (before paint) to avoid a flash, and
+ * call `applyFontSize()` from a toggle. No React dependency — wire your own
+ * UI, or use `FontSizeToggle` from `@web-my-money/tokens/react`.
+ */
+declare const FONT_SIZES: readonly ["md", "lg", "xl"];
+type FontSizeName = (typeof FONT_SIZES)[number];
+declare const DEFAULT_FONT_SIZE: FontSizeName;
+declare const FONT_SIZE_STORAGE_KEY = "wmm-font-size";
+declare function isFontSizeName(v: unknown): v is FontSizeName;
+/**
+ * Inline <script> body — run BEFORE React hydrates so the stored size is
+ * applied on first paint (no layout jump). Safe to dangerouslySetInnerHTML.
+ */
+declare const fontSizeBootScript: string;
+declare function getStoredFontSize(): FontSizeName | null;
+/** Set the active font size on <html> (`font-{size}` class) and persist it. */
+declare function applyFontSize(name: FontSizeName): void;
+
+export { DEFAULT_FONT_SIZE as D, FONT_SIZES as F, THEMES as T, DEFAULT_THEME as a, FONT_SIZE_STORAGE_KEY as b, type FontSizeName as c, THEME_STORAGE_KEY as d, type ThemeName as e, applyFontSize as f, applyTheme as g, fontSizeBootScript as h, getStoredFontSize as i, getStoredTheme as j, isFontSizeName as k, isThemeName as l, themeBootScript as t };

package/dist/fonts.css

@@ -0,0 +1,16 @@
+/**
+ * WMM display font — Satoshi (weight 900). Import in your app's globals.css:
+ *   @import "@web-my-money/tokens/fonts.css";
+ *
+ * Body (Inter) and label (Space Grotesk) fonts are loaded per-app via next/font,
+ * which set --font-inter / --font-space-grotesk. Satoshi isn't on Google Fonts,
+ * so it ships here as a self-hosted woff2 and binds to the "Satoshi" family that
+ * the typography `display` stack references.
+ */
+@font-face {
+  font-family: "Satoshi";
+  src: url("./fonts/satoshi-black.woff2") format("woff2");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}