@kromatv/sdk 0.1.40-canary.0

package/types/ui/src/components/organisms/player/types.d.ts

@@ -0,0 +1,226 @@
+import type { AudioTrack } from '@kroma/client/media';
+import type { ColorValue } from '#ui/core';
+/**
+ * The unified player contract. ONE `<Player>` chrome (packages/ui/src/player)
+ * serves both web and TV; each platform provides a `PlayerController` that
+ * adapts its engine hook (web `useVideoPlayback`, TV `useDirectPlayback`) plus
+ * its app-level state (subtitle selection, generation, resume...) to this shape.
+ * The chrome never talks to an engine directly, only through the controller.
+ */
+/**
+ * Per-platform capability flags. A `false` flag removes BOTH the cluster button
+ * AND its D-pad focus stop, so there is never a dead button or a trapped focus
+ * (see `usePlayerNav`). Everything else is common to every platform.
+ */
+export interface PlayerFlags {
+    /** Volume slider + mute (web). TV delegates volume to the set / amp remote. */
+    volume: boolean;
+    /** Picture-in-Picture floating window (web). No windowing on TV. */
+    pip: boolean;
+    /** Fullscreen toggle (web). A TV is already fullscreen. */
+    fullscreen: boolean;
+    /** "Play this on a TV". Set by the senders (web, and the phone if it ever
+     *  adopts this chrome) and only while a receiver is actually live - a TV is
+     *  the screen a film is cast TO, never from. */
+    cast?: boolean;
+    /** A fine pointer drives the chrome (reveal-on-move). Off on TVs: a Samsung /
+     *  magic-remote cursor emits phantom `pointermove` events that would otherwise
+     *  keep the chrome (title + controls) revealed forever instead of auto-hiding. */
+    pointer: boolean;
+}
+export declare const WEB_FLAGS: PlayerFlags;
+export declare const TV_FLAGS: PlayerFlags;
+/** Why the player asked to be closed: `close` is the chrome's own back control,
+ *  `back` the remote's Back button (and the key a browser TV shell delivers it
+ *  as), `stop` the remote's Stop media key, `ended` the film running out with
+ *  nothing to offer after it. */
+export type PlayerCloseReason = 'close' | 'back' | 'stop' | 'ended';
+export interface PlayerCloseDetails {
+    reason: PlayerCloseReason;
+}
+/** A subtitle track as the chrome needs it (embedded, downloaded or AI-made). */
+export interface PlayerSub {
+    index: number;
+    language: string | null;
+    /** Human label (AI tracks carry their own; else derived from the language). */
+    label?: string | null;
+    codec: string;
+    /** Resolved WebVTT url the renderer fetches (absent for picture subs). */
+    url?: string | null;
+    /** AI-generated (Whisper / translate) track → violet "IA" treatment. */
+    ai?: boolean;
+    /** false = a picture sub (PGS/VobSub) we cannot render as text → disabled. */
+    selectable: boolean;
+    /** Deletable generated-track id (present only for AI tracks). */
+    subId?: string | null;
+}
+/** Volume-normalizer modes (§7). `night` clamps loud peaks hard. */
+export type AudioFilterMode = 'off' | 'standard' | 'night' | 'boost';
+/** A quality option (§5 Settings). The server is remux-only, so this reflects
+ *  the SOURCE (one honest "Auto · <source>" entry) rather than a fake ladder. */
+export interface PlayerQuality {
+    id: string;
+    label: string;
+    /** Second line under the label, for what the entry actually does. */
+    note?: string;
+}
+/** One chapter segment on the progress bar (§1). */
+export interface Chapter {
+    startMs: number;
+    endMs: number;
+    title: string;
+    /** Marker origin, for the coloured intro/credits treatment when derived. */
+    kind?: 'intro' | 'credits' | 'chapter';
+}
+/** One live numeric series for the stats panel's charts. `value` is the
+ * instantaneous sample the panel appends to its own rolling history; `display`
+ * is the already-formatted current value shown beside the graph. */
+export interface PlayerMeter {
+    /** Stable id keying the panel's per-series history (never localized). */
+    key: string;
+    /** Localized row label. */
+    label: string;
+    /** Instantaneous numeric sample (the chart is auto-scaled to its window). */
+    value: number;
+    /** Formatted current value, e.g. "8.20 Mb/s". */
+    display: string;
+    /** Stroke colour for the trace (CSS colour). Defaults to the series palette
+     *  slot for this meter's position, which is what a builder should usually let
+     *  happen - the palette is validated as a set. */
+    color?: ColorValue;
+    /**
+     * Meters sharing a `chart` id are drawn on ONE axis, in the order given.
+     *
+     * Only ever group meters that share a UNIT. Two scales on one axis invent a
+     * crossover that is not in the data, which is why buffer (seconds) has its own
+     * chart while bandwidth and bitrate (both kb/s) share one - there, the gap
+     * between them IS the diagnostic. A meter that names no chart gets its own.
+     */
+    chart?: string;
+    /**
+     * Localized heading for a shared chart, set on its FIRST meter.
+     *
+     * Without one the chart heads itself with its series' labels joined, which is
+     * honest but runs long the moment there are two of them ("Bandwidth est. ·
+     * Stream bitrate" truncates in the space available). A pair that shares an axis
+     * usually has a name covering both - throughput, for these two.
+     */
+    chartLabel?: string;
+    /**
+     * A horizontal reference line, in the series' own unit: the level at which the
+     * number stops being healthy. Without one an auto-scaled trace says how a
+     * value is MOVING but never whether it is fine, which is the question a
+     * diagnostics panel is open to answer.
+     */
+    reference?: {
+        value: number;
+        label: string;
+    };
+    /**
+     * Fill the region between this meter and the next one in the same chart.
+     * Set on the upper series of a capacity/demand pair (bandwidth over bitrate):
+     * while the band is open there is slack, and when it closes the stream stalls.
+     */
+    band?: boolean;
+}
+/** Live "stats for nerds" snapshot (§9). All optional: TV fills what it can. */
+export interface PlayerStats {
+    resolution?: string;
+    videoCodec?: string;
+    fps?: string;
+    dropped?: string;
+    audioFormat?: string;
+    bitrate?: string;
+    buffer?: string;
+    mode?: string;
+    /** Platform-specific rows, already localized. `group` sorts them into titled
+     *  blocks in the panel - the web reports twenty of these, and twenty rows in
+     *  one list is a wall. Rows with no group stay with the headline fields, so a
+     *  builder that names none renders exactly as it always did. */
+    extra?: {
+        label: string;
+        value: string;
+        group?: string;
+    }[];
+    /** Live numeric series, drawn as charts above the text rows. Meters sharing a
+     *  `chart` id land on one axis; see PlayerMeter. */
+    meters?: PlayerMeter[];
+}
+/** The video surface kind the controller drives. `video` = an in-page element,
+ *  `vlc` = the libVLC texture the Android shell mounts; `avplay` and `mpv`
+ *  render to a native plane BEHIND a transparent page. */
+export type PlayerSurface = 'video' | 'avplay' | 'mpv' | 'vlc';
+/** A video-plane rectangle in viewport FRACTIONS [0,1] (`x,y` = top-left corner,
+ *  `w,h` = size). Used to shrink a NATIVE plane (AVPlay / mpv) into the settings
+ *  card - those can't be transformed like a surface the chrome lays out. */
+export interface PlaneRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/**
+ * Everything the shared chrome reads or drives. Values marked "(web)" are no-ops
+ * / stable falses on TV (their flag is off, so the chrome never surfaces them).
+ */
+export interface PlayerController {
+    cur: number;
+    dur: number;
+    bufEnd: number | null;
+    /** Pending scrub target while dragging / D-pad seeking; null when settled. */
+    seekPreview: number | null;
+    playing: boolean;
+    waiting: boolean;
+    ready: boolean;
+    /** Already-localized warning/error string, or null. */
+    error: string | null;
+    /** The line under {@link error}: what the viewer can do about it. Null when
+     *  the headline says everything there is to say. */
+    errorHint?: string | null;
+    /** Bumps once each time playback reaches the natural end (autoplay trigger). */
+    endedNonce: number;
+    surface: PlayerSurface;
+    /** The picture's display ratio (width / height), once the media declares one.
+     *  Left out while unknown, and then the surface fills the stage rather than
+     *  hugging its own shape. */
+    aspect?: number;
+    togglePlay(): void;
+    /** Seek to an absolute position (seconds). */
+    seekTo(abs: number): void;
+    /** Relative skip (seconds); negative = back. */
+    skip(delta: number): void;
+    scrubPreview(abs: number | null): void;
+    scrubCommit(): void;
+    volume: number;
+    muted: boolean;
+    setVolume(v: number): void;
+    toggleMute(): void;
+    rate: number;
+    setRate(r: number): void;
+    audioTracks: AudioTrack[];
+    audioIndex: number;
+    setAudio(index: number): void;
+    subtitles: PlayerSub[];
+    subtitleIndex: number | null;
+    setSubtitle(index: number | null): void;
+    qualities: PlayerQuality[];
+    qualityId: string;
+    setQuality(id: string): void;
+    engines?: PlayerQuality[];
+    engineId?: string;
+    setEngine?(id: string): void;
+    audioFilter: AudioFilterMode;
+    setAudioFilter(mode: AudioFilterMode): void;
+    audioFilterSupported: boolean;
+    pipActive: boolean;
+    togglePip(): void;
+    fullscreen: boolean;
+    toggleFullscreen(): void;
+    /** Resize the NATIVE video plane (TV: AVPlay / mpv / ExoPlayer) to a
+     *  fraction-rect, or `null` for fullscreen. Lets the chrome shrink the plane
+     *  into the settings card (YouTube-style), since a hardware plane behind the
+     *  page can't be CSS-transformed. Absent for an in-page <video> surface, which
+     *  the chrome shrinks with a CSS transform. */
+    setPlaneRect?(rect: PlaneRect | null): void;
+    getStats(): PlayerStats;
+}

