@ponchia/ui 0.3.6 → 0.4.1

package/qwik/index.js

@@ -0,0 +1,129 @@
+/**
+ * @ponchia/ui/qwik — thin Qwik bindings over @ponchia/ui/behaviors.
+ *
+ * The CSS is the framework; these are *optional* hooks that wrap the SSR-safe
+ * vanilla `init*` behaviors in Qwik's client lifecycle. Thin adapters, not a
+ * component library (architecture ADR). `@builder.io/qwik` is an optional peer
+ * dependency.
+ *
+ * Qwik is resumable: nothing runs until needed, and our behaviors are exactly
+ * the kind of "enhance on the client" glue that fits — they `useVisibleTask$`
+ * (run when the owning component first becomes visible) and register cleanup,
+ * so a server-rendered page stays zero-JS until interaction. Each hook inlines
+ * its specific behavior so the Qwik optimizer can resolve the import inside the
+ * extracted task segment.
+ *
+ *   import { component$ } from '@builder.io/qwik';
+ *   import { useDialog, useToast } from '@ponchia/ui/qwik';
+ *   export default component$(() => {
+ *     useDialog();                 // wires every .ui-modal under document
+ *     const toast = useToast();
+ *     return <button onClick$={() => toast('Saved', { tone: 'success' })}>Save</button>;
+ *   });
+ *
+ * Scope a behavior to a subtree by passing a Qwik signal:
+ *   const root = useSignal();
+ *   useDialog({ root });           // <section ref={root}> … </section>
+ */
+import { useVisibleTask$ } from '@builder.io/qwik';
+import {
+  applyStoredTheme,
+  initThemeToggle,
+  dismissible,
+  initDisclosure,
+  initMenu,
+  initFormValidation,
+  initCombobox,
+  initPopover,
+  initTableSort,
+  initTabs,
+  initDialog,
+  initCarousel,
+  initDotGlyph,
+  toast,
+} from '../behaviors/index.js';
+
+function resolveMaybe(v) {
+  return typeof v === 'function' ? v() : v;
+}
+
+function resolveRoot(root) {
+  const value = resolveMaybe(root);
+  if (value && typeof value === 'object') {
+    if ('value' in value) return value.value; // Qwik signal (useSignal)
+    if ('current' in value) return value.current; // generic ref shape
+  }
+  return value;
+}
+
+function resolveOpts(opts) {
+  const value = resolveMaybe(opts);
+  if (!value || typeof value !== 'object') return undefined;
+  const root = resolveRoot(value.root);
+  return root ? { ...value, root } : { ...value, root: undefined };
+}
+
+/** Run a delegated behavior on visible and register its cleanup on dispose.
+ *  `init` and `opts` are resolved inside the visible task, so a Qwik-signal
+ *  root is read after the element is assigned. Shared, non-QRL, so the
+ *  optimizer keeps the captured behavior import inside the task segment. */
+function start(init, opts, ctx) {
+  const cleanup = init(resolveOpts(opts));
+  if (typeof cleanup === 'function') ctx.cleanup(cleanup);
+}
+
+/** Generic escape hatch. NOTE for Qwik: prefer the specific `use*` hooks
+ *  below — they inline a statically-imported behavior so the optimizer can
+ *  serialize the task. Passing a runtime function here is only safe when it
+ *  is itself optimizer-visible (a module import). */
+export function useBrontoBehavior(init, opts) {
+  // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
+  useVisibleTask$((ctx) => start(init, opts, ctx));
+}
+
+export const useThemeToggle = (opts) =>
+  // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
+  useVisibleTask$((ctx) => start(initThemeToggle, opts, ctx));
+export const useDismissible = (opts) =>
+  // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
+  useVisibleTask$((ctx) => start(dismissible, opts, ctx));
+export const useDisclosure = (opts) =>
+  // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
+  useVisibleTask$((ctx) => start(initDisclosure, opts, ctx));
+export const useMenu = (opts) =>
+  // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
+  useVisibleTask$((ctx) => start(initMenu, opts, ctx));
+export const useFormValidation = (opts) =>
+  // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
+  useVisibleTask$((ctx) => start(initFormValidation, opts, ctx));
+export const useCombobox = (opts) =>
+  // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
+  useVisibleTask$((ctx) => start(initCombobox, opts, ctx));
+export const usePopover = (opts) =>
+  // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
+  useVisibleTask$((ctx) => start(initPopover, opts, ctx));
+export const useTableSort = (opts) =>
+  // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
+  useVisibleTask$((ctx) => start(initTableSort, opts, ctx));
+export const useTabs = (opts) =>
+  // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
+  useVisibleTask$((ctx) => start(initTabs, opts, ctx));
+export const useDialog = (opts) =>
+  // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
+  useVisibleTask$((ctx) => start(initDialog, opts, ctx));
+export const useCarousel = (opts) =>
+  // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
+  useVisibleTask$((ctx) => start(initCarousel, opts, ctx));
+export const useDotGlyph = (opts) =>
+  // eslint-disable-next-line qwik/no-use-visible-task -- delegated DOM glue + cleanup
+  useVisibleTask$((ctx) => start(initDotGlyph, opts, ctx));
+
+/** The `toast()` imperative (no lifecycle of its own). */
+export const useToast = () => toast;
+
+// No-flash theme application must run before paint — do it in an inline head
+// script, not on visible. Re-exported for manual/SSR-bootstrap use.
+export { applyStoredTheme };
+
+// Convenience: the framework-agnostic class contract, re-exported.
+export { cls, ui, cx } from '../classes/index.js';

