@kromatv/sdk 0.1.40-canary.0

package/types/ui/src/components/organisms/player/lib/stage-ratio.d.ts

@@ -0,0 +1,4 @@
+/** The stage's width / height. A native shell IS the screen it draws on, so what
+ * the chrome measured of the window already is the stage's own shape. See the
+ * `.web` half for why a browser cannot assume that. */
+export declare function useStageRatio(_stageId: string, measured: number): number;

package/types/ui/src/components/organisms/player/lib/stage-ratio.web.d.ts

@@ -0,0 +1,2 @@
+/** The stage's width / height, read off the element the chrome draws on. */
+export declare function useStageRatio(stageId: string, measured: number): number;

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

@@ -0,0 +1,40 @@
+import { type ColorValue } from '#ui/core';
+export declare const FOCUS_SCALE = 1.07;
+export interface SeekBarPaint {
+    track: ColorValue;
+    buffered: ColorValue;
+    played: readonly [string, string];
+    playheadHalo: string;
+}
+/** The seek bar's paints, shared with the mobile touch scrub bar so both draw
+ *  the identical track. A function, so the accent follows the theme. */
+export declare const seekBar: () => SeekBarPaint;
+export declare const SCRIM = "rgba(0, 0, 0, 0.45)";
+export declare const playerStyle: import("../../../../core/styles").Styles<{
+    readonly eyebrow: {
+        readonly font: "ui";
+        readonly fontSize: 12;
+        readonly fontWeight: "700";
+        readonly letterSpacing: 1.68;
+        readonly textTransform: "uppercase";
+        readonly color: "textDim";
+    };
+    readonly panel: {
+        readonly absolute: true;
+        readonly top: 0;
+        readonly bottom: 0;
+        readonly right: 0;
+        readonly z: 42;
+        readonly bg: "rgba(16, 16, 20, 0.94)";
+    };
+    readonly body: {
+        readonly font: "ui";
+        readonly fontSize: 15;
+        readonly color: "text";
+    };
+    readonly meta: {
+        readonly font: "ui";
+        readonly fontSize: 13;
+        readonly color: "text/55";
+    };
+}>;

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

@@ -0,0 +1,3 @@
+export declare const STAGE_STYLE_ID = "kroma-player-stage-style";
+/** Idempotent: injects the stage-surface rule once per document. */
+export declare function injectStageStyles(): void;

package/types/ui/src/components/organisms/player/lib/subtitle-appearance.d.ts

@@ -0,0 +1,53 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+/**
+ * Subtitle appearance (§8): size, colour, edge, font, opacity, background and
+ * window, persisted to localStorage. The option sets are CEA-708 (FCC-required,
+ * graded by Samsung's TV certification). Trimming one is a certification defect.
+ */
+/** Hold a 0-100 percentage inside its range: an rgba() alpha outside 0..1 is an
+ * invalid colour, and an invalid colour drops the whole declaration. */
+export declare const clampPct: (n: number) => number;
+export type SubSize = 'sm' | 'md' | 'lg' | 'xl';
+export type SubEdge = 'none' | 'raised' | 'depressed' | 'uniform' | 'shadow';
+export type SubFont = 'default' | 'monoSerif' | 'propSerif' | 'monoSans' | 'propSans' | 'casual' | 'cursive' | 'smallCaps';
+export interface SubtitleAppearance {
+    size: SubSize;
+    color: string;
+    edge: SubEdge;
+    font: SubFont;
+    /** 20–100 (§8). */
+    opacity: number;
+    bgColor: string;
+    /** 0–100; 0 = no background. */
+    bgOpacity: number;
+    windowColor: string;
+    /** 0–100; 0 = no window. */
+    windowOpacity: number;
+}
+/** Deliberately not CEA-708's defaults (white on an opaque black box): a film
+ * should open with captions that sit on the picture, not a slab across it. */
+export declare const DEFAULT_SUB_APPEARANCE: SubtitleAppearance;
+export declare const SUB_COLORS: readonly ["#FFFFFF", "#000000", "#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF"];
+/** CEA-708 order, also the order ◀▶ steps through them. The single source of
+ * truth: a treatment missing here would compile but be unreachable. */
+export declare const SUB_EDGES: readonly SubEdge[];
+export declare const SUB_FONTS: readonly SubFont[];
+/** Bring a stored choice onto the current model, mapping retired option names
+ * (`outline` → `uniform`, `box` → `none` edge + background) so a viewer's old
+ * choice isn't silently lost. */
+export declare function migrateAppearance(raw: unknown): SubtitleAppearance;
+/** Persisted subtitle appearance. SSR-safe: starts from defaults (matching the
+ * server render), then hydrates from localStorage on the client. */
+export declare function useSubtitleAppearance(): [
+    SubtitleAppearance,
+    (next: Partial<SubtitleAppearance>) => void
+];
+/** `#RRGGBB` + a 0–100 opacity as an rgba() the RN and DOM sides both take. */
+export declare function withOpacity(hex: string, pct: number): string;
+/** The caption window's style: the band the cue block sits in. A ViewStyle,
+ * not a TextStyle: RN's stricter native typings require it for a container. */
+export declare function subtitleWindowStyle(style: SubtitleAppearance): ViewStyle;
+/** The text style for a subtitle line, from the viewer's appearance choice.
+ * The edge treatment is the one piece that differs per platform (see
+ * subtitle-edge.ts); everything else is one set of numbers. */
+export declare function subtitleStyle(style: SubtitleAppearance): TextStyle;

