4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T13712,"use client"; import * as React from "react"; import type Konva from "konva"; import { ArrowLeft, Loader2 } from "lucide-react"; import { cn } from "@/lib/utils"; import { Dialog, DialogContent, DialogDescription, DialogTitle, } from "@/components/ui/dialog"; import { useMediaEditorState } from "./hooks/use-media-editor-state"; import { useCaptureExtensionOptional } from "./hooks/use-capture-extension"; import { resolvePresentation } from "./lib/presentation-resolver"; import { dialogDimsForAspect } from "./lib/dialog-size-for-aspect"; import { resolveCropAspects } from "./lib/resolve-crop-aspects"; import { loadInitialSource } from "./lib/initial-source-loader"; import { exportPhotoBlob, exportTextOnlyBlob } from "./lib/export-blob"; import { compositeVideo } from "./lib/composite-video"; import { validateGalleryFile } from "./lib/validate-media-file"; import { DiscardConfirmDialog } from "./parts/discard-confirm-dialog"; import { TextOnlyCanvas } from "./parts/text-only-canvas"; import { ToolAdjustSliders } from "./parts/tool-adjust-sliders"; import { ToolDrawControls } from "./parts/tool-draw-controls"; import { ToolFilterStrip } from "./parts/tool-filter-strip"; import { ToolStickerPicker } from "./parts/tool-sticker-picker"; import { ToolTextInput } from "./parts/tool-text-input"; import { resolveFilterPresets } from "./lib/konva-filters"; import { resolveStickerSets } from "./lib/built-in-stickers"; import { DEFAULT_COLOR_PRESETS, DEFAULT_FONTS, DEFAULT_TEXT_GRADIENTS, } from "./lib/defaults"; import { useHistory } from "./hooks/use-history"; import type { AspectRatio, ComposerMode, EditAction, EditTool, ExportImageOpts, ExportMetadata, ExportOpts, ExportVideoOpts, ImageAdjustments, LoadStateOpts, MediaEditorHandle, MediaEditorProps, MediaEditorState, SourceError, StickerOption, StoryComposerLabels, ValidationError, } from "./types"; import type { CapturedPhotoLike as CapturedPhoto, CapturedVideoLike as CapturedVideo, } from "./hooks/use-capture-extension"; // Lazy-load the konva canvas (compound-component-structure rule — heavy dep // boundary). Module-scoped (not inside the component) so the lazy factory's // identity is stable across renders. `parts/lazy-editor-canvas` is a // same-folder default-export wrapper — EditorCanvas itself is a named // export and React.lazy needs a default one. const LazyEditorCanvas = React.lazy(() => import("./parts/lazy-editor-canvas")); /** * media-editor — black-box orchestrator. * * Owns the editor state machine, capability gating * (enabledModes/Tools/Sources/aspect), presentation (inline / dialog / auto), * initial-source intake, the Konva editor surface (camera surface / EditorCanvas / * tool panels), export pipeline, and the imperative ref handle. * * P3 S3 (feature-slicing): the camera capture surface is no longer statically * imported here — it's injected via the optional `capture` prop * (`MediaCaptureExtension`, see `hooks/use-capture-extension.ts`). Install * `@ilinxa/media-editor-capture` and pass `capture={mediaCapture}` to enable * a live camera; without it, "camera" in `mediaSources` falls back to the * base file/gallery intake surface (one dev console.warn) — base-alone stays * a real pick-file → edit → export flow. `MediaEditor` itself is a thin * wrapper that mounts `props.capture.Provider` (when present) around * `MediaEditorImpl`, which holds all the logic below and reads the * extension back out via `useCaptureExtensionOptional()`. * * Known v0.1.x gap: the imperative *capture* handle methods (takePhoto, * startRecording, stopRecording, switchCamera, importFromGallery) are deferred * to v0.2 — they dev-warn if called. The in-UI camera controls are the * supported capture path in v0.1.x; everything else on the handle (inspect / * state / export / edit-overlay mutation) is fully wired. */ const NOT_IMPLEMENTED_MARKER = "media-editor: imperative capture (takePhoto / startRecording / stopRecording / switchCamera / importFromGallery) is not implemented — drive capture via the in-UI controls instead."; const NOT_WIRED_HISTORY_MARKER = "media-editor: undo/redo is not wired in v0.1.x (no mutations are recorded as commands yet) — no-op. The per-mutation command layer lands in v0.2."; // English fallback for the v0.1.5-shaped StoryComposerLabels that several // part files (EditorCamera, EditorToolbar, DiscardConfirmDialog, etc.) still // require until the C17 refactor moves them onto MediaEditorLabels. // Module-scoped; not exported via the barrel. Consumers override individual // strings via the `labels` prop (mapped through DEFAULT_LABELS). const INTERNAL_LABELS_FALLBACK: Required = { composerLabel: "Media editor", composerDescription: "Capture a photo, record a video, or compose text-only content.", modePhoto: "Photo", modeVideo: "Video", modeText: "Text", shutterPhoto: "Take photo", shutterVideoStart: "Start recording", shutterVideoStop: "Stop recording", galleryPicker: "Choose from gallery", switchCamera: "Switch camera", permissionDeniedTitle: "Camera access blocked", permissionDeniedBody: "We need camera permission to capture media. Enable it in your browser settings, or pick a file from your gallery.", permissionRetry: "Try again", permissionUsePicker: "Use gallery instead", permissionRequesting: "Requesting camera…", toolText: "Text", toolDraw: "Draw", toolStickers: "Stickers", toolFilters: "Filters", toolAdjust: "Adjust", toolCrop: "Crop", adjustBrightness: "Brightness", adjustContrast: "Contrast", adjustSaturation: "Saturation", adjustBlur: "Blur", drawColor: "Color", drawBrush: "Brush size", drawEraser: "Eraser", drawUndo: "Undo", drawRedo: "Redo", textPlaceholder: "Type something…", textFontFamily: "Font", textFontSize: "Size", textAlign: "Align", publish: "Publish", publishing: "Publishing…", published: "Published", close: "Close", discardConfirmTitle: "Discard?", discardConfirmBody: "You'll lose your captured media and edits.", discardConfirm: "Discard", discardCancel: "Keep editing", uploadFailedTitle: "Upload failed", uploadRetry: "Retry", recordingLabel: "Recording", trimStart: "Trim start", trimEnd: "Trim end", }; function devWarnOnce(memo: Set, key: string, message: string) { if (process.env.NODE_ENV === "production") return; if (memo.has(key)) return; memo.add(key); console.warn(message); } // Thin outer wrapper — its ONLY job is mounting `props.capture.Provider` // (when a capture extension is wired) as an ANCESTOR of the real // implementation, so `MediaEditorImpl` can read it back via // `useCaptureExtensionOptional()` (a component can't consume a context // Provider it renders itself — the Provider must be an ancestor). No other // logic lives here; everything else is unchanged in `MediaEditorImpl` below. export const MediaEditor = React.forwardRef( function MediaEditor(props, ref) { if (props.capture) { const { Provider } = props.capture; return ( ); } return ; }, ); const MediaEditorImpl = React.forwardRef< MediaEditorHandle, MediaEditorProps >(function MediaEditorImpl(props, ref) { const captureExt = useCaptureExtensionOptional(); const { defaultMode } = props; // Seed the editor's cropAspect with the first allowed option (the hook's // "free" fallback may not be in the consumer-derived list). Computed // inline here — the memoized version below covers the render path. const initialCropAspect = resolveCropAspects(props.aspect ?? "free", props.cropAspects)[0] ?? "free"; const editor = useMediaEditorState({ defaultMode, defaultCropAspect: initialCropAspect, onDirtyChange: props.onDirtyChange, }); const warnedRef = React.useRef>(new Set()); // ─── Observability emitters (onModeChange / onEditAction) ────────── // Latest-callback refs so the emit effects below depend only on the state // they watch — never on parent-supplied callback identity (which churns on // every parent render and would refire the effects spuriously). const onModeChangeRef = React.useRef(props.onModeChange); const onEditActionRef = React.useRef(props.onEditAction); React.useEffect(() => { onModeChangeRef.current = props.onModeChange; onEditActionRef.current = props.onEditAction; }); const emitEditAction = React.useCallback((action: EditAction) => { onEditActionRef.current?.(action); }, []); // Emit mode changes to onModeChange + onEditAction. Effect-driven so it // catches EVERY transition source (mode tab, gallery pick, initialSource // load, programmatic) rather than threading the callback through each call // site. Skips the initial mount so a seeded defaultMode doesn't fire. const prevEmitModeRef = React.useRef( undefined, ); React.useEffect(() => { const mode = editor.state.mode; const prev = prevEmitModeRef.current; if (prev !== undefined && prev !== mode) { onModeChangeRef.current?.(mode); emitEditAction({ kind: "mode-change", from: prev, to: mode }); } prevEmitModeRef.current = mode; }, [editor.state.mode, emitEditAction]); // Emit tool-open / tool-close as the active tool changes. A tool→tool switch // emits a close for the old then an open for the new. Skips the initial mount. const prevEmitToolRef = React.useRef(undefined); React.useEffect(() => { const curr = editor.activeTool; const prev = prevEmitToolRef.current; if (prev !== undefined && prev !== curr) { if (prev !== null) emitEditAction({ kind: "tool-close", tool: prev }); if (curr !== null) emitEditAction({ kind: "tool-open", tool: curr }); } prevEmitToolRef.current = curr; }, [editor.activeTool, emitEditAction]); // ─── Capability defaults (description §8 — Q-P-locked) ───────────── // Memoized so the `??`-fallback arrays keep a stable identity across // renders (both feed hook dependency arrays further down). const enabledModes = React.useMemo( () => props.enabledModes ?? (["photo", "video", "text"] as const), [props.enabledModes], ); const enabledTools = React.useMemo( () => props.enabledTools ?? (["text", "draw", "stickers", "filters", "adjust", "crop"] as const), [props.enabledTools], ); const mediaSources = props.mediaSources ?? (["camera", "upload"] as const); const aspect = props.aspect ?? "free"; // Crop aspects derivation per description §4. const resolvedCropAspects = React.useMemo( () => resolveCropAspects(aspect, props.cropAspects), [aspect, props.cropAspects], ); // Mode pill is hidden when ≤1 mode enabled (per description §1). const showModePill = enabledModes.length >= 2; // ─── Initial source intake (description §5) ───────────────────────── // When `initialSource` is set, fetch + validate, then land directly in // the edit stage with mode + image/video pre-loaded. On error, surface // via onInitialSourceError + sit in an empty state (no auto-fallback to // capture — the consumer asked for a specific source and got an error). const [sourceError, setSourceError] = React.useState(null); const onInitialSourceErrorRef = React.useRef(props.onInitialSourceError); React.useEffect(() => { onInitialSourceErrorRef.current = props.onInitialSourceError; }); // Snapshot enabledModes into a ref so the load effect doesn't re-fire on // array identity churn. enabledModes is read by the loader at the moment // the source changes; subsequent toggles of enabledModes don't retrigger // a re-fetch (which would be surprising — and slow on URL sources). const enabledModesRef = React.useRef(enabledModes); React.useEffect(() => { enabledModesRef.current = enabledModes; }); // Value-based effect key: url-kind sources are idiomatically passed as // inline object literals (fresh identity every parent render) — keying the // load effect on the object identity would cancel + revoke + refetch on // every render, killing the loaded image mid-edit. url-kind keys by // content; blob/file-kind keys by the payload's identity (the wrapper // object may churn, the Blob/File itself doesn't). const initialSourceDep: string | Blob | File | null = !props.initialSource ? null : props.initialSource.kind === "url" ? `url|${props.initialSource.mode}|${props.initialSource.url}` : props.initialSource.kind === "blob" ? props.initialSource.blob : props.initialSource.file; React.useEffect(() => { const source = props.initialSource; if (!source) { // eslint-disable-next-line react-hooks/set-state-in-effect setSourceError(null); return; } let cancelled = false; let allocatedUrl: string | null = null; (async () => { const result = await loadInitialSource(source, enabledModesRef.current); if (cancelled) { if (result.ok) URL.revokeObjectURL(result.loaded.objectUrl); return; } if (!result.ok) { setSourceError(result.error); onInitialSourceErrorRef.current?.(result.error); return; } allocatedUrl = result.loaded.objectUrl; setSourceError(null); editor.setMode(result.loaded.mode); if (result.loaded.mode === "photo") { editor.setImageSrc(result.loaded.objectUrl); } else { editor.setVideoBlob(result.loaded.blob); } // Also register as a draft so the canvas mounts via the unified // draft path. Lifetime of the URL is governed by the cleanup below // (which revokes on cancel/unmount), so we don't double-revoke. editor.setDraft({ source: "initial", kind: result.loaded.mode === "photo" ? "image" : "video", blob: result.loaded.blob, url: result.loaded.objectUrl, mimeType: result.loaded.blob.type, }); editor.setStage("edit"); })(); return () => { cancelled = true; if (allocatedUrl) URL.revokeObjectURL(allocatedUrl); }; // editor methods are stable refs from the hook; only the VALUE-keyed // `initialSourceDep` drives this effect (see derivation above). The // effect body reads props.initialSource from the render that changed the // key. enabledModes is read via ref above so a tools-dial toggle doesn't // refetch a URL source mid-edit. // eslint-disable-next-line react-hooks/exhaustive-deps }, [initialSourceDep]); // Camera surface: show if camera intake allowed AND at least one capture mode // is enabled; otherwise fall back to the base file/gallery intake surface. const hasCaptureMode = enabledModes.some( (m) => m === "photo" || m === "video", ); // `cameraIntakeAvailable` is CONFIG-only (does the consumer want camera at // all). `captureSurfaceReady` additionally requires the capture extension // to actually be wired (`props.capture` → `captureExt`) — camera requested // but unwired degrades to the file-intake surface below (one dev-warn), // rather than a dead "Connect to camera" button. const cameraIntakeAvailable = mediaSources.includes("camera") && hasCaptureMode; const CameraSurface = captureExt?.CameraSurface ?? null; const captureSurfaceReady = cameraIntakeAvailable && CameraSurface !== null; React.useEffect(() => { if (!cameraIntakeAvailable) return; if (captureExt?.CameraSurface) return; devWarnOnce( warnedRef.current, "capture-extension-missing", 'media-editor: mediaSources includes "camera" but no capture extension is wired — install @ilinxa/media-editor-capture and pass capture={mediaCapture} (MediaEditorProps.capture) to enable the camera. Falling back to file/gallery intake.', ); }, [cameraIntakeAvailable, captureExt]); // ─── R4: Undo / redo history + discard guard ───────────────────────── // Command-stack scaffolding — nothing calls history.execute() in v0.1.x, so // the stack is always empty. bindKeyboard stays OFF until the per-mutation // command layer lands (v0.2): a live window Ctrl/Cmd+Z listener that // preventDefault()s page-wide while doing nothing is strictly worse than no // listener. handle.undo/redo dev-warn accordingly (see the handle below). const history = useHistory({ capacity: 50, bindKeyboard: false }); const [showDiscardConfirm, setShowDiscardConfirm] = React.useState(false); const textOnlyRef = React.useRef(null); // Run a clean reset that also drops the history stack. Emits the `reset` // edit-action centrally so every reset path (handle.reset, back-to-capture, // discard-confirm) reports it once. const performReset = React.useCallback(() => { editor.reset(); history.reset(); emitEditAction({ kind: "reset" }); }, [editor, history, emitEditAction]); // Close path with confirm-on-discard. Mirrors v0.1.5 Q-P10a: // - In dialog mode, fires onClose unless dirty (then shows confirm). // - In inline mode, just lets the consumer know via onClose (no UI // close to perform). const requestClose = React.useCallback(() => { if (props.confirmOnDiscard !== false && editor.isDirty) { setShowDiscardConfirm(true); return; } props.onClose?.(); }, [editor.isDirty, props]); // ─── Konva stage handle (C10 export wiring) ───────────────────────── // EditorCanvas surfaces its Konva.Stage via onStageReady. The handle's // export methods read this ref to snapshot the canvas at publish time. const stageRef = React.useRef(null); // Derive a stable object URL from the loaded video blob so EditorCanvas // can play it. Allocated lazily and revoked when the blob identity // changes or the component unmounts. const videoBlob = editor.state.videoBlob; const [videoUrl, setVideoUrl] = React.useState(null); React.useEffect(() => { if (!videoBlob) { // eslint-disable-next-line react-hooks/set-state-in-effect setVideoUrl(null); return; } const url = URL.createObjectURL(videoBlob); setVideoUrl(url); return () => URL.revokeObjectURL(url); }, [videoBlob]); // Edit canvas is mounted whenever we have a loaded source. Source can land // via initialSource (sets imageSrc/videoBlob + draft) OR camera capture // (sets draft only) OR gallery pick (sets draft only). The unified read // is `editor.draft`. const hasLoadedSource = editor.draft !== null || editor.state.imageSrc !== null || editor.state.videoBlob !== null; const showEditCanvas = !sourceError && editor.state.stage === "edit" && hasLoadedSource; // ─── R2: Capture flow handlers ───────────────────────────────────── // Camera + gallery callbacks promote captured media to a draft and // transition to the edit stage. EditorCanvas takes over from there. const handlePhoto = React.useCallback( (photo: CapturedPhoto) => { const url = URL.createObjectURL(photo.blob); editor.setDraft({ source: "camera", kind: "image", blob: photo.blob, url, width: photo.width, height: photo.height, mimeType: photo.mimeType, }); editor.setMode("photo"); editor.setImageSrc(url); editor.setStage("edit"); }, [editor], ); const handleVideo = React.useCallback( (video: CapturedVideo) => { const url = URL.createObjectURL(video.blob); editor.setDraft({ source: "camera", kind: "video", blob: video.blob, url, durationMs: video.durationMs, mimeType: video.mimeType, }); editor.setMode("video"); editor.setVideoBlob(video.blob); editor.setStage("edit"); }, [editor], ); const handleGalleryFile = React.useCallback( (file: File) => { const kind: "image" | "video" = file.type.startsWith("video/") ? "video" : "image"; const url = URL.createObjectURL(file); editor.setDraft({ source: "gallery", kind, blob: file, url, mimeType: file.type, }); editor.setMode(kind === "image" ? "photo" : "video"); if (kind === "image") { editor.setImageSrc(url); } else { editor.setVideoBlob(file); } editor.setStage("edit"); }, [editor], ); // ─── R3: Tool-panel resolved data ───────────────────────────────── const resolvedStickerSets = React.useMemo( () => resolveStickerSets(props.stickers, !!props.replaceBuiltinStickers), [props.stickers, props.replaceBuiltinStickers], ); const resolvedFilterPresets = React.useMemo( () => resolveFilterPresets( props.filterPresets, !!props.replaceBuiltinFilters, ), [props.filterPresets, props.replaceBuiltinFilters], ); const resolvedFonts = React.useMemo( () => props.fonts ?? DEFAULT_FONTS, [props.fonts], ); const resolvedColorPresets = React.useMemo( () => props.colorPresets ?? DEFAULT_COLOR_PRESETS, [props.colorPresets], ); // Flatten resolved sticker sets into a Map for the // canvas-side resolveSticker(stickerId) lookup. Memoized — only rebuilds // when the sets change. const stickerIndex = React.useMemo(() => { const m = new Map(); for (const set of resolvedStickerSets) { for (const sticker of set.stickers) m.set(sticker.id, sticker); } return m; }, [resolvedStickerSets]); const resolveSticker = React.useCallback( (stickerId: string) => stickerIndex.get(stickerId), [stickerIndex], ); // In-progress drawing stroke kept locally — committed to editor state on // pointer-up via addDrawingStroke. Lives outside MediaEditorState because // it's transient render-only data. const [currentDrawingStroke, setCurrentDrawingStroke] = React.useState< import("./types").DrawingStroke | null >(null); const handleDrawBegin = React.useCallback( (x: number, y: number) => { setCurrentDrawingStroke({ id: `stroke-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`, points: [x, y], color: editor.drawingTool.color, brushSize: editor.drawingTool.brushSize, mode: editor.drawingTool.mode, }); }, [editor.drawingTool], ); const handleDrawExtend = React.useCallback((x: number, y: number) => { setCurrentDrawingStroke((prev) => prev ? { ...prev, points: [...prev.points, x, y] } : prev, ); }, []); const handleDrawEnd = React.useCallback(() => { // Commit OUTSIDE the setState updater — React 19 strict mode invokes the // updater twice in dev, which would call addDrawingStroke twice with the // same id and produce duplicate-key warnings. setState updaters must be // pure. Closure-read of the current stroke is fine here. if (currentDrawingStroke && currentDrawingStroke.points.length >= 4) { editor.addDrawingStroke(currentDrawingStroke); } setCurrentDrawingStroke(null); }, [currentDrawingStroke, editor]); // Tool-panel state snapshot: captures editor.state at the moment the user // enters a tool (activeTool flips from null → tool) so a "Back" button can // revert any in-tool changes. Cleared on tool exit so re-entering captures // a fresh baseline. const toolEntrySnapshot = React.useRef(null); const prevActiveToolRef = React.useRef(null); React.useEffect(() => { const prev = prevActiveToolRef.current; const curr = editor.activeTool; if (prev === null && curr !== null) { toolEntrySnapshot.current = editor.state; } else if (curr === null) { toolEntrySnapshot.current = null; } prevActiveToolRef.current = curr; // editor.state is read intentionally at entry; deps only on activeTool. // eslint-disable-next-line react-hooks/exhaustive-deps }, [editor.activeTool]); const handleApplyTool = React.useCallback(() => { editor.setSelectedTextId(null); editor.setSelectedStickerId(null); editor.setActiveTool(null); }, [editor]); const handleBackTool = React.useCallback(() => { const snap = toolEntrySnapshot.current; if (snap) editor.loadState(snap); editor.setSelectedTextId(null); editor.setSelectedStickerId(null); editor.setActiveTool(null); }, [editor]); const selectedText = React.useMemo( () => editor.state.textOverlays.find((o) => o.id === editor.selectedTextId) ?? null, [editor.state.textOverlays, editor.selectedTextId], ); // Auto-add a text overlay when the text tool activates with nothing // selected. Mirrors v0.1.5 behavior — tapping "Text" gives you something // to edit immediately rather than presenting an empty inspector. const lastSeededToolRef = React.useRef(null); React.useEffect(() => { if (editor.activeTool !== "text") { lastSeededToolRef.current = null; return; } if (selectedText) return; if (lastSeededToolRef.current === "text") return; lastSeededToolRef.current = "text"; const id = `text-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`; editor.addTextOverlay({ id, text: INTERNAL_LABELS_FALLBACK.textPlaceholder, x: 100, y: 200, rotation: 0, scale: 1, fontFamily: resolvedFonts[0]?.family ?? "sans-serif", fontSize: 40, fill: "#ffffff", align: "center", }); editor.setSelectedTextId(id); // editor methods are stable; only activeTool/selectedText/fonts drive seed. // eslint-disable-next-line react-hooks/exhaustive-deps }, [editor.activeTool, selectedText, resolvedFonts]); // Sticker pick → add at canvas center + select for the transformer. const handleStickerPick = React.useCallback( (sticker: StickerOption) => { const id = `sticker-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`; editor.addSticker({ id, stickerId: sticker.id, x: 200, y: 200, rotation: 0, scale: 1, }); editor.setSelectedStickerId(id); }, [editor], ); const mergedLabels: Required = React.useMemo(() => { // The MediaEditorLabels → StoryComposerLabels mapping is C17 work. // Until then, only string overrides at the keys that overlap with the // flat shim flow through (e.g., `composerLabel`); everything else // falls back to the English defaults. const overrides = (props.labels ?? {}) as Partial; return { ...INTERNAL_LABELS_FALLBACK, ...overrides }; }, [props.labels]); // Capture surface is mounted when the editor is in capture stage AND the // current mode is photo/video AND a camera extension is actually wired. const showCameraSurface = editor.state.stage === "capture" && captureSurfaceReady && (editor.state.mode === "photo" || editor.state.mode === "video"); // Mode auto-seed removed — initial state is intentionally mode:null so the // canvas can render a clean "Connect to camera" entry-point button instead // of jumping straight into a permission prompt. The button + mode tabs are // the user gestures that move the editor out of the empty state. Only the // text-only fallback (no capture modes available) does NOT need a gesture. React.useEffect(() => { if (editor.state.mode !== null) return; if (editor.state.stage !== "capture") return; const captureModesEnabled = enabledModes.some( (m) => m === "photo" || m === "video", ); if (!captureModesEnabled && enabledModes.includes("text")) { editor.setMode("text"); } // editor.setMode is stable per hook contract; mode/stage/modes drive it. // eslint-disable-next-line react-hooks/exhaustive-deps }, [editor.state.mode, editor.state.stage, enabledModes]); // Tracks whether the user has explicitly clicked a button that should kick // off the camera-acquire flow. When true, EditorCamera receives autoAcquire // and the browser permission prompt fires inside the same user-gesture // tick — avoiding spontaneous prompts on first paint. const [userInitiatedCamera, setUserInitiatedCamera] = React.useState(false); // "Back" from the edit stage → return to the capture surface so the user can // re-take. Clears the captured draft + edits + history (via performReset), // then restores the capture mode so the camera reopens in the same mode — // gesture-credited through userInitiatedCamera so there's no fresh permission // friction. Only offered when a capture mode exists (see hasCaptureMode). const backToCapture = React.useCallback(() => { const mode = editor.state.mode; performReset(); if (mode === "photo" || mode === "video") { editor.setMode(mode); setUserInitiatedCamera(true); } }, [editor, performReset]); // ─── Multi-instance guard (C11 — Q-P5 (b)) ────────────────────────── // P3 S3: the guard's call site moved into the capture feature's // EditorCamera (features/capture/parts/editor-camera.tsx) — it's a pure // capture concern (live-camera contention), and the base can no longer // statically import the hook that implements it. It now fires while the // camera surface is actually mounted rather than merely "configured for // camera" — a tighter, still-accurate trigger window. Base-alone (no // capture extension) never acquires a camera, so it needs no guard at all. // ─── Empty-state footgun guard (C11 — description §1) ──────────────── // `enabledModes: []` AND no `initialSource` AND no current source loaded // → editor has nothing to capture and nothing to edit. Render the // renderEmpty slot output (or a default "No source provided" surface) // and dev-warn the misconfiguration. const isEmptyConfig = enabledModes.length === 0 && props.initialSource === undefined && !hasLoadedSource; React.useEffect(() => { if (!isEmptyConfig) return; if (process.env.NODE_ENV === "production") return; devWarnOnce( warnedRef.current, "empty-config", "media-editor: enabledModes=[] AND no initialSource — editor has nothing to capture or edit. Provide an initialSource or enable at least one capture mode.", ); }, [isEmptyConfig]); // ─── Presentation resolution (description §6) ─────────────────────── const resolved = resolvePresentation(props.presentation, enabledModes); // Dev-only required-prop guard: dialog mode needs isOpen + onClose. React.useEffect(() => { if (process.env.NODE_ENV === "production") return; if (resolved !== "dialog") return; if (props.isOpen === undefined || props.onClose === undefined) { devWarnOnce( warnedRef.current, "dialog-requires-isOpen-onClose", "media-editor: presentation='dialog' requires isOpen + onClose props. Falling back to uncontrolled-open behaviour for now.", ); } }, [resolved, props.isOpen, props.onClose]); // ─── Export implementations (C10) ─────────────────────────────────── // Factored out of the handle factory so the polymorphic export() can // dispatch by mode without a `this`-binding gotcha. const exportImage = React.useCallback( async (opts?: ExportImageOpts) => { const stage = stageRef.current; if (!stage) throw new Error("media-editor: editor canvas not ready"); const format = opts?.format ?? "image/jpeg"; const quality = opts?.quality ?? 0.9; const pixelRatio = opts?.pixelRatio ?? 2; const cropRect = editor.state.crop; // Identity-transform guard: exporting while pan/zoomed would bake the // viewport transform into the output (stage.toCanvas captures the // rendered stage). Normalize, snapshot, restore. const blob = await withStageIdentityTransform(stage, () => exportPhotoBlob({ stage, cropRect, mimeType: format, quality, pixelRatio, onProgress: opts?.onProgress, }), ); const width = cropRect?.width ?? stage.width(); const height = cropRect?.height ?? stage.height(); return { blob, metadata: buildExportMetadata( editor.state, "photo", width, height, format, ), }; }, [editor.state], ); // Text-only mode rasterizes the styled DOM surface (no Konva stage exists in // text mode) — review 1.2: without this branch, publishing a text story // threw "editor canvas not ready". const exportText = React.useCallback( async (opts?: ExportImageOpts) => { const el = textOnlyRef.current; if (!el || el.offsetWidth === 0 || el.offsetHeight === 0) { throw new Error("media-editor: text canvas not ready"); } const width = el.offsetWidth; const height = el.offsetHeight; opts?.onProgress?.(0); const blob = await exportTextOnlyBlob(el, width, height); opts?.onProgress?.(1); return { blob, metadata: buildExportMetadata( editor.state, "text", width, height, "image/png", ), }; }, [editor.state], ); const exportVideo = React.useCallback( async (opts?: ExportVideoOpts) => { const videoBlob = editor.state.videoBlob; if (!videoBlob) { throw new Error("media-editor: no video blob loaded"); } // Perf-shortcut: no overlays AND no crop → return the raw blob. // Skips the expensive MediaRecorder re-encode for the // "captured then immediately published" path (chat / DM flows). const shortcut = !hasAnyOverlay(editor.state) && !editor.state.crop; if (shortcut) { opts?.onProgress?.(0); opts?.onProgress?.(1); return { blob: videoBlob, metadata: buildExportMetadata( editor.state, "video", editor.state.crop?.width ?? 720, editor.state.crop?.height ?? 1280, videoBlob.type || "video/webm", ), }; } // Full re-encode path: bake Konva overlays into each video frame. const stage = stageRef.current; const cropRect = editor.state.crop; const ow = cropRect?.width ?? stage?.width() ?? 720; const oh = cropRect?.height ?? stage?.height() ?? 1280; // Identity-transform guard for the per-frame overlay snapshot — same // viewport-baking issue as exportImage, held for the whole re-encode. const runComposite = () => compositeVideo({ sourceBlob: videoBlob, outputWidth: Math.round(ow), outputHeight: Math.round(oh), mimeType: opts?.mimeType, bitsPerSecond: opts?.bitsPerSecond, onProgress: opts?.onProgress, renderFrame: (ctx, video) => { ctx.clearRect(0, 0, ow, oh); const vw = video.videoWidth || ow; const vh = video.videoHeight || oh; const scale = Math.max(ow / vw, oh / vh); const dw = vw * scale; const dh = vh * scale; ctx.drawImage(video, (ow - dw) / 2, (oh - dh) / 2, dw, dh); if (stage) { const overlay = stage.toCanvas({ x: cropRect?.x ?? 0, y: cropRect?.y ?? 0, width: cropRect?.width ?? stage.width(), height: cropRect?.height ?? stage.height(), pixelRatio: 1, }); ctx.drawImage(overlay, 0, 0, ow, oh); } }, }); const result = stage ? await withStageIdentityTransform(stage, runComposite) : await runComposite(); return { blob: result.blob, metadata: buildExportMetadata( editor.state, "video", Math.round(ow), Math.round(oh), result.mimeType, result.durationMs, ), }; }, [editor.state], ); const exportPolymorphic = React.useCallback( async (opts?: ExportOpts) => { const mode = editor.state.mode; if (mode === "video") { return exportVideo(opts as ExportVideoOpts | undefined); } if (mode === "text") { return exportText(opts as ExportImageOpts | undefined); } return exportImage(opts as ExportImageOpts | undefined); }, [editor.state.mode, exportImage, exportVideo, exportText], ); // ─── Imperative handle ────────────────────────────────────────────── // Inspect / state / export / edit-overlay methods are fully wired. The // imperative CAPTURE methods (takePhoto / startRecording / stopRecording / // switchCamera / importFromGallery) are not implemented — they dev-warn // until then; the in-UI camera controls are the supported capture path. React.useImperativeHandle( ref, (): MediaEditorHandle => ({ // === Inspect === getIsDirty: () => editor.isDirty, getMode: () => editor.state.mode, getState: () => editor.state, loadState: (state: MediaEditorState, opts?: LoadStateOpts) => { const sourceBlob = opts?.sourceBlob ?? null; if (sourceBlob && state.mode !== "video") { // Re-materialize (review 1.3): a persisted snapshot's imageSrc is a // dead object URL once the capturing editor unmounted. Mint a fresh // URL from the caller-persisted source blob and rebuild the draft so // the canvas AND the draft-gated tool panels run as they did // pre-unmount. setDraft's lifecycle owns revoking the minted URL. const url = URL.createObjectURL(sourceBlob); editor.loadState({ ...state, imageSrc: url }); editor.setDraft({ source: "initial", kind: "image", blob: sourceBlob, url, mimeType: sourceBlob.type || "image/jpeg", }); } else { editor.loadState(state); } }, getSourceBlob: () => editor.draft && editor.draft.kind === "image" ? editor.draft.blob : null, // === Capture (imperative path not implemented — dev-warns; see note above) === switchCamera: async () => { devWarnOnce(warnedRef.current, "switchCamera", NOT_IMPLEMENTED_MARKER); }, takePhoto: async () => { devWarnOnce(warnedRef.current, "takePhoto", NOT_IMPLEMENTED_MARKER); }, startRecording: async () => { devWarnOnce(warnedRef.current, "startRecording", NOT_IMPLEMENTED_MARKER); }, stopRecording: async () => { devWarnOnce(warnedRef.current, "stopRecording", NOT_IMPLEMENTED_MARKER); }, importFromGallery: () => { devWarnOnce(warnedRef.current, "importFromGallery", NOT_IMPLEMENTED_MARKER); }, // === Edit === addText: (text?: string) => { if (text !== undefined) { editor.setTextContent(text); } else { devWarnOnce(warnedRef.current, "addText", NOT_IMPLEMENTED_MARKER); } }, addSticker: (sticker: StickerOption) => { editor.addSticker({ id: `sticker-${Date.now()}`, stickerId: sticker.id, x: 0, y: 0, rotation: 0, scale: 1, }); }, setAdjustments: (adj: Partial) => editor.setAdjustments(adj), applyFilter: (name: string | null) => editor.setFilter(name), clearLayer: (layer: "drawing" | "stickers" | "text") => editor.clearLayer(layer), // No execute() callers exist yet (per-mutation commands land in v0.2) — // the stack is always empty, so these are honest no-ops, not silent ones. undo: () => { devWarnOnce(warnedRef.current, "undo", NOT_WIRED_HISTORY_MARKER); }, redo: () => { devWarnOnce(warnedRef.current, "redo", NOT_WIRED_HISTORY_MARKER); }, // === Export (C10) === exportImage, exportVideo, export: exportPolymorphic, // === Lifecycle === reset: () => performReset(), /** * Dialog mode is controlled: the consumer owns `isOpen`, so the handle * genuinely cannot open the editor, and inline mode has nothing to open. * That made this a legitimate no-op — but a SILENT one, which is * indistinguishable from a broken method at the call site. * * It now says so, exactly as this component's capture methods already * do. Being unable to act is fine; being unable to act quietly is not. * * @notImplemented Set `isOpen` on the component instead. */ open: () => { devWarnOnce( warnedRef.current, "handle-open-noop", "media-editor: handle.open() cannot open the editor — dialog mode is controlled, so set isOpen={true} on the component (inline mode has nothing to open).", ); }, close: () => { // Routes through requestClose so confirm-on-discard guard fires // if the editor is dirty. The dialog-mode branch in the wrapper // also wires onOpenChange→requestClose for backdrop/Escape. if (resolved === "dialog") { requestClose(); } }, }), [ editor, exportImage, exportVideo, exportPolymorphic, resolved, performReset, requestClose, ], ); // ─── Slot context for render* props ───────────────────────────────── const slotCtx = React.useMemo( () => ({ mode: editor.state.mode, stage: editor.state.stage, isDirty: editor.isDirty, isCapturing: editor.state.stage === "capture", isExporting: editor.state.stage === "publishing", activeTool: editor.activeTool, enabledTools: [...enabledTools] as EditTool[], enabledModes: [...enabledModes] as ComposerMode[], aspect, }), [editor, enabledTools, enabledModes, aspect], ); // ─── Render — inner surface (shared by inline + dialog branches) ── const inner = (

