@roku-sdk/components 0.0.0-stage → 2.18.0

package/src/container.tsx

@@ -0,0 +1,130 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import { transactionManager } from "@roku-sdk/common/transaction";
+import { ComponentRef, DomNode } from "@roku-sdk/interfaces";
+import { Component, JSX, splitProps, tmTransaction } from "@roku-sdk/solid";
+
+import { IGroupProps } from "./sg-nodes/group";
+
+/**
+ * Reference type for the Container component.
+ *
+ * Extends {@link ComponentRef} with imperative methods for dynamic node
+ * insertion and removal. This provides a typed public API for pooling
+ * patterns that need to reparent nodes at runtime.
+ *
+ * @example
+ * ```tsx
+ * let containerRef!: ContainerRef;
+ *
+ * // Acquire a pooled node and insert it
+ * const node = pool.acquire();
+ * containerRef.insertNode(node.element);
+ *
+ * // Later, remove the node (returns it to pool)
+ * containerRef.removeNode(node.element);
+ * pool.release(node);
+ * ```
+ */
+export interface ContainerRef extends ComponentRef<IGroupProps> {
+    /**
+     * Inserts a node as a child of this container.
+     * The node is appended to the end of the children list.
+     *
+     * @param node - The DomNode to insert into this container
+     */
+    insertNode: (node: DomNode) => void;
+
+    /**
+     * Removes a node from this container.
+     * The node is marked for removal and will be detached on the next commit.
+     *
+     * On firmware 15.2.x the parent link is the only strong reference to a
+     * SceneGraph node, so a committed detach destroys it and a later
+     * `insertNode` of the same node hands the render thread a deleted
+     * reference. Pooling that has to run on 15.2.x should reparent through
+     * {@link ContainerRef.insertNode} into a hidden container rather than
+     * detaching.
+     *
+     * @param node - The DomNode to remove from this container
+     */
+    removeNode: (node: DomNode) => void;
+}
+
+/**
+ * Props for the Container component.
+ */
+export interface IContainerProps extends Omit<IGroupProps, "ref"> {
+    /** Callback ref to receive the ContainerRef with imperative methods. */
+    ref?: (ref: ContainerRef) => void;
+    /** Child elements to render inside the container. */
+    children?: JSX.Element;
+}
+
+/**
+ * Container is a Group wrapper that exposes typed imperative methods for
+ * dynamic node insertion and removal.
+ *
+ * This component is designed for advanced pooling patterns where nodes need
+ * to be reparented at runtime without triggering full reactive re-renders.
+ * It wraps the raw `tmTransaction.insertNode/removeNode` calls with a typed
+ * API, eliminating the need for `as any` casts and eslint-disable comments.
+ *
+ * @example
+ * ```tsx
+ * import { Container, ContainerRef } from "@roku-sdk/components";
+ *
+ * const PooledGrid: Component = () => {
+ *     let slotContainerRef!: ContainerRef;
+ *
+ *     createEffect(() => {
+ *         const node = pool.acquire();
+ *         slotContainerRef.insertNode(node.element);
+ *     });
+ *
+ *     return (
+ *         <Container ref={(el) => (slotContainerRef = el)}>
+ *             {/* Pooled nodes are inserted here dynamically *\/}
+ *         </Container>
+ *     );
+ * };
+ * ```
+ *
+ * @see {@link ContainerRef} for the imperative methods available on the ref
+ */
+export const Container: Component<IContainerProps> = props => {
+    // Use splitProps to preserve reactivity on spread props
+    const [local, groupProps] = splitProps(props, ["ref", "children"]);
+
+    return (
+        <group
+            {...groupProps}
+            ref={(el: DomNode) => {
+                // Extend the element with imperative methods
+                const containerRef = el as ContainerRef;
+
+                // `tmTransaction` assumes an open transaction — the Solid renderer
+                // opens one before every call it makes. These methods run outside the
+                // renderer, so they open it themselves. `insertNode` reaches native
+                // `appendNode` synchronously (firmware 15.2.x raises a render-thread
+                // exception if no transaction is open) and `removeNode` only queues
+                // the detach for the pre-commit hook, which a commit has to drive.
+                containerRef.insertNode = (node: DomNode) => {
+                    transactionManager.startTransaction();
+                    tmTransaction.insertNode(el, node);
+                };
+
+                containerRef.removeNode = (node: DomNode) => {
+                    transactionManager.startTransaction();
+                    tmTransaction.removeNode(el, node);
+                };
+
+                // Pass the extended ref to the consumer
+                local.ref?.(containerRef);
+            }}
+        >
+            {local.children}
+        </group>
+    );
+};

