@fishies/ui 0.8.3

package/dist/loader.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import './loader.css';
+export const SPINNER_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">' +
+    '<style>.a{transform-origin:24px 24px;animation:s 1.1s linear infinite}' +
+    '.b{opacity:0;animation:u 1.8s ease-in infinite}.c{animation-delay:.6s}.d{animation-delay:1.2s}' +
+    '@keyframes s{to{transform:rotate(360deg)}}' +
+    '@keyframes u{0%{opacity:0;transform:translateY(7px)}30%{opacity:.95}100%{opacity:0;transform:translateY(-9px)}}' +
+    '@media (prefers-reduced-motion:reduce){.a{animation-duration:3.6s}.b{animation:none;opacity:.8}}</style>' +
+    '<circle cx="24" cy="24" r="21" fill="#0b2a3c" fill-opacity=".74" stroke="#c4ecfa" stroke-opacity=".24"/>' +
+    '<circle cx="24" cy="24" r="16" fill="none" stroke="#c4ecfa" stroke-opacity=".13" stroke-width="3"/>' +
+    '<circle class="a" cx="24" cy="24" r="16" fill="none" stroke="#ffc46b" stroke-width="3" stroke-linecap="round" stroke-dasharray="25 76"/>' +
+    '<g fill="#dff6ff" fill-opacity=".16" stroke="#dff6ff" stroke-width="1.1">' +
+    '<circle class="b" cx="21.5" cy="26" r="2.7"/><circle class="b c" cx="27" cy="27.5" r="1.9"/><circle class="b d" cx="23.5" cy="30" r="1.3"/>' +
+    '</g></svg>';
+export function svgDataUri(svg) {
+    return `url("data:image/svg+xml,${svg.replace(/"/g, "'").replace(/[<>#%{}]/g, c => encodeURIComponent(c))}")`;
+}
+export function Spinner({ size = 32, label = 'Loading', className, style }) {
+    return _jsx("span", { className: `fx-spinner${className ? ` ${className}` : ''}`, role: "status", "aria-label": label, style: { '--fx-size': `${size}px`, ...style }, dangerouslySetInnerHTML: { __html: SPINNER_SVG.replace('<svg ', '<svg aria-hidden="true" focusable="false" ') } });
+}
+/** A progress bar: a glass channel filling with gold, a bubble riding its leading edge; with no value the gold sweeps. */
+export function Progress({ value, label = 'Loading', className, style }) {
+    const known = typeof value === 'number' && Number.isFinite(value);
+    const percent = known ? Math.round(Math.min(1, Math.max(0, value)) * 100) : undefined;
+    return _jsx("span", { className: `fx-progress${className ? ` ${className}` : ''}`, role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, "data-indeterminate": known ? undefined : '', style: { '--fx-value': known ? percent / 100 : 0, ...style }, children: _jsx("i", {}) });
+}

package/dist/select-state.d.ts

@@ -0,0 +1,34 @@
+export type SelectOptionState = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type SelectState = {
+    open: boolean;
+    active: number;
+};
+export type SelectKeyResult = SelectState & {
+    choose?: string;
+    close?: 'focus' | 'blur';
+    handled: boolean;
+};
+export declare function selectedIndex(options: readonly SelectOptionState[], value: string): number;
+export declare function moveActive(options: readonly SelectOptionState[], from: number, step: 1 | -1): number;
+export declare function typeahead(options: readonly SelectOptionState[], from: number, key: string): number;
+export declare function selectKey(state: SelectState, key: string, options: readonly SelectOptionState[], value: string): SelectKeyResult;
+export declare function placePopup(rect: {
+    top: number;
+    bottom: number;
+    left: number;
+    width: number;
+}, viewport: {
+    width: number;
+    height: number;
+}, wanted: number, gap?: number, margin?: number): {
+    up: boolean;
+    maxHeight: number;
+    width: number;
+    left: number;
+    top: number | undefined;
+    bottom: number | undefined;
+};

package/dist/select-state.js

