@glowbox/react 1.0.0-rc.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Eetu Sutinen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,93 @@
+# @glowbox/react
+
+glowbox components for **React**: `<LedGrid>` — the 3D WebGL LED-grid display (over
+**[@glowbox/led-grid](../led-grid)**) — and `<NixieTube>` — a glowing nixie-tube numeral (over
+**[@glowbox/nixie](../nixie)**).
+
+```sh
+yarn add @glowbox/react
+# peer: react ^18 || ^19   (@glowbox/led-grid + @glowbox/nixie come along as dependencies)
+```
+
+## `<LedGrid>`
+
+```tsx
+import { LedGrid, type LedDisplay } from '@glowbox/react';
+
+const draw = (d: LedDisplay, dt: number) => {
+	d.clear();
+	d.sphere([4, 4, 4], 3, '#00aaff');
+};
+
+export default function App() {
+	return (
+		<div style={{ width: 480, height: 480 }}>
+			<LedGrid
+				size={[8, 8, 8]}
+				draw={draw}
+				led={{ glow: 3, offColor: '#0a0a12' }}
+				camera={{ autoOrbit: true, projection: 'perspective' }}
+				color={{ background: '#000', gain: 1.1 }}
+				interaction={{ zoom: true }}
+			/>
+		</div>
+	);
+}
+```
+
+| prop                  | type                                | notes                                                                                  |
+| --------------------- | ----------------------------------- | -------------------------------------------------------------------------------------- |
+| `size`                | `[number, number, number]`          | grid dims `[nx, ny, nz]` (changing it resizes in place — no remount)                   |
+| `draw`                | `(d: LedDisplay, dt: number)=>void` | called every frame; write voxels here                                                  |
+| `led`                 | `LedOptions`                        | `style` `shape` `stagger` `rgb` `rgbLayout` `vivid` `outline` `size` `glow` `offColor` |
+| `color`               | `ColorOptions`                      | `background` `gain` `tint`                                                             |
+| `camera`              | `CameraOptions`                     | `yaw` `pitch` `distance` `fov` `projection` `autoOrbit` `orbitSpeed` `pitchLimits`     |
+| `interaction`         | `InteractionOptions`                | `drag` `dragSpeed` `zoom` `zoomLimits`                                                 |
+| `quality`             | `QualityOptions`                    | `pixelRatio` `antialias` `paused` `fps` (frame-rate cap)                               |
+| `className` / `style` | —                                   | forwarded to the `<canvas>`                                                            |
+
+Forward a `ref` to reach the imperative `LedDisplay` handle (`snapshot()`, `stats`,
+`setCamera`, …):
+
+```tsx
+const grid = useRef<LedDisplay | null>(null);
+<LedGrid ref={grid} size={[8, 8, 8]} />;
+// grid.current?.snapshot()
+```
+
+The grouped props mirror `@glowbox/led-grid`'s options 1:1 and update **live** — even `size`
+resizes the grid in place. See **@glowbox/led-grid** for defaults, the voxel API, and colour
+semantics.
+
+## `<NixieTube>`
+
+```tsx
+import { NixieTube } from '@glowbox/react';
+
+<div style={{ width: 80, height: 150 }}>
+	<NixieTube value="7" tubeStyle="classic" color="#ff6a12" />
+</div>;
+```
+
+| prop                  | type                            | notes                                                      |
+| --------------------- | ------------------------------- | ---------------------------------------------------------- |
+| `value`               | `string \| number \| null`      | the lit symbol: `0`–`9`, `:`, `-`, or `null`/`''` for dark |
+| `tubeStyle`           | `'classic' \| 'slim' \| 'tall'` | physical tube style (maps to the core `style` option)      |
+| `color`               | `Color`                         | glow colour (default warm nixie orange)                    |
+| `glow`                | `number`                        | glow strength 0..1                                         |
+| `background`          | `Color`                         | tube glass colour                                          |
+| `mesh`                | `boolean`                       | draw the honeycomb anode mesh (default `true`)             |
+| `ghost`               | `boolean`                       | show the unlit cathode stack (default `true`)              |
+| `pixelRatio`          | `number`                        | cap on `devicePixelRatio`                                  |
+| `className` / `style` | —                               | forwarded to the `<canvas>` (CSS)                          |
+
+Props update **live**; forward a `ref` for the imperative `NixieTube` handle (`setValue`,
+`setOptions`, `resize`, `snapshot`). See **@glowbox/nixie** for defaults + the
+size-adaptive rendering.
+
+---
+
+Sibling packages with the same components: **[@glowbox/svelte](../svelte)** and
+**[@glowbox/vue](../vue)**; content helpers in **[@glowbox/extras](../extras)**. Each
+component fills its parent; give the parent a size. Live demos:
+<https://eetu.github.io/glowbox/>.

