refactor: simplify stem code per review

- async zip() instead of zipSync (non-blocking for large files)
- null check for track in DELETE endpoint (was non-null assertion)
- formatFileSize extracted to format.ts, imported in StemList
- Stem type exported from StemList, removed duplicate in +page.svelte
- files[idx].progress = p direct Svelte 5 mutation (no spread)
- remove narrative comments from stems.ts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/src/lib/components/audio/StemUploadDropzone.svelte

@@ -72,7 +72,7 @@
 
       step = 'S3';
       await uploadWithProgress(uploadUrl, file, mimeType, (p) => {
-        files[idx] = { ...files[idx], progress: p };
+        files[idx].progress = p;
       });
 
       step = 'DB';

apps/web/src/lib/utils/format.ts

@@ -1,3 +1,8 @@
+export function formatFileSize(bytes: number): string {
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
 export function formatTime(seconds: number): string {
   const m = Math.floor(seconds / 60);
   const s = Math.floor(seconds % 60);

apps/web/src/routes/(app)/projects/[projectId]/tracks/[trackId]/+page.svelte

@@ -23,7 +23,7 @@
   import VersionGraph from './components/VersionGraph.svelte';
   import ShareModal from './components/ShareModal.svelte';
   import CommentSection from './components/CommentSection.svelte';
-  import StemList from './components/StemList.svelte';
+  import StemList, { type Stem } from './components/StemList.svelte';
 
   type Version = {
     id: string;
@@ -86,7 +86,6 @@
   let branchFromId = $state<string | null>(null);
   let branchLabelInput = $state('');
   let shareOpen = $state(false);
-  type Stem = { id: string; name: string; originalFileName: string; mimeType: string; fileSize: number; createdAt: string; createdById: string };
   let stems = $state<Stem[]>([]);
   let panelTab = $state<'versions' | 'comments' | 'stems'>('versions');
   let panelOpen = $state(true);

apps/web/src/routes/(app)/projects/[projectId]/tracks/[trackId]/components/StemList.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import { api } from '$lib/api/client.js';
   import { toastSuccess } from '$lib/stores/toast.js';
+  import { formatFileSize } from '$lib/utils/format.js';
   import Icon from '$lib/components/ui/Icon.svelte';
   import Button from '$lib/components/ui/Button.svelte';
   import StemUploadDropzone from '$lib/components/audio/StemUploadDropzone.svelte';
 
-  type Stem = {
+  export type Stem = {
     id: string;
     name: string;
     originalFileName: string;
@@ -32,11 +33,6 @@
   let showUpload = $state(false);
   let deleting = $state<string | null>(null);
 
-  function formatSize(bytes: number) {
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  }
-
   async function loadStems() {
     const res = await api.get<{ stems: Stem[] }>(`/stems/track/${trackId}`);
     stems = res.stems;
@@ -105,7 +101,7 @@
           <span class="stem-icon"><Icon name="music" size={14} /></span>
           <div class="stem-info">
             <span class="stem-name">{stem.name}</span>
-            <span class="stem-meta">{stem.originalFileName} · {formatSize(stem.fileSize)}</span>
+            <span class="stem-meta">{stem.originalFileName} · {formatFileSize(stem.fileSize)}</span>
           </div>
           {#if role === 'owner' || stem.createdById === currentUserId}
             <button