@jjlmoya/utils-travel 1.15.0 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-travel",
-    "version": "1.15.0",
+    "version": "1.16.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -28,7 +28,7 @@
         "check": "astro check",
         "type-check": "astro check",
         "test": "vitest run",
-        "preversion": "npm run lint && npm run test",
+        "preversion": "npm run lint && npm run test && npm run build",
         "postversion": "git push && git push --tags",
         "patch": "npm version patch",
         "minor": "npm version minor",

package/src/entries.ts

@@ -6,9 +6,12 @@ export { suitcaseChecklist } from './tool/suitcase-checklist/entry';
 export type { ChecklistItem, ChecklistCategory, SuitcaseChecklistUI } from './tool/suitcase-checklist/entry';
 export { tipCalculator } from './tool/tip-calculator/entry';
 export type { TipCountry, TipCalculatorUI } from './tool/tip-calculator/entry';
+export { schengenCalculator } from './tool/schengen-calculator/entry';
+export type { SchengenCalculatorUI } from './tool/schengen-calculator/entry';
 export { travelCategory } from './category';
 import { luggageCalculator } from './tool/luggage-calculator/entry';
 import { miniAdventures } from './tool/mini-adventures/entry';
 import { suitcaseChecklist } from './tool/suitcase-checklist/entry';
 import { tipCalculator } from './tool/tip-calculator/entry';
-export const ALL_ENTRIES = [luggageCalculator, miniAdventures, suitcaseChecklist, tipCalculator];
+import { schengenCalculator } from './tool/schengen-calculator/entry';
+export const ALL_ENTRIES = [luggageCalculator, miniAdventures, suitcaseChecklist, tipCalculator, schengenCalculator];

package/src/index.ts

@@ -20,3 +20,4 @@ export { luggageCalculator, LUGGAGE_CALCULATOR_TOOL } from './tool/luggage-calcu
 export { tipCalculator, TIP_CALCULATOR_TOOL } from './tool/tip-calculator';
 export { suitcaseChecklist, SUITCASE_CHECKLIST_TOOL } from './tool/suitcase-checklist';
 export { miniAdventures, MINI_ADVENTURES_TOOL } from './tool/mini-adventures';
+export { schengenCalculator, SCHENGEN_CALCULATOR_TOOL } from './tool/schengen-calculator';

package/src/pages/[locale]/[slug].astro

