@jjlmoya/utils-tools 1.1.0

package/src/tool/routes/component.astro

@@ -0,0 +1,543 @@
+---
+import type { KnownLocale } from '../../types';
+import type { RoutesUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as RoutesUI;
+---
+
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+<script is:inline src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+
+<div class="rut-root" data-ui={JSON.stringify(t)}>
+  <div class="rut-layout">
+    <aside class="rut-sidebar">
+      <div class="rut-sidebar-header">
+        <h2 class="rut-sidebar-title">{t.titleSidebar}</h2>
+        <p class="rut-sidebar-desc">{t.descriptionSidebar}</p>
+      </div>
+
+      <div class="rut-list-wrapper">
+        <ul id="rut-points-list" class="rut-points-list">
+          <li id="rut-empty-state" class="rut-empty-state">
+            {t.emptyState}
+          </li>
+        </ul>
+      </div>
+
+      <div class="rut-actions">
+        <button id="rut-btn-optimize" class="rut-btn-primary" disabled>
+          <svg class="rut-btn-icon rut-icon-chart" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M3 3v18h18"></path>
+            <path d="M18.7 8l-5.1 5.2-2.8-2.7L7 14.3"></path>
+          </svg>
+          <svg class="rut-btn-icon rut-icon-spin" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10" stroke-opacity="0.25"></circle>
+            <path d="M12 2a10 10 0 0 1 10 10" stroke-opacity="0.75"></path>
+          </svg>
+          <span class="rut-btn-text">{t.btnOptimize}</span>
+        </button>
+
+        <button id="rut-btn-clear" class="rut-btn-secondary">
+          {t.btnClear}
+        </button>
+      </div>
+
+      <div id="rut-stats-panel" class="rut-stats-panel rut-hidden">
+        <div class="rut-stats-label">{t.labelDistance}</div>
+        <div id="rut-stats-value" class="rut-stats-value">0 km</div>
+      </div>
+    </aside>
+
+    <div class="rut-map-area">
+      <div id="rut-map" class="rut-map"></div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .rut-root {
+    --rut-accent: #06b6d4;
+    --rut-accent-hover: #0891b2;
+    --rut-sidebar-bg: #f8fafc;
+    --rut-sidebar-border: #e2e8f0;
+    --rut-map-bg: #f1f5f9;
+    --rut-text-main: #1e293b;
+    --rut-text-muted: #64748b;
+    --rut-item-bg: #fff;
+    --rut-item-border: #f1f5f9;
+    --rut-item-hover-border: rgba(6, 182, 212, 0.5);
+    --rut-badge-bg: rgba(207, 250, 254, 1);
+    --rut-badge-border: #a5f3fc;
+    --rut-badge-text: #0e7490;
+    --rut-stats-bg: rgba(236, 254, 255, 1);
+    --rut-stats-border: #a5f3fc;
+    --rut-stats-label: #164e63;
+    --rut-stats-value: #0891b2;
+    --rut-btn-clear-bg: #fff;
+    --rut-btn-clear-text: #334155;
+    --rut-btn-clear-border: #e2e8f0;
+    --rut-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  :global(.theme-dark) .rut-root {
+    --rut-sidebar-bg: rgba(15, 23, 42, 0.5);
+    --rut-sidebar-border: #1e293b;
+    --rut-map-bg: #1e293b;
+    --rut-text-main: #f1f5f9;
+    --rut-text-muted: #94a3b8;
+    --rut-item-bg: #1e293b;
+    --rut-item-border: #334155;
+    --rut-badge-bg: rgba(8, 145, 178, 0.3);
+    --rut-badge-border: #164e63;
+    --rut-badge-text: #67e8f9;
+    --rut-stats-bg: rgba(8, 145, 178, 0.2);
+    --rut-stats-border: rgba(8, 145, 178, 0.3);
+    --rut-stats-label: #a5f3fc;
+    --rut-stats-value: #22d3ee;
+    --rut-btn-clear-bg: #1e293b;
+    --rut-btn-clear-text: #cbd5e1;
+    --rut-btn-clear-border: #334155;
+    --rut-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+
+  .rut-layout {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 100px);
+    min-height: 500px;
+    max-height: 800px;
+  }
+
+  @media (min-width: 1024px) {
+    .rut-layout {
+      display: grid;
+      grid-template-columns: 320px 1fr;
+      flex-direction: unset;
+    }
+  }
+
+  .rut-sidebar {
+    display: flex;
+    flex-direction: column;
+    padding: 1.5rem;
+    background: var(--rut-sidebar-bg);
+    border-bottom: 1px solid var(--rut-sidebar-border);
+    overflow: hidden;
+    height: 50%;
+  }
+
+  @media (min-width: 1024px) {
+    .rut-sidebar {
+      height: 100%;
+      border-bottom: none;
+      border-right: 1px solid var(--rut-sidebar-border);
+      order: 1;
+    }
+  }
+
+  .rut-sidebar-header {
+    margin-bottom: 1.25rem;
+  }
+
+  .rut-sidebar-title {
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: var(--rut-text-main);
+    margin: 0 0 0.375rem;
+  }
+
+  .rut-sidebar-desc {
+    font-size: 0.875rem;
+    color: var(--rut-text-muted);
+    margin: 0;
+  }
+
+  .rut-list-wrapper {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+    margin-bottom: 1rem;
+    padding-right: 0.25rem;
+  }
+
+  .rut-list-wrapper::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .rut-list-wrapper::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .rut-list-wrapper::-webkit-scrollbar-thumb {
+    background-color: rgba(156, 163, 175, 0.5);
+    border-radius: 20px;
+  }
+
+  .rut-points-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .rut-empty-state {
+    text-align: center;
+    padding: 2rem 1rem;
+    color: var(--rut-text-muted);
+    border: 2px dashed var(--rut-sidebar-border);
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+  }
+
+  .rut-actions {
+    margin-top: auto;
+    padding-top: 1rem;
+    border-top: 1px solid var(--rut-sidebar-border);
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .rut-btn-primary {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    background: var(--rut-accent-hover);
+    color: #fff;
+    border: none;
+    border-radius: 0.5rem;
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    transition: background 0.15s;
+    box-shadow: 0 4px 6px -1px rgba(8, 145, 178, 0.2);
+  }
+
+  .rut-btn-primary:hover:not(:disabled) {
+    background: var(--rut-accent);
+  }
+
+  .rut-btn-primary:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .rut-btn-secondary {
+    width: 100%;
+    padding: 0.5rem 1rem;
+    background: var(--rut-btn-clear-bg);
+    color: var(--rut-btn-clear-text);
+    border: 1px solid var(--rut-btn-clear-border);
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: opacity 0.15s;
+  }
+
+  .rut-btn-secondary:hover {
+    opacity: 0.8;
+  }
+
+  .rut-btn-icon {
+    flex-shrink: 0;
+  }
+
+  .rut-icon-spin {
+    display: none;
+    animation: rut-spin 1s linear infinite;
+  }
+
+  @keyframes rut-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  .rut-btn-primary[data-loading] .rut-icon-chart {
+    display: none;
+  }
+
+  .rut-btn-primary[data-loading] .rut-icon-spin {
+    display: block;
+  }
+
+  .rut-stats-panel {
+    margin-top: 1rem;
+    padding: 1rem;
+    background: var(--rut-stats-bg);
+    border: 1px solid var(--rut-stats-border);
+    border-radius: 0.5rem;
+  }
+
+  .rut-stats-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--rut-stats-label);
+  }
+
+  .rut-stats-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--rut-stats-value);
+  }
+
+  .rut-map-area {
+    position: relative;
+    height: 50%;
+    order: 0;
+  }
+
+  @media (min-width: 1024px) {
+    .rut-map-area {
+      height: 100%;
+      order: 2;
+    }
+  }
+
+  .rut-map {
+    width: 100%;
+    height: 100%;
+    background: var(--rut-map-bg);
+  }
+
+  :global(.rut-hidden) {
+    display: none;
+  }
+</style>
+
+<style is:global>
+  .rut-icon-container {
+    background: transparent;
+    border: none;
+  }
+
+  .rut-icon {
+    width: 30px;
+    height: 30px;
+    background-color: #0891b2;
+    color: #fff;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 26px;
+    font-weight: 700;
+    font-size: 14px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    position: relative;
+  }
+
+  .rut-icon::after {
+    content: '';
+    position: absolute;
+    bottom: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 6px 6px 0;
+    border-style: solid;
+    border-color: #0891b2 transparent transparent;
+  }
+
+  .rut-point-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem;
+    background: var(--rut-item-bg);
+    border: 1px solid var(--rut-item-border);
+    border-radius: 0.5rem;
+    box-shadow: var(--rut-shadow);
+    cursor: pointer;
+    transition: border-color 0.15s;
+  }
+
+  .rut-point-item:hover {
+    border-color: var(--rut-item-hover-border);
+  }
+
+  .rut-point-badge {
+    flex-shrink: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    background: var(--rut-badge-bg);
+    color: var(--rut-badge-text);
+    border: 1px solid var(--rut-badge-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    font-weight: 700;
+    margin-right: 0.75rem;
+  }
+
+  .rut-point-address {
+    flex: 1;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--rut-text-main);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .rut-point-delete {
+    flex-shrink: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.25rem;
+    color: var(--rut-text-muted);
+    opacity: 0;
+    transition: color 0.15s, opacity 0.15s;
+    display: flex;
+    align-items: center;
+  }
+
+  .rut-point-item:hover .rut-point-delete {
+    opacity: 1;
+  }
+
+  .rut-point-delete:hover {
+    color: #ef4444;
+  }
+
+  .rut-popup {
+    text-align: center;
+    min-width: 140px;
+  }
+
+  .rut-popup-name {
+    display: block;
+    font-size: 0.875rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .rut-popup-coords {
+    font-size: 0.75rem;
+    color: #64748b;
+    margin: 0 0 0.5rem;
+  }
+
+  .rut-popup-btn {
+    font-size: 0.75rem;
+    background: #ef4444;
+    color: #fff;
+    border: none;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .rut-popup-btn:hover {
+    background: #dc2626;
+  }
+</style>
+
+<script>
+  import { GeocodingService } from './logic/GeocodingService';
+  import { RouteService } from './logic/RouteService';
+  import { RouteManager } from './logic/RouteManager';
+  import type { RoutePoint } from './logic/RouteManager';
+  import type { RoutesUI } from './ui';
+
+  const root = document.querySelector<HTMLElement>('.rut-root');
+  const ui = JSON.parse(root?.dataset.ui ?? '{}') as RoutesUI;
+
+  const geocoding = new GeocodingService({
+    addressUnknown: ui.errorAddress,
+    errorAddress: ui.errorAddress,
+    errorAddressName: ui.errorAddressName,
+  });
+
+  const routing = new RouteService();
+
+  const manager = new RouteManager(geocoding, routing, {
+    labelLoadingAddress: ui.labelLoadingAddress,
+    labelPoint: ui.labelPoint,
+    labelDeleteAria: ui.labelDeleteAria,
+    errorMinPoints: ui.errorMinPoints,
+    errorCalculate: ui.errorCalculate,
+  });
+
+  const els = {
+    list: document.getElementById('rut-points-list'),
+    empty: document.getElementById('rut-empty-state'),
+    btnOptimize: document.getElementById('rut-btn-optimize') as HTMLButtonElement | null,
+    btnClear: document.getElementById('rut-btn-clear'),
+    stats: document.getElementById('rut-stats-panel'),
+    distance: document.getElementById('rut-stats-value'),
+  };
+
+  manager.initMap('rut-map');
+
+  manager.addEventListener('update', ((e: CustomEvent<RoutePoint[]>) => {
+    renderList(e.detail);
+    updateOptimizeBtn(e.detail);
+  }) as EventListener);
+
+  manager.addEventListener('loading', ((e: CustomEvent<boolean>) => {
+    if (!els.btnOptimize) return;
+    const textEl = els.btnOptimize.querySelector<HTMLSpanElement>('.rut-btn-text');
+    if (textEl) textEl.textContent = e.detail ? ui.btnCalculating : ui.btnOptimize;
+    els.btnOptimize.disabled = e.detail;
+    if (e.detail) els.btnOptimize.setAttribute('data-loading', '');
+    else els.btnOptimize.removeAttribute('data-loading');
+  }) as EventListener);
+
+  manager.addEventListener('routeCalculated', ((e: CustomEvent<{ distance: number }>) => {
+    if (!els.stats || !els.distance) return;
+    els.stats.classList.remove('rut-hidden');
+    els.distance.textContent = `${(e.detail.distance / 1000).toFixed(2)} km`;
+  }) as EventListener);
+
+  manager.addEventListener('routeCleared', () => {
+    els.stats?.classList.add('rut-hidden');
+  });
+
+  manager.addEventListener('error', ((e: CustomEvent<string>) => {
+    alert(e.detail);
+  }) as EventListener);
+
+  els.btnOptimize?.addEventListener('click', () => { manager.optimizeRoute(); });
+  els.btnClear?.addEventListener('click', () => { manager.clearAll(); });
+
+  function renderList(points: RoutePoint[]) {
+    if (!els.list || !els.empty) return;
+    if (points.length === 0) {
+      els.empty.style.display = 'block';
+      els.list.innerHTML = '';
+      els.list.appendChild(els.empty);
+      return;
+    }
+    els.empty.style.display = 'none';
+    els.list.innerHTML = '';
+    points.forEach((point, index) => { els.list?.appendChild(createPointItem(point, index)); });
+  }
+
+  function createPointItem(point: RoutePoint, index: number): HTMLLIElement {
+    const li = document.createElement('li');
+    li.className = 'rut-point-item';
+    li.innerHTML = `<span class="rut-point-badge">${index + 1}</span><span class="rut-point-address" title="${point.address ?? point.name}">${point.address ?? point.name}</span><button class="rut-point-delete" aria-label="${ui.labelDeleteAria}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button>`;
+    li.querySelector('.rut-point-delete')?.addEventListener('click', (e) => {
+      e.stopPropagation();
+      manager.deletePoint(point.id);
+    });
+    li.addEventListener('click', () => { manager.panToPoint(point.id); });
+    return li;
+  }
+
+  function updateOptimizeBtn(points: RoutePoint[]) {
+    if (els.btnOptimize) els.btnOptimize.disabled = points.length < 2;
+  }
+</script>

package/src/tool/routes/i18n/en.ts

@@ -0,0 +1,157 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { RoutesUI } from '../ui';
+
+const faqData = [
+  {
+    question: 'What optimization algorithm does it use?',
+    answer: 'It uses an advanced resolution of the Travelling Salesman Problem (TSP). The algorithm analyzes all stops and determines the sequential order that minimizes the total distance travelled, saving time and fuel.',
+  },
+  {
+    question: 'Is it safe to share my location?',
+    answer: 'Yes. The tool processes geographic data locally in your browser. We do not store your routes, stops, or location history on our servers.',
+  },
+  {
+    question: 'How many stops can I optimize at once?',
+    answer: 'Our free version allows you to optimize up to 10 stops instantly. For larger professional routes, the system is optimized to maintain high performance without blocking the browser.',
+  },
+  {
+    question: 'Can I use the route directly in Google Maps?',
+    answer: 'Absolutely! Once the route is optimized, the tool generates a navigation link compatible with Google Maps so you can start the journey directly from your phone.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Add starting point',
+    text: 'Type the starting address or click on the map to set where your route begins.',
+  },
+  {
+    name: 'Enter destination stops',
+    text: 'Add all the locations you need to visit. The order does not matter, as the system will reorder them for you.',
+  },
+  {
+    name: 'Optimize the sequence',
+    text: 'Click the optimize button. The algorithm will calculate in seconds the most efficient order to cover all stops.',
+  },
+  {
+    name: 'Open in navigator',
+    text: 'Use the navigation button to take the optimized route to your favourite maps application.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: 'How to optimize a route with multiple stops',
+  step: howToData.map((s) => ({ '@type': 'HowToStep', name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: 'Optimal Route Calculator',
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  description: 'Optimize your delivery or travel routes for free. Automatically reorder stops to find the shortest and most efficient path.',
+};
+
+const ui: RoutesUI = {
+  titleSidebar: 'Route Points',
+  descriptionSidebar: 'Click on the map to add stops. The first point is the start.',
+  emptyState: 'No points added',
+  btnOptimize: 'Calculate Optimal Route',
+  btnCalculating: 'Calculating...',
+  btnClear: 'Clear All',
+  labelDistance: 'Estimated Total Distance',
+  labelDeleteAria: 'Delete',
+  labelLoadingAddress: 'Loading address...',
+  labelPoint: 'Point',
+  errorMinPoints: 'At least two points are needed to calculate a route.',
+  errorCalculate: 'Error calculating the route.',
+  errorAddress: 'Error fetching address',
+  errorAddressName: 'Unknown point',
+};
+
+export const content: ToolLocaleContent<RoutesUI> = {
+  slug: 'optimal-routes',
+  title: 'Free Optimal Route Calculator',
+  description: 'Optimize your delivery or travel routes for free. Our tool automatically reorders your stops to find the shortest and most efficient path.',
+  ui,
+  faqTitle: 'Frequently Asked Questions',
+  faq: faqData,
+  howTo: howToData,
+  bibliographyTitle: 'Technologies and Sources',
+  bibliography: [
+    { name: 'Leaflet — Open-source interactive maps library', url: 'https://leafletjs.com/' },
+    { name: 'OpenStreetMap — Open cartographic data', url: 'https://www.openstreetmap.org/' },
+    { name: 'CARTO — Voyager map tiles', url: 'https://carto.com/basemaps/' },
+    { name: 'Nominatim — Reverse geocoding service (OpenStreetMap)', url: 'https://nominatim.org/' },
+    { name: 'OSRM — Open Source Routing Machine (route optimization)', url: 'http://project-osrm.org/' },
+  ],
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Smart Route Optimiser: TSP for Deliveries and Travel',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'The <strong>online route optimiser</strong> is a free tool that solves the classic <em>Travelling Salesman Problem (TSP)</em>. Add all your stops in any order and the algorithm will automatically calculate the most efficient sequence to minimise the total distance travelled.',
+    },
+    {
+      type: 'title',
+      text: 'How does the route optimisation algorithm work?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'The tool uses the <strong>OSRM (Open Source Routing Machine)</strong> API, a high-performance routing engine based on OpenStreetMap data. The process is: first it calculates the optimal circular route between all points (TSP algorithm), then determines the best cut point to convert it into a one-way linear journey, and finally draws the route on the map with the estimated total distance.',
+    },
+    {
+      type: 'title',
+      text: 'Use cases: deliveries, sales reps, and travel',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'The route optimiser is ideal for <strong>independent delivery drivers</strong> who need to organise multiple daily deliveries, <strong>field sales representatives</strong> visiting clients in an area, or <strong>travellers</strong> wanting to visit several cities or landmarks in the most efficient order. The tool processes all information in the browser, without sharing your data with any proprietary server.',
+    },
+    {
+      type: 'stats',
+      columns: 2,
+      items: [
+        { value: 'TSP', label: 'Algorithm', icon: 'mdi:chart-line' },
+        { value: 'OSRM', label: 'Routing engine', icon: 'mdi:map-marker-path' },
+        { value: 'Local-First', label: 'Privacy', icon: 'mdi:lock-check' },
+        { value: 'Free', label: 'Cost', icon: 'mdi:currency-eur-off' },
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Privacy and local processing',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'All the tool logic runs directly in your browser. Your stop coordinates are only sent to the public OSRM and Nominatim APIs to calculate routes and get address names, but <strong>are not stored on any proprietary server</strong>. You can safely use the tool to plan business routes with sensitive information.',
+    },
+    {
+      type: 'tip',
+      title: 'Usage tip',
+      html: '<strong>For best results</strong>, add stops by clicking directly on the map rather than searching for addresses. Markers are draggable, so you can adjust the exact position of each point after placing it.',
+    },
+  ],
+};