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

package/lib/features/design/DesignExperience.js

@@ -1,4 +1,4 @@
-import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useMemo,useState,useRef,useEffect,useCallback}from'react';import {View,Text,ActivityIndicator,Linking,Share,ScrollView,StyleSheet}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {friendlyMediaError}from'../canvas/videoEditor/mediaActions.js';import {createRemoteRunAction,createRemoteUploadMedia}from'../canvas/videoEditor/remoteMediaClient.js';import {newBoardId,buildBoardState,frameForUpload}from'../canvas/canvasCore.js';import {fetchMyCanvasBoards,pushCanvasBoard,newBoardChannelId}from'../canvas/surfaceIndex.js';import {useCanvasTheme,themedStyles}from'../canvas/canvasTheme.js';import {Pressable,SectionHeader,Skeleton,RADIUS,pressedStyle,SPACE,HIT,TYPE}from'../canvas/canvasUi.js';import {newDesignDoc,newDesignChannelId,designSignature,buildDesignState,parseDesignDoc}from'./designCore.js';import {fetchMyDesigns,pushDesignDoc,defaultTitle}from'./designIndex.js';import {deriveBlankPixelUrl,renderDesignDoc}from'./exportDesign.js';import {DesignEditorExperience}from'./DesignEditorExperience.js';var __defProp = Object.defineProperty;
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useMemo,useCallback,useState,useRef,useEffect}from'react';import {Alert,View,ActivityIndicator,Text,StyleSheet}from'react-native';import {gql}from'@apollo/client/index.js';import {useCanvasTheme,themedStyles}from'../canvas/canvasTheme.js';import {ActionButton,SPACE,TYPE}from'../canvas/canvasUi.js';import {DESIGN_CATALOG_QUERY,fetchDesignCatalog,fetchDesignCatalogViaClient}from'../canvas/designCatalog.js';import {designCategoryFor}from'../canvas/designCategories.js';import {DesignCategoryGallery}from'../canvas/DesignCategoryGallery.js';import {deriveBackendGraphqlUrl,createRemoteUploadMedia,createRemoteConnectorExec}from'../canvas/videoEditor/remoteMediaClient.js';import {CAROUSEL_CONNECTOR}from'./doc/aiDesign.js';import {listDesignArtifacts,loadOwnedDesignArtifact,isDesignArtifactId,deleteDesignArtifact,buildDesignArtifact,newArtifactId,saveDesignArtifact}from'./doc/artifacts.js';import {backendCatalogRows,findDesignTemplate,blankDocForSize,catalogToDoc,catalogKind,blankDocCustom}from'./doc/newDoc.js';import {DESIGN_SIZES}from'./doc/sizes.js';import {legacyToDoc,legacyKind}from'./doc/legacyDoc.js';import {newDesignDoc}from'./designCore.js';import {fetchMyDesigns}from'./designIndex.js';import {DesignEditorExperience}from'./DesignEditorExperience.js';import {DesignHome}from'./home/DesignHome.js';import {createDesignImagePicker}from'./pickDesignImage.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -17,585 +17,332 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const SAVE_DEBOUNCE_MS = 2200;
+const TEMPLATE_DOC = gql(DESIGN_CATALOG_QUERY);
+function fullSize(blank) {
+  var _a;
+  return (_a = DESIGN_SIZES.find((s) => s.id === blank.id)) != null ? _a : null;
+}
+let editorKeyCounter = 0;
+const editorKey = () => `ed-${Date.now().toString(36)}-${editorKeyCounter += 1}`;
 function DesignExperience({
   token,
   indexUrl,
+  graphqlUrl: graphqlUrlProp,
+  apolloClient,
   entry,
   onClose,
   onPickLocalMedia,
   uploadMedia,
+  sessionId,
+  sessionError,
+  runAction,
   runMediaAction,
   testID
 }) {
   const theme = useCanvasTheme();
   const styles = makeStyles(theme);
-  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 index = useMemo(() => indexUrl ? {
+    url: indexUrl,
+    token
+  } : null, [indexUrl, token]);
+  const graphqlUrl = useMemo(() => graphqlUrlProp || (indexUrl ? deriveBackendGraphqlUrl(indexUrl) : null), [graphqlUrlProp, indexUrl]);
+  const loadCatalog = useMemo(() => {
+    if (graphqlUrl) return (group, opts) => fetchDesignCatalog(graphqlUrl, token, group, opts);
+    if (apolloClient) return (group, opts) => fetchDesignCatalogViaClient(apolloClient, group, opts);
+    return void 0;
+  }, [graphqlUrl, token, apolloClient]);
+  const readRows = useMemo(() => {
+    if (graphqlUrl) return backendCatalogRows(graphqlUrl, token);
+    if (apolloClient) {
+      return async (filter) => {
+        var _a;
+        const {
+          data
+        } = await apolloClient.query({
+          query: TEMPLATE_DOC,
+          variables: {
+            filter
+          },
+          fetchPolicy: "no-cache"
+        });
+        const nodes = (_a = data == null ? void 0 : data.formTemplateSubmissions) == null ? void 0 : _a.nodes;
+        return Array.isArray(nodes) ? nodes : [];
+      };
+    }
+    return null;
+  }, [graphqlUrl, token, apolloClient]);
+  const readTemplate = useCallback((id) => readRows ? findDesignTemplate(id, readRows) : Promise.resolve(null), [readRows]);
+  const effectiveUpload = useMemo(() => uploadMedia != null ? uploadMedia : token && indexUrl ? createRemoteUploadMedia(token, indexUrl) : void 0, [uploadMedia, token, indexUrl]);
+  const pickImage = useMemo(() => createDesignImagePicker(onPickLocalMedia, effectiveUpload), [onPickLocalMedia, effectiveUpload]);
+  const runCarousel = useMemo(() => {
+    const seam = runAction != null ? runAction : typeof runMediaAction === "function" ? runMediaAction : void 0;
+    if (seam) return (action, params) => seam(CAROUSEL_CONNECTOR, action, params);
+    if (token && indexUrl) {
+      const exec = createRemoteConnectorExec(token, indexUrl);
+      return (action, params, timeoutMs) => exec(CAROUSEL_CONNECTOR, action, params, {
+        timeoutMs
+      });
+    }
+    return void 0;
+  }, [runAction, runMediaAction, token, indexUrl]);
   const [designs, setDesigns] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const [open, setOpen] = useState(() => entry && "kind" in entry ? {
-    channelId: newDesignChannelId(),
-    doc: newDesignDoc(entry.kind)
-  } : null);
-  const [canvasImages, setCanvasImages] = useState([]);
-  const [exporting, setExporting] = useState(null);
-  const [results, setResults] = useState(null);
-  const lastSavedRef = useRef({});
+  const [loading, setLoading] = useState(Boolean(index));
+  const [listError, setListError] = useState(null);
+  const [listRead, setListRead] = useState(0);
+  const refresh = useCallback(() => setListRead((n) => n + 1), []);
+  const [screen, setScreen] = useState(() => entry ? {
+    kind: "loading",
+    label: "Opening\u2026"
+  } : {
+    kind: "home"
+  });
+  const directEntry = useRef(Boolean(entry));
+  const onHome = screen.kind === "home";
   useEffect(() => {
-    if (!token || !indexUrl) {
-      setLoading(false);
-      return void 0;
-    }
+    if (!index || !onHome) return void 0;
     const controller = new AbortController();
-    let cancelled = false;
     setLoading(true);
-    void fetchMyDesigns({
-      url: indexUrl,
-      token,
+    void listDesignArtifacts(__spreadProps(__spreadValues({}, index), {
       signal: controller.signal
-    }).then((result) => {
-      if (cancelled) return;
+    })).then((result) => {
+      if (controller.signal.aborted) return;
       setDesigns(result.designs);
-      setError(result.error);
+      setListError(result.error);
       setLoading(false);
-      if (entry && "channelId" in entry) {
-        const match = result.designs.find((d) => d.channelId === entry.channelId);
-        if (match) setOpen({
-          channelId: match.channelId,
-          doc: match.doc
-        });
-      }
-    });
-    return () => {
-      cancelled = true;
-      controller.abort();
-    };
-  }, [token, indexUrl]);
-  useEffect(() => {
-    if (!token || !indexUrl || !open) return void 0;
-    const controller = new AbortController();
-    void fetchMyCanvasBoards({
-      url: indexUrl,
-      token,
-      signal: controller.signal
-    }).then((result) => {
-      const urls = [];
-      for (const board of result.boards) {
-        for (const item of board.board.items) {
-          if (item.type === "image" && /^https?:/i.test(item.src)) urls.push(item.src);
-        }
-      }
-      setCanvasImages([...new Set(urls)].slice(0, 24));
     });
     return () => controller.abort();
-  }, [token, indexUrl, open == null ? void 0 : open.channelId]);
-  useEffect(() => {
-    if (!open || !token || !indexUrl) return void 0;
-    const sig = designSignature(open.doc);
-    if (lastSavedRef.current[open.channelId] === sig) return void 0;
-    const timer = setTimeout(() => {
-      const state = buildDesignState(open.doc);
-      void pushDesignDoc({
-        url: indexUrl,
-        token,
-        channelId: open.channelId,
-        doc: state
-      }).then((ok) => {
-        if (ok) lastSavedRef.current[open.channelId] = sig;
+  }, [index, onHome, listRead]);
+  const openDoc = useCallback((doc, docKind, opened) => {
+    setScreen({
+      kind: "editor",
+      doc,
+      docKind,
+      opened: opened != null ? opened : null,
+      key: editorKey()
+    });
+  }, []);
+  const openSize = useCallback((size) => openDoc(blankDocForSize(size), size.kind), [openDoc]);
+  const openTemplate = useCallback(async (id) => {
+    setScreen({
+      kind: "loading",
+      label: "Opening template\u2026"
+    });
+    try {
+      const template = await readTemplate(id);
+      if (!template) {
+        setScreen({
+          kind: "error",
+          message: "That template is no longer in the catalog."
+        });
+        return;
+      }
+      openDoc(catalogToDoc(template), catalogKind(template));
+    } catch (err) {
+      setScreen({
+        kind: "error",
+        message: err instanceof Error ? err.message : "The template could not be opened."
+      });
+    }
+  }, [readTemplate, openDoc]);
+  const openSaved = useCallback(async (id) => {
+    if (!index) {
+      setScreen({
+        kind: "error",
+        message: "Sign in to open your designs."
       });
-    }, SAVE_DEBOUNCE_MS);
-    return () => clearTimeout(timer);
-  }, [open, token, indexUrl]);
-  const closeEditor = useCallback(() => {
-    setOpen(null);
-    setResults(null);
-    if (entry) onClose == null ? void 0 : onClose();
-    else if (token && indexUrl) {
-      void fetchMyDesigns({
-        url: indexUrl,
-        token
-      }).then((r) => setDesigns(r.designs));
+      return;
     }
-  }, [entry, onClose, token, indexUrl]);
-  const exportBusyRef = useRef(false);
-  const handleExport = useCallback((doc) => {
-    const runAction = effectiveRunAction;
-    const blankUrl = deriveBlankPixelUrl(indexUrl);
-    if (!runAction || !blankUrl) {
-      setExporting({
-        stage: "",
-        error: "Export needs a signed-in session."
+    setScreen({
+      kind: "loading",
+      label: "Opening design\u2026"
+    });
+    const {
+      artifact,
+      error
+    } = await loadOwnedDesignArtifact(index, id);
+    if (artifact) openDoc(artifact.doc, artifact.kind, artifact);
+    else setScreen({
+      kind: "error",
+      message: error != null ? error : "That design is not one of yours, or it was deleted."
+    });
+  }, [index, openDoc]);
+  const openLegacy = useCallback(async (channelId) => {
+    var _a, _b;
+    if (!index) {
+      setScreen({
+        kind: "error",
+        message: "Sign in to open your designs."
       });
       return;
     }
-    if (exportBusyRef.current) return;
-    exportBusyRef.current = true;
-    setExporting({
-      stage: "Starting render"
+    setScreen({
+      kind: "loading",
+      label: "Opening design\u2026"
+    });
+    const result = await fetchMyDesigns({
+      url: index.url,
+      token: index.token
     });
-    void renderDesignDoc(doc.pages, {
-      runAction,
-      blankUrl,
-      uploadMedia: effectiveUploadMedia,
-      onProgress: (p) => setExporting(p)
-    }).then((urls) => {
-      setExporting(null);
-      setResults({
-        pages: urls.map((url, i) => {
-          var _a, _b;
-          return {
-            name: (_b = (_a = doc.pages[i]) == null ? void 0 : _a.name) != null ? _b : `Page ${i + 1}`,
-            url
-          };
-        }),
-        savedToCanvas: false
+    const match = result.designs.find((d) => d.channelId === channelId);
+    if (match) openDoc(legacyToDoc(__spreadProps(__spreadValues({}, match.doc), {
+      title: (_a = match.doc.title) != null ? _a : match.title
+    })), legacyKind(match.doc));
+    else setScreen({
+      kind: "error",
+      message: (_b = result.error) != null ? _b : "That design is not one of yours, or it was deleted."
+    });
+  }, [index, openDoc]);
+  const entryRan = useRef(false);
+  useEffect(() => {
+    if (entryRan.current || !entry) return;
+    entryRan.current = true;
+    if ("templateId" in entry) void openTemplate(entry.templateId);
+    else if ("artifactId" in entry) void openSaved(entry.artifactId);
+    else if ("sizeId" in entry) {
+      const size = DESIGN_SIZES.find((s) => s.id === entry.sizeId);
+      if (size) openSize(size);
+      else setScreen({
+        kind: "home"
       });
-    }).catch((err) => {
-      setExporting({
-        stage: "",
-        error: friendlyMediaError(err, "design export")
+    } else if ("kind" in entry) {
+      if (entry.kind === "tshirt") openDoc(legacyToDoc(newDesignDoc("tshirt")), "flyer");
+      else if (entry.kind === "postcard") openSize(DESIGN_SIZES.find((s) => s.id === "postcard"));
+      else if (entry.kind === "carousel") {
+        directEntry.current = false;
+        setScreen({
+          kind: "category",
+          category: designCategoryFor("carousel")
+        });
+      } else {
+        directEntry.current = false;
+        setScreen({
+          kind: "home"
+        });
+      }
+    } else if ("channelId" in entry) {
+      if (isDesignArtifactId(entry.channelId)) void openSaved(entry.channelId);
+      else void openLegacy(entry.channelId);
+    } else if ("categoryId" in entry) {
+      const category = designCategoryFor(entry.categoryId);
+      directEntry.current = false;
+      setScreen(category ? {
+        kind: "category",
+        category
+      } : {
+        kind: "home"
       });
-    }).finally(() => {
-      exportBusyRef.current = false;
+    } else {
+      openDoc(blankDocCustom(entry.blank.width, entry.blank.height), "deck");
+    }
+  }, [entry, openTemplate, openSaved, openLegacy, openSize, openDoc]);
+  const leaveEditor = useCallback(() => {
+    if (directEntry.current && onClose) {
+      onClose();
+      return;
+    }
+    directEntry.current = false;
+    setScreen({
+      kind: "home"
     });
-  }, [effectiveRunAction, effectiveUploadMedia, indexUrl]);
-  const saveResultsToCanvas = useCallback(async () => {
-    if (!results || !token || !indexUrl || !open) return;
-    const items = results.pages.map((p, i) => __spreadProps(__spreadValues({
-      id: newBoardId(),
-      type: "image",
-      src: p.url,
-      generatedAssetName: `${open.doc.title || defaultTitle(open.doc)} - ${p.name}`,
-      zIndex: i + 1
-    }, frameForUpload("image")), {
-      x: 100 + i * 560
-    }));
-    const state = buildBoardState(items, 1, open.doc.title || defaultTitle(open.doc));
-    const ok = await pushCanvasBoard({
-      url: indexUrl,
-      token,
-      channelId: newBoardChannelId(),
-      state
+  }, [onClose]);
+  const designAction = useCallback(async (design, action) => {
+    var _a;
+    if (!index) return;
+    if (action === "delete") {
+      Alert.alert("Delete this design?", `"${design.title}" will be gone from the phone and the web.`, [{
+        text: "Cancel",
+        style: "cancel"
+      }, {
+        text: "Delete",
+        style: "destructive",
+        onPress: async () => {
+          setDesigns((prev) => prev.filter((d) => d.id !== design.id));
+          const ok = await deleteDesignArtifact(index, design.id);
+          if (!ok) {
+            Alert.alert("Could not delete", "Check your connection and try again.");
+            refresh();
+          }
+        }
+      }]);
+      return;
+    }
+    const doc = __spreadProps(__spreadValues({}, design.doc), {
+      title: `${design.title} (copy)`
     });
-    setResults((prev) => prev ? __spreadProps(__spreadValues({}, prev), {
-      savedToCanvas: ok
-    }) : prev);
-  }, [results, token, indexUrl, open]);
-  if (open) {
-    return /* @__PURE__ */ jsxs(View, { style: styles.fill, testID, children: [
-      /* @__PURE__ */ jsx(DesignEditorExperience, { doc: open.doc, onChange: (doc) => setOpen({
-        channelId: open.channelId,
-        doc
-      }), onClose: closeEditor, onExport: handleExport, onPickLocalMedia, canvasImages }),
-      exporting ? /* @__PURE__ */ jsx(View, { style: styles.overlay, children: /* @__PURE__ */ jsx(View, { style: styles.overlayCard, children: exporting.error ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.overlayError, children: "Export failed" }),
-        /* @__PURE__ */ jsx(Text, { style: styles.overlayStage, numberOfLines: 4, children: exporting.error }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: () => setExporting(null), style: styles.overlayDismiss, children: /* @__PURE__ */ jsx(Text, { style: styles.overlayDismissLabel, children: "Dismiss" }) })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.foreground }),
-        /* @__PURE__ */ jsx(Text, { style: styles.overlayStage, children: exporting.stage })
-      ] }) }) }) : null,
-      results ? /* @__PURE__ */ jsx(View, { style: styles.overlay, children: /* @__PURE__ */ jsxs(View, { style: styles.overlayCard, children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.overlayTitle, children: "Design exported" }),
-        results.pages.map((p) => /* @__PURE__ */ jsxs(View, { style: styles.resultRow, children: [
-          /* @__PURE__ */ jsx(Image, { source: {
-            uri: p.url
-          }, style: styles.resultThumb, contentFit: "cover" }),
-          /* @__PURE__ */ jsx(Text, { style: styles.resultName, children: p.name }),
-          /* @__PURE__ */ jsx(Pressable, { onPress: () => void Linking.openURL(p.url), hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: styles.resultAction, children: "Open" }) }),
-          /* @__PURE__ */ jsx(Pressable, { onPress: () => void Share.share({
-            url: p.url,
-            message: p.url
-          }), hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: styles.resultAction, children: "Share" }) })
-        ] }, p.url)),
-        /* @__PURE__ */ jsxs(Pressable, { onPress: () => void saveResultsToCanvas(), style: [styles.overlayCta, results.savedToCanvas && styles.overlayCtaDone], disabled: results.savedToCanvas, children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: results.savedToCanvas ? "check" : "view-dashboard-outline", size: 18, color: results.savedToCanvas ? theme.foreground : theme.primaryForeground }),
-          /* @__PURE__ */ jsx(Text, { style: [styles.overlayCtaLabel, results.savedToCanvas && styles.overlayCtaLabelDone], children: results.savedToCanvas ? "Saved to canvas" : "Save to canvas" })
-        ] }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: () => setResults(null), style: styles.overlayDismiss, children: /* @__PURE__ */ jsx(Text, { style: styles.overlayDismissLabel, children: "Done" }) })
-      ] }) }) : null
-    ] });
+    const copy = buildDesignArtifact(newArtifactId(design.kind), design.kind, doc, {
+      sessionId: design.sessionId,
+      thumbUrl: design.thumbUrl,
+      exportUrl: design.exportUrl
+    });
+    const result = await saveDesignArtifact(index, copy);
+    if (result.ok) setDesigns((prev) => [copy, ...prev]);
+    else Alert.alert("Could not copy", (_a = result.error) != null ? _a : "Try again.");
+  }, [index, refresh]);
+  const renameDesign = useCallback(async (design, title) => {
+    var _a;
+    if (!index) return;
+    const doc = __spreadProps(__spreadValues({}, design.doc), {
+      title: title.trim() || void 0
+    });
+    const renamed = buildDesignArtifact(design.id, design.kind, doc, {
+      sessionId: design.sessionId,
+      thumbUrl: design.thumbUrl,
+      exportUrl: design.exportUrl
+    });
+    setDesigns((prev) => prev.map((d) => d.id === design.id ? renamed : d));
+    const result = await saveDesignArtifact(index, renamed);
+    if (!result.ok) {
+      Alert.alert("Could not rename that design", (_a = result.error) != null ? _a : "Try again.");
+      refresh();
+    }
+  }, [index, refresh]);
+  if (screen.kind === "editor") {
+    return /* @__PURE__ */ jsx(View, { style: styles.fill, testID, children: /* @__PURE__ */ jsx(DesignEditorExperience, { doc: screen.doc, kind: screen.docKind, opened: screen.opened, index, sessionId, loadCatalog, readTemplate: readRows ? readTemplate : void 0, pickImage, uploadFile: effectiveUpload, runCarousel, onClose: leaveEditor }, screen.key) });
   }
