@glissade/scene 0.19.1 → 0.20.0-pre.4

package/dist/layout.d.ts

@@ -1,101 +1,9 @@
-import { r as DisplayListBuilder } from "./displayList.js";
-import { B as NodeProps, L as EvalContext, V as PropInit, W as TextMeasurer, i as Group, z as Node } from "./nodes.js";
 import { a as LayoutEngineMissingError, i as LayoutEngine, l as setLayoutEngine, n as LayoutChildSpec, o as LayoutResult, r as LayoutContainerSpec, s as getLayoutEngine, t as LayoutBox } from "./layoutEngine.js";
-import { BindableSignal } from "@glissade/core";
+import { Column, Layout, LayoutProps, Row, RowProps, Stack, StackProps } from "./layoutCtors.js";
 
-//#region src/layout.d.ts
+//#region src/layoutEngineYoga.d.ts
 
-interface LayoutProps extends NodeProps {
-  children?: Node[];
-  /** 'auto': the axis sizes itself from content (Yoga content sizing). */
-  width?: PropInit<number> | 'auto';
-  height?: PropInit<number> | 'auto';
-  direction?: 'row' | 'column';
-  gap?: PropInit<number>;
-  padding?: PropInit<number>;
-  justify?: LayoutContainerSpec['justify'];
-  align?: LayoutContainerSpec['align'];
-}
-/**
- * Flexbox container (center-anchored like every node). Flowable children
- * (intrinsicSize ≠ null) are placed by the engine anchor-aware via
- * flowOffset(): shapes center into their box, Text aligns its baseline
- * origin to the box edge — labels in a column share a true left edge.
- * Non-flowable children (e.g. Groups) emit untouched at the layout origin,
- * BEFORE the flow — their dominant use is backgrounds. Flowed paint order is
- * zIndex-sorted; flow order is array order.
- */
-declare class Layout extends Group {
-  #private;
-  /** CLI/host detection marker — avoids importing this entry just to instanceof. */
-  static readonly isLayoutNode = true;
-  readonly width: BindableSignal<number>;
-  readonly height: BindableSignal<number>;
-  readonly gap: BindableSignal<number>;
-  readonly padding: BindableSignal<number>;
-  readonly direction: 'row' | 'column';
-  readonly justify: LayoutContainerSpec['justify'];
-  readonly align: LayoutContainerSpec['align'];
-  /** Content-sized axes ('auto'): the size signal is ignored, Yoga computes it. */
-  readonly autoWidth: boolean;
-  readonly autoHeight: boolean;
-  constructor(props?: LayoutProps);
-  intrinsicSize(measurer: TextMeasurer): {
-    w: number;
-    h: number;
-  };
-  /**
-   * The resolved container size — content-driven on 'auto' axes. Pure pull:
-   * reads the same signals the flow reads, so a sibling bound to it
-   * (e.g. panelBg height = () => panel.computedSize().h) tracks every input.
-   * The measurer defaults to the scene-injected one (estimating pre-scene).
-   */
-  computedSize(measurer?: TextMeasurer): {
-    w: number;
-    h: number;
-  };
-  protected draw(out: DisplayListBuilder, ctx: EvalContext): void;
-}
-/**
- * Stack-ergonomic props — a more DISCOVERABLE surface over {@link LayoutProps}.
- * Everything `Layout` accepts (id, position, opacity, width/height, gap,
- * padding, justify, children, …) passes through unchanged; the only difference
- * from constructing `Layout` directly is the defaulting `Stack()` applies.
- */
-interface StackProps extends LayoutProps {}
-/**
- * Thin convenience factory over the Yoga-backed {@link Layout} node — NOT a new
- * class and NOT new signals, so a `Stack` inherits Layout's memoized, pure,
- * dependency-tracked resolve verbatim: `Stack(props)` and the equivalent
- * hand-written `Layout({...})` produce identical child positions.
- *
- * Stack-ergonomic defaults (the ONLY divergence from `Layout`):
- * - `direction` defaults to `'column'` (the common vertical stack; Layout's own
- *   default is `'row'`).
- * - `align` defaults to `'start'` — a true left edge for a label column (the
- *   dogfooding use case). This DIVERGES from `Layout`'s `'center'` default.
- *
- * Every other prop passes straight through to `Layout`.
- */
-declare function Stack(props?: StackProps): Layout;
-/**
- * `Row`/`Column` props — `Stack`'s surface MINUS `direction` (the alias pins it).
- * Omitting `direction` from the type means an explicit one can't even be passed,
- * so `Row({...})` is unambiguously a row and `Column({...})` a column.
- */
-interface RowProps extends Omit<StackProps, 'direction'> {}
-/**
- * `Stack({ direction: 'row' })` read as a name — a horizontal stack. Inherits
- * Stack's `align:'start'` default and Layout's pure memoized resolve; the only
- * difference from `Stack` is the pinned `direction`.
- */
-declare function Row(props?: RowProps): Layout;
-/**
- * `Stack({ direction: 'column' })` read as a name — a vertical stack (the same
- * direction `Stack` already defaults to, made explicit at the call site).
- */
-declare function Column(props?: RowProps): Layout;
 /** Load Yoga (wasm) and register it as the active LayoutEngine. Idempotent. */
 declare function loadYogaLayoutEngine(): Promise<LayoutEngine>;
 //#endregion
