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

package/lib/features/canvas/VideoEditorExperience.js

@@ -1,4 +1,4 @@
-import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useMemo,useRef,useCallback,useEffect}from'react';import {StyleSheet,useWindowDimensions,Platform,Alert,View,Text,Pressable,FlatList,ActivityIndicator,TextInput,ScrollView}from'react-native';import {KeyboardAwareScreen,KeyboardLiftSpacer}from'../../components/KeyboardComposerDock.js';import {dismissKeyboard}from'../../utils/keyboardController.js';import {GestureHandlerRootView,Gesture,GestureDetector}from'react-native-gesture-handler';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {getVideoPreviewRenderer}from'./videoRenderer.js';import {friendlyMediaError,resultUrl,generationMediaUrl}from'./videoEditor/mediaActions.js';import {clipFromItem,emptyTimeline,timelineDuration,updateClip,clipFromColor,textClipAt,newSegment,buildExportSpec,removeClip,moveClip,trimClip,SPEED_PRESETS,SPEED_CURVES,TEXT_PRESETS,updateText,removeText,MOTION_MOVES,MOTION_STRENGTHS,CLIP_TRANSITIONS,moveIdOf,kenBurnsFor,DEFAULT_IMAGE_SEC,clipTimelineSec}from'./videoEditor/editorModel.js';import {filterById,FILTER_PRESETS}from'./videoEditor/filters.js';import {useSafeInsets}from'./withRemoteSafeArea.js';import {STATIC_VIDEO_MODELS,buildVideoGenerateParams}from'./generationModels.js';import {mapDesignCorpus,playableTemplatePreviewUrl}from'./canvasChatTemplates.js';import {config}from'../../config/env-config.js';import {useStudioCatalogTemplates}from'./useStudioCatalogTemplates.js';import {DESIGN_PROMPT_TEMPLATES}from'./designPromptTemplates.js';import {templateHasUsableConfig,loadTemplateTimeline}from'./templateImport/loadTemplate.js';import {loadVideoProjects,projectHasWork,newVideoProjectId,snapshotProject,upsertVideoProject,persistVideoProjects,relativeProjectTime}from'./videoEditor/videoProjectsStore.js';import {AgentCutPane}from'./videoEditor/agent/AgentCutPane.js';import {canvasForRatio,canvasForAspect}from'./videoEditor/compileTimeline.js';import {reflowSceneChildren,sceneSpans,stampScene,layerInView}from'./videoEditor/sceneLayers.js';import {BlurBoxOverlay}from'./videoEditor/BlurBoxOverlay.js';import {ToolsDrawer}from'./videoEditor/tools/ToolsDrawer.js';import {staleMediaUrls,withRenewedUrls}from'./videoEditor/renewLinks.js';import {ensureFetchableMediaUrl}from'./mediaUrls.js';import {ProduceVideoSheet}from'./videoEditor/produce/ProduceVideoSheet.js';import {sceneFootagePatch,produceScenes,produceJob,runProduce}from'./videoEditor/produce/produceScenes.js';var __defProp = Object.defineProperty;
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useMemo,useState,useRef,useCallback,useEffect}from'react';import {useWindowDimensions,Platform,Alert,View,Text,FlatList,ActivityIndicator,TextInput,ScrollView,StyleSheet}from'react-native';import {KeyboardAwareScreen,KeyboardLiftSpacer}from'../../components/KeyboardComposerDock.js';import {dismissKeyboard}from'../../utils/keyboardController.js';import {GestureHandlerRootView,Gesture,GestureDetector}from'react-native-gesture-handler';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {getVideoPreviewRenderer}from'./videoRenderer.js';import {friendlyMediaError,resultUrl,generationMediaUrl}from'./videoEditor/mediaActions.js';import {clipFromItem,emptyTimeline,timelineDuration,updateClip,clipFromColor,textClipAt,newSegment,buildExportSpec,removeClip,moveClip,trimClip,SPEED_PRESETS,SPEED_CURVES,TEXT_PRESETS,updateText,removeText,MOTION_MOVES,MOTION_STRENGTHS,CLIP_TRANSITIONS,moveIdOf,kenBurnsFor,DEFAULT_IMAGE_SEC,clipTimelineSec}from'./videoEditor/editorModel.js';import {filterById,FILTER_PRESETS}from'./videoEditor/filters.js';import {useSafeInsets}from'./withRemoteSafeArea.js';import {STATIC_VIDEO_MODELS,buildVideoGenerateParams}from'./generationModels.js';import {mapDesignCorpus,playableTemplatePreviewUrl}from'./canvasChatTemplates.js';import {config}from'../../config/env-config.js';import {useStudioCatalogTemplates}from'./useStudioCatalogTemplates.js';import {DESIGN_PROMPT_TEMPLATES}from'./designPromptTemplates.js';import {templateHasUsableConfig,loadTemplateTimeline}from'./templateImport/loadTemplate.js';import {loadVideoProjects,projectHasWork,newVideoProjectId,snapshotProject,upsertVideoProject,persistVideoProjects,relativeProjectTime}from'./videoEditor/videoProjectsStore.js';import {AgentCutPane}from'./videoEditor/agent/AgentCutPane.js';import {canvasForRatio,canvasForAspect}from'./videoEditor/compileTimeline.js';import {reflowSceneChildren,sceneSpans,stampScene,layerInView}from'./videoEditor/sceneLayers.js';import {BlurBoxOverlay}from'./videoEditor/BlurBoxOverlay.js';import {ToolsDrawer}from'./videoEditor/tools/ToolsDrawer.js';import {staleMediaUrls,withRenewedUrls}from'./videoEditor/renewLinks.js';import {ensureFetchableMediaUrl}from'./mediaUrls.js';import {ProduceVideoSheet}from'./videoEditor/produce/ProduceVideoSheet.js';import {sceneFootagePatch,produceScenes,produceJob,runProduce}from'./videoEditor/produce/produceScenes.js';import {useCanvasTheme,themedStyles,CANVAS_DARK}from'./canvasTheme.js';import {Pressable,pressedStyle,RADIUS,SPACE,HIT,TYPE}from'./canvasUi.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -17,6 +17,9 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const HSCROLL = {
+  flexGrow: 0
+};
 function nextProjectTitle(rows, currentTitle) {
   const used = new Set(rows.map((row) => row.title.trim()));
   used.add(currentTitle.trim());
@@ -132,6 +135,8 @@ function TemplateWebPreview({
   src,
   poster
 }) {
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const WebView = loadEditorWebView();
   const playable = playableTemplatePreviewUrl(src);
   if (!playable || !WebView) {
@@ -152,23 +157,25 @@ function TemplateCatalogCard({
   onPreview,
   onUse
 }) {
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const canPreview = Boolean(row.coverVideo || row.cover);
   const canUse = Boolean(onUse && templateHasUsableConfig(row));
   return /* @__PURE__ */ jsxs(View, { style: styles.templateCard, children: [
     row.cover ? /* @__PURE__ */ jsx(Image, { source: {
       uri: row.cover
-    }, style: styles.templateCover, contentFit: "cover" }) : /* @__PURE__ */ jsx(View, { style: [styles.templateCover, styles.mediaThumbVideo], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "movie-open-outline", size: 22, color: "#9A9AA5" }) }),
+    }, style: styles.templateCover, contentFit: "cover" }) : /* @__PURE__ */ jsx(View, { style: [styles.templateCover, styles.mediaThumbVideo], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "movie-open-outline", size: 22, color: theme.edInk2 }) }),
     /* @__PURE__ */ jsx(Text, { style: styles.templateTitle, numberOfLines: 2, children: row.title }),
     /* @__PURE__ */ jsxs(View, { style: styles.templateActions, children: [
       canUse ? /* @__PURE__ */ jsxs(Pressable, { onPress: () => onUse == null ? void 0 : onUse(row), disabled: using || generating, style: [styles.templateGenerate, (using || generating) && styles.disabled], accessibilityRole: "button", accessibilityLabel: `Use template ${row.title}`, children: [
-        using ? /* @__PURE__ */ jsx(ActivityIndicator, { color: "#F2F2F5", size: "small" }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "layers-outline", size: 13, color: "#F2F2F5" }),
+        using ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.edInk, size: "small" }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "layers-outline", size: 13, color: theme.edInk }),
         /* @__PURE__ */ jsx(Text, { style: styles.templateGenerateLabel, numberOfLines: 1, children: "Use" })
       ] }) : /* @__PURE__ */ jsxs(Pressable, { onPress: () => onGenerate(row), disabled: generating || !row.prompt.trim(), style: [styles.templateGenerate, (generating || !row.prompt.trim()) && styles.disabled], accessibilityRole: "button", accessibilityLabel: `Generate ${row.title}`, children: [
-        generating ? /* @__PURE__ */ jsx(ActivityIndicator, { color: "#F2F2F5", size: "small" }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "auto-fix", size: 13, color: "#F2F2F5" }),
+        generating ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.edInk, size: "small" }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "auto-fix", size: 13, color: theme.edInk }),
         /* @__PURE__ */ jsx(Text, { style: styles.templateGenerateLabel, numberOfLines: 1, children: "Generate" })
       ] }),
       /* @__PURE__ */ jsxs(Pressable, { onPress: () => onPreview(row), disabled: !canPreview, style: [styles.templatePreviewBtn, !canPreview && styles.disabled], accessibilityRole: "button", accessibilityLabel: `Preview ${row.title}`, children: [
-        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "play", size: 13, color: "#D8D8E0" }),
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "play", size: 13, color: theme.edInk2 }),
         /* @__PURE__ */ jsx(Text, { style: styles.templatePreviewLabel, numberOfLines: 1, children: "Preview" })
       ] })
     ] })
