@igorpache/expo-video-editor 0.1.0

package/src/native/VideoEditorModule.ts

@@ -0,0 +1,51 @@
+import { NativeModule, requireNativeModule } from 'expo';
+
+export type NativeOverlay = {
+  uri: string;
+  animated: boolean;
+  centerX: number;
+  centerY: number;
+  widthFraction: number;
+  heightFraction: number;
+  rotationDeg: number;
+};
+
+export type NativeAudio = {
+  uri: string;
+  trimStartMs: number;
+  trimEndMs: number;
+  volume: number;
+  loop: boolean;
+};
+
+export type NativeExportPayload = {
+  sourceUri: string;
+  startMs: number;
+  endMs: number;
+  imageDurationMs: number;
+  resolution: number;
+  bitrate: number;
+  colorMatrix: number[];
+  overlays: NativeOverlay[];
+  audio: NativeAudio | null;
+  originalVolume: number;
+};
+
+export type NativeExportResult = {
+  uri: string;
+  width: number;
+  height: number;
+  durationMs: number;
+};
+
+type VideoEditorModuleEvents = {
+  onExportProgress: (event: { progress: number }) => void;
+};
+
+declare class VideoEditorNativeModule extends NativeModule<VideoEditorModuleEvents> {
+  exportVideo(payload: NativeExportPayload): Promise<NativeExportResult>;
+  cancelExport(): void;
+  ping(): Promise<string>;
+}
+
+export default requireNativeModule<VideoEditorNativeModule>('ExpoVideoEditor');

package/src/overlays/captureRegistry.ts

@@ -0,0 +1,12 @@
+import type { View } from 'react-native';
+
+const refs = new Map<string, View>();
+
+export function registerOverlayRef(id: string, view: View | null): void {
+  if (view) refs.set(id, view);
+  else refs.delete(id);
+}
+
+export function getOverlayRef(id: string): View | undefined {
+  return refs.get(id);
+}

package/src/services/demoCatalog.ts

@@ -0,0 +1,30 @@
+import type { MusicCatalog, MusicQueryOptions, MusicTrack } from './musicCatalog';
+
+// Catálogo DEMO — faixas livres (SoundHelix) só para testar o fluxo/UX enquanto
+// não há provedor licenciado contratado. Substituir por createFeedfmCatalog
+// (ou outro provedor) setando EXPO_PUBLIC_MUSIC_TOKEN.
+const DEMO_TRACKS: MusicTrack[] = [
+  { id: 'demo-1', title: 'Song 1', artist: 'SoundHelix', durationSec: 372, previewUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3', audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3' },
+  { id: 'demo-2', title: 'Song 2', artist: 'SoundHelix', durationSec: 425, previewUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3', audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3' },
+  { id: 'demo-3', title: 'Song 3', artist: 'SoundHelix', durationSec: 231, previewUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3', audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3' },
+  { id: 'demo-5', title: 'Song 5', artist: 'SoundHelix', durationSec: 302, previewUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3', audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3' },
+  { id: 'demo-8', title: 'Song 8', artist: 'SoundHelix', durationSec: 386, previewUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3', audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3' },
+  { id: 'demo-11', title: 'Song 11', artist: 'SoundHelix', durationSec: 336, previewUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-11.mp3', audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-11.mp3' },
+  { id: 'demo-15', title: 'Song 15', artist: 'SoundHelix', durationSec: 425, previewUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-15.mp3', audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-15.mp3' },
+  { id: 'demo-17', title: 'Song 17', artist: 'SoundHelix', durationSec: 356, previewUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-17.mp3', audioUrl: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-17.mp3' },
+];
+
+export function createDemoCatalog(): MusicCatalog {
+  return {
+    async trending(_opts?: MusicQueryOptions) {
+      return DEMO_TRACKS;
+    },
+    async search(query: string, _opts?: MusicQueryOptions) {
+      const q = query.trim().toLowerCase();
+      if (!q) return DEMO_TRACKS;
+      return DEMO_TRACKS.filter(
+        (t) => t.title.toLowerCase().includes(q) || (t.artist ?? '').toLowerCase().includes(q)
+      );
+    },
+  };
+}

package/src/services/exportService.ts

