@kromatv/sdk 0.1.40-canary.0

package/types/spatial-nav/src/react/focus-queue.d.ts

@@ -0,0 +1,16 @@
+import type { SpatialNavigator } from '@kroma/spatial-nav';
+interface FocusQueue {
+    request: (id: string) => void;
+    claim: (id: string) => void;
+    flush: () => void;
+}
+/**
+ * Focus asked for before the tree it names is whole. A node registers in its
+ * mount effect and its parent registers after it, so focus asked for on mount
+ * names a node the navigator cannot reach yet. The request is KEPT until it
+ * lands: the root retries it on every registration, which is the only moment
+ * the tree can have become whole, and after its own renders.
+ */
+declare function focusQueue(navigator: SpatialNavigator): FocusQueue;
+export type { FocusQueue };
+export { focusQueue };

package/types/spatial-nav/src/react/navigator-context.d.ts

@@ -0,0 +1,19 @@
+import type { SpatialNavigator } from '@kroma/spatial-nav';
+interface NavigatorHost {
+    navigator: SpatialNavigator;
+    requestFocus: (id: string) => void;
+    claimFocus: (id: string) => void;
+}
+interface NodeHost {
+    host: NavigatorHost;
+    parentId: string;
+}
+declare const HostContext: import("react").Context<NavigatorHost | null>;
+declare const ParentIdContext: import("react").Context<string | null>;
+declare function useNavigatorHost(): NavigatorHost | null;
+declare function useNodeHost(): NodeHost;
+/** The navigator answering this part of the tree. Throws when nothing above it
+ *  mounted a `<NavigatorRoot>`. */
+declare function useNavigator(): SpatialNavigator;
+export type { NavigatorHost };
+export { HostContext, ParentIdContext, useNavigator, useNavigatorHost, useNodeHost };

package/types/spatial-nav/src/react/navigator-item.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode, Ref } from 'react';
+import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import { type ItemState, type NodeHandle } from './spatial-node';
+interface PointerProps {
+    onMouseEnter?: () => void;
+    onClick?: () => void;
+}
+interface NavigatorItemProps {
+    children: ReactNode | ((state: ItemState) => ReactNode);
+    /** This item's slot among its siblings, the same as a node's. */
+    index?: number;
+    onSelect?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    style?: StyleProp<ViewStyle>;
+    /** Spread onto the inner view, after everything this component puts there,
+     *  so a caller's own role, label or handlers win. */
+    viewProps?: ViewProps & PointerProps;
+    ref?: Ref<NodeHandle>;
+}
+/**
+ * The one thing that takes the focus: a node the navigator can land on, and the
+ * view it draws. Throws with no `<NavigatorRoot>` above it, because a control
+ * that quietly failed to register is one a remote can never reach.
+ */
+declare function NavigatorItem({ children, index, onSelect, onFocus, onBlur, style, viewProps, ref, }: Readonly<NavigatorItemProps>): import("react").JSX.Element;
+export type { NavigatorItemProps };
+export { NavigatorItem };

package/types/spatial-nav/src/react/navigator-node.d.ts

@@ -0,0 +1,27 @@
+import type { Orientation } from '@kroma/spatial-nav';
+import type { ReactNode, Ref } from 'react';
+import { type NodeHandle, type NodeState } from './spatial-node';
+interface NavigatorNodeProps {
+    children: ReactNode | ((state: NodeState) => ReactNode);
+    orientation?: Orientation;
+    alignInGrid?: boolean;
+    /** This node's slot among its siblings. Omitted, it takes the one after the
+     *  highest declared so far, so a tile that remounts at the head of a sliding
+     *  window keeps its place only if it says where that is. */
+    index?: number;
+    onActive?: () => void;
+    onInactive?: () => void;
+    ref?: Ref<NodeHandle>;
+}
+/**
+ * A container: it groups the nodes under it and holds no focus of its own. It
+ * has no `onFocus` on purpose, since a container that asks for one becomes a
+ * focusable nothing can focus and the remote dies on it. `onActive` is the
+ * question it can answer: the focus is somewhere inside me.
+ *
+ * With no `<NavigatorRoot>` above it, it renders its children and registers
+ * nothing, so a screen holding one is still a screen on a phone.
+ */
+declare function NavigatorNode({ children, ...node }: Readonly<NavigatorNodeProps>): import("react").JSX.Element;
+export type { NavigatorNodeProps };
+export { NavigatorNode };

