@jjlmoya/utils-tabletop 1.25.0 → 1.27.0

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)));
+}

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

@@ -0,0 +1,27 @@
+import type { TabletopToolEntry, ToolLocaleContent } from '../../types';
+import type { TokenStampUI } from './ui';
+
+export type { TokenStampUI } from './ui';
+export type TokenStampLocaleContent = ToolLocaleContent<TokenStampUI>;
+
+export const tokenStampStudio: TabletopToolEntry<TokenStampUI> = {
+  id: 'token-stamp-studio',
+  icons: { bg: 'mdi:account-circle-outline', fg: 'mdi:account-circle' },
+  i18n: {
+    de: () => import('./i18n/de').then((module) => module.content),
+    en: () => import('./i18n/en').then((module) => module.content),
+    es: () => import('./i18n/es').then((module) => module.content),
+    fr: () => import('./i18n/fr').then((module) => module.content),
+    id: () => import('./i18n/id').then((module) => module.content),
+    it: () => import('./i18n/it').then((module) => module.content),
+    ja: () => import('./i18n/ja').then((module) => module.content),
+    ko: () => import('./i18n/ko').then((module) => module.content),
+    nl: () => import('./i18n/nl').then((module) => module.content),
+    pl: () => import('./i18n/pl').then((module) => module.content),
+    pt: () => import('./i18n/pt').then((module) => module.content),
+    ru: () => import('./i18n/ru').then((module) => module.content),
+    sv: () => import('./i18n/sv').then((module) => module.content),
+    tr: () => import('./i18n/tr').then((module) => module.content),
+    zh: () => import('./i18n/zh').then((module) => module.content),
+  },
+};

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

@@ -0,0 +1,6 @@
+import { getStatus } from './logic';
+import type { TokenStampState, TokenStampStatus } from './types';
+
+export function evaluateTokenState(state: TokenStampState, ui: { statusReady: string; statusAddImage: string; statusAddText: string }): TokenStampStatus {
+  return getStatus(state, ui);
+}

