@rb-games/core 0.1.0

package/dist/engine/index.js

@@ -0,0 +1,1818 @@
+import '@pixi/layout';
+import '@pixi/layout/devtools';
+import { Application, isMobile } from 'pixi.js';
+
+// engine/PixiEngine.ts
+
+// devtools/DraggableController.ts
+var dragStates = /* @__PURE__ */ new WeakMap();
+var originalEventModes = /* @__PURE__ */ new WeakMap();
+var originalCursors = /* @__PURE__ */ new WeakMap();
+function onDragStart(e) {
+  if (!this.__draggable) return;
+  this.__dragging = true;
+  this.cursor = "grabbing";
+  const parent = this.parent;
+  if (!parent) return;
+  const localPos = parent.toLocal(e.global);
+  dragStates.set(this, {
+    offsetX: localPos.x - this.x,
+    offsetY: localPos.y - this.y
+  });
+  e.stopPropagation();
+}
+function onDragMove(e) {
+  if (!this.__dragging) return;
+  const state = dragStates.get(this);
+  if (!state) return;
+  const parent = this.parent;
+  if (!parent) return;
+  const localPos = parent.toLocal(e.global);
+  this.x = localPos.x - state.offsetX;
+  this.y = localPos.y - state.offsetY;
+}
+function onDragEnd() {
+  if (!this.__dragging) return;
+  this.__dragging = false;
+  this.cursor = "grab";
+  dragStates.delete(this);
+}
+function enableDrag(container) {
+  originalEventModes.set(container, container.eventMode);
+  originalCursors.set(container, container.cursor);
+  container.eventMode = "static";
+  container.cursor = "grab";
+  container.on("pointerdown", onDragStart, container);
+  container.on("globalpointermove", onDragMove, container);
+  container.on("pointerup", onDragEnd, container);
+  container.on("pointerupoutside", onDragEnd, container);
+}
+function disableDrag(container) {
+  container.off("pointerdown", onDragStart, container);
+  container.off("globalpointermove", onDragMove, container);
+  container.off("pointerup", onDragEnd, container);
+  container.off("pointerupoutside", onDragEnd, container);
+  const originalMode = originalEventModes.get(container);
+  if (originalMode !== void 0) {
+    container.eventMode = originalMode;
+  }
+  const originalCursor = originalCursors.get(container);
+  if (originalCursor !== void 0) {
+    container.cursor = originalCursor;
+  }
+  container.__dragging = false;
+  dragStates.delete(container);
+  originalEventModes.delete(container);
+  originalCursors.delete(container);
+}
+function isDragging(container) {
+  return container.__dragging === true;
+}
+
+// devtools/ResizableController.ts
+var resizeStates = /* @__PURE__ */ new WeakMap();
+var HANDLE_SIZE = 10;
+var cursors = {
+  nw: "nwse-resize",
+  n: "ns-resize",
+  ne: "nesw-resize",
+  e: "ew-resize",
+  se: "nwse-resize",
+  s: "ns-resize",
+  sw: "nesw-resize",
+  w: "ew-resize"
+};
+function getCanvasElement(container) {
+  var _a2, _b;
+  try {
+    const renderer = ((_a2 = container.__pixiApp) == null ? void 0 : _a2.renderer) ?? ((_b = globalThis.__PIXI_APP__) == null ? void 0 : _b.renderer);
+    if (renderer == null ? void 0 : renderer.canvas) return renderer.canvas;
+    return document.querySelector("canvas");
+  } catch {
+    return document.querySelector("canvas");
+  }
+}
+function createOverlayContainer(canvas) {
+  var _a2;
+  const div = document.createElement("div");
+  div.className = "__pixi_resize_overlay__";
+  div.style.cssText = `
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10000;
+  `;
+  (_a2 = canvas.parentElement) == null ? void 0 : _a2.appendChild(div);
+  return div;
+}
+function createBorderDiv() {
+  const div = document.createElement("div");
+  div.style.cssText = `
+    position: absolute;
+    border: 2px dashed #00aaff;
+    pointer-events: none;
+    box-sizing: border-box;
+  `;
+  return div;
+}
+function createHandleDiv(pos) {
+  const div = document.createElement("div");
+  div.dataset.handle = pos;
+  div.style.cssText = `
+    position: absolute;
+    width: ${HANDLE_SIZE}px;
+    height: ${HANDLE_SIZE}px;
+    background: #00aaff;
+    border: 1px solid white;
+    border-radius: 2px;
+    cursor: ${cursors[pos]};
+    pointer-events: auto;
+    transform: translate(-50%, -50%);
+    transition: background 0.1s;
+  `;
+  div.addEventListener("mouseenter", () => {
+    div.style.background = "#ff6600";
+  });
+  div.addEventListener("mouseleave", () => {
+    div.style.background = "#00aaff";
+  });
+  return div;
+}
+function createResizeOverlay(container, canvas) {
+  const overlayContainer = createOverlayContainer(canvas);
+  const border = createBorderDiv();
+  overlayContainer.appendChild(border);
+  const handles = /* @__PURE__ */ new Map();
+  const positions = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+  positions.forEach((pos) => {
+    const handle = createHandleDiv(pos);
+    handles.set(pos, handle);
+    overlayContainer.appendChild(handle);
+    handle.addEventListener("pointerdown", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onResizeStart(container, pos, e);
+    });
+  });
+  return {
+    container: overlayContainer,
+    handles,
+    border,
+    animationId: null
+  };
+}
+function updateOverlayPositions(container, canvas) {
+  var _a2, _b;
+  const overlay = container.__resizeOverlay;
+  if (!overlay) return;
+  const bounds = container.getBounds();
+  const canvasRect = canvas.getBoundingClientRect();
+  const renderer = ((_a2 = globalThis.__PIXI_APP__) == null ? void 0 : _a2.renderer) ?? ((_b = container.__pixiApp) == null ? void 0 : _b.renderer);
+  let scaleX = 1;
+  let scaleY = 1;
+  if (renderer) {
+    scaleX = canvasRect.width / renderer.width;
+    scaleY = canvasRect.height / renderer.height;
+  }
+  const x = bounds.x * scaleX;
+  const y = bounds.y * scaleY;
+  const w = bounds.width * scaleX;
+  const h = bounds.height * scaleY;
+  overlay.border.style.left = `${x}px`;
+  overlay.border.style.top = `${y}px`;
+  overlay.border.style.width = `${w}px`;
+  overlay.border.style.height = `${h}px`;
+  const handlePositions = {
+    nw: { x, y },
+    n: { x: x + w / 2, y },
+    ne: { x: x + w, y },
+    e: { x: x + w, y: y + h / 2 },
+    se: { x: x + w, y: y + h },
+    s: { x: x + w / 2, y: y + h },
+    sw: { x, y: y + h },
+    w: { x, y: y + h / 2 }
+  };
+  overlay.handles.forEach((handle, pos) => {
+    const { x: hx, y: hy } = handlePositions[pos];
+    handle.style.left = `${hx}px`;
+    handle.style.top = `${hy}px`;
+  });
+}
+function startUpdateLoop(container, canvas) {
+  const overlay = container.__resizeOverlay;
+  if (!overlay) return;
+  const update = () => {
+    if (!container.__resizable || !container.__resizeOverlay) return;
+    updateOverlayPositions(container, canvas);
+    overlay.animationId = requestAnimationFrame(update);
+  };
+  overlay.animationId = requestAnimationFrame(update);
+}
+function stopUpdateLoop(overlay) {
+  if (overlay.animationId !== null) {
+    cancelAnimationFrame(overlay.animationId);
+    overlay.animationId = null;
+  }
+}
+function onResizeStart(container, handle, e) {
+  if (!container.__resizable) return;
+  container.__resizing = true;
+  const bounds = container.getLocalBounds();
+  resizeStates.set(container, {
+    handle,
+    startX: e.clientX,
+    startY: e.clientY,
+    startScaleX: container.scale.x,
+    startScaleY: container.scale.y,
+    startPosX: container.x,
+    startPosY: container.y,
+    startBounds: { width: bounds.width, height: bounds.height }
+  });
+  const onMove = (moveEvent) => {
+    onResizeMove(container, moveEvent);
+  };
+  const onUp = () => {
+    onResizeEnd(container);
+    document.removeEventListener("pointermove", onMove);
+    document.removeEventListener("pointerup", onUp);
+  };
+  document.addEventListener("pointermove", onMove);
+  document.addEventListener("pointerup", onUp);
+}
+function onResizeMove(container, e) {
+  const state = resizeStates.get(container);
+  if (!state || !container.__resizing) return;
+  const dx = e.clientX - state.startX;
+  const dy = e.clientY - state.startY;
+  const baseWidth = state.startBounds.width;
+  const baseHeight = state.startBounds.height;
+  const startWidth = baseWidth * state.startScaleX;
+  const startHeight = baseHeight * state.startScaleY;
+  let newScaleX = state.startScaleX;
+  let newScaleY = state.startScaleY;
+  let newX = state.startPosX;
+  let newY = state.startPosY;
+  switch (state.handle) {
+    case "e":
+      newScaleX = (startWidth + dx) / baseWidth;
+      break;
+    case "w":
+      newScaleX = (startWidth - dx) / baseWidth;
+      newX = state.startPosX + dx;
+      break;
+    case "s":
+      newScaleY = (startHeight + dy) / baseHeight;
+      break;
+    case "n":
+      newScaleY = (startHeight - dy) / baseHeight;
+      newY = state.startPosY + dy;
+      break;
+    case "se":
+      newScaleX = (startWidth + dx) / baseWidth;
+      newScaleY = (startHeight + dy) / baseHeight;
+      break;
+    case "sw":
+      newScaleX = (startWidth - dx) / baseWidth;
+      newScaleY = (startHeight + dy) / baseHeight;
+      newX = state.startPosX + dx;
+      break;
+    case "ne":
+      newScaleX = (startWidth + dx) / baseWidth;
+      newScaleY = (startHeight - dy) / baseHeight;
+      newY = state.startPosY + dy;
+      break;
+    case "nw":
+      newScaleX = (startWidth - dx) / baseWidth;
+      newScaleY = (startHeight - dy) / baseHeight;
+      newX = state.startPosX + dx;
+      newY = state.startPosY + dy;
+      break;
+  }
+  if (newScaleX > 0.1) {
+    container.scale.x = newScaleX;
+    container.x = newX;
+  }
+  if (newScaleY > 0.1) {
+    container.scale.y = newScaleY;
+    container.y = newY;
+  }
+}
+function onResizeEnd(container) {
+  container.__resizing = false;
+  resizeStates.delete(container);
+}
+function enableResize(container) {
+  if (container.__resizeOverlay) return;
+  const canvas = getCanvasElement(container);
+  if (!canvas) {
+    console.warn("[ResizableController] Canvas not found");
+    return;
+  }
+  const overlay = createResizeOverlay(container, canvas);
+  container.__resizeOverlay = overlay;
+  updateOverlayPositions(container, canvas);
+  startUpdateLoop(container, canvas);
+}
+function disableResize(container) {
+  const overlay = container.__resizeOverlay;
+  if (overlay) {
+    stopUpdateLoop(overlay);
+    overlay.container.remove();
+    container.__resizeOverlay = void 0;
+  }
+  container.__resizing = false;
+  resizeStates.delete(container);
+}
+function isResizing(container) {
+  return container.__resizing === true;
+}
+
+// devtools/treePlugin.ts
+var draggableTreePlugin = {
+  extension: {
+    name: "draggable-tree",
+    type: "sceneTree"
+  },
+  updateNodeMetadata(node, metadata) {
+    metadata.buttons.push({
+      name: "drag",
+      icon: "\u270B",
+      type: "toggle",
+      value: node.__draggable ?? false
+    });
+    metadata.buttons.push({
+      name: "resize",
+      icon: "\u2921",
+      type: "toggle",
+      value: node.__resizable ?? false
+    });
+    const suffixes = [];
+    if (node.__draggable) suffixes.push("\u{1F500}");
+    if (node.__resizable) suffixes.push("\u{1F4D0}");
+    if (suffixes.length > 0) {
+      metadata.suffix = (metadata.suffix ?? "") + " " + suffixes.join("");
+    }
+    return metadata;
+  },
+  onButtonPress(container, buttonName, pressed) {
+    if (buttonName === "drag") {
+      container.__draggable = pressed;
+      if (pressed) {
+        enableDrag(container);
+      } else {
+        disableDrag(container);
+      }
+    } else if (buttonName === "resize") {
+      container.__resizable = pressed;
+      if (pressed) {
+        enableResize(container);
+      } else {
+        disableResize(container);
+      }
+    }
+  }
+};
+
+// devtools/overlayPlugin.ts
+var defaultSelectedStyle = {
+  backgroundColor: "hsla(340, 70%, 44%, 0.35)",
+  border: "1px solid hsla(0, 0%, 100%, 0.5)"
+};
+var defaultHoverStyle = {
+  backgroundColor: "hsla(192, 84%, 40%, 0.40)",
+  border: "1px solid hsla(0, 0%, 100%, 0.5)"
+};
+var draggableOverlayPlugin = {
+  extension: {
+    name: "draggable-overlay",
+    type: "overlay"
+  },
+  getSelectedStyle(node) {
+    const n = node;
+    if (n && isDragging(n)) {
+      return {
+        backgroundColor: "rgba(255, 165, 0, 0.3)",
+        border: "2px dashed orange"
+      };
+    }
+    if (n && isResizing(n)) {
+      return {
+        backgroundColor: "rgba(255, 165, 0, 0.3)",
+        border: "2px dashed orange"
+      };
+    }
+    if (n && (n.__draggable || n.__resizable)) {
+      return {
+        backgroundColor: "rgba(255, 165, 0, 0.2)",
+        border: "2px solid orange"
+      };
+    }
+    return defaultSelectedStyle;
+  },
+  getHoverStyle(node) {
+    const n = node;
+    if (n && (n.__draggable || n.__resizable)) {
+      return {
+        backgroundColor: "rgba(255, 165, 0, 0.15)",
+        border: "1px dashed orange"
+      };
+    }
+    return defaultHoverStyle;
+  }
+};
+
+// devtools/spriteTextPropertiesPlugin.ts
+var SECTION = "SpriteText";
+var spriteTextProps = [
+  "spriteText.text",
+  "spriteText.font",
+  "spriteText.tint",
+  "spriteText.fontSize",
+  "spriteText.pivotHorizontal",
+  "spriteText.pivotVertical",
+  "spriteText.lineAlign",
+  "spriteText.letterSpacing",
+  "spriteText.spaceWidth",
+  "spriteText.wordWrap",
+  "spriteText.wordWrapWidth",
+  "spriteText.breakWord",
+  "spriteText.allowLineBreak",
+  "spriteText.kerningEnabled",
+  "spriteText.curveEnabled",
+  "spriteText.curveControlXPercent",
+  "spriteText.curveControlYPercent"
+];
+function isSpriteText(container) {
+  const name = container.constructor.name;
+  if (name === "SpriteText") return true;
+  const c = container;
+  const isDuck = c._text !== void 0 && c._font !== void 0 && c._glyphs !== void 0;
+  if (isDuck) {
+    console.log("[SpriteText Plugin] Detected via duck typing:", name);
+  }
+  return isDuck;
+}
+var spriteTextPropertiesPlugin = {
+  extension: {
+    type: "sceneProperties",
+    name: "spritetext-properties",
+    priority: 10
+  },
+  testNode(container) {
+    return isSpriteText(container);
+  },
+  testProp(prop) {
+    return spriteTextProps.includes(prop);
+  },
+  setProperty(container, prop, value) {
+    const spriteText = container;
+    const propName = prop.replace("spriteText.", "");
+    switch (propName) {
+      case "text":
+        spriteText.text = value;
+        break;
+      case "font":
+        spriteText.font = value;
+        break;
+      case "tint":
+        if (typeof value === "string") {
+          spriteText.tint = parseInt(value.replace("#", ""), 16);
+        } else {
+          spriteText.tint = value;
+        }
+        break;
+      case "fontSize":
+        spriteText.fontSize = value;
+        break;
+      case "pivotHorizontal":
+        spriteText.pivotHorizontal = value;
+        break;
+      case "pivotVertical":
+        spriteText.pivotVertical = value;
+        break;
+      case "lineAlign":
+        spriteText.lineAlign = value;
+        break;
+      case "letterSpacing":
+        spriteText.letterSpacing = value;
+        break;
+      case "spaceWidth":
+        spriteText.spaceWidth = value;
+        break;
+      case "wordWrap":
+        spriteText.wordWrap = value;
+        break;
+      case "wordWrapWidth":
+        spriteText.wordWrapWidth = value;
+        break;
+      case "breakWord":
+        spriteText.breakWord = value;
+        break;
+      case "allowLineBreak":
+        spriteText.allowLineBreak = value;
+        break;
+      case "kerningEnabled":
+        spriteText.kerningEnabled = value;
+        break;
+      case "curveEnabled":
+        spriteText.curveEnabled = value;
+        break;
+      case "curveControlXPercent":
+        spriteText.curveControlXPercent = value;
+        break;
+      case "curveControlYPercent":
+        spriteText.curveControlYPercent = value;
+        break;
+    }
+  },
+  getProperties(container) {
+    try {
+      const spriteText = container;
+      return [
+        {
+          prop: "spriteText.text",
+          value: spriteText.text,
+          entry: {
+            section: SECTION,
+            label: "Text",
+            type: "text"
+          }
+        },
+        {
+          prop: "spriteText.plainText",
+          value: spriteText.plainText,
+          entry: {
+            section: SECTION,
+            label: "Plain Text",
+            type: "text"
+          }
+        },
+        {
+          prop: "spriteText.bbcodeEnabled",
+          value: spriteText.bbcodeEnabled,
+          entry: {
+            section: SECTION,
+            label: "BBCode Enabled",
+            type: "boolean"
+          }
+        },
+        {
+          prop: "spriteText.font",
+          value: spriteText.font,
+          entry: {
+            section: SECTION,
+            label: "Font",
+            type: "text"
+          }
+        },
+        {
+          prop: "spriteText.fonts",
+          value: spriteText.fonts.join(", "),
+          entry: {
+            section: SECTION,
+            label: "Fonts",
+            type: "text"
+          }
+        },
+        {
+          prop: "spriteText.tint",
+          // DevTools color picker expects number
+          value: spriteText.tint,
+          entry: {
+            section: SECTION,
+            label: "Tint",
+            type: "color"
+          }
+        },
+        {
+          prop: "spriteText.fontSize",
+          value: spriteText.fontSize,
+          entry: {
+            section: SECTION,
+            label: "Font Size",
+            type: "number"
+          }
+        },
+        {
+          prop: "spriteText.pivotHorizontal",
+          value: spriteText.pivotHorizontal,
+          entry: {
+            section: SECTION,
+            label: "Pivot H",
+            type: "select",
+            options: { options: ["left", "center", "right"] }
+          }
+        },
+        {
+          prop: "spriteText.pivotVertical",
+          value: spriteText.pivotVertical,
+          entry: {
+            section: SECTION,
+            label: "Pivot V",
+            type: "select",
+            options: { options: ["top", "middle", "bottom"] }
+          }
+        },
+        {
+          prop: "spriteText.lineAlign",
+          value: spriteText.lineAlign,
+          entry: {
+            section: SECTION,
+            label: "Line Align",
+            type: "select",
+            options: { options: ["left", "center", "right"] }
+          }
+        },
+        {
+          prop: "spriteText.letterSpacing",
+          value: spriteText.letterSpacing,
+          entry: {
+            section: SECTION,
+            label: "Letter Spacing",
+            type: "number"
+          }
+        },
+        {
+          prop: "spriteText.spaceWidth",
+          value: spriteText.spaceWidth,
+          entry: {
+            section: SECTION,
+            label: "Space Width",
+            type: "number"
+          }
+        },
+        {
+          prop: "spriteText.wordWrap",
+          value: spriteText.wordWrap,
+          entry: {
+            section: SECTION,
+            label: "Word Wrap",
+            type: "boolean"
+          }
+        },
+        {
+          prop: "spriteText.wordWrapWidth",
+          value: spriteText.wordWrapWidth,
+          entry: {
+            section: SECTION,
+            label: "Wrap Width",
+            type: "number"
+          }
+        },
+        {
+          prop: "spriteText.breakWord",
+          value: spriteText.breakWord,
+          entry: {
+            section: SECTION,
+            label: "Break Word",
+            type: "boolean"
+          }
+        },
+        {
+          prop: "spriteText.allowLineBreak",
+          value: spriteText.allowLineBreak,
+          entry: {
+            section: SECTION,
+            label: "Allow Line Break",
+            type: "boolean"
+          }
+        },
+        {
+          prop: "spriteText.kerningEnabled",
+          value: spriteText.kerningEnabled,
+          entry: {
+            section: SECTION,
+            label: "Kerning",
+            type: "boolean"
+          }
+        },
+        {
+          prop: "spriteText.curveEnabled",
+          value: spriteText.curveEnabled,
+          entry: {
+            section: SECTION,
+            label: "Curve Enabled",
+            type: "boolean"
+          }
+        },
+        {
+          prop: "spriteText.curveControlXPercent",
+          value: spriteText.curveControlXPercent,
+          entry: {
+            section: SECTION,
+            label: "Curve X %",
+            type: "number"
+          }
+        },
+        {
+          prop: "spriteText.curveControlYPercent",
+          value: spriteText.curveControlYPercent,
+          entry: {
+            section: SECTION,
+            label: "Curve Y %",
+            type: "number"
+          }
+        }
+      ];
+    } catch (e) {
+      console.error("[SpriteText Plugin] Error getting properties:", e);
+      return [];
+    }
+  }
+};
+
+// devtools/spinePropertiesPlugin.ts
+var SECTION2 = "Spine";
+var spineProps = [
+  "spine.currentAnimation",
+  "spine.currentSkin",
+  "spine.autoUpdate",
+  "spine.playAnimation"
+];
+function isSpine(container) {
+  var _a2, _b;
+  const name = container.constructor.name;
+  if (name === "Spine") return true;
+  const c = container;
+  return c.skeleton !== void 0 && c.state !== void 0 && ((_b = (_a2 = c.skeleton) == null ? void 0 : _a2.data) == null ? void 0 : _b.animations) !== void 0;
+}
+function getAnimationNames(spine) {
+  try {
+    return spine.skeleton.data.animations.map((a) => a.name);
+  } catch {
+    return [];
+  }
+}
+function getSkinNames(spine) {
+  try {
+    return spine.skeleton.data.skins.map((s) => s.name);
+  } catch {
+    return [];
+  }
+}
+function getCurrentAnimation(spine) {
+  var _a2;
+  try {
+    const track = spine.state.tracks[0];
+    return ((_a2 = track == null ? void 0 : track.animation) == null ? void 0 : _a2.name) ?? "(none)";
+  } catch {
+    return "(none)";
+  }
+}
+function getCurrentSkin(spine) {
+  var _a2;
+  try {
+    return ((_a2 = spine.skeleton.skin) == null ? void 0 : _a2.name) ?? "default";
+  } catch {
+    return "default";
+  }
+}
+var spinePropertiesPlugin = {
+  extension: {
+    type: "sceneProperties",
+    name: "spine-properties",
+    priority: 10
+  },
+  testNode(container) {
+    return isSpine(container);
+  },
+  testProp(prop) {
+    return spineProps.includes(prop);
+  },
+  setProperty(container, prop, value) {
+    const spine = container;
+    const propName = prop.replace("spine.", "");
+    switch (propName) {
+      case "currentSkin":
+        try {
+          spine.skeleton.setSkinByName(value);
+          spine.skeleton.setSlotsToSetupPose();
+        } catch (e) {
+          console.error("[Spine Plugin] Error setting skin:", e);
+        }
+        break;
+      case "playAnimation":
+        try {
+          if (value && value !== "(none)") {
+            spine.state.setAnimation(0, value, true);
+          } else {
+            spine.state.setEmptyAnimation(0, 0.2);
+          }
+        } catch (e) {
+          console.error("[Spine Plugin] Error playing animation:", e);
+        }
+        break;
+      case "autoUpdate":
+        spine.autoUpdate = value;
+        break;
+    }
+  },
+  getProperties(container) {
+    try {
+      const spine = container;
+      const animations = getAnimationNames(spine);
+      const skins = getSkinNames(spine);
+      const currentAnim = getCurrentAnimation(spine);
+      const currentSkin = getCurrentSkin(spine);
+      return [
+        {
+          prop: "spine.currentAnimation",
+          value: currentAnim,
+          entry: {
+            section: SECTION2,
+            label: "Current Animation",
+            type: "text",
+            options: { disabled: true }
+          }
+        },
+        {
+          prop: "spine.playAnimation",
+          value: currentAnim,
+          entry: {
+            section: SECTION2,
+            label: "Play Animation",
+            type: "select",
+            options: { options: ["(none)", ...animations] }
+          }
+        },
+        {
+          prop: "spine.currentSkin",
+          value: currentSkin,
+          entry: {
+            section: SECTION2,
+            label: "Skin",
+            type: "select",
+            options: { options: skins }
+          }
+        },
+        {
+          prop: "spine.autoUpdate",
+          value: spine.autoUpdate,
+          entry: {
+            section: SECTION2,
+            label: "Auto Update",
+            type: "boolean"
+          }
+        }
+      ];
+    } catch (e) {
+      console.error("[Spine Plugin] Error getting properties:", e);
+      return [];
+    }
+  }
+};
+
+// devtools/index.ts
+var gThis = globalThis;
+var _a;
+gThis.__PIXI_DEVTOOLS__ = {
+  ...gThis.__PIXI_DEVTOOLS__,
+  extensions: [
+    ...((_a = gThis.__PIXI_DEVTOOLS__) == null ? void 0 : _a.extensions) ?? [],
+    draggableTreePlugin,
+    draggableOverlayPlugin,
+    spriteTextPropertiesPlugin,
+    spinePropertiesPlugin
+  ]
+};
+
+// utils/Logger.ts
+var Logger = class _Logger {
+  static instance;
+  config;
+  // Terminal colors (for Node.js environment)
+  terminalColors = {
+    reset: "\x1B[0m",
+    red: "\x1B[31m",
+    yellow: "\x1B[33m",
+    blue: "\x1B[34m",
+    green: "\x1B[32m",
+    gray: "\x1B[90m",
+    cyan: "\x1B[36m",
+    magenta: "\x1B[35m",
+    white: "\x1B[37m"
+  };
+  // Browser console colors (using CSS)
+  browserColors = {
+    timestamp: "color: gray",
+    context: "color: cyan; font-weight: bold",
+    message: "color: white",
+    error: "color: red; font-weight: bold",
+    warn: "color: orange; font-weight: bold",
+    info: "color: dodgerblue; font-weight: bold",
+    debug: "color: green",
+    trace: "color: gray"
+  };
+  levelLabels = {
+    [0 /* ERROR */]: "ERROR",
+    [1 /* WARN */]: "WARN",
+    [2 /* INFO */]: "INFO",
+    [3 /* DEBUG */]: "DEBUG",
+    [4 /* TRACE */]: "TRACE"
+  };
+  levelColors = {
+    [0 /* ERROR */]: this.terminalColors.red,
+    [1 /* WARN */]: this.terminalColors.yellow,
+    [2 /* INFO */]: this.terminalColors.blue,
+    [3 /* DEBUG */]: this.terminalColors.green,
+    [4 /* TRACE */]: this.terminalColors.gray
+  };
+  levelBrowserColors = {
+    [0 /* ERROR */]: this.browserColors.error,
+    [1 /* WARN */]: this.browserColors.warn,
+    [2 /* INFO */]: this.browserColors.info,
+    [3 /* DEBUG */]: this.browserColors.debug,
+    [4 /* TRACE */]: this.browserColors.trace
+  };
+  /**
+   * Private constructor for singleton pattern
+   */
+  constructor() {
+    var _a2;
+    this.config = {
+      level: 3 /* DEBUG */,
+      // Default log level
+      enabled: true,
+      // Logging enabled by default
+      showTimestamp: false,
+      // Show timestamps by default
+      showColors: true
+      // Show colors by default
+    };
+    if ((_a2 = import.meta.env) == null ? void 0 : _a2.DEV) {
+      console.warn(
+        "[Logger] For better debugging experience, add Logger.ts to DevTools ignore list:\nDevTools \u2192 Settings (F1) \u2192 Ignore List \u2192 Add pattern: /Logger\\.ts$"
+      );
+    }
+  }
+  /**
+   * Get the singleton instance of the Logger
+   */
+  static getInstance() {
+    if (!_Logger.instance) {
+      _Logger.instance = new _Logger();
+    }
+    return _Logger.instance;
+  }
+  /**
+   * Configure the logger
+   * @param config Configuration options
+   */
+  configure(config) {
+    this.config = { ...this.config, ...config };
+  }
+  /**
+   * Enable or disable logging
+   * @param enabled Whether logging is enabled
+   */
+  setEnabled(enabled) {
+    this.config.enabled = enabled;
+  }
+  /**
+   * Set the log level
+   * @param level The log level to set
+   */
+  setLevel(level) {
+    this.config.level = level;
+  }
+  /**
+   * Get the current log level
+   */
+  getLevel() {
+    return this.config.level;
+  }
+  /**
+   * Log an error message
+   * @param message The message to log
+   * @param args Additional arguments to log
+   */
+  error(message, ...args) {
+    this.log(0 /* ERROR */, message, ...args);
+  }
+  /**
+   * Log a warning message
+   * @param message The message to log
+   * @param args Additional arguments to log
+   */
+  warn(message, ...args) {
+    this.log(1 /* WARN */, message, ...args);
+  }
+  /**
+   * Log an info message
+   * @param message The message to log
+   * @param args Additional arguments to log
+   */
+  info(message, ...args) {
+    this.log(2 /* INFO */, message, ...args);
+  }
+  /**
+   * Log a debug message
+   * @param message The message to log
+   * @param args Additional arguments to log
+   */
+  debug(message, ...args) {
+    this.log(3 /* DEBUG */, message, ...args);
+  }
+  /**
+   * Log a trace message
+   * @param message The message to log
+   * @param args Additional arguments to log
+   */
+  trace(message, ...args) {
+    this.log(4 /* TRACE */, message, ...args);
+  }
+  /**
+   * Log a message with a specific log level
+   * @param level The log level
+   * @param message The message to log
+   * @param args Additional arguments to log
+   */
+  log(level, message, ...args) {
+    if (!this.config.enabled || level > this.config.level) {
+      return;
+    }
+    if (!this.shouldLogMessage(message)) {
+      return;
+    }
+    const isBrowser = typeof window !== "undefined";
+    if (isBrowser && this.config.showColors) {
+      this.logBrowser(level, message, ...args);
+    } else {
+      this.logTerminal(level, message, ...args);
+    }
+  }
+  extractContext(message) {
+    const contextMatch = message.match(/^\[([^\]]+)\]\s(.*)$/);
+    if (!contextMatch) {
+      return {
+        context: "",
+        messageContent: message
+      };
+    }
+    return {
+      context: contextMatch[1],
+      messageContent: contextMatch[2]
+    };
+  }
+  matchesFilter(value, matchers) {
+    if (!(matchers == null ? void 0 : matchers.length)) {
+      return false;
+    }
+    return matchers.some((matcher) => {
+      if (typeof matcher === "string") {
+        return value.includes(matcher);
+      }
+      matcher.lastIndex = 0;
+      return matcher.test(value);
+    });
+  }
+  shouldLogMessage(message) {
+    var _a2, _b;
+    const filter = this.config.filter;
+    if (!filter) {
+      return true;
+    }
+    const hasFilters = Boolean(((_a2 = filter.contexts) == null ? void 0 : _a2.length) || ((_b = filter.messages) == null ? void 0 : _b.length));
+    if (!hasFilters) {
+      return true;
+    }
+    const { context, messageContent } = this.extractContext(message);
+    const contextMatches = this.matchesFilter(context, filter.contexts);
+    const messageMatches = this.matchesFilter(messageContent, filter.messages);
+    const matches = contextMatches || messageMatches;
+    return filter.mode === "exclude" ? !matches : matches;
+  }
+  /**
+   * Log a message in terminal/node environment
+   */
+  logTerminal(level, message, ...args) {
+    let timestamp = "";
+    let levelStr = "";
+    let contextPart = "";
+    const contextMatch = message.match(/^\[([^\]]+)\]\s(.*)$/);
+    let messageContent = message;
+    if (contextMatch) {
+      contextPart = `[${contextMatch[1]}] `;
+      messageContent = contextMatch[2];
+    }
+    if (this.config.showTimestamp) {
+      const now = (/* @__PURE__ */ new Date()).toISOString();
+      timestamp = `[${now}] `;
+    }
+    levelStr = `[${this.levelLabels[level]}] `;
+    if (this.config.showColors) {
+      const levelColor = this.levelColors[level];
+      const contextColor = this.terminalColors.cyan;
+      const timestampColor = this.terminalColors.gray;
+      const messageColor = this.terminalColors.white;
+      timestamp = `${timestampColor}${timestamp}${this.terminalColors.reset}`;
+      levelStr = `${levelColor}${levelStr}${this.terminalColors.reset}`;
+      if (contextPart) {
+        contextPart = `${contextColor}${contextPart}${this.terminalColors.reset}`;
+      }
+      messageContent = `${messageColor}${messageContent}${this.terminalColors.reset}`;
+    }
+    const formattedMessage = timestamp + levelStr + contextPart + messageContent;
+    switch (level) {
+      case 0 /* ERROR */:
+        console.error(formattedMessage, ...args);
+        break;
+      case 1 /* WARN */:
+        console.warn(formattedMessage, ...args);
+        break;
+      case 2 /* INFO */:
+        console.info(formattedMessage, ...args);
+        break;
+      case 3 /* DEBUG */:
+      case 4 /* TRACE */:
+      default:
+        console.log(formattedMessage, ...args);
+        break;
+    }
+  }
+  /**
+   * Log a message in browser environment with CSS styling
+   */
+  logBrowser(level, message, ...args) {
+    const contextMatch = message.match(/^\[([^\]]+)\]\s(.*)$/);
+    let context = "";
+    let messageContent = message;
+    if (contextMatch) {
+      context = contextMatch[1];
+      messageContent = contextMatch[2];
+    }
+    let format = "";
+    const formatArgs = [];
+    if (this.config.showTimestamp) {
+      const now = (/* @__PURE__ */ new Date()).toISOString();
+      format += "%c[" + now + "] ";
+      formatArgs.push(this.browserColors.timestamp);
+    }
+    format += "%c[" + this.levelLabels[level] + "] ";
+    formatArgs.push(this.levelBrowserColors[level]);
+    if (context) {
+      format += "%c[" + context + "] ";
+      formatArgs.push(this.browserColors.context);
+    }
+    format += "%c" + messageContent;
+    formatArgs.push(this.browserColors.message);
+    switch (level) {
+      case 0 /* ERROR */:
+        console.error(format, ...formatArgs, ...args);
+        break;
+      case 1 /* WARN */:
+        console.warn(format, ...formatArgs, ...args);
+        break;
+      case 2 /* INFO */:
+        console.info(format, ...formatArgs, ...args);
+        break;
+      case 3 /* DEBUG */:
+      case 4 /* TRACE */:
+      default:
+        console.log(format, ...formatArgs, ...args);
+        break;
+    }
+  }
+  /**
+   * Creates a context-specific logger.
+   *
+   * Context loggers automatically prefix all log messages with a context tag.
+   * Commonly used in plugins and classes to identify log sources.
+   *
+   * @param context - Context name (e.g., 'MyPlugin', 'SceneManager')
+   * @returns ContextLogger instance
+   *
+   * @example
+   * ```typescript
+   * class DisplayPlugin {
+   *   private logger = logger.createContextLogger('DisplayPlugin');
+   *
+   *   initialize() {
+   *     this.logger.info('Initializing display');
+   *     // Output: [INFO] [DisplayPlugin] Initializing display
+   *   }
+   * }
+   * ```
+   */
+  createContextLogger(context) {
+    return new ContextLogger(this, context);
+  }
+};
+var ContextLogger = class {
+  logger;
+  context;
+  constructor(logger2, context) {
+    this.logger = logger2;
+    this.context = context;
+  }
+  /**
+   * Log an error message
+   * @param message The message to log
+   * @param args Additional arguments to log
+   */
+  error(message, ...args) {
+    this.logger.error(`[${this.context}] ${message}`, ...args);
+  }
+  /**
+   * Log a warning message
+   * @param message The message to log
+   * @param args Additional arguments to log
+   */
+  warn(message, ...args) {
+    this.logger.warn(`[${this.context}] ${message}`, ...args);
+  }
+  /**
+   * Log an info message
+   * @param message The message to log
+   * @param args Additional arguments to log
+   */
+  info(message, ...args) {
+    this.logger.info(`[${this.context}] ${message}`, ...args);
+  }
+  /**
+   * Log a debug message
+   * @param message The message to log
+   * @param args Additional arguments to log
+   */
+  debug(message, ...args) {
+    this.logger.debug(`[${this.context}] ${message}`, ...args);
+  }
+  /**
+   * Log a trace message
+   * @param message The message to log
+   * @param args Additional arguments to log
+   */
+  trace(message, ...args) {
+    this.logger.trace(`[${this.context}] ${message}`, ...args);
+  }
+};
+var logger = Logger.getInstance();
+var contextLoggers = /* @__PURE__ */ new Map();
+function getLogger(context) {
+  let cached = contextLoggers.get(context);
+  if (!cached) {
+    cached = new ContextLogger(logger, context);
+    contextLoggers.set(context, cached);
+  }
+  return cached;
+}
+
+// plugins/Plugin.types.ts
+var ENGINE_HOOKS = {
+  onEngineReady: Symbol("onEngineReady"),
+  onPause: Symbol("onPause"),
+  onResume: Symbol("onResume"),
+  onResize: Symbol("onResize")
+};
+var devtools = globalThis.__PIXI_DEVTOOLS__;
+if (devtools == null ? void 0 : devtools.extensions) {
+  devtools.extensions = devtools.extensions.filter(
+    (e) => {
+      var _a2;
+      return ((_a2 = e == null ? void 0 : e.extension) == null ? void 0 : _a2.name) !== "layout-scene-overlay";
+    }
+  );
+}
+var PixiEngine = class {
+  /**
+   * Creates a new PixiEngine instance.
+   *
+   * The constructor creates the underlying PixiJS application but does not initialize it.
+   * Call {@link initialize} after registering all plugins to start the engine.
+   *
+   * @param config - Engine configuration options extending PixiJS ApplicationOptions
+   *
+   * @example
+   * ```typescript
+   * const engine = new PixiEngine({
+   *   width: 1920,
+   *   height: 1080,
+   *   backgroundColor: 0x1a1a1a,
+   *   antialias: true,
+   *   resolution: window.devicePixelRatio
+   * });
+   * ```
+   */
+  constructor(config) {
+    this.config = config;
+    getLogger("PixiEngine").info("PixiEngine initializing with config", config);
+    this._pixiApp = new Application();
+    getLogger("PixiEngine").info("PixiEngine initialized successfully");
+  }
+  _pixiApp;
+  plugins = /* @__PURE__ */ new Map();
+  isInitialized = false;
+  pluginStates = /* @__PURE__ */ new Map();
+  readyPlugins = /* @__PURE__ */ new Set();
+  /**
+   * Registers a plugin with the engine.
+   *
+   * Plugins must be registered before calling {@link initialize}. If the engine is already
+   * initialized, the plugin will be initialized immediately upon registration.
+   *
+   * The plugin's state is set to {@link PluginState.REGISTERED} and it will be initialized
+   * during the engine's initialization phase based on its priority and dependencies.
+   *
+   * @param plugin - The plugin instance to register
+   * @returns `true` if the plugin was successfully registered, `false` if a plugin with the same name already exists
+   *
+   * @example
+   * ```typescript
+   * const scenePlugin = new ScenePlugin();
+   * const success = engine.registerPlugin(scenePlugin);
+   *
+   * if (!success) {
+   *   console.warn('Plugin already registered');
+   * }
+   * ```
+   *
+   * @see {@link EnginePlugin} for plugin interface details
+   * @see {@link getPlugin} to retrieve registered plugins
+   */
+  registerPlugin(plugin) {
+    if (this.plugins.has(plugin.name)) {
+      getLogger("PixiEngine").warn(`Plugin with name "${plugin.name}" is already registered.`);
+      return false;
+    }
+    plugin.state = "registered" /* REGISTERED */;
+    this.pluginStates.set(plugin.name, "registered" /* REGISTERED */);
+    this.plugins.set(plugin.name, plugin);
+    getLogger("PixiEngine").debug(`Plugin "${plugin.name}" registered`);
+    if (this.isInitialized) {
+      this.initializePlugin(plugin);
+    }
+    return true;
+  }
+  /**
+   * Checks if a plugin has completed initialization and is ready to use.
+   *
+   * A plugin is considered ready when it has successfully completed both its
+   * `initialize()` and `onReady()` lifecycle methods.
+   *
+   * @param name - The name of the plugin to check
+   * @returns `true` if the plugin is in the {@link PluginState.READY} state, `false` otherwise
+   *
+   * @example
+   * ```typescript
+   * if (engine.isPluginReady('ScenePlugin')) {
+   *   const scenePlugin = engine.getPlugin<ScenePlugin>('ScenePlugin');
+   *   scenePlugin?.loadScene('MainMenu');
+   * }
+   * ```
+   */
+  isPluginReady(name) {
+    return this.readyPlugins.has(name);
+  }
+  /**
+   * Waits asynchronously for specific plugins to reach the ready state.
+   *
+   * This method is useful when you need to ensure certain plugins are fully initialized
+   * before proceeding with game logic. It polls every 10ms until all specified plugins
+   * are ready.
+   *
+   * @param pluginNames - Array of plugin names to wait for
+   * @returns A promise that resolves when all specified plugins are ready
+   *
+   * @example
+   * ```typescript
+   * // Wait for multiple plugins before starting the game
+   * await engine.waitForPlugins(['ScenePlugin', 'AudioPlugin', 'GameStatePlugin']);
+   *
+   * // Now safe to use these plugins
+   * const scenePlugin = engine.getPlugin<ScenePlugin>('ScenePlugin');
+   * scenePlugin?.loadScene('MainMenu');
+   * ```
+   *
+   * @remarks
+   * If any of the specified plugins are not registered, this method will wait indefinitely.
+   * Ensure all required plugins are registered before calling this method.
+   */
+  async waitForPlugins(pluginNames) {
+    const checkPlugins = () => {
+      return pluginNames.every((name) => this.isPluginReady(name));
+    };
+    if (checkPlugins()) {
+      return Promise.resolve();
+    }
+    return new Promise((resolve) => {
+      const checkInterval = setInterval(() => {
+        if (checkPlugins()) {
+          clearInterval(checkInterval);
+          resolve();
+        }
+      }, 10);
+    });
+  }
+  /**
+   * Initialize a single plugin with dependency checking
+   */
+  async initializePlugin(plugin) {
+    if (this.pluginStates.get(plugin.name) !== "registered" /* REGISTERED */) {
+      return;
+    }
+    try {
+      getLogger("PixiEngine").debug(`Initializing plugin: ${plugin.name}`);
+      plugin.state = "initializing" /* INITIALIZING */;
+      this.pluginStates.set(plugin.name, "initializing" /* INITIALIZING */);
+      await plugin.initialize(this);
+      plugin.state = "initialized" /* INITIALIZED */;
+      this.pluginStates.set(plugin.name, "initialized" /* INITIALIZED */);
+      getLogger("PixiEngine").debug(`Plugin "${plugin.name}" initialized successfully`);
+    } catch (error) {
+      plugin.state = "error" /* ERROR */;
+      this.pluginStates.set(plugin.name, "error" /* ERROR */);
+      getLogger("PixiEngine").error(`Failed to initialize plugin "${plugin.name}":`, error);
+      throw error;
+    }
+  }
+  /**
+   * Call onReady for all plugins after initialization is complete
+   */
+  async finalizePlugins() {
+    const plugins = this.getPluginsSortedByPriorityAndDependencies();
+    for (const plugin of plugins) {
+      try {
+        if (plugin.onReady) {
+          getLogger("PixiEngine").debug(`Calling onReady for plugin: ${plugin.name}`);
+          await plugin.onReady(this);
+        }
+        plugin.state = "ready" /* READY */;
+        this.pluginStates.set(plugin.name, "ready" /* READY */);
+        this.readyPlugins.add(plugin.name);
+        getLogger("PixiEngine").debug(`Plugin "${plugin.name}" is now ready`);
+      } catch (error) {
+        plugin.state = "error" /* ERROR */;
+        this.pluginStates.set(plugin.name, "error" /* ERROR */);
+        getLogger("PixiEngine").error(`Failed to finalize plugin "${plugin.name}":`, error);
+        throw error;
+      }
+    }
+  }
+  /**
+   * Initializes all plugins.
+   */
+  async initializePlugins() {
+    const sortedPlugins = this.getPluginsSortedByPriorityAndDependencies();
+    getLogger("PixiEngine").info(`Initializing ${sortedPlugins.length} plugins`);
+    for (const plugin of sortedPlugins) {
+      await this.initializePlugin(plugin);
+    }
+    getLogger("PixiEngine").info("All plugins initialized and ready");
+  }
+  /**
+   * Get plugins sorted by priority and dependency order
+   */
+  getPluginsSortedByPriorityAndDependencies() {
+    const plugins = Array.from(this.plugins.values());
+    const resolved = [];
+    const resolving = /* @__PURE__ */ new Set();
+    const missingDependencies = [];
+    const resolve = (plugin) => {
+      if (resolved.includes(plugin)) return;
+      if (resolving.has(plugin.name)) {
+        getLogger("PixiEngine").warn(`Circular dependency detected for plugin: ${plugin.name}`);
+        return;
+      }
+      resolving.add(plugin.name);
+      if (plugin.dependencies && plugin.dependencies.length > 0) {
+        plugin.dependencies.forEach((depName) => {
+          const depPlugin = this.plugins.get(depName);
+          if (depPlugin) {
+            resolve(depPlugin);
+          } else {
+            missingDependencies.push(
+              `Plugin "${plugin.name}" requires "${depName}" but it's not registered`
+            );
+          }
+        });
+      }
+      resolving.delete(plugin.name);
+      resolved.push(plugin);
+    };
+    const sortedByPriority = plugins.sort((a, b) => (a.priority || 100) - (b.priority || 100));
+    sortedByPriority.forEach((plugin) => resolve(plugin));
+    if (missingDependencies.length > 0) {
+      const errorMessage = [
+        "\u274C Plugin dependency validation failed:",
+        ...missingDependencies.map((msg) => `   \u2022 ${msg}`),
+        "",
+        "\u{1F4A1} Solutions:",
+        "   \u2022 Register missing plugins before calling engine.initialize()",
+        "   \u2022 Remove dependencies from plugin configuration",
+        "   \u2022 Make dependencies optional in plugin code"
+      ].join("\n");
+      getLogger("PixiEngine").error(errorMessage);
+      throw new Error(`Missing plugin dependencies. Check console for details.`);
+    }
+    getLogger("PixiEngine").debug(
+      "Plugin initialization order:",
+      resolved.map((p) => `${p.name}(priority:${p.priority})`)
+    );
+    return resolved;
+  }
+  /**
+   * Initializes the engine and all registered plugins.
+   *
+   * This method performs the complete engine startup sequence:
+   * 1. Initializes the PixiJS application with the provided configuration
+   * 2. Appends the canvas to the document body
+   * 3. Initializes all plugins in dependency order (respecting priorities)
+   * 4. Calls `onReady()` on all plugins after initialization
+   * 5. Sets up window resize event handling
+   *
+   * Plugins are initialized in order based on:
+   * - Dependencies (plugins wait for their dependencies)
+   * - Priority (lower numbers = higher priority)
+   *
+   * @returns A promise that resolves when the engine and all plugins are fully initialized
+   * @throws {Error} If plugin dependencies are missing or circular dependencies are detected
+   *
+   * @example
+   * ```typescript
+   * const engine = new PixiEngine({ width: 1920, height: 1080 });
+   *
+   * // Register plugins
+   * engine.registerPlugin(new ScenePlugin());
+   * engine.registerPlugin(new AudioPlugin());
+   *
+   * // Initialize everything
+   * await engine.initialize();
+   *
+   * // Engine is now ready to use
+   * console.log('Engine initialized successfully');
+   * ```
+   *
+   * @remarks
+   * - This method should only be called once
+   * - All plugins should be registered before calling this method
+   * - The canvas will be automatically appended to `document.body`
+   * - Window resize events are automatically handled
+   */
+  async initialize() {
+    const width = this.config.width ?? 1920;
+    const height = this.config.height ?? 1080;
+    await this._pixiApp.init({
+      width,
+      height,
+      antialias: true,
+      autoStart: false,
+      sharedTicker: false,
+      useBackBuffer: true,
+      autoDensity: false,
+      ...this.config
+    });
+    if (this.config.resizeTo || this.config.appendTo) {
+      (this.config.resizeTo || this.config.appendTo).appendChild(this._pixiApp.canvas);
+    } else {
+      document.body.appendChild(this._pixiApp.canvas);
+    }
+    getLogger("PixiEngine").info("Starting engine initialization");
+    await this.initializePlugins();
+    await this.finalizePlugins();
+    window.onresize = () => {
+      this.onResize();
+    };
+    this.onResize();
+    getLogger("PixiEngine").info("Engine initialization completed");
+    this.isInitialized = true;
+    await this.notifyEngineReady();
+    getLogger("PixiEngine").info("PixiEngine initialized");
+  }
+  /**
+   * Handles window resize events and notifies plugins.
+   *
+   * This method is automatically called when the window is resized and during
+   * engine initialization. It updates the renderer size and notifies all plugins
+   * about the resize event in priority order.
+   *
+   * If a plugin's `onResize` method returns `true`, it indicates that the plugin
+   * has handled the resize and propagation stops. Otherwise, the engine will
+   * resize the renderer to match the window dimensions.
+   *
+   * @remarks
+   * This is a private method called automatically by the engine.
+   * Plugins can implement `onResize(width, height)` to handle custom resize logic.
+   */
+  onResize(_width, _height) {
+    const renderer = this._pixiApp.renderer;
+    const width = _width ?? window.innerWidth;
+    const height = _height ?? window.innerHeight;
+    const sortedPlugins = this.getPlugins();
+    let handled = false;
+    getLogger("PixiEngine").info(`Window resized: ${width}x${height}, dpr: ${renderer.resolution}`);
+    for (const plugin of sortedPlugins) {
+      if (plugin[ENGINE_HOOKS.onResize] && plugin[ENGINE_HOOKS.onResize](width, height, this.devicePixelRatio)) {
+        handled = true;
+        getLogger("PixiEngine").debug(`Resize handled by plugin: ${plugin.name}`);
+        break;
+      }
+    }
+    if (!handled) {
+      renderer.resize(width, height);
+      getLogger("PixiEngine").info(`Resized renderer to ${width}x${height}`);
+    }
+  }
+  /**
+   * Notifies all plugins that the engine is fully ready
+   * This is called after all plugins are initialized and ready
+   */
+  async notifyEngineReady() {
+    const sortedPlugins = this.getPlugins();
+    for (const plugin of sortedPlugins) {
+      if (plugin[ENGINE_HOOKS.onEngineReady]) {
+        try {
+          await plugin[ENGINE_HOOKS.onEngineReady](this);
+          getLogger("PixiEngine").debug(`Plugin ${plugin.name} onEngineReady completed`);
+        } catch (error) {
+          getLogger("PixiEngine").error(`Plugin ${plugin.name} onEngineReady failed:`, error);
+        }
+      }
+    }
+  }
+  /**
+   * Retrieves a registered plugin by name with type safety.
+   *
+   * This method allows you to access registered plugins with proper TypeScript typing.
+   * Returns `undefined` if the plugin is not found.
+   *
+   * @typeParam T - The plugin type extending {@link EnginePlugin}
+   * @param name - The unique name of the plugin to retrieve
+   * @returns The plugin instance if found, `undefined` otherwise
+   *
+   * @example
+   * ```typescript
+   * // Get plugin with type safety
+   * const scenePlugin = engine.getPlugin<ScenePlugin>('ScenePlugin');
+   *
+   * if (scenePlugin) {
+   *   scenePlugin.loadScene('MainMenu');
+   * } else {
+   *   console.warn('ScenePlugin not found');
+   * }
+   * ```
+   *
+   * @see {@link getPluginThrow} for a version that throws an error if plugin is not found
+   */
+  getPlugin(name) {
+    return this.plugins.get(name);
+  }
+  /**
+   * Retrieves a registered plugin by name, throwing an error if not found.
+   *
+   * This is a convenience method for cases where you expect the plugin to exist
+   * and want to avoid null checks.
+   *
+   * @typeParam T - The plugin type extending {@link EnginePlugin}
+   * @param name - The unique name of the plugin to retrieve
+   * @returns The plugin instance
+   * @throws {Error} If the plugin is not registered
+   *
+   * @example
+   * ```typescript
+   * // Get plugin or throw error
+   * const scenePlugin = engine.getPluginThrow<ScenePlugin>('ScenePlugin');
+   * scenePlugin.loadScene('MainMenu'); // No null check needed
+   * ```
+   *
+   * @see {@link getPlugin} for a version that returns undefined instead of throwing
+   */
+  getPluginThrow(name) {
+    const plugin = this.getPlugin(name);
+    if (!plugin) {
+      throw new Error(`Plugin with name "${name}" is not registered.`);
+    }
+    return plugin;
+  }
+  /**
+   * Gets all registered plugins sorted by priority.
+   *
+   * Returns an array of all plugins currently registered with the engine,
+   * sorted by priority in descending order (highest priority first).
+   *
+   * @returns Array of all registered plugins sorted by priority
+   *
+   * @example
+   * ```typescript
+   * // List all registered plugins
+   * const plugins = engine.getPlugins();
+   * plugins.forEach(plugin => {
+   *   console.log(`Plugin: ${plugin.name}, Priority: ${plugin.priority}, State: ${plugin.state}`);
+   * });
+   * ```
+   *
+   * @example
+   * ```typescript
+   * // Find plugins by type
+   * const plugins = engine.getPlugins();
+   * const scenePlugins = plugins.filter(p => p.name.includes('Scene'));
+   * ```
+   *
+   * @remarks
+   * Plugins with undefined priority are treated as having priority 0.
+   * Lower priority numbers mean higher priority (e.g., priority 1 comes before priority 10).
+   */
+  getPlugins() {
+    return Array.from(this.plugins.values()).sort((a, b) => (b.priority || 0) - (a.priority || 0));
+  }
+  /**
+   * Updates the plugins
+   * @param deltaTime Frame duration
+   */
+  updatePlugins(deltaTime) {
+    const sortedPlugins = this.getPlugins();
+    for (const plugin of sortedPlugins) {
+      if (plugin.onUpdate && plugin.onUpdate(deltaTime)) {
+        getLogger("PixiEngine").debug(`Update cycle handled by plugin: ${plugin.name}`);
+        break;
+      }
+    }
+  }
+  /**
+   * Main update loop called every frame.
+   *
+   * This method should be called from your game's main loop (typically GSAP ticker)
+   * to update all plugins. Plugins are updated in priority order, and update
+   * propagation stops if a plugin returns `true` from its `onUpdate` method.
+   *
+   * @param deltaTime - Time elapsed since the last frame in seconds
+   *
+   * @example
+   * ```typescript
+   * // Integrate with GSAP ticker
+   * import { gsap } from 'gsap';
+   *
+   * gsap.ticker.add((time, deltaTime) => {
+   *   engine.onUpdate(deltaTime);
+   * });
+   * ```
+   *
+   * @example
+   * ```typescript
+   * // Manual update loop
+   * let lastTime = performance.now();
+   *
+   * function gameLoop() {
+   *   const currentTime = performance.now();
+   *   const deltaTime = (currentTime - lastTime) / 1000;
+   *   lastTime = currentTime;
+   *
+   *   engine.onUpdate(deltaTime);
+   *   requestAnimationFrame(gameLoop);
+   * }
+   *
+   * gameLoop();
+   * ```
+   *
+   * @remarks
+   * The deltaTime is typically provided in seconds by GSAP ticker.
+   * Plugins with higher priority (lower priority number) are updated first.
+   */
+  onUpdate(deltaTime) {
+    this.updatePlugins(deltaTime);
+  }
+  /**
+   * Gets the underlying PixiJS Application instance.
+   *
+   * Provides direct access to the PixiJS application for advanced use cases
+   * such as accessing the renderer, ticker, or other PixiJS-specific features.
+   *
+   * @returns The PixiJS Application instance
+   *
+   * @example
+   * ```typescript
+   * // Access the renderer
+   * const renderer = engine.pixiApp.renderer;
+   * console.log('Renderer type:', renderer.type);
+   *
+   * // Access the ticker
+   * engine.pixiApp.ticker.add((delta) => {
+   *   console.log('Ticker delta:', delta);
+   * });
+   * ```
+   *
+   * @remarks
+   * Use this getter sparingly. Most functionality should be accessed through
+   * plugins or the engine's public API.
+   */
+  get pixiApp() {
+    return this._pixiApp;
+  }
+  get platform() {
+    return isMobile.any ? "mobile" : "desktop";
+  }
+  /**
+   * Gets the device pixel ratio, capped at 2 for performance reasons.
+   * 
+   * @returns The device pixel ratio, capped at 2
+   */
+  get devicePixelRatio() {
+    return Math.min(window.devicePixelRatio ?? 1, 2);
+  }
+};
+
+export { PixiEngine };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map