@xsolla/xui-b2c-glass-cube 0.0.0-stage → 0.226.0

package/README.md

@@ -1,3 +1,24 @@
-# Temporary Holding Version
+# @xsolla/xui-b2c-glass-cube
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+WebGL animation of Sol sealing an item into a glass cube. Framework-agnostic
+core on three.js (`mountGlassCube`) plus a thin React wrapper; falls back to
+the plain item picture without WebGL2 or with `prefers-reduced-motion`.
+
+```bash
+yarn add @xsolla/xui-b2c-glass-cube three
+```
+
+```ts
+import { mountGlassCube } from "@xsolla/xui-b2c-glass-cube";
+
+const cube = mountGlassCube(hostEl, { item: imageUrl, size: 200 });
+```
+
+```tsx
+import { GlassCube } from "@xsolla/xui-b2c-glass-cube/react";
+
+<GlassCube item={imageUrl} size={200} onComplete={showNextStep} />;
+```
+
+Full API, assets, fallback behaviour:
+[docs/api/components/b2c-glass-cube.md](../../../docs/api/components/b2c-glass-cube.md).

package/capabilities-BM5ntaGo.d.mts

@@ -0,0 +1,84 @@
+/** URLs of the binary assets the scene loads at runtime. */
+interface GlassCubeAssets {
+    /** Glass cube model (`glass-cube.glb`). */
+    readonly cubeModelUrl: string;
+    /** Sol, the printer, as a rigged model (`sol.glb`). */
+    readonly printerModelUrl: string;
+    /** Studio light map Sol was rendered in (`studio.hdr`). */
+    readonly environmentUrl: string;
+}
+/**
+ * Served from the toolkit CDN bucket (`cdn-assets/xsolla-ui-toolkit-prod/glass-cube/v1`).
+ * Bump `?v=` whenever a file changes in place — the CDN caches aggressively.
+ */
+declare const DEFAULT_GLASS_CUBE_ASSETS: GlassCubeAssets;
+
+/** The ID printed on the cube's face, e.g. `{ series: "XLA", number: "-000-006" }`. */
+interface GlassCubeLabel {
+    readonly series: string;
+    readonly number: string;
+}
+interface GlassCubeOptions {
+    /** URL of the picture sealed inside the cube. */
+    readonly item: string;
+    /**
+     * Printed instead when `item` cannot be used as a WebGL texture — typically a
+     * partner CDN that serves the picture without CORS, which a plain `<img>`
+     * would still show. Serve it from your own origin. Without one such an item
+     * drops the 3D cube and falls back to the picture.
+     */
+    readonly fallbackItem?: string;
+    /**
+     * Cube size in CSS pixels. The root element is sized to fit the whole print
+     * (`size × 2.5`, Sol flies in from outside the cube) and never exceeds the
+     * host. Without one the cube follows the host: its width divided by 2.5.
+     */
+    readonly size?: number;
+    /** `true` shows the cube already sealed, with no print. Defaults to `false`. */
+    readonly sealed?: boolean;
+    /** Whether Sol is in the shot. Defaults to `!sealed`; `false` skips loading Sol. */
+    readonly printer?: boolean;
+    /**
+     * Start the print as soon as the scene is ready. Defaults to `true`; with
+     * `false` the cube waits for `play()`. Ignored for a sealed cube.
+     */
+    readonly autoPlay?: boolean;
+    /**
+     * Tag on the cube's face; without one the cube carries no ID. A string is
+     * split at its first dash: `"XLA-000-006"` → `{ series: "XLA", number: "-000-006" }`.
+     */
+    readonly label?: string | GlassCubeLabel;
+    /** Overrides for the model / light-map URLs; the toolkit CDN by default. */
+    readonly assets?: Partial<GlassCubeAssets>;
+    /**
+     * The cube is sealed. Fires after every print (so again on each `play()`),
+     * and once right away when there is nothing to play: a `sealed` cube or the
+     * static fallback.
+     */
+    onComplete?(): void;
+}
+interface GlassCubeHandle {
+    /**
+     * Starts (or restarts) the print. Before the scene is ready the call is
+     * remembered and the print starts once it is. No-op for a sealed cube or
+     * the fallback.
+     */
+    play(): void;
+    /**
+     * Swaps the picture inside the cube without rebuilding the scene. Resolves
+     * once the new picture is up; only the latest call lands.
+     */
+    setItem(src: string): Promise<void>;
+    /** Changes the cube size in CSS pixels; `undefined` makes it follow the host again. */
+    setSize(px?: number): void;
+    /** Removes everything from the host and releases GPU resources. */
+    dispose(): void;
+}
+
+/**
+ * `false` means the print cannot play: show the item sealed right away instead
+ * of never showing it. Checked once, before the scene chunk is requested.
+ */
+declare function canPlayGlassCube(win?: Window | undefined): boolean;
+
+export { DEFAULT_GLASS_CUBE_ASSETS as D, type GlassCubeOptions as G, type GlassCubeHandle as a, type GlassCubeAssets as b, type GlassCubeLabel as c, canPlayGlassCube as d };

