@kromatv/sdk 0.1.39-canary.3579809

package/types/ui/src/core/types.d.ts

@@ -0,0 +1,122 @@
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import type { TextStyleProps } from '#ui/core/shorthand-resolve';
+import type { BoxStyleProps } from '#ui/core/shorthands';
+import type { SvState, SvStateName } from '#ui/core/states';
+import type { WebStyle } from '#ui/core/web-style';
+export type AnyStyle = ViewStyle & TextStyle & ImageStyle;
+/** What a painted slot accepts. A key both vocabularies name takes either
+ *  spelling: the shorthand adds to what React Native accepts, never subtracts,
+ *  so a slot handed a plain `TextStyle` is still a legal declaration. */
+declare const PAINTED: unique symbol;
+type Plain = Omit<AnyStyle, keyof BoxStyleProps | keyof WebStyle> & {
+    [K in keyof BoxStyleProps]?: BoxStyleProps[K] | (K extends keyof AnyStyle ? AnyStyle[K] : never) | (K extends keyof WebStyle ? WebStyle[K] : never);
+} & TextStyleProps & Omit<WebStyle, keyof BoxStyleProps>;
+/** A value stated per interaction state, `base` for the rest:
+ *  `bg: { base: 'accent', hover: 'accentHover' }`. */
+export type Conditional<V> = {
+    base?: V;
+} & {
+    [S in SvStateName]?: V;
+};
+export type StyleDecl = {
+    [K in keyof Plain]?: Plain[K] | Conditional<Plain[K]>;
+} & {
+    readonly [PAINTED]?: true;
+};
+export type Decl<T> = T & {
+    [K in SvStateName as `_${K}`]?: T;
+};
+/** The slots of a recipe and what each feeds, e.g.
+ *  `{ root: StyleDecl; icon: IconProps }`. Naming the props type is what makes a
+ *  typo in a glyph's colour a compile error. */
+export type SlotShapes = Record<string, object>;
+export interface HasRoot {
+    root: object;
+}
+export type Layer<P extends SlotShapes> = {
+    [K in keyof P]?: Decl<Partial<P[K]>>;
+};
+export type StyleSlots<S> = {
+    [K in keyof S]: StyleDecl;
+};
+export type VariantGroups<P extends SlotShapes> = Record<string, Record<string, Layer<P>>>;
+/**
+ * A group spelled `true`/`false` also accepts a real boolean, so a caller writes
+ * `active` rather than `active ? 'true' : 'false'`.
+ *
+ * Both spellings stay legal whichever options the group declares: one that names
+ * only `true` still has to take `false` from a caller, since the absent option
+ * is exactly what "off" resolves to.
+ */
+export type VariantPicks<V> = {
+    [K in keyof V]?: keyof V[K] extends 'true' | 'false' ? boolean | 'true' | 'false' : keyof V[K];
+};
+export interface CompoundVariant<V, L> {
+    when: VariantPicks<V>;
+    style: L;
+}
+export interface SvConfig<P extends SlotShapes, V extends VariantGroups<P>> {
+    slots: {
+        [K in keyof P]: Decl<P[K]>;
+    };
+    variants?: V;
+    compound?: readonly CompoundVariant<V, Layer<P>>[];
+    defaults?: VariantPicks<V>;
+}
+export type FlatLayer = Decl<Partial<StyleDecl>>;
+export type FlatVariantGroups = Record<string, Record<string, FlatLayer>>;
+/** The single-slot config. `base` is sugar for `slots: { root }` and lets every
+ *  layer drop the slot name; the result still comes back under `.root`. */
+export interface SvFlatConfig<V extends FlatVariantGroups> {
+    base: Decl<StyleDecl>;
+    variants?: V;
+    compound?: readonly CompoundVariant<V, FlatLayer>[];
+    defaults?: VariantPicks<V>;
+}
+type Out<T> = typeof PAINTED extends keyof T ? AnyStyle : T;
+export type Resolved<P extends SlotShapes> = {
+    readonly [K in keyof P]: Readonly<Out<P[K]>>;
+};
+export type SvFn<P extends SlotShapes, V> = ((variants?: VariantPicks<V>, state?: SvState) => Resolved<P>) & {
+    options: {
+        [K in keyof V]: (keyof V[K])[];
+    };
+    defaults: VariantPicks<V>;
+    slots: readonly (keyof P)[];
+};
+/**
+ * The variant props of a compiled recipe, cva-style:
+ *
+ *   interface ButtonProps extends VariantProps<typeof buttonVariants> { ... }
+ *
+ * Derived rather than retyped, so adding an option to the recipe updates every
+ * consumer's type with no second list to edit.
+ *
+ * A conditional with `infer`, not `Parameters<F>`: a function-typed constraint
+ * on `F` would make `Parameters` resolve against the constraint's `never`
+ * parameter rather than the recipe's own, and every option would collapse.
+ */
+export type VariantProps<F> = F extends (variants?: infer VP, state?: SvState) => unknown ? NonNullable<VP> : never;
+/** One group's option union, for the prop a component documents individually:
+ *  `Variant<typeof buttonVariants, 'size'>` is `'sm' | 'md' | 'lg' | 'tv'`. */
+export type Variant<F, G extends keyof VariantProps<F>> = NonNullable<VariantProps<F>[G]>;
+/** What the workbench reads to derive a story's controls, so the variant map is
+ *  the only source and there is no second list to keep in sync. */
+export interface VariantSource {
+    options: Record<string, readonly string[]>;
+    defaults: Record<string, PropertyKey | boolean | undefined>;
+}
+/**
+ * Any compiled recipe, for a component that takes one without knowing its slots.
+ *
+ * The parameter is `never` because a function is only assignable to another
+ * whose parameters are wider, and a recipe's own parameter is the narrow union
+ * of its option names. `root` is required: it is the slot a host component
+ * paints itself with, so a recipe without one is rejected where it is passed
+ * rather than painting nothing where it renders.
+ */
+export type AnySv = {
+    (variants?: never, state?: SvState): HasRoot & Record<string, object>;
+    slots: readonly string[];
+};
+export {};

