@number10/jsx-phaser 5.0.0

package/dist/components/appliers/applyTooltip.js

@@ -0,0 +1,247 @@
+import "phaser";
+import { themeRegistry } from "../../theme.js";
+import { createBackgroundImage } from "../backgroundImage.js";
+function getTooltipTheme() {
+  return themeRegistry.getComponentTheme("Tooltip");
+}
+const tooltipStates = /* @__PURE__ */ new Map();
+function calculateTooltipPosition(targetBounds, position, offset, tooltipWidth, tooltipHeight) {
+  const viewport = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+  let x = 0;
+  let y = 0;
+  switch (position) {
+    case "top":
+      x = targetBounds.centerX - tooltipWidth / 2;
+      y = targetBounds.top - tooltipHeight - offset;
+      break;
+    case "bottom":
+      x = targetBounds.centerX - tooltipWidth / 2;
+      y = targetBounds.bottom + offset;
+      break;
+    case "left":
+      x = targetBounds.left - tooltipWidth - offset;
+      y = targetBounds.centerY - tooltipHeight / 2;
+      break;
+    case "right":
+      x = targetBounds.right + offset;
+      y = targetBounds.centerY - tooltipHeight / 2;
+      break;
+  }
+  x = Math.max(8, Math.min(x, viewport.width - tooltipWidth - 8));
+  y = Math.max(8, Math.min(y, viewport.height - tooltipHeight - 8));
+  return { x, y };
+}
+function showTooltip(scene, container, config) {
+  const state = tooltipStates.get(container);
+  if (!state || state.isVisible) return;
+  state.isVisible = true;
+  state.currentConfig = config;
+  const tooltipTheme = getTooltipTheme();
+  const position = config.position ?? tooltipTheme.position ?? "top";
+  const offset = config.offset ?? tooltipTheme.offset ?? 8;
+  const content = config.content;
+  const targetBounds = container.getBounds();
+  const textStyle = tooltipTheme.textStyle ?? {
+    fontSize: "14px",
+    fontFamily: "Arial",
+    color: "#ffffff",
+    padding: { x: 8, y: 4 }
+  };
+  const { backgroundColor: bgColor, ...styleWithoutBg } = textStyle;
+  const text = scene.add.text(
+    0,
+    0,
+    content,
+    styleWithoutBg
+  );
+  text.setOrigin(0.5);
+  const padding = textStyle.padding ?? { x: 8, y: 4 };
+  const paddingX = typeof padding === "number" ? padding : padding.x ?? 8;
+  const paddingY = typeof padding === "number" ? padding : padding.y ?? 4;
+  const textWidth = text.width;
+  const textHeight = text.height;
+  const bgWidth = textWidth + paddingX * 2;
+  const bgHeight = textHeight + paddingY * 2;
+  const bg = bgColor ?? "#000000dd";
+  let fillColor = 0;
+  let fillAlpha = 0.87;
+  if (typeof bg === "string") {
+    if (bg.startsWith("#")) {
+      const hex = bg.slice(1);
+      if (hex.length === 8) {
+        fillColor = parseInt(hex.slice(0, 6), 16);
+        fillAlpha = parseInt(hex.slice(6, 8), 16) / 255;
+      } else if (hex.length === 6) {
+        fillColor = parseInt(hex, 16);
+        fillAlpha = 1;
+      }
+    }
+  }
+  const background = createBackgroundImage(
+    scene,
+    {
+      backgroundColor: fillColor,
+      backgroundAlpha: fillAlpha,
+      cornerRadius: tooltipTheme.cornerRadius ?? 6
+    },
+    bgWidth,
+    bgHeight
+  );
+  if (!background) {
+    text.destroy();
+    return;
+  }
+  background.setOrigin(0.5, 0.5);
+  const tooltipContainer = scene.add.container(0, 0, [background, text]);
+  tooltipContainer.setDepth(1e4);
+  const textBounds = tooltipContainer.getBounds();
+  const pos = calculateTooltipPosition(
+    targetBounds,
+    position,
+    offset,
+    textBounds.width,
+    textBounds.height
+  );
+  const themeAnim = tooltipTheme.animation || {};
+  const anim = config.animation || {};
+  const fadeInDuration = anim.fadeIn ?? themeAnim.fadeIn ?? 200;
+  const moveOffset = {
+    dx: anim.move?.dx ?? themeAnim.move?.dx ?? 0,
+    dy: anim.move?.dy ?? themeAnim.move?.dy ?? 0
+  };
+  const pulse = anim.pulse ?? themeAnim.pulse ?? false;
+  const pulseScale = anim.pulseScale ?? [0.75, 1.25];
+  tooltipContainer.setPosition(
+    pos.x + textBounds.width / 2 - moveOffset.dx,
+    pos.y + textBounds.height / 2 - moveOffset.dy
+  );
+  tooltipContainer.setAlpha(0);
+  state.tooltip = tooltipContainer;
+  const fadeTween = scene.tweens.add({
+    targets: tooltipContainer,
+    alpha: 1,
+    x: pos.x + textBounds.width / 2,
+    y: pos.y + textBounds.height / 2,
+    duration: fadeInDuration,
+    ease: "Cubic.Out"
+  });
+  state.activeTweens.push(fadeTween);
+  if (pulse) {
+    const pulseTween = scene.tweens.add({
+      targets: tooltipContainer,
+      scale: { from: pulseScale[0], to: pulseScale[1] },
+      duration: 600,
+      yoyo: true,
+      repeat: -1,
+      ease: "Sine.InOut"
+    });
+    state.activeTweens.push(pulseTween);
+  }
+  if (config.autoDismiss && config.autoDismiss > 0) {
+    state.autoDismissTimer = setTimeout(() => {
+      hideTooltip(container);
+    }, config.autoDismiss);
+  }
+}
+function hideTooltip(container) {
+  const state = tooltipStates.get(container);
+  if (!state || !state.isVisible) return;
+  state.isVisible = false;
+  const config = state.currentConfig;
+  state.currentConfig = null;
+  if (state.autoDismissTimer) {
+    clearTimeout(state.autoDismissTimer);
+    state.autoDismissTimer = null;
+  }
+  if (!state.tooltip) return;
+  const tooltip = state.tooltip;
+  const scene = tooltip.scene;
+  const tooltipTheme = getTooltipTheme();
+  const themeAnim = tooltipTheme.animation || {};
+  const anim = config?.animation || {};
+  const fadeOutDuration = anim.fadeOut ?? themeAnim.fadeOut ?? 200;
+  state.activeTweens.forEach((tween) => tween.stop());
+  state.activeTweens = [];
+  scene.tweens.add({
+    targets: tooltip,
+    alpha: 0,
+    duration: fadeOutDuration,
+    ease: "Cubic.In",
+    onComplete: () => {
+      tooltip.destroy();
+    }
+  });
+  state.tooltip = null;
+}
+function applyTooltip(scene, container, nextCallback, existingOnHoverStart, existingOnHoverEnd) {
+  if (!tooltipStates.has(container)) {
+    tooltipStates.set(container, {
+      isVisible: false,
+      tooltip: null,
+      activeTweens: [],
+      showTimer: null,
+      hideTimer: null,
+      autoDismissTimer: null,
+      currentConfig: null
+    });
+    container.once("destroy", () => {
+      const state2 = tooltipStates.get(container);
+      if (state2) {
+        if (state2.showTimer) clearTimeout(state2.showTimer);
+        if (state2.hideTimer) clearTimeout(state2.hideTimer);
+        if (state2.autoDismissTimer) clearTimeout(state2.autoDismissTimer);
+        state2.activeTweens.forEach((tween) => tween.stop());
+        hideTooltip(container);
+        tooltipStates.delete(container);
+      }
+    });
+  }
+  const state = tooltipStates.get(container);
+  if (!state) {
+    throw new Error("applyTooltip: state not initialized");
+  }
+  const tooltipTheme = getTooltipTheme();
+  const onHoverStart = (data) => {
+    if (existingOnHoverStart) existingOnHoverStart(data);
+    if (!nextCallback) return;
+    const result = nextCallback();
+    if (!result) return;
+    const config = typeof result === "string" ? { content: result } : result;
+    if (config.disabled) return;
+    if (state.hideTimer) {
+      clearTimeout(state.hideTimer);
+      state.hideTimer = null;
+    }
+    if (state.autoDismissTimer) {
+      clearTimeout(state.autoDismissTimer);
+      state.autoDismissTimer = null;
+    }
+    const showDelay = config.showDelay ?? tooltipTheme.showDelay ?? 500;
+    state.showTimer = setTimeout(() => {
+      showTooltip(scene, container, config);
+    }, showDelay);
+  };
+  const onHoverEnd = (data) => {
+    if (existingOnHoverEnd) existingOnHoverEnd(data);
+    if (state.showTimer) {
+      clearTimeout(state.showTimer);
+      state.showTimer = null;
+    }
+    const hideDelay = state.currentConfig?.hideDelay ?? tooltipTheme.hideDelay ?? 0;
+    if (hideDelay > 0) {
+      state.hideTimer = setTimeout(() => {
+        hideTooltip(container);
+      }, hideDelay);
+    } else {
+      hideTooltip(container);
+    }
+  };
+  return { onHoverStart, onHoverEnd };
+}
+export {
+  applyTooltip
+};
+//# sourceMappingURL=applyTooltip.js.map

