@tileflow/dom 0.0.0-bootstrap.0 → 0.1.0-alpha.0

package/dist/index.js

@@ -0,0 +1,1768 @@
+// src/map.ts
+import {
+  attachTileflowAtmosphere,
+  attachTileflowBranding,
+  attachTileflowFairUseNotice,
+  attachTileflowHorizonQueries,
+  attachTileflowLabelPlacement,
+  attachTileflowMap3D,
+  attachTileflowMapLifecycle,
+  attachTileflowNauticalLights,
+  attachTileflowNotices,
+  createTileflowAppearanceBinding,
+  createTileflowContourRequestScope,
+  createTileflowNavigationControlBinding,
+  createTileflowSessionStarter,
+  createTileflowThemeController,
+  createTileflowTransformRequest,
+  getTileflowSystemColorScheme,
+  loadTileflowRuntimeStyle,
+  loadTileflowStyleFonts,
+  registerTileflowContourProtocol,
+  registerTileflowPathGroundProtocol,
+  registerTileflowPmtilesProtocol,
+  registerTileflowWorldRequestBridge,
+  reportTileflowMapError,
+  resolveTileflowCameraFit,
+  subscribeTileflowSystemColorScheme,
+  tileflowCanvasContextAttributes,
+  tileflowMaxPitch
+} from "@tileflow/core/browser";
+import { normalizeTileflowCaptureId } from "@tileflow/core/capture";
+import {
+  createTileflowSessionController,
+  defaultTileflowManifestUrl,
+  defaultTileflowRuntimeView,
+  loadTileflowManifest,
+  mergeTileflowAnalytics,
+  nearestTileflowBlendTheme,
+  normalizeTileflowRuntimeCenter,
+  normalizeTileflowStaticImageSize,
+  resolveTileflowManifestMap,
+  resolveTileflowRuntimeStyle,
+  resolveTileflowRuntimeTheme,
+  resolveTileflowRuntimeThemeBlend,
+  resolveTileflowRuntimeView,
+  resolveTileflowStaticImageUrl
+} from "@tileflow/core/runtime";
+import {
+  tileflowInteractionStateSchema as tileflowInteractionStateSchema2,
+  unusedTileflowRendererDiagnostics
+} from "@tileflow/interactions";
+import {
+  createTileflowMapLibreDataRuntime,
+  createTileflowMapLibreDomRuntime,
+  createTileflowMapLibreInteractionCoordinator,
+  createTileflowMapLibreSemanticDomRuntime
+} from "@tileflow/interactions/maplibre";
+
+// src/inputs.ts
+import { validateTileflowBrowserThemeBlendSelection } from "@tileflow/core/browser";
+import {
+  isTileflowTimeOfDay,
+  validateTileflowRuntimeSource,
+  validateTileflowThemeSelection
+} from "@tileflow/core/runtime";
+import {
+  initialTileflowInteractionState,
+  tileflowInteractionStateSchema,
+  validateTileflowAnnotations,
+  validateTileflowInteractionBindings
+} from "@tileflow/interactions";
+function prepareTileflowAnnotations(annotations) {
+  const candidates = annotations ?? [];
+  const titles = new Map(candidates.map((annotation) => [annotation.id, annotation.ariaLabel]));
+  const validation = validateTileflowAnnotations(candidates);
+  if (!validation.ok) {
+    return { annotations: [], diagnostics: validation.diagnostics, ok: false, titles };
+  }
+  return { annotations: candidates, diagnostics: [], ok: true, titles };
+}
+function prepareTileflowInteractionBindings(interactions) {
+  const validation = validateTileflowInteractionBindings(interactions ?? []);
+  return validation.ok ? { bindings: validation.bindings, diagnostics: [], ok: true } : { diagnostics: validation.diagnostics, ok: false };
+}
+function prepareTileflowInteractionState(interactionState, defaultInteractionState, controlledOwnership = interactionState !== void 0) {
+  const controlled = interactionState !== void 0;
+  if (controlled && defaultInteractionState !== void 0) {
+    return invalidState(
+      controlled,
+      "Tileflow Map accepts interactionState or defaultInteractionState, not both."
+    );
+  }
+  if (controlled !== controlledOwnership) {
+    return invalidState(
+      controlled,
+      "Tileflow interaction state ownership cannot switch between controlled and uncontrolled."
+    );
+  }
+  const statePath = controlled ? "/interactionState" : "/defaultInteractionState";
+  const parsed = tileflowInteractionStateSchema.safeParse(
+    interactionState ?? defaultInteractionState ?? initialTileflowInteractionState
+  );
+  if (parsed.success) return { controlled, diagnostics: [], ok: true, state: parsed.data };
+  return {
+    controlled,
+    diagnostics: parsed.error.issues.map((issue) => ({
+      code: "INVALID_DOCUMENT",
+      level: "error",
+      message: issue.message,
+      path: `${statePath}${issue.path.map((segment) => String(segment).replaceAll("~", "~0").replaceAll("/", "~1")).map((segment) => `/${segment}`).join("")}`
+    })),
+    ok: false,
+    state: initialTileflowInteractionState
+  };
+}
+function invalidState(controlled, message) {
+  return {
+    controlled,
+    diagnostics: [{ code: "INVALID_DOCUMENT", level: "error", message, path: "" }],
+    ok: false,
+    state: initialTileflowInteractionState
+  };
+}
+function assertTileflowMapStyleOptions(input) {
+  const error = styleOptionsError(input);
+  if (error) throw new TypeError(`Invalid Tileflow map options: ${error}`);
+}
+function styleOptionsError(input) {
+  const sourceValidation = validateTileflowRuntimeSource(input.source);
+  if (!sourceValidation.ok) return sourceValidation.error;
+  if (input.theme !== void 0 && !validateTileflowThemeSelection(input.theme)) {
+    return 'theme must be a concrete portable theme name or "system"';
+  }
+  if (input.timeOfDay !== void 0 && !isTileflowTimeOfDay(input.timeOfDay)) {
+    return "timeOfDay must be day, dawn, dusk, or night";
+  }
+  if (input.themeBlend !== void 0 && !validateTileflowBrowserThemeBlendSelection(input.themeBlend)) {
+    return "themeBlend must name two to eight concrete themes, a position from 0 to themes.length - 1, and an optional boolean hold";
+  }
+  if (input.themeTransition !== void 0 && !isThemeTransition(input.themeTransition)) {
+    return "themeTransition.duration must be a number of milliseconds from 0 to 5000";
+  }
+  return void 0;
+}
+function isThemeTransition(value) {
+  if (!value || typeof value !== "object") return false;
+  const { duration } = value;
+  return duration === void 0 || typeof duration === "number" && Number.isFinite(duration) && duration >= 0 && duration <= 5e3;
+}
+function createOverlayFailureDiagnostic(message) {
+  return { code: "OVERLAY_FAILURE", level: "error", message, path: "" };
+}
+function tileflowInteractionDiagnosticKey(diagnostic) {
+  return [
+    diagnostic.code,
+    diagnostic.level,
+    diagnostic.path ?? "",
+    diagnostic.target ? JSON.stringify(diagnostic.target) : "",
+    diagnostic.message
+  ].join("\0");
+}
+function imageModeAnnotationDiagnostic(annotationCount) {
+  return annotationCount > 0 ? {
+    code: "UNSUPPORTED_MODE",
+    level: "error",
+    message: 'Tileflow annotations require mode="interactive"; image mode cannot render interactive overlays.',
+    path: ""
+  } : void 0;
+}
+function imageModeMapInteractionDiagnostic(annotationCount, bindingCount, hasAdditionalInteractionConfiguration = false) {
+  if (bindingCount === 0 && !hasAdditionalInteractionConfiguration) {
+    return imageModeAnnotationDiagnostic(annotationCount);
+  }
+  return {
+    code: "UNSUPPORTED_MODE",
+    level: "error",
+    message: annotationCount > 0 && bindingCount > 0 ? 'Tileflow annotations and interactions require mode="interactive"; image mode cannot render interactive overlays.' : annotationCount > 0 ? 'Tileflow annotations require mode="interactive"; image mode cannot render interactive overlays.' : bindingCount > 0 ? 'Tileflow interactions require mode="interactive"; image mode cannot render interactive overlays.' : 'Tileflow interaction state, callbacks, and renderers require mode="interactive"; image mode cannot render interactive overlays.',
+    path: ""
+  };
+}
+
+// src/maplibre.ts
+var bundlerWorkerUrlKey = /* @__PURE__ */ Symbol.for("tileflow.maplibre.workerUrl");
+var mapLibrePromise;
+var mapLibre;
+var workerUrl;
+var appliedWorkerUrl;
+function configureTileflowMapLibre(configuration) {
+  const nextWorkerUrl = configuration.workerUrl;
+  if (!isWorkerUrl(nextWorkerUrl)) {
+    throw new TypeError("Tileflow MapLibre workerUrl must be a non-empty string.");
+  }
+  if (workerUrl !== void 0 && workerUrl !== nextWorkerUrl) {
+    throw new Error("Tileflow MapLibre workerUrl is already configured.");
+  }
+  if (appliedWorkerUrl !== void 0 && appliedWorkerUrl !== nextWorkerUrl) {
+    throw new Error(
+      "Tileflow MapLibre workerUrl is already configured: a map started with the bundler-provided worker. Configure the worker before the first map."
+    );
+  }
+  workerUrl = nextWorkerUrl;
+  if (mapLibre) applyWorkerUrl(mapLibre);
+}
+function loadTileflowMapLibre() {
+  mapLibrePromise ??= import("maplibre-gl").then(resolveMapLibreModule).then(configureTileflowMapLibreModule).catch((error) => {
+    mapLibrePromise = void 0;
+    throw error;
+  });
+  return mapLibrePromise;
+}
+function resolveMapLibreModule(module) {
+  const defaultExport = module.default;
+  return defaultExport ?? module;
+}
+function configureTileflowMapLibreModule(maplibregl) {
+  applyWorkerUrl(maplibregl);
+  mapLibre = maplibregl;
+  return maplibregl;
+}
+function applyWorkerUrl(maplibregl) {
+  const nextWorkerUrl = workerUrl ?? readBundlerWorkerUrl();
+  if (nextWorkerUrl === void 0 || nextWorkerUrl === appliedWorkerUrl) return;
+  maplibregl.setWorkerUrl(nextWorkerUrl);
+  appliedWorkerUrl = nextWorkerUrl;
+}
+function readBundlerWorkerUrl() {
+  const value = globalThis[bundlerWorkerUrlKey];
+  return isWorkerUrl(value) ? value : void 0;
+}
+function isWorkerUrl(value) {
+  return typeof value === "string" && value.trim().length > 0;
+}
+
+// src/reconcile.ts
+function createTileflowReconciler() {
+  const memos = /* @__PURE__ */ new Map();
+  const effects = /* @__PURE__ */ new Map();
+  const stableValues = /* @__PURE__ */ new Map();
+  let pending = [];
+  return {
+    commit() {
+      const batch = pending;
+      pending = [];
+      const errors = [];
+      for (const { key } of batch) {
+        const slot = effects.get(key);
+        const cleanup = slot?.cleanup;
+        if (slot) slot.cleanup = void 0;
+        if (!cleanup) continue;
+        try {
+          cleanup();
+        } catch (error) {
+          errors.push(error);
+        }
+      }
+      for (const { key, run } of batch) {
+        const slot = effects.get(key);
+        if (!slot) continue;
+        try {
+          const cleanup = run();
+          slot.cleanup = typeof cleanup === "function" ? cleanup : void 0;
+        } catch (error) {
+          errors.push(error);
+        }
+      }
+      throwCollected(errors, "Tileflow map update failed.");
+    },
+    dispose() {
+      pending = [];
+      const cleanups = [...effects.values()].map((slot) => slot.cleanup).filter((cleanup) => cleanup !== void 0).reverse();
+      effects.clear();
+      memos.clear();
+      stableValues.clear();
+      runTileflowCleanups(cleanups);
+    },
+    effect(key, deps, run) {
+      const slot = effects.get(key);
+      if (slot && sameDependencies(slot.deps, deps)) return;
+      if (slot) slot.deps = deps;
+      else effects.set(key, { deps });
+      pending = pending.filter((entry) => entry.key !== key);
+      pending.push({ key, run });
+    },
+    memo(key, deps, compute) {
+      const slot = memos.get(key);
+      if (slot && sameDependencies(slot.deps, deps)) return slot.value;
+      const value = compute();
+      memos.set(key, { deps, value });
+      return value;
+    },
+    stable(key, value) {
+      if (stableValues.has(key)) {
+        const previous = stableValues.get(key);
+        if (areEquivalentTileflowOptionValues(previous, value)) return previous;
+      }
+      stableValues.set(key, value);
+      return value;
+    }
+  };
+}
+function sameDependencies(left, right) {
+  return left.length === right.length && left.every((value, index) => Object.is(value, right[index]));
+}
+function areEquivalentTileflowOptionValues(left, right, seen = /* @__PURE__ */ new WeakMap()) {
+  if (Object.is(left, right)) return true;
+  if (!left || !right || typeof left !== "object" || typeof right !== "object") return false;
+  const seenRight = seen.get(left);
+  if (seenRight) return seenRight === right;
+  seen.set(left, right);
+  if (Array.isArray(left) || Array.isArray(right)) {
+    return Array.isArray(left) && Array.isArray(right) && left.length === right.length && left.every((value, index) => areEquivalentTileflowOptionValues(value, right[index], seen));
+  }
+  if (!isPlainObject(left) || !isPlainObject(right)) return false;
+  const leftKeys = Object.keys(left);
+  const rightKeys = Object.keys(right);
+  return leftKeys.length === rightKeys.length && leftKeys.every(
+    (key) => Object.hasOwn(right, key) && areEquivalentTileflowOptionValues(left[key], right[key], seen)
+  );
+}
+function isPlainObject(value) {
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}
+function runTileflowCleanups(cleanups) {
+  const errors = [];
+  for (const cleanup of cleanups) {
+    try {
+      cleanup();
+    } catch (error) {
+      errors.push(error);
+    }
+  }
+  throwCollected(errors, "Tileflow map cleanup failed.");
+}
+function throwCollected(errors, message) {
+  if (errors.length === 1) throw errors[0];
+  if (errors.length > 1) throw new AggregateError(errors, message);
+}
+
+// src/views.ts
+function tileflowAnnotationViewContext(target, state) {
+  const { annotation } = target;
+  const content = target.kind === "marker" ? annotation.marker?.content : target.kind === "tooltip" ? annotation.tooltip?.content : annotation.popup?.content;
+  return {
+    annotation,
+    close: target.close,
+    ...content ? { content } : {},
+    target: { annotation, coordinate: annotation.coordinate, kind: "annotation" },
+    ...content?.kind === "view" ? { viewName: content.name } : {},
+    ...target.kind === "marker" && state ? { state } : {}
+  };
+}
+function tileflowSemanticViewContext(target) {
+  return {
+    close: target.close,
+    content: target.content,
+    target: target.target,
+    ...target.viewName ? { viewName: target.viewName } : {}
+  };
+}
+function createTileflowMapViewHost(options) {
+  const mounted = /* @__PURE__ */ new Map();
+  let signature = "[]";
+  let settledSignature = "[]";
+  let frames = [];
+  let disposed = false;
+  const cancelFrames = () => {
+    for (const frame of frames) options.window.cancelAnimationFrame(frame);
+    frames = [];
+  };
+  const draw = (view, context) => {
+    view.context = context;
+    try {
+      if (view.instance && view.instance.update) {
+        view.instance.update(context);
+        return;
+      }
+      view.instance?.destroy?.();
+      view.element.replaceChildren();
+      view.instance = view.renderer(view.element, context);
+    } catch (error) {
+      view.instance = void 0;
+      options.onError(error);
+    }
+  };
+  const unmount = (view) => {
+    view.detachPointer?.();
+    try {
+      view.instance?.destroy?.();
+    } catch (error) {
+      options.onError(error);
+    }
+  };
+  const markerContext = (view) => tileflowAnnotationViewContext(view.target, {
+    ...view.pointer,
+    selected: view.selected
+  });
+  const watchPointer = (view) => {
+    const element = view.element.closest('[data-tileflow-interaction="marker"]');
+    if (!element) return void 0;
+    const set = (patch) => {
+      const next = { ...view.pointer, ...patch };
+      if (next.focused === view.pointer.focused && next.hovered === view.pointer.hovered) return;
+      view.pointer = next;
+      draw(view, markerContext(view));
+    };
+    const enter = () => set({ hovered: true });
+    const leave = () => set({ hovered: false });
+    const focus = () => set({ focused: true });
+    const blur = () => set({ focused: false });
+    element.addEventListener("pointerenter", enter);
+    element.addEventListener("pointerleave", leave);
+    element.addEventListener("focusin", focus);
+    element.addEventListener("focusout", blur);
+    return () => {
+      element.removeEventListener("pointerenter", enter);
+      element.removeEventListener("pointerleave", leave);
+      element.removeEventListener("focusin", focus);
+      element.removeEventListener("focusout", blur);
+    };
+  };
+  return {
+    dispose() {
+      disposed = true;
+      cancelFrames();
+      for (const view of mounted.values()) unmount(view);
+      mounted.clear();
+    },
+    isSettled: () => settledSignature === signature,
+    sync(targets, views) {
+      if (disposed) return;
+      const selected = new Set(
+        targets.annotations.filter((target) => target.kind === "popup").map((target) => target.annotation.id)
+      );
+      const next = /* @__PURE__ */ new Map();
+      for (const target of targets.annotations) {
+        next.set(`annotation:${target.key}`, { kind: "annotation", target });
+      }
+      for (const target of targets.semantic) {
+        next.set(`semantic:${target.key}`, { kind: "semantic", target });
+      }
+      for (const [key, view] of mounted) {
+        if (next.has(key)) continue;
+        unmount(view);
+        mounted.delete(key);
+      }
+      for (const [key, entry] of next) {
+        const viewKind = entry.target.kind;
+        const renderer = views[viewKind];
+        const isMarker = entry.kind === "annotation" && viewKind === "marker";
+        const isSelected = isMarker && selected.has(
+          entry.target.annotation.id
+        );
+        const existing = mounted.get(key);
+        if (!renderer) {
+          if (existing) {
+            unmount(existing);
+            mounted.delete(key);
+          }
+          continue;
+        }
+        if (existing && existing.renderer === renderer && existing.target === entry.target && existing.selected === isSelected) {
+          continue;
+        }
+        if (existing && existing.renderer !== renderer) {
+          unmount(existing);
+          mounted.delete(key);
+        }
+        const view = mounted.get(key) ?? {
+          context: void 0,
+          element: entry.target.container,
+          instance: void 0,
+          pointer: { focused: false, hovered: false },
+          renderer,
+          selected: isSelected,
+          target: entry.target
+        };
+        view.element = entry.target.container;
+        view.selected = isSelected;
+        view.target = entry.target;
+        if (!mounted.has(key)) {
+          mounted.set(key, view);
+          if (isMarker) view.detachPointer = watchPointer(view);
+        }
+        draw(
+          view,
+          entry.kind === "semantic" ? tileflowSemanticViewContext(entry.target) : isMarker ? markerContext(view) : tileflowAnnotationViewContext(
+            entry.target
+          )
+        );
+      }
+      const nextSignature = JSON.stringify([...mounted.keys()].sort());
+      if (nextSignature === signature) return;
+      signature = nextSignature;
+      cancelFrames();
+      const first = options.window.requestAnimationFrame(() => {
+        const second = options.window.requestAnimationFrame(() => {
+          frames = [];
+          if (disposed) return;
+          settledSignature = nextSignature;
+          options.onChange();
+        });
+        frames = [second];
+      });
+      frames = [first];
+    }
+  };
+}
+
+// src/map.ts
+var noInteractions = [];
+var statusAttributes = [
+  "data-tileflow-capture-id",
+  "data-tileflow-map",
+  "data-tileflow-state",
+  "data-tileflow-theme"
+];
+function createTileflowMap(container, initialOptions, createOptions = {}) {
+  if (!container || typeof container !== "object" || !container.ownerDocument) {
+    throw new TypeError("createTileflowMap needs an HTML element to mount the map in.");
+  }
+  const ownerWindow = container.ownerDocument.defaultView;
+  if (!ownerWindow) throw new Error("A Tileflow map needs a browser document.");
+  const browserWindow = ownerWindow;
+  assertTileflowMapStyleOptions(initialOptions);
+  if (initialOptions.views && initialOptions.renderTargets) {
+    throw new TypeError("A Tileflow map takes views or renderTargets, not both.");
+  }
+  const sessionSource = createOptions.sessionSource ?? "dom";
+  const statusElement = createOptions.statusElement === void 0 ? container : createOptions.statusElement;
+  const captureId = normalizeTileflowCaptureId(createOptions.captureId);
+  const controlledInteractionOwnership = initialOptions.interactionState !== void 0;
+  let options = { ...initialOptions };
+  let destroyed = false;
+  let reconciling = false;
+  let dirty = false;
+  let scheduled = false;
+  let manifestResolution = { key: "", map: null, state: "loading" };
+  let systemColorScheme = "light";
+  let captureState = "loading";
+  let themeTransitionState = "idle";
+  let activeRuntimeResource;
+  let annotationRenderTargets = [];
+  let semanticRenderTargets = [];
+  let annotationBridgeDiagnostic;
+  let semanticBridgeDiagnostic;
+  let stateBridgeDiagnostic;
+  let rendererBridgeDiagnostic;
+  let viewBridgeDiagnostic;
+  let annotationDiagnostics = [];
+  let semanticDiagnostics = [];
+  let reportedDeclarativeDiagnosticKeys = /* @__PURE__ */ new Set();
+  let imageSize = null;
+  let managedImage = null;
+  let imageReadinessRun = 0;
+  let map = null;
+  let scene;
+  let themeController;
+  let appearanceBinding;
+  let navigationBinding;
+  let interactionRuntime;
+  let semanticRuntime;
+  let interactionCoordinator;
+  let dataRuntime;
+  let appliedCameraFitKey;
+  let lastStatus;
+  let current;
+  let annotationsForRuntime = [];
+  let annotationTitles = /* @__PURE__ */ new Map();
+  let coordinatedInteractionState = prepareTileflowInteractionState(
+    initialOptions.interactionState,
+    initialOptions.defaultInteractionState
+  ).state;
+  let dataInput = {};
+  let resolveReady;
+  let rejectReady;
+  let readySettled = false;
+  const ready = new Promise((resolve, reject) => {
+    resolveReady = resolve;
+    rejectReady = reject;
+  });
+  ready.catch(() => void 0);
+  const settleReady = (outcome) => {
+    if (readySettled) return;
+    readySettled = true;
+    if ("map" in outcome) resolveReady(outcome.map);
+    else rejectReady(outcome.error);
+  };
+  const reconciler = createTileflowReconciler();
+  const reportError = (code, cause) => {
+    reportTileflowMapError(options.onError, code, cause);
+    if (code === "manifest" || code === "runtime") {
+      settleReady({ error: cause instanceof Error ? cause : new Error(String(cause)) });
+    }
+  };
+  const reportDiagnostic = (diagnostic) => options.onInteractionDiagnostic?.(diagnostic);
+  const viewHost = createTileflowMapViewHost({
+    onChange: () => invalidate(),
+    onError(error) {
+      console.error("Failed to render a Tileflow map view", error);
+      viewBridgeDiagnostic = createOverlayFailureDiagnostic(
+        "A Tileflow map view could not be rendered."
+      );
+      reportDiagnostic(viewBridgeDiagnostic);
+      invalidate();
+    },
+    window: browserWindow
+  });
+  function invalidate() {
+    if (destroyed) return;
+    if (reconciling) {
+      dirty = true;
+      return;
+    }
+    if (scheduled) return;
+    scheduled = true;
+    queueMicrotask(() => {
+      scheduled = false;
+      reconcile();
+    });
+  }
+  function derive() {
+    const memo = reconciler.memo;
+    const stable = reconciler.stable;
+    const {
+      annotationClusters,
+      annotations,
+      bounds,
+      dataOverlays,
+      dataSources,
+      defaultInteractionState,
+      fitAnnotations,
+      fitBoundsOptions,
+      interactionState,
+      source,
+      theme,
+      themeBlend,
+      timeOfDay
+    } = options;
+    const interactions = options.interactions ?? noInteractions;
+    const runtimeSource = memo("runtimeSource", [source.manifestUrl, source.map], () => ({
+      manifestUrl: source.manifestUrl,
+      map: source.map
+    }));
+    const mapName = runtimeSource.map;
+    const manifestUrl = runtimeSource.manifestUrl ?? defaultTileflowManifestUrl;
+    const preparedAnnotations = memo(
+      "annotations",
+      [annotations],
+      () => prepareTileflowAnnotations(annotations)
+    );
+    const preparedInteractions = memo(
+      "interactions",
+      [interactions],
+      () => prepareTileflowInteractionBindings(interactions)
+    );
+    const preparedInteractionState = memo(
+      "interactionState",
+      [defaultInteractionState, interactionState],
+      () => prepareTileflowInteractionState(
+        interactionState,
+        defaultInteractionState,
+        controlledInteractionOwnership
+      )
+    );
+    const cameraFit = memo(
+      "cameraFit",
+      [annotations, bounds, fitAnnotations, fitBoundsOptions],
+      () => resolveTileflowCameraFit({
+        annotations: annotations ?? [],
+        bounds,
+        fitAnnotations,
+        fitBoundsOptions
+      })
+    );
+    const mapOptions = stable("mapOptions", options.mapOptions);
+    const manifestRequestKey = JSON.stringify([manifestUrl, mapName]);
+    const currentManifest = manifestResolution.key === manifestRequestKey ? manifestResolution : { key: manifestRequestKey, map: null, state: "loading" };
+    const manifestMap = currentManifest.state === "ready" ? currentManifest.map : null;
+    const themeBlendKey = themeBlend ? JSON.stringify(themeBlend.themes) : void 0;
+    const blendThemeName = themeBlend ? nearestTileflowBlendTheme(themeBlend) : void 0;
+    const themeResolution = memo(
+      "themeResolution",
+      [blendThemeName, manifestMap, systemColorScheme, theme, themeBlendKey, timeOfDay],
+      () => {
+        const selection = blendThemeName ?? theme;
+        if (!manifestMap) {
+          return {
+            error: false,
+            name: selection && selection !== "system" ? selection : void 0
+          };
+        }
+        try {
+          if (themeBlendKey) {
+            for (const name of JSON.parse(themeBlendKey)) {
+              resolveTileflowRuntimeTheme(manifestMap, name);
+            }
+          }
+          return {
+            error: false,
+            name: resolveTileflowRuntimeTheme(
+              manifestMap,
+              selection,
+              systemColorScheme,
+              themeBlendKey ? void 0 : timeOfDay
+            ).name
+          };
+        } catch (cause) {
+          return { cause, error: true, name: void 0 };
+        }
+      }
+    );
+    const manifestView = resolveTileflowRuntimeView({ manifestMap });
+    const manifestCenter = stable(
+      "manifestCenter",
+      normalizeTileflowRuntimeCenter(manifestView.center)
+    );
+    const resolvedCenter = stable(
+      "center",
+      options.center ?? mapOptions?.center ?? manifestCenter
+    );
+    const resolvedZoom = options.zoom ?? mapOptions?.zoom ?? manifestView.zoom ?? defaultTileflowRuntimeView.zoom;
+    const resolvedBearing = mapOptions?.bearing ?? manifestView.bearing;
+    const resolvedPitch = mapOptions?.pitch ?? manifestView.pitch;
+    const resolvedInteractive = options.interactive ?? mapOptions?.interactive ?? true;
+    const isImageMode = options.mode === "image";
+    const renderers = tileflowMapRenderers(options);
+    const { hasMarkerRenderer, hasPopupRenderer, hasTooltipRenderer } = renderers;
+    const hasInteractionConfiguration = hasTileflowMapInteractionConfiguration(options, renderers);
+    const declarativeDiagnostics = memo(
+      "declarativeDiagnostics",
+      [
+        hasInteractionConfiguration,
+        hasPopupRenderer,
+        hasTooltipRenderer,
+        interactions,
+        isImageMode,
+        preparedAnnotations,
+        preparedInteractions,
+        preparedInteractionState
+      ],
+      () => tileflowMapDeclarativeDiagnostics({
+        hasInteractionConfiguration,
+        hasPopupRenderer,
+        hasTooltipRenderer,
+        interactions,
+        isImageMode,
+        preparedAnnotations,
+        preparedInteractions,
+        preparedInteractionState
+      })
+    );
+    const runtimeStyle = memo(
+      "runtimeStyle",
+      [isImageMode, manifestMap, runtimeSource, systemColorScheme, themeResolution],
+      () => isImageMode || themeResolution.error ? null : resolveTileflowRuntimeStyle({
+        colorScheme: systemColorScheme,
+        manifestMap,
+        source: runtimeSource,
+        theme: themeResolution.name
+      })
+    );
+    const blendResolution = memo(
+      "blendResolution",
+      [isImageMode, manifestMap, runtimeSource, themeBlendKey],
+      () => {
+        if (isImageMode || !manifestMap || !themeBlendKey) return { styles: null };
+        try {
+          return {
+            styles: resolveTileflowRuntimeThemeBlend({
+              blend: { position: 0, themes: JSON.parse(themeBlendKey) },
+              manifestMap,
+              source: runtimeSource
+            })
+          };
+        } catch (cause) {
+          return { cause, styles: null };
+        }
+      }
+    );
+    const resolvedAnalytics = memo(
+      "analytics",
+      [options.analytics, runtimeStyle],
+      () => mergeTileflowAnalytics(options.analytics, runtimeStyle?.analytics)
+    );
+    const staticImageCenter = stable(
+      "staticImageCenter",
+      normalizeTileflowRuntimeCenter(options.center ?? mapOptions?.center, manifestCenter)
+    );
+    const runtimeImageUrl = memo(
+      "runtimeImageUrl",
+      [
+        imageSize,
+        options.imageUrl,
+        isImageMode,
+        manifestMap,
+        staticImageCenter,
+        resolvedZoom,
+        systemColorScheme,
+        themeResolution
+      ],
+      () => options.imageUrl ?? (isImageMode && !themeResolution.error ? resolveTileflowStaticImageUrl({
+        center: staticImageCenter,
+        colorScheme: systemColorScheme,
+        imageSize,
+        manifestMap,
+        theme: themeResolution.name,
+        zoom: resolvedZoom
+      }) : void 0)
+    );
+    const runtimeResolutionState = currentManifest.state !== "ready" ? currentManifest.state === "error" ? "error" : "loading" : themeResolution.error ? "error" : isImageMode ? runtimeImageUrl ? "idle" : options.imageUrl === void 0 && imageSize === null ? "loading" : "error" : runtimeStyle ? "idle" : "error";
+    return {
+      annotationClusters,
+      blendResolution,
+      isImageMode,
+      runtimeImageUrl,
+      cameraFit,
+      dataOverlays,
+      dataSources,
+      declarativeDiagnostics,
+      hasMarkerRenderer,
+      hasPopupRenderer,
+      hasTooltipRenderer,
+      manifestRequestKey,
+      manifestUrl,
+      mapName,
+      mapOptions,
+      preparedAnnotations,
+      preparedInteractions,
+      preparedInteractionState,
+      resolvedAnalytics,
+      resolvedBearing,
+      resolvedCenter,
+      resolvedInteractive,
+      resolvedPitch,
+      resolvedZoom,
+      runtimeMapIdentity: `${manifestUrl}\0${runtimeSource.map}`,
+      runtimeResolutionState,
+      runtimeSource,
+      runtimeStyle,
+      themeBlendHold: themeBlend?.hold === true,
+      themeBlendKey,
+      themeBlendPosition: themeBlend?.position,
+      themeResolution
+    };
+  }
+  function reconcile() {
+    if (destroyed) return;
+    reconciling = true;
+    try {
+      do {
+        dirty = false;
+        pass();
+      } while (dirty && !destroyed);
+    } finally {
+      reconciling = false;
+    }
+    emitStatus();
+  }
+  function pass() {
+    const effect = reconciler.effect;
+    const d = derive();
+    current = d;
+    if (d.preparedAnnotations.ok) {
+      annotationsForRuntime = d.preparedAnnotations.annotations;
+      annotationTitles = d.preparedAnnotations.titles;
+    }
+    dataInput = {
+      annotationClusters: d.annotationClusters,
+      annotations: d.preparedAnnotations.annotations,
+      dataOverlays: d.dataOverlays,
+      dataSources: d.dataSources
+    };
+    effect("scene", [options.vegetation, options.viewMode ?? "3d"], () => {
+      scene?.setVegetation(options.vegetation);
+      scene?.setViewMode(options.viewMode ?? "3d");
+    });
+    effect("imageSize", [d.isImageMode, options.imageUrl], () => {
+      imageSize = null;
+      invalidate();
+      if (!d.isImageMode || options.imageUrl) return;
+      const updateImageSize = () => {
+        const next = normalizeTileflowStaticImageSize({
+          height: container.clientHeight,
+          width: container.clientWidth
+        });
+        if (imageSize?.height === next.height && imageSize.width === next.width) return;
+        imageSize = next;
+        invalidate();
+      };
+      const resizeObserver = new ResizeObserver(updateImageSize);
+      resizeObserver.observe(container);
+      updateImageSize();
+      return () => resizeObserver.disconnect();
+    });
+    const ownsImage = d.isImageMode && options.image === void 0;
+    effect("managedImage", [ownsImage], () => {
+      if (!ownsImage) return;
+      const image = container.ownerDocument.createElement("img");
+      image.decoding = "async";
+      image.style.cssText = "display: block; height: 100%; object-fit: cover; width: 100%;";
+      managedImage = image;
+      invalidate();
+      return () => {
+        image.remove();
+        if (managedImage === image) managedImage = null;
+      };
+    });
+    const imageElement = ownsImage ? managedImage : options.image ?? null;
+    const alt = options.alt ?? "";
+    const imageLoading = options.imageLoading ?? "eager";
+    effect("managedImageAttributes", [managedImage, d.runtimeImageUrl, alt, imageLoading], () => {
+      const image = managedImage;
+      if (!image) return;
+      image.alt = alt;
+      image.loading = imageLoading;
+      if (!d.runtimeImageUrl) {
+        image.remove();
+        image.removeAttribute("src");
+        return;
+      }
+      if (image.getAttribute("src") !== d.runtimeImageUrl) image.src = d.runtimeImageUrl;
+      if (!image.isConnected) container.append(image);
+    });
+    effect("imageReadiness", [d.isImageMode, d.runtimeImageUrl, imageElement], () => {
+      if (!d.isImageMode) return;
+      imageReadinessRun += 1;
+      activeRuntimeResource = d.runtimeImageUrl;
+      captureState = "loading";
+      invalidate();
+      const image = imageElement;
+      if (!image) return;
+      const markReady = async () => {
+        const run = ++imageReadinessRun;
+        try {
+          if (typeof image.decode === "function") await image.decode();
+        } catch {
+          if (!image.complete || image.naturalWidth === 0) {
+            if (imageReadinessRun === run) {
+              captureState = "error";
+              invalidate();
+            }
+            return;
+          }
+        }
+        if (imageReadinessRun !== run) return;
+        captureState = "idle";
+        invalidate();
+      };
+      const fail = () => {
+        imageReadinessRun += 1;
+        captureState = "error";
+        invalidate();
+      };
+      const load = () => void markReady();
+      image.addEventListener("load", load);
+      image.addEventListener("error", fail);
+      if (image.complete && image.getAttribute("src")) {
+        if (image.naturalWidth === 0) fail();
+        else void markReady();
+      }
+      return () => {
+        image.removeEventListener("load", load);
+        image.removeEventListener("error", fail);
+      };
+    });
+    effect("systemColorScheme", [options.theme], () => {
+      if (options.theme !== "system") return;
+      systemColorScheme = getTileflowSystemColorScheme();
+      invalidate();
+      return subscribeTileflowSystemColorScheme((scheme) => {
+        systemColorScheme = scheme;
+        invalidate();
+      });
+    });
+    effect("declarativeDiagnostics", [d.declarativeDiagnostics], () => {
+      const previousKeys = reportedDeclarativeDiagnosticKeys;
+      const nextKeys = /* @__PURE__ */ new Set();
+      for (const diagnostic of d.declarativeDiagnostics) {
+        const key = tileflowInteractionDiagnosticKey(diagnostic);
+        nextKeys.add(key);
+        if (!previousKeys.has(key)) reportDiagnostic(diagnostic);
+      }
+      reportedDeclarativeDiagnosticKeys = nextKeys;
+    });
+    effect("manifest", [d.manifestRequestKey, d.manifestUrl, d.mapName], () => {
+      let cancelled = false;
+      const { manifestRequestKey, manifestUrl, mapName } = d;
+      manifestResolution = { key: manifestRequestKey, map: null, state: "loading" };
+      invalidate();
+      loadTileflowManifest(manifestUrl).then((manifest) => {
+        if (cancelled) return;
+        const resolvedMap = manifest && mapName ? resolveTileflowManifestMap(manifest, mapName) : null;
+        if (!resolvedMap) {
+          reportError(
+            "manifest",
+            new Error(
+              manifest ? `The Tileflow manifest at ${manifestUrl} has no map named "${mapName}".` : `No Tileflow manifest was found at ${manifestUrl}.`
+            )
+          );
+        }
+        manifestResolution = {
+          key: manifestRequestKey,
+          map: resolvedMap,
+          state: resolvedMap ? "ready" : "error"
+        };
+        invalidate();
+      }).catch((error) => {
+        if (cancelled) return;
+        reportError("manifest", error);
+        manifestResolution = { key: manifestRequestKey, map: null, state: "error" };
+        invalidate();
+      });
+      return () => {
+        cancelled = true;
+      };
+    });
+    effect("camera", [d.resolvedBearing, d.resolvedCenter, d.resolvedPitch, d.resolvedZoom], () => {
+      map?.jumpTo({
+        bearing: d.resolvedBearing,
+        center: d.resolvedCenter,
+        pitch: d.resolvedPitch,
+        zoom: d.resolvedZoom
+      });
+    });
+    effect("navigationControl", [options.navigationControl, d.resolvedInteractive], () => {
+      navigationBinding?.update(d.resolvedInteractive ? options.navigationControl : false);
+    });
+    effect("cameraFit", [d.cameraFit], () => {
+      if (!map || appliedCameraFitKey === d.cameraFit.key) return;
+      appliedCameraFitKey = d.cameraFit.key;
+      if (d.cameraFit.error) reportError("camera", new Error(d.cameraFit.error));
+      if (d.cameraFit.fit) fitCameraTo(map, d.cameraFit.fit);
+    });
+    effect("reconcileAnnotations", [d.preparedAnnotations], () => {
+      if (!interactionRuntime || !d.preparedAnnotations.ok) return;
+      reconcileAnnotations(interactionRuntime, d.preparedAnnotations.annotations);
+    });
+    effect(
+      "reconcileData",
+      [d.annotationClusters, d.dataOverlays, d.dataSources, d.preparedAnnotations],
+      () => {
+        dataRuntime?.reconcile(dataInput);
+      }
+    );
+    effect("reconcileInteractions", [d.preparedInteractions], () => {
+      if (!semanticRuntime || !d.preparedInteractions.ok) return;
+      reconcileInteractions(semanticRuntime, d.preparedInteractions.bindings);
+    });
+    effect("controlledInteractionState", [d.preparedInteractionState], () => {
+      const prepared = d.preparedInteractionState;
+      if (!prepared.controlled || !prepared.ok) return;
+      try {
+        stateBridgeDiagnostic = void 0;
+        interactionCoordinator?.setInteractionState(prepared.state);
+        coordinatedInteractionState = prepared.state;
+      } catch (error) {
+        console.error("Failed to update Tileflow interaction state", error);
+        stateBridgeDiagnostic = createOverlayFailureDiagnostic(
+          "Tileflow interaction state could not be updated."
+        );
+        reportDiagnostic(stateBridgeDiagnostic);
+      }
+      invalidate();
+    });
+    effect(
+      "customRenderers",
+      [d.hasMarkerRenderer, d.hasPopupRenderer, d.hasTooltipRenderer],
+      () => {
+        if (!interactionRuntime && !semanticRuntime) return;
+        try {
+          rendererBridgeDiagnostic = void 0;
+          interactionRuntime?.setCustomRenderers({
+            marker: d.hasMarkerRenderer,
+            popup: d.hasPopupRenderer,
+            tooltip: d.hasTooltipRenderer
+          });
+          semanticRuntime?.setCustomRenderers({
+            popup: d.hasPopupRenderer,
+            tooltip: d.hasTooltipRenderer
+          });
+        } catch (error) {
+          console.error("Failed to update Tileflow interaction renderers", error);
+          rendererBridgeDiagnostic = createOverlayFailureDiagnostic(
+            "Tileflow interaction renderers could not be updated."
+          );
+          reportDiagnostic(rendererBridgeDiagnostic);
+        }
+        invalidate();
+      }
+    );
+    effect(
+      "mount",
+      [
+        d.isImageMode,
+        d.resolvedInteractive,
+        d.runtimeMapIdentity,
+        d.runtimeStyle !== null || d.themeResolution.error && map !== null,
+        d.mapOptions
+      ],
+      () => d.isImageMode ? void 0 : mountMap()
+    );
+    effect("theme", [d.runtimeStyle, d.themeBlendKey, d.themeResolution.error], () => {
+      const controller = themeController;
+      if (!controller || d.themeBlendKey) return;
+      if (d.themeResolution.error) {
+        void controller.setTheme(controller.getCurrent());
+        return;
+      }
+      if (!d.runtimeStyle || controller.getCurrent() === d.runtimeStyle && !controller.getBlend()) {
+        return;
+      }
+      activeRuntimeResource = d.runtimeStyle;
+      invalidate();
+      void controller.setTheme(d.runtimeStyle, { transition: options.themeTransition }).then((result) => {
+        if (result.status === "failed") {
+          reportError("theme", result.error ?? new Error("The map theme could not be changed."));
+        }
+      });
+    });
+    const themeResolutionCause = d.themeResolution.error ? d.themeResolution.cause : void 0;
+    effect("themeError", [d.themeResolution.error, themeResolutionCause], () => {
+      if (d.themeResolution.error) reportError("theme", themeResolutionCause);
+    });
+    effect("blendError", [d.blendResolution.cause], () => {
+      if (d.blendResolution.cause !== void 0) reportError("blend", d.blendResolution.cause);
+    });
+    effect("appearance", [options.colors, options.emphasis], () => {
+      appearanceBinding?.update(
+        { colors: options.colors, emphasis: options.emphasis },
+        { transition: options.themeTransition }
+      );
+    });
+    effect(
+      "blend",
+      [d.blendResolution.styles, d.runtimeStyle, d.themeBlendHold, d.themeBlendPosition],
+      () => {
+        const controller = themeController;
+        const styles = d.blendResolution.styles;
+        const position = d.themeBlendPosition;
+        if (!controller || !styles || position === void 0) return;
+        if (d.runtimeStyle) {
+          activeRuntimeResource = d.runtimeStyle;
+          invalidate();
+        }
+        void controller.setBlend(
+          { hold: d.themeBlendHold, position, themes: styles },
+          { transition: options.themeTransition }
+        ).then((result) => {
+          if (result.status === "failed") {
+            reportError(
+              "blend",
+              result.error ?? new Error("The map themes could not be blended.")
+            );
+          }
+        });
+      }
+    );
+    reconciler.commit();
+    syncViews();
+  }
+  function reconcileAnnotations(runtime, annotations) {
+    try {
+      annotationBridgeDiagnostic = void 0;
+      runtime.reconcile(annotations);
+    } catch (error) {
+      console.error("Failed to reconcile Tileflow annotations", error);
+      annotationBridgeDiagnostic = createOverlayFailureDiagnostic(
+        "Tileflow annotations could not be reconciled."
+      );
+      reportDiagnostic(annotationBridgeDiagnostic);
+    }
+    invalidate();
+  }
+  function reconcileInteractions(runtime, bindings) {
+    try {
+      semanticBridgeDiagnostic = void 0;
+      runtime.reconcile(bindings);
+    } catch (error) {
+      console.error("Failed to reconcile Tileflow semantic interactions", error);
+      semanticBridgeDiagnostic = createOverlayFailureDiagnostic(
+        "Tileflow semantic interactions could not be reconciled."
+      );
+      reportDiagnostic(semanticBridgeDiagnostic);
+    }
+    invalidate();
+  }
+  let lastRenderTargets = {
+    annotations: annotationRenderTargets,
+    semantic: semanticRenderTargets
+  };
+  function syncViews() {
+    if (lastRenderTargets.annotations !== annotationRenderTargets || lastRenderTargets.semantic !== semanticRenderTargets) {
+      lastRenderTargets = { annotations: annotationRenderTargets, semantic: semanticRenderTargets };
+      options.renderTargets?.onChange(lastRenderTargets);
+    }
+    viewHost.sync(lastRenderTargets, options.renderTargets ? {} : options.views ?? {});
+  }
+  function mountMap() {
+    themeTransitionState = "idle";
+    invalidate();
+    const initialRuntimeStyle = current.runtimeStyle;
+    if (!initialRuntimeStyle) return void 0;
+    activeRuntimeResource = initialRuntimeStyle;
+    captureState = "loading";
+    let cancelled = false;
+    let disposeMap;
+    const { mapOptions, resolvedInteractive } = current;
+    const resourceLifetime = new AbortController();
+    const session = createTileflowSessionController({ source: sessionSource });
+    const resourceTransform = createTileflowTransformRequest({
+      getAnalytics: () => current.resolvedAnalytics,
+      sessionController: session,
+      sessionId: session.sessionId,
+      transformRequest: mapOptions?.transformRequest ?? void 0
+    });
+    const styleLoadOptions = {
+      signal: resourceLifetime.signal,
+      transformRequest: (url, type) => resourceTransform(
+        url,
+        type
+      )
+    };
+    void Promise.all([
+      loadTileflowMapLibre(),
+      loadTileflowRuntimeStyle(initialRuntimeStyle, styleLoadOptions).then(async (prepared) => {
+        await loadTileflowStyleFonts(prepared.style, { fontFaces: prepared.fontFaces });
+        return prepared;
+      })
+    ]).then(([maplibregl, prepared]) => {
+      if (cancelled || destroyed) return;
+      const setupCleanups = [];
+      let setupDisposed = false;
+      const registerCleanup = (cleanup) => setupCleanups.push(cleanup);
+      disposeMap = () => {
+        if (setupDisposed) return;
+        setupDisposed = true;
+        try {
+          runTileflowCleanups([...setupCleanups].reverse());
+        } finally {
+          map = null;
+          interactionRuntime = void 0;
+          semanticRuntime = void 0;
+          interactionCoordinator = void 0;
+          annotationDiagnostics = [];
+          annotationRenderTargets = [];
+          annotationBridgeDiagnostic = void 0;
+          semanticDiagnostics = [];
+          semanticRenderTargets = [];
+          semanticBridgeDiagnostic = void 0;
+          stateBridgeDiagnostic = void 0;
+          rendererBridgeDiagnostic = void 0;
+          invalidate();
+        }
+      };
+      const sessionStarter = createTileflowSessionStarter({
+        getSessionId: () => session.sessionId,
+        sessionId: session.sessionId,
+        source: sessionSource
+      });
+      const fairUseNotice = attachTileflowFairUseNotice(container);
+      registerCleanup(() => fairUseNotice.dispose());
+      registerTileflowContourProtocol({ addProtocol: maplibregl.addProtocol });
+      registerTileflowPathGroundProtocol({ addProtocol: maplibregl.addProtocol });
+      registerTileflowPmtilesProtocol({ addProtocol: maplibregl.addProtocol });
+      const worldRequestBridge = registerTileflowWorldRequestBridge({
+        addProtocol: maplibregl.addProtocol,
+        onNotice: fairUseNotice.update
+      });
+      registerCleanup(() => worldRequestBridge.dispose());
+      const contourRequestScope = createTileflowContourRequestScope({
+        transformRequest: (url, resourceType) => transformRequest(
+          url,
+          resourceType
+        )
+      });
+      registerCleanup(() => contourRequestScope.dispose());
+      const transformRequest = createTileflowTransformRequest({
+        contourRequestScope,
+        getAnalytics: () => current.resolvedAnalytics,
+        sessionController: session,
+        sessionId: session.sessionId,
+        transformRequest: mapOptions?.transformRequest ?? void 0,
+        worldRequestBridge
+      });
+      const mapLibreMap = new maplibregl.Map({
+        ...mapOptions,
+        canvasContextAttributes: tileflowCanvasContextAttributes(
+          mapOptions?.canvasContextAttributes
+        ),
+        container,
+        style: prepared.style,
+        bearing: current.resolvedBearing,
+        center: current.resolvedCenter,
+        pitch: current.resolvedPitch,
+        zoom: current.resolvedZoom,
+        interactive: resolvedInteractive,
+        attributionControl: mapOptions?.attributionControl ?? { compact: true },
+        // Tileflow's compiled styles are validated when they are built.
+        validateStyle: mapOptions?.validateStyle ?? false,
+        maxPitch: mapOptions?.maxPitch ?? tileflowMaxPitch,
+        transformRequest
+      });
+      map = mapLibreMap;
+      registerCleanup(() => mapLibreMap.remove());
+      registerCleanup(attachTileflowAtmosphere(mapLibreMap));
+      registerCleanup(attachTileflowBranding(mapLibreMap));
+      registerCleanup(attachTileflowNotices(mapLibreMap));
+      registerCleanup(attachTileflowNauticalLights(mapLibreMap));
+      registerCleanup(attachTileflowLabelPlacement(mapLibreMap));
+      registerCleanup(attachTileflowHorizonQueries(mapLibreMap));
+      const controller = initialRuntimeStyle.theme === void 0 ? void 0 : createTileflowThemeController({
+        initial: prepared.family ? prepared : initialRuntimeStyle,
+        initialStyle: prepared.style,
+        styleLoadOptions,
+        map: mapLibreMap,
+        onTransition(transition) {
+          options.onThemeChange?.(transition);
+          themeTransitionState = transition.phase === "preloading" || transition.phase === "applying" ? "loading" : transition.phase === "error" ? "error" : "idle";
+          invalidate();
+        }
+      });
+      if (controller) {
+        themeController = controller;
+        registerCleanup(() => {
+          controller.dispose();
+          if (themeController === controller) themeController = void 0;
+        });
+        const appearance = createTileflowAppearanceBinding({
+          controller,
+          // CSS variables in `colors` are read where the map sits.
+          element: container,
+          map: mapLibreMap,
+          onError: (error, part) => reportError(part, error)
+        });
+        appearanceBinding = appearance;
+        registerCleanup(() => {
+          appearance.dispose();
+          if (appearanceBinding === appearance) appearanceBinding = void 0;
+        });
+        appearance.update(
+          { colors: options.colors, emphasis: options.emphasis },
+          { transition: { duration: 0 } }
+        );
+      }
+      const mapScene = attachTileflowMap3D({
+        map: mapLibreMap,
+        ...controller ? { controller } : {},
+        vegetation: options.vegetation,
+        viewMode: options.viewMode ?? "3d",
+        load: () => import("@tileflow/core/3d"),
+        onError: (error) => reportError("scene", error),
+        // Direct tile readers use HTTP, not MapLibre's custom World protocol.
+        transformRequest: createTileflowTransformRequest({
+          getAnalytics: () => current.resolvedAnalytics,
+          sessionController: session,
+          sessionId: session.sessionId,
+          transformRequest: (url) => mapOptions?.transformRequest?.(
+            url,
+            "Tile"
+          )
+        })
+      });
+      scene = mapScene;
+      registerCleanup(() => {
+        mapScene.dispose();
+        if (scene === mapScene) scene = void 0;
+      });
+      const coordinator = createTileflowMapLibreInteractionCoordinator({
+        ...controlledInteractionOwnership ? { interactionState: coordinatedInteractionState } : { defaultInteractionState: coordinatedInteractionState },
+        onInteractionStateChange(state) {
+          if (!controlledInteractionOwnership) coordinatedInteractionState = state;
+          options.onInteractionStateChange?.(state);
+        }
+      });
+      interactionCoordinator = coordinator;
+      registerCleanup(() => coordinator.dispose());
+      const createOverlay = ({
+        container: overlayContainer,
+        kind
+      }) => wrapMapLibrePositioned(
+        new maplibregl.Popup({
+          closeButton: false,
+          closeOnClick: false,
+          closeOnMove: false,
+          focusAfterOpen: false,
+          offset: kind === "popup" ? 24 : 18
+        }).setDOMContent(overlayContainer)
+      );
+      const annotationRuntime = createTileflowMapLibreDomRuntime({
+        createMarker({ annotation, element }) {
+          const marker = new maplibregl.Marker({ element });
+          element.title = annotationTitles.get(annotation.id) ?? annotation.ariaLabel;
+          return wrapMapLibrePositioned(marker);
+        },
+        createOverlay,
+        customMarker: current.hasMarkerRenderer,
+        customPopup: current.hasPopupRenderer,
+        customTooltip: current.hasTooltipRenderer,
+        document: container.ownerDocument,
+        interactionState: coordinator.getInteractionState(),
+        map: mapLibreMap,
+        onInteractionStateChange: coordinator.requestInteractionState,
+        onDiagnostic: reportDiagnostic,
+        updateMarker(_marker, { annotation, element }) {
+          element.title = annotationTitles.get(annotation.id) ?? annotation.ariaLabel;
+        }
+      });
+      interactionRuntime = annotationRuntime;
+      registerCleanup(() => annotationRuntime.dispose());
+      const mapDataRuntime = createTileflowMapLibreDataRuntime({
+        createMarker: ({ element }) => wrapMapLibrePositioned(new maplibregl.Marker({ element })),
+        document: container.ownerDocument,
+        map: mapLibreMap,
+        onDiagnostic: reportDiagnostic,
+        onInteractionEvent(event) {
+          options.onInteractionEvent?.(event);
+        },
+        setHiddenAnnotations: annotationRuntime.setHiddenAnnotations
+      });
+      dataRuntime = mapDataRuntime;
+      registerCleanup(() => {
+        mapDataRuntime.dispose();
+        if (dataRuntime === mapDataRuntime) dataRuntime = void 0;
+      });
+      const featureRuntime = createTileflowMapLibreSemanticDomRuntime({
+        cancelFrame: (frame) => browserWindow.cancelAnimationFrame(frame),
+        createOverlay,
+        customPopup: current.hasPopupRenderer,
+        customTooltip: current.hasTooltipRenderer,
+        document: container.ownerDocument,
+        interactionState: coordinator.getInteractionState(),
+        map: mapLibreMap,
+        onDiagnostic: reportDiagnostic,
+        onInteractionStateChange: coordinator.requestInteractionState,
+        poiMap: createTileflowMapLibrePoiMap(mapLibreMap),
+        requestFrame: (callback) => browserWindow.requestAnimationFrame(() => callback())
+      });
+      semanticRuntime = featureRuntime;
+      registerCleanup(() => featureRuntime.dispose());
+      registerCleanup(coordinator.attach("annotation", annotationRuntime));
+      registerCleanup(coordinator.attach("semantic", featureRuntime));
+      registerCleanup(
+        annotationRuntime.subscribeEvents((event) => options.onInteractionEvent?.(event))
+      );
+      registerCleanup(
+        annotationRuntime.subscribeDiagnostics((diagnostics) => {
+          annotationDiagnostics = diagnostics;
+          invalidate();
+        })
+      );
+      registerCleanup(
+        annotationRuntime.subscribeRenderTargets((targets) => {
+          annotationRenderTargets = targets;
+          invalidate();
+        })
+      );
+      registerCleanup(
+        featureRuntime.subscribeEvents((event) => {
+          if (event.target.kind === "annotation") return;
+          options.onInteractionEvent?.({ ...event, target: event.target });
+        })
+      );
+      registerCleanup(
+        featureRuntime.subscribeDiagnostics((diagnostics) => {
+          semanticDiagnostics = diagnostics;
+          invalidate();
+        })
+      );
+      registerCleanup(
+        featureRuntime.subscribeRenderTargets((targets) => {
+          semanticRenderTargets = targets;
+          invalidate();
+        })
+      );
+      annotationDiagnostics = annotationRuntime.getDiagnostics();
+      annotationRenderTargets = annotationRuntime.getRenderTargets();
+      semanticDiagnostics = featureRuntime.getDiagnostics();
+      semanticRenderTargets = featureRuntime.getRenderTargets();
+      reconcileAnnotations(annotationRuntime, annotationsForRuntime);
+      mapDataRuntime.reconcile(dataInput);
+      const initialInteractions = current.preparedInteractions;
+      if (initialInteractions.ok)
+        reconcileInteractions(featureRuntime, initialInteractions.bindings);
+      const navigation = createTileflowNavigationControlBinding({
+        createControl: (controlOptions) => new maplibregl.NavigationControl(controlOptions),
+        map: mapLibreMap
+      });
+      navigationBinding = navigation;
+      registerCleanup(() => {
+        navigation.dispose();
+        if (navigationBinding === navigation) navigationBinding = void 0;
+      });
+      navigation.update(current.resolvedInteractive ? options.navigationControl : false);
+      const initialFit = current.cameraFit;
+      appliedCameraFitKey = initialFit.key;
+      if (initialFit.error) reportError("camera", new Error(initialFit.error));
+      if (initialFit.fit) fitCameraTo(mapLibreMap, initialFit.fit, 0);
+      const resizeObserver = new ResizeObserver(() => mapLibreMap.resize());
+      registerCleanup(() => resizeObserver.disconnect());
+      resizeObserver.observe(container);
+      const lifecycle = attachTileflowMapLifecycle({
+        getSession: () => {
+          const analyticsForLoad = current.resolvedAnalytics;
+          return {
+            analytics: analyticsForLoad,
+            styleId: analyticsForLoad?.styleId ?? (typeof initialRuntimeStyle.style === "string" ? initialRuntimeStyle.style : current.mapName)
+          };
+        },
+        map: mapLibreMap,
+        onLoad: (loadedMap) => {
+          settleReady({ map: loadedMap });
+          options.onLoad?.(loadedMap);
+        },
+        scheduler: {
+          cancelFrame: (frame) => browserWindow.cancelAnimationFrame(frame),
+          requestFrame: (callback) => browserWindow.requestAnimationFrame(callback)
+        },
+        sessionStarter,
+        setState: (state) => {
+          captureState = state;
+          invalidate();
+        },
+        subscribe: (subscribedMap, event, listener) => {
+          const subscription = subscribedMap.on(event, listener);
+          return () => subscription.unsubscribe();
+        }
+      });
+      registerCleanup(() => lifecycle.dispose());
+      const latestRuntimeStyle = current.runtimeStyle;
+      const latestBlend = current.blendResolution.styles && current.themeBlendPosition !== void 0 ? {
+        hold: current.themeBlendHold,
+        position: current.themeBlendPosition,
+        themes: current.blendResolution.styles
+      } : null;
+      if (controller && latestBlend) {
+        if (latestRuntimeStyle) activeRuntimeResource = latestRuntimeStyle;
+        void controller.setBlend(latestBlend, { transition: options.themeTransition });
+      } else if (controller && latestRuntimeStyle && latestRuntimeStyle !== initialRuntimeStyle) {
+        activeRuntimeResource = latestRuntimeStyle;
+        void controller.setTheme(latestRuntimeStyle, { transition: options.themeTransition });
+      }
+      invalidate();
+    }).catch((error) => {
+      resourceLifetime.abort();
+      try {
+        disposeMap?.();
+      } catch (cleanupError) {
+        reportError("runtime", cleanupError);
+      }
+      if (!cancelled && !destroyed) {
+        reportError("runtime", error);
+        captureState = "error";
+        invalidate();
+      }
+    });
+    return () => {
+      cancelled = true;
+      resourceLifetime.abort();
+      disposeMap?.();
+    };
+  }
+  function computeStatus() {
+    const d = current;
+    const diagnostics = [
+      ...d.declarativeDiagnostics,
+      ...annotationBridgeDiagnostic ? [annotationBridgeDiagnostic] : [],
+      ...semanticBridgeDiagnostic ? [semanticBridgeDiagnostic] : [],
+      ...stateBridgeDiagnostic ? [stateBridgeDiagnostic] : [],
+      ...rendererBridgeDiagnostic ? [rendererBridgeDiagnostic] : [],
+      ...viewBridgeDiagnostic ? [viewBridgeDiagnostic] : [],
+      ...annotationDiagnostics,
+      ...semanticDiagnostics
+    ];
+    const interactionReadiness = diagnostics.some(
+      (diagnostic) => diagnostic.level === "error"
+    ) ? "error" : viewHost.isSettled() ? "idle" : "loading";
+    const currentCaptureState = activeRuntimeResource === (d.isImageMode ? d.runtimeImageUrl : d.runtimeStyle) ? captureState : "loading";
+    const parts = [
+      currentCaptureState,
+      interactionReadiness,
+      d.runtimeResolutionState,
+      themeTransitionState
+    ];
+    return {
+      diagnostics,
+      readiness: parts.includes("error") ? "error" : parts.every((part) => part === "idle") ? "idle" : "loading",
+      theme: d.themeResolution.name,
+      imageUrl: d.isImageMode ? d.runtimeImageUrl : void 0
+    };
+  }
+  function emitStatus() {
+    if (destroyed) return;
+    const status = computeStatus();
+    if (lastStatus && lastStatus.readiness === status.readiness && lastStatus.theme === status.theme && lastStatus.imageUrl === status.imageUrl && lastStatus.diagnostics.length === status.diagnostics.length && lastStatus.diagnostics.every((diagnostic, index) => diagnostic === status.diagnostics[index])) {
+      return;
+    }
+    lastStatus = status;
+    if (current.isImageMode && status.readiness === "idle") settleReady({ map: null });
+    if (statusElement) {
+      setAttribute(statusElement, "data-tileflow-capture-id", captureId);
+      setAttribute(statusElement, "data-tileflow-map", current.mapName);
+      setAttribute(statusElement, "data-tileflow-theme", status.theme);
+      setAttribute(statusElement, "data-tileflow-state", status.readiness);
+    }
+    options.onStatusChange?.(status);
+  }
+  function update(next) {
+    if (destroyed) return;
+    const merged = { ...options, ...next };
+    assertTileflowMapStyleOptions(merged);
+    if (merged.views && merged.renderTargets) {
+      throw new TypeError("A Tileflow map takes views or renderTargets, not both.");
+    }
+    options = merged;
+    if (reconciling) {
+      dirty = true;
+      return;
+    }
+    reconcile();
+  }
+  reconcile();
+  return {
+    container,
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      settleReady({ error: new DOMException("The Tileflow map was destroyed.", "AbortError") });
+      try {
+        viewHost.dispose();
+        reconciler.dispose();
+      } finally {
+        if (statusElement) {
+          for (const attribute of statusAttributes) statusElement.removeAttribute(attribute);
+        }
+      }
+    },
+    getInteractionState: () => interactionCoordinator?.getInteractionState() ?? coordinatedInteractionState,
+    getMap: () => map,
+    getRenderTargets: () => lastRenderTargets,
+    getStatus: () => lastStatus ?? computeStatus(),
+    getThemeController: () => themeController ?? null,
+    ready,
+    setAnnotations: (annotations) => update({ annotations }),
+    setBounds: (bounds, fitBoundsOptions) => update(fitBoundsOptions === void 0 ? { bounds } : { bounds, fitBoundsOptions }),
+    setColors: (colors) => update({ colors }),
+    setEmphasis: (emphasis) => update({ emphasis }),
+    setInteractions: (interactions) => update({ interactions }),
+    setInteractionState(state) {
+      if (controlledInteractionOwnership) {
+        update({ interactionState: state });
+        return;
+      }
+      const parsed = tileflowInteractionStateSchema2.parse(state);
+      coordinatedInteractionState = parsed;
+      interactionCoordinator?.setInteractionState(parsed);
+    },
+    setTheme: (theme) => update({ theme }),
+    setThemeBlend: (themeBlend) => update({ themeBlend }),
+    setView: (view) => update(view),
+    setViews: (views) => update({ views }),
+    update
+  };
+}
+function tileflowMapRenderers(options) {
+  const external = options.renderTargets;
+  return external ? {
+    hasMarkerRenderer: external.marker === true,
+    hasPopupRenderer: external.popup === true,
+    hasTooltipRenderer: external.tooltip === true
+  } : {
+    hasMarkerRenderer: options.views?.marker !== void 0,
+    hasPopupRenderer: options.views?.popup !== void 0,
+    hasTooltipRenderer: options.views?.tooltip !== void 0
+  };
+}
+function hasTileflowMapInteractionConfiguration(options, renderers) {
+  return options.annotationClusters !== void 0 || options.annotations !== void 0 || options.dataOverlays !== void 0 || options.dataSources !== void 0 || options.defaultInteractionState !== void 0 || options.interactionState !== void 0 || options.interactions !== void 0 || options.onInteractionDiagnostic !== void 0 || options.onInteractionEvent !== void 0 || options.onInteractionStateChange !== void 0 || renderers.hasMarkerRenderer || renderers.hasPopupRenderer || renderers.hasTooltipRenderer;
+}
+function tileflowMapDeclarativeDiagnostics(input) {
+  const modeDiagnostic = input.isImageMode ? imageModeMapInteractionDiagnostic(
+    input.preparedAnnotations.annotations.length,
+    input.interactions.length,
+    input.hasInteractionConfiguration
+  ) : void 0;
+  return [
+    ...modeDiagnostic ? [modeDiagnostic] : [],
+    ...input.preparedAnnotations.diagnostics,
+    ...input.preparedInteractions.diagnostics,
+    ...input.preparedInteractionState.diagnostics,
+    ...input.isImageMode ? [] : unusedTileflowRendererDiagnostics({
+      annotations: input.preparedAnnotations.annotations,
+      bindings: input.interactions,
+      hasPopupRenderer: input.hasPopupRenderer,
+      hasTooltipRenderer: input.hasTooltipRenderer
+    })
+  ];
+}
+function getTileflowMapInitialStatus(options, controlledInteractionOwnership = options.interactionState !== void 0) {
+  const interactions = options.interactions ?? noInteractions;
+  const renderers = tileflowMapRenderers(options);
+  const isImageMode = options.mode === "image";
+  const diagnostics = tileflowMapDeclarativeDiagnostics({
+    hasInteractionConfiguration: hasTileflowMapInteractionConfiguration(options, renderers),
+    hasPopupRenderer: renderers.hasPopupRenderer,
+    hasTooltipRenderer: renderers.hasTooltipRenderer,
+    interactions,
+    isImageMode,
+    preparedAnnotations: prepareTileflowAnnotations(options.annotations),
+    preparedInteractions: prepareTileflowInteractionBindings(interactions),
+    preparedInteractionState: prepareTileflowInteractionState(
+      options.interactionState,
+      options.defaultInteractionState,
+      controlledInteractionOwnership
+    )
+  });
+  const selection = options.themeBlend ? nearestTileflowBlendTheme(options.themeBlend) : options.theme;
+  return {
+    diagnostics,
+    imageUrl: isImageMode ? options.imageUrl : void 0,
+    readiness: diagnostics.some((diagnostic) => diagnostic.level === "error") ? "error" : "loading",
+    theme: selection && selection !== "system" ? selection : void 0
+  };
+}
+function setAttribute(element, name, value) {
+  if (value === void 0) element.removeAttribute(name);
+  else if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+}
+function fitCameraTo(map, fit, duration) {
+  map.fitBounds(fit.bounds, {
+    ...fit.options.maxZoom === void 0 ? {} : { maxZoom: fit.options.maxZoom },
+    ...fit.options.padding === void 0 ? {} : { padding: fit.options.padding },
+    ...duration !== void 0 ? { duration } : fit.options.duration === void 0 ? {} : { duration: fit.options.duration }
+  });
+}
+function wrapMapLibrePositioned(positioned) {
+  return {
+    addTo(map) {
+      positioned.addTo(map);
+    },
+    remove() {
+      positioned.remove();
+    },
+    setLngLat(coordinate) {
+      positioned.setLngLat([coordinate[0], coordinate[1]]);
+    }
+  };
+}
+function createTileflowMapLibrePoiMap(map) {
+  const poiMap = map;
+  return {
+    getStyle: () => map.getStyle(),
+    on(event, listener) {
+      return poiMap.on(event, listener);
+    },
+    queryRenderedFeatures(point, queryOptions) {
+      return map.queryRenderedFeatures(point, {
+        layers: [...queryOptions.layers]
+      });
+    }
+  };
+}
+export {
+  configureTileflowMapLibre,
+  createTileflowMap,
+  getTileflowMapInitialStatus,
+  loadTileflowMapLibre
+};