package/react/index.d.ts

@@ -0,0 +1,57 @@
+/** @ponchia/ui/react — thin React bindings over the SSR-safe behaviors.
+ *  Optional peer dep `react`. Hooks 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 unmount). 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;
+};
+
+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 unmount). The behavior is run once. Options resolve
+ *  on mount, so scoped roots may be React 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';

package/react/index.js

@@ -0,0 +1,84 @@
+/**
+ * @ponchia/ui/react — thin React bindings over @ponchia/ui/behaviors.
+ *
+ * The CSS is the framework; these are *optional* hooks that wrap the SSR-safe
+ * vanilla `init*` behaviors in a component lifecycle (run on mount, clean up on
+ * unmount). They are deliberately thin adapters — not a component library — per
+ * the architecture ADR. `react` is an optional peer dependency.
+ *
+ * The behaviors delegate from a root (default `document`), so call a hook once
+ * near the relevant subtree; pass `{ root: ref }` or a resolver callback to
+ * scope it. The options resolve on mount, after refs have been assigned.
+ *
+ *   import { useDialog, useToast } from '@ponchia/ui/react';
+ *   function App() {
+ *     useDialog();                 // wires every .ui-modal under document
+ *     const toast = useToast();
+ *     return <button onClick={() => toast('Saved', { tone: 'success' })}>Save</button>;
+ *   }
+ */
+import { useEffect } from 'react';
+import {
+  applyStoredTheme,
+  initThemeToggle,
+  dismissible,
+  initDisclosure,
+  initMenu,
+  initFormValidation,
+  initCombobox,
+  initPopover,
+  initTableSort,
+  initTabs,
+  initDialog,
+  initCarousel,
+  initDotGlyph,
+  toast,
+} from '../behaviors/index.js';
+
+function resolveMaybe(v) {
+  return typeof v === 'function' ? v() : v;
+}
+
+function resolveRoot(root) {
+  const value = resolveMaybe(root);
+  if (value && typeof value === 'object' && 'current' in value) return value.current;
+  return value;
+}
+
+function resolveOpts(opts) {
+  const value = resolveMaybe(opts);
+  if (!value || typeof value !== 'object') return undefined;
+  const root = resolveRoot(value.root);
+  return root ? { ...value, root } : { ...value, root: undefined };
+}
+
+/** 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. */
+export function useBrontoBehavior(init, opts) {
+  useEffect(() => init(resolveOpts(opts)), []); // eslint-disable-line react-hooks/exhaustive-deps -- delegated once on mount
+}
+
+export const useThemeToggle = (opts) => useBrontoBehavior(initThemeToggle, opts);
+export const useDismissible = (opts) => useBrontoBehavior(dismissible, opts);
+export const useDisclosure = (opts) => useBrontoBehavior(initDisclosure, opts);
+export const useMenu = (opts) => useBrontoBehavior(initMenu, opts);
+export const useFormValidation = (opts) => useBrontoBehavior(initFormValidation, opts);
+export const useCombobox = (opts) => useBrontoBehavior(initCombobox, opts);
+export const usePopover = (opts) => useBrontoBehavior(initPopover, opts);
+export const useTableSort = (opts) => useBrontoBehavior(initTableSort, opts);
+export const useTabs = (opts) => useBrontoBehavior(initTabs, opts);
+export const useDialog = (opts) => useBrontoBehavior(initDialog, opts);
+export const useCarousel = (opts) => useBrontoBehavior(initCarousel, opts);
+export const useDotGlyph = (opts) => useBrontoBehavior(initDotGlyph, opts);
+
+/** The `toast()` imperative (no lifecycle of its own). */
+export const useToast = () => toast;
+
+// No-flash theme application has to run before paint; do it in an inline head
+// script, not an effect. Re-exported for manual/SSR-bootstrap use.
+export { applyStoredTheme };
+
+// Convenience: the framework-agnostic class contract, re-exported so a React
+// consumer needs one import.
+export { cls, ui, cx } from '../classes/index.js';

