@ai-game-assets/phaser 0.1.0

package/dist/designer-support.js

@@ -0,0 +1,3341 @@
+const assetFormatOptions = [
+    { value: "png", label: "PNG" },
+    { value: "jpg", label: "JPEG" },
+    { value: "webp", label: "WebP" },
+    { value: "svg", label: "SVG" }
+];
+const audioFormatOptions = [
+    { value: "mp3", label: "MP3" },
+    { value: "wav", label: "WAV" },
+    { value: "ogg", label: "OGG" },
+    { value: "opus", label: "Opus" },
+    { value: "pcm", label: "PCM" }
+];
+export function createDesignerElements(options, manifest, selectedAssetId) {
+    const root = document.createElement("div");
+    root.className = "ai-game-assets-designer";
+    root.dataset.open = "false";
+    const toggle = document.createElement("button");
+    toggle.type = "button";
+    toggle.className = "ai-game-assets-designer__toggle";
+    toggle.setAttribute("aria-label", "Toggle AI asset designer");
+    toggle.setAttribute("aria-expanded", "false");
+    toggle.textContent = "Assets";
+    const panel = document.createElement("div");
+    panel.className = "ai-game-assets-designer__panel";
+    const title = document.createElement("div");
+    title.className = "ai-game-assets-designer__title";
+    title.textContent = options.title ?? "AI Asset Designer";
+    const styleButton = document.createElement("button");
+    styleButton.type = "button";
+    styleButton.className = "ai-game-assets-designer__style-button";
+    styleButton.textContent = "Define style...";
+    const header = document.createElement("div");
+    header.className = "ai-game-assets-designer__header";
+    header.append(title, styleButton);
+    const assetSelect = document.createElement("select");
+    assetSelect.className = "ai-game-assets-designer__select";
+    assetSelect.hidden = true;
+    const assetBrowser = document.createElement("div");
+    assetBrowser.className = "ai-game-assets-designer__asset-browser";
+    for (const assetId of options.assetIds ?? Object.keys(manifest.assets)) {
+        const option = document.createElement("option");
+        option.value = assetId;
+        option.textContent = readableAssetName(assetId);
+        option.selected = assetId === selectedAssetId;
+        assetSelect.append(option);
+    }
+    const animationSelect = document.createElement("select");
+    animationSelect.className = "ai-game-assets-designer__animation-select";
+    const animationField = labelWrap("Animation", animationSelect);
+    const promptInput = document.createElement("textarea");
+    promptInput.className = "ai-game-assets-designer__prompt";
+    promptInput.rows = 6;
+    const widthInput = numericInput();
+    const heightInput = numericInput();
+    const frameCountInput = numericInput();
+    const audioDurationInput = numericInput();
+    audioDurationInput.step = "0.1";
+    audioDurationInput.inputMode = "decimal";
+    const audioLoopInput = document.createElement("input");
+    audioLoopInput.type = "checkbox";
+    const voiceTextInput = document.createElement("textarea");
+    voiceTextInput.className = "ai-game-assets-designer__prompt";
+    voiceTextInput.rows = 3;
+    const formatSelect = document.createElement("select");
+    formatSelect.className = "ai-game-assets-designer__format-select";
+    for (const format of assetFormatOptions) {
+        const option = document.createElement("option");
+        option.value = format.value;
+        option.textContent = format.label;
+        formatSelect.append(option);
+    }
+    const audioFormatSelect = document.createElement("select");
+    audioFormatSelect.className = "ai-game-assets-designer__format-select";
+    for (const format of audioFormatOptions) {
+        const option = document.createElement("option");
+        option.value = format.value;
+        option.textContent = format.label;
+        audioFormatSelect.append(option);
+    }
+    const dimensionGrid = document.createElement("div");
+    dimensionGrid.className = "ai-game-assets-designer__dimensions";
+    dimensionGrid.append(labelWrap("Width", widthInput), labelWrap("Height", heightInput));
+    const frameCountField = labelWrap("Frames", frameCountInput);
+    const formatField = labelWrap("Format", formatSelect);
+    const audioFormatField = labelWrap("Audio format", audioFormatSelect);
+    const audioDurationField = labelWrap("Length (sec)", audioDurationInput);
+    const audioLoopField = labelWrap("Loop", audioLoopInput);
+    const voiceTextField = labelWrap("Demo sentence", voiceTextInput);
+    const currentPreview = document.createElement("div");
+    currentPreview.className = "ai-game-assets-designer__current";
+    currentPreview.setAttribute("role", "button");
+    currentPreview.tabIndex = 0;
+    const currentImage = document.createElement("img");
+    currentImage.className = "ai-game-assets-designer__current-image";
+    const currentAudio = document.createElement("div");
+    currentAudio.className = "ai-game-assets-designer__current-audio";
+    const currentAnimation = document.createElement("div");
+    currentAnimation.className = "ai-game-assets-designer__animation-stage";
+    currentAnimation.hidden = true;
+    const currentAnimationButton = document.createElement("button");
+    currentAnimationButton.type = "button";
+    currentAnimationButton.className = "ai-game-assets-designer__animate-button";
+    currentAnimationButton.textContent = "Animate";
+    currentAnimationButton.hidden = true;
+    const currentTouchUpButton = document.createElement("button");
+    currentTouchUpButton.type = "button";
+    currentTouchUpButton.className = "ai-game-assets-designer__animate-button";
+    currentTouchUpButton.textContent = "Touch up...";
+    currentTouchUpButton.hidden = true;
+    currentPreview.append(currentImage, currentAudio, currentAnimation, currentAnimationButton, currentTouchUpButton);
+    const regenerateButton = document.createElement("button");
+    regenerateButton.type = "button";
+    regenerateButton.textContent = "Regenerate";
+    const uploadButton = document.createElement("button");
+    uploadButton.type = "button";
+    uploadButton.textContent = "Upload...";
+    const promoteButton = document.createElement("button");
+    promoteButton.type = "button";
+    promoteButton.textContent = "Promote";
+    promoteButton.disabled = true;
+    const restartButton = document.createElement("button");
+    restartButton.type = "button";
+    restartButton.textContent = "Restart";
+    const actions = document.createElement("div");
+    actions.className = "ai-game-assets-designer__actions";
+    actions.append(regenerateButton, uploadButton, promoteButton, restartButton);
+    const versionLabel = document.createElement("div");
+    versionLabel.className = "ai-game-assets-designer__meta";
+    const optionsGrid = document.createElement("div");
+    optionsGrid.className = "ai-game-assets-designer__options";
+    const status = document.createElement("div");
+    status.className = "ai-game-assets-designer__status";
+    panel.append(header, labelWrap("Asset", assetBrowser), animationField, dimensionGrid, frameCountField, formatField, audioFormatField, audioDurationField, audioLoopField, voiceTextField, labelWrap("Current", currentPreview), labelWrap("Prompt", promptInput), actions, versionLabel, optionsGrid, status);
+    root.append(toggle, panel);
+    return {
+        root,
+        toggle,
+        panel,
+        styleButton,
+        assetSelect,
+        assetBrowser,
+        animationSelect,
+        animationField,
+        widthInput,
+        heightInput,
+        dimensionGrid,
+        frameCountInput,
+        frameCountField,
+        formatSelect,
+        formatField,
+        audioFormatSelect,
+        audioFormatField,
+        audioDurationInput,
+        audioDurationField,
+        audioLoopInput,
+        audioLoopField,
+        voiceTextInput,
+        voiceTextField,
+        promptInput,
+        currentImage,
+        currentAudio,
+        currentAnimation,
+        currentAnimationButton,
+        currentTouchUpButton,
+        currentPreview,
+        uploadButton,
+        regenerateButton,
+        promoteButton,
+        restartButton,
+        versionLabel,
+        options: optionsGrid,
+        status
+    };
+}
+export function renderAssetFolderBrowser(options) {
+    const visibleAssetIds = options.assetIds ?? Object.keys(options.manifest.assets);
+    const assetPathEntries = visibleAssetIds
+        .filter((assetId) => options.manifest.assets[assetId])
+        .map((assetId) => ({
+        assetId,
+        path: folderPathForAsset(options.manifest, assetId)
+    }));
+    const selectedPath = folderPathForAsset(options.manifest, options.selectedAssetId);
+    const storedPathValue = options.container.getAttribute("data-path");
+    const storedPath = storedPathValue !== null
+        ? storedPathValue.split("/").filter(Boolean)
+        : selectedPath;
+    const currentPath = pathHasAnyAsset(storedPath, assetPathEntries)
+        ? storedPath
+        : selectedPath;
+    options.container.dataset.path = currentPath.join("/");
+    options.container.innerHTML = "";
+    const breadcrumbs = document.createElement("div");
+    breadcrumbs.className = "ai-game-assets-designer__asset-breadcrumbs";
+    breadcrumbs.append(assetCrumbButton("Assets", [], options));
+    currentPath.forEach((part, index) => {
+        const separator = document.createElement("span");
+        separator.textContent = "/";
+        separator.className = "ai-game-assets-designer__asset-breadcrumb-separator";
+        breadcrumbs.append(separator, assetCrumbButton(part, currentPath.slice(0, index + 1), options));
+    });
+    const list = document.createElement("div");
+    list.className = "ai-game-assets-designer__asset-list";
+    const childFolders = new Set();
+    const childAssets = [];
+    for (const entry of assetPathEntries) {
+        if (!isPathPrefix(currentPath, entry.path))
+            continue;
+        const nextPart = entry.path[currentPath.length];
+        if (nextPart) {
+            childFolders.add(nextPart);
+        }
+        else {
+            childAssets.push(entry.assetId);
+        }
+    }
+    for (const folderName of [...childFolders].sort((a, b) => a.localeCompare(b))) {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "ai-game-assets-designer__asset-folder";
+        button.textContent = folderName;
+        button.addEventListener("click", () => {
+            options.container.dataset.path = [...currentPath, folderName].join("/");
+            renderAssetFolderBrowser(options);
+        });
+        list.append(button);
+    }
+    for (const assetId of childAssets.sort((a, b) => readableAssetName(a).localeCompare(readableAssetName(b)))) {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "ai-game-assets-designer__asset-item";
+        button.classList.toggle("is-selected", assetId === options.selectedAssetId);
+        button.textContent = readableAssetName(assetId);
+        button.addEventListener("click", () => {
+            options.container.dataset.path = folderPathForAsset(options.manifest, assetId).join("/");
+            options.onSelect(assetId);
+        });
+        list.append(button);
+    }
+    options.container.append(breadcrumbs, list);
+}
+export function assetCrumbButton(label, pathParts, options) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "ai-game-assets-designer__asset-breadcrumb";
+    button.textContent = label;
+    button.addEventListener("click", () => {
+        options.container.dataset.path = pathParts.join("/");
+        renderAssetFolderBrowser(options);
+    });
+    return button;
+}
+export function folderPathForAsset(manifest, assetId) {
+    const configuredPath = manifest.assetPaths?.[assetId];
+    if (configuredPath)
+        return configuredPath;
+    const asset = manifest.assets[assetId];
+    if (!asset)
+        return [];
+    if (asset.kind === "sound")
+        return ["Sfx"];
+    if (asset.kind === "music")
+        return ["Music"];
+    if (asset.kind === "voice" || asset.kind === "voice-line")
+        return ["Voices"];
+    if (asset.id.startsWith("invader."))
+        return ["Graphics", "Invaders"];
+    if (asset.id.startsWith("ui."))
+        return ["Graphics", "UI"];
+    if (asset.id.startsWith("laser."))
+        return ["Graphics", "Lasers"];
+    if (asset.id.startsWith("background."))
+        return ["Graphics", "Background"];
+    return ["Graphics"];
+}
+export function pathHasAnyAsset(pathParts, entries) {
+    return entries.some((entry) => isPathPrefix(pathParts, entry.path));
+}
+export function isPathPrefix(prefix, fullPath) {
+    return prefix.every((part, index) => fullPath[index] === part);
+}
+export function renderOptions(options) {
+    options.elements.options.innerHTML = "";
+    const asset = options.manifest.assets[options.assetId];
+    const isAudio = isAudioAsset(asset);
+    options.elements.options.classList.toggle("is-audio", isAudio);
+    for (const option of options.generated) {
+        const optionAsset = assetWithGeneratedGeometry(asset, option);
+        const card = document.createElement("div");
+        card.className = "ai-game-assets-designer__option";
+        const selectButton = document.createElement("button");
+        selectButton.type = "button";
+        selectButton.className = "ai-game-assets-designer__option-select";
+        const image = document.createElement("img");
+        if (isAudio) {
+            selectButton.textContent = `Select option ${option.index + 1}`;
+            selectButton.classList.add("ai-game-assets-designer__option-select--audio");
+        }
+        else {
+            image.src = option.dataUrl;
+            image.alt = `${options.assetId} option ${option.index + 1}`;
+            selectButton.append(image);
+        }
+        selectButton.addEventListener("click", () => {
+            for (const item of options.elements.options.querySelectorAll(".ai-game-assets-designer__option")) {
+                item.classList.remove("is-selected");
+            }
+            options.elements.currentPreview.classList.remove("is-selected");
+            card.classList.add("is-selected");
+            if (isAudio) {
+                options.onPreview(options.assetId, option.dataUrl, optionAsset);
+            }
+            else {
+                previewOption({
+                    scene: options.scene,
+                    manifest: options.manifest,
+                    assetId: options.assetId,
+                    option,
+                    onPreview: options.onPreview
+                });
+            }
+            options.onSelected(option);
+            setStatus(options.elements, `Previewing option ${option.index + 1}.`, "info");
+        });
+        card.append(selectButton);
+        if (isAudio) {
+            const player = document.createElement("div");
+            player.className = "ai-game-assets-designer__option-audio";
+            renderAudioPlayer({
+                container: player,
+                src: option.dataUrl,
+                label: `${readableAssetName(options.assetId)} option ${option.index + 1}`,
+                playback: optionAsset.audioPlayback
+            });
+            card.append(player);
+        }
+        if (!isAudio && optionAsset.frameGrid) {
+            const animationStage = document.createElement("div");
+            animationStage.className = "ai-game-assets-designer__option-animation";
+            animationStage.hidden = true;
+            selectButton.append(animationStage);
+            const animateButton = document.createElement("button");
+            animateButton.type = "button";
+            animateButton.className = "ai-game-assets-designer__animate-button";
+            animateButton.textContent = "Animate";
+            let stopAnimation;
+            animateButton.addEventListener("click", () => {
+                if (stopAnimation) {
+                    stopAnimation();
+                    stopAnimation = undefined;
+                    animationStage.hidden = true;
+                    image.hidden = false;
+                    animateButton.textContent = "Animate";
+                    return;
+                }
+                image.hidden = true;
+                animationStage.hidden = false;
+                animateButton.textContent = "Stop";
+                stopAnimation = startSpritesheetPreview({
+                    element: animationStage,
+                    src: option.dataUrl,
+                    asset: optionAsset,
+                    displaySize: resolvePreviewDisplaySize(options.designerOptions, options.assetId, optionAsset),
+                    applyFrameTransforms: false
+                });
+            });
+            card.append(animateButton);
+        }
+        options.elements.options.append(card);
+    }
+}
+export function previewOption(options) {
+    const textureKey = `ai-preview:${options.assetId}:${options.option.index}:${Date.now()}`;
+    previewImageSource({
+        scene: options.scene,
+        manifest: options.manifest,
+        assetId: options.assetId,
+        src: options.option.dataUrl,
+        textureKey,
+        assetOverride: assetWithGeneratedGeometry(options.manifest.assets[options.assetId], options.option),
+        onPreview: options.onPreview
+    });
+}
+export function previewCurrentAsset(options) {
+    const textureKey = `ai-current-preview:${options.assetId}:${Date.now()}`;
+    previewImageSource({
+        ...options,
+        textureKey
+    });
+}
+export function previewImageSource(options) {
+    const image = new Image();
+    image.onload = () => {
+        if (options.scene.textures.exists(options.textureKey)) {
+            options.scene.textures.remove(options.textureKey);
+        }
+        const asset = options.assetOverride ?? options.manifest.assets[options.assetId];
+        if (asset.frameGrid && options.scene.textures.addSpriteSheet) {
+            options.scene.textures.addSpriteSheet(options.textureKey, image, {
+                frameWidth: asset.frameGrid.frameWidth,
+                frameHeight: asset.frameGrid.frameHeight,
+                margin: asset.frameGrid.margin,
+                spacing: asset.frameGrid.spacing
+            });
+        }
+        else {
+            options.scene.textures.addImage(options.textureKey, image);
+        }
+        options.onPreview(options.assetId, options.textureKey, asset);
+    };
+    image.src = options.src;
+}
+export async function uploadedOptionFromFile(options) {
+    const dataUrl = await fileToDataUrl(options.file);
+    const mimeType = mimeTypeFromDataUrl(dataUrl);
+    const isAudio = isAudioAsset(options.asset);
+    const audioSettings = isAudio
+        ? {
+            ...audioGenerationOverridesFromInputs(options.elements, options.asset),
+            format: audioFormatFromMimeType(mimeType, options.file.name)
+        }
+        : undefined;
+    if (isAudio) {
+        return {
+            index: 0,
+            dataUrl,
+            mimeType,
+            prompt: options.prompt || options.asset.prompt,
+            model: "uploaded",
+            audioSettings,
+            audioPlayback: options.asset.audioPlayback,
+            voiceSettings: voiceGenerationOverridesFromInputs(options.elements, options.asset),
+            durationSeconds: await audioDurationFromDataUrl(dataUrl)
+        };
+    }
+    const imageSize = await imageSizeFromSource(dataUrl);
+    const geometry = uploadedImageGeometry(options.asset, imageSize);
+    return {
+        index: 0,
+        dataUrl,
+        mimeType,
+        prompt: options.prompt || options.asset.prompt,
+        model: "uploaded",
+        dimensions: geometry.dimensions,
+        frameGrid: geometry.frameGrid,
+        animations: options.asset.animations,
+        settings: {
+            ...options.asset.settings,
+            format: normalizeAssetFormatFromMimeType(mimeType, options.file.name)
+        }
+    };
+}
+export function uploadedImageGeometry(asset, imageSize) {
+    if (!asset.frameGrid) {
+        return {
+            dimensions: imageSize
+        };
+    }
+    const frameGrid = {
+        ...asset.frameGrid
+    };
+    return {
+        dimensions: {
+            width: frameGrid.frameWidth * frameGrid.columns,
+            height: frameGrid.frameHeight * frameGrid.rows
+        },
+        frameGrid
+    };
+}
+export function pickUploadFile(accept) {
+    return new Promise((resolve) => {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = accept;
+        input.addEventListener("change", () => {
+            resolve(input.files?.[0]);
+        }, { once: true });
+        input.click();
+    });
+}
+export function imageSizeFromSource(src) {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.onload = () => resolve({
+            width: Math.max(1, image.naturalWidth),
+            height: Math.max(1, image.naturalHeight)
+        });
+        image.onerror = () => reject(new Error("Could not load uploaded image."));
+        image.src = src;
+    });
+}
+export async function replaceSpriteSheetFrames(options) {
+    const [sheetImage, frameImage] = await Promise.all([
+        loadImageElement(options.src),
+        loadImageElement(options.uploadSrc)
+    ]);
+    const frameWidth = options.frameGrid.frameWidth;
+    const frameHeight = options.frameGrid.frameHeight;
+    const margin = options.frameGrid.margin ?? 0;
+    const spacing = options.frameGrid.spacing ?? 0;
+    const canvas = document.createElement("canvas");
+    canvas.width = margin * 2 +
+        (options.frameGrid.columns * frameWidth) +
+        (Math.max(0, options.frameGrid.columns - 1) * spacing);
+    canvas.height = margin * 2 +
+        (options.frameGrid.rows * frameHeight) +
+        (Math.max(0, options.frameGrid.rows - 1) * spacing);
+    const context = canvas.getContext("2d");
+    if (!context) {
+        throw new Error("Could not create canvas for frame upload.");
+    }
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    context.drawImage(sheetImage, 0, 0, canvas.width, canvas.height);
+    for (const frame of options.frames) {
+        const column = frame % options.frameGrid.columns;
+        const row = Math.floor(frame / options.frameGrid.columns);
+        const x = margin + (column * (frameWidth + spacing));
+        const y = margin + (row * (frameHeight + spacing));
+        context.clearRect(x, y, frameWidth, frameHeight);
+        context.drawImage(frameImage, x, y, frameWidth, frameHeight);
+    }
+    return canvas.toDataURL("image/png");
+}
+export async function spriteSheetFrameToDataUrl(options) {
+    const sheetImage = await loadImageElement(options.src);
+    const frameWidth = options.frameGrid.frameWidth;
+    const frameHeight = options.frameGrid.frameHeight;
+    const margin = options.frameGrid.margin ?? 0;
+    const spacing = options.frameGrid.spacing ?? 0;
+    const column = options.frame % options.frameGrid.columns;
+    const row = Math.floor(options.frame / options.frameGrid.columns);
+    const sourceX = margin + (column * (frameWidth + spacing));
+    const sourceY = margin + (row * (frameHeight + spacing));
+    const canvas = document.createElement("canvas");
+    canvas.width = frameWidth;
+    canvas.height = frameHeight;
+    const context = canvas.getContext("2d");
+    if (!context) {
+        throw new Error("Could not create canvas for frame touch-up.");
+    }
+    context.clearRect(0, 0, frameWidth, frameHeight);
+    context.drawImage(sheetImage, sourceX, sourceY, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);
+    return canvas.toDataURL("image/png");
+}
+export function isSvgSource(src) {
+    return src.startsWith("data:image/svg+xml") || /\.svg(?:$|\?)/i.test(src);
+}
+export async function openFrameTouchUpEditor(options) {
+    const sourceImage = await loadImageElement(options.frameSrc);
+    const dialog = document.createElement("div");
+    dialog.className = "ai-game-assets-designer__touchup";
+    dialog.setAttribute("role", "dialog");
+    dialog.setAttribute("aria-modal", "true");
+    dialog.setAttribute("aria-label", `Touch up ${options.title}`);
+    const header = document.createElement("div");
+    header.className = "ai-game-assets-designer__touchup-header";
+    const title = document.createElement("div");
+    title.className = "ai-game-assets-designer__touchup-title";
+    title.textContent = options.title;
+    const dirtyLabel = document.createElement("span");
+    dirtyLabel.className = "ai-game-assets-designer__touchup-dirty";
+    dirtyLabel.hidden = true;
+    dirtyLabel.textContent = "Unsaved changes";
+    const closeButton = document.createElement("button");
+    closeButton.type = "button";
+    closeButton.className = "ai-game-assets-designer__touchup-close";
+    closeButton.setAttribute("aria-label", "Close touch-up editor");
+    closeButton.textContent = "X";
+    header.append(title, dirtyLabel, closeButton);
+    const toolbar = document.createElement("div");
+    toolbar.className = "ai-game-assets-designer__touchup-toolbar";
+    const zoomOutButton = touchUpButton("Zoom -");
+    const zoomInButton = touchUpButton("Zoom +");
+    const brushButton = touchUpButton("Brush");
+    const brushMenuButton = touchUpButton("");
+    brushMenuButton.className = "ai-game-assets-designer__touchup-split-arrow";
+    brushMenuButton.setAttribute("aria-label", "Brush settings");
+    const brushSplit = document.createElement("div");
+    brushSplit.className = "ai-game-assets-designer__touchup-split";
+    brushSplit.append(brushButton, brushMenuButton);
+    const brushMenu = document.createElement("div");
+    brushMenu.className = "ai-game-assets-designer__touchup-brush-menu";
+    brushMenu.hidden = true;
+    const brushSizeInput = document.createElement("input");
+    brushSizeInput.type = "range";
+    brushSizeInput.min = "1";
+    brushSizeInput.max = "32";
+    brushSizeInput.step = "1";
+    brushSizeInput.value = "4";
+    const brushSizeValue = document.createElement("span");
+    brushSizeValue.textContent = brushSizeInput.value;
+    const brushSizeField = document.createElement("label");
+    brushSizeField.className = "ai-game-assets-designer__touchup-brush-size";
+    brushSizeField.append("Size", brushSizeInput, brushSizeValue);
+    const antiAliasInput = document.createElement("input");
+    antiAliasInput.type = "checkbox";
+    antiAliasInput.checked = true;
+    const antiAliasField = document.createElement("label");
+    antiAliasField.className = "ai-game-assets-designer__inline-checkbox";
+    antiAliasField.append(antiAliasInput, "Anti-aliased round tip");
+    brushMenu.append(brushSizeField, antiAliasField);
+    brushSplit.append(brushMenu);
+    const eraserButton = touchUpButton("Eraser");
+    const pickerButton = touchUpButton("Picker");
+    const selectButton = touchUpButton("Select");
+    const fillButton = touchUpButton("Fill");
+    const undoButton = touchUpButton("Undo");
+    const redoButton = touchUpButton("Redo");
+    const saveButton = touchUpButton("Save");
+    saveButton.classList.add("is-primary");
+    const colorInput = document.createElement("input");
+    colorInput.type = "color";
+    colorInput.value = "#f8fafc";
+    colorInput.setAttribute("aria-label", "Brush color");
+    const alphaInput = document.createElement("input");
+    alphaInput.type = "number";
+    alphaInput.min = "0";
+    alphaInput.max = "255";
+    alphaInput.step = "1";
+    alphaInput.value = "255";
+    alphaInput.setAttribute("aria-label", "Alpha");
+    const rgbaLabel = document.createElement("label");
+    rgbaLabel.className = "ai-game-assets-designer__touchup-color";
+    const alphaLabel = document.createElement("span");
+    alphaLabel.textContent = "A";
+    rgbaLabel.append(colorInput, alphaLabel, alphaInput);
+    toolbar.append(zoomOutButton, zoomInButton, rgbaLabel, pickerButton, brushSplit, eraserButton, selectButton, fillButton, undoButton, redoButton, saveButton);
+    const workspace = document.createElement("div");
+    workspace.className = "ai-game-assets-designer__touchup-workspace";
+    const canvasWrap = document.createElement("div");
+    canvasWrap.className = "ai-game-assets-designer__touchup-canvas-wrap";
+    const canvas = document.createElement("canvas");
+    canvas.className = "ai-game-assets-designer__touchup-canvas";
+    canvas.width = Math.max(1, sourceImage.naturalWidth);
+    canvas.height = Math.max(1, sourceImage.naturalHeight);
+    const selectionBox = document.createElement("div");
+    selectionBox.className = "ai-game-assets-designer__touchup-selection";
+    selectionBox.hidden = true;
+    canvasWrap.append(canvas, selectionBox);
+    const side = document.createElement("div");
+    side.className = "ai-game-assets-designer__touchup-side";
+    const stillPanel = document.createElement("div");
+    stillPanel.className = "ai-game-assets-designer__touchup-panel";
+    const stillTitle = document.createElement("div");
+    stillTitle.textContent = "Frame";
+    const stillPreview = document.createElement("canvas");
+    stillPreview.width = canvas.width;
+    stillPreview.height = canvas.height;
+    stillPanel.append(stillTitle, stillPreview);
+    const animationPanel = document.createElement("div");
+    animationPanel.className = "ai-game-assets-designer__touchup-panel";
+    const animationTitle = document.createElement("div");
+    animationTitle.textContent = "Animation";
+    const animationPreview = document.createElement("canvas");
+    animationPreview.width = Math.max(1, Math.round(options.displaySize.width));
+    animationPreview.height = Math.max(1, Math.round(options.displaySize.height));
+    animationPanel.append(animationTitle, animationPreview);
+    side.append(stillPanel, animationPanel);
+    workspace.append(canvasWrap, side);
+    dialog.append(header, toolbar, workspace);
+    options.root.append(dialog);
+    const context = canvas.getContext("2d", { willReadFrequently: true });
+    const stillContext = stillPreview.getContext("2d");
+    const animationContext = animationPreview.getContext("2d");
+    if (!context || !stillContext || !animationContext) {
+        dialog.remove();
+        throw new Error("Could not create touch-up canvas.");
+    }
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    context.drawImage(sourceImage, 0, 0, canvas.width, canvas.height);
+    let zoom = Math.max(1, Math.floor(Math.min(8, 480 / Math.max(canvas.width, canvas.height))));
+    let tool = "brush";
+    let dirty = false;
+    let drawing = false;
+    let selectionStart;
+    let selection;
+    let animationTimeout;
+    let animationCursor = 0;
+    let disposed = false;
+    const activeTouchPointers = new Map();
+    let pinchStartDistance;
+    let pinchStartZoom = zoom;
+    const undoStack = [];
+    const redoStack = [];
+    const frameGrid = options.asset.frameGrid;
+    const animation = options.asset.animations?.[0];
+    const frames = animation?.frames ?? [options.frame ?? 0];
+    const frameRate = animation?.frameRate ?? 8;
+    const frameTimings = animation?.frameTimings ?? [];
+    const sheetImage = options.spriteSheetSrc
+        ? await loadImageElement(options.spriteSheetSrc)
+        : undefined;
+    const selectedColor = () => {
+        const hex = colorInput.value.replace("#", "");
+        const red = Number.parseInt(hex.slice(0, 2), 16);
+        const green = Number.parseInt(hex.slice(2, 4), 16);
+        const blue = Number.parseInt(hex.slice(4, 6), 16);
+        const alpha = clamp(Math.round(Number(alphaInput.value)), 0, 255);
+        return [red, green, blue, alpha];
+    };
+    const brushSize = () => positiveIntegerInput(brushSizeInput, 1);
+    const setDirty = (value) => {
+        dirty = value;
+        dirtyLabel.hidden = !dirty;
+    };
+    const updateZoom = () => {
+        canvas.style.width = `${canvas.width * zoom}px`;
+        canvas.style.height = `${canvas.height * zoom}px`;
+        syncSelectionBox();
+    };
+    const updateToolButtons = () => {
+        for (const button of [brushButton, eraserButton, pickerButton, selectButton, fillButton]) {
+            button.classList.remove("is-active");
+        }
+        const activeButton = {
+            brush: brushButton,
+            eraser: eraserButton,
+            picker: pickerButton,
+            select: selectButton,
+            fill: fillButton
+        }[tool];
+        activeButton.classList.add("is-active");
+    };
+    const updateUndoRedo = () => {
+        undoButton.disabled = undoStack.length === 0;
+        redoButton.disabled = redoStack.length === 0;
+    };
+    const snapshot = () => context.getImageData(0, 0, canvas.width, canvas.height);
+    const pushUndo = () => {
+        undoStack.push(snapshot());
+        if (undoStack.length > 60)
+            undoStack.shift();
+        redoStack.length = 0;
+        updateUndoRedo();
+    };
+    const restore = (imageData) => {
+        context.putImageData(imageData, 0, 0);
+        selection = undefined;
+        redrawEditor();
+        setDirty(true);
+    };
+    const syncSelectionBox = () => {
+        if (!selection) {
+            selectionBox.hidden = true;
+            return;
+        }
+        selectionBox.hidden = false;
+        selectionBox.style.left = `${selection.x * zoom}px`;
+        selectionBox.style.top = `${selection.y * zoom}px`;
+        selectionBox.style.width = `${selection.width * zoom}px`;
+        selectionBox.style.height = `${selection.height * zoom}px`;
+    };
+    const refreshPreviews = () => {
+        stillContext.clearRect(0, 0, stillPreview.width, stillPreview.height);
+        stillContext.imageSmoothingEnabled = false;
+        stillContext.drawImage(canvas, 0, 0, stillPreview.width, stillPreview.height);
+    };
+    const redrawEditor = () => {
+        refreshPreviews();
+        syncSelectionBox();
+    };
+    const canvasPoint = (event) => {
+        const bounds = canvas.getBoundingClientRect();
+        return {
+            x: clamp(Math.floor(((event.clientX - bounds.left) / bounds.width) * canvas.width), 0, canvas.width - 1),
+            y: clamp(Math.floor(((event.clientY - bounds.top) / bounds.height) * canvas.height), 0, canvas.height - 1)
+        };
+    };
+    const setZoom = (value, anchor) => {
+        const previousZoom = zoom;
+        let anchorCanvasX;
+        let anchorCanvasY;
+        let anchorOffsetX;
+        let anchorOffsetY;
+        if (anchor) {
+            const canvasBounds = canvas.getBoundingClientRect();
+            const wrapBounds = canvasWrap.getBoundingClientRect();
+            anchorCanvasX = ((anchor.clientX - canvasBounds.left) / canvasBounds.width) * canvas.width;
+            anchorCanvasY = ((anchor.clientY - canvasBounds.top) / canvasBounds.height) * canvas.height;
+            anchorOffsetX = anchor.clientX - wrapBounds.left;
+            anchorOffsetY = anchor.clientY - wrapBounds.top;
+        }
+        zoom = clamp(value, 1, 32);
+        if (zoom === previousZoom)
+            return;
+        updateZoom();
+        if (anchorCanvasX !== undefined &&
+            anchorCanvasY !== undefined &&
+            anchorOffsetX !== undefined &&
+            anchorOffsetY !== undefined) {
+            canvasWrap.scrollLeft = (anchorCanvasX * zoom) + canvas.offsetLeft - anchorOffsetX;
+            canvasWrap.scrollTop = (anchorCanvasY * zoom) + canvas.offsetTop - anchorOffsetY;
+        }
+    };
+    const touchPointerDistance = () => {
+        const pointers = [...activeTouchPointers.values()];
+        const first = pointers[0];
+        const second = pointers[1];
+        if (!first || !second)
+            return undefined;
+        return Math.hypot(second.x - first.x, second.y - first.y);
+    };
+    const touchPointerCenter = () => {
+        const pointers = [...activeTouchPointers.values()];
+        const first = pointers[0];
+        const second = pointers[1];
+        if (!first || !second)
+            return undefined;
+        return {
+            clientX: (first.x + second.x) / 2,
+            clientY: (first.y + second.y) / 2
+        };
+    };
+    const paintAt = (point) => {
+        const size = brushSize();
+        const halfSize = Math.floor(size / 2);
+        const left = clamp(point.x - halfSize, 0, canvas.width - 1);
+        const top = clamp(point.y - halfSize, 0, canvas.height - 1);
+        const right = clamp(left + size - 1, 0, canvas.width - 1);
+        const bottom = clamp(top + size - 1, 0, canvas.height - 1);
+        const imageData = context.getImageData(left, top, right - left + 1, bottom - top + 1);
+        const data = imageData.data;
+        const color = selectedColor();
+        const antiAliased = antiAliasInput.checked;
+        const radius = size / 2;
+        const centerX = point.x + 0.5;
+        const centerY = point.y + 0.5;
+        for (let y = 0; y < imageData.height; y += 1) {
+            for (let x = 0; x < imageData.width; x += 1) {
+                const canvasX = left + x;
+                const canvasY = top + y;
+                let coverage = 1;
+                if (antiAliased) {
+                    const deltaX = (canvasX + 0.5) - centerX;
+                    const deltaY = (canvasY + 0.5) - centerY;
+                    const distance = Math.hypot(deltaX, deltaY);
+                    coverage = clamp(radius + 0.5 - distance, 0, 1);
+                    if (coverage <= 0)
+                        continue;
+                }
+                const index = ((y * imageData.width) + x) * 4;
+                if (tool === "eraser") {
+                    if (antiAliased && coverage < 1) {
+                        data[index + 3] = Math.round(data[index + 3] * (1 - coverage));
+                    }
+                    else {
+                        data[index] = 0;
+                        data[index + 1] = 0;
+                        data[index + 2] = 0;
+                        data[index + 3] = 0;
+                    }
+                }
+                else {
+                    if (antiAliased && coverage < 1) {
+                        const sourceAlpha = (color[3] / 255) * coverage;
+                        const targetAlpha = data[index + 3] / 255;
+                        const outAlpha = sourceAlpha + (targetAlpha * (1 - sourceAlpha));
+                        if (outAlpha <= 0) {
+                            data[index] = 0;
+                            data[index + 1] = 0;
+                            data[index + 2] = 0;
+                            data[index + 3] = 0;
+                        }
+                        else {
+                            data[index] = Math.round(((color[0] * sourceAlpha) + (data[index] * targetAlpha * (1 - sourceAlpha))) / outAlpha);
+                            data[index + 1] = Math.round(((color[1] * sourceAlpha) + (data[index + 1] * targetAlpha * (1 - sourceAlpha))) / outAlpha);
+                            data[index + 2] = Math.round(((color[2] * sourceAlpha) + (data[index + 2] * targetAlpha * (1 - sourceAlpha))) / outAlpha);
+                            data[index + 3] = Math.round(outAlpha * 255);
+                        }
+                    }
+                    else {
+                        data[index] = color[0];
+                        data[index + 1] = color[1];
+                        data[index + 2] = color[2];
+                        data[index + 3] = color[3];
+                    }
+                }
+            }
+        }
+        context.putImageData(imageData, left, top);
+    };
+    const pickColorAt = (point) => {
+        const data = context.getImageData(point.x, point.y, 1, 1).data;
+        colorInput.value = `#${hexByte(data[0])}${hexByte(data[1])}${hexByte(data[2])}`;
+        alphaInput.value = String(data[3]);
+    };
+    const fillAt = (point) => {
+        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+        const data = imageData.data;
+        const replacement = selectedColor();
+        const startIndex = ((point.y * canvas.width) + point.x) * 4;
+        const target = [
+            data[startIndex],
+            data[startIndex + 1],
+            data[startIndex + 2],
+            data[startIndex + 3]
+        ];
+        if (target.every((value, index) => value === replacement[index]))
+            return;
+        const stack = [point];
+        const visited = new Uint8Array(canvas.width * canvas.height);
+        while (stack.length > 0) {
+            const current = stack.pop();
+            if (!current)
+                continue;
+            if (current.x < 0 || current.y < 0 || current.x >= canvas.width || current.y >= canvas.height)
+                continue;
+            const pixelIndex = (current.y * canvas.width) + current.x;
+            if (visited[pixelIndex])
+                continue;
+            visited[pixelIndex] = 1;
+            const dataIndex = pixelIndex * 4;
+            if (data[dataIndex] !== target[0] ||
+                data[dataIndex + 1] !== target[1] ||
+                data[dataIndex + 2] !== target[2] ||
+                data[dataIndex + 3] !== target[3]) {
+                continue;
+            }
+            data[dataIndex] = replacement[0];
+            data[dataIndex + 1] = replacement[1];
+            data[dataIndex + 2] = replacement[2];
+            data[dataIndex + 3] = replacement[3];
+            stack.push({ x: current.x + 1, y: current.y }, { x: current.x - 1, y: current.y }, { x: current.x, y: current.y + 1 }, { x: current.x, y: current.y - 1 });
+        }
+        context.putImageData(imageData, 0, 0);
+    };
+    const moveSelection = (deltaX, deltaY) => {
+        if (!selection)
+            return;
+        pushUndo();
+        const nextX = clamp(selection.x + deltaX, 0, canvas.width - selection.width);
+        const nextY = clamp(selection.y + deltaY, 0, canvas.height - selection.height);
+        const imageData = context.getImageData(selection.x, selection.y, selection.width, selection.height);
+        context.clearRect(selection.x, selection.y, selection.width, selection.height);
+        context.putImageData(imageData, nextX, nextY);
+        selection = { ...selection, x: nextX, y: nextY };
+        setDirty(true);
+        redrawEditor();
+    };
+    const deleteSelection = () => {
+        if (!selection)
+            return;
+        pushUndo();
+        context.clearRect(selection.x, selection.y, selection.width, selection.height);
+        selection = undefined;
+        setDirty(true);
+        redrawEditor();
+    };
+    const drawAnimationFrame = () => {
+        if (disposed)
+            return;
+        if (!frameGrid || !animation || !sheetImage) {
+            animationContext.clearRect(0, 0, animationPreview.width, animationPreview.height);
+            animationContext.imageSmoothingEnabled = false;
+            animationContext.drawImage(canvas, 0, 0, animationPreview.width, animationPreview.height);
+            animationTimeout = window.setTimeout(drawAnimationFrame, 250);
+            return;
+        }
+        const frameSlot = animationCursor % frames.length;
+        const frame = frames[frameSlot] ?? 0;
+        const timing = frameTimings[frameSlot];
+        const column = frame % frameGrid.columns;
+        const row = Math.floor(frame / frameGrid.columns);
+        const sourceX = (frameGrid.margin ?? 0) + (column * (frameGrid.frameWidth + (frameGrid.spacing ?? 0)));
+        const sourceY = (frameGrid.margin ?? 0) + (row * (frameGrid.frameHeight + (frameGrid.spacing ?? 0)));
+        animationContext.clearRect(0, 0, animationPreview.width, animationPreview.height);
+        animationContext.imageSmoothingEnabled = false;
+        animationContext.save();
+        animationContext.translate(animationPreview.width / 2, animationPreview.height / 2);
+        animationContext.translate(timing?.offsetX ?? 0, timing?.offsetY ?? 0);
+        animationContext.scale(timing?.scaleX ?? 1, timing?.scaleY ?? 1);
+        animationContext.rotate(((timing?.rotation ?? 0) * Math.PI) / 180);
+        if (frameSlot === options.frameSlot) {
+            animationContext.drawImage(canvas, -options.displaySize.width / 2, -options.displaySize.height / 2, options.displaySize.width, options.displaySize.height);
+        }
+        else {
+            animationContext.drawImage(sheetImage, sourceX, sourceY, frameGrid.frameWidth, frameGrid.frameHeight, -options.displaySize.width / 2, -options.displaySize.height / 2, options.displaySize.width, options.displaySize.height);
+        }
+        animationContext.restore();
+        animationCursor += 1;
+        animationTimeout = window.setTimeout(drawAnimationFrame, timing?.delayMs ?? 1000 / frameRate);
+    };
+    const closeBrushMenuOnOutsidePointer = (event) => {
+        const target = event.target;
+        if (brushMenu.hidden || !(target instanceof Node) || brushSplit.contains(target))
+            return;
+        brushMenu.hidden = true;
+    };
+    const close = () => {
+        disposed = true;
+        if (animationTimeout !== undefined)
+            window.clearTimeout(animationTimeout);
+        window.removeEventListener("keydown", keyHandler);
+        document.removeEventListener("pointerdown", closeBrushMenuOnOutsidePointer);
+        dialog.remove();
+    };
+    const requestClose = () => {
+        if (dirty && !window.confirm("You have unsaved changes. Close without saving?"))
+            return;
+        close();
+    };
+    const keyHandler = (event) => {
+        if (!dialog.isConnected)
+            return;
+        if (event.key === "Escape") {
+            requestClose();
+            return;
+        }
+        if (event.key === "Backspace" || event.key === "Delete") {
+            event.preventDefault();
+            deleteSelection();
+            return;
+        }
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            moveSelection(-1, 0);
+        }
+        else if (event.key === "ArrowRight") {
+            event.preventDefault();
+            moveSelection(1, 0);
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            moveSelection(0, -1);
+        }
+        else if (event.key === "ArrowDown") {
+            event.preventDefault();
+            moveSelection(0, 1);
+        }
+    };
+    canvas.addEventListener("pointerdown", (event) => {
+        if (event.pointerType === "touch") {
+            activeTouchPointers.set(event.pointerId, {
+                x: event.clientX,
+                y: event.clientY
+            });
+            if (activeTouchPointers.size >= 2) {
+                drawing = false;
+                selectionStart = undefined;
+                pinchStartDistance = touchPointerDistance();
+                pinchStartZoom = zoom;
+                canvas.setPointerCapture(event.pointerId);
+                return;
+            }
+        }
+        const point = canvasPoint(event);
+        if (tool === "picker") {
+            pickColorAt(point);
+            return;
+        }
+        pushUndo();
+        drawing = true;
+        canvas.setPointerCapture(event.pointerId);
+        if (tool === "select") {
+            selectionStart = point;
+            selection = { x: point.x, y: point.y, width: 1, height: 1 };
+            redrawEditor();
+            return;
+        }
+        if (tool === "fill") {
+            fillAt(point);
+            drawing = false;
+            setDirty(true);
+            redrawEditor();
+            return;
+        }
+        paintAt(point);
+        setDirty(true);
+        redrawEditor();
+    });
+    canvas.addEventListener("pointermove", (event) => {
+        if (event.pointerType === "touch" && activeTouchPointers.has(event.pointerId)) {
+            activeTouchPointers.set(event.pointerId, {
+                x: event.clientX,
+                y: event.clientY
+            });
+            const distance = touchPointerDistance();
+            if (distance !== undefined && pinchStartDistance !== undefined) {
+                event.preventDefault();
+                drawing = false;
+                setZoom(pinchStartZoom * (distance / Math.max(1, pinchStartDistance)), touchPointerCenter());
+                return;
+            }
+        }
+        if (!drawing)
+            return;
+        const point = canvasPoint(event);
+        if (tool === "select" && selectionStart) {
+            const x = Math.min(selectionStart.x, point.x);
+            const y = Math.min(selectionStart.y, point.y);
+            selection = {
+                x,
+                y,
+                width: Math.max(1, Math.abs(point.x - selectionStart.x) + 1),
+                height: Math.max(1, Math.abs(point.y - selectionStart.y) + 1)
+            };
+            redrawEditor();
+            return;
+        }
+        if (tool === "brush" || tool === "eraser") {
+            paintAt(point);
+            setDirty(true);
+            redrawEditor();
+        }
+    });
+    const finishPointer = (event) => {
+        if (event.pointerType === "touch") {
+            activeTouchPointers.delete(event.pointerId);
+            if (activeTouchPointers.size < 2) {
+                pinchStartDistance = undefined;
+            }
+            else {
+                pinchStartDistance = touchPointerDistance();
+                pinchStartZoom = zoom;
+            }
+        }
+        drawing = false;
+        selectionStart = undefined;
+        if (canvas.hasPointerCapture(event.pointerId)) {
+            canvas.releasePointerCapture(event.pointerId);
+        }
+        redrawEditor();
+    };
+    canvas.addEventListener("pointerup", finishPointer);
+    canvas.addEventListener("pointercancel", finishPointer);
+    canvasWrap.addEventListener("wheel", (event) => {
+        if (!event.ctrlKey && !event.metaKey)
+            return;
+        event.preventDefault();
+        const direction = event.deltaY > 0 ? -1 : 1;
+        setZoom(zoom * (direction > 0 ? 1.12 : 1 / 1.12), {
+            clientX: event.clientX,
+            clientY: event.clientY
+        });
+    }, { passive: false });
+    closeButton.addEventListener("click", requestClose);
+    zoomOutButton.addEventListener("click", () => {
+        setZoom(zoom - 1);
+    });
+    zoomInButton.addEventListener("click", () => {
+        setZoom(zoom + 1);
+    });
+    brushButton.addEventListener("click", () => {
+        tool = "brush";
+        updateToolButtons();
+    });
+    brushMenuButton.addEventListener("click", () => {
+        brushMenu.hidden = !brushMenu.hidden;
+    });
+    brushSizeInput.addEventListener("input", () => {
+        brushSizeValue.textContent = brushSizeInput.value;
+    });
+    document.addEventListener("pointerdown", closeBrushMenuOnOutsidePointer);
+    eraserButton.addEventListener("click", () => {
+        tool = "eraser";
+        updateToolButtons();
+    });
+    pickerButton.addEventListener("click", () => {
+        tool = "picker";
+        updateToolButtons();
+    });
+    selectButton.addEventListener("click", () => {
+        tool = "select";
+        updateToolButtons();
+    });
+    fillButton.addEventListener("click", () => {
+        tool = "fill";
+        updateToolButtons();
+    });
+    undoButton.addEventListener("click", () => {
+        const previous = undoStack.pop();
+        if (!previous)
+            return;
+        redoStack.push(snapshot());
+        restore(previous);
+        updateUndoRedo();
+    });
+    redoButton.addEventListener("click", () => {
+        const next = redoStack.pop();
+        if (!next)
+            return;
+        undoStack.push(snapshot());
+        restore(next);
+        updateUndoRedo();
+    });
+    saveButton.addEventListener("click", async () => {
+        await options.onSave(canvas.toDataURL("image/png"));
+        setDirty(false);
+        close();
+    });
+    window.addEventListener("keydown", keyHandler);
+    updateZoom();
+    updateToolButtons();
+    updateUndoRedo();
+    refreshPreviews();
+    drawAnimationFrame();
+}
+export function touchUpButton(label) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = label;
+    return button;
+}
+export function hexByte(value) {
+    return Math.max(0, Math.min(255, value)).toString(16).padStart(2, "0");
+}
+export function loadImageElement(src) {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.onload = () => resolve(image);
+        image.onerror = () => reject(new Error("Could not load image."));
+        image.src = src;
+    });
+}
+export function audioDurationFromDataUrl(src) {
+    return new Promise((resolve) => {
+        const audio = document.createElement("audio");
+        audio.preload = "metadata";
+        audio.addEventListener("loadedmetadata", () => {
+            resolve(Number.isFinite(audio.duration) ? audio.duration : undefined);
+        }, { once: true });
+        audio.addEventListener("error", () => resolve(undefined), { once: true });
+        audio.src = src;
+    });
+}
+export function audioFormatFromMimeType(mimeType, fileName) {
+    if (mimeType.includes("wav") || /\.wav$/i.test(fileName))
+        return "wav";
+    if (mimeType.includes("ogg") || /\.ogg$/i.test(fileName))
+        return "ogg";
+    if (mimeType.includes("opus") || /\.opus$/i.test(fileName))
+        return "opus";
+    if (mimeType.includes("pcm") || /\.pcm$/i.test(fileName))
+        return "pcm";
+    return "mp3";
+}
+export function normalizeAssetFormatFromMimeType(mimeType, fileName) {
+    if (mimeType.includes("svg") || /\.svg$/i.test(fileName))
+        return "svg";
+    if (mimeType.includes("webp") || /\.webp$/i.test(fileName))
+        return "webp";
+    if (mimeType.includes("jpeg") || /\.jpe?g$/i.test(fileName))
+        return "jpg";
+    return "png";
+}
+export function renderAudioPlayer(options) {
+    resetAudioPlayerContainer(options.container);
+    if (!options.src) {
+        options.container.hidden = true;
+        return;
+    }
+    options.container.hidden = false;
+    const root = document.createElement("div");
+    root.className = "ai-game-assets-designer__audio-player";
+    root.addEventListener("click", (event) => event.stopPropagation());
+    root.addEventListener("keydown", (event) => event.stopPropagation());
+    const audio = document.createElement("audio");
+    audio.src = options.src;
+    audio.preload = "metadata";
+    const playButton = document.createElement("button");
+    playButton.type = "button";
+    playButton.className = "ai-game-assets-designer__audio-play";
+    playButton.setAttribute("aria-label", `Play ${options.label}`);
+    playButton.textContent = "Play";
+    const timeLabel = document.createElement("span");
+    timeLabel.className = "ai-game-assets-designer__audio-time";
+    timeLabel.textContent = "0:00 / 0:00";
+    const trimLabel = document.createElement("span");
+    trimLabel.className = "ai-game-assets-designer__audio-trim";
+    trimLabel.hidden = true;
+    const canvas = document.createElement("canvas");
+    canvas.className = "ai-game-assets-designer__audio-waveform";
+    canvas.width = 420;
+    canvas.height = 72;
+    canvas.setAttribute("aria-label", `${options.label} waveform`);
+    canvas.setAttribute("role", "img");
+    const controls = document.createElement("div");
+    controls.className = "ai-game-assets-designer__audio-controls";
+    controls.append(playButton, timeLabel);
+    root.append(controls, canvas, trimLabel, audio);
+    options.container.append(root);
+    const state = {
+        peaks: undefined,
+        frame: undefined,
+        disposed: false,
+        duration: 0,
+        trimStart: 0,
+        trimEnd: 0
+    };
+    const draw = () => {
+        drawAudioEditorWaveform(canvas, {
+            peaks: state.peaks,
+            duration: state.duration,
+            progress: state.duration > 0 ? audio.currentTime / state.duration : 0,
+            trimStart: state.duration > 0 ? state.trimStart / state.duration : 0,
+            trimEnd: state.duration > 0 ? state.trimEnd / state.duration : 1
+        });
+    };
+    const sync = () => {
+        playButton.textContent = audio.paused ? "Play" : "Pause";
+        playButton.setAttribute("aria-label", `${audio.paused ? "Play" : "Pause"} ${options.label}`);
+        timeLabel.textContent = `${formatAudioTime(audio.currentTime)} / ${formatAudioTime(state.trimEnd || state.duration)}`;
+        draw();
+    };
+    const tick = () => {
+        if (state.disposed)
+            return;
+        if (!audio.paused && state.trimEnd > 0 && audio.currentTime >= state.trimEnd) {
+            audio.currentTime = state.trimStart;
+            if (!options.playback?.loop) {
+                audio.pause();
+            }
+        }
+        sync();
+        if (!audio.paused) {
+            state.frame = window.requestAnimationFrame(tick);
+        }
+    };
+    playButton.addEventListener("click", async () => {
+        if (audio.paused) {
+            pauseSiblingAudioPlayers(options.container);
+            audio.volume = clamp(options.playback?.volume ?? 1, 0, 1);
+            audio.playbackRate = clamp(options.playback?.playbackRate ?? 1, 0.5, 2);
+            if (state.trimEnd > 0 &&
+                (audio.currentTime < state.trimStart || audio.currentTime >= state.trimEnd)) {
+                audio.currentTime = state.trimStart;
+            }
+            try {
+                await audio.play();
+            }
+            catch {
+                // Browsers can reject playback when user activation is unavailable.
+            }
+        }
+        else {
+            audio.pause();
+        }
+        tick();
+    });
+    canvas.addEventListener("click", (event) => {
+        if (state.duration <= 0)
+            return;
+        const rect = canvas.getBoundingClientRect();
+        const progress = clamp((event.clientX - rect.left) / rect.width, 0, 1);
+        audio.currentTime = seekableAudioTime(state, progress);
+        sync();
+    });
+    audio.addEventListener("loadedmetadata", () => {
+        state.duration = Number.isFinite(audio.duration) ? audio.duration : 0;
+        state.trimStart = clamp(options.playback?.trimStartSeconds ?? 0, 0, state.duration);
+        state.trimEnd = clamp(options.playback?.trimEndSeconds ?? state.duration, state.trimStart, state.duration);
+        trimLabel.hidden = state.trimStart === 0 && state.trimEnd === state.duration;
+        trimLabel.textContent = `Trim ${formatAudioTime(state.trimStart)} – ${formatAudioTime(state.trimEnd)}`;
+        audio.currentTime = state.trimStart;
+        sync();
+    });
+    audio.addEventListener("timeupdate", sync);
+    audio.addEventListener("ended", sync);
+    draw();
+    void audioWaveformPeaks(options.src).then((peaks) => {
+        if (state.disposed)
+            return;
+        state.peaks = peaks;
+        draw();
+    });
+    audio.addEventListener("emptied", () => {
+        state.disposed = true;
+        if (state.frame !== undefined) {
+            window.cancelAnimationFrame(state.frame);
+        }
+    });
+}
+export function seekableAudioTime(state, progress) {
+    const start = clamp(state.trimStart, 0, state.duration);
+    const end = clamp(state.trimEnd || state.duration, start, state.duration);
+    return start + ((end - start) * clamp(progress, 0, 1));
+}
+export function resetAudioPlayerContainer(container) {
+    for (const audio of container.querySelectorAll("audio")) {
+        audio.pause();
+        audio.removeAttribute("src");
+        audio.load();
+    }
+    container.innerHTML = "";
+}
+export function pauseSiblingAudioPlayers(container) {
+    const root = container.closest(".ai-game-assets-designer");
+    for (const audio of root?.querySelectorAll("audio") ?? []) {
+        audio.pause();
+    }
+}
+let sharedAudioContext;
+export async function audioWaveformPeaks(src, bucketCount = 96) {
+    const response = await fetch(src);
+    const bytes = await response.arrayBuffer();
+    const context = sharedAudioContext ??= new AudioContext();
+    const buffer = await context.decodeAudioData(bytes.slice(0));
+    const channel = buffer.getChannelData(0);
+    const bucketSize = Math.max(1, Math.floor(channel.length / bucketCount));
+    const peaks = [];
+    for (let bucket = 0; bucket < bucketCount; bucket += 1) {
+        const start = bucket * bucketSize;
+        const end = Math.min(channel.length, start + bucketSize);
+        let min = 0;
+        let max = 0;
+        for (let index = start; index < end; index += 1) {
+            const sample = channel[index] ?? 0;
+            min = Math.min(min, sample);
+            max = Math.max(max, sample);
+        }
+        peaks.push({ min, max });
+    }
+    return peaks;
+}
+export function drawAudioWaveform(canvas, peaks, progress) {
+    const context = canvas.getContext("2d");
+    if (!context)
+        return;
+    const width = canvas.width;
+    const height = canvas.height;
+    const centerY = height / 2;
+    context.clearRect(0, 0, width, height);
+    context.fillStyle = "#111827";
+    context.fillRect(0, 0, width, height);
+    context.strokeStyle = "rgba(148, 163, 184, 0.26)";
+    context.beginPath();
+    context.moveTo(0, centerY);
+    context.lineTo(width, centerY);
+    context.stroke();
+    const resolvedPeaks = peaks ?? Array.from({ length: 48 }, () => ({ min: -0.06, max: 0.06 }));
+    const barWidth = width / resolvedPeaks.length;
+    const playheadX = clamp(progress, 0, 1) * width;
+    for (const [index, peak] of resolvedPeaks.entries()) {
+        const x = index * barWidth;
+        const minY = centerY + (peak.min * centerY * 0.92);
+        const maxY = centerY + (peak.max * centerY * 0.92);
+        context.fillStyle = x <= playheadX ? "#7dd3fc" : "#64748b";
+        context.fillRect(x + 1, Math.min(minY, maxY), Math.max(1, barWidth - 2), Math.max(2, Math.abs(maxY - minY)));
+    }
+    context.fillStyle = "#ffffff";
+    context.fillRect(playheadX, 6, 2, height - 12);
+}
+export function drawAudioEditorWaveform(canvas, options) {
+    drawAudioWaveform(canvas, options.peaks, options.progress);
+    const context = canvas.getContext("2d");
+    if (!context)
+        return;
+    const width = canvas.width;
+    const height = canvas.height;
+    const startX = clamp(options.trimStart, 0, 1) * width;
+    const endX = clamp(options.trimEnd, 0, 1) * width;
+    context.fillStyle = "rgba(2, 6, 23, 0.68)";
+    context.fillRect(0, 0, startX, height);
+    context.fillRect(endX, 0, width - endX, height);
+    context.strokeStyle = "#fbbf24";
+    context.lineWidth = 3;
+    context.beginPath();
+    context.moveTo(startX, 0);
+    context.lineTo(startX, height);
+    context.moveTo(endX, 0);
+    context.lineTo(endX, height);
+    context.stroke();
+    context.fillStyle = "#fbbf24";
+    context.fillRect(startX - 5, 0, 10, 18);
+    context.fillRect(endX - 5, 0, 10, 18);
+}
+export function progressForAudio(audio) {
+    if (!Number.isFinite(audio.duration) || audio.duration <= 0) {
+        return 0;
+    }
+    return audio.currentTime / audio.duration;
+}
+export function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+export function formatAudioTime(value) {
+    if (!Number.isFinite(value) || value < 0) {
+        return "0:00";
+    }
+    const minutes = Math.floor(value / 60);
+    const seconds = Math.floor(value % 60);
+    return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+export function startSpritesheetPreview(options) {
+    const frameGrid = options.asset.frameGrid;
+    if (!frameGrid) {
+        return () => undefined;
+    }
+    const frames = options.asset.animations?.[0]?.frames ??
+        Array.from({ length: frameGrid.frameCount ?? frameGrid.columns * frameGrid.rows }, (_, index) => index);
+    const frameRate = options.asset.animations?.[0]?.frameRate ?? 8;
+    const frameTimings = options.asset.animations?.[0]?.frameTimings ?? [];
+    let frameCursor = 0;
+    let timeout;
+    const frameElement = ensureFramePreviewElement(options.element);
+    const renderFrame = () => {
+        const frame = frames[frameCursor % frames.length] ?? 0;
+        const timing = frameTimings[frameCursor % frames.length];
+        const applyFrameTransforms = options.applyFrameTransforms ?? true;
+        const offsetX = applyFrameTransforms ? timing?.offsetX ?? 0 : 0;
+        const offsetY = applyFrameTransforms ? timing?.offsetY ?? 0 : 0;
+        const scaleX = applyFrameTransforms ? timing?.scaleX ?? 1 : 1;
+        const scaleY = applyFrameTransforms ? timing?.scaleY ?? 1 : 1;
+        const rotation = applyFrameTransforms ? timing?.rotation ?? 0 : 0;
+        options.element.style.width = `${options.displaySize.width}px`;
+        options.element.style.height = `${options.displaySize.height}px`;
+        setFrameElementBackground(frameElement, {
+            src: options.src,
+            frame,
+            frameGrid,
+            displaySize: options.displaySize
+        });
+        frameElement.style.transform =
+            `translate(${offsetX}px, ${offsetY}px) ` +
+                `scale(${scaleX}, ${scaleY}) rotate(${rotation}deg)`;
+        frameElement.style.transformOrigin = "center";
+        frameCursor += 1;
+        timeout = window.setTimeout(renderFrame, timing?.delayMs ?? 1000 / frameRate);
+    };
+    renderFrame();
+    return () => {
+        if (timeout !== undefined) {
+            window.clearTimeout(timeout);
+        }
+        options.element.removeAttribute("style");
+        frameElement.remove();
+    };
+}
+export async function openStyleGuideEditor(options) {
+    const dialog = document.createElement("div");
+    dialog.className = "ai-game-assets-designer__modal";
+    dialog.setAttribute("role", "dialog");
+    dialog.setAttribute("aria-modal", "true");
+    dialog.setAttribute("aria-label", "Define style guide");
+    const card = document.createElement("div");
+    card.className = "ai-game-assets-designer__modal-card";
+    const title = document.createElement("div");
+    title.className = "ai-game-assets-designer__modal-title";
+    title.textContent = "Style guide";
+    const promptInput = document.createElement("textarea");
+    promptInput.rows = 5;
+    promptInput.value = options.initial.prompt;
+    const promptField = labelWrap("Style prompt", promptInput);
+    const fileInput = document.createElement("input");
+    fileInput.type = "file";
+    fileInput.accept = "image/png,image/jpeg,image/webp";
+    fileInput.multiple = true;
+    fileInput.hidden = true;
+    const uploadButton = document.createElement("button");
+    uploadButton.type = "button";
+    uploadButton.textContent = "Upload images";
+    const dropZone = document.createElement("div");
+    dropZone.className = "ai-game-assets-designer__style-drop";
+    dropZone.tabIndex = 0;
+    dropZone.textContent = "Drop style reference images here";
+    const imageList = document.createElement("div");
+    imageList.className = "ai-game-assets-designer__style-images";
+    let images = options.initial.images.map((image) => ({ ...image }));
+    const renderImages = () => {
+        imageList.innerHTML = "";
+        for (const [index, image] of images.entries()) {
+            const item = document.createElement("div");
+            item.className = "ai-game-assets-designer__style-image";
+            const preview = document.createElement("img");
+            preview.src = image.src;
+            preview.alt = image.name;
+            const name = document.createElement("span");
+            name.textContent = image.name;
+            const remove = document.createElement("button");
+            remove.type = "button";
+            remove.setAttribute("aria-label", `Remove ${image.name}`);
+            remove.textContent = "Remove";
+            remove.addEventListener("click", () => {
+                images = images.filter((_, candidateIndex) => candidateIndex !== index);
+                renderImages();
+            });
+            item.append(preview, name, remove);
+            imageList.append(item);
+        }
+    };
+    const addFiles = async (files) => {
+        const loaded = await Promise.all(Array.from(files)
+            .filter((file) => file.type.startsWith("image/"))
+            .map(async (file) => ({
+            name: file.name,
+            src: await fileToDataUrl(file)
+        })));
+        images.push(...loaded);
+        renderImages();
+    };
+    uploadButton.addEventListener("click", () => fileInput.click());
+    fileInput.addEventListener("change", () => {
+        if (fileInput.files)
+            void addFiles(fileInput.files);
+        fileInput.value = "";
+    });
+    dropZone.addEventListener("dragover", (event) => {
+        event.preventDefault();
+        dropZone.classList.add("is-dragging");
+    });
+    dropZone.addEventListener("dragleave", () => dropZone.classList.remove("is-dragging"));
+    dropZone.addEventListener("drop", (event) => {
+        event.preventDefault();
+        dropZone.classList.remove("is-dragging");
+        if (event.dataTransfer?.files) {
+            void addFiles(event.dataTransfer.files);
+        }
+    });
+    const cancelButton = document.createElement("button");
+    cancelButton.type = "button";
+    cancelButton.textContent = "Cancel";
+    const confirmButton = document.createElement("button");
+    confirmButton.type = "button";
+    confirmButton.textContent = "Confirm";
+    const promoteButton = document.createElement("button");
+    promoteButton.type = "button";
+    promoteButton.textContent = "Promote style";
+    const actions = document.createElement("div");
+    actions.className = "ai-game-assets-designer__modal-actions";
+    actions.append(cancelButton, promoteButton, confirmButton);
+    const draft = () => ({
+        prompt: promptInput.value.trim(),
+        images: images.map((image) => ({ ...image }))
+    });
+    const close = () => dialog.remove();
+    cancelButton.addEventListener("click", close);
+    confirmButton.addEventListener("click", () => {
+        options.onConfirm(draft());
+        close();
+    });
+    promoteButton.addEventListener("click", async () => {
+        promoteButton.disabled = true;
+        try {
+            const current = draft();
+            options.onConfirm(current);
+            await options.onPromote(current);
+            close();
+        }
+        catch {
+            // The caller reports promotion errors in the designer status area.
+        }
+        finally {
+            promoteButton.disabled = false;
+        }
+    });
+    card.append(title, promptField, dropZone, uploadButton, fileInput, imageList, actions);
+    dialog.append(card);
+    options.root.append(dialog);
+    renderImages();
+    promptInput.focus();
+}
+export async function openAudioEditor(options) {
+    const dialog = document.createElement("div");
+    dialog.className = "ai-game-assets-designer__modal";
+    dialog.setAttribute("role", "dialog");
+    dialog.setAttribute("aria-modal", "true");
+    dialog.setAttribute("aria-label", `Edit ${readableAssetName(options.assetId)} sound`);
+    const card = document.createElement("div");
+    card.className = "ai-game-assets-designer__modal-card";
+    const title = document.createElement("div");
+    title.className = "ai-game-assets-designer__modal-title";
+    title.textContent = `Edit ${readableAssetName(options.assetId)}`;
+    const audio = document.createElement("audio");
+    audio.src = options.src;
+    audio.preload = "auto";
+    const stage = document.createElement("div");
+    stage.className = "ai-game-assets-designer__audio-editor-stage";
+    const canvas = document.createElement("canvas");
+    canvas.className = "ai-game-assets-designer__audio-editor-waveform";
+    canvas.width = 720;
+    canvas.height = 160;
+    stage.append(canvas);
+    const playButton = document.createElement("button");
+    playButton.type = "button";
+    playButton.className = "ai-game-assets-designer__audio-editor-play";
+    playButton.setAttribute("aria-label", "Play");
+    playButton.textContent = "▶";
+    const loopInput = document.createElement("input");
+    loopInput.type = "checkbox";
+    const timeLabel = document.createElement("span");
+    timeLabel.className = "ai-game-assets-designer__audio-editor-time";
+    timeLabel.textContent = "0:00 / 0:00";
+    const loopField = inlineCheckboxField("Loop", loopInput);
+    const transport = document.createElement("div");
+    transport.className = "ai-game-assets-designer__audio-editor-transport";
+    transport.append(playButton, loopField, timeLabel);
+    const seekInput = rangeInput(0, 1, 0.001);
+    seekInput.className = "ai-game-assets-designer__audio-editor-scrubber";
+    stage.append(seekInput);
+    const volumeInput = rangeInput(0, 1.5, 0.01);
+    const speedInput = rangeInput(0.5, 2, 0.01);
+    const fields = document.createElement("div");
+    fields.className = "ai-game-assets-designer__audio-editor-fields";
+    fields.append(labelWrap("Volume", volumeInput), labelWrap("Speed", speedInput));
+    const hint = document.createElement("div");
+    hint.className = "ai-game-assets-designer__audio-editor-hint";
+    hint.textContent = "Drag the start and end markers on the waveform to trim the playable region.";
+    const cancelButton = document.createElement("button");
+    cancelButton.type = "button";
+    cancelButton.textContent = "Cancel";
+    const confirmButton = document.createElement("button");
+    confirmButton.type = "button";
+    confirmButton.textContent = "Confirm";
+    const actions = document.createElement("div");
+    actions.className = "ai-game-assets-designer__modal-actions";
+    actions.append(cancelButton, confirmButton);
+    card.append(title, stage, transport, fields, hint, actions, audio);
+    dialog.append(card);
+    options.root.append(dialog);
+    const initial = options.initialPlayback ?? {};
+    const hasInitialTrimStart = initial.trimStartSeconds !== undefined;
+    const hasInitialTrimEnd = initial.trimEndSeconds !== undefined;
+    let duration = Math.max(0, options.asset.audioSettings?.durationSeconds ?? 0);
+    let trimStart = hasInitialTrimStart ? Math.max(0, initial.trimStartSeconds ?? 0) : 0;
+    let trimEnd = hasInitialTrimEnd ? Math.max(trimStart, initial.trimEndSeconds ?? duration) : duration;
+    let peaks;
+    let dragTarget;
+    let animationFrame;
+    volumeInput.value = String(clamp(initial.volume ?? 1, 0, 1.5));
+    speedInput.value = String(clamp(initial.playbackRate ?? 1, 0.5, 2));
+    loopInput.checked = Boolean(initial.loop);
+    const playback = () => ({
+        volume: numberInput(volumeInput, 1),
+        trimStartSeconds: trimStart,
+        trimEndSeconds: trimEnd,
+        playbackRate: numberInput(speedInput, 1),
+        loop: loopInput.checked || undefined
+    });
+    const syncAudioSettings = () => {
+        audio.volume = clamp(numberInput(volumeInput, 1), 0, 1);
+        audio.playbackRate = clamp(numberInput(speedInput, 1), 0.5, 2);
+    };
+    const seekTo = (value) => {
+        audio.currentTime = clamp(value, trimStart, trimEnd || duration);
+    };
+    const draw = () => {
+        drawAudioEditorWaveform(canvas, {
+            peaks,
+            duration,
+            progress: duration > 0 ? audio.currentTime / duration : 0,
+            trimStart: duration > 0 ? trimStart / duration : 0,
+            trimEnd: duration > 0 ? trimEnd / duration : 1
+        });
+        timeLabel.textContent = `${formatAudioTime(audio.currentTime)} / ${formatAudioTime(duration)}`;
+        seekInput.value = String(trimEnd > trimStart ? (audio.currentTime - trimStart) / (trimEnd - trimStart) : 0);
+        playButton.textContent = audio.paused ? "▶" : "❚❚";
+        playButton.setAttribute("aria-label", audio.paused ? "Play" : "Pause");
+    };
+    const tick = () => {
+        if (!audio.paused && audio.currentTime >= trimEnd) {
+            audio.currentTime = trimStart;
+            if (!loopInput.checked) {
+                audio.pause();
+            }
+        }
+        draw();
+        animationFrame = window.requestAnimationFrame(tick);
+    };
+    const stopTick = () => {
+        if (animationFrame !== undefined) {
+            window.cancelAnimationFrame(animationFrame);
+            animationFrame = undefined;
+        }
+    };
+    audio.addEventListener("loadedmetadata", () => {
+        duration = Number.isFinite(audio.duration) ? audio.duration : duration;
+        trimStart = hasInitialTrimStart ? clamp(trimStart, 0, duration) : 0;
+        trimEnd = hasInitialTrimEnd ? clamp(trimEnd, trimStart, duration) : duration;
+        seekInput.max = "1";
+        seekTo(trimStart);
+        draw();
+    });
+    audio.addEventListener("timeupdate", draw);
+    for (const input of [volumeInput, speedInput]) {
+        input.addEventListener("input", syncAudioSettings);
+    }
+    seekInput.addEventListener("input", () => {
+        if (duration <= 0)
+            return;
+        seekTo(seekableAudioTime({ duration, trimStart, trimEnd }, Number(seekInput.value)));
+        draw();
+    });
+    seekInput.addEventListener("change", () => {
+        if (duration <= 0)
+            return;
+        seekTo(seekableAudioTime({ duration, trimStart, trimEnd }, Number(seekInput.value)));
+        draw();
+    });
+    playButton.addEventListener("click", async () => {
+        syncAudioSettings();
+        if (audio.paused) {
+            if (audio.currentTime < trimStart || audio.currentTime >= trimEnd || audio.currentTime === 0) {
+                audio.currentTime = trimStart;
+            }
+            try {
+                await audio.play();
+            }
+            catch {
+                // Browser autoplay policy can reject playback if the click activation is lost.
+            }
+            tick();
+        }
+        else {
+            audio.pause();
+            draw();
+        }
+    });
+    cancelButton.addEventListener("click", () => {
+        audio.pause();
+        stopTick();
+        dialog.remove();
+    });
+    confirmButton.addEventListener("click", async () => {
+        audio.pause();
+        stopTick();
+        await options.onConfirm(playback());
+        dialog.remove();
+    });
+    const positionToSeconds = (clientX) => {
+        const rect = canvas.getBoundingClientRect();
+        return clamp(((clientX - rect.left) / rect.width) * duration, 0, duration);
+    };
+    canvas.addEventListener("pointerdown", (event) => {
+        if (duration <= 0)
+            return;
+        const seconds = positionToSeconds(event.clientX);
+        const startDistance = Math.abs(seconds - trimStart);
+        const endDistance = Math.abs(seconds - trimEnd);
+        dragTarget = startDistance < 0.12 || startDistance < endDistance ? "start" : "end";
+        canvas.setPointerCapture(event.pointerId);
+    });
+    canvas.addEventListener("pointermove", (event) => {
+        if (!dragTarget || duration <= 0)
+            return;
+        const seconds = positionToSeconds(event.clientX);
+        if (dragTarget === "start") {
+            trimStart = clamp(seconds, 0, Math.max(0, trimEnd - 0.03));
+            if (audio.currentTime < trimStart || audio.currentTime === 0)
+                audio.currentTime = trimStart;
+        }
+        else {
+            trimEnd = clamp(seconds, Math.min(duration, trimStart + 0.03), duration);
+            if (audio.currentTime > trimEnd)
+                audio.currentTime = trimEnd;
+        }
+        draw();
+    });
+    canvas.addEventListener("pointerup", (event) => {
+        dragTarget = undefined;
+        canvas.releasePointerCapture(event.pointerId);
+    });
+    syncAudioSettings();
+    draw();
+    void audioWaveformPeaks(options.src, 160).then((decodedPeaks) => {
+        peaks = decodedPeaks;
+        draw();
+    });
+}
+export async function openAnimationEditor(options) {
+    const frameGrid = options.asset.frameGrid;
+    const baseAnimation = options.initialAnimations?.[0] ?? options.asset.animations?.[0];
+    if (!frameGrid || !baseAnimation)
+        return;
+    const dialog = document.createElement("div");
+    dialog.className = "ai-game-assets-designer__modal";
+    dialog.setAttribute("role", "dialog");
+    dialog.setAttribute("aria-modal", "true");
+    dialog.setAttribute("aria-label", `Edit ${readableAssetName(options.assetId)} animation`);
+    const card = document.createElement("div");
+    card.className = "ai-game-assets-designer__modal-card";
+    const title = document.createElement("div");
+    title.className = "ai-game-assets-designer__modal-title";
+    title.textContent = `Edit ${readableAssetName(options.assetId)}`;
+    const stage = document.createElement("div");
+    stage.className = "ai-game-assets-designer__modal-stage";
+    const strip = document.createElement("div");
+    strip.className = "ai-game-assets-designer__frame-strip";
+    const delayInput = numericInput();
+    delayInput.min = "1";
+    const offsetXInput = signedNumberInput();
+    const offsetYInput = signedNumberInput();
+    const scaleXInput = decimalInput();
+    const scaleYInput = decimalInput();
+    const rotationInput = signedNumberInput();
+    const tagInput = document.createElement("input");
+    tagInput.type = "text";
+    tagInput.placeholder = "shoot";
+    const fields = document.createElement("div");
+    fields.className = "ai-game-assets-designer__frame-fields";
+    fields.append(labelWrap("Delay ms", delayInput), labelWrap("Offset X", offsetXInput), labelWrap("Offset Y", offsetYInput), labelWrap("Scale X", scaleXInput), labelWrap("Scale Y", scaleYInput), labelWrap("Rotation", rotationInput), labelWrap("Tag", tagInput));
+    const cancelButton = document.createElement("button");
+    cancelButton.type = "button";
+    cancelButton.textContent = "Cancel";
+    const uploadFrameButton = document.createElement("button");
+    uploadFrameButton.type = "button";
+    uploadFrameButton.textContent = "Upload frame...";
+    const touchUpFrameButton = document.createElement("button");
+    touchUpFrameButton.type = "button";
+    touchUpFrameButton.textContent = "Touch up...";
+    const confirmButton = document.createElement("button");
+    confirmButton.type = "button";
+    confirmButton.textContent = "Confirm";
+    const actions = document.createElement("div");
+    actions.className = "ai-game-assets-designer__modal-actions";
+    actions.append(uploadFrameButton, touchUpFrameButton, cancelButton, confirmButton);
+    card.append(title, stage, strip, fields, actions);
+    dialog.append(card);
+    options.root.append(dialog);
+    let anchorFrameSlot = 0;
+    const selectedFrameSlots = new Set([0]);
+    let stopPreview;
+    let spriteSheetSrc = options.src;
+    let editedSpriteSheetSrc;
+    const frameTimings = baseAnimation.frames.map((_, index) => ({
+        ...baseAnimation.frameTimings?.[index]
+    }));
+    const animationFromTimings = () => ({
+        ...baseAnimation,
+        frameTimings: frameTimings.map((timing) => ({
+            delayMs: positiveIntegerValue(timing.delayMs, Math.round(1000 / baseAnimation.frameRate)),
+            offsetX: integerValue(timing.offsetX, 0),
+            offsetY: integerValue(timing.offsetY, 0),
+            scaleX: numberValue(timing.scaleX, 1),
+            scaleY: numberValue(timing.scaleY, 1),
+            rotation: numberValue(timing.rotation, 0),
+            tag: timing.tag?.trim() || undefined
+        }))
+    });
+    const previewAsset = () => ({
+        ...options.asset,
+        animations: [animationFromTimings()]
+    });
+    const restartPreview = () => {
+        stopPreview?.();
+        stopPreview = startSpritesheetPreview({
+            element: stage,
+            src: spriteSheetSrc,
+            asset: previewAsset(),
+            displaySize: options.displaySize
+        });
+    };
+    const syncInputs = () => {
+        const selectedTimings = selectedFrameSlotsArray().map((frameSlot) => frameTimings[frameSlot] ?? {});
+        setInputForSelected(delayInput, selectedTimings, (timing) => positiveIntegerValue(timing.delayMs, Math.round(1000 / baseAnimation.frameRate)));
+        setInputForSelected(offsetXInput, selectedTimings, (timing) => integerValue(timing.offsetX, 0));
+        setInputForSelected(offsetYInput, selectedTimings, (timing) => integerValue(timing.offsetY, 0));
+        setInputForSelected(scaleXInput, selectedTimings, (timing) => numberValue(timing.scaleX, 1));
+        setInputForSelected(scaleYInput, selectedTimings, (timing) => numberValue(timing.scaleY, 1));
+        setInputForSelected(rotationInput, selectedTimings, (timing) => numberValue(timing.rotation, 0));
+        setInputForSelected(tagInput, selectedTimings, (timing) => timing.tag ?? "");
+        for (const button of strip.querySelectorAll("button")) {
+            const frameSlot = Number(button.dataset.frameSlot);
+            button.classList.toggle("is-selected", selectedFrameSlots.has(frameSlot));
+        }
+        touchUpFrameButton.disabled = selectedFrameSlots.size !== 1 ||
+            normalizeAssetFormat(options.asset.settings?.format) === "svg" ||
+            isSvgSource(spriteSheetSrc);
+    };
+    const selectedFrameSlotsArray = () => [...selectedFrameSlots].sort((left, right) => left - right);
+    const selectFrame = (index, event) => {
+        if (event.shiftKey) {
+            const start = Math.min(anchorFrameSlot, index);
+            const end = Math.max(anchorFrameSlot, index);
+            selectedFrameSlots.clear();
+            for (let frameSlot = start; frameSlot <= end; frameSlot += 1) {
+                selectedFrameSlots.add(frameSlot);
+            }
+        }
+        else if (event.metaKey || event.ctrlKey) {
+            if (selectedFrameSlots.has(index)) {
+                selectedFrameSlots.delete(index);
+            }
+            else {
+                selectedFrameSlots.add(index);
+            }
+            anchorFrameSlot = index;
+        }
+        else {
+            selectedFrameSlots.clear();
+            selectedFrameSlots.add(index);
+            anchorFrameSlot = index;
+        }
+        syncInputs();
+    };
+    const updateSelectedFrameThumbs = () => {
+        for (const frameSlot of selectedFrameSlots) {
+            const selectedButton = strip.querySelector(`button[data-frame-slot="${frameSlot}"]`);
+            if (selectedButton) {
+                setFrameBackground(selectedButton, {
+                    src: spriteSheetSrc,
+                    frame: baseAnimation.frames[frameSlot] ?? 0,
+                    frameGrid,
+                    displaySize: { width: 48, height: 48 },
+                    timing: frameTimings[frameSlot]
+                });
+            }
+        }
+    };
+    const updateSelectedTimings = (applyTiming, options = {}) => {
+        for (const frameSlot of selectedFrameSlots) {
+            frameTimings[frameSlot] = applyTiming(frameTimings[frameSlot] ?? {});
+        }
+        updateSelectedFrameThumbs();
+        if (options.syncInputsAfterUpdate) {
+            syncInputs();
+        }
+        restartPreview();
+    };
+    const updateSelectedDelay = () => {
+        updateSelectedTimings((timing) => ({
+            ...timing,
+            delayMs: positiveIntegerInput(delayInput, Math.round(1000 / baseAnimation.frameRate))
+        }));
+    };
+    const updateSelectedOffsetX = () => {
+        updateSelectedTimings((timing) => ({
+            ...timing,
+            offsetX: integerInput(offsetXInput, 0)
+        }));
+    };
+    const updateSelectedOffsetY = () => {
+        updateSelectedTimings((timing) => ({
+            ...timing,
+            offsetY: integerInput(offsetYInput, 0)
+        }));
+    };
+    const updateSelectedScaleX = () => {
+        updateSelectedTimings((timing) => ({
+            ...timing,
+            scaleX: numberInput(scaleXInput, 1)
+        }));
+    };
+    const updateSelectedScaleY = () => {
+        updateSelectedTimings((timing) => ({
+            ...timing,
+            scaleY: numberInput(scaleYInput, 1)
+        }));
+    };
+    const updateSelectedRotation = () => {
+        updateSelectedTimings((timing) => ({
+            ...timing,
+            rotation: numberInput(rotationInput, 0)
+        }));
+    };
+    const updateSelectedTag = () => {
+        updateSelectedTimings((timing) => ({
+            ...timing,
+            tag: tagInput.value.trim() || undefined
+        }));
+    };
+    const bindFrameInput = (input, update) => {
+        input.addEventListener("input", () => {
+            if (selectedFrameSlots.size === 0)
+                return;
+            update();
+        });
+    };
+    const setInputForSelected = (input, timings, valueForTiming) => {
+        if (timings.length === 0) {
+            input.value = "";
+            return;
+        }
+        const values = timings.map((timing) => String(valueForTiming(timing)));
+        input.value = values.every((value) => value === values[0]) ? values[0] : "";
+    };
+    const renderStrip = () => {
+        strip.innerHTML = "";
+        baseAnimation.frames.forEach((frame, index) => {
+            const button = document.createElement("button");
+            button.type = "button";
+            button.dataset.frameSlot = String(index);
+            button.className = "ai-game-assets-designer__frame-thumb";
+            button.setAttribute("aria-label", `Frame ${index + 1}`);
+            setFrameBackground(button, {
+                src: spriteSheetSrc,
+                frame,
+                frameGrid,
+                displaySize: { width: 48, height: 48 },
+                timing: frameTimings[index]
+            });
+            button.addEventListener("click", (event) => {
+                selectFrame(index, event);
+            });
+            strip.append(button);
+        });
+    };
+    bindFrameInput(delayInput, updateSelectedDelay);
+    bindFrameInput(offsetXInput, updateSelectedOffsetX);
+    bindFrameInput(offsetYInput, updateSelectedOffsetY);
+    bindFrameInput(scaleXInput, updateSelectedScaleX);
+    bindFrameInput(scaleYInput, updateSelectedScaleY);
+    bindFrameInput(rotationInput, updateSelectedRotation);
+    bindFrameInput(tagInput, updateSelectedTag);
+    uploadFrameButton.addEventListener("click", async () => {
+        if (selectedFrameSlots.size === 0)
+            return;
+        const file = await pickUploadFile("image/*");
+        if (!file)
+            return;
+        spriteSheetSrc = await replaceSpriteSheetFrames({
+            src: spriteSheetSrc,
+            uploadSrc: await fileToDataUrl(file),
+            frameGrid,
+            frames: selectedFrameSlotsArray().map((frameSlot) => baseAnimation.frames[frameSlot] ?? 0)
+        });
+        editedSpriteSheetSrc = spriteSheetSrc;
+        renderStrip();
+        syncInputs();
+        restartPreview();
+    });
+    touchUpFrameButton.addEventListener("click", async () => {
+        if (touchUpFrameButton.disabled || selectedFrameSlots.size !== 1)
+            return;
+        const [frameSlot] = selectedFrameSlotsArray();
+        const frame = baseAnimation.frames[frameSlot] ?? 0;
+        const frameSrc = await spriteSheetFrameToDataUrl({
+            src: spriteSheetSrc,
+            frameGrid,
+            frame
+        });
+        await openFrameTouchUpEditor({
+            root: options.root,
+            asset: previewAsset(),
+            title: `${readableAssetName(options.assetId)} frame ${frameSlot + 1}`,
+            frameSrc,
+            spriteSheetSrc,
+            frameSlot,
+            frame,
+            displaySize: options.displaySize,
+            onSave: async (editedFrameSrc) => {
+                spriteSheetSrc = await replaceSpriteSheetFrames({
+                    src: spriteSheetSrc,
+                    uploadSrc: editedFrameSrc,
+                    frameGrid,
+                    frames: [frame]
+                });
+                editedSpriteSheetSrc = spriteSheetSrc;
+                renderStrip();
+                syncInputs();
+                restartPreview();
+            }
+        });
+    });
+    const close = () => {
+        stopPreview?.();
+        dialog.remove();
+    };
+    cancelButton.addEventListener("click", close);
+    confirmButton.addEventListener("click", async () => {
+        await options.onConfirm({
+            animations: [animationFromTimings()],
+            dataUrl: editedSpriteSheetSrc
+        });
+        close();
+    });
+    renderStrip();
+    syncInputs();
+    restartPreview();
+}
+export function setFrameBackground(element, options) {
+    const frameElement = ensureFramePreviewElement(element);
+    const offsetX = options.timing?.offsetX ?? 0;
+    const offsetY = options.timing?.offsetY ?? 0;
+    const scaleX = options.timing?.scaleX ?? 1;
+    const scaleY = options.timing?.scaleY ?? 1;
+    const rotation = options.timing?.rotation ?? 0;
+    element.style.width = `${options.displaySize.width}px`;
+    element.style.height = `${options.displaySize.height}px`;
+    setFrameElementBackground(frameElement, options);
+    frameElement.style.transform =
+        `translate(${offsetX}px, ${offsetY}px) scale(${scaleX}, ${scaleY}) rotate(${rotation}deg)`;
+    frameElement.style.transformOrigin = "center";
+}
+export function setFrameElementBackground(frameElement, options) {
+    const column = options.frame % options.frameGrid.columns;
+    const row = Math.floor(options.frame / options.frameGrid.columns);
+    frameElement.style.backgroundImage = `url("${cssUrl(options.src)}")`;
+    frameElement.style.backgroundSize =
+        `${options.frameGrid.columns * options.displaySize.width}px ${options.frameGrid.rows * options.displaySize.height}px`;
+    frameElement.style.backgroundPosition =
+        `${-(column * options.displaySize.width)}px ${-(row * options.displaySize.height)}px`;
+}
+export function ensureFramePreviewElement(element) {
+    const existing = element.querySelector(":scope > .ai-game-assets-designer__frame-image");
+    if (existing)
+        return existing;
+    const frameElement = document.createElement("span");
+    frameElement.className = "ai-game-assets-designer__frame-image";
+    element.append(frameElement);
+    return frameElement;
+}
+export function generationOverridesFromInputs(elements, asset, format) {
+    const dimensions = {
+        width: positiveIntegerInput(elements.widthInput, asset.frameGrid?.frameWidth ?? asset.dimensions?.width ?? 1),
+        height: positiveIntegerInput(elements.heightInput, asset.frameGrid?.frameHeight ?? asset.dimensions?.height ?? 1)
+    };
+    if (!asset.frameGrid) {
+        return {
+            dimensions,
+            settings: { format }
+        };
+    }
+    return {
+        dimensions,
+        settings: { format },
+        frameCount: positiveIntegerInput(elements.frameCountInput, asset.frameGrid.frameCount ?? asset.frameGrid.columns * asset.frameGrid.rows)
+    };
+}
+export function audioGenerationOverridesFromInputs(elements, asset) {
+    if (!isAudioAsset(asset))
+        return undefined;
+    return {
+        ...asset.audioSettings,
+        format: normalizeAudioFormat(elements.audioFormatSelect.value),
+        durationSeconds: positiveNumberInput(elements.audioDurationInput, asset.audioSettings?.durationSeconds ?? (asset.kind === "music" ? 30 : 2)),
+        loop: elements.audioLoopInput.checked
+    };
+}
+export function voiceGenerationOverridesFromInputs(elements, asset) {
+    if (!isVoiceAsset(asset))
+        return asset.voiceSettings;
+    const text = elements.voiceTextInput.value.trim();
+    if (asset.kind === "voice") {
+        return {
+            ...asset.voiceSettings,
+            previewText: text || asset.voiceSettings?.previewText
+        };
+    }
+    return {
+        ...asset.voiceSettings,
+        text: text || asset.voiceSettings?.text,
+        direction: elements.promptInput.value.trim() || asset.voiceSettings?.direction
+    };
+}
+export function canEditGenerationFormat(manifest, selectedAssetId, targetAssetId) {
+    const selectedAsset = manifest.assets[selectedAssetId];
+    return selectedAsset?.kind === "collection" || selectedAssetId === targetAssetId;
+}
+export function effectiveGenerationFormat(manifest, drafts, selectedAssetId, targetAssetId) {
+    if (canEditGenerationFormat(manifest, selectedAssetId, targetAssetId)) {
+        return drafts.get(targetAssetId) ?? selectedFormatFromDesignerOrAsset(manifest.assets[targetAssetId]);
+    }
+    return drafts.get(selectedAssetId) ?? selectedFormatFromDesignerOrAsset(manifest.assets[selectedAssetId]);
+}
+export function selectedFormatFromDesignerOrAsset(asset) {
+    return normalizeAssetFormat(asset?.settings?.format);
+}
+export function normalizeAssetFormat(format) {
+    if (format === "jpg" || format === "webp" || format === "svg")
+        return format;
+    return "png";
+}
+export function normalizeAudioFormat(format) {
+    if (format === "wav" || format === "ogg" || format === "opus" || format === "pcm") {
+        return format;
+    }
+    return "mp3";
+}
+export function isAudioAsset(asset) {
+    return asset?.kind === "sound" ||
+        asset?.kind === "music" ||
+        asset?.kind === "voice" ||
+        asset?.kind === "voice-line";
+}
+export function isVoiceAsset(asset) {
+    return asset?.kind === "voice" || asset?.kind === "voice-line";
+}
+export function assetWithGeneratedGeometry(asset, option) {
+    return {
+        ...asset,
+        dimensions: option.dimensions ?? asset.dimensions,
+        frameGrid: option.frameGrid ?? asset.frameGrid,
+        animations: option.animations ?? asset.animations,
+        audioPlayback: option.audioPlayback ?? asset.audioPlayback,
+        voiceSettings: option.voiceSettings ?? asset.voiceSettings
+    };
+}
+export function positiveIntegerInput(input, fallback) {
+    const value = Number(input.value);
+    if (!Number.isFinite(value))
+        return fallback;
+    return Math.max(1, Math.floor(value));
+}
+export function positiveNumberInput(input, fallback) {
+    const value = Number(input.value);
+    if (!Number.isFinite(value) || value <= 0)
+        return fallback;
+    return value;
+}
+export function integerInput(input, fallback) {
+    const value = Number(input.value);
+    if (!Number.isFinite(value))
+        return fallback;
+    return Math.trunc(value);
+}
+export function numberInput(input, fallback) {
+    const value = Number(input.value);
+    if (!Number.isFinite(value))
+        return fallback;
+    return value;
+}
+export function rangeInput(min, max, step) {
+    const input = document.createElement("input");
+    input.type = "range";
+    input.min = String(min);
+    input.max = String(max);
+    input.step = String(step);
+    return input;
+}
+export function inlineCheckboxField(label, checkbox) {
+    const wrapper = document.createElement("label");
+    wrapper.className = "ai-game-assets-designer__inline-checkbox";
+    const text = document.createElement("span");
+    text.textContent = label;
+    wrapper.append(checkbox, text);
+    return wrapper;
+}
+export function positiveIntegerValue(value, fallback) {
+    if (!Number.isFinite(value))
+        return fallback;
+    return Math.max(1, Math.floor(value));
+}
+export function integerValue(value, fallback) {
+    if (!Number.isFinite(value))
+        return fallback;
+    return Math.trunc(value);
+}
+export function numberValue(value, fallback) {
+    if (!Number.isFinite(value))
+        return fallback;
+    return value;
+}
+export function resolvePreviewDisplaySize(options, assetId, asset) {
+    const configured = typeof options.previewDisplaySize === "function"
+        ? options.previewDisplaySize(assetId, asset)
+        : options.previewDisplaySize?.[assetId];
+    if (configured) {
+        return configured;
+    }
+    return {
+        width: asset.frameGrid?.frameWidth ?? asset.dimensions?.width ?? 128,
+        height: asset.frameGrid?.frameHeight ?? asset.dimensions?.height ?? 128
+    };
+}
+export function cssUrl(value) {
+    return value.replace(/["\\]/g, "\\$&");
+}
+export function bindKeyboardCapture(root, scene) {
+    const stopKeyboardEvent = (event) => {
+        const target = event.target;
+        if (target instanceof HTMLInputElement ||
+            target instanceof HTMLTextAreaElement ||
+            target instanceof HTMLSelectElement) {
+            event.stopPropagation();
+        }
+    };
+    const setKeyboardEnabled = (enabled) => {
+        if (scene.input?.keyboard) {
+            scene.input.keyboard.enabled = enabled;
+        }
+        root.dataset.keyboardCaptured = String(!enabled);
+    };
+    root.addEventListener("keydown", stopKeyboardEvent, true);
+    root.addEventListener("keyup", stopKeyboardEvent, true);
+    root.addEventListener("focusin", (event) => {
+        if (event.target instanceof HTMLElement && isEditableElement(event.target)) {
+            setKeyboardEnabled(false);
+        }
+    });
+    root.addEventListener("focusout", () => setKeyboardEnabled(true));
+}
+export function isEditableElement(element) {
+    return (element instanceof HTMLInputElement ||
+        element instanceof HTMLTextAreaElement ||
+        element instanceof HTMLSelectElement ||
+        element.isContentEditable);
+}
+export function labelWrap(labelText, control) {
+    const label = document.createElement("label");
+    label.className = "ai-game-assets-designer__field";
+    const span = document.createElement("span");
+    span.textContent = labelText;
+    label.append(span, control);
+    return label;
+}
+export function numericInput() {
+    const input = document.createElement("input");
+    input.type = "number";
+    input.min = "1";
+    input.step = "1";
+    input.inputMode = "numeric";
+    return input;
+}
+export function signedNumberInput() {
+    const input = document.createElement("input");
+    input.type = "number";
+    input.step = "1";
+    input.inputMode = "numeric";
+    return input;
+}
+export function decimalInput() {
+    const input = document.createElement("input");
+    input.type = "number";
+    input.step = "any";
+    input.inputMode = "decimal";
+    return input;
+}
+export async function imageSourceToDataUrl(src) {
+    if (src.startsWith("data:"))
+        return src;
+    const response = await fetch(src);
+    if (!response.ok) {
+        throw new Error(`Could not load current animation image (${response.status}).`);
+    }
+    const responseBlob = await response.blob();
+    const blob = responseBlob.type === "application/octet-stream"
+        ? responseBlob.slice(0, responseBlob.size, mimeTypeFromFileName(src))
+        : responseBlob;
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.addEventListener("load", () => {
+            if (typeof reader.result === "string") {
+                resolve(reader.result);
+            }
+            else {
+                reject(new Error("Could not convert current animation image to a data URL."));
+            }
+        });
+        reader.addEventListener("error", () => {
+            reject(reader.error ?? new Error("Could not read current animation image."));
+        });
+        reader.readAsDataURL(blob);
+    });
+}
+export function styleGuideDraftFromManifest(manifest) {
+    return {
+        prompt: manifest.styleGuide?.prompt ?? "",
+        images: (manifest.styleGuide?.images ?? []).map((image) => ({
+            name: image.name,
+            src: image.file
+        }))
+    };
+}
+export function hasStyleGuide(styleGuide) {
+    return Boolean(styleGuide.prompt.trim() || styleGuide.images.length);
+}
+export async function styleGuideRequest(styleGuide) {
+    return {
+        prompt: styleGuide.prompt.trim() || undefined,
+        images: await Promise.all(styleGuide.images.map(async (image) => ({
+            name: image.name,
+            dataUrl: await imageSourceToDataUrl(image.src)
+        })))
+    };
+}
+export function fileToDataUrl(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.addEventListener("load", () => {
+            if (typeof reader.result === "string") {
+                resolve(reader.result);
+            }
+            else {
+                reject(new Error("Could not read uploaded file."));
+            }
+        });
+        reader.addEventListener("error", () => {
+            reject(reader.error ?? new Error("Could not read uploaded file."));
+        });
+        reader.readAsDataURL(file);
+    });
+}
+export function mimeTypeFromDataUrl(dataUrl) {
+    return /^data:([^;,]+)/.exec(dataUrl)?.[1] ?? "image/png";
+}
+export function mimeTypeFromFileName(fileName) {
+    if (/\.png(?:$|[?#])/i.test(fileName))
+        return "image/png";
+    if (/\.webp(?:$|[?#])/i.test(fileName))
+        return "image/webp";
+    if (/\.jpe?g(?:$|[?#])/i.test(fileName))
+        return "image/jpeg";
+    if (/\.svg(?:$|[?#])/i.test(fileName))
+        return "image/svg+xml";
+    return "image/png";
+}
+export function readableAssetName(assetId) {
+    const displayId = assetId.startsWith("audio.sfx.")
+        ? assetId.slice("audio.sfx.".length)
+        : assetId;
+    return displayId
+        .split(/[._-]/g)
+        .map((part) => `${part.slice(0, 1).toUpperCase()}${part.slice(1)}`)
+        .join(" ");
+}
+export function errorMessage(error) {
+    return error instanceof Error ? error.message : String(error);
+}
+export function isAbortError(error) {
+    return error instanceof DOMException
+        ? error.name === "AbortError"
+        : error instanceof Error && error.name === "AbortError";
+}
+const statusAnimationTimers = new WeakMap();
+export function setStatus(elements, message, kind) {
+    if (elements.status.dataset.statusLock === "generation" &&
+        (kind !== "busy" || message !== "Generating options...")) {
+        return;
+    }
+    stopStatusAnimation(elements.status);
+    elements.status.dataset.kind = kind;
+    if (kind === "busy" && message === "Generating options...") {
+        startGeneratingStatusAnimation(elements.status, message);
+        return;
+    }
+    elements.status.textContent = message;
+}
+export function stopStatusAnimation(status) {
+    const timer = statusAnimationTimers.get(status);
+    if (timer !== undefined) {
+        window.clearInterval(timer);
+        statusAnimationTimers.delete(status);
+    }
+}
+export function startGeneratingStatusAnimation(status, message) {
+    let offset = 0;
+    const highlightLength = 3;
+    const maxOffset = Math.max(1, message.length - highlightLength + 1);
+    const render = () => {
+        const before = message.slice(0, offset);
+        const highlighted = message.slice(offset, offset + highlightLength);
+        const after = message.slice(offset + highlightLength);
+        const highlight = document.createElement("span");
+        highlight.className = "ai-game-assets-designer__status-highlight";
+        highlight.textContent = highlighted;
+        status.replaceChildren(document.createTextNode(before), highlight, document.createTextNode(after));
+        offset = (offset + 1) % maxOffset;
+    };
+    render();
+    statusAnimationTimers.set(status, window.setInterval(render, 140));
+}
+export function ensureDesignerStyles() {
+    const styleId = "ai-game-assets-designer-styles";
+    if (document.getElementById(styleId)) {
+        return;
+    }
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = `
+.ai-game-assets-designer {
+  position: fixed;
+  top: 14px;
+  right: 14px;
+  z-index: 2147483647;
+  color: #f5f7fb;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+.ai-game-assets-designer * { box-sizing: border-box; }
+.ai-game-assets-designer [hidden] { display: none !important; }
+.ai-game-assets-designer__toggle {
+  min-width: 74px;
+  height: 42px;
+  padding: 0 16px;
+  border: 1px solid #63708a;
+  border-radius: 999px;
+  background: #202838;
+  color: #fff;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
+  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
+}
+.ai-game-assets-designer__toggle:hover,
+.ai-game-assets-designer__toggle:focus-visible {
+  border-color: #8bb8ff;
+  background: #253149;
+  box-shadow:
+    0 0 0 3px rgba(74, 144, 255, 0.24),
+    0 0 22px rgba(74, 144, 255, 0.42),
+    0 12px 30px rgba(0, 0, 0, 0.42);
+  transform: translateY(-1px);
+}
+.ai-game-assets-designer__panel {
+  display: none;
+  width: min(340px, calc(100vw - 28px));
+  max-height: calc(100vh - 80px);
+  overflow-y: auto;
+  margin-top: 10px;
+  padding: 14px;
+  border: 1px solid #303949;
+  border-radius: 8px;
+  background: rgba(20, 24, 32, 0.97);
+  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
+}
+.ai-game-assets-designer[data-open="true"] .ai-game-assets-designer__panel { display: block; }
+.ai-game-assets-designer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.ai-game-assets-designer__title {
+  font-weight: 700;
+  font-size: 15px;
+}
+.ai-game-assets-designer__style-button {
+  border: 1px solid #58657a;
+  border-radius: 6px;
+  background: #273142;
+  color: #fff;
+  padding: 6px 8px;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.ai-game-assets-designer__field {
+  display: grid;
+  gap: 7px;
+  margin-bottom: 12px;
+  color: #b9c1cf;
+  font-size: 13px;
+}
+.ai-game-assets-designer__field select,
+.ai-game-assets-designer__field input,
+.ai-game-assets-designer__field textarea {
+  width: 100%;
+  border: 1px solid #3a4352;
+  border-radius: 6px;
+  background: #101319;
+  color: #f5f7fb;
+  padding: 9px 10px;
+  font: inherit;
+}
+.ai-game-assets-designer__field textarea { resize: vertical; }
+.ai-game-assets-designer__asset-browser {
+  display: grid;
+  gap: 8px;
+  padding: 8px;
+  border: 1px solid #303949;
+  border-radius: 8px;
+  background: rgba(11, 15, 22, 0.58);
+}
+.ai-game-assets-designer__asset-breadcrumbs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 5px;
+  color: #8f9cb5;
+  font-size: 12px;
+}
+.ai-game-assets-designer__asset-breadcrumb,
+.ai-game-assets-designer__asset-folder,
+.ai-game-assets-designer__asset-item {
+  border: 1px solid #374155;
+  border-radius: 6px;
+  background: #151c29;
+  color: #eef4ff;
+  cursor: pointer;
+}
+.ai-game-assets-designer__asset-breadcrumb {
+  padding: 3px 7px;
+  font-size: 12px;
+}
+.ai-game-assets-designer__asset-breadcrumb:hover,
+.ai-game-assets-designer__asset-folder:hover,
+.ai-game-assets-designer__asset-item:hover {
+  border-color: #6ea6ff;
+  background: #202b40;
+}
+.ai-game-assets-designer__asset-breadcrumb-separator { opacity: 0.65; }
+.ai-game-assets-designer__asset-list {
+  display: grid;
+  gap: 6px;
+  max-height: 145px;
+  overflow-y: auto;
+}
+.ai-game-assets-designer__asset-folder,
+.ai-game-assets-designer__asset-item {
+  width: 100%;
+  min-height: 30px;
+  padding: 6px 8px;
+  text-align: left;
+}
+.ai-game-assets-designer__asset-folder::before {
+  content: ">";
+  display: inline-block;
+  margin-right: 7px;
+  color: #92b8ff;
+}
+.ai-game-assets-designer__asset-item.is-selected {
+  border-color: #8bb8ff;
+  background: #263450;
+  box-shadow: inset 3px 0 0 #8bb8ff;
+}
+.ai-game-assets-designer__dimensions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+.ai-game-assets-designer__dimensions .ai-game-assets-designer__field {
+  margin-bottom: 12px;
+}
+.ai-game-assets-designer__current {
+  min-height: 96px;
+  display: grid;
+  place-items: center;
+  padding: 8px;
+  border: 1px solid #384251;
+  border-radius: 6px;
+  background: #0f1218;
+  overflow: hidden;
+  cursor: pointer;
+}
+.ai-game-assets-designer__current.is-selected {
+  border-color: #6ed3ff;
+}
+.ai-game-assets-designer__current:focus-visible {
+  outline: 2px solid #93c5fd;
+  outline-offset: 2px;
+}
+.ai-game-assets-designer__current-image {
+  max-width: 100%;
+  max-height: 112px;
+  object-fit: contain;
+  image-rendering: pixelated;
+}
+.ai-game-assets-designer__current-audio {
+  width: 100%;
+}
+.ai-game-assets-designer__audio-player {
+  width: 100%;
+  display: grid;
+  gap: 8px;
+}
+.ai-game-assets-designer__audio-player audio {
+  display: none;
+}
+.ai-game-assets-designer__audio-controls {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 8px;
+}
+.ai-game-assets-designer__audio-play {
+  min-width: 56px;
+  border: 1px solid #58657a;
+  border-radius: 6px;
+  background: #273142;
+  color: #fff;
+  padding: 6px 8px;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.ai-game-assets-designer__audio-time {
+  color: #cbd5e1;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+.ai-game-assets-designer__audio-trim {
+  color: #fbbf24;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+.ai-game-assets-designer__audio-waveform {
+  width: 100%;
+  height: 58px;
+  border: 1px solid #2f3a49;
+  border-radius: 6px;
+  background: #111827;
+  cursor: pointer;
+}
+.ai-game-assets-designer__animation-stage,
+.ai-game-assets-designer__option-animation {
+  position: relative;
+  overflow: hidden;
+  background: #0f1218;
+}
+.ai-game-assets-designer__animate-button {
+  border: 1px solid #58657a;
+  border-radius: 6px;
+  background: #273142;
+  color: #fff;
+  padding: 6px 8px;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.ai-game-assets-designer__current .ai-game-assets-designer__animate-button {
+  width: 100%;
+}
+.ai-game-assets-designer__actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+.ai-game-assets-designer__actions button {
+  border: 1px solid #58657a;
+  border-radius: 6px;
+  background: #273142;
+  color: #fff;
+  padding: 9px 11px;
+  font: inherit;
+  cursor: pointer;
+}
+.ai-game-assets-designer__actions button:last-child { grid-column: 1 / -1; }
+.ai-game-assets-designer__actions button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+.ai-game-assets-designer__meta,
+.ai-game-assets-designer__status {
+  min-height: 22px;
+  color: #b9c1cf;
+  font-size: 13px;
+  margin-top: 11px;
+}
+.ai-game-assets-designer__status {
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+.ai-game-assets-designer__status[data-kind="error"] {
+  min-height: 0;
+  padding: 10px 11px;
+  border: 1px solid #f87171;
+  border-radius: 6px;
+  background: rgba(127, 29, 29, 0.34);
+  color: #fecaca;
+}
+.ai-game-assets-designer__status[data-kind="success"] {
+  color: #bbf7d0;
+}
+.ai-game-assets-designer__status[data-kind="busy"] {
+  color: #bfdbfe;
+}
+.ai-game-assets-designer__status-highlight {
+  color: #ffffff;
+  text-shadow: 0 0 10px rgba(147, 197, 253, 0.9);
+}
+.ai-game-assets-designer__options {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
+  gap: 8px;
+  margin-top: 10px;
+}
+.ai-game-assets-designer__options.is-audio {
+  grid-template-columns: 1fr;
+}
+.ai-game-assets-designer__option {
+  border: 2px solid #384251;
+  border-radius: 8px;
+  background: #0f1218;
+  min-height: 86px;
+  display: grid;
+  gap: 6px;
+  place-items: center;
+  padding: 6px;
+}
+.ai-game-assets-designer__option.is-selected { border-color: #6ed3ff; }
+.ai-game-assets-designer__options.is-audio .ai-game-assets-designer__option {
+  grid-template-columns: 120px 1fr;
+  align-items: center;
+  min-height: 112px;
+}
+.ai-game-assets-designer__option-select {
+  width: 100%;
+  min-height: 74px;
+  border: 0;
+  background: transparent;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  color: #dbeafe;
+  font: inherit;
+}
+.ai-game-assets-designer__option-select--audio {
+  min-height: 72px;
+  border: 1px solid #344155;
+  border-radius: 6px;
+  background: #172033;
+  padding: 8px;
+}
+.ai-game-assets-designer__option-audio {
+  width: 100%;
+}
+.ai-game-assets-designer__option-select img {
+  width: 68px;
+  height: 68px;
+  object-fit: contain;
+  image-rendering: pixelated;
+}
+.ai-game-assets-designer__option .ai-game-assets-designer__animate-button {
+  width: 100%;
+}
+.ai-game-assets-designer__modal {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 18px;
+  background: rgba(6, 8, 12, 0.62);
+}
+.ai-game-assets-designer__modal-card {
+  width: min(520px, calc(100vw - 36px));
+  max-height: calc(100vh - 36px);
+  overflow: auto;
+  border: 1px solid #384251;
+  border-radius: 8px;
+  background: #141820;
+  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
+  padding: 14px;
+}
+.ai-game-assets-designer__modal-title {
+  margin-bottom: 12px;
+  font-weight: 700;
+  font-size: 15px;
+}
+.ai-game-assets-designer__modal-stage {
+  margin: 0 auto 14px;
+  position: relative;
+  overflow: hidden;
+  background: #0f1218;
+}
+.ai-game-assets-designer__frame-image {
+  position: absolute;
+  inset: 0;
+  background-repeat: no-repeat;
+  image-rendering: pixelated;
+}
+.ai-game-assets-designer__frame-strip {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding: 8px 0 12px;
+}
+.ai-game-assets-designer__frame-thumb {
+  flex: 0 0 auto;
+  border: 2px solid #384251;
+  border-radius: 6px;
+  background-color: #0f1218;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+}
+.ai-game-assets-designer__frame-thumb.is-selected {
+  border-color: #6ed3ff;
+}
+.ai-game-assets-designer__frame-fields {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+.ai-game-assets-designer__frame-fields .ai-game-assets-designer__field {
+  margin-bottom: 0;
+}
+.ai-game-assets-designer__audio-editor-stage {
+  display: grid;
+  gap: 6px;
+  padding: 8px;
+  border: 1px solid #384251;
+  border-radius: 6px;
+  background: #0f1218;
+}
+.ai-game-assets-designer__audio-editor-waveform {
+  width: 100%;
+  height: 132px;
+  border: 1px solid #2f3a49;
+  border-radius: 6px;
+  background: #111827;
+  cursor: ew-resize;
+}
+.ai-game-assets-designer__audio-editor-scrubber {
+  width: 100%;
+  height: 18px;
+  margin: 0;
+  cursor: pointer;
+}
+.ai-game-assets-designer__audio-editor-transport {
+  display: grid;
+  grid-template-columns: auto minmax(88px, auto) 1fr;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+}
+.ai-game-assets-designer__audio-editor-transport .ai-game-assets-designer__field {
+  margin: 0;
+}
+.ai-game-assets-designer__inline-checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 7px;
+  color: #cbd5e1;
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
+}
+.ai-game-assets-designer__inline-checkbox input {
+  width: auto;
+  margin: 0;
+}
+.ai-game-assets-designer__audio-editor-transport button {
+  width: 36px;
+  height: 32px;
+  border: 1px solid #58657a;
+  border-radius: 6px;
+  background: #273142;
+  color: #fff;
+  padding: 0;
+  font: inherit;
+  font-size: 14px;
+  cursor: pointer;
+}
+.ai-game-assets-designer__audio-editor-time {
+  color: #cbd5e1;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+.ai-game-assets-designer__audio-editor-fields {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 10px;
+}
+.ai-game-assets-designer__audio-editor-fields .ai-game-assets-designer__field {
+  margin-bottom: 0;
+}
+.ai-game-assets-designer__audio-editor-fields input[type="range"] {
+  width: 100%;
+}
+.ai-game-assets-designer__audio-editor-hint {
+  margin-top: 10px;
+  color: #94a3b8;
+  font-size: 12px;
+  line-height: 1.35;
+}
+.ai-game-assets-designer__modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 14px;
+}
+.ai-game-assets-designer__modal-actions button {
+  border: 1px solid #58657a;
+  border-radius: 6px;
+  background: #273142;
+  color: #fff;
+  padding: 9px 11px;
+  font: inherit;
+  cursor: pointer;
+}
+.ai-game-assets-designer__modal-actions button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+.ai-game-assets-designer__touchup {
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 10px;
+  padding: 14px;
+  background: #0b0f16;
+  color: #f5f7fb;
+}
+.ai-game-assets-designer__touchup-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 34px;
+}
+.ai-game-assets-designer__touchup-title {
+  font-weight: 700;
+  font-size: 15px;
+}
+.ai-game-assets-designer__touchup-dirty {
+  border: 1px solid #fbbf24;
+  border-radius: 999px;
+  color: #fde68a;
+  padding: 3px 8px;
+  font-size: 12px;
+}
+.ai-game-assets-designer__touchup-close {
+  margin-left: auto;
+  width: 32px;
+  height: 32px;
+  border: 1px solid #58657a;
+  border-radius: 6px;
+  background: #273142;
+  color: #fff;
+  font: inherit;
+  cursor: pointer;
+}
+.ai-game-assets-designer__touchup-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 8px;
+  border: 1px solid #303949;
+  border-radius: 8px;
+  background: #141820;
+}
+.ai-game-assets-designer__touchup-toolbar button {
+  border: 1px solid #58657a;
+  border-radius: 6px;
+  background: #273142;
+  color: #fff;
+  padding: 7px 9px;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.ai-game-assets-designer__touchup-toolbar button.is-active {
+  border-color: #6ed3ff;
+  background: #17425a;
+}
+.ai-game-assets-designer__touchup-toolbar button.is-primary {
+  border-color: #86efac;
+  background: #14532d;
+}
+.ai-game-assets-designer__touchup-toolbar button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+.ai-game-assets-designer__touchup-split {
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+}
+.ai-game-assets-designer__touchup-split > button:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.ai-game-assets-designer__touchup-toolbar .ai-game-assets-designer__touchup-split-arrow {
+  min-width: 26px;
+  padding: 7px 6px;
+  border-left: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.ai-game-assets-designer__touchup-split-arrow::before {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  margin: 0 auto;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 6px solid currentColor;
+}
+.ai-game-assets-designer__touchup-brush-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 2;
+  width: 210px;
+  display: grid;
+  gap: 10px;
+  padding: 10px;
+  border: 1px solid #384251;
+  border-radius: 8px;
+  background: #141820;
+  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42);
+}
+.ai-game-assets-designer__touchup-brush-size {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) 28px;
+  align-items: center;
+  gap: 8px;
+  color: #cbd5e1;
+  font-size: 12px;
+}
+.ai-game-assets-designer__touchup-brush-size input {
+  width: 100%;
+}
+.ai-game-assets-designer__touchup-brush-size span {
+  color: #f8fafc;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+.ai-game-assets-designer__touchup-color {
+  display: grid;
+  grid-template-columns: 38px auto 58px;
+  align-items: center;
+  gap: 6px;
+  color: #cbd5e1;
+  font-size: 12px;
+}
+.ai-game-assets-designer__touchup-color input[type="color"] {
+  width: 38px;
+  height: 30px;
+  border: 1px solid #58657a;
+  border-radius: 6px;
+  background: #101319;
+  padding: 2px;
+}
+.ai-game-assets-designer__touchup-color input[type="number"] {
+  width: 58px;
+  border: 1px solid #3a4352;
+  border-radius: 6px;
+  background: #101319;
+  color: #f5f7fb;
+  padding: 6px;
+  font: inherit;
+  font-size: 12px;
+}
+.ai-game-assets-designer__touchup-workspace {
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 190px;
+  gap: 12px;
+}
+.ai-game-assets-designer__touchup-canvas-wrap {
+  position: relative;
+  min-height: 0;
+  overflow: auto;
+  border: 1px solid #303949;
+  border-radius: 8px;
+  background-color: #111827;
+  background-image:
+    linear-gradient(45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
+    linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.08) 75%),
+    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.08) 75%);
+  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+  background-size: 16px 16px;
+  touch-action: none;
+}
+.ai-game-assets-designer__touchup-canvas {
+  display: block;
+  margin: 24px;
+  image-rendering: pixelated;
+  cursor: crosshair;
+  touch-action: none;
+}
+.ai-game-assets-designer__touchup-selection {
+  position: absolute;
+  pointer-events: none;
+  border: 1px dashed #f8fafc;
+  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9);
+  transform: translate(24px, 24px);
+}
+.ai-game-assets-designer__touchup-side {
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 10px;
+}
+.ai-game-assets-designer__touchup-panel {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+  border: 1px solid #303949;
+  border-radius: 8px;
+  background: #141820;
+  color: #cbd5e1;
+  font-size: 12px;
+}
+.ai-game-assets-designer__touchup-panel canvas {
+  width: 100%;
+  max-height: 160px;
+  object-fit: contain;
+  border: 1px solid #263243;
+  border-radius: 6px;
+  background: #0f1218;
+  image-rendering: pixelated;
+}
+@media (max-width: 760px) {
+  .ai-game-assets-designer__touchup-workspace {
+    grid-template-columns: 1fr;
+  }
+  .ai-game-assets-designer__touchup-side {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+.ai-game-assets-designer__style-drop {
+  display: grid;
+  place-items: center;
+  min-height: 90px;
+  margin-bottom: 10px;
+  border: 1px dashed #58657a;
+  border-radius: 6px;
+  background: #0f1218;
+  color: #b9c1cf;
+  font-size: 13px;
+}
+.ai-game-assets-designer__style-drop.is-dragging {
+  border-color: #6ed3ff;
+  color: #dbeafe;
+}
+.ai-game-assets-designer__style-drop + button {
+  border: 1px solid #58657a;
+  border-radius: 6px;
+  background: #273142;
+  color: #fff;
+  padding: 8px 10px;
+  font: inherit;
+  cursor: pointer;
+}
+.ai-game-assets-designer__style-images {
+  display: grid;
+  gap: 8px;
+  margin-top: 10px;
+}
+.ai-game-assets-designer__style-image {
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  padding: 6px;
+  border: 1px solid #384251;
+  border-radius: 6px;
+  background: #0f1218;
+  font-size: 12px;
+}
+.ai-game-assets-designer__style-image img {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+}
+.ai-game-assets-designer__style-image span {
+  overflow-wrap: anywhere;
+}
+.ai-game-assets-designer__style-image button {
+  border: 0;
+  background: transparent;
+  color: #fca5a5;
+  cursor: pointer;
+}
+`;
+    document.head.append(style);
+}
+//# sourceMappingURL=designer-support.js.map