@anthropomorphic/delorean 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Anthropomorphic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,679 @@
-# Temporary Holding Version
+# Delorean
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Delorean è una libreria per gestire sequenze temporali di layer raster WMS con Leaflet e MapLibre GL JS. Include un core indipendente dal framework, due adapter per i layer WMS e un web component opzionale per i controlli temporali.
+
+## Installazione
+
+Installa Delorean e il framework cartografico utilizzato dall'applicazione:
+
+```sh
+npm install delorean leaflet
+# oppure
+npm install delorean maplibre-gl
+```
+
+Leaflet e MapLibre GL JS sono peer dependency opzionali: è sufficiente installare quello richiesto dall'adapter utilizzato. Le richieste GetCapabilities vengono effettuate dal browser, quindi il server WMS deve consentire le richieste cross-origin (CORS).
+
+## Import
+
+Il package espone entry point distinti e non esporta un entry point principale `delorean`:
+
+```ts
+import { Delorean } from 'delorean/core';
+import { DeloreanController } from 'delorean/ui';
+import { LeafletRasterTimeLayer } from 'delorean/leaflet';
+import { MaplibreglRasterTimeLayer } from 'delorean/maplibre';
+```
+
+Importa solo gli entry point necessari. Importare `delorean/ui` registra il custom element `<delorean-controller>`.
+
+## Core
+
+La classe `Delorean` gestisce timestamp Unix espressi in millisecondi. Può essere usata indipendentemente da Leaflet, MapLibre e dal controller UI.
+
+```ts
+import { Delorean } from 'delorean/core';
+
+const times = [
+    Date.parse('2024-01-01T00:00:00Z'),
+    Date.parse('2024-01-02T00:00:00Z')
+];
+
+const delorean = new Delorean(times);
+delorean.addTimeChangedCallback((time) => {
+    console.log(new Date(time).toISOString());
+});
+
+delorean.nextTime();
+```
+
+### Costruttore
+
+| Firma | Descrizione |
+| --- | --- |
+| `new Delorean(defaultTimes: number[] = [], defaultCurrentTime: number = Date.now())` | Crea una nuova istanza del core. |
+
+| Parametro | Tipo | Default | Descrizione |
+| --- | --- | --- | --- |
+| `defaultTimes` | `number[]` | `[]` | Tempi iniziali, come timestamp in millisecondi. |
+| `defaultCurrentTime` | `number` | `Date.now()` | Tempo iniziale da confrontare con i tempi disponibili. |
+
+### Metodi e proprietà
+
+| API | Tipo / firma | Descrizione |
+| --- | --- | --- |
+| `times` | `number[]` | Tempi correntemente memorizzati. |
+| `currentTime` | `number` | Timestamp del tempo correntemente selezionato. |
+| `setTimes(newTimes, operation = 'intersect')` | `(newTimes: number[], operation?: TimesOperation) => void` | Aggiorna i tempi secondo l'operazione scelta. |
+| `setCurrentTime(time)` | `(time: number) => void` | Seleziona l'ultimo tempo disponibile minore o uguale al valore richiesto; se il valore precede il primo tempo, seleziona il primo. Notifica le callback. |
+| `removeTimes(timesToRemove)` | `(timesToRemove: number[]) => void` | Rimuove i tempi indicati. Non notifica le callback né corregge l'indice corrente. |
+| `prevTime(loop = true)` | `(loop?: boolean) => void` | Passa al tempo precedente. Con `loop: true`, dal primo torna all'ultimo. |
+| `nextTime(loop = true)` | `(loop?: boolean) => void` | Passa al tempo successivo. Con `loop: true`, dall'ultimo torna al primo. |
+| `firstTime()` | `() => void` | Seleziona il primo tempo disponibile e notifica le callback. |
+| `lastTime()` | `() => void` | Seleziona l'ultimo tempo disponibile e notifica le callback. |
+| `togglePlay(isPlaying, interval = 3000)` | `(isPlaying: boolean, interval?: number) => void` | Avvia o arresta l'avanzamento automatico. `interval` è espresso in millisecondi. |
+| `addTimeChangedCallback(callback)` | `(callback: (newTime: number) => void) => void` | Registra una callback per i cambi di tempo. |
+| `removeTimeChangedCallback(callback)` | `(callback: (newTime: number) => void) => void` | Rimuove la callback indicata. |
+| `timeChanged(newTime)` | `(newTime: number) => void` | Invoca tutte le callback registrate. |
+
+### `TimesOperation`
+
+`TimesOperation` è un union type, non un enum:
+
+| Valore | Comportamento implementato |
+| --- | --- |
+| `union` | Concatena i tempi esistenti e quelli nuovi e li ordina. I duplicati sono mantenuti. |
+| `intersect` | Ordina i tempi combinati ed elimina i duplicati. **Non calcola l'intersezione**, nonostante il nome. |
+| `replace` | Sostituisce i tempi esistenti con quelli nuovi, senza ordinarli. |
+
+> **Nota:** `intersect` attualmente si comporta come un'unione con deduplicazione. Non fare affidamento su un'intersezione matematica finché il comportamento non viene corretto nella libreria.
+
+Il costruttore ordina i tempi iniziali in ordine crescente. Per utilizzare la navigazione, inizializza il core con almeno un tempo; con un array vuoto, le proprietà e i metodi di navigazione non hanno un valore temporale valido. Dopo `setTimes()` l'indice corrente non viene ricalcolato automaticamente.
+
+## Adapter
+
+Gli adapter collegano un'istanza `Delorean` a un layer raster WMS del framework cartografico corrispondente. Entrambi leggono i tempi dalla dimensione `time` del documento WMS GetCapabilities e aggiornano il parametro temporale del layer quando cambia il tempo del core.
+
+### Leaflet
+
+`LeafletRasterTimeLayer` crea un WMS `TileLayer` Leaflet.
+
+```ts
+import * as leaflet from 'leaflet';
+import { Delorean } from 'delorean/core';
+import { LeafletRasterTimeLayer } from 'delorean/leaflet';
+
+const map = leaflet.map('map').setView([44.4, 8.9], 8);
+const delorean = new Delorean();
+
+const timeLayer = new LeafletRasterTimeLayer(delorean, {
+    layerId: 'nexrad-n0r-wmst',
+    tileBaseUrl: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi',
+    wmsOptions: {
+        layers: 'nexrad-n0r-wmst',
+        format: 'image/png',
+        styles: '',
+        transparent: true,
+        version: '1.3.0'
+    },
+    getCapabilitiesUrl:
+        'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?SERVICE=WMS&REQUEST=GetCapabilities&VERSION=1.3.0'
+});
+
+await timeLayer.addTo(map);
+// Quando il layer non serve più:
+timeLayer.removeFrom(map);
+```
+
+Firma del costruttore: `new LeafletRasterTimeLayer(delorean, options)`.
+
+| Metodo / proprietà | Descrizione |
+| --- | --- |
+| `layerId` | Nome del layer WMS. |
+| `layer` | Layer Leaflet sottostante. |
+| `getCapabilitiesUrl` | URL GetCapabilities opzionale nel tipo; necessario per caricare i tempi. |
+| `addTo(map, defaultTime?, operation = 'intersect')` | Carica i tempi, aggiunge il layer alla mappa e registra la callback temporale. Se `defaultTime` non è specificato, usa il default GetCapabilities se disponibile, altrimenti seleziona l'ultimo tempo. |
+| `removeFrom(map)` | Rimuove il layer, i suoi tempi dal core e la callback di aggiornamento. |
+| `loadTimes()` | Restituisce una `Promise<LayerTimeInfo>` con il tempo predefinito e i tempi discreti. |
+| `setTime(time)` | Aggiorna il parametro `TIME` del layer. Restituisce una Promise. |
+
+#### `LeafletRasterTimeLayerOptions`
+
+| Proprietà | Tipo | Obbligatoria | Descrizione |
+| --- | --- | --- | --- |
+| `layerId` | `string` | sì | Nome del layer WMS, ad esempio `workspace:layer`. |
+| `tileBaseUrl` | `string` | sì | Endpoint WMS usato per le richieste delle tile. |
+| `wmsOptions` | `leaflet.WMSOptions` | sì | Opzioni del layer WMS di Leaflet. |
+| `getCapabilitiesUrl` | `string` | no nel tipo, sì per `addTo()` | URL del documento GetCapabilities da cui leggere i tempi. |
+
+### MapLibre
+
+`MaplibreglRasterTimeLayer` crea una raster source e un raster layer MapLibre. I parametri WMS e i valori passati a `tileUrlParams` sono stringhe; `tileUrlTemplate` contiene parametri di URL e placeholder di tile, ad esempio il bbox MapLibre.
+
+```ts
+import * as maplibregl from 'maplibre-gl';
+import { Delorean } from 'delorean/core';
+import { MaplibreglRasterTimeLayer } from 'delorean/maplibre';
+
+const map = new maplibregl.Map({
+    container: 'map',
+    style: 'https://tiles.openfreemap.org/styles/liberty',
+    center: [8.9, 44.4],
+    zoom: 8
+});
+const delorean = new Delorean();
+
+const timeLayer = new MaplibreglRasterTimeLayer(delorean, {
+    sourceId: 'wms-source',
+    layerId: 'nexrad-n0r-wmst',
+    tileBaseUrl: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi',
+    tileUrlParams: {
+        service: 'WMS',
+        layers: 'nexrad-n0r-wmst',
+        styles: '',
+        transparent: 'true',
+        format: 'image/png',
+        version: '1.3.0',
+        request: 'GetMap',
+        crs: 'EPSG:3857',
+        width: '256',
+        height: '256'
+    },
+    tileUrlTemplate: {
+        bbox: '{bbox-epsg-3857}'
+    },
+    getCapabilitiesUrl:
+        'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?SERVICE=WMS&REQUEST=GetCapabilities&VERSION=1.3.0'
+});
+
+await timeLayer.addTo(map);
+// Quando il layer non serve più:
+timeLayer.removeFrom(map);
+```
+
+Firma del costruttore: `new MaplibreglRasterTimeLayer(delorean, options)`.
+
+| Metodo / proprietà | Descrizione |
+| --- | --- |
+| `sourceId` | ID della raster source MapLibre. |
+| `source` | Specifica della source raster. |
+| `layerId` | Nome del layer WMS e ID del layer MapLibre. |
+| `layer` | Specifica del raster layer MapLibre. |
+| `getCapabilitiesUrl` | URL GetCapabilities opzionale nel tipo; necessario per caricare i tempi. |
+| `addTo(map, defaultTime?, operation = 'intersect')` | Carica i tempi, aggiunge source e layer e registra la callback temporale. Se `defaultTime` non è specificato, usa il default GetCapabilities se disponibile, altrimenti seleziona l'ultimo tempo. |
+| `removeFrom(map)` | Rimuove layer e source, i tempi dal core e la callback di aggiornamento. |
+| `loadTimes()` | Restituisce una `Promise<LayerTimeInfo>` con il tempo predefinito e i tempi discreti. |
+| `setTime(map, time)` | Aggiorna l'URL delle tile con il parametro `TIME`. Restituisce una Promise. |
+
+#### `MaplibreglRasterTimeLayerOptions`
+
+| Proprietà | Tipo | Obbligatoria | Descrizione |
+| --- | --- | --- | --- |
+| `sourceId` | `string` | sì | ID della raster source MapLibre. |
+| `layerId` | `string` | sì | Nome del layer WMS e ID del layer MapLibre. |
+| `tileBaseUrl` | `string` | sì | Endpoint WMS usato per le richieste delle tile. |
+| `tileUrlParams` | `Record<string, string>` | sì | Parametri della richiesta WMS. L'adapter aggiorna `TIME`. |
+| `tileUrlTemplate` | `Record<string, string>` | sì | Parametri aggiunti all'URL, inclusi i placeholder di tile MapLibre come `{bbox-epsg-3857}`. |
+| `paint` | `maplibregl.RasterLayerSpecification['paint']` | no | Proprietà visuali del raster layer. |
+| `getCapabilitiesUrl` | `string` | no nel tipo, sì per `addTo()` | URL del documento GetCapabilities da cui leggere i tempi. |
+
+## Controller UI
+
+La libreria fornisce il web component `<delorean-controller>`, utilizzabile insieme alla classe `Delorean`. Importare `delorean/ui` registra il custom element:
+
+```ts
+import { DeloreanController } from 'delorean/ui';
+```
+
+```html
+<delorean-controller></delorean-controller>
+```
+
+Il controller emette eventi DOM con `bubbles: true` e `composed: true`; possono quindi essere ascoltati dagli elementi antenati anche attraversando uno shadow DOM. Gli eventi di navigazione non hanno `detail`. `delorean-play` invia in `event.detail` un booleano: `true` per play e `false` per pausa.
+
+| Evento | `detail` | Descrizione |
+| --- | --- | --- |
+| `delorean-firsttime` | — | Richiesta di selezionare il primo tempo. |
+| `delorean-prevtime` | — | Richiesta di selezionare il tempo precedente. |
+| `delorean-nexttime` | — | Richiesta di selezionare il tempo successivo. |
+| `delorean-lasttime` | — | Richiesta di selezionare l'ultimo tempo. |
+| `delorean-play` | `boolean` | Cambiamento dello stato play/pausa. |
+
+Il setter `time` aggiorna il valore visualizzato nell'input. Accetta un timestamp in millisecondi:
+
+```ts
+const controller = document.querySelector('delorean-controller') as DeloreanController;
+controller.time = Date.now();
+```
+
+Le parti del web component sono personalizzabili dall'esterno con lo pseudo-elemento CSS `::part()`:
+
+```css
+delorean-controller::part(delorean) {
+    flex-direction: column;
+}
+
+delorean-controller::part(delorean__first) {
+    background-color: red;
+}
+```
+
+| Part | Elemento | Descrizione |
+| --- | --- | --- |
+| `delorean` | `div` | Contenitore esterno. |
+| `delorean__first` | `button` | Torna al primo tempo disponibile. |
+| `delorean__previous` | `button` | Torna al tempo precedente. |
+| `delorean__play` | `button` | Alterna play e pausa. |
+| `delorean__next` | `button` | Passa al tempo successivo. |
+| `delorean__last` | `button` | Passa all'ultimo tempo disponibile. |
+| `delorean__datetime` | `input[type="datetime-local"]` | Campo in sola lettura che mostra il tempo assegnato alla proprietà `time`. |
+
+## GetCapabilities e formati temporali
+
+Gli adapter richiedono il documento WMS GetCapabilities tramite `fetch`, individuano il layer corrispondente a `layerId` e leggono una dimensione `time` (elemento `Dimension` o `Extent`). Il browser deve poter accedere all'endpoint tramite CORS.
+
+Il parser gestisce:
+
+- valori temporali discreti separati da virgola;
+- un singolo intervallo nel formato `inizio/fine/periodo`, con periodi espressi in giorni, ore, minuti e secondi (ad esempio `P1D` o `PT6H`).
+
+Gli intervalli senza periodo, con periodo non supportato o con fine precedente all'inizio producono una lista di tempi vuota. La combinazione di più intervalli e valori discreti nella stessa dimensione non è gestita come una serie completa di intervalli.
+
+Gli adapter cercano il layer per nome esatto. Se il layer non esiste nel documento o non espone una dimensione temporale, il caricamento fallisce con un errore. `getCapabilitiesUrl` è opzionale nelle interfacce TypeScript, ma deve essere fornito per usare `loadTimes()` o `addTo()`.
+
+## Esempi del progetto
+
+Il repository contiene due demo eseguibili:
+
+- `examples/delorean-leaflet`
+- `examples/delorean-maplibre`
+
+Per avviare una demo:
+
+```sh
+cd examples/delorean-leaflet
+npm install
+npm run dev
+```
+
+Per la demo MapLibre, usa `examples/delorean-maplibre` al posto di `examples/delorean-leaflet`.
+
+## Esempi completi
+
+Gli esempi completi sotto seguono l'organizzazione e le opzioni delle demo presenti nel repository. Le dipendenze `delorean` sono installate dai pacchetti locali (`file:../../delorean-0.1.0.tgz`) nei manifest di esempio; in un progetto applicativo installa la versione pubblicata del package.
+
+### Esempio Leaflet
+
+```html
+<!-- index.html -->
+<html>
+    <head>
+        <title>Delorean Leaflet example</title>
+    </head>
+    <body>
+        <button type="button" id="add-layer" class="add-layer-btn">ADD WMS LAYER</button>
+        <button type="button" id="remove-layer" class="remove-layer-btn">REMOVE WMS LAYER</button>
+        <app-leaflet id="maplibre"></app-leaflet>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>
+```
+
+```css
+/* style.css */
+html,
+body {
+    margin: 0;
+    padding: 0;
+}
+
+app-leaflet {
+    display: block;
+    height: 100dvh;
+}
+
+.add-layer-btn,
+.remove-layer-btn {
+    position: fixed;
+    z-index: 999;
+    left: 16px;
+}
+
+.add-layer-btn {
+    top: 16px;
+}
+
+.remove-layer-btn {
+    top: 48px;
+}
+```
+
+```ts
+// main.ts
+import './style.css';
+import './leaflet';
+import type { Leaflet } from './leaflet';
+
+main();
+
+function main() {
+    const leaflet = document.querySelector('#maplibre') as Leaflet;
+    const addBtn = document.querySelector('#add-layer') as HTMLButtonElement;
+    const removeBtn = document.querySelector('#remove-layer') as HTMLButtonElement;
+
+    addBtn.onclick = () => leaflet.addWmsTimeLayer({
+        layerId: 'nexrad-n0r-wmst',
+        tileBaseUrl: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi',
+        wmsOptions: {
+            layers: 'nexrad-n0r-wmst',
+            format: 'image/png',
+            styles: '',
+            transparent: true,
+            version: '1.3.0'
+        },
+        getCapabilitiesUrl:
+            'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?SERVICE=WMS&REQUEST=GetCapabilities&VERSION=1.3.0'
+    });
+
+    removeBtn.onclick = () => leaflet.removeWmsTimeLayer('nexrad-n0r-wmst');
+}
+```
+
+```ts
+// leaflet.ts
+import * as leaflet from 'leaflet';
+import style from 'leaflet/dist/leaflet.css?raw';
+import { Delorean } from 'delorean/core';
+import { LeafletRasterTimeLayer, type LeafletRasterTimeLayerOptions } from 'delorean/leaflet';
+import { DeloreanController } from 'delorean/ui';
+
+export class Leaflet extends HTMLElement {
+    public shadowRoot: ShadowRoot;
+
+    #map?: leaflet.Map;
+    #delorean?: Delorean;
+    #deloreanController?: DeloreanController;
+    #layers: LeafletRasterTimeLayer[] = [];
+
+    constructor() {
+        super();
+        this.shadowRoot = this.attachShadow({ mode: 'open' });
+        this.shadowRoot.appendChild(this.#html().content.cloneNode(true));
+        this.shadowRoot.appendChild(this.#css().cloneNode(true));
+
+        const leafletStylesheet = new CSSStyleSheet();
+        leafletStylesheet.replaceSync(style);
+        this.shadowRoot.adoptedStyleSheets.push(leafletStylesheet);
+        this.#deloreanController = this.shadowRoot.querySelector('#delorean') as DeloreanController;
+    }
+
+    #html(): HTMLTemplateElement {
+        const template = document.createElement('template');
+        template.innerHTML = `
+            <div id="leaflet" class="leaflet"></div>
+            <delorean-controller id="delorean" class="delorean"></delorean-controller>
+        `;
+        return template;
+    }
+
+    #css(): HTMLStyleElement {
+        const style = document.createElement('style');
+        style.innerHTML = `
+            .leaflet {
+                height: 100%;
+            }
+
+            .delorean {
+                position: fixed;
+                z-index: 999;
+                bottom: 40px;
+                left: 40px;
+            }
+        `;
+        return style;
+    }
+
+    public connectedCallback(): void {
+        this.#init();
+        this.#setup();
+    }
+
+    #init(): void {
+        const container = this.shadowRoot.querySelector('#leaflet');
+        if (!(container instanceof HTMLElement)) return;
+
+        this.#map = leaflet.map(container, { zoomControl: false })
+            .setView([44.40370599796929, 8.928584505583844], 9)
+            .addLayer(leaflet.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png'));
+
+        this.#delorean = new Delorean();
+        this.#delorean.addTimeChangedCallback((newTime: number) => {
+            if (!this.#map || !this.#deloreanController) return;
+            this.#deloreanController.time = newTime;
+        });
+    }
+
+    #setup(): void {
+        this.addEventListener('delorean-firsttime', () => this.#delorean?.firstTime());
+        this.addEventListener('delorean-prevtime', () => this.#delorean?.prevTime());
+        this.addEventListener('delorean-nexttime', () => this.#delorean?.nextTime());
+        this.addEventListener('delorean-lasttime', () => this.#delorean?.lastTime());
+        this.addEventListener('delorean-play', (event: Event) => {
+            this.#delorean?.togglePlay((event as CustomEvent).detail, 3000);
+        });
+    }
+
+    public async addWmsTimeLayer(options: LeafletRasterTimeLayerOptions): Promise<void> {
+        if (!this.#map || !this.#delorean) return;
+        const wmsTimeLayer = new LeafletRasterTimeLayer(this.#delorean, options);
+        await wmsTimeLayer.addTo(this.#map, 1787196600000, 'intersect');
+        this.#layers.push(wmsTimeLayer);
+    }
+
+    public removeWmsTimeLayer(layerId: string): void {
+        const foundLayer = this.#layers.find((layer) => layer.layerId === layerId);
+        if (!this.#map || !foundLayer) return;
+        foundLayer.removeFrom(this.#map);
+        this.#layers = this.#layers.filter((layer) => layer !== foundLayer);
+    }
+}
+
+customElements.define('app-leaflet', Leaflet);
+```
+
+### Esempio MapLibre
+
+```html
+<!-- index.html -->
+<html>
+    <head>
+        <title>Delorean MapLibre example</title>
+    </head>
+    <body>
+        <button type="button" id="add-layer" class="add-layer-btn">ADD WMS LAYER</button>
+        <button type="button" id="remove-layer" class="remove-layer-btn">REMOVE WMS LAYER</button>
+        <app-maplibre id="maplibre"></app-maplibre>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>
+```
+
+```css
+/* style.css */
+html,
+body {
+    margin: 0;
+    padding: 0;
+}
+
+app-maplibre {
+    display: block;
+    height: 100dvh;
+}
+
+.add-layer-btn,
+.remove-layer-btn {
+    position: fixed;
+    z-index: 999;
+    left: 16px;
+}
+
+.add-layer-btn {
+    top: 16px;
+}
+
+.remove-layer-btn {
+    top: 48px;
+}
+```
+
+```ts
+// main.ts
+import './style.css';
+import './maplibre';
+import type { Maplibre } from './maplibre';
+
+main();
+
+function main() {
+    const maplibre = document.querySelector('#maplibre') as Maplibre;
+    const addBtn = document.querySelector('#add-layer') as HTMLButtonElement;
+    const removeBtn = document.querySelector('#remove-layer') as HTMLButtonElement;
+
+    addBtn.onclick = () => maplibre.addWmsTimeLayer({
+        sourceId: 'wms-test-source',
+        layerId: 'nexrad-n0r-wmst',
+        tileBaseUrl: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi',
+        tileUrlParams: {
+            service: 'WMS',
+            layers: 'nexrad-n0r-wmst',
+            styles: '',
+            transparent: 'true',
+            format: 'image/png',
+            version: '1.3.0',
+            request: 'GetMap',
+            crs: 'EPSG:3857',
+            width: '256',
+            height: '256'
+        },
+        tileUrlTemplate: {
+            bbox: '{bbox-epsg-3857}'
+        },
+        getCapabilitiesUrl:
+            'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?SERVICE=WMS&REQUEST=GetCapabilities&VERSION=1.3.0'
+    });
+
+    removeBtn.onclick = () => maplibre.removeWmsTimeLayer('nexrad-n0r-wmst');
+}
+```
+
+```ts
+// maplibre.ts
+import * as maplibregl from 'maplibre-gl';
+import style from 'maplibre-gl/dist/maplibre-gl.css?raw';
+import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
+import { Delorean } from 'delorean/core';
+import { MaplibreglRasterTimeLayer, type MaplibreglRasterTimeLayerOptions } from 'delorean/maplibre';
+import { DeloreanController } from 'delorean/ui';
+
+maplibregl.setWorkerUrl(workerUrl);
+
+export class Maplibre extends HTMLElement {
+    public shadowRoot: ShadowRoot;
+
+    #map?: maplibregl.Map;
+    #delorean?: Delorean;
+    #deloreanController?: DeloreanController;
+    #layers: MaplibreglRasterTimeLayer[] = [];
+
+    constructor() {
+        super();
+        this.shadowRoot = this.attachShadow({ mode: 'open' });
+        this.shadowRoot.appendChild(this.#html().content.cloneNode(true));
+        this.shadowRoot.appendChild(this.#css().cloneNode(true));
+
+        const maplibreStylesheet = new CSSStyleSheet();
+        maplibreStylesheet.replaceSync(style);
+        this.shadowRoot.adoptedStyleSheets.push(maplibreStylesheet);
+        this.#deloreanController = this.shadowRoot.querySelector('#delorean') as DeloreanController;
+    }
+
+    #html(): HTMLTemplateElement {
+        const template = document.createElement('template');
+        template.innerHTML = `
+            <div id="maplibre" class="maplibre"></div>
+            <delorean-controller id="delorean" class="delorean"></delorean-controller>
+        `;
+        return template;
+    }
+
+    #css(): HTMLStyleElement {
+        const style = document.createElement('style');
+        style.innerHTML = `
+            .maplibre {
+                height: 100%;
+            }
+
+            .delorean {
+                position: fixed;
+                z-index: 999;
+                bottom: 40px;
+                left: 40px;
+            }
+        `;
+        return style;
+    }
+
+    public connectedCallback(): void {
+        this.#init();
+        this.#setup();
+    }
+
+    #init(): void {
+        const container = this.shadowRoot.querySelector('#maplibre');
+        if (!(container instanceof HTMLElement)) return;
+
+        this.#map = new maplibregl.Map({
+            container,
+            style: 'https://tiles.openfreemap.org/styles/liberty',
+            center: [8.928584505583844, 44.40370599796929],
+            zoom: 9
+        });
+
+        this.#delorean = new Delorean();
+        this.#delorean.addTimeChangedCallback((newTime: number) => {
+            if (!this.#map || !this.#deloreanController) return;
+            this.#deloreanController.time = newTime;
+        });
+    }
+
+    #setup(): void {
+        this.addEventListener('delorean-firsttime', () => this.#delorean?.firstTime());
+        this.addEventListener('delorean-prevtime', () => this.#delorean?.prevTime());
+        this.addEventListener('delorean-nexttime', () => this.#delorean?.nextTime());
+        this.addEventListener('delorean-lasttime', () => this.#delorean?.lastTime());
+        this.addEventListener('delorean-play', (event: Event) => {
+            this.#delorean?.togglePlay((event as CustomEvent).detail, 1000);
+        });
+    }
+
+    public async addWmsTimeLayer(options: MaplibreglRasterTimeLayerOptions): Promise<void> {
+        if (!this.#map || !this.#delorean) return;
+        const wmsTimeLayer = new MaplibreglRasterTimeLayer(this.#delorean, options);
+        await wmsTimeLayer.addTo(this.#map);
+        this.#layers.push(wmsTimeLayer);
+    }
+
+    public removeWmsTimeLayer(layerId: string): void {
+        const foundLayer = this.#layers.find((layer) => layer.layerId === layerId);
+        if (!this.#map || !foundLayer) return;
+        foundLayer.removeFrom(this.#map);
+        this.#layers = this.#layers.filter((layer) => layer !== foundLayer);
+    }
+}
+
+customElements.define('app-maplibre', Maplibre);
+```
+
+L'esempio Leaflet passa un timestamp iniziale esplicito a `addTo()`. La demo MapLibre non lo passa e quindi usa il tempo predefinito restituito dal GetCapabilities, se presente, oppure l'ultimo tempo disponibile. Sostituisci endpoint, nome del layer e parametri WMS con quelli del servizio che vuoi utilizzare.
+# ett-delorean-timecontroller-typescript

