@adminide-stack/yantra-mobile 12.0.125-alpha.1 → 12.0.126

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 {StyleSheet,View,Text,Pressable,ActivityIndicator,Linking,Share,ScrollView}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 {frameForUpload,newBoardId,buildBoardState}from'../canvas/canvasCore.js';import {fetchMyCanvasBoards,pushCanvasBoard,newBoardChannelId}from'../canvas/surfaceIndex.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 {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;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -28,6 +28,8 @@ function DesignExperience({
   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 [designs, setDesigns] = useState([]);
@@ -192,7 +194,7 @@ function DesignExperience({
         /* @__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: "#F7F7FA" }),
+        /* @__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: [
@@ -209,36 +211,42 @@ function DesignExperience({
           }), 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: 15, color: "#0f172a" }),
-          /* @__PURE__ */ jsx(Text, { style: styles.overlayCtaLabel, children: results.savedToCanvas ? "Saved to canvas" : "Save to canvas" })
+          /* @__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
     ] });
   }
   return /* @__PURE__ */ jsxs(ScrollView, { style: styles.home, contentContainerStyle: styles.homeContent, testID, children: [
-    /* @__PURE__ */ jsx(Text, { style: styles.homeTitle, children: "Design studio" }),
+    /* @__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", onPress: () => setOpen({
+      /* @__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", onPress: () => setOpen({
+      /* @__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", onPress: () => setOpen({
+      /* @__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", onPress: () => setOpen({
+      /* @__PURE__ */ jsx(TemplateCard, { icon: "view-carousel-outline", label: "Carousel", hint: "3 slides", shape: "carousel", onPress: () => setOpen({
         channelId: newDesignChannelId(),
         doc: newDesignDoc("carousel")
       }) })
     ] }),
-    loading ? /* @__PURE__ */ jsx(ActivityIndicator, { style: styles.homeSpinner }) : error ? /* @__PURE__ */ jsx(Text, { style: styles.homeError, children: error }) : designs.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.homeSection, children: "Your designs" }),
-      designs.map((d) => /* @__PURE__ */ jsxs(Pressable, { style: styles.designRow, onPress: () => {
+    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({
@@ -246,199 +254,348 @@ function DesignExperience({
           doc
         });
       }, children: [
-        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: d.doc.kind === "tshirt" ? "tshirt-crew-outline" : d.doc.kind === "postcard" ? "email-outline" : d.doc.kind === "carousel" ? "view-carousel-outline" : "shape-square-plus", size: 20, color: "#475569" }),
-        /* @__PURE__ */ jsxs(View, { style: styles.designMeta, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.designTitle, children: d.title || defaultTitle(d.doc) }),
-          /* @__PURE__ */ jsxs(Text, { style: styles.designSub, 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"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chevron-right", size: 20, color: "#94a3b8" })
-      ] }, d.channelId))
-    ] }) : /* @__PURE__ */ jsx(Text, { style: styles.homeHint, children: "Pick a template to start - designs save automatically." })
+        /* @__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
 }) {
-  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: styles.templateCard, accessibilityRole: "button", children: [
-    /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 26, color: "#0f172a" }),
+  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 })
   ] });
 }
-const styles = StyleSheet.create({
+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);
+  }) });
+}
+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.65)",
+    backgroundColor: "rgba(0,0,0,0.55)",
     alignItems: "center",
     justifyContent: "center",
-    padding: 28
+    padding: SPACE.xl
   }),
   overlayCard: {
     width: "100%",
     maxWidth: 360,
     alignItems: "center",
-    gap: 10,
-    backgroundColor: "#17171C",
-    borderRadius: 16,
-    paddingVertical: 20,
-    paddingHorizontal: 20
-  },
-  overlayTitle: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: "#F7F7FA"
+    gap: SPACE.md,
+    backgroundColor: theme.surface,
+    borderRadius: RADIUS.xl,
+    paddingVertical: SPACE.xl,
+    paddingHorizontal: SPACE.xl - 4
   },
-  overlayStage: {
-    fontSize: 13,
-    color: "#CBD5E1",
+  overlayTitle: __spreadProps(__spreadValues({}, TYPE.title), {
+    color: theme.foreground
+  }),
+  overlayStage: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontWeight: "500",
+    color: theme.mutedForeground,
     textAlign: "center"
-  },
-  overlayError: {
-    fontSize: 15,
-    fontWeight: "600",
-    color: "#F87171"
-  },
+  }),
+  overlayError: __spreadProps(__spreadValues({}, TYPE.title), {
+    color: theme.destructiveText
+  }),
   overlayDismiss: {
-    marginTop: 4,
-    paddingHorizontal: 14,
-    paddingVertical: 8
-  },
-  overlayDismissLabel: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: "#A5B4FC"
+    minHeight: HIT,
+    paddingHorizontal: SPACE.lg,
+    alignItems: "center",
+    justifyContent: "center"
   },
+  overlayDismissLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontSize: 15,
+    color: theme.foreground
+  }),
   overlayCta: {
-    marginTop: 6,
+    marginTop: SPACE.xs,
+    alignSelf: "stretch",
+    minHeight: HIT,
     flexDirection: "row",
     alignItems: "center",
-    gap: 6,
-    backgroundColor: "#A5B4FC",
-    borderRadius: 16,
-    paddingHorizontal: 16,
-    paddingVertical: 9
+    justifyContent: "center",
+    gap: SPACE.sm,
+    backgroundColor: theme.primary,
+    borderRadius: RADIUS.pill,
+    paddingHorizontal: SPACE.lg
   },
   overlayCtaDone: {
-    backgroundColor: "#86EFAC"
+    backgroundColor: theme.card
   },
-  overlayCtaLabel: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: "#0f172a"
+  overlayCtaLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontSize: 15,
+    color: theme.primaryForeground
+  }),
+  overlayCtaLabelDone: {
+    color: theme.foreground
   },
   resultRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 10,
+    gap: SPACE.md,
     alignSelf: "stretch"
   },
   resultThumb: {
-    width: 44,
-    height: 44,
-    borderRadius: 8,
-    backgroundColor: "#26262E"
+    width: 48,
+    height: 48,
+    borderRadius: RADIUS.sm,
+    backgroundColor: theme.card
   },
-  resultName: {
+  resultName: __spreadProps(__spreadValues({}, TYPE.label), {
     flex: 1,
-    fontSize: 13,
-    color: "#E2E8F0"
-  },
-  resultAction: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: "#A5B4FC",
-    paddingHorizontal: 6
-  },
+    color: theme.foreground
+  }),
+  resultAction: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.mutedForeground,
+    paddingHorizontal: SPACE.xs + 2
+  }),
   home: {
     flex: 1,
-    backgroundColor: "#eef1f4"
+    backgroundColor: theme.background
   },
   homeContent: {
-    padding: 20,
-    gap: 12
+    paddingHorizontal: GUTTER,
+    paddingTop: SPACE.lg,
+    paddingBottom: SPACE.xxl
   },
-  homeTitle: {
-    fontSize: 20,
-    fontWeight: "600",
-    color: "#0f172a"
+  homeTitle: __spreadProps(__spreadValues({}, TYPE.heading), {
+    color: theme.foreground,
+    marginBottom: SPACE.xl - 4
+  }),
+  sectionGap: {
+    marginTop: SPACE.xl
   },
   templateRow: {
     flexDirection: "row",
-    gap: 12
+    flexWrap: "wrap",
+    columnGap: SPACE.md,
+    rowGap: SPACE.lg
   },
   templateCard: {
-    flex: 1,
+    flexBasis: "46%",
+    flexGrow: 1
+  },
+  templateCover: {
+    aspectRatio: 1.25,
+    borderRadius: RADIUS.lg,
+    overflow: "hidden",
+    backgroundColor: theme.card,
     alignItems: "center",
-    gap: 4,
-    backgroundColor: "#ffffff",
-    borderRadius: 14,
-    borderWidth: 1,
-    borderColor: "rgba(15,23,42,0.08)",
-    paddingVertical: 18
+    justifyContent: "center",
+    marginBottom: SPACE.sm
   },
-  templateLabel: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: "#0f172a"
+  newPlus: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.primary
   },
-  templateHint: {
-    fontSize: 11,
-    color: "#94a3b8"
+  // 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
   },
-  homeSection: {
-    marginTop: 8,
-    fontSize: 13,
-    fontWeight: "600",
-    color: "#475569"
+  carouselStack: {
+    width: "52%",
+    aspectRatio: 1
   },
-  homeSpinner: {
-    marginTop: 24
+  carouselBack: {
+    position: "absolute",
+    top: -6,
+    left: 10,
+    right: -10,
+    bottom: 6,
+    opacity: theme.isDark ? 0.35 : 0.7
   },
-  homeError: {
-    marginTop: 16,
-    fontSize: 13,
-    color: "#b91c1c"
+  carouselFront: __spreadValues({}, StyleSheet.absoluteFillObject),
+  sketch: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
+    padding: "10%",
+    gap: 5
+  }),
+  sketchBar: {
+    borderRadius: 3,
+    backgroundColor: "#ececef"
   },
-  homeHint: {
-    marginTop: 12,
-    fontSize: 13,
-    color: "#64748b"
+  sketchBlock: {
+    flex: 1,
+    width: "100%",
+    marginTop: 3,
+    alignItems: "center",
+    justifyContent: "center"
   },
-  designRow: {
+  sketchLabel: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: "#a1a1aa",
+    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",
-    gap: 12,
-    backgroundColor: "#ffffff",
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: "rgba(15,23,42,0.08)",
-    paddingHorizontal: 14,
-    paddingVertical: 12
+    justifyContent: "center",
+    marginBottom: SPACE.sm
   },
-  designMeta: {
-    flex: 1
+  previewPage: {
+    overflow: "hidden",
+    borderRadius: 3,
+    shadowColor: "#000",
+    shadowOpacity: theme.isDark ? 0 : 0.1,
+    shadowRadius: 6,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    elevation: 2
   },
-  designTitle: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: "#0f172a"
+  skeletonLine: {
+    height: 12,
+    width: "60%"
   },
-  designSub: {
-    marginTop: 2,
-    fontSize: 11,
-    color: "#94a3b8"
-  }
-});export{DesignExperience};//# sourceMappingURL=DesignExperience.js.map
+  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