@ai-game-assets/phaser 0.6.0 → 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);
@@ -135,6 +151,10 @@ export function createDesignerElements(options, manifest, selectedAssetId) {
     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...";
@@ -148,19 +168,23 @@ 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,
@@ -176,7 +200,9 @@ export function createDesignerElements(options, manifest, selectedAssetId) {
         animationSelect,
         animationField,
         widthInput,
+        widthField,
         heightInput,
+        heightField,
         dimensionGrid,
         frameCountInput,
         frameCountField,
@@ -191,6 +217,9 @@ export function createDesignerElements(options, manifest, selectedAssetId) {
         voiceTextInput,
         voiceTextField,
         promptInput,
+        promptField,
+        tilesetPromptsField,
+        tilesetPromptsList,
         currentImage,
         currentAudio,
         currentAnimation,
@@ -201,8 +230,10 @@ export function createDesignerElements(options, manifest, selectedAssetId) {
         uploadButton,
         deriveButton,
         regenerateButton,
+        mixTilesetButton,
         versionsButton,
         promoteButton,
+        promoteAllButton,
         restartButton,
         versionLabel,
         options: optionsGrid,
@@ -406,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({
@@ -425,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;
 }
@@ -471,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,
@@ -480,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
@@ -588,6 +703,7 @@ const frameTouchUpPreferences = {
     color: "#f8fafc",
     tool: "brush"
 };
+let frameTouchUpClipboard;
 export async function openFrameTouchUpEditor(options) {
     const sourceImage = await loadImageElement(options.frameSrc);
     const dialog = document.createElement("div");
@@ -646,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");
@@ -679,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";
@@ -718,6 +842,7 @@ export async function openFrameTouchUpEditor(options) {
     let drawingPointerId;
     let selectionStart;
     let selection;
+    let floatingSelection;
     let animationTimeout;
     let animationCursor = 0;
     let disposed = false;
@@ -775,6 +900,63 @@ export async function openFrameTouchUpEditor(options) {
         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)
@@ -785,6 +967,7 @@ export async function openFrameTouchUpEditor(options) {
     const restore = (imageData) => {
         context.putImageData(imageData, 0, 0);
         selection = undefined;
+        floatingSelection = undefined;
         redrawEditor();
         setDirty(true);
     };
@@ -814,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);
@@ -997,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);
@@ -1004,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;
@@ -1054,6 +1295,8 @@ export async function openFrameTouchUpEditor(options) {
         brushMenu.hidden = true;
     };
     const close = () => {
+        if (disposed)
+            return;
         disposed = true;
         if (animationTimeout !== undefined)
             window.clearTimeout(animationTimeout);
@@ -1063,6 +1306,7 @@ export async function openFrameTouchUpEditor(options) {
         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?"))
@@ -1074,6 +1318,23 @@ export async function openFrameTouchUpEditor(options) {
             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();
@@ -1141,6 +1402,7 @@ export async function openFrameTouchUpEditor(options) {
             pickColorAt(point);
             return;
         }
+        floatingSelection = undefined;
         pushUndo();
         drawing = true;
         drawingPointerId = event.pointerId;
@@ -1246,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);
@@ -1747,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 }))
@@ -1775,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);
@@ -2492,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,
@@ -2564,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";
 }
@@ -2572,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
@@ -2593,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);
@@ -2724,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"
@@ -2737,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);
     });
@@ -2947,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;
@@ -3171,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;
 }
@@ -3245,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;
@@ -3268,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;
@@ -3381,6 +3877,9 @@ export function ensureDesignerStyles() {
 .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));
@@ -3530,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;
@@ -3716,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;