@jjlmoya/utils-tabletop 1.4.0 → 1.6.0

package/src/tool/decision-wheel/logic.ts

@@ -0,0 +1,145 @@
+import type { WheelSegment, SpinResultEntry, PresetKey } from './types';
+
+export const SEGMENT_COLORS = [
+  '#3b82f6', '#ef4444', '#22c55e', '#f59e0b',
+  '#8b5cf6', '#ec4899', '#14b8a6', '#f97316',
+  '#6366f1', '#84cc16', '#06b6d4', '#e11d48',
+];
+
+const PRESETS: Record<PresetKey, WheelSegment[]> = {
+  yesno: [
+    { id: 'seg-0', label: 'Yes', color: SEGMENT_COLORS[2], weight: 1 },
+    { id: 'seg-1', label: 'No', color: SEGMENT_COLORS[1], weight: 1 },
+  ],
+  numbers: Array.from({ length: 6 }, (_, i) => ({
+    id: `seg-${i}`,
+    label: String(i + 1),
+    color: SEGMENT_COLORS[i],
+    weight: 1,
+  })),
+  actions: [
+    { id: 'seg-0', label: 'Attack', color: SEGMENT_COLORS[1], weight: 1 },
+    { id: 'seg-1', label: 'Defend', color: SEGMENT_COLORS[0], weight: 1 },
+    { id: 'seg-2', label: 'Explore', color: SEGMENT_COLORS[2], weight: 1 },
+    { id: 'seg-3', label: 'Negotiate', color: SEGMENT_COLORS[3], weight: 1 },
+    { id: 'seg-4', label: 'Rest', color: SEGMENT_COLORS[4], weight: 1 },
+  ],
+  d20: Array.from({ length: 20 }, (_, i) => ({
+    id: `seg-${i}`,
+    label: String(i + 1),
+    color: SEGMENT_COLORS[i % SEGMENT_COLORS.length],
+    weight: 1,
+  })),
+  alignment: [
+    { id: 'seg-0', label: 'Lawful Good', color: SEGMENT_COLORS[2], weight: 1 },
+    { id: 'seg-1', label: 'Neutral Good', color: SEGMENT_COLORS[0], weight: 1 },
+    { id: 'seg-2', label: 'Chaotic Good', color: SEGMENT_COLORS[6], weight: 1 },
+    { id: 'seg-3', label: 'Lawful Neutral', color: SEGMENT_COLORS[3], weight: 1 },
+    { id: 'seg-4', label: 'True Neutral', color: SEGMENT_COLORS[4], weight: 1 },
+    { id: 'seg-5', label: 'Chaotic Neutral', color: SEGMENT_COLORS[7], weight: 1 },
+    { id: 'seg-6', label: 'Lawful Evil', color: SEGMENT_COLORS[1], weight: 1 },
+    { id: 'seg-7', label: 'Neutral Evil', color: SEGMENT_COLORS[11], weight: 1 },
+    { id: 'seg-8', label: 'Chaotic Evil', color: SEGMENT_COLORS[5], weight: 1 },
+  ],
+  loot: [
+    { id: 'seg-0', label: 'Common', color: '#9ca3af', weight: 5 },
+    { id: 'seg-1', label: 'Uncommon', color: '#22c55e', weight: 4 },
+    { id: 'seg-2', label: 'Rare', color: '#3b82f6', weight: 3 },
+    { id: 'seg-3', label: 'Very Rare', color: '#a855f7', weight: 2 },
+    { id: 'seg-4', label: 'Legendary', color: '#eab308', weight: 1 },
+  ],
+  custom: [
+    { id: 'seg-0', label: 'Option A', color: SEGMENT_COLORS[0], weight: 1 },
+    { id: 'seg-1', label: 'Option B', color: SEGMENT_COLORS[1], weight: 1 },
+    { id: 'seg-2', label: 'Option C', color: SEGMENT_COLORS[2], weight: 1 },
+  ],
+};
+
+export function getPresetSegments(preset: PresetKey): WheelSegment[] {
+  return (PRESETS[preset] || PRESETS.custom).map((s) => ({ ...s }));
+}
+
+export function addSegment(segments: WheelSegment[]): WheelSegment[] {
+  const idx = segments.length;
+  return [
+    ...segments,
+    {
+      id: `seg-${Date.now()}`,
+      label: `Option ${String.fromCharCode(65 + Math.min(idx, 25))}`,
+      color: SEGMENT_COLORS[idx % SEGMENT_COLORS.length],
+      weight: 1,
+    },
+  ];
+}
+
+export function removeSegment(segments: WheelSegment[], id: string): WheelSegment[] {
+  if (segments.length <= 1) return segments;
+  return segments.filter((s) => s.id !== id);
+}
+
+export function updateSegment(
+  segments: WheelSegment[],
+  id: string,
+  field: 'label' | 'color' | 'weight',
+  value: string,
+): WheelSegment[] {
+  return segments.map((s) => {
+    if (s.id === id) {
+      if (field === 'weight') {
+        return { ...s, weight: Math.max(1, parseInt(value, 10) || 1) };
+      }
+      return { ...s, [field]: value };
+    }
+    return s;
+  });
+}
+
+export function selectRandomSegment(segments: WheelSegment[]): number {
+  const totalWeight = segments.reduce((sum, s) => sum + (s.weight || 1), 0);
+  const r = Math.random() * totalWeight;
+  let acc = 0;
+  for (let i = 0; i < segments.length; i++) {
+    acc += segments[i].weight || 1;
+    if (r < acc) {
+      return i;
+    }
+  }
+  return segments.length - 1;
+}
+
+export function getSelectedIndex(
+  segments: WheelSegment[],
+  currentAngle: number,
+): number {
+  const totalWeight = segments.reduce((sum, s) => sum + (s.weight || 1), 0);
+  const segmentAngle = (360 - (currentAngle % 360)) % 360;
+  let acc = 0;
+  for (let i = 0; i < segments.length; i++) {
+    const nextAcc = acc + (segments[i].weight || 1);
+    const startAngle = (acc / totalWeight) * 360;
+    const endAngle = (nextAcc / totalWeight) * 360;
+    if (segmentAngle >= startAngle && segmentAngle < endAngle) {
+      return i;
+    }
+    acc = nextAcc;
+  }
+  return 0;
+}
+
+export function getArcAngle(segmentCount: number): number {
+  return 360 / segmentCount;
+}
+
+export function addHistoryItem(
+  history: SpinResultEntry[],
+  segment: WheelSegment,
+  index: number,
+): SpinResultEntry[] {
+  const entry: SpinResultEntry = {
+    segment,
+    index,
+    timestamp: Date.now(),
+  };
+  const updated = [entry, ...history];
+  return updated.slice(0, 10);
+}

package/src/tool/decision-wheel/seo.astro

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

package/src/tool/decision-wheel/types.ts

@@ -0,0 +1,14 @@
+export interface WheelSegment {
+  id: string;
+  label: string;
+  color: string;
+  weight?: number;
+}
+
+export interface SpinResultEntry {
+  segment: WheelSegment;
+  index: number;
+  timestamp: number;
+}
+
+export type PresetKey = 'yesno' | 'numbers' | 'actions' | 'custom' | 'd20' | 'alignment' | 'loot';

package/src/tool/decision-wheel/ui.ts

@@ -0,0 +1,121 @@
+import type { WheelSegment, SpinResultEntry } from './types';
+
+function selected(value: number | undefined, target: number): string {
+  return value === target ? 'selected' : '';
+}
+
+function createSegmentRow(seg: WheelSegment, t: (key: string) => string): HTMLDivElement {
+  const row = document.createElement('div');
+  row.className = 'segment-row';
+  const labelPlaceholder = t('segmentLabelPlaceholder') || 'Label';
+  const weightLabel = t('weightLabel') || 'Weight';
+  const removeLabel = t('removeSegmentLabel') || 'Remove';
+  const sw = seg.weight;
+  row.innerHTML = `
+    <input type="color" class="segment-color" data-id="${seg.id}" value="${seg.color}" />
+    <input type="text" class="segment-input" data-id="${seg.id}" value="${seg.label}" placeholder="${labelPlaceholder}" />
+    <select class="segment-weight" data-id="${seg.id}" title="${weightLabel}">
+      <option value="1" ${selected(sw, 1)}>w1</option>
+      <option value="2" ${selected(sw, 2)}>w2</option>
+      <option value="3" ${selected(sw, 3)}>w3</option>
+      <option value="4" ${selected(sw, 4)}>w4</option>
+      <option value="5" ${selected(sw, 5)}>w5</option>
+    </select>
+    <button type="button" class="btn-remove-segment" data-id="${seg.id}">${removeLabel}</button>
+  `;
+  return row;
+}
+
+export function bindSegmentEvents(
+  segmentList: HTMLElement,
+  onUpdateSegment: (id: string, field: string, value: string) => void,
+  onRemoveSegment: (id: string) => void,
+): void {
+  segmentList.querySelectorAll('.segment-color').forEach((el) => {
+    el.addEventListener('input', (e) => {
+      const input = e.target as HTMLInputElement;
+      onUpdateSegment(input.dataset.id || '', 'color', input.value);
+    });
+  });
+  segmentList.querySelectorAll('.segment-input').forEach((el) => {
+    el.addEventListener('input', (e) => {
+      const input = e.target as HTMLInputElement;
+      onUpdateSegment(input.dataset.id || '', 'label', input.value);
+    });
+  });
+  segmentList.querySelectorAll('.segment-weight').forEach((el) => {
+    el.addEventListener('change', (e) => {
+      const select = e.target as HTMLSelectElement;
+      onUpdateSegment(select.dataset.id || '', 'weight', select.value);
+    });
+  });
+  segmentList.querySelectorAll('.btn-remove-segment').forEach((el) => {
+    el.addEventListener('click', (e) => {
+      const btn = e.currentTarget as HTMLButtonElement;
+      onRemoveSegment(btn.dataset.id || '');
+    });
+  });
+}
+
+export function renderSegmentEditor(
+  segmentList: HTMLElement,
+  segments: WheelSegment[],
+  t: (key: string) => string,
+  onBind: () => void,
+): void {
+  segmentList.innerHTML = '';
+  if (segments.length === 0) {
+    segmentList.innerHTML = `<div class="no-segments-msg">${t('noSegments') || 'Add segments to the wheel before spinning.'}</div>`;
+    return;
+  }
+  segments.forEach((seg) => {
+    segmentList.appendChild(createSegmentRow(seg, t));
+  });
+  onBind();
+}
+
+export function renderResult(
+  resultDisplay: HTMLElement,
+  result: SpinResultEntry | null,
+  spinning: boolean,
+  t: (key: string) => string,
+): void {
+  if (!result) {
+    resultDisplay.innerHTML = `<div class="result-placeholder">${spinning ? 'Spinning...' : (t('noHistory') || 'Spin to see result')}</div>`;
+    return;
+  }
+  resultDisplay.innerHTML = `<div class="result-card" id="result-card">
+    <div class="result-header">${t('resultHeading') || 'Result'}</div>
+    <span class="result-value"><span class="result-color-dot" style="background:${result.segment.color}"></span>${result.segment.label}</span>
+  </div>`;
+}
+
+export function triggerEmphasis(): void {
+  const card = document.getElementById('result-card');
+  if (!card) return;
+  card.classList.remove('result-emphasis');
+  void card.offsetWidth;
+  card.classList.add('result-emphasis');
+}
+
+export function renderHistory(
+  historyList: HTMLElement,
+  historyEmpty: HTMLElement,
+  history: SpinResultEntry[],
+): void {
+  if (history.length === 0) {
+    historyEmpty.style.display = 'block';
+    historyList.querySelectorAll('.history-item').forEach((el) => el.remove());
+    return;
+  }
+  historyEmpty.style.display = 'none';
+  historyList.querySelectorAll('.history-item').forEach((el) => el.remove());
+  history.forEach((h) => {
+    const item = document.createElement('div');
+    item.className = 'history-item';
+    const time = new Date(h.timestamp);
+    const timeStr = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    item.innerHTML = `<span class="history-item-label"><span class="history-item-dot" style="background:${h.segment.color}"></span>${h.segment.label}</span><span class="history-item-time">${timeStr}</span>`;
+    historyList.appendChild(item);
+  });
+}