package/dist/core/index.js

@@ -0,0 +1,89 @@
+var d = (r) => {
+  throw TypeError(r);
+};
+var T = (r, t, e) => t.has(r) || d("Cannot " + e);
+var i = (r, t, e) => (T(r, t, "read from private field"), e ? e.call(r) : t.get(r)), g = (r, t, e) => t.has(r) ? d("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), n = (r, t, e, a) => (T(r, t, "write to private field"), a ? a.call(r, e) : t.set(r, e), e), f = (r, t, e) => (T(r, t, "access private method"), e);
+var u = (r, t, e, a) => ({
+  set _(m) {
+    n(r, t, m, e);
+  },
+  get _() {
+    return i(r, t, a);
+  }
+});
+import { a as C } from "../delorean.utils-DOgTNSYn.js";
+import { g as y } from "../delorean.utils-DOgTNSYn.js";
+var h, s, l, o, c, b, k;
+class x {
+  constructor(t = [], e = (/* @__PURE__ */ new Date()).getTime()) {
+    g(this, c);
+    g(this, h);
+    g(this, s);
+    g(this, l, []);
+    g(this, o, !1);
+    n(this, h, [...t].toSorted((a, m) => a - m)), n(this, s, C(e, t));
+  }
+  get times() {
+    return i(this, h);
+  }
+  get currentTime() {
+    return i(this, h)[i(this, s)];
+  }
+  setTimes(t, e = "intersect") {
+    switch (e) {
+      case "union":
+        n(this, h, [...i(this, h), ...t].toSorted((a, m) => a - m));
+        break;
+      case "intersect":
+        n(this, h, [...new Set([...i(this, h), ...t].toSorted((a, m) => a - m))]);
+        break;
+      default:
+        n(this, h, [...t]);
+        break;
+    }
+  }
+  setCurrentTime(t) {
+    n(this, s, C(t, i(this, h))), this.timeChanged(this.currentTime);
+  }
+  removeTimes(t) {
+    const e = new Set(t);
+    n(this, h, i(this, h).filter(
+      (a) => !e.has(a)
+    ));
+  }
+  prevTime(t = !0) {
+    u(this, s)._--, t ? (i(this, s) < 0 && n(this, s, i(this, h).length - 1), i(this, s) > i(this, h).length - 1 && n(this, s, 0)) : (i(this, s) < 0 && n(this, s, 0), i(this, s) > i(this, h).length - 1 && n(this, s, i(this, h).length - 1)), this.timeChanged(this.currentTime);
+  }
+  nextTime(t = !0) {
+    u(this, s)._++, t ? (i(this, s) < 0 && n(this, s, i(this, h).length - 1), i(this, s) > i(this, h).length - 1 && n(this, s, 0)) : (i(this, s) < 0 && n(this, s, 0), i(this, s) > i(this, h).length - 1 && n(this, s, i(this, h).length - 1)), this.timeChanged(this.currentTime);
+  }
+  firstTime() {
+    n(this, s, 0), this.timeChanged(this.currentTime);
+  }
+  lastTime() {
+    n(this, s, i(this, h).length - 1), this.timeChanged(this.currentTime);
+  }
+  togglePlay(t, e = 3e3) {
+    n(this, o, t), f(this, c, b).call(this, () => this.nextTime(), e);
+  }
+  addTimeChangedCallback(t) {
+    i(this, l).push(t);
+  }
+  removeTimeChangedCallback(t) {
+    n(this, l, i(this, l).filter((e) => e !== t));
+  }
+  timeChanged(t) {
+    i(this, l).forEach((e) => e(t));
+  }
+}
+h = new WeakMap(), s = new WeakMap(), l = new WeakMap(), o = new WeakMap(), c = new WeakSet(), b = async function(t, e) {
+  for (; i(this, o) && (await t(), !!i(this, o)); )
+    await f(this, c, k).call(this, e);
+}, k = function(t) {
+  return new Promise((e) => setTimeout(e, t));
+};
+export {
+  x as Delorean,
+  C as getCurrentTimeIndex,
+  y as getLayerTimes
+};

package/dist/delorean/adapters/index.d.ts

@@ -0,0 +1,2 @@
+export * from './leaflet';
+export * from './maplibre';

package/dist/delorean/adapters/leaflet/index.d.ts

@@ -0,0 +1,2 @@
+export * from './leaflet.adapter';
+export * from './leaflet.options';

package/dist/delorean/adapters/leaflet/leaflet.adapter.d.ts

@@ -0,0 +1,14 @@
+import * as leaflet from 'leaflet';
+import type { Delorean, LayerTimeInfo, TimesOperation } from '../../core';
+import type { LeafletRasterTimeLayerOptions } from './leaflet.options';
+export declare class LeafletRasterTimeLayer {
+    #private;
+    readonly layerId: string;
+    readonly layer: leaflet.Layer;
+    readonly getCapabilitiesUrl?: string;
+    constructor(delorean: Delorean, options: LeafletRasterTimeLayerOptions);
+    addTo(map: leaflet.Map, defaultTime?: number, operation?: TimesOperation): Promise<this>;
+    removeFrom(map: leaflet.Map): this;
+    loadTimes(): Promise<LayerTimeInfo>;
+    setTime(time: number): Promise<this>;
+}

package/dist/delorean/adapters/leaflet/leaflet.options.d.ts

@@ -0,0 +1,7 @@
+import * as leaflet from 'leaflet';
+export interface LeafletRasterTimeLayerOptions {
+    layerId: string;
+    tileBaseUrl: string;
+    wmsOptions: leaflet.WMSOptions;
+    getCapabilitiesUrl?: string;
+}

package/dist/delorean/adapters/maplibre/index.d.ts

@@ -0,0 +1,2 @@
+export * from './maplibregl.adapter';
+export * from './maplibregl.options';

package/dist/delorean/adapters/maplibre/maplibregl.adapter.d.ts

@@ -0,0 +1,16 @@
+import * as maplibregl from 'maplibre-gl';
+import type { Delorean, LayerTimeInfo, TimesOperation } from '../../core';
+import type { MaplibreglRasterTimeLayerOptions } from './maplibregl.options';
+export declare class MaplibreglRasterTimeLayer {
+    #private;
+    readonly sourceId: string;
+    readonly source: maplibregl.RasterSourceSpecification;
+    readonly layerId: string;
+    readonly layer: maplibregl.RasterLayerSpecification;
+    readonly getCapabilitiesUrl?: string;
+    constructor(delorean: Delorean, options: MaplibreglRasterTimeLayerOptions);
+    addTo(map: maplibregl.Map, defaultTime?: number, operation?: TimesOperation): Promise<this>;
+    removeFrom(map: maplibregl.Map): this;
+    loadTimes(): Promise<LayerTimeInfo>;
+    setTime(map: maplibregl.Map, time: number): Promise<this>;
+}

package/dist/delorean/adapters/maplibre/maplibregl.options.d.ts

@@ -0,0 +1,10 @@
+import * as maplibregl from 'maplibre-gl';
+export interface MaplibreglRasterTimeLayerOptions {
+    sourceId: string;
+    layerId: string;
+    tileBaseUrl: string;
+    tileUrlParams: Record<string, string>;
+    tileUrlTemplate: Record<string, string>;
+    paint?: maplibregl.RasterLayerSpecification['paint'];
+    getCapabilitiesUrl?: string;
+}

package/dist/delorean/core/delorean.store.d.ts

@@ -0,0 +1,18 @@
+import type { TimesOperation } from './delorean.types';
+export declare class Delorean {
+    #private;
+    constructor(defaultTimes?: number[], defaultCurrentTime?: number);
+    get times(): number[];
+    get currentTime(): number;
+    setTimes(newTimes: number[], operation?: TimesOperation): void;
+    setCurrentTime(time: number): void;
+    removeTimes(timesToRemove: number[]): void;
+    prevTime(loop?: boolean): void;
+    nextTime(loop?: boolean): void;
+    firstTime(): void;
+    lastTime(): void;
+    togglePlay(isPlaying: boolean, interval?: number): void;
+    addTimeChangedCallback(callback: (newTime: number) => void): void;
+    removeTimeChangedCallback(callback: (newTime: number) => void): void;
+    timeChanged(newTime: number): void;
+}

package/dist/delorean/core/delorean.types.d.ts

@@ -0,0 +1,5 @@
+export type TimesOperation = 'union' | 'intersect' | 'replace';
+export interface LayerTimeInfo {
+    defaultValue?: number;
+    discreteValues?: number[];
+}

package/dist/delorean/core/delorean.utils.d.ts

@@ -0,0 +1,10 @@
+import type { LayerTimeInfo } from './delorean.types';
+export declare function getCurrentTimeIndex(time: number, times: number[]): number;
+/**
+ * Funzione end-to-end: dato l'URL base del GeoServer e l'id/nome del layer,
+ * restituisce le informazioni temporali del layer.
+ *
+ * @param geoserverBaseUrl es. "https://mio-server/geoserver/wms"
+ * @param layerId es. "mio_workspace:mio_layer"
+ */
+export declare function getLayerTimes(geoserverBaseUrl: string, layerId: string): Promise<LayerTimeInfo>;

package/dist/delorean/core/index.d.ts

@@ -0,0 +1,3 @@
+export * from './delorean.store';
+export * from './delorean.types';
+export * from './delorean.utils';

package/dist/delorean/ui/delorean.component.d.ts

@@ -0,0 +1,7 @@
+export declare class DeloreanController extends HTMLElement {
+    #private;
+    shadowRoot: ShadowRoot;
+    constructor();
+    connectedCallback(): void;
+    set time(value: number);
+}

package/dist/delorean/ui/index.d.ts

@@ -0,0 +1 @@
+export * from './delorean.component';

package/dist/delorean.utils-DOgTNSYn.js

@@ -0,0 +1,91 @@
+function y(r, n) {
+  let t = -1;
+  if (r > n[n.length - 1]) return n.length - 1;
+  for (let e = 0; e < n.length; e++) {
+    const a = n[e];
+    if (r < a) {
+      t = e - 1;
+      break;
+    }
+    if (r === a) {
+      t = e;
+      break;
+    }
+  }
+  return t === -1 ? 0 : t;
+}
+async function p(r, n = "1.3.0") {
+  const t = new URL(r);
+  t.searchParams.set("SERVICE", "WMS"), t.searchParams.set("REQUEST", "GetCapabilities"), t.searchParams.set("VERSION", n);
+  const e = await fetch(t.toString());
+  if (!e.ok)
+    throw new Error(
+      `GetCapabilities fallita: HTTP ${e.status} ${e.statusText}`
+    );
+  return e.text();
+}
+function E(r) {
+  const t = new DOMParser().parseFromString(r, "application/xml"), e = t.getElementsByTagName("parsererror")[0];
+  if (e)
+    throw new Error("Errore nel parsing dell'XML: " + e.textContent);
+  return t;
+}
+function w(r, n) {
+  var e;
+  const t = Array.from(r.getElementsByTagName("Layer"));
+  for (const a of t) {
+    const s = Array.from(a.children).find(
+      (i) => i.tagName === "Name" || i.tagName.endsWith(":Name")
+    );
+    if (s && ((e = s.textContent) == null ? void 0 : e.trim()) === n)
+      return a;
+  }
+  return null;
+}
+function h(r) {
+  return Array.from(
+    r.getElementsByTagName("Dimension")
+  ).concat(Array.from(r.getElementsByTagName("Extent"))).find(
+    (t) => {
+      var e;
+      return ((e = t.getAttribute("name")) == null ? void 0 : e.toLowerCase()) === "time";
+    }
+  ) ?? null;
+}
+function T(r) {
+  const n = r.trim();
+  if (n.includes("/")) {
+    const [t, e, a] = n.split("/");
+    if (!t || !e || !a) return [];
+    const s = new Date(t).getTime(), i = new Date(e).getTime(), o = a.match(
+      /^P(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?$/
+    );
+    if (!Number.isFinite(s) || !Number.isFinite(i) || !o)
+      return [];
+    const [, c = "0", m = "0", d = "0", g = "0"] = o, u = Number(c) * 864e5 + Number(m) * 36e5 + Number(d) * 6e4 + Number(g) * 1e3;
+    if (u <= 0 || i < s) return [];
+    const f = [];
+    for (let l = s; l <= i; l += u)
+      f.push(l);
+    return f;
+  }
+  return n.split(",").map((t) => new Date(t.trim()).getTime()).filter(Number.isFinite);
+}
+async function N(r, n) {
+  var m;
+  const t = await p(r), e = E(t), a = w(e.documentElement, n);
+  if (!a)
+    throw new Error(`Layer "${n}" non trovato nel GetCapabilities`);
+  const s = h(a);
+  if (!s)
+    throw new Error(`Il layer "${n}" non espone una dimensione "time"`);
+  const i = ((m = s.textContent) == null ? void 0 : m.trim()) ?? "", o = s.hasAttribute("default") ? new Date(s.getAttribute("default")).getTime() : void 0, c = T(i);
+  return {
+    defaultValue: o,
+    discreteValues: c
+  };
+}
+export {
+  y as a,
+  N as g
+};

package/dist/leaflet/index.js

@@ -0,0 +1,48 @@
+var f = Object.defineProperty;
+var g = (t) => {
+  throw TypeError(t);
+};
+var u = (t, e, i) => e in t ? f(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i;
+var c = (t, e, i) => u(t, typeof e != "symbol" ? e + "" : e, i), w = (t, e, i) => e.has(t) || g("Cannot " + i);
+var s = (t, e, i) => (w(t, e, "read from private field"), i ? i.call(t) : e.get(t)), h = (t, e, i) => e.has(t) ? g("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), m = (t, e, i, l) => (w(t, e, "write to private field"), l ? l.call(t, i) : e.set(t, i), i);
+import * as b from "leaflet";
+import { g as p } from "../delorean.utils-DOgTNSYn.js";
+var a, o, d, n, r;
+class L {
+  constructor(e, i) {
+    c(this, "layerId");
+    c(this, "layer");
+    c(this, "getCapabilitiesUrl");
+    h(this, a);
+    h(this, o);
+    h(this, d);
+    h(this, n);
+    h(this, r);
+    m(this, a, e), this.layerId = i.layerId, this.getCapabilitiesUrl = i.getCapabilitiesUrl, m(this, o, i.tileBaseUrl), m(this, d, i.wmsOptions), this.layer = b.tileLayer.wms(s(this, o), s(this, d));
+  }
+  async addTo(e, i, l = "intersect") {
+    const y = await this.loadTimes();
+    e.addLayer(this.layer), m(this, n, y.discreteValues), s(this, a).setTimes(s(this, n) ?? [], l), m(this, r, (T) => this.setTime(T)), s(this, a).addTimeChangedCallback(s(this, r));
+    const C = i ?? y.defaultValue;
+    return C ? s(this, a).setCurrentTime(C) : s(this, a).lastTime(), await new Promise((T) => this.layer.once("load", T)), this;
+  }
+  removeFrom(e) {
+    return e.removeLayer(this.layer), s(this, a).removeTimes(s(this, n) ?? []), s(this, r) && s(this, a).removeTimeChangedCallback(s(this, r)), this;
+  }
+  loadTimes() {
+    if (!this.getCapabilitiesUrl) throw new Error("getCapabilitiesUrl undefined");
+    return p(this.getCapabilitiesUrl, this.layerId);
+  }
+  async setTime(e) {
+    const i = this.layer, l = new Promise((y) => {
+      i.once("load", () => y());
+    });
+    return i.setParams({
+      time: new Date(e).toISOString()
+    }), await l, this;
+  }
+}
+a = new WeakMap(), o = new WeakMap(), d = new WeakMap(), n = new WeakMap(), r = new WeakMap();
+export {
+  L as LeafletRasterTimeLayer
+};

package/dist/maplibre/index.js

@@ -0,0 +1,66 @@
+var $ = Object.defineProperty;
+var b = (i) => {
+  throw TypeError(i);
+};
+var L = (i, e, t) => e in i ? $(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var n = (i, e, t) => L(i, typeof e != "symbol" ? e + "" : e, t), C = (i, e, t) => e.has(i) || b("Cannot " + t);
+var r = (i, e, t) => (C(i, e, "read from private field"), t ? t.call(i) : e.get(i)), l = (i, e, t) => e.has(i) ? b("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, t), o = (i, e, t, d) => (C(i, e, "write to private field"), d ? d.call(i, t) : e.set(i, t), t), y = (i, e, t) => (C(i, e, "access private method"), t);
+import * as p from "maplibre-gl";
+import { g as v } from "../delorean.utils-DOgTNSYn.js";
+var s, I, u, T, m, c, a, w, S, U;
+class R {
+  constructor(e, t) {
+    l(this, a);
+    n(this, "sourceId");
+    n(this, "source");
+    n(this, "layerId");
+    n(this, "layer");
+    n(this, "getCapabilitiesUrl");
+    l(this, s);
+    l(this, I);
+    l(this, u);
+    l(this, T);
+    l(this, m);
+    l(this, c);
+    o(this, s, e), this.sourceId = t.sourceId, this.layerId = t.layerId, this.getCapabilitiesUrl = t.getCapabilitiesUrl, o(this, I, t.tileBaseUrl), o(this, u, new URLSearchParams(t.tileUrlParams)), o(this, T, t.tileUrlTemplate), this.source = y(this, a, w).call(this), this.layer = y(this, a, S).call(this, t.paint);
+  }
+  async addTo(e, t, d = "intersect") {
+    const h = await this.loadTimes();
+    e.addSource(this.sourceId, this.source), e.addLayer(this.layer), o(this, m, h.discreteValues), r(this, s).setTimes(r(this, m) ?? [], d), o(this, c, (f) => this.setTime(e, f)), r(this, s).addTimeChangedCallback(r(this, c));
+    const g = t ?? h.defaultValue;
+    return g ? r(this, s).setCurrentTime(g) : r(this, s).lastTime(), await new Promise((f) => e.once("idle", f)), this;
+  }
+  removeFrom(e) {
+    return e.getLayer(this.layerId) && e.removeLayer(this.layerId), e.getSource(this.sourceId) && e.removeSource(this.sourceId), r(this, s).removeTimes(r(this, m) ?? []), r(this, c) && r(this, s).removeTimeChangedCallback(r(this, c)), this;
+  }
+  loadTimes() {
+    if (!this.getCapabilitiesUrl) throw new Error("getCapabilitiesUrl undefined");
+    return v(this.getCapabilitiesUrl, this.layerId);
+  }
+  async setTime(e, t) {
+    if (!e) throw new Error(`Cannot set time: layer "${this.layerId}" is not attached to a map.`);
+    const d = new Promise((g) => {
+      e.once("idle", () => g());
+    }), h = e.getSource(this.sourceId);
+    if (!h || h.type !== "raster") throw new Error(`Raster source "${this.sourceId}" not found.`);
+    return r(this, u).set("TIME", `${new Date(t).toISOString()}`), h instanceof p.RasterTileSource && h.setTiles([y(this, a, U).call(this)]), await d, this;
+  }
+}
+s = new WeakMap(), I = new WeakMap(), u = new WeakMap(), T = new WeakMap(), m = new WeakMap(), c = new WeakMap(), a = new WeakSet(), w = function() {
+  return {
+    type: "raster",
+    tiles: [y(this, a, U).call(this)]
+  };
+}, S = function(e) {
+  return {
+    id: this.layerId,
+    source: this.sourceId,
+    type: "raster",
+    paint: e ?? {}
+  };
+}, U = function() {
+  return `${r(this, I)}?${r(this, u).toString()}&${Object.entries(r(this, T)).map(([e, t]) => `${e}=${t}`).join("&")}`;
+};
+export {
+  R as MaplibreglRasterTimeLayer
+};

package/dist/ui/index.js

@@ -0,0 +1,129 @@
+var q = Object.defineProperty;
+var _ = (e) => {
+  throw TypeError(e);
+};
+var A = (e, s, t) => s in e ? q(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
+var k = (e, s, t) => A(e, typeof s != "symbol" ? s + "" : s, t), y = (e, s, t) => s.has(e) || _("Cannot " + t);
+var n = (e, s, t) => (y(e, s, "read from private field"), t ? t.call(e) : s.get(e)), a = (e, s, t) => s.has(e) ? _("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), l = (e, s, t, i) => (y(e, s, "write to private field"), i ? i.call(e, t) : s.set(e, t), t), h = (e, s, t) => (y(e, s, "access private method"), t);
+var r, p, c, m, g, u, d, w, b, o, f, B, M, x, D, F, C, E, Z, R;
+class L extends HTMLElement {
+  constructor() {
+    super();
+    a(this, o);
+    k(this, "shadowRoot");
+    a(this, r, !1);
+    a(this, p);
+    a(this, c);
+    a(this, m);
+    a(this, g);
+    a(this, u);
+    a(this, d);
+    a(this, w, "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M560-200v-560h160v560H560Zm-320%200v-560h160v560H240Z%22%2F%3E%3C%2Fsvg%3E");
+    a(this, b, "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M320-200v-560l440%20280-440%20280Z%22%2F%3E%3C%2Fsvg%3E");
+    a(this, x, () => {
+      this.dispatchEvent(
+        new CustomEvent("delorean-firsttime", { bubbles: !0, composed: !0 })
+      );
+    });
+    a(this, D, () => {
+      this.dispatchEvent(
+        new CustomEvent("delorean-prevtime", { bubbles: !0, composed: !0 })
+      );
+    });
+    a(this, F, () => {
+      this.dispatchEvent(
+        new CustomEvent("delorean-nexttime", { bubbles: !0, composed: !0 })
+      );
+    });
+    a(this, C, () => {
+      this.dispatchEvent(
+        new CustomEvent("delorean-lasttime", { bubbles: !0, composed: !0 })
+      );
+    });
+    a(this, E, () => {
+      l(this, r, !n(this, r)), h(this, o, Z).call(this, n(this, r)), this.dispatchEvent(
+        new CustomEvent("delorean-play", { bubbles: !0, composed: !0, detail: n(this, r) })
+      );
+    });
+    this.shadowRoot = this.attachShadow({ mode: "open" }), this.shadowRoot.appendChild(h(this, o, f).call(this).content.cloneNode(!0)), this.shadowRoot.appendChild(h(this, o, B).call(this).cloneNode(!0)), l(this, p, this.shadowRoot.querySelector("#datetime")), l(this, c, this.shadowRoot.querySelector("#first")), l(this, m, this.shadowRoot.querySelector("#prev")), l(this, g, this.shadowRoot.querySelector("#next")), l(this, u, this.shadowRoot.querySelector("#last")), l(this, d, this.shadowRoot.querySelector("#play"));
+  }
+  connectedCallback() {
+    h(this, o, M).call(this);
+  }
+  set time(t) {
+    n(this, p).value = h(this, o, R).call(this, t);
+  }
+}
+r = new WeakMap(), p = new WeakMap(), c = new WeakMap(), m = new WeakMap(), g = new WeakMap(), u = new WeakMap(), d = new WeakMap(), w = new WeakMap(), b = new WeakMap(), o = new WeakSet(), f = function() {
+  const t = document.createElement("template");
+  return t.innerHTML = `
+            <div part="delorean" class="delorean">
+                <button type="button" part="delorean__first" id="first" class="delorean-btn">
+                    <span class="delorean-btn__icon" style="mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M220-240v-480h80v480h-80Zm520%200L380-480l360-240v480Z%22%2F%3E%3C%2Fsvg%3E')"></span>
+                </button>
+                <button type="button" part="delorean__previous" id="prev" class="delorean-btn">
+                    <span class="delorean-btn__icon" style="mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M860-240%20500-480l360-240v480Zm-400%200L100-480l360-240v480Z%22%2F%3E%3C%2Fsvg%3E')"></span>
+                </button>
+                <button type="button" part="delorean__play" id="play" class="delorean-btn">
+                    <span class="delorean-btn__icon" style="mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M320-200v-560l440%20280-440%20280Z%22%2F%3E%3C%2Fsvg%3E')"></span>
+                </button>
+                <button type="button" part="delorean__next" id="next" class="delorean-btn">
+                    <span class="delorean-btn__icon" style="mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M100-240v-480l360%20240-360%20240Zm400%200v-480l360%20240-360%20240Z%22%2F%3E%3C%2Fsvg%3E')"></span>
+                </button>
+                <button type="button" part="delorean__last" id="last" class="delorean-btn">
+                    <span class="delorean-btn__icon" style="mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M660-240v-480h80v480h-80Zm-440%200v-480l360%20240-360%20240Z%22%2F%3E%3C%2Fsvg%3E')"></span>
+                </button>
+                <input type="datetime-local" part="delorean__datetime" id="datetime" class="delorean__datetime" readonly />
+            </div>
+        `, t;
+}, B = function() {
+  const t = document.createElement("style");
+  return t.innerHTML = `
+            .delorean {
+                display: flex;
+                align-items: center;
+            }
+
+            .delorean-btn {
+                width: 24px;
+                height: 24px;
+                margin: 0;
+                padding: 0;
+            }
+
+            .delorean-btn,
+            .delorean-btn__icon {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            .delorean-btn__icon {
+                background-color: black;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+                height: 100%;
+                width: 100%;
+            }
+
+            .delorean__datetime {
+                height: 24px;
+            }
+            `, t;
+}, M = function() {
+  n(this, c).onclick = n(this, x), n(this, m).onclick = n(this, D), n(this, g).onclick = n(this, F), n(this, u).onclick = n(this, C), n(this, d).onclick = n(this, E);
+}, x = new WeakMap(), D = new WeakMap(), F = new WeakMap(), C = new WeakMap(), E = new WeakMap(), Z = function(t) {
+  const i = n(this, d).querySelector("span.delorean-btn__icon");
+  i && (i.style.maskImage = `url('${t ? n(this, w) : n(this, b)}')`);
+}, R = function(t) {
+  const i = new Date(t), v = (S) => S.toString().padStart(2, "0");
+  return [
+    `${i.getFullYear()}-${v(i.getMonth() + 1)}-${v(i.getDate())}`,
+    `${v(i.getHours())}:${v(i.getMinutes())}`
+  ].join("T");
+};
+customElements.define("delorean-controller", L);
+export {
+  L as DeloreanController
+};

package/package.json

@@ -1,6 +1,56 @@
 {
   "name": "@anthropomorphic/delorean",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Lightweight custom time controller library for WMS layer for Leaflet and Maplibre map frameworks.",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    "./core": {
+      "types": "./dist/delorean/core/index.d.ts",
+      "import": "./dist/core/index.js"
+    },
+    "./ui": {
+      "types": "./dist/delorean/ui/index.d.ts",
+      "import": "./dist/ui/index.js"
+    },
+    "./leaflet": {
+      "types": "./dist/delorean/adapters/leaflet/index.d.ts",
+      "import": "./dist/leaflet/index.js"
+    },
+    "./maplibre": {
+      "types": "./dist/delorean/adapters/maplibre/index.d.ts",
+      "import": "./dist/maplibre/index.js"
+    }
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "prepack": "npm run build"
+  },
+  "peerDependencies": {
+    "leaflet": "*",
+    "maplibre-gl": "*"
+  },
+  "peerDependenciesMeta": {
+    "leaflet": {
+      "optional": true
+    },
+    "maplibre-gl": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/leaflet": "^1.9.22",
+    "leaflet": "^1.9.4",
+    "maplibre-gl": "^6.16.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0"
+  },
+  "sideEffects": [
+    "./dist/ui/index.js"
+  ]
 }