@kromatv/sdk 0.1.39-canary.3579809

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

@@ -0,0 +1,3 @@
+type Layer = object | null | undefined | false;
+export declare function classes(...layers: Layer[]): string | undefined;
+export {};

package/types/ui/src/lib/content-height.d.ts

@@ -0,0 +1,8 @@
+import type { StyleProp, TextInputContentSizeChangeEvent, TextStyle } from 'react-native';
+/** A multiline input's height follows its content, clamped between `min` and `max`. */
+export interface ContentHeight {
+    style: StyleProp<TextStyle>;
+    onContentSizeChange: ((e: TextInputContentSizeChangeEvent) => void) | undefined;
+}
+/** Measures the content the input reports and grows the field to it. */
+export declare function useContentHeight(min: number, max: number): ContentHeight;

package/types/ui/src/lib/content-height.web.d.ts

@@ -0,0 +1,8 @@
+import type { StyleProp, TextInputContentSizeChangeEvent, TextStyle } from 'react-native';
+/** A multiline input's height follows its content, clamped between `min` and `max`. */
+export interface ContentHeight {
+    style: StyleProp<TextStyle>;
+    onContentSizeChange: ((e: TextInputContentSizeChangeEvent) => void) | undefined;
+}
+/** Lets the browser size the field to its content: no per-keystroke state. */
+export declare function useContentHeight(_min: number, _max: number): ContentHeight;

package/types/ui/src/lib/control-dress.d.ts

@@ -0,0 +1,7 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleScope } from '#ui/core/style-scope';
+import { splitBoxLayers } from './box-layers';
+/** A control's rest style with the browser's colour motion, cursor and outline reset under it; unchanged on native. */
+export declare function dressControl(painted: StyleProp<ViewStyle>, disabled: boolean, actionable: boolean): StyleProp<ViewStyle>;
+/** The control's style split into its outer box and painted face where it renders as two views; null where it is one. */
+export declare function controlLayers(painted: StyleProp<ViewStyle>, scope: StyleScope): ReturnType<typeof splitBoxLayers> | null;

package/types/ui/src/lib/control-form.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+/** Picks a control's form: the navigator node on a native television unless focus is controlled, the touch form elsewhere, and the cloned link where `asChild` can clone the host. */
+export declare function controlForm({ controlled, scoped, asChild, renderLink, renderTouch, renderNavigator, }: Readonly<{
+    controlled: boolean;
+    scoped: boolean;
+    asChild: boolean;
+    renderLink: () => ReactNode;
+    renderTouch: () => ReactNode;
+    renderNavigator: () => ReactNode;
+}>): ReactNode;

package/types/ui/src/lib/control-platform.d.ts

@@ -0,0 +1,14 @@
+import { Animated, View } from 'react-native';
+import { useFlatPress } from './press-dip';
+/** True on an Android TV box, whose air mice and trackpad remotes point; tvOS has none. */
+export declare const TV_HAS_POINTER: boolean;
+/** True where the spatial navigator is the only way in: a native television. */
+export declare const NAVIGATED: boolean;
+/** True on a native television with no pointer: nothing there can report a press. */
+export declare const POINTERLESS: boolean;
+/** Whether a control can report a press: false only on a native television with no pointer. */
+export declare const useCanPress: () => boolean;
+/** The press dip a touch control sinks with: flat on a native television, which focuses rather than presses. */
+export declare const useControlDip: typeof useFlatPress;
+/** The host a disabled control paints on: a plain view where styles are classes, an animated one where the scale is a value. */
+export declare const StillHost: Animated.AnimatedComponent<typeof View> | typeof View;

package/types/ui/src/lib/control-role.d.ts

@@ -0,0 +1,11 @@
+import type { AccessibilityRole } from 'react-native';
+type ControlRole = AccessibilityRole | 'option';
+/** The role the platform can be handed: the real ARIA role on the web, the nearest one Android's `fromValue` accepts on native. */
+export declare function platformRole(role: ControlRole): AccessibilityRole;
+/** The role a host element states for itself: none for a link the browser renders as `<a href>`. */
+export declare function hostRole(role: ControlRole): AccessibilityRole | undefined;
+/** The props that make a control an anchor where there is one, else null. */
+export declare function linkProps(href: string | undefined, role: ControlRole): object | null;
+/** `aria-current` where the platform reads it, else null. */
+export declare function currentMark(current: string | boolean | undefined): object | null;
+export {};

