@roku-sdk/components 0.0.0-stage → 2.19.0

package/src/sg-nodes/standard-dialog.tsx

@@ -0,0 +1,428 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import { Modal, modalPropKeys } from "../modal-dialog";
+import { retainAsset } from "../retain-asset";
+import StandardDialogExtXML from "../xml-components/modal/StandardDialogExt.xml";
+import type {
+    IStandardDialogProps,
+    IStandardDialogRSGPaletteNodeProps,
+    IStdDlgActionCardItemProps,
+    IStdDlgBulletTextItemProps,
+    IStdDlgButtonAreaProps,
+    IStdDlgButtonProps,
+    IStdDlgContentAreaProps,
+    IStdDlgCustomItemProps,
+    IStdDlgDeterminateProgressItemProps,
+    IStdDlgGraphicItemProps,
+    IStdDlgItemGroupProps,
+    IStdDlgKeyboardItemProps,
+    IStdDlgMultiStyleTextItemProps,
+    IStdDlgProgressItemProps,
+    IStdDlgSideCardAreaProps,
+    IStdDlgTextItemProps,
+    IStdDlgTitleAreaProps
+} from "./standard-dialog.props";
+import { Component, splitProps } from "./types";
+export { StdDlgKeyboardLayoutType } from "./standard-dialog.props";
+
+export type {
+    IStandardDialogRSGPaletteNodeProps,
+    IStandardDialogProps,
+    IStdDlgAreaBaseProps,
+    IStdDlgTitleAreaProps,
+    IStdDlgContentAreaProps,
+    IStdDlgButtonAreaProps,
+    IStdDlgSideCardAreaProps,
+    IStdDlgButtonProps,
+    IStdDlgItemBaseProps,
+    IStdDlgItemGroupProps,
+    IStdDlgActionIconType,
+    IStdDlgActionCardItemProps,
+    IStdDialogBulletType,
+    IStdDlgBulletTextItemProps,
+    IStdDlgDeterminateProgressItemProps,
+    IStdDlgGraphicAlign,
+    IStdDlgGraphicItemProps,
+    IStdDlgKeyboardItemProps,
+    IStdDlgDrawingStyle,
+    IStdDlgMultiStyleTextItemProps,
+    IStdDlgProgressItemProps,
+    INamedTextStyles,
+    IStdDlgTextItemProps,
+    IStdDlgCustomItemProps
+} from "./standard-dialog.props";
+
+// ──────────────────────────────────────────────────────────────────────────────
+// RSGPalette
+// ──────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Sets the color palette used by a {@link StandardDialog} and its child elements.
+ *
+ * The RSGPalette node defines 10 color values that control the appearance of dialog backgrounds,
+ * text, buttons, focus indicators, keyboards, and other elements. By default, dialogs inherit
+ * their palette from ancestor nodes in the scene graph (typically from the Scene node).
+ *
+ * @example
+ * ```tsx
+ * <StandardDialog>
+ *     <rsgPalette colors={{
+ *         dialogBackgroundColor: "0x1E1E1EFF",
+ *         dialogTextColor: "0xFFFFFFFF",
+ *         dialogFocusColor: "0x0066FFFF",
+ *     }} />
+ *     <stdDlgTitleArea primaryTitle="Settings" />
+ *     <stdDlgContentArea>
+ *         <stdDlgTextItem text="Choose an option below." />
+ *     </stdDlgContentArea>
+ * </StandardDialog>
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/standard-dialog | StandardDialog palette field}
+ */
+export const RsgPalette: Component<IStandardDialogRSGPaletteNodeProps> = props => {
+    return <rsgPalette {...props}></rsgPalette>;
+};
+
+/**
+ * @deprecated Renamed to {@link RsgPalette}. Use `RsgPalette` instead — `RSGPalette` will be removed in a future release.
+ */
+export const RSGPalette = RsgPalette;
+
+// ──────────────────────────────────────────────────────────────────────────────
+// StandardDialog
+// ──────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Base dialog node for the Roku standard dialog framework.
+ *
+ * `StandardDialog` provides a structured dialog layout with optional title, content, button,
+ * and side-card areas. Use the StdDlg* area and item components as children to compose the
+ * dialog's UI.
+ *
+ * @example
+ * ```tsx
+ * const [showDialog, setShowDialog] = createSignal(false);
+ *
+ * {showDialog() && (
+ *     <StandardDialog
+ *         onButtonSelected={(index) => {
+ *             console.log(`Button ${index} selected`);
+ *             setShowDialog(false);
+ *         }}
+ *         onWasClosed={() => setShowDialog(false)}
+ *     >
+ *         <stdDlgTitleArea primaryTitle="Confirm Action" />
+ *         <stdDlgContentArea>
+ *             <stdDlgTextItem text="Are you sure you want to continue?" />
+ *         </stdDlgContentArea>
+ *         <stdDlgButtonArea>
+ *             <stdDlgButton text="OK" />
+ *             <stdDlgButton text="Cancel" />
+ *         </stdDlgButtonArea>
+ *     </StandardDialog>
+ * )}
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/standard-dialog}
+ */
+export const StandardDialog: Component<IStandardDialogProps> = props => {
+    retainAsset(StandardDialogExtXML);
+    const [local, rest] = splitProps(props, modalPropKeys);
+    return <Modal {...local} dialog={<standardDialogExt {...rest} />} />;
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Area nodes
+// ──────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Title area component displayed at the top of a {@link StandardDialog}.
+ *
+ * A dialog may contain a single optional title area. Use it to display a title string
+ * with optional primary (left) and secondary (right) icons.
+ *
+ * @example
+ * ```tsx
+ * <stdDlgTitleArea
+ *     primaryTitle="Settings"
+ *     primaryIcon="pkg:/images/settings-icon.png"
+ * />
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/std-dlg-title-area}
+ */
+export const StdDlgTitleArea: Component<IStdDlgTitleAreaProps> = props => {
+    return <stdDlgTitleArea {...props}></stdDlgTitleArea>;
+};
+
+/**
+ * Content area containing the main body of a {@link StandardDialog}.
+ *
+ * Positioned between the title area and button area. Add StdDlg*Item child nodes
+ * (e.g., {@link StdDlgTextItem}, {@link StdDlgGraphicItem}) which are arranged vertically.
+ *
+ * @example
+ * ```tsx
+ * <stdDlgContentArea>
+ *     <stdDlgTextItem text="Welcome to the app." />
+ *     <stdDlgTextItem text="Please review the following:" namedTextStyle="secondary" />
+ *     <stdDlgBulletTextItem bulletText={["Item A", "Item B", "Item C"]} />
+ * </stdDlgContentArea>
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/std-dlg-content-area}
+ */
+export const StdDlgContentArea: Component<IStdDlgContentAreaProps> = props => {
+    return <stdDlgContentArea {...props}></stdDlgContentArea>;
+};
+
+/**
+ * Button area positioned at the bottom of a {@link StandardDialog}.
+ *
+ * Contains zero or more {@link StdDlgButton} children arranged vertically. A dialog
+ * may have a single optional button area.
+ *
+ * @example
+ * ```tsx
+ * <stdDlgButtonArea>
+ *     <stdDlgButton text="Accept" />
+ *     <stdDlgButton text="Decline" />
+ *     <stdDlgButton text="More Info" disabled={true} />
+ * </stdDlgButtonArea>
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/std-dlg-button-area}
+ */
+export const StdDlgButtonArea: Component<IStdDlgButtonAreaProps> = props => {
+    return <stdDlgButtonArea {...props}></stdDlgButtonArea>;
+};
+
+/**
+ * Freeform side card area on the left or right side of a {@link StandardDialog}.
+ *
+ * Use for decorative images or annotative text. The side card area never gains key focus.
+ * A dialog may contain only a single side card area.
+ *
+ * @example
+ * ```tsx
+ * <stdDlgSideCardArea width={300} horizAlign="right" showDivider={true}>
+ *     <poster uri="pkg:/images/promo.jpg" width={280} height={400} />
+ * </stdDlgSideCardArea>
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/std-dlg-side-card-area}
+ */
+export const StdDlgSideCardArea: Component<IStdDlgSideCardAreaProps> = props => {
+    return <stdDlgSideCardArea {...props}></stdDlgSideCardArea>;
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Button & item structural nodes
+// ──────────────────────────────────────────────────────────────────────────────
+
+/**
+ * A button in a {@link StdDlgButtonArea}. Should only be a direct child of StdDlgButtonArea.
+ *
+ * @example
+ * ```tsx
+ * <stdDlgButtonArea>
+ *     <stdDlgButton text="OK" />
+ *     <stdDlgButton text="Cancel" />
+ * </stdDlgButtonArea>
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/std-dlg-button}
+ */
+export const StdDlgButton: Component<IStdDlgButtonProps> = props => {
+    return <stdDlgButton {...props}></stdDlgButton>;
+};
+
+/**
+ * Groups StdDlg item nodes with reduced spacing and optional radio-button exclusivity.
+ *
+ * Attach `onSelected` to each {@link StdDlgActionCardItem} to handle selection changes.
+ *
+ * @example
+ * ```tsx
+ * const [selectedOption, setSelectedOption] = createSignal(0);
+ *
+ * <stdDlgItemGroup selectedIndex={selectedOption()}>
+ *     <stdDlgActionCardItem iconType="radiobutton" onSelected={() => setSelectedOption(0)}>
+ *         <stdDlgTextItem text="Option A" />
+ *     </stdDlgActionCardItem>
+ *     <stdDlgActionCardItem iconType="radiobutton" onSelected={() => setSelectedOption(1)}>
+ *         <stdDlgTextItem text="Option B" />
+ *     </stdDlgActionCardItem>
+ *     <stdDlgActionCardItem iconType="radiobutton" onSelected={() => setSelectedOption(2)}>
+ *         <stdDlgTextItem text="Option C" />
+ *     </stdDlgActionCardItem>
+ * </stdDlgItemGroup>
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/std-dlg-item-group}
+ */
+export const StdDlgItemGroup: Component<IStdDlgItemGroupProps> = props => {
+    return <stdDlgItemGroup {...props}></stdDlgItemGroup>;
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Content item nodes
+// ──────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Focusable action card that highlights child items with optional icons.
+ *
+ * @example
+ * ```tsx
+ * <stdDlgActionCardItem iconType="checkbox" iconStatus={isChecked()}>
+ *     <stdDlgTextItem text="Enable notifications" />
+ * </stdDlgActionCardItem>
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/std-dlg-action-card-item}
+ */
+export const StdDlgActionCardItem: Component<IStdDlgActionCardItemProps> = props => {
+    return <stdDlgActionCardItem {...props}></stdDlgActionCardItem>;
+};
+
+/**
+ * Displays a bulleted list of text in a {@link StdDlgContentArea}.
+ *
+ * @example
+ * ```tsx
+ * <stdDlgBulletTextItem
+ *     bulletType="numbered"
+ *     bulletText={["Connect to Wi-Fi", "Sign in to your account", "Start streaming"]}
+ * />
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/std-dlg-bullet-text-item}
+ */
+export const StdDlgBulletTextItem: Component<IStdDlgBulletTextItemProps> = props => {
+    return <stdDlgBulletTextItem {...props}></stdDlgBulletTextItem>;
+};
+
+/**
+ * Displays a determinate progress indicator for tasks with a known duration.
+ *
+ * @example
+ * ```tsx
+ * <stdDlgDeterminateProgressItem percent={65} text="Downloading update…" />
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/std-dlg-determinate-progress-item}
+ */
+export const StdDlgDeterminateProgressItem: Component<IStdDlgDeterminateProgressItemProps> = props => {
+    return <stdDlgDeterminateProgressItem {...props}></stdDlgDeterminateProgressItem>;
+};
+
+/**
+ * Displays an image with optional text in a {@link StdDlgContentArea}.
+ *
+ * @example
+ * ```tsx
+ * <stdDlgGraphicItem
+ *     graphicUri="pkg:/images/info-icon.png"
+ *     graphicWidth={48}
+ *     graphicHeight={48}
+ *     graphicAlign="left"
+ *     text="Your device is up to date."
+ * />
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/std-dlg-graphic-item}
+ */
+export const StdDlgGraphicItem: Component<IStdDlgGraphicItemProps> = props => {
+    return <stdDlgGraphicItem {...props}></stdDlgGraphicItem>;
+};
+
+/**
+ * Displays a keyboard or PIN pad in a {@link StdDlgContentArea}.
+ *
+ * @example
+ * ```tsx
+ * <stdDlgKeyboardItem keyLayoutType={StdDlgKeyboardLayoutType.Keyboard} text="" />
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/std-dlg-keyboard-item}
+ */
+export const StdDlgKeyboardItem: Component<IStdDlgKeyboardItemProps> = props => {
+    return <stdDlgKeyboardItem {...props}></stdDlgKeyboardItem>;
+};
+
+/**
+ * Displays text with multiple styles in a {@link StdDlgContentArea}.
+ *
+ * Define named drawing styles and reference them as markup tags in the text content.
+ *
+ * @example
+ * ```tsx
+ * <stdDlgMultiStyleTextItem
+ *     text="Press <key>OK</key> to <action>confirm</action>."
+ *     drawingStyles={{
+ *         key: { fontUri: "font:MediumBoldSystemFont", color: "0xFFFF00FF" },
+ *         action: { fontUri: "font:MediumSystemFont", color: "0x00FF00FF" }
+ *     }}
+ *     audioGuideText="Press OK to confirm."
+ * />
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/std-dlg-multi-style-text-item}
+ */
+export const StdDlgMultiStyleTextItem: Component<IStdDlgMultiStyleTextItemProps> = props => {
+    return <stdDlgMultiStyleTextItem {...props}></stdDlgMultiStyleTextItem>;
+};
+
+/**
+ * Displays an indeterminate spinning progress indicator in a {@link StdDlgContentArea}.
+ *
+ * @example
+ * ```tsx
+ * <stdDlgProgressItem text="Loading, please wait…" />
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/std-dlg-progress-item}
+ */
+export const StdDlgProgressItem: Component<IStdDlgProgressItemProps> = props => {
+    return <stdDlgProgressItem {...props}></stdDlgProgressItem>;
+};
+
+/**
+ * Displays a block of text in a {@link StdDlgContentArea}.
+ *
+ * @example
+ * ```tsx
+ * <stdDlgTextItem text="Your account has been updated." />
+ * <stdDlgTextItem text="Contact support if you have questions." namedTextStyle="secondary" />
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/std-dlg-text-item}
+ */
+export const StdDlgTextItem: Component<IStdDlgTextItemProps> = props => {
+    return <stdDlgTextItem {...props}></stdDlgTextItem>;
+};
+
+/**
+ * Free-form custom item in a {@link StdDlgContentArea} for content requiring custom layout.
+ *
+ * @example
+ * ```tsx
+ * <stdDlgCustomItem fixedWidthField={600}>
+ *     <rectangle width={600} height={200} color="0x333333FF" />
+ * </stdDlgCustomItem>
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/std-dlg-custom-item}
+ */
+export const StdDlgCustomItem: Component<IStdDlgCustomItemProps> = props => {
+    return <stdDlgCustomItem {...props}></stdDlgCustomItem>;
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Pre-built Dialog Nodes
+// ──────────────────────────────────────────────────────────────────────────────
+// StandardMessageDialog, StandardKeyboardDialog, StandardPinPadDialog, and
+// StandardProgressDialog live in their own modules so unused dialogs and their XML
+// assets tree-shake out of consuming apps. They are re-exported from the package barrel.

package/src/sg-nodes/standard-keyboard-dialog.props.ts

@@ -0,0 +1,84 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { IStandardDialogProps } from "./standard-dialog.props";
+import type { EventHandler } from "./types";
+
+/** Keyboard input domain type for {@link StandardKeyboardDialog}. */
+export type IKeyboardDomain = "email" | "numeric" | "alphanumeric" | "generic" | "password";
+
+/**
+ * Properties for the {@link StandardKeyboardDialog} component.
+ *
+ * Extends {@link IStandardDialogProps} with keyboard-specific fields for text entry.
+ *
+ * @see {@link https://developer.roku.com/dev/docs/standard-keyboard-dialog}
+ */
+export interface IStandardKeyboardDialogProps extends IStandardDialogProps {
+    /**
+     * The title displayed at the top of the dialog.
+     * @default ""
+     */
+    title?: string;
+    /**
+     * One or more blocks of text describing the data to be entered.
+     * Each string in the array is displayed as a separate block of text.
+     * Minimize message length to avoid automatic scrollbar.
+     * @default []
+     */
+    message?: string[];
+    /**
+     * List of button labels to display in the button area at the bottom of the dialog.
+     * Minimize the number of buttons to ensure visibility without scrolling.
+     * @default []
+     */
+    buttons?: string[];
+    /**
+     * The type of text to be entered. Used by the keyboard to modify voice entry method
+     * and determine when a valid string has been entered.
+     * - `"email"`: letter-by-letter dictation for emails
+     * - `"numeric"`: letter-by-letter dictation for PIN codes, zip codes
+     * - `"alphanumeric"`: letter-by-letter dictation for addresses
+     * - `"generic"`: full word input for search queries (default)
+     * - `"password"`: letter-by-letter dictation for passwords
+     * @default "generic"
+     */
+    keyboardDomain?: IKeyboardDomain;
+    /**
+     * The default string displayed in the keyboard's text edit box.
+     * Updated with the currently entered string as the user types.
+     *
+     * @note Reactivity on this field has been intentionally removed. Binding a signal directly
+     * to `text` would cause an infinite loop: the user types → `onText` fires → signal updates →
+     * `text` prop changes → the keyboard resets the field → cursor jumps back. Use `onText` to
+     * track the live value and only set `text` as an initial/default value.
+     * @default ""
+     */
+    text?: string;
+    /**
+     * Fired whenever the text in the keyboard's text edit box changes (on each keystroke).
+     * The handler receives the full current string entered by the user.
+     *
+     * Use this to react to live input — for example to validate input, update a search
+     * suggestion list, or enable/disable action buttons based on what the user has typed so far.
+     *
+     * @example
+     * ```tsx
+     * const [inputText, setInputText] = createSignal("");
+     *
+     * <StandardKeyboardDialog
+     *     title="Search"
+     *     keyboardDomain="generic"
+     *     text={inputText()}
+     *     onText={(text) => {
+     *         // Called on every keystroke with the full current text
+     *         setInputText(text);
+     *         console.log("User is typing:", text);
+     *     }}
+     *     buttons={["Search", "Cancel"]}
+     *     onButtonSelected={(index) => console.log("Button:", index)}
+     * />
+     * ```
+     */
+    onText?: EventHandler<string>;
+}

package/src/sg-nodes/standard-keyboard-dialog.tsx

@@ -0,0 +1,58 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import { Modal, modalPropKeys } from "../modal-dialog";
+import { retainAsset } from "../retain-asset";
+import StandardKeyboardDialogExtXML from "../xml-components/modal/StandardKeyboardDialogExt.xml";
+import type { IStandardKeyboardDialogProps } from "./standard-keyboard-dialog.props";
+import { Component, splitProps } from "./types";
+export type { IKeyboardDomain, IStandardKeyboardDialogProps } from "./standard-keyboard-dialog.props";
+
+/**
+ * Displays a keyboard dialog for text and voice entry of alphanumeric characters and symbols.
+ *
+ * StandardKeyboardDialog is a pre-built dialog similar to the legacy KeyboardDialog node, but includes voice entry functionality through its internal DynamicKeyboard node.
+ *
+ * The {@link IStandardKeyboardDialogProps.keyboardDomain | keyboardDomain} property controls
+ * how voice input is processed:
+ * - `"generic"`: full word input for search queries
+ * - `"email"`: letter-by-letter for email addresses
+ * - `"password"`: letter-by-letter for passwords
+ * - `"numeric"`: letter-by-letter for PINs and zip codes
+ * - `"alphanumeric"`: letter-by-letter for street addresses
+ *
+ * @example
+ * ```tsx
+ * const [showKeyboard, setShowKeyboard] = createSignal(false);
+ * const [searchText, setSearchText] = createSignal("");
+ *
+ * {showKeyboard() && (
+ *     <StandardKeyboardDialog
+ *         title="Search"
+ *         message={["Enter your search query:"]}
+ *         keyboardDomain="generic"
+ *         text={searchText()}
+ *         buttons={["Search", "Cancel"]}
+ *         // onText fires on every keystroke with the full current string
+ *         onText={(text) => {
+ *             setSearchText(text);
+ *             console.log("Live input:", text);
+ *         }}
+ *         onButtonSelected={(index) => {
+ *             if (index === 0) {
+ *                 console.log("Searching for:", searchText());
+ *             }
+ *             setShowKeyboard(false);
+ *         }}
+ *         onWasClosed={() => setShowKeyboard(false)}
+ *     />
+ * )}
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/standard-keyboard-dialog}
+ */
+export const StandardKeyboardDialog: Component<IStandardKeyboardDialogProps> = props => {
+    retainAsset(StandardKeyboardDialogExtXML);
+    const [local, rest] = splitProps(props, modalPropKeys);
+    return <Modal {...local} dialog={<standardKeyboardDialogExt {...rest} />} />;
+};

package/src/sg-nodes/standard-message-dialog.props.ts

@@ -0,0 +1,56 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { IStandardDialogProps } from "./standard-dialog.props";
+
+/** Bullet list delimiter type for {@link StandardMessageDialog}. */
+export type IStandardBulletType = "bullet" | "numbered" | "lettered";
+
+/**
+ * Properties for the {@link StandardMessageDialog} component.
+ *
+ * Extends {@link IStandardDialogProps} with message-specific fields for displaying
+ * informational text blocks and bulleted lists.
+ *
+ * @see {@link https://developer.roku.com/dev/docs/standard-message-dialog}
+ */
+export interface IStandardMessageDialogProps extends IStandardDialogProps {
+    /**
+     * The title displayed at the top of the dialog.
+     * @default ""
+     */
+    title?: string;
+    /**
+     * One or more blocks of informational text displayed at the top of the dialog's content area.
+     * Each string in the array is displayed as a separate block of text with standard spacing.
+     * To separate lines of text, add each line as an element in the array (do not use newline characters).
+     * @default []
+     */
+    message?: string[];
+    /**
+     * An array of strings displayed as a bulleted or numbered list in the content area,
+     * below the message and above the bottom message.
+     * @default []
+     */
+    bulletText?: string[];
+    /**
+     * Specifies the type of list item delimiter when {@link bulletText} is set.
+     * - `"bullet"`: bullet points (default)
+     * - `"numbered"`: numbered list (1, 2, 3...)
+     * - `"lettered"`: lettered list (a, b, c...)
+     * @default "bullet"
+     */
+    bulletType?: IStandardBulletType;
+    /**
+     * One or more blocks of informational text displayed at the bottom of the dialog's content area.
+     * Each string in the array is displayed as a separate block of text with standard spacing.
+     * @default []
+     */
+    bottomMessage?: string[];
+    /**
+     * List of button labels to display in the button area at the bottom of the dialog.
+     * Each string adds a new button. Minimize the number of buttons to ensure visibility.
+     * @default []
+     */
+    buttons?: string[];
+}

package/src/sg-nodes/standard-message-dialog.tsx

@@ -0,0 +1,47 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import { Modal, modalPropKeys } from "../modal-dialog";
+import { retainAsset } from "../retain-asset";
+import StandardMessageDialogExtXML from "../xml-components/modal/StandardMessageDialogExt.xml";
+import type { IStandardMessageDialogProps } from "./standard-message-dialog.props";
+import { Component, splitProps } from "./types";
+export type { IStandardBulletType, IStandardMessageDialogProps } from "./standard-message-dialog.props";
+
+/**
+ * Displays a message dialog with optional title, text blocks, bulleted list, and buttons.
+ *
+ * StandardMessageDialog is a pre-built dialog similar to the legacy Dialog node. It provides a convenient way to display informational messages with:
+ * - One or more text blocks at the top ({@link IStandardMessageDialogProps.message | message})
+ * - An optional bulleted/numbered/lettered list ({@link IStandardMessageDialogProps.bulletText | bulletText})
+ * - One or more text blocks at the bottom ({@link IStandardMessageDialogProps.bottomMessage | bottomMessage})
+ * - A row of buttons ({@link IStandardMessageDialogProps.buttons | buttons})
+ *
+ * @example
+ * ```tsx
+ * const [showDialog, setShowDialog] = createSignal(false);
+ *
+ * {showDialog() && (
+ *     <StandardMessageDialog
+ *         title="Terms of Service"
+ *         message={["Please review the following terms:"]}
+ *         bulletText={["You must be 18 or older", "Content is for personal use only", "Subscription auto-renews monthly"]}
+ *         bulletType="numbered"
+ *         bottomMessage={["By continuing, you agree to these terms."]}
+ *         buttons={["Accept", "Decline"]}
+ *         onButtonSelected={(index) => {
+ *             console.log(index === 0 ? "Accepted" : "Declined");
+ *             setShowDialog(false);
+ *         }}
+ *         onWasClosed={() => setShowDialog(false)}
+ *     />
+ * )}
+ * ```
+ *
+ * @see {@link https://developer.roku.com/dev/docs/standard-message-dialog}
+ */
+export const StandardMessageDialog: Component<IStandardMessageDialogProps> = props => {
+    retainAsset(StandardMessageDialogExtXML);
+    const [local, rest] = splitProps(props, modalPropKeys);
+    return <Modal {...local} dialog={<standardMessageDialogExt {...rest} />} />;
+};