@jackens/nnn 2026.9.30 → 2026.11.16

package/README.md

@@ -1,6 +1,6 @@
 # nnn
 
-A collection of Jackens’ JavaScript helper utilities (version: `2026.9.30`).
+A collection of Jackens’ JavaScript helper utilities (version: `2026.11.16`).
 
 ## Installation
 
@@ -18,16 +18,11 @@ npm i @jackens/nnn
 
 ```js
 import {
-  CNode,
-  HArgs,
-  HArgs1,
-  LexerSpec,
-  LexerSpecOptions,
+  type CNode,
+  type HArgs,
+  type HArgs1,
   c,
-  createLexer,
   h,
-  monokai,
-  nanolightTs,
   rwd,
   s,
   svgUse,
@@ -42,20 +37,10 @@ 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.
-- [`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.
-- [`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) lexer.
-- [`nanolightTs`](#nanolightTs):
-  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 of floating elements.
 - [`s`](#s):
@@ -67,7 +52,7 @@ import {
 
 ```ts
 type CNode = {
-  [attributeOrSelector: string]: string | number | CNode | undefined
+  [attributeOrSelector: string]: string | number | CNode | null | undefined
 }
 ```
 
@@ -89,38 +74,6 @@ type HArgs1 = Record<PropertyKey, unknown> | null | undefined | Node | string |
 
 Single argument type for the [`h`](#h) and [`s`](#s) helpers.
 
-### LexerSpec
-
-```ts
-type LexerSpec<M> = [metadata: M, pattern: string | RegExp, options?: LexerSpecOptions]
-```
-
-A [`createLexer`](#createLexer) spec: a `[metadata, pattern, options?]` tuple.
-
-### LexerSpecOptions
-
-```ts
-type LexerSpecOptions = {
-  in?: string | string[]
-  pop?: boolean
-  push?: string
-}
-```
-
-Options of a [`createLexer`](#createLexer) spec controlling the lexer state stack.
-
-#### in
-
-State(s) in which the spec is active (default: `'root'`).
-
-#### pop
-
-Whether to pop the current state off the stack after a match (the `'root'` state at the bottom is never popped).
-
-#### push
-
-State to push onto the stack after a match (applied after `pop`).
-
 ### c
 
 ```ts
@@ -134,14 +87,19 @@ 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`).
+If a nested selector contains `&`, every `&` is replaced with the parent selector instead (e.g. `'&:hover'` → `a:hover`, `'.c &'` → `.c a`).
 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}`).
+Commas inside brackets or quotes (e.g. `':is(.b,.c)'`, `'[title="b,c"]'`) do not separate alternatives; whitespace after a separating comma is ignored (use `&` for a descendant combinator in a non-first alternative, e.g. `'.b,& .c'` → `a.b,a .c`).
+At-rules (e.g. `'@media …'`) wrap their nested rules; an at-rule nested in a selector wraps that selector (e.g. `{ a: { '@media(…)': { color: 'red' } } }` → `@media(…){a{color:red}}`).
+Inside a top-level `:root` rule nested keys are concatenated into property names (e.g. `{ ':root': { '--': { bg: 'red' } } }` → `:root{--bg:red}`).
+Properties without a selector (top-level or directly in a top-level at-rule, e.g. `@font-face`) are emitted as bare declarations.
 `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`).
+An empty `splitter` disables this feature.
 
 #### Returns
 
