astralkit 0.6.0 → 0.7.0

package/lib/presets/dials.js

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

package/lib/presets/font-pairings.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Curated font pairings — the AstralKit answer to shadcn's 26-font buffet.
+ *
+ * A pairing is not two font names: it is a MINIATURE TYPE SYSTEM — per-role
+ * family AND weight, balanced by hand. Swapping families without weight
+ * compensation always looks wrong (Space Grotesk 500 reads lighter than
+ * Inter 500), which is exactly why this is authored, never parametric.
+ *
+ * Roles (consumed via SDK classes ak-font-heading / -body / -ui / -label):
+ *   heading — titles, section heads, KPIs
+ *   body    — descriptions, paragraphs, links
+ *   ui      — buttons, inputs, menus, tabs
+ *   label   — overlines, badges, table headers
+ * The typical split: the DISPLAY family carries heading + label, the BODY
+ * family carries body + ui — but each pairing decides. Links always follow
+ * body (a separate link font is almost never good typography).
+ */
+export type FontPairingId = 'inter' | 'grotesk' | 'editorial' | 'humanist' | 'soft' | 'terminal';
+type FontVariableName = '--font-ak-sans' | '--font-ak-heading' | '--font-ak-ui' | '--font-ak-label' | '--ak-weight-heading' | '--ak-weight-body' | '--ak-weight-ui' | '--ak-weight-label' | '--ak-tracking-label';
+export interface FontPairing {
+    id: FontPairingId;
+    name: string;
+    description: string;
+    variables: Partial<Record<FontVariableName, string>>;
+}
+export declare const DEFAULT_FONT_PAIRING_ID: FontPairingId;
+export declare const FONT_PAIRINGS: FontPairing[];
+export declare function fontPairingToVariables(pairing: FontPairing): Record<string, string>;
+export {};

package/lib/presets/font-pairings.js

@@ -0,0 +1,123 @@
+/**
+ * Curated font pairings — the AstralKit answer to shadcn's 26-font buffet.
+ *
+ * A pairing is not two font names: it is a MINIATURE TYPE SYSTEM — per-role
+ * family AND weight, balanced by hand. Swapping families without weight
+ * compensation always looks wrong (Space Grotesk 500 reads lighter than
+ * Inter 500), which is exactly why this is authored, never parametric.
+ *
+ * Roles (consumed via SDK classes ak-font-heading / -body / -ui / -label):
+ *   heading — titles, section heads, KPIs
+ *   body    — descriptions, paragraphs, links
+ *   ui      — buttons, inputs, menus, tabs
+ *   label   — overlines, badges, table headers
+ * The typical split: the DISPLAY family carries heading + label, the BODY
+ * family carries body + ui — but each pairing decides. Links always follow
+ * body (a separate link font is almost never good typography).
+ */
+export const DEFAULT_FONT_PAIRING_ID = 'inter';
+const SANS = "system-ui, -apple-system, sans-serif";
+const INTER = `'Inter', ${SANS}`;
+const GROTESK = `'Space Grotesk', ${SANS}`;
+const DM = `'DM Sans', ${SANS}`;
+const OUTFIT = `'Outfit', ${SANS}`;
+const PLAYFAIR = `'Playfair Display', Georgia, serif`;
+const JBMONO = `'JetBrains Mono', ui-monospace, monospace`;
+export const FONT_PAIRINGS = [
+    {
+        id: 'inter',
+        name: 'Inter',
+        description: 'The house default — one family, weight does the hierarchy.',
+        variables: {
+            '--font-ak-sans': INTER,
+            '--font-ak-heading': INTER,
+            '--font-ak-ui': INTER,
+            '--font-ak-label': INTER,
+            '--ak-weight-heading': '600',
+            '--ak-weight-body': '400',
+            '--ak-weight-ui': '500',
+            '--ak-weight-label': '600',
+        },
+    },
+    {
+        id: 'grotesk',
+        name: 'Grotesk',
+        description: 'Space Grotesk display + UI over Inter body — technical, product-led. Weights bumped to compensate its light curve.',
+        variables: {
+            '--font-ak-sans': INTER,
+            '--font-ak-heading': GROTESK,
+            '--font-ak-ui': GROTESK,
+            '--font-ak-label': GROTESK,
+            '--ak-weight-heading': '700',
+            '--ak-weight-body': '400',
+            '--ak-weight-ui': '500',
+            '--ak-weight-label': '500',
+            '--ak-tracking-label': '0.04em',
+        },
+    },
+    {
+        id: 'editorial',
+        name: 'Editorial',
+        description: 'Playfair Display headlines over DM Sans everything else — magazine warmth.',
+        variables: {
+            '--font-ak-sans': DM,
+            '--font-ak-heading': PLAYFAIR,
+            '--font-ak-ui': DM,
+            '--font-ak-label': DM,
+            '--ak-weight-heading': '600',
+            '--ak-weight-body': '400',
+            '--ak-weight-ui': '500',
+            '--ak-weight-label': '700',
+            '--ak-tracking-label': '0.06em',
+        },
+    },
+    {
+        id: 'humanist',
+        name: 'Humanist',
+        description: 'DM Sans throughout — rounded and friendly; headings carry extra weight.',
+        variables: {
+            '--font-ak-sans': DM,
+            '--font-ak-heading': DM,
+            '--font-ak-ui': DM,
+            '--font-ak-label': DM,
+            '--ak-weight-heading': '700',
+            '--ak-weight-body': '400',
+            '--ak-weight-ui': '500',
+            '--ak-weight-label': '600',
+        },
+    },
+    {
+        id: 'soft',
+        name: 'Soft Display',
+        description: 'Outfit throughout — geometric softness for consumer products.',
+        variables: {
+            '--font-ak-sans': OUTFIT,
+            '--font-ak-heading': OUTFIT,
+            '--font-ak-ui': OUTFIT,
+            '--font-ak-label': OUTFIT,
+            '--ak-weight-heading': '600',
+            '--ak-weight-body': '400',
+            '--ak-weight-ui': '500',
+            '--ak-weight-label': '600',
+        },
+    },
+    {
+        id: 'terminal',
+        name: 'Terminal',
+        description: 'JetBrains Mono display + labels over Inter body and UI — dev-tool energy.',
+        variables: {
+            '--font-ak-sans': INTER,
+            '--font-ak-heading': JBMONO,
+            '--font-ak-ui': INTER,
+            '--font-ak-label': JBMONO,
+            '--ak-weight-heading': '600',
+            '--ak-weight-body': '400',
+            '--ak-weight-ui': '500',
+            '--ak-weight-label': '500',
+            '--ak-tracking-label': '0',
+        },
+    },
+];
+export function fontPairingToVariables(pairing) {
+    return { ...pairing.variables };
+}

