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

package/dist/browser.js

@@ -2238,17 +2238,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 +2266,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 +2274,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 +2313,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 +2357,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 +2461,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 +2554,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 +2573,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 +2884,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;
@@ -2897,6 +3182,9 @@ function createTileflowThemeBlender(input, plan, options) {
   const dominantPaints = plan.paints.filter((paint) => paint.follows === "dominant");
   const pixels = createImageMixer(map, plan.images);
   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;
@@ -2907,7 +3195,9 @@ function createTileflowThemeBlender(input, plan, options) {
   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 +3222,49 @@ 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 position() {
       return position;
     },
+    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) {
@@ -2965,6 +3286,7 @@ function createTileflowThemeBlender(input, plan, options) {
           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?.();
       }
       const nextDominant = Math.round(target);
       if (nextDominant === dominant) return;
@@ -4751,7 +5073,7 @@ 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;
+      const data = header2.tileType === O.Mlt && isRecord4(tileJson) ? { ...tileJson, encoding: "mlt" } : tileJson;
       abortController.signal.throwIfAborted();
       return { data };
     }
@@ -4889,7 +5211,7 @@ function normalizeMaximumDirectoryDepth(value) {
   }
   return depth;
 }
-function isRecord2(value) {
+function isRecord4(value) {
   return value !== null && typeof value === "object" && !Array.isArray(value);
 }
 function protocolCompatibility(handler) {
@@ -4971,11 +5293,26 @@ 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;
   return {
     dispose() {
       disposed = true;
       requestId += 1;
       activeBlend?.blender.dispose();
+      stopEmphasisMotion({ status: "superseded", theme: current.theme });
     },
     getBlend() {
       if (!activeBlend) return void 0;
@@ -4987,6 +5324,21 @@ function createTileflowThemeController(options) {
     getCurrent() {
       return current;
     },
+    getEmphasis() {
+      return emphasis;
+    },
+    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);
@@ -5136,6 +5488,8 @@ 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();
       await cover?.finish({ stop: () => disposed || runId !== requestId });
       options.onTransition?.({
         currentTheme: current.theme,
@@ -5168,7 +5522,12 @@ 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) {
@@ -5179,11 +5538,193 @@ 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();
+  }
+  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);
@@ -5670,9 +6211,11 @@ export {
   registerTileflowWorldRequestBridge,
   subscribeTileflowSystemColorScheme,
   tileflowFairUseNoticeMessage,
+  tileflowLayerDomainMetadataKey,
   tileflowMaplibreContourVersion,
   tileflowPmtilesMaximumDirectoryDepth,
-  tileflowPmtilesProtocol
+  tileflowPmtilesProtocol,
+  validateTileflowEmphasis
 };
 /*! Bundled license information: