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

package/lib/features/canvas/VideoClipsExperience.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoClipsExperience.js","sources":["../../../src/features/canvas/VideoClipsExperience.tsx"],"sourcesContent":["/**\n * Native twin of web canvas \"Clips\": `yantra-video-clip` /\n * `YANTRA_VIDEO_CLIP_RUN` turns a long video into ranked short clips.\n */\nimport React, { useState } from 'react';\nimport { ActivityIndicator, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport type { CanvasItem } from './canvasCore';\nimport { friendlyMediaError, type RunMediaAction } from './videoEditor/mediaActions';\nimport { unwrapProxyUrl } from './videoEditor/remoteMediaClient';\nimport {\n    CLIP_ASPECT_RATIOS,\n    CLIP_COUNT_CHOICES,\n    CLIP_RESOLUTIONS,\n    buildClipRunParams,\n    parseClipRunResult,\n} from './videoClips';\n\nexport interface VideoClipsExperienceProps {\n    item?: CanvasItem | null;\n    runAction?: RunMediaAction;\n    onClose: () => void;\n    onClips: (urls: string[], aspect: string) => void;\n}\n\nexport function VideoClipsExperience({ item, runAction, onClose, onClips }: VideoClipsExperienceProps) {\n    const [count, setCount] = useState(3);\n    const [aspect, setAspect] = useState<(typeof CLIP_ASPECT_RATIOS)[number]>('9:16');\n    const [resolution, setResolution] = useState<(typeof CLIP_RESOLUTIONS)[number]>('720');\n    const [videoUrl, setVideoUrl] = useState(item?.src ? unwrapProxyUrl(item.src) : '');\n    const [busy, setBusy] = useState(false);\n    const [notice, setNotice] = useState<string | null>(null);\n\n    const run = () => {\n        const source = videoUrl.trim();\n        if (!source) {\n            setNotice('Paste a video URL, or open Clips from a clip already on the board.');\n            return;\n        }\n        if (!runAction) {\n            setNotice('Clips need the host connector — not wired in this host.');\n            return;\n        }\n        if (busy) return;\n        setBusy(true);\n        setNotice(null);\n        runAction(\n            'yantra-video-clip',\n            'YANTRA_VIDEO_CLIP_RUN',\n            buildClipRunParams({\n                videoUrl: unwrapProxyUrl(source),\n                numClips: count,\n                aspectRatio: aspect,\n                resolution,\n            }),\n        )\n            .then((result) => {\n                const urls = parseClipRunResult(result);\n                if (!urls.length) throw new Error('The pipeline finished but returned no clips');\n                onClips(urls, aspect);\n            })\n            .catch((err: unknown) => setNotice(friendlyMediaError(err, 'video clips')))\n            .finally(() => setBusy(false));\n    };\n\n    return (\n        <View style={styles.root} testID=\"video-clips\">\n            <View style={styles.header}>\n                <Pressable onPress={onClose} hitSlop={10} accessibilityRole=\"button\" accessibilityLabel=\"Close\">\n                    <MaterialCommunityIcons name=\"close\" size={22} color=\"#F7F7FA\" />\n                </Pressable>\n                <Text style={styles.headerTitle}>Clips</Text>\n                <View style={{ width: 22 }} />\n            </View>\n            <View style={styles.body}>\n                <Text style={styles.lead}>Cut a long video into AI-ranked short clips — same as web canvas.</Text>\n                <Text style={styles.label}>Source URL</Text>\n                <TextInput\n                    value={videoUrl}\n                    onChangeText={setVideoUrl}\n                    placeholder=\"https://…\"\n                    placeholderTextColor=\"#7A7A88\"\n                    autoCapitalize=\"none\"\n                    autoCorrect={false}\n                    style={styles.url}\n                    editable={!busy}\n                />\n                <Text style={styles.label}>How many</Text>\n                <View style={styles.row}>\n                    {CLIP_COUNT_CHOICES.map((n) => (\n                        <Pressable\n                            key={n}\n                            onPress={() => setCount(n)}\n                            style={[styles.chip, count === n && styles.chipOn]}\n                        >\n                            <Text style={[styles.chipLabel, count === n && styles.chipLabelOn]}>{n}</Text>\n                        </Pressable>\n                    ))}\n                </View>\n                <Text style={styles.label}>Aspect</Text>\n                <View style={styles.row}>\n                    {CLIP_ASPECT_RATIOS.map((value) => (\n                        <Pressable\n                            key={value}\n                            onPress={() => setAspect(value)}\n                            style={[styles.chip, aspect === value && styles.chipOn]}\n                        >\n                            <Text style={[styles.chipLabel, aspect === value && styles.chipLabelOn]}>{value}</Text>\n                        </Pressable>\n                    ))}\n                </View>\n                <Text style={styles.label}>Resolution</Text>\n                <View style={styles.row}>\n                    {CLIP_RESOLUTIONS.map((value) => (\n                        <Pressable\n                            key={value}\n                            onPress={() => setResolution(value)}\n                            style={[styles.chip, resolution === value && styles.chipOn]}\n                        >\n                            <Text style={[styles.chipLabel, resolution === value && styles.chipLabelOn]}>{value}p</Text>\n                        </Pressable>\n                    ))}\n                </View>\n                <Pressable\n                    onPress={run}\n                    disabled={busy}\n                    style={[styles.go, busy && styles.goDisabled]}\n                    accessibilityRole=\"button\"\n                >\n                    {busy ? <ActivityIndicator color=\"#0A0A0C\" /> : <Text style={styles.goLabel}>Make clips</Text>}\n                </Pressable>\n                {busy ? <Text style={styles.wait}>This can take a few minutes…</Text> : null}\n            </View>\n            {notice ? (\n                <View style={styles.notice}>\n                    <Text style={styles.noticeText}>{notice}</Text>\n                    <Pressable onPress={() => setNotice(null)} hitSlop={8}>\n                        <Text style={styles.noticeDismiss}>OK</Text>\n                    </Pressable>\n                </View>\n            ) : null}\n        </View>\n    );\n}\n\nconst styles = StyleSheet.create({\n    root: { flex: 1, backgroundColor: '#0A0A0C' },\n    header: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        paddingHorizontal: 16,\n        paddingVertical: 12,\n    },\n    headerTitle: { color: '#F7F7FA', fontSize: 15, fontWeight: '600' },\n    body: { paddingHorizontal: 18, paddingTop: 12, gap: 10 },\n    lead: { color: '#9A9AA5', fontSize: 13, marginBottom: 8 },\n    label: { color: '#7A7A88', fontSize: 11.5, fontWeight: '600', textTransform: 'uppercase', letterSpacing: 0.4 },\n    url: {\n        borderRadius: 10,\n        paddingHorizontal: 12,\n        paddingVertical: 10,\n        backgroundColor: '#1F1F24',\n        color: '#F7F7FA',\n        fontSize: 14,\n    },\n    row: { flexDirection: 'row', gap: 8, flexWrap: 'wrap' },\n    chip: { paddingHorizontal: 14, paddingVertical: 8, borderRadius: 9, backgroundColor: '#1F1F24' },\n    chipOn: { backgroundColor: '#8B7CFF' },\n    chipLabel: { color: '#F7F7FA', fontSize: 13, fontWeight: '500' },\n    chipLabelOn: { color: '#0A0A0C' },\n    go: {\n        marginTop: 16,\n        height: 48,\n        borderRadius: 12,\n        backgroundColor: '#8B7CFF',\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n    goDisabled: { opacity: 0.6 },\n    goLabel: { color: '#0A0A0C', fontSize: 15, fontWeight: '700' },\n    wait: { color: '#9A9AA5', fontSize: 12.5, textAlign: 'center' },\n    notice: {\n        position: 'absolute',\n        left: 20,\n        right: 20,\n        bottom: 24,\n        flexDirection: 'row',\n        alignItems: 'center',\n        gap: 12,\n        paddingHorizontal: 14,\n        paddingVertical: 11,\n        borderRadius: 12,\n        backgroundColor: 'rgba(248, 250, 252, 0.96)',\n    },\n    noticeText: { flex: 1, color: '#0f172a', fontSize: 13 },\n    noticeDismiss: { color: '#6C5CE7', fontSize: 13, fontWeight: '600' },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"VideoClipsExperience.js","sources":["../../../src/features/canvas/VideoClipsExperience.tsx"],"sourcesContent":["/**\n * Native twin of web canvas \"Clips\": `yantra-video-clip` /\n * `YANTRA_VIDEO_CLIP_RUN` turns a long video into ranked short clips.\n */\nimport React, { useMemo, useState } from 'react';\nimport { ActivityIndicator, StyleSheet, Text, TextInput, View } from 'react-native';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport type { CanvasItem } from './canvasCore';\nimport { friendlyMediaError, type RunMediaAction } from './videoEditor/mediaActions';\nimport { unwrapProxyUrl } from './videoEditor/remoteMediaClient';\nimport {\n    CLIP_ASPECT_RATIOS,\n    CLIP_COUNT_CHOICES,\n    CLIP_RESOLUTIONS,\n    buildClipRunParams,\n    parseClipRunResult,\n} from './videoClips';\nimport { useCanvasTheme, themedStyles, type CanvasPalette } from './canvasTheme';\nimport { Pressable, HIT, RADIUS, SPACE, Segmented, TYPE, pressedStyle } from './canvasUi';\n\nexport interface VideoClipsExperienceProps {\n    item?: CanvasItem | null;\n    runAction?: RunMediaAction;\n    onClose: () => void;\n    onClips: (urls: string[], aspect: string) => void;\n}\n\nexport function VideoClipsExperience({ item, runAction, onClose, onClips }: VideoClipsExperienceProps) {\n    const theme = useCanvasTheme();\n    const styles = useMemo(() => makeStyles(theme), [theme]);\n    const [count, setCount] = useState(3);\n    const [aspect, setAspect] = useState<(typeof CLIP_ASPECT_RATIOS)[number]>('9:16');\n    const [resolution, setResolution] = useState<(typeof CLIP_RESOLUTIONS)[number]>('720');\n    const [videoUrl, setVideoUrl] = useState(item?.src ? unwrapProxyUrl(item.src) : '');\n    const [busy, setBusy] = useState(false);\n    const [notice, setNotice] = useState<string | null>(null);\n\n    const run = () => {\n        const source = videoUrl.trim();\n        if (!source) {\n            setNotice('Paste a video URL, or open Clips from a clip already on the board.');\n            return;\n        }\n        if (!runAction) {\n            setNotice('Clips need the host connector, which this host has not wired.');\n            return;\n        }\n        if (busy) return;\n        setBusy(true);\n        setNotice(null);\n        runAction(\n            'yantra-video-clip',\n            'YANTRA_VIDEO_CLIP_RUN',\n            buildClipRunParams({\n                videoUrl: unwrapProxyUrl(source),\n                numClips: count,\n                aspectRatio: aspect,\n                resolution,\n            }),\n        )\n            .then((result) => {\n                const urls = parseClipRunResult(result);\n                if (!urls.length) throw new Error('The pipeline finished but returned no clips');\n                onClips(urls, aspect);\n            })\n            .catch((err: unknown) => setNotice(friendlyMediaError(err, 'video clips')))\n            .finally(() => setBusy(false));\n    };\n\n    return (\n        <View style={styles.root} testID=\"video-clips\">\n            <View style={styles.header}>\n                <Pressable\n                    onPress={onClose}\n                    hitSlop={10}\n                    accessibilityRole=\"button\"\n                    accessibilityLabel=\"Close\"\n                    style={({ pressed }) => [styles.close, pressedStyle(pressed)]}\n                >\n                    <MaterialCommunityIcons name=\"close\" size={22} color={theme.foreground} />\n                </Pressable>\n                <Text style={styles.headerTitle}>Clips</Text>\n                <View style={styles.close} />\n            </View>\n            <View style={styles.body}>\n                <Text style={styles.lead}>Cut a long video into short clips, ranked by AI.</Text>\n                <Text style={styles.label}>Source URL</Text>\n                <TextInput\n                    value={videoUrl}\n                    onChangeText={setVideoUrl}\n                    placeholder=\"https://…\"\n                    placeholderTextColor={theme.mutedForeground}\n                    autoCapitalize=\"none\"\n                    autoCorrect={false}\n                    style={styles.url}\n                    editable={!busy}\n                />\n                <Text style={styles.label}>How many</Text>\n                <Segmented\n                    options={CLIP_COUNT_CHOICES.map((n) => ({ id: String(n), label: String(n) }))}\n                    value={String(count)}\n                    onChange={(id) => setCount(Number(id) as typeof count)}\n                />\n                <Text style={styles.label}>Aspect</Text>\n                <Segmented\n                    options={CLIP_ASPECT_RATIOS.map((value) => ({ id: value, label: value }))}\n                    value={aspect}\n                    onChange={setAspect}\n                />\n                <Text style={styles.label}>Resolution</Text>\n                <Segmented\n                    options={CLIP_RESOLUTIONS.map((value) => ({ id: value, label: `${value}p` }))}\n                    value={resolution}\n                    onChange={setResolution}\n                />\n                <Pressable\n                    onPress={run}\n                    disabled={busy}\n                    style={({ pressed }) => [styles.go, busy && styles.goDisabled, pressedStyle(pressed && !busy)]}\n                    accessibilityRole=\"button\"\n                >\n                    {busy ? (\n                        <ActivityIndicator color={theme.primaryForeground} />\n                    ) : (\n                        <Text style={styles.goLabel}>Make clips</Text>\n                    )}\n                </Pressable>\n                {busy ? <Text style={styles.wait}>This can take a few minutes…</Text> : null}\n            </View>\n            {notice ? (\n                <View style={styles.notice}>\n                    <Text style={styles.noticeText}>{notice}</Text>\n                    <Pressable\n                        onPress={() => setNotice(null)}\n                        hitSlop={8}\n                        style={({ pressed }) => pressedStyle(pressed)}\n                    >\n                        <Text style={styles.noticeDismiss}>OK</Text>\n                    </Pressable>\n                </View>\n            ) : null}\n        </View>\n    );\n}\n\nconst makeStyles = themedStyles((theme: CanvasPalette) =>\n    StyleSheet.create({\n        root: { flex: 1, backgroundColor: theme.background },\n        header: {\n            flexDirection: 'row',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            paddingHorizontal: SPACE.sm,\n            minHeight: HIT + SPACE.md,\n        },\n        close: { width: HIT, height: HIT, borderRadius: HIT / 2, alignItems: 'center', justifyContent: 'center' },\n        headerTitle: { ...TYPE.title, color: theme.foreground },\n        body: { paddingHorizontal: SPACE.lg, paddingTop: SPACE.sm, gap: SPACE.sm },\n        lead: { ...TYPE.body, color: theme.mutedForeground, marginBottom: SPACE.md },\n        label: { ...TYPE.label, color: theme.mutedForeground, marginTop: SPACE.lg },\n        url: {\n            ...TYPE.body,\n            minHeight: HIT + 4,\n            borderRadius: RADIUS.md,\n            paddingHorizontal: SPACE.md + 2,\n            paddingVertical: SPACE.md,\n            backgroundColor: theme.card,\n            borderWidth: StyleSheet.hairlineWidth,\n            borderColor: theme.border,\n            color: theme.foreground,\n        },\n        row: { flexDirection: 'row', gap: SPACE.sm, flexWrap: 'wrap' },\n        chip: {\n            minHeight: 38,\n            minWidth: 52,\n            paddingHorizontal: SPACE.lg,\n            borderRadius: RADIUS.pill,\n            alignItems: 'center',\n            justifyContent: 'center',\n            backgroundColor: theme.edRaised,\n        },\n        chipOn: { backgroundColor: theme.edInk },\n        chipLabel: { ...TYPE.label, color: theme.edInk2 },\n        chipLabelOn: { color: theme.edOnInk },\n        go: {\n            marginTop: SPACE.xl,\n            minHeight: 52,\n            borderRadius: RADIUS.pill,\n            backgroundColor: theme.primary,\n            alignItems: 'center',\n            justifyContent: 'center',\n        },\n        goDisabled: { opacity: 0.6 },\n        goLabel: { ...TYPE.label, fontSize: 16, color: theme.primaryForeground },\n        wait: { ...TYPE.caption, color: theme.mutedForeground, textAlign: 'center', marginTop: SPACE.xs },\n        notice: {\n            position: 'absolute',\n            left: SPACE.lg,\n            right: SPACE.lg,\n            bottom: SPACE.xl,\n            flexDirection: 'row',\n            alignItems: 'center',\n            gap: SPACE.md,\n            paddingHorizontal: SPACE.lg,\n            paddingVertical: SPACE.md,\n            borderRadius: RADIUS.lg,\n            backgroundColor: theme.edInk,\n        },\n        noticeText: { ...TYPE.caption, fontSize: 13, lineHeight: 18, flex: 1, color: theme.edOnInk },\n        noticeDismiss: { ...TYPE.label, color: theme.edOnInk, textDecorationLine: 'underline' },\n    }),\n);\n"],"names":[],"mappings":"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"}

package/lib/features/canvas/VideoEditExperience.js

@@ -1,4 +1,4 @@
-import {jsxs,jsx}from'react/jsx-runtime';import {useState,useCallback,useMemo}from'react';import {StyleSheet,View,Pressable,Text,ActivityIndicator,ScrollView}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {resultUrl,friendlyMediaError}from'./videoEditor/mediaActions.js';import {Stepper,Field,PickRow,PickMulti}from'./videoEditor/formWidgets.js';import {VIDEO_EDIT_CATEGORIES,VIDEO_EDIT_ACTIONS,resultKind,INSTANT_HINT}from'./videoEditor/videoEditOps.js';var __defProp = Object.defineProperty;
+import {jsxs,jsx}from'react/jsx-runtime';import {useMemo,useState,useCallback}from'react';import {View,Text,ActivityIndicator,ScrollView,StyleSheet}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {resultUrl,friendlyMediaError}from'./videoEditor/mediaActions.js';import {Stepper,Field,PickRow,PickMulti}from'./videoEditor/formWidgets.js';import {VIDEO_EDIT_CATEGORIES,VIDEO_EDIT_ACTIONS,resultKind,INSTANT_HINT}from'./videoEditor/videoEditOps.js';import {useCanvasTheme,themedStyles}from'./canvasTheme.js';import {Pressable,pressedStyle,RADIUS,SPACE,TYPE}from'./canvasUi.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -26,6 +26,8 @@ function VideoEditExperience({
   onApplied
 }) {
   var _a, _b;
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const [history, setHistory] = useState([src]);
   const [appliedKind, setAppliedKind] = useState("video");
   const [busy, setBusy] = useState(null);
@@ -45,7 +47,7 @@ function VideoEditExperience({
   }, []);
   const apply = useCallback(() => {
     if (!runAction) {
-      setNotice("Editing needs the host connector \u2014 not wired in this host.");
+      setNotice("Editing needs the host connector, which this host has not wired.");
       return;
     }
     if (busy) return;
@@ -76,11 +78,13 @@ function VideoEditExperience({
   const audios = useMemo(() => items.filter((i) => i.type === "audio"), [items]);
   return /* @__PURE__ */ jsxs(View, { style: styles.root, testID: "video-editor", children: [
     /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
-      /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Close editor", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 22, color: "#F7F7FA" }) }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Close editor", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 22, color: theme.edInk }) }),
       /* @__PURE__ */ jsx(Text, { style: styles.headerTitle, numberOfLines: 1, children: (name == null ? void 0 : name.trim()) || "Edit video" }),
       /* @__PURE__ */ jsxs(View, { style: styles.headerActions, children: [
-        /* @__PURE__ */ jsx(Pressable, { onPress: () => setHistory((h) => h.length > 1 ? h.slice(0, -1) : h), hitSlop: 10, disabled: !edited || busy !== null, accessibilityRole: "button", accessibilityLabel: "Undo", style: !edited || busy ? styles.disabled : null, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "undo-variant", size: 21, color: "#F7F7FA" }) }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: done, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Done", children: /* @__PURE__ */ jsx(Text, { style: styles.done, children: edited ? "Done" : "Close" }) })
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => setHistory((h) => h.length > 1 ? h.slice(0, -1) : h), hitSlop: 10, disabled: !edited || busy !== null, accessibilityRole: "button", accessibilityLabel: "Undo", style: !edited || busy ? styles.disabled : null, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "undo-variant", size: 21, color: theme.edInk }) }),
+        /* @__PURE__ */ jsx(Pressable, { onPress: done, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Done", style: ({
+          pressed
+        }) => [styles.doneBtn, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: styles.done, children: edited ? "Done" : "Close" }) })
       ] })
     ] }),
     /* @__PURE__ */ jsxs(View, { style: styles.stage, children: [
@@ -101,20 +105,26 @@ function VideoEditExperience({
           setCategory(cat.id);
           setOp(cat.ops[0].op);
           setProbe(null);
-        }, style: [styles.catChip, active && styles.catChipOn], children: /* @__PURE__ */ jsx(Text, { style: [styles.catLabel, active && styles.catLabelOn], children: cat.label }) }, cat.id);
+        }, style: ({
+          pressed
+        }) => [styles.catChip, active && styles.catChipOn, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: [styles.catLabel, active && styles.catLabelOn], children: cat.label }) }, cat.id);
       }) }),
       /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.chipRow, style: styles.chipScroll, children: ops.map((entry) => {
         const active = op === entry.op;
         return /* @__PURE__ */ jsx(Pressable, { onPress: () => {
           setOp(entry.op);
           setProbe(null);
-        }, style: [styles.opChip, active && styles.opChipOn], children: /* @__PURE__ */ jsx(Text, { style: [styles.opLabel, active && styles.opLabelOn], children: entry.label }) }, entry.op);
+        }, style: ({
+          pressed
+        }) => [styles.opChip, active && styles.opChipOn, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: [styles.opLabel, active && styles.opLabelOn], children: entry.label }) }, entry.op);
       }) }),
       /* @__PURE__ */ jsxs(ScrollView, { style: styles.controls, contentContainerStyle: styles.controlsInner, children: [
         /* @__PURE__ */ jsx(OpControls, { op, form, patch, videos, images, audios }),
         probe ? /* @__PURE__ */ jsx(Text, { style: styles.probe, children: probe }) : null
       ] }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: apply, disabled: busy !== null, style: [styles.apply, busy && styles.disabled], accessibilityRole: "button", accessibilityLabel: "Apply edit", children: /* @__PURE__ */ jsxs(Text, { style: styles.applyLabel, children: [
+      /* @__PURE__ */ jsx(Pressable, { onPress: apply, disabled: busy !== null, style: ({
+        pressed
+      }) => [styles.apply, busy && styles.disabled, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Apply edit", children: /* @__PURE__ */ jsxs(Text, { style: styles.applyLabel, children: [
         "Apply ",
         opLabel(op)
       ] }) })
@@ -361,6 +371,8 @@ function OpControls({
   images,
   audios
 }) {
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const hint = INSTANT_HINT[op];
   if (hint) return /* @__PURE__ */ jsx(Text, { style: styles.hint, children: hint });
   if (op === "trim") {
@@ -530,243 +542,243 @@ function OpControls({
   }
   return /* @__PURE__ */ jsx(Text, { style: styles.hint, children: "Apply to run this edit." });
 }
-const styles = StyleSheet.create({
+const makeStyles = themedStyles((theme) => StyleSheet.create({
   root: {
     flex: 1,
-    backgroundColor: "#0A0A0C"
+    backgroundColor: theme.edBg
   },
   header: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    gap: 12
+    paddingHorizontal: SPACE.lg,
+    paddingVertical: SPACE.sm,
+    minHeight: 56,
+    gap: SPACE.md
   },
-  headerTitle: {
+  headerTitle: __spreadProps(__spreadValues({}, TYPE.title), {
     flex: 1,
-    color: "#F7F7FA",
-    fontSize: 15,
-    fontWeight: "600",
+    color: theme.edInk,
     textAlign: "center"
-  },
+  }),
   headerActions: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 16
+    gap: SPACE.lg
   },
-  done: {
-    color: "#8B7CFF",
-    fontSize: 15,
-    fontWeight: "600"
+  doneBtn: {
+    minHeight: 36,
+    paddingHorizontal: SPACE.lg,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.primary,
+    alignItems: "center",
+    justifyContent: "center"
   },
+  done: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.primaryForeground
+  }),
   disabled: {
     opacity: 0.35
   },
   stage: {
     flex: 1,
-    marginHorizontal: 14,
-    borderRadius: 18,
+    marginHorizontal: SPACE.md,
+    borderRadius: RADIUS.lg,
     backgroundColor: "#0F0F14",
+    // media stage stays dark
     overflow: "hidden",
     alignItems: "center",
     justifyContent: "center"
   },
   playBtn: {
     position: "absolute",
-    width: 52,
-    height: 52,
-    borderRadius: 26,
+    width: 56,
+    height: 56,
+    borderRadius: RADIUS.pill,
     backgroundColor: "#F7F7FA",
     alignItems: "center",
     justifyContent: "center"
   },
   busyVeil: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
-    borderRadius: 18,
+    borderRadius: RADIUS.lg,
     alignItems: "center",
     justifyContent: "center",
-    gap: 10,
+    gap: SPACE.sm,
     backgroundColor: "rgba(10, 10, 12, 0.55)"
   }),
-  busyLabel: {
-    color: "#E8E8EE",
-    fontSize: 12.5
-  },
+  busyLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: "#E8E8EE"
+  }),
   panel: {
     maxHeight: "48%",
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "rgba(255,255,255,0.08)",
-    paddingBottom: 10
+    marginTop: SPACE.md,
+    paddingTop: SPACE.xs,
+    paddingBottom: SPACE.md,
+    borderTopLeftRadius: RADIUS.xl,
+    borderTopRightRadius: RADIUS.xl,
+    backgroundColor: theme.edPanel
   },
   chipScroll: {
     flexGrow: 0
   },
   chipRow: {
-    paddingHorizontal: 12,
-    paddingTop: 8,
-    gap: 6,
+    paddingHorizontal: SPACE.md,
+    paddingTop: SPACE.sm,
+    gap: SPACE.sm,
     flexDirection: "row"
   },
   catChip: {
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 999,
-    backgroundColor: "#1F1F24"
+    minHeight: 32,
+    justifyContent: "center",
+    paddingHorizontal: SPACE.md,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edRaised
   },
   catChipOn: {
-    backgroundColor: "#F7F7FA"
-  },
-  catLabel: {
-    color: "#9A9AA5",
-    fontSize: 11,
-    fontWeight: "600"
+    backgroundColor: theme.edInk
   },
+  catLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk2
+  }),
   catLabelOn: {
-    color: "#0A0A0C"
+    color: theme.edOnInk
   },
   opChip: {
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-    borderRadius: 999,
-    backgroundColor: "#16161A"
+    minHeight: 30,
+    justifyContent: "center",
+    paddingHorizontal: SPACE.md,
+    borderRadius: RADIUS.pill,
+    backgroundColor: "transparent"
   },
   opChipOn: {
-    backgroundColor: "#8B7CFF"
-  },
-  opLabel: {
-    color: "#C8C8D0",
-    fontSize: 12,
-    fontWeight: "500"
+    backgroundColor: theme.edAccentSoft
   },
