@jjlmoya/utils-tabletop 1.26.0 → 1.28.0

package/src/tool/token-stamp-studio/i18n/zh.ts

@@ -0,0 +1,132 @@
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import { bibliography } from '../bibliography';
+import type { TokenStampLocaleContent, TokenStampUI } from '../entry';
+
+const ui: TokenStampUI = {
+  frameLegend: '选择边框',
+  frameHint: '选择能在看到名字前就传达角色身份的轮廓边框。',
+  randomFrame: '随机边框',
+  surfaceLegend: '棋子配色设置',
+  backgroundLabel: '背景颜色',
+  borderLabel: '边框颜色',
+  textLabel: '文字颜色',
+  overlayLabel: '色调覆盖',
+  randomColors: '随机颜色',
+  borderWidthLabel: '边框粗细',
+  opacityLabel: '边框透明度',
+  overlayOpacityLabel: '头像遮罩透明度',
+  stageLabel: '实时棋子锻造台',
+  chooseImage: '选择头像',
+  clearImage: '清除头像',
+  positionHint: '可以直接在棋子上拖动调整头像或文字标签的位置。',
+  markerName: '标记名称',
+  markerNamePlaceholder: '为此标记命名',
+  textLegend: '添加清晰可读的桌面细节',
+  textHint: '使用简短标签（如名字、等级、职业或状态），并将其拖动到棋子上的合适位置。',
+  textPlaceholder: '角色名字或职业',
+  addText: '添加标签',
+  removeText: '移除标签',
+  textSizeLabel: '字体大小',
+  alignmentLabel: '对齐方式',
+  alignLeft: '左对齐',
+  alignCenter: '居中对齐',
+  alignRight: '右对齐',
+  imageLegend: '微调头像',
+  imageZoomLabel: '头像缩放',
+  scaleLabel: '导出比例',
+  savedMarkers: '已保存的标记',
+  noSavedMarkers: '已保存的标记将显示在此处，方便重新打开和编辑。',
+  reuseMarker: '选择标记以重新在锻造台编辑。',
+  deleteMarker: '删除标记',
+  newMarker: '新建标记',
+  download: '下载 PNG',
+  copy: '复制 PNG',
+  downloadBatch: '批量下载',
+  batchLabel: '高级批量导出',
+  batchHint: '可选：使用当前的边框和配色方案批量导出多个头像。',
+  chooseBatch: '选择批量图片',
+  batchReady: '已准备好 {count} 张图片。',
+  noImage: '未加载头像',
+  noText: '暂无标签。请添加团队所需的详细信息。',
+  tokenDetails: '角色棋子控制面板',
+  exportHint: '导出的 PNG 图片在选定轮廓外保持透明，可直接用于跑团软件（VTT）或打印。',
+};
+
+const faq = [
+  {
+    question: '什么样的头像适合制作角色棋子？',
+    answer: '选择面部清晰、与边框对比鲜明的图片。头部和肩膀的近景裁切在虚拟桌面上缩小显示时最清晰。',
+  },
+  {
+    question: '如何在边框内精准调整头像位置？',
+    answer: '导入图片后直接在棋子上拖动。使用头像缩放功能可以放大面部，而无需更改边框形状。',
+  },
+  {
+    question: '可以在棋子上添加角色名字和等级吗？',
+    answer: '可以。添加简短的文本标签，调整字体大小和对齐方式，然后拖动到棋子上的清晰位置。',
+  },
+  {
+    question: '导出的 PNG 图片背景是透明的吗？',
+    answer: '是的。导出的图片在边框轮廓之外保持透明，方便直接覆盖在战场地图上。',
+  },
+  {
+    question: '可以一次性为整个小队制作棋子吗？',
+    answer: '可以。使用批量导出功能，导入多张图片，即可应用相同的边框样式批量生成透明 PNG 棋子。',
+  },
+  {
+    question: '保存的标记保存在哪里？',
+    answer: '标记保存在您浏览器的本地存储中，不会将您的个人图片上传到任何服务器。',
+  },
+];
+
+const howTo = [
+  { name: '选择适合角色的边框', text: '根据角色属性选择边框：圆形适合主角，六边形适合战术棋盘，星形适合 Boss。' },
+  { name: '导入并调整头像位置', text: '拖入图片，调整拖动和缩放比例，使面部处于中央。' },
+  { name: '添加必要的桌面文本', text: '添加简短的名字或状态标签，避免遮挡主要画面。' },
+  { name: '导出透明 PNG', text: '下载透明 PNG 棋子，直接在 VTT 跑团软件中使用。' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: 'Token Stamp Studio',
+  operatingSystem: 'All',
+  applicationCategory: 'DesignApplication',
+  description: 'TRPG 桌面角色棋子（Token）制作工具，支持自定义边框、文本标签、背景透明及批量 PNG 导出。',
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: '如何制作跑团角色棋子',
+  step: howTo.map((item) => ({ '@type': 'HowToStep', name: item.name, text: item.text })),
+};
+
+export const content: TokenStampLocaleContent = {
+  slug: 'token-stamp-studio',
+  title: 'TRPG跑团角色棋子在线制作工具 (Token Stamp)',
+  description: 'TRPG 桌面角色棋子（Token）制作工具，支持自定义边框、文本标签、背景透明及批量 PNG 导出。',
+  ui,
+  seo: [
+    { type: 'title', text: '制作在游戏地图上清晰辨识的在线桌面跑团角色棋子', level: 2 },
+    { type: 'paragraph', html: '棋子是桌游和 TRPG 跑团中不可或缺的核心视觉交流工具。棋子的轮廓能够在玩家放大地图细节之前，就直观地传达出当前代表的是英雄、强敌怪物、魔法效果还是重要盟友。为角色选择最契合的边框，并确保人物头像和文本标签在实际缩放比例下依然清晰易读。' },
+    { type: 'title', text: '为不同定位与阵营的角色选择最合适的边框样式', level: 2 },
+    { type: 'list', items: ['<strong>圆形与圆环:</strong> 玩家角色（PC）与常驻盟友的最经典可靠选择。', '<strong>六边形与八边形:</strong> 适合包含大量战斗单位的战术棋盘与战场地图。', '<strong>星形:</strong> 非常适合 Boss 怪物、精英敌人或需要引起注意的重要目标。', '<strong>云朵形:</strong> 适合召唤兽、精灵、魔宠等特殊的存在。'] },
+    { type: 'tip', title: '针对游戏时实际最小显示尺寸进行细致设计', html: '缩小地图视角，观察棋子缩到很小时面部特征与文字是否依然清晰可辨。' },
+    { type: 'title', text: '使用简短而实用的文本标签辅助对局', level: 2 },
+    { type: 'paragraph', html: '跑团棋子无需替代完整的角色卡，只需添加名字、等级或晕眩等状态标签，避免遮挡插画。' },
+    { type: 'title', text: '一键为整个冒险小队制作视觉统一的角色棋子', level: 2 },
+    { type: 'paragraph', html: '批量导出功能可以在保持团队整体视觉规范统一的同时，完美保留每个角色的独特插画。' },
+    { type: 'tip', title: '设备本地自动保存功能', html: '正在制作的标记会自动保存在浏览器本地，随角色升级轻松打开重新编辑。' },
+  ],
+  faq,
+  bibliography,
+  howTo,
+  schemas: [faqSchema, appSchema, howToSchema] as unknown as Record<string, unknown>[],
+};

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

@@ -0,0 +1,11 @@
+import type { ToolDefinition } from '../../types';
+import { tokenStampStudio } from './entry';
+
+export * from './entry';
+
+export const TOKEN_STAMP_STUDIO_TOOL: ToolDefinition = {
+  entry: tokenStampStudio,
+  Component: () => import('./component.astro'),
+  SEOComponent: () => import('./seo.astro'),
+  BibliographyComponent: () => import('./bibliography.astro'),
+};

package/src/tool/token-stamp-studio/logic.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { FRAME_PRESETS, clamp, createDefaultState, getFrameGeometry, getStatus, hitTestText } from './logic';
+
+describe('token stamp studio logic', () => {
+  it('starts with a usable foundry state', () => {
+    const state = createDefaultState();
+    expect(state.frameId).toBe(FRAME_PRESETS[0]!.id);
+    expect(state.overlayOpacity).toBe(0);
+    expect(state.imageSrc).toBeNull();
+  });
+
+  it('clamps numeric controls to their safe ranges', () => {
+    expect(clamp(-4, 0, 1)).toBe(0);
+    expect(clamp(2, 0, 1)).toBe(1);
+    expect(clamp(0.4, 0, 1)).toBe(0.4);
+  });
+
+  it('builds a geometry for every frame family', () => {
+    FRAME_PRESETS.forEach((frame) => expect(getFrameGeometry(frame.shape)).toBeDefined());
+    expect(getFrameGeometry('circle').kind).toBe('circle');
+    expect(getFrameGeometry('hexagon').points).toHaveLength(6);
+  });
+
+  it('diagnoses the two empty states before ready', () => {
+    const messages = { statusReady: 'Ready', statusAddImage: 'Add an image', statusAddText: 'Finish the label' };
+    const state = createDefaultState();
+    expect(getStatus(state, messages).message).toBe('Add an image');
+    expect(getStatus({ ...state, imageSrc: 'data:image/png;base64,a', texts: [{ id: 'a', text: '', x: 0.5, y: 0.8, size: 54, align: 'center' }], selectedTextId: 'a' }, messages).message).toBe('Finish the label');
+  });
+
+  it('detects a text layer under the pointer', () => {
+    const layer = { id: 'a', text: 'Goblin', x: 0.5, y: 0.8, size: 54, align: 'center' as const };
+    expect(hitTestText(layer, { x: 0.5, y: 0.8 })).toBe(true);
+    expect(hitTestText(layer, { x: 0.05, y: 0.1 })).toBe(false);
+  });
+});

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

@@ -0,0 +1,127 @@
+import type { FrameGeometry, FramePreset, TextLayer, TokenPalette, TokenStampState, TokenStampStatus } from './types';
+
+export const FRAME_PRESETS: FramePreset[] = [
+  { id: 'ember-ring', name: 'Ember ring', shortName: 'Ring', description: 'A warm double ring for classic character tokens.', shape: 'circle', accent: '#d89555' },
+  { id: 'parchment-square', name: 'Parchment square', shortName: 'Square', description: 'A clean square cut for maps, cards, and item art.', shape: 'square', accent: '#c6a875' },
+  { id: 'hex-warden', name: 'Hex warden', shortName: 'Hex', description: 'A six sided badge with a tactical silhouette.', shape: 'hexagon', accent: '#89b9ae' },
+  { id: 'octagon-steel', name: 'Octagon steel', shortName: 'Octagon', description: 'A hard edged frame for monsters and machines.', shape: 'octagon', accent: '#a9b6c4' },
+  { id: 'star-forge', name: 'Star forge', shortName: 'Star', description: 'A bright eight point emblem for heroes and relics.', shape: 'star', accent: '#e0b35e' },
+  { id: 'diamond-sigil', name: 'Diamond sigil', shortName: 'Diamond', description: 'A turned frame that reads like a spell seal.', shape: 'diamond', accent: '#b48bd0' },
+  { id: 'ticket-relic', name: 'Ticket relic', shortName: 'Ticket', description: 'A notched frame for quests, clues, and locations.', shape: 'ticket', accent: '#d17f69' },
+  { id: 'cloud-echo', name: 'Cloud echo', shortName: 'Cloud', description: 'A soft irregular edge for spirits and fey creatures.', shape: 'cloud', accent: '#84b9ca' },
+  { id: 'scallop-crown', name: 'Scallop crown', shortName: 'Scallop', description: 'A ceremonial edge for bosses and named allies.', shape: 'scallop', accent: '#d4a4b9' },
+];
+
+export const DEFAULT_FRAME_ID = FRAME_PRESETS[0]!.id;
+
+export const COLOR_PALETTES: TokenPalette[] = [
+  { background: '#1d2430', border: '#d89555', text: '#fff4d6', overlay: '#e05b4f' },
+  { background: '#182b2a', border: '#80b8a5', text: '#f5f1dc', overlay: '#d26b5b' },
+  { background: '#29233a', border: '#c49ad7', text: '#fff1ca', overlay: '#6e91ca' },
+  { background: '#33251e', border: '#d4a45f', text: '#fff8e9', overlay: '#8f574c' },
+  { background: '#202c3d', border: '#86a9d3', text: '#f8f0dd', overlay: '#9c668c' },
+  { background: '#243329', border: '#c1b36a', text: '#fffbe3', overlay: '#b86a4e' },
+];
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function createDefaultState(): TokenStampState {
+  return {
+    markerName: '',
+    frameId: DEFAULT_FRAME_ID,
+    background: '#1d2430',
+    border: '#d89555',
+    borderWidth: 16,
+    borderOpacity: 1,
+    overlay: '#e05b4f',
+    overlayOpacity: 0,
+    imageSrc: null,
+    imageName: '',
+    imageX: 0,
+    imageY: 0,
+    imageZoom: 1,
+    scale: 1,
+    textColor: '#fff4d6',
+    texts: [],
+    selectedTextId: null,
+  };
+}
+
+export function getFramePreset(frameId: string): FramePreset {
+  return FRAME_PRESETS.find((frame) => frame.id === frameId) ?? FRAME_PRESETS[0]!;
+}
+
+export function getRandomPalette(): TokenPalette {
+  return COLOR_PALETTES[Math.floor(Math.random() * COLOR_PALETTES.length)]!;
+}
+
+function polygonGeometry(sides: number, rotation: number): FrameGeometry {
+  const points = Array.from({ length: sides }, (_, index) => {
+    const angle = rotation + (Math.PI * 2 * index) / sides;
+    return { x: 0.5 + Math.cos(angle) * 0.45, y: 0.5 + Math.sin(angle) * 0.45 };
+  });
+  return { kind: 'polygon', points };
+}
+
+function starGeometry(): FrameGeometry {
+  const points = Array.from({ length: 16 }, (_, index) => {
+    const angle = -Math.PI / 2 + (Math.PI * 2 * index) / 16;
+    const radius = index % 2 === 0 ? 0.45 : 0.25;
+    return { x: 0.5 + Math.cos(angle) * radius, y: 0.5 + Math.sin(angle) * radius };
+  });
+  return { kind: 'polygon', points };
+}
+
+function ticketGeometry(): FrameGeometry {
+  return { kind: 'polygon', points: [
+    { x: 0.24, y: 0.08 }, { x: 0.76, y: 0.08 }, { x: 0.82, y: 0.14 },
+    { x: 0.82, y: 0.86 }, { x: 0.76, y: 0.92 }, { x: 0.24, y: 0.92 },
+    { x: 0.18, y: 0.86 }, { x: 0.18, y: 0.14 },
+  ] };
+}
+
+function scallopGeometry(): FrameGeometry {
+  const points = Array.from({ length: 24 }, (_, index) => {
+    const angle = -Math.PI / 2 + (Math.PI * 2 * index) / 24;
+    const radius = index % 2 === 0 ? 0.45 : 0.38;
+    return { x: 0.5 + Math.cos(angle) * radius, y: 0.5 + Math.sin(angle) * radius };
+  });
+  return { kind: 'polygon', points };
+}
+
+const FRAME_GEOMETRIES: Record<FramePreset['shape'], () => FrameGeometry> = {
+  circle: () => ({ kind: 'circle' }),
+  square: () => polygonGeometry(4, Math.PI / 4),
+  hexagon: () => polygonGeometry(6, -Math.PI / 2),
+  octagon: () => polygonGeometry(8, Math.PI / 8),
+  star: starGeometry,
+  diamond: () => polygonGeometry(4, 0),
+  ticket: ticketGeometry,
+  cloud: () => ({ kind: 'circle' }),
+  scallop: scallopGeometry,
+};
+
+export function getFrameGeometry(shape: FramePreset['shape']): FrameGeometry {
+  return FRAME_GEOMETRIES[shape]();
+}
+
+export function updateTextLayer(texts: TextLayer[], selectedTextId: string | null, update: Partial<TextLayer>): TextLayer[] {
+  return texts.map((text) => text.id === selectedTextId ? { ...text, ...update } : text);
+}
+
+export function createTextLayer(index: number): TextLayer {
+  return { id: `text-${Date.now()}-${index}`, text: 'New label', x: 0.5, y: 0.8, size: 54, align: 'center' };
+}
+
+export function getStatus(state: TokenStampState, ui: { statusReady: string; statusAddImage: string; statusAddText: string }): TokenStampStatus {
+  if (!state.imageSrc) return { tone: 'attention', message: ui.statusAddImage };
+  if (state.texts.some((text) => text.text.trim().length === 0)) return { tone: 'attention', message: ui.statusAddText };
+  return { tone: 'ready', message: ui.statusReady };
+}
+
+export function hitTestText(text: TextLayer, point: { x: number; y: number }): boolean {
+  const width = Math.max(0.12, text.text.length * text.size / 900);
+  return Math.abs(point.x - text.x) <= width / 2 && Math.abs(point.y - text.y) <= text.size / 1100;
+}

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

@@ -0,0 +1,16 @@
+---
+import { SEORenderer } 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.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

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

@@ -0,0 +1,69 @@
+import type { SavedMarker, TokenStampState } from './types';
+
+const STORAGE_KEY = 'jjlmoya-token-stamp-studio';
+const LIBRARY_KEY = 'jjlmoya-token-stamp-library';
+const ACTIVE_MARKER_KEY = 'jjlmoya-token-stamp-active-marker';
+
+export function saveTokenState(state: TokenStampState): boolean {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function loadTokenState(): TokenStampState | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) as TokenStampState : null;
+  } catch {
+    return null;
+  }
+}
+
+export function clearTokenState(): void {
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+  } catch {}
+}
+
+export function listSavedMarkers(): SavedMarker[] {
+  try {
+    const raw = localStorage.getItem(LIBRARY_KEY);
+    const markers = raw ? JSON.parse(raw) as SavedMarker[] : [];
+    return Array.isArray(markers) ? markers : [];
+  } catch {
+    return [];
+  }
+}
+
+export function saveMarker(marker: SavedMarker): SavedMarker[] {
+  const markers = [marker, ...listSavedMarkers().filter((item) => item.id !== marker.id)].slice(0, 24);
+  try {
+    localStorage.setItem(LIBRARY_KEY, JSON.stringify(markers));
+  } catch {}
+  return markers;
+}
+
+export function deleteMarker(id: string): SavedMarker[] {
+  const markers = listSavedMarkers().filter((marker) => marker.id !== id);
+  try {
+    localStorage.setItem(LIBRARY_KEY, JSON.stringify(markers));
+  } catch {}
+  return markers;
+}
+
+export function saveActiveMarkerId(id: string): void {
+  try {
+    localStorage.setItem(ACTIVE_MARKER_KEY, id);
+  } catch {}
+}
+
+export function loadActiveMarkerId(): string | null {
+  try {
+    return localStorage.getItem(ACTIVE_MARKER_KEY);
+  } catch {
+    return null;
+  }
+}

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