package/types/ui/src/components/organisms/rail/index.d.ts

@@ -0,0 +1 @@
+export * from './rail';

package/types/ui/src/components/organisms/rail/rail-context.d.ts

@@ -0,0 +1,7 @@
+interface RailState {
+    gap: number;
+    inset: number;
+}
+declare const RailContext: import("react").Context<RailState | null>, useRail: (part: string) => RailState;
+export type { RailState };
+export { RailContext, useRail };

package/types/ui/src/components/organisms/rail/rail-row.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+interface RailListProps {
+    /** Tile PITCH: the tile's own width plus the gap after it. The list
+     *  positions tiles rather than laying them out, so it has to be told. */
+    pitch: number;
+    /** The row's height, for the same reason. Focus-ring room is added on top. */
+    height: number;
+    children: ReactNode;
+}
+/**
+ * The windowed row: only the tiles near the viewport exist, so a row of forty
+ * costs what a row of eight costs. Worth it for a long row of uniform tiles; a
+ * short strip (chips, cast faces) is cheaper mounted whole, which is what
+ * `<Rail.Root>` renders for plain children.
+ */
+declare function List({ pitch, height, children }: Readonly<RailListProps>): import("react").JSX.Element;
+declare function GrowingRow({ grow: growing, children, }: Readonly<{
+    grow: boolean;
+    children: readonly ReactNode[];
+}>): import("react").JSX.Element;
+export type { RailListProps };
+export { GrowingRow, List };

