@versatiles/style 5.2.3 → 5.2.5

package/README.MD

@@ -5,39 +5,45 @@
 
 # VersaTiles Style
 
-> [!WARNING]  
-> We are currently migrating to the [VersaTiles Frontend Specification](https://github.com/versatiles-org/versatiles-documentation/blob/main/compendium/specification_frontend.md). While this is good for the long term, it does mean that there will be breaking changes in the short term. You can find the [old v4.4.1 release here](https://github.com/versatiles-org/versatiles-style/releases/tag/v4.4.1).
+**VersaTiles Style** generates styles and sprites for MapLibre.
 
-Generates styles and sprites for MapLibre.
+---
 
-![Example: Colorful Style](docs/colorful.png)
+## Styles Overview
 
-# Styles
+| Style Name    | Preview                                                                   |
+|---------------|---------------------------------------------------------------------------|
+| **colorful**  | <img width="384" src="screenshots/colorful.png" alt="colorful style" />   |
+| **graybeard** | <img width="384" src="screenshots/graybeard.png" alt="graybeard style" /> |
+| **eclipse**   | <img width="384" src="screenshots/eclipse.png" alt="eclipse style" />     |
+| **neutrino**  | <img width="384" src="screenshots/neutrino.png" alt="neutrino style" />   |
 
-* Colorful - colorful, full featured map
-* Graybeard - gray, full featured map
-* Eclipse - dark, full featured map
-* Neutrino - light basemap
+---
 
-# Use styles for versatiles.org
+## Using VersaTiles Styles
 
-You in the the [latest release](https://github.com/versatiles-org/versatiles-style/releases/latest/) you can find:
-- [`styles.tar.gz`](https://github.com/versatiles-org/versatiles-style/releases/latest/download/styles.tar.gz) containing all styles, each in multiple languages.  
-Be aware that these styles use `tiles.versatiles.org` as source for tiles, fonts (glyphs) and icons (sprites). 
-- [`sprites.tar.gz`](https://github.com/versatiles-org/versatiles-style/releases/latest/download/sprites.tar.gz) containing sprites, used e.g. for map icons
-- [`versatiles-style.tar.gz`](https://github.com/versatiles-org/versatiles-style/releases/latest/download/versatiles-style.tar.gz) containing a JavaScript file to generate your own style in the browser.
+### Prebuilt Styles and Sprites
 
-# Generating styles on-the-fly
+Download the assets from the [latest release](https://github.com/versatiles-org/versatiles-style/releases/latest/):
 
-## Generating styles in the frontend (web browser)
+- **[styles.tar.gz](https://github.com/versatiles-org/versatiles-style/releases/latest/download/styles.tar.gz):** Contains all styles in multiple languages.
+  - **Note:** These styles use `tiles.versatiles.org` as the source for tiles, fonts (glyphs), and icons (sprites).
+- **[sprites.tar.gz](https://github.com/versatiles-org/versatiles-style/releases/latest/download/sprites.tar.gz):** Includes map icons and other sprites.
+- **[versatiles-style.tar.gz](https://github.com/versatiles-org/versatiles-style/releases/latest/download/versatiles-style.tar.gz):** Contains a JavaScript file to generate styles dynamically in the browser.
 
-Download latest release:
+---
+
+## Generating Styles On-the-Fly
+
+### Frontend Usage (Web Browser)
+
+Download the latest release:
 
 ```bash
 curl -Ls "https://github.com/versatiles-org/versatiles-style/releases/latest/download/versatiles-style.tar.gz" | gzip -d | tar -xf -
 ```
 
-Use it in:
+Integrate it into your HTML application:
 
 ```html
 <div id="map"></div>
@@ -57,62 +63,80 @@ Use it in:
 </script>
 ```
 
-## Generating styles in the backend (Node.js)
+### Backend Usage (Node.js)
 
-Install `@versatiles/style` via NPM:
+Install the library via NPM:
 
 ```bash
 npm install @versatiles/style
 ```
 
-Use it in Node.js:
+Generate styles programmatically:
 
 ```javascript
 import { colorful } from '@versatiles/style';
-let style = colorful({
+import { writeFileSync } from 'node:fs';
+
+const style = colorful({
   language: 'en',
 });
 writeFileSync('style.json', JSON.stringify(style));
 ```
 
-### Methods for generating styles
+---
 
-This library provides:
-- `style = colorful(options);`
-- `style = eclipse(options);`
-- `style = graybeard(options);`
-- `style = neutrino(options);`
+## Style Generation Methods
 
-Where `options` is an optional object
+The library offers the following style generation methods:
 
-### Method: `guessStyle(options)`
+- `colorful(options)` - [Documentation](https://github.com/versatiles-org/versatiles-style/blob/main/docs/functions/colorful.md)
+- `eclipse(options)` - [Documentation](https://github.com/versatiles-org/versatiles-style/blob/main/docs/functions/eclipse.md)
+- `graybeard(options)` - [Documentation](https://github.com/versatiles-org/versatiles-style/blob/main/docs/functions/graybeard.md)
+- `neutrino(options)` - [Documentation](https://github.com/versatiles-org/versatiles-style/blob/main/docs/functions/neutrino.md)
+
+**`options`**: An optional object to customize the styles. [Learn more](https://github.com/versatiles-org/versatiles-style/blob/main/docs/interfaces/StyleBuilderOptions.md)
+
+### Guess Style Method
 
 ```javascript
 const style = guessStyle(options);
 ```
+[Documentation](https://github.com/versatiles-org/versatiles-style/blob/main/docs/functions/guessStyle.md)
+
+---
 
+## Build Instructions
 
-**Parameters:**
+### Prerequisites
 
-* <code>opt: TileJSONOption</code>
+To build new sprites, ensure `optipng` is installed.
 
-**Returns:** <code>MaplibreStyle</code>
+### SVG Source Requirements
 
-# Build
+- SVGs must consist only of paths and should not contain any `transform()` attributes.
+- Styles and colors within the SVG are ignored.
+- All length values must be specified in pixels without units.
 
-Please note that for building new sprites you need `optipng`.
+### Configuration
 
-## SVG Sources
+Define icon sets in the configuration file: [`scripts/config-sprites.ts`](./scripts/config-sprites.ts)
+
+---
+
+## Development
+
+Run the project in development mode:
+
+```bash
+npm run dev
+```
 
-* SVG sources should consist only of paths and not contain any `transform()`s.
-* Colors and styles are ignored.
-* All lengths must be in pixels without unit.
+A local server will be available at [http://localhost:8080](http://localhost:8080). Use it to select a style, edit definitions in `src/styles/...`, and reload the page to view the changes.
 
-## Configuration
+---
 
-Iconsets can be defined in [`scripts/config-sprites.ts`](./scripts/config-sprites.ts)
+## Licenses
 
-# Licenses
+- **Source Code:** [Unlicense](./LICENSE.md)
+- **Iconsets and Rendered Spritemaps:** [CC0 1.0 Universal](./icons/LICENSE.md)
 
-* Sourcecode: [Unlicense](./LICENSE.md)
-* Iconsets and rendered Spritemaps: [CC0 1.0 Universal](./icons/LICENSE.md)

package/dist/color/abstract.d.ts

@@ -1,9 +1,9 @@
-import type { HSL } from './hsl';
-import type { HSV } from './hsv';
-import { RandomColorOptions } from './random';
-import type { RGB } from './rgb';
+import type { HSL } from './hsl.js';
+import type { HSV } from './hsv.js';
+import { RandomColorOptions } from './random.js';
+import type { RGB } from './rgb.js';
 export declare abstract class Color {
-    static parse: (str: string) => Color;
+    static parse: (input: Color | string) => Color;
     static HSL: typeof HSL;
     static HSV: typeof HSV;
     static RGB: typeof RGB;

package/dist/color/hsl.d.ts

@@ -1,6 +1,6 @@
-import { Color } from './abstract';
-import { HSV } from './hsv';
-import { RGB } from './rgb';
+import { Color } from './abstract.js';
+import { HSV } from './hsv.js';
+import { RGB } from './rgb.js';
 export declare class HSL extends Color {
     readonly h: number;
     readonly s: number;
@@ -15,7 +15,7 @@ export declare class HSL extends Color {
     toHSL(): HSL;
     asHSV(): HSV;
     asRGB(): RGB;
-    static parse(str: string): HSL;
+    static parse(input: string | Color): HSL;
     invertLuminosity(): HSL;
     rotateHue(offset: number): HSL;
     saturate(ratio: number): HSL;

package/dist/color/hsl.js

@@ -1,7 +1,7 @@
-import { Color } from './abstract';
-import { HSV } from './hsv';
-import { RGB } from './rgb';
-import { clamp, formatFloat, mod } from './utils';
+import { Color } from './abstract.js';
+import { HSV } from './hsv.js';
+import { RGB } from './rgb.js';
+import { clamp, formatFloat, mod } from './utils.js';
 export class HSL extends Color {
     h = 0; // between 0 and 360
     s = 0; // between 0 and 100
@@ -68,17 +68,19 @@ export class HSL extends Color {
         // Convert to RGB in the 0-255 range and return
         return new RGB(255 * hueToRgb(h + 1 / 3), 255 * hueToRgb(h), 255 * hueToRgb(h - 1 / 3), this.a);
     }
-    static parse(str) {
-        str = str.replace(/\s+/g, '').toLowerCase();
-        let match = str.match(/^hsl\((?<h>[-+0-9.]+)(?:deg)?,(?<s>[-+0-9.]+)%,(?<l>[-+0-9.]+)%\)$/);
+    static parse(input) {
+        if (input instanceof Color)
+            return input.asHSL();
+        input = input.replace(/\s+/g, '').toLowerCase();
+        let match = input.match(/^hsl\((?<h>[-+0-9.]+)(?:deg)?,(?<s>[-+0-9.]+)%,(?<l>[-+0-9.]+)%\)$/);
         if (match) {
             return new HSL(parseFloat(match.groups.h), parseFloat(match.groups.s), parseFloat(match.groups.l));
         }
-        match = str.match(/^hsla\((?<h>[-+0-9.]+)(?:deg)?,(?<s>[-+0-9.]+)%,(?<l>[-+0-9.]+)%,(?<a>[-+0-9.]+)\)$/);
+        match = input.match(/^hsla\((?<h>[-+0-9.]+)(?:deg)?,(?<s>[-+0-9.]+)%,(?<l>[-+0-9.]+)%,(?<a>[-+0-9.]+)\)$/);
         if (match) {
             return new HSL(parseFloat(match.groups.h), parseFloat(match.groups.s), parseFloat(match.groups.l), parseFloat(match.groups.a));
         }
-        throw new Error(`Invalid HSL color string: "${str}"`);
+        throw new Error(`Invalid HSL color string: "${input}"`);
     }
     invertLuminosity() {
         return new HSL(this.h, this.s, 100 - this.l, this.a);

package/dist/color/hsv.d.ts

@@ -1,6 +1,6 @@
-import { Color } from './abstract';
-import { HSL } from './hsl';
-import { RGB } from './rgb';
+import { Color } from './abstract.js';
+import { HSL } from './hsl.js';
+import { RGB } from './rgb.js';
 export declare class HSV extends Color {
     readonly h: number;
     readonly s: number;

package/dist/color/hsv.js

@@ -1,7 +1,7 @@
-import { Color } from './abstract';
-import { HSL } from './hsl';
-import { RGB } from './rgb';
-import { clamp, mod } from './utils';
+import { Color } from './abstract.js';
+import { HSL } from './hsl.js';
+import { RGB } from './rgb.js';
+import { clamp, mod } from './utils.js';
 export class HSV extends Color {
     h = 0; // between 0 and 360
     s = 0; // between 0 and 100

package/dist/color/index.d.ts

@@ -1,6 +1,6 @@
-import { Color } from './abstract';
-export type { RandomColorOptions } from './random';
-export type { HSL } from './hsl';
-export type { HSV } from './hsv';
-export type { RGB } from './rgb';
+import { Color } from './abstract.js';
+export type { RandomColorOptions } from './random.js';
+export type { HSL } from './hsl.js';
+export type { HSV } from './hsv.js';
+export type { RGB } from './rgb.js';
 export { Color };

package/dist/color/index.js

@@ -1,22 +1,24 @@
-import { Color } from './abstract';
-import { HSL } from './hsl';
-import { HSV } from './hsv';
-import randomColor from './random';
-import { RGB } from './rgb';
-Color.parse = function (str) {
-    str = str.trim().toLowerCase();
-    if (str.startsWith('#'))
-        return RGB.parse(str);
-    const prefix = str.replace(/\d.*/, '').trim().toLowerCase();
+import { Color } from './abstract.js';
+import { HSL } from './hsl.js';
+import { HSV } from './hsv.js';
+import randomColor from './random.js';
+import { RGB } from './rgb.js';
+Color.parse = function (input) {
+    if (input instanceof Color)
+        return input;
+    input = input.trim().toLowerCase();
+    if (input.startsWith('#'))
+        return RGB.parse(input);
+    const prefix = input.replace(/\d.*/, '').trim().toLowerCase();
     switch (prefix) {
         case 'rgb(':
         case 'rgba(':
-            return RGB.parse(str);
+            return RGB.parse(input);
         case 'hsl(':
         case 'hsla(':
-            return HSL.parse(str);
+            return HSL.parse(input);
         default:
-            throw Error('Unknown color format: ' + str);
+            throw Error('Unknown color format: ' + input);
     }
 };
 Color.HSL = HSL;

package/dist/color/random.d.ts

@@ -1,4 +1,4 @@
-import { HSV } from './hsv';
+import { HSV } from './hsv.js';
 export interface RandomColorOptions {
     seed?: string;
     hue?: number | string;

package/dist/color/random.js

@@ -1,5 +1,5 @@
-import { HSV } from './hsv';
-import { mod } from './utils';
+import { HSV } from './hsv.js';
+import { mod } from './utils.js';
 let colorDictionary = new Map();
 export default function randomColor(options) {
     if (colorDictionary.size === 0)

package/dist/color/rgb.d.ts

@@ -1,6 +1,6 @@
-import { HSL } from './hsl';
-import { HSV } from './hsv';
-import { Color } from './abstract';
+import { HSL } from './hsl.js';
+import { HSV } from './hsv.js';
+import { Color } from './abstract.js';
 export declare class RGB extends Color {
     readonly r: number;
     readonly g: number;
@@ -16,7 +16,7 @@ export declare class RGB extends Color {
     asHSV(): HSV;
     asRGB(): RGB;
     toRGB(): RGB;
-    static parse(str: string): RGB;
+    static parse(input: string | Color): RGB;
     gamma(value: number): RGB;
     invert(): RGB;
     contrast(value: number): RGB;

package/dist/color/rgb.js

@@ -1,7 +1,7 @@
-import { HSL } from './hsl';
-import { HSV } from './hsv';
-import { Color } from './abstract';
-import { clamp, formatFloat } from './utils';
+import { HSL } from './hsl.js';
+import { HSV } from './hsv.js';
+import { Color } from './abstract.js';
+import { clamp, formatFloat } from './utils.js';
 export class RGB extends Color {
     r = 0; // between 0 and 255
     g = 0; // between 0 and 255
@@ -109,10 +109,12 @@ export class RGB extends Color {
     toRGB() {
         return this;
     }
-    static parse(str) {
-        str = str.toLowerCase().replaceAll(/[^0-9a-z.#,()]/g, '');
+    static parse(input) {
+        if (input instanceof Color)
+            return input.asRGB();
+        input = input.toLowerCase().replaceAll(/[^0-9a-z.#,()]/g, '');
         let match;
-        match = str.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/);
+        match = input.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/);
         if (match) {
             const r = parseInt(match[1], 16);
             const g = parseInt(match[2], 16);
@@ -120,7 +122,7 @@ export class RGB extends Color {
             const a = match[4] ? parseInt(match[4], 16) / 255 : 1;
             return new RGB(r, g, b, a);
         }
-        match = str.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])?$/);
+        match = input.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])?$/);
         if (match) {
             const r = parseInt(match[1], 16) * 17;
             const g = parseInt(match[2], 16) * 17;
@@ -128,15 +130,15 @@ export class RGB extends Color {
             const a = match[4] ? parseInt(match[4], 16) / 15 : 1;
             return new RGB(r, g, b, a);
         }
-        str = str.trim().toLowerCase().replaceAll(' ', '');
-        match = str.match(/^rgb\((\d+),(\d+),(\d+)\)$/);
+        input = input.trim().toLowerCase().replaceAll(' ', '');
+        match = input.match(/^rgb\((\d+),(\d+),(\d+)\)$/);
         if (match) {
             const r = parseInt(match[1]);
             const g = parseInt(match[2]);
             const b = parseInt(match[3]);
             return new RGB(r, g, b);
         }
-        match = str.match(/^rgba\((\d+),(\d+),(\d+),([.\d]+)\)$/);
+        match = input.match(/^rgba\((\d+),(\d+),(\d+),([.\d]+)\)$/);
         if (match) {
             const r = parseInt(match[1]);
             const g = parseInt(match[2]);
@@ -144,7 +146,7 @@ export class RGB extends Color {
             const a = parseFloat(match[4]);
             return new RGB(r, g, b, a);
         }
-        throw new Error(`Invalid RGB color string: "${str}"`);
+        throw new Error(`Invalid RGB color string: "${input}"`);
     }
     gamma(value) {
         if (value < 1e-3)

package/dist/guess_style/guess_style.d.ts

@@ -1,4 +1,4 @@
-import type { TileJSONSpecification } from '../types/index';
+import type { TileJSONSpecification } from '../types/index.js';
 import type { SpriteSpecification, StyleSpecification } from '@maplibre/maplibre-gl-style-spec';
 export interface GuessStyleOptions {
     baseUrl?: string;

package/dist/guess_style/guess_style.js

@@ -1,8 +1,8 @@
-import { isTileJSONSpecification } from '../types/index';
-import { deepClone, resolveUrl } from '../lib/utils';
-import { colorful } from '../styles/index';
-import { Color } from '../color/index';
-import { isRasterTileJSONSpecification } from '../types/tilejson';
+import { isTileJSONSpecification } from '../types/index.js';
+import { deepClone, resolveUrl } from '../lib/utils.js';
+import { colorful } from '../styles/index.js';
+import { Color } from '../color/index.js';
+import { isRasterTileJSONSpecification } from '../types/tilejson.js';
 export function guessStyle(tileJSON, options) {
     tileJSON = deepClone(tileJSON);
     if (options && options.baseUrl) {

package/dist/guess_style/index.d.ts

@@ -1,2 +1,2 @@
-export type { GuessStyleOptions } from './guess_style';
-export { guessStyle } from './guess_style';
+export type { GuessStyleOptions } from './guess_style.js';
+export { guessStyle } from './guess_style.js';

package/dist/guess_style/index.js

@@ -1,2 +1,2 @@
-export { guessStyle } from './guess_style';
+export { guessStyle } from './guess_style.js';
 //# sourceMappingURL=index.js.map

package/dist/index.d.ts

@@ -1,28 +1,15 @@
-export type { colorful, eclipse, graybeard, neutrino } from './styles/index';
+export { colorful, eclipse, graybeard, neutrino, type StyleBuilderFunction } from './styles/index.js';
 export declare const styles: {
-    colorful: {
-        (options?: import("./style_builder/types").StyleBuilderOptions): import("@maplibre/maplibre-gl-style-spec").StyleSpecification;
-        getOptions(): import("./style_builder/types").StyleBuilderOptions;
-    };
-    eclipse: {
-        (options?: import("./style_builder/types").StyleBuilderOptions): import("@maplibre/maplibre-gl-style-spec").StyleSpecification;
-        getOptions(): import("./style_builder/types").StyleBuilderOptions;
-    };
-    graybeard: {
-        (options?: import("./style_builder/types").StyleBuilderOptions): import("@maplibre/maplibre-gl-style-spec").StyleSpecification;
-        getOptions(): import("./style_builder/types").StyleBuilderOptions;
-    };
-    neutrino: {
-        (options?: import("./style_builder/types").StyleBuilderOptions): import("@maplibre/maplibre-gl-style-spec").StyleSpecification;
-        getOptions(): import("./style_builder/types").StyleBuilderOptions;
-    };
+    colorful: import("./styles/index.js").StyleBuilderFunction;
+    eclipse: import("./styles/index.js").StyleBuilderFunction;
+    graybeard: import("./styles/index.js").StyleBuilderFunction;
+    neutrino: import("./styles/index.js").StyleBuilderFunction;
 };
-export type { GuessStyleOptions } from './guess_style/index';
-export type { RGB, HSL, HSV, RandomColorOptions } from './color/index';
-export type { TileJSONSpecification, TileJSONSpecificationRaster, TileJSONSpecificationVector } from './types/tilejson';
-export type { VectorLayer } from './types/index';
-export type { StyleBuilderOptions, StyleBuilderColorStrings, Language, StyleBuilderColorKeys, StyleBuilderFonts } from './style_builder/types';
-export type { RecolorOptions } from './style_builder/recolor';
-export type { StyleBuilder } from './style_builder/style_builder';
-export { guessStyle } from './guess_style/index';
-export { Color } from './color/index';
+export type { GuessStyleOptions } from './guess_style/index.js';
+export type { RGB, HSL, HSV, RandomColorOptions } from './color/index.js';
+export type { TileJSONSpecification, TileJSONSpecificationRaster, TileJSONSpecificationVector } from './types/tilejson.js';
+export type { VectorLayer } from './types/index.js';
+export type { StyleBuilderOptions, Language, StyleBuilderColors, StyleBuilderColorsEnsured, StyleBuilderFonts } from './style_builder/types.js';
+export type { RecolorOptions } from './style_builder/recolor.js';
+export { guessStyle } from './guess_style/index.js';
+export { Color } from './color/index.js';

package/dist/index.js

@@ -1,10 +1,11 @@
-import { colorful, eclipse, graybeard, neutrino } from './styles/index';
+export { colorful, eclipse, graybeard, neutrino } from './styles/index.js';
+import { colorful, eclipse, graybeard, neutrino } from './styles/index.js';
 export const styles = {
     colorful,
     eclipse,
     graybeard,
     neutrino,
 };
-export { guessStyle } from './guess_style/index';
-export { Color } from './color/index';
+export { guessStyle } from './guess_style/index.js';
+export { Color } from './color/index.js';
 //# sourceMappingURL=index.js.map

package/dist/lib/utils.js

@@ -1,4 +1,4 @@
-import { Color } from '../color/index';
+import { Color } from '../color/index.js';
 // Utility function to deep clone an object
 export function deepClone(obj) {
     const type = typeof obj;

package/dist/shortbread/index.d.ts

@@ -1,2 +1,2 @@
-export { getShortbreadTemplate } from './template';
-export { getShortbreadLayers } from './layers';
+export { getShortbreadTemplate } from './template.js';
+export { getShortbreadLayers } from './layers.js';

package/dist/shortbread/index.js

@@ -1,3 +1,3 @@
-export { getShortbreadTemplate } from './template';
-export { getShortbreadLayers } from './layers';
+export { getShortbreadTemplate } from './template.js';
+export { getShortbreadLayers } from './layers.js';
 //# sourceMappingURL=index.js.map

package/dist/shortbread/layers.d.ts

@@ -1,5 +1,5 @@
-import type { Language } from '../style_builder/index';
-import type { MaplibreLayerDefinition } from '../types/index';
+import type { MaplibreLayerDefinition } from '../types/index.js';
+import { Language } from '../style_builder/types.js';
 export declare function getShortbreadLayers(option: {
     readonly language: Language;
 }): MaplibreLayerDefinition[];

package/dist/style_builder/decorator.d.ts

@@ -1,4 +1,4 @@
-import type { MaplibreLayer } from '../types/index';
-import type { StyleRules } from './types';
-import type { CachedRecolor } from './recolor';
+import type { MaplibreLayer } from '../types/index.js';
+import type { StyleRules } from './types.js';
+import type { CachedRecolor } from './recolor.js';
 export declare function decorate(layers: MaplibreLayer[], rules: StyleRules, recolor: CachedRecolor): MaplibreLayer[];

package/dist/style_builder/decorator.js

@@ -1,7 +1,7 @@
-import { Color } from '../color/index';
+import { Color } from '../color/index.js';
 import expandBraces from 'brace-expansion';
-import maplibreProperties from '../shortbread/properties';
-import { deepMerge } from '../lib/utils';
+import maplibreProperties from '../shortbread/properties.js';
+import { deepMerge } from '../lib/utils.js';
 export function decorate(layers, rules, recolor) {
     const layerIds = layers.map(l => l.id);
     const layerIdSet = new Set(layerIds);

package/dist/style_builder/recolor.d.ts

@@ -1,4 +1,4 @@
-import { Color } from '../color/index';
+import { Color } from '../color/index.js';
 export interface RecolorOptions {
     invertBrightness?: boolean;
     rotate?: number;

package/dist/style_builder/recolor.js

@@ -1,4 +1,4 @@
-import { Color } from '../color/index';
+import { Color } from '../color/index.js';
 export function getDefaultRecolorFlags() {
     return {
         invertBrightness: false,

package/dist/style_builder/style_builder.d.ts

@@ -1,14 +1,14 @@
-import { Color } from '../color/index';
-import type { StyleSpecification } from '../types/maplibre';
-import type { StyleBuilderColorStrings, StyleBuilderColors, StyleBuilderFonts, StyleBuilderOptions } from './types';
-import type { StyleRules, StyleRulesOptions } from './types';
+import { Color } from '../color/index.js';
+import type { StyleSpecification } from '../types/maplibre.js';
+import type { StyleBuilderColors, StyleBuilderColorsEnsured, StyleBuilderFonts, StyleBuilderOptions } from './types.js';
+import type { StyleRules, StyleRulesOptions } from './types.js';
 export declare abstract class StyleBuilder {
     #private;
     abstract readonly name: string;
-    abstract readonly defaultColors: StyleBuilderColorStrings;
+    abstract readonly defaultColors: StyleBuilderColors;
     abstract readonly defaultFonts: StyleBuilderFonts;
     build(options?: StyleBuilderOptions): StyleSpecification;
-    getColors(colors: StyleBuilderColorStrings): StyleBuilderColors;
+    getColors(colors: StyleBuilderColors): StyleBuilderColorsEnsured;
     getDefaultOptions(): StyleBuilderOptions;
     protected transformDefaultColors(callback: (color: Color) => Color): void;
     protected abstract getStyleRules(options: StyleRulesOptions): StyleRules;

package/dist/style_builder/style_builder.js

@@ -1,8 +1,8 @@
-import { Color } from '../color/index';
-import { getShortbreadTemplate, getShortbreadLayers } from '../shortbread/index';
-import { decorate } from './decorator';
-import { CachedRecolor, getDefaultRecolorFlags } from './recolor';
-import { basename, deepClone, resolveUrl } from '../lib/utils';
+import { Color } from '../color/index.js';
+import { getShortbreadTemplate, getShortbreadLayers } from '../shortbread/index.js';
+import { decorate } from './decorator.js';
+import { CachedRecolor, getDefaultRecolorFlags } from './recolor.js';
+import { basename, deepClone, resolveUrl } from '../lib/utils.js';
 // StyleBuilder class definition
 export class StyleBuilder {
     #sourceName = 'versatiles-shortbread';
@@ -99,7 +99,7 @@ export class StyleBuilder {
         const colors = this.getColors(this.defaultColors);
         let key;
         for (key in colors) {
-            this.defaultColors[key] = callback(colors[key]).asHex();
+            this.defaultColors[key] = callback(colors[key]);
         }
     }
 }

package/dist/style_builder/types.d.ts

@@ -1,39 +1,117 @@
-import type { Color } from '../color/index';
-import type { RecolorOptions } from './recolor';
+import type { Color } from '../color/index.js';
+import type { RecolorOptions } from './recolor.js';
 import { SpriteSpecification } from '@maplibre/maplibre-gl-style-spec';
 /** Represents language suffixes used in map styles. */
 export type Language = 'de' | 'en' | null;
+/** Options for configuring a style builder. */
 export interface StyleBuilderOptions {
+    /**
+     * The base URL for loading external resources like tiles, sprites, and fonts.
+     * Default: document.location.origin (in the browser), or 'https://tiles.versatiles.org'
+     */
     baseUrl?: string;
+    /**
+     * The URL template for loading font glyphs, formatted with '{fontstack}' and '{range}' placeholders.
+     * Default: '/assets/glyphs/{fontstack}/{range}.pbf'
+     */
     glyphs?: string;
+    /**
+     * The URL for loading sprite images and metadata.
+     * Default: [{ id: 'basics', url: '/assets/sprites/basics/sprites' }]
+     */
     sprite?: SpriteSpecification;
+    /**
+     * An array of URL templates for loading map tiles, using '{z}', '{x}', and '{y}' placeholders.
+     * Default: ['/tiles/osm/{z}/{x}/{y}']
+     */
     tiles?: string[];
+    /**
+     * If set to true, hides all map labels.
+     * Default: false
+     */
     hideLabels?: boolean;
+    /**
+     * Set the language ('en', 'de') of all map labels.
+     * A null value means that the language of the country in which the label is drawn will be used.
+     * Default: null
+     */
     language?: Language;
-    colors?: Partial<StyleBuilderColorStrings>;
+    /**
+     * An object specifying overrides for default color values, keyed by the color names.
+     */
+    colors?: Partial<StyleBuilderColors>;
+    /**
+     * An object specifying overrides for default font names, keyed by the font names.
+     */
     fonts?: Partial<StyleBuilderFonts>;
+    /**
+     * Options for color adjustments and transformations applied to the entire style.
+     */
     recolor?: RecolorOptions;
 }
-/** Defines the keys for color properties in a style builder. */
-export type StyleBuilderColorKeys = 'agriculture' | 'boundary' | 'building' | 'buildingbg' | 'burial' | 'commercial' | 'construction' | 'cycle' | 'danger' | 'disputed' | 'education' | 'foot' | 'glacier' | 'grass' | 'hospital' | 'industrial' | 'label' | 'labelHalo' | 'land' | 'leisure' | 'motorway' | 'motorwaybg' | 'park' | 'parking' | 'poi' | 'prison' | 'rail' | 'residential' | 'rock' | 'sand' | 'shield' | 'street' | 'streetbg' | 'subway' | 'symbol' | 'trunk' | 'trunkbg' | 'waste' | 'water' | 'wetland' | 'wood';
-/** Defines the keys for font properties in a style builder. */
-export type StyleBuilderFontKeys = 'regular' | 'bold';
 /** Records string values for color properties in a style builder. */
-export type StyleBuilderColorStrings = {
-    [key in StyleBuilderColorKeys]: string;
-};
-/** Records Color objects for color properties in a style builder. */
-export type StyleBuilderColors = {
-    [key in StyleBuilderColorKeys]: Color;
-};
+export interface StyleBuilderColors {
+    agriculture: Color | string;
+    boundary: Color | string;
+    building: Color | string;
+    buildingbg: Color | string;
+    burial: Color | string;
+    commercial: Color | string;
+    construction: Color | string;
+    cycle: Color | string;
+    danger: Color | string;
+    disputed: Color | string;
+    education: Color | string;
+    foot: Color | string;
+    glacier: Color | string;
+    grass: Color | string;
+    hospital: Color | string;
+    industrial: Color | string;
+    label: Color | string;
+    labelHalo: Color | string;
+    land: Color | string;
+    leisure: Color | string;
+    motorway: Color | string;
+    motorwaybg: Color | string;
+    park: Color | string;
+    parking: Color | string;
+    poi: Color | string;
+    prison: Color | string;
+    rail: Color | string;
+    residential: Color | string;
+    rock: Color | string;
+    sand: Color | string;
+    shield: Color | string;
+    street: Color | string;
+    streetbg: Color | string;
+    subway: Color | string;
+    symbol: Color | string;
+    trunk: Color | string;
+    trunkbg: Color | string;
+    waste: Color | string;
+    water: Color | string;
+    wetland: Color | string;
+    wood: Color | string;
+}
+export type StyleBuilderColorsEnsured = Record<keyof StyleBuilderColors, Color>;
 /** Records string values for font properties in a style builder. */
 export type StyleBuilderFonts = {
-    [key in StyleBuilderFontKeys]: string;
+    regular: string;
+    bold: string;
 };
 /** Defines options for style rules in a style builder. */
 export interface StyleRulesOptions {
-    colors: StyleBuilderColors;
+    /**
+     * The set of colors used in the style builder.
+     */
+    colors: StyleBuilderColorsEnsured;
+    /**
+     * The set of fonts used in the style builder.
+     */
     fonts: StyleBuilderFonts;
+    /**
+     * The language used for map labels.
+     */
     language: Language;
 }
 /** Defines the value type for a style rule. */

package/dist/style_builder/types.js

@@ -1,2 +1,3 @@
+;
 export {};
 //# sourceMappingURL=types.js.map

package/dist/styles/colorful.d.ts

@@ -1,94 +1,11 @@
-import { StyleBuilder } from '../style_builder/style_builder';
-import type { StyleRules, StyleRulesOptions } from '../style_builder/types';
+import { StyleBuilder } from '../style_builder/style_builder.js';
+import type { StyleBuilderColors, StyleRules, StyleRulesOptions } from '../style_builder/types.js';
 export default class Colorful extends StyleBuilder {
     readonly name: string;
     defaultFonts: {
         regular: string;
         bold: string;
     };
-    defaultColors: {
-        /** Color for land areas on the map. */
-        land: string;
-        /** Color for water bodies like lakes and rivers. */
-        water: string;
-        /** Color for glacier areas, usually shown as white. */
-        glacier: string;
-        /** Color for wooded or forested areas. */
-        wood: string;
-        /** Color for grasslands or open fields. */
-        grass: string;
-        /** Color for parks and recreational areas. */
-        park: string;
-        /** Color for streets and roads on the map. */
-        street: string;
-        /** Background color for streets. */
-        streetbg: string;
-        /** Color for major highways or motorways. */
-        motorway: string;
-        /** Background color for motorways. */
-        motorwaybg: string;
-        /** Color for trunk roads. */
-        trunk: string;
-        /** Background color for trunk roads. */
-        trunkbg: string;
-        /** Background color for buildings. */
-        buildingbg: string;
-        /** Primary color for buildings. */
-        building: string;
-        /** Color used for boundaries. */
-        boundary: string;
-        /** Color used for disputed boundaries. */
-        disputed: string;
-        /** Color used for residential areas. */
-        residential: string;
-        /** Color used for commercial areas. */
-        commercial: string;
-        /** Color used for industrial areas. */
-        industrial: string;
-        /** Color used for footpaths and pedestrian areas. */
-        foot: string;
-        /** Primary color used for labels. */
-        label: string;
-        /** Color used for label halos. */
-        labelHalo: string;
-        /** Color used for shields on maps. */
-        shield: string;
-        /** Color used for agriculture areas. */
-        agriculture: string;
-        /** Color used for railways. */
-        rail: string;
-        /** Color used for subways and underground systems. */
-        subway: string;
-        /** Color used for cycle paths. */
-        cycle: string;
-        /** Color used for waste areas. */
-        waste: string;
-        /** Color used for burial and cemetery areas. */
-        burial: string;
-        /** Color used for sand areas like beaches. */
-        sand: string;
-        /** Color used for rocky terrain. */
-        rock: string;
-        /** Color used for leisure areas like parks and gardens. */
-        leisure: string;
-        /** Color used for wetland areas like marshes. */
-        wetland: string;
-        /** Color used for various symbols on the map. */
-        symbol: string;
-        /** Color indicating danger or warning areas. */
-        danger: string;
-        /** Color used for prison areas. */
-        prison: string;
-        /** Color used for parking areas. */
-        parking: string;
-        /** Color used for construction sites. */
-        construction: string;
-        /** Color used for educational facilities. */
-        education: string;
-        /** Color used for hospitals and medical facilities. */
-        hospital: string;
-        /** Color used for points of interest. */
-        poi: string;
-    };
+    defaultColors: StyleBuilderColors;
     protected getStyleRules(options: StyleRulesOptions): StyleRules;
 }

package/dist/styles/colorful.js

@@ -1,4 +1,4 @@
-import { StyleBuilder } from '../style_builder/style_builder';
+import { StyleBuilder } from '../style_builder/style_builder.js';
 export default class Colorful extends StyleBuilder {
     name = 'Colorful';
     defaultFonts = {

package/dist/styles/eclipse.d.ts

@@ -1,4 +1,4 @@
-import Colorful from './colorful';
+import Colorful from './colorful.js';
 export default class Eclipse extends Colorful {
     readonly name: string;
     constructor();

package/dist/styles/eclipse.js

@@ -1,4 +1,4 @@
-import Colorful from './colorful';
+import Colorful from './colorful.js';
 export default class Eclipse extends Colorful {
     name = 'Eclipse';
     constructor() {

package/dist/styles/empty.d.ts

@@ -1,5 +1,5 @@
-import type { StyleRules, StyleRulesOptions } from '../style_builder/types';
-import Colorful from './colorful';
+import type { StyleRules, StyleRulesOptions } from '../style_builder/types.js';
+import Colorful from './colorful.js';
 export default class Empty extends Colorful {
     readonly name: string;
     protected getStyleRules(_options: StyleRulesOptions): StyleRules;

package/dist/styles/empty.js

@@ -1,4 +1,4 @@
-import Colorful from './colorful';
+import Colorful from './colorful.js';
 export default class Empty extends Colorful {
     name = 'Empty';
     getStyleRules(_options) {

package/dist/styles/graybeard.d.ts

@@ -1,4 +1,4 @@
-import Colorful from './colorful';
+import Colorful from './colorful.js';
 export default class Graybeard extends Colorful {
     readonly name: string;
     constructor();

package/dist/styles/graybeard.js

@@ -1,4 +1,4 @@
-import Colorful from './colorful';
+import Colorful from './colorful.js';
 export default class Graybeard extends Colorful {
     name = 'Graybeard';
     constructor() {

package/dist/styles/index.d.ts

@@ -1,22 +1,11 @@
-import type { StyleBuilderOptions } from '../style_builder/types';
+import type { StyleBuilderOptions } from '../style_builder/types.js';
 import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec';
-export declare const colorful: {
+export interface StyleBuilderFunction {
     (options?: StyleBuilderOptions): StyleSpecification;
     getOptions(): StyleBuilderOptions;
-};
-export declare const eclipse: {
-    (options?: StyleBuilderOptions): StyleSpecification;
-    getOptions(): StyleBuilderOptions;
-};
-export declare const graybeard: {
-    (options?: StyleBuilderOptions): StyleSpecification;
-    getOptions(): StyleBuilderOptions;
-};
-export declare const neutrino: {
-    (options?: StyleBuilderOptions): StyleSpecification;
-    getOptions(): StyleBuilderOptions;
-};
-export declare const empty: {
-    (options?: StyleBuilderOptions): StyleSpecification;
-    getOptions(): StyleBuilderOptions;
-};
+}
+export declare const colorful: StyleBuilderFunction;
+export declare const eclipse: StyleBuilderFunction;
+export declare const graybeard: StyleBuilderFunction;
+export declare const neutrino: StyleBuilderFunction;
+export declare const empty: StyleBuilderFunction;

package/dist/styles/index.js

@@ -1,9 +1,9 @@
 // import styles
-import Colorful from './colorful';
-import Eclipse from './eclipse';
-import Graybeard from './graybeard';
-import Neutrino from './neutrino';
-import Empty from './empty';
+import Colorful from './colorful.js';
+import Eclipse from './eclipse.js';
+import Graybeard from './graybeard.js';
+import Neutrino from './neutrino.js';
+import Empty from './empty.js';
 function getStyleBuilder(styleBuilder) {
     const fn = function (options) {
         return new styleBuilder().build(options);

package/dist/styles/neutrino.d.ts

@@ -1,65 +1,11 @@
-import { StyleRules, StyleRulesOptions } from '../style_builder/types';
-import Colorful from './colorful';
+import { StyleBuilderColors, StyleRules, StyleRulesOptions } from '../style_builder/types.js';
+import Colorful from './colorful.js';
 export default class Neutrino extends Colorful {
     readonly name: string;
     defaultFonts: {
         regular: string;
         bold: string;
     };
-    defaultColors: {
-        /** Color representing land areas. */
-        land: string;
-        /** Color representing bodies of water such as lakes and rivers. */
-        water: string;
-        /** Color for grassy areas and fields. */
-        grass: string;
-        /** Color for wooded or forested areas. */
-        wood: string;
-        /** Color used for agricultural land. */
-        agriculture: string;
-        /** Color for site areas such as parks or recreational facilities. */
-        commercial: string;
-        /** Primary color for buildings. */
-        building: string;
-        /** Color for streets and roads. */
-        street: string;
-        /** Color used for boundaries, such as national or state lines. */
-        boundary: string;
-        /** Color for footpaths and pedestrian areas. */
-        foot: string;
-        /** Color used for railways. */
-        rail: string;
-        /** Primary color used for text labels. */
-        label: string;
-        buildingbg: string;
-        burial: string;
-        construction: string;
-        cycle: string;
-        danger: string;
-        disputed: string;
-        education: string;
-        glacier: string;
-        hospital: string;
-        industrial: string;
-        labelHalo: string;
-        leisure: string;
-        motorway: string;
-        motorwaybg: string;
-        park: string;
-        parking: string;
-        poi: string;
-        prison: string;
-        residential: string;
-        rock: string;
-        sand: string;
-        shield: string;
-        streetbg: string;
-        subway: string;
-        symbol: string;
-        trunk: string;
-        trunkbg: string;
-        waste: string;
-        wetland: string;
-    };
+    defaultColors: StyleBuilderColors;
     protected getStyleRules(options: StyleRulesOptions): StyleRules;
 }

package/dist/styles/neutrino.js

@@ -1,4 +1,4 @@
-import Colorful from './colorful';
+import Colorful from './colorful.js';
 export default class Neutrino extends Colorful {
     name = 'Neutrino';
     defaultFonts = {

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
-export type { MaplibreLayerDefinition, MaplibreLayer } from './maplibre';
-export type { VectorLayer } from './vector_layer';
-export { isTileJSONSpecification } from './tilejson';
-export type { TileJSONSpecification, TileJSONSpecificationRaster, TileJSONSpecificationVector } from './tilejson';
-export { isVectorLayers } from './vector_layer';
+export type { MaplibreLayerDefinition, MaplibreLayer } from './maplibre.js';
+export type { VectorLayer } from './vector_layer.js';
+export { isTileJSONSpecification } from './tilejson.js';
+export type { TileJSONSpecification, TileJSONSpecificationRaster, TileJSONSpecificationVector } from './tilejson.js';
+export { isVectorLayers } from './vector_layer.js';

package/dist/types/index.js

@@ -1,3 +1,3 @@
-export { isTileJSONSpecification } from './tilejson';
-export { isVectorLayers } from './vector_layer';
+export { isTileJSONSpecification } from './tilejson.js';
+export { isVectorLayers } from './vector_layer.js';
 //# sourceMappingURL=index.js.map

package/dist/types/tilejson.d.ts

@@ -1,4 +1,4 @@
-import type { VectorLayer } from './vector_layer';
+import type { VectorLayer } from './vector_layer.js';
 /** Basic structure for TileJSON specification, applicable to both raster and vector types. */
 export interface TileJSONSpecificationRaster {
     tilejson?: '3.0.0';

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@versatiles/style",
-  "version": "5.2.3",
+  "version": "5.2.5",
   "description": "Generate StyleJSON for MapLibre",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "check": "npm run lint && npm run test && npm run build",
-    "build": "rm -rf release; npm run build-browser && npm run build-node && npm run build-styles && npm run build-sprites",
+    "build": "rm -rf release; npm run build-browser && npm run build-node && npm run build-styles && npm run build-sprites && npm run doc",
     "build-browser": "rollup -c=rollup.config.js && $(cd release/versatiles-style; tar -cf - versatiles-style.* | gzip -9 > ../versatiles-style.tar.gz)",
     "build-node": "rm -rf dist && tsc -p tsconfig.node.json && chmod +x dist/index.js",
     "build-styles": "tsx scripts/build-styles.ts",
     "build-sprites": "tsx scripts/build-sprites.ts",
     "dev": "tsx scripts/dev.ts",
-    "// doc": "vrt ts2md src/index.ts tsconfig.node.json | vrt insertmd README.md '# API'",
+    "doc": "tsx scripts/screenshots.ts && typedoc --options typedoc.json",
     "lint": "eslint --color .",
     "prepack": "npm run build",
     "release": "npx vrt release-npm",
@@ -36,6 +36,7 @@
     "dist/**/*.d.ts"
   ],
   "devDependencies": {
+    "@maplibre/maplibre-gl-native": "^6.0.0",
     "@maplibre/maplibre-gl-style-spec": "^23.1.0",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
@@ -45,10 +46,10 @@
     "@types/brace-expansion": "^1.1.2",
     "@types/inquirer": "^9.0.7",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.10.7",
+    "@types/node": "^22.10.10",
     "@types/tar-stream": "^3.1.3",
-    "@typescript-eslint/eslint-plugin": "^8.20.0",
-    "@typescript-eslint/parser": "^8.20.0",
+    "@typescript-eslint/eslint-plugin": "^8.21.0",
+    "@typescript-eslint/parser": "^8.21.0",
     "@versatiles/release-tool": "^1.2.6",
     "bin-pack": "^1.0.2",
     "eslint": "^9.18.0",
@@ -57,14 +58,16 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-ts-webcompat-resolver": "^1.0.0",
     "npm-check-updates": "^17.1.14",
-    "rollup": "^4.30.1",
+    "rollup": "^4.32.0",
     "rollup-plugin-dts": "^6.1.1",
     "sharp": "^0.33.5",
     "tar-stream": "^3.1.7",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "tsx": "^4.19.2",
+    "typedoc": "^0.27.6",
+    "typedoc-plugin-markdown": "^4.4.1",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.20.0"
+    "typescript-eslint": "^8.21.0"
   }
 }

package/dist/style_builder/index.d.ts

@@ -1 +0,0 @@
-export type { Language } from './types';

package/dist/style_builder/index.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.js.map