@@ -0,0 +1,139 @@
+import { createDefaultState, FRAME_PRESETS } from './logic';
+import { drawTokenCanvas, renderFrameGallery, renderMarkerLibrary, renderTextLayers } from './dom-views';
+import { deleteMarker, listSavedMarkers, loadActiveMarkerId, loadTokenState, saveActiveMarkerId, saveMarker, saveTokenState } from './storage';
+import { loadImage } from './workspace-media';
+import type { StudioElements } from './controller';
+import type { TokenStampUI } from './ui';
+import type { SavedMarker, TokenStampState } from './types';
+
+function markerName(state: TokenStampState): string {
+  return state.markerName?.trim() || state.texts.find((text) => text.text.trim())?.text.trim() || state.imageName.replace(/\.[^/.]+$/, '') || 'Unnamed marker';
+}
+
+function createMarkerId(): string {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+function getActiveMarkerId(markers: SavedMarker[]): string {
+  const stored = loadActiveMarkerId();
+  if (stored) return stored;
+  if (markers[0]) return markers[0].id;
+  return createMarkerId();
+}
+
+function normalizeActiveMarkerId(markers: SavedMarker[], id: string): string {
+  return markers.some((marker) => marker.id === id) ? id : markers[0]!.id;
+}
+
+function createInitialMarkerSession(): { state: TokenStampState; markers: SavedMarker[]; activeMarkerId: string } {
+  const storedState = loadTokenState() || createDefaultState();
+  let markers = listSavedMarkers();
+  let activeMarkerId = getActiveMarkerId(markers);
+  if (markers.length === 0) markers = saveMarker({ id: activeMarkerId, name: markerName(storedState), updatedAt: Date.now(), state: storedState });
+  activeMarkerId = normalizeActiveMarkerId(markers, activeMarkerId);
+  const active = markers.find((marker) => marker.id === activeMarkerId);
+  return { markers, activeMarkerId, state: active?.state || storedState };
+}
+
+export class StudioStore {
+  state: TokenStampState;
+  markers: SavedMarker[];
+  activeMarkerId: string;
+  image: HTMLImageElement | null = null;
+
+  constructor(private readonly elements: StudioElements, private readonly ui: TokenStampUI) {
+    const session = createInitialMarkerSession();
+    this.markers = session.markers;
+    this.activeMarkerId = session.activeMarkerId;
+    this.state = session.state;
+    saveActiveMarkerId(this.activeMarkerId);
+  }
+
+  async restore(): Promise<void> {
+    if (!this.state.imageSrc) return;
+    try { this.image = await loadImage(this.state.imageSrc); } catch { this.state = { ...this.state, imageSrc: null, imageName: '' }; }
+  }
+
+  getState = (): TokenStampState => this.state;
+  getMarkers = (): SavedMarker[] => this.markers;
+  getImage = (): HTMLImageElement | null => this.image;
+
+  setState = (next: TokenStampState): void => {
+    this.state = next;
+    saveTokenState(next);
+    const active = this.markers.find((marker) => marker.id === this.activeMarkerId);
+    if (active) this.markers = saveMarker({ ...active, name: markerName(next), updatedAt: Date.now(), state: next });
+    this.render();
+  };
+
+  setImage = (nextImage: HTMLImageElement | null): void => { this.image = nextImage; this.render(); };
+
+  selectMarker = (marker: SavedMarker): void => {
+    this.activeMarkerId = marker.id;
+    this.state = marker.state;
+    saveActiveMarkerId(marker.id);
+    if (marker.state.imageSrc) void loadImage(marker.state.imageSrc).then(this.setImage).catch(() => this.setImage(null));
+    else this.setImage(null);
+    this.renderLibrary();
+  };
+
+  addMarker = (): void => {
+    const state = createDefaultState();
+    const marker: SavedMarker = { id: createMarkerId(), name: markerName(state), updatedAt: Date.now(), state };
+    this.markers = saveMarker(marker);
+    this.activeMarkerId = marker.id;
+    this.image = null;
+    saveActiveMarkerId(marker.id);
+    this.setState(state);
+  };
+
+  removeMarker = (id: string): void => {
+    this.markers = deleteMarker(id);
+    if (id !== this.activeMarkerId) return this.renderLibrary();
+    const next = this.markers[0];
+    if (next) this.selectMarker(next);
+    else this.addMarker();
+  };
+
+  render(): void {
+    drawTokenCanvas(this.elements.canvas, this.state, this.image);
+    renderFrameGallery(this.elements.frames, FRAME_PRESETS, this.state.frameId);
+    renderTextLayers(this.elements.textLayers, this.state.texts, this.state.selectedTextId, this.ui.noText);
+    this.elements.currentImage.textContent = this.state.imageName || this.ui.noImage;
+    this.elements.markerName.value = this.state.markerName || '';
+    this.setInputValues();
+    this.renderLibrary();
+  }
+
+  setInputValues(): void {
+    const text = this.state.texts.find((item) => item.id === this.state.selectedTextId);
+    this.elements.textInput.value = text?.text || '';
+    this.elements.textSize.value = String(text?.size || 54);
+    this.elements.imageZoom.value = String(this.state.imageZoom);
+    this.elements.scale.value = String(this.state.scale);
+    this.elements.borderWidth.value = String(this.state.borderWidth);
+    this.elements.borderOpacity.value = String(this.state.borderOpacity);
+    this.elements.overlayOpacity.value = String(this.state.overlayOpacity);
+    this.setOutputValues();
+  }
+
+  setOutputValues(): void {
+    const root = this.elements.root;
+    const output = (selector: string, value: string) => { const element = root.querySelector<HTMLOutputElement>(selector); if (element) element.value = value; };
+    output('[data-border-width-output]', String(this.state.borderWidth));
+    output('[data-border-opacity-output]', `${Math.round(this.state.borderOpacity * 100)}%`);
+    output('[data-overlay-opacity-output]', `${Math.round(this.state.overlayOpacity * 100)}%`);
+    output('[data-image-zoom-output]', `${Math.round(this.state.imageZoom * 100)}%`);
+    output('[data-scale-output]', `${Math.round(this.state.scale * 100)}%`);
+    output('[data-text-size-output]', String(this.state.texts.find((item) => item.id === this.state.selectedTextId)?.size || 54));
+    ['background', 'border', 'text', 'overlay'].forEach((name) => {
+      const element = root.querySelector<HTMLInputElement>(`[data-color="${name}"]`);
+      const key = name === 'text' ? 'textColor' : name;
+      if (element) element.value = this.state[key as keyof TokenStampState] as string;
+    });
+  }
+
+  renderLibrary(): void {
+    renderMarkerLibrary(this.elements.library, this.markers, { emptyText: this.ui.noSavedMarkers, reuseText: this.ui.reuseMarker, deleteText: this.ui.deleteMarker, newText: this.ui.newMarker, activeId: this.activeMarkerId });
+  }
+}