package/types/ui/src/components/organisms/rail/rail.d.ts

@@ -0,0 +1,63 @@
+import { type ReactNode } from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+import { type TypeRole } from '#ui/core/tokens';
+import { List } from './rail-row';
+/**
+ * A rail's gap between tiles. Tighter than what a focused tile puts outside
+ * itself (it grows by its focus scale and then wears a ring RING_ROOM beyond
+ * that), so a focused tile reaches over its neighbours - which is why the cell
+ * holding the focus is lifted above them rather than fenced off from them.
+ */
+declare const RAIL_GAP = 16;
+interface RailTitleProps {
+    /** The heading's type role. The home rows run larger than the default h2. */
+    variant?: TypeRole;
+    style?: StyleProp<TextStyle>;
+    children: ReactNode;
+}
+declare function Title({ variant, style, children }: Readonly<RailTitleProps>): import("react").JSX.Element;
+interface RailRootProps {
+    gap?: number;
+    /** Defaults to the overscan-safe 10-foot gutter, applied inside the
+     *  scroller so the first tile's focus ring is never clipped by the
+     *  viewport edge. */
+    inset?: number;
+    /**
+     * Mount every tile at once instead of a chunk at a time. The growing window
+     * suits a rail of dozens of posters where only a few are ever visible; a
+     * short strip of controls (e.g. sort + genre chips) should pass
+     * `grow={false}` so it doesn't open showing just its first chunk. It says
+     * nothing about a `<Rail.List>`, which windows itself.
+     */
+    grow?: boolean;
+    /** A `<Rail.Title>` and a `<Rail.List>` must be DIRECT children to take
+     *  their slot; every other child is a tile of the growing row. Given a
+     *  `<Rail.List>`, it IS the row and stray tiles beside it are dropped. */
+    children?: ReactNode;
+}
+declare function Root({ gap, inset, grow, children, }: Readonly<RailRootProps>): import("react").JSX.Element;
+/**
+ * A titled horizontal row of tiles.
+ *
+ * ```tsx
+ * <Rail.Root>
+ *   <Rail.Title>Reprendre</Rail.Title>
+ *   {cards}
+ * </Rail.Root>
+ *
+ * <Rail.Root>
+ *   <Rail.Title variant="subheadingTv">Reprendre</Rail.Title>
+ *   <Rail.List pitch={320 + RAIL_GAP} height={180}>
+ *     {cards}
+ *   </Rail.List>
+ * </Rail.Root>
+ * ```
+ */
+declare const Rail: {
+    Root: typeof Root;
+    Title: typeof Title;
+    List: typeof List;
+};
+export type { RailListProps } from './rail-row';
+export type { RailRootProps, RailTitleProps };
+export { RAIL_GAP, Rail };

