@oh-just-another/templates 0.57.0

package/dist/rich/hit-test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hit-test.js","sourceRoot":"","sources":["../../src/rich/hit-test.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAG1C,MAAM,aAAa,GAAG,CACpB,CAA0D,EAC1D,CAAO,EACE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC;AAExF;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAkB,EAAE,KAAW,EAAuB,EAAE;IAClF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IACpD,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClC,MAAM,GAAG,GAAG,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACtC,IAAI,GAAG;YAAE,OAAO,GAAG,CAAC;IACtB,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,IAAkB,EAAE,KAAW,EAAuB,EAAE;IAC7F,MAAM,GAAG,GAAG,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IACrC,IAAI,CAAC,GAAG;QAAE,OAAO,IAAI,CAAC;IACtB,OAAO,uBAAuB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;AAC5C,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAC,IAAkB,EAAE,MAAoB,EAAuB,EAAE;IAChG,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;QACpB,OAAO,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAChD,CAAC;IACD,gEAAgE;IAChE,MAAM,KAAK,GAAG,SAAS,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACtC,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IACxB,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QAC3C,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QACtB,IAAI,IAAI,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;YAAE,OAAO,IAAI,CAAC;IACpD,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,IAAkB,EAAE,MAAoB,EAAyB,EAAE;IACpF,IAAI,IAAI,KAAK,MAAM;QAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACvC,IAAI,KAAK;YAAE,OAAO,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC,CAAC;IACrC,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}

package/dist/rich/index.d.ts

@@ -0,0 +1,22 @@
+export type { NodeStyle, Spacing, LinkSpacing, FlexDirection, JustifyContent, AlignItems, Position, Length, LayoutStyle, SpotName, SpotRef, } from "./style.js";
+export { resolveSpacing, resolveSpotRatio } from "./style.js";
+export type { Binding, NodeBase, ContainerNode, TextNode, IconNode, ImageNode, ButtonNode, DropZoneNode, PortNode, TemplateNode, } from "./node.js";
+export { isContainer, isInteractive, childrenOf } from "./node.js";
+export { extractPorts } from "./ports.js";
+export { extractDropZone } from "./drop-zones.js";
+export type { MeasureText, LayoutedNode, LayoutOptions } from "./layout.js";
+export { layoutTree, fallbackMeasureText } from "./layout.js";
+export { resolveBindings } from "./binding.js";
+export { getTemplateLocalBounds } from "./bounds.js";
+export type { RichTemplate, RichTemplateSchema } from "./define.js";
+export { defineRichTemplate } from "./define.js";
+export type { RichTemplateExtension } from "./extends.js";
+export { resolveRichTemplateChain } from "./extends.js";
+export { RichTemplateRegistry, defaultRichRegistry } from "./registry.js";
+export { renderTemplateElement, installTemplateShapeRenderer } from "./render.js";
+export { nodeAtPoint, interactiveNodeAtPoint } from "./hit-test.js";
+export type { TemplateTapPayload, DropZoneHit } from "./interactive.js";
+export { templateInteractiveHitTester, findDropZoneAt } from "./interactive.js";
+export type { SvgIcon } from "./svg.js";
+export { parseSvg, paintSvgIcon } from "./svg.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/rich/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/rich/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,SAAS,EACT,OAAO,EACP,WAAW,EACX,aAAa,EACb,cAAc,EACd,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EACX,QAAQ,EACR,OAAO,GACR,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE9D,YAAY,EACV,OAAO,EACP,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,YAAY,GACb,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAE9D,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAErD,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,YAAY,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,qBAAqB,EAAE,4BAA4B,EAAE,MAAM,aAAa,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEpE,YAAY,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,4BAA4B,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEhF,YAAY,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC"}

package/dist/rich/index.js