{props.renderTopBar?.(slotCtx)} {/* Top-center control — absolutely centered so it shares the consumer top-bar's row (X left / Publish right) instead of stacking under it. Capture stage → mode pill (choose what to capture). Hidden once a draft exists: switching modes mid-edit is meaningless. */} {editor.state.stage === "capture" && showModePill ? (

{enabledModes.map((m) => ( ))}

) : null} {/* Edit stage → Back-to-capture (icon-only, top-left), taking the close button's slot. The consumer's renderTopBar hides its own close here so Back is the single left-corner action (Instagram convention). Only when a capture mode exists to return to — edit-only consumers (initialSource, no capture modes) keep their close button instead. */} {editor.state.stage === "edit" && hasCaptureMode ? (

) : null} {/* Canvas — aspect-locked placeholder (real Konva stage lands in C10). min-h-0 lets this flex-1 region shrink below the aspect-locked card's intrinsic height so the bottom tool row keeps its space instead of being pushed past the dialog's clipped (overflow-hidden) bottom edge. */}

{sourceError ? (

Couldn't load source

{sourceError.kind} {"url" in sourceError ? ( <> {" · "} {sourceError.url} ) : null} {sourceError.kind === "mode-not-enabled" ? ( <> {" · attempted "} {sourceError.attempted} {" · enabled "} {sourceError.enabled.join(",") || "(none)"} ) : null} {sourceError.kind === "unsupported-file-type" ? ( <> {" · type "} {sourceError.fileType || "(blank)"} ) : null}

{props.renderEmpty ? props.renderEmpty() : null}

) : isEmptyConfig ? (

{props.renderEmpty ? ( props.renderEmpty() ) : ( <>

No source provided

Pass initialSource or enable a capture mode in enabledModes.

)}

) : showEditCanvas ? (

} > editor.updateTextOverlay(next.id, next)} onTextSelect={editor.setSelectedTextId} stickers={editor.state.stickers} resolveSticker={resolveSticker} selectedStickerId={editor.selectedStickerId} onStickerChange={(next) => editor.updateSticker(next.id, next)} onStickerSelect={editor.setSelectedStickerId} drawingStrokes={editor.state.drawingStrokes} currentDrawingStroke={currentDrawingStroke} isDrawing={editor.activeTool === "draw"} onDrawBegin={handleDrawBegin} onDrawExtend={handleDrawExtend} onDrawEnd={handleDrawEnd} cropRect={editor.state.crop} cropActive={editor.activeTool === "crop"} cropAspectRatio={aspectAsRatio(editor.cropAspect)} onCropChange={editor.setCrop} adjustments={editor.state.adjustments} activeFilter={ resolvedFilterPresets.find( (f) => f.id === editor.state.filter, ) ?? null } onStageReady={(s) => { stageRef.current = s; }} className="h-full w-full" /> ) : editor.state.stage === "capture" && editor.state.mode === "text" && enabledModes.includes("text") ? ( editor.setTextOnly(next)} /> ) : showCameraSurface && CameraSurface ? ( ) : captureSurfaceReady ? (

Pick a mode above, or jump straight to the camera.

) : mediaSources.includes("upload") || mediaSources.includes("camera") ? ( // Base file/gallery intake — the ONLY intake surface base-alone // ships (no capture extension installed), and the fallback when // "camera" was requested but nothing answered it (dev-warn fired // above). Real, not a placeholder: picking a file promotes it // through the SAME draft path as a camera capture would // (handleGalleryFile → editor.setDraft → stage "edit"). ) : ( <>

No capture source available

aspect: {aspect} · sources:{" "} {mediaSources.join(",") || "(none)"}

)}

