@kromatv/sdk 0.1.39-canary.3579809

package/types/ui/src/components/organisms/drawer/drawer-slide.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+declare const SLIDE_MS: 400;
+type DrawerSide = 'left' | 'right';
+/** Where the slide is between mounted and shown: `mounted` keeps the panel in
+ *  the tree for the exit, `shown` drives the transform, one frame late on enter
+ *  so the transition has an off-screen start to play from. */
+declare function useSlide(open: boolean): {
+    mounted: boolean;
+    shown: boolean;
+};
+interface SlidePanelProps {
+    shown: boolean;
+    side: DrawerSide;
+    width: number;
+    inset: number;
+    children: ReactNode;
+}
+declare function SlidePanel({ shown, side, width, inset, children }: Readonly<SlidePanelProps>): import("react").JSX.Element;
+declare const FADE: import("../../../core/types").AnyStyle;
+export type { DrawerSide };
+export { FADE, SLIDE_MS, SlidePanel, useSlide };

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

@@ -0,0 +1,66 @@
+import { type ReactNode } from 'react';
+import { type ViewStyle } from 'react-native';
+import { type SurfaceWidth } from '#ui/lib/surface-shell';
+import { Close, Footer, Header, Panel } from './drawer-parts';
+import { type DrawerSide } from './drawer-slide';
+interface DrawerRootProps {
+    open: boolean;
+    onClose?: () => void;
+    /** The sheet's accessible name, and the title of the header the Root draws
+     *  when no <Drawer.Header> was composed. */
+    title: string;
+    side?: DrawerSide;
+    /** The sheet's step on the kit's width ladder, named for the densest thing it
+     *  holds rather than measured in pixels. See {@link SURFACE_WIDTH}. */
+    width?: SurfaceWidth;
+    /** Viewport width under which the panel takes the whole screen (the phone
+     *  nav sheet). 0 keeps the fixed width everywhere. */
+    fullBelow?: number;
+    /** Held off the screen's edges with every corner rounded; ignored under `fullBelow`. */
+    floating?: boolean;
+    /** Surface overrides (a nav sheet's darker fill), merged over the panel. */
+    panelStyle?: ViewStyle;
+    /** Horizontal padding shared by the three bands. 0 hands the surface to
+     *  content that owns its own layout (a navigation sheet). */
+    pad?: number;
+    /** The sheet's bands: a `<Drawer.Header>`, a `<Drawer.Panel>` and a
+     *  `<Drawer.Footer>`, each optional. Anything else is the panel's content. */
+    children?: ReactNode;
+}
+declare function Root({ open, onClose, title, side, width, fullBelow, floating, panelStyle, pad, children, }: Readonly<DrawerRootProps>): import("react").JSX.Element | null;
+/**
+ * The edge-anchored sheet. `title` names it to assistive tech and draws the
+ * ordinary header; the parts arrange a sheet that needs a header of its own:
+ *
+ * ```tsx
+ * <Drawer.Root open={open} onClose={close} title="Edit registry">…</Drawer.Root>
+ *
+ * <Drawer.Root open={open} onClose={close} title="Edit registry">
+ *   <Drawer.Header>
+ *     <Row between>
+ *       <Text variant="h2">Edit registry</Text>
+ *       <Drawer.Close />
+ *     </Row>
+ *   </Drawer.Header>
+ *   <Drawer.Panel>…</Drawer.Panel>
+ *   <Drawer.Footer>…</Drawer.Footer>
+ * </Drawer.Root>
+ * ```
+ *
+ * Either way only `Panel` scrolls, through a `ScrollView` that works on a
+ * television and a phone as well as in a browser; the header and the footer
+ * stay put behind a hairline. `Close` carries the Root's `onClose`, so a header
+ * of your own keeps the way out the default one draws. A part is found
+ * only as a DIRECT child of the Root, so a header built by a component of your
+ * own is wrapped at the call site rather than returning `<Drawer.Header>`
+ * itself.
+ */
+declare const Drawer: {
+    Root: typeof Root;
+    Header: typeof Header;
+    Panel: typeof Panel;
+    Footer: typeof Footer;
+    Close: typeof Close;
+};
+export type { DrawerRootProps, DrawerSide };
+export { Drawer };

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

