@umituz/react-native-photo-editor 1.1.1 → 2.0.1

package/src/components/FilterPicker.tsx

@@ -1,12 +1,13 @@
 import React 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> = ({
@@ -39,25 +40,31 @@ export const FilterPicker: React.FC<FilterPickerProps> = ({
     <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 { 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: {
+    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,
+    },
   });
 
   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 { 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,6 +20,9 @@ export const LayerManager: React.FC<LayerManagerProps> = ({
   activeLayerId,
   onSelectLayer,
   onDeleteLayer,
+  onDuplicateLayer,
+  onMoveLayerUp,
+  onMoveLayerDown,
   t,
 }) => {
   const tokens = useAppDesignTokens();
@@ -25,7 +32,7 @@ export const LayerManager: React.FC<LayerManagerProps> = ({
     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,
+    },
   });
 
+  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 { 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 {

package/src/components/TextEditorSheet.tsx

@@ -1,19 +1,44 @@
 import React from "react";
-import { View, TextInput, StyleSheet } from "react-native";
-import { AtomicText, useAppDesignTokens, AtomicButton } from "@umituz/react-native-design-system";
+import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText, AtomicButton } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { ColorPicker } from "./ColorPicker";
+import type { TextAlign } from "../types";
 
 interface TextEditorSheetProps {
   value: string;
   onChange: (text: string) => void;
   onSave: () => void;
   t: (key: string) => string;
+  color?: string;
+  onColorChange?: (color: string) => void;
+  textAlign?: TextAlign;
+  onTextAlignChange?: (align: TextAlign) => void;
+  isBold?: boolean;
+  onBoldChange?: (bold: boolean) => void;
+  isItalic?: boolean;
+  onItalicChange?: (italic: boolean) => void;
 }
 
+const ALIGN_OPTIONS: { value: TextAlign; icon: string }[] = [
+  { value: "left", icon: "«" },
+  { value: "center", icon: "≡" },
+  { value: "right", icon: "»" },
+];
+
 export const TextEditorSheet: React.FC<TextEditorSheetProps> = ({
   value,
   onChange,
   onSave,
   t,
+  color = "#FFFFFF",
+  onColorChange,
+  textAlign = "center",
+  onTextAlignChange,
+  isBold = false,
+  onBoldChange,
+  isItalic = false,
+  onItalicChange,
 }) => {
   const tokens = useAppDesignTokens();
 
@@ -26,26 +51,107 @@ export const TextEditorSheet: React.FC<TextEditorSheetProps> = ({
       fontSize: 18,
       color: tokens.colors.textPrimary,
       textAlign: "center",
-      minHeight: 120,
+      minHeight: 90,
+    },
+    row: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: tokens.spacing.sm,
+    },
+    styleBtn: {
+      width: 44,
+      height: 44,
+      borderRadius: tokens.borders.radius.sm,
+      borderWidth: 1.5,
+      borderColor: tokens.colors.border,
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: tokens.colors.surfaceVariant,
+    },
+    styleBtnActive: {
+      borderColor: tokens.colors.primary,
+      backgroundColor: tokens.colors.primary + "20",
     },
   });
 
   return (
     <View style={styles.container}>
-      <AtomicText type="headlineSmall">{t("editor.add_text")}</AtomicText>
-      
+      <AtomicText type="headlineSmall">{t("editor.add_text") || "Edit Text"}</AtomicText>
+
       <TextInput
         value={value}
         onChangeText={onChange}
-        placeholder={t("editor.tap_to_edit")}
+        placeholder={t("editor.tap_to_edit") || "Enter text…"}
         placeholderTextColor={tokens.colors.textSecondary}
         style={styles.input}
         multiline
         autoFocus
       />
 
+      {/* Style row: Bold, Italic, Alignment */}
+      <View style={styles.row}>
+        {onBoldChange && (
+          <TouchableOpacity
+            style={[styles.styleBtn, isBold && styles.styleBtnActive]}
+            onPress={() => onBoldChange(!isBold)}
+            accessibilityLabel="Bold"
+            accessibilityRole="button"
+            accessibilityState={{ selected: isBold }}
+          >
+            <AtomicText fontWeight="bold" color={isBold ? "primary" : "textSecondary"}>
+              B
+            </AtomicText>
+          </TouchableOpacity>
+        )}
+
+        {onItalicChange && (
+          <TouchableOpacity
+            style={[styles.styleBtn, isItalic && styles.styleBtnActive]}
+            onPress={() => onItalicChange(!isItalic)}
+            accessibilityLabel="Italic"
+            accessibilityRole="button"
+            accessibilityState={{ selected: isItalic }}
+          >
+            <AtomicText
+              color={isItalic ? "primary" : "textSecondary"}
+              style={{ fontStyle: "italic" }}
+            >
+              I
+            </AtomicText>
+          </TouchableOpacity>
+        )}
+
+        {onTextAlignChange && (
+          <View style={[styles.row, { marginLeft: tokens.spacing.sm }]}>
+            {ALIGN_OPTIONS.map(({ value: align, icon }) => (
+              <TouchableOpacity
+                key={align}
+                style={[styles.styleBtn, textAlign === align && styles.styleBtnActive]}
+                onPress={() => onTextAlignChange(align)}
+                accessibilityLabel={`Align ${align}`}
+                accessibilityRole="button"
+                accessibilityState={{ selected: textAlign === align }}
+              >
+                <AtomicText color={textAlign === align ? "primary" : "textSecondary"}>
+                  {icon}
+                </AtomicText>
+              </TouchableOpacity>
+            ))}
+          </View>
+        )}
+      </View>
+
+      {/* Color picker */}
+      {onColorChange && (
+        <ColorPicker
+          label="Text Color"
+          selectedColor={color}
+          onSelectColor={onColorChange}
+        />
+      )}
+
       <AtomicButton variant="primary" onPress={onSave}>
-        {t("common.save")}
+        {t("common.save") || "Save"}
       </AtomicButton>
     </View>
   );