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

package/lib/features/design/DesignEditorExperience.js

@@ -1,4 +1,4 @@
-import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useCallback,useMemo,useRef}from'react';import {View,ScrollView,Text,StyleSheet,PanResponder,TextInput}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {KeyboardAwareScreen,KeyboardLiftSpacer}from'../../components/KeyboardComposerDock.js';import {dismissKeyboard}from'../../utils/keyboardController.js';import {resizeFrame}from'../canvas/canvasCore.js';import {useCanvasTheme,themedStyles}from'../canvas/canvasTheme.js';import {Pressable,pressedStyle,SPACE,HIT,RADIUS,TYPE}from'../canvas/canvasUi.js';import {replaceLayer,addLayer,newImageLayer,nextZ,layerPaintOrder,bringLayerToFront,sendLayerToBack,duplicateLayer,removeLayer,newTextLayer,newShapeLayer,TSHIRT_COLORS,DESIGN_SWATCHES,TSHIRT_PRINT_AREA}from'./designCore.js';var __defProp = Object.defineProperty;
+import {jsxs,jsx}from'react/jsx-runtime';import {useReducer,useState,useRef,useEffect,useCallback}from'react';import {useWindowDimensions,Alert,View,TextInput,Text,KeyboardAvoidingView,ActivityIndicator,Platform,StyleSheet}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {useCanvasTheme,themedStyles}from'../canvas/canvasTheme.js';import {Pressable,RADIUS,SPACE,TYPE}from'../canvas/canvasUi.js';import {useSafeInsets}from'../canvas/withRemoteSafeArea.js';import {picturesToPaint,paintPicture}from'./doc/aiDesign.js';import {editorReducer,initEditorState,currentPage,selectedLayer,makeImageLayer,makeStickerLayer,makeChartLayer,makeShapeLayer,makeTextLayer,makeTextBox}from'./doc/docOps.js';import {qrMatrix,qrPath}from'./doc/qr.js';import {defaultPrintSpec,catalogToDoc,catalogKind,templatePagesFor}from'./doc/newDoc.js';import {snapAspect}from'./doc/sizes.js';import {rebaseRuns}from'./doc/textLayout.js';import {newLayerId,designTitle}from'./doc/types.js';import {writePngToCache,exportDesign}from'./export/exportDesign.js';import {AiPanel}from'./editor/AiPanel.js';import {CropOverlay}from'./editor/CropOverlay.js';import {DesignCanvas}from'./editor/DesignCanvas.js';import {EditorSheet}from'./editor/controls.js';import {ExportSheet}from'./editor/ExportSheet.js';import {FindReplacePanel}from'./editor/FindReplacePanel.js';import {toolTitle,LayerToolPanel,SelectionToolbar}from'./editor/LayerTools.js';import {chooseAction,PageStrip}from'./editor/PageStrip.js';import {Slideshow}from'./editor/Slideshow.js';import {PageCapture}from'./render/PageCapture.js';import {DOCK_TOOLS,TemplatesPanel,ElementsPanel,TextPanel,BrandPanel,DetailsPanel,AssetsPanel}from'./editor/ToolPanels.js';import {useDesignSave}from'./editor/useDesignSave.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -17,708 +17,738 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const DOCK_H = 64;
+function statusLabel(status) {
+  switch (status) {
+    case "saving":
+      return "Saving\u2026";
+    case "saved":
+      return "Saved";
+    case "error":
+      return "Not saved";
+    case "offline":
+      return "Not signed in";
+    default:
+      return "";
+  }
+}
 function DesignEditorExperience({
-  doc,
-  onChange,
-  onClose,
-  onExport,
-  onPickLocalMedia,
-  canvasImages = []
+  doc: initialDoc,
+  kind,
+  opened,
+  index,
+  sessionId,
+  loadCatalog,
+  readTemplate,
+  pickImage,
+  uploadFile,
+  runCarousel,
+  onClose
 }) {
-  var _a;
+  var _a, _b, _c, _d;
   const theme = useCanvasTheme();
   const styles = makeStyles(theme);
-  const [pageIndex, setPageIndex] = useState(0);
-  const [selectedId, setSelectedId] = useState(null);
-  const [dock, setDock] = useState("add");
-  const [imagePicker, setImagePicker] = useState(false);
-  const [canvasSize, setCanvasSize] = useState({
-    width: 0,
-    height: 0
+  const insets = useSafeInsets();
+  const {
+    width,
+    height
+  } = useWindowDimensions();
+  const [state, dispatch] = useReducer(editorReducer, initialDoc, initEditorState);
+  const {
+    doc
+  } = state;
+  const page = (_a = currentPage(state)) != null ? _a : doc.pages[0];
+  const layer = (_b = selectedLayer(state)) != null ? _b : null;
+  const save = useDesignSave({
+    doc,
+    index,
+    kind,
+    opened,
+    sessionId
   });
-  const page = doc.pages[Math.min(pageIndex, doc.pages.length - 1)];
-  const selected = (_a = page.layers.find((l) => l.id === selectedId)) != null ? _a : null;
-  const setPage = useCallback((next) => {
-    onChange(__spreadProps(__spreadValues({}, doc), {
-      pages: doc.pages.map((p) => p.id === next.id ? next : p)
-    }));
-  }, [doc, onChange]);
-  const updateLayer = useCallback((layer) => setPage(replaceLayer(page, layer)), [page, setPage]);
-  const scale = useMemo(() => {
-    if (!canvasSize.width || !canvasSize.height) return 0;
-    return Math.min((canvasSize.width - 32) / page.width, (canvasSize.height - 32) / page.height);
-  }, [canvasSize, page.width, page.height]);
-  const addAndSelect = useCallback((layer) => {
-    setPage(addLayer(page, layer));
-    setSelectedId(layer.id);
-    setDock("style");
-  }, [page, setPage]);
-  const handleAddImage = useCallback(async () => {
-    if (onPickLocalMedia) {
+  const [dockTool, setDockTool] = useState(null);
+  const [layerTool, setLayerTool] = useState(null);
+  const [editingTextId, setEditingTextId] = useState(null);
+  const [busy, setBusy] = useState(null);
+  const [extra, setExtra] = useState(null);
+  const [exporting, setExporting] = useState(null);
+  const [cropping, setCropping] = useState(null);
+  const [presenting, setPresenting] = useState(false);
+  const capture = useRef(null);
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const mounted = useRef(true);
+  useEffect(() => () => {
+    mounted.current = false;
+  }, []);
+  const pageIndex = Math.max(0, doc.pages.findIndex((p) => p.id === page.id));
+  const sheetH = Math.round(Math.min(height * 0.46, 420));
+  const select = useCallback((layerId) => {
+    dispatch({
+      type: "select",
+      layerId
+    });
+    setLayerTool(null);
+    if (layerId) {
+      setDockTool(null);
+      setExtra(null);
+    }
+  }, []);
+  const patch = useCallback((layerId, p, coalesce) => dispatch({
+    type: "patchLayer",
+    pageId: page.id,
+    layerId,
+    patch: p,
+    coalesce
+  }), [page.id]);
+  const addLayer = useCallback((l) => {
+    dispatch({
+      type: "addLayer",
+      pageId: page.id,
+      layer: l
+    });
+    setDockTool(null);
+  }, [page.id]);
+  const close = useCallback(async () => {
+    setEditingTextId(null);
+    await save.flush();
+    onClose();
+  }, [save, onClose]);
+  const placePicture = useCallback((picked) => {
+    if ((layer == null ? void 0 : layer.kind) === "image" && !layer.locked) {
+      patch(layer.id, {
+        src: picked.src,
+        crop: void 0,
+        imageStatus: "ready",
+        uploaded: true
+      });
+      setDockTool(null);
+      return;
+    }
+    const size = picked.width && picked.height ? {
+      width: picked.width,
+      height: picked.height
+    } : null;
+    addLayer(makeImageLayer(picked.src, doc.pageWidth, doc.pageHeight, size));
+  }, [layer, patch, addLayer, doc.pageWidth, doc.pageHeight]);
+  const pickAndPlace = useCallback(async () => {
+    if (!pickImage) return;
+    setBusy("Uploading photo\u2026");
+    try {
+      const picked = await pickImage();
+      if (picked) placePicture(picked);
+    } catch (err) {
+      Alert.alert("Could not add the photo", err instanceof Error ? err.message : "Try again.");
+    } finally {
+      setBusy(null);
+    }
+  }, [pickImage, placePicture]);
+  const setBrandKit = useCallback((kit) => dispatch({
+    type: "patchDoc",
+    patch: {
+      brandKit: kit
+    }
+  }), []);
+  const addLogo = useCallback(async () => {
+    var _a2, _b2;
+    if (!pickImage) return;
+    setBusy("Uploading logo\u2026");
+    try {
+      const picked = await pickImage();
+      if (picked) {
+        const kit = (_b2 = doc.brandKit) != null ? _b2 : {
+          colors: [],
+          fonts: (_a2 = doc.fontPair) != null ? _a2 : {
+            display: "Inter",
+            body: "Inter"
+          },
+          logos: []
+        };
+        setBrandKit(__spreadProps(__spreadValues({}, kit), {
+          logos: [...kit.logos.filter((l) => l !== picked.src), picked.src]
+        }));
+      }
+    } catch (err) {
+      Alert.alert("Could not add the logo", err instanceof Error ? err.message : "Try again.");
+    } finally {
+      setBusy(null);
+    }
+  }, [pickImage, doc.brandKit, doc.fontPair, setBrandKit]);
+  const applyTemplate = useCallback(async (card) => {
+    if (!readTemplate) return;
+    setBusy("Opening template\u2026");
+    let template = null;
+    try {
+      template = await readTemplate(card.id);
+    } catch (e) {
+      template = null;
+    } finally {
+      setBusy(null);
+    }
+    if (!template) {
+      Alert.alert("Template unavailable", "That template could not be opened. Try another.");
+      return;
+    }
+    const t = template;
+    const empty = doc.pages.every((p) => {
+      var _a2, _b2;
+      return !((_a2 = p.layers) == null ? void 0 : _a2.length) && ((_b2 = p.background) == null ? void 0 : _b2.kind) !== "image";
+    });
+    const replace = () => {
+      const next = catalogToDoc(t);
+      save.setKind(catalogKind(t));
+      dispatch({
+        type: "replaceDoc",
+        doc: __spreadProps(__spreadValues(__spreadValues({}, next), doc.title ? {
+          title: doc.title
+        } : {}), {
+          brandKit: doc.brandKit
+        })
+      });
+      setDockTool(null);
+    };
+    const addPages = () => {
+      dispatch({
+        type: "insertPages",
+        afterId: page.id,
+        pages: templatePagesFor(t)
+      });
+      setDockTool(null);
+    };
+    if (empty) {
+      replace();
+      return;
+    }
+    Alert.alert(t.title, "Use this template for the whole design, or add its pages after this one?", [{
+      text: "Add pages",
+      onPress: addPages
+    }, {
+      text: "Replace design",
+      style: "destructive",
+      onPress: replace
+    }, {
+      text: "Cancel",
+      style: "cancel"
+    }]);
+  }, [readTemplate, doc, page.id, save]);
+  const resize = useCallback((size) => {
+    var _a2;
+    return dispatch({
+      type: "patchDoc",
+      patch: {
+        pageWidth: size.width,
+        pageHeight: size.height,
+        aspectRatio: snapAspect(size.width, size.height),
+        print: size.trimMm ? __spreadProps(__spreadValues({}, (_a2 = doc.print) != null ? _a2 : defaultPrintSpec()), {
+          trimMm: size.trimMm
+        }) : void 0
+      }
+    });
+  }, [doc.print]);
+  const hostBytes = useCallback(async (b64, mime, stem) => {
+    if (!uploadFile) return `data:${mime};base64,${b64}`;
+    const ext = mime.includes("jpeg") ? "jpg" : mime.includes("webp") ? "webp" : "png";
+    return uploadFile(await writePngToCache(`${stem}-${Date.now()}.${ext}`, b64));
+  }, [uploadFile]);
+  const paintPage = useCallback(async (pageId) => {
+    var _a2, _b2, _c2, _d2;
+    if (!runCarousel) return;
+    const find = () => stateRef.current.doc.pages.find((p) => p.id === pageId);
+    const start = find();
+    if (!start) return;
+    for (const job of picturesToPaint(start)) {
+      if (!mounted.current) return;
+      const now = find();
+      if (!now) return;
+      const pages = stateRef.current.doc.pages;
+      const at = pages.findIndex((p) => p.id === pageId);
+      const prompt = job.target === "background" ? (_b2 = (_a2 = now.background) == null ? void 0 : _a2.imagePrompt) != null ? _b2 : "" : job.prompt;
+      const mark = (status, src) => {
+        var _a3;
+        const cur = find();
+        if (!cur) return;
+        if (job.target === "background") {
+          dispatch({
+            type: "replacePage",
+            silent: true,
+            page: __spreadProps(__spreadValues({}, cur), {
+              background: __spreadValues(__spreadProps(__spreadValues({}, (_a3 = cur.background) != null ? _a3 : {
+                kind: "image"
+              }), {
+                imageStatus: status
+              }), src ? {
+                src
+              } : {})
+            })
+          });
+        } else {
+          dispatch({
+            type: "patchLayer",
+            silent: true,
+            pageId,
+            layerId: job.layerId,
+            patch: __spreadValues({
+              imageStatus: status
+            }, src ? {
+              src,
+              uploaded: true
+            } : {})
+          });
+        }
+      };
+      mark("generating");
       try {
-        const picked = await onPickLocalMedia();
-        const image = picked.find((p) => p.type === "image");
-        if (image) addAndSelect(newImageLayer(image.src, nextZ(page)));
-        return;
+        const pic = await paintPicture(runCarousel, {
+          prompt,
+          pageIndex: at + 1,
+          totalPages: pages.length,
+          aspectRatio: stateRef.current.doc.aspectRatio
+        });
+        const src = (_d2 = pic.url) != null ? _d2 : await hostBytes((_c2 = pic.dataBase64) != null ? _c2 : "", pic.mimeType, "ai-picture");
+        mark("ready", src);
       } catch (e) {
+        mark("error");
       }
     }
-    setImagePicker(true);
-  }, [onPickLocalMedia, addAndSelect, page]);
-  return /* @__PURE__ */ jsxs(KeyboardAwareScreen, { style: styles.root, testID: "design-editor", children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+  }, [runCarousel, hostBytes]);
+  const onAiCreated = useCallback((pages, design) => {
+    const current = stateRef.current.doc;
+    const empty = current.pages.every((p) => {
+      var _a2, _b2;
+      return !((_a2 = p.layers) == null ? void 0 : _a2.length) && ((_b2 = p.background) == null ? void 0 : _b2.kind) !== "image";
+    });
+    if (empty) {
+      dispatch({
+        type: "patchDoc",
+        patch: {
+          pages,
+          palette: design.palette,
+          fontPair: design.fontPair
+        }
+      });
+      dispatch({
+        type: "select",
+        pageId: pages[0].id,
+        layerId: null
+      });
+    } else {
+      dispatch({
+        type: "insertPages",
+        afterId: page.id,
+        pages
+      });
+    }
+    setDockTool(null);
+    void (async () => {
+      for (const p of pages) await paintPage(p.id);
+    })();
+  }, [page.id, paintPage]);
+  const onAiEdited = useCallback((edited) => {
+    dispatch({
+      type: "replacePage",
+      page: edited
+    });
+    setDockTool(null);
+    void paintPage(edited.id);
+  }, [paintPage]);
+  const addSticker = useCallback((emoji) => addLayer(makeStickerLayer(emoji, doc.pageWidth, doc.pageHeight)), [addLayer, doc.pageWidth, doc.pageHeight]);
+  const applyFrame = useCallback((d) => {
+    if ((layer == null ? void 0 : layer.kind) === "image" && !layer.locked) {
+      patch(layer.id, {
+        clipPath: d
+      });
+      return;
+    }
+    if (!d) return;
+    const w = 0.4;
+    const h = w * doc.pageWidth / doc.pageHeight;
+    const frame = {
+      id: newLayerId(),
+      kind: "image",
+      prompt: "",
+      src: null,
+      imageStatus: "empty",
+      replaceable: true,
+      clipPath: d,
+      x: (1 - w) / 2,
+      y: (1 - h) / 2,
+      w,
+      h
+    };
+    addLayer(frame);
+  }, [layer, patch, addLayer, doc.pageWidth, doc.pageHeight]);
+  const addQr = useCallback(async (text, style) => {
+    if (!capture.current) throw new Error("The QR code could not be drawn.");
+    let matrix;
+    try {
+      matrix = qrMatrix(text);
+    } catch (err) {
+      throw err instanceof Error && /newer version/.test(err.message) ? err : new Error("That is too long for a QR code.");
+    }
+    const side = matrix.size + style.margin * 2;
+    const d = qrPath(matrix, style.margin);
+    const png = await capture.current.captureSvg((svg) => /* @__PURE__ */ jsxs(svg.G, { children: [
+      /* @__PURE__ */ jsx(svg.Rect, { x: 0, y: 0, width: side, height: side, fill: style.background }),
+      /* @__PURE__ */ jsx(svg.Path, { d, fill: style.foreground })
+    ] }), side, side, 1200);
+    const src = await hostBytes(png, "image/png", "qr-code");
+    const w = 0.3;
+    const h = w * doc.pageWidth / doc.pageHeight;
+    addLayer(__spreadProps(__spreadValues({}, makeImageLayer(src, doc.pageWidth, doc.pageHeight, null)), {
+      x: (1 - w) / 2,
+      y: (1 - h) / 2,
+      w,
+      h
+    }));
+  }, [hostBytes, addLayer, doc.pageWidth, doc.pageHeight]);
+  const runExport = useCallback(async (choice) => {
+    const cap = capture.current;
+    if (!cap) return;
+    setExporting("Preparing\u2026");
+    try {
+      const result = await exportDesign({
+        doc,
+        pages: choice.pageIndices.map((i) => doc.pages[i]).filter(Boolean),
+        format: choice.format,
+        scale: choice.scale,
+        capture: (pg, px) => cap.capture(pg, px),
+        onProgress: (label) => mounted.current && setExporting(label)
+      });
+      if (result !== "cancelled" && mounted.current) setExtra(null);
+    } catch (err) {
+      Alert.alert("Could not download", err instanceof Error ? err.message : "Try again.");
+    } finally {
+      if (mounted.current) setExporting(null);
+    }
+  }, [doc]);
+  const openMore = useCallback(() => {
+    setEditingTextId(null);
+    chooseAction("Design", [{
+      id: "export",
+      label: "Download"
+    }, {
+      id: "present",
+      label: "Present"
+    }, {
+      id: "find",
+      label: "Find and replace"
+    }], (id) => {
+      setDockTool(null);
+      setLayerTool(null);
+      if (id === "present") setPresenting(true);
+      else setExtra(id);
+    });
+  }, []);
+  const editing = editingTextId ? (_c = page.layers) == null ? void 0 : _c.find((l) => l.id === editingTextId && l.kind === "text") : void 0;
+  const openTool = useCallback((tool) => {
+    setLayerTool((prev) => prev === tool ? null : tool);
+    setDockTool(null);
+    setExtra(null);
+  }, []);
+  const cropLayer = cropping ? (_d = page.layers) == null ? void 0 : _d.find((l) => l.id === cropping && l.kind === "image") : void 0;
+  const sheet = (() => {
+    var _a2, _b2;
+    if (editing) {
+      return /* @__PURE__ */ jsxs(View, { style: styles.textSheet, children: [
+        /* @__PURE__ */ jsx(TextInput, { value: editing.content, onChangeText: (content) => patch(editing.id, __spreadValues({
+          content
+        }, editing.runs ? {
+          runs: rebaseRuns(editing.content, content, editing.runs)
+        } : {}), `text:${editing.id}`), multiline: true, autoFocus: true, style: styles.textInput, placeholder: "Type your text", placeholderTextColor: theme.edInk3 }),
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => setEditingTextId(null), style: styles.doneButton, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.doneLabel, children: "Done" }) })
+      ] });
+    }
+    if (layerTool) {
+      return /* @__PURE__ */ jsx(EditorSheet, { title: toolTitle(layerTool), onClose: () => setLayerTool(null), height: sheetH, children: /* @__PURE__ */ jsx(LayerToolPanel, { tool: layerTool, doc, page, layer, patch: (p, coalesce) => layer && patch(layer.id, p, coalesce), arrange: (move) => layer && dispatch({
+        type: "reorderLayer",
+        pageId: page.id,
+        layerId: layer.id,
+        move
+      }), setBackground: (background, coalesce) => dispatch({
+        type: "setBackground",
+        pageId: page.id,
+        background,
+        coalesce: coalesce ? `bg:${page.id}` : void 0
+      }) }) });
+    }
+    if (extra) {
+      return /* @__PURE__ */ jsx(EditorSheet, { title: extra === "export" ? "Download" : "Find and replace", onClose: () => setExtra(null), height: sheetH, children: extra === "export" ? /* @__PURE__ */ jsx(ExportSheet, { doc, pageIndex, busy: exporting, onExport: (c) => void runExport(c) }) : /* @__PURE__ */ jsx(FindReplacePanel, { doc, onReveal: (pageId, layerId) => dispatch({
+        type: "select",
+        pageId,
+        layerId
+      }), onReplace: (next) => dispatch({
+        type: "patchDoc",
+        patch: {
+          pages: next.pages
+        }
+      }) }) });
+    }
+    if (dockTool) {
+      const title2 = (_b2 = (_a2 = DOCK_TOOLS.find((t) => t.id === dockTool)) == null ? void 0 : _a2.label) != null ? _b2 : "";
+      return /* @__PURE__ */ jsx(EditorSheet, { title: title2, onClose: () => setDockTool(null), height: sheetH, children: dockTool === "ai" ? /* @__PURE__ */ jsx(AiPanel, { doc, page, pageIndex, run: runCarousel, onCreated: onAiCreated, onEdited: onAiEdited }) : dockTool === "templates" ? /* @__PURE__ */ jsx(TemplatesPanel, { doc, load: loadCatalog, onPick: (card) => void applyTemplate(card), width }) : dockTool === "elements" ? /* @__PURE__ */ jsx(ElementsPanel, { onShape: (shape) => addLayer(makeShapeLayer(shape, doc.palette)), onChart: (chart) => addLayer(makeChartLayer(chart, doc.palette)), onPhoto: pickImage ? () => void pickAndPlace() : void 0, onSticker: addSticker, onFrame: applyFrame, frameCurrent: (layer == null ? void 0 : layer.kind) === "image" ? layer.clipPath : void 0, onQr: addQr }) : dockTool === "text" ? /* @__PURE__ */ jsx(TextPanel, { doc, onTextBox: () => {
+        var _a3;
+        const fonts = (_a3 = doc.brandKit) == null ? void 0 : _a3.fonts;
+        const text = makeTextBox();
+        addLayer(fonts ? __spreadProps(__spreadValues({}, text), {
+          fontFamily: fonts[text.fontToken]
+        }) : text);
+      }, onAdd: (preset) => {
+        var _a3;
+        const fonts = (_a3 = doc.brandKit) == null ? void 0 : _a3.fonts;
+        const text = makeTextLayer(preset);
+        addLayer(fonts ? __spreadProps(__spreadValues({}, text), {
+          fontFamily: fonts[text.fontToken]
+        }) : text);
+      } }) : dockTool === "brand" ? /* @__PURE__ */ jsx(BrandPanel, { doc, onBrandKit: setBrandKit, onPlaceLogo: (src) => placePicture({
+        src
+      }), onAddLogo: pickImage ? () => void addLogo() : void 0 }) : dockTool === "details" ? /* @__PURE__ */ jsx(DetailsPanel, { doc, page, onRename: (title3) => dispatch({
+        type: "patchDoc",
+        patch: {
+          title: title3 || void 0
+        }
+      }), onResize: resize, onPage: (p) => dispatch({
+        type: "patchDoc",
+        patch: {
+          pages: doc.pages.map((pg) => pg.id === page.id ? __spreadValues(__spreadValues({}, pg), p) : pg)
+        }
+      }) }) : /* @__PURE__ */ jsx(AssetsPanel, { doc, width, onUpload: pickImage ? () => void pickAndPlace() : void 0, uploading: Boolean(busy), onPlace: (src) => placePicture({
+        src
+      }), replacing: (layer == null ? void 0 : layer.kind) === "image" }) });
+    }
+    return null;
+  })();
+  const title = designTitle(doc) || "Untitled design";
+  return /* @__PURE__ */ jsxs(KeyboardAvoidingView, { style: [styles.root, {
+    paddingTop: insets.top
+  }], behavior: Platform.OS === "ios" ? "padding" : void 0, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.topBar, children: [
+      /* @__PURE__ */ jsx(Pressable, { onPress: () => void close(), hitSlop: 10, style: styles.topButton, accessibilityRole: "button", accessibilityLabel: "Back", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chevron-left", size: 28, color: theme.edInk }) }),
+      /* @__PURE__ */ jsxs(Pressable, { onPress: () => setDockTool("details"), style: styles.titleWrap, accessibilityRole: "button", accessibilityLabel: "Rename design", children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.title, numberOfLines: 1, children: title }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.status, save.status === "error" && {
+          color: theme.edDanger
+        }], numberOfLines: 1, children: save.status === "error" && save.error ? save.error : statusLabel(save.status) })
+      ] }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: () => dispatch({
+        type: "undo"
+      }), disabled: !state.past.length, hitSlop: 8, style: [styles.topButton, !state.past.length && styles.disabled], accessibilityRole: "button", accessibilityLabel: "Undo", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "undo", size: 22, color: theme.edInk }) }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: () => dispatch({
+        type: "redo"
+      }), disabled: !state.future.length, hitSlop: 8, style: [styles.topButton, !state.future.length && styles.disabled], accessibilityRole: "button", accessibilityLabel: "Redo", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "redo", size: 22, color: theme.edInk }) }),
       /* @__PURE__ */ jsx(Pressable, { onPress: () => {
-        dismissKeyboard();
-        onClose();
-      }, style: ({
-        pressed
-      }) => [styles.headerButton, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Close editor", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 22, color: theme.edInk }) }),
-      doc.pages.length > 1 ? /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.headerMiddleScroll, contentContainerStyle: styles.pageChips, children: doc.pages.map((p, i) => /* @__PURE__ */ jsx(Pressable, { onPress: () => {
-        setPageIndex(i);
-        setSelectedId(null);
-      }, style: [styles.pageChip, i === pageIndex && styles.pageChipActive], children: /* @__PURE__ */ jsx(Text, { style: [styles.pageChipLabel, i === pageIndex && styles.pageChipLabelActive], children: p.name }) }, p.id)) }) : /* @__PURE__ */ jsx(Text, { style: styles.headerTitle, numberOfLines: 1, children: doc.title || "Design" }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: () => onExport(doc), style: ({
-        pressed
-      }) => [styles.headerButton, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Export design", children: /* @__PURE__ */ jsx(View, { style: styles.exportButton, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "check", size: 20, color: theme.primaryForeground }) }) })
+        setEditingTextId(null);
+        setDockTool(null);
+        setLayerTool(null);
+        setExtra("export");
+      }, hitSlop: 8, style: styles.topButton, accessibilityRole: "button", accessibilityLabel: "Download", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "tray-arrow-down", size: 22, color: theme.edInk }) }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: openMore, hitSlop: 8, style: styles.topButton, accessibilityRole: "button", accessibilityLabel: "More", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "dots-horizontal", size: 22, color: theme.edInk }) })
     ] }),