@@ -0,0 +1,2 @@
+export * from './drawer';
+export type { DrawerBandProps, DrawerCloseProps } from './drawer-parts';

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

@@ -0,0 +1,33 @@
+export type { ChartAxisProps, ChartBarProps, ChartCurve, ChartEdge, ChartFooterProps, ChartGridProps, ChartMarkProps, ChartPoint, ChartRootProps, ChartTraceProps, } from './chart';
+export { Chart } from './chart';
+export type { CodeBlockProps } from './code-block';
+export { CodeBlock } from './code-block';
+export type { CommandInputProps, CommandItem, CommandResults, CommandRootProps, CommandSection, } from './command';
+export { COMMAND_METRICS, Command, useCommandResults } from './command';
+export type { ConfirmDialogProps, ConfirmOptions, DialogActionsProps, DialogRootProps, } from './dialog';
+export { ConfirmDialog, ConfirmHost, Dialog, useConfirm } from './dialog';
+export type { DrawerBandProps, DrawerCloseProps, DrawerRootProps, DrawerSide } from './drawer';
+export { Drawer } from './drawer';
+export type { KeyboardLayout, KeyboardSize, KeyProps, SearchKeyboardProps, UrlKeyboardProps, } from './keyboard';
+export { DELETE_KEY, KEYBOARD_LAYOUTS, Key, keyRowWidth, LAYOUT_LETTER_ROWS, SearchKeyboard, URL_ROWS, UrlKeyboard, } from './keyboard';
+export type { KromaIntroProps } from './kroma-intro';
+export { KromaIntro } from './kroma-intro';
+export type { MenuDismissReason, MenuItemProps, MenuOpenDetails, MenuOpenReason, MenuRootProps, MenuTone, MenuTriggerBind, MenuTriggerProps, } from './menu';
+export { Menu } from './menu';
+export type { NearbyTvListProps } from './nearby-tv-list';
+export { NearbyTvList } from './nearby-tv-list';
+export { PerfHud } from './perf-hud';
+export type { RailListProps, RailRootProps, RailTitleProps } from './rail';
+export { RAIL_GAP, Rail } from './rail';
+export type { ResizableHandleProps, ResizableLayoutDetails, ResizablePanelDetails, ResizablePanelProps, ResizablePanelState, ResizableRootProps, ResizableSize, ResizableStorage, } from './resizable';
+export { Resizable, useResizablePanel } from './resizable';
+export type { SelectionBarActionsProps, SelectionBarItemProps, SelectionBarPlacement, SelectionBarRootProps, SelectionBarSelectAllProps, SelectionBarTone, } from './selection-bar';
+export { SelectionBar } from './selection-bar';
+export type { SplashBackdropProps, SplashCover } from './splash-backdrop';
+export { SplashBackdrop } from './splash-backdrop';
+export type { SortColumn, SortDirection, TableCellProps, TableColumn, TableRootProps, TableRowProps, TableSectionProps, TableVariant, } from './table';
+export { Table } from './table';
+export type { ToasterProps, ToastOptions, ToastPosition } from './toast';
+export { Toaster, toast } from './toast';
+export type { VirtualGridProps, VirtualRailProps } from './virtual';
+export { VirtualGrid, VirtualRail } from './virtual';

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

@@ -0,0 +1,8 @@
+export type { KeyboardSize, KeyProps } from './key';
+export { Key, keyRowWidth } from './key';
+export type { KeyboardLayout } from './keyboard-layouts';
+export { DELETE_KEY, KEYBOARD_LAYOUTS, LAYOUT_LETTER_ROWS, URL_ROWS } from './keyboard-layouts';
+export type { SearchKeyboardProps } from './search-keyboard';
+export { SearchKeyboard } from './search-keyboard';
+export type { UrlKeyboardProps } from './url-keyboard';
+export { UrlKeyboard } from './url-keyboard';

