@applicaster/zapp-react-native-ui-components 16.0.0-rc.10 → 16.0.0-rc.100

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

@@ -0,0 +1,1007 @@
+/**
+ * Modal Building Block — Item (Queue / Playlist)
+ *
+ * Single-file Expo Snack demo. Three item forms driven by configuration + data.
+ *
+ * Green (configurable): background, image, nowPlayingAsset, nowPlayingLabel,
+ *   textLabel1, textLabel2
+ * White (hardcoded): container padding/gutters, nowPlaying container layout,
+ *   button sizes/padding/assets
+ *
+ * Variants (VARIANT_*) are preset configuration bundles — not passed as a field.
+ */
+
+import React from "react";
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import {
+  MenuItem,
+  SelectionBehavior,
+} from "@applicaster/zapp-react-native-utils/modalState/types";
+import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
+import { mergeItemConfiguration } from "../utils/mergeStyles";
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  contentColumn: {
+    flex: 1,
+    justifyContent: "center",
+  },
+  buttonsRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Configuration (green fields)
+// ---------------------------------------------------------------------------
+
+export type TextTransform =
+  | "default"
+  | "lowercase"
+  | "uppercase"
+  | "capitalize";
+
+export type BackgroundConfiguration = {
+  defaultColor: string;
+  focusedColor: string;
+  cornerRadius: number;
+  paddingTop?: number;
+  paddingRight?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  highlightInsetLeft?: number;
+  highlightInsetRight?: number;
+};
+
+export type ImageConfiguration = {
+  width: number;
+  height: number;
+  borderWidth: number;
+  borderColor: string;
+  cornerRadius: number;
+};
+
+export type LabelConfiguration = {
+  fontColor: string;
+  focusedFontColor?: string;
+  iosFontFamily: string;
+  androidFontFamily: string;
+  fontSize: number;
+  lineHeight: number;
+  iosLetterSpacing: number;
+  androidLetterSpacing: number;
+  textTransform: TextTransform;
+};
+
+export type NowPlayingAssetConfiguration = {
+  asset?: string;
+};
+
+export type CheckboxAssetsConfiguration = {
+  /** Unchecked multiSelect control (item.checkbox_asset). */
+  asset?: string;
+  /** Checked multiSelect control (item.checked_checkbox_asset). */
+  checkedAsset?: string;
+};
+
+export type ActionButtonAssetsConfiguration = {
+  /** Leading remove control on Edit Order rows. */
+  removeAsset?: string;
+  /** Trailing drag handle on Edit Order / queue rows. */
+  dragAsset?: string;
+};
+
+export type ItemConfiguration = {
+  background: BackgroundConfiguration;
+  image: ImageConfiguration;
+  nowPlayingAsset: NowPlayingAssetConfiguration;
+  nowPlayingLabel: LabelConfiguration;
+  textLabel1: LabelConfiguration;
+  textLabel2: LabelConfiguration;
+  checkboxAssets?: CheckboxAssetsConfiguration;
+  actionButtonAssets?: ActionButtonAssetsConfiguration;
+};
+
+export const DEFAULT_TEXT_LABEL_1_CONFIGURATION: LabelConfiguration = {
+  fontColor: "#FFFFFF",
+  focusedFontColor: "#FFFFFF",
+  iosFontFamily: "SFProText-Semibold",
+  androidFontFamily: "Roboto-Medium",
+  fontSize: 15,
+  lineHeight: 18,
+  iosLetterSpacing: -0.2,
+  androidLetterSpacing: 0,
+  textTransform: "default",
+};
+
+export const DEFAULT_TEXT_LABEL_2_CONFIGURATION: LabelConfiguration = {
+  fontColor: "#999999",
+  iosFontFamily: "SFProText-Medium",
+  androidFontFamily: "Roboto-Medium",
+  fontSize: 13,
+  lineHeight: 16,
+  iosLetterSpacing: -0.1,
+  androidLetterSpacing: 0,
+  textTransform: "default",
+};
+
+export const DEFAULT_NOW_PLAYING_LABEL_CONFIGURATION: LabelConfiguration = {
+  fontColor: "#FFFFFF",
+  iosFontFamily: "SFProText-Semibold",
+  androidFontFamily: "Roboto-Medium",
+  fontSize: 13,
+  lineHeight: 16,
+  iosLetterSpacing: 0,
+  androidLetterSpacing: 0,
+  textTransform: "default",
+};
+
+// ---------------------------------------------------------------------------
+// Data
+// ---------------------------------------------------------------------------
+
+export type ItemButtonAction = "playPause" | "drag" | "multiSelect" | "remove";
+
+export type ItemData = {
+  imageUri?: string;
+  textLabel1: string;
+  textLabel2: string;
+  /** When set, shows the Now Playing row (equalizer + label). */
+  nowPlayingLabel?: string;
+  /** Button 2 (left most) — hardcoded action decides icon. */
+  leadingButton?: ItemButtonAction;
+  /** Button 1 (right most) — hardcoded action decides icon. */
+  trailingButton?: ItemButtonAction;
+  isSelected?: boolean;
+};
+
+export type AudioPlayerTrackItemProps = {
+  configuration: ItemConfiguration;
+  data: ItemData;
+  focused?: boolean;
+  focusedLeadingButton?: boolean;
+  focusedTrailingButton?: boolean;
+  onPress?: () => void;
+  onLeadingButtonPress?: () => void;
+  onTrailingButtonPress?: () => void;
+  renderHandle?: (element: React.ReactElement) => React.ReactElement;
+};
+
+// ---------------------------------------------------------------------------
+// Hardcoded (white fields)
+// ---------------------------------------------------------------------------
+
+type ContainerSpec = {
+  paddingTop: number;
+  paddingRight: number;
+  paddingBottom: number;
+  paddingLeft: number;
+  horizontalGutter: number;
+  verticalGutter: number;
+};
+
+type ButtonLayoutSpec = {
+  assetWidth: number;
+  assetHeight: number;
+  paddingTop: number;
+  paddingRight: number;
+  paddingBottom: number;
+  paddingLeft: number;
+};
+
+const CONTAINER_SPEC_LARGE_IMAGE: ContainerSpec = {
+  paddingTop: 8,
+  paddingRight: 20,
+  paddingBottom: 8,
+  paddingLeft: 20,
+  horizontalGutter: 12,
+  verticalGutter: 2,
+};
+
+const CONTAINER_SPEC_DEFAULT: ContainerSpec = {
+  paddingTop: 8,
+  paddingRight: 10,
+  paddingBottom: 8,
+  paddingLeft: 10,
+  horizontalGutter: 12,
+  verticalGutter: 2,
+};
+
+const BUTTONS_CONTAINER_HORIZONTAL_GUTTER = 4;
+
+const NOW_PLAYING_CONTAINER_SPEC = {
+  horizontalGutter: 4,
+  marginTop: 0,
+  marginRight: 0,
+  marginBottom: 6,
+  marginLeft: 0,
+};
+
+const NOW_PLAYING_ASSET_SPEC = {
+  width: 16,
+  height: 16,
+};
+
+const BUTTON_LAYOUT_SPEC: Record<ItemButtonAction, ButtonLayoutSpec> = {
+  playPause: {
+    assetWidth: 44,
+    assetHeight: 44,
+    paddingTop: 0,
+    paddingRight: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+  },
+  drag: {
+    assetWidth: 24,
+    assetHeight: 24,
+    paddingTop: 10,
+    paddingRight: 10,
+    paddingBottom: 10,
+    paddingLeft: 10,
+  },
+  multiSelect: {
+    assetWidth: 24,
+    assetHeight: 24,
+    paddingTop: 10,
+    paddingRight: 10,
+    paddingBottom: 10,
+    paddingLeft: 10,
+  },
+  remove: {
+    assetWidth: 24,
+    assetHeight: 24,
+    paddingTop: 10,
+    paddingRight: 10,
+    paddingBottom: 10,
+    paddingLeft: 10,
+  },
+};
+
+const DEFAULT_THUMB_ASSET =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAQklEQVR42u3PMQ0AAAgDsEmcfzNggZekRwU0beezCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAhcLQVXaABdK6k6AAAAAElFTkSuQmCC";
+
+const DEFAULT_EQUALIZER_ASSET =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAI0lEQVR42mNgGNTgPxTQzwB0DVQ3gKCBowbQwYAhkBIHBAAA9TvPMeOFaLMAAAAASUVORK5CYII=";
+
+function getTextTransformStyle(
+  textTransform: TextTransform
+): "none" | "lowercase" | "uppercase" | "capitalize" {
+  return textTransform === "default" ? "none" : textTransform;
+}
+
+function getFontFamily(ios: string, android: string) {
+  return Platform.select({ ios, android, default: android });
+}
+
+/** Hardcoded: large image (72) uses wider horizontal container padding. */
+function resolveContainerSpec(image: ImageConfiguration): ContainerSpec {
+  return image.width >= 72
+    ? CONTAINER_SPEC_LARGE_IMAGE
+    : CONTAINER_SPEC_DEFAULT;
+}
+
+export function mapMenuItemToNowPlayingData(
+  item: MenuItem,
+  isPaused?: boolean,
+  nowPlayingLabel = "Now Playing"
+): ItemData {
+  return {
+    imageUri: item.icon,
+    textLabel1: item.title,
+    textLabel2: item.summary ?? "",
+    nowPlayingLabel,
+    trailingButton: "playPause",
+    isSelected: isPaused !== undefined ? !isPaused : item.isSelected,
+  };
+}
+
+export function mapMenuItemToQueuedData(item: MenuItem): ItemData {
+  return {
+    imageUri: item.icon,
+    textLabel1: item.title,
+    textLabel2: item.summary ?? "",
+    leadingButton: "remove",
+    trailingButton: "drag",
+    isSelected: item.isSelected,
+  };
+}
+
+export function mapMenuItemToPlaylistData(
+  item: MenuItem,
+  behavior?: SelectionBehavior
+): ItemData {
+  const showSelectionWidget =
+    behavior?.selectMode !== "none" && item.trailingButton !== "none";
+
+  const summary =
+    typeof item.summary === "string" ? item.summary.trim() : item.summary;
+
+  return {
+    imageUri: item.icon,
+    textLabel1: item.title,
+    textLabel2: summary || "",
+    trailingButton: showSelectionWidget
+      ? item.trailingButton || ("multiSelect" as ItemButtonAction)
+      : undefined,
+    isSelected: item.isSelected,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Inner components
+// ---------------------------------------------------------------------------
+
+type ItemContainerProps = {
+  image: ImageConfiguration;
+  background: BackgroundConfiguration;
+  focused: boolean;
+  children: React.ReactNode;
+  onPress?: () => void;
+};
+
+function ItemContainer({
+  image,
+  background,
+  focused,
+  children,
+  onPress,
+}: ItemContainerProps) {
+  const container = resolveContainerSpec(image);
+  const insetLeft = background.highlightInsetLeft ?? 0;
+  const insetRight = background.highlightInsetRight ?? 0;
+
+  return (
+    <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>
+  );
+}
+
+type ItemThumbnailProps = {
+  configuration: ImageConfiguration;
+  imageUri?: string;
+};
+
+function ItemThumbnail({ configuration, imageUri }: ItemThumbnailProps) {
+  return (
+    <Image
+      source={{ uri: imageUri ?? DEFAULT_THUMB_ASSET }}
+      style={{
+        width: configuration.width,
+        height: configuration.height,
+        borderWidth: configuration.borderWidth,
+        borderColor: configuration.borderColor,
+        borderRadius: configuration.cornerRadius,
+      }}
+      resizeMode="cover"
+    />
+  );
+}
+
+type ItemLabelProps = {
+  text: string;
+  configuration: LabelConfiguration;
+  focused?: boolean;
+};
+
+function ItemLabel({ text, configuration, focused = false }: ItemLabelProps) {
+  if (!text) {
+    return null;
+  }
+
+  const color =
+    focused && configuration.focusedFontColor
+      ? configuration.focusedFontColor
+      : configuration.fontColor;
+
+  return (
+    <Text
+      style={{
+        color,
+        fontSize: configuration.fontSize,
+        lineHeight: configuration.lineHeight,
+        letterSpacing:
+          Platform.OS === "ios"
+            ? configuration.iosLetterSpacing
+            : configuration.androidLetterSpacing,
+        fontFamily: getFontFamily(
+          configuration.iosFontFamily,
+          configuration.androidFontFamily
+        ),
+        textTransform: getTextTransformStyle(configuration.textTransform),
+      }}
+      numberOfLines={1}
+    >
+      {text}
+    </Text>
+  );
+}
+
+type NowPlayingRowProps = {
+  assetConfiguration: NowPlayingAssetConfiguration;
+  labelConfiguration: LabelConfiguration;
+  label: string;
+};
+
+function NowPlayingRow({
+  assetConfiguration,
+  labelConfiguration,
+  label,
+}: NowPlayingRowProps) {
+  const asset = assetConfiguration.asset ?? DEFAULT_EQUALIZER_ASSET;
+
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        marginTop: NOW_PLAYING_CONTAINER_SPEC.marginTop,
+        marginRight: NOW_PLAYING_CONTAINER_SPEC.marginRight,
+        marginBottom: NOW_PLAYING_CONTAINER_SPEC.marginBottom,
+        marginLeft: NOW_PLAYING_CONTAINER_SPEC.marginLeft,
+      }}
+    >
+      <Image
+        source={{ uri: asset }}
+        style={{
+          width: NOW_PLAYING_ASSET_SPEC.width,
+          height: NOW_PLAYING_ASSET_SPEC.height,
+        }}
+        resizeMode="contain"
+      />
+      <View style={{ width: NOW_PLAYING_CONTAINER_SPEC.horizontalGutter }} />
+      <ItemLabel text={label} configuration={labelConfiguration} />
+    </View>
+  );
+}
+
+type ItemButtonProps = {
+  action: ItemButtonAction;
+  focused?: boolean;
+  onPress?: () => void;
+  isSelected?: boolean;
+  checkboxAssets?: CheckboxAssetsConfiguration;
+  actionButtonAssets?: ActionButtonAssetsConfiguration;
+};
+
+function ItemButton({
+  action,
+  focused = false,
+  onPress,
+  isSelected = false,
+  checkboxAssets,
+  actionButtonAssets,
+}: ItemButtonProps) {
+  const layout = BUTTON_LAYOUT_SPEC[action];
+
+  if (!layout) {
+    return null;
+  }
+
+  const renderIcon = () => {
+    switch (action) {
+      case "playPause": {
+        const iconSize = layout.assetWidth;
+        const iconRadius = iconSize / 2;
+
+        return (
+          <View
+            style={{
+              width: iconSize,
+              height: iconSize,
+              borderRadius: iconRadius,
+              backgroundColor: "#FFFFFF",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            {isSelected ? (
+              <View
+                style={{
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  width: 10,
+                  height: 16,
+                }}
+              >
+                <View
+                  style={{
+                    width: 3.5,
+                    height: 16,
+                    backgroundColor: "#1e1e1e",
+                    borderRadius: 1,
+                  }}
+                />
+                <View
+                  style={{
+                    width: 3.5,
+                    height: 16,
+                    backgroundColor: "#1e1e1e",
+                    borderRadius: 1,
+                  }}
+                />
+              </View>
+            ) : (
+              <View
+                style={{
+                  width: 0,
+                  height: 0,
+                  backgroundColor: "transparent",
+                  borderStyle: "solid",
+                  borderLeftWidth: 14,
+                  borderRightWidth: 0,
+                  borderTopWidth: 8,
+                  borderBottomWidth: 8,
+                  borderLeftColor: "#1e1e1e",
+                  borderRightColor: "transparent",
+                  borderTopColor: "transparent",
+                  borderBottomColor: "transparent",
+                  marginLeft: 3,
+                }}
+              />
+            )}
+          </View>
+        );
+      }
+
+      case "drag": {
+        if (actionButtonAssets?.dragAsset) {
+          return (
+            <Image
+              source={{ uri: actionButtonAssets.dragAsset }}
+              style={{
+                width: layout.assetWidth,
+                height: layout.assetHeight,
+              }}
+              resizeMode="contain"
+            />
+          );
+        }
+
+        return (
+          <View
+            style={{
+              width: 20,
+              height: 12,
+              justifyContent: "space-between",
+            }}
+          >
+            <View
+              style={{
+                height: 2,
+                backgroundColor: "rgba(255, 255, 255, 0.7)",
+                borderRadius: 1,
+              }}
+            />
+            <View
+              style={{
+                height: 2,
+                backgroundColor: "rgba(255, 255, 255, 0.7)",
+                borderRadius: 1,
+              }}
+            />
+            <View
+              style={{
+                height: 2,
+                backgroundColor: "rgba(255, 255, 255, 0.7)",
+                borderRadius: 1,
+              }}
+            />
+          </View>
+        );
+      }
+
+      case "remove": {
+        if (actionButtonAssets?.removeAsset) {
+          return (
+            <Image
+              source={{ uri: actionButtonAssets.removeAsset }}
+              style={{
+                width: layout.assetWidth,
+                height: layout.assetHeight,
+              }}
+              resizeMode="contain"
+            />
+          );
+        }
+
+        return (
+          <View
+            style={{
+              width: 24,
+              height: 24,
+              borderRadius: 12,
+              borderWidth: 1.5,
+              borderColor: "rgba(255, 255, 255, 0.7)",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <View
+              style={{
+                width: 10,
+                height: 1.5,
+                backgroundColor: "rgba(255, 255, 255, 0.7)",
+                borderRadius: 1,
+              }}
+            />
+          </View>
+        );
+      }
+
+      case "multiSelect": {
+        const studioAsset = isSelected
+          ? checkboxAssets?.checkedAsset
+          : checkboxAssets?.asset;
+
+        if (studioAsset) {
+          return (
+            <Image
+              source={{ uri: studioAsset }}
+              style={{
+                width: layout.assetWidth,
+                height: layout.assetHeight,
+              }}
+              resizeMode="contain"
+            />
+          );
+        }
+
+        if (!isSelected) {
+          return (
+            <View
+              style={{
+                width: layout.assetWidth,
+                height: layout.assetHeight,
+                borderRadius: layout.assetWidth / 2,
+                borderWidth: 1.5,
+                borderColor: "rgba(255, 255, 255, 0.7)",
+                backgroundColor: "transparent",
+              }}
+            />
+          );
+        }
+
+        return (
+          <View
+            style={{
+              width: 24,
+              height: 24,
+              borderRadius: 12,
+              backgroundColor: "#FFFFFF",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <View
+              style={{
+                width: 6,
+                height: 10,
+                borderBottomWidth: 2,
+                borderRightWidth: 2,
+                borderColor: "#1e1e1e",
+                transform: [{ rotate: "45deg" }],
+                marginTop: -2,
+              }}
+            />
+          </View>
+        );
+      }
+
+      default:
+        return null;
+    }
+  };
+
+  const buttonPadding = {
+    paddingTop: layout.paddingTop,
+    paddingRight: layout.paddingRight,
+    paddingBottom: layout.paddingBottom,
+    paddingLeft: layout.paddingLeft,
+  };
+
+  // A nested Pressable with no handler swallows the parent row press.
+  if (!onPress) {
+    return (
+      <View pointerEvents="none" style={buttonPadding}>
+        {renderIcon()}
+      </View>
+    );
+  }
+
+  return (
+    <Pressable
+      onPress={(e: any) => {
+        e?.stopPropagation?.();
+        onPress();
+      }}
+      style={({ pressed }) => [
+        buttonPadding,
+        {
+          opacity: pressed || focused ? 0.7 : 1,
+        },
+      ]}
+    >
+      {renderIcon()}
+    </Pressable>
+  );
+}
+
+type ItemButtonsProps = {
+  leadingButton?: ItemButtonAction;
+  trailingButton?: ItemButtonAction;
+  focusedLeadingButton?: boolean;
+  focusedTrailingButton?: boolean;
+  onLeadingButtonPress?: () => void;
+  onTrailingButtonPress?: () => void;
+  isSelected?: boolean;
+  renderHandle?: (element: React.ReactElement) => React.ReactElement;
+  checkboxAssets?: CheckboxAssetsConfiguration;
+  actionButtonAssets?: ActionButtonAssetsConfiguration;
+};
+
+function ItemButtons({
+  leadingButton,
+  trailingButton,
+  focusedLeadingButton = false,
+  focusedTrailingButton = false,
+  onLeadingButtonPress,
+  onTrailingButtonPress,
+  isSelected = false,
+  renderHandle,
+  checkboxAssets,
+  actionButtonAssets,
+}: ItemButtonsProps) {
+  if (!leadingButton && !trailingButton) {
+    return null;
+  }
+
+  return (
+    <View style={styles.buttonsRow}>
+      {leadingButton ? (
+        <>
+          <ItemButton
+            action={leadingButton}
+            focused={focusedLeadingButton}
+            onPress={onLeadingButtonPress}
+            isSelected={isSelected}
+            checkboxAssets={checkboxAssets}
+            actionButtonAssets={actionButtonAssets}
+          />
+          <View style={{ width: BUTTONS_CONTAINER_HORIZONTAL_GUTTER }} />
+        </>
+      ) : null}
+      {trailingButton ? (
+        trailingButton === "drag" ? (
+          renderHandle ? (
+            renderHandle(
+              <ItemButton
+                action={trailingButton}
+                focused={focusedTrailingButton}
+                onPress={onTrailingButtonPress}
+                isSelected={isSelected}
+                checkboxAssets={checkboxAssets}
+                actionButtonAssets={actionButtonAssets}
+              />
+            )
+          ) : (
+            <ItemButton
+              action={trailingButton}
+              focused={focusedTrailingButton}
+              onPress={onTrailingButtonPress}
+              isSelected={isSelected}
+              checkboxAssets={checkboxAssets}
+              actionButtonAssets={actionButtonAssets}
+            />
+          )
+        ) : (
+          <ItemButton
+            action={trailingButton}
+            focused={focusedTrailingButton}
+            onPress={onTrailingButtonPress}
+            isSelected={isSelected}
+            checkboxAssets={checkboxAssets}
+            actionButtonAssets={actionButtonAssets}
+          />
+        )
+      ) : null}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// AudioPlayerTrackItem
+// ---------------------------------------------------------------------------
+
+export function AudioPlayerTrackItem({
+  configuration,
+  data,
+  focused = false,
+  focusedLeadingButton = false,
+  focusedTrailingButton = false,
+  onPress,
+  onLeadingButtonPress,
+  onTrailingButtonPress,
+  renderHandle,
+}: AudioPlayerTrackItemProps) {
+  const modalBlocksStyle = useModalBlocksStyle();
+  const showNowPlaying = !!data.nowPlayingLabel;
+
+  const itemBlock =
+    showNowPlaying && modalBlocksStyle?.nowPlayingItem
+      ? modalBlocksStyle.nowPlayingItem
+      : modalBlocksStyle?.item;
+
+  const effectiveConfig = React.useMemo(() => {
+    return mergeItemConfiguration(configuration, itemBlock);
+  }, [configuration, itemBlock]);
+
+  const {
+    background,
+    image,
+    textLabel1,
+    textLabel2,
+    nowPlayingLabel,
+    nowPlayingAsset,
+    checkboxAssets,
+    actionButtonAssets,
+  } = effectiveConfig;
+
+  const container = resolveContainerSpec(image);
+
+  const handleTrailingButtonPress =
+    onTrailingButtonPress ??
+    (data.trailingButton === "multiSelect" ? onPress : undefined);
+
+  return (
+    <ItemContainer
+      image={image}
+      background={background}
+      focused={focused}
+      onPress={onPress}
+    >
+      <View style={styles.row}>
+        <ItemThumbnail configuration={image} imageUri={data.imageUri} />
+        <View style={{ width: container.horizontalGutter }} />
+        <View style={styles.contentColumn}>
+          {showNowPlaying ? (
+            <NowPlayingRow
+              assetConfiguration={nowPlayingAsset}
+              labelConfiguration={nowPlayingLabel}
+              label={data.nowPlayingLabel}
+            />
+          ) : null}
+          {showNowPlaying && (data.textLabel1 || data.textLabel2) ? (
+            <View style={{ height: container.verticalGutter }} />
+          ) : null}
+          {data.textLabel1 ? (
+            <ItemLabel
+              text={data.textLabel1}
+              configuration={textLabel1}
+              focused={focused}
+            />
+          ) : null}
+          {data.textLabel1 && data.textLabel2 ? (
+            <View style={{ height: container.verticalGutter }} />
+          ) : null}
+          {data.textLabel2 ? (
+            <ItemLabel text={data.textLabel2} configuration={textLabel2} />
+          ) : null}
+        </View>
+        <ItemButtons
+          leadingButton={data.leadingButton}
+          trailingButton={data.trailingButton}
+          focusedLeadingButton={focusedLeadingButton}
+          focusedTrailingButton={focusedTrailingButton}
+          onLeadingButtonPress={onLeadingButtonPress}
+          onTrailingButtonPress={handleTrailingButtonPress}
+          isSelected={data.isSelected}
+          renderHandle={renderHandle}
+          checkboxAssets={checkboxAssets}
+          actionButtonAssets={actionButtonAssets}
+        />
+      </View>
+    </ItemContainer>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Variant presets — collections of configuration keys (not a variant field)
+// ---------------------------------------------------------------------------
+
+/** Variant 1 — Now Playing */
+export const VARIANT_NOW_PLAYING: ItemConfiguration = {
+  background: {
+    defaultColor: "transparent",
+    focusedColor: "transparent",
+    cornerRadius: 0,
+    paddingTop: 8,
+    paddingRight: 20,
+    paddingBottom: 8,
+    paddingLeft: 20,
+  },
+  image: {
+    width: 72,
+    height: 72,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+    cornerRadius: 8,
+  },
+  nowPlayingAsset: {},
+  nowPlayingLabel: DEFAULT_NOW_PLAYING_LABEL_CONFIGURATION,
+  textLabel1: DEFAULT_TEXT_LABEL_1_CONFIGURATION,
+  textLabel2: DEFAULT_TEXT_LABEL_2_CONFIGURATION,
+};
+
+/** Default / Variant 2 — Queued Item */
+export const VARIANT_QUEUED_ITEM: ItemConfiguration = {
+  background: {
+    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,
+    height: 48,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+    cornerRadius: 6,
+  },
+  nowPlayingAsset: {},
+  nowPlayingLabel: DEFAULT_NOW_PLAYING_LABEL_CONFIGURATION,
+  textLabel1: DEFAULT_TEXT_LABEL_1_CONFIGURATION,
+  textLabel2: DEFAULT_TEXT_LABEL_2_CONFIGURATION,
+};
+
+/** Variant 3 — Playlist Item */
+export const VARIANT_PLAYLIST_ITEM: ItemConfiguration = {
+  background: {
+    defaultColor: "transparent",
+    focusedColor: "rgba(62, 62, 62, 1)",
+    cornerRadius: 12,
+    paddingTop: 8,
+    paddingRight: 10,
+    paddingBottom: 8,
+    paddingLeft: 10,
+  },
+  image: {
+    width: 48,
+    height: 48,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+    cornerRadius: 6,
+  },
+  nowPlayingAsset: {},
+  nowPlayingLabel: DEFAULT_NOW_PLAYING_LABEL_CONFIGURATION,
+  textLabel1: DEFAULT_TEXT_LABEL_1_CONFIGURATION,
+  textLabel2: DEFAULT_TEXT_LABEL_2_CONFIGURATION,
+};