@@ -0,0 +1,55 @@
+const enabled = (options) => options.map((option, index) => option.disabled ? -1 : index).filter(index => index >= 0);
+export function selectedIndex(options, value) {
+    const index = options.findIndex(option => option.value === value);
+    return index >= 0 && !options[index].disabled ? index : enabled(options)[0] ?? -1;
+}
+export function moveActive(options, from, step) {
+    for (let index = from + step; index >= 0 && index < options.length; index += step)
+        if (!options[index].disabled)
+            return index;
+    return from;
+}
+export function typeahead(options, from, key) {
+    const needle = key.toLocaleLowerCase();
+    for (let offset = 1; offset <= options.length; offset++) {
+        const index = (from + offset + options.length) % options.length;
+        const option = options[index];
+        if (!option.disabled && option.label.trim().toLocaleLowerCase().startsWith(needle))
+            return index;
+    }
+    return -1;
+}
+export function selectKey(state, key, options, value) {
+    const list = enabled(options);
+    if (!state.open) {
+        if (key === 'Enter' || key === ' ' || key === 'ArrowDown' || key === 'ArrowUp')
+            return { open: true, active: selectedIndex(options, value), handled: true };
+        return { ...state, handled: false };
+    }
+    switch (key) {
+        case 'ArrowDown': return { open: true, active: moveActive(options, state.active, 1), handled: true };
+        case 'ArrowUp': return { open: true, active: moveActive(options, state.active, -1), handled: true };
+        case 'Home': return { open: true, active: list[0] ?? -1, handled: true };
+        case 'End': return { open: true, active: list[list.length - 1] ?? -1, handled: true };
+        case 'Enter':
+        case ' ': {
+            const option = options[state.active];
+            return { open: false, active: state.active, choose: option && !option.disabled ? option.value : undefined, close: 'focus', handled: true };
+        }
+        case 'Escape': return { open: false, active: state.active, close: 'focus', handled: true };
+        case 'Tab': return { open: false, active: state.active, close: 'blur', handled: false };
+    }
+    if (key.length === 1) {
+        const found = typeahead(options, state.active, key);
+        return { open: true, active: found >= 0 ? found : state.active, handled: true };
+    }
+    return { ...state, handled: false };
+}
+export function placePopup(rect, viewport, wanted, gap = 6, margin = 8) {
+    const below = viewport.height - rect.bottom - gap - margin, above = rect.top - gap - margin;
+    const up = below < Math.min(wanted, 180) && above > below;
+    const maxHeight = Math.max(0, Math.min(wanted, up ? above : below));
+    const width = Math.min(Math.max(rect.width, 160), viewport.width - margin * 2);
+    const left = Math.min(Math.max(margin, rect.left), viewport.width - margin - width);
+    return { up, maxHeight, width, left, top: up ? undefined : rect.bottom + gap, bottom: up ? viewport.height - rect.top + gap : undefined };
+}

package/dist/select.css