package/types/ui/src/components/organisms/keyboard/key.d.ts

@@ -0,0 +1,57 @@
+import { type StyleDecl } from '#ui/core';
+import type { TextStyle, ViewStyle } from 'react-native';
+import { type IconName, type IconProps } from '#ui/components/atoms/icon';
+/** A keyboard's scale: `sm` is arm's length, `tv` is across a room. */
+type KeyboardSize = 'sm' | 'tv';
+declare function keyMetrics(size: KeyboardSize): {
+    readonly width: 44;
+    readonly height: 48;
+    readonly gap: 8;
+    readonly fontSize: 19;
+    readonly glyph: 22;
+} | {
+    readonly width: 78;
+    readonly height: 74;
+    readonly gap: 12;
+    readonly fontSize: 30;
+    readonly glyph: 34;
+};
+/** The width of a ten-key row: what a grid measures itself against. */
+declare function keyRowWidth(size: KeyboardSize): number;
+declare const face: import("../../../core/types").SvFn<{
+    root: StyleDecl;
+    glyph: Pick<IconProps, 'color' | 'thickness'>;
+    label: StyleDecl;
+}, {
+    readonly size: {
+        sm: {
+            root: {
+                radius: import("#ui/core").RadiusToken;
+            };
+        };
+        tv: {
+            root: {
+                radius: import("#ui/core").RadiusToken;
+            };
+        };
+    };
+}>;
+interface KeyProps {
+    label?: string;
+    icon?: IconName;
+    iconSize?: number;
+    /** What the key stands for, handed back to `onPress`. Defaults to `label`,
+     *  which is enough for a key whose face is the character it types. */
+    value?: string;
+    /** Takes the key's `value`, so one handler serves a whole grid rather than a
+     *  closure per key: that is what keeps the keys out of a keystroke's render. */
+    onPress: (value: string) => void;
+    style?: ViewStyle;
+    textStyle?: TextStyle;
+    /** The grid's scale, which is what the corner is taken from. */
+    size: KeyboardSize;
+    autoFocus?: boolean;
+}
+declare function Key({ label, icon, iconSize, value, onPress, style, textStyle, size, autoFocus, }: Readonly<KeyProps>): import("react").JSX.Element;
+export type { KeyboardSize, KeyProps };
+export { face as keyVariants, Key, keyMetrics, keyRowWidth };

package/types/ui/src/components/organisms/keyboard/keyboard-layouts.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The letter orders a host can ask for.
+ *
+ *  - `abc`    : alphabetical rows (the classic TV grid).
+ *  - `azerty` : French typewriter order.
+ *  - `qwerty` : US/UK typewriter order.
+ *  - `qwertz` : German/Swiss typewriter order.
+ */
+export type KeyboardLayout = 'abc' | 'azerty' | 'qwerty' | 'qwertz';
+/** In picker order. */
+export declare const KEYBOARD_LAYOUTS: readonly KeyboardLayout[];
+export declare const LAYOUT_LETTER_ROWS: Record<KeyboardLayout, readonly (readonly string[])[]>;
+/** The delete key's identity in a layout. A NAME rather than the "\u232B"
+ * glyph: the row is data the renderer reads, and a key that draws an icon
+ * cannot be identified by the character it no longer prints. */
+export declare const DELETE_KEY = "delete";
+/**
+ * Digits row, then the layout's lowercase letters chunked into rows of ten with
+ * the URL specials appended to the tail (26 letters + 4 specials = three even
+ * rows).
+ *
+ * A table rather than the function that builds one: the React Compiler cannot
+ * memoise a call to an imported function, so a keyboard that asked for its rows
+ * through one got a fresh array every render, and rebuilt all forty-odd key
+ * elements with it. A member read off a constant it can hold still.
+ */
+export declare const URL_ROWS: Record<KeyboardLayout, readonly (readonly string[])[]>;

package/types/ui/src/components/organisms/keyboard/search-keyboard/index.d.ts

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

package/types/ui/src/components/organisms/keyboard/search-keyboard/search-keyboard.d.ts

