@glowbox/svelte 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,83 @@
+# @glowbox/svelte
+
+glowbox components for **Svelte 5**: `<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/svelte
+# peer: svelte ^5   (@glowbox/led-grid + @glowbox/nixie come along as dependencies)
+```
+
+## `<LedGrid>`
+
+```svelte
+<script lang="ts">
+	import { LedGrid, type LedDisplay } from '@glowbox/svelte';
+
+	const draw = (d: LedDisplay, dt: number) => {
+		d.clear();
+		d.sphere([4, 4, 4], 3, '#00aaff');
+	};
+</script>
+
+<LedGrid
+	size={[8, 8, 8]}
+	{draw}
+	led={{ glow: 3, offColor: '#0a0a12' }}
+	camera={{ autoOrbit: true, projection: 'perspective' }}
+	color={{ background: '#000', gain: 1.1 }}
+	interaction={{ zoom: true }}
+/>
+```
+
+| 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)                               |
+| `oncreate`    | `(d: LedDisplay \| null)=>void`     | imperative handle — called with the display on create, `null` on teardown              |
+
+The grouped props mirror `@glowbox/led-grid`'s options 1:1 and update **live** — even `size`
+resizes the grid in place (no remount / context loss). Colours accept a `Color` (`[r,g,b]`
+0..1, `>1` blooms, or any CSS string). See **@glowbox/led-grid** for every field's default,
+the full voxel API, and colour semantics.
+
+## `<NixieTube>`
+
+```svelte
+<script lang="ts">
+	import { NixieTube } from '@glowbox/svelte';
+</script>
+
+<!-- the tube fills its parent — size the parent -->
+<div style="width: 80px; height: 150px">
+	<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`                                  |
+| `oncreate`   | `(tube: NixieTube \| null)=>void` | imperative handle — the tube on create, `null` on teardown |
+
+Props update **live** (`value` → `setValue`, the rest → `setOptions`). A clock is just a
+row of `<NixieTube>`s. See **@glowbox/nixie** for defaults + the size-adaptive rendering.
+
+---
+
+Sibling packages with the same components: **[@glowbox/react](../react)** and
+**[@glowbox/vue](../vue)**; content helpers in **[@glowbox/extras](../extras)**. Each
+component fills its parent (`width/height: 100%`); give the parent a size.
+Live demos: <https://eetu.github.io/glowbox/>.

package/dist/LedGrid.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	// Svelte wrapper around the plain-JS LED display. Give it a `size` and an
+	// optional `draw(d, dt)` callback; the grouped option props (led/color/camera/
+	// interaction/quality) mirror @glowbox/led-grid's options 1:1 and update live. All
+	// content is the client's — this ships no programs. (React/Vue wrappers can
+	// mirror this over the same core.)
+	import {
+		type CameraOptions,
+		type ColorOptions,
+		createLedDisplay,
+		type InteractionOptions,
+		type LedDisplay,
+		type LedOptions,
+		type QualityOptions
+	} from '@glowbox/led-grid';
+	import { untrack } from 'svelte';
+
+	let {
+		size,
+		draw,
+		led,
+		color,
+		camera,
+		interaction,
+		quality,
+		oncreate
+	}: {
+		size: [number, number, number];
+		draw?: (d: LedDisplay, dt: number) => void;
+		led?: LedOptions;
+		color?: ColorOptions;
+		camera?: CameraOptions;
+		interaction?: InteractionOptions;
+		quality?: QualityOptions;
+		/** Called with the display when (re)created, and with null on teardown —
+		 *  an escape hatch for imperative access (snapshot(), stats, setCamera…). */
+		oncreate?: (display: LedDisplay | null) => void;
+	} = $props();
+
+	let canvas = $state<HTMLCanvasElement | null>(null);
+	// $state.raw: the display is an opaque handle (owns a Float32Array + methods),
+	// not reactive data — deep-proxying it would break identity checks and mutate
+	// its buffer through a proxy.
+	let display = $state.raw<LedDisplay | null>(null);
+
+	// Create the display once for the canvas. Depends only on `canvas` — the option
+	// groups and size are read untracked so changing them never re-creates (size
+	// changes go through display.resize() below, which keeps the same canvas/context).
+	$effect(() => {
+		const el = canvas;
+		if (!el) return;
+		const d = untrack(() =>
+			createLedDisplay(el, { size, led, color, camera, interaction, quality })
+		);
+		if (!d) {
+			console.warn('LedGrid: WebGL unavailable');
+			return;
+		}
+		display = d;
+		untrack(() => oncreate?.(d));
+		return () => {
+			d.dispose();
+			if (display === d) display = null;
+			untrack(() => oncreate?.(null));
+		};
+	});
+
+	// Resize the grid in place when the dimensions change (no remount / context loss).
+	$effect(() => {
+		const [x, y, z] = size;
+		display?.resize([x, y, z]);
+	});
+
+	// Live-update each option group *independently*. Patching all groups on any one change
+	// would re-send `camera` (yaw/pitch/distance) on, say, a colour tweak — snapping the
+	// view back and fighting drag / auto-orbit. One effect per group patches only what changed.
+	$effect(() => {
+		display?.setOptions({ led });
+	});
+	$effect(() => {
+		display?.setOptions({ color });
+	});
+	$effect(() => {
+		display?.setOptions({ camera });
+	});
+	$effect(() => {
+		display?.setOptions({ interaction });
+	});
+	$effect(() => {
+		display?.setOptions({ quality });
+	});
+
+	// (Re)bind the per-frame draw callback.
+	$effect(() => {
+		const d = display;
+		if (!d || !draw) return;
+		return d.onFrame(draw);
+	});
+</script>
+
+<canvas bind:this={canvas}></canvas>
+
+<style>
+	canvas {
+		display: block;
+		width: 100%;
+		height: 100%;
+		touch-action: none; /* let drag-orbit work without the page panning */
+	}
+</style>