@@ -0,0 +1,15 @@
+export { resolveSpacing, resolveSpotRatio } from "./style.js";
+export { isContainer, isInteractive, childrenOf } from "./node.js";
+export { extractPorts } from "./ports.js";
+export { extractDropZone } from "./drop-zones.js";
+export { layoutTree, fallbackMeasureText } from "./layout.js";
+export { resolveBindings } from "./binding.js";
+export { getTemplateLocalBounds } from "./bounds.js";
+export { defineRichTemplate } from "./define.js";
+export { resolveRichTemplateChain } from "./extends.js";
+export { RichTemplateRegistry, defaultRichRegistry } from "./registry.js";
+export { renderTemplateElement, installTemplateShapeRenderer } from "./render.js";
+export { nodeAtPoint, interactiveNodeAtPoint } from "./hit-test.js";
+export { templateInteractiveHitTester, findDropZoneAt } from "./interactive.js";
+export { parseSvg, paintSvgIcon } from "./svg.js";
+//# sourceMappingURL=index.js.map

package/dist/rich/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/rich/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAc9D,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAE9D,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAGrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,qBAAqB,EAAE,4BAA4B,EAAE,MAAM,aAAa,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAGpE,OAAO,EAAE,4BAA4B,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGhF,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC"}

package/dist/rich/interactive.d.ts

@@ -0,0 +1,44 @@
+import type { ElementBase } from "@oh-just-another/scene";
+import type { ElementId, Vec2 } from "@oh-just-another/types";
+/**
+ * Emit-shaped payload returned by `templateInteractiveHitTester`. Mirrors the
+ * `InteractionEmit` "TEMPLATE_TAP" variant from `@state` without taking a
+ * compile-time dependency on it — the host wires both sides together.
+ */
+export interface TemplateTapPayload {
+    readonly type: "TEMPLATE_TAP";
+    readonly elementId: ElementId;
+    readonly action: string;
+    readonly nodeId?: string;
+}
+/**
+ * Host-side helper compatible with `@oh-just-another/state`'s
+ * `InteractiveHitTester` signature. Returns a `TEMPLATE_TAP` payload when
+ * `localPoint` lands on a `button` node inside the template tree, or `null`
+ * otherwise.
+ *
+ * Wire it up once during app startup:
+ *
+ * ```ts
+ * import { registerInteractiveHitTester } from "@oh-just-another/state";
+ * import { rich } from "@oh-just-another/templates";
+ *
+ * registerInteractiveHitTester("template", rich.templateInteractiveHitTester);
+ * ```
+ */
+export declare const templateInteractiveHitTester: (shape: ElementBase, localPoint: Vec2) => TemplateTapPayload | null;
+export interface DropZoneHit {
+    readonly elementId: ElementId;
+    readonly nodeId: string | undefined;
+    /** Whitelist from the drop-zone node. `undefined` = accept anything. */
+    readonly accepts: readonly string[] | undefined;
+}
+/**
+ * Find the drop-zone node under `localPoint` for the given template shape.
+ * Returns `null` when the point misses every drop-zone (or the shape is not a
+ * template). The host uses this from DOM `dragover` / `drop` listeners to
+ * decide whether to allow the drop and to construct the `TEMPLATE_DROP`
+ * payload.
+ */
+export declare const findDropZoneAt: (shape: ElementBase, localPoint: Vec2) => DropZoneHit | null;
+//# sourceMappingURL=interactive.d.ts.map

package/dist/rich/interactive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactive.d.ts","sourceRoot":"","sources":["../../src/rich/interactive.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAA2C,MAAM,wBAAwB,CAAC;AACnG,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAM9D;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;IAC9B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,GACvC,OAAO,WAAW,EAClB,YAAY,IAAI,KACf,kBAAkB,GAAG,IAwBvB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,wEAAwE;IACxE,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;CACjD;AAED;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,WAAW,EAAE,YAAY,IAAI,KAAG,WAAW,GAAG,IAqBnF,CAAC"}

package/dist/rich/interactive.js