@@ -0,0 +1,199 @@
+import { captureRef } from 'react-native-view-shot';
+
+import { toEditorError } from '../errors';
+import { getFilterMatrix, isIdentityFilter } from '../filters/presets';
+import Native, { type NativeExportPayload, type NativeOverlay } from '../native/VideoEditorModule';
+import { getOverlayRef } from '../overlays/captureRegistry';
+import { useEditorStore } from '../state/store';
+import type { EditorState, ExportOptions, ExportResult } from '../types';
+import { downloadToCache } from './mediaCache';
+
+async function buildOverlayPayload(state: EditorState): Promise<NativeOverlay[]> {
+  if (!state.meta || state.overlays.length === 0) return [];
+  const { width: pw, height: ph } = useEditorStore.getState().previewSize;
+  if (pw <= 0 || ph <= 0) return [];
+
+  const result: NativeOverlay[] = [];
+  for (const ov of state.overlays) {
+    const baseW = ov.baseWidth ?? 0;
+    const baseH = ov.baseHeight ?? 0;
+    if (baseW <= 0 || baseH <= 0) continue;
+
+    let uri: string;
+    let animated: boolean;
+    if (ov.type === 'text') {
+      const ref = getOverlayRef(ov.id);
+      if (!ref) continue;
+      try {
+        uri = await captureRef(ref, { format: 'png', quality: 1, result: 'tmpfile' });
+      } catch {
+        continue;
+      }
+      animated = false;
+    } else {
+      try {
+        uri = await downloadToCache(ov.exportUri);
+      } catch {
+        continue;
+      }
+      animated = true;
+    }
+
+    result.push({
+      uri,
+      animated,
+      centerX: ov.transform.x,
+      centerY: ov.transform.y,
+      widthFraction: (baseW * ov.transform.scale) / pw,
+      heightFraction: (baseH * ov.transform.scale) / ph,
+      rotationDeg: (ov.transform.rotation * 180) / Math.PI,
+    });
+  }
+  return result;
+}
+
+function resolutionToHeight(resolution: ExportOptions['resolution']): number {
+  if (resolution === 'source') return 0;
+  if (resolution === 720) return 720;
+  return 1080;
+}
+
+// Rasteriza os overlays (view-shot do texto, download do GIF) em arquivos de
+// disco. Precisa das views montadas — chame ENQUANTO o editor estiver aberto.
+export async function captureOverlays(state: EditorState): Promise<NativeOverlay[]> {
+  return buildOverlayPayload(state);
+}
+
+// Encode nativo. Não depende de views RN (usa os arquivos já capturados), então
+// pode rodar em background depois do editor fechar.
+export async function runVideoExport(
+  state: EditorState,
+  overlays: NativeOverlay[],
+  options: ExportOptions = {},
+  onProgress?: (progress: number) => void
+): Promise<ExportResult> {
+  let audio: NativeExportPayload['audio'] = null;
+  if (state.audio) {
+    let uri = state.audio.uri;
+    if (/^https?:/i.test(uri)) {
+      try {
+        uri = await downloadToCache(uri);
+      } catch (e) {
+        throw toEditorError(e, 'AUDIO_LOAD');
+      }
+    }
+    audio = {
+      uri,
+      trimStartMs: Math.round(state.audio.trimStart * 1000),
+      trimEndMs: Math.round(state.audio.trimEnd * 1000),
+      volume: state.audio.volume,
+      loop: state.audio.loop,
+    };
+  }
+
+  const payload: NativeExportPayload = {
+    sourceUri: state.source.uri,
+    startMs: Math.round(state.trim.start * 1000),
+    endMs: Math.round(state.trim.end * 1000),
+    imageDurationMs: 0,
+    resolution: resolutionToHeight(options.resolution),
+    bitrate: options.bitrate ?? 0,
+    colorMatrix: isIdentityFilter(state.filter) ? [] : getFilterMatrix(state.filter),
+    overlays,
+    audio,
+    originalVolume: state.originalVolume,
+  };
+
+  const sub = onProgress
+    ? Native.addListener('onExportProgress', (e) => onProgress(e.progress))
+    : null;
+
+  try {
+    const r = await Native.exportVideo(payload);
+    return { uri: r.uri, width: r.width, height: r.height, duration: r.durationMs / 1000 };
+  } catch (e) {
+    throw toEditorError(e);
+  } finally {
+    sub?.remove();
+  }
+}
+
+export async function exportVideo(
+  state: EditorState,
+  options: ExportOptions = {},
+  onProgress?: (progress: number) => void
+): Promise<ExportResult> {
+  const overlays = await captureOverlays(state);
+  return runVideoExport(state, overlays, options, onProgress);
+}
+
+export type ImageVideoAudio = {
+  uri: string;
+  trimStartMs?: number;
+  trimEndMs?: number;
+  volume?: number;
+  loop?: boolean;
+};
+
+export type ExportImageVideoParams = {
+  imageUri: string;
+  durationMs: number;
+  audio?: ImageVideoAudio | null;
+  resolution?: ExportOptions['resolution'];
+};
+
+export async function exportImageVideo(
+  params: ExportImageVideoParams,
+  onProgress?: (progress: number) => void
+): Promise<ExportResult> {
+  const durationMs = Math.max(1, Math.round(params.durationMs));
+
+  let audio: NativeExportPayload['audio'] = null;
+  if (params.audio?.uri) {
+    let uri = params.audio.uri;
+    if (/^https?:/i.test(uri)) {
+      try {
+        uri = await downloadToCache(uri);
+      } catch (e) {
+        throw toEditorError(e, 'AUDIO_LOAD');
+      }
+    }
+    audio = {
+      uri,
+      trimStartMs: Math.round(params.audio.trimStartMs ?? 0),
+      trimEndMs: Math.round(params.audio.trimEndMs ?? 0),
+      volume: params.audio.volume ?? 1,
+      loop: params.audio.loop ?? true,
+    };
+  }
+
+  const payload: NativeExportPayload = {
+    sourceUri: params.imageUri,
+    startMs: 0,
+    endMs: durationMs,
+    imageDurationMs: durationMs,
+    resolution: resolutionToHeight(params.resolution),
+    bitrate: 0,
+    colorMatrix: [],
+    overlays: [],
+    audio,
+    originalVolume: 1,
+  };
+
+  const sub = onProgress
+    ? Native.addListener('onExportProgress', (e) => onProgress(e.progress))
+    : null;
+
+  try {
+    const r = await Native.exportVideo(payload);
+    return { uri: r.uri, width: r.width, height: r.height, duration: r.durationMs / 1000 };
+  } catch (e) {
+    throw toEditorError(e);
+  } finally {
+    sub?.remove();
+  }
+}
+
+export function cancelExport(): void {
+  Native.cancelExport();
+}