-export { Column, Layout, type LayoutBox, type LayoutChildSpec, type LayoutContainerSpec, type LayoutEngine, LayoutEngineMissingError, LayoutProps, type LayoutResult, Row, RowProps, Stack, StackProps, getLayoutEngine, loadYogaLayoutEngine, setLayoutEngine };
+export { Column, Layout, type LayoutBox, type LayoutChildSpec, type LayoutContainerSpec, type LayoutEngine, LayoutEngineMissingError, type LayoutProps, type LayoutResult, Row, type RowProps, Stack, type StackProps, getLayoutEngine, loadYogaLayoutEngine, setLayoutEngine };

package/dist/layout.js

@@ -1,201 +1,16 @@
-import { r as Group, y as fallbackMeasurer } from "./nodes.js";
-import { i as setLayoutEngine, n as getLayoutEngine, r as requireLayoutEngine, t as LayoutEngineMissingError } from "./layoutEngine.js";
-import { computed, signal } from "@glissade/core";
-//#region src/layout.ts
+import { i as setLayoutEngine, n as getLayoutEngine, t as LayoutEngineMissingError } from "./layoutEngine.js";
+import { Column, Layout, Row, Stack } from "./layoutCtors.js";
+//#region src/layoutEngineYoga.ts
 /**
-* '@glissade/scene/layout' (DESIGN.md §3.2): the flexbox Layout node and the
-* Yoga-backed LayoutEngine. A SEPARATE entry point with its own budget — the
-* base embed path never pays for the wasm. Determinism: the same Yoga build
-* computes layout in browser preview and headless export.
-*
-* Usage: `await loadYogaLayoutEngine()` once before mounting/rendering a
-* scene containing Layout nodes (the CLI does this automatically).
+* The Yoga LayoutEngine LOADER (DESIGN.md §3.2). Split off the node ctors
+* (`layoutCtors.ts`) so the ctors can ride the single-file IIFE without dragging
+* Yoga's wasm: this module's `import('yoga-layout/load')` is what statically
+* inlines the wasm-base64 binding under esbuild's IIFE format (no code-splitting
+* keeps the dynamic import async). `@glissade/scene/layout` re-exports it, so
+* existing importers are unaffected; the IIFE re-exports it too but externalizes
+* `yoga-layout/load`, keeping the dynamic import a RUNTIME fetch (yoga stays out
+* of the bundle).
 */