package/types/ui/src/components/organisms/player/lib/subtitle-edge.d.ts

@@ -0,0 +1,3 @@
+import type { TextStyle } from 'react-native';
+import type { SubEdge } from './subtitle-appearance';
+export declare function edgeStyle(edge: SubEdge): TextStyle;

package/types/ui/src/components/organisms/player/lib/subtitle-edge.web.d.ts

@@ -0,0 +1,3 @@
+import type { TextStyle } from 'react-native';
+import type { SubEdge } from './subtitle-appearance';
+export declare function edgeStyle(edge: SubEdge): TextStyle;

package/types/ui/src/components/organisms/player/lib/surface-shrink.d.ts

@@ -0,0 +1,17 @@
+import type { PlayerSurface } from '../types';
+/**
+ * The hold the settings card can take on a video surface.
+ *
+ * `transform` scales the stage the surface sits in - an in-page `<video>`, a
+ * `<VideoView>`, the libVLC TextureView - about the origin `stageCard` picked,
+ * and carries everything drawn on the picture down with it. `plane` is a
+ * hardware plane BEHIND the page, which React does not lay out at all and which
+ * moves through `setPlaneRect`.
+ *
+ * There is no third answer. A native view React lays out takes a transform only
+ * if it draws inside the view hierarchy, so a surface that would need its BOX
+ * moved instead (an Android SurfaceView) is given a texture-backed one on the
+ * shell side rather than a shrink of its own.
+ */
+export type SurfaceShrink = 'transform' | 'plane';
+export declare function surfaceShrink(surface: PlayerSurface): SurfaceShrink;

package/types/ui/src/components/organisms/player/lib/virtual-focus.d.ts

@@ -0,0 +1,2 @@
+/** Spread onto any player-chrome Pressable. See the file header for why. */
+export { UNFOCUSABLE as VIRTUAL_FOCUS } from '#ui/lib/focus-types';

package/types/ui/src/components/organisms/player/lib/virtual-focus.web.d.ts

@@ -0,0 +1,3 @@
+/** No-op on the web: there is no OS focus engine to opt out of, and the player
+ * already routes every key itself. See virtual-focus.ts for the native half. */
+export declare const VIRTUAL_FOCUS: {};

package/types/ui/src/components/organisms/player/parts/control-cluster/control-cluster.d.ts