+  opLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk2
+  }),
   opLabelOn: {
-    color: "#0A0A0C"
+    color: theme.edAccent,
+    fontWeight: "600"
   },
   controls: {
-    maxHeight: 140,
-    marginTop: 6
+    maxHeight: 150,
+    marginTop: SPACE.sm
   },
   controlsInner: {
-    paddingHorizontal: 14,
-    paddingBottom: 8,
-    gap: 8
+    paddingHorizontal: SPACE.lg,
+    paddingBottom: SPACE.sm,
+    gap: SPACE.sm
   },
   apply: {
-    marginHorizontal: 14,
-    marginTop: 4,
-    height: 40,
-    borderRadius: 10,
-    backgroundColor: "#8B7CFF",
+    marginHorizontal: SPACE.lg,
+    marginTop: SPACE.sm,
+    height: 44,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edAccent,
     alignItems: "center",
     justifyContent: "center"
   },
-  applyLabel: {
-    color: "#0A0A0C",
+  applyLabel: __spreadProps(__spreadValues({}, TYPE.label), {
     fontSize: 14,
-    fontWeight: "700"
-  },
+    color: theme.edOnInk
+  }),
   row: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
+    gap: SPACE.sm,
     flexWrap: "wrap",
-    paddingVertical: 4
+    paddingVertical: SPACE.xs
   },
   grid: {
     flexDirection: "row",
     flexWrap: "wrap",
-    gap: 8
-  },
-  hint: {
-    color: "#9A9AA5",
-    fontSize: 13,
-    lineHeight: 18
+    gap: SPACE.sm
   },
