@umituz/react-native-image 1.3.8 → 1.3.10

package/src/infrastructure/utils/ImageFilterUtils.ts

@@ -0,0 +1,152 @@
+/**
+ * Infrastructure - Filter Utils
+ * 
+ * Low-level filter implementations for raw pixel data
+ */
+
+export class ImageFilterUtils {
+  static applyBrightness(
+    data: Uint8ClampedArray,
+    brightness: number
+  ): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(data);
+    const adjustment = brightness * 2.55;
+
+    for (let i = 0; i < result.length; i += 4) {
+      result[i] = Math.min(255, Math.max(0, result[i] + adjustment));
+      result[i + 1] = Math.min(255, Math.max(0, result[i + 1] + adjustment));
+      result[i + 2] = Math.min(255, Math.max(0, result[i + 2] + adjustment));
+    }
+
+    return result;
+  }
+
+  static applyContrast(
+    data: Uint8ClampedArray,
+    contrast: number
+  ): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(data);
+    const factor = (259 * (contrast * 2.55 + 255)) / (255 * (259 - contrast * 2.55));
+
+    for (let i = 0; i < result.length; i += 4) {
+      result[i] = Math.min(255, Math.max(0, factor * (result[i] - 128) + 128));
+      result[i + 1] = Math.min(255, Math.max(0, factor * (result[i + 1] - 128) + 128));
+      result[i + 2] = Math.min(255, Math.max(0, factor * (result[i + 2] - 128) + 128));
+    }
+
+    return result;
+  }
+
+  static applySaturation(
+    data: Uint8ClampedArray,
+    saturation: number
+  ): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(data);
+    const adjustment = 1 + (saturation / 100);
+
+    for (let i = 0; i < result.length; i += 4) {
+      const r = result[i];
+      const g = result[i + 1];
+      const b = result[i + 2];
+
+      const gray = 0.299 * r + 0.587 * g + 0.114 * b;
+
+      result[i] = Math.min(255, Math.max(0, gray + adjustment * (r - gray)));
+      result[i + 1] = Math.min(255, Math.max(0, gray + adjustment * (g - gray)));
+      result[i + 2] = Math.min(255, Math.max(0, gray + adjustment * (b - gray)));
+    }
+
+    return result;
+  }
+
+  static applyVintage(
+    data: Uint8ClampedArray,
+    intensity: number,
+    warmth: number
+  ): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(data);
+    const factor = intensity / 100;
+    const warmFactor = warmth / 100;
+
+    for (let i = 0; i < result.length; i += 4) {
+      let r = result[i];
+      let g = result[i + 1];
+      let b = result[i + 2];
+
+      const tr = 0.393 * r + 0.769 * g + 0.189 * b;
+      const tg = 0.349 * r + 0.686 * g + 0.168 * b;
+      const tb = 0.272 * r + 0.534 * g + 0.131 * b;
+
+      r = r * (1 - factor) + tr * factor;
+      g = g * (1 - factor) + tg * factor;
+      b = b * (1 - factor) + tb * factor;
+
+      if (warmFactor > 0) {
+        result[i] = Math.min(255, r + warmFactor * 20);
+        result[i + 1] = Math.min(255, g + warmFactor * 10);
+        result[i + 2] = Math.min(255, b * (1 - warmFactor * 0.3));
+      } else {
+        result[i] = r;
+        result[i + 1] = g;
+        result[i + 2] = Math.min(255, b * (1 - Math.abs(warmFactor) * 0.3));
+      }
+    }
+
+    return result;
+  }
+
+  static applyBlur(
+    data: Uint8ClampedArray,
+    radius: number,
+    width: number,
+    height: number
+  ): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(data);
+    const size = Math.floor(radius) || 1;
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        let r = 0, g = 0, b = 0, a = 0;
+        let count = 0;
+
+        for (let dy = -size; dy <= size; dy++) {
+          for (let dx = -size; dx <= size; dx++) {
+            const ny = y + dy;
+            const nx = x + dx;
+
+            if (ny >= 0 && ny < height && nx >= 0 && nx < width) {
+              const idx = (ny * width + nx) * 4;
+              r += data[idx];
+              g += data[idx + 1];
+              b += data[idx + 2];
+              a += data[idx + 3];
+              count++;
+            }
+          }
+        }
+
+        const idx = (y * width + x) * 4;
+        result[idx] = r / count;
+        result[idx + 1] = g / count;
+        result[idx + 2] = b / count;
+        result[idx + 3] = a / count;
+      }
+    }
+
+    return result;
+  }
+
+  static applyIntensity(
+    originalData: Uint8ClampedArray,
+    processedData: Uint8ClampedArray,
+    intensity: number
+  ): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(originalData.length);
+
+    for (let i = 0; i < originalData.length; i++) {
+      result[i] = originalData[i] * (1 - intensity) + processedData[i] * intensity;
+    }
+
+    return result;
+  }
+}

