@roku-sdk/components 0.0.0-stage → 2.18.0

package/src/__tests__/tween-release.test.tsx

@@ -0,0 +1,125 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+// ---------------------------------------------------------------------------
+// Tween nulls its target ref on dispose.
+//
+// The tween node and the node it animates reference each other on the render thread, so a
+// tween left holding its target keeps a disposed grid alive. Each case disposes one tween and
+// checks the last write to `targetNode` is null, on the native node and on the compat shim.
+// ---------------------------------------------------------------------------
+
+import "@roku-sdk/compat";
+
+import { afterEach, beforeEach, describe, expect, jest, test } from "@jest/globals";
+import type { DomNode } from "@roku-sdk/interfaces";
+import { hasFeature } from "@roku-sdk/runtime/has-feature";
+import { createSignal, type JSX, Show, tmTransaction } from "@roku-sdk/solid";
+
+import { commitEarly, createAnchorNode, installSolidTestRenderer } from "../test-helpers/tween-test-setup";
+import { Tween } from "../tween";
+
+jest.mock("@roku-sdk/runtime/has-feature", () => ({
+    // The side-effect compat import loads this factory before the imported jest binding.
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    hasFeature: require("@jest/globals").jest.fn()
+}));
+
+type Case = [name: string, render: (target: () => DomNode | undefined) => JSX.Element];
+
+const cases: Case[] = [
+    ["float field", target => <Tween targetRef={target} field="width" targetValue={100} />],
+    ["vector field", target => <Tween targetNode={target} axis="y" targetValue={100} />]
+];
+
+const modes: [mode: string, native: boolean, nodeType: string][] = [
+    ["compat shim", false, "RsgTweenShim"],
+    ["native", true, "tween"]
+];
+
+describe("Tween releases its target ref", () => {
+    let render: ReturnType<typeof installSolidTestRenderer>;
+    let setProperty: jest.SpiedFunction<typeof tmTransaction.setProperty>;
+    let createElement: jest.SpiedFunction<typeof tmTransaction.createElement>;
+
+    beforeEach(() => {
+        render = installSolidTestRenderer();
+        setProperty = jest.spyOn(tmTransaction, "setProperty");
+        createElement = jest.spyOn(tmTransaction, "createElement");
+    });
+
+    afterEach(() => {
+        jest.mocked(hasFeature).mockReset();
+        setProperty.mockRestore();
+        createElement.mockRestore();
+    });
+
+    const created = (nodeType: string): DomNode[] =>
+        createElement.mock.results.map(r => r.value as DomNode).filter(node => node.t === nodeType);
+    const lastWrite = (node: DomNode, name: string) => {
+        const writes = setProperty.mock.calls.filter(([n, field]) => n === node && field === name);
+        return writes[writes.length - 1];
+    };
+
+    describe.each(modes)("%s", (_mode, native, nodeType) => {
+        test.each(cases)("%s: nulls targetNode on dispose", (_name, renderTween) => {
+            jest.mocked(hasFeature).mockReturnValue(native);
+            let target: DomNode | undefined;
+            const dispose = render(
+                () => (
+                    <group>
+                        <rectangle id="target" ref={(el: unknown) => (target = el as DomNode)} />
+                        {renderTween(() => target)}
+                    </group>
+                ),
+                createAnchorNode()
+            );
+            commitEarly();
+
+            const [tween] = created(nodeType);
+            expect(created(nodeType)).toHaveLength(1);
+            expect(lastWrite(tween, "targetNode")?.[2]).toBe(target);
+
+            dispose();
+            commitEarly();
+
+            expect(lastWrite(tween, "targetNode")).toStrictEqual([tween, "targetNode", null, undefined]);
+        });
+    });
+
+    // The shim releases its Animation when targetNode is cleared, so the clear has to be issued
+    // before the tween node is taken out of the tree, not after.
+    test("clears targetNode before the unmounted tween is removed", () => {
+        jest.mocked(hasFeature).mockReturnValue(false);
+        const removeNode = jest.spyOn(tmTransaction, "removeNode");
+        const [shown, setShown] = createSignal(true);
+        let target: DomNode | undefined;
+        render(
+            () => (
+                <group>
+                    <rectangle id="target" ref={(el: unknown) => (target = el as DomNode)} />
+                    <Show when={shown()}>
+                        <Tween targetNode={() => target} field="width" targetValue={100} />
+                    </Show>
+                </group>
+            ),
+            createAnchorNode()
+        );
+        commitEarly();
+        const [tween] = created("RsgTweenShim");
+        expect(lastWrite(tween, "targetNode")?.[2]).toBe(target);
+
+        setShown(false);
+        commitEarly();
+
+        const clearAt = setProperty.mock.calls.findIndex(
+            ([n, field, value]) => n === tween && field === "targetNode" && value === null
+        );
+        expect(clearAt).toBeGreaterThanOrEqual(0);
+        const removed = removeNode.mock.calls.findIndex(([, child]) => child === tween);
+        expect(removed).toBeGreaterThanOrEqual(0);
+        expect(setProperty.mock.invocationCallOrder[clearAt]).toBeLessThan(
+            removeNode.mock.invocationCallOrder[removed]
+        );
+        removeNode.mockRestore();
+    });
+});