@@ -0,0 +1,32 @@
+import { type ChromeMetrics } from '#ui/components/organisms/player/lib/metrics';
+import type { ControlId } from '#ui/components/organisms/player/lib/nav';
+export interface ControlClusterProps {
+    focused: ControlId | null;
+    playing: boolean;
+    muted: boolean;
+    volume: number;
+    pipActive: boolean;
+    fullscreen: boolean;
+    /** How the row fits the stage it is drawn on (see ../lib/metrics): WHICH
+     *  controls there is room for, the scale they are drawn at, and whether the
+     *  volume rail survived. The list is not a separate prop because the row and
+     *  the nav machine must agree on it exactly - they read the same one. */
+    metrics: ChromeMetrics;
+    /** Run a control (mouse click shares this with D-pad OK). */
+    onActivate: (id: ControlId) => void;
+    /** Hover moves focus (§15). */
+    onFocus: (id: ControlId) => void;
+    onVolume: (v: number) => void;
+}
+/**
+ * The middle control row (§4): centered transport (rewind/play/forward) plus the
+ * feature-flagged cluster (next/volume/subtitles/audio/settings/cast/pip/
+ * fullscreen). Renders exactly `metrics.controls` (already filtered by feature
+ * flags and available width), so it never draws a dead button, and always fits
+ * on one line by shrinking then shedding controls (see ../lib/metrics
+ * `chromeMetrics`); a shed control is reported via `metrics.overflow`.
+ *
+ * Memoized: every prop is stable between playback ticks, so the row skips the
+ * ~4 Hz timeupdate re-renders the rest of the chrome makes.
+ */
+export declare const ControlCluster: import("react").MemoExoticComponent<({ focused, playing, muted, volume, pipActive, fullscreen, metrics, onActivate, onFocus, onVolume, }: Readonly<ControlClusterProps>) => import("react").JSX.Element>;

package/types/ui/src/components/organisms/player/parts/control-cluster/index.d.ts

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

package/types/ui/src/components/organisms/player/parts/credits-card/credits-card.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Minimal shape the credits card needs from the up-next item. Declared locally
+ * (rather than importing `UpNextItem`) so this file never hard-depends on the
+ * sheet module's build order; the orchestrator passes a compatible object.
+ */
+export interface CreditsCardItem {
+    title: string;
+    /** The "kind" line under the title (e.g. "S1 E4" or a genre). */
+    subtitle?: string;
+    posterUrl?: string | null;
+}
+export interface CreditsCardProps {
+    item: CreditsCardItem;
+    /** Remaining whole seconds before autoplay (e.g. 5..0). */
+    secondsLeft: number;
+    /** Countdown length the ring drains against (e.g. 5). */
+    total: number;
+    playFocused: boolean;
+    cancelFocused: boolean;
+    /** The chrome's scale (see ../lib/metrics). 1 on a television stage. */
+    scale?: number;
+    onPlay: () => void;
+    onCancel: () => void;
+}
+export declare function CreditsCard({ item, secondsLeft, total, playFocused, cancelFocused, scale, onPlay, onCancel, }: Readonly<CreditsCardProps>): import("react").JSX.Element;

package/types/ui/src/components/organisms/player/parts/credits-card/index.d.ts

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

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

@@ -0,0 +1,39 @@
+import type { ColorToken } from '#ui/core';
+type P = Readonly<{
+    size?: number;
+    thickness?: number;
+    color?: ColorToken | (string & {});
+}>;
+export declare const IconPlay: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconPause: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconBack10: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconFwd10: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconNext: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconVolHigh: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconVolLow: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconVolMin: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconMute: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconSubtitles: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconAudioTrack: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconGear: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconPip: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconCast: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconFullscreen: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconFullscreenExit: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconForward: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconExpand: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconCollapse: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconClose: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconOk: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconAi: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconDelete: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconStats: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconQuality: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconAudioFilter: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconAppearance: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconSpeed: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconReport: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconStop: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconEndsAt: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export declare const IconRestart: ({ size, thickness, color }: P) => import("react").JSX.Element;
+export {};

package/types/ui/src/components/organisms/player/parts/post-play/index.d.ts

@@ -0,0 +1 @@
+export { POST_PLAY_ART_W, PostPlay, type PostPlayFocus, type PostPlayItem } from './post-play';

