astralkit 0.5.0 → 0.7.0

package/lib/presets/appearance-presets.js

@@ -0,0 +1,102 @@
+export const DEFAULT_APPEARANCE_PRESET_ID = 'clean';
+export const APPEARANCE_PRESETS = [
+    {
+        id: 'clean',
+        name: 'Clean',
+        description: 'No ambient atmosphere. Keeps components border-led and quiet.',
+        variables: {
+            '--ak-effect-mesh-opacity': '0',
+            '--ak-effect-grain-opacity': '0',
+            '--ak-effect-grid-opacity': '0',
+            '--ak-effect-backlight-opacity': '0',
+            '--ak-effect-vignette-opacity': '0',
+            '--ak-effect-border-opacity': '0.55',
+            '--ak-effect-glow-opacity': '0.22',
+            '--ak-effect-border-speed': '8s',
+            '--ak-effect-spark-size': '34%',
+        },
+    },
+    {
+        id: 'soft-mesh',
+        name: 'Soft Mesh',
+        description: 'A calm radial mesh with light grain for premium product surfaces.',
+        variables: {
+            '--ak-effect-mesh-opacity': '0.18',
+            '--ak-effect-grain-opacity': '0.018',
+            '--ak-effect-grid-opacity': '0',
+            '--ak-effect-backlight-opacity': '0.08',
+            '--ak-effect-vignette-opacity': '0.035',
+            '--ak-effect-border-opacity': '0.62',
+            '--ak-effect-glow-opacity': '0.32',
+            '--ak-effect-border-speed': '9s',
+            '--ak-effect-spark-size': '32%',
+        },
+    },
+    {
+        id: 'neon-edge',
+        name: 'Neon Edge',
+        description: 'Restrained glow and animated edge energy for dark premium demos.',
+        variables: {
+            '--ak-effect-mesh-opacity': '0.12',
+            '--ak-effect-grain-opacity': '0.014',
+            '--ak-effect-grid-opacity': '0',
+            '--ak-effect-backlight-opacity': '0.14',
+            '--ak-effect-vignette-opacity': '0.06',
+            '--ak-effect-border-opacity': '0.92',
+            '--ak-effect-glow-opacity': '0.44',
+            '--ak-effect-border-speed': '6s',
+            '--ak-effect-spark-size': '24%',
+        },
+    },
+    {
+        id: 'cinematic-backlight',
+        name: 'Cinematic',
+        description: 'Large soft backlights and a faint vignette for hero-style staging.',
+        variables: {
+            '--ak-effect-mesh-opacity': '0.24',
+            '--ak-effect-grain-opacity': '0.022',
+            '--ak-effect-grid-opacity': '0',
+            '--ak-effect-backlight-opacity': '0.28',
+            '--ak-effect-vignette-opacity': '0.12',
+            '--ak-effect-border-opacity': '0.7',
+            '--ak-effect-glow-opacity': '0.5',
+            '--ak-effect-border-speed': '10s',
+            '--ak-effect-spark-size': '36%',
+        },
+    },
+    {
+        id: 'circuit-spark',
+        name: 'Circuit Spark',
+        description: 'Fine grid texture with faster comet borders for systems UI.',
+        variables: {
+            '--ak-effect-mesh-opacity': '0.15',
+            '--ak-effect-grain-opacity': '0.016',
+            '--ak-effect-grid-opacity': '0.12',
+            '--ak-effect-backlight-opacity': '0.16',
+            '--ak-effect-vignette-opacity': '0.08',
+            '--ak-effect-border-opacity': '1',
+            '--ak-effect-glow-opacity': '0.48',
+            '--ak-effect-border-speed': '4.8s',
+            '--ak-effect-spark-size': '18%',
+        },
+    },
+    {
+        id: 'portfolio-grain',
+        name: 'Portfolio Grain',
+        description: 'Editorial grain, muted backlight, and quiet texture.',
+        variables: {
+            '--ak-effect-mesh-opacity': '0.1',
+            '--ak-effect-grain-opacity': '0.055',
+            '--ak-effect-grid-opacity': '0',
+            '--ak-effect-backlight-opacity': '0.07',
+            '--ak-effect-vignette-opacity': '0.1',
+            '--ak-effect-border-opacity': '0.5',
+            '--ak-effect-glow-opacity': '0.28',
+            '--ak-effect-border-speed': '12s',
+            '--ak-effect-spark-size': '40%',
+        },
+    },
+];
+export function appearancePresetToVariables(preset) {
+    return preset.variables;
+}

