@jjlmoya/utils-books 1.16.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-books",
-    "version": "1.16.0",
+    "version": "1.17.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -3,11 +3,12 @@ import { bookInteriorMarginAndGutterPlanner } from '../tool/book-interior-margin
 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 { bookCoverBleedCalculator } from '../tool/book-cover-bleed-calculator/entry';
 import type { CategoryLocaleContent, KnownLocale } from '../types';
 
 export const booksCategory = {
   icon: 'mdi:book-open-page-variant-outline',
-  tools: [bookPaginationAndSpineCalculator, bookInteriorMarginAndGutterPlanner, bookIndexPageBudgetCalculator, bookRoyaltyBreakEvenCalculator, bookPrintSignatureCalculator],
+  tools: [bookPaginationAndSpineCalculator, bookInteriorMarginAndGutterPlanner, bookIndexPageBudgetCalculator, bookRoyaltyBreakEvenCalculator, bookPrintSignatureCalculator, bookCoverBleedCalculator],
   i18n: {
     de: () => import('./i18n/de').then((module) => module.content),
     en: () => import('./i18n/en').then((module) => module.content),

package/src/entries.ts

@@ -6,6 +6,8 @@ export { bookIndexPageBudgetCalculator } from './tool/book-index-page-budget-cal
 export type { BookIndexUI, BookIndexLocaleContent } from './tool/book-index-page-budget-calculator/entry';
 export { bookRoyaltyBreakEvenCalculator } from './tool/book-royalty-break-even-calculator/entry';
 export type { BookRoyaltyUI, BookRoyaltyLocaleContent } from './tool/book-royalty-break-even-calculator/entry';
+export { bookCoverBleedCalculator } from './tool/book-cover-bleed-calculator/entry';
+export type { BookCoverBleedUI, BookCoverBleedLocaleContent } from './tool/book-cover-bleed-calculator/entry';
 
 import { bookPaginationAndSpineCalculator } from './tool/book-pagination-and-spine-calculator/entry';
 import { bookInteriorMarginAndGutterPlanner } from './tool/book-interior-margin-and-gutter-planner/entry';
@@ -13,5 +15,6 @@ import { bookReadingTimeDeadlinePlanner } from './tool/book-reading-time-deadlin
 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 { bookCoverBleedCalculator } from './tool/book-cover-bleed-calculator/entry';
 
-export const ALL_ENTRIES = [bookPaginationAndSpineCalculator, bookInteriorMarginAndGutterPlanner, bookReadingTimeDeadlinePlanner, bookIndexPageBudgetCalculator, bookRoyaltyBreakEvenCalculator, bookPrintSignatureCalculator];
+export const ALL_ENTRIES = [bookPaginationAndSpineCalculator, bookInteriorMarginAndGutterPlanner, bookReadingTimeDeadlinePlanner, bookIndexPageBudgetCalculator, bookRoyaltyBreakEvenCalculator, bookPrintSignatureCalculator, bookCoverBleedCalculator];

package/src/tests/locale_completeness.test.ts

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

package/src/tests/mfe_assets_contract.test.ts

@@ -0,0 +1,51 @@
+import { existsSync, readdirSync, statSync } from 'node:fs';
+import { basename, join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+import { CATEGORY_OG_IMAGE, getUtilityOgImage } from '../mfe/assets';
+
+const categoryImageMatch = CATEGORY_OG_IMAGE.match(
+  /^(\/_utilities\/[^/]+\/images)\/([^/]+\.webp)\?version=(.+)$/,
+);
+
+if (!categoryImageMatch) {
+  throw new Error(`Unexpected CATEGORY_OG_IMAGE format: ${CATEGORY_OG_IMAGE}`);
+}
+
+const [, imageUrlRoot, categoryImage, assetVersion] = categoryImageMatch;
+if (!imageUrlRoot || !categoryImage || !assetVersion) {
+  throw new Error(`Unexpected CATEGORY_OG_IMAGE captures: ${CATEGORY_OG_IMAGE}`);
+}
+const assetRoot = join(process.cwd(), 'public', imageUrlRoot.slice(1));
+const categorySlug = basename(categoryImage, '.webp');
+
+describe('MFE asset contract', () => {
+  it('has one non-empty English-slug OG image per category and registered tool', async () => {
+    const expectedSlugs = new Set([categorySlug]);
+
+    for (const { entry } of ALL_TOOLS) {
+      const englishLoader = entry.i18n.en;
+      if (!englishLoader) throw new Error(`Missing English locale for ${entry.id}`);
+
+      const englishContent = await englishLoader();
+      expectedSlugs.add(englishContent.slug);
+    }
+
+    const actualSlugs = new Set(
+      readdirSync(assetRoot)
+        .filter((filename) => filename.endsWith('.webp'))
+        .map((filename) => filename.slice(0, -'.webp'.length)),
+    );
+
+    expect(actualSlugs).toEqual(expectedSlugs);
+
+    for (const slug of expectedSlugs) {
+      const imagePath = join(assetRoot, `${slug}.webp`);
+      expect(existsSync(imagePath), `${imagePath} should exist`).toBe(true);
+      expect(statSync(imagePath).size, `${imagePath} should not be empty`).toBeGreaterThan(0);
+      expect(getUtilityOgImage(slug)).toBe(
+        `${imageUrlRoot}/${slug}.webp?version=${assetVersion}`,
+      );
+    }
+  }, 30000);
+});

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(6);
+      expect(ALL_TOOLS.length).toBe(7);
     });
 
     it('booksCategory should be defined', () => {

package/src/tool/book-cover-bleed-calculator/bibliography.astro

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

package/src/tool/book-cover-bleed-calculator/bibliography.ts

@@ -0,0 +1,15 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  { name: 'Amazon KDP. Create a Paperback Cover', url: 'https://kdp.amazon.com/en_US/help/topic/G201953020' },
+  { name: 'Pixartprinting. Cómo preparar correctamente la cubierta de un libro', url: 'https://support.pixartprinting.com/hc/es/articles/27577189469586-C%C3%B3mo-preparar-correctamente-la-cubierta-de-un-libro' },
+  { name: 'IngramSpark. File Creation Guide', url: 'https://www.ingramspark.com/hubfs/downloads/file-creation-guide.pdf?t=1540849595582' },
+];
+
+const [kdp, pixartprinting, ingramspark] = bibliography;
+
+export const bibliographyTraceability = [
+  { url: kdp!.url, region: 'United States', language: 'English', supports: 'The unfolded cover equation and the 0.125 inch bleed example.' },
+  { url: pixartprinting!.url, region: 'Spain', language: 'Spanish', supports: 'The distinction between bleed, trim, and fold lines in a printer cover template.' },
+  { url: ingramspark!.url, region: 'International printing', language: 'English', supports: 'Spine safety and bleed handling for a perfect bound cover file.' },
+];

package/src/tool/book-cover-bleed-calculator/book-cover-bleed-calculator.css

@@ -0,0 +1,362 @@
+:root {
+  --n-global-paper: #fffdf8;
+  --n-global-surface: #f2ede2;
+  --n-global-ink: #24231f;
+  --n-global-muted: #746f63;
+  --n-global-line: #d4cabb;
+  --n-global-accent: #bb4f32;
+  --n-global-accent-soft: #f1d4c9;
+  --n-global-blue: #4e7182;
+  --n-global-green: #58745e;
+  --n-global-warning: #a86828;
+}
+
+.theme-dark {
+  --n-global-paper: #17191b;
+  --n-global-surface: #232629;
+  --n-global-ink: #f4efe4;
+  --n-global-muted: #b9b1a3;
+  --n-global-line: #4b4e4d;
+  --n-global-accent: #ef8566;
+  --n-global-accent-soft: #653629;
+  --n-global-blue: #82aab8;
+  --n-global-green: #98bc9c;
+  --n-global-warning: #e4a45e;
+}
+
+.book-cover-bleed-tool {
+  --n-paper: var(--n-global-paper);
+  --n-surface: var(--n-global-surface);
+  --n-ink: var(--n-global-ink);
+  --n-muted: var(--n-global-muted);
+  --n-line: var(--n-global-line);
+  --n-accent: var(--n-global-accent);
+  --n-accent-soft: var(--n-global-accent-soft);
+  --n-blue: var(--n-global-blue);
+  --n-green: var(--n-global-green);
+  --n-warning: var(--n-global-warning);
+
+  color: var(--n-ink);
+}
+
+.n-cover-workbench {
+  display: grid;
+  grid-template-columns: minmax(16rem, 0.78fr) minmax(24rem, 1.5fr);
+  min-height: 35rem;
+  overflow: hidden;
+  border: 1px solid var(--n-line);
+  background: var(--n-paper);
+}
+
+.n-cover-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+  padding: 1.5rem;
+  border-right: 1px solid var(--n-line);
+  background: var(--n-surface);
+}
+
+.n-control-line {
+  display: grid;
+  gap: 0.7rem;
+}
+
+.n-preset-strip,
+.n-unit-switch {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.n-overline {
+  color: var(--n-muted);
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.n-preset,
+.n-unit-switch button,
+.n-copy {
+  min-height: 2.5rem;
+  padding: 0.6rem 0.8rem;
+  border: 1px solid var(--n-line);
+  border-radius: 0.35rem;
+  background: var(--n-paper);
+  color: var(--n-ink);
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.n-preset:hover,
+.n-unit-switch button:hover,
+.n-copy:hover,
+.n-preset:focus-visible,
+.n-unit-switch button:focus-visible,
+.n-copy:focus-visible {
+  border-color: var(--n-accent);
+}
+
+.n-unit-switch button[aria-pressed="true"],
+.n-preset[aria-pressed="true"] {
+  border-color: var(--n-accent);
+  background: var(--n-accent-soft);
+  color: var(--n-accent);
+}
+
+.n-field-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.n-field {
+  display: grid;
+  gap: 0.4rem;
+  color: var(--n-muted);
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+
+.n-input-wrap {
+  display: flex;
+  align-items: center;
+  min-height: 3rem;
+  border: 1px solid var(--n-line);
+  border-radius: 0.25rem;
+  background: var(--n-paper);
+}
+
+.n-input-wrap:focus-within {
+  border-color: var(--n-accent);
+  outline: 2px solid var(--n-accent-soft);
+  outline-offset: 2px;
+}
+
+.n-input-wrap input {
+  width: 100%;
+  min-width: 0;
+  padding: 0.7rem 0.75rem;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--n-ink);
+  font: inherit;
+  font-size: 1.05rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.n-input-wrap b {
+  padding: 0 0.75rem 0 0.2rem;
+  color: var(--n-muted);
+  font-size: 0.76rem;
+  white-space: nowrap;
+}
+
+.n-assumption {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  margin: auto 0 0;
+  padding-top: 1rem;
+  border-top: 1px solid var(--n-line);
+  color: var(--n-muted);
+  font-size: 0.75rem;
+}
+
+.n-assumption strong {
+  color: var(--n-ink);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.n-cover-proof {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: 1.5rem;
+}
+
+.n-proof-heading,
+.n-measure-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.n-proof-heading > div {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.n-proof-heading strong {
+  color: var(--n-accent);
+  font-size: clamp(1.6rem, 4vw, 2.65rem);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.n-copy {
+  border-color: var(--n-accent);
+  color: var(--n-accent);
+}
+
+.n-proof-stage {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-height: 20rem;
+  padding: 1rem 0;
+}
+
+.n-proof-svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  overflow: visible;
+}
+
+.n-proof-bleed {
+  fill: var(--n-accent-soft);
+}
+
+.n-proof-back,
+.n-proof-front {
+  fill: var(--n-paper);
+  stroke: var(--n-line);
+  stroke-width: 1;
+}
+
+.n-proof-spine {
+  fill: var(--n-blue);
+}
+
+.n-proof-safe {
+  fill: none;
+  stroke: var(--n-green);
+  stroke-dasharray: 5 5;
+  stroke-width: 2;
+}
+
+.n-proof-trim-line,
+.n-proof-fold-line,
+.n-proof-measure-line {
+  stroke: var(--n-ink);
+  stroke-width: 1;
+}
+
+.n-proof-fold-line {
+  stroke: var(--n-blue);
+  stroke-dasharray: 4 4;
+}
+
+.n-proof-label,
+.n-proof-spine-label,
+.n-proof-caption,
+.n-proof-measure {
+  fill: var(--n-ink);
+  font-size: 14px;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.n-proof-spine-label {
+  fill: var(--n-paper);
+  font-size: 11px;
+}
+
+.n-proof-caption {
+  fill: var(--n-muted);
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.n-proof-measure {
+  font-size: 16px;
+  font-variant-numeric: tabular-nums;
+  text-transform: none;
+}
+
+.n-measure-row {
+  border-top: 1px solid var(--n-line);
+  border-bottom: 1px solid var(--n-line);
+}
+
+.n-measure-row > div {
+  display: grid;
+  flex: 1;
+  gap: 0.4rem;
+  padding: 0.85rem 0.75rem;
+}
+
+.n-measure-row > div + div {
+  border-left: 1px solid var(--n-line);
+}
+
+.n-measure-row span {
+  color: var(--n-muted);
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.n-measure-row strong {
+  color: var(--n-ink);
+  font-size: 1.1rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.n-proof-status {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: baseline;
+  padding-top: 0.85rem;
+  color: var(--n-muted);
+  font-size: 0.78rem;
+}
+
+.n-proof-status strong {
+  color: var(--n-green);
+}
+
+.n-proof-status[data-tone="attention"] strong {
+  color: var(--n-warning);
+}
+
+.n-copy-status {
+  min-height: 1.1rem;
+  color: var(--n-accent);
+  font-size: 0.75rem;
+  text-align: right;
+}
+
+@media (max-width: 760px) {
+  .n-cover-workbench {
+    grid-template-columns: 1fr;
+  }
+
+  .n-cover-controls {
+    border-right: 0;
+    border-bottom: 1px solid var(--n-line);
+  }
+
+  .n-proof-stage {
+    min-height: 14rem;
+  }
+
+  .n-measure-row {
+    flex-direction: column;
+  }
+
+  .n-measure-row > div + div {
+    border-top: 1px solid var(--n-line);
+    border-left: 0;
+  }
+}

package/src/tool/book-cover-bleed-calculator/component.astro

@@ -0,0 +1,80 @@
+---
+import type { BookCoverBleedUI } from './ui';
+
+interface Props {
+  ui: BookCoverBleedUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="book-cover-bleed-tool" data-book-cover-tool>
+  <div class="n-cover-workbench">
+    <section class="n-cover-controls" aria-label={ui.presetLabel}>
+      <div class="n-control-line n-preset-line">
+        <span class="n-overline">{ui.presetLabel}</span>
+        <div class="n-preset-strip" role="group" aria-label={ui.presetLabel}>
+          <button type="button" class="n-preset" data-preset="trade" aria-pressed="true">{ui.tradePreset}</button>
+          <button type="button" class="n-preset" data-preset="a5" aria-pressed="false">{ui.a5Preset}</button>
+          <button type="button" class="n-preset" data-preset="digest" aria-pressed="false">{ui.digestPreset}</button>
+        </div>
+      </div>
+      <div class="n-control-line n-unit-line">
+        <span class="n-overline">{ui.unitLabel}</span>
+        <div class="n-unit-switch" role="group" aria-label={ui.unitLabel}>
+          <button type="button" data-unit="metric" aria-pressed="true">{ui.metricLabel}</button>
+          <button type="button" data-unit="imperial" aria-pressed="false">{ui.imperialLabel}</button>
+        </div>
+      </div>
+      <div class="n-field-grid">
+        <label class="n-field">
+          <span>{ui.trimWidthLabel}</span>
+          <span class="n-input-wrap"><input data-input="trim-width" type="number" min="1" step="0.1" inputmode="decimal" /><b data-unit-suffix>mm</b></span>
+        </label>
+        <label class="n-field">
+          <span>{ui.trimHeightLabel}</span>
+          <span class="n-input-wrap"><input data-input="trim-height" type="number" min="1" step="0.1" inputmode="decimal" /><b data-unit-suffix>mm</b></span>
+        </label>
+        <label class="n-field">
+          <span>{ui.pageCountLabel}</span>
+          <span class="n-input-wrap"><input data-input="page-count" type="number" min="1" step="1" inputmode="numeric" /><b>pages</b></span>
+        </label>
+        <label class="n-field">
+          <span>{ui.pageThicknessLabel}</span>
+          <span class="n-input-wrap"><input data-input="page-thickness" type="number" min="0.0001" step="0.0001" inputmode="decimal" /><b data-unit-suffix>mm</b></span>
+        </label>
+        <label class="n-field n-field-wide">
+          <span>{ui.bleedLabel}</span>
+          <span class="n-input-wrap"><input data-input="bleed" type="number" min="0" step="0.1" inputmode="decimal" /><b data-unit-suffix>mm</b></span>
+        </label>
+      </div>
+      <p class="n-assumption"><span>{ui.spineSafetyLabel}</span><strong>1.6 <span data-unit-suffix>mm</span></strong></p>
+    </section>
+    <section class="n-cover-proof" aria-live="polite">
+      <div class="n-proof-heading">
+        <div>
+          <span class="n-overline">{ui.spineAreaLabel}</span>
+          <strong data-result="spine">0 mm</strong>
+        </div>
+        <button class="n-copy" type="button" data-copy>{ui.copyLabel}</button>
+      </div>
+      <div class="n-proof-stage" data-cover-proof></div>
+      <div class="n-measure-row">
+        <div><span>{ui.fullWidthLabel}</span><strong data-result="width">0 mm</strong></div>
+        <div><span>{ui.fullHeightLabel}</span><strong data-result="height">0 mm</strong></div>
+        <div><span>{ui.safeSpineLabel}</span><strong data-result="safe">0 mm</strong></div>
+      </div>
+      <div class="n-proof-status" data-status data-tone="ready"><strong data-status-label>{ui.readyLabel}</strong><span data-status-detail>{ui.readyDetail}</span></div>
+      <span class="n-copy-status" data-copy-status role="status"></span>
+    </section>
+  </div>
+</div>
+
+<script is:inline type="application/json" data-book-cover-config set:html={JSON.stringify(ui)}></script>
+<script>
+  import { mountBookCoverCalculator } from './controller';
+
+  const config = document.querySelector<HTMLScriptElement>('[data-book-cover-config]');
+  const root = document.querySelector<HTMLElement>('[data-book-cover-tool]');
+  if (config && root) mountBookCoverCalculator(root, JSON.parse(config.textContent ?? '{}'));
+</script>

package/src/tool/book-cover-bleed-calculator/controller.ts

@@ -0,0 +1,91 @@
+import { calculateCover, DEFAULT_INPUTS, fromMillimetres, normalizeInputs, PRESETS, toMillimetres, type CoverInputs, type UnitSystem, unitSuffix } from './logic';
+import { renderCoverProof } from './dom-views';
+import { evaluateCover } from './evaluator';
+import { loadStoredState, saveStoredState } from './storage';
+import type { BookCoverBleedUI } from './ui';
+
+interface ControllerState {
+  inputs: CoverInputs;
+  unit: UnitSystem;
+}
+
+function numericInput(root: HTMLElement, name: string): HTMLInputElement {
+  return root.querySelector<HTMLInputElement>(`[data-input="${name}"]`)!;
+}
+
+function readInputs(root: HTMLElement, unit: UnitSystem): CoverInputs {
+  return normalizeInputs({
+    trimWidthMm: toMillimetres(Number(numericInput(root, 'trim-width').value), unit),
+    trimHeightMm: toMillimetres(Number(numericInput(root, 'trim-height').value), unit),
+    pageCount: Number(numericInput(root, 'page-count').value),
+    pageThicknessMm: toMillimetres(Number(numericInput(root, 'page-thickness').value), unit),
+    bleedMm: toMillimetres(Number(numericInput(root, 'bleed').value), unit),
+  });
+}
+
+function setInputValues(root: HTMLElement, inputs: CoverInputs, unit: UnitSystem): void {
+  const values: Record<string, number> = {
+    'trim-width': fromMillimetres(inputs.trimWidthMm, unit),
+    'trim-height': fromMillimetres(inputs.trimHeightMm, unit),
+    'page-count': inputs.pageCount,
+    'page-thickness': fromMillimetres(inputs.pageThicknessMm, unit),
+    bleed: fromMillimetres(inputs.bleedMm, unit),
+  };
+  Object.entries(values).forEach(([name, value]) => { numericInput(root, name).value = value.toFixed(inputPrecision(name, unit)); });
+}
+
+function inputPrecision(name: string, unit: UnitSystem): number {
+  if (name === 'page-count') return 0;
+  if (name === 'page-thickness') return unit === 'metric' ? 4 : 5;
+  return unit === 'metric' ? 1 : 3;
+}
+
+function updateUnitButtons(root: HTMLElement, unit: UnitSystem): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-unit]').forEach((button) => { button.setAttribute('aria-pressed', String(button.dataset.unit === unit)); });
+  root.querySelectorAll<HTMLElement>('[data-unit-suffix]').forEach((element) => { element.textContent = unitSuffix(unit); });
+}
+
+function updatePresetButtons(root: HTMLElement, activePreset: string): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-preset]').forEach((button) => { button.setAttribute('aria-pressed', String(button.dataset.preset === activePreset)); });
+}
+
+function updateResults(root: HTMLElement, state: ControllerState, ui: BookCoverBleedUI): void {
+  const result = calculateCover(state.inputs);
+  const evaluation = evaluateCover(result, state.inputs, ui);
+  const values: Record<string, string> = {
+    spine: `${fromMillimetres(result.spineMm, state.unit).toFixed(state.unit === 'metric' ? 1 : 2)} ${unitSuffix(state.unit)}`,
+    width: `${fromMillimetres(result.fullWidthMm, state.unit).toFixed(state.unit === 'metric' ? 1 : 2)} ${unitSuffix(state.unit)}`,
+    height: `${fromMillimetres(result.fullHeightMm, state.unit).toFixed(state.unit === 'metric' ? 1 : 2)} ${unitSuffix(state.unit)}`,
+    safe: `${fromMillimetres(result.safeSpineMm, state.unit).toFixed(state.unit === 'metric' ? 1 : 2)} ${unitSuffix(state.unit)}`,
+  };
+  Object.entries(values).forEach(([key, value]) => { root.querySelector<HTMLElement>(`[data-result="${key}"]`)!.textContent = value; });
+  const status = root.querySelector<HTMLElement>('[data-status]')!;
+  status.dataset.tone = evaluation.tone;
+  status.querySelector('[data-status-label]')!.textContent = evaluation.label;
+  status.querySelector('[data-status-detail]')!.textContent = evaluation.detail;
+  renderCoverProof({ container: root.querySelector<HTMLElement>('[data-cover-proof]')!, result, inputs: state.inputs, unit: state.unit, ui });
+}
+
+function copyResult(root: HTMLElement, state: ControllerState, ui: BookCoverBleedUI): void {
+  const result = calculateCover(state.inputs);
+  const unit = unitSuffix(state.unit);
+  const text = `${ui.fullWidthLabel}: ${fromMillimetres(result.fullWidthMm, state.unit).toFixed(2)} ${unit}; ${ui.fullHeightLabel}: ${fromMillimetres(result.fullHeightMm, state.unit).toFixed(2)} ${unit}; ${ui.spineLabel}: ${fromMillimetres(result.spineMm, state.unit).toFixed(2)} ${unit}`;
+  const status = root.querySelector<HTMLElement>('[data-copy-status]')!;
+  navigator.clipboard?.writeText(text).then(() => { status.textContent = ui.copiedLabel; }).catch(() => { status.textContent = text; });
+}
+
+export function mountBookCoverCalculator(root: HTMLElement, ui: BookCoverBleedUI): void {
+  if (root.dataset.mounted === 'true') return;
+  root.dataset.mounted = 'true';
+  const stored = loadStoredState();
+  const state: ControllerState = { inputs: normalizeInputs(stored.inputs ?? {}), unit: stored.unit === 'imperial' ? 'imperial' : 'metric' };
+  const refresh = (activePreset = ''): void => { state.inputs = readInputs(root, state.unit); updatePresetButtons(root, activePreset); saveStoredState(state); updateResults(root, state, ui); };
+  setInputValues(root, state.inputs, state.unit);
+  updateUnitButtons(root, state.unit);
+  updatePresetButtons(root, stored.inputs ? '' : 'trade');
+  root.querySelectorAll<HTMLInputElement>('[data-input]').forEach((input) => input.addEventListener('input', () => refresh()));
+  root.querySelectorAll<HTMLButtonElement>('[data-unit]').forEach((button) => button.addEventListener('click', () => { state.inputs = readInputs(root, state.unit); state.unit = button.dataset.unit === 'imperial' ? 'imperial' : 'metric'; setInputValues(root, state.inputs, state.unit); updateUnitButtons(root, state.unit); saveStoredState(state); updateResults(root, state, ui); }));
+  root.querySelectorAll<HTMLButtonElement>('[data-preset]').forEach((button) => button.addEventListener('click', () => { const preset = button.dataset.preset ?? 'trade'; state.inputs = normalizeInputs(PRESETS[preset] ?? DEFAULT_INPUTS); setInputValues(root, state.inputs, state.unit); refresh(preset); }));
+  root.querySelector<HTMLButtonElement>('[data-copy]')?.addEventListener('click', () => copyResult(root, state, ui));
+  updateResults(root, state, ui);
+}