package/types/ui/src/core/use-breakpoint.d.ts

@@ -0,0 +1,4 @@
+import { type BreakpointName } from './tokens';
+export declare function useBreakpoint(): BreakpointName;
+export declare function useBreakpointIndex(): number;
+export declare function useBreakpointStep(mask: number): number;

package/types/ui/src/core/use-theme.d.ts

@@ -0,0 +1,20 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type Theme } from './theme';
+/** The theme snapshot of this styling root. */
+export declare function useTheme(): Theme;
+export declare function useThemeVersion(): number;
+export declare function useThemeControls(): {
+    activeTheme: () => Theme;
+    themeVersion: () => number;
+    onThemeChange: (listener: () => void) => () => void;
+    setTheme: (theme: Theme, light?: Theme) => void;
+    applyTheme: (theme: Theme, light?: Theme) => void;
+    attach(host: HTMLElement, id: string): () => void;
+};
+/** Follow native appearance for this root while its stored choice is system. */
+export declare function useSystemGround(): void;
+/** An explicit theme owns a nested scope; inherited scopes remount on its version. */
+export declare function ThemeProvider({ theme, children, }: Readonly<{
+    theme?: Theme;
+    children?: ReactNode;
+}>): ReactElement;

package/types/ui/src/core/web-style.d.ts