package/capabilities-BM5ntaGo.d.ts

@@ -0,0 +1,84 @@
+/** URLs of the binary assets the scene loads at runtime. */
+interface GlassCubeAssets {
+    /** Glass cube model (`glass-cube.glb`). */
+    readonly cubeModelUrl: string;
+    /** Sol, the printer, as a rigged model (`sol.glb`). */
+    readonly printerModelUrl: string;
+    /** Studio light map Sol was rendered in (`studio.hdr`). */
+    readonly environmentUrl: string;
+}
+/**
+ * Served from the toolkit CDN bucket (`cdn-assets/xsolla-ui-toolkit-prod/glass-cube/v1`).
+ * Bump `?v=` whenever a file changes in place — the CDN caches aggressively.
+ */
+declare const DEFAULT_GLASS_CUBE_ASSETS: GlassCubeAssets;
+
+/** The ID printed on the cube's face, e.g. `{ series: "XLA", number: "-000-006" }`. */
+interface GlassCubeLabel {
+    readonly series: string;
+    readonly number: string;
+}
+interface GlassCubeOptions {
+    /** URL of the picture sealed inside the cube. */
+    readonly item: string;
+    /**
+     * Printed instead when `item` cannot be used as a WebGL texture — typically a
+     * partner CDN that serves the picture without CORS, which a plain `<img>`
+     * would still show. Serve it from your own origin. Without one such an item
+     * drops the 3D cube and falls back to the picture.
+     */
+    readonly fallbackItem?: string;
+    /**
+     * Cube size in CSS pixels. The root element is sized to fit the whole print
+     * (`size × 2.5`, Sol flies in from outside the cube) and never exceeds the
+     * host. Without one the cube follows the host: its width divided by 2.5.
+     */
+    readonly size?: number;
+    /** `true` shows the cube already sealed, with no print. Defaults to `false`. */
+    readonly sealed?: boolean;
+    /** Whether Sol is in the shot. Defaults to `!sealed`; `false` skips loading Sol. */
+    readonly printer?: boolean;
+    /**
+     * Start the print as soon as the scene is ready. Defaults to `true`; with
+     * `false` the cube waits for `play()`. Ignored for a sealed cube.
+     */
+    readonly autoPlay?: boolean;
+    /**
+     * Tag on the cube's face; without one the cube carries no ID. A string is
+     * split at its first dash: `"XLA-000-006"` → `{ series: "XLA", number: "-000-006" }`.
+     */
+    readonly label?: string | GlassCubeLabel;
+    /** Overrides for the model / light-map URLs; the toolkit CDN by default. */
+    readonly assets?: Partial<GlassCubeAssets>;
+    /**
+     * The cube is sealed. Fires after every print (so again on each `play()`),
+     * and once right away when there is nothing to play: a `sealed` cube or the
+     * static fallback.
+     */
+    onComplete?(): void;
+}
+interface GlassCubeHandle {
+    /**
+     * Starts (or restarts) the print. Before the scene is ready the call is
+     * remembered and the print starts once it is. No-op for a sealed cube or
+     * the fallback.
+     */
+    play(): void;
+    /**
+     * Swaps the picture inside the cube without rebuilding the scene. Resolves
+     * once the new picture is up; only the latest call lands.
+     */
+    setItem(src: string): Promise<void>;
+    /** Changes the cube size in CSS pixels; `undefined` makes it follow the host again. */
+    setSize(px?: number): void;
+    /** Removes everything from the host and releases GPU resources. */
+    dispose(): void;
+}
+
+/**
+ * `false` means the print cannot play: show the item sealed right away instead
+ * of never showing it. Checked once, before the scene chunk is requested.
+ */
+declare function canPlayGlassCube(win?: Window | undefined): boolean;
+
+export { DEFAULT_GLASS_CUBE_ASSETS as D, type GlassCubeOptions as G, type GlassCubeHandle as a, type GlassCubeAssets as b, type GlassCubeLabel as c, canPlayGlassCube as d };

