@adminide-stack/yantra-mobile 12.0.69-alpha.9 → 12.0.69

package/lib/features/canvas/NativeCanvasViewer.js

@@ -0,0 +1,929 @@
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import React__default,{useState,useEffect,useRef,useMemo,useCallback}from'react';import {StyleSheet,useWindowDimensions,View,Text,Share,TextInput}from'react-native';import {Gesture,GestureHandlerRootView,Pressable,GestureDetector}from'react-native-gesture-handler';import Animated,{useSharedValue,useAnimatedReaction,runOnJS,useAnimatedStyle}from'react-native-reanimated';import {Image}from'expo-image';import {MaterialCommunityIcons}from'@expo/vector-icons';import {getVideoItemRenderer}from'./videoRenderer.js';import {spreadStackedItems,coerceUploadSizedItem,paintOrder,applyItemFrame,MAX_ZOOM,MIN_ZOOM,removeItem,boardBounds,resizeFrame}from'./canvasCore.js';import {CanvasAgentChatPane}from'./CanvasAgentChatPane.js';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
+const HANDLE_SLOP = 12;
+const SELECTION_COLOR = "#3b82f6";
+function MediaGlyph({
+  item
+}) {
+  return /* @__PURE__ */ jsxs(View, { style: [StyleSheet.absoluteFill, styles.mediaTile], accessibilityLabel: `Canvas ${item.type}`, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.mediaTileGlyph, children: item.type === "video" ? "\u25B6" : "\u266A" }),
+    item.generatedAssetName ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.mediaTileLabel, children: item.generatedAssetName }) : null
+  ] });
+}
+class VideoRenderIsland extends React__default.Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", {
+      failed: false
+    });
+  }
+  static getDerivedStateFromError() {
+    return {
+      failed: true
+    };
+  }
+  componentDidCatch(error) {
+    if (__DEV__) {
+      console.warn("[NativeCanvasViewer] video renderer failed, using glyph:", error);
+    }
+  }
+  render() {
+    return this.state.failed ? this.props.fallback : this.props.children;
+  }
+}
+function ItemContent({
+  item
+}) {
+  var _a;
+  if (item.type === "image") {
+    return /* @__PURE__ */ jsx(Image, { source: {
+      uri: item.src
+    }, style: [StyleSheet.absoluteFill, styles.itemImage], contentFit: "cover", transition: 120, accessibilityLabel: (_a = item.generatedAssetName) != null ? _a : "Canvas image" });
+  }
+  const VideoRenderer = item.type === "video" ? getVideoItemRenderer() : null;
+  if (VideoRenderer) {
+    return /* @__PURE__ */ jsx(VideoRenderIsland, { fallback: /* @__PURE__ */ jsx(MediaGlyph, { item }), children: /* @__PURE__ */ jsx(VideoRenderer, { item }) });
+  }
+  return /* @__PURE__ */ jsx(MediaGlyph, { item });
+}
+function StaticItem({
+  item,
+  onTap
+}) {
+  const tap = Gesture.Tap().runOnJS(true).blocksExternalGesture().onEnd(() => onTap(item));
+  return /* @__PURE__ */ jsx(GestureDetector, { gesture: tap, children: /* @__PURE__ */ jsx(View, { style: {
+    position: "absolute",
+    left: item.x,
+    top: item.y,
+    width: item.width,
+    height: item.height,
+    zIndex: item.zIndex,
+    overflow: "hidden",
+    borderRadius: 8
+  }, children: /* @__PURE__ */ jsx(ItemContent, { item }) }) });
+}
+const CORNERS = ["tl", "tr", "bl", "br"];
+function ItemHoverToolbar({
+  item,
+  onAction,
+  onRemove,
+  onChromeTouch
+}) {
+  const [moreOpen, setMoreOpen] = useState(false);
+  const [promptOpen, setPromptOpen] = useState(false);
+  const [prompt, setPrompt] = useState("");
+  const download = useCallback(() => {
+    setMoreOpen(false);
+    void Share.share({
+      url: item.src,
+      message: item.src
+    }).catch(() => void 0);
+  }, [item.src]);
+  const stealTouches = useMemo(() => Gesture.Native().blocksExternalGesture(), []);
+  return /* @__PURE__ */ jsx(View, { style: styles.hoverWrap, pointerEvents: "box-none", children: /* @__PURE__ */ jsx(GestureDetector, { gesture: stealTouches, children: /* @__PURE__ */ jsxs(View, { style: styles.hoverCluster, pointerEvents: "auto", onTouchStart: onChromeTouch, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.hoverBar, children: [
+      /* @__PURE__ */ jsx(View, { style: styles.hoverActions, children: /* @__PURE__ */ jsxs(View, { style: styles.hoverActionsInner, children: [
+        item.type === "image" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+            setMoreOpen(false);
+            setPromptOpen((v) => !v);
+          }, style: styles.hoverBtn, accessibilityRole: "button", children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "pencil-outline", size: 20, color: "#64748b" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.hoverLabel, numberOfLines: 1, children: "Edit Image" })
+          ] }),
+          /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+            setMoreOpen(false);
+            setPromptOpen(false);
+            onAction == null ? void 0 : onAction("edit-image", item);
+          }, style: styles.hoverBtn, accessibilityRole: "button", children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "content-cut", size: 20, color: "#64748b" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.hoverLabel, children: "Editor" })
+          ] }),
+          /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+            setMoreOpen(false);
+            setPromptOpen(false);
+            onAction == null ? void 0 : onAction("mark-edit", item);
+          }, style: styles.hoverBtn, accessibilityRole: "button", children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "marker", size: 20, color: "#64748b" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.hoverLabel, children: "Mark & edit" })
+          ] })
+        ] }) : null,
+        item.type === "video" ? /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+          setMoreOpen(false);
+          onAction == null ? void 0 : onAction("edit-video", item);
+        }, style: styles.hoverBtn, accessibilityRole: "button", children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "content-cut", size: 20, color: "#64748b" }),
+          /* @__PURE__ */ jsx(Text, { style: styles.hoverLabel, children: "Edit Video" })
+        ] }) : null,
+        item.type === "audio" ? /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+          setMoreOpen(false);
+          onAction == null ? void 0 : onAction("edit-audio", item);
+        }, style: styles.hoverBtn, accessibilityRole: "button", children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "content-cut", size: 20, color: "#64748b" }),
+          /* @__PURE__ */ jsx(Text, { style: styles.hoverLabel, children: "Edit Audio" })
+        ] }) : null,
+        /* @__PURE__ */ jsx(View, { style: styles.hoverDivider }),
+        /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+          setMoreOpen(false);
+          onAction == null ? void 0 : onAction("create-video", item);
+        }, style: styles.hoverBtn, accessibilityRole: "button", children: [
+          /* @__PURE__ */ jsxs(View, { children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "video-outline", size: 20, color: "#64748b" }),
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "star-four-points", size: 8, color: "#94a3b8", style: styles.hoverSparkle })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { style: styles.hoverLabel, children: "Create Video" })
+        ] }),
+        item.type === "video" ? /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+          setMoreOpen(false);
+          onAction == null ? void 0 : onAction("restyle-video", item);
+        }, style: styles.hoverBtn, accessibilityRole: "button", children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "auto-fix", size: 20, color: "#64748b" }),
+          /* @__PURE__ */ jsx(Text, { style: styles.hoverLabel, children: "Restyle" })
+        ] }) : null,
+        item.type === "image" || item.type === "video" ? /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+          setMoreOpen(false);
+          onAction == null ? void 0 : onAction("promo-video", item);
+        }, style: styles.hoverBtn, accessibilityRole: "button", children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "bullhorn-outline", size: 20, color: "#64748b" }),
+          /* @__PURE__ */ jsx(Text, { style: styles.hoverLabel, children: "Promo" })
+        ] }) : null,
+        item.type === "video" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(View, { style: styles.hoverDivider }),
+          /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+            setMoreOpen(false);
+            onAction == null ? void 0 : onAction("trim-video", item);
+          }, style: styles.hoverBtn, accessibilityRole: "button", children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "movie-open-outline", size: 20, color: "#64748b" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.hoverLabel, children: "Clips" })
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsx(View, { style: styles.hoverDivider }),
+        /* @__PURE__ */ jsx(Pressable, { onPress: download, style: styles.hoverIconBtn, accessibilityRole: "button", accessibilityLabel: "Download", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "download-outline", size: 20, color: "#94a3b8" }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(View, { style: styles.hoverDivider }),
+      /* @__PURE__ */ jsxs(View, { style: styles.moreWrap, children: [
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+          setPromptOpen(false);
+          setMoreOpen((v) => !v);
+        }, style: styles.hoverIconBtn, accessibilityRole: "button", accessibilityLabel: "More", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "dots-vertical", size: 20, color: "#94a3b8" }) }),
+        moreOpen ? /* @__PURE__ */ jsxs(View, { style: styles.moreMenu, children: [
+          /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+            setMoreOpen(false);
+            onRemove();
+          }, style: styles.moreRow, accessibilityRole: "button", children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "trash-can-outline", size: 20, color: "#64748b" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.moreLabel, children: "Remove" })
+          ] }),
+          /* @__PURE__ */ jsxs(Pressable, { onPress: download, style: styles.moreRow, accessibilityRole: "button", children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "download-outline", size: 20, color: "#64748b" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.moreLabel, children: "Download" })
+          ] })
+        ] }) : null
+      ] })
+    ] }),
+    promptOpen && item.type === "image" ? /* @__PURE__ */ jsx(View, { style: styles.editPrompt, children: /* @__PURE__ */ jsx(TextInput, { value: prompt, onChangeText: setPrompt, placeholder: "Describe how to edit this image\u2026", placeholderTextColor: "#94a3b8", multiline: true, style: styles.editPromptInput }) }) : null
+  ] }) }) });
+}
+function DotGrid() {
+  return /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.dots, children: Array.from({
+    length: 40
+  }).map((_, row) => /* @__PURE__ */ jsx(View, { style: styles.dotRow, children: Array.from({
+    length: 24
+  }).map((__, col) => /* @__PURE__ */ jsx(View, { style: styles.dotCell, children: /* @__PURE__ */ jsx(View, { style: styles.dot }) }, col)) }, row)) });
+}
+function SelectedItem({
+  item,
+  cameraScale,
+  onCommit,
+  onTap,
+  showToolbar,
+  onAction,
+  onRemove,
+  onChromeTouch
+}) {
+  const fx = useSharedValue(item.x);
+  const fy = useSharedValue(item.y);
+  const fw = useSharedValue(item.width);
+  const fh = useSharedValue(item.height);
+  const start = useSharedValue({
+    x: item.x,
+    y: item.y,
+    width: item.width,
+    height: item.height
+  });
+  useEffect(() => {
+    fx.value = item.x;
+    fy.value = item.y;
+    fw.value = item.width;
+    fh.value = item.height;
+  }, [item.id, item.x, item.y, item.width, item.height]);
+  const commit = useCallback((frame) => {
+    onCommit(item.id, frame);
+  }, [item.id, onCommit]);
+  const snapshot = () => {
+    "worklet";
+    start.value = {
+      x: fx.value,
+      y: fy.value,
+      width: fw.value,
+      height: fh.value
+    };
+  };
+  const finish = () => {
+    "worklet";
+    runOnJS(commit)({
+      x: fx.value,
+      y: fy.value,
+      width: fw.value,
+      height: fh.value
+    });
+  };
+  const drag = Gesture.Pan().maxPointers(1).onStart(snapshot).onUpdate((e) => {
+    "worklet";
+    const s = cameraScale.value;
+    fx.value = start.value.x + e.translationX / s;
+    fy.value = start.value.y + e.translationY / s;
+  }).onEnd(finish);
+  const tap = Gesture.Tap().runOnJS(true).blocksExternalGesture().onEnd(() => onTap == null ? void 0 : onTap(item));
+  const bodyGesture = item.type === "video" || item.type === "audio" ? null : Gesture.Exclusive(tap, drag);
+  const frameStyle = useAnimatedStyle(() => ({
+    position: "absolute",
+    left: fx.value,
+    top: fy.value,
+    width: fw.value,
+    height: fh.value,
+    // Editing brings the item above its neighbours for the duration.
+    zIndex: 99999
+  }));
+  const ringStyle = useAnimatedStyle(() => ({
+    borderWidth: 2 / cameraScale.value,
+    borderRadius: 8 / cameraScale.value
+  }));
+  const cornerGestures = useMemo(
+    () => CORNERS.map((corner) => Gesture.Pan().maxPointers(1).onStart(snapshot).onUpdate((e) => {
+      "worklet";
+      const s = cameraScale.value;
+      const next = resizeFrame(start.value, corner, e.translationX / s, e.translationY / s);
+      fx.value = next.x;
+      fy.value = next.y;
+      fw.value = next.width;
+      fh.value = next.height;
+    }).onEnd(finish)),
+    // Shared values and worklets are stable; rebuild only when the target changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [item.id]
+  );
+  const handleStyle = styles.webHandle;
+  const cornerPlacement = {
+    tl: {
+      left: 0,
+      top: 0
+    },
+    tr: {
+      right: 0,
+      top: 0
+    },
+    bl: {
+      left: 0,
+      bottom: 0
+    },
+    br: {
+      right: 0,
+      bottom: 0
+    }
+  };
+  const media = /* @__PURE__ */ jsxs(View, { style: [StyleSheet.absoluteFill, {
+    overflow: "hidden",
+    borderRadius: 8
+  }], children: [
+    /* @__PURE__ */ jsx(ItemContent, { item }),
+    /* @__PURE__ */ jsx(Animated.View, { pointerEvents: "none", style: [StyleSheet.absoluteFill, styles.selectionRing, ringStyle] })
+  ] });
+  return /* @__PURE__ */ jsxs(Animated.View, { style: [frameStyle, styles.selectedOverflow], children: [
+    bodyGesture ? /* @__PURE__ */ jsx(GestureDetector, { gesture: bodyGesture, children: media }) : media,
+    (item.type === "video" || item.type === "audio") && /* @__PURE__ */ jsx(GestureDetector, { gesture: drag, children: /* @__PURE__ */ jsxs(View, { style: styles.videoDragBar, accessibilityLabel: "Drag to move", children: [
+      /* @__PURE__ */ jsx(View, { style: styles.videoDragGrip }),
+      /* @__PURE__ */ jsx(View, { style: styles.videoDragGrip }),
+      /* @__PURE__ */ jsx(View, { style: styles.videoDragGrip })
+    ] }) }),
+    CORNERS.map((corner, i) => /* @__PURE__ */ jsx(GestureDetector, { gesture: cornerGestures[i], children: /* @__PURE__ */ jsx(View, { style: [styles.handleAnchor, cornerPlacement[corner]], hitSlop: HANDLE_SLOP, children: /* @__PURE__ */ jsx(View, { style: handleStyle }) }) }, corner)),
+    showToolbar ? /* @__PURE__ */ jsx(ItemHoverToolbar, { item, onAction, onRemove, onChromeTouch }) : null
+  ] });
+}
+function NativeCanvasViewer({
+  board,
+  onItemPress,
+  onBoardChange,
+  controls,
+  onItemAction,
+  onBoardsPress,
+  initialAgentOpen = false,
+  onAgentOpenChange,
+  runAction,
+  onAgentGenerated,
+  onAgentReplace,
+  onSelectionChange,
+  onUseTemplate,
+  testID
+}) {
+  var _a;
+  const {
+    width: winW,
+    height: winH
+  } = useWindowDimensions();
+  const [viewport, setViewport] = useState({
+    width: winW,
+    height: winH
+  });
+  const [items, setItems] = useState(() => spreadStackedItems(board.items.map(coerceUploadSizedItem)));
+  const [selectedId, setSelectedId] = useState(null);
+  const [agentOpen, setAgentOpen] = useState(initialAgentOpen);
+  useEffect(() => {
+    onAgentOpenChange == null ? void 0 : onAgentOpenChange(agentOpen);
+  }, [agentOpen, onAgentOpenChange]);
+  useEffect(() => {
+    var _a2;
+    onSelectionChange == null ? void 0 : onSelectionChange(selectedId ? (_a2 = items.find((it) => it.id === selectedId)) != null ? _a2 : null : null);
+  }, [selectedId, items, onSelectionChange]);
+  const boardMediaKey = board.items.map((it) => `${it.id}	${it.src}`).join("\0");
+  const prevItemIdsRef = useRef(new Set(board.items.map((it) => it.id)));
+  const ordered = useMemo(() => paintOrder(items), [items]);
+  const scale = useSharedValue(1);
+  const tx = useSharedValue(0);
+  const ty = useSharedValue(0);
+  const startScale = useSharedValue(1);
+  const startTx = useSharedValue(0);
+  const startTy = useSharedValue(0);
+  const applyCamera = (list) => {
+    const fit = boardBounds(list);
+    if (!fit) {
+      scale.value = 1;
+      tx.value = 0;
+      ty.value = 0;
+      return;
+    }
+    const boardW = Math.max(1, fit.maxX - fit.minX);
+    const boardH = Math.max(1, fit.maxY - fit.minY);
+    scale.value = 1;
+    tx.value = (viewport.width - boardW) / 2 - fit.minX;
+    ty.value = (viewport.height - boardH) / 2 - fit.minY;
+  };
+  useEffect(() => {
+    const spread = spreadStackedItems(board.items.map(coerceUploadSizedItem));
+    const prevIds = prevItemIdsRef.current;
+    const added = spread.filter((it) => !prevIds.has(it.id));
+    const removedCount = [...prevIds].filter((id) => !spread.some((s) => s.id === id)).length;
+    const appended = added.length > 0 && removedCount === 0 && spread.length > prevIds.size;
+    prevItemIdsRef.current = new Set(spread.map((it) => it.id));
+    setItems(spread);
+    setSelectedId(appended ? added[added.length - 1].id : null);
+    applyCamera(spread);
+  }, [boardMediaKey]);
+  useEffect(() => {
+    applyCamera(items);
+  }, [viewport.width, viewport.height]);
+  const handleCommit = useCallback((id, frame) => {
+    setItems((prev) => {
+      const next = applyItemFrame(prev, id, frame);
+      const snapshot = __spreadProps(__spreadValues({}, board), {
+        items: next
+      });
+      queueMicrotask(() => onBoardChange == null ? void 0 : onBoardChange(snapshot));
+      return next;
+    });
+  }, [board, onBoardChange]);
+  const handleSelect = useCallback((item) => {
+    setSelectedId(item.id);
+    onItemPress == null ? void 0 : onItemPress(item);
+  }, [onItemPress]);
+  const skipDeselectUntil = useRef(0);
+  const armChromeTouch = useCallback(() => {
+    skipDeselectUntil.current = Date.now() + 400;
+  }, []);
+  const handleBackgroundTap = useCallback((absX, absY) => {
+    if (Date.now() < skipDeselectUntil.current) return;
+    const item = selectedId ? items.find((it) => it.id === selectedId) : void 0;
+    if (item) {
+      const s = scale.value;
+      const left = item.x * s + tx.value;
+      const top = item.y * s + ty.value;
+      if (absX >= left && absX <= left + item.width * s && absY >= top - 80 && absY <= top + item.height * s) {
+        return;
+      }
+    }
+    setSelectedId(null);
+  }, [items, selectedId]);
+  const [zoomPct, setZoomPct] = useState(100);
+  useAnimatedReaction(() => Math.round(scale.value * 100), (pct, prev) => {
+    if (pct !== prev) runOnJS(setZoomPct)(pct);
+  });
+  const zoomBy = useCallback(
+    (factor) => {
+      const next = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, scale.value * factor));
+      const ratio = next / scale.value;
+      const cx = viewport.width / 2;
+      const cy = viewport.height / 2;
+      tx.value = cx - (cx - tx.value) * ratio;
+      ty.value = cy - (cy - ty.value) * ratio;
+      scale.value = next;
+    },
+    // Shared values are stable refs.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [viewport.width, viewport.height]
+  );
+  const fitBoard = useCallback(() => {
+    applyCamera(items);
+  }, [items, viewport.width, viewport.height]);
+  const commitItems = useCallback((next) => {
+    setItems(next);
+    onBoardChange == null ? void 0 : onBoardChange(__spreadProps(__spreadValues({}, board), {
+      items: [...next]
+    }));
+  }, [board, onBoardChange]);
+  const pan = Gesture.Pan().minDistance(10).averageTouches(true).onStart(() => {
+    startTx.value = tx.value;
+    startTy.value = ty.value;
+  }).onUpdate((e) => {
+    tx.value = startTx.value + e.translationX;
+    ty.value = startTy.value + e.translationY;
+  });
+  const pinch = Gesture.Pinch().onStart(() => {
+    startScale.value = scale.value;
+    startTx.value = tx.value;
+    startTy.value = ty.value;
+  }).onUpdate((e) => {
+    "worklet";
+    const raw = startScale.value * e.scale;
+    const next = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, raw));
+    const ratio = next / startScale.value;
+    tx.value = e.focalX - (e.focalX - startTx.value) * ratio;
+    ty.value = e.focalY - (e.focalY - startTy.value) * ratio;
+    scale.value = next;
+  });
+  const backgroundTap = Gesture.Tap().runOnJS(true).onEnd((e) => {
+    handleBackgroundTap(e.absoluteX, e.absoluteY);
+  });
+  const gesture = Gesture.Simultaneous(pan, pinch, backgroundTap);
+  const planeStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: tx.value
+    }, {
+      translateY: ty.value
+    }, {
+      scale: scale.value
+    }]
+  }));
+  return (
+    // Self-sufficient gesture root: hosts differ in whether they wrap
+    // screens in GestureHandlerRootView (the Expo app's canvas screen
+    // does not), and GestureDetector throws without one. Nesting under a
+    // host-provided root is safe.
+    /* @__PURE__ */ jsxs(GestureHandlerRootView, { style: styles.viewport, testID, onLayout: (e) => {
+      const {
+        width,
+        height
+      } = e.nativeEvent.layout;
+      if (width > 0 && height > 0) setViewport({
+        width,
+        height
+      });
+    }, children: [
+      onBoardsPress ? /* @__PURE__ */ jsxs(View, { style: styles.boardHeader, children: [
+        /* @__PURE__ */ jsxs(Pressable, { onPress: onBoardsPress, accessibilityRole: "button", accessibilityLabel: "Boards", style: styles.boardsBtn, children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "view-grid-outline", size: 16, color: "#64748b" }),
+          /* @__PURE__ */ jsx(Text, { style: styles.boardsLabel, children: "Boards" })
+        ] }),
+        /* @__PURE__ */ jsx(View, { style: styles.headerRule }),
+        /* @__PURE__ */ jsxs(Text, { style: styles.itemCount, children: [
+          items.length,
+          " ",
+          items.length === 1 ? "item" : "items"
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: styles.headerZoom, children: [
+          /* @__PURE__ */ jsx(Pressable, { onPress: () => zoomBy(1 / 1.25), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Zoom out", style: styles.zoomBtn, children: /* @__PURE__ */ jsx(Text, { style: styles.zoomBtnGlyph, children: "\u2212" }) }),
+          /* @__PURE__ */ jsx(Pressable, { onPress: fitBoard, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Fit board", children: /* @__PURE__ */ jsxs(Text, { style: styles.zoomPct, children: [
+            zoomPct,
+            "%"
+          ] }) }),
+          /* @__PURE__ */ jsx(Pressable, { onPress: () => zoomBy(1.25), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Zoom in", style: styles.zoomBtn, children: /* @__PURE__ */ jsx(Text, { style: styles.zoomBtnGlyph, children: "+" }) })
+        ] }),
+        /* @__PURE__ */ jsx(View, { style: styles.headerRule }),
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => setAgentOpen(true), style: styles.askAgentBtn, accessibilityRole: "button", accessibilityLabel: "Ask agent", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "creation", size: 16, color: "#64748b" }) })
+      ] }) : null,
+      /* @__PURE__ */ jsxs(View, { style: styles.canvasPlane, onLayout: (e) => {
+        const {
+          width,
+          height
+        } = e.nativeEvent.layout;
+        if (width > 0 && height > 0) setViewport({
+          width,
+          height
+        });
+      }, children: [
+        /* @__PURE__ */ jsx(DotGrid, {}),
+        /* @__PURE__ */ jsx(GestureDetector, { gesture, children: /* @__PURE__ */ jsx(View, { style: StyleSheet.absoluteFill, collapsable: false, children: /* @__PURE__ */ jsx(Animated.View, { style: [styles.plane, planeStyle, {
+          transformOrigin: "0 0"
+        }], pointerEvents: "box-none", children: ordered.map((item) => item.id === selectedId ? /* @__PURE__ */ jsx(SelectedItem, { item, cameraScale: scale, onCommit: handleCommit, onTap: onItemPress, showToolbar: controls, onAction: onItemAction, onRemove: () => {
+          commitItems(removeItem(items, item.id));
+          setSelectedId(null);
+        }, onChromeTouch: armChromeTouch }, item.id) : /* @__PURE__ */ jsx(StaticItem, { item, onTap: handleSelect }, item.id)) }) }) }),
+        items.length === 0 ? /* @__PURE__ */ jsxs(View, { style: styles.emptyHint, pointerEvents: "none", children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.emptyHintTitle, children: "Your canvas is empty" }),
+          /* @__PURE__ */ jsx(Text, { style: styles.emptyHintDetail, children: "Tap Generate below for an image, video, audio, slides, clips or a promo." })
+        ] }) : null,
+        controls && !onBoardsPress ? /* @__PURE__ */ jsxs(View, { style: styles.zoomHud, pointerEvents: "box-none", children: [
+          /* @__PURE__ */ jsx(Pressable, { onPress: () => zoomBy(1 / 1.25), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Zoom out", style: styles.zoomBtn, children: /* @__PURE__ */ jsx(Text, { style: styles.zoomBtnGlyph, children: "\u2212" }) }),
+          /* @__PURE__ */ jsx(Pressable, { onPress: fitBoard, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Fit board", children: /* @__PURE__ */ jsxs(Text, { style: styles.zoomPct, children: [
+            zoomPct,
+            "%"
+          ] }) }),
+          /* @__PURE__ */ jsx(Pressable, { onPress: () => zoomBy(1.25), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Zoom in", style: styles.zoomBtn, children: /* @__PURE__ */ jsx(Text, { style: styles.zoomBtnGlyph, children: "+" }) })
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx(CanvasAgentChatPane, { visible: agentOpen, onClose: () => setAgentOpen(false), runAction, boardItems: items, selectedItem: (_a = items.find((it) => it.id === selectedId)) != null ? _a : null, onGenerated: (url, meta) => onAgentGenerated == null ? void 0 : onAgentGenerated(url, meta), onReplace: (itemId, url) => onAgentReplace == null ? void 0 : onAgentReplace(itemId, url), onOpenItem: (itemId) => {
+        setSelectedId(itemId);
+        setAgentOpen(false);
+      }, onUseTemplate })
+    ] })
+  );
+}
+function initialZoomFor(_board, _viewportWidth, _viewportHeight) {
+  return 1;
+}
+const styles = StyleSheet.create({
+  viewport: {
+    flex: 1,
+    overflow: "hidden",
+    backgroundColor: "#eef1f4"
+  },
+  canvasPlane: {
+    flex: 1,
+    overflow: "hidden"
+  },
+  emptyHint: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 32,
+    paddingTop: 8,
+    paddingBottom: 72
+  }),
+  emptyHintTitle: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#0f172a",
+    marginBottom: 6
+  },
+  emptyHintDetail: {
+    fontSize: 12,
+    color: "#64748b",
+    textAlign: "center",
+    maxWidth: 280,
+    lineHeight: 17
+  },
+  boardHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    backgroundColor: "#ffffff",
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#e2e8f0",
+    zIndex: 50
+  },
+  boardsBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 6,
+    paddingVertical: 6
+  },
+  boardsLabel: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#64748b"
+  },
+  headerRule: {
+    width: StyleSheet.hairlineWidth,
+    height: 16,
+    backgroundColor: "#e2e8f0"
+  },
+  itemCount: {
+    fontSize: 11,
+    color: "#94a3b8",
+    fontVariant: ["tabular-nums"]
+  },
+  headerZoom: {
+    marginLeft: "auto",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+    flexShrink: 0
+  },
+  askAgentBtn: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "#e2e8f0",
+    borderRadius: 8,
+    width: 36,
+    height: 32,
+    flexShrink: 0
+  },
+  askAgentLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: "#64748b"
+  },
+  plane: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: 1,
+    height: 1,
+    overflow: "visible"
+  },
+  itemImage: {
+    borderRadius: 8,
+    backgroundColor: "#e2e8f0"
+  },
+  zoomHud: {
+    position: "absolute",
+    top: 12,
+    right: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 14,
+    backgroundColor: "#ffffff",
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "#e2e8f0",
+    shadowColor: "#0f172a",
+    shadowOpacity: 0.08,
+    shadowRadius: 8,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    elevation: 3
+  },
+  selectedOverflow: {
+    overflow: "visible"
+  },
+  videoDragBar: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 22,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    backgroundColor: "rgba(15, 23, 42, 0.35)",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 3,
+    zIndex: 20
+  },
+  videoDragGrip: {
+    width: 3,
+    height: 10,
+    borderRadius: 1.5,
+    backgroundColor: "rgba(255,255,255,0.75)"
+  },
+  dots: __spreadValues({}, StyleSheet.absoluteFillObject),
+  dotRow: {
+    flexDirection: "row",
+    height: 22
+  },
+  dotCell: {
+    width: 22,
+    height: 22,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dot: {
+    width: 2,
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: "rgba(15,23,42,0.14)"
+  },
+  hoverWrap: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: "100%",
+    alignItems: "center",
+    marginBottom: 4,
+    zIndex: 50,
+    overflow: "visible"
+  },
+  hoverCluster: {
+    alignItems: "center",
+    zIndex: 50
+  },
+  hoverBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    maxWidth: "100%",
+    overflow: "visible",
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderRadius: 14,
+    backgroundColor: "#ffffff",
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "rgba(15,23,42,0.08)",
+    shadowColor: "#0f172a",
+    shadowOpacity: 0.12,
+    shadowRadius: 16,
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    elevation: 6
+  },
+  hoverActions: {
+    flexShrink: 1,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    overflow: "hidden"
+  },
+  hoverActionsInner: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexShrink: 0
+  },
+  moreWrap: {
+    position: "relative",
+    flexShrink: 0,
+    zIndex: 80
+  },
+  editPrompt: {
+    marginTop: 8,
+    width: 280,
+    borderRadius: 16,
+    backgroundColor: "#ffffff",
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "rgba(15,23,42,0.08)",
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    shadowColor: "#0f172a",
+    shadowOpacity: 0.1,
+    shadowRadius: 16,
+    shadowOffset: {
+      width: 0,
+      height: 8
+    },
+    elevation: 6
+  },
+  editPromptInput: {
+    minHeight: 44,
+    fontSize: 15,
+    color: "#334155",
+    padding: 0
+  },
+  hoverBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 9
+  },
+  hoverIconBtn: {
+    paddingHorizontal: 10,
+    paddingVertical: 9
+  },
+  hoverLabel: {
+    fontSize: 15,
+    fontWeight: "600",
+    color: "#334155"
+  },
+  hoverDivider: {
+    width: StyleSheet.hairlineWidth,
+    alignSelf: "stretch",
+    backgroundColor: "#e2e8f0",
+    marginVertical: 4,
+    marginHorizontal: 2
+  },
+  hoverSparkle: {
+    position: "absolute",
+    top: -3,
+    right: -6
+  },
+  moreMenu: {
+    position: "absolute",
+    top: "100%",
+    right: 0,
+    marginTop: 8,
+    zIndex: 90,
+    minWidth: 176,
+    borderRadius: 10,
+    backgroundColor: "#ffffff",
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "rgba(15,23,42,0.08)",
+    paddingVertical: 4,
+    shadowColor: "#0f172a",
+    shadowOpacity: 0.12,
+    shadowRadius: 12,
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    elevation: 6
+  },
+  moreRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10
+  },
+  moreLabel: {
+    fontSize: 14,
+    color: "#334155"
+  },
+  zoomBtn: {
+    paddingHorizontal: 8,
+    paddingVertical: 2
+  },
+  zoomBtnGlyph: {
+    fontSize: 20,
+    color: "#334155",
+    fontWeight: "500"
+  },
+  zoomPct: {
+    fontSize: 15,
+    color: "#0f172a",
+    fontVariant: ["tabular-nums"],
+    minWidth: 52,
+    textAlign: "center"
+  },
+  selectionRing: {
+    borderColor: SELECTION_COLOR
+  },
+  handleAnchor: {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1
+  },
+  webHandle: {
+    width: 12,
+    height: 12,
+    marginLeft: -6,
+    marginTop: -6,
+    borderRadius: 2,
+    backgroundColor: "#3b82f6",
+    borderWidth: 1,
+    borderColor: "#ffffff"
+  },
+  mediaTile: {
+    borderRadius: 8,
+    backgroundColor: "#0f172a",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 8
+  },
+  mediaTileGlyph: {
+    color: "#f8fafc",
+    fontSize: 28,
+    marginBottom: 4
+  },
+  mediaTileLabel: {
+    color: "#cbd5e1",
+    fontSize: 11,
+    maxWidth: "90%"
+  },
+  empty: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#f8fafc"
+  },
+  emptyText: {
+    color: "#64748b",
+    fontSize: 14
+  }
+});export{NativeCanvasViewer,initialZoomFor};//# sourceMappingURL=NativeCanvasViewer.js.map