package/src/infrastructure/utils/ImageTransformUtils.ts

@@ -0,0 +1,25 @@
+/**
+ * Infrastructure - Transform Utils
+ * 
+ * Internal utilities for image transformations
+ */
+
+import * as ImageManipulator from 'expo-image-manipulator';
+import type { SaveFormat, ImageSaveOptions } from '../../domain/entities/ImageTypes';
+import { IMAGE_CONSTANTS } from '../../domain/entities/ImageConstants';
+
+export class ImageTransformUtils {
+  static mapFormat(format?: SaveFormat): ImageManipulator.SaveFormat {
+    if (format === 'png') return ImageManipulator.SaveFormat.PNG;
+    if (format === 'webp') return ImageManipulator.SaveFormat.WEBP;
+    return ImageManipulator.SaveFormat.JPEG;
+  }
+
+  static buildSaveOptions(options?: ImageSaveOptions): ImageManipulator.SaveOptions {
+    return {
+      compress: options?.compress ?? IMAGE_CONSTANTS.defaultQuality,
+      format: this.mapFormat(options?.format),
+      base64: options?.base64,
+    };
+  }
+}

package/src/infrastructure/utils/LayerManager.ts

@@ -13,44 +13,7 @@ export interface LayerComposition {
 }
 
 export class LayerManager {
-  static composeLayers(
-    layers: Array<{
-      canvas: HTMLCanvasElement | any;
-      opacity: number;
-      visible: boolean;
-      x?: number;
-      y?: number;
-    }>,
-    composition: LayerComposition
-  ): HTMLCanvasElement | any {
-    // Create composition canvas
-    const composedCanvas = document.createElement('canvas') || {} as any;
-    composedCanvas.width = composition.width;
-    composedCanvas.height = composition.height;
-    const ctx = composedCanvas.getContext('2d');
-
-    if (!ctx) return composedCanvas;
-
-    // Clear canvas with background color
-    ctx.fillStyle = composition.backgroundColor || '#ffffff';
-    ctx.fillRect(0, 0, composition.width, composition.height);
-
-    // Draw each layer
-    layers.forEach(layer => {
-      if (!layer.visible) return;
 
-      ctx.save();
-      ctx.globalAlpha = layer.opacity;
-      ctx.drawImage(
-        layer.canvas,
-        layer.x || 0,
-        layer.y || 0
-      );
-      ctx.restore();
-    });
-
-    return composedCanvas;
-  }
 
   static mergeLayers(
     layers: Array<{
@@ -110,49 +73,5 @@ export class LayerManager {
     return result.map((layer, index) => ({ ...layer, index }));
   }
 
-  static flattenLayers(
-    layers: Array<{
-      canvas: HTMLCanvasElement | any;
-      opacity: number;
-      visible: boolean;
-    }>,
-    composition: LayerComposition
-  ): HTMLCanvasElement | any {
-    return LayerManager.composeLayers(layers, composition);
-  }
-
-  static createLayerCanvas(
-    width: number,
-    height: number,
-    transparent: boolean = true
-  ): HTMLCanvasElement | any {
-    const canvas = document.createElement('canvas') || {} as any;
-    canvas.width = width;
-    canvas.height = height;
-    
-    if (!transparent) {
-      const ctx = canvas.getContext('2d');
-      if (ctx) {
-        ctx.fillStyle = '#ffffff';
-        ctx.fillRect(0, 0, width, height);
-      }
-    }
 
-    return canvas;
-  }
-
-  static clearLayer(
-    canvas: HTMLCanvasElement | any,
-    preserveAlpha: boolean = true
-  ): void {
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    if (preserveAlpha) {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-    } else {
-      ctx.fillStyle = 'transparent';
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-    }
-  }
 }

package/src/presentation/components/editor/FilterPickerSheet.tsx

@@ -0,0 +1,75 @@
+/**
+ * Presentation - Filter Picker Sheet
+ */
+
+import React, { forwardRef } from 'react';
+import { View, TouchableOpacity, ScrollView } from 'react-native';
+import { 
+  BottomSheetModal, 
+  AtomicText, 
+  AtomicIcon,
+  useAppDesignTokens, 
+  BottomSheetModalRef 
+} from '@umituz/react-native-design-system';
+import { FilterProcessor, type FilterPreset } from '../../../infrastructure/utils/FilterProcessor';
+
+export interface FilterPickerSheetProps {
+  onSelectFilter: (filterId: string) => void;
+  onDismiss: () => void;
+  activeFilterId?: string;
+  snapPoints?: string[];
+  title?: string;
+}
+
+export const FilterPickerSheet = forwardRef<BottomSheetModalRef, FilterPickerSheetProps>(
+  ({ onSelectFilter, onDismiss, activeFilterId, snapPoints = ['50%'], title = 'Filters' }, ref) => {
+    const tokens = useAppDesignTokens();
+    const presets = FilterProcessor.getPresets();
+
+    return (
+      <BottomSheetModal ref={ref} snapPoints={snapPoints} onDismiss={onDismiss}>
+        <View style={{ padding: tokens.spacing.lg, flex: 1 }}>
+          <AtomicText style={{ ...tokens.typography.headingSmall, marginBottom: tokens.spacing.md }}>
+            {title}
+          </AtomicText>
+
+          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+            <View style={{ flexDirection: 'row', gap: tokens.spacing.md }}>
+              {presets.map((preset: FilterPreset) => (
+                <TouchableOpacity
+                  key={preset.id}
+                  onPress={() => onSelectFilter(preset.id)}
+                  style={{
+                    width: 100,
+                    height: 120,
+                    backgroundColor: activeFilterId === preset.id ? tokens.colors.primaryContainer : tokens.colors.surfaceVariant,
+                    borderRadius: tokens.borderRadius.lg,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderWidth: 2,
+                    borderColor: activeFilterId === preset.id ? tokens.colors.primary : 'transparent',
+                  }}
+                >
+                  <AtomicIcon 
+                    name="color-filter" 
+                    size={32} 
+                    color={activeFilterId === preset.id ? 'primary' : 'secondary'} 
+                  />
+                  <AtomicText style={{ 
+                    ...tokens.typography.labelSmall, 
+                    marginTop: tokens.spacing.sm,
+                    color: activeFilterId === preset.id ? tokens.colors.primary : tokens.colors.textSecondary
+                  }}>
+                    {preset.name}
+                  </AtomicText>
+                </TouchableOpacity>
+              ))}
+            </View>
+          </ScrollView>
+        </View>
+      </BottomSheetModal>
+    );
+  }
+);
+
+FilterPickerSheet.displayName = 'FilterPickerSheet';

package/src/presentation/components/editor/StickerPickerSheet.tsx

@@ -0,0 +1,62 @@
+/**
+ * Presentation - Sticker Picker Sheet
+ */
+
+import React, { forwardRef } from 'react';
+import { View, TouchableOpacity, ScrollView, Image, Dimensions } from 'react-native';
+import { 
+  BottomSheetModal, 
+  AtomicText, 
+  useAppDesignTokens, 
+  BottomSheetModalRef 
+} from '@umituz/react-native-design-system';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export interface StickerPickerSheetProps {
+  stickers: string[];
+  onSelectSticker: (uri: string) => void;
+  onDismiss: () => void;
+  title?: string;
+  snapPoints?: string[];
+}
+
+export const StickerPickerSheet = forwardRef<BottomSheetModalRef, StickerPickerSheetProps>(
+  ({ stickers, onSelectSticker, onDismiss, title = 'Select Sticker', snapPoints = ['60%'] }, ref) => {
+    const tokens = useAppDesignTokens();
+
+    return (
+      <BottomSheetModal ref={ref} snapPoints={snapPoints} onDismiss={onDismiss}>
+        <View style={{ padding: tokens.spacing.lg, flex: 1 }}>
+          <AtomicText style={{ ...tokens.typography.headingSmall, marginBottom: tokens.spacing.md }}>
+            {title}
+          </AtomicText>
+
+          <ScrollView showsVerticalScrollIndicator={false}>
+            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: tokens.spacing.md }}>
+              {stickers.map((uri, index) => (
+                <TouchableOpacity
+                  key={index}
+                  onPress={() => onSelectSticker(uri)}
+                  style={{
+                    width: (SCREEN_WIDTH - 64) / 3,
+                    aspectRatio: 1,
+                    backgroundColor: tokens.colors.surfaceVariant,
+                    borderRadius: tokens.borderRadius.md,
+                    padding: tokens.spacing.sm,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <Image source={{ uri }} style={{ width: '100%', height: '100%' }} resizeMode="contain" />
+                </TouchableOpacity>
+              ))}
+            </View>
+          </ScrollView>
+        </View>
+      </BottomSheetModal>
+    );
+  }
+);
+
+StickerPickerSheet.displayName = 'StickerPickerSheet';

package/src/presentation/components/editor/TextEditorSheet.tsx

@@ -0,0 +1,98 @@
+/**
+ * Presentation - Text Editor Sheet
+ */
+
+import React, { forwardRef, useState } from 'react';
+import { View, TouchableOpacity, ScrollView } from 'react-native';
+import { 
+  BottomSheetModal, 
+  AtomicText, 
+  AtomicIcon, 
+  useAppDesignTokens, 
+  BottomSheetModalRef 
+} from '@umituz/react-native-design-system';
+import { TextContentTab, TextStyleTab, TextTransformTab } from './TextEditorTabs';
+
+export interface TextEditorSheetProps {
+  text: string;
+  onTextChange: (text: string) => void;
+  color: string;
+  onColorChange: (color: string) => void;
+  fontSize: number;
+  onFontSizeChange: (size: number) => void;
+  fontFamily: string;
+  onFontFamilyChange: (font: string) => void;
+  scale: number;
+  onScaleChange: (scale: number) => void;
+  rotation: number;
+  onRotationChange: (rotation: number) => void;
+  opacity: number;
+  onOpacityChange: (opacity: number) => void;
+  onDelete?: () => void;
+  onDismiss: () => void;
+  snapPoints?: string[];
+  t: (key: string) => string;
+}
+
+export const TextEditorSheet = forwardRef<BottomSheetModalRef, TextEditorSheetProps>((props, ref) => {
+  const tokens = useAppDesignTokens();
+  const [activeTab, setActiveTab] = useState<'content' | 'style' | 'transform'>('content');
+  const { onDismiss, snapPoints = ['75%'], t } = props;
+
+  const tabs = [
+    { id: 'content', label: 'Text', icon: 'text' },
+    { id: 'style', label: 'Style', icon: 'color-palette' },
+    { id: 'transform', label: 'Edit', icon: 'options' },
+  ];
+
+  return (
+    <BottomSheetModal ref={ref} snapPoints={snapPoints} onDismiss={onDismiss}>
+      <View style={{ padding: tokens.spacing.lg, flex: 1 }}>
+        <View style={{ flexDirection: 'row', gap: tokens.spacing.md, marginBottom: tokens.spacing.lg }}>
+          {tabs.map(tab => (
+            <TouchableOpacity
+              key={tab.id}
+              onPress={() => setActiveTab(tab.id as any)}
+              style={{
+                flex: 1, alignItems: 'center', paddingVertical: tokens.spacing.sm,
+                borderBottomWidth: 3, borderBottomColor: activeTab === tab.id ? tokens.colors.primary : 'transparent'
+              }}
+            >
+              <AtomicIcon name={tab.icon as any} size={20} color={activeTab === tab.id ? 'primary' : 'secondary'} />
+              <AtomicText style={{ 
+                ...tokens.typography.labelSmall, 
+                color: activeTab === tab.id ? tokens.colors.primary : tokens.colors.textSecondary,
+                marginTop: 4
+              }}>
+                {tab.label}
+              </AtomicText>
+            </TouchableOpacity>
+          ))}
+        </View>
+
+        <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 60 }}>
+          {activeTab === 'content' && <TextContentTab text={props.text} onTextChange={props.onTextChange} t={t} />}
+          {activeTab === 'style' && (
+            <TextStyleTab 
+              fontSize={props.fontSize} setFontSize={props.onFontSizeChange}
+              color={props.color} setColor={props.onColorChange}
+              fontFamily={props.fontFamily} setFontFamily={props.onFontFamilyChange}
+              t={t}
+            />
+          )}
+          {activeTab === 'transform' && (
+            <TextTransformTab 
+              scale={props.scale} setScale={props.onScaleChange}
+              rotation={props.rotation} setRotation={props.onRotationChange}
+              opacity={props.opacity} setOpacity={props.onOpacityChange}
+              onDelete={props.onDelete}
+              t={t}
+            />
+          )}
+        </ScrollView>
+      </View>
+    </BottomSheetModal>
+  );
+});
+
+TextEditorSheet.displayName = 'TextEditorSheet';

