@versatiles/style 4.4.1 → 5.0.0

package/README.MD

@@ -5,6 +5,9 @@
 
 # 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).
+
 Generates styles and sprites for MapLibre.
 
 ![Example: Colorful Style](docs/colorful.png)
@@ -13,6 +16,7 @@ Generates styles and sprites for MapLibre.
 
 * Colorful - colorful, full featured map
 * Graybeard - gray, full featured map
+* Eclipse - dark, full featured map
 * Neutrino - light basemap
 
 # Use styles for versatiles.org
@@ -23,12 +27,14 @@ Be aware that these styles use `tiles.versatiles.org` as source for tiles, fonts
 - [`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.
 
-# Create styles in the frontend (web browser)
+# Generating styles on-the-fly
+
+## Generating styles in the frontend (web browser)
 
 Download latest release:
 
 ```bash
-wget "https://github.com/versatiles-org/versatiles-style/releases/latest/download/versatiles-style.tar.gz"
+curl -Ls "https://github.com/versatiles-org/versatiles-style/releases/latest/download/versatiles-style.tar.gz" | gzip -d | tar -xf -
 ```
 
 Use it in:
@@ -38,12 +44,8 @@ Use it in:
 <script src="maplibre-gl.js"></script>
 <script src="versatiles-style.js"></script>
 <script>
-   const style = VersaTilesStyle.styles.graybeard({
-      tiles: ['/tiles/osm/{z}/{x}/{y}'],
-      sprite: '/assets/styles/swr-bright/sprite',
-      glyphs: '/assets/fonts/{fontstack}/{range}.pbf',
-      baseUrl: 'https://example.org/',
-      languageSuffix: '_de',
+   const style = VersaTilesStyle.graybeard({
+      language: 'de',
       colors: { label: '#222' },
       recolor: { gamma: 0.5 }
    });
@@ -55,7 +57,7 @@ Use it in:
 </script>
 ```
 
-# Create styles in the backend (Node.js)
+## Generating styles in the backend (Node.js)
 
 Install `@versatiles/style` via NPM:
 
@@ -66,111 +68,101 @@ npm install @versatiles/style
 Use it in Node.js:
 
 ```javascript
-import { styles } from '@versatiles/style';
-let style = styles.colorful({
-  languageSuffix: '_en',
+import { colorful } from '@versatiles/style';
+let style = colorful({
+  language: 'en',
 });
 writeFileSync('style.json', JSON.stringify(style));
 ```
 
-# API
-
-<!--- This chapter is generated automatically --->
-
-## Interfaces
-
-### Interface: `TileJSONSpecificationRaster`<a id="interface_tilejsonspecificationraster"></a>
-
-```typescript
-interface {
-  attribution?: string;
-  bounds?: [number, number, number, number];
-  center?: [number, number];
-  description?: string;
-  fillzoom?: number;
-  format: "avif" | "jpg" | "png" | "webp";
-  grids?: string[];
-  legend?: string;
-  maxzoom?: number;
-  minzoom?: number;
-  name?: string;
-  scheme?: "xyz" | "tms";
-  template?: string;
-  tilejson?: "3.0.0";
-  tiles: string[];
-  type: "raster";
-}
-```
+### Methods for generating styles
 
-### Interface: `TileJSONSpecificationVector`<a id="interface_tilejsonspecificationvector"></a>
-
-```typescript
-interface {
-  attribution?: string;
-  bounds?: [number, number, number, number];
-  center?: [number, number];
-  description?: string;
-  fillzoom?: number;
-  format: "pbf";
-  grids?: string[];
-  legend?: string;
-  maxzoom?: number;
-  minzoom?: number;
-  name?: string;
-  scheme?: "xyz" | "tms";
-  template?: string;
-  tilejson?: "3.0.0";
-  tiles: string[];
-  type: "vector";
-  vector_layers: VectorLayer[];
-}
-```
+This library provides:
+- `style = colorful(options);`
+- `style = eclipse(options);`
+- `style = graybeard(options);`
+- `style = neutrino(options);`
 
-## Type Aliases
+Where `options` is an optional object:
 
-### Type: `TileJSONSpecification`<a id="type_tilejsonspecification"></a>
+```javascript
+const options: StyleBuilderOptions<Colorful> = {
+	// 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;
 
-**Type:** <code>[TileJSONSpecificationRaster](#interface_tilejsonspecificationraster) | [TileJSONSpecificationVector](#interface_tilejsonspecificationvector)</code>
+	// The URL template for loading font glyphs, formatted with '{fontstack}' and '{range}' placeholders.
+	// Default: '/assets/glyphs/{fontstack}/{range}.pbf'
+	glyphs?: string;
 
-## Functions
+	// The URL for loading sprite images and metadata.
+	// Default: [{ id: 'basics', url: '/assets/sprites/basics/sprites' }]
+	sprite?: string | { id: string; url: string }[];
 
-### Method: `colorful(options)`
+	// An array of URL templates for loading map tiles, using '{z}', '{x}', and '{y}' placeholders.
+	// Default: ['/tiles/osm/{z}/{x}/{y}']
+	tiles?: string[];
 
-<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/be6dcfe/src/index.ts#L4">\[src]</a></sup>
+	// If set to true, hides all map labels.
+	// Default: false
+	hideLabels?: boolean;
 
-**Parameters:**
+	// 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;
 
-* <code>options: StylemakerOptions<default></code> (optional)
+	// An object specifying overrides for default color values, keyed by the color names.
+	colors?: Partial<StyleBuilderColorStrings<T>>;
 
-**Returns:** <code>MaplibreStyle</code>
+	// An object specifying overrides for default font names, keyed by the font names.
+	fonts?: Partial<StyleBuilderFontStrings<T>>;
 
-### Method: `graybeard(options)`
+	// Options for color adjustments and transformations applied to the entire style.
+	recolor?: RecolorOptions;
+}
 
-<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/be6dcfe/src/index.ts#L9">\[src]</a></sup>
+export interface RecolorOptions {
+	// If true, inverts all colors.
+	invertBrightness?: boolean;
 
-**Parameters:**
+	// Rotate the hue of all colors (in degrees).
+	rotate?: number;
 
-* <code>options: StylemakerOptions<default></code> (optional)
+	// Adjusts the saturation level of all colors. Positive values increase saturation, negative values decrease it.
+	saturate?: number;
 
-**Returns:** <code>MaplibreStyle</code>
+	// Adjusts the gamma of all colors. Affects the brightness in a non-linear manner.
+	gamma?: number;
 
-### Method: `guessStyle(opt)`
+	// Adjusts the contrast of all colors. Higher values produce more contrast.
+	contrast?: number;
 
-<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/be6dcfe/src/lib/style_guesser.ts#L13">\[src]</a></sup>
+	// Adjusts the brightness of all colors. Positive values make it brighter, negative values make it darker.
+	brightness?: number;
 
-**Parameters:**
+	// Specifies the intensity of the tinting effect. Ranges from 0 (no effect) to 1 (full effect).
+	tint?: number;
 
-* <code>opt: TileJSONOption</code>
+	// Specifies the color used for tinting, in a string format (e.g., '#FF0000').
+	tintColor?: string;
+}
+```
 
-**Returns:** <code>MaplibreStyle</code>
+### Method: `guessStyle(options)`
+
+```javascript
+const style = guessStyle(options);
+```
 
-### Method: `neutrino(options)`
 
-<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/be6dcfe/src/index.ts#L14">\[src]</a></sup>
+GuessStyleOptions
+
+<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/be6dcfe/src/lib/style_guesser.ts#L13">\[src]</a></sup>
 
 **Parameters:**
 
-* <code>options: StylemakerOptions<default></code> (optional)
+* <code>opt: TileJSONOption</code>
 
 **Returns:** <code>MaplibreStyle</code>
 
@@ -186,9 +178,7 @@ Please note that for building new sprites you need `optipng`.
 
 ## Configuration
 
-Iconsets can be defined in [`scripts/config-sprites.ts`](./scripts/config-sprites.ts);
-* `colors` are applied to each path in the order they appear in the source SVG.
-* `size` applies to the height
+Iconsets can be defined in [`scripts/config-sprites.ts`](./scripts/config-sprites.ts)
 
 # Licenses
 

package/dist/browser.d.ts

@@ -1,4 +1,4 @@
 export type * from './styles/index.js';
-export * as styles from './styles/index.js';
+export * from './styles/index.js';
 export type { GuessStyleOptions } from './guess_style/index.js';
 export { guessStyle } from './guess_style/index.js';

package/dist/browser.js

@@ -1,2 +1,2 @@
-export * as styles from './styles/index.js';
+export * from './styles/index.js';
 export { guessStyle } from './guess_style/index.js';

package/dist/guess_style/guess_style.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import { isTileJSONSpecification, isVectorLayers } from '../types/index.js';
 import { resolveUrl } from '../lib/utils.js';
 import randomColorGenerator from './random_color.js';
@@ -27,11 +26,11 @@ export function guessStyle(opt) {
     }
     let k;
     for (k in tilejsonBasic) {
-        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
         if (tilejsonBasic[k] === undefined)
             delete tilejsonBasic[k];
     }
     let tilejson;
+    let vectorLayers;
     switch (format) {
         case 'avif':
         case 'jpg':
@@ -40,7 +39,7 @@ export function guessStyle(opt) {
             tilejson = { ...tilejsonBasic, type: 'raster', format };
             break;
         case 'pbf':
-            const { vectorLayers } = opt;
+            vectorLayers = opt.vectorLayers;
             if (!isVectorLayers(vectorLayers))
                 throw Error('property vector_layers is invalid');
             tilejson = { ...tilejsonBasic, type: 'vector', format, vector_layers: vectorLayers };
@@ -95,7 +94,9 @@ export async function guessStyleFromContainer(container, options) {
             if (('vector_layers' in t) && Array.isArray(t.vector_layers))
                 vectorLayers = t.vector_layers;
         }
-        catch (e) { }
+        catch (error) {
+            console.log(error);
+        }
     }
     const guessStyleOptions = {
         ...options,
@@ -120,7 +121,6 @@ function isShortbread(spec) {
 }
 function getShortbreadStyle(spec, builderOption) {
     return colorful({
-        hideLabels: true,
         tiles: spec.tiles,
         baseUrl: builderOption.baseUrl,
         glyphs: builderOption.glyphs,

package/dist/guess_style/random_color.js

@@ -84,7 +84,6 @@ export default function randomColorGenerator(startSeed) {
         }
         if (typeof hue === 'string') {
             const color = colorDictionary[hue];
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             if (color?.hueRange)
                 return color.hueRange;
         }
@@ -132,7 +131,6 @@ export default function randomColorGenerator(startSeed) {
         defineColor('pink', [282, 334], [[20, 100], [30, 90], [40, 86], [60, 84], [80, 80], [90, 75], [100, 73]]);
         return dic;
     }
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     function HSVtoHSL(hsv) {
         const s = hsv[1] / 100, v = hsv[2] / 100, k = (2 - s) * v;
         return [hsv[0], 100 * s * v / (k < 1 ? k : 2 - k), 100 * k / 2];

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export type * from './styles/index.js';
-export * as styles from './styles/index.js';
+export * from './styles/index.js';
 export { guessStyle, guessStyleFromContainer } from './guess_style/index.js';
 export type { GuessStyleOptions, GuessContainerOptions } from './guess_style/index.js';
 export type { VectorLayer } from './types/index.js';

package/dist/index.js

@@ -1,2 +1,2 @@
-export * as styles from './styles/index.js';
+export * from './styles/index.js';
 export { guessStyle, guessStyleFromContainer } from './guess_style/index.js';

package/dist/lib/utils.d.ts

@@ -1,5 +1,6 @@
 export declare function deepClone<T>(obj: T): T;
-export declare function isSimpleObject(item: unknown): boolean;
-export declare function isBasicType(item: unknown): boolean;
-export declare function deepMerge<T extends object>(source0: T, ...sources: T[]): T;
+export declare function isSimpleObject(item: unknown): item is object;
+export declare function isBasicType(item: unknown): item is boolean | number | string | undefined;
+export declare function deepMerge<T extends object>(source0: T, ...sources: Partial<T>[]): T;
 export declare function resolveUrl(base: string, url: string): string;
+export declare function basename(url: string): string;

package/dist/lib/utils.js

@@ -63,7 +63,7 @@ export function deepMerge(source0, ...sources) {
         if (typeof source !== 'object')
             continue;
         for (const key in source) {
-            if (!Object.hasOwn(source, key))
+            if (!(key in source))
                 continue;
             const sourceValue = source[key];
             // *********
@@ -87,7 +87,6 @@ export function deepMerge(source0, ...sources) {
                 continue;
             }
             if (isSimpleObject(target[key]) && isSimpleObject(sourceValue)) {
-                // @ts-expect-error: Too complicated to handle
                 target[key] = deepMerge(target[key], sourceValue);
                 continue;
             }
@@ -95,7 +94,6 @@ export function deepMerge(source0, ...sources) {
             // merge
             // *********
             if (isSimpleObject(target[key]) && isSimpleObject(sourceValue)) {
-                // @ts-expect-error: Too complicated to handle
                 target[key] = deepMerge(target[key], sourceValue);
                 continue;
             }
@@ -107,10 +105,22 @@ export function deepMerge(source0, ...sources) {
     return target;
 }
 export function resolveUrl(base, url) {
-    if (!Boolean(base))
+    if (!base)
         return url;
     url = new URL(url, base).href;
     url = url.replace(/%7B/gi, '{');
     url = url.replace(/%7D/gi, '}');
     return url;
 }
+export function basename(url) {
+    if (!url)
+        return '';
+    try {
+        url = new URL(url, 'http://example.org').pathname;
+    }
+    catch (_) {
+        // ignore
+    }
+    url = url.replace(/\/+$/, '');
+    return url.split('/').pop() ?? '';
+}

package/dist/shortbread/layers.d.ts

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

package/dist/shortbread/layers.js

@@ -1,7 +1,6 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 export function getShortbreadLayers(option) {
-    const { languageSuffix } = option;
-    const nameField = languageSuffix ? '{name_' + languageSuffix + '}' : '{name}';
+    const { language } = option;
+    const nameField = language ? '{name_' + language + '}' : '{name}';
     return [
         // background
         { id: 'background', type: 'background' },

package/dist/shortbread/template.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 const maxzoom = 14;
 export function getShortbreadTemplate() {
     return {
@@ -8,8 +7,8 @@ export function getShortbreadTemplate() {
             'maputnik:renderer': 'mbgljs',
             license: 'https://creativecommons.org/publicdomain/zero/1.0/',
         },
-        glyphs: 'https://tiles.versatiles.org/fonts/{fontstack}/{range}.pbf',
-        sprite: 'https://tiles.versatiles.org/sprites/sprites',
+        glyphs: 'https://tiles.versatiles.org/assets/glyphs/{fontstack}/{range}.pbf',
+        sprite: [{ id: 'basics', url: 'https://tiles.versatiles.org/assets/sprites/basics/sprites' }],
         sources: {
             'versatiles-shortbread': {
                 tilejson: '3.0.0',

package/dist/style_builder/decorator.js

@@ -87,7 +87,6 @@ export function decorate(layers, rules, recolor) {
                         layer.paint[key] = value;
                         break;
                     default:
-                        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
                         throw new Error(`unknown parent "${propertyDef.parent}" for key "${key}"`);
                 }
             });

package/dist/style_builder/index.d.ts

@@ -1 +1 @@
-export type { LanguageSuffix } from './types.js';
+export type { Language } from './types.js';

package/dist/style_builder/recolor.d.ts

@@ -1,20 +1,12 @@
 import Color from 'color';
 export interface RecolorOptions {
-    /** If true, inverts the colors. */
     invertBrightness?: boolean;
-    /** The degree to rotate the hue of the color (in degrees). */
     rotate?: number;
-    /** Adjusts the saturation level of the color. Positive values increase saturation, negative values decrease it. */
     saturate?: number;
-    /** Adjusts the gamma of the color. Affects the brightness in a non-linear manner. */
     gamma?: number;
-    /** Adjusts the contrast of the color. Higher values produce more contrast. */
     contrast?: number;
-    /** Adjusts the brightness of the color. Positive values make it brighter, negative values make it darker. */
     brightness?: number;
-    /** Specifies the intensity of the tinting effect. Ranges from 0 (no effect) to 1 (full effect). */
     tint?: number;
-    /** Specifies the color used for tinting, in a string format (e.g., '#FF0000'). */
     tintColor?: string;
 }
 export declare function getDefaultRecolorFlags(): RecolorOptions;

package/dist/style_builder/style_builder.js

@@ -2,19 +2,18 @@ import Color from 'color';
 import { getShortbreadTemplate, getShortbreadLayers } from '../shortbread/index.js';
 import { decorate } from './decorator.js';
 import { CachedRecolor, getDefaultRecolorFlags } from './recolor.js';
-import { deepClone, resolveUrl } from '../lib/utils.js';
+import { basename, deepClone, resolveUrl } from '../lib/utils.js';
 // StyleBuilder class definition
 export default class StyleBuilder {
     #sourceName = 'versatiles-shortbread';
     build(options) {
         options ??= {};
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        const baseUrl = options.baseUrl ?? globalThis?.document?.location?.href ?? 'https://tiles.versatiles.org';
-        const glyphs = options.glyphs ?? '/assets/fonts/{fontstack}/{range}.pbf';
-        const sprite = options.sprite ?? '/assets/sprites/sprites';
+        const baseUrl = options.baseUrl ?? globalThis?.document?.location?.origin ?? 'https://tiles.versatiles.org';
+        const glyphs = options.glyphs ?? '/assets/glyphs/{fontstack}/{range}.pbf';
+        const sprite = options.sprite ?? [{ id: 'basics', url: '/assets/sprites/basics/sprites' }];
         const tiles = options.tiles ?? ['/tiles/osm/{z}/{x}/{y}'];
         const hideLabels = options.hideLabels ?? false;
-        const { languageSuffix } = options;
+        const language = options.language ?? null;
         const recolorOptions = options.recolor ?? getDefaultRecolorFlags();
         const colors = this.getColors(this.defaultColors);
         if (options.colors) {
@@ -34,12 +33,12 @@ export default class StyleBuilder {
         const styleRuleOptions = {
             colors,
             fonts,
-            languageSuffix,
+            language,
         };
         // get layer style rules from child class
         const layerStyleRules = this.getStyleRules(styleRuleOptions);
         // get shortbread layers
-        const layerDefinitions = getShortbreadLayers({ languageSuffix });
+        const layerDefinitions = getShortbreadLayers({ language });
         let layers = layerDefinitions.map(layer => {
             switch (layer.type) {
                 case 'background':
@@ -62,7 +61,12 @@ export default class StyleBuilder {
         style.layers = layers;
         style.name = 'versatiles-' + this.name.toLowerCase();
         style.glyphs = resolveUrl(baseUrl, glyphs);
-        style.sprite = resolveUrl(baseUrl, sprite);
+        if (typeof sprite == 'string') {
+            style.sprite = [{ id: basename(sprite), url: resolveUrl(baseUrl, sprite) }];
+        }
+        else {
+            style.sprite = sprite.map(({ id, url }) => ({ id, url: resolveUrl(baseUrl, url) }));
+        }
         const source = style.sources[this.#sourceName];
         if ('tiles' in source)
             source.tiles = tiles.map(url => resolveUrl(baseUrl, url));
@@ -81,7 +85,7 @@ export default class StyleBuilder {
             sprite: '',
             tiles: [],
             hideLabels: false,
-            languageSuffix: undefined,
+            language: undefined,
             colors: deepClone(this.defaultColors),
             fonts: deepClone(this.defaultFonts),
             recolor: getDefaultRecolorFlags(),

package/dist/style_builder/types.d.ts

@@ -2,25 +2,19 @@ import type Color from 'color';
 import type StyleBuilder from './style_builder.js';
 import type { RecolorOptions } from './recolor.js';
 /** Represents language suffixes used in map styles. */
-export type LanguageSuffix = 'de' | 'en' | undefined;
+export type Language = 'de' | 'en' | null;
 export interface StyleBuilderOptions<T extends StyleBuilder<T>> {
-    /** The base URL for loading external resources like tiles, sprites, and fonts. */
     baseUrl?: string;
-    /** The URL template for loading font glyphs, formatted with `{fontstack}` and `{range}` placeholders. */
     glyphs?: string;
-    /** The URL for loading sprite images and metadata. */
-    sprite?: string;
-    /** An array of URL templates for loading map tiles, with `{z}`, `{x}`, and `{y}` placeholders. */
+    sprite?: string | {
+        id: string;
+        url: string;
+    }[];
     tiles?: string[];
-    /** If true, hides all map labels. */
     hideLabels?: boolean;
-    /** Suffix to append to language-specific resources, such as `"-en"` for English. */
-    languageSuffix?: LanguageSuffix;
-    /** An object specifying overrides for default color values, keyed by the color names. */
+    language?: Language;
     colors?: Partial<StyleBuilderColorStrings<T>>;
-    /** An object specifying overrides for default font names, keyed by the font names. */
     fonts?: Partial<StyleBuilderFontStrings<T>>;
-    /** Options for color adjustments and transformations applied to the entire style. */
     recolor?: RecolorOptions;
 }
 /** Defines the keys for color properties in a style builder. */
@@ -39,7 +33,7 @@ export type StyleBuilderFonts<T extends StyleBuilder<T>> = Record<StyleBuilderFo
 export interface StyleRulesOptions<T extends StyleBuilder<T>> {
     colors: StyleBuilderColors<T>;
     fonts: StyleBuilderFontStrings<T>;
-    languageSuffix: LanguageSuffix;
+    language: Language;
 }
 /** Defines the value type for a style rule. */
 export type StyleRuleValue = boolean | number | object | string;

package/dist/styles/colorful.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import StyleBuilder from '../style_builder/style_builder.js';
 export default class Colorful extends StyleBuilder {
     name = 'Colorful';
@@ -145,6 +144,9 @@ export default class Colorful extends StyleBuilder {
                 color: colors.land,
                 opacity: { 12: 0, 13: 1 },
             },
+            'water-pier': {
+                color: colors.land,
+            },
             'water-river': {
                 lineWidth: { 9: 0, 10: 3, 15: 5, 17: 9, 18: 20, 20: 60 },
             },
@@ -217,7 +219,7 @@ export default class Colorful extends StyleBuilder {
                 color: colors.danger,
                 fillOutlineColor: colors.danger,
                 opacity: 0.3,
-                image: 'pattern-warning',
+                image: 'basics:pattern-warning',
             },
             'site-hospital': {
                 color: colors.hospital,
@@ -225,12 +227,12 @@ export default class Colorful extends StyleBuilder {
             },
             'site-prison': {
                 color: colors.prison,
-                image: 'pattern-striped',
+                image: 'basics:pattern-striped',
                 opacity: 0.1,
             },
             'site-construction': {
                 color: colors.construction,
-                image: 'pattern-hatched_thin',
+                image: 'basics:pattern-hatched_thin',
                 opacity: 0.1,
             },
             'site-{university,college,school}': {
@@ -650,7 +652,7 @@ export default class Colorful extends StyleBuilder {
             // markings
             'marking-oneway{-reverse,}': {
                 minzoom: 16,
-                image: 'marking-arrow',
+                image: 'basics:marking-arrow',
                 opacity: { 16: 0, 17: 0.7 },
                 font: fonts.regular,
             },
@@ -672,37 +674,37 @@ export default class Colorful extends StyleBuilder {
             },
             'symbol-transit-airport': {
                 minzoom: 12,
-                image: 'icon-airport',
+                image: 'basics:icon-airport',
                 iconSize: { 12: 0.5, 14: 1 },
             },
             'symbol-transit-airfield': {
                 minzoom: 13,
-                image: 'icon-airfield',
+                image: 'basics:icon-airfield',
                 iconSize: { 13: 0.5, 15: 1 },
             },
             'symbol-transit-station': {
                 minzoom: 13,
-                image: 'icon-rail',
+                image: 'basics:icon-rail',
                 iconSize: { 13: 0.5, 15: 1 },
             },
             'symbol-transit-lightrail': {
                 minzoom: 14,
-                image: 'icon-rail_light',
+                image: 'basics:icon-rail_light',
                 iconSize: { 14: 0.5, 16: 1 },
             },
             'symbol-transit-subway': {
                 minzoom: 14,
-                image: 'icon-rail_metro',
+                image: 'basics:icon-rail_metro',
                 iconSize: { 14: 0.5, 16: 1 },
             },
             'symbol-transit-tram': {
                 minzoom: 15,
-                image: 'transport-tram',
+                image: 'basics:transport-tram',
                 iconSize: { 15: 0.5, 17: 1 },
             },
             'symbol-transit-bus': {
                 minzoom: 16,
-                image: 'icon-bus',
+                image: 'basics:icon-bus',
                 iconSize: { 16: 0.5, 18: 1 },
             },
             // TODO: localized symbols? depends on shortbread
@@ -719,191 +721,191 @@ export default class Colorful extends StyleBuilder {
             'poi-amenity': {
                 image: ['match',
                     ['get', 'amenity'],
-                    'arts_centre', 'icon-art_gallery',
-                    'atm', 'icon-atm',
-                    'bank', 'icon-bank',
-                    'bar', 'icon-bar',
-                    'bench', 'icon-bench',
-                    'bicycle_rental', 'icon-bicycle_share',
-                    'biergarten', 'icon-beergarden',
-                    'cafe', 'icon-cafe',
-                    'car_rental', 'icon-car_rental',
-                    'car_sharing', 'icon-car_rental',
-                    'car_wash', 'icon-car_wash',
-                    'cinema', 'icon-cinema',
-                    //'clinic', 'icon-clinic',
-                    'college', 'icon-college',
-                    'community_centre', 'icon-community',
-                    //'courthouse', 'icon-courthouse',
-                    'dentist', 'icon-dentist',
-                    'doctors', 'icon-doctor',
-                    'dog_park', 'icon-dog_park',
-                    'drinking_water', 'icon-drinking_water',
-                    'embassy', 'icon-embassy',
-                    'fast_food', 'icon-fast_food',
-                    'fire_station', 'icon-fire_station',
-                    //'food_court', 'icon-food_court',
-                    'fountain', 'icon-fountain',
-                    'grave_yard', 'icon-cemetery',
-                    'hospital', 'icon-hospital',
-                    'hunting_stand', 'icon-huntingstand',
-                    'library', 'icon-library',
-                    'marketplace', 'icon-marketplace',
-                    'nightclub', 'icon-nightclub',
-                    'nursing_home', 'icon-nursinghome',
-                    'pharmacy', 'icon-pharmacy',
-                    'place_of_worship', 'icon-place_of_worship',
-                    'playground', 'icon-playground',
-                    'police', 'icon-police',
-                    'post_box', 'icon-postbox',
-                    'post_office', 'icon-post',
-                    'prison', 'icon-prison',
-                    'pub', 'icon-beer',
-                    //'public_building', 'icon-public_building',
-                    'recycling', 'icon-recycling',
-                    'restaurant', 'icon-restaurant',
-                    'school', 'icon-school',
-                    'shelter', 'icon-shelter',
-                    'telephone', 'icon-telephone',
-                    'theatre', 'icon-theatre',
-                    'toilets', 'icon-toilet',
-                    'townhall', 'icon-town_hall',
-                    //'university', 'icon-university',
-                    'vending_machine', 'icon-vendingmachine',
-                    'veterinary', 'icon-veterinary',
-                    'waste_basket', 'icon-waste_basket',
-                    'unknown',
+                    'arts_centre', 'basics:icon-art_gallery',
+                    'atm', 'basics:icon-atm',
+                    'bank', 'basics:icon-bank',
+                    'bar', 'basics:icon-bar',
+                    'bench', 'basics:icon-bench',
+                    'bicycle_rental', 'basics:icon-bicycle_share',
+                    'biergarten', 'basics:icon-beergarden',
+                    'cafe', 'basics:icon-cafe',
+                    'car_rental', 'basics:icon-car_rental',
+                    'car_sharing', 'basics:icon-car_rental',
+                    'car_wash', 'basics:icon-car_wash',
+                    'cinema', 'basics:icon-cinema',
+                    //'clinic', 'basics:icon-clinic',
+                    'college', 'basics:icon-college',
+                    'community_centre', 'basics:icon-community',
+                    //'courthouse', 'basics:icon-courthouse',
+                    'dentist', 'basics:icon-dentist',
+                    'doctors', 'basics:icon-doctor',
+                    'dog_park', 'basics:icon-dog_park',
+                    'drinking_water', 'basics:icon-drinking_water',
+                    'embassy', 'basics:icon-embassy',
+                    'fast_food', 'basics:icon-fast_food',
+                    'fire_station', 'basics:icon-fire_station',
+                    //'food_court', 'basics:icon-food_court',
+                    'fountain', 'basics:icon-fountain',
+                    'grave_yard', 'basics:icon-cemetery',
+                    'hospital', 'basics:icon-hospital',
+                    'hunting_stand', 'basics:icon-huntingstand',
+                    'library', 'basics:icon-library',
+                    'marketplace', 'basics:icon-marketplace',
+                    'nightclub', 'basics:icon-nightclub',
+                    'nursing_home', 'basics:icon-nursinghome',
+                    'pharmacy', 'basics:icon-pharmacy',
+                    'place_of_worship', 'basics:icon-place_of_worship',
+                    'playground', 'basics:icon-playground',
+                    'police', 'basics:icon-police',
+                    'post_box', 'basics:icon-postbox',
+                    'post_office', 'basics:icon-post',
+                    'prison', 'basics:icon-prison',
+                    'pub', 'basics:icon-beer',
+                    //'public_building', 'basics:icon-public_building',
+                    'recycling', 'basics:icon-recycling',
+                    'restaurant', 'basics:icon-restaurant',
+                    'school', 'basics:icon-school',
+                    'shelter', 'basics:icon-shelter',
+                    'telephone', 'basics:icon-telephone',
+                    'theatre', 'basics:icon-theatre',
+                    'toilets', 'basics:icon-toilet',
+                    'townhall', 'basics:icon-town_hall',
+                    //'university', 'basics:icon-university',
+                    'vending_machine', 'basics:icon-vendingmachine',
+                    'veterinary', 'basics:icon-veterinary',
+                    'waste_basket', 'basics:icon-waste_basket',
+                    '',
                 ],
             },
             'poi-leisure': {
                 image: ['match',
                     ['get', 'leisure'],
-                    'golf_course', 'icon-golf',
-                    'ice_rink', 'icon-icerink',
-                    'pitch', 'icon-pitch',
-                    //'sports_centre', 'icon-sports_centre',
-                    'stadium', 'icon-stadium',
-                    'swimming_pool', 'icon-swimming',
-                    'water_park', 'icon-waterpark',
-                    'icon-sports',
+                    'golf_course', 'basics:icon-golf',
+                    'ice_rink', 'basics:icon-icerink',
+                    'pitch', 'basics:icon-pitch',
+                    //'sports_centre', 'basics:icon-sports_centre',
+                    'stadium', 'basics:icon-stadium',
+                    'swimming_pool', 'basics:icon-swimming',
+                    'water_park', 'basics:icon-waterpark',
+                    'basics:icon-sports',
                 ],
             },
             'poi-tourism': {
                 image: ['match',
                     ['get', 'tourism'],
-                    //'alpine_hut', 'icon-alpine_hut',
-                    //'bed_and_breakfast', 'icon-bed_and_breakfast',
-                    //'camp_site', 'icon-camp_site',
-                    //'caravan_site', 'icon-caravan_site',
-                    'chalet', 'icon-chalet',
-                    //'guest_house', 'icon-guest_house',
-                    //'hostel', 'icon-hostel',
-                    //'hotel', 'icon-hotel',
-                    'information', 'transport-information',
-                    //'motel', 'icon-motel',
-                    'picnic_site', 'icon-picnic_site',
-                    //'theme_park', 'icon-theme_park',
-                    'viewpoint', 'icon-viewpoint',
-                    'zoo', 'icon-zoo',
-                    'unknown',
+                    //'alpine_hut', 'basics:icon-alpine_hut',
+                    //'bed_and_breakfast', 'basics:icon-bed_and_breakfast',
+                    //'camp_site', 'basics:icon-camp_site',
+                    //'caravan_site', 'basics:icon-caravan_site',
+                    'chalet', 'basics:icon-chalet',
+                    //'guest_house', 'basics:icon-guest_house',
+                    //'hostel', 'basics:icon-hostel',
+                    //'hotel', 'basics:icon-hotel',
+                    'information', 'basics:transport-information',
+                    //'motel', 'basics:icon-motel',
+                    'picnic_site', 'basics:icon-picnic_site',
+                    //'theme_park', 'basics:icon-theme_park',
+                    'viewpoint', 'basics:icon-viewpoint',
+                    'zoo', 'basics:icon-zoo',
+                    '',
                 ],
             },
             'poi-shop': {
                 image: ['match',
                     ['get', 'shop'],
-                    'alcohol', 'icon-alcohol_shop',
-                    'bakery', 'icon-bakery',
-                    'beauty', 'icon-beauty',
-                    'beverages', 'icon-beverages',
-                    //'bicycle', 'icon-bicycle',
-                    'books', 'icon-books',
-                    'butcher', 'icon-butcher',
-                    //'car', 'icon-car',
-                    'chemist', 'icon-chemist',
-                    'clothes', 'icon-clothes',
-                    //'computer', 'icon-computer',
-                    //'convinience', 'icon-convinience',
-                    //'department_store', 'icon-department_store',
-                    'doityourself', 'icon-doityourself',
-                    'dry_cleaning', 'icon-drycleaning',
-                    'florist', 'icon-florist',
-                    'furniture', 'icon-furniture',
-                    'garden_centre', 'icon-garden_centre',
-                    'general', 'icon-shop',
-                    'gift', 'icon-gift',
-                    'greengrocer', 'icon-greengrocer',
-                    'hairdresser', 'icon-hairdresser',
-                    'hardware', 'icon-hardware',
-                    'jewelry', 'icon-jewelry_store',
-                    'kiosk', 'icon-kiosk',
-                    'laundry', 'icon-laundry',
-                    //'mall', 'icon-mall',
-                    //'mobile_phone', 'icon-mobile_phone',
-                    'newsagent', 'icon-newsagent',
-                    'optican', 'icon-optician',
-                    'outdoor', 'icon-outdoor',
-                    'shoes', 'icon-shoes',
-                    'sports', 'icon-sports',
-                    'stationery', 'icon-stationery',
-                    //'supermarket', 'icon-supermarket',
-                    'toys', 'icon-toys',
-                    'travel_agency', 'icon-travel_agent',
-                    'video', 'icon-video',
-                    'icon-shop',
+                    'alcohol', 'basics:icon-alcohol_shop',
+                    'bakery', 'basics:icon-bakery',
+                    'beauty', 'basics:icon-beauty',
+                    'beverages', 'basics:icon-beverages',
+                    //'bicycle', 'basics:icon-bicycle',
+                    'books', 'basics:icon-books',
+                    'butcher', 'basics:icon-butcher',
+                    //'car', 'basics:icon-car',
+                    'chemist', 'basics:icon-chemist',
+                    'clothes', 'basics:icon-clothes',
+                    //'computer', 'basics:icon-computer',
+                    //'convinience', 'basics:icon-convinience',
+                    //'department_store', 'basics:icon-department_store',
+                    'doityourself', 'basics:icon-doityourself',
+                    'dry_cleaning', 'basics:icon-drycleaning',
+                    'florist', 'basics:icon-florist',
+                    'furniture', 'basics:icon-furniture',
+                    'garden_centre', 'basics:icon-garden_centre',
+                    'general', 'basics:icon-shop',
+                    'gift', 'basics:icon-gift',
+                    'greengrocer', 'basics:icon-greengrocer',
+                    'hairdresser', 'basics:icon-hairdresser',
+                    'hardware', 'basics:icon-hardware',
+                    'jewelry', 'basics:icon-jewelry_store',
+                    'kiosk', 'basics:icon-kiosk',
+                    'laundry', 'basics:icon-laundry',
+                    //'mall', 'basics:icon-mall',
+                    //'mobile_phone', 'basics:icon-mobile_phone',
+                    'newsagent', 'basics:icon-newsagent',
+                    'optican', 'basics:icon-optician',
+                    'outdoor', 'basics:icon-outdoor',
+                    'shoes', 'basics:icon-shoes',
+                    'sports', 'basics:icon-sports',
+                    'stationery', 'basics:icon-stationery',
+                    //'supermarket', 'basics:icon-supermarket',
+                    'toys', 'basics:icon-toys',
+                    'travel_agency', 'basics:icon-travel_agent',
+                    'video', 'basics:icon-video',
+                    'basics:icon-shop',
                 ],
             },
             'poi-man_made': {
                 image: ['match',
                     ['get', 'man_made'],
-                    'lighthouse', 'icon-lighthouse',
-                    'surveillance', 'icon-surveillance',
-                    'tower', 'icon-observation_tower',
-                    //'wastewater_plant', 'icon-wastewater_plant',
-                    //'water_well', 'icon-water_well',
-                    //'water_works', 'icon-water_works',
-                    'watermill', 'icon-watermill',
-                    'windmill', 'icon-windmill',
-                    'unknown',
+                    'lighthouse', 'basics:icon-lighthouse',
+                    'surveillance', 'basics:icon-surveillance',
+                    'tower', 'basics:icon-observation_tower',
+                    //'wastewater_plant', 'basics:icon-wastewater_plant',
+                    //'water_well', 'basics:icon-water_well',
+                    //'water_works', 'basics:icon-water_works',
+                    'watermill', 'basics:icon-watermill',
+                    'windmill', 'basics:icon-windmill',
+                    '',
                 ],
             },
             'poi-historic': {
                 image: ['match',
                     ['get', 'historic'],
-                    //'archaelogical_site', 'icon-archaelogical_site',
-                    'artwork', 'icon-artwork',
-                    //'battlefield', 'icon-battlefield',
-                    'castle', 'icon-castle',
-                    //'fort', 'icon-fort',
-                    //'memorial', 'icon-memorial',
-                    'monument', 'icon-monument',
-                    //'ruins', 'icon-ruins',
-                    //'wayside_cross', 'icon-wayside_cross',
-                    'wayside_shrine', 'icon-shrine',
-                    'icon-historic',
+                    //'archaelogical_site', 'basics:icon-archaelogical_site',
+                    'artwork', 'basics:icon-artwork',
+                    //'battlefield', 'basics:icon-battlefield',
+                    'castle', 'basics:icon-castle',
+                    //'fort', 'basics:icon-fort',
+                    //'memorial', 'basics:icon-memorial',
+                    'monument', 'basics:icon-monument',
+                    //'ruins', 'basics:icon-ruins',
+                    //'wayside_cross', 'basics:icon-wayside_cross',
+                    'wayside_shrine', 'basics:icon-shrine',
+                    'basics:icon-historic',
                 ],
             },
             'poi-emergency': {
                 image: ['match',
                     ['get', 'emergency'],
-                    'defibrillator', 'icon-defibrillator',
-                    'fire_hydrant', 'icon-hydrant',
-                    'phone', 'icon-emergency_phone',
-                    'unknown',
+                    'defibrillator', 'basics:icon-defibrillator',
+                    'fire_hydrant', 'basics:icon-hydrant',
+                    'phone', 'basics:icon-emergency_phone',
+                    '',
                 ],
             },
             /*
             'poi-highway': {
                 image: ['match',
                     ['get', 'highway'],
-                    //'emergency_access_point', 'icon-emergency_access_point',
-                    'unknown'
+                    //'emergency_access_point', 'basics:icon-emergency_access_point',
+                    ''
                 ]
             },
             'poi-office': {
                 image: ['match',
                     ['get', 'office'],
-                    //'diplomatic', 'icon-diplomatic',
-                    'unknown'
+                    //'diplomatic', 'basics:icon-diplomatic',
+                    ''
                 ]
             },
             */

package/dist/styles/neutrino.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import StyleBuilder from '../style_builder/style_builder.js';
 export default class Neutrino extends StyleBuilder {
     name = 'Neutrino';
@@ -77,6 +76,9 @@ export default class Neutrino extends StyleBuilder {
                 color: colors.land,
                 opacity: { 12: 0, 13: 1 },
             },
+            'water-pier': {
+                color: colors.land,
+            },
             'land-*': {
                 color: colors.land,
             },

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@versatiles/style",
-  "version": "4.4.1",
+  "version": "5.0.0",
   "description": "Generate StyleJSON for MapLibre",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "check": "npm run lint && npm run build && npm run test",
+    "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-browser": "rollup -c=rollup.config.js; $(cd release/versatiles-style; tar -cf - versatiles-style.* | gzip -9 > ../versatiles-style.tar.gz); rm -rf release/versatiles-style",
+    "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": "????",
+    "dev": "tsx scripts/dev.ts",
     "// doc": "vrt ts2md src/index.ts tsconfig.node.json | vrt insertmd README.md '# API'",
     "lint": "eslint --color .",
     "prepack": "npm run build",
@@ -29,7 +29,7 @@
   "license": "MIT",
   "type": "module",
   "dependencies": {
-    "@types/color": "^3.0.6",
+    "@types/color": "^4.2.0",
     "brace-expansion": "^4.0.0",
     "color": "^4.2.3"
   },
@@ -38,35 +38,36 @@
     "dist/**/*.d.ts"
   ],
   "devDependencies": {
-    "@maplibre/maplibre-gl-style-spec": "^20.3.0",
-    "@rollup/plugin-commonjs": "^26.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@maplibre/maplibre-gl-style-spec": "^21.2.0",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-typescript": "^12.1.1",
     "@types/bin-pack": "^1.0.3",
     "@types/brace-expansion": "^1.1.2",
     "@types/inquirer": "^9.0.7",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.2",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.9.0",
     "@types/tar-stream": "^3.1.3",
-    "@typescript-eslint/eslint-plugin": "^7.12.0",
-    "@typescript-eslint/parser": "^7.12.0",
-    "@versatiles/container": "^1.2.1",
-    "@versatiles/release-tool": "^1.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.14.0",
+    "@typescript-eslint/parser": "^8.14.0",
+    "@versatiles/container": "^1.2.3",
+    "@versatiles/release-tool": "^1.2.6",
     "bin-pack": "^1.0.2",
-    "eslint": "^8.56.0",
-    "inquirer": "^9.2.23",
+    "eslint": "^9.14.0",
+    "inquirer": "^12.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-ts-webcompat-resolver": "^1.0.0",
-    "npm-check-updates": "^16.14.20",
-    "rollup": "^4.18.0",
+    "npm-check-updates": "^17.1.11",
+    "rollup": "^4.26.0",
     "rollup-plugin-dts": "^6.1.1",
-    "sharp": "^0.33.4",
+    "sharp": "^0.33.5",
     "tar-stream": "^3.1.7",
-    "ts-jest": "^29.1.4",
+    "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
-    "tsx": "^4.12.0",
-    "typescript": "^5.4.5"
+    "tsx": "^4.19.2",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.14.0"
   }
 }