@idosgames/react 0.4.3 → 0.4.5

package/dist/ui/index.d.cts

@@ -1,5 +1,5 @@
-import { ReactNode, CSSProperties, MouseEvent } from 'react';
-import { IDosGamesClient, ResourceConsume, ResourceGrant } from '@idosgames/core';
+import { ReactNode, CSSProperties, MouseEvent, TextareaHTMLAttributes, InputHTMLAttributes } from 'react';
+import { TitlePublicConfigurationModel, IDosGamesClient, ResourceConsume, ResourceGrant } from '@idosgames/core';
 
 /** Interface sound events. Components of the kit play theirs by themselves. */
 declare const UI_SOUND_EVENTS: readonly ["click", "tab", "open", "close", "reward", "coin", "purchase", "claim", "error", "notify", "lootbox", "levelUp", "countTick"];
@@ -267,7 +267,7 @@ declare class NotificationStore {
 }
 declare function createNotificationStore(): NotificationStore;
 
-type ResourceKind = "currency" | "item" | "token" | "other";
+type ResourceKind = "currency" | "crypto" | "item" | "token" | "other";
 interface ResourceLine {
     kind: ResourceKind;
     /**
@@ -276,12 +276,18 @@ interface ResourceLine {
      */
     id: string;
     amount: number;
+    /**
+     * Crypto only: `amount` is a price in USD (`AmountUsd` of the config), converted to tokens by the server at the
+     * live price when charging — draw it as "$5", never as "5 tokens".
+     */
+    usd?: boolean;
 }
 type BundleEntry = {
     Type?: string | null;
     CurrencyID?: string | null;
     ItemID?: string | null;
     Amount?: number | null;
+    AmountUsd?: number | null;
 } | null;
 /** An event token of a bundle; a server response adds what was actually applied (`Applied`, after caps). */
 type BundleToken = {
@@ -325,9 +331,18 @@ declare function grantedBy(data: unknown): ResourceLine[];
 /** Whether the player's balances cover a price (items are the server's check). */
 declare function canAfford(price: ResourceLine[], balances: Record<string, {
     Amount?: number;
-} | null | undefined> | null | undefined): boolean;
+} | null | undefined> | null | undefined, 
+/** Crypto balances (`InventoryV2.CryptoCurrencies`). Omitted — crypto lines are left to the server. */
+cryptoBalances?: Record<string, {
+    Amount?: number | string;
+} | null | undefined> | null): boolean;
 /** 1234 → "1 234", 1_250_000 → "1.25M" — balances must fit a chip. */
 declare function formatAmount(value: number): string;
+/**
+ * A crypto amount for a chip: tokens are fractional, so unlike {@link formatAmount} small values keep
+ * their decimals — 4.5 stays "4.5", 0.0123 stays "0.0123"; large ones are shortened the same way.
+ */
+declare function formatCryptoAmount(value: number): string;
 /** Countdown "3h 05m" / "12m 09s" / "2d 4h" to a server timestamp, from `nowMs` (server-corrected). */
 declare function countdown(targetUtc: string | null | undefined, nowMs: number): string | null;
 /**
@@ -338,11 +353,19 @@ type Layout = "phone" | "tablet" | "desktop";
 declare const TABLET_MIN_PX = 640;
 declare const DESKTOP_MIN_PX = 1024;
 declare function layoutFor(widthPx: number): Layout;
+/** The title configuration's named sections (`Craft`, `Quest`, …) with their types - not the index signature. */
+type TitleSections = {
+    [K in keyof TitlePublicConfigurationModel as string extends K ? never : number extends K ? never : K]-?: NonNullable<TitlePublicConfigurationModel[K]>;
+};
 /**
  * A section of the title configuration. `getSection` holds only what a feature fetched on its own
  * (GetDefinitions); the full config the client loads at sign-in lives in `titlePublicConfiguration`.
  * Reading only the first left screens empty on titles that had everything (found 27.09.2026).
+ *
+ * A section the SDK knows (`"Craft"` -> `CraftDefinitions`) comes back with its own type; for a
+ * section it does not, name the shape you read: `configSection<MyView>(client, "Name")`.
  */
