@smoove/core 0.1.0

package/dist/layout/flex/flex.js

@@ -0,0 +1,175 @@
+import { DIRECTION_LTR } from "flexily/classic";
+import Konva from "konva";
+import { isKMLayoutNode } from "../contract.js";
+import { applyChildProps, applyContainerProps, applySize, FlexilyNode, parseSize, setImageMeasure, setTextMeasure, } from "./engine.js";
+const FLEX_KEYS = [
+    "flexDirection",
+    "justifyContent",
+    "alignItems",
+    "gap",
+    "padding",
+    "flexGrow",
+    "flexShrink",
+    "flexBasis",
+    "alignSelf",
+    "margin",
+];
+function pickKonvaConfig(config) {
+    const out = { ...config };
+    for (const k of FLEX_KEYS)
+        delete out[k];
+    const w = parseSize(config.width);
+    const h = parseSize(config.height);
+    out.width = w?.kind === "px" ? w.value : undefined;
+    out.height = h?.kind === "px" ? h.value : undefined;
+    return out;
+}
+export class Flex extends Konva.Group {
+    _kmRole = "container";
+    constructor(config) {
+        super(pickKonvaConfig(config));
+        this.setAttrs({
+            flexDirection: config.flexDirection,
+            justifyContent: config.justifyContent,
+            alignItems: config.alignItems,
+            gap: config.gap,
+            padding: config.padding,
+            flexGrow: config.flexGrow,
+            flexShrink: config.flexShrink,
+            flexBasis: config.flexBasis,
+            alignSelf: config.alignSelf,
+            margin: config.margin,
+            flexWidth: config.width,
+            flexHeight: config.height,
+        });
+    }
+    computeLayout() {
+        layoutRoot(this, false);
+    }
+    /** @internal — {@link KMLayoutNode}: lay self out as a flex root (Sequence calls this). */
+    _kmComputeLayout() {
+        this.computeLayout();
+    }
+    /** @internal — {@link KMLayoutNode}: write the computed box back (nested in a parent flex). */
+    _kmPlace(box) {
+        this.x(box.left);
+        this.y(box.top);
+        this.width(box.width);
+        this.height(box.height);
+    }
+}
+/**
+ * Lay out a Konva.Group as a Flexily root: build the layout tree from the
+ * group's attrs + children, compute, and write positions/sizes back.
+ *
+ * When `alwaysSetSize` is true the group's own width/height are always pulled
+ * from the computed content size — needed for a hug-content root that draws a
+ * background (Block) so the background isn't 0×0. Flex passes false, preserving
+ * its behavior of only writing self-size when an explicit px size is given.
+ */
+export function layoutRoot(group, alwaysSetSize) {
+    const w = readPixelSize(group.attrs.flexWidth);
+    const h = readPixelSize(group.attrs.flexHeight);
+    const root = FlexilyNode.create();
+    applyContainerProps(root, group.attrs);
+    if (w > 0)
+        root.setWidth(w);
+    if (h > 0)
+        root.setHeight(h);
+    const pairs = [];
+    buildChildren(group.getChildren(), root, pairs, group.attrs.flexDirection ?? "row");
+    root.calculateLayout(w > 0 ? w : undefined, h > 0 ? h : undefined, DIRECTION_LTR);
+    if (alwaysSetSize || w > 0)
+        group.width(root.getComputedWidth());
+    if (alwaysSetSize || h > 0)
+        group.height(root.getComputedHeight());
+    writeBack(pairs);
+    root.freeRecursive();
+}
+function readPixelSize(sizeAttr) {
+    const parsed = parseSize(sizeAttr);
+    if (parsed?.kind === "px")
+        return parsed.value;
+    // No explicit px size → hug content. Return 0 (not the node's current Konva
+    // size): falling back to the last-computed size would pin a hug-content root
+    // to its first-tick height and stop it re-growing as children change size.
+    return 0;
+}
+export function buildChildren(children, parentFlex, pairs, parentDirection = "row") {
+    // Skip the Block background rect and any hidden child (display:none semantics —
+    // an invisible node takes no layout space, so staggered/toggled children don't
+    // leave gaps).
+    const laidOut = children.filter((c) => !c.attrs.__blockBg && c.visible() !== false);
+    const parentIsColumn = parentDirection.startsWith("column");
+    laidOut.forEach((child, i) => {
+        const node = FlexilyNode.create();
+        applyChildProps(node, child.attrs);
+        if (isKMLayoutNode(child)) {
+            // smoove wrapper: it self-describes its layout via the contract.
+            if (child._kmRole === "container") {
+                const props = child.attrs;
+                applyContainerProps(node, props);
+                applySize(node, child.attrs.flexWidth, child.attrs.flexHeight);
+                buildChildren(child.getChildren(), node, pairs, props.flexDirection ?? "row");
+            }
+            else {
+                child._kmMeasure?.(node, { parentIsColumn });
+            }
+        }
+        else if (child instanceof Konva.Text) {
+            // Raw Konva.Text (no wrapper): measure with wrap awareness.
+            if (child.attrs.flexWidth === undefined && parentIsColumn)
+                node.setWidthPercent(100);
+            else
+                applySize(node, child.attrs.flexWidth, undefined);
+            setTextMeasure(node, child, parentIsColumn);
+        }
+        else if (child instanceof Konva.Image) {
+            // Raw Konva.Image (no wrapper): intrinsic size from the bitmap.
+            applySize(node, child.attrs.flexWidth, child.attrs.flexHeight);
+            if (child.attrs.flexWidth === undefined && child.attrs.flexHeight === undefined) {
+                setImageMeasure(node, child);
+            }
+        }
+        else {
+            // Any other raw Konva node: size from numeric width/height attrs.
+            const w = child.attrs.width;
+            const h = child.attrs.height;
+            if (typeof w === "number" && w > 0)
+                node.setWidth(w);
+            if (typeof h === "number" && h > 0)
+                node.setHeight(h);
+        }
+        pairs.push({ konva: child, flex: node });
+        parentFlex.insertChild(node, i);
+    });
+}
+export function writeBack(pairs) {
+    for (const { konva, flex } of pairs) {
+        const left = flex.getComputedLeft();
+        const top = flex.getComputedTop();
+        const width = flex.getComputedWidth();
+        const height = flex.getComputedHeight();
+        if (isKMLayoutNode(konva)) {
+            // Wrapper handles its own position/size/restyle (origin-corrected per shape).
+            konva._kmPlace({ left, top, width, height });
+            continue;
+        }
+        // Raw Konva fallback. Origin-correct via getSelfRect so centered-origin
+        // shapes (e.g. a bare Konva.Circle) land their bounding box at the slot;
+        // top-left-origin nodes have selfRect.x === 0, so this is a no-op for them.
+        const r = konva.getSelfRect();
+        konva.x(left - r.x);
+        konva.y(top - r.y);
+        if (konva instanceof Konva.Text) {
+            if (konva.attrs.wrap === undefined)
+                konva.wrap("word");
+            konva.width(width);
+        }
+        else {
+            konva.width(width);
+            konva.height(height);
+        }
+    }
+}
+//# sourceMappingURL=flex.js.map

