@jjlmoya/utils-books 1.13.0 → 1.15.0

package/src/tool/book-royalty-break-even-calculator/book-royalty-break-even-calculator.css

@@ -0,0 +1,449 @@
+.royalty-tool {
+  --ink: #17354a;
+  --muted: #5a6d70;
+  --paper: #fffaf0;
+  --teal: #3c8584;
+  --coral: #e56c4c;
+  --gold: #d49a2a;
+  --white: #fff;
+  --positive: #286f60;
+  --negative: #b34934;
+
+  color: var(--ink);
+}
+
+.royalty-workbench {
+  display: grid;
+  gap: 1.1rem;
+  max-width: 1120px;
+  margin: 0 auto;
+}
+
+.royalty-summary,
+.input-panel,
+.scene-panel,
+.scenario-panel {
+  border: 1px solid rgba(23, 53, 74, 0.18);
+  border-radius: 18px;
+  background: var(--paper);
+  box-shadow: 0 8px 20px rgba(23, 53, 74, 0.06);
+}
+
+.royalty-summary {
+  padding: clamp(1rem, 3vw, 1.7rem);
+  background: linear-gradient(135deg, #fffaf0, #f8edd9);
+}
+
+.summary-heading,
+.panel-header,
+.scene-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.eyebrow {
+  display: block;
+  color: var(--teal);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+}
+
+.summary-heading h2 {
+  margin: 0.3rem 0 0;
+  font-size: clamp(1.5rem, 4vw, 2.5rem);
+  line-height: 1.05;
+}
+
+.status-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.55rem 0.75rem;
+  border-radius: 999px;
+  background: rgba(60, 133, 132, 0.12);
+  font-size: 0.85rem;
+}
+
+.status-dot {
+  width: 0.65rem;
+  height: 0.65rem;
+  border-radius: 50%;
+  background: var(--teal);
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr 1fr;
+  gap: 0.7rem;
+  margin-top: 1.25rem;
+}
+
+.summary-stat {
+  display: grid;
+  gap: 0.25rem;
+  padding: 0.85rem;
+  border-top: 3px solid var(--gold);
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.summary-stat-primary {
+  border-color: var(--coral);
+}
+
+.summary-stat span,
+.summary-stat small,
+.scene-reading span {
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.summary-stat strong {
+  font-size: clamp(1.25rem, 3vw, 1.75rem);
+}
+
+.status-explanation,
+.source-note {
+  margin: 1rem 0 0;
+  color: var(--muted);
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.royalty-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
+  gap: 1.1rem;
+}
+
+.input-panel,
+.scene-panel,
+.scenario-panel {
+  padding: clamp(1rem, 2.5vw, 1.45rem);
+}
+
+.preset-row,
+.mode-switch {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+}
+
+button,
+input,
+select {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+  border: 1px solid rgba(23, 53, 74, 0.25);
+  border-radius: 9px;
+  padding: 0.55rem 0.75rem;
+  color: var(--ink);
+  background: #fffdf6;
+}
+
+button:hover,
+button:focus-visible {
+  border-color: var(--teal);
+}
+
+button:focus-visible,
+input:focus-visible,
+select:focus-visible {
+  outline: 3px solid rgba(229, 108, 76, 0.35);
+  outline-offset: 2px;
+}
+
+button[aria-pressed="true"] {
+  color: var(--white);
+  border-color: var(--teal);
+  background: var(--teal);
+}
+
+.fields-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem 0.8rem;
+  margin-top: 1.2rem;
+}
+
+.field {
+  display: grid;
+  align-content: start;
+  gap: 0.35rem;
+}
+
+.field-wide {
+  grid-column: span 2;
+}
+
+.field label,
+fieldset legend {
+  font-size: 0.88rem;
+  font-weight: 700;
+}
+
+.field input,
+.field select {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid rgba(23, 53, 74, 0.26);
+  border-radius: 8px;
+  padding: 0.65rem 0.7rem;
+  color: var(--ink);
+  background: #fffdf8;
+}
+
+.field span {
+  color: var(--muted);
+  font-size: 0.75rem;
+  line-height: 1.3;
+}
+
+fieldset {
+  min-width: 0;
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
+fieldset legend {
+  padding: 0;
+  margin-bottom: 0.4rem;
+}
+
+.mode-switch button {
+  flex: 1;
+}
+
+.scene-panel {
+  overflow: hidden;
+  background: #eef4e9;
+}
+
+.scene-title {
+  align-items: start;
+  flex-direction: column;
+}
+
+.scene-title strong {
+  font-size: 1.15rem;
+}
+
+.balance-scene {
+  position: relative;
+  padding: 3rem 0.5rem 1rem;
+}
+
+.scene-axis {
+  display: flex;
+  justify-content: space-between;
+  color: var(--muted);
+  font-size: 0.75rem;
+}
+
+.scene-track {
+  position: relative;
+  height: 10rem;
+  margin: 0.25rem 0 1rem;
+  border-bottom: 2px solid var(--ink);
+  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), rgba(23, 53, 74, 0.12) 10%);
+}
+
+.scene-track::before {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 62%;
+  background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(60, 133, 132, 0.08) 10px 12px);
+  content: '';
+  clip-path: polygon(0 100%, 100% 0, 100% 100%);
+}
+
+.scene-fill {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: var(--fill-width, 0%);
+  height: 8px;
+  border-radius: 99px;
+  background: var(--coral);
+}
+
+.scene-marker {
+  position: absolute;
+  bottom: -8px;
+  left: var(--marker-position, 0%);
+  z-index: 1;
+  width: 16px;
+  height: 16px;
+  border: 3px solid var(--paper);
+  border-radius: 50%;
+  background: var(--teal);
+  box-shadow: 0 0 0 2px var(--teal);
+  transform: translateX(-50%);
+}
+
+.marker-target {
+  background: var(--coral);
+  box-shadow: 0 0 0 2px var(--coral);
+}
+
+.scene-legend {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.legend-dot {
+  display: inline-block;
+  width: 0.65rem;
+  height: 0.65rem;
+  margin-right: 0.25rem;
+  border-radius: 50%;
+  background: var(--teal);
+}
+
+.legend-margin {
+  background: var(--coral);
+}
+
+.scene-reading {
+  display: grid;
+  grid-template-columns: auto 1fr auto 1fr;
+  gap: 0.3rem 0.7rem;
+  align-items: baseline;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(23, 53, 74, 0.16);
+}
+
+.scene-reading strong {
+  font-size: 1.1rem;
+}
+
+.scenario-panel {
+  background: var(--paper);
+}
+
+.scenario-note {
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
+.scenario-table-wrap {
+  overflow-x: auto;
+  margin-top: 0.85rem;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.88rem;
+}
+
+th,
+td {
+  padding: 0.7rem 0.45rem;
+  border-bottom: 1px solid rgba(23, 53, 74, 0.14);
+  text-align: left;
+  white-space: nowrap;
+}
+
+thead th {
+  color: var(--muted);
+  font-size: 0.74rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.positive {
+  color: var(--positive);
+  font-weight: 700;
+}
+
+.negative {
+  color: var(--negative);
+  font-weight: 700;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (max-width: 760px) {
+  .royalty-layout,
+  .summary-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .summary-heading {
+    align-items: start;
+    flex-direction: column;
+  }
+
+  .fields-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .field-wide {
+    grid-column: auto;
+  }
+
+  .scene-reading {
+    grid-template-columns: auto 1fr;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .royalty-tool {
+    --ink: #e9e1d0;
+    --muted: #b5c2bc;
+    --paper: #1c2a2e;
+    --white: #fff;
+  }
+
+  .royalty-summary,
+  .input-panel,
+  .scene-panel,
+  .scenario-panel {
+    border-color: rgba(233, 225, 208, 0.2);
+    background: #203236;
+  }
+
+  .royalty-summary {
+    background: linear-gradient(135deg, #203236, #29363a);
+  }
+
+  button,
+  .field input,
+  .field select {
+    color: var(--ink);
+    border-color: rgba(233, 225, 208, 0.3);
+    background: #273b3d;
+  }
+
+  button[aria-pressed="true"] {
+    color: var(--white);
+    background: var(--teal);
+  }
+
+  .scene-panel {
+    background: #263d3b;
+  }
+}

package/src/tool/book-royalty-break-even-calculator/component.astro

@@ -0,0 +1,66 @@
+---
+import { calculateBookRoyaltyBreakEven, DEFAULT_ROYALTY_INPUTS } from './logic';
+import type { BookRoyaltyUI } from './ui';
+
+interface Props { ui: BookRoyaltyUI }
+const { ui } = Astro.props as Props;
+const initialResult = calculateBookRoyaltyBreakEven(DEFAULT_ROYALTY_INPUTS);
+const initialCurrency = new Intl.NumberFormat('en-US', { style: 'currency', currency: DEFAULT_ROYALTY_INPUTS.currency, maximumFractionDigits: 2 }).format;
+const money = (value: number | null): string => value === null ? ui.unreachableLabel : initialCurrency(value);
+---
+
+<div class="royalty-tool" data-book-royalty-tool data-ui={JSON.stringify(ui)} data-status={initialResult.marginPerCopy > 0 ? 'profitable' : 'unprofitable'}>
+  <form class="royalty-workbench" data-form>
+    <section class="royalty-summary" aria-label={ui.breakEvenLabel}>
+      <div class="summary-heading">
+        <div>
+          <span class="eyebrow">{ui.breakEvenLabel}</span>
+          <h2 data-output="headline">{initialResult.breakEvenCopies?.toLocaleString('en-US') ?? ui.unreachableLabel} {ui.copiesLabel}</h2>
+        </div>
+        <div class="status-chip" data-status-line><span class="status-dot"></span><strong data-output="status">{ui.statusProfitable}</strong></div>
+      </div>
+      <div class="summary-grid">
+        <div class="summary-stat summary-stat-primary"><span>{ui.breakEvenHint}</span><strong data-output="break-even">{initialResult.breakEvenCopies?.toLocaleString('en-US') ?? ui.unreachableLabel}</strong><small>{ui.copiesLabel}</small></div>
+        <div class="summary-stat"><span>{ui.targetLabel}</span><strong data-output="target">{initialResult.targetCopies?.toLocaleString('en-US') ?? ui.unreachableLabel}</strong><small>{ui.targetHint}</small></div>
+        <div class="summary-stat"><span>{ui.marginLabel}</span><strong data-output="margin">{money(initialResult.marginPerCopy)}</strong><small>{ui.marginHint}</small></div>
+      </div>
+      <p class="status-explanation" data-output="status-hint">{ui.statusProfitableHint}</p>
+    </section>
+
+    <div class="royalty-layout">
+      <section class="input-panel" aria-label={ui.presetLabel}>
+        <div class="panel-header"><span class="eyebrow">{ui.presetLabel}</span><div class="preset-row"><button type="button" data-preset="ebook">{ui.ebookPreset}</button><button type="button" data-preset="paperback">{ui.paperbackPreset}</button></div></div>
+        <div class="fields-grid">
+          <div class="field field-wide"><label for="fixed-costs">{ui.fixedCostsLabel}</label><input id="fixed-costs" data-input="fixedCosts" type="number" min="0" max="1000000" step="10" value={DEFAULT_ROYALTY_INPUTS.fixedCosts} inputmode="decimal" /><span>{ui.fixedCostsHint}</span></div>
+          <div class="field"><label for="sale-price">{ui.salePriceLabel}</label><input id="sale-price" data-input="salePrice" type="number" min="0" max="10000" step="0.01" value={DEFAULT_ROYALTY_INPUTS.salePrice} inputmode="decimal" /><span>{ui.salePriceHint}</span></div>
+          <div class="field"><label for="variable-cost">{ui.variableCostLabel}</label><input id="variable-cost" data-input="variableCost" type="number" min="0" max="10000" step="0.01" value={DEFAULT_ROYALTY_INPUTS.variableCost} inputmode="decimal" /><span>{ui.variableCostHint}</span></div>
+          <div class="field field-wide"><fieldset><legend>{ui.royaltyModeLabel}</legend><div class="mode-switch"><button type="button" data-mode="percent" aria-pressed="true">{ui.royaltyPercentLabel}</button><button type="button" data-mode="per-copy" aria-pressed="false">{ui.royaltyAmountLabel}</button></div></fieldset><label for="royalty-value" class="visually-hidden">{ui.royaltyModeLabel}</label><input id="royalty-value" data-input="royaltyValue" type="number" min="0" max="10000" step="0.01" value={DEFAULT_ROYALTY_INPUTS.royaltyValue} inputmode="decimal" /><span>{ui.royaltyHint}</span></div>
+          <div class="field"><label for="target-profit">{ui.targetProfitLabel}</label><input id="target-profit" data-input="targetProfit" type="number" min="0" max="1000000" step="10" value={DEFAULT_ROYALTY_INPUTS.targetProfit} inputmode="decimal" /><span>{ui.targetProfitHint}</span></div>
+          <div class="field"><label for="currency">{ui.currencyLabel}</label><select id="currency" data-input="currency"><option value="USD">USD</option><option value="EUR">EUR</option><option value="GBP">GBP</option></select></div>
+        </div>
+      </section>
+
+      <section class="scene-panel" aria-label={ui.sceneLabel} data-scene>
+        <div class="scene-title"><span class="eyebrow">{ui.sceneLabel}</span><strong data-output="scene-caption">{ui.sceneCaption}</strong></div>
+        <div class="balance-scene">
+          <div class="scene-axis"><span class="axis-zero">0</span><span class="axis-break" data-output="scene-break-label">{initialResult.breakEvenCopies?.toLocaleString('en-US') ?? '∞'}</span><span class="axis-target" data-output="scene-target-label">{initialResult.targetCopies?.toLocaleString('en-US') ?? '∞'}</span></div>
+          <div class="scene-track"><span class="scene-fill" data-scene-fill></span><span class="scene-marker marker-break" data-scene-marker="break"></span><span class="scene-marker marker-target" data-scene-marker="target"></span></div>
+          <div class="scene-legend"><span><i class="legend-dot legend-fixed"></i>{ui.fixedCostsOutputLabel}</span><span><i class="legend-dot legend-margin"></i>{ui.marginLabel}</span></div>
+        </div>
+        <div class="scene-reading"><strong data-output="revenue-break-even">{money(initialResult.revenueAtBreakEven)}</strong><span>{ui.revenueAtBreakEvenLabel}</span><strong data-output="royalty-per-copy">{money(initialResult.royaltyPerCopy)}</strong><span>{ui.royaltyPerCopyLabel}</span></div>
+      </section>
+    </div>
+
+    <section class="scenario-panel" aria-label={ui.scenarioLabel}>
+      <div class="panel-header"><span class="eyebrow">{ui.scenarioLabel}</span><span class="scenario-note">{ui.copyNote}</span></div>
+      <div class="scenario-table-wrap"><table><thead><tr><th scope="col">{ui.scenarioCopies}</th><th scope="col">{ui.scenarioRevenue}</th><th scope="col">{ui.scenarioProfit}</th><th scope="col">{ui.scenarioBreakEven}</th></tr></thead><tbody data-scenarios>{initialResult.milestones.map((milestone) => <tr><th scope="row">{milestone.copies.toLocaleString('en-US')} {ui.copiesLabel}</th><td>{initialCurrency(milestone.revenue)}</td><td class={milestone.profit >= 0 ? 'positive' : 'negative'}>{initialCurrency(milestone.profit)}</td><td>{initialResult.breakEvenCopies !== null && milestone.copies >= initialResult.breakEvenCopies ? ui.yesLabel : ui.noLabel}</td></tr>)}</tbody></table></div>
+    </section>
+    <p class="source-note">{ui.sourceNote}</p>
+  </form>
+</div>
+
+<script>
+  import { initBookRoyaltyTool } from './controller';
+  const root = document.querySelector<HTMLElement>('[data-book-royalty-tool]');
+  if (root) initBookRoyaltyTool(root);
+</script>

package/src/tool/book-royalty-break-even-calculator/controller.ts

@@ -0,0 +1,23 @@
+import { calculateBookRoyaltyBreakEven, clampNumber, DEFAULT_ROYALTY_INPUTS, EBOOK_PRESET, PAPERBACK_PRESET, type BookRoyaltyInputs } from './logic';
+import { renderBookRoyalty } from './dom-views';
+import type { BookRoyaltyUI } from './ui';
+
+const LIMITS = { fixedCosts: [0, 1000000], salePrice: [0, 10000], royaltyValue: [0, 10000], variableCost: [0, 10000], targetProfit: [0, 1000000] } as const;
+
+function getInput(root: HTMLElement, name: string): HTMLInputElement | HTMLSelectElement | null { return root.querySelector<HTMLInputElement | HTMLSelectElement>(`[data-input="${name}"]`); }
+function readNumber(root: HTMLElement, name: keyof typeof LIMITS, fallback: number): number { const field = getInput(root, name); const value = field ? Number(field.value) : fallback; const [min, max] = LIMITS[name]; return clampNumber(value, min, max, fallback); }
+function readInputs(root: HTMLElement, previous: BookRoyaltyInputs): BookRoyaltyInputs {
+  const currency = getInput(root, 'currency')?.value;
+  return { fixedCosts: readNumber(root, 'fixedCosts', previous.fixedCosts), salePrice: readNumber(root, 'salePrice', previous.salePrice), royaltyMode: previous.royaltyMode, royaltyValue: readNumber(root, 'royaltyValue', previous.royaltyValue), variableCost: readNumber(root, 'variableCost', previous.variableCost), targetProfit: readNumber(root, 'targetProfit', previous.targetProfit), currency: currency === 'EUR' || currency === 'GBP' ? currency : 'USD' };
+}
+function writeInputs(root: HTMLElement, inputs: BookRoyaltyInputs): void { (Object.keys(inputs) as Array<keyof BookRoyaltyInputs>).forEach((key) => { const field = getInput(root, key); if (field && key !== 'royaltyMode') field.value = String(inputs[key]); }); }
+function render(root: HTMLElement, state: { inputs: BookRoyaltyInputs }, ui: BookRoyaltyUI): void { renderBookRoyalty({ root, result: calculateBookRoyaltyBreakEven(state.inputs), ui, currency: state.inputs.currency }); }
+
+export function initBookRoyaltyTool(root: HTMLElement): void {
+  const ui = JSON.parse(root.dataset.ui ?? '{}') as BookRoyaltyUI;
+  const state = { inputs: DEFAULT_ROYALTY_INPUTS };
+  root.querySelectorAll<HTMLInputElement | HTMLSelectElement>('[data-input]').forEach((field) => field.addEventListener('input', () => { state.inputs = readInputs(root, state.inputs); render(root, state, ui); }));
+  root.querySelectorAll<HTMLButtonElement>('[data-mode]').forEach((button) => button.addEventListener('click', () => { state.inputs = { ...readInputs(root, state.inputs), royaltyMode: button.dataset.mode === 'per-copy' ? 'per-copy' : 'percent' }; root.querySelectorAll<HTMLButtonElement>('[data-mode]').forEach((item) => item.setAttribute('aria-pressed', String(item === button))); render(root, state, ui); }));
+  root.querySelectorAll<HTMLButtonElement>('[data-preset]').forEach((button) => button.addEventListener('click', () => { const preset = button.dataset.preset === 'paperback' ? PAPERBACK_PRESET : EBOOK_PRESET; state.inputs = { ...preset, royaltyMode: state.inputs.royaltyMode }; writeInputs(root, state.inputs); render(root, state, ui); }));
+  render(root, state, ui);
+}

package/src/tool/book-royalty-break-even-calculator/dom-views.ts

@@ -0,0 +1,51 @@
+import type { RoyaltyBreakEvenResult } from './logic';
+import type { BookRoyaltyUI } from './ui';
+
+interface RenderArgs { root: HTMLElement; result: RoyaltyBreakEvenResult; ui: BookRoyaltyUI; currency: string }
+
+function number(value: number): string { return new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 }).format(value); }
+function money(value: number | null, currency: string, unreachableLabel: string): string { return value === null ? unreachableLabel : new Intl.NumberFormat(undefined, { style: 'currency', currency, maximumFractionDigits: 2 }).format(value); }
+function setOutput(root: HTMLElement, name: string, value: string): void { root.querySelector<HTMLElement>(`[data-output="${name}"]`)?.replaceChildren(document.createTextNode(value)); }
+function copyCount(value: number | null, unreachableLabel: string): string { return value === null ? unreachableLabel : number(value); }
+function statusForMargin(margin: number): 'profitable' | 'unprofitable' | 'zero' { if (margin > 0) return 'profitable'; if (margin < 0) return 'unprofitable'; return 'zero'; }
+function statusCopy(status: ReturnType<typeof statusForMargin>, ui: BookRoyaltyUI): { text: string; hint: string } { if (status === 'profitable') return { text: ui.statusProfitable, hint: ui.statusProfitableHint }; if (status === 'zero') return { text: ui.statusZero, hint: ui.statusZeroHint }; return { text: ui.statusUnprofitable, hint: ui.statusUnprofitableHint }; }
+
+function renderScenarios(root: HTMLElement, result: RoyaltyBreakEvenResult, ui: BookRoyaltyUI, currency: string): void {
+  const body = root.querySelector<HTMLElement>('[data-scenarios]');
+  if (!body) return;
+  body.replaceChildren(...result.milestones.map((milestone) => {
+    const row = document.createElement('tr');
+    const breakEven = result.breakEvenCopies !== null && milestone.copies >= result.breakEvenCopies;
+    row.innerHTML = `<th scope="row">${number(milestone.copies)} ${ui.copiesLabel}</th><td>${money(milestone.revenue, currency, ui.unreachableLabel)}</td><td class="${milestone.profit >= 0 ? 'positive' : 'negative'}">${money(milestone.profit, currency, ui.unreachableLabel)}</td><td>${breakEven ? ui.yesLabel : ui.noLabel}</td>`;
+    return row;
+  }));
+}
+
+function renderScene(root: HTMLElement, result: RoyaltyBreakEvenResult): void {
+  const max = Math.max(result.targetCopies ?? 0, result.breakEvenCopies ?? 0, 1000, 1);
+  const breakPosition = result.breakEvenCopies === null ? 100 : Math.min(100, result.breakEvenCopies / max * 100);
+  const targetPosition = result.targetCopies === null ? 100 : Math.min(100, result.targetCopies / max * 100);
+  root.querySelector<HTMLElement>('[data-scene-fill]')?.style.setProperty('--fill-width', `${targetPosition}%`);
+  root.querySelector<HTMLElement>('[data-scene-marker="break"]')?.style.setProperty('--marker-position', `${breakPosition}%`);
+  root.querySelector<HTMLElement>('[data-scene-marker="target"]')?.style.setProperty('--marker-position', `${targetPosition}%`);
+}
+
+export function renderBookRoyalty(args: RenderArgs): void {
+  const { root, result, ui, currency } = args;
+  setOutput(root, 'headline', `${copyCount(result.breakEvenCopies, ui.unreachableLabel)} ${ui.copiesLabel}`);
+  setOutput(root, 'break-even', copyCount(result.breakEvenCopies, ui.unreachableLabel));
+  setOutput(root, 'target', copyCount(result.targetCopies, ui.unreachableLabel));
+  setOutput(root, 'margin', money(result.marginPerCopy, currency, ui.unreachableLabel));
+  setOutput(root, 'royalty-per-copy', money(result.royaltyPerCopy, currency, ui.unreachableLabel));
+  setOutput(root, 'revenue-break-even', money(result.revenueAtBreakEven, currency, ui.unreachableLabel));
+  setOutput(root, 'scene-break-label', result.breakEvenCopies === null ? '∞' : number(result.breakEvenCopies));
+  setOutput(root, 'scene-target-label', result.targetCopies === null ? '∞' : number(result.targetCopies));
+  setOutput(root, 'scene-caption', result.breakEvenCopies === null ? ui.statusUnprofitableHint : `${ui.sceneCaption} ${number(result.breakEvenCopies)} ${ui.copiesLabel}.`);
+  const status = statusForMargin(result.marginPerCopy);
+  root.dataset.status = status;
+  const copy = statusCopy(status, ui);
+  setOutput(root, 'status', copy.text);
+  setOutput(root, 'status-hint', copy.hint);
+  renderScene(root, result);
+  renderScenarios(root, result, ui, currency);
+}

package/src/tool/book-royalty-break-even-calculator/entry.ts

@@ -0,0 +1,39 @@
+import type { BooksToolEntry, SEOSection, ToolLocaleContent } from '../../types';
+import type { BookRoyaltyUI } from './ui';
+
+export type { BookRoyaltyUI } from './ui';
+export type BookRoyaltyLocaleContent = ToolLocaleContent<BookRoyaltyUI>;
+
+function withLocalizedSchemas(content: BookRoyaltyLocaleContent): BookRoyaltyLocaleContent {
+  const seo: SEOSection[] = content.seo.length >= 10
+    ? content.seo
+    : [...content.seo, { type: 'title', text: content.ui.sceneLabel, level: 2 }, { type: 'paragraph', html: content.ui.sourceNote }];
+  const schemas: Record<string, unknown>[] = [
+    { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: content.title, applicationCategory: 'BusinessApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' } },
+    { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: content.faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) },
+    { '@context': 'https://schema.org', '@type': 'HowTo', name: content.title, step: content.howTo.map((item) => ({ '@type': 'HowToStep', name: item.name, text: item.text })) },
+  ];
+  return { ...content, seo, schemas };
+}
+
+export const bookRoyaltyBreakEvenCalculator: BooksToolEntry<BookRoyaltyUI> = {
+  id: 'book-royalty-break-even-calculator',
+  icons: { bg: 'mdi:book-open-page-variant-outline', fg: 'mdi:scale-balance' },
+  i18n: {
+    de: () => import('./i18n/de').then((module) => withLocalizedSchemas(module.content as BookRoyaltyLocaleContent)),
+    en: () => import('./i18n/en').then((module) => module.content),
+    es: () => import('./i18n/es').then((module) => withLocalizedSchemas(module.content as BookRoyaltyLocaleContent)),
+    fr: () => import('./i18n/fr').then((module) => withLocalizedSchemas(module.content as BookRoyaltyLocaleContent)),
+    id: () => import('./i18n/id').then((module) => withLocalizedSchemas(module.content as BookRoyaltyLocaleContent)),
+    it: () => import('./i18n/it').then((module) => withLocalizedSchemas(module.content as BookRoyaltyLocaleContent)),
+    ja: () => import('./i18n/ja').then((module) => withLocalizedSchemas(module.content as BookRoyaltyLocaleContent)),
+    ko: () => import('./i18n/ko').then((module) => withLocalizedSchemas(module.content as BookRoyaltyLocaleContent)),
+    nl: () => import('./i18n/nl').then((module) => withLocalizedSchemas(module.content as BookRoyaltyLocaleContent)),
+    pl: () => import('./i18n/pl').then((module) => withLocalizedSchemas(module.content as BookRoyaltyLocaleContent)),
+    pt: () => import('./i18n/pt').then((module) => withLocalizedSchemas(module.content as BookRoyaltyLocaleContent)),
+    ru: () => import('./i18n/ru').then((module) => withLocalizedSchemas(module.content as BookRoyaltyLocaleContent)),
+    sv: () => import('./i18n/sv').then((module) => withLocalizedSchemas(module.content as BookRoyaltyLocaleContent)),
+    tr: () => import('./i18n/tr').then((module) => withLocalizedSchemas(module.content as BookRoyaltyLocaleContent)),
+    zh: () => import('./i18n/zh').then((module) => withLocalizedSchemas(module.content as BookRoyaltyLocaleContent)),
+  },
+};

package/src/tool/book-royalty-break-even-calculator/i18n/de.ts

@@ -0,0 +1,2 @@
+import { localeContent } from './locales';
+export const content = localeContent.de;