package/dist/components/appliers/applyTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyTooltip.js","sources":["../../../src/components/appliers/applyTooltip.ts"],"sourcesContent":["/**\n * Tooltip applier for component patching\n * Manages native Phaser text tooltip rendering with animations\n */\nimport * as Phaser from 'phaser'\nimport type { HoverEventData } from '../../gestures/gesture-types'\nimport { themeRegistry, type Theme } from '../../theme'\nimport type { TooltipCallback, TooltipConfig } from '../../tooltip/tooltip-types'\nimport { createBackgroundImage } from '../backgroundImage'\n\ntype TooltipTheme = NonNullable<Theme['Tooltip']>\n\nfunction getTooltipTheme(): TooltipTheme {\n  return themeRegistry.getComponentTheme<TooltipTheme>('Tooltip')\n}\n\n/**\n * Internal state for tooltip management per container\n */\ninterface TooltipState {\n  isVisible: boolean\n  tooltip: Phaser.GameObjects.Container | null\n  activeTweens: Phaser.Tweens.Tween[]\n  showTimer: ReturnType<typeof setTimeout> | null\n  hideTimer: ReturnType<typeof setTimeout> | null\n  autoDismissTimer: ReturnType<typeof setTimeout> | null\n  currentConfig: TooltipConfig | null\n}\n\n// Map to store tooltip state for each container\nconst tooltipStates = new Map<Phaser.GameObjects.Container, TooltipState>()\n\n/**\n * Calculate tooltip position based on target bounds and preferred position\n * Auto-adjusts if tooltip would go out of viewport bounds\n */\nfunction calculateTooltipPosition(\n  targetBounds: Phaser.Geom.Rectangle,\n  position: 'top' | 'bottom' | 'left' | 'right',\n  offset: number,\n  tooltipWidth: number,\n  tooltipHeight: number\n): { x: number; y: number } {\n  const viewport = {\n    width: window.innerWidth,\n    height: window.innerHeight,\n  }\n\n  let x = 0\n  let y = 0\n\n  switch (position) {\n    case 'top':\n      x = targetBounds.centerX - tooltipWidth / 2\n      y = targetBounds.top - tooltipHeight - offset\n      break\n    case 'bottom':\n      x = targetBounds.centerX - tooltipWidth / 2\n      y = targetBounds.bottom + offset\n      break\n    case 'left':\n      x = targetBounds.left - tooltipWidth - offset\n      y = targetBounds.centerY - tooltipHeight / 2\n      break\n    case 'right':\n      x = targetBounds.right + offset\n      y = targetBounds.centerY - tooltipHeight / 2\n      break\n  }\n\n  // Clamp to viewport bounds (with small padding)\n  x = Math.max(8, Math.min(x, viewport.width - tooltipWidth - 8))\n  y = Math.max(8, Math.min(y, viewport.height - tooltipHeight - 8))\n\n  return { x, y }\n}\n\n/**\n * Show native Phaser text tooltip with animations\n */\nfunction showTooltip(\n  scene: Phaser.Scene,\n  container: Phaser.GameObjects.Container,\n  config: TooltipConfig\n): void {\n  const state = tooltipStates.get(container)\n  if (!state || state.isVisible) return\n\n  state.isVisible = true\n  state.currentConfig = config\n\n  const tooltipTheme = getTooltipTheme()\n\n  const position = config.position ?? tooltipTheme.position ?? 'top'\n  const offset = config.offset ?? tooltipTheme.offset ?? 8\n\n  const content = config.content\n\n  // Get target bounds\n  const targetBounds = container.getBounds()\n\n  // Create text without background first to measure\n  const textStyle = tooltipTheme.textStyle ?? {\n    fontSize: '14px',\n    fontFamily: 'Arial',\n    color: '#ffffff',\n    padding: { x: 8, y: 4 },\n  }\n\n  // Remove backgroundColor from textStyle, we'll draw it manually\n  const { backgroundColor: bgColor, ...styleWithoutBg } = textStyle\n\n  const text = scene.add.text(\n    0,\n    0,\n    content,\n    styleWithoutBg as Phaser.Types.GameObjects.Text.TextStyle\n  )\n  text.setOrigin(0.5)\n\n  // Measure text with padding\n  const padding = textStyle.padding ?? { x: 8, y: 4 }\n  const paddingX = typeof padding === 'number' ? padding : (padding.x ?? 8)\n  const paddingY = typeof padding === 'number' ? padding : (padding.y ?? 4)\n  const textWidth = text.width\n  const textHeight = text.height\n  const bgWidth = textWidth + paddingX * 2\n  const bgHeight = textHeight + paddingY * 2\n\n  // Parse background color\n  const bg = bgColor ?? '#000000dd'\n  let fillColor = 0x000000\n  let fillAlpha = 0.87\n\n  if (typeof bg === 'string') {\n    if (bg.startsWith('#')) {\n      // Handle hex with optional alpha\n      const hex = bg.slice(1)\n      if (hex.length === 8) {\n        fillColor = parseInt(hex.slice(0, 6), 16)\n        fillAlpha = parseInt(hex.slice(6, 8), 16) / 255\n      } else if (hex.length === 6) {\n        fillColor = parseInt(hex, 16)\n        fillAlpha = 1\n      }\n    }\n  }\n\n  const background = createBackgroundImage(\n    scene,\n    {\n      backgroundColor: fillColor,\n      backgroundAlpha: fillAlpha,\n      cornerRadius: tooltipTheme.cornerRadius ?? 6,\n    },\n    bgWidth,\n    bgHeight\n  )\n\n  if (!background) {\n    text.destroy()\n    return\n  }\n\n  background.setOrigin(0.5, 0.5)\n\n  // Create container for background + text\n  const tooltipContainer = scene.add.container(0, 0, [background, text])\n  tooltipContainer.setDepth(10000)\n\n  // Measure container bounds\n  const textBounds = tooltipContainer.getBounds()\n\n  // Calculate position\n  const pos = calculateTooltipPosition(\n    targetBounds,\n    position,\n    offset,\n    textBounds.width,\n    textBounds.height\n  )\n\n  // Animation config - merge config with theme defaults\n  const themeAnim = tooltipTheme.animation || {}\n  const anim = config.animation || {}\n  const fadeInDuration = anim.fadeIn ?? themeAnim.fadeIn ?? 200\n  const moveOffset = {\n    dx: anim.move?.dx ?? themeAnim.move?.dx ?? 0,\n    dy: anim.move?.dy ?? themeAnim.move?.dy ?? 0,\n  }\n  const pulse = anim.pulse ?? themeAnim.pulse ?? false\n  const pulseScale = anim.pulseScale ?? [0.75, 1.25]\n\n  // Set initial position (with move offset if enabled)\n  tooltipContainer.setPosition(\n    pos.x + textBounds.width / 2 - moveOffset.dx,\n    pos.y + textBounds.height / 2 - moveOffset.dy\n  )\n  tooltipContainer.setAlpha(0)\n\n  state.tooltip = tooltipContainer\n\n  // Fade in animation\n  const fadeTween = scene.tweens.add({\n    targets: tooltipContainer,\n    alpha: 1,\n    x: pos.x + textBounds.width / 2,\n    y: pos.y + textBounds.height / 2,\n    duration: fadeInDuration,\n    ease: 'Cubic.Out',\n  })\n  state.activeTweens.push(fadeTween)\n\n  // Pulse animation\n  if (pulse) {\n    const pulseTween = scene.tweens.add({\n      targets: tooltipContainer,\n      scale: { from: pulseScale[0], to: pulseScale[1] },\n      duration: 600,\n      yoyo: true,\n      repeat: -1,\n      ease: 'Sine.InOut',\n    })\n    state.activeTweens.push(pulseTween)\n  }\n\n  // Auto-dismiss timer if configured\n  if (config.autoDismiss && config.autoDismiss > 0) {\n    state.autoDismissTimer = setTimeout(() => {\n      hideTooltip(container)\n    }, config.autoDismiss)\n  }\n}\n\n/**\n * Hide tooltip for a container\n */\nfunction hideTooltip(container: Phaser.GameObjects.Container): void {\n  const state = tooltipStates.get(container)\n  if (!state || !state.isVisible) return\n\n  state.isVisible = false\n  const config = state.currentConfig\n  state.currentConfig = null\n\n  // Clear auto-dismiss timer\n  if (state.autoDismissTimer) {\n    clearTimeout(state.autoDismissTimer)\n    state.autoDismissTimer = null\n  }\n\n  if (!state.tooltip) return\n\n  const tooltip = state.tooltip\n  const scene = tooltip.scene\n\n  // Get theme defaults for fade out\n  const tooltipTheme = getTooltipTheme()\n  const themeAnim = tooltipTheme.animation || {}\n  const anim = config?.animation || {}\n  const fadeOutDuration = anim.fadeOut ?? themeAnim.fadeOut ?? 200\n\n  // Stop all existing tweens\n  state.activeTweens.forEach((tween) => tween.stop())\n  state.activeTweens = []\n\n  // Fade out animation\n  scene.tweens.add({\n    targets: tooltip,\n    alpha: 0,\n    duration: fadeOutDuration,\n    ease: 'Cubic.In',\n    onComplete: () => {\n      tooltip.destroy()\n    },\n  })\n\n  state.tooltip = null\n}\n\n/**\n * Apply tooltip functionality to a container\n * Sets up hover handlers and manages tooltip lifecycle\n */\nexport function applyTooltip(\n  scene: Phaser.Scene,\n  container: Phaser.GameObjects.Container,\n  nextCallback: TooltipCallback | undefined,\n  existingOnHoverStart?: (data: HoverEventData) => void,\n  existingOnHoverEnd?: (data: HoverEventData) => void\n): {\n  onHoverStart: (data: HoverEventData) => void\n  onHoverEnd: (data: HoverEventData) => void\n} {\n  // Initialize state if needed\n  if (!tooltipStates.has(container)) {\n    tooltipStates.set(container, {\n      isVisible: false,\n      tooltip: null,\n      activeTweens: [],\n      showTimer: null,\n      hideTimer: null,\n      autoDismissTimer: null,\n      currentConfig: null,\n    })\n\n    // Cleanup on container destroy\n    container.once('destroy', () => {\n      const state = tooltipStates.get(container)\n      if (state) {\n        if (state.showTimer) clearTimeout(state.showTimer)\n        if (state.hideTimer) clearTimeout(state.hideTimer)\n        if (state.autoDismissTimer) clearTimeout(state.autoDismissTimer)\n        state.activeTweens.forEach((tween) => tween.stop())\n        hideTooltip(container)\n        tooltipStates.delete(container)\n      }\n    })\n  }\n\n  const state = tooltipStates.get(container)\n  if (!state) {\n    throw new Error('applyTooltip: state not initialized')\n  }\n\n  const tooltipTheme = getTooltipTheme()\n\n  // Create hover handlers\n  const onHoverStart = (data: HoverEventData) => {\n    // Call existing handler if present\n    if (existingOnHoverStart) existingOnHoverStart(data)\n\n    // Get tooltip config\n    if (!nextCallback) return\n\n    const result = nextCallback()\n    if (!result) return // null/undefined = no tooltip\n\n    const config: TooltipConfig = typeof result === 'string' ? { content: result } : result\n\n    if (config.disabled) return\n\n    // Clear any pending hide/auto-dismiss timers\n    if (state.hideTimer) {\n      clearTimeout(state.hideTimer)\n      state.hideTimer = null\n    }\n    if (state.autoDismissTimer) {\n      clearTimeout(state.autoDismissTimer)\n      state.autoDismissTimer = null\n    }\n\n    // Start show timer\n    const showDelay = config.showDelay ?? tooltipTheme.showDelay ?? 500\n    state.showTimer = setTimeout(() => {\n      showTooltip(scene, container, config)\n    }, showDelay)\n  }\n\n  const onHoverEnd = (data: HoverEventData) => {\n    // Call existing handler if present\n    if (existingOnHoverEnd) existingOnHoverEnd(data)\n\n    // Clear any pending show timer\n    if (state.showTimer) {\n      clearTimeout(state.showTimer)\n      state.showTimer = null\n    }\n\n    // Start hide timer\n    const hideDelay = state.currentConfig?.hideDelay ?? tooltipTheme.hideDelay ?? 0\n    if (hideDelay > 0) {\n      state.hideTimer = setTimeout(() => {\n        hideTooltip(container)\n      }, hideDelay)\n    } else {\n      hideTooltip(container)\n    }\n  }\n\n  return { onHoverStart, onHoverEnd }\n}\n"],"names":["state"],"mappings":"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"}