package/types/ui/src/lib/controlled-focus-mirror.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+import type { View } from 'react-native';
+/** Hands the document's focus to whichever controlled `<Focusable>` below it is
+ *  `focused`, for a surface that runs a focus of its own (the player's chrome). */
+export declare function ControlledFocusMirror({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+/** A controlled control's host ref: `setBox`, and the document's focus while
+ *  `focused` inside a {@link ControlledFocusMirror}. */
+export declare function useControlledMirror(focused: boolean, setBox: (view: View | null) => void): (view: View | null) => void;

package/types/ui/src/lib/cover-rect.d.ts

@@ -0,0 +1,26 @@
+/** A CSS position string (`'50% 28%'`, `'50%'`, `'center top'`) as fractions. */
+export declare function parsePosition(value: string): {
+    x: number;
+    y: number;
+};
+export interface Rect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+/**
+ * The rectangle to draw `source` at so it covers `box` with its focal point at
+ * `position`, mirroring `object-fit: cover` + `object-position`. Null when either
+ * size is not known yet, which callers treat as a plain centred cover.
+ */
+export declare function coverRect(box: {
+    width: number;
+    height: number;
+} | null, source: {
+    width: number;
+    height: number;
+} | null, position: {
+    x: number;
+    y: number;
+}): Rect | null;

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

@@ -0,0 +1,19 @@
+import type { ViewStyle } from 'react-native';
+export declare function gradient(css: string): ViewStyle;
+export declare function bgPosition(value: string): ViewStyle;
+export declare function bgSize(value: string): ViewStyle;
+/** A CSS `mask-image` value, and a NO-OP on native: React Native has no mask at
+ * any prefix, so a caller that wants a masked edge needs its own answer there
+ * (see `rail-edge.tsx`, which paints the page colour over the row instead). */
+export declare function maskImage(_css: string): ViewStyle;
+/** A CSS `backdrop-filter: blur(...)`, and a NO-OP on native: React Native has
+ * no backdrop filter at any prefix, and a platform blur view is a dependency the
+ * kit stays free of (old Tizen also composites blur on the CPU). */
+export declare function backdropBlur(_px: number): ViewStyle;
+/** A CSS `field-sizing: content`, and a NO-OP on native: React Native has no
+ * such property, so <TextArea> measures itself through `onContentSizeChange`. */
+export declare function fieldSizing(): ViewStyle;
+/** Promote a view to its own compositing layer; a no-op on native, where the OS
+ * compositor already decides layers. Use it only where measured - a promoted
+ * layer costs GPU memory. */
+export declare function promote(): ViewStyle;

package/types/ui/src/lib/css.web.d.ts

@@ -0,0 +1,25 @@
+import type { ViewStyle } from 'react-native';
+export declare function gradient(css: string): ViewStyle;
+export declare function bgPosition(value: string): ViewStyle;
+export declare function bgSize(value: string): ViewStyle;
+/** A CSS `mask-image` value, e.g. `linear-gradient(to right, transparent, #000 32px)`.
+ *  react-native-web writes it out with the `-webkit-` / `-moz-` / `-ms-` prefixes
+ *  as well, which is what makes it land on the 2019 WebKits the TV shells run.
+ *
+ *  A masked element ISOLATES its backdrop: every `backdrop-filter` beneath it
+ *  samples the mask's own layer instead of the page and renders as a flat wash.
+ *  Do not mask an ancestor of a <Frost>; see the table above. */
+export declare function maskImage(css: string): ViewStyle;
+/** A CSS `field-sizing: content`: the engine sizes the entry to its content, so
+ *  a growing textarea costs neither a measure nor a re-render. Chromium has it;
+ *  an older TV WebKit simply ignores it and the field keeps the height `rows`
+ *  gave it. See css.ts for the native half. */
+export declare function fieldSizing(): ViewStyle;
+/** Give this view its own GPU layer, so an animation near it does not force it
+ * to re-rasterize. `translateZ(0)` is the portable "own texture"; `willChange`
+ * keeps the layer alive between animations instead of paying to rebuild it. See
+ * css.ts for when this is worth it (and when it is not). */
+export declare function promote(): ViewStyle;
+/** A CSS `backdrop-filter: blur(Npx)`, with the `-webkit-` spelling alongside
+ * for the older TV WebKits. See css.ts for why native gets nothing. */
+export declare function backdropBlur(px: number): ViewStyle;

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

@@ -0,0 +1,17 @@
+import type { ViewStyle } from 'react-native';
+/** A control the pointer can press. */
+declare const HAND: ViewStyle;
+/** Stated rather than inherited: a face inside a group of controls, or a
+ *  control that is disabled, would otherwise wear the group's hand. */
+declare const ARROW: ViewStyle;
+export { ARROW, HAND };
+/** How a control's colours travel between rest, hover and focus.
+ *
+ * Only the painted properties: the press scale is an `Animated` transform and
+ * the focus ring is an outline, and both should land at once rather than ease.
+ * A hover that snaps reads as a redraw; the same swap over `motion.duration.fast`
+ * reads as the control answering the pointer. Web only, since that is where a
+ * pointer is, and stated here because React Native has no transition of its own.
+ */
+declare const COLOUR_MOTION: ViewStyle;
+export { COLOUR_MOTION };

package/types/ui/src/lib/device-store.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The three calls the kit needs from a key/value store. `localStorage`
+ * satisfies it, and so does a native app's own device store.
+ */
+export interface DeviceStore {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+    removeItem(key: string): void;
+}
+/** The store this platform is using, or null where there is none. */
+export declare function deviceStore(provided?: DeviceStore | null): DeviceStore | null;
+/** Native roots supply their hydrated store before mounting preferences. */
+export declare function useDeviceStore(): DeviceStore | null;

package/types/ui/src/lib/dismiss-backdrop.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The press-anywhere-out-there way out of an overlay, for the surface to place
+ * behind its panel.
+ *
+ * Web only: on a TV, Back/Menu is the platform's way out and an extra Pressable
+ * is one more thing for the D-pad to land on. Draws nothing without `onPress`.
+ */
+declare function DismissBackdrop({ onPress }: Readonly<{
+    onPress?: () => void;
+}>): import("react").JSX.Element | null;
+export { DismissBackdrop };

package/types/ui/src/lib/dom-only.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+/** What `<DomOnly>` takes. */
+export interface DomOnlyProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+}
+/** Renders `children` where the page is a DOM, `fallback` everywhere else. */
+export declare function DomOnly({ fallback }: Readonly<DomOnlyProps>): import("react").JSX.Element;

package/types/ui/src/lib/dom-only.web.d.ts

@@ -0,0 +1,3 @@
+import type { DomOnlyProps } from './dom-only';
+/** Renders `children` where the page is a DOM, `fallback` everywhere else. */
+export declare function DomOnly({ children }: Readonly<DomOnlyProps>): import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+/** The DOM document, or null on a target that has none. */
+export declare function webDocument(): Document | null;
+/**
+ * The DOM window, or null on a target that has none.
+ *
+ * `typeof window === 'undefined'` is the guard most reach for, and it is WRONG
+ * here: React Native defines `window` as an alias of `global`, so the check
+ * passes and `window.addEventListener` throws as "not a function" instead of
+ * being absent. This asks the question that actually separates the two
+ * worlds: does this window carry the DOM event API?
+ */
+export declare function webWindow(): Window | null;
+/** Whether `element` is a form field or an editable region: where the keys
+ *  belong to a caret, so nothing may take the focus from it. */
+export declare function holdsCaret(element: Element | null): boolean;

package/types/ui/src/lib/drag-cursor.d.ts

@@ -0,0 +1,3 @@
+import type { GroupOrientation } from '#ui/lib/group-shape';
+declare function holdCursor(_orientation: GroupOrientation): () => void;
+export { holdCursor };

package/types/ui/src/lib/drag-cursor.web.d.ts

@@ -0,0 +1,4 @@
+import type { GroupOrientation } from '#ui/lib/group-shape';
+/** Take the page for the length of a drag; returns the release. */
+declare function holdCursor(orientation: GroupOrientation): () => void;
+export { holdCursor };

package/types/ui/src/lib/drag-select.d.ts

@@ -0,0 +1 @@
+export declare function suppressSelection(): () => void;

package/types/ui/src/lib/drag-select.web.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Stops the browser selecting text and images while a drag is in flight, and
+ * returns the undo.
+ *
+ * It has to go on the DOCUMENT, not the dragged element: a pointer held down on
+ * a scrub bar and moved leaves that element immediately, and the selection it
+ * then paints belongs to whatever it crosses. Any range already caught by the
+ * press that started the drag is cleared too.
+ *
+ * `webkitUserSelect` as well as `userSelect`: the legacy TV tier is Chromium 53,
+ * which only knows the prefixed form.
+ */
+export declare function suppressSelection(): () => void;

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

@@ -0,0 +1,13 @@
+import { type EasingFunction } from 'react-native';
+import { motion } from '#ui/core/tokens';
+type Curve = keyof typeof motion.bezier;
+/** One curve in both dialects: `css` for react-native-web's transition props,
+ * `native` for `Animated.timing({ easing })`. */
+export interface Ease {
+    css: string;
+    native: EasingFunction;
+}
+/** The kit's easing curves. `out` is the settle every focus move and fade uses;
+ * `spring` overshoots, for the capsule that chases a finger. */
+export declare const ease: Record<Curve, Ease>;
+export {};

package/types/ui/src/lib/escape-guard.d.ts

@@ -0,0 +1 @@
+export declare function armEscapeGuard(): void;

package/types/ui/src/lib/expo-image-backend.d.ts

@@ -0,0 +1,5 @@
+import type { ImageBackend } from './image-backend';
+/** <Img>'s decoder on the Expo targets. Adds the memory + disk cache and the
+ *  list recycling React Native's own <Image> lacks, so a rail does not
+ *  re-download and re-decode every poster on every navigation. */
+export declare const expoImageBackend: ImageBackend;

package/types/ui/src/lib/field-shell.d.ts

@@ -0,0 +1,141 @@
+import { type ColorValue, type RadiusToken, type StyleScope } from '#ui/core';
+import type { TextStyle } from 'react-native';
+import type { Radius } from '#ui/core/tokens/layout';
+type ControlSize = 'sm' | 'md' | 'tv';
+interface ControlMetrics {
+    /** The well's fill. Every control wears it: a filled segmented control
+     *  beside a transparent select is the difference that reads as "these are
+     *  two different kinds of thing".
+     *
+     *  Translucent, so a control over artwork (the sign-in screens over their
+     *  splash) takes a hint of what is behind it. Every control that wears this
+     *  fill also lays a <Frost> under it, so what shows through is BLURRED: the
+     *  hint is depth, not a legible picture, and a grid of keys still reads as
+     *  one surface rather than one colour per key. */
+    bg: `${ControlFill}`;
+    /** Corner, by NAME: a px number baked in here at module load would not follow
+     *  a theme. Use {@link controlRadius} where the number itself is needed. */
+    radius: RadiusToken;
+    px: number;
+    py: number;
+    /** The content row's height: what a control's own content measures. */
+    line: number;
+    /** The control's outer height: the number every control on a row targets,
+     *  whatever it is made of (an entry's padding, a button's label, a square
+     *  icon button). Derived: border + py + line + py + border. */
+    height: number;
+    fontSize: number;
+    /** Gap between a leading glyph, the content and a trailing slot. */
+    gap: number;
+}
+declare const CONTROL_FILL: 'surface2/72';
+type ControlFill = typeof CONTROL_FILL;
+/** The shape of every input, per size. Read it rather than re-deriving it:
+ *  this table IS the design. */
+export declare const CONTROL: Record<ControlSize, ControlMetrics>;
+/** A control's corner, against the ACTIVE theme. Read it at render time: a
+ *  value copied out at module load keeps the theme it was read under. */
+export declare function controlRadius(metrics: ControlMetrics, scope?: StyleScope): Radius;
+/**
+ * One slot table per size, built from {@link CONTROL} rather than transcribed.
+ * A control that changes shape with `size` writes the mapping ONCE and gets
+ * every size, so adding a size is an entry in the table above and nothing else.
+ * Before this, `sm` and `md` were hand-copied into five recipes and the
+ * fourth size would have been five more clones.
+ */
+export declare function bySize<T>(build: (metrics: ControlMetrics) => T): Record<ControlSize, T>;
+/**
+ * The face every KEY wears: the keypad's and the on-screen keyboard's alike.
+ * A keyboard and a keypad are the same object at two scales, so the well, the
+ * edge, the lift, the cursor wash and the amber under focus are declared here
+ * once; a copy in each component is how the two grids drifted into a solid
+ * amber fill on one and a tint on the other. Each grid still owns its own
+ * geometry (the keypad's 88x72, the keyboard's per-size box and corner).
+ *
+ * It lives here rather than beside either component because <Keypad> is a
+ * molecule and <Key> an organism, so neither may import the other, the same
+ * reason lib/group-shape.ts exists.
+ */
+export declare const keyFace: {
+    readonly root: {
+        readonly center: true;
+        readonly bg: "surface2/72";
+        readonly border: 'border';
+        readonly _hover: {
+            readonly bg: 'surface3';
+        };
+        readonly _focus: {
+            readonly bg: 'accentSoft';
+        };
+        readonly _press: {
+            readonly bg: 'accentSoftHover';
+            readonly border: 'accentHover';
+        };
+    };
+    readonly label: {
+        readonly color: 'text';
+        readonly fontWeight: '700';
+        readonly _focus: {
+            readonly color: 'accentText';
+        };
+    };
+    readonly glyph: {
+        readonly color: 'text';
+        readonly thickness: 1.8;
+        readonly _focus: {
+            readonly color: 'accentText';
+        };
+    };
+};
+/** The field's edge, which focus does NOT recolour: the ring outside it already
+ * says where the focus is, and an amber edge under an amber ring reads as two
+ * rings around one control. Invalid still speaks, since it says something the
+ * ring does not. */
+export declare function edgeColor(_focused: boolean, invalid: boolean, scope?: StyleScope): string;
+export declare function fieldRing(scope?: StyleScope): TextStyle;
+/**
+ * What an entry paints for itself, and what it drops when the shell belongs to
+ * something else: the well of an <InputGroup>, the row of a command palette.
+ * A flattened entry that kept drawing its own fill, edge, corner and ring
+ * paints a second set of all four over the parent's, and its rounded rectangle
+ * shows through as the seam where the addons begin and end.
+ *
+ * Both <TextField> and <TextArea> read it, so the answer to "what does flat
+ * mean" is in one place rather than two that drift.
+ */
+export declare function fieldShell(metrics: ControlMetrics, at: Readonly<{
+    flat: boolean;
+    focused: boolean;
+    invalid: boolean;
+}>, scope?: StyleScope): {
+    box: Record<string, unknown>;
+    edge: TextStyle | null;
+};
+/** The ink of a field that has not been filled in, as a token rather than a
+ *  resolved colour: a value taken at module load keeps the ground it was read
+ *  under, which on a native light theme is near-white on cream. Muted rather
+ *  than faint, because a placeholder is text and 30% ink reads at 2.4:1. */
+export declare const PLACEHOLDER: ColorValue;
+/** Entry defaults owned by the nearest KitProvider. */
+export declare function useEntryDefaults(): Readonly<{
+    physicalKeyboard: boolean;
+    size: ControlSize;
+}>;
+/** Pure lookup; rendered controls use useControlMetrics for root defaults. */
+export declare function controlMetrics(size?: ControlSize): ControlMetrics;
+export declare function useControlMetrics(size?: ControlSize): ControlMetrics;
+/** The smallest ink a real text entry may carry. Under it, iOS Safari zooms the
+ *  page to the field the moment it takes focus. */
+export declare const NO_ZOOM_FONT_SIZE = 16;
+/**
+ * A field's ink size, floored at {@link NO_ZOOM_FONT_SIZE} on a handset: the
+ * `sm` shell reads at 13.5, which is under iOS Safari's zoom threshold.
+ */
+export declare function useEntryFontSize(fontSize: number): number;
+/** Web only, and `none` rather than width 0: Chrome's own focus ring is
+ * `outline-style: auto`, which ignores the width - the field kept its blue
+ * browser ring inside the kit's amber one until the STYLE was cleared. React
+ * Native's types don't know `none` (native has no outline at all), hence the
+ * cast. */
+export declare const NO_OUTLINE: TextStyle;
+export type { ControlMetrics, ControlSize };

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

@@ -0,0 +1,3 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+declare const flat: (style: StyleProp<ViewStyle>) => ViewStyle | undefined;
+export { flat };

package/types/ui/src/lib/flip-motion.d.ts

@@ -0,0 +1,8 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+/** The two moving faces of a two-state control: a fill that fades in, a thumb that slides. */
+export interface FlipMotion {
+    fill: StyleProp<ViewStyle>;
+    slide: StyleProp<ViewStyle>;
+}
+/** Flips one native-driven value, so the fill and the slide arrive together. */
+export declare function useFlipMotion(on: boolean, travel: number, durationMs: number): FlipMotion;

package/types/ui/src/lib/flip-motion.web.d.ts

@@ -0,0 +1,8 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+/** The two moving faces of a two-state control: a fill that fades in, a thumb that slides. */
+export interface FlipMotion {
+    fill: StyleProp<ViewStyle>;
+    slide: StyleProp<ViewStyle>;
+}
+/** Flips with CSS transitions on opacity and transform. */
+export declare function useFlipMotion(on: boolean, travel: number, durationMs: number): FlipMotion;

package/types/ui/src/lib/focus-entry.d.ts

@@ -0,0 +1,16 @@
+/** A focus claim belongs to one screen, including virtualized controls. */
+export declare function createFocusEntry(): {
+    focusSettled: () => boolean;
+    markFocusSettled(): void;
+    resetFocusEntry(): void;
+};
+export declare const FocusEntryProvider: import("react").Provider<{
+    focusSettled: () => boolean;
+    markFocusSettled(): void;
+    resetFocusEntry(): void;
+} | null>;
+export declare function useFocusEntry(): {
+    focusSettled: () => boolean;
+    markFocusSettled(): void;
+    resetFocusEntry(): void;
+};

package/types/ui/src/lib/focus-here.d.ts

@@ -0,0 +1,11 @@
+/** The focused control's screen box, in the units the platform reports. */
+export interface FocusBox {
+    top: number;
+    left: number;
+    height: number;
+}
+export declare function createFocusProbe(): {
+    noteFocus: (_view: unknown) => void;
+    seq: () => number;
+    box: () => FocusBox | null;
+};

package/types/ui/src/lib/focus-here.web.d.ts

@@ -0,0 +1,7 @@
+import type { FocusBox } from './focus-here';
+export type { FocusBox };
+export declare function createFocusProbe(): {
+    noteFocus: (view: unknown) => void;
+    seq: () => number;
+    box: () => FocusBox | null;
+};

package/types/ui/src/lib/focus-lift.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode, type Ref } from 'react';
+import { type StyleProp, View, type ViewStyle } from 'react-native';
+type Report = (focused: boolean) => void;
+/** Report focus to the enclosing <FocusLift>; <Focusable> calls this. */
+export declare function useFocusLift(): Report | null;
+/** One layer clear of a sibling, the same step <Focusable> and <ButtonGroup>
+ *  use, so a control sitting in several of these cannot fight itself. */
+export declare const LIFTED: ViewStyle;
+/** The resting half of <LIFTED>, and never `null`: on Fabric a `zIndex` that
+ *  appears and disappears flattens and unflattens the native view under it, and
+ *  the mount operations aimed at the tag it just dropped are discarded
+ *  ("Unable to find viewState for tag"), which loses the row's layout. */
+export declare const GROUNDED: ViewStyle;
+/**
+ * Makes its subtree's focus visible to a container, so the container can lift
+ * ITSELF above its siblings while it holds the focus.
+ *
+ * Renders no element of its own, and that is the point: putting a wrapper view
+ * inside a flex row turns N children into one and collapses the row.
+ *
+ * ```tsx
+ * <FocusLiftHost>
+ *   {(held) => <View style={[style, held ? LIFTED : GROUNDED]}>{children}</View>}
+ * </FocusLiftHost>
+ * ```
+ */
+export declare function FocusLiftHost({ children }: Readonly<{
+    children: (held: boolean) => ReactNode;
+}>): import("react").JSX.Element;
+/**
+ * A view that rises above its siblings while anything inside it holds the
+ * focus, and reports the same edge to the container around it.
+ */
+export declare function FocusLiftView({ style, ref, children, }: Readonly<{
+    style?: StyleProp<ViewStyle>;
+    ref?: Ref<View>;
+    children: ReactNode;
+}>): import("react").JSX.Element;
+export {};