+declare function configSection<K extends keyof TitleSections>(client: IDosGamesClient, key: K): TitleSections[K] | undefined;
 declare function configSection<T>(client: IDosGamesClient, key: string): T | undefined;
 interface ItemDefinitionView {
     ItemID?: string;
@@ -368,6 +391,17 @@ interface CurrencySection {
         DisplayName?: string | null;
         ImagePath?: string | null;
     } | null> | null;
+    /** The title's crypto currencies — a price may be paid in them (spent crypto goes to the developer). */
+    CryptoCurrencies?: Record<string, {
+        CurrencyID?: string;
+        DisplayName?: string | null;
+        AssetPaths?: Record<string, string> | null;
+        /** Developer fee (percent) on crypto moving between players (marketplace, PvP, Workshop). */
+        PlayerTradeFeePercent?: number | string | null;
+        /** The IOU virtual currency (`{ID}_IOU`): the unbacked part of crypto rewards. */
+        UnbackedRewardCurrencyID?: string | null;
+        DisplayDecimals?: number | null;
+    } | null> | null;
 }
 /** All item definitions of the title, across catalogs, by item id. */
 declare function itemDefinitions(section: ItemSection | undefined): Map<string, ItemDefinitionView>;
@@ -379,6 +413,38 @@ declare function groupBy<T>(items: readonly T[], key: (item: T) => string): Arra
     key: string;
     items: T[];
 }>;