package/solid/index.d.ts

@@ -0,0 +1,57 @@
+/** @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;
+};
+
+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';

package/solid/index.js

@@ -0,0 +1,85 @@
+/**
+ * @ponchia/ui/solid — thin Solid bindings over @ponchia/ui/behaviors.
+ *
+ * The CSS is the framework; these are *optional* primitives that wrap the
+ * SSR-safe vanilla `init*` behaviors in Solid's lifecycle (run on mount, clean
+ * up on dispose). Thin adapters, not a component library (architecture ADR).
+ * `solid-js` is an optional peer dependency.
+ *
+ * Behaviors delegate from a root (default `document`); call a primitive once in
+ * a component that owns the relevant subtree, and pass a root resolver to scope
+ * it when the element is assigned by Solid's ref lifecycle.
+ *
+ *   import { useDialog, useToast } from '@ponchia/ui/solid';
+ *   function App() {
+ *     useDialog();                 // wires every .ui-modal under document
+ *     const toast = useToast();
+ *     return <button onClick={() => toast('Saved', { tone: 'success' })}>Save</button>;
+ *   }
+ */
+import { onMount, onCleanup } from 'solid-js';
+import {
+  applyStoredTheme,
+  initThemeToggle,
+  dismissible,
+  initDisclosure,
+  initMenu,
+  initFormValidation,
+  initCombobox,
+  initPopover,
+  initTableSort,
+  initTabs,
+  initDialog,
+  initCarousel,
+  initDotGlyph,
+  toast,
+} from '../behaviors/index.js';
+
+function resolveMaybe(v) {
+  return typeof v === 'function' ? v() : v;
+}
+
+function resolveRoot(root) {
+  const value = resolveMaybe(root);
+  if (value && typeof value === 'object' && 'current' in value) return value.current;
+  return value;
+}
+
+function resolveOpts(opts) {
+  const value = resolveMaybe(opts);
+  if (!value || typeof value !== 'object') return undefined;
+  const root = resolveRoot(value.root);
+  return root ? { ...value, root } : { ...value, root: undefined };
+}
+
+/** Run a delegated behavior for the component's lifetime (init on mount, its
+ *  returned cleanup on dispose). Options resolve on mount, after refs exist. */
+export function useBrontoBehavior(init, opts) {
+  onMount(() => {
+    const cleanup = init(resolveOpts(opts));
+    if (typeof cleanup === 'function') onCleanup(cleanup);
+  });
+}
+
+export const useThemeToggle = (opts) => useBrontoBehavior(initThemeToggle, opts);
+export const useDismissible = (opts) => useBrontoBehavior(dismissible, opts);
+export const useDisclosure = (opts) => useBrontoBehavior(initDisclosure, opts);
+export const useMenu = (opts) => useBrontoBehavior(initMenu, opts);
+export const useFormValidation = (opts) => useBrontoBehavior(initFormValidation, opts);
+export const useCombobox = (opts) => useBrontoBehavior(initCombobox, opts);
+export const usePopover = (opts) => useBrontoBehavior(initPopover, opts);
+export const useTableSort = (opts) => useBrontoBehavior(initTableSort, opts);
+export const useTabs = (opts) => useBrontoBehavior(initTabs, opts);
+export const useDialog = (opts) => useBrontoBehavior(initDialog, opts);
+export const useCarousel = (opts) => useBrontoBehavior(initCarousel, opts);
+export const useDotGlyph = (opts) => useBrontoBehavior(initDotGlyph, opts);
+
+/** The `toast()` imperative (no lifecycle of its own). */
+export const useToast = () => toast;
+
+// No-flash theme application must run before paint — do it in an inline head
+// script, not on mount. Re-exported for manual/SSR-bootstrap use.
+export { applyStoredTheme };
+
+// Convenience: the framework-agnostic class contract, re-exported.
+export { cls, ui, cx } from '../classes/index.js';

