@ai-game-assets/phaser 0.5.6 → 0.7.0

package/dist/designer-support.js

@@ -1,3 +1,4 @@
+import { aiTextureKey } from "./keys.js";
 const assetFormatOptions = [
     { value: "png", label: "PNG" },
     { value: "jpg", label: "JPEG" },
@@ -69,6 +70,19 @@ export function createDesignerElements(options, manifest, selectedAssetId) {
     const promptInput = document.createElement("textarea");
     promptInput.className = "ai-game-assets-designer__prompt";
     promptInput.rows = 6;
+    const promptField = labelWrap("Prompt", promptInput);
+    const tilesetPromptsField = document.createElement("section");
+    tilesetPromptsField.className = "ai-game-assets-designer__tile-prompts";
+    tilesetPromptsField.hidden = true;
+    const tilesetPromptsTitle = document.createElement("div");
+    tilesetPromptsTitle.className = "ai-game-assets-designer__tile-prompts-title";
+    tilesetPromptsTitle.textContent = "Tile prompts";
+    const tilesetPromptsHint = document.createElement("div");
+    tilesetPromptsHint.className = "ai-game-assets-designer__tile-prompts-hint";
+    tilesetPromptsHint.textContent = "Describe each tile in exact sheet order.";
+    const tilesetPromptsList = document.createElement("div");
+    tilesetPromptsList.className = "ai-game-assets-designer__tile-prompts-list";
+    tilesetPromptsField.append(tilesetPromptsTitle, tilesetPromptsHint, tilesetPromptsList);
     const widthInput = numericInput();
     const heightInput = numericInput();
     const frameCountInput = numericInput();
@@ -98,7 +112,9 @@ export function createDesignerElements(options, manifest, selectedAssetId) {
     }
     const dimensionGrid = document.createElement("div");
     dimensionGrid.className = "ai-game-assets-designer__dimensions";
-    dimensionGrid.append(labelWrap("Width", widthInput), labelWrap("Height", heightInput));
+    const widthField = labelWrap("Width", widthInput);
+    const heightField = labelWrap("Height", heightInput);
+    dimensionGrid.append(widthField, heightField);
     const frameCountField = labelWrap("Frames", frameCountInput);
     const formatField = labelWrap("Format", formatSelect);
     const audioFormatField = labelWrap("Audio format", audioFormatSelect);
@@ -126,10 +142,19 @@ export function createDesignerElements(options, manifest, selectedAssetId) {
     currentTouchUpButton.className = "ai-game-assets-designer__animate-button";
     currentTouchUpButton.textContent = "Touch up...";
     currentTouchUpButton.hidden = true;
-    currentPreview.append(currentImage, currentAudio, currentAnimation, currentAnimationButton, currentTouchUpButton);
+    const currentRevertButton = document.createElement("button");
+    currentRevertButton.type = "button";
+    currentRevertButton.className = "ai-game-assets-designer__animate-button";
+    currentRevertButton.textContent = "Revert preview";
+    currentRevertButton.hidden = true;
+    currentPreview.append(currentImage, currentAudio, currentAnimation, currentAnimationButton, currentTouchUpButton, currentRevertButton);
     const regenerateButton = document.createElement("button");
     regenerateButton.type = "button";
     regenerateButton.textContent = "Regenerate";
+    const mixTilesetButton = document.createElement("button");
+    mixTilesetButton.type = "button";
+    mixTilesetButton.textContent = "Mix tileset";
+    mixTilesetButton.hidden = true;
     const uploadButton = document.createElement("button");
     uploadButton.type = "button";
     uploadButton.textContent = "Upload...";
@@ -143,24 +168,29 @@ export function createDesignerElements(options, manifest, selectedAssetId) {
     promoteButton.type = "button";
     promoteButton.textContent = "Promote";
     promoteButton.disabled = true;
+    const promoteAllButton = document.createElement("button");
+    promoteAllButton.type = "button";
+    promoteAllButton.textContent = "Promote all";
+    promoteAllButton.disabled = true;
     const restartButton = document.createElement("button");
     restartButton.type = "button";
     restartButton.textContent = "Restart";
     const actions = document.createElement("div");
     actions.className = "ai-game-assets-designer__actions";
-    actions.append(regenerateButton, uploadButton, deriveButton, versionsButton, promoteButton, restartButton);
+    actions.append(regenerateButton, mixTilesetButton, uploadButton, deriveButton, versionsButton, promoteButton, promoteAllButton, restartButton);
     const versionLabel = document.createElement("div");
     versionLabel.className = "ai-game-assets-designer__meta";
     const optionsGrid = document.createElement("div");
     optionsGrid.className = "ai-game-assets-designer__options";
     const status = document.createElement("div");
     status.className = "ai-game-assets-designer__status";
-    panel.append(header, targetField, labelWrap("Asset", assetBrowser), targetVariantLabel, animationField, dimensionGrid, frameCountField, formatField, audioFormatField, audioDurationField, audioLoopField, voiceTextField, labelWrap("Current", currentPreview), labelWrap("Prompt", promptInput), actions, versionLabel, optionsGrid, status);
+    panel.append(header, targetField, labelWrap("Asset", assetBrowser), targetVariantLabel, animationField, dimensionGrid, frameCountField, formatField, audioFormatField, audioDurationField, audioLoopField, voiceTextField, labelWrap("Current", currentPreview), promptField, tilesetPromptsField, actions, versionLabel, optionsGrid, status);
     root.append(toggle, panel);
     return {
         root,
         toggle,
         panel,
+        title,
         styleButton,
         assetSelect,
         assetBrowser,
@@ -170,7 +200,9 @@ export function createDesignerElements(options, manifest, selectedAssetId) {
         animationSelect,
         animationField,
         widthInput,
+        widthField,
         heightInput,
+        heightField,
         dimensionGrid,
         frameCountInput,
         frameCountField,
@@ -185,17 +217,23 @@ export function createDesignerElements(options, manifest, selectedAssetId) {
         voiceTextInput,
         voiceTextField,
         promptInput,
+        promptField,
+        tilesetPromptsField,
+        tilesetPromptsList,
         currentImage,
         currentAudio,
         currentAnimation,
         currentAnimationButton,
+        currentRevertButton,
         currentTouchUpButton,
         currentPreview,
         uploadButton,
         deriveButton,
         regenerateButton,
+        mixTilesetButton,
         versionsButton,
         promoteButton,
+        promoteAllButton,
         restartButton,
         versionLabel,
         options: optionsGrid,
@@ -214,7 +252,7 @@ export function renderAssetFolderBrowser(options) {
     const storedPathValue = options.container.getAttribute("data-path");
     const storedPath = storedPathValue !== null
         ? storedPathValue.split("/").filter(Boolean)
-        : selectedPath;
+        : [];
     const currentPath = pathHasAnyAsset(storedPath, assetPathEntries)
         ? storedPath
         : selectedPath;
@@ -390,7 +428,7 @@ export function renderOptions(options) {
                     element: animationStage,
                     src: option.dataUrl,
                     asset: optionAsset,
-                    displaySize: resolvePreviewDisplaySize(options.designerOptions, options.assetId, optionAsset),
+                    displaySize: { width: 68, height: 68 },
                     applyFrameTransforms: false
                 });
             });
@@ -399,6 +437,8 @@ export function renderOptions(options) {
         options.elements.options.append(card);
     }
 }
+const pendingImagePreviews = new WeakMap();
+let promotedTextureInstallId = 0;
 export function previewOption(options) {
     const textureKey = `ai-preview:${options.assetId}:${options.option.index}:${Date.now()}`;
     previewImageSource({
@@ -418,25 +458,80 @@ export function previewCurrentAsset(options) {
         textureKey
     });
 }
+export function installPromotedImageTexture(options) {
+    const textureKey = aiTextureKey({ assetId: options.assetId });
+    promotedTextureInstallId += 1;
+    const requestKey = `promote:${options.assetId}:${promotedTextureInstallId}`;
+    return new Promise((resolve, reject) => {
+        previewImageSource({
+            ...options,
+            textureKey,
+            requestKey,
+            onPreview(assetId, installedTextureKey, asset) {
+                resolve({ assetId, textureKey: installedTextureKey, asset });
+            },
+            onError: reject
+        });
+    });
+}
 export function previewImageSource(options) {
     const image = new Image();
+    const pendingForScene = pendingImagePreviews.get(options.scene) ?? new Map();
+    const requestKey = options.requestKey ?? options.assetId;
+    const previousImage = pendingForScene.get(requestKey);
+    if (previousImage) {
+        previousImage.onload = null;
+        previousImage.onerror = null;
+    }
+    pendingForScene.set(requestKey, image);
+    pendingImagePreviews.set(options.scene, pendingForScene);
+    if (shouldUseAnonymousCrossOrigin(options.src)) {
+        image.crossOrigin = "anonymous";
+    }
     image.onload = () => {
-        if (options.scene.textures.exists(options.textureKey)) {
-            options.scene.textures.remove(options.textureKey);
-        }
-        const asset = options.assetOverride ?? options.manifest.assets[options.assetId];
-        if (asset.frameGrid && options.scene.textures.addSpriteSheet) {
-            options.scene.textures.addSpriteSheet(options.textureKey, image, {
-                frameWidth: asset.frameGrid.frameWidth,
-                frameHeight: asset.frameGrid.frameHeight,
-                margin: asset.frameGrid.margin,
-                spacing: asset.frameGrid.spacing
-            });
+        if (pendingForScene.get(requestKey) !== image)
+            return;
+        pendingForScene.delete(requestKey);
+        try {
+            if (options.scene.textures.exists(options.textureKey)) {
+                options.scene.textures.remove(options.textureKey);
+            }
+            const asset = options.assetOverride ?? options.manifest.assets[options.assetId];
+            const tileset = designerTilesetMetadata(asset);
+            if (tileset && options.scene.textures.addSpriteSheet) {
+                options.scene.textures.addSpriteSheet(options.textureKey, image, {
+                    frameWidth: tileset.tileWidth,
+                    frameHeight: tileset.tileHeight,
+                    margin: tileset.margin,
+                    spacing: tileset.spacing
+                });
+            }
+            else if (asset.frameGrid && options.scene.textures.addSpriteSheet) {
+                options.scene.textures.addSpriteSheet(options.textureKey, image, {
+                    frameWidth: asset.frameGrid.frameWidth,
+                    frameHeight: asset.frameGrid.frameHeight,
+                    margin: asset.frameGrid.margin,
+                    spacing: asset.frameGrid.spacing
+                });
+            }
+            else {
+                options.scene.textures.addImage(options.textureKey, image);
+            }
+            options.onPreview(options.assetId, options.textureKey, asset);
         }
-        else {
-            options.scene.textures.addImage(options.textureKey, image);
+        catch (error) {
+            const previewError = error instanceof Error ? error : new Error(String(error));
+            if (options.onError)
+                options.onError(previewError);
+            else
+                console.error("Could not preview AI asset image.", previewError);
         }
-        options.onPreview(options.assetId, options.textureKey, asset);
+    };
+    image.onerror = () => {
+        if (pendingForScene.get(requestKey) === image) {
+            pendingForScene.delete(requestKey);
+        }
+        options.onError?.(new Error(`Could not load preview image for "${options.assetId}".`));
     };
     image.src = options.src;
 }
@@ -464,7 +559,9 @@ export async function uploadedOptionFromFile(options) {
         };
     }
     const imageSize = await imageSizeFromSource(dataUrl);
-    const geometry = uploadedImageGeometry(options.asset, imageSize);
+    const format = normalizeAssetFormatFromMimeType(mimeType, options.file.name);
+    const generationGeometry = generationOverridesFromInputs(options.elements, options.asset, format);
+    const geometry = uploadedImageGeometry(options.asset, imageSize, generationGeometry.tileset);
     return {
         index: 0,
         dataUrl,
@@ -473,13 +570,38 @@ export async function uploadedOptionFromFile(options) {
         model: "uploaded",
         dimensions: geometry.dimensions,
         frameGrid: geometry.frameGrid,
+        tileset: geometry.tileset,
         settings: {
             ...options.asset.settings,
-            format: normalizeAssetFormatFromMimeType(mimeType, options.file.name)
+            format
         }
     };
 }
-export function uploadedImageGeometry(asset, imageSize) {
+export function uploadedImageGeometry(asset, imageSize, tilesetOverride) {
+    const baseTileset = designerTilesetMetadata(asset);
+    if (baseTileset) {
+        const tileset = {
+            ...baseTileset,
+            ...tilesetOverride
+        };
+        const capacity = tileset.columns * tileset.rows;
+        const tileCount = tileset.tileCount ?? capacity;
+        if (tileCount > capacity) {
+            throw new Error(`Tile count must not exceed this tileset's ${capacity}-tile capacity.`);
+        }
+        const margin = tileset.margin ?? 0;
+        const spacing = tileset.spacing ?? 0;
+        const dimensions = {
+            width: margin * 2 + tileset.columns * tileset.tileWidth +
+                Math.max(0, tileset.columns - 1) * spacing,
+            height: margin * 2 + tileset.rows * tileset.tileHeight +
+                Math.max(0, tileset.rows - 1) * spacing
+        };
+        if (imageSize.width !== dimensions.width || imageSize.height !== dimensions.height) {
+            throw new Error(`Tileset upload must be exactly ${dimensions.width}x${dimensions.height}px for the selected tile geometry; received ${imageSize.width}x${imageSize.height}px.`);
+        }
+        return { dimensions, tileset };
+    }
     if (!asset.frameGrid) {
         return {
             dimensions: imageSize
@@ -574,6 +696,14 @@ export async function spriteSheetFrameToDataUrl(options) {
 export function isSvgSource(src) {
     return src.startsWith("data:image/svg+xml") || /\.svg(?:$|\?)/i.test(src);
 }
+const frameTouchUpPreferences = {
+    alpha: 255,
+    antiAlias: true,
+    brushSize: 4,
+    color: "#f8fafc",
+    tool: "brush"
+};
+let frameTouchUpClipboard;
 export async function openFrameTouchUpEditor(options) {
     const sourceImage = await loadImageElement(options.frameSrc);
     const dialog = document.createElement("div");
@@ -615,7 +745,7 @@ export async function openFrameTouchUpEditor(options) {
     brushSizeInput.min = "1";
     brushSizeInput.max = "32";
     brushSizeInput.step = "1";
-    brushSizeInput.value = "4";
+    brushSizeInput.value = String(frameTouchUpPreferences.brushSize);
     const brushSizeValue = document.createElement("span");
     brushSizeValue.textContent = brushSizeInput.value;
     const brushSizeField = document.createElement("label");
@@ -623,7 +753,7 @@ export async function openFrameTouchUpEditor(options) {
     brushSizeField.append("Size", brushSizeInput, brushSizeValue);
     const antiAliasInput = document.createElement("input");
     antiAliasInput.type = "checkbox";
-    antiAliasInput.checked = true;
+    antiAliasInput.checked = frameTouchUpPreferences.antiAlias;
     const antiAliasField = document.createElement("label");
     antiAliasField.className = "ai-game-assets-designer__inline-checkbox";
     antiAliasField.append(antiAliasInput, "Anti-aliased round tip");
@@ -632,6 +762,7 @@ export async function openFrameTouchUpEditor(options) {
     const eraserButton = touchUpButton("Eraser");
     const pickerButton = touchUpButton("Picker");
     const selectButton = touchUpButton("Select");
+    selectButton.title = "Select pixels. Cmd/Ctrl+C copies; Cmd/Ctrl+V pastes.";
     const fillButton = touchUpButton("Fill");
     const undoButton = touchUpButton("Undo");
     const redoButton = touchUpButton("Redo");
@@ -639,14 +770,14 @@ export async function openFrameTouchUpEditor(options) {
     saveButton.classList.add("is-primary");
     const colorInput = document.createElement("input");
     colorInput.type = "color";
-    colorInput.value = "#f8fafc";
+    colorInput.value = frameTouchUpPreferences.color;
     colorInput.setAttribute("aria-label", "Brush color");
     const alphaInput = document.createElement("input");
     alphaInput.type = "number";
     alphaInput.min = "0";
     alphaInput.max = "255";
     alphaInput.step = "1";
-    alphaInput.value = "255";
+    alphaInput.value = String(frameTouchUpPreferences.alpha);
     alphaInput.setAttribute("aria-label", "Alpha");
     const rgbaLabel = document.createElement("label");
     rgbaLabel.className = "ai-game-assets-designer__touchup-color";
@@ -665,6 +796,13 @@ export async function openFrameTouchUpEditor(options) {
     const selectionBox = document.createElement("div");
     selectionBox.className = "ai-game-assets-designer__touchup-selection";
     selectionBox.hidden = true;
+    const rotateSelectionButton = document.createElement("button");
+    rotateSelectionButton.type = "button";
+    rotateSelectionButton.className = "ai-game-assets-designer__touchup-selection-rotate";
+    rotateSelectionButton.textContent = "↻";
+    rotateSelectionButton.setAttribute("aria-label", "Rotate selection 90 degrees clockwise");
+    rotateSelectionButton.title = "Rotate selection 90° clockwise";
+    selectionBox.append(rotateSelectionButton);
     canvasWrap.append(canvas, selectionBox);
     const side = document.createElement("div");
     side.className = "ai-game-assets-designer__touchup-side";
@@ -698,11 +836,13 @@ export async function openFrameTouchUpEditor(options) {
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.drawImage(sourceImage, 0, 0, canvas.width, canvas.height);
     let zoom = Math.max(1, Math.floor(Math.min(8, 480 / Math.max(canvas.width, canvas.height))));
-    let tool = "brush";
+    let tool = frameTouchUpPreferences.tool;
     let dirty = false;
     let drawing = false;
+    let drawingPointerId;
     let selectionStart;
     let selection;
+    let floatingSelection;
     let animationTimeout;
     let animationCursor = 0;
     let disposed = false;
@@ -750,11 +890,73 @@ export async function openFrameTouchUpEditor(options) {
         }[tool];
         activeButton.classList.add("is-active");
     };
+    const selectTool = (nextTool) => {
+        tool = nextTool;
+        frameTouchUpPreferences.tool = nextTool;
+        updateToolButtons();
+    };
     const updateUndoRedo = () => {
         undoButton.disabled = undoStack.length === 0;
         redoButton.disabled = redoStack.length === 0;
     };
     const snapshot = () => context.getImageData(0, 0, canvas.width, canvas.height);
+    const clipboardImageData = () => {
+        if (!frameTouchUpClipboard)
+            return undefined;
+        const width = Math.min(frameTouchUpClipboard.width, canvas.width);
+        const height = Math.min(frameTouchUpClipboard.height, canvas.height);
+        const imageData = context.createImageData(width, height);
+        const sourceStride = frameTouchUpClipboard.width * 4;
+        const targetStride = width * 4;
+        for (let row = 0; row < height; row += 1) {
+            imageData.data.set(frameTouchUpClipboard.pixels.subarray(row * sourceStride, (row * sourceStride) + targetStride), row * targetStride);
+        }
+        return imageData;
+    };
+    const drawFloatingSelection = () => {
+        if (!selection || !floatingSelection)
+            return;
+        context.putImageData(floatingSelection.background, 0, 0);
+        const floatingCanvas = document.createElement("canvas");
+        floatingCanvas.width = floatingSelection.pixels.width;
+        floatingCanvas.height = floatingSelection.pixels.height;
+        const floatingContext = floatingCanvas.getContext("2d");
+        if (!floatingContext)
+            return;
+        floatingContext.putImageData(floatingSelection.pixels, 0, 0);
+        context.drawImage(floatingCanvas, selection.x, selection.y);
+    };
+    const rotateImageDataWithinBounds = (imageData) => {
+        const sourceCanvas = document.createElement("canvas");
+        sourceCanvas.width = imageData.width;
+        sourceCanvas.height = imageData.height;
+        const sourceContext = sourceCanvas.getContext("2d");
+        const targetCanvas = document.createElement("canvas");
+        targetCanvas.width = imageData.width;
+        targetCanvas.height = imageData.height;
+        const targetContext = targetCanvas.getContext("2d", { willReadFrequently: true });
+        if (!sourceContext || !targetContext)
+            return imageData;
+        sourceContext.putImageData(imageData, 0, 0);
+        targetContext.imageSmoothingEnabled = false;
+        targetContext.translate(imageData.width / 2, imageData.height / 2);
+        targetContext.scale(imageData.width / imageData.height, imageData.height / imageData.width);
+        targetContext.rotate(Math.PI / 2);
+        targetContext.drawImage(sourceCanvas, -imageData.width / 2, -imageData.height / 2);
+        targetContext.setTransform(1, 0, 0, 1, 0, 0);
+        return targetContext.getImageData(0, 0, imageData.width, imageData.height);
+    };
+    const copySelection = () => {
+        if (!selection)
+            return false;
+        const imageData = floatingSelection?.pixels ?? context.getImageData(selection.x, selection.y, selection.width, selection.height);
+        frameTouchUpClipboard = {
+            width: imageData.width,
+            height: imageData.height,
+            pixels: new Uint8ClampedArray(imageData.data)
+        };
+        return true;
+    };
     const pushUndo = () => {
         undoStack.push(snapshot());
         if (undoStack.length > 60)
@@ -765,9 +967,26 @@ export async function openFrameTouchUpEditor(options) {
     const restore = (imageData) => {
         context.putImageData(imageData, 0, 0);
         selection = undefined;
+        floatingSelection = undefined;
         redrawEditor();
         setDirty(true);
     };
+    const undo = () => {
+        const previous = undoStack.pop();
+        if (!previous)
+            return;
+        redoStack.push(snapshot());
+        restore(previous);
+        updateUndoRedo();
+    };
+    const redo = () => {
+        const next = redoStack.pop();
+        if (!next)
+            return;
+        undoStack.push(snapshot());
+        restore(next);
+        updateUndoRedo();
+    };
     const syncSelectionBox = () => {
         if (!selection) {
             selectionBox.hidden = true;
@@ -778,6 +997,12 @@ export async function openFrameTouchUpEditor(options) {
         selectionBox.style.top = `${selection.y * zoom}px`;
         selectionBox.style.width = `${selection.width * zoom}px`;
         selectionBox.style.height = `${selection.height * zoom}px`;
+        const renderedWidth = selection.width * zoom;
+        const renderedHeight = selection.height * zoom;
+        rotateSelectionButton.hidden = renderedWidth < 12 || renderedHeight < 12;
+        const handleSize = Math.max(0, Math.min(18, renderedWidth - 4, renderedHeight - 4));
+        rotateSelectionButton.style.width = `${handleSize}px`;
+        rotateSelectionButton.style.height = `${handleSize}px`;
     };
     const refreshPreviews = () => {
         stillContext.clearRect(0, 0, stillPreview.width, stillPreview.height);
@@ -912,6 +1137,8 @@ export async function openFrameTouchUpEditor(options) {
         const data = context.getImageData(point.x, point.y, 1, 1).data;
         colorInput.value = `#${hexByte(data[0])}${hexByte(data[1])}${hexByte(data[2])}`;
         alphaInput.value = String(data[3]);
+        frameTouchUpPreferences.color = colorInput.value;
+        frameTouchUpPreferences.alpha = data[3];
     };
     const fillAt = (point) => {
         const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
@@ -959,6 +1186,13 @@ export async function openFrameTouchUpEditor(options) {
         pushUndo();
         const nextX = clamp(selection.x + deltaX, 0, canvas.width - selection.width);
         const nextY = clamp(selection.y + deltaY, 0, canvas.height - selection.height);
+        if (floatingSelection) {
+            selection = { ...selection, x: nextX, y: nextY };
+            drawFloatingSelection();
+            setDirty(true);
+            redrawEditor();
+            return;
+        }
         const imageData = context.getImageData(selection.x, selection.y, selection.width, selection.height);
         context.clearRect(selection.x, selection.y, selection.width, selection.height);
         context.putImageData(imageData, nextX, nextY);
@@ -966,15 +1200,60 @@ export async function openFrameTouchUpEditor(options) {
         setDirty(true);
         redrawEditor();
     };
+    const rotateSelection = () => {
+        if (!selection)
+            return;
+        pushUndo();
+        const pixels = floatingSelection?.pixels ?? context.getImageData(selection.x, selection.y, selection.width, selection.height);
+        const rotated = rotateImageDataWithinBounds(pixels);
+        if (floatingSelection) {
+            floatingSelection.pixels = rotated;
+            drawFloatingSelection();
+        }
+        else {
+            context.putImageData(rotated, selection.x, selection.y);
+        }
+        setDirty(true);
+        redrawEditor();
+    };
     const deleteSelection = () => {
         if (!selection)
             return;
         pushUndo();
-        context.clearRect(selection.x, selection.y, selection.width, selection.height);
+        if (floatingSelection) {
+            context.putImageData(floatingSelection.background, 0, 0);
+            floatingSelection = undefined;
+        }
+        else {
+            context.clearRect(selection.x, selection.y, selection.width, selection.height);
+        }
         selection = undefined;
         setDirty(true);
         redrawEditor();
     };
+    const pasteSelection = () => {
+        const pixels = clipboardImageData();
+        if (!pixels)
+            return false;
+        const x = clamp(selection?.x ?? Math.floor((canvas.width - pixels.width) / 2), 0, canvas.width - pixels.width);
+        const y = clamp(selection?.y ?? Math.floor((canvas.height - pixels.height) / 2), 0, canvas.height - pixels.height);
+        pushUndo();
+        floatingSelection = {
+            background: snapshot(),
+            pixels
+        };
+        selection = {
+            x,
+            y,
+            width: pixels.width,
+            height: pixels.height
+        };
+        selectTool("select");
+        drawFloatingSelection();
+        setDirty(true);
+        redrawEditor();
+        return true;
+    };
     const drawAnimationFrame = () => {
         if (disposed)
             return;
@@ -1016,12 +1295,18 @@ export async function openFrameTouchUpEditor(options) {
         brushMenu.hidden = true;
     };
     const close = () => {
+        if (disposed)
+            return;
         disposed = true;
         if (animationTimeout !== undefined)
             window.clearTimeout(animationTimeout);
-        window.removeEventListener("keydown", keyHandler);
+        window.removeEventListener("keydown", keyHandler, true);
+        window.removeEventListener("pointerup", finishPointer, true);
+        window.removeEventListener("pointercancel", finishPointer, true);
+        window.removeEventListener("blur", cancelDrawing);
         document.removeEventListener("pointerdown", closeBrushMenuOnOutsidePointer);
         dialog.remove();
+        options.onClose?.();
     };
     const requestClose = () => {
         if (dirty && !window.confirm("You have unsaved changes. Close without saving?"))
@@ -1031,33 +1316,72 @@ export async function openFrameTouchUpEditor(options) {
     const keyHandler = (event) => {
         if (!dialog.isConnected)
             return;
+        const key = event.key.toLowerCase();
+        const commandModifier = event.metaKey || event.ctrlKey;
+        const target = event.target;
+        const isEditingInput = target instanceof HTMLInputElement ||
+            target instanceof HTMLTextAreaElement ||
+            target instanceof HTMLSelectElement ||
+            (target instanceof HTMLElement && target.isContentEditable);
+        if (isEditingInput && event.key !== "Escape")
+            return;
+        if (commandModifier && !event.altKey && key === "c" && copySelection()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        if (commandModifier && !event.altKey && key === "v" && pasteSelection()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        if (commandModifier && !event.altKey && (key === "z" || key === "y")) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (key === "y" || event.shiftKey) {
+                redo();
+            }
+            else {
+                undo();
+            }
+            return;
+        }
         if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
             requestClose();
             return;
         }
         if (event.key === "Backspace" || event.key === "Delete") {
             event.preventDefault();
+            event.stopPropagation();
             deleteSelection();
             return;
         }
         if (event.key === "ArrowLeft") {
             event.preventDefault();
+            event.stopPropagation();
             moveSelection(-1, 0);
         }
         else if (event.key === "ArrowRight") {
             event.preventDefault();
+            event.stopPropagation();
             moveSelection(1, 0);
         }
         else if (event.key === "ArrowUp") {
             event.preventDefault();
+            event.stopPropagation();
             moveSelection(0, -1);
         }
         else if (event.key === "ArrowDown") {
             event.preventDefault();
+            event.stopPropagation();
             moveSelection(0, 1);
         }
     };
     canvas.addEventListener("pointerdown", (event) => {
+        if (event.pointerType !== "touch" && event.button !== 0)
+            return;
         if (event.pointerType === "touch") {
             activeTouchPointers.set(event.pointerId, {
                 x: event.clientX,
@@ -1065,6 +1389,7 @@ export async function openFrameTouchUpEditor(options) {
             });
             if (activeTouchPointers.size >= 2) {
                 drawing = false;
+                drawingPointerId = undefined;
                 selectionStart = undefined;
                 pinchStartDistance = touchPointerDistance();
                 pinchStartZoom = zoom;
@@ -1077,8 +1402,10 @@ export async function openFrameTouchUpEditor(options) {
             pickColorAt(point);
             return;
         }
+        floatingSelection = undefined;
         pushUndo();
         drawing = true;
+        drawingPointerId = event.pointerId;
         canvas.setPointerCapture(event.pointerId);
         if (tool === "select") {
             selectionStart = point;
@@ -1089,6 +1416,7 @@ export async function openFrameTouchUpEditor(options) {
         if (tool === "fill") {
             fillAt(point);
             drawing = false;
+            drawingPointerId = undefined;
             setDirty(true);
             redrawEditor();
             return;
@@ -1111,8 +1439,12 @@ export async function openFrameTouchUpEditor(options) {
                 return;
             }
         }
-        if (!drawing)
+        if (!drawing || drawingPointerId !== event.pointerId)
+            return;
+        if (event.pointerType !== "touch" && (event.buttons & 1) === 0) {
+            finishPointer(event);
             return;
+        }
         const point = canvasPoint(event);
         if (tool === "select" && selectionStart) {
             const x = Math.min(selectionStart.x, point.x);
@@ -1132,7 +1464,7 @@ export async function openFrameTouchUpEditor(options) {
             redrawEditor();
         }
     });
-    const finishPointer = (event) => {
+    function finishPointer(event) {
         if (event.pointerType === "touch") {
             activeTouchPointers.delete(event.pointerId);
             if (activeTouchPointers.size < 2) {
@@ -1143,15 +1475,29 @@ export async function openFrameTouchUpEditor(options) {
                 pinchStartZoom = zoom;
             }
         }
-        drawing = false;
-        selectionStart = undefined;
+        if (drawingPointerId === event.pointerId) {
+            drawing = false;
+            drawingPointerId = undefined;
+            selectionStart = undefined;
+        }
         if (canvas.hasPointerCapture(event.pointerId)) {
             canvas.releasePointerCapture(event.pointerId);
         }
         redrawEditor();
-    };
+    }
+    function cancelDrawing() {
+        drawing = false;
+        drawingPointerId = undefined;
+        selectionStart = undefined;
+        activeTouchPointers.clear();
+        pinchStartDistance = undefined;
+    }
     canvas.addEventListener("pointerup", finishPointer);
     canvas.addEventListener("pointercancel", finishPointer);
+    canvas.addEventListener("lostpointercapture", finishPointer);
+    window.addEventListener("pointerup", finishPointer, true);
+    window.addEventListener("pointercancel", finishPointer, true);
+    window.addEventListener("blur", cancelDrawing);
     canvasWrap.addEventListener("wheel", (event) => {
         if (!event.ctrlKey && !event.metaKey)
             return;
@@ -1162,6 +1508,15 @@ export async function openFrameTouchUpEditor(options) {
             clientY: event.clientY
         });
     }, { passive: false });
+    rotateSelectionButton.addEventListener("pointerdown", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+    });
+    rotateSelectionButton.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        rotateSelection();
+    });
     closeButton.addEventListener("click", requestClose);
     zoomOutButton.addEventListener("click", () => {
         setZoom(zoom - 1);
@@ -1170,54 +1525,45 @@ export async function openFrameTouchUpEditor(options) {
         setZoom(zoom + 1);
     });
     brushButton.addEventListener("click", () => {
-        tool = "brush";
-        updateToolButtons();
+        selectTool("brush");
     });
     brushMenuButton.addEventListener("click", () => {
         brushMenu.hidden = !brushMenu.hidden;
     });
     brushSizeInput.addEventListener("input", () => {
         brushSizeValue.textContent = brushSizeInput.value;
+        frameTouchUpPreferences.brushSize = brushSize();
+    });
+    antiAliasInput.addEventListener("change", () => {
+        frameTouchUpPreferences.antiAlias = antiAliasInput.checked;
+    });
+    colorInput.addEventListener("input", () => {
+        frameTouchUpPreferences.color = colorInput.value;
+    });
+    alphaInput.addEventListener("input", () => {
+        frameTouchUpPreferences.alpha = clamp(Math.round(Number(alphaInput.value)), 0, 255);
     });
     document.addEventListener("pointerdown", closeBrushMenuOnOutsidePointer);
     eraserButton.addEventListener("click", () => {
-        tool = "eraser";
-        updateToolButtons();
+        selectTool("eraser");
     });
     pickerButton.addEventListener("click", () => {
-        tool = "picker";
-        updateToolButtons();
+        selectTool("picker");
     });
     selectButton.addEventListener("click", () => {
-        tool = "select";
-        updateToolButtons();
+        selectTool("select");
     });
     fillButton.addEventListener("click", () => {
-        tool = "fill";
-        updateToolButtons();
-    });
-    undoButton.addEventListener("click", () => {
-        const previous = undoStack.pop();
-        if (!previous)
-            return;
-        redoStack.push(snapshot());
-        restore(previous);
-        updateUndoRedo();
-    });
-    redoButton.addEventListener("click", () => {
-        const next = redoStack.pop();
-        if (!next)
-            return;
-        undoStack.push(snapshot());
-        restore(next);
-        updateUndoRedo();
+        selectTool("fill");
     });
+    undoButton.addEventListener("click", undo);
+    redoButton.addEventListener("click", redo);
     saveButton.addEventListener("click", async () => {
         await options.onSave(canvas.toDataURL("image/png"));
         setDirty(false);
         close();
     });
-    window.addEventListener("keydown", keyHandler);
+    window.addEventListener("keydown", keyHandler, true);
     updateZoom();
     updateToolButtons();
     updateUndoRedo();
@@ -1358,6 +1704,14 @@ export function renderAudioPlayer(options) {
             state.frame = window.requestAnimationFrame(tick);
         }
     };
+    const handleEnded = () => {
+        if (!options.playback?.loop || state.disposed) {
+            sync();
+            return;
+        }
+        audio.currentTime = state.trimStart;
+        void audio.play().then(() => tick()).catch(() => sync());
+    };
     playButton.addEventListener("click", async () => {
         if (audio.paused) {
             pauseSiblingAudioPlayers(options.container);
@@ -1392,12 +1746,15 @@ export function renderAudioPlayer(options) {
         state.trimStart = clamp(options.playback?.trimStartSeconds ?? 0, 0, state.duration);
         state.trimEnd = clamp(options.playback?.trimEndSeconds ?? state.duration, state.trimStart, state.duration);
         trimLabel.hidden = state.trimStart === 0 && state.trimEnd === state.duration;
-        trimLabel.textContent = `Trim ${formatAudioTime(state.trimStart)} – ${formatAudioTime(state.trimEnd)}`;
+        trimLabel.textContent = `Trim ${formatAudioTime(state.trimStart, true)} – ${formatAudioTime(state.trimEnd, true)}`;
+        audio.loop = Boolean(options.playback?.loop) &&
+            state.trimStart === 0 &&
+            state.trimEnd >= state.duration - 0.05;
         audio.currentTime = state.trimStart;
         sync();
     });
     audio.addEventListener("timeupdate", sync);
-    audio.addEventListener("ended", sync);
+    audio.addEventListener("ended", handleEnded);
     draw();
     void audioWaveformPeaks(options.src).then((peaks) => {
         if (state.disposed)
@@ -1515,13 +1872,17 @@ export function progressForAudio(audio) {
 export function clamp(value, min, max) {
     return Math.min(max, Math.max(min, value));
 }
-export function formatAudioTime(value) {
+export function formatAudioTime(value, fractional = false) {
     if (!Number.isFinite(value) || value < 0) {
         return "0:00";
     }
-    const minutes = Math.floor(value / 60);
-    const seconds = Math.floor(value % 60);
-    return `${minutes}:${String(seconds).padStart(2, "0")}`;
+    const precision = fractional ? 2 : 0;
+    const multiplier = 10 ** precision;
+    const roundedValue = Math.round(value * multiplier) / multiplier;
+    const minutes = Math.floor(roundedValue / 60);
+    const seconds = roundedValue % 60;
+    const formattedSeconds = seconds.toFixed(precision).padStart(fractional ? 5 : 2, "0");
+    return `${minutes}:${formattedSeconds}`;
 }
 export function startSpritesheetPreview(options) {
     const frameGrid = options.asset.frameGrid;
@@ -1657,9 +2018,12 @@ export async function openStyleGuideEditor(options) {
     const promoteButton = document.createElement("button");
     promoteButton.type = "button";
     promoteButton.textContent = "Promote style";
+    const regenerateAllButton = document.createElement("button");
+    regenerateAllButton.type = "button";
+    regenerateAllButton.textContent = "Regenerate all...";
     const actions = document.createElement("div");
     actions.className = "ai-game-assets-designer__modal-actions";
-    actions.append(cancelButton, promoteButton, confirmButton);
+    actions.append(cancelButton, promoteButton, regenerateAllButton, confirmButton);
     const draft = () => ({
         prompt: promptInput.value.trim(),
         images: images.map((image) => ({ ...image }))
@@ -1685,6 +2049,12 @@ export async function openStyleGuideEditor(options) {
             promoteButton.disabled = false;
         }
     });
+    regenerateAllButton.addEventListener("click", () => {
+        const current = draft();
+        options.onConfirm(current);
+        close();
+        void options.onRegenerateAll(current);
+    });
     card.append(title, promptField, dropZone, uploadButton, fileInput, imageList, actions);
     dialog.append(card);
     options.root.append(dialog);
@@ -2364,11 +2734,33 @@ export function setFrameBackground(element, options) {
 export function setFrameElementBackground(frameElement, options) {
     const column = options.frame % options.frameGrid.columns;
     const row = Math.floor(options.frame / options.frameGrid.columns);
+    const margin = options.frameGrid.margin ?? 0;
+    const spacing = options.frameGrid.spacing ?? 0;
+    const frameWidth = options.frameGrid.frameWidth;
+    const frameHeight = options.frameGrid.frameHeight;
+    const scale = Math.min(options.displaySize.width / frameWidth, options.displaySize.height / frameHeight);
+    const sheetWidth = (margin * 2) +
+        (options.frameGrid.columns * frameWidth) +
+        (Math.max(0, options.frameGrid.columns - 1) * spacing);
+    const sheetHeight = (margin * 2) +
+        (options.frameGrid.rows * frameHeight) +
+        (Math.max(0, options.frameGrid.rows - 1) * spacing);
+    const sourceX = margin + (column * (frameWidth + spacing));
+    const sourceY = margin + (row * (frameHeight + spacing));
+    const displayFrameWidth = frameWidth * scale;
+    const displayFrameHeight = frameHeight * scale;
+    const frameOffsetX = (options.displaySize.width - displayFrameWidth) / 2;
+    const frameOffsetY = (options.displaySize.height - displayFrameHeight) / 2;
+    frameElement.style.inset = "auto";
+    frameElement.style.left = `${frameOffsetX}px`;
+    frameElement.style.top = `${frameOffsetY}px`;
+    frameElement.style.width = `${displayFrameWidth}px`;
+    frameElement.style.height = `${displayFrameHeight}px`;
     frameElement.style.backgroundImage = `url("${cssUrl(options.src)}")`;
     frameElement.style.backgroundSize =
-        `${options.frameGrid.columns * options.displaySize.width}px ${options.frameGrid.rows * options.displaySize.height}px`;
+        `${sheetWidth * scale}px ${sheetHeight * scale}px`;
     frameElement.style.backgroundPosition =
-        `${-(column * options.displaySize.width)}px ${-(row * options.displaySize.height)}px`;
+        `${-(sourceX * scale)}px ${-(sourceY * scale)}px`;
 }
 export function ensureFramePreviewElement(element) {
     const existing = element.querySelector(":scope > .ai-game-assets-designer__frame-image");
@@ -2380,10 +2772,21 @@ export function ensureFramePreviewElement(element) {
     return frameElement;
 }
 export function generationOverridesFromInputs(elements, asset, format) {
+    const tileset = designerTilesetMetadata(asset);
     const dimensions = {
-        width: positiveIntegerInput(elements.widthInput, asset.frameGrid?.frameWidth ?? asset.dimensions?.width ?? 1),
-        height: positiveIntegerInput(elements.heightInput, asset.frameGrid?.frameHeight ?? asset.dimensions?.height ?? 1)
+        width: positiveIntegerInput(elements.widthInput, asset.frameGrid?.frameWidth ?? tileset?.tileWidth ?? asset.dimensions?.width ?? 1),
+        height: positiveIntegerInput(elements.heightInput, asset.frameGrid?.frameHeight ?? tileset?.tileHeight ?? asset.dimensions?.height ?? 1)
     };
+    if (tileset) {
+        return {
+            tileset: {
+                tileWidth: dimensions.width,
+                tileHeight: dimensions.height,
+                tileCount: positiveIntegerInput(elements.frameCountInput, tileset.tileCount ?? tileset.columns * tileset.rows)
+            },
+            settings: { format }
+        };
+    }
     if (!asset.frameGrid) {
         return {
             dimensions,
@@ -2452,6 +2855,9 @@ export function isAudioAsset(asset) {
         asset?.kind === "voice" ||
         asset?.kind === "voice-line";
 }
+function designerTilesetMetadata(asset) {
+    return asset?.tileset;
+}
 export function isVoiceAsset(asset) {
     return asset?.kind === "voice" || asset?.kind === "voice-line";
 }
@@ -2460,6 +2866,7 @@ export function assetWithGeneratedGeometry(asset, option, options = {}) {
         ...asset,
         dimensions: option.dimensions ?? asset.dimensions,
         frameGrid: option.frameGrid ?? asset.frameGrid,
+        tileset: option.tileset ?? asset.tileset,
         animations: option.animations ??
             (options.inheritAnimations
                 ? asset.animations
@@ -2481,7 +2888,11 @@ export function positiveIntegerInput(input, fallback) {
     const value = Number(input.value);
     if (!Number.isFinite(value))
         return fallback;
-    return Math.max(1, Math.floor(value));
+    const normalized = Math.max(1, Math.floor(value));
+    const maximum = Number(input.max);
+    return input.max && Number.isFinite(maximum)
+        ? Math.min(normalized, Math.max(1, Math.floor(maximum)))
+        : normalized;
 }
 export function positiveNumberInput(input, fallback) {
     const value = Number(input.value);
@@ -2612,7 +3023,7 @@ export async function imageSourceToDataUrl(src) {
         return src;
     const response = await fetch(src);
     if (!response.ok) {
-        throw new Error(`Could not load current animation image (${response.status}).`);
+        throw new Error(`Could not load current asset image (${response.status}).`);
     }
     const responseBlob = await response.blob();
     const blob = responseBlob.type === "application/octet-stream"
@@ -2625,11 +3036,11 @@ export async function imageSourceToDataUrl(src) {
                 resolve(reader.result);
             }
             else {
-                reject(new Error("Could not convert current animation image to a data URL."));
+                reject(new Error("Could not convert current asset image to a data URL."));
             }
         });
         reader.addEventListener("error", () => {
-            reject(reader.error ?? new Error("Could not read current animation image."));
+            reject(reader.error ?? new Error("Could not read current asset image."));
         });
         reader.readAsDataURL(blob);
     });
@@ -2835,6 +3246,36 @@ export function ensureDesignerStyles() {
   font: inherit;
 }
 .ai-game-assets-designer__field textarea { resize: vertical; }
+.ai-game-assets-designer__tile-prompts {
+  display: grid;
+  gap: 7px;
+  margin-bottom: 12px;
+  padding: 10px;
+  border: 1px solid #303949;
+  border-radius: 8px;
+  background: rgba(11, 15, 22, 0.58);
+}
+.ai-game-assets-designer__tile-prompts[hidden] { display: none; }
+.ai-game-assets-designer__tile-prompts-title {
+  color: #e5edf9;
+  font-size: 13px;
+  font-weight: 700;
+}
+.ai-game-assets-designer__tile-prompts-hint {
+  color: #8f9cb5;
+  font-size: 11px;
+  line-height: 1.35;
+}
+.ai-game-assets-designer__tile-prompts-list {
+  display: grid;
+  gap: 8px;
+}
+.ai-game-assets-designer__tile-prompts-list .ai-game-assets-designer__field {
+  margin-bottom: 0;
+}
+.ai-game-assets-designer__tile-prompts-list textarea {
+  min-height: 62px;
+}
 .ai-game-assets-designer__target-variant {
   margin: -4px 0 12px;
   padding: 7px 9px;
@@ -3059,6 +3500,17 @@ export function ensureDesignerStyles() {
   gap: 8px;
   margin-top: 10px;
 }
+.ai-game-assets-designer__tileset-tile-prompt {
+  margin-top: 10px;
+  padding: 9px 10px;
+  border: 1px solid #354058;
+  border-radius: 6px;
+  background: rgba(37, 49, 73, 0.48);
+  color: #d8e4f7;
+  font-size: 12px;
+  line-height: 1.45;
+  white-space: pre-wrap;
+}
 .ai-game-assets-designer__options.is-audio {
   grid-template-columns: 1fr;
 }
@@ -3085,6 +3537,7 @@ export function ensureDesignerStyles() {
   background: transparent;
   display: grid;
   place-items: center;
+  overflow: hidden;
   cursor: pointer;
   color: #dbeafe;
   font: inherit;
@@ -3105,12 +3558,18 @@ export function ensureDesignerStyles() {
   object-fit: contain;
   image-rendering: pixelated;
 }
+.ai-game-assets-designer__option-animation {
+  width: 68px;
+  height: 68px;
+  max-width: 100%;
+}
 .ai-game-assets-designer__option .ai-game-assets-designer__animate-button {
   width: 100%;
 }
 .ai-game-assets-designer__modal {
   position: fixed;
   inset: 0;
+  z-index: 2147483647;
   display: grid;
   place-items: center;
   padding: 18px;
@@ -3126,6 +3585,159 @@ export function ensureDesignerStyles() {
   box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
   padding: 14px;
 }
+.ai-game-assets-designer__tileset-mixer-card {
+  width: min(980px, calc(100vw - 36px));
+}
+.ai-game-assets-designer__tileset-editor-card {
+  width: min(720px, calc(100vw - 36px));
+}
+.ai-game-assets-designer__tileset-editor-stage {
+  border: 1px solid #303a49;
+  border-radius: 8px;
+}
+.ai-game-assets-designer__tileset-editor-strip {
+  margin-top: 8px;
+}
+.ai-game-assets-designer__tileset-transform-fields {
+  margin-bottom: 6px;
+}
+.ai-game-assets-designer__tileset-transform-hint {
+  margin: 0 0 10px;
+  color: #aeb8c8;
+  font-size: 12px;
+  line-height: 1.4;
+}
+.ai-game-assets-designer__tileset-transform-thumb {
+  width: 48px;
+  height: 48px;
+  display: grid;
+  place-items: center;
+}
+.ai-game-assets-designer__tileset-transform-thumb-viewport {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  border-radius: 3px;
+  pointer-events: none;
+}
+@media (max-width: 520px) {
+  .ai-game-assets-designer__tileset-transform-fields {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+.ai-game-assets-designer__tileset-regenerate-card {
+  width: min(620px, calc(100vw - 36px));
+}
+.ai-game-assets-designer__tileset-regenerate-card .ai-game-assets-designer__tileset-tile-prompt {
+  margin: 0 0 12px;
+}
+.ai-game-assets-designer__tileset-mixer-hint {
+  margin: -5px 0 12px;
+  color: #aeb8c8;
+  font-size: 12px;
+  line-height: 1.4;
+}
+.ai-game-assets-designer__tileset-mixer-body {
+  display: grid;
+  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
+  gap: 14px;
+  min-height: 300px;
+}
+.ai-game-assets-designer__tileset-navigator-panel,
+.ai-game-assets-designer__tileset-preview-panel {
+  min-width: 0;
+  border: 1px solid #303a49;
+  border-radius: 8px;
+  background: #0f1218;
+  padding: 10px;
+}
+.ai-game-assets-designer__tileset-section-title {
+  min-height: 20px;
+  margin-bottom: 8px;
+  color: #dbeafe;
+  font-size: 12px;
+  font-weight: 700;
+}
+.ai-game-assets-designer__tileset-navigator {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
+  gap: 7px;
+  max-height: min(58vh, 540px);
+  overflow: auto;
+  padding: 2px;
+}
+.ai-game-assets-designer__tileset-tile {
+  position: relative;
+  overflow: hidden;
+  border: 2px solid #384251;
+  border-radius: 6px;
+  background: #111827;
+  cursor: pointer;
+}
+.ai-game-assets-designer__tileset-tile::after {
+  content: attr(data-source);
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  z-index: 3;
+  border-radius: 999px;
+  background: rgba(8, 12, 20, 0.88);
+  color: #9ca8ba;
+  padding: 1px 4px;
+  font-size: 9px;
+  line-height: 1.4;
+}
+.ai-game-assets-designer__tileset-tile.is-selected {
+  border-color: #6ed3ff;
+  box-shadow: 0 0 0 1px rgba(110, 211, 255, 0.35);
+}
+.ai-game-assets-designer__tileset-tile.is-mixed::after {
+  background: #155e75;
+  color: #ecfeff;
+}
+.ai-game-assets-designer__tileset-choices {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 10px;
+  align-items: start;
+  width: 100%;
+  min-width: 0;
+}
+.ai-game-assets-designer__tileset-choice {
+  display: grid;
+  justify-items: center;
+  gap: 7px;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  border: 2px solid #384251;
+  border-radius: 8px;
+  background: #151b25;
+  color: #dbeafe;
+  padding: 9px;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.ai-game-assets-designer__tileset-choice.is-selected {
+  border-color: #6ed3ff;
+  background: #16283a;
+}
+.ai-game-assets-designer__tileset-choice-preview {
+  position: relative;
+  overflow: hidden;
+  max-width: 100%;
+  border-radius: 6px;
+  background: #0a0d12;
+}
+@media (max-width: 760px) {
+  .ai-game-assets-designer__tileset-mixer-body {
+    grid-template-columns: 1fr;
+  }
+  .ai-game-assets-designer__tileset-navigator {
+    max-height: 180px;
+  }
+}
 .ai-game-assets-designer__modal-title {
   margin-bottom: 12px;
   font-weight: 700;
@@ -3149,6 +3761,9 @@ export function ensureDesignerStyles() {
 .ai-game-assets-designer__modal-feedback[data-kind="error"] {
   color: #ffb4b4;
 }
+.ai-game-assets-designer__modal-feedback[data-kind="success"] {
+  color: #86efac;
+}
 .ai-game-assets-designer__version-list {
   display: grid;
   gap: 10px;
@@ -3242,16 +3857,29 @@ export function ensureDesignerStyles() {
 }
 .ai-game-assets-designer__frame-thumb {
   flex: 0 0 auto;
-  border: 2px solid #384251;
+  border: 0;
   border-radius: 6px;
   background-color: #0f1218;
   position: relative;
   overflow: hidden;
   cursor: pointer;
 }
-.ai-game-assets-designer__frame-thumb.is-selected {
+.ai-game-assets-designer__frame-thumb::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border: 2px solid #384251;
+  border-radius: inherit;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+.ai-game-assets-designer__frame-thumb.is-selected::after {
   border-color: #6ed3ff;
 }
+.ai-game-assets-designer__frame-thumb.is-previewing::after {
+  box-shadow: inset 0 -3px 0 #facc15;
+}
 .ai-game-assets-designer__frame-fields {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -3401,7 +4029,7 @@ export function ensureDesignerStyles() {
 .ai-game-assets-designer__touchup {
   position: fixed;
   inset: 0;
-  z-index: 1;
+  z-index: 2147483647;
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr);
   gap: 10px;
@@ -3587,6 +4215,30 @@ export function ensureDesignerStyles() {
   box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9);
   transform: translate(24px, 24px);
 }
+.ai-game-assets-designer__touchup-selection-rotate {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  min-width: 0;
+  min-height: 0;
+  border: 1px solid #dbeafe;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.94);
+  color: #f8fafc;
+  padding: 0;
+  font: 700 11px/1 ui-sans-serif, system-ui, sans-serif;
+  cursor: pointer;
+  pointer-events: auto;
+}
+.ai-game-assets-designer__touchup-selection-rotate:hover,
+.ai-game-assets-designer__touchup-selection-rotate:focus-visible {
+  border-color: #6ed3ff;
+  color: #6ed3ff;
+  outline: none;
+}
 .ai-game-assets-designer__touchup-side {
   min-height: 0;
   display: grid;