4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T3843,"use client"; import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react"; import { MediaEditor, type MediaEditorHandle, type MediaEditorLabels, type EditorCtx, } from "../media-editor"; // Capture feature slice (P3 S3) — story-composer always requests "camera" in // mediaSources (below), so it wires the extension unconditionally. import { mediaCapture } from "../media-editor/features/capture"; import { ComposerPublishBar } from "./parts/composer-publish-bar"; import { PublishingProgressOverlay } from "./parts/publishing-progress-overlay"; import { useImageUploader } from "./hooks/use-image-uploader"; import { DEFAULT_STORY_COMPOSER_LABELS, type ComposerCtx, type ComposerMode, type PublishedStory, type PublishMetadata, type StoryComposerHandle, type StoryComposerLabels, type StoryComposerProps, } from "./types"; /** * StoryComposer v0.2.0 — thin wrapper around `MediaEditor`. * * Maps the v0.1.5 props 1:1 onto the media-editor surface, fixes * `aspect="9:16"` (Instagram-canonical), and overlays the story-shaped * publish flow (XHR upload + progress + onPublished/onPublishError). * * Public API preserved 100%: every v0.1.5 prop is accepted and every * v0.1.5 ref-handle method resolves. Internal orchestration that lived * in this file in v0.1.5 (camera, tool panels, discard guard, history, * text-only canvas) now lives inside MediaEditor — landed in the R1–R4 * backfill commits. * * Known v0.2.0 polish gaps (none break the type contract): * - `labels` overrides pass through verbatim as the v0.1.5 flat shape; * full MediaEditorLabels nested-shape mapping lands at C17. * - `editorBackground` prop is accepted but not forwarded — the * editor canvas always uses "#000" (matches the v0.1.5 default). * Re-exposed in v0.2.1 if needed. * - `renderPublishingOverlay` honored — consumer slot replaces the default * `PublishingProgressOverlay` during publish (slot wiring at C21 review). */ const ALL_MODES: ComposerMode[] = ["photo", "video", "text"]; type PublishStatus = "idle" | "compositing" | "uploading" | "done" | "error"; export const StoryComposer = forwardRef< StoryComposerHandle, StoryComposerProps >(function StoryComposer(props, ref) { const { isOpen, onClose, defaultMode, hideModes, defaultFacing, recordAudio, maxFileSizeMb, maxVideoDuration, presentation = "auto", confirmOnDiscard = true, enabledTools = ["text", "draw", "stickers", "filters", "adjust"], stickers, replaceBuiltinStickers, filterPresets, replaceBuiltinFilters, cropAspects, editorBackground, fonts, colorPresets, labels: labelOverrides, onValidationError, onPermissionDenied, renderTopBar, renderBottomToolbar, renderEmpty, renderPermissionDenied, renderPublishingOverlay, uploadUrl, uploader, uploadFields, onPublished, onPublishError, } = props; const editorRef = useRef(null); // hideModes (subtract) → enabledModes (positive). Empty hideModes ⇒ all // three modes enabled, matching the v0.1.5 default. const enabledModes = useMemo( () => ALL_MODES.filter((m) => !hideModes?.includes(m)), [hideModes], ); // story-composer's `presentation` enum vs media-editor's. "fullscreen" and // "modal" both map to "dialog" since media-editor's dialog mode is // mobile-fullscreen + desktop-modal. "auto" passes through. const editorPresentation = useMemo<"inline" | "dialog" | "auto">(() => { if (presentation === "fullscreen" || presentation === "modal") { return "dialog"; } return "auto"; }, [presentation]); const labels = useMemo>( () => ({ ...DEFAULT_STORY_COMPOSER_LABELS, ...labelOverrides }), [labelOverrides], ); const uploader_ = useImageUploader({ uploadUrl, uploader, uploadFields }); const [publishStatus, setPublishStatus] = useState("idle"); const [uploadProgress, setUploadProgress] = useState(0); // Mirror uploader_.progress (0..1) into uploadProgress's upload half // (0.5..1) so the progress bar advances smoothly through the upload phase // instead of jumping from 0.5 to 1. useEffect(() => { if (publishStatus !== "uploading") return; setUploadProgress(0.5 + uploader_.progress * 0.5); }, [publishStatus, uploader_.progress]); // Cancel pressed while the export/composite is still running: export() can't // be aborted, so when it eventually resolves this ref stops the flow from // resurrecting the upload after the user already dismissed the overlay. const publishCancelledRef = useRef(false); const handlePublish = useCallback(async () => { if (!editorRef.current) return; publishCancelledRef.current = false; try { setPublishStatus("compositing"); setUploadProgress(0); const { blob, metadata } = await editorRef.current.export({ // Export takes the first half of the progress bar; upload the second. onProgress: (p) => setUploadProgress(p * 0.5), }); if (publishCancelledRef.current) return; // ExportMetadata → PublishMetadata (drop the editor-only `crop` field). const publishMeta: PublishMetadata = { mode: metadata.mode, width: metadata.width, height: metadata.height, durationMs: metadata.durationMs, mimeType: metadata.mimeType, textOverlays: metadata.textOverlays, stickers: metadata.stickers, drawingStrokes: metadata.drawingStrokes, appliedFilter: metadata.appliedFilter, adjustments: metadata.adjustments, }; setPublishStatus("uploading"); // Upload runs the second half of the bar; uploader_.progress is mirrored // into uploadProgress via the effect below. const result = await uploader_.upload(blob, publishMeta); if (publishCancelledRef.current) return; setUploadProgress(1); const story: PublishedStory = { id: `story-${Date.now()}`, createdAt: new Date().toISOString(), items: [ { id: `item-${Date.now()}`, type: metadata.mode === "video" ? "video" : "image", src: result.url, duration: metadata.mode === "video" ? Math.round((metadata.durationMs ?? 0) / 1000) || undefined : undefined, thumbnailUrl: result.thumbnailUrl, }, ], }; setPublishStatus("done"); onPublished(story); } catch (err) { const e = err instanceof Error ? err : new Error(String(err)); // Cancellation isn't a failure: the overlay's Cancel already reset the // status, and the aborted XHR now rejects with AbortError. if (publishCancelledRef.current || e.name === "AbortError") return; setPublishStatus("error"); onPublishError?.(e); } }, [uploader_, onPublished, onPublishError]); // EditorCtx → ComposerCtx translation for slot consumers. story-composer's // ctx assumes a non-null mode + has publishing/cancel/publish helpers. const toComposerCtx = useCallback( (ctx: EditorCtx): ComposerCtx => ({ mode: ctx.mode ?? "photo", stage: ctx.stage, isDirty: ctx.isDirty, publishing: { active: publishStatus === "compositing" || publishStatus === "uploading", progress: uploadProgress, }, setMode: (m) => { // No public setter on the handle yet (v0.3.0 may expose setMode()); // round-trip through the editor's typed state surface to flip just the // mode. getState() is non-null, so no cast/fallback is needed. const editor = editorRef.current; if (editor) editor.loadState({ ...editor.getState(), mode: m }); }, cancel: () => onClose(), publish: handlePublish, }), [publishStatus, uploadProgress, handlePublish, onClose], ); useImperativeHandle( ref, (): StoryComposerHandle => ({ open: () => editorRef.current?.open(), close: () => editorRef.current?.close(), reset: () => { editorRef.current?.reset(); setPublishStatus("idle"); setUploadProgress(0); }, switchCamera: async () => { await editorRef.current?.switchCamera(); }, takePhoto: async () => { await editorRef.current?.takePhoto(); }, startRecording: async () => { await editorRef.current?.startRecording(); }, stopRecording: async () => { await editorRef.current?.stopRecording(); }, importFromGallery: () => editorRef.current?.importFromGallery(), addText: (text) => editorRef.current?.addText(text), addSticker: (sticker) => editorRef.current?.addSticker(sticker), setAdjustments: (adj) => editorRef.current?.setAdjustments(adj), applyFilter: (name) => editorRef.current?.applyFilter(name), publish: handlePublish, exportBlob: async () => { if (!editorRef.current) { throw new Error("story-composer: editor not mounted"); } const out = await editorRef.current.export(); const publishMeta: PublishMetadata = { mode: out.metadata.mode, width: out.metadata.width, height: out.metadata.height, durationMs: out.metadata.durationMs, mimeType: out.metadata.mimeType, textOverlays: out.metadata.textOverlays, stickers: out.metadata.stickers, drawingStrokes: out.metadata.drawingStrokes, appliedFilter: out.metadata.appliedFilter, adjustments: out.metadata.adjustments, }; return { blob: out.blob, metadata: publishMeta }; }, }), [handlePublish], ); /* * `editorBackground` has never been applied. StoryComposer is a thin wrapper * that renders `` directly — there is no container of its own to * paint, and MediaEditor exposes no background prop to forward to, so * honouring this would be a cross-component feature rather than a wiring fix. * * Until then it says so out loud. A styling prop that silently does nothing * is the most expensive kind to debug: the consumer assumes their value is * wrong, not that the prop is dead. */ useEffect(() => { if (process.env.NODE_ENV === "production") return; if (editorBackground === undefined) return; console.warn( "story-composer: `editorBackground` is not implemented and has no effect — StoryComposer renders MediaEditor directly and has no surface of its own to paint. Style the editor from your own layout instead.", ); }, [editorBackground]); return ( <> } onValidationError={onValidationError} onPermissionDenied={onPermissionDenied} renderEmpty={renderEmpty} renderPermissionDenied={renderPermissionDenied} renderTopBar={(ctx) => renderTopBar ? ( renderTopBar(toComposerCtx(ctx)) ) : ( ) } renderBottomToolbar={ renderBottomToolbar ? (ctx) => renderBottomToolbar(toComposerCtx(ctx)) : undefined } /> {publishStatus === "uploading" || publishStatus === "compositing" || publishStatus === "error" ? ( renderPublishingOverlay ? ( renderPublishingOverlay({ progress: uploadProgress, mode: (editorRef.current?.getMode() ?? "photo") as ComposerMode, }) ) : ( { publishCancelledRef.current = true; uploader_.cancel(); setPublishStatus("idle"); setUploadProgress(0); }} /> ) ) : null} ); }); 52:T1370,// ─── Main component ──────────────────────────────────────────────────── export { StoryComposer } from "./story-composer"; // ─── Types ───────────────────────────────────────────────────────────── export type { StoryComposerProps, StoryComposerHandle, StoryComposerLabels, ComposerMode, ComposerStage, ComposerCtx, ValidationError, StickerOption, StickerSet, FontOption, FilterPreset, KonvaFilterSpec, ImageAdjustments, TextOverlay, PlacedSticker, DrawingStroke, AspectRatio, EditTool, PublishMetadata, PublishResult, PublishedStory, PublishedStoryItem, Uploader, } from "./types"; export { DEFAULT_STORY_COMPOSER_LABELS, DEFAULT_ADJUSTMENTS, } from "./types"; // ─── Exported sealed-folder parts ────────────────────────────────────── // ComposerPublishBar STAYS in story-composer (story-shaped publish UI). export { ComposerPublishBar } from "./parts/composer-publish-bar"; export type { ComposerPublishBarProps } from "./parts/composer-publish-bar"; // v0.1.5 ComposerCamera/ComposerEditor/ComposerToolbar/ColorSwatchPicker // backward-compat aliases (+ their Props types). Unlike the useMediaCapture // band (explicitly scheduled and removed at v0.3.0+), THIS band carried a bare // @deprecated with no removal version, and the v0.1.5 export contract snapshot // says these names must still resolve — so they stay, now with a real // schedule. R4 restoration (2026-08-11): removal announced for v0.5.0. // `EditorCamera` lives in the capture feature slice since the P3 split. /** @deprecated since v0.2.0 — import from `@ilinxa/media-editor` / `@ilinxa/media-editor-capture` instead. REMOVED in v0.5.0. */ export { EditorCamera as ComposerCamera } from "../media-editor/features/capture"; /** @deprecated since v0.2.0 — import `EditorCanvas` from `@ilinxa/media-editor` instead. REMOVED in v0.5.0. */ export { EditorCanvas as ComposerEditor, EditorToolbar as ComposerToolbar, ColorSwatchPicker, } from "../media-editor"; /** @deprecated since v0.2.0 — import the `Editor*Props` types from `@ilinxa/media-editor` / `@ilinxa/media-editor-capture` instead. REMOVED in v0.5.0. */ export type { EditorCanvasProps as ComposerEditorProps, EditorToolbarProps as ComposerToolbarProps, ColorSwatchPickerProps, } from "../media-editor"; export type { EditorCameraProps as ComposerCameraProps } from "../media-editor/features/capture"; // ─── Exported hooks (plan §10) ───────────────────────────────────────── export { useStoryComposerState, type UseStoryComposerStateOptions, type UseStoryComposerStateResult, } from "./hooks/use-story-composer-state"; // useMediaCapture/CapturedPhoto/CapturedVideo/etc. v0.1.5 backward-compat // re-exports — REMOVED at v0.4.0 per the v0.2.0 @deprecated schedule. // `useMediaCapture` moved again in P3 S3: import from // `@ilinxa/media-editor-capture`. `validateGalleryFile` stayed on // `@ilinxa/media-editor` (generic file-intake). export { useImageUploader, type UseImageUploaderOptions, type UseImageUploaderResult, type UploadStatus, } from "./hooks/use-image-uploader"; // ─── Lib helpers ─────────────────────────────────────────────────────── // All lib helpers moved to media-editor in v0.2.0. // @deprecated import from "@ilinxa/media-editor" — removed in v0.3.0. export { resolveFilterPresets, BUILT_IN_FILTER_PRESETS, resolveStickerSets, BUILT_IN_STICKER_SETS, exportPhotoBlob, exportTextOnlyBlob, type ExportPhotoOptions, compositeVideo, type CompositeVideoOptions, type CompositeVideoResult, selectRecorderMime, containerFor, PREFERRED_RECORDER_MIME_TYPES, type RecorderMimeType, } from "../media-editor"; // ─── Default tokens ──────────────────────────────────────────────────── // Moved to media-editor/lib/defaults.ts in v0.2.0. // @deprecated import from "@ilinxa/media-editor" — removed in v0.3.0. export { DEFAULT_TEXT_GRADIENTS, DEFAULT_FONTS, DEFAULT_COLOR_PRESETS, type GradientPreset, } from "../media-editor"; // ─── Crop helpers (CropRect type lives here; helper functions too) ───── // Crop helpers moved with tool-crop-overlay to media-editor in v0.2.0. // @deprecated import from "@ilinxa/media-editor" — removed in v0.3.0. export { fitCropToStage, ASPECT_RATIO_VALUES, type CropRect, } from "../media-editor"; 53:T2a7a,import type { ReactNode } from "react"; import type { AspectRatio } from "../media-editor"; export type { AspectRatio }; // ─── Modes + stage ────────────────────────────────────────────────────── export type ComposerMode = "photo" | "video" | "text"; export type ComposerStage = | "capture" | "edit" | "publishing" | "done" | "error"; // ─── Validation ───────────────────────────────────────────────────────── export interface ValidationError { kind: | "file-too-large" | "unsupported-type" | "unsupported-codec" | "duration-exceeded" | "no-camera" | "permission-denied"; message: string; file?: File; } // ─── Stickers ─────────────────────────────────────────────────────────── export interface StickerOption { id: string; src: string; alt: string; width?: number; height?: number; } export interface StickerSet { id: string; label: string; stickers: StickerOption[]; } // ─── Filters + adjustments ────────────────────────────────────────────── export interface KonvaFilterSpec { name: string; params?: Record; } export interface FilterPreset { id: string; label: string; konvaFilters: KonvaFilterSpec[]; } export interface ImageAdjustments { brightness: number; contrast: number; saturation: number; blur: number; } export const DEFAULT_ADJUSTMENTS: ImageAdjustments = { brightness: 0, contrast: 0, saturation: 0, blur: 0, }; // ─── Overlay items ────────────────────────────────────────────────────── export interface TextOverlay { id: string; text: string; x: number; y: number; rotation: number; scale: number; fontFamily: string; fontSize: number; fill: string; align: "left" | "center" | "right"; } export interface PlacedSticker { id: string; stickerId: string; x: number; y: number; rotation: number; scale: number; } export interface DrawingStroke { id: string; points: number[]; color: string; brushSize: number; mode: "draw" | "erase"; } // ─── Fonts ────────────────────────────────────────────────────────────── export interface FontOption { id: string; label: string; family: string; } // ─── Aspect ratios + tools ────────────────────────────────────────────── // AspectRatio moved to media-editor in v0.2.0 (added "16:9" as additive // non-breaking extension — narrowing-style consumers unaffected). // Imported here so this types.ts can reference AspectRatio internally + re-exports it. export type EditTool = | "text" | "draw" | "stickers" | "filters" | "adjust" | "crop"; // ─── Publish ──────────────────────────────────────────────────────────── export interface PublishMetadata { mode: ComposerMode; width: number; height: number; durationMs?: number; mimeType: string; textOverlays: TextOverlay[]; stickers: PlacedSticker[]; drawingStrokes: number; appliedFilter?: string; adjustments: ImageAdjustments; } export interface PublishResult { url: string; thumbnailUrl?: string; [key: string]: unknown; } export interface PublishedStoryItem { id: string; type: "image" | "video"; src: string; duration?: number; thumbnailUrl?: string; } export interface PublishedStory { id: string; createdAt: string; items: PublishedStoryItem[]; } // ─── Slot context ─────────────────────────────────────────────────────── export interface ComposerCtx { mode: ComposerMode; stage: ComposerStage; isDirty: boolean; publishing: { active: boolean; progress: number }; setMode: (m: ComposerMode) => void; cancel: () => void; publish: () => Promise; } // ─── Uploader ─────────────────────────────────────────────────────────── export type Uploader = ( blob: Blob, metadata: PublishMetadata, ) => Promise; // ─── i18n labels ──────────────────────────────────────────────────────── export interface StoryComposerLabels { composerLabel?: string; composerDescription?: string; modePhoto?: string; modeVideo?: string; modeText?: string; shutterPhoto?: string; shutterVideoStart?: string; shutterVideoStop?: string; galleryPicker?: string; switchCamera?: string; permissionDeniedTitle?: string; permissionDeniedBody?: string; permissionRetry?: string; permissionUsePicker?: string; permissionRequesting?: string; toolText?: string; toolDraw?: string; toolStickers?: string; toolFilters?: string; toolAdjust?: string; toolCrop?: string; adjustBrightness?: string; adjustContrast?: string; adjustSaturation?: string; adjustBlur?: string; drawColor?: string; drawBrush?: string; drawEraser?: string; drawUndo?: string; drawRedo?: string; textPlaceholder?: string; textFontFamily?: string; textFontSize?: string; textAlign?: string; publish?: string; publishing?: string; published?: string; close?: string; discardConfirmTitle?: string; discardConfirmBody?: string; discardConfirm?: string; discardCancel?: string; uploadFailedTitle?: string; uploadRetry?: string; recordingLabel?: string; trimStart?: string; trimEnd?: string; } export const DEFAULT_STORY_COMPOSER_LABELS: Required = { composerLabel: "Create story", composerDescription: "Create a new story by capturing a photo, recording a video, or composing a text-only message. Tap the close button to exit.", modePhoto: "Photo", modeVideo: "Video", modeText: "Text", shutterPhoto: "Take photo", shutterVideoStart: "Start recording", shutterVideoStop: "Stop recording", galleryPicker: "Choose from gallery", switchCamera: "Switch camera", permissionDeniedTitle: "Camera access blocked", permissionDeniedBody: "We need camera permission to capture your story. Enable it in your browser settings, or choose a file from your gallery.", permissionRetry: "Try again", permissionUsePicker: "Use gallery instead", permissionRequesting: "Requesting camera…", toolText: "Text", toolDraw: "Draw", toolStickers: "Stickers", toolFilters: "Filters", toolAdjust: "Adjust", toolCrop: "Crop", adjustBrightness: "Brightness", adjustContrast: "Contrast", adjustSaturation: "Saturation", adjustBlur: "Blur", drawColor: "Color", drawBrush: "Brush size", drawEraser: "Eraser", drawUndo: "Undo", drawRedo: "Redo", textPlaceholder: "Type something…", textFontFamily: "Font", textFontSize: "Size", textAlign: "Align", publish: "Publish", publishing: "Publishing…", published: "Published", close: "Close", discardConfirmTitle: "Discard story?", discardConfirmBody: "You'll lose your captured media and edits. This can't be undone.", discardConfirm: "Discard", discardCancel: "Keep editing", uploadFailedTitle: "Upload failed", uploadRetry: "Try again", recordingLabel: "Recording", trimStart: "Start", trimEnd: "End", }; // ─── Public component props ───────────────────────────────────────────── export interface StoryComposerProps { // Display isOpen: boolean; onClose: () => void; // Publish destination uploadUrl?: string; uploader?: Uploader; uploadFields?: Record; onPublished: (story: PublishedStory) => void; onPublishError?: (error: Error) => void; // Capture defaultMode?: ComposerMode; hideModes?: ComposerMode[]; defaultFacing?: "user" | "environment"; maxVideoDuration?: number; recordAudio?: boolean; maxFileSizeMb?: number; onValidationError?: (error: ValidationError) => void; // Edit tools stickers?: StickerSet[]; replaceBuiltinStickers?: boolean; fonts?: FontOption[]; colorPresets?: string[]; filterPresets?: FilterPreset[]; replaceBuiltinFilters?: boolean; enabledTools?: EditTool[]; // Layout + behavior cropAspects?: AspectRatio[]; presentation?: "auto" | "fullscreen" | "modal"; /** * @notImplemented Declared since v0.1 and never applied — StoryComposer * renders `MediaEditor` directly, so it has no surface of its own to paint, * and MediaEditor exposes no background prop to forward to. Passing it warns * in development. Style the editor from your own layout instead. */ editorBackground?: string; confirmOnDiscard?: boolean; // Localization labels?: Partial; // Permissions onPermissionDenied?: () => void; // Slots renderTopBar?: (ctx: ComposerCtx) => ReactNode; renderBottomToolbar?: (ctx: ComposerCtx) => ReactNode; renderPermissionDenied?: (ctx: { retry: () => void; usePicker: () => void; }) => ReactNode; renderEmpty?: () => ReactNode; renderPublishingOverlay?: (ctx: { progress: number; mode: ComposerMode; }) => ReactNode; } // ─── Imperative handle ────────────────────────────────────────────────── export interface StoryComposerHandle { // Lifecycle open: () => void; close: () => void; reset: () => void; // Capture switchCamera: () => Promise; takePhoto: () => Promise; startRecording: () => Promise; stopRecording: () => Promise; importFromGallery: () => void; // Edit addText: (text?: string) => void; addSticker: (sticker: StickerOption) => void; setAdjustments: (adj: Partial) => void; applyFilter: (name: string | null) => void; // Publish publish: () => Promise; exportBlob: () => Promise<{ blob: Blob; metadata: PublishMetadata }>; } 54:T14e2,"use client"; import { useCallback, useRef, useState } from "react"; import type { PublishMetadata, PublishResult, Uploader, } from "../types"; export type UploadStatus = | "idle" | "uploading" | "done" | "error" | "cancelled"; export interface UseImageUploaderOptions { /** Server endpoint for default POST FormData upload (Q-P6a). */ uploadUrl?: string; /** Extra FormData fields appended to every request. */ uploadFields?: Record; /** Custom uploader — wins over uploadUrl when both are set. */ uploader?: Uploader; } export interface UseImageUploaderResult { status: UploadStatus; /** 0..1 — determinate when XMLHttpRequest reports lengthComputable. */ progress: number; error: Error | null; upload: (blob: Blob, metadata: PublishMetadata) => Promise; cancel: () => void; reset: () => void; } /** * Default POST FormData uploader (Q-P6a) + escape hatch for signed-URL flows. * * XMLHttpRequest, not fetch — fetch lacks upload-progress events in browsers, * which the publishing overlay needs for a determinate progress bar. */ export function useImageUploader( options: UseImageUploaderOptions, ): UseImageUploaderResult { const { uploadUrl, uploadFields, uploader } = options; const [status, setStatus] = useState("idle"); const [progress, setProgress] = useState(0); const [error, setError] = useState(null); const xhrRef = useRef(null); const reset = useCallback(() => { setStatus("idle"); setProgress(0); setError(null); }, []); const cancel = useCallback(() => { xhrRef.current?.abort(); xhrRef.current = null; setStatus("cancelled"); }, []); const upload = useCallback( async (blob: Blob, metadata: PublishMetadata): Promise => { setStatus("uploading"); setProgress(0); setError(null); // Custom uploader path (S3 pre-signed PUT / Cloudinary / Mux). if (uploader) { try { const result = await uploader(blob, metadata); setStatus("done"); setProgress(1); return result; } catch (err) { const e = err as Error; setStatus("error"); setError(e); throw e; } } // Default POST FormData path. if (!uploadUrl) { const e = new Error( "story-composer: pass `uploadUrl` or `uploader` to publish.", ); setStatus("error"); setError(e); throw e; } return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhrRef.current = xhr; xhr.open("POST", uploadUrl, true); xhr.upload.onprogress = (ev) => { if (ev.lengthComputable) { setProgress(ev.loaded / ev.total); } }; xhr.onload = () => { xhrRef.current = null; if (xhr.status >= 200 && xhr.status < 300) { try { const text = xhr.responseText; const parsed: PublishResult = text ? JSON.parse(text) : { url: "" }; if (!parsed.url) { // Allow servers that return 200 without a body, but caller // probably wants the URL — leave it blank and proceed. parsed.url = ""; } setStatus("done"); setProgress(1); resolve(parsed); } catch (parseErr) { const e = parseErr instanceof Error ? parseErr : new Error("Upload response was not JSON"); setStatus("error"); setError(e); reject(e); } } else { const e = new Error(`Upload failed (HTTP ${xhr.status})`); setStatus("error"); setError(e); reject(e); } }; xhr.onerror = () => { xhrRef.current = null; const e = new Error("Upload network error"); setStatus("error"); setError(e); reject(e); }; xhr.onabort = () => { xhrRef.current = null; // status already set to "cancelled" by cancel(). Reject so awaiting // callers don't hang forever — DOMException/AbortError mirrors the // fetch abort contract, so callers can filter it from real errors. reject(new DOMException("Upload cancelled", "AbortError")); }; const form = new FormData(); const ext = blob.type.includes("webm") ? "webm" : blob.type.includes("mp4") ? "mp4" : blob.type.includes("png") ? "png" : "jpg"; form.append( "file", blob, `story-${Date.now()}.${ext}`, ); // Append metadata as a JSON string so backends can pick keys they want. form.append("metadata", JSON.stringify(metadata)); if (uploadFields) { for (const [k, v] of Object.entries(uploadFields)) form.append(k, v); } xhr.send(form); }); }, [uploadFields, uploadUrl, uploader], ); return { status, progress, error, upload, cancel, reset }; } 55:T1478,"use client"; import { useCallback, useMemo, useRef, useState } from "react"; import { useMediaEditorState, type UseMediaEditorStateResult, } from "../../media-editor"; import type { ComposerMode, ComposerStage } from "../types"; /** * useStoryComposerState — v0.2.0. * * Composes `useMediaEditorState` (the editor-shaped state machine * extracted to media-editor v0.1.0) and augments with story-shaped * publish state (publishStatus / uploadProgress / publishError). * * **Return-shape invariant.** Every v0.1.5 field is preserved with the * same identifier and type. New fields are additive: * - All useMediaEditorState fields spread first (state / activeTool / * draft / trim / overlay setters / etc.). * - v0.1.5 fields override / augment: mode (non-null), stage, * visibleModes, setMode (wrapped to preserve switch-during-edit- * resets-stage semantics), markDirty (no-op + dev-warn — isDirty * is now derived). * - Publish-shaped additions tail-spread: publishStatus, * uploadProgress, publishError, and their setters. * * Consumers who only read v0.1.5 fields keep working unchanged. Consumers * who want the new editor-shaped surface (draft, drawingTool, etc.) can * access them directly. */ const ALL_MODES: ComposerMode[] = ["photo", "video", "text"]; export type PublishStatus = | "idle" | "compositing" | "uploading" | "done" | "error"; export interface UseStoryComposerStateOptions { defaultMode?: ComposerMode; hideModes?: ComposerMode[]; /** Forwarded to useMediaEditorState onDirtyChange. */ onDirtyChange?: (isDirty: boolean) => void; } export interface UseStoryComposerStateResult extends Omit { // === v0.1.5 surface preserved === /** Non-null mode — defaults to first visible mode if editor state is null. */ mode: ComposerMode; stage: ComposerStage; visibleModes: ComposerMode[]; /** v0.1.5 setMode preserved (non-null arg). Resets stage to "capture" + drops draft on a switch-during-edit. */ setMode: (mode: ComposerMode) => void; /** * @deprecated v0.2.0 — isDirty is now derived from useMediaEditorState. * markDirty(true) is a no-op + dev console.warn. Override the derivation * by writing to the editor state directly. */ markDirty: (dirty?: boolean) => void; // === v0.2.0 publish-shaped additions === publishStatus: PublishStatus; uploadProgress: number; publishError: Error | null; setPublishStatus: (status: PublishStatus) => void; setUploadProgress: (progress: number) => void; setPublishError: (error: Error | null) => void; } export function useStoryComposerState( options: UseStoryComposerStateOptions = {}, ): UseStoryComposerStateResult { const { defaultMode = "photo", hideModes = [], onDirtyChange } = options; const visibleModes = useMemo( () => ALL_MODES.filter((m) => !hideModes.includes(m)), [hideModes], ); // If the default mode is hidden, fall back to the first visible mode. const initialMode = visibleModes.includes(defaultMode) ? defaultMode : (visibleModes[0] ?? "photo"); const editor = useMediaEditorState({ defaultMode: initialMode, onDirtyChange, }); // v0.1.5 semantics: switching mode while editing drops back to capture + // discards the draft. useMediaEditorState's bare setMode doesn't do that. const setMode = useCallback( (mode: ComposerMode) => { if (mode === editor.state.mode) return; if (editor.state.stage === "edit") { editor.setStage("capture"); editor.setDraft(null); } editor.setMode(mode); }, [editor], ); // markDirty: v0.1.5 manually toggled an isDirty flag. v0.2.0 derives // isDirty from useMediaEditorState. Preserved as a no-op + dev warn so // existing callers compile and run; visual behavior is governed by the // derived value. const warnedRef = useRef(false); const markDirty = useCallback((dirty: boolean = true) => { if (process.env.NODE_ENV === "production") return; if (warnedRef.current) return; warnedRef.current = true; console.warn( "useStoryComposerState.markDirty(" + dirty + ") is a no-op in v0.2.0 — isDirty is derived from useMediaEditorState. " + "Drive dirty via setDraft / addTextOverlay / etc. instead. " + "Removed in v0.3.0.", ); }, []); const [publishStatus, setPublishStatus] = useState("idle"); const [uploadProgress, setUploadProgress] = useState(0); const [publishError, setPublishError] = useState(null); // Reset clears publish state alongside the editor state. const baseReset = editor.reset; const reset = useCallback(() => { baseReset(); setPublishStatus("idle"); setUploadProgress(0); setPublishError(null); }, [baseReset]); return { ...editor, // v0.1.5 overrides — non-null mode, custom setMode, markDirty shim mode: editor.state.mode ?? initialMode, stage: editor.state.stage, visibleModes, setMode, markDirty, reset, // Publish-shaped additions publishStatus, uploadProgress, publishError, setPublishStatus, setUploadProgress, setPublishError, }; } 56:Tba5,"use client"; import { Loader2, Send, X } from "lucide-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import type { StoryComposerLabels } from "../types"; export interface ComposerPublishBarProps { isPublishing: boolean; canPublish: boolean; /** * Show the publish CTA. Defaults to true. The parent passes false during the * capture stage — nothing has been captured yet, so a disabled Publish button * just crowds the mode pill on narrow (9:16) widths. */ showPublish?: boolean; /** * Show the close (X) button. Defaults to true. The parent passes false in the * edit stage when the editor renders its own Back arrow in the same corner — * Back replaces close (Instagram convention). Edit-only consumers with no * capture mode keep close, since there's no Back to fall back to. */ showClose?: boolean; labels: Required; onPublish: () => void; onClose: () => void; className?: string; } /** * Top bar — close (left) + publish CTA (right). * * Replaces the C3-era right-slot placeholder. Mounted by the parent only * when stage === "edit"; the capture stage keeps its own simple top bar. */ export function ComposerPublishBar({ isPublishing, canPublish, showPublish = true, showClose = true, labels, onPublish, onClose, className, }: ComposerPublishBarProps) { return (

