@tileflow/core 0.1.0-alpha.30 → 0.1.0-alpha.32

package/dist/browser.js

@@ -2042,10 +2042,231 @@ var init_dist = __esm({
   }
 });
 
+// src/dynamic-style-images.ts
+var owners = /* @__PURE__ */ new WeakMap();
+function isRestoredCopy(image, previous) {
+  if (!image || !previous) return false;
+  const a = image, b2 = previous;
+  if (!a.data || !b2.data || a.data.width !== b2.data.width || a.data.height !== b2.data.height || a.pixelRatio !== b2.pixelRatio || a.sdf !== b2.sdf || a.content !== b2.content || a.stretchX !== b2.stretchX || a.stretchY !== b2.stretchY || a.data.data.length !== b2.data.data.length)
+    return false;
+  return a.data.data.every((byte, index) => byte === b2.data.data[index]);
+}
+function createTileflowDynamicImageRegistry(input, context, beforeRestore) {
+  for (const method of [
+    "addImage",
+    "getImage",
+    "getStyle",
+    "removeImage",
+    "updateImage"
+  ]) {
+    if (typeof input[method] !== "function") {
+      throw new TypeError(`Dynamic images require a map with ${method}().`);
+    }
+  }
+  const map = input;
+  const names = owners.get(map) ?? /* @__PURE__ */ new Set();
+  owners.set(map, names);
+  const entries = /* @__PURE__ */ new Map();
+  const view = typeof map.getCanvas === "function" ? map.getCanvas().ownerDocument?.defaultView : void 0;
+  let cancelFrame;
+  let disposed = false;
+  let suspended = false;
+  const imageContext = (entry, current) => Object.freeze({
+    ...current,
+    width: entry.pixels.width,
+    height: entry.pixels.height,
+    pixelRatio: entry.pixelRatio
+  });
+  const keyOf = (entry, current) => JSON.stringify([
+    current.theme,
+    current.blend,
+    (entry.definition.states ?? []).map((name) => [
+      name,
+      typeof current.states[name],
+      current.states[name]
+    ])
+  ]);
+  const report = (entry, cause) => {
+    const error = cause instanceof Error ? cause : new Error(String(cause));
+    if (entry.definition.onError) entry.definition.onError(error);
+    else console.error(`Tileflow dynamic image "${entry.name}":`, error);
+  };
+  function render(entry, current) {
+    const output = entry.definition.render(imageContext(entry, current));
+    if (output === void 0) return false;
+    if (!(output instanceof Uint8Array || output instanceof Uint8ClampedArray) || output.byteLength !== entry.pixels.width * entry.pixels.height * 4) {
+      throw new TypeError(
+        `Dynamic image "${entry.name}" must return width \xD7 height \xD7 4 RGBA bytes.`
+      );
+    }
+    entry.pixels = { ...entry.pixels, data: Uint8Array.from(output) };
+    return true;
+  }
+  function install(entry, changed = false) {
+    if (suspended) return;
+    const existing = map.getImage(entry.name);
+    if (!existing && !map.getStyle()) return;
+    if (existing && existing !== entry.installed && !isRestoredCopy(existing, entry.recoveryImage)) {
+      throw new Error(`Dynamic image "${entry.name}" conflicts with an existing image owner.`);
+    }
+    if (!existing) map.addImage(entry.name, entry.pixels, { pixelRatio: entry.pixelRatio });
+    else if (changed) map.updateImage(entry.name, entry.pixels);
+    entry.installed = map.getImage(entry.name);
+    entry.recoveryImage = void 0;
+  }
+  function flush() {
+    cancelFrame = void 0;
+    if (disposed || suspended) return;
+    const current = context();
+    for (const entry of entries.values()) {
+      if (!entry.dirty) continue;
+      entry.dirty = false;
+      entry.key = keyOf(entry, current);
+      try {
+        const changed = render(entry, current);
+        install(entry, changed);
+      } catch (error) {
+        report(entry, error);
+      }
+    }
+  }
+  function schedule() {
+    if (cancelFrame || disposed || suspended) return;
+    if (view?.requestAnimationFrame) {
+      const id = view.requestAnimationFrame(flush);
+      cancelFrame = () => view.cancelAnimationFrame(id);
+    } else {
+      let cancelled = false;
+      cancelFrame = () => {
+        cancelled = true;
+      };
+      queueMicrotask(() => {
+        if (!cancelled) flush();
+      });
+    }
+  }
+  function restore() {
+    if (disposed || suspended) return;
+    beforeRestore();
+    for (const entry of entries.values()) {
+      try {
+        install(entry, true);
+      } catch (error) {
+        report(entry, error);
+      }
+    }
+    if ([...entries.values()].some((entry) => entry.dirty)) schedule();
+  }
+  function loseContext() {
+    suspended = true;
+    for (const entry of entries.values()) entry.recoveryImage = entry.installed;
+    cancelFrame?.();
+    cancelFrame = void 0;
+  }
+  function restoreContext() {
+    suspended = false;
+    restore();
+  }
+  function release(entry, remove) {
+    if (entries.get(entry.name) !== entry) return;
+    entries.delete(entry.name);
+    names.delete(entry.name);
+    if (remove && entry.installed && map.getImage(entry.name) === entry.installed) {
+      map.removeImage(entry.name);
+    }
+    if (!entries.size) {
+      cancelFrame?.();
+      cancelFrame = void 0;
+    }
+  }
+  function dispose(remove = true) {
+    if (disposed) return;
+    disposed = true;
+    cancelFrame?.();
+    cancelFrame = void 0;
+    for (const entry of [...entries.values()]) release(entry, remove);
+    map.off("style.load", restore);
+    map.off("webglcontextlost", loseContext);
+    map.off("webglcontextrestored", restoreContext);
+    map.off("remove", removed);
+  }
+  const removed = () => dispose(false);
+  map.on("style.load", restore);
+  map.on("webglcontextlost", loseContext);
+  map.on("webglcontextrestored", restoreContext);
+  map.on("remove", removed);
+  return {
+    dispose,
+    assertBlend(images) {
+      for (const image of images) {
+        if (image.names.some((name) => entries.has(name))) {
+          throw new TypeError("Dynamic image names must remain identical across blended themes.");
+        }
+      }
+    },
+    invalidate(state) {
+      if (disposed) return;
+      const current = context();
+      for (const entry of entries.values()) {
+        if (state !== void 0 && !entry.definition.states?.includes(state)) continue;
+        if (keyOf(entry, current) === entry.key) continue;
+        entry.dirty = true;
+      }
+      if ([...entries.values()].some((entry) => entry.dirty)) schedule();
+    },
+    register(name, definition) {
+      if (disposed) throw new Error("Dynamic image registry is disposed.");
+      if (typeof name !== "string" || !name.trim())
+        throw new TypeError("Dynamic image names must be non-empty.");
+      if (names.has(name))
+        throw new Error(`Dynamic image "${name}" already has a registered owner.`);
+      if (map.getImage(name)) throw new Error(`Dynamic image "${name}" already exists.`);
+      const { width, height, pixelRatio = 1 } = definition;
+      if (![width, height].every((value) => Number.isInteger(value) && value > 0 && value <= 2048) || !Number.isFinite(pixelRatio) || pixelRatio <= 0 || typeof definition.render !== "function" || definition.states !== void 0 && (!Array.isArray(definition.states) || definition.states.some(
+        (state) => typeof state !== "string" || !state.trim() || state !== state.trim()
+      ))) {
+        throw new TypeError(
+          "Dynamic images require fixed dimensions, a positive pixel ratio, valid state names and a render function."
+        );
+      }
+      const entry = {
+        name,
+        definition: { ...definition, states: definition.states?.slice() },
+        pixelRatio,
+        pixels: { width, height, data: new Uint8Array(width * height * 4) },
+        dirty: false,
+        key: ""
+      };
+      names.add(name);
+      try {
+        const current = context();
+        entry.key = keyOf(entry, current);
+        render(entry, current);
+        install(entry);
+        entries.set(name, entry);
+      } catch (error) {
+        names.delete(name);
+        throw error;
+      }
+      return {
+        refresh() {
+          if (disposed || entries.get(name) !== entry) return;
+          entry.dirty = true;
+          schedule();
+        },
+        dispose() {
+          release(entry, !disposed);
+        }
+      };
+    }
+  };
+}
+
 // src/browser.ts
 init_portable_identity_rules();
 
 // src/runtime.ts