-  return /* @__PURE__ */ jsxs(ScrollView, { style: styles.home, contentContainerStyle: styles.homeContent, testID, children: [
-    /* @__PURE__ */ jsx(Text, { style: styles.homeTitle, accessibilityRole: "header", children: "Design studio" }),
-    /* @__PURE__ */ jsx(SectionHeader, { title: "Start a design" }),
-    /* @__PURE__ */ jsxs(View, { style: styles.templateRow, children: [
-      /* @__PURE__ */ jsx(TemplateCard, { icon: "shape-square-plus", label: "Design", hint: "1080 \xD7 1080", shape: "design", onPress: () => setOpen({
-        channelId: newDesignChannelId(),
-        doc: newDesignDoc("design")
-      }) }),
-      /* @__PURE__ */ jsx(TemplateCard, { icon: "tshirt-crew-outline", label: "T-shirt", hint: "Front & back", shape: "tshirt", onPress: () => setOpen({
-        channelId: newDesignChannelId(),
-        doc: newDesignDoc("tshirt")
-      }) }),
-      /* @__PURE__ */ jsx(TemplateCard, { icon: "email-outline", label: "Postcard", hint: "Front & back", shape: "postcard", onPress: () => setOpen({
-        channelId: newDesignChannelId(),
-        doc: newDesignDoc("postcard")
-      }) }),
-      /* @__PURE__ */ jsx(TemplateCard, { icon: "view-carousel-outline", label: "Carousel", hint: "3 slides", shape: "carousel", onPress: () => setOpen({
-        channelId: newDesignChannelId(),
-        doc: newDesignDoc("carousel")
-      }) })
-    ] }),
-    loading ? /* @__PURE__ */ jsx(View, { style: styles.designGrid, children: [0, 1].map((i) => /* @__PURE__ */ jsxs(View, { style: styles.designTile, children: [
-      /* @__PURE__ */ jsx(View, { style: styles.designCover, children: /* @__PURE__ */ jsx(Skeleton, { radius: RADIUS.lg }) }),
-      /* @__PURE__ */ jsx(Skeleton, { style: styles.skeletonLine, radius: 4 })
-    ] }, i)) }) : error ? /* @__PURE__ */ jsx(Text, { style: styles.homeError, children: error }) : designs.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(SectionHeader, { title: "Your designs", detail: String(designs.length), style: styles.sectionGap }),
-      /* @__PURE__ */ jsx(View, { style: styles.designGrid, children: designs.map((d) => /* @__PURE__ */ jsxs(Pressable, { style: ({
-        pressed
-      }) => [styles.designTile, pressedStyle(pressed)], onPress: () => {
-        var _a;
-        const doc = (_a = parseDesignDoc(d.doc)) != null ? _a : d.doc;
-        setOpen({
-          channelId: d.channelId,
-          doc
+  if (screen.kind === "category") {
+    return /* @__PURE__ */ jsx(View, { style: styles.fill, testID, children: /* @__PURE__ */ jsx(DesignCategoryGallery, { category: screen.category, initialQuery: screen.query, load: loadCatalog, onClose: () => setScreen({
+      kind: "home"
+    }), onBlank: (blank) => {
+      const size = fullSize(blank);
+      if (size) openSize(size);
+      else openDoc(blankDocCustom(blank.width, blank.height), "deck");
+    }, onOpenTemplate: readRows ? (card) => void openTemplate(card.id) : void 0 }) });
+  }
+  if (screen.kind === "loading" || screen.kind === "error") {
+    return /* @__PURE__ */ jsx(View, { style: [styles.fill, styles.center], testID, children: screen.kind === "loading" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.mutedForeground }),
+      /* @__PURE__ */ jsx(Text, { style: styles.message, children: screen.label })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.message, children: screen.message }),
+      /* @__PURE__ */ jsx(ActionButton, { label: "Go to Design", onPress: () => {
+        directEntry.current = false;
+        setScreen({
+          kind: "home"
         });
-      }, children: [
-        /* @__PURE__ */ jsx(View, { style: styles.designCover, children: /* @__PURE__ */ jsx(DesignPreview, { doc: d.doc }) }),
-        /* @__PURE__ */ jsx(Text, { style: styles.designTitle, numberOfLines: 1, children: d.title || defaultTitle(d.doc) }),
-        /* @__PURE__ */ jsxs(Text, { style: styles.designSub, numberOfLines: 1, children: [
-          d.doc.pages.length,
-          " page",
-          d.doc.pages.length === 1 ? "" : "s",
-          " \xB7",
-          " ",
-          d.doc.pages.reduce((n, p) => n + p.layers.length, 0),
-          " layers"
-        ] })
-      ] }, d.channelId)) })
-    ] }) : /* @__PURE__ */ jsx(Text, { style: styles.homeHint, children: "Pick a template to start. Designs save automatically." })
-  ] });
-}
-function TemplateCard({
-  icon,
-  label,
-  hint,
-  shape,
-  onPress
-}) {
-  const theme = useCanvasTheme();
-  const styles = makeStyles(theme);
-  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: ({
-    pressed
-  }) => [styles.templateCard, pressedStyle(pressed)], accessibilityRole: "button", children: [
-    /* @__PURE__ */ jsx(View, { style: styles.templateCover, children: shape === "design" ? (
-      // The everyday start: the one lime action on the home.
-      /* @__PURE__ */ jsx(View, { style: styles.newPlus, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 24, color: theme.primaryForeground }) })
-    ) : shape === "tshirt" ? /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 56, color: theme.mutedForeground }) : shape === "postcard" ? /* @__PURE__ */ jsx(View, { style: [styles.sketchPage, {
-      width: "72%",
-      aspectRatio: 1.5
-    }], children: /* @__PURE__ */ jsx(SketchBars, {}) }) : /* @__PURE__ */ jsxs(View, { style: styles.carouselStack, children: [
-      /* @__PURE__ */ jsx(View, { style: [styles.sketchPage, styles.carouselBack] }),
-      /* @__PURE__ */ jsx(View, { style: [styles.sketchPage, styles.carouselFront], children: /* @__PURE__ */ jsx(SketchBars, {}) })
-    ] }) }),
-    /* @__PURE__ */ jsx(Text, { style: styles.templateLabel, children: label }),
-    /* @__PURE__ */ jsx(Text, { style: styles.templateHint, children: hint })
-  ] });
-}
-function SketchBars({
-  label
-}) {
-  const styles = makeStyles(useCanvasTheme());
-  return /* @__PURE__ */ jsxs(View, { style: styles.sketch, children: [
-    /* @__PURE__ */ jsx(View, { style: [styles.sketchBar, {
-      width: "62%",
-      height: "9%"
-    }] }),
-    /* @__PURE__ */ jsx(View, { style: [styles.sketchBar, {
-      width: "86%",
-      height: "5%"
-    }] }),
-    /* @__PURE__ */ jsx(View, { style: [styles.sketchBar, {
-      width: "70%",
-      height: "5%"
-    }] }),
-    /* @__PURE__ */ jsx(View, { style: [styles.sketchBar, styles.sketchBlock], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-outline", size: 14, color: "#b4b4bb" }) }),
-    label ? /* @__PURE__ */ jsx(Text, { style: styles.sketchLabel, children: label }) : null
-  ] });
-}
-const PREVIEW_BOX = 120;
-function DesignPreview({
-  doc
-}) {
-  const theme = useCanvasTheme();
-  const styles = makeStyles(theme);
-  const page = doc.pages[0];
-  if (!page || !(page.width > 0) || !(page.height > 0)) {
-    return /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "shape-outline", size: 28, color: theme.mutedForeground });
+      } })
+    ] }) });
   }