package/types/ui/src/components/organisms/player/parts/post-play/post-play.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The film offered once this one is over. Declared here rather than reusing
+ * `UpNextItem` because a full-bleed hero wants what a card does not: art at
+ * stage width, a rating and a synopsis.
+ */
+export interface PostPlayItem {
+    id: string;
+    title: string;
+    /** The line under the title: year, runtime, codec, already formatted. */
+    subtitle?: string;
+    /** Out of ten. Drawn as its own amber mark ahead of {@link subtitle}. */
+    rating?: number | null;
+    /** Synopsis. Drawn in at most three lines. */
+    overview?: string | null;
+    /** Wide art, requested at {@link POST_PLAY_ART_W}. */
+    artUrl?: string | null;
+}
+export type PostPlayFocus = 'play' | 'home';
+export interface PostPlayProps {
+    item: PostPlayItem;
+    /** The film that just ended, named at the top so the screen says where the
+     *  viewer is before it says where they could go. */
+    finished: string;
+    /** Which control wears the ring. The player's nav machine owns it, so both
+     *  buttons are controlled and neither is a platform focus target. */
+    focus: PostPlayFocus;
+    /** The stage's width, which is what picks the type tier: this is a page
+     *  rather than chrome, so it is typed for three metres or for a desk. */
+    stageWidth: number;
+    onPlay: () => void;
+    onHome: () => void;
+}
+/** The width the hero is drawn at, and so the width to ask the server for. */
+export declare const POST_PLAY_ART_W = 1920;
+/**
+ * The end of a film (§10): a full screen naming what just finished, offering
+ * the next one to watch, and holding the way back to the home screen. It
+ * replaces the chrome rather than sitting over it, and it is the only thing the
+ * remote can reach while it is up.
+ */
+export declare function PostPlay({ item, finished, focus, stageWidth, onPlay, onHome, }: Readonly<PostPlayProps>): import("react").JSX.Element;

package/types/ui/src/components/organisms/player/parts/post-play/rise.d.ts

@@ -0,0 +1,12 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+export declare const RISE_MS = 420;
+export declare const RISE_PX = 26;
+export interface Rise {
+    /** The art and its scrims, fading up from black. */
+    veil: StyleProp<ViewStyle>;
+    /** The copy, arriving a little from below. */
+    copy: StyleProp<ViewStyle>;
+}
+/** A film does not cut to a menu: the art fades up and the copy settles into
+ * it. Both belong on an `Animated.View`, since they carry an `Animated.Value`. */
+export declare function useRise(): Rise;

package/types/ui/src/components/organisms/player/parts/post-play/rise.web.d.ts

@@ -0,0 +1,10 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+export declare const RISE_MS = 420;
+export declare const RISE_PX = 26;
+export interface Rise {
+    veil: StyleProp<ViewStyle>;
+    copy: StyleProp<ViewStyle>;
+}
+/** A film does not cut to a menu: the art fades up and the copy settles into
+ * it. Plain styles, so they ride on the `Animated.View` the native half needs. */
+export declare function useRise(): Rise;

package/types/ui/src/components/organisms/player/parts/seek-bar/index.d.ts

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

package/types/ui/src/components/organisms/player/parts/seek-bar/seek-bar.d.ts

@@ -0,0 +1,22 @@
+import type { Chapter } from '#ui/components/organisms/player/types';
+import type { StoryboardTile } from '#ui/services/storyboard';
+export interface SeekBarProps {
+    cur: number;
+    dur: number;
+    /** How far ahead the backend holds, in absolute seconds. `null` when it has
+     *  none to report, and then the track carries no buffered fill at all. */
+    bufEnd: number | null;
+    seekPreview: number | null;
+    /** Empty = one continuous segment over the whole runtime. */
+    chapters: Chapter[];
+    tileAt: (sec: number) => StoryboardTile | null;
+    focused: boolean;
+    elapsed: string;
+    chapterLabel?: string;
+    total: string;
+    endsAt: string;
+    scale?: number;
+    onScrub: (sec: number) => void;
+    onScrubCommit: () => void;
+}
+export declare function SeekBar({ cur, dur, bufEnd, seekPreview, chapters, tileAt, focused, elapsed, chapterLabel, total, endsAt, scale, onScrub, onScrubCommit, }: Readonly<SeekBarProps>): import("react").JSX.Element;

package/types/ui/src/components/organisms/player/parts/settings-panel/index.d.ts

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