package/tokens/charts.d.ts

@@ -0,0 +1,37 @@
+/** @ponchia/ui — GENERATED from tokens/charts.js by scripts/gen-charts.mjs.
+ *  Do not edit by hand; run `npm run charts:build`. Drift-checked in CI. */
+
+/** A theme's data-viz palette. Values are CSS colour strings (OKLCH for the
+ *  authored series; `var(--accent)` for series 1). For resolved sRGB **hex**
+ *  (canvas/SVG/charting libs), import `@ponchia/ui/charts.json` instead. */
+export interface ChartTheme {
+  /** 8 distinct series colours (index 0 = `var(--accent)`, the brand). */
+  categorical: string[];
+  /** Single-hue sequential ramp (light→dark), for heatmaps/intensity. */
+  sequential: string[];
+  /** Diverging ramp (− … neutral … +), for gains/losses. */
+  diverging: string[];
+}
+
+/** The categorical CSS custom-property names (1-based; `--chart-1` = the accent). */
+export type ChartTokenName =
+  | '--chart-1'
+  | '--chart-2'
+  | '--chart-3'
+  | '--chart-4'
+  | '--chart-5'
+  | '--chart-6'
+  | '--chart-7'
+  | '--chart-8';
+
+/** The opt-in data-viz palette source, per theme (CSS colour strings). */
+export declare const charts: { light: ChartTheme; dark: ChartTheme };
+
+/** Series 1 sentinel — the live brand accent. */
+export declare const ACCENT: 'var(--accent)';
+
+export declare const CHART_CATEGORICAL: 8;
+export declare const CHART_PATTERN_COUNT: 8;
+
+declare const _default: { light: ChartTheme; dark: ChartTheme };
+export default _default;

package/tokens/charts.js

@@ -0,0 +1,96 @@
+/**
+ * @ponchia/ui — Tier-4 data-viz colour module (ADR-0001 step 7).
+ *
+ * The single source for the opt-in chart palette (`@ponchia/ui/css/dataviz.css`
+ * + `tokens/charts.json`). **Charts only, never UI chrome** — `check-color-policy`
+ * forbids `var(--chart-*)` in core component CSS. Opt-in: a separate entrypoint,
+ * never in the default bundle.
+ *
+ * Hybrid accent-led: **series 1 is the live `var(--accent)`** (the brand stays
+ * series 1, so it re-themes/-skins for free); series 2–8 are an Okabe-Ito-derived
+ * colourblind-safe set, authored in OKLCH per-theme (darker in light, brighter
+ * in dark) and **gated for pairwise distinguishability under normal + simulated
+ * protan/deutan/tritan vision** (scripts/check-charts.mjs). Series 8 is a neutral
+ * grey (on-brand, and a useful "other"/baseline series).
+ *
+ * Colour is never the sole signal: `--chart-pattern-1..8` ship a matching
+ * dot-matrix pattern per series (WCAG 1.4.1). Use colour N WITH pattern N.
+ *
+ * Generated → drift-checked: css/dataviz.css, tokens/charts.json (resolved hex
+ * for JS/canvas/SVG/charting libs), tokens/charts.d.ts.
+ */
+
+/** Series 1 is the live accent (a CSS var, not a fixed hue). Resolved to the
+ *  theme accent for the JSON/gate. */
+export const ACCENT = 'var(--accent)';
+
+/** Series 2–8 — the Okabe-Ito colourblind-safe set, used **verbatim** (the same
+ *  hues both themes). Authored as sRGB hex on purpose: Okabe-Ito is a published,
+ *  CVD-proven *set*, and round-tripping through OKLCH (or re-spacing per theme)
+ *  breaks the careful lightness relationships that make it colourblind-safe —
+ *  which the CVD gate caught. Series 1 (the accent, per-theme) replaces
+ *  Okabe-Ito's vermillion; a dark slate-grey is the 8th (a CVD-distinct "other"
+ *  / baseline, far enough in lightness from the reddish-purple to clear deutan).
+ *  The sequential/diverging ramps below ARE authored in OKLCH (new work). */
+const FILLS = [
+  '#e69f00', // 2 orange
+  '#56b4e9', // 3 sky blue
+  '#009e73', // 4 bluish green
+  '#f0e442', // 5 yellow
+  '#0072b2', // 6 blue
+  '#cc79a7', // 7 reddish purple
+  '#4d5358', // 8 dark slate (CVD-distinct neutral)
+];
+
+export const charts = {
+  light: {
+    categorical: [ACCENT, ...FILLS],
+    sequential: [
+      'oklch(94% 0.03 25deg)',
+      'oklch(85% 0.07 25deg)',
+      'oklch(74% 0.12 25deg)',
+      'oklch(62% 0.16 25deg)',
+      'oklch(50% 0.16 25deg)',
+      'oklch(38% 0.13 25deg)',
+    ],
+    diverging: [
+      'oklch(45% 0.14 255deg)', // − strong blue
+      'oklch(62% 0.1 250deg)',
+      'oklch(82% 0.05 245deg)',
+      'oklch(90% 0.01 250deg)', // mid neutral
+      'oklch(80% 0.07 60deg)',
+      'oklch(66% 0.13 55deg)',
+      'oklch(56% 0.15 45deg)', // + strong orange
+    ],
+  },
+  dark: {
+    categorical: [ACCENT, ...FILLS],
+    sequential: [
+      'oklch(30% 0.1 25deg)',
+      'oklch(42% 0.15 25deg)',
+      'oklch(55% 0.17 25deg)',
+      'oklch(68% 0.15 25deg)',
+      'oklch(80% 0.1 25deg)',
+      'oklch(90% 0.05 25deg)',
+    ],
+    diverging: [
+      'oklch(70% 0.13 250deg)', // − blue
+      'oklch(60% 0.12 252deg)',
+      'oklch(48% 0.08 255deg)',
+      'oklch(40% 0.01 250deg)', // mid neutral
+      'oklch(58% 0.1 60deg)',
+      'oklch(72% 0.13 58deg)',
+      'oklch(80% 0.12 55deg)', // + orange
+    ],
+  },
+};
+
+/** Pattern fills — dot-matrix CSS background-images, the second (non-colour)
+ *  channel per series. Each uses `--chart-pattern-ink` (set it to the series
+ *  colour). Index matches the categorical series. */
+export const CHART_PATTERN_COUNT = 8;
+
+/** Number of categorical series. */
+export const CHART_CATEGORICAL = 8;
+
+export default charts;

