@adminide-stack/yantra-mobile 12.0.125-alpha.1 → 12.0.126

package/lib/features/canvas/ImageEditorExperience.js

@@ -1,4 +1,4 @@
-import {jsxs,jsx}from'react/jsx-runtime';import React__default,{useState,useCallback,useMemo}from'react';import {StyleSheet,Image,View,Pressable,Text,Linking,ActivityIndicator,ScrollView,TextInput}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image as Image$1}from'expo-image';import {generationImageUrl,friendlyMediaError,resultUrl}from'./videoEditor/mediaActions.js';import {markedEditPrompt,editRequest,settleVariants,EDIT_ASPECTS,EDIT_SIZES,VARIANT_COUNTS}from'./aiEdit.js';import {unwrapProxyUrl}from'./videoEditor/remoteMediaClient.js';var __defProp = Object.defineProperty;
+import {jsxs,jsx}from'react/jsx-runtime';import React__default,{useMemo,useState,useCallback}from'react';import {Image,View,Text,Linking,StyleSheet,ActivityIndicator,ScrollView,TextInput}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image as Image$1}from'expo-image';import {generationImageUrl,friendlyMediaError,resultUrl}from'./videoEditor/mediaActions.js';import {markedEditPrompt,editRequest,settleVariants,EDIT_ASPECTS,EDIT_SIZES,VARIANT_COUNTS}from'./aiEdit.js';import {unwrapProxyUrl}from'./videoEditor/remoteMediaClient.js';import {useCanvasTheme,themedStyles}from'./canvasTheme.js';import {Pressable,pressedStyle,RADIUS,SPACE,HIT,TYPE}from'./canvasUi.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -17,6 +17,9 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const HSCROLL = {
+  flexGrow: 0
+};
 const FILTER_NAMES = ["grayscale", "sepia", "chrome", "cold", "warm", "vintage", "fade", "posterize", "vivid", "invert"];
 const CROP_ASPECTS = [{
   label: "1:1",
@@ -39,6 +42,9 @@ function ImageEditorExperience({
   onSave,
   initialTab
 }) {
+  var _a;
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const [history, setHistory] = useState([src]);
   const [busy, setBusy] = useState(null);
   const [tab, setTab] = useState(initialTab === "aiedit" ? "aiedit" : "filters");
@@ -92,7 +98,7 @@ function ImageEditorExperience({
       } = settleVariants(settled);
       if (!urls.length) throw new Error("No variant came back");
       setVariants(urls);
-      if (failed) setNotice(`${failed} variant${failed === 1 ? "" : "s"} failed \u2014 the rest are below.`);
+      if (failed) setNotice(`${failed} variant${failed === 1 ? "" : "s"} failed. The rest are below.`);
       else setNotice(null);
     } catch (err) {
       setNotice(friendlyMediaError(err, "mark & edit"));
@@ -154,15 +160,23 @@ function ImageEditorExperience({
   }], []);
   return /* @__PURE__ */ jsxs(View, { style: styles.root, testID: "image-editor", children: [
     /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
-      /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Close editor", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 22, color: "#F7F7FA" }) }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Close editor", style: ({
+        pressed
+      }) => [styles.headerIcon, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 22, color: theme.edInk }) }),
       /* @__PURE__ */ jsx(Text, { style: styles.headerTitle, numberOfLines: 1, children: (name == null ? void 0 : name.trim()) || "Edit image" }),
       /* @__PURE__ */ jsxs(View, { style: styles.headerActions, children: [
-        /* @__PURE__ */ jsx(Pressable, { onPress: () => setHistory((h) => h.length > 1 ? h.slice(0, -1) : h), hitSlop: 10, disabled: !edited || busy !== null, accessibilityRole: "button", accessibilityLabel: "Undo", style: !edited || busy ? styles.disabled : null, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "undo-variant", size: 21, color: "#F7F7FA" }) }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: () => Linking.openURL(current), hitSlop: 10, disabled: !edited, accessibilityRole: "button", accessibilityLabel: "Open result", style: !edited ? styles.disabled : null, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "open-in-new", size: 20, color: "#F7F7FA" }) }),
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => setHistory((h) => h.length > 1 ? h.slice(0, -1) : h), hitSlop: 10, disabled: !edited || busy !== null, accessibilityRole: "button", accessibilityLabel: "Undo", style: ({
+          pressed
+        }) => [styles.headerIcon, !edited || busy ? styles.disabled : null, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "undo-variant", size: 21, color: theme.edInk }) }),
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => Linking.openURL(current), hitSlop: 10, disabled: !edited, accessibilityRole: "button", accessibilityLabel: "Open result", style: ({
+          pressed
+        }) => [styles.headerIcon, !edited ? styles.disabled : null, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "open-in-new", size: 20, color: theme.edInk }) }),
         /* @__PURE__ */ jsx(Pressable, { onPress: () => {
           if (edited) onSave == null ? void 0 : onSave(current);
           onClose();
-        }, hitSlop: 10, disabled: busy !== null, accessibilityRole: "button", accessibilityLabel: "Done", style: busy ? styles.disabled : null, children: /* @__PURE__ */ jsx(Text, { style: styles.doneLabel, children: edited ? "Done" : "Close" }) })
+        }, hitSlop: 10, disabled: busy !== null, accessibilityRole: "button", accessibilityLabel: "Done", style: ({
+          pressed
+        }) => [styles.donePill, busy ? styles.disabled : null, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: styles.doneLabel, children: edited ? "Done" : "Close" }) })
       ] })
     ] }),
     /* @__PURE__ */ jsxs(View, { style: styles.stage, children: [
@@ -181,82 +195,111 @@ function ImageEditorExperience({
         history.length - 1
       ] }) }) : null
     ] }),
