@sakuzu/maplibre-gl-draw 1.0.0 → 2.1.0

package/dist/view/renderers/point/point-shape.js

@@ -236,7 +236,7 @@ export class PointShapeRenderer {
         this.gl = gl;
         this.pixelRatio = pixelRatio;
         this.terrain = terrain;
-        this.projectionUniformManager = new ProjectionUniformManager(gl, { terrain });
+        this.projectionUniformManager = new ProjectionUniformManager(gl).useTerrainState(terrain);
         this.bufferCache = new BufferCache(gl);
     }
     /**
@@ -385,7 +385,7 @@ void main() {
             gl.uniform1f(this.anchorElevationLoc, elevationMeters ?? anchorElevationMeters(this.terrain, lng, lat));
         }
         // Billboards are drawn without the depth test (see the note in billboard-depth.ts). A
-        // hand-drawn Point can arrive here through a CustomFeatureRenderer, so wrapping only the
+        // hand-drawn Point can arrive here through a FeatureTypeRenderer, so wrapping only the
         // instanced side would leave the points of this path as half circles.
         drawBillboardsWithoutDepth(gl, () => {
             // Draw the fill

package/dist/view/renderers/point/point-style.js

@@ -9,7 +9,7 @@
  * datasets. The shape in particular decides which run and which batch a point
  * goes on, so resolving it anywhere else would split the z-order of the paths.
  */
-import { hexToColor } from '../../../shared/utils/color.js';
+import { toColor } from '../../../shared/color.js';
 /** The shapes a feature may name (`'icon'` belongs to the defaults of an extension) */
 const FEATURE_POINT_SHAPES = new Set(['circle', 'square', 'triangle', 'star']);
 /**
@@ -22,12 +22,30 @@ function featurePointShape(style) {
     const shape = style.pointShape;
     return shape !== undefined && FEATURE_POINT_SHAPES.has(shape) ? shape : undefined;
 }
+/**
+ * The opacity of the marker a feature names, from 0 to 1 (1 when it names none or a value
+ * outside the range)
+ */
+function featurePointOpacity(style) {
+    const opacity = style.pointOpacity;
+    return typeof opacity === 'number' && opacity >= 0 && opacity <= 1 ? opacity : 1;
+}
+/**
+ * The width of the outline of the marker a feature names, or undefined when it names none or
+ * a value that is not a finite number of 0 or more
+ */
+function featurePointStrokeWidth(style) {
+    const width = style.pointStrokeWidth;
+    return typeof width === 'number' && Number.isFinite(width) && width >= 0 ? width : undefined;
+}
 /**
  * Merges the style of a point feature (already carrying the rule color) into the default
  *
  * The keys of the feature win key by key: `pointColor` becomes the fill, `pointRadius` the
- * size (a diameter), `pointShape` the shape. A key left unset (or a shape that is not one of
- * the four a feature may name) keeps the default.
+ * size (a diameter), `pointShape` the shape, `pointStrokeColor` and `pointStrokeWidth` the
+ * outline. `pointOpacity` is multiplied into the opacity of the fill and of the outline of the
+ * marker. A key left unset (or a shape that is not one of the four a feature may name, an
+ * opacity outside 0 to 1, or a negative width) keeps the default.
  *
  * @param style The style of the feature (undefined when it has none)
  * @param defaults The point style of the `style` option of the instance
@@ -37,10 +55,36 @@ function featurePointShape(style) {
 export function resolvePointStyle(style, defaults) {
     if (!style)
         return defaults;
+    const opacity = featurePointOpacity(style);
     return {
         ...defaults,
         shape: featurePointShape(style) ?? defaults.shape,
-        fillColor: style.pointColor ? hexToColor(style.pointColor, 1) : defaults.fillColor,
+        fillColor: style.pointColor ? toColor(style.pointColor, 1) : defaults.fillColor,
         size: style.pointRadius ? style.pointRadius * 2 : defaults.size,
+        fillOpacity: defaults.fillOpacity * opacity,
+        strokeColor: style.pointStrokeColor ? toColor(style.pointStrokeColor, 1) : defaults.strokeColor,
+        strokeWidth: featurePointStrokeWidth(style) ?? defaults.strokeWidth,
+        strokeOpacity: defaults.strokeOpacity * opacity,
     };
 }
+/**
+ * How far the marker of a point reaches from its position, in CSS pixels: the radius the
+ * marker is drawn with plus its outline when the outline is drawn
+ *
+ * It reads the keys `resolvePointStyle` reads for the size and the outline, without building
+ * the merged style, so the hit test can ask it of every point on every move of the pointer.
+ *
+ * @param style The style of the feature (undefined when it has none)
+ * @param defaults The point style of the `style` option of the instance
+ *
+ * @internal
+ */
+export function pointMarkerReachPx(style, defaults) {
+    const radius = style?.pointRadius ? style.pointRadius : defaults.size / 2;
+    const strokeOpacity = defaults.strokeOpacity * (style ? featurePointOpacity(style) : 1);
+    const stroke = strokeOpacity > 0
+        ? ((style ? featurePointStrokeWidth(style) : undefined) ?? defaults.strokeWidth)
+        : 0;
+    const reach = radius + stroke;
+    return Number.isFinite(reach) && reach > 0 ? reach : 0;
+}

package/dist/view/renderers/polygon/batch.js

@@ -92,8 +92,7 @@ export class PolygonBatchRenderer {
         this.earcutCache = scope.earcut ?? new EarcutCache();
         this.projectionUniformManager = new ProjectionUniformManager(gl, {
             surface: true,
-            terrain: this.terrain,
-        });
+        }).useTerrainState(this.terrain);
         this.vertexBuffer = gl.createBuffer();
         this.indexBuffer = gl.createBuffer();
         this.vao = gl.createVertexArray();

package/dist/view/renderers/polygon/fill.js

@@ -83,7 +83,9 @@ export class FillShaderManager {
             value: null
         });
         this.gl = gl;
-        this.projectionUniformManager = new ProjectionUniformManager(gl, { surface: true, terrain });
+        this.projectionUniformManager = new ProjectionUniformManager(gl, {
+            surface: true,
+        }).useTerrainState(terrain);
         this.vertexBuffer = gl.createBuffer();
         this.indexBuffer = gl.createBuffer();
         this.vao = gl.createVertexArray();

package/dist/view/renderers/polygon/sdf-polygon.js

@@ -210,8 +210,7 @@ export class SDFPolygonRenderer {
         this.earcutCache = scope.earcut ?? new EarcutCache();
         this.projectionUniformManager = new ProjectionUniformManager(gl, {
             surface: true,
-            terrain: this.terrain,
-        });
+        }).useTerrainState(this.terrain);
         this.vertexBuffer = gl.createBuffer();
         this.indexBuffer = gl.createBuffer();
         this.vao = gl.createVertexArray();
@@ -550,7 +549,7 @@ void main() {
      * the cache used by the drawing of the Store must not be polluted with the features
      * of datasets). However, when options.triangulator is passed, both the caching and the
      * time slicing of the triangulation become its responsibility
-     * (display/triangulation.ts).
+     * (dataset/triangulation.ts).
      *
      * @returns The built batch. null when the shader is not initialized or there are no
      *   vertices

package/dist/view/renderers/polygon/triangulator.d.ts

@@ -7,7 +7,7 @@
  *
  * Triangulating a huge polygon (a water body on the order of a million vertices)
  * takes more than ten seconds in one go, so the dataset path injects
- * an implementation that slices the work over time (display/triangulation.ts) here.
+ * an implementation that slices the work over time (dataset/triangulation.ts) here.
  * For a polygon whose triangulation has not finished yet, null is returned, and the
  * caller omits the fill of that polygon and puts it into the batch with the outline
  * only. Once the triangulation finishes, the injecting side prompts a rebuild.

package/dist/view/renderers/stroke.js

