@jjlmoya/utils-books 1.14.0 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-books",
-    "version": "1.14.0",
+    "version": "1.16.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -46,7 +46,7 @@
         "postinstall": "node scripts/postinstall.mjs",
         "predev": "node scripts/postinstall.mjs",
         "prestart": "node scripts/postinstall.mjs",
-        "prebuild": "node scripts/postinstall.mjs",
+        "prebuild": "node scripts/postinstall.mjs && node scripts/validate-icons.mjs",
         "qa": "npm run lint && npm run test && npm run build",
         "cf:dry-run": "npm run build && wrangler deploy --dry-run",
         "cf:preview": "npm run build && wrangler deploy --config wrangler.staging.jsonc",

package/scripts/validate-icons.mjs

@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+
+import { createRequire } from 'node:module';
+import { readFileSync, readdirSync } from 'node:fs';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+const packageJsonPath = require.resolve('@iconify-json/mdi/package.json');
+const packageRoot = dirname(packageJsonPath);
+const iconSet = JSON.parse(readFileSync(join(packageRoot, 'icons.json'), 'utf8'));
+const availableIcons = new Set([
+  ...Object.keys(iconSet.icons ?? {}),
+  ...Object.keys(iconSet.aliases ?? {}),
+]);
+
+const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const sourceRoot = resolve(repoRoot, 'src');
+const extensions = new Set(['.astro', '.js', '.mjs', '.ts', '.tsx']);
+const iconPattern = /\bmdi:([a-z0-9-]+)\b/g;
+const failures = [];
+let references = 0;
+
+function walk(directory) {
+  const entries = readdirSync(directory, { withFileTypes: true });
+  for (const entry of entries) {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name !== 'node_modules' && entry.name !== 'dist' && entry.name !== 'tests') {
+        walk(path);
+      }
+      continue;
+    }
+    if (!extensions.has(path.slice(path.lastIndexOf('.')))) continue;
+
+    const source = readFileSync(path, 'utf8');
+    for (const match of source.matchAll(iconPattern)) {
+      references += 1;
+      const iconName = match[1];
+      if (availableIcons.has(iconName)) continue;
+
+      const line = source.slice(0, match.index).split('\n').length;
+      failures.push(`${relative(repoRoot, path)}:${line} — mdi:${iconName}`);
+    }
+  }
+}
+
+walk(sourceRoot);
+
+if (failures.length > 0) {
+  console.error('Invalid MDI icons found:');
+  for (const failure of failures) console.error(`- ${failure}`);
+  console.error(`Checked ${references} MDI icon references against @iconify-json/mdi.`);
+  process.exitCode = 1;
+} else {
+  console.log(`MDI icon validation passed: ${references} references checked.`);
+}

package/src/category/index.ts

@@ -2,11 +2,12 @@ import { bookPaginationAndSpineCalculator } from '../tool/book-pagination-and-sp
 import { bookInteriorMarginAndGutterPlanner } from '../tool/book-interior-margin-and-gutter-planner/entry';
 import { bookIndexPageBudgetCalculator } from '../tool/book-index-page-budget-calculator/entry';
 import { bookRoyaltyBreakEvenCalculator } from '../tool/book-royalty-break-even-calculator/entry';