@@ -0,0 +1,19 @@
+import { type KeyboardSize } from '#ui/components/organisms/keyboard/key';
+import { type KeyboardLayout } from '#ui/components/organisms/keyboard/keyboard-layouts';
+interface SearchKeyboardProps {
+    value: string;
+    onValueChange: (next: string) => void;
+    onClose?: () => void;
+    /** Letter order. Defaults to the alphabetical TV grid. */
+    letters?: KeyboardLayout;
+    /** Whether a real keyboard is attached, so typing bypasses the keys. Never
+     *  true on a TV shell; a browser workbench passes it. */
+    physicalKeyboard?: boolean;
+    /** The key scale: `sm` for arm's length, `tv` for across a room. */
+    size?: KeyboardSize;
+}
+/** The caller owns the text value; each key mutates it through
+ * `onValueChange`, and space / delete / close call the matching handler. */
+declare function SearchKeyboard({ value, onValueChange, onClose, letters, physicalKeyboard, size, }: Readonly<SearchKeyboardProps>): import("react").JSX.Element;
+export type { SearchKeyboardProps };
+export { SearchKeyboard };

package/types/ui/src/components/organisms/keyboard/url-keyboard/index.d.ts

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

package/types/ui/src/components/organisms/keyboard/url-keyboard/url-keyboard.d.ts

@@ -0,0 +1,20 @@
+import { type KeyboardSize } from '#ui/components/organisms/keyboard/key';
+import { type KeyboardLayout } from '#ui/components/organisms/keyboard/keyboard-layouts';
+interface UrlKeyboardProps {
+    value: string;
+    onValueChange: (next: string) => void;
+    onSubmit?: () => void;
+    submitLabel?: string;
+    /** Letter order. Defaults to the alphabetical TV grid. */
+    letters?: KeyboardLayout;
+    /** Whether a real keyboard is attached, so typing bypasses the keys. Never
+     *  true on a TV shell; a browser workbench passes it. */
+    physicalKeyboard?: boolean;
+    /** The key scale: `sm` for arm's length, `tv` for across a room. */
+    size?: KeyboardSize;
+}
+/** The caller owns the text value; each key mutates it through
+ * `onValueChange`, and clear / submit call the matching handler. */
+declare function UrlKeyboard({ value, onValueChange, onSubmit, submitLabel, letters, physicalKeyboard, size, }: Readonly<UrlKeyboardProps>): import("react").JSX.Element;
+export type { UrlKeyboardProps };
+export { UrlKeyboard };

package/types/ui/src/components/organisms/keyboard/use-physical-typing.d.ts

@@ -0,0 +1,2 @@
+declare function usePhysicalTyping(value: string, onValueChange: (next: string) => void, physicalKeyboard: boolean): void;
+export { usePhysicalTyping };

package/types/ui/src/components/organisms/kroma-intro/animations.d.ts

@@ -0,0 +1,2 @@
+/** The film's stylesheet, for the `<style>` its shell mounts. */
+export declare const KEYFRAMES: string;

package/types/ui/src/components/organisms/kroma-intro/constants.d.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties } from 'react';
+export declare const DEFAULT_AUDIO: string;
+export declare const VIDEO_SOURCES: readonly [{
+    readonly src: string;
+    readonly type: 'video/mp4; codecs="hvc1.1.6.L153.B0"';
+}];
+export declare const SAFETY_MS = 5400;
+export { EXIT_MS, SAFETY_SLACK_MS } from '#ui/lib/intro-timing';
+export declare const HIDDEN_RECHECKS = 3;
+export declare const GRAIN = "url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/></svg>')";
+export declare const EMBERS: ReadonlyArray<CSSProperties & {
+    anim: string;
+}>;

package/types/ui/src/components/organisms/kroma-intro/css-intro.d.ts

