@jackens/nnn 2025.9.7 → 2025.11.4

package/nnn.d.ts

@@ -4,17 +4,6 @@ export type CNode = {
 };
 /** Argument type for the `c` helper. */
 export type CRoot = Record<PropertyKey, CNode>;
-/** Argument type accepted by the `escape_values` and `escape` helpers. */
-export type EscapeMap = Map<unknown, (value?: unknown) => string>;
-declare const IS_FINITE: unique symbol;
-/** `number` type excluding `±Infinity` and `NaN`. */
-export type FiniteNumber = number & {
-    readonly [IS_FINITE]: true;
-};
-/** Argument type for the `h` and `s` helpers. */
-export type HArgs1 = Record<PropertyKey, unknown> | null | undefined | Node | string | number | HArgs;
-/** Argument type for the `h` and `s` helpers. */
-export type HArgs = [string | Node, ...HArgs1[]];
 /**
  * A minimal JS-to-CSS (CSS‑in‑JS) helper.
  *
@@ -27,14 +16,31 @@ export type HArgs = [string | Node, ...HArgs1[]];
  * - Top-level keys beginning with `@` (at-rules) are not concatenated with parent keys.
  */
 export declare const c: (root: CRoot, splitter?: string) => string;
+/**
+ * A responsive‑web‑design helper that generates CSS rules for a grid layout.
+ *
+ * - `root` and `selector` specify where to apply the generated rules (see `c`).
+ * - `cell_width_px` and `cell_height_px` specify the base cell dimensions in pixels.
+ * - Each entry in `specs` is a tuple of:
+ *   - `max_width`: maximum number of cells in a row (viewport width breakpoint).
+ *   - `width` (optional, default: `1`): number of cells occupied by the element.
+ *   - `height` (optional): number of cells in height occupied by the element.
+ */
+export declare const rwd: (root: CRoot, selector: string, cell_width_px: number, cell_height_px: number, ...specs: [number, number?, number?][]) => void;
 /** A tiny CSV parsing helper. */
 export declare const csv_parse: (csv: string, separator?: string) => string[][];
+/** Argument type accepted by the `escape_values` and `escape` helpers. */
+export type EscapeMap = Map<unknown, (value?: unknown) => string>;
 /** Escapes array `values` using the provided `escape_map`. */
 export declare const escape_values: (escape_map: EscapeMap, values: unknown[]) => string[];
 /** Escapes interpolated template `values` using the provided `escape_map`. */
 export declare const escape: (escape_map: EscapeMap, template: TemplateStringsArray, ...values: unknown[]) => string;
 /** Applies Polish‑specific typographic corrections. */
 export declare const fix_typography: (node: Node) => void;
+/** Argument type for the `h` and `s` helpers. */
+export type HArgs1 = Record<PropertyKey, unknown> | null | undefined | Node | string | number | HArgs;
+/** Argument type for the `h` and `s` helpers. */
+export type HArgs = [string | Node, ...HArgs1[]];
 /**
  * A lightweight [HyperScript](https://github.com/hyperhype/hyperscript)-style helper for creating and modifying `HTMLElement`s (see also `s`).
  *
@@ -79,6 +85,11 @@ export declare const svg_use: (id: string, ...args: HArgs1[]) => SVGSVGElement;
 export declare const has_own: (ref: unknown, key: unknown) => boolean;
 /** Checks whether the argument is an array. */
 export declare const is_array: (arg: unknown) => arg is unknown[];
+declare const IS_FINITE: unique symbol;
+/** `number` type excluding `±Infinity` and `NaN`. */
+export type FiniteNumber = number & {
+    readonly [IS_FINITE]: true;
+};
 /** Checks whether the argument is a finite number (excluding `±Infinity` and `NaN`). */
 export declare const is_finite_number: (arg: unknown) => arg is FiniteNumber;
 /** Checks whether the argument is a number. */

package/nnn.js