@@ -0,0 +1,80 @@
+import { resolveBindings } from "./binding.js";
+import { fallbackMeasureText, layoutTree } from "./layout.js";
+import { defaultRichRegistry } from "./registry.js";
+import { interactiveNodeAtPoint } from "./hit-test.js";
+/**
+ * Host-side helper compatible with `@oh-just-another/state`'s
+ * `InteractiveHitTester` signature. Returns a `TEMPLATE_TAP` payload when
+ * `localPoint` lands on a `button` node inside the template tree, or `null`
+ * otherwise.
+ *
+ * Wire it up once during app startup:
+ *
+ * ```ts
+ * import { registerInteractiveHitTester } from "@oh-just-another/state";
+ * import { rich } from "@oh-just-another/templates";
+ *
+ * registerInteractiveHitTester("template", rich.templateInteractiveHitTester);
+ * ```
+ */
+export const templateInteractiveHitTester = (shape, localPoint) => {
+    if (shape.type !== "template")
+        return null;
+    const ts = shape;
+    const template = defaultRichRegistry.get(ts.templateId);
+    if (!template)
+        return null;
+    const root = resolveBindings(template.root, { ...template.defaults, ...ts.data });
+    // Same root-size override as the renderer — keeps hit-test coordinates in
+    // sync with what the user actually sees after a resize.
+    const rootWithSize = {
+        ...root,
+        layout: { ...(root.layout ?? {}), width: ts.width, height: ts.height },
+    };
+    const layouted = layoutTree(rootWithSize, {
+        measureText: fallbackMeasureText,
+        available: { width: ts.width, height: ts.height },
+    });
+    const hit = interactiveNodeAtPoint(layouted, localPoint);
+    if (hit?.node.type !== "button")
+        return null;
+    return {
+        type: "TEMPLATE_TAP",
+        elementId: ts.id,
+        action: hit.node.action,
+        ...(hit.node.id !== undefined ? { nodeId: hit.node.id } : {}),
+    };
+};
+/**
+ * Find the drop-zone node under `localPoint` for the given template shape.
+ * Returns `null` when the point misses every drop-zone (or the shape is not a
+ * template). The host uses this from DOM `dragover` / `drop` listeners to
+ * decide whether to allow the drop and to construct the `TEMPLATE_DROP`
+ * payload.
+ */
+export const findDropZoneAt = (shape, localPoint) => {
+    if (shape.type !== "template")
+        return null;
+    const ts = shape;
+    const template = defaultRichRegistry.get(ts.templateId);
+    if (!template)
+        return null;
+    const root = resolveBindings(template.root, { ...template.defaults, ...ts.data });
+    const rootWithSize = {
+        ...root,
+        layout: { ...(root.layout ?? {}), width: ts.width, height: ts.height },
+    };
+    const layouted = layoutTree(rootWithSize, {
+        measureText: fallbackMeasureText,
+        available: { width: ts.width, height: ts.height },
+    });
+    const hit = interactiveNodeAtPoint(layouted, localPoint);
+    if (hit?.node.type !== "drop-zone")
+        return null;
+    return {
+        elementId: ts.id,
+        nodeId: hit.node.id,
+        accepts: hit.node.accepts,
+    };
+};
+//# sourceMappingURL=interactive.js.map

package/dist/rich/interactive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactive.js","sourceRoot":"","sources":["../../src/rich/interactive.ts"],"names":[],"mappings":"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"}

package/dist/rich/layout.d.ts

@@ -0,0 +1,44 @@
+import type { Bounds } from "@oh-just-another/types";
+import { type TemplateNode } from "./node.js";
+/**
+ * `MeasureText(text, fontFamily, fontSize)` returns the rendered width of the
+ * given text run in CSS pixels. The layout engine relies on this for
+ * intrinsic sizing of `Text` and `Button` (label) nodes.
+ *
+ * The renderer passes a function backed by `CanvasRenderingContext2D.measureText`;
+ * tests can supply a deterministic mock.
+ */
+export type MeasureText = (text: string, fontFamily: string, fontSize: number) => number;
+/** Best-effort defaults when the host doesn't supply a measurer. */
+export declare const fallbackMeasureText: MeasureText;
+/** A node augmented with its computed bounds in template-local coordinates. */
+export interface LayoutedNode {
+    readonly node: TemplateNode;
+    /** Computed bounds in the template's local coordinate space. */
+    readonly bounds: Bounds;
+    readonly children: readonly LayoutedNode[];
+}
+export interface LayoutOptions {
+    readonly measureText?: MeasureText;
+    /** Maximum bounds the root may occupy. Defaults to (∞, ∞). */
+    readonly available?: {
+        readonly width: number;
+        readonly height: number;
+    };
+}
+/**
+ * Compute a layout for the entire tree. The root is positioned at (0, 0); the
+ * caller is responsible for translating it to the shape's world position when
+ * rendering.
+ *
+ * Algorithm:
+ *   1. Recursively measure intrinsic size for every node bottom-up.
+ *      Containers ask their (in-flow) children for sizes then compute their
+ *      own from `width/height` or by summing children + padding + gap.
+ *   2. Position children top-down using `flexDirection`, `justifyContent`,
+ *      `alignItems`, `gap`, and `flex` grow factor.
+ *   3. Absolutely-positioned children are layouted independently inside the
+ *      parent's padding box, using `top/left/right/bottom` against the parent.
+ */
+export declare const layoutTree: (root: TemplateNode, options?: LayoutOptions) => LayoutedNode;
+//# sourceMappingURL=layout.d.ts.map

