@adminide-stack/yantra-mobile 12.0.121 → 12.0.123

package/lib/features/canvas/CanvasBoardsGrid.js

@@ -1,6 +1,4 @@
-import {jsxs,jsx}from'react/jsx-runtime';import {useState,useEffect,useMemo,useCallback}from'react';import {StyleSheet,useWindowDimensions,View,Text,ScrollView,Pressable,FlatList}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {isUnsetBoardTitle}from'./canvasCore.js';import {CANVAS_BOARD_PAGE_SIZE}from'./canvasBoardsCatalog.js';var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useMemo,useEffect,useCallback}from'react';import {StyleSheet,useWindowDimensions,View,Text,Pressable,ScrollView,FlatList}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {isUnsetBoardTitle}from'./canvasCore.js';import {CANVAS_BOARD_PAGE_SIZE}from'./canvasBoardsCatalog.js';import {mergeWork,availableFilters,matchesFilter,WORK_FILTERS,designNoun,pageCount,boardCover,videoCoverFrame}from'./homeWork.js';import {resultUrl}from'./videoEditor/mediaActions.js';import {unwrapProxyUrl}from'./videoEditor/remoteMediaClient.js';var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -16,12 +14,12 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const MINUTE = 6e4;
 const HOUR = 60 * MINUTE;
 const DAY = 24 * HOUR;
 const GUTTER = 16;
 const TILE_RADIUS = 12;
+const THUMB_HEIGHT = 140;
 function relativeTime(ts) {
   const diff = Date.now() - ts;
   if (diff < HOUR) return `${Math.max(1, Math.round(diff / MINUTE))}m ago`;
@@ -35,32 +33,34 @@ function CanvasBoardsGrid({
   onNewCanvas,
   designs = [],
   onOpenDesign,
-  onNewDesign,
   onAskAgent,
-  onComposeGenerate,
+  createGroups = [],
+  onCreate,
   featuredLooks = [],
-  onRecreateLook
+  onRecreateLook,
+  runAction
 }) {
   const {
     width
   } = useWindowDimensions();
   const tileWidth = Math.max(140, (width - GUTTER * 3) / 2);
   const [visible, setVisible] = useState(CANVAS_BOARD_PAGE_SIZE);
+  const [filter, setFilter] = useState("all");
+  const work = useMemo(() => mergeWork(boards, designs), [boards, designs]);
+  const filters = useMemo(() => availableFilters(work), [work]);
+  const active = filters.includes(filter) ? filter : "all";
+  const shown = useMemo(() => work.filter((item) => matchesFilter(item, active)), [work, active]);
   useEffect(() => {
     setVisible(CANVAS_BOARD_PAGE_SIZE);
-  }, [boards]);
-  const tiles = useMemo(() => {
-    const shown = boards.slice(0, visible);
-    return [{
-      kind: "new",
-      id: "__new__"
-    }, ...shown.map((board) => ({
-      kind: "board",
-      id: board.channelId,
-      board,
-      preview: board.board.items.find((it) => it.type === "image" || it.type === "video")
-    }))];
-  }, [boards, visible]);
+  }, [boards, designs, active]);
+  const tiles = useMemo(() => [{
+    kind: "new",
+    id: "__new__"
+  }, ...shown.slice(0, visible).map((entry) => ({
+    kind: "work",
+    id: `${entry.type}:${entry.id}`,
+    work: entry
+  }))], [shown, visible]);
   const rows = useMemo(() => {
     const chunked = [];
     for (let i = 0; i < tiles.length; i += 2) {
@@ -70,17 +70,39 @@ function CanvasBoardsGrid({
   }, [tiles]);
   const loadMore = useCallback(() => {
     setVisible((count) => {
-      if (count >= boards.length) return count;
-      return Math.min(count + CANVAS_BOARD_PAGE_SIZE, boards.length);
+      if (count >= shown.length) return count;
+      return Math.min(count + CANVAS_BOARD_PAGE_SIZE, shown.length);
     });
-  }, [boards.length]);
-  const studioStrip = onNewDesign || onAskAgent || onComposeGenerate || featuredLooks.length > 0 ? /* @__PURE__ */ jsxs(View, { style: styles.studioStrip, children: [
-    onComposeGenerate ? /* @__PURE__ */ jsxs(View, { style: styles.composerBlock, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.studioLabel, children: "Start creating" }),
-      /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.studioRow, children: [["video", "Featured look", "Cinematic product hero, soft rim light, 9:16"], ["image", "Character", "Portrait of a friendly guide character, clean studio"], ["video", "Camera", "Handheld tracking shot through a neon alley at night"], ["video", "Film setup", "Anamorphic film still, shallow DOF, golden hour"]].map(([mode, label, prompt]) => /* @__PURE__ */ jsx(Pressable, { onPress: () => onComposeGenerate({
-        mode,
-        prompt
-      }), style: styles.studioChip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.studioChipLabel, children: label }) }, label)) })
+  }, [shown.length]);
+  const header = /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+    onCreate && createGroups.length > 0 ? /* @__PURE__ */ jsxs(View, { style: styles.createBlock, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.createHead, children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.flexShrink, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.createTitle, children: "Create" }),
+          /* @__PURE__ */ jsx(Text, { style: styles.createSub, children: "Generate, edit, or start a blank design." })
+        ] }),
+        onAskAgent ? /* @__PURE__ */ jsxs(Pressable, { onPress: onAskAgent, style: styles.askAgentBtn, accessibilityRole: "button", accessibilityLabel: "AI Chat", children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "creation", size: 14, color: "#64748b" }),
+          /* @__PURE__ */ jsx(Text, { style: styles.askAgentLabel, children: "AI Chat" })
+        ] }) : null
+      ] }),
+      createGroups.map((group) => /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.groupTitle, {
+          color: group.accent.fg,
+          borderBottomColor: group.accent.bg
+        }], children: group.title }),
+        /* @__PURE__ */ jsx(View, { style: styles.groupTiles, children: group.tiles.map((tile) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => onCreate(tile.action, tile.id), style: [styles.createTile, {
+          width: tileWidth
+        }], accessibilityRole: "button", accessibilityLabel: `${tile.label}: ${tile.hint}`, testID: `create-tile-${tile.id}`, children: [
+          /* @__PURE__ */ jsx(View, { style: [styles.createIcon, {
+            backgroundColor: group.accent.bg
+          }], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: tile.icon, size: 18, color: group.accent.fg }) }),
+          /* @__PURE__ */ jsxs(View, { style: styles.flexShrink, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.createLabel, numberOfLines: 1, children: tile.label }),
+            /* @__PURE__ */ jsx(Text, { style: styles.createHint, numberOfLines: 2, children: tile.hint })
+          ] })
+        ] }, tile.id)) })
+      ] }, group.id))
     ] }) : null,
     featuredLooks.length > 0 && onRecreateLook ? /* @__PURE__ */ jsxs(View, { style: styles.composerBlock, children: [
       /* @__PURE__ */ jsx(Text, { style: styles.studioLabel, children: "Looks" }),
@@ -91,26 +113,18 @@ function CanvasBoardsGrid({
         /* @__PURE__ */ jsx(Text, { style: styles.lookName, numberOfLines: 2, children: look.name })
       ] }, look.id)) })
     ] }) : null,
