@rocapine/react-native-onboarding-ui 1.36.1 → 1.37.0

package/dist/UI/Pages/ComposableScreen/elements/runActions.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runActions = runActions;
+const expression_1 = require("./expression");
+// Decode a multi-select variable's stored value (JSON-encoded string[], as
+// written by CheckboxGroup) into a string array. Tolerates undefined / non-array
+// / unparseable input by returning [].
+function decodeArrayValue(raw) {
+    if (!raw)
+        return [];
+    try {
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) ? parsed.map(String) : [];
+    }
+    catch (_a) {
+        return [];
+    }
+}
+// Sequentially runs a list of press actions against the render context. Shared
+// by `Button` (its `actions`) and the generic `onPress` on every UIElement
+// (wired centrally in renderElement.tsx). Semantics:
+//   - "continue"     → advance the onboarding; terminal (stops the loop).
+//   - {setVariable}  → write a variable (expression-evaluated when valueMode === "expression").
+//   - {custom}       → invoke the host-registered customAction with the requested
+//                      variables; warns if unregistered, aborts the loop on throw.
+async function runActions(actions, ctx) {
+    var _a, _b;
+    const { onContinue, setVariable, customActions, variables } = ctx;
+    for (const act of actions) {
+        if (act === "continue") {
+            onContinue();
+            return;
+        }
+        if (act.type === "setVariable") {
+            let value;
+            let kind;
+            if (act.valueMode === "expression") {
+                const computed = (0, expression_1.evaluateSetVariableExpression)(act.value, variables);
+                value = computed.value;
+                kind = computed.kind;
+            }
+            else {
+                value = act.value;
+                kind = act.kind;
+            }
+            if (act.arrayOp) {
+                // Multi-select set operation on the JSON-encoded string[] used by
+                // CheckboxGroup. value/label are the single member being added/removed.
+                const entry = variables[act.name];
+                const curValues = decodeArrayValue(entry === null || entry === void 0 ? void 0 : entry.value);
+                const curLabels = (entry === null || entry === void 0 ? void 0 : entry.label) ? entry.label.split(", ") : [];
+                const memberLabel = (_a = act.label) !== null && _a !== void 0 ? _a : value;
+                const idx = curValues.indexOf(value);
+                const present = idx !== -1;
+                const add = act.arrayOp === "append" || (act.arrayOp === "toggle" && !present);
+                let nextValues;
+                let nextLabels;
+                if (add) {
+                    // Dedup: appending an already-present member is a no-op.
+                    nextValues = present ? curValues : [...curValues, value];
+                    nextLabels = present ? curLabels : [...curLabels, memberLabel];
+                }
+                else {
+                    // remove, or toggle-when-present
+                    nextValues = curValues.filter((_, i) => i !== idx);
+                    nextLabels =
+                        present && idx < curLabels.length
+                            ? curLabels.filter((_, i) => i !== idx)
+                            : curLabels.filter((l) => l !== memberLabel);
+                }
+                setVariable(act.name, {
+                    value: JSON.stringify(nextValues),
+                    label: nextLabels.join(", "),
+                });
+                continue;
+            }
+            setVariable(act.name, { value, label: act.label, kind });
+            continue;
+        }
+        const handler = customActions[act.function];
+        if (!handler) {
+            console.warn(`[ComposableScreen] No customAction registered for "${act.function}"`);
+            continue;
+        }
+        const requested = (_b = act.variables) !== null && _b !== void 0 ? _b : [];
+        const vars = {};
+        for (const name of requested)
+            vars[name] = variables[name];
+        try {
+            await handler({ variables: vars });
+        }
+        catch (err) {
+            console.error(`[ComposableScreen] customAction "${act.function}" threw:`, err);
+            return;
+        }
+    }
+}
+//# sourceMappingURL=runActions.js.map