@@ -216,7 +174,7 @@ const actual = c({
   '@font-face$$1': {
     'font-family': 'Jackens',
     src$$1: 'url(otf/jackens.otf)',
-    src$$2: "url(otf/jackens.otf) format('opentype')," + "url(svg/jackens.svg) format('svg')",
+    src$$2: "url(otf/jackens.otf) format('opentype'),url(svg/jackens.svg) format('svg')",
     'font-weight': 'normal',
     'font-style': 'normal',
   },
@@ -452,208 +410,120 @@ const expected = `
 expect(actual).toBe(expected)
 ```
 
-### createLexer
-
-```ts
-const createLexer: <M, T>(
-  decorator: (chunk: string, metadata?: M) => T,
-  ...specs: LexerSpec<M>[]
-) => (code: string) => T[]
-```
-
-A helper for building simple stateful lexers (see also [`nanolightTs`](#nanolightTs)).
-
-#### Remarks
-
-1. Matches starting at an earlier position take precedence.
-2. Among matches at the same position, the longer one wins.
-3. Among matches of the same position and length, the one defined earlier wins.
-4. Only specs active in the current state (the top of the state stack, initially `'root'`) are considered.
-5. Patterns are matched against the whole input, so `^`, `$`, `\b` and lookbehinds see the text around the current position; a sticky (`y`) `RegExp` matches only at the current position.
-6. Empty matches are ignored.
-
-#### decorator
-
-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` (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 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 lexer = createLexer(
-  (chunk, metadata) => ({ chunk, metadata }),
-  ['keyword', /\b(if|else|for)\b/],
-  ['string', /"[^"]*"/]
-)
-
-const result = lexer('if "hello" else "world"')
-
-expect(result).toEqual([
-  { chunk: 'if', metadata: 'keyword' },
-  { chunk: ' ', metadata: undefined },
-  { chunk: '"hello"', metadata: 'string' },
-  { chunk: ' ', metadata: undefined },
-  { chunk: 'else', metadata: 'keyword' },
-  { chunk: ' ', metadata: undefined },
-  { chunk: '"world"', metadata: 'string' },
-])
-```
-
-String patterns are matched literally and unmatched text gets `undefined` metadata:
-
-```ts
-const lexer = createLexer((chunk, metadata) => `${metadata}:${chunk}`, ['tag', 'BEGIN'], ['end', 'END'])
-
-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 lexer = createLexer(chunk => chunk, ['test', /test/])
-
-const result = lexer('')
-
-expect(result).toEqual([])
-```
-
-`^` anchors to the start of the whole input:
-
-```ts
-const lexer = createLexer((chunk, metadata) => ({ chunk, metadata }), ['start', /^test/])
-
-const result = lexer('test here')
-
-expect(result).toEqual([
-  { chunk: 'test', metadata: 'start' },
-  { chunk: ' here', metadata: undefined },
-])
-```
-
-Matches starting earlier take precedence regardless of spec order:
-
-```ts
-const lexer = createLexer((chunk, metadata) => metadata, ['later', /x/], ['earlier', /y/])
-
-const result = lexer('yx')
-
-expect(result).toEqual(['earlier', 'later'])
-```
-
-The longer match wins at the same position:
+`&` is replaced with the parent selector:
 
 ```ts
-const lexer = createLexer(chunk => chunk, ['short', 'a'], ['long', 'abc'])
-
-const result = lexer('abc')
-
-expect(result).toEqual(['abc'])
-```
-
-Empty string patterns are ignored:
-
-```ts
-const lexer = createLexer(chunk => chunk, ['empty', ''], ['word', /\w+/])
-
-const result = lexer('hello')
-
-expect(result).toEqual(['hello'])
-```
-
-Input without any match is returned as a single chunk:
-
-```ts
-const lexer = createLexer(chunk => chunk, ['test', /xyz/])
-
-const result = lexer('abc')
-
-expect(result).toEqual(['abc'])
-```
-
-Consecutive matches are returned as separate chunks:
-
-```ts
-const lexer = createLexer((_chunk, metadata) => metadata, ['a', 'a'], ['b', 'b'])
+const actual = c({
+  a: {
+    color: 'red',
+    '&:hover': { color: 'blue' },
+    '.dark &': { color: 'white' },
+    '.b,& .c': { margin: 1 },
+  },
+})
 
-const result = lexer('aabb')
+const expected = `
+  a{
+    color:red
+  }
+  a:hover{
+    color:blue
+  }
+  .dark a{
+    color:white
+  }
+  a.b,a .c{
+    margin:1
+  }
+`.replace(/\n\s*/g, '')
 
-expect(result).toEqual(['a', 'a', 'b', 'b'])
+expect(actual).toBe(expected)
 ```
 
-Entering and leaving states with `push` and `pop`:
+Commas inside brackets or quotes do not split selectors and whitespace after a comma is ignored:
 
 ```ts
-const lexer = createLexer(
-  (chunk, metadata) => `${metadata}:${chunk}`,
-  ['open', '(', { push: 'inner' }],
-  ['word', /\w+/, { in: 'inner' }],
-  ['close', ')', { in: 'inner', pop: true }]
-)
+const actual = c({
+  ':is(.a,.b)': {
+    '.c, .d': { margin: 1 },
+    '[title="x,y"]': { margin: 2 },
+  },
+})
 
-const result = lexer('a(b)c)')
+const expected = `
+  :is(.a,.b).c,:is(.a,.b).d{
+    margin:1
+  }
+  :is(.a,.b)[title="x,y"]{
+    margin:2
+  }
+`.replace(/\n\s*/g, '')
 
-expect(result).toEqual(['undefined:a', 'open:(', 'word:b', 'close:)', 'undefined:c)'])
+expect(actual).toBe(expected)
 ```
 
-Nested states with a spec active in multiple states:
+At-rules nested in selectors wrap these selectors:
 
 ```ts
-const lexer = createLexer(
-  (chunk, metadata) => `${metadata}:${chunk}`,
-  ['open', '{', { in: ['root', 'nested'], push: 'nested' }],
-  ['close', '}', { in: 'nested', pop: true }]
-)
+const actual = c({
+  a: {
+    color: 'red',
+    '@media(min-width:600px)': {
+      color: 'blue',
+      '.b': { margin: 1 },
+    },
+  },
+})
 
-const result = lexer('{{}}}')
+const expected = `
+  a{
+    color:red
+  }
+  @media(min-width:600px){
+    a{
+      color:blue
+    }
+    a.b{
+      margin:1
+    }
+  }
+`.replace(/\n\s*/g, '')
 
-expect(result).toEqual(['open:{', 'open:{', 'close:}', 'close:}', 'undefined:}'])
+expect(actual).toBe(expected)
 ```
 
-Lookbehinds see the text preceding the current position:
+Declarations without a selector are separated from subsequent rules:
 
 ```ts
-const lexer = createLexer((chunk, metadata) => `${metadata}:${chunk}`, ['a', 'a'], ['b', /(?<=a)b/])
-
-const result = lexer('abcb')
+expect(c({ color: 'red', margin: 0 })).toBe('color:red;margin:0')
 
-expect(result).toEqual(['a:a', 'b:b', 'undefined:cb'])
+expect(c({ color: 'red', a: { margin: 0 }, padding: 0 })).toBe('color:red;a{margin:0}padding:0')
 ```
 
-Sticky patterns match only at the current position:
+`null` and `undefined` values are skipped:
 
 ```ts
-const lexer = createLexer((chunk, metadata) => `${metadata}:${chunk}`, ['x', /x/y], ['y', 'y'])
-
-const result = lexer('xyx.x')
+const actual = c({
+  a: {
+    color: 'red',
+    margin: null,
+    padding: undefined,
+    '.b': null,
+  },
+  ':root': {
+    '--': { bg: null, fg: 'black' },
+  },
+})
 
-expect(result).toEqual(['x:x', 'y:y', 'x:x', 'undefined:.x'])
+expect(actual).toBe('a{color:red}:root{--fg:black}')
 ```
 
-Empty `RegExp` matches are skipped:
+Custom splitter (an empty one disables splitting):
 
 ```ts
-const lexer = createLexer((chunk, metadata) => `${metadata}:${chunk}`, ['digits', /\d*/])
+expect(c({ a: { 'src#1': 'url(a.otf)', 'src#2': 'url(a.woff)' } }, '#')).toBe('a{src:url(a.otf);src:url(a.woff)}')
 
-const result = lexer('ab12')
-
-expect(result).toEqual(['undefined:ab', 'digits:12'])
+expect(c({ a: { b$$c: 1 } }, '')).toBe('a{b$$c:1}')
 ```
 
 ### h
@@ -661,6 +531,7 @@ expect(result).toEqual(['undefined:ab', 'digits:12'])
 ```ts
 const h: {
   <T extends keyof HTMLElementTagNameMap>(tag: T, ...args: HArgs1[]): HTMLElementTagNameMap[T]
+  (tag: string, ...args: HArgs1[]): HTMLElement
   <N extends Node>(node: N, ...args: HArgs1[]): N
   (tagOrNode: string | Node, ...args: HArgs1[]): Node
 }
@@ -678,9 +549,9 @@ 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 `true` sets an empty attribute (e.g. `checked=""`), a value of `false` removes the attribute.
+  - Keys starting with `$` set element properties (without the `$` prefix); if the value is a plain object (created by `{…}` or `Object.create(null)`), it is shallow-merged into the existing property instead of replacing it (useful e.g. for `$style`), other values (including arrays and class instances) replace the property.
+  - Other keys set attributes: a key prefixed with `xlink:`, `xml:` or `xmlns:` sets the attribute via `setAttributeNS` in the corresponding namespace; any other key sets it via `setAttribute`.
+    A value of `true` sets an empty attribute (e.g. `checked=""`), a value of `false` removes the attribute, a value of `null`/`undefined` leaves the attribute unchanged.
 - `null`/`undefined`: ignored.
 - `Node`: appended as a child.
 - `string`/`number`: converted to a `Text` node and appended.
@@ -806,356 +677,44 @@ const elemWithNested = h('div', ['span', 'hello'], ['b', 'world'])
 expect(elemWithNested.outerHTML).toBe('<div><span>hello</span><b>world</b></div>')
 ```
 
-### monokai
-
-```ts
-const monokai: CNode
-```
-
-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
-
-```ts
-const nanolightTs: (code: string) => HArgs1[]
-```
-
-A TypeScript/JavaScript syntax highlighting lexer built using [`createLexer`](#createLexer).
-
-#### code
-
-The source code string to tokenize.
-
-#### Returns
-
-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:
+`false` removes an attribute, `null` and `undefined` leave it unchanged:
 
 ```ts
-const codeJs = 'const answerToLifeTheUniverseAndEverything = ' + "{ 42: 42 }['42'] /* 42 */"
-
-expect(nanolightTs(codeJs)).toEqual([
-  ['span', { class: 'keyword1' }, 'const'],
-  ' ',
-  ['span', { class: 'identifier4' }, 'answerToLifeTheUniverseAndEverything'],
-  ' ',
-  ['span', { class: 'operator' }, '='],
-  ' ',
-  ['span', { class: 'punctuation' }, '{'],
-  ' ',
-  ['span', { class: 'number' }, '42'],
-  ['span', { class: 'operator' }, ':'],
-  ' ',
-  ['span', { class: 'number' }, '42'],
-  ' ',
-  ['span', { class: 'punctuation' }, '}'],
-  ['span', { class: 'punctuation' }, '['],
-  ['span', { class: 'string' }, "'42'"],
-  ['span', { class: 'punctuation' }, ']'],
-  ' ',
-  ['span', { class: 'comment' }, '/* 42 */'],
-])
-```
+const input = h('input', { type: 'checkbox', checked: true, title: 'title' })
 
-Line comments:
+h(input, { checked: false, title: null, type: undefined })
 
-```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'],
-])
+expect(input.outerHTML).toBe('<input type="checkbox" title="title">')
 ```
 
-Regex literals vs division:
+Only plain objects are merged into `$`-prefixed properties:
 
 ```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'],
-])
-```
+const date = new Date(0)
+const div = h('div', { $date: date, $list: [1, 2] })
 
-Nested template literals with substitutions:
+expect(div.date).toBe(date)
 
-```ts
-expect(nanolightTs('`a ${b + `c ${ {d}.d }`} \\${e} $f`')).toEqual([
-  ['span', { class: 'string' }, '`a '],
-  ['span', { class: 'punctuation' }, '${'],
-  ['span', { class: 'identifier4' }, 'b'],
-  ' ',
-  ['span', { class: 'operator' }, '+'],
-  ' ',
-  ['span', { class: 'string' }, '`c '],
-  ['span', { class: 'punctuation' }, '${'],
-  ' ',
-  ['span', { class: 'punctuation' }, '{'],
-  ['span', { class: 'identifier4' }, 'd'],
-  ['span', { class: 'punctuation' }, '}'],
-  ['span', { class: 'punctuation' }, '.'],
-  ['span', { class: 'identifier4' }, 'd'],
-  ' ',
-  ['span', { class: 'punctuation' }, '}'],
-  ['span', { class: 'string' }, '`'],
-  ['span', { class: 'punctuation' }, '}'],
-  ['span', { class: 'string' }, ' \\${e} $f`'],
-])
-
-expect(nanolightTs('`${x}` / 2')).toEqual([
-  ['span', { class: 'string' }, '`'],
-  ['span', { class: 'punctuation' }, '${'],
-  ['span', { class: 'identifier4' }, 'x'],
-  ['span', { class: 'punctuation' }, '}'],
-  ['span', { class: 'string' }, '`'],
-  ' ',
-  ['span', { class: 'operator' }, '/'],
-  ' ',
-  ['span', { class: 'number' }, '2'],
-])
-```
-
-Comment markers inside strings and unterminated comments:
-
-```ts
-expect(nanolightTs('"a // b" // c')).toEqual([
-  ['span', { class: 'string' }, '"a // b"'],
-  ' ',
-  ['span', { class: 'comment' }, '// c'],
-])
-
-expect(nanolightTs("'it\\'s' /* x")).toEqual([
-  ['span', { class: 'string' }, "'it\\'s'"],
-  ' ',
-  ['span', { class: 'comment' }, '/* x'],
-])
-```
-
-Hexadecimal, BigInt, numeric separators and exponents:
-
-```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'],
-])
-```
+h(div, { $list: [3] })
 
-Division after `++` and optional chaining vs ternary with decimals:
-
-```ts
-expect(nanolightTs('a++ / 2 / b')).toEqual([
-  ['span', { class: 'identifier4' }, 'a'],
-  ['span', { class: 'operator' }, '++'],
-  ' ',
-  ['span', { class: 'operator' }, '/'],
-  ' ',
-  ['span', { class: 'number' }, '2'],
-  ' ',
-  ['span', { class: 'operator' }, '/'],
-  ' ',
-  ['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'],
-])
+expect(div.list).toEqual([3])
 ```
 
-Keywords as property names and method calls:
+Namespaced attributes:
 
 ```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' }, ','],
-  ' ',
-  ['span', { class: 'operator' }, '...'],
-  ['span', { class: 'keyword1' }, 'this'],
-  ['span', { class: 'punctuation' }, ')'],
-])
-```
-
-Hashbang, decorators and private class members:
+const div = h('div', { 'xml:lang': 'pl', 'ng:x': 1 })
 
-```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'],
-  ' ',
-  ['span', { class: 'punctuation' }, '{'],
-  ' ',
-  ['span', { class: 'identifier4' }, '#x'],
-  ' ',
-  ['span', { class: 'operator' }, '='],
-  ' ',
-  ['span', { class: 'number' }, '1'],
-  ' ',
-  ['span', { class: 'punctuation' }, '}'],
-])
+expect(div.getAttributeNS('http://www.w3.org/XML/1998/namespace', 'lang')).toBe('pl')
+expect(div.getAttribute('ng:x')).toBe('1')
 ```
 
-Escapes, anchors, quantifiers, groups, character sets and flags inside regex literals:
+Return types:
 
 ```ts