@@ -192,6 +199,9 @@ function VideoEditorExperience({
   initialRailTab
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
+  const stageStyles = useMemo(() => makeStyles(CANVAS_DARK), []);
   const insets = useSafeInsets();
   const {
     width: windowWidth
@@ -485,7 +495,7 @@ function VideoEditorExperience({
     setSelectedClipId(clip.id);
     setSelectedTextId(title.id);
     setRailTab(null);
-    setNotice("Blank scene added \u2014 edit the title or open Media.");
+    setNotice("Blank scene added. Edit the title or open Media.");
   }, []);
   const previewStudioTemplate = useCallback((row) => {
     const sample = playableTemplatePreviewUrl(row.coverVideo);
@@ -559,7 +569,7 @@ function VideoEditorExperience({
       }
       setRailTab("media");
       setTab("media");
-      setNotice(picked.length === 1 ? "In Media \u2014 tap it to add to the timeline" : `${picked.length} items in Media \u2014 tap one to add`);
+      setNotice(picked.length === 1 ? "In Media. Tap it to add to the timeline" : `${picked.length} items in Media. Tap one to add`);
     }).catch((err) => {
       setNotice(friendlyMediaError(err, "media pick"));
     }).finally(() => {
@@ -625,7 +635,7 @@ function VideoEditorExperience({
         setNotice("Recording added as the soundtrack.");
         return;
       }
-      setNotice("Saved in Media \u2014 tap it to add to the timeline.");
+      setNotice("Saved in Media. Tap it to add to the timeline.");
     }).catch((err) => {
       setRecordError(friendlyMediaError(err, "record"));
     }).finally(() => {
@@ -750,7 +760,7 @@ function VideoEditorExperience({
   }, []);
   const dropSegment = useCallback((kind) => {
     if (timeline.clips.length === 0) {
-      setNotice("Add a scene first \u2014 segments sit across the cut.");
+      setNotice("Add a scene first. Segments sit across the cut.");
       return;
     }
     const seg = newSegment(kind, playhead, Math.max(total.knownSec, 2));
@@ -892,6 +902,13 @@ function VideoEditorExperience({
     /* @__PURE__ */ jsx(ProduceVideoSheet, { visible: produceOpen, onClose: () => setProduceOpen(false), timeline, sourceSec, aspectRatio: produceAspect, runAction, onFootage: applyFootage }),
     /* @__PURE__ */ jsxs(KeyboardAwareScreen, { style: styles.root, testID: "video-editor", children: [
       /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+          flushProject();
+          dismissKeyboard();
+          onClose();
+        }, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Close editor", style: ({
+          pressed
+        }) => [styles.headerCloseBtn, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 22, color: theme.edInk }) }),
         /* @__PURE__ */ jsxs(View, { style: styles.headerCopy, children: [
           /* @__PURE__ */ jsx(Text, { style: styles.headerProject, numberOfLines: 1, children: localTitle }),
           /* @__PURE__ */ jsxs(Text, { style: styles.headerSaved, children: [
@@ -899,47 +916,48 @@ function VideoEditorExperience({
             /* @__PURE__ */ jsx(Text, { style: styles.headerSavedDim, children: " \xB7 30 fps MP4" })
           ] })
         ] }),
-        timeline.clips.some((c) => c.fillColor) ? /* @__PURE__ */ jsx(Pressable, { onPress: () => setProduceOpen(true), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Produce video - film the colour scenes", style: styles.headerGhostBtn, testID: "video-editor-produce", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "movie-open-play-outline", size: 18, color: "#F7F7FA" }) }) : null,
-        /* @__PURE__ */ jsx(Pressable, { onPress: () => setToolsOpen(true), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Tools", style: styles.headerGhostBtn, testID: "video-editor-tools", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "toolbox-outline", size: 18, color: "#F7F7FA" }) }),
+        timeline.clips.some((c) => c.fillColor) ? /* @__PURE__ */ jsx(Pressable, { onPress: () => setProduceOpen(true), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Produce video - film the colour scenes", style: ({
+          pressed
+        }) => [styles.headerGhostBtn, pressedStyle(pressed)], testID: "video-editor-produce", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "movie-open-play-outline", size: 20, color: theme.edInk }) }) : null,
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => setToolsOpen(true), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Tools", style: ({
+          pressed
+        }) => [styles.headerGhostBtn, pressedStyle(pressed)], testID: "video-editor-tools", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "toolbox-outline", size: 20, color: theme.edInk }) }),
         /* @__PURE__ */ jsx(Pressable, { onPress: previewPlay, disabled: timeline.clips.length === 0, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: playing ? "Pause preview" : "Preview", style: timeline.clips.length === 0 ? styles.disabled : styles.headerGhostBtn, children: /* @__PURE__ */ jsx(Text, { style: styles.headerGhost, children: playing ? "Pause" : "Preview" }) }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: exportTimeline, disabled: timeline.clips.length === 0, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Export video", accessibilityHint: timeline.clips.length === 0 ? "Add a scene or clip before exporting" : void 0, style: [styles.exportBtn, timeline.clips.length === 0 ? styles.disabled : null], children: /* @__PURE__ */ jsx(Text, { style: styles.exportBtnLabel, children: "Export" }) }),
-        /* @__PURE__ */ jsx(Pressable, { onPress: () => {
-          flushProject();
-          dismissKeyboard();
-          onClose();
-        }, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Close editor", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 22, color: "#E8E8EE" }) })
+        /* @__PURE__ */ jsx(Pressable, { onPress: exportTimeline, disabled: timeline.clips.length === 0, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Export video", accessibilityHint: timeline.clips.length === 0 ? "Add a scene or clip before exporting" : void 0, style: ({
+          pressed
+        }) => [styles.exportBtn, timeline.clips.length === 0 ? styles.disabled : null, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: styles.exportBtnLabel, children: "Export" }) })
       ] }),
       /* @__PURE__ */ jsxs(View, { style: styles.workspace, children: [
         railTab || recordOpen ? /* @__PURE__ */ jsxs(View, { style: [styles.sheet, railTab === "templates" && !recordOpen ? styles.sheetTall : null], children: [
           /* @__PURE__ */ jsxs(View, { style: styles.sheetHead, children: [
             /* @__PURE__ */ jsx(Text, { style: styles.sheetTitle, children: recordOpen ? "Record" : (_i = (_h = TABS.find((entry) => entry.id === railTab)) == null ? void 0 : _h.label) != null ? _i : "Tools" }),
             railTab === "projects" && !recordOpen ? /* @__PURE__ */ jsxs(Pressable, { onPress: startNewProject, style: styles.sheetNewBtn, accessibilityRole: "button", accessibilityLabel: "New project", children: [
-              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 14, color: "#101013" }),
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 14, color: theme.edOnInk }),
               /* @__PURE__ */ jsx(Text, { style: styles.sheetNewBtnLabel, children: "New" })
             ] }) : null,
             /* @__PURE__ */ jsx(Pressable, { onPress: () => {
               setRailTab(null);
               setRecordOpen(false);
               setMicTakeOn(false);
-            }, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Close tools", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 18, color: "#F2F2F5" }) })
+            }, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Close tools", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 18, color: theme.edInk }) })
           ] }),
           railTab === "templates" && !recordOpen ? /* @__PURE__ */ jsx(View, { style: styles.templateSheetBody, children: /* @__PURE__ */ jsx(FlatList, { data: templateGrid, keyExtractor: (pair) => pair.map((row) => row.id).join(":"), keyboardShouldPersistTaps: "handled", style: styles.templateList, contentContainerStyle: styles.templateListInner, extraData: `${templatesLoadingMore}:${templates.length}`, ListHeaderComponent: /* @__PURE__ */ jsxs(View, { style: styles.templatesPane, children: [
             /* @__PURE__ */ jsxs(View, { style: styles.searchField, children: [
-              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "magnify", size: 20, color: "#8A8A94" }),
-              /* @__PURE__ */ jsx(TextInput, { value: templateQuery, onChangeText: setTemplateQuery, placeholder: "Search templates\u2026", placeholderTextColor: "#6A6A74", style: styles.searchInput, autoCorrect: false, autoCapitalize: "none", autoFocus: false, returnKeyType: "search", accessibilityLabel: "Search templates", onSubmitEditing: () => setTemplateSearch(templateQuery.trim()) }),
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "magnify", size: 20, color: theme.edInk3 }),
+              /* @__PURE__ */ jsx(TextInput, { value: templateQuery, onChangeText: setTemplateQuery, placeholder: "Search templates\u2026", placeholderTextColor: theme.edInk3, style: styles.searchInput, autoCorrect: false, autoCapitalize: "none", autoFocus: false, returnKeyType: "search", accessibilityLabel: "Search templates", onSubmitEditing: () => setTemplateSearch(templateQuery.trim()) }),
               templateQuery.length > 0 ? /* @__PURE__ */ jsx(Pressable, { onPress: () => {
                 setTemplateQuery("");
                 setTemplateSearch("");
                 dismissKeyboard();
-              }, style: styles.searchClear, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Clear search", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close-circle", size: 18, color: "#8A8A94" }) }) : null
+              }, style: styles.searchClear, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Clear search", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close-circle", size: 18, color: theme.edInk3 }) }) : null
             ] }),
-            templatesLoading && templates.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles.emptyPanel, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: "#E8E8EE" }) }) : templates.length === 0 ? /* @__PURE__ */ jsxs(View, { style: styles.emptyPanel, children: [
-              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "view-grid-outline", size: 22, color: "#6A6A74" }),
+            templatesLoading && templates.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles.emptyPanel, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.edInk }) }) : templates.length === 0 ? /* @__PURE__ */ jsxs(View, { style: styles.emptyPanel, children: [
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "view-grid-outline", size: 22, color: theme.edInk3 }),
               /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyTitle, children: "No templates" }),
               /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyDetail, children: templateSearch ? "No templates match that search." : "The studio catalog is empty in this environment." })
             ] }) : null
-          ] }), ListFooterComponent: templates.length === 0 ? null : /* @__PURE__ */ jsx(View, { style: styles.templateLoadBar, children: /* @__PURE__ */ jsx(Pressable, { onPress: loadMoreTemplates, disabled: templatesLoadingMore, style: [styles.loadMoreBtn, templatesLoadingMore ? styles.disabled : null], accessibilityRole: "button", accessibilityLabel: "Load more templates", children: templatesLoadingMore ? /* @__PURE__ */ jsx(ActivityIndicator, { color: "#101013" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chevron-down", size: 20, color: "#101013" }),
+          ] }), ListFooterComponent: templates.length === 0 ? null : /* @__PURE__ */ jsx(View, { style: styles.templateLoadBar, children: /* @__PURE__ */ jsx(Pressable, { onPress: loadMoreTemplates, disabled: templatesLoadingMore, style: [styles.loadMoreBtn, templatesLoadingMore ? styles.disabled : null], accessibilityRole: "button", accessibilityLabel: "Load more templates", children: templatesLoadingMore ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.edOnInk }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chevron-down", size: 20, color: theme.edOnInk }),
             /* @__PURE__ */ jsx(Text, { style: styles.loadMoreBtnLabel, children: "Load more" })
           ] }) }) }), renderItem: ({
             item: pair
@@ -952,7 +970,7 @@ function VideoEditorExperience({
               flex: 1
             } }) : null
           ] }) }) }) : /* @__PURE__ */ jsx(ScrollView, { style: styles.sidePaneScroll, contentContainerStyle: styles.sidePaneInner, keyboardShouldPersistTaps: "always", children: /* @__PURE__ */ jsx(View, { style: styles.panel, children: recordOpen ? /* @__PURE__ */ jsxs(View, { style: styles.recordPane, children: [
-            /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Web records the screen, a window, or the camera, then drops the take on the timeline. On the phone that is camera, mic, or the library \u2014 screen capture stays on desktop." }),
+            /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Web records the screen, a window, or the camera, then drops the take on the timeline. On the phone that is camera, mic, or the library; screen capture stays on desktop." }),
             recordError ? /* @__PURE__ */ jsx(Text, { style: styles.recordError, children: recordError }) : null,
             [{
               id: "camera-video",
@@ -975,14 +993,14 @@ function VideoEditorExperience({
               label: "Choose file",
               hint: "Video, image, or audio"
             }].map((row) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => captureFromRecord(row.id), disabled: recordOn || !onPickLocalMedia, style: [styles.recordRow, (recordOn || !onPickLocalMedia) && styles.disabled], accessibilityRole: "button", children: [
-              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: row.icon, size: 22, color: "#F2F2F5" }),
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: row.icon, size: 22, color: theme.edInk }),
               /* @__PURE__ */ jsxs(View, { style: styles.segmentMenuCopy, children: [
                 /* @__PURE__ */ jsx(Text, { style: styles.segmentMenuLabel, children: row.label }),
                 /* @__PURE__ */ jsx(Text, { style: styles.segmentMenuHint, children: row.hint })
               ] })
             ] }, row.id)),
             /* @__PURE__ */ jsxs(Pressable, { onPress: toggleMicTake, disabled: !audioRecorder, style: [styles.recordRow, !audioRecorder && styles.disabled], accessibilityRole: "button", children: [
-              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: micTakeOn ? "stop-circle-outline" : "microphone-outline", size: 22, color: micTakeOn ? "#F87171" : "#F2F2F5" }),
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: micTakeOn ? "stop-circle-outline" : "microphone-outline", size: 22, color: micTakeOn ? theme.edDanger : theme.edInk }),
               /* @__PURE__ */ jsxs(View, { style: styles.segmentMenuCopy, children: [
                 /* @__PURE__ */ jsx(Text, { style: styles.segmentMenuLabel, children: micTakeOn ? "Stop voice take" : "Record voice" }),
                 /* @__PURE__ */ jsx(Text, { style: styles.segmentMenuHint, children: audioRecorder ? "Adds a voiceover on the Audio lane" : "Host microphone is not wired in this build" })
@@ -1002,11 +1020,11 @@ function VideoEditorExperience({
               icon: "folder-outline",
               label: "Files"
             }].map((source) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => pickIntoLibrary(source.id), disabled: mediaBusy, style: [styles.pickBtn, mediaBusy && styles.disabled], accessibilityRole: "button", accessibilityLabel: `Upload from ${source.label}`, children: [
-              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: source.icon, size: 18, color: "#E8E8EE" }),
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: source.icon, size: 18, color: theme.edInk }),
               /* @__PURE__ */ jsx(Text, { style: styles.pickBtnLabel, children: source.label })
             ] }, source.id)) }) : null,
             media.length === 0 ? /* @__PURE__ */ jsxs(View, { style: styles.emptyPanel, children: [
-              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-plus", size: 22, color: "#6A6A74" }),
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-plus", size: 22, color: theme.edInk3 }),
               /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyTitle, children: "No media yet" }),
               /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyDetail, children: "Upload from this phone, or tap a clip from this canvas to add it to the timeline." })
             ] }) : /* @__PURE__ */ jsx(View, { style: styles.mediaGrid, children: media.map((item) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
@@ -1026,16 +1044,16 @@ function VideoEditorExperience({
             }, style: styles.mediaTile, children: [
               item.type === "image" ? /* @__PURE__ */ jsx(Image, { source: {
                 uri: item.src
-              }, style: styles.mediaThumb, contentFit: "cover" }) : /* @__PURE__ */ jsx(View, { style: [styles.mediaThumb, styles.mediaThumbVideo], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: item.type === "audio" ? "music" : "play", size: 18, color: "#9A9AA5" }) }),
-              /* @__PURE__ */ jsx(View, { style: styles.mediaAdd, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 12, color: "#0A0A0C" }) })
+              }, style: styles.mediaThumb, contentFit: "cover" }) : /* @__PURE__ */ jsx(View, { style: [styles.mediaThumb, styles.mediaThumbVideo], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: item.type === "audio" ? "music" : "play", size: 18, color: theme.edInk2 }) }),
+              /* @__PURE__ */ jsx(View, { style: styles.mediaAdd, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 12, color: theme.edOnInk }) })
             ] }, item.id)) })
           ] }) : railTab === "projects" ? /* @__PURE__ */ jsxs(View, { style: styles.projectsPane, children: [
             /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "A project is a saved timeline. Create one, then add clips from Media." }),
             /* @__PURE__ */ jsxs(Pressable, { onPress: startNewProject, style: styles.solidBtn, accessibilityRole: "button", accessibilityLabel: "New project", children: [
-              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 16, color: "#101013" }),
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 16, color: theme.edOnInk }),
               /* @__PURE__ */ jsx(Text, { style: styles.solidBtnLabel, children: "Create project" })
             ] }),
-            /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: dirty ? "Unsaved changes \u2014 saves as soon as you edit." : projectHasWork(timeline) ? "All changes saved" : "Saves as soon as you edit." }),
+            /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: dirty ? "Unsaved changes. Saves as soon as you edit." : projectHasWork(timeline) ? "All changes saved" : "Saves as soon as you edit." }),
             projectList.map((row) => {
               const current = row.id === "__current__" || row.id === activeProjectId;
               const clips = row.timeline.clips.length;
@@ -1068,14 +1086,14 @@ function VideoEditorExperience({
                   /* @__PURE__ */ jsx(Pressable, { onPress: () => {
                     setRenameId(row.id);
                     setRenameDraft(row.title);
-                  }, hitSlop: 8, accessibilityLabel: "Rename project", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "pencil-outline", size: 16, color: "#8B8B96" }) }),
-                  /* @__PURE__ */ jsx(Pressable, { onPress: () => deleteSavedProject(row.id), hitSlop: 8, accessibilityLabel: "Delete project", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "trash-can-outline", size: 16, color: "#FF6B6B" }) })
+                  }, hitSlop: 8, accessibilityLabel: "Rename project", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "pencil-outline", size: 16, color: theme.edInk3 }) }),
+                  /* @__PURE__ */ jsx(Pressable, { onPress: () => deleteSavedProject(row.id), hitSlop: 8, accessibilityLabel: "Delete project", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "trash-can-outline", size: 16, color: theme.edDanger }) })
                 ] }) : /* @__PURE__ */ jsx(Text, { style: styles.projectRowMeta, children: "Current" })
               ] }, row.id);
             })
           ] }) : tab === "ai" ? /* @__PURE__ */ jsxs(View, { children: [
             /* @__PURE__ */ jsx(Text, { style: styles.panelBarTitle, children: "Create with AI" }),
-            /* @__PURE__ */ jsx(TextInput, { value: aiPrompt, onChangeText: setAiPrompt, placeholder: "Continue the scene\u2026", placeholderTextColor: "#5A5A66", style: styles.textInput, multiline: true }),
+            /* @__PURE__ */ jsx(TextInput, { value: aiPrompt, onChangeText: setAiPrompt, placeholder: "Continue the scene\u2026", placeholderTextColor: theme.edInk3, style: styles.textInput, multiline: true }),
             /* @__PURE__ */ jsx(Pressable, { onPress: () => generateAiScene(), disabled: aiBusy || !aiPrompt.trim(), style: [styles.chip, styles.chipActive, styles.chipWide], children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipLabelActive], children: aiBusy ? "Generating\u2026" : "Generate scene" }) })
           ] }) : railTab === "elements" ? /* @__PURE__ */ jsxs(View, { children: [
             /* @__PURE__ */ jsx(Text, { style: styles.panelBarTitle, children: "Blank scene" }),
@@ -1090,7 +1108,7 @@ function VideoEditorExperience({
             }, style: [styles.sceneSwatch, {
               backgroundColor: color
             }], accessibilityRole: "button", accessibilityLabel: `Add blank scene ${color}` }, color)) }),
-            /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Adds a colored still at the end of the timeline \u2014 hold duration in clip tools." })
+            /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Adds a colored still at the end of the timeline. Set how long it holds in clip tools." })
           ] }) : railTab === "logo" ? /* @__PURE__ */ jsxs(View, { children: [
             logoSrc ? /* @__PURE__ */ jsx(Image, { source: {
               uri: logoSrc
@@ -1104,7 +1122,7 @@ function VideoEditorExperience({
           }), onMove: (dir) => setTimeline((t) => moveClip(t, selected.id, dir)), onRemove: () => {
             setTimeline((t) => removeClip(t, selected.id));
             setSelectedClipId(null);
-          }, canMoveLeft: selectedIndex > 0, canMoveRight: selectedIndex >= 0 && selectedIndex < timeline.clips.length - 1 }) : /* @__PURE__ */ jsx(Text, { style: styles.panelEmpty, children: "Pick a clip on the timeline to change its timing, trim, motion, look and audio." }) : tab === "filter" && selected ? /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.panelRow, children: FILTER_PRESETS.map((preset) => {
+          }, canMoveLeft: selectedIndex > 0, canMoveRight: selectedIndex >= 0 && selectedIndex < timeline.clips.length - 1 }) : /* @__PURE__ */ jsx(Text, { style: styles.panelEmpty, children: "Pick a clip on the timeline to change its timing, trim, motion, look and audio." }) : tab === "filter" && selected ? /* @__PURE__ */ jsx(ScrollView, { style: HSCROLL, horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.panelRow, children: FILTER_PRESETS.map((preset) => {
             const active = selected.filter === preset.id;
             return /* @__PURE__ */ jsxs(Pressable, { onPress: () => patchSelected({
               filter: preset.id
@@ -1119,7 +1137,7 @@ function VideoEditorExperience({
                   backgroundColor: color,
                   opacity
                 }] }, `${color}-${opacity}`)),
-                preset.id === "none" ? /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "cancel", size: 18, color: "#9A9AA5", style: styles.filterNoneGlyph }) : null
+                preset.id === "none" ? /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "cancel", size: 18, color: theme.edInk2, style: styles.filterNoneGlyph }) : null
               ] }),
               /* @__PURE__ */ jsx(Text, { style: [styles.filterLabel, active && styles.filterLabelActive], children: preset.label })
             ] }, preset.id);
@@ -1149,7 +1167,7 @@ function VideoEditorExperience({
               "\xD7."
             ] }) : null
           ] }) : railTab === "text" ? /* @__PURE__ */ jsxs(View, { children: [
-            /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.panelRow, children: TEXT_PRESETS.map((preset) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => addText({
+            /* @__PURE__ */ jsx(ScrollView, { style: HSCROLL, horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.panelRow, children: TEXT_PRESETS.map((preset) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => addText({
               text: preset.text,
               x: preset.x,
               y: preset.y
@@ -1161,7 +1179,7 @@ function VideoEditorExperience({
             selectedText ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(TextInput, { value: selectedText.text, onChangeText: (text) => setTimeline((t) => updateText(t, selectedText.id, {
                 text
-              })), style: styles.textInput, placeholder: "Title", placeholderTextColor: "#5A5A66", selectionColor: "#8B7CFF", selectTextOnFocus: true, returnKeyType: "done", onSubmitEditing: dismissKeyboard }),
+              })), style: styles.textInput, placeholder: "Title", placeholderTextColor: theme.edInk3, selectionColor: theme.edAccent, selectTextOnFocus: true, returnKeyType: "done", onSubmitEditing: dismissKeyboard }),
               /* @__PURE__ */ jsxs(View, { style: styles.panelRow, children: [
                 /* @__PURE__ */ jsx(Stepper, { label: "Start", value: `${selectedText.startSec.toFixed(1)}s`, onLess: () => setTimeline((t) => updateText(t, selectedText.id, {
                   startSec: Math.max(0, selectedText.startSec - 0.5)
@@ -1185,7 +1203,7 @@ function VideoEditorExperience({
             voiceover
           })), onSceneAudio: addSceneAudio, onNotice: setNotice }) : railTab === "agent" ? /* @__PURE__ */ jsx(AgentCutPane, { timeline, setTimeline, token, indexUrl, runAction, uploadMedia, onAddMedia: addLibraryMedia, onFilm: filmScenes }) : railTab === "captions" ? /* @__PURE__ */ jsxs(View, { children: [
             /* @__PURE__ */ jsx(Text, { style: styles.panelBarTitle, children: "Captions" }),
-            /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "One captions lane \u2014 add at the playhead, then tap a row to edit." }),
+            /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "One captions lane. Add at the playhead, then tap a row to edit." }),
             /* @__PURE__ */ jsx(Pressable, { onPress: () => {
               const preset = TEXT_PRESETS.find((p) => p.id === "caption");
               addText(preset ? {
@@ -1210,9 +1228,9 @@ function VideoEditorExperience({
             ] }, row.id))
           ] }) : railTab === "audio" ? /* @__PURE__ */ jsxs(View, { children: [
             /* @__PURE__ */ jsx(Text, { style: styles.panelBarTitle, children: "AI audio" }),
-            /* @__PURE__ */ jsx(TextInput, { value: audioPrompt, onChangeText: setAudioPrompt, placeholder: "Music or narration prompt\u2026", placeholderTextColor: "#5A5A66", style: styles.textInput, multiline: true }),
+            /* @__PURE__ */ jsx(TextInput, { value: audioPrompt, onChangeText: setAudioPrompt, placeholder: "Music or narration prompt\u2026", placeholderTextColor: theme.edInk3, style: styles.textInput, multiline: true }),
             /* @__PURE__ */ jsx(Pressable, { onPress: generateAiAudio, disabled: audioBusy || !audioPrompt.trim(), style: [styles.chip, styles.chipActive, styles.chipWide], children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipLabelActive], children: audioBusy ? "Generating\u2026" : "Generate" }) }),
-            /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Lands in the media library \u2014 tap it there to add to the timeline. Mood music with auto-duck lives under Music." })
+            /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Lands in the media library. Tap it there to add to the timeline. Mood music with auto-duck lives under Music." })
           ] }) : tab === "segment" ? /* @__PURE__ */ jsxs(View, { children: [
             /* @__PURE__ */ jsx(Text, { style: styles.panelBarTitle, children: "Segment" }),
             (selectedBlur == null ? void 0 : selectedBlur.blur) ? /* @__PURE__ */ jsxs(View, { style: styles.panelRow, children: [
@@ -1237,27 +1255,27 @@ function VideoEditorExperience({
           ] }) : /* @__PURE__ */ jsx(Text, { style: styles.panelEmpty, children: "Pick a clip on the timeline to change its timing, trim, motion, look and audio." }) }) })
         ] }) : null,
         /* @__PURE__ */ jsxs(View, { style: styles.stageCol, children: [
-          /* @__PURE__ */ jsx(View, { style: styles.stageWell, onTouchStart: dismissKeyboard, children: /* @__PURE__ */ jsx(View, { style: styles.stage, children: selected === null ? /* @__PURE__ */ jsxs(View, { style: styles.stageEmptyCopy, children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "filmstrip-box-multiple", size: 32, color: "#6A6A74" }),
-            /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyTitle, children: "Start a scene" }),
-            /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyDetail, children: "Drop in a photo, a camera take, or a blank card \u2014 the same doors as the web studio." }),
-            /* @__PURE__ */ jsxs(View, { style: styles.stageEmptyActions, children: [
-              /* @__PURE__ */ jsxs(Pressable, { onPress: addBlankScene, style: styles.solidBtn, accessibilityRole: "button", accessibilityLabel: "Add blank scene", children: [
-                /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 16, color: "#101013" }),
-                /* @__PURE__ */ jsx(Text, { style: styles.solidBtnLabel, children: "Blank scene" })
+          /* @__PURE__ */ jsx(View, { style: styles.stageWell, onTouchStart: dismissKeyboard, children: /* @__PURE__ */ jsx(View, { style: stageStyles.stage, children: selected === null ? /* @__PURE__ */ jsxs(View, { style: stageStyles.stageEmptyCopy, children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "filmstrip-box-multiple", size: 32, color: CANVAS_DARK.edInk3 }),
+            /* @__PURE__ */ jsx(Text, { style: stageStyles.stageEmptyTitle, children: "Start a scene" }),
+            /* @__PURE__ */ jsx(Text, { style: stageStyles.stageEmptyDetail, children: "Drop in a photo, a camera take, or a blank card, the same doors as the web studio." }),
+            /* @__PURE__ */ jsxs(View, { style: stageStyles.stageEmptyActions, children: [
+              /* @__PURE__ */ jsxs(Pressable, { onPress: addBlankScene, style: stageStyles.solidBtn, accessibilityRole: "button", accessibilityLabel: "Add blank scene", children: [
+                /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 16, color: CANVAS_DARK.edOnInk }),
+                /* @__PURE__ */ jsx(Text, { style: stageStyles.solidBtnLabel, children: "Blank scene" })
               ] }),
               /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
                 setRailTab("media");
                 setTab("media");
-              }, style: styles.ghostBtn, accessibilityRole: "button", children: [
-                /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-plus", size: 16, color: "#F2F2F5" }),
-                /* @__PURE__ */ jsx(Text, { style: styles.ghostBtnLabel, children: "Open Media" })
+              }, style: stageStyles.ghostBtn, accessibilityRole: "button", children: [
+                /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-plus", size: 16, color: CANVAS_DARK.edInk }),
+                /* @__PURE__ */ jsx(Text, { style: stageStyles.ghostBtnLabel, children: "Open Media" })
               ] })
             ] })
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            selected.type === "video" && VideoPreview ? /* @__PURE__ */ jsx(VideoPreview, { src: selected.src, playing, rate: selected.speed, volume: selected.volume, muted: selected.muted, trimStartSec: selected.trimStartSec, trimEndSec: selected.trimEndSec, scrubToSec: scrub.sec, scrubNonce: scrub.nonce, onTime: onPreviewTime }) : selected.type === "video" ? /* @__PURE__ */ jsxs(View, { style: styles.stageEmpty, children: [
+            selected.type === "video" && VideoPreview ? /* @__PURE__ */ jsx(VideoPreview, { src: selected.src, playing, rate: selected.speed, volume: selected.volume, muted: selected.muted, trimStartSec: selected.trimStartSec, trimEndSec: selected.trimEndSec, scrubToSec: scrub.sec, scrubNonce: scrub.nonce, onTime: onPreviewTime }) : selected.type === "video" ? /* @__PURE__ */ jsxs(View, { style: stageStyles.stageEmpty, children: [
               /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "play-circle-outline", size: 40, color: "#4A4A55" }),
-              /* @__PURE__ */ jsx(Text, { style: styles.stageEmptyDetail, children: "Video preview needs the host's player - editing still works." })
+              /* @__PURE__ */ jsx(Text, { style: stageStyles.stageEmptyDetail, children: "Video preview needs the host's player - editing still works." })
             ] }) : /* @__PURE__ */ jsx(Image, { source: {
               uri: selected.src
             }, style: StyleSheet.absoluteFill, contentFit: "contain" }),
@@ -1275,14 +1293,14 @@ function VideoEditorExperience({
             })) }, t.id)),
             logoSrc ? /* @__PURE__ */ jsx(Image, { source: {
               uri: logoSrc
-            }, style: styles.logoOverlay, contentFit: "contain", pointerEvents: "none" }) : null,
-            /* @__PURE__ */ jsxs(View, { style: styles.stageToolbar, children: [
-              /* @__PURE__ */ jsx(Pressable, { onPress: () => setStageTool((t) => t === "animate" ? null : "animate"), style: [styles.stagePill, selected.kenBurns && styles.stagePillOn], children: /* @__PURE__ */ jsx(Text, { style: styles.stagePillLabel, children: "Animate" }) }),
-              /* @__PURE__ */ jsx(Pressable, { onPress: () => setStageTool((t) => t === "look" ? null : "look"), style: [styles.stagePill, selected.filter !== "none" && styles.stagePillOn], children: /* @__PURE__ */ jsx(Text, { style: styles.stagePillLabel, children: "Look" }) }),
-              /* @__PURE__ */ jsx(Pressable, { onPress: () => setStageTool((t) => t === "transition" ? null : "transition"), style: [styles.stagePill, selected.transitionIn && styles.stagePillOn], children: /* @__PURE__ */ jsx(Text, { style: styles.stagePillLabel, children: "Transition" }) })
+            }, style: stageStyles.logoOverlay, contentFit: "contain", pointerEvents: "none" }) : null,
+            /* @__PURE__ */ jsxs(View, { style: stageStyles.stageToolbar, children: [
+              /* @__PURE__ */ jsx(Pressable, { onPress: () => setStageTool((t) => t === "animate" ? null : "animate"), style: [stageStyles.stagePill, selected.kenBurns && stageStyles.stagePillOn], children: /* @__PURE__ */ jsx(Text, { style: stageStyles.stagePillLabel, children: "Animate" }) }),
+              /* @__PURE__ */ jsx(Pressable, { onPress: () => setStageTool((t) => t === "look" ? null : "look"), style: [stageStyles.stagePill, selected.filter !== "none" && stageStyles.stagePillOn], children: /* @__PURE__ */ jsx(Text, { style: stageStyles.stagePillLabel, children: "Look" }) }),
+              /* @__PURE__ */ jsx(Pressable, { onPress: () => setStageTool((t) => t === "transition" ? null : "transition"), style: [stageStyles.stagePill, selected.transitionIn && stageStyles.stagePillOn], children: /* @__PURE__ */ jsx(Text, { style: stageStyles.stagePillLabel, children: "Transition" }) })
             ] })
           ] }) }) }),
-          selected && stageTool ? /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.stageToolRow, children: [
+          selected && stageTool ? /* @__PURE__ */ jsxs(ScrollView, { style: HSCROLL, horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.stageToolRow, children: [
             stageTool === "animate" ? MOTION_MOVES.map((m) => {
               const on = moveIdOf(selected.kenBurns) === m.id;
               return /* @__PURE__ */ jsx(Pressable, { onPress: () => {
@@ -1359,10 +1377,12 @@ function VideoEditorExperience({
             setRailTab(null);
             setRecordError(null);
             setRecordOpen((open) => !open);
-          }, style: [styles.dockTab, styles.dockRecord, recordOpen && styles.dockRecordOn], accessibilityRole: "button", accessibilityLabel: "Record", accessibilityState: {
+          }, style: ({
+            pressed
+          }) => [styles.dockTab, styles.dockRecord, recordOpen && styles.dockRecordOn, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Record", accessibilityState: {
             selected: recordOpen
           }, children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "record-circle", size: 22, color: recordOpen || recordOn ? "#F87171" : "#8B8B96" }),
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "record-circle", size: 22, color: recordOpen || recordOn ? theme.edDanger : theme.edInk3 }),
             /* @__PURE__ */ jsx(Text, { style: [styles.dockLabel, recordOpen && styles.dockRecordLabel], children: "Record" })
           ] }),
           /* @__PURE__ */ jsx(View, { style: styles.dockRule }),
@@ -1372,10 +1392,12 @@ function VideoEditorExperience({
               setRecordOpen(false);
               setRailTab((cur) => cur === entry.id ? null : entry.id);
               setTab(entry.id);
-            }, style: [styles.dockTab, active && styles.dockTabOn], accessibilityRole: "tab", accessibilityState: {
+            }, style: ({
+              pressed
+            }) => [styles.dockTab, active && styles.dockTabOn, pressedStyle(pressed)], accessibilityRole: "tab", accessibilityState: {
               selected: active
             }, accessibilityLabel: entry.label, children: [
-              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: entry.icon, size: 20, color: active ? "#F2F2F5" : "#8B8B96" }),
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: entry.icon, size: 22, color: active ? theme.edInk : theme.edInk3 }),
               /* @__PURE__ */ jsx(Text, { style: [styles.dockLabel, active && styles.dockLabelOn], children: entry.label })
             ] }, entry.id);
           })
