@tbela99/css-parser 1.3.0 → 1.3.1

package/dist/lib/validation/config.json.js

@@ -303,10 +303,10 @@ var declarations = {
 		syntax: "normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>"
 	},
 	"align-items": {
-		syntax: "normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]"
+		syntax: "normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ] | anchor-center"
 	},
 	"align-self": {
-		syntax: "auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>"
+		syntax: "auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position> | anchor-center"
 	},
 	"align-tracks": {
 		syntax: "[ normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position> ]#"
@@ -366,7 +366,7 @@ var declarations = {
 		syntax: "<easing-function>#"
 	},
 	appearance: {
-		syntax: "none | auto | textfield | menulist-button | <compat-auto>"
+		syntax: "none | auto | <compat-auto> | <compat-special>"
 	},
 	"aspect-ratio": {
 		syntax: "auto || <ratio>"
@@ -378,7 +378,7 @@ var declarations = {
 		syntax: "visible | hidden"
 	},
 	background: {
-		syntax: "[ <bg-layer> , ]* <final-bg-layer>"
+		syntax: "<bg-layer>#? , <final-bg-layer>"
 	},
 	"background-attachment": {
 		syntax: "<attachment>#"
@@ -465,10 +465,10 @@ var declarations = {
 		syntax: "<'border-top-color'>"
 	},
 	"border-bottom-left-radius": {
-		syntax: "<length-percentage>{1,2}"
+		syntax: "<length-percentage [0,∞]>{1,2}"
 	},
 	"border-bottom-right-radius": {
-		syntax: "<length-percentage>{1,2}"
+		syntax: "<length-percentage [0,∞]>{1,2}"
 	},
 	"border-bottom-style": {
 		syntax: "<line-style>"
@@ -477,7 +477,7 @@ var declarations = {
 		syntax: "<line-width>"
 	},
 	"border-collapse": {
-		syntax: "collapse | separate"
+		syntax: "separate | collapse"
 	},
 	"border-color": {
 		syntax: "<color>{1,4}"
@@ -492,19 +492,19 @@ var declarations = {
 		syntax: "<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>"
 	},
 	"border-image-outset": {
-		syntax: "[ <length> | <number> ]{1,4}"
+		syntax: "[ <length [0,∞]> | <number [0,∞]> ]{1,4}  "
 	},
 	"border-image-repeat": {
 		syntax: "[ stretch | repeat | round | space ]{1,2}"
 	},
 	"border-image-slice": {
-		syntax: "<number-percentage>{1,4} && fill?"
+		syntax: "[ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  && fill?"
 	},
 	"border-image-source": {
 		syntax: "none | <image>"
 	},
 	"border-image-width": {
-		syntax: "[ <length-percentage> | <number> | auto ]{1,4}"
+		syntax: "[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}"
 	},
 	"border-inline": {
 		syntax: "<'border-block-start'>"
@@ -555,7 +555,7 @@ var declarations = {
 		syntax: "<line-width>"
 	},
 	"border-radius": {
-		syntax: "<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?"
+		syntax: "<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?"
 	},
 	"border-right": {
 		syntax: "<line-width> || <line-style> || <color>"
@@ -570,7 +570,7 @@ var declarations = {
 		syntax: "<line-width>"
 	},
 	"border-spacing": {
-		syntax: "<length> <length>?"
+		syntax: "<length>{1,2}"
 	},
 	"border-start-end-radius": {
 		syntax: "<'border-top-left-radius'>"
@@ -588,10 +588,10 @@ var declarations = {
 		syntax: "<color>"
 	},
 	"border-top-left-radius": {
-		syntax: "<length-percentage>{1,2}"
+		syntax: "<length-percentage [0,∞]>{1,2}"
 	},
 	"border-top-right-radius": {
-		syntax: "<length-percentage>{1,2}"
+		syntax: "<length-percentage [0,∞]>{1,2}"
 	},
 	"border-top-style": {
 		syntax: "<line-style>"
@@ -603,7 +603,7 @@ var declarations = {
 		syntax: "<line-width>{1,4}"
 	},
 	bottom: {
-		syntax: "<length> | <percentage> | auto"
+		syntax: "auto | <length-percentage> | <anchor()> | <anchor-size()>"
 	},
 	"box-align": {
 		syntax: "start | center | end | baseline | stretch"
@@ -738,7 +738,7 @@ var declarations = {
 		syntax: "normal | [ [ size | inline-size ] || scroll-state ]"
 	},
 	content: {
-		syntax: "normal | none | [ <content-replacement> | <content-list> ] [/ [ <string> | <counter> ]+ ]?"
+		syntax: "normal | none | [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> | <attr()> ]+ ]?"
 	},
 	"content-visibility": {
 		syntax: "visible | auto | hidden"
@@ -1032,16 +1032,16 @@ var declarations = {
 		syntax: "normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]"
 	},
 	"justify-items": {
-		syntax: "normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]"
+		syntax: "normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center"
 	},
 	"justify-self": {
-		syntax: "auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]"
+		syntax: "auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | anchor-center"
 	},
 	"justify-tracks": {
 		syntax: "[ normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ] ]#"
 	},
 	left: {
-		syntax: "<length> | <percentage> | auto"
+		syntax: "auto | <length-percentage> | <anchor()> | <anchor-size()>"
 	},
 	"letter-spacing": {
 		syntax: "normal | <length> normal | <length-percentage>"
@@ -1086,7 +1086,7 @@ var declarations = {
 		syntax: "<'margin-top'>"
 	},
 	"margin-bottom": {
-		syntax: "<length-percentage> | auto"
+		syntax: "<length-percentage> | auto | <anchor-size()>"
 	},
 	"margin-inline": {
 		syntax: "<'margin-top'>{1,2}"
@@ -1098,13 +1098,13 @@ var declarations = {
 		syntax: "<'margin-top'>"
 	},
 	"margin-left": {
-		syntax: "<length-percentage> | auto"
+		syntax: "<length-percentage> | auto | <anchor-size()>"
 	},
 	"margin-right": {
-		syntax: "<length-percentage> | auto"
+		syntax: "<length-percentage> | auto | <anchor-size()>"
 	},
 	"margin-top": {
-		syntax: "<length-percentage> | auto"
+		syntax: "<length-percentage> | auto | <anchor-size()>"
 	},
 	"margin-trim": {
 		syntax: "none | in-flow | all"
@@ -1212,7 +1212,7 @@ var declarations = {
 		syntax: "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()> | stretch | <-non-standard-size>"
 	},
 	"mix-blend-mode": {
-		syntax: "<blend-mode> | plus-lighter"
+		syntax: "<blend-mode> | plus-darker | plus-lighter"
 	},
 	"object-fit": {
 		syntax: "fill | contain | cover | none | scale-down"
@@ -1410,7 +1410,7 @@ var declarations = {
 		syntax: "none | both | horizontal | vertical | block | inline"
 	},
 	right: {
-		syntax: "<length> | <percentage> | auto"
+		syntax: "auto | <length-percentage> | <anchor()> | <anchor-size()>"
 	},
 	rotate: {
 		syntax: "none | <angle> | [ x | y | z | <number>{3} ] && <angle>"
@@ -1710,7 +1710,7 @@ var declarations = {
 		syntax: "none | <dashed-ident>#"
 	},
 	top: {
-		syntax: "<length> | <percentage> | auto"
+		syntax: "auto | <length-percentage> | <anchor()> | <anchor-size()>"
 	},
 	"touch-action": {
 		syntax: "auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation"
@@ -2389,7 +2389,7 @@ var syntaxes = {
 		syntax: "<visual-box> | border-area | text"
 	},
 	"bg-image": {
-		syntax: "none | <image>"
+		syntax: "<image> | none"
 	},
 	"bg-layer": {
 		syntax: "<bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <visual-box> || <visual-box>"
@@ -2398,7 +2398,7 @@ var syntaxes = {
 		syntax: "[ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]"
 	},
 	"bg-size": {
-		syntax: "[ <length-percentage> | auto ]{1,2} | cover | contain"
+		syntax: "[ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain"
 	},
 	"blend-mode": {
 		syntax: "normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity"
@@ -2488,7 +2488,10 @@ var syntaxes = {
 		syntax: "[ common-ligatures | no-common-ligatures ]"
 	},
 	"compat-auto": {
-		syntax: "searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar | button"
+		syntax: "searchfield | textarea | checkbox | radio | menulist | listbox | meter | progress-bar | button"
+	},
+	"compat-special": {
+		syntax: "textfield | menulist-button"
 	},
 	"complex-selector": {
 		syntax: "<complex-selector-unit> [ <combinator>? <complex-selector-unit> ]*"
@@ -2668,7 +2671,7 @@ var syntaxes = {
 		syntax: "[ <filter-function> | <url> ]+"
 	},
 	"final-bg-layer": {
-		syntax: "<'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <visual-box> || <visual-box>"
+		syntax: "<bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <visual-box> || <visual-box> || <'background-color'>"
 	},
 	"fit-content()": {
 		syntax: "fit-content( <length-percentage [0,∞]> )"

package/dist/lib/validation/syntax.js

@@ -8,9 +8,11 @@ import '../parser/tokenize.js';
 import '../parser/utils/config.js';
 import { wildCardFuncs, isIdentColor, mathFuncs } from '../syntax/syntax.js';
 import { renderToken } from '../renderer/render.js';
-import { funcLike, colorsFunc } from '../syntax/color/utils/constants.js';
+import '../renderer/sourcemap/lib/encode.js';
 import { getSyntaxConfig, getParsedSyntax, getSyntax } from './config.js';
 import './syntaxes/complex-selector.js';
+import { funcLike, colorsFunc } from '../syntax/color/utils/constants.js';
+import '../ast/features/type.js';
 
 const config = getSyntaxConfig();
 // @ts-ignore

package/dist/node.js

@@ -0,0 +1,229 @@
+import process from 'node:process';
+export { ColorType, EnumToken, ValidationLevel } from './lib/ast/types.js';
+export { minify } from './lib/ast/minify.js';
+export { WalkerOptionEnum, WalkerValueEvent, walk, walkValues } from './lib/ast/walk.js';
+export { expand } from './lib/ast/expand.js';
+import { doRender } from './lib/renderer/render.js';
+export { renderToken } from './lib/renderer/render.js';
+export { SourceMap } from './lib/renderer/sourcemap/sourcemap.js';
+import { doParse } from './lib/parser/parse.js';
+export { parseDeclarations, parseString, parseTokens } from './lib/parser/parse.js';
+import { tokenizeStream, tokenize } from './lib/parser/tokenize.js';
+import './lib/parser/utils/config.js';
+export { convertColor } from './lib/syntax/color/color.js';
+import './lib/syntax/color/utils/constants.js';
+export { isOkLabClose, okLabDistance } from './lib/syntax/color/utils/distance.js';
+import './lib/validation/config.js';
+import './lib/validation/parser/types.js';
+import './lib/validation/parser/parse.js';
+import './lib/validation/syntaxes/complex-selector.js';
+import './lib/validation/syntax.js';
+import { resolve, matchUrl, dirname } from './lib/fs/resolve.js';
+import { Readable } from 'node:stream';
+import { createReadStream } from 'node:fs';
+export { FeatureWalkMode } from './lib/ast/features/type.js';
+
+/**
+ * node module entry point
+ * @module node
+ */
+/**
+ * load file or url as stream
+ * @param url
+ * @param currentFile
+ *
+ * @private
+ */
+async function getStream(url, currentFile = '.') {
+    const resolved = resolve(url, currentFile);
+    // @ts-ignore
+    return matchUrl.test(resolved.absolute) ? fetch(resolved.absolute).then((response) => {
+        if (!response.ok) {
+            throw new Error(`${response.status} ${response.statusText} ${response.url}`);
+        }
+        return response.body;
+    }) : Readable.toWeb(createReadStream(resolved.absolute));
+}
+/**
+ * render ast tree
+ * @param data
+ * @param options
+ *
+ * Example:
+ *
+ * ```ts
+ *
+ *  import {render, ColorType} from '@tbela99/css-parser';
+ *
+ *  // remote file
+ * let result = render(ast);
+ * console.log(result.code);
+ *
+ * // local file
+ * result = await parseFile(ast, {beatify: true, convertColor: ColorType.SRGB});
+ * console.log(result.code);
+ * ```
+ */
+function render(data, options = {}) {
+    return doRender(data, Object.assign(options, { getStream, resolve, dirname, cwd: options.cwd ?? process.cwd() }));
+}
+/**
+ * parse css file
+ * @param file url or path
+ * @param options
+ *
+ * Example:
+ *
+ * ```ts
+ *
+ *  import {parseFile} from '@tbela99/css-parser';
+ *
+ *  // remote file
+ * let result = await parseFile('https://docs.deno.com/styles.css');
+ * console.log(result.ast);
+ *
+ * // local file
+ * result = await parseFile('./css/styles.css');
+ * console.log(result.ast);
+ * ```
+ */
+async function parseFile(file, options = {}) {
+    return getStream(file).then(stream => parse(stream, { src: file, ...options }));
+}
+/**
+ * parse css
+ * @param stream
+ * @param opt
+ *
+ * Example:
+ *
+ * ```ts
+ *
+ * import {transform} from '@tbela99/css-parser';
+ *
+ *  // css string
+ *  let result = await transform(css);
+ *  console.log(result.code);
+ * ```
+ *
+ * Example using stream
+ *
+ * ```ts
+ *
+ * import {parse} from '@tbela99/css-parser';
+ * import {Readable} from "node:stream";
+ *
+ * // usage: node index.ts < styles.css or cat styles.css | node index.ts
+ *
+ *  const readableStream = Readable.toWeb(process.stdin);
+ *  const result = await parse(readableStream, {beautify: true});
+ *
+ *  console.log(result.ast);
+ * ```
+ *
+ * Example using fetch
+ *
+ * ```ts
+ *
+ *  import {parse} from '@tbela99/css-parser';
+ *
+ *  const response = await fetch('https://docs.deno.com/styles.css');
+ *  result = await parse(response.body, {beautify: true});
+ *
+ *  console.log(result.ast);
+ * ```
+ */
+async function parse(stream, opt = {}) {
+    return doParse(stream instanceof ReadableStream ? tokenizeStream(stream) : tokenize({
+        stream,
+        buffer: '',
+        position: { ind: 0, lin: 1, col: 1 },
+        currentPosition: { ind: -1, lin: 1, col: 0 }
+    }), Object.assign(opt, { getStream, resolve, dirname, cwd: opt.cwd ?? process.cwd() }));
+}
+/**
+ * transform css file
+ * @param file url or path
+ * @param options
+ *
+ * Example:
+ *
+ * ```ts
+ *
+ *  import {transformFile} from '@tbela99/css-parser';
+ *
+ *  // remote file
+ * let result = await transformFile('https://docs.deno.com/styles.css');
+ * console.log(result.code);
+ *
+ * // local file
+ * result = await transformFile('./css/styles.css');
+ * console.log(result.code);
+ * ```
+ */
+async function transformFile(file, options = {}) {
+    return getStream(file).then(stream => transform(stream, { src: file, ...options }));
+}
+/**
+ * transform css
+ * @param css
+ * @param options
+ *
+ * Example:
+ *
+ * ```ts
+ *
+ * import {transform} from '@tbela99/css-parser';
+ *
+ *  // css string
+ *  let result = await transform(css);
+ *  console.log(result.code);
+ * ```
+ *
+ * Example using stream
+ *
+ * ```ts
+ *
+ * import {transform} from '@tbela99/css-parser';
+ * import {Readable} from "node:stream";
+ *
+ * // usage: node index.ts < styles.css or cat styles.css | node index.ts
+ *
+ *  const readableStream = Readable.toWeb(process.stdin);
+ *  const result = await transform(readableStream, {beautify: true});
+ *
+ *  console.log(result.code);
+ * ```
+ *
+ * Example using fetch
+ *
+ * ```ts
+ *
+ *  import {transform} from '@tbela99/css-parser';
+ *
+ *  const response = await fetch('https://docs.deno.com/styles.css');
+ *  result = await transform(response.body, {beautify: true});
+ *
+ *  console.log(result.code);
+ * ```
+ */
+async function transform(css, options = {}) {
+    options = { minify: true, removeEmpty: true, removeCharset: true, ...options };
+    const startTime = performance.now();
+    return parse(css, options).then((parseResult) => {
+        const rendered = render(parseResult.ast, options);
+        return {
+            ...parseResult,
+            ...rendered,
+            errors: parseResult.errors.concat(rendered.errors),
+            stats: {
+                bytesOut: rendered.code.length,
+                ...parseResult.stats,
+                render: rendered.stats.total,
+                total: `${(performance.now() - startTime).toFixed(2)}ms`
+            }
+        };
+    });
+}
+
+export { dirname, getStream, parse, parseFile, render, resolve, transform, transformFile };

package/dist/web.js

@@ -0,0 +1,158 @@
+export { ColorType, EnumToken, ValidationLevel } from './lib/ast/types.js';
+export { minify } from './lib/ast/minify.js';
+export { WalkerOptionEnum, WalkerValueEvent, walk, walkValues } from './lib/ast/walk.js';
+export { expand } from './lib/ast/expand.js';
+import { doRender } from './lib/renderer/render.js';
+export { renderToken } from './lib/renderer/render.js';
+export { SourceMap } from './lib/renderer/sourcemap/sourcemap.js';
+import { doParse } from './lib/parser/parse.js';
+export { parseDeclarations, parseString, parseTokens } from './lib/parser/parse.js';
+import { tokenizeStream, tokenize } from './lib/parser/tokenize.js';
+import './lib/parser/utils/config.js';
+export { convertColor } from './lib/syntax/color/color.js';
+import './lib/syntax/color/utils/constants.js';
+export { isOkLabClose, okLabDistance } from './lib/syntax/color/utils/distance.js';
+import './lib/validation/config.js';
+import './lib/validation/parser/types.js';
+import './lib/validation/parser/parse.js';
+import './lib/validation/syntaxes/complex-selector.js';
+import './lib/validation/syntax.js';
+import { matchUrl, resolve, dirname } from './lib/fs/resolve.js';
+export { FeatureWalkMode } from './lib/ast/features/type.js';
+
+/**
+ * web module entry point
+ * @module web
+ */
+/**
+ * load file or url as stream
+ * @param url
+ * @param currentFile
+ *
+ * @private
+ */
+async function getStream(url, currentFile = '.') {
+    let t;
+    if (matchUrl.test(url)) {
+        t = new URL(url);
+    }
+    else if (currentFile != null && matchUrl.test(currentFile)) {
+        t = new URL(url, currentFile);
+    }
+    else {
+        const path = resolve(url, currentFile).absolute;
+        // @ts-ignore
+        t = new URL(path, self.origin);
+    }
+    // @ts-ignore
+    return fetch(t, t.origin != self.origin ? { mode: 'cors' } : {}).then((response) => {
+        if (!response.ok) {
+            throw new Error(`${response.status} ${response.statusText} ${response.url}`);
+        }
+        return response.body;
+    });
+}
+/**
+ * render ast node
+ * @param data
+ * @param options
+ */
+function render(data, options = {}) {
+    return doRender(data, Object.assign(options, {
+        getStream,
+        resolve,
+        dirname,
+        cwd: options.cwd ?? self.location.pathname.endsWith('/') ? self.location.pathname : dirname(self.location.pathname)
+    }));
+}
+/**
+ * parse css file
+ * @param file url or path
+ * @param options
+ */
+async function parseFile(file, options = {}) {
+    return getStream(file).then(stream => parse(stream, { src: file, ...options }));
+}
+/**
+ * parse css
+ * @param stream
+ * @param opt
+ */
+async function parse(stream, opt = {}) {
+    return doParse(stream instanceof ReadableStream ? tokenizeStream(stream) : tokenize({
+        stream,
+        buffer: '',
+        position: { ind: 0, lin: 1, col: 1 },
+        currentPosition: { ind: -1, lin: 1, col: 0 }
+    }), Object.assign(opt, {
+        getStream,
+        resolve,
+        dirname,
+        cwd: opt.cwd ?? self.location.pathname.endsWith('/') ? self.location.pathname : dirname(self.location.pathname)
+    }));
+}
+/**
+ * transform css file
+ * @param file url or path
+ * @param options
+ *
+ * Example:
+ *
+ * ```ts
+ *
+ * import {transformFile} from '@tbela99/css-parser/web';
+ *
+ * // remote file
+ * let result = await transformFile('https://docs.deno.com/styles.css');
+ * console.log(result.code);
+ *
+ * // local file
+ * result = await transformFile('./css/styles.css');
+ * console.log(result.code);
+ * ```
+ */
+async function transformFile(file, options = {}) {
+    return getStream(file).then(stream => transform(stream, { src: file, ...options }));
+}
+/**
+ * transform css
+ * @param css
+ * @param options
+ *
+ * Example:
+ *
+ * ```ts
+ *
+ *  import {transform} from '@tbela99/css-parser/web';
+ *
+ *  // css string
+ *  let result = await transform(css);
+ *  console.log(result.code);
+ *
+ *  // using readable stream
+ *  const response = await fetch('https://docs.deno.com/styles.css');
+ *  result = await transform(response.body, {beautify: true});
+ *
+ *  console.log(result.code);
+ * ```
+ */
+async function transform(css, options = {}) {
+    options = { minify: true, removeEmpty: true, removeCharset: true, ...options };
+    const startTime = performance.now();
+    return parse(css, options).then((parseResult) => {
+        const rendered = render(parseResult.ast, options);
+        return {
+            ...parseResult,
+            ...rendered,
+            errors: parseResult.errors.concat(rendered.errors),
+            stats: {
+                bytesOut: rendered.code.length,
+                ...parseResult.stats,
+                render: rendered.stats.total,
+                total: `${(performance.now() - startTime).toFixed(2)}ms`
+            }
+        };
+    });
+}
+
+export { dirname, getStream, parse, parseFile, render, resolve, transform, transformFile };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@tbela99/css-parser",
   "description": "CSS parser for node and the browser",
-  "version": "v1.3.0",
+  "version": "v1.3.1",
   "exports": {
-    ".": "./dist/node/index.js",
-    "./node": "./dist/node/index.js",
+    ".": "./dist/node.js",
+    "./node": "./dist/node.js",
     "./umd": "./dist/index-umd-web.js",
-    "./web": "./dist/web/index.js",
+    "./web": "./dist/web.js",
     "./cjs": "./dist/index.cjs"
   },
   "type": "module",
@@ -15,10 +15,11 @@
     "test": "test"
   },
   "scripts": {
+    "doc": "typedoc --tsconfig typedoc-tsconfig.jsonc",
     "build": "rollup -c;./build.sh dist/index.d.ts 'declare interface' 'declare type'",
-    "test": "web-test-runner \"test/**/web.spec.js\" --node-resolve --playwright --browsers chromium firefox webkit --root-dir=.; mocha --reporter-options='maxDiffSize=1801920' --timeout=10000 \"test/**/node.spec.js\"",
-    "test:web": "web-test-runner \"test/**/web.spec.js\" --node-resolve --playwright --browsers chromium firefox webkit --root-dir=.",
-    "test:node": "mocha --reporter-options='maxDiffSize=1801920' \"test/**/node.spec.js\"",
+    "test": "web-test-runner \"test/**/web.spec.js\" --timeout=10000 --node-resolve --playwright --browsers chromium firefox webkit --root-dir=.; mocha --reporter-options='maxDiffSize=1801920' --timeout=10000 \"test/**/node.spec.js\"",
+    "test:web": "web-test-runner \"test/**/web.spec.js\" --timeout 30000 --node-resolve --playwright --browsers chromium firefox webkit --root-dir=.",
+    "test:node": "mocha -p --reporter-options='maxDiffSize=1801920' --timeout=10000 \"test/**/node.spec.js\"",
     "test:cov": "c8 -x 'test/specs/**/*.js' --reporter=html --reporter=text --reporter=json-summary mocha --reporter-options='maxDiffSize=1801920' --timeout=10000 \"test/**/node.spec.js\"",
     "test:web-cov": "web-test-runner -x 'test/specs/**/*.js' \"test/**/web.spec.js\" --node-resolve --playwright --browsers chromium firefox webkit --root-dir=. --coverage",
     "profile": "node --enable-source-maps --inspect-brk test/inspect.js",
@@ -65,9 +66,11 @@
     "c8": "^10.1.3",
     "esno": "^4.8.0",
     "mocha": "^11.7.1",
-    "playwright": "^1.54.1",
-    "rollup": "^4.45.1",
+    "playwright": "^1.55.0",
+    "rollup": "^4.48.0",
     "rollup-plugin-dts": "^6.2.1",
-    "tslib": "^2.8.1"
+    "tslib": "^2.8.1",
+    "typedoc": "^0.28.10",
+    "typedoc-material-theme": "^1.4.0"
   }
-}
+}