@jjlmoya/utils-books 1.1.0

package/src/tests/title_quality.test.ts

@@ -0,0 +1,55 @@
+import { describe, it } from 'vitest';
+import fs from 'node:fs';
+import path from 'node:path';
+
+function getFiles(dir: string, ext: string[]): string[] {
+  const results: string[] = [];
+  if (!fs.existsSync(dir)) return results;
+  const list = fs.readdirSync(dir);
+  for (const file of list) {
+    const fullPath = path.join(dir, file);
+    const stat = fs.statSync(fullPath);
+    if (stat && stat.isDirectory()) {
+      results.push(...getFiles(fullPath, ext));
+    } else if (ext.some((e) => file.endsWith(e))) {
+      results.push(fullPath);
+    }
+  }
+  return results;
+}
+
+const SRC_DIR = path.join(process.cwd(), 'src');
+
+describe('Project Titles - Separator Validation', () => {
+  const files = [
+    ...getFiles(path.join(SRC_DIR, 'tool'), ['.ts']),
+    ...getFiles(path.join(SRC_DIR, 'category'), ['.ts']),
+  ].filter(f => f.includes('i18n'));
+
+  it.each(files)('Verify that titles in %s do not contain | or -', (filePath) => {
+    const content = fs.readFileSync(filePath, 'utf-8');
+    const relativePath = path.relative(process.cwd(), filePath);
+
+    const titlePatterns = [
+      /const\s+title\s*=\s*['"]([^'"]+)['"]/g,
+      /title\s*:\s*['"]([^'"]+)['"]/g,
+    ];
+
+    const findings: string[] = [];
+
+    for (const pattern of titlePatterns) {
+      let match;
+      while ((match = pattern.exec(content)) !== null) {
+        const title = match[1]!;
+        if (title.includes('|') || title.includes('-')) {
+          findings.push(title);
+        }
+      }
+    }
+
+    if (findings.length > 0) {
+      const list = findings.map((f) => `  - "${f}"`).join('\n');
+      throw new Error(`Forbidden separators (| or -) found in titles in ${relativePath}:\n${list}`);
+    }
+  });
+});

package/src/tests/tool_exports.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+import { validateToolExports } from './shared-test-helpers';
+
+describe('Tool Exports Pattern Validation', () => {
+  describe('Component Exports Format', () => {
+    ALL_TOOLS.forEach((tool) => {
+      it(`${tool.entry.id}: Component should be a lazy-loaded function`, () => {
+        expect(typeof tool.Component).toBe('function');
+        expect(tool.Component).toBeInstanceOf(Function);
+      });
+
+      it(`${tool.entry.id}: SEOComponent should be a lazy-loaded function`, () => {
+        expect(typeof tool.SEOComponent).toBe('function');
+        expect(tool.SEOComponent).toBeInstanceOf(Function);
+      });
+
+      it(`${tool.entry.id}: BibliographyComponent should be a lazy-loaded function`, () => {
+        expect(typeof tool.BibliographyComponent).toBe('function');
+        expect(tool.BibliographyComponent).toBeInstanceOf(Function);
+      });
+    });
+  });
+
+  describe('Dynamic Import Validation', () => {
+    it('all tools must have functional dynamic imports', async () => {
+      const result = await validateToolExports(ALL_TOOLS);
+      if (!result.passed) {
+        throw new Error(`Tool export validation failed:\n${result.failures.join('\n')}`);
+      }
+      expect(result.passed).toBe(true);
+    });
+  });
+});

package/src/tests/tool_validation.test.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+import { booksCategory } from '../data';
+
+describe('Tool Validation Suite', () => {
+  describe('Library Registration', () => {
+    it('should have tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(1);
+    });
+
+    it('booksCategory should be defined', () => {
+      expect(booksCategory).toBeDefined();
+      expect(booksCategory.i18n).toBeDefined();
+    });
+  });
+});

package/src/tests/translation_copy.test.ts