package/types/spatial-nav/src/react/navigator-root.d.ts

@@ -0,0 +1,19 @@
+import { type Direction } from '@kroma/spatial-nav';
+import { type ReactNode } from 'react';
+interface NavigatorRootProps {
+    children: ReactNode;
+    /** Whether this navigator answers the remote. False parks the scope: its
+     *  nodes stay registered, in the order they registered, while the presses go
+     *  to whichever navigator is still listening. */
+    active?: boolean;
+    /** A direction the navigator handled with nothing to move to. */
+    onEdge?: (direction: Direction) => void;
+}
+/**
+ * One navigator, for one screen. Several can be mounted at once; a press
+ * reaches all of them and only the unlocked ones answer, which is how a dialog
+ * takes the remote from the screen it opened over.
+ */
+declare function NavigatorRoot({ children, active, onEdge }: Readonly<NavigatorRootProps>): import("react").JSX.Element;
+export type { NavigatorRootProps };
+export { NavigatorRoot };

package/types/spatial-nav/src/react/navigator-view.d.ts

@@ -0,0 +1,18 @@
+import type { Orientation } from '@kroma/spatial-nav';
+import type { ReactNode, Ref } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { NodeHandle } from './spatial-node';
+interface NavigatorViewProps {
+    children: ReactNode;
+    direction: Orientation;
+    alignInGrid?: boolean;
+    style?: StyleProp<ViewStyle>;
+    ref?: Ref<NodeHandle>;
+}
+/**
+ * A `<NavigatorNode>` that is also the box its children are laid out in: the
+ * axis the navigator walks and the axis the row is drawn on are one prop.
+ */
+declare function NavigatorView({ children, direction, alignInGrid, style, ref, }: Readonly<NavigatorViewProps>): import("react").JSX.Element;
+export type { NavigatorViewProps };
+export { NavigatorView };