@@ -0,0 +1,91 @@
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+type Native = ViewStyle & TextStyle & ImageStyle;
+type Wide<K extends string, T = string> = Exclude<K extends keyof Native ? Native[K] : never, undefined> | T;
+/**
+ * Browser-only properties a declaration may state beside React Native's, and
+ * the native ones a browser also reads as free CSS text (`62vh`, a `var()`).
+ * A native renderer has no spelling for the former and ignores them; the
+ * browser renderer compiles both to classes as it does the rest.
+ */
+export interface WebStyle {
+    animationKeyframes?: string | Record<string, object> | ReadonlyArray<string | Record<string, object>>;
+    animationDuration?: string;
+    animationTimingFunction?: string;
+    animationDelay?: string;
+    animationFillMode?: string;
+    animationIterationCount?: string | number;
+    transitionProperty?: Wide<'transitionProperty'>;
+    transitionDuration?: Wide<'transitionDuration'>;
+    transitionTimingFunction?: Wide<'transitionTimingFunction'>;
+    transitionDelay?: Wide<'transitionDelay'>;
+    transition?: string;
+    textShadow?: string;
+    textUnderlineOffset?: number | string;
+    objectFit?: Wide<'objectFit', 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'>;
+    objectPosition?: string;
+    backgroundImage?: Wide<'backgroundImage'>;
+    backgroundPosition?: Wide<'backgroundPosition'>;
+    backgroundSize?: Wide<'backgroundSize'>;
+    maskImage?: string;
+    WebkitMaskImage?: string;
+    backdropFilter?: string;
+    WebkitBackdropFilter?: string;
+    boxShadow?: Wide<'boxShadow'>;
+    willChange?: string;
+    cursor?: Wide<'cursor'>;
+    scrollbarWidth?: 'auto' | 'thin' | 'none';
+    touchAction?: string;
+    userSelect?: Wide<'userSelect', 'none' | 'text' | 'auto'>;
+    whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap';
+    display?: Wide<'display', 'flex' | 'none' | 'block' | 'inline' | 'inline-flex' | 'grid' | 'contents'>;
+    position?: Wide<'position', 'absolute' | 'relative' | 'static' | 'fixed' | 'sticky'>;
+    overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto';
+    overflowY?: 'visible' | 'hidden' | 'scroll' | 'auto';
+    inset?: Wide<'inset'>;
+    width?: Wide<'width'>;
+    height?: Wide<'height'>;
+    minWidth?: Wide<'minWidth'>;
+    minHeight?: Wide<'minHeight'>;
+    maxWidth?: Wide<'maxWidth'>;
+    maxHeight?: Wide<'maxHeight'>;
+    top?: Wide<'top'>;
+    right?: Wide<'right'>;
+    bottom?: Wide<'bottom'>;
+    left?: Wide<'left'>;
+    paddingLeft?: Wide<'paddingLeft'>;
+    paddingRight?: Wide<'paddingRight'>;
+    paddingTop?: Wide<'paddingTop'>;
+    paddingBottom?: Wide<'paddingBottom'>;
+    borderRadius?: Wide<'borderRadius'>;
+    borderBottomStyle?: 'solid' | 'dashed' | 'dotted' | 'none';
+    marginLeft?: Wide<'marginLeft'>;
+    marginRight?: Wide<'marginRight'>;
+    marginTop?: Wide<'marginTop'>;
+    marginBottom?: Wide<'marginBottom'>;
+    marginBlock?: Wide<'marginBlock'>;
+    marginInline?: Wide<'marginInline'>;
+    paddingBlock?: Wide<'paddingBlock'>;
+    paddingInline?: Wide<'paddingInline'>;
+    fontSize?: Wide<'fontSize'>;
+    lineHeight?: Wide<'lineHeight'>;
+    overflowAnchor?: 'auto' | 'none';
+    scrollPadding?: number | string;
+    wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
+    listStyleType?: 'none' | 'disc' | 'decimal';
+    letterSpacing?: Wide<'letterSpacing'>;
+    fontVariantNumeric?: string;
+    backgroundClip?: 'text' | 'border-box' | 'padding-box' | 'content-box';
+    WebkitBackgroundClip?: 'text' | 'border-box' | 'padding-box' | 'content-box';
+    margin?: Wide<'margin'>;
+    padding?: Wide<'padding'>;
+    accentColor?: string;
+    gridTemplateColumns?: string;
+    gridColumn?: string;
+    columnGap?: number | string;
+    rowGap?: number | string;
+    backgroundRepeat?: Wide<'backgroundRepeat'>;
+    outlineStyle?: Wide<'outlineStyle', 'none' | 'solid' | 'dashed' | 'dotted'>;
+    outlineColor?: Exclude<ViewStyle['outlineColor'] | TextStyle['outlineColor'], undefined> | string;
+    filter?: Exclude<ViewStyle['filter'], undefined> | string;
+}
+export {};

package/types/ui/src/i18n-host.d.ts

@@ -0,0 +1,5 @@
+export type { Catalogs, I18n, I18nConfig, Locale, Messages, Translate, TVars } from '@kromatv/i18n';
+export { createI18n } from '@kromatv/i18n';
+export type { I18nProviderProps } from './services/i18n';
+export { I18nProvider, useI18n, useLocale, useLocaleDefault, useSetLocale, useT, useTDefault, } from './services/i18n';
+export type { KitI18n } from './services/i18n-instance';