+import { bookPrintSignatureCalculator } from '../tool/book-print-signature-calculator/entry';
 import type { CategoryLocaleContent, KnownLocale } from '../types';
 
 export const booksCategory = {
   icon: 'mdi:book-open-page-variant-outline',
-  tools: [bookPaginationAndSpineCalculator, bookInteriorMarginAndGutterPlanner, bookIndexPageBudgetCalculator, bookRoyaltyBreakEvenCalculator],
+  tools: [bookPaginationAndSpineCalculator, bookInteriorMarginAndGutterPlanner, bookIndexPageBudgetCalculator, bookRoyaltyBreakEvenCalculator, bookPrintSignatureCalculator],
   i18n: {
     de: () => import('./i18n/de').then((module) => module.content),
     en: () => import('./i18n/en').then((module) => module.content),

package/src/entries.ts

@@ -12,5 +12,6 @@ import { bookInteriorMarginAndGutterPlanner } from './tool/book-interior-margin-
 import { bookReadingTimeDeadlinePlanner } from './tool/book-reading-time-deadline-planner/entry';
 import { bookIndexPageBudgetCalculator } from './tool/book-index-page-budget-calculator/entry';
 import { bookRoyaltyBreakEvenCalculator } from './tool/book-royalty-break-even-calculator/entry';
+import { bookPrintSignatureCalculator } from './tool/book-print-signature-calculator/entry';
 
-export const ALL_ENTRIES = [bookPaginationAndSpineCalculator, bookInteriorMarginAndGutterPlanner, bookReadingTimeDeadlinePlanner, bookIndexPageBudgetCalculator, bookRoyaltyBreakEvenCalculator];
+export const ALL_ENTRIES = [bookPaginationAndSpineCalculator, bookInteriorMarginAndGutterPlanner, bookReadingTimeDeadlinePlanner, bookIndexPageBudgetCalculator, bookRoyaltyBreakEvenCalculator, bookPrintSignatureCalculator];

package/src/tests/locale_completeness.test.ts

@@ -18,6 +18,6 @@ describe('Locale Completeness Validation', () => {
   });
 
   it('all tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(5);
+    expect(ALL_TOOLS.length).toBe(6);
   });
 });

package/src/tests/tool_validation.test.ts

