@jackens/nnn 2026.9.28 → 2026.9.30

package/README.md

@@ -1,6 +1,6 @@
 # nnn
 
-A collection of Jackens’ JavaScript helper utilities (version: `2026.9.28`).
+A collection of Jackens’ JavaScript helper utilities (version: `2026.9.30`).
 
 ## Installation
 
@@ -21,10 +21,10 @@ import {
   CNode,
   HArgs,
   HArgs1,
-  TokenizerSpec,
-  TokenizerSpecOptions,
+  LexerSpec,
+  LexerSpecOptions,
   c,
-  createTokenizer,
+  createLexer,
   h,
   monokai,
   nanolightTs,
@@ -42,26 +42,26 @@ import {
   Tuple argument type for the [`h`](#h) and [`s`](#s) helpers.
 - [`HArgs1`](#HArgs1):
   Single argument type for the [`h`](#h) and [`s`](#s) helpers.
-- [`TokenizerSpec`](#TokenizerSpec):
-  A [`createTokenizer`](#createTokenizer) spec: a `[metadata, pattern, options?]` tuple.
-- [`TokenizerSpecOptions`](#TokenizerSpecOptions):
-  Options of a [`createTokenizer`](#createTokenizer) spec controlling the tokenizer state stack.
+- [`LexerSpec`](#LexerSpec):
+  A [`createLexer`](#createLexer) spec: a `[metadata, pattern, options?]` tuple.
+- [`LexerSpecOptions`](#LexerSpecOptions):
+  Options of a [`createLexer`](#createLexer) spec controlling the lexer state stack.
 - [`c`](#c):
   A minimal CSS-in-JS helper that converts a JavaScript object hierarchy into a CSS string.
-- [`createTokenizer`](#createTokenizer):
-  A helper for building simple stateful tokenizers (see also [`nanolightTs`](#nanolightTs)).
+- [`createLexer`](#createLexer):
+  A helper for building simple stateful lexers (see also [`nanolightTs`](#nanolightTs)).
 - [`h`](#h):
   A lightweight _HyperScript_-style helper for creating and modifying `HTMLElement`s (see also [`s`](#s)).
 - [`monokai`](#monokai):
-  A Monokai-inspired color scheme for use with the [`c`](#c) helper and [`nanolightTs`](#nanolightTs) tokenizer.
+  A Monokai-inspired color scheme for use with the [`c`](#c) helper and [`nanolightTs`](#nanolightTs) lexer.
 - [`nanolightTs`](#nanolightTs):
-  A TypeScript/JavaScript syntax highlighting tokenizer built using [`createTokenizer`](#createTokenizer).
+  A TypeScript/JavaScript syntax highlighting lexer built using [`createLexer`](#createLexer).
 - [`rwd`](#rwd):
-  A responsive web design helper that generates CSS rules for a grid-like layout.
+  A responsive web design helper that generates CSS rules for a grid-like layout of floating elements.
 - [`s`](#s):
   A lightweight _HyperScript_-style helper for creating and modifying `SVGElement`s (see also [`h`](#h)).
 - [`svgUse`](#svgUse):
-  Shorthand for creating an SVG element with a `<use>` child referencing an icon by ID.
+  Shorthand for creating an `<svg>` element with a `<use>` child referencing a symbol (e.g. an icon) by ID.
 
 ### CNode
 
@@ -89,25 +89,25 @@ type HArgs1 = Record<PropertyKey, unknown> | null | undefined | Node | string |
 
 Single argument type for the [`h`](#h) and [`s`](#s) helpers.
 
-### TokenizerSpec
+### LexerSpec
 
 ```ts
-type TokenizerSpec<M> = [metadata: M, pattern: string | RegExp, options?: TokenizerSpecOptions]
+type LexerSpec<M> = [metadata: M, pattern: string | RegExp, options?: LexerSpecOptions]
 ```
 
-A [`createTokenizer`](#createTokenizer) spec: a `[metadata, pattern, options?]` tuple.
+A [`createLexer`](#createLexer) spec: a `[metadata, pattern, options?]` tuple.
 
-### TokenizerSpecOptions
+### LexerSpecOptions
 
 ```ts
-type TokenizerSpecOptions = {
+type LexerSpecOptions = {
   in?: string | string[]
   pop?: boolean
   push?: string
 }
 ```
 
-Options of a [`createTokenizer`](#createTokenizer) spec controlling the tokenizer state stack.
+Options of a [`createLexer`](#createLexer) spec controlling the lexer state stack.
 
 #### in
 
@@ -133,12 +133,15 @@ A minimal CSS-in-JS helper that converts a JavaScript object hierarchy into a CS
 
 An object describing CSS rules.
 Keys are selectors or at-rules; values are either CSS property values or nested rule objects.
+Nested selectors are appended to the parent selector as is (e.g. `'.c'` inside `a` → `a.c`), so a leading space is needed for a descendant combinator (e.g. `' .c'` → `a .c`).
 A selector key may contain comma-separated alternatives (e.g. `'.b,.c'`); when nested, each alternative is combined with each parent alternative (cartesian product), producing a comma-joined selector list (e.g. `'a.b,a.c'`).
+Top-level at-rules (e.g. `'@media …'`) wrap their nested rules; inside a top-level `:root` rule nested keys are concatenated into property names (e.g. `{ ':root': { '--': { bg: 'red' } } }` → `:root{--bg:red}`).
+`null`/`undefined` values are skipped.
 
 #### splitter
 
 A delimiter used to create unique keys (default: `'$$'`).
-The substring from `splitter` to the end of a key is ignored (e.g., `src$$1` → `src`).
+The substring from `splitter` to the end of a key is ignored (e.g. `src$$1` → `src`).
 
 #### Returns
 
@@ -146,6 +149,8 @@ A CSS string representing the compiled rules.
 
 #### Usage Examples
 
+Nested selectors split a rule while preserving property order:
+
 ```ts
 const actual = c({
   a: {
@@ -173,6 +178,8 @@ const expected = `
 expect(actual).toBe(expected)
 ```
 
+Selectors can be nested at any depth:
+
 ```ts
 const actual = c({
   a: {
@@ -202,6 +209,8 @@ const expected = `
 expect(actual).toBe(expected)
 ```
 
+At-rules, keyframes, media queries and repeated keys with the `$$` suffix:
+
 ```ts
 const actual = c({
   '@font-face$$1': {
@@ -277,6 +286,8 @@ const expected = `
 expect(actual).toBe(expected)
 ```
 
+Comma-separated nested selectors are expanded:
+
 ```ts
 const actual = c({
   a: {
@@ -301,6 +312,8 @@ const expected = `
 expect(actual).toBe(expected)
 ```
 
+Comma-separated top-level selectors are expanded in nested rules:
+
 ```ts
 const actual = c({
   '.b,.c': {
@@ -323,6 +336,8 @@ const expected = `
 expect(actual).toBe(expected)
 ```
 
+Comma-separated selectors at both levels produce all combinations:
+
 ```ts
 const actual = c({
   '.a,.b': {
@@ -345,6 +360,8 @@ const expected = `
 expect(actual).toBe(expected)
 ```
 
+CSS custom properties from nested `--` objects:
+
 ```ts
 const actual = c({
   ':root$$monokai': {
@@ -435,16 +452,16 @@ const expected = `
 expect(actual).toBe(expected)
 ```
 
-### createTokenizer
+### createLexer
 
 ```ts
-const createTokenizer: <M, T>(
+const createLexer: <M, T>(
   decorator: (chunk: string, metadata?: M) => T,
-  ...specs: TokenizerSpec<M>[]
+  ...specs: LexerSpec<M>[]
 ) => (code: string) => T[]
 ```
 
-A helper for building simple stateful tokenizers (see also [`nanolightTs`](#nanolightTs)).
+A helper for building simple stateful lexers (see also [`nanolightTs`](#nanolightTs)).
 
 #### Remarks
 
@@ -457,32 +474,34 @@ A helper for building simple stateful tokenizers (see also [`nanolightTs`](#nano
 
 #### decorator
 
-A function that wraps each matched chunk.
-It receives the matched text (`chunk`) and optionally the `metadata` associated with the pattern that produced the match.
-For unmatched text between patterns, `metadata` is `undefined`.
+A function that wraps each chunk of the input.
+It receives the matched text (`chunk`) and the `metadata` of the spec whose pattern produced the match.
+For unmatched text between matches, `metadata` is `undefined`.
 
 #### specs
 
 An array of tuples `[metadata, pattern, options?]` where:
 
 - `metadata`: arbitrary data (e.g., a CSS class name) passed to `decorator` when the pattern matches.
-- `pattern`: a `string` or `RegExp` to match against the input.
-- `options`: optional [`TokenizerSpecOptions`](#TokenizerSpecOptions) (states in which the spec is active and state transitions).
+- `pattern`: a `string` (matched literally) or `RegExp` to match against the input.
+- `options`: optional [`LexerSpecOptions`](#LexerSpecOptions) (states in which the spec is active and state transitions).
 
 #### Returns
 
-A tokenizer function that accepts a code string and returns an array of decorated tokens.
+A lexer function that accepts an input string and returns an array of decorated chunks covering the whole input (in order).
 
 #### Usage Examples
 
+Tokenizing keywords and strings with `RegExp` patterns:
+
 ```ts
-const tokenizer = createTokenizer(
+const lexer = createLexer(
   (chunk, metadata) => ({ chunk, metadata }),
   ['keyword', /\b(if|else|for)\b/],
   ['string', /"[^"]*"/]
 )
 
-const result = tokenizer('if "hello" else "world"')
+const result = lexer('if "hello" else "world"')
 
 expect(result).toEqual([
   { chunk: 'if', metadata: 'keyword' },
@@ -495,26 +514,32 @@ expect(result).toEqual([
 ])
 ```
 
+String patterns are matched literally and unmatched text gets `undefined` metadata:
+
 ```ts
-const tokenizer = createTokenizer((chunk, metadata) => `${metadata}:${chunk}`, ['tag', 'BEGIN'], ['end', 'END'])
+const lexer = createLexer((chunk, metadata) => `${metadata}:${chunk}`, ['tag', 'BEGIN'], ['end', 'END'])
 
-const result = tokenizer('aBEGINbENDc')
+const result = lexer('aBEGINbENDc')
 
 expect(result).toEqual(['undefined:a', 'tag:BEGIN', 'undefined:b', 'end:END', 'undefined:c'])
 ```
 
+Empty input produces an empty result:
+
 ```ts
-const tokenizer = createTokenizer(chunk => chunk, ['test', /test/])
+const lexer = createLexer(chunk => chunk, ['test', /test/])
 
-const result = tokenizer('')
+const result = lexer('')
 
 expect(result).toEqual([])
 ```
 
+`^` anchors to the start of the whole input:
+
 ```ts
-const tokenizer = createTokenizer((chunk, metadata) => ({ chunk, metadata }), ['start', /^test/])
+const lexer = createLexer((chunk, metadata) => ({ chunk, metadata }), ['start', /^test/])
 
-const result = tokenizer('test here')
+const result = lexer('test here')
 
 expect(result).toEqual([
   { chunk: 'test', metadata: 'start' },
@@ -522,91 +547,111 @@ expect(result).toEqual([
 ])
 ```
 
+Matches starting earlier take precedence regardless of spec order:
+
 ```ts
-const tokenizer = createTokenizer((chunk, metadata) => metadata, ['later', /x/], ['earlier', /y/])
+const lexer = createLexer((chunk, metadata) => metadata, ['later', /x/], ['earlier', /y/])
 
-const result = tokenizer('yx')
+const result = lexer('yx')
 
 expect(result).toEqual(['earlier', 'later'])
 ```
 
+The longer match wins at the same position:
+
 ```ts
-const tokenizer = createTokenizer(chunk => chunk, ['short', 'a'], ['long', 'abc'])
+const lexer = createLexer(chunk => chunk, ['short', 'a'], ['long', 'abc'])
 
-const result = tokenizer('abc')
+const result = lexer('abc')
 
 expect(result).toEqual(['abc'])
 ```
 
+Empty string patterns are ignored:
+
 ```ts
-const tokenizer = createTokenizer(chunk => chunk, ['empty', ''], ['word', /\w+/])
+const lexer = createLexer(chunk => chunk, ['empty', ''], ['word', /\w+/])
 
-const result = tokenizer('hello')
+const result = lexer('hello')
 
 expect(result).toEqual(['hello'])
 ```
 
+Input without any match is returned as a single chunk:
+
 ```ts
-const tokenizer = createTokenizer(chunk => chunk, ['test', /xyz/])
+const lexer = createLexer(chunk => chunk, ['test', /xyz/])
 
-const result = tokenizer('abc')
+const result = lexer('abc')
 
 expect(result).toEqual(['abc'])
 ```
 
+Consecutive matches are returned as separate chunks:
+
 ```ts
-const tokenizer = createTokenizer((_chunk, metadata) => metadata, ['a', 'a'], ['b', 'b'])
+const lexer = createLexer((_chunk, metadata) => metadata, ['a', 'a'], ['b', 'b'])
 
-const result = tokenizer('aabb')
+const result = lexer('aabb')
 
 expect(result).toEqual(['a', 'a', 'b', 'b'])
 ```
 
+Entering and leaving states with `push` and `pop`:
+
 ```ts
-const tokenizer = createTokenizer(
+const lexer = createLexer(
   (chunk, metadata) => `${metadata}:${chunk}`,
   ['open', '(', { push: 'inner' }],
   ['word', /\w+/, { in: 'inner' }],
   ['close', ')', { in: 'inner', pop: true }]
 )
 
-const result = tokenizer('a(b)c)')
+const result = lexer('a(b)c)')
 
 expect(result).toEqual(['undefined:a', 'open:(', 'word:b', 'close:)', 'undefined:c)'])
 ```
 
+Nested states with a spec active in multiple states:
+
 ```ts
-const tokenizer = createTokenizer(
+const lexer = createLexer(
   (chunk, metadata) => `${metadata}:${chunk}`,
   ['open', '{', { in: ['root', 'nested'], push: 'nested' }],
   ['close', '}', { in: 'nested', pop: true }]
 )
 
-const result = tokenizer('{{}}}')
+const result = lexer('{{}}}')
 
 expect(result).toEqual(['open:{', 'open:{', 'close:}', 'close:}', 'undefined:}'])
 ```
 
+Lookbehinds see the text preceding the current position:
+
 ```ts
-const tokenizer = createTokenizer((chunk, metadata) => `${metadata}:${chunk}`, ['a', 'a'], ['b', /(?<=a)b/])
+const lexer = createLexer((chunk, metadata) => `${metadata}:${chunk}`, ['a', 'a'], ['b', /(?<=a)b/])
 
-const result = tokenizer('abcb')
+const result = lexer('abcb')
 
 expect(result).toEqual(['a:a', 'b:b', 'undefined:cb'])
 ```
 
+Sticky patterns match only at the current position:
+
 ```ts
-const tokenizer = createTokenizer((chunk, metadata) => `${metadata}:${chunk}`, ['x', /x/y], ['y', 'y'])
+const lexer = createLexer((chunk, metadata) => `${metadata}:${chunk}`, ['x', /x/y], ['y', 'y'])
 
-const result = tokenizer('xyx.x')
+const result = lexer('xyx.x')
 
 expect(result).toEqual(['x:x', 'y:y', 'x:x', 'undefined:.x'])
 ```
 
+Empty `RegExp` matches are skipped:
+
 ```ts
-const tokenizer = createTokenizer((chunk, metadata) => `${metadata}:${chunk}`, ['digits', /\d*/])
+const lexer = createLexer((chunk, metadata) => `${metadata}:${chunk}`, ['digits', /\d*/])
 
-const result = tokenizer('ab12')
+const result = lexer('ab12')
 
 expect(result).toEqual(['undefined:ab', 'digits:12'])
 ```
@@ -615,9 +660,9 @@ expect(result).toEqual(['undefined:ab', 'digits:12'])
 
 ```ts
 const h: {
-  <T extends keyof HTMLElementTagNameMap>(tag: T, ...args1: HArgs1[]): HTMLElementTagNameMap[T]
-  <N extends Node>(node: N, ...args1: HArgs1[]): N
-  (tagOrNode: string | Node, ...args1: HArgs1[]): Node
+  <T extends keyof HTMLElementTagNameMap>(tag: T, ...args: HArgs1[]): HTMLElementTagNameMap[T]
+  <N extends Node>(node: N, ...args: HArgs1[]): N
+  (tagOrNode: string | Node, ...args: HArgs1[]): Node
 }
 ```
 
@@ -633,20 +678,22 @@ If a `Node`, that node is modified in place.
 Additional arguments processed as follows:
 
 - `Object`: maps attributes/properties.
-  Keys starting with `$` set element properties (without the `$` prefix); if the value is a plain object, it is shallow-merged into the existing property instead of replacing it (useful e.g. for `$style`).
-  Other keys set attributes: a key prefixed with `xlink:` sets the attribute via `setAttributeNS` in the XLink namespace; any other key (without a colon) sets it via `setAttribute`.
-  A value of `false` removes the attribute.
+  - Keys starting with `$` set element properties (without the `$` prefix); if the value is a plain object, it is shallow-merged into the existing property instead of replacing it (useful e.g. for `$style`).
+  - Other keys set attributes: a key prefixed with `xlink:` sets the attribute via `setAttributeNS` in the XLink namespace; any other key (without a colon) sets it via `setAttribute`.
+    A value of `true` sets an empty attribute (e.g. `checked=""`), a value of `false` removes the attribute.
 - `null`/`undefined`: ignored.
 - `Node`: appended as a child.
 - `string`/`number`: converted to a `Text` node and appended.
-- [`HArgs`](#HArgs) array: processed recursively.
+- [`HArgs`](#HArgs) array: processed recursively (creates or modifies a child node and appends it).
 
 #### Returns
 
-The created or modified `HTMLElement`.
+The created `HTMLElement` or the modified node.
 
 #### Usage Examples
 
+Creating elements, appending children and setting properties:
+
 ```ts
 const b = h('b')
 
@@ -667,6 +714,8 @@ expect(i.outerHTML).toBe('<i class="some class">text</i>')
 expect(b.outerHTML).toBe('<b><i class="some class">text</i></b>')
 ```
 
+Text content from strings, numbers and `$innerText`:
+
 ```ts
 expect(h('span', 'text').outerHTML).toBe('<span>text</span>')
 
@@ -677,6 +726,8 @@ expect(h('span', '42').outerHTML).toBe('<span>42</span>')
 expect(h('span', 42).outerHTML).toBe('<span>42</span>')
 ```
 
+`style` attribute vs `$style` property (string or object):
+
 ```ts
 expect(h('div', { style: 'margin:0;padding:0' }).outerHTML).toBe('<div style="margin:0;padding:0"></div>')
 
@@ -687,6 +738,8 @@ expect(h('div', { $style: { margin: 0, padding: 0 } }).outerHTML).toBe(
 )
 ```
 
+`value` attribute vs `$value` property:
+
 ```ts
 const input1 = h('input', { value: 42 })
 const input2 = h('input', { $value: '42' })
@@ -698,6 +751,8 @@ expect(input1.outerHTML).toBe('<input value="42">')
 expect(input2.outerHTML).toBe('<input>')
 ```
 
+`checked` attribute vs `$checked` property:
+
 ```ts
 const checkbox1 = h('input', {
   type: 'checkbox',
@@ -717,6 +772,8 @@ expect(checkbox1.outerHTML).toBe('<input type="checkbox" checked="">')
 expect(checkbox2.outerHTML).toBe('<input type="checkbox">')
 ```
 
+Object values of `$`-prefixed properties are merged:
+
 ```ts
 const div = h('div')
 
@@ -731,6 +788,8 @@ h(div, { $key: { two: 2 } })
 expect(div.key).toEqual({ one: 1, two: 2 })
 ```
 
+Class attribute, appending text and nested children given as arrays:
+
 ```ts
 const elemWithClass = h('div', { class: 'test' })
 
@@ -753,7 +812,29 @@ expect(elemWithNested.outerHTML).toBe('<div><span>hello</span><b>world</b></div>
 const monokai: CNode
 ```
 
-A Monokai-inspired color scheme for use with the [`c`](#c) helper and [`nanolightTs`](#nanolightTs) tokenizer.
+A Monokai-inspired color scheme for use with the [`c`](#c) helper and [`nanolightTs`](#nanolightTs) lexer.
+It styles `pre` and `code>span` elements with the class names produced by [`nanolightTs`](#nanolightTs) (with light, dark and print variants).
+
+#### Usage Examples
+
+Styling `nanolightTs` output:
+
+```ts
+const style = h('style', c(monokai))
+const pre = h('pre', ['code', ...nanolightTs('const x = 42')])
+
+expect(style.textContent).toContain('code>span.keyword1{color:var(--keyword1)}')
+expect(style.textContent).toContain('code>span.regexp{color:var(--regexp)}')
+expect(style.textContent).toContain('@media only screen and (prefers-color-scheme: dark){:root{--bg:#2d2a2e;')
+expect(pre.outerHTML).toBe(
+  '<pre><code>' +
+    '<span class="keyword1">const</span> ' +
+    '<span class="identifier4">x</span> ' +
+    '<span class="operator">=</span> ' +
+    '<span class="number">42</span>' +
+    '</code></pre>'
+)
+```
 
 ### nanolightTs
 
@@ -761,7 +842,7 @@ A Monokai-inspired color scheme for use with the [`c`](#c) helper and [`nanoligh
 const nanolightTs: (code: string) => HArgs1[]
 ```
 
-A TypeScript/JavaScript syntax highlighting tokenizer built using [`createTokenizer`](#createTokenizer).
+A TypeScript/JavaScript syntax highlighting lexer built using [`createLexer`](#createLexer).
 
 #### code
 
@@ -769,10 +850,12 @@ The source code string to tokenize.
 
 #### Returns
 
-An array of [`HArgs1`](#HArgs1) elements suitable for rendering with [`h`](#h).
+An array of [`HArgs1`](#HArgs1) elements suitable for rendering with [`h`](#h): plain `string`s for unrecognized text (e.g. whitespace) and `['span', { class }, chunk]` tuples for recognized tokens (class names are styled by [`monokai`](#monokai)).
 
 #### Usage Examples
 
+Keywords, identifiers, operators, numbers, punctuation, strings and comments:
+
 ```ts
 const codeJs = 'const answerToLifeTheUniverseAndEverything = ' + "{ 42: 42 }['42'] /* 42 */"
 
@@ -799,78 +882,280 @@ expect(nanolightTs(codeJs)).toEqual([
 ])
 ```
 
+Line comments:
+
+```ts
+const codeJs = 'const x = 42 // answer'
+
+expect(nanolightTs(codeJs)).toEqual([
+  ['span', { class: 'keyword1' }, 'const'],
+  ' ',
+  ['span', { class: 'identifier4' }, 'x'],
+  ' ',
+  ['span', { class: 'operator' }, '='],
+  ' ',
+  ['span', { class: 'number' }, '42'],
+  ' ',
+  ['span', { class: 'comment' }, '// answer'],
+])
+```
+
+Regex literals vs division:
+
+```ts
+expect(nanolightTs('x = /a\\/b[/]c/gi.test(y) / 2')).toEqual([
+  ['span', { class: 'identifier4' }, 'x'],
+  ' ',
+  ['span', { class: 'operator' }, '='],
+  ' ',
+  ['span', { class: 'regexp' }, '/'],
+  ['span', { class: 'regexp' }, 'a'],
+  ['span', { class: 'keyword2' }, '\\/'],
+  ['span', { class: 'regexp' }, 'b'],
+  ['span', { class: 'punctuation' }, '['],
+  ['span', { class: 'regexp' }, '/'],
+  ['span', { class: 'punctuation' }, ']'],
+  ['span', { class: 'regexp' }, 'c'],
+  ['span', { class: 'regexp' }, '/'],
+  ['span', { class: 'keyword1' }, 'gi'],
+  ['span', { class: 'punctuation' }, '.'],
+  ['span', { class: 'identifier2' }, 'test'],
+  ['span', { class: 'punctuation' }, '('],
+  ['span', { class: 'identifier4' }, 'y'],
+  ['span', { class: 'punctuation' }, ')'],
+  ' ',
+  ['span', { class: 'operator' }, '/'],
+  ' ',
+  ['span', { class: 'number' }, '2'],
+])
+
+expect(nanolightTs('a / b / c')).toEqual([
+  ['span', { class: 'identifier4' }, 'a'],
+  ' ',
+  ['span', { class: 'operator' }, '/'],
+  ' ',
+  ['span', { class: 'identifier4' }, 'b'],
+  ' ',
+  ['span', { class: 'operator' }, '/'],
+  ' ',
+  ['span', { class: 'identifier4' }, 'c'],
+])
+
+expect(nanolightTs('return / x /')).toEqual([
+  ['span', { class: 'keyword1' }, 'return'],
+  ' ',
+  ['span', { class: 'regexp' }, '/'],
+  ['span', { class: 'regexp' }, ' x '],
+  ['span', { class: 'regexp' }, '/'],
+])
+
+expect(nanolightTs('x = /=/g')).toEqual([
+  ['span', { class: 'identifier4' }, 'x'],
+  ' ',
+  ['span', { class: 'operator' }, '='],
+  ' ',
+  ['span', { class: 'regexp' }, '/='],
+  ['span', { class: 'regexp' }, '/'],
+  ['span', { class: 'keyword1' }, 'g'],
+])
+```
+
+Nested template literals with substitutions:
+
 ```ts
-expect(classes('x = /a\\/b[/]c/gi.test(y) / 2')).toEqual([
-  'identifier4:x',
+expect(nanolightTs('`a ${b + `c ${ {d}.d }`} \\${e} $f`')).toEqual([
+  ['span', { class: 'string' }, '`a '],
+  ['span', { class: 'punctuation' }, '${'],
+  ['span', { class: 'identifier4' }, 'b'],
   ' ',
-  'operator:=',
+  ['span', { class: 'operator' }, '+'],
   ' ',
-  'string:/a\\/b[/]c/gi',
-  'punctuation:.',
-  'identifier2:test',
-  'punctuation:(',
-  'identifier4:y',
-  'punctuation:)',
+  ['span', { class: 'string' }, '`c '],
+  ['span', { class: 'punctuation' }, '${'],
   ' ',
-  'operator:/',
+  ['span', { class: 'punctuation' }, '{'],
+  ['span', { class: 'identifier4' }, 'd'],
+  ['span', { class: 'punctuation' }, '}'],
+  ['span', { class: 'punctuation' }, '.'],
+  ['span', { class: 'identifier4' }, 'd'],
   ' ',
-  'number:2',
+  ['span', { class: 'punctuation' }, '}'],
+  ['span', { class: 'string' }, '`'],
+  ['span', { class: 'punctuation' }, '}'],
+  ['span', { class: 'string' }, ' \\${e} $f`'],
 ])
 
-expect(classes('a / b / c')).toEqual([
-  'identifier4:a',
+expect(nanolightTs('`${x}` / 2')).toEqual([
+  ['span', { class: 'string' }, '`'],
+  ['span', { class: 'punctuation' }, '${'],
+  ['span', { class: 'identifier4' }, 'x'],
+  ['span', { class: 'punctuation' }, '}'],
+  ['span', { class: 'string' }, '`'],
   ' ',
-  'operator:/',
+  ['span', { class: 'operator' }, '/'],
   ' ',
-  'identifier4:b',
+  ['span', { class: 'number' }, '2'],
+])
+```
+
+Comment markers inside strings and unterminated comments:
+
+```ts
+expect(nanolightTs('"a // b" // c')).toEqual([
+  ['span', { class: 'string' }, '"a // b"'],
   ' ',
-  'operator:/',
+  ['span', { class: 'comment' }, '// c'],
+])
+
+expect(nanolightTs("'it\\'s' /* x")).toEqual([
+  ['span', { class: 'string' }, "'it\\'s'"],
   ' ',
-  'identifier4:c',
+  ['span', { class: 'comment' }, '/* x'],
 ])
+```
+
+Hexadecimal, BigInt, numeric separators and exponents:
 
-expect(classes('return / x /')).toEqual(['keyword1:return', ' ', 'string:/ x /'])
+```ts
+expect(nanolightTs('0xFF + 1_000n + .5e-3')).toEqual([
+  ['span', { class: 'number' }, '0xFF'],
+  ' ',
+  ['span', { class: 'operator' }, '+'],
+  ' ',
+  ['span', { class: 'number' }, '1_000n'],
+  ' ',
+  ['span', { class: 'operator' }, '+'],
+  ' ',
+  ['span', { class: 'number' }, '.5e-3'],
+])
 ```
 
+Division after `++` and optional chaining vs ternary with decimals:
+
 ```ts
-expect(classes('`a ${b + `c ${ {d}.d }`} \\${e} $f`')).toEqual([
-  'string:`a ',
-  'punctuation:${',
-  'identifier4:b',
+expect(nanolightTs('a++ / 2 / b')).toEqual([
+  ['span', { class: 'identifier4' }, 'a'],
+  ['span', { class: 'operator' }, '++'],
+  ' ',
+  ['span', { class: 'operator' }, '/'],
   ' ',
-  'operator:+',
+  ['span', { class: 'number' }, '2'],
   ' ',
-  'string:`c ',
-  'punctuation:${',
+  ['span', { class: 'operator' }, '/'],
   ' ',
-  'punctuation:{',
-  'identifier4:d',
-  'punctuation:}',
-  'punctuation:.',
-  'identifier4:d',
+  ['span', { class: 'identifier4' }, 'b'],
+])
+
+expect(nanolightTs('x?.5:a?.b')).toEqual([
+  ['span', { class: 'identifier4' }, 'x'],
+  ['span', { class: 'operator' }, '?'],
+  ['span', { class: 'number' }, '.5'],
+  ['span', { class: 'operator' }, ':'],
+  ['span', { class: 'identifier4' }, 'a'],
+  ['span', { class: 'punctuation' }, '?.'],
+  ['span', { class: 'identifier4' }, 'b'],
+])
+```
+
+Keywords as property names and method calls:
+
+```ts
+expect(nanolightTs('p.catch(obj.in, ...this)')).toEqual([
+  ['span', { class: 'identifier4' }, 'p'],
+  ['span', { class: 'punctuation' }, '.'],
+  ['span', { class: 'identifier2' }, 'catch'],
+  ['span', { class: 'punctuation' }, '('],
+  ['span', { class: 'identifier4' }, 'obj'],
+  ['span', { class: 'punctuation' }, '.'],
+  ['span', { class: 'identifier4' }, 'in'],
+  ['span', { class: 'punctuation' }, ','],
   ' ',
-  'punctuation:}',
-  'string:`',
-  'punctuation:}',
-  'string: \\${e} $f`',
+  ['span', { class: 'operator' }, '...'],
+  ['span', { class: 'keyword1' }, 'this'],
+  ['span', { class: 'punctuation' }, ')'],
 ])
+```
 
-expect(classes('`${x}` / 2')).toEqual([
-  'string:`',
-  'punctuation:${',
-  'identifier4:x',
-  'punctuation:}',
-  'string:`',
+Hashbang, decorators and private class members:
+
+```ts
+expect(nanolightTs('#!/usr/bin/env bun\n@sealed class A { #x = 1 }')).toEqual([
+  ['span', { class: 'comment' }, '#!/usr/bin/env bun'],
+  '\n',
+  ['span', { class: 'identifier2' }, '@sealed'],
+  ' ',
+  ['span', { class: 'keyword1' }, 'class'],
+  ' ',
+  ['span', { class: 'identifier1' }, 'A'],
   ' ',
-  'operator:/',
+  ['span', { class: 'punctuation' }, '{'],
+  ' ',
+  ['span', { class: 'identifier4' }, '#x'],
+  ' ',
+  ['span', { class: 'operator' }, '='],
   ' ',
-  'number:2',
+  ['span', { class: 'number' }, '1'],
+  ' ',
+  ['span', { class: 'punctuation' }, '}'],
 ])
 ```
 
+Escapes, anchors, quantifiers, groups, character sets and flags inside regex literals:
+
 ```ts
-expect(classes('"a // b" // c')).toEqual(['string:"a // b"', ' ', 'comment:// c'])
-expect(classes("'it\\'s' /* x")).toEqual(["string:'it\\'s'", ' ', 'comment:/* x'])
+expect(nanolightTs('/^(?:\\d{1,3}|[^a-z\\]])+?\\b(?<year>\\d{4})-\\k<year>\\1$/u')).toEqual([
+  ['span', { class: 'regexp' }, '/'],
+  ['span', { class: 'keyword1' }, '^'],
+  ['span', { class: 'punctuation' }, '(?:'],
+  ['span', { class: 'keyword3' }, '\\d'],
+  ['span', { class: 'operator' }, '{1,3}'],
+  ['span', { class: 'operator' }, '|'],
+  ['span', { class: 'punctuation' }, '['],
+  ['span', { class: 'operator' }, '^'],
+  ['span', { class: 'regexp' }, 'a'],
+  ['span', { class: 'operator' }, '-'],
+  ['span', { class: 'regexp' }, 'z'],
+  ['span', { class: 'keyword2' }, '\\]'],
+  ['span', { class: 'punctuation' }, ']'],
+  ['span', { class: 'punctuation' }, ')'],
+  ['span', { class: 'operator' }, '+?'],
+  ['span', { class: 'keyword1' }, '\\b'],
+  ['span', { class: 'punctuation' }, '(?<'],
+  ['span', { class: 'identifier2' }, 'year'],
+  ['span', { class: 'punctuation' }, '>'],
+  ['span', { class: 'keyword3' }, '\\d'],
+  ['span', { class: 'operator' }, '{4}'],
+  ['span', { class: 'punctuation' }, ')'],
+  ['span', { class: 'regexp' }, '-'],
+  ['span', { class: 'identifier2' }, '\\k<year>'],
+  ['span', { class: 'identifier2' }, '\\1'],
+  ['span', { class: 'keyword1' }, '$'],
+  ['span', { class: 'regexp' }, '/'],
+  ['span', { class: 'keyword1' }, 'u'],
+])
+
+expect(nanolightTs('/(?<=\\$)(?!0)\\p{L}+\\.\\u{1F600}|\\x41[.\\b-]/v')).toEqual([
+  ['span', { class: 'regexp' }, '/'],
+  ['span', { class: 'punctuation' }, '(?<='],
+  ['span', { class: 'keyword2' }, '\\$'],
+  ['span', { class: 'punctuation' }, ')'],
+  ['span', { class: 'punctuation' }, '(?!'],
+  ['span', { class: 'regexp' }, '0'],
+  ['span', { class: 'punctuation' }, ')'],
+  ['span', { class: 'keyword3' }, '\\p{L}'],
+  ['span', { class: 'operator' }, '+'],
+  ['span', { class: 'keyword2' }, '\\.'],
+  ['span', { class: 'keyword2' }, '\\u{1F600}'],
+  ['span', { class: 'operator' }, '|'],
+  ['span', { class: 'keyword2' }, '\\x41'],
+  ['span', { class: 'punctuation' }, '['],
+  ['span', { class: 'regexp' }, '.'],
+  ['span', { class: 'keyword2' }, '\\b'],
+  ['span', { class: 'regexp' }, '-'],
+  ['span', { class: 'punctuation' }, ']'],
+  ['span', { class: 'regexp' }, '/'],
+  ['span', { class: 'keyword1' }, 'v'],
+])
 ```
 
 ### rwd
@@ -885,7 +1170,8 @@ const rwd: (
 ) => void
 ```
 
-A responsive web design helper that generates CSS rules for a grid-like layout.
+A responsive web design helper that generates CSS rules for a grid-like layout of floating elements.
+It modifies `root` in place: it sets base styles for `selector` and adds a `@media(min-width:…px)` rule for each breakpoint.
 
 #### root
 
@@ -907,12 +1193,14 @@ The base cell height in pixels.
 
 An array of breakpoint specifications, each a tuple of:
 
-- `maxWidth`: maximum number of cells per row (defines the viewport breakpoint).
+- `maxWidth`: number of cells per row; the breakpoint is `min-width: cellWidthPx * maxWidth` (`1` modifies the base rule).
 - `width` (optional, default `1`): number of horizontal cells the element spans.
 - `height` (optional, default `1`): number of vertical cells the element spans.
 
 #### Usage Examples
 
+Responsive grid cell widths and heights with media queries:
+
 ```ts
 const style: CNode = {
   body: {
@@ -937,7 +1225,7 @@ expect(style).toEqual({
     '.no-border': {
       border: 'none',
     },
-    boxSizing: 'border-box',
+    'box-sizing': 'border-box',
     display: 'block',
     float: 'left',
     width: '100%',
@@ -962,9 +1250,9 @@ expect(style).toEqual({
 
 ```ts
 const s: {
-  <T extends keyof SVGElementTagNameMap>(tag: T, ...args1: HArgs1[]): SVGElementTagNameMap[T]
-  <N extends Node>(node: N, ...args1: HArgs1[]): N
-  (tagOrNode: string | Node, ...args1: HArgs1[]): Node
+  <T extends keyof SVGElementTagNameMap>(tag: T, ...args: HArgs1[]): SVGElementTagNameMap[T]
+  <N extends Node>(node: N, ...args: HArgs1[]): N
+  (tagOrNode: string | Node, ...args: HArgs1[]): Node
 }
 ```
 
@@ -980,38 +1268,46 @@ If a `Node`, that node is modified in place.
 Additional arguments processed as follows:
 
 - `Object`: maps attributes/properties.
-  Keys starting with `$` set element properties (without the `$` prefix); if the value is a plain object, it is shallow-merged into the existing property instead of replacing it.
-  Other keys set attributes: a key prefixed with `xlink:` sets the attribute via `setAttributeNS` in the XLink namespace; any other key (without a colon) sets it via `setAttribute`.
-  A value of `false` removes the attribute.
+  - Keys starting with `$` set element properties (without the `$` prefix); if the value is a plain object, it is shallow-merged into the existing property instead of replacing it.
+  - Other keys set attributes: a key prefixed with `xlink:` sets the attribute via `setAttributeNS` in the XLink namespace; any other key (without a colon) sets it via `setAttribute`.
+    A value of `true` sets an empty attribute (e.g. `checked=""`), a value of `false` removes the attribute.
 - `null`/`undefined`: ignored.
 - `Node`: appended as a child.
 - `string`/`number`: converted to a `Text` node and appended.
-- [`HArgs`](#HArgs) array: processed recursively.
+- [`HArgs`](#HArgs) array: processed recursively (creates or modifies a child node and appends it).
 
 #### Returns
 
-The created or modified `SVGElement`.
+The created `SVGElement` or the modified node.
 
 #### Usage Examples
 
+Namespaced `xlink:` attribute set to `true` gets an empty value:
+
 ```ts
 const svg = s('svg', { 'xlink:href': true })
 
 expect(svg.getAttributeNS('http://www.w3.org/1999/xlink', 'href')).toBe('')
 ```
 
+Namespaced `xlink:` attribute set to `false` is not set:
+
 ```ts
 const svg = s('svg', { 'xlink:href': false })
 
 expect(svg.getAttributeNS('http://www.w3.org/1999/xlink', 'href')).toBeNull()
 ```
 
+Namespaced `xlink:` attribute with a string value:
+
 ```ts
 const svg = s('svg', { 'xlink:href': 'http://example.com' })
 
 expect(svg.getAttributeNS('http://www.w3.org/1999/xlink', 'href')).toBe('http://example.com')
 ```
 
+Namespaced `xlink:` attribute with a number value:
+
 ```ts
 const svg = s('svg', { 'xlink:title': 42 })
 
@@ -1024,7 +1320,7 @@ expect(svg.getAttributeNS('http://www.w3.org/1999/xlink', 'title')).toBe('42')
 const svgUse: (id: string, ...args: HArgs1[]) => SVGSVGElement
 ```
 
-Shorthand for creating an SVG element with a `<use>` child referencing an icon by ID.
+Shorthand for creating an `<svg>` element with a `<use>` child referencing a symbol (e.g. an icon) by ID.
 
 Equivalent to:
 
@@ -1046,6 +1342,8 @@ An `SVGSVGElement` containing a `<use>` element.
 
 #### Usage Examples
 
+SVG `use` element referencing a symbol, with extra attributes:
+
 ```ts
 const svg = svgUse('icon-home')
 

package/nnn.d.ts

@@ -9,12 +9,15 @@ export type CNode = {
  *
  * An object describing CSS rules.
  * Keys are selectors or at-rules; values are either CSS property values or nested rule objects.
+ * Nested selectors are appended to the parent selector as is (e.g. `'.c'` inside `a` → `a.c`), so a leading space is needed for a descendant combinator (e.g. `' .c'` → `a .c`).
  * A selector key may contain comma-separated alternatives (e.g. `'.b,.c'`); when nested, each alternative is combined with each parent alternative (cartesian product), producing a comma-joined selector list (e.g. `'a.b,a.c'`).
+ * Top-level at-rules (e.g. `'@media …'`) wrap their nested rules; inside a top-level `:root` rule nested keys are concatenated into property names (e.g. `{ ':root': { '--': { bg: 'red' } } }` → `:root{--bg:red}`).
+ * `null`/`undefined` values are skipped.
  *
  * @param splitter
  *
  * A delimiter used to create unique keys (default: `'$$'`).
- * The substring from `splitter` to the end of a key is ignored (e.g., `src$$1` → `src`).
+ * The substring from `splitter` to the end of a key is ignored (e.g. `src$$1` → `src`).
  *
  * @returns
  *
@@ -22,7 +25,7 @@ export type CNode = {
  */
 export declare const c: (node: CNode, splitter?: string) => string
 /**
- * Options of a {@link createTokenizer} spec controlling the tokenizer state stack.
+ * Options of a {@link createLexer} spec controlling the lexer state stack.
  *
  * @property in
  *
@@ -36,15 +39,15 @@ export declare const c: (node: CNode, splitter?: string) => string
  *
  * State to push onto the stack after a match (applied after `pop`).
  */
-export type TokenizerSpecOptions = {
+export type LexerSpecOptions = {
   in?: string | string[]
   pop?: boolean
   push?: string
 }
-/** A {@link createTokenizer} spec: a `[metadata, pattern, options?]` tuple. */
-export type TokenizerSpec<M> = [metadata: M, pattern: string | RegExp, options?: TokenizerSpecOptions]
+/** A {@link createLexer} spec: a `[metadata, pattern, options?]` tuple. */
+export type LexerSpec<M> = [metadata: M, pattern: string | RegExp, options?: LexerSpecOptions]
 /**
- * A helper for building simple stateful tokenizers (see also {@link nanolightTs}).
+ * A helper for building simple stateful lexers (see also {@link nanolightTs}).
  *
  * @remarks
  *
@@ -57,25 +60,25 @@ export type TokenizerSpec<M> = [metadata: M, pattern: string | RegExp, options?:
  *
  * @param decorator
  *
- * A function that wraps each matched chunk.
- * It receives the matched text (`chunk`) and optionally the `metadata` associated with the pattern that produced the match.
- * For unmatched text between patterns, `metadata` is `undefined`.
+ * A function that wraps each chunk of the input.
+ * It receives the matched text (`chunk`) and the `metadata` of the spec whose pattern produced the match.
+ * For unmatched text between matches, `metadata` is `undefined`.
  *
  * @param specs
  *
  * An array of tuples `[metadata, pattern, options?]` where:
  *
  * - `metadata`: arbitrary data (e.g., a CSS class name) passed to `decorator` when the pattern matches.
- * - `pattern`: a `string` or `RegExp` to match against the input.
- * - `options`: optional {@link TokenizerSpecOptions} (states in which the spec is active and state transitions).
+ * - `pattern`: a `string` (matched literally) or `RegExp` to match against the input.
+ * - `options`: optional {@link LexerSpecOptions} (states in which the spec is active and state transitions).
  *
  * @returns
  *
- * A tokenizer function that accepts a code string and returns an array of decorated tokens.
+ * A lexer function that accepts an input string and returns an array of decorated chunks covering the whole input (in order).
  */
-export declare const createTokenizer: <M, T>(
+export declare const createLexer: <M, T>(
   decorator: (chunk: string, metadata?: M) => T,
-  ...specs: TokenizerSpec<M>[]
+  ...specs: LexerSpec<M>[]
 ) => (code: string) => T[]
 /** Single argument type for the {@link h} and {@link s} helpers. */
 export type HArgs1 = Record<PropertyKey, unknown> | null | undefined | Node | string | number | HArgs
@@ -94,22 +97,22 @@ export type HArgs = [string | Node, ...HArgs1[]]
  * Additional arguments processed as follows:
  *
  * - `Object`: maps attributes/properties.
- *   Keys starting with `$` set element properties (without the `$` prefix); if the value is a plain object, it is shallow-merged into the existing property instead of replacing it (useful e.g. for `$style`).
- *   Other keys set attributes: a key prefixed with `xlink:` sets the attribute via `setAttributeNS` in the XLink namespace; any other key (without a colon) sets it via `setAttribute`.
- *   A value of `false` removes the attribute.
+ *   - Keys starting with `$` set element properties (without the `$` prefix); if the value is a plain object, it is shallow-merged into the existing property instead of replacing it (useful e.g. for `$style`).
+ *   - Other keys set attributes: a key prefixed with `xlink:` sets the attribute via `setAttributeNS` in the XLink namespace; any other key (without a colon) sets it via `setAttribute`.
+ *     A value of `true` sets an empty attribute (e.g. `checked=""`), a value of `false` removes the attribute.
  * - `null`/`undefined`: ignored.
  * - `Node`: appended as a child.
  * - `string`/`number`: converted to a `Text` node and appended.
- * - {@link HArgs} array: processed recursively.
+ * - {@link HArgs} array: processed recursively (creates or modifies a child node and appends it).
  *
  * @returns
  *
- * The created or modified `HTMLElement`.
+ * The created `HTMLElement` or the modified node.
  */
 export declare const h: {
-  <T extends keyof HTMLElementTagNameMap>(tag: T, ...args1: HArgs1[]): HTMLElementTagNameMap[T]
-  <N extends Node>(node: N, ...args1: HArgs1[]): N
-  (tagOrNode: string | Node, ...args1: HArgs1[]): Node
+  <T extends keyof HTMLElementTagNameMap>(tag: T, ...args: HArgs1[]): HTMLElementTagNameMap[T]
+  <N extends Node>(node: N, ...args: HArgs1[]): N
+  (tagOrNode: string | Node, ...args: HArgs1[]): Node
 }
 /**
  * A lightweight _HyperScript_-style helper for creating and modifying `SVGElement`s (see also {@link h}).
@@ -124,25 +127,25 @@ export declare const h: {
  * Additional arguments processed as follows:
  *
  * - `Object`: maps attributes/properties.
- *   Keys starting with `$` set element properties (without the `$` prefix); if the value is a plain object, it is shallow-merged into the existing property instead of replacing it.
- *   Other keys set attributes: a key prefixed with `xlink:` sets the attribute via `setAttributeNS` in the XLink namespace; any other key (without a colon) sets it via `setAttribute`.
- *   A value of `false` removes the attribute.
+ *   - Keys starting with `$` set element properties (without the `$` prefix); if the value is a plain object, it is shallow-merged into the existing property instead of replacing it.
+ *   - Other keys set attributes: a key prefixed with `xlink:` sets the attribute via `setAttributeNS` in the XLink namespace; any other key (without a colon) sets it via `setAttribute`.
+ *     A value of `true` sets an empty attribute (e.g. `checked=""`), a value of `false` removes the attribute.
  * - `null`/`undefined`: ignored.
  * - `Node`: appended as a child.
  * - `string`/`number`: converted to a `Text` node and appended.
- * - {@link HArgs} array: processed recursively.
+ * - {@link HArgs} array: processed recursively (creates or modifies a child node and appends it).
  *
  * @returns
  *
- * The created or modified `SVGElement`.
+ * The created `SVGElement` or the modified node.
  */
 export declare const s: {
-  <T extends keyof SVGElementTagNameMap>(tag: T, ...args1: HArgs1[]): SVGElementTagNameMap[T]
-  <N extends Node>(node: N, ...args1: HArgs1[]): N
-  (tagOrNode: string | Node, ...args1: HArgs1[]): Node
+  <T extends keyof SVGElementTagNameMap>(tag: T, ...args: HArgs1[]): SVGElementTagNameMap[T]
+  <N extends Node>(node: N, ...args: HArgs1[]): N
+  (tagOrNode: string | Node, ...args: HArgs1[]): Node
 }
 /**
- * Shorthand for creating an SVG element with a `<use>` child referencing an icon by ID.
+ * Shorthand for creating an `<svg>` element with a `<use>` child referencing a symbol (e.g. an icon) by ID.
  *
  * Equivalent to:
  *
@@ -164,11 +167,12 @@ export declare const s: {
  */
 export declare const svgUse: (id: string, ...args: HArgs1[]) => SVGSVGElement
 /**
- * A Monokai-inspired color scheme for use with the {@link c} helper and {@link nanolightTs} tokenizer.
+ * A Monokai-inspired color scheme for use with the {@link c} helper and {@link nanolightTs} lexer.
+ * It styles `pre` and `code>span` elements with the class names produced by {@link nanolightTs} (with light, dark and print variants).
  */
 export declare const monokai: CNode
 /**
- * A TypeScript/JavaScript syntax highlighting tokenizer built using {@link createTokenizer}.
+ * A TypeScript/JavaScript syntax highlighting lexer built using {@link createLexer}.
  *
  * @param code
  *
@@ -176,11 +180,12 @@ export declare const monokai: CNode
  *
  * @returns
  *
- * An array of {@link HArgs1} elements suitable for rendering with {@link h}.
+ * An array of {@link HArgs1} elements suitable for rendering with {@link h}: plain `string`s for unrecognized text (e.g. whitespace) and `['span', { class }, chunk]` tuples for recognized tokens (class names are styled by {@link monokai}).
  */
 export declare const nanolightTs: (code: string) => HArgs1[]
 /**
- * A responsive web design helper that generates CSS rules for a grid-like layout.
+ * A responsive web design helper that generates CSS rules for a grid-like layout of floating elements.
+ * It modifies `root` in place: it sets base styles for `selector` and adds a `@media(min-width:…px)` rule for each breakpoint.
  *
  * @param root
  *
@@ -202,7 +207,7 @@ export declare const nanolightTs: (code: string) => HArgs1[]
  *
  * An array of breakpoint specifications, each a tuple of:
  *
- * - `maxWidth`: maximum number of cells per row (defines the viewport breakpoint).
+ * - `maxWidth`: number of cells per row; the breakpoint is `min-width: cellWidthPx * maxWidth` (`1` modifies the base rule).
  * - `width` (optional, default `1`): number of horizontal cells the element spans.
  * - `height` (optional, default `1`): number of vertical cells the element spans.
  */

package/nnn.js

@@ -50,9 +50,9 @@ var _c = (node, splitter = DEFAULT_SPLITTER, prefix = "", flatten = false) => {
   return out.join(flatten ? ";" : "");
 };
 var c = (node, splitter = DEFAULT_SPLITTER) => _c(node, splitter);
-// src/nnn/createTokenizer.ts
+// src/nnn/createLexer.ts
 var ROOT = "root";
-var createTokenizer = (decorator, ...specs) => {
+var createLexer = (decorator, ...specs) => {
   const compiled = specs.map(([metadata, pattern, options]) => ({
     metadata,
     pattern: pattern instanceof RegExp ? new RegExp(pattern.source, pattern.sticky ? pattern.flags : pattern.flags.replace("g", "") + "g") : pattern,
@@ -201,6 +201,7 @@ var monokai = {
       number: "#7058be",
       operator: "#e14775",
       punctuation: "#918c8e",
+      regexp: "#e16032",
       string: "#cc7a0a"
     }
   },
@@ -233,6 +234,7 @@ var monokai = {
     number: { color: "var(--number)" },
     operator: { color: "var(--operator)" },
     punctuation: { color: "var(--punctuation)" },
+    regexp: { color: "var(--regexp)" },
     string: { color: "var(--string)" }
   },
   "@media only screen and (prefers-color-scheme: dark)$$monokai": {
@@ -255,6 +257,7 @@ var monokai = {
         number: "#ae81ff",
         operator: "#ff6188",
         punctuation: "#727072",
+        regexp: "#fc9867",
         string: "#ffd866"
       }
     }
@@ -280,17 +283,24 @@ var KEYWORD3 = "keyword3";
 var NUMBER = "number";
 var OPERATOR = "operator";
 var PUNCTUATION = "punctuation";
+var REGEXP = "regexp";
 var STRING = "string";
 var ROOT2 = "root";
 var TEMPLATE = "template";
-var nanolightTs = /* @__PURE__ */ createTokenizer((chunk, name) => name != null ? ["span", { class: name }, chunk] : chunk, [COMMENT, /\/\*[\s\S]*?(?:\*\/|$)/], [COMMENT, /\/\/.*/], [STRING, /"(?:[^"\\\n]|\\[\s\S])*"?/], [STRING, /'(?:[^'\\\n]|\\[\s\S])*'?/], [STRING, /`(?:[^`\\$]|\\[\s\S]|\$(?!\{))*(?:`|$)/], [STRING, /`(?:[^`\\$]|\\[\s\S]|\$(?!\{))*(?=\$\{)/, { push: TEMPLATE }], [STRING, /(?:[^`\\$]|\\[\s\S]|\$(?!\{))*(?:`|$)/y, { in: TEMPLATE, pop: true }], [STRING, /(?:[^`\\$]|\\[\s\S]|\$(?!\{))+(?=\$\{)/y, { in: TEMPLATE }], [PUNCTUATION, "${", { in: TEMPLATE, push: ROOT2 }], [
-  STRING,
-  /(?<=(?:^|[!%&(*+,\-:;<=>?[^{|}~]|\b(?:await|case|delete|do|else|in|instanceof|new|of|return|throw|typeof|void|yield))\s*)\/(?![*/])(?:[^\\/[\n]|\\.|\[(?:[^\\\]\n]|\\.)*\]?)+\/[dgimsuvy]*/
-], [NUMBER, /0b[01_]+/], [NUMBER, /0o[01234567_]+/], [NUMBER, /0x[\dabcdef_]+/], [NUMBER, /\d[\d_]*(\.[\d_]+)?(e[+-]?[\d_]+)?/], [OPERATOR, "!"], [OPERATOR, "!="], [OPERATOR, "!=="], [OPERATOR, "%"], [OPERATOR, "%="], [OPERATOR, "&&"], [OPERATOR, "&&="], [OPERATOR, "&"], [OPERATOR, "&="], [OPERATOR, "*"], [OPERATOR, "**"], [OPERATOR, "**="], [OPERATOR, "*="], [OPERATOR, "+"], [OPERATOR, "++"], [OPERATOR, "+="], [OPERATOR, "-"], [OPERATOR, "--"], [OPERATOR, "-="], [OPERATOR, "..."], [OPERATOR, "/"], [OPERATOR, "/="], [OPERATOR, ":"], [OPERATOR, "<"], [OPERATOR, "<<"], [OPERATOR, "<<="], [OPERATOR, "<="], [OPERATOR, "="], [OPERATOR, "=="], [OPERATOR, "==="], [OPERATOR, "=>"], [OPERATOR, ">"], [OPERATOR, ">="], [OPERATOR, ">>"], [OPERATOR, ">>="], [OPERATOR, ">>>"], [OPERATOR, ">>>="], [OPERATOR, "?"], [OPERATOR, "??"], [OPERATOR, "??="], [OPERATOR, "^"], [OPERATOR, "^="], [OPERATOR, "|"], [OPERATOR, "|="], [OPERATOR, "||"], [OPERATOR, "||="], [OPERATOR, "~"], [OPERATOR, "~="], [OPERATOR, /(?<=\s):/], [PUNCTUATION, "("], [PUNCTUATION, ")"], [PUNCTUATION, ","], [PUNCTUATION, "."], [PUNCTUATION, ":"], [PUNCTUATION, ";"], [PUNCTUATION, "?."], [PUNCTUATION, "["], [PUNCTUATION, "]"], [PUNCTUATION, "{", { push: ROOT2 }], [PUNCTUATION, "}", { pop: true }], [KEYWORD1, "as"], [KEYWORD1, "async"], [KEYWORD1, "await"], [KEYWORD1, "break"], [KEYWORD1, "case"], [KEYWORD1, "catch"], [KEYWORD1, "class"], [KEYWORD1, "const"], [KEYWORD1, "continue"], [KEYWORD1, "debugger"], [KEYWORD1, "default"], [KEYWORD1, "delete"], [KEYWORD1, "do"], [KEYWORD1, "else"], [KEYWORD1, "export"], [KEYWORD1, "extends"], [KEYWORD1, "finally"], [KEYWORD1, "for"], [KEYWORD1, "from"], [KEYWORD1, "function"], [KEYWORD1, "function*"], [KEYWORD1, "goto"], [KEYWORD1, "if"], [KEYWORD1, "import"], [KEYWORD1, "in"], [KEYWORD1, "instanceof"], [KEYWORD1, "is"], [KEYWORD1, "keyof"], [KEYWORD1, "let"], [KEYWORD1, "new"], [KEYWORD1, "of"], [KEYWORD1, "package"], [KEYWORD1, "return"], [KEYWORD1, "super"], [KEYWORD1, "switch"], [KEYWORD1, "this"], [KEYWORD1, "throw"], [KEYWORD1, "try"], [KEYWORD1, "type"], [KEYWORD1, "typeof"], [KEYWORD1, "var"], [KEYWORD1, "void"], [KEYWORD1, "while"], [KEYWORD1, "with"], [KEYWORD1, "yield"], [KEYWORD1, "yield*"], [KEYWORD2, "false"], [KEYWORD2, "Infinity"], [KEYWORD2, "NaN"], [KEYWORD2, "null"], [KEYWORD2, "true"], [KEYWORD2, "undefined"], [KEYWORD3, "any"], [KEYWORD3, "bigint"], [KEYWORD3, "boolean"], [KEYWORD3, "eval"], [KEYWORD3, "number"], [KEYWORD3, "string"], [KEYWORD3, "symbol"], [KEYWORD3, "unknown"], [IDENTIFIER1, /[\p{Lu}_$][\p{Lu}\d_$]*/u], [IDENTIFIER2, /[\p{L}_$][\p{L}\d_$]*(?=[(`])/u], [IDENTIFIER3, /\p{Lu}[\p{L}\d_$]*/u], [IDENTIFIER4, /[\p{L}_$][\p{L}\d_$]*/u]);
+var REGEXP_BODY = "regexpBody";
+var REGEXP_FLAGS = "regexpFlags";
+var REGEXP_GROUP_NAME = "regexpGroupName";
+var REGEXP_SET = "regexpSet";
+var REGEXP_SET_NEGATION = "regexpSetNegation";
+var nanolightTs = /* @__PURE__ */ createLexer((chunk, name) => name != null ? ["span", { class: name }, chunk] : chunk, [COMMENT, /^#!.*/], [COMMENT, /\/\*[\s\S]*?(?:\*\/|$)/], [COMMENT, /\/\/.*/], [STRING, /"(?:[^"\\\n]|\\[\s\S])*"?/], [STRING, /'(?:[^'\\\n]|\\[\s\S])*'?/], [STRING, /`(?:[^`\\$]|\\[\s\S]|\$(?!\{))*(?:`|$)/], [STRING, /`(?:[^`\\$]|\\[\s\S]|\$(?!\{))*(?=\$\{)/, { push: TEMPLATE }], [STRING, /(?:[^`\\$]|\\[\s\S]|\$(?!\{))*(?:`|$)/y, { in: TEMPLATE, pop: true }], [STRING, /(?:[^`\\$]|\\[\s\S]|\$(?!\{))+(?=\$\{)/y, { in: TEMPLATE }], [PUNCTUATION, "${", { in: TEMPLATE, push: ROOT2 }], [
+  REGEXP,
+  /(?<=(?:^|[!%&(*,:;<=>?[^{|}~]|(?<!\+)\+|(?<!-)-|(?<!\.)\b(?:await|case|delete|do|else|in|instanceof|new|of|return|throw|typeof|void|yield))\s*)\/(?![*/])(?=(?:[^\\/[\n]|\\.|\[(?:[^\\\]\n]|\\.)*\])+\/)=?/,
+  { push: REGEXP_BODY }
+], [REGEXP, /\/(?=[dgimsuvy])/y, { in: REGEXP_BODY, pop: true, push: REGEXP_FLAGS }], [REGEXP, /\/(?![dgimsuvy])/y, { in: REGEXP_BODY, pop: true }], [KEYWORD1, /[dgimsuvy]+/y, { in: REGEXP_FLAGS, pop: true }], [IDENTIFIER2, /\\[1-9]\d*|\\k<[\p{L}_$][\p{L}\d_$]*>/uy, { in: REGEXP_BODY }], [KEYWORD1, /\\[bB]/y, { in: REGEXP_BODY }], [KEYWORD3, /\\[dDsSwW]|\\[pP]\{[\w=]*\}/y, { in: [REGEXP_BODY, REGEXP_SET] }], [KEYWORD2, /\\(?:c[A-Za-z]|x[\da-fA-F]{2}|u[\da-fA-F]{4}|u\{[\da-fA-F]+\}|.)/uy, { in: [REGEXP_BODY, REGEXP_SET] }], [KEYWORD1, /[$^]/y, { in: REGEXP_BODY }], [KEYWORD3, ".", { in: REGEXP_BODY }], [OPERATOR, /(?:[*+?]|\{\d+(?:,\d*)?\})\??/y, { in: REGEXP_BODY }], [OPERATOR, "|", { in: REGEXP_BODY }], [PUNCTUATION, /\((?:\?(?:[:=!]|<[=!]))?/y, { in: REGEXP_BODY }], [PUNCTUATION, /\(\?<(?=[\p{L}_$][\p{L}\d_$]*>)/uy, { in: REGEXP_BODY, push: REGEXP_GROUP_NAME }], [IDENTIFIER2, /[\p{L}_$][\p{L}\d_$]*/uy, { in: REGEXP_GROUP_NAME }], [PUNCTUATION, ">", { in: REGEXP_GROUP_NAME, pop: true }], [PUNCTUATION, ")", { in: REGEXP_BODY }], [PUNCTUATION, /\[(?!\^)/y, { in: REGEXP_BODY, push: REGEXP_SET }], [PUNCTUATION, /\[(?=\^)/y, { in: REGEXP_BODY, push: REGEXP_SET_NEGATION }], [OPERATOR, "^", { in: REGEXP_SET_NEGATION, pop: true, push: REGEXP_SET }], [OPERATOR, /(?<!(?<!\\)\[\^?)-(?!\])/y, { in: REGEXP_SET }], [PUNCTUATION, "]", { in: REGEXP_SET, pop: true }], [REGEXP, /[^\\/[()|?*+{^$.\n]+/uy, { in: REGEXP_BODY }], [REGEXP, /[^\\\]\-\n]+/uy, { in: REGEXP_SET }], [REGEXP, /[^\n]/uy, { in: [REGEXP_BODY, REGEXP_SET] }], [NUMBER, /0b[01_]+n?/i], [NUMBER, /0o[0-7_]+n?/i], [NUMBER, /0x[\da-f_]+n?/i], [NUMBER, /(?:\d[\d_]*(?:\.[\d_]+)?|\.\d[\d_]*)(?:e[+-]?\d[\d_]*)?n?/i], [OPERATOR, "!"], [OPERATOR, "!="], [OPERATOR, "!=="], [OPERATOR, "%"], [OPERATOR, "%="], [OPERATOR, "&&"], [OPERATOR, "&&="], [OPERATOR, "&"], [OPERATOR, "&="], [OPERATOR, "*"], [OPERATOR, "**"], [OPERATOR, "**="], [OPERATOR, "*="], [OPERATOR, "+"], [OPERATOR, "++"], [OPERATOR, "+="], [OPERATOR, "-"], [OPERATOR, "--"], [OPERATOR, "-="], [OPERATOR, "..."], [OPERATOR, "/"], [OPERATOR, "/="], [OPERATOR, ":"], [OPERATOR, "<"], [OPERATOR, "<<"], [OPERATOR, "<<="], [OPERATOR, "<="], [OPERATOR, "="], [OPERATOR, "=="], [OPERATOR, "==="], [OPERATOR, "=>"], [OPERATOR, ">"], [OPERATOR, ">="], [OPERATOR, ">>"], [OPERATOR, ">>="], [OPERATOR, ">>>"], [OPERATOR, ">>>="], [OPERATOR, "?"], [OPERATOR, "??"], [OPERATOR, "??="], [OPERATOR, "^"], [OPERATOR, "^="], [OPERATOR, "|"], [OPERATOR, "|="], [OPERATOR, "||"], [OPERATOR, "||="], [OPERATOR, "~"], [OPERATOR, "~="], [OPERATOR, /(?<=\s):/], [PUNCTUATION, "("], [PUNCTUATION, ")"], [PUNCTUATION, ","], [PUNCTUATION, "."], [PUNCTUATION, ":"], [PUNCTUATION, ";"], [PUNCTUATION, /\?\.(?!\d)/], [PUNCTUATION, "["], [PUNCTUATION, "]"], [PUNCTUATION, "{", { push: ROOT2 }], [PUNCTUATION, "}", { pop: true }], [IDENTIFIER2, /(?<=(?<!\.)\.)\p{Ll}[\p{L}\d_$]*(?=[(`])/u], [IDENTIFIER4, /(?<=(?<!\.)\.)\p{Ll}[\p{L}\d_$]*/u], [KEYWORD1, "as"], [KEYWORD1, "async"], [KEYWORD1, "await"], [KEYWORD1, "break"], [KEYWORD1, "case"], [KEYWORD1, "catch"], [KEYWORD1, "class"], [KEYWORD1, "const"], [KEYWORD1, "continue"], [KEYWORD1, "debugger"], [KEYWORD1, "default"], [KEYWORD1, "delete"], [KEYWORD1, "do"], [KEYWORD1, "else"], [KEYWORD1, "export"], [KEYWORD1, "extends"], [KEYWORD1, "finally"], [KEYWORD1, "for"], [KEYWORD1, "from"], [KEYWORD1, "function"], [KEYWORD1, "function*"], [KEYWORD1, "goto"], [KEYWORD1, "if"], [KEYWORD1, "import"], [KEYWORD1, "in"], [KEYWORD1, "instanceof"], [KEYWORD1, "is"], [KEYWORD1, "keyof"], [KEYWORD1, "let"], [KEYWORD1, "new"], [KEYWORD1, "of"], [KEYWORD1, "package"], [KEYWORD1, "return"], [KEYWORD1, "super"], [KEYWORD1, "switch"], [KEYWORD1, "this"], [KEYWORD1, "throw"], [KEYWORD1, "try"], [KEYWORD1, "type"], [KEYWORD1, "typeof"], [KEYWORD1, "var"], [KEYWORD1, "void"], [KEYWORD1, "while"], [KEYWORD1, "with"], [KEYWORD1, "yield"], [KEYWORD1, "yield*"], [KEYWORD2, "false"], [KEYWORD2, "Infinity"], [KEYWORD2, "NaN"], [KEYWORD2, "null"], [KEYWORD2, "true"], [KEYWORD2, "undefined"], [KEYWORD3, "any"], [KEYWORD3, "bigint"], [KEYWORD3, "boolean"], [KEYWORD3, "eval"], [KEYWORD3, "number"], [KEYWORD3, "string"], [KEYWORD3, "symbol"], [KEYWORD3, "unknown"], [IDENTIFIER2, /@[\p{L}_$][\p{L}\d_$]*/u], [IDENTIFIER1, /#?[\p{Lu}_$][\p{Lu}\d_$]*/u], [IDENTIFIER2, /#?[\p{L}_$][\p{L}\d_$]*(?=[(`])/u], [IDENTIFIER3, /#?\p{Lu}[\p{L}\d_$]*/u], [IDENTIFIER4, /#?[\p{L}_$][\p{L}\d_$]*/u]);
 // src/nnn/rwd.ts
 var rwd = (root, selector, cellWidthPx, cellHeightPx, ...specs) => {
   const main = root[selector] ??= {};
-  main.boxSizing = "border-box";
+  main["box-sizing"] = "border-box";
   main.display = "block";
   main.float = "left";
   main.width = "100%";
@@ -313,7 +323,7 @@ var rwd = (root, selector, cellWidthPx, cellHeightPx, ...specs) => {
 };
 export {
   c,
-  createTokenizer,
+  createLexer,
   h,
   monokai,
   nanolightTs,

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@jackens/nnn",
-  "version": "2026.9.28",
+  "version": "2026.9.30",
   "description": "Jackens’ JavaScript helpers.",
   "keywords": [
     "CSS-in-JS",
+    "highlight",
     "HyperScript",
     "JS-to-CSS",
+    "lexer",
     "Monokai",
-    "RWD",
-    "Responsive Web Design",
-    "SVG",
-    "highlight",
     "nanolight",
     "nnn",
+    "Responsive Web Design",
+    "RWD",
+    "SVG",
     "tokenize",
     "tokenizer"
   ],