package/types/ui/src/index.d.ts

@@ -0,0 +1,24 @@
+export * from './components/organisms/player';
+export { type DeviceStore, deviceStore, useDeviceStore } from './lib/device-store';
+export { dispatchRemoteKey, type RemoteKey, type RemoteKeyHandler, type RemoteKeyMap, registerTvMediaKeys, resolveRemoteKey, } from './lib/remote-keys';
+export { useForeground } from './lib/use-foreground';
+export { useAccountStorage } from './services/account-storage';
+export type { UseAiSuggestOptions, UseAiSuggestResult } from './services/aiSuggest';
+export { useAiSuggest } from './services/aiSuggest';
+export type { ActivateResult, AuthSession } from './services/auth';
+export { useAuthSession } from './services/auth';
+export type { Cast, CastFailure, CastProviderProps } from './services/cast';
+export { CastProvider, useCast } from './services/cast';
+export { type Format, useFormat } from './services/format';
+export type { I18nProviderProps } from './services/i18n';
+export { I18nProvider, useI18n, useLocale, useLocaleDefault, useScopedT, useSetLocale, useT, } from './services/i18n';
+export type { LocaleProviderProps } from './services/locale';
+export { LocaleProvider } from './services/locale';
+export type { PlaybackHeartbeatParams } from './services/playback';
+export { usePlaybackHeartbeat } from './services/playback';
+export type { Storyboard, StoryboardTile } from './services/storyboard';
+export { useStoryboard } from './services/storyboard';
+export type { SubtitleGenerationsOptions, SubtitleGenerationsResult, } from './services/subtitleGenerations';
+export { useSubtitleGenerations } from './services/subtitleGenerations';
+export type { ThemeAudio } from './services/themeAudio';
+export { useThemeAudio } from './services/themeAudio';

package/types/ui/src/kit.d.ts

