@applicaster/zapp-react-native-ui-components 15.1.15 → 15.1.16-rc.0

package/Components/ModalComponent/AudioPlayer/Components/Header.tsx

@@ -1,11 +1,10 @@
 /**
  * Modal Building Block — Header
  *
- * Single-file Expo Snack demo for the Header building block spec.
- *
  * Green (configurable): title, closeButton (enable + asset), actionButtons styling
- * White (hardcoded): container, action button layout/enable/actions, close dimensions,
- *   action button padding/radius, action labels
+ *   (incl. Clear padding/radius for Variant 3 / section_header Studio keys)
+ * White (hardcoded): container gutters, action button slot enablement/actions,
+ *   close dimensions, default action labels (overridable via HeaderData.clearLabel)
  */
 
 import React, { useCallback, useState } from "react";
@@ -94,6 +93,12 @@ export type ActionButtonsStyleConfiguration = {
   iosLetterSpacing: number;
   androidLetterSpacing: number;
   textTransform: TextTransform;
+  /** Green Variant 3 fields — defaults match ACTION_BUTTON_LAYOUT_SPEC. */
+  paddingTop?: number;
+  paddingRight?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  cornerRadius?: number;
 };
 
 export type HeaderConfiguration = {
@@ -133,6 +138,11 @@ export const DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION: ActionButtonsStyleConfi
     iosLetterSpacing: 0,
     androidLetterSpacing: 0,
     textTransform: "default",
+    paddingTop: 6,
+    paddingRight: 10,
+    paddingBottom: 6,
+    paddingLeft: 10,
+    cornerRadius: 16,
   };
 
 // ---------------------------------------------------------------------------
@@ -141,6 +151,8 @@ export const DEFAULT_ACTION_BUTTONS_STYLE_CONFIGURATION: ActionButtonsStyleConfi
 
 export type HeaderData = {
   title: string;
+  /** Localization override for Clear; falls back to ACTION_LABELS.clear. */
+  clearLabel?: string;
 };
 
 export type AudioPlayerHeaderProps = {
@@ -437,6 +449,7 @@ type HeaderActionButtonProps = {
   actionType: HeaderActionType;
   configuration: ActionButtonsStyleConfiguration;
   focused?: boolean;
+  label?: string;
   onPress?: () => void;
 };
 
@@ -444,8 +457,24 @@ function HeaderActionButton({
   actionType,
   configuration,
   focused = false,
+  label,
   onPress,
 }: HeaderActionButtonProps) {
+  const paddingTop =
+    configuration.paddingTop ?? ACTION_BUTTON_LAYOUT_SPEC.paddingTop;
+
+  const paddingRight =
+    configuration.paddingRight ?? ACTION_BUTTON_LAYOUT_SPEC.paddingRight;
+
+  const paddingBottom =
+    configuration.paddingBottom ?? ACTION_BUTTON_LAYOUT_SPEC.paddingBottom;
+
+  const paddingLeft =
+    configuration.paddingLeft ?? ACTION_BUTTON_LAYOUT_SPEC.paddingLeft;
+
+  const cornerRadius =
+    configuration.cornerRadius ?? ACTION_BUTTON_LAYOUT_SPEC.cornerRadius;
+
   return (
     <Pressable
       onPress={onPress}
@@ -454,11 +483,11 @@ function HeaderActionButton({
           pressed || focused
             ? configuration.focusedBackgroundColor
             : configuration.defaultBackgroundColor,
-        borderRadius: ACTION_BUTTON_LAYOUT_SPEC.cornerRadius,
-        paddingTop: ACTION_BUTTON_LAYOUT_SPEC.paddingTop,
-        paddingRight: ACTION_BUTTON_LAYOUT_SPEC.paddingRight,
-        paddingBottom: ACTION_BUTTON_LAYOUT_SPEC.paddingBottom,
-        paddingLeft: ACTION_BUTTON_LAYOUT_SPEC.paddingLeft,
+        borderRadius: cornerRadius,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft,
       })}
     >
       <Text
@@ -481,7 +510,7 @@ function HeaderActionButton({
         }}
         numberOfLines={1}
       >
-        {ACTION_LABELS[actionType]}
+        {label || ACTION_LABELS[actionType]}
       </Text>
     </Pressable>
   );
@@ -594,14 +623,20 @@ export function AudioPlayerHeader({
   onClear,
 }: AudioPlayerHeaderProps) {
   const modalBlocksStyle = useModalBlocksStyle();
-  const headerBlock = modalBlocksStyle?.header;
+
+  // Next Up section header uses sectionHeader — never Theme modal `header`,
+  // so the Queue title styles do not collide with the section title.
+  const styleBlock =
+    configuration.variant === "section"
+      ? modalBlocksStyle?.sectionHeader
+      : modalBlocksStyle?.header;
 
   const effectiveConfig = React.useMemo(() => {
-    return mergeHeaderConfiguration(configuration, headerBlock);
-  }, [configuration, headerBlock]);
+    return mergeHeaderConfiguration(configuration, styleBlock);
+  }, [configuration, styleBlock]);
 
   const { variant, title, closeButton, actionButtons } = effectiveConfig;