package/lib/presets/chart-palettes.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Curated chart palettes — authored 6-color series sets driving the SDK's
+ * --color-ak-chart-1..6 slots at runtime. The default (Signal) is the SDK's
+ * Tableau-derived colorblind-safe set; the others are authored alternatives,
+ * sequenced so adjacent series stay distinguishable. Independent of the UI
+ * palette on purpose (the shadcn insight worth keeping: chart hues are a
+ * separate design decision from brand hues).
+ */
+export type ChartPaletteId = 'signal' | 'oceanic' | 'ember' | 'prism' | 'ink';
+type ChartVariableName = `--color-ak-chart-${1 | 2 | 3 | 4 | 5 | 6}`;
+export interface ChartPalette {
+    id: ChartPaletteId;
+    name: string;
+    description: string;
+    variables: Record<ChartVariableName, string>;
+    darkVariables?: Record<ChartVariableName, string>;
+}
+export declare const DEFAULT_CHART_PALETTE_ID: ChartPaletteId;
+export declare const CHART_PALETTES: ChartPalette[];
+export declare function chartPaletteToVariables(palette: ChartPalette, opts?: { mode?: 'light' | 'dark' }): Record<string, string>;
+export type RadiusOptionId = 'none' | 'small' | 'default' | 'large' | 'xl';
+export interface RadiusOption {
+    id: RadiusOptionId;
+    name: string;
+    value: string;
+}
+export declare const DEFAULT_RADIUS_OPTION_ID: RadiusOptionId;
+export declare const RADIUS_OPTIONS: RadiusOption[];
+export {};

package/lib/presets/chart-palettes.js