package/src/core/jsx-runtime.ts

@@ -0,0 +1,39 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+/**
+ * JSX runtime entry point for the **frozen core** property contract.
+ *
+ * This module exists to be named by `jsxImportSource` in an application's tsconfig:
+ *
+ * ```jsonc
+ * { "compilerOptions": { "jsxImportSource": "@roku-sdk/components/core" } }
+ * ```
+ *
+ * TypeScript then resolves JSX intrinsic element types from
+ * `@roku-sdk/components/core/jsx-runtime`, and the sibling `core-jsx.d.ts` augments exactly this
+ * specifier with an intrinsic map keyed to the `I*CoreProps` interfaces. So `<poster>` resolves to
+ * `IPosterCoreProps` rather than the full `IPosterProps`, and a property outside the frozen subset
+ * is a compile error naming the property.
+ *
+ * Two things make this the enforcement point rather than a convenience:
+ *
+ * 1. **A module-scoped `JSX` namespace replaces the global one, it does not merge with it.** The
+ *    full intrinsic map in `rsg-ts/src/types/sg-jsx.d.ts` augments a different specifier, so it is
+ *    not in scope for a build that points here — provided that map is kept out of the program.
+ *    That is the one easily-missed part of the setup: an app opting in must also drop
+ *    `@roku-sdk/components/jsx` from `types[]` and the inherited `sg-jsx.d.ts` from `files[]`,
+ *    because the star re-export below would otherwise carry those augmentations back in.
+ * 2. **Application source is unchanged.** Only the tsconfig differs.
+ *
+ * The runtime behaviour is unchanged — the factory is re-exported from `@roku-sdk/solid` — because
+ * the divergence is purely a compile-time *type* contract, not a second implementation. Builds do
+ * not read `jsxImportSource` at all: esbuild is configured with a classic `jsxFactory` and
+ * `babel-preset-solid` is pinned to `moduleName: "@roku-sdk/solid"`.
+ *
+ * The re-export must stay a star re-export. TypeScript resolves `JSX.Element`,
+ * `JSX.ElementChildrenAttribute` and `JSX.IntrinsicAttributes` from this same module, and those
+ * come from SolidJS; a named re-export of the factory alone would leave them undefined.
+ */
+
+export * from "@roku-sdk/solid/jsx-runtime";

package/src/focusable-group.props.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { IGroupProps } from "./sg-nodes/group.props";
+
+export interface IFocusableGroupProps extends IGroupProps {
+    rememberLastFocus?: boolean;
+}

package/src/focusable-group.tsx

@@ -0,0 +1,17 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { IFocusableGroupProps } from "./focusable-group.props";
+import { Component } from "./index";
+import { retainAsset } from "./retain-asset";
+import FocusableGroupXML from "./xml-components/focus/focusable-group.xml";
+export type { IFocusableGroupProps } from "./focusable-group.props";
+
+export const FocusableGroup: Component<IFocusableGroupProps> = props => {
+    retainAsset(FocusableGroupXML);
+    return (
+        <focusable-group focusable={true} {...props}>
+            {props.children}
+        </focusable-group>
+    );
+};

package/src/focusable.props.ts

@@ -0,0 +1,14 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { IGroupProps } from "./sg-nodes/group.props";
+
+export interface IFocusableProps extends IGroupProps {
+    nextFocusRight?: string;
+    nextFocusLeft?: string;
+    nextFocusUp?: string;
+    nextFocusDown?: string;
+    nextFocusBack?: string;
+    nextFocusOk?: string;
+    hasPreferredFocus?: boolean;
+}

package/src/focusable.tsx

