Fix V3 scene uploads, compatibility, and project dropdown

.changeset/v3-community-compatibility.md

@@ -0,0 +1,4 @@
+---
+---
+
+Fix V3 community media uploads, preserve unavailable project layers, restore audio-reactive community playback, and align project dropdown corners.

.github/workflows/ci.yml

@@ -45,6 +45,9 @@ jobs:
       - name: Lint app
         run: bun run lint
 
+      - name: Community compatibility tests
+        run: bun test tests/community
+
       - name: Type check app
         run: bun run typecheck:tsc
 

src/components/community/scene-viewer.tsx

@@ -8,6 +8,7 @@ import {
   buildViewerProjectState,
   parseLabProjectFile,
 } from "@/lib/editor/project-file"
+import { buildViewerAudio } from "@/lib/community/viewer-audio"
 import { cn } from "@/lib/cn"
 import { buildRendererFrame } from "@/renderer/contracts"
 import { advanceProjectTimeline } from "@/renderer/project-clock"
@@ -80,6 +81,7 @@ export function SceneViewer({
       }
 
       let disposed = false
+      const abortController = new AbortController()
       let animationFrame: number | null = null
       let resizeObserver: ResizeObserver | null = null
       let visibilityObserver: IntersectionObserver | null = null
@@ -89,6 +91,7 @@ export function SceneViewer({
 
       disposeRef.current = () => {
         disposed = true
+        abortController.abort()
 
         if (animationFrame !== null) {
           window.cancelAnimationFrame(animationFrame)
@@ -105,7 +108,7 @@ export function SceneViewer({
       try {
         const [{ createWebGPURenderer }, labText] = await Promise.all([
           import("@/renderer/create-webgpu-renderer"),
-          fetch(labUrl).then((res) => {
+          fetch(labUrl, { signal: abortController.signal }).then((res) => {
             if (!res.ok) {
               throw new Error("Could not load the scene file.")
             }
@@ -114,11 +117,17 @@ export function SceneViewer({
           }),
         ])
 
+        if (disposed) return
         const project = buildViewerProjectState(parseLabProjectFile(labText))
         const renderer = await createWebGPURenderer(canvas)
+        if (disposed) {
+          renderer.dispose()
+          return
+        }
 
         disposeRef.current = () => {
           disposed = true
+          abortController.abort()
 
           if (animationFrame !== null) {
             window.cancelAnimationFrame(animationFrame)
@@ -148,12 +157,15 @@ export function SceneViewer({
           teardown()
         }
 
-        await renderer.initialize()
+        // Cleanup must wait for initialization as well as in-flight frames.
+        framePending = renderer.initialize()
+        const [, audio] = await Promise.all([
+          framePending,
+          buildViewerAudio(project, abortController.signal),
+        ])
 
-        if (disposed) {
-          renderer.dispose()
-          return
-        }
+        framePending = null
+        if (disposed) return
 
         const pixelRatio = Math.min(window.devicePixelRatio || 1, 2)
         const documentSize = getDocumentSize(
@@ -207,7 +219,7 @@ export function SceneViewer({
 
             const frame = buildRendererFrame({
               assets: project.assets,
-              audio: null,
+              audio,
               clockTime,
               delta,
               layers: project.layers,
@@ -238,6 +250,7 @@ export function SceneViewer({
               renderer.isDeviceLost() ||
               consecutiveFailures >= MAX_CONSECUTIVE_FRAME_FAILURES
             ) {
+              disposeRef.current?.()
               setFailed(true)
               return
             }
@@ -328,7 +341,10 @@ export function SceneViewer({
 
         resume()
       } catch {
-        setFailed(true)
+        if (!disposed) {
+          disposeRef.current?.()
+          setFailed(true)
+        }
       }
     }
 

src/components/editor/layer-group-location.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { isLayerGroup } from "@/renderer/layer-hierarchy"
 import { Select } from "@/components/ui/select"
 import { Typography } from "@/components/ui/typography"
 import { moveLayerToGroup } from "@/lib/editor/layer-groups"
@@ -9,9 +10,9 @@ export function LayerGroupLocation({ layerId }: { layerId: string }) {
   const layers = useLayerStore((state) => state.layers)
   const moveLayer = useLayerStore((state) => state.moveLayer)
   const layer = layers.find((entry) => entry.id === layerId)
-  if (!(layer && layers.some((entry) => entry.kind === "group"))) return null
+  if (!(layer && layers.some((entry) => isLayerGroup(entry)))) return null
   const groups = layers.filter(
-    (entry) => entry.kind === "group" && entry.id !== layerId
+    (entry) => isLayerGroup(entry) && entry.id !== layerId
   )
   const paths = new Map<string, string>()
   for (const group of groups)

src/components/editor/layer-sidebar.tsx

@@ -1,4 +1,5 @@
 "use client"
+import { isLayerGroup } from "@/renderer/layer-hierarchy"
 import {
   ChevronDownIcon,
   ChevronRightIcon,
@@ -200,7 +201,7 @@ const LayerListItem = memo(function LayerListItem({
   const cancelRename = useRef(false)
   const renameLayer = useLayerStore((state) => state.renameLayer)
   const setExpanded = useLayerStore((state) => state.setLayerExpanded)
-  const isGroup = layer.kind === "group"
+  const isGroup = isLayerGroup(layer)
 
   function startRename() {
     cancelRename.current = false
@@ -710,7 +711,7 @@ export function LayerSidebar() {
               onSelectLayer={handleSelectLayer}
               onSetLayerVisibility={handleSetLayerVisibility}
             >
-              {layer.kind === "group" && layer.expanded
+              {isLayerGroup(layer) && layer.expanded
                 ? renderLayerTree(layer.id, frozen)
                 : null}
             </LayerListItem>

src/components/editor/use-layer-drag.ts

@@ -1,5 +1,6 @@
 "use client"
 
+import { isLayerGroup } from "@/renderer/layer-hierarchy"
 import {
   type PointerEvent as ReactPointerEvent,
   useEffect,
@@ -43,7 +44,7 @@ function findTarget(
   let placement: LayerDropTarget["placement"] =
     y < rect.top + rect.height / 2 ? "before" : "after"
   if (
-    anchor.kind === "group" &&
+    isLayerGroup(anchor) &&
     x >= rect.left &&
     y > rect.top + rect.height * 0.25 &&
     y < rect.bottom - rect.height * 0.25

src/components/ui/menu/index.tsx

@@ -52,7 +52,7 @@ export function Menu({
           <Popover.Popup className="outline-none">
             <GlassPanel
               className={cn(
-                "flex w-[168px] flex-col p-[var(--ds-space-1)]",
+                "flex w-[168px] flex-col rounded-[calc(var(--ds-radius-icon)+var(--ds-space-1)+1px)] p-[var(--ds-space-1)]",
                 className
               )}
               variant="panel"

src/lib/community/publish-client.ts

@@ -3,10 +3,12 @@ import {
   describeBlockedLanguage,
   findProfanityInScene,
 } from "@/lib/community/language"
+import { normalizeAssetMimeType } from "@/lib/editor/media-file"
 import { describeUploadLimit } from "@/lib/community/upload-limits"
 import {
   buildLabProjectFile,
   buildPublishableProjectFile,
+  describeUnavailableLayers,
   type LabProjectFile,
 } from "@/lib/editor/project-file"
 import { useAssetStore } from "@/store/asset-store"
@@ -123,10 +125,12 @@ function inspectScene(options: { prune: boolean }): {
     .assets.filter(
       (asset) => asset.source === "local" && referencedIds.has(asset.id)
     )
+    .map((asset) => ({ ...asset, mimeType: normalizeAssetMimeType(asset) }))
 
   let problem: string | null =
-    options.prune && projectFile.layers.length === 0
-      ? EMPTY_SCENE_MESSAGE
+    options.prune
+      ? describeUnavailableLayers(projectFile) ??
+        (projectFile.layers.length === 0 ? EMPTY_SCENE_MESSAGE : null)
       : null
   let totalBytes = 0
 

src/lib/community/publish.ts

@@ -20,6 +20,7 @@ import { isAllowedAssetOrigin } from "@/lib/editor/remote-asset"
 import type { LabProjectFile } from "@/lib/editor/project-file"
 import {
   hasImportedCustomShaderCode,
+  describeUnavailableLayers,
   parseLabProjectFile,
 } from "@/lib/editor/project-file"
 
@@ -45,6 +46,7 @@ export const UPLOADABLE_MIME_TYPES = new Set([
   "image/jpeg",
   "image/png",
   "image/svg+xml",
+  "image/vnd.radiance",
   "image/webp",
   "model/gltf-binary",
   "model/gltf+json",
@@ -61,6 +63,8 @@ const UPLOAD_EXTENSIONS: Record<string, string> = {
   "image/svg+xml": "svg",
   "image/webp": "webp",
   "model/gltf-binary": "glb",
+  "model/gltf+json": "gltf",
+  "image/vnd.radiance": "hdr",
   "video/mp4": "mp4",
   "video/quicktime": "mov",
   "video/webm": "webm",
@@ -215,6 +219,9 @@ export function validateProjectFilePayload(raw: string): PublishValidation {
     throw new Error(describeBlockedLanguage(profanityLocation))
   }
 
+  const unavailable = describeUnavailableLayers(projectFile)
+  if (unavailable) throw new Error(unavailable)
+
   if (projectFile.layers.length === 0) {
     throw new Error("A scene needs at least one visible layer.")
   }

src/lib/community/upload-limits.ts

@@ -4,7 +4,7 @@ export const DEFAULT_DRAFT_TITLE = "Untitled draft"
 export const MAX_IMAGE_BYTES = 4 * 1024 * 1024
 
 export function isImageMimeType(mimeType: string): boolean {
-  return mimeType.startsWith("image/")
+  return mimeType.startsWith("image/") && mimeType !== "image/vnd.radiance"
 }
 
 export function maxBytesForMimeType(mimeType: string): number {

src/lib/community/viewer-audio.ts

@@ -0,0 +1,48 @@
+import { analyzeAudioSource } from "@/lib/editor/audio/analyze-client"
+import { computeEnvelopeSet } from "@/lib/editor/audio/envelope"
+import type { AudioModulationInput } from "@/lib/editor/audio/links"
+import type { ViewerProjectState } from "@/lib/editor/project-file"
+
+/** Silent analysis: reactive visuals use the same envelopes and offset as the editor. */
+export async function buildViewerAudio(
+  project: ViewerProjectState,
+  signal: AbortSignal
+): Promise<AudioModulationInput | null> {
+  const { source, links, bands, offsetSeconds } = project.audioSnapshot
+  if (!(source && links.some((link) => link.enabled))) return null
+
+  const assetId =
+    source.kind === "asset"
+      ? source.assetId
+      : project.layers.find((layer) => layer.id === source.layerId)?.assetId
+  const asset = project.assets.find((entry) => entry.id === assetId)
+  if (!asset) return null
+
+  signal.throwIfAborted()
+  const analysisSignal = AbortSignal.any([signal, AbortSignal.timeout(8_000)])
+  let onAbort: () => void = () => undefined
+  const cancelled = new Promise<never>((_resolve, reject) => {
+    onAbort = () => reject(analysisSignal.reason)
+    analysisSignal.addEventListener("abort", onAbort, { once: true })
+    if (analysisSignal.aborted) onAbort()
+  })
+
+  try {
+    // decodeAudioData cannot be interrupted. Stop waiting at the deadline even
+    // if decoding is still running; the signal also cancels fetch/worker work.
+    const spectrogram = await Promise.race([
+      analyzeAudioSource(asset.url, { signal: analysisSignal }),
+      cancelled,
+    ])
+    return {
+      envelopes: computeEnvelopeSet(spectrogram, bands),
+      links,
+      offsetSeconds,
+    }
+  } catch (error) {
+    if (signal.aborted) throw error
+    return null
+  } finally {
+    analysisSignal.removeEventListener("abort", onAbort)
+  }
+}

src/lib/editor/layer-groups.ts

@@ -1,4 +1,4 @@
-import { validateLayerHierarchy } from "@/renderer/layer-hierarchy"
+import { isLayerGroup, validateLayerHierarchy } from "@/renderer/layer-hierarchy"
 import type { EditorLayer } from "@/types/editor"
 
 export type LayerDropTarget = {
@@ -22,7 +22,7 @@ export function dropLayer(
   const parent = layers.find((layer) => layer.id === parentId)
   if (
     parentId !== null &&
-    (!parent || parent.kind !== "group" || parent.locked)
+    (!(parent && isLayerGroup(parent)) || parent.locked)
   )
     return null
   const ids = new Set(contents.map((layer) => layer.id))
@@ -86,7 +86,7 @@ export function visibleLayerRows(
       collapsed.add(layer.id)
       return false
     }
-    if (layer.kind === "group" && !layer.expanded) collapsed.add(layer.id)
+    if (isLayerGroup(layer) && !layer.expanded) collapsed.add(layer.id)
     return true
   })
 }
@@ -174,7 +174,7 @@ export function moveLayerToGroup(
   if (
     !source ||
     source.locked ||
-    (parentId !== null && (!parent || parent.kind !== "group" || parent.locked))
+    (parentId !== null && (!(parent && isLayerGroup(parent)) || parent.locked))
   )
     return null
   if ((source.parentId ?? null) === parentId) return layers

src/lib/editor/media-file.ts

@@ -93,3 +93,41 @@ export function inferFileAssetKind(file: File): AssetKind | null {
 
   return null
 }
+
+const MIME_BY_EXTENSION: Record<string, string> = {
+  aac: "audio/aac",
+  flac: "audio/flac",
+  glb: "model/gltf-binary",
+  gltf: "model/gltf+json",
+  hdr: "image/vnd.radiance",
+  m4a: "audio/mp4",
+  mov: "video/quicktime",
+  mp3: "audio/mpeg",
+  oga: "audio/ogg",
+  ogg: "audio/ogg",
+  opus: "audio/ogg",
+  svg: "image/svg+xml",
+  wav: "audio/wav",
+}
+
+const MIME_ALIASES: Record<string, string> = {
+  "audio/mp3": "audio/mpeg",
+  "audio/opus": "audio/ogg",
+  "audio/wave": "audio/wav",
+  "audio/x-flac": "audio/flac",
+  "audio/x-wav": "audio/wav",
+}
+
+/** Canonicalize browser MIME guesses, including assets restored from old drafts. */
+export function normalizeAssetMimeType(input: {
+  fileName: string
+  mimeType: string
+}): string {
+  const mimeType = input.mimeType.toLowerCase().split(";")[0]!.trim()
+  const extension = input.fileName.toLowerCase().split(".").at(-1) ?? ""
+  const extensionMime = Object.hasOwn(MIME_BY_EXTENSION, extension)
+    ? MIME_BY_EXTENSION[extension]
+    : undefined
+  const alias = Object.hasOwn(MIME_ALIASES, mimeType) ? MIME_ALIASES[mimeType] : undefined
+  return extensionMime ?? alias ?? mimeType
+}