package/src/services/feedfmCatalog.ts

@@ -0,0 +1,44 @@
+import type { MusicCatalog, MusicQueryOptions, MusicTrack } from './musicCatalog';
+
+export type FeedfmConfig = {
+  token: string;
+  secret?: string;
+  baseUrl?: string;
+};
+
+/**
+ * Adapter Feed.fm (Feed Clips) — ESQUELETO.
+ *
+ * A parte que exige credenciais contratadas ainda NÃO está implementada de
+ * propósito: sem token/secret real do Feed.fm não há como validar os endpoints.
+ * Depois de contratar (feed.fm → Feed Clips / developer access):
+ *
+ *   1. Preencher `trending` e `search` chamando a Clips API com auth (token +
+ *      secret, geralmente Basic Auth ou signed request).
+ *   2. Mapear a resposta para `MusicTrack` (id, title, artist, previewUrl e
+ *      audioUrl — a signed URL do clipe que será baixada e mixada no vídeo).
+ *
+ * Docs: https://www.feed.fm/  (Feed Clips)
+ */
+export function createFeedfmCatalog(config: FeedfmConfig): MusicCatalog {
+  if (!config.token) {
+    throw new Error('Feed.fm: token ausente (EXPO_PUBLIC_MUSIC_TOKEN).');
+  }
+
+  const notImplemented = (): Promise<MusicTrack[]> => {
+    return Promise.reject(
+      new Error(
+        'Feed.fm Clips: adapter não implementado. Preencher endpoints/auth em feedfmCatalog.ts após contratar (ver PR).'
+      )
+    );
+  };
+
+  return {
+    trending(_opts?: MusicQueryOptions) {
+      return notImplemented();
+    },
+    search(_query: string, _opts?: MusicQueryOptions) {
+      return notImplemented();
+    },
+  };
+}