@@ -0,0 +1,99 @@
+export * from './components/atoms';
+export * from './components/common';
+export * from './components/molecules';
+export * from './components/organisms';
+export * from './components/templates';
+export type { FormFactor, KitConfig } from './configure';
+export { configureKit, KitProvider } from './configure';
+export type { AnySv, BoxStyleProps, Breakpoints, ColorValue, Resolved, Responsive, RingToken, StyleDecl, SvState, TextLayoutProps, Theme, ThemeMode, ThemeOverrides, ThemeTokens, Variant, VariantProps, VariantSource, } from './core';
+export { activeTheme, applyMode, boxStyle, color, createTheme, currentBreakpoint, groundShade, KROMA, KROMA_LIGHT, onPaper, readMode, registered, sharedStyle, style, styles, sv, svFor, ThemeProvider, themed, themeVersion, useBreakpoint, useSystemGround, useTheme, writeMode, } from './core';
+export { createBreakpointRuntime } from './core/breakpoint';
+export { useSv } from './core/recipe';
+export { useStyleRuntime, useStyleScope } from './core/style-context';
+export { createStyleRuntime } from './core/style-runtime';
+export type { StyleScope } from './core/style-scope';
+export { DEFAULT_STYLE_SCOPE } from './core/style-scope';
+export { resolveStyles, useStyles } from './core/styles';
+export { createThemeRuntime } from './core/theme';
+export * from './core/tokens';
+export { useThemeControls, useThemeVersion } from './core/use-theme';
+export type { AnchorPlacement, AnchorRect, AnchorViewport } from './lib/anchor';
+export { placeUnder } from './lib/anchor';
+export type { ListKeysAt, PanelKeyEvent, PanelScroll } from './lib/anchored-keys';
+export { useListKeys, useRowInView } from './lib/anchored-keys';
+export { PANEL_BACKDROP, PANEL_SHELL, useAnchoredPlacement, useTriggerFocus, } from './lib/anchored-panel';
+export { classes } from './lib/classed';
+export type { Rect } from './lib/cover-rect';
+export { coverRect, parsePosition } from './lib/cover-rect';
+export { backdropBlur, bgPosition, bgSize, gradient, promote } from './lib/css';
+export { ScrollMask } from './lib/scroll-mask';
+export { TopFade } from './lib/top-fade';
+export { TopFadeBand } from './lib/top-fade-band';
+export { ARROW, HAND } from './lib/cursor';
+export { webDocument, webWindow } from './lib/dom';
+export { armEscapeGuard } from './lib/escape-guard';
+export type { ControlMetrics, ControlSize } from './lib/field-shell';
+export { CONTROL, controlMetrics, NO_OUTLINE, useControlMetrics, useEntryDefaults, } from './lib/field-shell';
+export { useFocusNav } from './lib/focus-nav';
+export type { FocusDirection, FocusOwner } from './lib/focus-platform';
+export { usePlatformFocus } from './lib/focus-platform';
+export { useHardwareKeys } from './lib/focus-remote';
+export type { FocusScopeProps, ScreenScopeProps } from './lib/focus-scope';
+export { FocusColumn, FocusRegion, FocusScope } from './lib/focus-scope';
+export type { FocusScrollProps } from './lib/focus-scroll';
+export { FocusLine, FocusRail, FocusScroll, FocusSlot } from './lib/focus-scroll';
+export { useFocusServices } from './lib/focus-services-context';
+export { FrostSource } from './lib/gl-frost/frost-source';
+export type { FrostSourceProps } from './lib/gl-frost/frost-source-types';
+export type { FocusNavHandlers } from './lib/focus-types';
+export { useFocusVisible } from './lib/focus-visible';
+export type { FieldErrors, Form, FormOptions, StandardSchemaV1, TextBinding, ToggleBinding, } from './lib/form';
+export { msg, useForm } from './lib/form';
+export { genreIcon } from './lib/genre-icon';
+export type { GlyphExports } from './lib/glyph';
+export { DEFAULT_ICON_SIZE, DEFAULT_ICON_THICKNESS, hasGlyph, iconNames } from './lib/glyph';
+export type { IconCatalog, IconCatalogIndex, IconEntry } from './lib/icon-catalog';
+export { createIconCatalog } from './lib/icon-catalog';
+export type { IconCatalogLoader, IconLibrary, IconLibraryOptions } from './lib/icons/library';
+export { createIconLibrary, IconLibraryProvider, useIconAssets, useIconLibrary, } from './lib/icons/library';
+export type { ImageBackend, ImageBackendProps } from './lib/image-backend';
+export { reactNativeImage, useImageBackend } from './lib/image-backend';
+export { htmlVideoEngines } from './lib/html-video';
+export { createInputGate, InputGateProvider, useInputGate } from './lib/input-gate';
+export { PageMain } from './lib/landmark';
+export type { LoopKind } from './lib/loop';
+export { useLoop } from './lib/loop';
+export { monoFont } from './lib/mono-font';
+export type { NativeDevice } from './lib/native-device';
+export { nativeDevice } from './lib/native-device';
+export type { SessionFlag } from './lib/session-flag';
+export { sessionFlag } from './lib/session-flag';
+export { OverlayHost } from './lib/overlay-host';
+export type { PerfReport } from './lib/perf';
+export { createPerfSampler } from './lib/perf';
+export { PerfProvider, usePerfSampler } from './lib/perf-provider';
+export { Portal, PortalHost } from './lib/portal';
+export { createPressGuard, PRESS_GUARD_MS } from './lib/press-guard';
+export type { ReportCategoryMeta } from './lib/report-categories';
+export { REPORT_CATEGORIES } from './lib/report-categories';
+export type { RingGeometry, RingProps } from './lib/ring';
+export { RING_ROTATION, ringGeometry } from './lib/ring';
+export { ringRoomBlock, ringRoomInline } from './lib/ring-room';
+export { RingScopeProvider } from './lib/ring-scope';
+export { useShake } from './lib/shake';
+export type { SlotProps } from './lib/slot';
+export { Slot } from './lib/slot';
+export { SORT_ICON } from './lib/sort-icon';
+export { useStableCallback } from './lib/stable-callback';
+export type { SurfacePresentation } from './lib/surface-presentation';
+export type { SurfaceWidth } from './lib/surface-shell';
+export { DIALOG_PAD, SURFACE_WIDTH } from './lib/surface-shell';
+export { SvgXml } from './lib/svg';
+export type { CopyState } from './lib/use-copy';
+export { useCopy } from './lib/use-copy';
+export type { GrowingCount } from './lib/use-growing-count';
+export { useGrowingCount } from './lib/use-growing-count';
+export { useSettledValue } from './lib/use-settled-value';
+export type { WheelSpin } from './lib/wheel-paths';
+export { KROMA_WHEEL_COLORS, KROMA_WHEEL_SEGMENTS, WHEEL_SPIN_MS, WHEEL_VIEWBOX, } from './lib/wheel-paths';
+export type { KitI18n } from './services/i18n-instance';