package/dist/components/appliers/applyTransform.cjs

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxCore = require("@number10/jsx-core");
+const signalsCore = require("@preact/signals-core");
+function applySignalProp(node, key, prevValue, nextValue, apply) {
+  node.__signalEffects?.get(key)?.();
+  if (jsxCore.isAnimatedSignal(nextValue)) {
+    apply(nextValue.value);
+    const cleanup = signalsCore.effect(() => {
+      apply(nextValue.value);
+    });
+    if (!node.__signalEffects) {
+      node.__signalEffects = /* @__PURE__ */ new Map();
+    }
+    node.__signalEffects.set(key, cleanup);
+  } else if (typeof nextValue === "number" && nextValue !== prevValue) {
+    apply(nextValue);
+  }
+}
+function applyTransformProps(node, prev, next) {
+  applySignalProp(node, "x", prev.x, next.x, (v) => {
+    node.x = v;
+  });
+  applySignalProp(node, "y", prev.y, next.y, (v) => {
+    node.y = v;
+  });
+  applySignalProp(node, "rotation", prev.rotation, next.rotation, (v) => {
+    node.rotation = v;
+  });
+  const nextScale = next.scale;
+  const prevScale = prev.scale;
+  const nextScaleX = next.scaleX;
+  const nextScaleY = next.scaleY;
+  const prevScaleX = prev.scaleX;
+  const prevScaleY = prev.scaleY;
+  if (jsxCore.isAnimatedSignal(nextScale)) {
+    applySignalProp(node, "scale", prevScale, nextScale, (v) => {
+      node.setScale?.(v, v);
+    });
+  } else if (typeof nextScale === "number" && nextScale !== prevScale) {
+    node.setScale?.(nextScale, nextScale);
+  } else if (nextScaleX !== prevScaleX || nextScaleY !== prevScaleY) {
+    if (jsxCore.isAnimatedSignal(nextScaleX)) {
+      applySignalProp(node, "scaleX", prevScaleX, nextScaleX, (v) => {
+        node.setScale?.(v, node.scaleY ?? 1);
+      });
+    } else if (jsxCore.isAnimatedSignal(nextScaleY)) {
+      applySignalProp(node, "scaleY", prevScaleY, nextScaleY, (v) => {
+        node.setScale?.(node.scaleX ?? 1, v);
+      });
+    } else {
+      const currentScaleX = node.scaleX ?? 1;
+      const currentScaleY = node.scaleY ?? 1;
+      const sx = typeof nextScaleX === "number" ? nextScaleX : currentScaleX;
+      const sy = typeof nextScaleY === "number" ? nextScaleY : currentScaleY;
+      node.setScale?.(sx, sy);
+    }
+  }
+}
+exports.applyTransformProps = applyTransformProps;
+//# sourceMappingURL=applyTransform.cjs.map