@@ -0,0 +1,12 @@
+export interface CssIntroProps {
+    onDone: () => void;
+    loop?: boolean;
+    tagline?: string;
+    lite?: boolean;
+}
+/**
+ * CSS/DOM fallback intro, used when the video intro cannot play. `lite` (set by
+ * the TV shells) drops the per-frame raster work a weak TV GPU cannot absorb:
+ * animated `filter: blur()`, the `mix-blend-mode` grain and the sheen.
+ */
+export declare function CssIntro({ onDone, loop, tagline, lite }: Readonly<CssIntroProps>): import("react").JSX.Element;

package/types/ui/src/components/organisms/kroma-intro/index.d.ts

@@ -0,0 +1,3 @@
+export { EXIT_MS, SAFETY_SLACK_MS } from './constants';
+export type { KromaIntroProps } from './kroma-intro';
+export { KromaIntro } from './kroma-intro';

package/types/ui/src/components/organisms/kroma-intro/intro-scene.d.ts

@@ -0,0 +1,21 @@
+export interface IntroSceneProps {
+    /** React key bump restarts every CSS animation from frame 0 on replay. */
+    runId: number;
+    /** Performance mode for weak TV GPUs (see {@link KromaIntroProps.lite}). */
+    lite: boolean;
+    showTagline: boolean;
+    tagline: string;
+}
+/**
+ * The animated visual layers of the intro: the official lockup with its
+ * wheel-O as the mark (glow → segments ignite while the wheel spins into
+ * place → hub-glow pulse → impact flash + shockwave + scale punch → the
+ * outlined KR / MA letterforms reveal → tagline, plus embers / vignette /
+ * grain). Everything is SVG outlines from the brand export, no webfont.
+ * Pure presentation: it owns no timers or audio the parent {@link KromaIntro}
+ * mounts it only once the synced timeline has started.
+ *
+ * `lite` keeps everything on the compositor (opacity + transform), drops the
+ * blur/blend raster, and shrinks the big layers.
+ */
+export declare function IntroScene({ runId, lite, showTagline, tagline }: Readonly<IntroSceneProps>): import("react").JSX.Element;

package/types/ui/src/components/organisms/kroma-intro/intro-shell.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface IntroShellProps {
+    exiting: boolean;
+    children: ReactNode;
+}
+/**
+ * The full-screen frame both intros render into. Framework-free (plain inline
+ * styles) so it renders identically on the web SSR shell and on old TV webviews.
+ */
+export declare function IntroShell({ exiting, children }: Readonly<IntroShellProps>): import("react").JSX.Element;

package/types/ui/src/components/organisms/kroma-intro/kroma-film.d.ts

@@ -0,0 +1,33 @@
+/**
+ * KROMA cinematic brand intro: the bundled 4K60 HEVC film, full-screen with
+ * sound, shared by every client. Anything without an HEVC decoder falls back
+ * to the pure-CSS scene in {@link CssIntro}.
+ *
+ * Browsers block autoplay-with-sound until a user gesture, so playback tries
+ * with sound first and falls back to muted; the first pointer/key interaction
+ * unmutes in place, rewinding only if the film has barely started (so an
+ * early gesture gets picture and sound together, while a late one can't
+ * restart the intro). Any key or remote button skips; a safety timer, armed
+ * from the video's own duration, guarantees the intro ends even if playback
+ * stalls.
+ *
+ * Framework-free (plain inline styles) so it renders identically on the web
+ * SSR shell and on old TV webviews. Mount as a full-screen overlay; `onDone`
+ * hands off to the app.
+ */
+export interface KromaIntroProps {
+    /** Called once the intro has finished (video ended or skipped). */
+    onDone: () => void;
+    /** Single-source override for the intro film. Defaults to the bundled
+     * 4K60 HEVC film. */
+    videoSrc?: string;
+    /** Loop forever instead of ending (preview/idle-screen use). */
+    loop?: boolean;
+    /** Optional tagline overlaid during the film's final seconds. None by default:
+     * the film ends on the bare lockup. */
+    tagline?: string;
+    /** Performance mode for weak TV GPUs. The video path decodes in hardware and
+     * ignores it; the CSS fallback uses it to stay compositor-only. */
+    lite?: boolean;
+}
+export declare function KromaFilm(props: Readonly<KromaIntroProps>): import("react").JSX.Element;