package/dist/layout/flex/flex.js.map

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

package/dist/layout/flex/mixin.d.ts

@@ -0,0 +1,52 @@
+import type { Node as FlexilyNode } from "flexily/classic";
+import type Konva from "konva";
+import type { KMLayoutNode, LayoutBox } from "../contract.js";
+import type { FlexChildProps, SizeValue } from "./types.js";
+/** Common shape-config shape: a Konva config plus flex-child props + size values. */
+export type LeafConfig = FlexChildProps & {
+    width?: SizeValue;
+    height?: SizeValue;
+} & Record<string, unknown>;
+/**
+ * Strip smoove-only keys and translate `width`/`height` (which may be a
+ * `%` string) into a plain Konva config. Mirrors the per-wrapper
+ * `pickKonvaConfig` helpers in `block.ts`/`image.ts`/`video.ts` so leaf shapes
+ * don't each re-implement it.
+ */
+export declare function pickLeafConfig(config: LeafConfig): Record<string, unknown>;
+/** Record flex child props + the original `width`/`height` size values as attrs. */
+export declare function applyLeafFlexAttrs(node: Konva.Node, config: LeafConfig): void;
+/**
+ * Configure a leaf shape's flexily sizing: honor an explicit `px`/`%`
+ * width/height, and when neither is given fall back to the shape's intrinsic
+ * size (its `getSelfRect()` bounds — diameter for a circle, points-bbox for a
+ * line, etc.) as a fixed basis. Using a fixed width/height (rather than a
+ * flexily measure callback) keeps the size deterministic — a measure callback
+ * isn't reliably consulted for these leaf nodes.
+ */
+export declare function leafMeasure(shape: Konva.Shape, node: FlexilyNode): void;
+/**
+ * Write the computed box back onto a leaf shape. Position is corrected for the
+ * shape's origin via `getSelfRect()`: top-left-origin shapes (Rect) have
+ * `selfRect.x === 0`, while centered-origin shapes (Circle, Ellipse, Ring,
+ * Arc, Wedge, RegularPolygon, Star) have a negative offset, so this lands the
+ * shape's *bounding box* at the flex slot. width/height are written through
+ * Konva's setters; for radius/points-based shapes those derive geometry, so
+ * `flexGrow`-driven stretch can distort them — give such shapes an explicit
+ * size (or keep them un-stretched) for predictable results.
+ */
+export declare function leafPlace(shape: Konva.Shape, box: LayoutBox): void;
+/**
+ * Build a smoove leaf wrapper class over a concrete Konva shape. The
+ * returned base implements {@link KMLayoutNode} (leaf role + measure + place)
+ * and handles config stripping, so a shape wrapper is just:
+ *
+ * ```ts
+ * export class Rect extends FlexShape<Konva.Rect, RectConfig>(Konva.Rect) {}
+ * ```
+ *
+ * The `C` type parameter types the resulting constructor's config, so the
+ * subclass needs no body.
+ */
+export declare function FlexShape<N extends Konva.Shape, C extends LeafConfig = LeafConfig>(Base: new (...args: any[]) => N): new (config: C) => N & KMLayoutNode;
+//# sourceMappingURL=mixin.d.ts.map

