@sveltier/ui 0.0.0-stage → 0.1.0-alpha.1

package/dist/primitives/virtual/virtual-list.svelte.js

@@ -0,0 +1,291 @@
+import { untrack } from 'svelte';
+import { sveltierError } from '../../core/errors/errors.js';
+class Virtualizer {
+    #options;
+    // The scroll position, and the viewport height once measured.
+    #offset = $state(0);
+    #height = $state();
+    // Measured heights by key, in a plain map: one signal for all of them, not one per item.
+    #sizes = new Map();
+    #version = $state(0);
+    #element;
+    #observer;
+    // Items are observed from the next frame on: an observation added while ResizeObserver is
+    // delivering (rows mounted because measured rows moved) is reported as a loop error.
+    #queued = new Set();
+    #observing = 0;
+    #jump;
+    #expiry = 0;
+    // The part of a scroll shift the browser rounded away, carried to the next one.
+    #remainder = 0;
+    constructor(options) {
+        this.#options = options;
+    }
+    #config = $derived.by(() => {
+        const { count, itemSize, overscan = 3, key, ssrHeight = 0 } = this.#options();
+        if (typeof itemSize === 'number' && !(itemSize > 0)) {
+            throw sveltierError('SV3002', `virtualList: itemSize must be a positive number of px; got ${itemSize}.`);
+        }
+        return {
+            count: Number.isFinite(count) ? Math.max(0, Math.trunc(count)) : 0,
+            itemSize,
+            overscan: Math.max(0, Math.trunc(overscan)) || 0,
+            key,
+            ssrHeight: Math.max(0, ssrHeight) || 0
+        };
+    });
+    // Where every item starts, plus the end of the last one. Not needed while all items are
+    // one known height: then a start is a multiplication.
+    #starts = $derived.by(() => {
+        const { count, itemSize, key } = this.#config;
+        const version = this.#version;
+        if (version === 0 && typeof itemSize === 'number')
+            return undefined;
+        // Until something is measured there is nothing to look up, and no key to work out.
+        const sizes = version > 0 ? this.#sizes : undefined;
+        const starts = new Float64Array(count + 1);
+        for (let i = 0; i < count; i++) {
+            starts[i + 1] = starts[i] + (sizes?.get(key ? key(i) : i) ?? this.#estimate(i));
+        }
+        return starts;
+    });
+    #estimate(index) {
+        const { itemSize } = this.#config;
+        if (typeof itemSize === 'number')
+            return itemSize;
+        const size = itemSize(index);
+        if (!(size > 0)) {
+            throw sveltierError('SV3002', `virtualList: itemSize(${index}) returned ${size}; it must return a positive number of px.`);
+        }
+        return size;
+    }
+    #start(index) {
+        return this.#starts?.[index] ?? index * this.#config.itemSize;
+    }
+    // The item at a distance from the top of the list, clamped to the list.
+    #indexAt(offset) {
+        const { count, itemSize } = this.#config;
+        const starts = this.#starts;
+        let index;
+        if (starts) {
+            let low = 0;
+            let high = count - 1;
+            while (low < high) {
+                const middle = (low + high + 1) >> 1;
+                if (starts[middle] <= offset)
+                    low = middle;
+                else
+                    high = middle - 1;
+            }
+            index = low;
+        }
+        else {
+            index = Math.floor(offset / itemSize);
+        }
+        return Math.max(0, Math.min(count - 1, index));
+    }
+    #totalSize = $derived(this.#start(this.#config.count));
+    #viewHeight = $derived(this.#height ?? this.#config.ssrHeight);
+    // The scroll position, kept within the content: when the content shrinks, the browser clamps
+    // the real position a frame before the scroll event reports it.
+    #top = $derived(Math.max(0, Math.min(this.#offset, this.#totalSize - this.#viewHeight)));
+    // First and last rendered index, as separate numbers: scrolling within the rendered range
+    // changes neither, so nothing re-renders.
+    #first = $derived(Math.max(0, this.#indexAt(this.#top) - this.#config.overscan));
+    #last = $derived.by(() => {
+        const { count, overscan } = this.#config;
+        // The item holding the last visible pixel; one starting right at the bottom is not in view.
+        const bottom = this.#top + this.#viewHeight;
+        return Math.min(count - 1, this.#indexAt(Math.max(bottom - 0.001, 0)) + overscan);
+    });
+    #items = $derived.by(() => {
+        const { count, key } = this.#config;
+        const items = [];
+        if (count === 0)
+            return items;
+        for (let index = this.#first; index <= this.#last; index++) {
+            const start = this.#start(index);
+            const end = this.#start(index + 1);
+            items.push({ index, key: key ? key(index) : index, start, size: end - start, end });
+        }
+        return items;
+    });
+    // Getters only: the rendered range is derived, never set.
+    get items() {
+        return this.#items;
+    }
+    get totalSize() {
+        return this.#totalSize;
+    }
+    viewport = (element) => {
+        this.#element = element;
+        // Item heights are kept steady by the list itself; the browser's scroll anchoring would
+        // correct for them a second time.
+        const anchoring = element.style.overflowAnchor;
+        element.style.overflowAnchor = 'none';
+        const scrolled = () => {
+            // A scroll that lands away from a pending jump is the user's: the jump gives way.
+            const top = this.#jump?.top;
+            if (top !== undefined && Math.abs(element.scrollTop - top) >= 1)
+                this.#jump = undefined;
+            this.#offset = element.scrollTop;
+        };
+        const resized = new ResizeObserver(() => {
+            this.#height = element.clientHeight;
+            if (element.clientHeight === 0)
+                return;
+            // Shown again: the browser restores the scroll position without a scroll event.
+            this.#offset = element.scrollTop;
+            this.#aim();
+        });
+        element.addEventListener('scroll', scrolled, { passive: true });
+        resized.observe(element);
+        this.#offset = element.scrollTop;
+        this.#height = element.clientHeight;
+        // A jump asked for before the viewport existed. Untracked: attachments re-run on what
+        // they read.
+        untrack(() => this.#aim());
+        return () => {
+            element.removeEventListener('scroll', scrolled);
+            resized.disconnect();
+            element.style.overflowAnchor = anchoring;
+            if (this.#element === element)
+                this.#element = undefined;
+        };
+    };
+    measure = (element) => {
+        if (element.dataset.index === undefined) {
+            throw sveltierError('SV3003', 'virtualList: a measured item has no data-index. Add data-index={item.index} next to {@attach list.measure}.');
+        }
+        this.#queued.add(element);
+        if (!this.#observing)
+            this.#observing = requestAnimationFrame(() => this.#observeQueued());
+        return () => {
+            this.#queued.delete(element);
+            this.#observer?.unobserve(element);
+        };
+    };
+    #observeQueued() {
+        this.#observing = 0;
+        // Border box: padding and borders count, and a change to them alone is reported.
+        this.#observer ??= new ResizeObserver((entries) => this.#measured(entries));
+        for (const element of this.#queued)
+            this.#observer.observe(element, { box: 'border-box' });
+        this.#queued.clear();
+    }
+    #measured(entries) {
+        const element = this.#element;
+        // A hidden viewport reports every row as 0px: keep what was measured while it showed.
+        if (element?.clientHeight === 0)
+            return;
+        const { count, key } = this.#config;
+        const top = this.#top;
+        let changed = false;
+        let shift = 0;
+        for (const entry of entries) {
+            const index = Number(entry.target.dataset.index);
+            if (!(index >= 0 && index < count))
+                continue;
+            const id = key ? key(index) : index;
+            const size = entry.borderBoxSize[0].blockSize;
+            const previous = this.#sizes.get(id) ?? this.#estimate(index);
+            this.#sizes.set(id, size);
+            if (size === previous)
+                continue;
+            changed = true;
+            // An item above the scroll position pushes the content in view: follow it.
+            if (this.#start(index) < top)
+                shift += size - previous;
+        }
+        if (!changed)
+            return;
+        this.#version++;
+        // A pending jump re-aims at its target, which accounts for every row that moved.
+        if (this.#jump)
+            this.#aim();
+        else if (shift && element)
+            this.#shift(element, shift);
+    }
+    #shift(element, by) {
+        const wanted = element.scrollTop + by + this.#remainder;
+        element.scrollTop = wanted;
+        const rest = wanted - element.scrollTop;
+        this.#remainder = Math.abs(rest) < 1 ? rest : 0;
+        this.#offset = element.scrollTop;
+    }
+    scrollToIndex(index, { align = 'auto' } = {}) {
+        // Untracked, so an effect that calls this does not re-run on every measurement.
+        untrack(() => {
+            const target = Math.trunc(index);
+            if (!(target >= 0 && target < this.#config.count))
+                return;
+            this.#jump = { index: target, align };
+            this.#aim();
+        });
+    }
+    // Scrolls to the pending jump, once there is a viewport and it is shown.
+    #aim() {
+        const jump = this.#jump;
+        const element = this.#element;
+        if (!jump || !element || element.clientHeight === 0)
+            return;
+        if (jump.index >= this.#config.count) {
+            this.#jump = undefined;
+            return;
+        }
+        const view = element.clientHeight;
+        const start = this.#start(jump.index);
+        const end = this.#start(jump.index + 1);
+        if (jump.align === 'auto') {
+            const offset = element.scrollTop;
+            if (start >= offset && end <= offset + view) {
+                this.#jump = undefined;
+                return;
+            }
+            // Settled once, so later passes keep the item at the same edge.
+            jump.align = start < offset ? 'start' : 'end';
+        }
+        const wanted = jump.align === 'start' ? start : jump.align === 'end' ? end - view : (start + end - view) / 2;
+        const top = Math.max(0, Math.min(wanted, this.#totalSize - view));
+        jump.top = top;
+        // Render the target now, not after the scroll event: it may be an active descendant.
+        this.#offset = top;
+        element.scrollTo({ top, behavior: 'instant' });
+        // The content may not have grown yet to allow that scroll: again once Svelte has rendered.
+        if (Math.abs(element.scrollTop - top) >= 1) {
+            queueMicrotask(() => {
+                if (this.#jump === jump)
+                    element.scrollTo({ top: jump.top, behavior: 'instant' });
+            });
+        }
+        // Rows mounted around the target are measured within a frame; the jump ends a frame after
+        // the last measurement that moved it.
+        cancelAnimationFrame(this.#expiry);
+        this.#expiry = requestAnimationFrame(() => {
+            this.#expiry = requestAnimationFrame(() => {
+                if (this.#jump !== jump)
+                    return;
+                this.#jump = undefined;
+                // In case the scroll never happened, as when nothing was tall enough to scroll. Not
+                // while hidden: a hidden element reports a scroll position of 0.
+                const current = this.#element;
+                if (current && current.clientHeight > 0)
+                    this.#offset = current.scrollTop;
+            });
+        });
+    }
+}
+/**
+ * Renders only the items in view out of thousands. Options are read through a function, so
+ * they stay reactive.
+ *
+ * @example
+ * const list = virtualList(() => ({ count: rows.length, itemSize: 34 }));
+ * // <div class="viewport" {@attach list.viewport}>
+ * //   <div style:height="{list.totalSize}px" style:position="relative">
+ * //     {#each list.items as item (item.key)}
+ * //       <div class="row" style:transform="translateY({item.start}px)">…</div>
+ */
+export function virtualList(options) {
+    return new Virtualizer(options);
+}

package/dist/styles/base.css

@@ -0,0 +1,44 @@
+/* Minimal document defaults. Everything is in @layer sv.base, so any unlayered rule wins. */
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.base {
+	:root {
+		background-color: var(--sv-color-background);
+		-webkit-text-size-adjust: 100%;
+		text-size-adjust: 100%;
+	}
+
+	/* Every theme scope re-applies its text colour and type, so nested themes restyle content. */
+	:root,
+	[data-sv-theme] {
+		color: var(--sv-color-text);
+		font-family: var(--sv-font-ui);
+	}
+
+	body {
+		font-size: var(--sv-text-md);
+		line-height: var(--sv-leading-normal);
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		text-rendering: optimizeLegibility;
+	}
+
+	:focus-visible {
+		outline: var(--sv-focus-width) solid var(--sv-color-primary);
+		outline-offset: var(--sv-focus-offset);
+	}
+
+	/*
+	 * Themes set their own durations in sv.tokens. This later layer wins over every theme, so
+	 * reduced motion is honoured whatever theme is active.
+	 */
+	@media (prefers-reduced-motion: reduce) {
+		:root,
+		[data-sv-theme] {
+			--sv-duration-fast: 0.01ms;
+			--sv-duration-normal: 0.01ms;
+			--sv-duration-slow: 0.01ms;
+			--sv-press-offset: 0px;
+		}
+	}
+}

package/dist/styles/props.css

@@ -0,0 +1,140 @@
+/*
+ * Shared props. Each class sets custom properties that components read; none of them paints.
+ * They live in sv.base, so a component can refine a value for itself and any unlayered rule
+ * wins. The colour classes of the theme's intents and custom colours come from the theme
+ * stylesheet (themeCss), next to the colours they point at.
+ */
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.base {
+	.sv-color-neutral {
+		--sv-color: var(--sv-color-text);
+		--sv-on-color: var(--sv-color-background);
+	}
+
+	/*
+	 * Variants: resting background, foreground, border and shadow. Hover and press mix the
+	 * foreground over the background by --sv-state-hover and --sv-state-press. Every variant
+	 * sets every variable, so nothing leaks in from a parent component.
+	 */
+	.sv-variant-elevated {
+		--sv-variant-bg: var(--sv-color-surface);
+		--sv-variant-fg: var(--sv-color);
+		--sv-variant-border: transparent;
+		--sv-variant-shadow: var(--sv-shadow);
+	}
+
+	.sv-variant-flat {
+		--sv-variant-bg: var(--sv-color);
+		--sv-variant-fg: var(--sv-on-color);
+		--sv-variant-border: transparent;
+		--sv-variant-shadow: none;
+	}
+
+	.sv-variant-tonal {
+		--sv-variant-bg: color-mix(in oklch, var(--sv-color) var(--sv-tonal-wash), transparent);
+		--sv-variant-fg: color-mix(
+			in oklch,
+			var(--sv-color) var(--sv-tonal-text-mix),
+			var(--sv-color-text)
+		);
+		--sv-variant-border: transparent;
+		--sv-variant-shadow: none;
+	}
+
+	.sv-variant-outlined {
+		--sv-variant-bg: transparent;
+		--sv-variant-fg: var(--sv-color);
+		--sv-variant-border: var(--sv-color);
+		--sv-variant-shadow: none;
+	}
+
+	.sv-variant-text,
+	.sv-variant-plain {
+		--sv-variant-bg: transparent;
+		--sv-variant-fg: var(--sv-color);
+		--sv-variant-border: transparent;
+		--sv-variant-shadow: none;
+	}
+
+	/*
+	 * Plain: no decoration in any state, on a control itself. The washes inherit, so a plain
+	 * container (a Card, an Alert, a List) leaves them alone for the controls inside it.
+	 */
+	.sv-variant-plain:where(a, button, summary, [role='button'], [role='link']) {
+		--sv-state-hover: 0%;
+		--sv-state-press: 0%;
+	}
+
+	/* Sizes: a half step of φ in height and a quarter step in text per size. */
+	.sv-size-xs {
+		--sv-size-height: var(--sv-control-xs);
+		--sv-size-text: var(--sv-text-label);
+	}
+
+	.sv-size-sm {
+		--sv-size-height: var(--sv-control-sm);
+		--sv-size-text: var(--sv-text-xs);
+	}
+
+	.sv-size-md {
+		--sv-size-height: var(--sv-control-md);
+		--sv-size-text: var(--sv-text-sm);
+	}
+
+	.sv-size-lg {
+		--sv-size-height: var(--sv-control-lg);
+		--sv-size-text: var(--sv-text-md);
+	}
+
+	.sv-size-xl {
+		--sv-size-height: var(--sv-control-xl);
+		--sv-size-text: var(--sv-text-lg);
+	}
+
+	/* Density multiplies heights and paddings, never the text. */
+	.sv-density-compact {
+		--sv-density: var(--sv-density-compact);
+	}
+
+	.sv-density-default {
+		--sv-density: 1;
+	}
+
+	.sv-density-comfortable {
+		--sv-density: var(--sv-density-comfortable);
+	}
+
+	/*
+	 * `rounded` (true) clears any inherited value, so the component's own default applies:
+	 * border-radius: var(--sv-rounded, <the component's radius>).
+	 */
+	.sv-rounded {
+		--sv-rounded: initial;
+	}
+
+	.sv-rounded-none {
+		--sv-rounded: 0;
+	}
+
+	.sv-rounded-sm {
+		--sv-rounded: var(--sv-radius-sm);
+	}
+
+	.sv-rounded-md {
+		--sv-rounded: var(--sv-radius-md);
+	}
+
+	.sv-rounded-lg {
+		--sv-rounded: var(--sv-radius-lg);
+	}
+
+	.sv-rounded-xl {
+		--sv-rounded: var(--sv-radius-xl);
+	}
+
+	/* A pill in every theme, square themes included. */
+	.sv-rounded-full {
+		--sv-rounded: 9999px;
+	}
+}

package/dist/styles/tokens.css

@@ -0,0 +1,84 @@
+/*
+ * Design tokens shared by every theme. Colour, type families, shape, depth and motion come
+ * from the active theme (<ThemeProvider>) as --sv-color-*, --sv-on-* and the theme contract
+ * variables (--sv-font-*, --sv-radius-*, --sv-shadow, --sv-ease, --sv-duration-*, ...).
+ *
+ * Every scale here derives from the golden ratio φ = 1.6180339887: sizes are powers of φ,
+ * spacing follows the Fibonacci sequence (whose ratios converge to φ).
+ */
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.tokens {
+	:root {
+		/* Type scale: 1rem × φ^(n/4), so user font-size preferences apply. */
+		--sv-text-label: 0.697rem; /* φ^-¾ ≈ 11.15px */
+		--sv-text-xs: 0.7862rem; /* φ^-½ ≈ 12.58px */
+		--sv-text-sm: 0.8867rem; /* φ^-¼ ≈ 14.19px, controls */
+		--sv-text-md: 1rem; /* 16px, body */
+		--sv-text-lg: 1.1278rem; /* φ^¼ ≈ 18.05px */
+		--sv-text-xl: 1.272rem; /* φ^½ ≈ 20.35px */
+		--sv-text-title: 1.618rem; /* φ ≈ 25.89px */
+		--sv-text-headline: clamp(1.8249rem, 1.6594rem + 0.7354vw, 2.3213rem); /* φ^1.25–φ^1.75 */
+		--sv-text-display: clamp(2.618rem, 2.0788rem + 2.397vw, 4.2361rem); /* φ²–φ³ */
+
+		--sv-weight-light: 300;
+		--sv-weight-regular: 400;
+		--sv-weight-medium: 500;
+		--sv-weight-semibold: 600;
+
+		--sv-leading-tight: 1.1278; /* φ^¼ */
+		--sv-leading-snug: 1.272; /* √φ */
+		--sv-leading-normal: 1.618; /* φ */
+
+		/* Spacing: Fibonacci, the suffix is the size in px at the default 16px root. */
+		--sv-space-2: 0.125rem;
+		--sv-space-3: 0.1875rem;
+		--sv-space-5: 0.3125rem;
+		--sv-space-8: 0.5rem;
+		--sv-space-13: 0.8125rem;
+		--sv-space-21: 1.3125rem;
+		--sv-space-34: 2.125rem;
+		--sv-space-55: 3.4375rem;
+		--sv-space-89: 5.5625rem;
+		--sv-space-144: 9rem;
+
+		/* Control heights: 1rem × φ^(k/2). md is φ² ≈ 41.9px. */
+		--sv-control-xs: 1.618rem; /* φ */
+		--sv-control-sm: 2.0582rem; /* φ^1.5 */
+		--sv-control-md: 2.618rem; /* φ² */
+		--sv-control-lg: 3.3302rem; /* φ^2.5 */
+		--sv-control-xl: 4.2361rem; /* φ³ */
+
+		/* Density moves a control one quarter step of φ. */
+		--sv-density-compact: 0.8867; /* φ^-¼ */
+		--sv-density-comfortable: 1.1278; /* φ^¼ */
+
+		/* The golden split, for two-column layouts: 61.8% / 38.2%. */
+		--sv-golden-major: 61.803%;
+		--sv-golden-minor: 38.197%;
+
+		/* Rules. */
+		--sv-hairline: 1px;
+		--sv-rule-total: 3px double;
+
+		/*
+		 * Tonal fills (selected chips, badges, alerts): the intent colour as a light wash, with
+		 * text mixed slightly toward the theme's text colour so it stays ≥ 4.5:1 on the wash:
+		 * color-mix(in oklch, <intent> var(--sv-tonal-text-mix), var(--sv-color-text)).
+		 * These follow the contrast tests rather than φ.
+		 */
+		--sv-tonal-wash: 12%;
+		--sv-tonal-text-mix: 80%;
+
+		/* Hover and press mix a control's foreground over its background by these amounts. */
+		--sv-state-hover: 8%;
+		--sv-state-press: 13%;
+
+		/* Focus ring. */
+		--sv-focus-width: 2px;
+		--sv-focus-offset: 2px;
+
+		/* Pressed controls move down by this much; never scale. */
+		--sv-press-offset: 1px;
+	}
+}

package/dist/styles/visually-hidden.css

@@ -0,0 +1,16 @@
+/*
+ * Text for assistive technology only: out of sight, still read. Components that need it
+ * import this file, so it ships once and only with them.
+ */
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.utilities {
+	.sv-visually-hidden {
+		position: absolute;
+		inline-size: 1px;
+		block-size: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+}

package/dist/themes/aurora.d.ts

@@ -0,0 +1,13 @@
+import type { ThemeDefinition } from '../core/theme/types.js';
+export declare const auroraLight: ThemeDefinition;
+export declare const auroraDark: ThemeDefinition;
+/**
+ * Aurora: Modern depth, dark first: frosted panels over an iris and mint glow. Manrope and JetBrains Mono.
+ *
+ * @example
+ * <ThemeProvider themes={aurora}>…</ThemeProvider>
+ */
+export declare const aurora: {
+    'aurora-light': ThemeDefinition;
+    'aurora-dark': ThemeDefinition;
+};

package/dist/themes/aurora.js

@@ -0,0 +1,103 @@
+// Aurora. Modern depth, dark first: frosted panels over an iris and mint glow. Manrope and JetBrains Mono.
+// Fonts are not bundled; see the theme docs for the Fontsource packages. `on-` colours are
+// written out so these themes never pull in the colour maths.
+const shared = {
+    'font-display': "'Manrope Variable', system-ui, sans-serif",
+    'font-ui': "'Manrope Variable', system-ui, sans-serif",
+    'font-data': "'JetBrains Mono Variable', ui-monospace, monospace",
+    'weight-display': 700,
+    'tracking-display': '-0.03em',
+    'radius-sm': '8px',
+    'radius-md': '13px',
+    'radius-lg': '21px',
+    'radius-xl': '34px',
+    'radius-full': '999px',
+    'label-size': '0.7862rem',
+    'label-transform': 'none',
+    'label-tracking': '0',
+    'button-transform': 'none',
+    'button-tracking': '0',
+    'surface-blur': '18px',
+    ornament: 'transparent',
+    ease: 'cubic-bezier(0.146, 1, 0.382, 1)',
+    'duration-fast': '144ms',
+    'duration-normal': '233ms',
+    'duration-slow': '377ms'
+};
+export const auroraLight = {
+    dark: false,
+    colors: {
+        background: 'oklch(0.975 0.01 285)',
+        surface: 'oklch(1 0 0)',
+        'surface-raised': 'oklch(0.955 0.014 285)',
+        border: 'oklch(0.90 0.015 285)',
+        'border-soft': 'oklch(0.93 0.012 285)',
+        'border-strong': 'oklch(0.60 0.03 285)',
+        text: 'oklch(0.22 0.04 282)',
+        'text-muted': 'oklch(0.42 0.04 282)',
+        'text-subtle': 'oklch(0.50 0.035 282)',
+        primary: 'oklch(0.50 0.20 285)',
+        success: 'oklch(0.50 0.12 165)',
+        warning: 'oklch(0.52 0.13 60)',
+        error: 'oklch(0.52 0.19 15)',
+        info: 'oklch(0.50 0.13 240)',
+        up: 'oklch(0.50 0.12 165)',
+        down: 'oklch(0.52 0.19 15)',
+        'on-primary': 'oklch(0.99 0.005 285)',
+        'on-success': 'oklch(0.985 0.005 165)',
+        'on-warning': 'oklch(0.985 0.005 60)',
+        'on-error': 'oklch(0.985 0.005 15)',
+        'on-info': 'oklch(0.985 0.005 240)',
+        'on-up': 'oklch(0.985 0.005 165)',
+        'on-down': 'oklch(0.985 0.005 15)'
+    },
+    variables: {
+        ...shared,
+        'surface-alpha': '78%',
+        backdrop: 'radial-gradient(60% 50% at 10% 0%, oklch(0.75 0.14 287 / 0.28), transparent 70%), radial-gradient(50% 45% at 100% 15%, oklch(0.85 0.10 168 / 0.30), transparent 70%)',
+        bevel: 'oklch(1 0 0 / 0.7)',
+        shadow: '0 1px 2px oklch(0.3 0.08 285 / 0.08), 0 21px 55px -21px oklch(0.4 0.15 285 / 0.28)'
+    }
+};
+export const auroraDark = {
+    dark: true,
+    colors: {
+        background: 'oklch(0.165 0.035 282)',
+        surface: 'oklch(0.215 0.04 282)',
+        'surface-raised': 'oklch(0.27 0.045 282)',
+        border: 'oklch(0.34 0.04 282)',
+        'border-soft': 'oklch(0.28 0.04 282)',
+        'border-strong': 'oklch(0.58 0.05 282)',
+        text: 'oklch(0.97 0.008 282)',
+        'text-muted': 'oklch(0.80 0.02 282)',
+        'text-subtle': 'oklch(0.70 0.025 282)',
+        primary: 'oklch(0.74 0.15 287)',
+        success: 'oklch(0.80 0.13 168)',
+        warning: 'oklch(0.83 0.12 80)',
+        error: 'oklch(0.72 0.16 15)',
+        info: 'oklch(0.78 0.11 230)',
+        up: 'oklch(0.80 0.13 168)',
+        down: 'oklch(0.72 0.16 15)',
+        'on-primary': 'oklch(0.18 0.04 282)',
+        'on-success': 'oklch(0.2 0.02 168)',
+        'on-warning': 'oklch(0.2 0.02 80)',
+        'on-error': 'oklch(0.2 0.02 15)',
+        'on-info': 'oklch(0.2 0.02 230)',
+        'on-up': 'oklch(0.2 0.02 168)',
+        'on-down': 'oklch(0.2 0.02 15)'
+    },
+    variables: {
+        ...shared,
+        'surface-alpha': '72%',
+        backdrop: 'radial-gradient(60% 50% at 10% 0%, oklch(0.55 0.2 287 / 0.38), transparent 70%), radial-gradient(50% 45% at 100% 15%, oklch(0.7 0.14 168 / 0.22), transparent 70%)',
+        bevel: 'oklch(1 0 0 / 0.08)',
+        shadow: 'inset 0 1px 0 oklch(1 0 0 / 0.06), 0 21px 55px -21px oklch(0.05 0.05 282 / 0.9)'
+    }
+};
+/**
+ * Aurora: Modern depth, dark first: frosted panels over an iris and mint glow. Manrope and JetBrains Mono.
+ *
+ * @example
+ * <ThemeProvider themes={aurora}>…</ThemeProvider>
+ */
+export const aurora = { 'aurora-light': auroraLight, 'aurora-dark': auroraDark };