-/**
-* Flexbox container (center-anchored like every node). Flowable children
-* (intrinsicSize ≠ null) are placed by the engine anchor-aware via
-* flowOffset(): shapes center into their box, Text aligns its baseline
-* origin to the box edge — labels in a column share a true left edge.
-* Non-flowable children (e.g. Groups) emit untouched at the layout origin,
-* BEFORE the flow — their dominant use is backgrounds. Flowed paint order is
-* zIndex-sorted; flow order is array order.
-*/
-var Layout = class extends Group {
-	/** CLI/host detection marker — avoids importing this entry just to instanceof. */
-	static isLayoutNode = true;
-	width;
-	height;
-	gap;
-	padding;
-	direction;
-	justify;
-	align;
-	/** Content-sized axes ('auto'): the size signal is ignored, Yoga computes it. */
-	autoWidth;
-	autoHeight;
-	/**
-	* Sanctioned memoization (§2.1), core-`computed()`-backed: a pure function of
-	* the PARTICIPATING signals. The compute reads exactly the container props
-	* and child intrinsic-size signals it consumes, so the signal graph records
-	* those as deps and re-invokes Yoga only when one of THEM changes — a sibling
-	* mutating a non-participating signal does not invalidate the layout. Pulls
-	* the scene-injected measurer (the same one draw() uses via ctx.measurer);
-	* a caller-supplied non-default measurer bypasses this cache (see #compute).
-	*/
-	#memo = computed(() => this.#computeUncached(this.measurerSource?.() ?? fallbackMeasurer()));
-	constructor(props = {}) {
-		super(props);
-		this.autoWidth = props.width === "auto";
-		this.autoHeight = props.height === "auto";
-		this.width = initProp(signal(0), this.autoWidth ? void 0 : props.width);
-		this.height = initProp(signal(0), this.autoHeight ? void 0 : props.height);
-		this.gap = initProp(signal(0), props.gap);
-		this.padding = initProp(signal(0), props.padding);
-		this.direction = props.direction ?? "row";
-		this.justify = props.justify ?? "start";
-		this.align = props.align ?? "center";
-		this.registerTarget("width", this.width, "number");
-		this.registerTarget("height", this.height, "number");
-		this.registerTarget("gap", this.gap, "number");
-		this.registerTarget("padding", this.padding, "number");
-	}
-	intrinsicSize(measurer) {
-		if (!this.autoWidth && !this.autoHeight) return {
-			w: this.width(),
-			h: this.height()
-		};
-		return this.#compute(measurer).size;
-	}
-	/**
-	* The resolved container size — content-driven on 'auto' axes. Pure pull:
-	* reads the same signals the flow reads, so a sibling bound to it
-	* (e.g. panelBg height = () => panel.computedSize().h) tracks every input.
-	* The measurer defaults to the scene-injected one (estimating pre-scene).
-	*/
-	computedSize(measurer) {
-		const m = measurer ?? this.measurerSource?.() ?? fallbackMeasurer();
-		return this.#compute(m).size;
-	}
-	/**
-	* Route through the #memo (the dependency-tracked computed) when `measurer`
-	* is the default the memo itself pulls; otherwise compute fresh & UNCACHED —
-	* a caller-supplied non-default measurer must never read (or poison) a cache
-	* keyed on the scene-singleton measurer (the `computedSize(customMeasurer)`
-	* escape hatch).
-	*/
-	#compute(measurer) {
-		return measurer === (this.measurerSource?.() ?? fallbackMeasurer()) ? this.#memo() : this.#computeUncached(measurer);
-	}
-	#computeUncached(measurer) {
-		const container = {
-			width: this.autoWidth ? "auto" : this.width(),
-			height: this.autoHeight ? "auto" : this.height(),
-			direction: this.direction,
-			gap: this.gap(),
-			padding: this.padding(),
-			justify: this.justify,
-			align: this.align
-		};
-		this.trackStructure();
-		const flowable = [];
-		const absolute = [];
-		this.children.forEach((child, index) => {
-			const size = child.intrinsicSize(measurer);
-			if (size) flowable.push({
-				node: child,
-				spec: {
-					width: size.w,
-					height: size.h
-				},
-				index
-			});
-			else absolute.push(child);
-		});
-		const result = requireLayoutEngine().compute(container, flowable.map((f) => f.spec));
-		return {
-			result,
-			size: {
-				w: this.autoWidth ? result.width : container.width,
-				h: this.autoHeight ? result.height : container.height
-			},
-			flowable,
-			absolute
-		};
-	}
-	draw(out, ctx) {
-		const { result, size, flowable, absolute } = this.#compute(ctx.measurer);
-		const boxes = result.boxes;
-		const order = [...flowable].sort((a, b) => a.node.zIndex() - b.node.zIndex() || a.index - b.index);
-		const ox = -size.w / 2;
-		const oy = -size.h / 2;
-		for (const child of absolute) child.emit(out, ctx);
-		for (const entry of order) {
-			const box = boxes[flowable.indexOf(entry)];
-			const off = entry.node.flowOffset(ctx.measurer);
-			out.push({ op: "save" });
-			out.push({
-				op: "transform",
-				m: [
-					1,
-					0,
-					0,
-					1,
-					ox + box.x - off.x,
-					oy + box.y - off.y
-				]
-			});
-			entry.node.emit(out, ctx);
-			out.push({ op: "restore" });
-		}
-	}
-};
-/**
-* Thin convenience factory over the Yoga-backed {@link Layout} node — NOT a new
-* class and NOT new signals, so a `Stack` inherits Layout's memoized, pure,
-* dependency-tracked resolve verbatim: `Stack(props)` and the equivalent
-* hand-written `Layout({...})` produce identical child positions.
-*
-* Stack-ergonomic defaults (the ONLY divergence from `Layout`):
-* - `direction` defaults to `'column'` (the common vertical stack; Layout's own
-*   default is `'row'`).
-* - `align` defaults to `'start'` — a true left edge for a label column (the
-*   dogfooding use case). This DIVERGES from `Layout`'s `'center'` default.
-*
-* Every other prop passes straight through to `Layout`.
-*/
-function Stack(props = {}) {
-	return new Layout({
-		...props,
-		direction: props.direction ?? "column",
-		align: props.align ?? "start"
-	});
-}
-/**
-* `Stack({ direction: 'row' })` read as a name — a horizontal stack. Inherits
-* Stack's `align:'start'` default and Layout's pure memoized resolve; the only
-* difference from `Stack` is the pinned `direction`.
-*/
-function Row(props = {}) {
-	return Stack({
-		...props,
-		direction: "row"
-	});
-}
-/**
-* `Stack({ direction: 'column' })` read as a name — a vertical stack (the same
-* direction `Stack` already defaults to, made explicit at the call site).
-*/
-function Column(props = {}) {
-	return Stack({
-		...props,
-		direction: "column"
-	});
-}
-function initProp(sig, init) {
-	if (typeof init === "function") sig.bindSource(init);
-	else if (init !== void 0) sig.set(init);
-	return sig;
-}
 /** Load Yoga (wasm) and register it as the active LayoutEngine. Idempotent. */
 async function loadYogaLayoutEngine() {
 	const { loadYoga, FlexDirection, Justify, Align, Gutter, Edge, Direction } = await import("yoga-layout/load");

package/dist/layoutCtors.d.ts

@@ -0,0 +1,99 @@
+import { r as DisplayListBuilder } from "./displayList.js";
+import { B as NodeProps, L as EvalContext, V as PropInit, W as TextMeasurer, i as Group, z as Node } from "./nodes.js";
+import { r as LayoutContainerSpec } from "./layoutEngine.js";
+import { BindableSignal } from "@glissade/core";
+
+//#region src/layoutCtors.d.ts
+
+interface LayoutProps extends NodeProps {
+  children?: Node[];
+  /** 'auto': the axis sizes itself from content (Yoga content sizing). */
+  width?: PropInit<number> | 'auto';
+  height?: PropInit<number> | 'auto';
+  direction?: 'row' | 'column';
+  gap?: PropInit<number>;
+  padding?: PropInit<number>;
+  justify?: LayoutContainerSpec['justify'];
+  align?: LayoutContainerSpec['align'];
+}
+/**
+ * Flexbox container (center-anchored like every node). Flowable children
+ * (intrinsicSize ≠ null) are placed by the engine anchor-aware via
+ * flowOffset(): shapes center into their box, Text aligns its baseline
+ * origin to the box edge — labels in a column share a true left edge.
+ * Non-flowable children (e.g. Groups) emit untouched at the layout origin,
+ * BEFORE the flow — their dominant use is backgrounds. Flowed paint order is
+ * zIndex-sorted; flow order is array order.
+ */
+declare class Layout extends Group {
+  #private;
+  /** CLI/host detection marker — avoids importing this entry just to instanceof. */
+  static readonly isLayoutNode = true;
+  readonly width: BindableSignal<number>;
+  readonly height: BindableSignal<number>;
+  readonly gap: BindableSignal<number>;
+  readonly padding: BindableSignal<number>;
+  readonly direction: 'row' | 'column';
+  readonly justify: LayoutContainerSpec['justify'];
+  readonly align: LayoutContainerSpec['align'];
+  /** Content-sized axes ('auto'): the size signal is ignored, Yoga computes it. */
+  readonly autoWidth: boolean;
+  readonly autoHeight: boolean;
+  constructor(props?: LayoutProps);
+  intrinsicSize(measurer: TextMeasurer): {
+    w: number;
+    h: number;
+  };
+  /**
+   * The resolved container size — content-driven on 'auto' axes. Pure pull:
+   * reads the same signals the flow reads, so a sibling bound to it
+   * (e.g. panelBg height = () => panel.computedSize().h) tracks every input.
+   * The measurer defaults to the scene-injected one (estimating pre-scene).
+   */
+  computedSize(measurer?: TextMeasurer): {
+    w: number;
+    h: number;
+  };
+  protected draw(out: DisplayListBuilder, ctx: EvalContext): void;
+}
+/**
+ * Stack-ergonomic props — a more DISCOVERABLE surface over {@link LayoutProps}.
+ * Everything `Layout` accepts (id, position, opacity, width/height, gap,
+ * padding, justify, children, …) passes through unchanged; the only difference
+ * from constructing `Layout` directly is the defaulting `Stack()` applies.
+ */
+interface StackProps extends LayoutProps {}
+/**
+ * Thin convenience factory over the Yoga-backed {@link Layout} node — NOT a new
+ * class and NOT new signals, so a `Stack` inherits Layout's memoized, pure,
+ * dependency-tracked resolve verbatim: `Stack(props)` and the equivalent
+ * hand-written `Layout({...})` produce identical child positions.
+ *
+ * Stack-ergonomic defaults (the ONLY divergence from `Layout`):
+ * - `direction` defaults to `'column'` (the common vertical stack; Layout's own
+ *   default is `'row'`).
+ * - `align` defaults to `'start'` — a true left edge for a label column (the
+ *   dogfooding use case). This DIVERGES from `Layout`'s `'center'` default.
+ *
+ * Every other prop passes straight through to `Layout`.
+ */
+declare function Stack(props?: StackProps): Layout;
+/**
+ * `Row`/`Column` props — `Stack`'s surface MINUS `direction` (the alias pins it).
+ * Omitting `direction` from the type means an explicit one can't even be passed,
+ * so `Row({...})` is unambiguously a row and `Column({...})` a column.
+ */
+interface RowProps extends Omit<StackProps, 'direction'> {}
+/**
+ * `Stack({ direction: 'row' })` read as a name — a horizontal stack. Inherits
+ * Stack's `align:'start'` default and Layout's pure memoized resolve; the only
+ * difference from `Stack` is the pinned `direction`.
+ */
+declare function Row(props?: RowProps): Layout;
+/**
+ * `Stack({ direction: 'column' })` read as a name — a vertical stack (the same
+ * direction `Stack` already defaults to, made explicit at the call site).
+ */
+declare function Column(props?: RowProps): Layout;
+//#endregion
+export { Column, Layout, LayoutProps, Row, RowProps, Stack, StackProps };

package/dist/layoutCtors.js

@@ -0,0 +1,210 @@
+import { r as Group, y as fallbackMeasurer } from "./nodes.js";
+import { r as requireLayoutEngine } from "./layoutEngine.js";
+import { computed, signal } from "@glissade/core";
+//#region src/layoutCtors.ts
+/**
+* '@glissade/scene/layout-ctors' (DESIGN.md §3.2): the YOGA-FREE flexbox node
+* constructors — `Layout`/`Stack`/`Row`/`Column`. These classes only touch the
+* LayoutEngine SEAM (`requireLayoutEngine`/`setLayoutEngine`) at COMPUTE time;
+* they never import Yoga at construction. Splitting them off the loader
+* (`loadYogaLayoutEngine`, which statically reaches `yoga-layout/load`) lets the
+* single-file `@glissade/browser` IIFE expose `Stack`/`Row`/`Column`/`Layout`
+* WITHOUT inlining Yoga's wasm — esbuild's IIFE format can't keep the loader's
+* `import('yoga-layout/load')` async, so it would balloon the bundle (~47→~99 kB
+* gz). The ctors here carry no such import, so they ride the IIFE cleanly.
+*
+* CAVEAT (the no-build cost of the split): a ctor on the IIFE needs an engine
+* registered before it computes. Call `await glissade.loadYogaLayoutEngine()`
+* once before evaluating a scene with a Layout/Stack/Row/Column node, else the
+* first compute throws a clear `LayoutEngineMissingError`.
+*
+* The `@glissade/scene/layout` entry re-exports everything here PLUS the loader,
+* so existing `@glissade/scene/layout` importers are unaffected.
+*/
+/**
+* Flexbox container (center-anchored like every node). Flowable children
+* (intrinsicSize ≠ null) are placed by the engine anchor-aware via
+* flowOffset(): shapes center into their box, Text aligns its baseline
+* origin to the box edge — labels in a column share a true left edge.
+* Non-flowable children (e.g. Groups) emit untouched at the layout origin,
+* BEFORE the flow — their dominant use is backgrounds. Flowed paint order is
+* zIndex-sorted; flow order is array order.
+*/
+var Layout = class extends Group {
+	/** CLI/host detection marker — avoids importing this entry just to instanceof. */
+	static isLayoutNode = true;
+	width;
+	height;
+	gap;
+	padding;
+	direction;
+	justify;
+	align;
+	/** Content-sized axes ('auto'): the size signal is ignored, Yoga computes it. */
+	autoWidth;
+	autoHeight;
+	/**
+	* Sanctioned memoization (§2.1), core-`computed()`-backed: a pure function of
+	* the PARTICIPATING signals. The compute reads exactly the container props
+	* and child intrinsic-size signals it consumes, so the signal graph records
+	* those as deps and re-invokes Yoga only when one of THEM changes — a sibling
+	* mutating a non-participating signal does not invalidate the layout. Pulls
+	* the scene-injected measurer (the same one draw() uses via ctx.measurer);
+	* a caller-supplied non-default measurer bypasses this cache (see #compute).
+	*/
+	#memo = computed(() => this.#computeUncached(this.measurerSource?.() ?? fallbackMeasurer()));
+	constructor(props = {}) {
+		super(props);
+		this.autoWidth = props.width === "auto";
+		this.autoHeight = props.height === "auto";
+		this.width = initProp(signal(0), this.autoWidth ? void 0 : props.width);
+		this.height = initProp(signal(0), this.autoHeight ? void 0 : props.height);
+		this.gap = initProp(signal(0), props.gap);
+		this.padding = initProp(signal(0), props.padding);
+		this.direction = props.direction ?? "row";
+		this.justify = props.justify ?? "start";
+		this.align = props.align ?? "center";
+		this.registerTarget("width", this.width, "number");
+		this.registerTarget("height", this.height, "number");
+		this.registerTarget("gap", this.gap, "number");
+		this.registerTarget("padding", this.padding, "number");
+	}
+	intrinsicSize(measurer) {
+		if (!this.autoWidth && !this.autoHeight) return {
+			w: this.width(),
+			h: this.height()
+		};
+		return this.#compute(measurer).size;
+	}
+	/**
+	* The resolved container size — content-driven on 'auto' axes. Pure pull:
+	* reads the same signals the flow reads, so a sibling bound to it
+	* (e.g. panelBg height = () => panel.computedSize().h) tracks every input.
+	* The measurer defaults to the scene-injected one (estimating pre-scene).
+	*/
+	computedSize(measurer) {
+		const m = measurer ?? this.measurerSource?.() ?? fallbackMeasurer();
+		return this.#compute(m).size;
+	}
+	/**
+	* Route through the #memo (the dependency-tracked computed) when `measurer`
+	* is the default the memo itself pulls; otherwise compute fresh & UNCACHED —
+	* a caller-supplied non-default measurer must never read (or poison) a cache
+	* keyed on the scene-singleton measurer (the `computedSize(customMeasurer)`
+	* escape hatch).
+	*/
+	#compute(measurer) {
+		return measurer === (this.measurerSource?.() ?? fallbackMeasurer()) ? this.#memo() : this.#computeUncached(measurer);
+	}
+	#computeUncached(measurer) {
+		const container = {
+			width: this.autoWidth ? "auto" : this.width(),
+			height: this.autoHeight ? "auto" : this.height(),
+			direction: this.direction,
+			gap: this.gap(),
+			padding: this.padding(),
+			justify: this.justify,
+			align: this.align
+		};
+		this.trackStructure();
+		const flowable = [];
+		const absolute = [];
+		this.children.forEach((child, index) => {
+			const size = child.intrinsicSize(measurer);
+			if (size) flowable.push({
+				node: child,
+				spec: {
+					width: size.w,
+					height: size.h
+				},
+				index
+			});
+			else absolute.push(child);
+		});
+		const result = requireLayoutEngine().compute(container, flowable.map((f) => f.spec));
+		return {
+			result,
+			size: {
+				w: this.autoWidth ? result.width : container.width,
+				h: this.autoHeight ? result.height : container.height
+			},
+			flowable,
+			absolute
+		};
+	}
+	draw(out, ctx) {
+		const { result, size, flowable, absolute } = this.#compute(ctx.measurer);
+		const boxes = result.boxes;
+		const order = [...flowable].sort((a, b) => a.node.zIndex() - b.node.zIndex() || a.index - b.index);
+		const ox = -size.w / 2;
+		const oy = -size.h / 2;
+		for (const child of absolute) child.emit(out, ctx);
+		for (const entry of order) {
+			const box = boxes[flowable.indexOf(entry)];
+			const off = entry.node.flowOffset(ctx.measurer);
+			out.push({ op: "save" });
+			out.push({
+				op: "transform",
+				m: [
+					1,
+					0,
+					0,
+					1,
+					ox + box.x - off.x,
+					oy + box.y - off.y
+				]
+			});
+			entry.node.emit(out, ctx);
+			out.push({ op: "restore" });
+		}
+	}
+};
+/**
+* Thin convenience factory over the Yoga-backed {@link Layout} node — NOT a new
+* class and NOT new signals, so a `Stack` inherits Layout's memoized, pure,
+* dependency-tracked resolve verbatim: `Stack(props)` and the equivalent
+* hand-written `Layout({...})` produce identical child positions.
+*
+* Stack-ergonomic defaults (the ONLY divergence from `Layout`):
+* - `direction` defaults to `'column'` (the common vertical stack; Layout's own
+*   default is `'row'`).
+* - `align` defaults to `'start'` — a true left edge for a label column (the
+*   dogfooding use case). This DIVERGES from `Layout`'s `'center'` default.
+*
+* Every other prop passes straight through to `Layout`.
+*/
+function Stack(props = {}) {
+	return new Layout({
+		...props,
+		direction: props.direction ?? "column",
+		align: props.align ?? "start"
+	});
+}
+/**
+* `Stack({ direction: 'row' })` read as a name — a horizontal stack. Inherits
+* Stack's `align:'start'` default and Layout's pure memoized resolve; the only
+* difference from `Stack` is the pinned `direction`.
+*/
+function Row(props = {}) {
+	return Stack({
+		...props,
+		direction: "row"
+	});
+}
+/**
+* `Stack({ direction: 'column' })` read as a name — a vertical stack (the same
+* direction `Stack` already defaults to, made explicit at the call site).
+*/
+function Column(props = {}) {
+	return Stack({
+		...props,
+		direction: "column"
+	});
+}
+function initProp(sig, init) {
+	if (typeof init === "function") sig.bindSource(init);
+	else if (init !== void 0) sig.set(init);
+	return sig;
+}
+//#endregion
+export { Column, Layout, Row, Stack };