@pixi-ui-editor/runtime-pixi 0.2.0 → 0.4.0

package/dist/views/CheckboxNodeView.js

@@ -0,0 +1,127 @@
+import { CHECKBOX_STATE_KEYS } from "@pixi-ui-editor/schema";
+import { CheckBox } from "@pixi/ui";
+import { Sprite, Texture } from "pixi.js";
+import { NodeView } from "./NodeView.js";
+/**
+ * Adapts a checkbox node to `@pixi/ui`'s `CheckBox`, which owns the checked/unchecked switching —
+ * this class never reimplements it. `group`-based radio exclusivity is wired one layer up, in
+ * `wireCheckboxGroups` (see scene.ts): this view only exposes `forceCheck` so that wiring can flip
+ * a sibling without re-emitting `onCheck` and recursing back into itself.
+ *
+ * Hover is layered on top of `CheckBox` by hand: unlike `FancyButton`, `CheckBox`/`Switcher` only
+ * switches between its checked/unchecked views and has no hover state slot of its own. Both of its
+ * internal Sprites always carry the texture matching the current hover flag — whichever one is
+ * `visible` at any moment is Switcher's concern, not ours.
+ */
+export class CheckboxNodeView extends NodeView {
+    checkbox;
+    interaction;
+    sounds;
+    soundAssetIds;
+    uncheckedTexture;
+    checkedTexture;
+    uncheckedHoverTexture;
+    checkedHoverTexture;
+    enabledState;
+    hovering = false;
+    constructor(node, textures, interaction, sounds) {
+        super(textures);
+        this.interaction = interaction;
+        this.sounds = sounds;
+        this.soundAssetIds = node.sounds;
+        const unchecked = this.textureFor(node.states.uncheckedAssetId) ?? Texture.WHITE;
+        const checked = this.textureFor(node.states.checkedAssetId) ?? Texture.WHITE;
+        this.uncheckedTexture = unchecked;
+        this.checkedTexture = checked;
+        this.uncheckedHoverTexture = this.hoverTextureFor(node.states.uncheckedHoverAssetId, unchecked);
+        this.checkedHoverTexture = this.hoverTextureFor(node.states.checkedHoverAssetId, checked);
+        this.checkbox = new CheckBox({
+            checked: node.defaultChecked,
+            style: { unchecked, checked },
+        });
+        // Authoring-сцена инертна, как и у button: eventMode "none" на верхнем контейнере отключает
+        // hit-testing всего поддерева, включая `innerView`, который Switcher сам сделал "static" — а
+        // значит и hover в authoring никогда не наступает, так что его незачем отдельно отключать.
+        if (interaction === "authoring")
+            this.checkbox.eventMode = "none";
+        else {
+            this.checkbox.innerView.on("pointerover", () => { this.hovering = true; this.applyTextures(); });
+            this.checkbox.innerView.on("pointerout", () => { this.hovering = false; this.applyTextures(); });
+            if (sounds !== undefined) {
+                this.checkbox.onCheck.connect((checkedState) => {
+                    const assetId = checkedState ? this.soundAssetIds?.checkAssetId : this.soundAssetIds?.uncheckAssetId;
+                    const result = assetId === undefined ? undefined : this.sounds?.get(assetId)?.play();
+                    if (result instanceof Promise)
+                        void result.catch(() => undefined);
+                });
+            }
+        }
+        this.enabledState = node.enabled;
+        this.applyEnabled(node.enabled);
+        this.setContent(this.checkbox);
+    }
+    hoverTextureFor(assetId, fallback) {
+        return (assetId === undefined ? undefined : this.textureFor(assetId)) ?? fallback;
+    }
+    /** Puts the current hover/non-hover texture on both internal Sprites; switching visibility is Switcher's job. */
+    applyTextures() {
+        const [uncheckedView, checkedView] = this.checkbox.views;
+        if (uncheckedView instanceof Sprite)
+            uncheckedView.texture = this.hovering ? this.uncheckedHoverTexture : this.uncheckedTexture;
+        if (checkedView instanceof Sprite)
+            checkedView.texture = this.hovering ? this.checkedHoverTexture : this.checkedTexture;
+    }
+    /** In authoring mode `enabled` may only drive selectability elsewhere: this view stays inert either way. */
+    applyEnabled(enabled) {
+        this.enabledState = enabled;
+        if (this.interaction === "authoring")
+            return;
+        this.checkbox.eventMode = enabled ? "static" : "none";
+    }
+    syncContent(node, transform) {
+        if (node.type !== "checkbox")
+            return;
+        this.soundAssetIds = node.sounds;
+        const unchecked = this.textureFor(node.states.uncheckedAssetId) ?? Texture.WHITE;
+        const checked = this.textureFor(node.states.checkedAssetId) ?? Texture.WHITE;
+        // `style` rebuilds both internal views, so it's only reassigned when a base texture actually
+        // changed — same rule ButtonNodeView follows for its state Sprites. A fresh pair of Sprites
+        // starts out holding the plain (non-hover) textures `style` was given, so `applyTextures` always
+        // runs afterwards to restore the current hover look.
+        if (unchecked !== this.uncheckedTexture || checked !== this.checkedTexture) {
+            this.uncheckedTexture = unchecked;
+            this.checkedTexture = checked;
+            this.checkbox.style = { unchecked, checked };
+        }
+        this.uncheckedHoverTexture = this.hoverTextureFor(node.states.uncheckedHoverAssetId, unchecked);
+        this.checkedHoverTexture = this.hoverTextureFor(node.states.checkedHoverAssetId, checked);
+        this.applyTextures();
+        for (const view of this.checkbox.views)
+            if (view instanceof Sprite)
+                view.setSize(transform.width, transform.height);
+        // Только на изменение документа: иначе любой пересчёт layout сбрасывал бы transient preview state.
+        if (node.enabled !== this.enabledState)
+            this.applyEnabled(node.enabled);
+    }
+    get enabled() {
+        return this.enabledState;
+    }
+    set enabled(value) {
+        this.applyEnabled(value);
+    }
+    get checked() {
+        return this.checkbox.checked;
+    }
+    set checked(value) {
+        this.checkbox.checked = value;
+    }
+    /** Sets checked state without emitting `onCheck` — used by radio-group wiring to avoid re-entrancy. */
+    forceCheck(checked) {
+        this.checkbox.forceCheck(checked);
+    }
+    get state() {
+        return this.checkbox.checked ? CHECKBOX_STATE_KEYS[1] : CHECKBOX_STATE_KEYS[0];
+    }
+    get onCheck() { return this.checkbox.onCheck; }
+}
+//# sourceMappingURL=CheckboxNodeView.js.map