@@ -0,0 +1,127 @@
+import { describe, expect, it } from 'vitest';
+import { ALL_ENTRIES } from '../entries';
+
+const COPY_THRESHOLD = 0.9;
+
+const STRUCTURAL_KEYS = new Set([
+  '@context',
+  '@type',
+  'applicationCategory',
+  'columns',
+  'highlight',
+  'icon',
+  'level',
+  'operatingSystem',
+  'position',
+  'positive',
+  'price',
+  'priceCurrency',
+  'slug',
+  'trend',
+  'type',
+  'url',
+  'value',
+  'variant',
+]);
+
+function normalizeText(value: string): string {
+  return value
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/&(?:amp|lt|gt|quot|apos|nbsp);/gi, ' ')
+    .replace(/[\u2018\u2019]/g, "'")
+    .replace(/[\u201c\u201d]/g, '"')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .toLocaleLowerCase();
+}
+
+function collectText(value: unknown, path: string, parts: string[]): void {
+  if (typeof value === 'string') {
+    const normalized = normalizeText(value);
+    if (normalized.length >= 2) parts.push(normalized);
+    return;
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((item, index) => collectText(item, `${path}[${index}]`, parts));
+    return;
+  }
+
+  if (!value || typeof value !== 'object') return;
+
+  Object.entries(value).forEach(([key, child]) => {
+    if (STRUCTURAL_KEYS.has(key)) return;
+    collectText(child, `${path}.${key}`, parts);
+  });
+}
+
+function localeCorpus(content: unknown): string {
+  if (!content || typeof content !== 'object') return '';
+
+  const record = content as Record<string, unknown>;
+  const parts: string[] = [];
+  collectText(record.title, 'title', parts);
+  collectText(record.description, 'description', parts);
+  collectText(record.faqTitle, 'faqTitle', parts);
+  collectText(record.faq, 'faq', parts);
+  collectText(record.seo, 'seo', parts);
+  collectText(record.schemas, 'schemas', parts);
+  return parts.join(' ');
+}
+
+function tokenCounts(text: string): Map<string, number> {
+  const counts = new Map<string, number>();
+  for (const token of text.match(/[\p{L}\p{N}]+/gu) ?? []) {
+    counts.set(token, (counts.get(token) ?? 0) + 1);
+  }
+  return counts;
+}
+
+function copySimilarity(left: string, right: string): number {
+  const leftCounts = tokenCounts(left);
+  const rightCounts = tokenCounts(right);
+  const leftTotal = [...leftCounts.values()].reduce((sum, count) => sum + count, 0);
+  const rightTotal = [...rightCounts.values()].reduce((sum, count) => sum + count, 0);
+  if (leftTotal === 0 || rightTotal === 0) return 0;
+
+  let shared = 0;
+  for (const [token, count] of leftCounts) {
+    shared += Math.min(count, rightCounts.get(token) ?? 0);
+  }
+  return (2 * shared) / (leftTotal + rightTotal);
+}
+
+describe('Locales must not copy another locale wholesale', () => {
+  ALL_ENTRIES.forEach((entry) => {
+    it(`${entry.id} is not at least ${COPY_THRESHOLD * 100}% identical to another locale`, async () => {
+      const corpora = await loadCorpora(entry);
+      const violations = findViolations(corpora);
+      expect(violations, `Locale copy threshold exceeded in ${entry.id}`).toEqual([]);
+    });
+  });
+});
+
+async function loadCorpora(entry: typeof ALL_ENTRIES[number]): Promise<Map<string, string>> {
+  const corpora = new Map<string, string>();
+  for (const [locale, loader] of Object.entries(entry.i18n)) {
+    if (loader) corpora.set(locale, localeCorpus(await loader()));
+  }
+  return corpora;
+}
+
+function findViolations(corpora: Map<string, string>): string[] {
+  const locales = [...corpora.keys()];
+  const violations: string[] = [];
+  for (let leftIndex = 0; leftIndex < locales.length; leftIndex += 1) {
+    for (let rightIndex = leftIndex + 1; rightIndex < locales.length; rightIndex += 1) {
+      addViolation(violations, corpora, locales[leftIndex], locales[rightIndex]);
+    }
+  }
+  return violations;
+}
+
+function addViolation(violations: string[], corpora: Map<string, string>, left: string | undefined, right: string | undefined): void {
+  if (!left || !right) return;
+  const similarity = copySimilarity(corpora.get(left) ?? '', corpora.get(right) ?? '');
+  if (similarity >= COPY_THRESHOLD) violations.push(`${left} ↔ ${right}: ${(similarity * 100).toFixed(1)}%`);
+}

