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

package/lib/features/canvas/CanvasExperience.js

@@ -0,0 +1,859 @@
+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;
+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));
+function untitledBoard(channelId) {
+  const id = (channelId == null ? void 0 : channelId.trim()) || newBoardId();
+  return {
+    channelId: id,
+    title: "",
+    savedAt: Date.now(),
+    itemCount: 0,
+    board: emptyBoardState()
+  };
+}
+const SAVE_DEBOUNCE_MS = 600;
+function CanvasExperience({
+  token,
+  indexUrl,
+  channelId,
+  board: explicitBoard,
+  sessionError,
+  onItemAction,
+  onExportVideo,
+  onPickLocalMedia,
+  uploadMedia,
+  audioRecorder,
+  runMediaAction,
+  apolloClient,
+  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]);
+  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 [loading, setLoading] = useState(!explicitBoard && cachedBoards == null);
+  const [error, setError] = useState(null);
+  const [selectedId, setSelectedId] = useState(null);
+  const [agentOpen, setAgentOpen] = useState(false);
+  const [gridAgentOpen, setGridAgentOpen] = useState(false);
+  const [generation, setGeneration] = useState(0);
+  const [mediaBusy, setMediaBusy] = useState(false);
+  const [uploadStatus, setUploadStatus] = useState(null);
+  const lastSavedByIdRef = useRef({});
+  const skipFetch = Boolean(explicitBoard);
+  useEffect(() => {
+    if (skipFetch || !indexUrl) return void 0;
+    let cancelled = false;
+    void hydrateCanvasBoardsSnapshot(indexUrl).then((rows) => {
+      if (cancelled || !(rows == null ? void 0 : rows.length)) return;
+      setBoards((prev) => prev.length > 0 ? prev : rows);
+      setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [indexUrl, skipFetch]);
+  useEffect(() => {
+    if (skipFetch) return void 0;
+    if (!token) {
+      if (getCachedCanvasBoards(indexUrl) == null) {
+        setLoading(true);
+      }
+      setError(null);
+      return void 0;
+    }
+    const controller = new AbortController();
+    let cancelled = false;
+    const hasCache = getCachedCanvasBoards(indexUrl) != null || readCachedCanvasBoards(apolloClient).length > 0;
+    (async () => {
+      if (!hasCache) {
+        setLoading(true);
+        setError(null);
+      }
+      const result = await fetchMyCanvasBoards({
+        url: indexUrl,
+        token,
+        signal: controller.signal
+      });
+      if (cancelled) return;
+      if (__DEV__) {
+        console.log("[CanvasExperience] boards:", JSON.stringify(result.boards.map((b) => ({
+          channelId: b.channelId,
+          title: b.title,
+          items: b.board.items.map((i) => ({
+            type: i.type,
+            x: i.x,
+            y: i.y,
+            w: i.width,
+            h: i.height,
+            z: i.zIndex,
+            src: `${i.src.slice(0, 96)}\u2026`
+          }))
+        }))));
+      }
+      if (result.error) {
+        if (!hasCache) setError(result.error);
+        setLoading(false);
+        return;
+      }
+      lastSavedByIdRef.current = Object.fromEntries(result.boards.map((entry) => [entry.channelId, boardSignature(entry.board)]));
+      setBoards(result.boards);
+      writeCachedCanvasBoards(apolloClient, result.boards);
+      setError(null);
+      setLoading(false);
+    })();
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [indexUrl, token, skipFetch, generation, apolloClient]);
+  useEffect(() => {
+    if (skipFetch || loading || !indexUrl) return;
+    persistCanvasBoardsSnapshot(indexUrl, boards);
+  }, [boards, indexUrl, loading, skipFetch]);
+  useEffect(() => {
+    if (selectedId || !channelId || boards.length === 0) return;
+    const match = boards.find((entry) => entry.channelId === channelId);
+    if (match) setSelectedId(match.channelId);
+  }, [boards, channelId, selectedId]);
+  const selected = useMemo(() => selectedId ? boards.find((entry) => entry.channelId === selectedId) : void 0, [boards, selectedId]);
+  const playableBoard = useCallback((board) => {
+    if (!indexUrl) return board;
+    return __spreadProps(__spreadValues({}, board), {
+      items: board.items.map((item) => item.type === "video" || item.type === "audio" ? __spreadProps(__spreadValues({}, item), {
+        src: proxiedMediaUrl(indexUrl, item.src)
+      }) : item)
+    });
+  }, [indexUrl]);
+  const handleDockStudio = useCallback((studio) => {
+    if (studio === "video") {
+      setEditorSeed({
+        itemId: null
+      });
+      return;
+    }
+    if (studio === "agent") {
+      setEditorSeed({
+        itemId: null,
+        initialRailTab: "agent"
+      });
+      return;
+    }
+    if (studio === "influencer") {
+      setShowInfluencer(true);
+      return;
+    }
+    if (studio === "set3d") {
+      setShowSet3d(true);
+      return;
+    }
+    if (studio === "frames") {
+      setShowFrames(true);
+      return;
+    }
+    if (studio === "moodboard") {
+      setShowMoodboard(true);
+      return;
+    }
+    const kind = studio === "flyers" ? "postcard" : studio === "carousel" ? "carousel" : "design";
+    setDesignEntry({
+      kind
+    });
+  }, []);
+  const reload = useCallback(() => setGeneration((n) => n + 1), []);
+  const handleBoardChange = useCallback((board) => {
+    setBoards((prev) => prev.map((entry) => entry.channelId === selectedId ? __spreadProps(__spreadValues({}, entry), {
+      board,
+      title: board.title || entry.title,
+      itemCount: board.items.length,
+      savedAt: board.savedAt
+    }) : entry));
+  }, [selectedId]);
+  const handleAddPhotos = useCallback(async (source) => {
+    if (!onPickLocalMedia || mediaBusy) return;
+    try {
+      const picked = await onPickLocalMedia((message) => {
+        setMediaBusy(true);
+        setUploadStatus(message);
+      }, source);
+      if (!picked.length) return;
+      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 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 nextState = buildBoardState(items, entry.board.zoom, entry.title);
+          return __spreadProps(__spreadValues({}, entry), {
+            title: nextState.title || entry.title,
+            itemCount: items.length,
+            board: __spreadProps(__spreadValues({}, entry.board), {
+              items,
+              savedAt: Date.now(),
+              title: nextState.title
+            })
+          });
+        });
+      });
+    } catch (err) {
+      if (__DEV__) {
+        console.warn("[CanvasExperience] add photos failed:", err);
+      }
+    } finally {
+      setMediaBusy(false);
+      setUploadStatus(null);
+    }
+  }, [onPickLocalMedia, selectedId, channelId, mediaBusy]);
+  const handleNewCanvas = useCallback(() => {
+    const entry = untitledBoard();
+    lastSavedByIdRef.current[entry.channelId] = boardSignature(entry.board);
+    setBoards((prev) => [entry, ...prev]);
+    setSelectedId(entry.channelId);
+  }, []);
+  const handleAskAgentFromGrid = useCallback(() => {
+    setGridAgentOpen(true);
+  }, []);
+  const closeBoard = useCallback(() => {
+    setAgentOpen(false);
+    setGridAgentOpen(false);
+    setBoardSelectedItem(null);
+    setSelectedId(null);
+    setBoards((prev) => prev.filter((entry) => entry.itemCount > 0));
+  }, []);
+  useEffect(() => {
+    if (skipFetch || loading || !token || !indexUrl || !selected) return void 0;
+    const state = buildBoardState(selected.board.items, selected.board.zoom, selected.title);
+    if (state.items.length === 0) return void 0;
+    const sig = boardSignature(state);
+    if (lastSavedByIdRef.current[selected.channelId] === sig) return void 0;
+    const timer = setTimeout(() => {
+      void pushCanvasBoard({
+        url: indexUrl,
+        token,
+        channelId: selected.channelId,
+        state
+      }).then((ok) => {
+        if (ok) lastSavedByIdRef.current[selected.channelId] = sig;
+      });
+    }, SAVE_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [selected, token, indexUrl, loading, skipFetch]);
+  const [editorSeed, setEditorSeed] = useState(null);
+  const [mediaEdit, setMediaEdit] = useState(null);
+  const [generator, setGenerator] = useState(null);
+  const [videoEdit, setVideoEdit] = useState(null);
+  const [videoClips, setVideoClips] = useState(null);
+  const [showFrames, setShowFrames] = useState(false);
+  const [showMoodboard, setShowMoodboard] = useState(false);
+  const [showSet3d, setShowSet3d] = useState(false);
+  const [showInfluencer, setShowInfluencer] = useState(false);
+  const [showRecorder, setShowRecorder] = useState(false);
+  const [boardSelectedItem, setBoardSelectedItem] = useState(null);
+  const [exporting, setExporting] = useState(null);
+  const [designEntry, setDesignEntry] = useState(null);
+  const [designs, setDesigns] = useState([]);
+  const [featuredLooks, setFeaturedLooks] = useState([]);
+  useEffect(() => {
+    if (skipFetch || !token || !indexUrl || designEntry) return void 0;
+    const controller = new AbortController();
+    void fetchMyDesigns({
+      url: indexUrl,
+      token,
+      signal: controller.signal
+    }).then((result) => {
+      setDesigns(result.designs);
+    });
+    return () => controller.abort();
+  }, [token, indexUrl, skipFetch, designEntry, generation]);
+  useEffect(() => {
+    if (!token && !effectiveRunAction && !apolloClient) {
+      setFeaturedLooks([]);
+      return;
+    }
+    let cancelled = false;
+    void listStudioLooks(effectiveRunAction, {
+      limit: 12
+    }, {
+      client: apolloClient,
+      token,
+      indexUrl
+    }).then((page) => {
+      if (!cancelled) setFeaturedLooks(page.looks);
+    }).catch(() => {
+      if (!cancelled) setFeaturedLooks([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [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);
+    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);
+    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 nextState = buildBoardState(items, entry.board.zoom, entry.title);
+        return __spreadProps(__spreadValues({}, entry), {
+          title: nextState.title || entry.title,
+          itemCount: items.length,
+          board: __spreadProps(__spreadValues({}, entry.board), {
+            items,
+            savedAt: Date.now(),
+            title: nextState.title
+          })
+        });
+      });
+    });
+    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 entry = untitledBoard();
+    const items = [__spreadProps(__spreadValues({}, item), {
+      zIndex: 1
+    })];
+    const nextState = buildBoardState(items, entry.board.zoom, entry.title);
+    const next = __spreadProps(__spreadValues({}, entry), {
+      title: nextState.title || entry.title,
+      itemCount: items.length,
+      board: __spreadProps(__spreadValues({}, entry.board), {
+        items,
+        savedAt: Date.now(),
+        title: nextState.title
+      })
+    });
+    lastSavedByIdRef.current[entry.channelId] = boardSignature(next.board);
+    setBoards((prev) => [next, ...prev]);
+    setSelectedId(entry.channelId);
+    setGridAgentOpen(false);
+    return item;
+  }, [indexUrl]);
+  const addRenderedVideo = useCallback((url, opts) => addBoardItem("video", url, opts), [addBoardItem]);
+  const patchItemSrc = useCallback((itemId, url, type) => {
+    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 nextState = buildBoardState(items, entry.board.zoom, entry.title);
+      return __spreadProps(__spreadValues({}, entry), {
+        board: __spreadProps(__spreadValues({}, entry.board), {
+          items,
+          savedAt: Date.now(),
+          title: nextState.title
+        })
+      });
+    }));
+  }, [selectedId, indexUrl]);
+  const exportBusyRef = useRef(false);
+  const effectiveOnExport = useMemo(() => {
+    if (!effectiveRunAction) return onExportVideo;
+    const runAction = effectiveRunAction;
+    const upload = effectiveUploadMedia;
+    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);
+      }).catch((err) => {
+        setExporting({
+          stage: "",
+          error: friendlyMediaError(err, "video export")
+        });
+      }).finally(() => {
+        exportBusyRef.current = false;
+      });
+    };
+  }, [onExportVideo, effectiveRunAction, effectiveUploadMedia, addRenderedVideo]);
+  const handleItemAction = useCallback((action, item) => {
+    if (action === "create-video") {
+      setGenerator({
+        mode: "video",
+        item
+      });
+      return;
+    }
+    if (action === "restyle-video") {
+      setGenerator({
+        mode: "video",
+        item,
+        restyle: true
+      });
+      return;
+    }
+    if (action === "promo-video") {
+      setGenerator({
+        mode: "promo",
+        item
+      });
+      return;
+    }
+    if (action === "edit-video") {
+      setVideoEdit(item);
+      return;
+    }
+    if (action === "trim-video") {
+      setVideoClips(item);
+      return;
+    }
+    if ((action === "edit-image" || action === "mark-edit") && effectiveRunAction) {
+      setMediaEdit(__spreadValues({
+        kind: "image",
+        item
+      }, action === "mark-edit" ? {
+        initialTab: "aiedit"
+      } : {}));
+      return;
+    }
+    if (action === "edit-audio" && effectiveRunAction) {
+      setMediaEdit({
+        kind: "audio",
+        item
+      });
+      return;
+    }
+    onItemAction == null ? void 0 : onItemAction(action, item);
+  }, [onItemAction, effectiveRunAction]);
+  const handleUseTemplate = useCallback(async (template) => {
+    try {
+      const imported = await loadTemplateTimeline(template);
+      setEditorSeed({
+        itemId: null,
+        initialTimeline: imported.timeline,
+        projectTitle: imported.title,
+        logoSrc: imported.logoSrc
+      });
+    } catch (e) {
+    }
+  }, []);
+  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";
+      addBoardItem(kind, url, {
+        name: `${kind === "image" ? "Image" : kind === "audio" ? "Audio" : meta.mode === "promo" ? "Promo" : "Video"} \xB7 ${meta.prompt.slice(0, 28)}`,
+        aspect: meta.aspect
+      });
+      setGenerator(null);
+    }, onPromoDesigned: (designed) => {
+      const imported = promoProjectToTimeline(designed.project, designed.title);
+      setGenerator(null);
+      setEditorSeed({
+        itemId: null,
+        initialTimeline: imported.timeline,
+        projectTitle: imported.title,
+        logoSrc: imported.logoSrc
+      });
+    } });
+  }
+  if (showFrames) {
+    return /* @__PURE__ */ jsx(FrameExtractorExperience, { boardItems: (_b = selected == null ? void 0 : selected.board.items) != null ? _b : [], seedVideo: (boardSelectedItem == null ? void 0 : boardSelectedItem.type) === "video" ? boardSelectedItem : null, runAction: effectiveRunAction, onClose: () => setShowFrames(false), onPlace: (urls) => {
+      urls.forEach((url, i) => addBoardItem("image", url, {
+        name: `Frame ${i + 1}`
+      }));
+      setShowFrames(false);
+    } });
+  }
+  if (showMoodboard) {
+    return /* @__PURE__ */ jsx(MoodboardExperience, { boardItems: (_c = selected == null ? void 0 : selected.board.items) != null ? _c : [], onClose: () => setShowMoodboard(false), onUseBrief: (brief) => {
+      setShowMoodboard(false);
+      setGenerator({
+        mode: "image",
+        initialPrompt: brief
+      });
+    } });
+  }
+  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) => {
+      addBoardItem(kind, url, {
+        name
+      });
+    } });
+  }
+  if (showRecorder) {
+    return /* @__PURE__ */ jsx(CameraRecorderExperience, { onClose: () => setShowRecorder(false), onPick: async (source) => {
+      if (!onPickLocalMedia) return [];
+      return onPickLocalMedia(void 0, source);
+    }, onPlaced: (items) => {
+      for (const item of items) {
+        addBoardItem(item.type === "video" ? "video" : "image", item.src, {
+          name: item.generatedAssetName,
+          aspect: item.aspect
+        });
+      }
+    } });
+  }
+  if (showInfluencer) {
+    return /* @__PURE__ */ jsx(InfluencerStudioExperience, { boardItems: (_e = selected == null ? void 0 : selected.board.items) != null ? _e : [], runAction: effectiveRunAction, onClose: () => setShowInfluencer(false), onPlace: (url, name) => {
+      addBoardItem("video", url, {
+        name,
+        aspect: "9:16"
+      });
+      setShowInfluencer(false);
+    } });
+  }
+  if (videoEdit) {
+    return /* @__PURE__ */ jsx(VideoEditExperience, { src: videoEdit.src, name: videoEdit.generatedAssetName, items: (_f = selected == null ? void 0 : selected.board.items) != null ? _f : [], runAction: effectiveRunAction, onClose: () => setVideoEdit(null), onApplied: (url, kind) => {
+      if (kind === "audio") {
+        addBoardItem("audio", url, {
+          name: "Extracted audio"
+        });
+      } else {
+        patchItemSrc(videoEdit.id, url, kind === "image" ? "image" : "video");
+      }
+      setVideoEdit(null);
+    } });
+  }
+  if (videoClips) {
+    return /* @__PURE__ */ jsx(VideoClipsExperience, { item: videoClips === "url" ? null : videoClips, runAction: effectiveRunAction, onClose: () => setVideoClips(null), onClips: (urls, aspect) => {
+      urls.forEach((url, i) => addRenderedVideo(url, {
+        name: `Clip ${i + 1}`,
+        aspect
+      }));
+      setVideoClips(null);
+    } });
+  }
+  if (explicitBoard) {
+    return /* @__PURE__ */ jsx(NativeCanvasViewer, { board: playableBoard(explicitBoard), controls: true, onItemAction: handleItemAction, testID });
+  }
+  if (sessionError) {
+    return /* @__PURE__ */ jsx(Notice, { isDark, title: "Couldn\u2019t open your canvases", detail: sessionError });
+  }
+  if (error && boards.length === 0) {
+    return /* @__PURE__ */ jsx(Notice, { isDark, title: "Couldn\u2019t load your canvases", detail: error, fine: describeSession(token, indexUrl), onRetry: reload });
+  }
+  if (mediaEdit) {
+    const shared = {
+      src: mediaEdit.item.src,
+      name: mediaEdit.item.generatedAssetName,
+      runAction: effectiveRunAction,
+      onClose: () => setMediaEdit(null),
+      onSave: (url) => {
+        patchItemSrc(mediaEdit.item.id, url, mediaEdit.kind);
+        setMediaEdit(null);
+      }
+    };
+    return mediaEdit.kind === "image" ? /* @__PURE__ */ jsx(ImageEditorExperience, __spreadProps(__spreadValues({}, shared), { initialTab: mediaEdit.initialTab })) : /* @__PURE__ */ jsx(AudioEditorExperience, __spreadValues({}, shared));
+  }
+  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: [
+        /* @__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" }) })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ActivityIndicator, { color: "#F7F7FA" }),
+        /* @__PURE__ */ jsx(Text, { style: styles.exportStage, children: exporting.stage })
+      ] }) }) }) : null
+    ] });
+  }
+  if (designEntry) {
+    return /* @__PURE__ */ jsx(View, { style: styles.fill, testID, children: /* @__PURE__ */ jsx(DesignExperience, { token, indexUrl, entry: designEntry, onClose: () => setDesignEntry(null), onPickLocalMedia, uploadMedia: effectiveUploadMedia, runMediaAction: effectiveRunAction }) });
+  }
+  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) => {
+        setGenerator({
+          mode: "video",
+          initialPrompt: look.prompt
+        });
+      } }),
+      /* @__PURE__ */ jsx(CanvasAgentChatPane, { visible: gridAgentOpen, onClose: () => setGridAgentOpen(false), runAction: effectiveRunAction, boardItems: [], onGenerated: (url, meta) => {
+        const kind = meta.mode === "audio" ? "audio" : meta.mode === "image" ? "image" : "video";
+        return openFreshBoardWithItem(kind, url, {
+          name: `${kind === "image" ? "Image" : kind === "audio" ? "Audio" : "Video"} \xB7 ${(meta.title || meta.prompt).slice(0, 28)}`,
+          aspect: meta.aspect
+        });
+      }, onUseTemplate: (template) => void handleUseTemplate(template) })
+    ] });
+  }
+  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, {
+      name: item.generatedAssetName
+    }), onPickStorage: (kind, url, name) => addBoardItem(kind, url, {
+      name
+    }), onStudio: handleDockStudio, onSlides: () => setDesignEntry({
+      kind: "design"
+    }), onGenerated: (url, meta) => {
+      const kind = meta.mode === "audio" ? "audio" : meta.mode === "image" ? "image" : "video";
+      addBoardItem(kind, url, {
+        name: `${kind === "image" ? "Image" : kind === "audio" ? "Audio" : meta.mode === "promo" ? "Promo" : meta.mode === "clips" ? "Clip" : "Video"} \xB7 ${meta.prompt.slice(0, 28)}`,
+        aspect: meta.aspect
+      });
+    }, onPromoDesigned: (designed) => {
+      const imported = promoProjectToTimeline(designed.project, designed.title);
+      setEditorSeed({
+        itemId: null,
+        initialTimeline: imported.timeline,
+        projectTitle: imported.title,
+        logoSrc: imported.logoSrc
+      });
+    }, onEditReplaced: (itemId, url) => patchItemSrc(itemId, url), onEditVideo: (item) => setVideoEdit(item), onRecord: () => setShowRecorder(true), children: /* @__PURE__ */ jsx(NativeCanvasViewer, { board: playableBoard(selected.board), controls: true, onBoardsPress: closeBoard, onItemAction: handleItemAction, onBoardChange: handleBoardChange, onAgentOpenChange: setAgentOpen, onSelectionChange: setBoardSelectedItem, runAction: effectiveRunAction, onAgentGenerated: (url, meta) => {
+      const kind = meta.mode === "audio" ? "audio" : meta.mode === "image" ? "image" : "video";
+      return addBoardItem(kind, url, {
+        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) }) }),
+    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 })
+    ] }) : null
+  ] });
+}
+function Notice({
+  isDark,
+  title,
+  detail,
+  fine,
+  primaryLabel,
+  onPrimary,
+  onRetry,
+  retryLabel = "Try again"
+}) {
+  return /* @__PURE__ */ jsxs(View, { style: styles.center, children: [
+    /* @__PURE__ */ jsx(Text, { style: [styles.title, isDark && styles.textLight], children: title }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.detail, isDark && styles.textMuted], children: detail }),
+    fine ? /* @__PURE__ */ jsx(Text, { style: styles.fine, children: fine }) : null,
+    onPrimary ? /* @__PURE__ */ jsx(Pressable, { onPress: onPrimary, style: styles.primaryCta, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.primaryCtaLabel, children: primaryLabel != null ? primaryLabel : "Create" }) }) : null,
+    onRetry ? /* @__PURE__ */ jsx(Pressable, { onPress: onRetry, style: styles.retry, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.retryLabel, children: retryLabel }) }) : null
+  ] });
+}
+const styles = StyleSheet.create({
+  primaryCta: {
+    marginTop: 16,
+    paddingHorizontal: 22,
+    paddingVertical: 11,
+    borderRadius: 11,
+    backgroundColor: "#2563eb"
+  },
+  primaryCtaLabel: {
+    color: "#ffffff",
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  fill: {
+    flex: 1
+  },
+  gridLoading: {
+    position: "absolute",
+    top: 12,
+    right: 16,
+    zIndex: 4
+  },
+  center: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: "600",
+    color: "#0f172a",
+    marginBottom: 6
+  },
+  detail: {
+    fontSize: 13,
+    color: "#64748b",
+    textAlign: "center"
+  },
+  fine: {
+    marginTop: 10,
+    fontSize: 11,
+    color: "#94a3b8",
+    textAlign: "center",
+    paddingHorizontal: 20,
+    lineHeight: 15
+  },
+  spaced: {
+    marginTop: 10
+  },
+  textLight: {
+    color: "#f8fafc"
+  },
+  textMuted: {
+    color: "#94a3b8"
+  },
+  retry: {
+    marginTop: 16,
+    paddingHorizontal: 18,
+    paddingVertical: 10,
+    borderRadius: 10,
+    backgroundColor: "#2563eb"
+  },
+  retryLabel: {
+    color: "#ffffff",
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  backPill: {
+    position: "absolute",
+    top: 12,
+    left: 12,
+    zIndex: 40,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    maxWidth: 220,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 12,
+    backgroundColor: "#ffffff",
+    borderWidth: 1,
+    borderColor: "rgba(15,23,42,0.08)",
+    shadowColor: "#0f172a",
+    shadowOpacity: 0.08,
+    shadowRadius: 8,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    elevation: 2
+  },
+  backLabel: {
+    fontSize: 15,
+    fontWeight: "600",
+    color: "#475569"
+  },
+  uploadToast: {
+    position: "absolute",
+    top: 56,
+    left: 16,
+    right: 16,
+    zIndex: 60,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    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
+  },
+  uploadToastText: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#0f172a"
+  },
+  exportOverlay: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
+    backgroundColor: "rgba(0,0,0,0.65)",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 32
+  }),
+  exportCard: {
+    minWidth: 220,
+    maxWidth: 320,
+    alignItems: "center",
+    gap: 10,
+    backgroundColor: "#17171C",
+    borderRadius: 16,
+    paddingVertical: 20,
+    paddingHorizontal: 24
+  },
+  exportStage: {
+    fontSize: 13,
+    color: "#CBD5E1",
+    textAlign: "center"
+  },
+  exportError: {
+    fontSize: 15,
+    fontWeight: "600",
+    color: "#F87171"
+  },
+  exportDismiss: {
+    marginTop: 4,
+    backgroundColor: "#26262E",
+    borderRadius: 16,
+    paddingHorizontal: 14,
+    paddingVertical: 8
+  },
+  exportDismissLabel: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#F7F7FA"
+  }
+});export{CanvasExperience,CanvasExperience as default};//# sourceMappingURL=CanvasExperience.js.map