package/types/ui/src/components/organisms/resizable/index.d.ts

@@ -0,0 +1,8 @@
+export type { ResizableRootProps } from './resizable';
+export { Resizable } from './resizable';
+export type { ResizableLayoutDetails } from './resizable-context';
+export type { ResizableHandleProps } from './resizable-handle';
+export type { ResizableSize } from './resizable-layout';
+export type { ResizablePanelDetails, ResizablePanelProps, ResizablePanelState, } from './resizable-panel';
+export { useResizablePanel } from './resizable-panel';
+export type { ResizableStorage } from './resizable-store';

package/types/ui/src/components/organisms/resizable/resizable-context.d.ts

@@ -0,0 +1,39 @@
+import type { GroupOrientation } from '#ui/lib/group-shape';
+import type { PanelLimit, PanelSpec } from './resizable-layout';
+/** Why a layout changed, handed to `onLayoutChange` beside the layout itself. */
+interface ResizableLayoutDetails {
+    /** False while a drag is still in flight: the same gesture reports many
+     *  times and then once more with `true`. */
+    committed: boolean;
+    /** False when the group re-clamped itself to a window rather than a reader
+     *  moving anything. */
+    user: boolean;
+}
+interface ResizableGroupState {
+    orientation: GroupOrientation;
+    disabled: boolean;
+    /** Points the panels share, the seams' own thickness already taken off. */
+    available: number;
+    layout: readonly number[];
+    limits: readonly PanelLimit[];
+    specs: readonly PanelSpec[];
+    /** Remembers the layout a gesture starts from, so a drag that runs past a
+     *  bound and comes back does not follow the pointer home. */
+    begin: () => void;
+    /** Moves the seam after panel `at` by `delta` POINTS, measured from the
+     *  layout the last `begin` remembered. */
+    drag: (at: number, delta: number, committed: boolean) => void;
+    /** Puts the two panels a seam separates back in the proportion their own
+     *  `defaultSize`s asked for. */
+    reset: (at: number) => void;
+    /** Asks for a panel to be a given share of the group, the seam beside it
+     *  doing the work a drag would have done. */
+    resize: (at: number, size: number) => void;
+}
+declare const ResizableGroupContext: import("react").Context<ResizableGroupState | null>, useResizableGroup: (part: string) => ResizableGroupState;
+declare const PanelIndexContext: import("react").Context<number | null>;
+declare const SeamIndexContext: import("react").Context<number | null>;
+declare function usePanelIndex(): number;
+declare function useSeamIndex(): number;
+export type { ResizableGroupState, ResizableLayoutDetails };
+export { PanelIndexContext, ResizableGroupContext, SeamIndexContext, usePanelIndex, useResizableGroup, useSeamIndex, };