package/dist/rich/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/rich/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAOL,KAAK,YAAY,EAElB,MAAM,WAAW,CAAC;AAenB;;;;;;;GAOG;AACH,MAAM,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;AAEzF,oEAAoE;AACpE,eAAO,MAAM,mBAAmB,EAAE,WACH,CAAC;AAMhC,+EAA+E;AAC/E,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC;IAC5B,gEAAgE;IAChE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,SAAS,YAAY,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC;IACnC,8DAA8D;IAC9D,QAAQ,CAAC,SAAS,CAAC,EAAE;QAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC1E;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,GAAI,MAAM,YAAY,EAAE,UAAS,aAAkB,KAAG,YAe5E,CAAC"}

package/dist/rich/layout.js

@@ -0,0 +1,418 @@
+import { isContainer, } from "./node.js";
+import { resolveSpacing, resolveSpotRatio, } from "./style.js";
+/** Index-access helper: asserts a provably-valid index is present. */
+const req = (v) => {
+    if (v === undefined)
+        throw new Error("packages/templates: index out of range");
+    return v;
+};
+/** Best-effort defaults when the host doesn't supply a measurer. */
+export const fallbackMeasureText = (text, _fontFamily, fontSize) => text.length * fontSize * 0.55;
+const DEFAULT_FONT_FAMILY = "system-ui, sans-serif";
+const DEFAULT_FONT_SIZE = 14;
+const DEFAULT_LINE_HEIGHT = 1.2;
+/**
+ * Compute a layout for the entire tree. The root is positioned at (0, 0); the
+ * caller is responsible for translating it to the shape's world position when
+ * rendering.
+ *
+ * Algorithm:
+ *   1. Recursively measure intrinsic size for every node bottom-up.
+ *      Containers ask their (in-flow) children for sizes then compute their
+ *      own from `width/height` or by summing children + padding + gap.
+ *   2. Position children top-down using `flexDirection`, `justifyContent`,
+ *      `alignItems`, `gap`, and `flex` grow factor.
+ *   3. Absolutely-positioned children are layouted independently inside the
+ *      parent's padding box, using `top/left/right/bottom` against the parent.
+ */
+export const layoutTree = (root, options = {}) => {
+    const measure = options.measureText ?? fallbackMeasureText;
+    const available = options.available ?? { width: Infinity, height: Infinity };
+    // Measure pass.
+    const intrinsic = measureNode(root, { width: available.width, height: available.height }, measure);
+    // Position pass: root occupies its intrinsic size at (0, 0).
+    return positionNode(root, { x: 0, y: 0, width: intrinsic.width, height: intrinsic.height }, measure);
+};
+const measureNode = (node, available, measure) => {
+    const layout = node.layout ?? {};
+    // Absolute sizing wins if both axes are given as numbers.
+    const fixedW = lengthToPx(layout.width, available.width);
+    const fixedH = lengthToPx(layout.height, available.height);
+    if (fixedW !== undefined && fixedH !== undefined) {
+        return clampSize({ width: fixedW, height: fixedH }, layout);
+    }
+    let intrinsic;
+    switch (node.type) {
+        case "container":
+            intrinsic = measureContainer(node, sizeMinus(available, marginOf(layout)), measure);
+            break;
+        case "text":
+            intrinsic = measureText(node, available, measure);
+            break;
+        case "icon":
+        case "image":
+            intrinsic = { width: 24, height: 24 };
+            break;
+        case "button":
+            intrinsic = measureButton(node, available, measure);
+            break;
+        case "drop-zone":
+            intrinsic = { width: 80, height: 60 };
+            break;
+        case "port":
+            // Ports are dimensionless — they collapse to a 0×0 point at their
+            // computed position. The host paints the port-dot overlay from
+            // `shape.anchors`, not from the template tree.
+            intrinsic = { width: 0, height: 0 };
+            break;
+    }
+    return clampSize({
+        width: fixedW ?? intrinsic.width,
+        height: fixedH ?? intrinsic.height,
+    }, layout);
+};
+const measureContainer = (node, available, measure) => {
+    const layout = node.layout ?? {};
+    const padding = resolveSpacing(layout.padding);
+    const direction = layout.flexDirection ?? "row";
+    const gap = layout.gap ?? 0;
+    const inFlow = (node.children ?? []).filter((c) => (c.layout?.position ?? "relative") !== "absolute");
+    let mainContent = 0;
+    let crossContent = 0;
+    const innerAvail = {
+        width: available.width - padding.left - padding.right,
+        height: available.height - padding.top - padding.bottom,
+    };
+    for (let i = 0; i < inFlow.length; i++) {
+        const child = req(inFlow[i]);
+        const childMargin = marginOf(child.layout ?? {});
+        const childSize = measureNode(child, innerAvail, measure);
+        const childWithMarginMain = (direction === "row" ? childSize.width : childSize.height) +
+            (direction === "row"
+                ? childMargin.left + childMargin.right
+                : childMargin.top + childMargin.bottom);
+        const childWithMarginCross = (direction === "row" ? childSize.height : childSize.width) +
+            (direction === "row"
+                ? childMargin.top + childMargin.bottom
+                : childMargin.left + childMargin.right);
+        mainContent += childWithMarginMain;
+        if (i > 0)
+            mainContent += gap;
+        if (childWithMarginCross > crossContent)
+            crossContent = childWithMarginCross;
+    }
+    if (direction === "row") {
+        return {
+            width: mainContent + padding.left + padding.right,
+            height: crossContent + padding.top + padding.bottom,
+        };
+    }
+    return {
+        width: crossContent + padding.left + padding.right,
+        height: mainContent + padding.top + padding.bottom,
+    };
+};
+const measureText = (node, available, measure) => {
+    const text = typeof node.text === "string" ? node.text : "";
+    const fontFamily = node.style?.fontFamily ?? DEFAULT_FONT_FAMILY;
+    const fontSize = node.style?.fontSize ?? DEFAULT_FONT_SIZE;
+    const intrinsic = measure(text, fontFamily, fontSize);
+    // Cap by available width — the renderer will paint with ellipsis when the
+    // string doesn't fit. Without this cap a long label would push siblings
+    // outside the container.
+    return {
+        width: Math.min(intrinsic, available.width),
+        height: fontSize * DEFAULT_LINE_HEIGHT,
+    };
+};
+const measureButton = (node, available, measure) => {
+    const labelText = typeof node.label === "string" ? node.label : "";
+    const fontFamily = node.style?.fontFamily ?? DEFAULT_FONT_FAMILY;
+    const fontSize = node.style?.fontSize ?? DEFAULT_FONT_SIZE;
+    const padX = 10;
+    const padY = 6;
+    const labelW = measure(labelText, fontFamily, fontSize);
+    const intrinsicW = labelW + padX * 2;
+    return {
+        width: Math.min(intrinsicW, available.width),
+        height: fontSize * DEFAULT_LINE_HEIGHT + padY * 2,
+    };
+};
+// --- Position pass ---
+const positionNode = (node, bounds, measure) => {
+    if (!isContainer(node)) {
+        return { node, bounds, children: [] };
+    }
+    const layout = node.layout ?? {};
+    const padding = resolveSpacing(layout.padding);
+    const direction = layout.flexDirection ?? "row";
+    const wrap = (layout.flexWrap ?? "nowrap") === "wrap";
+    const gap = layout.gap ?? 0;
+    const inner = {
+        x: bounds.x + padding.left,
+        y: bounds.y + padding.top,
+        width: Math.max(0, bounds.width - padding.left - padding.right),
+        height: Math.max(0, bounds.height - padding.top - padding.bottom),
+    };
+    const children = [];
+    const allChildren = node.children ?? [];
+    const positionOf = (c) => c.layout?.position ?? "relative";
+    const inFlow = allChildren.filter((c) => positionOf(c) === "relative");
+    const absolute = allChildren.filter((c) => positionOf(c) === "absolute");
+    const spot = allChildren.filter((c) => positionOf(c) === "spot");
+    const sized = inFlow.map((c) => ({
+        node: c,
+        baseSize: measureNode(c, { width: inner.width, height: inner.height }, measure),
+        flexGrow: c.layout?.flex ?? 0,
+        margin: marginOf(c.layout ?? {}),
+    }));
+    // Split children into lines. With `flexWrap: "wrap"`, push children onto a
+    // new line whenever the in-progress one would overflow along the main axis.
+    // Without wrapping (default) everything goes on a single line.
+    const lines = [];
+    if (!wrap || sized.length === 0) {
+        lines.push(sized);
+    }
+    else {
+        const availMain = direction === "row" ? inner.width : inner.height;
+        let current = [];
+        let currentSize = 0;
+        for (const c of sized) {
+            const childMain = direction === "row"
+                ? c.baseSize.width + c.margin.left + c.margin.right
+                : c.baseSize.height + c.margin.top + c.margin.bottom;
+            const projected = current.length === 0 ? childMain : currentSize + gap + childMain;
+            if (current.length > 0 && projected > availMain) {
+                lines.push(current);
+                current = [c];
+                currentSize = childMain;
+            }
+            else {
+                current.push(c);
+                currentSize = projected;
+            }
+        }
+        if (current.length > 0)
+            lines.push(current);
+    }
+    // Compute per-line cross size (max child cross) plus the total cross size.
+    const lineCrossSizes = lines.map((line) => line.reduce((acc, c) => {
+        const cross = direction === "row"
+            ? c.baseSize.height + c.margin.top + c.margin.bottom
+            : c.baseSize.width + c.margin.left + c.margin.right;
+        return Math.max(acc, cross);
+    }, 0));
+    const totalCross = lineCrossSizes.reduce((acc, h) => acc + h, 0) + Math.max(0, lines.length - 1) * gap;
+    // When wrap = true, lines are laid top-to-bottom inside `inner`. When wrap =
+    // false there's a single line that takes the full cross axis.
+    let lineCursorCross = direction === "row" ? inner.y : inner.x;
+    if (wrap && lines.length > 1) {
+        // Distribute extra cross space at the start (no align-content support).
+        void totalCross;
+    }
+    // Place each line individually.
+    for (let li = 0; li < lines.length; li++) {
+        const line = req(lines[li]);
+        const lineCross = wrap
+            ? (lineCrossSizes[li] ?? 0)
+            : direction === "row"
+                ? inner.height
+                : inner.width;
+        const lineBounds = direction === "row"
+            ? { x: inner.x, y: lineCursorCross, width: inner.width, height: lineCross }
+            : { x: lineCursorCross, y: inner.y, width: lineCross, height: inner.height };
+        placeLine(node, line, lineBounds, direction, layout, measure, children);
+        lineCursorCross += lineCross + gap;
+    }
+    // Place absolute children inside `inner` using top/left/right/bottom.
+    for (const child of absolute) {
+        const cLayout = child.layout ?? {};
+        const childSize = measureNode(child, { width: inner.width, height: inner.height }, measure);
+        let x = inner.x;
+        let y = inner.y;
+        let width = childSize.width;
+        let height = childSize.height;
+        if (cLayout.left !== undefined)
+            x = inner.x + cLayout.left;
+        if (cLayout.top !== undefined)
+            y = inner.y + cLayout.top;
+        if (cLayout.right !== undefined) {
+            if (cLayout.left === undefined)
+                x = inner.x + inner.width - cLayout.right - width;
+            else
+                width = inner.width - cLayout.left - cLayout.right;
+        }
+        if (cLayout.bottom !== undefined) {
+            if (cLayout.top === undefined)
+                y = inner.y + inner.height - cLayout.bottom - height;
+            else
+                height = inner.height - cLayout.top - cLayout.bottom;
+        }
+        children.push(positionNode(child, { x, y, width, height }, measure));
+    }
+    // Spot-positioned children: pin the child's `anchorFocus` to the parent's
+    // `anchor`, then apply `offset`:
+    // parentAnchorPoint - childFocusOffset + offset = child top-left.
+    for (const child of spot) {
+        const cLayout = child.layout ?? {};
+        const childSize = measureNode(child, { width: inner.width, height: inner.height }, measure);
+        const parentAnchor = resolveSpotRatio(cLayout.anchor ?? "center");
+        const childFocus = resolveSpotRatio(cLayout.anchorFocus ?? "center");
+        const offset = cLayout.offset ?? { x: 0, y: 0 };
+        const x = inner.x + inner.width * parentAnchor.x - childSize.width * childFocus.x + offset.x;
+        const y = inner.y + inner.height * parentAnchor.y - childSize.height * childFocus.y + offset.y;
+        children.push(positionNode(child, { x, y, width: childSize.width, height: childSize.height }, measure));
+    }
+    return { node, bounds, children };
+};
+const placeLine = (parent, line, lineBounds, direction, parentLayout, measure, out) => {
+    void parent;
+    if (line.length === 0)
+        return;
+    const justify = parentLayout.justifyContent ?? "start";
+    const align = parentLayout.alignItems ?? "stretch";
+    const gap = parentLayout.gap ?? 0;
+    // Sum base size + gap to compute leftover along main axis for this line.
+    const availMain = direction === "row" ? lineBounds.width : lineBounds.height;
+    let usedMain = 0;
+    for (let i = 0; i < line.length; i++) {
+        const c = req(line[i]);
+        usedMain +=
+            direction === "row"
+                ? c.baseSize.width + c.margin.left + c.margin.right
+                : c.baseSize.height + c.margin.top + c.margin.bottom;
+        if (i > 0)
+            usedMain += gap;
+    }
+    const leftover = Math.max(0, availMain - usedMain);
+    const totalFlex = line.reduce((acc, c) => acc + c.flexGrow, 0);
+    let mainCursor = direction === "row" ? lineBounds.x : lineBounds.y;
+    let gapBetween = gap;
+    if (totalFlex === 0) {
+        switch (justify) {
+            case "center":
+                mainCursor += leftover / 2;
+                break;
+            case "end":
+                mainCursor += leftover;
+                break;
+            case "space-between":
+                if (line.length > 1)
+                    gapBetween = gap + leftover / (line.length - 1);
+                break;
+            case "space-around":
+                mainCursor += leftover / line.length / 2;
+                gapBetween = gap + leftover / line.length;
+                break;
+            case "start":
+            default:
+                break;
+        }
+    }
+    // Baseline: for `row` lines, find the strongest text-baseline among the
+    // line's text/button children so all "baseline"-aligned siblings line up.
+    const lineBaseline = direction === "row" ? lineBaselineY(line, lineBounds.y) : null;
+    for (let i = 0; i < line.length; i++) {
+        const c = req(line[i]);
+        const grow = totalFlex > 0 ? (c.flexGrow / totalFlex) * leftover : 0;
+        const mainSize = (direction === "row" ? c.baseSize.width : c.baseSize.height) + grow;
+        const alignSelf = c.node.layout?.alignSelf ?? align;
+        const crossAvail = direction === "row" ? lineBounds.height : lineBounds.width;
+        const childMarginCrossStart = direction === "row" ? c.margin.top : c.margin.left;
+        const childMarginCrossEnd = direction === "row" ? c.margin.bottom : c.margin.right;
+        let crossSize;
+        if (alignSelf === "stretch") {
+            crossSize = crossAvail - childMarginCrossStart - childMarginCrossEnd;
+        }
+        else {
+            crossSize = direction === "row" ? c.baseSize.height : c.baseSize.width;
+        }
+        let crossOffset = childMarginCrossStart;
+        if (alignSelf === "center") {
+            crossOffset = (crossAvail - crossSize - childMarginCrossStart - childMarginCrossEnd) / 2;
+        }
+        else if (alignSelf === "end") {
+            crossOffset = crossAvail - crossSize - childMarginCrossEnd;
+        }
+        else if (alignSelf === "baseline" && direction === "row" && lineBaseline !== null) {
+            // Place the node so its baseline matches the line baseline.
+            const childBaselineFromTop = nodeBaselineOffset(c.node);
+            const targetY = lineBaseline - childBaselineFromTop;
+            crossOffset = targetY - lineBounds.y;
+        }
+        const cursorStart = mainCursor + (direction === "row" ? c.margin.left : c.margin.top);
+        const childBounds = direction === "row"
+            ? { x: cursorStart, y: lineBounds.y + crossOffset, width: mainSize, height: crossSize }
+            : { x: lineBounds.x + crossOffset, y: cursorStart, width: crossSize, height: mainSize };
+        out.push(positionNode(c.node, childBounds, measure));
+        mainCursor +=
+            mainSize +
+                (direction === "row" ? c.margin.left + c.margin.right : c.margin.top + c.margin.bottom);
+        if (i < line.length - 1)
+            mainCursor += gapBetween;
+    }
+};
+/**
+ * Approximate font baseline offset from the node's top edge. Uses 0.8 ×
+ * font-size as a rough ascent — accurate enough for editor templates without
+ * pulling in real font-metric tables. Non-text nodes report their own
+ * bottom edge as the baseline (matches CSS for replaced elements).
+ */
+const nodeBaselineOffset = (node) => {
+    if (node.type === "text") {
+        const fontSize = node.style?.fontSize ?? DEFAULT_FONT_SIZE;
+        return fontSize * 0.8;
+    }
+    if (node.type === "button") {
+        const fontSize = node.style?.fontSize ?? DEFAULT_FONT_SIZE;
+        // Buttons render their label centered vertically — baseline ≈ vertical
+        // center + half-ascent.
+        return fontSize * 0.8 + 6; // mirrors paintButton's padY
+    }
+    return Infinity; // non-text: ignored when reducing the line baseline.
+};
+const lineBaselineY = (line, lineY) => {
+    let best = null;
+    for (const c of line) {
+        const offset = nodeBaselineOffset(c.node);
+        if (!Number.isFinite(offset))
+            continue;
+        const y = lineY + c.margin.top + offset;
+        if (best === null || y > best)
+            best = y;
+    }
+    return best;
+};
+// --- Helpers ---
+const lengthToPx = (l, parent) => {
+    if (l === undefined || l === "auto")
+        return undefined;
+    if (typeof l === "number")
+        return l;
+    // `${number}%`
+    const pct = parseFloat(l);
+    if (Number.isFinite(pct) && Number.isFinite(parent))
+        return (pct / 100) * parent;
+    return undefined;
+};
+const clampSize = (size, layout) => {
+    let w = size.width;
+    let h = size.height;
+    if (layout.minWidth !== undefined && w < layout.minWidth)
+        w = layout.minWidth;
+    if (layout.maxWidth !== undefined && w > layout.maxWidth)
+        w = layout.maxWidth;
+    if (layout.minHeight !== undefined && h < layout.minHeight)
+        h = layout.minHeight;
+    if (layout.maxHeight !== undefined && h > layout.maxHeight)
+        h = layout.maxHeight;
+    return { width: w, height: h };
+};
+const marginOf = (layout) => resolveSpacing(layout.margin);
+const sizeMinus = (s, margin) => ({
+    width: s.width - margin.left - margin.right,
+    height: s.height - margin.top - margin.bottom,
+});
+// Quiet the unused-var checker for renderer-side variants.
+void null;
+//# sourceMappingURL=layout.js.map