@idosgames/react 0.5.0 → 0.5.2

package/dist/ui/index.d.cts

@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties, MouseEvent, SelectHTMLAttributes, TextareaHTMLAttributes, InputHTMLAttributes } from 'react';
+import { ReactNode, CSSProperties, MouseEvent, SelectHTMLAttributes, TextareaHTMLAttributes, InputHTMLAttributes, ButtonHTMLAttributes, ComponentProps } from 'react';
 import { TitlePublicConfigurationModel, IDosGamesClient, ResourceConsume, ResourceGrant } from '@idosgames/core';
 
 /** Interface sound events. Components of the kit play theirs by themselves. */
@@ -612,12 +612,16 @@ 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. */
 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): Glyph;
+declare function itemGlyph(tags: readonly string[] | null | undefined, itemClass?: string | null, 
+/** An engine resource path or id to guess from ("Sprites/Chest/Chest_Wood" → chest). */
+hint?: string | null): Glyph;
 /** A glyph by name, an image by URL ("https://…", "/…", "data:…"), or any other text (an emoji). */
-declare function Icon({ glyph, size, color, }: {
+declare function Icon({ glyph: requested, size, color, fallback, }: {
     glyph: Glyph | string;
     size?: number;
     color?: string;
+    /** Drawn instead of text that is not a symbol (a resource path, a word). */
+    fallback?: Glyph;
 }): ReactNode;
 
 type ButtonTone = "green" | "gold" | "blue" | "red" | "grey";
@@ -835,6 +839,8 @@ declare const EN: {
     readonly free: "Free";
     readonly claim: "Claim";
     readonly claimAll: "Claim all";
+    readonly rewards: "Rewards";
+    readonly premium: "Premium";
     readonly tokenEvent: "Event points";
     readonly tokenSeason: "Season status";
     readonly tokenQuest: "Quest points";
@@ -846,7 +852,7 @@ declare const EN: {
 };
 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" | "tokenEvent" | "tokenSeason" | "tokenQuest" | "tokenScore" | "cryptoTotal" | "cryptoBacked" | "cryptoUnbacked" | "cryptoIouHint") => string;
+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;
 /** Turns a server error into words the player understands; long texts are cut. */
 declare function errorText(error: string | null | undefined): string;
 
@@ -1033,4 +1039,203 @@ 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, 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, 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, onLanguageChange, outlined, panel, parsePlayerPrefs, pickLanguage, plural, rarityRank, renderKitOverlays, resolveSound, resolveUiConfig, resourceName, screenBackground, setAutoPopupsHeld, setLanguage, sortFeatures, themeVars, tokenGlyph, tokenName, tokenParts, toneSurface, uiT, useAnimatedNumber, useBalances, useCatalog, useCelebrate, useCounterValue, useGameLayout, useLanguage, useLayout, useMotion, useNotify, useNow, usePlayerPrefs, usePopupClose, usePresence, useSound, useStagger, useToast, useUiKit, v, well };
+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";
+};
+/** 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)";
+/** 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.
+ */
+declare function UScreen({ children, footer, background, }: {
+    children: ReactNode;
+    footer?: ReactNode;
+    background?: string;
+}): ReactNode;
+type UTone = "green" | "sky" | "yellow" | "purple" | "red" | "gray" | "orange";
+declare function UButton({ tone, size, busy, disabled, attract, children, style, onClick, ...rest }: {
+    tone?: UTone;
+    size?: "s" | "m" | "l";
+    busy?: boolean;
+    attract?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement>): ReactNode;
+/** The round close button under a popup / at the bottom bar (Button_Circle118 + Icon_Close02). */
+declare function UCloseCircle({ onClick, size, }: {
+    onClick: () => void;
+    size?: number;
+}): ReactNode;
+/**
+ * The reference's popup: a body (blue or navy), a blue top bar with the title and a light streak, an
+ * optional icon before the title (inline: a bottom sheet clips anything above its edge). The kit's Popup underneath — closing, the exit
+ * animation and usePopupClose() work as everywhere else.
+ */
+declare function UPopup({ title, icon, tone, children, panelStyle, ...rest }: ComponentProps<typeof Popup> & {
+    icon?: string;
+    tone?: "navy" | "blue";
+}): ReactNode;
+/** PanelFrame03 top bar: the title on the left, a black oblique corner with a counter on the right. */
+declare function UTopBar({ title, corner, cornerLabel, children, }: {
+    title: ReactNode;
+    corner?: ReactNode;
+    cornerLabel?: ReactNode;
+    children?: ReactNode;
+}): ReactNode;
+/** Bottom pill tabs (Button_Round10: blue when focused, slate otherwise, a red alert dot). */
+declare function UTabs<T extends string>({ tabs, value, onChange, }: {
+    tabs: Array<{
+        id: T;
+        label: ReactNode;
+        alert?: boolean;
+    }>;
+    value: T;
+    onChange: (id: T) => void;
+}): ReactNode;
+type URowTone = "light" | "blue" | "yellow" | "navy";
+/** ListFrame04 (quests) / ListFrame01 (leaderboard rows): an outer rim, an inner plate, a dim when done. */
+declare function URow({ tone, dim, children, style, }: {
+    tone?: URowTone;
+    dim?: boolean;
+    children: ReactNode;
+    style?: CSSProperties;
+}): ReactNode;
+/** ListFrame00~02 tints: [rim, inner plate, oblique right end] as the reference scene sets them. */
+type URankTone = "gold" | "silver" | "bronze" | "blue" | "entry" | "me";
+/**
+ * ListFrame00~02 (leaderboard entries, rank rewards): a dark rim, a bright inner plate, a darker
+ * oblique block at the right end holding `right` (the score / the reward).
+ */
+declare function URankRow({ tone, children, right, height, rightWidth, }: {
+    tone: URankTone;
+    children: ReactNode;
+    right?: ReactNode;
+    height?: number;
+    rightWidth?: number;
+}): ReactNode;
+/** ItemIcon_Medal_Gold/Silver/Bronze_2: a ribbon and a disc with the place. */
+declare function UMedal({ place, size, }: {
+    place: 1 | 2 | 3;
+    size?: number;
+}): ReactNode;
+/** BasicFrame_Hexagon87 with the place inside (the leaderboard entry's rank). */
+declare function UHexRank({ children, color, size, }: {
+    children: ReactNode;
+    color?: string;
+    size?: number;
+}): ReactNode;
+/** ProfileFrame01: a navy rim, a coloured inner square, the player's picture or initial. */
+declare function UAvatar({ name, src, inner, size, }: {
+    name: string;
+    src?: string | null;
+    inner?: string;
+    size?: number;
+}): ReactNode;
+/** BorderFrame_Flag Blue / Red / Green: the podium's hanging banner (gold bar on top, notched tail). */
+declare function UFlag({ color, height, children, }: {
+    color: "blue" | "red" | "green";
+    height?: number;
+    children: ReactNode;
+}): ReactNode;
+/** A reward/item in a navy frame with its amount under the icon. */
+declare function UItemFrame({ line, size, glyph, label, onClick, }: {
+    line?: ResourceLine | null;
+    size?: number;
+    glyph?: string;
+    label?: ReactNode;
+    onClick?: () => void;
+}): ReactNode;
+/** Slider_Basic02: a dark rounded track with a green (or orange) fill and the count in the middle. */
+declare function USlider({ value, max, tone, label, height, }: {
+    value: number;
+    max: number;
+    tone?: "green" | "orange" | "blue";
+    label?: ReactNode;
+    height?: number;
+}): ReactNode;
+/** Slider_Icon01: a slider with a framed icon at its left end (the quests / leaderboard milestone track). */
+declare function UIconSlider({ glyph, value, max, label, onClick, }: {
+    glyph: string;
+    value: number;
+    max: number;
+    label?: ReactNode;
+    onClick?: () => void;
+}): ReactNode;
+/** Title_Ribbon01 (orange / plum / sky): a raised plate with folded ends. */
+declare function URibbon({ tone, children, width, }: {
+    tone?: "orange" | "plum" | "sky";
+    children: ReactNode;
+    width?: number;
+}): ReactNode;
+/** BorderFrame_Oval timer: a dark pill with a clock. */
+declare function UTimer({ children }: {
+    children: ReactNode;
+}): ReactNode;
+/** Title_Line01: "REWARDS" between two golden dividers. */
+declare function UDivider({ children }: {
+    children: ReactNode;
+}): ReactNode;
+/** Image_Effect_Rotate: soft rays turning behind a prize. */
+declare function URays({ size, color, }: {
+    size?: number;
+    color?: string;
+}): ReactNode;
+type UMilestoneState = "locked" | "ready" | "claimed";
+interface UMilestone {
+    id: string;
+    /** Points (or rank) needed — shown in the left badge. */
+    required: number;
+    /** Shown instead of the number (e.g. "Top 3"). */
+    label?: ReactNode;
+    free: ResourceLine[];
+    state: UMilestoneState;
+    /** The premium column (events / season pass); omitted — the window has one column. */
+    premium?: ResourceLine[];
+    premiumState?: UMilestoneState;
+}
+/**
+ * The reference's milestone window: a row per milestone — the required points in a badge, the free
+ * reward, the premium reward (locked without the pass) — each with its Claim. `onClaim` returns
+ * whether it succeeded; the row stays busy until then.
+ */
+declare function UMilestonesPopup({ title, glyph, value, milestones, premiumOwned, onPremiumLock, onClaim, onClose, }: {
+    title?: ReactNode;
+    glyph?: string;
+    value: number;
+    milestones: UMilestone[];
+    premiumOwned?: boolean;
+    /** A tap on a locked premium reward — the game opens its pass offer (VIP). */
+    onPremiumLock?: () => void;
+    onClaim: (id: string, track: "free" | "premium") => Promise<boolean>;
+    onClose: () => void;
+}): ReactNode;
+/** Keyframes the U* components use; a screen drawing them renders this once. */
+declare const U_CSS = "\n@keyframes idos-u-spin { to { transform: rotate(360deg); } }\n@keyframes idos-u-attract { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }\n@keyframes idos-u-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }\n@keyframes idos-u-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }\n@keyframes idos-u-shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }\n";
+/** 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 };

package/dist/ui/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties, MouseEvent, SelectHTMLAttributes, TextareaHTMLAttributes, InputHTMLAttributes } from 'react';
+import { ReactNode, CSSProperties, MouseEvent, SelectHTMLAttributes, TextareaHTMLAttributes, InputHTMLAttributes, ButtonHTMLAttributes, ComponentProps } from 'react';
 import { TitlePublicConfigurationModel, IDosGamesClient, ResourceConsume, ResourceGrant } from '@idosgames/core';
 
 /** Interface sound events. Components of the kit play theirs by themselves. */
@@ -612,12 +612,16 @@ 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. */
 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): Glyph;
+declare function itemGlyph(tags: readonly string[] | null | undefined, itemClass?: string | null, 
+/** An engine resource path or id to guess from ("Sprites/Chest/Chest_Wood" → chest). */
+hint?: string | null): Glyph;
 /** A glyph by name, an image by URL ("https://…", "/…", "data:…"), or any other text (an emoji). */
-declare function Icon({ glyph, size, color, }: {
+declare function Icon({ glyph: requested, size, color, fallback, }: {
     glyph: Glyph | string;
     size?: number;
     color?: string;
+    /** Drawn instead of text that is not a symbol (a resource path, a word). */
+    fallback?: Glyph;
 }): ReactNode;
 
 type ButtonTone = "green" | "gold" | "blue" | "red" | "grey";
@@ -835,6 +839,8 @@ declare const EN: {
     readonly free: "Free";
     readonly claim: "Claim";
     readonly claimAll: "Claim all";
+    readonly rewards: "Rewards";
+    readonly premium: "Premium";
     readonly tokenEvent: "Event points";
     readonly tokenSeason: "Season status";
     readonly tokenQuest: "Quest points";
@@ -846,7 +852,7 @@ declare const EN: {
 };
 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" | "tokenEvent" | "tokenSeason" | "tokenQuest" | "tokenScore" | "cryptoTotal" | "cryptoBacked" | "cryptoUnbacked" | "cryptoIouHint") => string;
+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;
 /** Turns a server error into words the player understands; long texts are cut. */
 declare function errorText(error: string | null | undefined): string;
 
@@ -1033,4 +1039,203 @@ 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, 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, 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, onLanguageChange, outlined, panel, parsePlayerPrefs, pickLanguage, plural, rarityRank, renderKitOverlays, resolveSound, resolveUiConfig, resourceName, screenBackground, setAutoPopupsHeld, setLanguage, sortFeatures, themeVars, tokenGlyph, tokenName, tokenParts, toneSurface, uiT, useAnimatedNumber, useBalances, useCatalog, useCelebrate, useCounterValue, useGameLayout, useLanguage, useLayout, useMotion, useNotify, useNow, usePlayerPrefs, usePopupClose, usePresence, useSound, useStagger, useToast, useUiKit, v, well };
+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";
+};
+/** 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)";
+/** 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.
+ */
+declare function UScreen({ children, footer, background, }: {
+    children: ReactNode;
+    footer?: ReactNode;
+    background?: string;
+}): ReactNode;
+type UTone = "green" | "sky" | "yellow" | "purple" | "red" | "gray" | "orange";
+declare function UButton({ tone, size, busy, disabled, attract, children, style, onClick, ...rest }: {
+    tone?: UTone;
+    size?: "s" | "m" | "l";
+    busy?: boolean;
+    attract?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement>): ReactNode;
+/** The round close button under a popup / at the bottom bar (Button_Circle118 + Icon_Close02). */
+declare function UCloseCircle({ onClick, size, }: {
+    onClick: () => void;
+    size?: number;
+}): ReactNode;
+/**
+ * The reference's popup: a body (blue or navy), a blue top bar with the title and a light streak, an
+ * optional icon before the title (inline: a bottom sheet clips anything above its edge). The kit's Popup underneath — closing, the exit
+ * animation and usePopupClose() work as everywhere else.
+ */
+declare function UPopup({ title, icon, tone, children, panelStyle, ...rest }: ComponentProps<typeof Popup> & {
+    icon?: string;
+    tone?: "navy" | "blue";
+}): ReactNode;
+/** PanelFrame03 top bar: the title on the left, a black oblique corner with a counter on the right. */
+declare function UTopBar({ title, corner, cornerLabel, children, }: {
+    title: ReactNode;
+    corner?: ReactNode;
+    cornerLabel?: ReactNode;
+    children?: ReactNode;
+}): ReactNode;
+/** Bottom pill tabs (Button_Round10: blue when focused, slate otherwise, a red alert dot). */
+declare function UTabs<T extends string>({ tabs, value, onChange, }: {
+    tabs: Array<{
+        id: T;
+        label: ReactNode;
+        alert?: boolean;
+    }>;
+    value: T;
+    onChange: (id: T) => void;
+}): ReactNode;
+type URowTone = "light" | "blue" | "yellow" | "navy";
+/** ListFrame04 (quests) / ListFrame01 (leaderboard rows): an outer rim, an inner plate, a dim when done. */
+declare function URow({ tone, dim, children, style, }: {
+    tone?: URowTone;
+    dim?: boolean;
+    children: ReactNode;
+    style?: CSSProperties;
+}): ReactNode;
+/** ListFrame00~02 tints: [rim, inner plate, oblique right end] as the reference scene sets them. */
+type URankTone = "gold" | "silver" | "bronze" | "blue" | "entry" | "me";
+/**
+ * ListFrame00~02 (leaderboard entries, rank rewards): a dark rim, a bright inner plate, a darker
+ * oblique block at the right end holding `right` (the score / the reward).
+ */
+declare function URankRow({ tone, children, right, height, rightWidth, }: {
+    tone: URankTone;
+    children: ReactNode;
+    right?: ReactNode;
+    height?: number;
+    rightWidth?: number;
+}): ReactNode;
+/** ItemIcon_Medal_Gold/Silver/Bronze_2: a ribbon and a disc with the place. */
+declare function UMedal({ place, size, }: {
+    place: 1 | 2 | 3;
+    size?: number;
+}): ReactNode;
+/** BasicFrame_Hexagon87 with the place inside (the leaderboard entry's rank). */
+declare function UHexRank({ children, color, size, }: {
+    children: ReactNode;
+    color?: string;
+    size?: number;
+}): ReactNode;
+/** ProfileFrame01: a navy rim, a coloured inner square, the player's picture or initial. */
+declare function UAvatar({ name, src, inner, size, }: {
+    name: string;
+    src?: string | null;
+    inner?: string;
+    size?: number;
+}): ReactNode;
+/** BorderFrame_Flag Blue / Red / Green: the podium's hanging banner (gold bar on top, notched tail). */
+declare function UFlag({ color, height, children, }: {
+    color: "blue" | "red" | "green";
+    height?: number;
+    children: ReactNode;
+}): ReactNode;
+/** A reward/item in a navy frame with its amount under the icon. */
+declare function UItemFrame({ line, size, glyph, label, onClick, }: {
+    line?: ResourceLine | null;
+    size?: number;
+    glyph?: string;
+    label?: ReactNode;
+    onClick?: () => void;
+}): ReactNode;
+/** Slider_Basic02: a dark rounded track with a green (or orange) fill and the count in the middle. */
+declare function USlider({ value, max, tone, label, height, }: {
+    value: number;
+    max: number;
+    tone?: "green" | "orange" | "blue";
+    label?: ReactNode;
+    height?: number;
+}): ReactNode;
+/** Slider_Icon01: a slider with a framed icon at its left end (the quests / leaderboard milestone track). */
+declare function UIconSlider({ glyph, value, max, label, onClick, }: {
+    glyph: string;
+    value: number;
+    max: number;
+    label?: ReactNode;
+    onClick?: () => void;
+}): ReactNode;
+/** Title_Ribbon01 (orange / plum / sky): a raised plate with folded ends. */
+declare function URibbon({ tone, children, width, }: {
+    tone?: "orange" | "plum" | "sky";
+    children: ReactNode;
+    width?: number;
+}): ReactNode;
+/** BorderFrame_Oval timer: a dark pill with a clock. */
+declare function UTimer({ children }: {
+    children: ReactNode;
+}): ReactNode;
+/** Title_Line01: "REWARDS" between two golden dividers. */
+declare function UDivider({ children }: {
+    children: ReactNode;
+}): ReactNode;
+/** Image_Effect_Rotate: soft rays turning behind a prize. */
+declare function URays({ size, color, }: {
+    size?: number;
+    color?: string;
+}): ReactNode;
+type UMilestoneState = "locked" | "ready" | "claimed";
+interface UMilestone {
+    id: string;
+    /** Points (or rank) needed — shown in the left badge. */
+    required: number;
+    /** Shown instead of the number (e.g. "Top 3"). */
+    label?: ReactNode;
+    free: ResourceLine[];
+    state: UMilestoneState;
+    /** The premium column (events / season pass); omitted — the window has one column. */
+    premium?: ResourceLine[];
+    premiumState?: UMilestoneState;
+}
+/**
+ * The reference's milestone window: a row per milestone — the required points in a badge, the free
+ * reward, the premium reward (locked without the pass) — each with its Claim. `onClaim` returns
+ * whether it succeeded; the row stays busy until then.
+ */
+declare function UMilestonesPopup({ title, glyph, value, milestones, premiumOwned, onPremiumLock, onClaim, onClose, }: {
+    title?: ReactNode;
+    glyph?: string;
+    value: number;
+    milestones: UMilestone[];
+    premiumOwned?: boolean;
+    /** A tap on a locked premium reward — the game opens its pass offer (VIP). */
+    onPremiumLock?: () => void;
+    onClaim: (id: string, track: "free" | "premium") => Promise<boolean>;
+    onClose: () => void;
+}): ReactNode;
+/** Keyframes the U* components use; a screen drawing them renders this once. */
+declare const U_CSS = "\n@keyframes idos-u-spin { to { transform: rotate(360deg); } }\n@keyframes idos-u-attract { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }\n@keyframes idos-u-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }\n@keyframes idos-u-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }\n@keyframes idos-u-shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }\n";
+/** 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 };