@jjlmoya/utils-games-development 1.69.0 → 1.70.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-games-development",
-    "version": "1.69.0",
+    "version": "1.70.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -1,6 +1,7 @@
 import type { GamesCategoryEntry } from '../types';
 import { steamCapsuleGenerator } from '../tool/steamCapsuleGenerator/entry';
 import { spriteSheetPacker } from '../tool/spriteSheetPacker/entry';
+import { fixerEditor } from '../tool/fixerEditor/entry';
 import { audioLoopPointFinder } from '../tool/audioLoopPointFinder/entry';
 import { saveFileEditor } from '../tool/saveFileEditor/entry';
 import { steamBbcodeTranslator } from '../tool/steamBbcodeTranslator/entry';
@@ -12,7 +13,7 @@ import { gamePixelPerUnitPlanner } from '../tool/gamePixelPerUnitPlanner/entry';
 
 export const gamesCategory: GamesCategoryEntry = {
   icon: 'mdi:gamepad-variant',
-  tools: [steamCapsuleGenerator, spriteSheetPacker, audioLoopPointFinder, saveFileEditor, steamBbcodeTranslator, gameUiAccessibilityTester, hitboxHurtboxAnimator, damageFormulaLab, gameDeltaTimeFixedTimestepLab, gamePixelPerUnitPlanner],
+  tools: [steamCapsuleGenerator, spriteSheetPacker, fixerEditor, audioLoopPointFinder, saveFileEditor, steamBbcodeTranslator, gameUiAccessibilityTester, hitboxHurtboxAnimator, damageFormulaLab, gameDeltaTimeFixedTimestepLab, gamePixelPerUnitPlanner],
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),

package/src/entries.ts

@@ -4,6 +4,8 @@ export { itchioGameTester } from './tool/itchioGameTester/entry';
 export type { ItchioGameTesterUI, ItchioGameTesterLocaleContent } from './tool/itchioGameTester/entry';
 export { spriteSheetPacker } from './tool/spriteSheetPacker/entry';
 export type { SpriteSheetPackerUI, SpriteSheetPackerLocaleContent } from './tool/spriteSheetPacker/entry';
+export { fixerEditor } from './tool/fixerEditor/entry';
+export type { FixerEditorUI, FixerEditorLocaleContent } from './tool/fixerEditor/entry';
 export { audioLoopPointFinder } from './tool/audioLoopPointFinder/entry';
 export type { AudioLoopPointFinderUI, AudioLoopPointFinderLocaleContent } from './tool/audioLoopPointFinder/entry';
 export { saveFileEditor } from './tool/saveFileEditor/entry';
@@ -40,5 +42,6 @@ import { hitboxHurtboxAnimator } from './tool/hitboxHurtboxAnimator/entry';
 import { damageFormulaLab } from './tool/damageFormulaLab/entry';
 import { gameDeltaTimeFixedTimestepLab } from './tool/gameDeltaTimeFixedTimestepLab/entry';
 import { gamePixelPerUnitPlanner } from './tool/gamePixelPerUnitPlanner/entry';
+import { fixerEditor } from './tool/fixerEditor/entry';
 
-export const ALL_ENTRIES = [steamCapsuleGenerator, itchioGameTester, spriteSheetPacker, audioLoopPointFinder, saveFileEditor, localizationSanitizer, steamBbcodeTranslator, retroSfxGenerator, pixelArtPaletteSwapper, gameUiAccessibilityTester, hitboxHurtboxAnimator, damageFormulaLab, gameDeltaTimeFixedTimestepLab, gamePixelPerUnitPlanner];
+export const ALL_ENTRIES = [steamCapsuleGenerator, itchioGameTester, spriteSheetPacker, audioLoopPointFinder, saveFileEditor, localizationSanitizer, steamBbcodeTranslator, retroSfxGenerator, pixelArtPaletteSwapper, gameUiAccessibilityTester, hitboxHurtboxAnimator, damageFormulaLab, gameDeltaTimeFixedTimestepLab, gamePixelPerUnitPlanner, fixerEditor];