@@ -15,7 +15,7 @@ export async function getStaticPaths() {
   const paths = [];
 
   for (const { entry, Component: lazyComp } of ALL_TOOLS) {
-    const { default: Component } = await lazyComp();
+    const { default: Component } = (await lazyComp()) as { default: unknown };
     const localeEntries = Object.entries(entry.i18n) as [
       KnownLocale,
       () => Promise<ToolLocaleContent>,

package/src/tests/locale_completeness.test.ts

@@ -23,8 +23,8 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('all 4 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(4);
+  it('all 5 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(5);
   });
 });
 

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { travelCategory } from '../category';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 4 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(4);
+    it('should have 5 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(5);
     });
 
     it('travelCategory should be defined', () => {

package/src/tool/schengen-calculator/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { bibliographyEntries } from './bibliography';
+---
+
+<SharedBibliography links={bibliographyEntries} />

package/src/tool/schengen-calculator/bibliography.ts

@@ -0,0 +1,18 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliographyEntries: BibliographyEntry[] = [
+  {
+    name: 'European Commission - Visa Policy and Schengen Borders Code',
+    url: 'https://home-affairs.ec.europa.eu/policies/schengen/visa-policy_en',
+  },
+  {
+    name: 'EUR-Lex - Regulation (EU) 2016/399 (Schengen Borders Code)',
+    url: 'https://eur-lex.europa.eu/eli/reg/2016/399/oj/eng',
+  },
+  {
+    name: 'European External Action Service (EEAS) - Travelling to the Schengen Area',
+    url: 'https://www.eeas.europa.eu/eeas/travel-europe-european-entryexit-system-ees_en',
+  },
+];
+
+export const bibliography = bibliographyEntries;

package/src/tool/schengen-calculator/component.astro

@@ -0,0 +1,199 @@
+---
+import type { SchengenCalculatorUI } from './ui';
+import './schengen-calculator.css';
+
+interface Props {
+  ui?: SchengenCalculatorUI;
+}
+
+const { ui: t } = Astro.props;
+const defaultUI: SchengenCalculatorUI = {
+  verdictSafeTitle: 'Safe to Travel (Within Legal Limits)',
+  verdictWarningTitle: 'Caution: Approaching 90-Day Limit',
+  verdictOverstayTitle: 'Illegal Overstay Detected',
+  daysRemainingSub: 'Days Allowed Remaining',
+  daysUsedSub: 'Days Used in 180-Day Window',
+  maxStaySub: 'Max Continuous Stay from Date',
+  fullResetSub: 'Full 90-Day Reset Date',
+  plannerHeading: '1. Check Status on Target Date',
+  plannerEntryLabel: 'Evaluation Date (Entry / Flight Date)',
+  quickDatesLabel: 'Jump to Date',
+  presetToday: 'Today',
+  presetPlus7: '+1 Week',
+  presetPlus14: '+2 Weeks',
+  presetPlus30: '+1 Month',
+  tripsHeading: '2. Your Schengen Trips (Past & Planned)',
+  addTripBtn: '+ Add Trip',
+  emptyTripsMsg: 'No trips added yet. Add past or planned trips to calculate your Schengen allowance.',
+  colArrival: 'Entry (Arrival)',
+  colDeparture: 'Exit (Departure)',
+  colDestination: 'Country / Notes',
+  colDays: 'Days',
+  sampleBtn: 'Load Sample Trips',
+  clearBtn: 'Clear All',
+  timelineTitle: '180-Day Rolling Window',
+  legendInSchengen: 'In Schengen',
+  legendOutside: 'Outside',
+  legendOverstay: 'Overstay',
+  bannerSafe: 'On {date}, you will have used {used} ({rem} available).',
+  bannerWarning: 'On {date}, you will have used {used} (only {rem} remaining).',
+  bannerOverstay: 'Overstay violation detected starting on {date}. Your itinerary exceeds the legal limit by {days}.',
+  unitDays: 'days',
+  notesPlaceholder: 'e.g. France, Spain',
+  sampleNotes1: 'Italy Roadtrip (20 days)',
+  sampleNotes2: 'Germany & Austria (20 days)',
+  sampleNotesDefault: 'France & Spain',
+};
+
+const ui = { ...defaultUI, ...(t ?? {}) };
+const uiJson = JSON.stringify(ui);
+---
+
+<div class="schengen-card" id="sc-app" data-i18n={uiJson}>
+  <div class="sc-hero">
+    <div id="sc-status-badge" class="sc-status-pill legal">
+      <span id="sc-status-text">{ui.verdictSafeTitle}</span>
+    </div>
+
+    <div class="sc-explanation-banner" id="sc-explanation-banner">
+      On <strong id="sc-banner-date">--</strong>, you will have used <strong id="sc-banner-used">0 {ui.unitDays}</strong> (<strong id="sc-banner-rem">90 {ui.unitDays} available</strong>).
+    </div>
+
+    <div class="sc-gauge-wrap">
+      <svg class="sc-gauge-svg" viewBox="0 0 120 120">
+        <circle class="sc-gauge-track" cx="60" cy="60" r="50" />
+        <circle
+          class="sc-gauge-bar"
+          id="sc-gauge-circle"
+          cx="60"
+          cy="60"
+          r="50"
+          stroke-dasharray="314.159"
+          stroke-dashoffset="314.159"
+        />
+      </svg>
+      <div class="sc-gauge-content">
+        <span class="sc-gauge-num" id="sc-days-remaining">90</span>
+        <span class="sc-gauge-caption" id="sc-gauge-caption">{ui.daysRemainingSub}</span>
+      </div>
+    </div>
+
+    <div class="sc-metrics-grid">
+      <div class="sc-metric-card">
+        <span class="sc-metric-title">{ui.daysUsedSub}</span>
+        <span class="sc-metric-val" id="sc-days-used">0 / 90</span>
+      </div>
+      <div class="sc-metric-card">
+        <span class="sc-metric-title">{ui.maxStaySub}</span>
+        <span class="sc-metric-val" id="sc-max-continuous">90 {ui.unitDays}</span>
+      </div>
+      <div class="sc-metric-card">
+        <span class="sc-metric-title">{ui.fullResetSub}</span>
+        <span class="sc-metric-val" id="sc-reset-date">--</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="sc-divider"></div>
+
+  <div class="sc-body">
+    <div class="sc-section-block">
+      <div class="sc-section-header">
+        <span class="sc-section-title">{ui.plannerHeading}</span>
+        <div class="sc-chip-group">
+          <button type="button" class="sc-chip-mini" id="sc-preset-today">{ui.presetToday}</button>
+          <button type="button" class="sc-chip-mini" id="sc-preset-plus7">{ui.presetPlus7}</button>
+          <button type="button" class="sc-chip-mini" id="sc-preset-plus14">{ui.presetPlus14}</button>
+          <button type="button" class="sc-chip-mini" id="sc-preset-plus30">{ui.presetPlus30}</button>
+        </div>
+      </div>
+      <div class="sc-planner-box">
+        <div class="sc-field-group">
+          <label for="sc-ref-date-input" class="sc-field-label">{ui.plannerEntryLabel}</label>
+          <div class="sc-date-wrap">
+            <input type="date" id="sc-ref-date-input" class="sc-input-control" />
+            <span class="sc-date-icon-btn" aria-hidden="true">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zM9 14H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2zm-8 4H7v-2h2v2zm4 4h-2v-2h2v2zm4 0h-2v-2h2v2z"/>
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="sc-section-block">
+      <div class="sc-section-header">
+        <span class="sc-section-title">{ui.tripsHeading}</span>
+      </div>
+      <div class="sc-trips-table-header">
+        <span>{ui.colArrival}</span>
+        <span>{ui.colDeparture}</span>
+        <span>{ui.colDestination}</span>
+        <span style="text-align:center;">{ui.colDays}</span>
+        <span></span>
+      </div>
+      <div class="sc-trips-container" id="sc-trips-container"></div>
+      <div id="sc-empty-msg" class="sc-empty-box">{ui.emptyTripsMsg}</div>
+    </div>
+
+    <div class="sc-timeline-bar-wrap">
+      <div class="sc-ribbon-legend">
+        <span>{ui.timelineTitle}</span>
+        <div class="sc-legend-items">
+          <div class="sc-leg-item">
+            <span class="sc-dot spent"></span>
+            <span>{ui.legendInSchengen}</span>
+          </div>
+          <div class="sc-leg-item">
+            <span class="sc-dot free"></span>
+            <span>{ui.legendOutside}</span>
+          </div>
+          <div class="sc-leg-item">
+            <span class="sc-dot overstay"></span>
+            <span>{ui.legendOverstay}</span>
+          </div>
+        </div>
+      </div>
+      <div class="sc-ribbon" id="sc-timeline-ribbon"></div>
+    </div>
+  </div>
+
+  <div class="sc-footer-actions">
+    <div class="sc-chip-group">
+      <button type="button" class="sc-btn-ghost" id="sc-sample-btn">{ui.sampleBtn}</button>
+      <button type="button" class="sc-btn-ghost" id="sc-clear-btn">{ui.clearBtn}</button>
+    </div>
+    <button type="button" class="sc-btn-main" id="sc-add-trip-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
+      </svg>
+      <span>{ui.addTripBtn}</span>
+    </button>
+  </div>
+</div>
+
+<script>
+  import type { SchengenCalculatorUI } from './ui';
+  import { SchengenCalculatorController } from './controller';
+
+  function initApp() {
+    const appEl = document.getElementById('sc-app');
+    let i18n = {} as SchengenCalculatorUI;
+    if (appEl && appEl.dataset.i18n) {
+      try {
+        i18n = JSON.parse(appEl.dataset.i18n);
+      } catch {
+        return;
+      }
+    }
+    const controller = new SchengenCalculatorController(i18n);
+    controller.init();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initApp);
+  } else {
+    initApp();
+  }
+</script>

package/src/tool/schengen-calculator/controller.ts

@@ -0,0 +1,232 @@
+import type { SchengenCalculatorUI } from './ui';
+import {
+  parseDate,
+  formatDate,
+  addDays,
+  getDaysBetween,
+  calculateMaxContinuousStay,
+  findEarliestResetDate,
+  type TripInterval,
+} from './logic';
+import {
+  loadSavedTrips,
+  saveTripsToStorage,
+  loadSavedReferenceDate,
+  saveReferenceDateToStorage,
+} from './storage';
+import { scanOverstayDetails, hasTripOverstay } from './evaluator';
+import {
+  renderTimeline,
+  updateGaugeDisplay,
+  renderOverstayBanner,
+  renderNormalBanner,
+  buildTripRowHtml,
+} from './dom-views';
+
+export class SchengenCalculatorController {
+  private trips: TripInterval[] = [];
+  private referenceDateStr: string;
+  private readonly todayStr: string;
+  private readonly i18n: SchengenCalculatorUI;
+
+  constructor(i18n: SchengenCalculatorUI) {
+    this.i18n = i18n;
+    this.todayStr = formatDate(new Date());
+    this.referenceDateStr = this.todayStr;
+  }
+
+  public init(): void {
+    this.trips = loadSavedTrips();
+    this.referenceDateStr = loadSavedReferenceDate(this.todayStr);
+
+    const refInput = document.getElementById('sc-ref-date-input') as HTMLInputElement;
+    if (refInput) {
+      refInput.value = this.referenceDateStr;
+      const onChange = (e: Event) => {
+        this.referenceDateStr = (e.target as HTMLInputElement).value || this.todayStr;
+        this.recalculate();
+      };
+      refInput.addEventListener('change', onChange);
+      refInput.addEventListener('input', onChange);
+    }
+
+    this.setupPresets(refInput);
+    this.setupGlobalActions();
+    this.renderTrips();
+  }
+
+  private recalculate(): void {
+    const refDate = parseDate(this.referenceDateStr);
+    const windowStart = addDays(refDate, -179);
+    const scan = scanOverstayDetails(this.trips, refDate);
+
+    this.updateStatusViews(scan, refDate);
+
+    const resetEl = document.getElementById('sc-reset-date');
+    if (resetEl) resetEl.textContent = findEarliestResetDate(refDate, this.trips);
+
+    renderTimeline(windowStart, refDate, this.trips, this.i18n);
+    saveTripsToStorage(this.trips);
+    saveReferenceDateToStorage(this.referenceDateStr);
+  }
+
+  private updateStatusViews(
+    scan: ReturnType<typeof scanOverstayDetails>,
+    refDate: Date
+  ): void {
+    const maxCont = document.getElementById('sc-max-continuous');
+    if (scan.firstOverstayDate) {
+      const cap = `${this.i18n.verdictOverstayTitle} (+${scan.maxOverstayDays} ${this.i18n.unitDays})`;
+      updateGaugeDisplay(scan.peakDaysUsed, 0, true, cap);
+      renderOverstayBanner(scan.firstOverstayDate, scan.maxOverstayDays, this.i18n);
+      if (maxCont) {
+        maxCont.textContent = `0 ${this.i18n.unitDays}`;
+        maxCont.className = 'sc-metric-val is-overstay';
+      }
+    } else {
+      const remaining = Math.max(0, 90 - scan.daysUsedAtRef);
+      updateGaugeDisplay(scan.daysUsedAtRef, remaining, false, this.i18n.daysRemainingSub);
+      renderNormalBanner(this.referenceDateStr, scan.daysUsedAtRef, this.i18n);
+      if (maxCont) {
+        const cont = calculateMaxContinuousStay(refDate, this.referenceDateStr, this.trips);
+        maxCont.textContent = `${cont} ${this.i18n.unitDays}`;
+        maxCont.className = 'sc-metric-val';
+      }
+    }
+  }
+
+  private renderTrips(): void {
+    const container = document.getElementById('sc-trips-container');
+    const emptyMsg = document.getElementById('sc-empty-msg');
+    if (!container || !emptyMsg) return;
+
+    container.innerHTML = '';
+    if (this.trips.length === 0) {
+      emptyMsg.style.display = 'block';
+      this.recalculate();
+      return;
+    }
+
+    emptyMsg.style.display = 'none';
+    this.trips.forEach((trip) => {
+      container.appendChild(this.createTripRow(trip));
+    });
+    this.recalculate();
+  }
+
+  private createTripRow(trip: TripInterval): HTMLElement {
+    const row = document.createElement('div');
+    row.className = 'sc-trip-item';
+    const s = trip.startDate ? parseDate(trip.startDate) : null;
+    const e = trip.endDate ? parseDate(trip.endDate) : null;
+    const duration = s && e && s <= e ? getDaysBetween(s, e) : 0;
+    const isOverstay = hasTripOverstay(trip, this.trips);
+
+    if (isOverstay) row.classList.add('is-overstay');
+
+    row.innerHTML = buildTripRowHtml(trip, duration, isOverstay, this.i18n);
+    this.bindRowEvents(row, trip);
+    return row;
+  }
+
+  private bindRowEvents(row: HTMLElement, trip: TripInterval): void {
+    const updateHandler = (ev: Event) => {
+      const target = ev.target as HTMLInputElement;
+      const field = target.dataset.field as keyof TripInterval;
+      if (field) {
+        trip[field] = target.value;
+        saveTripsToStorage(this.trips);
+        this.recalculate();
+        this.updateBadge(row, trip);
+      }
+    };
+
+    row.querySelectorAll('input').forEach((input) => {
+      input.addEventListener('change', updateHandler);
+      input.addEventListener('input', updateHandler);
+    });
+
+    const removeBtn = row.querySelector('[data-action="remove"]');
+    if (removeBtn) {
+      removeBtn.addEventListener('click', () => {
+        this.trips = this.trips.filter((t) => t.id !== trip.id);
+        saveTripsToStorage(this.trips);
+        this.renderTrips();
+      });
+    }
+  }
+
+  private updateBadge(row: HTMLElement, trip: TripInterval): void {
+    const s = trip.startDate ? parseDate(trip.startDate) : null;
+    const e = trip.endDate ? parseDate(trip.endDate) : null;
+    const dur = s && e && s <= e ? getDaysBetween(s, e) : 0;
+    const badge = row.querySelector('.sc-trip-badge');
+    if (badge) badge.textContent = dur > 0 ? `${dur}d` : '--';
+  }
+
+  private setupPresets(refInput: HTMLInputElement | null): void {
+    const presets = [
+      { id: 'sc-preset-today', days: 0 },
+      { id: 'sc-preset-plus7', days: 7 },
+      { id: 'sc-preset-plus14', days: 14 },
+      { id: 'sc-preset-plus30', days: 30 },
+    ];
+    presets.forEach(({ id, days }) => {
+      const btn = document.getElementById(id);
+      if (!btn) return;
+      btn.addEventListener('click', () => {
+        this.referenceDateStr = formatDate(addDays(parseDate(this.todayStr), days));
+        if (refInput) refInput.value = this.referenceDateStr;
+        this.recalculate();
+      });
+    });
+  }
+
+  private setupGlobalActions(): void {
+    const addBtn = document.getElementById('sc-add-trip-btn');
+    if (addBtn) {
+      addBtn.addEventListener('click', () => {
+        const ref = parseDate(this.referenceDateStr);
+        this.trips.push({
+          id: 'trip_' + Date.now(),
+          startDate: formatDate(addDays(ref, -30)),
+          endDate: formatDate(addDays(ref, -16)),
+          notes: this.i18n.sampleNotesDefault,
+        });
+        this.renderTrips();
+      });
+    }
+    this.setupSampleAndClearButtons();
+  }
+
+  private setupSampleAndClearButtons(): void {
+    const sampleBtn = document.getElementById('sc-sample-btn');
+    if (sampleBtn) {
+      sampleBtn.addEventListener('click', () => {
+        const ref = parseDate(this.referenceDateStr);
+        this.trips = [
+          {
+            id: 'sample_1',
+            startDate: formatDate(addDays(ref, -110)),
+            endDate: formatDate(addDays(ref, -91)),
+            notes: this.i18n.sampleNotes1,
+          },
+          {
+            id: 'sample_2',
+            startDate: formatDate(addDays(ref, -50)),
+            endDate: formatDate(addDays(ref, -31)),
+            notes: this.i18n.sampleNotes2,
+          },
+        ];
+        this.renderTrips();
+      });
+    }
+    const clearBtn = document.getElementById('sc-clear-btn');
+    if (clearBtn) {
+      clearBtn.addEventListener('click', () => {
+        this.trips = [];
+        this.renderTrips();
+      });
+    }
+  }
+}

package/src/tool/schengen-calculator/dom-views.ts

@@ -0,0 +1,122 @@
+import type { SchengenCalculatorUI } from './ui';
+import { formatDate, addDays, isDateInTrips, countDaysSpentInWindow, type TripInterval } from './logic';
+
+export function renderTimeline(start: Date, end: Date, trips: TripInterval[], i18n: SchengenCalculatorUI): void {
+  const ribbon = document.getElementById('sc-timeline-ribbon');
+  if (!ribbon) return;
+  ribbon.innerHTML = '';
+
+  let cur = new Date(start.getTime());
+  while (cur <= end) {
+    const seg = document.createElement('div');
+    seg.className = 'sc-seg';
+    const isSpent = isDateInTrips(cur, trips);
+    if (isSpent) {
+      seg.classList.add('spent');
+      const curStart = addDays(cur, -179);
+      if (countDaysSpentInWindow(curStart, cur, trips) > 90) {
+        seg.classList.add('overstay');
+      }
+    }
+    seg.title = `${formatDate(cur)}: ${isSpent ? i18n.legendInSchengen : i18n.legendOutside}`;
+    ribbon.appendChild(seg);
+    cur = addDays(cur, 1);
+  }
+}
+
+export function updateGaugeDisplay(used: number, remaining: number, isOverstay: boolean, captionText: string): void {
+  const dRem = document.getElementById('sc-days-remaining');
+  const dUsed = document.getElementById('sc-days-used');
+  const gauge = document.getElementById('sc-gauge-circle');
+  const caption = document.getElementById('sc-gauge-caption');
+
+  if (dRem) {
+    dRem.textContent = String(remaining);
+    dRem.className = isOverstay ? 'sc-gauge-num is-overstay' : 'sc-gauge-num';
+  }
+  if (caption) caption.textContent = captionText;
+  if (dUsed) {
+    dUsed.textContent = `${used} / 90`;
+    dUsed.className = isOverstay ? 'sc-metric-val is-overstay' : 'sc-metric-val';
+  }
+  if (gauge) {
+    const offset = isOverstay ? 0 : 314.159 - Math.min(1, used / 90) * 314.159;
+    gauge.style.strokeDashoffset = String(offset);
+    gauge.setAttribute('class', getGaugeBarClass(used, isOverstay));
+  }
+}
+
+function getGaugeBarClass(used: number, isOverstay: boolean): string {
+  if (isOverstay) return 'sc-gauge-bar is-overstay';
+  if (used >= 75) return 'sc-gauge-bar is-warning';
+  return 'sc-gauge-bar';
+}
+
+export function renderOverstayBanner(overstayDate: string, overstayDays: number, i18n: SchengenCalculatorUI): void {
+  const badge = document.getElementById('sc-status-badge');
+  const badgeText = document.getElementById('sc-status-text');
+  const banner = document.getElementById('sc-explanation-banner');
+  if (!badge || !badgeText || !banner) return;
+
+  const overstayLabel = `${i18n.verdictOverstayTitle} (+${overstayDays} ${i18n.unitDays})`;
+  badge.className = 'sc-status-pill overstay';
+  badgeText.textContent = overstayLabel;
+  banner.className = 'sc-explanation-banner is-overstay';
+  banner.innerHTML = i18n.bannerOverstay
+    .replace('{date}', `<strong>${overstayDate}</strong>`)
+    .replace('{days}', `<strong>${overstayDays} ${i18n.unitDays}</strong>`);
+}
+
+export function renderNormalBanner(refDateStr: string, used: number, i18n: SchengenCalculatorUI): void {
+  const badge = document.getElementById('sc-status-badge');
+  const badgeText = document.getElementById('sc-status-text');
+  const banner = document.getElementById('sc-explanation-banner');
+  if (!badge || !badgeText || !banner) return;
+
+  const rem = Math.max(0, 90 - used);
+  const isWarn = used >= 75;
+  badge.className = isWarn ? 'sc-status-pill warning' : 'sc-status-pill legal';
+  badgeText.textContent = isWarn ? i18n.verdictWarningTitle : i18n.verdictSafeTitle;
+  banner.className = 'sc-explanation-banner';
+
+  const tpl = isWarn ? i18n.bannerWarning : i18n.bannerSafe;
+  banner.innerHTML = tpl
+    .replace('{date}', `<strong>${refDateStr}</strong>`)
+    .replace('{used}', `<strong>${used} ${i18n.unitDays}</strong>`)
+    .replace('{rem}', `<strong>${rem} ${i18n.unitDays}</strong>`);
+}
+
+function buildDateInputHtml(id: string, val: string, field: string, label: string): string {
+  return `
+    <div>
+      <div class="sc-date-wrap">
+        <input type="date" id="${id}" class="sc-input-control" value="${val}" data-field="${field}" aria-label="${label}" />
+        <span class="sc-date-icon-btn" aria-hidden="true">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zM9 14H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2zm-8 4H7v-2h2v2zm4 4h-2v-2h2v2zm4 0h-2v-2h2v2z"/>
+          </svg>
+        </span>
+      </div>
+    </div>
+  `;
+}
+
+export function buildTripRowHtml(trip: TripInterval, duration: number, isOverstay: boolean, i18n: SchengenCalculatorUI): string {
+  const badgeClass = isOverstay ? 'sc-trip-badge is-overstay' : 'sc-trip-badge';
+  const durLabel = duration > 0 ? `${duration}d` : '--';
+  const startHtml = buildDateInputHtml(`sc-start-${trip.id}`, trip.startDate, 'startDate', i18n.colArrival);
+  const endHtml = buildDateInputHtml(`sc-end-${trip.id}`, trip.endDate, 'endDate', i18n.colDeparture);
+  return `
+    ${startHtml}
+    ${endHtml}
+    <div class="sc-trip-notes-col">
+      <input type="text" id="sc-notes-${trip.id}" class="sc-input-control" value="${trip.notes || ''}" placeholder="${i18n.notesPlaceholder}" data-field="notes" aria-label="${i18n.colDestination}" />
+    </div>
+    <div class="${badgeClass}">${durLabel}</div>
+    <button type="button" class="sc-btn-del" data-action="remove" aria-label="Remove trip">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
+      </svg>
+    </button>
+  `;
+}