@jjlmoya/utils-books 1.7.0 → 1.9.0

package/src/tool/book-reading-time-deadline-planner/book-reading-time-deadline-planner.css

@@ -0,0 +1,449 @@
+.n-tool {
+  --n-ink: #28231e;
+  --n-muted: #766d63;
+  --n-paper: #fffdf8;
+  --n-paper-alt: #f4ede1;
+  --n-paper-deep: #e7dac7;
+  --n-line: #d7c7b4;
+  --n-accent: #9c4d35;
+  --n-accent-soft: #f0d8cb;
+  --n-ok: #427257;
+  --n-warn: #a6652f;
+  --n-bad: #a34038;
+  --n-shadow: rgba(57, 39, 25, 0.13);
+
+  display: grid;
+  grid-template-columns: minmax(290px, 0.83fr) minmax(420px, 1.17fr);
+  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-setup,
+.n-plan {
+  padding: 30px;
+}
+.n-setup {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  background: var(--n-paper-alt);
+  border-right: 1px solid var(--n-line);
+}
+.n-setup-head,
+.n-panel-label,
+.n-presets,
+.n-presets > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.n-eyebrow,
+.n-panel-label,
+.n-presets > span {
+  color: var(--n-muted);
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.n-bookmark {
+  color: var(--n-accent);
+  font-size: 1.35rem;
+}
+.n-field-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+.n-field-wide {
+  grid-column: 1 / -1;
+}
+.n-field {
+  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-field select,
+.n-select-trigger {
+  width: 100%;
+  min-height: 45px;
+  padding: 9px 12px;
+  border: 1px solid var(--n-line);
+  border-radius: 2px;
+  background: var(--n-paper);
+  color: var(--n-ink);
+  font: inherit;
+  font-size: 0.95rem;
+}
+.n-field input:focus-visible,
+.n-select-trigger:focus-visible,
+.n-select-menu button:focus-visible,
+.n-presets button:focus-visible {
+  outline: 3px solid var(--n-accent-soft);
+  outline-offset: 2px;
+}
+.n-field small {
+  color: var(--n-accent);
+  font-size: 0.68rem;
+}
+.n-select {
+  position: relative;
+  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;
+  color: var(--n-ink);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+}
+.n-select-menu button:hover {
+  background: var(--n-accent-soft);
+}
+.n-presets {
+  align-items: flex-start;
+  flex-direction: column;
+  margin-top: auto;
+  padding-top: 18px;
+  border-top: 1px solid var(--n-line);
+}
+.n-presets > div {
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+.n-presets button {
+  padding: 8px 10px;
+  border: 1px solid var(--n-line);
+  border-radius: 999px;
+  background: var(--n-paper);
+  color: var(--n-ink);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+.n-presets button:hover {
+  border-color: var(--n-accent);
+  color: var(--n-accent);
+}
+.n-speed-test {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--n-line);
+  background: var(--n-paper);
+}
+.n-speed-test .n-panel-label {
+  align-items: flex-start;
+  flex-direction: column;
+}
+.n-speed-test textarea {
+  width: 100%;
+  min-height: 76px;
+  padding: 10px 12px;
+  border: 1px solid var(--n-line);
+  border-radius: 2px;
+  background: var(--n-paper-alt);
+  color: var(--n-ink);
+  font: inherit;
+  line-height: 1.45;
+  resize: vertical;
+}
+.n-speed-test textarea:focus-visible,
+.n-speed-test-actions button:focus-visible,
+.n-speed-test-result button:focus-visible {
+  outline: 3px solid var(--n-accent-soft);
+  outline-offset: 2px;
+}
+.n-speed-test-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.n-speed-test-actions button,
+.n-speed-test-result button {
+  padding: 8px 10px;
+  border: 1px solid var(--n-line);
+  border-radius: 999px;
+  background: var(--n-paper-alt);
+  color: var(--n-ink);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+.n-speed-test-actions button[data-speed-test-action],
+.n-speed-test-result button {
+  border-color: var(--n-ink);
+  background: var(--n-ink);
+  color: var(--n-paper);
+}
+.n-speed-test-actions button[data-speed-test-action].is-running {
+  border-color: var(--n-accent);
+  background: var(--n-paper-alt);
+  color: var(--n-accent);
+}
+.n-speed-test-status {
+  margin: 0;
+  color: var(--n-muted);
+  font-size: 0.72rem;
+  line-height: 1.4;
+}
+.n-speed-test-result {
+  display: grid;
+  grid-template-columns: auto 1fr auto 1fr;
+  align-items: center;
+  gap: 7px 10px;
+  color: var(--n-muted);
+  font-size: 0.68rem;
+  text-transform: uppercase;
+}
+.n-speed-test-result strong {
+  color: var(--n-accent);
+  font-size: 0.85rem;
+  text-transform: none;
+}
+.n-speed-test-result button {
+  grid-column: 1 / -1;
+  justify-self: start;
+}
+.n-export-calendar {
+  justify-self: start;
+  padding: 8px 11px;
+  border: 1px solid var(--n-ink);
+  border-radius: 999px;
+  background: var(--n-ink);
+  color: var(--n-paper);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+.n-export-calendar:focus-visible {
+  outline: 3px solid var(--n-accent-soft);
+  outline-offset: 2px;
+}
+.n-plan {
+  display: grid;
+  grid-template-rows: auto auto 1fr auto;
+  gap: 22px;
+}
+.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(66, 114, 87, 0.12);
+}
+.n-status[data-status="tight"] .n-status-dot {
+  background: var(--n-warn);
+  box-shadow: 0 0 0 5px rgba(166, 101, 47, 0.12);
+}
+.n-status[data-status="late"] .n-status-dot,
+.n-status[data-status="invalid"] .n-status-dot {
+  background: var(--n-bad);
+  box-shadow: 0 0 0 5px rgba(163, 64, 56, 0.12);
+}
+.n-status strong {
+  display: block;
+  font-size: 1.08rem;
+}
+.n-status p {
+  max-width: 390px;
+  margin: 5px 0 0;
+  color: var(--n-muted);
+  font-size: 0.79rem;
+  line-height: 1.45;
+}
+.n-output-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+.n-output-card {
+  display: flex;
+  min-height: 74px;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 13px;
+  border: 1px solid var(--n-line);
+  background: var(--n-paper-alt);
+}
+.n-output-card span {
+  color: var(--n-muted);
+  font-size: 0.67rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+.n-output-card strong {
+  color: var(--n-accent);
+  font-size: 1.08rem;
+}
+.n-output-wide {
+  grid-column: 1 / -1;
+  min-height: 58px;
+  flex-direction: row;
+  align-items: center;
+}
+.n-output-wide strong {
+  font-size: 1.18rem;
+}
+.n-timeline-panel {
+  display: grid;
+  align-content: center;
+  padding: 16px;
+  border: 1px solid var(--n-line);
+  background: var(--n-paper-alt);
+}
+.n-panel-label {
+  font-size: 0.65rem;
+}
+.n-panel-label span:last-child {
+  color: var(--n-accent);
+}
+.n-timeline-svg {
+  display: block;
+  width: 100%;
+  margin-top: 12px;
+  overflow: visible;
+}
+.n-timeline-track {
+  fill: none;
+  stroke: var(--n-paper-deep);
+  stroke-width: 6;
+}
+.n-timeline-fill {
+  fill: none;
+  stroke: var(--n-accent);
+  stroke-width: 6;
+  stroke-linecap: round;
+}
+.n-timeline-fill-late {
+  stroke: var(--n-bad);
+}
+.n-milestone circle {
+  fill: var(--n-paper);
+  stroke: var(--n-accent);
+  stroke-width: 3;
+}
+.n-milestone:first-of-type circle {
+  fill: var(--n-accent);
+}
+.n-milestone text {
+  fill: var(--n-muted);
+  font-size: 8px;
+  font-weight: 700;
+}
+.n-milestone text:first-of-type {
+  fill: var(--n-ink);
+}
+.n-timeline-panel p,
+.n-source {
+  margin: 9px 0 0;
+  color: var(--n-muted);
+  font-size: 0.72rem;
+  line-height: 1.45;
+}
+.n-source {
+  margin: 0;
+  padding-top: 10px;
+  border-top: 1px solid var(--n-line);
+}
+html.theme-dark .n-tool {
+  --n-ink: #f6efe5;
+  --n-muted: #b9afa2;
+  --n-paper: #25231f;
+  --n-paper-alt: #171613;
+  --n-paper-deep: #51483e;
+  --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-setup {
+    border-right: 0;
+    border-bottom: 1px solid var(--n-line);
+  }
+}
+
+@media (max-width: 480px) {
+  .n-setup,
+  .n-plan {
+    padding: 20px;
+  }
+  .n-field-grid,
+  .n-output-grid {
+    grid-template-columns: 1fr;
+  }
+  .n-field-wide,
+  .n-output-wide {
+    grid-column: auto;
+  }
+  .n-speed-test-result {
+    grid-template-columns: auto 1fr;
+  }
+}

package/src/tool/book-reading-time-deadline-planner/calendar.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest';
+import { createMilestoneIcs } from './calendar';
+import { DEFAULT_INPUTS, calculateReadingPlan } from './logic';
+
+describe('reading milestone calendar export', () => {
+  it('creates five all-day milestone events with exclusive end dates', () => {
+    const calculation = calculateReadingPlan(DEFAULT_INPUTS);
+    const ics = createMilestoneIcs(calculation, 'Reading plan', {
+      start: 'Start', quarter: '25%', half: 'Half', threeQuarter: '75%', finish: 'Finish',
+    });
+
+    expect(ics).toContain('BEGIN:VCALENDAR');
+    expect(ics.match(/BEGIN:VEVENT/g)).toHaveLength(5);
+    expect(ics).toContain('DTSTART;VALUE=DATE:20260101');
+    expect(ics).toContain('DTEND;VALUE=DATE:20260102');
+    expect(ics).toContain('SUMMARY:Reading plan - Start');
+  });
+});

package/src/tool/book-reading-time-deadline-planner/calendar.ts

@@ -0,0 +1,56 @@
+import type { BookReadingCalculation } from './logic';
+
+export interface MilestoneCalendarLabels {
+  start: string;
+  quarter: string;
+  half: string;
+  threeQuarter: string;
+  finish: string;
+}
+
+export function createMilestoneIcs(calculation: BookReadingCalculation, title: string, labels: MilestoneCalendarLabels): string {
+  const milestoneLabels = [labels.start, labels.quarter, labels.half, labels.threeQuarter, labels.finish];
+  const events = calculation.milestoneDates.map((date, index) => createEvent({ calculation, date, label: milestoneLabels[index] || labels.start, index, title }));
+  return ['BEGIN:VCALENDAR', 'VERSION:2.0', 'PRODID:-//jjlmoya-utils//Book Reading Planner//EN', 'CALSCALE:GREGORIAN', ...events, 'END:VCALENDAR', ''].join('\r\n');
+}
+
+interface CalendarEventContext {
+  calculation: BookReadingCalculation;
+  date: string;
+  label: string;
+  index: number;
+  title: string;
+}
+
+function createEvent(context: CalendarEventContext): string {
+  const nextDate = addOneDay(context.date);
+    const summary = escapeCalendarText(`${context.title} - ${context.label}`);
+  return [
+    'BEGIN:VEVENT',
+    `UID:reading-milestone-${context.calculation.startDate}-${context.index}@jjlmoya-utils`,
+    `DTSTAMP:${toCalendarDate(new Date())}T000000Z`,
+    `DTSTART;VALUE=DATE:${toCalendarDateString(context.date)}`,
+    `DTEND;VALUE=DATE:${toCalendarDateString(nextDate)}`,
+    `SUMMARY:${summary}`,
+    `DESCRIPTION:${escapeCalendarText(`Reading milestone: ${context.label}`)}`,
+    'END:VEVENT',
+  ].join('\r\n');
+}
+
+function toCalendarDate(date: Date): string {
+  return date.toISOString().slice(0, 10).replaceAll('-', '');
+}
+
+function toCalendarDateString(date: string): string {
+  return date.replaceAll('-', '');
+}
+
+function addOneDay(date: string): string {
+  const next = new Date(`${date}T00:00:00Z`);
+  next.setUTCDate(next.getUTCDate() + 1);
+  return next.toISOString().slice(0, 10);
+}
+
+function escapeCalendarText(value: string): string {
+  return value.replaceAll('\\', '\\\\').replaceAll(';', '\\;').replaceAll(',', '\\,').replaceAll('\r\n', '\\n').replaceAll('\n', '\\n');
+}

package/src/tool/book-reading-time-deadline-planner/component.astro

@@ -0,0 +1,91 @@
+---
+import { calculateReadingPlan, getDefaultInputs } from './logic';
+import { createTimelineMarkup } from './dom-views';
+import type { BookReadingUI } from './ui';
+
+interface Props {
+  ui: BookReadingUI;
+}
+
+const { ui } = Astro.props as Props;
+const initialInputs = getDefaultInputs();
+const initialCalculation = calculateReadingPlan(initialInputs);
+
+function formatInitialDuration(minutes: number): string {
+  const hours = Math.floor(minutes / 60);
+  const remaining = Math.round(minutes % 60);
+  if (hours === 0) return `${remaining} ${ui.minuteShortLabel}`;
+  if (remaining === 0) return `${hours} ${ui.hourShortLabel}`;
+  return `${hours} ${ui.hourShortLabel} ${remaining} ${ui.minuteShortLabel}`;
+}
+
+function formatInitialDate(value: string): string {
+  return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric' }).format(new Date(`${value}T00:00:00Z`));
+}
+
+const initialPace = `${initialCalculation.dailyPace} ${ui.pagesModeLabel}`;
+const initialSession = `${initialCalculation.sessionTarget} ${ui.pagesModeLabel}`;
+const initialBuffer = `${initialCalculation.catchUpSessions} ${ui.bufferExtraLabel}`;
+const initialEstimatedWords = `${initialCalculation.estimatedWords?.toLocaleString('en-US') || 0} ${ui.wordsShortLabel}`;
+---
+
+<div class="n-tool" data-tool="book-reading-time-deadline-planner">
+  <script is:inline type="application/json" data-ui set:html={JSON.stringify(ui)}></script>
+  <div class="n-setup">
+    <div class="n-setup-head"><span class="n-eyebrow">{ui.setupLabel}</span><span class="n-bookmark" aria-hidden="true">+</span></div>
+    <div class="n-field-grid">
+      <div class="n-field n-select n-field-wide" data-select="mode" data-open="false">
+        <span>{ui.modeLabel}</span>
+        <button class="n-select-trigger" type="button" data-select-trigger aria-haspopup="listbox">{ui.pagesModeLabel}</button>
+        <div class="n-select-menu" data-select-menu role="listbox" hidden>
+          <button type="button" data-select-option data-value="pages" role="option">{ui.pagesModeLabel}</button>
+          <button type="button" data-select-option data-value="words" role="option">{ui.wordsModeLabel}</button>
+        </div>
+      </div>
+      <label class="n-field n-field-wide"><span>{ui.amountLabel} <small data-amount-label>{ui.pagesModeLabel}</small></span><input data-field="amount" type="number" inputmode="numeric" min="1" max="10000000" step="1" value={initialInputs.amount} /></label>
+      <label class="n-field"><span>{ui.speedLabel}</span><input data-field="speed" type="number" inputmode="decimal" min="1" max="5000" step="1" value={initialInputs.speed} /><small data-speed-label>{ui.pagesPerHourLabel}</small></label>
+      <label class="n-field"><span>{ui.difficultyLabel}</span><select data-field="difficultyFactor"><option value="1.2">{ui.difficultyLightLabel}</option><option value="1" selected>{ui.difficultyStandardLabel}</option><option value="0.8">{ui.difficultyDenseLabel}</option></select></label>
+      <label class="n-field" data-pages-only><span>{ui.wordsPerPageLabel}</span><input data-field="wordsPerPage" type="number" inputmode="numeric" min="100" max="500" step="25" value={initialInputs.wordsPerPage} /><small>{ui.wordsPerPageHint}</small></label>
+      <label class="n-field"><span>{ui.sessionMinutesLabel}</span><input data-field="sessionMinutes" type="number" inputmode="numeric" min="5" max="240" step="5" value={initialInputs.sessionMinutes} /><small>{ui.minutesRangeLabel}</small></label>
+      <label class="n-field"><span>{ui.sessionsPerDayLabel}</span><input data-field="sessionsPerDay" type="number" inputmode="numeric" min="1" max="8" step="1" value={initialInputs.sessionsPerDay} /></label>
+      <label class="n-field"><span>{ui.daysPerWeekLabel}</span><input data-field="daysPerWeek" type="number" inputmode="numeric" min="1" max="7" step="1" value={initialInputs.daysPerWeek} /></label>
+      <label class="n-field"><span>{ui.startDateLabel}</span><input data-field="startDate" type="date" value={initialInputs.startDate} /></label>
+      <label class="n-field"><span>{ui.deadlineLabel}</span><input data-field="deadline" type="date" value={initialInputs.deadline} /></label>
+    </div>
+    <div class="n-speed-test">
+      <div class="n-panel-label"><span>{ui.speedTestLabel}</span><span>{ui.speedTestHint}</span></div>
+      <label class="n-field"><span>{ui.speedTestPromptLabel}</span><textarea data-speed-test-text rows="3" placeholder={ui.speedTestPlaceholder}></textarea></label>
+      <div class="n-speed-test-actions"><button type="button" data-speed-test-action>{ui.speedTestStartLabel}</button></div>
+      <p class="n-speed-test-status" data-speed-test-status aria-live="polite">{ui.speedTestIdle}</p>
+      <div class="n-speed-test-result"><span>{ui.speedTestElapsedLabel}</span><strong data-speed-test-elapsed>0.0 {ui.speedTestSecondsLabel}</strong><span>{ui.speedTestRateLabel}</span><strong data-speed-test-rate>-</strong><button type="button" data-speed-test-use hidden>{ui.speedTestUseLabel}</button></div>
+    </div>
+    <div class="n-presets"><span>{ui.presetLabel}</span><div><button type="button" data-preset="steady">{ui.presetSteadyLabel}</button><button type="button" data-preset="weekend">{ui.presetWeekendLabel}</button><button type="button" data-preset="academic">{ui.presetAcademicLabel}</button></div></div>
+  </div>
+  <div class="n-plan" aria-label={ui.planLabel} aria-live="polite">
+    <div class="n-status" data-status="tight"><span class="n-status-dot" aria-hidden="true"></span><div><strong data-status-title>{ui.statusTight}</strong><p data-status-detail>{ui.statusTightDetail}</p></div></div>
+    <div class="n-output-grid">
+      <div class="n-output-card"><span>{ui.timeNeededLabel}</span><strong data-output="time">{formatInitialDuration(initialCalculation.minutesNeeded)}</strong></div>
+      <div class="n-output-card"><span>{ui.readingDaysLabel}</span><strong data-output="days">{initialCalculation.readingDaysNeeded}</strong></div>
+      <div class="n-output-card"><span>{ui.capacityLabel}</span><strong data-output="capacity">{initialCalculation.availableReadingDays}</strong></div>
+      <div class="n-output-card"><span>{ui.dailyPaceLabel}</span><strong data-output="pace">{initialPace}</strong></div>
+      <div class="n-output-card" data-pages-output><span>{ui.estimatedWordsLabel}</span><strong data-output="estimatedWords">{initialEstimatedWords}</strong></div>
+      <div class="n-output-card"><span>{ui.sessionTargetLabel}</span><strong data-output="session">{initialSession}</strong></div>
+      <div class="n-output-card"><span>{ui.catchUpLabel}</span><strong data-output="catchUp">{initialBuffer}</strong></div>
+      <div class="n-output-card n-output-wide"><span>{ui.finishDateLabel}</span><strong data-output="finish">{formatInitialDate(initialCalculation.finishDate)}</strong></div>
+    </div>
+    <div class="n-timeline-panel"><div class="n-panel-label"><span>{ui.milestoneLabel}</span><span>{ui.timelineLabel}</span></div><div data-timeline set:html={createTimelineMarkup(initialCalculation, ui)}></div><p>{ui.calendarHint}</p><button class="n-export-calendar" type="button" data-export-ics>{ui.exportCalendarLabel}</button></div>
+    <p class="n-source">{ui.sourceLabel}</p>
+  </div>
+</div>
+
+<script>
+  import { initBookReadingPlanner } from './controller';
+
+  const root = document.querySelector<HTMLElement>('[data-tool="book-reading-time-deadline-planner"]');
+  const data = root?.querySelector<HTMLScriptElement>('[data-ui]');
+  if (root && data) initBookReadingPlanner(root, JSON.parse(data.textContent || '{}'));
+</script>
+
+<style>
+  @import url('./book-reading-time-deadline-planner.css');
+</style>