@ponchia/ui 0.4.1 → 0.6.0

package/react/index.js

@@ -16,6 +16,34 @@
  *     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
+ */
+
+/**
+ * @template {DelegateOpts} [T=DelegateOpts]
+ * @typedef {Omit<T, 'root'> & { root?: BrontoBindingRoot }} BrontoBindingOpts
+ */
+
+/**
+ * @template {DelegateOpts} [T=DelegateOpts]
+ * @typedef {BrontoBindingOpts<T>
+ *   | (() => BrontoBindingOpts<T> | null | undefined)
+ *   | null
+ *   | undefined} BrontoBindingOptsResolver
  */
 import { useEffect } from 'react';
 import {
@@ -32,6 +60,11 @@ import {
   initDialog,
   initCarousel,
   initDotGlyph,
+  initLegend,
+  initConnectors,
+  initSpotlight,
+  initCrosshair,
+  initCommand,
   toast,
 } from '../behaviors/index.js';
 
@@ -48,31 +81,62 @@ 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 unmount). The behavior is run once; `opts` resolves
- *  on mount so refs are usable for scoped roots. */
+ *  on mount so refs are usable for scoped roots.
+ *  @param {(opts?: DelegateOpts) => Cleanup | void} init
+ *  @param {BrontoBindingOptsResolver} [opts]
+ *  @returns {void} */
 export function useBrontoBehavior(init, opts) {
   useEffect(() => init(resolveOpts(opts)), []); // eslint-disable-line react-hooks/exhaustive-deps -- delegated once on mount
 }
 
+/** @param {BrontoBindingOptsResolver<ThemeStorageOpts & DelegateOpts>} [opts] @returns {void} */
 export const useThemeToggle = (opts) => useBrontoBehavior(initThemeToggle, opts);
+/** @param {BrontoBindingOptsResolver} [opts] @returns {void} */
 export const useDismissible = (opts) => useBrontoBehavior(dismissible, opts);
+/** @param {BrontoBindingOptsResolver} [opts] @returns {void} */
 export const useDisclosure = (opts) => useBrontoBehavior(initDisclosure, opts);
+/** @param {BrontoBindingOptsResolver} [opts] @returns {void} */
 export const useMenu = (opts) => useBrontoBehavior(initMenu, opts);
+/** @param {BrontoBindingOptsResolver} [opts] @returns {void} */
 export const useFormValidation = (opts) => useBrontoBehavior(initFormValidation, opts);
+/** @param {BrontoBindingOptsResolver} [opts] @returns {void} */
 export const useCombobox = (opts) => useBrontoBehavior(initCombobox, opts);
+/** @param {BrontoBindingOptsResolver} [opts] @returns {void} */
 export const usePopover = (opts) => useBrontoBehavior(initPopover, opts);
+/** @param {BrontoBindingOptsResolver} [opts] @returns {void} */
 export const useTableSort = (opts) => useBrontoBehavior(initTableSort, opts);
+/** @param {BrontoBindingOptsResolver} [opts] @returns {void} */
 export const useTabs = (opts) => useBrontoBehavior(initTabs, opts);
+/** @param {BrontoBindingOptsResolver} [opts] @returns {void} */
 export const useDialog = (opts) => useBrontoBehavior(initDialog, opts);
+/** @param {BrontoBindingOptsResolver} [opts] @returns {void} */
 export const useCarousel = (opts) => useBrontoBehavior(initCarousel, opts);
+/** @param {BrontoBindingOptsResolver} [opts] @returns {void} */
 export const useDotGlyph = (opts) => useBrontoBehavior(initDotGlyph, opts);
+/** @param {BrontoBindingOptsResolver} [opts] @returns {void} */
+export const useLegend = (opts) => useBrontoBehavior(initLegend, opts);
+/** @param {BrontoBindingOptsResolver} [opts] @returns {void} */
+export const useConnectors = (opts) => useBrontoBehavior(initConnectors, opts);
+/** @param {BrontoBindingOptsResolver} [opts] @returns {void} */
+export const useSpotlight = (opts) => useBrontoBehavior(initSpotlight, opts);
+/** @param {BrontoBindingOptsResolver} [opts] @returns {void} */
+export const useCrosshair = (opts) => useBrontoBehavior(initCrosshair, opts);
+/** @param {BrontoBindingOptsResolver} [opts] @returns {void} */
+export const useCommand = (opts) => useBrontoBehavior(initCommand, opts);
 