package/types/ui/src/components/organisms/player/parts/settings-panel/settings/audio-filter-panel.d.ts

@@ -0,0 +1,11 @@
+import type { PanelHandle } from '#ui/components/organisms/player/lib/nav';
+import type { AudioFilterMode } from '#ui/components/organisms/player/types';
+interface AudioFilterPanelProps {
+    value: AudioFilterMode;
+    onSelect: (mode: AudioFilterMode) => void;
+    onBack: () => void;
+}
+/** Volume-normalizer picker (§7): Off / Standard / Night, with a hint. Only
+ * mounted when the controller reports `audioFilterSupported`. */
+export declare const AudioFilterPanel: import("react").ForwardRefExoticComponent<AudioFilterPanelProps & import("react").RefAttributes<PanelHandle>>;
+export {};

package/types/ui/src/components/organisms/player/parts/settings-panel/settings/audio-panel.d.ts

@@ -0,0 +1,11 @@
+import type { AudioTrack } from '@kroma/client/media';
+import type { PanelHandle } from '#ui/components/organisms/player/lib/nav';
+interface AudioPanelProps {
+    tracks: AudioTrack[];
+    current: number;
+    onSelect: (index: number) => void;
+    onBack: () => void;
+}
+/** Audio-track picker (§5). */
+export declare const AudioPanel: import("react").ForwardRefExoticComponent<AudioPanelProps & import("react").RefAttributes<PanelHandle>>;
+export {};

package/types/ui/src/components/organisms/player/parts/settings-panel/settings/entries.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import type { ControlId } from '#ui/components/organisms/player/lib/nav';
+import type { PlayerController } from '#ui/components/organisms/player/types';
+import type { useT } from '#ui/services/i18n';
+type T = ReturnType<typeof useT>;
+/** The sub-views the menu can open. `menu` is the list itself; the toggles
+ *  (statistics) act in place and never become a view. */
+export type View = 'menu' | 'quality' | 'engine' | 'audio' | 'audioFilter' | 'subtitles' | 'appearance' | 'speed' | 'report';
+/** One main-menu row: a sub-view to open, a switch to flip, or a control the
+ *  transport row could not fit. */
+export interface Entry {
+    id: View | 'stats' | ControlId;
+    icon: ReactNode;
+    label: string;
+    value?: ReactNode;
+    toggle?: boolean;
+    on?: boolean;
+    activate: () => void;
+}
+/** The controls the transport row had no room for. Volume is a toggle because
+ *  that is what activating it does (mute), not a sub-view. */
+export declare function movedEntries(t: T, ids: readonly ControlId[], at: Readonly<{
+    muted: boolean;
+    onControl?: (id: ControlId) => void;
+}>): Entry[];
+/** Every setting the panel offers, in the order it is read. */
+export declare function menuEntries(t: T, c: PlayerController, at: Readonly<{
+    statsOn: boolean;
+    onToggleStats: () => void;
+    canReport: boolean;
+    go: (view: View) => void;
+}>): Entry[];
+/** The panel's title: the menu's own, or the row that opened the sub-view. */
+export declare function panelTitle(view: View, entries: readonly Entry[], t: T): string;
+export {};

package/types/ui/src/components/organisms/player/parts/settings-panel/settings/gen.d.ts

@@ -0,0 +1,24 @@
+import type { SubCapabilities, SubtitleGeneration } from '@kroma/client/subtitles';
+/** The request {@link GenerateWizard} emits; the platform adapter maps it to its own
+ * `subtitles.generate` call, so the shared chrome never imports an API client. */
+export interface SubtitleGenRequest {
+    mode: 'transcribe' | 'translate';
+    /** Spoken language to transcribe (transcribe mode). */
+    lang?: string;
+    /** Source subtitle track index (translate mode). */
+    sourceIndex?: number;
+    /** Whisper model tier (transcribe mode). */
+    quality?: 'fast' | 'balanced' | 'accurate';
+}
+/** Everything the Subtitles panel needs to drive generation, kept prop-driven so
+ * `@kroma/ui` stays engine- and client-agnostic. */
+export interface SubtitleGenBundle {
+    canCreate: boolean;
+    caps: SubCapabilities | null;
+    /** Running and recently-finished generations. */
+    pending: SubtitleGeneration[];
+    onCancel: (id: string) => void;
+    onDelete: (subId: string) => void;
+    onStart: (req: SubtitleGenRequest) => void;
+}
+export type { PlayerSub } from '#ui/components/organisms/player/types';