package/dist/components/appliers/applyTransform.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyTransform.cjs","sources":["../../../src/components/appliers/applyTransform.ts"],"sourcesContent":["/**\n * Shared property appliers for component patching\n * These functions avoid code duplication when updating node properties\n *\n * Supports AnimatedSignal values — subscribes to signal changes and updates\n * native node properties directly, bypassing VDOM re-renders.\n */\nimport { isAnimatedSignal } from '@number10/jsx-core'\nimport { effect } from '@preact/signals-core'\nimport type { TransformProps } from '../../core-props'\n\n/**\n * Generic node type with transform capabilities\n */\ntype TransformNode = {\n  x: number\n  y: number\n  rotation: number\n  scaleX: number\n  scaleY: number\n  setScale: (x: number, y: number) => void\n}\n\ninterface SignalEffectNode {\n  __signalEffects?: Map<string, () => void>\n}\n\n/**\n * Applies a prop value that may be an AnimatedSignal.\n * Subscribes to signal changes for live updates without VDOM re-renders.\n *\n * @param node - Target node\n * @param key - Effect key for cleanup tracking\n * @param prevValue - Previous prop value\n * @param nextValue - New prop value (may be AnimatedSignal)\n * @param apply - Callback to set the resolved numeric value on the node\n */\nfunction applySignalProp<T extends SignalEffectNode>(\n  node: T,\n  key: string,\n  prevValue: unknown,\n  nextValue: unknown,\n  apply: (value: number) => void\n): void {\n  // Clean up previous signal effect for this key\n  node.__signalEffects?.get(key)?.()\n\n  if (isAnimatedSignal(nextValue)) {\n    // Apply initial value immediately\n    apply(nextValue.value)\n\n    // Subscribe to future changes — updates native property without VDOM\n    const cleanup = effect(() => {\n      apply(nextValue.value)\n    })\n\n    // Track cleanup for disposal when props change or node unmounts\n    if (!node.__signalEffects) {\n      node.__signalEffects = new Map()\n    }\n    node.__signalEffects.set(key, cleanup)\n  } else if (typeof nextValue === 'number' && nextValue !== prevValue) {\n    apply(nextValue)\n  }\n}\n\n/**\n * Applies transform properties (position, rotation, scale)\n * @param node - Node with transform properties\n * @param prev - Previous props\n * @param next - New props\n */\nexport function applyTransformProps<T extends Partial<TransformNode & SignalEffectNode>>(\n  node: T,\n  prev: Partial<TransformProps>,\n  next: Partial<TransformProps>\n): void {\n  // Position\n  applySignalProp(node, 'x', prev.x, next.x, (v) => {\n    node.x = v\n  })\n  applySignalProp(node, 'y', prev.y, next.y, (v) => {\n    node.y = v\n  })\n\n  // Rotation\n  applySignalProp(node, 'rotation', prev.rotation, next.rotation, (v) => {\n    node.rotation = v\n  })\n\n  // Scale — unified scale\n  const nextScale = next.scale\n  const prevScale = prev.scale\n  const nextScaleX = next.scaleX\n  const nextScaleY = next.scaleY\n  const prevScaleX = prev.scaleX\n  const prevScaleY = prev.scaleY\n\n  if (isAnimatedSignal(nextScale)) {\n    applySignalProp(node, 'scale', prevScale, nextScale, (v) => {\n      node.setScale?.(v, v)\n    })\n  } else if (typeof nextScale === 'number' && nextScale !== prevScale) {\n    node.setScale?.(nextScale, nextScale)\n  } else if (nextScaleX !== prevScaleX || nextScaleY !== prevScaleY) {\n    if (isAnimatedSignal(nextScaleX)) {\n      applySignalProp(node, 'scaleX', prevScaleX, nextScaleX, (v) => {\n        node.setScale?.(v, node.scaleY ?? 1)\n      })\n    } else if (isAnimatedSignal(nextScaleY)) {\n      applySignalProp(node, 'scaleY', prevScaleY, nextScaleY, (v) => {\n        node.setScale?.(node.scaleX ?? 1, v)\n      })\n    } else {\n      const currentScaleX = node.scaleX ?? 1\n      const currentScaleY = node.scaleY ?? 1\n      const sx = typeof nextScaleX === 'number' ? nextScaleX : currentScaleX\n      const sy = typeof nextScaleY === 'number' ? nextScaleY : currentScaleY\n      node.setScale?.(sx, sy)\n    }\n  }\n}\n"],"names":["isAnimatedSignal","effect"],"mappings":";;;;AAqCA,SAAS,gBACP,MACA,KACA,WACA,WACA,OACM;AAEN,OAAK,iBAAiB,IAAI,GAAG,IAAA;AAE7B,MAAIA,QAAAA,iBAAiB,SAAS,GAAG;AAE/B,UAAM,UAAU,KAAK;AAGrB,UAAM,UAAUC,YAAAA,OAAO,MAAM;AAC3B,YAAM,UAAU,KAAK;AAAA,IACvB,CAAC;AAGD,QAAI,CAAC,KAAK,iBAAiB;AACzB,WAAK,sCAAsB,IAAA;AAAA,IAC7B;AACA,SAAK,gBAAgB,IAAI,KAAK,OAAO;AAAA,EACvC,WAAW,OAAO,cAAc,YAAY,cAAc,WAAW;AACnE,UAAM,SAAS;AAAA,EACjB;AACF;AAQO,SAAS,oBACd,MACA,MACA,MACM;AAEN,kBAAgB,MAAM,KAAK,KAAK,GAAG,KAAK,GAAG,CAAC,MAAM;AAChD,SAAK,IAAI;AAAA,EACX,CAAC;AACD,kBAAgB,MAAM,KAAK,KAAK,GAAG,KAAK,GAAG,CAAC,MAAM;AAChD,SAAK,IAAI;AAAA,EACX,CAAC;AAGD,kBAAgB,MAAM,YAAY,KAAK,UAAU,KAAK,UAAU,CAAC,MAAM;AACrE,SAAK,WAAW;AAAA,EAClB,CAAC;AAGD,QAAM,YAAY,KAAK;AACvB,QAAM,YAAY,KAAK;AACvB,QAAM,aAAa,KAAK;AACxB,QAAM,aAAa,KAAK;AACxB,QAAM,aAAa,KAAK;AACxB,QAAM,aAAa,KAAK;AAExB,MAAID,QAAAA,iBAAiB,SAAS,GAAG;AAC/B,oBAAgB,MAAM,SAAS,WAAW,WAAW,CAAC,MAAM;AAC1D,WAAK,WAAW,GAAG,CAAC;AAAA,IACtB,CAAC;AAAA,EACH,WAAW,OAAO,cAAc,YAAY,cAAc,WAAW;AACnE,SAAK,WAAW,WAAW,SAAS;AAAA,EACtC,WAAW,eAAe,cAAc,eAAe,YAAY;AACjE,QAAIA,QAAAA,iBAAiB,UAAU,GAAG;AAChC,sBAAgB,MAAM,UAAU,YAAY,YAAY,CAAC,MAAM;AAC7D,aAAK,WAAW,GAAG,KAAK,UAAU,CAAC;AAAA,MACrC,CAAC;AAAA,IACH,WAAWA,yBAAiB,UAAU,GAAG;AACvC,sBAAgB,MAAM,UAAU,YAAY,YAAY,CAAC,MAAM;AAC7D,aAAK,WAAW,KAAK,UAAU,GAAG,CAAC;AAAA,MACrC,CAAC;AAAA,IACH,OAAO;AACL,YAAM,gBAAgB,KAAK,UAAU;AACrC,YAAM,gBAAgB,KAAK,UAAU;AACrC,YAAM,KAAK,OAAO,eAAe,WAAW,aAAa;AACzD,YAAM,KAAK,OAAO,eAAe,WAAW,aAAa;AACzD,WAAK,WAAW,IAAI,EAAE;AAAA,IACxB;AAAA,EACF;AACF;;"}

package/dist/components/appliers/applyTransform.d.ts

@@ -0,0 +1,24 @@
+import { TransformProps } from '../../core-props';
+/**
+ * Generic node type with transform capabilities
+ */
+type TransformNode = {
+    x: number;
+    y: number;
+    rotation: number;
+    scaleX: number;
+    scaleY: number;
+    setScale: (x: number, y: number) => void;
+};
+interface SignalEffectNode {
+    __signalEffects?: Map<string, () => void>;
+}
+/**
+ * Applies transform properties (position, rotation, scale)
+ * @param node - Node with transform properties
+ * @param prev - Previous props
+ * @param next - New props
+ */
+export declare function applyTransformProps<T extends Partial<TransformNode & SignalEffectNode>>(node: T, prev: Partial<TransformProps>, next: Partial<TransformProps>): void;
+export {};
+//# sourceMappingURL=applyTransform.d.ts.map

package/dist/components/appliers/applyTransform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyTransform.d.ts","sourceRoot":"","sources":["../../../src/components/appliers/applyTransform.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEtD;;GAEG;AACH,KAAK,aAAa,GAAG;IACnB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,UAAU,gBAAgB;IACxB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,CAAA;CAC1C;AAyCD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,OAAO,CAAC,aAAa,GAAG,gBAAgB,CAAC,EACrF,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,OAAO,CAAC,cAAc,CAAC,EAC7B,IAAI,EAAE,OAAO,CAAC,cAAc,CAAC,GAC5B,IAAI,CA6CN"}

package/dist/components/appliers/applyTransform.js

@@ -0,0 +1,61 @@
+import { isAnimatedSignal } from "@number10/jsx-core";
+import { effect } from "@preact/signals-core";
+function applySignalProp(node, key, prevValue, nextValue, apply) {
+  node.__signalEffects?.get(key)?.();
+  if (isAnimatedSignal(nextValue)) {
+    apply(nextValue.value);
+    const cleanup = effect(() => {
+      apply(nextValue.value);
+    });
+    if (!node.__signalEffects) {
+      node.__signalEffects = /* @__PURE__ */ new Map();
+    }
+    node.__signalEffects.set(key, cleanup);
+  } else if (typeof nextValue === "number" && nextValue !== prevValue) {
+    apply(nextValue);
+  }
+}
+function applyTransformProps(node, prev, next) {
+  applySignalProp(node, "x", prev.x, next.x, (v) => {
+    node.x = v;
+  });
+  applySignalProp(node, "y", prev.y, next.y, (v) => {
+    node.y = v;
+  });
+  applySignalProp(node, "rotation", prev.rotation, next.rotation, (v) => {
+    node.rotation = v;
+  });
+  const nextScale = next.scale;
+  const prevScale = prev.scale;
+  const nextScaleX = next.scaleX;
+  const nextScaleY = next.scaleY;
+  const prevScaleX = prev.scaleX;
+  const prevScaleY = prev.scaleY;
+  if (isAnimatedSignal(nextScale)) {
+    applySignalProp(node, "scale", prevScale, nextScale, (v) => {
+      node.setScale?.(v, v);
+    });
+  } else if (typeof nextScale === "number" && nextScale !== prevScale) {
+    node.setScale?.(nextScale, nextScale);
+  } else if (nextScaleX !== prevScaleX || nextScaleY !== prevScaleY) {
+    if (isAnimatedSignal(nextScaleX)) {
+      applySignalProp(node, "scaleX", prevScaleX, nextScaleX, (v) => {
+        node.setScale?.(v, node.scaleY ?? 1);
+      });
+    } else if (isAnimatedSignal(nextScaleY)) {
+      applySignalProp(node, "scaleY", prevScaleY, nextScaleY, (v) => {
+        node.setScale?.(node.scaleX ?? 1, v);
+      });
+    } else {
+      const currentScaleX = node.scaleX ?? 1;
+      const currentScaleY = node.scaleY ?? 1;
+      const sx = typeof nextScaleX === "number" ? nextScaleX : currentScaleX;
+      const sy = typeof nextScaleY === "number" ? nextScaleY : currentScaleY;
+      node.setScale?.(sx, sy);
+    }
+  }
+}
+export {
+  applyTransformProps
+};
+//# sourceMappingURL=applyTransform.js.map

package/dist/components/appliers/applyTransform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyTransform.js","sources":["../../../src/components/appliers/applyTransform.ts"],"sourcesContent":["/**\n * Shared property appliers for component patching\n * These functions avoid code duplication when updating node properties\n *\n * Supports AnimatedSignal values — subscribes to signal changes and updates\n * native node properties directly, bypassing VDOM re-renders.\n */\nimport { isAnimatedSignal } from '@number10/jsx-core'\nimport { effect } from '@preact/signals-core'\nimport type { TransformProps } from '../../core-props'\n\n/**\n * Generic node type with transform capabilities\n */\ntype TransformNode = {\n  x: number\n  y: number\n  rotation: number\n  scaleX: number\n  scaleY: number\n  setScale: (x: number, y: number) => void\n}\n\ninterface SignalEffectNode {\n  __signalEffects?: Map<string, () => void>\n}\n\n/**\n * Applies a prop value that may be an AnimatedSignal.\n * Subscribes to signal changes for live updates without VDOM re-renders.\n *\n * @param node - Target node\n * @param key - Effect key for cleanup tracking\n * @param prevValue - Previous prop value\n * @param nextValue - New prop value (may be AnimatedSignal)\n * @param apply - Callback to set the resolved numeric value on the node\n */\nfunction applySignalProp<T extends SignalEffectNode>(\n  node: T,\n  key: string,\n  prevValue: unknown,\n  nextValue: unknown,\n  apply: (value: number) => void\n): void {\n  // Clean up previous signal effect for this key\n  node.__signalEffects?.get(key)?.()\n\n  if (isAnimatedSignal(nextValue)) {\n    // Apply initial value immediately\n    apply(nextValue.value)\n\n    // Subscribe to future changes — updates native property without VDOM\n    const cleanup = effect(() => {\n      apply(nextValue.value)\n    })\n\n    // Track cleanup for disposal when props change or node unmounts\n    if (!node.__signalEffects) {\n      node.__signalEffects = new Map()\n    }\n    node.__signalEffects.set(key, cleanup)\n  } else if (typeof nextValue === 'number' && nextValue !== prevValue) {\n    apply(nextValue)\n  }\n}\n\n/**\n * Applies transform properties (position, rotation, scale)\n * @param node - Node with transform properties\n * @param prev - Previous props\n * @param next - New props\n */\nexport function applyTransformProps<T extends Partial<TransformNode & SignalEffectNode>>(\n  node: T,\n  prev: Partial<TransformProps>,\n  next: Partial<TransformProps>\n): void {\n  // Position\n  applySignalProp(node, 'x', prev.x, next.x, (v) => {\n    node.x = v\n  })\n  applySignalProp(node, 'y', prev.y, next.y, (v) => {\n    node.y = v\n  })\n\n  // Rotation\n  applySignalProp(node, 'rotation', prev.rotation, next.rotation, (v) => {\n    node.rotation = v\n  })\n\n  // Scale — unified scale\n  const nextScale = next.scale\n  const prevScale = prev.scale\n  const nextScaleX = next.scaleX\n  const nextScaleY = next.scaleY\n  const prevScaleX = prev.scaleX\n  const prevScaleY = prev.scaleY\n\n  if (isAnimatedSignal(nextScale)) {\n    applySignalProp(node, 'scale', prevScale, nextScale, (v) => {\n      node.setScale?.(v, v)\n    })\n  } else if (typeof nextScale === 'number' && nextScale !== prevScale) {\n    node.setScale?.(nextScale, nextScale)\n  } else if (nextScaleX !== prevScaleX || nextScaleY !== prevScaleY) {\n    if (isAnimatedSignal(nextScaleX)) {\n      applySignalProp(node, 'scaleX', prevScaleX, nextScaleX, (v) => {\n        node.setScale?.(v, node.scaleY ?? 1)\n      })\n    } else if (isAnimatedSignal(nextScaleY)) {\n      applySignalProp(node, 'scaleY', prevScaleY, nextScaleY, (v) => {\n        node.setScale?.(node.scaleX ?? 1, v)\n      })\n    } else {\n      const currentScaleX = node.scaleX ?? 1\n      const currentScaleY = node.scaleY ?? 1\n      const sx = typeof nextScaleX === 'number' ? nextScaleX : currentScaleX\n      const sy = typeof nextScaleY === 'number' ? nextScaleY : currentScaleY\n      node.setScale?.(sx, sy)\n    }\n  }\n}\n"],"names":[],"mappings":";;AAqCA,SAAS,gBACP,MACA,KACA,WACA,WACA,OACM;AAEN,OAAK,iBAAiB,IAAI,GAAG,IAAA;AAE7B,MAAI,iBAAiB,SAAS,GAAG;AAE/B,UAAM,UAAU,KAAK;AAGrB,UAAM,UAAU,OAAO,MAAM;AAC3B,YAAM,UAAU,KAAK;AAAA,IACvB,CAAC;AAGD,QAAI,CAAC,KAAK,iBAAiB;AACzB,WAAK,sCAAsB,IAAA;AAAA,IAC7B;AACA,SAAK,gBAAgB,IAAI,KAAK,OAAO;AAAA,EACvC,WAAW,OAAO,cAAc,YAAY,cAAc,WAAW;AACnE,UAAM,SAAS;AAAA,EACjB;AACF;AAQO,SAAS,oBACd,MACA,MACA,MACM;AAEN,kBAAgB,MAAM,KAAK,KAAK,GAAG,KAAK,GAAG,CAAC,MAAM;AAChD,SAAK,IAAI;AAAA,EACX,CAAC;AACD,kBAAgB,MAAM,KAAK,KAAK,GAAG,KAAK,GAAG,CAAC,MAAM;AAChD,SAAK,IAAI;AAAA,EACX,CAAC;AAGD,kBAAgB,MAAM,YAAY,KAAK,UAAU,KAAK,UAAU,CAAC,MAAM;AACrE,SAAK,WAAW;AAAA,EAClB,CAAC;AAGD,QAAM,YAAY,KAAK;AACvB,QAAM,YAAY,KAAK;AACvB,QAAM,aAAa,KAAK;AACxB,QAAM,aAAa,KAAK;AACxB,QAAM,aAAa,KAAK;AACxB,QAAM,aAAa,KAAK;AAExB,MAAI,iBAAiB,SAAS,GAAG;AAC/B,oBAAgB,MAAM,SAAS,WAAW,WAAW,CAAC,MAAM;AAC1D,WAAK,WAAW,GAAG,CAAC;AAAA,IACtB,CAAC;AAAA,EACH,WAAW,OAAO,cAAc,YAAY,cAAc,WAAW;AACnE,SAAK,WAAW,WAAW,SAAS;AAAA,EACtC,WAAW,eAAe,cAAc,eAAe,YAAY;AACjE,QAAI,iBAAiB,UAAU,GAAG;AAChC,sBAAgB,MAAM,UAAU,YAAY,YAAY,CAAC,MAAM;AAC7D,aAAK,WAAW,GAAG,KAAK,UAAU,CAAC;AAAA,MACrC,CAAC;AAAA,IACH,WAAW,iBAAiB,UAAU,GAAG;AACvC,sBAAgB,MAAM,UAAU,YAAY,YAAY,CAAC,MAAM;AAC7D,aAAK,WAAW,KAAK,UAAU,GAAG,CAAC;AAAA,MACrC,CAAC;AAAA,IACH,OAAO;AACL,YAAM,gBAAgB,KAAK,UAAU;AACrC,YAAM,gBAAgB,KAAK,UAAU;AACrC,YAAM,KAAK,OAAO,eAAe,WAAW,aAAa;AACzD,YAAM,KAAK,OAAO,eAAe,WAAW,aAAa;AACzD,WAAK,WAAW,IAAI,EAAE;AAAA,IACxB;AAAA,EACF;AACF;"}