package/src/presentation/components/editor/TextEditorTabs.tsx

@@ -0,0 +1,111 @@
+/**
+ * Presentation - Text Editor Tabs
+ */
+
+import React from 'react';
+import { View, TextInput, ScrollView, TouchableOpacity } from 'react-native';
+import Slider from '@react-native-community/slider';
+import { AtomicText, AtomicIcon, useAppDesignTokens } from '@umituz/react-native-design-system';
+
+interface TabProps {
+  t: (key: string) => string;
+}
+
+export const TextContentTab: React.FC<TabProps & { text: string; onTextChange: (t: string) => void }> = ({ text, onTextChange, t }) => {
+  const tokens = useAppDesignTokens();
+  return (
+    <View style={{ gap: tokens.spacing.lg }}>
+      <TextInput
+        value={text}
+        onChangeText={onTextChange}
+        placeholder={t('editor.text_placeholder')}
+        style={{
+          ...tokens.typography.bodyLarge,
+          borderWidth: 1,
+          borderColor: tokens.colors.border,
+          borderRadius: tokens.borderRadius.md,
+          padding: tokens.spacing.md,
+          minHeight: 120,
+          textAlignVertical: 'top',
+        }}
+        multiline
+      />
+    </View>
+  );
+};
+
+export const TextStyleTab: React.FC<TabProps & { 
+  fontSize: number; setFontSize: (s: number) => void;
+  color: string; setColor: (c: string) => void;
+  fontFamily: string; setFontFamily: (f: string) => void;
+}> = ({ fontSize, setFontSize, color, setColor, fontFamily, setFontFamily, t }) => {
+  const tokens = useAppDesignTokens();
+  const colors = ['#FFFFFF', '#000000', '#FF0000', '#FFFF00', '#0000FF', '#00FF00', '#FF00FF', '#FFA500'];
+  const fonts = ['System', 'serif', 'sans-serif', 'monospace'];
+
+  return (
+    <View style={{ gap: tokens.spacing.xl }}>
+      <View>
+        <AtomicText style={{ ...tokens.typography.labelMedium, marginBottom: tokens.spacing.sm }}>Font</AtomicText>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: tokens.spacing.sm }}>
+          {fonts.map(f => (
+            <TouchableOpacity key={f} onPress={() => setFontFamily(f)} style={{
+              paddingHorizontal: tokens.spacing.md, paddingVertical: tokens.spacing.xs, borderRadius: tokens.borderRadius.full,
+              borderWidth: 1, borderColor: fontFamily === f ? tokens.colors.primary : tokens.colors.border,
+              backgroundColor: fontFamily === f ? tokens.colors.primaryContainer : tokens.colors.surface
+            }}>
+              <AtomicText style={{ fontFamily: f }}>{f}</AtomicText>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View>
+
+      <View>
+        <AtomicText style={{ ...tokens.typography.labelMedium, marginBottom: tokens.spacing.sm }}>Color</AtomicText>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: tokens.spacing.sm }}>
+          {colors.map(c => (
+            <TouchableOpacity key={c} onPress={() => setColor(c)} style={{
+              width: 40, height: 40, borderRadius: 20, backgroundColor: c,
+              borderWidth: color === c ? 3 : 1, borderColor: tokens.colors.primary
+            }} />
+          ))}
+        </ScrollView>
+      </View>
+
+      <View>
+        <AtomicText style={{ ...tokens.typography.labelMedium, marginBottom: tokens.spacing.xs }}>Size: {fontSize}px</AtomicText>
+        <Slider value={fontSize} onValueChange={setFontSize} minimumValue={12} maximumValue={100} step={1} minimumTrackTintColor={tokens.colors.primary} />
+      </View>
+    </View>
+  );
+};
+
+export const TextTransformTab: React.FC<TabProps & {
+  scale: number; setScale: (s: number) => void;
+  rotation: number; setRotation: (r: number) => void;
+  opacity: number; setOpacity: (o: number) => void;
+  onDelete?: () => void;
+}> = ({ scale, setScale, rotation, setRotation, opacity, setOpacity, onDelete, t }) => {
+  const tokens = useAppDesignTokens();
+  return (
+    <View style={{ gap: tokens.spacing.xl }}>
+      <View>
+        <AtomicText style={{ ...tokens.typography.labelMedium, marginBottom: tokens.spacing.xs }}>Scale: {scale.toFixed(2)}x</AtomicText>
+        <Slider value={scale} onValueChange={setScale} minimumValue={0.2} maximumValue={3} step={0.1} minimumTrackTintColor={tokens.colors.primary} />
+      </View>
+      <View>
+        <AtomicText style={{ ...tokens.typography.labelMedium, marginBottom: tokens.spacing.xs }}>Rotation: {Math.round(rotation)}°</AtomicText>
+        <Slider value={rotation} onValueChange={setRotation} minimumValue={0} maximumValue={360} step={1} minimumTrackTintColor={tokens.colors.primary} />
+      </View>
+      {onDelete && (
+        <TouchableOpacity onPress={onDelete} style={{
+          flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: tokens.spacing.sm,
+          padding: tokens.spacing.md, borderRadius: tokens.borderRadius.md, borderWidth: 1, borderColor: tokens.colors.error
+        }}>
+          <AtomicIcon name="trash" size={20} color="error" />
+          <AtomicText style={{ ...tokens.typography.labelMedium, color: tokens.colors.error }}>Delete Layer</AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};

package/src/presentation/hooks/useImage.ts

@@ -7,36 +7,33 @@
 import { useImageTransform } from './useImageTransform';
 import { useImageConversion } from './useImageConversion';
 import { useImageBatch } from './useImageBatch';
-import { useImageAIEnhancement } from './useImageAIEnhancement';
+import { useImageEnhance } from './useImageEnhance';
 import { useImageMetadata } from './useImageMetadata';
 
 export const useImage = () => {
   const transform = useImageTransform();
   const conversion = useImageConversion();
   const batch = useImageBatch();
-  const aiEnhancement = useImageAIEnhancement();
+  const enhance = useImageEnhance();
   const metadata = useImageMetadata();
 
   return {
-    // Basic operations
     ...transform,
     ...conversion,
-    // Advanced operations
     ...batch,
-    ...aiEnhancement,
+    ...enhance,
     ...metadata,
-    // Combined state
     isProcessing:
       transform.isTransforming ||
       conversion.isConverting ||
       batch.isBatchProcessing ||
-      aiEnhancement.isEnhancing ||
+      enhance.isEnhancing ||
       metadata.isExtracting,
     error:
       transform.transformError ||
       conversion.conversionError ||
       batch.batchError ||
-      aiEnhancement.enhancementError ||
+      enhance.enhancementError ||
       metadata.metadataError,
   };
 };