+/**
+ * A crypto balance as the player should see it (owner, 2026-10-09): ONE number — the real crypto
+ * (backed by the title's pool) plus its IOU (`{ID}_IOU`, the unbacked part of crypto rewards the
+ * developer repays later; in the game it spends like the crypto, the IOU first). The split goes into
+ * a hover popover, not into two chips.
+ */
+interface CryptoBalanceView {
+    currencyID: string;
+    /** Real crypto on the in-game balance (withdrawable). */
+    backed: number;
+    /** IOU — virtual until the developer backs it. */
+    unbacked: number;
+    total: number;
+    /** The IOU currency id, or null when the title has none for this crypto. */
+    iouID: string | null;
+}
+type StateBalances = {
+    InventoryV2?: {
+        VirtualCurrencies?: Record<string, {
+            Amount?: number | string | null;
+        } | null | undefined> | null;
+        CryptoCurrencies?: Record<string, {
+            Amount?: number | string | null;
+        } | null | undefined> | null;
+    } | null;
+} | null | undefined;
+/** The IOU currency id of a crypto: the config's `UnbackedRewardCurrencyID`, else `{ID}_IOU`. */
+declare function iouCurrencyOf(cryptoID: string, cryptoDefs: CurrencySection["CryptoCurrencies"]): string;
+/** Backed + unbacked balance of one crypto currency. */
+declare function cryptoBalance(state: StateBalances, cryptoID: string, cryptoDefs: CurrencySection["CryptoCurrencies"]): CryptoBalanceView;
+/** IOU currencies of the title — they are shown inside their crypto's balance, never as their own. */
+declare function iouCurrencies(cryptoDefs: CurrencySection["CryptoCurrencies"]): Set<string>;
 
 interface Point {
     x: number;
@@ -540,55 +606,6 @@ declare function UiKitProvider({ config: input, children, overlays, notification
 
 declare function renderKitOverlays(state: KitOverlayState): ReactNode;
 
-type UiLanguage = "en" | "ru";
-declare function pickLanguage(): UiLanguage;
-/**
- * A module's string table: `const t = makeT(EN, RU)`, then `t("buy")`. The Russian table must have
- * every key of the English one (the type says so), so a missing translation is a compile error.
- */
-declare function makeT<K extends string>(en: Record<K, string>, ru: Record<K, string>, language?: UiLanguage): (key: K) => string;
-/**
- * The word for a count, from a table entry of forms split by "|": English "lot|lots", Russian
- * "лот|лота|лотов" (one / few / many — 1, 2–4, 5+). `plural(21, t("lots"))` → "лот".
- */
-declare function plural(n: number, forms: string, language?: UiLanguage): string;
-declare const EN: {
-    readonly close: "Close";
-    readonly back: "Back";
-    readonly confirm: "Confirm";
-    readonly cancel: "Cancel";
-    readonly youGot: "You got";
-    readonly great: "Great!";
-    readonly loading: "Loading…";
-    readonly ok: "OK";
-    readonly loadingNamed: "Loading {name}…";
-    readonly stillLoading: "Still loading — the first start can take a little longer";
-    readonly retry: "Retry";
-    readonly error: "Something went wrong";
-    readonly notEnough: "Not enough resources";
-    readonly offline: "No connection. Retrying…";
-    readonly more: "More";
-    readonly menu: "Menu";
-    readonly nothingHere: "Nothing here yet";
-    readonly economy: "Economy";
-    readonly events: "Activities";
-    readonly social: "Social";
-    readonly profile: "Profile";
-    readonly other: "Other";
-    readonly free: "Free";
-    readonly claim: "Claim";
-    readonly claimAll: "Claim all";
-    readonly tokenEvent: "Event points";
-    readonly tokenSeason: "Season status";
-    readonly tokenQuest: "Quest points";
-    readonly tokenScore: "Rating points";
-};
-type UiStringKey = keyof typeof EN;
-/** Strings of the kit itself. */
-declare const uiT: (key: "close" | "claim" | "error" | "events" | "other" | "back" | "confirm" | "cancel" | "youGot" | "great" | "loading" | "ok" | "loadingNamed" | "stillLoading" | "retry" | "notEnough" | "offline" | "more" | "menu" | "nothingHere" | "economy" | "social" | "profile" | "free" | "claimAll" | "tokenEvent" | "tokenSeason" | "tokenQuest" | "tokenScore") => string;
-/** Turns a server error into words the player understands; long texts are cut. */
-declare function errorText(error: string | null | undefined): string;
-
 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"];
 type Glyph = (typeof GLYPHS)[number];
 declare function isGlyph(value: string): value is Glyph;
@@ -603,111 +620,6 @@ declare function Icon({ glyph, size, color, }: {
     color?: string;
 }): ReactNode;
 
-/** CSS variables of a resolved config, to put on the kit root. */
-declare function themeVars(config: UiKitConfig, reducedMotion: boolean): CSSProperties;
-/** Shorthands for inline styles, so components never spell a variable name twice. */
-declare const v: {
-    readonly bgTop: "var(--idos-ui-bg-top)";
-    readonly bgBottom: "var(--idos-ui-bg-bottom)";
-    readonly panel: "var(--idos-ui-panel)";
-    readonly panelDeep: "var(--idos-ui-panel-deep)";
-    readonly panelEdge: "var(--idos-ui-panel-edge)";
-    readonly text: "var(--idos-ui-text)";
-    readonly textDim: "var(--idos-ui-text-dim)";
-    readonly gold: "var(--idos-ui-gold)";
-    readonly goldDeep: "var(--idos-ui-gold-deep)";
-    readonly green: "var(--idos-ui-green)";
-    readonly greenDeep: "var(--idos-ui-green-deep)";
-    readonly blue: "var(--idos-ui-blue)";
-    readonly blueDeep: "var(--idos-ui-blue-deep)";
-    readonly red: "var(--idos-ui-red)";
-    readonly redDeep: "var(--idos-ui-red-deep)";
-    readonly shadow: "var(--idos-ui-shadow)";
-    readonly backdrop: "var(--idos-ui-backdrop)";
-    readonly onGreen: "var(--idos-ui-on-green)";
-    readonly onGold: "var(--idos-ui-on-gold)";
-    readonly onBlue: "var(--idos-ui-on-blue)";
-    readonly onRed: "var(--idos-ui-on-red)";
-    readonly onGreenOutline: "var(--idos-ui-on-green-outline)";
-    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 textOutline: "var(--idos-ui-text-outline)";
-    readonly line: "var(--idos-ui-line)";
-    readonly well: "var(--idos-ui-well)";
-    readonly wellSoft: "var(--idos-ui-well-soft)";
-    readonly wellShadow: "var(--idos-ui-well-shadow)";
-    readonly edge: "var(--idos-ui-edge)";
-    readonly glow: "var(--idos-ui-glow)";
-    readonly panelShadow: "var(--idos-ui-panel-shadow)";
-    readonly radius: "var(--idos-ui-radius)";
-    readonly buttonRadius: "var(--idos-ui-button-radius)";
-    readonly font: "var(--idos-ui-font)";
-    readonly fast: "var(--idos-ui-fast)";
-    readonly normal: "var(--idos-ui-normal)";
-    readonly slow: "var(--idos-ui-slow)";
-};
-/**
- * Bold text in the theme's text colour with the casual "outline" for readability over art — the
- * outline is a theme token (`textOutline`): on light text a dark outline, on dark text none, so a
- * light theme's dark letters never get a dark double.
- */
-declare const outlined: CSSProperties;
-/** The glossy card every panel uses. */
-declare const panel: CSSProperties;
-/** Full-screen background of a screen. */
-declare const screenBackground: string;
-/** A recessed chip/slot (balances, round icon buttons). */
-declare const well: CSSProperties;
-/** Easing with an overshoot — the "pop" of casual games. */
-declare const EASE_POP = "cubic-bezier(.2, .9, .3, 1.25)";
-declare const EASE_OUT = "cubic-bezier(.2, .8, .2, 1)";
-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@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";
-
-/** The layout for the element's current width, following it as it resizes. */
-declare function useLayout(ref: {
-    current: HTMLElement | null;
-}): Layout;
-/** Layout of the whole game (the kit layer covers it). */
-declare function useGameLayout(): Layout;
-/**
- * Keeps something on screen until its exit animation has played: `open` false → `closing` true for
- * the exit duration, then `mounted` false. With motion off the exit is instant.
- */
-declare function usePresence(open: boolean, exitMs: number): {
-    mounted: boolean;
-    closing: boolean;
-};
-/** Ticks a number towards its new value — balances "count" like in the Unity HUD. */
-declare function useAnimatedNumber(target: number, durationMs?: number, onTick?: () => void): number;
-/**
- * The value a counter shows: frozen while reward icons fly to it (so it ticks when they LAND), then
- * animated to the real amount with a tick sound.
- */
-declare function useCounterValue(counterKey: string, amount: number): number;
-interface Catalog {
-    items: Map<string, ItemDefinitionView>;
-    currencies: NonNullable<CurrencySection["VirtualCurrencies"]>;
-    /** The publisher's text through the title's localization, when it is a localization key. */
-    localize(text: string | null | undefined): string;
-    currencyName(id: string): string;
-    itemName(id: string): string;
-    /** Glyph or image for a resource line: the title's ImagePath when set, else a fitting glyph. */
-    iconOf(line: ResourceLine): Glyph | string;
-    rarityColor(rarity: string | null | undefined): string;
-}
-/** Names and icons of the title's currencies and items, from the configuration the client loaded. */
-declare function useCatalog(): Catalog;
-/** The player's currency balances (id → amount), live; only currencies the title defines. */
-declare function useBalances(): Array<[string, number]>;
-/** Re-renders every `ms` — for countdowns. */
-declare function useNow(ms?: number): number;
-
 type ButtonTone = "green" | "gold" | "blue" | "red" | "grey";
 /** Text colour and its outline on a filled surface of each tone (theme tokens `onGreen`, …). */
 declare const ON_TONE: Record<ButtonTone, {
@@ -847,6 +759,185 @@ declare function Card({ children, style, highlight, onClick, }: {
     highlight?: boolean;
     onClick?: () => void;
 }): ReactNode;
+/** A one-line text (or number) field. `style` overrides the kit's look per use (width, size). */
+declare function TextInput({ style, ...rest }: InputHTMLAttributes<HTMLInputElement>): ReactNode;
+/** A multi-line text field. */
+declare function TextArea({ style, ...rest }: TextareaHTMLAttributes<HTMLTextAreaElement>): ReactNode;
+/** A label above a control (a field of a form). */
+declare function Field({ label, children, }: {
+    label: string;
+    children: ReactNode;
+}): ReactNode;
+/**
+ * A crypto balance chip: the TOTAL (backed crypto + its IOU) — one number, like any balance; hover
+ * (a tap on a phone) shows the split. The IOU part is virtual until the developer backs it.
+ */
+declare function CryptoBalanceChip({ currencyID, size, align, }: {
+    currencyID: string;
+    size?: number;
+    /** Which edge of the chip the popover lines up with. */
+    align?: "left" | "right";
+}): ReactNode;
+
+type UiLanguage = "en" | "ru";
+declare function pickLanguage(): UiLanguage;
+/**
+ * A module's string table: `const t = makeT(EN, RU)`, then `t("buy")`. The Russian table must have
+ * every key of the English one (the type says so), so a missing translation is a compile error.
+ */
+declare function makeT<K extends string>(en: Record<K, string>, ru: Record<K, string>, language?: UiLanguage): (key: K) => string;
+/**
+ * The word for a count, from a table entry of forms split by "|": English "lot|lots", Russian
+ * "лот|лота|лотов" (one / few / many — 1, 2–4, 5+). `plural(21, t("lots"))` → "лот".
+ */
+declare function plural(n: number, forms: string, language?: UiLanguage): string;
+declare const EN: {
+    readonly close: "Close";
+    readonly back: "Back";
+    readonly confirm: "Confirm";
+    readonly cancel: "Cancel";
+    readonly youGot: "You got";
+    readonly great: "Great!";
+    readonly loading: "Loading…";
+    readonly ok: "OK";
+    readonly loadingNamed: "Loading {name}…";
+    readonly stillLoading: "Still loading — the first start can take a little longer";
+    readonly retry: "Retry";
+    readonly error: "Something went wrong";
+    readonly notEnough: "Not enough resources";
+    readonly offline: "No connection. Retrying…";
+    readonly more: "More";
+    readonly menu: "Menu";
+    readonly nothingHere: "Nothing here yet";
+    readonly economy: "Economy";
+    readonly events: "Activities";
+    readonly social: "Social";
+    readonly profile: "Profile";
+    readonly other: "Other";
+    readonly free: "Free";
+    readonly claim: "Claim";
+    readonly claimAll: "Claim all";
+    readonly tokenEvent: "Event points";
+    readonly tokenSeason: "Season status";
+    readonly tokenQuest: "Quest points";
+    readonly tokenScore: "Rating points";
+    readonly cryptoTotal: "Balance";
+    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.";
+};
+type UiStringKey = keyof typeof EN;
+/** Strings of the kit itself. */
+declare const uiT: (key: "close" | "claim" | "error" | "events" | "other" | "back" | "confirm" | "cancel" | "youGot" | "great" | "loading" | "ok" | "loadingNamed" | "stillLoading" | "retry" | "notEnough" | "offline" | "more" | "menu" | "nothingHere" | "economy" | "social" | "profile" | "free" | "claimAll" | "tokenEvent" | "tokenSeason" | "tokenQuest" | "tokenScore" | "cryptoTotal" | "cryptoBacked" | "cryptoUnbacked" | "cryptoIouHint") => string;
+/** Turns a server error into words the player understands; long texts are cut. */
+declare function errorText(error: string | null | undefined): string;
+
+/** CSS variables of a resolved config, to put on the kit root. */
+declare function themeVars(config: UiKitConfig, reducedMotion: boolean): CSSProperties;
+/** Shorthands for inline styles, so components never spell a variable name twice. */
+declare const v: {
+    readonly bgTop: "var(--idos-ui-bg-top)";
+    readonly bgBottom: "var(--idos-ui-bg-bottom)";
+    readonly panel: "var(--idos-ui-panel)";
+    readonly panelDeep: "var(--idos-ui-panel-deep)";
+    readonly panelEdge: "var(--idos-ui-panel-edge)";
+    readonly text: "var(--idos-ui-text)";
+    readonly textDim: "var(--idos-ui-text-dim)";
+    readonly gold: "var(--idos-ui-gold)";
+    readonly goldDeep: "var(--idos-ui-gold-deep)";
+    readonly green: "var(--idos-ui-green)";
+    readonly greenDeep: "var(--idos-ui-green-deep)";
+    readonly blue: "var(--idos-ui-blue)";
+    readonly blueDeep: "var(--idos-ui-blue-deep)";
+    readonly red: "var(--idos-ui-red)";
+    readonly redDeep: "var(--idos-ui-red-deep)";
+    readonly shadow: "var(--idos-ui-shadow)";
+    readonly backdrop: "var(--idos-ui-backdrop)";
+    readonly onGreen: "var(--idos-ui-on-green)";
+    readonly onGold: "var(--idos-ui-on-gold)";
+    readonly onBlue: "var(--idos-ui-on-blue)";
+    readonly onRed: "var(--idos-ui-on-red)";
+    readonly onGreenOutline: "var(--idos-ui-on-green-outline)";
+    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 textOutline: "var(--idos-ui-text-outline)";
+    readonly line: "var(--idos-ui-line)";
+    readonly well: "var(--idos-ui-well)";
+    readonly wellSoft: "var(--idos-ui-well-soft)";
+    readonly wellShadow: "var(--idos-ui-well-shadow)";
+    readonly edge: "var(--idos-ui-edge)";
+    readonly glow: "var(--idos-ui-glow)";
+    readonly panelShadow: "var(--idos-ui-panel-shadow)";
+    readonly radius: "var(--idos-ui-radius)";
+    readonly buttonRadius: "var(--idos-ui-button-radius)";
+    readonly font: "var(--idos-ui-font)";
+    readonly fast: "var(--idos-ui-fast)";
+    readonly normal: "var(--idos-ui-normal)";
+    readonly slow: "var(--idos-ui-slow)";
+};
+/**
+ * Bold text in the theme's text colour with the casual "outline" for readability over art — the
+ * outline is a theme token (`textOutline`): on light text a dark outline, on dark text none, so a
+ * light theme's dark letters never get a dark double.
+ */
+declare const outlined: CSSProperties;
+/** The glossy card every panel uses. */
+declare const panel: CSSProperties;
+/** Full-screen background of a screen. */
+declare const screenBackground: string;
+/** A recessed chip/slot (balances, round icon buttons). */
+declare const well: CSSProperties;
+/** Easing with an overshoot — the "pop" of casual games. */
+declare const EASE_POP = "cubic-bezier(.2, .9, .3, 1.25)";
+declare const EASE_OUT = "cubic-bezier(.2, .8, .2, 1)";
+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@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";
+
+/** The layout for the element's current width, following it as it resizes. */
+declare function useLayout(ref: {
+    current: HTMLElement | null;
+}): Layout;
+/** Layout of the whole game (the kit layer covers it). */
+declare function useGameLayout(): Layout;
+/**
+ * Keeps something on screen until its exit animation has played: `open` false → `closing` true for
+ * the exit duration, then `mounted` false. With motion off the exit is instant.
+ */
+declare function usePresence(open: boolean, exitMs: number): {
+    mounted: boolean;
+    closing: boolean;
+};
+/** Ticks a number towards its new value — balances "count" like in the Unity HUD. */
+declare function useAnimatedNumber(target: number, durationMs?: number, onTick?: () => void): number;
+/**
+ * The value a counter shows: frozen while reward icons fly to it (so it ticks when they LAND), then
+ * animated to the real amount with a tick sound.
+ */
+declare function useCounterValue(counterKey: string, amount: number): number;
+interface Catalog {
+    items: Map<string, ItemDefinitionView>;
+    currencies: NonNullable<CurrencySection["VirtualCurrencies"]>;
+    /** The title's crypto currencies (names, icons, the trade fee). */
+    cryptoCurrencies: NonNullable<CurrencySection["CryptoCurrencies"]>;
+    /** The publisher's text through the title's localization, when it is a localization key. */
+    localize(text: string | null | undefined): string;
+    currencyName(id: string): string;
+    itemName(id: string): string;
+    /** Glyph or image for a resource line: the title's ImagePath when set, else a fitting glyph. */
+    iconOf(line: ResourceLine): Glyph | string;
+    rarityColor(rarity: string | null | undefined): string;
+}
+/** Names and icons of the title's currencies and items, from the configuration the client loaded. */
+declare function useCatalog(): Catalog;
+/** The player's currency balances (id → amount), live; only currencies the title defines. */
+declare function useBalances(): Array<[string, number]>;
+/** Re-renders every `ms` — for countdowns. */
+declare function useNow(ms?: number): number;
 
 /** Closes the popup this component is in, with its exit animation. */
 declare function usePopupClose(): () => void;
@@ -917,4 +1008,4 @@ declare function FeatureGrid({ items, onOpen, }: {
 /** The theme tone of each level: colour of its badge, its stripe, its main button. */
 declare const LEVEL_TONE: Record<NotificationLevel, ButtonTone>;
 
-export { Badge, type Burst, Button, type ButtonProps, type ButtonTone, Card, type Catalog, type CelebrateOptions, Center, ConfirmPopup, type CurrencySection, DEFAULT_PLAYER_PREFS, DEFAULT_UI_CONFIG, DESKTOP_MIN_PX, EASE_IN, EASE_OUT, EASE_POP, EmptyState, FeatureGrid, type FeatureMenuItem, type Flight, FxStore, GLYPHS, type Glyph, Icon, IconButton, type ItemDefinitionView, type ItemSection, ItemTile, KIT_CSS, type KitNotify, type KitOverlayState, KitPortal, LEVEL_TONE, 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, type ShownNotification, Spinner, type SynthNoise, type SynthNote, type SynthPreset, TABLET_MIN_PX, TOAST_DURATION, type TabItem, Tabs, Timer, UI_SOUND_EVENTS, 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, currencyGlyph, defineUiConfig, effectiveVolume, errorText, formatAmount, grantLines, grantedBy, groupBy, iconsFor, isGlyph, itemDefinitions, itemGlyph, layoutFor, makeT, mergeLines, motionDurations, outlined, panel, parsePlayerPrefs, pickLanguage, plural, rarityRank, renderKitOverlays, resolveSound, resolveUiConfig, resourceName, screenBackground, setAutoPopupsHeld, sortFeatures, themeVars, tokenGlyph, tokenName, tokenParts, toneSurface, uiT, useAnimatedNumber, useBalances, useCatalog, useCelebrate, useCounterValue, useGameLayout, useLayout, useMotion, useNotify, useNow, usePlayerPrefs, usePopupClose, usePresence, useSound, useStagger, useToast, useUiKit, v, well };
+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, LEVEL_TONE, 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, type ShownNotification, Spinner, type SynthNoise, type SynthNote, type SynthPreset, TABLET_MIN_PX, TOAST_DURATION, type TabItem, Tabs, TextArea, TextInput, Timer, type TitleSections, UI_SOUND_EVENTS, 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, outlined, panel, parsePlayerPrefs, pickLanguage, plural, rarityRank, renderKitOverlays, resolveSound, resolveUiConfig, resourceName, screenBackground, setAutoPopupsHeld, sortFeatures, themeVars, tokenGlyph, tokenName, tokenParts, toneSurface, uiT, useAnimatedNumber, useBalances, useCatalog, useCelebrate, useCounterValue, useGameLayout, useLayout, useMotion, useNotify, useNow, usePlayerPrefs, usePopupClose, usePresence, useSound, useStagger, useToast, useUiKit, v, well };