@jjlmoya/utils-tabletop 1.20.0 → 1.22.0

package/src/tool/decision-wheel/i18n/sv.ts

@@ -29,7 +29,7 @@ export const content: DecisionWheelLocaleContent = {
   },
   seo: [
     { type: 'title', text: 'Beslutshjul för Brädspel och Gruppaktiviteter', level: 2 },
-    { type: 'paragraph', html: 'Beslutshjulet är ett mångsidigt verktyg för brädspel. Anpassa segmenten med dina egna texter och färger.' },
+    { type: 'paragraph', html: 'Beslutshjulet är ett mångsidigt digitalt verktyg för brädspel, rollspel och gruppaktiviteter. Det gör det möjligt att avgöra val snabbt, rättvist och helt slumpmässigt. Varje segment kan anpassas med egna etiketter, färger och sannolikhetsvikter för att passa just ditt spel.' },
     {
       type: 'stats',
       items: [
@@ -40,15 +40,15 @@ export const content: DecisionWheelLocaleContent = {
       columns: 3,
     },
     { type: 'title', text: 'Hur du Använder Beslutshjulet', level: 2 },
-    { type: 'paragraph', html: 'Välj en mall eller skapa dina egna segment med vikter för att justera chanserna för varje val.' },
-    { type: 'title', text: "Fler beslutsscenarier", level: 3 },
-    { type: 'paragraph', html: "Använd hjulet för omröstningar, slumpmöten och handlingsval i spelet." },
-    { type: 'title', text: "Mallar för sällskapsspel", level: 3 },
-    { type: 'paragraph', html: "Mallar laddar vanliga val för sällskapsspel snabbt." },
-    { type: 'title', text: "Justera resultatvikter", level: 3 },
-    { type: 'paragraph', html: "Vikter gör vissa resultat vanligare eller mer sällsynta." },
-    { type: 'title', text: "Granska historiken", level: 3 },
-    { type: 'paragraph', html: "Historiken sparar de senaste snurren för gruppen." },
+    { type: 'paragraph', html: 'Välj en färdig mall som Ja/Nej, D20, Alignment eller Bytesskatter, eller skapa din egen anpassade lista. Justera vikterna från 1 till 5 för att ändra hur ofta varje alternativ dras. Fysikmotorn simulerar friktion och inbromsning för att ge spänning åt varje snurr.' },
+    { type: 'title', text: 'Fler beslutsscenarier', level: 3 },
+    { type: 'paragraph', html: 'Använd hjulet för snabba omröstningar i gruppen, slumpmässiga möten i rollspel, fördelning av spelturer eller för att välja vilken spelare som väljer karaktär först.' },
+    { type: 'title', text: 'Mallar för sällskapsspel', level: 3 },
+    { type: 'paragraph', html: 'De inbyggda mallarna låter dig ladda vanliga beslut på ett par sekunder, vilket sparar värdefull tid under spelsessioner och undviker onödiga diskussioner runt bordet.' },
+    { type: 'title', text: 'Justera resultatvikter', level: 3 },
+    { type: 'paragraph', html: 'Genom att ändra vikter kan du balansera eller styra dragningschanserna. En högre vikt ger segmentet en större yta på hjulet, vilket ökar sannolikheten att det väljs.' },
+    { type: 'title', text: 'Granska historiken', level: 3 },
+    { type: 'paragraph', html: 'Historikpanelen sparar de senaste tio snurren så att alla spelare kan kontrollera tidigare resultat i full transparens under spelets gång.' },
   ],
   faq: [
     {

package/src/tool/decision-wheel/i18n/tr.ts

@@ -29,7 +29,7 @@ export const content: DecisionWheelLocaleContent = {
   },
   seo: [
     { type: 'title', text: 'Masa Oyunları ve Grup Etkinlikleri İçin Karar Çarkı', level: 2 },
-    { type: 'paragraph', html: 'Karar çarkı, masa oyunları için çok yönlü bir rastgele seçim aracıdır. Dilimleri kendi etiketlerinizle özelleştirin.' },
+    { type: 'paragraph', html: 'Karar çarkı, masa oyunları, RPG oyunları ve grup etkinlikleri için çok yönlü bir dijital rastgele seçim aracıdır. Seçenekler arasında hızlı, adil ve tamamen tarafsız bir çekiliş yapmanızı sağlar. Her dilimi kendi etiketleriniz, renkleriniz ve oyun kurallarınıza uygun olasılık ağırlıklarıyla özelleştirebilirsiniz.' },
     {
       type: 'stats',
       items: [
@@ -40,15 +40,15 @@ export const content: DecisionWheelLocaleContent = {
       columns: 3,
     },
     { type: 'title', text: 'Karar Çarkı Nasıl Kullanılır', level: 2 },
-    { type: 'paragraph', html: 'Hazır bir şablon seçin veya olasılıkları ayarlamak için farklı ağırlıklara sahip kendi dilimlerinizi oluşturun.' },
-    { type: 'title', text: "Ek karar senaryolari", level: 3 },
-    { type: 'paragraph', html: "Carki oylama, rastgele karsilasma ve oyun eylemleri icin kullanin." },
-    { type: 'title', text: "Masaustu oyun sablonlari", level: 3 },
-    { type: 'paragraph', html: "Sablonlar masaustu oyunlarindaki yaygin secimleri hizla yukler." },
-    { type: 'title', text: "Sonuc agirliklarini ayarlama", level: 3 },
-    { type: 'paragraph', html: "Agirliklar bazi sonuclari daha sik veya seyrek yapar." },
-    { type: 'title', text: "Gecmisi inceleme", level: 3 },
-    { type: 'paragraph', html: "Gecmis son cevirmeleri grup icin saklar." },
+    { type: 'paragraph', html: 'Evet/Hayır, D20, Hizalanma veya Ganimet gibi hazır şablonlardan birini seçin ya da kendi özel listenizi oluşturun. Seçeneklerin çıkma sıklığını değiştirmek için ağırlıkları 1 ile 5 arasında ayarlayın. Fizik motoru, her çevirmede heyecan katmak için sürtünme ve yavaşlama efektini simüle eder.' },
+    { type: 'title', text: 'Ek karar senaryoları', level: 3 },
+    { type: 'paragraph', html: 'Çarkı grupta hızlı oylamalar yapmak, rol yapma oyunlarında rastgele karşılaşmalar oluşturmak, oyuncu sıralamasını belirlemek veya eğlenceli görevler seçmek için kullanabilirsiniz.' },
+    { type: 'title', text: 'Masaüstü oyun şablonları', level: 3 },
+    { type: 'paragraph', html: 'Hazır şablonlar, masa oyunlarında sık kullanılan seçimleri saniyeler içinde yüklemenizi sağlayarak oyun zamanından tasarruf etmenize yardımcı olur.' },
+    { type: 'title', text: 'Sonuç ağırlıklarını ayarlama', level: 3 },
+    { type: 'paragraph', html: 'Ağırlıkları değiştirmek olasılıkları dengeler. Bir dilimin ağırlığını artırmak, onun çarktaki alanını büyüterek seçilme şansını yükseltir.' },
+    { type: 'title', text: 'Geçmişi inceleme', level: 3 },
+    { type: 'paragraph', html: 'Geçmiş paneli son 10 çevirmenin sonucunu saklar; böylece gruptaki herkes geçmiş çekilişleri şeffaf bir şekilde inceleyebilir.' },
   ],
   faq: [
     {

package/src/tool/decision-wheel/i18n/zh.ts

@@ -29,7 +29,7 @@ export const content: DecisionWheelLocaleContent = {
   },
   seo: [
     { type: 'title', text: '适用于桌游及团队聚会的随机决策轮盘', level: 2 },
-    { type: 'paragraph', html: '决策轮盘是一个用于桌游多用途的随机选择工具。可自由定制各分块的内容和颜色。' },
+    { type: 'paragraph', html: '决策轮盘是一个用于桌面游戏、TRPG跑团和团队聚会的多用途数字随机选择工具。它可以帮助您快速、公正且完全随机地决定各种选项。每个扇区都可以自定义文本、背景颜色以及中奖概率权重，以完美契合您的游戏规则。' },
     {
       type: 'stats',
       items: [
@@ -40,15 +40,15 @@ export const content: DecisionWheelLocaleContent = {
       columns: 3,
     },
     { type: 'title', text: '如何使用决策轮盘', level: 2 },
-    { type: 'paragraph', html: '选择预设方案，或创建自定义分块并设置权重，以按需调整各选项的被选中概率。' },
-    { type: 'title', text: "更多决策场景", level: 3 },
-    { type: 'paragraph', html: "转盘适合投票、随机遭遇和游戏中的行动选择。" },
-    { type: 'title', text: "桌游预设", level: 3 },
-    { type: 'paragraph', html: "预设可以快速载入桌游中常见的选择。" },
-    { type: 'title', text: "调整结果权重", level: 3 },
-    { type: 'paragraph', html: "调整权重可以让结果更常出现或更少出现。" },
-    { type: 'title', text: "查看旋转历史", level: 3 },
-    { type: 'paragraph', html: "历史记录会保存最近的旋转，方便团队查看。" },
+    { type: 'paragraph', html: '选择内置预设方案（如是/否、D20、阵营或战利品掉落），或者创建您专属的自定义选项列表。通过将权重调整为 1 到 5，您可以灵活改变每个选项抽中的概率。逼真的物理阻尼旋转动画将为每一次抽取增添紧张刺激的体验。' },
+    { type: 'title', text: '更多决策场景', level: 3 },
+    { type: 'paragraph', html: '您可以使用决策轮盘在团队中快速发起投票、决定跑团中的随机遭遇、分配玩家行动顺序，或者在派对游戏中抽取惩罚项目。' },
+    { type: 'title', text: '桌游预设', level: 3 },
+    { type: 'paragraph', html: '内置桌游预设让您能在数秒内加载常见决策，节省游戏准备时间，避免桌上无谓的争议。' },
+    { type: 'title', text: '调整结果权重', level: 3 },
+    { type: 'paragraph', html: '调整权重可以平衡或倾斜抽取概率。提高某项权重会增大该分块在轮盘上的扇形面积，从而提升中奖几率。' },
+    { type: 'title', text: '查看旋转历史', level: 3 },
+    { type: 'paragraph', html: '历史记录面板会保存最近 10 次的旋转结果，方便全场所有玩家在游戏过程中透明地复核先前的抽签记录。' },
   ],
   faq: [
     {

package/src/tool/dungeon-map-generator/bibliography.astro

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

package/src/tool/dungeon-map-generator/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Hilliard, Salis and Elaarag, Algorithms for Procedural Dungeon Generation',
+    url: 'https://www.pnnl.gov/publications/algorithms-procedural-dungeon-generation',
+  },
+  {
+    name: 'Baron, Procedural Dungeon Generation Analysis and Adaptation',
+    url: 'https://doi.org/10.1145/3077286.3077566',
+  },
+];

package/src/tool/dungeon-map-generator/component.astro

@@ -0,0 +1,134 @@
+---
+import { buildMapSvg } from './dom-views';
+import { evaluateMap } from './evaluator';
+import { DEFAULT_CONFIG, generateDungeon } from './logic';
+import type { DungeonMapGeneratorUI } from './ui';
+
+interface Props {
+  ui: DungeonMapGeneratorUI;
+}
+
+const { ui } = Astro.props;
+const initialMap = generateDungeon(DEFAULT_CONFIG);
+const initialEvaluation = evaluateMap(initialMap, ui);
+---
+
+<div class="dmg" data-dungeon-generator data-style="dungeon">
+  <script is:inline type="application/json" data-ui set:html={JSON.stringify(ui)} />
+  <section class="dmg-controls" aria-label={ui.styleLabel}>
+    <div class="dmg-seed-row">
+      <label class="dmg-field dmg-field--seed">
+        <span>{ui.seedLabel}</span>
+        <input name="seed" type="text" value={DEFAULT_CONFIG.seed} maxlength="48" spellcheck="false" />
+      </label>
+      <button class="dmg-shuffle" type="button" data-random-seed>{ui.randomSeed}</button>
+    </div>
+
+    <fieldset class="dmg-styles">
+      <legend>{ui.styleLabel}</legend>
+      <label class="dmg-style-card">
+        <input type="radio" name="style" value="dungeon" checked />
+        <span class="dmg-style-mark" aria-hidden="true"></span>
+        <strong>{ui.dungeonStyle}</strong>
+        <small>{ui.dungeonStyleHint}</small>
+      </label>
+      <label class="dmg-style-card">
+        <input type="radio" name="style" value="cavern" />
+        <span class="dmg-style-mark dmg-style-mark-cavern" aria-hidden="true"></span>
+        <strong>{ui.cavernStyle}</strong>
+        <small>{ui.cavernStyleHint}</small>
+      </label>
+      <label class="dmg-style-card">
+        <input type="radio" name="style" value="scifi" />
+        <span class="dmg-style-mark dmg-style-mark-scifi" aria-hidden="true"></span>
+        <strong>{ui.scifiStyle}</strong>
+        <small>{ui.scifiStyleHint}</small>
+      </label>
+    </fieldset>
+
+    <div class="dmg-size-section">
+      <span class="dmg-section-label">{ui.sizeLabel}</span>
+      <div class="dmg-size-presets">
+        <button type="button" data-size data-columns="24" data-rows="18" data-density="38" aria-pressed="false">
+          <strong>{ui.sizeCompact}</strong><span>24 x 18</span>
+        </button>
+        <button type="button" data-size data-columns="36" data-rows="26" data-density="48" aria-pressed="true">
+          <strong>{ui.sizeSession}</strong><span>36 x 26</span>
+        </button>
+        <button type="button" data-size data-columns="52" data-rows="38" data-density="58" aria-pressed="false">
+          <strong>{ui.sizeStronghold}</strong><span>52 x 38</span>
+        </button>
+      </div>
+    </div>
+
+    <details class="dmg-grid-tuning">
+      <summary>{ui.fineTuneGrid}</summary>
+      <div class="dmg-measurements">
+        <label class="dmg-range">
+          <span>{ui.columnsLabel}</span>
+          <output data-output="columns">{DEFAULT_CONFIG.columns}</output>
+          <input name="columns" data-live-value type="range" min="16" max="64" value={DEFAULT_CONFIG.columns} />
+        </label>
+        <label class="dmg-range">
+          <span>{ui.rowsLabel}</span>
+          <output data-output="rows">{DEFAULT_CONFIG.rows}</output>
+          <input name="rows" data-live-value type="range" min="14" max="48" value={DEFAULT_CONFIG.rows} />
+        </label>
+        <label class="dmg-range">
+          <span>{ui.densityLabel}</span>
+          <output data-output="density">{DEFAULT_CONFIG.density}</output>
+          <input name="density" data-live-value type="range" min="20" max="75" value={DEFAULT_CONFIG.density} />
+          <small>{ui.densityHint}</small>
+        </label>
+      </div>
+    </details>
+
+    <button class="dmg-generate" type="button" data-generate>{ui.generate}</button>
+  </section>
+
+  <section class="dmg-chart" aria-label={ui.mapRegionLabel}>
+    <div class="dmg-map-frame">
+      <span class="dmg-edit-hint">{ui.editHint}</span>
+      <div class="dmg-map-host" data-map-host set:html={buildMapSvg(initialMap)}></div>
+      <div class="dmg-context-menu" data-context-menu hidden role="menu" aria-label={ui.editCell}>
+        <button type="button" data-context-tool="floor" role="menuitem">{ui.paintFloor}</button>
+        <button type="button" data-context-tool="wall" role="menuitem">{ui.paintWall}</button>
+        <button type="button" data-context-tool="door" role="menuitem">{ui.paintDoor}</button>
+      </div>
+    </div>
+
+    <div class="dmg-map-footer" aria-live="polite">
+      <dl class="dmg-stats">
+        <div><dt>{ui.roomsLabel}</dt><dd data-room-count>{initialMap.rooms.length}</dd></div>
+        <div><dt>{ui.doorsLabel}</dt><dd data-door-count>{initialMap.doorCount}</dd></div>
+        <div><dt>{ui.floorLabel}</dt><dd data-floor-percent>{initialEvaluation.coverage}%</dd></div>
+      </dl>
+      <div class="dmg-legend" aria-label={ui.mapReady}>
+        <span><i data-tile="floor"></i>{ui.legendFloor}</span>
+        <span><i data-tile="wall"></i>{ui.legendWall}</span>
+        <span><i data-tile="door"></i>{ui.legendDoor}</span>
+      </div>
+    </div>
+
+    <div class="dmg-actions">
+      <button class="dmg-action-primary" type="button" data-export-png>{ui.exportPng}</button>
+      <button type="button" data-export-svg>{ui.exportSvg}</button>
+      <button type="button" data-copy-link>{ui.copyLink}</button>
+      <details class="dmg-map-data">
+        <summary>{ui.mapData}</summary>
+        <div>
+          <button type="button" data-export-json>{ui.exportJson}</button>
+          <label class="dmg-import">
+            <span>{ui.importJson}</span>
+            <input type="file" accept="application/json,.json" data-import-json />
+          </label>
+        </div>
+      </details>
+    </div>
+  </section>
+</div>
+
+<script>
+  import { mountDungeonMapGenerators } from './controller';
+  mountDungeonMapGenerators();
+</script>

package/src/tool/dungeon-map-generator/controller.ts

@@ -0,0 +1,242 @@
+import { exportJson, exportPng, exportSvg, renderMap } from './dom-views';
+import {
+  applyDungeonEdits,
+  decodeDocument,
+  editDungeonTile,
+  encodeDocument,
+  type DungeonDocument,
+  type DungeonEdit,
+} from './document';
+import { bindContextEditor } from './editor';
+import {
+  DEFAULT_CONFIG,
+  decodeConfig,
+  generateDungeon,
+  normalizeConfig,
+  type DungeonConfig,
+  type DungeonMap,
+  type DungeonStyle,
+} from './logic';
+import { loadDocument, saveDocument } from './storage';
+import type { DungeonMapGeneratorUI } from './ui';
+
+interface GeneratorState {
+  config: DungeonConfig;
+  baseMap: DungeonMap;
+  edits: DungeonEdit[];
+  map: DungeonMap;
+  root: HTMLElement;
+  ui: DungeonMapGeneratorUI;
+}
+
+const WORDS = ['ember', 'ivory', 'moss', 'obsidian', 'quiet', 'scarlet', 'silver', 'sunken'];
+const PLACES = ['archive', 'bastion', 'crypt', 'forge', 'gate', 'hollow', 'spire', 'vault'];
+
+export function mountDungeonMapGenerators(): void {
+  document.querySelectorAll<HTMLElement>('[data-dungeon-generator]').forEach(mountGenerator);
+}
+
+function mountGenerator(root: HTMLElement): void {
+  const ui = readUi(root);
+  if (!ui) return;
+  const document = initialDocument();
+  const baseMap = generateDungeon(document.config);
+  const state: GeneratorState = {
+    config: document.config,
+    baseMap,
+    edits: document.edits,
+    map: applyDungeonEdits(baseMap, document.edits),
+    root,
+    ui,
+  };
+  syncControls(state);
+  renderMap(state);
+  bindControls(state);
+  bindEditor(state);
+  bindActions(state);
+}
+
+function readUi(root: HTMLElement): DungeonMapGeneratorUI | undefined {
+  const data = root.querySelector<HTMLScriptElement>('[data-ui]')?.textContent;
+  if (!data) return undefined;
+  try {
+    return JSON.parse(data) as DungeonMapGeneratorUI;
+  } catch {
+    return undefined;
+  }
+}
+
+function initialDocument(): DungeonDocument {
+  const shared = new URLSearchParams(window.location.search).get('dungeon');
+  const document = shared ? decodeDocument(shared) : undefined;
+  if (document) return document;
+  const legacyConfig = shared ? decodeConfig(shared) : undefined;
+  return loadDocument() || { version: 1, config: normalizeConfig(legacyConfig || DEFAULT_CONFIG), edits: [] };
+}
+
+function bindControls(state: GeneratorState): void {
+  state.root.querySelector('[data-generate]')?.addEventListener('click', () => regenerate(state));
+  state.root.querySelector('[data-random-seed]')?.addEventListener('click', () => randomizeSeed(state));
+  state.root.querySelectorAll<HTMLInputElement>('[name="style"]').forEach((input) => {
+    input.addEventListener('change', () => regenerate(state));
+  });
+  state.root.querySelectorAll<HTMLButtonElement>('[data-size]').forEach((button) => {
+    button.addEventListener('click', () => applySizePreset(state, button));
+  });
+  state.root.querySelectorAll<HTMLInputElement>('[data-live-value]').forEach((input) => {
+    input.addEventListener('input', () => updateOutput(state.root, input));
+  });
+}
+
+function applySizePreset(state: GeneratorState, button: HTMLButtonElement): void {
+  setInput(state.root, 'columns', button.dataset.columns || String(DEFAULT_CONFIG.columns));
+  setInput(state.root, 'rows', button.dataset.rows || String(DEFAULT_CONFIG.rows));
+  setInput(state.root, 'density', button.dataset.density || String(DEFAULT_CONFIG.density));
+  state.root.querySelectorAll<HTMLInputElement>('[data-live-value]').forEach((input) => {
+    updateOutput(state.root, input);
+  });
+  regenerate(state);
+}
+
+function bindActions(state: GeneratorState): void {
+  state.root.querySelector('[data-copy-link]')?.addEventListener('click', () => void copyLink(state));
+  state.root.querySelector('[data-export-svg]')?.addEventListener('click', () => exportSvg(state.map));
+  state.root.querySelector('[data-export-png]')?.addEventListener('click', () => void exportPng(state.map));
+  state.root.querySelector('[data-export-json]')?.addEventListener('click', () => exportJson(state.map, state.edits));
+  state.root.querySelector<HTMLInputElement>('[data-import-json]')?.addEventListener('change', (event) => {
+    void importJson(state, event.currentTarget as HTMLInputElement);
+  });
+}
+
+function bindEditor(state: GeneratorState): void {
+  bindContextEditor(state.root, (x, y, tile) => applyCellEdit(state, x, y, tile));
+}
+
+function applyCellEdit(state: GeneratorState, x: number, y: number, tile: 0 | 1 | 2): void {
+  state.map = editDungeonTile(state.map, x, y, tile);
+  state.edits = updateEdits(state, x, y);
+  saveState(state);
+  renderMap(state);
+}
+
+function updateEdits(state: GeneratorState, x: number, y: number): DungeonEdit[] {
+  const edits = state.edits.filter((edit) => edit.x !== x || edit.y !== y);
+  const tile = state.map.tiles[y]?.[x];
+  if (tile === undefined || tile === state.baseMap.tiles[y]?.[x]) return edits;
+  return [...edits, { x, y, tile }];
+}
+
+function regenerate(state: GeneratorState): void {
+  state.config = readConfig(state.root);
+  state.baseMap = generateDungeon(state.config);
+  state.map = state.baseMap;
+  state.edits = [];
+  saveState(state);
+  syncSizePresets(state);
+  renderMap(state);
+}
+
+function readConfig(root: HTMLElement): DungeonConfig {
+  return normalizeConfig({
+    columns: numberValue(root, '[name="columns"]') ?? DEFAULT_CONFIG.columns,
+    rows: numberValue(root, '[name="rows"]') ?? DEFAULT_CONFIG.rows,
+    density: numberValue(root, '[name="density"]') ?? DEFAULT_CONFIG.density,
+    seed: root.querySelector<HTMLInputElement>('[name="seed"]')?.value || DEFAULT_CONFIG.seed,
+    style: readStyle(root),
+  });
+}
+
+function readStyle(root: HTMLElement): DungeonStyle {
+  const value = root.querySelector<HTMLInputElement>('[name="style"]:checked')?.value;
+  return value === 'cavern' || value === 'scifi' ? value : 'dungeon';
+}
+
+function numberValue(root: HTMLElement, selector: string): number | undefined {
+  const value = root.querySelector<HTMLInputElement>(selector)?.valueAsNumber;
+  return Number.isFinite(value) ? value : undefined;
+}
+
+function syncControls(state: GeneratorState): void {
+  setInput(state.root, 'seed', state.config.seed);
+  setInput(state.root, 'columns', String(state.config.columns));
+  setInput(state.root, 'rows', String(state.config.rows));
+  setInput(state.root, 'density', String(state.config.density));
+  const style = state.root.querySelector<HTMLInputElement>(`[name="style"][value="${state.config.style}"]`);
+  if (style) style.checked = true;
+  syncSizePresets(state);
+  state.root.querySelectorAll<HTMLInputElement>('[data-live-value]').forEach((input) => updateOutput(state.root, input));
+}
+
+function syncSizePresets(state: GeneratorState): void {
+  state.root.querySelectorAll<HTMLButtonElement>('[data-size]').forEach((button) => {
+    const matchesColumns = Number(button.dataset.columns) === state.config.columns;
+    const matchesRows = Number(button.dataset.rows) === state.config.rows;
+    const matchesDensity = Number(button.dataset.density) === state.config.density;
+    button.setAttribute('aria-pressed', String(matchesColumns && matchesRows && matchesDensity));
+  });
+}
+
+function setInput(root: HTMLElement, name: string, value: string): void {
+  const input = root.querySelector<HTMLInputElement>(`[name="${name}"]`);
+  if (input) input.value = value;
+}
+
+function updateOutput(root: HTMLElement, input: HTMLInputElement): void {
+  const output = root.querySelector<HTMLOutputElement>(`[data-output="${input.name}"]`);
+  if (output) output.value = input.value;
+}
+
+function randomizeSeed(state: GeneratorState): void {
+  const values = new Uint32Array(2);
+  crypto.getRandomValues(values);
+  const seed = `${WORDS[values[0]! % WORDS.length]}-${PLACES[values[1]! % PLACES.length]}`;
+  setInput(state.root, 'seed', seed);
+  regenerate(state);
+}
+
+async function copyLink(state: GeneratorState): Promise<void> {
+  const url = new URL(window.location.href);
+  url.searchParams.set('dungeon', encodeDocument(documentFromState(state)));
+  try {
+    await navigator.clipboard.writeText(url.toString());
+    showCopyStatus(state);
+  } catch {
+    window.prompt(state.ui.copyLink, url.toString());
+  }
+}
+
+function showCopyStatus(state: GeneratorState): void {
+  const button = state.root.querySelector<HTMLButtonElement>('[data-copy-link]');
+  if (!button) return;
+  const original = button.textContent || state.ui.copyLink;
+  button.textContent = state.ui.linkCopied;
+  window.setTimeout(() => { button.textContent = original; }, 1800);
+}
+
+async function importJson(state: GeneratorState, input: HTMLInputElement): Promise<void> {
+  const file = input.files?.[0];
+  if (!file) return;
+  try {
+    const document = decodeDocument(await file.text());
+    if (!document) throw new Error('Invalid dungeon document');
+    state.config = document.config;
+    state.baseMap = generateDungeon(document.config);
+    state.edits = document.edits;
+    state.map = applyDungeonEdits(state.baseMap, state.edits);
+    syncControls(state);
+    saveState(state);
+    renderMap(state);
+  } catch {
+    window.alert(state.ui.importError);
+  } finally {
+    input.value = '';
+  }
+}
+
+function documentFromState(state: GeneratorState): DungeonDocument {
+  return { version: 1, config: state.config, edits: state.edits };
+}
+
+function saveState(state: GeneratorState): void {
+  saveDocument(documentFromState(state));
+}

package/src/tool/dungeon-map-generator/document.ts

@@ -0,0 +1,72 @@
+import {
+  normalizeConfig,
+  type Door,
+  type DungeonConfig,
+  type DungeonMap,
+  type Tile,
+} from './logic';
+
+export interface DungeonEdit {
+  x: number;
+  y: number;
+  tile: Tile;
+}
+
+export interface DungeonDocument {
+  version: 1;
+  config: DungeonConfig;
+  edits: DungeonEdit[];
+}
+
+export function editDungeonTile(map: DungeonMap, x: number, y: number, tile: Tile): DungeonMap {
+  if (!map.tiles[y] || map.tiles[y]![x] === undefined) return map;
+  const tiles = map.tiles.map((row) => [...row]);
+  tiles[y]![x] = tile;
+  const doors = map.doors.filter((door) => door.x !== x || door.y !== y);
+  if (tile === 2) doors.push({ x, y, orientation: inferDoorOrientation(tiles, x, y) });
+  return createEditedMap(map, tiles, doors);
+}
+
+function createEditedMap(map: DungeonMap, tiles: Tile[][], doors: Door[]): DungeonMap {
+  return {
+    ...map,
+    tiles,
+    doors,
+    doorCount: doors.length,
+    floorCount: tiles.flat().filter((tile) => tile !== 0).length,
+  };
+}
+
+function inferDoorOrientation(tiles: Tile[][], x: number, y: number): Door['orientation'] {
+  const horizontalTravel = tiles[y]?.[x - 1] !== 0 && tiles[y]?.[x + 1] !== 0;
+  return horizontalTravel ? 'vertical' : 'horizontal';
+}
+
+export function applyDungeonEdits(map: DungeonMap, edits: DungeonEdit[]): DungeonMap {
+  return edits.reduce((current, edit) => editDungeonTile(current, edit.x, edit.y, edit.tile), map);
+}
+
+export function encodeDocument(document: DungeonDocument): string {
+  return JSON.stringify({ version: 1, config: normalizeConfig(document.config), edits: document.edits });
+}
+
+export function decodeDocument(value: string): DungeonDocument | undefined {
+  try {
+    const parsed = JSON.parse(value) as Partial<DungeonDocument>;
+    if (!parsed.config) return undefined;
+    return {
+      version: 1,
+      config: normalizeConfig(parsed.config),
+      edits: Array.isArray(parsed.edits) ? parsed.edits.filter(isDungeonEdit) : [],
+    };
+  } catch {
+    return undefined;
+  }
+}
+
+function isDungeonEdit(value: unknown): value is DungeonEdit {
+  if (!value || typeof value !== 'object') return false;
+  const edit = value as Partial<DungeonEdit>;
+  return Number.isInteger(edit.x) && Number.isInteger(edit.y)
+    && (edit.tile === 0 || edit.tile === 1 || edit.tile === 2);
+}