package/tokens/charts.json

@@ -0,0 +1,61 @@
+{
+  "$comment": "@ponchia/ui data-viz palette resolved to static hex per theme, for non-CSS render targets (canvas/SVG/charting libs). Series 1 = the resolved brand accent. Generated from tokens/charts.js — do not edit by hand; run `npm run charts:build`. Drift-checked in CI.",
+  "light": {
+    "categorical": [
+      "#d71921",
+      "#e69f00",
+      "#56b4e9",
+      "#009e73",
+      "#f0e442",
+      "#0072b2",
+      "#cc79a7",
+      "#4d5358"
+    ],
+    "sequential": [
+      "#ffe4e1",
+      "#f9bdb7",
+      "#ed8c84",
+      "#d55753",
+      "#ac3031",
+      "#79191b"
+    ],
+    "diverging": [
+      "#0c54a0",
+      "#558ac0",
+      "#aac8e3",
+      "#d9dfe5",
+      "#e0b491",
+      "#ce7a3b",
+      "#b95115"
+    ]
+  },
+  "dark": {
+    "categorical": [
+      "#ff3b41",
+      "#e69f00",
+      "#56b4e9",
+      "#009e73",
+      "#f0e442",
+      "#0072b2",
+      "#cc79a7",
+      "#4d5358"
+    ],
+    "sequential": [
+      "#551112",
+      "#8d1a1e",
+      "#c13c3b",
+      "#e66e68",
+      "#f8a49d",
+      "#fed2cd"
+    ],
+    "diverging": [
+      "#5aa3ec",
+      "#4683c5",
+      "#3e5f8a",
+      "#44484d",
+      "#a56b38",
+      "#e18e4b",
+      "#f9a870"
+    ]
+  }
+}

package/tokens/index.d.ts

@@ -4,8 +4,8 @@
 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-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--orange' | '--orange-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-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--orange' | '--orange-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 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';
 
 /** Exact mirror of the :root blocks in css/tokens.css (literal keys). */
 export declare const cssVars: {
@@ -15,7 +15,7 @@ export declare const cssVars: {
 };
 
 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-strong' | 'accent-text' | 'accent-soft' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'orange' | 'orange-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 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';
 
 /** Ergonomic view derived from {@link cssVars} (`--` prefix stripped). */
 export declare const tokens: {