{showClose ? ( ) : null} {showPublish ? ( ) : null}

); } 57:Tbaf,"use client"; import { AlertTriangle, Loader2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import type { StoryComposerLabels } from "../types"; export interface PublishingProgressOverlayProps { /** 0..1 — null when indeterminate (no length-computable from server). */ progress: number | null; /** * "done" is intentionally NOT a state here — the composer dismisses the * overlay on success (onPublished), so only the in-flight + error states * render. Kept narrow so the dead "published" arm can't drift back in. */ status: "uploading" | "error"; errorMessage?: string; labels: Required; onRetry?: () => void; onCancel?: () => void; className?: string; } export function PublishingProgressOverlay({ progress, status, errorMessage, labels, onRetry, onCancel, className, }: PublishingProgressOverlayProps) { return (

{status === "uploading" ? ( <>

{labels.publishing}

{progress !== null ? (

{Math.round(progress * 100)}%

) : null} {onCancel ? ( ) : null} ) : ( <>

{labels.uploadFailedTitle}

{errorMessage ? (

{errorMessage}

) : null} {onRetry ? ( ) : null} )}

); } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@ilinxa","registryDependencies":["@ilinxa/media-editor","@ilinxa/media-editor-capture","button"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/components/media/story-composer/story-composer.tsx","content":"$51","type":"registry:component","target":"components/story-composer/story-composer.tsx"},{"path":"src/registry/components/media/story-composer/index.ts","content":"$52","type":"registry:component","target":"components/story-composer/index.ts"},{"path":"src/registry/components/media/story-composer/types.ts","content":"$53","type":"registry:component","target":"components/story-composer/types.ts"},{"path":"src/registry/components/media/story-composer/hooks/use-image-uploader.ts","content":"$54","type":"registry:component","target":"components/story-composer/hooks/use-image-uploader.ts"},{"path":"src/registry/components/media/story-composer/hooks/use-story-composer-state.ts","content":"$55","type":"registry:component","target":"components/story-composer/hooks/use-story-composer-state.ts"},{"path":"src/registry/components/media/story-composer/parts/composer-publish-bar.tsx","content":"$56","type":"registry:component","target":"components/story-composer/parts/composer-publish-bar.tsx"},{"path":"src/registry/components/media/story-composer/parts/publishing-progress-overlay.tsx","content":"$57","type":"registry:component","target":"components/story-composer/parts/publishing-progress-overlay.tsx"}],"className":"h-[70svh] min-h-80"}]]}]