package/src/tool/fantasy-runes-translator/bibliography.astro

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

package/src/tool/fantasy-runes-translator/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Elder Futhark (Wikipedia)',
+    url: 'https://en.wikipedia.org/wiki/Elder_Futhark',
+  },
+  {
+    name: 'Anglo-Saxon Runes (Wikipedia)',
+    url: 'https://en.wikipedia.org/wiki/Anglo-Saxon_runes',
+  },
+  {
+    name: 'Runic Unicode Block',
+    url: 'https://en.wikipedia.org/wiki/Runic_(Unicode_block)',
+  },
+];

package/src/tool/fantasy-runes-translator/client.ts

@@ -0,0 +1,205 @@
+import type { RuneAlphabetKey, RuneCharacterResult, RuneCharacter } from './types';
+import { translateText } from './logic';
+
+const wrap = document.querySelector('.runes-wrap') as HTMLElement;
+const input = document.getElementById('runes-input') as HTMLInputElement;
+const seedIn = document.getElementById('runes-seed') as HTMLInputElement;
+const seedTag = document.getElementById('seed-tag') as HTMLElement;
+const seedShuf = document.getElementById('seed-shuffle-btn') as HTMLElement;
+const seedToggle = document.getElementById('seed-toggle-btn') as HTMLElement;
+const seedDrawer = document.getElementById('seed-drawer') as HTMLElement;
+const output = document.getElementById('runes-output') as HTMLElement;
+const detailCard = document.getElementById('detail-card') as HTMLElement;
+const dName = document.getElementById('detail-name') as HTMLElement;
+const dMeaning = document.getElementById('detail-meaning') as HTMLElement;
+const dPhonetic = document.getElementById('detail-phonetic') as HTMLElement;
+const copyBtn = document.getElementById('runes-copy-btn') as HTMLElement;
+const clearBtn = document.getElementById('runes-clear-btn') as HTMLElement;
+const pills = document.getElementById('alphabet-pills') as HTMLElement;
+const gmBtn = document.getElementById('runes-gm-btn') as HTMLElement;
+const gmOverlay = document.getElementById('gm-overlay') as HTMLElement;
+const gmDisplay = document.getElementById('gm-runes') as HTMLElement;
+const gmParts = document.getElementById('gm-particles') as HTMLElement;
+const gmExit = document.getElementById('gm-exit-btn') as HTMLElement;
+const refFoundBtn = document.getElementById('runes-ref-found-btn') as HTMLElement;
+const refAllBtn = document.getElementById('runes-ref-all-btn') as HTMLElement;
+const refOverlay = document.getElementById('ref-overlay') as HTMLElement;
+const refGrid = document.getElementById('ref-grid') as HTMLElement;
+const refTitle = document.getElementById('ref-title') as HTMLElement;
+const refClose = document.getElementById('ref-close-btn') as HTMLElement;
+const ALPHA_KEY = 'runes-alphabet';
+let alphabet: RuneAlphabetKey = (localStorage.getItem(ALPHA_KEY) as RuneAlphabetKey) || 'elder-futhark';
+let result: RuneCharacterResult[] = [];
+let seed: number | null = null;
+const discovered = new Set<string>();
+
+function ui(key: string): string {
+  try { return JSON.parse(wrap.getAttribute('data-ui') || '{}')[key] || ''; } catch { return ''; }
+}
+
+function spawnPart(sym: string, x: number, y: number) {
+  const el = document.createElement('div');
+  el.className = 'particle'; el.textContent = sym;
+  el.style.cssText = `left:${x}px;top:${y}px;position:fixed`;
+  document.body.appendChild(el);
+  setTimeout(() => el.remove(), 1000);
+}
+
+function spawnGmParts() {
+  gmParts.innerHTML = '';
+  const rs = ['ᚠ','ᛟ','ᚱ','ᚲ','ᚨ','ᚢ','ᛉ','ᚷ','ᚹ','ᛞ','ᛁ','ᛃ','ᛚ','ᛗ','ᚾ','ᛟ','ᛈ','ᛏ','ᛒ','ᛇ','ᛉ','ᚱ','ᛋ','ᚠ','ᚢ','ᚦ','ᚬ'];
+  for (let i = 0; i < 10; i++) {
+    const p = document.createElement('span');
+    p.className = 'gm-float'; p.textContent = rs[Math.floor(Math.random() * rs.length)];
+    p.style.left = Math.random() * 100 + '%';
+    p.style.fontSize = (0.7 + Math.random() * 1.3) + 'rem';
+    p.style.animationDuration = (3 + Math.random() * 3) + 's';
+    p.style.animationDelay = Math.random() * 4 + 's';
+    gmParts.appendChild(p);
+  }
+}
+
+function selPill(key: RuneAlphabetKey) {
+  pills.querySelectorAll('.pill').forEach(b => b.classList.toggle('active', b.getAttribute('data-alphabet') === key));
+}
+
+function emptyOut() {
+  output.innerHTML = '<div class="runes-output-empty"><span class="empty-rune">ᛟ</span><span class="empty-label">' + ui('noInput') + '</span></div>';
+  output.classList.remove('has-chars');
+}
+
+function showDetail(c: RuneCharacter | null) {
+  if (!c) { detailCard.classList.remove('vis'); return; }
+  dName.textContent = c.name; dMeaning.textContent = c.meaning; dPhonetic.textContent = c.phonetic;
+  detailCard.classList.add('vis');
+}
+
+function clickRune(cr: RuneCharacterResult, card: HTMLElement) {
+  output.querySelectorAll('.rune-card').forEach(c => c.classList.remove('active'));
+  card.classList.add('active');
+  if (cr.char) {
+    showDetail(cr.char);
+    const r = card.getBoundingClientRect();
+    spawnPart(cr.char.symbol, r.left + r.width / 2, r.top);
+  }
+}
+
+function render(rs: RuneCharacterResult[]) {
+  output.classList.add('has-chars');
+  result = rs;
+  const shim = document.createElement('div');
+  shim.className = 'shimmer';
+  output.innerHTML = '';
+  output.appendChild(shim);
+  setTimeout(() => {
+    const g = document.createElement('div');
+    g.className = 'runes-grid';
+    rs.forEach((cr, i) => {
+      const c = document.createElement('div');
+      c.className = 'rune-card'; c.style.animationDelay = i * 25 + 'ms';
+      const sy = document.createElement('span');
+      sy.className = 'sym'; sy.textContent = cr.char ? cr.char.symbol : '?';
+      const le = document.createElement('span');
+      le.className = 'let'; le.textContent = cr.input.toUpperCase();
+      c.appendChild(sy); c.appendChild(le);
+      c.addEventListener('click', () => clickRune(cr, c));
+      g.appendChild(c);
+    });
+    output.innerHTML = '';
+    output.appendChild(g);
+  }, 300);
+}
+
+function translate() {
+  const t = input.value.trim();
+  if (!t) { emptyOut(); detailCard.classList.remove('vis'); result = []; return; }
+  for (const ch of t.toLowerCase()) { if (ch >= 'a' && ch <= 'z') discovered.add(ch); }
+  render(translateText(t, alphabet, seed).characters);
+  detailCard.classList.remove('vis');
+}
+
+function copyText() {
+  if (result.length === 0) return;
+  const t = result.map(c => (c.char ? c.char.symbol : c.input)).join('');
+  navigator.clipboard.writeText(t).catch(() => {});
+}
+
+function clearAll() {
+  input.value = ''; seedIn.value = ''; seed = null; seedTag.style.display = 'none';
+  emptyOut(); detailCard.classList.remove('vis'); result = [];
+}
+
+function applySeed() {
+  const v = parseInt(seedIn.value);
+  seed = isNaN(v) || v < 1 ? null : v;
+  seedTag.style.display = seed ? '' : 'none';
+  if (input.value.trim()) translate();
+}
+
+function randSeed() {
+  seedIn.value = String(Math.floor(Math.random() * 99999) + 1);
+  applySeed();
+}
+
+function openGm() {
+  if (result.length === 0) return;
+  gmDisplay.textContent = result.map(c => (c.char ? c.char.symbol : c.input)).join('');
+  gmOverlay.classList.add('active');
+  spawnGmParts();
+}
+
+function closeGm() { gmOverlay.classList.remove('active'); }
+
+function openRef(mode: 'found' | 'all') {
+  const mapping = translateText('abcdefghijklmnopqrstuvwxyz', alphabet, seed).characters;
+  refTitle.textContent = mode === 'found' ? 'Discovered Runes' : 'Full Rune Dictionary';
+  refGrid.innerHTML = mapping.map(c => {
+    if (mode === 'found' && !discovered.has(c.input)) return '';
+    return `<div class="ref-cell lit"><span class="ref-sym">${c.char ? c.char.symbol : '?'}</span><span class="ref-let">${c.input}</span></div>`;
+  }).join('');
+  refOverlay.classList.add('active');
+  spawnRefParticles();
+}
+
+function spawnRefParticles() {
+  const container = refOverlay;
+  const existing = container.querySelectorAll('.gm-float');
+  existing.forEach(e => e.remove());
+  const rs = ['ᚠ','ᛟ','ᚱ','ᚲ','ᚨ','ᚢ','ᛉ','ᚷ','ᚹ','ᛞ','ᛁ','ᛃ','ᛚ','ᛗ','ᚾ','ᛟ','ᛈ','ᛏ','ᛒ','ᛇ','ᛉ','ᚱ','ᛋ','ᚠ','ᚢ','ᚦ','ᚬ'];
+  for (let i = 0; i < 8; i++) {
+    const p = document.createElement('span');
+    p.className = 'gm-float'; p.textContent = rs[Math.floor(Math.random() * rs.length)];
+    p.style.left = Math.random() * 100 + '%';
+    p.style.fontSize = (0.7 + Math.random() * 1.3) + 'rem';
+    p.style.animationDuration = (4 + Math.random() * 3) + 's';
+    p.style.animationDelay = Math.random() * 4 + 's';
+    container.appendChild(p);
+  }
+}
+function closeRef() { refOverlay.classList.remove('active'); }
+
+input.addEventListener('input', () => { if (input.value.trim()) translate(); });
+seedIn.addEventListener('input', applySeed);
+seedShuf.addEventListener('click', randSeed);
+seedToggle.addEventListener('click', () => seedDrawer.classList.toggle('open'));
+copyBtn.addEventListener('click', copyText);
+clearBtn.addEventListener('click', clearAll);
+gmBtn.addEventListener('click', openGm);
+gmExit.addEventListener('click', closeGm);
+refFoundBtn.addEventListener('click', () => openRef('found'));
+refAllBtn.addEventListener('click', () => openRef('all'));
+refClose.addEventListener('click', closeRef);
+refOverlay.addEventListener('click', (e) => { if (e.target === refOverlay) closeRef(); });
+document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { closeGm(); closeRef(); } });
+
+pills.addEventListener('click', (e) => {
+  const b = (e.target as HTMLElement).closest('.pill') as HTMLButtonElement;
+  if (!b) return;
+  alphabet = b.getAttribute('data-alphabet') as RuneAlphabetKey;
+  localStorage.setItem(ALPHA_KEY, alphabet);
+  selPill(alphabet);
+  if (input.value.trim()) translate();
+});
+
+selPill(alphabet);
+emptyOut();