@@ -0,0 +1,17 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { IFocusableProps } from "./focusable.props";
+import { retainAsset } from "./retain-asset";
+import { Component } from "./types";
+import FocusableXML from "./xml-components/focus/focusable.xml";
+export type { IFocusableProps } from "./focusable.props";
+
+export const Focusable: Component<IFocusableProps> = props => {
+    retainAsset(FocusableXML);
+    return (
+        <focusable focusable={true} {...props}>
+            {props.children}
+        </focusable>
+    );
+};

package/src/glyphs.ts

@@ -0,0 +1,116 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+/**
+ * Named character constants for symbols that are awkward or impossible to type
+ * directly in source.
+ *
+ * The constants are grouped by the property that actually matters at runtime:
+ * which font has to supply the character.
+ *
+ * 1. RokuFont01 characters (the private-use area, plus ● ★ ☆). RokuFont01 is
+ *    the system-wide fallback font in firmware, so these render under a system
+ *    font AND under a custom app-supplied font.
+ * 2. RokuUI-Regular symbols. RokuUI-Regular is the default UI font but is not
+ *    in the fallback chain, so these render under a system font but become tofu
+ *    under a custom app-supplied font unless that font supplies them itself.
+ *
+ * The practical consequence, verified on device against firmware 15.3.5: if
+ * your app ships a custom font, the group that needs care is (2), not (1).
+ *
+ * A custom font that defines a codepoint itself always wins — no fallback
+ * occurs. A font carrying its own U+E0xx private-use glyphs will render those
+ * rather than the Roku icons.
+ *
+ * @packageDocumentation
+ */
+
+// -----------------------------------------------------------------------------
+// RokuFont01 — private-use area glyphs
+//
+// Supplied by the firmware fallback font, so these survive a custom app font.
+// -----------------------------------------------------------------------------
+
+export const OPTIONS_GLYPH = "\uE000";
+export const OK_BUTTON_GLYPH = "\uE001";
+export const OPTIONS_BUTTON_GLYPH = "\uE002";
+export const MICROPHONE_GLYPH = "\uE003";
+export const PLAY_PAUSE_BUTTON_GLYPH = "\uE004";
+export const PLAY_PAUSE_GLYPH = "\uE005";
+/**
+ * Baseline-aligned dot, sized and positioned to line up with the other icon
+ * glyphs in this block. Use {@link BLACK_CIRCLE} for a dot inside a run of
+ * text — that one is raised to text centre.
+ */
+export const DOT_GLYPH = "\uE006";
+export const HOME_GLYPH = "\uE007";
+export const SEARCH_GLYPH = "\uE008";
+export const REMOTE_GLYPH = "\uE009";
+export const REPLAY_GLYPH = "\uE010";
+export const MICROPHONE_BUTTON_GLYPH = "\uE011";
+export const SEARCH_BUTTON_GLYPH = "\uE012";
+export const FAST_FORWARD_GLYPH = "\uE013";
+export const REWIND_GLYPH = "\uE014";
+export const SHORTCUT_ONE_BUTTON_GLYPH = "\uE015";
+export const SHORTCUT_TWO_BUTTON_GLYPH = "\uE016";
+export const CLOSED_CAPTIONS_GLYPH = "\uE017";
+export const LIVE_TV_GLYPH = "\uE018";
+export const SLEEP_TIMER_GLYPH = "\uE019";
+export const GENERAL_APP_GLYPH = "\uE020";
+export const BACK_BUTTON_GLYPH = "\uE021";
+export const HOME_BUTTON_GLYPH = "\uE022";
+export const QUICK_LAUNCH_BUTTON_GLYPH = "\uE023";
+export const DOWN_BUTTON_GLYPH = "\uE024";
+export const LEFT_BUTTON_GLYPH = "\uE025";
+export const RIGHT_BUTTON_GLYPH = "\uE026";
+export const KIDS_PROFILE_GLYPH = "\uE027";
+export const UP_BUTTON_GLYPH = "\uE028";
+export const POWER_BUTTON_GLYPH = "\uE029";
+export const THUMBS_UP_GLYPH = "\uE030";
+export const THUMBS_DOWN_GLYPH = "\uE031";
+
+// -----------------------------------------------------------------------------
+// RokuFont01 — standard Unicode symbols
+//
+// These are real Unicode codepoints, but RokuUI-Regular does not contain them:
+// they resolve through the RokuFont01 fallback, exactly like the private-use
+// glyphs above. That fallback applies under a custom app font too, so these are
+// the safe shapes to use in custom-font text.
+// -----------------------------------------------------------------------------
+
+/** ● U+25CF BLACK CIRCLE — raised to text centre, for a dot inside a text run. */
+export const BLACK_CIRCLE = "\u25CF";
+/** ★ U+2605 BLACK STAR — filled star, e.g. a filled rating position. */
+export const BLACK_STAR = "\u2605";
+/** ☆ U+2606 WHITE STAR — outlined star, e.g. an empty rating position. */
+export const WHITE_STAR = "\u2606";
+
+// -----------------------------------------------------------------------------
+// RokuUI-Regular symbols
+//
+// Present in the default UI font, so no fallback is needed under a system font.
+// Under a custom app font there is no RokuFont01 backstop for these either — a
+// custom font that lacks them renders tofu. These are the constants to watch if
+// your app ships its own font.
+// -----------------------------------------------------------------------------
+
+/** • U+2022 BULLET */
+export const BULLET = "\u2022";
+/** … U+2026 HORIZONTAL ELLIPSIS */
+export const ELLIPSIS = "\u2026";
+/** – U+2013 EN DASH */
+export const EN_DASH = "\u2013";
+/** — U+2014 EM DASH */
+export const EM_DASH = "\u2014";
+/** ← U+2190 LEFTWARDS ARROW */
+export const LEFT_ARROW = "\u2190";
+/** ↑ U+2191 UPWARDS ARROW */
+export const UP_ARROW = "\u2191";
+/** → U+2192 RIGHTWARDS ARROW */
+export const RIGHT_ARROW = "\u2192";
+/** ↓ U+2193 DOWNWARDS ARROW */
+export const DOWN_ARROW = "\u2193";
+/** ✓ U+2713 CHECK MARK */
+export const CHECK_MARK = "\u2713";
+/** ✗ U+2717 BALLOT X */
+export const BALLOT_X = "\u2717";