package/types/ui/src/components/organisms/resizable/resizable-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/components/organisms/resizable/resizable-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/components/organisms/resizable/resizable-handle.d.ts

@@ -0,0 +1,30 @@
+declare const STEP = 24;
+/**
+ * The points a seam takes out of the group. Every handle is laid out whole
+ * rather than hanging over its neighbours: an overhang is the obvious way to
+ * widen a target, and it is wrong here, because the panes either side scroll,
+ * macOS draws their scrollbars as an OVERLAY - zero layout width, painted on
+ * top, right at the edge the seam sits on - and a scrollbar under the pointer
+ * shows the arrow whatever the element beneath it asks for. The cursor then
+ * flickers between the two as the pointer crosses. Taking the width honestly
+ * costs the panels one gutter step and nothing else.
+ */
+declare const HANDLE_THICKNESS: 16;
+interface ResizableHandleProps {
+    /** Names the seam to assistive tech. */
+    label?: string;
+    /** Fixes the two panels either side of it; the seam stays drawn and stops
+     *  being a focus stop. Set on the group instead to fix every seam at once. */
+    disabled?: boolean;
+}
+/**
+ * The seam between two `<Resizable.Panel>`s. Write it between them: it takes
+ * its place from where it sits, so nothing has to be indexed by hand.
+ *
+ * The whole strip is the control - one D-pad stop, a pointer-sized hit area -
+ * and it answers three gestures: drag it, press it to take the arrow keys, and
+ * press it twice (or hold it) to put its two panels back.
+ */
+declare function Handle({ label, disabled }: Readonly<ResizableHandleProps>): import("react").JSX.Element;
+export type { ResizableHandleProps };
+export { HANDLE_THICKNESS, Handle, STEP };

package/types/ui/src/components/organisms/resizable/resizable-keys-types.d.ts

@@ -0,0 +1,11 @@
+import type { GroupOrientation } from '#ui/lib/group-shape';
+interface ResizableKeysOptions {
+    /** While true the seam owns the four directions, and nothing else moves. */
+    held: boolean;
+    orientation: GroupOrientation;
+    /** `-1` towards the start of the group (left, up), `1` towards its end. */
+    onNudge: (towards: -1 | 1) => void;
+    /** Select, Escape or Back: the reader is done. */
+    onRelease: () => void;
+}
+export type { ResizableKeysOptions };