+  hint: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontWeight: "400",
+    color: theme.edInk2
+  }),
   probe: {
-    color: "#C8C8D0",
+    color: theme.edInk2,
     fontSize: 11,
     fontFamily: "Menlo",
-    marginTop: 6
+    marginTop: SPACE.sm
   },
   choice: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 9,
-    backgroundColor: "#1F1F24",
+    minHeight: 34,
+    justifyContent: "center",
+    paddingHorizontal: SPACE.md,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edRaised,
     maxWidth: 140
   },
   choiceOn: {
-    backgroundColor: "#8B7CFF"
-  },
-  choiceLabel: {
-    color: "#F7F7FA",
-    fontSize: 12.5,
-    fontWeight: "500"
+    backgroundColor: theme.edInk
   },
+  choiceLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk
+  }),
   choiceLabelOn: {
-    color: "#0A0A0C"
+    color: theme.edOnInk,
+    fontWeight: "600"
   },
   field: {
     minWidth: 88,
     flexGrow: 1
   },
-  fieldLabel: {
-    color: "#9A9AA5",
-    fontSize: 11,
-    marginBottom: 4
-  },
+  fieldLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk2,
+    marginBottom: SPACE.xs
+  }),
   fieldInput: {
-    color: "#F7F7FA",
-    fontSize: 13,
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    borderRadius: 9,
-    backgroundColor: "#1F1F24"
+    color: theme.edInk,
+    fontSize: 14,
+    paddingHorizontal: SPACE.md,
+    paddingVertical: 10,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edRaised
   },
   fieldMulti: {
-    minHeight: 56,
+    minHeight: 64,
     textAlignVertical: "top"
   },
   stepper: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 9,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 9,