package/types/ui/src/components/organisms/kroma-intro/kroma-intro.d.ts

@@ -0,0 +1,4 @@
+import { type KromaIntroProps } from './kroma-film';
+export type { KromaIntroProps };
+/** The brand film over the whole viewport; native shells play it through their own player, so it renders nothing there. */
+export declare function KromaIntro(props: Readonly<KromaIntroProps>): import("react").JSX.Element;

package/types/ui/src/components/organisms/kroma-intro/use-intro-exit.d.ts

@@ -0,0 +1,21 @@
+import { type RefObject } from 'react';
+export interface IntroExit {
+    exiting: boolean;
+    exitedRef: RefObject<boolean>;
+    /** (Re-)arms the stall-safety timer: `run` fires once, `ms` from now. Arming
+     *  replaces the previous timer; `exit` and `reopen` clear it. */
+    armSafety: (ms: number, run: () => void) => void;
+    /** Drops the safety timer without exiting (a looping intro never stalls out). */
+    disarmSafety: () => void;
+    exit: () => void;
+    reopen: () => void;
+    clearTimers: () => void;
+}
+/**
+ * Single-shot end-of-intro lifecycle: `exit()` fades to black and hands off to
+ * `onDone` one {@link EXIT_MS} later, at most once per run. The hand-off is a
+ * timer rather than a transition callback because TV webviews drop
+ * `transitionend`; `onDone` is read through a ref so mount-only effects in the
+ * caller never re-run and restart the intro.
+ */
+export declare function useIntroExit(onDone: () => void): IntroExit;

package/types/ui/src/components/organisms/kroma-intro/use-intro-keys.d.ts

@@ -0,0 +1,19 @@
+export interface IntroKeysParams {
+    /** Skip to the app: OK/Enter, Space, Back/Escape. */
+    exit: () => void;
+    /** Restart the run from frame 0 (the `r` key, for tuning the choreography). */
+    replay: () => void;
+    /** First pointer/key of the session. Browsers block autoplay-with-sound until
+     * a user gesture, so this is where each intro un-blocks its own audio. */
+    unblock: () => void;
+}
+/**
+ * The intro's input layer: the skip / replay keys plus the autoplay-unblock
+ * gesture, registered once for the life of the intro.
+ *
+ * Skip keys are taken on the capture phase at `window` so the TV's spatial
+ * focus-nav underneath stays inert, and `stopImmediatePropagation` means a skip
+ * key never also reaches `unblock` (skipping must not restart anything).
+ * One stable pair of listeners calls the latest closures.
+ */
+export declare function useIntroKeys({ exit, replay, unblock }: IntroKeysParams): void;

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

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

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

@@ -0,0 +1,33 @@
+import { type RefObject } from 'react';
+import type { View } from 'react-native';
+/** Why the menu closed. `back` is the remote's Back button (and, in a browser
+ *  TV shell, the key it arrives as). */
+type MenuDismissReason = 'select' | 'outside' | 'escape' | 'back';
+type MenuOpenReason = 'trigger' | MenuDismissReason;
+interface MenuOpenDetails {
+    reason: MenuOpenReason;
+}
+interface MenuState {
+    open: boolean;
+    label: string | undefined;
+    anchor: RefObject<View | null>;
+    setOpen: (open: boolean, reason: MenuOpenReason) => void;
+}
+declare const MenuContext: import("react").Context<MenuState | null>, useMenu: (part: string) => MenuState;
+interface MenuRowState {
+    presentation: 'panel' | 'dialog';
+    nativeID?: string;
+    active: boolean;
+    entry?: boolean;
+    /** Whether the keys put the highlight here rather than a cursor sweeping
+     *  past: the ring is the keyboard's, the wash is the pointer's. */
+    keyed?: boolean;
+    onHoverIn?: () => void;
+    /** Closes the menu and runs the item's `onSelect`, in that order. The
+     *  keyboard fires the same one. */
+    fire: () => void;
+}
+declare const MenuRowContext: import("react").Context<MenuRowState | null>;
+declare function useMenuRow(part: string): MenuRowState;
+export type { MenuDismissReason, MenuOpenDetails, MenuOpenReason, MenuRowState, MenuState };
+export { MenuContext, MenuRowContext, useMenu, useMenuRow };

package/types/ui/src/components/organisms/menu/menu-item.d.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+import { type IconName } from '#ui/components/atoms/icon';
+declare const menuItemVariants: import("../../../core/types").SvFn<import("../../../core/types").StyleSlots<{
+    root: {
+        row: true;
+        align: "center";
+        gap: number;
+        px: number;
+        py: number;
+        radius: "md";
+        _hover: {
+            bg: "tint/7";
+        };
+    };
+    ink: {
+        color: string;
+    };
+}>, {
+    readonly danger: {
+        readonly true: {
+            readonly root: {
+                readonly _hover: {
+                    readonly bg: "danger/14";
+                };
+            };
+            readonly ink: {
+                readonly color: "danger";
+            };
+        };
+    };
+}>;
+type MenuTone = 'default' | 'danger';
+interface MenuItemProps {
+    /** The row. A plain string child IS the label; anything else is the row
+     *  itself, and then `label` is what assistive tech and the type-ahead read.
+     *  Under `asChild` it is instead the one element the row renders as, whose own
+     *  children take this place. */
+    children?: ReactNode;
+    label?: string;
+    icon?: IconName;
+    /** What picking the row does. Optional only for a row that delegates, and a
+     *  delegating row that must also work under a D-pad states both: the dialog
+     *  presentation renders no link. */
+    onSelect?: () => void;
+    disabled?: boolean;
+    /** Render onto the one element the children name, so the row is a real link.
+     *  Ignored in the dialog presentation, as on any control. */
+    asChild?: boolean;
+    /** `danger` is the destructive tail of the list: red ink, red wash. */
+    tone?: MenuTone;
+}
+declare function labelOf(props: Readonly<MenuItemProps>): string;
+declare function Item(props: Readonly<MenuItemProps>): import("react").JSX.Element;
+/** A rule between two groups of actions. */
+declare function Separator(): import("react").JSX.Element;
+export type { MenuItemProps, MenuTone };
+export { Item, labelOf, menuItemVariants, Separator };

package/types/ui/src/components/organisms/menu/menu-surface-dialog.d.ts

@@ -0,0 +1,25 @@
+import { type ReactElement, type RefObject } from 'react';
+import type { View } from 'react-native';
+import type { SurfacePresentation } from '#ui/lib/surface-presentation';
+import { type MenuDismissReason } from './menu-context';
+/** One actionable row, in the order the items were written. `at` is the
+ *  position among the ENTRIES, which count the separators too. `select` is
+ *  absent on a row that delegates, whose link is what activation reaches. */
+export interface MenuRowSpec {
+    at: number;
+    label: string;
+    disabled: boolean;
+    select?: () => void;
+}
+export interface MenuSurfaceProps {
+    open: boolean;
+    presentation: SurfacePresentation;
+    label: string | undefined;
+    /** The <Menu.Item> and <Menu.Separator> elements, in order. */
+    entries: readonly ReactElement[];
+    rows: readonly MenuRowSpec[];
+    align: 'start' | 'end';
+    onDismiss: (reason: MenuDismissReason) => void;
+    anchor: RefObject<View | null>;
+}
+export declare function MenuSurfaceDialog({ open, onDismiss, label, entries, rows, }: Readonly<MenuSurfaceProps>): import("react").JSX.Element;

package/types/ui/src/components/organisms/menu/menu-surface.d.ts

@@ -0,0 +1,3 @@
+import { type MenuSurfaceProps } from './menu-surface-dialog';
+declare function MenuSurface(props: Readonly<MenuSurfaceProps>): import("react").JSX.Element | null;
+export { MenuSurface };

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