+init_portable_identity_rules();
 var defaultTileflowRuntimeView = Object.freeze({
   bearing: 0,
   center: [0, 20],
@@ -2066,6 +2287,11 @@ var maximumManifestBytes = 1024 * 1024;
 var maximumSessionGrantBytes = 64 * 1024;
 var manifestCache = new globalThis.Map();
 var tileflowThemeBlendLimits = Object.freeze({ maximumThemes: 8, minimumThemes: 2 });
+function validateTileflowThemeBlendSelection(value) {
+  if (!value || typeof value !== "object") return false;
+  const { position, themes } = value;
+  return Array.isArray(themes) && themes.length >= tileflowThemeBlendLimits.minimumThemes && themes.length <= tileflowThemeBlendLimits.maximumThemes && themes.every((theme) => isTileflowThemeName(theme)) && typeof position === "number" && Number.isFinite(position) && position >= 0 && position <= themes.length - 1;
+}
 function getTileflowStyleFontFaces(style) {
   const input = style.metadata?.[tileflowStyleFontFacesMetadataKey];
   if (input === void 0) return [];
@@ -2238,17 +2464,21 @@ var featureOperators = /* @__PURE__ */ new Set([
   "properties"
 ]);
 var maximumBranches = 24;
-function planTileflowThemeBlend(styles) {
+function planTileflowThemeBlend(styles, options = {}) {
   if (styles.length < 2)
     throw new TileflowThemeBlendError("A theme blend needs two or more themes.");
   const [base] = styles;
   assertSameStructure(styles, base);
+  const mixedImages = new Set(imageProperties);
+  if (options.iconImages === "switch") mixedImages.delete("icon-image");
   const paints = [];
   const switches = [];
-  const imageGroups = collectImageNames(styles, base);
+  const imageGroups = collectImageNames(styles, base, mixedImages);
+  const symbolLayers = /* @__PURE__ */ new Set();
   const images = /* @__PURE__ */ new Map();
   let splitLayers = 0;
   let copiedLayers = 0;
+  let switchedLayers = 0;
   const layers = [];
   for (const [index, layer] of base.layers.entries()) {
     const variants = styles.map((style) => style.layers[index]);
@@ -2262,6 +2492,7 @@ function planTileflowThemeBlend(styles) {
   }
   const sky = differingRoot(styles, "sky");
   const light = differingRoot(styles, "light");
+  const metadata = alignInteractionManifest(base.metadata, layers);
   return {
     themes: styles.length,
     paints,
@@ -2269,14 +2500,21 @@ function planTileflowThemeBlend(styles) {
     switches,
     ...sky === void 0 ? {} : { sky },
     ...light === void 0 ? {} : { light },
-    summary: { splitLayers, copiedLayers, switchedValues: switches.length },
+    summary: { splitLayers, copiedLayers, switchedLayers, switchedValues: switches.length },
     styleAt(position) {
       const at = clampPosition(position, styles.length);
       const dominant = Math.round(at);
       const style = {
         ...base,
+        ...metadata === void 0 ? {} : { metadata },
+        // Symbols show the nearest theme, as the label cross-fade leaves them between changes.
         layers: layers.map(
-          (layer) => fillLayer(layer, at, dominant, switchesByLayer.get(String(layer.id)))
+          (layer) => fillLayer(
+            layer,
+            symbolLayers.has(String(layer.id)) ? dominant : at,
+            dominant,
+            switchesByLayer.get(String(layer.id))
+          )
         )
       };
       if (sky !== void 0) style.sky = fillTemplate(sky, at);
@@ -2301,7 +2539,7 @@ function planTileflowThemeBlend(styles) {
           (variant) => variant[group]?.[property]
         );
         if (values.every((value) => same(value, values[0]))) continue;
-        if (imageProperties.has(property)) {
+        if (mixedImages.has(property)) {
           const tuples = imageTuples(values);
           if (tuples && tuples.every((names) => imageGroups.get(names[0])?.size === 1)) {
             for (const names of tuples) {
@@ -2345,17 +2583,46 @@ function planTileflowThemeBlend(styles) {
             values: variants.map((variant) => paintOf(variant)[property])
           });
     }
+    if (options.featureSwitches === "layers" && results.length === 1 && ownSwitches.some((entry) => entry.values.some(isDataDriven)))
+      results = switchLayer();
     for (const result of results) {
       const resultId = String(result.layer.id);
+      if (type === "symbol") symbolLayers.add(resultId);
       const overridden = new Set(result.extra.map((entry) => entry.property));
       for (const entry of [
         ...ownPaints.filter((own) => !overridden.has(own.property)),
         ...result.extra
       ])
         paints.push({ layer: resultId, property: entry.property, template: entry.template, follows });
-      for (const entry of ownSwitches) switches.push({ layer: resultId, ...entry });
+      if (result.visibility)
+        switches.push({
+          layer: resultId,
+          group: "layout",
+          property: "visibility",
+          values: result.visibility
+        });
+      else for (const entry of ownSwitches) switches.push({ layer: resultId, ...entry });
     }
     return results.map((result) => result.layer);
+    function switchLayer() {
+      switchedLayers += variants.length;
+      return variants.map((_2, theme) => {
+        const copyPaint = { ...paint };
+        const copyLayout = { ...layout };
+        for (const entry of ownSwitches) {
+          const target = entry.group === "paint" ? copyPaint : copyLayout;
+          const value = entry.values[theme];
+          if (value === void 0) delete target[entry.property];
+          else target[entry.property] = value;
+        }
+        const shown = copyLayout.visibility === "none" ? "none" : "visible";
+        return {
+          layer: { ...planned, id: `${id}::theme-${theme}`, paint: copyPaint, layout: copyLayout },
+          extra: [],
+          visibility: variants.map((__, nearest) => nearest === theme ? shown : "none")
+        };
+      });
+    }
     function splitLayer() {
       if (isLegacyFilter(layer.filter)) return void 0;
       const branches = splitBranches(
@@ -2420,6 +2687,15 @@ function planTileflowThemeBlend(styles) {
 function fillTileflowThemeBlendTemplate(template, position) {
   return fillTemplate(template, position);
 }
+function mixTileflowColours(from, to, t) {
+  const a = oklab(from);
+  const b2 = oklab(to);
+  if (!a || !b2) return void 0;
+  return colourFromOklab(a.map((value, channel) => value + (b2[channel] - value) * t));
+}
+function readsTileflowFeatureData(value) {
+  return isDataDriven(value) || reads(value, "within") || reads(value, "distance");
+}
 function fillLayer(layer, position, dominant, layerSwitches) {
   const filled = { ...layer };
   for (const group of ["layout", "paint"]) {
@@ -2504,11 +2780,11 @@ function differingRoot(styles, key) {
   if (values.every((value) => same(value, values[0]))) return void 0;
   return tryMixTemplate(values);
 }
-function collectImageNames(styles, base) {
+function collectImageNames(styles, base, properties) {
   const uses = /* @__PURE__ */ new Map();
   for (const [index] of base.layers.entries()) {
     for (const group of ["layout", "paint"]) {
-      for (const property of imageProperties) {
+      for (const property of properties) {
         const values = styles.map(
           (style) => style.layers[index]?.[group]?.[property]
         );
@@ -2523,6 +2799,51 @@ function collectImageNames(styles, base) {
   }
   return uses;
 }
+function alignInteractionManifest(metadata, layers) {
+  if (!isRecord2(metadata)) return void 0;
+  const planned = /* @__PURE__ */ new Map();
+  for (const [index, layer] of layers.entries()) {
+    const id = String(layer.id);
+    const original = /^(.+)::(?:branch|theme)-\d+$/u.exec(id)?.[1] ?? id;
+    planned.set(original, [...planned.get(original) ?? [], { id, index }]);
+  }
+  let aligned;
+  const interactions = metadata["tileflow:interaction-manifest"];
+  const domains = isRecord2(interactions) ? interactions.domains : void 0;
+  if (isRecord2(interactions) && isRecord2(domains) && isRecord2(domains.poi)) {
+    const poi = domains.poi;
+    if (Array.isArray(poi.layers)) {
+      const poiLayers = poi.layers.flatMap((entry) => {
+        if (!isRecord2(entry) || typeof entry.layerId !== "string") return [entry];
+        const copies = planned.get(entry.layerId);
+        if (!copies) return [entry];
+        return copies.map(({ id, index }) => ({ ...entry, layerId: id, priority: index }));
+      });
+      aligned = {
+        ...metadata,
+        "tileflow:interaction-manifest": {
+          ...interactions,
+          domains: { ...domains, poi: { ...poi, layers: poiLayers } }
+        }
+      };
+    }
+  }
+  const overlays = metadata["tileflow:overlay-placement-manifest"];
+  if (isRecord2(overlays) && isRecord2(overlays.anchors)) {
+    const anchors = Object.fromEntries(
+      Object.entries(overlays.anchors).map(([placement, anchor]) => [
+        placement,
+        typeof anchor === "string" ? planned.get(anchor)?.[0]?.id ?? anchor : anchor
+      ])
+    );
+    aligned = {
+      ...aligned ?? metadata,
+      "tileflow:overlay-placement-manifest": { ...overlays, anchors }
+    };
+  }
+  return aligned;
+}
+var isRecord2 = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
 function imageTuples(values, out = []) {
   const [first] = values;
   if (values.every((value) => typeof value === "string")) {
@@ -2789,6 +3110,196 @@ function parseUnit(part, scale) {
   return percentage ? value / 100 * scale : value;
 }
 
+// src/layer-domain.ts
+var tileflowLayerDomainMetadataKey = "tileflow:domain";
+
+// src/theme-emphasis.ts
+var colourProperties = {
+  circle: ["circle-color", "circle-stroke-color"],
+  fill: ["fill-color", "fill-outline-color"],
+  "fill-extrusion": ["fill-extrusion-color"],
+  line: ["line-color"]
+};
+var patternProperties = {
+  fill: "fill-pattern",
+  "fill-extrusion": "fill-extrusion-pattern",
+  line: "line-pattern"
+};
+var opacityProperties2 = {
+  circle: "circle-opacity",
+  fill: "fill-opacity",
+  "fill-extrusion": "fill-extrusion-opacity",
+  heatmap: "heatmap-opacity",
+  line: "line-opacity",
+  raster: "raster-opacity"
+};
+var labelProperties = ["text-opacity", "icon-opacity"];
+var maximumAreaPositions = 4096;
+function validateTileflowEmphasis(value) {
+  if (!isRecord3(value)) return new TypeError("A Tileflow emphasis must be an object.");
+  for (const key of Object.keys(value)) {
+    if (key !== "recede" && key !== "labels" && key !== "keep") {
+      return new TypeError(`A Tileflow emphasis has no ${JSON.stringify(key)} option.`);
+    }
+  }
+  if (value.recede !== void 0) {
+    if (!isRecord3(value.recede)) {
+      return new TypeError("A Tileflow emphasis recede must map module names to amounts.");
+    }
+    for (const [module, amount] of Object.entries(value.recede)) {
+      if (!/^[a-z][a-z0-9-]*$/u.test(module) || !isUnit(amount)) {
+        return new TypeError(
+          `A Tileflow emphasis recede amount for ${JSON.stringify(module)} must be a number from 0 to 1.`
+        );
+      }
+    }
+  }
+  if (value.labels !== void 0 && !isUnit(value.labels)) {
+    return new TypeError("A Tileflow emphasis labels share must be a number from 0 to 1.");
+  }
+  if (value.keep !== void 0) {
+    const positions = areaPositions(value.keep);
+    if (positions === void 0) {
+      return new TypeError(
+        "A Tileflow emphasis keep area must be a GeoJSON Polygon or MultiPolygon."
+      );
+    }
+    if (positions > maximumAreaPositions) {
+      return new TypeError(
+        `A Tileflow emphasis keep area may hold at most ${maximumAreaPositions} positions.`
+      );
+    }
+  }
+  return void 0;
+}
+function planTileflowEmphasis(layers, emphasis) {
+  const targets = [];
+  const fadeLabels = emphasis.labels === void 0 ? 0 : 1 - emphasis.labels;
+  for (const layer of layers) {
+    if (!isRecord3(layer) || typeof layer.id !== "string" || typeof layer.type !== "string")
+      continue;
+    const domain = isRecord3(layer.metadata) ? layer.metadata[tileflowLayerDomainMetadataKey] : void 0;
+    if (typeof domain !== "string") continue;
+    const paint = isRecord3(layer.paint) ? layer.paint : {};
+    const add = (property, kind, amount2) => targets.push({
+      amount: amount2,
+      featureData: readsTileflowFeatureData(paint[property]) || kind === "label" && emphasis.keep !== void 0,
+      kind,
+      layer: layer.id,
+      property
+    });
+    if (layer.type === "symbol") {
+      if (fadeLabels > 0)
+        for (const property of labelProperties) add(property, "label", fadeLabels);
+      continue;
+    }
+    if (layer.type === "background") continue;
+    const amount = emphasis.recede?.[domain] ?? 0;
+    if (amount <= 0) continue;
+    const pattern = patternProperties[layer.type];
+    const opacity = opacityProperties2[layer.type];
+    if (pattern && paint[pattern] !== void 0) {
+      if (opacity) add(opacity, "fade", amount);
+      continue;
+    }
+    const colours = (colourProperties[layer.type] ?? []).filter(
+      (property) => paint[property] !== void 0
+    );
+    if (colours.length > 0) for (const property of colours) add(property, "colour", amount);
+    else if (opacity) add(opacity, "fade", amount);
+  }
+  return targets;
+}
+function emphasizeTileflowValue(target, value, options) {
+  const amount = target.amount * Math.min(1, Math.max(0, options.strength));
+  if (target.kind === "label") {
+    const keep = options.keep;
+    if (amount <= 0 && !keep) return value;
+    const near = keep ? (original, scaled) => ["case", ["within", keep], original, scaled] : void 0;
+    return scaleOpacity(value, 1 - amount, near);
+  }
+  if (amount <= 0) return value;
+  if (target.kind === "fade") return scaleOpacity(value, 1 - amount);
+  if (options.ground === void 0) return value;
+  return mixColours(value, options.ground, amount);
+}
+function tileflowEmphasisGround(layers) {
+  for (const layer of layers) {
+    if (!isRecord3(layer) || layer.type !== "background") continue;
+    const colour = isRecord3(layer.paint) ? layer.paint["background-color"] : void 0;
+    return firstColour(colour);
+  }
+  return void 0;
+}
+function firstColour(value) {
+  if (typeof value === "string") {
+    return mixTileflowColours(value, value, 0) === void 0 ? void 0 : value;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value.slice(1)) {
+      const found = firstColour(item);
+      if (found !== void 0) return found;
+    }
+  }
+  return void 0;
+}
+function mixColours(value, toward, amount) {
+  if (typeof value === "string") return mixTileflowColours(value, toward, amount) ?? value;
+  if (Array.isArray(value)) {
+    if (value[0] === "literal") return value;
+    return value.map((item, index) => index === 0 ? item : mixColours(item, toward, amount));
+  }
+  return value;
+}
+var isZoomInput = (input) => Array.isArray(input) && input[0] === "zoom";
+function scaleOpacity(value, factor, near = (_original, scaled) => scaled) {
+  const scale = (item) => scaleOpacity(item, factor, near);
+  if (value === void 0 || value === null) return near(1, factor);
+  if (typeof value === "number") return near(value, round(value * factor));
+  if (Array.isArray(value)) {
+    const operator = value[0];
+    if (typeof operator === "string" && operator.startsWith("interpolate") && isZoomInput(value[2])) {
+      return [
+        ...value.slice(0, 3),
+        ...value.slice(3).map((item, index) => index % 2 === 1 ? scale(item) : item)
+      ];
+    }
+    if (operator === "step" && isZoomInput(value[1])) {
+      return [
+        "step",
+        value[1],
+        scale(value[2]),
+        ...value.slice(3).map((item, index) => index % 2 === 1 ? scale(item) : item)
+      ];
+    }
+    if (operator === "let") return [...value.slice(0, -1), scale(value.at(-1))];
+  }
+  return near(value, ["*", value, factor]);
+}
+var round = (value) => Math.round(value * 1e4) / 1e4;
+function areaPositions(value) {
+  if (!isRecord3(value) || !Array.isArray(value.coordinates)) return void 0;
+  const polygons = value.type === "Polygon" ? [value.coordinates] : value.type === "MultiPolygon" ? value.coordinates : void 0;
+  if (!polygons) return void 0;
+  let positions = 0;
+  for (const polygon of polygons) {
+    if (!Array.isArray(polygon) || polygon.length === 0) return void 0;
+    for (const ring of polygon) {
+      if (!Array.isArray(ring) || ring.length < 4) return void 0;
+      for (const position of ring) {
+        if (!Array.isArray(position) || position.length < 2 || !position.every(
+          (coordinate) => typeof coordinate === "number" && Number.isFinite(coordinate)
+        ))
+          return void 0;
+        positions += 1;
+      }
+    }
+  }
+  return positions;
+}
+var isUnit = (value) => typeof value === "number" && Number.isFinite(value) && value >= 0 && value <= 1;
+var isRecord3 = (value) => Boolean(value) && typeof value === "object" && !Array.isArray(value);
+
 // src/theme-motion-browser.ts
 var settleFrames = 3;
 var settleTimeoutMs = 1e4;
@@ -2896,18 +3407,27 @@ function createTileflowThemeBlender(input, plan, options) {
   const positionPaints = plan.paints.filter((paint) => paint.follows === "position");
   const dominantPaints = plan.paints.filter((paint) => paint.follows === "dominant");
   const pixels = createImageMixer(map, plan.images);
+  const mixesArtwork = plan.images.some((image) => image.follows === "position");
+  const relayoutAt = relayoutPositions(plan);
   const shownValues = /* @__PURE__ */ new Map();
+  const baseValues = /* @__PURE__ */ new Map();
+  const valueKey = (layer, property) => `${layer}\0${property}`;
+  const transformed = (layer, property, value) => options.transform ? options.transform(layer, property, value) : value;
   let position = clamp(options.position);
   let dominant = Math.round(position);
   let label = dominant;
   let fade;
   let frameRequest;
   let disposed = false;
+  let holding = false;
+  let artworkWaits = false;
   pixels.paint("position", position);
   pixels.paint("dominant", label);
   const drive = (paints, at) => {
     for (const paint of paints) {
-      const value = fillTileflowThemeBlendTemplate(paint.template, at);
+      const base = fillTileflowThemeBlendTemplate(paint.template, at);
+      baseValues.set(valueKey(paint.layer, paint.property), base);
+      const value = transformed(paint.layer, paint.property, base);
       const key = JSON.stringify(value);
       if (shownValues.get(paint) === key) continue;
       shownValues.set(paint, key);
@@ -2932,18 +3452,53 @@ function createTileflowThemeBlender(input, plan, options) {
   const applySwitches = (theme) => {
     for (const entry of plan.switches) {
       const value = entry.values[theme];
-      if (entry.group === "paint")
-        map.setPaintProperty(entry.layer, entry.property, value, { validate: false });
-      else map.setLayoutProperty(entry.layer, entry.property, value, { validate: false });
+      if (entry.group === "paint") {
+        baseValues.set(valueKey(entry.layer, entry.property), value);
+        map.setPaintProperty(
+          entry.layer,
+          entry.property,
+          transformed(entry.layer, entry.property, value),
+          { validate: false }
+        );
+      } else map.setLayoutProperty(entry.layer, entry.property, value, { validate: false });
     }
   };
+  const switchedPaints = plan.switches.filter((entry) => entry.group === "paint");
   return {
+    baseValue(layer, property) {
+      return baseValues.get(valueKey(layer, property));
+    },
     get dominant() {
       return dominant;
     },
+    get held() {
+      return holding && (artworkWaits || Math.round(position) !== dominant);
+    },
     get position() {
       return position;
     },
+    relayoutAt,
+    refresh(include) {
+      if (disposed) return;
+      drive(
+        positionPaints.filter((paint) => include(paint.layer, paint.property)),
+        position
+      );
+      drive(
+        dominantPaints.filter((paint) => include(paint.layer, paint.property)),
+        label
+      );
+      for (const entry of switchedPaints) {
+        if (!include(entry.layer, entry.property)) continue;
+        const value = entry.values[dominant];
+        map.setPaintProperty(
+          entry.layer,
+          entry.property,
+          transformed(entry.layer, entry.property, value),
+          { validate: false }
+        );
+      }
+    },
     dispose() {
       disposed = true;
       if (frameRequest !== void 0 && view) {
@@ -2953,21 +3508,30 @@ function createTileflowThemeBlender(input, plan, options) {
       }
       frameRequest = void 0;
     },
-    set(next) {
+    set(next, setOptions) {
       if (disposed) return;
+      const hold = setOptions?.hold === true;
+      if (hold) holding = true;
       const target = clamp(next);
       const reachesTheme = target % 1 === 0 && target !== position;
       if (Math.abs(target - position) >= 25e-4 || reachesTheme) {
         position = target;
         drive(positionPaints, position);
-        pixels.paint("position", position);
+        if (holding) artworkWaits ||= mixesArtwork;
+        else pixels.paint("position", position);
         if (plan.sky !== void 0 && typeof map.setSky === "function")
           map.setSky(fillTileflowThemeBlendTemplate(plan.sky, position), { validate: false });
         if (plan.light !== void 0 && typeof map.setLight === "function")
           map.setLight(fillTileflowThemeBlendTemplate(plan.light, position), { validate: false });
+        options.onPosition?.();
+      }
+      if (!hold && holding) {
+        holding = false;
+        if (artworkWaits) pixels.paint("position", position);
+        artworkWaits = false;
       }
       const nextDominant = Math.round(target);
-      if (nextDominant === dominant) return;
+      if (nextDominant === dominant || holding) return;
       dominant = nextDominant;
       if (plan.switches.length > 0) {
         const change = () => applySwitches(nextDominant);
@@ -2984,20 +3548,34 @@ function createImageMixer(map, images) {
   const art = /* @__PURE__ */ new Map();
   const shown = /* @__PURE__ */ new Map();
   const unusable = /* @__PURE__ */ new Set();
+  const names = /* @__PURE__ */ new Map();
+  const alike = /* @__PURE__ */ new Map();
   const artOf = (name) => {
     if (!art.has(name)) {
       const image = map.getImage(name)?.data;
       if (!image) return void 0;
-      art.set(name, { data: Uint8Array.from(image.data), height: image.height, width: image.width });
+      const copy = { data: Uint8Array.from(image.data), height: image.height, width: image.width };
+      art.set(name, copy);
+      names.set(copy, name);
     }
     return art.get(name);
   };
+  const same2 = (from, to) => {
+    if (from === to) return true;
+    const key = `${names.get(from)}\0${names.get(to)}`;
+    if (!alike.has(key)) {
+      let equal = from.data.length === to.data.length;
+      for (let byte = 0; equal && byte < from.data.length; byte += 1)
+        equal = from.data[byte] === to.data[byte];
+      alike.set(key, equal);
+    }
+    return alike.get(key);
+  };
   return {
     paint(follows, position) {
       const quantized = Math.round(position * 32) / 32;
       for (const image of images) {
-        if (image.follows !== follows || unusable.has(image) || shown.get(image) === quantized)
-          continue;
+        if (image.follows !== follows || unusable.has(image)) continue;
         const sources = image.names.map(artOf);
         if (sources.some((source) => !source)) continue;
         const [first] = sources;
@@ -3005,14 +3583,21 @@ function createImageMixer(map, images) {
           unusable.add(image);
           continue;
         }
-        shown.set(image, quantized);
+        if (!shown.has(image)) shown.set(image, first);
         const index = Math.min(sources.length - 2, Math.floor(quantized));
         const t = quantized - index;
         const from = sources[index];
         const to = sources[index + 1];
-        let data = from.data;
-        if (t >= 1) data = to.data;
-        else if (t > 0 && from !== to) {
+        let content = from;
+        if (t >= 1) content = to;
+        else if (t > 0 && !same2(from, to)) content = `${index}:${t}`;
+        const before = shown.get(image);
+        if (before === content || typeof before !== "string" && typeof content !== "string" && same2(before, content))
+          continue;
+        shown.set(image, content);
+        let data;
+        if (typeof content !== "string") data = content.data;
+        else {
           data = new Uint8Array(from.data.length);
           for (let byte = 0; byte < data.length; byte += 1)
             data[byte] = from.data[byte] + (to.data[byte] - from.data[byte]) * t;
@@ -3022,6 +3607,20 @@ function createImageMixer(map, images) {
     }
   };
 }
+function relayoutPositions(plan) {
+  const positions = [];
+  const relays = (entry) => entry.group === "layout" || entry.property.endsWith("-pattern") || entry.values.some(readsTileflowFeatureData);
+  for (let index = 0; index + 1 < plan.themes; index += 1) {
+    const switched = plan.switches.some(
+      (entry) => relays(entry) && JSON.stringify(entry.values[index]) !== JSON.stringify(entry.values[index + 1])
+    );
+    const icons = plan.images.some(
+      (image) => image.follows === "dominant" && image.names[index] !== image.names[index + 1]
+    );
+    if (switched || icons) positions.push(index + 0.5);
+  }
+  return positions;
+}
 function isCrossfadeMap(map) {
   return typeof map.getCanvas === "function" && typeof map.redraw === "function" && typeof map.project === "function" && typeof map.unproject === "function" && typeof map.isStyleLoaded === "function" && typeof map.areTilesLoaded === "function";
 }
@@ -4724,6 +5323,7 @@ l(H, "PMTiles");
 var w = H;
 
 // src/pmtiles-browser.ts
+var missingRasterTile = null;
 var registeredPmtilesProtocols = /* @__PURE__ */ new WeakSet();
 var maximumSectionBytes = 16 * 1024 * 1024;
 var maximumParserBytes = 32 * 1024 * 1024;
@@ -4751,7 +5351,9 @@ var TileflowPmtilesProtocol = class {
       const archive2 = this.#archive(parseArchiveTarget(request.url));
       const header2 = await archive2.getHeader();
       const tileJson = await archive2.getTileJson(request.url);
-      const data = header2.tileType === O.Mlt && isRecord2(tileJson) ? { ...tileJson, encoding: "mlt" } : tileJson;
+      if (!isRecord4(tileJson))
+        throw new TypeError("A PMTiles archive described no TileJSON object.");
+      const data = header2.tileType === O.Mlt ? { ...tileJson, encoding: "mlt" } : tileJson;
       abortController.signal.throwIfAborted();
       return { data };
     }
@@ -4768,7 +5370,7 @@ var TileflowPmtilesProtocol = class {
       };
     }
     return {
-      data: header.tileType === O.Mvt || header.tileType === O.Mlt ? new Uint8Array() : null
+      data: header.tileType === O.Mvt || header.tileType === O.Mlt ? new Uint8Array() : missingRasterTile
     };
   };
   tile = protocolCompatibility(this.tilev4);
@@ -4889,7 +5491,7 @@ function normalizeMaximumDirectoryDepth(value) {
   }
   return depth;
 }
-function isRecord2(value) {
+function isRecord4(value) {
   return value !== null && typeof value === "object" && !Array.isArray(value);
 }
 function protocolCompatibility(handler) {
@@ -4952,10 +5554,22 @@ function handleSystemColorSchemeChange() {
   systemColorScheme = next;
   for (const listener of systemColorSchemeListeners) listener(next);
 }
+function validateTileflowBrowserThemeBlendSelection(value) {
+  if (!validateTileflowThemeBlendSelection(value)) return false;
+  const { hold } = value;
+  return hold === void 0 || typeof hold === "boolean";
+}
 var maximumBlendThemes = 8;
 var maximumTransitionMs = 5e3;
 var blendLabelFadeMs = 450;
 var maximumTileflowBlendStyleBytes = 16 * 1024 * 1024;
+function validateStyleState(name, value) {
+  if (typeof name !== "string" || !name.trim())
+    return new TypeError("Style state names must be non-empty strings.");
+  if (value === null || typeof value === "boolean" || typeof value === "string" || typeof value === "number" && Number.isFinite(value))
+    return void 0;
+  return new TypeError("Style state values must be booleans, finite numbers, strings, or null.");
+}
 function createTileflowThemeController(options) {
   assertConcreteRuntimeTheme(options.initial, "initial");
   const loadFonts = options.loadFonts ?? ((runtimeStyle) => loadTileflowStyleFonts(runtimeStyle.style, { fontFaces: runtimeStyle.fontFaces }));
@@ -4971,22 +5585,98 @@ function createTileflowThemeController(options) {
   let disposed = false;
   let requestId = 0;
   let applyQueue = Promise.resolve();
+  let shownLayers = typeof options.initial.style === "string" ? void 0 : options.initial.style.layers;
+  let emphasis;
+  let emphasisShown;
+  let emphasisStrength = 0;
+  let emphasisGoal = 0;
+  let emphasisTargets = /* @__PURE__ */ new Map();
+  let emphasisBase = /* @__PURE__ */ new Map();
+  let emphasisBlended = /* @__PURE__ */ new Set();
+  let emphasisGroundTemplate;
+  let emphasisStaticGround;
+  const emphasisWritten = /* @__PURE__ */ new Map();
+  let emphasisRun = 0;
+  let emphasisFrame;
+  let emphasisSettle;
+  const states = /* @__PURE__ */ new Map();
+  let images;
+  function imageContext() {
+    return {
+      theme: current.theme,
+      blend: activeBlend ? Object.freeze({
+        position: activeBlend.blender.position,
+        themes: Object.freeze(activeBlend.themes.map((theme) => theme.theme))
+      }) : void 0,
+      states: Object.freeze(
+        Object.fromEntries([...states].map(([name, state]) => [name, state.shown]))
+      )
+    };
+  }
   return {
     dispose() {
       disposed = true;
+      images?.dispose();
       requestId += 1;
       activeBlend?.blender.dispose();
+      stopEmphasisMotion({ status: "superseded", theme: current.theme });
+      for (const state of states.values())
+        stopStateMotion(state, { status: "superseded", theme: current.theme });
     },
     getBlend() {
       if (!activeBlend) return void 0;
       return {
+        held: activeBlend.blender.held,
         position: activeBlend.blender.position,
+        relayoutAt: activeBlend.blender.relayoutAt,
         themes: activeBlend.themes.map((theme) => theme.theme)
       };
     },
+    registerImage(name, definition) {
+      if (disposed) throw new Error("Tileflow theme controller is disposed.");
+      if (activeBlend?.plan.images.some((image) => image.names.includes(name))) {
+        throw new TypeError("Dynamic image names must remain identical across blended themes.");
+      }
+      images ??= createTileflowDynamicImageRegistry(options.map, imageContext, resetStates);
+      return images.register(name, definition);
+    },
     getCurrent() {
       return current;
     },
+    getEmphasis() {
+      return emphasis;
+    },
+    getState(name) {
+      return typeof name === "string" ? states.get(name.trim())?.value : void 0;
+    },
+    setState(name, value, changeOptions) {
+      const invalid = validateStyleState(name, value);
+      if (invalid) return Promise.resolve({ error: invalid, status: "failed", theme: current.theme });
+      if (disposed) return Promise.resolve(disposedResult(current.theme));
+      if (typeof options.map.setGlobalStateProperty !== "function") {
+        return Promise.resolve({
+          error: new TypeError("Style states need a MapLibre map with global state (GL JS 5.6+)."),
+          status: "failed",
+          theme: current.theme
+        });
+      }
+      const transition = transitionOf(changeOptions);
+      if (transition instanceof TypeError)
+        return Promise.resolve({ error: transition, status: "failed", theme: current.theme });
+      return changeState(name.trim(), value, reducedMotion() ? 0 : transition);
+    },
+    setEmphasis(request, changeOptions) {
+      if (request !== void 0) {
+        const invalid = validateTileflowEmphasis(request);
+        if (invalid)
+          return Promise.resolve({ error: invalid, status: "failed", theme: current.theme });
+      }
+      if (disposed) return Promise.resolve(disposedResult(current.theme));
+      const transition = transitionOf(changeOptions);
+      if (transition instanceof TypeError)
+        return Promise.resolve({ error: transition, status: "failed", theme: current.theme });
+      return changeEmphasis(request, reducedMotion() ? 0 : transition);
+    },
     setBlend(request, changeOptions) {
       const targetTheme = nearestTheme(request);
       const invalid = validateBlendRequest(request);
@@ -4998,8 +5688,9 @@ function createTileflowThemeController(options) {
       const key = blendKey(request.themes);
       if (activeBlend?.key === key) {
         requestId += 1;
-        activeBlend.blender.set(request.position);
+        activeBlend.blender.set(request.position, { hold: request.hold === true });
         current = activeBlend.themes[activeBlend.blender.dominant];
+        images?.invalidate();
         return Promise.resolve({ status: "applied", theme: current.theme });
       }
       if (pendingBlend?.key === key) {
@@ -5087,7 +5778,9 @@ function createTileflowThemeController(options) {
       ),
       Promise.all(themes.map((theme) => loadFonts(theme)))
     ]);
-    return planTileflowThemeBlend(styles);
+    const plan = planTileflowThemeBlend(styles);
+    images?.assertBlend(plan.images);
+    return plan;
   }
   function enqueue(runId, target) {
     const operation = applyQueue.then(
@@ -5106,6 +5799,8 @@ function createTileflowThemeController(options) {
   async function applyTarget(runId, target) {
     const targetTheme = targetThemeOf(target);
     if (disposed || runId !== requestId) return { status: "superseded", theme: targetTheme };
+    await whenContextAvailable(options.map);
+    if (disposed || runId !== requestId) return { status: "superseded", theme: targetTheme };
     const previous = { current, shown };
     options.onTransition?.({ currentTheme: previous.current.theme, phase: "applying", targetTheme });
     const cover = beginTileflowStyleCrossfade(options.map, target.transition);
@@ -5113,6 +5808,7 @@ function createTileflowThemeController(options) {
     activeBlend = void 0;
     const styleInput = target.kind === "theme" ? target.style.style : target.plan.styleAt(target.position());
     try {
+      if (target.kind === "blend") images?.assertBlend(target.plan.images);
       await applyMapStyle(options.map, styleInput, timeoutMs);
       if (disposed) {
         cover?.cancel();
@@ -5136,6 +5832,10 @@ function createTileflowThemeController(options) {
         current = target.themes[blender.dominant];
         if (pendingBlend?.key === target.key) pendingBlend = void 0;
       }
+      shownLayers = typeof styleInput === "string" ? void 0 : styleInput.layers;
+      resetEmphasis();
+      resetStates();
+      images?.invalidate();
       await cover?.finish({ stop: () => disposed || runId !== requestId });
       options.onTransition?.({
         currentTheme: current.theme,
@@ -5168,10 +5868,16 @@ function createTileflowThemeController(options) {
         void fade?.finish();
       },
       labelFadeMs: reducedMotion() ? 0 : blendLabelFadeMs,
-      position
+      // The ground colour moves with the blend, and colours that recede follow it.
+      onPosition: () => {
+        if (emphasisShown) writeEmphasis(false);
+      },
+      position,
+      transform: (layer, property, value) => emphasisValue(layer, property, value)
     });
   }
   async function restore(previous) {
+    await whenContextAvailable(options.map);
     const blend = previous.shown.blend;
     if (blend) {
       const position = blend.blender.position;
@@ -5179,11 +5885,260 @@ function createTileflowThemeController(options) {
       await applyMapStyle(options.map, style, timeoutMs);
       activeBlend = { ...blend, blender: createBlender(blend.plan, position) };
       shown = { blend: activeBlend, style };
+      shownLayers = style.layers;
     } else {
       await applyMapStyle(options.map, previous.shown.style, timeoutMs);
       shown = previous.shown;
+      shownLayers = typeof shown.style === "string" ? void 0 : shown.style.layers;
     }
     current = previous.current;
+    resetEmphasis();
+    resetStates();
+    images?.invalidate();
+  }
+  function writeState(name, value) {
+    const set = options.map.setGlobalStateProperty;
+    try {
+      set?.call(options.map, name, value);
+    } catch {
+    }
+    images?.invalidate(name);
+  }
+  function resetStates() {
+    for (const [name, state] of states) {
+      if (state.shown !== void 0) writeState(name, state.shown);
+    }
+  }
+  function stopStateMotion(state, result) {
+    state.stop?.();
+    state.stop = void 0;
+    const settle = state.settle;
+    state.settle = void 0;
+    if (result) settle?.(result);
+  }
+  function changeState(name, value, duration) {
+    const state = states.get(name) ?? { run: 0, shown: void 0, value };
+    states.set(name, state);
+    stopStateMotion(state, { status: "superseded", theme: current.theme });
+    const run = ++state.run;
+    const from = state.shown;
+    state.value = value;
+    const view = tileflowThemeMotionView(options.map);
+    if (duration <= 0 || !view || typeof from !== "number" || typeof value !== "number" || from === value) {
+      state.shown = value;
+      writeState(name, value);
+      return Promise.resolve({ status: "applied", theme: current.theme });
+    }
+    return new Promise((resolve) => {
+      state.settle = resolve;
+      const now = () => view.performance?.now?.() ?? Date.now();
+      const start = now();
+      const least = Math.abs(value - from) / 100;
+      let cancelled = false;
+      let frame;
+      const step = () => {
+        frame = void 0;
+        if (cancelled || disposed || run !== state.run) return;
+        const t = Math.min(1, (now() - start) / duration);
+        const eased = t * t * (3 - 2 * t);
+        const shown2 = t >= 1 ? value : from + (value - from) * eased;
+        if (t >= 1 || Math.abs(shown2 - state.shown) >= least) {
+          state.shown = shown2;
+          writeState(name, shown2);
+        }
+        if (t >= 1) {
+          state.stop = void 0;
+          state.settle = void 0;
+          resolve({ status: "applied", theme: current.theme });
+          return;
+        }
+        frame = view.requestAnimationFrame(step);
+      };
+      state.stop = () => {
+        cancelled = true;
+        if (frame !== void 0) view.cancelAnimationFrame(frame);
+      };
+      frame = view.requestAnimationFrame(step);
+    });
+  }
+  function valueKey(layer, property) {
+    return `${layer}\0${property}`;
+  }
+  function layersShown() {
+    if (shownLayers) return shownLayers;
+    const getStyle = options.map.getStyle;
+    if (typeof getStyle !== "function") return [];
+    const style = getStyle.call(options.map);
+    shownLayers = Array.isArray(style?.layers) ? style.layers : [];
+    return shownLayers;
+  }
+  function planEmphasis(onMap = /* @__PURE__ */ new Map()) {
+    const layers = layersShown();
+    const targets = emphasisShown ? planTileflowEmphasis(layers, emphasisShown) : [];
+    emphasisTargets = new Map(
+      targets.map((target) => [valueKey(target.layer, target.property), target])
+    );
+    const paintOf = /* @__PURE__ */ new Map();
+    for (const layer of layers) {
+      if (layer && typeof layer === "object" && typeof layer.id === "string") {
+        const paint = layer.paint;
+        paintOf.set(
+          layer.id,
+          paint && typeof paint === "object" ? paint : {}
+        );
+      }
+    }
+    emphasisBase = new Map(
+      targets.map((target) => [
+        valueKey(target.layer, target.property),
+        paintOf.get(target.layer)?.[target.property]
+      ])
+    );
+    emphasisStaticGround = tileflowEmphasisGround(layers);
+    emphasisBlended = new Set(
+      activeBlend?.plan.paints.map((paint) => valueKey(paint.layer, paint.property)) ?? []
+    );
+    const background = layers.find(
+      (layer) => layer && typeof layer === "object" && layer.type === "background"
+    );
+    emphasisGroundTemplate = activeBlend?.plan.paints.find(
+      (paint) => paint.layer === background?.id && paint.property === "background-color"
+    )?.template;
+    emphasisWritten.clear();
+    for (const [key, base] of emphasisBase) {
+      emphasisWritten.set(key, onMap.get(key) ?? JSON.stringify(base ?? null));
+    }
+  }
+  function resetEmphasis() {
+    if (!emphasisShown) return;
+    planEmphasis();
+    writeEmphasis(true);
+  }
+  function emphasisGround() {
+    if (activeBlend && emphasisGroundTemplate !== void 0) {
+      return firstColour(
+        fillTileflowThemeBlendTemplate(emphasisGroundTemplate, activeBlend.blender.position)
+      );
+    }
+    return emphasisStaticGround;
+  }
+  function emphasisValue(layer, property, value) {
+    const target = emphasisShown ? emphasisTargets.get(valueKey(layer, property)) : void 0;
+    if (!target) return value;
+    const strength = target.featureData ? emphasisGoal : emphasisStrength;
+    return emphasizeTileflowValue(target, value, {
+      ground: emphasisGround(),
+      keep: strength > 0 ? emphasisShown?.keep : void 0,
+      strength
+    });
+  }
+  function writeEmphasis(blended) {
+    if (blended && activeBlend && emphasisTargets.size > 0) {
+      activeBlend.blender.refresh(
+        (layer, property) => emphasisTargets.has(valueKey(layer, property))
+      );
+    }
+    const setPaint = options.map.setPaintProperty;
+    const getLayer = options.map.getLayer;
+    if (typeof setPaint !== "function") return;
+    for (const [key, target] of emphasisTargets) {
+      if (emphasisBlended.has(key)) continue;
+      const value = emphasisValue(target.layer, target.property, emphasisBase.get(key));
+      const serialized = JSON.stringify(value ?? null);
+      if (emphasisWritten.get(key) === serialized) continue;
+      if (typeof getLayer === "function" && !getLayer.call(options.map, target.layer)) continue;
+      emphasisWritten.set(key, serialized);
+      setPaint.call(options.map, target.layer, target.property, value, { validate: false });
+    }
+  }
+  function stopEmphasisMotion(result) {
+    emphasisFrame?.();
+    emphasisFrame = void 0;
+    const settle = emphasisSettle;
+    emphasisSettle = void 0;
+    if (result) settle?.(result);
+  }
+  function changeEmphasis(request, duration) {
+    stopEmphasisMotion({ status: "superseded", theme: current.theme });
+    const run = ++emphasisRun;
+    emphasis = request;
+    const before = emphasisTargets;
+    if (request) {
+      const leaving = new Map(emphasisWritten);
+      const previous = emphasisShown;
+      emphasisShown = request;
+      planEmphasis(leaving);
+      if (previous) {
+        const setPaint = options.map.setPaintProperty;
+        for (const [key, target] of before) {
+          if (emphasisTargets.has(key) || typeof setPaint !== "function") continue;
+          const base = layerPaint(target.layer, target.property);
+          setPaint.call(options.map, target.layer, target.property, base, { validate: false });
+        }
+      }
+    }
+    if (!emphasisShown) return Promise.resolve({ status: "applied", theme: current.theme });
+    emphasisGoal = request ? 1 : 0;
+    const from = emphasisStrength;
+    const to = emphasisGoal;
+    const switches = [...emphasisTargets.values()].some((target) => target.featureData);
+    const cover = switches ? beginTileflowStyleCrossfade(options.map, duration) : void 0;
+    const view = tileflowThemeMotionView(options.map);
+    return new Promise((resolve) => {
+      emphasisSettle = resolve;
+      const finish = () => {
+        emphasisFrame = void 0;
+        emphasisStrength = to;
+        writeEmphasis(true);
+        if (to === 0) {
+          emphasisShown = void 0;
+          emphasisTargets = /* @__PURE__ */ new Map();
+          emphasisWritten.clear();
+        }
+        emphasisSettle = void 0;
+        resolve({ status: "applied", theme: current.theme });
+      };
+      writeEmphasis(true);
+      void cover?.finish({ stop: () => disposed || run !== emphasisRun });
+      if (duration <= 0 || !view || from === to) {
+        finish();
+        return;
+      }
+      const now = () => view.performance?.now?.() ?? Date.now();
+      const start = now();
+      let cancelled = false;
+      let frame;
+      const step = () => {
+        frame = void 0;
+        if (cancelled || disposed || run !== emphasisRun) return;
+        const t = Math.min(1, (now() - start) / duration);
+        const eased = t * t * (3 - 2 * t);
+        const strength = from + (to - from) * eased;
+        if (t >= 1) return finish();
+        if (Math.abs(strength - emphasisStrength) >= 0.01) {
+          emphasisStrength = strength;
+          writeEmphasis(true);
+        }
+        frame = view.requestAnimationFrame(step);
+      };
+      emphasisFrame = () => {
+        cancelled = true;
+        if (frame !== void 0) view.cancelAnimationFrame(frame);
+      };
+      frame = view.requestAnimationFrame(step);
+    });
+  }
+  function layerPaint(layer, property) {
+    const key = valueKey(layer, property);
+    if (activeBlend && emphasisBlended.has(key))
+      return activeBlend.blender.baseValue(layer, property);
+    for (const entry of layersShown()) {
+      if (entry && typeof entry === "object" && entry.id === layer) {
+        const paint = entry.paint;
+        return paint?.[property];
+      }
+    }
+    return void 0;
   }
   function reducedMotion() {
     const view = tileflowThemeMotionView(options.map);
@@ -5265,6 +6220,26 @@ function validateConcreteRuntimeTheme(style, role) {
     `Tileflow theme controller ${role} style requires a concrete portable theme name; received ${JSON.stringify(style.theme)}.`
   );
 }
+function whenContextAvailable(map) {
+  if (!isContextLost(map)) return Promise.resolve();
+  return new Promise((resolve) => {
+    const restored = () => {
+      map.off("webglcontextrestored", restored);
+      resolve();
+    };
+    map.on("webglcontextrestored", restored);
+  });
+}
+function isContextLost(map) {
+  if (typeof map.getCanvas !== "function") return false;
+  try {
+    const canvas = map.getCanvas.call(map);
+    const context = canvas?.getContext?.("webgl2") ?? canvas?.getContext?.("webgl");
+    return context?.isContextLost?.() === true;
+  } catch {
+    return false;
+  }
+}
 function applyMapStyle(map, style, timeoutMs) {
   return new Promise((resolve, reject) => {
     let settled = false;
@@ -5574,37 +6549,21 @@ function attachTileflowMapLifecycle(options) {
   };
 }
 function createTileflowTransformRequest(options) {
-  if (!options.always && !options.transformRequest && !options.worldRequestBridge) {
-    const analytics = options.getAnalytics();
-    const requiresCommercialSession = Boolean(options.sessionController && analytics?.mapId);
-    if (!requiresCommercialSession && (!analytics || analytics.enabled === false)) {
-      return void 0;
-    }
-  }
-  const asyncAnalyticsTiming = options.asyncAnalyticsTiming ?? "request";
   return (url, resourceType) => {
     const request = options.transformRequest?.(url, resourceType);
-    const analyticsAtRequest = asyncAnalyticsTiming === "request" ? options.getAnalytics() : void 0;
-    if (isPromiseLike(request)) {
-      return request.then(
-        (resolvedRequest) => applyTileflowRequest(
-          url,
-          resolvedRequest,
-          asyncAnalyticsTiming === "resolution" ? options.getAnalytics() : analyticsAtRequest,
-          options.sessionId,
-          options.sessionController,
-          options.worldRequestBridge
-        ) ?? resolvedRequest
-      );
-    }
-    return applyTileflowRequest(
+    const analytics = options.getAnalytics();
+    const apply = (resolvedRequest) => applyTileflowRequest(
       url,
-      request,
-      asyncAnalyticsTiming === "resolution" ? options.getAnalytics() : analyticsAtRequest,
+      resolvedRequest,
+      analytics,
       options.sessionId,
       options.sessionController,
       options.worldRequestBridge
     );
+    if (isPromiseLike(request)) {
+      return request.then((resolvedRequest) => apply(resolvedRequest) ?? resolvedRequest);
+    }
+    return apply(request);
   };
 }
 function applyTileflowRequest(url, request, analytics, sessionId, sessionController, worldRequestBridge) {
@@ -5670,9 +6629,12 @@ export {
   registerTileflowWorldRequestBridge,
   subscribeTileflowSystemColorScheme,
   tileflowFairUseNoticeMessage,
+  tileflowLayerDomainMetadataKey,
   tileflowMaplibreContourVersion,
   tileflowPmtilesMaximumDirectoryDepth,
-  tileflowPmtilesProtocol
+  tileflowPmtilesProtocol,
+  validateTileflowBrowserThemeBlendSelection,
+  validateTileflowEmphasis
 };
 /*! Bundled license information: