astralkit 0.6.0 → 0.7.0

package/astralkit-utilities.css

@@ -799,7 +799,12 @@ body.ak-ew-resizing, body.ak-ew-resizing * {
 }
 
 /* ── Focus Ring Utility ── */
-.ak-focus-ring:focus-visible { outline: 2px solid var(--color-ak-border-focus, var(--color-ak-primary)); outline-offset: 2px; }
+.ak-focus-ring:focus-visible {
+  /* Material-drivable: packs may restyle focus (neo-brutal = 3px dashed ink).
+     Default reproduces the house ring exactly. */
+  outline: var(--ak-focus-outline, 2px solid var(--color-ak-border-focus, var(--color-ak-primary)));
+  outline-offset: var(--ak-focus-offset, 2px);
+}
 
 /* ── Price Fade Transition ── */
 .ak-price-fade { transition: opacity 0.15s ease-in-out; }
@@ -815,3 +820,309 @@ body.ak-ew-resizing, body.ak-ew-resizing * {
   @keyframes ak-slideIn { from { opacity: 0; } to { opacity: 1; } }
   @keyframes ak-fadeOut { from { opacity: 1; } to { opacity: 0; } }
 }
+
+/* ── Typography roles (2026-08-02) ─────────────────────────────────
+   Five roles, each an authored family+weight pair driven by variables so a
+   font pairing re-tunes the whole hierarchy coherently (family swaps without
+   weight compensation always look wrong — different families have different
+   weight curves). Components consume ROLE classes, never literal
+   font-family/font-weight for themed text. Weight vars live outside the
+   --font-weight-* namespace on purpose (v4 would generate colliding font-*
+   utilities). Mono role = the existing font-ak-mono utility. */
+.ak-font-heading {
+  font-family: var(--font-ak-heading, var(--font-ak-sans, Inter, sans-serif));
+  font-weight: var(--ak-weight-heading, 600);
+}
+.ak-font-body {
+  font-family: var(--font-ak-sans, Inter, sans-serif);
+  font-weight: var(--ak-weight-body, 400);
+}
+.ak-font-ui {
+  font-family: var(--font-ak-ui, var(--font-ak-sans, Inter, sans-serif));
+  font-weight: var(--ak-weight-ui, 500);
+}
+/* Emphasized UI — buttons, pressed/active controls, row titles. The library
+   calibration is semibold on every button and active state (conventions:
+   "titles are font-semibold"; forms references all carry font-semibold CTAs)
+   while quiet UI (menu rows, inputs, nav) stays at the ui weight. Pairings
+   override via --ak-weight-ui-strong. */
+.ak-font-ui-strong {
+  font-family: var(--font-ak-ui, var(--font-ak-sans, Inter, sans-serif));
+  font-weight: var(--ak-weight-ui-strong, 600);
+}
+.ak-font-label {
+  font-family: var(--font-ak-label, var(--font-ak-sans, Inter, sans-serif));
+  font-weight: var(--ak-weight-label, 600);
+  letter-spacing: var(--ak-tracking-label, 0.02em);
+}
+
+/* ── Material recipes (2026-08-02) ──────────────────────────────
+   The consumption layer for material appearances (astralkit/presets
+   MATERIAL_APPEARANCES). Components carry these classes; appearance packs
+   fill the --ak-* slots. Every default reproduces the pre-material look,
+   so unthemed apps are pixel-identical. */
+.ak-material-control {
+  box-shadow: var(--ak-control-shadow, none);
+  transition: box-shadow 0.15s ease, transform 0.15s ease;
+}
+.ak-material-control:hover {
+  transform: var(--ak-control-hover-transform, none);
+  box-shadow: var(--ak-control-shadow-hover, var(--ak-control-shadow, none));
+}
+.ak-material-control:active {
+  box-shadow: var(--ak-control-shadow-active, var(--ak-control-shadow, none));
+}
+.ak-material-surface {
+  position: relative;
+  /* Two-layer background: an optional SHEEN (falls off from the single
+     top-left light source) over the fill. Defaults collapse to plain fill. */
+  background: var(--ak-surface-sheen, none), var(--ak-surface-fill, var(--color-ak-surface));
+  border: var(--ak-surface-border-w, 1px) solid var(--ak-surface-border-color, var(--color-ak-border));
+  box-shadow: var(--ak-surface-shadow, none);
+  -webkit-backdrop-filter: var(--ak-surface-blur, none);
+  backdrop-filter: var(--ak-surface-blur, none);
+}
+/* Directional rim — a gradient border ring (hot toward the light source,
+   dying opposite) via padding + mask-composite. Invisible until a pack sets
+   --ak-surface-rim. */
+.ak-material-surface::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: var(--ak-surface-rim-w, 1.5px);
+  background: var(--ak-surface-rim, none);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+}
+/* Depth ladder: nested material surfaces step their tint up one level so
+   stacked glass reads as stacked panes. Packs opt in via the -2 slot. */
+.ak-material-surface .ak-material-surface {
+  background: var(--ak-surface-sheen-2, var(--ak-surface-sheen, none)),
+    var(--ak-surface-fill-2, var(--ak-surface-fill, var(--color-ak-surface-2)));
+  box-shadow: var(--ak-surface-shadow-2, var(--ak-surface-shadow, none));
+}
+
+/* ── Small-control material parts (batch 2) ─────────────────────────────
+   Glass Law 4: glass is for surfaces — active parts stay flat solid. The
+   knob (switch), thumb (slider) and track are material-slotted so the
+   Appearance dial re-materializes running form controls. Position is done
+   with the CSS `translate` property in components; recipes only ever touch
+   `transform`, so squish/tilt compose with position instead of clobbering it. */
+.ak-control-knob {
+  background: var(--ak-knob-fill, #ffffff);
+  box-shadow: var(--ak-knob-shadow, 0 1px 3px rgba(0, 0, 0, 0.25));
+  transition:
+    translate 200ms var(--ak-control-spring, cubic-bezier(0.4, 0, 0.2, 1)),
+    transform 200ms var(--ak-control-spring, cubic-bezier(0.4, 0, 0.2, 1)),
+    background-color 150ms ease;
+}
+[data-state="checked"] > .ak-control-knob {
+  background: var(--ak-knob-fill-checked, var(--ak-knob-fill, #ffffff));
+}
+/* The squish: origin follows the travel direction so the stretch reads as
+   the knob leaning into the push. */
+[data-ak-component="switch"]:active .ak-control-knob {
+  transform: var(--ak-knob-press, scaleX(1.12));
+  transform-origin: left center;
+}
+[data-ak-component="switch"][data-state="checked"]:active .ak-control-knob {
+  transform-origin: right center;
+}
+.ak-control-thumb {
+  background: var(--ak-thumb-fill, #ffffff);
+  border-radius: var(--ak-thumb-radius, 9999px);
+  border: var(--ak-thumb-border-w, 0px) solid var(--ak-thumb-border-color, transparent);
+  box-shadow: var(--ak-thumb-shadow, 0 1px 4px rgba(0, 0, 0, 0.3));
+  transition: transform 180ms var(--ak-control-spring, cubic-bezier(0.4, 0, 0.2, 1)),
+    box-shadow 180ms ease;
+}
+.ak-control-thumb:hover {
+  transform: var(--ak-thumb-hover-transform, scale(1.1));
+}
+.ak-control-thumb:active {
+  transform: var(--ak-thumb-active-transform, scale(0.96));
+}
+/* Track border renders as an INSET RING, not a real border — layout never
+   shifts, so knob travel constants hold across every material. */
+.ak-control-track {
+  box-shadow:
+    inset 0 0 0 var(--ak-track-border-w, 0px) var(--ak-track-border-color, transparent),
+    var(--ak-track-shadow, 0 0 0 0 transparent);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ak-control-knob,
+  .ak-control-thumb {
+    transition: none;
+  }
+}
+
+/* ── Themed scrollbar (2026-08-03) ──────────────────────────────────────
+   A thin, ALWAYS-VISIBLE scrollbar on the token layer — thumb follows the
+   theme (border-strong, text-muted on hover), track transparent. Visible
+   at rest on purpose: hidden-until-hover scrollbars fail discoverability.
+   Firefox via scrollbar-*, WebKit via the pseudo-elements. */
+.ak-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-ak-border-strong) transparent;
+}
+.ak-scrollbar::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.ak-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--color-ak-border-strong);
+  border-radius: 9999px;
+}
+.ak-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--color-ak-text-muted);
+}
+.ak-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* ── Quiet-hover bar (2026-08-03) ───────────────────────────────────────
+   The hover treatment for quiet controls and text links: a bar under the
+   WHOLE control (::after), not text-decoration — underlines don't propagate
+   into flex children, so any link with an icon shows a cut-off underline.
+   Materials fill the slots (brutal: 3px ink bar offset 4px = the backface's
+   bottom edge). Defaults are 0/invisible; a component can opt into a
+   default bar via the -default fallback vars (the link button does), which
+   materials still override via the primary vars. */
+.ak-quiet-hover {
+  position: relative;
+}
+.ak-quiet-hover::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  bottom: calc(-1 * var(--ak-quiet-hover-offset, var(--ak-quiet-hover-offset-default, 0px)));
+  height: var(--ak-quiet-hover-thickness, var(--ak-quiet-hover-thickness-default, 0px));
+  background: var(--ak-quiet-hover-color, currentColor);
+  opacity: 0;
+  transition: opacity 120ms ease;
+  pointer-events: none;
+}
+.ak-quiet-hover:hover::after,
+.ak-quiet-hover:focus-visible::after {
+  opacity: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ak-quiet-hover::after {
+    transition: none;
+  }
+}
+
+/* ── Overlay motion (core batch 4) ──────────────────────────────────────
+   In/out animations for portalled overlays, driven by Radix data-state.
+   Plain CSS so both Tailwind pipelines get them. Dialogs center with
+   inset-0 + m-auto (NOT translate) so the pop transform never fights
+   positioning; sheets own their transform entirely. */
+@keyframes ak-overlay-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes ak-overlay-out { from { opacity: 1; } to { opacity: 0; } }
+@keyframes ak-pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
+@keyframes ak-pop-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96); } }
+@keyframes ak-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
+@keyframes ak-slide-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
+@keyframes ak-slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+@keyframes ak-slide-out-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }
+@keyframes ak-slide-in-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
+@keyframes ak-slide-out-bottom { from { transform: translateY(0); } to { transform: translateY(100%); } }
+@keyframes ak-slide-in-top { from { transform: translateY(-100%); } to { transform: translateY(0); } }
+@keyframes ak-slide-out-top { from { transform: translateY(0); } to { transform: translateY(-100%); } }
+.ak-overlay-anim[data-state="open"] { animation: ak-overlay-in 150ms ease; }
+.ak-overlay-anim[data-state="closed"] { animation: ak-overlay-out 130ms ease forwards; }
+.ak-pop-anim[data-state="open"],
+.ak-pop-anim[data-state="delayed-open"] { animation: ak-pop-in 160ms cubic-bezier(0.16, 1, 0.3, 1); }
+.ak-pop-anim[data-state="closed"] { animation: ak-pop-out 120ms ease forwards; }
+.ak-sheet-anim[data-state="open"][data-side="right"] { animation: ak-slide-in-right 260ms cubic-bezier(0.16, 1, 0.3, 1); }
+.ak-sheet-anim[data-state="closed"][data-side="right"] { animation: ak-slide-out-right 200ms ease forwards; }
+.ak-sheet-anim[data-state="open"][data-side="left"] { animation: ak-slide-in-left 260ms cubic-bezier(0.16, 1, 0.3, 1); }
+.ak-sheet-anim[data-state="closed"][data-side="left"] { animation: ak-slide-out-left 200ms ease forwards; }
+.ak-sheet-anim[data-state="open"][data-side="bottom"] { animation: ak-slide-in-bottom 260ms cubic-bezier(0.16, 1, 0.3, 1); }
+.ak-sheet-anim[data-state="closed"][data-side="bottom"] { animation: ak-slide-out-bottom 200ms ease forwards; }
+.ak-sheet-anim[data-state="open"][data-side="top"] { animation: ak-slide-in-top 260ms cubic-bezier(0.16, 1, 0.3, 1); }
+.ak-sheet-anim[data-state="closed"][data-side="top"] { animation: ak-slide-out-top 200ms ease forwards; }
+/* Height-reveal for Radix Accordion/Collapsible content. */
+@keyframes ak-accordion-down { from { height: 0; } to { height: var(--radix-accordion-content-height); } }
+@keyframes ak-accordion-up { from { height: var(--radix-accordion-content-height); } to { height: 0; } }
+@keyframes ak-collapsible-down { from { height: 0; } to { height: var(--radix-collapsible-content-height); } }
+@keyframes ak-collapsible-up { from { height: var(--radix-collapsible-content-height); } to { height: 0; } }
+.ak-accordion-anim[data-state="open"] { animation: ak-accordion-down 200ms cubic-bezier(0.16, 1, 0.3, 1); }
+.ak-accordion-anim[data-state="closed"] { animation: ak-accordion-up 180ms ease forwards; }
+.ak-collapsible-anim[data-state="open"] { animation: ak-collapsible-down 200ms cubic-bezier(0.16, 1, 0.3, 1); }
+.ak-collapsible-anim[data-state="closed"] { animation: ak-collapsible-up 180ms ease forwards; }
+@media (prefers-reduced-motion: reduce) {
+  .ak-overlay-anim,
+  .ak-pop-anim,
+  .ak-sheet-anim,
+  .ak-accordion-anim,
+  .ak-collapsible-anim {
+    animation-duration: 0.01ms !important;
+  }
+}
+
+/* ── Button group (core) ────────────────────────────────────────────────
+   Container-aware styling for attached button groups (the CORE-STANDARD
+   pattern: plain CSS attribute selectors, works in both Tailwind pipelines).
+   Inner corners collapse, outer corners keep the radius tokens, adjacent
+   borders overlap by 1px, and the focused member wins the z-order. */
+/* Any direct child participates in the corner system — buttons today,
+   inputs/selects/ButtonGroupText when those cores land. Separators opt out. */
+.ak-button-group {
+  display: inline-flex;
+  align-items: stretch;
+}
+.ak-button-group > :focus-visible {
+  z-index: 1;
+}
+.ak-button-group[data-ak-orientation="vertical"] {
+  flex-direction: column;
+}
+/* Fusing applies only to a leaf group — a group of groups is a toolbar
+   (below) and its sub-groups keep their own corners. */
+.ak-button-group:not(:has(> .ak-button-group)) > * {
+  position: relative;
+  border-radius: 0;
+}
+.ak-button-group[data-ak-orientation="horizontal"]:not(:has(> .ak-button-group)) > * + :not(.ak-button-group-separator) {
+  margin-left: -1px;
+}
+.ak-button-group[data-ak-orientation="horizontal"]:not(:has(> .ak-button-group)) > .ak-button-group-separator + * {
+  margin-left: 0;
+}
+.ak-button-group[data-ak-orientation="horizontal"]:not(:has(> .ak-button-group)) > :first-child {
+  border-top-left-radius: var(--radius-ak-md);
+  border-bottom-left-radius: var(--radius-ak-md);
+}
+.ak-button-group[data-ak-orientation="horizontal"]:not(:has(> .ak-button-group)) > :last-child {
+  border-top-right-radius: var(--radius-ak-md);
+  border-bottom-right-radius: var(--radius-ak-md);
+}
+.ak-button-group[data-ak-orientation="vertical"]:not(:has(> .ak-button-group)) > * + :not(.ak-button-group-separator) {
+  margin-top: -1px;
+}
+.ak-button-group[data-ak-orientation="vertical"]:not(:has(> .ak-button-group)) > .ak-button-group-separator + * {
+  margin-top: 0;
+}
+.ak-button-group[data-ak-orientation="vertical"]:not(:has(> .ak-button-group)) > :first-child {
+  border-top-left-radius: var(--radius-ak-md);
+  border-top-right-radius: var(--radius-ak-md);
+}
+.ak-button-group[data-ak-orientation="vertical"]:not(:has(> .ak-button-group)) > :last-child {
+  border-bottom-left-radius: var(--radius-ak-md);
+  border-bottom-right-radius: var(--radius-ak-md);
+}
+/* The seam flips with the group's axis. */
+.ak-button-group[data-ak-orientation="vertical"] > .ak-button-group-separator {
+  width: auto;
+  height: 1px;
+  align-self: stretch;
+}
+/* A group of groups is a toolbar: sub-groups space out instead of fusing. */
+.ak-button-group:has(> .ak-button-group) {
+  gap: var(--spacing-ak-1, 0.5rem);
+}

package/lib/presets/appearance-presets.d.ts

@@ -0,0 +1,12 @@
+export type AppearancePresetId = 'clean' | 'soft-mesh' | 'neon-edge' | 'cinematic-backlight' | 'circuit-spark' | 'portfolio-grain';
+type AppearanceVariableName = `--ak-effect-${string}` | `--gradient-ak-${string}`;
+export interface AppearancePreset {
+    id: AppearancePresetId;
+    name: string;
+    description: string;
+    variables: Partial<Record<AppearanceVariableName, string>>;
+}
+export declare const DEFAULT_APPEARANCE_PRESET_ID: AppearancePresetId;
+export declare const APPEARANCE_PRESETS: AppearancePreset[];
+export declare function appearancePresetToVariables(preset: AppearancePreset): Partial<Record<AppearanceVariableName, string>>;
+export {};

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>
+