@basementstudio/shader-lab 0.1.0 → 1.0.2

package/src/components/editor/editor-export-dialog.tsx

@@ -1,1177 +0,0 @@
-"use client"
-
-import {
-  CopyIcon,
-  FileArrowDownIcon,
-  FolderIcon,
-  UploadSimpleIcon,
-  X,
-} from "@phosphor-icons/react"
-import { AnimatePresence, motion, useReducedMotion } from "motion/react"
-import {
-  type ChangeEvent,
-  type DragEvent,
-  type ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react"
-import { createPortal } from "react-dom"
-import { Button } from "@/components/ui/button"
-import { GlassPanel } from "@/components/ui/glass-panel"
-import { IconButton } from "@/components/ui/icon-button"
-import { Typography } from "@/components/ui/typography"
-import { cn } from "@/lib/cn"
-import {
-  ASPECT_PRESET_LABELS,
-  type ExportAspectPreset,
-  type ExportQualityPreset,
-  exportStillImage,
-  exportVideo,
-  getAspectRatioForPreset,
-  getDimensionsForPreset,
-  getSupportedVideoMimeType,
-  type VideoExportFormat,
-} from "@/lib/editor/export"
-import {
-  applyLabProjectFile,
-  buildLabProjectFile,
-  parseLabProjectFile,
-} from "@/lib/editor/project-file"
-import {
-  buildShaderExportConfig,
-  validateShaderExportSupport,
-} from "@/lib/editor/shader-export"
-import { generateShaderExportSnippet } from "@/lib/editor/shader-export-snippet"
-import {
-  useAssetStore,
-  useEditorStore,
-  useLayerStore,
-  useTimelineStore,
-} from "@/store"
-
-type ExportTab = "image" | "project" | "shader" | "video"
-
-const QUALITY_LABELS: Record<ExportQualityPreset, string> = {
-  draft: "Draft",
-  high: "High",
-  standard: "Standard",
-  ultra: "Ultra",
-}
-
-const ASPECT_PRESETS: ExportAspectPreset[] = [
-  "original",
-  "1:1",
-  "4:5",
-  "16:9",
-  "9:16",
-]
-const QUALITY_PRESETS: ExportQualityPreset[] = [
-  "draft",
-  "standard",
-  "high",
-  "ultra",
-]
-const VIDEO_FPS_PRESETS = [24, 30, 60] as const
-
-interface EditorExportDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}
-
-export function EditorExportDialog({
-  open,
-  onOpenChange,
-}: EditorExportDialogProps) {
-  const reduceMotion = useReducedMotion() ?? false
-  const compositionSize = useEditorStore((state) => state.canvasSize)
-  const assets = useAssetStore((state) => state.assets)
-  const layers = useLayerStore((state) => state.layers)
-  const timelineDuration = useTimelineStore((state) => state.duration)
-  const timelineLoop = useTimelineStore((state) => state.loop)
-  const timelineTracks = useTimelineStore((state) => state.tracks)
-  const [activeTab, setActiveTab] = useState<ExportTab>("image")
-  const [mounted, setMounted] = useState(false)
-  const [isDraggingImport, setIsDraggingImport] = useState(false)
-  const [isWorking, setIsWorking] = useState(false)
-  const [statusMessage, setStatusMessage] = useState<string | null>(null)
-  const [errorMessage, setErrorMessage] = useState<string | null>(null)
-  const [contentHeight, setContentHeight] = useState<number | null>(null)
-  const [imageAspect, setImageAspect] = useState<ExportAspectPreset>("original")
-  const [imageQuality, setImageQuality] =
-    useState<ExportQualityPreset>("standard")
-  const [imageSize, setImageSize] = useState(() =>
-    getDimensionsForPreset(
-      useEditorStore.getState().canvasSize,
-      "original",
-      "standard"
-    )
-  )
-  const [videoAspect, setVideoAspect] = useState<ExportAspectPreset>("original")
-  const [videoQuality, setVideoQuality] =
-    useState<ExportQualityPreset>("standard")
-  const [videoSize, setVideoSize] = useState(() =>
-    getDimensionsForPreset(
-      useEditorStore.getState().canvasSize,
-      "original",
-      "standard"
-    )
-  )
-  const [videoDuration, setVideoDuration] = useState(6)
-  const [videoFps, setVideoFps] = useState(30)
-  const [videoFormat, setVideoFormat] = useState<VideoExportFormat>("webm")
-  const [isCopyingShader, setIsCopyingShader] = useState(false)
-  const importInputRef = useRef<HTMLInputElement | null>(null)
-  const measureRef = useRef<HTMLDivElement | null>(null)
-
-  const mp4Supported = Boolean(getSupportedVideoMimeType("mp4"))
-  const webmSupported = Boolean(getSupportedVideoMimeType("webm"))
-  const shaderExportIssues = useMemo(
-    () => validateShaderExportSupport(layers, assets),
-    [assets, layers]
-  )
-  const shaderSnippet = useMemo(() => {
-    if (shaderExportIssues.length > 0) {
-      return null
-    }
-
-    return generateShaderExportSnippet(
-      buildShaderExportConfig({
-        assets,
-        composition: compositionSize,
-        layers,
-        timeline: {
-          duration: timelineDuration,
-          loop: timelineLoop,
-          tracks: timelineTracks,
-        },
-      })
-    )
-  }, [
-    assets,
-    compositionSize,
-    layers,
-    shaderExportIssues,
-    timelineDuration,
-    timelineLoop,
-    timelineTracks,
-  ])
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  useEffect(() => {
-    const node = measureRef.current
-
-    if (!node) {
-      return
-    }
-
-    const updateHeight = () => {
-      setContentHeight(Math.ceil(node.getBoundingClientRect().height))
-    }
-
-    updateHeight()
-
-    const observer = new ResizeObserver(() => {
-      updateHeight()
-    })
-
-    observer.observe(node)
-
-    return () => {
-      observer.disconnect()
-    }
-  }, [])
-
-  useEffect(() => {
-    setImageSize(
-      getDimensionsForPreset(compositionSize, imageAspect, imageQuality)
-    )
-  }, [compositionSize, imageAspect, imageQuality])
-
-  useEffect(() => {
-    setVideoSize(
-      getDimensionsForPreset(compositionSize, videoAspect, videoQuality)
-    )
-  }, [compositionSize, videoAspect, videoQuality])
-
-  useEffect(() => {
-    if (!open) {
-      return
-    }
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        onOpenChange(false)
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDown)
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown)
-    }
-  }, [onOpenChange, open])
-
-  const clearFeedback = useCallback(() => {
-    setErrorMessage(null)
-    setStatusMessage(null)
-  }, [])
-
-  const setNextTab = useCallback(
-    (nextTab: ExportTab) => {
-      if (nextTab === activeTab) {
-        return
-      }
-
-      clearFeedback()
-      setActiveTab(nextTab)
-    },
-    [activeTab, clearFeedback]
-  )
-
-  function updateImageWidth(nextWidth: number) {
-    const width = Math.max(1, Math.round(nextWidth))
-    const ratio = getAspectRatioForPreset(compositionSize, imageAspect)
-
-    setImageSize({
-      height: Math.max(1, Math.round(width / ratio)),
-      width,
-    })
-  }
-
-  function updateImageHeight(nextHeight: number) {
-    const height = Math.max(1, Math.round(nextHeight))
-    const ratio = getAspectRatioForPreset(compositionSize, imageAspect)
-
-    setImageSize({
-      height,
-      width: Math.max(1, Math.round(height * ratio)),
-    })
-  }
-
-  function updateVideoWidth(nextWidth: number) {
-    const width = Math.max(1, Math.round(nextWidth))
-    const ratio = getAspectRatioForPreset(compositionSize, videoAspect)
-
-    setVideoSize({
-      height: Math.max(1, Math.round(width / ratio)),
-      width,
-    })
-  }
-
-  function updateVideoHeight(nextHeight: number) {
-    const height = Math.max(1, Math.round(nextHeight))
-    const ratio = getAspectRatioForPreset(compositionSize, videoAspect)
-
-    setVideoSize({
-      height,
-      width: Math.max(1, Math.round(height * ratio)),
-    })
-  }
-
-  async function handleImageExport() {
-    clearFeedback()
-    setIsWorking(true)
-
-    try {
-      const currentTime = useTimelineStore.getState().currentTime
-      const blob = await exportStillImage(buildRenderProjectState(), {
-        aspectPreset: imageAspect,
-        qualityPreset: imageQuality,
-        time: currentTime,
-        width: imageSize.width,
-        height: imageSize.height,
-      })
-
-      downloadBlob(blob, buildDownloadName("png"))
-      setStatusMessage(
-        `PNG exported at ${imageSize.width}×${imageSize.height}.`
-      )
-    } catch (error) {
-      setErrorMessage(
-        error instanceof Error ? error.message : "Image export failed."
-      )
-    } finally {
-      setIsWorking(false)
-    }
-  }
-
-  async function handleVideoExport() {
-    clearFeedback()
-    setIsWorking(true)
-
-    try {
-      const currentTime = useTimelineStore.getState().currentTime
-      const blob = await exportVideo(buildRenderProjectState(), {
-        aspectPreset: videoAspect,
-        duration: Math.max(0.25, videoDuration),
-        format: videoFormat,
-        fps: Math.max(1, videoFps),
-        qualityPreset: videoQuality,
-        startTime: currentTime,
-        width: videoSize.width,
-        height: videoSize.height,
-      })
-
-      downloadBlob(blob, buildDownloadName(videoFormat))
-      setStatusMessage(
-        `${videoFormat.toUpperCase()} exported at ${videoSize.width}×${videoSize.height}.`
-      )
-    } catch (error) {
-      setErrorMessage(
-        error instanceof Error ? error.message : "Video export failed."
-      )
-    } finally {
-      setIsWorking(false)
-    }
-  }
-
-  async function handleProjectExport() {
-    clearFeedback()
-
-    try {
-      const projectFile = buildLabProjectFile()
-      const blob = new Blob([JSON.stringify(projectFile, null, 2)], {
-        type: "application/json",
-      })
-
-      downloadBlob(blob, buildDownloadName("lab"))
-      setStatusMessage("Shader Lab project exported.")
-    } catch (error) {
-      setErrorMessage(
-        error instanceof Error ? error.message : "Project export failed."
-      )
-    }
-  }
-
-  async function handleProjectImport(file: File) {
-    clearFeedback()
-    setIsWorking(true)
-
-    try {
-      const input = await file.text()
-      const projectFile = parseLabProjectFile(input)
-      const result = applyLabProjectFile(
-        projectFile,
-        useAssetStore.getState().assets
-      )
-
-      setStatusMessage(
-        result.missingAssetCount > 0
-          ? `Project imported. ${result.missingAssetCount} media layer(s) need relinking.`
-          : "Project imported."
-      )
-      onOpenChange(false)
-    } catch (error) {
-      setErrorMessage(
-        error instanceof Error ? error.message : "Project import failed."
-      )
-    } finally {
-      setIsWorking(false)
-      setIsDraggingImport(false)
-    }
-  }
-
-  async function handleShaderCopy() {
-    clearFeedback()
-
-    if (!shaderSnippet) {
-      setErrorMessage(
-        shaderExportIssues[0]?.message ??
-          "Shader export is not available for this project."
-      )
-      return
-    }
-
-    setIsCopyingShader(true)
-
-    try {
-      await copyToClipboard(shaderSnippet)
-      setStatusMessage("Shader snippet copied to clipboard.")
-    } catch (error) {
-      setErrorMessage(
-        error instanceof Error
-          ? error.message
-          : "Could not copy shader snippet."
-      )
-    } finally {
-      setIsCopyingShader(false)
-    }
-  }
-
-  function handleImportChange(event: ChangeEvent<HTMLInputElement>) {
-    const file = event.target.files?.[0]
-    event.currentTarget.value = ""
-
-    if (!file) {
-      return
-    }
-
-    void handleProjectImport(file)
-  }
-
-  function handleDrop(event: DragEvent<HTMLLabelElement>) {
-    event.preventDefault()
-    setIsDraggingImport(false)
-
-    const file = event.dataTransfer.files?.[0]
-
-    if (!file) {
-      return
-    }
-
-    void handleProjectImport(file)
-  }
-
-  if (!mounted) {
-    return null
-  }
-
-  return createPortal(
-    <AnimatePresence initial={false}>
-      {open ? (
-        <div className="fixed inset-0 z-90" role="presentation">
-          <motion.button
-            animate={{ opacity: 1 }}
-            aria-label="Close export dialog"
-            className="absolute inset-0 w-full border-0 bg-[rgb(4_5_7_/_0.56)]"
-            exit={{ opacity: 0 }}
-            initial={{ opacity: 0 }}
-            onClick={() => onOpenChange(false)}
-            transition={{
-              duration: reduceMotion ? 0.12 : 0.18,
-              ease: "easeOut",
-            }}
-            type="button"
-          />
-
-          <div className="absolute top-[76px] left-1/2 w-[min(560px,calc(100vw-32px))] max-w-[min(560px,calc(100vw-32px))] -translate-x-1/2">
-            <motion.div
-              animate={
-                reduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1, y: 0 }
-              }
-              className="w-full"
-              exit={
-                reduceMotion
-                  ? { opacity: 0 }
-                  : { opacity: 0, scale: 0.985, y: -10 }
-              }
-              initial={
-                reduceMotion
-                  ? { opacity: 0 }
-                  : { opacity: 0, scale: 0.985, y: 10 }
-              }
-              transition={
-                reduceMotion
-                  ? { duration: 0.12, ease: "easeOut" }
-                  : { duration: 0.22, ease: [0.22, 1, 0.36, 1] }
-              }
-            >
-              <GlassPanel
-                aria-modal="true"
-                className="max-h-[calc(100vh-112px)] overflow-hidden p-0"
-                role="dialog"
-                variant="panel"
-              >
-                <div className="flex items-center justify-between border-b border-[var(--ds-border-divider)] px-4 pt-[14px] pb-3">
-                  <Typography as="h2" className="leading-5" variant="title">
-                    Export
-                  </Typography>
-                  <IconButton
-                    aria-label="Close export dialog"
-                    className="h-7 w-7"
-                    onClick={() => onOpenChange(false)}
-                    variant="default"
-                  >
-                    <X size={18} weight="bold" />
-                  </IconButton>
-                </div>
-
-                <div className="flex gap-1.5 border-b border-[var(--ds-border-divider)] px-4 py-[10px]">
-                  {(["image", "video", "shader", "project"] as const).map(
-                    (tab) => (
-                      <button
-                        className={cn(
-                          "inline-flex min-h-7 items-center justify-center rounded-[var(--ds-radius-control)] border border-transparent px-[10px] leading-none transition-[background-color,border-color,color] duration-160 ease-[var(--ease-out-cubic)] hover:bg-[var(--ds-color-surface-subtle)] hover:border-[var(--ds-border-subtle)]",
-                          activeTab === tab &&
-                            "bg-[var(--ds-color-surface-active)] border-[var(--ds-border-active)]"
-                        )}
-                        key={tab}
-                        onClick={() => setNextTab(tab)}
-                        type="button"
-                      >
-                        <Typography
-                          as="span"
-                          tone={activeTab === tab ? "primary" : "tertiary"}
-                          variant="label"
-                        >
-                          {tab}
-                        </Typography>
-                      </button>
-                    )
-                  )}
-                </div>
-
-                <motion.div
-                  animate={
-                    contentHeight === null
-                      ? { height: "auto" }
-                      : { height: contentHeight }
-                  }
-                  className="overflow-hidden px-4 pt-[14px] pb-4"
-                  transition={
-                    reduceMotion
-                      ? { duration: 0.12, ease: "easeOut" }
-                      : { duration: 0.24, ease: [0.22, 1, 0.36, 1] }
-                  }
-                >
-                  <div
-                    aria-hidden="true"
-                    className="pointer-events-none absolute top-0 left-0 -z-1 w-full invisible"
-                  >
-                    <div className="w-full" ref={measureRef}>
-                      {activeTab === "image" ? (
-                        <ImageTabContent
-                          imageAspect={imageAspect}
-                          imageQuality={imageQuality}
-                          imageSize={imageSize}
-                          isWorking={isWorking}
-                          onExport={handleImageExport}
-                          onImageAspectChange={setImageAspect}
-                          onImageHeightChange={updateImageHeight}
-                          onImageQualityChange={setImageQuality}
-                          onImageWidthChange={updateImageWidth}
-                        />
-                      ) : null}
-                      {activeTab === "video" ? (
-                        <VideoTabContent
-                          isWorking={isWorking}
-                          mp4Supported={mp4Supported}
-                          onExport={handleVideoExport}
-                          onVideoAspectChange={setVideoAspect}
-                          onVideoDurationChange={setVideoDuration}
-                          onVideoFpsChange={setVideoFps}
-                          onVideoFormatChange={setVideoFormat}
-                          onVideoHeightChange={updateVideoHeight}
-                          onVideoQualityChange={setVideoQuality}
-                          onVideoWidthChange={updateVideoWidth}
-                          videoAspect={videoAspect}
-                          videoDuration={videoDuration}
-                          videoFormat={videoFormat}
-                          videoFps={videoFps}
-                          videoQuality={videoQuality}
-                          videoSize={videoSize}
-                          webmSupported={webmSupported}
-                        />
-                      ) : null}
-                      {activeTab === "project" ? (
-                        <ProjectTabContent
-                          importInputRef={importInputRef}
-                          isDraggingImport={isDraggingImport}
-                          isWorking={isWorking}
-                          onDragStateChange={setIsDraggingImport}
-                          onExport={handleProjectExport}
-                          onFileChange={handleImportChange}
-                          onImportBrowse={() => importInputRef.current?.click()}
-                          onImportDrop={handleDrop}
-                        />
-                      ) : null}
-                      {activeTab === "shader" ? (
-                        <ShaderTabContent
-                          isCopying={isCopyingShader}
-                          issues={shaderExportIssues}
-                          onCopy={handleShaderCopy}
-                          snippet={shaderSnippet}
-                        />
-                      ) : null}
-                    </div>
-                  </div>
-
-                  <div className="relative">
-                    <AnimatePresence initial={false} mode="wait">
-                      <motion.div
-                        animate={{ opacity: 1 }}
-                        className="w-full"
-                        exit={{ opacity: 0 }}
-                        initial={{ opacity: 0 }}
-                        key={activeTab}
-                        transition={
-                          reduceMotion
-                            ? { duration: 0.12, ease: "easeOut" }
-                            : { duration: 0.2, ease: [0.22, 1, 0.36, 1] }
-                        }
-                      >
-                        {activeTab === "image" ? (
-                          <ImageTabContent
-                            imageAspect={imageAspect}
-                            imageQuality={imageQuality}
-                            imageSize={imageSize}
-                            isWorking={isWorking}
-                            onExport={handleImageExport}
-                            onImageAspectChange={setImageAspect}
-                            onImageHeightChange={updateImageHeight}
-                            onImageQualityChange={setImageQuality}
-                            onImageWidthChange={updateImageWidth}
-                          />
-                        ) : null}
-                        {activeTab === "video" ? (
-                          <VideoTabContent
-                            isWorking={isWorking}
-                            mp4Supported={mp4Supported}
-                            onExport={handleVideoExport}
-                            onVideoAspectChange={setVideoAspect}
-                            onVideoDurationChange={setVideoDuration}
-                            onVideoFpsChange={setVideoFps}
-                            onVideoFormatChange={setVideoFormat}
-                            onVideoHeightChange={updateVideoHeight}
-                            onVideoQualityChange={setVideoQuality}
-                            onVideoWidthChange={updateVideoWidth}
-                            videoAspect={videoAspect}
-                            videoDuration={videoDuration}
-                            videoFormat={videoFormat}
-                            videoFps={videoFps}
-                            videoQuality={videoQuality}
-                            videoSize={videoSize}
-                            webmSupported={webmSupported}
-                          />
-                        ) : null}
-                        {activeTab === "project" ? (
-                          <ProjectTabContent
-                            importInputRef={importInputRef}
-                            isDraggingImport={isDraggingImport}
-                            isWorking={isWorking}
-                            onDragStateChange={setIsDraggingImport}
-                            onExport={handleProjectExport}
-                            onFileChange={handleImportChange}
-                            onImportBrowse={() =>
-                              importInputRef.current?.click()
-                            }
-                            onImportDrop={handleDrop}
-                          />
-                        ) : null}
-                        {activeTab === "shader" ? (
-                          <ShaderTabContent
-                            isCopying={isCopyingShader}
-                            issues={shaderExportIssues}
-                            onCopy={handleShaderCopy}
-                            snippet={shaderSnippet}
-                          />
-                        ) : null}
-                      </motion.div>
-                    </AnimatePresence>
-                  </div>
-                </motion.div>
-
-                {errorMessage ? (
-                  <Typography
-                    className="mx-4 mb-4 rounded-[var(--ds-radius-control)] border border-[rgb(255_74_74_/_0.18)] bg-[rgb(255_74_74_/_0.08)] px-3 py-[10px] leading-[14px] text-[rgb(255_191_191_/_0.92)]"
-                    variant="caption"
-                  >
-                    {errorMessage}
-                  </Typography>
-                ) : null}
-                {statusMessage ? (
-                  <Typography
-                    className="mx-4 mb-4 rounded-[var(--ds-radius-control)] border border-white/9 bg-white/6 px-3 py-[10px] leading-[14px]"
-                    tone="secondary"
-                    variant="caption"
-                  >
-                    {statusMessage}
-                  </Typography>
-                ) : null}
-              </GlassPanel>
-            </motion.div>
-          </div>
-        </div>
-      ) : null}
-    </AnimatePresence>,
-    document.body
-  )
-}
-
-function ImageTabContent({
-  imageAspect,
-  imageQuality,
-  imageSize,
-  isWorking,
-  onExport,
-  onImageAspectChange,
-  onImageHeightChange,
-  onImageQualityChange,
-  onImageWidthChange,
-}: {
-  imageAspect: ExportAspectPreset
-  imageQuality: ExportQualityPreset
-  imageSize: { height: number; width: number }
-  isWorking: boolean
-  onExport: () => Promise<void>
-  onImageAspectChange: (preset: ExportAspectPreset) => void
-  onImageHeightChange: (value: number) => void
-  onImageQualityChange: (preset: ExportQualityPreset) => void
-  onImageWidthChange: (value: number) => void
-}) {
-  return (
-    <section className="flex flex-col gap-[14px]">
-      <FieldLabel label="Aspect">
-        <PresetRow>
-          {ASPECT_PRESETS.map((preset) => (
-            <PillButton
-              active={imageAspect === preset}
-              key={preset}
-              label={ASPECT_PRESET_LABELS[preset]}
-              onClick={() => onImageAspectChange(preset)}
-            />
-          ))}
-        </PresetRow>
-      </FieldLabel>
-
-      <FieldLabel label="Quality">
-        <PresetRow>
-          {QUALITY_PRESETS.map((preset) => (
-            <PillButton
-              active={imageQuality === preset}
-              key={preset}
-              label={QUALITY_LABELS[preset]}
-              onClick={() => onImageQualityChange(preset)}
-            />
-          ))}
-        </PresetRow>
-      </FieldLabel>
-
-      <DimensionFields
-        height={imageSize.height}
-        onHeightChange={onImageHeightChange}
-        onWidthChange={onImageWidthChange}
-        width={imageSize.width}
-      />
-
-      <Typography className="leading-[14px]" tone="muted" variant="caption">
-        Uses the current playhead frame.
-      </Typography>
-
-      <Button disabled={isWorking} onClick={() => void onExport()}>
-        <FileArrowDownIcon size={16} weight="bold" />
-        Export PNG
-      </Button>
-    </section>
-  )
-}
-
-function VideoTabContent({
-  isWorking,
-  mp4Supported,
-  onExport,
-  onVideoAspectChange,
-  onVideoDurationChange,
-  onVideoFpsChange,
-  onVideoFormatChange,
-  onVideoHeightChange,
-  onVideoQualityChange,
-  onVideoWidthChange,
-  videoAspect,
-  videoDuration,
-  videoFormat,
-  videoFps,
-  videoQuality,
-  videoSize,
-  webmSupported,
-}: {
-  isWorking: boolean
-  mp4Supported: boolean
-  onExport: () => Promise<void>
-  onVideoAspectChange: (preset: ExportAspectPreset) => void
-  onVideoDurationChange: (value: number) => void
-  onVideoFpsChange: (value: number) => void
-  onVideoFormatChange: (format: VideoExportFormat) => void
-  onVideoHeightChange: (value: number) => void
-  onVideoQualityChange: (preset: ExportQualityPreset) => void
-  onVideoWidthChange: (value: number) => void
-  videoAspect: ExportAspectPreset
-  videoDuration: number
-  videoFormat: VideoExportFormat
-  videoFps: number
-  videoQuality: ExportQualityPreset
-  videoSize: { height: number; width: number }
-  webmSupported: boolean
-}) {
-  return (
-    <section className="flex flex-col gap-[14px]">
-      <FieldLabel label="Format">
-        <PresetRow>
-          <PillButton
-            active={videoFormat === "webm"}
-            disabled={!webmSupported}
-            label="WebM"
-            onClick={() => onVideoFormatChange("webm")}
-          />
-          <PillButton
-            active={videoFormat === "mp4"}
-            disabled={!mp4Supported}
-            label="MP4"
-            onClick={() => onVideoFormatChange("mp4")}
-          />
-        </PresetRow>
-      </FieldLabel>
-
-      <FieldLabel label="Aspect">
-        <PresetRow>
-          {ASPECT_PRESETS.map((preset) => (
-            <PillButton
-              active={videoAspect === preset}
-              key={preset}
-              label={ASPECT_PRESET_LABELS[preset]}
-              onClick={() => onVideoAspectChange(preset)}
-            />
-          ))}
-        </PresetRow>
-      </FieldLabel>
-
-      <FieldLabel label="Quality">
-        <PresetRow>
-          {QUALITY_PRESETS.map((preset) => (
-            <PillButton
-              active={videoQuality === preset}
-              key={preset}
-              label={QUALITY_LABELS[preset]}
-              onClick={() => onVideoQualityChange(preset)}
-            />
-          ))}
-        </PresetRow>
-      </FieldLabel>
-
-      <DimensionFields
-        height={videoSize.height}
-        onHeightChange={onVideoHeightChange}
-        onWidthChange={onVideoWidthChange}
-        width={videoSize.width}
-      />
-
-      <div className="grid gap-[10px] min-[900px]:grid-cols-2">
-        <FieldLabel label="FPS">
-          <PresetRow>
-            {VIDEO_FPS_PRESETS.map((fps) => (
-              <PillButton
-                active={videoFps === fps}
-                key={fps}
-                label={`${fps}`}
-                onClick={() => onVideoFpsChange(fps)}
-              />
-            ))}
-          </PresetRow>
-        </FieldLabel>
-
-        <FieldLabel label="Duration">
-          <NumberInput
-            min={0.25}
-            onChange={onVideoDurationChange}
-            step={0.25}
-            value={videoDuration}
-          />
-        </FieldLabel>
-      </div>
-
-      <Typography className="leading-[14px]" tone="muted" variant="caption">
-        Starts from the current playhead position.
-      </Typography>
-
-      <Button
-        disabled={isWorking || !getSupportedVideoMimeType(videoFormat)}
-        onClick={() => void onExport()}
-      >
-        <FileArrowDownIcon size={16} weight="bold" />
-        Export {videoFormat.toUpperCase()}
-      </Button>
-    </section>
-  )
-}
-
-function ProjectTabContent({
-  importInputRef,
-  isDraggingImport,
-  isWorking,
-  onDragStateChange,
-  onExport,
-  onFileChange,
-  onImportBrowse,
-  onImportDrop,
-}: {
-  importInputRef: React.RefObject<HTMLInputElement | null>
-  isDraggingImport: boolean
-  isWorking: boolean
-  onDragStateChange: (dragging: boolean) => void
-  onExport: () => Promise<void>
-  onFileChange: (event: ChangeEvent<HTMLInputElement>) => void
-  onImportBrowse: () => void
-  onImportDrop: (event: DragEvent<HTMLLabelElement>) => void
-}) {
-  return (
-    <section className="flex flex-col gap-[14px]">
-      <Button disabled={isWorking} onClick={() => void onExport()}>
-        <FileArrowDownIcon size={16} weight="bold" />
-        Export .lab file
-      </Button>
-
-      <label
-        className={cn(
-          "grid items-center gap-3 rounded-[var(--ds-radius-panel)] border border-dashed border-[var(--ds-border-divider)] bg-[var(--ds-color-surface-subtle)] p-[14px] min-[900px]:grid-cols-[auto_1fr_auto]",
-          isDraggingImport &&
-            "border-[var(--ds-border-hover)] bg-[var(--ds-color-surface-active)]"
-        )}
-        onDragEnter={() => onDragStateChange(true)}
-        onDragLeave={() => onDragStateChange(false)}
-        onDragOver={(event) => {
-          event.preventDefault()
-
-          if (!isDraggingImport) {
-            onDragStateChange(true)
-          }
-        }}
-        onDrop={onImportDrop}
-      >
-        <input
-          accept=".lab,application/json"
-          className="hidden"
-          onChange={onFileChange}
-          ref={importInputRef}
-          type="file"
-        />
-
-        <UploadSimpleIcon size={20} weight="bold" />
-        <div>
-          <Typography className="leading-4" variant="label">
-            Import .lab configuration
-          </Typography>
-          <Typography className="mt-1" tone="tertiary" variant="caption">
-            Drag and drop here. This will replace your current setup.
-          </Typography>
-        </div>
-
-        <IconButton
-          disabled={isWorking}
-          onClick={(event) => {
-            event.preventDefault()
-            onImportBrowse()
-          }}
-          variant="active"
-        >
-          <FolderIcon size={20} />
-        </IconButton>
-      </label>
-    </section>
-  )
-}
-
-function ShaderTabContent({
-  isCopying,
-  issues,
-  onCopy,
-  snippet,
-}: {
-  isCopying: boolean
-  issues: { layerId?: string; message: string }[]
-  onCopy: () => Promise<void>
-  snippet: string | null
-}) {
-  const canCopy = Boolean(snippet) && issues.length === 0
-
-  return (
-    <section className="flex flex-col gap-[14px]">
-      <Typography className="leading-[14px]" tone="muted" variant="caption">
-        Install with{" "}
-        <code className="rounded-[6px] border border-white/9 bg-white/6 px-[5px] py-px font-[var(--ds-font-mono)] text-[11px]">
-          bun add @basementstudio/shader-lab three
-        </code>
-        , then paste this component into your React app.
-      </Typography>
-
-      {issues.length > 0 ? (
-        <div className="flex flex-col gap-2 rounded-[var(--ds-radius-panel)] border border-[rgb(255_74_74_/_0.14)] bg-[rgb(255_74_74_/_0.06)] p-3">
-          {issues.map((issue) => (
-            <Typography
-              key={`${issue.layerId ?? "global"}:${issue.message}`}
-              variant="caption"
-            >
-              {issue.message}
-            </Typography>
-          ))}
-        </div>
-      ) : null}
-
-      <FieldLabel label="Snippet">
-        <pre className="m-0 max-h-[280px] overflow-auto rounded-[var(--ds-radius-panel)] border border-[var(--ds-border-divider)] bg-white/4 p-3 font-[var(--ds-font-mono)] text-[11px] leading-[1.55] whitespace-pre-wrap break-words">
-          <code>
-            {snippet ?? "// Shader export is blocked for this project."}
-          </code>
-        </pre>
-      </FieldLabel>
-
-      <Button disabled={!canCopy || isCopying} onClick={() => void onCopy()}>
-        <CopyIcon size={16} weight="bold" />
-        {isCopying ? "Copying..." : "Copy snippet"}
-      </Button>
-    </section>
-  )
-}
-
-function FieldLabel({
-  children,
-  label,
-}: {
-  children: ReactNode
-  label: string
-}) {
-  return (
-    <div className="flex flex-col gap-2">
-      <Typography className="uppercase" tone="secondary" variant="overline">
-        {label}
-      </Typography>
-      {children}
-    </div>
-  )
-}
-
-function PresetRow({ children }: { children: ReactNode }) {
-  return <div className="flex flex-wrap gap-1.5">{children}</div>
-}
-
-function PillButton({
-  active,
-  disabled = false,
-  label,
-  onClick,
-}: {
-  active: boolean
-  disabled?: boolean
-  label: string
-  onClick: () => void
-}) {
-  return (
-    <button
-      className={cn(
-        "inline-flex min-h-7 items-center justify-center rounded-[var(--ds-radius-control)] border border-[var(--ds-border-divider)] bg-[var(--ds-color-surface-control)] px-[10px] leading-none transition-[background-color,border-color,color] duration-160 ease-[var(--ease-out-cubic)] hover:not-disabled:bg-white/8 hover:not-disabled:border-[var(--ds-border-hover)] disabled:cursor-not-allowed disabled:opacity-42",
-        active &&
-          "bg-[var(--ds-color-surface-active)] border-[var(--ds-border-active)]"
-      )}
-      disabled={disabled}
-      onClick={onClick}
-      type="button"
-    >
-      <Typography
-        as="span"
-        tone={active ? "primary" : "secondary"}
-        variant="label"
-      >
-        {label}
-      </Typography>
-    </button>
-  )
-}
-
-function DimensionFields({
-  height,
-  onHeightChange,
-  onWidthChange,
-  width,
-}: {
-  height: number
-  onHeightChange: (value: number) => void
-  onWidthChange: (value: number) => void
-  width: number
-}) {
-  return (
-    <div className="grid gap-[10px] min-[900px]:grid-cols-2">
-      <FieldLabel label="Width">
-        <NumberInput min={1} onChange={onWidthChange} step={1} value={width} />
-      </FieldLabel>
-      <FieldLabel label="Height">
-        <NumberInput
-          min={1}
-          onChange={onHeightChange}
-          step={1}
-          value={height}
-        />
-      </FieldLabel>
-    </div>
-  )
-}
-
-function NumberInput({
-  min,
-  onChange,
-  step,
-  value,
-}: {
-  min: number
-  onChange: (value: number) => void
-  step: number
-  value: number
-}) {
-  return (
-    <input
-      className="min-h-9 rounded-[var(--ds-radius-control)] border border-[var(--ds-border-divider)] bg-[var(--ds-color-surface-control)] px-[10px] py-2 font-[var(--ds-font-mono)] text-[12px] leading-4 text-[var(--ds-color-text-primary)]"
-      min={min}
-      onChange={(event) => {
-        const nextValue = Number.parseFloat(event.currentTarget.value)
-
-        if (Number.isFinite(nextValue)) {
-          onChange(nextValue)
-        }
-      }}
-      step={step}
-      type="number"
-      value={value}
-    />
-  )
-}
-
-function buildRenderProjectState() {
-  const timelineState = useTimelineStore.getState()
-
-  return {
-    assets: useAssetStore.getState().assets,
-    compositionSize: useEditorStore.getState().canvasSize,
-    layers: useLayerStore.getState().layers,
-    timeline: {
-      currentTime: timelineState.currentTime,
-      duration: timelineState.duration,
-      isPlaying: timelineState.isPlaying,
-      loop: timelineState.loop,
-      selectedKeyframeId: timelineState.selectedKeyframeId,
-      selectedTrackId: timelineState.selectedTrackId,
-      tracks: structuredClone(timelineState.tracks),
-    },
-  }
-}
-
-function buildDownloadName(extension: string): string {
-  const stamp = new Date()
-    .toISOString()
-    .replaceAll(":", "-")
-    .replace(/\..+$/, "")
-  return `shader-lab-${stamp}.${extension}`
-}
-
-function downloadBlob(blob: Blob, fileName: string) {
-  const url = URL.createObjectURL(blob)
-  const anchor = document.createElement("a")
-  anchor.href = url
-  anchor.download = fileName
-  anchor.click()
-
-  window.setTimeout(() => {
-    URL.revokeObjectURL(url)
-  }, 0)
-}
-
-async function copyToClipboard(value: string) {
-  if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
-    throw new Error("Clipboard access is not available in this browser.")
-  }
-
-  await navigator.clipboard.writeText(value)
-}