-  const scale = Math.min(PREVIEW_BOX / page.width, PREVIEW_BOX / page.height);
-  const layers = [...page.layers].sort((a, b) => a.zIndex - b.zIndex);
-  return /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [styles.previewPage, {
-    width: page.width * scale,
-    height: page.height * scale,
-    backgroundColor: page.background || "#ffffff"
-  }], children: layers.length === 0 ? /* @__PURE__ */ jsx(SketchBars, { label: defaultTitle(doc) }) : layers.map((layer) => {
-    const box = {
-      position: "absolute",
-      left: layer.x * scale,
-      top: layer.y * scale,
-      width: layer.width * scale,
-      height: layer.height * scale,
-      opacity: layer.opacity
-    };
-    if (layer.type === "image") {
-      return /* @__PURE__ */ jsx(Image, { source: {
-        uri: layer.src
-      }, style: box, contentFit: "cover" }, layer.id);
-    }
-    if (layer.type === "shape") {
-      return /* @__PURE__ */ jsx(View, { style: [box, {
-        backgroundColor: layer.fill,
-        borderRadius: layer.cornerRadius * scale
-      }] }, layer.id);
-    }
-    return /* @__PURE__ */ jsx(Text, { numberOfLines: 3, style: [box, {
-      color: layer.color,
-      fontSize: Math.max(4, layer.fontSize * scale),
-      lineHeight: Math.max(5, layer.fontSize * scale * 1.15),
-      fontWeight: layer.bold ? "700" : "400",
-      textAlign: layer.align
-    }], children: layer.text }, layer.id);
-  }) });
+  return /* @__PURE__ */ jsx(View, { style: styles.fill, testID, children: /* @__PURE__ */ jsx(DesignHome, { designs, loading, error: sessionError || listError, onRefresh: refresh, onClose, onOpenDesign: (design) => openDoc(design.doc, design.kind, design), onDesignAction: (design, action) => void designAction(design, action), onRenameDesign: (design, title) => void renameDesign(design, title), onCreate: openSize, onCustom: (w, h) => openDoc(blankDocCustom(w, h), "deck"), onOpenCategory: (category, query) => setScreen({
+    kind: "category",
+    category,
+    query
+  }), onOpenTemplate: (card) => {
+    if (readRows) void openTemplate(card.id);
+  }, loadCatalog }) });
 }