package/types/ui/src/lib/focus-mirror.d.ts

@@ -0,0 +1,6 @@
+/** Native accessibility follows OS focus rather than a document. */
+export declare function createFocusMirror(_pointerDriving: () => boolean): {
+    mirrorFocus(_view: unknown): void;
+    isMirrored(_element: unknown): boolean;
+    redeliverKey(_event: unknown): void;
+};

package/types/ui/src/lib/focus-mirror.web.d.ts

@@ -0,0 +1,5 @@
+export declare function createFocusMirror(pointerDriving: () => boolean): {
+    mirrorFocus: (view: unknown) => void;
+    isMirrored: (element: unknown) => boolean;
+    redeliverKey: (event: KeyboardEvent) => void;
+};

package/types/ui/src/lib/focus-nav.d.ts

@@ -0,0 +1,3 @@
+import type { FocusNavHandlers } from './focus-types';
+declare function useFocusNav({ onBack, onPlayPause, resetKey }: FocusNavHandlers): void;
+export { useFocusNav };

package/types/ui/src/lib/focus-nav.web.d.ts

@@ -0,0 +1,2 @@
+import type { FocusNavHandlers } from './focus-types';
+export declare function useFocusNav({ onBack, onPlayPause, resetKey }: FocusNavHandlers): void;

