@jjlmoya/utils-tabletop 1.26.0 → 1.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-tabletop",
-    "version": "1.26.0",
+    "version": "1.27.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -2,6 +2,7 @@ import { diceRollerSimulator } from '../tool/dice-roller-simulator/entry';
 import { boardGameTimer } from '../tool/board-game-timer/entry';
 import { dungeonMapGenerator } from '../tool/dungeon-map-generator/entry';
 import { encounterDifficultyCalculator } from '../tool/encounter-difficulty-calculator/entry';
+import { tokenStampStudio } from '../tool/token-stamp-studio/entry';
 import type { CategoryLocaleContent, KnownLocale } from '../types';
 
 export const tabletopCategory = {
@@ -11,6 +12,7 @@ export const tabletopCategory = {
     boardGameTimer,
     dungeonMapGenerator,
     encounterDifficultyCalculator,
+    tokenStampStudio,
   ],
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),

package/src/entries.ts

@@ -35,6 +35,7 @@ import { hiddenRoleDealer } from './tool/hidden-role-dealer/entry';
 import { scatterDirectionSelector } from './tool/scatter-direction-selector/entry';
 import { dungeonMapGenerator } from './tool/dungeon-map-generator/entry';
 import { encounterDifficultyCalculator } from './tool/encounter-difficulty-calculator/entry';
+import { tokenStampStudio } from './tool/token-stamp-studio/entry';
 
 export const ALL_ENTRIES = [
   diceRollerSimulator,
@@ -50,5 +51,6 @@ export const ALL_ENTRIES = [
   scatterDirectionSelector,
   dungeonMapGenerator,
   encounterDifficultyCalculator,
+  tokenStampStudio,
 ];
 

package/src/index.ts

@@ -7,6 +7,7 @@ export { fantasyRunesTranslator, FANTASY_RUNES_TRANSLATOR_TOOL } from './tool/fa
 export { investigationBoard, INVESTIGATION_BOARD_TOOL } from './tool/investigation-board';
 export { lunarTideTracker, LUNAR_TIDE_TRACKER_TOOL } from './tool/lunar-tide-tracker';
 export { dungeonMapGenerator, DUNGEON_MAP_GENERATOR_TOOL } from './tool/dungeon-map-generator';
+export { tokenStampStudio, TOKEN_STAMP_STUDIO_TOOL } from './tool/token-stamp-studio';
 
 
 export type {

package/src/tests/locale_completeness.test.ts

@@ -22,7 +22,7 @@ describe('Locale Completeness Validation', () => {
   });
 
   it('all tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(13);
+    expect(ALL_TOOLS.length).toBe(14);
   });
 
 

package/src/tests/tool_validation.test.ts

@@ -5,7 +5,7 @@ import { tabletopCategory } from '../data';
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
     it('should have tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(13);
+      expect(ALL_TOOLS.length).toBe(14);
     });
 
 

package/src/tool/token-stamp-studio/bibliography.astro

@@ -0,0 +1,16 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { tokenStampStudio } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props as Props;
+const loader = tokenStampStudio.i18n[locale] || tokenStampStudio.i18n.en;
+const content = await loader?.();
+if (!content) return null;
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/token-stamp-studio/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Foundry Virtual Tabletop, Tokens',
+    url: 'https://foundryvtt.com/article/tokens/',
+  },
+  {
+    name: 'Foundry Virtual Tabletop, Actors',
+    url: 'https://foundryvtt.com/article/actors/',
+  },
+];

package/src/tool/token-stamp-studio/component.astro