-    backgroundColor: "#1F1F24"
-  },
-  stepperLabel: {
-    color: "#9A9AA5",
-    fontSize: 11.5
-  },
-  stepperValue: {
-    color: "#F7F7FA",
-    fontSize: 12.5,
+    gap: SPACE.sm,
+    paddingHorizontal: SPACE.md,
+    minHeight: 40,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edRaised
+  },
+  stepperLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk2
+  }),
+  stepperValue: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk,
     fontVariant: ["tabular-nums"],
     minWidth: 44,
     textAlign: "center"
-  },
+  }),
   notice: {
     position: "absolute",
-    left: 20,
-    right: 20,
-    bottom: 24,
+    left: SPACE.lg,
+    right: SPACE.lg,
+    bottom: SPACE.xl,
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
-    paddingHorizontal: 14,
-    paddingVertical: 11,
-    borderRadius: 12,
-    backgroundColor: "rgba(248, 250, 252, 0.96)"
-  },
-  noticeText: {
+    gap: SPACE.md,
+    paddingHorizontal: SPACE.lg,
+    paddingVertical: SPACE.md,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edInk
+  },
+  noticeText: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontWeight: "400",
     flex: 1,
-    color: "#0f172a",
-    fontSize: 13
-  },
-  noticeDismiss: {
-    color: "#6C5CE7",
-    fontSize: 13,
-    fontWeight: "600"
-  }
-});export{VideoEditExperience};//# sourceMappingURL=VideoEditExperience.js.map
+    color: theme.edOnInk
+  }),
+  noticeDismiss: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edAccent
+  })
+}));export{VideoEditExperience};//# sourceMappingURL=VideoEditExperience.js.map