@loom-dev/vide 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 astra-void
+
+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/dist/index.d.ts

@@ -0,0 +1,63 @@
+//#region src/reactive.d.ts
+/**
+ * A minimal fine-grained reactive core, mirroring vide's `source`/`derive`/
+ * `effect` primitives. Its only job is to track which effects read which sources,
+ * so a source write re-runs exactly the effects that depend on it. The loom vide
+ * adapter wires reactive props/children onto these so a source change reschedules
+ * a Scene IR rebuild (see `index.ts`).
+ *
+ * Unlike React (a VDOM reconciler), vide is push-based: there is no diff, signals
+ * notify their subscribers directly. Both paradigms feed the *same* Scene IR.
+ *
+ * Reactions form an ownership tree: an effect created while another reaction runs
+ * becomes that reaction's child and is disposed when the parent re-runs (or when
+ * the enclosing `root` is disposed). This is what keeps dynamic effects — e.g. a
+ * `derive` or a reactive child rebuilt inside an effect — from leaking.
+ */
+type CleanupFn = () => void;
+/** A vide source: call with no args to read (tracked), with one arg to write. */
+interface Source<T> {
+  (): T;
+  (value: T): T;
+}
+/** Create a reactive source seeded with `initial`. */
+declare function source<T>(initial: T): Source<T>;
+/** Run `fn` now and re-run it whenever a source it read changes. */
+declare function effect(fn: () => void): void;
+/** A memoized computation: a source kept in sync with `fn` via an effect. */
+declare function derive<T>(fn: () => T): () => T;
+/** Register a cleanup to run before the enclosing effect re-runs or disposes. */
+declare function cleanup(fn: CleanupFn): void;
+/**
+ * Open a disposal scope. `fn` receives a `dispose` that tears down every effect
+ * created within (recursively). `mount` runs the component tree inside a root so
+ * unmounting disposes all its reactive bindings.
+ */
+declare function root<T>(fn: (dispose: () => void) => T): T;
+//#endregion
+//#region src/index.d.ts
+declare const VIDE_NODE: unique symbol;
+/** A vide element descriptor produced by `create`. */
+interface VideNode {
+  readonly [VIDE_NODE]: true;
+  readonly className: string;
+  readonly props: Readonly<Record<string, unknown>>;
+}
+/**
+ * `create("Frame")` returns a constructor taking a props table. String keys are
+ * Roblox properties (a function value is bound reactively at mount); number keys
+ * are children.
+ */
+declare function create(className: string): (props?: Record<string, unknown>) => VideNode;
+/**
+ * Mount a vide component into the preview DOM and return an unmount function.
+ * `component` is run once to build the tree; reactive props/children drive
+ * subsequent repaints. Each mount gets its own container under `#loom-root`, so
+ * independent mounts don't clobber each other (the renderer replaces its own
+ * container's children every commit). The tree is laid out (WASM) and rendered
+ * with a ResizeObserver re-laying-out on viewport changes — same as react.
+ */
+declare function mount(component: () => VideNode, target?: HTMLElement): () => void;
+//#endregion
+export { type Source, VideNode, cleanup, create, derive, effect, mount, root, source };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/reactive.ts","../src/index.ts"],"mappings":";;;;;;;;;;;;;;;;KAgBK;;UAgBY,OAAO;MACnB;GACH,OAAO,IAAI;;;iBAIG,OAAO,GAAG,SAAS,IAAI,OAAO;;iBA8B9B,OAAO;;iBAwBP,OAAO,GAAG,UAAU,UAAU;;iBAS9B,QAAQ,IAAI;;;;;;iBASZ,KAAK,GAAG,KAAK,wBAAwB,IAAI;;;cChFnD;;UAGW;YACN;WACD;WACA,OAAO,SAAS;;;;;;;iBAgBV,OACf,qBACG,QAAQ,4BAA4B;;;;;;;;;iBAgLxB,MACf,iBAAiB,UACjB,SAAS"}