-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'],
-])
+expectTypeOf(h('input')).toEqualTypeOf<HTMLInputElement>()
+expectTypeOf(h('my-element')).toEqualTypeOf<HTMLElement>()
+expectTypeOf(h(document.createTextNode(''))).toEqualTypeOf<Text>()
 ```
 
 ### rwd
@@ -1166,7 +725,7 @@ const rwd: (
   selector: string,
   cellWidthPx: number,
   cellHeightPx: number,
-  ...specs: [number, number?, number?][]
+  ...specs: [columns: number, width?: number, height?: number][]
 ) => void
 ```
 
@@ -1183,20 +742,24 @@ The CSS selector for the grid item.
 
 #### cellWidthPx
 
-The base cell width in pixels.
+The base cell width in pixels (a positive number).
 
 #### cellHeightPx
 
-The base cell height in pixels.
+The base cell height in pixels (a positive number).
 
 #### specs
 
-An array of breakpoint specifications, each a tuple of:
+An array of breakpoint specifications, each a tuple of positive integers:
 
-- `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.
+- `columns`: number of cells per row; the breakpoint is `min-width: cellWidthPx * columns` (`1` modifies the base rule).
+- `width` (optional, default `1`, at most `columns`): number of horizontal cells the element spans.
 - `height` (optional, default `1`): number of vertical cells the element spans.
 
+#### Throws
+
+A `RangeError` if any of the numeric arguments is out of range.
+
 #### Usage Examples
 
 Responsive grid cell widths and heights with media queries:
@@ -1246,11 +809,57 @@ expect(style).toEqual({
 })
 ```
 
