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

\n Couldn't load source\n

\n

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

\n {props.renderEmpty ? props.renderEmpty() : null}\n
\n ) : isEmptyConfig ? (\n \n {props.renderEmpty ? (\n props.renderEmpty()\n ) : (\n <>\n

\n No source provided\n

\n

\n Pass initialSource or enable a capture mode\n in enabledModes.\n

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

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

\n {\n const firstCapture = enabledModes.find(\n (m) => m === \"photo\" || m === \"video\",\n );\n if (firstCapture) {\n editor.setMode(firstCapture);\n setUserInitiatedCamera(true);\n }\n }}\n className=\"rounded-full bg-primary px-5 py-2 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90\"\n >\n Connect to camera\n \n
\n ) : mediaSources.includes(\"upload\") ||\n mediaSources.includes(\"camera\") ? (\n // Base file/gallery intake — the ONLY intake surface base-alone\n // ships (no capture extension installed), and the fallback when\n // \"camera\" was requested but nothing answered it (dev-warn fired\n // above). Real, not a placeholder: picking a file promotes it\n // through the SAME draft path as a camera capture would\n // (handleGalleryFile → editor.setDraft → stage \"edit\").\n \n ) : (\n <>\n

\n No capture source available\n

\n

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

\n \n )}\n \n \n\n {/* Bottom control overlay — edit stage only. Floats over the bottom of\n the full-bleed canvas (mirrors the camera's overlaid shutter) with a\n scrim, so the tool panel + chip row never steal the canvas's space or\n get clipped by the dialog's bottom edge.\n\n EXCEPTION — crop: the crop frame's bottom drag-handles live at the\n image's bottom edge, so a floating overlay would cover them (you\n couldn't grab the bottom handles). When the crop tool is active the\n controls drop INTO FLOW below the canvas instead — the canvas region\n (flex-1) shrinks to reserve the space, keeping every handle reachable.\n Other tools are sliders/inputs (no canvas-edge handles), so they keep\n the space-saving overlay. */}\n {showEditCanvas ? (\n \n {/* Active tool panel — keyed by editor.activeTool. Renders above the\n chip-row toolbar. Image-draft tools only show on image drafts;\n video-draft trim/etc. land in R4. */}\n {editor.draft?.kind === \"image\" ? (\n <>\n {editor.activeTool === \"text\" && selectedText ? (\n \n \n editor.updateTextOverlay(next.id, next)\n }\n onDelete={() => {\n editor.removeTextOverlay(selectedText.id);\n editor.setSelectedTextId(null);\n }}\n />\n \n ) : null}\n {editor.activeTool === \"stickers\" ? (\n \n \n \n ) : null}\n {editor.activeTool === \"filters\" && editor.draft.url ? (\n \n editor.setFilter(id)}\n />\n \n ) : null}\n {editor.activeTool === \"adjust\" ? (\n \n editor.setAdjustments(next)}\n labels={mergedLabels}\n />\n \n ) : null}\n {editor.activeTool === \"draw\" ? (\n \n editor.setDrawingTool({ color })}\n onBrushSizeChange={(brushSize) =>\n editor.setDrawingTool({ brushSize })\n }\n onModeChange={(mode) => editor.setDrawingTool({ mode })}\n />\n \n ) : null}\n {editor.activeTool === \"crop\" ? (\n
\n {resolvedCropAspects.length > 1 ? (\n
\n {resolvedCropAspects.map((a) => (\n {\n editor.setCropAspect(a);\n editor.setCrop(null);\n }}\n className={cn(\n \"rounded px-2 py-0.5 text-xs font-medium transition-colors\",\n editor.cropAspect === a\n ? \"bg-primary text-primary-foreground\"\n : \"border border-border bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground\",\n )}\n >\n {a}\n \n ))}\n
\n ) : null}\n {\n // Apply crop = burn the cropRect into the source image at\n // NATIVE resolution. We can't use stage.toCanvas() — that\n // captures the displayed stage size (typically smaller than\n // source), so output would be down-sampled. Instead: load\n // the source image as , map cropRect from stage coords\n // → image natural coords via the object-contain fit region,\n // then drawImage into a new canvas at natural resolution.\n const stage = stageRef.current;\n const crop = editor.state.crop;\n const sourceUrl =\n editor.draft?.url ?? editor.state.imageSrc;\n if (!stage || !crop || !sourceUrl) {\n editor.setActiveTool(null);\n return;\n }\n try {\n const img = new Image();\n img.crossOrigin = \"anonymous\";\n await new Promise((resolve, reject) => {\n img.onload = () => resolve();\n img.onerror = () =>\n reject(new Error(\"image load failed\"));\n img.src = sourceUrl;\n });\n // Compute the image's object-contain fit region in stage\n // coords (mirrors the Konva canvas's fitInto helper).\n const stageW = stage.width();\n const stageH = stage.height();\n const fitScale = Math.min(\n stageW / img.naturalWidth,\n stageH / img.naturalHeight,\n );\n const fitW = img.naturalWidth * fitScale;\n const fitH = img.naturalHeight * fitScale;\n const fitX = (stageW - fitW) / 2;\n const fitY = (stageH - fitH) / 2;\n // Intersect crop with fit (clip letterbox area out).\n const ix = Math.max(crop.x, fitX);\n const iy = Math.max(crop.y, fitY);\n const iw =\n Math.min(crop.x + crop.width, fitX + fitW) - ix;\n const ih =\n Math.min(crop.y + crop.height, fitY + fitH) - iy;\n if (iw <= 0 || ih <= 0) {\n editor.setActiveTool(null);\n return;\n }\n // Map intersection to natural image coords.\n const natScale = img.naturalWidth / fitW;\n const sx = (ix - fitX) * natScale;\n const sy = (iy - fitY) * natScale;\n const sw = iw * natScale;\n const sh = ih * natScale;\n const canvas = document.createElement(\"canvas\");\n canvas.width = Math.round(sw);\n canvas.height = Math.round(sh);\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) {\n editor.setActiveTool(null);\n return;\n }\n ctx.drawImage(\n img,\n sx,\n sy,\n sw,\n sh,\n 0,\n 0,\n canvas.width,\n canvas.height,\n );\n const blob = await new Promise((res) => {\n canvas.toBlob(res, \"image/jpeg\", 0.92);\n });\n if (!blob) {\n editor.setActiveTool(null);\n return;\n }\n const newUrl = URL.createObjectURL(blob);\n // Replace draft + imageSrc with the cropped image so the\n // tool sub-panel gate (editor.draft?.kind === \"image\")\n // stays true and re-crop works on the new image.\n editor.setDraft({\n source: editor.draft?.source ?? \"initial\",\n kind: \"image\",\n blob,\n url: newUrl,\n width: canvas.width,\n height: canvas.height,\n mimeType: \"image/jpeg\",\n });\n editor.setImageSrc(newUrl);\n editor.setCrop(null);\n editor.setActiveTool(null);\n } catch {\n editor.setActiveTool(null);\n }\n }}\n className=\"rounded bg-primary px-3 py-1 text-xs font-medium text-primary-foreground hover:opacity-90\"\n >\n Apply\n \n {\n editor.setCrop(null);\n editor.setActiveTool(null);\n }}\n className=\"rounded border border-border bg-muted/40 px-3 py-1 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground\"\n >\n Cancel\n \n
\n ) : null}\n \n ) : null}\n\n {/* Edit-tool chip row — filtered by enabledTools (description §4). Only\n in the edit stage: the tools act on a captured draft, so they have\n nothing to do during capture / text-only / empty-config. Centered when\n the chips fit, horizontally scrollable when they don't, so they never\n crop on narrow (9:16) widths. */}\n {enabledTools.length > 0 && !isEmptyConfig ? (\n
\n
\n {enabledTools.map((tool) => (\n editor.setActiveTool(tool)}\n className={cn(\n \"shrink-0 rounded-full px-3 py-1 text-xs font-medium transition-colors\",\n editor.activeTool === tool\n ? \"bg-primary text-primary-foreground\"\n : \"text-muted-foreground hover:bg-muted hover:text-foreground\",\n )}\n data-tool={tool}\n >\n {toolChipLabel(tool, mergedLabels)}\n \n ))}\n {enabledTools.includes(\"crop\") && resolvedCropAspects.length > 1 ? (\n \n ({resolvedCropAspects.length} crop aspects)\n \n ) : null}\n
\n
\n ) : null}\n \n ) : null}\n\n {props.renderBottomToolbar?.(slotCtx)}\n\n {/* Discard confirm — fires from requestClose() when isDirty + close\n attempt (backdrop / Escape / handle.close()). Q-P10a. */}\n setShowDiscardConfirm(false)}\n onConfirm={() => {\n setShowDiscardConfirm(false);\n performReset();\n props.onClose?.();\n }}\n />\n \n );\n\n // ─── Render — presentation branch ──\n\n if (resolved === \"inline\") {\n return inner;\n }\n\n // Dialog branch — sizing derived from aspect (description §6). On desktop\n // the dialog is a viewport-relative box constrained by aspect-ratio:\n // height-driven for portrait aspects, width-driven for landscape. The\n // unspecified dimension is computed from CSS aspect-ratio; max-* clamps\n // the secondary axis when the driver would force overflow.\n const { aspectRatio, orientation } = dialogDimsForAspect(aspect);\n\n return (\n {\n if (!open) requestClose();\n }}\n >\n \n {mergedLabels.composerLabel}\n \n {mergedLabels.composerDescription}\n \n {inner}\n \n \n );\n});\n\n// ─── Export-time helpers ──────────────────────────────────────────────\n\n/**\n * Returns true if the edit state has any overlay / mutation that would\n * change the output vs the raw source. Drives the video perf-shortcut:\n * if nothing's been changed, skip the MediaRecorder re-encode.\n *\n * Adjustments are checked by ALL three default values — any deviation\n * counts as \"modified.\"\n */\n/** Default display ratio used for `aspect=\"free\"` — chosen to match the\n * typical webcam frame so preview ↔ capture stay consistent and the canvas\n * doesn't render as a too-wide / too-short box. */\nconst FREE_ASPECT_FALLBACK = 16 / 9;\n\n/**\n * Convert an `AspectRatio` string (\"9:16\", \"1:1\", etc.) to a numeric ratio\n * (width / height) for capture-time cropping. For `\"free\"`, returns\n * `FREE_ASPECT_FALLBACK` so the captured frame is cropped to the same shape\n * the canvas is displayed at (avoiding the \"captured photo doesn't match\n * preview\" mismatch the canvas-placeholder uses the same ratio).\n */\nfunction aspectAsRatio(aspect: AspectRatio): number {\n if (aspect === \"free\") return FREE_ASPECT_FALLBACK;\n const [w, h] = aspect.split(\":\").map(Number);\n if (!w || !h) return FREE_ASPECT_FALLBACK;\n return w / h;\n}\n\n/**\n * Base file/gallery intake surface (P3 S3 — part B). The ONLY intake path\n * base-alone ships once the capture feature slice is a separate install:\n * a button + a hidden ``, honoring `maxFileSizeMb` via\n * `validateGalleryFile` (same validation the capture feature's gallery\n * button used pre-split). Matches the existing \"Connect to camera\" chrome —\n * no new visual language.\n */\nfunction FileIntakeSurface({\n galleryLabel,\n maxFileSizeMb,\n onFile,\n onValidationError,\n}: {\n galleryLabel: string;\n maxFileSizeMb: number;\n onFile: (file: File) => void;\n onValidationError?: (error: ValidationError) => void;\n}) {\n const inputRef = React.useRef(null);\n return (\n \n

\n Pick a photo or video from your device.\n

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