-    /* @__PURE__ */ jsx(View, { style: styles.canvasArea, onLayout: (e) => setCanvasSize(e.nativeEvent.layout), onTouchStart: dismissKeyboard, children: scale > 0 ? /* @__PURE__ */ jsxs(Pressable, { style: [styles.page, {
-      width: page.width * scale,
-      height: page.height * scale,
-      backgroundColor: page.background
-    }], onPress: () => setSelectedId(null), children: [
-      /* @__PURE__ */ jsx(PageChrome, { doc, page, pageIndex, scale }),
-      layerPaintOrder(page.layers).map((layer) => /* @__PURE__ */ jsx(LayerView, { layer, scale, selected: layer.id === selectedId, onSelect: () => setSelectedId(layer.id), onCommit: updateLayer }, layer.id))
-    ] }) : null }),
-    selected ? /* @__PURE__ */ jsxs(View, { style: styles.inspector, children: [
-      /* @__PURE__ */ jsx(IconButton, { name: "flip-to-front", onPress: () => setPage(bringLayerToFront(page, selected.id)) }),
-      /* @__PURE__ */ jsx(IconButton, { name: "flip-to-back", onPress: () => setPage(sendLayerToBack(page, selected.id)) }),
-      /* @__PURE__ */ jsx(IconButton, { name: "content-copy", onPress: () => setPage(duplicateLayer(page, selected.id)) }),
-      /* @__PURE__ */ jsx(View, { style: styles.inspectorSpacer }),
-      /* @__PURE__ */ jsx(Text, { style: styles.inspectorLabel, children: "Opacity" }),
-      /* @__PURE__ */ jsx(IconButton, { name: "minus", onPress: () => updateLayer(__spreadProps(__spreadValues({}, selected), {
-        opacity: Math.max(0.1, +(selected.opacity - 0.1).toFixed(2))
-      })) }),
-      /* @__PURE__ */ jsxs(Text, { style: styles.inspectorValue, children: [
-        Math.round(selected.opacity * 100),
-        "%"
-      ] }),
-      /* @__PURE__ */ jsx(IconButton, { name: "plus", onPress: () => updateLayer(__spreadProps(__spreadValues({}, selected), {
-        opacity: Math.min(1, +(selected.opacity + 0.1).toFixed(2))
-      })) }),
-      /* @__PURE__ */ jsx(View, { style: styles.inspectorSpacer }),
-      /* @__PURE__ */ jsx(IconButton, { name: "trash-can-outline", color: theme.edDanger, onPress: () => {
-        setPage(removeLayer(page, selected.id));
-        setSelectedId(null);
-      } })
-    ] }) : null,
-    /* @__PURE__ */ jsxs(View, { style: styles.dockPanel, children: [
-      dock === "add" ? /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.hScroll, contentContainerStyle: styles.addRow, children: [
-        /* @__PURE__ */ jsx(AddButton, { icon: "format-text", label: "Text", onPress: () => addAndSelect(newTextLayer("Tap to edit", nextZ(page))) }),
-        /* @__PURE__ */ jsx(AddButton, { icon: "square-rounded-outline", label: "Rectangle", onPress: () => addAndSelect(newShapeLayer("rect", nextZ(page))) }),
-        /* @__PURE__ */ jsx(AddButton, { icon: "minus", label: "Line", onPress: () => addAndSelect(newShapeLayer("line", nextZ(page))) }),
-        /* @__PURE__ */ jsx(AddButton, { icon: "image-outline", label: "Image", onPress: () => void handleAddImage() })
-      ] }) : null,
-      dock === "style" && (selected == null ? void 0 : selected.type) === "text" ? /* @__PURE__ */ jsx(TextStylePanel, { layer: selected, onChange: updateLayer }) : null,
-      dock === "style" && (selected == null ? void 0 : selected.type) === "shape" ? /* @__PURE__ */ jsx(SwatchRow, { value: selected.fill, onPick: (fill) => updateLayer(__spreadProps(__spreadValues({}, selected), {
-        fill
-      })) }) : null,
-      dock === "style" && (selected == null ? void 0 : selected.type) === "image" ? /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Drag to move \xB7 corner handle resizes" }) : null,
-      dock === "style" && !selected ? /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Select a layer to style it" }) : null,
-      dock === "page" ? /* @__PURE__ */ jsxs(View, { children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.panelLabel, children: doc.kind === "tshirt" ? "Shirt colour" : "Page background" }),
-        /* @__PURE__ */ jsx(SwatchRow, { swatches: doc.kind === "tshirt" ? TSHIRT_COLORS : DESIGN_SWATCHES, value: page.background, onPick: (background) => setPage(__spreadProps(__spreadValues({}, page), {
-          background
-        })) })
-      ] }) : null,
-      dock === "layers" ? /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.hScroll, contentContainerStyle: styles.addRow, children: [
-        layerPaintOrder(page.layers).slice().reverse().map((layer) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => setSelectedId(layer.id), style: [styles.layerChip, layer.id === selectedId && styles.layerChipActive], children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: layer.type === "text" ? "format-text" : layer.type === "image" ? "image-outline" : "square-rounded-outline", size: 14, color: layer.id === selectedId ? theme.edOnInk : theme.edInk2 }),
-          /* @__PURE__ */ jsx(Text, { style: [styles.layerChipLabel, layer.id === selectedId && styles.layerChipLabelActive], numberOfLines: 1, children: layer.type === "text" ? layer.text.slice(0, 14) || "Text" : layer.type })
-        ] }, layer.id)),
-        page.layers.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "No layers yet" }) : null
+    /* @__PURE__ */ jsxs(View, { style: styles.canvasArea, children: [
+      /* @__PURE__ */ jsx(DesignCanvas, { doc, page, selectedId: state.layerId, editingId: editingTextId, onSelect: select, onPatch: (layerId, p, coalesce) => patch(layerId, p, coalesce), onEditText: (layerId) => {
+        setEditingTextId(layerId);
+        setLayerTool(null);
+        setDockTool(null);
+      } }),
+      cropLayer ? /* @__PURE__ */ jsx(CropOverlay, { doc, layer: cropLayer, onCancel: () => setCropping(null), onDone: (p) => {
+        patch(cropLayer.id, p);
+        setCropping(null);
+      } }) : null,
+      /* @__PURE__ */ jsx(PageCapture, { ref: capture, doc }),
+      busy ? /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles.busy, children: [
+        /* @__PURE__ */ jsx(ActivityIndicator, { color: "#fff" }),
+        /* @__PURE__ */ jsx(Text, { style: styles.busyLabel, children: busy })
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsx(View, { style: styles.dock, children: [["add", "plus-box-outline", "Add"], ["style", "palette-outline", "Style"], ["page", "file-outline", "Page"], ["layers", "layers-outline", "Layers"]].map(([tab, icon, label]) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => setDock(tab), style: styles.dockTab, accessibilityRole: "tab", children: [
-      /* @__PURE__ */ jsx(View, { style: [styles.dockPill, dock === tab && styles.dockPillActive], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 22, color: dock === tab ? theme.edInk : theme.edInk3 }) }),
-      /* @__PURE__ */ jsx(Text, { style: [styles.dockLabel, dock === tab && styles.dockLabelActive], children: label })
-    ] }, tab)) }),
-    imagePicker ? /* @__PURE__ */ jsx(View, { style: styles.pickerOverlay, children: /* @__PURE__ */ jsxs(View, { style: styles.pickerCard, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.pickerHead, children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.pickerTitle, children: "Add an image" }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: () => setImagePicker(false), style: ({
-          pressed
-        }) => [styles.pickerDismiss, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: styles.pickerDismissLabel, children: "Cancel" }) })
-      ] }),
-      /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: canvasImages.length ? "From your canvases:" : onPickLocalMedia ? "No images on your canvases yet." : "Photo library needs an app update - images from your canvases work now." }),
-      /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.hScroll, contentContainerStyle: styles.pickerRow, children: canvasImages.map((src) => /* @__PURE__ */ jsx(Pressable, { onPress: () => {
-        setImagePicker(false);
-        addAndSelect(newImageLayer(src, nextZ(page)));
-      }, children: /* @__PURE__ */ jsx(Image, { source: {
-        uri: src
-      }, style: styles.pickerThumb, contentFit: "cover" }) }, src)) })
-    ] }) }) : null,
-    /* @__PURE__ */ jsx(KeyboardLiftSpacer, {})
-  ] });
-}
-function PageChrome({
-  doc,
-  page,
-  pageIndex,
-  scale
-}) {
-  const styles = makeStyles(useCanvasTheme());
-  if (doc.kind === "tshirt") {
-    const area = TSHIRT_PRINT_AREA;
-    return /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: StyleSheet.absoluteFill, children: [
-      /* @__PURE__ */ jsx(View, { style: [styles.tshirtNeck, {
-        left: page.width * scale * 0.38,
-        width: page.width * scale * 0.24,
-        height: page.height * scale * 0.055,
-        borderRadius: page.width * scale * 0.12
-      }] }),
-      /* @__PURE__ */ jsx(View, { style: [styles.printArea, {
-        left: page.width * area.x * scale,
-        top: page.height * area.y * scale,
-        width: page.width * area.width * scale,
-        height: page.height * area.height * scale
-      }] }),
-      /* @__PURE__ */ jsx(Text, { style: [styles.chromeHint, {
-        top: page.height * (area.y + area.height) * scale + 6
-      }], children: "Print area" })
-    ] });
-  }
-  if (doc.kind === "postcard" && pageIndex === 1) {
-    const w = page.width * scale;
-    const h = page.height * scale;
-    return /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: StyleSheet.absoluteFill, children: [
-      /* @__PURE__ */ jsx(View, { style: [styles.postDivider, {
-        left: w * 0.55,
-        top: h * 0.12,
-        height: h * 0.76
-      }] }),
-      [0.3, 0.45, 0.6].map((frac) => /* @__PURE__ */ jsx(View, { style: [styles.postAddressLine, {
-        left: w * 0.62,
-        right: w * 0.06,
-        top: h * frac
-      }] }, frac)),
-      /* @__PURE__ */ jsx(View, { style: [styles.postStamp, {
-        right: w * 0.06,
-        top: h * 0.08,
-        width: w * 0.1,
-        height: w * 0.12
-      }] })
-    ] });
-  }
-  return null;
-}
-function LayerView({
-  layer,
-  scale,
-  selected,
-  onSelect,
-  onCommit
-}) {
-  const theme = useCanvasTheme();
-  const styles = makeStyles(theme);
-  const [live, setLive] = useState(null);
-  const gestureBase = useRef({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0
-  });
-  const liveRef = useRef(null);
-  const setLiveBoth = (f) => {
-    liveRef.current = f;
-    setLive(f);
-  };
-  const current = useRef({
-    layer,
-    scale,
-    onSelect,
-    onCommit
-  });
-  current.current = {
-    layer,
-    scale,
-    onSelect,
-    onCommit
-  };
-  const commitLive = () => {
-    if (liveRef.current) current.current.onCommit(__spreadValues(__spreadValues({}, current.current.layer), liveRef.current));
-    setLiveBoth(null);
-  };
-  const grabFrame = () => {
-    const l = current.current.layer;
-    gestureBase.current = {
-      x: l.x,
-      y: l.y,
-      width: l.width,
-      height: l.height
-    };
-  };
-  const drag = useRef(PanResponder.create({
-    onStartShouldSetPanResponder: () => true,
-    onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dx) + Math.abs(g.dy) > 4,
-    onPanResponderGrant: () => {
-      current.current.onSelect();
-      grabFrame();
-    },
-    onPanResponderMove: (_e, g) => {
-      const b = gestureBase.current;
-      const s = current.current.scale;
-      setLiveBoth(__spreadProps(__spreadValues({}, b), {
-        x: b.x + g.dx / s,
-        y: b.y + g.dy / s
-      }));
-    },
-    onPanResponderRelease: commitLive,
-    onPanResponderTerminate: () => setLiveBoth(null)
-  }));
-  const resize = useRef(PanResponder.create({
-    onStartShouldSetPanResponder: () => true,
-    onPanResponderGrant: grabFrame,
-    onPanResponderMove: (_e, g) => {
-      const s = current.current.scale;
-      setLiveBoth(resizeFrame(gestureBase.current, "br", g.dx / s, g.dy / s));
-    },
-    onPanResponderRelease: commitLive,
-    onPanResponderTerminate: () => setLiveBoth(null)
-  }));
-  const frame = live != null ? live : layer;
-  const box = {
-    left: frame.x * scale,
-    top: frame.y * scale,
-    width: frame.width * scale,
-    height: frame.height * scale,
-    opacity: layer.opacity
-  };
-  return /* @__PURE__ */ jsxs(View, __spreadProps(__spreadValues({ style: [styles.layer, box] }, selected ? drag.current.panHandlers : {}), { children: [
-    layer.type === "image" ? /* @__PURE__ */ jsx(Image, { source: {
-      uri: layer.src
-    }, style: StyleSheet.absoluteFill, contentFit: "fill" }) : layer.type === "shape" ? /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, {
-      backgroundColor: layer.fill,
-      borderRadius: layer.cornerRadius * scale
-    }] }) : /* @__PURE__ */ jsx(Text, { style: {
-      fontSize: layer.fontSize * scale,
-      color: layer.color,
-      fontWeight: layer.bold ? "700" : "400",
-      textAlign: layer.align,
-      width: "100%"
-    }, numberOfLines: 0, children: layer.text }),
-    !selected ? /* @__PURE__ */ jsx(Pressable, { style: StyleSheet.absoluteFill, onPress: onSelect }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.selection }),
-      /* @__PURE__ */ jsx(View, __spreadProps(__spreadValues({ style: styles.handle }, resize.current.panHandlers), { children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-expand", size: 11, color: "#ffffff" }) }))
+    presenting ? /* @__PURE__ */ jsx(Slideshow, { doc, startIndex: pageIndex, onClose: () => setPresenting(false) }) : null,
+    cropLayer ? /* @__PURE__ */ jsx(View, { style: {
+      height: insets.bottom
+    } }) : sheet ? /* @__PURE__ */ jsx(View, { style: {
+      height: editing ? void 0 : sheetH
+    }, children: sheet }) : /* @__PURE__ */ jsxs(View, { style: {
+      paddingBottom: insets.bottom
+    }, children: [
+      /* @__PURE__ */ jsx(SelectionToolbar, { doc, page, layer, tool: layerTool, layerActions: {
+        patch: (p, coalesce) => layer && patch(layer.id, p, coalesce),
+        duplicate: () => layer && dispatch({
+          type: "duplicateLayer",
+          pageId: page.id,
+          layerId: layer.id
+        }),
+        remove: () => layer && dispatch({
+          type: "deleteLayer",
+          pageId: page.id,
+          layerId: layer.id
+        }),
+        arrange: (move) => layer && dispatch({
+          type: "reorderLayer",
+          pageId: page.id,
+          layerId: layer.id,
+          move
+        }),
+        editText: () => layer && setEditingTextId(layer.id),
+        replaceImage: () => pickImage ? void pickAndPlace() : setDockTool("assets"),
+        openTool,
+        crop: () => {
+          if ((layer == null ? void 0 : layer.kind) === "image" && layer.src) {
+            setLayerTool(null);
+            setCropping(layer.id);
+          }
+        }
+      }, pageActions: {
+        openTool,
+        addPage: () => dispatch({
+          type: "addPage",
+          afterId: page.id
+        }),
+        duplicatePage: () => dispatch({
+          type: "duplicatePage",
+          pageId: page.id
+        }),
+        deletePage: () => dispatch({
+          type: "deletePage",
+          pageId: page.id
+        })
+      } }),
+      /* @__PURE__ */ jsx(PageStrip, { doc, pageId: page.id, onSelect: (pageId) => {
+        dispatch({
+          type: "select",
+          pageId,
+          layerId: null
+        });
+        setLayerTool(null);
+      }, onAdd: () => dispatch({
+        type: "addPage",
+        afterId: page.id
+      }), onAction: (pageId, action) => {
+        if (action === "duplicate") dispatch({
+          type: "duplicatePage",
+          pageId
+        });
+        else if (action === "delete") dispatch({
+          type: "deletePage",
+          pageId
+        });
+        else dispatch({
+          type: "movePage",
+          pageId,
+          dir: action === "left" ? -1 : 1
+        });
+      }, onMove: (pageId, to) => dispatch({
+        type: "movePageTo",
+        pageId,
+        index: to
+      }) }),
+      /* @__PURE__ */ jsx(View, { style: styles.dock, children: DOCK_TOOLS.map((tool) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+        setDockTool(tool.id);
+        setLayerTool(null);
+        setExtra(null);
+      }, style: styles.dockItem, accessibilityRole: "button", accessibilityLabel: tool.label, children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: tool.icon, size: 22, color: theme.edInk2 }),
+        /* @__PURE__ */ jsx(Text, { style: styles.dockLabel, children: tool.label })
+      ] }, tool.id)) })
     ] })