package/types/ui/src/lib/a11y-props.d.ts

@@ -0,0 +1,26 @@
+import type { AccessibilityState, AccessibilityValue } from 'react-native';
+/** What a control claims about itself. `pressed` is a toggle button's on state,
+ *  which ARIA spells `aria-pressed` and React Native does not have: its
+ *  platforms read `selected`, which VoiceOver and TalkBack both announce for a
+ *  control that is switched on. */
+export interface A11yFlags extends AccessibilityState {
+    pressed?: boolean;
+}
+/** Spread onto the control. Only one platform's half is ever filled in; the
+ *  type carries both because a caller compiles against whichever resolves. */
+export interface A11yProps {
+    accessibilityState?: AccessibilityState;
+    accessibilityValue?: AccessibilityValue;
+    'aria-busy'?: boolean;
+    /** Browser targets only: React Native has no equivalent claim. */
+    'aria-current'?: 'page' | 'step';
+    'aria-checked'?: boolean | 'mixed';
+    'aria-disabled'?: boolean;
+    'aria-expanded'?: boolean;
+    'aria-pressed'?: boolean;
+    'aria-selected'?: boolean;
+    'aria-valuemax'?: number;
+    'aria-valuemin'?: number;
+    'aria-valuenow'?: number;
+    'aria-valuetext'?: string;
+}

package/types/ui/src/lib/a11y.d.ts

@@ -0,0 +1,12 @@
+import type { AccessibilityValue } from 'react-native';
+import type { A11yFlags, A11yProps } from './a11y-props';
+export type { A11yFlags, A11yProps };
+/** Spread onto the control that HAS the state, never onto a face inside it. */
+export declare function a11yState({ pressed, ...state }: A11yFlags): A11yProps;
+/** Spread onto an `adjustable` control: where its value sits in its range, and
+ *  optionally how to say that in words. */
+export declare function a11yValue(value: AccessibilityValue): A11yProps;
+/** A column heading's sort claim; native platforms have none, so it is empty there. */
+export declare function a11ySort(sort: 'none' | 'ascending' | 'descending'): {
+    'aria-sort'?: 'none' | 'ascending' | 'descending';
+};

package/types/ui/src/lib/anchor.d.ts

@@ -0,0 +1,32 @@
+/** A trigger's box, in viewport coordinates: what `getBoundingClientRect` and
+ *  `measureInWindow` both report. */
+export interface AnchorRect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export interface AnchorViewport {
+    width: number;
+    height: number;
+}
+export interface AnchorPlacement {
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
+    width: number;
+    maxWidth?: number;
+    maxHeight: number;
+}
+export declare const ANCHOR_GAP = 6;
+/** `view` is null where nothing has been measured yet (a server render, a
+ *  target that reports no window): the panel then sits against the trigger
+ *  with nothing clamped. */
+export declare function placeUnder(trigger: AnchorRect, view: AnchorViewport | null, at: {
+    minWidth: number;
+    matchWidth?: boolean;
+    maxHeight: number;
+    align?: 'start' | 'end';
+    grow?: boolean;
+}): AnchorPlacement;

package/types/ui/src/lib/anchored-keys.d.ts