package/types/ui/src/lib/focus-platform.d.ts

@@ -0,0 +1,30 @@
+/** Which engine holds the ring: the television's own, or the navigator. */
+type FocusOwner = 'platform' | 'app';
+/** A direction the navigator handled with nowhere to move. */
+type FocusDirection = 'up' | 'down' | 'left' | 'right';
+type EdgeHandler = (direction: FocusDirection) => void;
+interface PlatformFocusHost {
+    claim: (owner: FocusOwner | null) => void;
+    listen: (handler: EdgeHandler | null) => void;
+}
+/** Wrap a screen's children in this via <FocusScope>; never directly. */
+declare const PlatformFocusProvider: import("react").Provider<PlatformFocusHost | null>;
+/**
+ * Declared by a platform chrome drawn inside a scope. `owner` is who holds the
+ * television's focus right now, null while no chrome is up. `onEdge` hears the
+ * directions the navigator could not act on, which is how a chrome takes the
+ * focus back when the ring is already against its side of the screen.
+ */
+declare function usePlatformFocus(owner: FocusOwner | null, onEdge?: EdgeHandler): void;
+interface PlatformFocusState {
+    owner: FocusOwner | null;
+    /** For <NavigatorRoot>, whose directions are wider than the four a
+     *  chrome is told about. */
+    onEdge: (direction: string) => void;
+    host: PlatformFocusHost;
+}
+/** The <FocusScope> half: what the scope renders around, and the value it
+ * provides to whatever chrome is drawn inside it. */
+declare function usePlatformFocusHost(): PlatformFocusState;
+export type { FocusDirection, FocusOwner };
+export { PlatformFocusProvider, usePlatformFocus, usePlatformFocusHost };

package/types/ui/src/lib/focus-presence.d.ts

@@ -0,0 +1,5 @@
+/** Wrap a screen's children in this via <FocusScope>; never directly. */
+declare const FocusPresenceProvider: import("react").Provider<boolean>;
+/** True when a <FocusScope> (and so a navigator root) is above this component. */
+declare function useInsideFocusScope(): boolean;
+export { FocusPresenceProvider, useInsideFocusScope };