@adminide-stack/yantra-mobile 12.0.129-alpha.0 → 12.0.129

package/lib/features/canvas/ImageEditorExperience.js

@@ -1,4 +1,4 @@
-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;
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import React__default,{useMemo,useState,useCallback}from'react';import {Image,View,Linking,Text,ScrollView,TextInput,StyleSheet,ActivityIndicator}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image as Image$1}from'expo-image';import {resultUrl,friendlyMediaError,generationImageUrl}from'./videoEditor/mediaActions.js';import {markedEditPrompt,editRequest,settleVariants,EDIT_ASPECTS,EDIT_SIZES,VARIANT_COUNTS,MARKER_COLOR}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';import {SWATCHES,ChoiceRow,SliderRow,ApplyButton,ToggleRow,MediaUrlPicker,NumberField,TextField,SwatchRow}from'./editorControls.js';import {IMAGE_EDIT_ACTIONS,strokesToAnnotateOps,centeredAspectRect,EXPORT_FORMATS,convertParams,COLORSPACE_TARGETS,LOGO_POSITIONS,SHADOW_PRESETS,shadowParams,annotateOp,RESIZE_SUGGESTIONS,CROP_ASPECTS,logoComposeParams}from'./imageEditor/imageEditOps.js';import {ImageMarkup}from'./imageEditor/ImageMarkup.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -21,18 +21,58 @@ const HSCROLL = {
   flexGrow: 0
 };
 const FILTER_NAMES = ["grayscale", "sepia", "chrome", "cold", "warm", "vintage", "fade", "posterize", "vivid", "invert"];