@@ -0,0 +1,41 @@
+import { type RefObject } from 'react';
+import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView } from 'react-native';
+export interface ListKeysAt {
+    count: number;
+    active: number;
+    setActive: (index: number) => void;
+    disabledAt?: (index: number) => boolean;
+    labelAt?: (index: number) => string;
+    onPick: (index: number) => void;
+    onClose: () => void;
+}
+export interface PanelKeyEvent {
+    nativeEvent: {
+        key: string;
+    };
+    preventDefault: () => void;
+    stopPropagation?: () => void;
+}
+/**
+ * The roving-highlight keyboard of the aria-activedescendant pattern: arrows
+ * move (skipping disabled rows), Home/End jump, Enter/Space pick, printable
+ * keys type ahead, Esc/Tab close - with the Escape keyup swallowed so a
+ * <Dialog> under the panel does not close with it.
+ */
+export declare function useListKeys(at: ListKeysAt): {
+    move: (from: number, delta: -1 | 1) => void;
+    onKeyDown: (event: PanelKeyEvent) => void;
+};
+export interface PanelScroll {
+    ref: RefObject<ScrollView | null>;
+    onLayout: (event: LayoutChangeEvent) => void;
+    onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+}
+/**
+ * Keeps the active row in sight as the keyboard walks a scrolling panel. Rows
+ * report their own box through `onRowLayout`; `scroll` goes on <AnchoredPopup>.
+ */
+export declare function useRowInView(active: number): {
+    scroll: PanelScroll;
+    onRowLayout: (index: number, y: number, height: number) => void;
+};

package/types/ui/src/lib/anchored-panel.d.ts

@@ -0,0 +1,42 @@
+import { type RefObject } from 'react';
+import { type AnchorPlacement } from '#ui/lib/anchor';
+import type { PanelKeyEvent } from '#ui/lib/anchored-keys';
+export declare const PANEL_BACKDROP: import("../core/types").AnyStyle;
+export declare const PANEL_SHELL: import("../core/types").AnyStyle;
+/**
+ * Where an anchored panel goes, kept current while it is open: re-placed when
+ * the window changes size, and on any scroll a browser reports (capture - the
+ * scroll that moves the trigger can happen in any container), coalesced to one
+ * measure per frame.
+ */
+export declare function useAnchoredPlacement(anchor: RefObject<unknown>, at: {
+    minWidth: number;
+    matchWidth?: boolean;
+    maxHeight: number;
+    align?: 'start' | 'end';
+    grow?: boolean;
+}): AnchorPlacement | null;
+/** Keeps the focus on the trigger for the panel's whole life: the trigger owns
+ *  the keyboard and names the active row, so a portalled panel never fights a
+ *  <Modal>'s focus trap for it. */
+export declare function useTriggerFocus(anchor: RefObject<unknown>): void;
+/** Takes the focus back, for a panel that outlives the press that moved it onto
+ *  a row: a pointer focuses what it presses, and the trigger owns the keyboard
+ *  for as long as the panel is open. */
+export declare function focusTrigger(anchor: RefObject<unknown>): void;
+/**
+ * Wires the trigger to a panel it does not contain: its keys reach the panel's
+ * keyboard, and `aria-controls`/`aria-haspopup` say what it opens. The trigger
+ * keeps the focus (see {@link useTriggerFocus}), so it is where the keys arrive.
+ *
+ * Browser targets only, since that is where a focus can be virtual; elsewhere
+ * the platform's own focus engine walks the rows.
+ */
+export declare function useTriggerKeys(anchor: RefObject<unknown>, at: {
+    listId: string;
+    haspopup: string;
+    onKeyDown: (event: PanelKeyEvent) => void;
+}): void;
+/** Names the active row on the trigger, which is what holds the focus. Browser
+ *  targets only, for the same reason as {@link useTriggerKeys}. */
+export declare function useActiveDescendant(anchor: RefObject<unknown>, rowId: string): void;

package/types/ui/src/lib/anchored-popup.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import { type Role } from 'react-native';
+import type { AnchorPlacement } from '#ui/lib/anchor';
+import type { PanelScroll } from '#ui/lib/anchored-keys';
+interface AnchoredPopupProps {
+    at: AnchorPlacement;
+    role: Role;
+    label: string | undefined;
+    multiselectable?: boolean;
+    listId: string;
+    onDismiss: () => void;
+    scroll?: PanelScroll;
+    children: ReactNode;
+}
+declare function AnchoredPopup({ at, role, label, multiselectable, listId, onDismiss, scroll, children, }: Readonly<AnchoredPopupProps>): import("react").JSX.Element;
+export type { AnchoredPopupProps };
+export { AnchoredPopup };