package/src/services/giphyClient.ts

@@ -0,0 +1,69 @@
+import { EditorError } from '../errors';
+
+const BASE = 'https://api.giphy.com/v1';
+
+export type GiphyKind = 'gifs' | 'stickers';
+
+export type GiphyItem = {
+  id: string;
+  previewUrl: string;
+  originalUrl: string;
+  width: number;
+  height: number;
+};
+
+type GiphyRendition = { url: string; width: string; height: string };
+type GiphyGif = { id: string; images: Record<string, GiphyRendition> };
+
+function mapItem(g: GiphyGif): GiphyItem {
+  const preview = g.images.fixed_width ?? g.images.downsized ?? g.images.original;
+  const original = g.images.original ?? preview;
+  return {
+    id: g.id,
+    previewUrl: preview.url,
+    originalUrl: original.url,
+    width: Number(original.width) || 1,
+    height: Number(original.height) || 1,
+  };
+}
+
+async function fetchGifs(path: string, params: Record<string, string>): Promise<GiphyItem[]> {
+  const url = `${BASE}${path}?${new URLSearchParams(params).toString()}`;
+  let res: Response;
+  try {
+    res = await fetch(url);
+  } catch (e) {
+    throw new EditorError('GIPHY_NETWORK', 'Giphy request failed', e);
+  }
+  if (!res.ok) throw new EditorError('GIPHY_NETWORK', `Giphy responded ${res.status}`);
+  const json = (await res.json()) as { data: GiphyGif[] };
+  return json.data.map(mapItem);
+}
+
+export function trendingGifs(
+  apiKey: string,
+  opts: { offset?: number; limit?: number; kind?: GiphyKind } = {}
+): Promise<GiphyItem[]> {
+  const { offset = 0, limit = 24, kind = 'gifs' } = opts;
+  return fetchGifs(`/${kind}/trending`, {
+    api_key: apiKey,
+    offset: String(offset),
+    limit: String(limit),
+    rating: 'pg-13',
+  });
+}
+
+export function searchGifs(
+  apiKey: string,
+  query: string,
+  opts: { offset?: number; limit?: number; kind?: GiphyKind } = {}
+): Promise<GiphyItem[]> {
+  const { offset = 0, limit = 24, kind = 'gifs' } = opts;
+  return fetchGifs(`/${kind}/search`, {
+    api_key: apiKey,
+    q: query,
+    offset: String(offset),
+    limit: String(limit),
+    rating: 'pg-13',
+  });
+}

package/src/services/mediaCache.ts