package/chunk-H563G5UY.mjs

@@ -0,0 +1,267 @@
+// src/assets.ts
+var CDN_BASE = "https://cdn.xsolla.net/xsolla-ui-toolkit-prod/glass-cube/v1";
+var DEFAULT_GLASS_CUBE_ASSETS = {
+  cubeModelUrl: `${CDN_BASE}/glass-cube.glb?v=1`,
+  printerModelUrl: `${CDN_BASE}/sol.glb?v=1`,
+  environmentUrl: `${CDN_BASE}/studio.hdr?v=1`
+};
+function resolveGlassCubeAssets(overrides) {
+  return { ...DEFAULT_GLASS_CUBE_ASSETS, ...overrides };
+}
+
+// src/capabilities.ts
+var webgl2Support = /* @__PURE__ */ new WeakMap();
+function defaultWindow() {
+  return typeof window === "undefined" ? void 0 : window;
+}
+function hasWebgl2(win = defaultWindow()) {
+  if (!win) {
+    return false;
+  }
+  const cached = webgl2Support.get(win);
+  if (cached !== void 0) {
+    return cached;
+  }
+  let supported = false;
+  try {
+    const gl = win.document.createElement("canvas").getContext("webgl2");
+    gl?.getExtension("WEBGL_lose_context")?.loseContext();
+    supported = gl !== null && gl !== void 0;
+  } catch {
+    supported = false;
+  }
+  webgl2Support.set(win, supported);
+  return supported;
+}
+function prefersReducedMotion(win = defaultWindow()) {
+  return win?.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
+}
+function canPlayGlassCube(win = defaultWindow()) {
+  return !prefersReducedMotion(win) && hasWebgl2(win);
+}
+
+// src/label.ts
+function normalizeGlassCubeLabel(label) {
+  if (label === void 0) {
+    return void 0;
+  }
+  if (typeof label !== "string") {
+    return label;
+  }
+  const trimmed = label.trim();
+  if (trimmed === "") {
+    return void 0;
+  }
+  const dash = trimmed.indexOf("-");
+  if (dash <= 0) {
+    return { series: trimmed, number: "" };
+  }
+  return { series: trimmed.slice(0, dash), number: trimmed.slice(dash) };
+}
+function glassCubeLabelKey(label) {
+  return label ? `${label.series}\0${label.number}` : "";
+}
+
+// src/layout.ts
+var STAGE_OVERSCAN = 2.5;
+var CLASS_ROOT = "xui-glass-cube";
+var CLASS_STAGE = `${CLASS_ROOT}__stage`;
+var CLASS_OVERSCAN = `${CLASS_ROOT}__overscan`;
+var CLASS_FALLBACK = `${CLASS_ROOT}__fallback`;
+var FALLBACK_INSET = "15%";
+var FALLBACK_SIZE = "70%";
+function assign(element, style) {
+  Object.assign(element.style, style);
+}
+function createGlassCubeLayout(host, size) {
+  const document = host.ownerDocument;
+  const root = document.createElement("div");
+  root.className = CLASS_ROOT;
+  root.setAttribute("aria-hidden", "true");
+  assign(root, {
+    position: "relative",
+    display: "flex",
+    justifyContent: "center",
+    // Never wider than the host, so a narrow column shrinks the whole print.
+    maxWidth: "100%"
+  });
+  const stage = document.createElement("div");
+  stage.className = CLASS_STAGE;
+  assign(stage, {
+    position: "relative",
+    flexShrink: "0",
+    width: `${100 / STAGE_OVERSCAN}%`
+  });
+  const square = document.createElement("div");
+  assign(square, { paddingTop: "100%" });
+  stage.appendChild(square);
+  const overscan = document.createElement("div");
+  overscan.className = CLASS_OVERSCAN;
+  assign(overscan, {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: "100%",
+    height: `${STAGE_OVERSCAN * 100}%`,
+    pointerEvents: "none",
+    transform: "translate(-50%, -50%)"
+  });
+  root.append(stage, overscan);
+  host.appendChild(root);
+  let fallback = null;
+  const layout = {
+    root,
+    stage,
+    overscan,
+    setSize(px) {
+      root.style.width = px === void 0 ? "100%" : `${px * STAGE_OVERSCAN}px`;
+    },
+    showFallback(src) {
+      overscan.remove();
+      if (!fallback) {
+        fallback = document.createElement("img");
+        fallback.className = CLASS_FALLBACK;
+        fallback.alt = "";
+        assign(fallback, {
+          position: "absolute",
+          top: FALLBACK_INSET,
+          left: FALLBACK_INSET,
+          width: FALLBACK_SIZE,
+          height: FALLBACK_SIZE,
+          objectFit: "contain"
+        });
+        stage.appendChild(fallback);
+      }
+      fallback.src = src;
+    },
+    setFallbackSrc(src) {
+      if (fallback) {
+        fallback.src = src;
+      }
+    },
+    dispose() {
+      root.remove();
+    }
+  };
+  layout.setSize(size);
+  return layout;
+}
+
+// src/mount.ts
+function mountGlassCube(host, options) {
+  const sealed = options.sealed ?? false;
+  const printer = options.printer ?? !sealed;
+  const layout = createGlassCubeLayout(host, options.size);
+  let item = options.item;
+  let scene = null;
+  let isDisposed = false;
+  let isFallback = false;
+  let hasCompleted = false;
+  let playPending = !sealed && (options.autoPlay ?? true);
+  const complete = () => {
+    if (isDisposed) {
+      return;
+    }
+    hasCompleted = true;
+    options.onComplete?.();
+  };
+  const fallBack = () => {
+    if (isDisposed || isFallback) {
+      return;
+    }
+    isFallback = true;
+    scene?.dispose();
+    scene = null;
+    layout.showFallback(item);
+    if (!hasCompleted) {
+      complete();
+    }
+  };
+  const start = async () => {
+    try {
+      const { GlassCubeScene } = await import("./glass-cube-scene-5CKNLPJ5.mjs");
+      const created = await GlassCubeScene.create({
+        container: layout.overscan,
+        stage: layout.stage,
+        item: options.item,
+        fallbackItem: options.fallbackItem,
+        sealed,
+        printer,
+        label: normalizeGlassCubeLabel(options.label),
+        assets: resolveGlassCubeAssets(options.assets),
+        onComplete: complete,
+        onContextLost: fallBack
+      });
+      if (item !== options.item) {
+        await created.setItem(item);
+      }
+      if (isDisposed || isFallback) {
+        created.dispose();
+        return;
+      }
+      scene = created;
+      if (sealed) {
+        complete();
+        return;
+      }
+      if (playPending) {
+        playPending = false;
+        created.play();
+      }
+    } catch {
+      fallBack();
+    }
+  };
+  let ready;
+  if (canPlayGlassCube(host.ownerDocument.defaultView ?? void 0)) {
+    ready = start();
+  } else {
+    ready = Promise.resolve();
+    fallBack();
+  }
+  return {
+    play() {
+      if (sealed || isFallback || isDisposed) {
+        return;
+      }
+      if (scene) {
+        scene.play();
+      } else {
+        playPending = true;
+      }
+    },
+    async setItem(src) {
+      item = src;
+      if (isFallback) {
+        layout.setFallbackSrc(src);
+        return;
+      }
+      await ready;
+      if (isDisposed || isFallback) {
+        return;
+      }
+      await scene?.setItem(src);
+    },
+    setSize(px) {
+      layout.setSize(px);
+    },
+    dispose() {
+      if (isDisposed) {
+        return;
+      }
+      isDisposed = true;
+      scene?.dispose();
+      scene = null;
+      layout.dispose();
+    }
+  };
+}
+
+export {
+  DEFAULT_GLASS_CUBE_ASSETS,
+  canPlayGlassCube,
+  normalizeGlassCubeLabel,
+  glassCubeLabelKey,
+  mountGlassCube
+};
+//# sourceMappingURL=chunk-H563G5UY.mjs.map