package/types/spatial-nav/src/react/pointer-device.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode, type RefObject } from 'react';
+type PointerDevice = 'keys' | 'pointer';
+/**
+ * Lets a pointer take the focus. A navigator boots deaf to the mouse, because
+ * a television's remote is the only device most of them ever see; the first
+ * mousemove under this provider is what turns hovering a `<NavigatorItem>`
+ * into focusing it, on a browser and on a webOS Magic Remote alike.
+ */
+declare function PointerDeviceProvider({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+declare function usePointerDevice(): RefObject<PointerDevice>;
+export type { PointerDevice };
+export { PointerDeviceProvider, usePointerDevice };

package/types/spatial-nav/src/react/spatial-node.d.ts

@@ -0,0 +1,27 @@
+import type { Orientation } from '@kroma/spatial-nav';
+import { type ReactNode, type Ref } from 'react';
+interface NodeState {
+    active: boolean;
+}
+interface ItemState extends NodeState {
+    focused: boolean;
+}
+interface NodeHandle {
+    focus: () => void;
+}
+interface SpatialNodeProps {
+    children: ReactNode | ((state: ItemState) => ReactNode);
+    focusable?: boolean;
+    orientation?: Orientation;
+    alignInGrid?: boolean;
+    index?: number;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onSelect?: () => void;
+    onActive?: () => void;
+    onInactive?: () => void;
+    ref?: Ref<NodeHandle>;
+}
+declare function SpatialNode({ children, focusable, orientation, alignInGrid, index, onFocus, onBlur, onSelect, onActive, onInactive, ref, }: Readonly<SpatialNodeProps>): import("react").JSX.Element;
+export type { ItemState, NodeHandle, NodeState, SpatialNodeProps };
+export { SpatialNode };

package/types/spatial-nav/src/react/use-lock-navigator.d.ts

@@ -0,0 +1,11 @@
+interface LockActions {
+    lock: () => void;
+    unlock: () => void;
+}
+declare const LockContext: import("react").Context<LockActions>;
+/** Holds the navigator this component sits in out of the remote while a surface
+ *  is up. The count is the navigator's, so overlapping surfaces unlock in any
+ *  order; outside a `<NavigatorRoot>` both actions are no-ops. */
+declare function useLockNavigator(): LockActions;
+export type { LockActions };
+export { LockContext, useLockNavigator };

package/types/spatial-nav/src/react.d.ts

@@ -0,0 +1,17 @@
+export type { RemoteConfig, RemoteHandler } from './react/configure-remote';
+export { configureRemote } from './react/configure-remote';
+export type { DefaultFocusProps } from './react/default-focus';
+export { DefaultFocus } from './react/default-focus';
+export { useNavigator } from './react/navigator-context';
+export type { NavigatorItemProps } from './react/navigator-item';
+export { NavigatorItem } from './react/navigator-item';
+export type { NavigatorNodeProps } from './react/navigator-node';
+export { NavigatorNode } from './react/navigator-node';
+export type { NavigatorRootProps } from './react/navigator-root';
+export { NavigatorRoot } from './react/navigator-root';
+export type { NavigatorViewProps } from './react/navigator-view';
+export { NavigatorView } from './react/navigator-view';
+export { PointerDeviceProvider } from './react/pointer-device';
+export type { ItemState, NodeHandle, NodeState } from './react/spatial-node';
+export type { LockActions } from './react/use-lock-navigator';
+export { useLockNavigator } from './react/use-lock-navigator';

package/types/spatial-nav/src/resolve-move.d.ts

@@ -0,0 +1,6 @@
+import type { Move } from './directions';
+import type { FocusTree, TreeNode } from './focus-tree';
+/** The node a move lands on from `from`: the nearest sibling holding something
+ *  focusable, at the first container up the tree whose orientation answers that
+ *  axis. Null when the move runs off the edge. */
+export declare function resolveMove(tree: FocusTree, from: TreeNode, move: Move): TreeNode | null;

package/types/spatial-nav/src/spatial-navigator.d.ts

@@ -0,0 +1,23 @@
+import { type Direction } from './directions';
+import { type NodeConfig } from './focus-tree';
+/** The focus tree a D-pad walks. Registration is idempotent, exactly one node
+ *  holds the focus, and a lock counts so overlapping surfaces can unlock in any
+ *  order. A lock stops {@link handle}, never {@link focus}. */
+export declare class SpatialNavigator {
+    private readonly tree;
+    private readonly owner;
+    private locks;
+    onEdge?: (direction: Direction) => void;
+    /** A node joined the tree. The moment a focus that named an unreachable node
+     *  is worth trying again. */
+    onRegister?: () => void;
+    get focusedId(): string | null;
+    get locked(): boolean;
+    registerNode(id: string, config: NodeConfig): void;
+    unregisterNode(id: string): void;
+    focus(id: string): boolean;
+    handle(direction: Direction): boolean;
+    lock(): void;
+    unlock(): void;
+    private select;
+}

package/types/ui/src/assets/fonts.d.ts

@@ -0,0 +1,4 @@
+export declare const KIT_FONTS: {
+    "Bricolage Grotesque": any;
+    "Hanken Grotesk": any;
+};

package/types/ui/src/components/atoms/art-scrim/art-scrim.d.ts

@@ -0,0 +1,21 @@
+import { type CornerValue } from '#ui/core';
+type ArtScrimVariant = 'soft' | 'deep';
+/** The landscape rail tile's fade: dark only where the caption sits. */
+declare const CARD_SCRIM: string;
+/** Steeper than the rail tile's: a poster is taller, so the fade has further to
+ *  travel before it reaches the title, and it has to be dark BEFORE the text
+ *  starts rather than at the last pixel. A two-line title occupies roughly the
+ *  bottom fifth of the card. */
+declare const POSTER_SCRIM: string;
+interface ArtScrimProps {
+    /** How far up the dark reaches. `soft` leaves the artwork alone until the
+     *  bottom third; `deep` is already dark under a caption that sits ON the art. */
+    variant?: ArtScrimVariant;
+    /** The corner of the tile this fills. The layer rounds itself as well as being
+     *  clipped by its parent: Chrome fails to apply an `overflow: hidden` +
+     *  `border-radius` clip to a composited descendant, which an <Img> is. */
+    radius?: CornerValue;
+}
+declare function ArtScrim({ variant, radius }: Readonly<ArtScrimProps>): import("react").JSX.Element;
+export type { ArtScrimProps, ArtScrimVariant };
+export { ArtScrim, CARD_SCRIM, POSTER_SCRIM };

package/types/ui/src/components/atoms/art-scrim/index.d.ts

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

package/types/ui/src/components/atoms/avatar/avatar.d.ts

@@ -0,0 +1,43 @@
+declare const AVATAR_GRADIENTS: readonly ['linear-gradient(135deg, #F4B642, #E8743B)', 'linear-gradient(135deg, #3BC9DB, #3B82F6)', 'linear-gradient(135deg, #A855F7, #6366F1)', 'linear-gradient(135deg, #F472B6, #EC4899)', 'linear-gradient(135deg, #34D399, #10B981)'];
+declare const AVATAR_GRADIENT: "linear-gradient(135deg, #F4B642, #E8743B)";
+declare function gradientFor(seed: string): string;
+/** One or two letters for the fallback: the first and last name's initials, or
+ * the first two characters of a single-word name.
+ *
+ * Splits on punctuation as well as whitespace, because a display name is very
+ * often a username: "jean.dupont" and "ada_lovelace" should read JD and AL, not
+ * JE and AD. */
+declare function initialsOf(name: string): string;
+interface AvatarProps {
+    name?: string;
+    /** Photo URL. Falls back to the initials on error or when absent. */
+    src?: string | null;
+    size?: number;
+    /** Seed for the deterministic gradient. Defaults to `name`. */
+    seed?: string;
+    /** Override the gradient outright (the cast row cycles by position). */
+    gradient?: string;
+    /**
+     * How round the corner is, as a FRACTION of the size: 0 is a square, 0.5 is a
+     * circle, and the default 0.16 is the design's rounded square.
+     *
+     * A ratio rather than pixels, because everything else about an avatar already
+     * scales with `size` - the initials, the padlock, the icon inside it - and a
+     * fixed 24px corner does not: it reads as a squircle at 48 and as a barely
+     * softened box at 200, so the same profile changes shape between the list row
+     * and the picker. One `roundness` looks the same at every size.
+     */
+    roundness?: number;
+    /** A full circle: the profile picker's disc and the cast row. The same as
+     *  `roundness={0.5}`, spelled the way the design speaks about it. */
+    circle?: boolean;
+    /** Amber padlock badge for a PIN-protected profile. */
+    locked?: boolean;
+}
+/** The design's rounded square, as a FRACTION of the side. Exported because a
+ *  tile that sits in a row of avatars has to match their corner exactly, and a
+ *  copied `0.16` in the other component is how the two drift apart. */
+declare const AVATAR_ROUNDNESS = 0.16;
+declare function Avatar({ name, src, size, seed, gradient, roundness, circle, locked, }: Readonly<AvatarProps>): import("react").JSX.Element;
+export type { AvatarProps };
+export { AVATAR_GRADIENT, AVATAR_GRADIENTS, AVATAR_ROUNDNESS, Avatar, gradientFor, initialsOf };

package/types/ui/src/components/atoms/avatar/index.d.ts

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

package/types/ui/src/components/atoms/badge/badge.d.ts

@@ -0,0 +1,116 @@
+import type { ReactNode } from 'react';
+import { type Variant } from '#ui/core';
+type BadgeTone = Variant<typeof badgeVariants, 'tone'>;
+declare const badgeVariants: import("../../../core/types").SvFn<import("../../../core/types").StyleSlots<{
+    root: {
+        self: "flex-start";
+        radius: "xs";
+    };
+    label: {
+        font: "ui";
+        fontWeight: "700";
+    };
+}>, {
+    /** Each tone is a tinted wash of its own hue at 16%: the `/NN` alpha
+     * suffix, resolved at declaration time because no target can compute
+     * color-mix() (old webOS cannot, React Native cannot). */
+    readonly tone: {
+        readonly '4K': {
+            readonly root: {
+                readonly bg: "accentSoft";
+            };
+            readonly label: {
+                readonly color: "accentText";
+            };
+        };
+        readonly HDR: {
+            readonly root: {
+                readonly bg: "hdr/16";
+            };
+            readonly label: {
+                readonly color: "hdr";
+            };
+        };
+        readonly 'H.265': {
+            readonly root: {
+                readonly bg: "h265/16";
+            };
+            readonly label: {
+                readonly color: "h265";
+            };
+        };
+        readonly success: {
+            readonly root: {
+                readonly bg: "success/16";
+            };
+            readonly label: {
+                readonly color: "success";
+            };
+        };
+        readonly info: {
+            readonly root: {
+                readonly bg: "info/16";
+            };
+            readonly label: {
+                readonly color: "info";
+            };
+        };
+        readonly danger: {
+            readonly root: {
+                readonly bg: "danger/16";
+            };
+            readonly label: {
+                readonly color: "danger";
+            };
+        };
+        readonly warning: {
+            readonly root: {
+                readonly bg: "accentSoft";
+            };
+            readonly label: {
+                readonly color: "accentText";
+            };
+        };
+        readonly neutral: {
+            readonly root: {
+                readonly bg: "tint/8";
+            };
+            readonly label: {
+                readonly color: "text/85";
+            };
+        };
+    };
+    readonly size: {
+        readonly sm: {
+            readonly root: {
+                readonly py: 4;
+                readonly px: 9;
+            };
+            readonly label: {
+                readonly fontSize: 11;
+                readonly letterSpacing: 0.44;
+            };
+        };
+        readonly tv: {
+            readonly root: {
+                readonly py: 5;
+                readonly px: 11;
+            };
+            readonly label: {
+                readonly fontSize: 13;
+                readonly letterSpacing: 0.26;
+            };
+        };
+    };
+}>;
+/** Maps the catalogue's quality strings ("4K", "HDR", "H.265", ...) to a
+ * tone. Anything unrecognised gets the amber treatment. */
+declare function qualityTone(badge: string): BadgeTone;
+interface BadgeProps {
+    tone?: BadgeTone;
+    size?: Variant<typeof badgeVariants, 'size'>;
+    children?: ReactNode;
+}
+declare function Badge({ tone, size, children }: Readonly<BadgeProps>): import("react").JSX.Element;
+export type { BadgeProps, BadgeTone };
+export { Badge, badgeVariants, qualityTone };

package/types/ui/src/components/atoms/badge/index.d.ts

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

package/types/ui/src/components/atoms/box/box.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode, Ref } from 'react';
+import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
+import { type BoxStyleProps } from '#ui/core';
+interface BoxProps extends BoxStyleProps, Omit<ViewProps, 'style'> {
+    children?: ReactNode;
+    /** Render onto the one child instead of adding a <View>: the box's layout and
+     *  style merge under the child's own (see lib/slot). For a wrapper whose only
+     *  job is what its child could carry itself. */
+    asChild?: boolean;
+    style?: StyleProp<ViewStyle>;
+    /** Forwarded to the underlying host view. React 19 takes `ref` as a plain
+     *  prop, so no forwardRef wrapper is needed; it is declared explicitly because
+     *  ViewProps does not carry it. */
+    ref?: Ref<View>;
+    /** Browser targets only: becomes `data-*` on the host element. Declared here
+     *  because only react-native-web's own `ViewProps` carries it. */
+    dataSet?: Record<string, string | number | undefined>;
+}
+declare function Box({ children, asChild, style, ref, pointerEvents, ...props }: Readonly<BoxProps>): import("react").JSX.Element;
+/** Horizontal <Box>. Sugar for the single most common case, and it reads better
+ * at a call site than `row` buried among a dozen other props. */
+declare function Row(props: Readonly<BoxProps>): import("react").JSX.Element;
+/** Vertical <Box>. React Native already stacks in a column, so this exists for
+ * symmetry with <Row> and to make intent explicit at the call site. */
+declare function Column(props: Readonly<BoxProps>): import("react").JSX.Element;
+/** Pushes whatever follows it to the far end of a <Row>. */
+declare function Spacer(): import("react").JSX.Element;
+export type { BoxProps };
+export { Box, Column, Row, Spacer };

package/types/ui/src/components/atoms/box/index.d.ts

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