@@ -0,0 +1,18 @@
+import { File, Paths } from 'expo-file-system';
+
+function cacheName(url: string): string {
+  let h = 2166136261;
+  for (let i = 0; i < url.length; i++) {
+    h ^= url.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  const ext = url.split('?')[0].match(/\.[a-z0-9]{2,4}$/i)?.[0] ?? '';
+  return `evdl-${(h >>> 0).toString(36)}${ext}`;
+}
+
+export async function downloadToCache(url: string): Promise<string> {
+  const dest = new File(Paths.cache, cacheName(url));
+  if (dest.exists) return dest.uri;
+  const output = await File.downloadFileAsync(url, dest);
+  return output.uri;
+}

package/src/services/musicCatalog.ts

@@ -0,0 +1,23 @@
+export type MusicTrack = {
+  id: string;
+  title: string;
+  artist?: string;
+  durationSec?: number;
+  artworkUrl?: string;
+  /** URL de prévia (streamável) para o usuário ouvir antes de escolher. */
+  previewUrl: string;
+  /** URL do arquivo de áudio a ser baixado e sincronizado no vídeo exportado. */
+  audioUrl: string;
+};
+
+export type MusicQueryOptions = { limit?: number };
+
+/**
+ * Contrato agnóstico de provedor de música licenciada. Qualquer fonte (Feed.fm,
+ * Songclip, backend próprio) implementa esta interface e o editor consome sem
+ * saber de qual provedor veio.
+ */
+export interface MusicCatalog {
+  trending(opts?: MusicQueryOptions): Promise<MusicTrack[]>;
+  search(query: string, opts?: MusicQueryOptions): Promise<MusicTrack[]>;
+}

package/src/state/store.ts

@@ -0,0 +1,200 @@
+import { create } from 'zustand';
+
+import {
+  IDENTITY_TRANSFORM,
+  type AudioSource,
+  type AudioTrack,
+  type EditorState,
+  type Overlay,
+  type StickerOverlay,
+  type TextOverlay,
+  type VideoMeta,
+  type VideoSource,
+} from '../types';
+
+let overlayCounter = 0;
+const nextOverlayId = () => `ov_${Date.now().toString(36)}_${overlayCounter++}`;
+
+export type ActivePanel = 'none' | 'trim' | 'filter' | 'text' | 'giphy' | 'audio';
+
+export type EditorStore = {
+  source: VideoSource;
+  meta: VideoMeta | null;
+  trim: { start: number; end: number };
+  filter: string;
+  overlays: Overlay[];
+  audio: AudioTrack | null;
+  originalVolume: number;
+
+  playhead: number;
+  paused: boolean;
+  activePanel: ActivePanel;
+  exporting: boolean;
+  exportProgress: number;
+  seekTarget: number;
+  seekNonce: number;
+  previewSize: { width: number; height: number };
+  selectedOverlayId: string | null;
+  giphyApiKey: string | null;
+  audioPicker: (() => Promise<AudioSource | null>) | null;
+
+  init: (source: VideoSource) => void;
+  setMeta: (meta: VideoMeta) => void;
+  setTrim: (start: number, end: number) => void;
+  setFilter: (key: string) => void;
+  setPlayhead: (t: number) => void;
+  requestSeek: (t: number) => void;
+  setPaused: (paused: boolean) => void;
+  togglePlay: () => void;
+  setActivePanel: (panel: ActivePanel) => void;
+  setExporting: (exporting: boolean) => void;
+  setExportProgress: (progress: number) => void;
+  setPreviewSize: (width: number, height: number) => void;
+  addTextOverlay: () => string;
+  addGifOverlay: (item: { previewUri: string; exportUri: string; aspectRatio: number }) => string;
+  updateOverlay: (id: string, patch: Partial<Overlay>) => void;
+  removeOverlay: (id: string) => void;
+  selectOverlay: (id: string | null) => void;
+  setGiphyApiKey: (key: string | null) => void;
+  setAudioPicker: (picker: (() => Promise<AudioSource | null>) | null) => void;
+  setAudioFromSource: (source: AudioSource) => void;
+  updateAudio: (patch: Partial<AudioTrack>) => void;
+  clearAudio: () => void;
+  setOriginalVolume: (v: number) => void;
+  getEditorState: () => EditorState;
+};
+
+const initialEdit = {
+  meta: null as VideoMeta | null,
+  trim: { start: 0, end: 0 },
+  filter: 'normal',
+  overlays: [] as Overlay[],
+  audio: null as AudioTrack | null,
+  originalVolume: 1,
+};
+
+export const useEditorStore = create<EditorStore>((set, get) => ({
+  source: { uri: '' },
+  ...initialEdit,
+
+  playhead: 0,
+  paused: false,
+  activePanel: 'none',
+  exporting: false,
+  exportProgress: 0,
+  seekTarget: 0,
+  seekNonce: 0,
+  previewSize: { width: 0, height: 0 },
+  selectedOverlayId: null,
+  giphyApiKey: null,
+  audioPicker: null,
+
+  init: (source) =>
+    set({
+      source,
+      ...initialEdit,
+      playhead: 0,
+      paused: false,
+      activePanel: 'none',
+      exporting: false,
+      exportProgress: 0,
+      seekTarget: 0,
+      seekNonce: 0,
+      selectedOverlayId: null,
+    }),
+
+  setMeta: (meta) =>
+    set((s) => ({
+      meta,
+      trim: s.trim.end > 0 ? s.trim : { start: 0, end: meta.duration },
+    })),
+
+  setTrim: (start, end) => set({ trim: { start, end } }),
+  setFilter: (key) => set({ filter: key }),
+  setPlayhead: (t) => set({ playhead: t }),
+  requestSeek: (t) => set((s) => ({ seekTarget: t, seekNonce: s.seekNonce + 1, playhead: t })),
+  setPaused: (paused) => set({ paused }),
+  togglePlay: () => set((s) => ({ paused: !s.paused })),
+  setActivePanel: (activePanel) => set({ activePanel }),
+  setExporting: (exporting) => set({ exporting }),
+  setExportProgress: (exportProgress) => set({ exportProgress }),
+  setPreviewSize: (width, height) => set({ previewSize: { width, height } }),
+
+  addTextOverlay: () => {
+    const id = nextOverlayId();
+    const overlay: TextOverlay = {
+      id,
+      type: 'text',
+      text: '',
+      fontSize: 32,
+      color: '#ffffff',
+      align: 'center',
+      transform: { ...IDENTITY_TRANSFORM },
+    };
+    set((s) => ({
+      overlays: [...s.overlays, overlay],
+      selectedOverlayId: id,
+      activePanel: 'text',
+    }));
+    return id;
+  },
+  addGifOverlay: (item) => {
+    const id = nextOverlayId();
+    const overlay: StickerOverlay = {
+      id,
+      type: 'gif',
+      previewUri: item.previewUri,
+      exportUri: item.exportUri,
+      aspectRatio: item.aspectRatio > 0 ? item.aspectRatio : 1,
+      transform: { ...IDENTITY_TRANSFORM },
+    };
+    set((s) => ({
+      overlays: [...s.overlays, overlay],
+      selectedOverlayId: id,
+      activePanel: 'none',
+    }));
+    return id;
+  },
+  updateOverlay: (id, patch) =>
+    set((s) => ({
+      overlays: s.overlays.map((o) => (o.id === id ? ({ ...o, ...patch } as Overlay) : o)),
+    })),
+  removeOverlay: (id) =>
+    set((s) => ({
+      overlays: s.overlays.filter((o) => o.id !== id),
+      selectedOverlayId: s.selectedOverlayId === id ? null : s.selectedOverlayId,
+    })),
+  selectOverlay: (selectedOverlayId) => set({ selectedOverlayId }),
+  setGiphyApiKey: (giphyApiKey) => set({ giphyApiKey }),
+
+  setAudioPicker: (audioPicker) => set({ audioPicker }),
+  setAudioFromSource: (source) =>
+    set({
+      audio: {
+        uri: source.uri,
+        title: source.title,
+        duration: source.duration && source.duration > 0 ? source.duration : 0,
+        trimStart: 0,
+        trimEnd: source.duration && source.duration > 0 ? source.duration : 0,
+        volume: 1,
+        loop: true,
+      },
+      activePanel: 'audio',
+    }),
+  updateAudio: (patch) => set((s) => ({ audio: s.audio ? { ...s.audio, ...patch } : s.audio })),
+  clearAudio: () => set({ audio: null, activePanel: 'none' }),
+  setOriginalVolume: (originalVolume) => set({ originalVolume }),
+
+  getEditorState: () => {
+    const s = get();
+    return {
+      source: s.source,
+      meta: s.meta,
+      trim: s.trim,
+      filter: s.filter,
+      overlays: s.overlays,
+      audio: s.audio,
+      originalVolume: s.originalVolume,
+    };
+  },
+}));

package/src/theme.ts

@@ -0,0 +1,26 @@
+import { createContext, useContext } from 'react';
+
+export type EditorTheme = {
+  background: string;
+  surface: string;
+  accent: string;
+  text: string;
+  textMuted: string;
+  danger: string;
+};
+
+export const defaultTheme: EditorTheme = {
+  background: '#0b0b0f',
+  surface: '#1c1c26',
+  accent: '#7c5cff',
+  text: '#ffffff',
+  textMuted: '#8a8a99',
+  danger: '#ff5c7c',
+};
+
+export function mergeTheme(override?: Partial<EditorTheme>): EditorTheme {
+  return override ? { ...defaultTheme, ...override } : defaultTheme;
+}
+
+export const EditorThemeContext = createContext<EditorTheme>(defaultTheme);
+export const useTheme = (): EditorTheme => useContext(EditorThemeContext);