@jjlmoya/utils-games-development 1.62.0 → 1.63.0

package/package.json

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

package/src/category/index.ts

@@ -5,10 +5,11 @@ import { audioLoopPointFinder } from '../tool/audioLoopPointFinder/entry';
 import { saveFileEditor } from '../tool/saveFileEditor/entry';
 import { steamBbcodeTranslator } from '../tool/steamBbcodeTranslator/entry';
 import { gameUiAccessibilityTester } from '../tool/gameUIAccessibilityTester/entry';
+import { hitboxHurtboxAnimator } from '../tool/hitboxHurtboxAnimator/entry';
 
 export const gamesCategory: GamesCategoryEntry = {
   icon: 'mdi:gamepad-variant',
-  tools: [steamCapsuleGenerator, spriteSheetPacker, audioLoopPointFinder, saveFileEditor, steamBbcodeTranslator, gameUiAccessibilityTester],
+  tools: [steamCapsuleGenerator, spriteSheetPacker, audioLoopPointFinder, saveFileEditor, steamBbcodeTranslator, gameUiAccessibilityTester, hitboxHurtboxAnimator],
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),

package/src/entries.ts

@@ -16,6 +16,8 @@ export { retroSfxGenerator } from './tool/retroSfxGenerator/entry';
 export type { RetroSfxGeneratorUI, RetroSfxGeneratorLocaleContent } from './tool/retroSfxGenerator/entry';
 export { pixelArtPaletteSwapper } from './tool/pixelArtPaletteSwapper/entry';
 export type { PixelArtPaletteSwapperUI, PixelArtPaletteSwapperLocaleContent } from './tool/pixelArtPaletteSwapper/entry';
+export { hitboxHurtboxAnimator } from './tool/hitboxHurtboxAnimator/entry';
+export type { HitboxHurtboxAnimatorUI, HitboxHurtboxAnimatorLocaleContent } from './tool/hitboxHurtboxAnimator/entry';
 export { gamesCategory } from './category';
 import { steamCapsuleGenerator } from './tool/steamCapsuleGenerator/entry';
 import { itchioGameTester } from './tool/itchioGameTester/entry';
@@ -27,5 +29,6 @@ import { steamBbcodeTranslator } from './tool/steamBbcodeTranslator/entry';
 import { retroSfxGenerator } from './tool/retroSfxGenerator/entry';
 import { pixelArtPaletteSwapper } from './tool/pixelArtPaletteSwapper/entry';
 import { gameUiAccessibilityTester } from './tool/gameUIAccessibilityTester/entry';
+import { hitboxHurtboxAnimator } from './tool/hitboxHurtboxAnimator/entry';
 
-export const ALL_ENTRIES = [steamCapsuleGenerator, itchioGameTester, spriteSheetPacker, audioLoopPointFinder, saveFileEditor, localizationSanitizer, steamBbcodeTranslator, retroSfxGenerator, pixelArtPaletteSwapper, gameUiAccessibilityTester];
+export const ALL_ENTRIES = [steamCapsuleGenerator, itchioGameTester, spriteSheetPacker, audioLoopPointFinder, saveFileEditor, localizationSanitizer, steamBbcodeTranslator, retroSfxGenerator, pixelArtPaletteSwapper, gameUiAccessibilityTester, hitboxHurtboxAnimator];

package/src/index.ts

@@ -21,5 +21,6 @@ export { STEAM_BBCODE_TRANSLATOR_TOOL, steamBbcodeTranslator } from './tool/stea
 export { RETRO_SFX_GENERATOR_TOOL, retroSfxGenerator } from './tool/retroSfxGenerator';
 export { PIXEL_ART_PALETTE_SWAPPER_TOOL, pixelArtPaletteSwapper } from './tool/pixelArtPaletteSwapper';
 export { GAME_UI_ACCESSIBILITY_TESTER_TOOL, gameUiAccessibilityTester } from './tool/gameUIAccessibilityTester';
