@ksteinstudio/game-controller 1.0.0

package/dist/index.js

@@ -0,0 +1,1116 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  MessageType: () => MessageType,
+  angleFromVector: () => angleFromVector,
+  applyDeadzone: () => applyDeadzone,
+  applyDeadzoneToVector: () => applyDeadzoneToVector,
+  calculateCanvasDimensions: () => calculateCanvasDimensions,
+  clamp: () => clamp,
+  clampPercentage: () => clampPercentage,
+  convertPercentagePositionToPixel: () => convertPercentagePositionToPixel,
+  convertPixelPositionToPercentage: () => convertPixelPositionToPercentage,
+  createButtonElement: () => createButtonElement,
+  createControllerSDK: () => createControllerSDK,
+  createDpadElement: () => createDpadElement,
+  createIframeBridge: () => createIframeBridge,
+  createJoystickElement: () => createJoystickElement,
+  createParentBridge: () => createParentBridge,
+  destroyRenderer: () => destroyRenderer,
+  distance: () => distance,
+  findAlignmentGuides: () => findAlignmentGuides,
+  generateGridLines: () => generateGridLines,
+  initializeRenderer: () => initializeRenderer,
+  normalizeVector: () => normalizeVector,
+  parseAspectRatio: () => parseAspectRatio,
+  percentageToPixel: () => percentageToPixel,
+  pixelToPercentage: () => pixelToPercentage,
+  renderControllerFromConfig: () => renderControllerFromConfig,
+  snapPositionToGrid: () => snapPositionToGrid,
+  snapToGrid: () => snapToGrid,
+  updateButtonElement: () => updateButtonElement,
+  updateDpadElement: () => updateDpadElement,
+  updateJoystickElement: () => updateJoystickElement
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/types/events.ts
+var MessageType = /* @__PURE__ */ ((MessageType2) => {
+  MessageType2["CONFIG_LOAD"] = "CONFIG_LOAD";
+  MessageType2["INPUT_START"] = "INPUT_START";
+  MessageType2["INPUT_END"] = "INPUT_END";
+  MessageType2["JOYSTICK_MOVE"] = "JOYSTICK_MOVE";
+  MessageType2["DPAD_PRESS"] = "DPAD_PRESS";
+  MessageType2["DPAD_RELEASE"] = "DPAD_RELEASE";
+  MessageType2["SLIDER_CHANGE"] = "SLIDER_CHANGE";
+  MessageType2["RENDERER_READY"] = "RENDERER_READY";
+  MessageType2["CONFIG_UPDATE"] = "CONFIG_UPDATE";
+  return MessageType2;
+})(MessageType || {});
+
+// src/bridge/communication-bridge.ts
+function createParentBridge(iframe) {
+  const listeners = /* @__PURE__ */ new Set();
+  const inputListeners = /* @__PURE__ */ new Set();
+  function handleMessage(event) {
+    const message = event.data;
+    if (!message || !message.type) return;
+    listeners.forEach((handler) => handler(message));
+    if (isInputEvent(message)) {
+      inputListeners.forEach((handler) => handler(message));
+    }
+  }
+  window.addEventListener("message", handleMessage);
+  return {
+    sendConfig(config) {
+      iframe.contentWindow?.postMessage(
+        { type: "CONFIG_LOAD" /* CONFIG_LOAD */, payload: config },
+        "*"
+      );
+    },
+    updateConfig(config) {
+      iframe.contentWindow?.postMessage(
+        { type: "CONFIG_UPDATE" /* CONFIG_UPDATE */, payload: config },
+        "*"
+      );
+    },
+    onMessage(handler) {
+      listeners.add(handler);
+      return () => listeners.delete(handler);
+    },
+    onInput(handler) {
+      inputListeners.add(handler);
+      return () => inputListeners.delete(handler);
+    },
+    destroy() {
+      window.removeEventListener("message", handleMessage);
+      listeners.clear();
+      inputListeners.clear();
+    }
+  };
+}
+function createIframeBridge() {
+  const listeners = /* @__PURE__ */ new Set();
+  function handleMessage(event) {
+    const message = event.data;
+    if (!message || !message.type) return;
+    listeners.forEach((handler) => handler(message));
+  }
+  window.addEventListener("message", handleMessage);
+  return {
+    emitControllerEvent(message) {
+      window.parent.postMessage(message, "*");
+    },
+    emitInputStart(elementId, actionKey) {
+      window.parent.postMessage(
+        {
+          type: "INPUT_START" /* INPUT_START */,
+          payload: { elementId, actionKey, timestamp: Date.now() }
+        },
+        "*"
+      );
+    },
+    emitInputEnd(elementId, actionKey) {
+      window.parent.postMessage(
+        {
+          type: "INPUT_END" /* INPUT_END */,
+          payload: { elementId, actionKey, timestamp: Date.now() }
+        },
+        "*"
+      );
+    },
+    emitJoystickMove(elementId, x, y, angle, magnitude) {
+      window.parent.postMessage(
+        {
+          type: "JOYSTICK_MOVE" /* JOYSTICK_MOVE */,
+          payload: { elementId, vector: { x, y }, angle, magnitude, timestamp: Date.now() }
+        },
+        "*"
+      );
+    },
+    emitDpadPress(elementId, direction, actionKey) {
+      window.parent.postMessage(
+        {
+          type: "DPAD_PRESS" /* DPAD_PRESS */,
+          payload: { elementId, direction, actionKey, timestamp: Date.now() }
+        },
+        "*"
+      );
+    },
+    emitDpadRelease(elementId, direction, actionKey) {
+      window.parent.postMessage(
+        {
+          type: "DPAD_RELEASE" /* DPAD_RELEASE */,
+          payload: { elementId, direction, actionKey, timestamp: Date.now() }
+        },
+        "*"
+      );
+    },
+    emitSliderChange(elementId, actionKey, value) {
+      window.parent.postMessage(
+        {
+          type: "SLIDER_CHANGE" /* SLIDER_CHANGE */,
+          payload: { elementId, actionKey, value, timestamp: Date.now() }
+        },
+        "*"
+      );
+    },
+    signalReady() {
+      window.parent.postMessage(
+        { type: "RENDERER_READY" /* RENDERER_READY */ },
+        "*"
+      );
+    },
+    onMessage(handler) {
+      listeners.add(handler);
+      return () => listeners.delete(handler);
+    },
+    destroy() {
+      window.removeEventListener("message", handleMessage);
+      listeners.clear();
+    }
+  };
+}
+function isInputEvent(message) {
+  return message.type === "INPUT_START" /* INPUT_START */ || message.type === "INPUT_END" /* INPUT_END */ || message.type === "JOYSTICK_MOVE" /* JOYSTICK_MOVE */ || message.type === "DPAD_PRESS" /* DPAD_PRESS */ || message.type === "DPAD_RELEASE" /* DPAD_RELEASE */ || message.type === "SLIDER_CHANGE" /* SLIDER_CHANGE */;
+}
+
+// src/math/coordinate-converter.ts
+function snapToGrid(value, gridDensity) {
+  const step = 100 / gridDensity;
+  return Math.round(value / step) * step;
+}
+function snapPositionToGrid(position, gridDensity) {
+  return {
+    x: snapToGrid(position.x, gridDensity),
+    y: snapToGrid(position.y, gridDensity)
+  };
+}
+function pixelToPercentage(pixelValue, containerSize) {
+  return clampPercentage(pixelValue / containerSize * 100);
+}
+function percentageToPixel(percentageValue, containerSize) {
+  return percentageValue / 100 * containerSize;
+}
+function convertPixelPositionToPercentage(pixelX, pixelY, containerWidth, containerHeight) {
+  return {
+    x: pixelToPercentage(pixelX, containerWidth),
+    y: pixelToPercentage(pixelY, containerHeight)
+  };
+}
+function convertPercentagePositionToPixel(position, containerWidth, containerHeight) {
+  return {
+    x: percentageToPixel(position.x, containerWidth),
+    y: percentageToPixel(position.y, containerHeight)
+  };
+}
+function clampPercentage(value) {
+  return Math.max(0, Math.min(100, value));
+}
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function distance(a, b) {
+  const dx = a.x - b.x;
+  const dy = a.y - b.y;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+function normalizeVector(x, y) {
+  const magnitude = Math.sqrt(x * x + y * y);
+  if (magnitude === 0) return { x: 0, y: 0, magnitude: 0 };
+  return { x: x / magnitude, y: y / magnitude, magnitude };
+}
+function angleFromVector(x, y) {
+  return Math.atan2(y, x);
+}
+function applyDeadzone(value, deadzone) {
+  if (Math.abs(value) < deadzone) return 0;
+  const sign = value > 0 ? 1 : -1;
+  return sign * ((Math.abs(value) - deadzone) / (1 - deadzone));
+}
+function applyDeadzoneToVector(x, y, deadzone) {
+  const magnitude = Math.sqrt(x * x + y * y);
+  if (magnitude < deadzone) return { x: 0, y: 0 };
+  const scale = (magnitude - deadzone) / (1 - deadzone) / magnitude;
+  return { x: x * scale, y: y * scale };
+}
+function parseAspectRatio(aspectRatio) {
+  const [width, height] = aspectRatio.split(":").map(Number);
+  return { width: width || 16, height: height || 9 };
+}
+function calculateCanvasDimensions(containerWidth, containerHeight, aspectRatio) {
+  const ratio = parseAspectRatio(aspectRatio);
+  const targetRatio = ratio.width / ratio.height;
+  const containerRatio = containerWidth / containerHeight;
+  let width;
+  let height;
+  if (containerRatio > targetRatio) {
+    height = containerHeight;
+    width = height * targetRatio;
+  } else {
+    width = containerWidth;
+    height = width / targetRatio;
+  }
+  return {
+    width: Math.floor(width),
+    height: Math.floor(height),
+    offsetX: Math.floor((containerWidth - width) / 2),
+    offsetY: Math.floor((containerHeight - height) / 2)
+  };
+}
+
+// src/math/alignment-engine.ts
+var SNAP_THRESHOLD = 2;
+var CENTER_POSITION = 50;
+function findAlignmentGuides(draggedElement, dragPosition, otherElements, threshold = SNAP_THRESHOLD) {
+  const guides = [];
+  const snappedPosition = { ...dragPosition };
+  for (const element of otherElements) {
+    if (element.id === draggedElement.id) continue;
+    if (Math.abs(dragPosition.x - element.position.x) <= threshold) {
+      guides.push({
+        axis: "vertical",
+        position: element.position.x,
+        sourceElementId: draggedElement.id,
+        targetElementId: element.id
+      });
+      snappedPosition.x = element.position.x;
+    }
+    if (Math.abs(dragPosition.y - element.position.y) <= threshold) {
+      guides.push({
+        axis: "horizontal",
+        position: element.position.y,
+        sourceElementId: draggedElement.id,
+        targetElementId: element.id
+      });
+      snappedPosition.y = element.position.y;
+    }
+  }
+  const centerGuides = findCenterSnap(draggedElement, dragPosition, threshold);
+  guides.push(...centerGuides.guides);
+  if (centerGuides.snappedX !== null) snappedPosition.x = centerGuides.snappedX;
+  if (centerGuides.snappedY !== null) snappedPosition.y = centerGuides.snappedY;
+  return { position: snappedPosition, guides };
+}
+function findCenterSnap(element, position, threshold) {
+  const guides = [];
+  let snappedX = null;
+  let snappedY = null;
+  if (Math.abs(position.x - CENTER_POSITION) <= threshold) {
+    guides.push({
+      axis: "vertical",
+      position: CENTER_POSITION,
+      sourceElementId: element.id,
+      targetElementId: "canvas-center"
+    });
+    snappedX = CENTER_POSITION;
+  }
+  if (Math.abs(position.y - CENTER_POSITION) <= threshold) {
+    guides.push({
+      axis: "horizontal",
+      position: CENTER_POSITION,
+      sourceElementId: element.id,
+      targetElementId: "canvas-center"
+    });
+    snappedY = CENTER_POSITION;
+  }
+  return { guides, snappedX, snappedY };
+}
+function generateGridLines(gridDensity) {
+  const step = 100 / gridDensity;
+  const lines = [];
+  for (let i = 0; i <= gridDensity; i++) {
+    lines.push(i * step);
+  }
+  return lines;
+}
+
+// src/renderer/button-renderer.ts
+function createButtonElement(context) {
+  const { element, canvasWidth, canvasHeight, onInputStart, onInputEnd } = context;
+  const container = document.createElement("div");
+  container.dataset.elementId = element.id;
+  container.dataset.elementType = "button";
+  const pixelX = percentageToPixel(element.position.x, canvasWidth);
+  const pixelY = percentageToPixel(element.position.y, canvasHeight);
+  const pixelSize = percentageToPixel(element.size, Math.min(canvasWidth, canvasHeight));
+  applyButtonStyles(container, element, pixelX, pixelY, pixelSize);
+  attachButtonLabel(container, element);
+  attachButtonInteraction(container, element, onInputStart, onInputEnd);
+  return container;
+}
+function applyButtonStyles(container, element, pixelX, pixelY, pixelSize) {
+  const halfSize = pixelSize / 2;
+  Object.assign(container.style, {
+    position: "absolute",
+    left: `${pixelX - halfSize}px`,
+    top: `${pixelY - halfSize}px`,
+    width: `${pixelSize}px`,
+    height: `${pixelSize}px`,
+    borderRadius: element.shape === "circle" ? "50%" : "15%",
+    backgroundColor: element.style?.color || "#444",
+    opacity: String(element.style?.opacity ?? 0.8),
+    zIndex: String(element.zIndex || 1),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    userSelect: "none",
+    touchAction: "none",
+    cursor: "pointer",
+    border: `2px solid ${element.style?.borderColor || "rgba(255,255,255,0.3)"}`,
+    boxSizing: "border-box",
+    transition: "transform 0.05s ease, opacity 0.05s ease"
+  });
+}
+function attachButtonLabel(container, element) {
+  if (!element.label) return;
+  const label = document.createElement("span");
+  label.textContent = element.label;
+  Object.assign(label.style, {
+    color: "#fff",
+    fontSize: `${element.style?.fontSize || 14}px`,
+    fontFamily: element.style?.fontFamily || "sans-serif",
+    fontWeight: "bold",
+    pointerEvents: "none",
+    userSelect: "none"
+  });
+  container.appendChild(label);
+}
+function attachButtonInteraction(container, element, onInputStart, onInputEnd) {
+  const activePointers = /* @__PURE__ */ new Set();
+  container.addEventListener("pointerdown", (event) => {
+    event.preventDefault();
+    activePointers.add(event.pointerId);
+    container.setPointerCapture(event.pointerId);
+    applyPressedState(container);
+    onInputStart(element.id, element.actionKey);
+  });
+  container.addEventListener("pointerup", (event) => {
+    event.preventDefault();
+    activePointers.delete(event.pointerId);
+    container.releasePointerCapture(event.pointerId);
+    if (activePointers.size === 0) {
+      applyReleasedState(container);
+      onInputEnd(element.id, element.actionKey);
+    }
+  });
+  container.addEventListener("pointercancel", (event) => {
+    activePointers.delete(event.pointerId);
+    if (activePointers.size === 0) {
+      applyReleasedState(container);
+      onInputEnd(element.id, element.actionKey);
+    }
+  });
+  container.addEventListener("pointerleave", (event) => {
+    if (activePointers.has(event.pointerId)) {
+      activePointers.delete(event.pointerId);
+      if (activePointers.size === 0) {
+        applyReleasedState(container);
+        onInputEnd(element.id, element.actionKey);
+      }
+    }
+  });
+}
+function applyPressedState(element) {
+  element.style.transform = "scale(0.9)";
+  element.style.opacity = "1";
+}
+function applyReleasedState(element) {
+  element.style.transform = "scale(1)";
+  element.style.opacity = String(0.8);
+}
+function updateButtonElement(container, element, canvasWidth, canvasHeight) {
+  const pixelX = percentageToPixel(element.position.x, canvasWidth);
+  const pixelY = percentageToPixel(element.position.y, canvasHeight);
+  const pixelSize = percentageToPixel(element.size, Math.min(canvasWidth, canvasHeight));
+  const halfSize = pixelSize / 2;
+  container.style.left = `${pixelX - halfSize}px`;
+  container.style.top = `${pixelY - halfSize}px`;
+  container.style.width = `${pixelSize}px`;
+  container.style.height = `${pixelSize}px`;
+}
+
+// src/renderer/joystick-renderer.ts
+function createJoystickElement(context) {
+  const { element, canvasWidth, canvasHeight, onJoystickMove } = context;
+  const container = document.createElement("div");
+  container.dataset.elementId = element.id;
+  container.dataset.elementType = "joystick";
+  const pixelX = percentageToPixel(element.position.x, canvasWidth);
+  const pixelY = percentageToPixel(element.position.y, canvasHeight);
+  const referenceDimension = Math.min(canvasWidth, canvasHeight);
+  const outerRadius = percentageToPixel(element.radius, referenceDimension);
+  const innerRadius = percentageToPixel(element.innerStickSize, referenceDimension);
+  applyJoystickBaseStyles(container, pixelX, pixelY, outerRadius, element);
+  const stick = createStickElement(innerRadius, element);
+  container.appendChild(stick);
+  const state = {
+    isActive: false,
+    activePointerId: null,
+    originX: pixelX,
+    originY: pixelY,
+    stickOffsetX: 0,
+    stickOffsetY: 0
+  };
+  attachJoystickInteraction(container, stick, element, outerRadius, innerRadius, state, onJoystickMove);
+  return container;
+}
+function applyJoystickBaseStyles(container, pixelX, pixelY, outerRadius, element) {
+  const diameter = outerRadius * 2;
+  Object.assign(container.style, {
+    position: "absolute",
+    left: `${pixelX - outerRadius}px`,
+    top: `${pixelY - outerRadius}px`,
+    width: `${diameter}px`,
+    height: `${diameter}px`,
+    borderRadius: "50%",
+    backgroundColor: element.style?.color || "rgba(80, 80, 80, 0.5)",
+    border: `2px solid ${element.style?.borderColor || "rgba(255, 255, 255, 0.2)"}`,
+    opacity: String(element.style?.opacity ?? 0.7),
+    zIndex: String(element.zIndex || 1),
+    touchAction: "none",
+    userSelect: "none",
+    boxSizing: "border-box"
+  });
+}
+function createStickElement(innerRadius, element) {
+  const stick = document.createElement("div");
+  const stickDiameter = innerRadius * 2;
+  Object.assign(stick.style, {
+    position: "absolute",
+    width: `${stickDiameter}px`,
+    height: `${stickDiameter}px`,
+    borderRadius: "50%",
+    backgroundColor: element.style?.color ? lightenColor(element.style.color) : "rgba(200, 200, 200, 0.8)",
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    pointerEvents: "none",
+    willChange: "transform",
+    transition: "none"
+  });
+  return stick;
+}
+function attachJoystickInteraction(container, stick, element, outerRadius, _innerRadius, state, onJoystickMove) {
+  const maxDistance = outerRadius;
+  container.addEventListener("pointerdown", (event) => {
+    event.preventDefault();
+    if (state.isActive) return;
+    state.isActive = true;
+    state.activePointerId = event.pointerId;
+    container.setPointerCapture(event.pointerId);
+    if (element.mode === "floating") {
+      const rect = container.parentElement?.getBoundingClientRect();
+      if (rect) {
+        state.originX = event.clientX - rect.left;
+        state.originY = event.clientY - rect.top;
+      }
+    }
+    handleJoystickPointerMove(event, container, stick, element, maxDistance, state, onJoystickMove);
+  });
+  container.addEventListener("pointermove", (event) => {
+    if (!state.isActive || event.pointerId !== state.activePointerId) return;
+    event.preventDefault();
+    handleJoystickPointerMove(event, container, stick, element, maxDistance, state, onJoystickMove);
+  });
+  const releaseHandler = (event) => {
+    if (event.pointerId !== state.activePointerId) return;
+    state.isActive = false;
+    state.activePointerId = null;
+    state.stickOffsetX = 0;
+    state.stickOffsetY = 0;
+    stick.style.transform = "translate(-50%, -50%)";
+    onJoystickMove(element.id, { x: 0, y: 0 }, 0, 0);
+  };
+  container.addEventListener("pointerup", releaseHandler);
+  container.addEventListener("pointercancel", releaseHandler);
+}
+function handleJoystickPointerMove(event, container, stick, element, maxDistance, state, onJoystickMove) {
+  const rect = container.getBoundingClientRect();
+  const centerX = rect.width / 2;
+  const centerY = rect.height / 2;
+  const pointerX = event.clientX - rect.left;
+  const pointerY = event.clientY - rect.top;
+  let deltaX = pointerX - centerX;
+  let deltaY = pointerY - centerY;
+  const distance2 = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+  if (distance2 > maxDistance) {
+    deltaX = deltaX / distance2 * maxDistance;
+    deltaY = deltaY / distance2 * maxDistance;
+  }
+  state.stickOffsetX = deltaX;
+  state.stickOffsetY = deltaY;
+  stick.style.transform = `translate(calc(-50% + ${deltaX}px), calc(-50% + ${deltaY}px))`;
+  let normalizedX = deltaX / maxDistance;
+  let normalizedY = deltaY / maxDistance;
+  normalizedX = clamp(normalizedX, -1, 1);
+  normalizedY = clamp(normalizedY, -1, 1);
+  const deadzoned = applyDeadzoneToVector(normalizedX, normalizedY, element.deadzone || 0);
+  const angle = angleFromVector(deadzoned.x, deadzoned.y);
+  const magnitude = Math.sqrt(deadzoned.x * deadzoned.x + deadzoned.y * deadzoned.y);
+  onJoystickMove(element.id, deadzoned, angle, Math.min(magnitude, 1));
+}
+function lightenColor(color) {
+  if (color.startsWith("rgba")) {
+    return color.replace(/[\d.]+\)$/, "0.8)");
+  }
+  return color + "88";
+}
+function updateJoystickElement(container, element, canvasWidth, canvasHeight) {
+  const pixelX = percentageToPixel(element.position.x, canvasWidth);
+  const pixelY = percentageToPixel(element.position.y, canvasHeight);
+  const referenceDimension = Math.min(canvasWidth, canvasHeight);
+  const outerRadius = percentageToPixel(element.radius, referenceDimension);
+  container.style.left = `${pixelX - outerRadius}px`;
+  container.style.top = `${pixelY - outerRadius}px`;
+  container.style.width = `${outerRadius * 2}px`;
+  container.style.height = `${outerRadius * 2}px`;
+}
+
+// src/renderer/dpad-renderer.ts
+var DEFAULT_DPAD_KEYS = { up: "DPAD_UP", down: "DPAD_DOWN", left: "DPAD_LEFT", right: "DPAD_RIGHT" };
+function createDpadElement(context) {
+  const { element, canvasWidth, canvasHeight, onDpadPress, onDpadRelease } = context;
+  const container = document.createElement("div");
+  container.dataset.elementId = element.id;
+  container.dataset.elementType = "dpad";
+  const pixelX = percentageToPixel(element.position.x, canvasWidth);
+  const pixelY = percentageToPixel(element.position.y, canvasHeight);
+  const referenceDimension = Math.min(canvasWidth, canvasHeight);
+  const pixelSize = percentageToPixel(element.size, referenceDimension);
+  applyDpadContainerStyles(container, pixelX, pixelY, pixelSize, element);
+  const actionKeys = element.actionKeys || DEFAULT_DPAD_KEYS;
+  const directions = [
+    { direction: "up", gridArea: "1 / 2 / 2 / 3" },
+    { direction: "left", gridArea: "2 / 1 / 3 / 2" },
+    { direction: "right", gridArea: "2 / 3 / 3 / 4" },
+    { direction: "down", gridArea: "3 / 2 / 4 / 3" }
+  ];
+  const centerBlock = document.createElement("div");
+  Object.assign(centerBlock.style, {
+    gridArea: "2 / 2 / 3 / 3",
+    backgroundColor: element.style?.color || "#333",
+    borderRadius: "2px"
+  });
+  container.appendChild(centerBlock);
+  for (const { direction, gridArea } of directions) {
+    const dirButton = createDirectionButton(direction, gridArea, element, actionKeys);
+    attachDpadInteraction(dirButton, element.id, direction, actionKeys[direction], onDpadPress, onDpadRelease);
+    container.appendChild(dirButton);
+  }
+  return container;
+}
+function applyDpadContainerStyles(container, pixelX, pixelY, pixelSize, element) {
+  const halfSize = pixelSize / 2;
+  Object.assign(container.style, {
+    position: "absolute",
+    left: `${pixelX - halfSize}px`,
+    top: `${pixelY - halfSize}px`,
+    width: `${pixelSize}px`,
+    height: `${pixelSize}px`,
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr 1fr",
+    gridTemplateRows: "1fr 1fr 1fr",
+    gap: "2px",
+    zIndex: String(element.zIndex || 1),
+    touchAction: "none",
+    userSelect: "none"
+  });
+}
+function createDirectionButton(direction, gridArea, element, _actionKeys) {
+  const button = document.createElement("div");
+  button.dataset.direction = direction;
+  const arrowMap = {
+    up: "\u25B2",
+    down: "\u25BC",
+    left: "\u25C0",
+    right: "\u25B6"
+  };
+  Object.assign(button.style, {
+    gridArea,
+    backgroundColor: element.style?.color || "#444",
+    borderRadius: "4px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "rgba(255, 255, 255, 0.7)",
+    fontSize: "12px",
+    opacity: String(element.style?.opacity ?? 0.8),
+    cursor: "pointer",
+    touchAction: "none",
+    userSelect: "none",
+    transition: "transform 0.05s ease, opacity 0.05s ease"
+  });
+  button.textContent = arrowMap[direction];
+  return button;
+}
+function attachDpadInteraction(button, elementId, direction, actionKey, onDpadPress, onDpadRelease) {
+  const activePointers = /* @__PURE__ */ new Set();
+  button.addEventListener("pointerdown", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    activePointers.add(event.pointerId);
+    button.setPointerCapture(event.pointerId);
+    button.style.transform = "scale(0.85)";
+    button.style.opacity = "1";
+    onDpadPress(elementId, direction, actionKey);
+  });
+  const releaseHandler = (event) => {
+    event.preventDefault();
+    activePointers.delete(event.pointerId);
+    if (activePointers.size === 0) {
+      button.style.transform = "scale(1)";
+      button.style.opacity = String(0.8);
+      onDpadRelease(elementId, direction, actionKey);
+    }
+  };
+  button.addEventListener("pointerup", releaseHandler);
+  button.addEventListener("pointercancel", releaseHandler);
+}
+function updateDpadElement(container, element, canvasWidth, canvasHeight) {
+  const pixelX = percentageToPixel(element.position.x, canvasWidth);
+  const pixelY = percentageToPixel(element.position.y, canvasHeight);
+  const referenceDimension = Math.min(canvasWidth, canvasHeight);
+  const pixelSize = percentageToPixel(element.size, referenceDimension);
+  const halfSize = pixelSize / 2;
+  container.style.left = `${pixelX - halfSize}px`;
+  container.style.top = `${pixelY - halfSize}px`;
+  container.style.width = `${pixelSize}px`;
+  container.style.height = `${pixelSize}px`;
+}
+
+// src/renderer/rendering-engine.ts
+function initializeRenderer(rootElement) {
+  const bridge = createIframeBridge();
+  const state = {
+    config: null,
+    canvas: null,
+    elementMap: /* @__PURE__ */ new Map(),
+    bridge,
+    resizeObserver: null
+  };
+  bridge.onMessage((message) => {
+    if (message.type === "CONFIG_LOAD" /* CONFIG_LOAD */ || message.type === "CONFIG_UPDATE" /* CONFIG_UPDATE */) {
+      state.config = message.payload;
+      renderController(state, rootElement);
+    }
+  });
+  bridge.signalReady();
+  return state;
+}
+function renderControllerFromConfig(rootElement, config) {
+  const bridge = createIframeBridge();
+  const state = {
+    config,
+    canvas: null,
+    elementMap: /* @__PURE__ */ new Map(),
+    bridge,
+    resizeObserver: null
+  };
+  renderController(state, rootElement);
+  return state;
+}
+function renderController(state, rootElement) {
+  if (!state.config) return;
+  clearCanvas(state);
+  const canvas = createCanvasElement(rootElement, state.config);
+  state.canvas = canvas;
+  rootElement.appendChild(canvas);
+  const { width, height } = canvas.getBoundingClientRect();
+  renderElements(state, state.config.elements, width, height);
+  attachResizeHandler(state, rootElement);
+}
+function createCanvasElement(rootElement, config) {
+  const canvas = document.createElement("div");
+  canvas.dataset.role = "controller-canvas";
+  const containerRect = rootElement.getBoundingClientRect();
+  const dimensions = calculateCanvasDimensions(
+    containerRect.width,
+    containerRect.height,
+    config.canvas.aspectRatio
+  );
+  Object.assign(canvas.style, {
+    position: "relative",
+    width: `${dimensions.width}px`,
+    height: `${dimensions.height}px`,
+    marginLeft: `${dimensions.offsetX}px`,
+    marginTop: `${dimensions.offsetY}px`,
+    backgroundColor: config.canvas.backgroundColor || "transparent",
+    overflow: "hidden",
+    touchAction: "none"
+  });
+  return canvas;
+}
+function renderElements(state, elements, canvasWidth, canvasHeight) {
+  for (const element of elements) {
+    const domElement = createElementByType(state, element, canvasWidth, canvasHeight);
+    if (domElement) {
+      state.canvas?.appendChild(domElement);
+      state.elementMap.set(element.id, domElement);
+    }
+  }
+}
+function createElementByType(state, element, canvasWidth, canvasHeight) {
+  switch (element.type) {
+    case "button":
+      return createButtonElement({
+        element,
+        canvasWidth,
+        canvasHeight,
+        onInputStart: (elementId, actionKey) => state.bridge.emitInputStart(elementId, actionKey),
+        onInputEnd: (elementId, actionKey) => state.bridge.emitInputEnd(elementId, actionKey)
+      });
+    case "joystick":
+      return createJoystickElement({
+        element,
+        canvasWidth,
+        canvasHeight,
+        onJoystickMove: (elementId, vector, angle, magnitude) => state.bridge.emitJoystickMove(elementId, vector.x, vector.y, angle, magnitude)
+      });
+    case "dpad":
+      return createDpadElement({
+        element,
+        canvasWidth,
+        canvasHeight,
+        onDpadPress: (elementId, direction, actionKey) => state.bridge.emitDpadPress(elementId, direction, actionKey),
+        onDpadRelease: (elementId, direction, actionKey) => state.bridge.emitDpadRelease(elementId, direction, actionKey)
+      });
+    default:
+      return null;
+  }
+}
+function clearCanvas(state) {
+  if (state.canvas) {
+    state.canvas.remove();
+    state.canvas = null;
+  }
+  state.elementMap.clear();
+  if (state.resizeObserver) {
+    state.resizeObserver.disconnect();
+    state.resizeObserver = null;
+  }
+}
+function attachResizeHandler(state, rootElement) {
+  state.resizeObserver = new ResizeObserver(() => {
+    if (state.config) {
+      renderController(state, rootElement);
+    }
+  });
+  state.resizeObserver.observe(rootElement);
+}
+function destroyRenderer(state) {
+  clearCanvas(state);
+  state.bridge.destroy();
+}
+
+// src/sdk/controller-sdk.ts
+function createControllerSDK(options) {
+  const { config, container, iframeSrc, onInput, onReady, width, height } = options;
+  const iframe = createIframeElement(width, height);
+  container.appendChild(iframe);
+  let bridge = null;
+  iframe.addEventListener("load", () => {
+    bridge = createParentBridge(iframe);
+    if (onInput) {
+      bridge.onInput(onInput);
+    }
+    bridge.onMessage((message) => {
+      if (message.type === "RENDERER_READY" /* RENDERER_READY */) {
+        bridge?.sendConfig(config);
+        onReady?.();
+      }
+    });
+  });
+  if (iframeSrc) {
+    iframe.src = iframeSrc;
+  } else {
+    injectRendererIntoIframe(iframe);
+  }
+  return {
+    updateConfig(newConfig) {
+      bridge?.updateConfig(newConfig);
+    },
+    destroy() {
+      bridge?.destroy();
+      iframe.remove();
+    },
+    getIframe() {
+      return iframe;
+    }
+  };
+}
+function createIframeElement(width, height) {
+  const iframe = document.createElement("iframe");
+  Object.assign(iframe.style, {
+    width: width || "100%",
+    height: height || "100%",
+    border: "none",
+    display: "block"
+  });
+  iframe.setAttribute("allowtransparency", "true");
+  iframe.setAttribute("allow", "autoplay");
+  iframe.setAttribute("sandbox", "allow-scripts allow-same-origin");
+  return iframe;
+}
+function injectRendererIntoIframe(iframe) {
+  const rendererHTML = generateRendererHTML();
+  iframe.srcdoc = rendererHTML;
+}
+function generateRendererHTML() {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+  <title>Game Controller Renderer</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { width: 100%; height: 100%; overflow: hidden; touch-action: none; user-select: none; background: transparent; }
+    #controller-root { width: 100%; height: 100%; position: relative; }
+  </style>
+</head>
+<body>
+  <div id="controller-root"></div>
+  <script type="module">
+    ${getEmbeddedRendererScript()}
+  </script>
+</body>
+</html>`;
+}
+function getEmbeddedRendererScript() {
+  return `
+    const MessageType = {
+      CONFIG_LOAD: 'CONFIG_LOAD',
+      INPUT_START: 'INPUT_START',
+      INPUT_END: 'INPUT_END',
+      JOYSTICK_MOVE: 'JOYSTICK_MOVE',
+      DPAD_PRESS: 'DPAD_PRESS',
+      DPAD_RELEASE: 'DPAD_RELEASE',
+      SLIDER_CHANGE: 'SLIDER_CHANGE',
+      RENDERER_READY: 'RENDERER_READY',
+      CONFIG_UPDATE: 'CONFIG_UPDATE',
+    };
+
+    function emitToParent(message) {
+      window.parent.postMessage(message, '*');
+    }
+
+    function percentageToPixel(pct, containerSize) {
+      return (pct / 100) * containerSize;
+    }
+
+    function clamp(val, min, max) {
+      return Math.max(min, Math.min(max, val));
+    }
+
+    function applyDeadzoneToVector(x, y, deadzone) {
+      const mag = Math.sqrt(x * x + y * y);
+      if (mag < deadzone) return { x: 0, y: 0 };
+      const scale = (mag - deadzone) / (1 - deadzone) / mag;
+      return { x: x * scale, y: y * scale };
+    }
+
+    function parseAspectRatio(ar) {
+      const [w, h] = ar.split(':').map(Number);
+      return { width: w || 16, height: h || 9 };
+    }
+
+    function calculateCanvasDimensions(cw, ch, ar) {
+      const r = parseAspectRatio(ar);
+      const tr = r.width / r.height;
+      const cr = cw / ch;
+      let w, h;
+      if (cr > tr) { h = ch; w = h * tr; }
+      else { w = cw; h = w / tr; }
+      return { width: Math.floor(w), height: Math.floor(h), offsetX: Math.floor((cw - w) / 2), offsetY: Math.floor((ch - h) / 2) };
+    }
+
+    function renderButton(el, cw, ch, canvas) {
+      const btn = document.createElement('div');
+      btn.dataset.elementId = el.id;
+      const px = percentageToPixel(el.position.x, cw);
+      const py = percentageToPixel(el.position.y, ch);
+      const sz = percentageToPixel(el.size, Math.min(cw, ch));
+      const half = sz / 2;
+      Object.assign(btn.style, {
+        position: 'absolute', left: (px - half) + 'px', top: (py - half) + 'px',
+        width: sz + 'px', height: sz + 'px',
+        borderRadius: el.shape === 'circle' ? '50%' : '15%',
+        backgroundColor: el.style?.color || '#444', opacity: String(el.style?.opacity ?? 0.8),
+        zIndex: String(el.zIndex || 1), display: 'flex', alignItems: 'center', justifyContent: 'center',
+        userSelect: 'none', touchAction: 'none', cursor: 'pointer',
+        border: '2px solid rgba(255,255,255,0.3)', boxSizing: 'border-box',
+        transition: 'transform 0.05s ease'
+      });
+      if (el.label) {
+        const lbl = document.createElement('span');
+        lbl.textContent = el.label;
+        Object.assign(lbl.style, { color: '#fff', fontSize: '14px', fontWeight: 'bold', pointerEvents: 'none', userSelect: 'none' });
+        btn.appendChild(lbl);
+      }
+      const active = new Set();
+      btn.addEventListener('pointerdown', e => { e.preventDefault(); active.add(e.pointerId); btn.setPointerCapture(e.pointerId); btn.style.transform='scale(0.9)'; btn.style.opacity='1'; emitToParent({ type: MessageType.INPUT_START, payload: { elementId: el.id, actionKey: el.actionKey, timestamp: Date.now() } }); });
+      btn.addEventListener('pointerup', e => { active.delete(e.pointerId); if(!active.size){ btn.style.transform='scale(1)'; btn.style.opacity=String(el.style?.opacity??0.8); emitToParent({ type: MessageType.INPUT_END, payload: { elementId: el.id, actionKey: el.actionKey, timestamp: Date.now() } }); }});
+      btn.addEventListener('pointercancel', e => { active.delete(e.pointerId); if(!active.size){ btn.style.transform='scale(1)'; btn.style.opacity=String(el.style?.opacity??0.8); emitToParent({ type: MessageType.INPUT_END, payload: { elementId: el.id, actionKey: el.actionKey, timestamp: Date.now() } }); }});
+      canvas.appendChild(btn);
+    }
+
+    function renderJoystick(el, cw, ch, canvas) {
+      const ref = Math.min(cw, ch);
+      const outerR = percentageToPixel(el.radius, ref);
+      const innerR = percentageToPixel(el.innerStickSize, ref);
+      const px = percentageToPixel(el.position.x, cw);
+      const py = percentageToPixel(el.position.y, ch);
+      const container = document.createElement('div');
+      container.dataset.elementId = el.id;
+      Object.assign(container.style, {
+        position:'absolute', left:(px-outerR)+'px', top:(py-outerR)+'px',
+        width:(outerR*2)+'px', height:(outerR*2)+'px', borderRadius:'50%',
+        backgroundColor: el.style?.color || 'rgba(80,80,80,0.5)',
+        border: '2px solid rgba(255,255,255,0.2)', opacity: String(el.style?.opacity ?? 0.7),
+        zIndex: String(el.zIndex || 1), touchAction:'none', userSelect:'none', boxSizing:'border-box'
+      });
+      const stick = document.createElement('div');
+      Object.assign(stick.style, {
+        position:'absolute', width:(innerR*2)+'px', height:(innerR*2)+'px', borderRadius:'50%',
+        backgroundColor:'rgba(200,200,200,0.8)', left:'50%', top:'50%',
+        transform:'translate(-50%,-50%)', pointerEvents:'none', willChange:'transform'
+      });
+      container.appendChild(stick);
+      let isActive = false, activeId = null;
+      container.addEventListener('pointerdown', e => { if(isActive) return; e.preventDefault(); isActive=true; activeId=e.pointerId; container.setPointerCapture(e.pointerId); handleMove(e); });
+      container.addEventListener('pointermove', e => { if(!isActive||e.pointerId!==activeId) return; e.preventDefault(); handleMove(e); });
+      const release = () => { isActive=false; activeId=null; stick.style.transform='translate(-50%,-50%)'; emitToParent({ type:MessageType.JOYSTICK_MOVE, payload:{elementId:el.id,vector:{x:0,y:0},angle:0,magnitude:0,timestamp:Date.now()}}); };
+      container.addEventListener('pointerup', e => { if(e.pointerId===activeId) release(); });
+      container.addEventListener('pointercancel', e => { if(e.pointerId===activeId) release(); });
+      function handleMove(e) {
+        const r = container.getBoundingClientRect();
+        const cx=r.width/2, cy=r.height/2;
+        let dx=e.clientX-r.left-cx, dy=e.clientY-r.top-cy;
+        const d = Math.sqrt(dx*dx+dy*dy);
+        if(d>outerR){dx=(dx/d)*outerR; dy=(dy/d)*outerR;}
+        stick.style.transform='translate(calc(-50% + '+dx+'px), calc(-50% + '+dy+'px))';
+        let nx=clamp(dx/outerR,-1,1), ny=clamp(dy/outerR,-1,1);
+        const dz = applyDeadzoneToVector(nx,ny,el.deadzone||0);
+        const angle=Math.atan2(dz.y,dz.x), mag=Math.min(Math.sqrt(dz.x*dz.x+dz.y*dz.y),1);
+        emitToParent({type:MessageType.JOYSTICK_MOVE,payload:{elementId:el.id,vector:dz,angle,magnitude:mag,timestamp:Date.now()}});
+      }
+      canvas.appendChild(container);
+    }
+
+    function renderDpad(el, cw, ch, canvas) {
+      const ref = Math.min(cw, ch);
+      const sz = percentageToPixel(el.size, ref);
+      const px = percentageToPixel(el.position.x, cw);
+      const py = percentageToPixel(el.position.y, ch);
+      const half = sz/2;
+      const container = document.createElement('div');
+      container.dataset.elementId = el.id;
+      Object.assign(container.style, {
+        position:'absolute', left:(px-half)+'px', top:(py-half)+'px',
+        width:sz+'px', height:sz+'px', display:'grid',
+        gridTemplateColumns:'1fr 1fr 1fr', gridTemplateRows:'1fr 1fr 1fr', gap:'2px',
+        zIndex:String(el.zIndex||1), touchAction:'none', userSelect:'none'
+      });
+      const keys = el.actionKeys || {up:'DPAD_UP',down:'DPAD_DOWN',left:'DPAD_LEFT',right:'DPAD_RIGHT'};
+      const arrows = {up:'\u25B2',down:'\u25BC',left:'\u25C0',right:'\u25B6'};
+      const areas = {up:'1/2/2/3',left:'2/1/3/2',right:'2/3/3/4',down:'3/2/4/3'};
+      const center = document.createElement('div');
+      Object.assign(center.style,{gridArea:'2/2/3/3',backgroundColor:el.style?.color||'#333',borderRadius:'2px'});
+      container.appendChild(center);
+      for(const dir of ['up','down','left','right']){
+        const b = document.createElement('div');
+        b.dataset.direction = dir;
+        Object.assign(b.style,{gridArea:areas[dir],backgroundColor:el.style?.color||'#444',borderRadius:'4px',display:'flex',alignItems:'center',justifyContent:'center',color:'rgba(255,255,255,0.7)',fontSize:'12px',opacity:String(el.style?.opacity??0.8),cursor:'pointer',touchAction:'none',userSelect:'none',transition:'transform 0.05s ease'});
+        b.textContent = arrows[dir];
+        b.addEventListener('pointerdown', e => { e.preventDefault();e.stopPropagation(); b.setPointerCapture(e.pointerId); b.style.transform='scale(0.85)'; b.style.opacity='1'; emitToParent({type:MessageType.DPAD_PRESS,payload:{elementId:el.id,direction:dir,actionKey:keys[dir],timestamp:Date.now()}}); });
+        b.addEventListener('pointerup', e => { b.style.transform='scale(1)'; b.style.opacity=String(el.style?.opacity??0.8); emitToParent({type:MessageType.DPAD_RELEASE,payload:{elementId:el.id,direction:dir,actionKey:keys[dir],timestamp:Date.now()}}); });
+        b.addEventListener('pointercancel', () => { b.style.transform='scale(1)'; b.style.opacity=String(el.style?.opacity??0.8); emitToParent({type:MessageType.DPAD_RELEASE,payload:{elementId:el.id,direction:dir,actionKey:keys[dir],timestamp:Date.now()}}); });
+        container.appendChild(b);
+      }
+      canvas.appendChild(container);
+    }
+
+    function renderConfig(config) {
+      const root = document.getElementById('controller-root');
+      root.innerHTML = '';
+      const rect = root.getBoundingClientRect();
+      const dims = calculateCanvasDimensions(rect.width, rect.height, config.canvas.aspectRatio);
+      const canvas = document.createElement('div');
+      Object.assign(canvas.style, {
+        position:'relative', width:dims.width+'px', height:dims.height+'px',
+        marginLeft:dims.offsetX+'px', marginTop:dims.offsetY+'px',
+        backgroundColor:config.canvas.backgroundColor||'transparent',
+        overflow:'hidden', touchAction:'none'
+      });
+      root.appendChild(canvas);
+      for(const el of config.elements){
+        if(el.type==='button') renderButton(el, dims.width, dims.height, canvas);
+        else if(el.type==='joystick') renderJoystick(el, dims.width, dims.height, canvas);
+        else if(el.type==='dpad') renderDpad(el, dims.width, dims.height, canvas);
+      }
+    }
+
+    window.addEventListener('message', e => {
+      const msg = e.data;
+      if(!msg||!msg.type) return;
+      if(msg.type===MessageType.CONFIG_LOAD||msg.type===MessageType.CONFIG_UPDATE){
+        renderConfig(msg.payload);
+      }
+    });
+
+    emitToParent({ type: MessageType.RENDERER_READY });
+  `;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MessageType,
+  angleFromVector,
+  applyDeadzone,
+  applyDeadzoneToVector,
+  calculateCanvasDimensions,
+  clamp,
+  clampPercentage,
+  convertPercentagePositionToPixel,
+  convertPixelPositionToPercentage,
+  createButtonElement,
+  createControllerSDK,
+  createDpadElement,
+  createIframeBridge,
+  createJoystickElement,
+  createParentBridge,
+  destroyRenderer,
+  distance,
+  findAlignmentGuides,
+  generateGridLines,
+  initializeRenderer,
+  normalizeVector,
+  parseAspectRatio,
+  percentageToPixel,
+  pixelToPercentage,
+  renderControllerFromConfig,
+  snapPositionToGrid,
+  snapToGrid,
+  updateButtonElement,
+  updateDpadElement,
+  updateJoystickElement
+});