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

package/lib/features/canvas/home/HeroMonitor.js

@@ -0,0 +1,225 @@
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useState,useRef,useEffect,useCallback}from'react';import {View,Text,StyleSheet,Linking}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {useCanvasTheme,themedStyles}from'../canvasTheme.js';import {Skeleton,RADIUS,Pressable,pressedStyle,SPACE,TYPE}from'../canvasUi.js';import {LoopingVideo}from'./LoopingVideo.js';import {HERO_CUT_MS,cropInset,heroTimecode}from'./heroShots.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 PHONE_THUMBS = 4;
+function HeroMonitor({
+  shots,
+  index,
+  onCut,
+  paused,
+  playing,
+  still,
+  aspect,
+  resolution,
+  slate,
+  onUseShot
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const shot = shots[index];
+  const [time, setTime] = useState(0);
+  const [width, setWidth] = useState(0);
+  const lastTick = useRef(0);
+  useEffect(() => setTime(0), [shot == null ? void 0 : shot.id]);
+  useEffect(() => {
+    if (paused || shots.length < 2) return void 0;
+    const timer = setTimeout(() => onCut((index + 1) % shots.length), HERO_CUT_MS);
+    return () => clearTimeout(timer);
+  }, [paused, index, shots.length, onCut]);
+  const onTime = useCallback((seconds) => {
+    if (Math.abs(seconds - lastTick.current) < 0.9) return;
+    lastTick.current = seconds;
+    setTime(seconds);
+  }, []);
+  if (!shot) {
+    return /* @__PURE__ */ jsx(View, { style: styles.root, accessibilityLabel: "Loading shots", children: /* @__PURE__ */ jsx(Skeleton, { radius: RADIUS.lg, style: styles.loadingFrame }) });
+  }
+  const height = width ? Math.round(width * 9 / 16) : 0;
+  const {
+    x,
+    y
+  } = cropInset(aspect, 16 / 9);
+  const openCredit = () => {
+    if (shot.credit) void Linking.openURL(shot.credit.sourceUrl).catch(() => void 0);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
+    /* @__PURE__ */ jsxs(View, { style: [styles.frame, height ? {
+      height
+    } : styles.frameFallback], onLayout: (e) => setWidth(e.nativeEvent.layout.width), accessibilityLabel: `Monitor: ${shot.title}`, children: [
+      /* @__PURE__ */ jsx(LoopingVideo, { src: shot.video, poster: shot.poster, playing: playing && !still, onTime }, shot.id),
+      y > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [styles.matte, {
+          top: 0,
+          left: 0,
+          right: 0,
+          height: `${y * 100}%`
+        }] }),
+        /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [styles.matte, {
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: `${y * 100}%`
+        }] })
+      ] }) : null,
+      x > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [styles.matte, {
+          top: 0,
+          bottom: 0,
+          left: 0,
+          width: `${x * 100}%`
+        }] }),
+        /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [styles.matte, {
+          top: 0,
+          bottom: 0,
+          right: 0,
+          width: `${x * 100}%`
+        }] })
+      ] }) : null,
+      /* @__PURE__ */ jsxs(View, { style: styles.topBar, pointerEvents: "none", children: [
+        /* @__PURE__ */ jsx(View, { style: [styles.dot, still ? styles.dotStill : styles.dotRec] }),
+        /* @__PURE__ */ jsx(Text, { style: styles.mono, children: still ? "STILL" : "REC" }),
+        /* @__PURE__ */ jsx(Text, { style: styles.mono, children: heroTimecode(time) }),
+        /* @__PURE__ */ jsx(Text, { style: styles.mono, children: aspect }),
+        /* @__PURE__ */ jsx(Text, { style: styles.mono, children: resolution })
+      ] }),
+      /* @__PURE__ */ jsx(View, { style: styles.slate, pointerEvents: "none", children: /* @__PURE__ */ jsx(Text, { style: styles.slateText, numberOfLines: 2, children: slate.trim() || shot.title }) }),
+      /* @__PURE__ */ jsxs(Pressable, { onPress: () => onUseShot(shot), style: ({
+        pressed
+      }) => [styles.useShot, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Use this shot's prompt: ${shot.title}`, children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "content-copy", size: 13, color: "#fafafa" }),
+        /* @__PURE__ */ jsx(Text, { style: styles.useShotLabel, children: "Use shot" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(View, { style: styles.dots, children: shots.slice(0, PHONE_THUMBS).map((s, i) => {
+      const on = i === index;
+      return /* @__PURE__ */ jsx(Pressable, { onPress: () => onCut(i), hitSlop: 8, style: [styles.dotHit], accessibilityRole: "button", accessibilityLabel: s.title, accessibilityState: {
+        selected: on
+      }, children: /* @__PURE__ */ jsx(View, { style: [styles.pager, on && styles.pagerOn] }) }, s.id);
+    }) }),
+    shot.credit ? (
+      // The clip's licence asks for credit: one quiet line, only for those clips.
+      /* @__PURE__ */ jsx(Pressable, { onPress: openCredit, hitSlop: 6, accessibilityRole: "link", accessibilityLabel: `${shot.title} by ${shot.credit.author}, ${shot.credit.license}. Open the original post`, children: /* @__PURE__ */ jsx(Text, { style: styles.creditText, numberOfLines: 1, children: `${shot.credit.author} \xB7 ${shot.credit.license}` }) })
+    ) : null
+  ] });
+}
+const makeStyles = themedStyles((theme) => StyleSheet.create({
+  root: {
+    gap: SPACE.xs + 2
+  },
+  loadingFrame: {
+    width: "100%",
+    aspectRatio: 16 / 9
+  },
+  frame: {
+    width: "100%",
+    borderRadius: RADIUS.lg,
+    overflow: "hidden",
+    // The monitor is always a dark well: footage reads on black in either theme.
+    backgroundColor: "#000000"
+  },
+  frameFallback: {
+    aspectRatio: 16 / 9
+  },
+  matte: {
+    position: "absolute",
+    backgroundColor: "rgba(0,0,0,0.62)"
+  },
+  topBar: {
+    position: "absolute",
+    top: SPACE.sm,
+    left: SPACE.sm,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.sm,
+    paddingHorizontal: SPACE.sm,
+    paddingVertical: SPACE.xs,
+    borderRadius: RADIUS.sm,
+    backgroundColor: "rgba(0,0,0,0.45)"
+  },
+  dot: {
+    width: 7,
+    height: 7,
+    borderRadius: 4
+  },
+  dotRec: {
+    backgroundColor: "#ef4444"
+  },
+  dotStill: {
+    backgroundColor: "#fafafa"
+  },
+  mono: {
+    fontSize: 11,
+    lineHeight: 14,
+    fontVariant: ["tabular-nums"],
+    color: "#fafafa"
+  },
+  slate: {
+    position: "absolute",
+    left: SPACE.sm,
+    bottom: SPACE.sm,
+    maxWidth: "70%",
+    paddingHorizontal: SPACE.sm,
+    paddingVertical: SPACE.xs + 2,
+    borderRadius: RADIUS.sm,
+    backgroundColor: "rgba(0,0,0,0.55)"
+  },
+  slateText: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: "#fafafa"
+  }),
+  dots: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: SPACE.xs
+  },
+  dotHit: {
+    paddingVertical: SPACE.xs,
+    paddingHorizontal: 2
+  },
+  pager: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: theme.borderStrong
+  },
+  pagerOn: {
+    width: 18,
+    backgroundColor: theme.foreground
+  },
+  creditText: __spreadProps(__spreadValues({}, TYPE.caption), {
+    textAlign: "center",
+    color: theme.mutedForeground,
+    textDecorationLine: "underline"
+  }),
+  useShot: {
+    position: "absolute",
+    top: SPACE.sm,
+    right: SPACE.sm,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.xs,
+    minHeight: 30,
+    paddingHorizontal: SPACE.sm + 2,
+    borderRadius: RADIUS.pill,
+    backgroundColor: "rgba(0,0,0,0.5)"
+  },
+  useShotLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    fontWeight: "600",
+    color: "#fafafa"
+  })
+}));export{HeroMonitor};//# sourceMappingURL=HeroMonitor.js.map

