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

package/lib/features/design/home/DesignHome.js

@@ -0,0 +1,688 @@
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState}from'react';import {View,Text,StyleSheet,ScrollView,TextInput,FlatList,RefreshControl}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {useCanvasTheme,themedStyles}from'../../canvas/canvasTheme.js';import {IconButton,Pressable,RADIUS,SPACE,ActionButton,SectionHeader,Skeleton,pressedStyle,TYPE}from'../../canvas/canvasUi.js';import {SEARCH_SECTIONS,designCategoryFor,DESIGN_CATEGORY_GROUPS,FORMAT_INTRO}from'../../canvas/designCategories.js';import {CatalogPreviewShelf}from'../../canvas/DesignCategoryGallery.js';import {useSafeInsets}from'../../canvas/withRemoteSafeArea.js';import {sizesIn,MIN_PX,MAX_PX}from'../doc/sizes.js';import {designTitle}from'../doc/types.js';import {DesignPageView}from'../render/DesignPageView.js';import {STUDIO_VIEWS,searchStudioSizes,visibleRecents,sizeLabel,pagesLabel,relativeTime}from'./studioHome.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));
+const GUTTER = SPACE.lg;
+const CATEGORY_ICON = {
+  social: "share-variant-outline",
+  carousel: "layers-outline",
+  flyer: "file-image-outline",
+  "business-card": "card-account-details-outline",
+  presentation: "presentation",
+  "pitch-deck": "chart-bar",
+  logo: "shape-outline",
+  banner: "flag-outline",
+  brochure: "book-open-page-variant-outline",
+  branding: "palette-outline",
+  certificate: "certificate-outline",
+  worksheet: "notebook-edit-outline",
+  proposal: "file-document-outline",
+  newsletter: "newspaper-variant-outline",
+  menu: "silverware-fork-knife",
+  infographic: "page-layout-header",
+  technology: "chip"
+};
+function DesignHome({
+  designs,
+  loading,
+  error,
+  onRefresh,
+  onClose,
+  onOpenDesign,
+  onDesignAction,
+  onRenameDesign,
+  onCreate,
+  onCustom,
+  onOpenCategory,
+  onOpenTemplate,
+  loadCatalog
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const insets = useSafeInsets();
+  const [view, setView] = useState("browse");
+  return /* @__PURE__ */ jsxs(View, { style: [styles.root, {
+    paddingTop: insets.top
+  }], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.bar, children: [
+      onClose ? /* @__PURE__ */ jsx(IconButton, { icon: "chevron-left", label: "Back", onPress: onClose, size: 36 }) : null,
+      /* @__PURE__ */ jsx(Text, { style: styles.barTitle, accessibilityRole: "header", numberOfLines: 1, children: "Design" })
+    ] }),
+    /* @__PURE__ */ jsx(View, { style: styles.switchWrap, children: /* @__PURE__ */ jsx(View, { style: styles.viewSwitch, accessibilityRole: "tablist", accessibilityLabel: "Studio view", children: STUDIO_VIEWS.map((option) => {
+      const on = option.id === view;
+      return /* @__PURE__ */ jsxs(Pressable, { onPress: () => setView(option.id), style: [styles.viewButton, on && styles.viewButtonOn], accessibilityRole: "tab", accessibilityState: {
+        selected: on
+      }, children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: option.id === "browse" ? "view-grid-outline" : "layers-outline", size: 16, color: on ? theme.foreground : theme.mutedForeground }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.viewLabel, on && styles.viewLabelOn], numberOfLines: 1, children: option.label })
+      ] }, option.id);
+    }) }) }),
+    view === "browse" ? /* @__PURE__ */ jsx(Browse, { bottomInset: insets.bottom, onCreate, onCustom, onOpenCategory, onOpenTemplate, loadCatalog }) : /* @__PURE__ */ jsx(Recent, { bottomInset: insets.bottom, designs, loading, error, onRefresh, onOpenDesign, onDesignAction, onRenameDesign })
+  ] });
+}
+function Browse({
+  bottomInset,
+  onCreate,
+  onCustom,
+  onOpenCategory,
+  onOpenTemplate,
+  loadCatalog
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const [query, setQuery] = useState("");
+  const [custom, setCustom] = useState(false);
+  const q = query.trim();
+  const results = searchStudioSizes(q);
+  const submit = () => {
+    if (results.typed) onCustom(results.typed.width, results.typed.height);
+    else if (results.sizes[0]) onCreate(results.sizes[0]);
+  };
+  return /* @__PURE__ */ jsxs(ScrollView, { style: styles.fill, contentContainerStyle: {
+    paddingBottom: bottomInset + SPACE.xxl
+  }, keyboardShouldPersistTaps: "handled", keyboardDismissMode: "on-drag", children: [
+    /* @__PURE__ */ jsx(View, { style: styles.searchRow, children: /* @__PURE__ */ jsxs(View, { style: styles.searchBox, children: [
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "magnify", size: 20, color: theme.mutedForeground }),
+      /* @__PURE__ */ jsx(TextInput, { value: query, onChangeText: setQuery, onSubmitEditing: submit, placeholder: "Search templates or type 1200 \xD7 800", placeholderTextColor: theme.mutedForeground, style: styles.searchInput, returnKeyType: "search", autoCorrect: false, accessibilityLabel: "Search design sizes and templates" }),
+      query ? /* @__PURE__ */ jsx(IconButton, { icon: "close", label: "Clear search", onPress: () => setQuery(""), size: 32 }) : null
+    ] }) }),
+    q ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.sectionTitle, accessibilityRole: "header", children: "Search results" }),
+        /* @__PURE__ */ jsx(Text, { style: styles.sectionIntro, children: `Sizes and templates matching "${q}".` })
+      ] }),
+      results.typed || results.sizes.length ? /* @__PURE__ */ jsx(View, { style: styles.section, children: /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.rail, contentContainerStyle: styles.railContent, children: [
+        results.typed ? /* @__PURE__ */ jsx(SizeCard, { label: "Custom size", width: results.typed.width, height: results.typed.height, detail: `${results.typed.width} \xD7 ${results.typed.height}`, onPress: () => onCustom(results.typed.width, results.typed.height) }) : null,
+        results.sizes.map((size) => {
+          var _a;
+          return /* @__PURE__ */ jsx(SizeCard, { label: size.label, width: size.width, height: size.height, detail: (_a = size.physical) != null ? _a : `${size.width} \xD7 ${size.height}`, onPress: () => onCreate(size) }, size.id);
+        })
+      ] }) }) : /* @__PURE__ */ jsxs(View, { style: [styles.section, styles.noMatch], children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.sectionIntro, children: `No sizes match "${q}".` }),
+        /* @__PURE__ */ jsx(ActionButton, { label: "Enter a custom size", variant: "secondary", onPress: () => {
+          setQuery("");
+          setCustom(true);
+        } })
+      ] }),
+      loadCatalog ? /* @__PURE__ */ jsx(View, { style: styles.shelves, children: SEARCH_SECTIONS.map((section) => /* @__PURE__ */ jsx(CatalogPreviewShelf, { group: section.group, title: section.title, query: q, load: loadCatalog, onOpen: onOpenTemplate, onSeeAll: () => {
+        const category = designCategoryFor(section.category);
+        if (category) onOpenCategory(category, q);
+      } }, section.group)) }) : null
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      DESIGN_CATEGORY_GROUPS.map((group) => /* @__PURE__ */ jsxs(View, { style: [styles.section, group.id === "topics" && styles.topics], children: [
+        /* @__PURE__ */ jsx(SectionHeader, { title: group.label }),
+        /* @__PURE__ */ jsxs(View, { style: styles.categoryGrid, accessibilityLabel: group.label, children: [
+          group.items.map((category) => {
+            var _a;
+            return /* @__PURE__ */ jsx(CategoryTile, { icon: (_a = CATEGORY_ICON[category.id]) != null ? _a : "shape-outline", label: category.title, onPress: () => onOpenCategory(category) }, category.id);
+          }),
+          group.id === "topics" ? /* @__PURE__ */ jsx(CategoryTile, { icon: "ruler", label: "Custom size", active: custom, onPress: () => setCustom((v) => !v) }) : null
+        ] }),
+        group.id === "topics" && custom ? /* @__PURE__ */ jsx(CustomSize, { onCreate: onCustom }) : null
+      ] }, group.id)),
+      /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.sectionTitle, accessibilityRole: "header", children: "Popular formats" }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.sectionIntro, styles.introGap], children: FORMAT_INTRO }),
+        /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.rail, contentContainerStyle: styles.railContent, children: sizesIn().map((size) => {
+          var _a;
+          return /* @__PURE__ */ jsx(SizeCard, { label: size.label, width: size.width, height: size.height, detail: (_a = size.physical) != null ? _a : `${size.width} \xD7 ${size.height}`, onPress: () => onCreate(size) }, size.id);
+        }) })
+      ] }),
+      loadCatalog ? /* @__PURE__ */ jsx(View, { style: styles.shelves, children: ["flyer", "presentation", "social"].map((id) => {
+        var _a, _b;
+        const section = SEARCH_SECTIONS.find((s) => s.category === id);
+        const category = designCategoryFor(id);
+        return /* @__PURE__ */ jsx(CatalogPreviewShelf, { group: section.group, title: (_b = (_a = category == null ? void 0 : category.shelves[0]) == null ? void 0 : _a.title) != null ? _b : section.title, load: loadCatalog, onOpen: onOpenTemplate, onSeeAll: category ? () => onOpenCategory(category) : void 0 }, section.group);
+      }) }) : null
+    ] })
+  ] });
+}
+function CategoryTile({
+  icon,
+  label,
+  active,
+  onPress
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: ({
+    pressed
+  }) => [styles.category, pressedStyle(pressed)], accessibilityRole: "button", accessibilityState: active === void 0 ? void 0 : {
+    expanded: active
+  }, children: [
+    /* @__PURE__ */ jsx(View, { style: [styles.categoryIcon, active && styles.categoryIconOn], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 22, color: theme.foreground }) }),
+    /* @__PURE__ */ jsx(Text, { style: styles.categoryLabel, numberOfLines: 2, children: label })
+  ] });
+}
+function SizeCard({
+  label,
+  width,
+  height,
+  detail,
+  onPress
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const h = 86;
+  const w = Math.max(48, Math.min(108, h * width / height));
+  const hh = Math.max(8, Math.min(h, w * height / width));
+  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: ({
+    pressed
+  }) => [styles.sizeCard, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `New ${label}, ${detail}`, children: [
+    /* @__PURE__ */ jsx(View, { style: styles.sizeFrame, children: /* @__PURE__ */ jsx(View, { style: [styles.sizeShape, {
+      width: w,
+      height: hh
+    }] }) }),
+    /* @__PURE__ */ jsx(Text, { style: styles.sizeLabel, numberOfLines: 1, children: label }),
+    /* @__PURE__ */ jsx(Text, { style: styles.sizeDetail, children: detail })
+  ] });
+}
+function CustomSize({
+  onCreate
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const [w, setW] = useState("1080");
+  const [h, setH] = useState("1080");
+  const width = Number(w);
+  const height = Number(h);
+  const ok = [width, height].every((v) => Number.isFinite(v) && v >= MIN_PX && v <= MAX_PX);
+  return /* @__PURE__ */ jsxs(View, { style: styles.custom, children: [
+    /* @__PURE__ */ jsx(TextInput, { value: w, onChangeText: setW, keyboardType: "number-pad", style: styles.customInput, accessibilityLabel: "Width in pixels" }),
+    /* @__PURE__ */ jsx(Text, { style: styles.customX, children: "\xD7" }),
+    /* @__PURE__ */ jsx(TextInput, { value: h, onChangeText: setH, keyboardType: "number-pad", style: styles.customInput, accessibilityLabel: "Height in pixels" }),
+    /* @__PURE__ */ jsx(Text, { style: styles.customX, children: "px" }),
+    /* @__PURE__ */ jsx(ActionButton, { label: "Create", disabled: !ok, onPress: () => onCreate(Math.round(width), Math.round(height)) })
+  ] });
+}
+function Recent({
+  bottomInset,
+  designs,
+  loading,
+  error,
+  onRefresh,
+  onOpenDesign,
+  onDesignAction,
+  onRenameDesign
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const [expanded, setExpanded] = useState(false);
+  const [openActions, setOpenActions] = useState(null);
+  const {
+    shown,
+    more
+  } = visibleRecents(designs, expanded);
+  const firstLoad = loading && designs.length === 0;
+  const failed = Boolean(error) && designs.length === 0 && !loading;
+  const footer = /* @__PURE__ */ jsx(View, { style: styles.recentFooter, children: more ? /* @__PURE__ */ jsx(ActionButton, { label: expanded ? "Show fewer designs" : "See all designs", variant: "secondary", onPress: () => setExpanded((v) => !v), style: styles.fullWidth }) : null });
+  let empty = null;
+  if (firstLoad) {
+    empty = /* @__PURE__ */ jsx(View, { style: styles.recentList, accessibilityState: {
+      busy: true
+    }, children: Array.from({
+      length: 6
+    }, (_, i) => /* @__PURE__ */ jsxs(View, { style: styles.skeletonRow, children: [
+      /* @__PURE__ */ jsx(Skeleton, { style: styles.skeletonThumb, radius: RADIUS.sm }),
+      /* @__PURE__ */ jsxs(View, { style: styles.skeletonText, children: [
+        /* @__PURE__ */ jsx(Skeleton, { style: {
+          height: 12,
+          width: "75%"
+        }, radius: 4 }),
+        /* @__PURE__ */ jsx(Skeleton, { style: {
+          height: 12,
+          width: "50%"
+        }, radius: 4 })
+      ] })
+    ] }, i)) });
+  } else if (failed) {
+    empty = /* @__PURE__ */ jsxs(View, { style: styles.alert, accessibilityRole: "alert", children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.alertText, children: "Couldn\u2019t load your designs. Your saved work will appear here when the connection returns." }),
+      error ? /* @__PURE__ */ jsx(Text, { style: styles.rowDetail, children: error }) : null,
+      /* @__PURE__ */ jsx(ActionButton, { label: "Retry", variant: "secondary", onPress: onRefresh })
+    ] });
+  } else {
+    empty = /* @__PURE__ */ jsxs(View, { style: styles.emptyBox, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.emptyTitle, children: "Your work starts here" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.sectionIntro, children: "Choose a format or template to create your first design. Your saved work will appear here." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(View, { style: styles.fill, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.recentHeader, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.sectionTitle, accessibilityRole: "header", children: "Recent designs" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.sectionIntro, children: "Pick up where you left off." })
+    ] }),
+    /* @__PURE__ */ jsx(FlatList, { data: firstLoad || failed ? [] : shown, keyExtractor: (design) => design.id, style: styles.fill, contentContainerStyle: [styles.recentContent, {
+      paddingBottom: bottomInset + SPACE.xxl
+    }], keyboardShouldPersistTaps: "handled", refreshControl: /* @__PURE__ */ jsx(RefreshControl, { refreshing: false, onRefresh }), ItemSeparatorComponent: () => /* @__PURE__ */ jsx(View, { style: {
+      height: SPACE.sm
+    } }), ListEmptyComponent: empty, ListFooterComponent: footer, renderItem: ({
+      item
+    }) => /* @__PURE__ */ jsx(RecentRow, { design: item, actionsOpen: openActions === item.id, onToggleActions: () => setOpenActions((id) => id === item.id ? null : item.id), onOpen: () => onOpenDesign(item), onRename: (title) => onRenameDesign(item, title), onAction: (action) => {
+      setOpenActions(null);
+      onDesignAction(item, action);
+    } }) })
+  ] });
+}
+function RecentRow({
+  design,
+  actionsOpen,
+  onToggleActions,
+  onOpen,
+  onRename,
+  onAction
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const {
+    doc
+  } = design;
+  const title = designTitle(doc) || design.title || "Untitled design";
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(title);
+  const page = doc.pages[0];
+  const THUMB_W = 80;
+  const THUMB_H = 64;
+  const pad = 6;
+  const ratio = doc.pageHeight / doc.pageWidth;
+  const pageW = Math.min(THUMB_W - pad * 2, (THUMB_H - pad * 2) / ratio);
+  const commit = () => {
+    setEditing(false);
+    if (draft.trim() !== title) onRename(draft);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.rowMain, children: [
+      /* @__PURE__ */ jsxs(Pressable, { onPress: onOpen, onLongPress: onToggleActions, style: ({
+        pressed
+      }) => [styles.rowOpen, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Open ${title}`, children: [
+        /* @__PURE__ */ jsx(View, { style: styles.rowThumb, children: page ? /* @__PURE__ */ jsx(DesignPageView, { doc, page, width: pageW, style: styles.rowPage }) : null }),
+        /* @__PURE__ */ jsxs(View, { style: styles.rowText, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.rowTitle, numberOfLines: 2, children: title }),
+          /* @__PURE__ */ jsx(Text, { style: styles.rowDetail, numberOfLines: 1, children: sizeLabel(doc, design.kind) }),
+          /* @__PURE__ */ jsx(Text, { style: styles.rowDetail, children: `${pagesLabel(doc)} \xB7 ${relativeTime(design.updatedAt)}` })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(IconButton, { icon: "dots-horizontal", label: `More for ${title}`, onPress: onToggleActions, size: 32 })
+    ] }),
+    editing ? /* @__PURE__ */ jsxs(View, { style: styles.renameRow, children: [
+      /* @__PURE__ */ jsx(TextInput, { value: draft, autoFocus: true, selectTextOnFocus: true, onChangeText: setDraft, onSubmitEditing: commit, onBlur: commit, maxLength: 80, returnKeyType: "done", style: styles.renameInput, accessibilityLabel: "Design name" }),
+      /* @__PURE__ */ jsx(IconButton, { icon: "check", label: "Save name", onPress: commit, size: 36 })
+    ] }) : null,
+    actionsOpen && !editing ? /* @__PURE__ */ jsxs(View, { style: styles.actions, accessibilityLabel: `Actions for ${title}`, children: [
+      /* @__PURE__ */ jsx(RowAction, { icon: "pencil-outline", label: "Rename", a11y: `Rename ${title}`, onPress: () => {
+        onToggleActions();
+        setDraft(title);
+        setEditing(true);
+      } }),
+      /* @__PURE__ */ jsx(RowAction, { icon: "content-copy", label: "Copy", a11y: `Duplicate ${title}`, onPress: () => onAction("duplicate") }),
+      /* @__PURE__ */ jsx(RowAction, { icon: "trash-can-outline", label: "Delete", a11y: `Delete ${title}`, danger: true, onPress: () => onAction("delete") })
+    ] }) : null
+  ] });
+}
+function RowAction({
+  icon,
+  label,
+  a11y,
+  danger,
+  onPress
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const ink = danger ? theme.destructiveText : theme.inkSoft;
+  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: ({
+    pressed
+  }) => [styles.action, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: a11y, children: [
+    /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 15, color: ink }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, {
+      color: ink
+    }], children: label })
+  ] });
+}
+const makeStyles = themedStyles((theme) => StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: theme.background
+  },
+  fill: {
+    flex: 1
+  },
+  // The shared studio bar: 44pt on phones, no large title under it.
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.xs,
+    height: 44,
+    paddingHorizontal: SPACE.sm
+  },
+  barTitle: __spreadProps(__spreadValues({}, TYPE.title), {
+    color: theme.foreground,
+    paddingHorizontal: SPACE.sm
+  }),
+  switchWrap: {
+    paddingHorizontal: GUTTER,
+    paddingBottom: SPACE.md,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.border
+  },
+  viewSwitch: {
+    flexDirection: "row",
+    gap: SPACE.xs,
+    padding: SPACE.xs,
+    borderRadius: RADIUS.sm,
+    backgroundColor: theme.card
+  },
+  viewButton: {
+    flex: 1,
+    minHeight: 40,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: SPACE.sm,
+    paddingHorizontal: SPACE.md,
+    borderRadius: 6
+  },
+  viewButtonOn: {
+    backgroundColor: theme.background
+  },
+  viewLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontWeight: "500",
+    color: theme.mutedForeground
+  }),
+  viewLabelOn: {
+    color: theme.foreground,
+    fontWeight: "600"
+  },
+  searchRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.md,
+    padding: GUTTER,
+    paddingBottom: SPACE.lg
+  },
+  searchBox: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.sm,
+    height: 44,
+    paddingLeft: SPACE.md,
+    paddingRight: SPACE.xs,
+    borderRadius: RADIUS.sm,
+    backgroundColor: theme.surface,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.borderStrong
+  },
+  searchInput: __spreadProps(__spreadValues({}, TYPE.body), {
+    fontSize: 14,
+    flex: 1,
+    paddingVertical: 0,
+    color: theme.foreground
+  }),
+  section: {
+    paddingHorizontal: GUTTER,
+    marginBottom: SPACE.xl
+  },
+  shelves: {
+    paddingHorizontal: GUTTER
+  },
+  topics: {
+    paddingTop: SPACE.lg,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.border,
+    marginHorizontal: GUTTER,
+    paddingHorizontal: 0
+  },
+  sectionTitle: {
+    fontSize: 18,
+    lineHeight: 25,
+    fontWeight: "600",
+    color: theme.foreground
+  },
+  sectionIntro: __spreadProps(__spreadValues({}, TYPE.body), {
+    fontSize: 14,
+    lineHeight: 20,
+    color: theme.mutedForeground
+  }),
+  introGap: {
+    marginTop: 2,
+    marginBottom: SPACE.md
+  },
+  noMatch: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: SPACE.md
+  },
+  categoryGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SPACE.sm
+  },
+  category: {
+    width: "23%",
+    alignItems: "center",
+    gap: SPACE.xs,
+    paddingVertical: SPACE.xs
+  },
+  categoryIcon: {
+    width: 52,
+    height: 52,
+    borderRadius: 26,
+    backgroundColor: theme.card,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  categoryIconOn: {
+    borderWidth: 1.5,
+    borderColor: theme.foreground
+  },
+  categoryLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.foreground,
+    textAlign: "center"
+  }),
+  rail: {
+    flexGrow: 0,
+    marginHorizontal: -16
+  },
+  railContent: {
+    paddingHorizontal: GUTTER,
+    gap: SPACE.md
+  },
+  sizeCard: {
+    width: 128,
+    gap: 2
+  },
+  sizeFrame: {
+    height: 104,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.card,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  sizeShape: {
+    backgroundColor: theme.surface,
+    borderRadius: 3,
+    borderWidth: 1,
+    borderColor: theme.borderStrong
+  },
+  sizeLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.foreground,
+    marginTop: SPACE.xs
+  }),
+  sizeDetail: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.mutedForeground
+  }),
+  custom: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.sm,
+    marginTop: SPACE.md
+  },
+  customInput: __spreadValues({
+    width: 76,
+    height: 44,
+    borderRadius: RADIUS.sm,
+    paddingHorizontal: SPACE.md,
+    backgroundColor: theme.card,
+    color: theme.foreground
+  }, TYPE.body),
+  customX: __spreadProps(__spreadValues({}, TYPE.body), {
+    color: theme.mutedForeground
+  }),
+  // Recent designs
+  recentHeader: {
+    paddingHorizontal: GUTTER,
+    paddingTop: SPACE.lg,
+    paddingBottom: SPACE.md,
+    gap: 2
+  },
+  recentContent: {
+    paddingHorizontal: GUTTER - SPACE.xs,
+    paddingTop: SPACE.xs
+  },
+  recentList: {
+    gap: SPACE.sm
+  },
+  recentFooter: {
+    paddingTop: SPACE.lg,
+    paddingHorizontal: SPACE.xs
+  },
+  fullWidth: {
+    alignSelf: "stretch"
+  },
+  row: {
+    borderRadius: RADIUS.sm,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "transparent"
+  },
+  rowMain: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: SPACE.xs,
+    padding: SPACE.sm
+  },
+  rowOpen: {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.md
+  },
+  rowThumb: {
+    width: 80,
+    height: 64,
+    borderRadius: RADIUS.sm - 2,
+    backgroundColor: theme.card,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  rowPage: {
+    borderRadius: 3
+  },
+  rowText: {
+    flex: 1,
+    minWidth: 0,
+    gap: 4
+  },
+  rowTitle: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontWeight: "500",
+    fontSize: 14,
+    lineHeight: 19,
+    color: theme.foreground
+  }),
+  rowDetail: __spreadProps(__spreadValues({}, TYPE.caption), {
+    fontWeight: "400",
+    color: theme.mutedForeground
+  }),
+  renameRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.xs,
+    marginHorizontal: SPACE.sm,
+    marginBottom: SPACE.sm
+  },
+  renameInput: {
+    flex: 1,
+    height: 36,
+    paddingHorizontal: SPACE.sm,
+    borderRadius: RADIUS.sm,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.borderStrong,
+    backgroundColor: theme.surface,
+    color: theme.foreground,
+    fontSize: 14
+  },
+  actions: {
+    flexDirection: "row",
+    gap: SPACE.xs,
+    padding: 6,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.border
+  },
+  action: {
+    flex: 1,
+    minHeight: 36,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    borderRadius: 6
+  },
+  actionLabel: __spreadValues({}, TYPE.caption),
+  skeletonRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.md,
+    padding: SPACE.sm
+  },
+  skeletonThumb: {
+    width: 80,
+    height: 64
+  },
+  skeletonText: {
+    flex: 1,
+    gap: SPACE.sm
+  },
+  alert: {
+    gap: SPACE.md,
+    alignItems: "flex-start",
+    padding: SPACE.lg,
+    borderRadius: RADIUS.sm,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.border
+  },
+  alertText: __spreadProps(__spreadValues({}, TYPE.body), {
+    fontSize: 14,
+    lineHeight: 20,
+    color: theme.mutedForeground
+  }),
+  emptyBox: {
+    gap: SPACE.sm,
+    paddingHorizontal: SPACE.lg,
+    paddingVertical: SPACE.xl,
+    borderRadius: RADIUS.sm,
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderColor: theme.borderStrong
+  },
+  emptyTitle: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontSize: 14,
+    color: theme.foreground
+  })
+}));export{DesignHome};//# sourceMappingURL=DesignHome.js.map