@@ -5,7 +5,7 @@ import { booksCategory } from '../data';
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
     it('should have tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(5);
+      expect(ALL_TOOLS.length).toBe(6);
     });
 
     it('booksCategory should be defined', () => {

package/src/tool/book-print-signature-calculator/bibliography.astro

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

package/src/tool/book-print-signature-calculator/bibliography.ts

@@ -0,0 +1,7 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  { name: 'ISO 216:2007. Writing paper and certain classes of printed matter', url: 'https://www.iso.org/standard/36631.html' },
+  { name: 'Library of Congress. Preserving Your Books', url: 'https://guides.loc.gov/preserving-your-books' },
+  { name: 'Bibliothèque nationale de France. Les reliures de la Réserve des Livres rares', url: 'https://www.bnf.fr/fr/les-reliures-de-la-reserve-des-livres-rares' },
+];

package/src/tool/book-print-signature-calculator/book-print-signature-calculator.css

@@ -0,0 +1,350 @@
+:root {
+  --signature-ink: #17202a;
+  --signature-muted: #68737c;
+  --signature-surface: #fff;
+  --signature-soft: #f5f1e9;
+  --signature-line: #ddd5c7;
+  --signature-accent: #8b4b35;
+  --signature-accent-soft: #f0d9ce;
+  --signature-paper: #ead7b0;
+  --signature-paper-edge: #c4a875;
+  --signature-on-accent: #fff;
+  --signature-shadow: rgba(23, 32, 42, 0.1);
+}
+
+.theme-dark {
+  --signature-ink: #f5f1e9;
+  --signature-muted: #b7c0c6;
+  --signature-surface: #1d252c;
+  --signature-soft: #273139;
+  --signature-line: #46515a;
+  --signature-accent: #e39b7c;
+  --signature-accent-soft: #4d322c;
+  --signature-paper: #80694a;
+  --signature-paper-edge: #ae8d5e;
+  --signature-on-accent: #17202a;
+  --signature-shadow: rgba(0, 0, 0, 0.28);
+}
+
+.book-signature-tool {
+  background: var(--signature-surface);
+  border: 1px solid var(--signature-line);
+  border-radius: 1.25rem;
+  box-shadow: 0 1rem 2.5rem var(--signature-shadow);
+  color: var(--signature-ink);
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(290px, 0.9fr) minmax(400px, 1.1fr);
+  padding: clamp(1.25rem, 3vw, 2.25rem);
+}
+
+.signature-editor,
+.signature-output {
+  min-width: 0;
+}
+
+.signature-output {
+  border-left: 1px solid var(--signature-line);
+  padding-left: clamp(1rem, 3vw, 2rem);
+}
+
+.signature-heading,
+.signature-output-heading {
+  margin-bottom: 1.4rem;
+}
+
+.signature-eyebrow {
+  color: var(--signature-accent);
+  font-size: 0.7rem;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.book-signature-tool h2 {
+  font-size: clamp(1.5rem, 3vw, 2.4rem);
+  letter-spacing: -0.05em;
+  line-height: 1;
+  margin: 0.45rem 0;
+}
+
+.book-signature-tool h3 {
+  font-size: 1rem;
+  margin: 0;
+}
+
+.book-signature-tool p {
+  color: var(--signature-muted);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.book-signature-tool label,
+.book-signature-tool legend {
+  display: block;
+  font-size: 0.78rem;
+  font-weight: 800;
+  margin: 0.85rem 0 0.4rem;
+}
+
+.book-signature-tool label small,
+.book-signature-tool fieldset > small {
+  color: var(--signature-muted);
+  display: block;
+  font-size: 0.7rem;
+  font-weight: 500;
+  line-height: 1.4;
+  margin-top: 0.25rem;
+}
+
+.book-signature-tool input,
+.book-signature-tool select {
+  background: var(--signature-soft);
+  border: 1px solid var(--signature-line);
+  border-radius: 0.6rem;
+  box-sizing: border-box;
+  color: var(--signature-ink);
+  font: inherit;
+  margin-top: 0.45rem;
+  padding: 0.7rem;
+  width: 100%;
+}
+
+.book-signature-tool input:focus-visible,
+.book-signature-tool select:focus-visible,
+.book-signature-tool button:focus-visible {
+  outline: 3px solid var(--signature-accent-soft);
+  outline-offset: 2px;
+}
+
+.book-signature-tool fieldset {
+  border: 0;
+  margin: 1.2rem 0 0;
+  padding: 0;
+}
+
+.signature-mode-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.book-signature-tool button {
+  background: var(--signature-soft);
+  border: 1px solid var(--signature-line);
+  border-radius: 999px;
+  color: var(--signature-ink);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.75rem;
+  font-weight: 800;
+  padding: 0.55rem 0.75rem;
+}
+
+.book-signature-tool button:hover,
+.book-signature-tool button.active {
+  border-color: var(--signature-accent);
+}
+
+.signature-primary,
+.signature-live-badge {
+  background: var(--signature-accent);
+  border-color: var(--signature-accent);
+  color: var(--signature-on-accent);
+}
+
+.signature-actions {
+  margin-top: 1.25rem;
+}
+
+.blank-pages-fieldset {
+  background: var(--signature-soft);
+  border-radius: 0.8rem;
+  padding: 0.75rem 1rem;
+}
+
+.blank-pages-fieldset legend {
+  margin-top: 0;
+}
+
+.checkbox-label {
+  align-items: flex-start;
+  display: flex;
+  gap: 0.5rem;
+  margin: 0.55rem 0 0.2rem;
+}
+
+.checkbox-label input {
+  flex: 0 0 auto;
+  margin: 0.1rem 0 0;
+  width: 1.1rem;
+}
+
+.signature-output-heading {
+  align-items: flex-start;
+  display: flex;
+  justify-content: space-between;
+}
+
+.signature-live-badge {
+  border-radius: 999px;
+  font-size: 0.62rem;
+  font-weight: 900;
+  letter-spacing: 0.1em;
+  padding: 0.4rem 0.6rem;
+}
+
+.signature-results {
+  display: grid;
+  gap: 0.55rem;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.signature-result-card {
+  background: var(--signature-soft);
+  border-radius: 0.8rem;
+  padding: 0.8rem;
+}
+
+.signature-result-card:first-child {
+  background: var(--signature-accent-soft);
+}
+
+.signature-result-card span,
+.signature-result-card small {
+  color: var(--signature-muted);
+  display: block;
+  font-size: 0.64rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.signature-result-card strong {
+  display: block;
+  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
+  margin: 0.3rem 0;
+}
+
+.signature-map-panel {
+  background: var(--signature-soft);
+  border-radius: 1rem;
+  margin-top: 1rem;
+  padding: 1rem;
+}
+
+.signature-map-panel h3 {
+  margin-bottom: 0.7rem;
+}
+
+.signature-map {
+  display: grid;
+  gap: 0.45rem;
+  grid-template-columns: repeat(2, 1fr);
+  max-height: 16rem;
+  overflow: auto;
+  padding-right: 0.25rem;
+}
+
+.signature-map-item {
+  background: var(--signature-surface);
+  border-left: 0.3rem solid var(--signature-accent);
+  border-radius: 0.55rem;
+  display: grid;
+  gap: 0.1rem;
+  padding: 0.6rem 0.7rem;
+}
+
+.signature-map-item.has-blanks {
+  border-left-color: #c27832;
+}
+
+.signature-map-item span,
+.signature-map-item small,
+.signature-map-item em {
+  color: var(--signature-muted);
+  font-size: 0.68rem;
+}
+
+.signature-map-item strong {
+  font-size: 0.76rem;
+}
+
+.signature-map-item em {
+  color: var(--signature-accent);
+  font-style: normal;
+  font-weight: 800;
+}
+
+.signature-preview {
+  align-items: center;
+  background: var(--signature-soft);
+  border-radius: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-top: 1rem;
+  min-height: 13rem;
+  overflow: hidden;
+  padding: 1rem;
+  position: relative;
+}
+
+.signature-stack {
+  height: 9rem;
+  position: relative;
+  transform: rotate(-4deg);
+  width: min(18rem, 90%);
+}
+
+.signature-sheet {
+  background: var(--signature-paper);
+  border: 1px solid var(--signature-paper-edge);
+  box-shadow: 0.35rem 0.35rem 0.5rem var(--signature-shadow);
+  height: 6rem;
+  left: var(--sheet-offset);
+  position: absolute;
+  top: var(--sheet-offset);
+  transform: rotate(var(--sheet-tilt));
+  width: 13rem;
+}
+
+.signature-fold {
+  border-left: 1px dashed var(--signature-accent);
+  border-right: 1px dashed var(--signature-accent);
+  height: 100%;
+  left: 35%;
+  opacity: 0.7;
+  position: absolute;
+  width: 30%;
+}
+
+.signature-preview p,
+.signature-source-note {
+  font-size: 0.72rem;
+  margin-top: 1rem;
+  text-align: center;
+}
+
+.signature-method-note {
+  border-left: 3px solid var(--signature-accent);
+  font-size: 0.78rem;
+  margin-top: 1rem;
+  padding-left: 0.75rem;
+}
+
+@media (max-width: 760px) {
+  .book-signature-tool {
+    grid-template-columns: 1fr;
+  }
+
+  .signature-output {
+    border-left: 0;
+    border-top: 1px solid var(--signature-line);
+    padding-left: 0;
+    padding-top: 1.5rem;
+  }
+
+  .signature-map {
+    grid-template-columns: 1fr;
+  }
+}

package/src/tool/book-print-signature-calculator/component.astro

@@ -0,0 +1,38 @@
+---
+import './book-print-signature-calculator.css';
+import type { BookPrintSignatureUI } from './ui';
+
+interface Props {
+  ui: BookPrintSignatureUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="book-signature-tool" data-ui={JSON.stringify(ui)}>
+  <div class="signature-editor">
+    <div class="signature-heading"><span class="signature-eyebrow">{ui.title}</span><h2>{ui.methodTitle}</h2><p>{ui.methodHint}</p></div>
+    <label for="interior-pages">{ui.interiorPagesLabel}<small>{ui.interiorPagesHint}</small><input id="interior-pages" type="number" min="1" max="10000" step="1" value="192" /></label>
+    <label for="pages-per-signature">{ui.pagesPerSignatureLabel}<small>{ui.pagesPerSignatureHint}</small><select id="pages-per-signature"><option value="8">8</option><option value="16" selected>16</option><option value="32">32</option></select></label>
+    <fieldset>
+      <legend>{ui.foldModeLabel}</legend>
+      <div class="signature-mode-buttons"><button type="button" data-fold-mode="saddle-stitch" aria-pressed="false">{ui.saddleStitchLabel}</button><button type="button" data-fold-mode="gathered" aria-pressed="false">{ui.gatheredLabel}</button><button type="button" data-fold-mode="perfect-bound" aria-pressed="false">{ui.perfectBoundLabel}</button></div>
+    </fieldset>
+    <fieldset class="blank-pages-fieldset">
+      <legend>{ui.blankPagesLabel}</legend>
+      <label class="checkbox-label" for="allow-blank-pages"><input id="allow-blank-pages" type="checkbox" checked /> <span data-blank-status>{ui.blankPagesAllowed}</span></label>
+      <small>{ui.blankPagesHint}</small>
+    </fieldset>
+    <div class="signature-actions"><button type="button" class="signature-primary" data-action="reset">{ui.resetLabel}</button></div>
+  </div>
+  <div class="signature-output">
+    <div class="signature-output-heading"><div><span class="signature-eyebrow">{ui.resultTitle}</span><h2>{ui.signaturesLabel}</h2></div><span class="signature-live-badge">LIVE</span></div>
+    <div id="signature-results" class="signature-results" aria-live="polite"></div>
+    <div class="signature-map-panel"><h3>{ui.signatureMapLabel}</h3><div id="signature-map" class="signature-map"></div></div>
+    <div id="signature-preview" class="signature-preview"></div>
+    <p class="signature-method-note">{ui.methodNote}</p>
+    <p class="signature-source-note">{ui.sourceLabel}</p>
+  </div>
+</div>
+
+<script src="./controller.ts"></script>

package/src/tool/book-print-signature-calculator/controller.ts

@@ -0,0 +1,71 @@
+import { calculateSignatures, STANDARD_PRESET, type FoldMode, type SignatureInputs } from './logic';
+import { renderMap, renderPreview, renderResults } from './dom-views';
+import type { BookPrintSignatureUI } from './ui';
+
+const root = document.querySelector<HTMLElement>('.book-signature-tool');
+if (!root) throw new Error('Book print signature tool root not found');
+
+const ui = JSON.parse(root.dataset.ui ?? '{}') as BookPrintSignatureUI;
+const interiorPages = root.querySelector<HTMLInputElement>('#interior-pages');
+const pagesPerSignature = root.querySelector<HTMLSelectElement>('#pages-per-signature');
+const allowBlankPages = root.querySelector<HTMLInputElement>('#allow-blank-pages');
+const blankStatus = root.querySelector<HTMLElement>('[data-blank-status]');
+const result = root.querySelector<HTMLElement>('#signature-results');
+const map = root.querySelector<HTMLElement>('#signature-map');
+const preview = root.querySelector<HTMLElement>('#signature-preview');
+const modeButtons = [...root.querySelectorAll<HTMLButtonElement>('[data-fold-mode]')];
+
+if (!interiorPages || !pagesPerSignature || !allowBlankPages || !result || !map || !preview) {
+  throw new Error('Book print signature tool controls are incomplete');
+}
+
+const interiorPagesInput = interiorPages;
+const pagesPerSignatureSelect = pagesPerSignature;
+const allowBlankPagesInput = allowBlankPages;
+const resultContainer = result;
+const mapContainer = map;
+const previewContainer = preview;
+
+let foldMode: FoldMode = STANDARD_PRESET.foldMode;
+
+function readInputs(): SignatureInputs {
+  return {
+    interiorPages: Number(interiorPagesInput.value),
+    pagesPerSignature: Number(pagesPerSignatureSelect.value),
+    foldMode,
+    allowBlankPages: allowBlankPagesInput.checked,
+  };
+}
+
+function render(): void {
+  const calculation = calculateSignatures(readInputs());
+  renderResults(resultContainer, calculation, ui);
+  renderMap(mapContainer, calculation, ui);
+  renderPreview(previewContainer, calculation, ui);
+  modeButtons.forEach((button) => {
+    const isActive = button.dataset.foldMode === foldMode;
+    button.classList.toggle('active', isActive);
+    button.setAttribute('aria-pressed', String(isActive));
+  });
+  if (blankStatus) blankStatus.textContent = allowBlankPagesInput.checked ? ui.blankPagesAllowed : ui.blankPagesNotAllowed;
+}
+
+function reset(): void {
+  interiorPagesInput.value = String(STANDARD_PRESET.interiorPages);
+  pagesPerSignatureSelect.value = String(STANDARD_PRESET.pagesPerSignature);
+  allowBlankPagesInput.checked = STANDARD_PRESET.allowBlankPages;
+  foldMode = STANDARD_PRESET.foldMode;
+  render();
+}
+
+interiorPagesInput.addEventListener('input', render);
+pagesPerSignatureSelect.addEventListener('change', render);
+allowBlankPagesInput.addEventListener('change', render);
+modeButtons.forEach((button) => button.addEventListener('click', () => {
+  const mode = button.dataset.foldMode;
+  if (mode === 'saddle-stitch' || mode === 'gathered' || mode === 'perfect-bound') foldMode = mode;
+  render();
+}));
+root.querySelector<HTMLButtonElement>('[data-action="reset"]')?.addEventListener('click', reset);
+
+render();

package/src/tool/book-print-signature-calculator/dom-views.ts

@@ -0,0 +1,70 @@
+import type { BookPrintSignatureUI } from './ui';
+import type { SignatureCalculation } from './logic';
+
+export function renderResults(container: HTMLElement, calculation: SignatureCalculation, ui: BookPrintSignatureUI): void {
+  container.replaceChildren(
+    resultCard(ui.signaturesLabel, formatNumber(calculation.signatureCount), ui.pagesPerSignatureHint.replace('{pages}', formatNumber(calculation.pagesPerSignature))),
+    resultCard(ui.plannedPagesLabel, formatNumber(calculation.plannedPages), ui.pagesLabel),
+    resultCard(ui.blankCountLabel, formatNumber(calculation.blankPages), ui.blankLabel),
+    resultCard(ui.remainderLabel, formatNumber(calculation.remainderPages), calculation.hasIncompleteSignature && calculation.blankPages === 0 ? ui.reviewLabel : ui.completeLabel),
+  );
+}
+
+export function renderMap(container: HTMLElement, calculation: SignatureCalculation, ui: BookPrintSignatureUI): void {
+  const fragment = document.createDocumentFragment();
+  calculation.ranges.forEach((range) => {
+    const item = document.createElement('div');
+    item.className = `signature-map-item${range.blankPages > 0 ? ' has-blanks' : ''}`;
+    const heading = document.createElement('strong');
+    heading.textContent = `${ui.signatureLabel} ${formatNumber(range.number)}`;
+    const rangeText = document.createElement('span');
+    rangeText.textContent = `${ui.pageRangeLabel}: ${formatNumber(range.startPage)}-${formatNumber(range.endPage)}`;
+    const pageText = document.createElement('small');
+    pageText.textContent = `${formatNumber(calculation.pagesPerSignature)} ${ui.pagesLabel}`;
+    item.append(heading, rangeText, pageText);
+    if (range.blankPages > 0) {
+      const blankText = document.createElement('em');
+      blankText.textContent = `+ ${formatNumber(range.blankPages)} ${ui.blankLabel}`;
+      item.append(blankText);
+    }
+    fragment.append(item);
+  });
+  container.replaceChildren(fragment);
+}
+
+export function renderPreview(container: HTMLElement, calculation: SignatureCalculation, ui: BookPrintSignatureUI): void {
+  const stack = document.createElement('div');
+  stack.className = 'signature-stack';
+  const visibleSheets = Math.min(6, Math.max(2, Math.ceil(calculation.signatureCount / 2)));
+  for (let index = visibleSheets - 1; index >= 0; index -= 1) {
+    const sheet = document.createElement('div');
+    sheet.className = 'signature-sheet';
+    sheet.style.setProperty('--sheet-offset', `${index * 0.35}rem`);
+    sheet.style.setProperty('--sheet-tilt', `${(index % 2 === 0 ? -1 : 1) * (index + 1)}deg`);
+    const fold = document.createElement('span');
+    fold.className = 'signature-fold';
+    fold.setAttribute('aria-hidden', 'true');
+    sheet.append(fold);
+    stack.append(sheet);
+  }
+  const caption = document.createElement('p');
+  caption.textContent = `${ui.previewLabel}: ${ui.previewHint} ${formatNumber(calculation.pagesPerSignature)} ${ui.pagesLabel}.`;
+  container.replaceChildren(stack, caption);
+}
+
+function resultCard(label: string, value: string, note: string): HTMLElement {
+  const card = document.createElement('div');
+  card.className = 'signature-result-card';
+  const labelElement = document.createElement('span');
+  labelElement.textContent = label;
+  const valueElement = document.createElement('strong');
+  valueElement.textContent = value;
+  const noteElement = document.createElement('small');
+  noteElement.textContent = note;
+  card.append(labelElement, valueElement, noteElement);
+  return card;
+}
+
+function formatNumber(value: number): string {
+  return new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(value);
+}