package/dist/layout/flex/mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mixin.d.ts","sourceRoot":"","sources":["../../../src/layout/flex/mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,IAAI,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE9D,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5D,qFAAqF;AACrF,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG;IACxC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAgB5B;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAS1E;AAED,oFAAoF;AACpF,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,GAAG,IAAI,CAU7E;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,WAAW,GAAG,IAAI,CAUvE;AAED;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,GAAG,IAAI,CAMlE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,KAAK,EAAE,CAAC,SAAS,UAAU,GAAG,UAAU,EAEhF,IAAI,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,GAC9B,KACD,MAAM,EAAE,CAAC,KACN,CAAC,GAAG,YAAY,CAiBpB"}

package/dist/layout/flex/mixin.js

@@ -0,0 +1,114 @@
+import { applySize, parseSize } from "./engine.js";
+// Keys stripped before handing the config to Konva. width/height are included
+// so they're removed when there's no px size: for radius/points shapes Konva
+// maps width/height onto geometry, so a leftover `width: undefined` in the
+// constructor config would wipe the radius.
+const STRIP_KEYS = [
+    "flexGrow",
+    "flexShrink",
+    "flexBasis",
+    "alignSelf",
+    "margin",
+    "width",
+    "height",
+];
+/**
+ * Strip smoove-only keys and translate `width`/`height` (which may be a
+ * `%` string) into a plain Konva config. Mirrors the per-wrapper
+ * `pickKonvaConfig` helpers in `block.ts`/`image.ts`/`video.ts` so leaf shapes
+ * don't each re-implement it.
+ */
+export function pickLeafConfig(config) {
+    const out = { ...config };
+    for (const k of STRIP_KEYS)
+        delete out[k];
+    // Only pixel sizes go back to Konva; `%`/hug is resolved later by the engine.
+    const w = parseSize(config.width);
+    const h = parseSize(config.height);
+    if (w?.kind === "px")
+        out.width = w.value;
+    if (h?.kind === "px")
+        out.height = h.value;
+    return out;
+}
+/** Record flex child props + the original `width`/`height` size values as attrs. */
+export function applyLeafFlexAttrs(node, config) {
+    node.setAttrs({
+        flexGrow: config.flexGrow,
+        flexShrink: config.flexShrink,
+        flexBasis: config.flexBasis,
+        alignSelf: config.alignSelf,
+        margin: config.margin,
+        flexWidth: config.width,
+        flexHeight: config.height,
+    });
+}
+/**
+ * Configure a leaf shape's flexily sizing: honor an explicit `px`/`%`
+ * width/height, and when neither is given fall back to the shape's intrinsic
+ * size (its `getSelfRect()` bounds — diameter for a circle, points-bbox for a
+ * line, etc.) as a fixed basis. Using a fixed width/height (rather than a
+ * flexily measure callback) keeps the size deterministic — a measure callback
+ * isn't reliably consulted for these leaf nodes.
+ */
+export function leafMeasure(shape, node) {
+    const w = shape.attrs.flexWidth;
+    const h = shape.attrs.flexHeight;
+    if (w === undefined && h === undefined) {
+        const r = shape.getSelfRect();
+        if (r.width > 0)
+            node.setWidth(r.width);
+        if (r.height > 0)
+            node.setHeight(r.height);
+        return;
+    }
+    applySize(node, w, h);
+}
+/**
+ * Write the computed box back onto a leaf shape. Position is corrected for the
+ * shape's origin via `getSelfRect()`: top-left-origin shapes (Rect) have
+ * `selfRect.x === 0`, while centered-origin shapes (Circle, Ellipse, Ring,
+ * Arc, Wedge, RegularPolygon, Star) have a negative offset, so this lands the
+ * shape's *bounding box* at the flex slot. width/height are written through
+ * Konva's setters; for radius/points-based shapes those derive geometry, so
+ * `flexGrow`-driven stretch can distort them — give such shapes an explicit
+ * size (or keep them un-stretched) for predictable results.
+ */
+export function leafPlace(shape, box) {
+    const r = shape.getSelfRect();
+    shape.x(box.left - r.x);
+    shape.y(box.top - r.y);
+    shape.width(box.width);
+    shape.height(box.height);
+}
+/**
+ * Build a smoove leaf wrapper class over a concrete Konva shape. The
+ * returned base implements {@link KMLayoutNode} (leaf role + measure + place)
+ * and handles config stripping, so a shape wrapper is just:
+ *
+ * ```ts
+ * export class Rect extends FlexShape<Konva.Rect, RectConfig>(Konva.Rect) {}
+ * ```
+ *
+ * The `C` type parameter types the resulting constructor's config, so the
+ * subclass needs no body.
+ */
+export function FlexShape(
+// biome-ignore lint/suspicious/noExplicitAny: mixin base accepts any Konva shape constructor.
+Base) {
+    class Wrapped extends Base {
+        _kmRole = "leaf";
+        constructor(config = {}) {
+            super(pickLeafConfig(config));
+            applyLeafFlexAttrs(this, config);
+        }
+        _kmMeasure(node) {
+            leafMeasure(this, node);
+        }
+        _kmPlace(box) {
+            leafPlace(this, box);
+        }
+    }
+    return Wrapped;
+}
+//# sourceMappingURL=mixin.js.map

