@jjlmoya/utils-books 1.6.0 → 1.7.0

package/package.json

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

package/src/category/index.ts

@@ -1,9 +1,10 @@
 import { bookPaginationAndSpineCalculator } from '../tool/book-pagination-and-spine-calculator/entry';
+import { bookInteriorMarginAndGutterPlanner } from '../tool/book-interior-margin-and-gutter-planner/entry';
 import type { CategoryLocaleContent, KnownLocale } from '../types';
 
 export const booksCategory = {
   icon: 'mdi:book-open-page-variant-outline',
-  tools: [bookPaginationAndSpineCalculator],
+  tools: [bookPaginationAndSpineCalculator, bookInteriorMarginAndGutterPlanner],
   i18n: {
     de: () => import('./i18n/de').then((module) => module.content),
     en: () => import('./i18n/en').then((module) => module.content),

package/src/entries.ts

@@ -2,5 +2,6 @@ export { bookPaginationAndSpineCalculator } from './tool/book-pagination-and-spi
 export type { BookPaginationUI, BookPaginationLocaleContent } from './tool/book-pagination-and-spine-calculator/entry';
 
 import { bookPaginationAndSpineCalculator } from './tool/book-pagination-and-spine-calculator/entry';
+import { bookInteriorMarginAndGutterPlanner } from './tool/book-interior-margin-and-gutter-planner/entry';
 
-export const ALL_ENTRIES = [bookPaginationAndSpineCalculator];
+export const ALL_ENTRIES = [bookPaginationAndSpineCalculator, bookInteriorMarginAndGutterPlanner];

package/src/index.ts

@@ -2,6 +2,7 @@ export { booksCategory } from './category';
 export const booksCategorySEO = () => import('./category/BooksCategorySEO.astro').then((module) => module.default);
 
 export { bookPaginationAndSpineCalculator, BOOK_PAGINATION_AND_SPINE_CALCULATOR_TOOL } from './tool/book-pagination-and-spine-calculator';
+export { bookInteriorMarginAndGutterPlanner, BOOK_INTERIOR_MARGIN_AND_GUTTER_PLANNER_TOOL } from './tool/book-interior-margin-and-gutter-planner';
 
 export type {
   KnownLocale,

package/src/tests/locale_completeness.test.ts

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

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

package/src/tool/book-interior-margin-and-gutter-planner/bibliography.astro

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

package/src/tool/book-interior-margin-and-gutter-planner/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Amazon KDP. Set Trim Size, Bleed, and Margins',
+    url: 'https://kdp.amazon.com/en_US/help/topic/GVBQ3CMEQW3W2VL6',
+  },
+  {
+    name: 'Lulu. Preguntas frecuentes sobre el formato interior',
+    url: 'https://help.lulu.com/es/support/solutions/articles/64000255590-formato-interior-conceptos-b%C3%A1sicos',
+  },
+];

package/src/tool/book-interior-margin-and-gutter-planner/book-interior-margin-and-gutter-planner.css

@@ -0,0 +1,462 @@
+.n-tool {
+  --n-ink: #25221e;
+  --n-muted: #756f66;
+  --n-paper: #fffdf8;
+  --n-paper-alt: #f5efe3;
+  --n-line: #d7cbbb;
+  --n-accent: #a34e2b;
+  --n-accent-soft: #f4dfd1;
+  --n-ok: #37684d;
+  --n-warn: #a15b2e;
+  --n-bad: #9c3831;
+  --n-shadow: rgba(57, 39, 25, 0.12);
+
+  display: grid;
+  grid-template-columns: minmax(280px, 0.82fr) minmax(420px, 1.18fr);
+  min-height: 530px;
+  overflow: visible;
+  color: var(--n-ink);
+  background: var(--n-paper);
+  border: 1px solid var(--n-line);
+  box-shadow: 0 18px 40px var(--n-shadow);
+}
+
+.n-specs,
+.n-result {
+  padding: 30px;
+}
+
+.n-specs {
+  display: flex;
+  flex-direction: column;
+  gap: 26px;
+  background: var(--n-paper-alt);
+  border-right: 1px solid var(--n-line);
+}
+
+.n-specs-head,
+.n-scene-label,
+.n-output-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.n-eyebrow,
+.n-scene-label,
+.n-page-band {
+  color: var(--n-muted);
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.n-unit-toggle {
+  display: inline-flex;
+  padding: 3px;
+  border: 1px solid var(--n-line);
+  border-radius: 999px;
+  background: var(--n-paper);
+}
+
+.n-unit-toggle button,
+.n-select-trigger,
+.n-select-menu button,
+.n-bleed-toggle {
+  color: var(--n-ink);
+  font: inherit;
+}
+
+.n-unit-toggle button {
+  padding: 7px 10px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--n-muted);
+  cursor: pointer;
+  font-size: 0.7rem;
+  font-weight: 700;
+}
+
+.n-unit-toggle button[aria-pressed="true"] {
+  background: var(--n-ink);
+  color: var(--n-paper);
+}
+
+.n-field-grid,
+.n-select-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.n-field-grid .n-field-pages {
+  grid-column: 1 / -1;
+}
+
+.n-field {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 8px;
+  color: var(--n-muted);
+  font-size: 0.76rem;
+  font-weight: 700;
+}
+
+.n-field input,
+.n-select-trigger {
+  width: 100%;
+  min-height: 46px;
+  padding: 10px 12px;
+  border: 1px solid var(--n-line);
+  border-radius: 2px;
+  background: var(--n-paper);
+  color: var(--n-ink);
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.n-field input:focus-visible,
+.n-select-trigger:focus-visible,
+.n-unit-toggle button:focus-visible,
+.n-bleed-toggle:focus-visible,
+.n-select-menu button:focus-visible {
+  outline: 3px solid var(--n-accent-soft);
+  outline-offset: 2px;
+}
+
+.n-field small {
+  color: var(--n-accent);
+  font-size: 0.7rem;
+}
+
+.n-select {
+  z-index: 3;
+}
+
+.n-select-trigger {
+  position: relative;
+  padding-right: 32px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.n-select-trigger::after {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  width: 7px;
+  height: 7px;
+  border-right: 1.5px solid currentcolor;
+  border-bottom: 1.5px solid currentcolor;
+  content: '';
+  transform: translateY(-70%) rotate(45deg);
+}
+
+.n-select[data-open="true"] .n-select-trigger::after {
+  transform: translateY(-20%) rotate(225deg);
+}
+
+.n-select-menu {
+  position: absolute;
+  z-index: 5;
+  top: calc(100% + 6px);
+  right: 0;
+  left: 0;
+  padding: 5px;
+  border: 1px solid var(--n-line);
+  background: var(--n-paper);
+  box-shadow: 0 12px 25px var(--n-shadow);
+}
+
+.n-select-menu[hidden] {
+  display: none;
+}
+
+.n-select-menu button {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+}
+
+.n-select-menu button:hover {
+  background: var(--n-accent-soft);
+}
+
+.n-bleed-toggle {
+  display: grid;
+  grid-template-columns: 18px 1fr auto;
+  align-items: center;
+  gap: 10px;
+  margin-top: auto;
+  padding: 14px 0 0;
+  border: 0;
+  border-top: 1px solid var(--n-line);
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+}
+
+.n-bleed-mark {
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--n-line);
+  border-radius: 50%;
+  background: var(--n-paper);
+}
+
+.n-bleed-toggle[aria-checked="true"] .n-bleed-mark {
+  border-color: var(--n-accent);
+  background: var(--n-accent);
+  box-shadow: inset 0 0 0 4px var(--n-paper-alt);
+}
+
+.n-bleed-toggle strong {
+  color: var(--n-accent);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+}
+
+.n-result {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 24px;
+}
+
+.n-result-copy {
+  display: grid;
+  grid-template-columns: minmax(190px, 0.85fr) minmax(190px, 1.15fr);
+  align-items: start;
+  gap: 26px;
+}
+
+.n-status {
+  display: flex;
+  align-items: flex-start;
+  gap: 11px;
+  min-height: 64px;
+}
+
+.n-status-dot {
+  flex: 0 0 auto;
+  width: 12px;
+  height: 12px;
+  margin-top: 5px;
+  border-radius: 50%;
+  background: var(--n-ok);
+  box-shadow: 0 0 0 5px rgba(55, 104, 77, 0.12);
+}
+
+[data-status="low-pages"] .n-status-dot,
+[data-status="high-pages"] .n-status-dot {
+  background: var(--n-warn);
+  box-shadow: 0 0 0 5px rgba(161, 91, 46, 0.12);
+}
+
+[data-status="invalid"] .n-status-dot {
+  background: var(--n-bad);
+  box-shadow: 0 0 0 5px rgba(156, 56, 49, 0.12);
+}
+
+.n-status strong {
+  display: block;
+  font-size: 1.05rem;
+}
+
+.n-status p {
+  max-width: 240px;
+  margin: 5px 0 0;
+  color: var(--n-muted);
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
+
+.n-output-list {
+  display: grid;
+  gap: 7px;
+}
+
+.n-output-row {
+  padding-bottom: 7px;
+  border-bottom: 1px solid var(--n-line);
+  color: var(--n-muted);
+  font-size: 0.75rem;
+}
+
+.n-output-row strong {
+  color: var(--n-ink);
+  font-size: 0.82rem;
+  text-align: right;
+}
+
+.n-page-band {
+  margin: 20px 0 0;
+}
+
+.n-page-band span {
+  color: var(--n-accent);
+}
+
+.n-scene-wrap {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 300px;
+  padding: 17px;
+  border: 1px solid var(--n-line);
+  background: var(--n-paper-alt);
+}
+
+.n-scene-label {
+  font-size: 0.65rem;
+}
+
+.n-scene {
+  min-height: 220px;
+}
+
+.n-spread-svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 230px;
+}
+
+.n-paper {
+  fill: var(--n-paper);
+  stroke: var(--n-line);
+  stroke-width: 1;
+}
+
+.n-safe-zone {
+  fill: var(--n-accent-soft);
+  opacity: 0.72;
+}
+
+.n-crease {
+  fill: none;
+  stroke: var(--n-accent);
+  stroke-width: 2;
+}
+
+.n-rule {
+  fill: none;
+  stroke: var(--n-ink);
+  stroke-linecap: round;
+  stroke-width: 1.5;
+  opacity: 0.58;
+}
+
+.n-rule-soft {
+  opacity: 0.23;
+}
+
+.n-measure {
+  fill: none;
+  stroke: var(--n-accent);
+  stroke-dasharray: 2 3;
+  stroke-width: 1;
+}
+
+.n-measure-outer {
+  stroke-dasharray: none;
+}
+
+.n-measure-text,
+.n-scene-status {
+  fill: var(--n-accent);
+  font-size: 7px;
+  font-weight: 700;
+}
+
+.n-scene-status-ready {
+  fill: var(--n-ok);
+}
+
+.n-scene-status-low-pages,
+.n-scene-status-high-pages {
+  fill: var(--n-warn);
+}
+
+.n-scene-status-invalid {
+  fill: var(--n-bad);
+}
+
+.n-scene-hint {
+  margin: 8px 0 0;
+  color: var(--n-muted);
+  font-size: 0.73rem;
+  line-height: 1.45;
+}
+
+.n-source {
+  margin: 0;
+  padding-top: 9px;
+  border-top: 1px solid var(--n-line);
+  color: var(--n-muted);
+  font-size: 0.72rem;
+  line-height: 1.45;
+}
+
+.n-tool[data-paper="white-uncoated"] .n-paper {
+  fill: var(--n-paper-white);
+}
+
+.n-tool[data-paper="coated"] .n-paper {
+  fill: var(--n-paper-coated);
+}
+
+html.theme-dark .n-tool {
+    --n-ink: #f6efe5;
+    --n-muted: #b9afa2;
+    --n-paper: #25231f;
+    --n-paper-white: #f8f5ee;
+    --n-paper-coated: #e9eef0;
+    --n-paper-alt: #171613;
+    --n-line: #51483e;
+    --n-accent: #e49a72;
+    --n-accent-soft: #493129;
+    --n-ok: #82ba93;
+    --n-warn: #e0a36f;
+    --n-bad: #ee8b7f;
+    --n-shadow: rgba(0, 0, 0, 0.28);
+}
+
+@media (max-width: 780px) {
+  .n-tool {
+    grid-template-columns: 1fr;
+    max-width: calc(100vw - 40px);
+  }
+
+  .n-specs {
+    border-right: 0;
+    border-bottom: 1px solid var(--n-line);
+  }
+
+  .n-result-copy {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 480px) {
+  .n-specs,
+  .n-result {
+    padding: 20px;
+  }
+
+  .n-field-grid,
+  .n-select-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .n-field-grid .n-field-pages {
+    grid-column: auto;
+  }
+}

package/src/tool/book-interior-margin-and-gutter-planner/component.astro

@@ -0,0 +1,102 @@
+---
+import { calculateInterior, DEFAULT_INPUTS } from './logic';
+import { createSpreadMarkup } from './dom-views';
+import type { BookInteriorUI } from './ui';
+
+interface Props {
+  ui: BookInteriorUI;
+}
+
+const { ui } = Astro.props as Props;
+const initialCalculation = calculateInterior(DEFAULT_INPUTS);
+---
+
+<div class="n-tool" data-tool="book-interior-margin-and-gutter-planner" data-unit="metric">
+  <script is:inline type="application/json" data-ui set:html={JSON.stringify(ui)}></script>
+  <div class="n-specs">
+    <div class="n-specs-head">
+      <span class="n-eyebrow">{ui.setupLabel}</span>
+      <div class="n-unit-toggle" role="group" aria-label={`${ui.metricLabel} ${ui.imperialLabel}`}>
+        <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 n-field-pages">
+        <span>{ui.pagesLabel}</span>
+        <input data-input="number" data-field="pages" type="number" inputmode="numeric" min="1" max="2000" value={DEFAULT_INPUTS.pages} />
+      </label>
+      <label class="n-field">
+        <span>{ui.widthLabel} <small data-unit-label>mm</small></span>
+        <input data-input="number" data-field="widthMm" type="number" inputmode="decimal" min="20" step="0.1" value={DEFAULT_INPUTS.widthMm} />
+      </label>
+      <label class="n-field">
+        <span>{ui.heightLabel} <small data-unit-label>mm</small></span>
+        <input data-input="number" data-field="heightMm" type="number" inputmode="decimal" min="20" step="0.1" value={DEFAULT_INPUTS.heightMm} />
+      </label>
+    </div>
+    <div class="n-select-grid">
+      <div class="n-field n-select" data-select="binding" data-open="false">
+        <span>{ui.bindingLabel}</span>
+        <button class="n-select-trigger" type="button" data-select-trigger aria-haspopup="listbox">{ui.bindingPerfectLabel}</button>
+        <div class="n-select-menu" data-select-menu role="listbox" hidden>
+          <button type="button" data-select-option data-value="perfect-bound" role="option">{ui.bindingPerfectLabel}</button>
+          <button type="button" data-select-option data-value="hardcover" role="option">{ui.bindingHardcoverLabel}</button>
+          <button type="button" data-select-option data-value="saddle-stitched" role="option">{ui.bindingSaddleLabel}</button>
+        </div>
+      </div>
+      <div class="n-field n-select" data-select="paperType" data-open="false">
+        <span>{ui.paperLabel}</span>
+        <button class="n-select-trigger" type="button" data-select-trigger aria-haspopup="listbox">{ui.paperCreamLabel}</button>
+        <div class="n-select-menu" data-select-menu role="listbox" hidden>
+          <button type="button" data-select-option data-value="white-uncoated" role="option">{ui.paperWhiteLabel}</button>
+          <button type="button" data-select-option data-value="cream-uncoated" role="option">{ui.paperCreamLabel}</button>
+          <button type="button" data-select-option data-value="coated" role="option">{ui.paperCoatedLabel}</button>
+        </div>
+      </div>
+    </div>
+    <button class="n-bleed-toggle" type="button" data-bleed-toggle role="switch" aria-checked="false">
+      <span class="n-bleed-mark" aria-hidden="true"></span>
+      <span>{ui.bleedLabel}</span>
+      <strong data-bleed-state>{ui.bleedOff}</strong>
+    </button>
+  </div>
+
+  <div class="n-result" aria-label={ui.marginLabel}>
+    <div class="n-result-copy">
+      <div class="n-status" data-status="ready">
+        <span class="n-status-dot" aria-hidden="true"></span>
+        <div>
+          <strong data-status-title>{ui.statusReady}</strong>
+          <p data-status-detail>{ui.statusReadyDetail}</p>
+        </div>
+      </div>
+      <div class="n-output-list">
+        <div class="n-output-row"><span>{ui.gutterLabel}</span><strong data-output="gutter">12.7 mm</strong></div>
+        <div class="n-output-row"><span>{ui.outerLabel}</span><strong data-output="outer">6.4 mm</strong></div>
+        <div class="n-output-row"><span>{ui.safeWidthLabel}</span><strong data-output="safeWidth">132.9 mm</strong></div>
+        <div class="n-output-row"><span>{ui.safeHeightLabel}</span><strong data-output="safeHeight">216.2 mm</strong></div>
+        <div class="n-output-row"><span>{ui.normalizedPagesLabel}</span><strong data-output="pages">240</strong></div>
+      </div>
+      <p class="n-page-band">{ui.pageFormatLabel} <span data-output="band">151-300</span></p>
+    </div>
+    <div class="n-scene-wrap">
+      <div class="n-scene-label"><span>{ui.sceneLabel}</span><span>{ui.trimLabel}</span></div>
+      <div class="n-scene" data-scene set:html={createSpreadMarkup(initialCalculation, ui)}></div>
+      <p class="n-scene-hint">{ui.sceneHint}</p>
+    </div>
+    <p class="n-source">{ui.sourceLabel}</p>
+  </div>
+</div>
+
+<script>
+  import { initBookInteriorPlanner } from './controller';
+
+  const root = document.querySelector<HTMLElement>('[data-tool="book-interior-margin-and-gutter-planner"]');
+  const data = root?.querySelector<HTMLScriptElement>('[data-ui]');
+  if (root && data) initBookInteriorPlanner(root, JSON.parse(data.textContent || '{}'));
+</script>
+
+<style>
+  @import url('./book-interior-margin-and-gutter-planner.css');
+</style>