-  ] }));
-}
-function TextStylePanel({
-  layer,
-  onChange
-}) {
-  const theme = useCanvasTheme();
-  const styles = makeStyles(theme);
-  return /* @__PURE__ */ jsxs(View, { children: [
-    /* @__PURE__ */ jsx(TextInput, { style: styles.textInput, value: layer.text, onChangeText: (text) => onChange(__spreadProps(__spreadValues({}, layer), {
-      text
-    })), placeholder: "Your text", placeholderTextColor: theme.edInk3, multiline: true }),
-    /* @__PURE__ */ jsxs(View, { style: styles.textControls, children: [
-      /* @__PURE__ */ jsx(IconButton, { name: "format-font-size-decrease", onPress: () => onChange(__spreadProps(__spreadValues({}, layer), {
-        fontSize: Math.max(16, layer.fontSize - 8)
-      })) }),
-      /* @__PURE__ */ jsx(Text, { style: styles.inspectorValue, children: layer.fontSize }),
-      /* @__PURE__ */ jsx(IconButton, { name: "format-font-size-increase", onPress: () => onChange(__spreadProps(__spreadValues({}, layer), {
-        fontSize: Math.min(400, layer.fontSize + 8)
-      })) }),
-      /* @__PURE__ */ jsx(IconButton, { name: "format-bold", active: layer.bold, onPress: () => onChange(__spreadProps(__spreadValues({}, layer), {
-        bold: !layer.bold
-      })) }),
-      ["left", "center", "right"].map((align) => /* @__PURE__ */ jsx(IconButton, { name: `format-align-${align}`, active: layer.align === align, onPress: () => onChange(__spreadProps(__spreadValues({}, layer), {
-        align
-      })) }, align))
-    ] }),
-    /* @__PURE__ */ jsx(SwatchRow, { value: layer.color, onPick: (color) => onChange(__spreadProps(__spreadValues({}, layer), {
-      color
-    })) })
   ] });
 }
