@umituz/react-native-video-editor 1.1.64 → 1.1.65

package/src/presentation/components/SubtitleStylePicker.tsx

@@ -1,17 +1,14 @@
 /**
- * SubtitleStylePicker Component
- * Font size, color, background, position pickers + live preview
+ * Subtitle Style Picker Component
+ * REFACTORED: Uses generic Selector component (110 lines)
  */
 
 import React, { useMemo } from "react";
-import { View, TouchableOpacity, ScrollView, StyleSheet } from "react-native";
+import { View, ScrollView } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import {
-  FONT_SIZE_MAP,
-  SUBTITLE_FONT_COLORS,
-  SUBTITLE_BG_COLORS,
-} from "../../infrastructure/constants/subtitle.constants";
+import { Selector, type SelectorItem } from "./generic/Selector";
+import { FONT_SIZE_MAP, SUBTITLE_FONT_COLORS, SUBTITLE_BG_COLORS } from "../../infrastructure/constants/subtitle.constants";
 import type { SubtitleStyle } from "../../domain/entities/video-project.types";
 
 interface SubtitleStylePickerProps {
@@ -24,166 +21,49 @@ interface SubtitleStylePickerProps {
 const FONT_SIZES: SubtitleStyle["fontSize"][] = ["small", "medium", "large", "extraLarge"];
 const POSITIONS: SubtitleStyle["position"][] = ["top", "center", "bottom"];
 
-export const SubtitleStylePicker: React.FC<SubtitleStylePickerProps> = ({
-  style,
-  previewText,
-  onChange,
-  t,
-}) => {
+const Section = ({ title, children }: { title: string; children: React.ReactNode }) => {
   const tokens = useAppDesignTokens();
+  return (
+    <View style={{ marginTop: tokens.spacing.md }}>
+      <AtomicText type="labelSmall" color="textSecondary" style={{ marginBottom: tokens.spacing.sm }}>{title}</AtomicText>
+      {children}
+    </View>
+  );
+};
 
-  const styles = useMemo(() => StyleSheet.create({
-    section: { marginTop: tokens.spacing.md },
-    sectionLabel: { marginBottom: tokens.spacing.sm },
-    row: { flexDirection: "row", gap: tokens.spacing.sm, flexWrap: "wrap" },
-    optionBtn: {
-      paddingHorizontal: tokens.spacing.md,
-      paddingVertical: tokens.spacing.sm,
-      borderRadius: tokens.borders.radius.md,
-      backgroundColor: tokens.colors.surface,
-      borderWidth: 1,
-      borderColor: tokens.colors.border,
-    },
-    optionBtnActive: {
-      backgroundColor: tokens.colors.primaryContainer,
-      borderColor: tokens.colors.primary,
-    },
-    colorRow: { flexDirection: "row", gap: tokens.spacing.sm },
-    colorBtn: {
-      width: 36,
-      height: 36,
-      borderRadius: 18,
-      borderWidth: 2,
-      borderColor: "transparent",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    colorBtnActive: {
-      borderColor: tokens.colors.primary,
-    },
-    previewBox: {
-      height: 72,
-      backgroundColor: tokens.colors.surfaceVariant,
-      borderRadius: tokens.borders.radius.md,
-      marginTop: tokens.spacing.md,
-      justifyContent: "center",
-      alignItems: "center",
-      borderWidth: 1,
-      borderColor: tokens.colors.border,
-      overflow: "hidden",
-    },
-    previewBubble: {
-      paddingHorizontal: tokens.spacing.md,
-      paddingVertical: tokens.spacing.xs,
-      borderRadius: tokens.borders.radius.sm,
-    },
-  }), [tokens]);
+export const SubtitleStylePicker: React.FC<SubtitleStylePickerProps> = ({ style, previewText, onChange, t }) => {
+  const tokens = useAppDesignTokens();
 
-  const update = (patch: Partial<SubtitleStyle>) => onChange({ ...style, ...patch });
+  const fontSizeItems = useMemo<SelectorItem<SubtitleStyle["fontSize"]>[]>(() => FONT_SIZES.map((size) => ({ value: size, label: size })), []);
+  const fontColorItems = useMemo<SelectorItem[]>(() => SUBTITLE_FONT_COLORS.map((color) => ({ value: color, label: "", color })), []);
+  const bgColorItems = useMemo<SelectorItem[]>(() => SUBTITLE_BG_COLORS.map((bg) => ({ value: bg.value, label: bg.label, color: bg.value })), []);
+  const positionItems = useMemo<SelectorItem<SubtitleStyle["position"]>[]>(() => POSITIONS.map((pos) => ({ value: pos, label: pos })), []);
 
   return (
-    <View>
-      {/* Font size */}
-      <View style={styles.section}>
-        <AtomicText type="labelSmall" color="textSecondary" style={styles.sectionLabel}>
-          {t("subtitle.style.fontSize") || "Size"}
-        </AtomicText>
-        <View style={styles.row}>
-          {FONT_SIZES.map((size) => (
-            <TouchableOpacity
-              key={size}
-              style={[styles.optionBtn, style.fontSize === size && styles.optionBtnActive]}
-              onPress={() => update({ fontSize: size })}
-              accessibilityRole="button"
-            >
-              <AtomicText
-                type="labelSmall"
-                color={style.fontSize === size ? "primary" : "textSecondary"}
-              >
-                {size}
-              </AtomicText>
-            </TouchableOpacity>
-          ))}
-        </View>
-      </View>
+    <ScrollView>
+      <Section title={t("subtitle.style.fontSize") || "Size"}>
+        <Selector items={fontSizeItems} selectedValue={style.fontSize} onSelect={(value) => onChange({ ...style, fontSize: value })} orientation="horizontal" testID="font-size-selector" />
+      </Section>
 
-      {/* Font color */}
-      <View style={styles.section}>
-        <AtomicText type="labelSmall" color="textSecondary" style={styles.sectionLabel}>
-          {t("subtitle.style.fontColor") || "Color"}
-        </AtomicText>
-        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          <View style={styles.colorRow}>
-            {SUBTITLE_FONT_COLORS.map((color) => (
-              <TouchableOpacity
-                key={color}
-                style={[styles.colorBtn, { backgroundColor: color }, style.fontColor === color && styles.colorBtnActive]}
-                onPress={() => update({ fontColor: color })}
-                accessibilityRole="button"
-              />
-            ))}
-          </View>
-        </ScrollView>
-      </View>
+      <Section title={t("subtitle.style.fontColor") || "Color"}>
+        <Selector items={fontColorItems} selectedValue={style.fontColor} onSelect={(value) => onChange({ ...style, fontColor: value })} orientation="horizontal" colorPreview testID="font-color-selector" />
+      </Section>
 
-      {/* Background */}
-      <View style={styles.section}>
-        <AtomicText type="labelSmall" color="textSecondary" style={styles.sectionLabel}>
-          {t("subtitle.style.background") || "Background"}
-        </AtomicText>
-        <View style={styles.row}>
-          {SUBTITLE_BG_COLORS.map((bg) => (
-            <TouchableOpacity
-              key={bg.value}
-              style={[styles.optionBtn, style.backgroundColor === bg.value && styles.optionBtnActive]}
-              onPress={() => update({ backgroundColor: bg.value })}
-              accessibilityRole="button"
-            >
-              <AtomicText
-                type="labelSmall"
-                color={style.backgroundColor === bg.value ? "primary" : "textSecondary"}
-              >
-                {bg.label}
-              </AtomicText>
-            </TouchableOpacity>
-          ))}
-        </View>
-      </View>
+      <Section title={t("subtitle.style.background") || "Background"}>
+        <Selector items={bgColorItems} selectedValue={style.backgroundColor} onSelect={(value) => onChange({ ...style, backgroundColor: value })} orientation="horizontal" testID="bg-color-selector" />
+      </Section>
 
-      {/* Position */}
-      <View style={styles.section}>
-        <AtomicText type="labelSmall" color="textSecondary" style={styles.sectionLabel}>
-          {t("subtitle.style.position") || "Position"}
-        </AtomicText>
-        <View style={styles.row}>
-          {POSITIONS.map((pos) => (
-            <TouchableOpacity
-              key={pos}
-              style={[styles.optionBtn, style.position === pos && styles.optionBtnActive]}
-              onPress={() => update({ position: pos })}
-              accessibilityRole="button"
-            >
-              <AtomicText
-                type="labelSmall"
-                color={style.position === pos ? "primary" : "textSecondary"}
-              >
-                {pos}
-              </AtomicText>
-            </TouchableOpacity>
-          ))}
-        </View>
-      </View>
+      <Section title={t("subtitle.style.position") || "Position"}>
+        <Selector items={positionItems} selectedValue={style.position} onSelect={(value) => onChange({ ...style, position: value })} testID="position-selector" />
+      </Section>
 
-      {/* Preview */}
-      <View style={styles.previewBox}>
-        <View style={[styles.previewBubble, { backgroundColor: style.backgroundColor }]}>
-          <AtomicText
-            style={{ color: style.fontColor, fontSize: FONT_SIZE_MAP[style.fontSize] * 0.75, textAlign: "center" }}
-          >
+      <View style={{ height: 72, backgroundColor: tokens.colors.surfaceVariant, borderRadius: tokens.borders.radius.md, marginTop: tokens.spacing.md, justifyContent: "center", alignItems: "center", borderWidth: 1, borderColor: tokens.colors.border, overflow: "hidden" }}>
+        <View style={{ paddingHorizontal: tokens.spacing.md, paddingVertical: tokens.spacing.xs, borderRadius: tokens.borders.radius.sm, backgroundColor: style.backgroundColor }}>
+          <AtomicText style={{ color: style.fontColor, fontSize: FONT_SIZE_MAP[style.fontSize] * 0.75, textAlign: "center" }}>
             {previewText || t("subtitle.preview.placeholder") || "Preview text"}
           </AtomicText>
         </View>
       </View>
-    </View>
+    </ScrollView>
   );
 };

package/src/presentation/components/draggable-layer/LayerContent.tsx

@@ -1,10 +1,12 @@
 /**
  * LayerContent Component
  * Renders different layer types (text, image, shape)
+ * PERFORMANCE: Uses expo-image for better caching and memory management
  */
 
 import React from "react";
-import { View, Image, Text as RNText, StyleSheet } from "react-native";
+import { View, Text as RNText, StyleSheet } from "react-native";
+import { Image } from "expo-image";
 import { AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import type { Layer, TextLayer, ImageLayer, ShapeLayer } from "../../../domain/entities/video-project.types";
@@ -46,7 +48,10 @@ export const LayerContent: React.FC<LayerContentProps> = ({ layer }) => {
         <Image
           source={{ uri: imageLayer.uri }}
           style={styles.layerImage}
-          resizeMode="cover"
+          contentFit="cover"
+          // PERFORMANCE: Cache strategy for better performance
+          cachePolicy="memory-disk"
+          transition={200} // Smooth fade-in
         />
       ) : (
         <View style={[styles.imagePlaceholder, { backgroundColor: tokens.colors.surface }]}>

package/src/presentation/components/generic/ActionMenu.tsx

@@ -0,0 +1,110 @@
+/**
+ * Generic Action Menu Component
+ * Single Responsibility: Display action menu with selectable items
+ * Replaces: LayerActionsMenu, SceneActionsMenu, SubtitleListPanel actions
+ *
+ * Features:
+ * - Vertical list of actions
+ * - Icons + labels
+ * - Disabled states
+ * - Destructive action styling
+ */
+
+import React, { useMemo } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+
+export interface ActionMenuItem {
+  id: string;
+  label: string;
+  icon?: string;
+  destructive?: boolean;
+  disabled?: boolean;
+  testID?: string;
+}
+
+export interface ActionMenuProps {
+  actions: ActionMenuItem[];
+  onSelect: (actionId: string) => void;
+  testID?: string;
+}
+
+/**
+ * Generic action menu that can render any set of actions
+ * Used for layer actions, scene actions, etc.
+ */
+export function ActionMenu({
+  actions,
+  onSelect,
+  testID = "action-menu",
+}: ActionMenuProps) {
+  const tokens = useAppDesignTokens();
+
+  const styles = useMemo(() => StyleSheet.create({
+    container: {
+      backgroundColor: tokens.colors.surface,
+      borderRadius: tokens.borders.radius.lg,
+      padding: tokens.spacing.xs,
+    },
+    actionItem: {
+      flexDirection: "row" as const,
+      alignItems: "center" as const,
+      padding: tokens.spacing.md,
+      borderRadius: tokens.borders.radius.md,
+      gap: tokens.spacing.md,
+    },
+    actionItemDestructive: {
+      backgroundColor: `${tokens.colors.error}10`,
+    },
+    actionItemDisabled: {
+      opacity: 0.4,
+    },
+    icon: {
+      width: 24,
+      height: 24,
+      alignItems: "center" as const,
+      justifyContent: "center" as const,
+    },
+    label: {
+      flex: 1,
+    },
+  }), [tokens]);
+
+  return (
+    <View style={styles.container} testID={testID}>
+      {actions.map((action) => (
+        <TouchableOpacity
+          key={action.id}
+          style={[
+            styles.actionItem,
+            action.destructive && styles.actionItemDestructive,
+            action.disabled && styles.actionItemDisabled,
+          ]}
+          onPress={() => onSelect(action.id)}
+          disabled={action.disabled}
+          testID={action.testID}
+          accessibilityRole="button"
+          accessibilityLabel={action.label}
+        >
+          {action.icon && (
+            <View style={styles.icon}>
+              <AtomicIcon
+                name={action.icon}
+                size="sm"
+                color={action.destructive ? "error" : "textPrimary"}
+              />
+            </View>
+          )}
+          <AtomicText
+            style={styles.label}
+            color={action.destructive ? "error" : "textPrimary"}
+            fontWeight="medium"
+          >
+            {action.label}
+          </AtomicText>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+}

package/src/presentation/components/generic/Editor.tsx

@@ -0,0 +1,65 @@
+/**
+ * Universal Editor Component
+ * Replaces: ImageLayerEditor, TextLayerEditor, ShapeLayerEditor, AudioEditor, AnimationEditor
+ */
+
+import React from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+
+export interface EditorSection {
+  id: string;
+  title?: string;
+  component: React.ComponentType<any>;
+  props?: Record<string, unknown>;
+}
+
+export interface EditorConfig<T = unknown> {
+  sections: EditorSection[];
+  preview?: React.ComponentType<{ data: T }>;
+  actions?: { saveLabel?: string; cancelLabel?: string; onSave: () => void | Promise<void>; onCancel: () => void };
+  isValid?: boolean;
+  testID?: string;
+}
+
+export function Editor<T = unknown>({ sections, preview: Preview, actions, isValid = true, testID = "editor" }: EditorConfig<T>) {
+  const tokens = useAppDesignTokens();
+  const styles = StyleSheet.create({
+    container: { flex: 1, backgroundColor: tokens.colors.surface },
+    scrollContent: { padding: tokens.spacing.md, paddingBottom: tokens.spacing.xl },
+    section: { marginBottom: tokens.spacing.lg },
+    previewContainer: { margin: tokens.spacing.md, borderRadius: tokens.borders.radius.lg, overflow: "hidden", backgroundColor: tokens.colors.surfaceVariant },
+    actionsContainer: { padding: tokens.spacing.md, borderTopWidth: 1, borderTopColor: tokens.colors.border },
+  });
+
+  return (
+    <View style={styles.container} testID={testID}>
+      <ScrollView style={styles.container} contentContainerStyle={styles.scrollContent}>
+        {Preview && <View style={styles.previewContainer}><Preview data={undefined as T} /></View>}
+        {sections.map((section) => (
+          <View key={section.id} style={styles.section}>
+            {section.title && <AtomicText type="labelMedium" color="textSecondary" style={{ marginBottom: tokens.spacing.sm }}>{section.title}</AtomicText>}
+            <section.component {...section.props} />
+          </View>
+        ))}
+      </ScrollView>
+      {actions && (
+        <View style={styles.actionsContainer}>
+          <View style={{ flexDirection: "row", gap: tokens.spacing.md }}>
+            <TouchableOpacity style={{ flex: 1, paddingVertical: tokens.spacing.md, borderRadius: tokens.borders.radius.md, alignItems: "center", backgroundColor: tokens.colors.surfaceVariant }} onPress={actions.onCancel}>
+              <AtomicText fontWeight="medium" color="textPrimary">{actions.cancelLabel || "Cancel"}</AtomicText>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={{ flex: 1, paddingVertical: tokens.spacing.md, borderRadius: tokens.borders.radius.md, alignItems: "center", backgroundColor: tokens.colors.primary, opacity: isValid ? 1 : 0.4 }}
+              onPress={actions.onSave}
+              disabled={!isValid}
+            >
+              <AtomicText fontWeight="semibold" color={isValid ? "onPrimary" : "textSecondary"}>{actions.saveLabel || "Save"}</AtomicText>
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}

package/src/presentation/components/generic/Selector.tsx

@@ -0,0 +1,96 @@
+/**
+ * Universal Selector Component
+ * Replaces: OptionSelector, FontSizeSelector, TextAlignSelector, ShapeTypeSelector, etc.
+ */
+
+import React, { useMemo } from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+
+export interface SelectorItem<T = string> {
+  value: T;
+  label: string;
+  icon?: string;
+  color?: string;
+  disabled?: boolean;
+}
+
+export interface SelectorProps<T = string> {
+  items: SelectorItem<T>[];
+  selectedValue: T;
+  onSelect: (value: T) => void;
+  orientation?: "horizontal" | "vertical" | "grid";
+  itemWidth?: number;
+  itemHeight?: number;
+  icon?: boolean;
+  colorPreview?: boolean;
+  testID?: string;
+}
+
+const SelectorItem = React.memo<{ item: SelectorItem; isSelected: boolean; onSelect: () => void; styles: any; icon: boolean; colorPreview: boolean }>(
+  ({ item, isSelected, onSelect, styles, icon, colorPreview }) => (
+    <TouchableOpacity
+      style={[styles.item, isSelected && styles.itemSelected, item.disabled && styles.itemDisabled]}
+      onPress={onSelect}
+      disabled={item.disabled}
+      accessibilityRole="button"
+      accessibilityState={{ selected: isSelected }}
+      accessibilityLabel={item.label}
+    >
+      {colorPreview && item.color && <View style={[styles.colorPreview, { backgroundColor: item.color }]} />}
+      {icon && item.icon && <AtomicIcon name={item.icon} size="sm" color="textPrimary" />}
+      <AtomicText type="labelSmall" style={styles.label} color={isSelected ? "primary" : "textPrimary"}>{item.label}</AtomicText>
+    </TouchableOpacity>
+  )
+);
+
+SelectorItem.displayName = "SelectorItem";
+
+export function Selector<T = string>({
+  items,
+  selectedValue,
+  onSelect,
+  orientation = "horizontal",
+  itemWidth = 80,
+  itemHeight = 40,
+  icon = false,
+  colorPreview = false,
+  testID = "selector",
+}: SelectorProps<T>) {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => StyleSheet.create({
+    container: { gap: tokens.spacing.sm },
+    scrollContent: { gap: tokens.spacing.sm, paddingHorizontal: orientation === "horizontal" ? tokens.spacing.md : 0 },
+    gridContainer: { flexDirection: "row", flexWrap: "wrap", gap: tokens.spacing.sm },
+    item: { width: orientation === "grid" ? undefined : itemWidth, height: itemHeight, borderRadius: tokens.borders.radius.md, borderWidth: 1, borderColor: tokens.colors.border, backgroundColor: tokens.colors.surface, alignItems: "center", justifyContent: "center", paddingHorizontal: tokens.spacing.md },
+    itemSelected: { borderColor: tokens.colors.primary, backgroundColor: `${tokens.colors.primary}20` },
+    itemDisabled: { opacity: 0.4 },
+    label: { color: tokens.colors.textPrimary },
+    colorPreview: { width: 24, height: 24, borderRadius: 12 },
+  }), [tokens, orientation, itemWidth, itemHeight]);
+
+  const content = items.map((item) => (
+    <SelectorItem
+      key={String(item.value)}
+      item={item}
+      isSelected={item.value === selectedValue}
+      onSelect={() => onSelect(item.value)}
+      styles={styles}
+      icon={icon}
+      colorPreview={colorPreview}
+    />
+  ));
+
+  return (
+    <View style={styles.container} testID={testID}>
+      {orientation === "horizontal" ? (
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.scrollContent}>
+          {content}
+        </ScrollView>
+      ) : (
+        <View style={styles.gridContainer}>{content}</View>
+      )}
+    </View>
+  );
+}

package/src/presentation/components/generic/Toolbar.tsx

@@ -0,0 +1,77 @@
+/**
+ * Generic Toolbar Component
+ * Replaces: EditorToolPanel and similar toolbar patterns
+ */
+
+import React, { useMemo } from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+
+export interface ToolbarButton {
+  id: string;
+  icon: string;
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+  destructive?: boolean;
+  showBadge?: boolean;
+  badgeColor?: string;
+  testID?: string;
+}
+
+export interface ToolbarSection {
+  id: string;
+  buttons: ToolbarButton[];
+}
+
+export interface ToolbarProps {
+  sections: ToolbarSection[];
+  orientation?: "horizontal" | "vertical";
+  scrollable?: boolean;
+  testID?: string;
+}
+
+const ToolbarButtonComp = React.memo<{ button: ToolbarButton; styles: any }>(({ button, styles }) => (
+  <TouchableOpacity
+    style={[styles.button, button.destructive && styles.buttonDestructive, button.disabled && styles.buttonDisabled]}
+    onPress={button.onPress}
+    disabled={button.disabled}
+    testID={button.testID}
+    accessibilityRole="button"
+    accessibilityLabel={button.label}
+  >
+    <AtomicIcon name={button.icon as any} size="sm" color={button.destructive ? "error" : "primary"} />
+    <AtomicText type="labelSmall" style={styles.label}>{button.label}</AtomicText>
+    {button.showBadge && <View style={[styles.badge, { backgroundColor: button.badgeColor }]}><AtomicText style={styles.badgeText}>!</AtomicText></View>}
+  </TouchableOpacity>
+));
+
+ToolbarButtonComp.displayName = "ToolbarButton";
+
+export function Toolbar({ sections, orientation = "horizontal", scrollable = false, testID = "toolbar" }: ToolbarProps) {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => StyleSheet.create({
+    container: { backgroundColor: tokens.colors.surface, borderRadius: tokens.borders.radius.lg, padding: tokens.spacing.sm },
+    scrollContent: { gap: tokens.spacing.sm, paddingHorizontal: tokens.spacing.sm },
+    sectionContainer: { gap: tokens.spacing.sm },
+    button: { alignItems: "center", padding: tokens.spacing.sm, borderRadius: tokens.borders.radius.md, gap: tokens.spacing.xs, backgroundColor: tokens.colors.surfaceVariant, borderWidth: 1, borderColor: tokens.colors.border, minWidth: orientation === "horizontal" ? 60 : 50 },
+    buttonDestructive: { backgroundColor: `${tokens.colors.error}10`, borderColor: tokens.colors.error },
+    buttonDisabled: { opacity: 0.4 },
+    label: { color: tokens.colors.textPrimary },
+    badge: { position: "absolute", top: -4, right: -4, minWidth: 16, height: 16, borderRadius: 8, borderWidth: 2, borderColor: tokens.colors.surface, alignItems: "center", justifyContent: "center" },
+    badgeText: { color: tokens.colors.onPrimary, fontSize: 10, fontWeight: "bold" },
+  }), [tokens, orientation]);
+
+  const content = sections.map((section) => (
+    <View key={section.id} style={styles.sectionContainer}>
+      {section.buttons.map((button) => <ToolbarButtonComp key={button.id} button={button} styles={styles} />)}
+    </View>
+  ));
+
+  return (
+    <View style={styles.container} testID={testID}>
+      {scrollable ? <ScrollView horizontal={orientation === "horizontal"} showsHorizontalScrollIndicator={false} contentContainerStyle={styles.scrollContent}>{content}</ScrollView> : content}
+    </View>
+  );
+}

package/src/presentation/components/image-layer/ImagePreview.tsx

@@ -1,10 +1,12 @@
 /**
  * ImagePreview Component
  * Image preview or placeholder for image layer editor
+ * PERFORMANCE: Uses expo-image with caching for better performance
  */
 
 import React from "react";
-import { View, Image, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
+import { Image } from "expo-image";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 
@@ -24,6 +26,10 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
       <Image
         source={{ uri: imageUri }}
         style={[styles.imagePreview, { opacity }]}
+        // PERFORMANCE: Cache strategy for better performance
+        cachePolicy="memory-disk"
+        transition={200} // Smooth fade-in
+        placeholder="#F0F0F0" // Placeholder color while loading
       />
     );
   }