package/types/ui/src/lib/art-layers-types.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { Radius } from '#ui/core/tokens/layout';
+/** What an artwork surface asks its layers to draw. */
+export interface ArtLayersInput {
+    src: string | null;
+    under: string | null;
+    alt: string;
+    fit: 'cover' | 'contain';
+    position: string;
+    radius: Radius | undefined;
+    priority: boolean;
+    duration: number;
+    errored: boolean;
+    layered: boolean;
+    markLoaded: () => void;
+    onCovered: ((src: string) => void) | undefined;
+    onLoad: (() => void) | undefined;
+    onError: () => void;
+}
+/** The drawn layers, and the box that holds them with whatever listener they need. */
+export interface ArtLayers {
+    layers: ReactNode;
+    surface: (style: StyleProp<ViewStyle>, children: ReactNode) => ReactNode;
+}

package/types/ui/src/lib/art-layers.d.ts

@@ -0,0 +1,3 @@
+import type { ArtLayers, ArtLayersInput } from './art-layers-types';
+/** Draws artwork through the image backend, placing a cover by its focal point. */
+export declare function useArtLayers(input: Readonly<ArtLayersInput>): ArtLayers;

package/types/ui/src/lib/art-layers.web.d.ts

@@ -0,0 +1,3 @@
+import type { ArtLayers, ArtLayersInput } from './art-layers-types';
+/** Draws artwork as `<img>` layers whose fade the browser owns. */
+export declare function useArtLayers(input: Readonly<ArtLayersInput>): ArtLayers;

package/types/ui/src/lib/bottom-dock.d.ts

@@ -0,0 +1,4 @@
+/** Holds a bar to the bottom of what scrolls under it, clear of the safe area. */
+export declare const BOTTOM_DOCK: {
+    paddingBottom: number;
+};

package/types/ui/src/lib/bottom-dock.web.d.ts

@@ -0,0 +1,3 @@
+import { type ViewStyle } from 'react-native';
+/** Holds a bar to the bottom of what scrolls under it, clear of the safe area. */
+export declare const BOTTOM_DOCK: ViewStyle;

package/types/ui/src/lib/box-layers.d.ts

@@ -0,0 +1,11 @@
+import { type StyleScope } from '#ui/core';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * One authored control style as the two views it has to drive on native.
+ * `box` is undefined when the style is pure paint, which is the common case and
+ * lets the caller leave the outer view unstyled.
+ */
+export declare function splitBoxLayers(style: StyleProp<ViewStyle>, scope?: StyleScope): {
+    box?: ViewStyle;
+    face: StyleProp<ViewStyle>;
+};

package/types/ui/src/lib/box-style.d.ts

@@ -0,0 +1,17 @@
+import { type ViewStyle } from 'react-native';
+import type { BoxStyleProps } from '#ui/core/shorthands';
+import { type StyleScope } from '#ui/core/style-scope';
+/**
+ * The same style, by identity, for the same shorthand props.
+ *
+ * `boxStyle` is pure but returns a fresh object every call, and on the browser
+ * targets that is the most expensive habit in the kit. styleq caches compiled
+ * styles in a WeakMap keyed on each leaf style OBJECT, so a new object per
+ * render per <Box> is a guaranteed miss for every box on the screen. Handing
+ * back the same object makes it a hit, and going through `StyleSheet.create`
+ * compiles it to atomic classes rather than re-walking the declarations.
+ *
+ * The engine's `sharedStyle` is the same thing for a declaration in the kit's
+ * own vocabulary; this one takes <Box>'s prop bag.
+ */
+export declare function sharedBoxStyle(key: string, p: Readonly<BoxStyleProps>, scope?: StyleScope): ViewStyle;

package/types/ui/src/lib/card-progress.d.ts

@@ -0,0 +1,4 @@
+/** Shared resume indicator at the lower edge of landscape and portrait artwork. */
+export declare function CardProgress({ value }: Readonly<{
+    value: number | null;
+}>): import("react").JSX.Element | null;

package/types/ui/src/lib/caret.d.ts

@@ -0,0 +1,8 @@
+export declare const BLINK_MS = 1100;
+export interface CaretProps {
+    height: number;
+    absolute?: boolean;
+}
+/** Blinks through `useLoop` - a CSS keyframe on the browser TVs - rather than
+ * paying a JS frame callback for as long as the field is on screen. */
+export declare function Caret({ height, absolute }: Readonly<CaretProps>): import("react").JSX.Element;