-const GUTTER = SPACE.lg + 4;
 const makeStyles = themedStyles((theme) => StyleSheet.create({
   fill: {
-    flex: 1
-  },
-  overlay: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
-    backgroundColor: "rgba(0,0,0,0.55)",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: SPACE.xl
-  }),
-  overlayCard: {
-    width: "100%",
-    maxWidth: 360,
-    alignItems: "center",
-    gap: SPACE.md,
-    backgroundColor: theme.surface,
-    borderRadius: RADIUS.xl,
-    paddingVertical: SPACE.xl,
-    paddingHorizontal: SPACE.xl - 4
-  },
-  overlayTitle: __spreadProps(__spreadValues({}, TYPE.title), {
-    color: theme.foreground
-  }),
-  overlayStage: __spreadProps(__spreadValues({}, TYPE.label), {
-    fontWeight: "500",
-    color: theme.mutedForeground,
-    textAlign: "center"
-  }),
-  overlayError: __spreadProps(__spreadValues({}, TYPE.title), {
-    color: theme.destructiveText
-  }),
-  overlayDismiss: {
-    minHeight: HIT,
-    paddingHorizontal: SPACE.lg,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  overlayDismissLabel: __spreadProps(__spreadValues({}, TYPE.label), {
-    fontSize: 15,
-    color: theme.foreground
-  }),
-  overlayCta: {
-    marginTop: SPACE.xs,
-    alignSelf: "stretch",
-    minHeight: HIT,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: SPACE.sm,
-    backgroundColor: theme.primary,
-    borderRadius: RADIUS.pill,
-    paddingHorizontal: SPACE.lg
-  },
-  overlayCtaDone: {
-    backgroundColor: theme.card
-  },
-  overlayCtaLabel: __spreadProps(__spreadValues({}, TYPE.label), {
-    fontSize: 15,
-    color: theme.primaryForeground
-  }),
-  overlayCtaLabelDone: {
-    color: theme.foreground
-  },
-  resultRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: SPACE.md,
-    alignSelf: "stretch"
-  },
-  resultThumb: {
-    width: 48,
-    height: 48,
-    borderRadius: RADIUS.sm,
-    backgroundColor: theme.card
-  },
-  resultName: __spreadProps(__spreadValues({}, TYPE.label), {
-    flex: 1,
-    color: theme.foreground
-  }),
-  resultAction: __spreadProps(__spreadValues({}, TYPE.label), {
-    color: theme.mutedForeground,
-    paddingHorizontal: SPACE.xs + 2
-  }),
-  home: {
     flex: 1,
     backgroundColor: theme.background
   },
-  homeContent: {
-    paddingHorizontal: GUTTER,
-    paddingTop: SPACE.lg,
-    paddingBottom: SPACE.xxl
-  },
-  homeTitle: __spreadProps(__spreadValues({}, TYPE.heading), {
-    color: theme.foreground,
-    marginBottom: SPACE.xl - 4
-  }),
-  sectionGap: {
-    marginTop: SPACE.xl
-  },
-  templateRow: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    columnGap: SPACE.md,
-    rowGap: SPACE.lg
-  },
-  templateCard: {
-    flexBasis: "46%",
-    flexGrow: 1
-  },
-  templateCover: {
-    aspectRatio: 1.25,
-    borderRadius: RADIUS.lg,
-    overflow: "hidden",
-    backgroundColor: theme.card,
+  center: {
     alignItems: "center",
     justifyContent: "center",
-    marginBottom: SPACE.sm
-  },
-  newPlus: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: theme.primary
-  },
-  // Sketch pages are paper, not chrome: fixed white with a soft lift.
-  sketchPage: {
-    backgroundColor: "#ffffff",
-    borderRadius: 3,
-    overflow: "hidden",
-    shadowColor: "#000",
-    shadowOpacity: theme.isDark ? 0 : 0.1,
-    shadowRadius: 6,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    elevation: 2
-  },
-  carouselStack: {
-    width: "52%",
-    aspectRatio: 1
-  },
-  carouselBack: {
-    position: "absolute",
-    top: -6,
-    left: 10,
-    right: -10,
-    bottom: 6,
-    opacity: theme.isDark ? 0.35 : 0.7
-  },
-  carouselFront: __spreadValues({}, StyleSheet.absoluteFillObject),
-  sketch: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
-    padding: "10%",
-    gap: 5
-  }),
-  sketchBar: {
-    borderRadius: 3,
-    backgroundColor: "#ececef"
-  },
-  sketchBlock: {
-    flex: 1,
-    width: "100%",
-    marginTop: 3,
-    alignItems: "center",
-    justifyContent: "center"
+    gap: SPACE.lg,
+    padding: SPACE.xl
   },
