astralkit 0.8.0 → 0.9.0

package/lib/presets/dials.js

@@ -1,330 +1,365 @@
-/**
- * astralkit/presets — dials.
- *
- * BASE_COLORS  — the neutral scale under surfaces/borders/text.
- * ACCENT_THEMES — the brand accent hue over the full primary role family.
- * TYPE_SCALES  — authored size hierarchies (one dial, whole ramp).
- * radiusToVariables — the full derived radius set (the :root substitution rule).
- *
- * Every color dial is MODE-AWARE: pass { mode: 'dark' } and you get the
- * authored dark mapping, following the SDK's own dark language — near-black
- * tinted surface ramps, WHITE-ALPHA hovers/borders (never gray hexes), text
- * from the scale's light end, accents at 500 with darkened states. Built to
- * match [data-theme="dark"] in astralkit-theme.css and the dark palettes.
- */
-
-// ── Base colors ──────────────────────────────────────────────────────
-
-export const DEFAULT_BASE_COLOR_ID = 'neutral'
-
-const lightBase = (s) => ({
-  '--color-ak-surface': s[50],
-  '--color-ak-surface-2': s[100],
-  '--color-ak-surface-3': s[200],
-  '--color-ak-surface-4': s[300],
-  '--color-ak-hover': s[100],
-  '--color-ak-active': s[200],
-  '--color-ak-border': s[200],
-  '--color-ak-border-subtle': s[100],
-  '--color-ak-border-strong': s[400],
-  '--color-ak-text': s[950],
-  '--color-ak-text-secondary': s[600],
-  '--color-ak-text-muted': s[400],
-  '--color-ak-on-surface': s[950],
-  '--color-ak-on-surface-variant': s[600],
-})
-
-// Dark: tinted near-black ramp from the scale's deep end; hovers/actives and
-// borders stay white-alpha exactly like the SDK's own dark block.
-const darkBase = (s) => ({
-  '--color-ak-bg': s[950],
-  '--color-ak-surface': s[900],
-  '--color-ak-surface-2': s[800],
-  '--color-ak-surface-3': s[800],
-  '--color-ak-surface-4': s[700],
-  '--color-ak-hover': 'rgba(255,255,255,0.04)',
-  '--color-ak-active': 'rgba(255,255,255,0.08)',
-  '--color-ak-border': 'rgba(255,255,255,0.10)',
-  '--color-ak-border-subtle': 'rgba(255,255,255,0.06)',
-  '--color-ak-border-strong': 'rgba(255,255,255,0.16)',
-  '--color-ak-text': s[50],
-  '--color-ak-text-secondary': s[400],
-  '--color-ak-text-muted': s[600],
-  '--color-ak-on-surface': s[50],
-  '--color-ak-on-surface-variant': s[400],
-})
-
-const base = (id, name, description, scale) => ({
-  id,
-  name,
-  description,
-  variables: lightBase(scale),
-  darkVariables: darkBase(scale),
-  swatch: scale[600],
-})
-
-export const BASE_COLORS = [
-  { id: 'neutral', name: 'Neutral', description: 'The SDK default neutral scale.', variables: {}, darkVariables: {}, swatch: '#a3a3a3' },
-  base('stone', 'Stone', 'Warm gray — earthy, editorial.', {
-    50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09',
-  }),
-  base('zinc', 'Zinc', 'Cool gray — technical, precise.', {
-    50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b',
-  }),
-  base('mauve', 'Mauve', 'Violet-tinted neutral.', {
-    50: 'oklch(98.5% 0 0)', 100: 'oklch(96% 0.003 325.6)', 200: 'oklch(92.2% 0.005 325.62)', 300: 'oklch(86.5% 0.012 325.68)', 400: 'oklch(71.1% 0.019 323.02)', 600: 'oklch(43.5% 0.029 321.78)', 700: 'oklch(36.4% 0.029 323.89)', 800: 'oklch(26.3% 0.024 320.12)', 900: 'oklch(21.2% 0.019 322.12)', 950: 'oklch(14.5% 0.008 326)',
-  }),
-  base('olive', 'Olive', 'Green-tinted neutral.', {
-    50: 'oklch(98.8% 0.003 106.5)', 100: 'oklch(96.6% 0.005 106.5)', 200: 'oklch(93% 0.007 106.5)', 300: 'oklch(88% 0.011 106.6)', 400: 'oklch(73.7% 0.021 106.9)', 600: 'oklch(46.6% 0.025 107.3)', 700: 'oklch(39.4% 0.023 107.4)', 800: 'oklch(28.6% 0.016 107.4)', 900: 'oklch(22.8% 0.013 107.4)', 950: 'oklch(15.3% 0.006 107.1)',
-  }),
-  base('mist', 'Mist', 'Blue-tinted neutral.', {
-    50: 'oklch(98.7% 0.002 197.1)', 100: 'oklch(96.3% 0.002 197.1)', 200: 'oklch(92.5% 0.005 214.3)', 300: 'oklch(87.2% 0.007 219.6)', 400: 'oklch(72.3% 0.014 214.4)', 600: 'oklch(45% 0.017 213.2)', 700: 'oklch(37.8% 0.015 216)', 800: 'oklch(27.5% 0.011 216.9)', 900: 'oklch(21.8% 0.008 223.9)', 950: 'oklch(14.8% 0.004 228.8)',
-  }),
-  base('taupe', 'Taupe', 'Brown-tinted neutral.', {
-    50: 'oklch(98.6% 0.002 67.8)', 100: 'oklch(96% 0.002 17.2)', 200: 'oklch(92.2% 0.005 34.3)', 300: 'oklch(86.8% 0.007 39.5)', 400: 'oklch(71.4% 0.014 41.2)', 600: 'oklch(43.8% 0.017 39.3)', 700: 'oklch(36.7% 0.016 35.7)', 800: 'oklch(26.8% 0.011 36.5)', 900: 'oklch(21.4% 0.009 43.1)', 950: 'oklch(14.7% 0.004 49.3)',
-  }),
-]
-
-export function baseColorToVariables(base, opts) {
-  const mode = (opts && opts.mode) || 'light'
-  return { ...(mode === 'dark' ? base.darkVariables : base.variables) }
-}
-
-// ── Accent themes ────────────────────────────────────────────────────
-
-export const DEFAULT_ACCENT_THEME_ID = 'default'
-
-// ink = on-primary for hues where white text fails contrast on the fill.
-const lightAccent = (s, ink) => ({
-  '--color-ak-primary': s[600],
-  // Focus + glow follow the accent, mirroring the palette recipe
-  // (palettes: border-focus = ring||accent||primary, glow = primary).
-  // Without these the base theme's ink focus (#0b0b0b) and the
-  // utilities' indigo glow fallback (#818cf8) survive an accent swap.
-  '--color-ak-border-focus': s[600],
-  '--color-ak-glow-primary': s[600],
-  // Full hue parity with the palette layer. Accents apply ON TOP of a
-  // palette, so every primary-hue-derived token a palette sets must be
-  // overridden here or the palette's hue bleeds through (green gradients
-  // under an indigo accent). Neutral/surface tokens stay with the base
-  // dial on purpose.
-  '--color-ak-primary-50': s[50], '--color-ak-primary-100': s[100],
-  '--color-ak-primary-200': s[200], '--color-ak-primary-300': s[300],
-  '--color-ak-primary-400': s[400], '--color-ak-primary-500': s[500],
-  '--color-ak-primary-600': s[600], '--color-ak-primary-700': s[700],
-  '--color-ak-primary-800': s[800], '--color-ak-primary-900': s[900],
-  '--color-ak-primary-950': s[950],
-  '--color-ak-accent': s[600],
-  '--color-ak-on-accent': ink ? '#1c1917' : '#ffffff',
-  '--color-ak-accent-soft': s[100],
-  '--color-ak-primary-selection': s[600],
-  '--color-ak-on-primary-selection': ink ? '#1c1917' : '#ffffff',
-  '--color-ak-primary-container-emphasis': s[200],
-  '--color-ak-text-link': ink ? s[700] : s[600],
-  '--color-ak-hero-accent': s[600],
-  '--color-ak-gradient-start': s[400],
-  '--color-ak-gradient-mid': s[600],
-  '--color-ak-gradient-end': s[800],
-  '--gradient-ak-primary': `linear-gradient(135deg, ${s[400]} 0%, ${s[600]} 52%, ${s[800]} 100%)`,
-  '--gradient-ak-primary-hover': `linear-gradient(135deg, ${s[500]} 0%, ${s[700]} 48%, ${s[900]} 100%)`,
-  '--color-ak-primary-hover': s[700],
-  '--color-ak-primary-active': s[800],
-  '--color-ak-on-primary': ink ? '#1c1917' : '#ffffff',
-  '--color-ak-primary-subtle': s[50],
-  '--color-ak-primary-subtle-hover': s[100],
-  '--color-ak-primary-container': s[100],
-  '--color-ak-on-primary-container': s[900],
-  '--color-ak-primary-outline': s[400],
-  '--color-ak-selection-ink': s[700],
-})
-
-// Dark: brighter 500 fill, darkened hover/active states (contrast-stable
-// with the same on-primary), hue-tinted dark containers, light readable inks.
-const darkAccent = (s, ink) => ({
-  '--color-ak-primary': s[500],
-  '--color-ak-primary-hover': s[600],
-  '--color-ak-primary-active': s[700],
-  '--color-ak-border-focus': s[500],
-  '--color-ak-glow-primary': s[400],
-  // Dark parity — same token set, dark mappings (fills brighten, deeps
-  // carry containers). See the light builder for why parity matters.
-  '--color-ak-primary-50': s[950], '--color-ak-primary-100': s[900],
-  '--color-ak-primary-200': s[800], '--color-ak-primary-300': s[700],
-  '--color-ak-primary-400': s[600], '--color-ak-primary-500': s[500],
-  '--color-ak-primary-600': s[400], '--color-ak-primary-700': s[300],
-  '--color-ak-primary-800': s[200], '--color-ak-primary-900': s[100],
-  '--color-ak-primary-950': s[50],
-  '--color-ak-accent': s[500],
-  '--color-ak-on-accent': ink ? '#1c1917' : '#ffffff',
-  '--color-ak-accent-soft': s[900],
-  '--color-ak-primary-selection': s[500],
-  '--color-ak-on-primary-selection': ink ? '#1c1917' : '#ffffff',
-  '--color-ak-primary-container-emphasis': s[800],
-  '--color-ak-text-link': s[400],
-  '--color-ak-hero-accent': s[500],
-  '--color-ak-gradient-start': s[400],
-  '--color-ak-gradient-mid': s[500],
-  '--color-ak-gradient-end': s[700],
-  '--gradient-ak-primary': `linear-gradient(135deg, ${s[400]} 0%, ${s[500]} 52%, ${s[700]} 100%)`,
-  '--gradient-ak-primary-hover': `linear-gradient(135deg, ${s[300]} 0%, ${s[400]} 48%, ${s[600]} 100%)`,
-  '--color-ak-on-primary': ink ? '#1c1917' : '#ffffff',
-  '--color-ak-primary-subtle': s[900],
-  '--color-ak-primary-subtle-hover': s[800],
-  '--color-ak-primary-container': s[900],
-  '--color-ak-on-primary-container': s[100],
-  '--color-ak-primary-outline': s[700],
-  '--color-ak-selection-ink': s[400],
-})
-
-const acc = (id, name, scale, ink) => ({
-  id,
-  name,
-  description: '',
-  variables: lightAccent(scale, ink),
-  darkVariables: darkAccent(scale, ink),
-  swatch: scale[600],
-})
-
-export const ACCENT_THEMES = [
-  { id: 'default', name: 'Default', description: 'The active palette’s own accent.', variables: {}, darkVariables: {}, swatch: '#a3a3a3' },
-  acc('blue', 'Blue', { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554' }),
-  acc('indigo', 'Indigo', { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b' }),
-  acc('violet', 'Violet', { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065' }),
-  acc('purple', 'Purple', { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764' }),
-  acc('pink', 'Pink', { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724' }),
-  acc('rose', 'Rose', { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519' }),
-  acc('red', 'Red', { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a' }),
-  acc('orange', 'Orange', { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407' }),
-  acc('amber', 'Amber', { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03' }, true),
-  acc('emerald', 'Emerald', { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b9', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' }),
-  acc('teal', 'Teal', { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e' }),
-  acc('cyan', 'Cyan', { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344' }),
-]
-
-export function accentThemeToVariables(theme, opts) {
-  const mode = (opts && opts.mode) || 'light'
-  return { ...(mode === 'dark' ? theme.darkVariables : theme.variables) }
-}
-
-// ── Radius (the corrected knob) ──────────────────────────────────────
-
-/**
- * Emit the FULL derived radius set for a knob value. Container-level
- * overrides of --ak-radius alone do nothing: CSS substitutes the var()
- * chains where they are DEFINED (:root), so descendants inherit resolved
- * values. Spreading this record re-declares the whole chain at the
- * container. Multipliers mirror the SDK theme exactly.
- */
-export function radiusToVariables(value) {
-  const rem = typeof value === 'number' ? value : parseFloat(value)
-  // PILL MODE (Extra Round): controls go full-pill via CSS's self-clamping
-  // 9999px (border-radius larger than the box clamps to a perfect pill),
-  // while CONTAINER-tier tokens cap at tasteful roundness so cards and
-  // panels never become blobs.
-  if (rem >= 62) {
-    return {
-      '--ak-radius': '9999px',
-      '--radius-ak-xs': '0.375rem',
-      '--radius-ak-sm': '0.5rem',
-      '--radius-ak-md': '9999px',
-      '--radius-ak-lg': '1.25rem',
-      '--radius-ak-xl': '1.5rem',
-      '--radius-ak-2xl': '2rem',
-      '--radius-ak-3xl': '2.5rem',
-      '--radius-ak-input': '9999px',
-      '--radius-ak-control-sm': '0.625rem',
-    }
-  }
-  const step = (m) => `${+(rem * m).toFixed(4)}rem`
-  return {
-    '--ak-radius': `${rem}rem`,
-    '--radius-ak-xs': step(0.25),
-    '--radius-ak-sm': step(0.5),
-    '--radius-ak-md': step(1),
-    '--radius-ak-lg': step(1.5),
-    '--radius-ak-xl': step(2),
-    '--radius-ak-2xl': step(3),
-    '--radius-ak-3xl': step(4),
-    '--radius-ak-input': step(1.25),
-    '--radius-ak-control-sm': `${Math.min(rem, 0.625)}rem`,
-  }
-}
-
-// ── Type scales ────────────────────────────────────────────────────
-
-export const DEFAULT_TYPE_SCALE_ID = 'default'
-
-/**
- * TYPE_SCALES — true modular scales, named by their musical interval ratio.
- * The base and everything below it are PINNED (16px body floor, UI-legible
- * smalls); the ratio drives every step ABOVE the base via fixed exponents,
- * so the dropdown is strictly monotonic: each option renders every heading
- * step larger than the option before it. Unitless leadings adapt free.
- */
-// Default small sizes — they keep these PROPORTIONS to the base and lift
-// with it (multiplying by the same gentle base lift keeps every token
-// monotonic across the dropdown; dividing by the ratio made smalls shrink
-// as scales grew).
-const SMALL_DEFAULTS = {
-  '--text-ak-2xs': 0.6875,
-  '--text-ak-xs': 0.75,
-  '--text-ak-xs_5': 0.8125,
-  '--text-ak-sm': 0.875,
-  '--text-ak-sm_5': 0.9375,
-}
-
-// Exponent of the ratio applied per token above the base (anchored at 16px).
-const STEP_EXPONENTS = {
-  '--text-ak-lg': 1, '--text-ak-xl': 1.5, '--text-ak-xl_5': 1.75,
-  '--text-ak-2xl': 2, '--text-ak-2xl_5': 2.25, '--text-ak-3xl': 2.75,
-  '--text-ak-4xl': 3.25, '--text-ak-4xl_5': 3.5, '--text-ak-5xl': 3.75,
-  '--text-ak-6xl': 4.25, '--text-ak-6xl_5': 4.5, '--text-ak-7xl': 4.75,
-  '--text-ak-7xl_5': 5, '--text-ak-8xl': 5.25, '--text-ak-9xl': 5.75,
-  '--text-ak-10xl': 6,
-}
-
-function modularRamp(ratio) {
-  // The base itself gets a GENTLE ratio lift (exp 0.25): 16px floor at
-  // Default, ~18px at Golden — so body copy, default buttons and links all
-  // breathe with the scale instead of only the display steps.
-  const lift = Math.pow(ratio, 0.25)
-  const out = { '--text-ak-base': `${+lift.toFixed(4)}rem` }
-  for (const token of Object.keys(SMALL_DEFAULTS)) {
-    out[token] = `${+(SMALL_DEFAULTS[token] * lift).toFixed(4)}rem`
-  }
-  for (const token of Object.keys(STEP_EXPONENTS)) {
-    out[token] = `${+(Math.pow(ratio, STEP_EXPONENTS[token])).toFixed(4)}rem`
-  }
-  return out
-}
-
-export const TYPE_SCALES = [
-  {
-    id: 'default', name: 'Default', description: 'The authored SDK ramp.',
-    variables: {},
-  },
-  {
-    id: 'major-third', name: 'Major Third', description: '1.250 — compact, businesslike hierarchy.',
-    variables: modularRamp(1.25),
-  },
-  {
-    id: 'perfect-fourth', name: 'Perfect Fourth', description: '1.333 — the classic editorial workhorse.',
-    variables: modularRamp(1.333),
-  },
-  {
-    id: 'augmented-fourth', name: 'Augmented Fourth', description: '1.414 — assertive, modern contrast.',
-    variables: modularRamp(1.414),
-  },
-  {
-    id: 'perfect-fifth', name: 'Perfect Fifth', description: '1.500 — bold, display-forward hierarchy.',
-    variables: modularRamp(1.5),
-  },
-  {
-    id: 'golden', name: 'Golden Ratio', description: '1.618 — maximum drama for heroes and landings.',
-    variables: modularRamp(1.618),
-  },
-]
-
-export function typeScaleToVariables(scale) {
-  return { ...scale.variables }
-}
+/**
+ * astralkit/presets — dials.
+ *
+ * BASE_COLORS  — the neutral scale under surfaces/borders/text.
+ * ACCENT_THEMES — the brand accent hue over the full primary role family.
+ * TYPE_SCALES  — authored size hierarchies (one dial, whole ramp).
+ * radiusToVariables — the full derived radius set (the :root substitution rule).
+ *
+ * Every color dial is MODE-AWARE: pass { mode: 'dark' } and you get the
+ * authored dark mapping, following the SDK's own dark language — near-black
+ * tinted surface ramps, WHITE-ALPHA hovers/borders (never gray hexes), text
+ * from the scale's light end, accents at 500 with darkened states. Built to
+ * match [data-theme="dark"] in astralkit-theme.css and the dark palettes.
+ */
+
+// WCAG relative-luminance contrast — the palette layer's vivid-first rule
+// needs it here too (selection-ink: brand color when it clears 4.5:1 on the
+// tint, else the darker step).
+const _lum = (hex) => {
+  const h = hex.replace('#', '')
+  const f = (c) => { c /= 255; return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4) }
+  return 0.2126 * f(parseInt(h.slice(0, 2), 16)) + 0.7152 * f(parseInt(h.slice(2, 4), 16)) + 0.0722 * f(parseInt(h.slice(4, 6), 16))
+}
+const _contrast = (a, b) => {
+  const [l1, l2] = [_lum(a), _lum(b)].sort((x, y) => y - x)
+  return (l1 + 0.05) / (l2 + 0.05)
+}
+const vividInk = (vivid, fallback, tint) => (_contrast(vivid, tint) >= 4.5 ? vivid : fallback)
+
+// ── Base colors ──────────────────────────────────────────────────────
+
+export const DEFAULT_BASE_COLOR_ID = 'neutral'
+
+const lightBase = (s) => ({
+  // Family rule (2026-08-24): cards stay WHITE; the tint lives in the canvas
+  // and panels. Ladder sits one step lighter than the original mapping,
+  // border-strong is the input-border role (300), text is the 900 ink step.
+  '--color-ak-bg': s[50],
+  '--color-ak-surface': '#ffffff',
+  '--color-ak-surface-2': s[50],
+  '--color-ak-surface-3': s[100],
+  '--color-ak-surface-4': s[200],
+  '--color-ak-hover': s[100],
+  '--color-ak-active': s[200],
+  '--color-ak-border': s[200],
+  '--color-ak-border-subtle': s[100],
+  '--color-ak-border-strong': s[300],
+  '--color-ak-text': s[900],
+  '--color-ak-text-secondary': s[600],
+  '--color-ak-text-muted': s[400],
+  '--color-ak-on-surface': s[900],
+  '--color-ak-on-surface-variant': s[600],
+})
+
+// Dark: tinted near-black ramp from the scale's deep end; hovers/actives and
+// borders stay white-alpha exactly like the SDK's own dark block.
+const darkBase = (s) => ({
+  '--color-ak-bg': s[950],
+  '--color-ak-surface': s[900],
+  '--color-ak-surface-2': s[800],
+  '--color-ak-surface-3': s[800],
+  '--color-ak-surface-4': s[700],
+  '--color-ak-hover': 'rgba(255,255,255,0.04)',
+  '--color-ak-active': 'rgba(255,255,255,0.08)',
+  '--color-ak-border': 'rgba(255,255,255,0.10)',
+  '--color-ak-border-subtle': 'rgba(255,255,255,0.06)',
+  '--color-ak-border-strong': 'rgba(255,255,255,0.16)',
+  '--color-ak-text': s[50],
+  '--color-ak-text-secondary': s[400],
+  '--color-ak-text-muted': s[600],
+  '--color-ak-on-surface': s[50],
+  '--color-ak-on-surface-variant': s[400],
+})
+
+const base = (id, name, description, scale) => ({
+  id,
+  name,
+  description,
+  variables: lightBase(scale),
+  darkVariables: darkBase(scale),
+  swatch: scale[600],
+})
+
+export const BASE_COLORS = [
+  { id: 'neutral', name: 'Neutral', description: 'The SDK default neutral scale.', variables: {}, darkVariables: {}, swatch: '#a3a3a3' },
+  base('stone', 'Stone', 'Warm gray — earthy, editorial.', {
+    50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09',
+  }),
+  base('zinc', 'Zinc', 'Cool gray — technical, precise.', {
+    50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b',
+  }),
+  base('mauve', 'Mauve', 'Violet-tinted neutral.', {
+    50: 'oklch(98.5% 0 0)', 100: 'oklch(96% 0.003 325.6)', 200: 'oklch(92.2% 0.005 325.62)', 300: 'oklch(86.5% 0.012 325.68)', 400: 'oklch(71.1% 0.019 323.02)', 600: 'oklch(43.5% 0.029 321.78)', 700: 'oklch(36.4% 0.029 323.89)', 800: 'oklch(26.3% 0.024 320.12)', 900: 'oklch(21.2% 0.019 322.12)', 950: 'oklch(14.5% 0.008 326)',
+  }),
+  base('olive', 'Olive', 'Green-tinted neutral.', {
+    50: 'oklch(98.8% 0.003 106.5)', 100: 'oklch(96.6% 0.005 106.5)', 200: 'oklch(93% 0.007 106.5)', 300: 'oklch(88% 0.011 106.6)', 400: 'oklch(73.7% 0.021 106.9)', 600: 'oklch(46.6% 0.025 107.3)', 700: 'oklch(39.4% 0.023 107.4)', 800: 'oklch(28.6% 0.016 107.4)', 900: 'oklch(22.8% 0.013 107.4)', 950: 'oklch(15.3% 0.006 107.1)',
+  }),
+  base('mist', 'Mist', 'Blue-tinted neutral.', {
+    50: 'oklch(98.7% 0.002 197.1)', 100: 'oklch(96.3% 0.002 197.1)', 200: 'oklch(92.5% 0.005 214.3)', 300: 'oklch(87.2% 0.007 219.6)', 400: 'oklch(72.3% 0.014 214.4)', 600: 'oklch(45% 0.017 213.2)', 700: 'oklch(37.8% 0.015 216)', 800: 'oklch(27.5% 0.011 216.9)', 900: 'oklch(21.8% 0.008 223.9)', 950: 'oklch(14.8% 0.004 228.8)',
+  }),
+  base('taupe', 'Taupe', 'Brown-tinted neutral.', {
+    50: 'oklch(98.6% 0.002 67.8)', 100: 'oklch(96% 0.002 17.2)', 200: 'oklch(92.2% 0.005 34.3)', 300: 'oklch(86.8% 0.007 39.5)', 400: 'oklch(71.4% 0.014 41.2)', 600: 'oklch(43.8% 0.017 39.3)', 700: 'oklch(36.7% 0.016 35.7)', 800: 'oklch(26.8% 0.011 36.5)', 900: 'oklch(21.4% 0.009 43.1)', 950: 'oklch(14.7% 0.004 49.3)',
+  }),
+]
+
+export function baseColorToVariables(base, opts) {
+  const mode = (opts && opts.mode) || 'light'
+  return { ...(mode === 'dark' ? base.darkVariables : base.variables) }
+}
+
+// ── Accent themes ────────────────────────────────────────────────────
+
+export const DEFAULT_ACCENT_THEME_ID = 'default'
+
+// ink = on-primary for hues where white text fails contrast on the fill.
+const lightAccent = (s, ink) => ({
+  '--color-ak-primary': s[600],
+  // Focus + glow follow the accent, mirroring the palette recipe
+  // (palettes: border-focus = ring||accent||primary, glow = primary).
+  // Without these the base theme's ink focus (#0b0b0b) and the
+  // utilities' indigo glow fallback (#818cf8) survive an accent swap.
+  '--color-ak-border-focus': s[600],
+  '--color-ak-glow-primary': s[600],
+  // Full hue parity with the palette layer. Accents apply ON TOP of a
+  // palette, so every primary-hue-derived token a palette sets must be
+  // overridden here or the palette's hue bleeds through (green gradients
+  // under an indigo accent). Neutral/surface tokens stay with the base
+  // dial on purpose.
+  '--color-ak-primary-50': s[50], '--color-ak-primary-100': s[100],
+  '--color-ak-primary-200': s[200], '--color-ak-primary-300': s[300],
+  '--color-ak-primary-400': s[400], '--color-ak-primary-500': s[500],
+  '--color-ak-primary-600': s[600], '--color-ak-primary-700': s[700],
+  '--color-ak-primary-800': s[800], '--color-ak-primary-900': s[900],
+  '--color-ak-primary-950': s[950],
+  '--color-ak-accent': s[600],
+  '--color-ak-on-accent': ink ? '#1c1917' : '#ffffff',
+  '--color-ak-accent-soft': s[100],
+  '--color-ak-primary-selection': s[600],
+  '--color-ak-on-primary-selection': ink ? '#1c1917' : '#ffffff',
+  '--color-ak-primary-container-emphasis': s[200],
+  '--color-ak-text-link': ink ? s[700] : s[600],
+  '--color-ak-hero-accent': s[600],
+  '--color-ak-gradient-start': s[400],
+  '--color-ak-gradient-mid': s[600],
+  '--color-ak-gradient-end': s[800],
+  '--gradient-ak-primary': `linear-gradient(135deg, ${s[400]} 0%, ${s[600]} 52%, ${s[800]} 100%)`,
+  '--gradient-ak-primary-hover': `linear-gradient(135deg, ${s[500]} 0%, ${s[700]} 48%, ${s[900]} 100%)`,
+  '--color-ak-primary-hover': s[700],
+  '--color-ak-primary-active': s[800],
+  '--color-ak-on-primary': ink ? '#1c1917' : '#ffffff',
+  // Palette parity: the tint sits at the 100 step (astral's #ede7ff is a
+  // 100-level tint, not a 50 wash) and the ink on it is the VIVID 600 when
+  // it clears 4.5:1, falling back to 700.
+  '--color-ak-primary-subtle': s[100],
+  '--color-ak-primary-subtle-hover': s[200],
+  '--color-ak-primary-container': s[100],
+  '--color-ak-on-primary-container': s[900],
+  '--color-ak-primary-outline': s[400],
+  '--color-ak-selection-ink': vividInk(s[600], s[700], s[100]),
+})
+
+// Dark: brighter 500 fill, darkened hover/active states (contrast-stable
+// with the same on-primary), hue-tinted dark containers, light readable inks.
+const darkAccent = (s, ink) => ({
+  // Non-ink accents wear WHITE text: the bright 500 fill fails 4.5:1 on
+  // nearly every hue, so those fills sit at 600 (the light fill — passes by
+  // construction). Ink accents keep the bright 500 with ink text.
+  '--color-ak-primary': ink ? s[500] : s[600],
+  '--color-ak-primary-hover': ink ? s[600] : s[700],
+  '--color-ak-primary-active': ink ? s[700] : s[800],
+  '--color-ak-border-focus': s[500],
+  '--color-ak-glow-primary': s[400],
+  // Dark parity — same token set, dark mappings (fills brighten, deeps
+  // carry containers). See the light builder for why parity matters.
+  '--color-ak-primary-50': s[950], '--color-ak-primary-100': s[900],
+  '--color-ak-primary-200': s[800], '--color-ak-primary-300': s[700],
+  '--color-ak-primary-400': s[600], '--color-ak-primary-500': s[500],
+  '--color-ak-primary-600': s[400], '--color-ak-primary-700': s[300],
+  '--color-ak-primary-800': s[200], '--color-ak-primary-900': s[100],
+  '--color-ak-primary-950': s[50],
+  '--color-ak-accent': ink ? s[500] : s[600],
+  '--color-ak-on-accent': ink ? '#1c1917' : '#ffffff',
+  '--color-ak-accent-soft': s[900],
+  '--color-ak-primary-selection': ink ? s[500] : s[600],
+  '--color-ak-on-primary-selection': ink ? '#1c1917' : '#ffffff',
+  '--color-ak-primary-container-emphasis': s[800],
+  '--color-ak-text-link': s[400],
+  '--color-ak-hero-accent': s[500],
+  '--color-ak-gradient-start': s[400],
+  '--color-ak-gradient-mid': s[500],
+  '--color-ak-gradient-end': s[700],
+  '--gradient-ak-primary': `linear-gradient(135deg, ${s[400]} 0%, ${s[500]} 52%, ${s[700]} 100%)`,
+  '--gradient-ak-primary-hover': `linear-gradient(135deg, ${s[300]} 0%, ${s[400]} 48%, ${s[600]} 100%)`,
+  '--color-ak-on-primary': ink ? '#1c1917' : '#ffffff',
+  '--color-ak-primary-subtle': s[900],
+  '--color-ak-primary-subtle-hover': s[800],
+  '--color-ak-primary-container': s[900],
+  '--color-ak-on-primary-container': s[100],
+  '--color-ak-primary-outline': s[700],
+  // 300: the 400 step fails 4.5:1 on the 900 tint
+  '--color-ak-selection-ink': s[300],
+})
+
+const acc = (id, name, scale, ink) => ({
+  id,
+  name,
+  description: '',
+  variables: lightAccent(scale, ink),
+  darkVariables: darkAccent(scale, ink),
+  swatch: scale[600],
+})
+
+export const ACCENT_THEMES = [
+  { id: 'default', name: 'Default', description: 'The active palette’s own accent.', variables: {}, darkVariables: {}, swatch: '#a3a3a3' },
+  acc('blue', 'Blue', { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554' }),
+  acc('indigo', 'Indigo', { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b' }),
+  acc('violet', 'Violet', { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065' }),
+  acc('purple', 'Purple', { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764' }),
+  acc('pink', 'Pink', { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724' }),
+  acc('rose', 'Rose', { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519' }),
+  acc('red', 'Red', { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a' }),
+  acc('orange', 'Orange', { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#CA4C0A', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407' }),
+  acc('amber', 'Amber', { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#B16105', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03' }),
+  acc('emerald', 'Emerald', { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b9', 400: '#34d399', 500: '#10b981', 600: '#05875F', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' }),
+  acc('teal', 'Teal', { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0C8479', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e' }),
+  acc('cyan', 'Cyan', { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#07819E', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344' }),
+]
+
+export function accentThemeToVariables(theme, opts) {
+  const mode = (opts && opts.mode) || 'light'
+  return { ...(mode === 'dark' ? theme.darkVariables : theme.variables) }
+}
+
+// ── Radius (the corrected knob) ──────────────────────────────────────
+
+/**
+ * Emit the FULL derived radius set for a knob value. Container-level
+ * overrides of --ak-radius alone do nothing: CSS substitutes the var()
+ * chains where they are DEFINED (:root), so descendants inherit resolved
+ * values. Spreading this record re-declares the whole chain at the
+ * container. Multipliers mirror the SDK theme exactly.
+ */
+export function radiusToVariables(value) {
+  const rem = typeof value === 'number' ? value : parseFloat(value)
+  // PILL MODE (Extra Round): controls go full-pill via CSS's self-clamping
+  // 9999px (border-radius larger than the box clamps to a perfect pill),
+  // while CONTAINER-tier tokens cap at tasteful roundness so cards and
+  // panels never become blobs.
+  if (rem >= 62) {
+    // Extra Round, tamed (Fred, 2026-08-24): the old full-pill 9999px turned
+    // md-radius tiles into circles and textareas into capsules. Generous,
+    // BOUNDED roundness instead — clearly rounder than every other stop,
+    // never a blob.
+    return {
+      '--ak-radius': '1.25rem',
+      '--radius-ak-xs': '0.5rem',
+      '--radius-ak-sm': '0.75rem',
+      '--radius-ak-md': '1rem',
+      '--radius-ak-lg': '1.5rem',
+      '--radius-ak-xl': '1.75rem',
+      '--radius-ak-2xl': '2.25rem',
+      '--radius-ak-3xl': '2.75rem',
+      '--radius-ak-input': '1.25rem',
+      '--radius-ak-control-sm': '0.875rem',
+    }
+  }
+  const step = (m) => `${+(rem * m).toFixed(4)}rem`
+  return {
+    '--ak-radius': `${rem}rem`,
+    '--radius-ak-xs': step(0.25),
+    '--radius-ak-sm': step(0.5),
+    '--radius-ak-md': step(1),
+    '--radius-ak-lg': step(1.5),
+    '--radius-ak-xl': step(2),
+    '--radius-ak-2xl': step(3),
+    '--radius-ak-3xl': step(4),
+    '--radius-ak-input': step(1.25),
+    '--radius-ak-control-sm': `${Math.min(rem, 0.625)}rem`,
+  }
+}
+
+// ── Type scales ────────────────────────────────────────────────────
+
+export const DEFAULT_TYPE_SCALE_ID = 'default'
+
+/**
+ * TYPE_SCALES — true modular scales, named by their musical interval ratio.
+ * The base and everything below it are PINNED (16px body floor, UI-legible
+ * smalls); the ratio drives every step ABOVE the base via fixed exponents,
+ * so the dropdown is strictly monotonic: each option renders every heading
+ * step larger than the option before it. Unitless leadings adapt free.
+ */
+// Default small sizes — they keep these PROPORTIONS to the base and lift
+// with it (multiplying by the same gentle base lift keeps every token
+// monotonic across the dropdown; dividing by the ratio made smalls shrink
+// as scales grew).
+const SMALL_DEFAULTS = {
+  '--text-ak-2xs': 0.6875,
+  '--text-ak-xs': 0.75,
+  '--text-ak-xs_5': 0.8125,
+  '--text-ak-sm': 0.875,
+  '--text-ak-sm_5': 0.9375,
+}
+
+// Exponent of the ratio applied per token above the base (anchored at 16px).
+const STEP_EXPONENTS = {
+  '--text-ak-lg': 1, '--text-ak-xl': 1.5, '--text-ak-xl_5': 1.75,
+  '--text-ak-2xl': 2, '--text-ak-2xl_5': 2.25, '--text-ak-3xl': 2.75,
+  '--text-ak-4xl': 3.25, '--text-ak-4xl_5': 3.5, '--text-ak-5xl': 3.75,
+  '--text-ak-6xl': 4.25, '--text-ak-6xl_5': 4.5, '--text-ak-7xl': 4.75,
+  '--text-ak-7xl_5': 5, '--text-ak-8xl': 5.25, '--text-ak-9xl': 5.75,
+  '--text-ak-10xl': 6,
+}
+
+function modularRamp(ratio) {
+  // The base itself gets a GENTLE ratio lift (exp 0.25): 16px floor at
+  // Default, ~18px at Golden — so body copy, default buttons and links all
+  // breathe with the scale instead of only the display steps.
+  const lift = Math.pow(ratio, 0.25)
+  const out = { '--text-ak-base': `${+lift.toFixed(4)}rem` }
+  for (const token of Object.keys(SMALL_DEFAULTS)) {
+    out[token] = `${+(SMALL_DEFAULTS[token] * lift).toFixed(4)}rem`
+  }
+  for (const token of Object.keys(STEP_EXPONENTS)) {
+    out[token] = `${+(Math.pow(ratio, STEP_EXPONENTS[token])).toFixed(4)}rem`
+  }
+  // Fluid steps pin to the scale's static sizes: a chosen scale should move
+  // EVERY size on the page (fluid-typed components included), trading the
+  // viewport ramp for scale fidelity while the dial is active.
+  for (const step of ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl']) {
+    out[`--text-ak-fl-${step}`] = `var(--text-ak-${step})`
+  }
+  return out
+}
+
+export const TYPE_SCALES = [
+  {
+    id: 'default', name: 'Default', description: 'The authored SDK ramp.',
+    variables: {},
+  },
+  {
+    id: 'major-third', name: 'Major Third', description: '1.250 — compact, businesslike hierarchy.',
+    variables: modularRamp(1.25),
+  },
+  {
+    id: 'perfect-fourth', name: 'Perfect Fourth', description: '1.333 — the classic editorial workhorse.',
+    variables: modularRamp(1.333),
+  },
+  {
+    id: 'augmented-fourth', name: 'Augmented Fourth', description: '1.414 — assertive, modern contrast.',
+    variables: modularRamp(1.414),
+  },
+  {
+    id: 'perfect-fifth', name: 'Perfect Fifth', description: '1.500 — bold, display-forward hierarchy.',
+    variables: modularRamp(1.5),
+  },
+  {
+    id: 'golden', name: 'Golden Ratio', description: '1.618 — maximum drama for heroes and landings.',
+    variables: modularRamp(1.618),
+  },
+]
+
+export function typeScaleToVariables(scale) {
+  return { ...scale.variables }
+}