@jjlmoya/utils-books 1.15.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-books",
-    "version": "1.15.0",
+    "version": "1.17.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

@@ -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>