-  const { title: titleText } = data;
+  const { title: titleText, clearLabel } = data;
 
   const container = CONTAINER_SPEC[variant];
   const behavior = ACTION_BUTTONS_BEHAVIOR[variant];
@@ -612,16 +647,24 @@ export function AudioPlayerHeader({
     behavior.sectionEnabled
   );
 
-  const showTrailingAction = shouldShowActionSlot(
-    behavior.trailing,
-    behavior.sectionEnabled
-  );
+  const showTrailingAction =
+    shouldShowActionSlot(behavior.trailing, behavior.sectionEnabled) &&
+    (behavior.trailing.actionType !== "clear" || !!onClear);
+
+  const actionLabelFor = (actionType?: HeaderActionType) => {
+    if (actionType === "clear" && clearLabel) {
+      return clearLabel;
+    }
+
+    return actionType ? ACTION_LABELS[actionType] : undefined;
+  };
 
   const leadingContent = showLeadingAction ? (
     <HeaderActionButton
-      actionType={behavior.leading.actionType}
+      actionType={behavior.leading.actionType as HeaderActionType}
       configuration={actionButtons}
       focused={focusedLeadingAction}
+      label={actionLabelFor(behavior.leading.actionType)}
       onPress={onCancel}
     />
   ) : onBack ? (
@@ -630,9 +673,10 @@ export function AudioPlayerHeader({
 
   const trailingContent = showTrailingAction ? (
     <HeaderActionButton
-      actionType={behavior.trailing.actionType}
+      actionType={behavior.trailing.actionType as HeaderActionType}
       configuration={actionButtons}
       focused={focusedTrailingAction}
+      label={actionLabelFor(behavior.trailing.actionType)}
       onPress={behavior.trailing.actionType === "done" ? onDone : onClear}
     />
   ) : closeButton.enabled && !isCenterAligned ? (

package/Components/ModalComponent/AudioPlayer/Components/Item.tsx

@@ -54,6 +54,8 @@ export type BackgroundConfiguration = {
   paddingRight?: number;
   paddingBottom?: number;
   paddingLeft?: number;
+  highlightInsetLeft?: number;
+  highlightInsetRight?: number;
 };
 
 export type ImageConfiguration = {
@@ -203,9 +205,9 @@ const CONTAINER_SPEC_LARGE_IMAGE: ContainerSpec = {
 
 const CONTAINER_SPEC_DEFAULT: ContainerSpec = {
   paddingTop: 8,
-  paddingRight: 20,
+  paddingRight: 10,
   paddingBottom: 8,
-  paddingLeft: 20,
+  paddingLeft: 10,
   horizontalGutter: 12,
   verticalGutter: 2,
 };
@@ -350,21 +352,30 @@ function ItemContainer({
   onPress,
 }: ItemContainerProps) {
   const container = resolveContainerSpec(image);
-  const bg = focused ? background.focusedColor : background.defaultColor;
+  const insetLeft = background.highlightInsetLeft ?? 0;
+  const insetRight = background.highlightInsetRight ?? 0;
 
   return (
-    <Pressable
-      onPress={onPress}
-      style={({ pressed }) => ({
-        backgroundColor: pressed ? background.focusedColor : bg,
-        borderRadius: background.cornerRadius,
-        paddingTop: background.paddingTop ?? container.paddingTop,
-        paddingRight: background.paddingRight ?? container.paddingRight,
-        paddingBottom: background.paddingBottom ?? container.paddingBottom,
-        paddingLeft: background.paddingLeft ?? container.paddingLeft,
-      })}
-    >
-      {children}
+    <Pressable onPress={onPress}>
+      {({ pressed }) => (
+        <View
+          style={{
+            marginLeft: insetLeft,
+            marginRight: insetRight,
+            backgroundColor:
+              pressed || focused
+                ? background.focusedColor
+                : background.defaultColor,
+            borderRadius: background.cornerRadius,
+            paddingTop: background.paddingTop ?? container.paddingTop,
+            paddingRight: background.paddingRight ?? container.paddingRight,
+            paddingBottom: background.paddingBottom ?? container.paddingBottom,
+            paddingLeft: background.paddingLeft ?? container.paddingLeft,
+          }}
+        >
+          {children}
+        </View>
+      )}
     </Pressable>
   );
 }
@@ -927,6 +938,10 @@ export const VARIANT_NOW_PLAYING: ItemConfiguration = {
     defaultColor: "transparent",
     focusedColor: "transparent",
     cornerRadius: 0,
+    paddingTop: 8,
+    paddingRight: 20,
+    paddingBottom: 8,
+    paddingLeft: 20,
   },
   image: {
     width: 72,
@@ -947,6 +962,12 @@ export const VARIANT_QUEUED_ITEM: ItemConfiguration = {
     defaultColor: "transparent",
     focusedColor: "rgba(62, 62, 62, 1)",
     cornerRadius: 12,
+    paddingTop: 8,
+    paddingRight: 10,
+    paddingBottom: 8,
+    paddingLeft: 10,
+    highlightInsetLeft: 10,
+    highlightInsetRight: 10,
   },
   image: {
     width: 48,
@@ -967,6 +988,10 @@ export const VARIANT_PLAYLIST_ITEM: ItemConfiguration = {
     defaultColor: "transparent",
     focusedColor: "rgba(62, 62, 62, 1)",
     cornerRadius: 12,
+    paddingTop: 8,
+    paddingRight: 10,
+    paddingBottom: 8,
+    paddingLeft: 10,
   },
   image: {
     width: 48,

package/Components/ModalComponent/AudioPlayer/Components/NowPlayingHeaderSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleSheet, View } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 import {
   AudioPlayerTrackItem,
   VARIANT_NOW_PLAYING,
@@ -10,6 +10,8 @@ import type { MenuItem } from "@applicaster/zapp-react-native-utils/modalState/t
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState";
 
+const DEFAULT_EMPTY_MESSAGE = "Queued items will be added here";
+
 const styles = StyleSheet.create({
   divider: {
     height: StyleSheet.hairlineWidth,
@@ -17,18 +19,33 @@ const styles = StyleSheet.create({
     marginHorizontal: 20,
     marginVertical: 8,
   },
+  emptyMessage: {
+    paddingTop: 32,
+    paddingBottom: 32,
+    paddingHorizontal: 40,
+    textAlign: "center",
+    color: "#999999",
+    fontSize: 13,
+    lineHeight: 16,
+  },
 });
 
 type NowPlayingHeaderSectionProps = {
   onClear?: () => void;
   nextUpTitle?: string;
   nowPlayingTitle?: string;
+  isEmpty?: boolean;
+  emptyMessage?: string;
+  clearLabel?: string;
 };
 
 export function NowPlayingHeaderSection({
   onClear,
   nextUpTitle = "Next Up",
   nowPlayingTitle = "Now Playing",
+  isEmpty = false,
+  emptyMessage = DEFAULT_EMPTY_MESSAGE,
+  clearLabel,
 }: NowPlayingHeaderSectionProps) {
   const player = usePlayer();
   const playerState = usePlayerState("queue-now-playing-section");
@@ -70,14 +87,11 @@ export function NowPlayingHeaderSection({
     };
 
     return (
-      <View>
-        <AudioPlayerTrackItem
-          configuration={VARIANT_NOW_PLAYING}
-          data={data}
-          onTrailingButtonPress={handlePlayPause}
-        />
-        <View style={styles.divider} />
-      </View>
+      <AudioPlayerTrackItem
+        configuration={VARIANT_NOW_PLAYING}
+        data={data}
+        onTrailingButtonPress={handlePlayPause}
+      />
     );
   };
 
@@ -86,9 +100,10 @@ export function NowPlayingHeaderSection({
       {renderNowPlayingTrack()}
       <AudioPlayerHeader
         configuration={VARIANT_SECTION_HEADER}
-        data={{ title: nextUpTitle }}
+        data={{ title: nextUpTitle, clearLabel }}
         onClear={onClear}
       />
+      {isEmpty ? <Text style={styles.emptyMessage}>{emptyMessage}</Text> : null}
     </View>
   );
 }

package/Components/ModalComponent/AudioPlayer/Components/__tests__/NowPlayingHeaderSection.test.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { render, screen } from "@testing-library/react-native";
+import { NowPlayingHeaderSection } from "../NowPlayingHeaderSection";
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer",
+  () => ({
+    usePlayer: () => null,
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerState",
+  () => ({
+    usePlayerState: () => ({ isPaused: true }),
+  })
+);
+
+const EMPTY_COPY = "Queued items will be added here";
+
+describe("NowPlayingHeaderSection empty queue", () => {
+  it("renders the empty message under Next Up when the list is empty", () => {
+    render(<NowPlayingHeaderSection isEmpty emptyMessage={EMPTY_COPY} />);
+
+    expect(screen.getByText("Next Up")).toBeTruthy();
+    expect(screen.getByText(EMPTY_COPY)).toBeTruthy();
+  });
+
+  it("does not render the empty message when the list has items", () => {
+    render(
+      <NowPlayingHeaderSection isEmpty={false} emptyMessage={EMPTY_COPY} />
+    );
+
+    expect(screen.queryByText(EMPTY_COPY)).toBeNull();
+  });
+});

package/Components/ModalComponent/AudioPlayer/utils/__tests__/mergeStyles.test.ts

@@ -1,7 +1,12 @@
 import {
   mergeItemConfiguration,
   mergeButtonConfiguration,
+  mergeHeaderConfiguration,
 } from "../mergeStyles";
+import {
+  VARIANT_SECTION_HEADER,
+  VARIANT_SINGLE_LINE_HEADER,
+} from "../../Components/Header";
 
 const base = {
   background: {
@@ -57,7 +62,7 @@ describe("mergeItemConfiguration background", () => {
     expect(merged.textLabel1.lineHeight).toBe(40);
   });
 
-  it("merges background padding from Studio keys", () => {
+  it("does not merge Studio item background padding (white spec field)", () => {
     const merged = mergeItemConfiguration(base as any, {
       background: {
         default: {
@@ -70,11 +75,11 @@ describe("mergeItemConfiguration background", () => {
       },
     });
 
-    expect(merged.background.paddingTop).toBe(32);
-    expect(merged.background.paddingBottom).toBe(32);
-    expect(merged.background.paddingLeft).toBe(40);
-    expect(merged.background.paddingRight).toBe(40);
-    // Default-only override must not steal the base focused highlight color.
+    expect(merged.background.defaultColor).toBe("#2E7D32");
+    expect(merged.background.paddingTop).toBeUndefined();
+    expect(merged.background.paddingBottom).toBeUndefined();
+    expect(merged.background.paddingLeft).toBeUndefined();
+    expect(merged.background.paddingRight).toBeUndefined();
     expect(merged.background.focusedColor).toBe("rgba(62, 62, 62, 1)");
   });
 
@@ -246,3 +251,106 @@ describe("mergeButtonConfiguration background", () => {
     expect(merged.title.textTransform).toBe("uppercase");
   });
 });
+
+describe("mergeHeaderConfiguration section header (Variant 3)", () => {
+  it("merges section title + Clear action button styles", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SECTION_HEADER, {
+      title: {
+        default: {
+          fontColor: "#ABCDEF",
+          fontSize: 15,
+          lineHeight: 36,
+          fontFamily: "CustomSection",
+          letterSpacing: -0.2,
+          textTransform: "uppercase",
+          alignment: "left",
+        },
+      },
+      actionButtons: {
+        default: {
+          backgroundColor: "rgba(10, 10, 10, 1)",
+          fontColor: "#EEEEEE",
+          fontSize: 12,
+          borderRadius: 20,
+          paddingTop: 8,
+          paddingRight: 12,
+          paddingBottom: 8,
+          paddingLeft: 12,
+        },
+        focused: {
+          backgroundColor: "rgba(20, 20, 20, 1)",
+          fontColor: "#FFDD00",
+        },
+      },
+    });
+
+    expect(merged.title.fontColor).toBe("#ABCDEF");
+    expect(merged.title.fontSize).toBe(15);
+    expect(merged.title.lineHeight).toBe(36);
+    expect(merged.title.iosFontFamily).toBe("CustomSection");
+    expect(merged.title.androidFontFamily).toBe("CustomSection");
+    expect(merged.title.iosLetterSpacing).toBe(-0.2);
+    expect(merged.title.textTransform).toBe("uppercase");
+
+    expect(merged.actionButtons.defaultBackgroundColor).toBe(
+      "rgba(10, 10, 10, 1)"
+    );
+
+    expect(merged.actionButtons.focusedBackgroundColor).toBe(
+      "rgba(20, 20, 20, 1)"
+    );
+
+    expect(merged.actionButtons.fontColor).toBe("#EEEEEE");
+    expect(merged.actionButtons.focusedFontColor).toBe("#FFDD00");
+    expect(merged.actionButtons.fontSize).toBe(12);
+    expect(merged.actionButtons.cornerRadius).toBe(20);
+    expect(merged.actionButtons.paddingTop).toBe(8);
+    expect(merged.actionButtons.paddingLeft).toBe(12);
+  });
+
+  it("uses title.default when only platform font and letter spacing are set", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SECTION_HEADER, {
+      title: {
+        default: {
+          iosFontFamily: "SFProText-Semibold",
+          androidFontFamily: "Roboto-Medium",
+          iosLetterSpacing: -0.4,
+          androidLetterSpacing: 0,
+        },
+      },
+    });
+
+    expect(merged.title.iosFontFamily).toBe("SFProText-Semibold");
+    expect(merged.title.androidFontFamily).toBe("Roboto-Medium");
+    expect(merged.title.iosLetterSpacing).toBe(-0.4);
+    expect(merged.title.androidLetterSpacing).toBe(0);
+    expect(merged.title.fontSize).toBe(VARIANT_SECTION_HEADER.title.fontSize);
+  });
+
+  it("does not change section defaults when block is empty", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SECTION_HEADER, {
+      title: { default: {} },
+      actionButtons: { default: {} },
+    });
+
+    expect(merged.title.fontSize).toBe(VARIANT_SECTION_HEADER.title.fontSize);
+
+    expect(merged.actionButtons.defaultBackgroundColor).toBe(
+      VARIANT_SECTION_HEADER.actionButtons.defaultBackgroundColor
+    );
+  });
+
+  it("leaves single-line header title size untouched when only actionButtons set", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SINGLE_LINE_HEADER, {
+      actionButtons: {
+        default: { backgroundColor: "#123456" },
+      },
+    });
+
+    expect(merged.title.fontSize).toBe(
+      VARIANT_SINGLE_LINE_HEADER.title.fontSize
+    );
+
+    expect(merged.actionButtons.defaultBackgroundColor).toBe("#123456");
+  });
+});

package/Components/ModalComponent/AudioPlayer/utils/mergeStyles.ts

@@ -9,6 +9,7 @@ import {
 } from "../Components/Item";
 import {
   TitleConfiguration as HeaderTitleConfiguration,
+  ActionButtonsStyleConfiguration as HeaderActionButtonsStyleConfiguration,
   HeaderConfiguration,
 } from "../Components/Header";
 import {
@@ -45,18 +46,6 @@ function mergeItemBackground(
     ...(defaultOverride?.borderRadius !== undefined
       ? { cornerRadius: defaultOverride.borderRadius }
       : {}),
-    ...(defaultOverride?.paddingTop !== undefined
-      ? { paddingTop: defaultOverride.paddingTop }
-      : {}),
-    ...(defaultOverride?.paddingRight !== undefined
-      ? { paddingRight: defaultOverride.paddingRight }
-      : {}),
-    ...(defaultOverride?.paddingBottom !== undefined
-      ? { paddingBottom: defaultOverride.paddingBottom }
-      : {}),
-    ...(defaultOverride?.paddingLeft !== undefined
-      ? { paddingLeft: defaultOverride.paddingLeft }
-      : {}),
   };
 }
 
@@ -222,6 +211,122 @@ function mergeHeaderTitle(
     ...base,
     ...(override.fontColor ? { fontColor: override.fontColor } : {}),
     ...(override.fontSize !== undefined ? { fontSize: override.fontSize } : {}),
+    ...(override.lineHeight !== undefined
+      ? { lineHeight: override.lineHeight }
+      : {}),
+    ...(typeof override.fontFamily === "string"
+      ? {
+          iosFontFamily: override.fontFamily,
+          androidFontFamily: override.fontFamily,
+        }
+      : {}),
+    ...(override.iosFontFamily
+      ? { iosFontFamily: override.iosFontFamily }
+      : {}),
+    ...(override.androidFontFamily
+      ? { androidFontFamily: override.androidFontFamily }
+      : {}),
+    ...(override.letterSpacing !== undefined
+      ? {
+          iosLetterSpacing: override.letterSpacing,
+          androidLetterSpacing: override.letterSpacing,
+        }
+      : {}),
+    ...(override.iosLetterSpacing !== undefined
+      ? { iosLetterSpacing: override.iosLetterSpacing }
+      : {}),
+    ...(override.androidLetterSpacing !== undefined
+      ? { androidLetterSpacing: override.androidLetterSpacing }
+      : {}),
+    ...(override.textTransform
+      ? { textTransform: override.textTransform }
+      : {}),
+    ...(override.alignment ? { alignment: override.alignment } : {}),
+  };
+}
+
+function mergeHeaderActionButtons(
+  base: HeaderActionButtonsStyleConfiguration,
+  defaultOverride?: Record<string, any>,
+  focusedOverride?: Record<string, any>
+): HeaderActionButtonsStyleConfiguration {
+  if (!defaultOverride && !focusedOverride) return base;
+
+  const focusedBackgroundColor =
+    focusedOverride?.backgroundColor ??
+    defaultOverride?.focusBackgroundColor ??
+    defaultOverride?.focusedBackgroundColor;
+
+  const focusedFontColor =
+    focusedOverride?.fontColor ??
+    defaultOverride?.focusFontColor ??
+    defaultOverride?.focusedFontColor;
+
+  return {
+    ...base,
+    ...(defaultOverride?.backgroundColor
+      ? { defaultBackgroundColor: defaultOverride.backgroundColor }
+      : {}),
+    ...(focusedBackgroundColor != null && focusedBackgroundColor !== ""
+      ? { focusedBackgroundColor }
+      : {}),
+    ...(defaultOverride?.fontColor
+      ? { fontColor: defaultOverride.fontColor }
+      : {}),
+    ...(focusedFontColor != null && focusedFontColor !== ""
+      ? { focusedFontColor }
+      : {}),
+    ...(defaultOverride?.fontSize !== undefined
+      ? { fontSize: defaultOverride.fontSize }
+      : {}),
+    ...(defaultOverride?.lineHeight !== undefined
+      ? { lineHeight: defaultOverride.lineHeight }
+      : {}),
+    ...(typeof defaultOverride?.fontFamily === "string"
+      ? {
+          iosFontFamily: defaultOverride.fontFamily,
+          androidFontFamily: defaultOverride.fontFamily,
+        }
+      : {}),
+    ...(defaultOverride?.iosFontFamily
+      ? { iosFontFamily: defaultOverride.iosFontFamily }
+      : {}),
+    ...(defaultOverride?.androidFontFamily
+      ? { androidFontFamily: defaultOverride.androidFontFamily }
+      : {}),
+    ...(defaultOverride?.letterSpacing !== undefined
+      ? {
+          iosLetterSpacing: defaultOverride.letterSpacing,
+          androidLetterSpacing: defaultOverride.letterSpacing,
+        }
+      : {}),
+    ...(defaultOverride?.iosLetterSpacing !== undefined
+      ? { iosLetterSpacing: defaultOverride.iosLetterSpacing }
+      : {}),
+    ...(defaultOverride?.androidLetterSpacing !== undefined
+      ? { androidLetterSpacing: defaultOverride.androidLetterSpacing }
+      : {}),
+    ...(defaultOverride?.textTransform
+      ? { textTransform: defaultOverride.textTransform }
+      : {}),
+    ...(defaultOverride?.borderRadius !== undefined
+      ? { cornerRadius: defaultOverride.borderRadius }
+      : {}),
+    ...(defaultOverride?.cornerRadius !== undefined
+      ? { cornerRadius: defaultOverride.cornerRadius }
+      : {}),
+    ...(defaultOverride?.paddingTop !== undefined
+      ? { paddingTop: defaultOverride.paddingTop }
+      : {}),
+    ...(defaultOverride?.paddingRight !== undefined
+      ? { paddingRight: defaultOverride.paddingRight }
+      : {}),
+    ...(defaultOverride?.paddingBottom !== undefined
+      ? { paddingBottom: defaultOverride.paddingBottom }
+      : {}),
+    ...(defaultOverride?.paddingLeft !== undefined
+      ? { paddingLeft: defaultOverride.paddingLeft }
+      : {}),
   };
 }
 
@@ -233,9 +338,39 @@ export function mergeHeaderConfiguration(
 
   const bgOverride = headerBlock.container?.default?.backgroundColor;
 
+  const actionButtonsDefault =
+    headerBlock.actionButtons?.default || headerBlock.actionButtons;
+
+  const actionButtonsFocused =
+    headerBlock.actionButtons?.focused || headerBlock.actionButtons?.focus;
+
+  // Parser shape is title.default.*; hydrate() returns a flat title object.
+  const titleDefault = headerBlock.title?.default;
+
+  const titleOverride =
+    titleDefault &&
+    (titleDefault.fontColor !== undefined ||
+      titleDefault.fontSize !== undefined ||
+      titleDefault.lineHeight !== undefined ||
+      titleDefault.fontFamily ||
+      titleDefault.iosFontFamily ||
+      titleDefault.androidFontFamily ||
+      titleDefault.letterSpacing !== undefined ||
+      titleDefault.iosLetterSpacing !== undefined ||
+      titleDefault.androidLetterSpacing !== undefined ||
+      titleDefault.textTransform ||
+      titleDefault.alignment)
+      ? titleDefault
+      : headerBlock.title;
+
   return {
     ...base,
-    title: mergeHeaderTitle(base.title, headerBlock.title?.default),
+    title: mergeHeaderTitle(base.title, titleOverride),
+    actionButtons: mergeHeaderActionButtons(
+      base.actionButtons,
+      actionButtonsDefault,
+      actionButtonsFocused
+    ),
     ...(bgOverride ? { backgroundColor: bgOverride } : {}),
   };
 }

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -93,6 +93,8 @@ type ModalComponentProps = {
   contentComponentProps?: Record<string, any>;
   styleOverrides?: ModalBlocksConfig | Record<string, any>;
   measurementPhase?: boolean;
+  /** Copy under Next Up when the queue has no upcoming items. */
+  emptyMessage?: string;
 };
 
 function _BottomSheetModalContent(props: ModalComponentProps) {
@@ -116,6 +118,7 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     contentComponentProps = {},
     styleOverrides: propStyleOverrides,
     measurementPhase = false,
+    emptyMessage,
   } = props;
 
   const route = useRef(currentRoute);
@@ -151,17 +154,81 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     [plugins, themePluginId]
   );
 
-  const styleOverrides = useMemo(() => {
-    if (propStyleOverrides) {
-      return propStyleOverrides;
-    }
-
+  const styleOverrides = useMemo<ModalBlocksConfig | null>(() => {
     const configuration =
       plugin?.configuration || (plugin as any)?.configuration_json;
 
-    if (!configuration || !themePluginId) return null;
+    const parsed =
+      configuration && themePluginId
+        ? parseModalBlocksConfiguration(configuration, themePluginId)
+        : null;
+
+    if (!propStyleOverrides) {
+      return parsed;
+    }
+
+    // hydrate(QueueStyles) only emits sectionHeader after the plugin class
+    // includes it. Until then, Studio/local keys in configuration_json still
+    // apply via the parser.
+    const hydratedSection = propStyleOverrides.sectionHeader;
+
+    const hasTitleStyle = (style?: Record<string, any>) =>
+      Boolean(
+        style &&
+          (style.fontColor ||
+            style.fontSize !== undefined ||
+            style.lineHeight !== undefined ||
+            style.fontFamily ||
+            style.iosFontFamily ||
+            style.androidFontFamily ||
+            style.letterSpacing !== undefined ||
+            style.iosLetterSpacing !== undefined ||
+            style.androidLetterSpacing !== undefined ||
+            style.textTransform ||
+            style.alignment)
+      );
+
+    const hasActionStyle = (style?: Record<string, any>) =>
+      Boolean(
+        style &&
+          (style.backgroundColor ||
+            style.fontColor ||
+            style.fontSize !== undefined ||
+            style.lineHeight !== undefined ||
+            style.fontFamily ||
+            style.iosFontFamily ||
+            style.androidFontFamily ||
+            style.letterSpacing !== undefined ||
+            style.iosLetterSpacing !== undefined ||
+            style.androidLetterSpacing !== undefined ||
+            style.textTransform ||
+            style.borderRadius !== undefined ||
+            style.cornerRadius !== undefined ||
+            style.paddingTop !== undefined ||
+            style.paddingRight !== undefined ||
+            style.paddingBottom !== undefined ||
+            style.paddingLeft !== undefined)
+      );
 
-    return parseModalBlocksConfiguration(configuration, themePluginId);
+    const actionNode = hydratedSection?.actionButtons;
+
+    // An empty `default: {}` is truthy and would hide fields set on the flat
+    // object or on the focused bucket.
+    const hasHydratedSection =
+      hasTitleStyle(hydratedSection?.title?.default) ||
+      hasTitleStyle(hydratedSection?.title) ||
+      hasActionStyle(actionNode?.default) ||
+      hasActionStyle(actionNode?.focused) ||
+      hasActionStyle(actionNode?.focus) ||
+      hasActionStyle(actionNode);
+
+    return {
+      ...parsed,
+      ...propStyleOverrides,
+      sectionHeader: hasHydratedSection
+        ? hydratedSection
+        : parsed?.sectionHeader,
+    };
   }, [propStyleOverrides, plugin, themePluginId]);
 
   const pluginLocalizations = useLocalizedStrings({
@@ -182,17 +249,26 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
   const nextUpTitle =
     pluginLocalizations?.next_up_title ||
     (normalizedPluginId
-      ? pluginLocalizations?.[`${normalizedPluginId}_next_up_title`]
+      ? pluginLocalizations?.[`${normalizedPluginId}_next_up_title`] ||
+        pluginLocalizations?.[`${normalizedPluginId}_label_next_up`]
       : undefined) ||
     "Next Up";
 
   const nowPlayingTitle =
     pluginLocalizations?.now_playing_title ||
     (normalizedPluginId
-      ? pluginLocalizations?.[`${normalizedPluginId}_now_playing_title`]
+      ? pluginLocalizations?.[`${normalizedPluginId}_now_playing_title`] ||
+        pluginLocalizations?.[`${normalizedPluginId}_label_now_playing`]
       : undefined) ||
     "Now Playing";
 
+  const clearLabel =
+    pluginLocalizations?.clear_label ||
+    (normalizedPluginId
+      ? pluginLocalizations?.[`${normalizedPluginId}_label_clear`]
+      : undefined) ||
+    "Clear";
+
   const resolvedTitle = props.title || localizedHeaderTitle || title;
 
   const itemsToRender = viewModel ? fetchedItems : items;
@@ -316,6 +392,7 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
   const hasNowPlaying = hasOperation(operations, OPERATIONS.NOW_PLAYING);
   const hasClearAll = hasOperation(operations, OPERATIONS.CLEAR_ALL);
   const hasAdd = hasOperation(operations, OPERATIONS.ADD);
+  const isQueueEmpty = hasNowPlaying && (itemsToRender?.length ?? 0) === 0;
 
   const handleDeleteCollection = useCallback(() => {
     editableCollection?.deleteCollection?.();
@@ -340,6 +417,9 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
             onClear={hasClearAll ? handleDeleteCollection : undefined}
             nextUpTitle={nextUpTitle}
             nowPlayingTitle={nowPlayingTitle}
+            isEmpty={isQueueEmpty}
+            emptyMessage={emptyMessage}
+            clearLabel={clearLabel}
           />
         ),
       });
@@ -369,6 +449,9 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     handleDeleteCollection,
     nextUpTitle,
     nowPlayingTitle,
+    isQueueEmpty,
+    emptyMessage,
+    clearLabel,
     hasAdd,
     handleCreatePlaylist,
     createPlaylistTitle,
@@ -479,6 +562,9 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
             onClear={hasClearAll ? handleDeleteCollection : undefined}
             nextUpTitle={nextUpTitle}
             nowPlayingTitle={nowPlayingTitle}
+            isEmpty={isQueueEmpty}
+            emptyMessage={emptyMessage}
+            clearLabel={clearLabel}
           />
         ) : null}
         {hasAdd ? (

package/Components/ModalComponent/__tests__/BottomSheetModalContent.test.tsx

@@ -82,14 +82,23 @@ jest.mock("../AudioPlayer/Components/Item", () => ({
   VARIANT_PLAYLIST_ITEM: {},
 }));
 
+const mockAudioPlayerButtonProps: Array<any> = [];
+const mockNowPlayingHeaderProps: Array<any> = [];
+
 jest.mock("../AudioPlayer/Components", () => ({
-  NowPlayingHeaderSection: () => null,
-  AudioPlayerButton: ({ data, onPress }: any) => {
+  NowPlayingHeaderSection: (props: any) => {
+    mockNowPlayingHeaderProps.push(props);
+
+    return null;
+  },
+  AudioPlayerButton: (props: any) => {
     const { Text } = require("react-native");
 
+    mockAudioPlayerButtonProps.push(props);
+
     return (
-      <Text testID="create-playlist-button" onPress={onPress}>
-        {data.title}
+      <Text testID="create-playlist-button" onPress={props.onPress}>
+        {props.data?.title}
       </Text>
     );
   },
@@ -201,6 +210,74 @@ describe("BottomSheetModalContent role/behavior cells", () => {
     });
   });
 
+  it("shows the empty Next Up message only when now playing is on and the list is empty", () => {
+    mockNowPlayingHeaderProps.length = 0;
+    const { BehaviorSubject } = require("rxjs");
+
+    const emptyQueue = new ContentViewModel({
+      title: "Queue",
+      items: [],
+      role: "dynamic_collection",
+      dynamicCollection: {
+        operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      },
+    });
+
+    emptyQueue.editableCollection = {
+      items$: new BehaviorSubject([]),
+      operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      move: jest.fn(),
+    };
+
+    const { rerender } = render(
+      <BottomSheetModalContent
+        {...baseProps}
+        items={[]}
+        emptyMessage="Queued items will be added here"
+        viewModel={emptyQueue}
+      />
+    );
+
+    expect(mockNowPlayingHeaderProps.at(-1)).toMatchObject({
+      isEmpty: true,
+      emptyMessage: "Queued items will be added here",
+    });
+
+    const withItem = new ContentViewModel({
+      title: "Queue",
+      items: [{ id: "t1", title: "Track 1" }],
+      role: "dynamic_collection",
+      dynamicCollection: {
+        operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      },
+    });
+
+    withItem.editableCollection = {
+      items$: new BehaviorSubject([{ id: "t1", title: "Track 1" }]),
+      operations: ["nowPlaying", "remove", "reorder", "clearAll"],
+      move: jest.fn(),
+    };
+
+    rerender(
+      <BottomSheetModalContent
+        {...baseProps}
+        items={[{ id: "t1", title: "Track 1", label: "Track 1" }]}
+        emptyMessage="Queued items will be added here"
+        viewModel={withItem}
+      />
+    );
+
+    expect(mockNowPlayingHeaderProps.at(-1)).toMatchObject({
+      isEmpty: false,
+    });
+
+    mockNowPlayingHeaderProps.length = 0;
+
+    render(<BottomSheetModalContent {...baseProps} />);
+
+    expect(mockNowPlayingHeaderProps).toHaveLength(0);
+  });
+
   it("honors disableScrollViewWrap in contentComponentProps to bypass ScrollView wrapping", () => {
     const CustomComponent = () => (
       <React.Fragment>Custom Content</React.Fragment>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.1.15",
+  "version": "15.1.16-rc.0",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.1.15",
-    "@applicaster/zapp-react-native-bridge": "15.1.15",
-    "@applicaster/zapp-react-native-redux": "15.1.15",
-    "@applicaster/zapp-react-native-utils": "15.1.15",
+    "@applicaster/applicaster-types": "15.1.16-rc.0",
+    "@applicaster/zapp-react-native-bridge": "15.1.16-rc.0",
+    "@applicaster/zapp-react-native-redux": "15.1.16-rc.0",
+    "@applicaster/zapp-react-native-utils": "15.1.16-rc.0",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",