package/lib/presets/fonts.d.ts

@@ -0,0 +1,16 @@
+export type FontGroup = 'sans' | 'mono' | 'serif'
+
+export interface LibraryFont {
+  id: string
+  name: string
+  group: FontGroup
+  minWeight: number
+  maxWeight: number
+  stack: string
+}
+
+export declare const FONT_LIBRARY: LibraryFont[]
+export declare const FONT_GROUPS: FontGroup[]
+export declare function getFont(id: string): LibraryFont | undefined
+export declare function fontWeights(font: LibraryFont): number[]
+export declare function clampWeight(font: LibraryFont, weight: number): number

package/lib/presets/fonts.js

@@ -0,0 +1,76 @@
+/**
+ * astralkit/presets — the font library.
+ *
+ * The full shadcn font roster (all 26), grouped sans / mono / serif exactly
+ * as their pickers group them, plus per-font weight ranges so a weight
+ * dropdown can offer only weights the font actually ships — the control
+ * shadcn does not have.
+ */
+
+const SANS_FALLBACK = 'system-ui, -apple-system, sans-serif'
+const SERIF_FALLBACK = 'Georgia, serif'
+const MONO_FALLBACK = 'ui-monospace, monospace'
+
+const f = (id, name, group, minWeight, maxWeight, fallback) => ({
+  id,
+  name,
+  group,
+  minWeight,
+  maxWeight,
+  stack: `'${name}', ${fallback}`,
+})
+
+export const FONT_LIBRARY = [
+  // Sans
+  f('geist', 'Geist', 'sans', 100, 900, SANS_FALLBACK),
+  f('inter', 'Inter', 'sans', 100, 900, SANS_FALLBACK),
+  f('noto-sans', 'Noto Sans', 'sans', 100, 900, SANS_FALLBACK),
+  f('nunito-sans', 'Nunito Sans', 'sans', 200, 900, SANS_FALLBACK),
+  f('figtree', 'Figtree', 'sans', 300, 900, SANS_FALLBACK),
+  f('roboto', 'Roboto', 'sans', 100, 900, SANS_FALLBACK),
+  f('raleway', 'Raleway', 'sans', 100, 900, SANS_FALLBACK),
+  f('dm-sans', 'DM Sans', 'sans', 100, 900, SANS_FALLBACK),
+  f('public-sans', 'Public Sans', 'sans', 100, 900, SANS_FALLBACK),
+  f('outfit', 'Outfit', 'sans', 100, 900, SANS_FALLBACK),
+  f('oxanium', 'Oxanium', 'sans', 200, 800, SANS_FALLBACK),
+  f('manrope', 'Manrope', 'sans', 200, 800, SANS_FALLBACK),
+  f('space-grotesk', 'Space Grotesk', 'sans', 300, 700, SANS_FALLBACK),
+  f('montserrat', 'Montserrat', 'sans', 100, 900, SANS_FALLBACK),
+  f('ibm-plex-sans', 'IBM Plex Sans', 'sans', 300, 700, SANS_FALLBACK),
+  f('source-sans-3', 'Source Sans 3', 'sans', 200, 900, SANS_FALLBACK),
+  f('instrument-sans', 'Instrument Sans', 'sans', 400, 700, SANS_FALLBACK),
+  // Mono
+  f('geist-mono', 'Geist Mono', 'mono', 100, 900, MONO_FALLBACK),
+  f('jetbrains-mono', 'JetBrains Mono', 'mono', 100, 800, MONO_FALLBACK),
+  // Serif
+  f('noto-serif', 'Noto Serif', 'serif', 100, 900, SERIF_FALLBACK),
+  f('roboto-slab', 'Roboto Slab', 'serif', 100, 900, SERIF_FALLBACK),
+  f('merriweather', 'Merriweather', 'serif', 300, 900, SERIF_FALLBACK),
+  f('lora', 'Lora', 'serif', 400, 700, SERIF_FALLBACK),
+  f('playfair-display', 'Playfair Display', 'serif', 400, 900, SERIF_FALLBACK),
+  f('eb-garamond', 'EB Garamond', 'serif', 400, 800, SERIF_FALLBACK),
+  f('instrument-serif', 'Instrument Serif', 'serif', 400, 400, SERIF_FALLBACK),
+]
+
+export const FONT_GROUPS = ['sans', 'mono', 'serif']
+
+export function getFont(id) {
+  return FONT_LIBRARY.find((font) => font.id === id)
+}
+
+/** Weights the font actually ships, in 100 steps, clamped to the UI-sane 300–900 band
+ *  (fonts whose whole range sits outside keep their own bounds). */
+export function fontWeights(font) {
+  const lo = Math.max(font.minWeight, 300)
+  const hi = Math.min(font.maxWeight, 900)
+  if (lo > hi) return [font.minWeight]
+  const out = []
+  for (let w = lo; w <= hi; w += 100) out.push(w)
+  return out
+}
+
+/** Nearest available weight when switching fonts keeps the user's intent. */
+export function clampWeight(font, weight) {
+  const weights = fontWeights(font)
+  return weights.reduce((best, w) => (Math.abs(w - weight) < Math.abs(best - weight) ? w : best), weights[0])
+}