-/** The `toast()` imperative (no lifecycle of its own). */
+/** The `toast()` imperative (no lifecycle of its own).
+ *  @returns {(message: string, opts?: ToastOpts) => Cleanup} */
 export const useToast = () => toast;
 
 // No-flash theme application has to run before paint; do it in an inline head

package/solid/index.d.ts

@@ -1,57 +1,65 @@
-/** @ponchia/ui/solid — thin Solid bindings over the SSR-safe behaviors.
- *  Optional peer dep `solid-js`. Primitives run a delegated behavior for the
- *  component's lifetime; they take the same options as the behavior and return
- *  void (the cleanup is wired to dispose). See behaviors/index.d.ts. */
-import type {
-  Cleanup,
-  DelegateOpts,
-  ThemeStorageOpts,
-  ToastOpts,
-} from '../behaviors/index.js';
-
-export type BrontoBindingRoot =
-  | Document
-  | Element
-  | { current: Document | Element | null | undefined }
-  | (() => Document | Element | null | undefined)
-  | null
-  | undefined;
-
-export type BrontoBindingOpts<T extends DelegateOpts = DelegateOpts> = Omit<T, 'root'> & {
-  root?: BrontoBindingRoot;
+/** Run a delegated behavior for the component's lifetime (init on mount, its
+ *  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?: DelegateOpts) => Cleanup | void, opts?: BrontoBindingOptsResolver): void;
+/** @type {(opts?: BrontoBindingOptsResolver<ThemeStorageOpts & DelegateOpts>) => void} */
+export const useThemeToggle: (opts?: BrontoBindingOptsResolver<ThemeStorageOpts & DelegateOpts>) => void;
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
+export const useDismissible: (opts?: BrontoBindingOptsResolver) => void;
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
+export const useDisclosure: (opts?: BrontoBindingOptsResolver) => void;
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
+export const useMenu: (opts?: BrontoBindingOptsResolver) => void;
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
+export const useFormValidation: (opts?: BrontoBindingOptsResolver) => void;
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
+export const useCombobox: (opts?: BrontoBindingOptsResolver) => void;
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
+export const usePopover: (opts?: BrontoBindingOptsResolver) => void;
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
+export const useTableSort: (opts?: BrontoBindingOptsResolver) => void;
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
+export const useTabs: (opts?: BrontoBindingOptsResolver) => void;
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
+export const useDialog: (opts?: BrontoBindingOptsResolver) => void;
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
+export const useCarousel: (opts?: BrontoBindingOptsResolver) => void;
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
+export const useDotGlyph: (opts?: BrontoBindingOptsResolver) => void;
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
+export const useLegend: (opts?: BrontoBindingOptsResolver) => void;
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
+export const useConnectors: (opts?: BrontoBindingOptsResolver) => void;
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
+export const useSpotlight: (opts?: BrontoBindingOptsResolver) => void;
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
+export const useCrosshair: (opts?: BrontoBindingOptsResolver) => void;
+/** @type {(opts?: BrontoBindingOptsResolver) => void} */
+export const useCommand: (opts?: BrontoBindingOptsResolver) => void;
+/** The `toast()` imperative (no lifecycle of its own).
+ * @type {() => (message: string, opts?: ToastOpts) => Cleanup} */
+export const useToast: () => (message: string, opts?: ToastOpts) => Cleanup;
+export { applyStoredTheme };
+export type Cleanup = import("../behaviors/index.js").Cleanup;
+export type DelegateOpts = import("../behaviors/index.js").DelegateOpts;
+export type ThemeStorageOpts = import("../behaviors/index.js").ThemeStorageOpts;
+export type ToastOpts = import("../behaviors/index.js").ToastOpts;
+export type BrontoBindingRoot = Document | Element | {
+    current: Document | Element | null | undefined;
+} | (() => Document | Element | null | undefined) | null | undefined;
+/**
+ * Behavior options with the `root` widened to accept Solid refs/resolvers.
+ */
+export type BrontoBindingOpts<T extends DelegateOpts = import("../behaviors/index.js").DelegateOpts> = Omit<T, "root"> & {
+    root?: BrontoBindingRoot;
 };
-
-export type BrontoBindingOptsResolver<T extends DelegateOpts = DelegateOpts> =
-  | BrontoBindingOpts<T>
-  | (() => BrontoBindingOpts<T> | null | undefined)
-  | null
-  | undefined;
-
-/** Run any delegated behavior for the component's lifetime (init on mount,
- *  its returned cleanup on dispose). The behavior is run once. Options resolve
- *  on mount, so scoped roots may be refs or resolver callbacks. */
-export declare function useBrontoBehavior(
-  init: (opts?: DelegateOpts) => Cleanup | void,
-  opts?: BrontoBindingOptsResolver,
-): void;
-
-export declare function useThemeToggle(
-  opts?: BrontoBindingOptsResolver<ThemeStorageOpts & DelegateOpts>,
-): void;
-export declare function useDismissible(opts?: BrontoBindingOptsResolver): void;
-export declare function useDisclosure(opts?: BrontoBindingOptsResolver): void;
-export declare function useMenu(opts?: BrontoBindingOptsResolver): void;
-export declare function useFormValidation(opts?: BrontoBindingOptsResolver): void;
-export declare function useCombobox(opts?: BrontoBindingOptsResolver): void;
-export declare function usePopover(opts?: BrontoBindingOptsResolver): void;
-export declare function useTableSort(opts?: BrontoBindingOptsResolver): void;
-export declare function useTabs(opts?: BrontoBindingOptsResolver): void;
-export declare function useDialog(opts?: BrontoBindingOptsResolver): void;
-export declare function useCarousel(opts?: BrontoBindingOptsResolver): void;
-export declare function useDotGlyph(opts?: BrontoBindingOptsResolver): void;
-
-/** The `toast()` imperative (no lifecycle of its own). */
-export declare function useToast(): (message: string, opts?: ToastOpts) => Cleanup;
-
-export { applyStoredTheme } from '../behaviors/index.js';
-export { cls, ui, cx } from '../classes/index.js';
+/**
+ * `BrontoBindingOpts<T>`, or a callback that returns it on mount (after refs).
+ */
+export type BrontoBindingOptsResolver<T extends DelegateOpts = import("../behaviors/index.js").DelegateOpts> = BrontoBindingOpts<T> | (() => BrontoBindingOpts<T> | null | undefined) | null | undefined;
+import { applyStoredTheme } from '../behaviors/index.js';
+export { cls, ui, cx } from "../classes/index.js";
+//# sourceMappingURL=index.d.ts.map

package/solid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AA8FA;;;;;GAKG;AACH,wCAJW,CAAC,IAAI,CAAC,EAAE,YAAY,KAAK,OAAO,GAAG,IAAI,SACvC,yBAAyB,GACvB,IAAI,CAOhB;AAED,0FAA0F;AAC1F,6BADW,CAAC,IAAI,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,GAAG,YAAY,CAAC,KAAK,IAAI,CACL;AACjF,yDAAyD;AACzD,6BADW,CAAC,IAAI,CAAC,EAAE,yBAAyB,KAAK,IAAI,CACwB;AAC7E,yDAAyD;AACzD,4BADW,CAAC,IAAI,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAC0B;AAC/E,yDAAyD;AACzD,sBADW,CAAC,IAAI,CAAC,EAAE,yBAAyB,KAAK,IAAI,CACc;AACnE,yDAAyD;AACzD,gCADW,CAAC,IAAI,CAAC,EAAE,yBAAyB,KAAK,IAAI,CACkC;AACvF,yDAAyD;AACzD,0BADW,CAAC,IAAI,CAAC,EAAE,yBAAyB,KAAK,IAAI,CACsB;AAC3E,yDAAyD;AACzD,yBADW,CAAC,IAAI,CAAC,EAAE,yBAAyB,KAAK,IAAI,CACoB;AACzE,yDAAyD;AACzD,2BADW,CAAC,IAAI,CAAC,EAAE,yBAAyB,KAAK,IAAI,CACwB;AAC7E,yDAAyD;AACzD,sBADW,CAAC,IAAI,CAAC,EAAE,yBAAyB,KAAK,IAAI,CACc;AACnE,yDAAyD;AACzD,wBADW,CAAC,IAAI,CAAC,EAAE,yBAAyB,KAAK,IAAI,CACkB;AACvE,yDAAyD;AACzD,0BADW,CAAC,IAAI,CAAC,EAAE,yBAAyB,KAAK,IAAI,CACsB;AAC3E,yDAAyD;AACzD,0BADW,CAAC,IAAI,CAAC,EAAE,yBAAyB,KAAK,IAAI,CACsB;AAC3E,yDAAyD;AACzD,wBADW,CAAC,IAAI,CAAC,EAAE,yBAAyB,KAAK,IAAI,CACkB;AACvE,yDAAyD;AACzD,4BADW,CAAC,IAAI,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAC0B;AAC/E,yDAAyD;AACzD,2BADW,CAAC,IAAI,CAAC,EAAE,yBAAyB,KAAK,IAAI,CACwB;AAC7E,yDAAyD;AACzD,2BADW,CAAC,IAAI,CAAC,EAAE,yBAAyB,KAAK,IAAI,CACwB;AAC7E,yDAAyD;AACzD,yBADW,CAAC,IAAI,CAAC,EAAE,yBAAyB,KAAK,IAAI,CACoB;AAEzE;kEACkE;AAClE,uBADU,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,KAAK,OAAO,CAC1B;;sBA1HvB,OAAO,uBAAuB,EAAE,OAAO;2BACvC,OAAO,uBAAuB,EAAE,YAAY;+BAC5C,OAAO,uBAAuB,EAAE,gBAAgB;wBAChD,OAAO,uBAAuB,EAAE,SAAS;gCAEzC,QAAQ,GACd,OAAO,GACP;IAAE,OAAO,EAAE,QAAQ,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAA;CAAE,GAClD,CAAC,MAAM,QAAQ,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,GAC7C,IAAI,GACJ,SAAS;;;;8BAKa,CAAC,SAAhB,YAAa,mDACd,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,iBAAiB,CAAA;CAAE;;;;sCAK9B,CAAC,SAAhB,YAAa,mDACd,iBAAiB,CAAC,CAAC,CAAC,GAC1B,CAAC,MAAM,iBAAiB,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC,GAC/C,IAAI,GACJ,SAAS;iCAuBT,uBAAuB"}

package/solid/index.js

@@ -16,6 +16,36 @@
  *     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 {
@@ -32,6 +62,11 @@ import {
   initDialog,
   initCarousel,
   initDotGlyph,
+  initLegend,
+  initConnectors,
+  initSpotlight,
+  initCrosshair,
+  initCommand,
   toast,
 } from '../behaviors/index.js';
 
@@ -48,12 +83,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));
@@ -61,20 +105,43 @@ 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 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 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

@@ -4,16 +4,20 @@
  * For consumers that need token values in JS rather than CSS: charting,
  * canvas, inline styles, theme-aware logic, Style Dictionary / Figma sync.
  *
- * `cssVars` is the canonical, exact mirror of the :root blocks in
- * css/tokens.css — keyed by the real custom-property name, values are
- * the verbatim CSS strings. scripts/check-tokens.mjs fails CI if this
- * drifts from the stylesheet, so the two cannot silently diverge.
+ * `cssVars` is the SINGLE SOURCE of truth for token values — keyed by the
+ * real custom-property name, values are the verbatim CSS strings. The four
+ * :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).
+ * 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).
  */
 
-/** Exact mirror of css/tokens.css. Do not reshape — the sync check is literal. */
+/** Single source for token values; the css/tokens.css palette blocks are
+ *  generated from this (scripts/gen-tokens-css.mjs). Edit values here, then run
+ *  `npm run tokens:css:build`. Do not reshape — the generators consume it literally. */
 export const cssVars = {
   // Global :root — scales, shared with both themes.
   global: {
@@ -34,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',
@@ -105,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)',
@@ -140,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)',