+Widths that divide evenly do not use `calc`; existing at-rules are extended:
+
+```ts
+const style: CNode = {
+  '@media(min-width:400px)': {
+    '.r2': { margin: 0 },
+  },
+}
+
+rwd(style, '.r2', 100, 40, [4, 2], [2, 2, 3])
+
+expect(style).toEqual({
+  '@media(min-width:400px)': {
+    '.r2': {
+      margin: 0,
+      width: '50%',
+      height: '40px',
+    },
+  },
+  '.r2': {
+    'box-sizing': 'border-box',
+    display: 'block',
+    float: 'left',
+    width: '100%',
+    height: '40px',
+  },
+  '@media(min-width:200px)': {
+    '.r2': {
+      width: '100%',
+      height: '120px',
+    },
+  },
+})
+```
+
+Invalid arguments throw a `RangeError`:
+
+```ts
+expect(() => rwd({}, '.x', 0, 50)).toThrow(RangeError)
+expect(() => rwd({}, '.x', 100, Infinity)).toThrow(RangeError)
+expect(() => rwd({}, '.x', 100, 50, [0])).toThrow(RangeError)
+expect(() => rwd({}, '.x', 100, 50, [2, 3])).toThrow(RangeError)
+expect(() => rwd({}, '.x', 100, 50, [2, 1, 1.5])).toThrow(RangeError)
+```
+
 ### s
 
 ```ts
 const s: {
   <T extends keyof SVGElementTagNameMap>(tag: T, ...args: HArgs1[]): SVGElementTagNameMap[T]
+  (tag: string, ...args: HArgs1[]): SVGElement
   <N extends Node>(node: N, ...args: HArgs1[]): N
   (tagOrNode: string | Node, ...args: HArgs1[]): Node
 }
@@ -1268,9 +877,9 @@ 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 `true` sets an empty attribute (e.g. `checked=""`), a value of `false` removes the attribute.
+  - Keys starting with `$` set element properties (without the `$` prefix); if the value is a plain object (created by `{…}` or `Object.create(null)`), it is shallow-merged into the existing property instead of replacing it, other values (including arrays and class instances) replace the property.
+  - Other keys set attributes: a key prefixed with `xlink:`, `xml:` or `xmlns:` sets the attribute via `setAttributeNS` in the corresponding namespace (e.g. `xml:lang`); any other key sets it via `setAttribute`.
+    A value of `true` sets an empty attribute, a value of `false` removes the attribute, a value of `null`/`undefined` leaves the attribute unchanged.
 - `null`/`undefined`: ignored.
 - `Node`: appended as a child.
 - `string`/`number`: converted to a `Text` node and appended.
@@ -1282,6 +891,16 @@ The created `SVGElement` or the modified node.
 
 #### Usage Examples
 
+Elements (including nested ones) are created in the SVG namespace:
+
+```ts
+const svg = s('svg', ['g', ['circle', { r: 1 }]])
+
+expect(svg.namespaceURI).toBe('http://www.w3.org/2000/svg')
+expect(svg.querySelector('circle')?.namespaceURI).toBe('http://www.w3.org/2000/svg')
+expect(svg.outerHTML).toBe('<svg><g><circle r="1"></circle></g></svg>')
+```
+
 Namespaced `xlink:` attribute set to `true` gets an empty value:
 
 ```ts