package/src/__tests__/tween-stops-shape.test.tsx

@@ -0,0 +1,165 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+// ---------------------------------------------------------------------------
+// Tween warns in dev builds when proposedStops does not have the shape its field and axis call
+// for: number[] on a float field or on a vector field under axis "x" / "y", [x, y][] under axis
+// "all" (the default) on a vector field, and no axis on a float field. Each distinct problem is
+// reported once per instance; unknown fields are not checked; nothing is reported without __DEV__.
+// ---------------------------------------------------------------------------
+
+import "@roku-sdk/compat";
+
+import { afterEach, beforeEach, describe, expect, jest, test } from "@jest/globals";
+import type { DomNode } from "@roku-sdk/interfaces";
+import { hasFeature } from "@roku-sdk/runtime/has-feature";
+import { createSignal, type JSX } from "@roku-sdk/solid";
+
+import { commitEarly, createAnchorNode, installSolidTestRenderer } from "../test-helpers/tween-test-setup";
+import { Tween } from "../tween";
+
+jest.mock("@roku-sdk/runtime/has-feature", () => ({
+    // The side-effect compat import loads this factory before the imported jest binding.
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    hasFeature: require("@jest/globals").jest.fn()
+}));
+
+type Stops = number[] | [number, number][];
+
+describe("Tween proposedStops shape warning (dev only)", () => {
+    let render: ReturnType<typeof installSolidTestRenderer>;
+    let warn: jest.SpiedFunction<typeof console.warn>;
+    let realDev: boolean | undefined;
+    let dispose: (() => void) | undefined;
+
+    beforeEach(() => {
+        realDev = (globalThis as { __DEV__?: boolean }).__DEV__;
+        (globalThis as { __DEV__?: boolean }).__DEV__ = true;
+        jest.mocked(hasFeature).mockReturnValue(true);
+        render = installSolidTestRenderer();
+        warn = jest.spyOn(console, "warn").mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+        dispose?.();
+        dispose = undefined;
+        (globalThis as { __DEV__?: boolean }).__DEV__ = realDev;
+        jest.mocked(hasFeature).mockReset();
+        warn.mockRestore();
+    });
+
+    const mount = (renderTween: (target: () => DomNode | undefined) => JSX.Element): void => {
+        let target: DomNode | undefined;
+        dispose = render(
+            () => (
+                <group>
+                    <rectangle ref={(el: unknown) => (target = el as DomNode)} />
+                    {renderTween(() => target)}
+                </group>
+            ),
+            createAnchorNode()
+        );
+        commitEarly();
+    };
+
+    const tweenWarnings = (): string[] =>
+        warn.mock.calls.map(c => String(c[0])).filter(message => message.startsWith("Tween:"));
+
+    test("warns once when a vector field under axis x / y gets an array stop", () => {
+        mount(target => (
+            <Tween
+                targetRef={target}
+                axis="x"
+                targetValue={100}
+                proposedStops={[[300, 0], 200] as unknown as number[]}
+            />
+        ));
+        expect(tweenWarnings()).toEqual([
+            'Tween: proposedStops on "translation" with axis "x" must be scalars (the x coordinate); got an array. Array entries are skipped.'
+        ]);
+    });
+
+    test("warns when a vector field under axis all gets a scalar stop", () => {
+        mount(target => <Tween targetRef={target} axis="all" targetVector={[100, 100]} proposedStops={[400, 300]} />);
+        expect(tweenWarnings()).toEqual([
+            'Tween: proposedStops on "translation" with axis "all" must be [x, y] pairs; got a scalar. Scalar entries are skipped.'
+        ]);
+    });
+
+    test("treats an unset axis on a vector field as all, and checks pair length", () => {
+        mount(target => (
+            <Tween
+                targetRef={target}
+                field="scale"
+                targetVector={[1, 1]}
+                proposedStops={[[1, 2, 3]] as unknown as [number, number][]}
+            />
+        ));
+        expect(tweenWarnings()).toEqual([
+            'Tween: proposedStops on "scale" with axis "all" must be [x, y] pairs; got an array of length 3. Entries that are not pairs are skipped.'
+        ]);
+    });
+
+    test("warns when a float field is given an axis", () => {
+        mount(target => <Tween targetRef={target} field="opacity" axis="x" targetValue={0.5} proposedStops={[0.2]} />);
+        expect(tweenWarnings()).toEqual(['Tween: axis "x" is ignored on float field "opacity"; remove it.']);
+    });
+
+    test("warns when a float field gets an array stop", () => {
+        mount(target => (
+            <Tween
+                targetRef={target}
+                field="width"
+                targetValue={100}
+                proposedStops={[[50, 50]] as [number, number][]}
+            />
+        ));
+        expect(tweenWarnings()).toEqual([
+            'Tween: proposedStops on float field "width" must be numbers; got an array. Array entries are skipped.'
+        ]);
+    });
+
+    test("reports each distinct problem once per instance, across stop updates", () => {
+        const [stops, setStops] = createSignal<Stops>([400, 300]);
+        mount(target => <Tween targetRef={target} targetVector={[100, 100]} proposedStops={stops()} />);
+        setStops([500]);
+        commitEarly();
+        setStops([[1, 2, 3]] as unknown as [number, number][]);
+        commitEarly();
+        setStops([600]);
+        commitEarly();
+        expect(tweenWarnings()).toHaveLength(2);
+        expect(tweenWarnings()[0]).toContain("got a scalar");
+        expect(tweenWarnings()[1]).toContain("got an array of length 3");
+    });
+
+    test("does not warn when every stop has the right shape", () => {
+        mount(target => (
+            <>
+                <Tween targetRef={target} axis="y" targetValue={100} proposedStops={[100, 200]} />
+                <Tween targetRef={target} targetVector={[1, 2]} proposedStops={[[1, 2]]} />
+                <Tween targetRef={target} field="rotation" targetValue={1} proposedStops={[0.5, 1]} />
+                <Tween targetRef={target} field="opacity" targetValue={1} />
+            </>
+        ));
+        expect(tweenWarnings()).toEqual([]);
+    });
+
+    test("does not check a field it does not know", () => {
+        mount(target => (
+            <Tween
+                targetRef={target}
+                field="customField"
+                axis="all"
+                targetValue={1}
+                proposedStops={[1, [1, 2, 3]] as unknown as number[]}
+            />
+        ));
+        expect(tweenWarnings()).toEqual([]);
+    });
+
+    test("is silent without __DEV__", () => {
+        (globalThis as { __DEV__?: boolean }).__DEV__ = false;
+        mount(target => <Tween targetRef={target} axis="all" targetVector={[100, 100]} proposedStops={[400, 300]} />);
+        expect(tweenWarnings()).toEqual([]);
+    });
+});