package/types/ui/src/components/organisms/resizable/resizable-keys.d.ts

@@ -0,0 +1,3 @@
+import type { ResizableKeysOptions } from './resizable-keys-types';
+declare function useResizableKeys({ held, orientation, onNudge, onRelease }: ResizableKeysOptions): void;
+export { useResizableKeys };

package/types/ui/src/components/organisms/resizable/resizable-keys.web.d.ts

@@ -0,0 +1,3 @@
+import type { ResizableKeysOptions } from './resizable-keys-types';
+declare function useResizableKeys({ held, orientation, onNudge, onRelease }: ResizableKeysOptions): void;
+export { useResizableKeys };

package/types/ui/src/components/organisms/resizable/resizable-layout.d.ts

@@ -0,0 +1,55 @@
+/** A panel measurement: a share of the group (`25`) or points (`'280px'`). */
+type ResizableSize = number | `${number}px`;
+/** What a `<Resizable.Panel>` declares about its own bounds. */
+interface PanelSpec {
+    defaultSize?: ResizableSize;
+    minSize?: ResizableSize;
+    maxSize?: ResizableSize;
+    collapsible?: boolean;
+    collapsedSize?: ResizableSize;
+}
+/** A panel's bounds, resolved against the group's measured length. */
+interface PanelLimit {
+    min: number;
+    max: number;
+    collapsedSize: number;
+    collapsible: boolean;
+}
+declare const FULL = 100;
+declare const EPSILON = 0.001;
+/** A stated size as a share of `available` points, or nothing where it cannot
+ * be resolved yet - a points size before the group has been measured. */
+declare function percentOf(size: ResizableSize | undefined, available: number): number | undefined;
+/** A share of the group back in points. */
+declare function pointsOf(percent: number, available: number): number;
+/** The bounds every panel is held to on a group this long. */
+declare function limitsFor(specs: readonly PanelSpec[], available: number): PanelLimit[];
+/** The layout a group opens at: every panel that states a `defaultSize` takes
+ * it, and the panels that state none split what is left equally. */
+declare function defaultLayout(specs: readonly PanelSpec[], available: number): number[];
+/** Whether a panel is shut rather than merely small. */
+declare function collapsedAt(size: number, limit: PanelLimit): boolean;
+/** A wished-for layout made legal on this group: every panel inside its own
+ * bounds, nothing resting in a collapsible panel's dead zone, and the whole
+ * summing to 100 again. */
+declare function solve(sizes: readonly number[], limits: readonly PanelLimit[]): number[];
+/**
+ * The layout after the seam between panel `at` and panel `at + 1` has moved by
+ * `delta` percent. Positive grows the panel before the seam.
+ *
+ * The panels nearest the seam move first and the ones beyond them take over as
+ * each hits a bound, so a seam keeps travelling as long as anything on either
+ * side still has room.
+ */
+declare function adjust(layout: readonly number[], at: number, delta: number, limits: readonly PanelLimit[]): number[];
+/** The layout after panel `at` has been asked for a size outright, the seam
+ * beside it doing the work a drag would have done. */
+declare function resizePanel(layout: readonly number[], at: number, size: number, limits: readonly PanelLimit[]): number[];
+/** The two panels a seam separates put back in the proportion their own
+ * `defaultSize`s asked for, leaving every other panel where the reader left
+ * it. */
+declare function resetSeam(layout: readonly number[], at: number, defaults: readonly number[], limits: readonly PanelLimit[]): number[];
+/** Whether two layouts say the same thing, to the precision `solve` rounds to. */
+declare function sameLayout(a: readonly number[], b: readonly number[]): boolean;
+export type { PanelLimit, PanelSpec, ResizableSize };
+export { adjust, collapsedAt, defaultLayout, EPSILON, FULL, limitsFor, percentOf, pointsOf, resetSeam, resizePanel, sameLayout, solve, };

package/types/ui/src/components/organisms/resizable/resizable-panel.d.ts