package/chunk-H563G5UY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/assets.ts","../src/capabilities.ts","../src/label.ts","../src/layout.ts","../src/mount.ts"],"sourcesContent":["/** URLs of the binary assets the scene loads at runtime. */\nexport interface GlassCubeAssets {\n  /** Glass cube model (`glass-cube.glb`). */\n  readonly cubeModelUrl: string;\n  /** Sol, the printer, as a rigged model (`sol.glb`). */\n  readonly printerModelUrl: string;\n  /** Studio light map Sol was rendered in (`studio.hdr`). */\n  readonly environmentUrl: string;\n}\n\nconst CDN_BASE = \"https://cdn.xsolla.net/xsolla-ui-toolkit-prod/glass-cube/v1\";\n\n/**\n * Served from the toolkit CDN bucket (`cdn-assets/xsolla-ui-toolkit-prod/glass-cube/v1`).\n * Bump `?v=` whenever a file changes in place — the CDN caches aggressively.\n */\nexport const DEFAULT_GLASS_CUBE_ASSETS: GlassCubeAssets = {\n  cubeModelUrl: `${CDN_BASE}/glass-cube.glb?v=1`,\n  printerModelUrl: `${CDN_BASE}/sol.glb?v=1`,\n  environmentUrl: `${CDN_BASE}/studio.hdr?v=1`,\n};\n\nexport function resolveGlassCubeAssets(\n  overrides?: Partial<GlassCubeAssets>\n): GlassCubeAssets {\n  return { ...DEFAULT_GLASS_CUBE_ASSETS, ...overrides };\n}\n","/**\n * Deliberately free of `three` imports: these probes run before deciding whether\n * to download the WebGL chunk at all.\n */\nconst webgl2Support = new WeakMap<Window, boolean>();\n\nfunction defaultWindow(): Window | undefined {\n  return typeof window === \"undefined\" ? undefined : window;\n}\n\nexport function hasWebgl2(win: Window | undefined = defaultWindow()): boolean {\n  if (!win) {\n    return false;\n  }\n  const cached = webgl2Support.get(win);\n  if (cached !== undefined) {\n    return cached;\n  }\n  let supported = false;\n  try {\n    const gl = win.document.createElement(\"canvas\").getContext(\"webgl2\");\n    gl?.getExtension(\"WEBGL_lose_context\")?.loseContext();\n    supported = gl !== null && gl !== undefined;\n  } catch {\n    supported = false;\n  }\n  webgl2Support.set(win, supported);\n  return supported;\n}\n\nexport function prefersReducedMotion(\n  win: Window | undefined = defaultWindow()\n): boolean {\n  return (\n    win?.matchMedia?.(\"(prefers-reduced-motion: reduce)\")?.matches ?? false\n  );\n}\n\n/**\n * `false` means the print cannot play: show the item sealed right away instead\n * of never showing it. Checked once, before the scene chunk is requested.\n */\nexport function canPlayGlassCube(\n  win: Window | undefined = defaultWindow()\n): boolean {\n  return !prefersReducedMotion(win) && hasWebgl2(win);\n}\n","import type { GlassCubeLabel } from \"./types\";\n\n/**\n * Accepts the tag the way consumers usually hold it — one string such as\n * `\"XLA-000-006\"` — and splits it at the first dash into the series and the\n * number the cube face prints on separate lines. An object passes through;\n * an empty string means no tag.\n */\nexport function normalizeGlassCubeLabel(\n  label: string | GlassCubeLabel | undefined\n): GlassCubeLabel | undefined {\n  if (label === undefined) {\n    return undefined;\n  }\n  if (typeof label !== \"string\") {\n    return label;\n  }\n  const trimmed = label.trim();\n  if (trimmed === \"\") {\n    return undefined;\n  }\n  const dash = trimmed.indexOf(\"-\");\n  if (dash <= 0) {\n    return { series: trimmed, number: \"\" };\n  }\n  return { series: trimmed.slice(0, dash), number: trimmed.slice(dash) };\n}\n\n/** Stable key for comparing labels by value (React deps, memoisation). */\nexport function glassCubeLabelKey(label: GlassCubeLabel | undefined): string {\n  return label ? `${label.series}\\u0000${label.number}` : \"\";\n}\n","/**\n * DOM the cube lives in. Mirrors the pay-station `x-status-cube` template:\n *\n *   root (flex, centred)   as wide as the print: `size × 2.5`, capped by the host\n *   ├─ stage      square the printed cube is fitted to; its width is the cube size\n *   │   └─ img    static fallback, shown instead of the canvas\n *   └─ overscan   2.5× the stage, centred on it; Sol flies in from outside the cube\n *       └─ canvas (appended by the scene)\n *\n * Everything is inline-styled so consumers need no stylesheet; the class names\n * are hooks for anyone who wants to override.\n */\n\n/** Sol flies in from outside the cube frame — the canvas is this much bigger than the cube. */\nexport const STAGE_OVERSCAN = 2.5;\n\nconst CLASS_ROOT = \"xui-glass-cube\";\nconst CLASS_STAGE = `${CLASS_ROOT}__stage`;\nconst CLASS_OVERSCAN = `${CLASS_ROOT}__overscan`;\nconst CLASS_FALLBACK = `${CLASS_ROOT}__fallback`;\n\n/** The fallback picture is inset the way the item sits inside the printed glass. */\nconst FALLBACK_INSET = \"15%\";\nconst FALLBACK_SIZE = \"70%\";\n\nexport interface GlassCubeLayout {\n  readonly root: HTMLElement;\n  readonly stage: HTMLElement;\n  readonly overscan: HTMLElement;\n  setSize(px: number | undefined): void;\n  showFallback(src: string): void;\n  setFallbackSrc(src: string): void;\n  dispose(): void;\n}\n\nfunction assign(\n  element: HTMLElement,\n  style: Partial<CSSStyleDeclaration>\n): void {\n  Object.assign(element.style, style);\n}\n\nexport function createGlassCubeLayout(\n  host: HTMLElement,\n  size: number | undefined\n): GlassCubeLayout {\n  const document = host.ownerDocument;\n\n  const root = document.createElement(\"div\");\n  root.className = CLASS_ROOT;\n  root.setAttribute(\"aria-hidden\", \"true\");\n  assign(root, {\n    position: \"relative\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    // Never wider than the host, so a narrow column shrinks the whole print.\n    maxWidth: \"100%\",\n  });\n\n  const stage = document.createElement(\"div\");\n  stage.className = CLASS_STAGE;\n  assign(stage, {\n    position: \"relative\",\n    flexShrink: \"0\",\n    width: `${100 / STAGE_OVERSCAN}%`,\n  });\n  // Keeps the stage square without `aspect-ratio`.\n  const square = document.createElement(\"div\");\n  assign(square, { paddingTop: \"100%\" });\n  stage.appendChild(square);\n\n  const overscan = document.createElement(\"div\");\n  overscan.className = CLASS_OVERSCAN;\n  assign(overscan, {\n    position: \"absolute\",\n    top: \"50%\",\n    left: \"50%\",\n    width: \"100%\",\n    height: `${STAGE_OVERSCAN * 100}%`,\n    pointerEvents: \"none\",\n    transform: \"translate(-50%, -50%)\",\n  });\n\n  root.append(stage, overscan);\n  host.appendChild(root);\n\n  let fallback: HTMLImageElement | null = null;\n\n  const layout: GlassCubeLayout = {\n    root,\n    stage,\n    overscan,\n    setSize(px) {\n      // The stage is a fixed fraction of the root, so sizing the root to the\n      // whole print makes the stage exactly `px` wide — no wrapper needed.\n      root.style.width = px === undefined ? \"100%\" : `${px * STAGE_OVERSCAN}px`;\n    },\n    showFallback(src) {\n      overscan.remove();\n      if (!fallback) {\n        fallback = document.createElement(\"img\");\n        fallback.className = CLASS_FALLBACK;\n        fallback.alt = \"\";\n        assign(fallback, {\n          position: \"absolute\",\n          top: FALLBACK_INSET,\n          left: FALLBACK_INSET,\n          width: FALLBACK_SIZE,\n          height: FALLBACK_SIZE,\n          objectFit: \"contain\",\n        });\n        stage.appendChild(fallback);\n      }\n      fallback.src = src;\n    },\n    setFallbackSrc(src) {\n      if (fallback) {\n        fallback.src = src;\n      }\n    },\n    dispose() {\n      root.remove();\n    },\n  };\n\n  layout.setSize(size);\n\n  return layout;\n}\n","import { resolveGlassCubeAssets } from \"./assets\";\nimport { canPlayGlassCube } from \"./capabilities\";\nimport { normalizeGlassCubeLabel } from \"./label\";\nimport { createGlassCubeLayout } from \"./layout\";\nimport type { GlassCubeScene } from \"./scene/scene/glass-cube-scene\";\nimport type { GlassCubeHandle, GlassCubeOptions } from \"./types\";\n\n/**\n * Builds the cube inside `host`. The WebGL scene (and `three` with it) is\n * requested only when the print can actually play; otherwise, and whenever the\n * scene fails to load or loses its context, the item is shown as a plain picture.\n */\nexport function mountGlassCube(\n  host: HTMLElement,\n  options: GlassCubeOptions\n): GlassCubeHandle {\n  const sealed = options.sealed ?? false;\n  const printer = options.printer ?? !sealed;\n  const layout = createGlassCubeLayout(host, options.size);\n\n  let item = options.item;\n  let scene: GlassCubeScene | null = null;\n  let isDisposed = false;\n  let isFallback = false;\n  /** The cube has been sealed at least once — the fallback must not announce it again. */\n  let hasCompleted = false;\n  /** A print is wanted as soon as the scene is ready. */\n  let playPending = !sealed && (options.autoPlay ?? true);\n\n  const complete = (): void => {\n    if (isDisposed) {\n      return;\n    }\n    hasCompleted = true;\n    options.onComplete?.();\n  };\n\n  const fallBack = (): void => {\n    if (isDisposed || isFallback) {\n      return;\n    }\n    isFallback = true;\n    scene?.dispose();\n    scene = null;\n    layout.showFallback(item);\n    if (!hasCompleted) {\n      complete();\n    }\n  };\n\n  const start = async (): Promise<void> => {\n    try {\n      const { GlassCubeScene } = await import(\"./scene/scene/glass-cube-scene\");\n      const created = await GlassCubeScene.create({\n        container: layout.overscan,\n        stage: layout.stage,\n        item: options.item,\n        fallbackItem: options.fallbackItem,\n        sealed,\n        printer,\n        label: normalizeGlassCubeLabel(options.label),\n        assets: resolveGlassCubeAssets(options.assets),\n        onComplete: complete,\n        onContextLost: fallBack,\n      });\n      // The picture may have been swapped while the assets were loading.\n      if (item !== options.item) {\n        await created.setItem(item);\n      }\n      if (isDisposed || isFallback) {\n        created.dispose();\n        return;\n      }\n      // Published only now: `play` / `setItem` queue up behind `ready` until then.\n      scene = created;\n      if (sealed) {\n        complete();\n        return;\n      }\n      if (playPending) {\n        playPending = false;\n        created.play();\n      }\n    } catch {\n      fallBack();\n    }\n  };\n\n  let ready: Promise<void>;\n  if (canPlayGlassCube(host.ownerDocument.defaultView ?? undefined)) {\n    ready = start();\n  } else {\n    ready = Promise.resolve();\n    fallBack();\n  }\n\n  return {\n    play() {\n      if (sealed || isFallback || isDisposed) {\n        return;\n      }\n      if (scene) {\n        scene.play();\n      } else {\n        playPending = true;\n      }\n    },\n    async setItem(src) {\n      item = src;\n      if (isFallback) {\n        layout.setFallbackSrc(src);\n        return;\n      }\n      await ready;\n      if (isDisposed || isFallback) {\n        return;\n      }\n      // Already printed by `start` when the swap happened during loading; the\n      // scene skips a repeat of its current URL.\n      await scene?.setItem(src);\n    },\n    setSize(px) {\n      layout.setSize(px);\n    },\n    dispose() {\n      if (isDisposed) {\n        return;\n      }\n      isDisposed = true;\n      scene?.dispose();\n      scene = null;\n      layout.dispose();\n    },\n  };\n}\n"],"mappings":"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","names":[]}