package/src/__tests__/tween-without-compat.test.tsx

@@ -0,0 +1,64 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+// ---------------------------------------------------------------------------
+// Without `@roku-sdk/compat`, a Tween on firmware with no native node refuses loudly instead of
+// asking SceneGraph for a node type it does not have. This file deliberately never imports
+// compat, so only the refusal alias is registered.
+// ---------------------------------------------------------------------------
+
+import "@roku-sdk/compat/refuse-gated-tags";
+
+import { afterEach, beforeEach, describe, expect, jest, test } from "@jest/globals";
+import type { DomNode } from "@roku-sdk/interfaces";
+import { hasFeature } from "@roku-sdk/runtime/has-feature";
+
+import { commitEarly, createAnchorNode, installSolidTestRenderer } from "../test-helpers/tween-test-setup";
+import { Tween } from "../tween";
+
+jest.mock("@roku-sdk/runtime/has-feature", () => ({
+    // The side-effect compat import loads this factory before the imported jest binding.
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    hasFeature: require("@jest/globals").jest.fn()
+}));
+
+describe("Tween without @roku-sdk/compat", () => {
+    let render: ReturnType<typeof installSolidTestRenderer>;
+    let dispose: (() => void) | undefined;
+
+    beforeEach(() => {
+        render = installSolidTestRenderer();
+    });
+
+    afterEach(() => {
+        dispose?.();
+        dispose = undefined;
+        jest.mocked(hasFeature).mockReset();
+    });
+
+    const mount = (): void => {
+        let target: DomNode | undefined;
+        dispose = render(
+            () => (
+                <group>
+                    <rectangle ref={(el: unknown) => (target = el as DomNode)} />
+                    <Tween targetRef={() => target} axis="x" targetValue={100} />
+                </group>
+            ),
+            createAnchorNode()
+        );
+        commitEarly();
+    };
+
+    test("throws naming the missing firmware feature and compat when the firmware lacks the node", () => {
+        jest.mocked(hasFeature).mockReturnValue(false);
+
+        expect(mount).toThrow('<tween> requires the "tween" firmware feature or @roku-sdk/compat');
+    });
+
+    test("creates the native node when the firmware has it", () => {
+        jest.mocked(hasFeature).mockReturnValue(true);
+
+        expect(mount).not.toThrow();
+    });
+});

