@idosgames/react 0.5.2 → 0.6.1

package/dist/ui/index.d.cts

@@ -62,16 +62,30 @@ interface UiThemeConfig {
     blueDeep: string;
     red: string;
     redDeep: string;
+    purple: string;
+    purpleDeep: string;
+    orange: string;
+    orangeDeep: string;
+    teal: string;
+    tealDeep: string;
     shadow: string;
     /** Dim of the screen behind a popup. */
     backdrop: string;
+    /** The dark outline drawn around everything — buttons, panels, counters, the letters. */
+    ink: string;
+    /** The bottom menu bar. */
+    nav: string;
+    /** Thickness of that outline around buttons and panels, px. */
+    outline: number;
     /** Text colour on a filled button of each tone. */
     onGreen: string;
     onGold: string;
     onBlue: string;
     onRed: string;
-    /** `text-shadow` of text on screens and panels: the casual dark outline on light text, none on dark. */
+    /** `text-shadow` of text on screens and panels: the casual dark drop on light text, none on dark. */
     textOutline: string;
+    /** `-webkit-text-stroke` of that text: the ink outline of the letters on light text, none on dark. */
+    textStroke: string;
     /** Thin line/border on a panel (dividers, outlines of chips). */
     line: string;
     /** Recessed background of counters, round icon buttons. */
@@ -134,7 +148,10 @@ type UiKitConfigInput = {
 };
 /** Typed helper for `src/ui.config.ts`: `export default defineUiConfig({ … })`. */
 declare function defineUiConfig(config: UiKitConfigInput): UiKitConfigInput;
-/** The default look: the casual mobile-game style of the Board Survival Unity project. */
+/** The default ink: the near-black navy outline of the casual look. */
+declare const INK = "#17193a";
+/** The default look: Layer Lab "Vertical Casual" — bright blue-violet screens, chunky glossy plates
+ *  with a heavy ink outline and a darker bottom lip, white letters outlined in ink (owner, 2026-10-22). */
 declare const DEFAULT_UI_CONFIG: UiKitConfig;
 /**
  * Defaults ← project config, field by field. Out-of-range numbers are clamped (speed 0.1..5,
@@ -336,6 +353,8 @@ declare function canAfford(price: ResourceLine[], balances: Record<string, {
 cryptoBalances?: Record<string, {
     Amount?: number | string;
 } | null | undefined> | null): boolean;
+/** Amount of a resource line as text: "$5" for a crypto price in USD, else {@link formatAmount}. */
+declare function formatLineAmount(line: ResourceLine): string;
 /** 1234 → "1 234", 1_250_000 → "1.25M" — balances must fit a chip. */
 declare function formatAmount(value: number): string;
 /**
@@ -606,10 +625,13 @@ declare function UiKitProvider({ config: input, children, overlays, notification
 
 declare function renderKitOverlays(state: KitOverlayState): ReactNode;
 
-declare const GLYPHS: readonly ["coin", "gem", "potion", "scroll", "sword", "shield", "crown", "gift", "bag", "box", "trophy", "calendar", "star", "check", "lock", "shop", "chest", "quest", "user", "logout", "copy", "hero", "hammer", "market", "flame", "ticket", "friends", "chat", "link", "swords", "gear", "globe", "sound", "mute", "bell", "bulb", "menu", "close", "back", "plus", "energy", "heart", "offer", "clock", "trash", "edit"];
+declare const GLYPHS: readonly ["coin", "gem", "potion", "scroll", "sword", "shield", "crown", "gift", "bag", "box", "trophy", "calendar", "star", "check", "lock", "shop", "chest", "quest", "user", "logout", "copy", "hero", "hammer", "market", "flame", "ticket", "friends", "chat", "link", "swords", "gear", "globe", "sound", "mute", "bell", "bulb", "menu", "close", "back", "plus", "energy", "heart", "offer", "clock", "trash", "edit", "home", "mail", "megaphone", "rune", "clapper", "info", "settings"];
 type Glyph = (typeof GLYPHS)[number];
 declare function isGlyph(value: string): value is Glyph;
-/** Glyph for a currency id: gems for "premium-looking" ids, energy for dice/energy, coins for the rest. */
+/**
+ * Glyph for a currency id: gems for "premium-looking" ids, energy for dice/energy, a potion for
+ * potions, a ticket for tickets and keys, a star for experience, coins for the rest.
+ */
 declare function currencyGlyph(currencyID: string): Glyph;
 /** Glyph for an item by its tags or class (first known wins), else a box. */
 declare function itemGlyph(tags: readonly string[] | null | undefined, itemClass?: string | null, 
@@ -624,11 +646,18 @@ declare function Icon({ glyph: requested, size, color, fallback, }: {
     fallback?: Glyph;
 }): ReactNode;
 
-type ButtonTone = "green" | "gold" | "blue" | "red" | "grey";
+/**
+ * The colours of buttons and filled surfaces — the eleven plates of the casual sheet. `grey` is the
+ * violet-grey of "Cancel" and of a disabled button, `silver` the neutral grey, `slate` the dark plate
+ * of close / back / menu buttons, `white` the white plate with blue letters.
+ */
+type ButtonTone = "green" | "gold" | "blue" | "red" | "grey" | "purple" | "orange" | "teal" | "white" | "silver" | "slate";
+declare const TONES: Record<ButtonTone, [string, string]>;
 /** Text colour and its outline on a filled surface of each tone (theme tokens `onGreen`, …). */
 declare const ON_TONE: Record<ButtonTone, {
     color: string;
     textShadow: string;
+    WebkitTextStroke: string;
 }>;
 /**
  * A surface filled with a tone of the theme (a hero banner, "your row", a highlighted day). Inside it
@@ -637,6 +666,8 @@ declare const ON_TONE: Record<ButtonTone, {
  * saturated tone, dark ink on a pastel one. Never hard-code a banner colour in a module: pick a tone.
  */
 declare function toneSurface(tone: ButtonTone): CSSProperties;
+/** The glossy plate of a tone with the ink frame — a button, a coloured card, a chip. */
+declare function tonePlate(tone: ButtonTone): CSSProperties;
 declare function buttonStyle(tone: ButtonTone, disabled?: boolean, size?: "sm" | "md" | "lg"): CSSProperties;
 interface ButtonProps {
     children: ReactNode;
@@ -655,7 +686,7 @@ interface ButtonProps {
     "data-tutorial-anchor"?: string;
 }
 declare function Button({ children, onClick, tone, size, disabled, busy, attract, style, className, sound, title, ...rest }: ButtonProps): ReactNode;
-/** Round icon button (close, back, menu). */
+/** Square icon button with rounded corners (close, back, menu) — the dark slate plate by default. */
 declare function IconButton({ glyph, onClick, label, size, tone, style, badge, }: {
     glyph: Glyph | string;
     onClick: () => void;
@@ -668,7 +699,7 @@ declare function IconButton({ glyph, onClick, label, size, tone, style, badge, }
 declare function Spinner({ size }: {
     size?: number;
 }): ReactNode;
-/** Red "N" on a button — something to claim (Unity ButtonAlertBadge). Hidden at 0. */
+/** Red "N" square on a button — something to claim. Hidden at 0. */
 declare function Badge({ count, dot, style, }: {
     count: number;
     dot?: boolean;
@@ -704,7 +735,9 @@ declare function ResourceCounter({ currencyID, amount, size, onClick, }: {
     size?: number;
     onClick?: () => void;
 }): ReactNode;
-/** Item tile: rarity frame, icon, count badge, optional level. */
+/** The card of a rarity colour: a glossy plate of that colour in the ink frame (shop and reward cards). */
+declare function rarityPlate(color: string): CSSProperties;
+/** Item tile: a plate of its rarity colour, icon, count, optional level. */
 declare function ItemTile({ itemID, count, level, onClick, size, selected, dim, }: {
     itemID: string;
     count?: number;
@@ -714,17 +747,22 @@ declare function ItemTile({ itemID, count, level, onClick, size, selected, dim,
     selected?: boolean;
     dim?: boolean;
 }): ReactNode;
-/** Rounded progress bar with the value written on it; the fill slides when the value changes. */
+/**
+ * The casual bar: a dark track in the ink frame, a glossy fill of the tone, the value written over
+ * it in outlined letters; the fill slides when the value changes.
+ */
 declare function ProgressBar({ value, max, tone, label, height, }: {
     value: number;
     max: number;
-    tone?: "green" | "gold" | "blue";
+    tone?: ButtonTone;
     label?: string;
     height?: number;
 }): ReactNode;
-declare function SectionTitle({ children, right, }: {
+/** A section's banner — a ribbon of the tone with a swallowtail end — and actions on its right. */
+declare function SectionTitle({ children, right, tone, }: {
     children: ReactNode;
     right?: ReactNode;
+    tone?: ButtonTone;
 }): ReactNode;
 declare function EmptyState({ glyph, text, action, }: {
     glyph: Glyph | string;
@@ -747,7 +785,11 @@ interface TabItem<T extends string> {
     glyph?: Glyph | string;
     badge?: number;
 }
-/** Segmented tabs (sections of one screen). Scrolls sideways when they do not fit. */
+/**
+ * Segmented tabs (sections of one screen), as the sheet's "Daily | Challenge": one strip in the ink
+ * frame, the active segment white with blue letters and a light-blue underline, the rest blue.
+ * Up to four share the width equally and wrap a long name; more scroll sideways.
+ */
 declare function Tabs<T extends string>({ tabs, value, onChange, style, }: {
     tabs: TabItem<T>[];
     value: T;
@@ -849,10 +891,17 @@ declare const EN: {
     readonly cryptoBacked: "Crypto";
     readonly cryptoUnbacked: "IOU (not backed yet)";
     readonly cryptoIouHint: "IOUs spend in the app like crypto; the developer backs them with real crypto later.";
+    readonly soldOut: "Sold out";
+    readonly on: "On";
+    readonly off: "Off";
+    readonly level: "Level";
+    readonly info: "Info";
+    readonly locked: "Locked";
+    readonly skip: "Skip";
 };
 type UiStringKey = keyof typeof EN;
 /** Strings of the kit itself. */
-declare const uiT: (key: "close" | "claim" | "error" | "events" | "cancel" | "offline" | "other" | "back" | "confirm" | "youGot" | "great" | "loading" | "ok" | "loadingNamed" | "stillLoading" | "retry" | "notEnough" | "dailyLimitReached" | "more" | "menu" | "nothingHere" | "economy" | "social" | "profile" | "free" | "claimAll" | "rewards" | "premium" | "tokenEvent" | "tokenSeason" | "tokenQuest" | "tokenScore" | "cryptoTotal" | "cryptoBacked" | "cryptoUnbacked" | "cryptoIouHint") => string;
+declare const uiT: (key: "close" | "claim" | "error" | "events" | "on" | "info" | "cancel" | "offline" | "other" | "back" | "confirm" | "youGot" | "great" | "loading" | "ok" | "loadingNamed" | "stillLoading" | "retry" | "notEnough" | "dailyLimitReached" | "more" | "menu" | "nothingHere" | "economy" | "social" | "profile" | "free" | "claimAll" | "rewards" | "premium" | "tokenEvent" | "tokenSeason" | "tokenQuest" | "tokenScore" | "cryptoTotal" | "cryptoBacked" | "cryptoUnbacked" | "cryptoIouHint" | "soldOut" | "off" | "level" | "locked" | "skip") => string;
 /** Turns a server error into words the player understands; long texts are cut. */
 declare function errorText(error: string | null | undefined): string;
 
@@ -882,8 +931,18 @@ declare const v: {
     readonly blueDeep: "var(--idos-ui-blue-deep)";
     readonly red: "var(--idos-ui-red)";
     readonly redDeep: "var(--idos-ui-red-deep)";
+    readonly purple: "var(--idos-ui-purple)";
+    readonly purpleDeep: "var(--idos-ui-purple-deep)";
+    readonly orange: "var(--idos-ui-orange)";
+    readonly orangeDeep: "var(--idos-ui-orange-deep)";
+    readonly teal: "var(--idos-ui-teal)";
+    readonly tealDeep: "var(--idos-ui-teal-deep)";
     readonly shadow: "var(--idos-ui-shadow)";
     readonly backdrop: "var(--idos-ui-backdrop)";
+    readonly ink: "var(--idos-ui-ink)";
+    readonly nav: "var(--idos-ui-nav)";
+    /** Thickness of the ink outline, as a CSS length. */
+    readonly outline: "var(--idos-ui-outline)";
     readonly onGreen: "var(--idos-ui-on-green)";
     readonly onGold: "var(--idos-ui-on-gold)";
     readonly onBlue: "var(--idos-ui-on-blue)";
@@ -892,7 +951,15 @@ declare const v: {
     readonly onGoldOutline: "var(--idos-ui-on-gold-outline)";
     readonly onBlueOutline: "var(--idos-ui-on-blue-outline)";
     readonly onRedOutline: "var(--idos-ui-on-red-outline)";
+    readonly onGreenStroke: "var(--idos-ui-on-green-stroke)";
+    readonly onGoldStroke: "var(--idos-ui-on-gold-stroke)";
+    readonly onBlueStroke: "var(--idos-ui-on-blue-stroke)";
+    readonly onRedStroke: "var(--idos-ui-on-red-stroke)";
+    /** The ink drop and stroke of white letters, whatever the theme's text is. */
+    readonly inkOutline: "var(--idos-ui-ink-outline)";
+    readonly inkStroke: "var(--idos-ui-ink-stroke)";
     readonly textOutline: "var(--idos-ui-text-outline)";
+    readonly textStroke: "var(--idos-ui-text-stroke)";
     readonly line: "var(--idos-ui-line)";
     readonly well: "var(--idos-ui-well)";
     readonly wellSoft: "var(--idos-ui-well-soft)";
@@ -913,11 +980,34 @@ declare const v: {
  * light theme's dark letters never get a dark double.
  */
 declare const outlined: CSSProperties;
-/** The glossy card every panel uses. */
+/** White letters with the ink outline on ANY background (a coloured plate, art) — whatever the theme's text. */
+declare const inked: CSSProperties;
+/** The heavy ink frame of buttons, plates and counters. */
+declare const inkFrame: string;
+/**
+ * A glossy plate of one colour, the look of every button and coloured card: a lighter top, the colour,
+ * the deep shade at the bottom with a darker inner lip, the ink frame, a short drop.
+ */
+declare function plate(top: string, deep: string): CSSProperties;
+/** The card every panel uses: the theme's blue body, the ink frame, a lighter top edge. */
 declare const panel: CSSProperties;
-/** Full-screen background of a screen. */
+/**
+ * A row of a list on a panel (letters, friends, ranks): a strip a shade deeper than the panel with a
+ * soft top light and a bottom shade — no frame of its own, the panel's frame holds the list.
+ */
+declare const listRow: CSSProperties;
+/**
+ * The casual background pattern as one background layer: semi-transparent white gear (swords,
+ * shields, potions, gems, crowns…) on a 240px square tile, so moving it by whole tiles loops without
+ * a seam (`idos-screen` / `.idos-pattern` move it by one).
+ */
+declare const GEAR_PATTERN: string;
+/**
+ * Full-screen background of a screen: the gear pattern over the theme's glow and gradient. Give the
+ * element `className="idos-screen"` and the pattern drifts (it stays still when motion is off).
+ */
 declare const screenBackground: string;
-/** A recessed chip/slot (balances, round icon buttons). */
+/** A recessed dark plate (balances, counters, bar tracks). */
 declare const well: CSSProperties;
 /** Easing with an overshoot — the "pop" of casual games. */
 declare const EASE_POP = "cubic-bezier(.2, .9, .3, 1.25)";
@@ -927,7 +1017,7 @@ declare const EASE_IN = "cubic-bezier(.5, 0, .75, .2)";
  * Keyframes and the few class-based effects inline styles cannot express. Overshoots are written as
  * `calc(1 + X * var(--idos-ui-k))`, so `motion.intensity` 0 flattens them and 2 doubles them.
  */
-declare const KIT_CSS = "\n@keyframes idos-pop-in { 0% { transform: scale(.7); opacity: 0 } 65% { transform: scale(calc(1 + .06 * var(--idos-ui-k, 1))); opacity: 1 } 100% { transform: scale(1); opacity: 1 } }\n@keyframes idos-pop-out { 0% { transform: scale(1); opacity: 1 } 30% { transform: scale(calc(1 + .03 * var(--idos-ui-k, 1))) } 100% { transform: scale(.75); opacity: 0 } }\n@keyframes idos-fade-in { from { opacity: 0 } to { opacity: 1 } }\n.idos-select option { background: var(--idos-ui-panel-deep); color: var(--idos-ui-text) }\n@keyframes idos-fade-out { from { opacity: 1 } to { opacity: 0 } }\n@keyframes idos-rise-in { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }\n@keyframes idos-drop-in { 0% { transform: translateY(-16px) scale(.97); opacity: 0 } 70% { transform: translateY(calc(2px * var(--idos-ui-k, 1))); opacity: 1 } 100% { transform: none; opacity: 1 } }\n@keyframes idos-drop-out { from { transform: none; opacity: 1 } to { transform: translateY(-10px) scale(.97); opacity: 0 } }\n@keyframes idos-timer { from { transform: scaleX(1) } to { transform: scaleX(0) } }\n@keyframes idos-sheet-in { 0% { transform: translateY(100%) } 75% { transform: translateY(calc(-2% * var(--idos-ui-k, 1))) } 100% { transform: none } }\n@keyframes idos-sheet-out { from { transform: none } to { transform: translateY(100%) } }\n@keyframes idos-window-in { from { transform: translateY(24px) scale(.98); opacity: 0 } to { transform: none; opacity: 1 } }\n@keyframes idos-window-out { from { transform: none; opacity: 1 } to { transform: translateY(24px) scale(.98); opacity: 0 } }\n@keyframes idos-bounce { 0%, 100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(calc(-1px * var(--idos-float-amp, 5) * var(--idos-ui-k, 1))) rotate(calc(1deg * var(--idos-float-tilt, 0) * var(--idos-ui-k, 1))) } }\n@keyframes idos-shine { 0% { transform: translateX(-120%) skewX(-20deg) } 60%, 100% { transform: translateX(220%) skewX(-20deg) } }\n@keyframes idos-spin { to { transform: rotate(360deg) } }\n@keyframes idos-glow { 0%, 100% { box-shadow: 0 0 0 0 transparent } 50% { box-shadow: 0 0 18px 4px color-mix(in srgb, var(--idos-ui-gold) 55%, transparent) } }\n@keyframes idos-pulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(calc(1 + .18 * var(--idos-ui-k, 1))) } }\n@keyframes idos-bump { 0% { transform: scale(1) } 40% { transform: scale(calc(1 + .22 * var(--idos-ui-k, 1))) } 100% { transform: scale(1) } }\n@keyframes idos-shake { 0%, 100% { transform: rotate(0) } 20% { transform: rotate(calc(-9deg * var(--idos-ui-k, 1))) } 40% { transform: rotate(calc(8deg * var(--idos-ui-k, 1))) } 60% { transform: rotate(calc(-6deg * var(--idos-ui-k, 1))) } 80% { transform: rotate(calc(4deg * var(--idos-ui-k, 1))) } }\n@keyframes idos-star { 0% { transform: scale(0) rotate(-40deg) } 60% { transform: scale(calc(1 + .15 * var(--idos-ui-k, 1))) rotate(8deg) } 100% { transform: scale(1) rotate(0) } }\n@keyframes idos-rays { to { transform: rotate(360deg) } }\n.idos-press { transition: transform var(--idos-ui-fast) ease, filter var(--idos-ui-fast) ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation }\n.idos-press:not(:disabled):hover { filter: brightness(1.07) }\n.idos-press:not(:disabled):active { transform: translateY(3px) scale(.96); filter: brightness(.95); transition-duration: 40ms }\n.idos-shine { position: relative; overflow: hidden }\n.idos-shine::after { content: \"\"; position: absolute; top: 0; bottom: 0; width: 40%; left: 0; pointer-events: none;\n  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);\n  animation: idos-shine calc(var(--idos-ui-slow) * var(--idos-shine-speed, 6)) ease-in-out calc(var(--idos-ui-slow) * var(--idos-shine-phase, 0)) infinite }\n.idos-bounce { animation: idos-bounce calc(var(--idos-ui-slow) * var(--idos-float-speed, 2.1)) ease-in-out calc(var(--idos-ui-slow) * var(--idos-float-phase, 0)) infinite }\n.idos-glow { animation: idos-glow calc(var(--idos-ui-slow) * var(--idos-float-speed, 2.1) * 1.4) ease-in-out calc(var(--idos-ui-slow) * var(--idos-float-phase, 0)) infinite }\n.idos-pulse { animation: idos-pulse calc(var(--idos-ui-slow) * var(--idos-float-speed, 2.1)) ease-in-out calc(var(--idos-ui-slow) * var(--idos-float-phase, 0)) infinite }\n.idos-bump { animation: idos-bump var(--idos-ui-normal) ease-out }\n.idos-scroll { scrollbar-width: thin; scrollbar-color: var(--idos-ui-panel-edge) transparent; overscroll-behavior: contain }\n.idos-scroll::-webkit-scrollbar { width: 6px; height: 6px }\n.idos-scroll::-webkit-scrollbar-thumb { background: var(--idos-ui-panel-edge); border-radius: 3px }\n[data-idos-motion=\"off\"] .idos-shine::after, [data-idos-motion=\"off\"] .idos-bounce, [data-idos-motion=\"off\"] .idos-glow, [data-idos-motion=\"off\"] .idos-pulse, [data-idos-motion=\"off\"] .idos-bump { animation: none }\n";
+declare const KIT_CSS: string;
 
 /** The layout for the element's current width, following it as it resizes. */
 declare function useLayout(ref: {
@@ -970,6 +1060,159 @@ declare function useBalances(): Array<[string, number]>;
 /** Re-renders every `ms` — for countdowns. */
 declare function useNow(ms?: number): number;
 
+/** The ink outline of a clipped shape (a clip-path cuts any border off): four hard drops around it. */
+declare function inkShadow(width?: number): string;
+/** The slanted dark "◀" tab at the left edge of a screen's header. */
+declare function BackButton({ onClick, label, style, }: {
+    onClick: () => void;
+    label?: string;
+    style?: CSSProperties;
+}): ReactNode;
+/** A screen's header: the back tab, the title, whatever goes on the right (balances, a timer, "i"). */
+declare function ScreenHeader({ title, icon, onBack, right, style, }: {
+    title: ReactNode;
+    icon?: Glyph | string;
+    onBack?: () => void;
+    right?: ReactNode;
+    style?: CSSProperties;
+}): ReactNode;
+/** A square light-blue tile in the ink frame holding an icon, a picture or a face (letters, friends). */
+declare function IconTile({ children, glyph, size, tone, style, }: {
+    children?: ReactNode;
+    glyph?: Glyph | string;
+    size?: number;
+    /** A tone instead of the light blue (a rarity, a highlight). */
+    tone?: ButtonTone;
+    style?: CSSProperties;
+}): ReactNode;
+/** A ribbon banner: the band of the tone, its folded tails behind, faint stars at both ends. */
+declare function Ribbon({ children, tone, stars, size, style, }: {
+    children: ReactNode;
+    tone?: ButtonTone;
+    stars?: boolean;
+    /** Font size; the ribbon scales with it. */
+    size?: number;
+    style?: CSSProperties;
+}): ReactNode;
+/** A slanted rarity tag ("Common", "Epic", "Mythic") in the rarity's colour. */
+declare function RarityTag({ label, color, size, }: {
+    label: ReactNode;
+    color: string;
+    size?: number;
+}): ReactNode;
+/** The tilted "SOLD OUT" stamp over a card. */
+declare function SoldOutStamp({ size }: {
+    size?: number;
+}): ReactNode;
+/** The ON / OFF switch: a blue track with "ON" and the white knob on the right, a dark one with "OFF". */
+declare function Toggle({ value, onChange, label, }: {
+    value: boolean;
+    onChange: (next: boolean) => void;
+    /** For screen readers. */
+    label?: string;
+}): ReactNode;
+/** A white speech bubble in the ink frame, the tail at one corner (hints, tutorials, tooltips). */
+declare function SpeechBubble({ children, tail, style, }: {
+    children: ReactNode;
+    tail?: "bottom-left" | "bottom-right" | "top-left" | "top-right" | "none";
+    style?: CSSProperties;
+}): ReactNode;
+/** A hexagon of a tone in the ink frame — a reward slot of a level road, a level number. */
+declare function HexBadge({ children, tone, size, glow, style, }: {
+    children?: ReactNode;
+    tone?: ButtonTone;
+    size?: number;
+    /** The golden sparkle of the current step. */
+    glow?: boolean;
+    style?: CSSProperties;
+}): ReactNode;
+/** The level shield (the "3" before a bar): a shield of the tone with the number in it. */
+declare function LevelShield({ level, tone, size, }: {
+    level: ReactNode;
+    tone?: ButtonTone;
+    size?: number;
+}): ReactNode;
+/** A level and the bar to the next one: the shield overlapping the bar's left end. */
+declare function LevelBar({ level, value, max, label, tone, height, style, }: {
+    level: ReactNode;
+    value: number;
+    max: number;
+    label?: string;
+    tone?: ButtonTone;
+    height?: number;
+    style?: CSSProperties;
+}): ReactNode;
+/** "29 / 100 +": a count against its limit on a dark plate, a blue "+" to raise the limit. */
+declare function StepperCounter({ value, max, onPlus, }: {
+    value: number;
+    max: number;
+    onPlus?: () => void;
+}): ReactNode;
+/** The round blue "i" — opens an explanation. */
+declare function InfoButton({ onClick, label, size, tone, }: {
+    onClick: () => void;
+    label?: string;
+    size?: number;
+    tone?: ButtonTone;
+}): ReactNode;
+/** A big square menu tile — an icon over its name on a dark-blue plate ("Ranking", "Mission", "Menu"). */
+declare function MenuTile({ glyph, label, onClick, badge, size, }: {
+    glyph: Glyph | string;
+    label?: ReactNode;
+    onClick: () => void;
+    badge?: number;
+    size?: number;
+}): ReactNode;
+type RoadState = "done" | "current" | "next" | "locked";
+/**
+ * One step of a level road ("25 Level" + its reward in a hexagon on the right): white for the next
+ * one, gold and sparkling for the current, faded blue with a tick when taken, dim when far ahead.
+ */
+declare function LevelRoadRow({ level, label, reward, rewardLabel, state, tag, onClick, }: {
+    level: ReactNode;
+    label?: ReactNode;
+    /** What is in the hexagon: an icon, a hero, a number. */
+    reward?: ReactNode;
+    /** The amount under it ("10,000", "x3"). */
+    rewardLabel?: ReactNode;
+    state: RoadState;
+    /** A small red tag on the corner ("Next"). */
+    tag?: ReactNode;
+    onClick?: () => void;
+}): ReactNode;
+/**
+ * The slowly drifting background pattern (semi-transparent white gear: swords, shields, potions…),
+ * filling its positioned parent — put it as the first child of a screen's or a stage's backdrop. The
+ * loop is seamless: the pattern is a 240px tile moved by exactly one tile a cycle. Stops when motion
+ * is off.
+ */
+declare function MovingPattern({ style }: {
+    style?: CSSProperties;
+}): ReactNode;
+/**
+ * A list laid out for the width it gets — one column on a phone, two or three side by side on a
+ * tablet or a PC — so a screen of rows or cards never stretches one line across a wide window.
+ *
+ * - `kind="cards"` (default): cards (offers, VIP passes, sets, players) in as many columns of at
+ *   least `min` px as fit, row after row.
+ * - `kind="strips"`: edge-to-edge strips (quests, letters, market lots): one column — the strips
+ *   as they are; two or more — each strip becomes a framed card with a gap around it.
+ * - `kind="ranked"`: an ordered list (a leaderboard): the order runs DOWN the first column, then
+ *   the next — 1…N on the left, N+1… on the right, never 1 | 2 across.
+ *
+ * Pure CSS (a container query on its own width), so it fits the area it is in — a page, a window,
+ * a side panel — not the viewport.
+ */
+declare function Columns({ kind, min, gap, children, style, }: {
+    kind?: "cards" | "strips" | "ranked";
+    /** The narrowest a column gets, px (`cards` only; strips use 340, ranked lists 460). */
+    min?: number;
+    /** The space between items, px (`cards` — 10 by default; `ranked` — none by default). */
+    gap?: number;
+    children: ReactNode;
+    style?: CSSProperties;
+}): ReactNode;
+
 /** Closes the popup this component is in, with its exit animation. */
 declare function usePopupClose(): () => void;
 /** Renders into the kit layer; in place when there is no provider. */
@@ -987,7 +1230,7 @@ interface PopupProps {
     title?: ReactNode;
     /** Max width on tablet/desktop, px (default 400). */
     width?: number;
-    /** "auto" — a bottom sheet on a phone, a centred popup elsewhere (default); "center" — always centred. */
+    /** "auto" / "center" — a centred popup on every screen (default); "sheet" — a panel sliding up from the bottom. */
     variant?: "auto" | "center" | "sheet";
     /** Backdrop and Escape close it (default true when onClose is set). */
     dismissible?: boolean;
@@ -1040,38 +1283,39 @@ declare function FeatureGrid({ items, onOpen, }: {
 declare const LEVEL_TONE: Record<NotificationLevel, ButtonTone>;
 
 declare const U: {
-    readonly ink: "#10172e";
-    readonly navy: "#1f2440";
-    readonly navyDeep: "#1a1f38";
-    readonly blue: "#0d80f2";
-    readonly blueBody: "#0897f7";
-    readonly sky: "#00aeff";
-    readonly topbar: "#33364a";
-    readonly tabOn: "#3082ff";
-    readonly tabOff: "#363650";
-    readonly bg: "#0340a3";
-    readonly bgDeep: "#032b73";
-    readonly gold: "#ffce0d";
-    readonly listLight: "#d9e8f2";
-    readonly listBlue: "#00ccff";
-    readonly listBlueInner: "#0099ff";
-    readonly listYellow: "#fffed6";
-    readonly listYellowInner: "#fffc54";
-    readonly sliderBg: "#212130";
-    readonly fillGreen: "#47d61e";
-    readonly fillOrange: "#ff9a1a";
+    readonly ink: "var(--idos-ui-ink)";
+    readonly navy: "var(--idos-ui-panel-deep)";
+    readonly navyDeep: "color-mix(in srgb, var(--idos-ui-panel-deep) 70%, var(--idos-ui-ink))";
+    readonly blue: "var(--idos-ui-blue)";
+    readonly blueBody: "var(--idos-ui-panel)";
+    readonly sky: "var(--idos-ui-blue)";
+    readonly topbar: "var(--idos-ui-bg-top)";
+    readonly tabOn: "var(--idos-ui-blue)";
+    readonly tabOff: "#45475f";
+    readonly bg: "var(--idos-ui-bg-top)";
+    readonly bgDeep: "var(--idos-ui-bg-bottom)";
+    readonly gold: "var(--idos-ui-gold)";
+    readonly listLight: "#ffffff";
+    readonly listBlue: "var(--idos-ui-panel)";
+    readonly listBlueInner: "color-mix(in srgb, var(--idos-ui-panel) 70%, #fff)";
+    readonly listYellow: "color-mix(in srgb, var(--idos-ui-gold) 45%, #fff)";
+    readonly listYellowInner: "var(--idos-ui-gold)";
+    readonly sliderBg: "var(--idos-ui-well)";
+    readonly fillGreen: "var(--idos-ui-green)";
+    readonly fillOrange: "var(--idos-ui-orange)";
 };
 /** The reference's outlined game text (TMP with outline + a drop shadow). */
 declare function uText(size: number, color?: string, stroke?: string): CSSProperties;
-/** The faint diagonal pattern laid over the blue backgrounds (Pattern01_s, white at ~8 %). */
-declare const U_PATTERN = "repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 14px, rgba(255,255,255,0) 14px 28px)";
+/** The soft glow laid over the screen backgrounds (the casual look has no stripes). */
+declare const U_PATTERN: string;
 /** Gradient_Panel01 tinted: a radial glow over a solid, with the pattern on top. */
 declare function uBackdrop(color?: string, glow?: string): CSSProperties;
 /**
- * A lobby screen in the reference's look: the blue patterned window background from edge to edge,
- * at least as tall as the lobby's scroll box (a short list does not leave the lobby's own colour
- * under it), with `footer` pinned to the bottom of the box (Unity's bottom tabs / my row). The pin
- * offset is read from the box's padding, so it lands flush whatever the lobby's spacing is.
+ * A lobby screen in the reference's look, from edge to edge of the lobby's scroll box and at least
+ * as tall as it, with `footer` pinned to the bottom of the box (Unity's bottom tabs / my row). The
+ * edges are read from the box's own padding — whatever the lobby's spacing at this width — so no
+ * strip is left at the sides on a tablet or a monitor. On the default background the screen is see-
+ * through: the lobby's own background (its moving gear pattern) shows, one pattern for the whole app.
  */
 declare function UScreen({ children, footer, background, }: {
     children: ReactNode;
@@ -1238,4 +1482,4 @@ declare const U_CSS = "\n@keyframes idos-u-spin { to { transform: rotate(360deg)
 /** Renders U_CSS once per page (each U screen calls it; the tag is shared by id). */
 declare function UStyles(): ReactNode;
 
-export { Badge, type Burst, Button, type ButtonProps, type ButtonTone, Card, type Catalog, type CelebrateOptions, Center, ConfirmPopup, CryptoBalanceChip, type CryptoBalanceView, type CurrencySection, DEFAULT_PLAYER_PREFS, DEFAULT_UI_CONFIG, DESKTOP_MIN_PX, EASE_IN, EASE_OUT, EASE_POP, EmptyState, FeatureGrid, type FeatureMenuItem, Field, type Flight, FxStore, GLYPHS, type Glyph, Icon, IconButton, type ItemDefinitionView, type ItemSection, ItemTile, KIT_CSS, type KitNotify, type KitOverlayState, KitPortal, LANGUAGE_EVENT, LANGUAGE_KEY, LEVEL_TONE, LanguageSwitch, type Layout, type NotificationAction, type NotificationInput, type NotificationLevel, type NotificationSource, NotificationStore, ON_TONE, type Point, Popup, type PopupProps, ProgressBar, RARITY_ORDER, type ResolvedSound, ResourceBadge, ResourceCounter, type ResourceKind, type ResourceLine, ResourceList, SOUND_PRESETS, SectionTitle, Select, type ShownNotification, Spinner, type SynthNoise, type SynthNote, type SynthPreset, TABLET_MIN_PX, TOAST_DURATION, type TabItem, Tabs, TextArea, TextInput, Timer, type TitleSections, U, UAvatar, UButton, UCloseCircle, UDivider, UFlag, UHexRank, UI_SOUND_EVENTS, UIconSlider, UItemFrame, UMedal, type UMilestone, type UMilestoneState, UMilestonesPopup, UPopup, URankRow, type URankTone, URays, URibbon, URow, type URowTone, UScreen, USlider, UStyles, UTabs, UTimer, type UTone, UTopBar, U_CSS, U_PATTERN, type UiKitConfig, type UiKitConfigInput, UiKitProvider, type UiKitProviderProps, type UiKitValue, type UiLanguage, type UiMotion, type UiMotionConfig, type UiPlayerPrefs, type UiSoundConfig, UiSoundEngine, type UiSoundEvent, type UiSoundSpec, type UiStringKey, type UiThemeConfig, Window, bundleLines, buttonStyle, canAfford, configSection, costLines, countdown, counterKeys, createNotificationStore, cryptoBalance, currencyGlyph, defineUiConfig, effectiveVolume, errorText, formatAmount, formatCryptoAmount, grantLines, grantedBy, groupBy, iconsFor, iouCurrencies, iouCurrencyOf, isGlyph, itemDefinitions, itemGlyph, layoutFor, makeT, mergeLines, motionDurations, onLanguageChange, outlined, panel, parsePlayerPrefs, pickLanguage, plural, rarityRank, renderKitOverlays, resolveSound, resolveUiConfig, resourceName, screenBackground, setAutoPopupsHeld, setLanguage, sortFeatures, themeVars, tokenGlyph, tokenName, tokenParts, toneSurface, uBackdrop, uText, uiT, useAnimatedNumber, useBalances, useCatalog, useCelebrate, useCounterValue, useGameLayout, useLanguage, useLayout, useMotion, useNotify, useNow, usePlayerPrefs, usePopupClose, usePresence, useSound, useStagger, useToast, useUiKit, v, well };
+export { BackButton, Badge, type Burst, Button, type ButtonProps, type ButtonTone, Card, type Catalog, type CelebrateOptions, Center, Columns, ConfirmPopup, CryptoBalanceChip, type CryptoBalanceView, type CurrencySection, DEFAULT_PLAYER_PREFS, DEFAULT_UI_CONFIG, DESKTOP_MIN_PX, EASE_IN, EASE_OUT, EASE_POP, EmptyState, FeatureGrid, type FeatureMenuItem, Field, type Flight, FxStore, GEAR_PATTERN, GLYPHS, type Glyph, HexBadge, INK, Icon, IconButton, IconTile, InfoButton, type ItemDefinitionView, type ItemSection, ItemTile, KIT_CSS, type KitNotify, type KitOverlayState, KitPortal, LANGUAGE_EVENT, LANGUAGE_KEY, LEVEL_TONE, LanguageSwitch, type Layout, LevelBar, LevelRoadRow, LevelShield, MenuTile, MovingPattern, type NotificationAction, type NotificationInput, type NotificationLevel, type NotificationSource, NotificationStore, ON_TONE, type Point, Popup, type PopupProps, ProgressBar, RARITY_ORDER, RarityTag, type ResolvedSound, ResourceBadge, ResourceCounter, type ResourceKind, type ResourceLine, ResourceList, Ribbon, type RoadState, SOUND_PRESETS, ScreenHeader, SectionTitle, Select, type ShownNotification, SoldOutStamp, SpeechBubble, Spinner, StepperCounter, type SynthNoise, type SynthNote, type SynthPreset, TABLET_MIN_PX, TOAST_DURATION, TONES, type TabItem, Tabs, TextArea, TextInput, Timer, type TitleSections, Toggle, U, UAvatar, UButton, UCloseCircle, UDivider, UFlag, UHexRank, UI_SOUND_EVENTS, UIconSlider, UItemFrame, UMedal, type UMilestone, type UMilestoneState, UMilestonesPopup, UPopup, URankRow, type URankTone, URays, URibbon, URow, type URowTone, UScreen, USlider, UStyles, UTabs, UTimer, type UTone, UTopBar, U_CSS, U_PATTERN, type UiKitConfig, type UiKitConfigInput, UiKitProvider, type UiKitProviderProps, type UiKitValue, type UiLanguage, type UiMotion, type UiMotionConfig, type UiPlayerPrefs, type UiSoundConfig, UiSoundEngine, type UiSoundEvent, type UiSoundSpec, type UiStringKey, type UiThemeConfig, Window, bundleLines, buttonStyle, canAfford, configSection, costLines, countdown, counterKeys, createNotificationStore, cryptoBalance, currencyGlyph, defineUiConfig, effectiveVolume, errorText, formatAmount, formatCryptoAmount, formatLineAmount, grantLines, grantedBy, groupBy, iconsFor, inkFrame, inkShadow, inked, iouCurrencies, iouCurrencyOf, isGlyph, itemDefinitions, itemGlyph, layoutFor, listRow, makeT, mergeLines, motionDurations, onLanguageChange, outlined, panel, parsePlayerPrefs, pickLanguage, plate, plural, rarityPlate, rarityRank, renderKitOverlays, resolveSound, resolveUiConfig, resourceName, screenBackground, setAutoPopupsHeld, setLanguage, sortFeatures, themeVars, tokenGlyph, tokenName, tokenParts, tonePlate, toneSurface, uBackdrop, uText, uiT, useAnimatedNumber, useBalances, useCatalog, useCelebrate, useCounterValue, useGameLayout, useLanguage, useLayout, useMotion, useNotify, useNow, usePlayerPrefs, usePopupClose, usePresence, useSound, useStagger, useToast, useUiKit, v, well };