-    /* @__PURE__ */ jsx(View, { style: styles.panel, children: tab === "aiedit" ? /* @__PURE__ */ jsxs(ScrollView, { style: {
-      maxHeight: 220
-    }, contentContainerStyle: {
-      paddingBottom: 8
-    }, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.aiHint, children: "Say what should change. Phone Mark & edit sends the whole picture (scribble bake is web/Konva); Original framing keeps the photo's own ratio." }),
-      /* @__PURE__ */ jsx(TextInput, { value: editInstruction, onChangeText: setEditInstruction, placeholder: "Add a top hat and monocle", placeholderTextColor: "#7A7A88", style: styles.aiInput, multiline: true }),
-      /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
-        EDIT_ASPECTS.map((a) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setEditAspect(a.id), style: [styles.chip, editAspect === a.id && styles.chipOn], children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: a.label }) }, a.id)),
-        EDIT_SIZES.map((s) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setEditSize(s), style: [styles.chip, editSize === s && styles.chipOn], children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: s }) }, s)),
-        VARIANT_COUNTS.map((n) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setVariantCount(n), style: [styles.chip, variantCount === n && styles.chipOn], children: /* @__PURE__ */ jsxs(Text, { style: styles.chipLabel, children: [
-          n,
-          "\xD7"
-        ] }) }, n))
-      ] }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: () => void runMarkEdit(), disabled: !editInstruction.trim() || Boolean(busy), style: [styles.aiCta, (!editInstruction.trim() || busy) && styles.disabled], children: /* @__PURE__ */ jsx(Text, { style: styles.aiCtaLabel, children: "Generate variants" }) }),
-      variants.length ? /* @__PURE__ */ jsx(ScrollView, { horizontal: true, contentContainerStyle: styles.row, children: variants.map((url) => /* @__PURE__ */ jsx(Pressable, { onPress: () => {
-        setHistory((h) => [...h, url]);
-        setVariants([]);
-        setNotice("Applied \u2014 Undo brings the original back.");
-      }, style: styles.variantThumb, children: /* @__PURE__ */ jsx(Image$1, { source: {
-        uri: url
-      }, style: styles.variantImg, contentFit: "cover" }) }, url)) }) : null
-    ] }) : tab === "filters" ? /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.row, children: FILTER_NAMES.map((filter) => /* @__PURE__ */ jsx(Pressable, { onPress: () => apply(`Filter ${filter}`, "YANTRA_IMAGE_EDIT_FILTER", {
-      name: filter
-    }), style: styles.chip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: filter }) }, filter)) }) : tab === "adjust" ? /* @__PURE__ */ jsxs(View, { children: [
-      /* @__PURE__ */ jsx(AdjustRow, { label: "Brightness", value: adjust.brightness, format: (v) => v.toFixed(2), onChange: (d) => setAdjust((a) => __spreadProps(__spreadValues({}, a), {
-        brightness: Math.min(1, Math.max(-1, a.brightness + d * 0.1))
-      })) }),
-      /* @__PURE__ */ jsx(AdjustRow, { label: "Contrast", value: adjust.contrast, format: (v) => v.toFixed(2), onChange: (d) => setAdjust((a) => __spreadProps(__spreadValues({}, a), {
-        contrast: Math.min(3, Math.max(0.2, a.contrast + d * 0.1))
-      })) }),
-      /* @__PURE__ */ jsx(AdjustRow, { label: "Saturation", value: adjust.saturation, format: (v) => v.toFixed(2), onChange: (d) => setAdjust((a) => __spreadProps(__spreadValues({}, a), {
-        saturation: Math.min(3, Math.max(0, a.saturation + d * 0.1))
-      })) }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: () => apply("Adjusting", "YANTRA_IMAGE_EDIT_FINETUNE", {
-        brightness: adjust.brightness,
-        contrast: adjust.contrast,
-        saturation: adjust.saturation
-      }), style: [styles.chip, styles.chipAccent, styles.applyBtn], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipLabelDark], children: "Apply adjustments" }) })
-    ] }) : tab === "transform" ? /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
-      /* @__PURE__ */ jsxs(Pressable, { onPress: () => apply("Rotating", "YANTRA_IMAGE_EDIT_ROTATE", {
-        degrees: 90
-      }), style: styles.chip, accessibilityRole: "button", children: [
-        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "rotate-right", size: 14, color: "#F7F7FA" }),
-        /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "90\xB0" })
+    /* @__PURE__ */ jsxs(View, { style: styles.dock, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.panel, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.sheetTitle, children: (_a = tabs.find((entry) => entry.id === tab)) == null ? void 0 : _a.label }),
+        tab === "aiedit" ? /* @__PURE__ */ jsxs(ScrollView, { style: {
+          maxHeight: 220
+        }, contentContainerStyle: {
+          paddingBottom: 8
+        }, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.aiHint, children: "Say what should change. Phone Mark & edit sends the whole picture (scribble bake is web/Konva); Original framing keeps the photo's own ratio." }),
+          /* @__PURE__ */ jsx(TextInput, { value: editInstruction, onChangeText: setEditInstruction, placeholder: "Add a top hat and monocle", placeholderTextColor: theme.edInk3, style: styles.aiInput, multiline: true }),
+          /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+            EDIT_ASPECTS.map((a) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setEditAspect(a.id), style: [styles.chip, editAspect === a.id && styles.chipOn], children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: a.label }) }, a.id)),
+            EDIT_SIZES.map((s) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setEditSize(s), style: [styles.chip, editSize === s && styles.chipOn], children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: s }) }, s)),
+            VARIANT_COUNTS.map((n) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setVariantCount(n), style: [styles.chip, variantCount === n && styles.chipOn], children: /* @__PURE__ */ jsxs(Text, { style: styles.chipLabel, children: [
+              n,
+              "\xD7"
+            ] }) }, n))
+          ] }),
+          /* @__PURE__ */ jsx(Pressable, { onPress: () => void runMarkEdit(), disabled: !editInstruction.trim() || Boolean(busy), style: ({
+            pressed
+          }) => [styles.aiCta, (!editInstruction.trim() || busy) && styles.disabled, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: styles.aiCtaLabel, children: "Generate variants" }) }),
+          variants.length ? /* @__PURE__ */ jsx(ScrollView, { style: HSCROLL, horizontal: true, contentContainerStyle: styles.row, children: variants.map((url) => /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+            setHistory((h) => [...h, url]);
+            setVariants([]);
+            setNotice("Applied. Undo brings the original back.");
+          }, style: styles.variantThumb, children: /* @__PURE__ */ jsx(Image$1, { source: {
+            uri: url
+          }, style: styles.variantImg, contentFit: "cover" }) }, url)) }) : null
+        ] }) : tab === "filters" ? /* @__PURE__ */ jsx(ScrollView, { style: HSCROLL, horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.row, children: FILTER_NAMES.map((filter) => /* @__PURE__ */ jsx(Pressable, { onPress: () => apply(`Filter ${filter}`, "YANTRA_IMAGE_EDIT_FILTER", {
+          name: filter
+        }), style: ({
+          pressed
+        }) => [styles.chip, pressedStyle(pressed)], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: filter }) }, filter)) }) : tab === "adjust" ? /* @__PURE__ */ jsxs(View, { children: [
+          /* @__PURE__ */ jsx(AdjustRow, { label: "Brightness", value: adjust.brightness, format: (v) => v.toFixed(2), onChange: (d) => setAdjust((a) => __spreadProps(__spreadValues({}, a), {
+            brightness: Math.min(1, Math.max(-1, a.brightness + d * 0.1))
+          })) }),
+          /* @__PURE__ */ jsx(AdjustRow, { label: "Contrast", value: adjust.contrast, format: (v) => v.toFixed(2), onChange: (d) => setAdjust((a) => __spreadProps(__spreadValues({}, a), {
+            contrast: Math.min(3, Math.max(0.2, a.contrast + d * 0.1))
+          })) }),
+          /* @__PURE__ */ jsx(AdjustRow, { label: "Saturation", value: adjust.saturation, format: (v) => v.toFixed(2), onChange: (d) => setAdjust((a) => __spreadProps(__spreadValues({}, a), {
+            saturation: Math.min(3, Math.max(0, a.saturation + d * 0.1))
+          })) }),
+          /* @__PURE__ */ jsx(Pressable, { onPress: () => apply("Adjusting", "YANTRA_IMAGE_EDIT_FINETUNE", {
+            brightness: adjust.brightness,
+            contrast: adjust.contrast,
+            saturation: adjust.saturation
+          }), style: ({
+            pressed
+          }) => [styles.chip, styles.chipAccent, styles.applyBtn, pressedStyle(pressed)], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipLabelDark], children: "Apply adjustments" }) })
+        ] }) : tab === "transform" ? /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+          /* @__PURE__ */ jsxs(Pressable, { onPress: () => apply("Rotating", "YANTRA_IMAGE_EDIT_ROTATE", {
+            degrees: 90
+          }), style: ({
+            pressed
+          }) => [styles.chip, pressedStyle(pressed)], accessibilityRole: "button", children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "rotate-right", size: 14, color: theme.edInk }),
+            /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "90\xB0" })
+          ] }),
+          /* @__PURE__ */ jsx(Pressable, { onPress: () => apply("Flipping", "YANTRA_IMAGE_EDIT_FLIP", {
+            horizontal: true
+          }), style: ({
+            pressed
+          }) => [styles.chip, pressedStyle(pressed)], accessibilityRole: "button", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "flip-horizontal", size: 14, color: theme.edInk }) }),
+          /* @__PURE__ */ jsx(Pressable, { onPress: () => apply("Flipping", "YANTRA_IMAGE_EDIT_FLIP", {
+            vertical: true
+          }), style: ({
+            pressed
+          }) => [styles.chip, pressedStyle(pressed)], accessibilityRole: "button", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "flip-vertical", size: 14, color: theme.edInk }) }),
+          CROP_ASPECTS.map((aspect) => /* @__PURE__ */ jsx(Pressable, { onPress: () => applyCrop(aspect.ratio, `Cropping ${aspect.label}`), style: ({
+            pressed
+          }) => [styles.chip, pressedStyle(pressed)], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: aspect.label }) }, aspect.label))
+        ] }) : /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+          /* @__PURE__ */ jsx(Pressable, { onPress: () => apply("Vignette", "YANTRA_IMAGE_EDIT_VIGNETTE", {}), style: ({
+            pressed
+          }) => [styles.chip, pressedStyle(pressed)], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Vignette" }) }),
+          /* @__PURE__ */ jsx(Pressable, { onPress: () => apply("Framing", "YANTRA_IMAGE_EDIT_FRAME", {
+            thickness: 24,
+            color: "white"
+          }), style: ({
+            pressed
+          }) => [styles.chip, pressedStyle(pressed)], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Frame" }) }),
+          /* @__PURE__ */ jsx(Pressable, { onPress: () => apply("Shadow", "YANTRA_IMAGE_EDIT_DROP_SHADOW", {
+            offset_x: 12,
+            offset_y: 12,
+            blur: 18
+          }), style: ({
+            pressed
+          }) => [styles.chip, pressedStyle(pressed)], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Shadow" }) }),
+          /* @__PURE__ */ jsx(Pressable, { onPress: () => apply("Removing background", "YANTRA_IMAGE_EDIT_REMOVE_BACKGROUND", {}), style: ({
+            pressed
+          }) => [styles.chip, pressedStyle(pressed)], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Cut out" }) })
+        ] })
       ] }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: () => apply("Flipping", "YANTRA_IMAGE_EDIT_FLIP", {
-        horizontal: true
-      }), style: styles.chip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "flip-horizontal", size: 14, color: "#F7F7FA" }) }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: () => apply("Flipping", "YANTRA_IMAGE_EDIT_FLIP", {
-        vertical: true
-      }), style: styles.chip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "flip-vertical", size: 14, color: "#F7F7FA" }) }),
-      CROP_ASPECTS.map((aspect) => /* @__PURE__ */ jsx(Pressable, { onPress: () => applyCrop(aspect.ratio, `Cropping ${aspect.label}`), style: styles.chip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: aspect.label }) }, aspect.label))
-    ] }) : /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
-      /* @__PURE__ */ jsx(Pressable, { onPress: () => apply("Vignette", "YANTRA_IMAGE_EDIT_VIGNETTE", {}), style: styles.chip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Vignette" }) }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: () => apply("Framing", "YANTRA_IMAGE_EDIT_FRAME", {
-        thickness: 24,
-        color: "white"
-      }), style: styles.chip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Frame" }) }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: () => apply("Shadow", "YANTRA_IMAGE_EDIT_DROP_SHADOW", {
-        offset_x: 12,
-        offset_y: 12,
-        blur: 18
-      }), style: styles.chip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Shadow" }) }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: () => apply("Removing background", "YANTRA_IMAGE_EDIT_REMOVE_BACKGROUND", {}), style: styles.chip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Cut out" }) })
-    ] }) }),
-    /* @__PURE__ */ jsx(View, { style: styles.toolbar, children: tabs.map((entry) => {
-      const active = tab === entry.id;
-      return /* @__PURE__ */ jsxs(Pressable, { onPress: () => setTab(entry.id), style: styles.toolbarTab, accessibilityRole: "tab", accessibilityState: {
-        selected: active
-      }, children: [
-        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: entry.icon, size: 21, color: active ? "#8B7CFF" : "#9A9AA5" }),
-        /* @__PURE__ */ jsx(Text, { style: [styles.toolbarLabel, active && styles.toolbarLabelActive], children: entry.label })
-      ] }, entry.id);
-    }) }),
+      /* @__PURE__ */ jsx(View, { style: styles.toolbar, children: tabs.map((entry) => {
+        const active = tab === entry.id;
+        return /* @__PURE__ */ jsxs(Pressable, { onPress: () => setTab(entry.id), style: ({
+          pressed
+        }) => [styles.toolbarTab, pressedStyle(pressed)], accessibilityRole: "tab", accessibilityState: {
+          selected: active
+        }, children: [
+          /* @__PURE__ */ jsx(View, { style: [styles.toolbarIcon, active && styles.toolbarIconOn], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: entry.icon, size: 22, color: active ? theme.edInk : theme.edInk3 }) }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.toolbarLabel, active && styles.toolbarLabelActive], children: entry.label })
+        ] }, entry.id);
+      }) })
+    ] }),
     notice ? /* @__PURE__ */ jsxs(View, { style: styles.notice, children: [
       /* @__PURE__ */ jsx(Text, { style: styles.noticeText, children: notice }),
       /* @__PURE__ */ jsx(Pressable, { onPress: () => setNotice(null), hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: styles.noticeDismiss, children: "OK" }) })
@@ -269,223 +312,249 @@ function AdjustRow({
   format,
   onChange
 }) {
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   return /* @__PURE__ */ jsxs(View, { style: styles.adjustRow, children: [
     /* @__PURE__ */ jsx(Text, { style: styles.adjustLabel, children: label }),
-    /* @__PURE__ */ jsx(Pressable, { onPress: () => onChange(-1), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: `${label} less`, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "minus", size: 16, color: "#F7F7FA" }) }),
+    /* @__PURE__ */ jsx(Pressable, { onPress: () => onChange(-1), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: `${label} less`, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "minus", size: 16, color: theme.edInk }) }),
     /* @__PURE__ */ jsx(Text, { style: styles.adjustValue, children: format(value) }),
-    /* @__PURE__ */ jsx(Pressable, { onPress: () => onChange(1), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: `${label} more`, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 16, color: "#F7F7FA" }) })
+    /* @__PURE__ */ jsx(Pressable, { onPress: () => onChange(1), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: `${label} more`, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 16, color: theme.edInk }) })
   ] });
 }