package/lib/features/canvas/home/HeroMonitor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroMonitor.js","sources":["../../../../src/features/canvas/home/HeroMonitor.tsx"],"sourcesContent":["/**\n * The home hero's viewfinder - native twin of canvas-surface `HeroMonitor.tsx`.\n * Loops the current shot (a featured look's cover video, else a Seedance clip),\n * cuts to the next every 7s unless held, and previews the composer's framing:\n * the chosen aspect masks the 16:9 monitor, the top bar reads REC or STILL,\n * the aspect and the resolution. \"Use this shot\" hands its prompt to the composer.\n */\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { Linking, StyleSheet, Text, View } from 'react-native';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport { Image } from 'expo-image';\nimport { useCanvasTheme, themedStyles, type CanvasPalette } from '../canvasTheme';\nimport { Pressable, RADIUS, SPACE, Skeleton, TYPE, pressedStyle } from '../canvasUi';\nimport { LoopingVideo } from './LoopingVideo';\nimport { HERO_CUT_MS, cropInset, heroTimecode, type HeroShot } from './heroShots';\n\n/** Thumbs on a phone (web shows four below `sm`). */\nconst PHONE_THUMBS = 4;\n\nexport function HeroMonitor({\n    shots,\n    index,\n    onCut,\n    paused,\n    playing,\n    still,\n    aspect,\n    resolution,\n    slate,\n    onUseShot,\n}: {\n    shots: readonly HeroShot[];\n    index: number;\n    onCut: (index: number) => void;\n    /** Holds the current shot instead of cutting to the next. */\n    paused: boolean;\n    /** The playback governor's say: false shows the poster only. */\n    playing: boolean;\n    still: boolean;\n    aspect: string;\n    resolution: string;\n    /** The composer's draft, written on the slate. */\n    slate: string;\n    onUseShot: (shot: HeroShot) => void;\n}) {\n    const theme = useCanvasTheme();\n    const styles = makeStyles(theme);\n    const shot = shots[index];\n    const [time, setTime] = useState(0);\n    const [width, setWidth] = useState(0);\n    const lastTick = useRef(0);\n\n    useEffect(() => setTime(0), [shot?.id]);\n\n    useEffect(() => {\n        if (paused || shots.length < 2) return undefined;\n        const timer = setTimeout(() => onCut((index + 1) % shots.length), HERO_CUT_MS);\n        return () => clearTimeout(timer);\n    }, [paused, index, shots.length, onCut]);\n\n    // The player reports at 4Hz; a whole-second readout is all a phone needs to re-render for.\n    const onTime = useCallback((seconds: number) => {\n        if (Math.abs(seconds - lastTick.current) < 0.9) return;\n        lastTick.current = seconds;\n        setTime(seconds);\n    }, []);\n\n    if (!shot) {\n        return (\n            <View style={styles.root} accessibilityLabel=\"Loading shots\">\n                <Skeleton radius={RADIUS.lg} style={styles.loadingFrame} />\n            </View>\n        );\n    }\n\n    const height = width ? Math.round((width * 9) / 16) : 0;\n    const { x, y } = cropInset(aspect, 16 / 9);\n    const openCredit = () => {\n        if (shot.credit) void Linking.openURL(shot.credit.sourceUrl).catch(() => undefined);\n    };\n\n    return (\n        <View style={styles.root}>\n            <View\n                style={[styles.frame, height ? { height } : styles.frameFallback]}\n                onLayout={(e) => setWidth(e.nativeEvent.layout.width)}\n                accessibilityLabel={`Monitor: ${shot.title}`}\n            >\n                <LoopingVideo\n                    key={shot.id}\n                    src={shot.video}\n                    poster={shot.poster}\n                    playing={playing && !still}\n                    onTime={onTime}\n                />\n                {/* The chosen framing, as matte bars over the 16:9 monitor. */}\n                {y > 0 ? (\n                    <>\n                        <View\n                            pointerEvents=\"none\"\n                            style={[styles.matte, { top: 0, left: 0, right: 0, height: `${y * 100}%` }]}\n                        />\n                        <View\n                            pointerEvents=\"none\"\n                            style={[styles.matte, { bottom: 0, left: 0, right: 0, height: `${y * 100}%` }]}\n                        />\n                    </>\n                ) : null}\n                {x > 0 ? (\n                    <>\n                        <View\n                            pointerEvents=\"none\"\n                            style={[styles.matte, { top: 0, bottom: 0, left: 0, width: `${x * 100}%` }]}\n                        />\n                        <View\n                            pointerEvents=\"none\"\n                            style={[styles.matte, { top: 0, bottom: 0, right: 0, width: `${x * 100}%` }]}\n                        />\n                    </>\n                ) : null}\n                <View style={styles.topBar} pointerEvents=\"none\">\n                    <View style={[styles.dot, still ? styles.dotStill : styles.dotRec]} />\n                    <Text style={styles.mono}>{still ? 'STILL' : 'REC'}</Text>\n                    <Text style={styles.mono}>{heroTimecode(time)}</Text>\n                    <Text style={styles.mono}>{aspect}</Text>\n                    <Text style={styles.mono}>{resolution}</Text>\n                </View>\n                <View style={styles.slate} pointerEvents=\"none\">\n                    <Text style={styles.slateText} numberOfLines={2}>\n                        {slate.trim() || shot.title}\n                    </Text>\n                </View>\n                <Pressable\n                    onPress={() => onUseShot(shot)}\n                    style={({ pressed }) => [styles.useShot, pressedStyle(pressed)]}\n                    accessibilityRole=\"button\"\n                    accessibilityLabel={`Use this shot's prompt: ${shot.title}`}\n                >\n                    <MaterialCommunityIcons name=\"content-copy\" size={13} color=\"#fafafa\" />\n                    <Text style={styles.useShotLabel}>Use shot</Text>\n                </Pressable>\n            </View>\n\n            {/* Dots instead of a thumbnail strip: the shots stay reachable without a second row of pictures. */}\n            <View style={styles.dots}>\n                {shots.slice(0, PHONE_THUMBS).map((s, i) => {\n                    const on = i === index;\n                    return (\n                        <Pressable\n                            key={s.id}\n                            onPress={() => onCut(i)}\n                            hitSlop={8}\n                            style={[styles.dotHit]}\n                            accessibilityRole=\"button\"\n                            accessibilityLabel={s.title}\n                            accessibilityState={{ selected: on }}\n                        >\n                            <View style={[styles.pager, on && styles.pagerOn]} />\n                        </Pressable>\n                    );\n                })}\n            </View>\n\n            {shot.credit ? (\n                // The clip's licence asks for credit: one quiet line, only for those clips.\n                <Pressable\n                    onPress={openCredit}\n                    hitSlop={6}\n                    accessibilityRole=\"link\"\n                    accessibilityLabel={`${shot.title} by ${shot.credit.author}, ${shot.credit.license}. Open the original post`}\n                >\n                    <Text style={styles.creditText} numberOfLines={1}>\n                        {`${shot.credit.author} · ${shot.credit.license}`}\n                    </Text>\n                </Pressable>\n            ) : null}\n        </View>\n    );\n}\n\nconst makeStyles = themedStyles((theme: CanvasPalette) =>\n    StyleSheet.create({\n        root: { gap: SPACE.xs + 2 },\n        loadingFrame: { width: '100%', aspectRatio: 16 / 9 },\n        frame: {\n            width: '100%',\n            borderRadius: RADIUS.lg,\n            overflow: 'hidden',\n            // The monitor is always a dark well: footage reads on black in either theme.\n            backgroundColor: '#000000',\n        },\n        frameFallback: { aspectRatio: 16 / 9 },\n        matte: { position: 'absolute', backgroundColor: 'rgba(0,0,0,0.62)' },\n        topBar: {\n            position: 'absolute',\n            top: SPACE.sm,\n            left: SPACE.sm,\n            flexDirection: 'row',\n            alignItems: 'center',\n            gap: SPACE.sm,\n            paddingHorizontal: SPACE.sm,\n            paddingVertical: SPACE.xs,\n            borderRadius: RADIUS.sm,\n            backgroundColor: 'rgba(0,0,0,0.45)',\n        },\n        dot: { width: 7, height: 7, borderRadius: 4 },\n        dotRec: { backgroundColor: '#ef4444' },\n        dotStill: { backgroundColor: '#fafafa' },\n        mono: { fontSize: 11, lineHeight: 14, fontVariant: ['tabular-nums'], color: '#fafafa' },\n        slate: {\n            position: 'absolute',\n            left: SPACE.sm,\n            bottom: SPACE.sm,\n            maxWidth: '70%',\n            paddingHorizontal: SPACE.sm,\n            paddingVertical: SPACE.xs + 2,\n            borderRadius: RADIUS.sm,\n            backgroundColor: 'rgba(0,0,0,0.55)',\n        },\n        slateText: { ...TYPE.caption, color: '#fafafa' },\n        dots: { flexDirection: 'row', justifyContent: 'center', gap: SPACE.xs },\n        dotHit: { paddingVertical: SPACE.xs, paddingHorizontal: 2 },\n        pager: { width: 6, height: 6, borderRadius: 3, backgroundColor: theme.borderStrong },\n        pagerOn: { width: 18, backgroundColor: theme.foreground },\n        creditText: {\n            ...TYPE.caption,\n            textAlign: 'center',\n            color: theme.mutedForeground,\n            textDecorationLine: 'underline',\n        },\n        useShot: {\n            position: 'absolute',\n            top: SPACE.sm,\n            right: SPACE.sm,\n            flexDirection: 'row',\n            alignItems: 'center',\n            gap: SPACE.xs,\n            minHeight: 30,\n            paddingHorizontal: SPACE.sm + 2,\n            borderRadius: RADIUS.pill,\n            backgroundColor: 'rgba(0,0,0,0.5)',\n        },\n        useShotLabel: { ...TYPE.caption, fontWeight: '600', color: '#fafafa' },\n    }),\n);\n"],"names":[],"mappings":"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"}

package/lib/features/canvas/home/LookDetail.js

@@ -0,0 +1,185 @@
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useState,useRef,useEffect}from'react';import {Modal,View,Text,StyleSheet,ScrollView}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {useCanvasTheme,themedStyles}from'../canvasTheme.js';import {SPACE,IconButton,Pressable,pressedStyle,ActionButton,RADIUS,TYPE}from'../canvasUi.js';import {useSafeInsets}from'../withRemoteSafeArea.js';import {LoopingVideo}from'./LoopingVideo.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 STRIP = 72;
+function LookDetail({
+  looks,
+  index,
+  onIndexChange,
+  onRecreate,
+  onClose
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const insets = useSafeInsets();
+  const look = index >= 0 ? looks[index] : void 0;
+  const [muted, setMuted] = useState(true);
+  const strip = useRef(null);
+  useEffect(() => {
+    var _a;
+    if (index < 0) return;
+    (_a = strip.current) == null ? void 0 : _a.scrollTo({
+      x: Math.max(0, index * (STRIP + SPACE.sm) - STRIP),
+      animated: true
+    });
+  }, [index]);
+  const params = look ? [look.aspect ? `Aspect ${look.aspect}` : "", look.category, ...look.tags.slice(0, 4)].filter(Boolean) : [];
+  return /* @__PURE__ */ jsx(Modal, { visible: Boolean(look), animationType: "slide", presentationStyle: "fullScreen", onRequestClose: onClose, children: look ? /* @__PURE__ */ jsxs(View, { style: [styles.root, {
+    paddingTop: insets.top,
+    paddingBottom: insets.bottom
+  }], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.head, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.kicker, numberOfLines: 1, children: `Look ${index + 1} of ${looks.length}` }),
+      /* @__PURE__ */ jsx(IconButton, { icon: "close", label: "Close look", tone: "filled", size: 36, onPress: onClose })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.stage, children: [
+      look.coverVideo ? /* @__PURE__ */ jsx(LoopingVideo, { src: look.coverVideo, poster: look.cover, playing: true, muted }) : look.cover ? /* @__PURE__ */ jsx(Image, { source: {
+        uri: look.cover
+      }, style: StyleSheet.absoluteFill, contentFit: "contain" }) : /* @__PURE__ */ jsx(View, { style: styles.centered, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "movie-open-outline", size: 28, color: theme.mutedForeground }) }),
+      look.coverVideo ? /* @__PURE__ */ jsx(View, { style: styles.mute, children: /* @__PURE__ */ jsx(IconButton, { icon: muted ? "volume-off" : "volume-high", label: muted ? "Unmute preview" : "Mute preview", tone: "filled", size: 36, onPress: () => setMuted((m) => !m) }) }) : null,
+      /* @__PURE__ */ jsx(View, { style: [styles.edge, styles.edgeLeft], children: index > 0 ? /* @__PURE__ */ jsx(IconButton, { icon: "chevron-left", label: "Previous look", tone: "filled", size: 40, onPress: () => onIndexChange(index - 1) }) : null }),
+      /* @__PURE__ */ jsx(View, { style: [styles.edge, styles.edgeRight], children: index < looks.length - 1 ? /* @__PURE__ */ jsx(IconButton, { icon: "chevron-right", label: "Next look", tone: "filled", size: 40, onPress: () => onIndexChange(index + 1) }) : null })
+    ] }),
+    /* @__PURE__ */ jsxs(ScrollView, { style: styles.body, contentContainerStyle: styles.bodyContent, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.name, children: look.name }),
+      look.description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: look.description }) : null,
+      params.length ? /* @__PURE__ */ jsx(View, { style: styles.params, children: params.map((p) => /* @__PURE__ */ jsx(View, { style: styles.param, children: /* @__PURE__ */ jsx(Text, { style: styles.paramLabel, children: p }) }, p)) }) : null,
+      look.prompt ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.section, children: "Recipe" }),
+        /* @__PURE__ */ jsx(Text, { style: styles.recipe, selectable: true, children: look.prompt })
+      ] }) : null
+    ] }),
+    looks.length > 1 ? /* @__PURE__ */ jsx(ScrollView, { ref: strip, horizontal: true, showsHorizontalScrollIndicator: false, style: styles.strip, contentContainerStyle: styles.stripContent, children: looks.map((l, i) => /* @__PURE__ */ jsx(Pressable, { onPress: () => onIndexChange(i), style: ({
+      pressed
+    }) => [styles.frame, i === index && styles.frameOn, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: l.name, accessibilityState: {
+      selected: i === index
+    }, children: l.cover ? /* @__PURE__ */ jsx(Image, { source: {
+      uri: l.cover
+    }, style: StyleSheet.absoluteFill, contentFit: "cover" }) : null }, l.id)) }) : null,
+    /* @__PURE__ */ jsx(View, { style: styles.actions, children: /* @__PURE__ */ jsx(ActionButton, { label: "Recreate", icon: "creation", onPress: () => onRecreate(look), disabled: !look.prompt, style: styles.recreate }) })
+  ] }) : null });
+}
+const makeStyles = themedStyles((theme) => StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: theme.background
+  },
+  head: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: SPACE.lg,
+    paddingVertical: SPACE.sm
+  },
+  kicker: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.mutedForeground
+  }),
+  stage: {
+    width: "100%",
+    aspectRatio: 16 / 10,
+    backgroundColor: "#000000"
+  },
+  centered: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
+    alignItems: "center",
+    justifyContent: "center"
+  }),
+  mute: {
+    position: "absolute",
+    right: SPACE.md,
+    bottom: SPACE.md
+  },
+  edge: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    justifyContent: "center"
+  },
+  edgeLeft: {
+    left: SPACE.sm
+  },
+  edgeRight: {
+    right: SPACE.sm
+  },
+  body: {
+    flex: 1
+  },
+  bodyContent: {
+    padding: SPACE.lg,
+    gap: SPACE.sm
+  },
+  name: __spreadProps(__spreadValues({}, TYPE.heading), {
+    color: theme.foreground
+  }),
+  description: __spreadProps(__spreadValues({}, TYPE.body), {
+    fontSize: 14,
+    color: theme.mutedForeground
+  }),
+  params: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SPACE.xs + 2,
+    marginTop: SPACE.xs
+  },
+  param: {
+    paddingHorizontal: SPACE.sm + 2,
+    paddingVertical: SPACE.xs + 1,
+    borderRadius: RADIUS.sm,
+    backgroundColor: theme.card
+  },
+  paramLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.inkSoft
+  }),
+  section: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.mutedForeground,
+    marginTop: SPACE.md
+  }),
+  recipe: __spreadProps(__spreadValues({}, TYPE.body), {
+    fontSize: 14,
+    color: theme.foreground
+  }),
+  // flexGrow 0: a horizontal ScrollView otherwise swells into any spare height.
+  strip: {
+    flexGrow: 0
+  },
+  stripContent: {
+    paddingHorizontal: SPACE.lg,
+    paddingVertical: SPACE.sm,
+    gap: SPACE.sm
+  },
+  frame: {
+    width: STRIP,
+    height: Math.round(STRIP * 10 / 16),
+    borderRadius: RADIUS.sm,
+    overflow: "hidden",
+    backgroundColor: theme.card,
+    borderWidth: 2,
+    borderColor: "transparent"
+  },
+  frameOn: {
+    borderColor: theme.foreground
+  },
+  actions: {
+    paddingHorizontal: SPACE.lg,
+    paddingTop: SPACE.sm,
+    paddingBottom: SPACE.md
+  },
+  recreate: {
+    alignSelf: "stretch"
+  }
+}));export{LookDetail};//# sourceMappingURL=LookDetail.js.map

