@umituz/react-native-photo-editor 1.1.2 → 2.0.2

package/src/components/FilterPicker.tsx

@@ -1,12 +1,13 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText, AtomicIcon, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { DEFAULT_FILTERS, type FilterOption } from "../constants";
 
 interface FilterPickerProps {
   selectedFilter: string;
-  onSelectFilter: (filterId: string, value: number) => void;
-  filters?: readonly FilterOption[];
+  onSelectFilter: (option: FilterOption) => void;
+  filters?: FilterOption[];
 }
 
 export const FilterPicker: React.FC<FilterPickerProps> = ({
@@ -16,7 +17,7 @@ export const FilterPicker: React.FC<FilterPickerProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const styles = StyleSheet.create({
+  const styles = useMemo(() => StyleSheet.create({
     container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
     grid: { flexDirection: "row", flexWrap: "wrap", gap: tokens.spacing.sm },
     filter: {
@@ -33,31 +34,37 @@ export const FilterPicker: React.FC<FilterPickerProps> = ({
       borderColor: tokens.colors.primary,
       backgroundColor: tokens.colors.primary + "10",
     },
-  });
+  }), [tokens]);
 
   return (
     <View style={styles.container}>
       <AtomicText type="headlineSmall">Filters</AtomicText>
       <View style={styles.grid}>
-        {filters.map((f) => (
-          <TouchableOpacity
-            key={f.id}
-            style={[styles.filter, selectedFilter === f.id && styles.active]}
-            onPress={() => onSelectFilter(f.id, f.value)}
-          >
-            <AtomicIcon
-              name={f.icon as "close-circle" | "color-palette" | "contrast" | "time" | "sunny" | "snow"}
-              size="lg"
-              color={selectedFilter === f.id ? "primary" : "textSecondary"}
-            />
-            <AtomicText
-              type="labelSmall"
-              color={selectedFilter === f.id ? "primary" : "textSecondary"}
+        {filters.map((f) => {
+          const isActive = selectedFilter === f.id;
+          return (
+            <TouchableOpacity
+              key={f.id}
+              style={[styles.filter, isActive && styles.active]}
+              onPress={() => onSelectFilter(f)}
+              accessibilityLabel={f.name}
+              accessibilityRole="button"
+              accessibilityState={{ selected: isActive }}
             >
-              {f.name}
-            </AtomicText>
-          </TouchableOpacity>
-        ))}
+              <AtomicIcon
+                name={f.icon as "close"}
+                size="lg"
+                color={isActive ? "primary" : "textSecondary"}
+              />
+              <AtomicText
+                type="labelSmall"
+                color={isActive ? "primary" : "textSecondary"}
+              >
+                {f.name}
+              </AtomicText>
+            </TouchableOpacity>
+          );
+        })}
       </View>
     </View>
   );

package/src/components/FontControls.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText, AtomicIcon, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 
 interface FontControlsProps {
   fontSize: number;
@@ -8,9 +9,19 @@ interface FontControlsProps {
   fonts: readonly string[];
   onFontSizeChange: (size: number) => void;
   onFontSelect: (font: string) => void;
-  styles: Record<string, object>;
+  styles: {
+    controlsPanel: object;
+    fontRow: object;
+    fontChip: object;
+    fontChipActive: object;
+    [key: string]: object;
+  };
 }
 
+const MIN_FONT_SIZE = 12;
+const MAX_FONT_SIZE = 128;
+const FONT_SIZE_STEP = 4;
+
 export const FontControls: React.FC<FontControlsProps> = ({
   fontSize,
   selectedFont,
@@ -20,9 +31,14 @@ export const FontControls: React.FC<FontControlsProps> = ({
   styles: externalStyles,
 }) => {
   const tokens = useAppDesignTokens();
-  
-  const styles = StyleSheet.create({
-    btn: {
+
+  const styles = useMemo(() => StyleSheet.create({
+    stepRow: {
+      flexDirection: "row",
+      gap: tokens.spacing.sm,
+      marginBottom: tokens.spacing.md,
+    },
+    stepBtn: {
       padding: tokens.spacing.sm,
       backgroundColor: tokens.colors.surface,
       borderRadius: tokens.borders.radius.sm,
@@ -30,29 +46,58 @@ export const FontControls: React.FC<FontControlsProps> = ({
       borderColor: tokens.colors.border,
       minWidth: 44,
       alignItems: "center",
-    }
-  });
+    },
+    sizeRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: tokens.spacing.sm,
+    },
+    sizeLabel: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: tokens.spacing.xs,
+    },
+  }), [tokens]);
 
   return (
     <View style={externalStyles.controlsPanel}>
-      <View style={externalStyles.sliderRow}>
-        <View style={externalStyles.sliderLabel}>
-          <AtomicIcon name="text" size="sm" color="textSecondary" />
-          <AtomicText type="labelMedium" color="textSecondary">Text Size</AtomicText>
+      <View style={styles.sizeRow}>
+        <View style={styles.sizeLabel}>
+          <AtomicIcon name="edit" size="sm" color="textSecondary" />
+          <AtomicText type="labelMedium" color="textSecondary">
+            Text Size
+          </AtomicText>
         </View>
-        <AtomicText fontWeight="bold" color="primary">{fontSize}px</AtomicText>
+        <AtomicText fontWeight="bold" color="primary">
+          {fontSize}px
+        </AtomicText>
       </View>
 
-      <View style={{ flexDirection: "row", gap: tokens.spacing.sm, marginBottom: tokens.spacing.md }}>
-        <TouchableOpacity onPress={() => onFontSizeChange(fontSize - 4)} style={styles.btn}>
-          <AtomicText fontWeight="bold">-</AtomicText>
+      <View style={styles.stepRow}>
+        <TouchableOpacity
+          style={styles.stepBtn}
+          onPress={() => onFontSizeChange(Math.max(MIN_FONT_SIZE, fontSize - FONT_SIZE_STEP))}
+          accessibilityLabel="Decrease font size"
+          accessibilityRole="button"
+        >
+          <AtomicText fontWeight="bold">−</AtomicText>
         </TouchableOpacity>
-        <TouchableOpacity onPress={() => onFontSizeChange(fontSize + 4)} style={styles.btn}>
+        <TouchableOpacity
+          style={styles.stepBtn}
+          onPress={() => onFontSizeChange(Math.min(MAX_FONT_SIZE, fontSize + FONT_SIZE_STEP))}
+          accessibilityLabel="Increase font size"
+          accessibilityRole="button"
+        >
           <AtomicText fontWeight="bold">+</AtomicText>
         </TouchableOpacity>
       </View>
 
-      <AtomicText type="labelMedium" color="textSecondary" style={{ marginBottom: tokens.spacing.xs }}>
+      <AtomicText
+        type="labelMedium"
+        color="textSecondary"
+        style={{ marginBottom: tokens.spacing.xs }}
+      >
         Font Style
       </AtomicText>
       <ScrollView horizontal showsHorizontalScrollIndicator={false}>
@@ -60,13 +105,19 @@ export const FontControls: React.FC<FontControlsProps> = ({
           {fonts.map((font) => (
             <TouchableOpacity
               key={font}
-              style={[externalStyles.fontChip, selectedFont === font && externalStyles.fontChipActive]}
+              style={[
+                externalStyles.fontChip,
+                selectedFont === font && externalStyles.fontChipActive,
+              ]}
               onPress={() => onFontSelect(font)}
+              accessibilityLabel={`Font: ${font}`}
+              accessibilityRole="button"
+              accessibilityState={{ selected: selectedFont === font }}
             >
               <AtomicText
                 fontWeight="bold"
                 color={selectedFont === font ? "onPrimary" : "textSecondary"}
-                style={{ fontFamily: font }}
+                style={{ fontFamily: font === "System" ? undefined : font }}
               >
                 {font}
               </AtomicText>

package/src/components/LayerManager.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText, AtomicIcon, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { Layer, TextLayer } from "../types";
 
 interface LayerManagerProps {
@@ -8,6 +9,9 @@ interface LayerManagerProps {
   activeLayerId: string | null;
   onSelectLayer: (id: string) => void;
   onDeleteLayer: (id: string) => void;
+  onDuplicateLayer?: (id: string) => void;
+  onMoveLayerUp?: (id: string) => void;
+  onMoveLayerDown?: (id: string) => void;
   t: (key: string) => string;
 }
 
@@ -16,16 +20,19 @@ export const LayerManager: React.FC<LayerManagerProps> = ({
   activeLayerId,
   onSelectLayer,
   onDeleteLayer,
+  onDuplicateLayer,
+  onMoveLayerUp,
+  onMoveLayerDown,
   t,
 }) => {
   const tokens = useAppDesignTokens();
 
-  const styles = StyleSheet.create({
+  const styles = useMemo(() => StyleSheet.create({
     container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
     item: {
       flexDirection: "row",
       alignItems: "center",
-      padding: tokens.spacing.md,
+      padding: tokens.spacing.sm,
       backgroundColor: tokens.colors.surfaceVariant,
       borderRadius: tokens.borders.radius.md,
       marginBottom: tokens.spacing.xs,
@@ -37,41 +44,119 @@ export const LayerManager: React.FC<LayerManagerProps> = ({
       backgroundColor: tokens.colors.primary + "10",
     },
     info: { flex: 1, marginLeft: tokens.spacing.sm },
-  });
+    actions: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: tokens.spacing.xs,
+    },
+    actionBtn: {
+      padding: tokens.spacing.xs,
+      borderRadius: tokens.borders.radius.sm,
+    },
+  }), [tokens]);
+
+  const sortedLayers = [...layers].reverse(); // top layer first in list
 
   return (
     <View style={styles.container}>
       <AtomicText type="headlineSmall">Layers</AtomicText>
       <ScrollView showsVerticalScrollIndicator={false}>
-        {layers.length === 0 ? (
-          <AtomicText color="textSecondary" style={{ textAlign: "center", padding: tokens.spacing.xl }}>
+        {sortedLayers.length === 0 ? (
+          <AtomicText
+            color="textSecondary"
+            style={{ textAlign: "center", padding: tokens.spacing.xl }}
+          >
             No layers yet
           </AtomicText>
         ) : (
-          layers.map((layer) => (
-            <TouchableOpacity
-              key={layer.id}
-              style={[styles.item, activeLayerId === layer.id && styles.active]}
-              onPress={() => onSelectLayer(layer.id)}
-            >
-              <AtomicIcon
-                name={layer.type === "text" ? "text" : "happy"}
-                size="md"
-                color={activeLayerId === layer.id ? "primary" : "textSecondary"}
-              />
-              <View style={styles.info}>
-                <AtomicText type="labelSmall" color="textSecondary">
-                  {layer.type.toUpperCase()}
-                </AtomicText>
-                <AtomicText fontWeight="bold" numberOfLines={1}>
-                  {layer.type === "text" ? (layer as TextLayer).text || t("editor.untitled") : "Sticker"}
-                </AtomicText>
-              </View>
-              <TouchableOpacity onPress={() => onDeleteLayer(layer.id)} style={{ padding: tokens.spacing.xs }}>
-                <AtomicIcon name="trash" size="sm" color="error" />
+          sortedLayers.map((layer, idx) => {
+            const isActive = activeLayerId === layer.id;
+            const label =
+              layer.type === "text"
+                ? (layer as TextLayer).text || t("editor.untitled") || "Untitled"
+                : "Sticker";
+            const isTop = idx === 0;
+            const isBottom = idx === sortedLayers.length - 1;
+
+            return (
+              <TouchableOpacity
+                key={layer.id}
+                style={[styles.item, isActive && styles.active]}
+                onPress={() => onSelectLayer(layer.id)}
+                accessibilityLabel={`${layer.type} layer: ${label}`}
+                accessibilityRole="button"
+                accessibilityState={{ selected: isActive }}
+              >
+                <AtomicIcon
+                  name={layer.type === "text" ? "edit" : "image"}
+                  size="sm"
+                  color={isActive ? "primary" : "textSecondary"}
+                />
+                <View style={styles.info}>
+                  <AtomicText type="labelSmall" color="textSecondary">
+                    {layer.type.toUpperCase()}
+                  </AtomicText>
+                  <AtomicText fontWeight="bold" numberOfLines={1}>
+                    {label}
+                  </AtomicText>
+                </View>
+
+                <View style={styles.actions}>
+                  {onMoveLayerUp && (
+                    <TouchableOpacity
+                      style={styles.actionBtn}
+                      onPress={() => onMoveLayerUp(layer.id)}
+                      disabled={isTop}
+                      accessibilityLabel="Move layer up"
+                      accessibilityRole="button"
+                    >
+                      <AtomicIcon
+                        name="chevron-forward"
+                        size="sm"
+                        color={isTop ? "textSecondary" : "textPrimary"}
+                      />
+                    </TouchableOpacity>
+                  )}
+
+                  {onMoveLayerDown && (
+                    <TouchableOpacity
+                      style={styles.actionBtn}
+                      onPress={() => onMoveLayerDown(layer.id)}
+                      disabled={isBottom}
+                      accessibilityLabel="Move layer down"
+                      accessibilityRole="button"
+                    >
+                      <AtomicIcon
+                        name="chevron-back"
+                        size="sm"
+                        color={isBottom ? "textSecondary" : "textPrimary"}
+                      />
+                    </TouchableOpacity>
+                  )}
+
+                  {onDuplicateLayer && (
+                    <TouchableOpacity
+                      style={styles.actionBtn}
+                      onPress={() => onDuplicateLayer(layer.id)}
+                      accessibilityLabel={`Duplicate ${label}`}
+                      accessibilityRole="button"
+                    >
+                      <AtomicIcon name="copy" size="sm" color="textSecondary" />
+                    </TouchableOpacity>
+                  )}
+
+                  <TouchableOpacity
+                    style={styles.actionBtn}
+                    onPress={() => onDeleteLayer(layer.id)}
+                    accessibilityLabel={`Delete ${label}`}
+                    accessibilityRole="button"
+                  >
+                    <AtomicIcon name="trash-outline" size="sm" color="error" />
+                  </TouchableOpacity>
+                </View>
               </TouchableOpacity>
-            </TouchableOpacity>
-          ))
+            );
+          })
         )}
       </ScrollView>
     </View>

package/src/components/Slider.tsx

@@ -0,0 +1,112 @@
+import React, { useRef, useState } from "react";
+import { View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+
+interface SliderProps {
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step?: number;
+  onValueChange: (val: number) => void;
+  formatValue?: (val: number) => string;
+}
+
+export const Slider: React.FC<SliderProps> = ({
+  label,
+  value,
+  min,
+  max,
+  step = 0.05,
+  onValueChange,
+  formatValue,
+}) => {
+  const tokens = useAppDesignTokens();
+  const [trackWidth, setTrackWidth] = useState(200);
+  const trackWidthRef = useRef(200);
+  const startValueRef = useRef(value);
+  const valueRef = useRef(value);
+  valueRef.current = value;
+
+  const clamp = (v: number) => Math.max(min, Math.min(max, v));
+  const snap = (v: number) => parseFloat((Math.round(v / step) * step).toFixed(4));
+
+  const panGesture = Gesture.Pan()
+    .runOnJS(true)
+    .onStart(() => {
+      startValueRef.current = valueRef.current;
+    })
+    .onUpdate((e) => {
+      const ratio = e.translationX / trackWidthRef.current;
+      const delta = ratio * (max - min);
+      onValueChange(snap(clamp(startValueRef.current + delta)));
+    });
+
+  const percent = Math.max(0, Math.min(1, (value - min) / (max - min)));
+  const thumbOffset = percent * trackWidth - 12;
+  const displayValue = formatValue ? formatValue(value) : value.toFixed(1);
+
+  return (
+    <View style={{ gap: tokens.spacing.xs }}>
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <AtomicText type="labelMedium" color="textSecondary">
+          {label}
+        </AtomicText>
+        <AtomicText type="labelMedium" color="primary" fontWeight="bold">
+          {displayValue}
+        </AtomicText>
+      </View>
+      <GestureDetector gesture={panGesture}>
+        <View
+          style={{ height: 44, justifyContent: "center", paddingHorizontal: 12 }}
+          onLayout={(e) => {
+            const w = Math.max(1, e.nativeEvent.layout.width - 24);
+            setTrackWidth(w);
+            trackWidthRef.current = w;
+          }}
+        >
+          {/* Track background */}
+          <View
+            style={{
+              height: 4,
+              backgroundColor: tokens.colors.surfaceVariant,
+              borderRadius: 2,
+            }}
+          >
+            {/* Filled portion */}
+            <View
+              style={{
+                width: `${percent * 100}%`,
+                height: "100%",
+                backgroundColor: tokens.colors.primary,
+                borderRadius: 2,
+              }}
+            />
+          </View>
+          {/* Thumb */}
+          <View
+            style={{
+              position: "absolute",
+              left: thumbOffset + 12,
+              width: 24,
+              height: 24,
+              borderRadius: 12,
+              backgroundColor: tokens.colors.primary,
+              borderWidth: 2.5,
+              borderColor: tokens.colors.surface,
+              top: 10,
+            }}
+          />
+        </View>
+      </GestureDetector>
+    </View>
+  );
+};

package/src/components/StickerPicker.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { DEFAULT_STICKERS } from "../constants";
 
 interface StickerPickerProps {
@@ -14,7 +15,7 @@ export const StickerPicker: React.FC<StickerPickerProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const styles = StyleSheet.create({
+  const styles = useMemo(() => StyleSheet.create({
     container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
     grid: { flexDirection: "row", flexWrap: "wrap", gap: tokens.spacing.sm },
     sticker: {
@@ -25,7 +26,7 @@ export const StickerPicker: React.FC<StickerPickerProps> = ({
       alignItems: "center",
       justifyContent: "center",
     },
-  });
+  }), [tokens]);
 
   return (
     <View style={styles.container}>