package/src/tool/book-pagination-and-spine-calculator/bibliography.astro

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

package/src/tool/book-pagination-and-spine-calculator/bibliography.ts

@@ -0,0 +1,7 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  { name: 'ISO 216:2007 Paper sizes', url: 'https://www.iso.org/standard/36631.html' },
+  { name: 'Instituto Nacional de Estadística. Producción editorial de libros', url: 'https://www.ine.es/dyngs/INEbase/es/operacion.htm?c=Estadistica_C&cid=1254736176767&idp=1254735573113&menu=ultiDatos' },
+  { name: 'UNESCO Global Publishing Industry report', url: 'https://doi.org/10.58337/SRUH6078' },
+];

package/src/tool/book-pagination-and-spine-calculator/book-pagination-and-spine-calculator.css

@@ -0,0 +1,298 @@
+:root {
+  --n-ink: #17202a;
+  --n-muted: #68737c;
+  --n-surface: #fff;
+  --n-soft: #f5f1e9;
+  --n-line: #ddd5c7;
+  --n-accent: #8b4b35;
+  --n-accent-soft: #f0d9ce;
+  --n-paper: #ead7b0;
+  --n-paper-edge: #c4a875;
+  --n-on-accent: #fff;
+  --n-shadow: rgba(23, 32, 42, 0.1);
+}
+
+.theme-dark {
+  --n-ink: #f5f1e9;
+  --n-muted: #b7c0c6;
+  --n-surface: #1d252c;
+  --n-soft: #273139;
+  --n-line: #46515a;
+  --n-accent: #e39b7c;
+  --n-accent-soft: #4d322c;
+  --n-paper: #80694a;
+  --n-paper-edge: #ae8d5e;
+  --n-on-accent: #17202a;
+  --n-shadow: rgba(0, 0, 0, 0.28);
+}
+
+.book-pagination-tool {
+  background: var(--n-surface);
+  border: 1px solid var(--n-line);
+  border-radius: 1.25rem;
+  box-shadow: 0 1rem 2.5rem var(--n-shadow);
+  color: var(--n-ink);
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(290px, .9fr) minmax(400px, 1.1fr);
+  padding: clamp(1.25rem, 3vw, 2.25rem);
+}
+
+.book-editor,
+.book-output {
+  min-width: 0;
+}
+
+.book-output {
+  border-left: 1px solid var(--n-line);
+  padding-left: clamp(1rem, 3vw, 2rem);
+}
+
+.editor-heading,
+.output-heading {
+  margin-bottom: 1.4rem;
+}
+
+.eyebrow {
+  color: var(--n-accent);
+  font-size: .7rem;
+  font-weight: 900;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+}
+
+h2 {
+  font-size: clamp(1.5rem, 3vw, 2.4rem);
+  letter-spacing: -.05em;
+  line-height: 1;
+  margin: .45rem 0;
+}
+
+p {
+  color: var(--n-muted);
+  line-height: 1.5;
+  margin: 0;
+}
+
+label,
+.field-label,
+.preset-heading > span,
+.unit-row > span {
+  display: block;
+  font-size: .78rem;
+  font-weight: 800;
+  margin: .85rem 0 .4rem;
+}
+
+input {
+  background: var(--n-soft);
+  border: 1px solid var(--n-line);
+  border-radius: .6rem;
+  box-sizing: border-box;
+  color: var(--n-ink);
+  font: inherit;
+  margin-top: .35rem;
+  padding: .7rem;
+  width: 100%;
+}
+
+input:focus,
+button:focus-visible {
+  outline: 3px solid var(--n-accent-soft);
+  outline-offset: 2px;
+}
+
+small {
+  color: var(--n-muted);
+  font-weight: 500;
+}
+
+.preset-chips,
+.binding-chips,
+.editor-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .45rem;
+}
+
+.binding-chips {
+  gap: .7rem;
+  margin-top: .55rem;
+}
+
+.editor-actions {
+  margin-top: .8rem;
+}
+
+button {
+  background: var(--n-soft);
+  border: 1px solid var(--n-line);
+  border-radius: 999px;
+  color: var(--n-ink);
+  cursor: pointer;
+  font: inherit;
+  font-size: .75rem;
+  font-weight: 800;
+  padding: .55rem .75rem;
+}
+
+button:hover,
+button.active {
+  border-color: var(--n-accent);
+}
+
+.button-primary,
+.unit-row button {
+  background: var(--n-accent);
+  border-color: var(--n-accent);
+  color: var(--n-on-accent);
+}
+
+.unit-row {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.input-grid {
+  display: grid;
+  gap: 0 .7rem;
+  grid-template-columns: 1fr 1fr;
+}
+
+.book-results {
+  display: grid;
+  gap: .55rem;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.book-result-card {
+  background: var(--n-soft);
+  border-radius: .8rem;
+  padding: .8rem;
+}
+
+.book-result-card span,
+.book-result-card small {
+  color: var(--n-muted);
+  display: block;
+  font-size: .64rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.book-result-card strong {
+  display: block;
+  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
+  margin: .3rem 0;
+}
+
+.result-pages {
+  background: var(--n-accent-soft);
+}
+
+.live-badge {
+  background: var(--n-accent-soft);
+  border-radius: 999px;
+  color: var(--n-accent);
+  font-size: .62rem;
+  font-weight: 900;
+  letter-spacing: .1em;
+  padding: .4rem .6rem;
+}
+
+.output-heading {
+  align-items: flex-start;
+  display: flex;
+  justify-content: space-between;
+}
+
+.book-preview {
+  align-items: center;
+  background: var(--n-soft);
+  border-radius: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-top: 1rem;
+  min-height: 18rem;
+  overflow: hidden;
+  padding: 1rem;
+  position: relative;
+}
+
+.book-shadow {
+  background: var(--n-shadow);
+  border-radius: 50%;
+  bottom: 2.4rem;
+  height: 1.5rem;
+  position: absolute;
+  width: 15rem;
+}
+
+.book-mockup {
+  align-items: stretch;
+  display: flex;
+  height: 12rem;
+  perspective: 45rem;
+  transform: rotate(-5deg);
+  z-index: 1;
+}
+
+.book-cover {
+  align-items: center;
+  background: var(--n-paper);
+  border: 1px solid var(--n-paper-edge);
+  color: var(--n-ink);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 1rem;
+  width: 7.5rem;
+}
+
+.book-cover.front {
+  box-shadow: .6rem .6rem .8rem var(--n-shadow);
+  transform: rotateY(-8deg);
+}
+
+.book-cover.back {
+  transform: rotateY(8deg);
+}
+
+.book-cover span {
+  font-size: .55rem;
+  font-weight: 900;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+}
+
+.book-cover strong {
+  font-size: 1.4rem;
+  text-align: center;
+}
+
+.book-spine {
+  background: var(--n-accent);
+  width: var(--book-spine);
+}
+
+.book-preview p,
+.source-note {
+  font-size: .72rem;
+  margin-top: 1rem;
+  text-align: center;
+}
+
+@media (max-width: 760px) {
+  .book-pagination-tool {
+    grid-template-columns: 1fr;
+  }
+
+  .book-output {
+    border-left: 0;
+    border-top: 1px solid var(--n-line);
+    padding-left: 0;
+    padding-top: 1.5rem;
+  }
+}

package/src/tool/book-pagination-and-spine-calculator/component.astro

@@ -0,0 +1,40 @@
+---
+import './book-pagination-and-spine-calculator.css';
+import { NOVEL_PRESET } from './logic';
+import type { BookPaginationUI } from './ui';
+
+interface Props {
+  ui: BookPaginationUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="book-pagination-tool" data-ui={JSON.stringify(ui)}>
+  <div class="book-editor">
+    <div class="editor-heading"><span class="eyebrow">{ui.title}</span><h2>{ui.methodTitle}</h2><p>{ui.methodHint}</p></div>
+    <label for="scenario-name">{ui.scenarioLabel}</label>
+    <input id="scenario-name" type="text" value="My book" placeholder={ui.scenarioPlaceholder} />
+    <div class="preset-heading"><span>{ui.presetLabel}</span><div class="preset-chips"><button type="button" data-preset="novel">{ui.novelPreset}</button><button type="button" data-preset="large-print">{ui.largePrintPreset}</button><button type="button" data-preset="workbook">{ui.workbookPreset}</button></div></div>
+    <div class="unit-row"><span>{ui.paperLabel}</span><button type="button" data-unit-toggle>{ui.metricLabel}</button></div>
+    <div class="input-grid">
+      <label for="words">{ui.wordsLabel}<input id="words" type="number" min="0" value={NOVEL_PRESET.words} /></label>
+      <label for="width">{ui.widthLabel} <small data-unit-label>(mm)</small><input id="width" type="number" min="1" step="0.1" value={NOVEL_PRESET.widthMm} /></label>
+      <label for="height">{ui.heightLabel} <small data-unit-label>(mm)</small><input id="height" type="number" min="1" step="0.1" value={NOVEL_PRESET.heightMm} /></label>
+      <label for="margin">{ui.marginLabel} <small data-unit-label>(mm)</small><input id="margin" type="number" min="0" step="0.1" value={NOVEL_PRESET.marginMm} /></label>
+      <label for="font-size">{ui.fontSizeLabel}<input id="font-size" type="number" min="5" step="0.5" value={NOVEL_PRESET.fontSizePt} /></label>
+      <label for="line-height">{ui.lineHeightLabel}<input id="line-height" type="number" min="0.8" step="0.05" value={NOVEL_PRESET.lineHeight} /></label>
+      <label for="caliper">{ui.caliperLabel} <small data-unit-label>(mm)</small><input id="caliper" type="number" min="0.01" step="0.01" value={NOVEL_PRESET.caliperMm} /></label>
+    </div>
+    <span class="field-label">{ui.bindingLabel}</span><div class="binding-chips"><button type="button" data-binding="softcover">{ui.softcoverLabel}</button><button type="button" data-binding="hardcover">{ui.hardcoverLabel}</button><button type="button" data-binding="saddle-stitch">{ui.saddleLabel}</button></div>
+    <div class="editor-actions"><button type="button" class="button-primary" data-action="reset">{ui.resetLabel}</button></div>
+  </div>
+  <div class="book-output">
+    <div class="output-heading"><div><span class="eyebrow">{ui.previewLabel}</span><h2>{ui.pagesLabel}</h2></div><span class="live-badge">LIVE</span></div>
+    <div id="book-results" class="book-results"></div>
+    <div id="book-preview" class="book-preview" aria-live="polite"></div>
+    <p class="source-note">{ui.sourceLabel}</p>
+  </div>
+</div>
+
+<script src="./controller.ts"></script>

package/src/tool/book-pagination-and-spine-calculator/controller.ts

@@ -0,0 +1,87 @@
+import { calculateBook, LARGE_PRINT_PRESET, NOVEL_PRESET, WORKBOOK_PRESET, type Binding, type BookInputs } from './logic';
+import { renderPreview, renderResults } from './dom-views';
+import { loadBookState, saveBookState } from './storage';
+import type { BookPaginationUI } from './ui';
+
+const root = document.querySelector<HTMLElement>('.book-pagination-tool');
+if (!root) throw new Error('Book pagination tool root not found');
+const toolRoot = root;
+const ui = JSON.parse(root.dataset.ui ?? '{}') as BookPaginationUI;
+const scenarioInput = root.querySelector<HTMLInputElement>('#scenario-name')!;
+const unitButton = root.querySelector<HTMLButtonElement>('[data-unit-toggle]')!;
+const result = root.querySelector<HTMLElement>('#book-results')!;
+const preview = root.querySelector<HTMLElement>('#book-preview')!;
+const fields = ['words', 'width', 'height', 'margin', 'font-size', 'line-height', 'caliper'].map((id) => root.querySelector<HTMLInputElement>(`#${id}`)!);
+const bindingButtons = [...root.querySelectorAll<HTMLButtonElement>('[data-binding]')];
+let unit: 'metric' | 'imperial' = 'metric';
+let binding: Binding = 'softcover';
+const fallback = { inputs: JSON.stringify(NOVEL_PRESET), unit, scenarioName: scenarioInput.value };
+const saved = loadBookState(fallback);
+unit = saved.unit;
+scenarioInput.value = saved.scenarioName;
+loadInputs(JSON.parse(saved.inputs) as BookInputs);
+
+function readInputs(): BookInputs {
+  const factor = unit === 'metric' ? 1 : 25.4;
+  return { words: number('words'), widthMm: number('width') * factor, heightMm: number('height') * factor, marginMm: number('margin') * factor, fontSizePt: number('font-size'), lineHeight: number('line-height'), caliperMm: number('caliper') * factor, binding };
+}
+
+function number(id: string): number {
+  return Math.max(Number(toolRoot.querySelector<HTMLInputElement>(`#${id}`)!.value) || 0, 0);
+}
+
+function render(): void {
+  const inputs = readInputs();
+  const calculation = calculateBook(inputs);
+  renderResults(result, calculation, unit, ui);
+  renderPreview(preview, calculation, ui);
+  unitButton.textContent = unit === 'metric' ? ui.metricLabel : ui.imperialLabel;
+  toolRoot.querySelectorAll<HTMLElement>('[data-unit-label]').forEach((label) => {
+    label.textContent = unit === 'metric' ? '(mm)' : '(in)';
+  });
+  bindingButtons.forEach((button) => button.classList.toggle('active', button.dataset.binding === binding));
+  saveBookState({ inputs: JSON.stringify(inputs), unit, scenarioName: scenarioInput.value });
+}
+
+function loadInputs(inputs: BookInputs): void {
+  const factor = unit === 'metric' ? 1 : 1 / 25.4;
+  setField('words', inputs.words);
+  setField('width', inputs.widthMm * factor);
+  setField('height', inputs.heightMm * factor);
+  setField('margin', inputs.marginMm * factor);
+  setField('font-size', inputs.fontSizePt);
+  setField('line-height', inputs.lineHeight);
+  setField('caliper', inputs.caliperMm * factor);
+  binding = inputs.binding;
+}
+
+function setField(id: string, value: number): void {
+  toolRoot.querySelector<HTMLInputElement>(`#${id}`)!.value = String(value);
+}
+
+function toggleUnit(): void {
+  const oldFactor = unit === 'metric' ? 1 : 25.4;
+  unit = unit === 'metric' ? 'imperial' : 'metric';
+  const newFactor = unit === 'metric' ? 1 : 25.4;
+  ['width', 'height', 'margin', 'caliper'].forEach((id) => setField(id, number(id) * oldFactor / newFactor));
+  render();
+}
+
+function applyPreset(inputs: BookInputs, name: string): void {
+  scenarioInput.value = name;
+  loadInputs(inputs);
+  render();
+}
+
+unitButton.addEventListener('click', toggleUnit);
+fields.forEach((field) => field.addEventListener('input', render));
+scenarioInput.addEventListener('input', render);
+bindingButtons.forEach((button) => button.addEventListener('click', () => {
+  binding = button.dataset.binding as Binding;
+  render();
+}));
+root.querySelector<HTMLButtonElement>('[data-preset="novel"]')?.addEventListener('click', () => applyPreset(NOVEL_PRESET, ui.novelPreset));
+root.querySelector<HTMLButtonElement>('[data-preset="large-print"]')?.addEventListener('click', () => applyPreset(LARGE_PRINT_PRESET, ui.largePrintPreset));
+root.querySelector<HTMLButtonElement>('[data-preset="workbook"]')?.addEventListener('click', () => applyPreset(WORKBOOK_PRESET, ui.workbookPreset));
+root.querySelector<HTMLButtonElement>('[data-action="reset"]')?.addEventListener('click', () => applyPreset(NOVEL_PRESET, 'My book'));
+render();