package/dist/layout/flex/mixin.js.map

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

package/dist/layout/flex/types.d.ts

@@ -0,0 +1,31 @@
+import type Konva from "konva";
+export type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
+export type Justify = "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+export type Align = "flex-start" | "center" | "flex-end" | "stretch";
+export type AlignSelf = "auto" | Align;
+export type EdgeValue = number | [number, number] | [number, number, number, number] | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+export type SizeValue = number | `${number}%`;
+export type FlexProps = {
+    flexDirection?: FlexDirection;
+    justifyContent?: Justify;
+    alignItems?: Align;
+    gap?: number;
+    padding?: EdgeValue;
+};
+export type FlexChildProps = {
+    flexGrow?: number;
+    flexShrink?: number;
+    flexBasis?: number;
+    alignSelf?: AlignSelf;
+    margin?: EdgeValue;
+};
+export type FlexConfig = Omit<Konva.GroupConfig, "width" | "height"> & FlexProps & FlexChildProps & {
+    width?: SizeValue;
+    height?: SizeValue;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/layout/flex/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/layout/flex/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;AAEhF,MAAM,MAAM,OAAO,GACf,YAAY,GACZ,QAAQ,GACR,UAAU,GACV,eAAe,GACf,cAAc,GACd,cAAc,CAAC;AAEnB,MAAM,MAAM,KAAK,GAAG,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;AACrE,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC;AAEvC,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,CAAC,MAAM,EAAE,MAAM,CAAC,GAChB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,GAChC;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAErE,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC;AAE9C,MAAM,MAAM,SAAS,GAAG;IACtB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,OAAO,GAAG,QAAQ,CAAC,GAClE,SAAS,GACT,cAAc,GAAG;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC"}

package/dist/layout/flex/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/layout/flex/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/layout/flex/types.ts"],"names":[],"mappings":""}

package/dist/layout/image.d.ts

@@ -0,0 +1,46 @@
+import Konva from "konva";
+import { type ImageLoader } from "../engine/runtime-defaults.js";
+import type { KMLayoutNode, LayoutBox } from "./contract.js";
+import type { FlexilyNode } from "./flex/engine.js";
+import type { FlexChildProps, SizeValue } from "./flex/types.js";
+export type ObjectFit = "cover" | "contain" | "fill" | "none";
+export type ObjectPosition = "center" | "top" | "bottom" | "left" | "right" | "top left" | "top right" | "bottom left" | "bottom right";
+export type ImageConfig = Omit<Konva.GroupConfig, "width" | "height"> & FlexChildProps & {
+    width?: SizeValue;
+    height?: SizeValue;
+    src: HTMLImageElement | string;
+    objectFit?: ObjectFit;
+    objectPosition?: ObjectPosition;
+    cornerRadius?: number | number[];
+    /**
+     * Inject an alternative image loader (e.g. a server/skia loader). Defaults
+     * to the runtime default — the DOM `<img>` loader in the browser, or
+     * whatever a server renderer registered via `setDefaultImageLoader`.
+     */
+    loader?: ImageLoader;
+};
+export declare class Image extends Konva.Group implements KMLayoutNode {
+    readonly _kmRole: "leaf";
+    private readonly _img;
+    private _source;
+    /** Pending load (string src only); null once resolved or for element sources. */
+    private _loadPromise;
+    /** Guards the one-time render gate registered on first tick. */
+    private _renderGated;
+    constructor(config: ImageConfig);
+    /**
+     * @internal — called by `Sequence` each tick while on-stage. Once, during
+     * offline rendering, registers a `delayRender` gate so `renderFrame` waits for
+     * the image to finish loading before the frame is captured. No-op in preview.
+     */
+    _kmTick(_localFrame: number): void;
+    /** @internal — called by `Sequence` when it goes out of range. */
+    _kmDeactivate(): void;
+    /** @internal — {@link KMLayoutNode}: size from explicit width/height (cover/contain handle the rest). */
+    _kmMeasure(node: FlexilyNode): void;
+    /** @internal — {@link KMLayoutNode}: write the computed box back + re-fit the bitmap. */
+    _kmPlace(box: LayoutBox): void;
+    /** @internal */
+    _layoutImage(): void;
+}
+//# sourceMappingURL=image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/layout/image.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,KAAK,WAAW,EAEjB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjE,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAC9D,MAAM,MAAM,cAAc,GACtB,QAAQ,GACR,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,OAAO,GAAG,QAAQ,CAAC,GACnE,cAAc,GAAG;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,GAAG,EAAE,gBAAgB,GAAG,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB,CAAC;AAyBJ,qBAAa,KAAM,SAAQ,KAAK,CAAC,KAAM,YAAW,YAAY;IAC5D,QAAQ,CAAC,OAAO,EAAG,MAAM,CAAU;IACnC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAc;IACnC,OAAO,CAAC,OAAO,CAA4B;IAC3C,iFAAiF;IACjF,OAAO,CAAC,YAAY,CAA8B;IAClD,gEAAgE;IAChE,OAAO,CAAC,YAAY,CAAS;gBAEjB,MAAM,EAAE,WAAW;IAmD/B;;;;OAIG;IACH,OAAO,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;IAWlC,kEAAkE;IAClE,aAAa,IAAI,IAAI;IAErB,yGAAyG;IACzG,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAQnC,yFAAyF;IACzF,QAAQ,CAAC,GAAG,EAAE,SAAS,GAAG,IAAI;IAQ9B,gBAAgB;IAChB,YAAY,IAAI,IAAI;CA0CrB"}

package/dist/layout/image.js

@@ -0,0 +1,198 @@
+import Konva from "konva";
+import { getComposition } from "../engine/composition.js";
+import { getDefaultImageLoader, } from "../engine/runtime-defaults.js";
+import { TICK_MARK } from "../media/media-marker.js";
+import { applySize, parseSize } from "./flex/engine.js";
+const IMG_KEYS = [
+    "src",
+    "objectFit",
+    "objectPosition",
+    "flexGrow",
+    "flexShrink",
+    "flexBasis",
+    "alignSelf",
+    "margin",
+    "loader",
+];
+function pickKonvaConfig(config) {
+    const out = { ...config };
+    for (const k of IMG_KEYS)
+        delete out[k];
+    const w = parseSize(config.width);
+    const h = parseSize(config.height);
+    out.width = w?.kind === "px" ? w.value : undefined;
+    out.height = h?.kind === "px" ? h.value : undefined;
+    out.cornerRadius = undefined;
+    return out;
+}
+export class Image extends Konva.Group {
+    _kmRole = "leaf";
+    _img;
+    _source = null;
+    /** Pending load (string src only); null once resolved or for element sources. */
+    _loadPromise = null;
+    /** Guards the one-time render gate registered on first tick. */
+    _renderGated = false;
+    constructor(config) {
+        super(pickKonvaConfig(config));
+        // Discovered by `Sequence._apply` so `_kmTick` runs at attach-time (when the
+        // composition is reachable) to gate the async load during offline rendering.
+        this.setAttr(TICK_MARK, true);
+        this._img = new Konva.Image({ image: undefined, listening: false });
+        super.add(this._img);
+        this.setAttrs({
+            flexGrow: config.flexGrow,
+            flexShrink: config.flexShrink,
+            flexBasis: config.flexBasis,
+            alignSelf: config.alignSelf,
+            margin: config.margin,
+            objectFit: config.objectFit ?? "cover",
+            objectPosition: config.objectPosition ?? "center",
+            cornerRadius: config.cornerRadius,
+            flexWidth: config.width,
+            flexHeight: config.height,
+        });
+        if (config.cornerRadius !== undefined) {
+            const cr = normalizeCorners(config.cornerRadius);
+            this.clipFunc((ctx) => roundRectPath(ctx, 0, 0, this.width(), this.height(), cr));
+        }
+        this.on("widthChange heightChange", () => this._layoutImage());
+        if (typeof config.src === "string") {
+            // Kick the load off eagerly (preserves preview timing). The promise is
+            // captured so `_kmTick` can gate offline rendering on it via delayRender.
+            const loader = config.loader ?? getDefaultImageLoader();
+            this._loadPromise = loader(config.src)
+                .then((img) => {
+                this._source = img;
+                this._img.image(img);
+                this._layoutImage();
+                this.getLayer()?.batchDraw();
+            })
+                .catch((err) => {
+                console.error("[smoove] Image load failed:", err);
+            });
+        }
+        else {
+            this._source = config.src;
+            this._img.image(config.src);
+        }
+        this._layoutImage();
+    }
+    /**
+     * @internal — called by `Sequence` each tick while on-stage. Once, during
+     * offline rendering, registers a `delayRender` gate so `renderFrame` waits for
+     * the image to finish loading before the frame is captured. No-op in preview.
+     */
+    _kmTick(_localFrame) {
+        if (this._renderGated || !this._loadPromise)
+            return;
+        const stage = this.getStage();
+        if (!stage)
+            return;
+        const comp = getComposition(stage);
+        if (!comp?.environment.isRendering)
+            return;
+        this._renderGated = true;
+        const handle = comp.delayRender("load image");
+        this._loadPromise.finally(() => comp.continueRender(handle));
+    }
+    /** @internal — called by `Sequence` when it goes out of range. */
+    _kmDeactivate() { }
+    /** @internal — {@link KMLayoutNode}: size from explicit width/height (cover/contain handle the rest). */
+    _kmMeasure(node) {
+        applySize(node, this.attrs.flexWidth, this.attrs.flexHeight);
+    }
+    /** @internal — {@link KMLayoutNode}: write the computed box back + re-fit the bitmap. */
+    _kmPlace(box) {
+        this.x(box.left);
+        this.y(box.top);
+        this.width(box.width);
+        this.height(box.height);
+        this._layoutImage();
+    }
+    /** @internal */
+    _layoutImage() {
+        const w = this.width();
+        const h = this.height();
+        if (w <= 0 || h <= 0)
+            return;
+        const src = this._source;
+        const fit = (this.attrs.objectFit ?? "cover");
+        const pos = (this.attrs.objectPosition ?? "center");
+        if (!src || src.naturalWidth === 0 || src.naturalHeight === 0)
+            return;
+        const nw = src.naturalWidth;
+        const nh = src.naturalHeight;
+        if (fit === "fill") {
+            this._img.position({ x: 0, y: 0 });
+            this._img.size({ width: w, height: h });
+            this._img.crop({ x: 0, y: 0, width: nw, height: nh });
+            return;
+        }
+        if (fit === "none") {
+            const { x, y } = positionOffset(pos, w - nw, h - nh);
+            this._img.position({ x, y });
+            this._img.size({ width: nw, height: nh });
+            this._img.crop({ x: 0, y: 0, width: nw, height: nh });
+            return;
+        }
+        if (fit === "contain") {
+            const scale = Math.min(w / nw, h / nh);
+            const dw = nw * scale;
+            const dh = nh * scale;
+            const { x, y } = positionOffset(pos, w - dw, h - dh);
+            this._img.position({ x, y });
+            this._img.size({ width: dw, height: dh });
+            this._img.crop({ x: 0, y: 0, width: nw, height: nh });
+            return;
+        }
+        const scale = Math.max(w / nw, h / nh);
+        const cropW = w / scale;
+        const cropH = h / scale;
+        const { x: cx, y: cy } = positionOffset(pos, nw - cropW, nh - cropH);
+        this._img.position({ x: 0, y: 0 });
+        this._img.size({ width: w, height: h });
+        this._img.crop({ x: cx, y: cy, width: cropW, height: cropH });
+    }
+}
+function positionOffset(pos, freeX, freeY) {
+    let fx = 0.5;
+    let fy = 0.5;
+    if (pos.includes("left"))
+        fx = 0;
+    else if (pos.includes("right"))
+        fx = 1;
+    if (pos.includes("top"))
+        fy = 0;
+    else if (pos.includes("bottom"))
+        fy = 1;
+    if (pos === "center") {
+        fx = 0.5;
+        fy = 0.5;
+    }
+    return { x: freeX * fx, y: freeY * fy };
+}
+function normalizeCorners(c) {
+    if (typeof c === "number")
+        return [c, c, c, c];
+    if (c.length === 1)
+        return [c[0] ?? 0, c[0] ?? 0, c[0] ?? 0, c[0] ?? 0];
+    if (c.length === 2)
+        return [c[0] ?? 0, c[1] ?? 0, c[0] ?? 0, c[1] ?? 0];
+    return [c[0] ?? 0, c[1] ?? 0, c[2] ?? 0, c[3] ?? 0];
+}
+function roundRectPath(ctx, x, y, w, h, r) {
+    const [tl, tr, br, bl] = r;
+    ctx.beginPath();
+    ctx.moveTo(x + (tl ?? 0), y);
+    ctx.lineTo(x + w - (tr ?? 0), y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + (tr ?? 0));
+    ctx.lineTo(x + w, y + h - (br ?? 0));
+    ctx.quadraticCurveTo(x + w, y + h, x + w - (br ?? 0), y + h);
+    ctx.lineTo(x + (bl ?? 0), y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - (bl ?? 0));
+    ctx.lineTo(x, y + (tl ?? 0));
+    ctx.quadraticCurveTo(x, y, x + (tl ?? 0), y);
+    ctx.closePath();
+}
+//# sourceMappingURL=image.js.map