@fishies/ui 0.8.3

package/src/icons.ts

@@ -0,0 +1,74 @@
+export type IconGroup = 'care' | 'places' | 'system' | 'things' | 'expressions'
+
+export const ICON_GROUPS: readonly { readonly id: IconGroup; readonly title: string; readonly use: string }[] = [
+  { id: 'care', title: 'Care tools', use: 'The verbs of keeping fish: the dock’s tools and the cursors they become.' },
+  { id: 'places', title: 'Places and lists', use: 'Where you can go and what you can open: rooms, shop, stash, map, people.' },
+  { id: 'system', title: 'System', use: 'Settings, sound, notices and the frame: the same in the game, the OS and the player.' },
+  { id: 'things', title: 'Things', use: 'Nouns of the reef: coins, fish, eggs, plants, rewards.' },
+  { id: 'expressions', title: 'Expressions', use: 'The emotes keepers send in Open Water and the chat.' },
+]
+
+export type SystemIcon = {
+  readonly name: string
+  readonly file: string
+  readonly label: string
+
+  readonly meaning: string
+  readonly group: IconGroup
+}
+
+const ui = (name: string, label: string, group: IconGroup, meaning: string): SystemIcon => ({ name, file: `/game/ui-icons/${name}.png`, label, group, meaning })
+const emote = (name: string, label: string, meaning: string): SystemIcon => ({ name: `emote-${name}`, file: `/game/emotes/${name}.png`, label, group: 'expressions', meaning })
+
+export const SYSTEM_ICONS = [
+  ui('feed', 'Feed', 'care', 'give fish food'), ui('net', 'Net', 'care', 'catch a fish to sell or move'), ui('clean', 'Clean', 'care', 'wipe the glass'),
+  ui('decorate', 'Decorate', 'care', 'place a new decoration'), ui('arrange', 'Arrange', 'care', 'move what is already placed'),
+  ui('remedy', 'Remedy', 'care', 'heal a sick fish'), ui('inspect', 'Inspect', 'care', 'look closer at a fish'),
+  ui('home', 'Home', 'places', 'your own aquarium'), ui('explore', 'Explore', 'places', 'find other keepers'), ui('map', 'Map', 'places', 'the ocean map and its places'),
+  ui('shop', 'Shop', 'places', 'buy fish, decor and care'), ui('cart', 'Cart', 'places', 'open the basket'), ui('cart-add', 'Add to cart', 'places', 'put something in the basket'),
+  ui('inventory', 'Stash', 'places', 'what you own but have not placed'), ui('book', 'Book', 'places', 'the Reef Journal and guides'),
+  ui('people', 'People', 'places', 'keepers, friends, followers'), ui('share', 'Share', 'places', 'send a link elsewhere'), ui('pin', 'Pin', 'places', 'keep it on top'),
+  ui('menu', 'Menu', 'system', 'more choices'), ui('bell', 'Notices', 'system', 'what happened while you were away'), ui('gear', 'Settings', 'system', 'change how it works'),
+  ui('help', 'Help', 'system', 'ask or learn how'), ui('sound', 'Sound', 'system', 'sound is on'), ui('mute', 'Muted', 'system', 'sound is off'),
+  ui('music', 'Music', 'system', 'the soundtrack'), ui('fullscreen', 'Full screen', 'system', 'fill the screen'), ui('camera', 'Camera', 'system', 'take a picture or a video'),
+  ui('coin', 'Coin', 'things', 'money in the game'), ui('fish', 'Fish', 'things', 'a fish, the game itself'), ui('egg', 'Egg', 'things', 'an egg, something hatching'),
+  ui('growth', 'Growth', 'things', 'growing up, rising numbers'), ui('heart', 'Heart', 'things', 'a like, kindness'), ui('star', 'Star', 'things', 'level, favourite, reward'),
+  ui('shell', 'Shell', 'things', 'a shell, reef chat'), ui('kelp', 'Kelp', 'things', 'plants'), ui('coral', 'Coral', 'things', 'coral and ornaments'),
+  ui('lock', 'Locked', 'system', 'closed, cannot be changed or answered'), ui('solved', 'Solved', 'things', 'answered, done, approved'),
+  ui('staff', 'Staff', 'things', 'someone from the Fishies team'), ui('edit', 'Edit', 'system', 'change words, or was changed'),
+  ui('upvote', 'Upvote', 'things', 'this is useful, raise it'), ui('report', 'Report', 'system', 'tell the team something is wrong'),
+  ui('follow', 'Follow', 'system', 'get notices about it'), ui('views', 'Views', 'things', 'how many looked, who can see it'),
+  ui('chat', 'Chat', 'places', 'a conversation, replies, general talk'),
+  ui('announce', 'Announcements', 'places', 'news from the team'), ui('updates', 'Updates', 'places', 'patch notes and what changed'),
+  ui('bug', 'Bugs', 'places', 'something broken'), ui('idea', 'Ideas', 'places', 'a suggestion'),
+
+  ui('reply', 'Reply', 'system', 'answer this'), ui('quote', 'Quote', 'system', "repeat someone's words in yours"),
+  ui('clock', 'Time', 'system', 'when, how long, last activity, away'), ui('showcase', 'Showcase', 'places', 'show what you made'),
+  ui('tank', 'Aquarium', 'things', 'an aquarium you own or buy'), ui('block', 'Block', 'system', 'block a keeper, ban'),
+  ui('trash', 'Remove', 'system', 'remove, delete'), ui('link', 'Link', 'system', 'copy or open a link'),
+  ui('smile', 'Emoji', 'system', 'pick an emoji'), ui('send', 'Send', 'system', 'send a message or post'),
+  ui('whisper', 'Whisper', 'places', 'a private message'), ui('wave', 'Open water', 'places', 'open water, the reef lane'),
+  ui('thermometer', 'Temperature', 'care', 'water temperature, the heater'), ui('drop', 'Water', 'care', 'water quality'),
+  ui('warning', 'Warning', 'system', 'warning, danger'), ui('gift', 'Gift', 'things', 'gifts, something given'),
+  ui('gem', 'Grade', 'things', 'quality tier, grade'), ui('trophy', 'Trophy', 'things', 'achievements, badges'),
+  ui('level', 'Level', 'things', 'level, XP, level-up'), ui('quest', 'Quest', 'things', 'a quest, a goal'),
+  ui('check', 'Done', 'system', 'done, selected, met'), ui('keeper', 'Keeper', 'places', 'an account, a person'),
+  ui('exit', 'Leave', 'system', 'sign out, quit, leave'), ui('globe', 'Language', 'system', 'language, all languages'),
+  ui('search', 'Search', 'system', 'search'), ui('sell', 'Sell', 'care', 'sell, a price'),
+  ui('keyboard', 'Keys', 'system', 'shortcuts and keys'), ui('external', 'Opens elsewhere', 'system', 'opens in a new tab'),
+  ui('add', 'New', 'system', 'new, create'), ui('download', 'Download', 'system', 'download'), ui('mail', 'Mail', 'system', 'email, the newsletter'),
+  emote('hello', 'Hello', 'wave hello'), emote('heart', 'Love', 'send love'), emote('question', 'Question', 'wonder aloud'), emote('surprise', 'Surprise', 'be surprised'),
+  emote('food', 'Food', 'ask for food'), emote('sleep', 'Sleepy', 'feel sleepy'), emote('music', 'Music', 'enjoy the music'), emote('sparkle', 'Sparkle', 'something wonderful'),
+] as const satisfies readonly SystemIcon[]
+
+export type SystemIconName = (typeof SYSTEM_ICONS)[number]['name']
+
+export const ICON_SIZES = { xs: 16, sm: 20, md: 28, lg: 46, xl: 84 } as const
+export type IconSize = keyof typeof ICON_SIZES
+
+export const iconByName = (name: string): SystemIcon | undefined => SYSTEM_ICONS.find(icon => icon.name === name)
+
+let resolveUrl = (icon: SystemIcon): string => icon.file
+
+export function configureIcons(options: { url: (icon: SystemIcon) => string }): void { resolveUrl = options.url }
+export const iconUrl = (icon: SystemIcon): string => resolveUrl(icon)