package/src/helpers/index.tsx

@@ -0,0 +1,4 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+export * from "./resolution-context";
+export * from "./scale-for-device-resolution";

package/src/helpers/resolution-context.tsx

@@ -0,0 +1,68 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+import { getAppInfo } from "@roku-sdk/runtime/app-info";
+import { useUiResolution } from "@roku-sdk/runtime/device-info-events";
+import type { Component, JSX } from "@roku-sdk/solid";
+import { createContext, createEffect, createSignal, useContext } from "@roku-sdk/solid";
+
+export enum Resolution {
+    HD = "hd",
+    FHD = "fhd",
+    // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
+    hd = "hd",
+    // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
+    fhd = "fhd"
+}
+export enum ResolutionScale {
+    HD = 1,
+    FHD = 1.5,
+    // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
+    hd = 1,
+    // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
+    fhd = 1.5
+}
+interface ResolutionContextValue {
+    isFHDOnly: boolean;
+    deviceResolution: () => Resolution | undefined;
+}
+
+export interface IResolutionContextProviderProps {
+    children: JSX.Element;
+}
+
+const ResolutionContext = createContext<ResolutionContextValue>();
+
+export const ResolutionProvider: Component<IResolutionContextProviderProps> = props => {
+    const appInfo = getAppInfo();
+    const resolutions = appInfo?.getManifestValue("ui_resolutions")?.split(",");
+    const isFHDOnly = resolutions?.includes("fhd") && !resolutions?.includes("hd");
+    const { uiResolution } = useUiResolution();
+
+    const [deviceResolution, setDeviceResolution] = createSignal<Resolution>();
+
+    createEffect(() => {
+        const resolution = uiResolution();
+
+        if (resolution && !deviceResolution()) {
+            setDeviceResolution(resolution.name.toLowerCase() as Resolution);
+        }
+    });
+
+    const value: ResolutionContextValue = {
+        isFHDOnly: isFHDOnly === undefined ? true : isFHDOnly,
+        deviceResolution
+    };
+
+    return <ResolutionContext.Provider value={value}>{props.children}</ResolutionContext.Provider>;
+};
+
+export function useResolutionContext() {
+    const context = useContext(ResolutionContext);
+    if (!context) {
+        return {
+            isFHDOnly: true,
+            deviceResolution: () => Resolution.FHD
+        } as ResolutionContextValue;
+    }
+    return context;
+}

package/src/helpers/scale-for-device-resolution.ts

@@ -0,0 +1,31 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+import { Accessor, createMemo } from "@roku-sdk/solid";
+
+import { Vector2D } from "../sg-nodes/types";
+import { useResolutionContext } from "./resolution-context";
+
+const scale = (value: number) => Math.floor((value * 2) / 3);
+
+/**
+ * Workaround to scale the size based on the device resolution.
+ * Used to fix the lack of autoscaling when the device resolution is not FHD.
+ * Resolution-related properties of some SceneGraph nodes do not autoscale
+ * when the resolution is not FHD, even when autoscaling is enabled
+ * (manifest has FHD resolution only).
+ *
+ * @important This workaround works only under ResolutionProvider.
+ *
+ * @param size - The size accessor to apply the workaround to.
+ * @returns The autoscaled size accessor.
+ */
+export const scaleForDeviceResolution = (size: Accessor<Vector2D>): Accessor<Vector2D> => {
+    const { deviceResolution } = useResolutionContext();
+    return createMemo<Vector2D>(() => {
+        const [width, height] = size();
+        if (deviceResolution() === "hd") {
+            return [scale(width), scale(height)];
+        }
+        return [width, height];
+    });
+};

package/src/index.tsx

@@ -0,0 +1,70 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+export * from "./sg-nodes/animation";
+export * from "./sg-nodes/animated-image";
+export * from "./sg-nodes/array-grid";
+export * from "./bounding-tracker";
+export * from "./blended-busy-spinner";
+export { BusySpinner } from "./sg-nodes/busy-spinner";
+export * from "./sg-nodes/button";
+export * from "./sg-nodes/button-group";
+export * from "./channel-store";
+export * from "./container";
+export * from "./sg-nodes/content-node";
+export * from "./sg-nodes/custom-keyboard";
+export * from "./sg-nodes/dialog";
+export * from "./sg-nodes/dynamic-key-grid";
+export * from "./sg-nodes/dynamic-keyboard";
+export * from "./sg-nodes/dynamic-mini-keyboard";
+export * from "./sg-nodes/dynamic-pinpad";
+export * from "./sg-nodes/effect";
+export * from "./focusable";
+export * from "./focusable-group";
+export * from "./sg-nodes/font";
+export * from "./sg-nodes/group";
+export * from "./key-handler";
+export * from "./sg-nodes/label";
+export * from "./sg-nodes/label-list";
+export * from "./sg-nodes/check-list";
+export * from "./sg-nodes/layout-group";
+export * from "./sg-nodes/list-panel";
+export * from "./sg-nodes/markup-list";
+export * from "./sg-nodes/mask-group";
+// Implementation lives in @roku-sdk/navigation. Re-exported here so
+// existing `import { ModalBoundary, useModal } from "@roku-sdk/components"` keeps working.
+export { ModalBoundary, type IModalBoundaryProps, useModal, type UseModalResult } from "@roku-sdk/navigation";
+export * from "./sg-nodes/node";
+export * from "./sg-nodes/overhang";
+export * from "./sg-nodes/panel";
+export * from "./sg-nodes/panel-set";
+export * from "./sg-nodes/poster";
+export * from "./sg-nodes/poster-grid";
+export * from "./sg-nodes/radio-button-list";
+export * from "./sg-nodes/rectangle";
+export * from "./sg-nodes/row-list";
+export * from "./sg-nodes/time-grid";
+export * from "./sg-nodes/zoom-row-list";
+export * from "./sg-nodes/scene";
+export * from "./sg-nodes/scrolling-label";
+export * from "./sg-nodes/scrollable-text";
+export * from "./sg-nodes/simple-label";
+export * from "./sg-nodes/standard-dialog";
+export * from "./sg-nodes/standard-message-dialog";
+export * from "./sg-nodes/standard-keyboard-dialog";
+export * from "./sg-nodes/standard-pinpad-dialog";
+export * from "./sg-nodes/standard-progress-dialog";
+export * from "./sg-nodes/target-set";
+export * from "./sg-nodes/target-group";
+export * from "./sg-nodes/target-list";
+export * from "./types";
+export * from "./sg-nodes/video";
+export * from "./sg-nodes/voice-text-edit-box";
+export * from "./sg-nodes/audio";
+export * from "./sg-nodes/sound-effect";
+export * from "./button-row";
+export * from "./sg-nodes/markup-grid";
+
+export { Tween } from "./tween";
+export type { TweenProps } from "./tween";
+export type { ITweenProps } from "./sg-nodes/tween.props";