@@ -1385,9 +1407,9 @@ function VideoEditorExperience({
             /* @__PURE__ */ jsx(Text, { style: styles.templatePreviewKicker, children: "Template preview" }),
             /* @__PURE__ */ jsx(Text, { style: styles.templatePreviewBarTitle, numberOfLines: 1, children: templatePreview.title }),
             templatePreview.aspect ? /* @__PURE__ */ jsx(Text, { style: styles.templatePreviewAspect, children: templatePreview.aspect }) : null,
-            /* @__PURE__ */ jsx(Pressable, { onPress: () => setTemplatePreview(null), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Close template preview", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 18, color: "#F2F2F5" }) })
+            /* @__PURE__ */ jsx(Pressable, { onPress: () => setTemplatePreview(null), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Close template preview", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 18, color: theme.edInk }) })
           ] }),
-          /* @__PURE__ */ jsx(Text, { style: styles.templatePreviewHint, children: "Not part of your video \u2014 Generate adds a fresh clip" }),
+          /* @__PURE__ */ jsx(Text, { style: styles.templatePreviewHint, children: "Not part of your video. Generate adds a fresh clip" }),
           /* @__PURE__ */ jsx(View, { style: styles.templatePreviewMedia, children: templatePreview.kind === "video" ? /* @__PURE__ */ jsx(TemplateWebPreview, { src: templatePreview.src, poster: templatePreview.poster }) : /* @__PURE__ */ jsx(Image, { source: {
             uri: templatePreview.poster || templatePreview.src
           }, style: styles.templatePreviewImage, contentFit: "contain", recyclingKey: templatePreview.src }) })
@@ -1398,7 +1420,7 @@ function VideoEditorExperience({
         /* @__PURE__ */ jsx(Pressable, { onPress: () => setNotice(null), hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: styles.noticeDismiss, children: "OK" }) })
       ] }) : null,
       mediaBusy || aiBusy ? /* @__PURE__ */ jsx(View, { style: styles.busyOverlay, pointerEvents: "auto", children: /* @__PURE__ */ jsxs(View, { style: styles.busyCard, children: [
-        /* @__PURE__ */ jsx(ActivityIndicator, { color: "#F7F7FA" }),
+        /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.edInk }),
         /* @__PURE__ */ jsx(Text, { style: styles.busyTitle, children: aiBusy ? "Generating scene" : mediaBusy ? "Uploading" : "Working" }),
         /* @__PURE__ */ jsx(Text, { style: styles.busyDetail, children: aiBusy ? "This can take a minute. Keep the editor open." : uploadStatus || "Preparing your media\u2026" }),
         mediaBusy ? /* @__PURE__ */ jsx(View, { style: styles.busyTrack, children: /* @__PURE__ */ jsx(View, { style: styles.busyTrackFill }) }) : null
@@ -1420,6 +1442,7 @@ function DraggableText({
   onSelect,
   onMove
 }) {
+  const styles = useMemo(() => makeStyles(CANVAS_DARK), []);
   const stage = useRef({
     w: 1,
     h: 1
@@ -1470,20 +1493,34 @@ function TimelineTrack({
   onSkipEnd
 }) {
   var _a, _b;
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const segments = ((_a = timeline.segments) != null ? _a : []).filter((seg) => layerInView(seg, selectedClipId));
   const texts = timeline.texts.filter((t) => layerInView(t, selectedClipId));
   const sceneAudio = ((_b = timeline.sceneAudio) != null ? _b : []).filter((a) => layerInView(a, selectedClipId));
   const hasAudio = Boolean(timeline.voiceover || timeline.soundtrack || sceneAudio.length);
   return /* @__PURE__ */ jsxs(View, { style: [styles.timeline, compact && styles.timelineCompact], children: [
     /* @__PURE__ */ jsxs(View, { style: styles.timelineBar, children: [
-      /* @__PURE__ */ jsx(Pressable, { onPress: onLayers, hitSlop: 6, style: styles.timelineIconBtn, accessibilityRole: "button", accessibilityLabel: "Open layers", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "layers-outline", size: 20, color: "#F2F2F5" }) }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: onLayers, hitSlop: 6, style: ({
+        pressed
+      }) => [styles.timelineIconBtn, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Open layers", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "layers-outline", size: 20, color: theme.edInk }) }),
       /* @__PURE__ */ jsx(View, { style: styles.timelineRule }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: onAddScene, hitSlop: 6, style: styles.timelineIconBtn, accessibilityRole: "button", accessibilityLabel: "Add blank scene", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 22, color: "#F2F2F5" }) }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: onToggleSegmentMenu, hitSlop: 6, style: [styles.timelineIconBtn, segmentMenuOpen && styles.dockTabOn], accessibilityRole: "button", accessibilityLabel: "Add segment (speed, zoom, crop, trim)", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-split-horizontal", size: 20, color: "#F2F2F5" }) }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: onAddScene, hitSlop: 6, style: ({
+        pressed
+      }) => [styles.timelineIconBtn, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Add blank scene", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 22, color: theme.edInk }) }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: onToggleSegmentMenu, hitSlop: 6, style: ({
+        pressed
+      }) => [styles.timelineIconBtn, segmentMenuOpen && styles.dockTabOn, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Add segment (speed, zoom, crop, trim)", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-split-horizontal", size: 20, color: theme.edInk }) }),
       /* @__PURE__ */ jsx(View, { style: styles.headerSpacer }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: onSkipStart, hitSlop: 8, style: styles.transportBtn, accessibilityLabel: "Skip to start", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "skip-previous", size: 24, color: "#F2F2F5" }) }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: onTogglePlay, style: styles.transportPlay, accessibilityLabel: playing ? "Pause" : "Play", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: playing ? "pause" : "play", size: 26, color: "#101013" }) }),
-      /* @__PURE__ */ jsx(Pressable, { onPress: onSkipEnd, hitSlop: 8, style: styles.transportBtn, accessibilityLabel: "Skip to end", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "skip-next", size: 24, color: "#F2F2F5" }) }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: onSkipStart, hitSlop: 8, style: ({
+        pressed
+      }) => [styles.transportBtn, pressedStyle(pressed)], accessibilityLabel: "Skip to start", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "skip-previous", size: 24, color: theme.edInk }) }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: onTogglePlay, style: ({
+        pressed
+      }) => [styles.transportPlay, pressedStyle(pressed)], accessibilityLabel: playing ? "Pause" : "Play", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: playing ? "pause" : "play", size: 26, color: theme.edOnInk }) }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: onSkipEnd, hitSlop: 8, style: ({
+        pressed
+      }) => [styles.transportBtn, pressedStyle(pressed)], accessibilityLabel: "Skip to end", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "skip-next", size: 24, color: theme.edInk }) }),
       /* @__PURE__ */ jsxs(Text, { style: styles.transportTime, children: [
         formatSec(playhead),
         /* @__PURE__ */ jsxs(Text, { style: styles.transportTimeDim, children: [
@@ -1493,8 +1530,10 @@ function TimelineTrack({
       ] })
     ] }),
     segmentMenuOpen ? /* @__PURE__ */ jsxs(View, { style: styles.segmentMenu, children: [
-      SEGMENT_KINDS.map((entry) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => onAddSegment(entry.kind), style: styles.segmentMenuRow, accessibilityRole: "button", accessibilityLabel: entry.label, children: [
-        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: entry.icon, size: 16, color: "#A9A9B4" }),
+      SEGMENT_KINDS.map((entry) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => onAddSegment(entry.kind), style: ({
+        pressed
+      }) => [styles.segmentMenuRow, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: entry.label, children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: entry.icon, size: 16, color: theme.edInk2 }),
         /* @__PURE__ */ jsxs(View, { style: styles.segmentMenuCopy, children: [
           /* @__PURE__ */ jsx(Text, { style: styles.segmentMenuLabel, children: entry.label }),
           /* @__PURE__ */ jsx(Text, { style: styles.segmentMenuHint, children: entry.hint })
@@ -1505,11 +1544,11 @@ function TimelineTrack({
     /* @__PURE__ */ jsxs(ScrollView, { showsVerticalScrollIndicator: false, children: [
       /* @__PURE__ */ jsxs(View, { style: styles.laneRow, children: [
         /* @__PURE__ */ jsxs(View, { style: styles.laneGutter, children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "video", size: 14, color: "#8B8B96" }),
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "video", size: 14, color: theme.edInk3 }),
           /* @__PURE__ */ jsx(Text, { style: styles.laneLabel, children: "Video" })
         ] }),
         /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.laneBody, children: /* @__PURE__ */ jsx(View, { style: styles.clipTrack, children: timeline.clips.length === 0 ? /* @__PURE__ */ jsxs(Pressable, { onPress: onAddScene, style: styles.clipTrackEmpty, accessibilityRole: "button", accessibilityLabel: "Add blank scene", children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 16, color: "#8B8B96" }),
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 16, color: theme.edInk3 }),
           /* @__PURE__ */ jsx(Text, { style: styles.clipTrackEmptyLabel, children: "Blank scene" })
         ] }) : timeline.clips.map((clip, index) => {
           const active = clip.id === selectedClipId;
@@ -1517,7 +1556,7 @@ function TimelineTrack({
           return /* @__PURE__ */ jsxs(Pressable, { onPress: () => onSelectClip(clip.id), style: [styles.clipBlock, active && styles.clipBlockActive], children: [
             clip.type === "image" ? /* @__PURE__ */ jsx(Image, { source: {
               uri: clip.src
-            }, style: StyleSheet.absoluteFill, contentFit: "cover" }) : /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, styles.mediaThumbVideo], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "play", size: 14, color: "#9A9AA5" }) }),
+            }, style: StyleSheet.absoluteFill, contentFit: "cover" }) : /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, styles.mediaThumbVideo], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "play", size: 14, color: theme.edInk2 }) }),
             /* @__PURE__ */ jsxs(View, { style: styles.clipMeta, children: [
               /* @__PURE__ */ jsx(Text, { style: styles.clipMetaText, children: index + 1 }),
               /* @__PURE__ */ jsxs(Text, { style: styles.clipMetaText, children: [
@@ -1530,44 +1569,44 @@ function TimelineTrack({
       ] }),
       compact ? null : /* @__PURE__ */ jsxs(View, { style: styles.laneRow, children: [
         /* @__PURE__ */ jsxs(View, { style: styles.laneGutter, children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-outline", size: 14, color: "#9A9AA5" }),
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-outline", size: 14, color: theme.edInk2 }),
           /* @__PURE__ */ jsx(Text, { style: styles.laneLabel, children: "Overlay" })
         ] }),
         /* @__PURE__ */ jsx(View, { style: styles.laneBody })
       ] }),
       compact && texts.length === 0 ? null : /* @__PURE__ */ jsxs(View, { style: styles.laneRow, children: [
         /* @__PURE__ */ jsxs(View, { style: styles.laneGutter, children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "format-title", size: 14, color: "#8B8B96" }),
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "format-title", size: 14, color: theme.edInk3 }),
           /* @__PURE__ */ jsx(Text, { style: styles.laneLabel, children: "Text" })
         ] }),
         /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.laneBody, children: /* @__PURE__ */ jsx(View, { style: styles.textTrack, children: texts.map((t) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => onSelectText(t.id), style: [styles.textPill, t.id === selectedTextId && styles.textPillActive], children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "format-text", size: 11, color: "#F7F7FA" }),
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "format-text", size: 11, color: theme.edInk }),
           /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.textPillLabel, children: t.text })
         ] }, t.id)) }) })
       ] }),
       compact && !hasAudio ? null : /* @__PURE__ */ jsxs(View, { style: styles.laneRow, children: [
         /* @__PURE__ */ jsxs(View, { style: styles.laneGutter, children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "music-note", size: 14, color: "#9A9AA5" }),
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "music-note", size: 14, color: theme.edInk2 }),
           /* @__PURE__ */ jsx(Text, { style: styles.laneLabel, children: "Audio" })
         ] }),
         /* @__PURE__ */ jsxs(View, { style: styles.laneBody, children: [
           timeline.voiceover ? /* @__PURE__ */ jsxs(View, { style: styles.voTrack, children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "account-voice", size: 11, color: "#DCD6FF" }),
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "account-voice", size: 11, color: theme.edAccent }),
             /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.voTrackLabel, children: timeline.voiceover.voiceLabel || "Voiceover" })
           ] }) : null,
           timeline.soundtrack ? /* @__PURE__ */ jsxs(View, { style: styles.voTrack, children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "music-note", size: 11, color: "#DCD6FF" }),
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "music-note", size: 11, color: theme.edAccent }),
             /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.voTrackLabel, children: timeline.soundtrack.title || "Soundtrack" })
           ] }) : null,
           sceneAudio.map((a) => /* @__PURE__ */ jsxs(View, { style: styles.voTrack, children: [
-            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "waveform", size: 11, color: "#DCD6FF" }),
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "waveform", size: 11, color: theme.edAccent }),
             /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.voTrackLabel, children: a.label || "Scene audio" })
           ] }, a.id))
         ] })
       ] }),
       compact && segments.length === 0 ? null : /* @__PURE__ */ jsxs(View, { style: styles.laneRow, children: [
         /* @__PURE__ */ jsxs(View, { style: styles.laneGutter, children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-split-horizontal", size: 14, color: "#8B8B96" }),
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-split-horizontal", size: 14, color: theme.edInk3 }),
           /* @__PURE__ */ jsx(Text, { style: styles.laneLabel, children: "Segment" })
         ] }),
         /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.laneBody, children: /* @__PURE__ */ jsx(View, { style: styles.textTrack, children: segments.map((seg) => /* @__PURE__ */ jsx(Pressable, { onPress: () => onSelectSegment(seg.id), style: [styles.textPill, seg.id === selectedSegmentId && styles.textPillActive], children: /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.textPillLabel, children: seg.name }) }, seg.id)) }) })