-    /* @__PURE__ */ jsxs(View, { style: styles.studioHead, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.studioLabel, children: "Design studio" }),
-      onAskAgent ? /* @__PURE__ */ jsxs(Pressable, { onPress: onAskAgent, style: styles.askAgentBtn, accessibilityRole: "button", accessibilityLabel: "AI Chat", children: [
-        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "creation", size: 14, color: "#64748b" }),
-        /* @__PURE__ */ jsx(Text, { style: styles.askAgentLabel, children: "AI Chat" })
-      ] }) : null
-    ] }),
-    onNewDesign ? /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.studioRow, children: [
-      [["design", "shape-square-plus", "Design"], ["tshirt", "tshirt-crew-outline", "T-shirt"], ["postcard", "email-outline", "Postcard"]].map(([kind, icon, label]) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => onNewDesign(kind), style: styles.studioChip, accessibilityRole: "button", accessibilityLabel: `New ${label}`, children: [
-        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 16, color: "#0f172a" }),
-        /* @__PURE__ */ jsx(Text, { style: styles.studioChipLabel, children: label })
-      ] }, kind)),
-      designs.map((design) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => onOpenDesign == null ? void 0 : onOpenDesign(design.channelId), style: [styles.studioChip, styles.studioChipSaved], accessibilityRole: "button", children: [
-        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: design.doc.kind === "tshirt" ? "tshirt-crew-outline" : design.doc.kind === "postcard" ? "email-outline" : "shape-square-plus", size: 16, color: "#f8fafc" }),
-        /* @__PURE__ */ jsx(Text, { style: [styles.studioChipLabel, styles.studioChipLabelSaved], numberOfLines: 1, children: design.title || "Design" })
-      ] }, design.channelId))
-    ] }) : null
-  ] }) : null;
+    /* @__PURE__ */ jsxs(View, { style: styles.workHead, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.workTitle, children: "Your work" }),
+      filters.length > 0 ? /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.studioRow, children: WORK_FILTERS.filter((f) => filters.includes(f.id)).map((f) => {
+        const on = f.id === active;
+        return /* @__PURE__ */ jsx(Pressable, { onPress: () => setFilter(f.id), style: [styles.filterChip, on && styles.filterChipOn], accessibilityRole: "button", accessibilityState: {
+          selected: on
+        }, children: /* @__PURE__ */ jsx(Text, { style: [styles.filterLabel, on && styles.filterLabelOn], children: f.label }) }, f.id);
+      }) }) : null
+    ] })
+  ] });
   const renderTile = (item) => {
-    var _a;
+    var _a, _b;
     if (item.kind === "new") {
       return /* @__PURE__ */ jsxs(Pressable, { onPress: onNewCanvas, style: [styles.tile, styles.tileDashed, {
         width: tileWidth
@@ -123,23 +137,43 @@ function CanvasBoardsGrid({
       ] });
     }
     const {
-      board,
-      preview
+      work: entry
     } = item;
-    const title = !isUnsetBoardTitle(board.title) ? board.title : ((_a = board.board.items.find((it) => it.generatedAssetName)) == null ? void 0 : _a.generatedAssetName) || "Untitled";
+    if (entry.type === "design") {
+      const {
+        design
+      } = entry;
+      const noun = designNoun(design.doc);
+      const title2 = ((_a = design.title) == null ? void 0 : _a.trim()) || `Untitled ${noun.toLowerCase()}`;
+      const meta = [noun, pageCount(design.doc), relativeTime(design.savedAt)].filter(Boolean).join(" \xB7 ");
+      return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onOpenDesign == null ? void 0 : onOpenDesign(design.channelId), style: [styles.tile, {
+        width: tileWidth
+      }], accessibilityRole: "button", accessibilityLabel: `Open ${noun.toLowerCase()} ${title2}`, children: [
+        /* @__PURE__ */ jsx(View, { style: styles.thumb, children: /* @__PURE__ */ jsx(DesignThumb, { doc: design.doc, maxWidth: tileWidth - 24 }) }),
+        /* @__PURE__ */ jsxs(View, { style: styles.meta, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.metaTitle, numberOfLines: 1, children: title2 }),
+          /* @__PURE__ */ jsx(Text, { style: styles.metaSub, numberOfLines: 1, children: meta })
+        ] })
+      ] });
+    }
+    const {
+      board
+    } = entry;
+    const cover = boardCover(board.board.items);
+    const title = !isUnsetBoardTitle(board.title) ? board.title : ((_b = board.board.items.find((it) => it.generatedAssetName)) == null ? void 0 : _b.generatedAssetName) || "Untitled";
     return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onOpen(board.channelId), style: [styles.tile, {
       width: tileWidth
     }], accessibilityRole: "button", children: [
-      /* @__PURE__ */ jsx(View, { style: styles.thumb, children: (preview == null ? void 0 : preview.type) === "image" ? /* @__PURE__ */ jsx(Image, { source: {
-        uri: preview.src
-      }, style: styles.thumbImage, contentFit: "cover" }) : (preview == null ? void 0 : preview.type) === "video" ? /* @__PURE__ */ jsx(View, { style: styles.thumbVideo, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "play", size: 28, color: "#f8fafc" }) }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-outline", size: 28, color: "#94a3b8" }) }),
+      /* @__PURE__ */ jsx(View, { style: styles.thumb, children: cover ? /* @__PURE__ */ jsx(BoardCover, { item: cover, runAction }, cover.src) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-outline", size: 28, color: "#94a3b8" }) }),
       /* @__PURE__ */ jsxs(View, { style: styles.meta, children: [
         /* @__PURE__ */ jsx(Text, { style: styles.metaTitle, numberOfLines: 1, children: title }),
         /* @__PURE__ */ jsxs(Text, { style: styles.metaSub, children: [
+          "Canvas \xB7 ",
           board.itemCount,
           " item",
           board.itemCount === 1 ? "" : "s",
-          " \xB7 ",
+          " \xB7",
+          " ",
           relativeTime(board.savedAt)
         ] })
       ] })
@@ -147,8 +181,8 @@ function CanvasBoardsGrid({
   };
   return /* @__PURE__ */ jsxs(View, { style: styles.plane, children: [
     /* @__PURE__ */ jsx(DotGrid, {}),
-    boards.length === 0 ? /* @__PURE__ */ jsxs(View, { style: styles.emptyWrap, children: [
-      studioStrip,
+    work.length === 0 ? /* @__PURE__ */ jsxs(ScrollView, { contentContainerStyle: styles.emptyWrap, showsVerticalScrollIndicator: false, children: [
+      header,
       /* @__PURE__ */ jsxs(View, { style: styles.emptyCard, children: [
         /* @__PURE__ */ jsx(Text, { style: styles.emptyTitle, children: "Your canvases will appear here" }),
         /* @__PURE__ */ jsx(Text, { style: styles.emptyDetail, children: "Every chat gets its own canvas. Generate an image, video, or audio and it lands on this board \u2014 come back here to reach the ones from your other chats." }),
@@ -157,7 +191,7 @@ function CanvasBoardsGrid({
           /* @__PURE__ */ jsx(Text, { style: styles.emptyCtaLabel, children: "New canvas" })
         ] })
       ] })
-    ] }) : /* @__PURE__ */ jsx(FlatList, { data: rows, keyExtractor: (pair) => pair.map((item) => item.id).join(":"), contentContainerStyle: styles.gridList, showsVerticalScrollIndicator: false, onEndReached: loadMore, onEndReachedThreshold: 0.4, ListHeaderComponent: studioStrip ? /* @__PURE__ */ jsx(View, { style: styles.studioInGrid, children: studioStrip }) : null, renderItem: ({
+    ] }) : /* @__PURE__ */ jsx(FlatList, { data: rows, keyExtractor: (pair) => pair.map((item) => item.id).join(":"), contentContainerStyle: styles.gridList, showsVerticalScrollIndicator: false, onEndReached: loadMore, onEndReachedThreshold: 0.4, ListHeaderComponent: header, renderItem: ({
       item: pair
     }) => /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
       pair.map((entry) => /* @__PURE__ */ jsx(View, { children: renderTile(entry) }, entry.id)),
@@ -167,6 +201,85 @@ function CanvasBoardsGrid({
     ] }) })
   ] });
 }
+function BoardCover({
+  item,
+  runAction
+}) {
+  const [failed, setFailed] = useState(false);
+  const [frame, setFrame] = useState(item.type === "video" ? void 0 : item.src);
+  useEffect(() => {
+    if (item.type !== "video") return void 0;
+    if (!runAction) {
+      setFrame(null);
+      return void 0;
+    }
+    let live = true;
+    void videoCoverFrame(unwrapProxyUrl(item.src), runAction, (result) => resultUrl(result, "YANTRA_VIDEO_EDIT_THUMBNAIL")).then((url) => {
+      if (live) setFrame(url);
+    });
+    return () => {
+      live = false;
+    };
+  }, [item.src, item.type, runAction]);
+  const isVideo = item.type === "video";
+  if (failed || frame === null) {
+    return /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: isVideo ? "movie-outline" : "image-off-outline", size: 28, color: "#94a3b8" });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    frame ? /* @__PURE__ */ jsx(Image, { source: {
+      uri: frame
+    }, style: styles.thumbImage, contentFit: "cover", onError: () => setFailed(true) }) : null,
+    isVideo ? /* @__PURE__ */ jsx(View, { style: styles.playBadge, pointerEvents: "none", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "play", size: 18, color: "#f8fafc" }) }) : null
+  ] });
+}
+function DesignThumb({
+  doc,
+  maxWidth
+}) {
+  const page = doc.pages[0];
+  if (!page || !(page.width > 0) || !(page.height > 0)) {
+    return /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "shape-outline", size: 28, color: "#94a3b8" });
+  }
+  const maxH = THUMB_HEIGHT - 24;
+  const scale = Math.min(maxWidth / page.width, maxH / page.height);
+  const layers = [...page.layers].sort((a, b) => a.zIndex - b.zIndex);
+  return /* @__PURE__ */ jsx(View, { style: [styles.designPage, {
+    width: page.width * scale,
+    height: page.height * scale,
+    backgroundColor: page.background || "#ffffff"
+  }], pointerEvents: "none", children: layers.map((layer) => /* @__PURE__ */ jsx(DesignThumbLayer, { layer, scale }, layer.id)) });
+}
+function DesignThumbLayer({
+  layer,
+  scale
+}) {
+  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" });
+  }
+  if (layer.type === "shape") {
+    return /* @__PURE__ */ jsx(View, { style: [box, {
+      backgroundColor: layer.fill,
+      borderRadius: layer.cornerRadius * scale
+    }] });
+  }
+  return /* @__PURE__ */ jsx(Text, { 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
+  }], numberOfLines: 3, children: layer.text });
+}
 function DotGrid() {
   return /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.dots, children: Array.from({
     length: 18
@@ -198,10 +311,10 @@ const styles = StyleSheet.create({
     backgroundColor: "rgba(15,23,42,0.14)"
   },
   emptyWrap: {
-    flex: 1,
+    flexGrow: 1,
     alignItems: "center",
-    justifyContent: "center",
-    padding: 24
+    padding: GUTTER,
+    paddingBottom: 32
   },
   emptyCard: {
     width: "100%",
@@ -279,7 +392,7 @@ const styles = StyleSheet.create({
     backgroundColor: "rgba(255,255,255,0.7)"
   },
   thumb: {
-    height: 140,
+    height: THUMB_HEIGHT,
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "#f1f5f9",
@@ -287,21 +400,104 @@ const styles = StyleSheet.create({
     gap: 8
   },
   thumbImage: __spreadValues({}, StyleSheet.absoluteFillObject),
-  thumbVideo: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
+  playBadge: {
+    position: "absolute",
+    right: 8,
+    bottom: 8,
+    width: 28,
+    height: 28,
+    borderRadius: 14,
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "#0f172a"
-  }),
+    backgroundColor: "rgba(15,23,42,0.55)"
+  },
+  designPage: {
+    overflow: "hidden",
+    borderRadius: 2,
+    shadowColor: "#0f172a",
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    elevation: 1
+  },
   dashHint: {
     fontSize: 12,
     color: "#64748b"
   },
-  studioStrip: {
+  header: {
     alignSelf: "stretch",
+    width: "100%",
+    marginBottom: 4
+  },
+  createBlock: {
     marginBottom: 16
   },
+  createHead: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: 12,
+    marginBottom: 12
+  },
+  createTitle: {
+    fontSize: 22,
+    fontWeight: "600",
+    color: "#0f172a"
+  },
+  createSub: {
+    marginTop: 2,
+    fontSize: 13,
+    color: "#64748b"
+  },
+  flexShrink: {
+    flexShrink: 1
+  },
+  group: {
+    marginBottom: 14
+  },
+  groupTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    paddingBottom: 6,
+    marginBottom: 8,
+    borderBottomWidth: 1
+  },
+  groupTiles: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    columnGap: GUTTER,
+    rowGap: 4
+  },
+  createTile: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 10,
+    minHeight: 48,
+    paddingVertical: 6
+  },
+  createIcon: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  createLabel: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#0f172a"
+  },
+  createHint: {
+    marginTop: 1,
+    fontSize: 11,
+    lineHeight: 14,
+    color: "#64748b"
+  },
   composerBlock: {
-    marginBottom: 12,
+    marginBottom: 16,
     gap: 8
   },
   lookChip: {
@@ -328,15 +524,34 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     color: "#0f172a"
   },
-  studioInGrid: {
-    width: "100%"
+  workHead: {
+    gap: 8,
+    marginBottom: 12
   },
-  studioHead: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 12,
-    marginBottom: 8
+  workTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#0f172a"
+  },
+  filterChip: {
+    backgroundColor: "#ffffff",
+    borderWidth: 1,
+    borderColor: "rgba(15,23,42,0.1)",
+    borderRadius: 999,
+    paddingHorizontal: 14,
+    paddingVertical: 7
+  },
+  filterChipOn: {
+    backgroundColor: "#0f172a",
+    borderColor: "#0f172a"
+  },
+  filterLabel: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#0f172a"
+  },
+  filterLabelOn: {
+    color: "#f8fafc"
   },
   studioLabel: {
     fontSize: 11,
@@ -368,30 +583,6 @@ const styles = StyleSheet.create({
     gap: 8,
     paddingBottom: 4
   },
-  studioChip: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    backgroundColor: "#ffffff",
-    borderWidth: 1,
-    borderColor: "rgba(15,23,42,0.1)",
-    borderRadius: 999,
-    paddingHorizontal: 14,
-    paddingVertical: 9
-  },
-  studioChipSaved: {
-    backgroundColor: "#0f172a",
-    borderColor: "#0f172a"
-  },
-  studioChipLabel: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: "#0f172a",
-    maxWidth: 140
-  },
-  studioChipLabelSaved: {
-    color: "#f8fafc"
-  },
   meta: {
     borderTopWidth: StyleSheet.hairlineWidth,
     borderTopColor: "rgba(15,23,42,0.08)",