-const CROP_ASPECTS = [{
-  label: "1:1",
-  ratio: 1
+const TABS = [{
+  id: "aiedit",
+  icon: "marker",
+  label: "Mark"
 }, {
-  label: "4:3",
-  ratio: 4 / 3
+  id: "filters",
+  icon: "blur",
+  label: "Filters"
 }, {
-  label: "16:9",
-  ratio: 16 / 9
+  id: "adjust",
+  icon: "tune-variant",
+  label: "Adjust"
 }, {
-  label: "9:16",
-  ratio: 9 / 16
+  id: "crop",
+  icon: "crop-rotate",
+  label: "Crop"
+}, {
+  id: "resize",
+  icon: "resize",
+  label: "Resize"
+}, {
+  id: "draw",
+  icon: "draw",
+  label: "Draw"
+}, {
+  id: "redact",
+  icon: "eye-off-outline",
+  label: "Redact"
+}, {
+  id: "effects",
+  icon: "creation",
+  label: "Effects"
+}, {
+  id: "background",
+  icon: "image-filter-hdr",
+  label: "Backdrop"
+}, {
+  id: "brand",
+  icon: "watermark",
+  label: "Brand"
+}, {
+  id: "layers",
+  icon: "layers-outline",
+  label: "Layers"
+}, {
+  id: "levels",
+  icon: "chart-bell-curve",
+  label: "Levels"
+}, {
+  id: "export",
+  icon: "file-export-outline",
+  label: "Export"
 }];
 function ImageEditorExperience({
   src,
@@ -40,34 +80,140 @@ function ImageEditorExperience({
   runAction,
   onClose,
   onSave,
-  initialTab
+  initialTab,
+  libraryItems
 }) {
   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");
+  const [tab, setTab] = useState(initialTab === "transform" ? "crop" : initialTab != null ? initialTab : "filters");
   const [notice, setNotice] = useState(null);
   const [adjust, setAdjust] = useState({
     brightness: 0,
     contrast: 1,
     saturation: 1
   });
+  const [natural, setNatural] = useState(null);
+  const [resizeBase, setResizeBase] = useState(null);
+  const current = history[history.length - 1];
+  const edited = history.length > 1;
   const [editInstruction, setEditInstruction] = useState("");
   const [editAspect, setEditAspect] = useState("original");
   const [editSize, setEditSize] = useState("1K");
   const [variantCount, setVariantCount] = useState(2);
   const [variants, setVariants] = useState([]);
-  const [natural, setNatural] = useState(null);
-  const current = history[history.length - 1];
-  const edited = history.length > 1;
+  const [before, setBefore] = useState(null);
+  const [markStrokes, setMarkStrokes] = useState([]);
+  const [markSize, setMarkSize] = useState(24);
+  const [drawTool, setDrawTool] = useState("pen");
+  const [drawColor, setDrawColor] = useState(SWATCHES[0]);
+  const [drawSize, setDrawSize] = useState(12);
+  const [drawStrokes, setDrawStrokes] = useState([]);
+  const [shapes, setShapes] = useState([]);
+  const [shapeFill, setShapeFill] = useState(false);
+  const [shapeText, setShapeText] = useState("");
+  const [cropAspect, setCropAspect] = useState("free");
+  const [cropRect, setCropRect] = useState(null);
+  const [redact, setRedact] = useState([]);
+  const [redactMethod, setRedactMethod] = useState("blur");
+  const [redactRadius, setRedactRadius] = useState(12);
+  const [redactColor, setRedactColor] = useState("#000000");
+  const [size, setSize] = useState({
+    w: 0,
+    h: 0
+  });
+  const [fit, setFit] = useState("fill");
+  const [lockAspect, setLockAspect] = useState(true);
+  const [pad, setPad] = useState({
+    w: 0,
+    h: 0,
+    color: "#000000"
+  });
+  const [bgUrl, setBgUrl] = useState("");
+  const [bgFit, setBgFit] = useState("cover");
+  const [wmText, setWmText] = useState("");
+  const [wmPosition, setWmPosition] = useState("bottom-right");
+  const [wmSize, setWmSize] = useState(24);
+  const [wmColor, setWmColor] = useState("#ffffff");
+  const [wmOpacity, setWmOpacity] = useState(0.7);
+  const [wmPadding, setWmPadding] = useState(10);
+  const [logoUrl, setLogoUrl] = useState("");
+  const [logoPosition, setLogoPosition] = useState("bottom-right");
+  const [logoPercent, setLogoPercent] = useState(20);
+  const [logoOpacity, setLogoOpacity] = useState(1);
+  const [overlay, setOverlay] = useState({
+    url: "",
+    x: 0,
+    y: 0,
+    scale: "",
+    opacity: 1
+  });
+  const [mask, setMask] = useState({
+    url: "",
+    invert: false
+  });
+  const [levels, setLevels] = useState({
+    inBlack: 0,
+    inWhite: 1,
+    outBlack: 0,
+    outWhite: 1,
+    gamma: 1
+  });
+  const [csTo, setCsTo] = useState("srgb");
+  const [csRange, setCsRange] = useState("");
+  const [csZscale, setCsZscale] = useState(false);
+  const [format, setFormat] = useState("png");
+  const [quality, setQuality] = useState(90);
+  const images = useMemo(() => (libraryItems != null ? libraryItems : []).filter((item) => item.type === "image" && item.src !== current).map((item) => ({
+    id: item.id,
+    src: unwrapProxyUrl(item.src),
+    label: item.generatedAssetName,
+    kind: "image"
+  })), [current, libraryItems]);
   React__default.useEffect(() => {
-    Image.getSize(current, (w, h) => setNatural({
-      width: w,
-      height: h
-    }), () => setNatural(null));
+    Image.getSize(current, (w, h) => {
+      setNatural({
+        width: w,
+        height: h
+      });
+      setSize((s) => s.w ? s : {
+        w,
+        h
+      });
+      setPad((p) => p.w ? p : __spreadProps(__spreadValues({}, p), {
+        w,
+        h
+      }));
+    }, () => setNatural(null));
   }, [current]);
+  const op = useCallback(async (kind, input, params) => {
+    if (!runAction) throw new Error("Editing needs the host connector - not wired in this host.");
+    const action = IMAGE_EDIT_ACTIONS[kind];
+    const result = await runAction("yantra-image-editing", action, __spreadValues({
+      input_url: unwrapProxyUrl(input)
+    }, params));
+    return resultUrl(result, action);
+  }, [runAction]);
+  const runEdit = useCallback((label, fn, opts) => {
+    if (!runAction) {
+      setNotice("Editing needs the host connector - not wired in this host.");
+      return;
+    }
+    if (busy) return;
+    setBusy(label);
+    fn().then((url) => {
+      var _a2, _b;
+      setHistory((h) => [...h, url]);
+      setResizeBase((_a2 = opts == null ? void 0 : opts.resizeBase) != null ? _a2 : null);
+      setNotice(null);
+      (_b = opts == null ? void 0 : opts.after) == null ? void 0 : _b.call(opts);
+    }).catch((err) => setNotice(friendlyMediaError(err, "image edit"))).finally(() => setBusy(null));
+  }, [busy, runAction]);
+  const apply = useCallback((label, kind, params, after) => runEdit(label, () => op(kind, current, params), {
+    after
+  }), [current, op, runEdit]);
   const runMarkEdit = useCallback(async () => {
     if (!runAction) {
       setNotice("Mark & edit needs the host connector.");
@@ -75,12 +221,16 @@ function ImageEditorExperience({
     }
     const ask = editInstruction.trim();
     if (!ask || busy) return;
-    setBusy(`Generating ${variantCount} variant${variantCount === 1 ? "" : "s"}`);
+    const marked = markStrokes.length > 0;
     setVariants([]);
     try {
-      const prompt = markedEditPrompt(ask, false);
+      setBusy(marked ? "Preparing the marked-up picture" : `Generating ${variantCount} variants`);
+      const reference = marked ? await op("annotate", current, {
+        ops: strokesToAnnotateOps(markStrokes)
+      }) : unwrapProxyUrl(current);
+      setBusy(`Generating ${variantCount} variant${variantCount === 1 ? "" : "s"}`);
+      const prompt = markedEditPrompt(ask, marked);
       const request = editRequest(editAspect, editSize, natural);
-      const reference = unwrapProxyUrl(current);
       const settled = await Promise.allSettled(Array.from({
         length: variantCount
       }, async () => {
@@ -90,14 +240,22 @@ function ImageEditorExperience({
             url: reference
           }]
         }, request));
-        return generationImageUrl(result);
+        const url = generationImageUrl(result);
+        if (editAspect !== "original" || !natural) return url;
+        return op("resize", url, {
+          width: natural.width,
+          height: natural.height,
+          fit: "cover"
+        }).catch(() => url);
       }));
       const {
         urls,
         failed
       } = settleVariants(settled);
       if (!urls.length) throw new Error("No variant came back");
+      setBefore(current);
       setVariants(urls);
+      setEditInstruction("");
       if (failed) setNotice(`${failed} variant${failed === 1 ? "" : "s"} failed. The rest are below.`);
       else setNotice(null);
     } catch (err) {
@@ -105,59 +263,522 @@ function ImageEditorExperience({
     } finally {
       setBusy(null);
     }
-  }, [busy, current, editAspect, editInstruction, editSize, natural, runAction, variantCount]);
-  const apply = useCallback((label, action, params) => {
-    if (!runAction) {
-      setNotice("Editing needs the host connector - not wired in this host.");
-      return;
+  }, [busy, current, editAspect, editInstruction, editSize, markStrokes, natural, op, runAction, variantCount]);
+  const applyAspectCrop = useCallback((ratio, label) => {
+    if (!natural) return setNotice("Could not read the image size for cropping.");
+    const r = centeredAspectRect(natural, ratio);
+    apply(label, "crop", {
+      width: r.width,
+      height: r.height,
+      x: r.x,
+      y: r.y
+    });
+  }, [apply, natural]);
+  const markupMode = busy !== null ? "none" : tab === "aiedit" ? "stroke" : tab === "draw" ? drawTool === "pen" ? "stroke" : "rect" : tab === "crop" && cropAspect === "free" || tab === "redact" ? "rect" : "none";
+  const markupStrokes = tab === "aiedit" ? markStrokes : tab === "draw" ? drawStrokes : [];
+  const markupBoxes = tab === "crop" && cropRect ? [{
+    id: "crop",
+    x1: cropRect.x,
+    y1: cropRect.y,
+    x2: cropRect.x + cropRect.width,
+    y2: cropRect.y + cropRect.height,
+    kind: "crop",
+    color: "#ffffff"
+  }] : tab === "redact" ? redact.map((r) => ({
+    id: r.id,
+    x1: r.x,
+    y1: r.y,
+    x2: r.x + r.width,
+    y2: r.y + r.height,
+    kind: "redact",
+    color: "#ffffff"
+  })) : tab === "draw" ? shapes.map((sh) => ({
+    id: sh.id,
+    x1: sh.x1,
+    y1: sh.y1,
+    x2: sh.x2,
+    y2: sh.y2,
+    kind: sh.kind === "ellipse" ? "ellipse" : sh.kind === "arrow" ? "arrow" : "rect",
+    color: sh.color
+  })) : [];
+  const onStroke = (stroke) => {
+    if (tab === "aiedit") setMarkStrokes((list) => [...list, stroke]);
+    else setDrawStrokes((list) => [...list, stroke]);
+  };
+  const onBox = (box, rect) => {
+    if (tab === "crop") setCropRect(rect);
+    else if (tab === "redact") setRedact((list) => [...list, __spreadProps(__spreadValues({}, rect), {
+      id: box.id
+    })]);
+    else if (tab === "draw" && drawTool !== "pen") setShapes((list) => [...list, __spreadValues({
+      id: box.id,
+      kind: drawTool,
+      x1: box.x1,
+      y1: box.y1,
+      x2: box.x2,
+      y2: box.y2,
+      color: drawColor,
+      thickness: Math.max(2, Math.round(drawSize / 3)),
+      fill: shapeFill
+    }, drawTool === "text" ? {
+      text: shapeText.trim() || "Text",
+      fontSize: Math.max(12, drawSize * 2)
+    } : {})]);
+  };
+  const setWidth = (w) => {
+    setSize((s) => ({
+      w,
+      h: lockAspect && natural ? Math.max(1, Math.round(w * (natural.height / natural.width))) : s.h
+    }));
+  };
+  const setHeight = (h) => {
+    setSize((s) => ({
+      h,
+      w: lockAspect && natural ? Math.max(1, Math.round(h * (natural.width / natural.height))) : s.w
+    }));
+  };
+  const placeLogo = () => {
+    const url = logoUrl.trim();
+    if (!url || !natural) return;
+    runEdit("Placing logo", async () => {
+      const aspect = await new Promise((resolve) => Image.getSize(url, (w, h) => resolve(w / Math.max(1, h)), () => resolve(1)));
+      return op("compose", current, logoComposeParams({
+        logoUrl: unwrapProxyUrl(url),
+        logoAspect: aspect,
+        natural,
+        percent: logoPercent,
+        position: logoPosition,
+        opacity: logoOpacity
+      }));
+    });
+  };
+  const variantOptions = before ? [{
+    src: before,
+    label: "Before"
+  }, ...variants.map((url, i) => ({
+    src: url,
+    label: `Variant ${i + 1}`
+  }))] : [];
+  const panel = (() => {
+    switch (tab) {
+      case "aiedit":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.aiHint, children: "Scribble over what should change, then say what. Leave the picture unmarked to change all of it." }),
+          /* @__PURE__ */ jsx(SliderRow, { label: "Marker size", value: markSize, min: 4, max: 120, onChange: setMarkSize, format: (v) => `${v}px` }),
+          /* @__PURE__ */ jsxs(View, { style: styles.countRow, children: [
+            /* @__PURE__ */ jsxs(Text, { style: styles.countLabel, children: [
+              markStrokes.length,
+              " mark",
+              markStrokes.length === 1 ? "" : "s"
+            ] }),
+            /* @__PURE__ */ jsx(Pressable, { onPress: () => setMarkStrokes((m) => m.slice(0, -1)), disabled: !markStrokes.length, hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: [styles.linkLabel, !markStrokes.length && styles.disabled], children: "Undo mark" }) }),
+            /* @__PURE__ */ jsx(Pressable, { onPress: () => setMarkStrokes([]), disabled: !markStrokes.length, hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: [styles.linkLabel, !markStrokes.length && styles.disabled], children: "Clear" }) })
+          ] }),
+          /* @__PURE__ */ jsx(TextInput, { value: editInstruction, onChangeText: setEditInstruction, placeholder: "Add a top hat and monocle", placeholderTextColor: theme.edInk3, style: styles.aiInput, multiline: true, accessibilityLabel: "What to change" }),
+          /* @__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: markStrokes.length ? "Edit the marked area" : "Generate variants" }) }),
+          variantOptions.length ? /* @__PURE__ */ jsx(ScrollView, { style: HSCROLL, horizontal: true, contentContainerStyle: styles.row, children: variantOptions.map((o) => {
+            const showing = o.src === current;
+            return /* @__PURE__ */ jsxs(Pressable, { disabled: showing, onPress: () => {
+              setHistory((h) => [...h, o.src]);
+              setMarkStrokes([]);
+              setNotice("Applied. Pick another, or Before to go back.");
+            }, accessibilityLabel: `Use ${o.label}`, style: [styles.variantThumb, showing && styles.variantOn], children: [
+              /* @__PURE__ */ jsx(Image$1, { source: {
+                uri: o.src
+              }, style: styles.variantImg, contentFit: "cover" }),
+              /* @__PURE__ */ jsx(Text, { style: styles.variantLabel, children: o.label })
+            ] }, o.label);
+          }) }) : null
+        ] });
+      case "filters":
+        return /* @__PURE__ */ jsx(ScrollView, { style: HSCROLL, horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.row, children: FILTER_NAMES.map((filter) => /* @__PURE__ */ jsx(Pressable, { onPress: () => apply(`Filter ${filter}`, "filter", {
+          name: filter
+        }), style: ({
+          pressed
+        }) => [styles.chip, pressedStyle(pressed)], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: filter }) }, filter)) });
+      case "adjust":
+        return /* @__PURE__ */ jsxs(View, { children: [
+          /* @__PURE__ */ jsx(SliderRow, { label: "Brightness", value: adjust.brightness, min: -1, max: 1, step: 0.01, format: (v) => v.toFixed(2), onChange: (brightness) => setAdjust((a) => __spreadProps(__spreadValues({}, a), {
+            brightness
+          })) }),
+          /* @__PURE__ */ jsx(SliderRow, { label: "Contrast", value: adjust.contrast, min: 0.2, max: 3, step: 0.01, format: (v) => v.toFixed(2), onChange: (contrast) => setAdjust((a) => __spreadProps(__spreadValues({}, a), {
+            contrast
+          })) }),
+          /* @__PURE__ */ jsx(SliderRow, { label: "Saturation", value: adjust.saturation, min: 0, max: 3, step: 0.01, format: (v) => v.toFixed(2), onChange: (saturation) => setAdjust((a) => __spreadProps(__spreadValues({}, a), {
+            saturation
+          })) }),
+          /* @__PURE__ */ jsx(ApplyButton, { label: "Apply adjustments", disabled: Boolean(busy), onPress: () => apply("Adjusting", "finetune", {
+            brightness: adjust.brightness,
+            contrast: adjust.contrast,
+            saturation: adjust.saturation
+          }) })
+        ] });
+      case "crop":
+        return /* @__PURE__ */ jsxs(View, { children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+            /* @__PURE__ */ jsxs(Pressable, { onPress: () => apply("Rotating", "rotate", {
+              degrees: 90
+            }), style: ({
+              pressed
+            }) => [styles.chip, pressedStyle(pressed)], accessibilityLabel: "Rotate right", 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", "flip", {
+              horizontal: true
+            }), style: ({
+              pressed
+            }) => [styles.chip, pressedStyle(pressed)], accessibilityLabel: "Flip horizontal", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "flip-horizontal", size: 14, color: theme.edInk }) }),
+            /* @__PURE__ */ jsx(Pressable, { onPress: () => apply("Flipping", "flip", {
+              vertical: true
+            }), style: ({
+              pressed
+            }) => [styles.chip, pressedStyle(pressed)], accessibilityLabel: "Flip vertical", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "flip-vertical", size: 14, color: theme.edInk }) })
+          ] }),
+          /* @__PURE__ */ jsx(ChoiceRow, { label: "Crop", options: CROP_ASPECTS.map((a) => ({
+            value: a.id,
+            label: a.label
+          })), value: cropAspect, onChange: (id) => {
+            var _a2;
+            setCropAspect(id);
+            setCropRect(null);
+            const ratio = (_a2 = CROP_ASPECTS.find((a) => a.id === id)) == null ? void 0 : _a2.ratio;
+            if (ratio) applyAspectCrop(ratio, `Cropping ${id}`);
+          } }),
+          cropAspect === "free" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.aiHint, children: cropRect ? `${cropRect.width} \xD7 ${cropRect.height} at ${cropRect.x}, ${cropRect.y}` : "Drag a box on the picture to crop to it." }),
+            /* @__PURE__ */ jsx(ApplyButton, { label: "Apply crop", disabled: !cropRect || Boolean(busy), onPress: () => cropRect && apply("Cropping", "crop", {
+              width: cropRect.width,
+              height: cropRect.height,
+              x: cropRect.x,
+              y: cropRect.y
+            }, () => setCropRect(null)) })
+          ] }) : null
+        ] });
+      case "resize":
+        return /* @__PURE__ */ jsxs(View, { children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.sectionLabel, children: "Suggested sizes" }),
+          /* @__PURE__ */ jsx(ScrollView, { style: HSCROLL, horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.row, children: RESIZE_SUGGESTIONS.map((s) => {
+            const on = size.w === s.width && size.h === s.height;
+            return /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+              setSize({
+                w: s.width,
+                h: s.height
+              });
+              setFit("cover");
+            }, style: ({
+              pressed
+            }) => [styles.sizeCard, on && styles.chipOn, pressedStyle(pressed)], children: [
+              /* @__PURE__ */ jsx(Text, { style: styles.sizeTitle, numberOfLines: 1, children: s.label }),
+              /* @__PURE__ */ jsxs(Text, { style: styles.sizeMeta, children: [
+                s.hint,
+                " \xB7 ",
+                s.width,
+                "\xD7",
+                s.height
+              ] })
+            ] }, `${s.width}x${s.height}`);
+          }) }),
+          /* @__PURE__ */ jsxs(View, { style: styles.fieldRow, children: [
+            /* @__PURE__ */ jsx(NumberField, { label: "Width", value: size.w, onChange: (v) => setWidth(Math.max(1, Math.round(v))) }),
+            /* @__PURE__ */ jsx(NumberField, { label: "Height", value: size.h, onChange: (v) => setHeight(Math.max(1, Math.round(v))) })
+          ] }),
+          /* @__PURE__ */ jsx(ToggleRow, { label: "Lock aspect ratio", value: lockAspect, onChange: setLockAspect }),
+          /* @__PURE__ */ jsx(ChoiceRow, { label: "Fit", options: [{
+            value: "fill",
+            label: "Stretch"
+          }, {
+            value: "contain",
+            label: "Contain"
+          }, {
+            value: "cover",
+            label: "Cover"
+          }], value: fit, onChange: setFit }),
+          /* @__PURE__ */ jsx(ApplyButton, { label: "Resize", disabled: Boolean(busy) || size.w < 1 || size.h < 1, onPress: () => {
+            const base = resizeBase != null ? resizeBase : current;
+            runEdit("Resizing", () => op("resize", base, {
+              width: size.w,
+              height: size.h,
+              fit
+            }), {
+              resizeBase: base
+            });
+          } }),
+          /* @__PURE__ */ jsx(Text, { style: styles.sectionLabel, children: "Pad" }),
+          /* @__PURE__ */ jsxs(View, { style: styles.fieldRow, children: [
+            /* @__PURE__ */ jsx(NumberField, { label: "Pad width", value: pad.w, onChange: (v) => setPad((p) => __spreadProps(__spreadValues({}, p), {
+              w: Math.round(v)
+            })) }),
+            /* @__PURE__ */ jsx(NumberField, { label: "Pad height", value: pad.h, onChange: (v) => setPad((p) => __spreadProps(__spreadValues({}, p), {
+              h: Math.round(v)
+            })) })
+          ] }),
+          /* @__PURE__ */ jsx(SwatchRow, { label: "Pad colour", colors: SWATCHES, value: pad.color, onChange: (color) => setPad((p) => __spreadProps(__spreadValues({}, p), {
+            color
+          })) }),
+          /* @__PURE__ */ jsx(ApplyButton, { label: "Pad", tone: "soft", disabled: Boolean(busy) || pad.w < 1 || pad.h < 1, onPress: () => apply("Padding", "pad", {
+            width: String(pad.w),
+            height: String(pad.h),
+            color: pad.color
+          }) })
+        ] });
+      case "draw":
+        return /* @__PURE__ */ jsxs(View, { children: [
+          /* @__PURE__ */ jsx(ChoiceRow, { options: [{
+            value: "pen",
+            label: "Pen"
+          }, {
+            value: "box",
+            label: "Box"
+          }, {
+            value: "ellipse",
+            label: "Ellipse"
+          }, {
+            value: "arrow",
+            label: "Arrow"
+          }, {
+            value: "text",
+            label: "Text"
+          }], value: drawTool, onChange: setDrawTool }),
+          /* @__PURE__ */ jsx(SwatchRow, { colors: SWATCHES, value: drawColor, onChange: setDrawColor }),
+          /* @__PURE__ */ jsx(SliderRow, { label: drawTool === "text" ? "Text size" : "Brush size", value: drawSize, min: 1, max: 100, onChange: setDrawSize, format: (v) => `${v}px` }),
+          drawTool === "box" || drawTool === "ellipse" ? /* @__PURE__ */ jsx(ToggleRow, { label: "Filled", value: shapeFill, onChange: setShapeFill }) : null,
+          drawTool === "text" ? /* @__PURE__ */ jsx(TextField, { value: shapeText, onChange: setShapeText, placeholder: "Text, then drag where it goes" }) : null,
+          /* @__PURE__ */ jsxs(View, { style: styles.countRow, children: [
+            /* @__PURE__ */ jsxs(Text, { style: styles.countLabel, children: [
+              drawStrokes.length,
+              " stroke",
+              drawStrokes.length === 1 ? "" : "s",
+              " \xB7 ",
+              shapes.length,
+              " shape",
+              shapes.length === 1 ? "" : "s"
+            ] }),
+            /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+              setDrawStrokes([]);
+              setShapes([]);
+            }, disabled: !drawStrokes.length && !shapes.length, hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: [styles.linkLabel, !drawStrokes.length && !shapes.length && styles.disabled], children: "Clear" }) })
+          ] }),
+          /* @__PURE__ */ jsx(ApplyButton, { label: "Apply drawing", disabled: Boolean(busy) || !drawStrokes.length && !shapes.length, onPress: () => apply("Drawing", "annotate", {
+            ops: [...strokesToAnnotateOps(drawStrokes), ...shapes.map(annotateOp)]
+          }, () => {
+            setDrawStrokes([]);
+            setShapes([]);
+          }) })
+        ] });
+      case "redact":
+        return /* @__PURE__ */ jsxs(View, { children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.aiHint, children: "Drag on the picture to mark regions to redact." }),
+          /* @__PURE__ */ jsx(ChoiceRow, { label: "Method", options: [{
+            value: "blur",
+            label: "Blur"
+          }, {
+            value: "pixelate",
+            label: "Pixelate"
+          }, {
+            value: "solid",
+            label: "Solid fill"
+          }], value: redactMethod, onChange: setRedactMethod }),
+          redactMethod === "solid" ? /* @__PURE__ */ jsx(SwatchRow, { label: "Fill colour", colors: SWATCHES, value: redactColor, onChange: setRedactColor }) : /* @__PURE__ */ jsx(SliderRow, { label: redactMethod === "blur" ? "Blur strength" : "Pixel size", value: redactRadius, min: 2, max: 50, onChange: setRedactRadius }),
+          /* @__PURE__ */ jsxs(View, { style: styles.countRow, children: [
+            /* @__PURE__ */ jsxs(Text, { style: styles.countLabel, children: [
+              redact.length,
+              " region",
+              redact.length === 1 ? "" : "s"
+            ] }),
+            /* @__PURE__ */ jsx(Pressable, { onPress: () => setRedact((r) => r.slice(0, -1)), disabled: !redact.length, hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: [styles.linkLabel, !redact.length && styles.disabled], children: "Undo" }) }),
+            /* @__PURE__ */ jsx(Pressable, { onPress: () => setRedact([]), disabled: !redact.length, hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: [styles.linkLabel, !redact.length && styles.disabled], children: "Clear" }) })
+          ] }),
+          /* @__PURE__ */ jsx(ApplyButton, { label: "Redact", disabled: Boolean(busy) || !redact.length, onPress: () => apply("Redacting", "redact", {
+            regions: redact.map(({
+              x,
+              y,
+              width,
+              height
+            }) => ({
+              x,
+              y,
+              width,
+              height
+            })),
+            method: redactMethod,
+            radius: redactRadius,
+            color: redactColor
+          }, () => setRedact([])) })
+        ] });
+      case "effects":
+        return /* @__PURE__ */ jsxs(View, { children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+            /* @__PURE__ */ jsx(Pressable, { onPress: () => apply("Vignette", "vignette", {}), style: ({
+              pressed
+            }) => [styles.chip, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Vignette" }) }),
+            /* @__PURE__ */ jsx(Pressable, { onPress: () => apply("Framing", "frame", {
+              thickness: 24,
+              color: "white"
+            }), style: ({
+              pressed
+            }) => [styles.chip, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Frame" }) }),
+            /* @__PURE__ */ jsx(Pressable, { onPress: () => apply("Removing background", "remove_background", {}), style: ({
+              pressed
+            }) => [styles.chip, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Cut out" }) })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { style: styles.sectionLabel, children: "Shadow" }),
+          /* @__PURE__ */ jsx(View, { style: styles.row, children: SHADOW_PRESETS.map((preset) => /* @__PURE__ */ jsx(Pressable, { onPress: () => apply(`Shadow ${preset.label}`, "drop_shadow", shadowParams(preset.params)), style: ({
+            pressed
+          }) => [styles.chip, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: preset.label }) }, preset.id)) })
+        ] });
+      case "background":
+        return /* @__PURE__ */ jsxs(View, { children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.aiHint, children: "Keys the subject out and puts it on a background you choose. Exact and instant, but the light will not match." }),
+          /* @__PURE__ */ jsx(MediaUrlPicker, { label: "New background", items: images, value: bgUrl, onChange: setBgUrl }),
+          /* @__PURE__ */ jsx(ChoiceRow, { label: "Fit", options: [{
+            value: "cover",
+            label: "Fill the frame"
+          }, {
+            value: "contain",
+            label: "Fit inside"
+          }], value: bgFit, onChange: setBgFit }),
+          /* @__PURE__ */ jsx(ApplyButton, { label: "Cut and place", disabled: Boolean(busy) || !bgUrl.trim(), onPress: () => runEdit("Cutting out and placing", async () => {
+            const cut = await op("remove_background", current, {});
+            return op("compose", bgUrl.trim(), {
+              overlay_url: cut,
+              x: "0",
+              y: "0",
+              scale: bgFit === "cover" ? "W:H" : "W:-1",
+              opacity: 1
+            });
+          }) })
+        ] });
+      case "brand":
+        return /* @__PURE__ */ jsxs(View, { children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.sectionLabel, children: "Watermark" }),
+          /* @__PURE__ */ jsx(TextField, { value: wmText, onChange: setWmText, placeholder: "\xA9 Yantra" }),
+          /* @__PURE__ */ jsx(ChoiceRow, { options: LOGO_POSITIONS.map((p) => ({
+            value: p,
+            label: p.replace("-", " ")
+          })), value: wmPosition, onChange: setWmPosition }),
+          /* @__PURE__ */ jsx(SliderRow, { label: "Font size", value: wmSize, min: 6, max: 160, onChange: setWmSize }),
+          /* @__PURE__ */ jsx(SwatchRow, { colors: SWATCHES, value: wmColor, onChange: setWmColor }),
+          /* @__PURE__ */ jsx(SliderRow, { label: "Opacity", value: wmOpacity, min: 0, max: 1, step: 0.05, format: (v) => `${Math.round(v * 100)}%`, onChange: setWmOpacity }),
+          /* @__PURE__ */ jsx(SliderRow, { label: "Padding", value: wmPadding, min: 0, max: 120, onChange: setWmPadding }),
+          /* @__PURE__ */ jsx(ApplyButton, { label: "Apply watermark", disabled: Boolean(busy) || !wmText.trim(), onPress: () => apply("Watermarking", "watermark", {
+            text: wmText,
+            position: wmPosition,
+            font_size: wmSize,
+            font_color: wmColor,
+            opacity: wmOpacity,
+            padding: wmPadding
+          }) }),
+          /* @__PURE__ */ jsx(Text, { style: styles.sectionLabel, children: "Logo" }),
+          /* @__PURE__ */ jsx(MediaUrlPicker, { items: images, value: logoUrl, onChange: setLogoUrl }),
+          /* @__PURE__ */ jsx(ChoiceRow, { options: LOGO_POSITIONS.map((p) => ({
+            value: p,
+            label: p.replace("-", " ")
+          })), value: logoPosition, onChange: setLogoPosition }),
+          /* @__PURE__ */ jsx(SliderRow, { label: "Size", value: logoPercent, min: 4, max: 80, format: (v) => `${v}% of width`, onChange: setLogoPercent }),
+          /* @__PURE__ */ jsx(SliderRow, { label: "Opacity", value: logoOpacity, min: 0, max: 1, step: 0.05, format: (v) => `${Math.round(v * 100)}%`, onChange: setLogoOpacity }),
+          /* @__PURE__ */ jsx(ApplyButton, { label: "Apply logo", tone: "soft", disabled: Boolean(busy) || !logoUrl.trim() || !natural, onPress: placeLogo })
+        ] });
+      case "layers":
+        return /* @__PURE__ */ jsxs(View, { children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.sectionLabel, children: "Overlay" }),
+          /* @__PURE__ */ jsx(MediaUrlPicker, { items: images, value: overlay.url, onChange: (url) => setOverlay((o) => __spreadProps(__spreadValues({}, o), {
+            url
+          })) }),
+          /* @__PURE__ */ jsxs(View, { style: styles.fieldRow, children: [
+            /* @__PURE__ */ jsx(NumberField, { label: "X", value: overlay.x, onChange: (x) => setOverlay((o) => __spreadProps(__spreadValues({}, o), {
+              x
+            })) }),
+            /* @__PURE__ */ jsx(NumberField, { label: "Y", value: overlay.y, onChange: (y) => setOverlay((o) => __spreadProps(__spreadValues({}, o), {
+              y
+            })) })
+          ] }),
+          /* @__PURE__ */ jsx(TextField, { label: "Scale (0.5 or 200:-1)", value: overlay.scale, onChange: (scale) => setOverlay((o) => __spreadProps(__spreadValues({}, o), {
+            scale
+          })), placeholder: "optional" }),
+          /* @__PURE__ */ jsx(SliderRow, { label: "Opacity", value: overlay.opacity, min: 0, max: 1, step: 0.05, format: (v) => `${Math.round(v * 100)}%`, onChange: (opacity) => setOverlay((o) => __spreadProps(__spreadValues({}, o), {
+            opacity
+          })) }),
+          /* @__PURE__ */ jsx(ApplyButton, { label: "Compose overlay", disabled: Boolean(busy) || !overlay.url.trim(), onPress: () => apply("Compositing", "compose", __spreadProps(__spreadValues({
+            overlay_url: unwrapProxyUrl(overlay.url.trim()),
+            x: String(Math.round(overlay.x)),
+            y: String(Math.round(overlay.y))
+          }, overlay.scale.trim() ? {
+            scale: overlay.scale.trim()
+          } : {}), {
+            opacity: overlay.opacity
+          })) }),
+          /* @__PURE__ */ jsx(Text, { style: styles.sectionLabel, children: "Mask" }),
+          /* @__PURE__ */ jsx(MediaUrlPicker, { items: images, value: mask.url, onChange: (url) => setMask((m) => __spreadProps(__spreadValues({}, m), {
+            url
+          })), placeholder: "A greyscale mask image" }),
+          /* @__PURE__ */ jsx(ToggleRow, { label: "Invert mask", value: mask.invert, onChange: (invert) => setMask((m) => __spreadProps(__spreadValues({}, m), {
+            invert
+          })) }),
+          /* @__PURE__ */ jsx(ApplyButton, { label: "Apply mask", tone: "soft", disabled: Boolean(busy) || !mask.url.trim(), onPress: () => apply("Masking", "mask", {
+            mask_url: unwrapProxyUrl(mask.url.trim()),
+            invert: mask.invert
+          }) })
+        ] });
+      case "levels":
+        return /* @__PURE__ */ jsxs(View, { children: [
+          [["inBlack", "Input black", 0, 1], ["inWhite", "Input white", 0, 1], ["outBlack", "Output black", 0, 1], ["outWhite", "Output white", 0, 1], ["gamma", "Gamma", 0.1, 3]].map(([key, label, min, max]) => /* @__PURE__ */ jsx(SliderRow, { label, value: levels[key], min, max, step: 0.01, format: (v) => v.toFixed(2), onChange: (v) => setLevels((l) => __spreadProps(__spreadValues({}, l), {
+            [key]: v
+          })) }, key)),
+          /* @__PURE__ */ jsx(ApplyButton, { label: "Apply levels", disabled: Boolean(busy), onPress: () => apply("Applying levels", "levels", {
+            in_black: levels.inBlack,
+            in_white: levels.inWhite,
+            out_black: levels.outBlack,
+            out_white: levels.outWhite,
+            gamma: levels.gamma
+          }) }),
+          /* @__PURE__ */ jsx(Text, { style: styles.sectionLabel, children: "Colorspace" }),
+          /* @__PURE__ */ jsx(ChoiceRow, { options: COLORSPACE_TARGETS.map((v) => ({
+            value: v,
+            label: v
+          })), value: csTo, onChange: setCsTo }),
+          /* @__PURE__ */ jsx(ChoiceRow, { label: "Range", options: [{
+            value: "",
+            label: "Auto"
+          }, {
+            value: "tv",
+            label: "Limited (tv)"
+          }, {
+            value: "pc",
+            label: "Full (pc)"
+          }], value: csRange, onChange: setCsRange }),
+          /* @__PURE__ */ jsx(ToggleRow, { label: "High quality (zscale)", value: csZscale, onChange: setCsZscale }),
+          /* @__PURE__ */ jsx(ApplyButton, { label: "Convert colorspace", tone: "soft", disabled: Boolean(busy), onPress: () => apply("Converting colorspace", "colorspace", __spreadProps(__spreadValues({
+            to: csTo
+          }, csRange ? {
+            range: csRange
+          } : {}), {
+            use_zscale: csZscale
+          })) })
+        ] });
+      case "export":
+      default:
+        return /* @__PURE__ */ jsxs(View, { children: [
+          /* @__PURE__ */ jsx(ChoiceRow, { label: "Format", options: EXPORT_FORMATS.map((v) => ({
+            value: v,
+            label: v.toUpperCase()
+          })), value: format, onChange: setFormat }),
+          format !== "png" ? /* @__PURE__ */ jsx(SliderRow, { label: "Quality", value: quality, min: 1, max: 100, onChange: setQuality }) : null,
+          /* @__PURE__ */ jsx(ApplyButton, { label: `Convert to ${format.toUpperCase()}`, disabled: Boolean(busy), onPress: () => apply(`Converting to ${format}`, "convert", convertParams(format, quality)) }),
+          /* @__PURE__ */ jsx(ApplyButton, { label: "Open current image", tone: "soft", onPress: () => void Linking.openURL(current) })
+        ] });
     }
-    if (busy) return;
-    setBusy(label);
-    runAction("yantra-image-editing", action, __spreadValues({
-      input_url: current
-    }, params)).then((result) => {
-      setHistory((h) => [...h, resultUrl(result, action)]);
-      setNotice(null);
-    }).catch((err) => setNotice(friendlyMediaError(err, "image edit"))).finally(() => setBusy(null));
-  }, [busy, current, runAction]);
-  const applyCrop = useCallback((ratio, label) => {
-    if (ratio === null) return;
-    Image.getSize(current, (w, h) => {
-      let cw = w;
-      let ch = Math.round(w / ratio);
-      if (ch > h) {
-        ch = h;
-        cw = Math.round(h * ratio);
-      }
-      apply(label, "YANTRA_IMAGE_EDIT_CROP", {
-        width: cw,
-        height: ch,
-        x: Math.round((w - cw) / 2),
-        y: Math.round((h - ch) / 2)
-      });
-    }, () => setNotice("Could not read the image size for cropping."));
-  }, [apply, current]);
-  const tabs = useMemo(() => [{
-    id: "aiedit",
-    icon: "marker",
-    label: "Mark"
-  }, {
-    id: "filters",
-    icon: "blur",
-    label: "Filters"
-  }, {
-    id: "adjust",
-    icon: "tune-variant",
-    label: "Adjust"
-  }, {
-    id: "transform",
-    icon: "crop-rotate",
-    label: "Transform"
-  }, {
-    id: "effects",
-    icon: "creation",
-    label: "Effects"
-  }], []);
+  })();
   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", style: ({
@@ -183,6 +804,7 @@ function ImageEditorExperience({
       /* @__PURE__ */ jsx(Image$1, { source: {
         uri: current
       }, style: StyleSheet.absoluteFill, contentFit: "contain", transition: 150 }),
+      /* @__PURE__ */ jsx(ImageMarkup, { natural, mode: markupMode, strokes: markupStrokes, strokeColor: tab === "aiedit" ? MARKER_COLOR : drawColor, strokeSize: tab === "aiedit" ? markSize : drawSize, onStroke, boxes: markupBoxes, boxKind: tab === "crop" ? "crop" : tab === "redact" ? "redact" : drawTool === "ellipse" ? "ellipse" : drawTool === "arrow" ? "arrow" : "rect", boxColor: tab === "draw" ? drawColor : "#ffffff", onBox }),
       busy ? /* @__PURE__ */ jsxs(View, { style: styles.busyVeil, children: [
         /* @__PURE__ */ jsx(ActivityIndicator, { color: "#F7F7FA" }),
         /* @__PURE__ */ jsxs(Text, { style: styles.busyLabel, children: [
@@ -190,105 +812,17 @@ function ImageEditorExperience({
           "\u2026"
         ] })
       ] }) : null,
-      edited && !busy ? /* @__PURE__ */ jsx(View, { style: styles.editedBadge, children: /* @__PURE__ */ jsxs(Text, { style: styles.editedBadgeLabel, children: [
+      edited && !busy ? /* @__PURE__ */ jsx(View, { style: styles.editedBadge, pointerEvents: "none", children: /* @__PURE__ */ jsxs(Text, { style: styles.editedBadgeLabel, children: [
         "edit ",
         history.length - 1
       ] }) }) : null
     ] }),
     /* @__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__ */ jsxs(ScrollView, { style: styles.panelScroll, contentContainerStyle: styles.panel, keyboardShouldPersistTaps: "handled", children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.sheetTitle, children: (_a = TABS.find((entry) => entry.id === tab)) == null ? void 0 : _a.label }),
+        panel
       ] }),
-      /* @__PURE__ */ jsx(View, { style: styles.toolbar, children: tabs.map((entry) => {
+      /* @__PURE__ */ jsx(ScrollView, { horizontal: true, style: HSCROLL, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.toolbar, children: TABS.map((entry) => {
         const active = tab === entry.id;
         return /* @__PURE__ */ jsxs(Pressable, { onPress: () => setTab(entry.id), style: ({
           pressed
@@ -306,21 +840,6 @@ function ImageEditorExperience({
     ] }) : null
   ] });
 }
-function AdjustRow({
-  label,
-  value,
-  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: 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: theme.edInk }) })
-  ] });
-}
 const makeStyles = themedStyles((theme) => StyleSheet.create({
   root: {
     flex: 1,
@@ -437,8 +956,8 @@ const makeStyles = themedStyles((theme) => StyleSheet.create({
     color: theme.edOnInk
   }),
   variantThumb: {
-    width: 64,
-    height: 64,
+    width: 72,
+    height: 72,
     borderRadius: RADIUS.sm,
     overflow: "hidden",
     marginRight: SPACE.sm,
@@ -448,13 +967,70 @@ const makeStyles = themedStyles((theme) => StyleSheet.create({
     width: "100%",
     height: "100%"
   },
+  panelScroll: {
+    maxHeight: 300
+  },
   panel: {
     minHeight: 104,
-    justifyContent: "center",
     paddingHorizontal: SPACE.lg,
     paddingTop: SPACE.lg,
     paddingBottom: SPACE.sm
   },
+  sectionLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk,
+    marginTop: SPACE.md,
+    marginBottom: SPACE.sm
+  }),
+  countRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.lg,
+    minHeight: 32,
+    marginBottom: SPACE.xs
+  },
+  countLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk2,
+    flex: 1
+  }),
+  linkLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk2
+  }),
+  fieldRow: {
+    flexDirection: "row",
+    gap: SPACE.sm,
+    marginBottom: SPACE.sm
+  },
+  sizeCard: {
+    width: 150,
+    paddingHorizontal: SPACE.md,
+    paddingVertical: SPACE.sm,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edRaised,
+    borderWidth: 1,
+    borderColor: "transparent"
+  },
+  sizeTitle: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk
+  }),
+  sizeMeta: __spreadProps(__spreadValues({}, TYPE.caption), {
+    fontWeight: "400",
+    color: theme.edInk3
+  }),
+  variantOn: {
+    borderWidth: 2,
+    borderColor: theme.edAccent
+  },
+  variantLabel: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    textAlign: "center",
+    fontSize: 10,
+    lineHeight: 14,
+    color: "#FFFFFF",
+    backgroundColor: "rgba(0,0,0,0.55)"
+  },
   row: {
     flexDirection: "row",
     alignItems: "center",
@@ -505,7 +1081,7 @@ const makeStyles = themedStyles((theme) => StyleSheet.create({
   }),
   toolbar: {
     flexDirection: "row",
-    justifyContent: "space-around",
+    gap: SPACE.xs,
     paddingHorizontal: SPACE.sm,
     paddingTop: SPACE.xs,
     paddingBottom: SPACE.md