@@ -0,0 +1,91 @@
+---
+import './token-stamp-studio.css';
+import type { TokenStampUI } from './ui';
+
+const { ui } = Astro.props as { ui: TokenStampUI };
+---
+
+<div class="token-stamp-studio" data-token-stamp-studio data-ui={JSON.stringify(ui)}>
+  <div class="foundry-shell">
+  <section class="marker-library marker-library-header" aria-label={ui.savedMarkers}>
+    <div class="marker-library-grid" data-marker-library></div>
+  </section>
+    <div class="foundry-layout">
+    <section class="foundry-stage-panel" aria-label={ui.stageLabel}>
+      <label class="marker-name-field marker-name-stage"><input data-marker-name type="text" maxlength="48" placeholder={ui.markerNamePlaceholder} aria-label={ui.markerName} /></label>
+      <div class="token-stage" data-drop-zone>
+        <canvas data-token-canvas aria-label={ui.stageLabel}></canvas>
+        <p class="stage-caption"><span>{ui.positionHint}</span><span data-current-image>{ui.noImage}</span></p>
+      </div>
+      <div class="stage-actions">
+        <label class="button button-primary" for="token-image-input">{ui.chooseImage}</label>
+        <input id="token-image-input" data-image-input type="file" accept="image/png,image/jpeg,image/webp,image/gif" hidden />
+        <button class="button button-quiet" type="button" data-clear-image>{ui.clearImage}</button>
+        <button class="button button-quiet" type="button" data-copy>{ui.copy}</button>
+        <button class="button button-primary" type="button" data-download>{ui.download}</button>
+      </div>
+      <p class="export-hint">{ui.exportHint}</p>
+    </section>
+
+    <aside class="foundry-inspector" aria-label={ui.tokenDetails}>
+      <section class="inspector-block inspector-frames">
+        <div class="block-heading"><div><p class="eyebrow">01</p><h3>{ui.frameLegend}</h3></div><button class="micro-action" type="button" data-random-frame>{ui.randomFrame}</button></div>
+        <p class="block-hint">{ui.frameHint}</p>
+        <div class="frame-gallery" data-frame-gallery></div>
+      </section>
+
+      <section class="inspector-block">
+        <div class="block-heading"><div><p class="eyebrow">02</p><h3>{ui.surfaceLegend}</h3></div><button class="micro-action" type="button" data-random-colors>{ui.randomColors}</button></div>
+        <div class="color-grid">
+          <label class="color-control"><span>{ui.backgroundLabel}</span><input data-color="background" type="color" value="#1d2430" /></label>
+          <label class="color-control"><span>{ui.borderLabel}</span><input data-color="border" type="color" value="#d89555" /></label>
+          <label class="color-control"><span>{ui.textLabel}</span><input data-color="text" type="color" value="#fff4d6" /></label>
+          <label class="color-control"><span>{ui.overlayLabel}</span><input data-color="overlay" type="color" value="#e05b4f" /></label>
+        </div>
+        <label class="range-control"><span>{ui.borderWidthLabel}<output data-border-width-output>16</output></span><input data-border-width type="range" min="4" max="34" step="1" value="16" /></label>
+        <label class="range-control"><span>{ui.opacityLabel}<output data-border-opacity-output>100%</output></span><input data-border-opacity type="range" min="0.2" max="1" step="0.05" value="1" /></label>
+        <label class="range-control"><span>{ui.overlayOpacityLabel}<output data-overlay-opacity-output>0%</output></span><input data-overlay-opacity type="range" min="0" max="0.8" step="0.05" value="0" /></label>
+      </section>
+
+      <section class="inspector-block">
+        <div class="block-heading"><div><p class="eyebrow">03</p><h3>{ui.imageLegend}</h3></div></div>
+        <label class="range-control"><span>{ui.imageZoomLabel}<output data-image-zoom-output>100%</output></span><input data-image-zoom type="range" min="0.7" max="1.8" step="0.05" value="1" /></label>
+        <label class="range-control"><span>{ui.scaleLabel}<output data-scale-output>100%</output></span><input data-scale type="range" min="0.75" max="1.5" step="0.05" value="1" /></label>
+      </section>
+
+      <section class="inspector-block">
+        <div class="block-heading"><div><p class="eyebrow">04</p><h3>{ui.textLegend}</h3></div></div>
+        <p class="block-hint" data-text-hint>{ui.textHint}</p>
+        <div class="text-layer-list" data-text-layers></div>
+        <div class="text-editor">
+          <input data-text-input type="text" maxlength="24" placeholder={ui.textPlaceholder} aria-label={ui.textPlaceholder} />
+          <div class="editor-row"><label class="range-control"><span>{ui.textSizeLabel}<output data-text-size-output>54</output></span><input data-text-size type="range" min="22" max="86" step="1" value="54" /></label></div>
+          <div class="align-actions" aria-label={ui.alignmentLabel}>
+            <button type="button" data-align="left" aria-label={ui.alignLeft} title={ui.alignLeft}>↤</button><button type="button" data-align="center" aria-label={ui.alignCenter} title={ui.alignCenter}>↔</button><button type="button" data-align="right" aria-label={ui.alignRight} title={ui.alignRight}>↦</button>
+          </div>
+          <div class="editor-actions"><button class="button button-quiet" type="button" data-add-text>{ui.addText}</button><button class="button button-danger" type="button" data-remove-text>{ui.removeText}</button></div>
+        </div>
+      </section>
+
+    </aside>
+    </div>
+
+  <details class="batch-advanced">
+    <summary>{ui.batchLabel}</summary>
+    <section class="batch-dock" aria-labelledby="batch-title">
+      <div><h3 id="batch-title">{ui.batchHint}</h3><p data-batch-status>{ui.batchHint}</p></div>
+      <div class="batch-actions"><label class="button button-quiet" for="token-batch-input">{ui.chooseBatch}</label><input id="token-batch-input" data-batch-input type="file" accept="image/png,image/jpeg,image/webp,image/gif" multiple hidden /><button class="button button-primary" type="button" data-batch-download disabled>{ui.downloadBatch}</button></div>
+    </section>
+  </details>
+  </div>
+</div>
+
+<script>
+  import { mountTokenStampStudio } from './controller';
+
+  const root = document.querySelector<HTMLElement>('[data-token-stamp-studio]');
+  if (root) {
+    const ui = JSON.parse(root.dataset.ui ?? '{}');
+    void mountTokenStampStudio(root, ui);
+  }
+</script>

package/src/tool/token-stamp-studio/controller.ts

@@ -0,0 +1,179 @@
+import { createTextLayer, FRAME_PRESETS, getRandomPalette, hitTestText, updateTextLayer, clamp } from './logic';
+import { pointerToCanvas } from './dom-views';
+import { attachBatchEvents, attachFileEvents, attachWorkspaceEvents } from './workspace';
+import { StudioStore } from './store';
+import type { TokenStampUI } from './ui';
+import type { TextAlign, TokenStampState } from './types';
+
+export interface StudioElements {
+  root: HTMLElement;
+  canvas: HTMLCanvasElement;
+  frames: HTMLElement;
+  textLayers: HTMLElement;
+  imageInput: HTMLInputElement;
+  batchInput: HTMLInputElement;
+  textInput: HTMLInputElement;
+  textSize: HTMLInputElement;
+  imageZoom: HTMLInputElement;
+  scale: HTMLInputElement;
+  borderWidth: HTMLInputElement;
+  borderOpacity: HTMLInputElement;
+  overlayOpacity: HTMLInputElement;
+  currentImage: HTMLElement;
+  batchStatus: HTMLElement;
+  library: HTMLElement;
+  markerName: HTMLInputElement;
+  copy: HTMLButtonElement;
+  download: HTMLButtonElement;
+  batchDownload: HTMLButtonElement;
+}
+
+function getElement<T extends Element>(root: HTMLElement, selector: string): T {
+  const element = root.querySelector<T>(selector);
+  if (!element) throw new Error(`Token stamp studio element missing: ${selector}`);
+  return element;
+}
+
+function getElements(root: HTMLElement): StudioElements {
+  return {
+    root,
+    canvas: getElement(root, '[data-token-canvas]'),
+    frames: getElement(root, '[data-frame-gallery]'),
+    textLayers: getElement(root, '[data-text-layers]'),
+    imageInput: getElement(root, '[data-image-input]'),
+    batchInput: getElement(root, '[data-batch-input]'),
+    textInput: getElement(root, '[data-text-input]'),
+    textSize: getElement(root, '[data-text-size]'),
+    imageZoom: getElement(root, '[data-image-zoom]'),
+    scale: getElement(root, '[data-scale]'),
+    borderWidth: getElement(root, '[data-border-width]'),
+    borderOpacity: getElement(root, '[data-border-opacity]'),
+    overlayOpacity: getElement(root, '[data-overlay-opacity]'),
+    currentImage: getElement(root, '[data-current-image]'),
+    batchStatus: getElement(root, '[data-batch-status]'),
+    library: getElement(root, '[data-marker-library]'),
+    markerName: getElement<HTMLInputElement>(root, '[data-marker-name]'),
+    copy: getElement<HTMLButtonElement>(root, '[data-copy]'),
+    download: getElement(root, '[data-download]'),
+    batchDownload: getElement(root, '[data-batch-download]'),
+  };
+}
+
+function getColor(root: HTMLElement, name: string): HTMLInputElement {
+  return getElement<HTMLInputElement>(root, `[data-color="${name}"]`);
+}
+
+function attachFrameEvents(elements: StudioElements, getState: () => TokenStampState, setState: (state: TokenStampState) => void): void {
+  elements.frames.addEventListener('click', (event) => {
+    const target = event.target as HTMLElement;
+    const button = target.closest<HTMLButtonElement>('[data-frame-id]');
+    if (button?.dataset.frameId) setState({ ...getState(), frameId: button.dataset.frameId });
+  });
+}
+
+function attachColorEvents(elements: StudioElements, getState: () => TokenStampState, setState: (state: TokenStampState) => void): void {
+  const colors: Array<[string, keyof TokenStampState]> = [['background', 'background'], ['border', 'border'], ['text', 'textColor'], ['overlay', 'overlay']];
+  colors.forEach(([name, key]) => getColor(elements.root, name).addEventListener('input', (event) => {
+    setState({ ...getState(), [key]: (event.target as HTMLInputElement).value } as TokenStampState);
+  }));
+}
+
+function attachRangeEvents(elements: StudioElements, getState: () => TokenStampState, setState: (state: TokenStampState) => void): void {
+  const ranges: Array<[HTMLInputElement, keyof TokenStampState]> = [
+    [elements.imageZoom, 'imageZoom'], [elements.scale, 'scale'], [elements.borderWidth, 'borderWidth'], [elements.borderOpacity, 'borderOpacity'], [elements.overlayOpacity, 'overlayOpacity'],
+  ];
+  ranges.forEach(([input, key]) => input.addEventListener('input', (event) => setState({ ...getState(), [key]: Number((event.target as HTMLInputElement).value) } as TokenStampState)));
+}
+
+function updateDraftText(value: string, getState: () => TokenStampState, setState: (state: TokenStampState) => void): void {
+  const current = getState();
+  if (!current.selectedTextId && value.trim()) {
+    const text = { ...createTextLayer(current.texts.length + 1), text: value };
+    setState({ ...current, texts: [...current.texts, text], selectedTextId: text.id });
+    return;
+  }
+  setState({ ...current, texts: updateTextLayer(current.texts, current.selectedTextId, { text: value }) });
+}
+
+function attachTextEvents(elements: StudioElements, getState: () => TokenStampState, setState: (state: TokenStampState) => void, ui: TokenStampUI): void {
+  elements.textLayers.addEventListener('click', (event) => {
+    const button = (event.target as HTMLElement).closest<HTMLButtonElement>('[data-text-id]');
+    if (button?.dataset.textId) setState({ ...getState(), selectedTextId: button.dataset.textId });
+  });
+  elements.textInput.addEventListener('input', (event) => updateDraftText((event.target as HTMLInputElement).value, getState, setState));
+  elements.textSize.addEventListener('input', (event) => setState({ ...getState(), texts: updateTextLayer(getState().texts, getState().selectedTextId, { size: Number((event.target as HTMLInputElement).value) }) }));
+  elements.root.querySelectorAll<HTMLButtonElement>('[data-align]').forEach((button) => button.addEventListener('click', () => {
+    const align = button.dataset.align as TextAlign;
+    setState({ ...getState(), texts: updateTextLayer(getState().texts, getState().selectedTextId, { align }) });
+  }));
+  getElement<HTMLButtonElement>(elements.root, '[data-add-text]').addEventListener('click', () => {
+    const text = createTextLayer(getState().texts.length + 1);
+    setState({ ...getState(), texts: [...getState().texts, text], selectedTextId: text.id });
+  });
+  getElement<HTMLButtonElement>(elements.root, '[data-remove-text]').addEventListener('click', () => {
+    const current = getState();
+    const texts = current.texts.filter((text) => text.id !== current.selectedTextId);
+    setState({ ...current, texts, selectedTextId: texts[0]?.id ?? null });
+  });
+  getElement<HTMLElement>(elements.root, '[data-text-hint]').textContent = ui.textHint;
+}
+
+function attachCanvasEvents(elements: StudioElements, getState: () => TokenStampState, setState: (state: TokenStampState) => void): void {
+  let drag: { mode: 'image' | 'text'; start: { x: number; y: number }; imageX: number; imageY: number; textX: number; textY: number } | null = null;
+  elements.canvas.addEventListener('pointerdown', (event) => {
+    const point = pointerToCanvas(elements.canvas, event);
+    const state = getState();
+    const text = state.texts.find((item) => hitTestText(item, point));
+    if (text) setState({ ...state, selectedTextId: text.id });
+    drag = { mode: text ? 'text' : 'image', start: point, imageX: state.imageX, imageY: state.imageY, textX: text?.x ?? 0.5, textY: text?.y ?? 0.8 };
+    elements.canvas.setPointerCapture(event.pointerId);
+  });
+  elements.canvas.addEventListener('pointermove', (event) => {
+    if (!drag) return;
+    const point = pointerToCanvas(elements.canvas, event);
+    const state = getState();
+    const delta = { x: point.x - drag.start.x, y: point.y - drag.start.y };
+    if (drag.mode === 'image') setState({ ...state, imageX: clamp(drag.imageX + delta.x, -0.5, 0.5), imageY: clamp(drag.imageY + delta.y, -0.5, 0.5) });
+    else setState({ ...state, texts: updateTextLayer(state.texts, state.selectedTextId, { x: clamp(drag.textX + delta.x, 0.12, 0.88), y: clamp(drag.textY + delta.y, 0.12, 0.9) }) });
+  });
+  elements.canvas.addEventListener('pointerup', () => { drag = null; });
+  elements.canvas.addEventListener('pointercancel', () => { drag = null; });
+  elements.canvas.addEventListener('wheel', (event) => {
+    event.preventDefault();
+    const nextZoom = clamp(getState().imageZoom - event.deltaY * 0.001, 0.7, 1.8);
+    setState({ ...getState(), imageZoom: nextZoom });
+  }, { passive: false });
+}
+
+function attachStudioInteractions(elements: StudioElements, ui: TokenStampUI, store: StudioStore): void {
+  attachFrameEvents(elements, store.getState, store.setState);
+  attachRandomEvents(elements, store.getState, store.setState);
+  attachColorEvents(elements, store.getState, store.setState);
+  attachRangeEvents(elements, store.getState, store.setState);
+  attachTextEvents(elements, store.getState, store.setState, ui);
+  attachCanvasEvents(elements, store.getState, store.setState);
+  const context = { getState: store.getState, setState: store.setState, ui, getMarkers: store.getMarkers, getImage: store.getImage, selectMarker: store.selectMarker, addMarker: store.addMarker, removeMarker: store.removeMarker, setImage: store.setImage };
+  attachWorkspaceEvents(elements, context);
+  attachFileEvents(elements, context);
+  attachBatchEvents(elements, context);
+}
+
+export async function mountTokenStampStudio(root: HTMLElement, ui: TokenStampUI): Promise<void> {
+  const elements = getElements(root);
+  const store = new StudioStore(elements, ui);
+  await store.restore();
+  store.render();
+  attachStudioInteractions(elements, ui, store);
+}
+
+function attachRandomEvents(elements: StudioElements, getState: () => TokenStampState, setState: (state: TokenStampState) => void): void {
+  getElement<HTMLButtonElement>(elements.root, '[data-random-frame]').addEventListener('click', () => {
+    const available = FRAME_PRESETS.filter((frame) => frame.id !== getState().frameId);
+    const frame = available[Math.floor(Math.random() * available.length)] ?? FRAME_PRESETS[0]!;
+    setState({ ...getState(), frameId: frame.id });
+  });
+  getElement<HTMLButtonElement>(elements.root, '[data-random-colors]').addEventListener('click', () => {
+    const palette = getRandomPalette();
+    setState({ ...getState(), ...palette, overlayOpacity: 0.18 });
+  });
+}

package/src/tool/token-stamp-studio/dom-views.ts

@@ -0,0 +1,266 @@
+import { getFrameGeometry, getFramePreset } from './logic';
+import type { FramePreset, SavedMarker, TextLayer, TokenStampState } from './types';
+
+export function pointerToCanvas(canvas: HTMLCanvasElement, event: PointerEvent): { x: number; y: number } {
+  const rect = canvas.getBoundingClientRect();
+  return {
+    x: Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width)),
+    y: Math.min(1, Math.max(0, (event.clientY - rect.top) / rect.height)),
+  };
+}
+
+function hexToRgba(hex: string, alpha: number): string {
+  const value = hex.replace('#', '');
+  const red = Number.parseInt(value.slice(0, 2), 16);
+  const green = Number.parseInt(value.slice(2, 4), 16);
+  const blue = Number.parseInt(value.slice(4, 6), 16);
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+}
+
+function drawGeometry(ctx: CanvasRenderingContext2D, frame: FramePreset, size: number, inset = 0): void {
+  const geometry = getFrameGeometry(frame.shape);
+  ctx.beginPath();
+  if (geometry.kind === 'circle') {
+    const radius = size * 0.45 - inset;
+    ctx.arc(size / 2, size / 2, radius, 0, Math.PI * 2);
+  } else {
+    geometry.points?.forEach((point, index) => {
+      const x = point.x * size;
+      const y = point.y * size;
+      if (index === 0) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
+    });
+    ctx.closePath();
+  }
+}
+
+function drawStageGrid(ctx: CanvasRenderingContext2D, size: number): void {
+  ctx.fillStyle = '#111720';
+  ctx.fillRect(0, 0, size, size);
+  ctx.strokeStyle = 'rgba(255, 255, 255, 0.035)';
+  ctx.lineWidth = 1;
+  for (let offset = 0; offset <= size; offset += size / 8) {
+    ctx.beginPath();
+    ctx.moveTo(offset, 0);
+    ctx.lineTo(offset, size);
+    ctx.moveTo(0, offset);
+    ctx.lineTo(size, offset);
+    ctx.stroke();
+  }
+}
+
+function drawPlaceholder(ctx: CanvasRenderingContext2D, size: number): void {
+  ctx.fillStyle = '#273242';
+  ctx.fillRect(size * 0.26, size * 0.28, size * 0.48, size * 0.44);
+  ctx.strokeStyle = '#d89555';
+  ctx.lineWidth = 5;
+  ctx.strokeRect(size * 0.31, size * 0.33, size * 0.38, size * 0.34);
+  ctx.fillStyle = '#fff4d6';
+  ctx.font = '700 30px Georgia, serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('DROP', size / 2, size * 0.49);
+  ctx.font = '500 17px Inter, sans-serif';
+  ctx.fillStyle = '#b9c5d6';
+  ctx.fillText('your character art', size / 2, size * 0.56);
+}
+
+function drawImage(ctx: CanvasRenderingContext2D, image: HTMLImageElement | null, state: TokenStampState, size: number): void {
+  if (!image || !image.complete || image.naturalWidth === 0) {
+    drawPlaceholder(ctx, size);
+    return;
+  }
+  const sourceRatio = image.naturalWidth / image.naturalHeight;
+  const box = size * 0.9 * state.imageZoom;
+  const width = sourceRatio >= 1 ? box : box * sourceRatio;
+  const height = sourceRatio >= 1 ? box / sourceRatio : box;
+  const x = (size - width) / 2 + state.imageX * size;
+  const y = (size - height) / 2 + state.imageY * size;
+  ctx.drawImage(image, x, y, width, height);
+}
+
+function drawTextLayers(ctx: CanvasRenderingContext2D, state: TokenStampState, size: number): void {
+  state.texts.forEach((text) => {
+    ctx.save();
+    ctx.fillStyle = state.textColor;
+    ctx.strokeStyle = 'rgba(17, 23, 32, 0.85)';
+    ctx.lineWidth = Math.max(2, text.size / 16);
+    ctx.font = `700 ${text.size}px Georgia, serif`;
+    ctx.textAlign = text.align;
+    ctx.textBaseline = 'middle';
+    ctx.strokeText(text.text, text.x * size, text.y * size, size * 0.82);
+    ctx.fillText(text.text, text.x * size, text.y * size, size * 0.82);
+    if (text.id === state.selectedTextId) {
+      ctx.setLineDash([8, 6]);
+      ctx.strokeStyle = '#fff4d6';
+      ctx.lineWidth = 2;
+      ctx.strokeRect(text.x * size - size * 0.25, text.y * size - text.size * 0.7, size * 0.5, text.size * 1.4);
+    }
+    ctx.restore();
+  });
+}
+
+function drawFrame(ctx: CanvasRenderingContext2D, frame: FramePreset, state: TokenStampState, size: number): void {
+  ctx.save();
+  if (frame.shape === 'star') ctx.lineJoin = 'round';
+  drawGeometry(ctx, frame, size, state.borderWidth * 0.65);
+  ctx.strokeStyle = hexToRgba(state.border, state.borderOpacity * 0.38);
+  ctx.lineWidth = state.borderWidth + 22;
+  ctx.stroke();
+  drawGeometry(ctx, frame, size, state.borderWidth * 0.65);
+  ctx.strokeStyle = hexToRgba(state.border, state.borderOpacity);
+  ctx.lineWidth = state.borderWidth;
+  ctx.stroke();
+  drawGeometry(ctx, frame, size, state.borderWidth * 0.92);
+  ctx.strokeStyle = 'rgba(17, 23, 32, 0.45)';
+  ctx.lineWidth = 3;
+  ctx.stroke();
+  ctx.restore();
+}
+
+function drawFrameIcon(canvas: HTMLCanvasElement, frame: FramePreset, state: TokenStampState): void {
+  const size = 96;
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+  ctx.clearRect(0, 0, size, size);
+  ctx.fillStyle = state.background;
+  ctx.fillRect(0, 0, size, size);
+  drawFrame(ctx, frame, { ...state, borderWidth: 7 }, size);
+}
+
+export function drawTokenCanvas(canvas: HTMLCanvasElement, state: TokenStampState, image: HTMLImageElement | null, includeStageGrid = true): void {
+  const size = 640;
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+  const frame = getFramePreset(state.frameId);
+  if (includeStageGrid) drawStageGrid(ctx, size);
+  else ctx.clearRect(0, 0, size, size);
+  ctx.save();
+  drawGeometry(ctx, frame, size);
+  ctx.clip();
+  ctx.fillStyle = state.background;
+  ctx.fillRect(0, 0, size, size);
+  drawImage(ctx, image, state, size);
+  if (state.overlayOpacity > 0) {
+    ctx.fillStyle = hexToRgba(state.overlay, state.overlayOpacity);
+    ctx.fillRect(0, 0, size, size);
+  }
+  ctx.restore();
+  drawFrame(ctx, frame, state, size);
+  drawTextLayers(ctx, state, size);
+}
+
+export function renderFrameGallery(container: HTMLElement, frames: FramePreset[], selectedId: string): void {
+  container.replaceChildren();
+  frames.forEach((frame) => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = `frame-choice${frame.id === selectedId ? ' is-selected' : ''}`;
+    button.dataset.frameId = frame.id;
+    button.setAttribute('aria-pressed', String(frame.id === selectedId));
+    button.title = frame.description;
+    const swatch = document.createElement('canvas');
+    swatch.className = 'frame-swatch';
+    swatch.setAttribute('aria-hidden', 'true');
+    drawFrameIcon(swatch, frame, { frameId: frame.id, background: '#111720', border: frame.accent, borderWidth: 7, borderOpacity: 1, overlay: frame.accent, overlayOpacity: 0, textColor: '#fff4d6', imageSrc: null, imageName: '', imageX: 0, imageY: 0, imageZoom: 1, scale: 1, texts: [], selectedTextId: null });
+    const name = document.createElement('span');
+    name.textContent = frame.shortName;
+    button.append(swatch, name);
+    container.append(button);
+  });
+}
+
+export function renderTextLayers(container: HTMLElement, texts: TextLayer[], selectedId: string | null, emptyText: string): void {
+  container.replaceChildren();
+  if (texts.length === 0) {
+    const empty = document.createElement('p');
+    empty.className = 'text-empty';
+    empty.textContent = emptyText;
+    container.append(empty);
+    return;
+  }
+  texts.forEach((text) => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = `text-layer-choice${text.id === selectedId ? ' is-selected' : ''}`;
+    button.dataset.textId = text.id;
+    button.textContent = text.text || 'Untitled label';
+    container.append(button);
+  });
+}
+
+interface LibraryLabels {
+  emptyText: string;
+  reuseText: string;
+  deleteText: string;
+  newText: string;
+  activeId: string;
+}
+
+function createMarkerPreview(marker: SavedMarker): HTMLCanvasElement {
+  const preview = document.createElement('canvas');
+  preview.className = 'marker-card-preview';
+  const drawPreview = (image: HTMLImageElement | null) => {
+    if (image?.complete && image.naturalWidth > 0) drawTokenCanvas(preview, marker.state, image, false);
+    else drawFrameIcon(preview, getFramePreset(marker.state.frameId), { ...marker.state, borderWidth: Math.max(5, marker.state.borderWidth / 2) });
+  };
+  drawPreview(null);
+  if (marker.state.imageSrc) {
+    const image = new Image();
+    image.addEventListener('load', () => drawPreview(image), { once: true });
+    image.src = marker.state.imageSrc;
+  }
+  return preview;
+}
+
+function createMarkerCard(marker: SavedMarker, labels: LibraryLabels): HTMLElement {
+  const card = document.createElement('article'); card.className = `marker-card${marker.id === labels.activeId ? ' is-active' : ''}`; card.dataset.markerId = marker.id;
+  const button = document.createElement('button'); button.type = 'button';
+  button.className = 'marker-card-main';
+  button.dataset.markerId = marker.id;
+  button.setAttribute('aria-label', `${labels.reuseText}: ${marker.name}`);
+  if (marker.id === labels.activeId) button.setAttribute('aria-current', 'true');
+  const preview = createMarkerPreview(marker);
+  const image = document.createElement('img');
+  image.alt = marker.name;
+  image.loading = 'lazy';
+  if (marker.state.imageSrc) image.src = marker.state.imageSrc;
+  preview.append(image);
+  const details = document.createElement('span');
+  details.className = 'marker-card-details';
+  const name = document.createElement('strong');
+  name.textContent = marker.name;
+  const date = document.createElement('small');
+  date.textContent = new Date(marker.updatedAt).toLocaleDateString();
+  details.append(name, date);
+  button.append(preview, details);
+  const remove = document.createElement('button');
+  remove.type = 'button';
+  remove.className = 'marker-card-delete';
+  remove.dataset.deleteMarker = marker.id;
+  remove.setAttribute('aria-label', `${labels.deleteText}: ${marker.name}`);
+  remove.textContent = 'x';
+  card.append(button, remove);
+  return card;
+}
+
+export function renderMarkerLibrary(container: HTMLElement, markers: SavedMarker[], labels: LibraryLabels): void {
+  container.replaceChildren();
+  const add = document.createElement('button');
+  add.type = 'button';
+  add.className = 'marker-card marker-card-new';
+  add.dataset.newMarker = 'true';
+  add.textContent = `+ ${labels.newText}`;
+  container.append(add);
+  if (markers.length === 0) {
+    const empty = document.createElement('p');
+    empty.className = 'library-empty';
+    empty.textContent = labels.emptyText;
+    container.append(empty);
+    return;
+  }
+  markers.forEach((marker) => container.append(createMarkerCard(marker, labels)));
+}