@rydr/game-sdk 3.11.0 → 3.13.0

package/dist/sound-gallery/index.js

@@ -0,0 +1,1264 @@
+/**
+ * `@rydr/game-sdk/sound-gallery` — the admin Sound Library editor.
+ *
+ * Upload SFX/music to R2, name + label + folder + tag them, **crop** them (waveform + draggable
+ * handles → OfflineAudioContext render → MP3 re-upload), preview with an advancing playhead, and
+ * **Publish** the catalog to the game-facing `sounds/library.json`. Every clip is stored as MP3
+ * (re-encoded at ingest and crop). Games then play by stable key with `@rydr/game-sdk/sounds`.
+ *
+ * Mirrors `@rydr/game-sdk/voice-gallery`: a self-contained module that injects its own scoped
+ * `.rydr-sg-*` CSS and renders against a narrow {@link SoundGallerySession} (the platform's
+ * `PlatformSoundSession` satisfies it). Curation is admin-only; a non-admin session sees a read-only
+ * browser.
+ */
+import { SOUND_CATEGORIES } from "../sounds/types.js";
+import { computePeaks, cropBuffer, decodeAudio, encodeMp3, peakDb } from "../sounds/audio-utils.js";
+const CSS = `
+.rydr-sg{position:fixed;inset:0;display:flex;flex-direction:column;font:14px/1.5 system-ui,sans-serif;color:#e7e9ee;background:#0d0f14}
+.rydr-sg *{box-sizing:border-box}
+.rydr-sg-head{display:flex;align-items:center;gap:14px;padding:12px 18px;background:#0d0f14;border-bottom:1px solid #232733}
+.rydr-sg-head h1{font-size:15px;margin:0;font-weight:600}
+.rydr-sg-head .sub{color:#8b93a7;font-size:12px}
+.rydr-sg-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
+.rydr-sg-search{padding:7px 11px;border-radius:8px;border:1px solid #2a3242;background:#12151d;color:#e7e9ee;font:inherit;min-width:180px}
+.rydr-sg-btn{padding:8px 13px;border-radius:8px;border:1px solid #31405f;background:#1b2130;color:#fff;cursor:pointer;font:inherit;white-space:nowrap}
+.rydr-sg-btn:disabled{opacity:.5;cursor:default}
+.rydr-sg-btn.primary{background:#2b5fd6;border-color:#3f74ee}
+.rydr-sg-btn.danger{border-color:#5c2436;background:#2a1119;color:#e2718f}
+.rydr-sg-body{flex:1;display:flex;min-height:0}
+.rydr-sg-side{width:300px;border-right:1px solid #232733;overflow:auto;padding:8px 0}
+.rydr-sg-folder{padding:8px 16px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#8b93a7}
+.rydr-sg-tnode{display:flex;align-items:center;gap:6px;padding:6px 12px;cursor:pointer;color:#c4cbd8;user-select:none}
+.rydr-sg-tnode:hover{background:#11141b}
+.rydr-sg-tnode .chev{width:10px;font-size:9px;color:#8b93a7;flex:none;text-align:center}
+.rydr-sg-tnode .tlabel{font-size:12px;font-weight:600}
+.rydr-sg-tnode.cat .tlabel{color:#e7e9ee;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:11px}
+.rydr-sg-tnode .tcount{margin-left:auto;font-size:10px;color:#6b7385}
+.rydr-sg-item{display:flex;align-items:center;gap:8px;padding:8px 16px;cursor:pointer;border-left:2px solid transparent}
+.rydr-sg-item:hover{background:#11141b}
+.rydr-sg-item.sel{background:#16233c;border-left-color:#3f74ee}
+.rydr-sg-item .k{font-weight:600}
+.rydr-sg-item .c{margin-left:auto;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#8b93a7;border:1px solid #2a3242;border-radius:999px;padding:1px 7px}
+.rydr-sg-empty{padding:24px 16px;color:#8b93a7}
+.rydr-sg-detail{flex:1;overflow:auto;padding:20px 24px}
+.rydr-sg-detail.blank{display:flex;align-items:center;justify-content:center;color:#8b93a7}
+.rydr-sg-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
+.rydr-sg-field{display:flex;flex-direction:column;gap:4px}
+.rydr-sg-field label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#8b93a7}
+.rydr-sg-field input,.rydr-sg-field select{padding:7px 10px;border-radius:8px;border:1px solid #2a3242;background:#12151d;color:#e7e9ee;font:inherit}
+.rydr-sg-wave{position:relative;height:120px;background:#0a0c11;border:1px solid #232733;border-radius:10px;margin:8px 0 6px;overflow:hidden}
+.rydr-sg-wave canvas{width:100%;height:100%;display:block;cursor:pointer}
+.rydr-sg-handle{position:absolute;top:0;bottom:0;width:12px;margin-left:-6px;cursor:ew-resize;z-index:3}
+.rydr-sg-handle::after{content:"";position:absolute;left:5px;top:0;bottom:0;width:2px;background:#3f74ee}
+.rydr-sg-region{position:absolute;top:0;bottom:0;background:rgba(63,116,238,.15);border-left:1px solid #3f74ee;border-right:1px solid #3f74ee;z-index:1;pointer-events:none}
+.rydr-sg-cursor{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#ffd24a;box-shadow:0 0 6px rgba(255,210,74,.8);z-index:4;pointer-events:none;display:none}
+.rydr-sg-times{display:flex;gap:16px;font-size:12px;color:#9aa4b8;margin-bottom:10px}
+.rydr-sg-times b{color:#e7e9ee}
+.rydr-sg-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
+.rydr-sg-meta{font-size:12px;color:#8b93a7;margin-top:16px;border-top:1px solid #1a1e28;padding-top:12px}
+.rydr-sg-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1b2130;border:1px solid #31405f;padding:10px 16px;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.5);z-index:9}
+.rydr-sg-ro{padding:2px 8px;border-radius:999px;background:#2a1119;border:1px solid #5c2436;color:#e2718f;font-size:11px}
+.rydr-sg-sideactions{padding:4px 12px 8px}
+.rydr-sg-sideactions .rydr-sg-btn{width:100%;font-size:12px;padding:6px 10px}
+.rydr-sg-tnode.sel{background:#16233c}
+.rydr-sg-tnode.drop,.rydr-sg-item.drop{outline:2px dashed #3f74ee;outline-offset:-2px;background:#16233c}
+.rydr-sg-item[draggable="true"],.rydr-sg-tnode[draggable="true"]{cursor:grab}
+.rydr-sg-menu{position:fixed;z-index:20;min-width:160px;background:#161b25;border:1px solid #31405f;border-radius:8px;padding:4px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
+.rydr-sg-menu-item{padding:8px 12px;border-radius:6px;cursor:pointer;font-size:13px}
+.rydr-sg-menu-item:hover{background:#22304a}
+.rydr-sg-menu-item.dis{opacity:.4;cursor:default}
+.rydr-sg-folderval{padding:7px 10px;border-radius:8px;border:1px dashed #2a3242;background:#0f1218;color:#9aa4b8}
+.rydr-sg-fv-head{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
+.rydr-sg-fv-crumb{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#8b93a7}
+.rydr-sg-fv-name{font-size:20px;font-weight:700;background:transparent;border:1px solid transparent;border-radius:8px;color:#e7e9ee;padding:4px 8px;margin-left:-8px}
+.rydr-sg-fv-name:hover,.rydr-sg-fv-name:focus{border-color:#2a3242;background:#12151d;outline:none}
+.rydr-sg-fv-title{font-size:20px;font-weight:700;margin:0}
+.rydr-sg-batch{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:8px 0;border-radius:10px;background:#12203a;border:1px solid #234}
+.rydr-sg-batch .cnt{font-weight:600;font-size:13px}
+.rydr-sg-batch select{padding:6px 10px;border-radius:8px;border:1px solid #2a3242;background:#0d1017;color:#e7e9ee;font:inherit}
+.rydr-sg-fv-list{margin-top:6px}
+.rydr-sg-fv-all{display:flex;align-items:center;gap:8px;padding:8px 4px;color:#9aa4b8;font-size:12px;border-bottom:1px solid #1a1e28;cursor:pointer}
+.rydr-sg-fv-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid #14171f}
+.rydr-sg-fv-row:hover{background:#11141b}
+.rydr-sg-fv-row .nm{font-weight:600;cursor:pointer}
+.rydr-sg-fv-row .nm:hover{color:#6fb4ff}
+.rydr-sg-fv-row .c{margin-left:auto;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#8b93a7;border:1px solid #2a3242;border-radius:999px;padding:1px 7px}
+`;
+const STYLE_ID = "rydr-sg-style";
+function ensureStyle() {
+    if (typeof document === "undefined" || document.getElementById(STYLE_ID))
+        return;
+    const s = document.createElement("style");
+    s.id = STYLE_ID;
+    s.textContent = CSS;
+    document.head.appendChild(s);
+}
+function el(tag, cls, text) {
+    const n = document.createElement(tag);
+    if (cls)
+        n.className = cls;
+    if (text != null)
+        n.textContent = text;
+    return n;
+}
+const fmtTime = (s) => `${Math.floor(s / 60)}:${(s % 60).toFixed(2).padStart(5, "0")}`;
+const safeKey = (s) => s.toLowerCase().replace(/\.[a-z0-9]+$/, "").replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "").slice(0, 48) || "sound";
+export function mountSoundGallery(root, opts) {
+    ensureStyle();
+    const { session } = opts;
+    const isAdmin = !!session.identity.isAdmin;
+    let sounds = [];
+    let selectedKey = null;
+    let query = "";
+    let dirty = false; // catalog changed since last Publish
+    // Crop state (only meaningful while a sound is selected and its buffer decoded).
+    let cropBuf = null;
+    let regionStart = 0;
+    let regionEnd = 0;
+    const audio = new Audio();
+    // Playback cursor (a seekable playhead over the waveform). Set while a detail view is mounted.
+    let waveCursor = null;
+    let cursorDur = 0; // duration the waveform spans, in seconds (the full clip)
+    let cursorSec = 0; // playback position / start, in full-clip seconds
+    let cursorRaf = null;
+    let playBtnRef = null; // current toolbar Play button, for its label
+    // Folder hierarchy (entities) + tree state. `expanded` holds open folder ids; roots auto-open once.
+    let folders = [];
+    const expanded = new Set();
+    let treeSeeded = false;
+    let selectedFolderId = null; // when set, the detail panel shows the folder view
+    const batch = new Set(); // multi-selected sound keys inside the folder view
+    let uploadTargetFolderId; // folder new uploads drop into ("Add sound here")
+    // Drag-and-drop transfer state (sound leaf or folder node being dragged).
+    let dragKind = null;
+    let dragId = null;
+    const container = el("div", "rydr-sg");
+    // ── Header ──
+    const head = el("div", "rydr-sg-head");
+    const titleBox = el("div");
+    titleBox.appendChild(el("h1", undefined, "Sound Library"));
+    const sub = el("div", "sub", "");
+    titleBox.appendChild(sub);
+    head.appendChild(titleBox);
+    const actions = el("div", "rydr-sg-actions");
+    const search = el("input", "rydr-sg-search");
+    search.placeholder = "Search name / key / tag…";
+    search.addEventListener("input", () => {
+        query = search.value.trim().toLowerCase();
+        renderList();
+    });
+    actions.appendChild(search);
+    const fileInput = el("input");
+    fileInput.type = "file";
+    fileInput.accept = "audio/*";
+    fileInput.multiple = true;
+    fileInput.style.display = "none";
+    fileInput.addEventListener("change", () => void onFilesPicked());
+    const addBtn = el("button", "rydr-sg-btn primary", "+ Add sound");
+    addBtn.addEventListener("click", () => fileInput.click());
+    const publishBtn = el("button", "rydr-sg-btn", "Publish library");
+    publishBtn.addEventListener("click", () => void onPublish());
+    if (isAdmin) {
+        actions.appendChild(addBtn);
+        actions.appendChild(publishBtn);
+        actions.appendChild(fileInput);
+    }
+    else {
+        actions.appendChild(el("span", "rydr-sg-ro", "read-only"));
+    }
+    head.appendChild(actions);
+    container.appendChild(head);
+    // ── Body ──
+    const body = el("div", "rydr-sg-body");
+    const side = el("div", "rydr-sg-side");
+    const detail = el("div", "rydr-sg-detail blank");
+    detail.textContent = "Select a sound";
+    body.appendChild(side);
+    body.appendChild(detail);
+    container.appendChild(body);
+    root.appendChild(container);
+    // ── Helpers ──
+    function toast(msg) {
+        const t = el("div", "rydr-sg-toast", msg);
+        container.appendChild(t);
+        setTimeout(() => t.remove(), 2600);
+    }
+    function updateSub() {
+        sub.textContent = `${sounds.length} sounds · ${folders.length} folders${dirty ? " · unpublished changes" : ""}`;
+    }
+    function markDirty() {
+        dirty = true;
+        updateSub();
+    }
+    function stopPreview() {
+        audio.pause();
+        stopCursor();
+    }
+    // ── Playback cursor & transport ──
+    function stopCursor() {
+        if (cursorRaf != null) {
+            cancelAnimationFrame(cursorRaf);
+            cursorRaf = null;
+        }
+    }
+    /** Clamp `sec` into the selection, store it, and paint the cursor there (visible). */
+    function placeCursor(sec) {
+        cursorSec = Math.max(regionStart, Math.min(regionEnd, sec));
+        if (!waveCursor)
+            return;
+        const w = waveCursor.parentElement?.clientWidth ?? 0;
+        const frac = cursorDur > 0 ? cursorSec / cursorDur : 0;
+        waveCursor.style.left = `${Math.max(0, Math.min(1, frac)) * w}px`;
+        waveCursor.style.display = "block";
+    }
+    function refreshPlayBtn() {
+        if (playBtnRef)
+            playBtnRef.textContent = audio.paused ? "▶ Play" : "⏸ Pause";
+    }
+    /** Play the shared <audio> from the cursor; auto-pause at the selection end (never leave it). */
+    function playFromCursor() {
+        const asset = sounds.find((s) => s.key === selectedKey);
+        const clip = asset?.clips[0];
+        if (!clip)
+            return;
+        if (audio.src !== clip.url)
+            audio.src = clip.url;
+        if (cursorSec >= regionEnd - 0.001)
+            cursorSec = regionStart; // finished → restart at selection start
+        // Seek to the cursor; before metadata is loaded the seek is ignored, so re-apply once it is.
+        const seekTo = cursorSec;
+        const seek = () => {
+            try {
+                audio.currentTime = seekTo;
+            }
+            catch {
+                /* noop */
+            }
+        };
+        if (audio.readyState >= 1 /* HAVE_METADATA */)
+            seek();
+        else
+            audio.addEventListener("loadedmetadata", seek, { once: true });
+        void audio.play().catch(() => undefined);
+        refreshPlayBtn();
+        stopCursor();
+        const tick = () => {
+            if (audio.paused || audio.ended) {
+                cursorRaf = null;
+                return;
+            }
+            if (audio.currentTime >= regionEnd) {
+                audio.pause();
+                placeCursor(regionEnd);
+                cursorRaf = null;
+                refreshPlayBtn();
+                return;
+            }
+            placeCursor(audio.currentTime);
+            cursorRaf = requestAnimationFrame(tick);
+        };
+        tick();
+    }
+    function pausePlayback() {
+        audio.pause();
+        stopCursor();
+        placeCursor(audio.currentTime); // keep the playhead visible where we stopped
+        refreshPlayBtn();
+    }
+    function togglePlay() {
+        if (audio.paused)
+            playFromCursor();
+        else
+            pausePlayback();
+    }
+    function stopPlayback() {
+        audio.pause();
+        stopCursor();
+        try {
+            audio.currentTime = regionStart;
+        }
+        catch {
+            /* noop */
+        }
+        placeCursor(regionStart);
+        refreshPlayBtn();
+    }
+    // ── Sidebar: folder hierarchy (entities) → sounds. Folders are authoring-only. ──
+    const UNFILED = "__unfiled__"; // pseudo-folder id for sounds with no folderId
+    const errMsg = (e) => (e instanceof Error ? e.message : String(e));
+    function genId() {
+        try {
+            return crypto.randomUUID();
+        }
+        catch {
+            return `f_${Math.floor(Math.random() * 1e9).toString(36)}`;
+        }
+    }
+    const folderById = (id) => (id ? folders.find((f) => f.id === id) : undefined);
+    /** Ancestor folder ids of `id`, root-first (excludes `id`). */
+    function ancestorsOf(id) {
+        const out = [];
+        const guard = new Set();
+        let cur = folderById(id)?.parentId ?? null;
+        while (cur && !guard.has(cur)) {
+            guard.add(cur);
+            out.unshift(cur);
+            cur = folderById(cur)?.parentId ?? null;
+        }
+        return out;
+    }
+    /** Human path for a folder, e.g. "Racing / Engine". */
+    const folderPath = (id) => [...ancestorsOf(id).map((a) => folderById(a)?.name ?? "?"), folderById(id)?.name ?? "?"].join(" / ");
+    /** Is `candidate` equal to, or inside the subtree of, `rootId`? (cycle guard for folder moves) */
+    function inSubtree(rootId, candidate) {
+        const guard = new Set();
+        let cur = candidate;
+        while (cur && !guard.has(cur)) {
+            if (cur === rootId)
+                return true;
+            guard.add(cur);
+            cur = folderById(cur)?.parentId ?? null;
+        }
+        return false;
+    }
+    function expandToFolder(id) {
+        for (const a of ancestorsOf(id))
+            expanded.add(a);
+        if (id)
+            expanded.add(id);
+    }
+    function expandToSound(key) {
+        const a = key ? sounds.find((s) => s.key === key) : null;
+        if (a)
+            expandToFolder(a.folderId ?? null);
+    }
+    const folderIsEmpty = (id) => !folders.some((f) => f.parentId === id) && !sounds.some((s) => s.folderId === id);
+    const foldersSortedByPath = () => [...folders].sort((a, b) => folderPath(a.id).localeCompare(folderPath(b.id)));
+    /** Build the folder forest + the unfiled bucket from the (possibly filtered) sound list. */
+    function buildForest(list) {
+        const nodes = new Map();
+        for (const f of folders)
+            nodes.set(f.id, { folder: f, children: [], sounds: [] });
+        const roots = [];
+        for (const f of folders) {
+            const node = nodes.get(f.id);
+            if (!node)
+                continue;
+            const parent = f.parentId ? nodes.get(f.parentId) : undefined;
+            if (parent)
+                parent.children.push(node);
+            else
+                roots.push(node);
+        }
+        const unfiled = [];
+        for (const s of list) {
+            const node = s.folderId ? nodes.get(s.folderId) : undefined;
+            if (node)
+                node.sounds.push(s);
+            else
+                unfiled.push(s);
+        }
+        return { roots, unfiled };
+    }
+    function countNodeSounds(node) {
+        let n = node.sounds.length;
+        for (const c of node.children)
+            n += countNodeSounds(c);
+        return n;
+    }
+    /** Wire an element as a drop target for a dragged sound (→ folderId) and optionally a folder (→ parentId). */
+    function makeDropTarget(elm, onSound, onFolder) {
+        if (!isAdmin)
+            return;
+        elm.addEventListener("dragover", (e) => {
+            e.preventDefault();
+            elm.classList.add("drop");
+        });
+        elm.addEventListener("dragleave", () => elm.classList.remove("drop"));
+        elm.addEventListener("drop", (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            elm.classList.remove("drop");
+            if (!dragId)
+                return;
+            if (dragKind === "sound")
+                onSound(dragId);
+            else if (dragKind === "folder" && onFolder)
+                onFolder(dragId);
+        });
+    }
+    function renderLeaf(s, depth) {
+        const item = el("div", `rydr-sg-item ${s.key === selectedKey ? "sel" : ""}`);
+        item.style.paddingLeft = `${18 + depth * 14}px`;
+        if (isAdmin)
+            item.draggable = true;
+        item.appendChild(el("span", "k", s.name || s.key));
+        item.appendChild(el("span", "c", s.category));
+        item.addEventListener("click", () => void selectSound(s.key));
+        item.addEventListener("dragstart", (e) => {
+            dragKind = "sound";
+            dragId = s.key;
+            e.dataTransfer?.setData("text/plain", s.key);
+        });
+        item.addEventListener("dragend", () => {
+            dragKind = null;
+            dragId = null;
+        });
+        return item;
+    }
+    function renderFolderNode(node, depth) {
+        const f = node.folder;
+        const open = query !== "" || expanded.has(f.id);
+        const header = el("div", `rydr-sg-tnode ${depth === 0 ? "cat" : ""} ${selectedFolderId === f.id ? "sel" : ""}`);
+        header.style.paddingLeft = `${10 + depth * 14}px`;
+        if (isAdmin)
+            header.draggable = true;
+        const chev = el("span", "chev", node.children.length ? (open ? "▼" : "▶") : "·");
+        chev.addEventListener("click", (e) => {
+            e.stopPropagation();
+            if (expanded.has(f.id))
+                expanded.delete(f.id);
+            else
+                expanded.add(f.id);
+            renderList();
+        });
+        header.appendChild(chev);
+        header.appendChild(el("span", "tlabel", f.name));
+        header.appendChild(el("span", "tcount", String(countNodeSounds(node))));
+        header.addEventListener("click", () => selectFolder(f.id));
+        header.addEventListener("contextmenu", (e) => {
+            e.preventDefault();
+            openFolderMenu(f, e.clientX, e.clientY);
+        });
+        header.addEventListener("dragstart", (e) => {
+            dragKind = "folder";
+            dragId = f.id;
+            e.dataTransfer?.setData("text/plain", f.id);
+        });
+        header.addEventListener("dragend", () => {
+            dragKind = null;
+            dragId = null;
+        });
+        makeDropTarget(header, (key) => void moveSound(key, f.id), (fid) => void moveFolder(fid, f.id));
+        side.appendChild(header);
+        if (!open)
+            return;
+        for (const child of [...node.children].sort((a, b) => a.folder.name.localeCompare(b.folder.name)))
+            renderFolderNode(child, depth + 1);
+        for (const s of [...node.sounds].sort((a, b) => (a.name || a.key).localeCompare(b.name || b.key)))
+            side.appendChild(renderLeaf(s, depth + 1));
+    }
+    function renderUnfiled(list) {
+        if (list.length === 0 && folders.length > 0) {
+            // still render as a drop target so sounds can be dragged OUT of folders
+        }
+        const open = query !== "" || folders.length === 0 || expanded.has(UNFILED);
+        const header = el("div", `rydr-sg-tnode cat ${selectedFolderId === UNFILED ? "sel" : ""}`);
+        header.style.paddingLeft = "10px";
+        const chev = el("span", "chev", list.length ? (open ? "▼" : "▶") : "·");
+        chev.addEventListener("click", (e) => {
+            e.stopPropagation();
+            if (expanded.has(UNFILED))
+                expanded.delete(UNFILED);
+            else
+                expanded.add(UNFILED);
+            renderList();
+        });
+        header.appendChild(chev);
+        header.appendChild(el("span", "tlabel", "Unfiled"));
+        header.appendChild(el("span", "tcount", String(list.length)));
+        header.addEventListener("click", () => selectFolder(UNFILED));
+        makeDropTarget(header, (key) => void moveSound(key, null), null);
+        side.appendChild(header);
+        if (!open)
+            return;
+        for (const s of [...list].sort((a, b) => (a.name || a.key).localeCompare(b.name || b.key)))
+            side.appendChild(renderLeaf(s, 1));
+    }
+    function renderList() {
+        side.innerHTML = "";
+        if (isAdmin) {
+            const bar = el("div", "rydr-sg-sideactions");
+            const nf = el("button", "rydr-sg-btn", "+ New folder");
+            nf.addEventListener("click", () => void createFolder(null));
+            bar.appendChild(nf);
+            side.appendChild(bar);
+        }
+        const filtered = query
+            ? sounds.filter((s) => [s.key, s.name, s.label, ...(s.tags ?? [])].some((v) => (v ?? "").toLowerCase().includes(query)))
+            : sounds;
+        const { roots, unfiled } = buildForest(filtered);
+        if (!treeSeeded) {
+            for (const r of roots)
+                expanded.add(r.folder.id); // root folders open on first load
+            treeSeeded = true;
+        }
+        if (folders.length === 0 && filtered.length === 0) {
+            side.appendChild(el("div", "rydr-sg-empty", sounds.length ? "No matches." : "No sounds yet. Add one, or make a folder."));
+            return;
+        }
+        for (const r of [...roots].sort((a, b) => a.folder.name.localeCompare(b.folder.name)))
+            renderFolderNode(r, 0);
+        renderUnfiled(unfiled);
+    }
+    function selectFolder(id) {
+        stopPreview();
+        selectedFolderId = id;
+        selectedKey = null;
+        batch.clear();
+        if (id !== UNFILED)
+            expandToFolder(id);
+        renderList();
+        renderDetail();
+    }
+    async function selectSound(key) {
+        stopPreview();
+        selectedKey = key;
+        selectedFolderId = null;
+        cropBuf = null;
+        expandToSound(key);
+        renderList();
+        renderDetail();
+    }
+    // ── Folder CRUD ──
+    async function createFolder(parentId) {
+        const name = (prompt("New folder name:", "New folder") || "").trim();
+        if (!name)
+            return;
+        const folder = { id: genId(), name, parentId };
+        try {
+            await session.saveFolder(folder);
+            folders = folders.concat(folder);
+            if (parentId)
+                expanded.add(parentId);
+            expanded.add(folder.id);
+            selectFolder(folder.id);
+        }
+        catch (e) {
+            toast(`Create folder failed: ${errMsg(e)}`);
+        }
+    }
+    async function renameFolder(f, name) {
+        const next = (name ?? prompt("Rename folder:", f.name) ?? "").trim();
+        if (!next || next === f.name)
+            return;
+        const updated = { ...f, name: next };
+        try {
+            await session.saveFolder(updated);
+            folders = folders.map((x) => (x.id === f.id ? updated : x));
+            renderList();
+            if (selectedFolderId === f.id)
+                renderDetail();
+        }
+        catch (e) {
+            toast(`Rename failed: ${errMsg(e)}`);
+        }
+    }
+    async function deleteFolderById(f) {
+        if (!folderIsEmpty(f.id)) {
+            toast("Folder isn't empty — move or delete its contents first.");
+            return;
+        }
+        if (!confirm(`Delete folder "${f.name}"?`))
+            return;
+        try {
+            await session.deleteFolder(f.id);
+            folders = folders.filter((x) => x.id !== f.id);
+            if (selectedFolderId === f.id)
+                selectedFolderId = null;
+            renderList();
+            renderDetail();
+        }
+        catch (e) {
+            toast(`Delete failed: ${errMsg(e)}`);
+        }
+    }
+    async function moveFolder(id, newParentId) {
+        const f = folderById(id);
+        if (!f || (f.parentId ?? null) === newParentId)
+            return;
+        if (newParentId && inSubtree(id, newParentId)) {
+            toast("Can't move a folder into its own subtree.");
+            return;
+        }
+        const updated = { ...f, parentId: newParentId };
+        try {
+            await session.saveFolder(updated);
+            folders = folders.map((x) => (x.id === id ? updated : x));
+            if (newParentId)
+                expanded.add(newParentId);
+            renderList();
+        }
+        catch (e) {
+            toast(`Move failed: ${errMsg(e)}`);
+        }
+    }
+    async function moveSound(key, folderId) {
+        const asset = sounds.find((s) => s.key === key);
+        if (!asset || (asset.folderId ?? null) === folderId)
+            return;
+        if (folderId)
+            expanded.add(folderId);
+        await patch(asset, { folderId });
+    }
+    // ── Folder right-click menu ──
+    let ctxMenu = null;
+    function closeMenu() {
+        ctxMenu?.remove();
+        ctxMenu = null;
+    }
+    function openFolderMenu(f, x, y) {
+        if (!isAdmin)
+            return;
+        closeMenu();
+        const menu = el("div", "rydr-sg-menu");
+        menu.style.left = `${x}px`;
+        menu.style.top = `${y}px`;
+        const item = (label, fn, disabled = false) => {
+            const it = el("div", `rydr-sg-menu-item ${disabled ? "dis" : ""}`, label);
+            if (!disabled)
+                it.addEventListener("click", () => { closeMenu(); fn(); });
+            menu.appendChild(it);
+        };
+        item("New subfolder", () => void createFolder(f.id));
+        item("Rename", () => void renameFolder(f));
+        item("Delete", () => void deleteFolderById(f), !folderIsEmpty(f.id));
+        container.appendChild(menu);
+        ctxMenu = menu;
+    }
+    // ── Batch actions (folder view) ──
+    async function batchApply(fn) {
+        for (const k of [...batch]) {
+            const a = sounds.find((s) => s.key === k);
+            if (!a)
+                continue;
+            const next = fn(a);
+            try {
+                await session.saveSound(next);
+                replaceAsset(next);
+            }
+            catch (e) {
+                toast(errMsg(e));
+            }
+        }
+        batch.clear();
+        markDirty();
+        renderList();
+        renderDetail();
+    }
+    const batchMove = (folderId) => batchApply((a) => ({ ...a, folderId, updatedAt: Date.now() }));
+    const batchChannel = (c) => batchApply((a) => ({ ...a, category: c, updatedAt: Date.now() }));
+    async function batchDelete() {
+        if (!confirm(`Delete ${batch.size} sound(s)?`))
+            return;
+        for (const k of [...batch]) {
+            try {
+                await session.deleteSound(k);
+                sounds = sounds.filter((s) => s.key !== k);
+            }
+            catch (e) {
+                toast(errMsg(e));
+            }
+        }
+        batch.clear();
+        markDirty();
+        renderList();
+        renderDetail();
+    }
+    function optionEl(value, label) {
+        const o = el("option", undefined, label);
+        o.value = value;
+        return o;
+    }
+    // ── Folder view (detail panel when a folder is selected) ──
+    function renderFolderView(id) {
+        detail.className = "rydr-sg-detail";
+        detail.innerHTML = "";
+        waveCursor = null;
+        playBtnRef = null;
+        const isUnfiled = id === UNFILED;
+        const folder = isUnfiled ? null : folderById(id);
+        if (!isUnfiled && !folder) {
+            selectedFolderId = null;
+            detail.className = "rydr-sg-detail blank";
+            detail.textContent = "Select a sound";
+            return;
+        }
+        const items = sounds
+            .filter((s) => (s.folderId ?? null) === (isUnfiled ? null : id))
+            .sort((a, b) => (a.name || a.key).localeCompare(b.name || b.key));
+        const header = el("div", "rydr-sg-fv-head");
+        header.appendChild(el("div", "rydr-sg-fv-crumb", isUnfiled ? "Library" : ["Library", ...ancestorsOf(id).map((a) => folderById(a)?.name ?? "?")].join(" / ")));
+        if (!isUnfiled && folder && isAdmin) {
+            const nameInp = el("input", "rydr-sg-fv-name");
+            nameInp.value = folder.name;
+            nameInp.addEventListener("change", () => void renameFolder(folder, nameInp.value));
+            header.appendChild(nameInp);
+        }
+        else {
+            header.appendChild(el("h2", "rydr-sg-fv-title", isUnfiled ? "Unfiled" : folder?.name ?? ""));
+        }
+        detail.appendChild(header);
+        if (isAdmin) {
+            const bar = el("div", "rydr-sg-toolbar");
+            if (!isUnfiled) {
+                const sub = el("button", "rydr-sg-btn", "+ New subfolder");
+                sub.addEventListener("click", () => void createFolder(id));
+                bar.appendChild(sub);
+            }
+            const addHere = el("button", "rydr-sg-btn primary", "+ Add sound here");
+            addHere.addEventListener("click", () => {
+                uploadTargetFolderId = isUnfiled ? null : id;
+                fileInput.click();
+            });
+            bar.appendChild(addHere);
+            if (!isUnfiled && folder) {
+                const del = el("button", "rydr-sg-btn danger", "Delete folder");
+                del.disabled = !folderIsEmpty(id);
+                del.title = del.disabled ? "Folder isn't empty" : "Delete this folder";
+                del.addEventListener("click", () => void deleteFolderById(folder));
+                bar.appendChild(del);
+            }
+            detail.appendChild(bar);
+        }
+        // Batch action bar (shown only when a selection exists).
+        const batchBar = el("div", "rydr-sg-batch");
+        const renderBatchBar = () => {
+            batchBar.innerHTML = "";
+            if (batch.size === 0) {
+                batchBar.style.display = "none";
+                return;
+            }
+            batchBar.style.display = "flex";
+            batchBar.appendChild(el("span", "cnt", `${batch.size} selected`));
+            const moveSel = el("select");
+            moveSel.appendChild(optionEl("", "Move to…"));
+            moveSel.appendChild(optionEl(UNFILED, "Unfiled"));
+            for (const f of foldersSortedByPath())
+                moveSel.appendChild(optionEl(f.id, folderPath(f.id)));
+            moveSel.addEventListener("change", () => {
+                if (moveSel.value)
+                    void batchMove(moveSel.value === UNFILED ? null : moveSel.value);
+            });
+            batchBar.appendChild(moveSel);
+            const chSel = el("select");
+            chSel.appendChild(optionEl("", "Set channel…"));
+            for (const c of SOUND_CATEGORIES)
+                chSel.appendChild(optionEl(c, c));
+            chSel.addEventListener("change", () => {
+                if (chSel.value)
+                    void batchChannel(chSel.value);
+            });
+            batchBar.appendChild(chSel);
+            const del = el("button", "rydr-sg-btn danger", "Delete selected");
+            del.addEventListener("click", () => void batchDelete());
+            batchBar.appendChild(del);
+        };
+        detail.appendChild(batchBar);
+        const listWrap = el("div", "rydr-sg-fv-list");
+        if (items.length === 0) {
+            listWrap.appendChild(el("div", "rydr-sg-empty", "Empty folder — drag sounds here, or use “Add sound here”."));
+        }
+        else {
+            const rowsBox = el("div");
+            const renderRows = () => {
+                rowsBox.innerHTML = "";
+                for (const s of items) {
+                    const row = el("div", "rydr-sg-fv-row");
+                    const cb = el("input");
+                    cb.type = "checkbox";
+                    cb.checked = batch.has(s.key);
+                    cb.addEventListener("change", () => {
+                        if (cb.checked)
+                            batch.add(s.key);
+                        else
+                            batch.delete(s.key);
+                        renderBatchBar();
+                    });
+                    row.appendChild(cb);
+                    const nm = el("span", "nm", s.name || s.key);
+                    nm.addEventListener("click", () => void selectSound(s.key));
+                    row.appendChild(nm);
+                    row.appendChild(el("span", "c", s.category));
+                    rowsBox.appendChild(row);
+                }
+            };
+            const allRow = el("label", "rydr-sg-fv-all");
+            const allCb = el("input");
+            allCb.type = "checkbox";
+            allCb.checked = items.every((s) => batch.has(s.key));
+            allCb.addEventListener("change", () => {
+                for (const s of items)
+                    allCb.checked ? batch.add(s.key) : batch.delete(s.key);
+                renderRows();
+                renderBatchBar();
+            });
+            allRow.appendChild(allCb);
+            allRow.appendChild(el("span", undefined, `Select all (${items.length})`));
+            listWrap.appendChild(allRow);
+            listWrap.appendChild(rowsBox);
+            renderRows();
+        }
+        detail.appendChild(listWrap);
+        renderBatchBar();
+    }
+    // ── Detail / editor ──
+    function renderDetail() {
+        stopPreview();
+        if (selectedFolderId) {
+            renderFolderView(selectedFolderId);
+            return;
+        }
+        const asset = sounds.find((s) => s.key === selectedKey);
+        detail.className = "rydr-sg-detail";
+        detail.innerHTML = "";
+        if (!asset) {
+            detail.className = "rydr-sg-detail blank";
+            detail.textContent = "Select a sound";
+            waveCursor = null;
+            playBtnRef = null;
+            return;
+        }
+        const clip = asset.clips[0];
+        // Metadata fields
+        const mkField = (label, value, onChange, opts2) => {
+            const f = el("div", "rydr-sg-field");
+            f.appendChild(el("label", undefined, label));
+            if (opts2?.select) {
+                const sel = el("select");
+                for (const o of opts2.select) {
+                    const opt = el("option", undefined, o);
+                    opt.value = o;
+                    if (o === value)
+                        opt.selected = true;
+                    sel.appendChild(opt);
+                }
+                sel.disabled = !isAdmin;
+                sel.addEventListener("change", () => onChange(sel.value));
+                f.appendChild(sel);
+            }
+            else {
+                const inp = el("input");
+                inp.value = value;
+                inp.disabled = !isAdmin;
+                if (opts2?.width)
+                    inp.style.width = opts2.width;
+                inp.addEventListener("change", () => onChange(inp.value));
+                f.appendChild(inp);
+            }
+            return f;
+        };
+        const row1 = el("div", "rydr-sg-row");
+        row1.appendChild(mkField("Key (play id)", asset.key, (v) => void renameKey(asset, v)));
+        row1.appendChild(mkField("Name", asset.name, (v) => void patch(asset, { name: v })));
+        row1.appendChild(mkField("Channel", asset.category, (v) => void patch(asset, { category: v }), {
+            select: SOUND_CATEGORIES,
+        }));
+        detail.appendChild(row1);
+        const row2 = el("div", "rydr-sg-row");
+        // Folder is set by dragging in the tree / the folder view — shown read-only here as a breadcrumb.
+        const folderField = el("div", "rydr-sg-field");
+        folderField.appendChild(el("label", undefined, "Folder"));
+        const filed = asset.folderId && folderById(asset.folderId);
+        const fval = el("div", "rydr-sg-folderval", filed ? folderPath(asset.folderId) : "Unfiled");
+        fval.title = "Move via drag-and-drop in the sidebar, or the folder view";
+        folderField.appendChild(fval);
+        row2.appendChild(folderField);
+        row2.appendChild(mkField("Label", asset.label ?? "", (v) => void patch(asset, { label: v || undefined })));
+        row2.appendChild(mkField("Tags (comma-sep)", (asset.tags ?? []).join(", "), (v) => void patch(asset, { tags: v ? v.split(",").map((t) => t.trim()).filter(Boolean) : undefined })));
+        row2.appendChild(mkField("Gain (dB)", String(asset.gainDb ?? 0), (v) => void patch(asset, { gainDb: Number(v) || 0 }), {
+            width: "80px",
+        }));
+        detail.appendChild(row2);
+        // Waveform + crop
+        const waveWrap = el("div", "rydr-sg-wave");
+        const canvas = el("canvas");
+        waveWrap.appendChild(canvas);
+        const region = el("div", "rydr-sg-region");
+        const hStart = el("div", "rydr-sg-handle");
+        const hEnd = el("div", "rydr-sg-handle");
+        const cursor = el("div", "rydr-sg-cursor");
+        waveWrap.appendChild(region);
+        waveWrap.appendChild(hStart);
+        waveWrap.appendChild(hEnd);
+        waveWrap.appendChild(cursor);
+        detail.appendChild(waveWrap);
+        drawWave(canvas, asset.peaks ?? []);
+        waveCursor = cursor;
+        // Click the waveform to place the playback cursor (clamped into the selection). Bound on the
+        // canvas so the crop handles (siblings, above it) keep their own drag hit-zones.
+        canvas.addEventListener("pointerdown", (e) => {
+            if (dur <= 0)
+                return;
+            const rect = waveWrap.getBoundingClientRect();
+            const frac = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
+            placeCursor(frac * dur);
+            if (!audio.paused) {
+                try {
+                    audio.currentTime = cursorSec;
+                }
+                catch {
+                    /* noop */
+                }
+            }
+        });
+        const times = el("div", "rydr-sg-times");
+        const tStart = el("span");
+        const tEnd = el("span");
+        const tDur = el("span");
+        times.appendChild(tStart);
+        times.appendChild(tEnd);
+        times.appendChild(tDur);
+        detail.appendChild(times);
+        const dur = clip?.durationSec ?? 0;
+        cursorDur = dur;
+        regionStart = 0;
+        regionEnd = dur;
+        cursorSec = 0;
+        const layout = () => {
+            const w = waveWrap.clientWidth || 1;
+            const a = dur > 0 ? regionStart / dur : 0;
+            const b = dur > 0 ? regionEnd / dur : 1;
+            hStart.style.left = `${a * w}px`;
+            hEnd.style.left = `${b * w}px`;
+            region.style.left = `${a * w}px`;
+            region.style.width = `${(b - a) * w}px`;
+            tStart.innerHTML = `Start <b>${fmtTime(regionStart)}</b>`;
+            tEnd.innerHTML = `End <b>${fmtTime(regionEnd)}</b>`;
+            tDur.innerHTML = `Selection <b>${fmtTime(Math.max(0, regionEnd - regionStart))}</b>`;
+        };
+        layout();
+        placeCursor(regionStart); // show the playhead at the selection start on load
+        const dragHandle = (handle, which) => {
+            handle.addEventListener("pointerdown", (e) => {
+                if (!isAdmin || dur <= 0)
+                    return;
+                e.preventDefault();
+                handle.setPointerCapture(e.pointerId);
+                const rect = waveWrap.getBoundingClientRect();
+                const move = (ev) => {
+                    const frac = Math.min(1, Math.max(0, (ev.clientX - rect.left) / rect.width));
+                    const t = frac * dur;
+                    if (which === "start")
+                        regionStart = Math.min(t, regionEnd - 0.02);
+                    else
+                        regionEnd = Math.max(t, regionStart + 0.02);
+                    layout();
+                    placeCursor(cursorSec); // keep the playhead inside the new selection
+                };
+                const up = () => {
+                    handle.removeEventListener("pointermove", move);
+                    handle.removeEventListener("pointerup", up);
+                };
+                handle.addEventListener("pointermove", move);
+                handle.addEventListener("pointerup", up);
+            });
+        };
+        dragHandle(hStart, "start");
+        dragHandle(hEnd, "end");
+        // Toolbar — one Play/Pause that plays the selection from the cursor, plus Stop (reset).
+        const bar = el("div", "rydr-sg-toolbar");
+        const playBtn = el("button", "rydr-sg-btn", "▶ Play");
+        playBtn.addEventListener("click", () => togglePlay());
+        bar.appendChild(playBtn);
+        playBtnRef = playBtn;
+        const stopBtn = el("button", "rydr-sg-btn", "⏹ Stop");
+        stopBtn.addEventListener("click", () => stopPlayback());
+        bar.appendChild(stopBtn);
+        if (isAdmin) {
+            const cropBtn = el("button", "rydr-sg-btn primary", "✂ Crop & save");
+            cropBtn.addEventListener("click", () => void doCrop(asset, cropBtn));
+            bar.appendChild(cropBtn);
+            const dupBtn = el("button", "rydr-sg-btn", "⧉ Duplicate");
+            dupBtn.addEventListener("click", () => void duplicate(asset));
+            bar.appendChild(dupBtn);
+            const delBtn = el("button", "rydr-sg-btn danger", "Delete");
+            delBtn.addEventListener("click", () => void removeSound(asset));
+            bar.appendChild(delBtn);
+        }
+        detail.appendChild(bar);
+        // Meta footer
+        const meta = el("div", "rydr-sg-meta");
+        meta.appendChild(el("div", undefined, `${clip?.filename ?? "—"} · ${dur ? fmtTime(dur) : "?"} · ${asset.loudness?.peakDb != null ? `peak ${asset.loudness.peakDb} dBFS` : "peak ?"}`));
+        if (clip) {
+            const link = el("a", undefined, "open file ↗");
+            link.href = clip.url;
+            link.target = "_blank";
+            link.style.color = "#6fb4ff";
+            meta.appendChild(link);
+        }
+        detail.appendChild(meta);
+    }
+    function drawWave(canvas, peaks) {
+        const dpr = window.devicePixelRatio || 1;
+        const w = canvas.clientWidth || 600;
+        const h = canvas.clientHeight || 120;
+        canvas.width = w * dpr;
+        canvas.height = h * dpr;
+        const g = canvas.getContext("2d");
+        if (!g)
+            return;
+        g.scale(dpr, dpr);
+        g.clearRect(0, 0, w, h);
+        g.fillStyle = "#3f74ee";
+        const n = peaks.length || 1;
+        const bw = w / n;
+        for (let i = 0; i < n; i++) {
+            const p = peaks[i] ?? 0;
+            const bh = Math.max(1, p * (h - 6));
+            g.fillRect(i * bw, (h - bh) / 2, Math.max(1, bw - 0.5), bh);
+        }
+    }
+    async function ensureCropBuf(asset) {
+        if (cropBuf)
+            return cropBuf;
+        const clip = asset.clips[0];
+        if (!clip)
+            return null;
+        try {
+            const res = await fetch(clip.url);
+            cropBuf = await decodeAudio(await res.arrayBuffer());
+            return cropBuf;
+        }
+        catch {
+            toast("Could not load audio for editing.");
+            return null;
+        }
+    }
+    async function doCrop(asset, btn) {
+        const buf = await ensureCropBuf(asset);
+        if (!buf)
+            return;
+        btn.disabled = true;
+        btn.textContent = "Cropping…";
+        try {
+            const cropped = await cropBuffer(buf, regionStart, regionEnd);
+            const mp3 = encodeMp3(cropped);
+            // Overwrite in place, cache-safe: upload a FRESH object and repoint the row's url.
+            const filename = `${asset.key}.mp3`;
+            const url = await session.uploadClip({ filename, blob: mp3 });
+            const peaks = computePeaks(cropped);
+            const next = {
+                ...asset,
+                clips: [{ url, filename, durationSec: cropped.duration }],
+                peaks,
+                loudness: { ...asset.loudness, peakDb: peakDb(cropped) },
+                updatedAt: Date.now(),
+            };
+            await session.saveSound(next);
+            replaceAsset(next);
+            cropBuf = null;
+            markDirty();
+            renderDetail();
+            toast("Cropped & saved. Publish to push to games.");
+        }
+        catch (e) {
+            toast(`Crop failed: ${e instanceof Error ? e.message : String(e)}`);
+        }
+        finally {
+            btn.disabled = false;
+            btn.textContent = "✂ Crop & save";
+        }
+    }
+    async function patch(asset, changes) {
+        const next = { ...asset, ...changes, updatedAt: Date.now() };
+        try {
+            await session.saveSound(next);
+            replaceAsset(next);
+            markDirty();
+            renderList();
+        }
+        catch (e) {
+            toast(`Save failed: ${e instanceof Error ? e.message : String(e)}`);
+        }
+    }
+    async function renameKey(asset, raw) {
+        const key = safeKey(raw);
+        if (key === asset.key)
+            return;
+        if (sounds.some((s) => s.key === key)) {
+            toast(`Key "${key}" already exists.`);
+            renderDetail();
+            return;
+        }
+        try {
+            const next = { ...asset, key, updatedAt: Date.now() };
+            await session.saveSound(next);
+            await session.deleteSound(asset.key);
+            sounds = sounds.filter((s) => s.key !== asset.key).concat(next);
+            selectedKey = key;
+            expandToSound(key);
+            markDirty();
+            renderList();
+            renderDetail();
+        }
+        catch (e) {
+            toast(`Rename failed: ${e instanceof Error ? e.message : String(e)}`);
+        }
+    }
+    async function duplicate(asset) {
+        let key = `${asset.key}_copy`;
+        let i = 2;
+        while (sounds.some((s) => s.key === key))
+            key = `${asset.key}_copy${i++}`;
+        const next = { ...asset, key, name: `${asset.name} copy`, updatedAt: Date.now() };
+        try {
+            await session.saveSound(next);
+            sounds = sounds.concat(next);
+            selectedKey = key;
+            expandToSound(key);
+            markDirty();
+            renderList();
+            renderDetail();
+        }
+        catch (e) {
+            toast(`Duplicate failed: ${e instanceof Error ? e.message : String(e)}`);
+        }
+    }
+    async function removeSound(asset) {
+        if (!confirm(`Delete "${asset.name}" (${asset.key})?`))
+            return;
+        try {
+            await session.deleteSound(asset.key);
+            sounds = sounds.filter((s) => s.key !== asset.key);
+            if (selectedKey === asset.key)
+                selectedKey = null;
+            markDirty();
+            renderList();
+            renderDetail();
+        }
+        catch (e) {
+            toast(`Delete failed: ${e instanceof Error ? e.message : String(e)}`);
+        }
+    }
+    function replaceAsset(next) {
+        sounds = sounds.map((s) => (s.key === next.key ? next : s));
+    }
+    // ── Add / ingest ──
+    async function onFilesPicked() {
+        const files = Array.from(fileInput.files ?? []);
+        fileInput.value = "";
+        // Where new uploads land: an explicit "Add sound here" target, else the selected folder, else unfiled.
+        const target = uploadTargetFolderId !== undefined ? uploadTargetFolderId : selectedFolderId && selectedFolderId !== UNFILED ? selectedFolderId : null;
+        uploadTargetFolderId = undefined;
+        let lastKey = null;
+        for (const file of files) {
+            try {
+                const buf = await decodeAudio(file);
+                // Everything in the library is stored as MP3, whatever was uploaded (wav/ogg/…).
+                const mp3 = encodeMp3(buf);
+                const filename = `${file.name.replace(/\.[a-z0-9]+$/i, "")}.mp3`;
+                const url = await session.uploadClip({ filename, blob: mp3 });
+                let key = safeKey(file.name);
+                let i = 2;
+                while (sounds.some((s) => s.key === key))
+                    key = `${safeKey(file.name)}_${i++}`;
+                const asset = {
+                    key,
+                    name: file.name.replace(/\.[a-z0-9]+$/i, ""),
+                    category: "sfx",
+                    folderId: target,
+                    clips: [{ url, filename, durationSec: buf.duration }],
+                    peaks: computePeaks(buf),
+                    loudness: { peakDb: peakDb(buf) },
+                    updatedAt: Date.now(),
+                };
+                await session.saveSound(asset);
+                sounds = sounds.concat(asset);
+                lastKey = key;
+            }
+            catch (e) {
+                toast(`Failed to add ${file.name}: ${e instanceof Error ? e.message : String(e)}`);
+            }
+        }
+        markDirty();
+        if (target)
+            expanded.add(target);
+        // Stay in the folder view if that's where the upload came from; otherwise open the new sound.
+        if (selectedFolderId) {
+            renderList();
+            renderDetail();
+        }
+        else if (lastKey) {
+            void selectSound(lastKey);
+        }
+        else {
+            renderList();
+            renderDetail();
+        }
+        updateSub();
+    }
+    async function onPublish() {
+        publishBtn.disabled = true;
+        publishBtn.textContent = "Publishing…";
+        try {
+            const url = await session.publish(sounds);
+            dirty = false;
+            updateSub();
+            toast(`Published ${sounds.length} sounds → ${url}`);
+            try {
+                await navigator.clipboard.writeText(url);
+                toast("Library URL copied to clipboard.");
+            }
+            catch {
+                /* clipboard blocked */
+            }
+        }
+        catch (e) {
+            toast(`Publish failed: ${e instanceof Error ? e.message : String(e)}`);
+        }
+        finally {
+            publishBtn.disabled = false;
+            publishBtn.textContent = "Publish library";
+        }
+    }
+    // ── Boot ──
+    // When the clip plays out on its own, snap the cursor back to the selection start.
+    audio.addEventListener("ended", () => {
+        stopCursor();
+        placeCursor(regionStart);
+        refreshPlayBtn();
+    });
+    // Spacebar toggles play/pause, unless a metadata field is focused.
+    const onKey = (e) => {
+        if (e.code !== "Space")
+            return;
+        const t = e.target;
+        const tag = t?.tagName;
+        if (tag === "INPUT" || tag === "SELECT" || tag === "TEXTAREA" || t?.isContentEditable)
+            return;
+        if (!selectedKey)
+            return;
+        e.preventDefault();
+        togglePlay();
+    };
+    document.addEventListener("keydown", onKey);
+    // Any click that isn't inside the open context menu dismisses it.
+    const onDocClick = (e) => {
+        if (ctxMenu && !ctxMenu.contains(e.target))
+            closeMenu();
+    };
+    document.addEventListener("click", onDocClick);
+    void (async () => {
+        try {
+            const [s, f] = await Promise.all([session.listSounds(), session.listFolders()]);
+            sounds = s;
+            folders = f;
+        }
+        catch (e) {
+            toast(`Failed to load library: ${e instanceof Error ? e.message : String(e)}`);
+        }
+        updateSub();
+        renderList();
+    })();
+    return {
+        dispose() {
+            stopPreview();
+            closeMenu();
+            document.removeEventListener("keydown", onKey);
+            document.removeEventListener("click", onDocClick);
+            container.remove();
+        },
+    };
+}
+//# sourceMappingURL=index.js.map