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

package/README.md

@@ -17,12 +17,12 @@ import { loadPrefabView } from "@pixi-ui-editor/runtime-pixi";
 import { materializedPrefabNodeId } from "@pixi-ui-editor/schema";
 
 const configured = scene.nodes.find(
-  (node) => node.type === "prefab-instance" && node.binding === "rewardCardTemplate",
+  (node) => node.type === "prefab-instance" && node.bindingKey === "rewardCardTemplate",
 );
 if (configured?.type !== "prefab-instance") throw new Error("Configured preset instance is missing.");
 const labelDefinitionNodeId = document.prefabs
   .find((prefab) => prefab.id === configured.prefabId)!
-  .nodes.find((node) => node.binding === "label")!.id;
+  .nodes.find((node) => node.bindingKey === "label")!.id;
 
 const mounted = await loadPrefabView(
   document,
@@ -44,3 +44,82 @@ const labelView = mounted.nodeViews.get(
 
 Omit the last argument to instantiate the prefab definition defaults. `nodeViews` contains the outer
 instance plus deterministic instance-scoped IDs for inherited children and stable IDs for local children.
+
+The lookup above is two-step on purpose, and it is the contract: a `bindingKey` is unique within the scope
+it resolves against, not across the whole document. A key on a scene node — including a preset instance
+itself — is unique within that scene. A key inside a preset definition is unique within that definition and
+resolves against one instance, which is what makes it usable for presets you spawn many times: a hundred
+symbol views can each carry `"spine"` without colliding. So you find the instance by its scene-level key,
+then find the node inside it by its definition-level key.
+
+## Reuse parsed assets across loads
+
+`loadPrefabView` and `loadSceneView` fetch and parse every asset a scene references. Spawning presets one
+by one — a symbol view per reel stop, a card per deal — repeats that work for each call: the skeleton JSON
+is re-parsed, the atlas is rebuilt, and every texture becomes a separate GPU upload of the same file.
+
+Pass an `assetCache` you own to share the parsed results. Its lifetime is yours: keep one per scene session
+and drop it with the scene.
+
+```ts
+import { createSceneAssetCache, loadPrefabView } from "@pixi-ui-editor/runtime-pixi";
+
+const assetCache = createSceneAssetCache();
+
+const mounted = await loadPrefabView(document, prefabId, "desktop", resolveFileUrl, {
+  interaction: "runtime",
+  assetCache,
+});
+```
+
+Each map is keyed by the asset file's URI, so the same file assigned to different assets loads once. Without
+`assetCache` every call starts from empty maps, which is fine for a single scene load and wasteful for
+anything spawned repeatedly. The lower-level `loadSceneTextures` / `loadSceneSpines` / `loadSceneFonts` /
+`loadSceneSounds` take the individual maps directly if you drive loading yourself.
+
+## Scene viewport
+
+`buildSceneView` and `loadSceneView` return a runtime-owned `SceneViewport` as `root`. With
+`interaction: "runtime"`, that object clips content to the authored reference viewport and owns the
+only contain-fit calculation used by Preview and consuming applications:
+
+```ts
+const { root } = await loadSceneView(document, sceneId, profile, resolveFileUrl, {
+  interaction: "runtime",
+});
+
+app.stage.addChild(root);
+root.resize({ width: app.screen.width, height: app.screen.height });
+```
+
+Call `root.resize(...)` after the Pixi renderer changes size. It applies one uniform scale and centers
+the unchanged authored viewport; letterbox and pillarbox space never reveal off-viewport content.
+Profile selection remains shared through `resolveProfileForViewport`, and crossing its breakpoint
+requires building the scene again with the newly selected profile. Hosts must not reproduce the fit
+formula or add their own viewport mask. Spawned prefab views stay unclipped because they are scene
+content rather than player-screen boundaries.
+
+## Localization
+
+`buildSceneView`, `loadSceneView`, `buildPrefabView` and `loadPrefabView` return a `SceneLocalization`
+next to `root` and `nodeViews`. A `Text` node that carries a `textKey` already renders its base-locale
+translation without any extra call; a document without keys behaves exactly as before.
+
+```ts
+const { root, localization } = await loadSceneView(document, sceneId, "desktop", resolveFileUrl, {
+  interaction: "runtime",
+});
+
+localization.setLocale("pt-BR");
+// Values ship as a flat Record<string, string> in locales/<locale>.json, so any dictionary works.
+localization.setTranslate((key, { locale }) => dictionaries[locale]?.[key]);
+// `{amount}` inside a translation is a runtime parameter, not a second key.
+localization.setParams({ amount: 48 });
+// An immutable editor/game store hands over a new document copy without rebuilding the scene.
+localization.syncDocument(nextDocument);
+```
+
+Resolution order is `translate` → requested locale → base locale → `Text.text` → the key itself; a
+`translate` returning `undefined` keeps the chain going. Every call mutates the existing `TextNodeView`
+objects: the scene root, `NodeView` identity and live control state are preserved, and re-rendering the
+same string does no work at all.

package/dist/SceneViewport.d.ts

@@ -0,0 +1,17 @@
+import { Container } from "pixi.js";
+import { type FittedViewport, type LayoutSize } from "./layout.js";
+/**
+ * The single host boundary for a built scene.
+ *
+ * Runtime scenes are clipped to the authored reference viewport and can only be fitted with one
+ * uniform scale. Authoring scenes use the same wrapper without clipping so the editor can expose
+ * off-viewport content while arranging it.
+ */
+export declare class SceneViewport extends Container {
+    readonly referenceViewport: LayoutSize;
+    readonly content: Container;
+    constructor(content: Container, referenceViewport: LayoutSize, clip: boolean);
+    /** Uniformly contains and centers this authored viewport inside the physical host. */
+    resize(host: LayoutSize): FittedViewport;
+}
+//# sourceMappingURL=SceneViewport.d.ts.map

package/dist/SceneViewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneViewport.d.ts","sourceRoot":"","sources":["../src/SceneViewport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAqB,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAEtF;;;;;;GAMG;AACH,qBAAa,aAAc,SAAQ,SAAS;IAC1C,QAAQ,CAAC,iBAAiB,EAAE,UAAU,CAAC;IACvC,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;gBAEhB,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO;IAiB5E,sFAAsF;IACtF,MAAM,CAAC,IAAI,EAAE,UAAU,GAAG,cAAc;CAMzC"}

package/dist/SceneViewport.js

@@ -0,0 +1,35 @@
+import { Container, Graphics } from "pixi.js";
+import { fitViewportToHost } from "./layout.js";
+/**
+ * The single host boundary for a built scene.
+ *
+ * Runtime scenes are clipped to the authored reference viewport and can only be fitted with one
+ * uniform scale. Authoring scenes use the same wrapper without clipping so the editor can expose
+ * off-viewport content while arranging it.
+ */
+export class SceneViewport extends Container {
+    referenceViewport;
+    content;
+    constructor(content, referenceViewport, clip) {
+        super();
+        this.content = content;
+        this.referenceViewport = { ...referenceViewport };
+        if (clip) {
+            const viewportMask = new Graphics()
+                .rect(0, 0, referenceViewport.width, referenceViewport.height)
+                .fill(0xffffff);
+            viewportMask.eventMode = "none";
+            content.mask = viewportMask;
+            this.addChild(viewportMask);
+        }
+        this.addChild(content);
+    }
+    /** Uniformly contains and centers this authored viewport inside the physical host. */
+    resize(host) {
+        const fitted = fitViewportToHost(this.referenceViewport, host);
+        this.scale.set(fitted.scale);
+        this.position.set(fitted.x, fitted.y);
+        return fitted;
+    }
+}
+//# sourceMappingURL=SceneViewport.js.map

package/dist/SceneViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneViewport.js","sourceRoot":"","sources":["../src/SceneViewport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAwC,MAAM,aAAa,CAAC;AAEtF;;;;;;GAMG;AACH,MAAM,OAAO,aAAc,SAAQ,SAAS;IACjC,iBAAiB,CAAa;IAC9B,OAAO,CAAY;IAE5B,YAAY,OAAkB,EAAE,iBAA6B,EAAE,IAAa;QAC1E,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,iBAAiB,GAAG,EAAE,GAAG,iBAAiB,EAAE,CAAC;QAElD,IAAI,IAAI,EAAE,CAAC;YACT,MAAM,YAAY,GAAG,IAAI,QAAQ,EAAE;iBAChC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC;iBAC7D,IAAI,CAAC,QAAQ,CAAC,CAAC;YAClB,YAAY,CAAC,SAAS,GAAG,MAAM,CAAC;YAChC,OAAO,CAAC,IAAI,GAAG,YAAY,CAAC;YAC5B,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;QAC9B,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACzB,CAAC;IAED,sFAAsF;IACtF,MAAM,CAAC,IAAgB;QACrB,MAAM,MAAM,GAAG,iBAAiB,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;QAC/D,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;QACtC,OAAO,MAAM,CAAC;IAChB,CAAC;CACF"}

package/dist/assets/cache.d.ts

@@ -0,0 +1,27 @@
+import type { SkeletonData } from "@esotericsoftware/spine-pixi-v8";
+import type { Sound } from "@pixi/sound";
+import type { Spritesheet, Texture } from "pixi.js";
+/**
+ * Разобранные ассеты, переиспользуемые между загрузками сцен и пресетов. Каждая карта ключуется URI
+ * файла ассета, а не его id: один и тот же файл, назначенный разным ассетам, скачивается и парсится один раз.
+ *
+ * Владелец кэша — вызывающая сторона: время жизни задаёт она (сессия сцены в игре, открытый проект в
+ * редакторе), поэтому глобального состояния и скрытого сброса здесь нет.
+ */
+export interface SceneAssetCache {
+    textures: Map<string, Texture>;
+    spritesheets: Map<string, Spritesheet>;
+    spines: Map<string, SkeletonData>;
+    /** Обещание, а не готовое имя family: параллельные загрузки одного файла должны ждать один и тот же `FontFace.load()`. */
+    fonts: Map<string, Promise<string | undefined>>;
+    sounds: Map<string, Sound>;
+}
+/**
+ * Шрифты кэшируются глобально, потому что `loadSceneFonts` регистрирует `FontFace` в общем для документа
+ * `document.fonts`: повторная загрузка того же файла добавила бы туда дубликат, независимо от того, чей
+ * это кэш. Остальные ассеты живут в GPU-памяти вызывающей стороны и такого общего реестра не имеют.
+ */
+export declare const sharedFontCache: Map<string, Promise<string | undefined>>;
+/** Создаёт пустой кэш ассетов. Шрифты по умолчанию разделяются со всеми остальными кэшами — см. `sharedFontCache`. */
+export declare function createSceneAssetCache(): SceneAssetCache;
+//# sourceMappingURL=cache.d.ts.map

package/dist/assets/cache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cache.d.ts","sourceRoot":"","sources":["../../src/assets/cache.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACvC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IAClC,0HAA0H;IAC1H,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;IAChD,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;CAC5B;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,0CAAiD,CAAC;AAE9E,sHAAsH;AACtH,wBAAgB,qBAAqB,IAAI,eAAe,CAQvD"}

package/dist/assets/cache.js

@@ -0,0 +1,17 @@
+/**
+ * Шрифты кэшируются глобально, потому что `loadSceneFonts` регистрирует `FontFace` в общем для документа
+ * `document.fonts`: повторная загрузка того же файла добавила бы туда дубликат, независимо от того, чей
+ * это кэш. Остальные ассеты живут в GPU-памяти вызывающей стороны и такого общего реестра не имеют.
+ */
+export const sharedFontCache = new Map();
+/** Создаёт пустой кэш ассетов. Шрифты по умолчанию разделяются со всеми остальными кэшами — см. `sharedFontCache`. */
+export function createSceneAssetCache() {
+    return {
+        textures: new Map(),
+        spritesheets: new Map(),
+        spines: new Map(),
+        fonts: sharedFontCache,
+        sounds: new Map(),
+    };
+}
+//# sourceMappingURL=cache.js.map

package/dist/assets/cache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cache.js","sourceRoot":"","sources":["../../src/assets/cache.ts"],"names":[],"mappings":"AAoBA;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,GAAG,EAAuC,CAAC;AAE9E,sHAAsH;AACtH,MAAM,UAAU,qBAAqB;IACnC,OAAO;QACL,QAAQ,EAAE,IAAI,GAAG,EAAE;QACnB,YAAY,EAAE,IAAI,GAAG,EAAE;QACvB,MAAM,EAAE,IAAI,GAAG,EAAE;QACjB,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,IAAI,GAAG,EAAE;KAClB,CAAC;AACJ,CAAC"}

package/dist/assets/fonts.d.ts

@@ -1,5 +1,5 @@
 import type { ProjectDocument } from "@pixi-ui-editor/schema";
 import type { FileUrlResolver } from "./textures.js";
 /** Loads scene fonts before views are built. A load failure is a warning and keeps system fallback usable. */
-export declare function loadSceneFonts(document: ProjectDocument, sceneId: string, resolveFileUrl: FileUrlResolver): Promise<Map<string, string>>;
+export declare function loadSceneFonts(document: ProjectDocument, sceneId: string, resolveFileUrl: FileUrlResolver, cache?: Map<string, Promise<string | undefined>>): Promise<Map<string, string>>;
 //# sourceMappingURL=fonts.d.ts.map

package/dist/assets/fonts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../src/assets/fonts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAS,eAAe,EAAU,MAAM,wBAAwB,CAAC;AAC7E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAYrD,8GAA8G;AAC9G,wBAAsB,cAAc,CAAC,QAAQ,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,eAAe,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAsB9I"}
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../src/assets/fonts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAS,eAAe,EAAU,MAAM,wBAAwB,CAAC;AAC7E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAYrD,8GAA8G;AAC9G,wBAAsB,cAAc,CAClC,QAAQ,EAAE,eAAe,EACzB,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,eAAe,EAC/B,KAAK,GAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAAmB,GAChE,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAsB9B"}

package/dist/assets/fonts.js

@@ -1,5 +1,5 @@
+import { sharedFontCache } from "./cache.js";
 import { collectRenderedNodes } from "../scene.js";
-const cache = new Map();
 const keyOf = (asset) => `${asset.source.uri}#${asset.source.version ?? ""}`;
 const fromNodes = (nodes) => nodes.flatMap((node) => {
     if (node.type === "text" && node.style?.fontAssetId)
@@ -11,7 +11,7 @@ const fromNodes = (nodes) => nodes.flatMap((node) => {
     return [];
 });
 /** Loads scene fonts before views are built. A load failure is a warning and keeps system fallback usable. */
-export async function loadSceneFonts(document, sceneId, resolveFileUrl) {
+export async function loadSceneFonts(document, sceneId, resolveFileUrl, cache = sharedFontCache) {
     const scene = document.scenes.find((item) => item.id === sceneId);
     if (scene === undefined)
         throw new Error(`Scene '${sceneId}' does not exist in the project document.`);

package/dist/assets/fonts.js.map

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

package/dist/controls.d.ts

@@ -1,5 +1,5 @@
 import { type SkeletonData } from "@esotericsoftware/spine-pixi-v8";
-import { type ButtonStateKey } from "@pixi-ui-editor/schema";
+import { type ButtonStateKey, type LayoutPadding } from "@pixi-ui-editor/schema";
 import { Container } from "pixi.js";
 /** Reads the current 1-based animation frame for an editor Spine node. */
 export declare function getSpineViewPlayback(view: Container, skeletonData: SkeletonData, animation: string): {
@@ -10,6 +10,10 @@ export declare function getSpineViewPlayback(view: Container, skeletonData: Skel
 export declare function setSpineViewFrame(view: Container, frame: number, skeletonData: SkeletonData, animation: string): void;
 /** Forces an editor-only button state; the node's serialized `enabled` and states stay untouched. */
 export declare function setButtonViewState(view: Container, state: ButtonStateKey): void;
+/** Forces an editor-only checkbox checked state; the node's serialized `defaultChecked` stays untouched. */
+export declare function setCheckboxViewChecked(view: Container, checked: boolean): void;
+/** Live-previews nine-slice border edits while dragging the canvas gizmo; commits only on release. */
+export declare function previewNineSlice(view: Container, nineSlice: LayoutPadding): void;
 /** Applies an editor-only slider preview value without touching the document. */
 export declare function setSliderViewValue(view: Container, value: number): void;
 /** Applies an editor-only progress preview without touching the document. */

package/dist/controls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../src/controls.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAS,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAUpC,0EAA0E;AAC1E,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CASnJ;AAED,kHAAkH;AAClH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CASrH;AAED,qGAAqG;AACrG,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,GAAG,IAAI,CAE/E;AAED,iFAAiF;AACjF,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAEvE;AAED,6EAA6E;AAC7E,wBAAgB,0BAA0B,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAElF;AAED,+FAA+F;AAC/F,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAG7E"}
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../src/controls.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAS,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAYpC,0EAA0E;AAC1E,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CASnJ;AAED,kHAAkH;AAClH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CASrH;AAED,qGAAqG;AACrG,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,GAAG,IAAI,CAE/E;AAED,4GAA4G;AAC5G,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAE9E;AAED,sGAAsG;AACtG,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,GAAG,IAAI,CAEhF;AAED,iFAAiF;AACjF,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAEvE;AAED,6EAA6E;AAC7E,wBAAgB,0BAA0B,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAElF;AAED,+FAA+F;AAC/F,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAG7E"}

package/dist/controls.js

@@ -1,5 +1,7 @@
 import { Spine } from "@esotericsoftware/spine-pixi-v8";
 import { ButtonNodeView } from "./views/ButtonNodeView.js";
+import { CheckboxNodeView } from "./views/CheckboxNodeView.js";
+import { ImageNodeView } from "./views/basic.js";
 import { NodeView } from "./views/NodeView.js";
 import { ProgressBarNodeView, SliderNodeView } from "./views/ValueControlNodeViews.js";
 function findSpineChild(view) {
@@ -36,6 +38,16 @@ export function setButtonViewState(view, state) {
     if (view instanceof ButtonNodeView)
         view.setState(state);
 }
+/** Forces an editor-only checkbox checked state; the node's serialized `defaultChecked` stays untouched. */
+export function setCheckboxViewChecked(view, checked) {
+    if (view instanceof CheckboxNodeView)
+        view.forceCheck(checked);
+}
+/** Live-previews nine-slice border edits while dragging the canvas gizmo; commits only on release. */
+export function previewNineSlice(view, nineSlice) {
+    if (view instanceof ImageNodeView || view instanceof ButtonNodeView)
+        view.previewNineSlice(nineSlice);
+}
 /** Applies an editor-only slider preview value without touching the document. */
 export function setSliderViewValue(view, value) {
     if (view instanceof SliderNodeView)

package/dist/controls.js.map

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

package/dist/index.d.ts

@@ -2,10 +2,12 @@ export type { SkeletonData } from "@esotericsoftware/spine-pixi-v8";
 export type { Sound } from "@pixi/sound";
 export * from "./document.js";
 export * from "./layout.js";
+export { SceneViewport } from "./SceneViewport.js";
 export * from "./layoutGroups.js";
 export * from "./scrollView.js";
 export * from "./views/NodeView.js";
 export { ButtonNodeView } from "./views/ButtonNodeView.js";
+export { CheckboxNodeView } from "./views/CheckboxNodeView.js";
 export { InputNodeView } from "./views/InputNodeView.js";
 export { ScrollViewNodeView } from "./views/ScrollViewNodeView.js";
 export { SpineNodeView } from "./views/SpineNodeView.js";
@@ -13,9 +15,14 @@ export { ProgressBarNodeView, SliderNodeView } from "./views/ValueControlNodeVie
 export { ParticleEmitterNodeView } from "./views/ParticleEmitterNodeView.js";
 export * from "./particles.js";
 export { collectNodeAssetIds } from "./views/createNodeView.js";
-export type { BuildSceneViewOptions, PrefabViewConfiguration } from "./scene.js";
+export { SceneLocalization } from "./localization.js";
+export type { SceneLocalizationOptions } from "./localization.js";
+export { ImageNodeView, MaskNodeView, TextNodeView } from "./views/basic.js";
+export type { BuildSceneViewOptions, PrefabViewConfiguration, SceneViewResult } from "./scene.js";
 export { buildPrefabView, buildSceneView, collectRenderedNodes, loadPrefabView, previewNodeView, updateNodeView, updateParticleEmitters, loadSceneView } from "./scene.js";
 export * from "./controls.js";
+export { createSceneAssetCache } from "./assets/cache.js";
+export type { SceneAssetCache } from "./assets/cache.js";
 export * from "./assets/textures.js";
 export * from "./assets/spine.js";
 export * from "./assets/fonts.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AACpE,YAAY,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AACvF,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,YAAY,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AACjF,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,oBAAoB,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3K,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AACpE,YAAY,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AACvF,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,YAAY,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC7E,YAAY,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAClG,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,oBAAoB,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3K,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC"}

package/dist/index.js

@@ -1,9 +1,11 @@
 export * from "./document.js";
 export * from "./layout.js";
+export { SceneViewport } from "./SceneViewport.js";
 export * from "./layoutGroups.js";
 export * from "./scrollView.js";
 export * from "./views/NodeView.js";
 export { ButtonNodeView } from "./views/ButtonNodeView.js";
+export { CheckboxNodeView } from "./views/CheckboxNodeView.js";
 export { InputNodeView } from "./views/InputNodeView.js";
 export { ScrollViewNodeView } from "./views/ScrollViewNodeView.js";
 export { SpineNodeView } from "./views/SpineNodeView.js";
@@ -11,8 +13,11 @@ export { ProgressBarNodeView, SliderNodeView } from "./views/ValueControlNodeVie
 export { ParticleEmitterNodeView } from "./views/ParticleEmitterNodeView.js";
 export * from "./particles.js";
 export { collectNodeAssetIds } from "./views/createNodeView.js";
+export { SceneLocalization } from "./localization.js";
+export { ImageNodeView, MaskNodeView, TextNodeView } from "./views/basic.js";
 export { buildPrefabView, buildSceneView, collectRenderedNodes, loadPrefabView, previewNodeView, updateNodeView, updateParticleEmitters, loadSceneView } from "./scene.js";
 export * from "./controls.js";
+export { createSceneAssetCache } from "./assets/cache.js";
 export * from "./assets/textures.js";
 export * from "./assets/spine.js";
 export * from "./assets/fonts.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AACvF,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,oBAAoB,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3K,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AACvF,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAC7E,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAE7E,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,oBAAoB,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3K,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC"}

package/dist/index.test.js

@@ -1,9 +1,9 @@
 import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 import { materializedPrefabNodeId, serializeProjectDocument } from "@pixi-ui-editor/schema";
-import { Sprite, Texture } from "pixi.js";
+import { Graphics, NineSliceSprite, Sprite, Texture } from "pixi.js";
 import { TextureAtlas } from "@esotericsoftware/spine-pixi-v8";
-import { assignAtlasPageTextures, buildPrefabView, buildSceneView, collectNodeAssetIds, fitSpineToTransform, getCanvasLogicalSize, getCanvasScale, parseProjectDocumentJson, ProjectDocumentJsonParseError, resolveAnchoredTransform, resolveProfileForViewport, resolveProfileTransform, resolveSpineSettings, resolveTextStyle } from "./index.js";
+import { assignAtlasPageTextures, buildPrefabView, buildSceneView, collectNodeAssetIds, fitSpineToTransform, getCanvasLogicalSize, getCanvasScale, MaskNodeView, parseProjectDocumentJson, ProjectDocumentJsonParseError, resolveAnchoredTransform, resolveProfileForViewport, resolveProfileTransform, resolveSpineSettings, resolveTextStyle } from "./index.js";
 import { createNodeView } from "./views/createNodeView.js";
 import { ContainerNodeView } from "./views/basic.js";
 const sampleUrl = new URL("../../../examples/sample-project/project.json", import.meta.url);
@@ -57,6 +57,7 @@ function documentWithButton() {
  */
 const NODE_TYPE_FIXTURES = {
     container: (base) => ({ ...base, type: "container" }),
+    mask: (base) => ({ ...base, type: "mask" }),
     "horizontal-layout": (base) => ({ ...base, type: "horizontal-layout", layoutGroup: { base: { padding: { left: 0, right: 0, top: 0, bottom: 0 }, spacing: 0, childAlignment: "upper-left", reverseOrder: false, controlChildWidth: true, controlChildHeight: true, forceExpandWidth: false, forceExpandHeight: false } } }),
     "vertical-layout": (base) => ({ ...base, type: "vertical-layout", layoutGroup: { base: { padding: { left: 0, right: 0, top: 0, bottom: 0 }, spacing: 0, childAlignment: "upper-left", reverseOrder: false, controlChildWidth: true, controlChildHeight: true, forceExpandWidth: false, forceExpandHeight: false } } }),
     "grid-layout": (base) => ({ ...base, type: "grid-layout", layoutGroup: { base: { padding: { left: 0, right: 0, top: 0, bottom: 0 }, spacingX: 0, spacingY: 0, cellWidth: 20, cellHeight: 20, startCorner: "upper-left", startAxis: "horizontal", childAlignment: "upper-left", constraint: "flexible" } } }),
@@ -64,6 +65,7 @@ const NODE_TYPE_FIXTURES = {
     text: (base) => ({ ...base, type: "text", text: "Label" }),
     spine: (base) => ({ ...base, type: "spine", assetId: ids.asset }),
     button: (base) => ({ ...base, type: "button", enabled: true, states: { normalAssetId: ids.asset } }),
+    checkbox: (base) => ({ ...base, type: "checkbox", enabled: true, defaultChecked: false, states: { uncheckedAssetId: ids.asset, checkedAssetId: ids.asset } }),
     "prefab-instance": (base) => ({ ...base, type: "prefab-instance", prefabId: "40000000-0000-4000-8000-00000000000f" }),
     "scroll-view": (base) => ({ ...base, type: "scroll-view", scrollView: { direction: "vertical", padding: { left: 0, right: 0, top: 0, bottom: 0 }, itemSpacing: 0, cornerRadius: 0, easingEnabled: true } }),
     input: (base) => ({ ...base, type: "input", placeholder: "Enter text", defaultValue: "", secure: false, align: "left", padding: { left: 0, right: 0, top: 0, bottom: 0 }, cleanOnFocus: false, clipText: true, textStyle: { fontFamily: "Arial", fontSize: 24, fontWeight: "normal", fontStyle: "normal", fill: "#FFFFFF", align: "left", verticalAlign: "top", wordWrap: false, breakWords: false, letterSpacing: 0 } }),
@@ -105,10 +107,17 @@ describe("sample project loader smoke test", () => {
         const sceneView = buildSceneView(document, scene.id, "desktop", { interaction: "runtime" });
         expect(sceneView.nodeViews.has(materializedPrefabNodeId(instanceId, definitionNode.id))).toBe(true);
         expect(sceneView.nodeViews.has(localId)).toBe(true);
+        const viewport = scene.layout.referenceViewports.desktop;
+        sceneView.root.resize({ width: viewport.width * 2, height: viewport.height * 3 });
+        expect(sceneView.root.scale.x).toBe(2);
+        expect(sceneView.root.scale.y).toBe(2);
+        expect(sceneView.root.position).toMatchObject({ x: 0, y: viewport.height / 2 });
+        expect(sceneView.root.content.mask).not.toBeNull();
         const spawned = buildPrefabView(document, prefabId, "desktop", { interaction: "runtime" }, {
             propertyOverrides: [{ nodeId: definitionNode.id, patch: { text: "Spawned" } }],
         });
         expect(spawned.nodeViews.size).toBeGreaterThan(1);
+        expect(spawned.root.content.mask).toBeUndefined();
     });
     it("matches atlas pages to texture files by name", () => {
         const atlas = new TextureAtlas("second.png\nsize: 1,1\nformat: RGBA8888\nfilter: Linear,Linear\nrepeat: none\n\nfirst.png\nsize: 1,1\nformat: RGBA8888\nfilter: Linear,Linear\nrepeat: none\n");
@@ -265,6 +274,27 @@ describe("sample project loader smoke test", () => {
         expect(grabbedInsideRect).toEqual(types.map((type) => [type, true]));
         expect(missedOutsideRect).toEqual(types.map((type) => [type, false]));
     });
+    it("clips a mask subtree to the resolved rectangular layout area and resizes the mask in place", () => {
+        const mask = {
+            id: "40000000-0000-4000-8000-000000000099",
+            name: "Mask",
+            type: "mask",
+            parentId: null,
+            children: [],
+            visible: true,
+            transform: { x: 0, y: 0, width: 120, height: 40, scaleX: 1, scaleY: 1, rotation: 0 },
+        };
+        const view = createNodeView(mask, "runtime");
+        view.update(mask, "desktop");
+        expect(view).toBeInstanceOf(MaskNodeView);
+        expect(view.mask).toBeInstanceOf(Graphics);
+        expect(view.children).toContain(view.mask);
+        expect(view.mask.getLocalBounds()).toMatchObject({ x: 0, y: 0, width: 120, height: 40 });
+        mask.transform.width = 75;
+        mask.transform.height = 25;
+        view.update(mask, "desktop");
+        expect(view.mask.getLocalBounds()).toMatchObject({ x: 0, y: 0, width: 75, height: 25 });
+    });
     it("keeps a child grabbable where it reaches past its parent's rectangle", () => {
         const document = renderDocument();
         const scene = document.scenes[0];
@@ -301,6 +331,66 @@ describe("sample project loader smoke test", () => {
             ["disabled", Texture.WHITE],
         ]);
     });
+    it("uses a NineSliceSprite for every button state once nineSlice is set, carrying the authored borders", () => {
+        const document = documentWithButton();
+        const buttonNode = document.scenes[0].nodes.find((node) => node.id === buttonIds.node);
+        buttonNode.nineSlice = { left: 6, top: 4, right: 6, bottom: 4 };
+        const textures = new Map([[ids.asset, Texture.WHITE], [buttonIds.pressedAsset, Texture.EMPTY]]);
+        const view = buildSceneView(document, ids.scene, "desktop", { interaction: "runtime", textures }).nodeViews.get(buttonIds.node);
+        const stateViews = [];
+        const walk = (container) => { if (container instanceof Sprite || container instanceof NineSliceSprite)
+            stateViews.push(container); container.children.forEach(walk); };
+        walk(view);
+        // normal/hover/disabled fall back to the normal asset; pressed has its own — all four are sliced.
+        expect(stateViews).toHaveLength(4);
+        expect(stateViews.every((child) => child instanceof NineSliceSprite)).toBe(true);
+        expect(stateViews.map((child) => [child.leftWidth, child.topHeight, child.rightWidth, child.bottomHeight])).toEqual([[6, 4, 6, 4], [6, 4, 6, 4], [6, 4, 6, 4], [6, 4, 6, 4]]);
+    });
+    it("renders a plain Sprite without nineSlice and a NineSliceSprite with it, carrying the authored borders", () => {
+        const document = renderDocument();
+        const textures = new Map([[ids.asset, Texture.WHITE]]);
+        const plain = buildSceneView(document, ids.scene, "desktop", { interaction: "runtime", textures }).nodeViews.get(ids.image);
+        expect(plain.children[0]).toBeInstanceOf(Sprite);
+        expect(plain.children[0]).not.toBeInstanceOf(NineSliceSprite);
+        const imageNode = document.scenes[0].nodes.find((node) => node.id === ids.image && node.type === "image");
+        imageNode.nineSlice = { left: 8, top: 6, right: 8, bottom: 6 };
+        const sliced = buildSceneView(document, ids.scene, "desktop", { interaction: "runtime", textures }).nodeViews.get(ids.image);
+        const sprite = sliced.children[0];
+        expect(sprite).toBeInstanceOf(NineSliceSprite);
+        expect(sprite).toMatchObject({ leftWidth: 8, topHeight: 6, rightWidth: 8, bottomHeight: 6 });
+    });
+    it("swaps a checkbox's shown texture on hover, independently for its checked and unchecked views", () => {
+        const document = renderDocument();
+        const scene = document.scenes[0];
+        const root = scene.nodes.find((node) => node.id === ids.root);
+        const checkboxId = "10000000-0000-4000-8000-000000000011";
+        const uncheckedHoverAsset = "10000000-0000-4000-8000-000000000012";
+        const checkedHoverAsset = "10000000-0000-4000-8000-000000000013";
+        document.assets.push({ id: uncheckedHoverAsset, name: "Unchecked hover", type: "image", source: { uri: "assets/unchecked-hover.png", mediaType: "image/png" } });
+        document.assets.push({ id: checkedHoverAsset, name: "Checked hover", type: "image", source: { uri: "assets/checked-hover.png", mediaType: "image/png" } });
+        scene.nodes.push({
+            id: checkboxId, name: "Agree", type: "checkbox", parentId: root.id, children: [], visible: true,
+            enabled: true, defaultChecked: false,
+            // Hover textures deliberately mirror the *other* base state, so a swap is unambiguous with only two Texture identities available offscreen.
+            states: { uncheckedAssetId: ids.asset, checkedAssetId: buttonIds.pressedAsset, uncheckedHoverAssetId: buttonIds.pressedAsset, checkedHoverAssetId: ids.asset },
+            transform: { x: 0, y: 0, width: 32, height: 32, scaleX: 1, scaleY: 1, rotation: 0 },
+        });
+        root.children.push(checkboxId);
+        const textures = new Map([[ids.asset, Texture.WHITE], [buttonIds.pressedAsset, Texture.EMPTY]]);
+        const view = buildSceneView(document, ids.scene, "desktop", { interaction: "runtime", textures }).nodeViews.get(checkboxId);
+        // Pixi's typed Container.emit requires a payload for known federated event names; the listener
+        // only reads the event name, so a loosely-typed emit is enough to exercise it here.
+        const innerView = view.children[0].innerView;
+        expect(shownStateTexture(view)).toBe(Texture.WHITE);
+        innerView.emit("pointerover");
+        expect(shownStateTexture(view)).toBe(Texture.EMPTY);
+        innerView.emit("pointerout");
+        expect(shownStateTexture(view)).toBe(Texture.WHITE);
+        view.checked = true;
+        expect(shownStateTexture(view)).toBe(Texture.EMPTY);
+        innerView.emit("pointerover");
+        expect(shownStateTexture(view)).toBe(Texture.WHITE);
+    });
     it("stops dispatching pointer events to a disabled button without writing runtime state back to the document", () => {
         const document = documentWithButton();
         const view = buildSceneView(document, ids.scene, "desktop", { interaction: "runtime", textures: new Map([[ids.asset, Texture.WHITE]]) }).nodeViews.get(buttonIds.node);
@@ -351,7 +441,7 @@ describe("sample project loader smoke test", () => {
         expect(scene.id).toBe(ids.scene);
         expect(scene.rootNodeIds).toEqual([ids.root]);
         expect(scene.nodes.find((node) => node.id === ids.image && node.type === "image")).toMatchObject({ assetId: ids.asset });
-        expect(scene.nodes.find((node) => node.id === ids.text)).toMatchObject({ binding: "showcase.title" });
+        expect(scene.nodes.find((node) => node.id === ids.text)).toMatchObject({ bindingKey: "showcase.title" });
         expect(scene.layout.referenceViewports).toHaveProperty("desktop");
         expect(scene.layout.referenceViewports).toHaveProperty("mobile");
     });