@jjlmoya/utils-travel 1.15.0 → 1.17.0

package/package.json

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

@@ -0,0 +1,60 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_ENTRIES } from '../entries';
+import type { KnownLocale } from '../types';
+
+interface ExpectedCounts {
+  seo: number;
+  faq: number;
+  howTo: number;
+}
+
+function countItems(arr: unknown[] | undefined): number {
+  return arr?.length ?? 0;
+}
+
+async function verifyLocaleParity(
+  entry: typeof ALL_ENTRIES[number],
+  loc: KnownLocale,
+  expected: ExpectedCounts,
+): Promise<void> {
+  const locContent = await entry.i18n[loc]?.();
+  expect(locContent, `Locale ${loc} missing content`).toBeDefined();
+
+  const locSeoCount = countItems(locContent?.seo);
+  const locFaqCount = countItems(locContent?.faq);
+  const locHowToCount = countItems(locContent?.howTo);
+
+  expect(
+    locSeoCount,
+    `Locale ${loc} SEO sections count (${locSeoCount}) must match EN (${expected.seo})`,
+  ).toBe(expected.seo);
+  expect(
+    locFaqCount,
+    `Locale ${loc} FAQ items count (${locFaqCount}) must match EN (${expected.faq})`,
+  ).toBe(expected.faq);
+  expect(
+    locHowToCount,
+    `Locale ${loc} HowTo steps count (${locHowToCount}) must match EN (${expected.howTo})`,
+  ).toBe(expected.howTo);
+}
+
+describe('SEO & i18n Structural Parity Suite', () => {
+  ALL_ENTRIES.forEach((entry) => {
+    describe(`Tool: ${entry.id}`, () => {
+      it('all 15 locales should have identical SEO section counts and types as English', async () => {
+        const enContent = await entry.i18n.en?.();
+        expect(enContent).toBeDefined();
+        const expected: ExpectedCounts = {
+          seo: countItems(enContent?.seo),
+          faq: countItems(enContent?.faq),
+          howTo: countItems(enContent?.howTo),
+        };
+
+        const locales = Object.keys(entry.i18n) as KnownLocale[];
+        for (const loc of locales) {
+          await verifyLocaleParity(entry, loc, expected);
+        }
+      });
+    });
+  });
+});

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/tests/translation_copy.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it } from 'vitest';
+import { ALL_ENTRIES } from '../entries';
+
+const COPY_THRESHOLD = 0.9;
+
+const STRUCTURAL_KEYS = new Set([
+  '@context',
+  '@type',
+  'applicationCategory',
+  'columns',
+  'highlight',
+  'icon',
+  'level',
+  'operatingSystem',
+  'position',
+  'positive',
+  'price',
+  'priceCurrency',
+  'slug',
+  'trend',
+  'type',
+  'url',
+  'value',
+  'variant',
+]);
+
+function normalizeText(value: string): string {
+  return value
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/&(?:amp|lt|gt|quot|apos|nbsp);/gi, ' ')
+    .replace(/[\u2018\u2019]/g, "'")
+    .replace(/[\u201c\u201d]/g, '"')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .toLocaleLowerCase();
+}
+
+function collectText(value: unknown, path: string, parts: string[]): void {
+  if (typeof value === 'string') {
+    const normalized = normalizeText(value);
+    if (normalized.length >= 2) parts.push(normalized);
+    return;
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((item, index) => collectText(item, `${path}[${index}]`, parts));
+    return;
+  }
+
+  if (!value || typeof value !== 'object') return;
+
+  Object.entries(value).forEach(([key, child]) => {
+    if (STRUCTURAL_KEYS.has(key)) return;
+    collectText(child, `${path}.${key}`, parts);
+  });
+}
+
+function localeCorpus(content: unknown): string {
+  if (!content || typeof content !== 'object') return '';
+
+  const record = content as Record<string, unknown>;
+  const parts: string[] = [];
+  collectText(record.title, 'title', parts);
+  collectText(record.description, 'description', parts);
+  collectText(record.faqTitle, 'faqTitle', parts);
+  collectText(record.faq, 'faq', parts);
+  collectText(record.seo, 'seo', parts);
+  collectText(record.schemas, 'schemas', parts);
+  return parts.join(' ');
+}
+
+function tokenCounts(text: string): Map<string, number> {
+  const counts = new Map<string, number>();
+  for (const token of text.match(/[\p{L}\p{N}]+/gu) ?? []) {
+    counts.set(token, (counts.get(token) ?? 0) + 1);
+  }
+  return counts;
+}
+
+function copySimilarity(left: string, right: string): number {
+  const leftCounts = tokenCounts(left);
+  const rightCounts = tokenCounts(right);
+  const leftTotal = [...leftCounts.values()].reduce((sum, count) => sum + count, 0);
+  const rightTotal = [...rightCounts.values()].reduce((sum, count) => sum + count, 0);
+  if (leftTotal === 0 || rightTotal === 0) return 0;
+
+  let shared = 0;
+  for (const [token, count] of leftCounts) {
+    shared += Math.min(count, rightCounts.get(token) ?? 0);
+  }
+  return (2 * shared) / (leftTotal + rightTotal);
+}
+
+describe('Locales must not copy another locale wholesale', () => {
+  ALL_ENTRIES.forEach((entry) => {
+    it(`${entry.id} is not at least ${COPY_THRESHOLD * 100}% identical to another locale`, async () => {
+      const corpora = new Map<string, string>();
+
+      for (const [locale, loader] of Object.entries(entry.i18n)) {
+        if (!loader) continue;
+        corpora.set(locale, localeCorpus(await loader()));
+      }
+
+      const locales = [...corpora.keys()];
+      const violations: string[] = [];
+
+      for (let leftIndex = 0; leftIndex < locales.length; leftIndex += 1) {
+        for (let rightIndex = leftIndex + 1; rightIndex < locales.length; rightIndex += 1) {
+          const left = locales[leftIndex];
+          const right = locales[rightIndex];
+          const similarity = copySimilarity(corpora.get(left) ?? '', corpora.get(right) ?? '');
+
+          if (similarity >= COPY_THRESHOLD) {
+            violations.push(`${left} ↔ ${right}: ${(similarity * 100).toFixed(1)}%`);
+          }
+        }
+      }
+
+      expect(violations, `Locale copy threshold exceeded in ${entry.id}`).toEqual([]);
+    });
+  });
+});
+
+

