@adminide-stack/yantra-mobile 12.0.121 → 12.0.123-alpha.0

package/lib/features/canvas/CanvasExperience.js

@@ -1,4 +1,4 @@
-import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useMemo,useState,useRef,useEffect,useCallback}from'react';import {StyleSheet,useColorScheme,View,Text,Pressable,ActivityIndicator}from'react-native';import {NativeCanvasViewer}from'./NativeCanvasViewer.js';import {CanvasBoardsGrid}from'./CanvasBoardsGrid.js';import {CanvasAgentChatPane}from'./CanvasAgentChatPane.js';import {VideoEditorExperience}from'./VideoEditorExperience.js';import {ImageEditorExperience}from'./ImageEditorExperience.js';import {AudioEditorExperience}from'./AudioEditorExperience.js';import {friendlyMediaError}from'./videoEditor/mediaActions.js';import {createRemoteRunAction,createRemoteUploadMedia,proxiedMediaUrl}from'./videoEditor/remoteMediaClient.js';import {renderExportSpec}from'./videoEditor/exportRenderer.js';import {getCachedCanvasBoards,fetchMyCanvasBoards,pushCanvasBoard}from'./surfaceIndex.js';import {readCachedCanvasBoards,writeCachedCanvasBoards}from'./canvasBoardsCatalog.js';import {hydrateCanvasBoardsSnapshot,persistCanvasBoardsSnapshot}from'./canvasBoardsSnapshot.js';import {boardSignature,frameForUpload,buildBoardState,dimsForAspect,newBoardId,emptyBoardState}from'./canvasCore.js';import {promoProjectToTimeline}from'./promoProjectImport.js';import {loadTemplateTimeline}from'./templateImport/loadTemplate.js';import {CanvasToolDock}from'./CanvasToolDock.js';import {describeSession}from'./sessionIdentity.js';import {DesignExperience}from'../design/DesignExperience.js';import {fetchMyDesigns}from'../design/designIndex.js';import {VideoGeneratorExperience}from'./VideoGeneratorExperience.js';import {VideoEditExperience}from'./VideoEditExperience.js';import {VideoClipsExperience}from'./VideoClipsExperience.js';import {FrameExtractorExperience}from'./FrameExtractorExperience.js';import {MoodboardExperience}from'./MoodboardExperience.js';import {SetStudioExperience}from'./SetStudioExperience.js';import {InfluencerStudioExperience}from'./InfluencerStudioExperience.js';import {CameraRecorderExperience}from'./recorder/CameraRecorderExperience.js';import {listStudioLooks}from'./studioLooks.js';var __defProp = Object.defineProperty;
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useMemo,useState,useRef,useEffect,useCallback}from'react';import {StyleSheet,useColorScheme,Image,View,Text,Pressable,ActivityIndicator}from'react-native';import {NativeCanvasViewer}from'./NativeCanvasViewer.js';import {CanvasBoardsGrid}from'./CanvasBoardsGrid.js';import {CanvasAgentChatPane}from'./CanvasAgentChatPane.js';import {VideoEditorExperience}from'./VideoEditorExperience.js';import {ImageEditorExperience}from'./ImageEditorExperience.js';import {AudioEditorExperience}from'./AudioEditorExperience.js';import {friendlyMediaError}from'./videoEditor/mediaActions.js';import {createRemoteRunAction,createRemoteUploadMedia,proxiedMediaUrl,unwrapProxyUrl}from'./videoEditor/remoteMediaClient.js';import {renderExportSpec}from'./videoEditor/exportRenderer.js';import {startExportTask}from'./videoEditor/exportTask.js';import {useCanvasTask,ExportTaskCard}from'./videoEditor/ExportTaskCard.js';import {markTaskDelivered,dismissTask}from'./canvasTasks.js';import {getCachedCanvasBoards,fetchMyCanvasBoards,pushCanvasBoard}from'./surfaceIndex.js';import {useMediaSigning,useBoardMediaRefresh,applySrcRenewals}from'./useBoardMediaRefresh.js';import {readCachedCanvasBoards,writeCachedCanvasBoards}from'./canvasBoardsCatalog.js';import {hydrateCanvasBoardsSnapshot,persistCanvasBoardsSnapshot}from'./canvasBoardsSnapshot.js';import {boardSignature,mediaItemsFor,buildBoardState,reconcileDismissed,newBoardId,emptyBoardState,dimsForAspect,mediaKey}from'./canvasCore.js';import {visibleCreateGroups}from'./createTiles.js';import {parseDesignLink,parseMediaLink,parseCreateTileLink}from'./deepLinks.js';import {promoProjectToTimeline}from'./promoProjectImport.js';import {loadTemplateTimeline}from'./templateImport/loadTemplate.js';import {CanvasToolDock}from'./CanvasToolDock.js';import {describeSession}from'./sessionIdentity.js';import {DesignExperience}from'../design/DesignExperience.js';import {fetchMyDesigns}from'../design/designIndex.js';import {VideoGeneratorExperience}from'./VideoGeneratorExperience.js';import {VideoEditExperience}from'./VideoEditExperience.js';import {VideoClipsExperience}from'./VideoClipsExperience.js';import {FrameExtractorExperience}from'./FrameExtractorExperience.js';import {MoodboardExperience}from'./MoodboardExperience.js';import {SetStudioExperience}from'./SetStudioExperience.js';import {configureServerTasks}from'./serverTasks.js';import {setCanvasTasksHost}from'./canvasTaskSync.js';import {InfluencerStudioExperience}from'./InfluencerStudioExperience.js';import {CameraRecorderExperience}from'./recorder/CameraRecorderExperience.js';import {listStudioLooks}from'./studioLooks.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -28,6 +28,43 @@ function untitledBoard(channelId) {
   };
 }
 const SAVE_DEBOUNCE_MS = 600;
