@ponchia/ui 0.5.0 → 0.6.3

package/solid/index.js

@@ -16,12 +16,43 @@
  *     const toast = useToast();
  *     return <button onClick={() => toast('Saved', { tone: 'success' })}>Save</button>;
  *   }
+ *
+ * The public types below are JSDoc `@typedef`s; the shipped `index.d.ts` is
+ * generated from them (and these signatures) by `tsc --emitDeclarationOnly`.
+ *
+ * @typedef {import('../behaviors/index.js').Cleanup} Cleanup
+ * @typedef {import('../behaviors/index.js').DelegateOpts} DelegateOpts
+ * @typedef {import('../behaviors/index.js').ThemeStorageOpts} ThemeStorageOpts
+ * @typedef {import('../behaviors/index.js').ToastOpts} ToastOpts
+ *
+ * @typedef {Document
+ *   | Element
+ *   | { current: Document | Element | null | undefined }
+ *   | (() => Document | Element | null | undefined)
+ *   | null
+ *   | undefined} BrontoBindingRoot
+ */
+
+/**
+ * Behavior options with the `root` widened to accept Solid refs/resolvers.
+ * @template {DelegateOpts} [T=DelegateOpts]
+ * @typedef {Omit<T, 'root'> & { root?: BrontoBindingRoot }} BrontoBindingOpts
+ */
+
+/**
+ * `BrontoBindingOpts<T>`, or a callback that returns it on mount (after refs).
+ * @template {DelegateOpts} [T=DelegateOpts]
+ * @typedef {BrontoBindingOpts<T>
+ *   | (() => BrontoBindingOpts<T> | null | undefined)
+ *   | null
+ *   | undefined} BrontoBindingOptsResolver
  */
 import { onMount, onCleanup } from 'solid-js';
 import {
   applyStoredTheme,
   initThemeToggle,
   dismissible,
+  initDisabledGuard,
   initDisclosure,
   initMenu,
   initFormValidation,
@@ -30,6 +61,7 @@ import {
   initTableSort,
   initTabs,
   initDialog,
+  initModal,
   initCarousel,
   initDotGlyph,
   initLegend,
@@ -53,12 +85,21 @@ function resolveRoot(root) {
 function resolveOpts(opts) {
   const value = resolveMaybe(opts);
   if (!value || typeof value !== 'object') return undefined;
+  // No `root` key → no scope requested; leave root out so the behavior
+  // delegates from `document`. A `root` key that resolves falsy means a scope
+  // WAS requested but the ref is not ready: emit `root: null` so the behavior
+  // no-ops instead of hijacking the whole document.
+  if (!('root' in value)) return { ...value };
   const root = resolveRoot(value.root);
-  return root ? { ...value, root } : { ...value, root: undefined };
+  return { ...value, root: root || null };
 }
 
 /** Run a delegated behavior for the component's lifetime (init on mount, its
- *  returned cleanup on dispose). Options resolve on mount, after refs exist. */
+ *  returned cleanup on dispose). Options resolve on mount, after refs exist.
+ * @param {(opts?: DelegateOpts) => Cleanup | void} init
+ * @param {BrontoBindingOptsResolver} [opts]
+ * @returns {void}
+ */
 export function useBrontoBehavior(init, opts) {
   onMount(() => {
     const cleanup = init(resolveOpts(opts));
@@ -66,25 +107,47 @@ export function useBrontoBehavior(init, opts) {
   });
 }
 
+/** @type {(opts?: BrontoBindingOptsResolver<ThemeStorageOpts & DelegateOpts>) => void} */
 export const useThemeToggle = (opts) => useBrontoBehavior(initThemeToggle, opts);
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
 export const useDismissible = (opts) => useBrontoBehavior(dismissible, opts);
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
+export const useDisabledGuard = (opts) => useBrontoBehavior(initDisabledGuard, opts);
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
 export const useDisclosure = (opts) => useBrontoBehavior(initDisclosure, opts);
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
 export const useMenu = (opts) => useBrontoBehavior(initMenu, opts);
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
 export const useFormValidation = (opts) => useBrontoBehavior(initFormValidation, opts);
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
 export const useCombobox = (opts) => useBrontoBehavior(initCombobox, opts);
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
 export const usePopover = (opts) => useBrontoBehavior(initPopover, opts);
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
 export const useTableSort = (opts) => useBrontoBehavior(initTableSort, opts);
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
 export const useTabs = (opts) => useBrontoBehavior(initTabs, opts);
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
 export const useDialog = (opts) => useBrontoBehavior(initDialog, opts);
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
+export const useModal = (opts) => useBrontoBehavior(initModal, opts);
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
 export const useCarousel = (opts) => useBrontoBehavior(initCarousel, opts);
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
 export const useDotGlyph = (opts) => useBrontoBehavior(initDotGlyph, opts);
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
 export const useLegend = (opts) => useBrontoBehavior(initLegend, opts);
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
 export const useConnectors = (opts) => useBrontoBehavior(initConnectors, opts);
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
 export const useSpotlight = (opts) => useBrontoBehavior(initSpotlight, opts);
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
 export const useCrosshair = (opts) => useBrontoBehavior(initCrosshair, opts);
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
 export const useCommand = (opts) => useBrontoBehavior(initCommand, opts);
 
-/** The `toast()` imperative (no lifecycle of its own). */
+/** The `toast()` imperative (no lifecycle of its own).
+ * @type {() => (message: string, opts?: ToastOpts) => Cleanup} */
 export const useToast = () => toast;
 
 // No-flash theme application must run before paint — do it in an inline head

package/tokens/d2.d.ts

@@ -0,0 +1,38 @@
+/** @ponchia/ui — GENERATED from the token source by scripts/gen-d2.mjs.
+ *  Do not edit by hand; run `npm run d2:build`. Drift-checked in CI. */
+
+/** Resolved D2 theme colour slots (hex). See docs/d2.md for what each paints. */
+export interface D2ThemeOverrides {
+  N1: string;
+  N2: string;
+  N3: string;
+  N4: string;
+  N5: string;
+  N6: string;
+  N7: string;
+  B1: string;
+  B2: string;
+  B3: string;
+  B4: string;
+  B5: string;
+  B6: string;
+  AA2: string;
+  AA4: string;
+  AA5: string;
+  AB4: string;
+  AB5: string;
+}
+
+/** Resolved D2 theme overrides for each bronto theme. */
+export declare const d2: { light: D2ThemeOverrides; dark: D2ThemeOverrides };
+
+/** A D2 source snippet (`vars: { d2-config: { theme-overrides, dark-theme-overrides } }`)
+ *  to prepend to a diagram. */
+export declare function brontoD2Vars(): string;
+
+/** The slot → hex map for a theme (default `light`), for the render API's
+ *  themeOverrides / darkThemeOverrides. */
+export declare function brontoD2Overrides(theme?: 'light' | 'dark'): D2ThemeOverrides;
+
+declare const _default: typeof brontoD2Vars;
+export default _default;

package/tokens/d2.js

@@ -0,0 +1,71 @@
+/** @ponchia/ui — GENERATED from the token source by scripts/gen-d2.mjs.
+ *  Do not edit by hand; run `npm run d2:build`. Drift-checked in CI.
+ *
+ *  On-brand D2 (d2lang.com) theme overrides, resolved to static hex per
+ *  theme. D2 compiles to a frozen SVG and cannot read `var(--x)`. Apply via
+ *  the D2 source vars block (brontoD2Vars) or the Go/WASM render API
+ *  (brontoD2Overrides). See docs/d2.md. */
+
+/** Resolved D2 theme colour slots for each bronto theme. */
+export const d2 = {
+  light: {
+    N1: '#0a0a0a',
+    N2: '#353533',
+    N3: '#686863',
+    N4: '#a8a8a2',
+    N5: '#d8d8d4',
+    N6: '#ececea',
+    N7: '#f4f4f2',
+    B1: '#a8a8a2',
+    B2: '#d8d8d4',
+    B3: '#d8d8d4',
+    B4: '#ececea',
+    B5: '#fbfbfa',
+    B6: '#ffffff',
+    AA2: '#a8a8a2',
+    AA4: '#ffffff',
+    AA5: '#ececea',
+    AB4: '#ffffff',
+    AB5: '#ececea',
+  },
+  dark: {
+    N1: '#e6e6e6',
+    N2: '#c8c8c8',
+    N3: '#a0a0a0',
+    N4: '#555555',
+    N5: '#383838',
+    N6: '#242424',
+    N7: '#121212',
+    B1: '#555555',
+    B2: '#383838',
+    B3: '#383838',
+    B4: '#242424',
+    B5: '#181818',
+    B6: '#1c1c1c',
+    AA2: '#555555',
+    AA4: '#1c1c1c',
+    AA5: '#242424',
+    AB4: '#1c1c1c',
+    AB5: '#242424',
+  },
+};
+
+function block(map) {
+  return Object.entries(map)
+    .map(([slot, hex]) => `      ${slot}: "${hex}"`)
+    .join('\n');
+}
+
+/** A D2 source snippet to prepend to a diagram — sets the bronto palette for
+ *  both light and dark via `vars.d2-config`. */
+export function brontoD2Vars() {
+  return `vars: {\n  d2-config: {\n    theme-overrides: {\n${block(d2.light)}\n    }\n    dark-theme-overrides: {\n${block(d2.dark)}\n    }\n  }\n}\n`;
+}
+
+/** The slot → hex map for a theme (default `light`), for the Go/WASM render
+ *  API's themeOverrides / darkThemeOverrides. */
+export function brontoD2Overrides(theme = 'light') {
+  return d2[theme === 'dark' ? 'dark' : 'light'];
+}
+
+export default brontoD2Vars;

package/tokens/d2.json

@@ -0,0 +1,43 @@
+{
+  "$comment": "@ponchia/ui D2 theme colour slots resolved to static hex per theme. Drop into a D2 diagram's `vars: { d2-config: { theme-overrides, dark-theme-overrides } }` (see brontoD2Vars in @ponchia/ui/d2), or pass to the Go/WASM render API. Monochrome base ramp + one rationed accent. Generated from the token source — do not edit by hand; run `npm run d2:build`. Drift-checked in CI.",
+  "light": {
+    "N1": "#0a0a0a",
+    "N2": "#353533",
+    "N3": "#686863",
+    "N4": "#a8a8a2",
+    "N5": "#d8d8d4",
+    "N6": "#ececea",
+    "N7": "#f4f4f2",
+    "B1": "#a8a8a2",
+    "B2": "#d8d8d4",
+    "B3": "#d8d8d4",
+    "B4": "#ececea",
+    "B5": "#fbfbfa",
+    "B6": "#ffffff",
+    "AA2": "#a8a8a2",
+    "AA4": "#ffffff",
+    "AA5": "#ececea",
+    "AB4": "#ffffff",
+    "AB5": "#ececea"
+  },
+  "dark": {
+    "N1": "#e6e6e6",
+    "N2": "#c8c8c8",
+    "N3": "#a0a0a0",
+    "N4": "#555555",
+    "N5": "#383838",
+    "N6": "#242424",
+    "N7": "#121212",
+    "B1": "#555555",
+    "B2": "#383838",
+    "B3": "#383838",
+    "B4": "#242424",
+    "B5": "#181818",
+    "B6": "#1c1c1c",
+    "AA2": "#555555",
+    "AA4": "#1c1c1c",
+    "AA5": "#242424",
+    "AB4": "#1c1c1c",
+    "AB5": "#242424"
+  }
+}

package/tokens/index.d.ts

@@ -3,9 +3,9 @@
 
 export type ThemeName = 'light' | 'dark';
 
-export type GlobalTokenName = '--radius-xl' | '--radius-lg' | '--radius-md' | '--radius-sm' | '--radius-pill' | '--space-2xs' | '--space-xs' | '--space-sm' | '--space-md' | '--space-lg' | '--space-xl' | '--space-2xl' | '--mono' | '--sans' | '--dot-font' | '--display' | '--text-2xs' | '--text-xs' | '--text-sm' | '--text-base' | '--text-lg' | '--text-xl' | '--tracking-wide' | '--tracking-wider' | '--ease-standard' | '--ease-spring' | '--ease-out' | '--duration-fast' | '--duration-base' | '--duration-slow' | '--dot-size' | '--dot-gap' | '--z-base' | '--z-raised' | '--z-sticky' | '--z-overlay' | '--z-popover' | '--z-toast' | '--accent-1' | '--accent-2' | '--accent-3' | '--accent-4' | '--accent-5' | '--accent-6' | '--surface-1' | '--surface-2' | '--surface-3' | '--surface-4' | '--surface-5' | '--surface-6' | '--bronto-color-bg' | '--bronto-color-surface' | '--bronto-color-surface-raised' | '--bronto-color-border' | '--bronto-color-border-strong' | '--bronto-color-text' | '--bronto-color-text-muted' | '--bronto-color-action' | '--bronto-color-on-action' | '--bronto-color-focus' | '--bronto-color-success' | '--bronto-color-warning' | '--bronto-color-danger' | '--bronto-color-info' | '--surface' | '--surface-raised' | '--surface-muted' | '--border' | '--border-strong';
-export type LightTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-ramp-end' | '--accent-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--danger' | '--danger-soft' | '--info' | '--info-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
-export type DarkTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-ramp-end' | '--accent-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--danger' | '--danger-soft' | '--info' | '--info-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
+export type GlobalTokenName = '--radius-xl' | '--radius-lg' | '--radius-md' | '--radius-sm' | '--radius-pill' | '--space-2xs' | '--space-xs' | '--space-sm' | '--space-md' | '--space-lg' | '--space-xl' | '--space-2xl' | '--mono' | '--sans' | '--dot-font' | '--display' | '--display-weight' | '--display-weight-strong' | '--text-2xs' | '--text-xs' | '--text-sm' | '--text-base' | '--text-lg' | '--text-xl' | '--tracking-wide' | '--tracking-wider' | '--ease-standard' | '--ease-spring' | '--ease-out' | '--duration-fast' | '--duration-base' | '--duration-slow' | '--dot-size' | '--dot-gap' | '--z-base' | '--z-raised' | '--z-sticky' | '--z-overlay' | '--z-popover' | '--z-toast' | '--accent-1' | '--accent-2' | '--accent-3' | '--accent-4' | '--accent-5' | '--accent-6' | '--surface-1' | '--surface-2' | '--surface-3' | '--surface-4' | '--surface-5' | '--surface-6' | '--bronto-color-bg' | '--bronto-color-surface' | '--bronto-color-surface-raised' | '--bronto-color-border' | '--bronto-color-border-strong' | '--bronto-color-text' | '--bronto-color-text-muted' | '--bronto-color-action' | '--bronto-color-on-action' | '--bronto-color-focus' | '--bronto-color-success' | '--bronto-color-warning' | '--bronto-color-danger' | '--bronto-color-info' | '--surface' | '--surface-raised' | '--surface-muted' | '--border' | '--border-strong';
+export type LightTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-ramp-end' | '--accent-strong' | '--accent-text' | '--on-accent' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--danger' | '--danger-soft' | '--info' | '--info-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
+export type DarkTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-ramp-end' | '--accent-strong' | '--accent-text' | '--on-accent' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--danger' | '--danger-soft' | '--info' | '--info-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
 
 /** Exact mirror of the :root blocks in css/tokens.css (literal keys). */
 export declare const cssVars: {
@@ -14,8 +14,8 @@ export declare const cssVars: {
   dark: Record<DarkTokenName, string>;
 };
 
-export type ScaleKey = 'radius-xl' | 'radius-lg' | 'radius-md' | 'radius-sm' | 'radius-pill' | 'space-2xs' | 'space-xs' | 'space-sm' | 'space-md' | 'space-lg' | 'space-xl' | 'space-2xl' | 'mono' | 'sans' | 'dot-font' | 'display' | 'text-2xs' | 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'tracking-wide' | 'tracking-wider' | 'ease-standard' | 'ease-spring' | 'ease-out' | 'duration-fast' | 'duration-base' | 'duration-slow' | 'dot-size' | 'dot-gap' | 'z-base' | 'z-raised' | 'z-sticky' | 'z-overlay' | 'z-popover' | 'z-toast' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4' | 'accent-5' | 'accent-6' | 'surface-1' | 'surface-2' | 'surface-3' | 'surface-4' | 'surface-5' | 'surface-6' | 'bronto-color-bg' | 'bronto-color-surface' | 'bronto-color-surface-raised' | 'bronto-color-border' | 'bronto-color-border-strong' | 'bronto-color-text' | 'bronto-color-text-muted' | 'bronto-color-action' | 'bronto-color-on-action' | 'bronto-color-focus' | 'bronto-color-success' | 'bronto-color-warning' | 'bronto-color-danger' | 'bronto-color-info' | 'surface' | 'surface-raised' | 'surface-muted' | 'border' | 'border-strong';
-export type ColorKey = 'bg' | 'bg-elevated' | 'bg-accent' | 'panel' | 'panel-strong' | 'panel-soft' | 'line' | 'line-strong' | 'text' | 'text-soft' | 'text-dim' | 'accent' | 'accent-ramp-end' | 'accent-strong' | 'accent-text' | 'accent-soft' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft' | 'info' | 'info-soft' | 'code-bg' | 'button-text' | 'field-dot' | 'field-dot-hot' | 'field-dot-accent' | 'focus-ring' | 'shadow' | 'shadow-raised';
+export type ScaleKey = 'radius-xl' | 'radius-lg' | 'radius-md' | 'radius-sm' | 'radius-pill' | 'space-2xs' | 'space-xs' | 'space-sm' | 'space-md' | 'space-lg' | 'space-xl' | 'space-2xl' | 'mono' | 'sans' | 'dot-font' | 'display' | 'display-weight' | 'display-weight-strong' | 'text-2xs' | 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'tracking-wide' | 'tracking-wider' | 'ease-standard' | 'ease-spring' | 'ease-out' | 'duration-fast' | 'duration-base' | 'duration-slow' | 'dot-size' | 'dot-gap' | 'z-base' | 'z-raised' | 'z-sticky' | 'z-overlay' | 'z-popover' | 'z-toast' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4' | 'accent-5' | 'accent-6' | 'surface-1' | 'surface-2' | 'surface-3' | 'surface-4' | 'surface-5' | 'surface-6' | 'bronto-color-bg' | 'bronto-color-surface' | 'bronto-color-surface-raised' | 'bronto-color-border' | 'bronto-color-border-strong' | 'bronto-color-text' | 'bronto-color-text-muted' | 'bronto-color-action' | 'bronto-color-on-action' | 'bronto-color-focus' | 'bronto-color-success' | 'bronto-color-warning' | 'bronto-color-danger' | 'bronto-color-info' | 'surface' | 'surface-raised' | 'surface-muted' | 'border' | 'border-strong';
+export type ColorKey = 'bg' | 'bg-elevated' | 'bg-accent' | 'panel' | 'panel-strong' | 'panel-soft' | 'line' | 'line-strong' | 'text' | 'text-soft' | 'text-dim' | 'accent' | 'accent-ramp-end' | 'accent-strong' | 'accent-text' | 'on-accent' | 'accent-soft' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft' | 'info' | 'info-soft' | 'code-bg' | 'button-text' | 'field-dot' | 'field-dot-hot' | 'field-dot-accent' | 'focus-ring' | 'shadow' | 'shadow-raised';
 
 /** Ergonomic view derived from {@link cssVars} (`--` prefix stripped). */
 export declare const tokens: {

package/tokens/index.js

@@ -9,7 +9,7 @@
  * :root palette blocks of css/tokens.css are GENERATED from it
  * (scripts/gen-tokens-css.mjs), so the dark palette is authored once here
  * rather than in three places (the two CSS dark blocks + a JS mirror).
- * scripts/check-tokens.mjs fails CI if css/tokens.css drifts from this model.
+ * Drift-checked by `npm run check:fresh` (scripts/check-fresh.mjs).
  *
  * `tokens` is an ergonomic view derived programmatically from `cssVars`
  * (no second hand-maintained copy, so nothing to keep in sync).
@@ -38,6 +38,8 @@ export const cssVars = {
       "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
     '--dot-font': "'Doto', var(--mono)",
     '--display': 'var(--dot-font)',
+    '--display-weight': '700',
+    '--display-weight-strong': '800',
     '--text-2xs': '0.68rem',
     '--text-xs': '0.76rem',
     '--text-sm': '0.86rem',
@@ -109,6 +111,12 @@ export const cssVars = {
     '--accent-ramp-end': '#ffffff',
     '--accent-strong': 'color-mix(in srgb, var(--accent) 83%, #000)',
     '--accent-text': 'var(--accent-strong)',
+    // Read-only export: the resolved on-accent ink for FOREIGN renderers
+    // (D2/Mermaid/Vega labels on an accent fill — see tokens/*.json). In-DOM
+    // components paint their own on-accent ink from `--button-text`; overriding
+    // `--on-accent` in CSS does NOT change a button/chip. To re-ink in-DOM
+    // accent fills, set `--button-text`. (tokens review C7.)
+    '--on-accent': 'var(--button-text)',
     '--accent-soft': 'color-mix(in srgb, var(--accent) 10%, transparent)',
     '--success': '#2f7d4f',
     '--success-soft': 'rgb(47, 125, 79, 0.12)',
@@ -144,6 +152,12 @@ export const cssVars = {
     '--accent-ramp-end': '#000000',
     '--accent-strong': 'color-mix(in srgb, var(--accent) 84%, #fff)',
     '--accent-text': 'var(--accent-strong)',
+    // Read-only export: the resolved on-accent ink for FOREIGN renderers
+    // (D2/Mermaid/Vega labels on an accent fill — see tokens/*.json). In-DOM
+    // components paint their own on-accent ink from `--button-text`; overriding
+    // `--on-accent` in CSS does NOT change a button/chip. To re-ink in-DOM
+    // accent fills, set `--button-text`. (tokens review C7.)
+    '--on-accent': 'var(--button-text)',
     '--accent-soft': 'color-mix(in srgb, var(--accent) 14%, transparent)',
     '--success': '#4ec27e',
     '--success-soft': 'rgb(78, 194, 126, 0.14)',

package/tokens/index.json

@@ -1,4 +1,5 @@
 {
+  "$comment": "GENERATED from tokens/index.js — do not edit by hand. Run `npm run tokens:build`; drift-checked by check:fresh. A build artifact for non-JS tooling (Style Dictionary, Figma, other languages).",
   "cssVars": {
     "global": {
       "--radius-xl": "4px",
@@ -17,6 +18,8 @@
       "--sans": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
       "--dot-font": "'Doto', var(--mono)",
       "--display": "var(--dot-font)",
+      "--display-weight": "700",
+      "--display-weight-strong": "800",
       "--text-2xs": "0.68rem",
       "--text-xs": "0.76rem",
       "--text-sm": "0.86rem",
@@ -87,6 +90,7 @@
       "--accent-ramp-end": "#ffffff",
       "--accent-strong": "color-mix(in srgb, var(--accent) 83%, #000)",
       "--accent-text": "var(--accent-strong)",
+      "--on-accent": "var(--button-text)",
       "--accent-soft": "color-mix(in srgb, var(--accent) 10%, transparent)",
       "--success": "#2f7d4f",
       "--success-soft": "rgb(47, 125, 79, 0.12)",
@@ -121,6 +125,7 @@
       "--accent-ramp-end": "#000000",
       "--accent-strong": "color-mix(in srgb, var(--accent) 84%, #fff)",
       "--accent-text": "var(--accent-strong)",
+      "--on-accent": "var(--button-text)",
       "--accent-soft": "color-mix(in srgb, var(--accent) 14%, transparent)",
       "--success": "#4ec27e",
       "--success-soft": "rgb(78, 194, 126, 0.14)",
@@ -158,6 +163,8 @@
       "sans": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
       "dot-font": "'Doto', var(--mono)",
       "display": "var(--dot-font)",
+      "display-weight": "700",
+      "display-weight-strong": "800",
       "text-2xs": "0.68rem",
       "text-xs": "0.76rem",
       "text-sm": "0.86rem",
@@ -229,6 +236,7 @@
         "accent-ramp-end": "#ffffff",
         "accent-strong": "color-mix(in srgb, var(--accent) 83%, #000)",
         "accent-text": "var(--accent-strong)",
+        "on-accent": "var(--button-text)",
         "accent-soft": "color-mix(in srgb, var(--accent) 10%, transparent)",
         "success": "#2f7d4f",
         "success-soft": "rgb(47, 125, 79, 0.12)",
@@ -263,6 +271,7 @@
         "accent-ramp-end": "#000000",
         "accent-strong": "color-mix(in srgb, var(--accent) 84%, #fff)",
         "accent-text": "var(--accent-strong)",
+        "on-accent": "var(--button-text)",
         "accent-soft": "color-mix(in srgb, var(--accent) 14%, transparent)",
         "success": "#4ec27e",
         "success-soft": "rgb(78, 194, 126, 0.14)",

package/tokens/mermaid.d.ts

@@ -0,0 +1,23 @@
+/** @ponchia/ui — GENERATED from the token source by scripts/gen-mermaid.mjs.
+ *  Do not edit by hand; run `npm run mermaid:build`. Drift-checked in CI. */
+
+/** A resolved Mermaid `base` theme: `darkMode` plus colour-valued
+ *  themeVariables (hex/rgba). For the per-key contract see docs/mermaid.md. */
+export interface MermaidThemeVariables {
+  darkMode: boolean;
+  fontFamily: string;
+  [key: string]: string | boolean;
+}
+
+/** Resolved Mermaid `base` themeVariables for each bronto theme. */
+export declare const mermaid: { light: MermaidThemeVariables; dark: MermaidThemeVariables };
+
+/** Ready-to-spread Mermaid config (`{ theme: 'base', themeVariables }`) for a
+ *  bronto theme. Unknown/omitted falls back to light. */
+export declare function brontoMermaidTheme(theme?: 'light' | 'dark'): {
+  theme: 'base';
+  themeVariables: MermaidThemeVariables;
+};
+
+declare const _default: typeof brontoMermaidTheme;
+export default _default;

package/tokens/mermaid.js

@@ -0,0 +1,181 @@
+/** @ponchia/ui — GENERATED from the token source by scripts/gen-mermaid.mjs.
+ *  Do not edit by hand; run `npm run mermaid:build`. Drift-checked in CI.
+ *
+ *  An on-brand Mermaid theme, resolved to static colours per theme. Mermaid
+ *  is the consumer's renderer — this is config only, we never import it.
+ *  Values are resolved hex/rgba on purpose: Mermaid's theming engine derives
+ *  shades and cannot read `var(--x)`. See docs/mermaid.md. */
+
+/** Resolved Mermaid `base` themeVariables for each bronto theme. */
+export const mermaid = {
+  light: {
+    darkMode: false,
+    background: '#f4f4f2',
+    fontFamily:
+      "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    primaryColor: '#ffffff',
+    primaryTextColor: '#0a0a0a',
+    primaryBorderColor: '#a8a8a2',
+    secondaryColor: '#ececea',
+    secondaryTextColor: '#0a0a0a',
+    secondaryBorderColor: '#d8d8d4',
+    tertiaryColor: '#fbfbfa',
+    tertiaryTextColor: '#0a0a0a',
+    tertiaryBorderColor: '#d8d8d4',
+    lineColor: '#a8a8a2',
+    textColor: '#0a0a0a',
+    mainBkg: '#ffffff',
+    nodeBorder: '#a8a8a2',
+    nodeTextColor: '#0a0a0a',
+    titleColor: '#0a0a0a',
+    edgeLabelBackground: '#f4f4f2',
+    clusterBkg: '#fbfbfa',
+    clusterBorder: '#d8d8d4',
+    labelColor: '#0a0a0a',
+    noteBkgColor: '#ececea',
+    noteTextColor: '#0a0a0a',
+    noteBorderColor: '#d71921',
+    errorBkgColor: 'rgba(192, 22, 34, 0.1)',
+    errorTextColor: '#c01622',
+    actorBkg: '#ffffff',
+    actorBorder: '#a8a8a2',
+    actorTextColor: '#0a0a0a',
+    actorLineColor: '#d8d8d4',
+    signalColor: '#0a0a0a',
+    signalTextColor: '#0a0a0a',
+    labelBoxBkgColor: '#ececea',
+    labelBoxBorderColor: '#d8d8d4',
+    labelTextColor: '#0a0a0a',
+    loopTextColor: '#0a0a0a',
+    activationBorderColor: '#a8a8a2',
+    activationBkgColor: '#ffffff',
+    sequenceNumberColor: '#ffffff',
+    pieTitleTextColor: '#0a0a0a',
+    pieSectionTextColor: '#0a0a0a',
+    pieLegendTextColor: '#0a0a0a',
+    pieStrokeColor: '#f4f4f2',
+    pieOuterStrokeColor: '#a8a8a2',
+    commitLabelColor: '#0a0a0a',
+    commitLabelBackground: '#fbfbfa',
+    tagLabelColor: '#0a0a0a',
+    tagLabelBackground: '#ececea',
+    tagLabelBorder: '#d8d8d4',
+    pie1: '#d71921',
+    pie2: '#e69f00',
+    pie3: '#56b4e9',
+    pie4: '#009e73',
+    pie5: '#f0e442',
+    pie6: '#0072b2',
+    pie7: '#cc79a7',
+    pie8: '#4d5358',
+    pie9: '#d71921',
+    pie10: '#e69f00',
+    pie11: '#56b4e9',
+    pie12: '#009e73',
+    git0: '#d71921',
+    git1: '#e69f00',
+    git2: '#56b4e9',
+    git3: '#009e73',
+    git4: '#f0e442',
+    git5: '#0072b2',
+    git6: '#cc79a7',
+    git7: '#4d5358',
+    fillType0: '#d71921',
+    fillType1: '#e69f00',
+    fillType2: '#56b4e9',
+    fillType3: '#009e73',
+    fillType4: '#f0e442',
+    fillType5: '#0072b2',
+    fillType6: '#cc79a7',
+    fillType7: '#4d5358',
+  },
+  dark: {
+    darkMode: true,
+    background: '#121212',
+    fontFamily:
+      "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    primaryColor: '#1c1c1c',
+    primaryTextColor: '#e6e6e6',
+    primaryBorderColor: '#555555',
+    secondaryColor: '#242424',
+    secondaryTextColor: '#e6e6e6',
+    secondaryBorderColor: '#383838',
+    tertiaryColor: '#181818',
+    tertiaryTextColor: '#e6e6e6',
+    tertiaryBorderColor: '#383838',
+    lineColor: '#555555',
+    textColor: '#e6e6e6',
+    mainBkg: '#1c1c1c',
+    nodeBorder: '#555555',
+    nodeTextColor: '#e6e6e6',
+    titleColor: '#e6e6e6',
+    edgeLabelBackground: '#121212',
+    clusterBkg: '#181818',
+    clusterBorder: '#383838',
+    labelColor: '#e6e6e6',
+    noteBkgColor: '#242424',
+    noteTextColor: '#e6e6e6',
+    noteBorderColor: '#ff3b41',
+    errorBkgColor: 'rgba(255, 77, 84, 0.15)',
+    errorTextColor: '#ff4d54',
+    actorBkg: '#1c1c1c',
+    actorBorder: '#555555',
+    actorTextColor: '#e6e6e6',
+    actorLineColor: '#383838',
+    signalColor: '#e6e6e6',
+    signalTextColor: '#e6e6e6',
+    labelBoxBkgColor: '#242424',
+    labelBoxBorderColor: '#383838',
+    labelTextColor: '#e6e6e6',
+    loopTextColor: '#e6e6e6',
+    activationBorderColor: '#555555',
+    activationBkgColor: '#222222',
+    sequenceNumberColor: '#000000',
+    pieTitleTextColor: '#e6e6e6',
+    pieSectionTextColor: '#e6e6e6',
+    pieLegendTextColor: '#e6e6e6',
+    pieStrokeColor: '#121212',
+    pieOuterStrokeColor: '#555555',
+    commitLabelColor: '#e6e6e6',
+    commitLabelBackground: '#181818',
+    tagLabelColor: '#e6e6e6',
+    tagLabelBackground: '#242424',
+    tagLabelBorder: '#383838',
+    pie1: '#ff3b41',
+    pie2: '#e69f00',
+    pie3: '#56b4e9',
+    pie4: '#009e73',
+    pie5: '#f0e442',
+    pie6: '#0072b2',
+    pie7: '#cc79a7',
+    pie8: '#4d5358',
+    pie9: '#ff3b41',
+    pie10: '#e69f00',
+    pie11: '#56b4e9',
+    pie12: '#009e73',
+    git0: '#ff3b41',
+    git1: '#e69f00',
+    git2: '#56b4e9',
+    git3: '#009e73',
+    git4: '#f0e442',
+    git5: '#0072b2',
+    git6: '#cc79a7',
+    git7: '#4d5358',
+    fillType0: '#ff3b41',
+    fillType1: '#e69f00',
+    fillType2: '#56b4e9',
+    fillType3: '#009e73',
+    fillType4: '#f0e442',
+    fillType5: '#0072b2',
+    fillType6: '#cc79a7',
+    fillType7: '#4d5358',
+  },
+};
+
+/** Ready-to-spread Mermaid config for a bronto theme (default `light`):
+ *  `mermaid.initialize(brontoMermaidTheme(document.documentElement.dataset.theme))`. */
+export function brontoMermaidTheme(theme = 'light') {
+  return { theme: 'base', themeVariables: mermaid[theme === 'dark' ? 'dark' : 'light'] };
+}
+
+export default brontoMermaidTheme;