package/src/tool/luggage-calculator/i18n/fr.ts

@@ -384,6 +384,14 @@ const faq: LuggageCalculatorLocaleContent['faq'] = [
     question: "Puis-je emporter un sac à dos et une valise cabine gratuitement ?",
     answer: "Sur des compagnies comme Air France ou Lufthansa, oui. Sur des compagnies comme Ryanair ou Vueling (tarif de base), vous ne pouvez emporter qu'un petit sac sous le siège.",
   },
+  {
+    question: "Les dimensions des compagnies changent-elles souvent ?",
+    answer: "Oui. Vérifiez les conditions de votre billet et la page officielle de la compagnie avant le départ, car les franchises peuvent évoluer.",
+  },
+  {
+    question: "Comment mesurer une valise cabine correctement ?",
+    answer: "Mesurez la hauteur avec les roues et la poignée comprise, puis la largeur et la profondeur aux points les plus larges.",
+  },
 ];
 
 const howTo: LuggageCalculatorLocaleContent['howTo'] = [
@@ -391,6 +399,14 @@ const howTo: LuggageCalculatorLocaleContent['howTo'] = [
     name: "Recherchez votre compagnie",
     text: "Utilisez notre moteur de recherche pour voir les limites spécifiques de votre transporteur.",
   },
+  {
+    name: "Mesurez votre bagage",
+    text: "Mesurez la hauteur, la largeur et la profondeur avec les roues et les poignées dans leur position habituelle.",
+  },
+  {
+    name: "Vérifiez le poids",
+    text: "Pesez le bagage complet et comparez le résultat avec la franchise de votre billet.",
+  },
 ];
 
 const seo: LuggageCalculatorLocaleContent['seo'] = [
@@ -484,6 +500,15 @@ const seo: LuggageCalculatorLocaleContent['seo'] = [
         type: "paragraph",
         html: "Vérifier les mesures de vos bagages avant de partir pour l'aéroport vous fera économiser non seulement de l'argent (les frais de porte dépassent souvent 50€), mais aussi le stress de commencer vos vacances par une dispute au comptoir.",
     },
+    { type: "title", text: "Comparer les règles des compagnies", level: 3 },
+    { type: "paragraph", html: "Chaque transporteur applique sa propre combinaison de dimensions et de poids. Utilisez le moteur de recherche avant de fermer votre valise." },
+    { type: "title", text: "Mesurer l'article personnel", level: 3 },
+    { type: "paragraph", html: "L'article personnel doit généralement entrer sous le siège devant vous. Mesurez-le rempli, car les poches et les côtés bombés comptent." },
+    { type: "title", text: "Comprendre le bagage cabine", level: 3 },
+    { type: "paragraph", html: "Le trolley cabine est souvent inclus seulement avec certains tarifs. Vérifiez l'option de priorité ou le forfait bagage de votre réservation." },
+    { type: "title", text: "Pourquoi les centimètres comptent", level: 3 },
+    { type: "paragraph", html: "Un écart de quelques centimètres peut empêcher le bagage d'entrer dans le gabarit à la porte. Ne vous fiez pas uniquement au volume annoncé." },
+    { type: "tip", title: "Conseils pour le poids", html: "Placez les objets lourds près des roues et laissez une petite marge sous la limite autorisée. Vérifiez aussi les règles concernant les liquides et les batteries avant le départ." },
 ];
 
 const faqSchema: WithContext<FAQPage> = {

package/src/tool/mini-adventures/i18n/es.ts

@@ -228,7 +228,6 @@ const faq: ToolLocaleContent<MiniAdventuresUI>['faq'] = [
 
 const howTo: ToolLocaleContent<MiniAdventuresUI>['howTo'] = [
   { name: "Generar", text: "Pulsa el botón de generación para que el algoritmo seleccione una categoría y un reto aleatorio." },
-  { name: "Leer", text: "El sistema te dará una instrucción clara sobre qué hacer hoy (ej. ir a un lugar nuevo, probar un sabor diferente)." },
   { name: "Realizar", text: "Lo divertido es la espontaneidad. Intenta realizar el reto antes de que termine el día." },
   { name: "Completar", text: "Marca el reto como hecho para ganar insignias exclusivas y progresar." }
 ];

package/src/tool/mini-adventures/i18n/fr.ts

@@ -76,13 +76,20 @@ const seo: ToolLocaleContent<MiniAdventuresUI>['seo'] = [
     columns: 2
   },
   { type: "card", icon: "mdi:clock-fast", title: "Pas d'excuses", html: "Des aventures qui demandent moins de 15 minutes et zéro euro. Le temps n'est pas une barrière à la curiosité." },
-  { type: "card", icon: "mdi:lock-outline", title: "Confidentialité Totale", html: "Vos progrès sont sauvegardés uniquement sur votre appareil." }
+  { type: "card", icon: "mdi:lock-outline", title: "Confidentialité Totale", html: "Vos progrès sont sauvegardés uniquement sur votre appareil." },
+  { type: "title", text: "Le cerveau aime la nouveauté", level: 3 },
+  { type: "paragraph", html: "Une variation simple dans une journée prévisible attire l'attention et crée une occasion d'apprentissage sans exiger un grand voyage." },
+  { type: "title", text: "Le bien-être émotionnel", level: 3 },
+  { type: "paragraph", html: "Une surprise positive et maîtrisée peut améliorer l'humeur. Choisissez un défi compatible avec votre énergie et votre environnement." },
+  { type: "title", text: "Explorer son quartier", level: 3 },
+  { type: "paragraph", html: "Les rues et bâtiments proches offrent souvent des détails inconnus. L'objectif est de regarder autrement ce que vous connaissez déjà." },
 ];
 
 const faq: ToolLocaleContent<MiniAdventuresUI>['faq'] = [
   { question: "Qu'est-ce qu'une micro-aventure ?", answer: "C'est une petite aventure proche de chez vous, peu coûteuse et simple. Le terme cherche à démontrer qu'il n'est pas nécessaire d'aller à l'autre bout du monde pour vivre des expériences passionnantes." },
   { question: "À quoi sert ce générateur ?", answer: "Il sert à combattre la paralysie de l'analyse. Parfois, nous voulons faire quelque chose de différent mais nous ne savons pas quoi." },
-  { question: "Dois-je m'enregistrer ?", answer: "Non. C'est un outil de confidentialité totale. Les défis sont générés localement." }
+  { question: "Dois-je m'enregistrer ?", answer: "Non. C'est un outil de confidentialité totale. Les défis sont générés localement." },
+  { question: "Comment choisir un défi ?", answer: "Générez un défi adapté à votre quotidien, puis recommencez si les conditions de sécurité ou de temps ne conviennent pas." }
 ];
 
 const howTo: ToolLocaleContent<MiniAdventuresUI>['howTo'] = [

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>