+const MEDIA_LINK_MEASURE_MS = 1500;
+const boardMediaKey = (src) => mediaKey(src, unwrapProxyUrl);
+function placementFor(type, src, opts) {
+  var _a;
+  const maxEdge = type === "video" ? 640 : 600;
+  const size = (opts == null ? void 0 : opts.aspect) ? dimsForAspect(opts.aspect, maxEdge) : opts == null ? void 0 : opts.size;
+  return __spreadValues({
+    type,
+    src,
+    label: (_a = opts == null ? void 0 : opts.name) != null ? _a : type === "video" ? "Edited video" : type
+  }, size ? {
+    size
+  } : {});
+}
+function placementForPicked(item) {
+  return __spreadValues(__spreadValues(__spreadValues({
+    type: item.type,
+    src: item.src
+  }, item.generatedAssetName ? {
+    label: item.generatedAssetName
+  } : {}), item.width > 0 && item.height > 0 ? {
+    size: {
+      width: item.width,
+      height: item.height
+    }
+  } : {}), item.hasAudio === false ? {
+    hasAudio: false
+  } : {});
+}
+function withTombstones(prev, next) {
+  var _a;
+  const dismissed = reconcileDismissed(prev.items, next.items, (_a = prev.dismissed) != null ? _a : [], boardMediaKey);
+  const out = __spreadValues({}, next);
+  if (dismissed.length > 0) out.dismissed = dismissed;
+  else delete out.dismissed;
+  return out;
+}
 function CanvasExperience({
   token,
   indexUrl,
@@ -42,14 +79,25 @@ function CanvasExperience({
   audioRecorder,
   runMediaAction,
   apolloClient,
+  createTile,
+  media,
+  designId,
+  designTemplateId,
+  artifactId,
   testID
 }) {
   var _a, _b, _c, _d, _e, _f, _g;
   const isDark = useColorScheme() === "dark";
   const effectiveRunAction = useMemo(() => runMediaAction != null ? runMediaAction : token && indexUrl ? createRemoteRunAction(token, indexUrl) : void 0, [runMediaAction, token, indexUrl]);
+  useMemo(() => configureServerTasks({
+    token,
+    indexUrl
+  }), [token, indexUrl]);
   const effectiveUploadMedia = useMemo(() => uploadMedia != null ? uploadMedia : token && indexUrl ? createRemoteUploadMedia(token, indexUrl) : void 0, [uploadMedia, token, indexUrl]);
   const cachedBoards = (_a = getCachedCanvasBoards(indexUrl)) != null ? _a : apolloClient ? readCachedCanvasBoards(apolloClient) : null;
   const [boards, setBoards] = useState(() => cachedBoards != null ? cachedBoards : []);
+  const boardsRef = useRef(boards);
+  boardsRef.current = boards;
   const [loading, setLoading] = useState(!explicitBoard && cachedBoards == null);
   const [error, setError] = useState(null);
   const [selectedId, setSelectedId] = useState(null);
@@ -59,7 +107,21 @@ function CanvasExperience({
   const [mediaBusy, setMediaBusy] = useState(false);
   const [uploadStatus, setUploadStatus] = useState(null);
   const lastSavedByIdRef = useRef({});
+  const [boardsSettled, setBoardsSettled] = useState(false);
   const skipFetch = Boolean(explicitBoard);
+  const tasksBoardsRef = useRef(boards);
+  tasksBoardsRef.current = boards;
+  useEffect(() => {
+    setCanvasTasksHost({
+      openBoardId: selectedId,
+      openBoard: (id) => setSelectedId(id),
+      boardLabel: (id) => {
+        var _a2;
+        return ((_a2 = tasksBoardsRef.current.find((entry) => entry.channelId === id)) == null ? void 0 : _a2.title) || void 0;
+      },
+      runAction: effectiveRunAction
+    });
+  }, [selectedId, effectiveRunAction]);
   useEffect(() => {
     if (skipFetch || !indexUrl) return void 0;
     let cancelled = false;
@@ -113,6 +175,7 @@ function CanvasExperience({
       if (result.error) {
         if (!hasCache) setError(result.error);
         setLoading(false);
+        setBoardsSettled(true);
         return;
       }
       lastSavedByIdRef.current = Object.fromEntries(result.boards.map((entry) => [entry.channelId, boardSignature(entry.board)]));
@@ -120,6 +183,7 @@ function CanvasExperience({
       writeCachedCanvasBoards(apolloClient, result.boards);
       setError(null);
       setLoading(false);
+      setBoardsSettled(true);
     })();
     return () => {
       cancelled = true;
@@ -136,6 +200,16 @@ function CanvasExperience({
     if (match) setSelectedId(match.channelId);
   }, [boards, channelId, selectedId]);
   const selected = useMemo(() => selectedId ? boards.find((entry) => entry.channelId === selectedId) : void 0, [boards, selectedId]);
+  useMediaSigning(token, indexUrl);
+  useBoardMediaRefresh(selected == null ? void 0 : selected.channelId, selected == null ? void 0 : selected.board.items, effectiveRunAction, (boardId, renewals) => setBoards((prev) => prev.map((entry) => {
+    if (entry.channelId !== boardId) return entry;
+    const items = applySrcRenewals(entry.board.items, renewals);
+    return items === entry.board.items ? entry : __spreadProps(__spreadValues({}, entry), {
+      board: __spreadProps(__spreadValues({}, entry.board), {
+        items
+      })
+    });
+  })));
   const playableBoard = useCallback((board) => {
     if (!indexUrl) return board;
     return __spreadProps(__spreadValues({}, board), {
@@ -182,7 +256,9 @@ function CanvasExperience({
   const reload = useCallback(() => setGeneration((n) => n + 1), []);
   const handleBoardChange = useCallback((board) => {
     setBoards((prev) => prev.map((entry) => entry.channelId === selectedId ? __spreadProps(__spreadValues({}, entry), {
-      board,
+      // A delete must leave a tombstone, or web's channel
+      // drain puts the media straight back (web #530).
+      board: withTombstones(entry.board, board),
       title: board.title || entry.title,
       itemCount: board.items.length,
       savedAt: board.savedAt
@@ -201,9 +277,9 @@ function CanvasExperience({
         const targetId = selectedId != null ? selectedId : list[0].channelId;
         return list.map((entry) => {
           if (entry.channelId !== targetId) return entry;
-          const startZ = entry.board.items.length;
-          const items = [...entry.board.items, ...picked.map((item, i) => __spreadProps(__spreadValues(__spreadValues({}, item), frameForUpload(item.type)), {
-            zIndex: startZ + i + 1
+          const placed = mediaItemsFor(entry.board.items, picked.map(placementForPicked));
+          const items = [...entry.board.items, ...picked.map((item, i) => __spreadProps(__spreadValues(__spreadValues({}, item), placed[i]), {
+            id: item.id || placed[i].id
           }))];
           const nextState = buildBoardState(items, entry.board.zoom, entry.title);
           return __spreadProps(__spreadValues({}, entry), {
@@ -244,7 +320,7 @@ function CanvasExperience({
   }, []);
   useEffect(() => {
     if (skipFetch || loading || !token || !indexUrl || !selected) return void 0;
-    const state = buildBoardState(selected.board.items, selected.board.zoom, selected.title);
+    const state = buildBoardState(selected.board.items, selected.board.zoom, selected.title, selected.board.dismissed);
     if (state.items.length === 0) return void 0;
     const sig = boardSignature(state);
     if (lastSavedByIdRef.current[selected.channelId] === sig) return void 0;
@@ -272,6 +348,8 @@ function CanvasExperience({
   const [showRecorder, setShowRecorder] = useState(false);
   const [boardSelectedItem, setBoardSelectedItem] = useState(null);
   const [exporting, setExporting] = useState(null);
+  const [exportTaskId, setExportTaskId] = useState(null);
+  const exportTask = useCanvasTask(exportTaskId);
   const [designEntry, setDesignEntry] = useState(null);
   const [designs, setDesigns] = useState([]);
   const [featuredLooks, setFeaturedLooks] = useState([]);
@@ -309,28 +387,20 @@ function CanvasExperience({
     };
   }, [apolloClient, effectiveRunAction, indexUrl, token]);
   const addBoardItem = useCallback((type, url, opts) => {
-    var _a2;
-    const maxEdge = type === "video" ? 640 : 600;
-    const frame = (opts == null ? void 0 : opts.aspect) ? __spreadValues({
-      x: 100,
-      y: 100
-    }, dimsForAspect(opts.aspect, maxEdge)) : frameForUpload(type);
+    var _a2, _b2;
     const src = indexUrl ? proxiedMediaUrl(indexUrl, url) : url;
-    const item = __spreadValues({
-      id: newBoardId(),
-      type,
-      src,
-      generatedAssetName: (_a2 = opts == null ? void 0 : opts.name) != null ? _a2 : type === "video" ? "Edited video" : type,
-      zIndex: 1
-    }, frame);
+    const placement = placementFor(type, src, opts);
+    const target = (_a2 = boardsRef.current.find((entry) => entry.channelId === selectedId)) != null ? _a2 : boardsRef.current[0];
+    const item = mediaItemsFor((_b2 = target == null ? void 0 : target.board.items) != null ? _b2 : [], [placement])[0];
     setBoards((prev) => {
       const list = prev.length ? prev : [untitledBoard(channelId)];
       const targetId = selectedId != null ? selectedId : list[0].channelId;
       return list.map((entry) => {
         if (entry.channelId !== targetId) return entry;
-        const items = [...entry.board.items, __spreadProps(__spreadValues({}, item), {
-          zIndex: entry.board.items.length + 1
-        })];
+        const [placed] = mediaItemsFor(entry.board.items, [__spreadProps(__spreadValues({}, placement), {
+          id: item.id
+        })]);
+        const items = [...entry.board.items, placed];
         const nextState = buildBoardState(items, entry.board.zoom, entry.title);
         return __spreadProps(__spreadValues({}, entry), {
           title: nextState.title || entry.title,
@@ -346,24 +416,10 @@ function CanvasExperience({
     return item;
   }, [selectedId, channelId, indexUrl]);
   const openFreshBoardWithItem = useCallback((type, url, opts) => {
-    var _a2;
-    const maxEdge = type === "video" ? 640 : 600;
-    const frame = (opts == null ? void 0 : opts.aspect) ? __spreadValues({
-      x: 100,
-      y: 100
-    }, dimsForAspect(opts.aspect, maxEdge)) : frameForUpload(type);
     const src = indexUrl ? proxiedMediaUrl(indexUrl, url) : url;
-    const item = __spreadValues({
-      id: newBoardId(),
-      type,
-      src,
-      generatedAssetName: (_a2 = opts == null ? void 0 : opts.name) != null ? _a2 : type === "video" ? "Edited video" : type,
-      zIndex: 1
-    }, frame);
+    const item = mediaItemsFor([], [placementFor(type, src, opts)])[0];
     const entry = untitledBoard();
-    const items = [__spreadProps(__spreadValues({}, item), {
-      zIndex: 1
-    })];
+    const items = [item];
     const nextState = buildBoardState(items, entry.board.zoom, entry.title);
     const next = __spreadProps(__spreadValues({}, entry), {
       title: nextState.title || entry.title,
@@ -385,11 +441,15 @@ function CanvasExperience({
     const src = indexUrl ? proxiedMediaUrl(indexUrl, url) : url;
     setBoards((prev) => prev.map((entry) => {
       if (entry.channelId !== selectedId) return entry;
-      const items = entry.board.items.map((item) => item.id === itemId ? __spreadValues(__spreadProps(__spreadValues({}, item), {
-        src
-      }), type ? {
-        type
-      } : {}) : item);
+      const items = entry.board.items.map((item) => (
+        // New media: the old short link would point at the old object.
+        item.id === itemId ? __spreadValues(__spreadProps(__spreadValues({}, item), {
+          src,
+          share: void 0
+        }), type ? {
+          type
+        } : {}) : item
+      ));
       const nextState = buildBoardState(items, entry.board.zoom, entry.title);
       return __spreadProps(__spreadValues({}, entry), {
         board: __spreadProps(__spreadValues({}, entry.board), {
@@ -408,13 +468,20 @@ function CanvasExperience({
     return (spec) => {
       if (exportBusyRef.current) return;
       exportBusyRef.current = true;
-      setExporting({
-        stage: "Starting render"
-      });
-      void renderExportSpec(spec, runAction, upload, (p) => setExporting(p)).then((url) => {
-        addRenderedVideo(url);
-        setEditorSeed(null);
-        setExporting(null);
+      void startExportTask(runAction, {
+        spec,
+        boardId: selectedId != null ? selectedId : "",
+        brief: (editorSeed == null ? void 0 : editorSeed.projectTitle) || (selected == null ? void 0 : selected.board.title) || (selected == null ? void 0 : selected.title) || "Video export",
+        upload
+      }).then((id) => setExportTaskId(id)).catch(() => {
+        setExporting({
+          stage: "Starting render"
+        });
+        return renderExportSpec(spec, runAction, upload, (p) => setExporting(p)).then((url) => {
+          addRenderedVideo(url);
+          setEditorSeed(null);
+          setExporting(null);
+        });
       }).catch((err) => {
         setExporting({
           stage: "",
@@ -424,7 +491,15 @@ function CanvasExperience({
         exportBusyRef.current = false;
       });
     };
-  }, [onExportVideo, effectiveRunAction, effectiveUploadMedia, addRenderedVideo]);
+  }, [onExportVideo, effectiveRunAction, effectiveUploadMedia, addRenderedVideo, selectedId, editorSeed, selected]);
+  useEffect(() => {
+    var _a2;
+    if (!exportTask || exportTask.state !== "succeeded" || exportTask.delivered || !((_a2 = exportTask.result) == null ? void 0 : _a2.url)) return;
+    markTaskDelivered(exportTask.id);
+    addRenderedVideo(exportTask.result.url);
+    setEditorSeed(null);
+    setExportTaskId(null);
+  }, [exportTask, addRenderedVideo]);
   const handleItemAction = useCallback((action, item) => {
     if (action === "create-video") {
       setGenerator({
@@ -486,6 +561,128 @@ function CanvasExperience({
     } catch (e) {
     }
   }, []);
+  const pickThenEdit = useCallback(async (kind) => {
+    if (!onPickLocalMedia) return;
+    try {
+      const picked = await onPickLocalMedia(void 0, kind === "image" ? "library" : "file");
+      const first = picked.find((p) => p.type === kind);
+      if (!first) return;
+      const item = openFreshBoardWithItem(kind, first.src, __spreadValues({
+        name: first.generatedAssetName
+      }, first.width > 0 && first.height > 0 ? {
+        size: {
+          width: first.width,
+          height: first.height
+        }
+      } : {}));
+      setMediaEdit({
+        kind,
+        item
+      });
+    } catch (err) {
+      if (__DEV__) {
+        console.warn("[CanvasExperience] pick for editor failed:", err);
+      }
+    }
+  }, [onPickLocalMedia, openFreshBoardWithItem]);
+  const canRunCreate = useCallback((action) => action.type !== "studio" || action.studio !== "image" && action.studio !== "audio" || Boolean(onPickLocalMedia && effectiveRunAction), [onPickLocalMedia, effectiveRunAction]);
+  const createGroups = useMemo(() => visibleCreateGroups(canRunCreate), [canRunCreate]);
+  const handleCreate = useCallback((action) => {
+    if (action.type === "design") {
+      setDesignEntry({
+        kind: action.kind
+      });
+      return;
+    }
+    if (action.type === "generate") {
+      if (action.mode === "slides") {
+        setDesignEntry({
+          kind: "design"
+        });
+        return;
+      }
+      handleNewCanvas();
+      if (action.mode === "clips") setVideoClips("url");
+      else setGenerator({
+        mode: action.mode
+      });
+      return;
+    }
+    if (action.studio === "image" || action.studio === "audio") {
+      void pickThenEdit(action.studio);
+      return;
+    }
+    handleNewCanvas();
+    switch (action.studio) {
+      case "record":
+        setShowRecorder(true);
+        return;
+      case "ai-cut":
+        handleDockStudio("agent");
+        return;
+      case "set":
+        handleDockStudio("set3d");
+        return;
+      default:
+        handleDockStudio(action.studio);
+    }
+  }, [handleNewCanvas, handleDockStudio, pickThenEdit]);
+  const openMediaLink = useCallback(async (link) => {
+    var _a2, _b2, _c2;
+    const size = link.kind === "image" ? await new Promise((resolve) => {
+      const timer = setTimeout(() => resolve(void 0), MEDIA_LINK_MEASURE_MS);
+      Image.getSize(link.src, (width, height) => {
+        clearTimeout(timer);
+        resolve(width > 0 && height > 0 ? {
+          width,
+          height
+        } : void 0);
+      }, () => {
+        clearTimeout(timer);
+        resolve(void 0);
+      });
+    }) : void 0;
+    const item = openFreshBoardWithItem(link.kind, link.src, __spreadValues({
+      name: (_c2 = (_b2 = link.name) != null ? _b2 : (_a2 = link.fileName) == null ? void 0 : _a2.replace(/\.[^.]+$/, "")) != null ? _c2 : link.kind === "image" ? "Image" : "Video"
+    }, size ? {
+      size
+    } : {}));
+    if (link.kind === "video") setEditorSeed({
+      itemId: item.id
+    });
+    else if (effectiveRunAction) setMediaEdit({
+      kind: "image",
+      item
+    });
+  }, [openFreshBoardWithItem, effectiveRunAction]);
+  const designLinkRanRef = useRef(false);
+  useEffect(() => {
+    if (designLinkRanRef.current || skipFetch) return;
+    designLinkRanRef.current = true;
+    const entry = parseDesignLink({
+      designId,
+      designTemplateId,
+      artifactId
+    });
+    if (entry) setDesignEntry(entry);
+  }, []);
+  const boardLinkRanRef = useRef(false);
+  useEffect(() => {
+    if (boardLinkRanRef.current || skipFetch || !boardsSettled) return;
+    boardLinkRanRef.current = true;
+    if (parseDesignLink({
+      designId,
+      designTemplateId,
+      artifactId
+    })) return;
+    const mediaLink = parseMediaLink(media);
+    if (mediaLink) {
+      void openMediaLink(mediaLink);
+      return;
+    }
+    const action = parseCreateTileLink(createTile);
+    if (action) handleCreate(action);
+  }, [boardsSettled, skipFetch]);
   if (generator) {
     return /* @__PURE__ */ jsx(VideoGeneratorExperience, { mode: generator.mode, item: generator.item, restyle: generator.restyle, initialPrompt: generator.initialPrompt, runAction: effectiveRunAction, onClose: () => setGenerator(null), onGenerated: (url, meta) => {
       const kind = meta.mode === "audio" ? "audio" : meta.mode === "image" ? "image" : "video";
@@ -523,7 +720,7 @@ function CanvasExperience({
     } });
   }
   if (showSet3d) {
-    return /* @__PURE__ */ jsx(SetStudioExperience, { boardItems: (_d = selected == null ? void 0 : selected.board.items) != null ? _d : [], runAction: effectiveRunAction, uploadMedia: effectiveUploadMedia, onClose: () => setShowSet3d(false), onPlace: (kind, url, name) => {
+    return /* @__PURE__ */ jsx(SetStudioExperience, { boardItems: (_d = selected == null ? void 0 : selected.board.items) != null ? _d : [], runAction: effectiveRunAction, uploadMedia: effectiveUploadMedia, token, indexUrl, onClose: () => setShowSet3d(false), onPlace: (kind, url, name) => {
       addBoardItem(kind, url, {
         name
       });
@@ -596,7 +793,10 @@ function CanvasExperience({
   if (editorSeed) {
     return /* @__PURE__ */ jsxs(View, { style: styles.fill, children: [
       /* @__PURE__ */ jsx(VideoEditorExperience, { items: (_g = selected == null ? void 0 : selected.board.items) != null ? _g : [], seedItemId: editorSeed.itemId, initialTimeline: editorSeed.initialTimeline, projectTitle: editorSeed.projectTitle || (selected == null ? void 0 : selected.board.title) || (selected == null ? void 0 : selected.title), initialLogoSrc: editorSeed.logoSrc, onClose: () => setEditorSeed(null), onExport: effectiveOnExport, onPickLocalMedia, runAction: effectiveRunAction, uploadMedia: effectiveUploadMedia, audioRecorder, apolloClient, token, indexUrl, initialRailTab: editorSeed.initialRailTab }),
-      exporting ? /* @__PURE__ */ jsx(View, { style: styles.exportOverlay, children: /* @__PURE__ */ jsx(View, { style: styles.exportCard, children: exporting.error ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      exportTask ? /* @__PURE__ */ jsx(View, { style: styles.exportOverlay, children: /* @__PURE__ */ jsx(ExportTaskCard, { task: exportTask, onDismiss: () => {
+        dismissTask(exportTask.id);
+        setExportTaskId(null);
+      }, onBackground: () => setExportTaskId(null) }) }) : exporting ? /* @__PURE__ */ jsx(View, { style: styles.exportOverlay, children: /* @__PURE__ */ jsx(View, { style: styles.exportCard, children: exporting.error ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Text, { style: styles.exportError, children: "Export failed" }),
         /* @__PURE__ */ jsx(Text, { style: styles.exportStage, numberOfLines: 4, children: exporting.error }),
         /* @__PURE__ */ jsx(Pressable, { onPress: () => setExporting(null), style: styles.exportDismiss, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.exportDismissLabel, children: "Dismiss" }) })
@@ -612,19 +812,9 @@ function CanvasExperience({
   if (!selected) {
     return /* @__PURE__ */ jsxs(View, { style: styles.fill, testID, children: [
       loading && boards.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles.gridLoading, pointerEvents: "none", children: /* @__PURE__ */ jsx(ActivityIndicator, { size: "small" }) }) : null,
-      /* @__PURE__ */ jsx(CanvasBoardsGrid, { boards: boards.filter((entry) => entry.itemCount > 0), onOpen: setSelectedId, onNewCanvas: handleNewCanvas, designs, onOpenDesign: (channelId2) => setDesignEntry({
-        channelId: channelId2
-      }), onNewDesign: (kind) => setDesignEntry({
-        kind
-      }), onAskAgent: handleAskAgentFromGrid, onComposeGenerate: ({
-        mode,
-        prompt
-      }) => {
-        setGenerator({
-          mode,
-          initialPrompt: prompt
-        });
-      }, featuredLooks, onRecreateLook: (look) => {
+      /* @__PURE__ */ jsx(CanvasBoardsGrid, { boards: boards.filter((entry) => entry.itemCount > 0), onOpen: setSelectedId, onNewCanvas: handleNewCanvas, designs, onOpenDesign: (designChannelId) => setDesignEntry({
+        channelId: designChannelId
+      }), onAskAgent: handleAskAgentFromGrid, createGroups, onCreate: handleCreate, runAction: effectiveRunAction, featuredLooks, onRecreateLook: (look) => {
         setGenerator({
           mode: "video",
           initialPrompt: look.prompt
@@ -640,7 +830,12 @@ function CanvasExperience({
     ] });
   }
   return /* @__PURE__ */ jsxs(View, { style: styles.fill, testID, children: [
-    /* @__PURE__ */ jsx(CanvasToolDock, { busy: mediaBusy, boards, boardId: selectedId, runAction: effectiveRunAction, apolloClient, token, indexUrl, seedItem: boardSelectedItem, dockHidden: agentOpen, onUpload: (source) => void handleAddPhotos(source), onPlace: (item) => addBoardItem(item.type, item.src, {
+    /* @__PURE__ */ jsx(CanvasToolDock, { busy: mediaBusy, boards, boardId: selectedId, runAction: effectiveRunAction, apolloClient, token, indexUrl, seedItem: boardSelectedItem, dockHidden: agentOpen, onUpload: (source) => void handleAddPhotos(source), onPickDeviceStill: onPickLocalMedia ? async () => {
+      const picked = await onPickLocalMedia(void 0, "library");
+      const first = picked.find((p) => p.type === "image");
+      if (!first) return null;
+      return /^https?:/i.test(first.src) || !effectiveUploadMedia ? first.src : effectiveUploadMedia(first.src);
+    } : void 0, onPlace: (item) => addBoardItem(item.type, item.src, {
       name: item.generatedAssetName
     }), onPickStorage: (kind, url, name) => addBoardItem(kind, url, {
       name
@@ -666,7 +861,10 @@ function CanvasExperience({
         name: `${kind === "image" ? "Image" : kind === "audio" ? "Audio" : "Video"} \xB7 ${(meta.title || meta.prompt).slice(0, 28)}`,
         aspect: meta.aspect
       });
-    }, onAgentReplace: (itemId, url) => patchItemSrc(itemId, url), onUseTemplate: (template) => void handleUseTemplate(template) }) }),
+    }, onAgentReplace: (itemId, url) => patchItemSrc(itemId, url), onUseTemplate: (template) => void handleUseTemplate(template), shareLinks: token && indexUrl ? {
+      token,
+      indexUrl
+    } : void 0 }) }),
     uploadStatus ? /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles.uploadToast, children: [
       mediaBusy ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: "#2563eb" }) : null,
       /* @__PURE__ */ jsx(Text, { style: styles.uploadToastText, numberOfLines: 2, children: uploadStatus })