package/types/ui/src/components/organisms/player/parts/settings-panel/settings/generate-wizard.d.ts

@@ -0,0 +1,18 @@
+import { type SubCapabilities } from '@kroma/client/subtitles';
+import type { PanelHandle } from '#ui/components/organisms/player/lib/nav';
+import type { PlayerSub } from '#ui/components/organisms/player/types';
+import type { SubtitleGenRequest } from './gen';
+interface GenerateWizardProps {
+    caps: SubCapabilities | null;
+    sources: PlayerSub[];
+    onStart: (req: SubtitleGenRequest) => void;
+    onClose: () => void;
+}
+/**
+ * The on-device subtitle-generation form (§5), prop-driven so @kroma/ui stays
+ * client-agnostic. Mode tabs pick transcribe (Whisper) / translate (LLM); ▲▼ move
+ * between cycle fields, ◀▶ change the focused field, OK on the last row emits a
+ * {@link SubtitleGenRequest} and closes. Modes are gated by `caps`.
+ */
+export declare const GenerateWizard: import("react").ForwardRefExoticComponent<GenerateWizardProps & import("react").RefAttributes<PanelHandle>>;
+export {};

package/types/ui/src/components/organisms/player/parts/settings-panel/settings/menu-list.d.ts

@@ -0,0 +1,9 @@
+import type { Entry } from './entries';
+export declare function MenuList({ entries, moved, focused, onFocus, px, }: Readonly<{
+    entries: readonly Entry[];
+    moved: number;
+    focused: number;
+    onFocus: (index: number) => () => void;
+    /** The chrome's scaler (see ../../lib/metrics). */
+    px: (n: number) => number;
+}>): import("react").JSX.Element;

package/types/ui/src/components/organisms/player/parts/settings-panel/settings/menu-row.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import { type ViewStyle } from 'react-native';
+export declare function MenuRow({ icon, label, value, toggle, on, focused, style, onActivate, onFocus, }: Readonly<{
+    icon: ReactNode;
+    label: string;
+    value?: ReactNode;
+    toggle?: boolean;
+    on?: boolean;
+    focused: boolean;
+    /** Placement only (the menu uses it to open a gap between two groups of
+     *  rows). The row's own look stays here. */
+    style?: ViewStyle;
+    onActivate: () => void;
+    onFocus: () => void;
+}>): import("react").JSX.Element;

package/types/ui/src/components/organisms/player/parts/settings-panel/settings/panel-style.d.ts