@@ -0,0 +1,99 @@
+/**
+ * Curated chart palettes — authored 6-color series sets driving the SDK's
+ * --color-ak-chart-1..6 slots at runtime. The default (Signal) is the SDK's
+ * Tableau-derived colorblind-safe set; the others are authored alternatives,
+ * sequenced so adjacent series stay distinguishable. Independent of the UI
+ * palette on purpose (the shadcn insight worth keeping: chart hues are a
+ * separate design decision from brand hues).
+ */
+export const DEFAULT_CHART_PALETTE_ID = 'signal';
+export const CHART_PALETTES = [
+    {
+        id: 'signal',
+        name: 'Default',
+        description: 'The SDK default — Tableau-derived, colorblind-safe.',
+        variables: {
+            '--color-ak-chart-1': '#4e79a7',
+            '--color-ak-chart-2': '#f28e2c',
+            '--color-ak-chart-3': '#e15759',
+            '--color-ak-chart-4': '#76b7b2',
+            '--color-ak-chart-5': '#59a14f',
+            '--color-ak-chart-6': '#edc949',
+        },
+    },
+    {
+        id: 'oceanic',
+        name: 'Blues',
+        description: 'Blues and teals — calm, financial, product dashboards.',
+        variables: {
+            '--color-ak-chart-1': '#2563eb',
+            '--color-ak-chart-2': '#0891b2',
+            '--color-ak-chart-3': '#14b8a6',
+            '--color-ak-chart-4': '#6366f1',
+            '--color-ak-chart-5': '#0ea5e9',
+            '--color-ak-chart-6': '#1e40af',
+        },
+    },
+    {
+        id: 'ember',
+        name: 'Warm',
+        description: 'Warm ambers and reds — energy, alerts, intensity scales.',
+        variables: {
+            '--color-ak-chart-1': '#dc2626',
+            '--color-ak-chart-2': '#f59e0b',
+            '--color-ak-chart-3': '#ea580c',
+            '--color-ak-chart-4': '#eab308',
+            '--color-ak-chart-5': '#9a3412',
+            '--color-ak-chart-6': '#fbbf24',
+        },
+    },
+    {
+        id: 'prism',
+        name: 'Vivid',
+        description: 'Saturated multi-hue — marketing analytics, category splits.',
+        variables: {
+            '--color-ak-chart-1': '#8b5cf6',
+            '--color-ak-chart-2': '#ec4899',
+            '--color-ak-chart-3': '#06b6d4',
+            '--color-ak-chart-4': '#22c55e',
+            '--color-ak-chart-5': '#f59e0b',
+            '--color-ak-chart-6': '#6366f1',
+        },
+    },
+    {
+        id: 'ink',
+        name: 'Mono',
+        description: 'Grayscale ramp — editorial, print-adjacent, monochrome brands.',
+        variables: {
+            '--color-ak-chart-1': '#171717',
+            '--color-ak-chart-2': '#737373',
+            '--color-ak-chart-3': '#a3a3a3',
+            '--color-ak-chart-4': '#404040',
+            '--color-ak-chart-5': '#d4d4d4',
+            '--color-ak-chart-6': '#525252',
+        },
+        // Grayscale must INVERT in dark mode or the ramp disappears into the bg.
+        darkVariables: {
+            '--color-ak-chart-1': '#e5e5e5',
+            '--color-ak-chart-2': '#8a8a8a',
+            '--color-ak-chart-3': '#525252',
+            '--color-ak-chart-4': '#bdbdbd',
+            '--color-ak-chart-5': '#404040',
+            '--color-ak-chart-6': '#a3a3a3',
+        },
+    },
+];
+export function chartPaletteToVariables(palette, opts) {
+    const mode = (opts && opts.mode) || 'light';
+    if (mode === 'dark' && palette.darkVariables)
+        return { ...palette.darkVariables };
+    return { ...palette.variables };
+}
+export const DEFAULT_RADIUS_OPTION_ID = 'default';
+export const RADIUS_OPTIONS = [
+    { id: 'none', name: 'Square', value: '0rem' },
+    { id: 'small', name: 'Small', value: '0.25rem' },
+    { id: 'default', name: 'Default', value: '0.5rem' },
+    { id: 'large', name: 'Large', value: '0.875rem' },
+    { id: 'xl', name: 'Extra Round', value: '9999rem' },
+];

package/lib/presets/dials.d.ts

@@ -0,0 +1,31 @@
+export interface DialPreset<Id extends string = string> {
+  id: Id
+  name: string
+  description: string
+  variables: Record<string, string>
+  darkVariables?: Record<string, string>
+  swatch?: string
+}
+
+export interface DialModeOptions {
+  mode?: 'light' | 'dark'
+}
+
+export type BaseColorId = 'neutral' | 'stone' | 'zinc' | 'mauve' | 'olive' | 'mist' | 'taupe'
+export declare const DEFAULT_BASE_COLOR_ID: BaseColorId
+export declare const BASE_COLORS: DialPreset<BaseColorId>[]
+export declare function baseColorToVariables(base: DialPreset<BaseColorId>, opts?: DialModeOptions): Record<string, string>
+
+export type AccentThemeId =
+  | 'default' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose'
+  | 'red' | 'orange' | 'amber' | 'emerald' | 'teal' | 'cyan'
+export declare const DEFAULT_ACCENT_THEME_ID: AccentThemeId
+export declare const ACCENT_THEMES: DialPreset<AccentThemeId>[]
+export declare function accentThemeToVariables(theme: DialPreset<AccentThemeId>, opts?: DialModeOptions): Record<string, string>
+
+export declare function radiusToVariables(value: number | string): Record<string, string>
+export type TypeScaleId = 'default' | 'major-third' | 'perfect-fourth' | 'augmented-fourth' | 'perfect-fifth' | 'golden'
+export declare const DEFAULT_TYPE_SCALE_ID: TypeScaleId
+export declare const TYPE_SCALES: DialPreset<TypeScaleId>[]
+export declare function typeScaleToVariables(scale: DialPreset<TypeScaleId>): Record<string, string>
+

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 {};