+export { HITBOX_HURTBOX_ANIMATOR_TOOL, hitboxHurtboxAnimator } from './tool/hitboxHurtboxAnimator';
 
 export type { ToolLocaleContent as GamesToolLocaleContent } from './types';

package/src/tests/locale_completeness.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect } from 'vitest';
 import { ALL_TOOLS } from '../tools';
 
 describe('Locale Completeness Validation', () => {
-  it('ten tools are registered', () => {
-    expect(ALL_TOOLS.length).toBe(10);
+  it('eleven tools are registered', () => {
+    expect(ALL_TOOLS.length).toBe(11);
   });
 });

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 10 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(10);
+    it('should have 11 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(11);
     });
 
     it('gamesCategory should be defined', () => {

package/src/tool/hitboxHurtboxAnimator/bibliography.astro

@@ -0,0 +1,12 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import type { BibliographyEntry } from '../../types';
+
+interface Props {
+  links?: BibliographyEntry[];
+}
+
+const { links = [] } = Astro.props;
+---
+
+<SharedBibliography links={links} />

package/src/tool/hitboxHurtboxAnimator/bibliography.ts

@@ -0,0 +1,10 @@
+export const bibliographyEntries = [
+  {
+    name: 'Godot Engine: Rect2 coordinate and size reference',
+    url: 'https://docs.godotengine.org/en/stable/classes/class_rect2.html',
+  },
+  {
+    name: 'Unity Manual: Sprite Editor Custom Physics Shape',
+    url: 'https://docs.unity3d.com/es/2021.1/Manual/CustomPhysicsShape.html',
+  },
+];

package/src/tool/hitboxHurtboxAnimator/canvas-interactions.ts

@@ -0,0 +1,59 @@
+import type { EditorState } from './editor-state';
+import { renderDraft, renderEditor, setStatus } from './dom-views';
+import { canvasPoint } from './canvas-metrics';
+import { shapeAtPoint } from './logic';
+import { addDrawnShape, checkpoint, moveSelected } from './project-actions';
+
+interface PointerSession {
+  start: { x: number; y: number };
+  last: { x: number; y: number };
+  dragging: boolean;
+  checkpointed: boolean;
+}
+
+export function bindCanvas(state: EditorState): void {
+  const canvas = state.root.querySelector<HTMLCanvasElement>('[data-role="stage"]');
+  if (!canvas) return;
+  let session: PointerSession | undefined;
+  canvas.addEventListener('pointerdown', (event) => {
+    const point = canvasPoint(canvas, event);
+    session = { start: point, last: point, dragging: false, checkpointed: false };
+    canvas.setPointerCapture(event.pointerId);
+    if (state.mode === 'draw') return;
+    const frame = state.project.frames[state.currentFrame];
+    state.selectedId = frame ? shapeAtPoint(frame.shapes, point.x, point.y)?.id ?? '' : '';
+    renderEditor(state);
+  });
+  canvas.addEventListener('pointermove', (event) => movePointer(state, canvas, event, session));
+  canvas.addEventListener('pointerup', (event) => {
+    endPointer(state, canvas, event, session);
+    session = undefined;
+  });
+  canvas.addEventListener('pointercancel', () => {
+    session = undefined;
+    renderEditor(state);
+  });
+}
+
+function movePointer(state: EditorState, canvas: HTMLCanvasElement, event: PointerEvent, session?: PointerSession): void {
+  if (!session) return;
+  const point = canvasPoint(canvas, event);
+  session.dragging = Math.abs(point.x - session.start.x) > 0.5 || Math.abs(point.y - session.start.y) > 0.5;
+  if (state.mode === 'draw') {
+    renderDraft(state, session.start, point);
+  } else if (state.selectedId && session.dragging) {
+    if (!session.checkpointed) checkpoint(state);
+    session.checkpointed = true;
+    moveSelected(state, point.x - session.last.x, point.y - session.last.y);
+    renderEditor(state);
+  }
+  session.last = point;
+}
+
+function endPointer(state: EditorState, canvas: HTMLCanvasElement, event: PointerEvent, session?: PointerSession): void {
+  if (!session) return;
+  const point = canvasPoint(canvas, event);
+  if (state.mode === 'draw' && addDrawnShape(state, session.start, point)) setStatus(state, state.ui.statusShapeCreated);
+  else if (session.checkpointed) setStatus(state, state.ui.statusShapeUpdated);
+  renderEditor(state);
+}

package/src/tool/hitboxHurtboxAnimator/canvas-metrics.ts

@@ -0,0 +1,8 @@
+export function canvasPoint(canvas: HTMLCanvasElement, event: PointerEvent): { x: number; y: number } {
+  const rect = canvas.getBoundingClientRect();
+  const scale = Number(canvas.dataset.scale ?? 1);
+  return {
+    x: (event.clientX - rect.left) * (canvas.width / rect.width) / scale,
+    y: (event.clientY - rect.top) * (canvas.height / rect.height) / scale,
+  };
+}

package/src/tool/hitboxHurtboxAnimator/component.astro

@@ -0,0 +1,148 @@
+---
+import type { HitboxHurtboxAnimatorUI } from './ui';
+
+interface Props {
+  ui: HitboxHurtboxAnimatorUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="hha" data-hitbox-root tabindex="0">
+  <script is:inline type="application/json" data-role="locale-data" set:html={JSON.stringify(ui)}></script>
+
+  <div class="hha-intro">
+    <p>{ui.onboarding}</p>
+    <span>{ui.privacyNote}</span>
+  </div>
+
+  <section class="hha-load" data-role="dropzone">
+    <div>
+      <strong>{ui.loadSprite}</strong>
+      <p>{ui.loadHint}</p>
+    </div>
+    <label class="hha-button hha-button-primary">
+      {ui.chooseImages}
+      <input data-role="sprite-input" type="file" accept="image/png,image/webp" multiple />
+    </label>
+  </section>
+
+  <div class="hha-control-deck">
+    <fieldset>
+      <legend>{ui.slicingTitle}</legend>
+      <label>{ui.rowsLabel}<input data-role="rows" type="number" min="1" max="64" value="1" /></label>
+      <label>{ui.columnsLabel}<input data-role="columns" type="number" min="1" max="64" value="1" /></label>
+      <button type="button" class="hha-button" data-action="slice">{ui.applySlicing}</button>
+    </fieldset>
+    <fieldset>
+      <legend>{ui.playbackTitle}</legend>
+      <div class="hha-transport">
+        <button type="button" class="hha-icon-button is-previous" data-action="previous" aria-label={ui.previousFrame}><span></span></button>
+        <button type="button" class="hha-button hha-play" data-action="play">{ui.play}</button>
+        <button type="button" class="hha-icon-button is-next" data-action="next" aria-label={ui.nextFrame}><span></span></button>
+      </div>
+      <label class="hha-range">{ui.fpsLabel}<input data-preference="fps" type="range" min="1" max="30" value="12" /></label>
+      <label class="hha-check"><input data-preference="onionPrevious" type="checkbox" />{ui.onionPrevious}</label>
+      <label class="hha-check"><input data-preference="onionNext" type="checkbox" />{ui.onionNext}</label>
+    </fieldset>
+    <div class="hha-history">
+      <button type="button" class="hha-button" data-action="undo">{ui.undo}</button>
+      <button type="button" class="hha-button" data-action="redo">{ui.redo}</button>
+    </div>
+  </div>
+
+  <div class="hha-workbench">
+    <aside class="hha-layers">
+      <h2>{ui.layerTitle}</h2>
+      <div class="hha-mode-switch">
+        <button type="button" data-mode="draw">{ui.drawShape}</button>
+        <button type="button" data-mode="select">{ui.selectShape}</button>
+      </div>
+      <div class="hha-type-rack">
+        <button type="button" data-type="hitbox"><i></i>{ui.typeHitbox}</button>
+        <button type="button" data-type="hurtbox"><i></i>{ui.typeHurtbox}</button>
+        <button type="button" data-type="pushbox"><i></i>{ui.typePushbox}</button>
+        <button type="button" data-type="grabbox"><i></i>{ui.typeGrabbox}</button>
+        <button type="button" data-type="sensor"><i></i>{ui.typeSensor}</button>
+        <button type="button" data-type="custom"><i></i>{ui.typeCustom}</button>
+      </div>
+      <div class="hha-geometry">
+        <button type="button" data-geometry="rectangle"><span></span>{ui.shapeRectangle}</button>
+        <button type="button" data-geometry="circle"><span></span>{ui.shapeCircle}</button>
+      </div>
+    </aside>
+
+    <main class="hha-stage-column">
+      <div class="hha-stage-header">
+        <span>{ui.stageLabel}</span>
+        <div class="hha-badges">
+          <b data-role="frames-badge"></b>
+          <b data-role="shapes-badge"></b>
+          <b data-role="coverage-badge"></b>
+        </div>
+      </div>
+      <div class="hha-light-table">
+        <canvas data-role="stage" aria-label={ui.stageLabel}></canvas>
+        <div class="hha-empty-stage">
+          <span></span>
+          <p>{ui.emptyStage}</p>
+        </div>
+      </div>
+      <div class="hha-timeline-wrap">
+        <strong>{ui.timelineTitle}</strong>
+        <div class="hha-timeline" data-role="timeline"></div>
+      </div>
+    </main>
+
+    <aside class="hha-inspector">
+      <h2>{ui.inspectorTitle}</h2>
+      <p class="hha-no-selection" data-role="no-selection">{ui.noSelection}</p>
+      <div class="hha-fields" data-role="shape-fields" hidden>
+        <label class="hha-wide">{ui.nameLabel}<input data-field="name" type="text" /></label>
+        <label>{ui.xLabel}<input data-field="x" type="number" step="0.5" /></label>
+        <label>{ui.yLabel}<input data-field="y" type="number" step="0.5" /></label>
+        <label>{ui.widthLabel}<input data-field="width" type="number" min="1" step="0.5" /></label>
+        <label>{ui.heightLabel}<input data-field="height" type="number" min="1" step="0.5" /></label>
+        <label class="hha-wide" data-radius-row>{ui.radiusLabel}<input data-field="radius" type="number" min="0.5" step="0.5" /></label>
+        <button type="button" data-action="duplicate">{ui.duplicateShape}</button>
+        <button type="button" data-action="mirror">{ui.mirrorShape}</button>
+        <button type="button" class="hha-danger hha-wide" data-action="delete">{ui.deleteShape}</button>
+      </div>
+      <div class="hha-copy-actions">
+        <button type="button" data-action="copyPrevious">{ui.copyPrevious}</button>
+        <button type="button" data-action="copyAll">{ui.copyAll}</button>
+      </div>
+      <fieldset class="hha-pivot">
+        <legend>{ui.pivotTitle}</legend>
+        <label>{ui.pivotXLabel}<input data-field="pivotX" type="number" min="0" step="0.5" /></label>
+        <label>{ui.pivotYLabel}<input data-field="pivotY" type="number" min="0" step="0.5" /></label>
+      </fieldset>
+      <p class="hha-coordinate-note">{ui.coordinatesNote}</p>
+    </aside>
+  </div>
+
+  <section class="hha-export">
+    <div>
+      <strong>{ui.exportTitle}</strong>
+      <p>{ui.localOnlyDisclosure}</p>
+    </div>
+    <div>
+      <button type="button" class="hha-button hha-button-primary" data-action="exportJson">{ui.exportJson}</button>
+      <button type="button" class="hha-button" data-action="importJson">{ui.importJson}</button>
+      <button type="button" class="hha-button" data-action="contactSheet">{ui.exportContactSheet}</button>
+      <button type="button" class="hha-button hha-danger" data-action="reset">{ui.resetProject}</button>
+      <input data-role="project-input" type="file" accept="application/json,.json" aria-label={ui.importJson} />
+    </div>
+  </section>
+
+  <div class="hha-footer-line">
+    <p data-role="status" aria-live="polite"></p>
+    <p>{ui.limitationDisclosure}</p>
+  </div>
+</div>
+
+<script>
+  import { mountHitboxHurtboxAnimator } from './controller';
+
+  document.querySelectorAll<HTMLElement>('[data-hitbox-root]').forEach(mountHitboxHurtboxAnimator);
+</script>

package/src/tool/hitboxHurtboxAnimator/controller.ts

@@ -0,0 +1,247 @@
+import type { EditorState } from './editor-state';
+import type { HitboxHurtboxAnimatorUI } from './ui';
+import type { CollisionShape, CollisionType, ShapeGeometry } from './logic';
+import { createProject, parseProject, serializeProject } from './logic';
+import { bindCanvas } from './canvas-interactions';
+import { downloadContactSheet, downloadText, loadLocalImages } from './file-io';
+import { formatCopy, renderEditor, setStatus } from './dom-views';
+import { loadPreferences, savePreferences } from './storage';
+import {
+  copyCurrentToAll,
+  copyPreviousFrame,
+  checkpoint,
+  deleteSelected,
+  duplicateSelected,
+  mirrorSelected,
+  redoProject,
+  replaceSlicing,
+  undoProject,
+  updateSelected,
+} from './project-actions';
+
+const input = (root: HTMLElement, selector: string): HTMLInputElement | null => root.querySelector<HTMLInputElement>(selector);
+
+function readUi(root: HTMLElement): HitboxHurtboxAnimatorUI {
+  const source = root.querySelector<HTMLScriptElement>('[data-role="locale-data"]')?.textContent ?? '{}';
+  return JSON.parse(source) as HitboxHurtboxAnimatorUI;
+}
+
+function createState(root: HTMLElement): EditorState {
+  const preferences = loadPreferences();
+  const project = createProject([]);
+  project.fps = preferences.fps;
+  return { root, ui: readUi(root), project, images: [], currentFrame: 0, selectedId: '', mode: 'draw', collisionType: 'hitbox', geometry: 'rectangle', playing: false, preferences, undoStack: [], redoStack: [] };
+}
+
+function stepFrame(state: EditorState, amount: number): void {
+  const count = state.project.frames.length;
+  if (count === 0) return;
+  state.currentFrame = (state.currentFrame + amount + count) % count;
+  state.selectedId = '';
+  renderEditor(state);
+}
+
+function bindPlayback(state: EditorState): (playing: boolean) => void {
+  let timer = 0;
+  return (playing) => {
+    window.clearInterval(timer);
+    state.playing = playing;
+    if (playing) timer = window.setInterval(() => stepFrame(state, 1), 1000 / state.preferences.fps);
+    renderEditor(state);
+  };
+}
+
+async function loadSprites(state: EditorState, files: File[]): Promise<void> {
+  if (files.length === 0) return;
+  try {
+    const loaded = await loadLocalImages(files);
+    state.images = loaded.elements;
+    state.project = createProject(loaded.references);
+    state.project.fps = state.preferences.fps;
+    state.currentFrame = 0;
+    state.selectedId = '';
+    state.undoStack = [];
+    state.redoStack = [];
+    setStatus(state, formatCopy(state.ui.statusImageLoaded, { count: files.length }));
+    renderEditor(state);
+  } catch {
+    setStatus(state, state.ui.statusError);
+  }
+}
+
+function bindFiles(state: EditorState): void {
+  const spriteInput = input(state.root, '[data-role="sprite-input"]');
+  const projectInput = input(state.root, '[data-role="project-input"]');
+  spriteInput?.addEventListener('change', () => void loadSprites(state, Array.from(spriteInput.files ?? [])));
+  projectInput?.addEventListener('change', () => void importProject(state, projectInput.files?.[0]));
+  const drop = state.root.querySelector<HTMLElement>('[data-role="dropzone"]');
+  drop?.addEventListener('dragover', (event) => event.preventDefault());
+  drop?.addEventListener('drop', (event) => {
+    event.preventDefault();
+    void loadSprites(state, Array.from(event.dataTransfer?.files ?? []));
+  });
+}
+
+async function importProject(state: EditorState, file?: File): Promise<void> {
+  if (!file) return;
+  try {
+    state.project = parseProject(await file.text());
+    state.currentFrame = 0;
+    state.selectedId = '';
+    state.undoStack = [];
+    state.redoStack = [];
+    setStatus(state, state.ui.statusImported);
+    renderEditor(state);
+  } catch {
+    setStatus(state, state.ui.statusError);
+  }
+}
+
+function updatePreference(state: EditorState, target: HTMLInputElement): void {
+  if (target.dataset.preference === 'fps') {
+    state.preferences.fps = Math.max(1, Math.min(30, Number(target.value)));
+    state.project.fps = state.preferences.fps;
+  }
+  if (target.dataset.preference === 'onionPrevious') state.preferences.onionPrevious = target.checked;
+  if (target.dataset.preference === 'onionNext') state.preferences.onionNext = target.checked;
+  savePreferences(state.preferences);
+  renderEditor(state);
+}
+
+function bindPreferences(state: EditorState): void {
+  const fps = input(state.root, '[data-preference="fps"]');
+  const previous = input(state.root, '[data-preference="onionPrevious"]');
+  const next = input(state.root, '[data-preference="onionNext"]');
+  if (fps) fps.value = String(state.preferences.fps);
+  if (previous) previous.checked = state.preferences.onionPrevious;
+  if (next) next.checked = state.preferences.onionNext;
+  state.root.querySelectorAll<HTMLInputElement>('[data-preference]').forEach((item) => item.addEventListener('input', () => updatePreference(state, item)));
+}
+
+function numericUpdate(field: string, value: number): Partial<CollisionShape> {
+  if (field === 'radius') return { width: value * 2, height: value * 2 };
+  if (field === 'x') return { x: value };
+  if (field === 'y') return { y: value };
+  if (field === 'width') return { width: value };
+  if (field === 'height') return { height: value };
+  return {};
+}
+
+function updateField(state: EditorState, target: HTMLInputElement): void {
+  const field = target.dataset.field ?? '';
+  const frame = state.project.frames[state.currentFrame];
+  if (!frame) return;
+  if (field === 'pivotX') {
+    checkpoint(state);
+    frame.pivot.x = Math.max(0, Math.min(frame.width, Number(target.value)));
+  } else if (field === 'pivotY') {
+    checkpoint(state);
+    frame.pivot.y = Math.max(0, Math.min(frame.height, Number(target.value)));
+  }
+  else if (field === 'name') updateSelected(state, { name: target.value });
+  else updateSelected(state, numericUpdate(field, Number(target.value)));
+  setStatus(state, state.ui.statusShapeUpdated);
+  renderEditor(state);
+}
+
+function bindFields(state: EditorState): void {
+  state.root.querySelectorAll<HTMLInputElement>('[data-field]').forEach((field) => field.addEventListener('change', () => updateField(state, field)));
+}
+
+function actionHandlers(state: EditorState, setPlaying: (playing: boolean) => void): Record<string, () => void> {
+  return {
+    previous: () => stepFrame(state, -1),
+    next: () => stepFrame(state, 1),
+    play: () => setPlaying(!state.playing),
+    slice: () => applySlice(state),
+    duplicate: () => runMutation(state, duplicateSelected),
+    mirror: () => runMutation(state, mirrorSelected),
+    delete: () => runMutation(state, deleteSelected),
+    copyPrevious: () => runMutation(state, copyPreviousFrame),
+    copyAll: () => runMutation(state, copyCurrentToAll),
+    undo: () => runMutation(state, undoProject),
+    redo: () => runMutation(state, redoProject),
+    exportJson: () => exportJson(state),
+    importJson: () => input(state.root, '[data-role="project-input"]')?.click(),
+    contactSheet: () => exportSheet(state),
+    reset: () => resetState(state),
+  };
+}
+
+function runMutation(state: EditorState, operation: (value: EditorState) => boolean): void {
+  if (!operation(state)) return;
+  setStatus(state, state.ui.statusShapeUpdated);
+  renderEditor(state);
+}
+
+function applySlice(state: EditorState): void {
+  const rows = Number(input(state.root, '[data-role="rows"]')?.value ?? 1);
+  const columns = Number(input(state.root, '[data-role="columns"]')?.value ?? 1);
+  replaceSlicing(state, rows, columns);
+  renderEditor(state);
+}
+
+function exportJson(state: EditorState): void {
+  downloadText(serializeProject(state.project), 'hitbox-animation.json');
+  setStatus(state, state.ui.statusExported);
+}
+
+function exportSheet(state: EditorState): void {
+  downloadContactSheet(state.project, state.images);
+  setStatus(state, state.ui.statusExported);
+}
+
+function resetState(state: EditorState): void {
+  state.project = createProject(state.project.images, state.project.rows, state.project.columns);
+  state.project.fps = state.preferences.fps;
+  state.currentFrame = 0;
+  state.selectedId = '';
+  state.undoStack = [];
+  state.redoStack = [];
+  setStatus(state, state.ui.statusReady);
+  renderEditor(state);
+}
+
+function bindClicks(state: EditorState, setPlaying: (playing: boolean) => void): void {
+  const actions = actionHandlers(state, setPlaying);
+  state.root.addEventListener('click', (event) => {
+    const target = (event.target as Element).closest<HTMLElement>('[data-action], [data-type], [data-geometry], [data-mode], [data-frame]');
+    if (!target) return;
+    if (target.dataset.type) state.collisionType = target.dataset.type as CollisionType;
+    if (target.dataset.geometry) state.geometry = target.dataset.geometry as ShapeGeometry;
+    if (target.dataset.mode) state.mode = target.dataset.mode as EditorState['mode'];
+    if (target.dataset.frame !== undefined) state.currentFrame = Number(target.dataset.frame);
+    if (target.dataset.action) actions[target.dataset.action]?.();
+    renderEditor(state);
+  });
+}
+
+function bindKeyboard(state: EditorState): void {
+  state.root.addEventListener('keydown', (event) => {
+    if ((event.target as Element).matches('input')) return;
+    const modified = event.ctrlKey || event.metaKey;
+    const key = modified ? `mod-${event.key.toLowerCase()}` : event.key;
+    const handlers: Record<string, () => void> = {
+      ArrowLeft: () => stepFrame(state, -1),
+      ArrowRight: () => stepFrame(state, 1),
+      Delete: () => runMutation(state, deleteSelected),
+      'mod-z': () => runMutation(state, undoProject),
+      'mod-y': () => runMutation(state, redoProject),
+    };
+    handlers[key]?.();
+  });
+}
+
+export function mountHitboxHurtboxAnimator(root: HTMLElement): void {
+  if (root.dataset.ready) return;
+  root.dataset.ready = 'true';
+  const state = createState(root);
+  bindFiles(state);
+  bindPreferences(state);
+  bindFields(state);
+  bindCanvas(state);
+  bindClicks(state, bindPlayback(state));
+  bindKeyboard(state);
+  setStatus(state, state.ui.statusReady);
+  renderEditor(state);
+}