package/src/tool/token-stamp-studio/i18n/de.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: 'Wähle einen Rahmen',
+  frameHint: 'Wähle die Silhouette, die der Gruppe zeigt, wer dieser Charakter ist, bevor jemand den Namen liest.',
+  randomFrame: 'Zufälliger Rahmen',
+  surfaceLegend: 'Gestalte den Token',
+  backgroundLabel: 'Hintergrund',
+  borderLabel: 'Rahmen',
+  textLabel: 'Beschriftung',
+  overlayLabel: 'Tönung',
+  randomColors: 'Zufällige Farben',
+  borderWidthLabel: 'Rahmenstärke',
+  opacityLabel: 'Rahmentransparenz',
+  overlayOpacityLabel: 'Porträttönung',
+  stageLabel: 'Live Token Schmiede',
+  chooseImage: 'Porträt wählen',
+  clearImage: 'Porträt entfernen',
+  positionHint: 'Ziehe das Porträt oder Beschriftungen direkt auf den Token.',
+  markerName: 'Marker Name',
+  markerNamePlaceholder: 'Marker benennen',
+  textLegend: 'Füge lesbare Details hinzu',
+  textHint: 'Verwende kurze Angaben wie Name, Stufe, Rolle oder Zustand. Ziehe jede Beschriftung auf den Token.',
+  textPlaceholder: 'Charaktername oder Rolle',
+  addText: 'Beschriftung hinzufügen',
+  removeText: 'Beschriftung entfernen',
+  textSizeLabel: 'Schriftgröße',
+  alignmentLabel: 'Textausrichtung',
+  alignLeft: 'Links ausrichten',
+  alignCenter: 'Zentrieren',
+  alignRight: 'Rechts ausrichten',
+  imageLegend: 'Porträt anpassen',
+  imageZoomLabel: 'Porträt Zoom',
+  scaleLabel: 'Export Skalierung',
+  savedMarkers: 'Gespeicherte Marker',
+  noSavedMarkers: 'Gespeicherte Marker erscheinen hier, um sie erneut zu öffnen, zu bearbeiten und wiederzuverwenden.',
+  reuseMarker: 'Wähle einen Marker zum erneuten Öffnen.',
+  deleteMarker: 'Marker löschen',
+  newMarker: 'Neuer Marker',
+  download: 'PNG herunterladen',
+  copy: 'PNG kopieren',
+  downloadBatch: 'Stapel herunterladen',
+  batchLabel: 'Erweiterter Stapel Export',
+  batchHint: 'Optional: Exportiere mehrere Porträts mit den aktuellen Rahmen und Farbeinstellungen.',
+  chooseBatch: 'Porträts auswählen',
+  batchReady: '{count} Porträts bereit zum Schmieden.',
+  noImage: 'Kein Porträt geladen',
+  noText: 'Noch keine Beschriftungen. Füge Details hinzu, die deine Gruppe benötigt.',
+  tokenDetails: 'Charakter Token Steuerung',
+  exportHint: 'Das PNG ist außerhalb der gewählten Silhouette transparent, bereit für VTT oder Druckbögen.',
+};
+
+const faq = [
+  {
+    question: 'Was macht ein gutes Charakter Token Porträt aus?',
+    answer: 'Wähle ein Bild mit gut erkennbarem Gesicht oder starker Silhouette und ausreichend Kontrast zum Rahmen. Ein Kopf und Schultern Ausschnitt bleibt auch bei kleiner Darstellung auf dem VTT gut lesbar.',
+  },
+  {
+    question: 'Wie platziere ich das Porträt optimal im Rahmen?',
+    answer: 'Lade das Bild hoch und ziehe es direkt auf dem Token an die richtige Position. Nutze den Porträt Zoom, um das Gesicht zu vergrößern, ohne den Rahmen zu verändern.',
+  },
+  {
+    question: 'Kann ich Charaktername und Stufe hinzufügen?',
+    answer: 'Ja. Füge so viele kurze Beschriftungen hinzu wie nötig, wähle sie aus, passe Schriftgröße und Ausrichtung an und platziere sie gut lesbar auf dem Token.',
+  },
+  {
+    question: 'Bleibt das PNG außerhalb des Tokens transparent?',
+    answer: 'Ja. Das exportierte Bild behält den Bereich außerhalb der Silhouette transparent, sodass der Marker perfekt auf Spielplänen oder Druckbögen platziert werden kann.',
+  },
+  {
+    question: 'Kann ich eine ganze Abenteurergruppe auf einmal erstellen?',
+    answer: 'Ja. Lade mehrere Porträts im Stapel Export hoch, verwende dieselben Rahmen und Farbeinstellungen und lade für jedes Porträt ein transparentes PNG herunter.',
+  },
+  {
+    question: 'Wo werden meine gespeicherten Marker abgelegt?',
+    answer: 'Das Speichern auf diesem Gerät sichert den Marker im lokalen Browserspeicher. Es werden keine Bilder hochgeladen. Das Löschen von Browserdaten entfernt auch die lokale Kopie.',
+  },
+];
+
+const howTo = [
+  { name: 'Wähle die Charakter Silhouette', text: 'Starte mit einem Rahmen, der zum Charakter passt: Kreis für klassische Helden, Sechseck für taktische Spiele oder Stern für Bosse und Champions.' },
+  { name: 'Porträt laden und ausrichten', text: 'Wähle ein Bild aus und ziehe es auf den Live Token. Positioniere das Gesicht mittig im Rahmen und passe den Zoom an.' },
+  { name: 'Wichtige Details hinzufügen', text: 'Ergänze kurze Beschriftungen für Name, Stufe oder Status. Halte den Text kurz, damit das Bild gut erkennbar bleibt.' },
+  { name: 'Speichern und als PNG exportieren', text: 'Der Marker wird automatisch gespeichert. Lade ein transparentes PNG für dein Virtual Tabletop oder den Druckbogen herunter.' },
+];
+
+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: 'Erstelle gut lesbare Charakter Tokens für Pen and Paper Rollenspiele mit individuellen Rahmen, Beschriftungen, Transparenz und Stapel Export.',
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: 'So erstellst du ein Charakter Token für Rollenspiele',
+  step: howTo.map((item) => ({ '@type': 'HowToStep', name: item.name, text: item.text })),
+};
+
+export const content: TokenStampLocaleContent = {
+  slug: 'character-token-maker-rpg-rollenspiel',
+  title: 'Charakter Token Ersteller für Pen and Paper Rollenspiele',
+  description: 'Erstelle gut lesbare Charakter Tokens und Marker aus Porträts mit ausdrucksstarken Rahmen, verschiebbaren Ausschnitten, Beschriftungen und transparentem PNG Export.',
+  ui,
+  seo: [
+    { type: 'title', text: 'Gestalte deutliche Charakter Tokens für jede Kartengröße', level: 2 },
+    { type: 'paragraph', html: 'Ein Token ist ein visueller Signalgeber am Spieltisch. Seine Silhouette verrät der Gruppe sofort, ob es sich um einen Helden, ein Monster oder ein wichtiges Ziel handelt. Wähle den passenden Rahmen und halte Gesicht und Text auch bei kleiner Darstellung auf dem VTT gut lesbar.' },
+    { type: 'title', text: 'Der richtige Rahmen für jeden Charaktertyp', level: 2 },
+    { type: 'list', items: ['<strong>Kreis oder Ring:</strong> bewährt für Spielercharaktere und Verbündete.', '<strong>Sechseck oder Achteck:</strong> ideal zur Unterscheidung in taktischen Gefechten mit vielen Einheiten.', '<strong>Stern:</strong> perfekt für Bosse, Champions oder Schlüsselpersonen.', '<strong>Wolke:</strong> sanfte Form für Geister, Vertraute und Fabelwesen.'] },
+    { type: 'tip', title: 'Entwirf Tokens für die kleinste Spielansicht', html: 'Zoome auf der Karte heraus, bis der Token nur noch wenige Pixel klein ist. Wenn Gesicht, Rahmen und Text weiterhin gut trennbar sind, bleibt der Marker im Spielgeschehen optimal nutzbar.' },
+    { type: 'title', text: 'Kurze und nützliche Beschriftungen am Spieltisch', level: 2 },
+    { type: 'paragraph', html: 'Ein Token ersetzt keinen Charakterbogen. Ergänze nur die ein oder zwei Informationen, die am Tisch ständig gebraucht werden: Name, Stufe oder Status wie benommen. Lange Texte lenken nur vom Porträt ab.' },
+    { type: 'title', text: 'Erstelle ganze Abenteurergruppen mit einheitlichem Stil', level: 2 },
+    { type: 'paragraph', html: 'Der Stapel Export eignet sich hervorragend nach einer Session Zero. Nutze einen gemeinsamen Rahmenstil für die Gruppe, während jedes Gesicht individuell bleibt. Das sorgt für visuellen Zusammenhalt bei klarer Unterscheidbarkeit.' },
+    { type: 'tip', title: 'Automatische Speicherung auf deinem Gerät', html: 'Das lokale Speichern behält den Ausschnitt und die Beschriftung auf deinem Gerät. Exportierte PNGs nutzt du im Spiel; der gespeicherte Marker bleibt deine bearbeitbare Vorlage.' },
+  ],
+  faq,
+  bibliography,
+  howTo,
+  schemas: [faqSchema, appSchema, howToSchema] as unknown as Record<string, unknown>[],
+};