-function SwatchRow({
-  swatches = DESIGN_SWATCHES,
-  value,
-  onPick
-}) {
-  const styles = makeStyles(useCanvasTheme());
-  return /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.hScroll, contentContainerStyle: styles.swatchRow, children: swatches.map((color) => /* @__PURE__ */ jsx(Pressable, { onPress: () => onPick(color), style: [styles.swatch, {
-    backgroundColor: color
-  }, value === color && styles.swatchActive], accessibilityRole: "button", accessibilityLabel: `Colour ${color}` }, color)) });
-}
-function AddButton({
-  icon,
-  label,
-  onPress
-}) {
-  const theme = useCanvasTheme();
-  const styles = makeStyles(theme);
-  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: ({
-    pressed
-  }) => [styles.addButton, pressedStyle(pressed)], accessibilityRole: "button", children: [
-    /* @__PURE__ */ jsx(View, { style: styles.addIcon, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 22, color: theme.edInk }) }),
-    /* @__PURE__ */ jsx(Text, { style: styles.addButtonLabel, children: label })
-  ] });
-}
-function IconButton({
-  name,
-  color,
-  active,
-  onPress
-}) {
-  const theme = useCanvasTheme();
-  const styles = makeStyles(theme);
-  const ink = color != null ? color : active === false ? theme.edInk3 : theme.edInk2;
-  return /* @__PURE__ */ jsx(Pressable, { onPress, hitSlop: 4, style: ({
-    pressed
-  }) => [styles.iconButton, active && styles.iconButtonActive, pressedStyle(pressed)], accessibilityRole: "button", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name, size: 20, color: active ? theme.edInk : ink }) });
-}
-const STAGE = "#0c0c0f";
 const makeStyles = themedStyles((theme) => StyleSheet.create({
   root: {
     flex: 1,
     backgroundColor: theme.edBg
   },
-  header: {
+  topBar: {
     flexDirection: "row",
     alignItems: "center",
-    gap: SPACE.sm,
-    minHeight: 56,
+    gap: SPACE.xs,
     paddingHorizontal: SPACE.sm,
-    backgroundColor: theme.edPanel,
+    // The shared studio and editor bar: 44pt on phones, 36pt controls.
+    height: 44,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: theme.edLine
+    borderColor: theme.edLine,
+    backgroundColor: theme.edPanel
   },
-  headerButton: {
-    width: HIT,
-    height: HIT,
-    borderRadius: HIT / 2,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  headerTitle: __spreadProps(__spreadValues({}, TYPE.title), {
-    flex: 1,
-    textAlign: "center",
-    color: theme.edInk
-  }),
-  headerMiddleScroll: {
-    flexGrow: 0,
-    flexShrink: 1,
-    marginHorizontal: "auto"
-  },
-  exportButton: {
+  topButton: {
     width: 36,
     height: 36,
-    borderRadius: 18,
-    backgroundColor: theme.primary,
     alignItems: "center",
     justifyContent: "center"
   },
-  pageChips: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: SPACE.xs + 2
-  },
-  pageChip: {
-    minHeight: 32,
-    paddingHorizontal: SPACE.md + 2,
-    borderRadius: RADIUS.pill,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: theme.edRaised
+  disabled: {
+    opacity: 0.3
   },
-  pageChipActive: {
-    backgroundColor: theme.edInk
+  titleWrap: {
+    flex: 1,
+    paddingHorizontal: SPACE.xs
   },
-  pageChipLabel: __spreadProps(__spreadValues({}, TYPE.label), {
-    color: theme.edInk2
+  title: __spreadProps(__spreadValues({}, TYPE.title), {
+    color: theme.edInk
+  }),
+  status: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk3
   }),
-  pageChipLabelActive: {
-    color: theme.edOnInk
-  },
   canvasArea: {
     flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: STAGE
-  },
-  page: {
-    borderRadius: 4,
-    overflow: "hidden"
+    backgroundColor: theme.edWell
   },
-  layer: {
-    position: "absolute"
-  },
-  selection: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
-    borderWidth: 1.5,
-    borderColor: theme.info,
-    borderRadius: 2
-  }),
-  handle: {
-    position: "absolute",
-    right: -12,
-    bottom: -12,
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    backgroundColor: theme.info,
-    borderWidth: 2,
-    borderColor: "#ffffff",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  // Guides draw on the design's own page colour, so their ink is fixed, not themed.
-  printArea: {
-    position: "absolute",
-    borderWidth: 1.5,
-    borderStyle: "dashed",
-    borderColor: "rgba(148,148,160,0.9)",
-    borderRadius: 6
-  },
-  tshirtNeck: {
-    position: "absolute",
-    top: 0,
-    borderBottomWidth: 2,
-    borderColor: "rgba(148,148,160,0.6)"
-  },
-  chromeHint: {
+  busy: {
     position: "absolute",
     alignSelf: "center",
-    fontSize: 11,
-    fontWeight: "600",
-    color: "rgba(148,148,160,0.95)"
-  },
-  postDivider: {
-    position: "absolute",
-    width: 1.5,
-    backgroundColor: "rgba(20,20,20,0.22)"
-  },
-  postAddressLine: {
-    position: "absolute",
-    height: 1.5,
-    backgroundColor: "rgba(20,20,20,0.16)"
-  },
-  postStamp: {
-    position: "absolute",
-    borderWidth: 1.5,
-    borderStyle: "dashed",
-    borderColor: "rgba(20,20,20,0.22)",
-    borderRadius: 4
-  },
-  inspector: {
+    top: SPACE.lg,
     flexDirection: "row",
     alignItems: "center",
-    gap: SPACE.xs,
-    paddingHorizontal: SPACE.sm,
-    paddingVertical: SPACE.xs,
-    backgroundColor: theme.edPanel,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: theme.edLine
-  },
-  inspectorSpacer: {
-    flex: 1
-  },
-  inspectorLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
-    color: theme.edInk3
-  }),
-  inspectorValue: __spreadProps(__spreadValues({}, TYPE.label), {
-    color: theme.edInk,
-    minWidth: 40,
-    textAlign: "center",
-    fontVariant: ["tabular-nums"]
-  }),
-  iconButton: {
-    width: 40,
-    height: 40,
-    borderRadius: RADIUS.pill,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  iconButtonActive: {
-    backgroundColor: theme.edRaisedHi
-  },
-  dockPanel: {
-    minHeight: 84,
-    justifyContent: "center",
+    gap: SPACE.sm,
     paddingHorizontal: SPACE.lg,
-    paddingVertical: SPACE.md,
-    backgroundColor: theme.edPanel,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: theme.edLine
-  },
-  hScroll: {
-    flexGrow: 0
-  },
-  addRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: SPACE.md
-  },
-  addButton: {
-    alignItems: "center",
-    gap: SPACE.xs + 2,
-    minWidth: 64
-  },
-  addIcon: {
-    width: 48,
-    height: 48,
-    borderRadius: RADIUS.md,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: theme.edRaised
-  },
-  addButtonLabel: {
-    fontSize: 11,
-    lineHeight: 14,
-    fontWeight: "500",
-    color: theme.edInk2
-  },
-  panelHint: __spreadProps(__spreadValues({}, TYPE.caption), {
-    color: theme.edInk3,
-    paddingVertical: SPACE.sm
-  }),
-  panelLabel: __spreadProps(__spreadValues({}, TYPE.label), {
-    color: theme.edInk2,
-    marginBottom: SPACE.sm
-  }),
-  swatchRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: SPACE.md,
-    paddingVertical: SPACE.xs + 2
-  },
-  swatch: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    borderWidth: 1,
-    borderColor: theme.edLineHi
-  },
-  swatchActive: {
-    borderWidth: 3,
-    borderColor: theme.edInk
-  },
-  textInput: {
-    backgroundColor: theme.edRaised,
-    borderRadius: RADIUS.md,
-    paddingHorizontal: SPACE.md,
-    paddingVertical: SPACE.sm + 2,
-    color: theme.edInk,
-    fontSize: 15,
-    maxHeight: 84
-  },
-  textControls: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: SPACE.xs,
-    marginTop: SPACE.sm
-  },
-  layerChip: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: SPACE.xs + 2,
-    minHeight: 36,
-    paddingHorizontal: SPACE.md,
+    paddingVertical: SPACE.sm,
     borderRadius: RADIUS.pill,
-    backgroundColor: theme.edRaised
+    backgroundColor: "rgba(15,23,42,0.86)"
   },
-  layerChipActive: {
-    backgroundColor: theme.edInk
-  },
-  layerChipLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
-    color: theme.edInk2,
-    maxWidth: 110
+  busyLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: "#fff"
   }),