package/dist/UI/Pages/ComposableScreen/elements/runActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"runActions.js","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/runActions.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocapine/react-native-onboarding-ui",
-  "version": "1.36.1",
+  "version": "1.37.0",
   "description": "UI components and renderers for Rocapine Onboarding Studio - Built on top of the headless SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/UI/Pages/ComposableScreen/elements/BaseBoxProps.ts

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { type ButtonAction, ButtonActionSchema } from "./actions";
 
 export type GradientStop = {
   color: string;
@@ -289,6 +290,7 @@ export type BaseBoxProps = {
   elevation?: number;
   transform?: ElementTransform;
   animation?: ElementAnimation;
+  onPress?: ButtonAction[];
 };
 
 export const BaseBoxPropsSchema = z.object({
@@ -323,4 +325,5 @@ export const BaseBoxPropsSchema = z.object({
   elevation: z.number().min(0).optional(),
   transform: TransformSchema.optional(),
   animation: ElementAnimationSchema.optional(),
+  onPress: z.array(ButtonActionSchema).optional(),
 });

package/src/UI/Pages/ComposableScreen/elements/ButtonElement.tsx

@@ -6,7 +6,6 @@ import {
   evaluateCondition,
   type LeafCondition,
   type ConditionGroup,
-  type ComposableVariableKind,
   LeafConditionSchema,
   ConditionGroupSchema,
 } from "@rocapine/react-native-onboarding";
@@ -14,59 +13,23 @@ import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
 import { RenderContext, buildShadowStyle, dim, resolveInheritedFontFamily } from "./shared";
 import { GradientBox } from "./GradientBox";
-import { ComposableVariableEntry } from "../../../Provider/OnboardingProgressProvider";
-import { evaluateSetVariableExpression } from "./expression";
 import { triggerHaptic, type HapticStyle } from "./haptics";
+import {
+  type ButtonAction,
+  ButtonActionSchema,
+} from "./actions";
+import { runActions } from "./runActions";
 
-export type CustomButtonAction = {
-  type: "custom";
-  function: string;
-  variables?: string[];
-};
-
-export const CustomButtonActionSchema = z.object({
-  type: z.literal("custom"),
-  function: z.string().min(1, "function must not be empty"),
-  variables: z.array(z.string()).optional(),
-});
-
-export type SetVariableButtonAction = {
-  type: "setVariable";
-  name: string;
-  value: string;
-  label?: string;
-  /**
-   * When `"expression"`, `value` is parsed as an arithmetic expression with
-   * `{{var}}` references, numeric literals, and `+ - * /` (parens supported).
-   * On parse failure, falls back to plain interpolation (string).
-   * Defaults to `"literal"` — `value` stored verbatim.
-   */
-  valueMode?: "literal" | "expression";
-  /**
-   * Tags the stored variable's underlying type. In `"literal"` mode this is
-   * used as-is. In `"expression"` mode the inferred result kind is used
-   * unless `kind` is explicitly set (ignored — expression mode derives kind
-   * from evaluation).
-   */
-  kind?: ComposableVariableKind;
-};
-
-export const SetVariableButtonActionSchema = z.object({
-  type: z.literal("setVariable"),
-  name: z.string().min(1, "name must not be empty"),
-  value: z.string(),
-  label: z.string().optional(),
-  valueMode: z.enum(["literal", "expression"]).optional(),
-  kind: z.enum(["int", "float", "string"]).optional(),
-});
-
-export type ButtonAction = "continue" | CustomButtonAction | SetVariableButtonAction;
-
-export const ButtonActionSchema = z.union([
-  z.literal("continue"),
+// `ButtonAction` and its variants live in `./actions` (shared with the generic
+// `onPress` on BaseBoxProps). Re-exported for back-compat.
+export {
+  type CustomButtonAction,
   CustomButtonActionSchema,
+  type SetVariableButtonAction,
   SetVariableButtonActionSchema,
-]);
+} from "./actions";
+export type { ButtonAction };
+export { ButtonActionSchema };
 
 type ButtonOverridableProps = BaseBoxProps & {
   variant?: "filled" | "outlined" | "ghost";
@@ -145,7 +108,7 @@ type Props = {
 };
 
 export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElement => {
-  const { theme, onContinue, customActions, variables, setVariable } = ctx;
+  const { theme, variables } = ctx;
   const flatVariables = useMemo(
     () =>
       Object.fromEntries(
@@ -164,46 +127,7 @@ export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElem
     const { actions, action } = element.props;
     const effective: ButtonAction[] =
       actions ?? (action === "continue" ? ["continue"] : []);
-
-    for (const act of effective) {
-      if (act === "continue") {
-        onContinue();
-        return;
-      }
-      if (act.type === "setVariable") {
-        let value: string;
-        let kind: ComposableVariableKind | undefined;
-        if (act.valueMode === "expression") {
-          const computed = evaluateSetVariableExpression(act.value, variables);
-          value = computed.value;
-          kind = computed.kind;
-        } else {
-          value = act.value;
-          kind = act.kind;
-        }
-        setVariable(act.name, { value, label: act.label, kind });
-        continue;
-      }
-      const handler = customActions[act.function];
-      if (!handler) {
-        console.warn(
-          `[ComposableScreen] No customAction registered for "${act.function}"`
-        );
-        continue;
-      }
-      const requested = act.variables ?? [];
-      const vars: Record<string, ComposableVariableEntry | undefined> = {};
-      for (const name of requested) vars[name] = variables[name];
-      try {
-        await handler({ variables: vars });
-      } catch (err) {
-        console.error(
-          `[ComposableScreen] customAction "${act.function}" threw:`,
-          err
-        );
-        return;
-      }
-    }
+    await runActions(effective, ctx);
   };
 
   // State overrides are merged over base props. disabledStyle wins over the

package/src/UI/Pages/ComposableScreen/elements/CheckboxGroupElement.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect } from "react";
 import { z } from "zod";
 import { View, Text, TouchableOpacity } from "react-native";
+import { useResolvedFontStyle } from "@rocapine/react-native-onboarding";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import type { UIElement } from "../types";
-import { dim, type RenderContext } from "./shared";
+import { dim, resolveInheritedFontFamily, type RenderContext } from "./shared";
 import { GradientBox } from "./GradientBox";
 import { triggerHaptic, type HapticStyle } from "./haptics";
 
@@ -86,6 +87,13 @@ export const CheckboxGroupComponent = ({ element, ctx }: Props): React.ReactElem
     try { return JSON.parse(rawValue) as string[]; } catch { return undefined; }
   })();
 
+  // Resolve item typography once (group-level props apply to every item). Falls
+  // back to theme.typography.defaultFontFamily so labels honor the theme font.
+  const resolvedFont = useResolvedFontStyle(
+    resolveInheritedFontFamily(element.props.itemFontFamily, theme.typography.defaultFontFamily),
+    element.props.itemFontWeight
+  );
+
   useEffect(() => {
     if (element.props.variableName && element.props.defaultValues && selectedValues === undefined) {
       const defaultLabels = element.props.defaultValues.map((dv) => element.props.items.find((i) => i.value === dv)?.label ?? dv);
@@ -198,8 +206,10 @@ export const CheckboxGroupComponent = ({ element, ctx }: Props): React.ReactElem
                 flexShrink: 1,
                 color: textColor,
                 fontSize: element.props.itemFontSize ?? theme.typography.textStyles.body.fontSize,
-                fontWeight: (element.props.itemFontWeight as any) ?? theme.typography.textStyles.body.fontWeight,
-                fontFamily: element.props.itemFontFamily,
+                fontWeight: resolvedFont.resolvedToVariant
+                  ? undefined
+                  : ((element.props.itemFontWeight as any) ?? theme.typography.textStyles.body.fontWeight),
+                fontFamily: resolvedFont.fontFamily,
                 fontStyle: element.props.itemFontStyle,
               }}
             >

package/src/UI/Pages/ComposableScreen/elements/DatePickerElement.tsx

@@ -4,6 +4,7 @@ import DateTimePicker, { DateTimePickerEvent } from "@react-native-community/dat
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { z } from "zod";
 import type { UIElement } from "../types";
+import { useResolvedFontFamily } from "@rocapine/react-native-onboarding";
 import { dim, type RenderContext } from "./shared";
 import { GradientBox } from "./GradientBox";
 
@@ -61,6 +62,8 @@ function formatDate(date: Date, mode: "date" | "time" | "datetime"): string {
 export const DatePickerElementComponent = ({ element, ctx }: Props): React.ReactElement => {
   const { theme, variables, setVariable } = ctx;
   const { props } = element;
+  // Trigger label honors the theme default font (Android shows a custom Text trigger).
+  const labelFontFamily = useResolvedFontFamily(theme.typography.defaultFontFamily, undefined);
 
   const persistedValue = props.variableName ? variables[props.variableName]?.value : undefined;
   const initialDate = persistedValue
@@ -151,6 +154,7 @@ export const DatePickerElementComponent = ({ element, ctx }: Props): React.React
             style={{
               color: props.textColor ?? theme.colors.text.primary,
               fontSize: theme.typography.textStyles.body.fontSize,
+              fontFamily: labelFontFamily,
             }}
           >
             {formatDate(date, mode)}

package/src/UI/Pages/ComposableScreen/elements/RadioGroupElement.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect } from "react";
 import { z } from "zod";
 import { View, Text, TouchableOpacity } from "react-native";
+import { useResolvedFontStyle } from "@rocapine/react-native-onboarding";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
-import { RenderContext, dim } from "./shared";
+import { RenderContext, dim, resolveInheritedFontFamily } from "./shared";
 import { GradientBox } from "./GradientBox";
 import { triggerHaptic, type HapticStyle } from "./haptics";
 
@@ -77,6 +78,13 @@ export const RadioGroupComponent = ({ element, ctx }: Props): React.ReactElement
   const { theme, variables, setVariable } = ctx;
   const selectedValue = element.props.variableName ? variables[element.props.variableName]?.value : undefined;
 
+  // Resolve item typography once (group-level props apply to every item). Falls
+  // back to theme.typography.defaultFontFamily so labels honor the theme font.
+  const resolvedFont = useResolvedFontStyle(
+    resolveInheritedFontFamily(element.props.itemFontFamily, theme.typography.defaultFontFamily),
+    element.props.itemFontWeight
+  );
+
   useEffect(() => {
     if (element.props.variableName && element.props.defaultValue && selectedValue === undefined) {
       const defaultItem = element.props.items.find((i) => i.value === element.props.defaultValue);
@@ -180,8 +188,10 @@ export const RadioGroupComponent = ({ element, ctx }: Props): React.ReactElement
                 flexShrink: 1,
                 color: textColor,
                 fontSize: element.props.itemFontSize ?? theme.typography.textStyles.body.fontSize,
-                fontWeight: (element.props.itemFontWeight as any) ?? theme.typography.textStyles.body.fontWeight,
-                fontFamily: element.props.itemFontFamily,
+                fontWeight: resolvedFont.resolvedToVariant
+                  ? undefined
+                  : ((element.props.itemFontWeight as any) ?? theme.typography.textStyles.body.fontWeight),
+                fontFamily: resolvedFont.fontFamily,
                 fontStyle: element.props.itemFontStyle,
               }}
             >

package/src/UI/Pages/ComposableScreen/elements/WheelPickerElement.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo } from "react";
 import { View, Text } from "react-native";
-import { resolveWheelPickerItems } from "@rocapine/react-native-onboarding";
+import { resolveWheelPickerItems, useResolvedFontFamily } from "@rocapine/react-native-onboarding";
 import { UIElement } from "../types";
-import { RenderContext, dim } from "./shared";
+import { RenderContext, dim, resolveInheritedFontFamily } from "./shared";
 
 // Lazy load Picker - only needed for WheelPicker elements, peer dep is optional.
 let PickerComponent: any;
@@ -72,6 +72,11 @@ export const WheelPickerElementComponent = ({ element, ctx }: Props): React.Reac
   } as const;
 
   const itemColor = props.itemColor ?? theme.colors.text.primary;
+  // Fall back to the theme default font so wheel items honor theme typography.
+  const itemFontFamily = useResolvedFontFamily(
+    resolveInheritedFontFamily(props.itemFontFamily, theme.typography.defaultFontFamily),
+    undefined
+  );
 
   if (!PickerComponent) {
     // Peer dep not installed — surface a clear placeholder instead of crashing.
@@ -92,7 +97,7 @@ export const WheelPickerElementComponent = ({ element, ctx }: Props): React.Reac
         itemStyle={{
           color: itemColor,
           fontSize: props.itemFontSize,
-          fontFamily: props.itemFontFamily,
+          fontFamily: itemFontFamily,
         }}
       >
         {items.map((item) => (

package/src/UI/Pages/ComposableScreen/elements/actions.ts

@@ -0,0 +1,53 @@
+import { z } from "zod";
+
+// Self-contained UI mirror of the headless `ButtonAction` (packages/onboarding
+// src/steps/common.types.ts). Kept here as a leaf module (imports only zod) so
+// both BaseBoxProps.ts (schema) and shared.ts (runActions dispatch) can depend
+// on it without an import cycle. Shared by `Button.actions` and the generic
+// `onPress` on every UIElement.
+
+export type CustomButtonAction = {
+  type: "custom";
+  function: string;
+  variables?: string[];
+};
+
+export const CustomButtonActionSchema = z.object({
+  type: z.literal("custom"),
+  function: z.string().min(1, "function must not be empty"),
+  variables: z.array(z.string()).optional(),
+});
+
+export type SetVariableButtonAction = {
+  type: "setVariable";
+  name: string;
+  value: string;
+  label?: string;
+  valueMode?: "literal" | "expression";
+  kind?: "int" | "float" | "string";
+  /**
+   * Treat the target variable as the JSON-encoded `string[]` multi-select
+   * collection used by `CheckboxGroup` and apply `value` as a set operation
+   * (`"append"` / `"remove"` / `"toggle"`) instead of overwriting. `kind` is
+   * ignored in this mode. Omit for the default overwrite behavior.
+   */
+  arrayOp?: "append" | "remove" | "toggle";
+};
+
+export const SetVariableButtonActionSchema = z.object({
+  type: z.literal("setVariable"),
+  name: z.string().min(1, "name must not be empty"),
+  value: z.string(),
+  label: z.string().optional(),
+  valueMode: z.enum(["literal", "expression"]).optional(),
+  kind: z.enum(["int", "float", "string"]).optional(),
+  arrayOp: z.enum(["append", "remove", "toggle"]).optional(),
+});
+
+export type ButtonAction = "continue" | CustomButtonAction | SetVariableButtonAction;
+
+export const ButtonActionSchema = z.union([
+  z.literal("continue"),
+  CustomButtonActionSchema,
+  SetVariableButtonActionSchema,
+]);

package/src/UI/Pages/ComposableScreen/elements/renderElement.tsx

@@ -1,8 +1,10 @@
 import React from "react";
+import { Pressable } from "react-native";
 import { evaluateCondition } from "@rocapine/react-native-onboarding";
 import { UIElement } from "../types";
 import { BaseBoxProps } from "./BaseBoxProps";
 import { RenderContext } from "./shared";
+import { runActions } from "./runActions";
 import { StackElementComponent } from "./StackElement";
 import { TextElementComponent } from "./TextElement";
 import { RichTextElementComponent } from "./RichTextElement";
@@ -26,6 +28,19 @@ import { KeyboardAvoidingViewElementComponent } from "./KeyboardAvoidingViewElem
 import { ProgressIndicatorElementComponent } from "./ProgressIndicatorElement";
 import { AnimatedBox } from "./AnimatedBox";
 
+// Element types that own their own press / focus / scroll handling. The generic
+// `onPress` (BaseBoxProps) is NOT wired for these — Button/RadioGroup/Checkbox/
+// DatePicker already dispatch actions or selections; Input/WheelPicker would have
+// their focus / scroll-selection intercepted by an outer Pressable.
+const PRESS_HANDLED_TYPES = new Set<UIElement["type"]>([
+  "Button",
+  "RadioGroup",
+  "CheckboxGroup",
+  "DatePicker",
+  "Input",
+  "WheelPicker",
+]);
+
 export const renderElement = (
   element: UIElement,
   ctx: RenderContext,
@@ -128,12 +143,52 @@ export const renderElement = (
     return null;
   })();
 
+  // Cast to BaseBoxProps: not every element's props type extends it (e.g.
+  // WheelPicker), but the onPress/animation/transform/flex/alignSelf fields are
+  // all optional BaseBoxProps members and simply read as undefined when absent.
+  const p = element.props as BaseBoxProps;
+
+  // Generic onPress: make any non-pressable element tappable, dispatching the
+  // same action list as Button via runActions. Skipped for PRESS_HANDLED_TYPES.
+  // A Pressable around a scroll/carousel keeps inner scrolling working — RN's
+  // gesture responder gives the scroll the touch when it pans.
+  let content: React.ReactNode = node;
+  if (
+    content !== null &&
+    p.onPress &&
+    p.onPress.length > 0 &&
+    !PRESS_HANDLED_TYPES.has(element.type)
+  ) {
+    const onPress = p.onPress;
+    // The Pressable must be layout-transparent (like AnimatedBox): forward the
+    // element's flex sizing so the wrapper participates in its parent's flex
+    // context exactly as the element would. Without this, the style-less
+    // Pressable sizes to content while the element's `flex`/`flexShrink` sit on
+    // the inner node — breaking row splits (cards overflow) and column flow.
+    // Mirror StackElement's `parentType === "XStack"` flexShrink:1 default.
+    content = (
+      <Pressable
+        key={element.id}
+        onPress={() => {
+          void runActions(onPress, ctx);
+        }}
+        style={{
+          flex: p.flex,
+          flexGrow: p.flexGrow,
+          flexShrink: p.flexShrink ?? (parentType === "XStack" ? 1 : undefined),
+          alignSelf: p.alignSelf,
+        }}
+      >
+        {content}
+      </Pressable>
+    );
+  }
+
   // Wrap only when motion is requested — zero overhead (no extra view) otherwise.
   // Cast to BaseBoxProps: not every element's props type extends it (e.g.
   // WheelPicker), but the animation/transform/flex/alignSelf fields are all
   // optional BaseBoxProps members and simply read as undefined when absent.
-  const p = element.props as BaseBoxProps;
-  if (node !== null && (p.animation || p.transform)) {
+  if (content !== null && (p.animation || p.transform)) {
     return (
       <AnimatedBox
         key={element.id}
@@ -142,10 +197,10 @@ export const renderElement = (
         flex={p.flex}
         alignSelf={p.alignSelf}
       >
-        {node}
+        {content}
       </AnimatedBox>
     );
   }
 
-  return node;
+  return content;
 };

package/src/UI/Pages/ComposableScreen/elements/runActions.ts

@@ -0,0 +1,109 @@
+import type {
+  ComposableVariableEntry,
+  ComposableVariableKind,
+} from "@rocapine/react-native-onboarding";
+import type { ButtonAction } from "./actions";
+import type { RenderContext } from "./shared";
+import { evaluateSetVariableExpression } from "./expression";
+
+// Decode a multi-select variable's stored value (JSON-encoded string[], as
+// written by CheckboxGroup) into a string array. Tolerates undefined / non-array
+// / unparseable input by returning [].
+function decodeArrayValue(raw: string | undefined): string[] {
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed.map(String) : [];
+  } catch {
+    return [];
+  }
+}
+
+// Sequentially runs a list of press actions against the render context. Shared
+// by `Button` (its `actions`) and the generic `onPress` on every UIElement
+// (wired centrally in renderElement.tsx). Semantics:
+//   - "continue"     → advance the onboarding; terminal (stops the loop).
+//   - {setVariable}  → write a variable (expression-evaluated when valueMode === "expression").
+//   - {custom}       → invoke the host-registered customAction with the requested
+//                      variables; warns if unregistered, aborts the loop on throw.
+export async function runActions(
+  actions: ButtonAction[],
+  ctx: RenderContext
+): Promise<void> {
+  const { onContinue, setVariable, customActions, variables } = ctx;
+
+  for (const act of actions) {
+    if (act === "continue") {
+      onContinue();
+      return;
+    }
+    if (act.type === "setVariable") {
+      let value: string;
+      let kind: ComposableVariableKind | undefined;
+      if (act.valueMode === "expression") {
+        const computed = evaluateSetVariableExpression(act.value, variables);
+        value = computed.value;
+        kind = computed.kind;
+      } else {
+        value = act.value;
+        kind = act.kind;
+      }
+
+      if (act.arrayOp) {
+        // Multi-select set operation on the JSON-encoded string[] used by
+        // CheckboxGroup. value/label are the single member being added/removed.
+        const entry = variables[act.name];
+        const curValues = decodeArrayValue(entry?.value);
+        const curLabels = entry?.label ? entry.label.split(", ") : [];
+        const memberLabel = act.label ?? value;
+        const idx = curValues.indexOf(value);
+        const present = idx !== -1;
+        const add =
+          act.arrayOp === "append" || (act.arrayOp === "toggle" && !present);
+
+        let nextValues: string[];
+        let nextLabels: string[];
+        if (add) {
+          // Dedup: appending an already-present member is a no-op.
+          nextValues = present ? curValues : [...curValues, value];
+          nextLabels = present ? curLabels : [...curLabels, memberLabel];
+        } else {
+          // remove, or toggle-when-present
+          nextValues = curValues.filter((_, i) => i !== idx);
+          nextLabels =
+            present && idx < curLabels.length
+              ? curLabels.filter((_, i) => i !== idx)
+              : curLabels.filter((l) => l !== memberLabel);
+        }
+
+        setVariable(act.name, {
+          value: JSON.stringify(nextValues),
+          label: nextLabels.join(", "),
+        });
+        continue;
+      }
+
+      setVariable(act.name, { value, label: act.label, kind });
+      continue;
+    }
+    const handler = customActions[act.function];
+    if (!handler) {
+      console.warn(
+        `[ComposableScreen] No customAction registered for "${act.function}"`
+      );
+      continue;
+    }
+    const requested = act.variables ?? [];
+    const vars: Record<string, ComposableVariableEntry | undefined> = {};
+    for (const name of requested) vars[name] = variables[name];
+    try {
+      await handler({ variables: vars });
+    } catch (err) {
+      console.error(
+        `[ComposableScreen] customAction "${act.function}" threw:`,
+        err
+      );
+      return;
+    }
+  }
+}