mockaton 13.3.5 → 13.4.1

package/README.md

@@ -10,6 +10,26 @@ for testing difficult to reproduce backend states.
 
 ## [Documentation ↗](https://mockaton.com) | [Changelog ↗](https://mockaton.com/changelog)
 
+## TL;DR
+```shell
+npx mockaton my-mocks-dir
+```
+
+It’s like `servedir`, but supports dynamic segments in filenames. For example:
+
+**Route**: [/api/company/123](#) <br/>
+**File**: my-mocks-dir/api/company/[id].GET.200.json
+
+Statics assets don’t need that extension:
+
+**Route**: [/media/avatar.png](#) <br/>
+**File**: my-mocks-dir/media/avatar.png
+
+
+## Dashboard
+Besides the dashboard, there’s a programmatic [Control API](https://mockaton.com/api).
+Also, there’s a [Browser Extension](https://mockaton.com/scraping) for scraping responses from your backend.
+
 <picture>
   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp762x762.light.gold.png">
   <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ericfortis/mockaton/refs/heads/main/pixaton-tests/tests/macos/pic-for-readme.vp762x762.dark.gold.png">
@@ -36,12 +56,8 @@ curl localhost:2020/api/user
 ```
 
 
-## Overview
-With Mockaton, you don’t need to write code for wiring up your
-mocks. Instead, a given directory is scanned for filenames
-following a convention similar to the URLs.
-
-For example, for [/api/company/123](#), the file could be:
+## Examples
+[/api/company/123](#)
 
 <code>my_mocks_dir/<b>api/company/[id]</b>.GET.200.json</code>
 ```json
@@ -50,6 +66,8 @@ For example, for [/api/company/123](#), the file could be:
 }
 ```
 
+<br/>
+
 Or, you can write it in TypeScript (it will be sent as JSON).
 
 <code>my_mocks_dir/<b>api/company/[id]</b>.GET.200.ts</code>
@@ -59,15 +77,17 @@ export default {
 }
 ```
 
+<br/>
+
 Similarly, you can handle logic with [Functional Mocks](https://mockaton.com/functional-mocks):
 
 <code>my_mocks_dir/<b>api/company/[companyId]/user/[userId]</b>.GET.200.ts</code>
 ```ts
 import { IncomingMessage, OutgoingMessage } from 'node:http'
-import { parseSplats } from 'mockaton'
+import { parseSegments } from 'mockaton'
 
 export default async function (req: IncomingMessage, response: OutgoingMessage) {
-  const { companyId, userId } = parseSplats(req.url, import.meta.filename)
+  const { companyId, userId } = parseSegments(req.url, import.meta.filename)
   const foo = await getFoo()
   return JSON.stringify({
     foo,
@@ -77,11 +97,3 @@ export default async function (req: IncomingMessage, response: OutgoingMessage)
   })
 }
 ```
-
-## Browser Extension
-[Browser Extension](https://mockaton.com/scraping) for scraping responses from your backend.
-
-
-## API
-Programmatic [Control API](https://mockaton.com/api).
-

package/index.d.ts

@@ -62,7 +62,7 @@ export const echoFilePlugin: Plugin
 export function jwtCookie(cookieName: string, payload: any, path?: string): string
 
 export function parseJSON(request: IncomingMessage): Promise<any>
-export function parseSplats(reqUrl: string, filename: string): Record<string, string>
+export function parseSegments(reqUrl: string, filename: string): Record<string, string>
 export function parseQueryParams(reqUrl: string): URLSearchParams
 
 export type JsonPromise<T> = Promise<Response & { json(): Promise<T> }>

package/index.js

@@ -5,6 +5,6 @@ export { Mockaton } from './src/server/Mockaton.js'
 export { jwtCookie } from './src/server/utils/jwt.js'
 export { jsToJsonPlugin, echoFilePlugin } from './src/server/MockDispatcherPlugins.js'
 export { parseJSON, BodyReaderError } from './src/server/utils/HttpIncomingMessage.js'
-export { parseSplats, parseQueryParams } from './src/server/utils/UrlParsers.js'
+export { parseSegments, parseQueryParams, parseSplats } from './src/server/UrlParsers.js'
 
 export const defineConfig = opts => opts

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "13.3.5",
+	"version": "13.4.1",
 	"exports": {
 		".": {
 			"import": "./index.js",

package/src/client/ApiCommander.js

@@ -10,7 +10,7 @@ export class Commander {
 	}
 
 	/** @returns {Promise<Response>} */
-	#patch = (api, body) => fetch(this.addr + api, {
+	#patch = (api, body = undefined) => fetch(this.addr + api, {
 		method: 'PATCH',
 		body: JSON.stringify(body)
 	})

package/src/client/ApiConstants.js

@@ -25,9 +25,9 @@ export const API = {
 	deleteMock: MOUNT + '/delete-mock',
 }
 
-export const HEADER_502 = 'Mockaton502'
-
 export const DEFAULT_MOCK_COMMENT = '(default)'
 
 export const EXT_UNKNOWN_MIME = 'unknown'
 export const EXT_EMPTY = 'empty'
+
+export const FILENAME_HEADER = 'Mockaton-File'

package/src/client/IndexHtml.js

@@ -7,24 +7,24 @@ export const CSP = [
 
 // language=html
 export const IndexHtml = (hotReloadEnabled, version) => `
-<!DOCTYPE html>
-<html lang="en-US">
-<head>
-	<meta charset="UTF-8">
-	<base href="${API.dashboard}/">
+	<!DOCTYPE html>
+	<html lang="en-US">
+	<head>
+		<meta charset="UTF-8">
+		<base href="${API.dashboard}/">
 
-	<script type="module" src="app.js"></script>
-	<link rel="preload" href="${API.state}" as="fetch" crossorigin>
+		<script type="module" src="app.js"></script>
+		<link rel="preload" href="${API.state}" as="fetch" crossorigin>
 
-	<link rel="icon" href="data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m235 33.7v202c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-151c-0.115-4.49-6.72-5.88-8.46-0.87l-48.3 155c-2.22 7.01-7.72 10.1-16 9.9-3.63-0.191-7.01-1.14-9.66-2.89-2.89-1.72-4.83-4.34-5.57-7.72-11.1-37-22.6-74.3-34.1-111-4.34-14-8.95-31.4-14-48.3-1.82-4.83-8.16-5.32-8.46 1.16v156c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-207c0-5.74 2.62-13.2 9.39-16.3 7.5-3.14 15-4.05 21.8-3.8 3.14 0 6.03 0.686 8.95 1.46 3.14 0.797 6.03 1.98 8.7 3.63 2.65 1.38 5.32 3.14 7.5 5.57 2.22 2.22 3.87 4.83 5.07 7.72l45.8 157c4.63-15.9 32.4-117 33.3-121 4.12-13.8 7.72-26.5 10.9-38.7 1.16-2.65 2.89-5.32 5.07-7.5 2.15-2.15 4.58-4.12 7.5-5.32 2.65-1.57 5.57-2.89 8.46-3.63 3.14-0.797 9.44-0.988 12.1-0.988 11.6 1.07 29.4 9.14 29.4 27z' fill='%23808080'/%3E%3C/svg%3E">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<meta name="description" content="HTTP Mock Server">
-	<title>Mockaton v${version}</title>
-</head>
-<body>
-${hotReloadEnabled
-	? '<script type="module" src="watcherDev.js"></script>'
-	: ''}
-</body>
-</html>
+		<link rel="icon" href="data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m235 33.7v202c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-151c-0.115-4.49-6.72-5.88-8.46-0.87l-48.3 155c-2.22 7.01-7.72 10.1-16 9.9-3.63-0.191-7.01-1.14-9.66-2.89-2.89-1.72-4.83-4.34-5.57-7.72-11.1-37-22.6-74.3-34.1-111-4.34-14-8.95-31.4-14-48.3-1.82-4.83-8.16-5.32-8.46 1.16v156c0 9.19-5.81 14-17.4 14-11.6 0-17.4-4.83-17.4-14v-207c0-5.74 2.62-13.2 9.39-16.3 7.5-3.14 15-4.05 21.8-3.8 3.14 0 6.03 0.686 8.95 1.46 3.14 0.797 6.03 1.98 8.7 3.63 2.65 1.38 5.32 3.14 7.5 5.57 2.22 2.22 3.87 4.83 5.07 7.72l45.8 157c4.63-15.9 32.4-117 33.3-121 4.12-13.8 7.72-26.5 10.9-38.7 1.16-2.65 2.89-5.32 5.07-7.5 2.15-2.15 4.58-4.12 7.5-5.32 2.65-1.57 5.57-2.89 8.46-3.63 3.14-0.797 9.44-0.988 12.1-0.988 11.6 1.07 29.4 9.14 29.4 27z' fill='%23808080'/%3E%3C/svg%3E">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="HTTP Mock Server">
+		<title>Mockaton v${version}</title>
+	</head>
+	<body>
+	${hotReloadEnabled
+		? `<script type="module" src="utils/watcherDev.js?url=${API.watchHotReload}"></script>`
+		: ''}
+	</body>
+	</html>
 `

package/src/client/app-header.js

@@ -1,12 +1,12 @@
-import { createElement as r, t, extractClassNames } from './dom-utils.js'
+import { createElement as r, t } from './utils/dom.js'
 import { Logo, HelpIcon } from './graphics.js'
 import { store } from './app-store.js'
 
 import CSS from './app.css' with { type: 'css' }
-
-
+import { extractClassNames } from './utils/css.js'
 Object.assign(CSS, extractClassNames(CSS))
 
+
 export function Header() {
 	return (
 		r('header', null,

package/src/client/app-payload-viewer.js

@@ -1,13 +1,12 @@
-import { createElement as r, t, extractClassNames } from './dom-utils.js'
-import { HEADER_502 } from './ApiConstants.js'
+import { createElement as r, t } from './utils/dom.js'
 import { parseFilename } from './Filename.js'
 import { store } from './app-store.js'
 
 import CSS from './app.css' with { type: 'css' }
-
-
+import { extractClassNames } from './utils/css.js'
 Object.assign(CSS, extractClassNames(CSS))
 
+
 const titleRef = {}
 const codeRef = {}
 
@@ -42,12 +41,9 @@ function PayloadViewerTitle(file, statusText) {
 
 function PayloadViewerTitleWhenProxied(response) {
 	const mime = response.headers.get('content-type') || ''
-	const badGateway = response.headers.get(HEADER_502)
 	return (
 		r('span', null,
-			badGateway
-				? r('span', null, t`⛔ Fallback Backend Error` + ' ')
-				: r('span', null, t`Got` + ' '),
+			r('span', null, t`Got` + ' '),
 			r('abbr', { title: response.statusText }, response.status),
 			' ' + mime))
 }

package/src/client/app-store.js

@@ -1,7 +1,8 @@
 import { Commander } from './ApiCommander.js'
-import { dittoSplitPaths, groupByFolder } from './dir-tree.js'
+import { groupByFolder } from './dir/groupByFolder.js'
+import { dittoSplitPaths } from './dir/dittoSplitPaths.js'
 import { parseFilename, extractComments } from './Filename.js'
-import { QueryParamBool, LocalStorageSet } from './dom-utils.js'
+import { LocalStorageSet, QueryParamBool } from './utils/LocalStorage.js'
 import { EXT_UNKNOWN_MIME, EXT_EMPTY } from './ApiConstants.js'
 
 
@@ -205,38 +206,6 @@ export const store = {
 	}
 }
 
-// When false, the URL will be updated with param=false
-function initPreference(param) {
-	const qs = new URLSearchParams(globalThis.location?.search)
-	if (!qs.has(param)) {
-		const group = globalThis.localStorage?.getItem(param) !== '0'
-		if (!group) {
-			const url = new URL(globalThis.location?.href)
-			url.searchParams.set(param, '0')
-			history.replaceState(null, '', url)
-		}
-		return group
-	}
-	return qs.get(param) !== '0'
-}
-
-// When false, the URL and localStorage will have param='0'
-function togglePreference(param, nextVal) {
-	if (nextVal)
-		globalThis.localStorage?.removeItem(param)
-	else
-		globalThis.localStorage?.setItem(param, nextVal)
-
-	const url = new URL(location.href)
-	if (nextVal)
-		url.searchParams.delete(param)
-	else
-		url.searchParams.set(param, '0')
-	history.replaceState(null, '', url)
-}
-
-
-
 export class BrokerRowModel {
 	opts = /** @type {[key:string, label:string, selected:boolean][]} */ []
 	isNew = false

package/src/client/app.css

@@ -119,12 +119,12 @@ header {
 
 	.Logo {
 		align-self: end;
-		margin-right: 22px;
-		margin-bottom: 3px;
+		margin-right: 18px;
+		margin-bottom: 2px;
 		transition: opacity 240ms ease-in-out;
 
 		svg {
-			width: 120px;
+			width: 122px;
 			pointer-events: none;
 			fill: var(--colorText);
 		}
@@ -185,6 +185,7 @@ header {
 	}
 
 	.HelpLink {
+		opacity: 0.8;
 		width: 22px;
 		height: 22px;
 		flex-shrink: 0;
@@ -197,6 +198,7 @@ header {
 
 		&:hover {
 			background: var(--colorAccent);
+			opacity: 1;
 		}
 
 		svg {

package/src/client/app.js

@@ -1,4 +1,4 @@
-import { createElement as r, t, restoreFocus, Fragment, classNames, extractClassNames } from './dom-utils.js'
+import { createElement as r, t, restoreFocus, Fragment } from './utils/dom.js'
 
 import { store } from './app-store.js'
 import { API } from './ApiConstants.js'
@@ -7,10 +7,11 @@ import { PayloadViewer, previewMock } from './app-payload-viewer.js'
 import { TimerIcon, CloudIcon, ChevronDownIcon } from './graphics.js'
 
 import CSS from './app.css' with { type: 'css' }
+import { extractClassNames, classNames } from './utils/css.js'
 document.adoptedStyleSheets.push(CSS)
-
 Object.assign(CSS, extractClassNames(CSS))
 
+
 store.onError = onError
 store.render = render
 store.renderRow = renderRow

package/src/client/dir/dittoSplitPaths.js

@@ -0,0 +1,25 @@
+/**
+ * Think of this as a way of printing a directory tree in which
+ * the repeated folder paths are kept but styled differently.
+ * @param {string[]} paths - sorted
+ */
+export function dittoSplitPaths(paths) {
+	const pParts = paths.map(p => p.split('/').filter(Boolean))
+	return paths.map((p, i) => {
+		if (i === 0)
+			return ['', p]
+
+		const prev = pParts[i - 1]
+		const curr = pParts[i]
+		const min = Math.min(curr.length, prev.length)
+		let j = 0
+		while (j < min && curr[j] === prev[j])
+			j++
+
+		if (!j) // no common dirs
+			return ['', p]
+
+		const ditto = '/' + curr.slice(0, j).join('/') + '/'
+		return [ditto, p.slice(ditto.length)]
+	})
+}

package/src/client/dir/dittoSplitPaths.test.js

@@ -0,0 +1,28 @@
+import { test } from 'node:test'
+import { deepEqual } from 'node:assert/strict'
+import { dittoSplitPaths } from './dittoSplitPaths.js'
+
+
+test('dittoSplitPaths', () => {
+	const input = [
+		'/api/user',
+		'/api/user/avatar',
+		'/api/user/friends',
+		'/api/vid',
+		'/api/video/id',
+		'/api/video/stats',
+		'/v2/foo',
+		'/v2/foo/bar'
+	]
+	deepEqual(dittoSplitPaths(input), [
+		['', '/api/user'],
+		['/api/user/', 'avatar'],
+		['/api/user/', 'friends'],
+		['/api/', 'vid'],
+		['/api/', 'video/id'],
+		['/api/video/', 'stats'],
+		['', '/v2/foo'],
+		['/v2/foo/', 'bar']
+	])
+})
+

package/src/client/{dir-tree.js → dir/groupByFolder.js}

@@ -1,31 +1,3 @@
-/**
- * Think of this as a way of printing a directory tree in which
- * the repeated folder paths are kept but styled differently.
- * @param {string[]} paths - sorted
- */
-export function dittoSplitPaths(paths) {
-	const pParts = paths.map(p => p.split('/').filter(Boolean))
-	return paths.map((p, i) => {
-		if (i === 0)
-			return ['', p]
-
-		const prev = pParts[i - 1]
-		const curr = pParts[i]
-		const min = Math.min(curr.length, prev.length)
-		let j = 0
-		while (j < min && curr[j] === prev[j])
-			j++
-
-		if (!j) // no common dirs
-			return ['', p]
-
-		const ditto = '/' + curr.slice(0, j).join('/') + '/'
-		return [ditto, p.slice(ditto.length)]
-	})
-}
-
-
-
 /**
  * @param {Partial<BrokerRowModel>[]} brokers
  * @returns {Partial<BrokerRowModel>[]}
@@ -49,11 +21,8 @@ function trie(brokers) {
 }
 
 class TrieNode {
-	#children
-	constructor() {
-		this.brokers = []
-		this.#children = new Map()
-	}
+	#children = new Map()
+	brokers = []
 	addChild(k, v) { this.#children.set(k, v) }
 	getChild(k) { return this.#children.get(k) }
 	getChildren() { return this.#children.values() }

package/src/client/{dir-tree.test.js → dir/groupByFolder.test.js}

@@ -1,33 +1,9 @@
 import { test } from 'node:test'
 import { deepEqual } from 'node:assert/strict'
-import { groupByFolder, dittoSplitPaths } from './dir-tree.js'
+import { groupByFolder } from './groupByFolder.js'
 
 
-test('dittoSplitPaths', () => {
-	const input = [
-		'/api/user',
-		'/api/user/avatar',
-		'/api/user/friends',
-		'/api/vid',
-		'/api/video/id',
-		'/api/video/stats',
-		'/v2/foo',
-		'/v2/foo/bar'
-	]
-	deepEqual(dittoSplitPaths(input), [
-		['', '/api/user'],
-		['/api/user/', 'avatar'],
-		['/api/user/', 'friends'],
-		['/api/', 'vid'],
-		['/api/', 'video/id'],
-		['/api/video/', 'stats'],
-		['', '/v2/foo'],
-		['/v2/foo/', 'bar']
-	])
-})
-
-
-test('dirStructure', () => {
+test('groupByFolder', () => {
 	const input = [
 		{ children: [], method: 'GET', urlMask: '/api/user' },
 		{ children: [], method: 'GET', urlMask: '/api/user/avatar' },

package/src/client/graphics.js

@@ -1,11 +1,11 @@
-import { createSvgElement as s } from './dom-utils.js'
+import { createSvgElement as s } from './utils/dom.js'
 
 
 export const Logo = () =>
-	s('svg', { viewBox: '0 0 556 100' },
-		s('path', { d: 'm13.75 1.8789c-5.9487 0.19352-10.865 4.5652-11.082 11.686v81.445c-1e-7 2.216 1.784 4 4 4h4.793c2.216 0 4-1.784 4-4v-64.982c0.02794-3.4488 3.0988-3.5551 4.2031-1.1562l16.615 59.059c1.4393 5.3711 5.1083 7.9633 8.7656 7.9473 3.6573 0.01603 7.3263-2.5762 8.7656-7.9473l16.615-59.059c1.1043-2.3989 4.1752-2.2925 4.2031 1.1562v64.982c0 2.216 1.784 4 4 4h4.793c2.216 0 4-1.784 4-4v-81.445c-0.17732-7.0807-5.1334-11.492-11.082-11.686-5.9487-0.19352-12.652 3.8309-15.609 13.619l-15.686 57.334-15.686-57.334c-2.9569-9.7882-9.6607-13.813-15.609-13.619zm239.19 0.074219c-2.216 0-4 1.784-4 4v89.057c0 2.216 1.784 4 4 4h4.793c2.216 0 3.9868-1.784 4-4l0.10644-17.94c0.0734-0.07237 12.175-13.75 12.175-13.75 5.6772 11.091 11.404 22.158 17.113 33.232 1.0168 1.9689 3.4217 2.7356 5.3906 1.7188l4.2578-2.1992c1.9689-1.0168 2.7356-3.4217 1.7188-5.3906-6.4691-12.585-12.958-25.16-19.442-37.738l17.223-19.771c1.4555-1.671 1.2803-4.189-0.39062-5.6445l-3.6133-3.1465c-0.73105-0.63679-1.6224-0.96212-2.5176-0.98633-1.151-0.03113-2.3063 0.43508-3.125 1.375l-28.896 33.174v-51.99c0-2.216-1.784-4-4-4zm-58.255 23.316c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312l-0.125-7.8457c0-2.216-1.784-4-4-4h-4.6524c-2.216 0-4 1.784-4 4l3e-3 6.7888c3e-3 3.8063-1.5601 9.3694-8.4716 9.3694h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.6937 0 8.3697 5.2207 8.4687 11.828v2.2207c0 2.216 1.784 4 4 4h4.6524c2.216 0 4-1.784 4-4l0.125-5.7363c0-10.699-8.6117-19.312-19.311-19.312zm-72.182 0c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312v-34.535c0-10.699-8.6117-19.312-19.311-19.312zm1.9356 11h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v26.209c0 6.9115-1.5631 12.475-8.4746 12.475h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477z' }),
-		s('path', { opacity: 0.85, fill: 'currentColor', d: 'm331.9 25.27c-10.699 0-19.312 8.6137-19.312 19.312v4.3682c0 2.216 1.784 4 4 4h4.7715c2.216 0 4-1.784 4-4v-0.20414c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v7.0148h-28.059c-10.699 0-19.312 8.6117-19.312 19.311v4.0477c0 10.699 8.6137 19.313 19.312 19.312h17.812c2.216-1e-6 4-1.784 4-4v-4.7715c0-2.216-1.784-4-4-4h-13.648c-6.9115-2e-5 -12.477-1.5651-12.477-8.5649 0-6.9998 5.5651-8.5629 12.477-8.5629h23.895v25.897c0 2.216 1.784 4 4 4h4.7715c2.216-1e-6 4-1.784 4-4v-49.848c0-10.699-8.6117-19.312-19.311-19.312z' }),
-		s('path', { d: 'm392.75 1.373c-2.216 0-4 1.784-4 4v18.043h-5.3086c-2.216 0-4 1.784-4 4v4.793c0 2.216 1.784 4 4 4h5.3086v51.398c0 6.1465 3.7064 10.823 9.232 10.823h16.531c2.216 0 4-1.784 4-4v-4.793c0-2.216-1.784-4-4-4h-12.97v-49.428h9.8711c2.216 0 4-1.784 4-4v-4.793c0-2.216-1.784-4-4-4h-9.8711v-18.043c0-2.216-1.784-4-4-4zm122.96 23.896c-10.699 0-19.312 8.6137-19.312 19.312v49.812c0 2.216 1.784 4 4 4h4.7715c2.216 0 4-1.784 4-4v-45.648c0-6.9115 1.5651-12.477 8.4766-12.477h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v45.684c0 2.216 1.784 4 4 4h4.7715c2.216-1e-6 4-1.784 4-4v-49.848c0-10.699-8.6117-19.312-19.311-19.312zm-69.999 0c-10.699 0-19.312 8.6137-19.312 19.312v34.535c0 10.699 8.6137 19.312 19.312 19.312h19.717c10.699 0 19.311-8.6137 19.311-19.312v-34.535c0-10.699-8.6117-19.312-19.311-19.312zm1.9356 11h15.846c6.9115 0 8.4746 5.5651 8.4746 12.477v26.209c0 6.9115-1.5631 12.475-8.4746 12.475h-15.846c-6.9115 0-8.4766-5.5631-8.4766-12.475v-26.209c0-6.9115 1.5651-12.477 8.4766-12.477z' }))
+	s('svg', { viewBox: '0 0 460 80' },
+		s('path', { d: 'm332 29v34.9q0 2.5 1.06 3.84t4.51 1.34h2.5q3.74 0 3.55 4.42 0 4.51-3.55 4.51h-3.17q-3.07 0-5.76-0.768-2.69-0.864-5.18-2.4v0.096q-4.7-3.07-4.7-10.9v-35h-3.74q-3.46 0-3.65-4.51 0-4.51 3.65-4.51h3.74v-10.3q0-4.61 5.47-4.61 5.28 0 5.28 4.61v10.3h7.97q3.74 0 3.55 4.51 0 4.51-3.55 4.51zm50.9-9.02q2.5 0 5.09 1.06 2.69 1.06 5.18 2.69h-0.096q2.5 1.82 3.84 4.8 1.34 2.88 1.34 6.72v27.3q0 7.87-5.18 11.6-5.09 3.65-10.2 3.65h-15.4q-2.5 0-5.09-0.864t-5.09-2.78q-5.18-3.65-5.18-11.6v-27.3q0-3.84 1.34-6.72 1.34-2.98 3.84-4.8h-0.096q2.4-1.63 5.09-2.69t5.18-1.06zm-1.73 48.8q3.55 0 4.99-2.02 1.54-2.02 1.54-4.32v-27.1q0-2.4-1.54-4.32-1.44-2.02-4.99-2.02h-11.9q-3.55 0-5.09 2.02-1.44 1.92-1.44 4.32v27.1q0 2.3 1.44 4.32 1.54 2.02 5.09 2.02zm40 4.99q0 4.61-5.28 4.61t-5.28-4.61v-38.6q0-3.94 1.25-6.82t3.94-4.7q5.09-3.65 10.2-3.65h15.5q4.9 0 10.2 3.65 5.18 3.65 5.18 11.5v38.6q0 4.61-5.28 4.61t-5.28-4.61v-37.7q0-2.5-1.54-4.8l0.096 0.096q-1.25-2.3-5.09-2.3h-12q-3.94 0-5.18 2.3-1.34 2.02-1.34 4.7z' }),
+		s('path', { fill: 'currentColor', d: 'm282 11-21 64.5v-0.096q-0.576 1.44-1.63 2.4-0.96 0.864-2.4 0.864-0.768 0-1.54-0.192-0.672-0.096-1.44-0.288h0.096q-5.47-1.73-4.03-6.14l21.9-66.5q0.48-1.54 1.63-2.59 1.25-1.06 2.88-1.25 1.63-0.288 3.17-0.384 1.54-0.192 2.4-0.192t2.4 0.192q1.54 0.096 3.17 0.288 1.34 0.192 2.59 1.44 1.34 1.25 2.02 2.5 5.38 16.5 10.8 33.3 5.57 16.7 10.9 33.2 1.34 4.42-4.03 6.14-0.768 0.192-1.44 0.288-0.576 0.192-1.34 0.192-1.34 0-2.5-0.864-1.06-0.96-1.54-2.4v0.096zm7.2 43.8q0 3.07-2.21 5.28-2.11 2.11-5.18 2.11t-5.18-2.11q-2.11-2.21-2.11-5.28t2.11-5.18q2.11-2.21 5.18-2.21t5.18 2.21q2.21 2.11 2.21 5.18z' }),
+		s('path', { d: 'm31.4 36q0-1.25-0.384-2.4-0.384-1.25-0.96-2.3-1.25-2.3-5.18-2.3h-6.14q-3.94 0-5.28 2.3-1.15 2.21-1.15 4.7v38q0 4.51-5.28 4.51-5.47 0-5.47-4.51v-38.9q0-7.87 5.18-11.5 5.28-3.65 10.3-3.65h9.7q2.21 0 4.9 0.864t5.18 2.69q2.4-1.82 4.99-2.69 2.69-0.864 5.09-0.864h9.6q5.09 0 10.2 3.65 5.28 3.55 5.28 11.5v38.9q0 4.51-5.38 4.51t-5.38-4.51v-38q0-1.25-0.288-2.5t-1.06-2.3l0.096 0.096q-0.768-1.25-1.92-1.73-1.15-0.576-3.36-0.576h-6.05q-4.03 0-5.28 2.3-1.25 2.11-1.25 4.7v38q0 4.51-5.28 4.51-5.38 0-5.38-4.51zm83.2-16q2.5 0 5.09 1.06 2.69 1.06 5.18 2.69h-0.096q2.5 1.82 3.84 4.8 1.34 2.88 1.34 6.72v27.3q0 7.87-5.18 11.6-5.09 3.65-10.2 3.65h-15.4q-2.5 0-5.09-0.864t-5.09-2.78q-5.18-3.65-5.18-11.6v-27.3q0-3.84 1.34-6.72 1.34-2.98 3.84-4.8h-0.096q2.4-1.63 5.09-2.69t5.18-1.06zm-1.73 48.8q3.55 0 4.99-2.02 1.54-2.02 1.54-4.32v-27.1q0-2.4-1.54-4.32-1.44-2.02-4.99-2.02h-11.9q-3.55 0-5.09 2.02-1.44 1.92-1.44 4.32v27.1q0 2.3 1.44 4.32 1.54 2.02 5.09 2.02zm75.6-6.24q0 7.87-5.18 11.6-5.09 3.65-10.2 3.65h-16.1q-5.09 0-9.89-3.65-2.3-1.92-3.55-4.8-1.25-2.98-1.25-6.82v-27.4q0-7.78 4.8-11.5 2.4-1.73 4.9-2.69 2.59-1.06 4.99-1.06h16.1q2.3 0 5.09 0.96 2.78 0.864 5.18 2.4 2.3 1.63 3.65 4.51 1.44 2.88 1.44 6.82v4.8q0 4.61-5.28 4.61t-5.28-4.61v-4.13q0-2.4-1.54-4.32-1.44-2.02-4.99-2.02h-12q-3.55 0-5.09 2.02-1.44 1.92-1.44 4.32v27.2q0 2.3 1.44 4.32 1.54 2.02 5.09 2.02h12q3.55 0 4.99-2.02 1.54-2.02 1.54-4.32v-4.42q0-4.51 5.28-4.51t5.28 4.51zm22.8-0.768v12.2q0 4.51-5.28 4.51t-5.28-4.51v-68.4q0-4.61 5.28-4.61t5.28 4.61v40.7q2.4-2.88 5.28-6.14 2.98-3.36 5.86-6.72 2.98-3.46 5.86-6.72 2.88-3.36 5.38-6.24v0.096q1.73-2.02 3.46-2.02 0.96 0 1.82 0.48 0.96 0.384 2.02 1.15h-0.096q2.3 1.92 2.3 3.84 0 0.672-0.288 1.54-0.288 0.768-0.96 1.34zm32.1 9.6q0.672 1.25 0.672 2.59 0 2.5-2.88 3.74-1.92 1.15-3.46 1.15-1.06 0-2.02-0.768-0.96-0.672-1.54-1.73l-9.6-18.5q-0.864-1.44-0.864-2.88 0-2.4 2.5-4.03 0.672-0.48 1.34-0.864 0.768-0.384 1.63-0.576 1.06-0.192 2.02 0.384t1.63 1.54z' }))
 
 export const TimerIcon = () =>
 	s('svg', { viewBox: '0 0 24 24' },

package/src/client/utils/LocalStorage.js

@@ -0,0 +1,69 @@
+export class QueryParamBool {
+	constructor(param) {
+		this.param = param
+		this.value = this.#init()
+	}
+
+	#init() {
+		const qs = new URLSearchParams(globalThis.location?.search)
+		if (qs.has(this.param))
+			return qs.get(this.param) !== '0'
+		const stored = globalThis.localStorage?.getItem(this.param) !== '0'
+		if (!stored)
+			this.#applyToUrl(false)
+		return stored
+	}
+
+	toggle() {
+		this.value = !this.value
+		if (this.value)
+			globalThis.localStorage?.removeItem(this.param)
+		else
+			globalThis.localStorage?.setItem(this.param, '0')
+		this.#applyToUrl(this.value)
+	}
+
+	#applyToUrl(nextVal) {
+		const url = new URL(globalThis.location?.href)
+		if (nextVal)
+			url.searchParams.delete(this.param)
+		else
+			url.searchParams.set(this.param, '0')
+		history.replaceState(null, '', url)
+	}
+}
+
+
+export class LocalStorageSet {
+	constructor(key) {
+		this.key = key
+		this.value = this.#parse()
+	}
+
+	add(item) {
+		this.value.add(item)
+		this.#persist()
+	}
+
+	delete(item) {
+		this.value.delete(item)
+		this.#persist()
+	}
+
+	has(item) {
+		return this.value.has(item)
+	}
+
+	#parse() {
+		try {
+			return new Set(JSON.parse(globalThis.localStorage?.getItem(this.key) || '[]'))
+		}
+		catch {
+			return new Set()
+		}
+	}
+
+	#persist() {
+		globalThis.localStorage?.setItem(this.key, JSON.stringify([...this.value]))
+	}
+}

package/src/client/utils/css.js

@@ -0,0 +1,16 @@
+export function classNames(...args) {
+	return args.filter(Boolean).join(' ')
+}
+
+
+export function extractClassNames({ cssRules }) {
+	// Class names must begin with _ or a letter, then it can have numbers and hyphens
+	// TODO think about tag.className selectors
+	const reClassName = /(?:^|[\s,{>])&?\s*\.([a-zA-Z_][\w-]*)/g
+	const cNames = {}
+	let match
+	for (const rule of cssRules)
+		while (match = reClassName.exec(rule.cssText))
+			cNames[match[1]] = match[1]
+	return cNames
+}

package/src/client/{dom-utils-test.js → utils/css.test.js}

@@ -1,6 +1,6 @@
 import { test } from 'node:test'
 import { deepEqual, equal } from 'node:assert/strict'
-import { classNames, extractClassNames } from './dom-utils.js'
+import { extractClassNames, classNames } from './css.js'
 
 
 test('classNames', () => equal(classNames('a', false && 'b'), 'a'))