-  layerChipLabelActive: {
-    color: theme.edOnInk,
-    fontWeight: "600"
-  },
   dock: {
     flexDirection: "row",
-    justifyContent: "space-around",
-    paddingTop: SPACE.sm,
-    paddingBottom: SPACE.sm,
-    backgroundColor: theme.edPanel,
+    height: DOCK_H,
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: theme.edLine
-  },
-  dockTab: {
-    alignItems: "center",
-    gap: 2,
-    minWidth: 64,
-    minHeight: HIT
+    borderColor: theme.edLine,
+    backgroundColor: theme.edPanel
   },
-  dockPill: {
-    width: 56,
-    height: 30,
-    borderRadius: RADIUS.pill,
+  dockItem: {
+    flex: 1,
     alignItems: "center",
-    justifyContent: "center"
-  },
-  dockPillActive: {
-    backgroundColor: theme.edRaisedHi
-  },
-  dockLabel: {
-    fontSize: 11,
-    lineHeight: 14,
-    fontWeight: "500",
-    color: theme.edInk3
-  },
-  dockLabelActive: {
-    color: theme.edInk,
-    fontWeight: "600"
+    justifyContent: "center",
+    gap: 2
   },
-  pickerOverlay: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
-    backgroundColor: "rgba(0,0,0,0.5)",
-    justifyContent: "flex-end"
+  dockLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    fontSize: 10,
+    color: theme.edInk2
   }),