-  sketchLabel: {
-    fontSize: 10,
-    fontWeight: "600",
-    color: "#a1a1aa",
+  message: __spreadProps(__spreadValues({}, TYPE.body), {
+    color: theme.mutedForeground,
     textAlign: "center"
-  },
-  templateLabel: __spreadProps(__spreadValues({}, TYPE.label), {
-    fontSize: 14,
-    color: theme.foreground
-  }),
-  templateHint: __spreadProps(__spreadValues({}, TYPE.caption), {
-    marginTop: 1,
-    color: theme.mutedForeground
-  }),
-  homeError: __spreadProps(__spreadValues({}, TYPE.label), {
-    fontWeight: "500",
-    marginTop: SPACE.xl,
-    color: theme.destructiveText
-  }),
-  homeHint: __spreadProps(__spreadValues({}, TYPE.label), {
-    fontWeight: "500",
-    marginTop: SPACE.xl,
-    color: theme.mutedForeground
-  }),
-  designGrid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    columnGap: SPACE.md,
-    rowGap: SPACE.lg
-  },
-  designTile: {
-    flexBasis: "46%",
-    flexGrow: 1,
-    maxWidth: "50%"
-  },
-  designCover: {
-    aspectRatio: 1,
-    borderRadius: RADIUS.lg,
-    overflow: "hidden",
-    backgroundColor: theme.card,
-    alignItems: "center",
-    justifyContent: "center",
-    marginBottom: SPACE.sm
-  },
-  previewPage: {
-    overflow: "hidden",
-    borderRadius: 3,
-    shadowColor: "#000",
-    shadowOpacity: theme.isDark ? 0 : 0.1,
-    shadowRadius: 6,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    elevation: 2
-  },
-  skeletonLine: {
-    height: 12,
-    width: "60%"
-  },
-  designTitle: __spreadProps(__spreadValues({}, TYPE.label), {
-    fontSize: 14,
-    color: theme.foreground
-  }),
-  designSub: __spreadProps(__spreadValues({}, TYPE.caption), {
-    marginTop: 1,
-    color: theme.mutedForeground
   })
-}));export{DesignExperience};//# sourceMappingURL=DesignExperience.js.map
+}));export{DesignExperience,DesignExperience as default};//# sourceMappingURL=DesignExperience.js.map