package/src/__tests__/tween.test.tsx

@@ -0,0 +1,195 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+// ---------------------------------------------------------------------------
+// Tween renders one `<tween>`: the native node when firmware reports the "tween" feature,
+// otherwise the compat shim. It sends the native node only the fields it has.
+// ---------------------------------------------------------------------------
+
+import "@roku-sdk/compat";
+
+import { afterEach, beforeEach, describe, expect, jest, test } from "@jest/globals";
+import type { AnimationState, Vector2D } from "@roku-sdk/components";
+import type { DomNode } from "@roku-sdk/interfaces";
+import { hasFeature } from "@roku-sdk/runtime/has-feature";
+import { batch, createSignal, type JSX, tmTransaction } from "@roku-sdk/solid";
+
+import { commitEarly, createAnchorNode, installSolidTestRenderer } from "../test-helpers/tween-test-setup";
+import { Tween } from "../tween";
+
+jest.mock("@roku-sdk/runtime/has-feature", () => ({
+    // The side-effect compat import loads this factory before the imported jest binding.
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    hasFeature: require("@jest/globals").jest.fn()
+}));
+
+describe("Tween", () => {
+    let render: ReturnType<typeof installSolidTestRenderer>;
+    let setProperty: jest.SpiedFunction<typeof tmTransaction.setProperty>;
+    let createElement: jest.SpiedFunction<typeof tmTransaction.createElement>;
+    let dispose: (() => void) | undefined;
+
+    beforeEach(() => {
+        render = installSolidTestRenderer();
+        setProperty = jest.spyOn(tmTransaction, "setProperty");
+        createElement = jest.spyOn(tmTransaction, "createElement");
+    });
+
+    afterEach(() => {
+        dispose?.();
+        dispose = undefined;
+        jest.mocked(hasFeature).mockReset();
+        setProperty.mockRestore();
+        createElement.mockRestore();
+    });
+
+    const createdTypes = (): string[] => createElement.mock.results.map(r => (r.value as DomNode).t);
+
+    const mount = (native: boolean, renderTween: (target: () => DomNode | undefined) => JSX.Element): DomNode => {
+        jest.mocked(hasFeature).mockReturnValue(native);
+        let target: DomNode | undefined;
+        dispose = render(
+            () => (
+                <group>
+                    <rectangle ref={(el: unknown) => (target = el as DomNode)} />
+                    {renderTween(() => target)}
+                </group>
+            ),
+            createAnchorNode()
+        );
+        commitEarly();
+        const index = createElement.mock.calls.findIndex(([tag]) => tag === "tween");
+        return createElement.mock.results[index].value as DomNode;
+    };
+    const writes = (node: DomNode, name: string): unknown[] =>
+        setProperty.mock.calls.filter(([n, field]) => n === node && field === name).map(([, , value]) => value);
+
+    describe("node selection", () => {
+        test("creates the native node alone when the firmware reports the feature", () => {
+            const tween = mount(true, target => <Tween targetRef={target} axis="x" targetValue={100} />);
+
+            expect(tween.t).toBe("tween");
+            expect(createdTypes()).toEqual(["group", "rectangle", "tween"]);
+        });
+
+        test("creates the compat shim alone when the firmware does not report the feature", () => {
+            const tween = mount(false, target => <Tween targetRef={target} axis="x" targetValue={100} />);
+
+            expect(tween.t).toBe("RsgTweenShim");
+            expect(createdTypes()).toEqual(["group", "rectangle", "RsgTweenShim"]);
+        });
+    });
+
+    describe("native field contract", () => {
+        test('sends an axis="all" targetVector as given and writes no targetValue', () => {
+            const tween = mount(true, target => <Tween targetRef={target} axis="all" targetVector={[40, 90]} />);
+
+            expect(writes(tween, "targetVector")).toContainEqual([40, 90]);
+            expect(writes(tween, "targetValue").filter(v => v !== undefined)).toHaveLength(0);
+        });
+
+        test("sends the target immediately", () => {
+            const tween = mount(true, target => <Tween targetRef={target} axis="x" targetValue={100} />);
+
+            expect(writes(tween, "targetValue")).toContain(100);
+        });
+
+        test.each([true, false])("omits the state observer without a callback (native=%s)", native => {
+            const tween = mount(native, target => <Tween targetRef={target} targetValue={100} />);
+
+            expect(writes(tween, "onAnimationState").filter(value => value !== undefined)).toHaveLength(0);
+        });
+
+        test("reactively installs, replaces and removes the state callback", () => {
+            type Handler = NonNullable<Parameters<typeof Tween>[0]["onAnimationState"]>;
+            const [callback, setCallback] = createSignal<Handler | undefined>();
+            const first = jest.fn<Handler>();
+            const second = jest.fn<Handler>();
+            const tween = mount(true, target => <Tween targetRef={target} onAnimationState={callback()} />);
+            expect(writes(tween, "onAnimationState").filter(value => value !== undefined)).toHaveLength(0);
+
+            setCallback(() => first);
+            commitEarly();
+            const adapter = writes(tween, "onAnimationState").at(-1) as (t: [AnimationState, Vector2D]) => void;
+            expect(typeof adapter).toBe("function");
+            adapter(["running", [10, 20]]);
+            expect(first).toHaveBeenCalledWith("running", [10, 20]);
+
+            setCallback(() => second);
+            commitEarly();
+            adapter(["stopped", [30, 40]]);
+            expect(second).toHaveBeenCalledWith("stopped", [30, 40]);
+            expect(first).toHaveBeenCalledTimes(1);
+
+            setCallback(undefined);
+            commitEarly();
+            expect(writes(tween, "onAnimationState").at(-1)).toBeUndefined();
+        });
+
+        test("forwards onAnimationState as (state, value)", () => {
+            const onAnimationState = jest.fn();
+            const tween = mount(true, target => (
+                <Tween targetRef={target} axis="x" targetValue={100} onAnimationState={onAnimationState} />
+            ));
+
+            const handler = writes(tween, "onAnimationState")[0] as (t: [AnimationState, Vector2D]) => void;
+            handler(["running", [10, 20]]);
+
+            expect(onAnimationState).toHaveBeenCalledWith("running", [10, 20]);
+        });
+    });
+
+    test("targetNode takes precedence over the deprecated targetRef alias", () => {
+        const legacy = { t: "rectangle", r: { id: 999 }, c: [] } as unknown as DomNode;
+        const tween = mount(true, target => <Tween targetNode={target} targetRef={legacy} targetValue={100} />);
+        const targets = writes(tween, "targetNode");
+        expect(targets).toHaveLength(1);
+        expect(targets[0]).not.toBe(legacy);
+    });
+
+    describe("target switch", () => {
+        test.each([
+            ["value first", true],
+            ["target first", false]
+        ])("writes the new targetNode before the trigger that goes with it (%s)", (_, valueFirst) => {
+            jest.mocked(hasFeature).mockReturnValue(true);
+            const nodes: Record<string, DomNode> = {};
+            const [onB, setOnB] = createSignal(false);
+            const [to, setTo] = createSignal(100);
+            dispose = render(
+                () => (
+                    <group>
+                        <rectangle ref={(el: unknown) => (nodes.a = el as DomNode)} />
+                        <rectangle ref={(el: unknown) => (nodes.b = el as DomNode)} />
+                        <Tween targetNode={() => (onB() ? nodes.b : nodes.a)} axis="x" targetValue={to()} />
+                    </group>
+                ),
+                createAnchorNode()
+            );
+            commitEarly();
+            const tween = createElement.mock.results[createElement.mock.calls.findIndex(([t]) => t === "tween")]
+                .value as DomNode;
+            setProperty.mockClear();
+
+            batch(() => {
+                if (valueFirst) setTo(300);
+                setOnB(true);
+                if (!valueFirst) setTo(300);
+            });
+            commitEarly();
+
+            const order = setProperty.mock.calls
+                .filter(([n, field]) => n === tween && (field === "targetNode" || field === "targetValue"))
+                .map(([, field, value]) => (field === "targetNode" ? (value === nodes.b ? "B" : "?") : value));
+            expect(order).toEqual(["B", 300]);
+        });
+    });
+
+    describe("shim field contract", () => {
+        test("writes no animationNode", () => {
+            const tween = mount(false, target => <Tween targetRef={target} axis="x" targetValue={100} />);
+
+            expect(writes(tween, "animationNode")).toHaveLength(0);
+        });
+    });
+});