-  pickerCard: {
-    width: "100%",
-    backgroundColor: theme.edPanel,
-    borderTopLeftRadius: RADIUS.xl,
-    borderTopRightRadius: RADIUS.xl,
-    paddingHorizontal: SPACE.lg,
-    paddingTop: SPACE.xs,
-    paddingBottom: SPACE.xl,
-    gap: SPACE.xs
-  },
-  pickerHead: {
+  textSheet: {
     flexDirection: "row",
-    alignItems: "center",
-    minHeight: 52,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: theme.edLine,
-    marginBottom: SPACE.xs
+    alignItems: "flex-end",
+    gap: SPACE.sm,
+    padding: SPACE.md,
+    backgroundColor: theme.edPanel,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.edLine
   },
-  pickerTitle: __spreadProps(__spreadValues({}, TYPE.title), {
+  textInput: __spreadValues({
     flex: 1,
-    color: theme.edInk
-  }),
-  pickerRow: {
-    flexDirection: "row",
-    gap: SPACE.sm + 2,
-    paddingVertical: SPACE.sm
-  },
-  pickerThumb: {
-    width: 88,
-    height: 88,
+    minHeight: 44,
+    maxHeight: 140,
     borderRadius: RADIUS.md,
-    backgroundColor: theme.edRaised
-  },
-  pickerDismiss: {
-    minHeight: HIT,
     paddingHorizontal: SPACE.md,
+    paddingTop: SPACE.sm,
+    paddingBottom: SPACE.sm,
+    backgroundColor: theme.edRaised,
+    color: theme.edInk
+  }, TYPE.body),
+  doneButton: {
+    height: 44,
+    paddingHorizontal: SPACE.lg,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edAccent,
     alignItems: "center",
     justifyContent: "center"
   },
-  pickerDismissLabel: __spreadProps(__spreadValues({}, TYPE.label), {
-    fontSize: 15,
-    color: theme.edInk2
+  doneLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edOnInk
   })
 }));export{DesignEditorExperience};//# sourceMappingURL=DesignEditorExperience.js.map