package/dist/index.js

@@ -0,0 +1,288 @@
+import { computeLayout, initLayout } from "@loom-dev/layout";
+import { fontFamily, fontWeight, renderScene } from "@loom-dev/renderer";
+import { EnumItem, toPropertyValue } from "@loom-dev/runtime";
+import { prop } from "@loom-dev/scene";
+//#region src/reactive.ts
+let currentReaction;
+/** Create a reactive source seeded with `initial`. */
+function source(initial) {
+	let value = initial;
+	const subscribers = /* @__PURE__ */ new Set();
+	function accessor(...args) {
+		if (args.length === 0) {
+			if (currentReaction) {
+				subscribers.add(currentReaction);
+				currentReaction.deps.add(subscribers);
+			}
+			return value;
+		}
+		value = args[0];
+		for (const reaction of [...subscribers]) reaction.run();
+		return value;
+	}
+	return accessor;
+}
+function disposeReaction(reaction) {
+	for (const child of reaction.children) disposeReaction(child);
+	reaction.children = [];
+	for (const dep of reaction.deps) dep.delete(reaction);
+	reaction.deps.clear();
+	for (const fn of reaction.cleanups) fn();
+	reaction.cleanups = [];
+}
+/** Run `fn` now and re-run it whenever a source it read changes. */
+function effect(fn) {
+	const reaction = {
+		run,
+		deps: /* @__PURE__ */ new Set(),
+		cleanups: [],
+		children: []
+	};
+	function run() {
+		disposeReaction(reaction);
+		const prev = currentReaction;
+		currentReaction = reaction;
+		try {
+			fn();
+		} finally {
+			currentReaction = prev;
+		}
+	}
+	currentReaction?.children.push(reaction);
+	run();
+}
+/** A memoized computation: a source kept in sync with `fn` via an effect. */
+function derive(fn) {
+	const s = source(void 0);
+	effect(() => {
+		s(fn());
+	});
+	return () => s();
+}
+/** Register a cleanup to run before the enclosing effect re-runs or disposes. */
+function cleanup(fn) {
+	currentReaction?.cleanups.push(fn);
+}
+/**
+* Open a disposal scope. `fn` receives a `dispose` that tears down every effect
+* created within (recursively). `mount` runs the component tree inside a root so
+* unmounting disposes all its reactive bindings.
+*/
+function root(fn) {
+	const owner = {
+		run: () => {},
+		deps: /* @__PURE__ */ new Set(),
+		cleanups: [],
+		children: []
+	};
+	const prev = currentReaction;
+	currentReaction = owner;
+	try {
+		return fn(() => disposeReaction(owner));
+	} finally {
+		currentReaction = prev;
+	}
+}
+//#endregion
+//#region src/index.ts
+/**
+* `@loom-dev/vide` — a vide frontend adapter for loom.
+*
+* The second proof that the Scene IR is the real contract: vide is push-based
+* fine-grained reactivity (no VDOM, no reconciler — see `./reactive`), yet it
+* feeds the *exact same* `SceneNode` tree into the *same* WASM layout engine and
+* DOM renderer that `@loom-dev/react` uses. Nothing in `@loom-dev/layout` or
+* `@loom-dev/renderer` knows which frontend produced the tree.
+*
+* Authoring mirrors vide: `create("Frame")({ ...props, [1]: child })`, where
+* string keys are Roblox properties (a function value is a reactive binding) and
+* number keys are children (vide's array-part).
+*/
+const VIDE_NODE = Symbol("loom.vide.node");
+function isVideNode(value) {
+	return typeof value === "object" && value !== null && value[VIDE_NODE] === true;
+}
+/**
+* `create("Frame")` returns a constructor taking a props table. String keys are
+* Roblox properties (a function value is bound reactively at mount); number keys
+* are children.
+*/
+function create(className) {
+	return (props = {}) => ({
+		[VIDE_NODE]: true,
+		className,
+		props
+	});
+}
+let nextId = 0;
+/** Resolve a child value (a node, or nested arrays of nodes) to LiveNodes. */
+function resolveChildren(value, schedule) {
+	if (isVideNode(value)) return [build(value, schedule)];
+	if (Array.isArray(value)) return value.flatMap((item) => resolveChildren(item, schedule));
+	return [];
+}
+function addChildSlot(parent, value, schedule) {
+	if (typeof value === "function") {
+		const slot = { nodes: [] };
+		parent.children.push(slot);
+		effect(() => {
+			slot.nodes = resolveChildren(value(), schedule);
+			schedule();
+		});
+	} else parent.children.push({ nodes: resolveChildren(value, schedule) });
+}
+/** Build a `LiveNode` from a `VideNode`, wiring reactive props/children. */
+function build(node, schedule) {
+	const live = {
+		className: node.className,
+		name: node.className,
+		id: `v${nextId++}`,
+		props: /* @__PURE__ */ new Map(),
+		children: []
+	};
+	for (const [key, value] of Object.entries(node.props)) {
+		if (/^\d+$/.test(key)) {
+			addChildSlot(live, value, schedule);
+			continue;
+		}
+		if (key === "Name" && typeof value === "string") {
+			live.name = value;
+			continue;
+		}
+		if (typeof value === "function") effect(() => {
+			live.props.set(key, value());
+			schedule();
+		});
+		else live.props.set(key, value);
+	}
+	return live;
+}
+const TEXT_CLASSES = /* @__PURE__ */ new Set([
+	"TextLabel",
+	"TextButton",
+	"TextBox"
+]);
+let measureCtx;
+function getMeasureCtx() {
+	if (measureCtx === void 0) measureCtx = typeof document !== "undefined" ? document.createElement("canvas").getContext("2d") : null;
+	return measureCtx;
+}
+/**
+* Measure an auto-sizing text node with the font the renderer paints and emit a
+* `TextBounds` Vector2 the layout engine reads for AutomaticSize (font metrics
+* live browser-side, not in the WASM engine). Mirrors the react adapter.
+*/
+function measureTextBounds(live) {
+	if (!TEXT_CLASSES.has(live.className)) return void 0;
+	const auto = live.props.get("AutomaticSize");
+	const autoName = auto instanceof EnumItem ? auto.Name : void 0;
+	if (autoName !== "X" && autoName !== "Y" && autoName !== "XY") return void 0;
+	const text = live.props.get("Text");
+	if (typeof text !== "string" || text === "") return void 0;
+	const ctx = getMeasureCtx();
+	if (!ctx) return void 0;
+	const rawSize = live.props.get("TextSize");
+	const size = typeof rawSize === "number" ? rawSize : 14;
+	const font = live.props.get("Font");
+	const fontName = font instanceof EnumItem ? font.Name : void 0;
+	ctx.font = `${fontWeight(fontName)} ${size}px ${fontFamily(fontName)}`;
+	const lines = text.split("\n");
+	let width = 0;
+	for (const line of lines) width = Math.max(width, ctx.measureText(line).width);
+	return prop.vector2({
+		x: Math.ceil(width),
+		y: lines.length * size
+	});
+}
+/** Snapshot the live tree as Scene IR (called fresh on every paint). */
+function toScene(live) {
+	const node = {
+		className: live.className,
+		name: live.name,
+		id: live.id
+	};
+	const properties = {};
+	for (const [key, value] of live.props) {
+		const pv = toPropertyValue(value);
+		if (pv !== void 0) properties[key] = pv;
+	}
+	const textBounds = measureTextBounds(live);
+	if (textBounds) properties.TextBounds = textBounds;
+	if (Object.keys(properties).length > 0) node.properties = properties;
+	const children = live.children.flatMap((slot) => slot.nodes);
+	if (children.length > 0) node.children = children.map(toScene);
+	return node;
+}
+const HOST_ID = "loom-root";
+/** The outer preview viewport (`#loom-root`), created if the host page lacks it. */
+function resolveHost(target) {
+	if (target) return target;
+	const existing = document.getElementById(HOST_ID);
+	if (existing) return existing;
+	const el = document.createElement("div");
+	el.id = HOST_ID;
+	el.style.position = "relative";
+	el.style.width = "100vw";
+	el.style.height = "100vh";
+	el.style.overflow = "hidden";
+	document.body.appendChild(el);
+	return el;
+}
+/**
+* Mount a vide component into the preview DOM and return an unmount function.
+* `component` is run once to build the tree; reactive props/children drive
+* subsequent repaints. Each mount gets its own container under `#loom-root`, so
+* independent mounts don't clobber each other (the renderer replaces its own
+* container's children every commit). The tree is laid out (WASM) and rendered
+* with a ResizeObserver re-laying-out on viewport changes — same as react.
+*/
+function mount(component, target) {
+	const host = document.createElement("div");
+	host.style.position = "absolute";
+	host.style.inset = "0";
+	resolveHost(target).appendChild(host);
+	return root((dispose) => {
+		let ready = false;
+		let scheduled = false;
+		let disposed = false;
+		let live;
+		const paint = () => {
+			scheduled = false;
+			if (disposed || !ready || !live) return;
+			const width = host.clientWidth;
+			const height = host.clientHeight;
+			if (width === 0 || height === 0) return;
+			try {
+				const scene = toScene(live);
+				renderScene(scene, computeLayout(scene, {
+					width,
+					height
+				}), host);
+			} catch (err) {
+				console.error("loom vide:", err);
+			}
+		};
+		const schedule = () => {
+			if (scheduled) return;
+			scheduled = true;
+			queueMicrotask(paint);
+		};
+		live = build(component(), schedule);
+		const observer = new ResizeObserver(() => paint());
+		observer.observe(host);
+		initLayout().then(() => {
+			ready = true;
+			paint();
+		});
+		return () => {
+			disposed = true;
+			observer.disconnect();
+			dispose();
+			host.remove();
+		};
+	});
+}
+//#endregion
+export { cleanup, create, derive, effect, mount, root, source };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/reactive.ts","../src/index.ts"],"sourcesContent":["/**\n * A minimal fine-grained reactive core, mirroring vide's `source`/`derive`/\n * `effect` primitives. Its only job is to track which effects read which sources,\n * so a source write re-runs exactly the effects that depend on it. The loom vide\n * adapter wires reactive props/children onto these so a source change reschedules\n * a Scene IR rebuild (see `index.ts`).\n *\n * Unlike React (a VDOM reconciler), vide is push-based: there is no diff, signals\n * notify their subscribers directly. Both paradigms feed the *same* Scene IR.\n *\n * Reactions form an ownership tree: an effect created while another reaction runs\n * becomes that reaction's child and is disposed when the parent re-runs (or when\n * the enclosing `root` is disposed). This is what keeps dynamic effects — e.g. a\n * `derive` or a reactive child rebuilt inside an effect — from leaking.\n */\n\ntype CleanupFn = () => void;\n\ninterface Reaction {\n\trun: () => void;\n\t/** Subscriber sets this reaction belongs to, cleared before each re-run. */\n\tdeps: Set<Set<Reaction>>;\n\tcleanups: CleanupFn[];\n\t/** Effects created while this reaction was running; disposed before re-run. */\n\tchildren: Reaction[];\n}\n\n// The running reaction doubles as the current owner: dependency reads subscribe\n// it, and effects created during its run nest under it.\nlet currentReaction: Reaction | undefined;\n\n/** A vide source: call with no args to read (tracked), with one arg to write. */\nexport interface Source<T> {\n\t(): T;\n\t(value: T): T;\n}\n\n/** Create a reactive source seeded with `initial`. */\nexport function source<T>(initial: T): Source<T> {\n\tlet value = initial;\n\tconst subscribers = new Set<Reaction>();\n\tfunction accessor(...args: [T] | []): T {\n\t\tif (args.length === 0) {\n\t\t\tif (currentReaction) {\n\t\t\t\tsubscribers.add(currentReaction);\n\t\t\t\tcurrentReaction.deps.add(subscribers);\n\t\t\t}\n\t\t\treturn value;\n\t\t}\n\t\tvalue = args[0];\n\t\t// Snapshot: a reaction re-subscribes (mutating the set) as it re-runs.\n\t\tfor (const reaction of [...subscribers]) reaction.run();\n\t\treturn value;\n\t}\n\treturn accessor as Source<T>;\n}\n\nfunction disposeReaction(reaction: Reaction): void {\n\t// Dispose nested effects first, depth-first, so their cleanups run too.\n\tfor (const child of reaction.children) disposeReaction(child);\n\treaction.children = [];\n\tfor (const dep of reaction.deps) dep.delete(reaction);\n\treaction.deps.clear();\n\tfor (const fn of reaction.cleanups) fn();\n\treaction.cleanups = [];\n}\n\n/** Run `fn` now and re-run it whenever a source it read changes. */\nexport function effect(fn: () => void): void {\n\tconst reaction: Reaction = {\n\t\trun,\n\t\tdeps: new Set(),\n\t\tcleanups: [],\n\t\tchildren: [],\n\t};\n\tfunction run(): void {\n\t\t// Tear down the previous run (deps, cleanups, and any nested effects) so a\n\t\t// re-run starts clean and dynamic children don't accumulate.\n\t\tdisposeReaction(reaction);\n\t\tconst prev = currentReaction;\n\t\tcurrentReaction = reaction;\n\t\ttry {\n\t\t\tfn();\n\t\t} finally {\n\t\t\tcurrentReaction = prev;\n\t\t}\n\t}\n\tcurrentReaction?.children.push(reaction);\n\trun();\n}\n\n/** A memoized computation: a source kept in sync with `fn` via an effect. */\nexport function derive<T>(fn: () => T): () => T {\n\tconst s = source<T>(undefined as T);\n\teffect(() => {\n\t\ts(fn());\n\t});\n\treturn () => s();\n}\n\n/** Register a cleanup to run before the enclosing effect re-runs or disposes. */\nexport function cleanup(fn: CleanupFn): void {\n\tcurrentReaction?.cleanups.push(fn);\n}\n\n/**\n * Open a disposal scope. `fn` receives a `dispose` that tears down every effect\n * created within (recursively). `mount` runs the component tree inside a root so\n * unmounting disposes all its reactive bindings.\n */\nexport function root<T>(fn: (dispose: () => void) => T): T {\n\tconst owner: Reaction = {\n\t\trun: () => {},\n\t\tdeps: new Set(),\n\t\tcleanups: [],\n\t\tchildren: [],\n\t};\n\tconst prev = currentReaction;\n\tcurrentReaction = owner;\n\ttry {\n\t\treturn fn(() => disposeReaction(owner));\n\t} finally {\n\t\tcurrentReaction = prev;\n\t}\n}\n","/**\n * `@loom-dev/vide` — a vide frontend adapter for loom.\n *\n * The second proof that the Scene IR is the real contract: vide is push-based\n * fine-grained reactivity (no VDOM, no reconciler — see `./reactive`), yet it\n * feeds the *exact same* `SceneNode` tree into the *same* WASM layout engine and\n * DOM renderer that `@loom-dev/react` uses. Nothing in `@loom-dev/layout` or\n * `@loom-dev/renderer` knows which frontend produced the tree.\n *\n * Authoring mirrors vide: `create(\"Frame\")({ ...props, [1]: child })`, where\n * string keys are Roblox properties (a function value is a reactive binding) and\n * number keys are children (vide's array-part).\n */\nimport { computeLayout, initLayout } from \"@loom-dev/layout\";\nimport { fontFamily, fontWeight, renderScene } from \"@loom-dev/renderer\";\nimport { EnumItem, toPropertyValue } from \"@loom-dev/runtime\";\nimport { type PropertyValue, prop, type SceneNode } from \"@loom-dev/scene\";\nimport { effect, root } from \"./reactive\";\n\nexport {\n\tcleanup,\n\tderive,\n\teffect,\n\troot,\n\ttype Source,\n\tsource,\n} from \"./reactive\";\n\n// --- authoring: create() -----------------------------------------------------\n\nconst VIDE_NODE = Symbol(\"loom.vide.node\");\n\n/** A vide element descriptor produced by `create`. */\nexport interface VideNode {\n\treadonly [VIDE_NODE]: true;\n\treadonly className: string;\n\treadonly props: Readonly<Record<string, unknown>>;\n}\n\nfunction isVideNode(value: unknown): value is VideNode {\n\treturn (\n\t\ttypeof value === \"object\" &&\n\t\tvalue !== null &&\n\t\t(value as { [VIDE_NODE]?: unknown })[VIDE_NODE] === true\n\t);\n}\n\n/**\n * `create(\"Frame\")` returns a constructor taking a props table. String keys are\n * Roblox properties (a function value is bound reactively at mount); number keys\n * are children.\n */\nexport function create(\n\tclassName: string,\n): (props?: Record<string, unknown>) => VideNode {\n\treturn (props = {}) => ({ [VIDE_NODE]: true, className, props });\n}\n\n// --- live tree ---------------------------------------------------------------\n\n/**\n * A resolved, mutable mirror of a `VideNode`. Reactive props write their current\n * value into `props`; `toScene` reads it. Children are grouped into slots so a\n * reactive (function) child can swap its subtree in place without disturbing its\n * siblings; a static child is a one-shot slot.\n */\ninterface LiveNode {\n\tclassName: string;\n\tname: string;\n\tid: string;\n\tprops: Map<string, unknown>;\n\tchildren: ChildSlot[];\n}\n\n/** A positional group of children — its `nodes` are re-derived if reactive. */\ninterface ChildSlot {\n\tnodes: LiveNode[];\n}\n\nlet nextId = 0;\n\n/** Resolve a child value (a node, or nested arrays of nodes) to LiveNodes. */\nfunction resolveChildren(value: unknown, schedule: () => void): LiveNode[] {\n\tif (isVideNode(value)) return [build(value, schedule)];\n\tif (Array.isArray(value)) {\n\t\treturn value.flatMap((item) => resolveChildren(item, schedule));\n\t}\n\treturn [];\n}\n\nfunction addChildSlot(\n\tparent: LiveNode,\n\tvalue: unknown,\n\tschedule: () => void,\n): void {\n\tif (typeof value === \"function\") {\n\t\t// A reactive child (vide's control-flow pattern): rebuild this slot's\n\t\t// subtree whenever the function's sources change. The rebuilt nodes' own\n\t\t// reactive bindings nest under this effect, so they dispose on each re-run.\n\t\tconst slot: ChildSlot = { nodes: [] };\n\t\tparent.children.push(slot);\n\t\teffect(() => {\n\t\t\tslot.nodes = resolveChildren((value as () => unknown)(), schedule);\n\t\t\tschedule();\n\t\t});\n\t} else {\n\t\tparent.children.push({ nodes: resolveChildren(value, schedule) });\n\t}\n}\n\n/** Build a `LiveNode` from a `VideNode`, wiring reactive props/children. */\nfunction build(node: VideNode, schedule: () => void): LiveNode {\n\tconst live: LiveNode = {\n\t\tclassName: node.className,\n\t\tname: node.className,\n\t\tid: `v${nextId++}`,\n\t\tprops: new Map(),\n\t\tchildren: [],\n\t};\n\tfor (const [key, value] of Object.entries(node.props)) {\n\t\tif (/^\\d+$/.test(key)) {\n\t\t\taddChildSlot(live, value, schedule);\n\t\t\tcontinue;\n\t\t}\n\t\tif (key === \"Name\" && typeof value === \"string\") {\n\t\t\tlive.name = value;\n\t\t\tcontinue;\n\t\t}\n\t\tif (typeof value === \"function\") {\n\t\t\t// A reactive prop: re-resolve and repaint whenever its sources change.\n\t\t\teffect(() => {\n\t\t\t\tlive.props.set(key, (value as () => unknown)());\n\t\t\t\tschedule();\n\t\t\t});\n\t\t} else {\n\t\t\tlive.props.set(key, value);\n\t\t}\n\t}\n\treturn live;\n}\n\n// --- live tree → Scene IR ----------------------------------------------------\n\nconst TEXT_CLASSES = new Set([\"TextLabel\", \"TextButton\", \"TextBox\"]);\nlet measureCtx: CanvasRenderingContext2D | null | undefined;\nfunction getMeasureCtx(): CanvasRenderingContext2D | null {\n\tif (measureCtx === undefined) {\n\t\tmeasureCtx =\n\t\t\ttypeof document !== \"undefined\"\n\t\t\t\t? document.createElement(\"canvas\").getContext(\"2d\")\n\t\t\t\t: null;\n\t}\n\treturn measureCtx;\n}\n\n/**\n * Measure an auto-sizing text node with the font the renderer paints and emit a\n * `TextBounds` Vector2 the layout engine reads for AutomaticSize (font metrics\n * live browser-side, not in the WASM engine). Mirrors the react adapter.\n */\nfunction measureTextBounds(live: LiveNode): PropertyValue | undefined {\n\tif (!TEXT_CLASSES.has(live.className)) return undefined;\n\tconst auto = live.props.get(\"AutomaticSize\");\n\tconst autoName = auto instanceof EnumItem ? auto.Name : undefined;\n\tif (autoName !== \"X\" && autoName !== \"Y\" && autoName !== \"XY\")\n\t\treturn undefined;\n\tconst text = live.props.get(\"Text\");\n\tif (typeof text !== \"string\" || text === \"\") return undefined;\n\tconst ctx = getMeasureCtx();\n\tif (!ctx) return undefined;\n\n\tconst rawSize = live.props.get(\"TextSize\");\n\tconst size = typeof rawSize === \"number\" ? rawSize : 14;\n\tconst font = live.props.get(\"Font\");\n\tconst fontName = font instanceof EnumItem ? font.Name : undefined;\n\tctx.font = `${fontWeight(fontName)} ${size}px ${fontFamily(fontName)}`;\n\tconst lines = text.split(\"\\n\");\n\tlet width = 0;\n\tfor (const line of lines)\n\t\twidth = Math.max(width, ctx.measureText(line).width);\n\treturn prop.vector2({ x: Math.ceil(width), y: lines.length * size });\n}\n\n/** Snapshot the live tree as Scene IR (called fresh on every paint). */\nfunction toScene(live: LiveNode): SceneNode {\n\tconst node: SceneNode = {\n\t\tclassName: live.className,\n\t\tname: live.name,\n\t\tid: live.id,\n\t};\n\tconst properties: Record<string, PropertyValue> = {};\n\tfor (const [key, value] of live.props) {\n\t\tconst pv = toPropertyValue(value);\n\t\tif (pv !== undefined) properties[key] = pv;\n\t}\n\tconst textBounds = measureTextBounds(live);\n\tif (textBounds) properties.TextBounds = textBounds;\n\tif (Object.keys(properties).length > 0) node.properties = properties;\n\tconst children = live.children.flatMap((slot) => slot.nodes);\n\tif (children.length > 0) node.children = children.map(toScene);\n\treturn node;\n}\n\n// --- mount -------------------------------------------------------------------\n\nconst HOST_ID = \"loom-root\";\n\n/** The outer preview viewport (`#loom-root`), created if the host page lacks it. */\nfunction resolveHost(target?: HTMLElement): HTMLElement {\n\tif (target) return target;\n\tconst existing = document.getElementById(HOST_ID);\n\tif (existing) return existing;\n\tconst el = document.createElement(\"div\");\n\tel.id = HOST_ID;\n\tel.style.position = \"relative\";\n\tel.style.width = \"100vw\";\n\tel.style.height = \"100vh\";\n\tel.style.overflow = \"hidden\";\n\tdocument.body.appendChild(el);\n\treturn el;\n}\n\n/**\n * Mount a vide component into the preview DOM and return an unmount function.\n * `component` is run once to build the tree; reactive props/children drive\n * subsequent repaints. Each mount gets its own container under `#loom-root`, so\n * independent mounts don't clobber each other (the renderer replaces its own\n * container's children every commit). The tree is laid out (WASM) and rendered\n * with a ResizeObserver re-laying-out on viewport changes — same as react.\n */\nexport function mount(\n\tcomponent: () => VideNode,\n\ttarget?: HTMLElement,\n): () => void {\n\tconst host = document.createElement(\"div\");\n\thost.style.position = \"absolute\";\n\thost.style.inset = \"0\";\n\tresolveHost(target).appendChild(host);\n\n\treturn root((dispose) => {\n\t\tlet ready = false;\n\t\tlet scheduled = false;\n\t\tlet disposed = false;\n\t\tlet live: LiveNode | undefined;\n\n\t\tconst paint = (): void => {\n\t\t\tscheduled = false;\n\t\t\tif (disposed || !ready || !live) return;\n\t\t\tconst width = host.clientWidth;\n\t\t\tconst height = host.clientHeight;\n\t\t\tif (width === 0 || height === 0) return; // wait for the mount to be sized\n\t\t\ttry {\n\t\t\t\tconst scene = toScene(live);\n\t\t\t\trenderScene(scene, computeLayout(scene, { width, height }), host);\n\t\t\t} catch (err) {\n\t\t\t\t// Never let a malformed scene escape an effect or the RO callback.\n\t\t\t\tconsole.error(\"loom vide:\", err);\n\t\t\t}\n\t\t};\n\t\tconst schedule = (): void => {\n\t\t\tif (scheduled) return;\n\t\t\tscheduled = true;\n\t\t\tqueueMicrotask(paint);\n\t\t};\n\n\t\t// Build inside this root so the reactive bindings are disposable.\n\t\tlive = build(component(), schedule);\n\n\t\tconst observer = new ResizeObserver(() => paint());\n\t\tobserver.observe(host);\n\t\tvoid initLayout().then(() => {\n\t\t\tready = true;\n\t\t\tpaint();\n\t\t});\n\n\t\treturn () => {\n\t\t\tdisposed = true; // a queued microtask paint must not resurrect the DOM\n\t\t\tobserver.disconnect();\n\t\t\tdispose();\n\t\t\thost.remove();\n\t\t};\n\t});\n}\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@loom-dev/vide",
+  "version": "0.1.0",
+  "description": "Vide adapter for loom — fine-grained reactivity producing the same Scene IR as the React renderer.",
+  "keywords": [
+    "loom",
+    "roblox",
+    "vide",
+    "reactivity",
+    "ui"
+  ],
+  "license": "MIT",
+  "author": "astra-void",
+  "homepage": "https://github.com/astra-void/loom#readme",
+  "bugs": "https://github.com/astra-void/loom/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/astra-void/loom.git",
+    "directory": "packages/vide"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@loom-dev/layout": "0.1.0",
+    "@loom-dev/runtime": "0.1.0",
+    "@loom-dev/renderer": "0.1.0",
+    "@loom-dev/scene": "0.1.0"
+  },
+  "devDependencies": {
+    "tsdown": "^0.22.12",
+    "typescript": "^5.7.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}