package/lib/features/canvas/home/LookDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LookDetail.js","sources":["../../../../src/features/canvas/home/LookDetail.tsx"],"sourcesContent":["/**\n * One look, full size - native twin of canvas-surface `looks/LookDetail.tsx`:\n * the step between browsing and generating. The preview (its cover video when\n * it has one, else the cover), what it is, the recipe verbatim, the parameters\n * it runs with, and one action: Recreate (its prompt and its aspect).\n * A filmstrip walks the shelf without going back to the grid.\n */\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Modal, ScrollView, StyleSheet, Text, View } from 'react-native';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport { Image } from 'expo-image';\nimport type { StudioLook } from '../studioLooks';\nimport { useCanvasTheme, themedStyles, type CanvasPalette } from '../canvasTheme';\nimport { ActionButton, IconButton, Pressable, RADIUS, SPACE, TYPE, pressedStyle } from '../canvasUi';\nimport { useSafeInsets } from '../withRemoteSafeArea';\nimport { LoopingVideo } from './LoopingVideo';\n\nconst STRIP = 72;\n\nexport function LookDetail({\n    looks,\n    index,\n    onIndexChange,\n    onRecreate,\n    onClose,\n}: {\n    looks: readonly StudioLook[];\n    /** -1 (or out of range) keeps the sheet closed. */\n    index: number;\n    onIndexChange: (index: number) => void;\n    onRecreate: (look: StudioLook) => void;\n    onClose: () => void;\n}) {\n    const theme = useCanvasTheme();\n    const styles = makeStyles(theme);\n    const insets = useSafeInsets();\n    const look = index >= 0 ? looks[index] : undefined;\n    const [muted, setMuted] = useState(true);\n    const strip = useRef<ScrollView>(null);\n\n    // Keep the current frame in view as the shelf is walked.\n    useEffect(() => {\n        if (index < 0) return;\n        strip.current?.scrollTo({ x: Math.max(0, index * (STRIP + SPACE.sm) - STRIP), animated: true });\n    }, [index]);\n\n    const params = look\n        ? [look.aspect ? `Aspect ${look.aspect}` : '', look.category, ...look.tags.slice(0, 4)].filter(Boolean)\n        : [];\n\n    return (\n        <Modal visible={Boolean(look)} animationType=\"slide\" presentationStyle=\"fullScreen\" onRequestClose={onClose}>\n            {look ? (\n                <View style={[styles.root, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>\n                    <View style={styles.head}>\n                        <Text style={styles.kicker} numberOfLines={1}>\n                            {`Look ${index + 1} of ${looks.length}`}\n                        </Text>\n                        <IconButton icon=\"close\" label=\"Close look\" tone=\"filled\" size={36} onPress={onClose} />\n                    </View>\n\n                    <View style={styles.stage}>\n                        {look.coverVideo ? (\n                            <LoopingVideo src={look.coverVideo} poster={look.cover} playing muted={muted} />\n                        ) : look.cover ? (\n                            <Image source={{ uri: look.cover }} style={StyleSheet.absoluteFill} contentFit=\"contain\" />\n                        ) : (\n                            <View style={styles.centered}>\n                                <MaterialCommunityIcons\n                                    name=\"movie-open-outline\"\n                                    size={28}\n                                    color={theme.mutedForeground}\n                                />\n                            </View>\n                        )}\n                        {look.coverVideo ? (\n                            <View style={styles.mute}>\n                                <IconButton\n                                    icon={muted ? 'volume-off' : 'volume-high'}\n                                    label={muted ? 'Unmute preview' : 'Mute preview'}\n                                    tone=\"filled\"\n                                    size={36}\n                                    onPress={() => setMuted((m) => !m)}\n                                />\n                            </View>\n                        ) : null}\n                        <View style={[styles.edge, styles.edgeLeft]}>\n                            {index > 0 ? (\n                                <IconButton\n                                    icon=\"chevron-left\"\n                                    label=\"Previous look\"\n                                    tone=\"filled\"\n                                    size={40}\n                                    onPress={() => onIndexChange(index - 1)}\n                                />\n                            ) : null}\n                        </View>\n                        <View style={[styles.edge, styles.edgeRight]}>\n                            {index < looks.length - 1 ? (\n                                <IconButton\n                                    icon=\"chevron-right\"\n                                    label=\"Next look\"\n                                    tone=\"filled\"\n                                    size={40}\n                                    onPress={() => onIndexChange(index + 1)}\n                                />\n                            ) : null}\n                        </View>\n                    </View>\n\n                    <ScrollView style={styles.body} contentContainerStyle={styles.bodyContent}>\n                        <Text style={styles.name}>{look.name}</Text>\n                        {look.description ? <Text style={styles.description}>{look.description}</Text> : null}\n                        {params.length ? (\n                            <View style={styles.params}>\n                                {params.map((p) => (\n                                    <View key={p} style={styles.param}>\n                                        <Text style={styles.paramLabel}>{p}</Text>\n                                    </View>\n                                ))}\n                            </View>\n                        ) : null}\n                        {look.prompt ? (\n                            <>\n                                <Text style={styles.section}>Recipe</Text>\n                                <Text style={styles.recipe} selectable>\n                                    {look.prompt}\n                                </Text>\n                            </>\n                        ) : null}\n                    </ScrollView>\n\n                    {looks.length > 1 ? (\n                        <ScrollView\n                            ref={strip}\n                            horizontal\n                            showsHorizontalScrollIndicator={false}\n                            style={styles.strip}\n                            contentContainerStyle={styles.stripContent}\n                        >\n                            {looks.map((l, i) => (\n                                <Pressable\n                                    key={l.id}\n                                    onPress={() => onIndexChange(i)}\n                                    style={({ pressed }) => [\n                                        styles.frame,\n                                        i === index && styles.frameOn,\n                                        pressedStyle(pressed),\n                                    ]}\n                                    accessibilityRole=\"button\"\n                                    accessibilityLabel={l.name}\n                                    accessibilityState={{ selected: i === index }}\n                                >\n                                    {l.cover ? (\n                                        <Image\n                                            source={{ uri: l.cover }}\n                                            style={StyleSheet.absoluteFill}\n                                            contentFit=\"cover\"\n                                        />\n                                    ) : null}\n                                </Pressable>\n                            ))}\n                        </ScrollView>\n                    ) : null}\n\n                    <View style={styles.actions}>\n                        <ActionButton\n                            label=\"Recreate\"\n                            icon=\"creation\"\n                            onPress={() => onRecreate(look)}\n                            disabled={!look.prompt}\n                            style={styles.recreate}\n                        />\n                    </View>\n                </View>\n            ) : null}\n        </Modal>\n    );\n}\n\nconst makeStyles = themedStyles((theme: CanvasPalette) =>\n    StyleSheet.create({\n        root: { flex: 1, backgroundColor: theme.background },\n        head: {\n            flexDirection: 'row',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            paddingHorizontal: SPACE.lg,\n            paddingVertical: SPACE.sm,\n        },\n        kicker: { ...TYPE.label, color: theme.mutedForeground },\n        stage: { width: '100%', aspectRatio: 16 / 10, backgroundColor: '#000000' },\n        centered: { ...StyleSheet.absoluteFillObject, alignItems: 'center', justifyContent: 'center' },\n        mute: { position: 'absolute', right: SPACE.md, bottom: SPACE.md },\n        edge: { position: 'absolute', top: 0, bottom: 0, justifyContent: 'center' },\n        edgeLeft: { left: SPACE.sm },\n        edgeRight: { right: SPACE.sm },\n        body: { flex: 1 },\n        bodyContent: { padding: SPACE.lg, gap: SPACE.sm },\n        name: { ...TYPE.heading, color: theme.foreground },\n        description: { ...TYPE.body, fontSize: 14, color: theme.mutedForeground },\n        params: { flexDirection: 'row', flexWrap: 'wrap', gap: SPACE.xs + 2, marginTop: SPACE.xs },\n        param: {\n            paddingHorizontal: SPACE.sm + 2,\n            paddingVertical: SPACE.xs + 1,\n            borderRadius: RADIUS.sm,\n            backgroundColor: theme.card,\n        },\n        paramLabel: { ...TYPE.caption, color: theme.inkSoft },\n        section: { ...TYPE.label, color: theme.mutedForeground, marginTop: SPACE.md },\n        recipe: { ...TYPE.body, fontSize: 14, color: theme.foreground },\n        // flexGrow 0: a horizontal ScrollView otherwise swells into any spare height.\n        strip: { flexGrow: 0 },\n        stripContent: { paddingHorizontal: SPACE.lg, paddingVertical: SPACE.sm, gap: SPACE.sm },\n        frame: {\n            width: STRIP,\n            height: Math.round((STRIP * 10) / 16),\n            borderRadius: RADIUS.sm,\n            overflow: 'hidden',\n            backgroundColor: theme.card,\n            borderWidth: 2,\n            borderColor: 'transparent',\n        },\n        frameOn: { borderColor: theme.foreground },\n        actions: { paddingHorizontal: SPACE.lg, paddingTop: SPACE.sm, paddingBottom: SPACE.md },\n        recreate: { alignSelf: 'stretch' },\n    }),\n);\n"],"names":[],"mappings":"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"}

package/lib/features/canvas/home/LoopingVideo.js

@@ -0,0 +1,37 @@
+import {jsxs,jsx}from'react/jsx-runtime';import React__default,{useState,useEffect,useCallback}from'react';import {View,StyleSheet}from'react-native';import {Image}from'expo-image';var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
+class VideoIsland extends React__default.Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", {
+      failed: false
+    });
+  }
+  static getDerivedStateFromError() {
+    return {
+      failed: true
+    };
+  }
+  render() {
+    return this.state.failed ? null : this.props.children;
+  }
+}
+function LoopingVideo({
+  src,
+  poster,
+  playing,
+  muted = true,
+  onTime
+}) {
+  const [ready, setReady] = useState(false);
+  useEffect(() => setReady(false), [src, playing]);
+  useCallback(() => setReady(true), []);
+  useCallback((current) => onTime == null ? void 0 : onTime(current), [onTime]);
+  return /* @__PURE__ */ jsxs(View, { style: StyleSheet.absoluteFill, pointerEvents: "none", children: [
+    poster ? /* @__PURE__ */ jsx(Image, { source: {
+      uri: poster
+    }, style: StyleSheet.absoluteFill, contentFit: "cover", transition: 150 }) : null,
+    null
+  ] });
+}export{LoopingVideo};//# sourceMappingURL=LoopingVideo.js.map