@@ -1290,10 +909,12 @@ 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:
+Namespaced `xlink:` attribute set to `false` is removed:
 
 ```ts
-const svg = s('svg', { 'xlink:href': false })
+const svg = s('svg', { 'xlink:href': '#id' })
+
+s(svg, { 'xlink:href': false })
 
 expect(svg.getAttributeNS('http://www.w3.org/1999/xlink', 'href')).toBeNull()
 ```
@@ -1314,6 +935,22 @@ const svg = s('svg', { 'xlink:title': 42 })
 expect(svg.getAttributeNS('http://www.w3.org/1999/xlink', 'title')).toBe('42')
 ```
 
+Namespaced `xml:` and `xmlns:` attributes:
+
+```ts
+const svg = s('svg', { 'xml:lang': 'pl', 'xmlns:xlink': 'http://www.w3.org/1999/xlink' })
+
+expect(svg.getAttributeNS('http://www.w3.org/XML/1998/namespace', 'lang')).toBe('pl')
+expect(svg.getAttributeNS('http://www.w3.org/2000/xmlns/', 'xlink')).toBe('http://www.w3.org/1999/xlink')
+```
+
+Return types:
+
+```ts
+expectTypeOf(s('circle')).toEqualTypeOf<SVGCircleElement>()
+expectTypeOf(s('my-element')).toEqualTypeOf<SVGElement>()
+```
+
 ### svgUse
 
 ```ts