package/src/jsx-props.ts

@@ -0,0 +1,87 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+// Types-only barrel for JSX intrinsic augmentations. Imported by jsx.d.ts / sg-jsx.d.ts.
+// Do not re-export from .tsx modules — that reintroduces consumer tsc circular errors.
+
+export type { IBlendedBusySpinnerProps } from "./blended-busy-spinner.props";
+export type { IBoundingTrackerProps } from "./bounding-tracker.props";
+export type { IChannelStoreProps } from "./channel-store.props";
+export type { IFocusableGroupProps } from "./focusable-group.props";
+export type { IFocusableProps } from "./focusable.props";
+export type { IKeyHandlerProps } from "./key-handler.props";
+export type { IModalProps } from "./modal-dialog.props";
+export type {
+    IAnimationBaseProps,
+    IAnimationProps,
+    IColorFieldInterpolatorProps,
+    IFloatFieldInterpolatorProps,
+    IVector2DFieldInterpolatorProps
+} from "./sg-nodes/animation.props";
+export type { IAnimatedImageProps } from "./sg-nodes/animated-image.props";
+export type { IAudioProps } from "./sg-nodes/audio.props";
+export type { IBusySpinnerProps } from "./sg-nodes/busy-spinner.props";
+export type { IButtonGroupProps } from "./sg-nodes/button-group.props";
+export type { IButtonProps } from "./sg-nodes/button.props";
+export type { ICheckListProps } from "./sg-nodes/check-list.props";
+export type { IContentNodeProps } from "./sg-nodes/content-node.props";
+export type { IKeyboardPropsWithVoice } from "./sg-nodes/custom-keyboard.props";
+export type { IDialogProps } from "./sg-nodes/dialog.props";
+export type { IDynamicKeyGridProps } from "./sg-nodes/dynamic-key-grid.props";
+export type { IDynamicKeyboardProps } from "./sg-nodes/dynamic-keyboard.props";
+export type { IDynamicMiniKeyboardProps } from "./sg-nodes/dynamic-mini-keyboard.props";
+export type { IDynamicPinPadProps } from "./sg-nodes/dynamic-pinpad.props";
+export type { IEffectProps } from "./sg-nodes/effect.props";
+export type { IFontProps } from "./sg-nodes/font.props";
+export type { IGroupProps } from "./sg-nodes/group.props";
+export type { ILabelListProps } from "./sg-nodes/label-list.props";
+export type { ILabelProps, IMultiStyleLabelProps } from "./sg-nodes/label.props";
+export type { ILayoutGroupProps } from "./sg-nodes/layout-group.props";
+export type { IFullPanelProps, IListPanelProps } from "./sg-nodes/list-panel.props";
+export type { IMarkupGridProps } from "./sg-nodes/markup-grid.props";
+export type { IMarkupListProps } from "./sg-nodes/markup-list.props";
+export type { IMaskGroupProps } from "./sg-nodes/mask-group.props";
+export type { IOverhangProps } from "./sg-nodes/overhang.props";
+export type { IPanelSetProps } from "./sg-nodes/panel-set.props";
+export type { IPanelProps } from "./sg-nodes/panel.props";
+export type { IPosterGridProps } from "./sg-nodes/poster-grid.props";
+export type { IPosterProps } from "./sg-nodes/poster.props";
+export type { IRadioButtonListProps } from "./sg-nodes/radio-button-list.props";
+export type { IRectangleProps } from "./sg-nodes/rectangle.props";
+export type { IRowListProps } from "./sg-nodes/row-list.props";
+export type { ISceneProps } from "./sg-nodes/scene.props";
+export type { IScrollableTextProps } from "./sg-nodes/scrollable-text.props";
+export type { IScrollingLabelProps } from "./sg-nodes/scrolling-label.props";
+export type { ISimpleLabelProps } from "./sg-nodes/simple-label.props";
+export type { ISoundEffectProps } from "./sg-nodes/sound-effect.props";
+export type {
+    IStandardDialogProps,
+    IStandardDialogRSGPaletteNodeProps,
+    IStdDlgActionCardItemProps,
+    IStdDlgBulletTextItemProps,
+    IStdDlgButtonAreaProps,
+    IStdDlgButtonProps,
+    IStdDlgContentAreaProps,
+    IStdDlgCustomItemProps,
+    IStdDlgDeterminateProgressItemProps,
+    IStdDlgGraphicItemProps,
+    IStdDlgItemGroupProps,
+    IStdDlgKeyboardItemProps,
+    IStdDlgMultiStyleTextItemProps,
+    IStdDlgProgressItemProps,
+    IStdDlgSideCardAreaProps,
+    IStdDlgTextItemProps,
+    IStdDlgTitleAreaProps
+} from "./sg-nodes/standard-dialog.props";
+export type { IStandardKeyboardDialogProps } from "./sg-nodes/standard-keyboard-dialog.props";
+export type { IStandardMessageDialogProps } from "./sg-nodes/standard-message-dialog.props";
+export type { IStandardPinPadDialogProps } from "./sg-nodes/standard-pinpad-dialog.props";
+export type { IStandardProgressDialogProps } from "./sg-nodes/standard-progress-dialog.props";
+export type { ITargetGroupProps } from "./sg-nodes/target-group.props";
+export type { ITargetListProps } from "./sg-nodes/target-list.props";
+export type { ITargetSetProps } from "./sg-nodes/target-set.props";
+export type { ITimeGridProps } from "./sg-nodes/time-grid.props";
+export type { ITweenProps } from "./sg-nodes/tween.props";
+export type { IBifDisplayProps, IProgressBarProps, ITrickPlayBarProps, IVideoProps } from "./sg-nodes/video.props";
+export type { IVoiceTextEditBoxProps } from "./sg-nodes/voice-text-edit-box.props";
+export type { IZoomRowListProps } from "./sg-nodes/zoom-row-list.props";