package/dist/LedGrid.d.ts

@@ -0,0 +1,21 @@
+import { CameraOptions, ColorOptions, InteractionOptions, LedDisplay, LedOptions, QualityOptions } from '@glowbox/led-grid';
+import { CSSProperties } from 'react';
+export interface LedGridProps {
+    /** Grid size [nx, ny, nz]. Changing it resizes in place (no remount). */
+    size: [number, number, number];
+    /** Called every frame; write voxels here. */
+    draw?: (d: LedDisplay, dt: number) => void;
+    led?: LedOptions;
+    color?: ColorOptions;
+    camera?: CameraOptions;
+    interaction?: InteractionOptions;
+    quality?: QualityOptions;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * `<LedGrid>` mounts a 3D WebGL LED-grid display and runs your per-frame draw
+ * callback. Forward a ref to reach the imperative `LedDisplay` handle
+ * (`snapshot()`, `stats`, `setCamera`, …).
+ */
+export declare const LedGrid: import('react').ForwardRefExoticComponent<LedGridProps & import('react').RefAttributes<LedDisplay | null>>;

package/dist/NixieTube.d.ts

@@ -0,0 +1,21 @@
+import { NixieOptions, NixieStyle, NixieTube as NixieTubeHandle } from '@glowbox/nixie';
+import { CSSProperties } from 'react';
+export interface NixieTubeProps {
+    /** The lit symbol: a char `0`–`9`, `:`, `-`, or null/'' for all-cathodes-dark. */
+    value?: string | number | null;
+    /** Physical tube style — maps to the core `style` option (renamed to avoid the DOM `style`). */
+    tubeStyle?: NixieStyle;
+    color?: NixieOptions['color'];
+    glow?: number;
+    background?: NixieOptions['background'];
+    mesh?: boolean;
+    ghost?: boolean;
+    pixelRatio?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * `<NixieTube>` mounts a single glowing nixie-tube numeral. Forward a ref to reach the
+ * imperative `NixieTube` handle (`setValue`, `setOptions`, `resize`, `snapshot`, …).
+ */
+export declare const NixieTube: import('react').ForwardRefExoticComponent<NixieTubeProps & import('react').RefAttributes<NixieTubeHandle | null>>;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { LedGrid, type LedGridProps } from './LedGrid';
+export { NixieTube, type NixieTubeProps } from './NixieTube';
+export type * from '@glowbox/led-grid';
+export type { NixieOptions, NixieStyle, NixieTube as NixieTubeHandle } from '@glowbox/nixie';

package/dist/index.js

@@ -0,0 +1,123 @@
+import { createLedDisplay as e } from "@glowbox/led-grid";
+import { forwardRef as t, useEffect as n, useImperativeHandle as r, useRef as i, useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { createNixieTube as s } from "@glowbox/nixie";
+//#region src/LedGrid.tsx
+var c = {
+	display: "block",
+	width: "100%",
+	height: "100%",
+	touchAction: "none"
+}, l = t(function(t, s) {
+	let { size: l, draw: u, led: d, color: f, camera: p, interaction: m, quality: h, className: g, style: _ } = t, v = i(null), [y, b] = a(null), x = i(t);
+	x.current = t, n(() => {
+		let t = v.current;
+		if (!t) return;
+		let n = x.current, r = e(t, {
+			size: n.size,
+			led: n.led,
+			color: n.color,
+			camera: n.camera,
+			interaction: n.interaction,
+			quality: n.quality
+		});
+		if (!r) {
+			console.warn("LedGrid: WebGL unavailable");
+			return;
+		}
+		return b(r), () => {
+			r.dispose(), b(null);
+		};
+	}, []), r(s, () => y, [y]);
+	let [S, C, w] = l;
+	return n(() => {
+		y?.resize([
+			S,
+			C,
+			w
+		]);
+	}, [
+		y,
+		S,
+		C,
+		w
+	]), n(() => {
+		y?.setOptions({ led: d });
+	}, [y, d]), n(() => {
+		y?.setOptions({ color: f });
+	}, [y, f]), n(() => {
+		y?.setOptions({ camera: p });
+	}, [y, p]), n(() => {
+		y?.setOptions({ interaction: m });
+	}, [y, m]), n(() => {
+		y?.setOptions({ quality: h });
+	}, [y, h]), n(() => {
+		if (!(!y || !u)) return y.onFrame(u);
+	}, [y, u]), /* @__PURE__ */ o("canvas", {
+		ref: v,
+		className: g,
+		style: {
+			...c,
+			..._
+		}
+	});
+}), u = {
+	display: "block",
+	width: "100%",
+	height: "100%"
+}, d = t(function(e, t) {
+	let { value: c = null, tubeStyle: l = "classic", color: d, glow: f, background: p, mesh: m, ghost: h, pixelRatio: g, className: _, style: v } = e, y = i(null), [b, x] = a(null), S = i(e);
+	return S.current = e, n(() => {
+		let e = y.current;
+		if (!e) return;
+		let t = S.current, n = s(e, {
+			value: t.value ?? null,
+			style: t.tubeStyle,
+			color: t.color,
+			glow: t.glow,
+			background: t.background,
+			mesh: t.mesh,
+			ghost: t.ghost,
+			pixelRatio: t.pixelRatio
+		});
+		if (!n) {
+			console.warn("NixieTube: 2D canvas unavailable");
+			return;
+		}
+		return x(n), () => {
+			n.dispose(), x(null);
+		};
+	}, []), r(t, () => b, [b]), n(() => {
+		b?.setValue(c ?? null);
+	}, [b, c]), n(() => {
+		b?.setOptions({
+			style: l,
+			color: d,
+			glow: f,
+			background: p,
+			mesh: m,
+			ghost: h,
+			pixelRatio: g
+		});
+	}, [
+		b,
+		l,
+		d,
+		f,
+		p,
+		m,
+		h,
+		g
+	]), /* @__PURE__ */ o("canvas", {
+		ref: y,
+		className: _,
+		style: {
+			...u,
+			...v
+		}
+	});
+});
+//#endregion
+export { l as LedGrid, d as NixieTube };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/LedGrid.tsx","../src/NixieTube.tsx"],"sourcesContent":["// React wrapper around the plain-JS LED display. Give it a `size` and an optional\n// `draw(d, dt)` callback; the grouped option props (led/color/camera/interaction/\n// quality) mirror @glowbox/led-grid's options 1:1 and update live. All content is the\n// client's — this ships no programs. Mirrors @glowbox/svelte over the same core.\nimport {\n\ttype CameraOptions,\n\ttype ColorOptions,\n\tcreateLedDisplay,\n\ttype InteractionOptions,\n\ttype LedDisplay,\n\ttype LedOptions,\n\ttype QualityOptions\n} from '@glowbox/led-grid';\nimport {\n\ttype CSSProperties,\n\tforwardRef,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n\tuseState\n} from 'react';\n\nexport interface LedGridProps {\n\t/** Grid size [nx, ny, nz]. Changing it resizes in place (no remount). */\n\tsize: [number, number, number];\n\t/** Called every frame; write voxels here. */\n\tdraw?: (d: LedDisplay, dt: number) => void;\n\tled?: LedOptions;\n\tcolor?: ColorOptions;\n\tcamera?: CameraOptions;\n\tinteraction?: InteractionOptions;\n\tquality?: QualityOptions;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n}\n\n// The canvas fills its parent by default; give the parent a size.\nconst baseStyle: CSSProperties = {\n\tdisplay: 'block',\n\twidth: '100%',\n\theight: '100%',\n\ttouchAction: 'none' // let drag-orbit work without the page panning\n};\n\n/**\n * `<LedGrid>` mounts a 3D WebGL LED-grid display and runs your per-frame draw\n * callback. Forward a ref to reach the imperative `LedDisplay` handle\n * (`snapshot()`, `stats`, `setCamera`, …).\n */\n// forwardRef (not the React-19 ref-as-prop) so the same build works against the\n// React 18 peer too.\n// eslint-disable-next-line @eslint-react/no-forward-ref\nexport const LedGrid = forwardRef<LedDisplay | null, LedGridProps>(function LedGrid(props, ref) {\n\tconst { size, draw, led, color, camera, interaction, quality, className, style } = props;\n\tconst canvasRef = useRef<HTMLCanvasElement>(null);\n\tconst [display, setDisplay] = useState<LedDisplay | null>(null);\n\n\t// Latest props, read once at creation (so the create effect can run mount-only\n\t// while later effects keep everything in sync).\n\tconst latestRef = useRef(props);\n\tlatestRef.current = props;\n\n\t// Create the display once for the canvas; dispose on unmount.\n\tuseEffect(() => {\n\t\tconst canvas = canvasRef.current;\n\t\tif (!canvas) return;\n\t\tconst p = latestRef.current;\n\t\tconst d = createLedDisplay(canvas, {\n\t\t\tsize: p.size,\n\t\t\tled: p.led,\n\t\t\tcolor: p.color,\n\t\t\tcamera: p.camera,\n\t\t\tinteraction: p.interaction,\n\t\t\tquality: p.quality\n\t\t});\n\t\tif (!d) {\n\t\t\tconsole.warn('LedGrid: WebGL unavailable');\n\t\t\treturn;\n\t\t}\n\t\tsetDisplay(d);\n\t\treturn () => {\n\t\t\td.dispose();\n\t\t\tsetDisplay(null);\n\t\t};\n\t}, []);\n\n\t// Expose the display via the forwarded ref (null until it exists).\n\tuseImperativeHandle<LedDisplay | null, LedDisplay | null>(ref, () => display, [display]);\n\n\t// Resize the grid in place when the dimensions change (no remount / context loss).\n\tconst [sx, sy, sz] = size;\n\tuseEffect(() => {\n\t\tdisplay?.resize([sx, sy, sz]);\n\t}, [display, sx, sy, sz]);\n\n\t// Live-update each option group *independently*. Patching all groups on any one change\n\t// would re-send `camera` (yaw/pitch/distance) on, say, a colour tweak — snapping the\n\t// view back and fighting drag / auto-orbit. One effect per group patches only what changed.\n\tuseEffect(() => {\n\t\tdisplay?.setOptions({ led });\n\t}, [display, led]);\n\tuseEffect(() => {\n\t\tdisplay?.setOptions({ color });\n\t}, [display, color]);\n\tuseEffect(() => {\n\t\tdisplay?.setOptions({ camera });\n\t}, [display, camera]);\n\tuseEffect(() => {\n\t\tdisplay?.setOptions({ interaction });\n\t}, [display, interaction]);\n\tuseEffect(() => {\n\t\tdisplay?.setOptions({ quality });\n\t}, [display, quality]);\n\n\t// (Re)bind the per-frame draw callback.\n\tuseEffect(() => {\n\t\tif (!display || !draw) return;\n\t\treturn display.onFrame(draw);\n\t}, [display, draw]);\n\n\treturn <canvas ref={canvasRef} className={className} style={{ ...baseStyle, ...style }} />;\n});\n","// React wrapper around @glowbox/nixie's canvas tube. Give it a `value` (the lit symbol)\n// plus optional appearance props that mirror the core NixieOptions and update live. The\n// canvas fills its parent — size the parent to size the tube. Ships in @glowbox/react\n// alongside <LedGrid>, over the sibling @glowbox/nixie core.\nimport {\n\tcreateNixieTube,\n\ttype NixieOptions,\n\ttype NixieStyle,\n\ttype NixieTube as NixieTubeHandle\n} from '@glowbox/nixie';\nimport {\n\ttype CSSProperties,\n\tforwardRef,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n\tuseState\n} from 'react';\n\nexport interface NixieTubeProps {\n\t/** The lit symbol: a char `0`–`9`, `:`, `-`, or null/'' for all-cathodes-dark. */\n\tvalue?: string | number | null;\n\t/** Physical tube style — maps to the core `style` option (renamed to avoid the DOM `style`). */\n\ttubeStyle?: NixieStyle;\n\tcolor?: NixieOptions['color'];\n\tglow?: number;\n\tbackground?: NixieOptions['background'];\n\tmesh?: boolean;\n\tghost?: boolean;\n\tpixelRatio?: number;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n}\n\n// The canvas fills its parent by default; give the parent a size.\nconst baseStyle: CSSProperties = { display: 'block', width: '100%', height: '100%' };\n\n/**\n * `<NixieTube>` mounts a single glowing nixie-tube numeral. Forward a ref to reach the\n * imperative `NixieTube` handle (`setValue`, `setOptions`, `resize`, `snapshot`, …).\n */\n// forwardRef (not the React-19 ref-as-prop) so the same build works against the React 18 peer.\n// eslint-disable-next-line @eslint-react/no-forward-ref\nexport const NixieTube = forwardRef<NixieTubeHandle | null, NixieTubeProps>(\n\tfunction NixieTube(props, ref) {\n\t\tconst {\n\t\t\tvalue = null,\n\t\t\ttubeStyle = 'classic',\n\t\t\tcolor,\n\t\t\tglow,\n\t\t\tbackground,\n\t\t\tmesh,\n\t\t\tghost,\n\t\t\tpixelRatio,\n\t\t\tclassName,\n\t\t\tstyle\n\t\t} = props;\n\t\tconst canvasRef = useRef<HTMLCanvasElement>(null);\n\t\tconst [tube, setTube] = useState<NixieTubeHandle | null>(null);\n\n\t\t// Latest props, read once at creation (create mount-only; later effects sync).\n\t\tconst latestRef = useRef(props);\n\t\tlatestRef.current = props;\n\n\t\t// Create the tube once for the canvas; dispose on unmount.\n\t\tuseEffect(() => {\n\t\t\tconst canvas = canvasRef.current;\n\t\t\tif (!canvas) return;\n\t\t\tconst p = latestRef.current;\n\t\t\tconst t = createNixieTube(canvas, {\n\t\t\t\tvalue: p.value ?? null,\n\t\t\t\tstyle: p.tubeStyle,\n\t\t\t\tcolor: p.color,\n\t\t\t\tglow: p.glow,\n\t\t\t\tbackground: p.background,\n\t\t\t\tmesh: p.mesh,\n\t\t\t\tghost: p.ghost,\n\t\t\t\tpixelRatio: p.pixelRatio\n\t\t\t});\n\t\t\tif (!t) {\n\t\t\t\tconsole.warn('NixieTube: 2D canvas unavailable');\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetTube(t);\n\t\t\treturn () => {\n\t\t\t\tt.dispose();\n\t\t\t\tsetTube(null);\n\t\t\t};\n\t\t}, []);\n\n\t\tuseImperativeHandle<NixieTubeHandle | null, NixieTubeHandle | null>(ref, () => tube, [tube]);\n\n\t\t// Live-update the lit symbol.\n\t\tuseEffect(() => {\n\t\t\ttube?.setValue(value ?? null);\n\t\t}, [tube, value]);\n\n\t\t// Live-update appearance when any option changes.\n\t\tuseEffect(() => {\n\t\t\ttube?.setOptions({ style: tubeStyle, color, glow, background, mesh, ghost, pixelRatio });\n\t\t}, [tube, tubeStyle, color, glow, background, mesh, ghost, pixelRatio]);\n\n\t\treturn <canvas ref={canvasRef} className={className} style={{ ...baseStyle, ...style }} />;\n\t}\n);\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@glowbox/react",
+  "version": "1.0.0-rc.2",
+  "description": "glowbox components for React — <LedGrid> (3D WebGL LED grid) + <NixieTube> (nixie-tube display).",
+  "keywords": [
+    "react",
+    "led",
+    "led-cube",
+    "webgl",
+    "voxel",
+    "3d",
+    "nixie",
+    "component"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/eetu/glowbox.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://eetu.github.io/glowbox/",
+  "scripts": {
+    "build": "vite build",
+    "prepack": "vite build",
+    "test": "vitest run",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "tsc --noEmit",
+    "size": "size-limit"
+  },
+  "size-limit": [
+    {
+      "name": "esm (own code; react + core external)",
+      "path": "dist/index.js",
+      "ignore": [
+        "react",
+        "react-dom",
+        "react/jsx-runtime",
+        "@glowbox/led-grid",
+        "@glowbox/nixie"
+      ],
+      "limit": "1.5 kB"
+    }
+  ],
+  "peerDependencies": {
+    "react": "^18 || ^19"
+  },
+  "dependencies": {
+    "@glowbox/led-grid": "^1.0.0-rc.2",
+    "@glowbox/nixie": "^1.0.0-rc.2"
+  },
+  "devDependencies": {
+    "@anarkisti/eslint-config": "^1",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^5",
+    "@vitest/browser": "^4.1",
+    "@vitest/browser-playwright": "^4.1",
+    "eslint": "^10",
+    "playwright": "^1.61",
+    "react": "^19",
+    "react-dom": "^19",
+    "typescript": "^6",
+    "vite": "^8.1",
+    "vite-plugin-dts": "^5",
+    "vitest": "^4.1",
+    "vitest-browser-react": "^1"
+  }
+}