-const styles = StyleSheet.create({
+const makeStyles = themedStyles((theme) => StyleSheet.create({
   root: {
     flex: 1,
-    backgroundColor: "#0A0A0C"
+    backgroundColor: theme.edBg
   },
   header: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    gap: 12
+    paddingHorizontal: SPACE.md,
+    paddingVertical: SPACE.sm,
+    gap: SPACE.sm
+  },
+  headerIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: RADIUS.pill,
+    alignItems: "center",
+    justifyContent: "center"
   },
-  headerTitle: {
+  headerTitle: __spreadProps(__spreadValues({}, TYPE.title), {
     flex: 1,
-    color: "#F7F7FA",
-    fontSize: 15,
-    fontWeight: "600",
+    color: theme.edInk,
     textAlign: "center"
-  },
+  }),
   headerActions: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 16
-  },
-  doneLabel: {
-    color: "#A5B4FC",
-    fontSize: 15,
-    fontWeight: "600"
+    gap: SPACE.xs
+  },
+  donePill: {
+    minHeight: 36,
+    marginLeft: SPACE.xs,
+    paddingHorizontal: SPACE.lg,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.primary,
+    alignItems: "center",
+    justifyContent: "center"
   },
+  doneLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.primaryForeground
+  }),
   disabled: {
     opacity: 0.35
   },
   stage: {
     flex: 1,
-    marginHorizontal: 14,
-    borderRadius: 18,
+    marginHorizontal: SPACE.md,
+    marginTop: SPACE.xs,
+    borderRadius: RADIUS.xl,
     overflow: "hidden",
     backgroundColor: "#000000"
+    // media stage stays dark
   },
   busyVeil: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
     alignItems: "center",
     justifyContent: "center",