package/src/index.ts

@@ -0,0 +1,8 @@
+'use client'
+export * from './kit'
+export { TOKEN_GROUPS, TOKENS, fx, tokensCss, type Token, type TokenGroup } from './tokens'
+export { SYSTEM_ICONS, ICON_GROUPS, ICON_SIZES, iconByName, iconUrl, configureIcons, type SystemIcon as SystemIconEntry, type SystemIconName, type IconGroup, type IconSize } from './icons'
+export { ICON_FACTS } from './icons.generated'
+export { SPINNER_SVG, svgDataUri } from './loader'
+export { FX_IMAGE_SCRIPT, reveal } from './fx-image'
+export type { SelectOption } from './Select'

package/src/kit.css

@@ -0,0 +1,267 @@
+@layer base, skin, system, responsive, kit;
+
+@layer kit {
+  
+  .fx-icon { display: inline-grid; place-items: center; flex: none; line-height: 0; }
+  .fx-icon img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
+
+  
+  .fx-button {
+    position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--fx-s-2);
+    min-height: 46px; padding: 0 var(--fx-s-5); border: 1px solid var(--fx-rim); border-radius: var(--fx-r-full);
+    font: 800 var(--fx-t-md)/1 var(--fx-font-display); letter-spacing: var(--fx-track-tight); white-space: nowrap; text-decoration: none;
+    cursor: pointer; -webkit-tap-highlight-color: transparent;
+    transition: transform var(--m-quick) var(--m-ease-spring), box-shadow var(--m-quick) var(--m-ease-out), filter var(--m-quick) var(--m-ease-out);
+  }
+  .fx-button.is-sm { min-height: 36px; padding: 0 var(--fx-s-4); font-size: var(--fx-t-sm); gap: var(--fx-s-1); }
+  .fx-button.is-lg { min-height: 56px; padding: 0 var(--fx-s-6); font-size: var(--fx-t-lg); }
+  .fx-button:focus-visible { outline: 3px solid var(--fx-gold); outline-offset: 3px; }
+  .fx-button:disabled, .fx-button[aria-disabled='true'] { cursor: not-allowed; filter: saturate(.35) brightness(.85); transform: none; }
+  .fx-button:hover:not(:disabled) { transform: translateY(-2px); }
+  .fx-button:active:not(:disabled) { transform: translateY(2px) scale(.98); }
+
+  
+  .fx-button, .fx-button.is-glass {
+    background: var(--fx-glass); color: var(--fx-ink);
+    box-shadow: var(--fx-rim-light), var(--fx-foot);
+  }
+  .fx-button.is-glass:hover:not(:disabled), .fx-button:not([class*='is-']):hover:not(:disabled) { border-color: var(--fx-rim-bright); }
+  .fx-button:active:not(:disabled) { box-shadow: var(--fx-rim-light), 0 1px 0 rgb(4 18 34 / 55%); }
+
+  
+  :is(.fx-button.is-gold, .gold-button) {
+    border-color: var(--fx-pearl);
+    background: radial-gradient(60% 46% at 30% 10%, rgb(255 255 255 / 55%), transparent 70%), linear-gradient(180deg, var(--fx-gold-face), var(--fx-gold));
+    box-shadow: inset 0 1px rgb(255 255 255 / 55%), inset 0 -3px 6px rgb(200 138 61 / 30%), 0 3px 0 var(--fx-gold-foot), var(--fx-lift-1);
+    color: var(--fx-ink-on-gold); text-shadow: none; -webkit-text-stroke: 0;
+  }
+  :is(.fx-button.is-gold, .gold-button):hover:not(:disabled) { filter: brightness(1.05) saturate(1.05); }
+  :is(.fx-button.is-gold, .gold-button):active:not(:disabled) { box-shadow: inset 0 1px rgb(255 255 255 / 55%), inset 0 -2px 4px rgb(200 138 61 / 30%), 0 1px 0 var(--fx-gold-foot); }
+
+  
+  .fx-button.is-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--fx-ink-2); }
+  .fx-button.is-ghost:hover:not(:disabled) { background: rgb(255 255 255 / 8%); color: var(--fx-ink); transform: none; }
+  .fx-button.is-ghost:active:not(:disabled) { box-shadow: none; }
+
+  
+  .fx-button.is-danger {
+    border-color: color-mix(in oklab, var(--fx-tone-coral), white 30%);
+    background: radial-gradient(60% 46% at 30% 10%, rgb(255 255 255 / 34%), transparent 70%), linear-gradient(180deg, var(--fx-tone-coral), color-mix(in oklab, var(--fx-alarm), black 28%));
+    box-shadow: inset 0 1px rgb(255 255 255 / 40%), 0 3px 0 color-mix(in oklab, var(--fx-alarm), black 55%), var(--fx-lift-1);
+    color: white;
+  }
+  .fx-button > .fx-icon { margin-left: calc(var(--fx-s-2) * -1); }
+
+  
+  .fx-round {
+    display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0;
+    border: 1px solid var(--fx-rim); border-radius: 50%; color: var(--fx-ink); cursor: pointer;
+    background: radial-gradient(circle at 35% 28%, rgb(255 255 255 / 26%), transparent 52%), var(--fx-navy);
+    box-shadow: inset 0 -2px 4px rgb(0 0 0 / 25%), 0 2px 0 rgb(2 10 24 / 50%);
+    transition: transform var(--m-quick) var(--m-ease-spring), filter var(--m-quick) var(--m-ease-out);
+  }
+  .fx-round.is-sm { width: 30px; height: 30px; }
+  .fx-round.is-lg { width: 48px; height: 48px; }
+  .fx-round svg { width: 55%; height: 55%; }
+  .fx-round .fx-icon { width: 70%; height: 70%; }
+  .fx-round:hover:not(:disabled) { transform: translateY(-1px) scale(1.06); filter: brightness(1.1); }
+  .fx-round:active:not(:disabled) { transform: translateY(1px) scale(.94); }
+  .fx-round:focus-visible { outline: 3px solid var(--fx-gold); outline-offset: 2px; }
+  .fx-round.is-coral { border-color: color-mix(in oklab, var(--fx-tone-coral), white 30%); background: radial-gradient(circle at 35% 28%, rgb(255 255 255 / 30%), transparent 52%), color-mix(in oklab, var(--fx-alarm), black 25%); }
+  .fx-round.is-gold { border-color: var(--fx-pearl); color: var(--fx-ink-on-gold); background: radial-gradient(circle at 35% 28%, rgb(255 255 255 / 60%), transparent 52%), linear-gradient(180deg, var(--fx-gold-face), var(--fx-gold)); box-shadow: inset 0 -2px 4px rgb(200 138 61 / 35%), 0 2px 0 var(--fx-gold-foot); }
+  .fx-round[aria-pressed='true'] { border-color: var(--fx-gold-rim); box-shadow: inset 0 0 0 2px rgb(255 196 107 / 40%), 0 2px 0 rgb(2 10 24 / 50%); }
+
+  
+  .fx-chip {
+    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--fx-s-3);
+    border: 1px solid var(--fx-rim); border-radius: var(--fx-r-full); background: rgb(255 255 255 / 6%); color: var(--fx-ink);
+    font: 800 var(--fx-t-sm)/1 var(--fx-font-display); font-variant-numeric: tabular-nums; white-space: nowrap;
+    transition: background var(--m-quick) var(--m-ease-out), transform var(--m-quick) var(--m-ease-spring);
+  }
+  button.fx-chip { cursor: pointer; }
+  button.fx-chip:hover { background: rgb(255 255 255 / 13%); }
+  button.fx-chip:active { transform: scale(.95); }
+  .fx-chip:focus-visible { outline: 3px solid var(--fx-gold); outline-offset: 2px; }
+  .fx-chip > i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--fx-tone-mute)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--tone, var(--fx-tone-mute)), transparent 75%); }
+  .fx-chip .fx-icon { width: 18px; height: 18px; margin-left: -4px; }
+  .fx-chip[aria-pressed='true'], .fx-chip[aria-checked='true'], .fx-chip.is-on {
+    border-color: var(--fx-pearl); color: var(--fx-ink-on-gold);
+    background: linear-gradient(180deg, var(--fx-gold-face), var(--fx-gold)); box-shadow: inset 0 1px rgb(255 255 255 / 55%), 0 2px 0 var(--fx-gold-foot);
+  }
+
+  
+  .fx-badge {
+    display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border: 2px solid var(--fx-pearl); border-radius: var(--fx-r-full);
+    background: linear-gradient(180deg, var(--fx-tone-coral), color-mix(in oklab, var(--fx-alarm), black 22%));
+    color: white; font: 900 var(--fx-t-xs)/1 var(--fx-font-ui); font-variant-numeric: tabular-nums; box-shadow: 0 3px 8px rgb(0 0 0 / 35%);
+  }
+  .fx-badge.is-dot { min-width: 14px; width: 14px; height: 14px; padding: 0; }
+  .fx-tag {
+    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--fx-gold-rim); border-radius: var(--fx-r-full);
+    color: var(--fx-gold); font: 900 var(--fx-t-xs)/1.2 var(--fx-font-ui); letter-spacing: var(--fx-track-label); text-transform: uppercase;
+  }
+  .fx-eyebrow { display: block; color: var(--fx-gold); font: 900 var(--fx-t-xs)/1 var(--fx-font-ui); letter-spacing: var(--fx-track-label); text-transform: uppercase; }
+
+  
+  .fx-card, .fx-panel, .fx-window, .fx-dock, .fx-toast, .fx-tooltip, .fx-stat {
+    border: 1px solid var(--fx-rim); background: var(--fx-glass); color: var(--fx-ink);
+    -webkit-backdrop-filter: var(--fx-glass-blur); backdrop-filter: var(--fx-glass-blur);
+  }
+  .fx-card { display: grid; gap: var(--fx-s-2); padding: var(--fx-s-4); border-radius: var(--fx-r-md); box-shadow: var(--fx-rim-light), var(--fx-lift-2); }
+  .fx-card > h3 { margin: 0; font: 800 var(--fx-t-lg)/1.15 var(--fx-font-display); letter-spacing: var(--fx-track-tight); }
+  .fx-card > p { margin: 0; color: var(--fx-ink-2); font: 600 var(--fx-t-md)/1.5 var(--fx-font-ui); }
+
+  .fx-panel { display: flex; flex-direction: column; min-width: 0; border-color: var(--fx-gold-rim); border-radius: var(--fx-r-lg); box-shadow: var(--fx-rim-light), var(--fx-lift-2); overflow: hidden; }
+  .fx-panel-head { display: flex; align-items: center; gap: var(--fx-s-3); min-height: 56px; padding: var(--fx-s-2) var(--fx-s-3) var(--fx-s-2) var(--fx-s-4); border-bottom: 1px solid var(--fx-gold-rim-quiet); }
+  .fx-panel-head > .fx-icon { width: 30px; height: 30px; filter: drop-shadow(0 3px 3px rgb(0 0 0 / 35%)); }
+  .fx-panel-head h2 { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--fx-gold-light); font: 800 var(--fx-t-lg)/1.1 var(--fx-font-display); text-overflow: ellipsis; white-space: nowrap; }
+  .fx-panel-body { padding: var(--fx-s-4); }
+
+  .fx-window { display: flex; flex-direction: column; min-width: 0; border-color: var(--fx-gold-rim); border-radius: 22px; overflow: hidden; box-shadow: var(--fx-rim-light), 0 4px 0 rgb(4 18 34 / 50%), var(--fx-lift-3); }
+  .fx-window-bar { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 8px 6px 14px; background: linear-gradient(180deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 2%)); border-bottom: 1px solid var(--fx-gold-rim-quiet); }
+  .fx-window-bar > .fx-icon { width: 26px; height: 26px; }
+  .fx-window-bar h2 { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--fx-gold-light); font: 800 17px/1 var(--fx-font-display); text-overflow: ellipsis; white-space: nowrap; }
+  .fx-window-buttons { display: flex; gap: 6px; }
+  .fx-window-body { flex: 1; min-height: 0; overflow: auto; padding: var(--fx-s-4); background: var(--fx-glass-well); scrollbar-width: thin; }
+
+  
+  .fx-tabs { display: inline-flex; gap: 4px; max-width: 100%; padding: 4px; overflow-x: auto; border: 1px solid var(--fx-rim); border-radius: var(--fx-r-full); background: var(--fx-deep); box-shadow: inset 0 2px 6px rgb(0 0 0 / 40%); scrollbar-width: none; }
+  .fx-tab {
+    display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 var(--fx-s-4); border: 1px solid transparent; border-radius: var(--fx-r-full);
+    background: none; color: var(--fx-ink-2); font: 800 var(--fx-t-sm)/1 var(--fx-font-display); white-space: nowrap; cursor: pointer;
+    transition: background var(--m-base) var(--m-ease-out), color var(--m-base) var(--m-ease-out), transform var(--m-quick) var(--m-ease-spring);
+  }
+  .fx-tab .fx-icon { width: 22px; height: 22px; }
+  .fx-tab:hover { color: var(--fx-ink); background: rgb(255 255 255 / 7%); }
+  .fx-tab:active { transform: scale(.96); }
+  .fx-tab:focus-visible { outline: 3px solid var(--fx-gold); outline-offset: 1px; }
+  .fx-tab[aria-selected='true'] {
+    border-color: var(--fx-pearl); color: var(--fx-ink-on-gold);
+    background: linear-gradient(180deg, var(--fx-gold-face), var(--fx-gold)); box-shadow: inset 0 1px rgb(255 255 255 / 55%), 0 2px 0 var(--fx-gold-foot);
+  }
+
+  
+  .fx-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
+  .fx-row {
+    display: flex; align-items: center; gap: var(--fx-s-3); width: 100%; min-height: 56px; padding: var(--fx-s-2) var(--fx-s-3);
+    border: 1px solid transparent; border-radius: var(--fx-r-md); background: none; color: var(--fx-ink); text-align: left; font: inherit;
+    transition: background var(--m-quick) var(--m-ease-out), border-color var(--m-quick) var(--m-ease-out);
+  }
+  button.fx-row, a.fx-row { cursor: pointer; text-decoration: none; }
+  :is(button, a).fx-row:hover, .fx-row.is-on { background: rgb(108 200 255 / 14%); border-color: var(--fx-gold-rim-quiet); }
+  .fx-row:focus-visible { outline: 3px solid var(--fx-gold); outline-offset: 1px; }
+  .fx-row > .fx-icon { width: 36px; height: 36px; filter: drop-shadow(0 3px 3px rgb(0 0 0 / 30%)); }
+  .fx-row-text { display: grid; flex: 1; gap: 3px; min-width: 0; }
+  .fx-row-text b { overflow: hidden; font: 800 var(--fx-t-md)/1.15 var(--fx-font-display); text-overflow: ellipsis; white-space: nowrap; }
+  .fx-row-text small { overflow: hidden; color: var(--fx-ink-3); font: 700 var(--fx-t-sm)/1.25 var(--fx-font-ui); text-overflow: ellipsis; white-space: nowrap; }
+  .fx-row-end { flex: none; color: var(--fx-gold-light); font: 800 var(--fx-t-md)/1 var(--fx-font-display); font-variant-numeric: tabular-nums; }
+
+  
+  .fx-field { display: grid; gap: 6px; min-width: 0; }
+  .fx-field > span { color: var(--fx-ink-blue); font: 800 var(--fx-t-xs)/1 var(--fx-font-ui); letter-spacing: var(--fx-track-label); text-transform: uppercase; }
+  .fx-field > small { color: var(--fx-ink-3); font: 600 var(--fx-t-sm)/1.35 var(--fx-font-ui); }
+  .fx-input {
+    width: 100%; min-height: 46px; padding: 0 var(--fx-s-4); border: 1px solid var(--fx-rim); border-radius: var(--fx-r-full);
+    background: var(--fx-deep); color: var(--fx-ink); font: 700 var(--fx-t-md)/1.2 var(--fx-font-ui);
+    box-shadow: inset 0 2px 6px rgb(0 0 0 / 45%), 0 1px 0 rgb(255 255 255 / 7%); outline: none;
+    transition: border-color var(--m-quick) var(--m-ease-out), box-shadow var(--m-quick) var(--m-ease-out);
+  }
+  .fx-input::placeholder { color: var(--fx-ink-3); }
+  .fx-input:focus-visible { border-color: var(--fx-gold-rim); box-shadow: inset 0 2px 6px rgb(0 0 0 / 45%), 0 0 0 4px rgb(255 196 107 / 22%); }
+  .fx-input[aria-invalid='true'] { border-color: var(--fx-alarm); }
+
+  .fx-toggle { display: inline-flex; align-items: center; gap: var(--fx-s-3); color: var(--fx-ink); font: 800 var(--fx-t-md)/1.2 var(--fx-font-display); cursor: pointer; }
+  .fx-toggle > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
+  .fx-toggle > i {
+    position: relative; flex: none; width: 52px; height: 30px; border: 1px solid var(--fx-rim); border-radius: var(--fx-r-full);
+    background: var(--fx-deep); box-shadow: inset 0 2px 6px rgb(0 0 0 / 50%);
+    transition: background var(--m-base) var(--m-ease-out), border-color var(--m-base) var(--m-ease-out);
+  }
+  
+  .fx-toggle > i::after {
+    content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
+    background: radial-gradient(circle at 34% 28%, white, var(--fx-pearl) 55%, var(--fx-cream));
+    box-shadow: 0 2px 0 rgb(4 18 34 / 45%), 0 3px 8px rgb(0 0 0 / 35%);
+    transition: transform var(--m-move) var(--m-ease-spring);
+  }
+  .fx-toggle > input:checked + i { border-color: var(--fx-pearl); background: linear-gradient(180deg, var(--fx-gold-face), var(--fx-gold)); box-shadow: inset 0 2px 4px rgb(200 138 61 / 45%); }
+  .fx-toggle > input:checked + i::after { transform: translateX(22px); }
+  .fx-toggle > input:focus-visible + i { outline: 3px solid var(--fx-gold); outline-offset: 3px; }
+  .fx-toggle > input:disabled + i { filter: saturate(.3); opacity: .6; }
+
+  
+  .fx-tip { position: relative; display: inline-flex; }
+  .fx-tooltip {
+    position: absolute; z-index: var(--fx-z-tooltip); left: 50%; bottom: calc(100% + 12px); width: max-content; min-width: 180px; max-width: 280px;
+    display: grid; gap: 8px; padding: var(--fx-s-3); border-color: var(--fx-gold-rim); border-radius: var(--fx-r-md);
+    box-shadow: var(--fx-rim-light), var(--fx-lift-2); text-align: left; pointer-events: none;
+    opacity: 0; visibility: hidden; transform: translate(-50%, 6px) scale(.96); transform-origin: 50% 100%;
+    transition: opacity var(--m-base) var(--m-ease-out), transform var(--m-move) var(--m-ease-spring), visibility 0s linear var(--m-base);
+  }
+  .fx-tooltip::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; rotate: 45deg; border: solid var(--fx-gold-rim); border-width: 0 1px 1px 0; background: var(--fx-glass-bottom); }
+  .fx-tip:is(:hover, :focus-within) > .fx-tooltip, .fx-tooltip.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
+  .fx-tooltip-head { display: flex; align-items: center; gap: var(--fx-s-2); font: 800 var(--fx-t-md)/1.1 var(--fx-font-display); color: var(--fx-gold-light); }
+  .fx-tooltip-head .fx-icon { width: 26px; height: 26px; }
+  .fx-tooltip p { margin: 0; color: var(--fx-ink-2); font: 600 var(--fx-t-sm)/1.4 var(--fx-font-ui); }
+  .fx-tooltip dl { display: grid; gap: 4px; margin: 0; padding-top: 8px; border-top: 1px solid var(--fx-gold-rim-quiet); }
+  .fx-tooltip dl > div { display: flex; justify-content: space-between; gap: var(--fx-s-3); }
+  .fx-tooltip dt { color: var(--fx-ink-blue); font: 800 var(--fx-t-sm)/1.2 var(--fx-font-ui); }
+  .fx-tooltip dd { margin: 0; font: 800 var(--fx-t-sm)/1.2 var(--fx-font-display); font-variant-numeric: tabular-nums; }
+
+  
+  .fx-toast {
+    position: relative; display: flex; align-items: center; gap: var(--fx-s-3); width: min(380px, 100%); padding: var(--fx-s-3) var(--fx-s-3) var(--fx-s-3) var(--fx-s-3);
+    border-radius: var(--fx-r-lg); box-shadow: var(--fx-rim-light), var(--fx-lift-2); overflow: hidden;
+  }
+  .fx-toast::before { content: ''; position: absolute; inset: 10px auto 10px 0; width: 4px; border-radius: 0 4px 4px 0; background: var(--tone, var(--fx-gold)); }
+  .fx-toast-art { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, rgb(255 255 255 / 30%), transparent 55%), color-mix(in oklab, var(--tone, var(--fx-gold)), var(--fx-deep) 62%); box-shadow: inset 0 -3px 6px rgb(0 0 0 / 30%), 0 2px 0 rgb(2 10 24 / 45%); }
+  .fx-toast-art .fx-icon { width: 32px; height: 32px; }
+  .fx-toast-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
+  .fx-toast-text b { font: 800 var(--fx-t-md)/1.2 var(--fx-font-display); }
+  .fx-toast-text span { color: var(--fx-ink-2); font: 600 var(--fx-t-sm)/1.35 var(--fx-font-ui); }
+
+  
+  .fx-stats { display: flex; flex-wrap: wrap; gap: 10px; }
+  .fx-stat { display: inline-flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 16px 8px 10px; border-radius: 18px; box-shadow: var(--fx-rim-light), var(--fx-foot); }
+  .fx-stat > .fx-icon { width: 38px; height: 38px; filter: drop-shadow(0 3px 3px rgb(0 0 0 / 35%)); }
+  .fx-stat b { display: block; color: var(--fx-gold-light); font: 800 22px/1 var(--fx-font-display); font-variant-numeric: tabular-nums; }
+  .fx-stat b small { margin-left: 3px; color: var(--fx-ink-3); font-size: var(--fx-t-sm); }
+  .fx-stat > span > span { color: var(--fx-ink-3); font: 700 var(--fx-t-sm)/1.3 var(--fx-font-ui); }
+
+  
+  .fx-tile { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 118px; padding: 0; border: 0; background: none; color: var(--fx-ink); font: inherit; cursor: pointer; }
+  .fx-tile-glass {
+    position: relative; display: grid; place-items: center; aspect-ratio: 1; border: 1.5px solid var(--fx-gold-rim); border-radius: var(--fx-r-xl);
+    background: radial-gradient(circle at 30% 22%, rgb(255 255 255 / 34%), transparent 34%), linear-gradient(160deg, oklch(62% .12 var(--hue, 220)), oklch(36% .1 var(--hue, 220)) 70%, oklch(28% .08 var(--hue, 220)));
+    box-shadow: var(--fx-plump), var(--fx-foot-deep), var(--fx-lift-2);
+    transition: transform var(--m-quick) var(--m-ease-spring), box-shadow var(--m-quick) var(--m-ease-out);
+  }
+  .fx-tile-glass > .fx-icon { width: 62%; height: 62%; filter: drop-shadow(0 6px 6px rgb(0 0 0 / 35%)); transition: transform var(--m-move) var(--m-ease-spring); }
+  .fx-tile-glass > .fx-badge { position: absolute; top: -6px; right: -6px; }
+  .fx-tile:hover .fx-tile-glass, .fx-tile:focus-visible .fx-tile-glass { transform: translateY(-3px); }
+  .fx-tile:hover .fx-tile-glass > .fx-icon { transform: scale(1.08) rotate(-3deg); }
+  .fx-tile:active .fx-tile-glass { transform: translateY(3px); box-shadow: var(--fx-plump), 0 2px 0 rgb(4 18 34 / 55%); }
+  .fx-tile:focus-visible { outline: none; }
+  .fx-tile:focus-visible .fx-tile-glass { outline: 3px solid var(--fx-gold); outline-offset: 4px; }
+  .fx-tile.is-open .fx-tile-glass::after { content: ''; position: absolute; bottom: -12px; width: 18px; height: 5px; border-radius: 3px; background: var(--fx-gold); box-shadow: 0 0 10px var(--fx-gold); }
+  .fx-tile-title { text-align: center; font: 800 var(--fx-t-md)/1.2 var(--fx-font-display); text-shadow: var(--fx-on-water); }
+
+  .fx-dock { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 8px 10px; overflow-x: auto; border-color: var(--fx-gold-rim); border-radius: var(--fx-r-xl); box-shadow: var(--fx-rim-light), var(--fx-lift-2); scrollbar-width: none; }
+  .fx-dock-item {
+    position: relative; flex: none; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 18px; background: none; cursor: pointer;
+    transition: transform var(--m-quick) var(--m-ease-spring), background var(--m-quick) var(--m-ease-out);
+  }
+  .fx-dock-item:hover { background: rgb(255 255 255 / 8%); transform: translateY(-4px) scale(1.06); }
+  .fx-dock-item:focus-visible { outline: 3px solid var(--fx-gold); outline-offset: 1px; }
+  .fx-dock-item > .fx-icon { width: 46px; height: 46px; filter: drop-shadow(0 4px 4px rgb(0 0 0 / 35%)); }
+  .fx-dock-item > i { position: absolute; bottom: 1px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; }
+  .fx-dock-item.is-open > i { background: var(--fx-ink-2); }
+  .fx-dock-item.is-front > i { width: 16px; margin-left: -8px; border-radius: 3px; background: var(--fx-gold); box-shadow: 0 0 8px var(--fx-gold); }
+  .fx-dock-item > .fx-badge { position: absolute; top: 0; right: 0; }
+  .fx-dock-sep { flex: none; width: 1px; height: 40px; margin: 0 4px; background: var(--fx-gold-rim-quiet); }
+
+  @media (prefers-reduced-motion: reduce) {
+    :is(.fx-button, .fx-round, .fx-tile-glass, .fx-dock-item, .fx-tab, .fx-chip):is(:hover, :active) { transform: none !important; }
+    .fx-tile:hover .fx-tile-glass > .fx-icon { transform: none; }
+  }
+}