@@ -159,7 +159,9 @@ export class StrokeRenderer {
         this.gl = gl;
         this.pixelRatio = pixelRatio;
         this.terrain = terrain;
-        this.projectionUniformManager = new ProjectionUniformManager(gl, { surface: true, terrain });
+        this.projectionUniformManager = new ProjectionUniformManager(gl, {
+            surface: true,
+        }).useTerrainState(terrain);
         this.vertexBuffer = gl.createBuffer();
         this.vao = gl.createVertexArray();
         this.setupVAO();

package/dist/view/shaders/helpers.d.ts

@@ -4,23 +4,13 @@
  * Utilities for creating and managing WebGL2 shaders
  * Performs the WGS84 -> Mercator -> clip coordinate conversion on the GPU
  */
+import type { OffsetUniforms, ShaderData } from '../../api/extension/render.js';
+export type { OffsetUniforms, ShaderData };
 /**
  * Converts WGS84 coordinates to Mercator coordinates (high precision
  * computation on the CPU side)
  */
 export declare function lngLatToMercator(lng: number, lat: number): [number, number];
-/**
- * The shader prelude maplibre passes to the `prerender` / `render` of a custom layer, which
- * the renderers of this library take to compile their programs for the current projection.
- */
-export interface ShaderData {
-    /** The GLSL maplibre prepends to a vertex shader (its projection functions) */
-    vertexShaderPrelude: string;
-    /** The `#define` lines of the current projection */
-    define: string;
-    /** The name of the projection variant; a program is recompiled when it changes */
-    variantName: string;
-}
 /**
  * The precision every sampler of the engine is read with
  *
@@ -153,36 +143,6 @@ export declare function calculateOffsetUniforms(centerLngLat: [number, number],
  * @returns The translated matrix (64-bit values)
  */
 export declare function translateMatrixByLongitude(matrix: ArrayLike<number>, lngShift: number): number[];
-/**
- * The uniform values for offset mode
- *
- * The uniforms for globe mode are obtained directly from ProjectionData, so
- * this interface contains only the values needed for the offset computation of
- * the Mercator projection.
- */
-export interface OffsetUniforms {
-    /** The center coordinates (rounded to Float32, for sending to the shader) */
-    centerLngLat: [number, number];
-    /** The center coordinates (64-bit precision, for the offset computation on the CPU side) */
-    centerLngLat64: [number, number];
-    /**
-     * The Mercator coordinates of the center (a value computed at 64-bit
-     * precision)
-     *
-     * Used to restore the Mercator relative coordinates of a vertex to absolute
-     * coordinates when looking up the terrain DEM atlas. So that everything can
-     * be handled relatively, the atlas origin is also handed over relative to
-     * this value (absolute Mercator coordinates do not have enough digits in
-     * Float32).
-     */
-    centerMercator: [number, number];
-    /** The view center in clip space, computed at 64-bit precision */
-    projectionCenter: [number, number, number, number];
-    /** The Mercator units per degree of longitude and latitude at the center */
-    unitsPerDegree: [number, number, number];
-    /** The second-order correction of `unitsPerDegree` for the change with latitude */
-    unitsPerDegree2: [number, number, number];
-}
 /**
  * Returns a position relative to the view center in degrees, computed at 64-bit precision
  * so that it survives Float32.

package/dist/view/shaders/helpers.js

@@ -1,11 +1,5 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only AND MIT
-/**
- * Shader helpers
- *
- * Utilities for creating and managing WebGL2 shaders
- * Performs the WGS84 -> Mercator -> clip coordinate conversion on the GPU
- */
 /**
  * Converts WGS84 coordinates to Mercator coordinates (high precision
  * computation on the CPU side)

package/dist/view/shaders/projection.d.ts

@@ -6,7 +6,8 @@
  * each renderer.
  */
 import type { ProjectionData } from 'maplibre-gl';
-import type { TerrainContext } from '../terrain/context.js';
+import type { TerrainAnchors } from '../../api/extension/context.js';
+import type { RenderContext } from '../../api/extension/render.js';
 import type { OffsetUniforms } from './helpers.js';
 /**
  * The locations of the projection and terrain uniforms of one program, as
@@ -81,19 +82,26 @@ export declare class ProjectionUniformManager {
     /**
      * The terrain state of the draw instance being drawn (null draws without terrain)
      *
-     * The renderers of a CustomLayer pass their instance's context at construction. A renderer
-     * of an extension implementation, which may be shared between draw instances, calls
-     * `setTerrain(context.terrain)` with the context it receives in each draw call.
+     * The renderers of a CustomLayer bind their instance's state after construction. A renderer
+     * of an extension, which may be shared between draw instances, calls `setTerrain(ctx)` with
+     * the render context it receives in each draw call.
      */
     private terrain;
+    /**
+     * @param gl - The WebGL context of the map
+     * @param options - `surface`: whether the renderer draws things stuck to the ground (areas
+     *   and lines), which lie flat on the frames that draw them flat
+     */
     constructor(gl: WebGL2RenderingContext, options?: {
         surface?: boolean;
-        terrain?: TerrainContext | null;
     });
     /**
-     * Sets the terrain state the next uniforms are taken from (null draws without terrain)
+     * Sets the terrain the next uniforms are taken from.
+     *
+     * @param terrain - The render context of the draw call, or its `terrain`; `null` (or an
+     *   object the engine did not hand out) draws without terrain
      */
-    setTerrain(terrain: TerrainContext | null): void;
+    setTerrain(terrain: RenderContext | TerrainAnchors | null): void;
     /**
      * Obtains the uniform locations from a program
      *

package/dist/view/shaders/projection.js

@@ -1,5 +1,6 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
+import { terrainStateOf } from '../terrain/binding.js';
 import { INACTIVE_TERRAIN_STATE, TERRAIN_ATLAS_TEXTURE_UNIT, } from '../terrain/state.js';
 import { getRenderFrame } from './frame.js';
 /**
@@ -29,6 +30,11 @@ function createMemo() {
  * A class that manages the projection-related uniforms in one place
  */
 export class ProjectionUniformManager {
+    /**
+     * @param gl - The WebGL context of the map
+     * @param options - `surface`: whether the renderer draws things stuck to the ground (areas
+     *   and lines), which lie flat on the frames that draw them flat
+     */
     constructor(gl, options = {}) {
         Object.defineProperty(this, "gl", {
             enumerable: true,
@@ -68,25 +74,36 @@ export class ProjectionUniformManager {
         /**
          * The terrain state of the draw instance being drawn (null draws without terrain)
          *
-         * The renderers of a CustomLayer pass their instance's context at construction. A renderer
-         * of an extension implementation, which may be shared between draw instances, calls
-         * `setTerrain(context.terrain)` with the context it receives in each draw call.
+         * The renderers of a CustomLayer bind their instance's state after construction. A renderer
+         * of an extension, which may be shared between draw instances, calls `setTerrain(ctx)` with
+         * the render context it receives in each draw call.
          */
         Object.defineProperty(this, "terrain", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: null
         });
         this.gl = gl;
         this.surface = options.surface === true;
-        this.terrain = options.terrain ?? null;
     }
     /**
-     * Sets the terrain state the next uniforms are taken from (null draws without terrain)
+     * Sets the terrain the next uniforms are taken from.
+     *
+     * @param terrain - The render context of the draw call, or its `terrain`; `null` (or an
+     *   object the engine did not hand out) draws without terrain
      */
     setTerrain(terrain) {
+        this.terrain = terrainStateOf(terrain);
+    }
+    /**
+     * Sets the terrain state of an instance directly
+     *
+     * @internal
+     */
+    useTerrainState(terrain) {
         this.terrain = terrain;
+        return this;
     }
     /**
      * Obtains the uniform locations from a program

package/dist/view/shaders/quad.d.ts

@@ -22,7 +22,8 @@
  *    quad follows the sphere the way maplibre's layers do
  */
 import type { ProjectionData } from 'maplibre-gl';
-import type { TerrainContext } from '../terrain/context.js';
+import type { TerrainAnchors } from '../../api/extension/context.js';
+import type { RenderContext } from '../../api/extension/render.js';
 import type { DrapeQuadCorners, QuadDrapeSurface } from '../terrain/drape/quad.js';
 import type { OffsetUniforms } from './helpers.js';
 /**
@@ -72,15 +73,19 @@ export declare class QuadShader {
     /**
      * The terrain state of the draw instance being drawn (null draws without terrain)
      *
-     * The CustomLayer passes its instance's context at construction. An extension renderer that
-     * owns a QuadShader calls `setTerrain(context.terrain)` with the draw context it receives.
+     * The CustomLayer binds its instance's state after construction. An extension renderer that
+     * owns a QuadShader calls `setTerrain(ctx)` with the render context it receives.
      */
     private terrain;
-    constructor(gl: WebGL2RenderingContext, terrain?: TerrainContext | null);
+    /** @param gl - The WebGL context of the map */
+    constructor(gl: WebGL2RenderingContext);
     /**
-     * Sets the terrain state the next draws use (null draws without terrain)
+     * Sets the terrain the next draws use.
+     *
+     * @param terrain - The render context of the draw call, or its `terrain`; `null` (or an
+     *   object the engine did not hand out) draws without terrain
      */
-    setTerrain(terrain: TerrainContext | null): void;
+    setTerrain(terrain: RenderContext | TerrainAnchors | null): void;
     /**
      * Initializes the buffers
      */
@@ -164,14 +169,13 @@ export declare class QuadShader {
  * cannot be built). The caller falls back to the conventional way of drawing
  * (the fill texture + a separate draw of the text).
  *
- * @param terrain The terrain state of the draw instance being drawn
- *   (`CustomRendererDrawContext.terrain`)
- * @param corners The corners of the quad in degrees
- * @param surface The fill and the text
- * @param opacity The opacity, 0..1
+ * @param terrain - The render context of the draw call, or its `terrain`
+ * @param corners - The corners of the quad in degrees
+ * @param surface - The fill and the text
+ * @param opacity - The opacity, 0..1
  * @returns true if it was painted; false when the caller must draw it another way
  */
-export declare function drawQuadSurfaceOnTerrain(terrain: TerrainContext, corners: DrapeQuadCorners, surface: QuadDrapeSurface, opacity: number): boolean;
+export declare function drawQuadSurfaceOnTerrain(terrain: RenderContext | TerrainAnchors, corners: DrapeQuadCorners, surface: QuadDrapeSurface, opacity: number): boolean;
 /**
  * Returns the corners of a rectangle of a size in degrees, rotated about its center.
  *

package/dist/view/shaders/quad.js

@@ -1,6 +1,7 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
 import { globeGridOf } from '../globe-subdivision.js';
+import { terrainStateOf } from '../terrain/binding.js';
 import { quadMercatorCorners } from '../terrain/drape/quad.js';
 import { getQuadDrapeFrame, isTerrainElevationActive, reportTerrainCoarsening, } from '../terrain/state.js';
 import { calculateLngLatOffset, createProgram, getProjectionTransitionUniform, OFFSET_MODE_GLSL, } from './helpers.js';
@@ -15,7 +16,8 @@ import { buildQuadGrid, computeQuadGridSize, } from './quad-grid.js';
  * subdivided to the terrain mesh.
  */
 export class QuadShader {
-    constructor(gl, terrain = null) {
+    /** @param gl - The WebGL context of the map */
+    constructor(gl) {
         Object.defineProperty(this, "gl", {
             enumerable: true,
             configurable: true,
@@ -134,26 +136,37 @@ export class QuadShader {
         /**
          * The terrain state of the draw instance being drawn (null draws without terrain)
          *
-         * The CustomLayer passes its instance's context at construction. An extension renderer that
-         * owns a QuadShader calls `setTerrain(context.terrain)` with the draw context it receives.
+         * The CustomLayer binds its instance's state after construction. An extension renderer that
+         * owns a QuadShader calls `setTerrain(ctx)` with the render context it receives.
          */
         Object.defineProperty(this, "terrain", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: null
         });
         this.gl = gl;
-        this.terrain = terrain;
-        this.projectionUniformManager = new ProjectionUniformManager(gl, { terrain });
+        this.projectionUniformManager = new ProjectionUniformManager(gl);
         this.setupBuffers();
     }
     /**
-     * Sets the terrain state the next draws use (null draws without terrain)
+     * Sets the terrain the next draws use.
+     *
+     * @param terrain - The render context of the draw call, or its `terrain`; `null` (or an
+     *   object the engine did not hand out) draws without terrain
      */
     setTerrain(terrain) {
+        this.useTerrainState(terrainStateOf(terrain));
+    }
+    /**
+     * Sets the terrain state of an instance directly
+     *
+     * @internal
+     */
+    useTerrainState(terrain) {
         this.terrain = terrain;
-        this.projectionUniformManager.setTerrain(terrain);
+        this.projectionUniformManager.useTerrainState(terrain);
+        return this;
     }
     /**
      * Initializes the buffers
@@ -491,14 +504,22 @@ void main() {
  * cannot be built). The caller falls back to the conventional way of drawing
  * (the fill texture + a separate draw of the text).
  *
- * @param terrain The terrain state of the draw instance being drawn
- *   (`CustomRendererDrawContext.terrain`)
- * @param corners The corners of the quad in degrees
- * @param surface The fill and the text
- * @param opacity The opacity, 0..1
+ * @param terrain - The render context of the draw call, or its `terrain`
+ * @param corners - The corners of the quad in degrees
+ * @param surface - The fill and the text
+ * @param opacity - The opacity, 0..1
  * @returns true if it was painted; false when the caller must draw it another way
  */
 export function drawQuadSurfaceOnTerrain(terrain, corners, surface, opacity) {
+    const state = terrainStateOf(terrain);
+    return state !== null && drawQuadSurfaceOnTerrainState(state, corners, surface, opacity);
+}
+/**
+ * {@link drawQuadSurfaceOnTerrain} over the terrain state of an instance
+ *
+ * @internal
+ */
+export function drawQuadSurfaceOnTerrainState(terrain, corners, surface, opacity) {
     if (!isTerrainElevationActive(terrain))
         return false;
     const frame = getQuadDrapeFrame(terrain);

package/dist/view/style-rule.d.ts

@@ -27,7 +27,7 @@ import type { Feature, FeatureStyle, FeatureType, StyleRule } from '../store/typ
 export interface LegendEntry {
     /** The displayed label */
     label: string;
-    /** The color (in #RRGGBB form) */
+    /** The color, as `#rrggbb` */
     color: string;
 }
 /**
@@ -57,27 +57,12 @@ export declare function getStyleRuleChannel(type: FeatureType): StyleRuleChannel
  * `categorical` matches strings, numbers and booleans by `String(value)`; `graduated` and
  * `continuous` take finite numbers only (a numeric string gives `other`). `continuous`
  * clamps values outside `min`..`max` and returns the first ramp color when `max <= min`. It
- * is a pure function.
+ * is a pure function. The colors of the rule may be any CSS color; the result is normalized
+ * to `#rrggbb`.
  *
  * @param rule The style rule
  * @param properties The attributes of the feature
- * @returns The color in `#RRGGBB` form
- *
- * @example
- * ```ts
- * import { evaluateStyleRule, type StyleRule } from '@sakuzu/maplibre-gl-draw';
- *
- * const rule: StyleRule = {
- *   kind: 'graduated',
- *   property: 'population',
- *   breaks: [1000, 10000],
- *   colors: ['#fee8c8', '#fdbb84', '#e34a33'],
- *   other: '#cccccc',
- * };
- * evaluateStyleRule(rule, { population: 5000 }); // '#fdbb84'
- * evaluateStyleRule(rule, { population: '5000' }); // '#cccccc' (not a number)
- * evaluateStyleRule(rule, {}); // '#cccccc'
- * ```
+ * @returns The color in `#rrggbb` form
  */
 export declare function evaluateStyleRule(rule: StyleRule, properties: Record<string, unknown> | undefined): string;
 /**
@@ -134,33 +119,11 @@ export declare function resolveFeatureStyle(feature: Feature, rule: StyleRule |
  *   `legendOther` is appended at the end
  *
  * Numbers are turned into strings with `String()`. Locale formatting is up to the caller.
+ * The colors are normalized to `#rrggbb`, as {@link evaluateStyleRule} returns them.
  *
  * @param rule The style rule
  * @param messages The entries of the messages table to use (default: `MESSAGES_EN`;
  *   missing entries fall back to it)
  * @returns The legend rows, in the order to show them
- *
- * @example
- * ```ts
- * import { deriveLegend, type StyleRule } from '@sakuzu/maplibre-gl-draw';
- *
- * const rule: StyleRule = {
- *   kind: 'graduated',
- *   property: 'population',
- *   breaks: [1000, 10000],
- *   colors: ['#fee8c8', '#fdbb84', '#e34a33'],
- *   other: '#cccccc',
- * };
- * deriveLegend(rule);
- * // [
- * //   { label: 'Below 1000', color: '#fee8c8' },
- * //   { label: '1000 to below 10000', color: '#fdbb84' },
- * //   { label: '10000 or more', color: '#e34a33' },
- * //   { label: 'Other', color: '#cccccc' },
- * // ]
- *
- * // In the language of the host application
- * deriveLegend(rule, { legendOther: 'Autres', legendBelow: (upper) => `Moins de ${upper}` });
- * ```
  */
 export declare function deriveLegend(rule: StyleRule, messages?: Partial<Messages>): LegendEntry[];