-    gap: 10,
+    gap: SPACE.sm,
     backgroundColor: "rgba(10, 10, 12, 0.55)"
   }),
-  busyLabel: {
-    color: "#E8E8EE",
-    fontSize: 12.5
-  },
+  busyLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: "#E8E8EE"
+  }),
   editedBadge: {
     position: "absolute",
-    right: 10,
-    top: 10,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 9,
-    backgroundColor: "rgba(139, 124, 255, 0.9)"
-  },
-  editedBadgeLabel: {
-    color: "#0A0A0C",
-    fontSize: 10.5,
-    fontWeight: "700"
-  },
-  aiHint: {
-    color: "#9A9AA5",
-    fontSize: 11,
-    lineHeight: 15,
-    marginBottom: 8
-  },
-  aiInput: {
-    minHeight: 56,
-    borderRadius: 10,
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    backgroundColor: "#1F1F24",
-    color: "#F7F7FA",
+    right: SPACE.md,
+    top: SPACE.md,
+    paddingHorizontal: SPACE.sm,
+    paddingVertical: SPACE.xs,
+    borderRadius: RADIUS.pill,
+    backgroundColor: "rgba(10, 10, 12, 0.6)"
+  },
+  editedBadgeLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: "#F7F7FA"
+  }),
+  dock: {
+    marginTop: SPACE.md,
+    backgroundColor: theme.edPanel,
+    borderTopLeftRadius: RADIUS.xl,
+    borderTopRightRadius: RADIUS.xl
+  },
+  sheetTitle: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk,
+    marginBottom: SPACE.sm
+  }),
+  aiHint: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk2,
+    marginBottom: SPACE.sm
+  }),
+  aiInput: __spreadProps(__spreadValues({}, TYPE.body), {
+    minHeight: 60,
+    borderRadius: RADIUS.md,
+    paddingHorizontal: SPACE.md,
+    paddingVertical: SPACE.sm,
+    backgroundColor: theme.edRaised,
+    color: theme.edInk,
     textAlignVertical: "top",
-    marginBottom: 8
-  },
+    marginBottom: SPACE.sm
+  }),
   chipOn: {
-    borderColor: "#8B7CFF",
-    backgroundColor: "rgba(139,124,255,0.2)"
+    borderColor: theme.edInk,
+    backgroundColor: theme.edRaisedHi
   },
   aiCta: {
-    marginTop: 6,
-    marginBottom: 8,
-    paddingVertical: 10,
-    borderRadius: 10,
-    backgroundColor: "#F7F7FA",
-    alignItems: "center"
-  },
-  aiCtaLabel: {
-    color: "#0f172a",
-    fontWeight: "700",
-    fontSize: 13
+    minHeight: HIT,
+    marginTop: SPACE.xs,
+    marginBottom: SPACE.sm,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edInk,
+    alignItems: "center",
+    justifyContent: "center"
   },
+  aiCtaLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edOnInk
+  }),
   variantThumb: {
     width: 64,
     height: 64,
-    borderRadius: 8,
+    borderRadius: RADIUS.sm,
     overflow: "hidden",
-    marginRight: 8,
-    backgroundColor: "#1F1F24"
+    marginRight: SPACE.sm,
+    backgroundColor: theme.edRaised
   },
   variantImg: {
     width: "100%",
     height: "100%"
   },
   panel: {
-    minHeight: 92,
+    minHeight: 104,
     justifyContent: "center",
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "rgba(255,255,255,0.08)"
+    paddingHorizontal: SPACE.lg,
+    paddingTop: SPACE.lg,
+    paddingBottom: SPACE.sm
   },
   row: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
+    gap: SPACE.sm,
     flexWrap: "wrap",
-    paddingVertical: 4
+    paddingVertical: SPACE.xs
   },
   chip: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 5,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 9,
-    backgroundColor: "#1F1F24",
+    gap: SPACE.xs,
+    minHeight: 36,
+    paddingHorizontal: SPACE.md + 2,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edRaised,
     borderWidth: 1,
     borderColor: "transparent"
   },
   chipAccent: {
-    backgroundColor: "#8B7CFF"
-  },
-  chipLabel: {
-    color: "#F7F7FA",
-    fontSize: 12.5,
-    fontWeight: "500"
+    backgroundColor: theme.edInk
   },
+  chipLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk,
+    textTransform: "capitalize"
+  }),
   chipLabelDark: {
-    color: "#0A0A0C"
+    color: theme.edOnInk
   },
   applyBtn: {
     alignSelf: "flex-start",
-    marginTop: 8
+    marginTop: SPACE.sm
   },
   adjustRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
-    paddingVertical: 5
+    gap: SPACE.md,
+    minHeight: 36
   },
-  adjustLabel: {
-    color: "#9A9AA5",
-    fontSize: 12.5,
-    width: 82
-  },
-  adjustValue: {
-    color: "#F7F7FA",
-    fontSize: 12.5,
+  adjustLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk2,
+    width: 84
+  }),
+  adjustValue: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk,
     fontVariant: ["tabular-nums"],
-    minWidth: 44,
+    minWidth: 48,
     textAlign: "center"
-  },
+  }),
   toolbar: {
     flexDirection: "row",
     justifyContent: "space-around",
-    paddingVertical: 8,
-    paddingBottom: 10,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "rgba(255,255,255,0.08)"
+    paddingHorizontal: SPACE.sm,
+    paddingTop: SPACE.xs,
+    paddingBottom: SPACE.md
   },
   toolbarTab: {
     alignItems: "center",
-    gap: 3,
-    minWidth: 56
+    gap: SPACE.xs,
+    minWidth: 60,
+    minHeight: HIT
+  },
+  toolbarIcon: {
+    width: 48,
+    height: 32,
+    borderRadius: RADIUS.pill,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  toolbarIconOn: {
+    backgroundColor: theme.edRaisedHi
   },
   toolbarLabel: {
-    color: "#9A9AA5",
-    fontSize: 10
+    color: theme.edInk3,
+    fontSize: 11,
+    lineHeight: 14,
+    fontWeight: "500"
   },
   toolbarLabelActive: {
-    color: "#8B7CFF",
+    color: theme.edInk,
     fontWeight: "600"
   },
   notice: {
     position: "absolute",
-    left: 20,
-    right: 20,
-    bottom: 84,
+    left: SPACE.lg,
+    right: SPACE.lg,
+    bottom: 96,
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
-    paddingHorizontal: 14,
-    paddingVertical: 11,
-    borderRadius: 12,
-    backgroundColor: "rgba(248, 250, 252, 0.96)"
-  },
-  noticeText: {
+    gap: SPACE.md,
+    paddingHorizontal: SPACE.lg,
+    paddingVertical: SPACE.md,
+    borderRadius: RADIUS.lg,
+    backgroundColor: theme.edInk
+  },
+  noticeText: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontWeight: "500",
     flex: 1,
-    color: "#0f172a",
-    fontSize: 13
-  },
-  noticeDismiss: {
-    color: "#6C5CE7",
-    fontSize: 13,
-    fontWeight: "600"
-  }
-});export{ImageEditorExperience,ImageEditorExperience as default};//# sourceMappingURL=ImageEditorExperience.js.map
+    color: theme.edOnInk
+  }),
+  noticeDismiss: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edAccent
+  })
+}));export{ImageEditorExperience,ImageEditorExperience as default};//# sourceMappingURL=ImageEditorExperience.js.map