@versatiles/style 3.5.2 → 3.6.0

package/README.MD

@@ -7,20 +7,20 @@ Programatically generates StyleJSON for MapLibre.
 
 ![Example: Colorful Style](docs/colorful.png)
 
-## Styles
+# Styles
 
 * Colorful - colorful, full featured map
 * Neutrino - light basemap
 * Graybeard - gray basemap
 
-## Download
+# Download styles for versatiles.org
 
 You can download the latest StyleJSONs from the [latest release](https://github.com/versatiles-org/versatiles-style/releases/latest/).
 We provide each style with and without labels, and also in multiple languages.
 
 Be aware that styles already include `tiles.versatiles.org` as source for tiles, fonts (glyphs) and icons (sprites). So you might want to update the URLs in the JSON.
 
-## in a web browser
+# Create styles in the frontend (web browser)
 
 Download latest release:
 
@@ -35,19 +35,17 @@ Use it in:
 <script src="maplibre-gl.js"></script>
 <script src="versatiles-style.js"></script>
 <script>
-	const baseUrl = new URL('/', window.location.href).href;
+	const styleBuilder = new VersaTilesStyle.Colorful();
+  styleBuilder.tilesUrl = ['tiles/{z}/{x}/{y}'];
+
 	const map = new maplibregl.Map({
 		container: 'map',
-		style: versatiles_style.colorful({
-			glyphsUrl: baseUrl + 'fonts/{fontstack}/{range}.pbf',
-			spriteUrl: baseUrl + 'sprites/sprites',
-			tilesUrl: [baseUrl + 'tiles/{z}/{x}/{y}'],
-		})
+		style: styleBuilder.build()
 	});
 <script>
 ```
 
-## as Node.js module
+# Create styles in the backend (Node.js)
 
 Install `versatiles-style` via NPM:
 
@@ -58,11 +56,109 @@ npm install versatiles-style
 Use it in Node.js:
 
 ```javascript
-import { colorful } from 'versatiles-style';
-let style = colorful({language:'de'});
-writeFileSync('style.json', JSON.stringify(style));
+import { Colorful } from 'versatiles-style';
+let style = new Colorful();
+style.language = 'de';
+writeFileSync('style.json', JSON.stringify(style.build()));
 ```
 
-### Node.js API
+# 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";
+}
+```
+
+### 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[];
+}
+```
+
+## Type Aliases
+
+### Type: `TileJSONSpecification`<a id="type_tilejsonspecification"></a>
+
+**Type:** <code>[TileJSONSpecificationRaster](#interface_tilejsonspecificationraster) | [TileJSONSpecificationVector](#interface_tilejsonspecificationvector)</code>
+
+## Functions
+
+### Method: `colorful(options)`
+
+<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/6f93c18/src/index.ts#L4">\[src]</a></sup>
+
+**Parameters:**
+
+* <code>options: StylemakerOptions<default></code> (optional)
+
+**Returns:** <code>MaplibreStyle</code>
+
+### Method: `graybeard(options)`
+
+<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/6f93c18/src/index.ts#L9">\[src]</a></sup>
+
+**Parameters:**
+
+* <code>options: StylemakerOptions<default></code> (optional)
+
+**Returns:** <code>MaplibreStyle</code>
+
+### Method: `guessStyle(spec)`
+
+<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/6f93c18/src/lib/style_guesser.ts#L12">\[src]</a></sup>
+
+**Parameters:**
+
+* <code>spec: [TileJSONSpecification](#type_tilejsonspecification)</code>
+
+**Returns:** <code>MaplibreStyle</code>
+
+### Method: `neutrino(options)`
+
+<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/6f93c18/src/index.ts#L14">\[src]</a></sup>
+
+**Parameters:**
+
+* <code>options: StylemakerOptions<default></code> (optional)
+
+**Returns:** <code>MaplibreStyle</code>

package/dist/index.d.ts

@@ -1,4 +1,9 @@
-export type { MaplibreStyle } from './lib/types.js';
-export { default as Colorful } from './style/colorful.js';
-export { default as Graybeard } from './style/graybeard.js';
-export { default as Neutrino } from './style/neutrino.js';
+import type { MaplibreStyle, StylemakerOptions } from './lib/types.js';
+import Colorful from './style/colorful.js';
+export declare function colorful(options?: StylemakerOptions<Colorful>): MaplibreStyle;
+import Graybeard from './style/graybeard.js';
+export declare function graybeard(options?: StylemakerOptions<Graybeard>): MaplibreStyle;
+import Neutrino from './style/neutrino.js';
+export declare function neutrino(options?: StylemakerOptions<Neutrino>): MaplibreStyle;
+export type { TileJSONSpecification, TileJSONSpecificationRaster, TileJSONSpecificationVector } from './lib/types.js';
+export { default as guessStyle } from './lib/style_guesser.js';

package/dist/index.js

@@ -1,3 +1,13 @@
-export { default as Colorful } from './style/colorful.js';
-export { default as Graybeard } from './style/graybeard.js';
-export { default as Neutrino } from './style/neutrino.js';
+import Colorful from './style/colorful.js';
+export function colorful(options) {
+    return new Colorful().build(options);
+}
+import Graybeard from './style/graybeard.js';
+export function graybeard(options) {
+    return new Graybeard().build(options);
+}
+import Neutrino from './style/neutrino.js';
+export function neutrino(options) {
+    return new Neutrino().build(options);
+}
+export { default as guessStyle } from './lib/style_guesser.js';

package/dist/index.test.js

@@ -1,26 +1,17 @@
-import { Colorful } from './index.js';
-import * as builderClasses from './index.js';
-import StyleBuilder from './lib/style_builder.js';
+/* eslint-disable @typescript-eslint/naming-convention */
+import * as builders from './index.js';
 describe('Style Builders', () => {
-    const styleNames = [
-        'Colorful',
-        'Graybeard',
-        'Neutrino',
+    const styles = [
+        { name: 'Colorful', builder: builders.colorful },
+        { name: 'Graybeard', builder: builders.graybeard },
+        { name: 'Neutrino', builder: builders.neutrino },
     ];
-    it(`should have the correct ${styleNames.length} styles`, () => {
-        const keys1 = Array.from(Object.keys(builderClasses)).sort();
-        const keys2 = styleNames.sort();
-        expect(keys1).toEqual(keys2);
-    });
-    Object.entries(builderClasses).forEach(([styleName, builderClass]) => {
-        it(`should create and test an instance of ${styleName}`, () => {
-            const builder = new builderClass();
-            expect(builder).toBeInstanceOf(StyleBuilder);
-            expect(typeof builder.name).toBe('string');
-            builder.baseUrl = 'https://example.org';
-            const style = builder.build();
+    styles.forEach(({ name, builder }) => {
+        it(`should create and test an instance of ${name}`, () => {
+            expect(typeof builder).toBe('function');
+            const style = builder({ baseUrl: 'https://example.org' });
             expect(JSON.stringify(style).length).toBeGreaterThan(50000);
-            expect(style.name).toBe('versatiles-' + styleName.toLowerCase());
+            expect(style.name).toBe('versatiles-' + name.toLowerCase());
             expect(style.glyphs).toBe('https://example.org/assets/fonts/{fontstack}/{range}.pbf');
             expect(style.sprite).toBe('https://example.org/assets/sprites/sprites');
             expect(Object.keys(style.sources).join(',')).toBe('versatiles-shortbread');
@@ -29,9 +20,44 @@ describe('Style Builders', () => {
     });
 });
 describe('Colorful', () => {
-    const colorful = new Colorful();
-    colorful.baseUrl = 'https://dev.null';
-    colorful.colors.commercial = '#f00';
-    const style = colorful.build();
+    const style = builders.colorful({
+        baseUrl: 'https://dev.null',
+        colors: { commercial: '#f00' },
+    });
     expect(style.glyphs).toBe('https://dev.null/assets/fonts/{fontstack}/{range}.pbf');
+    const paint = style.layers.find(l => l.id === 'land-commercial')?.paint;
+    expect(paint).toBeDefined();
+    if (paint == null)
+        throw Error();
+    expect(paint).toHaveProperty('fill-color');
+    if (!('fill-color' in paint))
+        throw Error();
+    expect(paint['fill-color']).toBe('#ff0000');
+});
+describe('guessStyle', () => {
+    it('should build raster styles', () => {
+        const style = builders.guessStyle({
+            type: 'raster',
+            tiles: [],
+            format: 'avif',
+        });
+        expect(style).toStrictEqual({
+            layers: [{ id: 'raster', source: 'rasterSource', type: 'raster' }],
+            sources: { rasterSource: { format: 'avif', tilejson: '3.0.0', tiles: [], type: 'raster' } },
+            version: 8,
+        });
+    });
+    it('should build vector styles', () => {
+        const style = builders.guessStyle({
+            type: 'vector',
+            tiles: [],
+            format: 'pbf',
+            vector_layers: [],
+        });
+        expect(style).toStrictEqual({
+            layers: [{ id: 'background', paint: { 'background-color': '#fff' }, type: 'background' }],
+            sources: { vectorSource: { format: 'pbf', tilejson: '3.0.0', tiles: [], type: 'vector', 'vector_layers': [] } },
+            'version': 8,
+        });
+    });
 });

package/dist/lib/decorator.js

@@ -9,6 +9,8 @@ export function decorate(layers, rules) {
     const layerStyles = new Map();
     // Iterate through the generated layer style rules
     Object.entries(rules).forEach(([idDef, layerStyle]) => {
+        if (layerStyle == null)
+            return;
         // Expand any braces in IDs and filter them through a RegExp if necessary
         const ids = expandBraces(idDef).flatMap(id => {
             if (!id.includes('*'))
@@ -41,6 +43,8 @@ export function decorate(layers, rules) {
 // Function to process each style attribute for the layer
 function processStyling(layer, styleRule) {
     for (const [ruleKeyCamelCase, ruleValue] of Object.entries(styleRule)) {
+        if (ruleValue == null)
+            continue;
         // CamelCase to not-camel-case
         const ruleKey = ruleKeyCamelCase.replace(/[A-Z]/g, c => '-' + c.toLowerCase());
         const propertyDefs = maplibreProperties.get(layer.type + '/' + ruleKey);

package/dist/lib/random_color.d.ts

@@ -0,0 +1,9 @@
+export interface RandomColorOptions {
+    seed?: string;
+    hue?: number | string;
+    opacity?: number;
+    luminosity?: number | string;
+    saturation?: number | string;
+}
+export type RandomColorFunction = (options?: RandomColorOptions) => string;
+export default function randomColorGenerator(startSeed?: number | string): RandomColorFunction;

package/dist/lib/random_color.js

@@ -0,0 +1,150 @@
+export default function randomColorGenerator(startSeed) {
+    let seed = inputToSeed(startSeed);
+    const colorDictionary = initColorDictionary();
+    return randomColor;
+    function randomColor(options) {
+        options ??= {};
+        if (options.seed != null) {
+            seed = inputToSeed(options.seed);
+        }
+        options.opacity ??= 1;
+        const H = pickHue(options);
+        const S = pickSaturation(H, options);
+        const V = pickBrightness(H, S, options);
+        const hsl = HSVtoHSL([H, S, V]).map(v => v.toFixed(0));
+        if (options.opacity === 1) {
+            return `hsl(${hsl[0]},${hsl[1]}%,${hsl[2]}%)`;
+        }
+        else {
+            return `hsla(${hsl[0]},${hsl[1]}%,${hsl[2]}%,${options.opacity})`;
+        }
+    }
+    function pickHue(options) {
+        let hue = randomWithin(getHueRange(options.hue));
+        if (hue < 0)
+            hue = 360 + hue;
+        return hue;
+    }
+    function pickSaturation(hue, options) {
+        if (options.hue === 'monochrome')
+            return 0;
+        if (options.luminosity === 'random')
+            return randomWithin([0, 100]);
+        const { saturationRange } = getColorInfo(hue);
+        let [sMin, sMax] = saturationRange;
+        if (options.saturation === 'strong')
+            return sMax;
+        switch (options.luminosity) {
+            case 'bright':
+                sMin = 55;
+                break;
+            case 'dark':
+                sMin = sMax - 10;
+                break;
+            case 'light':
+                sMax = 55;
+                break;
+            default:
+        }
+        return randomWithin([sMin, sMax]);
+    }
+    function pickBrightness(h, s, options) {
+        let bMin = getMinimumBrightness(h, s), bMax = 100;
+        switch (options.luminosity) {
+            case 'dark':
+                bMax = Math.min(100, bMin + 20);
+                break;
+            case 'light':
+                bMin = (bMax + bMin) / 2;
+                break;
+            case 'random':
+                bMin = 0;
+                bMax = 100;
+                break;
+            default:
+        }
+        return randomWithin([bMin, bMax]);
+    }
+    function getMinimumBrightness(h, s) {
+        const { lowerBounds } = getColorInfo(h);
+        for (let i = 0; i < lowerBounds.length - 1; i++) {
+            const [s1, v1] = lowerBounds[i];
+            const [s2, v2] = lowerBounds[i + 1];
+            if (s >= s1 && s <= s2) {
+                const m = (v2 - v1) / (s2 - s1), b = v1 - m * s1;
+                return m * s + b;
+            }
+        }
+        return 0;
+    }
+    function getHueRange(hue) {
+        if (typeof hue === 'number') {
+            if (hue < 360 && hue > 0)
+                return [hue, hue];
+        }
+        if (typeof hue === 'string') {
+            const color = colorDictionary[hue];
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            if (color?.hueRange)
+                return color.hueRange;
+        }
+        return [0, 360];
+    }
+    function getColorInfo(hue) {
+        // Maps red colors to make picking hue easier
+        if (hue >= 334 && hue <= 360)
+            hue -= 360;
+        for (const colorName in colorDictionary) {
+            const color = colorDictionary[colorName];
+            if (color.hueRange && hue >= color.hueRange[0] && hue <= color.hueRange[1]) {
+                return colorDictionary[colorName];
+            }
+        }
+        throw Error('Color not found');
+    }
+    function randomWithin(range) {
+        //Seeded random algorithm from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
+        const max = range[1] || 1;
+        const min = range[0] || 0;
+        seed = (seed * 9301 + 49297) % 233280;
+        const rnd = seed / 233280.0;
+        return Math.floor(min + rnd * (max - min));
+    }
+    function initColorDictionary() {
+        const dic = {};
+        const defineColor = (name, hueRange, lowerBounds) => {
+            const [greyest] = lowerBounds;
+            const colorful = lowerBounds[lowerBounds.length - 1];
+            dic[name] = {
+                hueRange,
+                lowerBounds,
+                saturationRange: [greyest[0], colorful[0]],
+                brightnessRange: [colorful[1], greyest[1]],
+            };
+        };
+        defineColor('monochrome', null, [[0, 0], [100, 0]]);
+        defineColor('red', [-26, 18], [[20, 100], [30, 92], [40, 89], [50, 85], [60, 78], [70, 70], [80, 60], [90, 55], [100, 50]]);
+        defineColor('orange', [18, 46], [[20, 100], [30, 93], [40, 88], [50, 86], [60, 85], [70, 70], [100, 70]]);
+        defineColor('yellow', [46, 62], [[25, 100], [40, 94], [50, 89], [60, 86], [70, 84], [80, 82], [90, 80], [100, 75]]);
+        defineColor('green', [62, 178], [[30, 100], [40, 90], [50, 85], [60, 81], [70, 74], [80, 64], [90, 50], [100, 40]]);
+        defineColor('blue', [178, 257], [[20, 100], [30, 86], [40, 80], [50, 74], [60, 60], [70, 52], [80, 44], [90, 39], [100, 35]]);
+        defineColor('purple', [257, 282], [[20, 100], [30, 87], [40, 79], [50, 70], [60, 65], [70, 59], [80, 52], [90, 45], [100, 42]]);
+        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];
+    }
+    function inputToSeed(input) {
+        if (input == null)
+            return 0;
+        if (typeof input === 'number')
+            return input;
+        let i = 0;
+        for (let p = 0; p < input.length; p++)
+            i = (i * 0x101 + input.charCodeAt(p)) % 0x100000000;
+        return i;
+    }
+}

package/dist/lib/random_color.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/random_color.test.js

@@ -0,0 +1,68 @@
+import randomColorGenerator from './random_color.js';
+describe('RandomColor', () => {
+    let randomColor;
+    beforeEach(() => {
+        randomColor = randomColorGenerator();
+    });
+    test('constructor initializes without errors', () => {
+        expect(randomColor).toBeDefined();
+    });
+    describe('randomColor method', () => {
+        test('returns a valid color string', () => {
+            const color = randomColor();
+            expect(isValidHSLA(color)).toBeTruthy();
+        });
+        test('returns correct color string for some test cases', () => {
+            expect(randomColor({ hue: 'red' })).toBe('hsl(343,65%,51%)');
+            expect(randomColor({ hue: 120 })).toBe('hsl(120,77%,32%)');
+            expect(randomColor({ luminosity: 'dark' })).toBe('hsl(135,96%,31%)');
+            expect(randomColor({ saturation: 'strong' })).toBe('hsl(193,100%,24%)');
+            expect(randomColor({ opacity: 0.5 })).toBe('hsla(242,55%,42%,0.5)');
+            expect(randomColor({ seed: 'testSeed' })).toBe('hsl(185,90%,23%)');
+        });
+        test('consistent color generation with a seed', () => {
+            const options = { seed: 'consistentSeed' };
+            const color1 = randomColor(options);
+            const color2 = randomColor(options);
+            expect(color1).toBe(color2);
+        });
+        test('different color generation without a seed', () => {
+            const color1 = randomColor();
+            const color2 = randomColor();
+            expect(color1).not.toBe(color2);
+        });
+    });
+});
+function isValidHSLA(textColor) {
+    let match, h, s, l, a;
+    if (textColor.startsWith('hsla')) {
+        match = /^hsla\((\d+),(\d+)%,(\d+)%,([.0-9]+)\)$/.exec(textColor);
+        if (match == null)
+            return false;
+        [, h, s, l, a] = match;
+    }
+    else {
+        match = /^hsl\((\d+),(\d+)%,(\d+)%\)$/.exec(textColor);
+        if (match == null)
+            return false;
+        [, h, s, l] = match;
+        a = '1';
+    }
+    if (!check(h, 0, 360))
+        return false;
+    if (!check(s, 0, 100))
+        return false;
+    if (!check(l, 0, 100))
+        return false;
+    if (!check(a, 0, 1))
+        return false;
+    return true;
+    function check(textNumber, min, max) {
+        const value = parseFloat(textNumber);
+        if (value < min)
+            return false;
+        if (value > max)
+            return false;
+        return true;
+    }
+}

package/dist/lib/recolor.d.ts

@@ -1,3 +1,4 @@
-import type { RecolorOptions, StylemakerColorLookup } from './types.js';
+import type { RecolorOptions, StylemakerColors } from './types.js';
+import type StyleBuilder from './style_builder.ts';
 export declare function getDefaultRecolorFlags(): RecolorOptions;
-export declare function recolor(colors: StylemakerColorLookup, opt?: RecolorOptions): void;
+export declare function recolor<Subclass extends StyleBuilder<Subclass>>(colors: StylemakerColors<Subclass>, opt?: RecolorOptions): void;

package/dist/lib/recolor.js

@@ -29,7 +29,8 @@ export function recolor(colors, opt) {
     if ((opt.tint !== undefined) && (opt.tintColor !== undefined) && (opt.tint !== 0))
         tint(opt.tint, Color(opt.tintColor));
     function forEachColor(callback) {
-        Object.entries(colors).forEach(([k, c]) => colors[k] = callback(c));
+        for (const k in colors)
+            colors[k] = callback(colors[k]);
     }
     function invert() {
         forEachColor(c => c.negate());

package/dist/lib/recolor.test.d.ts

@@ -1 +1,13 @@
-export {};
+import type { StyleRules, StyleRulesOptions } from './types.js';
+import StyleBuilder from './style_builder.js';
+export default class TestStyle extends StyleBuilder<TestStyle> {
+    readonly name: string;
+    defaultFonts: {};
+    defaultColors: {
+        c0: string;
+        c1: string;
+        c2: string;
+        c3: string;
+    };
+    protected getStyleRules(_options: StyleRulesOptions<TestStyle>): StyleRules;
+}

package/dist/lib/recolor.test.js

@@ -1,5 +1,5 @@
 import { getDefaultRecolorFlags, recolor } from './recolor.js';
-import Color from 'color';
+import StyleBuilder from './style_builder.js';
 describe('colorTransformer', () => {
     describe('getDefaultRecolorFlags', () => {
         it('should return the default color transformer flags', () => {
@@ -163,17 +163,30 @@ describe('colorTransformer', () => {
         });
     });
 });
-function string2colors(colorList) {
-    return Object.fromEntries(colorList.split(',')
-        .map((value, index) => ['color' + index, Color('#' + value)]));
-}
 function colors2string(colors) {
-    const colorArray = [];
-    for (let i = 0; ('color' + i) in colors; i++) {
-        colorArray.push(colors['color' + i].hexa().slice(1));
+    const colorArray = [
+        colors.c0,
+        colors.c1,
+        colors.c2,
+        colors.c3,
+    ];
+    return colorArray.map(c => c.hexa().slice(1)).join(',');
+}
+export default class TestStyle extends StyleBuilder {
+    name = 'teststyle';
+    defaultFonts = {};
+    defaultColors = {
+        c0: '#FFAA5500',
+        c1: '#00FFAA55',
+        c2: '#5500FFAA',
+        c3: '#AA5500FF',
+    };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    getStyleRules(_options) {
+        throw new Error('Method not implemented.');
     }
-    return colorArray.join(',');
 }
 function getDefaultColors() {
-    return string2colors('FFAA5500,00FFAA55,5500FFAA,AA5500FF');
+    const style = new TestStyle();
+    return style.getColors(style.defaultColors);
 }

package/dist/lib/shortbread/layers.js

@@ -316,7 +316,7 @@ export default function getLayers(option) {
         {
             id: 'label-motorway-exit',
             type: 'symbol',
-            'source-layer': 'street_labels_points',
+            'source-layer': 'street_labels_points', // docs say `streets_labels_points`, but layer is actually called `street_labels_points`
             filter: ['==', 'kind', 'motorway_junction'],
             layout: { 'text-field': '{ref}' },
             // FIXME shield
@@ -394,7 +394,7 @@ export default function getLayers(option) {
         },
         // marking
         {
-            id: 'marking-oneway',
+            id: 'marking-oneway', // streets → oneway
             type: 'symbol',
             'source-layer': 'streets',
             filter: ['all',
@@ -411,7 +411,7 @@ export default function getLayers(option) {
             },
         },
         {
-            id: 'marking-oneway-reverse',
+            id: 'marking-oneway-reverse', // oneway_reverse
             type: 'symbol',
             'source-layer': 'streets',
             filter: ['all',
@@ -428,7 +428,7 @@ export default function getLayers(option) {
             },
         },
         {
-            id: 'marking-bicycle',
+            id: 'marking-bicycle', // bicycle=designated or kind=cycleway
             type: 'symbol',
             'source-layer': 'streets',
             filter: ['all',

package/dist/lib/style_builder.d.ts

@@ -1,19 +1,12 @@
 import Color from 'color';
-import type { LanguageSuffix, MaplibreStyle, RecolorOptions, StyleRules, StyleRulesOptions } from './types.js';
-export default abstract class StyleBuilder {
+import type { MaplibreStyle, StyleRules, StyleRulesOptions, StylemakerColorStrings, StylemakerColors, StylemakerFontStrings, StylemakerOptions } from './types.js';
+export default abstract class StyleBuilder<Subclass extends StyleBuilder<Subclass>> {
     #private;
-    baseUrl: string;
-    glyphsUrl: string;
-    spriteUrl: string;
-    tilesUrls: string[];
-    hideLabels: boolean;
-    languageSuffix: LanguageSuffix;
-    recolor: RecolorOptions;
     abstract readonly name: string;
-    abstract fonts: Record<string, string>;
-    abstract colors: Record<string, string>;
-    constructor();
-    build(): MaplibreStyle;
-    protected resetColors(callback: (color: Color) => Color): void;
-    protected abstract getStyleRules(opt: StyleRulesOptions): StyleRules;
+    abstract readonly defaultColors: StylemakerColorStrings<Subclass>;
+    abstract readonly defaultFonts: StylemakerFontStrings<Subclass>;
+    build(options?: StylemakerOptions<Subclass>): MaplibreStyle;
+    getColors(colors: StylemakerColorStrings<Subclass>): StylemakerColors<Subclass>;
+    protected transformDefaultColors(callback: (color: Color) => Color): void;
+    protected abstract getStyleRules(options: StyleRulesOptions<Subclass>): StyleRules;
 }

package/dist/lib/style_builder.js

@@ -3,42 +3,46 @@ import getShortbreadTemplate from './shortbread/template.js';
 import getShortbreadLayers from './shortbread/layers.js';
 import { decorate } from './decorator.js';
 import { getDefaultRecolorFlags, recolor } from './recolor.js';
+import { deepClone } from './utils.js';
 // Stylemaker class definition
 export default class StyleBuilder {
-    baseUrl;
-    glyphsUrl = '/assets/fonts/{fontstack}/{range}.pbf';
-    spriteUrl = '/assets/sprites/sprites';
-    tilesUrls = ['/tiles/osm/{z}/{x}/{y}'];
-    hideLabels = false;
-    languageSuffix = '';
-    recolor = getDefaultRecolorFlags();
     #sourceName = 'versatiles-shortbread';
-    // Constructor
-    constructor() {
-        try {
-            // @ts-expect-error: I'm not sure if I'm in a browser
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-            this.baseUrl = document.location.href;
+    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 glyphsUrl = options.glyphsUrl ?? '/assets/fonts/{fontstack}/{range}.pbf';
+        const spriteUrl = options.spriteUrl ?? '/assets/sprites/sprites';
+        const tilesUrls = options.tilesUrls ?? ['/tiles/osm/{z}/{x}/{y}'];
+        const hideLabels = options.hideLabels ?? false;
+        const languageSuffix = options.languageSuffix ?? '';
+        const recolorOptions = options.recolor ?? getDefaultRecolorFlags();
+        const colors = this.getColors(this.defaultColors);
+        if (options.colors) {
+            for (const key in options.colors)
+                colors[key] = Color(options.colors[key]);
         }
-        catch (e) {
-            this.baseUrl = 'https://tiles.versatiles.org'; // set me in the browser
+        // transform colors
+        recolor(colors, recolorOptions);
+        const fonts = deepClone(this.defaultColors);
+        if (options.fonts) {
+            for (const key in options.fonts) {
+                const fontName = options.fonts[key];
+                if (fontName != null)
+                    fonts[key] = fontName;
+            }
         }
-    }
-    build() {
         // get empty shortbread style
         const style = getShortbreadTemplate();
-        const colors = Object.fromEntries(Object.entries(this.colors)
-            .map(([name, colorString]) => [name, Color(colorString)]));
-        // transform colors
-        recolor(colors, this.recolor);
-        // get layer style rules from child class
-        const layerStyleRules = this.getStyleRules({
+        const styleRuleOptions = {
             colors,
-            fonts: this.fonts,
-            languageSuffix: this.languageSuffix,
-        });
+            fonts: deepClone(this.defaultFonts),
+            languageSuffix,
+        };
+        // get layer style rules from child class
+        const layerStyleRules = this.getStyleRules(styleRuleOptions);
         // get shortbread layers
-        const layerDefinitions = getShortbreadLayers({ languageSuffix: this.languageSuffix });
+        const layerDefinitions = getShortbreadLayers({ languageSuffix });
         let layers = layerDefinitions.map(layer => {
             switch (layer.type) {
                 case 'background':
@@ -56,28 +60,35 @@ export default class StyleBuilder {
         // apply layer rules
         layers = decorate(layers, layerStyleRules);
         // hide labels, if wanted
-        if (this.hideLabels)
+        if (hideLabels)
             layers = layers.filter(l => l.type !== 'symbol');
         style.layers = layers;
-        style.name = 'versatiles-' + this.name;
-        style.glyphs = resolveUrl(this.baseUrl, this.glyphsUrl);
-        style.sprite = resolveUrl(this.baseUrl, this.spriteUrl);
+        style.name = 'versatiles-' + this.name.toLowerCase();
+        style.glyphs = resolveUrl(baseUrl, glyphsUrl);
+        style.sprite = resolveUrl(baseUrl, spriteUrl);
         const source = style.sources[this.#sourceName];
         if ('tiles' in source)
-            source.tiles = this.tilesUrls.map(url => resolveUrl(this.baseUrl, url));
+            source.tiles = tilesUrls.map(url => resolveUrl(baseUrl, url));
         return style;
-        function resolveUrl(baseUrl, url) {
-            if (!Boolean(baseUrl))
+        function resolveUrl(base, url) {
+            if (!Boolean(base))
                 return url;
-            url = new URL(url, baseUrl).href;
+            url = new URL(url, base).href;
             url = url.replace(/%7B/gi, '{');
             url = url.replace(/%7D/gi, '}');
             return url;
         }
     }
-    resetColors(callback) {
-        const colors = Object.fromEntries(Object.entries(this.colors)
-            .map(([name, color]) => [name, callback(Color(color)).hexa()]));
-        this.colors = colors;
+    getColors(colors) {
+        const entriesString = Object.entries(colors);
+        const entriesColor = entriesString.map(([key, value]) => [key, Color(value)]);
+        const result = Object.fromEntries(entriesColor);
+        return result;
+    }
+    transformDefaultColors(callback) {
+        const colors = this.getColors(this.defaultColors);
+        for (const key in colors) {
+            this.defaultColors[key] = callback(colors[key]).hexa();
+        }
     }
 }

package/dist/lib/style_builder.test.js

@@ -4,10 +4,10 @@ import StyleBuilder from './style_builder.js';
 // Mock class for abstract class StyleBuilder
 class MockStyleBuilder extends StyleBuilder {
     name = 'mock';
-    fonts = { regular: 'Arial' };
-    colors = { primary: '#FF8800' };
+    defaultFonts = { regular: 'Arial' };
+    defaultColors = { primary: '#FF8800' };
     negateColors() {
-        this.resetColors((color) => color.negate());
+        this.transformDefaultColors(color => color.negate());
     }
     getStyleRules(opt) {
         for (const color of Object.values(opt.colors))
@@ -20,7 +20,7 @@ class MockStyleBuilder extends StyleBuilder {
             'water-area': {
                 textColor: opt.colors.primary,
                 textSize: 12,
-                textFont: [opt.fonts.Arial],
+                textFont: opt.fonts.regular,
             },
         };
     }
@@ -41,11 +41,11 @@ describe('StyleBuilder', () => {
         expect(style).toHaveProperty('glyphs');
         expect(style).toHaveProperty('sprite');
     });
-    it('should reset colors correctly', () => {
-        const initialColor = builder.colors.primary;
+    it('should transform colors correctly', () => {
+        const initialColor = builder.defaultColors.primary;
         builder.negateColors();
-        expect(builder.colors.primary).not.toBe(initialColor);
-        expect(builder.colors.primary).toBe(Color(initialColor).negate().hexa());
+        expect(builder.defaultColors.primary).not.toBe(initialColor);
+        expect(builder.defaultColors.primary).toBe(Color(initialColor).negate().hexa());
     });
     describe('build method', () => {
         it('should create a style object', () => {
@@ -56,14 +56,8 @@ describe('StyleBuilder', () => {
             expect(style).toHaveProperty('glyphs');
             expect(style).toHaveProperty('sprite');
         });
-        it('should convert color strings to Color instances', () => {
-            builder.build();
-            const colors = Object.values(builder.colors);
-            expect(colors.every((color) => typeof color === 'string')).toBe(true);
-        });
         it('should resolve urls correctly', () => {
-            builder.baseUrl = 'https://my.base.url/';
-            const style = builder.build();
+            const style = builder.build({ baseUrl: 'https://my.base.url/' });
             expect(style.glyphs).toBe('https://my.base.url/assets/fonts/{fontstack}/{range}.pbf');
             expect(style.sprite).toBe('https://my.base.url/assets/sprites/sprites');
             const source = style.sources['versatiles-shortbread'];

package/dist/lib/style_guesser.d.ts

@@ -0,0 +1,2 @@
+import type { MaplibreStyle, TileJSONSpecification } from './types.js';
+export default function guess(spec: TileJSONSpecification): MaplibreStyle;

package/dist/lib/style_guesser.js

@@ -0,0 +1,123 @@
+/* eslint-disable @typescript-eslint/prefer-includes */
+/* eslint-disable @typescript-eslint/naming-convention */
+import { isTileJSONSpecification } from './types.js';
+import randomColorGenerator from './random_color.js';
+import Colorful from '../style/colorful.js';
+export default function guess(spec) {
+    if (!isTileJSONSpecification(spec))
+        throw Error();
+    spec.tilejson ??= '3.0.0';
+    switch (spec.type) {
+        case 'vector':
+            if (isShortbread(spec)) {
+                return getShortbreadStyle(spec);
+            }
+            else {
+                return getInspectorStyle(spec);
+            }
+        case 'raster':
+            return getImageStyle(spec);
+        default:
+            throw Error('spec.type must be: "vector" or "raster"');
+    }
+}
+function isShortbread(spec) {
+    if (typeof spec !== 'object')
+        return false;
+    if (!('vector_layers' in spec))
+        return false;
+    if (!Array.isArray(spec.vector_layers))
+        return false;
+    const layerIds = new Set(spec.vector_layers.map(l => String(l.id)));
+    const shortbreadIds = ['place_labels', 'boundaries', 'boundary_labels', 'addresses', 'water_lines', 'water_lines_labels', 'dam_lines', 'dam_polygons', 'pier_lines', 'pier_polygons', 'bridges', 'street_polygons', 'streets_polygons_labels', 'ferries', 'streets', 'street_labels', 'street_labels_points', 'aerialways', 'public_transport', 'buildings', 'water_polygons', 'ocean', 'water_polygons_labels', 'land', 'sites', 'pois'];
+    return shortbreadIds.every(id => layerIds.has(id));
+}
+function getShortbreadStyle(spec) {
+    return new Colorful().build({
+        hideLabels: true,
+        tilesUrls: spec.tiles,
+    });
+}
+function getInspectorStyle(spec) {
+    const sourceName = 'vectorSource';
+    const layers = { background: [], circle: [], line: [], fill: [] };
+    layers.background.push({ 'id': 'background', 'type': 'background', 'paint': { 'background-color': '#fff' } });
+    const randomColor = randomColorGenerator();
+    spec.vector_layers.forEach((vector_layer) => {
+        let luminosity = 'bright', saturation, hue;
+        if (/water|ocean|lake|sea|river/.test(vector_layer.id))
+            hue = 'blue';
+        if (/state|country|place/.test(vector_layer.id))
+            hue = 'pink';
+        if (/road|highway|transport|streets/.test(vector_layer.id))
+            hue = 'orange';
+        if (/contour|building/.test(vector_layer.id))
+            hue = 'monochrome';
+        if (/building/.test(vector_layer.id))
+            luminosity = 'dark';
+        if (/contour|landuse/.test(vector_layer.id))
+            hue = 'yellow';
+        if (/wood|forest|park|landcover|land/.test(vector_layer.id))
+            hue = 'green';
+        if (/point/.test(vector_layer.id)) {
+            saturation = 'strong';
+            luminosity = 'light';
+        }
+        const color = randomColor({
+            hue,
+            luminosity,
+            saturation,
+            seed: vector_layer.id,
+            opacity: 0.6,
+        });
+        layers.circle.push({
+            id: `${sourceName}-${vector_layer.id}-circle`,
+            'source-layer': vector_layer.id,
+            source: sourceName,
+            type: 'circle',
+            filter: ['==', '$type', 'Point'],
+            paint: { 'circle-color': color, 'circle-radius': 2 },
+        });
+        layers.line.push({
+            id: `${sourceName}-${vector_layer.id}-line`,
+            'source-layer': vector_layer.id,
+            source: sourceName,
+            type: 'line',
+            filter: ['==', '$type', 'LineString'],
+            layout: { 'line-join': 'round', 'line-cap': 'round' },
+            paint: { 'line-color': color },
+        });
+        layers.fill.push({
+            id: `${sourceName}-${vector_layer.id}-fill`,
+            'source-layer': vector_layer.id,
+            source: sourceName,
+            type: 'fill',
+            filter: ['==', '$type', 'Polygon'],
+            paint: { 'fill-color': color, 'fill-opacity': 0.3, 'fill-antialias': true, 'fill-outline-color': color },
+        });
+    });
+    return {
+        version: 8,
+        sources: {
+            [sourceName]: spec,
+        },
+        layers: [
+            ...layers.background,
+            ...layers.fill,
+            ...layers.line,
+            ...layers.circle,
+        ],
+    };
+}
+function getImageStyle(spec) {
+    const sourceName = 'rasterSource';
+    return {
+        version: 8,
+        sources: { [sourceName]: spec },
+        layers: [{
+                id: 'raster',
+                type: 'raster',
+                source: sourceName,
+            }],
+    };
+}

package/dist/lib/style_guesser.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/style_guesser.test.js

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import guessStyle from './style_guesser.js';
+describe('guessStyle', () => {
+    const tiles = ['https://example.com/tiles/{z}/{x}/{y}'];
+    it('should build raster styles', () => {
+        const type = 'raster';
+        const format = 'avif';
+        expect(guessStyle({ type, tiles, format }))
+            .toStrictEqual({
+            version: 8,
+            sources: { rasterSource: { format, tilejson: '3.0.0', tiles, type } },
+            layers: [{ id: 'raster', source: 'rasterSource', type }],
+        });
+    });
+    it('should build vector styles', () => {
+        const type = 'vector';
+        const format = 'pbf';
+        const vector_layers = [{ id: 'geometry', fields: { label: 'String', height: 'Number' } }];
+        expect(guessStyle({ type, tiles, format, vector_layers }))
+            .toStrictEqual({
+            version: 8,
+            sources: { vectorSource: { format, tilejson: '3.0.0', tiles, type, vector_layers } },
+            layers: [
+                {
+                    id: 'background',
+                    type: 'background',
+                    paint: { 'background-color': '#fff' },
+                },
+                {
+                    id: 'vectorSource-geometry-fill',
+                    type: 'fill',
+                    source: 'vectorSource',
+                    'source-layer': 'geometry',
+                    filter: ['==', '$type', 'Polygon'],
+                    paint: { 'fill-antialias': true, 'fill-color': 'hsla(7,57%,56%,0.6)', 'fill-opacity': 0.3, 'fill-outline-color': 'hsla(7,57%,56%,0.6)' },
+                },
+                {
+                    id: 'vectorSource-geometry-line',
+                    type: 'line',
+                    source: 'vectorSource',
+                    'source-layer': 'geometry',
+                    filter: ['==', '$type', 'LineString'],
+                    layout: { 'line-cap': 'round', 'line-join': 'round' },
+                    paint: { 'line-color': 'hsla(7,57%,56%,0.6)' },
+                },
+                {
+                    id: 'vectorSource-geometry-circle',
+                    type: 'circle',
+                    source: 'vectorSource',
+                    'source-layer': 'geometry',
+                    filter: ['==', '$type', 'Point'],
+                    paint: { 'circle-color': 'hsla(7,57%,56%,0.6)', 'circle-radius': 2 },
+                },
+            ],
+        });
+    });
+});

package/dist/lib/types.d.ts

@@ -1,5 +1,6 @@
 import type { BackgroundLayerSpecification, FillLayerSpecification, FilterSpecification, LineLayerSpecification, StyleSpecification, SymbolLayerSpecification } from '@maplibre/maplibre-gl-style-spec';
 import type Color from 'color';
+import type StyleBuilder from './style_builder.ts';
 export type TileFormat = 'avif' | 'bin' | 'geojson' | 'jpg' | 'json' | 'pbf' | 'png' | 'svg' | 'topojson' | 'webp';
 export type MaplibreLayer = BackgroundLayerSpecification | FillLayerSpecification | LineLayerSpecification | SymbolLayerSpecification;
 export type MaplibreLayerDefinition = BackgroundLayerSpecification | Omit<FillLayerSpecification, 'source'> | Omit<LineLayerSpecification, 'source'> | Omit<SymbolLayerSpecification, 'source'>;
@@ -47,14 +48,18 @@ export type MaplibreStyleVector = Omit<StyleSpecification, 'sources'> & {
 };
 export type MaplibreStyle = MaplibreStyleRaster | MaplibreStyleVector;
 export type StyleRuleValue = boolean | number | object | string;
-export type StyleRule = Record<string, StyleRuleValue>;
-export type StyleRules = Record<string, StyleRule>;
-export type StylemakerColorLookup = Record<string, Color>;
-export type StylemakerStringLookup = Record<string, string>;
+export type StyleRule = Record<string, StyleRuleValue | undefined>;
+export type StyleRules = Record<string, StyleRule | undefined>;
 export type LanguageSuffix = '_de' | '_en' | '';
-export interface StyleRulesOptions {
-    colors: StylemakerColorLookup;
-    fonts: StylemakerStringLookup;
+export type StylemakerColorKeys<T extends StyleBuilder<T>> = keyof T['defaultColors'];
+export type StylemakerFontKeys<T extends StyleBuilder<T>> = keyof T['defaultFonts'];
+export type StylemakerColorStrings<T extends StyleBuilder<T>> = Record<StylemakerColorKeys<T>, string>;
+export type StylemakerFontStrings<T extends StyleBuilder<T>> = Record<StylemakerFontKeys<T>, string>;
+export type StylemakerColors<T extends StyleBuilder<T>> = Record<StylemakerColorKeys<T>, Color>;
+export type StylemakerFonts<T extends StyleBuilder<T>> = Record<StylemakerFontKeys<T>, string>;
+export interface StyleRulesOptions<T extends StyleBuilder<T>> {
+    colors: StylemakerColors<T>;
+    fonts: StylemakerFontStrings<T>;
     languageSuffix: string;
 }
 export interface RecolorOptions {
@@ -67,4 +72,15 @@ export interface RecolorOptions {
     tint?: number;
     tintColor?: string;
 }
+export interface StylemakerOptions<T extends StyleBuilder<T>> {
+    baseUrl?: string;
+    glyphsUrl?: string;
+    spriteUrl?: string;
+    tilesUrls?: string[];
+    hideLabels?: boolean;
+    languageSuffix?: LanguageSuffix;
+    colors?: Partial<StylemakerColorStrings<T>>;
+    fonts?: Partial<StylemakerFontStrings<T>>;
+    recolor?: RecolorOptions;
+}
 export declare function isTileJSONSpecification(obj: unknown): obj is TileJSONSpecification;

package/dist/style/colorful.d.ts

@@ -1,12 +1,12 @@
 import StyleBuilder from '../lib/style_builder.js';
 import type { StyleRules, StyleRulesOptions } from '../lib/types.js';
-export default class Colorful extends StyleBuilder {
+export default class Colorful extends StyleBuilder<Colorful> {
     readonly name: string;
-    fonts: {
+    defaultFonts: {
         regular: string;
         bold: string;
     };
-    colors: {
+    defaultColors: {
         land: string;
         water: string;
         glacier: string;
@@ -49,5 +49,5 @@ export default class Colorful extends StyleBuilder {
         hospital: string;
         poi: string;
     };
-    protected getStyleRules(options: StyleRulesOptions): StyleRules;
+    protected getStyleRules(options: StyleRulesOptions<Colorful>): StyleRules;
 }

package/dist/style/colorful.js

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import StyleBuilder from '../lib/style_builder.js';
 export default class Colorful extends StyleBuilder {
-    name = 'colorful';
-    fonts = {
+    name = 'Colorful';
+    defaultFonts = {
         regular: 'noto_sans_regular',
         bold: 'noto_sans_bold',
     };
-    colors = {
+    defaultColors = {
         land: '#F9F4EE',
         water: '#BEDDF3',
         glacier: '#FFFFFF',

package/dist/style/graybeard.js

@@ -1,8 +1,8 @@
 import Colorful from './colorful.js';
 export default class Graybeard extends Colorful {
-    name = 'graybeard';
+    name = 'Graybeard';
     constructor() {
         super();
-        this.resetColors(color => color.desaturate(1));
+        this.transformDefaultColors(color => color.desaturate(1));
     }
 }

package/dist/style/neutrino.d.ts

@@ -1,12 +1,12 @@
 import StyleBuilder from '../lib/style_builder.js';
 import type { StyleRules, StyleRulesOptions } from '../lib/types.js';
-export default class Neutrino extends StyleBuilder {
+export default class Neutrino extends StyleBuilder<Neutrino> {
     readonly name: string;
-    fonts: {
+    defaultFonts: {
         regular: string;
         bold: string;
     };
-    colors: {
+    defaultColors: {
         land: string;
         water: string;
         grass: string;
@@ -20,5 +20,5 @@ export default class Neutrino extends StyleBuilder {
         rail: string;
         label: string;
     };
-    protected getStyleRules(options: StyleRulesOptions): StyleRules;
+    protected getStyleRules(options: StyleRulesOptions<Neutrino>): StyleRules;
 }

package/dist/style/neutrino.js

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import StyleBuilder from '../lib/style_builder.js';
 export default class Neutrino extends StyleBuilder {
-    name = 'neutrino';
-    fonts = {
+    name = 'Neutrino';
+    defaultFonts = {
         regular: 'noto_sans_regular',
         bold: 'noto_sans_bold',
     };
-    colors = {
+    defaultColors = {
         land: '#f6f0f6',
         water: '#cbd2df',
         grass: '#e7e9e5',

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@versatiles/style",
-  "version": "3.5.2",
+  "version": "3.6.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 build && npm run lint && npm run test",
     "build": "npm run build-browser && npm run build-node && npm run build-styles",
     "build-browser": "rollup -c=rollup.config.js",
     "build-node": "rm -rf dist && tsc -p tsconfig.node.json && chmod +x dist/index.js",
     "build-styles": "tsx scripts/build-styles.ts",
-    "doc": "vrt ts2md src/index.ts tsconfig.node.json | vrt insertmd README.md '### Node.js API'",
-    "lint": "eslint --color .",
-    "prepublish": "npm run build && npm run doc",
+    "doc": "vrt ts2md src/index.ts tsconfig.node.json | vrt insertmd README.md '# API'",
+    "lint": "npm run build-browser && eslint --color .",
     "release": "tsx scripts/release.ts",
-    "test": "npm run test-node && npm run test-coverage && npm run test-browser",
-    "test-browser": "npm run build-browser && echo 'add browser test'",
+    "test": "npm run test-typescript && npm run test-node && npm run test-browser",
+    "test-browser": "npm run build-browser && jest -c=jest.config.browser.ts",
     "test-coverage": "NODE_OPTIONS=--experimental-vm-modules jest -c=jest.config.coverage.ts",
     "test-node": "npm run build-node && NODE_OPTIONS=--experimental-vm-modules jest -c=jest.config.node.ts",
+    "test-typescript": "NODE_OPTIONS=--experimental-vm-modules jest -c=jest.config.typescript.ts",
     "upgrade": "npm-check-updates -u && rm -f package-lock.json && rm -rf node_modules; npm i"
   },
   "repository": {
@@ -44,21 +44,22 @@
     "@rollup/plugin-typescript": "^11.1.5",
     "@types/brace-expansion": "^1.1.2",
     "@types/inquirer": "^9.0.7",
-    "@types/jest": "^29.5.8",
-    "@types/node": "^20.9.2",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
-    "@versatiles/release-tool": "^1.0.1",
+    "@types/jest": "^29.5.10",
+    "@types/node": "^20.10.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.0",
+    "@typescript-eslint/parser": "^6.13.0",
+    "@versatiles/release-tool": "^1.0.3",
     "eslint": "^8.54.0",
     "inquirer": "^9.2.12",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-ts-webcompat-resolver": "^1.0.0",
     "npm-check-updates": "^16.14.11",
-    "rollup": "^4.5.0",
+    "rollup": "^4.6.0",
     "rollup-plugin-dts": "^6.1.0",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
-    "tsx": "^4.1.4",
-    "typescript": "^5.2.2"
+    "tsx": "^4.5.0",
+    "typescript": "^5.3.2"
   }
 }