package/src/tool/token-stamp-studio/i18n/en.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: 'Choose a frame',
+  frameHint: 'Pick the silhouette that tells the table who this character is before anyone reads the name.',
+  randomFrame: 'Random frame',
+  surfaceLegend: 'Paint the token',
+  backgroundLabel: 'Backdrop',
+  borderLabel: 'Frame',
+  textLabel: 'Lettering',
+  overlayLabel: 'Tint',
+  randomColors: 'Random colours',
+  borderWidthLabel: 'Frame weight',
+  opacityLabel: 'Frame opacity',
+  overlayOpacityLabel: 'Portrait tint',
+  stageLabel: 'Live token forge',
+  chooseImage: 'Choose portrait',
+  clearImage: 'Clear portrait',
+  positionHint: 'Drag the portrait or a label directly on the token.',
+  markerName: 'Marker name',
+  markerNamePlaceholder: 'Name this marker',
+  textLegend: 'Add table readable details',
+  textHint: 'Use short labels such as a name, level, role, or condition. Drag each one on the token.',
+  textPlaceholder: 'Character name or role',
+  addText: 'Add label',
+  removeText: 'Remove label',
+  textSizeLabel: 'Letter size',
+  alignmentLabel: 'Label alignment',
+  alignLeft: 'Align label left',
+  alignCenter: 'Align label center',
+  alignRight: 'Align label right',
+  imageLegend: 'Tune the portrait',
+  imageZoomLabel: 'Portrait zoom',
+  scaleLabel: 'Export scale',
+  savedMarkers: 'Saved markers',
+  noSavedMarkers: 'Saved markers will appear here so you can reopen, edit, and reuse them for another scene.',
+  reuseMarker: 'Select a marker to reopen it in the forge.',
+  deleteMarker: 'Delete marker',
+  newMarker: 'New marker',
+  download: 'Download PNG',
+  copy: 'Copy PNG',
+  downloadBatch: 'Download batch',
+  batchLabel: 'Advanced batch export',
+  batchHint: 'Optional: export several portraits with the current frame and paint settings.',
+  chooseBatch: 'Choose portraits',
+  batchReady: '{count} portraits ready to forge.',
+  noImage: 'No portrait loaded',
+  noText: 'No labels yet. Add the detail your group needs.',
+  tokenDetails: 'Character token controls',
+  exportHint: 'The PNG is transparent outside the chosen silhouette, ready for a virtual tabletop or print sheet.',
+};
+
+const faq = [
+  {
+    question: 'What makes a good character token portrait?',
+    answer: 'Choose art with a clear face or strong silhouette and enough contrast against the frame. A head and shoulders crop usually stays readable when the token is small on a virtual tabletop.',
+  },
+  {
+    question: 'How do I position a portrait inside the frame?',
+    answer: 'Drop in the image, then drag directly on the token to move the crop. Use Portrait zoom to bring a face forward without changing the frame or labels.',
+  },
+  {
+    question: 'Can I add a character name and level?',
+    answer: 'Yes. Add as many short labels as you need, select each label in the inspector, change its size and alignment, and drag it to a readable position on the token.',
+  },
+  {
+    question: 'Does the PNG keep transparency outside the token?',
+    answer: 'Yes. The exported image keeps the outside of the selected silhouette transparent, which makes it easy to place the marker over a map or print a sheet of tokens.',
+  },
+  {
+    question: 'Can I create a whole party at once?',
+    answer: 'Yes. Load several portraits in Batch forge, keep the current frame and paint settings, then download one PNG per portrait. Each file uses its source filename.',
+  },
+  {
+    question: 'Where is my saved marker stored?',
+    answer: 'Save on this device keeps the current marker in local browser storage. It never uploads the portrait, but clearing site data or using another device removes that local copy.',
+  },
+];
+
+const howTo = [
+  { name: 'Choose the character silhouette', text: 'Start with the frame that matches the character mood: ring for a classic hero, hex for a tactical game, star for a champion, or a softer shape for a spirit or fey creature.' },
+  { name: 'Drop in and frame the portrait', text: 'Choose a portrait or drag it onto the live token. Drag the image until the face or defining silhouette sits inside the frame, then adjust Portrait zoom.' },
+  { name: 'Add only the information the table needs', text: 'Add a short name, role, level, or condition. Keep labels brief, choose a readable size, and drag them so the artwork remains visible.' },
+  { name: 'Reuse and export for play', text: 'Your active marker saves as you work. Reopen it from Saved markers, or download a transparent PNG for your virtual tabletop, print sheet, or campaign handout.' },
+];
+
+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: 'Create readable character tokens for tabletop RPG maps with custom silhouettes, portraits, labels, transparency, and batch PNG export.',
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: 'How to make a tabletop character token',
+  step: howTo.map((item) => ({ '@type': 'HowToStep', name: item.name, text: item.text })),
+};
+
+export const content: TokenStampLocaleContent = {
+  slug: 'token-stamp-studio',
+  title: 'Character Token Maker for Tabletop RPGs',
+  description: 'Forge readable character markers from portraits with expressive frames, draggable crops, labels, transparency, local saving, and batch PNG export.',
+  ui,
+  seo: [
+    { type: 'title', text: 'Make a Character Token That Reads Across the Map', level: 2 },
+    { type: 'paragraph', html: 'A token is a piece of table language. Its silhouette tells the group whether they are looking at a hero, a monster, a spell effect, or a named location before anyone zooms in. Start with the frame that matches the character, then keep the portrait and label readable at the scale your virtual tabletop uses.' },
+    { type: 'title', text: 'Choose the Right Frame for the Character', level: 2 },
+    { type: 'list', items: ['<strong>Ring:</strong> dependable for player characters and recurring allies.', '<strong>Hex or octagon:</strong> easy to distinguish in tactical scenes with many units.', '<strong>Star:</strong> useful for a champion, boss, or character who needs instant attention.', '<strong>Cloud:</strong> a softer signal for spirits, familiars, and fey creatures.'] },
+    { type: 'tip', title: 'Design for the smallest size you will actually play at', html: 'Zoom the map out until a token is only a few dozen pixels wide. If the face, border, and label still separate from one another, the marker will remain useful during a busy encounter.' },
+    { type: 'title', text: 'Keep Labels Short and Useful During Play', level: 2 },
+    { type: 'paragraph', html: 'A character token is not a character sheet. Add the one or two facts the table repeatedly needs: a short name, a level, a role such as healer, or a condition such as stunned. Long sentences become visual noise and compete with the portrait.' },
+    { type: 'title', text: 'Prepare a Whole Party Without Losing Their Identity', level: 2 },
+    { type: 'paragraph', html: 'Batch export is useful after a session zero or when a campaign gains new allies. Choose one frame and paint language for the group, then let each portrait stay individual. Consistent framing makes the party feel like one cast while the faces remain instantly distinct.' },
+    { type: 'tip', title: 'Your marker saves as you work', html: 'Local saving keeps the editable portrait crop and labels on this device. Exported PNGs are the play copies; the saved marker is the version to reopen when the character changes.' },
+  ],
+  faq,
+  bibliography,
+  howTo,
+  schemas: [faqSchema, appSchema, howToSchema] as unknown as Record<string, unknown>[],
+};