package/src/kdfs.d.ts

@@ -0,0 +1,14 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+/**
+ * Packaged Key Definition File URI exports (resolved to pkg:/components/... at build time).
+ *
+ * Keep this in sync with `kdfs.ts`: every export added there must be declared here.
+ */
+declare module "@roku-sdk/components/kdfs" {
+    export const CustomAddressKDF: string;
+    export const MOPPinPadCustomKDF: string;
+    export const PhonePadCustomKDF: string;
+    export const WifiCustomKDF: string;
+}

package/src/kdfs.ts

@@ -0,0 +1,15 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+/**
+ * Packaged Key Definition File URIs for standard keyboard layouts.
+ *
+ * Import only the layouts you use so unused KDF files tree-shake out of the build.
+ *
+ * When adding a new KDF export here, add a matching declaration to `kdfs.d.ts`
+ * (the published type surface for `@roku-sdk/components/kdfs`); the two must stay in sync.
+ */
+export { default as CustomAddressKDF } from "./xml-components/keyboards/CustomAddressKDF.keyboard.json";
+export { default as MOPPinPadCustomKDF } from "./xml-components/keyboards/MOPPinPadCustomKDF.keyboard.json";
+export { default as PhonePadCustomKDF } from "./xml-components/keyboards/PhonePadCustomKDF.keyboard.json";
+export { default as WifiCustomKDF } from "./xml-components/keyboards/WifiCustomKDF.keyboard.json";