@chrtco/sdk 0.7.0 → 0.7.2

package/dist/atlas/browser.d.cts

@@ -17,6 +17,68 @@ declare function loadS52SymbolImages(map: maplibregl.Map, colorTable?: ColorTabl
  */
 declare function reloadS52SymbolImages(map: maplibregl.Map, colorTable: ColorTableName): Promise<void>;
 
+/**
+ * Browser-only IndexedDB cache for S-52 symbol bitmaps.
+ *
+ * **First visit** — decodes 363 themed SVGs via the proven `new Image()` +
+ * `data:` URL path (identical to `./s52-svg-loader-browser`), adds them to
+ * the map immediately, AND in a non-blocking background task converts each
+ * decoded image to an `ImageBitmap` and persists it to IndexedDB keyed by
+ * `(atlasVersion, colorTable, symbolName)`.
+ *
+ * **Subsequent visits** — bulk-reads the bitmaps from IDB in a single
+ * transaction and `addImage`s them synchronously before any SVG parsing.
+ * The live-decode loop only runs for cache misses (atlas version mismatch,
+ * cleared storage, theme switch with no prior visit on that theme).
+ *
+ * **Hardening pass after PR #513**:
+ *
+ * - Originally tried `createImageBitmap(svgBlob)` — Chromium silently throws
+ *   `InvalidStateError` for SVG inputs even though the function exists. The
+ *   per-symbol catch swallowed the error and zero symbols got added to the
+ *   map. Buoys / lights / beacons disappeared.
+ * - The fix is to NEVER let an SVG go through `createImageBitmap` directly.
+ *   We decode via `new Image()` (which DOES handle SVG everywhere), then
+ *   route the decoded image through a canvas → `createImageBitmap(canvas)`
+ *   to get an IDB-storable bitmap. Canvas inputs to `createImageBitmap` are
+ *   universally supported.
+ * - First-visit `addImage` happens off the HTMLImageElement, not the
+ *   bitmap. The IDB persist is "best effort, never blocks the map" — any
+ *   bitmap-conversion failure leaves the symbol on the map and just skips
+ *   the cache write.
+ *
+ * Gracefully degrades to `loadS52SymbolImages` when IndexedDB is
+ * unavailable (private-mode lockdown, exotic browser).
+ */
+
+interface LoadCachedOptions {
+    /**
+     * If true, skip the IDB read and force a full live-decode + repopulate.
+     * Theme is part of the key so this is rarely needed; left as an escape
+     * hatch.
+     */
+    forceRefresh?: boolean;
+}
+/** Stable atlas version, exposed for diagnostics and tests. */
+declare function getS52AtlasVersion(): string;
+/**
+ * Drop-in replacement for `loadS52SymbolImages`. On first visit, decodes
+ * via the same `new Image()` path the live loader uses and persists each
+ * decoded symbol to IndexedDB in a non-blocking background task. On
+ * subsequent visits, bulk-hydrates from IDB before any SVG parsing.
+ *
+ * Falls back to `loadS52SymbolImages` when IndexedDB or canvas-to-bitmap
+ * conversion isn't available.
+ */
+declare function loadS52SymbolImagesCached(map: maplibregl.Map, colorTable?: ColorTableName, opts?: LoadCachedOptions): Promise<void>;
+/**
+ * Theme-switch equivalent of `reloadS52SymbolImages` that routes through
+ * the IDB-backed path.
+ */
+declare function reloadS52SymbolImagesCached(map: maplibregl.Map, colorTable: ColorTableName): Promise<void>;
+/** Test/debug helper — wipes the entire bitmap store. */
+declare function clearS52SymbolImageCache(): Promise<void>;
+
 /**
  * Browser-only nautical symbol image loaders. Sourced from `./symbols.ts`'s
  * pure data; pushes themed icons into a MapLibre map via `new Image()` +
@@ -30,4 +92,4 @@ declare function loadSymbolImages(map: maplibregl.Map): Promise<void>;
  */
 declare function loadThemedBridgeImages(map: maplibregl.Map, colorTable: ColorTableName): Promise<void>;
 
-export { loadS52SymbolImages, loadSymbolImages, loadThemedBridgeImages, reloadS52SymbolImages };
+export { type LoadCachedOptions, clearS52SymbolImageCache, getS52AtlasVersion, loadS52SymbolImages, loadS52SymbolImagesCached, loadSymbolImages, loadThemedBridgeImages, reloadS52SymbolImages, reloadS52SymbolImagesCached };

package/dist/atlas/browser.d.ts

@@ -17,6 +17,68 @@ declare function loadS52SymbolImages(map: maplibregl.Map, colorTable?: ColorTabl
  */
 declare function reloadS52SymbolImages(map: maplibregl.Map, colorTable: ColorTableName): Promise<void>;
 
+/**
+ * Browser-only IndexedDB cache for S-52 symbol bitmaps.
+ *
+ * **First visit** — decodes 363 themed SVGs via the proven `new Image()` +
+ * `data:` URL path (identical to `./s52-svg-loader-browser`), adds them to
+ * the map immediately, AND in a non-blocking background task converts each
+ * decoded image to an `ImageBitmap` and persists it to IndexedDB keyed by
+ * `(atlasVersion, colorTable, symbolName)`.
+ *
+ * **Subsequent visits** — bulk-reads the bitmaps from IDB in a single
+ * transaction and `addImage`s them synchronously before any SVG parsing.
+ * The live-decode loop only runs for cache misses (atlas version mismatch,
+ * cleared storage, theme switch with no prior visit on that theme).
+ *
+ * **Hardening pass after PR #513**:
+ *
+ * - Originally tried `createImageBitmap(svgBlob)` — Chromium silently throws
+ *   `InvalidStateError` for SVG inputs even though the function exists. The
+ *   per-symbol catch swallowed the error and zero symbols got added to the
+ *   map. Buoys / lights / beacons disappeared.
+ * - The fix is to NEVER let an SVG go through `createImageBitmap` directly.
+ *   We decode via `new Image()` (which DOES handle SVG everywhere), then
+ *   route the decoded image through a canvas → `createImageBitmap(canvas)`
+ *   to get an IDB-storable bitmap. Canvas inputs to `createImageBitmap` are
+ *   universally supported.
+ * - First-visit `addImage` happens off the HTMLImageElement, not the
+ *   bitmap. The IDB persist is "best effort, never blocks the map" — any
+ *   bitmap-conversion failure leaves the symbol on the map and just skips
+ *   the cache write.
+ *
+ * Gracefully degrades to `loadS52SymbolImages` when IndexedDB is
+ * unavailable (private-mode lockdown, exotic browser).
+ */
+
+interface LoadCachedOptions {
+    /**
+     * If true, skip the IDB read and force a full live-decode + repopulate.
+     * Theme is part of the key so this is rarely needed; left as an escape
+     * hatch.
+     */
+    forceRefresh?: boolean;
+}
+/** Stable atlas version, exposed for diagnostics and tests. */
+declare function getS52AtlasVersion(): string;
+/**
+ * Drop-in replacement for `loadS52SymbolImages`. On first visit, decodes
+ * via the same `new Image()` path the live loader uses and persists each
+ * decoded symbol to IndexedDB in a non-blocking background task. On
+ * subsequent visits, bulk-hydrates from IDB before any SVG parsing.
+ *
+ * Falls back to `loadS52SymbolImages` when IndexedDB or canvas-to-bitmap
+ * conversion isn't available.
+ */
+declare function loadS52SymbolImagesCached(map: maplibregl.Map, colorTable?: ColorTableName, opts?: LoadCachedOptions): Promise<void>;
+/**
+ * Theme-switch equivalent of `reloadS52SymbolImages` that routes through
+ * the IDB-backed path.
+ */
+declare function reloadS52SymbolImagesCached(map: maplibregl.Map, colorTable: ColorTableName): Promise<void>;
+/** Test/debug helper — wipes the entire bitmap store. */
+declare function clearS52SymbolImageCache(): Promise<void>;
+
 /**
  * Browser-only nautical symbol image loaders. Sourced from `./symbols.ts`'s
  * pure data; pushes themed icons into a MapLibre map via `new Image()` +
@@ -30,4 +92,4 @@ declare function loadSymbolImages(map: maplibregl.Map): Promise<void>;
  */
 declare function loadThemedBridgeImages(map: maplibregl.Map, colorTable: ColorTableName): Promise<void>;
 
-export { loadS52SymbolImages, loadSymbolImages, loadThemedBridgeImages, reloadS52SymbolImages };
+export { type LoadCachedOptions, clearS52SymbolImageCache, getS52AtlasVersion, loadS52SymbolImages, loadS52SymbolImagesCached, loadSymbolImages, loadThemedBridgeImages, reloadS52SymbolImages, reloadS52SymbolImagesCached };

package/dist/atlas/browser.js

@@ -3,10 +3,10 @@ var S52_DAY = {
   // Depth
   NODTA: "#a4a4a4",
   DEPIT: "#009678",
-  DEPVS: "#99d6ea",
-  DEPMS: "#b8e2f1",
-  DEPMD: "#c4eaf8",
-  DEPDW: "#dbf3fc",
+  DEPVS: "#7fbfdf",
+  DEPMS: "#a7d4e8",
+  DEPMD: "#cae7f3",
+  DEPDW: "#ecf7fc",
   // Land / topography
   LANDA: "#e6d1a1",
   LANDF: "#c8b078",
@@ -85,10 +85,10 @@ var S52_DAY = {
 var S52_DUSK = {
   NODTA: "#6b6b6b",
   DEPIT: "#006650",
-  DEPVS: "#5a8fa0",
-  DEPMS: "#6a9aad",
-  DEPMD: "#7ab0c0",
-  DEPDW: "#7fb5cc",
+  DEPVS: "#487085",
+  DEPMS: "#608a9d",
+  DEPMD: "#7ba6b8",
+  DEPDW: "#95bfd0",
   LANDA: "#8a7d5e",
   LANDF: "#7a6a48",
   CHBRN: "#6e4e30",
@@ -156,10 +156,10 @@ var S52_DUSK = {
 var S52_NIGHT = {
   NODTA: "#3a3a32",
   DEPIT: "#003828",
-  DEPVS: "#1a3a45",
-  DEPMS: "#1e4050",
-  DEPMD: "#1a3848",
-  DEPDW: "#1a3545",
+  DEPVS: "#356577",
+  DEPMS: "#265066",
+  DEPMD: "#102e44",
+  DEPDW: "#051a28",
   LANDA: "#3a3020",
   LANDF: "#302818",
   CHBRN: "#382410",
@@ -778,6 +778,192 @@ async function reloadS52SymbolImages(map, colorTable) {
   await Promise.all(promises);
 }
 
+// src/atlas/s52-image-cache.ts
+var SDF_SYMBOLS2 = /* @__PURE__ */ new Set(["LIGHTS11", "LIGHTS13"]);
+var LOGICAL_SIZE2 = 32;
+var PIXEL_RATIO2 = 2;
+var RENDER_SIZE2 = LOGICAL_SIZE2 * PIXEL_RATIO2;
+var DB_NAME = "chrt-s52-atlas";
+var DB_VERSION = 1;
+var STORE_NAME = "bitmaps";
+var PARAM_VERSION = "v2";
+function computeAtlasVersion() {
+  const names = Object.keys(ALL_S52_SVGS).sort().join("|");
+  let h = 2166136261;
+  for (let i = 0; i < names.length; i++) {
+    h ^= names.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return `${PARAM_VERSION}-${(h >>> 0).toString(16)}-${Object.keys(ALL_S52_SVGS).length}`;
+}
+var ATLAS_VERSION = /* @__PURE__ */ computeAtlasVersion();
+function makeKey(colorTable, name) {
+  return `${ATLAS_VERSION}:${colorTable}:${name}`;
+}
+function upsampleSvg2(svg2) {
+  return svg2.replace(
+    /width="(\d+)"\s+height="(\d+)"/,
+    `width="${RENDER_SIZE2}" height="${RENDER_SIZE2}"`
+  );
+}
+function prepareSvg2(rawSvg, colorTable) {
+  return upsampleSvg2(applyStrokeBoost(applyColorTheme(rawSvg, colorTable), S52_STROKE_BOOST));
+}
+function hasIndexedDB() {
+  return typeof indexedDB !== "undefined";
+}
+function hasCanvasToBitmap() {
+  return typeof createImageBitmap === "function" && typeof document !== "undefined" && typeof document.createElement === "function";
+}
+var dbPromise = null;
+function openDb() {
+  if (!hasIndexedDB()) return Promise.reject(new Error("IndexedDB not available"));
+  if (dbPromise) return dbPromise;
+  dbPromise = new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME);
+      }
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error ?? new Error("indexedDB.open failed"));
+    req.onblocked = () => reject(new Error("indexedDB.open blocked"));
+  });
+  dbPromise.catch(() => {
+    dbPromise = null;
+  });
+  return dbPromise;
+}
+async function idbPut(key, value) {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readwrite");
+    const store = tx.objectStore(STORE_NAME);
+    const req = store.put(value, key);
+    req.onsuccess = () => resolve();
+    req.onerror = () => reject(req.error);
+  });
+}
+async function idbGetAllForTheme(colorTable) {
+  const out = /* @__PURE__ */ new Map();
+  const db = await openDb();
+  const names = Object.keys(ALL_S52_SVGS);
+  await new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readonly");
+    const store = tx.objectStore(STORE_NAME);
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+    tx.onabort = () => reject(tx.error ?? new Error("idb txn aborted"));
+    for (const name of names) {
+      const req = store.get(makeKey(colorTable, name));
+      req.onsuccess = () => {
+        const bm = req.result;
+        if (bm) out.set(name, bm);
+      };
+    }
+  });
+  return out;
+}
+function decodeSvgToImage(themedSvg) {
+  return new Promise((resolve) => {
+    const img = new Image(RENDER_SIZE2, RENDER_SIZE2);
+    img.onload = () => resolve(img);
+    img.onerror = () => resolve(null);
+    img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(themedSvg)}`;
+  });
+}
+async function imageToBitmap(img) {
+  try {
+    const canvas = document.createElement("canvas");
+    canvas.width = RENDER_SIZE2;
+    canvas.height = RENDER_SIZE2;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    ctx.drawImage(img, 0, 0, RENDER_SIZE2, RENDER_SIZE2);
+    return await createImageBitmap(canvas);
+  } catch {
+    return null;
+  }
+}
+function addImageToMap(map, name, image) {
+  if (map.hasImage(name)) return;
+  try {
+    map.addImage(name, image, {
+      sdf: SDF_SYMBOLS2.has(name),
+      pixelRatio: PIXEL_RATIO2
+    });
+  } catch {
+  }
+}
+function getS52AtlasVersion() {
+  return ATLAS_VERSION;
+}
+async function loadS52SymbolImagesCached(map, colorTable = "DAY", opts = {}) {
+  if (!hasIndexedDB() || !hasCanvasToBitmap()) {
+    return loadS52SymbolImages(map, colorTable);
+  }
+  const names = Object.keys(ALL_S52_SVGS);
+  let cached;
+  if (opts.forceRefresh) {
+    cached = /* @__PURE__ */ new Map();
+  } else {
+    try {
+      cached = await idbGetAllForTheme(colorTable);
+    } catch {
+      cached = /* @__PURE__ */ new Map();
+    }
+  }
+  for (const [name, bitmap] of cached) {
+    addImageToMap(map, name, bitmap);
+  }
+  const missing = names.filter((n) => !cached.has(n) && !map.hasImage(n));
+  if (missing.length === 0) return;
+  await Promise.all(
+    missing.map(async (name) => {
+      const rawSvg = ALL_S52_SVGS[name];
+      if (!rawSvg) return;
+      const themed = prepareSvg2(rawSvg, colorTable);
+      const img = await decodeSvgToImage(themed);
+      if (!img) return;
+      addImageToMap(map, name, img);
+      try {
+        const bitmap = await imageToBitmap(img);
+        if (!bitmap) return;
+        await idbPut(makeKey(colorTable, name), bitmap);
+      } catch {
+      }
+    })
+  );
+}
+async function reloadS52SymbolImagesCached(map, colorTable) {
+  if (!hasIndexedDB() || !hasCanvasToBitmap()) {
+    return reloadS52SymbolImages(map, colorTable);
+  }
+  for (const name of Object.keys(ALL_S52_SVGS)) {
+    try {
+      if (map.hasImage(name)) map.removeImage(name);
+    } catch {
+    }
+  }
+  return loadS52SymbolImagesCached(map, colorTable);
+}
+async function clearS52SymbolImageCache() {
+  if (!hasIndexedDB()) return;
+  try {
+    const db = await openDb();
+    await new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE_NAME, "readwrite");
+      const store = tx.objectStore(STORE_NAME);
+      const req = store.clear();
+      req.onsuccess = () => resolve();
+      req.onerror = () => reject(req.error);
+    });
+  } catch {
+  }
+}
+
 // src/atlas/symbols.ts
 var SIZE = 32;
 function svg(inner) {
@@ -3207,9 +3393,13 @@ async function loadThemedBridgeImages(map, colorTable) {
   await Promise.all(promises);
 }
 export {
+  clearS52SymbolImageCache,
+  getS52AtlasVersion,
   loadS52SymbolImages,
+  loadS52SymbolImagesCached,
   loadSymbolImages,
   loadThemedBridgeImages,
-  reloadS52SymbolImages
+  reloadS52SymbolImages,
+  reloadS52SymbolImagesCached
 };
 //# sourceMappingURL=browser.js.map