{/* Bottom control overlay — edit stage only. Floats over the bottom of the full-bleed canvas (mirrors the camera's overlaid shutter) with a scrim, so the tool panel + chip row never steal the canvas's space or get clipped by the dialog's bottom edge. EXCEPTION — crop: the crop frame's bottom drag-handles live at the image's bottom edge, so a floating overlay would cover them (you couldn't grab the bottom handles). When the crop tool is active the controls drop INTO FLOW below the canvas instead — the canvas region (flex-1) shrinks to reserve the space, keeping every handle reachable. Other tools are sliders/inputs (no canvas-edge handles), so they keep the space-saving overlay. */} {showEditCanvas ? (

{/* Active tool panel — keyed by editor.activeTool. Renders above the chip-row toolbar. Image-draft tools only show on image drafts; video-draft trim/etc. land in R4. */} {editor.draft?.kind === "image" ? ( <> {editor.activeTool === "text" && selectedText ? ( editor.updateTextOverlay(next.id, next) } onDelete={() => { editor.removeTextOverlay(selectedText.id); editor.setSelectedTextId(null); }} /> ) : null} {editor.activeTool === "stickers" ? ( ) : null} {editor.activeTool === "filters" && editor.draft.url ? ( editor.setFilter(id)} /> ) : null} {editor.activeTool === "adjust" ? ( editor.setAdjustments(next)} labels={mergedLabels} /> ) : null} {editor.activeTool === "draw" ? ( editor.setDrawingTool({ color })} onBrushSizeChange={(brushSize) => editor.setDrawingTool({ brushSize }) } onModeChange={(mode) => editor.setDrawingTool({ mode })} /> ) : null} {editor.activeTool === "crop" ? (

{resolvedCropAspects.length > 1 ? (

{resolvedCropAspects.map((a) => ( ))}

) : null}

) : null} ) : null} {/* Edit-tool chip row — filtered by enabledTools (description §4). Only in the edit stage: the tools act on a captured draft, so they have nothing to do during capture / text-only / empty-config. Centered when the chips fit, horizontally scrollable when they don't, so they never crop on narrow (9:16) widths. */} {enabledTools.length > 0 && !isEmptyConfig ? (

{enabledTools.map((tool) => ( ))} {enabledTools.includes("crop") && resolvedCropAspects.length > 1 ? ( ({resolvedCropAspects.length} crop aspects) ) : null}

) : null}

) : null} {props.renderBottomToolbar?.(slotCtx)} {/* Discard confirm — fires from requestClose() when isDirty + close attempt (backdrop / Escape / handle.close()). Q-P10a. */} setShowDiscardConfirm(false)} onConfirm={() => { setShowDiscardConfirm(false); performReset(); props.onClose?.(); }} /> ); // ─── Render — presentation branch ── if (resolved === "inline") { return inner; } // Dialog branch — sizing derived from aspect (description §6). On desktop // the dialog is a viewport-relative box constrained by aspect-ratio: // height-driven for portrait aspects, width-driven for landscape. The // unspecified dimension is computed from CSS aspect-ratio; max-* clamps // the secondary axis when the driver would force overflow. const { aspectRatio, orientation } = dialogDimsForAspect(aspect); return ( ); }); // ─── Export-time helpers ────────────────────────────────────────────── /** * Returns true if the edit state has any overlay / mutation that would * change the output vs the raw source. Drives the video perf-shortcut: * if nothing's been changed, skip the MediaRecorder re-encode. * * Adjustments are checked by ALL three default values — any deviation * counts as "modified." */ /** Default display ratio used for `aspect="free"` — chosen to match the * typical webcam frame so preview ↔ capture stay consistent and the canvas * doesn't render as a too-wide / too-short box. */ const FREE_ASPECT_FALLBACK = 16 / 9; /** * Convert an `AspectRatio` string ("9:16", "1:1", etc.) to a numeric ratio * (width / height) for capture-time cropping. For `"free"`, returns * `FREE_ASPECT_FALLBACK` so the captured frame is cropped to the same shape * the canvas is displayed at (avoiding the "captured photo doesn't match * preview" mismatch the canvas-placeholder uses the same ratio). */ function aspectAsRatio(aspect: AspectRatio): number { if (aspect === "free") return FREE_ASPECT_FALLBACK; const [w, h] = aspect.split(":").map(Number); if (!w || !h) return FREE_ASPECT_FALLBACK; return w / h; } /** * Base file/gallery intake surface (P3 S3 — part B). The ONLY intake path * base-alone ships once the capture feature slice is a separate install: * a button + a hidden ``, honoring `maxFileSizeMb` via * `validateGalleryFile` (same validation the capture feature's gallery * button used pre-split). Matches the existing "Connect to camera" chrome — * no new visual language. */ function FileIntakeSurface({ galleryLabel, maxFileSizeMb, onFile, onValidationError, }: { galleryLabel: string; maxFileSizeMb: number; onFile: (file: File) => void; onValidationError?: (error: ValidationError) => void; }) { const inputRef = React.useRef(null); return (