@@ -1325,7 +962,7 @@ Shorthand for creating an `<svg>` element with a `<use>` child referencing a sym
 Equivalent to:
 
 ```ts
-s('svg', ['use', { 'xlink:href': '#' + id }], ...args)
+s('svg', ['use', { href: '#' + id }], ...args)
 ```
 
 #### id
@@ -1342,46 +979,28 @@ An `SVGSVGElement` containing a `<use>` element.
 
 #### Usage Examples
 
-SVG `use` element referencing a symbol, with extra attributes:
+SVG `use` element referencing a symbol:
 
 ```ts
 const svg = svgUse('icon-home')
 
-expect(svg.children.length).toBe(1)
-
-const useElement = svg.children[0]
-
-expect(useElement.getAttributeNS('http://www.w3.org/1999/xlink', 'href')).toBe('#icon-home')
-
-const svgWithViewBox = svgUse('icon-star', { viewBox: '0 0 24 24' })
-
-expect(svgWithViewBox.getAttribute('viewBox')).toBe('0 0 24 24')
-
-const useViewBox = svgWithViewBox.children[0]
-
-expect(useViewBox.getAttributeNS('http://www.w3.org/1999/xlink', 'href')).toBe('#icon-star')
-
-const svgWithClass = svgUse('icon-menu', { class: 'icon-btn' })
-
-expect(svgWithClass.getAttribute('class')).toBe('icon-btn')
-
-expect(svgWithClass.children.length).toBe(1)
-
-const useClass = svgWithClass.children[0]
-
-expect(useClass.getAttributeNS('http://www.w3.org/1999/xlink', 'href')).toBe('#icon-menu')
+expect(svg.outerHTML).toBe('<svg><use href="#icon-home"></use></svg>')
+```
 
-const svgWithMultipleAttrs = svgUse('icon-settings', { width: 24, height: 24, class: 'icon' })
+Additional attributes are set on the outer `svg` element:
 
-expect(svgWithMultipleAttrs.getAttribute('width')).toBe('24')
+```ts
+const svg = svgUse('icon-settings', { width: 24, height: 24, class: 'icon' })
 
-expect(svgWithMultipleAttrs.getAttribute('height')).toBe('24')
+expect(svg.outerHTML).toBe('<svg width="24" height="24" class="icon"><use href="#icon-settings"></use></svg>')
+```
 
-expect(svgWithMultipleAttrs.getAttribute('class')).toBe('icon')
+Additional children are appended to the outer `svg` element:
 
-const useMultiple = svgWithMultipleAttrs.children[0]
+```ts
+const svg = svgUse('icon-star', ['title', 'Star'])
 
-expect(useMultiple.getAttributeNS('http://www.w3.org/1999/xlink', 'href')).toBe('#icon-settings')
+expect(svg.outerHTML).toBe('<svg><use href="#icon-star"></use><title>Star</title></svg>')
 ```
 
 ## License