package/src/blended-busy-spinner.props.ts

@@ -0,0 +1,37 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { IBusySpinnerProps } from "./sg-nodes/busy-spinner.props";
+
+/**
+ * Properties for the BlendedBusySpinner node.
+ *
+ * BlendedBusySpinner extends BusySpinner with blend color support, displaying an animated
+ * spinning indicator to show that content is loading or an operation is in progress.
+ *
+ * The spinner inherits all BusySpinner properties (control, clockwise, spinInterval, uri)
+ * and adds blend color customization.
+ *
+ * @see {@link https://developer.roku.com/dev/docs/busyspinner}
+ *
+ * @example
+ * // Basic usage with default appearance
+ * <BlendedBusySpinner control="start" translation={[100, 100]} uri="pkg:/images/loader.png" />
+ *
+ * @example
+ * // Custom spinner with speed control and blend color
+ * <BlendedBusySpinner
+ *   control="start"
+ *   clockwise={false}
+ *   spinInterval={1}
+ *   uri="pkg:/images/custom-spinner.png"
+ *   blendColor="0xFF0000FF"
+ * />
+ */
+export interface IBlendedBusySpinnerProps extends IBusySpinnerProps {
+    /**
+     * Specifies the blend color for the spinner image.
+     * The blend color is applied to the spinner bitmap to modify its appearance.
+     */
+    blendColor?: string;
+}

