@glowbox/vue 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,97 @@
+# @glowbox/vue
+
+glowbox components for **Vue 3**: `<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/vue
+# peer: vue ^3   (@glowbox/led-grid + @glowbox/nixie come along as dependencies)
+```
+
+## `<LedGrid>`
+
+```vue
+<script setup lang="ts">
+import { LedGrid, type LedDisplay } from '@glowbox/vue';
+
+const draw = (d: LedDisplay, dt: number) => {
+	d.clear();
+	d.sphere([4, 4, 4], 3, '#00aaff');
+};
+</script>
+
+<template>
+	<div style="width: 480px; height: 480px">
+		<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>
+</template>
+```
+
+| 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)                               |
+
+The component `expose()`s the imperative `LedDisplay` handle as `display` on the component
+ref (`snapshot()`, `stats`, `setCamera`, …):
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+const grid = ref();
+// grid.value?.display?.snapshot()
+</script>
+
+<template><LedGrid ref="grid" :size="[8, 8, 8]" /></template>
+```
+
+The grouped props mirror `@glowbox/led-grid`'s options 1:1 and update **live**. See
+**@glowbox/led-grid** for defaults, the voxel API, and colour semantics.
+
+## `<NixieTube>`
+
+```vue
+<script setup lang="ts">
+import { NixieTube } from '@glowbox/vue';
+</script>
+
+<template>
+	<div style="width: 80px; height: 150px">
+		<NixieTube value="7" tube-style="classic" color="#ff6a12" />
+	</div>
+</template>
+```
+
+| 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`                                  |
+
+Props update **live**; the tube handle is `expose()`d as `tube` (`setValue`, `setOptions`,
+`resize`, `snapshot`). See **@glowbox/nixie** for defaults + the size-adaptive rendering.
+
+---
+
+Sibling packages with the same components: **[@glowbox/svelte](../svelte)** and
+**[@glowbox/react](../react)**; 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,79 @@
+import { CameraOptions, ColorOptions, InteractionOptions, LedDisplay, LedOptions, QualityOptions } from '@glowbox/led-grid';
+import { PropType } from 'vue';
+/**
+ * `<LedGrid>` mounts a 3D WebGL LED-grid display and runs your per-frame draw
+ * callback. `expose()`s the imperative `LedDisplay` handle as `display`
+ * (`snapshot()`, `stats`, `setCamera`, …) on the component ref.
+ */
+export declare const LedGrid: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** Grid size [nx, ny, nz]. Changing it resizes in place (no remount). */
+    size: {
+        type: PropType<[number, number, number]>;
+        required: true;
+    };
+    /** Called every frame; write voxels here. */
+    draw: {
+        type: PropType<(d: LedDisplay, dt: number) => void>;
+        default: undefined;
+    };
+    led: {
+        type: PropType<LedOptions>;
+        default: undefined;
+    };
+    color: {
+        type: PropType<ColorOptions>;
+        default: undefined;
+    };
+    camera: {
+        type: PropType<CameraOptions>;
+        default: undefined;
+    };
+    interaction: {
+        type: PropType<InteractionOptions>;
+        default: undefined;
+    };
+    quality: {
+        type: PropType<QualityOptions>;
+        default: undefined;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** Grid size [nx, ny, nz]. Changing it resizes in place (no remount). */
+    size: {
+        type: PropType<[number, number, number]>;
+        required: true;
+    };
+    /** Called every frame; write voxels here. */
+    draw: {
+        type: PropType<(d: LedDisplay, dt: number) => void>;
+        default: undefined;
+    };
+    led: {
+        type: PropType<LedOptions>;
+        default: undefined;
+    };
+    color: {
+        type: PropType<ColorOptions>;
+        default: undefined;
+    };
+    camera: {
+        type: PropType<CameraOptions>;
+        default: undefined;
+    };
+    interaction: {
+        type: PropType<InteractionOptions>;
+        default: undefined;
+    };
+    quality: {
+        type: PropType<QualityOptions>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    draw: (d: LedDisplay, dt: number) => void;
+    led: LedOptions;
+    color: ColorOptions;
+    camera: CameraOptions;
+    interaction: InteractionOptions;
+    quality: QualityOptions;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/NixieTube.d.ts

@@ -0,0 +1,88 @@
+import { NixieOptions, NixieStyle } from '@glowbox/nixie';
+import { PropType } from 'vue';
+/**
+ * `<NixieTube>` mounts a single glowing nixie-tube numeral. `expose()`s the imperative
+ * `NixieTube` handle as `tube` (`setValue`, `setOptions`, `resize`, `snapshot`, …).
+ */
+export declare const NixieTube: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** The lit symbol: a char `0`–`9`, `:`, `-`, or null/'' for all-cathodes-dark. */
+    value: {
+        type: PropType<string | number | null>;
+        default: null;
+    };
+    /** Physical tube style — maps to the core `style` option (renamed to avoid Vue's `style`). */
+    tubeStyle: {
+        type: PropType<NixieStyle>;
+        default: string;
+    };
+    color: {
+        type: PropType<NixieOptions["color"]>;
+        default: undefined;
+    };
+    glow: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    background: {
+        type: PropType<NixieOptions["background"]>;
+        default: undefined;
+    };
+    mesh: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    ghost: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    pixelRatio: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** The lit symbol: a char `0`–`9`, `:`, `-`, or null/'' for all-cathodes-dark. */
+    value: {
+        type: PropType<string | number | null>;
+        default: null;
+    };
+    /** Physical tube style — maps to the core `style` option (renamed to avoid Vue's `style`). */
+    tubeStyle: {
+        type: PropType<NixieStyle>;
+        default: string;
+    };
+    color: {
+        type: PropType<NixieOptions["color"]>;
+        default: undefined;
+    };
+    glow: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    background: {
+        type: PropType<NixieOptions["background"]>;
+        default: undefined;
+    };
+    mesh: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    ghost: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    pixelRatio: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    color: import('@glowbox/led-grid').Color | undefined;
+    value: string | number | null;
+    background: import('@glowbox/led-grid').Color | undefined;
+    tubeStyle: NixieStyle;
+    glow: number;
+    mesh: boolean;
+    ghost: boolean;
+    pixelRatio: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { LedGrid } from './LedGrid';
+export { NixieTube } 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,150 @@
+import { createLedDisplay as e } from "@glowbox/led-grid";
+import { defineComponent as t, h as n, onMounted as r, onUnmounted as i, ref as a, watch as o } from "vue";
+import { createNixieTube as s } from "@glowbox/nixie";
+//#region src/LedGrid.ts
+var c = {
+	display: "block",
+	width: "100%",
+	height: "100%",
+	touchAction: "none"
+}, l = t({
+	name: "LedGrid",
+	props: {
+		size: {
+			type: Array,
+			required: !0
+		},
+		draw: {
+			type: Function,
+			default: void 0
+		},
+		led: {
+			type: Object,
+			default: void 0
+		},
+		color: {
+			type: Object,
+			default: void 0
+		},
+		camera: {
+			type: Object,
+			default: void 0
+		},
+		interaction: {
+			type: Object,
+			default: void 0
+		},
+		quality: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(t, { expose: s }) {
+		let l = a(null), u = null, d = null, f = () => {
+			d?.(), d = null, u && t.draw && (d = u.onFrame(t.draw));
+		};
+		return r(() => {
+			if (l.value) {
+				if (u = e(l.value, {
+					size: t.size,
+					led: t.led,
+					color: t.color,
+					camera: t.camera,
+					interaction: t.interaction,
+					quality: t.quality
+				}), !u) {
+					console.warn("LedGrid: WebGL unavailable");
+					return;
+				}
+				f();
+			}
+		}), o(() => [
+			t.size[0],
+			t.size[1],
+			t.size[2]
+		], (e) => u?.resize(e)), o(() => t.led, () => u?.setOptions({ led: t.led }), { deep: !0 }), o(() => t.color, () => u?.setOptions({ color: t.color }), { deep: !0 }), o(() => t.camera, () => u?.setOptions({ camera: t.camera }), { deep: !0 }), o(() => t.interaction, () => u?.setOptions({ interaction: t.interaction }), { deep: !0 }), o(() => t.quality, () => u?.setOptions({ quality: t.quality }), { deep: !0 }), o(() => t.draw, () => f()), i(() => {
+			d?.(), u?.dispose(), u = null;
+		}), s({ get display() {
+			return u;
+		} }), () => n("canvas", {
+			ref: l,
+			style: c
+		});
+	}
+}), u = {
+	display: "block",
+	width: "100%",
+	height: "100%"
+}, d = t({
+	name: "NixieTube",
+	props: {
+		value: {
+			type: [String, Number],
+			default: null
+		},
+		tubeStyle: {
+			type: String,
+			default: "classic"
+		},
+		color: {
+			type: [String, Array],
+			default: void 0
+		},
+		glow: {
+			type: Number,
+			default: void 0
+		},
+		background: {
+			type: [String, Array],
+			default: void 0
+		},
+		mesh: {
+			type: Boolean,
+			default: void 0
+		},
+		ghost: {
+			type: Boolean,
+			default: void 0
+		},
+		pixelRatio: {
+			type: Number,
+			default: void 0
+		}
+	},
+	setup(e, { expose: t }) {
+		let c = a(null), l = null, d = () => ({
+			style: e.tubeStyle,
+			color: e.color,
+			glow: e.glow,
+			background: e.background,
+			mesh: e.mesh,
+			ghost: e.ghost,
+			pixelRatio: e.pixelRatio
+		});
+		return r(() => {
+			c.value && (l = s(c.value, {
+				value: e.value,
+				...d()
+			}), l || console.warn("NixieTube: 2D canvas unavailable"));
+		}), o(() => e.value, (e) => l?.setValue(e)), o(() => [
+			e.tubeStyle,
+			e.color,
+			e.glow,
+			e.background,
+			e.mesh,
+			e.ghost,
+			e.pixelRatio
+		], () => l?.setOptions(d()), { deep: !0 }), i(() => {
+			l?.dispose(), l = null;
+		}), t({ get tube() {
+			return l;
+		} }), () => n("canvas", {
+			ref: c,
+			style: u
+		});
+	}
+});
+//#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.ts","../src/NixieTube.ts"],"sourcesContent":["// Vue 3 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. A render-function component (no SFC), so it\n// mirrors @glowbox/svelte over the same core with no template compiler.\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\tdefineComponent,\n\th,\n\tonMounted,\n\tonUnmounted,\n\ttype PropType,\n\tref,\n\ttype StyleValue,\n\twatch\n} from 'vue';\n\n// The canvas fills its parent by default; give the parent a size.\nconst baseStyle: StyleValue = {\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. `expose()`s the imperative `LedDisplay` handle as `display`\n * (`snapshot()`, `stats`, `setCamera`, …) on the component ref.\n */\nexport const LedGrid = defineComponent({\n\tname: 'LedGrid',\n\tprops: {\n\t\t/** Grid size [nx, ny, nz]. Changing it resizes in place (no remount). */\n\t\tsize: { type: Array as unknown as PropType<[number, number, number]>, required: true },\n\t\t/** Called every frame; write voxels here. */\n\t\tdraw: { type: Function as PropType<(d: LedDisplay, dt: number) => void>, default: undefined },\n\t\tled: { type: Object as PropType<LedOptions>, default: undefined },\n\t\tcolor: { type: Object as PropType<ColorOptions>, default: undefined },\n\t\tcamera: { type: Object as PropType<CameraOptions>, default: undefined },\n\t\tinteraction: { type: Object as PropType<InteractionOptions>, default: undefined },\n\t\tquality: { type: Object as PropType<QualityOptions>, default: undefined }\n\t},\n\tsetup(props, { expose }) {\n\t\tconst canvas = ref<HTMLCanvasElement | null>(null);\n\t\tlet display: LedDisplay | null = null;\n\t\tlet stopFrame: (() => void) | null = null;\n\n\t\tconst bindDraw = () => {\n\t\t\tstopFrame?.();\n\t\t\tstopFrame = null;\n\t\t\tif (display && props.draw) stopFrame = display.onFrame(props.draw);\n\t\t};\n\n\t\tonMounted(() => {\n\t\t\tif (!canvas.value) return;\n\t\t\tdisplay = createLedDisplay(canvas.value, {\n\t\t\t\tsize: props.size,\n\t\t\t\tled: props.led,\n\t\t\t\tcolor: props.color,\n\t\t\t\tcamera: props.camera,\n\t\t\t\tinteraction: props.interaction,\n\t\t\t\tquality: props.quality\n\t\t\t});\n\t\t\tif (!display) {\n\t\t\t\tconsole.warn('LedGrid: WebGL unavailable');\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tbindDraw();\n\t\t});\n\n\t\t// Resize the grid in place when the dimensions change (no remount / context loss).\n\t\twatch(\n\t\t\t() => [props.size[0], props.size[1], props.size[2]] as [number, number, number],\n\t\t\t(s) => display?.resize(s)\n\t\t);\n\n\t\t// Live-update each option group *independently*. Patching all groups on any one\n\t\t// change would re-send `camera` (yaw/pitch/distance) on, say, a colour tweak —\n\t\t// snapping the view back and fighting drag / auto-orbit. One watch per group.\n\t\twatch(\n\t\t\t() => props.led,\n\t\t\t() => display?.setOptions({ led: props.led }),\n\t\t\t{ deep: true }\n\t\t);\n\t\twatch(\n\t\t\t() => props.color,\n\t\t\t() => display?.setOptions({ color: props.color }),\n\t\t\t{ deep: true }\n\t\t);\n\t\twatch(\n\t\t\t() => props.camera,\n\t\t\t() => display?.setOptions({ camera: props.camera }),\n\t\t\t{ deep: true }\n\t\t);\n\t\twatch(\n\t\t\t() => props.interaction,\n\t\t\t() => display?.setOptions({ interaction: props.interaction }),\n\t\t\t{\n\t\t\t\tdeep: true\n\t\t\t}\n\t\t);\n\t\twatch(\n\t\t\t() => props.quality,\n\t\t\t() => display?.setOptions({ quality: props.quality }),\n\t\t\t{\n\t\t\t\tdeep: true\n\t\t\t}\n\t\t);\n\n\t\t// (Re)bind the per-frame draw callback.\n\t\twatch(\n\t\t\t() => props.draw,\n\t\t\t() => bindDraw()\n\t\t);\n\n\t\tonUnmounted(() => {\n\t\t\tstopFrame?.();\n\t\t\tdisplay?.dispose();\n\t\t\tdisplay = null;\n\t\t});\n\n\t\t// Expose the live display handle for imperative access via the component ref.\n\t\texpose({\n\t\t\tget display() {\n\t\t\t\treturn display;\n\t\t\t}\n\t\t});\n\n\t\treturn () => h('canvas', { ref: canvas, style: baseStyle });\n\t}\n});\n","// Vue 3 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. A render-function component\n// (no SFC). Ships in @glowbox/vue 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\tdefineComponent,\n\th,\n\tonMounted,\n\tonUnmounted,\n\ttype PropType,\n\tref,\n\ttype StyleValue,\n\twatch\n} from 'vue';\n\n// The canvas fills its parent by default; give the parent a size.\nconst baseStyle: StyleValue = { display: 'block', width: '100%', height: '100%' };\n\n/**\n * `<NixieTube>` mounts a single glowing nixie-tube numeral. `expose()`s the imperative\n * `NixieTube` handle as `tube` (`setValue`, `setOptions`, `resize`, `snapshot`, …).\n */\nexport const NixieTube = defineComponent({\n\tname: 'NixieTube',\n\tprops: {\n\t\t/** The lit symbol: a char `0`–`9`, `:`, `-`, or null/'' for all-cathodes-dark. */\n\t\tvalue: { type: [String, Number] as PropType<string | number | null>, default: null },\n\t\t/** Physical tube style — maps to the core `style` option (renamed to avoid Vue's `style`). */\n\t\ttubeStyle: { type: String as PropType<NixieStyle>, default: 'classic' },\n\t\tcolor: { type: [String, Array] as PropType<NixieOptions['color']>, default: undefined },\n\t\tglow: { type: Number, default: undefined },\n\t\tbackground: {\n\t\t\ttype: [String, Array] as PropType<NixieOptions['background']>,\n\t\t\tdefault: undefined\n\t\t},\n\t\t// default: undefined (not the Boolean-absent → false cast) so the core's own\n\t\t// defaults (mesh/ghost = true) apply when the prop is omitted.\n\t\tmesh: { type: Boolean, default: undefined },\n\t\tghost: { type: Boolean, default: undefined },\n\t\tpixelRatio: { type: Number, default: undefined }\n\t},\n\tsetup(props, { expose }) {\n\t\tconst canvas = ref<HTMLCanvasElement | null>(null);\n\t\tlet tube: NixieTubeHandle | null = null;\n\n\t\tconst options = () => ({\n\t\t\tstyle: props.tubeStyle,\n\t\t\tcolor: props.color,\n\t\t\tglow: props.glow,\n\t\t\tbackground: props.background,\n\t\t\tmesh: props.mesh,\n\t\t\tghost: props.ghost,\n\t\t\tpixelRatio: props.pixelRatio\n\t\t});\n\n\t\tonMounted(() => {\n\t\t\tif (!canvas.value) return;\n\t\t\ttube = createNixieTube(canvas.value, { value: props.value, ...options() });\n\t\t\tif (!tube) console.warn('NixieTube: 2D canvas unavailable');\n\t\t});\n\n\t\t// Live-update the lit symbol.\n\t\twatch(\n\t\t\t() => props.value,\n\t\t\t(v) => tube?.setValue(v)\n\t\t);\n\n\t\t// Live-update appearance when any option changes.\n\t\twatch(\n\t\t\t() => [\n\t\t\t\tprops.tubeStyle,\n\t\t\t\tprops.color,\n\t\t\t\tprops.glow,\n\t\t\t\tprops.background,\n\t\t\t\tprops.mesh,\n\t\t\t\tprops.ghost,\n\t\t\t\tprops.pixelRatio\n\t\t\t],\n\t\t\t() => tube?.setOptions(options()),\n\t\t\t{ deep: true }\n\t\t);\n\n\t\tonUnmounted(() => {\n\t\t\ttube?.dispose();\n\t\t\ttube = null;\n\t\t});\n\n\t\t// Expose the live tube handle for imperative access via the component ref.\n\t\texpose({\n\t\t\tget tube() {\n\t\t\t\treturn tube;\n\t\t\t}\n\t\t});\n\n\t\treturn () => h('canvas', { ref: canvas, style: baseStyle });\n\t}\n});\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@glowbox/vue",
+  "version": "1.0.0-rc.2",
+  "description": "glowbox components for Vue 3 — <LedGrid> (3D WebGL LED grid) + <NixieTube> (nixie-tube display).",
+  "keywords": [
+    "vue",
+    "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/vue"
+  },
+  "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; vue + core external)",
+      "path": "dist/index.js",
+      "ignore": [
+        "vue",
+        "@glowbox/led-grid",
+        "@glowbox/nixie"
+      ],
+      "limit": "1.5 kB"
+    }
+  ],
+  "peerDependencies": {
+    "vue": "^3"
+  },
+  "dependencies": {
+    "@glowbox/led-grid": "^1.0.0-rc.2",
+    "@glowbox/nixie": "^1.0.0-rc.2"
+  },
+  "devDependencies": {
+    "@anarkisti/eslint-config": "^1",
+    "@vitest/browser": "^4.1",
+    "@vitest/browser-playwright": "^4.1",
+    "@vue/compiler-dom": "^3.5",
+    "@vue/test-utils": "^2.4",
+    "eslint": "^10",
+    "playwright": "^1.61",
+    "typescript": "^6",
+    "vite": "^8.1",
+    "vite-plugin-dts": "^5",
+    "vitest": "^4.1",
+    "vue": "^3.5"
+  }
+}