package/lib/features/canvas/home/LoopingVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoopingVideo.js","sources":["../../../../src/features/canvas/home/LoopingVideo.tsx"],"sourcesContent":["/**\n * A muted, looping clip over its poster (web `<video autoPlay muted loop playsInline poster>`).\n *\n * The player is expo-video, reached through the `videoRenderer` seam (the\n * shared code cannot import it). It is mounted only while `playing`, so a\n * rail of tiles holds one decoder, not one each; otherwise the poster shows.\n * A host without the renderer, or one whose native video module throws at\n * mount, keeps the poster.\n */\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { Image } from 'expo-image';\nimport { getVideoPreviewRenderer } from '../videoRenderer';\n\nclass VideoIsland extends React.Component<{ children: React.ReactNode }, { failed: boolean }> {\n    state = { failed: false };\n\n    static getDerivedStateFromError() {\n        return { failed: true };\n    }\n\n    render() {\n        return this.state.failed ? null : this.props.children;\n    }\n}\n\nexport function LoopingVideo({\n    src,\n    poster,\n    playing,\n    muted = true,\n    onTime,\n}: {\n    src: string;\n    poster?: string;\n    playing: boolean;\n    muted?: boolean;\n    /** ~4Hz playhead, for a timecode readout. */\n    onTime?: (seconds: number) => void;\n}) {\n    const Preview = getVideoPreviewRenderer();\n    const [ready, setReady] = useState(false);\n    useEffect(() => setReady(false), [src, playing]);\n    const markReady = useCallback(() => setReady(true), []);\n    const tick = useCallback((current: number) => onTime?.(current), [onTime]);\n    const live = Boolean(Preview && src && playing);\n    return (\n        <View style={StyleSheet.absoluteFill} pointerEvents=\"none\">\n            {poster ? (\n                <Image source={{ uri: poster }} style={StyleSheet.absoluteFill} contentFit=\"cover\" transition={150} />\n            ) : null}\n            {live && Preview ? (\n                // Transparent until the first frame: the poster holds instead of a black flash.\n                <View style={[StyleSheet.absoluteFill, { opacity: ready ? 1 : 0 }]}>\n                    <VideoIsland key={src}>\n                        <Preview\n                            src={src}\n                            playing\n                            rate={1}\n                            volume={muted ? 0 : 1}\n                            muted={muted}\n                            trimStartSec={0}\n                            trimEndSec={null}\n                            loop\n                            onReady={markReady}\n                            onTime={tick}\n                        />\n                    </VideoIsland>\n                </View>\n            ) : null}\n        </View>\n    );\n}\n"],"names":["React"],"mappings":";;;AAaA,MAAM,WAAA,SAAoBA,eAAM,SAI7B,CAAA;AAAA,EAJH,WAAA,GAAA;AAAA,IAAA,KAAA,CAAA,GAAA,SAAA,CAAA;AAKE,IAAQ,aAAA,CAAA,IAAA,EAAA,OAAA,EAAA;AAAA,MACN,MAAQ,EAAA;AAAA,KACV,CAAA;AAAA;AAAA,EACA,OAAO,wBAA2B,GAAA;AAChC,IAAO,OAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACV;AAAA;AACF,EACA,MAAS,GAAA;AACP,IAAA,OAAO,IAAK,CAAA,KAAA,CAAM,MAAS,GAAA,IAAA,GAAO,KAAK,KAAM,CAAA,QAAA;AAAA;AAEjD;AACO,SAAS,YAAa,CAAA;AAAA,EAC3B,GAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAQ,GAAA,IAAA;AAAA,EACR;AACF,CAOG,EAAA;AAED,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,KAAK,CAAA;AACxC,EAAA,SAAA,CAAU,MAAM,QAAS,CAAA,KAAK,GAAG,CAAC,GAAA,EAAK,OAAO,CAAC,CAAA;AAC/C,EAAkB,WAAY,CAAA,MAAM,SAAS,IAAI,CAAA,EAAG,EAAE;AACtD,EAAa,YAAY,CAAC,OAAA,KAAoB,iCAAS,OAAU,CAAA,EAAA,CAAC,MAAM,CAAC;AAEzE,EAAA,4BAAQ,IAAK,EAAA,EAAA,KAAA,EAAO,UAAW,CAAA,YAAA,EAAc,eAAc,MAChD,EAAA,QAAA,EAAA;AAAA,IAAS,MAAA,mBAAA,GAAA,CAAC,SAAM,MAAQ,EAAA;AAAA,MAC/B,GAAK,EAAA;AAAA,KACP,EAAG,OAAO,UAAW,CAAA,YAAA,EAAc,YAAW,OAAQ,EAAA,UAAA,EAAY,KAAK,CAAK,GAAA,IAAA;AAAA,IAStD;AAAA,GAClB,EAAA,CAAA;AACR"}