@@ -1586,6 +1625,8 @@ function TrimPanel({
   canMoveRight
 }) {
   var _a, _b;
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const [trackW, setTrackW] = useState(1);
   const source = sourceSec && sourceSec > 0 ? sourceSec : null;
   const end = (_a = clip.trimEndSec) != null ? _a : source;
@@ -1634,7 +1675,7 @@ function TrimPanel({
       /* @__PURE__ */ jsx(IconChip, { icon: "arrow-left", disabled: !canMoveLeft, onPress: () => onMove(-1), label: "Move left" }),
       /* @__PURE__ */ jsx(IconChip, { icon: "arrow-right", disabled: !canMoveRight, onPress: () => onMove(1), label: "Move right" }),
       /* @__PURE__ */ jsxs(Pressable, { onPress: onRemove, style: styles.chip, accessibilityRole: "button", children: [
-        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "trash-can-outline", size: 14, color: "#FF6B6B" }),
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "trash-can-outline", size: 14, color: theme.edDanger }),
         /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipDanger], children: "Remove" })
       ] })
     ] })
@@ -1646,7 +1687,9 @@ function IconChip({
   disabled,
   onPress
 }) {
-  return /* @__PURE__ */ jsx(Pressable, { onPress, disabled, style: [styles.chip, disabled && styles.chipDisabled], accessibilityRole: "button", accessibilityLabel: label, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 14, color: "#F7F7FA" }) });
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
+  return /* @__PURE__ */ jsx(Pressable, { onPress, disabled, style: [styles.chip, disabled && styles.chipDisabled], accessibilityRole: "button", accessibilityLabel: label, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 14, color: theme.edInk }) });
 }
 function Stepper({
   label,
@@ -1654,11 +1697,13 @@ function Stepper({
   onLess,
   onMore
 }) {
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   return /* @__PURE__ */ jsxs(View, { style: styles.stepper, children: [
     /* @__PURE__ */ jsx(Text, { style: styles.stepperLabel, children: label }),
-    /* @__PURE__ */ jsx(Pressable, { onPress: onLess, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: `${label} less`, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "minus", size: 15, color: "#F7F7FA" }) }),
+    /* @__PURE__ */ jsx(Pressable, { onPress: onLess, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: `${label} less`, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "minus", size: 15, color: theme.edInk }) }),
     /* @__PURE__ */ jsx(Text, { style: styles.stepperValue, children: value }),
-    /* @__PURE__ */ jsx(Pressable, { onPress: onMore, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: `${label} more`, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 15, color: "#F7F7FA" }) })
+    /* @__PURE__ */ jsx(Pressable, { onPress: onMore, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: `${label} more`, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 15, color: theme.edInk }) })
   ] });
 }
 function parseVoices(result) {
@@ -1693,6 +1738,8 @@ function VoicePanel({
   onNotice
 }) {
   var _a;
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const [sceneOnly, setSceneOnly] = useState(false);
   const [voices, setVoices] = useState([]);
   const [voice, setVoice] = useState(null);
@@ -1818,7 +1865,7 @@ function VoicePanel({
     }).catch((err) => onNotice(friendlyMediaError(err, "voiceover"))).finally(() => setBusy(null));
   };
   return /* @__PURE__ */ jsxs(ScrollView, { style: styles.voiceScroll, keyboardShouldPersistTaps: "handled", children: [
-    /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.panelRow, children: voices.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Loading voices\u2026" }) : voices.map((v) => {
+    /* @__PURE__ */ jsx(ScrollView, { style: HSCROLL, horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.panelRow, children: voices.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Loading voices\u2026" }) : voices.map((v) => {
       const active = (voice == null ? void 0 : voice.id) === v.id;
       return /* @__PURE__ */ jsx(Pressable, { onPress: () => setVoice(v), style: [styles.chip, active && styles.chipActive], accessibilityRole: "button", accessibilityState: {
         selected: active
@@ -1827,11 +1874,11 @@ function VoicePanel({
         v.label
       ] }) }, `${v.profile ? "p" : "v"}-${v.id}`);
     }) }),
-    /* @__PURE__ */ jsx(TextInput, { value: instruct, onChangeText: setInstruct, placeholder: "Direction (optional) - calm, warm, excited\u2026", placeholderTextColor: "#5A5A66", style: styles.voiceInstruct, selectionColor: "#8B7CFF" }),
-    /* @__PURE__ */ jsx(TextInput, { value: text, onChangeText: setText, placeholder: "What should the voice say?", placeholderTextColor: "#5A5A66", style: styles.voiceText, selectionColor: "#8B7CFF", multiline: true }),
+    /* @__PURE__ */ jsx(TextInput, { value: instruct, onChangeText: setInstruct, placeholder: "Direction (optional) - calm, warm, excited\u2026", placeholderTextColor: theme.edInk3, style: styles.voiceInstruct, selectionColor: theme.edAccent }),
+    /* @__PURE__ */ jsx(TextInput, { value: text, onChangeText: setText, placeholder: "What should the voice say?", placeholderTextColor: theme.edInk3, style: styles.voiceText, selectionColor: theme.edAccent, multiline: true }),
     /* @__PURE__ */ jsxs(View, { style: styles.panelRow, children: [
       canRecord ? /* @__PURE__ */ jsxs(Pressable, { onPress: () => toggleRecord("dictate"), style: [styles.chip, recording === "dictate" && styles.chipRecording], accessibilityRole: "button", accessibilityLabel: recording === "dictate" ? "Stop recording" : "Speak instead of typing", children: [
-        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: recording === "dictate" ? "stop-circle-outline" : "microphone", size: 14, color: recording === "dictate" ? "#FF8484" : "#F7F7FA" }),
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: recording === "dictate" ? "stop-circle-outline" : "microphone", size: 14, color: recording === "dictate" ? theme.edDanger : theme.edInk }),
         /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, recording === "dictate" && styles.chipDanger], children: recording === "dictate" ? "Stop" : "Speak" })
       ] }) : null,
       (selectedClip == null ? void 0 : selectedClip.type) === "video" ? /* @__PURE__ */ jsx(Pressable, { onPress: transcribeClip, style: styles.chip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: busy === "Transcribing" ? "Transcribing\u2026" : "From clip" }) }) : null,
@@ -1841,18 +1888,18 @@ function VoicePanel({
       /* @__PURE__ */ jsx(Pressable, { onPress: generate, disabled: !text.trim() || busy !== null, style: [styles.chip, styles.chipActive, (!text.trim() || busy !== null) && styles.chipDisabled], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipLabelActive], children: busy === "Generating" ? "Generating\u2026" : voiceover ? "Regenerate" : "Generate voiceover" }) })
     ] }),
     canRecord ? /* @__PURE__ */ jsxs(View, { style: styles.cloneBox, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.cloneTitle, children: "MY VOICE" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.cloneTitle, children: "My voice" }),
       cloneSample === null ? /* @__PURE__ */ jsxs(View, { style: styles.panelRow, children: [
         /* @__PURE__ */ jsxs(Pressable, { onPress: () => toggleRecord("clone"), style: [styles.chip, recording === "clone" && styles.chipRecording], accessibilityRole: "button", children: [
-          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: recording === "clone" ? "stop-circle-outline" : "microphone-plus", size: 14, color: recording === "clone" ? "#FF8484" : "#F7F7FA" }),
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: recording === "clone" ? "stop-circle-outline" : "microphone-plus", size: 14, color: recording === "clone" ? theme.edDanger : theme.edInk }),
           /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, recording === "clone" && styles.chipDanger], children: recording === "clone" ? "Stop" : "Record a sample" })
         ] }),
         /* @__PURE__ */ jsx(Text, { style: styles.cloneHint, children: "Read a sentence or two, naturally." })
       ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(TextInput, { value: cloneName, onChangeText: setCloneName, placeholder: "Name this voice - e.g. Me", placeholderTextColor: "#5A5A66", style: styles.voiceInstruct, selectionColor: "#8B7CFF" }),
+        /* @__PURE__ */ jsx(TextInput, { value: cloneName, onChangeText: setCloneName, placeholder: "Name this voice - e.g. Me", placeholderTextColor: theme.edInk3, style: styles.voiceInstruct, selectionColor: theme.edAccent }),
         /* @__PURE__ */ jsx(TextInput, { value: cloneSample.referenceText, onChangeText: (referenceText) => setCloneSample(__spreadProps(__spreadValues({}, cloneSample), {
           referenceText
-        })), placeholder: "What you said in the sample", placeholderTextColor: "#5A5A66", style: styles.voiceText, selectionColor: "#8B7CFF", multiline: true }),
+        })), placeholder: "What you said in the sample", placeholderTextColor: theme.edInk3, style: styles.voiceText, selectionColor: theme.edAccent, multiline: true }),
         /* @__PURE__ */ jsxs(View, { style: styles.panelRow, children: [
           /* @__PURE__ */ jsx(Pressable, { onPress: createCloneVoice, disabled: !cloneName.trim() || !cloneSample.referenceText.trim() || busy !== null, style: [styles.chip, styles.chipActive, (!cloneName.trim() || !cloneSample.referenceText.trim() || busy !== null) && styles.chipDisabled], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipLabelActive], children: busy === "Creating your voice" ? "Creating\u2026" : "Create my voice" }) }),
           /* @__PURE__ */ jsx(Pressable, { onPress: () => setCloneSample(null), style: styles.chip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.chipLabel, children: "Discard" }) })
@@ -1877,6 +1924,8 @@ function SoundtrackPanel({
   onSoundtrack,
   onNotice
 }) {
+  const theme = useCanvasTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const [prompt, setPrompt] = useState("");
   const [busy, setBusy] = useState(false);
   const generate = useCallback(async () => {
@@ -1904,7 +1953,7 @@ function SoundtrackPanel({
   }, [prompt, runAction, busy, totalSec, onSoundtrack, onNotice]);
   if (!runAction) return null;
   return /* @__PURE__ */ jsx(View, { style: styles.soundtrackSection, children: soundtrack ? /* @__PURE__ */ jsxs(View, { style: styles.panelRow, children: [
-    /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "music-note", size: 14, color: "#8B7CFF" }),
+    /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "music-note", size: 14, color: theme.edAccent }),
     /* @__PURE__ */ jsx(Text, { style: styles.soundtrackTitle, numberOfLines: 1, children: soundtrack.title || "Soundtrack" }),
     ["mix", "replace"].map((mode) => {
       const active = soundtrack.mode === mode;
@@ -1915,108 +1964,122 @@ function SoundtrackPanel({
     /* @__PURE__ */ jsx(Pressable, { onPress: () => onSoundtrack(null), style: styles.chip, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, styles.chipDanger], children: "Remove" }) })
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(View, { style: styles.panelRow, children: [
-      /* @__PURE__ */ jsx(TextInput, { value: prompt, onChangeText: setPrompt, style: [styles.textInput, styles.soundtrackInput], placeholder: "Soundtrack style - e.g. energetic Punjabi hip hop, heavy bassline", placeholderTextColor: "#5A5A66", selectionColor: "#8B7CFF", returnKeyType: "done", editable: !busy }),
+      /* @__PURE__ */ jsx(TextInput, { value: prompt, onChangeText: setPrompt, style: [styles.textInput, styles.soundtrackInput], placeholder: "Soundtrack style - e.g. energetic Punjabi hip hop, heavy bassline", placeholderTextColor: theme.edInk3, selectionColor: theme.edAccent, returnKeyType: "done", editable: !busy }),
       /* @__PURE__ */ jsx(Pressable, { onPress: () => void generate(), disabled: busy || !prompt.trim(), style: [styles.chip, prompt.trim() && !busy ? styles.chipActive : null], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, prompt.trim() && !busy ? styles.chipLabelActive : null], children: busy ? "Composing\u2026" : "Generate" }) })
     ] }),
     /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "An original track is composed for the whole cut - describe genre, mood, and energy." })
   ] }) });
 }