package/dist/views/CheckboxNodeView.js.map

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

package/dist/views/NodeView.d.ts

@@ -38,13 +38,14 @@ export declare abstract class NodeView extends Container {
      * children — they are hit-tested first and independently, so a child always stays grabbable.
      */
     containsPoint(point: PointData): boolean;
+    /** Заменяет содержимое ноды: прежнее снимается со сцены и уничтожается, чтобы не копить сироты. */
     protected setContent(content: Container): void;
     /** Syncs type-specific content to the resolved layout rectangle; layout math itself is shared. */
-    protected abstract syncContent(node: UINode, transform: UINode["transform"]): void;
+    protected abstract syncContent(node: UINode, transform: UINode["transform"], profile: LayoutProfileId): void;
     private applyResolvedTransform;
     update(node: UINode, profile: LayoutProfileId, parentSize?: LayoutSize): void;
     /** Applies a transient editor rectangle without deriving it from content-dependent Pixi bounds. */
-    preview(node: UINode, transform: UINode["transform"], visible?: boolean): void;
+    preview(node: UINode, transform: UINode["transform"], visible?: boolean, profile?: LayoutProfileId): void;
     /** Applies the rectangle owned by a direct parent's layout solver. */
     updateManaged(node: UINode, profile: LayoutProfileId, size: LayoutSize): void;
     get layoutRectangle(): LayoutSize;

package/dist/views/NodeView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeView.d.ts","sourceRoot":"","sources":["../../src/views/NodeView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAa,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AACxE,OAAO,EAAqD,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAElG;;;;GAIG;AACH,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG,SAAS,CAAC;AAE3D;;;;GAIG;AACH,8BAAsB,QAAS,SAAQ,SAAS;IAC9C,SAAS,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC9B,4FAA4F;IAC5F,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC;IACtE,6FAA6F;IAC7F,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAmB;IAC5C,yGAAyG;IACzG,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,YAAY,CAAK;gBAEb,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC;IAKnD,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS;IAI1D;;;;;;;;;;;;OAYG;IACH,aAAa,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO;IAIxC,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,SAAS,GAAG,IAAI;IAK9C,kGAAkG;IAClG,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,GAAG,IAAI;IAElF,OAAO,CAAC,sBAAsB;IAuB9B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,UAAU,CAAC,EAAE,UAAU,GAAG,IAAI;IAK7E,mGAAmG;IACnG,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,EAAE,OAAO,UAAO,GAAG,IAAI;IAI3E,sEAAsE;IACtE,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,UAAU,GAAG,IAAI;IAK7E,IAAI,eAAe,IAAI,UAAU,CAEhC;IAED,QAAQ,IAAI,KAAK,GAAG,SAAS;CAG9B"}
+{"version":3,"file":"NodeView.d.ts","sourceRoot":"","sources":["../../src/views/NodeView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAa,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AACxE,OAAO,EAAqD,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAElG;;;;GAIG;AACH,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG,SAAS,CAAC;AAE3D;;;;GAIG;AACH,8BAAsB,QAAS,SAAQ,SAAS;IAC9C,SAAS,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC9B,4FAA4F;IAC5F,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC;IACtE,6FAA6F;IAC7F,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAmB;IAC5C,yGAAyG;IACzG,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,YAAY,CAAK;gBAEb,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC;IAKnD,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS;IAI1D;;;;;;;;;;;;OAYG;IACH,aAAa,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO;IAIxC,mGAAmG;IACnG,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,SAAS,GAAG,IAAI;IAM9C,kGAAkG;IAClG,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,eAAe,GAAG,IAAI;IAE5G,OAAO,CAAC,sBAAsB;IAuB9B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,UAAU,CAAC,EAAE,UAAU,GAAG,IAAI;IAK7E,mGAAmG;IACnG,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,EAAE,OAAO,UAAO,EAAE,OAAO,GAAE,eAA2B,GAAG,IAAI;IAIjH,sEAAsE;IACtE,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,UAAU,GAAG,IAAI;IAK7E,IAAI,eAAe,IAAI,UAAU,CAEhC;IAED,QAAQ,IAAI,KAAK,GAAG,SAAS;CAG9B"}

package/dist/views/NodeView.js

@@ -38,12 +38,17 @@ export class NodeView extends Container {
     containsPoint(point) {
         return this.grabRect.contains(point.x, point.y);
     }
+    /** Заменяет содержимое ноды: прежнее снимается со сцены и уничтожается, чтобы не копить сироты. */
     setContent(content) {
+        if (this.content !== undefined) {
+            this.removeChild(this.content);
+            this.content.destroy();
+        }
         this.content = content;
         this.addChild(content);
     }
-    applyResolvedTransform(node, transform, visible, managedByLayout) {
-        this.syncContent(node, transform);
+    applyResolvedTransform(node, transform, visible, managedByLayout, profile) {
+        this.syncContent(node, transform, profile);
         const pivotX = (transform.pivotX ?? 0) * transform.width;
         const pivotY = (transform.pivotY ?? 0) * transform.height;
         this.pivot.set(pivotX, pivotY);
@@ -65,16 +70,16 @@ export class NodeView extends Container {
     }
     update(node, profile, parentSize) {
         const resolved = resolveProfileTransform(node, profile);
-        this.applyResolvedTransform(node, resolveAnchoredTransform(resolved.transform, parentSize), resolved.visible, false);
+        this.applyResolvedTransform(node, resolveAnchoredTransform(resolved.transform, parentSize), resolved.visible, false, profile);
     }
     /** Applies a transient editor rectangle without deriving it from content-dependent Pixi bounds. */
-    preview(node, transform, visible = true) {
-        this.applyResolvedTransform(node, transform, visible, false);
+    preview(node, transform, visible = true, profile = "desktop") {
+        this.applyResolvedTransform(node, transform, visible, false, profile);
     }
     /** Applies the rectangle owned by a direct parent's layout solver. */
     updateManaged(node, profile, size) {
         const resolved = resolveProfileTransform(node, profile);
-        this.applyResolvedTransform(node, { ...resolved.transform, x: 0, y: 0, width: size.width, height: size.height }, resolved.visible, true);
+        this.applyResolvedTransform(node, { ...resolved.transform, x: 0, y: 0, width: size.width, height: size.height }, resolved.visible, true, profile);
     }
     get layoutRectangle() {
         return { width: this.layoutWidth, height: this.layoutHeight };

package/dist/views/NodeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"NodeView.js","sourceRoot":"","sources":["../../src/views/NodeView.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"NodeView.js","sourceRoot":"","sources":["../../src/views/NodeView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AAExD,OAAO,EAAE,SAAS,EAAE,SAAS,EAA2B,MAAM,SAAS,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,uBAAuB,EAAmB,MAAM,cAAc,CAAC;AASlG;;;;GAIG;AACH,MAAM,OAAgB,QAAS,SAAQ,SAAS;IACpC,OAAO,CAAa;IAC9B,4FAA4F;IACzE,QAAQ,CAA2C;IACtE,6FAA6F;IAC5E,QAAQ,GAAG,IAAI,SAAS,EAAE,CAAC;IAC5C,yGAAyG;IACjG,WAAW,GAAG,CAAC,CAAC;IAChB,YAAY,GAAG,CAAC,CAAC;IAEzB,YAAY,QAAuC;QACjD,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;IAES,UAAU,CAAC,OAAe;QAClC,OAAO,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAED;;;;;;;;;;;;OAYG;IACH,aAAa,CAAC,KAAgB;QAC5B,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAClD,CAAC;IAED,mGAAmG;IACzF,UAAU,CAAC,OAAkB;QACrC,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;QAAC,CAAC;QAC3F,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACzB,CAAC;IAKO,sBAAsB,CAAC,IAAY,EAAE,SAA8B,EAAE,OAAgB,EAAE,eAAwB,EAAE,OAAwB;QAC/I,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;QAE3C,MAAM,MAAM,GAAG,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC;QACzD,MAAM,MAAM,GAAG,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,SAAS,CAAC,MAAM,CAAC;QAC1D,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC/B,yFAAyF;QACzF,uEAAuE;QACvE,4FAA4F;QAC5F,4FAA4F;QAC5F,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QAClG,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC;QACnC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;QACnD,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC,KAAK,CAAC;QACnC,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,MAAM,CAAC;QACrC,0FAA0F;QAC1F,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC;QACpB,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC;QACpB,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC;QACtC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC;IAC1C,CAAC;IAED,MAAM,CAAC,IAAY,EAAE,OAAwB,EAAE,UAAuB;QACpE,MAAM,QAAQ,GAAG,uBAAuB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACxD,IAAI,CAAC,sBAAsB,CAAC,IAAI,EAAE,wBAAwB,CAAC,QAAQ,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;IAChI,CAAC;IAED,mGAAmG;IACnG,OAAO,CAAC,IAAY,EAAE,SAA8B,EAAE,OAAO,GAAG,IAAI,EAAE,UAA2B,SAAS;QACxG,IAAI,CAAC,sBAAsB,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;IACxE,CAAC;IAED,sEAAsE;IACtE,aAAa,CAAC,IAAY,EAAE,OAAwB,EAAE,IAAgB;QACpE,MAAM,QAAQ,GAAG,uBAAuB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACxD,IAAI,CAAC,sBAAsB,CAAC,IAAI,EAAE,EAAE,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;IACpJ,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC;IAChE,CAAC;IAED,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,YAAY,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAClE,CAAC;CACF"}

package/dist/views/SpineNodeView.d.ts

@@ -1,11 +1,12 @@
 import { type SkeletonData } from "@esotericsoftware/spine-pixi-v8";
-import { type SpineReferenceFrame, type UINode } from "@pixi-ui-editor/schema";
+import { type LayoutProfileId, type SpineReferenceFrame, type UINode } from "@pixi-ui-editor/schema";
 import { type Ticker } from "pixi.js";
 import { NodeView } from "./NodeView.js";
 export declare class SpineNodeView extends NodeView {
     private referenceFrame;
+    private readonly initializeForAuthoring;
     constructor(skeletonData: SkeletonData | undefined, animation: string | undefined, autoplay: boolean, loop: boolean, animationSpeed: number, initializeForAuthoring: boolean, referenceFrame?: SpineReferenceFrame, ticker?: Ticker);
     setReferenceFrame(referenceFrame: SpineReferenceFrame | undefined): void;
-    protected syncContent(node: UINode, transform: UINode["transform"]): void;
+    protected syncContent(node: UINode, transform: UINode["transform"], profile: LayoutProfileId): void;
 }
 //# sourceMappingURL=SpineNodeView.d.ts.map

package/dist/views/SpineNodeView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpineNodeView.d.ts","sourceRoot":"","sources":["../../src/views/SpineNodeView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAY,KAAK,MAAM,EAAE,MAAM,SAAS,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,qBAAa,aAAc,SAAQ,QAAQ;IACzC,OAAO,CAAC,cAAc,CAAkC;gBAE5C,YAAY,EAAE,YAAY,GAAG,SAAS,EAAE,SAAS,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,sBAAsB,EAAE,OAAO,EAAE,cAAc,CAAC,EAAE,mBAAmB,EAAE,MAAM,CAAC,EAAE,MAAM;IAsBnO,iBAAiB,CAAC,cAAc,EAAE,mBAAmB,GAAG,SAAS,GAAG,IAAI;IAIxE,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,GAAG,IAAI;CAgB1E"}
+{"version":3,"file":"SpineNodeView.d.ts","sourceRoot":"","sources":["../../src/views/SpineNodeView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,mBAAmB,EAAE,KAAK,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACrG,OAAO,EAAY,KAAK,MAAM,EAAE,MAAM,SAAS,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,qBAAa,aAAc,SAAQ,QAAQ;IACzC,OAAO,CAAC,cAAc,CAAkC;IACxD,OAAO,CAAC,QAAQ,CAAC,sBAAsB,CAAU;gBAErC,YAAY,EAAE,YAAY,GAAG,SAAS,EAAE,SAAS,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,sBAAsB,EAAE,OAAO,EAAE,cAAc,CAAC,EAAE,mBAAmB,EAAE,MAAM,CAAC,EAAE,MAAM;IAuBnO,iBAAiB,CAAC,cAAc,EAAE,mBAAmB,GAAG,SAAS,GAAG,IAAI;IAIxE,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,eAAe,GAAG,IAAI;CA2BpG"}

package/dist/views/SpineNodeView.js

@@ -1,12 +1,14 @@
 import { Spine } from "@esotericsoftware/spine-pixi-v8";
 import { Graphics } from "pixi.js";
-import { fitSpineToTransform } from "../layout.js";
+import { fitSpineToTransform, resolveSpineSettings } from "../layout.js";
 import { NodeView } from "./NodeView.js";
 export class SpineNodeView extends NodeView {
     referenceFrame;
+    initializeForAuthoring;
     constructor(skeletonData, animation, autoplay, loop, animationSpeed, initializeForAuthoring, referenceFrame, ticker) {
         super();
         this.referenceFrame = referenceFrame;
+        this.initializeForAuthoring = initializeForAuthoring;
         if (skeletonData === undefined) {
             this.setContent(new Graphics());
             return;
@@ -29,11 +31,24 @@ export class SpineNodeView extends NodeView {
     setReferenceFrame(referenceFrame) {
         this.referenceFrame = referenceFrame;
     }
-    syncContent(node, transform) {
+    syncContent(node, transform, profile) {
         if (this.content instanceof Spine) {
-            const track = this.content.state.tracks[0];
-            if (node.type === "spine" && track !== null && track !== undefined)
-                track.timeScale = node.animationSpeed ?? 1;
+            if (node.type === "spine") {
+                const settings = resolveSpineSettings(node, profile);
+                const track = this.content.state.tracks[0];
+                const animationChanged = track?.animation?.name !== settings.animation;
+                const loopChanged = track !== null && track !== undefined && track.loop !== settings.loop;
+                if (settings.animation === undefined || (!settings.autoplay && !this.initializeForAuthoring)) {
+                    if (track !== null && track !== undefined)
+                        this.content.state.clearTrack(0);
+                }
+                else if ((animationChanged || loopChanged) && this.content.skeleton.data.findAnimation(settings.animation) !== null) {
+                    this.content.state.setAnimation(0, settings.animation, settings.loop).timeScale = settings.animationSpeed;
+                }
+                else if (track !== null && track !== undefined) {
+                    track.timeScale = settings.animationSpeed;
+                }
+            }
             const fit = fitSpineToTransform(this.content.skeleton.data, transform, this.referenceFrame);
             if (fit !== undefined) {
                 this.content.scale.set(fit.scaleX, fit.scaleY);

package/dist/views/SpineNodeView.js.map

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

package/dist/views/basic.d.ts

@@ -1,9 +1,15 @@
-import { type UINode } from "@pixi-ui-editor/schema";
+import { type LayoutPadding, type LayoutProfileId, type UINode } from "@pixi-ui-editor/schema";
 import { Container, Texture } from "pixi.js";
 import { NodeView } from "./NodeView.js";
 export declare class ContainerNodeView extends NodeView {
     protected syncContent(): void;
 }
+/** Clips every authored child to the node's resolved rectangular layout area. */
+export declare class MaskNodeView extends NodeView {
+    private readonly maskShape;
+    constructor();
+    protected syncContent(node: UINode, transform: UINode["transform"]): void;
+}
 /** Layout groups may optionally paint one image behind their managed children. No asset means no content/view at all. */
 export declare class LayoutGroupNodeView extends NodeView {
     private readonly layoutContent;
@@ -13,14 +19,55 @@ export declare class LayoutGroupNodeView extends NodeView {
     addLayoutChild<T extends Container[]>(...children: T): T[0];
     protected syncContent(node: UINode, transform: UINode["transform"]): void;
 }
+/**
+ * Ноде-картинке источник не обязателен: без `assetId` она рисует белый прямоугольник своего размера,
+ * а серо-синяя заглушка остаётся признаком того, что назначенный ассет не загрузился.
+ *
+ * `nineSlice` переключает контент на `NineSliceSprite`: углы источника остаются нерастянутыми, а
+ * растягиваются только края/середина — то же 9-slice, что уже использует Slider/ProgressBar через
+ * `@pixi/ui`'s `fillPaddings`, только здесь это применяется напрямую к содержимому Image-ноды.
+ */
 export declare class ImageNodeView extends NodeView {
-    constructor(assetId: string, textures: ReadonlyMap<string, Texture> | undefined);
+    constructor(assetId: string | undefined, textures: ReadonlyMap<string, Texture> | undefined, nineSlice?: LayoutPadding);
+    private static createSpriteContent;
     protected syncContent(node: UINode, transform: UINode["transform"]): void;
+    /**
+     * Editor-only live preview of border edits while dragging the canvas nine-slice gizmo; the
+     * document is only written once, on drag release. A no-op without a `NineSliceSprite` content —
+     * e.g. mid-drag right after the asset was cleared, before the next document sync catches up.
+     */
+    previewNineSlice(nineSlice: LayoutPadding): void;
 }
 export declare class TextNodeView extends NodeView {
     private readonly fonts?;
+    /**
+     * Строка, применённая локализацией поверх авторской. Она переживает `updateNodeView`: без неё
+     * любая синхронизация документа возвращала бы fallback `node.text` вместо текущего перевода.
+     */
+    private localizedText?;
+    /** Последний применённый прямоугольник и стиль — их же переиспользует инкрементальный `setText`. */
+    private lastTransform?;
+    private lastStyle?;
     constructor(text: string, fonts?: ReadonlyMap<string, string> | undefined);
-    protected syncContent(node: UINode, transform: UINode["transform"]): void;
+    protected syncContent(node: UINode, transform: UINode["transform"], profile: LayoutProfileId): void;
+    /**
+     * Инкрементальная смена строки: та же строка не делает работы вообще, новая — только переизмеряет
+     * и выравнивает текст в текущем authored rectangle. `TextStyle` не пересоздаётся, а сам view
+     * сохраняет identity, поэтому смена локали не трогает ни сцену, ни GPU-ресурсы стиля.
+     */
+    setText(text: string): void;
+    /** `undefined` возвращает ноду к авторской строке при следующей синхронизации документа. */
+    setLocalizedText(text: string | undefined): void;
+    /**
+     * Вылезает ли фактически отрисованный текст за логический прямоугольник ноды.
+     *
+     * Меряется уже готовый `Text`, а не длина строки: перенос по словам, шрифт и обводка известны
+     * только рендеру. Без `wordWrap` переполнение возможно по ширине, с ним — по высоте, потому что
+     * перенос сам удерживает ширину в пределах `wordWrapWidth`. Диагностика transient: она ничего не
+     * пишет ни в документ, ни в view.
+     */
+    measureOverflow(): boolean;
+    private align;
 }
 /**
  * Содержимое инстанса приходит обычными детьми из общего резолвера иерархии. Собственный контент

package/dist/views/basic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"basic.d.ts","sourceRoot":"","sources":["../../src/views/basic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,SAAS,EAA0B,OAAO,EAAE,MAAM,SAAS,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,qBAAa,iBAAkB,SAAQ,QAAQ;IAC7C,SAAS,CAAC,WAAW,IAAI,IAAI;CAC9B;AAED,yHAAyH;AACzH,qBAAa,mBAAoB,SAAQ,QAAQ;IAC/C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAmB;IACjD,OAAO,CAAC,UAAU,CAAC,CAAS;gBAEhB,QAAQ,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS;IAO9D,IAAI,YAAY,IAAI,SAAS,CAA+B;IAE5D,cAAc,CAAC,CAAC,SAAS,SAAS,EAAE,EAAE,GAAG,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAI3D,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,GAAG,IAAI;CAW1E;AAED,qBAAa,aAAc,SAAQ,QAAQ;gBAC7B,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS;IAM/E,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,GAAG,IAAI;CAQ1E;AAED,qBAAa,YAAa,SAAQ,QAAQ;IACd,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC;gBAArC,IAAI,EAAE,MAAM,EAAmB,KAAK,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,YAAA;IAK9E,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,GAAG,IAAI;CAY1E;AAED;;;GAGG;AACH,qBAAa,sBAAuB,SAAQ,QAAQ;gBACtC,QAAQ,EAAE,OAAO;IAK7B,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,GAAG,IAAI;CAG3E"}
+{"version":3,"file":"basic.d.ts","sourceRoot":"","sources":["../../src/views/basic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAA4B,KAAK,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACzH,OAAO,EAAE,SAAS,EAA2C,OAAO,EAAE,MAAM,SAAS,CAAC;AACtF,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,qBAAa,iBAAkB,SAAQ,QAAQ;IAC7C,SAAS,CAAC,WAAW,IAAI,IAAI;CAC9B;AAED,iFAAiF;AACjF,qBAAa,YAAa,SAAQ,QAAQ;IACxC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAkB;;IAU5C,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,GAAG,IAAI;CAI1E;AAED,yHAAyH;AACzH,qBAAa,mBAAoB,SAAQ,QAAQ;IAC/C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAmB;IACjD,OAAO,CAAC,UAAU,CAAC,CAAS;gBAEhB,QAAQ,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS;IAO9D,IAAI,YAAY,IAAI,SAAS,CAA+B;IAE5D,cAAc,CAAC,CAAC,SAAS,SAAS,EAAE,EAAE,GAAG,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAI3D,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,GAAG,IAAI;CAW1E;AAED;;;;;;;GAOG;AACH,qBAAa,aAAc,SAAQ,QAAQ;gBAC7B,OAAO,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,aAAa;IAMtH,OAAO,CAAC,MAAM,CAAC,mBAAmB;IAOlC,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,GAAG,IAAI;IAgCzE;;;;OAIG;IACH,gBAAgB,CAAC,SAAS,EAAE,aAAa,GAAG,IAAI;CAOjD;AAED,qBAAa,YAAa,SAAQ,QAAQ;IAUd,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC;IATjD;;;OAGG;IACH,OAAO,CAAC,aAAa,CAAC,CAAS;IAC/B,oGAAoG;IACpG,OAAO,CAAC,aAAa,CAAC,CAAsB;IAC5C,OAAO,CAAC,SAAS,CAAC,CAAsB;gBAE5B,IAAI,EAAE,MAAM,EAAmB,KAAK,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,YAAA;IAK9E,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,eAAe,GAAG,IAAI;IAYnG;;;;OAIG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAM3B,4FAA4F;IAC5F,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI;IAKhD;;;;;;;OAOG;IACH,eAAe,IAAI,OAAO;IAU1B,OAAO,CAAC,KAAK;CAUd;AAED;;;GAGG;AACH,qBAAa,sBAAuB,SAAQ,QAAQ;gBACtC,QAAQ,EAAE,OAAO;IAK7B,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,GAAG,IAAI;CAG3E"}

package/dist/views/basic.js

@@ -1,8 +1,25 @@
-import { Container, Graphics, Sprite, Text } from "pixi.js";
+import { Container, Graphics, NineSliceSprite, Sprite, Text } from "pixi.js";
 import { NodeView } from "./NodeView.js";
+import { resolveTextStyle } from "../layout.js";
 export class ContainerNodeView extends NodeView {
     syncContent() { }
 }
+/** Clips every authored child to the node's resolved rectangular layout area. */
+export class MaskNodeView extends NodeView {
+    maskShape = new Graphics();
+    constructor() {
+        super();
+        this.addChild(this.maskShape);
+        // A Graphics mask keeps the shape GPU-native and avoids the offscreen texture pass of alpha masks.
+        // Pixi's regular mask contract also preserves correct clipping through rotation and transformed parents.
+        this.mask = this.maskShape;
+    }
+    syncContent(node, transform) {
+        if (node.type !== "mask")
+            return;
+        this.maskShape.clear().rect(0, 0, transform.width, transform.height).fill(0xffffff);
+    }
+}
 /** Layout groups may optionally paint one image behind their managed children. No asset means no content/view at all. */
 export class LayoutGroupNodeView extends NodeView {
     layoutContent = new Container();
@@ -38,40 +55,151 @@ export class LayoutGroupNodeView extends NodeView {
         this.background.setSize(transform.width, transform.height);
     }
 }
+/**
+ * Ноде-картинке источник не обязателен: без `assetId` она рисует белый прямоугольник своего размера,
+ * а серо-синяя заглушка остаётся признаком того, что назначенный ассет не загрузился.
+ *
+ * `nineSlice` переключает контент на `NineSliceSprite`: углы источника остаются нерастянутыми, а
+ * растягиваются только края/середина — то же 9-slice, что уже использует Slider/ProgressBar через
+ * `@pixi/ui`'s `fillPaddings`, только здесь это применяется напрямую к содержимому Image-ноды.
+ */
 export class ImageNodeView extends NodeView {
-    constructor(assetId, textures) {
+    constructor(assetId, textures, nineSlice) {
         super(textures);
-        const texture = this.textureFor(assetId);
-        this.setContent(texture !== undefined ? new Sprite(texture) : new Graphics());
+        const texture = assetId === undefined ? undefined : this.textureFor(assetId);
+        this.setContent(ImageNodeView.createSpriteContent(texture, nineSlice));
+    }
+    static createSpriteContent(texture, nineSlice) {
+        if (texture === undefined)
+            return new Graphics();
+        return nineSlice === undefined
+            ? new Sprite(texture)
+            : new NineSliceSprite({ texture, leftWidth: nineSlice.left, topHeight: nineSlice.top, rightWidth: nineSlice.right, bottomHeight: nineSlice.bottom });
     }
     syncContent(node, transform) {
-        const texture = node.type === "image" ? this.textureFor(node.assetId) : undefined;
-        // Keep the Sprite and its layout rectangle stable when its image asset changes.
-        if (this.content instanceof Sprite && texture !== undefined && this.content.texture !== texture)
-            this.content.texture = texture;
-        if (this.content instanceof Sprite)
-            this.content.setSize(transform.width, transform.height);
-        else if (this.content instanceof Graphics)
-            this.content.clear().rect(0, 0, transform.width, transform.height).fill(0x4a5568).stroke({ width: 1, color: 0x94a3b8 });
-        if (this.content !== undefined)
-            this.content.alpha = node.type === "image" ? node.opacity ?? 1 : 1;
+        if (node.type !== "image")
+            return;
+        const texture = node.assetId === undefined ? undefined : this.textureFor(node.assetId);
+        const nineSlice = node.nineSlice;
+        // Sprite ↔ NineSliceSprite ↔ Graphics меняются местами прямо здесь: структурный ключ сцены не
+        // включает assetId/nineSlice, поэтому переключение (в том числе на None) не пересобирает сцену.
+        if (texture !== undefined && nineSlice !== undefined) {
+            if (!(this.content instanceof NineSliceSprite))
+                this.setContent(ImageNodeView.createSpriteContent(texture, nineSlice));
+            const sprite = this.content;
+            // Keep the NineSliceSprite and its layout rectangle stable when its image asset/borders change.
+            if (sprite.texture !== texture)
+                sprite.texture = texture;
+            sprite.leftWidth = nineSlice.left;
+            sprite.topHeight = nineSlice.top;
+            sprite.rightWidth = nineSlice.right;
+            sprite.bottomHeight = nineSlice.bottom;
+            sprite.setSize(transform.width, transform.height);
+        }
+        else if (texture !== undefined) {
+            // `NineSliceSprite` is a Sprite sibling, not a subclass, so this rebuilds when switching back from it.
+            if (!(this.content instanceof Sprite))
+                this.setContent(new Sprite(texture));
+            const sprite = this.content;
+            // Keep the Sprite and its layout rectangle stable when its image asset changes.
+            if (sprite.texture !== texture)
+                sprite.texture = texture;
+            sprite.setSize(transform.width, transform.height);
+        }
+        else {
+            if (!(this.content instanceof Graphics))
+                this.setContent(new Graphics());
+            const graphics = this.content.clear().rect(0, 0, transform.width, transform.height);
+            if (node.assetId === undefined)
+                graphics.fill(0xffffff);
+            else
+                graphics.fill(0x4a5568).stroke({ width: 1, color: 0x94a3b8 });
+        }
+        this.content.alpha = node.opacity ?? 1;
+    }
+    /**
+     * Editor-only live preview of border edits while dragging the canvas nine-slice gizmo; the
+     * document is only written once, on drag release. A no-op without a `NineSliceSprite` content —
+     * e.g. mid-drag right after the asset was cleared, before the next document sync catches up.
+     */
+    previewNineSlice(nineSlice) {
+        if (!(this.content instanceof NineSliceSprite))
+            return;
+        this.content.leftWidth = nineSlice.left;
+        this.content.topHeight = nineSlice.top;
+        this.content.rightWidth = nineSlice.right;
+        this.content.bottomHeight = nineSlice.bottom;
     }
 }
 export class TextNodeView extends NodeView {
     fonts;
+    /**
+     * Строка, применённая локализацией поверх авторской. Она переживает `updateNodeView`: без неё
+     * любая синхронизация документа возвращала бы fallback `node.text` вместо текущего перевода.
+     */
+    localizedText;
+    /** Последний применённый прямоугольник и стиль — их же переиспользует инкрементальный `setText`. */
+    lastTransform;
+    lastStyle;
     constructor(text, fonts) {
         super();
         this.fonts = fonts;
         this.setContent(new Text({ text, style: { fontFamily: "Arial", fontSize: 24, fill: 0xffffff } }));
     }
-    syncContent(node, transform) {
+    syncContent(node, transform, profile) {
         if (node.type !== "text" || !(this.content instanceof Text))
             return;
-        this.content.text = node.text;
-        const style = node.style;
+        const text = this.localizedText ?? node.text;
+        if (this.content.text !== text)
+            this.content.text = text;
+        const style = resolveTextStyle(node, profile);
+        this.lastTransform = transform;
+        this.lastStyle = style;
         if (style === undefined)
             return;
         this.content.style = { fontFamily: style.fontAssetId === undefined ? style.fontFamily : this.fonts?.get(style.fontAssetId) ?? style.fontFamily, fontSize: style.fontSize, fontWeight: style.fontWeight, fontStyle: style.fontStyle, fill: style.fill, align: style.align, wordWrap: style.wordWrap, breakWords: style.breakWords, wordWrapWidth: transform.width, lineHeight: style.lineHeight, letterSpacing: style.letterSpacing, stroke: style.stroke === undefined ? undefined : { color: style.stroke.color, width: style.stroke.width } };
+        this.align();
+    }
+    /**
+     * Инкрементальная смена строки: та же строка не делает работы вообще, новая — только переизмеряет
+     * и выравнивает текст в текущем authored rectangle. `TextStyle` не пересоздаётся, а сам view
+     * сохраняет identity, поэтому смена локали не трогает ни сцену, ни GPU-ресурсы стиля.
+     */
+    setText(text) {
+        if (!(this.content instanceof Text) || this.content.text === text)
+            return;
+        this.content.text = text;
+        this.align();
+    }
+    /** `undefined` возвращает ноду к авторской строке при следующей синхронизации документа. */
+    setLocalizedText(text) {
+        this.localizedText = text;
+        if (text !== undefined)
+            this.setText(text);
+    }
+    /**
+     * Вылезает ли фактически отрисованный текст за логический прямоугольник ноды.
+     *
+     * Меряется уже готовый `Text`, а не длина строки: перенос по словам, шрифт и обводка известны
+     * только рендеру. Без `wordWrap` переполнение возможно по ширине, с ним — по высоте, потому что
+     * перенос сам удерживает ширину в пределах `wordWrapWidth`. Диагностика transient: она ничего не
+     * пишет ни в документ, ни в view.
+     */
+    measureOverflow() {
+        const transform = this.lastTransform;
+        if (!(this.content instanceof Text) || transform === undefined || typeof globalThis.document === "undefined")
+            return false;
+        const bounds = this.content.getLocalBounds();
+        const tolerance = 0.5;
+        return this.lastStyle?.wordWrap === true
+            ? bounds.height > transform.height + tolerance
+            : bounds.width > transform.width + tolerance || bounds.height > transform.height + tolerance;
+    }
+    align() {
+        const transform = this.lastTransform;
+        const style = this.lastStyle;
+        if (!(this.content instanceof Text) || transform === undefined || style === undefined)
+            return;
         // Headless loaders and schema tests intentionally have no browser canvas. In that boundary
         // text still owns its authored rectangle; browser rendering keeps the precise measurement.
         const bounds = typeof globalThis.document === "undefined" ? { x: 0, y: 0, width: 0, height: 0 } : this.content.getLocalBounds();