package/dist/LedGrid.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type CameraOptions, type ColorOptions, type InteractionOptions, type LedDisplay, type LedOptions, type QualityOptions } from '@glowbox/led-grid';
+type $$ComponentProps = {
+    size: [number, number, number];
+    draw?: (d: LedDisplay, dt: number) => void;
+    led?: LedOptions;
+    color?: ColorOptions;
+    camera?: CameraOptions;
+    interaction?: InteractionOptions;
+    quality?: QualityOptions;
+    /** Called with the display when (re)created, and with null on teardown —
+     *  an escape hatch for imperative access (snapshot(), stats, setCamera…). */
+    oncreate?: (display: LedDisplay | null) => void;
+};
+declare const LedGrid: import("svelte").Component<$$ComponentProps, {}, "">;
+type LedGrid = ReturnType<typeof LedGrid>;
+export default LedGrid;

package/dist/NixieTube.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	// Svelte wrapper around @glowbox/nixie's canvas tube. Give it a `value` (the lit
+	// symbol) plus optional appearance props that mirror the core NixieOptions and update
+	// live. The canvas fills its parent — size the parent to size the tube. Ships in
+	// @glowbox/svelte alongside <LedGrid>, over the sibling @glowbox/nixie core.
+	import {
+		createNixieTube,
+		type NixieOptions,
+		type NixieStyle,
+		type NixieTube
+	} from '@glowbox/nixie';
+	import { untrack } from 'svelte';
+
+	let {
+		value = null,
+		tubeStyle = 'classic',
+		color,
+		glow,
+		background,
+		mesh,
+		ghost,
+		pixelRatio,
+		oncreate
+	}: {
+		/** 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;
+		/** Called with the tube when created, and null on teardown — imperative escape hatch. */
+		oncreate?: (tube: NixieTube | null) => void;
+	} = $props();
+
+	let canvas = $state<HTMLCanvasElement | null>(null);
+	// $state.raw: the tube is an opaque handle (owns a 2D context + methods), not reactive data.
+	let tube = $state.raw<NixieTube | null>(null);
+
+	// Create the tube once for the canvas — options are read untracked so changing them
+	// never re-creates (value goes through setValue, appearance through setOptions below).
+	$effect(() => {
+		const el = canvas;
+		if (!el) return;
+		const t = untrack(() =>
+			createNixieTube(el, {
+				value,
+				style: tubeStyle,
+				color,
+				glow,
+				background,
+				mesh,
+				ghost,
+				pixelRatio
+			})
+		);
+		if (!t) {
+			console.warn('NixieTube: 2D canvas unavailable');
+			return;
+		}
+		tube = t;
+		untrack(() => oncreate?.(t));
+		return () => {
+			t.dispose();
+			if (tube === t) tube = null;
+			untrack(() => oncreate?.(null));
+		};
+	});
+
+	// Live-update the lit symbol.
+	$effect(() => {
+		tube?.setValue(value);
+	});
+
+	// Live-update appearance when any option changes.
+	$effect(() => {
+		tube?.setOptions({ style: tubeStyle, color, glow, background, mesh, ghost, pixelRatio });
+	});
+</script>
+
+<canvas bind:this={canvas}></canvas>
+
+<style>
+	canvas {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/NixieTube.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type NixieOptions, type NixieStyle, type NixieTube } from '@glowbox/nixie';
+type $$ComponentProps = {
+    /** 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;
+    /** Called with the tube when created, and null on teardown — imperative escape hatch. */
+    oncreate?: (tube: NixieTube | null) => void;
+};
+declare const NixieTube: import("svelte").Component<$$ComponentProps, {}, "">;
+type NixieTube = ReturnType<typeof NixieTube>;
+export default NixieTube;

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,4 @@
+// @glowbox/svelte — glowbox components for Svelte 5:
+//   import { LedGrid, NixieTube } from "@glowbox/svelte";
+export { default as LedGrid } from './LedGrid.svelte';
+export { default as NixieTube } from './NixieTube.svelte';

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@glowbox/svelte",
+  "version": "1.0.0-rc.2",
+  "description": "glowbox components for Svelte 5 — <LedGrid> (3D WebGL LED grid) + <NixieTube> (nixie-tube display).",
+  "keywords": [
+    "svelte",
+    "led",
+    "led-cube",
+    "webgl",
+    "voxel",
+    "3d",
+    "nixie",
+    "component"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/eetu/glowbox.git",
+    "directory": "packages/svelte"
+  },
+  "homepage": "https://eetu.github.io/glowbox/",
+  "scripts": {
+    "build": "svelte-package",
+    "prepack": "svelte-package",
+    "test": "vitest run",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "peerDependencies": {
+    "svelte": "^5"
+  },
+  "dependencies": {
+    "@glowbox/led-grid": "^1.0.0-rc.2",
+    "@glowbox/nixie": "^1.0.0-rc.2"
+  },
+  "devDependencies": {
+    "@anarkisti/eslint-config": "^1",
+    "@sveltejs/package": "^2.5",
+    "@sveltejs/vite-plugin-svelte": "^7",
+    "@vitest/browser": "^4.1",
+    "@vitest/browser-playwright": "^4.1",
+    "eslint": "^10",
+    "playwright": "^1.61",
+    "svelte": "^5.56",
+    "svelte-check": "^4.7",
+    "typescript": "^6",
+    "vite": "^8.1",
+    "vitest": "^4.1",
+    "vitest-browser-svelte": "^2.2"
+  }
+}