@@ -0,0 +1,49 @@
+import { type ReactElement, type ReactNode, type RefObject } from 'react';
+import type { View } from 'react-native';
+import { type IconButtonProps } from '#ui/components/atoms/icon-button';
+import type { SurfacePresentation } from '#ui/lib/surface-presentation';
+import { type MenuDismissReason, type MenuOpenDetails, type MenuOpenReason } from './menu-context';
+import { Item, type MenuItemProps, Separator } from './menu-item';
+type MenuPresentation = SurfacePresentation;
+interface MenuRootProps {
+    /** Names the menu and, unless it names itself, the trigger. */
+    label?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, details: MenuOpenDetails) => void;
+    /** Which trigger edge the panel hugs. `end` for a right-pinned row action. */
+    align?: 'start' | 'end';
+    /** Where the items appear: `auto` (the default) asks the shell, and then the
+     *  platform - a dialog under a D-pad, an anchored panel under a pointer.
+     *  Naming one overrides both. */
+    presentation?: MenuPresentation;
+    /** A <Menu.Trigger>, then the <Menu.Item>s and <Menu.Separator>s. Only DIRECT
+     *  children take part in the menu. */
+    children: ReactNode;
+}
+declare function Root({ label, open: openProp, defaultOpen, onOpenChange, align, presentation, children, }: Readonly<MenuRootProps>): import("react").JSX.Element;
+interface MenuTriggerBind {
+    ref: RefObject<View | null>;
+    expanded: boolean;
+    onPress: () => void;
+}
+interface MenuTriggerProps extends Omit<IconButtonProps, 'onPress' | 'expanded' | 'ref'> {
+    /** A control of your own in place of the round icon button. Spread `bind`
+     *  onto the PRESSABLE element: it anchors the surface and opens it. */
+    render?: (bind: MenuTriggerBind, state: {
+        open: boolean;
+    }) => ReactElement;
+}
+/** What opens the menu. `children` are the button's FACE, not a control of
+ *  their own - a pressable in there is a second stop for the D-pad; use
+ *  `render` for a trigger the caller owns. */
+declare function Trigger({ render, icon, diameter, variant, label, ...button }: Readonly<MenuTriggerProps>): import("react").JSX.Element;
+declare const Menu: {
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Item: typeof Item;
+    Separator: typeof Separator;
+};
+export type { MenuTone } from './menu-item';
+export type { MenuDismissReason, MenuItemProps, MenuOpenDetails, MenuOpenReason, MenuPresentation, MenuRootProps, MenuTriggerBind, MenuTriggerProps, };
+export { Menu };

package/types/ui/src/components/organisms/nearby-tv-list/index.d.ts

@@ -0,0 +1,2 @@
+export type { NearbyTvListProps } from './nearby-tv-list';
+export { NearbyTvList } from './nearby-tv-list';

package/types/ui/src/components/organisms/nearby-tv-list/nearby-tv-list.d.ts

@@ -0,0 +1,13 @@
+import type { DiscoveredTv } from '@kromatv/core';
+import type { HandoffOutcome } from '@kromatv/core/react';
+import type { Translate } from '@kromatv/i18n';
+export interface NearbyTvListProps {
+    devices: readonly DiscoveredTv[];
+    /** The row a grant is in flight for, if any. */
+    connectingHandle?: string | null;
+    /** How the tap on this row ended, or null while it has not been tapped. */
+    outcomeFor: (device: DiscoveredTv) => HandoffOutcome | null;
+    onSelect: (device: DiscoveredTv) => void;
+    t: Translate;
+}
+export declare function NearbyTvList({ devices, connectingHandle, outcomeFor, onSelect, t, }: Readonly<NearbyTvListProps>): import("react").JSX.Element;

package/types/ui/src/components/organisms/perf-hud/index.d.ts

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

package/types/ui/src/components/organisms/perf-hud/perf-chart.d.ts

@@ -0,0 +1,5 @@
+/** The last frames as a bar chart, newest at the right. */
+declare function PerfChart({ frames }: Readonly<{
+    frames: readonly number[];
+}>): import("react").JSX.Element;
+export { PerfChart };