package/src/kit.tsx

@@ -0,0 +1,190 @@
+'use client'
+
+import { useId, useState, type AnchorHTMLAttributes, type ButtonHTMLAttributes, type CSSProperties, type InputHTMLAttributes, type ReactNode } from 'react'
+import FishiesImg from './FishiesImg'
+import { ICON_SIZES, iconByName, iconUrl, type IconSize, type SystemIconName } from './icons'
+import './kit.css'
+
+const cx = (...names: (string | false | null | undefined)[]) => names.filter(Boolean).join(' ')
+const px = (size: IconSize | number) => typeof size === 'number' ? size : ICON_SIZES[size]
+
+export function SystemIcon({ name, size = 'md', fallback, className }: { name: SystemIconName; size?: IconSize | number; fallback?: ReactNode; className?: string }) {
+  const [failed, setFailed] = useState(false)
+  const icon = iconByName(name)
+  const side = px(size)
+  if (!icon || failed) return fallback ? <>{fallback}</> : null
+  return <span className={cx('fx-icon', className)} style={{ width: side, height: side }} aria-hidden="true">
+    <FishiesImg src={iconUrl(icon)} width={side} height={side} alt="" draggable={false} decoding="async" onError={() => setFailed(true)}/>
+  </span>
+}
+
+export type ButtonTone = 'glass' | 'gold' | 'ghost' | 'danger'
+type ButtonOwn = { tone?: ButtonTone; size?: 'sm' | 'md' | 'lg'; icon?: SystemIconName; children?: ReactNode }
+
+/** A plump toy button: glass for everyday actions, gold for the one thing to press, ghost for a quiet third choice, danger for what cannot be undone. */
+export function Button({ tone = 'glass', size = 'md', icon, children, className, type = 'button', ...rest }: ButtonOwn & ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <button type={type} className={cx('fx-button', `is-${tone}`, size !== 'md' && `is-${size}`, className)} {...rest}>
+    {icon && <SystemIcon name={icon} size={size === 'lg' ? 30 : size === 'sm' ? 20 : 26}/>}{children}
+  </button>
+}
+
+/** The same button as a link, for an action that goes somewhere. */
+export function ButtonLink({ tone = 'glass', size = 'md', icon, children, className, ...rest }: ButtonOwn & AnchorHTMLAttributes<HTMLAnchorElement>) {
+  return <a className={cx('fx-button', `is-${tone}`, size !== 'md' && `is-${size}`, className)} {...rest}>
+    {icon && <SystemIcon name={icon} size={size === 'lg' ? 30 : size === 'sm' ? 20 : 26}/>}{children}
+  </a>
+}
+
+/** A round toy button for window controls, the video player and close; `label` is what it says to a screen reader. */
+export function RoundButton({ label, tone = 'navy', size = 'md', icon, children, className, type = 'button', ...rest }: { label: string; tone?: 'navy' | 'coral' | 'gold'; size?: 'sm' | 'md' | 'lg'; icon?: SystemIconName; children?: ReactNode } & ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <button type={type} aria-label={label} title={label} className={cx('fx-round', tone !== 'navy' && `is-${tone}`, size !== 'md' && `is-${size}`, className)} {...rest}>
+    {icon ? <SystemIcon name={icon} size={size === 'lg' ? 34 : 26}/> : children}
+  </button>
+}
+
+/** A small reading or choice: a dot of colour for a kind, an icon, or gold when chosen. */
+export function Chip({ tone, icon, selected, onClick, children, className }: { tone?: string; icon?: SystemIconName; selected?: boolean; onClick?: () => void; children: ReactNode; className?: string }) {
+  const style = tone ? { '--tone': tone } as CSSProperties : undefined
+  const inner = <>{tone && <i aria-hidden="true"/>}{icon && <SystemIcon name={icon} size={18}/>}{children}</>
+  return onClick
+    ? <button type="button" className={cx('fx-chip', className)} style={style} aria-pressed={selected} onClick={onClick}>{inner}</button>
+    : <span className={cx('fx-chip', selected && 'is-on', className)} style={style}>{inner}</span>
+}
+
+export function Badge({ count, label }: { count?: number; label?: string }) {
+  return count === undefined
+    ? <span className="fx-badge is-dot" role="status" aria-label={label}/>
+    : <span className="fx-badge" role="status" aria-label={label}>{count > 99 ? '99+' : count}</span>
+}
+
+export function Tag({ children }: { children: ReactNode }) {
+  return <span className="fx-tag">{children}</span>
+}
+
+/** A glass card: an optional eyebrow, a title and a few lines. */
+export function Card({ eyebrow, title, children, className }: { eyebrow?: string; title?: ReactNode; children?: ReactNode; className?: string }) {
+  return <article className={cx('fx-card', className)}>
+    {eyebrow && <span className="fx-eyebrow">{eyebrow}</span>}
+    {title && <h3>{title}</h3>}
+    {children}
+  </article>
+}
+
+export function Panel({ title, icon, actions, children, className, style }: { title: ReactNode; icon?: SystemIconName; actions?: ReactNode; children?: ReactNode; className?: string; style?: CSSProperties }) {
+  return <section className={cx('fx-panel', className)} style={style}>
+    <header className="fx-panel-head">{icon && <SystemIcon name={icon} size={30}/>}<h2>{title}</h2>{actions}</header>
+    <div className="fx-panel-body">{children}</div>
+  </section>
+}
+
+/** A Keeper OS window frame: a title bar with round minimise and close buttons over a darker well. */
+export function Window({ title, icon, onClose, onMinimize, closeLabel = 'Close', minimizeLabel = 'Minimise', children, className, style }: {
+  title: ReactNode; icon?: SystemIconName; onClose?: () => void; onMinimize?: () => void; closeLabel?: string; minimizeLabel?: string
+  children?: ReactNode; className?: string; style?: CSSProperties
+}) {
+  return <section className={cx('fx-window', className)} style={style} role="dialog" aria-label={typeof title === 'string' ? title : undefined}>
+    <header className="fx-window-bar">
+      {icon && <SystemIcon name={icon} size={26}/>}
+      <h2>{title}</h2>
+      <span className="fx-window-buttons">
+        {onMinimize && <RoundButton label={minimizeLabel} size="sm" onClick={onMinimize}><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 8h9" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/></svg></RoundButton>}
+        {onClose && <RoundButton label={closeLabel} size="sm" tone="coral" onClick={onClose}><svg viewBox="0 0 16 16" aria-hidden="true"><path d="m4.5 4.5 7 7m0-7-7 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/></svg></RoundButton>}
+      </span>
+    </header>
+    <div className="fx-window-body">{children}</div>
+  </section>
+}
+
+export type TabItem = { id: string; label: string; icon?: SystemIconName }
+
+export function Tabs({ items, value, onChange, label }: { items: readonly TabItem[]; value: string; onChange: (id: string) => void; label: string }) {
+  const move = (from: number, step: number) => onChange(items[(from + step + items.length) % items.length]!.id)
+  return <div className="fx-tabs" role="tablist" aria-label={label}>
+    {items.map((item, index) => <button key={item.id} type="button" role="tab" className="fx-tab" aria-selected={item.id === value} tabIndex={item.id === value ? 0 : -1}
+      onClick={() => onChange(item.id)} onKeyDown={event => { if (event.key === 'ArrowRight') move(index, 1); if (event.key === 'ArrowLeft') move(index, -1) }}>
+      {item.icon && <SystemIcon name={item.icon} size={22}/>}{item.label}
+    </button>)}
+  </div>
+}
+
+/** A list of rows; each row has an icon, a title, a detail line and a value at its end. */
+export function List({ children, label }: { children: ReactNode; label?: string }) {
+  return <ul className="fx-list" aria-label={label}>{children}</ul>
+}
+
+export function ListRow({ icon, title, detail, end, onClick, href, selected }: { icon?: SystemIconName; title: ReactNode; detail?: ReactNode; end?: ReactNode; onClick?: () => void; href?: string; selected?: boolean }) {
+  const inner = <>{icon && <SystemIcon name={icon} size={36}/>}<span className="fx-row-text"><b>{title}</b>{detail && <small>{detail}</small>}</span>{end !== undefined && <span className="fx-row-end">{end}</span>}</>
+  return <li>{href ? <a className={cx('fx-row', selected && 'is-on')} href={href}>{inner}</a>
+    : onClick ? <button type="button" className={cx('fx-row', selected && 'is-on')} onClick={onClick} aria-pressed={selected}>{inner}</button>
+    : <div className={cx('fx-row', selected && 'is-on')}>{inner}</div>}</li>
+}
+
+export function Field({ label, hint, className, ...input }: { label: string; hint?: string } & InputHTMLAttributes<HTMLInputElement>) {
+  const id = useId()
+  return <label className={cx('fx-field', className)} htmlFor={id}>
+    <span>{label}</span>
+    <input id={id} className="fx-input" aria-describedby={hint ? `${id}-hint` : undefined} {...input}/>
+    {hint && <small id={`${id}-hint`}>{hint}</small>}
+  </label>
+}
+
+export function Toggle({ label, checked, onChange, disabled }: { label: ReactNode; checked: boolean; onChange: (checked: boolean) => void; disabled?: boolean }) {
+  return <label className="fx-toggle">
+    <input type="checkbox" role="switch" checked={checked} disabled={disabled} onChange={event => onChange(event.target.checked)}/>
+    <i aria-hidden="true"/>{label}
+  </label>
+}
+
+export type TooltipRow = { label: ReactNode; value: ReactNode }
+
+/** A designed tooltip, never plain text: an icon and title, a line, and labelled values; it opens on hover and on keyboard focus. */
+export function Tooltip({ title, icon, text, rows, children, open }: { title: ReactNode; icon?: SystemIconName; text?: ReactNode; rows?: readonly TooltipRow[]; children: ReactNode; open?: boolean }) {
+  const id = useId()
+  return <span className="fx-tip" aria-describedby={id}>
+    {children}
+    <span className={cx('fx-tooltip', open && 'is-open')} role="tooltip" id={id}>
+      <span className="fx-tooltip-head">{icon && <SystemIcon name={icon} size={26}/>}{title}</span>
+      {text && <p>{text}</p>}
+      {rows && rows.length > 0 && <dl>{rows.map((row, index) => <div key={index}><dt>{row.label}</dt><dd>{row.value}</dd></div>)}</dl>}
+    </span>
+  </span>
+}
+
+export function Toast({ title, children, icon, tone, onClose, closeLabel = 'Close' }: { title: ReactNode; children?: ReactNode; icon?: SystemIconName; tone?: string; onClose?: () => void; closeLabel?: string }) {
+  return <div className="fx-toast" role="status" style={tone ? { '--tone': tone } as CSSProperties : undefined}>
+    {icon && <span className="fx-toast-art"><SystemIcon name={icon} size={32}/></span>}
+    <span className="fx-toast-text"><b>{title}</b>{children && <span>{children}</span>}</span>
+    {onClose && <RoundButton label={closeLabel} size="sm" onClick={onClose}><svg viewBox="0 0 16 16" aria-hidden="true"><path d="m4.5 4.5 7 7m0-7-7 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/></svg></RoundButton>}
+  </div>
+}
+
+/** A number a keeper reads at a glance: an icon, the value in gold with its unit, and what it counts. */
+export function Stat({ icon, value, unit, label }: { icon?: SystemIconName; value: ReactNode; unit?: string; label: ReactNode }) {
+  return <div className="fx-stat">
+    {icon && <SystemIcon name={icon} size={38}/>}
+    <span><b>{value}{unit && <small>{unit}</small>}</b><span>{label}</span></span>
+  </div>
+}
+
+/** A desktop tile: a plump glass square in its own hue holding an icon, a title under it, a badge and an open mark. */
+export function DockTile({ icon, title, hue, badge, open, onClick }: { icon: SystemIconName; title: string; hue: number; badge?: number; open?: boolean; onClick?: () => void }) {
+  return <button type="button" className={cx('fx-tile', open && 'is-open')} onClick={onClick} style={{ '--hue': hue } as CSSProperties}>
+    <span className="fx-tile-glass"><SystemIcon name={icon} size={72}/>{badge !== undefined && badge > 0 && <Badge count={badge}/>}</span>
+    <span className="fx-tile-title">{title}</span>
+  </button>
+}
+
+export function Dock({ children, label }: { children: ReactNode; label: string }) {
+  return <nav className="fx-dock" aria-label={label}>{children}</nav>
+}
+
+/** One icon on a dock. */
+export function DockItem({ icon, label, front, open, badge, onClick }: { icon: SystemIconName; label: string; front?: boolean; open?: boolean; badge?: number; onClick?: () => void }) {
+  return <button type="button" className={cx('fx-dock-item', open && 'is-open', front && 'is-front')} aria-label={label} title={label} onClick={onClick}>
+    <SystemIcon name={icon} size="lg"/>{badge !== undefined && badge > 0 && <Badge count={badge}/>}<i aria-hidden="true"/>
+  </button>
+}
+
+export { Spinner, Progress } from './loader'
+export { default as Select } from './Select'
+export { default as Image } from './FishiesImg'

package/src/loader.css

@@ -0,0 +1,48 @@
+.fx-spinner {
+  display: inline-grid; place-items: center; flex: none;
+  width: var(--fx-size, 32px); height: var(--fx-size, 32px);
+  filter: drop-shadow(0 4px 10px rgb(1 8 20 / 45%));
+}
+.fx-spinner > svg { display: block; width: 100%; height: 100%; }
+
+.fx-progress {
+  position: relative; display: block; overflow: hidden;
+  width: min(280px, 100%); height: 10px; border-radius: 999px;
+  border: 1px solid rgb(196 236 250 / 20%);
+  background: linear-gradient(180deg, rgb(4 16 26 / 72%), rgb(12 38 56 / 72%));
+  box-shadow: inset 0 1px 3px rgb(0 0 0 / 50%), 0 1px 0 rgb(255 255 255 / 7%);
+}
+.fx-progress > i {
+  position: absolute; top: 1px; bottom: 1px; left: 1px;
+  width: max(8px, calc((100% - 2px) * var(--fx-value, 0)));
+  border-radius: inherit;
+  background: linear-gradient(180deg, var(--fx-gold-face), var(--fx-gold) 55%, var(--fx-gold-deep));
+  box-shadow: 0 0 8px var(--fx-gold-rim);
+  transition: width 320ms cubic-bezier(.2, .8, .2, 1);
+}
+
+.fx-progress > i::after {
+  content: ''; position: absolute; top: 50%; right: 1px; width: 6px; height: 6px; margin-top: -3px;
+  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, rgb(255 255 255 / 35%) 70%);
+}
+.fx-progress[data-indeterminate] > i { width: 34%; animation: fx-sweep 1.4s cubic-bezier(.45, 0, .55, 1) infinite; }
+@keyframes fx-sweep { from { transform: translateX(-105%); } to { transform: translateX(300%); } }
+
+:is(img, video)[data-fx='wait'], img[data-fx='error'] { object-position: -99999px -99999px !important; }
+:is(img, video)[data-fx='wait'] {
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cstyle%3E.a%7Btransform-origin:24px 24px;animation:s 1.1s linear infinite%7D.b%7Bopacity:0;animation:u 1.8s ease-in infinite%7D.c%7Banimation-delay:.6s%7D.d%7Banimation-delay:1.2s%7D@keyframes s%7Bto%7Btransform:rotate(360deg)%7D%7D@keyframes u%7B0%25%7Bopacity:0;transform:translateY(7px)%7D30%25%7Bopacity:.95%7D100%25%7Bopacity:0;transform:translateY(-9px)%7D%7D@media (prefers-reduced-motion:reduce)%7B.a%7Banimation-duration:3.6s%7D.b%7Banimation:none;opacity:.8%7D%7D%3C/style%3E%3Ccircle cx='24' cy='24' r='21' fill='%230b2a3c' fill-opacity='.74' stroke='%23c4ecfa' stroke-opacity='.24'/%3E%3Ccircle cx='24' cy='24' r='16' fill='none' stroke='%23c4ecfa' stroke-opacity='.13' stroke-width='3'/%3E%3Ccircle class='a' cx='24' cy='24' r='16' fill='none' stroke='%23ffc46b' stroke-width='3' stroke-linecap='round' stroke-dasharray='25 76'/%3E%3Cg fill='%23dff6ff' fill-opacity='.16' stroke='%23dff6ff' stroke-width='1.1'%3E%3Ccircle class='b' cx='21.5' cy='26' r='2.7'/%3E%3Ccircle class='b c' cx='27' cy='27.5' r='1.9'/%3E%3Ccircle class='b d' cx='23.5' cy='30' r='1.3'/%3E%3C/g%3E%3C/svg%3E") center / clamp(12px, 36%, 40px) no-repeat,
+    radial-gradient(closest-side, rgb(196 236 250 / 10%), rgb(196 236 250 / 4%)) !important;
+}
+img[data-fx='error'] { background: rgb(196 236 250 / 5%) !important; }
+:is(img, video)[data-fx='fade'] { animation: fx-in 240ms cubic-bezier(.2, .8, .2, 1); }
+@keyframes fx-in { from { opacity: 0; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .fx-progress > i { transition: none; }
+  .fx-progress[data-indeterminate] > i { animation-duration: 4s; }
+  :is(img, video)[data-fx='fade'] { animation: none; }
+  :is(img, video)[data-fx='wait'] {
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='21' fill='%230b2a3c' fill-opacity='.74' stroke='%23c4ecfa' stroke-opacity='.24'/%3E%3Ccircle cx='24' cy='24' r='16' fill='none' stroke='%23c4ecfa' stroke-opacity='.13' stroke-width='3'/%3E%3Ccircle class='a' cx='24' cy='24' r='16' fill='none' stroke='%23ffc46b' stroke-width='3' stroke-linecap='round' stroke-dasharray='25 76'/%3E%3Cg fill='%23dff6ff' fill-opacity='.16' stroke='%23dff6ff' stroke-width='1.1'%3E%3Ccircle class='b' cx='21.5' cy='26' r='2.7'/%3E%3Ccircle class='b c' cx='27' cy='27.5' r='1.9'/%3E%3Ccircle class='b d' cx='23.5' cy='30' r='1.3'/%3E%3C/g%3E%3C/svg%3E") center / clamp(12px, 36%, 40px) no-repeat,
+      radial-gradient(closest-side, rgb(196 236 250 / 10%), rgb(196 236 250 / 4%)) !important;
+  }
+}