@@ -2,7 +2,7 @@
 var _c = (node, prefix, result, splitter) => {
   const queue = [[node, prefix]];
   while (queue.length > 0) {
-    const [style_0, prefix_0] = queue.shift() ?? [];
+    const [style_0, prefix_0] = queue.shift();
     if (style_0 == null || prefix_0 == null) {
       continue;
     }
@@ -50,6 +50,30 @@ var c = (root, splitter = "$$") => {
   }
   return chunks.join("");
 };
+var rwd = (root, selector, cell_width_px, cell_height_px, ...specs) => {
+  const main = pro(root)[selector];
+  main.boxSizing = "border-box";
+  main.display = "block";
+  main.float = "left";
+  main.width = "100%";
+  main.height = `${cell_height_px}px`;
+  specs.sort(([a], [b]) => a - b);
+  for (let [max_width, width, height] of specs) {
+    const node = max_width === 1 ? main : pro(root)[`@media(min-width:${cell_width_px * max_width}px)`][selector];
+    width ??= 1;
+    let gcd = 100 * width;
+    let tmp = max_width;
+    while (tmp) {
+      [gcd, tmp] = [tmp, gcd % tmp];
+    }
+    const w_100_per_gcd = 100 * width / gcd;
+    node.width = max_width === gcd ? `${w_100_per_gcd}%` : `calc(${w_100_per_gcd}% / ${max_width / gcd})`;
+    if (height != null) {
+      node.height = `${cell_height_px * height}px`;
+    }
+  }
+  console.log(root);
+};
 var csv_parse = (csv, separator = ",") => {
   const main_pattern = /\n|(?<!")("(?:[^"]|"")*")(?!")/g;
   const line_pattern = new RegExp(`${separator}|(?<!")\\s*"((?:[^"]|"")*)"\\s*(?!")`, "g");
@@ -134,7 +158,7 @@ var _h = (namespace_uri) => {
             }
           }
         }
-      } else if (is_string(arg)) {
+      } else if (is_string(arg) || is_number(arg)) {
         child = document.createTextNode(arg);
       }
       if (child != null) {
@@ -214,6 +238,7 @@ export {
   uuid_v1,
   svg_use,
   s,
+  rwd,
   pro,
   pl_ural,
   pick,

package/package.json

@@ -26,6 +26,8 @@
     "nnn",
     "omit",
     "pick",
+    "RWD",
+    "Responsive Web Design",
     "SVG",
     "typography",
     "uuid",
@@ -36,5 +38,5 @@
   "name": "@jackens/nnn",
   "type": "module",
   "types": "nnn.d.ts",
-  "version": "2025.9.7"
+  "version": "2025.11.4"
 }

package/readme.md

@@ -53,6 +53,7 @@ import { «something» } from './node_modules/@jackens/nnn/nnn.js'
 - [`pick`](#pick): Runtime implementation of TypeScript’s `Pick` (see also `omit`).
 - [`pl_ural`](#pl_ural): Chooses the appropriate Polish noun form based on a numeric value.
 - [`pro`](#pro): A `Proxy`-based helper that safely creates nested structures on access and allows deep assignment without guards.
+- [`rwd`](#rwd): A responsive‑web‑design helper that generates CSS rules for a grid layout.
 - [`s`](#s): A lightweight [HyperScript](https://github.com/hyperhype/hyperscript)-style helper for creating and modifying `SVGElement`s (see also `h`).
 - [`svg_use`](#svg_use): Shorthand for: `s('svg', ['use', { 'xlink:href': '#' + id }], ...args)`.
 - [`uuid_v1`](#uuid_v1): Generates a UUID v1 (time-based) identifier.
@@ -458,6 +459,11 @@ expect(h('span', 'text').outerHTML).to.deep.equal('<span>text</span>')
 expect(h('span', { $innerText: 'text' }).outerHTML).to.deep.equal('<span>text</span>')
 ```
 
+```ts
+expect(h('span', '42').outerHTML).to.deep.equal('<span>42</span>')
+expect(h('span', 42).outerHTML).to.deep.equal('<span>42</span>')
+```
+
 ```ts
 expect(h('div', { style: 'margin:0;padding:0' }).outerHTML)
   .to.deep.equal('<div style="margin:0;padding:0"></div>')
@@ -668,16 +674,25 @@ JavaScript syntax highlighting helper (built on `nanolight`).
 #### Usage Examples
 
 ```ts
-const code_js = 'const answerToLifeTheUniverseAndEverything = 42'
+const code_js = "const answer_to_life_the_universe_and_everything = { 42: 42 }['42'] /* 42 */"
+
+console.log(nanolight_js(code_js))
 
 expect(nanolight_js(code_js)).to.deep.equal([
   ['span', { class: 'keyword' }, 'const'],
   ' ',
-  ['span', { class: 'literal' }, 'answerToLifeTheUniverseAndEverything'],
+  ['span', { class: 'literal' }, 'answer_to_life_the_universe_and_everything'],
   ' ',
   ['span', { class: 'operator' }, '='],
+  ' { ',
+  ['span', { class: 'number' }, '42'],
+  ['span', { class: 'operator' }, ':'],
   ' ',
-  ['span', { class: 'number' }, '42']
+  ['span', { class: 'number' }, '42'],
+  ' }[',
+  ['span', { class: 'string' }, "'42'"],
+  '] ',
+  ['span', { class: 'comment' }, '/* 42 */']
 ])
 ```
 
@@ -777,6 +792,21 @@ pro(ref).one.two.three.four = 1234
 expect(ref).to.deep.equal({ one: { two: { three: { four: 1234 } } } })
 ```
 
+### rwd
+
+```ts
+const rwd: (root: CRoot, selector: string, cell_width_px: number, cell_height_px: number, ...specs: [number, number?, number?][]) => void;
+```
+
+A responsive‑web‑design helper that generates CSS rules for a grid layout.
+
+- `root` and `selector` specify where to apply the generated rules (see `c`).
+- `cell_width_px` and `cell_height_px` specify the base cell dimensions in pixels.
+- Each entry in `specs` is a tuple of:
+  - `max_width`: maximum number of cells in a row (viewport width breakpoint).
+  - `width` (optional, default: `1`): number of cells occupied by the element.
+  - `height` (optional): number of cells in height occupied by the element.
+
 ### s
 
 ```ts
@@ -812,7 +842,6 @@ Shorthand for: `s('svg', ['use', { 'xlink:href': '#' + id }], ...args)`.
 
 ```ts
 const uuid_v1: (date?: Date, node?: string) => string;
-export {};
 ```
 
 Generates a UUID v1 (time-based) identifier.