package/lib/presets/index.d.ts

@@ -0,0 +1,7 @@
+export * from './theme-palettes'
+export * from './appearance-presets'
+export * from './font-pairings'
+export * from './chart-palettes'
+export * from './dials'
+export * from './fonts'
+export * from './materials'

package/lib/presets/index.js

@@ -0,0 +1,24 @@
+/**
+ * astralkit/presets — the single source of truth for every theming dial.
+ *
+ * One data model serves them all: the demo showcase bar, the Theme Builder,
+ * and (later) the MCP's list_themes / apply_theme. Every entry is
+ * { id, name, description, variables } where `variables` is a flat record of
+ * CSS custom properties — applying a preset is spreading those onto any
+ * container's style. Nothing here imports React or the DOM.
+ *
+ * Dials:
+ *   THEME_PALETTES     — 16 authored color palettes (+ dark handling)
+ *   FONT_PAIRINGS      — miniature type systems (per-role family + weight)
+ *   CHART_PALETTES     — authored 6-color series sets
+ *   RADIUS_OPTIONS     — the one-knob radius system's named stops
+ *   APPEARANCE_PRESETS — atmosphere layers (mesh, grain, neon, backlight)
+ */
+
+export * from './theme-palettes.js'
+export * from './appearance-presets.js'
+export * from './font-pairings.js'
+export * from './chart-palettes.js'
+export * from './dials.js'
+export * from './fonts.js'
+export * from './materials.js'

package/lib/presets/materials.d.ts

@@ -0,0 +1,15 @@
+export type MaterialId = 'soft' | 'flat' | 'glass' | 'brutal'
+
+export interface MaterialAppearance {
+  id: MaterialId
+  name: string
+  description: string
+  /** Suggested radius, applied only while the Radius dial is on Default. */
+  radius: string | null
+  variables: Record<string, string>
+  darkVariables: Record<string, string>
+}
+
+export declare const DEFAULT_MATERIAL_ID: MaterialId
+export declare const MATERIAL_APPEARANCES: MaterialAppearance[]
+export declare function materialToVariables(material: MaterialAppearance, opts?: { mode?: 'light' | 'dark' }): Record<string, string>