Pick a photo or video from your device.

{ const file = e.target.files?.[0]; e.target.value = ""; // reset so picking the same file twice re-fires if (!file) return; const err = validateGalleryFile(file, maxFileSizeMb); if (err) { onValidationError?.(err); return; } onFile(file); }} className="hidden" />

); } /** * Shared chrome for tool sub-panels: wraps the tool's own UI with a Back + * Apply button row so every tool follows the same Apply/revert contract. * Back calls `onBack` which restores the state snapshot captured at tool * entry. Apply just closes the panel, keeping all in-tool changes. * Crop has its own custom panel chrome because Apply burns the cropped * image into a new blob — that's outside the generic snapshot/restore model. */ function ToolPanelFrame({ onBack, onApply, children, }: { onBack: () => void; onApply: () => void; children: React.ReactNode; }) { return (

{children}

); } /** Chip label for an edit tool — routed through the labels prop (i18n). */ function toolChipLabel( tool: EditTool, labels: Required, ): string { switch (tool) { case "text": return labels.toolText; case "draw": return labels.toolDraw; case "stickers": return labels.toolStickers; case "filters": return labels.toolFilters; case "adjust": return labels.toolAdjust; case "crop": return labels.toolCrop; } } /** * Run `fn` with the stage temporarily at the identity transform (scale 1, * position 0,0), restoring the prior pan/zoom afterwards. Export snapshots * (stage.toCanvas) capture the RENDERED stage — exporting while zoomed/panned * would bake the viewport into the output. */ async function withStageIdentityTransform( stage: Konva.Stage, fn: () => Promise, ): Promise { const prior = { x: stage.x(), y: stage.y(), scaleX: stage.scaleX(), scaleY: stage.scaleY(), }; if ( prior.x === 0 && prior.y === 0 && prior.scaleX === 1 && prior.scaleY === 1 ) { return fn(); } stage.scale({ x: 1, y: 1 }); stage.position({ x: 0, y: 0 }); stage.batchDraw(); try { return await fn(); } finally { stage.scale({ x: prior.scaleX, y: prior.scaleY }); stage.position({ x: prior.x, y: prior.y }); stage.batchDraw(); } } function hasAnyOverlay(state: MediaEditorState): boolean { if (state.textOverlays.length > 0) return true; if (state.stickers.length > 0) return true; if (state.drawingStrokes.length > 0) return true; if (state.filter !== null) return true; const a = state.adjustments; if (a.brightness !== 0 || a.contrast !== 0 || a.saturation !== 0 || a.blur !== 0) { return true; } return false; } function buildExportMetadata( state: MediaEditorState, mode: ComposerMode, width: number, height: number, mimeType: string, durationMs?: number, ): ExportMetadata { return { mode, width, height, durationMs, mimeType, textOverlays: state.textOverlays, stickers: state.stickers, drawingStrokes: state.drawingStrokes.length, appliedFilter: state.filter ?? undefined, adjustments: state.adjustments, crop: state.crop ?? undefined, }; } // ─── Tail type re-exports (cross-procomp consumers) ────────────────────────── // Procomps that compose media-editor must import these types from THIS // component-file path, not `./types`: the shadcn path rewriter preserves the // component-file path but mangles `/types` cross-procomp imports (F-S1). export type { MediaEditorProps, MediaEditorHandle, MediaEditorState, ExportMetadata, InitialSource, ComposerMode, EditTool, MediaSource, AspectRatio, LoadStateOpts, } from "./types"; 51:T1f24,// media-editor — public barrel (BASE item; capture feature slice is // `features/capture/` — its own barrel, own registry item). // // Exports grow progressively as each commit lands its surface: // C2 (this commit) — main component + all editor-shaped types // C3 — moved hooks (useMediaCapture + 6 internal) // C4 — moved lib helpers (filters, stickers, export, composite, mime) // C5 — moved parts (EditorCamera, EditorCanvas, EditorToolbar, // ColorSwatchPicker, DiscardConfirmDialog) // C6 — useMediaEditorState (NEW) // C9-C11 — initial-source / multi-instance internal helpers (NOT re-exported) // P3 S3 (feature-slicing) — capture split OUT to features/capture/: useMediaCapture, // useCameraPermissions, useMultiInstanceGuard, EditorCamera, // CameraPermissionPrompt, ShutterButton (+ their types) no // longer export from here — import from `@ilinxa/media-editor-capture` // (features/capture/index.ts) instead. `validateGalleryFile` STAYS // here (generic file-intake, not a capture concern) — moved to // `./lib/validate-media-file`. The capture injection seam // (`MediaCaptureExtension` + friends) is NEW here. // // Backward-compat for story-composer v0.1.5 consumers is handled in // story-composer v0.2.0's barrel via re-exports from THIS barrel // (see plan §"Type re-export band"). // ─── Main component ──────────────────────────────────────────────────── export { MediaEditor } from "./media-editor"; // ─── Types — editor-shaped (story-composer v0.2.0 re-exports these) ─── export type { // Modes + stage ComposerMode, ComposerStage, // Validation ValidationError, // Stickers StickerOption, StickerSet, // Filters + adjustments KonvaFilterSpec, FilterPreset, ImageAdjustments, // Overlay items TextOverlay, PlacedSticker, DrawingStroke, // Fonts FontOption, // Aspect + tools AspectRatio, EditTool, // Source intake MediaSource, // Crop CropRect, // Initial source InitialSource, SourceError, // Draft + edit-working state DraftMedia, TrimRange, DrawingToolConfig, TextOnlyState, // Editor state + actions GradientPreset, MediaEditorState, EditAction, // Export ExportImageOpts, ExportVideoOpts, ExportOpts, ExportMetadata, // Slots EditorCtx, // Labels MediaEditorLabels, // Public component contracts MediaEditorProps, MediaEditorHandle, LoadStateOpts, } from "./types"; // ─── Constants ───────────────────────────────────────────────────────── export { DEFAULT_ADJUSTMENTS, DEFAULT_LABELS } from "./types"; // ─── Capture injection seam (P3 S3 — see hooks/use-capture-extension.ts) ─ // For consumers building a CUSTOM capture provider (not the shipped // `@ilinxa/media-editor-capture`). Ordinary consumers just import // `mediaCapture` from the capture feature and pass `capture={mediaCapture}`. export { MediaCaptureExtensionContext, type MediaCaptureExtension, type MediaCaptureExtensionContextValue, type MediaCaptureSurfaceProps, type CapturedPhotoLike, type CapturedVideoLike, } from "./hooks/use-capture-extension"; // ─── Hooks (C3 — moved from story-composer v0.1.5 via git mv) ─────── export { useDrawingStroke, type UseDrawingStrokeOptions, type UseDrawingStrokeResult, } from "./hooks/use-drawing-stroke"; export { useHistory, type Command, type UseHistoryOptions, type UseHistoryResult, } from "./hooks/use-history"; export { useKonvaSelection, type SelectableKind, type SelectedItem, type UseKonvaSelectionResult, } from "./hooks/use-konva-selection"; export { useKonvaStageSize, type StageSize, } from "./hooks/use-konva-stage-size"; export { usePanZoom, type PanZoomTransform, type UsePanZoomOptions, type UsePanZoomResult, } from "./hooks/use-pan-zoom"; // useMediaEditorState (C6) — written NEW; replaces story-composer's // use-story-composer-state for editor-shaped concerns. export { useMediaEditorState, type UseMediaEditorStateOptions, type UseMediaEditorStateResult, } from "./hooks/use-media-editor-state"; // useMultiInstanceGuard moved to features/capture/ in P3 S3 — its call site // is now inside the feature's EditorCamera (live-camera contention is a // capture-only concern). Advanced consumers: import from // `@ilinxa/media-editor-capture` instead. // ─── Lib helpers (C3 + C4 — moved from story-composer v0.1.5 via git mv) ── // mime-fallback (C3, SHARED — capture recording + base export re-encode // both use it): export { selectRecorderMime, containerFor, PREFERRED_RECORDER_MIME_TYPES, type RecorderMimeType, } from "./lib/mime-fallback"; // validate-media-file (P3 S3 — extracted from the old use-media-capture.ts; // generic file-intake, not a capture concern, so it stayed in base): export { validateGalleryFile } from "./lib/validate-media-file"; // konva-filters (C4): export { resolveFilterPresets, BUILT_IN_FILTER_PRESETS, } from "./lib/konva-filters"; // built-in-stickers (C4): export { resolveStickerSets, BUILT_IN_STICKER_SETS, } from "./lib/built-in-stickers"; // export-blob (C4): export { exportPhotoBlob, exportTextOnlyBlob, type ExportPhotoOptions, } from "./lib/export-blob"; // composite-video (C4): export { compositeVideo, type CompositeVideoOptions, type CompositeVideoResult, } from "./lib/composite-video"; // defaults — editor tokens (C4): export { DEFAULT_TEXT_GRADIENTS, DEFAULT_FONTS, DEFAULT_COLOR_PRESETS, } from "./lib/defaults"; // ─── Parts (C5 — moved from story-composer v0.1.5 via git mv) ────── // EditorCamera / CameraPermissionPrompt / ShutterButton moved to // features/capture/ in P3 S3 — import from `@ilinxa/media-editor-capture`. export { EditorCanvas } from "./parts/editor-canvas"; export type { EditorCanvasProps } from "./parts/editor-canvas"; // lazy-editor-canvas is an internal same-folder default-export shim for // React.lazy() (see parts/lazy-editor-canvas.tsx) — not re-exported; use // `EditorCanvas` above for direct/non-lazy composition. export { EditorToolbar } from "./parts/editor-toolbar"; export type { EditorToolbarProps } from "./parts/editor-toolbar"; // Other public parts (per description §10): export { ColorSwatchPicker } from "./parts/color-swatch-picker"; export type { ColorSwatchPickerProps } from "./parts/color-swatch-picker"; export { DiscardConfirmDialog } from "./parts/discard-confirm-dialog"; // Crop helpers (v0.1.5 public surface preserved): export { ToolCropOverlay, ASPECT_RATIO_VALUES, fitCropToStage, } from "./parts/tool-crop-overlay"; export type { ToolCropOverlayProps } from "./parts/tool-crop-overlay"; // Internal-by-convention parts — re-exported for sealed-folder consumers. export { ModeTogglePill } from "./parts/mode-toggle-pill"; export { VideoTrimBar } from "./parts/video-trim-bar"; export { TextOnlyCanvas } from "./parts/text-only-canvas"; export type { TextOnlyCanvasProps, TextOnlyCanvasState, } from "./parts/text-only-canvas"; export { ToolAdjustSliders } from "./parts/tool-adjust-sliders"; export { ToolDrawControls } from "./parts/tool-draw-controls"; export { ToolFilterStrip } from "./parts/tool-filter-strip"; export { ToolStickerPicker } from "./parts/tool-sticker-picker"; export { ToolTextInput } from "./parts/tool-text-input"; 52:T4d88,import type { ReactNode } from "react"; import type { MediaCaptureExtension } from "./hooks/use-capture-extension"; // ─── Modes + stage ────────────────────────────────────────────────────── // (Locked: NO renames from story-composer v0.1.5 — see plan §"Type system". // story-composer v0.2.0 re-exports these for backward-compat.) export type ComposerMode = "photo" | "video" | "text"; export type ComposerStage = | "capture" | "edit" | "publishing" | "done" | "error"; // ─── Validation ───────────────────────────────────────────────────────── export interface ValidationError { kind: | "file-too-large" | "unsupported-type" | "unsupported-codec" | "duration-exceeded" | "no-camera" | "permission-denied"; message: string; file?: File; } // ─── Stickers ─────────────────────────────────────────────────────────── export interface StickerOption { id: string; src: string; alt: string; width?: number; height?: number; } export interface StickerSet { id: string; label: string; stickers: StickerOption[]; } // ─── Filters + adjustments ────────────────────────────────────────────── export interface KonvaFilterSpec { name: string; params?: Record; } export interface FilterPreset { id: string; label: string; konvaFilters: KonvaFilterSpec[]; } export interface ImageAdjustments { brightness: number; contrast: number; saturation: number; blur: number; } export const DEFAULT_ADJUSTMENTS: ImageAdjustments = { brightness: 0, contrast: 0, saturation: 0, blur: 0, }; // ─── Overlay items ────────────────────────────────────────────────────── export interface TextOverlay { id: string; text: string; x: number; y: number; rotation: number; scale: number; fontFamily: string; fontSize: number; fill: string; align: "left" | "center" | "right"; } export interface PlacedSticker { id: string; stickerId: string; x: number; y: number; rotation: number; scale: number; } export interface DrawingStroke { id: string; points: number[]; color: string; brushSize: number; mode: "draw" | "erase"; } // ─── Fonts ────────────────────────────────────────────────────────────── export interface FontOption { id: string; label: string; family: string; } // ─── Aspect ratios + tools ────────────────────────────────────────────── // v0.1.0 of media-editor adds "16:9" to AspectRatio (additive — non-breaking // for v0.1.5 consumers; they used at most "9:16" | "1:1" | "4:5" | "free"). export type AspectRatio = "9:16" | "1:1" | "16:9" | "4:5" | "free"; export type EditTool = | "text" | "draw" | "stickers" | "filters" | "adjust" | "crop"; // ─── Media source intake (NEW in media-editor — for capability gating) ── export type MediaSource = "camera" | "upload"; // "library" is not implemented — see description §"Out of scope" // ─── Crop ─────────────────────────────────────────────────────────────── // Lifted from story-composer/parts/tool-crop-overlay.tsx (where v0.1.5 // defined it). Shape preserved verbatim — 4 fields, no `aspect`. Adding fields // would break v0.1.5 consumers via type-narrowing. export interface CropRect { x: number; y: number; width: number; height: number; } // ─── Initial source (NEW — CMS re-edit / draft restore path) ──────────── export type InitialSource = | { kind: "url"; url: string; mode: "photo" | "video" } | { kind: "blob"; blob: Blob; mode: "photo" | "video" } | { kind: "file"; file: File }; // ─── Draft media (NEW — capture output before edit transition) ────────── /** * Captured (or imported) media awaiting edit. Set by camera flow + gallery * pick. Held in editor state so getState/loadState can round-trip draft * restores (e.g., draft persisted to localStorage between sessions). */ export interface DraftMedia { source: "camera" | "gallery" | "initial"; kind: "image" | "video"; blob: Blob; /** Object URL for preview — caller owns revocation when draft is replaced. */ url: string; width?: number; height?: number; durationMs?: number; mimeType: string; } /** Video trim range, in seconds. */ export interface TrimRange { startSec: number; endSec: number; durationSec: number; } /** Drawing-tool UI configuration. Not content; not in MediaEditorState. */ export interface DrawingToolConfig { color: string; brushSize: number; mode: "draw" | "erase"; } /** Text-only mode capture state. */ export interface TextOnlyState { text: string; fontFamily: string; textColor: string; gradientId: string; } // ─── Source / load errors (NEW) ───────────────────────────────────────── export type SourceError = | { kind: "cors"; url: string; underlying: Error } | { kind: "fetch-failed"; url: string; underlying: Error } | { kind: "mode-not-enabled"; attempted: ComposerMode; enabled: ComposerMode[]; } | { kind: "unsupported-file-type"; fileType: string; file: File } | { kind: "invalid-blob"; reason: string }; // ─── Editor state (NEW — serializable snapshot for getState / loadState) ── export interface GradientPreset { id: string; label: string; /** CSS background value — used directly on the text-only canvas. (Preserves v0.1.5 contract.) */ background: string; } export interface MediaEditorState { mode: ComposerMode | null; stage: ComposerStage; imageSrc: string | null; videoBlob: Blob | null; textBackground: GradientPreset | null; textContent: string | null; textOverlays: TextOverlay[]; stickers: PlacedSticker[]; drawingStrokes: DrawingStroke[]; filter: string | null; adjustments: ImageAdjustments; crop: CropRect | null; } // ─── Edit action (NEW — analytics + undo sync) ────────────────────────── export type EditAction = | { kind: "mode-change"; from: ComposerMode | null; to: ComposerMode | null } | { kind: "tool-open"; tool: EditTool } | { kind: "tool-close"; tool: EditTool } | { kind: "text-add"; overlay: TextOverlay } | { kind: "text-update"; id: string; patch: Partial } | { kind: "text-remove"; id: string } | { kind: "sticker-add"; placed: PlacedSticker } | { kind: "sticker-remove"; id: string } | { kind: "draw-stroke"; stroke: DrawingStroke } | { kind: "filter-apply"; name: string | null } | { kind: "adjust-change"; patch: Partial } | { kind: "crop-set"; crop: CropRect | null } | { kind: "undo" } | { kind: "redo" } | { kind: "reset" }; // ─── Export contracts (NEW — locked at Q-P3 sign-off) ─────────────────── export interface ExportImageOpts { /** Default "image/jpeg" (Q-P3 lock). */ format?: "image/jpeg" | "image/png" | "image/webp"; /** 0..1; default 0.9; only meaningful for jpeg/webp. */ quality?: number; /** Default 2 (retina). */ pixelRatio?: number; /** 0..1; fires twice (start, end) for jpeg/png; webp may fire interim. */ onProgress?: (progress: number) => void; } export interface ExportVideoOpts { /** Default auto-pick via mime-fallback chain (vp9 → vp8 → mp4). */ mimeType?: string; /** Default browser-chosen. */ bitsPerSecond?: number; /** 0..1; fires ~10× during re-encode (or once if perf-shortcut applies). */ onProgress?: (progress: number) => void; } export type ExportOpts = ExportImageOpts | ExportVideoOpts; export interface ExportMetadata { mode: ComposerMode; width: number; height: number; durationMs?: number; mimeType: string; textOverlays: TextOverlay[]; stickers: PlacedSticker[]; drawingStrokes: number; appliedFilter?: string; adjustments: ImageAdjustments; crop?: CropRect; } // ─── Slot context (NEW — replaces ComposerCtx for editor-only consumers) ─ export interface EditorCtx { mode: ComposerMode | null; stage: ComposerStage; isDirty: boolean; isCapturing: boolean; isExporting: boolean; activeTool: EditTool | null; enabledTools: EditTool[]; enabledModes: ComposerMode[]; aspect: AspectRatio; } // ─── Compile-time shim for v0.1.5 part label deps (REMOVED IN C17) ────── // Several parts (camera-permission-prompt, discard-confirm-dialog, editor-camera, // editor-toolbar, mode-toggle-pill, text-only-canvas, tool-*) were authored // against story-composer's flat StoryComposerLabels shape. Refactoring // each part to use MediaEditorLabels is C17-territory (wrapper refactor). // This temporary alias mirrors the v0.1.5 shape verbatim so the parts compile // post-move. NOT exported via barrel — purely an internal compile shim. /** @internal — temporary shim; refactored to MediaEditorLabels in C17. */ export interface StoryComposerLabels { composerLabel?: string; composerDescription?: string; modePhoto?: string; modeVideo?: string; modeText?: string; shutterPhoto?: string; shutterVideoStart?: string; shutterVideoStop?: string; galleryPicker?: string; switchCamera?: string; permissionDeniedTitle?: string; permissionDeniedBody?: string; permissionRetry?: string; permissionUsePicker?: string; permissionRequesting?: string; toolText?: string; toolDraw?: string; toolStickers?: string; toolFilters?: string; toolAdjust?: string; toolCrop?: string; adjustBrightness?: string; adjustContrast?: string; adjustSaturation?: string; adjustBlur?: string; drawColor?: string; drawBrush?: string; drawEraser?: string; drawUndo?: string; drawRedo?: string; textPlaceholder?: string; textFontFamily?: string; textFontSize?: string; textAlign?: string; publish?: string; publishing?: string; published?: string; close?: string; discardConfirmTitle?: string; discardConfirmBody?: string; discardConfirm?: string; discardCancel?: string; uploadFailedTitle?: string; uploadRetry?: string; recordingLabel?: string; trimStart?: string; trimEnd?: string; } // ─── i18n labels (NEW — full key tree per description §11) ────────────── export interface MediaEditorLabels { capture: { requestingCamera?: string; cameraDenied: { title?: string; body?: string; retryCta?: string; useGalleryCta?: string; }; galleryButton?: string; switchCamera?: string; modes: { photo?: string; video?: string; text?: string }; }; toolbar: { text?: string; draw?: string; stickers?: string; filters?: string; adjust?: string; crop?: string; }; adjust: { brightness?: string; contrast?: string; saturation?: string; blur?: string; }; publish: { exporting?: string; cancel?: string; ready?: string }; discard: { title?: string; body?: string; cancel?: string; confirm?: string; }; empty: { noSource?: string }; } // ─── Public component props ───────────────────────────────────────────── export interface MediaEditorProps { // === Capability surface (the "partial use" dials, plan-locked defaults) === /** Which capture modes are available. Default ["photo","video","text"] (Q-P2). Empty array + initialSource = edit-only mode. */ enabledModes?: ComposerMode[]; /** Which edit tools appear in the toolbar. Default all 6. */ enabledTools?: EditTool[]; /** Which source intake methods are offered. Default ["camera","upload"]. "library" deferred. */ mediaSources?: MediaSource[]; /** Aspect lock for the editor canvas. Default "free" (Q-P1). */ aspect?: AspectRatio; // === Initial source (skip capture surface) === initialSource?: InitialSource; onInitialSourceError?: (error: SourceError) => void; // === Presentation === /** "inline" | "dialog" | "auto". Default "auto" — picks dialog if enabledModes non-empty, else inline. */ presentation?: "inline" | "dialog" | "auto"; /** Required when presentation resolves to "dialog". Dev-error if missing. */ isOpen?: boolean; /** Required when presentation resolves to "dialog". */ onClose?: () => void; // === Capture extension (P3 S3 — install @ilinxa/media-editor-capture) === /** * Enables camera capture. Install `@ilinxa/media-editor-capture` and pass * its `mediaCapture` export straight through: * ``. Without it, `"camera"` in * `mediaSources` falls back to the base file/gallery intake surface (one * dev console.warn) — base-alone stays fully usable (pick a file → edit → * export), it just can't drive a live camera. */ capture?: MediaCaptureExtension; // === Capture config (only meaningful if enabledModes overlaps capture modes) === defaultMode?: ComposerMode; defaultFacing?: "user" | "environment"; /** Default 30s. */ maxVideoDuration?: number; /** Default true. */ recordAudio?: boolean; /** Default 50MB. */ maxFileSizeMb?: number; onValidationError?: (error: ValidationError) => void; onPermissionDenied?: () => void; // === Edit-tool config === stickers?: StickerSet[]; replaceBuiltinStickers?: boolean; fonts?: FontOption[]; colorPresets?: string[]; filterPresets?: FilterPreset[]; replaceBuiltinFilters?: boolean; /** Overrides default crop choices. Default derivation: if aspect !== "free" → [aspect]; else all 5. */ cropAspects?: AspectRatio[]; // === Discard guard === /** Default true. Dialog mode only — fires on Escape/backdrop click/programmatic close() when dirty. Inline mode ignores (consumer owns navigation guarding via getIsDirty() handle). */ confirmOnDiscard?: boolean; // === Localization === labels?: Partial; // === State change observability === /** Fires whenever the active capture mode changes (tab switch, gallery pick, * initialSource load, programmatic). Skips the initial mount. */ onModeChange?: (mode: ComposerMode | null) => void; onDirtyChange?: (isDirty: boolean) => void; /** * Analytics/undo-sync hook. v0.1.x emits the navigation + lifecycle actions: * `mode-change`, `tool-open`, `tool-close`, and `reset`. The fine-grained * content-mutation actions (`text-*`, `sticker-*`, `draw-stroke`, * `filter-apply`, `adjust-change`, `crop-set`, `undo`, `redo`) land in v0.2 * when the per-mutation instrumentation layer ships — the `EditAction` union * is already complete so consumers can switch exhaustively today. */ onEditAction?: (action: EditAction) => void; // === Slots (escape hatches) === renderTopBar?: (ctx: EditorCtx) => ReactNode; renderBottomToolbar?: (ctx: EditorCtx) => ReactNode; renderPermissionDenied?: (ctx: { retry: () => void; usePicker: () => void; }) => ReactNode; renderEmpty?: () => ReactNode; } // ─── Imperative handle (LOCKED in description §7) ────────────────────── export interface LoadStateOpts { /** * The blob backing `state.imageSrc` (photo path). A persisted snapshot's * `imageSrc` is typically a dead object URL (revoked when the capturing * editor instance unmounted) — when `sourceBlob` is provided, `loadState` * re-mints a fresh object URL from it instead of trusting `imageSrc`, and * rebuilds the internal draft so the edit tools work as they did pre-unmount. * Obtain it from `getSourceBlob()` at snapshot time. (Review 1.3.) */ sourceBlob?: Blob | null; } export interface MediaEditorHandle { // === Inspect === /** True iff the user has captured OR loaded OR edited something. Capture without edit IS dirty. */ getIsDirty: () => boolean; getMode: () => ComposerMode | null; /** Serializable snapshot — for draft persistence. */ getState: () => MediaEditorState; loadState: (state: MediaEditorState, opts?: LoadStateOpts) => void; /** * Blob backing the current photo draft / canvas image — persist it alongside * `getState()` so a later `loadState(state, { sourceBlob })` can * re-materialize the (revoked) object URL. Null when nothing is loaded, or * in video mode (persist `getState().videoBlob` instead). */ getSourceBlob: () => Blob | null; // === Capture (only if enabledModes includes capture modes; else dev-warn + no-op) === switchCamera: () => Promise; takePhoto: () => Promise; startRecording: () => Promise; stopRecording: () => Promise; importFromGallery: () => void; // === Edit (gated by enabledTools — disabled tool methods dev-warn + no-op) === addText: (text?: string) => void; addSticker: (sticker: StickerOption) => void; setAdjustments: (adj: Partial) => void; applyFilter: (name: string | null) => void; clearLayer: (layer: "drawing" | "stickers" | "text") => void; undo: () => void; redo: () => void; // === Export === exportImage: ( opts?: ExportImageOpts, ) => Promise<{ blob: Blob; metadata: ExportMetadata }>; exportVideo: ( opts?: ExportVideoOpts, ) => Promise<{ blob: Blob; metadata: ExportMetadata }>; /** Polymorphic — picks exportImage or exportVideo based on current mode. */ export: ( opts?: ExportOpts, ) => Promise<{ blob: Blob; metadata: ExportMetadata }>; // === Lifecycle === reset: () => void; /** Dialog mode only — no-op in inline. */ open: () => void; /** Dialog mode only — no-op in inline. */ close: () => void; } // ─── Default labels ───────────────────────────────────────────────────── export const DEFAULT_LABELS: MediaEditorLabels = { capture: { requestingCamera: "Requesting camera…", cameraDenied: { title: "Camera access blocked", body: "We need camera permission to continue. Enable it in your browser settings, or choose a file from your gallery.", retryCta: "Try again", useGalleryCta: "Use gallery instead", }, galleryButton: "Choose from gallery", switchCamera: "Switch camera", modes: { photo: "Photo", video: "Video", text: "Text" }, }, toolbar: { text: "Text", draw: "Draw", stickers: "Stickers", filters: "Filters", adjust: "Adjust", crop: "Crop", }, adjust: { brightness: "Brightness", contrast: "Contrast", saturation: "Saturation", blur: "Blur", }, publish: { exporting: "Exporting…", cancel: "Cancel", ready: "Ready", }, discard: { title: "Discard changes?", body: "You'll lose your captured media and edits. This can't be undone.", cancel: "Keep editing", confirm: "Discard", }, empty: { noSource: "No source provided.", }, }; 53:T980,"use client"; import { useCallback, useRef, useState } from "react"; import type { DrawingStroke } from "../types"; export interface UseDrawingStrokeOptions { color: string; brushSize: number; mode: "draw" | "erase"; /** Fires once when the user lifts the pointer — receives the completed stroke. */ onStrokeComplete: (stroke: DrawingStroke) => void; } export interface UseDrawingStrokeResult { /** In-progress stroke (rendered live until pointer-up). */ currentStroke: DrawingStroke | null; /** Bind onto Stage pointer events when draw tool is active. */ beginAt: (x: number, y: number) => void; extendTo: (x: number, y: number) => void; end: () => void; cancel: () => void; } /** * Pointer-frame collector for a single freehand stroke. * * The composer-editor wires Stage pointer events into beginAt/extendTo/end * when the draw tool is active. Each completed stroke is dispatched once via * `onStrokeComplete` — the parent records that as a single undo command (one * command per stroke, not one per pointer frame). */ export function useDrawingStroke( options: UseDrawingStrokeOptions, ): UseDrawingStrokeResult { const { color, brushSize, mode, onStrokeComplete } = options; const [currentStroke, setCurrentStroke] = useState( null, ); const strokeRef = useRef(null); const beginAt = useCallback( (x: number, y: number) => { const id = `stroke-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`; const next: DrawingStroke = { id, points: [x, y], color, brushSize, mode, }; strokeRef.current = next; setCurrentStroke(next); }, [color, brushSize, mode], ); const extendTo = useCallback((x: number, y: number) => { const s = strokeRef.current; if (!s) return; s.points.push(x, y); // Re-render — clone the points array so React notices. setCurrentStroke({ ...s, points: [...s.points] }); }, []); const end = useCallback(() => { const s = strokeRef.current; strokeRef.current = null; setCurrentStroke(null); if (!s || s.points.length < 4) return; // ignore single-point taps onStrokeComplete(s); }, [onStrokeComplete]); const cancel = useCallback(() => { strokeRef.current = null; setCurrentStroke(null); }, []); return { currentStroke, beginAt, extendTo, end, cancel }; } 54:Tdd5,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; export interface Command { do: () => void; undo: () => void; label?: string; } export interface UseHistoryOptions { /** Hard cap on undo depth. Oldest entries FIFO-evicted past this. Default 50. */ capacity?: number; /** When true, Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z bind to undo/redo. */ bindKeyboard?: boolean; } export interface UseHistoryResult { /** Run a command + push it onto the undo stack. Clears redo stack. */ execute: (cmd: Command) => void; undo: () => void; redo: () => void; canUndo: boolean; canRedo: boolean; /** Drops both stacks (e.g., when the draft is replaced). */ reset: () => void; } /** * Generic undo/redo command stack. * * Each command's `do()` is run on execute() and again on redo(); `undo()` is * run on undo. The hook does NOT mediate state — callers wrap their state * mutations into Command pairs. * * Drawing strokes record one command per completed stroke (not per pointer * frame). Text/sticker add/delete/move/transform record one command per * terminal action. */ export function useHistory( options: UseHistoryOptions = {}, ): UseHistoryResult { const { capacity = 50, bindKeyboard = true } = options; const pastRef = useRef([]); const futureRef = useRef([]); // Stack-depth flags mirrored into state by `tick()` after every mutation // (execute / undo / redo / reset all end with tick()), so render reads // state — never the refs — while the fresh object identity still forces a // re-render exactly like the old force-counter did. const [stackFlags, setStackFlags] = useState({ canUndo: false, canRedo: false, }); const tick = useCallback(() => { setStackFlags({ canUndo: pastRef.current.length > 0, canRedo: futureRef.current.length > 0, }); }, []); const execute = useCallback( (cmd: Command) => { cmd.do(); pastRef.current.push(cmd); if (pastRef.current.length > capacity) { pastRef.current.shift(); } futureRef.current = []; tick(); }, [capacity, tick], ); const undo = useCallback(() => { const cmd = pastRef.current.pop(); if (!cmd) return; cmd.undo(); futureRef.current.push(cmd); tick(); }, [tick]); const redo = useCallback(() => { const cmd = futureRef.current.pop(); if (!cmd) return; cmd.do(); pastRef.current.push(cmd); tick(); }, [tick]); const reset = useCallback(() => { pastRef.current = []; futureRef.current = []; tick(); }, [tick]); // Ctrl/Cmd+Z / Ctrl/Cmd+Shift+Z keyboard shortcuts. useEffect(() => { if (!bindKeyboard || typeof window === "undefined") return; const handler = (e: KeyboardEvent) => { const mod = e.ctrlKey || e.metaKey; if (!mod) return; if (e.key.toLowerCase() !== "z") return; // Don't hijack while typing in an input/textarea. const tgt = e.target as HTMLElement | null; if ( tgt?.tagName === "INPUT" || tgt?.tagName === "TEXTAREA" || tgt?.isContentEditable ) { return; } e.preventDefault(); if (e.shiftKey) redo(); else undo(); }; window.addEventListener("keydown", handler); return () => window.removeEventListener("keydown", handler); }, [bindKeyboard, undo, redo]); return { execute, undo, redo, canUndo: stackFlags.canUndo, canRedo: stackFlags.canRedo, reset, }; } 55:T631,"use client"; import { useCallback, useRef, useState } from "react"; import type Konva from "konva"; export type SelectableKind = "text" | "sticker" | "drawing"; export interface SelectedItem { kind: SelectableKind; id: string; } export interface UseKonvaSelectionResult { selected: SelectedItem | null; transformerRef: React.MutableRefObject; /** Select an overlay item and attach the transformer to its node. */ select: (item: SelectedItem | null, node: Konva.Node | null) => void; /** Clear selection (Esc / click on background / draft replaced). */ clear: () => void; } /** * Konva.Transformer attach/detach helper. * * C6 lands the hook surface only — there are no selectable items yet * (text/stickers/drawing land C8/C9/C10). Each tool wires its node into * `select(item, node)`; the hook calls Transformer.nodes([node]). */ export function useKonvaSelection(): UseKonvaSelectionResult { const [selected, setSelected] = useState(null); const transformerRef = useRef(null); const select = useCallback( (item: SelectedItem | null, node: Konva.Node | null) => { setSelected(item); const t = transformerRef.current; if (!t) return; if (item && node) { t.nodes([node]); t.getLayer()?.batchDraw(); } else { t.nodes([]); t.getLayer()?.batchDraw(); } }, [], ); const clear = useCallback(() => { select(null, null); }, [select]); return { selected, transformerRef, select, clear }; } 56:T5f4,"use client"; import { useEffect, useState, type RefObject } from "react"; export interface StageSize { width: number; height: number; } /** * Observe the container element's content box and return its size in px. * * Konva.Stage needs explicit `width` + `height` props in pixels — it can't * track CSS sizing on its own. This hook bridges that gap via ResizeObserver. */ export function useKonvaStageSize( ref: RefObject, ): StageSize { const [size, setSize] = useState({ width: 0, height: 0 }); useEffect(() => { const el = ref.current; if (!el) return; // Seed from the initial bounding rect so first paint isn't 0×0. const rect = el.getBoundingClientRect(); setSize({ width: Math.round(rect.width), height: Math.round(rect.height) }); if (typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver((entries) => { const entry = entries[0]; if (!entry) return; // Prefer contentBoxSize when available (Safari 13.4+, Chrome 84+). const box = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize; const width = box ? box.inlineSize : entry.contentRect.width; const height = box ? box.blockSize : entry.contentRect.height; setSize({ width: Math.round(width), height: Math.round(height) }); }); observer.observe(el); return () => observer.disconnect(); }, [ref]); return size; } 57:T34df,"use client"; import { useCallback, useEffect, useReducer, useRef, useState } from "react"; import type { AspectRatio, ComposerMode, ComposerStage, CropRect, DraftMedia, DrawingToolConfig, EditTool, ImageAdjustments, MediaEditorState, PlacedSticker, TextOnlyState, TextOverlay, TrimRange, } from "../types"; import { DEFAULT_ADJUSTMENTS } from "../types"; import { DEFAULT_FONTS } from "../lib/defaults"; import { DEFAULT_TEXT_GRADIENTS } from "../lib/defaults"; /** * Editor-shaped state machine for media-editor. * * Pure editor concerns only — no publish/upload state (those are consumer-owned, * see plan §"What media-editor does NOT own"). story-composer v0.2.0's * useStoryComposerState COMPOSES this hook and augments with publish state. * * Two state surfaces are managed here: * - **`state` (MediaEditorState)** — the serializable snapshot returned by * `getState()` for draft persistence. Holds mode / stage / mediaSrc / * overlays / filter / adjustments / crop. * - **Edit working state** (alongside `state`) — captured draft, video * trim, selection ids, drawing tool config, text-only state, crop * aspect. These shape ongoing edits but aren't part of the persistent * snapshot. * * The split keeps the persistent snapshot clean (12 fields, all content) * while letting the working state grow without breaking `loadState` * call sites. */ // ─── Action surface (internal) ────────────────────────────────────────── type Action = | { type: "set-mode"; mode: ComposerMode | null } | { type: "set-stage"; stage: ComposerStage } | { type: "set-image-src"; src: string | null } | { type: "set-video-blob"; blob: Blob | null } | { type: "set-text-content"; content: string | null } | { type: "add-text-overlay"; overlay: TextOverlay } | { type: "update-text-overlay"; id: string; patch: Partial } | { type: "remove-text-overlay"; id: string } | { type: "add-sticker"; placed: PlacedSticker } | { type: "update-sticker"; id: string; patch: Partial } | { type: "remove-sticker"; id: string } | { type: "add-drawing-stroke"; stroke: import("../types").DrawingStroke } | { type: "set-filter"; name: string | null } | { type: "set-adjustments"; adjustments: Partial } | { type: "set-crop"; crop: CropRect | null } | { type: "clear-layer"; layer: "drawing" | "stickers" | "text" } | { type: "load-state"; state: MediaEditorState } | { type: "reset" }; // ─── Initial state ────────────────────────────────────────────────────── const INITIAL_STATE: MediaEditorState = { mode: null, stage: "capture", imageSrc: null, videoBlob: null, textBackground: null, textContent: null, textOverlays: [], stickers: [], drawingStrokes: [], filter: null, adjustments: { ...DEFAULT_ADJUSTMENTS }, crop: null, }; const INITIAL_DRAWING_TOOL: DrawingToolConfig = { color: "#ffffff", brushSize: 8, mode: "draw", }; const INITIAL_TEXT_ONLY: TextOnlyState = { text: "", fontFamily: DEFAULT_FONTS[0]?.family ?? "Onest", textColor: "#ffffff", gradientId: DEFAULT_TEXT_GRADIENTS[0]?.id ?? "midnight", }; // ─── Reducer ──────────────────────────────────────────────────────────── function reducer(state: MediaEditorState, action: Action): MediaEditorState { switch (action.type) { case "set-mode": return { ...state, mode: action.mode }; case "set-stage": return { ...state, stage: action.stage }; case "set-image-src": return { ...state, imageSrc: action.src }; case "set-video-blob": return { ...state, videoBlob: action.blob }; case "set-text-content": return { ...state, textContent: action.content }; case "add-text-overlay": return { ...state, textOverlays: [...state.textOverlays, action.overlay] }; case "update-text-overlay": return { ...state, textOverlays: state.textOverlays.map((o) => o.id === action.id ? { ...o, ...action.patch } : o, ), }; case "remove-text-overlay": return { ...state, textOverlays: state.textOverlays.filter((o) => o.id !== action.id), }; case "add-sticker": return { ...state, stickers: [...state.stickers, action.placed] }; case "update-sticker": return { ...state, stickers: state.stickers.map((s) => s.id === action.id ? { ...s, ...action.patch } : s, ), }; case "remove-sticker": return { ...state, stickers: state.stickers.filter((s) => s.id !== action.id), }; case "add-drawing-stroke": return { ...state, drawingStrokes: [...state.drawingStrokes, action.stroke], }; case "set-filter": return { ...state, filter: action.name }; case "set-adjustments": return { ...state, adjustments: { ...state.adjustments, ...action.adjustments }, }; case "set-crop": return { ...state, crop: action.crop }; case "clear-layer": if (action.layer === "drawing") { return { ...state, drawingStrokes: [] }; } if (action.layer === "stickers") { return { ...state, stickers: [] }; } return { ...state, textOverlays: [], textContent: null }; case "load-state": return action.state; case "reset": return INITIAL_STATE; default: return state; } } // ─── Public hook ──────────────────────────────────────────────────────── export interface UseMediaEditorStateOptions { defaultMode?: ComposerMode; defaultCropAspect?: AspectRatio; onDirtyChange?: (isDirty: boolean) => void; } export interface UseMediaEditorStateResult { // === Persistent snapshot === state: MediaEditorState; isDirty: boolean; // === Working / UI state (not in MediaEditorState snapshot) === activeTool: EditTool | null; draft: DraftMedia | null; trim: TrimRange | null; selectedTextId: string | null; selectedStickerId: string | null; drawingTool: DrawingToolConfig; cropAspect: AspectRatio; textOnly: TextOnlyState; // === Persistent-snapshot actions === setMode: (mode: ComposerMode | null) => void; setStage: (stage: ComposerStage) => void; setImageSrc: (src: string | null) => void; setVideoBlob: (blob: Blob | null) => void; setTextContent: (content: string | null) => void; addTextOverlay: (overlay: TextOverlay) => void; updateTextOverlay: (id: string, patch: Partial) => void; removeTextOverlay: (id: string) => void; addSticker: (placed: PlacedSticker) => void; updateSticker: (id: string, patch: Partial) => void; removeSticker: (id: string) => void; addDrawingStroke: (stroke: import("../types").DrawingStroke) => void; setFilter: (name: string | null) => void; setAdjustments: (adjustments: Partial) => void; setCrop: (crop: CropRect | null) => void; clearLayer: (layer: "drawing" | "stickers" | "text") => void; loadState: (state: MediaEditorState) => void; reset: () => void; // === Working-state actions === setActiveTool: (tool: EditTool | null) => void; setDraft: (draft: DraftMedia | null) => void; setTrim: (trim: TrimRange | null) => void; setSelectedTextId: (id: string | null) => void; setSelectedStickerId: (id: string | null) => void; setDrawingTool: (patch: Partial) => void; setCropAspect: (aspect: AspectRatio) => void; setTextOnly: (patch: Partial) => void; } export function useMediaEditorState( opts: UseMediaEditorStateOptions = {}, ): UseMediaEditorStateResult { const [state, dispatch] = useReducer(reducer, INITIAL_STATE, (init) => ({ ...init, mode: opts.defaultMode ?? null, })); // Working state — not part of the persistent snapshot. const [activeTool, setActiveToolState] = useState(null); const [draft, setDraftState] = useState(null); const [trim, setTrimState] = useState(null); const [selectedTextId, setSelectedTextIdState] = useState( null, ); const [selectedStickerId, setSelectedStickerIdState] = useState< string | null >(null); const [drawingTool, setDrawingToolState] = useState( INITIAL_DRAWING_TOOL, ); const [cropAspect, setCropAspectState] = useState( opts.defaultCropAspect ?? "9:16", ); const [textOnly, setTextOnlyState] = useState(INITIAL_TEXT_ONLY); // Revoke draft object URL on replacement / unmount. The revoke runs OUTSIDE // the setState updater — updaters must stay pure (React 19 StrictMode // double-invokes them). draftUrlRef mirrors the last committed URL, and // every draft write goes through setDraft, so it's always current. const draftUrlRef = useRef(null); const setDraft = useCallback((next: DraftMedia | null) => { const prevUrl = draftUrlRef.current; if (prevUrl && prevUrl !== next?.url) { URL.revokeObjectURL(prevUrl); } draftUrlRef.current = next?.url ?? null; setDraftState(next); }, []); useEffect(() => { return () => { if (draftUrlRef.current) URL.revokeObjectURL(draftUrlRef.current); }; }, []); const setActiveTool = useCallback((tool: EditTool | null) => { setActiveToolState(tool); }, []); const setTrim = useCallback((next: TrimRange | null) => { setTrimState(next); }, []); const setSelectedTextId = useCallback((id: string | null) => { setSelectedTextIdState(id); }, []); const setSelectedStickerId = useCallback((id: string | null) => { setSelectedStickerIdState(id); }, []); const setDrawingTool = useCallback((patch: Partial) => { setDrawingToolState((prev) => ({ ...prev, ...patch })); }, []); const setCropAspect = useCallback((aspect: AspectRatio) => { setCropAspectState(aspect); }, []); const setTextOnly = useCallback((patch: Partial) => { setTextOnlyState((prev) => ({ ...prev, ...patch })); }, []); // Dirty derivation: any non-initial state counts as dirty. Includes draft // (capture-without-edit IS dirty per description §7) and text-only edits. const isDirty = state.mode !== null || state.imageSrc !== null || state.videoBlob !== null || state.textContent !== null || state.textOverlays.length > 0 || state.stickers.length > 0 || state.drawingStrokes.length > 0 || state.filter !== null || state.crop !== null || draft !== null || textOnly.text.length > 0; // Fire onDirtyChange when isDirty flips. Effect skips the initial mount. const prevDirtyRef = useRef(null); const onDirtyChangeRef = useRef(opts.onDirtyChange); useEffect(() => { onDirtyChangeRef.current = opts.onDirtyChange; }); useEffect(() => { if (prevDirtyRef.current !== null && prevDirtyRef.current !== isDirty) { onDirtyChangeRef.current?.(isDirty); } prevDirtyRef.current = isDirty; }, [isDirty]); // Reset clears BOTH the persistent snapshot AND the working state. const reset = useCallback(() => { dispatch({ type: "reset" }); setDraft(null); setTrimState(null); setActiveToolState(null); setSelectedTextIdState(null); setSelectedStickerIdState(null); setTextOnlyState(INITIAL_TEXT_ONLY); setDrawingToolState(INITIAL_DRAWING_TOOL); }, [setDraft]); return { state, isDirty, activeTool, draft, trim, selectedTextId, selectedStickerId, drawingTool, cropAspect, textOnly, setMode: (mode) => dispatch({ type: "set-mode", mode }), setStage: (stage) => dispatch({ type: "set-stage", stage }), setImageSrc: (src) => dispatch({ type: "set-image-src", src }), setVideoBlob: (blob) => dispatch({ type: "set-video-blob", blob }), setTextContent: (content) => dispatch({ type: "set-text-content", content }), addTextOverlay: (overlay) => dispatch({ type: "add-text-overlay", overlay }), updateTextOverlay: (id, patch) => dispatch({ type: "update-text-overlay", id, patch }), removeTextOverlay: (id) => dispatch({ type: "remove-text-overlay", id }), addSticker: (placed) => dispatch({ type: "add-sticker", placed }), updateSticker: (id, patch) => dispatch({ type: "update-sticker", id, patch }), removeSticker: (id) => dispatch({ type: "remove-sticker", id }), addDrawingStroke: (stroke) => dispatch({ type: "add-drawing-stroke", stroke }), setFilter: (name) => dispatch({ type: "set-filter", name }), setAdjustments: (adjustments) => dispatch({ type: "set-adjustments", adjustments }), setCrop: (crop) => dispatch({ type: "set-crop", crop }), clearLayer: (layer) => dispatch({ type: "clear-layer", layer }), loadState: (s) => dispatch({ type: "load-state", state: s }), reset, setActiveTool, setDraft, setTrim, setSelectedTextId, setSelectedStickerId, setDrawingTool, setCropAspect, setTextOnly, }; } 58:T335a,"use client"; import { useCallback, useEffect, useRef, useState, type PointerEvent, type RefObject, } from "react"; export interface PanZoomTransform { scale: number; x: number; y: number; } export interface UsePanZoomOptions { /** * Container element receiving the gestures. The wheel listener is attached * here as a NATIVE non-passive listener so `e.preventDefault()` actually * blocks the browser's default Ctrl+wheel page-zoom. React's `onWheel` is * registered as passive in modern browsers and can't preventDefault. */ targetRef: RefObject; /** When false, all gestures + keys are no-ops. Default true. */ enabled?: boolean; /** * When true, the hook listens for keydown (arrows / +/- / 0) ON THE * `targetRef` element — NOT on `window` — so the keys only act while the * canvas (or a child) holds focus and never hijack arrow keys elsewhere on * the page. The target must be focusable (e.g. `tabIndex={0}`) to receive * them. Default true. */ bindKeyboard?: boolean; /** Min zoom. Default 1 (full-screen fit baseline). */ minScale?: number; /** Max zoom. Default 4. */ maxScale?: number; /** Keyboard pan step in px. Default 32. */ panStep?: number; /** Keyboard zoom step (multiplicative). Default 1.15. */ zoomStep?: number; /** * Called on single-pointer pointer-down to decide whether this gesture should * drag-pan the canvas. Return false to yield the pointer to whatever is * underneath (e.g. a draggable text/sticker overlay). Receives only the * pointer's viewport coordinates — enough to hit-test — so callers needn't * accept a full React event. Default: always pan. */ shouldStartPan?: (point: { clientX: number; clientY: number }) => boolean; /** Movement in px before a single-pointer drag counts as a pan (tap tolerance). Default 4. */ panThreshold?: number; } export interface UsePanZoomResult { transform: PanZoomTransform; /** Whether the transform is at the identity (1× / 0,0) — drives the "reset" CTA. */ isIdentity: boolean; /** Attach to a wrapper element receiving the gestures. */ handlers: { onPointerDown: (e: PointerEvent) => void; onPointerMove: (e: PointerEvent) => void; onPointerUp: (e: PointerEvent) => void; onPointerCancel: (e: PointerEvent) => void; }; reset: () => void; /** Programmatic zoom. `center` is in container coordinates. */ zoomBy: (factor: number, center?: { x: number; y: number }) => void; } interface PointerInfo { id: number; x: number; y: number; } /** * Pan + pinch-zoom hook for the Konva editor. * * Touch: * - 2-finger pinch → zoom anchored to the midpoint * - 2-finger pan → translate by the midpoint delta * - Single finger → drag-pan the canvas, UNLESS `shouldStartPan` vetoes the * gesture (the consumer hit-tests so a finger landing on a draggable * text/sticker overlay drags that overlay instead). A tap (movement under * `panThreshold`) never pans, so selection/placement still works. * * Desktop: * - Click-drag over the canvas → pan (same `shouldStartPan` gate). * - Plain wheel over the canvas → zoom anchored to the cursor. The wheel * listener is attached natively with `passive: false` + always * preventDefaults, so the browser's Ctrl+wheel page-zoom doesn't ALSO * zoom the page when the cursor is over the canvas. Trackpad pinch * (which browsers report as wheel.ctrlKey=true) is covered too. * - Vertical scroll over non-canvas areas works normally — the listener * is scoped to the targetRef element. * * Keyboard (when bindKeyboard=true, the targetRef element is focused, and no * text input is focused). Bound to the target element (not window) so the keys * are focus-scoped to the canvas: * - Arrow keys → pan (step = panStep) * - + / = → zoom in * - - / _ → zoom out * - 0 → reset * * Transform is returned for the consumer to apply (e.g. as Konva.Stage * scale + position props). */ export function usePanZoom( options: UsePanZoomOptions, ): UsePanZoomResult { const { targetRef, enabled = true, bindKeyboard = true, minScale = 1, maxScale = 4, panStep = 32, zoomStep = 1.15, shouldStartPan, panThreshold = 4, } = options; const [transform, setTransform] = useState({ scale: 1, x: 0, y: 0, }); const pointersRef = useRef([]); const pinchStartRef = useRef<{ dist: number; midX: number; midY: number; transform: PanZoomTransform; } | null>(null); // Single-pointer drag-pan bookkeeping. `active` flips once movement crosses // panThreshold (so a tap stays a tap); `allowed` is the shouldStartPan verdict. const panStateRef = useRef<{ id: number; lastX: number; lastY: number; startX: number; startY: number; active: boolean; allowed: boolean; } | null>(null); const clamp = useCallback( (s: number) => Math.max(minScale, Math.min(maxScale, s)), [minScale, maxScale], ); const reset = useCallback(() => { setTransform({ scale: 1, x: 0, y: 0 }); }, []); // Zoom by `factor` around `center` (in container coordinates). const zoomBy = useCallback( (factor: number, center?: { x: number; y: number }) => { setTransform((prev) => { const nextScale = clamp(prev.scale * factor); if (nextScale === prev.scale) return prev; const cx = center?.x ?? 0; const cy = center?.y ?? 0; // Keep the world point under the cursor stationary: // world = (screen - pos) / scale // newPos = screen - world * newScale const worldX = (cx - prev.x) / prev.scale; const worldY = (cy - prev.y) / prev.scale; return { scale: nextScale, x: cx - worldX * nextScale, y: cy - worldY * nextScale, }; }); }, [clamp], ); const panBy = useCallback((dx: number, dy: number) => { setTransform((prev) => ({ ...prev, x: prev.x + dx, y: prev.y + dy })); }, []); // ─── Pointer / pinch gestures ──────────────────────────────────────── const onPointerDown = useCallback( (e: PointerEvent) => { if (!enabled) return; pointersRef.current = [ ...pointersRef.current.filter((p) => p.id !== e.pointerId), { id: e.pointerId, x: e.clientX, y: e.clientY }, ]; if (pointersRef.current.length === 2) { const [a, b] = pointersRef.current; const dx = b.x - a.x; const dy = b.y - a.y; pinchStartRef.current = { dist: Math.hypot(dx, dy), midX: (a.x + b.x) / 2, midY: (a.y + b.y) / 2, transform, }; // A second pointer joined → pinch owns the gesture; cancel any // single-pointer pan in progress. panStateRef.current = null; } else if (pointersRef.current.length === 1) { // Arm a single-pointer drag-pan. Whether it engages is decided by // shouldStartPan (so overlay drags can claim the pointer) and by // crossing panThreshold (so taps still register as taps). panStateRef.current = { id: e.pointerId, lastX: e.clientX, lastY: e.clientY, startX: e.clientX, startY: e.clientY, active: false, allowed: shouldStartPan ? shouldStartPan(e) : true, }; } }, [enabled, transform, shouldStartPan], ); const onPointerMove = useCallback( (e: PointerEvent) => { if (!enabled) return; const ptrs = pointersRef.current; const idx = ptrs.findIndex((p) => p.id === e.pointerId); if (idx === -1) return; ptrs[idx] = { id: e.pointerId, x: e.clientX, y: e.clientY }; // Single-pointer drag-pan (desktop click-drag + touch one-finger). const ps = panStateRef.current; if (ptrs.length === 1 && ps && ps.id === e.pointerId && ps.allowed) { if (!ps.active) { if ( Math.hypot(e.clientX - ps.startX, e.clientY - ps.startY) < panThreshold ) { return; } // Crossing the threshold: anchor the pan to HERE so the first frame // doesn't jump by the accumulated pre-threshold distance (up to // panThreshold px). Subsequent frames compute incremental deltas. ps.active = true; ps.lastX = e.clientX; ps.lastY = e.clientY; return; } const dx = e.clientX - ps.lastX; const dy = e.clientY - ps.lastY; ps.lastX = e.clientX; ps.lastY = e.clientY; panBy(dx, dy); return; } if (ptrs.length === 2 && pinchStartRef.current) { const [a, b] = ptrs; const dx = b.x - a.x; const dy = b.y - a.y; const dist = Math.hypot(dx, dy); const midX = (a.x + b.x) / 2; const midY = (a.y + b.y) / 2; const start = pinchStartRef.current; const rawScale = (start.transform.scale * dist) / start.dist; const nextScale = clamp(rawScale); // Anchor the start midpoint's world coords under the current midpoint. const worldX = (start.midX - start.transform.x) / start.transform.scale; const worldY = (start.midY - start.transform.y) / start.transform.scale; setTransform({ scale: nextScale, x: midX - worldX * nextScale, y: midY - worldY * nextScale, }); } }, [clamp, enabled, panBy, panThreshold], ); const onPointerUp = useCallback((e: PointerEvent) => { pointersRef.current = pointersRef.current.filter( (p) => p.id !== e.pointerId, ); if (pointersRef.current.length < 2) pinchStartRef.current = null; if (panStateRef.current?.id === e.pointerId) panStateRef.current = null; }, []); const onPointerCancel = onPointerUp; // ─── Wheel (native non-passive — beats browser page-zoom) ──────────── // Plain wheel (no modifier) zooms when over the canvas. Always // preventDefaults so the browser doesn't also zoom the page. useEffect(() => { if (!enabled) return; const el = targetRef.current; if (!el) return; const handler = (e: WheelEvent) => { e.preventDefault(); const rect = el.getBoundingClientRect(); const center = { x: e.clientX - rect.left, y: e.clientY - rect.top, }; const factor = e.deltaY < 0 ? zoomStep : 1 / zoomStep; zoomBy(factor, center); }; el.addEventListener("wheel", handler, { passive: false }); return () => el.removeEventListener("wheel", handler); }, [enabled, targetRef, zoomBy, zoomStep]); // ─── Keyboard ──────────────────────────────────────────────────────── useEffect(() => { if (!enabled || !bindKeyboard) return; // Focus-scoped: listen on the target element, not window, so the keys only // act while the canvas holds focus and never hijack arrow keys/zoom on the // rest of the page. Requires the target to be focusable (tabIndex). const el = targetRef.current; if (!el) return; const handler = (e: KeyboardEvent) => { // Don't hijack while typing into a nested input. const tgt = e.target as HTMLElement | null; if ( tgt?.tagName === "INPUT" || tgt?.tagName === "TEXTAREA" || tgt?.isContentEditable ) { return; } // Arrow keys move the IMAGE in the arrow's direction (the natural // mental model when you're looking at media you want to reposition), // not the viewport. ArrowRight ⇒ image shifts right ⇒ transform.x +. switch (e.key) { case "ArrowLeft": panBy(-panStep, 0); e.preventDefault(); break; case "ArrowRight": panBy(panStep, 0); e.preventDefault(); break; case "ArrowUp": panBy(0, -panStep); e.preventDefault(); break; case "ArrowDown": panBy(0, panStep); e.preventDefault(); break; case "+": case "=": zoomBy(zoomStep); e.preventDefault(); break; case "-": case "_": zoomBy(1 / zoomStep); e.preventDefault(); break; case "0": reset(); e.preventDefault(); break; } }; el.addEventListener("keydown", handler); return () => el.removeEventListener("keydown", handler); }, [bindKeyboard, enabled, targetRef, panBy, panStep, reset, zoomBy, zoomStep]); return { transform, isIdentity: transform.scale === 1 && transform.x === 0 && transform.y === 0, handlers: { onPointerDown, onPointerMove, onPointerUp, onPointerCancel, }, reset, zoomBy, }; } 59:Tde5,import type { StickerOption, StickerSet } from "../types"; /** * Built-in emoji stickers (Q-P9a — inline data URLs in TS). * * Implemented as SVG-text data URLs rather than base64 PNGs: * - Each sticker is ~180 bytes vs ~3-5KB for an equivalent PNG. * - Vector — scales infinitely with Transformer. * - Renders consistently regardless of host emoji-font (the SVG inlines * the unicode codepoint and the browser renders with its system emoji). * * Total payload for the 36 stickers below: ~6KB → no measurable bundle * bloat (well under the ~80KB ceiling that would trigger a switch to * the separate-PNG-files pattern from description §15 Q-P9b). */ function emojiSticker(id: string, emoji: string, alt: string): StickerOption { const svg = ``; return { id, src: `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`, alt, width: 256, height: 256, }; } const FACES: StickerOption[] = [ emojiSticker("smile", "😀", "Smile"), emojiSticker("laugh", "😂", "Laugh"), emojiSticker("heart-eyes", "😍", "Heart eyes"), emojiSticker("kiss", "😘", "Kiss"), emojiSticker("cool", "😎", "Cool"), emojiSticker("wink", "😉", "Wink"), emojiSticker("thinking", "🤔", "Thinking"), emojiSticker("party", "🥳", "Party"), emojiSticker("sleepy", "😴", "Sleepy"), ]; const HEARTS: StickerOption[] = [ emojiSticker("heart-red", "❤️", "Red heart"), emojiSticker("heart-orange", "🧡", "Orange heart"), emojiSticker("heart-yellow", "💛", "Yellow heart"), emojiSticker("heart-green", "💚", "Green heart"), emojiSticker("heart-blue", "💙", "Blue heart"), emojiSticker("heart-purple", "💜", "Purple heart"), emojiSticker("heart-black", "🖤", "Black heart"), emojiSticker("heart-broken", "💔", "Broken heart"), emojiSticker("heart-sparkle", "💖", "Sparkle heart"), ]; const SYMBOLS: StickerOption[] = [ emojiSticker("fire", "🔥", "Fire"), emojiSticker("star", "⭐", "Star"), emojiSticker("sparkles", "✨", "Sparkles"), emojiSticker("crown", "👑", "Crown"), emojiSticker("rocket", "🚀", "Rocket"), emojiSticker("rainbow", "🌈", "Rainbow"), emojiSticker("sun", "☀️", "Sun"), emojiSticker("moon", "🌙", "Moon"), emojiSticker("lightning", "⚡", "Lightning"), ]; const HANDS: StickerOption[] = [ emojiSticker("thumbs-up", "👍", "Thumbs up"), emojiSticker("clap", "👏", "Clap"), emojiSticker("raised-hands", "🙌", "Raised hands"), emojiSticker("peace", "✌️", "Peace"), emojiSticker("ok-hand", "👌", "OK hand"), emojiSticker("muscle", "💪", "Muscle"), emojiSticker("pray", "🙏", "Pray"), emojiSticker("wave", "👋", "Wave"), emojiSticker("point-up", "☝️", "Point up"), ]; export const BUILT_IN_STICKER_SETS: StickerSet[] = [ { id: "faces", label: "Faces", stickers: FACES }, { id: "hearts", label: "Hearts", stickers: HEARTS }, { id: "symbols", label: "Symbols", stickers: SYMBOLS }, { id: "hands", label: "Hands", stickers: HANDS }, ]; /** * Merge consumer-supplied sticker sets with the built-in catalog. * `replace=true` → consumer set wins entirely. */ export function resolveStickerSets( consumer: StickerSet[] | undefined, replace: boolean, ): StickerSet[] { if (replace) return consumer ?? []; if (!consumer || consumer.length === 0) return BUILT_IN_STICKER_SETS; return [...BUILT_IN_STICKER_SETS, ...consumer]; } 5a:T1b00,import { selectRecorderMime } from "./mime-fallback"; export interface CompositeVideoOptions { sourceBlob: Blob; /** Seconds — trim range. Optional; defaults to full duration. */ startSec?: number; endSec?: number; /** Renders one frame onto the canvas. Called per RAF tick. */ renderFrame: ( ctx: CanvasRenderingContext2D, sourceVideo: HTMLVideoElement, ) => void; /** Output dimensions — usually crop size. */ outputWidth: number; outputHeight: number; /** Capture frame rate. Default 30. */ fps?: number; /** Override mime selection; falls back to selectRecorderMime() chain. */ mimeType?: string; /** MediaRecorder bitsPerSecond (browser default if omitted). */ bitsPerSecond?: number; /** * 0..1; fires ~10× during re-encode keyed off video.currentTime / * (endSec - startSec). Capped at 1 to avoid overshoot on slow ticks. */ onProgress?: (progress: number) => void; } export interface CompositeVideoResult { blob: Blob; durationMs: number; mimeType: string; } /** * Bake text/sticker/drawing overlays into a video file (Q-P1a — full * Instagram parity). * * Pipeline: * 1. Play the source video in a hidden