-const styles = StyleSheet.create({
+const makeStyles = themedStyles((theme) => StyleSheet.create({
   root: {
     flex: 1,
-    backgroundColor: "#101013"
+    backgroundColor: theme.edPanel
   },
   header: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
-    height: 52,
-    paddingHorizontal: 14,
+    gap: SPACE.xs,
+    height: 56,
+    paddingHorizontal: SPACE.sm,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#26262c",
-    backgroundColor: "#17171b"
+    borderBottomColor: theme.edLine,
+    backgroundColor: theme.edPanel
+  },
+  headerCloseBtn: {
+    width: HIT,
+    height: HIT,
+    borderRadius: RADIUS.pill,
+    alignItems: "center",
+    justifyContent: "center"
   },
   headerCopy: {
     flex: 1,
     minWidth: 0,
-    gap: 2
+    gap: 2,
+    paddingHorizontal: SPACE.xs
   },
   headerProject: {
-    color: "#F2F2F5",
+    color: theme.edInk,
     fontSize: 16,
+    lineHeight: 20,
     fontWeight: "600"
   },
   headerSaved: {
-    color: "#C8C8D0",
-    fontSize: 12,
+    color: theme.edInk2,
+    fontSize: 11,
+    lineHeight: 14,
     fontWeight: "600"
   },
   headerSavedDim: {
-    color: "#8B8B96",
+    color: theme.edInk3,
     fontWeight: "500"
   },
   headerGhostBtn: {
-    paddingHorizontal: 8,
-    paddingVertical: 8,
-    minHeight: 44,
+    minWidth: HIT,
+    minHeight: HIT,
+    paddingHorizontal: SPACE.sm,
+    borderRadius: RADIUS.pill,
+    alignItems: "center",
     justifyContent: "center"
   },
-  headerGhost: {
-    color: "#E8E8EE",
-    fontSize: 14,
-    fontWeight: "600"
-  },
+  headerGhost: __spreadValues({
+    color: theme.edInk
+  }, TYPE.label),
   headerSpacer: {
     flex: 1,
     minWidth: 8
   },
   exportBtn: {
-    paddingHorizontal: 12,
-    paddingVertical: 7,
-    borderRadius: 8,
-    backgroundColor: "#E8E8EE"
+    minHeight: 36,
+    paddingHorizontal: SPACE.lg,
+    marginLeft: SPACE.xs,
+    borderRadius: RADIUS.pill,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.primary
   },
   exportBtnLabel: {
-    color: "#101013",
-    fontSize: 13,
+    color: theme.primaryForeground,
+    fontSize: 14,
+    lineHeight: 18,
     fontWeight: "700"
   },
   projectsPane: {
-    gap: 10
+    gap: SPACE.sm
   },
   projectActions: {
     flexDirection: "row",
-    gap: 8
+    gap: SPACE.sm
   },
   solidBtn: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
     gap: 6,
-    minHeight: 44,
-    paddingHorizontal: 14,
-    borderRadius: 10,
-    backgroundColor: "#F2F2F5"
+    minHeight: HIT,
+    paddingHorizontal: SPACE.lg,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edInk
   },
   solidBtnLabel: {
-    color: "#101013",
+    color: theme.edOnInk,
     fontSize: 14,
     fontWeight: "700"
   },
   projectRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-    paddingHorizontal: 10,
-    paddingVertical: 10,
-    borderRadius: 10,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "#32323a",
-    backgroundColor: "#1a1a20"
+    gap: SPACE.sm,
+    paddingHorizontal: SPACE.md,
+    paddingVertical: SPACE.md,
+    borderRadius: RADIUS.md,
+    borderWidth: 1,
+    borderColor: "transparent",
+    backgroundColor: theme.edRaised
   },
   projectRowOn: {
-    borderColor: "#5B6CFF",
-    backgroundColor: "#1c2440"
+    borderColor: theme.edAccent,
+    backgroundColor: theme.edAccentSoft
   },
   projectRowCopy: {
     flex: 1,
@@ -2024,21 +2087,22 @@ const styles = StyleSheet.create({
     gap: 2
   },
   projectRowTitle: {
-    color: "#F2F2F5",
+    color: theme.edInk,
     fontSize: 14,
     fontWeight: "600"
   },
   projectRowMeta: {
-    color: "#8B8B96",
-    fontSize: 11
+    color: theme.edInk3,
+    fontSize: 12,
+    lineHeight: 16
   },
   renameInput: {
     flex: 1,
-    color: "#F2F2F5",
+    color: theme.edInk,
     fontSize: 14,
     paddingVertical: 4,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#5B6CFF"
+    borderBottomColor: theme.edAccent
   },
   stageEmptyCopy: {
     flex: 1,
@@ -2058,15 +2122,13 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     gap: 6,
-    minHeight: 44,
-    paddingHorizontal: 14,
-    borderRadius: 10,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "#3A3A44",
-    backgroundColor: "#1A1A20"
+    minHeight: HIT,
+    paddingHorizontal: SPACE.lg,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edRaisedHi
   },
   ghostBtnLabel: {
-    color: "#F2F2F5",
+    color: theme.edInk,
     fontSize: 14,
     fontWeight: "700"
   },
@@ -2085,11 +2147,11 @@ const styles = StyleSheet.create({
     bottom: 76,
     maxHeight: 360,
     zIndex: 40,
-    backgroundColor: "#17171b",
-    borderTopLeftRadius: 18,
-    borderTopRightRadius: 18,
+    backgroundColor: theme.edPanel,
+    borderTopLeftRadius: RADIUS.xl,
+    borderTopRightRadius: RADIUS.xl,
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "#2c2c34",
+    borderTopColor: theme.edLine,
     overflow: "hidden",
     shadowColor: "#000",
     shadowOpacity: 0.35,
@@ -2111,30 +2173,30 @@ const styles = StyleSheet.create({
   sheetHead: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-    paddingHorizontal: 14,
-    height: 44,
+    gap: SPACE.sm,
+    paddingLeft: SPACE.lg,
+    paddingRight: SPACE.sm,
+    height: 52,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#26262c"
+    borderBottomColor: theme.edLine
   },
-  sheetTitle: {
-    color: "#F2F2F5",
-    fontSize: 15,
-    fontWeight: "600",
+  sheetTitle: __spreadProps(__spreadValues({
+    color: theme.edInk
+  }, TYPE.title), {
     flex: 1
-  },
+  }),
   sheetNewBtn: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 10,
-    height: 30,
-    borderRadius: 8,
-    backgroundColor: "#F2F2F5"
+    gap: SPACE.xs,
+    paddingHorizontal: SPACE.md,
+    height: 32,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edInk
   },
   sheetNewBtnLabel: {
-    color: "#101013",
-    fontSize: 12,
+    color: theme.edOnInk,
+    fontSize: 13,
     fontWeight: "700"
   },
   dock: {
@@ -2142,26 +2204,26 @@ const styles = StyleSheet.create({
     flexShrink: 0,
     maxHeight: 76,
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "#26262c",
-    backgroundColor: "#141418"
+    borderTopColor: theme.edLine,
+    backgroundColor: theme.edPanel
   },
   dockInner: {
     flexDirection: "row",
     alignItems: "center",
-    paddingHorizontal: 8,
-    gap: 6,
-    paddingTop: 8
+    paddingHorizontal: SPACE.sm,
+    gap: SPACE.xs,
+    paddingTop: SPACE.sm
   },
   dockTab: {
-    minWidth: 68,
+    minWidth: 64,
     alignItems: "center",
-    gap: 4,
-    paddingVertical: 8,
-    paddingHorizontal: 6,
-    borderRadius: 12
+    gap: SPACE.xs,
+    paddingVertical: 6,
+    paddingHorizontal: SPACE.sm,
+    borderRadius: RADIUS.md
   },
   dockTabOn: {
-    backgroundColor: "#243a5e"
+    backgroundColor: theme.edRaisedHi
   },
   recordPane: {
     gap: 8
@@ -2169,60 +2231,61 @@ const styles = StyleSheet.create({
   recordRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
+    gap: SPACE.md,
     minHeight: 52,
-    paddingHorizontal: 10,
-    borderRadius: 12,
-    backgroundColor: "#1A1A20",
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "#32323A"
+    paddingHorizontal: SPACE.md,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edRaised
   },
   recordError: {
-    color: "#FECACA",
+    color: theme.edDanger,
     fontSize: 13,
     lineHeight: 18,
-    padding: 10,
-    borderRadius: 10,
-    backgroundColor: "rgba(248, 113, 113, 0.12)"
+    padding: SPACE.md,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edDangerSoft
   },
   dockRecord: {
     minWidth: 72
   },
   dockRecordOn: {
-    backgroundColor: "rgba(248, 113, 113, 0.16)"
+    backgroundColor: theme.edDangerSoft
   },
   dockRecordLabel: {
-    color: "#FECACA"
+    color: theme.edDanger
   },
   dockRule: {
     width: StyleSheet.hairlineWidth,
     height: 28,
-    backgroundColor: "#32323A",
+    backgroundColor: theme.edRaisedHi,
     marginHorizontal: 4
   },
   dockLabel: {
-    color: "#8B8B96",
-    fontSize: 10,
+    color: theme.edInk3,
+    fontSize: 11,
+    lineHeight: 14,
     fontWeight: "600"
   },
   dockLabelOn: {
-    color: "#F2F2F5"
+    color: theme.edInk
   },
   captionRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-    paddingVertical: 10,
+    gap: SPACE.sm,
+    minHeight: HIT,
+    paddingVertical: SPACE.sm,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#26262c"
+    borderBottomColor: theme.edLine
   },
   captionRowText: {
     flex: 1,
-    color: "#F2F2F5",
-    fontSize: 14
+    color: theme.edInk,
+    fontSize: 14,
+    lineHeight: 20
   },
   captionRowMeta: {
-    color: "#8B8B96",
+    color: theme.edInk3,
     fontSize: 11,
     fontVariant: ["tabular-nums"]
   },
@@ -2230,17 +2293,17 @@ const styles = StyleSheet.create({
     maxHeight: 268
   },
   sidePaneInner: {
-    paddingBottom: 20
+    paddingBottom: SPACE.xl
   },
   stageCol: {
     flex: 1,
     minHeight: 0,
-    backgroundColor: "#101013"
+    backgroundColor: theme.edPanel
   },
   stageWell: {
     flex: 1,
-    backgroundColor: "#08080a",
-    padding: 10,
+    backgroundColor: theme.edWell,
+    padding: SPACE.md,
     minHeight: 0,
     position: "relative"
   },
@@ -2248,20 +2311,20 @@ const styles = StyleSheet.create({
     flex: 1,
     overflow: "hidden",
     backgroundColor: "#000000",
-    borderRadius: 2
+    borderRadius: RADIUS.sm
   },
   stageEmpty: {
     flex: 1,
     position: "relative"
   },
-  stageEmptyTitle: {
-    color: "#E8E8EE",
-    fontSize: 15,
-    fontWeight: "600"
-  },
+  stageEmptyTitle: __spreadProps(__spreadValues({
+    color: theme.edInk
+  }, TYPE.title), {
+    textAlign: "center"
+  }),
   stageEmptyDetail: {
-    color: "#7A7A88",
-    fontSize: 12.5,
+    color: theme.edInk3,
+    fontSize: 13,
     textAlign: "center",
     lineHeight: 18
   },
@@ -2275,16 +2338,16 @@ const styles = StyleSheet.create({
     maxWidth: 160,
     paddingHorizontal: 10,
     paddingVertical: 5,
-    borderRadius: 8,
+    borderRadius: RADIUS.sm,
     backgroundColor: "rgba(10, 10, 12, 0.55)",
     borderWidth: 1,
     borderColor: "transparent"
   },
   stageTextActive: {
-    borderColor: "#8B7CFF"
+    borderColor: theme.edAccent
   },
   stageTextLabel: {
-    color: "#F7F7FA",
+    color: "#f7f7fa",
     fontSize: 15,
     fontWeight: "600"
   },
@@ -2299,20 +2362,22 @@ const styles = StyleSheet.create({
     opacity: 0.3
   },
   transportTime: {
-    color: "#F7F7FA",
-    fontSize: 12.5,
-    fontVariant: ["tabular-nums"]
+    color: theme.edInk,
+    fontSize: 12,
+    fontWeight: "600",
+    fontVariant: ["tabular-nums"],
+    marginLeft: SPACE.xs
   },
   transportTimeDim: {
-    color: "#7A7A88"
+    color: theme.edInk3
   },
   timeline: {
     height: 200,
     flexGrow: 0,
     flexShrink: 0,
-    backgroundColor: "#17171b",
+    backgroundColor: theme.edPanel,
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "#26262c"
+    borderTopColor: theme.edLine
   },
   timelineCompact: {
     height: 128
@@ -2321,27 +2386,30 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     height: 52,
-    paddingHorizontal: 6,
+    paddingHorizontal: SPACE.sm,
+    gap: 2,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#26262c"
+    borderBottomColor: theme.edLine
   },
   timelineIconBtn: {
     width: 40,
     height: 40,
+    borderRadius: RADIUS.pill,
     alignItems: "center",
     justifyContent: "center"
   },
   transportBtn: {
     width: 40,
     height: 40,
+    borderRadius: RADIUS.pill,
     alignItems: "center",
     justifyContent: "center"
   },
   transportPlay: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    backgroundColor: "#F2F2F5",
+    width: HIT,
+    height: HIT,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edInk,
     alignItems: "center",
     justifyContent: "center",
     marginHorizontal: 4
@@ -2349,33 +2417,33 @@ const styles = StyleSheet.create({
   timelineRule: {
     width: StyleSheet.hairlineWidth,
     height: 16,
-    backgroundColor: "#26262c",
+    backgroundColor: theme.edRaisedHi,
     marginHorizontal: 4
   },
   segmentMenu: {
-    paddingHorizontal: 10,
-    paddingBottom: 8,
+    paddingHorizontal: SPACE.md,
+    paddingBottom: SPACE.sm,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#26262c",
+    borderBottomColor: theme.edLine,
     gap: 2
   },
   segmentMenuRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-    paddingVertical: 6
+    gap: SPACE.md,
+    minHeight: HIT,
+    paddingVertical: 6,
+    borderRadius: RADIUS.sm
   },
   segmentMenuCopy: {
     flex: 1,
     minWidth: 0
   },
-  segmentMenuLabel: {
-    color: "#F2F2F5",
-    fontSize: 13,
-    fontWeight: "600"
-  },
+  segmentMenuLabel: __spreadValues({
+    color: theme.edInk
+  }, TYPE.label),
   segmentMenuHint: {
-    color: "#8B8B96",
+    color: theme.edInk3,
     fontSize: 11
   },
   timelineBarActions: {
@@ -2387,17 +2455,17 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     height: 56,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#26262c"
+    borderBottomColor: theme.edLine
   },
   laneGutter: {
-    width: 108,
+    width: 96,
     flexDirection: "row",
     alignItems: "center",
     gap: 6,
-    paddingHorizontal: 8,
+    paddingHorizontal: SPACE.sm,
     borderRightWidth: StyleSheet.hairlineWidth,
-    borderRightColor: "#26262c",
-    backgroundColor: "#17171b"
+    borderRightColor: theme.edLine,
+    backgroundColor: theme.edPanel
   },
   laneBody: {
     flex: 1,
@@ -2407,11 +2475,10 @@ const styles = StyleSheet.create({
     paddingBottom: 4
   },
   laneLabel: {
-    color: "#9A9AA5",
-    fontSize: 10,
-    fontWeight: "700",
-    letterSpacing: 0.6,
-    textTransform: "uppercase"
+    color: theme.edInk2,
+    fontSize: 11,
+    lineHeight: 14,
+    fontWeight: "600"
   },
   textTrack: {
     flexDirection: "row",
@@ -2422,20 +2489,21 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 5,
-    paddingHorizontal: 9,
-    paddingVertical: 4,
-    borderRadius: 7,
-    backgroundColor: "#2A2440",
+    paddingHorizontal: SPACE.sm,
+    paddingVertical: SPACE.xs,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edAccentSoft,
     borderWidth: 1,
     borderColor: "transparent",
     maxWidth: 150
   },
   textPillActive: {
-    borderColor: "#8B7CFF"
+    borderColor: theme.edAccent
   },
   textPillLabel: {
-    color: "#DCD6FF",
-    fontSize: 11.5
+    color: theme.edAccent,
+    fontSize: 11,
+    fontWeight: "600"
   },
   clipTrack: {
     flexDirection: "row",
@@ -2446,31 +2514,31 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 8,
-    margin: 8,
-    paddingHorizontal: 12,
+    margin: SPACE.sm,
+    paddingHorizontal: SPACE.md,
     height: 40,
-    borderRadius: 8,
+    borderRadius: RADIUS.sm,
     borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "#3A3A44",
+    borderColor: theme.edLineHi,
     borderStyle: "dashed",
-    backgroundColor: "#1A1A20"
+    backgroundColor: theme.edRaised
   },
   clipTrackEmptyLabel: {
-    color: "#8B8B96",
+    color: theme.edInk3,
     fontSize: 13,
     fontWeight: "600"
   },
   clipBlock: {
     width: 96,
     height: 56,
-    borderRadius: 9,
+    borderRadius: RADIUS.sm,
     overflow: "hidden",
-    backgroundColor: "#16161A",
-    borderWidth: 1.5,
+    backgroundColor: theme.edRaised,
+    borderWidth: 2,
     borderColor: "transparent"
   },
   clipBlockActive: {
-    borderColor: "#8B7CFF"
+    borderColor: theme.edInk
   },
   clipMeta: {
     position: "absolute",
@@ -2484,102 +2552,99 @@ const styles = StyleSheet.create({
     backgroundColor: "rgba(10, 10, 12, 0.6)"
   },
   clipMetaText: {
-    color: "#E8E8EE",
-    fontSize: 9.5,
+    color: "#ffffff",
+    fontSize: 10,
+    fontWeight: "600",
     fontVariant: ["tabular-nums"]
   },
   panel: {
     flex: 1,
     minHeight: 0,
-    paddingHorizontal: 10,
-    paddingVertical: 10
+    paddingHorizontal: SPACE.lg,
+    paddingVertical: SPACE.md
   },
   mediaPane: {
-    gap: 12
+    gap: SPACE.md
   },
   pickRow: {
     flexDirection: "row",
-    gap: 8
+    gap: SPACE.sm
   },
   pickBtn: {
     flex: 1,
     alignItems: "center",
     gap: 6,
-    paddingVertical: 12,
-    borderRadius: 12,
-    backgroundColor: "#222228",
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "#32323a"
+    paddingVertical: SPACE.md,
+    borderRadius: RADIUS.lg,
+    backgroundColor: theme.edRaised
   },
   pickBtnLabel: {
-    color: "#E8E8EE",
+    color: theme.edInk,
     fontSize: 12,
     fontWeight: "600"
   },
   dropzone: {
     alignItems: "center",
     gap: 4,
-    paddingVertical: 22,
-    paddingHorizontal: 10,
-    borderRadius: 12,
+    paddingVertical: SPACE.xl,
+    paddingHorizontal: SPACE.md,
+    borderRadius: RADIUS.lg,
     borderWidth: 1,
     borderStyle: "dashed",
-    borderColor: "rgba(255,255,255,0.18)",
-    backgroundColor: "#16161A"
-  },
-  dropzoneTitle: {
-    color: "#F7F7FA",
-    fontSize: 13,
-    fontWeight: "600"
+    borderColor: theme.edTint(0.18),
+    backgroundColor: theme.edPanel
   },
+  dropzoneTitle: __spreadValues({
+    color: theme.edInk
+  }, TYPE.label),
   dropzoneHint: {
-    color: "#7A7A88",
+    color: theme.edInk3,
     fontSize: 11,
     textAlign: "center"
   },
   mediaGrid: {
     flexDirection: "row",
     flexWrap: "wrap",
-    gap: 8,
-    paddingBottom: 16
+    gap: SPACE.sm,
+    paddingBottom: SPACE.lg
   },
   panelRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-    paddingVertical: 4
+    flexWrap: "wrap",
+    gap: SPACE.sm,
+    paddingVertical: SPACE.xs
   },
   panelEmpty: {
-    color: "#7A7A88",
+    color: theme.edInk3,
     fontSize: 13
   },
   panelHint: {
-    color: "#7A7A88",
-    fontSize: 11.5,
-    marginTop: 6
+    color: theme.edInk3,
+    fontSize: 12,
+    lineHeight: 16,
+    marginTop: SPACE.sm
   },
   panelBar: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    marginBottom: 8
-  },
-  panelBarTitle: {
-    color: "#C8C8D0",
-    fontSize: 11,
-    fontWeight: "700",
-    letterSpacing: 0.6,
-    textTransform: "uppercase"
+    marginBottom: SPACE.sm
   },
+  panelBarTitle: __spreadValues({
+    color: theme.edInk
+  }, TYPE.label),
   panelBarBtn: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 8,
-    paddingVertical: 5
+    gap: SPACE.xs,
+    paddingHorizontal: SPACE.md,
+    paddingVertical: 6,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edRaised
   },
   panelBarBtnLabel: {
-    color: "#F7F7FA",
+    color: theme.edInk,
     fontSize: 12,
     fontWeight: "600"
   },
@@ -2591,8 +2656,8 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12
   },
   templatesPane: {
-    gap: 10,
-    paddingBottom: 12
+    gap: SPACE.md,
+    paddingBottom: SPACE.md
   },
   generateField: {
     flexDirection: "row",
@@ -2603,31 +2668,31 @@ const styles = StyleSheet.create({
     paddingTop: 12,
     paddingBottom: 10,
     gap: 10,
-    borderRadius: 12,
-    backgroundColor: "#141418",
+    borderRadius: RADIUS.lg,
+    backgroundColor: theme.edRaised,
     borderWidth: 1,
-    borderColor: "#2E2E38"
+    borderColor: theme.edLine
   },
   generateIcon: {
     marginTop: 2
   },
   generateInput: {
     flex: 1,
-    color: "#F2F2F5",
+    color: theme.edInk,
     fontSize: 16,
     lineHeight: 22,
     minHeight: 64,
     padding: 0
   },
   generateBtn: {
-    minHeight: 44,
-    borderRadius: 12,
-    backgroundColor: "#8B7CFF",
+    minHeight: HIT,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edAccent,
     alignItems: "center",
     justifyContent: "center"
   },
   generateBtnLabel: {
-    color: "#0A0A0C",
+    color: theme.edOnInk,
     fontSize: 15,
     fontWeight: "700"
   },
@@ -2639,14 +2704,14 @@ const styles = StyleSheet.create({
     paddingLeft: 12,
     paddingRight: 8,
     gap: 8,
-    borderRadius: 12,
-    backgroundColor: "#141418",
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edRaised,
     borderWidth: 1,
-    borderColor: "#2E2E38"
+    borderColor: theme.edLine
   },
   searchInput: {
     flex: 1,
-    color: "#F2F2F5",
+    color: theme.edInk,
     fontSize: 16,
     paddingVertical: 10
   },
@@ -2660,14 +2725,14 @@ const styles = StyleSheet.create({
     flex: 1
   },
   templateListInner: {
-    paddingHorizontal: 12,
-    paddingBottom: 16
+    paddingHorizontal: SPACE.lg,
+    paddingBottom: SPACE.lg
   },
   templateRow: {
     flexDirection: "row",
     alignItems: "flex-start",
-    gap: 8,
-    marginBottom: 10
+    gap: SPACE.md,
+    marginBottom: SPACE.lg
   },
   templateGrid: {
     flexDirection: "row",
@@ -2682,11 +2747,11 @@ const styles = StyleSheet.create({
   templateCover: {
     width: "100%",
     aspectRatio: 16 / 9,
-    borderRadius: 8,
-    backgroundColor: "#121216"
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edRaised
   },
   templateTitle: {
-    color: "#E8E8EE",
+    color: theme.edInk,
     fontSize: 12,
     fontWeight: "600",
     minHeight: 32
@@ -2703,14 +2768,12 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     gap: 4,
-    borderRadius: 8,
-    backgroundColor: "#2A2A32",
-    borderWidth: 1,
-    borderColor: "#3A3A44",
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edRaisedHi,
     paddingHorizontal: 4
   },
   templateGenerateLabel: {
-    color: "#F2F2F5",
+    color: theme.edInk,
     fontSize: 11,
     fontWeight: "600"
   },
@@ -2721,14 +2784,12 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     gap: 4,
-    borderRadius: 8,
-    backgroundColor: "#141418",
-    borderWidth: 1,
-    borderColor: "#2E2E38",
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edRaised,
     paddingHorizontal: 4
   },
   templatePreviewLabel: {
-    color: "#D8D8E0",
+    color: theme.edInk2,
     fontSize: 11,
     fontWeight: "600"
   },
@@ -2751,15 +2812,14 @@ const styles = StyleSheet.create({
     gap: 8
   },
   templatePreviewKicker: {
-    color: "#F2F2F5",
-    fontSize: 10,
-    fontWeight: "700",
-    letterSpacing: 0.3,
+    color: "#f7f7fa",
+    fontSize: 11,
+    fontWeight: "600",
     backgroundColor: "rgba(255,255,255,0.15)",
     overflow: "hidden",
     paddingHorizontal: 8,
     paddingVertical: 3,
-    borderRadius: 99
+    borderRadius: RADIUS.pill
   },
   templatePreviewBarTitle: {
     flex: 1,
@@ -2773,7 +2833,7 @@ const styles = StyleSheet.create({
     overflow: "hidden",
     paddingHorizontal: 6,
     paddingVertical: 2,
-    borderRadius: 4
+    borderRadius: RADIUS.sm / 2
   },
   templatePreviewHint: {
     color: "rgba(255,255,255,0.5)",
@@ -2784,7 +2844,7 @@ const styles = StyleSheet.create({
     minHeight: 220,
     overflow: "hidden",
     backgroundColor: "#000",
-    borderRadius: 4
+    borderRadius: RADIUS.md
   },
   templatePreviewMediaFill: {
     flex: 1,
@@ -2807,7 +2867,7 @@ const styles = StyleSheet.create({
     width: "100%",
     paddingTop: 10,
     paddingBottom: 16,
-    backgroundColor: "#17171b"
+    backgroundColor: theme.edPanel
   },
   loadMoreBtn: {
     width: "100%",
@@ -2816,36 +2876,34 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     gap: 8,
-    borderRadius: 12,
-    backgroundColor: "#E8E8EE"
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edInk
   },
   loadMoreBtnPressed: {
     opacity: 0.88
   },
   loadMoreBtnLabel: {
-    color: "#101013",
+    color: theme.edOnInk,
     fontSize: 16,
     fontWeight: "700"
   },
   templateFooterHint: {
-    color: "#6A6A74",
+    color: theme.edInk3,
     fontSize: 11,
     textAlign: "center",
     paddingVertical: 8
   },
   clipInspector: {
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "#26262c",
-    backgroundColor: "#141418",
-    paddingHorizontal: 12,
-    paddingVertical: 8,
+    borderTopColor: theme.edLine,
+    backgroundColor: theme.edPanel,
+    paddingHorizontal: SPACE.lg,
+    paddingVertical: SPACE.sm,
     gap: 6
   },
-  clipInspectorTitle: {
-    color: "#F2F2F5",
-    fontSize: 13,
-    fontWeight: "600"
-  },
+  clipInspectorTitle: __spreadValues({
+    color: theme.edInk
+  }, TYPE.label),
   busyOverlay: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
     zIndex: 80,
     backgroundColor: "rgba(8,8,10,0.62)",
@@ -2856,20 +2914,18 @@ const styles = StyleSheet.create({
   busyCard: {
     width: "100%",
     maxWidth: 320,
-    borderRadius: 16,
-    backgroundColor: "#1c1c22",
-    paddingHorizontal: 20,
-    paddingVertical: 22,
+    borderRadius: RADIUS.xl,
+    backgroundColor: theme.edRaised,
+    paddingHorizontal: SPACE.xl,
+    paddingVertical: SPACE.xl,
     alignItems: "center",
     gap: 10
   },
-  busyTitle: {
-    color: "#F7F7FA",
-    fontSize: 16,
-    fontWeight: "600"
-  },
+  busyTitle: __spreadValues({
+    color: theme.edInk
+  }, TYPE.title),
   busyDetail: {
-    color: "#A9A9B4",
+    color: theme.edInk2,
     fontSize: 13,
     textAlign: "center",
     lineHeight: 18
@@ -2878,22 +2934,22 @@ const styles = StyleSheet.create({
     marginTop: 6,
     width: "100%",
     height: 4,
-    borderRadius: 99,
-    backgroundColor: "#2c2c34",
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edRaisedHi,
     overflow: "hidden"
   },
   busyTrackFill: {
     width: "62%",
     height: "100%",
-    borderRadius: 99,
-    backgroundColor: "#7C8CFF"
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edAccent
   },
   sceneSwatch: {
     width: 36,
     height: 36,
-    borderRadius: 8,
+    borderRadius: RADIUS.sm,
     borderWidth: 1,
-    borderColor: "rgba(255,255,255,0.12)"
+    borderColor: theme.edTint(0.12)
   },
   logoPreview: {
     height: 48,
@@ -2917,41 +2973,39 @@ const styles = StyleSheet.create({
     justifyContent: "center"
   },
   stagePill: {
-    paddingHorizontal: 10,
+    paddingHorizontal: SPACE.md,
     paddingVertical: 6,
-    borderRadius: 999,
+    borderRadius: RADIUS.pill,
     backgroundColor: "rgba(10,10,12,0.72)"
   },
   stagePillOn: {
-    backgroundColor: "#8B7CFF"
+    backgroundColor: theme.edAccent
   },
   stagePillLabel: {
-    color: "#F7F7FA",
+    color: "#ffffff",
     fontSize: 11,
     fontWeight: "600"
   },
   stageToolRow: {
-    paddingHorizontal: 12,
+    paddingHorizontal: SPACE.md,
     paddingVertical: 6,
-    gap: 6,
+    gap: SPACE.sm,
     flexDirection: "row"
   },
   textPreset: {
     minWidth: 108,
-    paddingHorizontal: 12,
+    paddingHorizontal: SPACE.md,
     paddingVertical: 10,
-    borderRadius: 10,
-    backgroundColor: "#16161A",
-    borderWidth: 1,
-    borderColor: "rgba(255,255,255,0.08)"
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edRaised
   },
   textPresetSample: {
-    color: "#F7F7FA",
+    color: theme.edInk,
     fontSize: 15,
     fontWeight: "700"
   },
   textPresetLabel: {
-    color: "#7A7A88",
+    color: theme.edInk3,
     fontSize: 11,
     marginTop: 4
   },
@@ -2959,45 +3013,44 @@ const styles = StyleSheet.create({
     maxHeight: 240
   },
   voiceInstruct: {
-    color: "#F7F7FA",
+    color: theme.edInk,
     fontSize: 13,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 9,
-    backgroundColor: "#16161A",
+    paddingHorizontal: SPACE.md,
+    paddingVertical: SPACE.sm,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edRaised,
     marginTop: 6
   },
   voiceText: {
     minHeight: 64,
-    color: "#F7F7FA",
+    color: theme.edInk,
     fontSize: 13.5,
     lineHeight: 19,
-    padding: 12,
-    borderRadius: 9,
-    backgroundColor: "#16161A",
-    marginTop: 8,
+    padding: SPACE.md,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edRaised,
+    marginTop: SPACE.sm,
     textAlignVertical: "top"
   },
   chipRecording: {
-    backgroundColor: "rgba(255, 132, 132, 0.16)"
+    backgroundColor: theme.edDangerSoft
   },
   cloneBox: {
     marginTop: 10,
     paddingTop: 10,
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "rgba(255,255,255,0.08)",
+    borderTopColor: theme.edTint(0.08),
     gap: 4
   },
-  cloneTitle: {
-    color: "#8B7CFF",
-    fontSize: 10.5,
-    fontWeight: "700",
-    letterSpacing: 0.8,
+  cloneTitle: __spreadProps(__spreadValues({
+    color: theme.edInk
+  }, TYPE.label), {
     marginBottom: 2
-  },
+  }),
   cloneHint: {
-    color: "#7A7A88",
-    fontSize: 11.5,
+    color: theme.edInk3,
+    fontSize: 12,
+    lineHeight: 16,
     flexShrink: 1
   },
   voTrack: {
@@ -3009,7 +3062,7 @@ const styles = StyleSheet.create({
     marginBottom: 4
   },
   voTrackLabel: {
-    color: "#DCD6FF",
+    color: theme.edAccent,
     fontSize: 11
   },
   mediaTile: {
@@ -3017,29 +3070,29 @@ const styles = StyleSheet.create({
     height: 56
   },
   devicePick: {
-    borderRadius: 10,
+    borderRadius: RADIUS.sm,
     borderWidth: 1.5,
-    borderColor: "#2A2440",
+    borderColor: theme.edAccentSoft,
     borderStyle: "dashed",
     alignItems: "center",
     justifyContent: "center",
     gap: 3
   },
   devicePickLabel: {
-    color: "#8B7CFF",
-    fontSize: 10,
+    color: theme.edAccent,
+    fontSize: 11,
     fontWeight: "600"
   },
   mediaThumb: {
     width: 84,
     height: 56,
-    borderRadius: 8,
-    backgroundColor: "#16161A"
+    borderRadius: RADIUS.sm,
+    backgroundColor: theme.edRaised
   },
   mediaThumbVideo: {
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "#16161A"
+    backgroundColor: theme.edRaised
   },
   mediaAdd: {
     position: "absolute",
@@ -3048,7 +3101,7 @@ const styles = StyleSheet.create({
     width: 18,
     height: 18,
     borderRadius: 9,
-    backgroundColor: "#8B7CFF",
+    backgroundColor: theme.edAccent,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -3060,14 +3113,14 @@ const styles = StyleSheet.create({
   filterThumb: {
     width: 56,
     height: 56,
-    borderRadius: 10,
+    borderRadius: RADIUS.md,
     overflow: "hidden",
-    backgroundColor: "#16161A",
-    borderWidth: 1.5,
+    backgroundColor: theme.edRaised,
+    borderWidth: 2,
     borderColor: "transparent"
   },
   filterThumbActive: {
-    borderColor: "#8B7CFF"
+    borderColor: theme.edInk
   },
   filterNoneGlyph: {
     position: "absolute",
@@ -3075,52 +3128,54 @@ const styles = StyleSheet.create({
     top: 19
   },
   filterLabel: {
-    color: "#9A9AA5",
-    fontSize: 10.5
+    color: theme.edInk3,
+    fontSize: 11
   },
   filterLabelActive: {
-    color: "#F7F7FA",
+    color: theme.edInk,
     fontWeight: "600"
   },
   chip: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 5,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 9,
-    backgroundColor: "#1F1F24"
+    gap: 6,
+    minHeight: 36,
+    paddingHorizontal: SPACE.md,
+    paddingVertical: SPACE.sm,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edRaised
   },
   chipWide: {
     alignSelf: "flex-start"
   },
   chipActive: {
-    backgroundColor: "#8B7CFF"
+    backgroundColor: theme.edAccent
   },
   chipDisabled: {
     opacity: 0.35
   },
   chipLabel: {
-    color: "#F7F7FA",
-    fontSize: 12.5,
-    fontWeight: "500"
+    color: theme.edInk,
+    fontSize: 13,
+    fontWeight: "600"
   },
   chipLabelActive: {
-    color: "#0A0A0C"
+    color: theme.edOnInk
   },
   chipDanger: {
-    color: "#FF6B6B"
+    color: theme.edDanger
   },
   textInput: {
-    color: "#F7F7FA",
-    fontSize: 14,
-    paddingHorizontal: 12,
-    paddingVertical: 9,
-    borderRadius: 9,
-    backgroundColor: "#16161A"
+    color: theme.edInk,
+    fontSize: 15,
+    minHeight: HIT,
+    paddingHorizontal: SPACE.md,
+    paddingVertical: 10,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edRaised
   },
   soundtrackSection: {
-    marginTop: 10
+    marginTop: SPACE.md
   },
   soundtrackInput: {
     flex: 1,
@@ -3130,23 +3185,23 @@ const styles = StyleSheet.create({
     flexShrink: 1,
     fontSize: 12,
     fontWeight: "600",
-    color: "#F7F7FA"
+    color: theme.edInk
   },
   stepper: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 9,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 9,
-    backgroundColor: "#1F1F24"
+    gap: SPACE.sm,
+    paddingHorizontal: SPACE.md,
+    paddingVertical: 6,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edRaised
   },
   stepperLabel: {
-    color: "#9A9AA5",
-    fontSize: 11.5
+    color: theme.edInk2,
+    fontSize: 12
   },
   stepperValue: {
-    color: "#F7F7FA",
+    color: theme.edInk,
     fontSize: 12.5,
     fontVariant: ["tabular-nums"],
     minWidth: 34,
@@ -3154,8 +3209,8 @@ const styles = StyleSheet.create({
   },
   trimTrack: {
     height: 40,
-    borderRadius: 8,
-    backgroundColor: "#16161A",
+    borderRadius: RADIUS.sm,
+    backgroundColor: theme.edRaised,
     justifyContent: "center",
     marginBottom: 4
   },
@@ -3163,10 +3218,10 @@ const styles = StyleSheet.create({
     position: "absolute",
     top: 0,
     bottom: 0,
-    borderRadius: 8,
-    backgroundColor: "rgba(139, 124, 255, 0.28)",
+    borderRadius: RADIUS.sm,
+    backgroundColor: theme.edAccentSoft,
     borderWidth: 1.5,
-    borderColor: "#8B7CFF"
+    borderColor: theme.edAccent
   },
   trimHandle: {
     position: "absolute",
@@ -3180,18 +3235,19 @@ const styles = StyleSheet.create({
     width: 4,
     height: 22,
     borderRadius: 2,
-    backgroundColor: "#F7F7FA"
+    backgroundColor: theme.edInk
   },
   trimReadout: {
-    color: "#9A9AA5",
-    fontSize: 10.5,
+    color: theme.edInk2,
+    fontSize: 11,
     textAlign: "center",
     fontVariant: ["tabular-nums"]
   },
   toolbarScroll: {
     flexGrow: 0,
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "rgba(255,255,255,0.08)"
+    borderTopColor: theme.edLine,
+    backgroundColor: theme.edPanel
   },
   toolbar: {
     flexDirection: "row",
@@ -3203,39 +3259,42 @@ const styles = StyleSheet.create({
   },
   toolbarTab: {
     alignItems: "center",
-    gap: 3,
-    minWidth: 56,
-    paddingHorizontal: 6
+    gap: SPACE.xs,
+    minWidth: 60,
+    paddingHorizontal: 6,
+    paddingVertical: SPACE.xs,
+    borderRadius: RADIUS.md
   },
   toolbarLabel: {
-    color: "#C8C8D0",
-    fontSize: 10
+    color: theme.edInk3,
+    fontSize: 11,
+    fontWeight: "600"
   },
   toolbarLabelActive: {
-    color: "#8B7CFF",
-    fontWeight: "600"
+    color: theme.edInk
   },
   notice: {
     position: "absolute",
-    left: 20,
-    right: 20,
+    left: SPACE.lg,
+    right: SPACE.lg,
     bottom: 84,
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
-    paddingHorizontal: 14,
-    paddingVertical: 11,
-    borderRadius: 12,
-    backgroundColor: "rgba(248, 250, 252, 0.96)"
+    gap: SPACE.md,
+    paddingHorizontal: SPACE.lg,
+    paddingVertical: SPACE.md,
+    borderRadius: RADIUS.lg,
+    backgroundColor: theme.edInk
   },
   noticeText: {
     flex: 1,
-    color: "#0f172a",
-    fontSize: 13
+    color: theme.edOnInk,
+    fontSize: 13,
+    lineHeight: 18
   },
   noticeDismiss: {
-    color: "#6C5CE7",
+    color: theme.edAccent,
     fontSize: 13,
     fontWeight: "600"
   }
-});export{VideoEditorExperience,VideoEditorExperience as default};//# sourceMappingURL=VideoEditorExperience.js.map
+}));export{VideoEditorExperience,VideoEditorExperience as default};//# sourceMappingURL=VideoEditorExperience.js.map