@@ -0,0 +1,99 @@
+/**
+ * Shared style atoms for the settings sub-panels.
+ *
+ * Focus is state-driven: a row picks its `*On` / `*Off` style from a boolean,
+ * never from CSS `:hover` or `:focus`.
+ *
+ * The `On` styles carry the lift as well as the ring, the same step <Focusable>
+ * takes: the ring stands off the row and the row below it, drawn later, would
+ * otherwise paint over that side of it.
+ *
+ * One live set rather than a constant per name: `styles()` re-resolves against
+ * the active theme, so the focus ring and the inks follow a swap. A bag of
+ * module constants would keep the palette of module-load time.
+ */
+import type { ViewStyle } from 'react-native';
+export declare const panel: import("../../../../../../core/styles").Styles<{
+    readonly panelList: {
+        readonly gap: 10;
+    };
+    readonly selectRow: {
+        readonly w: '100%';
+        readonly row: true;
+        readonly align: 'center';
+        readonly radius: 'xl';
+        readonly px: 22;
+        readonly py: 18;
+        readonly gap: 16;
+    };
+    readonly selectLabel: {
+        readonly text: "labelTv";
+        readonly color: "text";
+    };
+    readonly selectSub: {
+        readonly text: "metaTv";
+        readonly mt: 2;
+        readonly color: "text/50";
+    };
+    readonly menuRow: {
+        readonly w: '100%';
+        readonly row: true;
+        readonly align: 'center';
+        readonly radius: 'xl';
+        readonly px: 22;
+        readonly py: 18;
+        readonly gap: 18;
+    };
+    readonly menuLabel: {
+        readonly text: "strongTv";
+        readonly color: "text";
+    };
+    readonly menuValue: {
+        readonly text: "metaTv";
+        readonly mt: 2;
+        readonly color: "text/50";
+    };
+    readonly valueRow: {
+        readonly radius: "xl";
+        readonly px: 22;
+        readonly py: 16;
+    };
+    readonly valueRowOn: {
+        readonly bg: "tint/8";
+        readonly ring: "focusLift";
+        readonly z: 1;
+    };
+    readonly valueLabel: {
+        readonly text: "sectionTv";
+        readonly color: "text";
+    };
+    readonly panelHint: {
+        readonly mt: 12;
+        readonly mx: 2;
+        readonly text: "captionTv";
+        readonly color: "text/50";
+    };
+    readonly panelEmpty: {
+        readonly px: 2;
+        readonly py: 4;
+        readonly text: "captionTv";
+        readonly color: "textDim";
+    };
+    readonly rowOn: {
+        readonly bg: "tint/10";
+        readonly ring: "focusLift";
+        readonly z: 1;
+    };
+    readonly rowOff: {
+        readonly bg: "transparent";
+    };
+    readonly pill: {
+        readonly radius: "sm";
+        readonly py: 9;
+        readonly bg: "tint/6";
+    };
+    readonly pillLabel: {
+        readonly text: "footnoteTv";
+    };
+}>;
+export declare const rowStyle: (base: ViewStyle, on: ViewStyle, focused: boolean) => ViewStyle[];

package/types/ui/src/components/organisms/player/parts/settings-panel/settings/quality-panel.d.ts

@@ -0,0 +1,16 @@
+import type { PanelHandle } from '#ui/components/organisms/player/lib/nav';
+import type { PlayerQuality } from '#ui/components/organisms/player/types';
+interface QualityPanelProps {
+    qualities: PlayerQuality[];
+    current: string;
+    onSelect: (id: string) => void;
+    /** Return to the settings menu (Back, or after a pick). */
+    onBack: () => void;
+}
+/**
+ * Quality picker (§5). The server is remux-only, so this reflects the honest
+ * source ("Auto · <source>") rather than a fake ladder. Picking a quality selects
+ * it and returns to the menu.
+ */
+export declare const QualityPanel: import("react").ForwardRefExoticComponent<QualityPanelProps & import("react").RefAttributes<PanelHandle>>;
+export {};

package/types/ui/src/components/organisms/player/parts/settings-panel/settings/report-panel.d.ts

@@ -0,0 +1,8 @@
+import type { ReportCategory } from '@kroma/client/reports';
+import type { PanelHandle } from '#ui/components/organisms/player/lib/nav';
+interface ReportPanelProps {
+    onReport: (category: ReportCategory) => Promise<void>;
+    onBack: () => void;
+}
+export declare const ReportPanel: import("react").ForwardRefExoticComponent<ReportPanelProps & import("react").RefAttributes<PanelHandle>>;
+export {};

package/types/ui/src/components/organisms/player/parts/settings-panel/settings/select-row.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+/**
+ * One row of a settings sub-list (Quality / Audio / Subtitles / Speed / audio
+ * filter): a label, an optional sub-line, an accent check when it is the current
+ * value, and an optional trailing control.
+ *
+ * Focus is the `focused` PROP, not CSS state: the panel's list navigation owns
+ * which row is current, and a pointer entering a row moves that selection
+ * exactly as the D-pad would (§15).
+ */
+export declare function SelectRow({ index, label, sub, selected, focused, onActivate, onFocus, leading, trailing, }: Readonly<{
+    index: number;
+    label: ReactNode;
+    sub?: ReactNode;
+    selected?: boolean;
+    focused: boolean;
+    onActivate: (index: number) => void;
+    onFocus: (index: number) => void;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+}>): import("react").JSX.Element;