@fishies/ui 0.8.3

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+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/dist/index.js

@@ -0,0 +1,7 @@
+'use client';
+export * from './kit.js';
+export { TOKEN_GROUPS, TOKENS, fx, tokensCss } from './tokens.js';
+export { SYSTEM_ICONS, ICON_GROUPS, ICON_SIZES, iconByName, iconUrl, configureIcons } from './icons.js';
+export { ICON_FACTS } from './icons.generated.js';
+export { SPINNER_SVG, svgDataUri } from './loader.js';
+export { FX_IMAGE_SCRIPT, reveal } from './fx-image.js';

package/dist/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/dist/kit.d.ts

@@ -0,0 +1,159 @@
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type CSSProperties, type InputHTMLAttributes, type ReactNode } from 'react';
+import { type IconSize, type SystemIconName } from './icons';
+import './kit.css';
+export declare function SystemIcon({ name, size, fallback, className }: {
+    name: SystemIconName;
+    size?: IconSize | number;
+    fallback?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element | null;
+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 declare function Button({ tone, size, icon, children, className, type, ...rest }: ButtonOwn & ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
+/** The same button as a link, for an action that goes somewhere. */
+export declare function ButtonLink({ tone, size, icon, children, className, ...rest }: ButtonOwn & AnchorHTMLAttributes<HTMLAnchorElement>): import("react").JSX.Element;
+/** A round toy button for window controls, the video player and close; `label` is what it says to a screen reader. */
+export declare function RoundButton({ label, tone, size, icon, children, className, type, ...rest }: {
+    label: string;
+    tone?: 'navy' | 'coral' | 'gold';
+    size?: 'sm' | 'md' | 'lg';
+    icon?: SystemIconName;
+    children?: ReactNode;
+} & ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
+/** A small reading or choice: a dot of colour for a kind, an icon, or gold when chosen. */
+export declare function Chip({ tone, icon, selected, onClick, children, className }: {
+    tone?: string;
+    icon?: SystemIconName;
+    selected?: boolean;
+    onClick?: () => void;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function Badge({ count, label }: {
+    count?: number;
+    label?: string;
+}): import("react").JSX.Element;
+export declare function Tag({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** A glass card: an optional eyebrow, a title and a few lines. */
+export declare function Card({ eyebrow, title, children, className }: {
+    eyebrow?: string;
+    title?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function Panel({ title, icon, actions, children, className, style }: {
+    title: ReactNode;
+    icon?: SystemIconName;
+    actions?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;
+/** A Keeper OS window frame: a title bar with round minimise and close buttons over a darker well. */
+export declare function Window({ title, icon, onClose, onMinimize, closeLabel, minimizeLabel, children, className, style }: {
+    title: ReactNode;
+    icon?: SystemIconName;
+    onClose?: () => void;
+    onMinimize?: () => void;
+    closeLabel?: string;
+    minimizeLabel?: string;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;
+export type TabItem = {
+    id: string;
+    label: string;
+    icon?: SystemIconName;
+};
+export declare function Tabs({ items, value, onChange, label }: {
+    items: readonly TabItem[];
+    value: string;
+    onChange: (id: string) => void;
+    label: string;
+}): import("react").JSX.Element;
+/** A list of rows; each row has an icon, a title, a detail line and a value at its end. */
+export declare function List({ children, label }: {
+    children: ReactNode;
+    label?: string;
+}): import("react").JSX.Element;
+export declare function ListRow({ icon, title, detail, end, onClick, href, selected }: {
+    icon?: SystemIconName;
+    title: ReactNode;
+    detail?: ReactNode;
+    end?: ReactNode;
+    onClick?: () => void;
+    href?: string;
+    selected?: boolean;
+}): import("react").JSX.Element;
+export declare function Field({ label, hint, className, ...input }: {
+    label: string;
+    hint?: string;
+} & InputHTMLAttributes<HTMLInputElement>): import("react").JSX.Element;
+export declare function Toggle({ label, checked, onChange, disabled }: {
+    label: ReactNode;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+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 declare function Tooltip({ title, icon, text, rows, children, open }: {
+    title: ReactNode;
+    icon?: SystemIconName;
+    text?: ReactNode;
+    rows?: readonly TooltipRow[];
+    children: ReactNode;
+    open?: boolean;
+}): import("react").JSX.Element;
+export declare function Toast({ title, children, icon, tone, onClose, closeLabel }: {
+    title: ReactNode;
+    children?: ReactNode;
+    icon?: SystemIconName;
+    tone?: string;
+    onClose?: () => void;
+    closeLabel?: string;
+}): import("react").JSX.Element;
+/** A number a keeper reads at a glance: an icon, the value in gold with its unit, and what it counts. */
+export declare function Stat({ icon, value, unit, label }: {
+    icon?: SystemIconName;
+    value: ReactNode;
+    unit?: string;
+    label: ReactNode;
+}): import("react").JSX.Element;
+/** 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 declare function DockTile({ icon, title, hue, badge, open, onClick }: {
+    icon: SystemIconName;
+    title: string;
+    hue: number;
+    badge?: number;
+    open?: boolean;
+    onClick?: () => void;
+}): import("react").JSX.Element;
+export declare function Dock({ children, label }: {
+    children: ReactNode;
+    label: string;
+}): import("react").JSX.Element;
+/** One icon on a dock. */
+export declare function DockItem({ icon, label, front, open, badge, onClick }: {
+    icon: SystemIconName;
+    label: string;
+    front?: boolean;
+    open?: boolean;
+    badge?: number;
+    onClick?: () => void;
+}): import("react").JSX.Element;
+export { Spinner, Progress } from './loader';
+export { default as Select } from './Select';
+export { default as Image } from './FishiesImg';

package/dist/kit.js

@@ -0,0 +1,104 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import FishiesImg from './FishiesImg.js';
+import { ICON_SIZES, iconByName, iconUrl } from './icons.js';
+import './kit.css';
+const cx = (...names) => names.filter(Boolean).join(' ');
+const px = (size) => typeof size === 'number' ? size : ICON_SIZES[size];
+export function SystemIcon({ name, size = 'md', fallback, className }) {
+    const [failed, setFailed] = useState(false);
+    const icon = iconByName(name);
+    const side = px(size);
+    if (!icon || failed)
+        return fallback ? _jsx(_Fragment, { children: fallback }) : null;
+    return _jsx("span", { className: cx('fx-icon', className), style: { width: side, height: side }, "aria-hidden": "true", children: _jsx(FishiesImg, { src: iconUrl(icon), width: side, height: side, alt: "", draggable: false, decoding: "async", onError: () => setFailed(true) }) });
+}
+/** 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 }) {
+    return _jsxs("button", { type: type, className: cx('fx-button', `is-${tone}`, size !== 'md' && `is-${size}`, className), ...rest, children: [icon && _jsx(SystemIcon, { name: icon, size: size === 'lg' ? 30 : size === 'sm' ? 20 : 26 }), children] });
+}
+/** The same button as a link, for an action that goes somewhere. */
+export function ButtonLink({ tone = 'glass', size = 'md', icon, children, className, ...rest }) {
+    return _jsxs("a", { className: cx('fx-button', `is-${tone}`, size !== 'md' && `is-${size}`, className), ...rest, children: [icon && _jsx(SystemIcon, { name: icon, size: size === 'lg' ? 30 : size === 'sm' ? 20 : 26 }), children] });
+}
+/** 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 }) {
+    return _jsx("button", { type: type, "aria-label": label, title: label, className: cx('fx-round', tone !== 'navy' && `is-${tone}`, size !== 'md' && `is-${size}`, className), ...rest, children: icon ? _jsx(SystemIcon, { name: icon, size: size === 'lg' ? 34 : 26 }) : children });
+}
+/** 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 }) {
+    const style = tone ? { '--tone': tone } : undefined;
+    const inner = _jsxs(_Fragment, { children: [tone && _jsx("i", { "aria-hidden": "true" }), icon && _jsx(SystemIcon, { name: icon, size: 18 }), children] });
+    return onClick
+        ? _jsx("button", { type: "button", className: cx('fx-chip', className), style: style, "aria-pressed": selected, onClick: onClick, children: inner })
+        : _jsx("span", { className: cx('fx-chip', selected && 'is-on', className), style: style, children: inner });
+}
+export function Badge({ count, label }) {
+    return count === undefined
+        ? _jsx("span", { className: "fx-badge is-dot", role: "status", "aria-label": label })
+        : _jsx("span", { className: "fx-badge", role: "status", "aria-label": label, children: count > 99 ? '99+' : count });
+}
+export function Tag({ children }) {
+    return _jsx("span", { className: "fx-tag", children: children });
+}
+/** A glass card: an optional eyebrow, a title and a few lines. */
+export function Card({ eyebrow, title, children, className }) {
+    return _jsxs("article", { className: cx('fx-card', className), children: [eyebrow && _jsx("span", { className: "fx-eyebrow", children: eyebrow }), title && _jsx("h3", { children: title }), children] });
+}
+export function Panel({ title, icon, actions, children, className, style }) {
+    return _jsxs("section", { className: cx('fx-panel', className), style: style, children: [_jsxs("header", { className: "fx-panel-head", children: [icon && _jsx(SystemIcon, { name: icon, size: 30 }), _jsx("h2", { children: title }), actions] }), _jsx("div", { className: "fx-panel-body", children: children })] });
+}
+/** 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 }) {
+    return _jsxs("section", { className: cx('fx-window', className), style: style, role: "dialog", "aria-label": typeof title === 'string' ? title : undefined, children: [_jsxs("header", { className: "fx-window-bar", children: [icon && _jsx(SystemIcon, { name: icon, size: 26 }), _jsx("h2", { children: title }), _jsxs("span", { className: "fx-window-buttons", children: [onMinimize && _jsx(RoundButton, { label: minimizeLabel, size: "sm", onClick: onMinimize, children: _jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: _jsx("path", { d: "M3.5 8h9", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round" }) }) }), onClose && _jsx(RoundButton, { label: closeLabel, size: "sm", tone: "coral", onClick: onClose, children: _jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: _jsx("path", { d: "m4.5 4.5 7 7m0-7-7 7", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round" }) }) })] })] }), _jsx("div", { className: "fx-window-body", children: children })] });
+}
+export function Tabs({ items, value, onChange, label }) {
+    const move = (from, step) => onChange(items[(from + step + items.length) % items.length].id);
+    return _jsx("div", { className: "fx-tabs", role: "tablist", "aria-label": label, children: items.map((item, index) => _jsxs("button", { 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); }, children: [item.icon && _jsx(SystemIcon, { name: item.icon, size: 22 }), item.label] }, item.id)) });
+}
+/** 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 }) {
+    return _jsx("ul", { className: "fx-list", "aria-label": label, children: children });
+}
+export function ListRow({ icon, title, detail, end, onClick, href, selected }) {
+    const inner = _jsxs(_Fragment, { children: [icon && _jsx(SystemIcon, { name: icon, size: 36 }), _jsxs("span", { className: "fx-row-text", children: [_jsx("b", { children: title }), detail && _jsx("small", { children: detail })] }), end !== undefined && _jsx("span", { className: "fx-row-end", children: end })] });
+    return _jsx("li", { children: href ? _jsx("a", { className: cx('fx-row', selected && 'is-on'), href: href, children: inner })
+            : onClick ? _jsx("button", { type: "button", className: cx('fx-row', selected && 'is-on'), onClick: onClick, "aria-pressed": selected, children: inner })
+                : _jsx("div", { className: cx('fx-row', selected && 'is-on'), children: inner }) });
+}
+export function Field({ label, hint, className, ...input }) {
+    const id = useId();
+    return _jsxs("label", { className: cx('fx-field', className), htmlFor: id, children: [_jsx("span", { children: label }), _jsx("input", { id: id, className: "fx-input", "aria-describedby": hint ? `${id}-hint` : undefined, ...input }), hint && _jsx("small", { id: `${id}-hint`, children: hint })] });
+}
+export function Toggle({ label, checked, onChange, disabled }) {
+    return _jsxs("label", { className: "fx-toggle", children: [_jsx("input", { type: "checkbox", role: "switch", checked: checked, disabled: disabled, onChange: event => onChange(event.target.checked) }), _jsx("i", { "aria-hidden": "true" }), label] });
+}
+/** 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 }) {
+    const id = useId();
+    return _jsxs("span", { className: "fx-tip", "aria-describedby": id, children: [children, _jsxs("span", { className: cx('fx-tooltip', open && 'is-open'), role: "tooltip", id: id, children: [_jsxs("span", { className: "fx-tooltip-head", children: [icon && _jsx(SystemIcon, { name: icon, size: 26 }), title] }), text && _jsx("p", { children: text }), rows && rows.length > 0 && _jsx("dl", { children: rows.map((row, index) => _jsxs("div", { children: [_jsx("dt", { children: row.label }), _jsx("dd", { children: row.value })] }, index)) })] })] });
+}
+export function Toast({ title, children, icon, tone, onClose, closeLabel = 'Close' }) {
+    return _jsxs("div", { className: "fx-toast", role: "status", style: tone ? { '--tone': tone } : undefined, children: [icon && _jsx("span", { className: "fx-toast-art", children: _jsx(SystemIcon, { name: icon, size: 32 }) }), _jsxs("span", { className: "fx-toast-text", children: [_jsx("b", { children: title }), children && _jsx("span", { children: children })] }), onClose && _jsx(RoundButton, { label: closeLabel, size: "sm", onClick: onClose, children: _jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", children: _jsx("path", { d: "m4.5 4.5 7 7m0-7-7 7", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round" }) }) })] });
+}
+/** 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 }) {
+    return _jsxs("div", { className: "fx-stat", children: [icon && _jsx(SystemIcon, { name: icon, size: 38 }), _jsxs("span", { children: [_jsxs("b", { children: [value, unit && _jsx("small", { children: unit })] }), _jsx("span", { children: label })] })] });
+}
+/** 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 }) {
+    return _jsxs("button", { type: "button", className: cx('fx-tile', open && 'is-open'), onClick: onClick, style: { '--hue': hue }, children: [_jsxs("span", { className: "fx-tile-glass", children: [_jsx(SystemIcon, { name: icon, size: 72 }), badge !== undefined && badge > 0 && _jsx(Badge, { count: badge })] }), _jsx("span", { className: "fx-tile-title", children: title })] });
+}
+export function Dock({ children, label }) {
+    return _jsx("nav", { className: "fx-dock", "aria-label": label, children: children });
+}
+/** One icon on a dock. */
+export function DockItem({ icon, label, front, open, badge, onClick }) {
+    return _jsxs("button", { type: "button", className: cx('fx-dock-item', open && 'is-open', front && 'is-front'), "aria-label": label, title: label, onClick: onClick, children: [_jsx(SystemIcon, { name: icon, size: "lg" }), badge !== undefined && badge > 0 && _jsx(Badge, { count: badge }), _jsx("i", { "aria-hidden": "true" })] });
+}
+export { Spinner, Progress } from './loader.js';
+export { default as Select } from './Select.js';
+export { default as Image } from './FishiesImg.js';

package/dist/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;
+  }
+}

package/dist/loader.d.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties } from 'react';
+import './loader.css';
+export declare const SPINNER_SVG: string;
+export declare function svgDataUri(svg: string): string;
+export declare function Spinner({ size, label, className, style }: {
+    size?: number;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;
+/** A progress bar: a glass channel filling with gold, a bubble riding its leading edge; with no value the gold sweeps. */
+export declare function Progress({ value, label, className, style }: {
+    value?: number;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;