@ai-game-assets/phaser 0.6.0 → 0.7.0

package/dist/designer.js

@@ -1,8 +1,39 @@
-import { linkedAnimationAssetIds, registerInGameDesignerPanel, resolveTargetAssetId, topLevelAiAssetIds } from "@ai-game-assets/core";
+import { expandAiAssetIds, linkedAnimationAssetIds, registerInGameDesignerPanel, resolveTargetAssetId, topLevelAiAssetIds } from "@ai-game-assets/core";
 import { AiAssetDebugClient } from "./debug-client.js";
 import { ensureMissingAiAssetFirstDrafts } from "./first-drafts.js";
 import { createLocalDerivedOption, openDeriveDialog, referenceImageForCandidate } from "./derive-dialog.js";
-import { assetWithGeneratedGeometry, audioGenerationOverridesFromInputs, bindKeyboardCapture, canEditGenerationFormat, createDesignerElements, effectiveGenerationFormat, ensureDesignerStyles, errorMessage, generationOverridesFromInputs, hasStyleGuide, imageSourceToDataUrl, isAbortError, isAudioAsset, isSvgSource, isVoiceAsset, mimeTypeFromDataUrl, normalizeAssetFormat, normalizeAudioFormat, openAnimationEditor, openAssetVersionsDialog, openAudioEditor, openFrameTouchUpEditor, openStyleGuideEditor, pickUploadFile, previewCurrentAsset, previewImageSource, previewOption, readableAssetName, renderAssetFolderBrowser, renderAudioPlayer, renderOptions, resolvePreviewDisplaySize, setStatus, stopStatusAnimation, styleGuideDraftFromManifest, styleGuideRequest, uploadedOptionFromFile, voiceGenerationOverridesFromInputs } from "./designer-support.js";
+import { createMixedTilesetOption, isDesignerTilesetAsset, openTilesetBaseMixerDialog, openTilesetAnimationEditor, openTilesetAnimationMixerDialog, openTilesetEditor, tilesetAnimationForKey, resolveTilesetBaseMixCurrent, tilesetMetadataForAsset, tilesetTileGenerationOverride } from "./tileset-dialog.js";
+import { aiTilesetAnimationTextureKey } from "./keys.js";
+/**
+ * Resolves the canonical, untransformed source used by Edit Tileset. A pending
+ * option is its own editing lineage: when it has no saved source metadata, its
+ * rendered image becomes the new source instead of borrowing the active
+ * version's unrelated source sheet.
+ */
+export function resolveTilesetEditorInitialState(options) {
+    if (options.currentOption) {
+        const sourceSrc = options.currentOption.tilesetSourceDataUrl;
+        return {
+            sourceSrc: sourceSrc ?? options.renderedSrc,
+            initialTransforms: sourceSrc
+                ? cloneTilesetTransforms(options.currentOption.tilesetTransforms)
+                : undefined
+        };
+    }
+    const sourceFile = options.activeVersion?.tilesetSourceFile;
+    return {
+        sourceSrc: sourceFile
+            ? options.resolveAssetUrl(sourceFile)
+            : options.renderedSrc,
+        initialTransforms: sourceFile
+            ? cloneTilesetTransforms(options.activeVersion?.tilesetTransforms)
+            : undefined
+    };
+}
+function cloneTilesetTransforms(transforms) {
+    return transforms?.map((transform) => ({ ...transform }));
+}
+import { assetWithGeneratedGeometry, audioGenerationOverridesFromInputs, bindKeyboardCapture, canEditGenerationFormat, createDesignerElements, effectiveGenerationFormat, ensureDesignerStyles, errorMessage, generationOverridesFromInputs, hasStyleGuide, imageSourceToDataUrl, installPromotedImageTexture, isAbortError, isAudioAsset, isSvgSource, isVoiceAsset, loadImageElement, mimeTypeFromDataUrl, normalizeAssetFormat, normalizeAudioFormat, openAnimationEditor, openAssetVersionsDialog, openAudioEditor, openFrameTouchUpEditor, openStyleGuideEditor, pickUploadFile, positiveIntegerInput, previewCurrentAsset, previewImageSource, previewOption, readableAssetName, renderAssetFolderBrowser, renderAudioPlayer, renderOptions, resolvePreviewDisplaySize, setStatus, stopStatusAnimation, styleGuideDraftFromManifest, styleGuideRequest, uploadedOptionFromFile, voiceGenerationOverridesFromInputs } from "./designer-support.js";
 export function installAiAssetDesigner(options) {
     ensureDesignerStyles();
     const client = options.client ?? new AiAssetDebugClient();
@@ -12,14 +43,46 @@ export function installAiAssetDesigner(options) {
     let selectedAssetId = visibleAssetIds()[0] ?? Object.keys(manifest.assets)[0];
     let selectedTargetId = options.targetId;
     let selectedTargetAssetId = selectedAssetId;
+    let selectedTilesetAnimationKey;
     let selectedOption;
+    let displayedOptions;
     let stopCurrentAnimationPreview;
     let editedCurrentOption;
     let previewedVersionName;
+    const pendingOptions = new Map();
     let styleGuideDraft = styleGuideDraftFromManifest(manifest, resolveAssetUrl);
     const formatDrafts = new Map();
+    const tilesetPromptDrafts = new Map();
+    const tilesetAnimationPromptDrafts = new Map();
+    const tilesetAnimationFrameDrafts = new Map();
+    let tilesetAnimationPromptRevision = 0;
+    let displayedTilesetAnimationOptions;
+    let stopTilesetAnimationOptionPreviews;
     let activeGeneration;
     let generationId = 0;
+    let panelRevision = 0;
+    let promotionId = 0;
+    let activePromotionId;
+    let mixingTileset = false;
+    const regenerateTilesetTile = async (assetId, tile, tileset, currentTileSrc) => {
+        const guide = await styleGuideRequest(styleGuideDraft);
+        return client.generate({
+            assetId,
+            count: 3,
+            format: effectiveGenerationFormat(manifest, formatDrafts, selectedAssetId, assetId),
+            tileset,
+            styleGuide: {
+                ...guide,
+                images: [
+                    ...guide.images,
+                    {
+                        name: `${assetId}-current-tile-${tile + 1}-style.png`,
+                        dataUrl: currentTileSrc
+                    }
+                ]
+            }
+        });
+    };
     if (!selectedAssetId) {
         throw new Error("AI asset designer requires at least one asset.");
     }
@@ -37,6 +100,59 @@ export function installAiAssetDesigner(options) {
     const mount = options.mount ?? document.body;
     mount.append(elements.root);
     bindKeyboardCapture(elements.root, options.scene);
+    const syncPromoteAllButton = () => {
+        elements.promoteAllButton.disabled =
+            pendingOptions.size === 0 ||
+                Boolean(activeGeneration) ||
+                activePromotionId !== undefined;
+    };
+    const rememberPendingOption = (assetId, option, pending = {}) => {
+        pendingOptions.set(assetId, {
+            option,
+            inheritAnimations: Boolean(pending.inheritAnimations),
+            previewedVersionName: pending.previewedVersionName,
+            tilesetAnimations: pending.tilesetAnimations,
+            animationOnlyKey: pending.animationOnlyKey
+        });
+        syncPromoteAllButton();
+    };
+    const forgetPendingOption = (assetId) => {
+        pendingOptions.delete(assetId);
+        syncPromoteAllButton();
+    };
+    const hasEditableTilesetAnimationFrames = (assetId, animationKey) => {
+        const pendingFrames = pendingOptions.get(assetId)?.tilesetAnimations?.[animationKey];
+        if (pendingFrames?.length)
+            return true;
+        const asset = manifest.assets[assetId];
+        const activeVersion = asset?.versions[asset.activeVersion];
+        return Boolean(activeVersion?.tilesetAnimations?.[animationKey]?.files.length);
+    };
+    const installTilesetAnimationFrameTextures = async (frames, asset, textureKeyForFrame) => {
+        const tileset = tilesetMetadataForAsset(asset);
+        if (!tileset || !options.scene.textures.addSpriteSheet)
+            return [];
+        const images = await Promise.all(frames.map((frame) => loadImageElement(frame)));
+        const textureKeys = images.map((image, index) => {
+            const textureKey = textureKeyForFrame(index);
+            if (options.scene.textures.exists(textureKey)) {
+                options.scene.textures.remove(textureKey);
+            }
+            options.scene.textures.addSpriteSheet?.(textureKey, image, {
+                frameWidth: tileset.tileWidth,
+                frameHeight: tileset.tileHeight,
+                margin: tileset.margin,
+                spacing: tileset.spacing
+            });
+            return textureKey;
+        });
+        return textureKeys;
+    };
+    const previewTilesetAnimationFrames = async (assetId, animationKey, frames, asset) => {
+        const previewId = Date.now();
+        const textureKeys = await installTilesetAnimationFrameTextures(frames, asset, (index) => `ai-preview:${assetId}:tileset:${encodeURIComponent(animationKey)}:${index}:${previewId}`);
+        options.onTilesetAnimationPreview?.(assetId, animationKey, textureKeys, asset);
+    };
     const applyOpenState = (isOpen) => {
         elements.root.dataset.open = String(isOpen);
         elements.toggle.setAttribute("aria-expanded", String(isOpen));
@@ -60,10 +176,31 @@ export function installAiAssetDesigner(options) {
         }
     };
     const syncAnimationChoices = (assetId) => {
+        const resolvedAssetId = resolveTargetAssetId(manifest, assetId, selectedTargetId);
+        const resolvedAsset = manifest.assets[resolvedAssetId] ?? manifest.assets[assetId];
         const asset = manifest.assets[assetId];
         const linkedAnimations = Object.entries(asset.linkedAnimationAssets ?? {});
         const isVoice = asset.kind === "voice";
         elements.animationSelect.innerHTML = "";
+        if (isDesignerTilesetAsset(resolvedAsset)) {
+            const baseOption = document.createElement("option");
+            baseOption.value = "tileset:base";
+            baseOption.textContent = "Base tileset";
+            elements.animationSelect.append(baseOption);
+            for (const animation of tilesetMetadataForAsset(resolvedAsset)?.animations ?? []) {
+                const option = document.createElement("option");
+                option.value = `tileset:animation:${encodeURIComponent(animation.key)}`;
+                option.textContent = readableAssetName(animation.key);
+                elements.animationSelect.append(option);
+            }
+            selectedTargetAssetId = resolvedAssetId;
+            selectedTilesetAnimationKey = undefined;
+            elements.animationField.hidden = false;
+            elements.animationField.firstElementChild.textContent = "Tileset view";
+            elements.animationSelect.value = "tileset:base";
+            return;
+        }
+        selectedTilesetAnimationKey = undefined;
         if (asset.kind !== "collection") {
             const baseOption = document.createElement("option");
             baseOption.value = resolveTargetAssetId(manifest, assetId, selectedTargetId);
@@ -83,17 +220,143 @@ export function installAiAssetDesigner(options) {
             : resolveTargetAssetId(manifest, assetId, selectedTargetId);
         elements.animationSelect.value = selectedTargetAssetId;
     };
-    const syncTargetAsset = (assetId) => {
+    const effectiveTilesetTileCount = (asset) => {
+        const tileset = tilesetMetadataForAsset(asset);
+        if (!tileset)
+            return 0;
+        const capacity = tileset.columns * tileset.rows;
+        return positiveIntegerInput(elements.frameCountInput, Math.min(tileset.tileCount ?? capacity, capacity));
+    };
+    const tilePromptDraftsForAsset = (assetId) => {
+        const existing = tilesetPromptDrafts.get(assetId);
+        if (existing)
+            return existing;
+        const configured = tilesetMetadataForAsset(manifest.assets[assetId])?.tiles
+            ?.map((tile) => tile.prompt) ?? [];
+        tilesetPromptDrafts.set(assetId, configured);
+        return configured;
+    };
+    const tilesetAnimationPromptDraftKey = (assetId, animationKey) => (`${assetId}\u0000${animationKey}`);
+    const animationTilePromptDraftsForAsset = (assetId, animationKey) => {
+        const draftKey = tilesetAnimationPromptDraftKey(assetId, animationKey);
+        const existing = tilesetAnimationPromptDrafts.get(draftKey);
+        if (existing)
+            return existing;
+        const asset = manifest.assets[assetId];
+        const tileset = tilesetMetadataForAsset(asset);
+        const animation = tilesetAnimationForKey(asset, animationKey);
+        const tileCount = tileset
+            ? Math.min(tileset.tileCount ?? tileset.columns * tileset.rows, tileset.columns * tileset.rows)
+            : 0;
+        const configured = animation?.tiles?.map((tile) => tile.prompt) ??
+            Array.from({ length: tileCount }, (_, tile) => {
+                const basePrompt = tileset?.tiles?.[tile]?.prompt?.trim();
+                return basePrompt
+                    ? `Keep this ${basePrompt} tile unchanged unless this animation needs it to move.`
+                    : "Keep this tile unchanged unless this animation needs it to move.";
+            });
+        tilesetAnimationPromptDrafts.set(draftKey, configured);
+        return configured;
+    };
+    const renderTilesetPromptInputs = (assetId) => {
+        const asset = manifest.assets[assetId];
+        const tileset = tilesetMetadataForAsset(asset);
+        const isAnimation = Boolean(selectedTilesetAnimationKey);
+        const tileCount = isAnimation && tileset
+            ? Math.min(tileset.tileCount ?? tileset.columns * tileset.rows, tileset.columns * tileset.rows)
+            : effectiveTilesetTileCount(asset);
+        const drafts = selectedTilesetAnimationKey
+            ? animationTilePromptDraftsForAsset(assetId, selectedTilesetAnimationKey)
+            : tilePromptDraftsForAsset(assetId);
+        if (!isAnimation)
+            elements.frameCountInput.value = String(tileCount);
+        elements.tilesetPromptsList.replaceChildren();
+        const title = elements.tilesetPromptsField.querySelector(".ai-game-assets-designer__tile-prompts-title");
+        const hint = elements.tilesetPromptsField.querySelector(".ai-game-assets-designer__tile-prompts-hint");
+        if (title)
+            title.textContent = isAnimation ? "Tile animation prompts" : "Tile prompts";
+        if (hint) {
+            hint.textContent = isAnimation
+                ? "Describe how every tile behaves in this animation, in exact sheet order."
+                : "Describe each tile in exact sheet order.";
+        }
+        for (let tileIndex = 0; tileIndex < tileCount; tileIndex += 1) {
+            const input = document.createElement("textarea");
+            input.rows = 3;
+            input.value = drafts[tileIndex] ?? "";
+            input.setAttribute("aria-label", `Tile ${tileIndex + 1} prompt`);
+            input.addEventListener("input", () => {
+                drafts[tileIndex] = input.value;
+                if (isAnimation && selectedTilesetAnimationKey) {
+                    elements.promoteButton.disabled = true;
+                    void stageTilesetAnimationPromptDraft(assetId, selectedTilesetAnimationKey);
+                }
+            });
+            const label = document.createElement("label");
+            label.className = "ai-game-assets-designer__field";
+            const labelText = document.createElement("span");
+            labelText.textContent = `Tile ${tileIndex + 1}`;
+            label.append(labelText, input);
+            elements.tilesetPromptsList.append(label);
+        }
+    };
+    const tilesetAnimationPromptDefinitions = (assetId, animationKey) => {
+        const tileset = tilesetMetadataForAsset(manifest.assets[assetId]);
+        if (!tileset)
+            return undefined;
+        const tileCount = Math.min(tileset.tileCount ?? tileset.columns * tileset.rows, tileset.columns * tileset.rows);
+        const prompts = animationTilePromptDraftsForAsset(assetId, animationKey)
+            .slice(0, tileCount)
+            .map((prompt) => prompt.trim());
+        if (prompts.length !== tileCount || prompts.some((prompt) => !prompt))
+            return undefined;
+        return prompts.map((prompt) => ({ prompt }));
+    };
+    const tilesetAnimationDefinitionFromInputs = (assetId, animationKey) => {
+        const animation = tilesetAnimationForKey(manifest.assets[assetId], animationKey);
+        const tiles = tilesetAnimationPromptDefinitions(assetId, animationKey);
+        if (!animation || !tiles)
+            return undefined;
+        const frameCount = positiveIntegerInput(elements.frameCountInput, animation.frameCount);
+        const defaultDelayMs = Math.round(1000 / Math.max(1, animation.frameRate));
+        return {
+            ...animation,
+            frameCount,
+            tiles,
+            frameTimings: Array.from({ length: frameCount }, (_, index) => (animation.frameTimings?.[index] ?? { delayMs: defaultDelayMs }))
+        };
+    };
+    const assetWithTilesetAnimationDefinition = (asset, definition) => ({
+        ...asset,
+        tileset: asset.tileset ? {
+            ...asset.tileset,
+            animations: (asset.tileset.animations ?? []).map((animation) => (animation.key === definition.key ? definition : animation))
+        } : asset.tileset
+    });
+    const tilesetPromptDefinitions = (assetId, tileCount) => {
+        const prompts = tilePromptDraftsForAsset(assetId)
+            .slice(0, tileCount)
+            .map((prompt) => prompt.trim());
+        if (prompts.length !== tileCount || prompts.some((prompt) => !prompt)) {
+            return undefined;
+        }
+        return prompts.map((prompt) => ({ prompt }));
+    };
+    const syncTargetAsset = (assetId, syncOptions = {}) => {
         const asset = manifest.assets[assetId];
         const activeVersion = asset.versions[asset.activeVersion];
         const isAudio = isAudioAsset(asset);
         const isVoice = isVoiceAsset(asset);
         const isVoiceLine = asset.kind === "voice-line";
+        const tileset = tilesetMetadataForAsset(asset);
+        const tilesetAnimation = selectedTilesetAnimationKey
+            ? tilesetAnimationForKey(asset, selectedTilesetAnimationKey)
+            : undefined;
         stopCurrentAnimationPreview?.();
         stopCurrentAnimationPreview = undefined;
-        elements.promptInput.value = activeVersion?.prompt ?? asset.prompt;
-        elements.widthInput.value = String(asset.frameGrid?.frameWidth ?? asset.dimensions?.width ?? 1);
-        elements.heightInput.value = String(asset.frameGrid?.frameHeight ?? asset.dimensions?.height ?? 1);
+        elements.promptInput.value = tilesetAnimation?.prompt ?? activeVersion?.prompt ?? asset.prompt;
+        elements.widthInput.value = String(asset.frameGrid?.frameWidth ?? tileset?.tileWidth ?? asset.dimensions?.width ?? 1);
+        elements.heightInput.value = String(asset.frameGrid?.frameHeight ?? tileset?.tileHeight ?? asset.dimensions?.height ?? 1);
         elements.audioFormatSelect.value = asset.audioSettings?.format ?? "mp3";
         elements.audioDurationInput.value = String(asset.audioSettings?.durationSeconds ?? activeVersion?.durationSeconds ?? "");
         elements.audioLoopInput.checked = Boolean(asset.audioSettings?.loop);
@@ -110,14 +373,43 @@ export function installAiAssetDesigner(options) {
         elements.audioLoopField.hidden = !isAudio;
         elements.voiceTextField.hidden = !isVoice;
         elements.voiceTextField.firstChild.textContent = isVoiceLine ? "Text to say" : "Demo sentence";
-        elements.formatField.hidden = isAudio || elements.formatField.hidden;
-        elements.dimensionGrid.hidden = isAudio;
+        elements.formatField.hidden = isAudio || Boolean(selectedTilesetAnimationKey) ||
+            elements.formatField.hidden;
+        const isTilesetAnimation = Boolean(tileset && selectedTilesetAnimationKey);
+        const isBaseTileset = Boolean(tileset && !selectedTilesetAnimationKey);
+        elements.promptField.hidden = Boolean(tileset);
+        elements.tilesetPromptsField.hidden = !tileset;
+        elements.widthField.firstElementChild.textContent = tileset ? "Tile width" : "Width";
+        elements.heightField.firstElementChild.textContent = tileset ? "Tile height" : "Height";
+        elements.frameCountField.firstElementChild.textContent = isTilesetAnimation
+            ? "Animation frames"
+            : tileset ? "Tiles" : "Frames";
+        elements.dimensionGrid.hidden = isAudio || isTilesetAnimation;
         syncTargetVariantLabel(assetId);
-        elements.frameCountInput.value = String(asset.frameGrid?.frameCount ??
-            (asset.frameGrid ? asset.frameGrid.columns * asset.frameGrid.rows : 1));
+        elements.frameCountInput.value = String(isTilesetAnimation
+            ? tilesetAnimation?.frameCount ?? 1
+            : asset.frameGrid?.frameCount ??
+                (asset.frameGrid
+                    ? asset.frameGrid.columns * asset.frameGrid.rows
+                    : tileset?.tileCount ?? (tileset ? tileset.columns * tileset.rows : 1)));
+        if (tileset && !isTilesetAnimation) {
+            elements.frameCountInput.max = String(tileset.columns * tileset.rows);
+        }
+        else {
+            elements.frameCountInput.removeAttribute("max");
+        }
+        if (tileset) {
+            renderTilesetPromptInputs(assetId);
+        }
+        else {
+            elements.tilesetPromptsList.replaceChildren();
+        }
         const activeVersionSource = activeVersion?.file ? resolveAssetUrl(activeVersion.file) : "";
-        elements.frameCountField.hidden = asset.kind === "image" || !asset.frameGrid;
-        elements.versionLabel.textContent = `Active ${readableAssetName(assetId)}: ${asset.activeVersion}`;
+        elements.frameCountField.hidden = !isTilesetAnimation &&
+            (!tileset && (asset.kind === "image" || !asset.frameGrid));
+        elements.versionLabel.textContent = selectedTilesetAnimationKey
+            ? `Active ${readableAssetName(assetId)} animation: ${readableAssetName(selectedTilesetAnimationKey)}`
+            : `Active ${readableAssetName(assetId)}: ${asset.activeVersion}`;
         elements.currentImage.src = activeVersionSource;
         if (isAudio) {
             renderAudioPlayer({
@@ -136,29 +428,53 @@ export function installAiAssetDesigner(options) {
         elements.currentAnimation.hidden = true;
         elements.currentAudio.hidden = !isAudio;
         elements.currentImage.hidden = isAudio;
-        elements.currentAnimationButton.textContent = "Edit...";
+        elements.currentAnimationButton.textContent = isTilesetAnimation
+            ? "Edit animation..."
+            : "Edit...";
+        elements.currentTouchUpButton.textContent = isBaseTileset ? "Edit tileset..." : "Touch up...";
         elements.currentRevertButton.hidden = true;
         elements.currentPreview.classList.add("is-selected");
-        elements.currentAnimationButton.hidden = !activeVersion?.file || (!asset.frameGrid && !isAudio);
+        elements.currentAnimationButton.hidden = isTilesetAnimation && selectedTilesetAnimationKey
+            ? !hasEditableTilesetAnimationFrames(assetId, selectedTilesetAnimationKey)
+            : !activeVersion?.file || (!asset.frameGrid && !isAudio);
         elements.currentTouchUpButton.hidden = !activeVersion?.file ||
+            Boolean(selectedTilesetAnimationKey) ||
             isAudio ||
             Boolean(asset.frameGrid) ||
             normalizeAssetFormat(asset.settings?.format) === "svg" ||
             isSvgSource(activeVersion?.file ?? "");
-        elements.options.innerHTML = "";
-        elements.options.classList.remove("is-audio");
+        if (syncOptions.preserveOptions && displayedOptions?.assetId === assetId) {
+            renderGeneratedOptions(assetId, displayedOptions.generated);
+        }
+        else {
+            clearGeneratedOptions();
+        }
         setStatus(elements, "", "idle");
         elements.promoteButton.disabled = true;
+        elements.uploadButton.disabled = Boolean(selectedTilesetAnimationKey);
         elements.versionsButton.disabled = Object.keys(asset.versions).length <= 1;
-        elements.deriveButton.hidden = isAudio || deriveCandidatesForAsset(assetId).length === 0;
+        elements.deriveButton.hidden = Boolean(selectedTilesetAnimationKey) ||
+            isAudio || deriveCandidatesForAsset(assetId).length === 0;
         selectedOption = undefined;
         editedCurrentOption = undefined;
         previewedVersionName = undefined;
+        const pending = pendingOptions.get(assetId);
+        if (pending) {
+            selectedOption = pending.option;
+            editedCurrentOption = pending.option;
+            previewedVersionName = pending.previewedVersionName;
+            showOptionInCurrentPreview(pending.option, "pending preview");
+            previewedVersionName = pending.previewedVersionName;
+            elements.currentPreview.classList.add("is-selected");
+            elements.promoteButton.disabled = activePromotionId !== undefined;
+        }
+        syncPromoteAllButton();
     };
     const showOptionInCurrentPreview = (option, label = "selected option") => {
         const asset = manifest.assets[selectedTargetAssetId];
         const optionAsset = assetWithGeneratedGeometry(asset, option);
         const isAudio = isAudioAsset(asset);
+        const isTilesetAnimation = Boolean(selectedTilesetAnimationKey && isDesignerTilesetAsset(optionAsset));
         stopCurrentAnimationPreview?.();
         stopCurrentAnimationPreview = undefined;
         editedCurrentOption = option;
@@ -166,10 +482,18 @@ export function installAiAssetDesigner(options) {
         elements.currentPreview.hidden = false;
         elements.currentPreview.setAttribute("aria-label", `Preview ${label} for ${readableAssetName(selectedTargetAssetId)}`);
         elements.currentAnimation.hidden = true;
-        elements.currentAnimationButton.textContent = "Edit...";
-        elements.currentAnimationButton.hidden = !optionAsset.frameGrid && !isAudio;
+        elements.currentAnimationButton.textContent = isTilesetAnimation
+            ? "Edit animation..."
+            : "Edit...";
+        elements.currentAnimationButton.hidden = isTilesetAnimation && selectedTilesetAnimationKey
+            ? !hasEditableTilesetAnimationFrames(selectedTargetAssetId, selectedTilesetAnimationKey)
+            : !optionAsset.frameGrid && !isAudio;
+        elements.currentTouchUpButton.textContent = isDesignerTilesetAsset(optionAsset)
+            ? "Edit tileset..."
+            : "Touch up...";
         elements.currentTouchUpButton.hidden =
             isAudio ||
+                isTilesetAnimation ||
                 Boolean(optionAsset.frameGrid) ||
                 option.mimeType === "image/svg+xml";
         elements.currentRevertButton.hidden = false;
@@ -189,6 +513,262 @@ export function installAiAssetDesigner(options) {
             elements.currentImage.alt = `${readableAssetName(selectedTargetAssetId)} ${label}`;
         }
     };
+    const syncMixTilesetButton = () => {
+        const session = displayedOptions;
+        const asset = session ? manifest.assets[session.assetId] : undefined;
+        const baseVisible = Boolean(session &&
+            session.assetId === selectedTargetAssetId &&
+            session.generated.length === 3 &&
+            isDesignerTilesetAsset(asset) &&
+            !selectedTilesetAnimationKey);
+        const animationSession = displayedTilesetAnimationOptions;
+        const animationVisible = Boolean(animationSession &&
+            animationSession.assetId === selectedTargetAssetId &&
+            animationSession.animationKey === selectedTilesetAnimationKey &&
+            animationSession.generated.length === 3);
+        const visible = baseVisible || animationVisible;
+        elements.mixTilesetButton.textContent = animationVisible ? "Mix tilesets" : "Mix tileset";
+        elements.mixTilesetButton.hidden = !visible;
+        elements.mixTilesetButton.disabled = !visible || Boolean(activeGeneration || activePromotionId !== undefined || mixingTileset);
+    };
+    const renderGeneratedOptions = (assetId, generated) => {
+        stopTilesetAnimationOptionPreviews?.();
+        stopTilesetAnimationOptionPreviews = undefined;
+        displayedTilesetAnimationOptions = undefined;
+        displayedOptions = {
+            assetId,
+            generated: [...generated]
+        };
+        renderOptions({
+            elements,
+            generated,
+            scene: options.scene,
+            manifest,
+            assetId,
+            designerOptions: options,
+            onPreview: options.onPreview,
+            onSelected(option) {
+                selectedOption = option;
+                rememberPendingOption(assetId, option);
+                showOptionInCurrentPreview(option);
+                elements.promoteButton.disabled = activePromotionId !== undefined;
+            }
+        });
+        syncMixTilesetButton();
+    };
+    const currentTilesetOption = async (assetId, definition) => {
+        const asset = manifest.assets[assetId];
+        const pending = pendingOptions.get(assetId)?.option;
+        const activeVersion = asset.versions[asset.activeVersion];
+        const dataUrl = pending?.dataUrl ??
+            await imageSourceToDataUrl(resolveAssetUrl(activeVersion.file));
+        const tilesetSourceDataUrl = pending
+            ? pending.tilesetSourceDataUrl
+            : activeVersion.tilesetSourceFile
+                ? await imageSourceToDataUrl(resolveAssetUrl(activeVersion.tilesetSourceFile))
+                : undefined;
+        return {
+            ...(pending ?? {
+                index: -1,
+                dataUrl,
+                mimeType: mimeTypeFromDataUrl(dataUrl),
+                prompt: activeVersion.prompt ?? asset.prompt,
+                model: activeVersion.model,
+                revisedPrompt: activeVersion.revisedPrompt,
+                dimensions: asset.dimensions,
+                settings: activeVersion.settings ?? asset.settings
+            }),
+            dataUrl,
+            tilesetSourceDataUrl,
+            tilesetTransforms: tilesetSourceDataUrl
+                ? cloneTilesetTransforms(pending ? pending.tilesetTransforms : activeVersion.tilesetTransforms)
+                : undefined,
+            tileset: assetWithTilesetAnimationDefinition(asset, definition).tileset
+        };
+    };
+    const activeTilesetAnimationFrames = (assetId, animationKey) => {
+        const asset = manifest.assets[assetId];
+        const activeVersion = asset?.versions[asset.activeVersion];
+        const files = activeVersion?.tilesetAnimations?.[animationKey]?.files;
+        if (!asset || !activeVersion || !files?.length) {
+            return Promise.reject(new Error(`Generate ${readableAssetName(animationKey)} animation frames before promoting its prompts.`));
+        }
+        const cacheKey = `${assetId}\u0000${asset.activeVersion}\u0000${animationKey}`;
+        const existing = tilesetAnimationFrameDrafts.get(cacheKey);
+        if (existing)
+            return existing;
+        const loading = Promise.all(files.map((file) => imageSourceToDataUrl(resolveAssetUrl(file))));
+        tilesetAnimationFrameDrafts.set(cacheKey, loading);
+        void loading.catch(() => {
+            if (tilesetAnimationFrameDrafts.get(cacheKey) === loading) {
+                tilesetAnimationFrameDrafts.delete(cacheKey);
+            }
+        });
+        return loading;
+    };
+    const promptOnlyTilesetAnimationDefinition = (assetId, animationKey, pending = pendingOptions.get(assetId)) => {
+        const tiles = tilesetAnimationPromptDefinitions(assetId, animationKey);
+        const declared = tilesetAnimationForKey(manifest.assets[assetId], animationKey);
+        const pendingDefinition = pending?.option.tileset?.animations?.find((animation) => animation.key === animationKey);
+        const source = pendingDefinition ?? declared;
+        return source && tiles ? { ...source, tiles } : undefined;
+    };
+    const stageTilesetAnimationPromptDraft = async (assetId, animationKey) => {
+        const revision = tilesetAnimationPromptRevision + 1;
+        tilesetAnimationPromptRevision = revision;
+        if (!promptOnlyTilesetAnimationDefinition(assetId, animationKey)) {
+            elements.promoteButton.disabled = true;
+            return;
+        }
+        try {
+            const pendingBeforeLoad = pendingOptions.get(assetId);
+            const loadedFrames = pendingBeforeLoad?.tilesetAnimations?.[animationKey] ??
+                await activeTilesetAnimationFrames(assetId, animationKey);
+            if (revision !== tilesetAnimationPromptRevision ||
+                selectedTargetAssetId !== assetId ||
+                selectedTilesetAnimationKey !== animationKey)
+                return;
+            const pending = pendingOptions.get(assetId);
+            const frames = pending?.tilesetAnimations?.[animationKey] ?? loadedFrames;
+            const definition = promptOnlyTilesetAnimationDefinition(assetId, animationKey, pending);
+            if (!definition) {
+                elements.promoteButton.disabled = true;
+                return;
+            }
+            if (frames.length !== definition.frameCount) {
+                throw new Error(`${readableAssetName(animationKey)} has ${frames.length} current frames, but ` +
+                    `${definition.frameCount} are configured. Generate new frames before promoting.`);
+            }
+            const option = await currentTilesetOption(assetId, definition);
+            if (revision !== tilesetAnimationPromptRevision ||
+                selectedTargetAssetId !== assetId ||
+                selectedTilesetAnimationKey !== animationKey)
+                return;
+            const latestPending = pendingOptions.get(assetId);
+            selectedOption = option;
+            editedCurrentOption = option;
+            rememberPendingOption(assetId, option, {
+                inheritAnimations: latestPending?.inheritAnimations,
+                previewedVersionName: latestPending?.previewedVersionName,
+                tilesetAnimations: {
+                    ...(latestPending?.tilesetAnimations ?? {}),
+                    [animationKey]: latestPending?.tilesetAnimations?.[animationKey] ?? frames
+                },
+                animationOnlyKey: latestPending?.animationOnlyKey ??
+                    (latestPending ? undefined : animationKey)
+            });
+            if (displayedTilesetAnimationOptions?.assetId === assetId &&
+                displayedTilesetAnimationOptions.animationKey === animationKey) {
+                displayedTilesetAnimationOptions.animation = {
+                    ...displayedTilesetAnimationOptions.animation,
+                    tiles: definition.tiles
+                };
+            }
+            elements.promoteButton.disabled = activePromotionId !== undefined;
+            setStatus(elements, "Animation prompt changes ready. Promote to save them.", "info");
+        }
+        catch (error) {
+            if (revision !== tilesetAnimationPromptRevision ||
+                selectedTargetAssetId !== assetId ||
+                selectedTilesetAnimationKey !== animationKey)
+                return;
+            elements.promoteButton.disabled = !selectedOption || activePromotionId !== undefined;
+            setStatus(elements, `Could not stage animation prompts. ${errorMessage(error)}`, "error");
+        }
+    };
+    const selectTilesetAnimationFrames = async (assetId, definition, frames, card) => {
+        const currentPrompts = tilesetAnimationPromptDefinitions(assetId, definition.key);
+        const selectedDefinition = currentPrompts
+            ? { ...definition, tiles: currentPrompts }
+            : definition;
+        const option = await currentTilesetOption(assetId, selectedDefinition);
+        const pending = pendingOptions.get(assetId);
+        selectedOption = option;
+        rememberPendingOption(assetId, option, {
+            inheritAnimations: pending?.inheritAnimations,
+            previewedVersionName: pending?.previewedVersionName,
+            tilesetAnimations: {
+                ...(pending?.tilesetAnimations ?? {}),
+                [selectedDefinition.key]: frames
+            },
+            animationOnlyKey: pending?.animationOnlyKey ??
+                (pending ? undefined : selectedDefinition.key)
+        });
+        for (const item of elements.options.querySelectorAll(".ai-game-assets-designer__option")) {
+            item.classList.toggle("is-selected", item === card);
+        }
+        elements.currentPreview.classList.remove("is-selected");
+        elements.promoteButton.disabled = activePromotionId !== undefined;
+        await previewTilesetAnimationFrames(assetId, selectedDefinition.key, frames, assetWithTilesetAnimationDefinition(manifest.assets[assetId], selectedDefinition));
+    };
+    const renderTilesetAnimationOptions = (assetId, definition, generated) => {
+        stopTilesetAnimationOptionPreviews?.();
+        displayedOptions = undefined;
+        displayedTilesetAnimationOptions = {
+            assetId,
+            animationKey: definition.key,
+            animation: definition,
+            generated: [...generated]
+        };
+        elements.options.replaceChildren();
+        elements.options.classList.remove("is-audio");
+        const stops = [];
+        const delayForFrame = (index) => (definition.frameTimings?.[index]?.delayMs ??
+            Math.round(1000 / Math.max(1, definition.frameRate)));
+        for (const candidate of generated) {
+            const card = document.createElement("div");
+            card.className = "ai-game-assets-designer__option";
+            const button = document.createElement("button");
+            button.type = "button";
+            button.className = "ai-game-assets-designer__option-select";
+            button.setAttribute("aria-label", `Select animation option ${candidate.index + 1}`);
+            const image = document.createElement("img");
+            image.alt = `${assetId} animation option ${candidate.index + 1}`;
+            const label = document.createElement("span");
+            label.textContent = `Option ${candidate.index + 1}`;
+            button.append(image, label);
+            card.append(button);
+            elements.options.append(card);
+            let frame = 0;
+            let timeout;
+            let stopped = false;
+            const animate = () => {
+                if (stopped || candidate.frames.length === 0)
+                    return;
+                image.src = candidate.frames[frame % candidate.frames.length].dataUrl;
+                const currentFrame = frame;
+                frame += 1;
+                timeout = window.setTimeout(animate, delayForFrame(currentFrame));
+            };
+            animate();
+            stops.push(() => {
+                stopped = true;
+                if (timeout !== undefined)
+                    window.clearTimeout(timeout);
+            });
+            button.addEventListener("click", async () => {
+                setStatus(elements, `Applying animation option ${candidate.index + 1}...`, "busy");
+                try {
+                    await selectTilesetAnimationFrames(assetId, definition, candidate.frames.map((item) => item.dataUrl), card);
+                    setStatus(elements, `Previewing animation option ${candidate.index + 1}. Promote to save it.`, "info");
+                }
+                catch (error) {
+                    setStatus(elements, `Could not preview animation. ${errorMessage(error)}`, "error");
+                }
+            });
+        }
+        stopTilesetAnimationOptionPreviews = () => stops.forEach((stop) => stop());
+        syncMixTilesetButton();
+    };
+    const clearGeneratedOptions = () => {
+        stopTilesetAnimationOptionPreviews?.();
+        stopTilesetAnimationOptionPreviews = undefined;
+        displayedTilesetAnimationOptions = undefined;
+        displayedOptions = undefined;
+        elements.options.innerHTML = "";
+        elements.options.classList.remove("is-audio");
+        syncMixTilesetButton();
+    };
     const restoreActivePreview = () => {
         const asset = manifest.assets[selectedTargetAssetId];
         const activeVersion = asset.versions[asset.activeVersion];
@@ -199,18 +779,28 @@ export function installAiAssetDesigner(options) {
         editedCurrentOption = undefined;
         previewedVersionName = undefined;
         selectedOption = undefined;
+        forgetPendingOption(selectedTargetAssetId);
         for (const item of elements.options.querySelectorAll(".ai-game-assets-designer__option")) {
             item.classList.remove("is-selected");
         }
         const activeVersionSource = resolveAssetUrl(activeVersion.file);
         const isAudio = isAudioAsset(asset);
+        const isTilesetAnimation = Boolean(selectedTilesetAnimationKey && isDesignerTilesetAsset(asset));
         elements.currentPreview.classList.add("is-selected");
         elements.currentPreview.setAttribute("aria-label", `Preview active ${readableAssetName(selectedTargetAssetId)} version`);
         elements.currentAnimation.hidden = true;
-        elements.currentAnimationButton.textContent = "Edit...";
-        elements.currentAnimationButton.hidden = !asset.frameGrid && !isAudio;
+        elements.currentAnimationButton.textContent = isTilesetAnimation
+            ? "Edit animation..."
+            : "Edit...";
+        elements.currentAnimationButton.hidden = isTilesetAnimation && selectedTilesetAnimationKey
+            ? !hasEditableTilesetAnimationFrames(selectedTargetAssetId, selectedTilesetAnimationKey)
+            : !asset.frameGrid && !isAudio;
+        elements.currentTouchUpButton.textContent = isDesignerTilesetAsset(asset)
+            ? "Edit tileset..."
+            : "Touch up...";
         elements.currentTouchUpButton.hidden =
             isAudio ||
+                isTilesetAnimation ||
                 Boolean(asset.frameGrid) ||
                 normalizeAssetFormat(asset.settings?.format) === "svg" ||
                 isSvgSource(activeVersion.file);
@@ -225,21 +815,28 @@ export function installAiAssetDesigner(options) {
                 label: readableAssetName(selectedTargetAssetId),
                 playback: activeVersion.audioPlayback
             });
-            options.onPreview(selectedTargetAssetId, activeVersionSource, asset);
+            (options.onAssetReady ?? options.onPreview)(selectedTargetAssetId, activeVersionSource, asset);
+            setStatus(elements, "Reverted preview to the active version.", "info");
         }
         else {
             elements.currentAudio.innerHTML = "";
             elements.currentImage.src = activeVersionSource;
             elements.currentImage.alt = `${readableAssetName(selectedTargetAssetId)} active version`;
+            setStatus(elements, "Reverting preview in the game...", "busy");
             previewCurrentAsset({
                 scene: options.scene,
                 manifest,
                 assetId: selectedTargetAssetId,
                 src: activeVersionSource,
-                onPreview: options.onPreview
+                onPreview(assetId, textureKey, previewAsset) {
+                    (options.onAssetReady ?? options.onPreview)(assetId, textureKey, previewAsset);
+                    setStatus(elements, "Reverted preview to the active version.", "info");
+                },
+                onError(error) {
+                    setStatus(elements, `Could not revert the game preview. ${error.message}`, "error");
+                }
             });
         }
-        setStatus(elements, "Reverted preview to the active version.", "info");
     };
     const syncAsset = (assetId) => {
         syncAnimationChoices(assetId);
@@ -335,6 +932,7 @@ export function installAiAssetDesigner(options) {
             selectedAssetId,
             assetIds: visibleAssetIds(),
             onSelect(assetId) {
+                invalidatePanelWork();
                 selectedAssetId = assetId;
                 syncAsset(selectedAssetId);
             }
@@ -362,13 +960,117 @@ export function installAiAssetDesigner(options) {
         activeGeneration = undefined;
         elements.regenerateButton.textContent = "Regenerate";
         unlockGenerationStatus();
+        elements.promoteButton.disabled = !selectedOption || activePromotionId !== undefined;
+        syncPromoteAllButton();
+        syncMixTilesetButton();
         return true;
     };
+    const invalidatePanelWork = () => {
+        panelRevision += 1;
+        if (!activeGeneration)
+            return;
+        const { controller, id } = activeGeneration;
+        controller.abort();
+        finishGeneration(id);
+    };
+    const regenerateTilesetAnimation = async (animationKey) => {
+        const assetId = selectedTargetAssetId;
+        const workflowPanelRevision = panelRevision;
+        const isWorkflowPanelCurrent = () => panelRevision === workflowPanelRevision &&
+            selectedTargetAssetId === assetId &&
+            selectedTilesetAnimationKey === animationKey;
+        const asset = manifest.assets[assetId];
+        const animation = tilesetAnimationForKey(asset, animationKey);
+        const activeVersion = asset?.versions[asset.activeVersion];
+        const definition = tilesetAnimationDefinitionFromInputs(assetId, animationKey);
+        if (!asset || !animation || !activeVersion?.file) {
+            setStatus(elements, `Tileset animation "${animationKey}" is not ready to generate.`, "error");
+            return;
+        }
+        if (!definition) {
+            setStatus(elements, "Add an animation prompt for every tile before generating.", "error");
+            return;
+        }
+        const controller = new AbortController();
+        const currentGenerationId = generationId + 1;
+        generationId = currentGenerationId;
+        activeGeneration = { controller, id: currentGenerationId };
+        syncPromoteAllButton();
+        elements.regenerateButton.textContent = "Cancel generation";
+        clearGeneratedOptions();
+        elements.promoteButton.disabled = true;
+        setStatus(elements, "Generating options...", "busy");
+        lockGenerationStatus();
+        try {
+            const candidates = await client.generateTilesetAnimationStream({
+                assetId,
+                animationKey,
+                frameCount: definition.frameCount,
+                tiles: definition.tiles,
+                count: 3
+            }, (candidate) => {
+                if (activeGeneration?.id !== currentGenerationId)
+                    return;
+                if (candidate.frames.length !== definition.frameCount) {
+                    throw new Error(`Requested ${definition.frameCount} frames, but the generation server returned ` +
+                        `${candidate.frames.length} for option ${candidate.index + 1}. ` +
+                        "Restart the AI asset dev server and regenerate the options.");
+                }
+                const session = displayedTilesetAnimationOptions;
+                const generated = [
+                    ...(session?.assetId === assetId && session.animationKey === animationKey
+                        ? session.generated
+                        : []),
+                    candidate
+                ].sort((left, right) => left.index - right.index);
+                renderTilesetAnimationOptions(assetId, definition, generated);
+                setStatus(elements, `Generated option ${candidate.index + 1}. Waiting for all 3 animation sequences...`, "busy");
+            }, {
+                signal: controller.signal
+            });
+            if (!finishGeneration(currentGenerationId))
+                return;
+            if (candidates.length !== 3) {
+                throw new Error(`Expected 3 tileset animation candidates, received ${candidates.length}.`);
+            }
+            const mismatchedCandidate = candidates.find((candidate) => (candidate.frames.length !== definition.frameCount));
+            if (mismatchedCandidate) {
+                throw new Error(`Requested ${definition.frameCount} frames, but option ` +
+                    `${mismatchedCandidate.index + 1} contains ${mismatchedCandidate.frames.length}. ` +
+                    "Regenerate the options for the current frame count.");
+            }
+            if (!isWorkflowPanelCurrent())
+                return;
+            renderTilesetAnimationOptions(assetId, definition, candidates);
+            setStatus(elements, "Three animation options ready. Preview one or mix tilesets.", "info");
+        }
+        catch (error) {
+            finishGeneration(currentGenerationId);
+            if (isAbortError(error)) {
+                if (isWorkflowPanelCurrent()) {
+                    setStatus(elements, "Generation cancelled.", "info");
+                }
+                return;
+            }
+            if (isWorkflowPanelCurrent()) {
+                if (displayedTilesetAnimationOptions?.assetId === assetId &&
+                    displayedTilesetAnimationOptions.animationKey === animationKey) {
+                    clearGeneratedOptions();
+                }
+                setStatus(elements, `Tileset animation generation failed. ${errorMessage(error)}`, "error");
+            }
+        }
+        finally {
+            finishGeneration(currentGenerationId);
+        }
+    };
     elements.assetSelect.addEventListener("change", () => {
+        invalidatePanelWork();
         selectedAssetId = elements.assetSelect.value;
         syncAsset(selectedAssetId);
     });
     elements.targetSelect.addEventListener("change", () => {
+        invalidatePanelWork();
         selectedTargetId = elements.targetSelect.value || undefined;
         syncAsset(selectedAssetId);
         setStatus(elements, selectedTargetId
@@ -376,9 +1078,27 @@ export function installAiAssetDesigner(options) {
             : "Editing default target.", "info");
     });
     elements.animationSelect.addEventListener("change", () => {
+        invalidatePanelWork();
+        if (isDesignerTilesetAsset(manifest.assets[selectedTargetAssetId])) {
+            const prefix = "tileset:animation:";
+            selectedTilesetAnimationKey = elements.animationSelect.value.startsWith(prefix)
+                ? decodeURIComponent(elements.animationSelect.value.slice(prefix.length))
+                : undefined;
+            syncTargetAsset(selectedTargetAssetId);
+            return;
+        }
+        selectedTilesetAnimationKey = undefined;
         selectedTargetAssetId = elements.animationSelect.value;
         syncTargetAsset(selectedTargetAssetId);
     });
+    const syncTilesetPromptCount = () => {
+        const asset = manifest.assets[selectedTargetAssetId];
+        if (isDesignerTilesetAsset(asset) && !selectedTilesetAnimationKey) {
+            renderTilesetPromptInputs(selectedTargetAssetId);
+        }
+    };
+    elements.frameCountInput.addEventListener("change", syncTilesetPromptCount);
+    elements.frameCountInput.addEventListener("blur", syncTilesetPromptCount);
     elements.formatSelect.addEventListener("change", () => {
         if (canEditGenerationFormat(manifest, selectedAssetId, selectedTargetAssetId)) {
             formatDrafts.set(selectedTargetAssetId, normalizeAssetFormat(elements.formatSelect.value));
@@ -464,57 +1184,212 @@ export function installAiAssetDesigner(options) {
         event.preventDefault();
         elements.currentPreview.click();
     });
+    elements.mixTilesetButton.addEventListener("click", async () => {
+        const session = displayedOptions;
+        const animationSession = displayedTilesetAnimationOptions;
+        const assetId = selectedTargetAssetId;
+        const asset = manifest.assets[assetId];
+        const activeVersion = asset?.versions[asset.activeVersion];
+        if (animationSession &&
+            animationSession.assetId === assetId &&
+            animationSession.animationKey === selectedTilesetAnimationKey &&
+            animationSession.generated.length === 3 &&
+            asset?.tileset &&
+            activeVersion?.file &&
+            !mixingTileset &&
+            !activeGeneration &&
+            activePromotionId === undefined) {
+            const mixPanelRevision = panelRevision;
+            const definition = animationSession.animation;
+            const draftAsset = assetWithTilesetAnimationDefinition(asset, definition);
+            const pending = pendingOptions.get(assetId);
+            mixingTileset = true;
+            syncMixTilesetButton();
+            setStatus(elements, "Opening tileset animation mixer...", "busy");
+            try {
+                const baseSheetSrc = pending?.option.dataUrl ??
+                    await imageSourceToDataUrl(resolveAssetUrl(activeVersion.file));
+                const currentFrames = pending?.tilesetAnimations?.[definition.key] ??
+                    await Promise.all((activeVersion.tilesetAnimations?.[definition.key]?.files ?? [])
+                        .map((file) => imageSourceToDataUrl(resolveAssetUrl(file))));
+                if (panelRevision !== mixPanelRevision ||
+                    selectedTargetAssetId !== assetId ||
+                    selectedTilesetAnimationKey !== definition.key)
+                    return;
+                const mixed = await openTilesetAnimationMixerDialog({
+                    root: elements.root,
+                    asset: draftAsset,
+                    assetId,
+                    animationKey: definition.key,
+                    baseSheetSrc,
+                    baseAnimationFrameSrcs: currentFrames,
+                    candidates: animationSession.generated,
+                    tilePrompts: definition.tiles,
+                    regenerateTile: async (tile, currentTileSrc) => {
+                        const prompt = definition.tiles?.[tile];
+                        if (!prompt)
+                            throw new Error(`Tile ${tile + 1} requires an animation prompt.`);
+                        return client.generateTilesetAnimationStream({
+                            assetId,
+                            animationKey: definition.key,
+                            count: 3,
+                            frameCount: definition.frameCount,
+                            tiles: [prompt],
+                            tileset: tilesetTileGenerationOverride(asset.tileset, tile),
+                            baseDataUrl: currentTileSrc,
+                            styleGuide: await styleGuideRequest(styleGuideDraft)
+                        }, () => undefined);
+                    }
+                });
+                if (panelRevision !== mixPanelRevision ||
+                    selectedTargetAssetId !== assetId ||
+                    selectedTilesetAnimationKey !== definition.key)
+                    return;
+                if (!mixed) {
+                    setStatus(elements, "Tileset animation mixing cancelled. The three options are still available.", "info");
+                    return;
+                }
+                await selectTilesetAnimationFrames(assetId, definition, mixed.frames);
+                setStatus(elements, "Mixed tileset animation ready. Promote to save the selected tile combination.", "success");
+            }
+            catch (error) {
+                setStatus(elements, `Could not mix tileset animation. ${errorMessage(error)}`, "error");
+            }
+            finally {
+                mixingTileset = false;
+                syncMixTilesetButton();
+            }
+            return;
+        }
+        if (mixingTileset ||
+            activeGeneration ||
+            activePromotionId !== undefined ||
+            !session ||
+            session.assetId !== assetId ||
+            session.generated.length !== 3 ||
+            !isDesignerTilesetAsset(asset) ||
+            selectedTilesetAnimationKey ||
+            !activeVersion?.file) {
+            return;
+        }
+        const mixPanelRevision = panelRevision;
+        const candidates = [...session.generated].sort((left, right) => left.index - right.index);
+        mixingTileset = true;
+        syncMixTilesetButton();
+        setStatus(elements, "Opening tileset mixer...", "busy");
+        try {
+            const currentOption = editedCurrentOption;
+            const activeSheetSrc = currentOption?.dataUrl ??
+                await imageSourceToDataUrl(resolveAssetUrl(activeVersion.file));
+            const current = resolveTilesetBaseMixCurrent(asset, activeSheetSrc, currentOption);
+            if (panelRevision !== mixPanelRevision ||
+                selectedTargetAssetId !== assetId ||
+                selectedTilesetAnimationKey) {
+                return;
+            }
+            const mixed = await openTilesetBaseMixerDialog({
+                root: elements.root,
+                asset: current.asset,
+                assetId,
+                baseSheetSrc: current.sheetSrc,
+                candidates,
+                regenerateTile: (tile, tileset, currentTileSrc) => regenerateTilesetTile(assetId, tile, tileset, currentTileSrc)
+            });
+            if (panelRevision !== mixPanelRevision ||
+                selectedTargetAssetId !== assetId ||
+                selectedTilesetAnimationKey) {
+                return;
+            }
+            if (!mixed) {
+                setStatus(elements, "Tileset mixing cancelled. The three options are still available.", "info");
+                return;
+            }
+            const template = candidates[0];
+            const mixedOption = createMixedTilesetOption(template, mixed, template.prompt || asset.prompt, Math.max(...candidates.map((option) => option.index)) + 1);
+            selectedOption = mixedOption;
+            rememberPendingOption(assetId, mixedOption);
+            showOptionInCurrentPreview(mixedOption, "mixed tileset");
+            elements.currentPreview.classList.add("is-selected");
+            elements.promoteButton.disabled = activePromotionId !== undefined;
+            previewOption({
+                scene: options.scene,
+                manifest,
+                assetId,
+                option: mixedOption,
+                onPreview: options.onPreview
+            });
+            setStatus(elements, "Mixed tileset ready. Promote to save the selected tile combination.", "success");
+        }
+        catch (error) {
+            setStatus(elements, `Could not mix tileset. ${errorMessage(error)}`, "error");
+        }
+        finally {
+            mixingTileset = false;
+            syncMixTilesetButton();
+        }
+    });
     elements.regenerateButton.addEventListener("click", async () => {
         if (activeGeneration) {
             activeGeneration.controller.abort();
             activeGeneration = undefined;
             elements.regenerateButton.textContent = "Regenerate";
             unlockGenerationStatus();
+            elements.promoteButton.disabled = !selectedOption || activePromotionId !== undefined;
+            syncPromoteAllButton();
             setStatus(elements, "Generation cancelled.", "info");
             return;
         }
+        if (selectedTilesetAnimationKey) {
+            await regenerateTilesetAnimation(selectedTilesetAnimationKey);
+            return;
+        }
         const controller = new AbortController();
         const currentGenerationId = generationId + 1;
         const generationAssetId = selectedTargetAssetId;
+        const generationAsset = manifest.assets[generationAssetId];
         const generationFormat = effectiveGenerationFormat(manifest, formatDrafts, selectedAssetId, generationAssetId);
+        const generationOverrides = generationOverridesFromInputs(elements, generationAsset, generationFormat);
+        const isBaseTilesetGeneration = isDesignerTilesetAsset(generationAsset);
+        if (isBaseTilesetGeneration && generationOverrides.tileset) {
+            renderTilesetPromptInputs(generationAssetId);
+            const tileCount = generationOverrides.tileset.tileCount ??
+                effectiveTilesetTileCount(generationAsset);
+            const tiles = tilesetPromptDefinitions(generationAssetId, tileCount);
+            if (!tiles) {
+                setStatus(elements, "Add a prompt for every tile before generating.", "error");
+                return;
+            }
+            generationOverrides.tileset = {
+                ...generationOverrides.tileset,
+                tiles
+            };
+        }
         generationId = currentGenerationId;
         activeGeneration = { controller, id: currentGenerationId };
+        syncPromoteAllButton();
         setStatus(elements, "Generating options...", "busy");
         lockGenerationStatus();
         elements.promoteButton.disabled = true;
         elements.regenerateButton.textContent = "Cancel";
-        elements.options.innerHTML = "";
-        selectedOption = undefined;
+        clearGeneratedOptions();
+        selectedOption = editedCurrentOption;
         const streamedOptions = [];
         try {
             const generationRequest = {
                 assetId: generationAssetId,
-                prompt: elements.promptInput.value,
+                prompt: isBaseTilesetGeneration ? undefined : elements.promptInput.value,
                 count: options.optionCount ?? 3,
                 format: generationFormat,
                 audioSettings: audioGenerationOverridesFromInputs(elements, manifest.assets[generationAssetId]),
                 voiceSettings: voiceGenerationOverridesFromInputs(elements, manifest.assets[generationAssetId]),
                 styleGuide: await styleGuideRequest(styleGuideDraft),
-                ...generationOverridesFromInputs(elements, manifest.assets[generationAssetId], generationFormat)
+                ...generationOverrides
             };
             await client.generateStream(generationRequest, (option) => {
                 if (activeGeneration?.id !== currentGenerationId)
                     return;
                 streamedOptions.push(option);
-                renderOptions({
-                    elements,
-                    generated: [...streamedOptions].sort((left, right) => left.index - right.index),
-                    scene: options.scene,
-                    manifest,
-                    assetId: generationAssetId,
-                    designerOptions: options,
-                    onPreview: options.onPreview,
-                    onSelected(selected) {
-                        selectedOption = selected;
-                        showOptionInCurrentPreview(selected);
-                        elements.promoteButton.disabled = false;
-                    }
-                });
+                renderGeneratedOptions(generationAssetId, [...streamedOptions].sort((left, right) => left.index - right.index));
             }, {
                 signal: controller.signal
             });
@@ -522,7 +1397,11 @@ export function installAiAssetDesigner(options) {
                 return;
             }
             finishGeneration(currentGenerationId);
-            setStatus(elements, streamedOptions.length > 0 ? "Pick an option to preview it." : "Generation finished with no options.", streamedOptions.length > 0 ? "info" : "error");
+            setStatus(elements, streamedOptions.length === 3 && isBaseTilesetGeneration
+                ? "Three tileset options ready. Preview one or mix tiles."
+                : streamedOptions.length > 0
+                    ? "Pick an option to preview it."
+                    : "Generation finished with no options.", streamedOptions.length > 0 ? "info" : "error");
         }
         catch (error) {
             if (isAbortError(error)) {
@@ -530,7 +1409,7 @@ export function installAiAssetDesigner(options) {
             }
             finishGeneration(currentGenerationId);
             if (streamedOptions.length === 0) {
-                elements.options.innerHTML = "";
+                clearGeneratedOptions();
             }
             setStatus(elements, `Generation failed. ${errorMessage(error)}`, "error");
         }
@@ -550,23 +1429,23 @@ export function installAiAssetDesigner(options) {
                 elements,
                 prompt: elements.promptInput.value
             });
-            renderOptions({
-                elements,
-                generated: [uploadedOption],
-                scene: options.scene,
-                manifest,
-                assetId: selectedTargetAssetId,
-                designerOptions: options,
-                onPreview: options.onPreview,
-                onSelected(option) {
-                    selectedOption = option;
-                    showOptionInCurrentPreview(option);
-                    elements.promoteButton.disabled = false;
+            if (isDesignerTilesetAsset(asset) && uploadedOption.tileset) {
+                const tileCount = uploadedOption.tileset.tileCount ??
+                    uploadedOption.tileset.columns * uploadedOption.tileset.rows;
+                const tiles = tilesetPromptDefinitions(selectedTargetAssetId, tileCount);
+                if (!tiles) {
+                    throw new Error("Add a prompt for every tile before uploading a tileset.");
                 }
-            });
+                uploadedOption.tileset = {
+                    ...uploadedOption.tileset,
+                    tiles
+                };
+            }
+            renderGeneratedOptions(selectedTargetAssetId, [uploadedOption]);
             selectedOption = uploadedOption;
+            rememberPendingOption(selectedTargetAssetId, uploadedOption);
             showOptionInCurrentPreview(uploadedOption);
-            elements.promoteButton.disabled = false;
+            elements.promoteButton.disabled = activePromotionId !== undefined;
             if (isAudioAsset(asset)) {
                 options.onPreview(selectedTargetAssetId, uploadedOption.dataUrl, assetWithGeneratedGeometry(asset, uploadedOption));
             }
@@ -599,7 +1478,7 @@ export function installAiAssetDesigner(options) {
             prompt: elements.promptInput.value,
             format: generationFormat,
             onConfirm: async (deriveRequest) => {
-                elements.options.innerHTML = "";
+                clearGeneratedOptions();
                 elements.promoteButton.disabled = true;
                 selectedOption = undefined;
                 if (deriveRequest.strategy === "scale" ||
@@ -619,23 +1498,11 @@ export function installAiAssetDesigner(options) {
                         mirrorX: deriveRequest.mirrorX,
                         mirrorY: deriveRequest.mirrorY
                     });
-                    renderOptions({
-                        elements,
-                        generated: [option],
-                        scene: options.scene,
-                        manifest,
-                        assetId: derivationAssetId,
-                        designerOptions: options,
-                        onPreview: options.onPreview,
-                        onSelected(selected) {
-                            selectedOption = selected;
-                            showOptionInCurrentPreview(selected);
-                            elements.promoteButton.disabled = false;
-                        }
-                    });
+                    renderGeneratedOptions(derivationAssetId, [option]);
                     selectedOption = option;
+                    rememberPendingOption(derivationAssetId, option);
                     showOptionInCurrentPreview(option);
-                    elements.promoteButton.disabled = false;
+                    elements.promoteButton.disabled = activePromotionId !== undefined;
                     previewOption({
                         scene: options.scene,
                         manifest,
@@ -654,6 +1521,7 @@ export function installAiAssetDesigner(options) {
                     : elements.promptInput.value;
                 generationId = currentGenerationId;
                 activeGeneration = { controller, id: currentGenerationId };
+                syncPromoteAllButton();
                 elements.regenerateButton.textContent = "Cancel";
                 setStatus(elements, "Generating options...", "busy");
                 lockGenerationStatus();
@@ -672,20 +1540,7 @@ export function installAiAssetDesigner(options) {
                         if (activeGeneration?.id !== currentGenerationId)
                             return;
                         streamedOptions.push(option);
-                        renderOptions({
-                            elements,
-                            generated: [...streamedOptions].sort((left, right) => left.index - right.index),
-                            scene: options.scene,
-                            manifest,
-                            assetId: derivationAssetId,
-                            designerOptions: options,
-                            onPreview: options.onPreview,
-                            onSelected(selected) {
-                                selectedOption = selected;
-                                showOptionInCurrentPreview(selected);
-                                elements.promoteButton.disabled = false;
-                            }
-                        });
+                        renderGeneratedOptions(derivationAssetId, [...streamedOptions].sort((left, right) => left.index - right.index));
                     }, {
                         signal: controller.signal
                     });
@@ -705,49 +1560,348 @@ export function installAiAssetDesigner(options) {
         });
     });
     elements.promoteButton.addEventListener("click", async () => {
-        if (!selectedOption)
+        if (!selectedOption || activePromotionId !== undefined)
             return;
+        const currentPromotionId = promotionId + 1;
+        promotionId = currentPromotionId;
+        activePromotionId = currentPromotionId;
+        syncPromoteAllButton();
+        syncMixTilesetButton();
+        const promotedAssetId = selectedTargetAssetId;
+        const promotedOption = selectedOption;
+        const promotedPending = pendingOptions.get(promotedAssetId);
+        const promotionPanelRevision = panelRevision;
+        const promotionSelectedAssetId = selectedAssetId;
+        const promotionTargetId = selectedTargetId;
+        const promotionAnimationKey = selectedTilesetAnimationKey;
+        const inheritAnimations = Boolean(previewedVersionName);
+        const isPromotionPanelCurrent = () => panelRevision === promotionPanelRevision &&
+            selectedAssetId === promotionSelectedAssetId &&
+            selectedTargetId === promotionTargetId &&
+            selectedTargetAssetId === promotedAssetId &&
+            selectedTilesetAnimationKey === promotionAnimationKey;
         const versionName = `promoted-${Date.now()}`;
         setStatus(elements, `Promoting ${versionName}...`, "busy");
         elements.promoteButton.disabled = true;
+        elements.panel.setAttribute("aria-busy", "true");
+        elements.panel.setAttribute("inert", "");
+        let saved;
+        let promotedAsset;
+        let promotedVersionName;
+        try {
+            const animationFrames = promotionAnimationKey
+                ? promotedPending?.tilesetAnimations?.[promotionAnimationKey]
+                : undefined;
+            if (promotionAnimationKey &&
+                animationFrames &&
+                promotedPending?.animationOnlyKey === promotionAnimationKey) {
+                const definition = promotedOption.tileset?.animations?.find((animation) => animation.key === promotionAnimationKey);
+                const animationSaved = await client.saveTilesetAnimation({
+                    assetId: promotedAssetId,
+                    animationKey: promotionAnimationKey,
+                    frames: animationFrames,
+                    definition,
+                    versionName,
+                    notes: "Promoted from a selected or mixed tileset animation preview."
+                });
+                saved = animationSaved;
+                manifest = animationSaved.manifest;
+                promotedAsset = animationSaved.asset;
+                promotedVersionName = animationSaved.versionName;
+            }
+            else {
+                saved = await client.save({
+                    assetId: promotedAssetId,
+                    versionName,
+                    dataUrl: promotedOption.dataUrl,
+                    prompt: promotedOption.prompt,
+                    model: promotedOption.model,
+                    revisedPrompt: promotedOption.revisedPrompt,
+                    dimensions: promotedOption.dimensions,
+                    frameGrid: promotedOption.frameGrid,
+                    tileset: promotedOption.tileset,
+                    tilesetSourceDataUrl: promotedOption.tilesetSourceDataUrl,
+                    tilesetTransforms: promotedOption.tilesetTransforms,
+                    animations: assetWithGeneratedGeometry(manifest.assets[promotedAssetId], promotedOption, { inheritAnimations }).animations,
+                    settings: promotedOption.settings,
+                    audioSettings: promotedOption.audioSettings,
+                    audioPlayback: promotedOption.audioPlayback,
+                    voiceSettings: promotedOption.voiceSettings,
+                    durationSeconds: promotedOption.durationSeconds,
+                    activate: true,
+                    notes: "Promoted from the AI asset designer."
+                });
+                manifest = saved.manifest;
+                promotedAsset = saved.asset;
+                promotedVersionName = saved.versionName;
+                for (const [animationKey, frames] of Object.entries(promotedPending?.tilesetAnimations ?? {})) {
+                    const animationSaved = await client.saveTilesetAnimation({
+                        assetId: promotedAssetId,
+                        animationKey,
+                        frames,
+                        definition: promotedOption.tileset?.animations?.find((animation) => animation.key === animationKey),
+                        notes: "Regenerated with the asset style during promotion."
+                    });
+                    manifest = animationSaved.manifest;
+                    promotedAsset = animationSaved.asset;
+                    promotedVersionName = animationSaved.versionName;
+                }
+            }
+            for (const [animationKey, frames] of Object.entries(promotedPending?.tilesetAnimations ?? {})) {
+                await installTilesetAnimationFrameTextures(frames, promotedAsset, (index) => aiTilesetAnimationTextureKey(promotedAssetId, animationKey, index));
+            }
+        }
+        catch (error) {
+            if (activePromotionId === currentPromotionId) {
+                activePromotionId = undefined;
+            }
+            syncPromoteAllButton();
+            syncMixTilesetButton();
+            elements.panel.removeAttribute("aria-busy");
+            elements.panel.removeAttribute("inert");
+            if (isPromotionPanelCurrent()) {
+                elements.promoteButton.disabled = activePromotionId !== undefined;
+                setStatus(elements, `Promotion failed. ${errorMessage(error)}`, "error");
+            }
+            return;
+        }
+        forgetPendingOption(promotedAssetId);
+        if (isDesignerTilesetAsset(promotedAsset)) {
+            tilesetPromptDrafts.set(promotedAssetId, promotedAsset.tileset?.tiles?.map((tile) => tile.prompt) ?? []);
+        }
+        let promotedTextureKey;
+        let liveRefreshError;
+        const captureLiveRefreshError = (error) => {
+            liveRefreshError ??= error;
+        };
+        if (promotedAsset.activeVersion !== promotedVersionName) {
+            captureLiveRefreshError(new Error(`Saved version "${promotedVersionName}" was not returned as the active version.`));
+        }
+        else if (!isAudioAsset(promotedAsset)) {
+            try {
+                promotedTextureKey = (await installPromotedImageTexture({
+                    scene: options.scene,
+                    manifest,
+                    assetId: promotedAssetId,
+                    src: promotedOption.dataUrl,
+                    assetOverride: promotedAsset
+                })).textureKey;
+            }
+            catch (generatedSourceError) {
+                try {
+                    promotedTextureKey = (await installPromotedImageTexture({
+                        scene: options.scene,
+                        manifest,
+                        assetId: promotedAssetId,
+                        src: resolveAssetUrl(saved.file),
+                        assetOverride: promotedAsset
+                    })).textureKey;
+                }
+                catch (savedSourceError) {
+                    captureLiveRefreshError(new Error(`Could not install the promoted texture. ${errorMessage(savedSourceError)}`, { cause: generatedSourceError }));
+                }
+            }
+        }
         try {
-            await client.save({
-                assetId: selectedTargetAssetId,
-                versionName,
-                dataUrl: selectedOption.dataUrl,
-                prompt: selectedOption.prompt,
-                model: selectedOption.model,
-                revisedPrompt: selectedOption.revisedPrompt,
-                dimensions: selectedOption.dimensions,
-                frameGrid: selectedOption.frameGrid,
-                animations: assetWithGeneratedGeometry(manifest.assets[selectedTargetAssetId], selectedOption, { inheritAnimations: Boolean(previewedVersionName) }).animations,
-                settings: selectedOption.settings,
-                audioSettings: selectedOption.audioSettings,
-                audioPlayback: selectedOption.audioPlayback,
-                voiceSettings: selectedOption.voiceSettings,
-                durationSeconds: selectedOption.durationSeconds,
-                activate: true,
-                notes: "Promoted from the AI asset designer."
-            });
-            manifest = await client.getManifest();
             options.onManifestUpdated?.(manifest);
-            formatDrafts.delete(selectedTargetAssetId);
-            syncTargetAsset(selectedTargetAssetId);
-            if (isAudioAsset(manifest.assets[selectedTargetAssetId])) {
-                const promotedAsset = manifest.assets[selectedTargetAssetId];
-                const promotedVersion = promotedAsset.versions[promotedAsset.activeVersion];
-                if (promotedVersion?.file) {
-                    (options.onAssetReady ?? options.onPreview)(selectedTargetAssetId, resolveAssetUrl(promotedVersion.file), promotedAsset);
+        }
+        catch (error) {
+            captureLiveRefreshError(error);
+        }
+        try {
+            if (promotedTextureKey) {
+                (options.onAssetReady ?? options.onPreview)(promotedAssetId, promotedTextureKey, promotedAsset);
+            }
+            else if (isAudioAsset(promotedAsset)) {
+                (options.onAssetReady ?? options.onPreview)(promotedAssetId, resolveAssetUrl(saved.file), promotedAsset);
+            }
+        }
+        catch (error) {
+            captureLiveRefreshError(error);
+        }
+        formatDrafts.delete(promotedAssetId);
+        if (isPromotionPanelCurrent()) {
+            try {
+                syncTargetAsset(promotedAssetId, { preserveOptions: true });
+            }
+            catch (error) {
+                captureLiveRefreshError(error);
+            }
+            if (liveRefreshError) {
+                setStatus(elements, `Promoted ${promotedAssetId}, but the live game could not refresh. ` +
+                    `Restart to load it. ${errorMessage(liveRefreshError)}`, "error");
+            }
+            else {
+                setStatus(elements, `Promoted ${promotedAssetId} to ${promotedVersionName}.`, "success");
+            }
+        }
+        if (activePromotionId === currentPromotionId) {
+            activePromotionId = undefined;
+        }
+        syncPromoteAllButton();
+        syncMixTilesetButton();
+        elements.panel.removeAttribute("aria-busy");
+        elements.panel.removeAttribute("inert");
+        if (!isPromotionPanelCurrent() && selectedOption) {
+            elements.promoteButton.disabled = activePromotionId !== undefined;
+        }
+        if (options.restartOnPromote) {
+            window.location.reload();
+        }
+    });
+    elements.promoteAllButton.addEventListener("click", async () => {
+        if (pendingOptions.size === 0 || activePromotionId !== undefined)
+            return;
+        const entries = [...pendingOptions.entries()];
+        const currentPromotionId = promotionId + 1;
+        promotionId = currentPromotionId;
+        activePromotionId = currentPromotionId;
+        elements.panel.setAttribute("aria-busy", "true");
+        elements.panel.setAttribute("inert", "");
+        elements.promoteButton.disabled = true;
+        syncPromoteAllButton();
+        syncMixTilesetButton();
+        let promotedCount = 0;
+        let promotionError;
+        const liveRefreshErrors = [];
+        for (const [index, [assetId, pending]] of entries.entries()) {
+            const asset = manifest.assets[assetId];
+            if (!asset) {
+                promotionError = { assetId, error: new Error("Asset no longer exists in the manifest.") };
+                break;
+            }
+            const versionName = `promoted-${Date.now()}-${index + 1}`;
+            setStatus(elements, `Promoting ${readableAssetName(assetId)} (${index + 1}/${entries.length})...`, "busy");
+            try {
+                let saved;
+                let promotedAsset;
+                const animationOnlyFrames = pending.animationOnlyKey
+                    ? pending.tilesetAnimations?.[pending.animationOnlyKey]
+                    : undefined;
+                if (pending.animationOnlyKey && animationOnlyFrames) {
+                    saved = await client.saveTilesetAnimation({
+                        assetId,
+                        animationKey: pending.animationOnlyKey,
+                        frames: animationOnlyFrames,
+                        definition: pending.option.tileset?.animations?.find((animation) => animation.key === pending.animationOnlyKey),
+                        versionName,
+                        notes: "Promoted from a tileset animation preview with Promote all."
+                    });
+                    manifest = saved.manifest;
+                    promotedAsset = saved.asset;
+                }
+                else {
+                    saved = await client.save({
+                        assetId,
+                        versionName,
+                        dataUrl: pending.option.dataUrl,
+                        prompt: pending.option.prompt,
+                        model: pending.option.model,
+                        revisedPrompt: pending.option.revisedPrompt,
+                        dimensions: pending.option.dimensions,
+                        frameGrid: pending.option.frameGrid,
+                        tileset: pending.option.tileset,
+                        tilesetSourceDataUrl: pending.option.tilesetSourceDataUrl,
+                        tilesetTransforms: pending.option.tilesetTransforms,
+                        animations: assetWithGeneratedGeometry(asset, pending.option, {
+                            inheritAnimations: pending.inheritAnimations
+                        }).animations,
+                        settings: pending.option.settings,
+                        audioSettings: pending.option.audioSettings,
+                        audioPlayback: pending.option.audioPlayback,
+                        voiceSettings: pending.option.voiceSettings,
+                        durationSeconds: pending.option.durationSeconds,
+                        activate: true,
+                        notes: "Promoted from the AI asset designer with Promote all."
+                    });
+                    manifest = saved.manifest;
+                    promotedAsset = saved.asset;
+                    for (const [animationKey, frames] of Object.entries(pending.tilesetAnimations ?? {})) {
+                        const animationSaved = await client.saveTilesetAnimation({
+                            assetId,
+                            animationKey,
+                            frames,
+                            definition: pending.option.tileset?.animations?.find((animation) => animation.key === animationKey),
+                            notes: "Regenerated with the asset style during Promote all."
+                        });
+                        manifest = animationSaved.manifest;
+                        promotedAsset = animationSaved.asset;
+                    }
+                }
+                if (isDesignerTilesetAsset(promotedAsset)) {
+                    tilesetPromptDrafts.set(assetId, promotedAsset.tileset?.tiles?.map((tile) => tile.prompt) ?? []);
+                }
+                for (const [animationKey, frames] of Object.entries(pending.tilesetAnimations ?? {})) {
+                    await installTilesetAnimationFrameTextures(frames, promotedAsset, (frameIndex) => aiTilesetAnimationTextureKey(assetId, animationKey, frameIndex));
+                }
+                try {
+                    if (isAudioAsset(promotedAsset)) {
+                        (options.onAssetReady ?? options.onPreview)(assetId, resolveAssetUrl(saved.file), promotedAsset);
+                    }
+                    else {
+                        let installed;
+                        try {
+                            installed = await installPromotedImageTexture({
+                                scene: options.scene,
+                                manifest,
+                                assetId,
+                                src: pending.option.dataUrl,
+                                assetOverride: promotedAsset
+                            });
+                        }
+                        catch {
+                            installed = await installPromotedImageTexture({
+                                scene: options.scene,
+                                manifest,
+                                assetId,
+                                src: resolveAssetUrl(saved.file),
+                                assetOverride: promotedAsset
+                            });
+                        }
+                        (options.onAssetReady ?? options.onPreview)(assetId, installed.textureKey, promotedAsset);
+                    }
                 }
+                catch (error) {
+                    liveRefreshErrors.push({ assetId, error });
+                }
+                pendingOptions.delete(assetId);
+                formatDrafts.delete(assetId);
+                promotedCount += 1;
             }
-            setStatus(elements, `Promoted ${selectedTargetAssetId} to ${versionName}.`, "success");
-            if (options.restartOnPromote) {
-                window.location.reload();
+            catch (error) {
+                promotionError = { assetId, error };
+                break;
             }
         }
+        try {
+            if (promotedCount > 0) {
+                options.onManifestUpdated?.(manifest);
+            }
+            syncTargetAsset(selectedTargetAssetId);
+            renderAssetBrowser();
+        }
         catch (error) {
-            elements.promoteButton.disabled = false;
-            setStatus(elements, `Promotion failed. ${errorMessage(error)}`, "error");
+            liveRefreshErrors.push({ assetId: selectedTargetAssetId, error });
+        }
+        activePromotionId = undefined;
+        elements.panel.removeAttribute("aria-busy");
+        elements.panel.removeAttribute("inert");
+        syncPromoteAllButton();
+        syncMixTilesetButton();
+        if (promotionError) {
+            setStatus(elements, `Promoted ${promotedCount}/${entries.length} assets. ` +
+                `${readableAssetName(promotionError.assetId)} failed: ${errorMessage(promotionError.error)}`, "error");
+        }
+        else if (liveRefreshErrors.length > 0) {
+            const firstError = liveRefreshErrors[0];
+            setStatus(elements, `Promoted all ${promotedCount} assets, but ${readableAssetName(firstError.assetId)} ` +
+                `could not refresh live. Restart to load it. ${errorMessage(firstError.error)}`, "error");
+        }
+        else {
+            setStatus(elements, `Promoted all ${promotedCount} pending assets.`, "success");
+        }
+        if (options.restartOnPromote && promotedCount > 0) {
+            window.location.reload();
         }
     });
     elements.restartButton.addEventListener("click", () => {
@@ -762,30 +1916,45 @@ export function installAiAssetDesigner(options) {
             resolveAssetUrl,
             async onSelect(versionName, option) {
                 const optionAsset = assetWithGeneratedGeometry(asset, option, { inheritAnimations: true });
+                const version = asset.versions[versionName];
+                const tilesetSourceDataUrl = version?.tilesetSourceFile
+                    ? await imageSourceToDataUrl(resolveAssetUrl(version.tilesetSourceFile))
+                    : undefined;
+                const versionOption = {
+                    ...option,
+                    tilesetSourceDataUrl,
+                    tilesetTransforms: tilesetSourceDataUrl
+                        ? cloneTilesetTransforms(version?.tilesetTransforms)
+                        : undefined
+                };
                 for (const item of elements.options.querySelectorAll(".ai-game-assets-designer__option")) {
                     item.classList.remove("is-selected");
                 }
-                selectedOption = option;
-                showOptionInCurrentPreview(option, versionName);
+                selectedOption = versionOption;
+                rememberPendingOption(selectedTargetAssetId, versionOption, {
+                    inheritAnimations: true,
+                    previewedVersionName: versionName
+                });
+                showOptionInCurrentPreview(versionOption, versionName);
                 previewedVersionName = versionName;
                 elements.currentPreview.classList.add("is-selected");
-                elements.promoteButton.disabled = false;
+                elements.promoteButton.disabled = activePromotionId !== undefined;
                 if (isAudioAsset(asset)) {
                     renderAudioPlayer({
                         container: elements.currentAudio,
-                        src: option.dataUrl,
+                        src: versionOption.dataUrl,
                         label: readableAssetName(selectedTargetAssetId),
-                        playback: option.audioPlayback
+                        playback: versionOption.audioPlayback
                     });
-                    options.onPreview(selectedTargetAssetId, option.dataUrl, optionAsset);
+                    options.onPreview(selectedTargetAssetId, versionOption.dataUrl, optionAsset);
                 }
                 else {
-                    elements.currentImage.src = option.dataUrl;
+                    elements.currentImage.src = versionOption.dataUrl;
                     previewImageSource({
                         scene: options.scene,
                         manifest,
                         assetId: selectedTargetAssetId,
-                        src: option.dataUrl,
+                        src: versionOption.dataUrl,
                         textureKey: `ai-version-preview:${selectedTargetAssetId}:${versionName}:${Date.now()}`,
                         assetOverride: optionAsset,
                         onPreview: options.onPreview
@@ -801,6 +1970,7 @@ export function installAiAssetDesigner(options) {
                     });
                     options.onManifestUpdated?.(manifest);
                     if (previewedVersionName === versionName) {
+                        forgetPendingOption(selectedTargetAssetId);
                         syncTargetAsset(selectedTargetAssetId);
                     }
                     else {
@@ -816,6 +1986,113 @@ export function installAiAssetDesigner(options) {
             }
         });
     });
+    const previewBulkOption = (assetId, option) => new Promise((resolve, reject) => {
+        const previewAsset = assetWithGeneratedGeometry(manifest.assets[assetId], option);
+        previewImageSource({
+            scene: options.scene,
+            manifest,
+            assetId,
+            src: option.dataUrl,
+            textureKey: `ai-bulk-preview:${assetId}:${Date.now()}`,
+            assetOverride: previewAsset,
+            onPreview(previewAssetId, textureKey, asset) {
+                options.onPreview(previewAssetId, textureKey, asset);
+                resolve(asset);
+            },
+            onError: reject
+        });
+    });
+    const regenerateAllGraphicalAssets = async (styleGuide) => {
+        if (activeGeneration || activePromotionId !== undefined)
+            return;
+        const assetIds = expandAiAssetIds(manifest, visibleAssetIds(), {
+            includeLinkedAnimations: true,
+            targetId: selectedTargetId
+        }).filter((assetId) => {
+            const asset = manifest.assets[assetId];
+            return Boolean(asset && asset.kind !== "collection" && !isAudioAsset(asset));
+        });
+        if (assetIds.length === 0) {
+            setStatus(elements, "There are no graphical assets to regenerate.", "info");
+            return;
+        }
+        const controller = new AbortController();
+        const currentGenerationId = generationId + 1;
+        generationId = currentGenerationId;
+        activeGeneration = { controller, id: currentGenerationId };
+        clearGeneratedOptions();
+        syncPromoteAllButton();
+        const failures = [];
+        let generatedCount = 0;
+        for (const [index, assetId] of assetIds.entries()) {
+            if (activeGeneration?.id !== currentGenerationId)
+                return;
+            setStatus(elements, `Regenerating ${readableAssetName(assetId)} (${index + 1}/${assetIds.length})...`, "busy");
+            try {
+                const generated = await client.generate({
+                    assetId,
+                    count: 1,
+                    styleGuide
+                }, {
+                    signal: controller.signal
+                });
+                const option = generated[0];
+                if (!option) {
+                    throw new Error("Generation finished without an option.");
+                }
+                rememberPendingOption(assetId, option);
+                const previewAsset = await previewBulkOption(assetId, option);
+                const generatedTilesetAnimations = {};
+                for (const animation of previewAsset.tileset?.animations ?? []) {
+                    setStatus(elements, `Regenerating ${readableAssetName(assetId)} · ` +
+                        `${readableAssetName(animation.key)} (${index + 1}/${assetIds.length})...`, "busy");
+                    const candidates = await client.generateTilesetAnimationStream({
+                        assetId,
+                        animationKey: animation.key,
+                        prompt: animation.prompt,
+                        count: 1,
+                        baseDataUrl: option.dataUrl,
+                        styleGuide
+                    }, () => { }, {
+                        signal: controller.signal
+                    });
+                    const candidate = candidates[0];
+                    if (!candidate || candidate.frames.length !== animation.frameCount) {
+                        throw new Error(`${readableAssetName(animation.key)} did not return its ` +
+                            `${animation.frameCount} required frames.`);
+                    }
+                    const frameDataUrls = candidate.frames.map((frame) => frame.dataUrl);
+                    generatedTilesetAnimations[animation.key] = frameDataUrls;
+                    rememberPendingOption(assetId, option, {
+                        tilesetAnimations: { ...generatedTilesetAnimations }
+                    });
+                    await previewTilesetAnimationFrames(assetId, animation.key, frameDataUrls, previewAsset);
+                }
+                generatedCount += 1;
+                if (selectedTargetAssetId === assetId) {
+                    selectedOption = option;
+                    showOptionInCurrentPreview(option, "regenerated preview");
+                    elements.currentPreview.classList.add("is-selected");
+                    elements.promoteButton.disabled = activePromotionId !== undefined;
+                }
+            }
+            catch (error) {
+                if (isAbortError(error))
+                    return;
+                failures.push({ assetId, error });
+            }
+        }
+        if (!finishGeneration(currentGenerationId))
+            return;
+        if (failures.length > 0) {
+            const firstFailure = failures[0];
+            setStatus(elements, `Regenerated ${generatedCount}/${assetIds.length} graphical assets. ` +
+                `${readableAssetName(firstFailure.assetId)} failed: ${errorMessage(firstFailure.error)}`, "error");
+            return;
+        }
+        setStatus(elements, `Regenerated and previewed ${generatedCount} graphical assets. ` +
+            "Use Promote all to save them.", "success");
+    };
     elements.styleButton.addEventListener("click", () => {
         void openStyleGuideEditor({
             root: elements.root,
@@ -838,16 +2115,62 @@ export function installAiAssetDesigner(options) {
                     setStatus(elements, `Style promotion failed. ${errorMessage(error)}`, "error");
                     throw error;
                 }
+            },
+            async onRegenerateAll(draft) {
+                try {
+                    await regenerateAllGraphicalAssets(await styleGuideRequest(draft));
+                }
+                catch (error) {
+                    setStatus(elements, `Bulk regeneration failed. ${errorMessage(error)}`, "error");
+                }
             }
         });
     });
-    elements.currentAnimationButton.addEventListener("click", (event) => {
+    elements.currentAnimationButton.addEventListener("click", async (event) => {
         event.stopPropagation();
         const asset = manifest.assets[selectedTargetAssetId];
         const activeVersion = asset.versions[asset.activeVersion];
         const sourceOption = editedCurrentOption;
         if (!sourceOption && !activeVersion?.file)
             return;
+        if (selectedTilesetAnimationKey && isDesignerTilesetAsset(asset)) {
+            const assetId = selectedTargetAssetId;
+            const animationKey = selectedTilesetAnimationKey;
+            const definition = promptOnlyTilesetAnimationDefinition(assetId, animationKey);
+            if (!definition) {
+                setStatus(elements, "Add an animation prompt for every tile before editing the animation.", "error");
+                return;
+            }
+            try {
+                const pendingFrames = pendingOptions.get(assetId)?.tilesetAnimations?.[animationKey];
+                const frames = pendingFrames ?? await activeTilesetAnimationFrames(assetId, animationKey);
+                if (frames.length !== definition.frameCount) {
+                    throw new Error(`${readableAssetName(animationKey)} has ${frames.length} current frames, but ` +
+                        `${definition.frameCount} are configured. Generate new frames before editing.`);
+                }
+                const editorAsset = assetWithTilesetAnimationDefinition(asset, definition);
+                await openTilesetAnimationEditor({
+                    root: elements.root,
+                    asset: editorAsset,
+                    assetId,
+                    animationKey,
+                    frames,
+                    onConfirm: async ({ frames: editedFrames, animation }) => {
+                        const currentPrompts = tilesetAnimationPromptDefinitions(assetId, animationKey);
+                        const editedDefinition = currentPrompts
+                            ? { ...animation, tiles: currentPrompts }
+                            : animation;
+                        await selectTilesetAnimationFrames(assetId, editedDefinition, editedFrames);
+                        elements.currentRevertButton.hidden = false;
+                        setStatus(elements, "Tileset animation edits applied. Promote to save them to code.", "success");
+                    }
+                });
+            }
+            catch (error) {
+                setStatus(elements, `Could not edit tileset animation. ${errorMessage(error)}`, "error");
+            }
+            return;
+        }
         if (isAudioAsset(asset)) {
             void openAudioEditor({
                 root: elements.root,
@@ -877,7 +2200,11 @@ export function installAiAssetDesigner(options) {
                         durationSeconds: previousOption?.durationSeconds ?? activeVersion?.durationSeconds
                     };
                     selectedOption = editedCurrentOption;
-                    elements.promoteButton.disabled = false;
+                    rememberPendingOption(selectedTargetAssetId, editedCurrentOption, {
+                        inheritAnimations: Boolean(previewedVersionName),
+                        previewedVersionName
+                    });
+                    elements.promoteButton.disabled = activePromotionId !== undefined;
                     elements.currentRevertButton.hidden = false;
                     options.onPreview(selectedTargetAssetId, dataUrl, optionAsset);
                     renderAudioPlayer({
@@ -928,7 +2255,11 @@ export function installAiAssetDesigner(options) {
                     animations
                 };
                 selectedOption = editedCurrentOption;
-                elements.promoteButton.disabled = false;
+                rememberPendingOption(selectedTargetAssetId, editedCurrentOption, {
+                    inheritAnimations: Boolean(previewedVersionName),
+                    previewedVersionName
+                });
+                elements.promoteButton.disabled = activePromotionId !== undefined;
                 elements.currentRevertButton.hidden = false;
                 previewImageSource({
                     scene: options.scene,
@@ -948,17 +2279,94 @@ export function installAiAssetDesigner(options) {
         const asset = manifest.assets[selectedTargetAssetId];
         const activeVersion = asset.versions[asset.activeVersion];
         const sourceOption = editedCurrentOption;
+        const editorAsset = sourceOption
+            ? assetWithGeneratedGeometry(asset, sourceOption)
+            : asset;
         if ((!sourceOption && !activeVersion?.file) ||
             isAudioAsset(asset) ||
-            asset.frameGrid ||
+            editorAsset.frameGrid ||
             sourceOption?.mimeType === "image/svg+xml" ||
             (!sourceOption && (normalizeAssetFormat(asset.settings?.format) === "svg" ||
                 isSvgSource(activeVersion.file)))) {
             return;
         }
+        if (isDesignerTilesetAsset(editorAsset)) {
+            const assetId = selectedTargetAssetId;
+            const editorTileset = tilesetMetadataForAsset(editorAsset);
+            const draftTiles = tilesetPromptDefinitions(assetId, editorTileset.tileCount ?? editorTileset.columns * editorTileset.rows);
+            const tilesetEditorAsset = draftTiles ? {
+                ...editorAsset,
+                tileset: {
+                    ...editorTileset,
+                    tiles: draftTiles
+                }
+            } : editorAsset;
+            const renderedSrc = sourceOption?.dataUrl ?? resolveAssetUrl(activeVersion.file);
+            const editorInitialState = resolveTilesetEditorInitialState({
+                renderedSrc,
+                currentOption: sourceOption,
+                activeVersion,
+                resolveAssetUrl
+            });
+            void openTilesetEditor({
+                root: elements.root,
+                asset: tilesetEditorAsset,
+                assetId,
+                src: renderedSrc,
+                sourceSrc: editorInitialState.sourceSrc,
+                initialTransforms: editorInitialState.initialTransforms,
+                regenerateTile: (tile, tileset, currentTileSrc) => regenerateTilesetTile(assetId, tile, tileset, currentTileSrc),
+                onConfirm: async ({ dataUrl, sourceDataUrl, transforms }) => {
+                    const previousOption = editedCurrentOption;
+                    const optionAsset = {
+                        ...tilesetEditorAsset,
+                        dimensions: previousOption?.dimensions ?? tilesetEditorAsset.dimensions,
+                        tileset: tilesetEditorAsset.tileset,
+                        settings: {
+                            ...(previousOption?.settings ?? activeVersion?.settings ?? tilesetEditorAsset.settings),
+                            format: "png"
+                        }
+                    };
+                    editedCurrentOption = {
+                        ...previousOption,
+                        index: previousOption?.index ?? -1,
+                        dataUrl,
+                        mimeType: "image/png",
+                        prompt: previousOption?.prompt ?? activeVersion?.prompt ?? asset.prompt,
+                        model: previousOption?.model ?? activeVersion?.model,
+                        revisedPrompt: previousOption?.revisedPrompt ?? activeVersion?.revisedPrompt,
+                        dimensions: optionAsset.dimensions,
+                        tileset: optionAsset.tileset,
+                        tilesetSourceDataUrl: sourceDataUrl,
+                        tilesetTransforms: cloneTilesetTransforms(transforms),
+                        settings: optionAsset.settings
+                    };
+                    selectedOption = editedCurrentOption;
+                    rememberPendingOption(assetId, editedCurrentOption, {
+                        inheritAnimations: Boolean(previewedVersionName),
+                        previewedVersionName
+                    });
+                    elements.currentImage.src = dataUrl;
+                    elements.currentPreview.classList.add("is-selected");
+                    elements.currentRevertButton.hidden = false;
+                    elements.promoteButton.disabled = activePromotionId !== undefined;
+                    previewImageSource({
+                        scene: options.scene,
+                        manifest,
+                        assetId,
+                        src: dataUrl,
+                        textureKey: `ai-current-tileset-edit:${assetId}:${Date.now()}`,
+                        assetOverride: optionAsset,
+                        onPreview: options.onPreview
+                    });
+                    setStatus(elements, "Tileset edits applied. Promote to save them to code.", "success");
+                }
+            });
+            return;
+        }
         void openFrameTouchUpEditor({
             root: elements.root,
-            asset,
+            asset: editorAsset,
             title: readableAssetName(selectedTargetAssetId),
             frameSrc: sourceOption?.dataUrl ?? resolveAssetUrl(activeVersion.file),
             displaySize: resolvePreviewDisplaySize(options, selectedTargetAssetId, asset),
@@ -980,10 +2388,14 @@ export function installAiAssetDesigner(options) {
                     settings: previousOption?.settings ?? activeVersion?.settings ?? asset.settings
                 };
                 selectedOption = editedCurrentOption;
+                rememberPendingOption(selectedTargetAssetId, editedCurrentOption, {
+                    inheritAnimations: Boolean(previewedVersionName),
+                    previewedVersionName
+                });
                 elements.currentImage.src = dataUrl;
                 elements.currentPreview.classList.add("is-selected");
                 elements.currentRevertButton.hidden = false;
-                elements.promoteButton.disabled = false;
+                elements.promoteButton.disabled = activePromotionId !== undefined;
                 previewImageSource({
                     scene: options.scene,
                     manifest,