package/src/tool/fantasy-runes-translator/component.astro

@@ -0,0 +1,95 @@
+---
+import './fantasy-runes-translator.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="runes-wrap" data-ui={JSON.stringify(ui)}>
+  <div class="runes-top-bar">
+    <div class="alphabet-pills" id="alphabet-pills">
+      <button type="button" class="pill" data-alphabet="elder-futhark"><span class="pill-rune">&#x16A8;</span><span class="pill-label">{ui.elderFuthark}</span></button>
+      <button type="button" class="pill" data-alphabet="anglo-saxon"><span class="pill-rune">&#x16AA;</span><span class="pill-label">{ui.angloSaxon}</span></button>
+      <button type="button" class="pill" data-alphabet="fantasy"><span class="pill-rune">&#x16DF;</span><span class="pill-label">{ui.fantasy}</span></button>
+      <button type="button" class="pill" data-alphabet="theban"><span class="pill-rune">&#x16A0;</span><span class="pill-label">{ui.theban}</span></button>
+      <button type="button" class="pill" data-alphabet="enochian"><span class="pill-rune">&#x16C1;</span><span class="pill-label">{ui.enochian}</span></button>
+      <button type="button" class="pill" data-alphabet="daemonic"><span class="pill-rune">&#x16CA;</span><span class="pill-label">{ui.daemonic}</span></button>
+      <button type="button" class="pill" data-alphabet="ogham"><span class="pill-rune">&#x16D7;</span><span class="pill-label">{ui.ogham}</span></button>
+    </div>
+    <button type="button" class="seed-cog" id="seed-toggle-btn" title="Seed">&#x2699;</button>
+  </div>
+
+  <div class="seed-drawer" id="seed-drawer">
+    <div class="seed-inner">
+      <div class="seed-field">
+        <input type="number" id="runes-seed" placeholder={ui.seedPlaceholder} min="1" max="999999" />
+        <button type="button" class="seed-shuffle" id="seed-shuffle-btn">&#x21BB;</button>
+      </div>
+      <span class="seed-tag" id="seed-tag">{ui.seedApplied}</span>
+      <span class="seed-hint">Shuffles which rune matches each letter</span>
+    </div>
+  </div>
+
+  <div class="runes-input-area">
+    <input type="text" id="runes-input" placeholder={ui.inputPlaceholder} autocomplete="off" />
+  </div>
+
+  <div class="runes-output" id="runes-output">
+    <div class="runes-output-empty">
+      <span class="empty-rune">&#x16DF;</span>
+      <span class="empty-label">{ui.noInput}</span>
+    </div>
+  </div>
+
+  <div class="detail-card" id="detail-card">
+    <div class="detail-row">
+      <span class="detail-lbl">NAME</span>
+      <span class="detail-val" id="detail-name"></span>
+    </div>
+    <div class="detail-row">
+      <span class="detail-lbl">MEANING</span>
+      <span class="detail-val" id="detail-meaning"></span>
+    </div>
+    <div class="detail-row">
+      <span class="detail-lbl">SOUND</span>
+      <span class="detail-val" id="detail-phonetic"></span>
+    </div>
+  </div>
+
+  <div class="runes-bottom-bar">
+    <button type="button" class="bot-btn gm-reveal" id="runes-gm-btn">
+      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+      {ui.gmMode}
+    </button>
+    <div class="bot-spacer"></div>
+    <button type="button" class="bot-btn" id="runes-copy-btn" title={ui.copy}>
+      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+    </button>
+    <button type="button" class="bot-btn" id="runes-clear-btn" title={ui.clear}>
+      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+    </button>
+    <button type="button" class="bot-btn" id="runes-ref-all-btn" title="Full Alphabet">
+      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
+    </button>
+    <button type="button" class="bot-btn" id="runes-ref-found-btn" title="Discovered">
+      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><circle cx="12" cy="8" r="0.5" fill="currentColor"/></svg>
+    </button>
+  </div>
+</div>
+
+<div class="ref-overlay" id="ref-overlay">
+  <button type="button" class="ref-close" id="ref-close-btn">&#x2715;</button>
+  <div class="ref-title" id="ref-title">Rune Dictionary</div>
+  <div class="ref-grid" id="ref-grid"></div>
+</div>
+
+<div class="gm-overlay" id="gm-overlay">
+  <div class="gm-particles" id="gm-particles"></div>
+  <button type="button" class="gm-exit" id="gm-exit-btn">{ui.exitGmMode}</button>
+  <div class="gm-runes" id="gm-runes"></div>
+</div>
+
+<script src="./client.ts"></script>