package/src/index.ts

@@ -23,5 +23,6 @@ export { PIXEL_ART_PALETTE_SWAPPER_TOOL, pixelArtPaletteSwapper } from './tool/p
 export { GAME_UI_ACCESSIBILITY_TESTER_TOOL, gameUiAccessibilityTester } from './tool/gameUIAccessibilityTester';
 export { HITBOX_HURTBOX_ANIMATOR_TOOL, hitboxHurtboxAnimator } from './tool/hitboxHurtboxAnimator';
 export { DAMAGE_FORMULA_LAB_TOOL, damageFormulaLab } from './tool/damageFormulaLab';
+export { FIXER_EDITOR_TOOL, fixerEditor } from './tool/fixerEditor';
 
 export type { ToolLocaleContent as GamesToolLocaleContent } from './types';

package/src/tests/locale_completeness.test.ts

@@ -1,8 +1,15 @@
 import { describe, it, expect } from 'vitest';
 import { ALL_TOOLS } from '../tools';
+import { fixerEditor } from '../tool/fixerEditor/entry';
 
 describe('Locale Completeness Validation', () => {
-  it('fourteen tools are registered', () => {
-    expect(ALL_TOOLS.length).toBe(14);
+  it('fifteen tools are registered', () => {
+    expect(ALL_TOOLS.length).toBe(15);
+  });
+
+  it('sprite sheet fixer editor exposes every supported locale', () => {
+    expect(Object.keys(fixerEditor.i18n).sort()).toEqual([
+      'de', 'en', 'es', 'fr', 'id', 'it', 'ja', 'ko', 'nl', 'pl', 'pt', 'ru', 'sv', 'tr', 'zh'
+    ]);
   });
 });

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { gamesCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 14 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(14);
+    it('should have 15 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(15);
     });
 
     it('gamesCategory should be defined', () => {

package/src/tool/fixerEditor/auto-trim.ts

@@ -0,0 +1,37 @@
+import { trimTransparent, updateAdjustment } from './logic';
+import type { ControllerContext } from './controller';
+import type { FrameSpec } from './types';
+
+export function trimFrame(context: ControllerContext): void {
+  const { state, ui } = context;
+  const frame = state.frames[state.selected];
+  if (!frame || !state.image) return;
+  const crop = getTrimCrop(state.image, frame);
+  if (!crop) return;
+  context.recordHistory();
+  state.adjustments[String(frame.index)] = updateAdjustment(frame, state.adjustments[String(frame.index)] ?? frame.adjustment, { crop });
+  context.updateView(ui.ready);
+}
+
+export function trimAll(context: ControllerContext): void {
+  const { state, ui } = context;
+  if (!state.image || state.frames.length === 0) return;
+  const image = state.image;
+  context.recordHistory();
+  state.frames.forEach((frame) => {
+    const crop = getTrimCrop(image, frame);
+    if (crop) state.adjustments[String(frame.index)] = updateAdjustment(frame, state.adjustments[String(frame.index)] ?? frame.adjustment, { crop });
+  });
+  context.updateView(ui.ready);
+}
+
+function getTrimCrop(image: HTMLImageElement, frame: FrameSpec) {
+  const sourceCanvas = document.createElement('canvas');
+  sourceCanvas.width = frame.width;
+  sourceCanvas.height = frame.height;
+  const source = sourceCanvas.getContext('2d');
+  if (!source) return null;
+  source.imageSmoothingEnabled = false;
+  source.drawImage(image, frame.sourceX, frame.sourceY, frame.width, frame.height, 0, 0, frame.width, frame.height);
+  return trimTransparent(source.getImageData(0, 0, frame.width, frame.height).data, frame.width, frame.height);
+}

package/src/tool/fixerEditor/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { bibliographyEntries } from './bibliography';
+---
+
+<SharedBibliography links={bibliographyEntries} />

package/src/tool/fixerEditor/bibliography.ts

@@ -0,0 +1,6 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliographyEntries: BibliographyEntry[] = [
+  { name: 'Cocos Creator 3.8 API: SpriteFrame', url: 'https://docs.cocos.com/creator/3.8/api/zh/class/SpriteFrame' },
+  { name: 'Godot Engine 4.x documentation: Sprite2D', url: 'https://docs.godotengine.org/es/4.x/classes/class_sprite2d.html' },
+];

package/src/tool/fixerEditor/component.astro

@@ -0,0 +1,114 @@
+---
+import type { FixerEditorUI } from './ui';
+import './fixer-editor.css';
+
+interface Props {
+  ui: FixerEditorUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="fe-shell" data-tool="fixer-editor" data-ui={JSON.stringify(ui)}>
+  <div class="fe-command-rail">
+    <div class="fe-upload-zone" id="fe-drop-zone" tabindex="0" role="button" aria-label={ui.uploadTitle}>
+      <span class="fe-upload-mark" aria-hidden="true">+</span>
+      <span class="fe-upload-copy"><strong>{ui.uploadTitle}</strong><small>{ui.uploadHint}</small></span>
+      <span class="fe-button fe-primary fe-upload-cta">{ui.chooseImage}</span>
+      <input id="fe-file-input" class="fe-hidden" type="file" accept="image/png,image/jpeg,image/webp" aria-label={ui.chooseImage} />
+    </div>
+    <div class="fe-source-meta">
+      <span class="fe-file-name"><span>{ui.sourceFile}</span> <strong id="fe-source-name">{ui.noImage}</strong></span>
+      <span id="fe-status" class="fe-status" role="status" aria-live="polite">{ui.statusEmpty}</span>
+    </div>
+  </div>
+
+  <div id="fe-workbench" class="fe-workbench" hidden>
+    <aside class="fe-panel fe-grid-panel">
+      <div class="fe-panel-label">01</div>
+      <h2>{ui.gridSettings}</h2>
+      <div class="fe-field-grid">
+        <label><span>{ui.columns}</span><input id="fe-columns" type="number" min="1" max="128" value="4" /></label>
+        <label><span>{ui.rows}</span><input id="fe-rows" type="number" min="1" max="128" value="2" /></label>
+        <label><span>{ui.cellWidth}</span><input id="fe-cell-width" type="number" min="1" max="4096" value="64" /></label>
+        <label><span>{ui.cellHeight}</span><input id="fe-cell-height" type="number" min="1" max="4096" value="64" /></label>
+        <label><span>{ui.marginX}</span><input id="fe-margin-x" type="number" min="0" max="4096" value="0" /></label>
+        <label><span>{ui.marginY}</span><input id="fe-margin-y" type="number" min="0" max="4096" value="0" /></label>
+        <label><span>{ui.gapX}</span><input id="fe-gap-x" type="number" min="0" max="4096" value="0" /></label>
+        <label><span>{ui.gapY}</span><input id="fe-gap-y" type="number" min="0" max="4096" value="0" /></label>
+      </div>
+      <div class="fe-panel-actions">
+        <button id="fe-auto-detect" class="fe-button fe-primary" type="button">{ui.autoDetectGrid}</button>
+        <button id="fe-reset-all" class="fe-button fe-quiet" type="button">{ui.resetAll}</button>
+        <button id="fe-undo" class="fe-button fe-quiet" type="button">{ui.undo}</button>
+        <button id="fe-redo" class="fe-button fe-quiet" type="button">{ui.redo}</button>
+      </div>
+    </aside>
+
+    <main class="fe-stage-panel">
+      <div class="fe-stage-heading">
+        <div><span class="fe-panel-label">02</span><h2>{ui.sheetView}</h2></div>
+        <label class="fe-zoom"><span>{ui.zoom}</span><input id="fe-zoom" type="range" min="1" max="8" value="3" /><output id="fe-zoom-value">3x</output></label>
+      </div>
+      <div class="fe-sheet-pair">
+        <figure class="fe-sheet-view"><figcaption><span class="fe-source-mark"></span>{ui.sourceLabel}</figcaption><div class="fe-canvas-wrap"><canvas id="fe-source-canvas" width="1" height="1" aria-label={ui.sourceLabel}></canvas></div></figure>
+        <figure class="fe-sheet-view fe-corrected-view"><figcaption><span class="fe-result-mark"></span>{ui.correctedView}</figcaption><div class="fe-canvas-wrap"><canvas id="fe-result-canvas" width="1" height="1" aria-label={ui.resultLabel}></canvas></div></figure>
+      </div>
+      <div class="fe-stage-footer"><span><strong>{ui.imageSize}</strong> <span id="fe-image-size">0 x 0 px</span></span><span>{ui.metadataNote}</span></div>
+      <div class="fe-strip-heading"><span class="fe-panel-label">03</span><h2>{ui.frameStrip}</h2><span class="fe-count"><span id="fe-frame-count">0</span> {ui.frameCount}</span></div>
+      <div id="fe-filmstrip" class="fe-filmstrip" role="list" aria-label={ui.frameStrip}></div>
+    </main>
+
+    <aside class="fe-panel fe-inspector-panel">
+      <div class="fe-panel-label">04</div>
+      <div class="fe-inspector-heading"><h2>{ui.activeFrame}</h2><strong id="fe-frame-number">0 / 0</strong></div>
+      <div class="fe-active-canvas-wrap"><canvas id="fe-frame-canvas" width="64" height="64" aria-label={ui.activeFrame}></canvas></div>
+      <div class="fe-frame-state" id="fe-frame-state">{ui.unchanged}</div>
+      <div class="fe-crop-grid">
+        <label><span>{ui.cropX}</span><input id="fe-crop-x" type="number" min="0" value="0" /></label>
+        <label><span>{ui.cropY}</span><input id="fe-crop-y" type="number" min="0" value="0" /></label>
+        <label><span>{ui.cropWidth}</span><input id="fe-crop-width" type="number" min="1" value="64" /></label>
+        <label><span>{ui.cropHeight}</span><input id="fe-crop-height" type="number" min="1" value="64" /></label>
+        <label><span>{ui.offsetX}</span><input id="fe-offset-x" type="number" value="0" /></label>
+        <label><span>{ui.offsetY}</span><input id="fe-offset-y" type="number" value="0" /></label>
+      </div>
+      <div class="fe-nudge-heading"><span>{ui.nudgeStep}</span><div class="fe-step-buttons"><button class="fe-step is-active" data-step="1" type="button">{ui.stepOne}</button><button class="fe-step" data-step="2" type="button">{ui.stepTwo}</button><button class="fe-step" data-step="4" type="button">{ui.stepFour}</button></div></div>
+      <div class="fe-nudge-pad" aria-label={ui.frameTools}>
+        <span></span><button class="fe-nudge" data-axis="y" data-direction="-1" type="button" aria-label={ui.moveUp}>↑</button><span></span>
+        <button class="fe-nudge" data-axis="x" data-direction="-1" type="button" aria-label={ui.moveLeft}>←</button><span class="fe-crosshair" aria-hidden="true"></span><button class="fe-nudge" data-axis="x" data-direction="1" type="button" aria-label={ui.moveRight}>→</button>
+        <span></span><button class="fe-nudge" data-axis="y" data-direction="1" type="button" aria-label={ui.moveDown}>↓</button><span></span>
+      </div>
+      <div class="fe-inspector-actions"><button id="fe-trim" class="fe-button fe-primary" type="button">{ui.trimTransparent}</button><button id="fe-trim-all" class="fe-button fe-quiet" type="button">{ui.trimAll}</button><button id="fe-reset-frame" class="fe-button fe-quiet" type="button">{ui.resetFrame}</button></div>
+    </aside>
+  </div>
+
+  <div id="fe-tools" class="fe-output-bar" hidden>
+    <div class="fe-output-copy">
+      <strong>{ui.history}</strong>
+      <div class="fe-output-stat"><span id="fe-correction-count">0</span><span>{ui.correctionCount}</span></div>
+    </div>
+    <div class="fe-playback">
+      <span class="fe-flipbook-label">{ui.flipbook}</span>
+      <button id="fe-play" class="fe-button fe-quiet" type="button">{ui.play}</button>
+      <button id="fe-pause" class="fe-button fe-quiet" type="button">{ui.pause}</button>
+      <label class="fe-fps"><span>{ui.fps}</span><input id="fe-fps" type="range" min="1" max="30" value="12" /><output id="fe-fps-value">12</output></label>
+    </div>
+    <div class="fe-output-actions">
+      <button id="fe-save-project" class="fe-button fe-quiet" type="button">{ui.saveProject}</button>
+      <button id="fe-load-project-button" class="fe-button fe-quiet" type="button">{ui.loadProject}</button>
+      <input id="fe-load-project" class="fe-hidden" type="file" accept="application/json,.json" aria-label={ui.loadProject} />
+      <button id="fe-export-json" class="fe-button fe-quiet" type="button">{ui.exportJson}</button>
+      <button id="fe-export-sheet" class="fe-button fe-primary" type="button">{ui.exportSheet}</button>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { initFixerEditor } from './controller';
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initFixerEditor, { once: true });
+  } else {
+    initFixerEditor();
+  }
+</script>

package/src/tool/fixerEditor/controller.ts

@@ -0,0 +1,275 @@
+import { renderEditor } from './dom-views';
+import { summarizeEditor } from './evaluator';
+import { createDefaultAdjustment, createFrameSpecs, createHistoryState, createProjectFile, DEFAULT_GRID, nudgeAdjustment, recalculateGrid, updateAdjustment, cloneAdjustments, normalizeGrid } from './logic';
+import { trimAll, trimFrame } from './auto-trim';
+import { createInitialState } from './state';
+import { applyProjectToContext, bindEvents } from './events';
+import { animate, autoDetectGrid, loadImage, restoreDraftImage } from './runtime';
+import { loadDraft, saveDraft } from './storage';
+import type { FixerEditorUI } from './ui';
+import type { DraftSession, FrameAdjustment, FrameSpec, GridSettings, HistoryState, ProjectFile } from './types';
+import type { EditorRefs } from './dom-views';
+
+export interface EditorState {
+  image: HTMLImageElement | null;
+  imageDataUrl?: string;
+  sourceName: string;
+  grid: GridSettings;
+  frames: FrameSpec[];
+  adjustments: Record<string, FrameAdjustment>;
+  selected: number;
+  step: number;
+  zoom: number;
+  fps: number;
+  playing: boolean;
+  animationId: number | null;
+  history: HistoryState[];
+  future: HistoryState[];
+  pendingProject: ProjectFile | null;
+}
+
+export interface ControllerContext {
+  refs: EditorRefs;
+  ui: FixerEditorUI;
+  state: EditorState;
+  tools: HTMLElement;
+  updateView: (statusText: string) => void;
+  animate: () => void;
+  persistDraft: () => void;
+  recordHistory: () => void;
+}
+
+export interface EditorInputs {
+  columns: HTMLInputElement;
+  rows: HTMLInputElement;
+  'cell-width': HTMLInputElement;
+  'cell-height': HTMLInputElement;
+  'margin-x': HTMLInputElement;
+  'margin-y': HTMLInputElement;
+  'gap-x': HTMLInputElement;
+  'gap-y': HTMLInputElement;
+  'crop-x': HTMLInputElement;
+  'crop-y': HTMLInputElement;
+  'crop-width': HTMLInputElement;
+  'crop-height': HTMLInputElement;
+  'offset-x': HTMLInputElement;
+  'offset-y': HTMLInputElement;
+}
+
+function required<T extends Element>(root: ParentNode, id: string): T {
+  const element = root.querySelector(`#${id}`);
+  if (!element) throw new Error(`Missing fixer-editor element: ${id}`);
+  return element as T;
+}
+
+function getRefs(shell: HTMLElement): EditorRefs {
+  return {
+    shell,
+    sourceCanvas: required<HTMLCanvasElement>(shell, 'fe-source-canvas'),
+    resultCanvas: required<HTMLCanvasElement>(shell, 'fe-result-canvas'),
+    frameCanvas: required<HTMLCanvasElement>(shell, 'fe-frame-canvas'),
+    filmstrip: required<HTMLElement>(shell, 'fe-filmstrip'),
+    status: required<HTMLElement>(shell, 'fe-status'),
+    sourceName: required<HTMLElement>(shell, 'fe-source-name'),
+    frameNumber: required<HTMLElement>(shell, 'fe-frame-number'),
+    frameState: required<HTMLElement>(shell, 'fe-frame-state'),
+    frameCount: required<HTMLElement>(shell, 'fe-frame-count'),
+    correctionCount: required<HTMLElement>(shell, 'fe-correction-count'),
+    imageSize: required<HTMLElement>(shell, 'fe-image-size'),
+    workbench: required<HTMLElement>(shell, 'fe-workbench'),
+    exportSheet: required<HTMLButtonElement>(shell, 'fe-export-sheet'),
+    exportJson: required<HTMLButtonElement>(shell, 'fe-export-json'),
+    loadProject: required<HTMLInputElement>(shell, 'fe-load-project'),
+  };
+}
+
+function getInputs(shell: HTMLElement): EditorInputs {
+  return {
+    columns: required<HTMLInputElement>(shell, 'fe-columns'),
+    rows: required<HTMLInputElement>(shell, 'fe-rows'),
+    'cell-width': required<HTMLInputElement>(shell, 'fe-cell-width'),
+    'cell-height': required<HTMLInputElement>(shell, 'fe-cell-height'),
+    'margin-x': required<HTMLInputElement>(shell, 'fe-margin-x'),
+    'margin-y': required<HTMLInputElement>(shell, 'fe-margin-y'),
+    'gap-x': required<HTMLInputElement>(shell, 'fe-gap-x'),
+    'gap-y': required<HTMLInputElement>(shell, 'fe-gap-y'),
+    'crop-x': required<HTMLInputElement>(shell, 'fe-crop-x'),
+    'crop-y': required<HTMLInputElement>(shell, 'fe-crop-y'),
+    'crop-width': required<HTMLInputElement>(shell, 'fe-crop-width'),
+    'crop-height': required<HTMLInputElement>(shell, 'fe-crop-height'),
+    'offset-x': required<HTMLInputElement>(shell, 'fe-offset-x'),
+    'offset-y': required<HTMLInputElement>(shell, 'fe-offset-y'),
+  };
+}
+
+function readGrid(inputs: EditorInputs): GridSettings {
+  return normalizeGrid({ columns: Number(inputs.columns.value), rows: Number(inputs.rows.value), cellWidth: Number(inputs['cell-width'].value), cellHeight: Number(inputs['cell-height'].value), marginX: Number(inputs['margin-x'].value), marginY: Number(inputs['margin-y'].value), gapX: Number(inputs['gap-x'].value), gapY: Number(inputs['gap-y'].value) });
+}
+
+function writeGrid(inputs: EditorInputs, grid: GridSettings): void {
+  inputs.columns.value = String(grid.columns);
+  inputs.rows.value = String(grid.rows);
+  inputs['cell-width'].value = String(grid.cellWidth);
+  inputs['cell-height'].value = String(grid.cellHeight);
+  inputs['margin-x'].value = String(grid.marginX);
+  inputs['margin-y'].value = String(grid.marginY);
+  inputs['gap-x'].value = String(grid.gapX);
+  inputs['gap-y'].value = String(grid.gapY);
+}
+
+function getAdjustment(state: EditorState): FrameAdjustment {
+  const frame = state.frames[state.selected];
+  return frame ? state.adjustments[String(frame.index)] ?? createDefaultAdjustment(frame.width, frame.height) : createDefaultAdjustment(1, 1);
+}
+
+function writeAdjustment(shell: HTMLElement, adjustment: FrameAdjustment): void {
+  const values: Record<string, number> = { 'crop-x': adjustment.crop.x, 'crop-y': adjustment.crop.y, 'crop-width': adjustment.crop.width, 'crop-height': adjustment.crop.height, 'offset-x': adjustment.offsetX, 'offset-y': adjustment.offsetY };
+  Object.entries(values).forEach(([id, value]) => { required<HTMLInputElement>(shell, `fe-${id}`).value = String(value); });
+}
+
+function snapshot(state: EditorState): HistoryState {
+  return createHistoryState(state.grid, state.adjustments, state.selected);
+}
+
+function recordHistory(state: EditorState): void {
+  state.history.push(snapshot(state));
+  state.history = state.history.slice(-40);
+  state.future = [];
+}
+
+function restoreState(context: ControllerContext, historyState: HistoryState): void {
+  const { state } = context;
+  state.grid = historyState.grid;
+  state.adjustments = cloneAdjustments(historyState.adjustments);
+  state.selected = Math.min(historyState.selected, Math.max(0, state.frames.length - 1));
+  state.frames = state.image ? createFrameSpecs(state.image.naturalWidth, state.image.naturalHeight, state.grid) : [];
+  updateView(context, context.ui.ready);
+}
+
+function updateView(context: ControllerContext, statusText: string): void {
+  const { refs, state, ui } = context;
+  const summary = state.image ? summarizeEditor({ frames: state.frames, adjustments: state.adjustments, imageWidth: state.image.naturalWidth, imageHeight: state.image.naturalHeight }) : null;
+  context.tools.hidden = !state.image;
+  renderEditor({ refs, image: state.image, frames: state.frames, adjustments: state.adjustments, grid: state.grid, selected: state.selected, zoom: state.zoom, sourceName: state.sourceName, statusText, noImageText: ui.noImage, modifiedText: ui.modified, unchangedText: ui.unchanged, selectFrameText: ui.selectFrame });
+  if (state.image) writeGrid(getInputs(context.refs.shell), state.grid);
+  if (summary) refs.correctionCount.textContent = String(summary.modifiedCount);
+  if (state.frames[state.selected]) writeAdjustment(context.refs.shell, getAdjustment(state));
+  context.persistDraft();
+}
+
+function getDraftSession(state: EditorState): DraftSession {
+  return { selected: state.selected, step: state.step, zoom: state.zoom, fps: state.fps };
+}
+
+function persistState(context: ControllerContext): void {
+  const { state } = context;
+  if (!state.image) return;
+  const project = createProjectFile({ sourceName: state.sourceName, sourceWidth: state.image.naturalWidth, sourceHeight: state.image.naturalHeight, grid: state.grid, adjustments: state.adjustments });
+  saveDraft(project, getDraftSession(state));
+}
+
+function updateGrid(context: ControllerContext, inputs: EditorInputs, changed: keyof EditorInputs): void {
+  const { state, ui } = context;
+  recordHistory(state);
+  state.grid = readGrid(inputs);
+  if (state.image && changed === 'cell-width') state.grid = recalculateGrid(state.grid, state.image.naturalWidth, state.image.naturalHeight, 'columns');
+  if (state.image && changed === 'cell-height') state.grid = recalculateGrid(state.grid, state.image.naturalWidth, state.image.naturalHeight, 'rows');
+  writeGrid(inputs, state.grid);
+  state.frames = state.image ? createFrameSpecs(state.image.naturalWidth, state.image.naturalHeight, state.grid) : [];
+  state.selected = Math.min(state.selected, Math.max(0, state.frames.length - 1));
+  updateView(context, ui.ready);
+}
+
+function updateSelectedAdjustment(context: ControllerContext, inputs: EditorInputs): void {
+  const { state, ui } = context;
+  const frame = state.frames[state.selected];
+  if (!frame) return;
+  recordHistory(state);
+  const patch = { crop: { x: Number(inputs['crop-x'].value), y: Number(inputs['crop-y'].value), width: Number(inputs['crop-width'].value), height: Number(inputs['crop-height'].value) }, offsetX: Number(inputs['offset-x'].value), offsetY: Number(inputs['offset-y'].value) };
+  state.adjustments[String(frame.index)] = updateAdjustment(frame, getAdjustment(state), patch);
+  updateView(context, ui.ready);
+}
+
+function selectFrame(context: ControllerContext, index: number): void {
+  const { state, ui } = context;
+  state.selected = Math.max(0, Math.min(index, state.frames.length - 1));
+  updateView(context, ui.ready);
+}
+
+function nudge(context: ControllerContext, axis: 'x' | 'y', direction: number): void {
+  const { state, ui } = context;
+  const frame = state.frames[state.selected];
+  if (!frame) return;
+  recordHistory(state);
+  state.adjustments[String(frame.index)] = nudgeAdjustment(frame, getAdjustment(state), axis, direction * state.step);
+  updateView(context, ui.ready);
+}
+
+function resetFrame(context: ControllerContext): void {
+  const { state, ui } = context;
+  const frame = state.frames[state.selected];
+  if (!frame) return;
+  recordHistory(state);
+  state.adjustments[String(frame.index)] = createDefaultAdjustment(frame.width, frame.height);
+  updateView(context, ui.ready);
+}
+
+function resetAll(context: ControllerContext): void {
+  const { state, ui } = context;
+  recordHistory(state);
+  state.adjustments = {};
+  state.grid = DEFAULT_GRID;
+  state.frames = state.image ? createFrameSpecs(state.image.naturalWidth, state.image.naturalHeight, state.grid) : [];
+  state.selected = 0;
+  updateView(context, ui.ready);
+}
+
+function undo(context: ControllerContext): void {
+  const { state } = context;
+  const previous = state.history.pop();
+  if (!previous) return;
+  state.future.push(snapshot(state));
+  restoreState(context, previous);
+}
+
+function redo(context: ControllerContext): void {
+  const { state } = context;
+  const next = state.future.pop();
+  if (!next) return;
+  state.history.push(snapshot(state));
+  restoreState(context, next);
+}
+
+function createActions(context: ControllerContext) {
+  return {
+    loadImage: loadImage.bind(null, context),
+    updateGrid: updateGrid.bind(null, context),
+    updateSelectedAdjustment: updateSelectedAdjustment.bind(null, context),
+    selectFrame: selectFrame.bind(null, context),
+    nudge: nudge.bind(null, context),
+    trimFrame: trimFrame.bind(null, context),
+    trimAll: trimAll.bind(null, context),
+    resetFrame: resetFrame.bind(null, context),
+    resetAll: resetAll.bind(null, context),
+    undo: undo.bind(null, context),
+    redo: redo.bind(null, context),
+    applyProject: applyProjectToContext.bind(null, context),
+  };
+}
+
+export function initFixerEditor(): void {
+  const shell = document.querySelector<HTMLElement>('[data-tool="fixer-editor"]');
+  if (!shell || shell.dataset.initialized) return;
+  shell.dataset.initialized = 'true';
+  const ui = JSON.parse(shell.dataset.ui ?? '{}') as FixerEditorUI;
+  const refs = getRefs(shell);
+  const tools = required<HTMLElement>(shell, 'fe-tools');
+  const draft = loadDraft();
+  const state = createInitialState(draft);
+  const context: ControllerContext = { refs, ui, state, tools, updateView: (statusText) => updateView(context, statusText), animate: () => animate(context), persistDraft: () => persistState(context), recordHistory: () => recordHistory(state) };
+  const inputs = getInputs(shell);
+  writeGrid(inputs, state.grid);
+  updateView(context, ui.statusEmpty);
+  bindEvents({ context, inputs, actions: { ...createActions(context), autoDetect: () => autoDetectGrid(context) } });
+  if (state.imageDataUrl) restoreDraftImage(context, state.imageDataUrl, state.sourceName);
+}