@rb-games/core 0.1.0

package/dist/devtools/index.js

@@ -0,0 +1,884 @@
+// 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 isDraggable(container) {
+  return container.__draggable === true;
+}
+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 isResizable(container) {
+  return container.__resizable === true;
+}
+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
+  ]
+};
+
+export { disableDrag, disableResize, draggableOverlayPlugin, draggableTreePlugin, enableDrag, enableResize, isDraggable, isDragging, isResizable, isResizing, spinePropertiesPlugin, spriteTextPropertiesPlugin };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map