@@ -0,0 +1,87 @@
+:root {
+  --fs-select-ink: var(--fx-ground-ink);
+  --fs-select-muted: var(--fx-muted);
+  --fs-select-line: #b7d3d342;
+  --fs-select-bg: #09232b8c;
+  --fs-select-panel: #09232bf5;
+  --fs-select-hover: #163741;
+  --fs-select-accent: var(--fx-gold);
+  --fs-select-radius: 8px;
+  --fs-select-shadow: 0 15px 35px #020d1688;
+  --fs-select-font: 800 13px/1.2;
+}
+.aquarium-game {
+  --fs-select-ink: var(--fx-ink);
+  --fs-select-muted: var(--fx-ink-3);
+  --fs-select-line: rgb(140 200 255 / 24%);
+  --fs-select-bg: rgb(255 255 255 / 5%);
+  --fs-select-panel: rgb(8 26 66 / 96%);
+  --fs-select-hover: rgb(140 200 255 / 14%);
+  --fs-select-accent: var(--fx-gold);
+  --fs-select-radius: 12px;
+  --fs-select-shadow: 0 16px 36px rgb(2 12 26 / 70%);
+}
+.fishies-admin {
+  --fs-select-ink: var(--admin-ink, #edf5f5);
+  --fs-select-muted: var(--admin-muted, #a5bac2);
+  --fs-select-line: #385966;
+  --fs-select-bg: #061c28;
+  --fs-select-panel: #0b2531f7;
+  --fs-select-hover: #17394a;
+  --fs-select-accent: var(--admin-gold, #ffc46b);
+  --fs-select-radius: 9px;
+}
+.fishies-env {
+  --fs-select-ink: var(--env-ink, #edf5f5);
+  --fs-select-muted: var(--env-muted, #a5bac2);
+  --fs-select-line: var(--env-line, #385966);
+  --fs-select-bg: #102c38;
+  --fs-select-panel: #0c2530f7;
+  --fs-select-hover: #17394a;
+  --fs-select-accent: var(--env-accent, #ffc46b);
+}
+
+.fs-select.fs-select {
+  display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px;
+  min-width: 0; max-width: 100%; min-height: 40px; margin: 0; padding: 8px 12px;
+  border: 1px solid var(--fs-select-line); border-radius: var(--fs-select-radius);
+  background: var(--fs-select-bg); color: var(--fs-select-ink);
+  font: var(--fs-select-font) var(--font-ui), system-ui, sans-serif; letter-spacing: 0; text-align: left; text-transform: none;
+  box-shadow: none; text-shadow: none; cursor: pointer; transition: border-color .15s, background .15s;
+}
+.fs-select.fs-select:hover:not(:disabled), .fs-select.fs-select.is-open { border-color: color-mix(in srgb, var(--fs-select-accent) 55%, transparent); }
+.fs-select.fs-select:disabled { opacity: .55; cursor: not-allowed; }
+.fs-select.fs-select:focus-visible { outline: 2px solid var(--fs-select-accent); outline-offset: 2px; }
+.fs-select .fs-select-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fs-select i { flex: none; margin-left: auto; color: var(--fs-select-muted); font-size: 14px; font-style: normal; line-height: 1; transition: transform .15s; }
+.fs-select.is-open i { transform: rotate(180deg); }
+.fs-select-icon { display: inline-grid; place-items: center; flex: none; width: 20px; }
+.fs-select.fs-select.fs-select-compact { min-height: 32px; padding: 5px 10px; gap: 6px; }
+
+.fs-select-popover {
+  width: max-content;
+  position: fixed; z-index: 10000; box-sizing: border-box; margin: 0; padding: 5px; list-style: none;
+  overflow-y: auto; overscroll-behavior: contain;
+  border: 1px solid var(--fs-select-line); border-radius: var(--fs-select-radius);
+  background: var(--fs-select-panel); color: var(--fs-select-ink); box-shadow: var(--fs-select-shadow);
+  font: var(--fs-select-font) var(--font-ui), system-ui, sans-serif; color-scheme: dark;
+  animation: fs-select-in .12s ease-out;
+}
+.fs-select-popover.is-up { animation-name: fs-select-in-up; }
+.fs-select-popover li {
+  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
+  min-height: 36px; padding: 7px 9px; border-radius: max(4px, calc(var(--fs-select-radius) - 3px));
+  color: var(--fs-select-ink); cursor: pointer; user-select: none;
+}
+.fs-select-popover li > span:not(.fs-select-icon) { grid-column: 2; overflow-wrap: anywhere; }
+.fs-select-popover li.is-active, .fs-select-popover li[aria-selected=true] { background: var(--fs-select-hover); }
+.fs-select-popover li[aria-disabled=true] { opacity: .45; cursor: not-allowed; }
+.fs-select-popover b { grid-column: 3; color: var(--fs-select-accent); }
+.fs-select-popover.fs-select-compact li { min-height: 32px; padding: 5px 8px; }
+@media (pointer: coarse) {
+  .fs-select-popover li, .fs-select-popover.fs-select-compact li { min-height: 44px; }
+}
+@media (prefers-reduced-motion: reduce) { .fs-select-popover { animation: none; } }
+@keyframes fs-select-in { from { opacity: 0; transform: translateY(-4px); } }
+@keyframes fs-select-in-up { from { opacity: 0; transform: translateY(4px); } }
+.fs-select-popover li.is-active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fs-select-accent) 40%, transparent); }

package/dist/tokens.d.ts

@@ -0,0 +1,17 @@
+export type Token = {
+    readonly name: `--${string}`;
+    readonly value?: string;
+    readonly use?: string;
+};
+export type TokenGroup = {
+    readonly id: 'brand' | 'water' | 'ink' | 'gold' | 'tone' | 'glass' | 'rim' | 'depth' | 'type' | 'radius' | 'space' | 'layer' | 'motion';
+    readonly title: string;
+    readonly use: string;
+    readonly swatch: 'colour' | 'surface' | 'shadow' | 'text' | 'radius' | 'space' | 'layer' | 'motion' | 'font';
+    readonly slot?: true;
+    readonly tokens: readonly Token[];
+};
+export declare const TOKEN_GROUPS: readonly TokenGroup[];
+export declare const TOKENS: ReadonlyMap<string, Token>;
+export declare const fx: (name: Token['name']) => string;
+export declare function tokensCss(): string;

package/dist/tokens.generated.css

@@ -0,0 +1,97 @@
+:root {
+  
+  --fx-ground: #071a24;
+  --fx-ground-ink: #edf5ed;
+  --fx-gold: #ffc46b;
+  --fx-sea: #83cfbd;
+  --fx-muted: #adc3c7;
+  
+  --fx-abyss: #04101b;
+  --fx-deep: #08202f;
+  --fx-deep-2: #0d2c3f;
+  --fx-deep-3: #14435c;
+  --fx-navy: #173d63;
+  
+  --fx-ink: #eef6ff;
+  --fx-ink-2: rgb(238 246 255 / 80%);
+  --fx-ink-3: rgb(238 246 255 / 62%);
+  --fx-ink-blue: #a9c9ea;
+  --fx-ink-on-gold: #12304a;
+  
+  --fx-gold-light: #ffe2a6;
+  --fx-gold-face: #ffe4a8;
+  --fx-gold-deep: #e59a3e;
+  --fx-gold-foot: #c88a3d;
+  --fx-gold-warm: #ff9a6b;
+  --fx-amber: #f4c656;
+  
+  --fx-tone-sky: #6cc8ff;
+  --fx-tone-coral: #ff8f87;
+  --fx-tone-kelp: #7fdc8f;
+  --fx-tone-violet: #b8a2ff;
+  --fx-tone-lagoon: #5cd8c6;
+  --fx-tone-mute: #8fa7b5;
+  --fx-good: #6fe3b0;
+  --fx-alarm: #ff8478;
+  --fx-pearl: #fff4d6;
+  --fx-cream: #f3dfb2;
+  --fx-plum: #36203f;
+  
+  --fx-glass-top: rgb(22 58 120 / 70%);
+  --fx-glass-bottom: rgb(8 26 66 / 88%);
+  --fx-glass-quiet-top: rgb(22 58 120 / 62%);
+  --fx-glass-quiet-bottom: rgb(8 26 66 / 82%);
+  --fx-glass-sheen: rgb(255 255 255 / 16%);
+  --fx-glass: linear-gradient(180deg, var(--fx-glass-sheen), transparent 46%), linear-gradient(180deg, var(--fx-glass-top), var(--fx-glass-bottom));
+  --fx-glass-quiet: linear-gradient(180deg, var(--fx-glass-sheen), transparent 46%), linear-gradient(180deg, var(--fx-glass-quiet-top), var(--fx-glass-quiet-bottom));
+  --fx-glass-well: rgb(4 16 30 / 55%);
+  --fx-glass-blur: blur(14px) saturate(1.2);
+  
+  --fx-rim: rgb(140 200 255 / 34%);
+  --fx-rim-bright: rgb(140 200 255 / 55%);
+  --fx-gold-rim: rgb(255 196 107 / 58%);
+  --fx-gold-rim-quiet: rgb(255 196 107 / 26%);
+  --fx-rim-light: inset 0 1px rgb(255 240 210 / 30%);
+  --fx-ground-rim: #9ebfbe26;
+  
+  --fx-lift-1: 0 2px 10px rgb(2 10 18 / 34%);
+  --fx-lift-2: 0 10px 30px rgb(2 8 20 / 45%);
+  --fx-lift-3: 0 24px 60px rgb(2 8 20 / 60%);
+  --fx-foot: 0 4px 0 rgb(4 18 34 / 55%);
+  --fx-foot-deep: 0 6px 0 rgb(4 18 34 / 55%);
+  --fx-plump: inset 0 2px rgb(255 255 255 / 40%), inset 0 -6px 12px rgb(0 0 0 / 28%);
+  --fx-on-water: 0 1px 2px #020c1a, 0 4px 16px rgb(2 12 26 / 80%);
+  
+  --fx-font-display: var(--font-display), "Baloo 2", ui-rounded, sans-serif;
+  --fx-font-ui: var(--font-ui), Nunito, ui-rounded, sans-serif;
+  --fx-t-xs: 12px;
+  --fx-t-sm: 13px;
+  --fx-t-md: 15px;
+  --fx-t-lg: 19px;
+  --fx-t-xl: 24px;
+  --fx-t-2xl: 31px;
+  --fx-t-3xl: 40px;
+  --fx-track-tight: -.015em;
+  --fx-track-label: .14em;
+  
+  --fx-r-sm: 10px;
+  --fx-r-md: 14px;
+  --fx-r-lg: 20px;
+  --fx-r-xl: 28px;
+  --fx-r-full: 999px;
+  
+  --fx-s-1: 4px;
+  --fx-s-2: 8px;
+  --fx-s-3: 12px;
+  --fx-s-4: 16px;
+  --fx-s-5: 24px;
+  --fx-s-6: 32px;
+  --fx-s-7: 48px;
+  
+  --fx-z-raised: 10;
+  --fx-z-sticky: 100;
+  --fx-z-dock: 900;
+  --fx-z-modal: 1000;
+  --fx-z-toast: 1100;
+  --fx-z-tooltip: 1200;
+}

package/dist/tokens.js

@@ -0,0 +1,175 @@
+export const TOKEN_GROUPS = [
+    {
+        id: 'brand', title: 'Brand', swatch: 'colour',
+        use: 'The five colours every store page, capsule, banner, the site and the Reef Journal sit on.',
+        tokens: [
+            { name: '--fx-ground', value: '#071a24', use: 'The night-water ground behind the site, the Reef Journal and every brand picture.' },
+            { name: '--fx-ground-ink', value: '#edf5ed', use: 'Words on the ground: headings and links on the site.' },
+            { name: '--fx-gold', value: '#ffc46b', use: 'The one warm accent: the thing to press, the coin, the playhead, a focus ring.' },
+            { name: '--fx-sea', value: '#83cfbd', use: 'Sea-green for links and quiet highlights on the ground.' },
+            { name: '--fx-muted', value: '#adc3c7', use: 'Body copy on the ground, a step quieter than the headings.' },
+        ],
+    },
+    {
+        id: 'water', title: 'Water', swatch: 'colour',
+        use: 'The deep blues under the glass; each one is the water a few metres further down.',
+        tokens: [
+            { name: '--fx-abyss', value: '#04101b', use: 'The deepest water: behind full-screen moments and the video frame.' },
+            { name: '--fx-deep', value: '#08202f', use: 'A sunken well inside a panel: inputs, tracks, empty slots.' },
+            { name: '--fx-deep-2', value: '#0d2c3f', use: 'A raised well: a hovered row, a chosen tab’s ground.' },
+            { name: '--fx-deep-3', value: '#14435c', use: 'The lightest deep: dividers that need to show on glass.' },
+            { name: '--fx-navy', value: '#173d63', use: 'The body of a round toy button (window controls, the player’s buttons).' },
+        ],
+    },
+    {
+        id: 'ink', title: 'Ink', swatch: 'colour',
+        use: 'Words on glass, in three weights; the quietest still reads at 6.7:1 on a panel.',
+        tokens: [
+            { name: '--fx-ink', value: '#eef6ff', use: 'Everything a player reads on glass: titles, values, labels.' },
+            { name: '--fx-ink-2', value: 'rgb(238 246 255 / 80%)', use: 'Sentences under a title.' },
+            { name: '--fx-ink-3', value: 'rgb(238 246 255 / 62%)', use: 'Captions, units and hints; never anything a player must act on.' },
+            { name: '--fx-ink-blue', value: '#a9c9ea', use: 'Labels that name a value beside it (Level, Coins, Fish).' },
+            { name: '--fx-ink-on-gold', value: '#12304a', use: 'Words on a gold button or a gold chip.' },
+        ],
+    },
+    {
+        id: 'gold', title: 'Gold', swatch: 'colour',
+        use: 'The toy gold of the HUD: a face, a rim and a darker foot that makes a button sit up.',
+        tokens: [
+            { name: '--fx-gold-light', value: '#ffe2a6', use: 'Gold words on glass: window titles, the clock, numbers that matter.' },
+            { name: '--fx-gold-face', value: '#ffe4a8', use: 'The lit top of a gold button.' },
+            { name: '--fx-gold-deep', value: '#e59a3e', use: 'The far end of a gold fill: a progress bar, the played part of a video.' },
+            { name: '--fx-gold-foot', value: '#c88a3d', use: 'The solid edge under a gold button, its toy thickness.' },
+            { name: '--fx-gold-warm', value: '#ff9a6b', use: 'Gold leaning to coral, where a fill runs warm (sunrise, a streak).' },
+            { name: '--fx-amber', value: '#f4c656', use: 'The landing’s amber: the wordmark’s gleam and the reel’s titles.' },
+        ],
+    },
+    {
+        id: 'tone', title: 'Tones', swatch: 'colour',
+        use: 'Six hues that tell kinds apart (an app tile, a chip, a chart line) and two that mean good and bad.',
+        tokens: [
+            { name: '--fx-tone-sky', value: '#6cc8ff', use: 'Sky blue: water, visits, anything about other keepers.' },
+            { name: '--fx-tone-coral', value: '#ff8f87', use: 'Coral: reports, a count that wants you, the close button.' },
+            { name: '--fx-tone-kelp', value: '#7fdc8f', use: 'Kelp green: live, online, growing.' },
+            { name: '--fx-tone-violet', value: '#b8a2ff', use: 'Violet: rare things and night.' },
+            { name: '--fx-tone-lagoon', value: '#5cd8c6', use: 'Lagoon: the landing’s shallow water.' },
+            { name: '--fx-tone-mute', value: '#8fa7b5', use: 'Grey-blue: off, empty, not yet.' },
+            { name: '--fx-good', value: '#6fe3b0', use: 'Done, fed, clean, saved.' },
+            { name: '--fx-alarm', value: '#ff8478', use: 'Hungry, dirty, failed: what needs a hand now.' },
+            { name: '--fx-pearl', value: '#fff4d6', use: 'Pearl: the warm white of a badge rim and the landing’s cream.' },
+            { name: '--fx-cream', value: '#f3dfb2', use: 'Cream: the shaded side of a pearl knob, warm sand.' },
+            { name: '--fx-plum', value: '#36203f', use: 'Plum: the landing’s deep warm shadow under cream.' },
+        ],
+    },
+    {
+        id: 'glass', title: 'Glass', swatch: 'surface',
+        use: 'The one material everything floats on: tinted water glass with a sheen across its top.',
+        tokens: [
+            { name: '--fx-glass-top', value: 'rgb(22 58 120 / 70%)', use: 'The upper tint of glass.' },
+            { name: '--fx-glass-bottom', value: 'rgb(8 26 66 / 88%)', use: 'The lower tint of glass, darker so words sit on it.' },
+            { name: '--fx-glass-quiet-top', value: 'rgb(22 58 120 / 62%)', use: 'Glass over the live tank, a little thinner so the fish show through.' },
+            { name: '--fx-glass-quiet-bottom', value: 'rgb(8 26 66 / 82%)', use: 'The lower tint of quiet glass.' },
+            { name: '--fx-glass-sheen', value: 'rgb(255 255 255 / 16%)', use: 'The light across the top half of a pane.' },
+            { name: '--fx-glass', value: 'linear-gradient(180deg, var(--fx-glass-sheen), transparent 46%), linear-gradient(180deg, var(--fx-glass-top), var(--fx-glass-bottom))', use: 'A pane: windows, panels, menus, the dock.' },
+            { name: '--fx-glass-quiet', value: 'linear-gradient(180deg, var(--fx-glass-sheen), transparent 46%), linear-gradient(180deg, var(--fx-glass-quiet-top), var(--fx-glass-quiet-bottom))', use: 'A pane over the tank: HUD capsules, the fish card.' },
+            { name: '--fx-glass-well', value: 'rgb(4 16 30 / 55%)', use: 'The darker water inside a window, under its title bar.' },
+            { name: '--fx-glass-blur', value: 'blur(14px) saturate(1.2)', use: 'What glass does to the reef behind it (backdrop-filter).' },
+        ],
+    },
+    {
+        id: 'rim', title: 'Rims', swatch: 'surface',
+        use: 'A hairline of light round every pane; gold marks the panes that are yours to use.',
+        tokens: [
+            { name: '--fx-rim', value: 'rgb(140 200 255 / 34%)', use: 'The blue hairline round glass.' },
+            { name: '--fx-rim-bright', value: 'rgb(140 200 255 / 55%)', use: 'The hairline on hover.' },
+            { name: '--fx-gold-rim', value: 'rgb(255 196 107 / 58%)', use: 'The gold hairline round windows, the dock, tiles and the chosen tab.' },
+            { name: '--fx-gold-rim-quiet', value: 'rgb(255 196 107 / 26%)', use: 'Gold dividers: under a title bar, between dock groups.' },
+            { name: '--fx-rim-light', value: 'inset 0 1px rgb(255 240 210 / 30%)', use: 'The lit inner top edge of a gold-rimmed pane.' },
+            { name: '--fx-ground-rim', value: '#9ebfbe26', use: 'Hairlines on the ground: card edges and rules between sections of the site.' },
+        ],
+    },
+    {
+        id: 'depth', title: 'Depth', swatch: 'shadow',
+        use: 'Soft lifts for panes over water, and the solid foot that makes a toy control look pressable.',
+        tokens: [
+            { name: '--fx-lift-1', value: '0 2px 10px rgb(2 10 18 / 34%)', use: 'A chip or a small button just off the water.' },
+            { name: '--fx-lift-2', value: '0 10px 30px rgb(2 8 20 / 45%)', use: 'A panel, the dock, a menu.' },
+            { name: '--fx-lift-3', value: '0 24px 60px rgb(2 8 20 / 60%)', use: 'A window or a moment that takes the screen.' },
+            { name: '--fx-foot', value: '0 4px 0 rgb(4 18 34 / 55%)', use: 'The toy foot under a glass button or tile; pressing sinks into it.' },
+            { name: '--fx-foot-deep', value: '0 6px 0 rgb(4 18 34 / 55%)', use: 'The foot under a desktop tile, which stands taller.' },
+            { name: '--fx-plump', value: 'inset 0 2px rgb(255 255 255 / 40%), inset 0 -6px 12px rgb(0 0 0 / 28%)', use: 'The lit top and shaded belly that make a tile round.' },
+            { name: '--fx-on-water', value: '0 1px 2px #020c1a, 0 4px 16px rgb(2 12 26 / 80%)', use: 'The shadow under words that sit straight on the water.' },
+        ],
+    },
+    {
+        id: 'type', title: 'Type', swatch: 'text',
+        use: 'Baloo 2 for the game’s voice (numbers, labels, buttons, titles), Nunito for sentences; nothing under 12px.',
+        tokens: [
+            { name: '--fx-font-display', value: 'var(--font-display), "Baloo 2", ui-rounded, sans-serif', use: 'Titles, numbers, buttons, labels.' },
+            { name: '--fx-font-ui', value: 'var(--font-ui), Nunito, ui-rounded, sans-serif', use: 'Sentences and anything read as text.' },
+            { name: '--fx-t-xs', value: '12px', use: 'The floor: units, captions, a badge’s count.' },
+            { name: '--fx-t-sm', value: '13px', use: 'Chips, list details, helper lines.' },
+            { name: '--fx-t-md', value: '15px', use: 'Buttons, list titles, body copy in the game.' },
+            { name: '--fx-t-lg', value: '19px', use: 'A panel’s title.' },
+            { name: '--fx-t-xl', value: '24px', use: 'A stat’s value, a window’s hero number.' },
+            { name: '--fx-t-2xl', value: '31px', use: 'A page heading.' },
+            { name: '--fx-t-3xl', value: '40px', use: 'A moment’s headline (level up, a new fish).' },
+            { name: '--fx-track-tight', value: '-.015em', use: 'Display type at size.' },
+            { name: '--fx-track-label', value: '.14em', use: 'Upper-case eyebrows above a group.' },
+        ],
+    },
+    {
+        id: 'radius', title: 'Radii', swatch: 'radius',
+        use: 'Round, never sharp: the smaller the thing, the rounder it reads.',
+        tokens: [
+            { name: '--fx-r-sm', value: '10px', use: 'Rows, inputs, keys.' },
+            { name: '--fx-r-md', value: '14px', use: 'Cards, menus, tooltips.' },
+            { name: '--fx-r-lg', value: '20px', use: 'Panels and windows.' },
+            { name: '--fx-r-xl', value: '28px', use: 'Desktop tiles and the dock.' },
+            { name: '--fx-r-full', value: '999px', use: 'Buttons, chips, tabs, badges, tracks.' },
+        ],
+    },
+    {
+        id: 'space', title: 'Spacing', swatch: 'space',
+        use: 'A 4px grid: every gap, padding and margin is one of these.',
+        tokens: [
+            { name: '--fx-s-1', value: '4px', use: 'Inside a chip, between a value and its unit.' },
+            { name: '--fx-s-2', value: '8px', use: 'Between an icon and its label, between chips.' },
+            { name: '--fx-s-3', value: '12px', use: 'Inside a button, between rows.' },
+            { name: '--fx-s-4', value: '16px', use: 'A card’s inset.' },
+            { name: '--fx-s-5', value: '24px', use: 'A panel’s inset, between groups.' },
+            { name: '--fx-s-6', value: '32px', use: 'Between sections of a page.' },
+            { name: '--fx-s-7', value: '48px', use: 'Around a page’s hero.' },
+        ],
+    },
+    {
+        id: 'layer', title: 'Layers', swatch: 'layer',
+        use: 'Named heights, so a toast never slides under a window and a tooltip never under a toast.',
+        tokens: [
+            { name: '--fx-z-raised', value: '10', use: 'A card lifted above its siblings (a dragged tile).' },
+            { name: '--fx-z-sticky', value: '100', use: 'Headers and rails that stay as the page scrolls.' },
+            { name: '--fx-z-dock', value: '900', use: 'The menu bar and the dock.' },
+            { name: '--fx-z-modal', value: '1000', use: 'A window or sheet that holds the screen, with its backdrop.' },
+            { name: '--fx-z-toast', value: '1100', use: 'Toasts, above any window.' },
+            { name: '--fx-z-tooltip', value: '1200', use: 'Tooltips and open menus, above everything.' },
+        ],
+    },
+    {
+        id: 'motion', title: 'Motion', swatch: 'motion', slot: true,
+        use: 'Named slots the motion system fills (apps/web/app/motion/motion.css, where each one is described): arrivals overshoot a little and settle, presses squash, exits get out of the way.',
+        tokens: ['--m-quick', '--m-base', '--m-move', '--m-show', '--m-ease-out', '--m-ease-spring', '--m-ease-calm', '--m-ease-in', '--m-stagger'].map(name => ({ name: name })),
+    },
+];
+export const TOKENS = new Map(TOKEN_GROUPS.flatMap(group => group.tokens.map(token => [token.name, token])));
+export const fx = (name) => `var(${name})`;
+export function tokensCss() {
+    const lines = [];
+    for (const group of TOKEN_GROUPS) {
+        if (group.slot)
+            continue;
+        lines.push(`  /* ${group.title} */`);
+        for (const token of group.tokens)
+            lines.push(`  ${token.name}: ${token.value};`);
+    }
+    return `:root {\n${lines.join('\n')}\n}\n`;
+}