@@ -0,0 +1,55 @@
+import { type ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { type ResizableSize } from './resizable-layout';
+/** What a panel reports about itself alongside its new size. */
+interface ResizablePanelDetails {
+    /** The share in points, measured against the group. `0` until the group has
+     *  been laid out once. */
+    points: number;
+    collapsed: boolean;
+}
+interface ResizablePanelProps {
+    /** The share the panel opens at: a percentage (`25`) or points (`'280px'`).
+     *  Panels stating none split what the stating ones leave. */
+    defaultSize?: ResizableSize;
+    /** The floor a drag stops at. Defaults to nothing, so a panel can be squeezed
+     *  to zero unless it says otherwise. */
+    minSize?: ResizableSize;
+    maxSize?: ResizableSize;
+    /** Lets a drag past `minSize` shut the panel to `collapsedSize` instead of
+     *  stopping at the floor; halfway between the two is where it snaps. */
+    collapsible?: boolean;
+    /** Where a collapsed panel rests. `0` by default, which hides it outright. */
+    collapsedSize?: ResizableSize;
+    /** The share (0-100) after every change, dragged or clamped. */
+    onResize?: (size: number, details: ResizablePanelDetails) => void;
+    /** Render the share onto the one child instead of a panel <View> of its own
+     *  (see lib/slot). The panel's share then wins the child's own sizing, which
+     *  is the point: the seam decides how wide a panel is. */
+    asChild?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+}
+/** What `useResizablePanel` hands the subtree inside a panel. */
+interface ResizablePanelState {
+    /** The panel's share of the group, 0-100. */
+    size: number;
+    points: number;
+    collapsed: boolean;
+    collapse: () => void;
+    expand: () => void;
+    resize: (size: ResizableSize) => void;
+}
+/**
+ * The live state of the panel this is called inside, for a control several
+ * levels down that has to drive it - a "hide the inspector" button that is not
+ * the seam. Throws outside a `<Resizable.Panel>`.
+ */
+declare function useResizablePanel(): ResizablePanelState;
+/**
+ * One region of a `<Resizable.Root>`. Write the panels and the seams between
+ * them in order; a panel takes its place from where it sits.
+ */
+declare function Panel({ asChild, onResize, style, children }: Readonly<ResizablePanelProps>): import("react").JSX.Element;
+export type { ResizablePanelDetails, ResizablePanelProps, ResizablePanelState };
+export { Panel, useResizablePanel };

package/types/ui/src/components/organisms/resizable/resizable-store.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The two calls a `<Resizable.Root autoSaveId>` needs from a key/value store.
+ * `localStorage` satisfies it, and so does a native app's own device store -
+ * React Native has no `localStorage`, so a native host that wants a layout to
+ * survive a reload passes one in.
+ */
+interface ResizableStorage {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+}
+type SavedLayouts = Record<string, number[]>;
+declare function browserStorage(): ResizableStorage | null;
+declare function layoutsOf(value: unknown): SavedLayouts;
+/** Whatever was dragged last visit for this arrangement, or nothing. */
+declare function readLayout(store: ResizableStorage | null, id: string | undefined, arrangement: string): number[] | null;
+declare function writeLayout(store: ResizableStorage | null, id: string | undefined, arrangement: string, sizes: readonly number[]): void;
+export type { ResizableStorage };
+export { browserStorage, layoutsOf, readLayout, writeLayout };

package/types/ui/src/components/organisms/resizable/resizable.d.ts

@@ -0,0 +1,59 @@
+import { type ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { GroupOrientation } from '#ui/lib/group-shape';
+import { type ResizableLayoutDetails } from './resizable-context';
+import { Handle } from './resizable-handle';
+import { Panel } from './resizable-panel';
+import { type ResizableStorage } from './resizable-store';
+interface ResizableRootProps {
+    /** Which way the panels run. `horizontal` puts them side by side with
+     *  upright seams between them. */
+    orientation?: GroupOrientation;
+    /** Present: you own the layout (controlled). A list of shares, one per
+     *  panel, summing to 100. */
+    layout?: readonly number[];
+    /** The layout to start from, overriding what the panels' own `defaultSize`s
+     *  describe. */
+    defaultLayout?: readonly number[];
+    onLayoutChange?: (next: readonly number[], details: ResizableLayoutDetails) => void;
+    /** Fixes every seam in the group. The seams stay drawn and stop being focus
+     *  stops. */
+    disabled?: boolean;
+    /** Keeps the layout between visits under this key. Each arrangement of the
+     *  group (orientation and panel count) is stored separately, so a window
+     *  crossing a breakpoint cannot restore a layout written for other panels. */
+    autoSaveId?: string;
+    /** Where `autoSaveId` writes. Defaults to `localStorage`, which is null off
+     *  the web; a native host passes its own device store. */
+    storage?: ResizableStorage | null;
+    style?: StyleProp<ViewStyle>;
+    /** `<Resizable.Panel>`s with `<Resizable.Handle>`s between them. A part has
+     *  to be a DIRECT child to take its place; anything else is laid out as
+     *  written and takes no part in the group. */
+    children?: ReactNode;
+}
+/**
+ * A group of resizable panels.
+ *
+ * ```tsx
+ * <Resizable.Root orientation="horizontal" autoSaveId="inspector">
+ *   <Resizable.Panel defaultSize={25} minSize="200px">…</Resizable.Panel>
+ *   <Resizable.Handle label="Resize the list" />
+ *   <Resizable.Panel minSize="480px">…</Resizable.Panel>
+ * </Resizable.Root>
+ * ```
+ */
+declare function Root({ orientation, layout: layoutProp, defaultLayout: openAt, onLayoutChange, disabled, autoSaveId, storage, style, children, }: Readonly<ResizableRootProps>): import("react").JSX.Element;
+/**
+ * Panels a reader can re-proportion, and the seams they meet at.
+ *
+ * The seam is one D-pad stop as well as a pointer target: press it to take the
+ * arrow keys, press it again (or hold it) to put its two panels back.
+ */
+declare const Resizable: {
+    Root: typeof Root;
+    Panel: typeof Panel;
+    Handle: typeof Handle;
+};
+export type { ResizableRootProps };
+export { Resizable };

package/types/ui/src/components/organisms/splash-backdrop/index.d.ts

@@ -0,0 +1,2 @@
+export type { SplashBackdropProps, SplashCover } from './splash-backdrop';
+export { SplashBackdrop } from './splash-backdrop';

package/types/ui/src/components/organisms/splash-backdrop/splash-backdrop.d.ts

@@ -0,0 +1,22 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+interface SplashCover {
+    /** Full artwork URL, already resolved against the server. */
+    url: string;
+    /** Corner caption, e.g. "Alien: Earth · 2025". */
+    caption?: string;
+    /** Small overline before the caption, e.g. the localized "Film". */
+    eyebrow?: string;
+}
+interface SplashBackdropProps {
+    covers: readonly SplashCover[];
+    /** How long each cover holds before the next dissolve. */
+    holdMs?: number;
+    style?: StyleProp<ViewStyle>;
+}
+/** The universal sign-in splash: hosts fetch `/api/splash`, map it to covers
+ * and drop this behind their gate. It owns the rotation, the pre-decode of the
+ * next cover, the grade that keeps a form readable, the wheel rule and the
+ * caption; the host owns everything interactive above it. */
+declare function SplashBackdrop({ covers, holdMs, style }: Readonly<SplashBackdropProps>): import("react").JSX.Element | null;
+export type { SplashBackdropProps, SplashCover };
+export { SplashBackdrop };

package/types/ui/src/components/organisms/table/index.d.ts

@@ -0,0 +1 @@
+export * from './table';