package/src/blended-busy-spinner.tsx

@@ -0,0 +1,13 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { IBlendedBusySpinnerProps } from "./blended-busy-spinner.props";
+import { retainAsset } from "./retain-asset";
+import { Component } from "./sg-nodes/types";
+import BlendedBusySpinnerXML from "./xml-components/blended-busy-spinner/BlendedBusySpinner.xml";
+export type { IBlendedBusySpinnerProps } from "./blended-busy-spinner.props";
+
+export const BlendedBusySpinner: Component<IBlendedBusySpinnerProps> = props => {
+    retainAsset(BlendedBusySpinnerXML);
+    return <blendedBusySpinner {...props}></blendedBusySpinner>;
+};

package/src/bounding-tracker.props.ts

@@ -0,0 +1,18 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { IGroupProps } from "./sg-nodes/group.props";
+import type { EventHandler, JSX } from "./sg-nodes/types";
+
+export interface IBoundingRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+export interface IBoundingTrackerProps extends IGroupProps {
+    doMeasure?: boolean;
+    onBoundsChange?: EventHandler<IBoundingRect>;
+    children?: JSX.Element;
+}

package/src/bounding-tracker.tsx

@@ -0,0 +1,13 @@
+// Copyright (c) 2026 Roku, Inc.
+// SPDX-License-Identifier: MIT
+
+import type { IBoundingTrackerProps } from "./bounding-tracker.props";
+import { Component } from "./index";
+import { retainAsset } from "./retain-asset";
+import BoundingTrackerXML from "./xml-components/bounding-tracker/BoundingTracker.xml";
+export type { IBoundingRect, IBoundingTrackerProps } from "./bounding-tracker.props";
+
+export const BoundingTracker: Component<IBoundingTrackerProps> = props => {
+    retainAsset(BoundingTrackerXML);
+    return <bounding-tracker {...props}>{props.children}</bounding-tracker>;
+};