@number10/jsx-phaser 5.0.0

package/dist/components/primitives/view.js

@@ -0,0 +1,105 @@
+import { DebugLogger } from "@number10/jsx-core";
+import "phaser";
+import { applyBackgroundProps } from "../appliers/applyBackground.js";
+import { applyGesturesProps } from "../appliers/applyGestures.js";
+import { applyLayoutProps } from "../appliers/applyLayout.js";
+import { applyPhaserProps } from "../appliers/applyPhaser.js";
+import { applyTooltip } from "../appliers/applyTooltip.js";
+import { applyTransformProps } from "../appliers/applyTransform.js";
+import { createBackground } from "../creators/createBackground.js";
+import { createGestures } from "../creators/createGestures.js";
+import { createLayout } from "../creators/createLayout.js";
+import { createPhaser } from "../creators/createPhaser.js";
+import { resolveAnimatableNumber, createTransform } from "../creators/createTransform.js";
+function normalizeBackgroundProps(props) {
+  const bgProps = props;
+  const hasBackground = bgProps.backgroundColor !== void 0;
+  const hasBorder = bgProps.borderColor !== void 0;
+  if (!hasBackground && !hasBorder) {
+    return props;
+  }
+  const normalized = { ...props };
+  if (hasBackground && bgProps.backgroundAlpha === void 0) {
+    normalized.backgroundAlpha = 1;
+  }
+  if (hasBorder) {
+    if (bgProps.borderWidth === void 0 || bgProps.borderWidth === 0) {
+      normalized.borderWidth = 1;
+    }
+    if (bgProps.borderAlpha === void 0 || bgProps.borderAlpha === 0) {
+      normalized.borderAlpha = 1;
+    }
+  }
+  return normalized;
+}
+const viewCreator = (scene, props) => {
+  if (props.backgroundColor !== void 0 || props.cornerRadius !== void 0) {
+    DebugLogger.log("theme", "View Creator - Props received:", {
+      backgroundColor: props.backgroundColor,
+      cornerRadius: props.cornerRadius,
+      width: props.width,
+      height: props.height
+    });
+  }
+  const normalizedProps = normalizeBackgroundProps(props);
+  const container = scene.add.container(
+    resolveAnimatableNumber(normalizedProps.x) ?? 0,
+    resolveAnimatableNumber(normalizedProps.y) ?? 0
+  );
+  createTransform(container, normalizedProps);
+  createPhaser(container, normalizedProps);
+  createBackground(
+    scene,
+    container,
+    normalizedProps
+  );
+  createLayout(container, normalizedProps);
+  if (normalizedProps.onTooltip) {
+    const handlers = applyTooltip(
+      scene,
+      container,
+      normalizedProps.onTooltip,
+      normalizedProps.onHoverStart,
+      normalizedProps.onHoverEnd
+    );
+    normalizedProps.onHoverStart = handlers.onHoverStart;
+    normalizedProps.onHoverEnd = handlers.onHoverEnd;
+  }
+  createGestures(scene, container, normalizedProps);
+  DebugLogger.log(
+    "layout",
+    "View creator storing __layoutProps with padding:",
+    normalizedProps.padding
+  );
+  return container;
+};
+const viewPatcher = (node, prev, next) => {
+  const normalizedPrev = normalizeBackgroundProps(prev);
+  const normalizedNext = normalizeBackgroundProps(next);
+  applyTransformProps(node, normalizedPrev, normalizedNext);
+  applyPhaserProps(node, normalizedPrev, normalizedNext);
+  const container = node;
+  applyBackgroundProps(container, normalizedPrev, normalizedNext);
+  if (container.scene && container.scene.data) {
+    if (normalizedNext.onTooltip) {
+      const handlers = applyTooltip(
+        container.scene,
+        container,
+        normalizedNext.onTooltip,
+        normalizedNext.onHoverStart,
+        normalizedNext.onHoverEnd
+      );
+      normalizedNext.onHoverStart = handlers.onHoverStart;
+      normalizedNext.onHoverEnd = handlers.onHoverEnd;
+    }
+  }
+  if (container.scene && container.scene.data) {
+    applyGesturesProps(container.scene, container, normalizedPrev, normalizedNext);
+  }
+  applyLayoutProps(container, normalizedPrev, normalizedNext);
+};
+export {
+  viewCreator,
+  viewPatcher
+};
+//# sourceMappingURL=view.js.map

package/dist/components/primitives/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sources":["../../../src/components/primitives/view.ts"],"sourcesContent":["/**\n * View component - Phaser Container with background Graphics and layout system\n * Status: IMPLEMENTED ✅\n *\n * Design Overview:\n * ================\n *\n * 1. Component Role: LAYOUT CONTAINER\n *    Purpose: Primary layout primitive for UI composition\n *    Composition: Phaser.Container + Background Graphics (optional)\n *    Responsibilities:\n *    - Layout orchestration (flexbox-style positioning of children)\n *    - Visual styling (background color, borders, corner radius)\n *    - Gesture handling (touch/mouse interaction)\n *    - Dimension management (defines its own size + provides context for children)\n *\n * 2. Headless Behavior: NEVER HEADLESS ⚠️\n *    Decision: View cannot be headless (always participates in layout)\n *    Reasoning:\n *    - View IS the layout system - it defines layout context for children\n *    - Background Graphics has special role (__isBackground flag)\n *    - Graphics is internal to View, excluded from child layout calculations\n *    - If you need non-layout container, use raw Phaser.Container directly\n *\n * 3. Layout System Architecture:\n *    Two-part system:\n *    A) Background Graphics (special role):\n *       - Defines View dimensions (not a layout child!)\n *       - Marked with __isBackground = true\n *       - Filtered out in layout calculations (see isLayoutChild helper)\n *       - Automatically resized to match container dimensions\n *    B) Layout Engine:\n *       - Processes children (Views, Text, Images, etc.)\n *       - Applies flexbox-style layout (row/column/stack)\n *       - Respects headless flag on children\n *       - Updates child positions/sizes based on layout props\n *\n * 4. Background Graphics vs. Graphics Component:\n *    Distinction:\n *    - View Background: Internal, auto-managed, defines dimensions, __isBackground=true\n *    - Graphics Component: User-facing, custom shapes, typically headless=true\n *    - Both use Phaser.Graphics but completely different purposes\n *\n * 5. Layout Size Provider:\n *    Implementation: __getLayoutSize returns explicit or calculated dimensions\n *    Behavior:\n *    - Explicit width/height: Use those values\n *    - Auto-size (undefined): Calculate from children + padding\n *    - Percentage/fill: Resolve from parent context\n *    - Critical: Background Graphics updates to match final size\n *\n * 6. Gesture System Integration:\n *    Features:\n *    - enableGestures: true enables touch/mouse interaction\n *    - Hit area automatically sized to container dimensions\n *    - Updated after layout recalculation (deferred queue)\n *    - Supports: onTouch, onTouchMove, onDoubleTap, onLongPress\n *    - Cross-platform (transparent mouse/touch support)\n *\n * 7. Styling Props:\n *    Background:\n *    - backgroundColor/backgroundAlpha: Fill color\n *    - cornerRadius: Rounded corners (number or per-corner object)\n *    - borderColor/borderWidth/borderAlpha: Stroke\n *    Auto-defaults:\n *    - backgroundAlpha defaults to 1 if backgroundColor set\n *    - borderWidth defaults to 1 if borderColor set\n *\n * 8. Common Patterns:\n *    Layout Container:\n *      <View direction=\"row\" gap={10} padding={20}>\n *        <View flex={1}>Left</View>\n *        <View flex={2}>Right</View>\n *      </View>\n *    Styled Box:\n *      <View backgroundColor={0x3498db} cornerRadius={8} padding={16}>\n *        <Text text=\"Card Content\" />\n *      </View>\n *    Interactive Area:\n *      <View enableGestures={true} onTouch={() => console.log('clicked')}>\n *        <Text text=\"Button\" />\n *      </View>\n *\n * 9. Performance Considerations:\n *    - Background Graphics redrawn only when visual props change\n *    - Layout calculations batched (LayoutBatchQueue)\n *    - Gesture hit areas updated in deferred queue (post-layout)\n *    - Overflow masking (overflow=\"hidden\") adds Phaser mask overhead\n *\n * 10. Known Limitations:\n *     - Background Graphics cannot be independently positioned/rotated\n *     - Nested View layout recalculations can be expensive (use sparingly)\n *     - Gesture system requires scene pointer plugin (auto-enabled)\n *\n * Implementation Status:\n * ======================\n * [✅] Phaser Container creation\n * [✅] Background Graphics with styling (color, border, radius)\n * [✅] Layout system integration (__layoutProps, __getLayoutSize)\n * [✅] Transform props (position, rotation, scale, alpha)\n * [✅] Gesture system (enableGestures, interaction callbacks)\n * [✅] Auto-defaults for background/border alpha\n * [✅] Overflow masking support\n * [✅] Theme system integration\n * [✅] Deferred layout queue for gesture updates\n */\nimport { DebugLogger } from '@number10/jsx-core'\nimport * as Phaser from 'phaser'\nimport type {\n  BackgroundProps,\n  GestureProps,\n  LayoutProps,\n  PhaserProps,\n  TransformProps,\n} from '../../core-props'\nimport type { HostCreator, HostPatcher } from '../../host'\nimport type { PropsContainerExtension, PropsDefaultExtension } from '../../types'\nimport { applyBackgroundProps } from '../appliers/applyBackground'\nimport { applyGesturesProps } from '../appliers/applyGestures'\nimport { applyLayoutProps } from '../appliers/applyLayout'\nimport { applyPhaserProps } from '../appliers/applyPhaser'\nimport { applyTooltip } from '../appliers/applyTooltip'\nimport { applyTransformProps } from '../appliers/applyTransform'\nimport type { BackgroundImage } from '../backgroundImage'\nimport { createBackground } from '../creators/createBackground'\nimport { createGestures } from '../creators/createGestures'\nimport { createLayout } from '../creators/createLayout'\nimport { createPhaser } from '../creators/createPhaser'\nimport { createTransform, resolveAnimatableNumber } from '../creators/createTransform'\n\n/**\n * Normalize background props - apply auto-defaults for alpha and border width\n * @param props - Original props\n * @returns Normalized props with auto-defaults applied\n */\nfunction normalizeBackgroundProps<T>(props: T): T {\n  // Only process if props contain background/border properties\n  const bgProps = props as unknown as Partial<BackgroundProps>\n  const hasBackground = bgProps.backgroundColor !== undefined\n  const hasBorder = bgProps.borderColor !== undefined\n\n  // If no background/border props, return as-is\n  if (!hasBackground && !hasBorder) {\n    return props\n  }\n\n  // Only apply defaults if the prop is explicitly undefined or 0 (theme default)\n  // This allows users to override with explicit values\n  const normalized = { ...props } as T & Partial<BackgroundProps>\n\n  if (hasBackground && bgProps.backgroundAlpha === undefined) {\n    normalized.backgroundAlpha = 1\n  }\n\n  if (hasBorder) {\n    if (bgProps.borderWidth === undefined || bgProps.borderWidth === 0) {\n      normalized.borderWidth = 1\n    }\n    if (bgProps.borderAlpha === undefined || bgProps.borderAlpha === 0) {\n      normalized.borderAlpha = 1\n    }\n  }\n\n  return normalized as T\n}\n\n/**\n * Base props for View - composing shared prop groups\n */\nexport interface ViewBaseProps\n  extends TransformProps, PhaserProps, LayoutProps, BackgroundProps, GestureProps {}\n\n/**\n * Props for View (Container) component - extends base props with JSX-specific props\n */\nexport interface ViewProps\n  extends\n    ViewBaseProps,\n    PropsDefaultExtension<Phaser.GameObjects.Container>,\n    PropsContainerExtension {}\n\n/**\n * View creator - creates a Phaser Container with optional background and interaction\n */\nexport const viewCreator: HostCreator<'View'> = (scene, props) => {\n  // Debug: Log props to verify theme values\n  if (props.backgroundColor !== undefined || props.cornerRadius !== undefined) {\n    DebugLogger.log('theme', 'View Creator - Props received:', {\n      backgroundColor: props.backgroundColor,\n      cornerRadius: props.cornerRadius,\n      width: props.width,\n      height: props.height,\n    })\n  }\n\n  // Normalize props early - apply auto-defaults for background/border\n  const normalizedProps = normalizeBackgroundProps(props)\n\n  const container = scene.add.container(\n    resolveAnimatableNumber(normalizedProps.x) ?? 0,\n    resolveAnimatableNumber(normalizedProps.y) ?? 0\n  )\n\n  // Apply transform props (scale, rotation)\n  createTransform(container, normalizedProps)\n\n  // Apply Phaser display props (alpha, depth, visible)\n  createPhaser(container, normalizedProps)\n\n  // Add background if backgroundColor is provided\n  createBackground(\n    scene,\n    container as typeof container & { __background?: BackgroundImage },\n    normalizedProps\n  )\n\n  // Setup layout system (props and size provider)\n  // Must be before createGestures so __getLayoutSize is available\n  createLayout(container, normalizedProps)\n\n  // Tooltip support - inject hover handlers if onTooltip is present\n  if (normalizedProps.onTooltip) {\n    const handlers = applyTooltip(\n      scene,\n      container,\n      normalizedProps.onTooltip,\n      normalizedProps.onHoverStart,\n      normalizedProps.onHoverEnd\n    )\n    normalizedProps.onHoverStart = handlers.onHoverStart\n    normalizedProps.onHoverEnd = handlers.onHoverEnd\n  }\n\n  // Setup gesture system (high-level touch/mouse gestures)\n  createGestures(scene, container, normalizedProps)\n\n  // Debug: Log layout props storage\n  DebugLogger.log(\n    'layout',\n    'View creator storing __layoutProps with padding:',\n    normalizedProps.padding\n  )\n\n  return container\n}\n\n/**\n * View patcher - updates View properties\n */\nexport const viewPatcher: HostPatcher<'View'> = (node, prev, next) => {\n  // Normalize props early - apply auto-defaults for background/border\n  const normalizedPrev = normalizeBackgroundProps(prev)\n  const normalizedNext = normalizeBackgroundProps(next)\n\n  // Apply transform props (position, rotation, scale)\n  applyTransformProps(node, normalizedPrev, normalizedNext)\n\n  // Apply Phaser display props (alpha, depth, visible)\n  applyPhaserProps(node, normalizedPrev, normalizedNext)\n\n  // Background updates\n  const container = node as Phaser.GameObjects.Container & {\n    __background?: BackgroundImage\n  }\n\n  applyBackgroundProps(container, normalizedPrev, normalizedNext)\n\n  // Tooltip support (integrates with gesture system)\n  // Apply before gestures so hover handlers can be injected\n  if (container.scene && container.scene.data) {\n    if (normalizedNext.onTooltip) {\n      const handlers = applyTooltip(\n        container.scene,\n        container,\n        normalizedNext.onTooltip,\n        normalizedNext.onHoverStart,\n        normalizedNext.onHoverEnd\n      )\n      // Inject hover handlers for tooltip\n      normalizedNext.onHoverStart = handlers.onHoverStart\n      normalizedNext.onHoverEnd = handlers.onHoverEnd\n    }\n  }\n\n  // Gesture event handlers (high-level touch/mouse gestures)\n  // Safety check: ensure container has valid scene before applying gestures\n  if (container.scene && container.scene.data) {\n    applyGesturesProps(container.scene, container, normalizedPrev, normalizedNext)\n  }\n\n  // Apply layout props and recalculate if needed\n  applyLayoutProps(container, normalizedPrev, normalizedNext)\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAuIA,SAAS,yBAA4B,OAAa;AAEhD,QAAM,UAAU;AAChB,QAAM,gBAAgB,QAAQ,oBAAoB;AAClD,QAAM,YAAY,QAAQ,gBAAgB;AAG1C,MAAI,CAAC,iBAAiB,CAAC,WAAW;AAChC,WAAO;AAAA,EACT;AAIA,QAAM,aAAa,EAAE,GAAG,MAAA;AAExB,MAAI,iBAAiB,QAAQ,oBAAoB,QAAW;AAC1D,eAAW,kBAAkB;AAAA,EAC/B;AAEA,MAAI,WAAW;AACb,QAAI,QAAQ,gBAAgB,UAAa,QAAQ,gBAAgB,GAAG;AAClE,iBAAW,cAAc;AAAA,IAC3B;AACA,QAAI,QAAQ,gBAAgB,UAAa,QAAQ,gBAAgB,GAAG;AAClE,iBAAW,cAAc;AAAA,IAC3B;AAAA,EACF;AAEA,SAAO;AACT;AAoBO,MAAM,cAAmC,CAAC,OAAO,UAAU;AAEhE,MAAI,MAAM,oBAAoB,UAAa,MAAM,iBAAiB,QAAW;AAC3E,gBAAY,IAAI,SAAS,kCAAkC;AAAA,MACzD,iBAAiB,MAAM;AAAA,MACvB,cAAc,MAAM;AAAA,MACpB,OAAO,MAAM;AAAA,MACb,QAAQ,MAAM;AAAA,IAAA,CACf;AAAA,EACH;AAGA,QAAM,kBAAkB,yBAAyB,KAAK;AAEtD,QAAM,YAAY,MAAM,IAAI;AAAA,IAC1B,wBAAwB,gBAAgB,CAAC,KAAK;AAAA,IAC9C,wBAAwB,gBAAgB,CAAC,KAAK;AAAA,EAAA;AAIhD,kBAAgB,WAAW,eAAe;AAG1C,eAAa,WAAW,eAAe;AAGvC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAKF,eAAa,WAAW,eAAe;AAGvC,MAAI,gBAAgB,WAAW;AAC7B,UAAM,WAAW;AAAA,MACf;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,IAAA;AAElB,oBAAgB,eAAe,SAAS;AACxC,oBAAgB,aAAa,SAAS;AAAA,EACxC;AAGA,iBAAe,OAAO,WAAW,eAAe;AAGhD,cAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAAA;AAGlB,SAAO;AACT;AAKO,MAAM,cAAmC,CAAC,MAAM,MAAM,SAAS;AAEpE,QAAM,iBAAiB,yBAAyB,IAAI;AACpD,QAAM,iBAAiB,yBAAyB,IAAI;AAGpD,sBAAoB,MAAM,gBAAgB,cAAc;AAGxD,mBAAiB,MAAM,gBAAgB,cAAc;AAGrD,QAAM,YAAY;AAIlB,uBAAqB,WAAW,gBAAgB,cAAc;AAI9D,MAAI,UAAU,SAAS,UAAU,MAAM,MAAM;AAC3C,QAAI,eAAe,WAAW;AAC5B,YAAM,WAAW;AAAA,QACf,UAAU;AAAA,QACV;AAAA,QACA,eAAe;AAAA,QACf,eAAe;AAAA,QACf,eAAe;AAAA,MAAA;AAGjB,qBAAe,eAAe,SAAS;AACvC,qBAAe,aAAa,SAAS;AAAA,IACvC;AAAA,EACF;AAIA,MAAI,UAAU,SAAS,UAAU,MAAM,MAAM;AAC3C,uBAAmB,UAAU,OAAO,WAAW,gBAAgB,cAAc;AAAA,EAC/E;AAGA,mBAAiB,WAAW,gBAAgB,cAAc;AAC5D;"}

package/dist/core-props.d.ts

@@ -0,0 +1,105 @@
+import { FocusEventData, GestureEventData, InputEventData, KeyboardEventData, WheelEventData } from './gestures/gesture-types';
+/**
+ * Core prop type definitions for shared component properties.
+ * Portable types are re-exported from @number10/jsx-core.
+ * Phaser-specific props (PhaserProps, TextSpecificProps, GestureProps) are defined here.
+ *
+ * @migration(audit:scene-portal-mount) Phase 3A — portable props moved to @number10/jsx-core.
+ *   This file keeps Phaser-specific types and will eventually move to @number10/jsx-phaser.
+ */
+export { normalizeGap, type Animatable, type BackgroundProps, type Display, type EdgeInsets, type LayoutProps, type SizeValue, type TransformProps, } from '@number10/jsx-core';
+export type { TooltipCallback } from '@number10/jsx-core';
+/**
+ * Phaser GameObject display properties — rendering and display list API.
+ *
+ * NOTE: `alpha` is provided by TransformProps (from @number10/jsx-core).
+ */
+export interface PhaserProps {
+    /**
+     * Depth (Z-index) of the game object in the display list
+     * Higher values are rendered on top of lower values
+     * Allows manual control over rendering order independent of child array order
+     *
+     * @example
+     * // Layer system in stack layout
+     * <View direction="stack">
+     *   <View depth={1}>Background</View>
+     *   <View depth={2}>Content</View>
+     *   <View depth={3}>Overlay</View>
+     * </View>
+     */
+    depth?: number;
+    /**
+     * Callback invoked when GameObject is created and fully initialized
+     * Useful for accessing GameObject properties (dimensions, bounds, etc.)
+     * without needing useRef
+     *
+     * @param node - The created Phaser GameObject
+     *
+     * @example
+     * // Display image dimensions
+     * <Image
+     *   texture="icon"
+     *   onReady={(img) => console.log(`${img.width}x${img.height}`)}
+     * />
+     *
+     * // Access View bounds
+     * <View
+     *   width={200}
+     *   height={100}
+     *   onReady={(view) => console.log(view.getBounds())}
+     * />
+     */
+    onReady?: (node: Phaser.GameObjects.GameObject) => void;
+}
+/**
+ * Text-specific styling properties (Phaser-specific).
+ */
+export interface TextSpecificProps {
+    text: string | undefined;
+    /** Maximum width for text wrapping */
+    maxWidth?: import('@number10/jsx-core').SizeValue;
+}
+/**
+ * High-level gesture props — unified touch and mouse interaction.
+ * Phaser-specific: uses Phaser input system and gesture manager.
+ */
+export interface GestureProps {
+    /** Enable gesture system for this container */
+    enableGestures?: boolean;
+    /** Called on pointer down + up on the same target (click/tap) */
+    onTouch?: (data: GestureEventData) => void;
+    /** Called when pointer up occurs outside the container */
+    onTouchOutside?: (data: GestureEventData) => void;
+    /** Called during pointer movement */
+    onTouchMove?: (data: GestureEventData) => void;
+    /** Called when double tap/click is detected */
+    onDoubleTap?: (data: GestureEventData) => void;
+    /** Called when pointer is held down for configured duration */
+    onLongPress?: (data: GestureEventData) => void;
+    /** Duration in ms to trigger long press (default: 500ms) */
+    longPressDuration?: number;
+    /** Max time in ms between taps for double tap (default: 300ms) */
+    doubleTapDelay?: number;
+    /** Max time in ms for a valid touch/click (default: 500ms) */
+    maxTouchDuration?: number;
+    /** Called when a key is pressed down */
+    onKeyDown?: (data: KeyboardEventData) => void;
+    /** Called when a key is released */
+    onKeyUp?: (data: KeyboardEventData) => void;
+    /** Called when input value changes */
+    onInput?: (data: InputEventData) => void;
+    /** Called when element receives focus */
+    onFocus?: (data: FocusEventData) => void;
+    /** Called when element loses focus */
+    onBlur?: (data: FocusEventData) => void;
+    /** Called when pointer enters the container (desktop/mouse only) */
+    onHoverStart?: (data: import('./gestures/gesture-types').HoverEventData) => void;
+    /** Called when pointer exits the container (desktop/mouse only) */
+    onHoverEnd?: (data: import('./gestures/gesture-types').HoverEventData) => void;
+    /** Called when mouse wheel is scrolled (desktop/mouse only) */
+    onWheel?: (data: WheelEventData) => void;
+    /** Portable tooltip callback; renderer decides how to draw it. */
+    onTooltip?: import('@number10/jsx-core').TooltipCallback | undefined;
+}
+//# sourceMappingURL=core-props.d.ts.map

package/dist/core-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-props.d.ts","sourceRoot":"","sources":["../src/core-props.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EACL,YAAY,EACZ,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,OAAO,EACZ,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,cAAc,GACpB,MAAM,oBAAoB,CAAA;AAG3B,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEzD;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,UAAU,KAAK,IAAI,CAAA;CACxD;AAGD,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACf,MAAM,0BAA0B,CAAA;AAEjC;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;IACxB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,oBAAoB,EAAE,SAAS,CAAA;CAClD;AAED;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,+CAA+C;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAA;IAExB,iEAAiE;IACjE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAE1C,0DAA0D;IAC1D,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAEjD,qCAAqC;IACrC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAE9C,+CAA+C;IAC/C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAE9C,+DAA+D;IAC/D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAE9C,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAE1B,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAA;IAEvB,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IAEzB,wCAAwC;IACxC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAE7C,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAE3C,sCAAsC;IACtC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAA;IAExC,yCAAyC;IACzC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAA;IAExC,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAA;IAEvC,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,0BAA0B,EAAE,cAAc,KAAK,IAAI,CAAA;IAEhF,mEAAmE;IACnE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,0BAA0B,EAAE,cAAc,KAAK,IAAI,CAAA;IAE9E,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAA;IAExC,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,oBAAoB,EAAE,eAAe,GAAG,SAAS,CAAA;CACrE"}

package/dist/core-types.d.ts

@@ -0,0 +1,71 @@
+import { VectorDrawContentPrimitiveProps } from '@number10/jsx-core';
+import { GraphicsBaseProps } from './components/primitives/graphics';
+import { ImageBaseProps } from './components/primitives/image';
+import { NineSliceBaseProps } from './components/primitives/nineslice';
+import { ParticlesBaseProps } from './components/primitives/particles';
+import { SpriteBaseProps } from './components/primitives/sprite';
+import { TextBaseProps } from './components/primitives/text';
+import { TileSpriteBaseProps } from './components/primitives/tilesprite';
+import { ViewBaseProps } from './components/primitives/view';
+/**
+ * Core type system for native Phaser GameObject primitives
+ * Defines the mapping between node type names and their corresponding Phaser types
+ */
+import type * as Phaser from 'phaser';
+/**
+ * Maps node type names to Phaser GameObject classes
+ */
+export interface NodeMap {
+    view: Phaser.GameObjects.Container;
+    text: Phaser.GameObjects.Text;
+    nineslice: Phaser.GameObjects.NineSlice;
+    particles: import('./particles/particle-types').ParticlesHandle;
+    sprite: Phaser.GameObjects.Sprite;
+    image: Phaser.GameObjects.Image;
+    graphics: Phaser.GameObjects.Graphics;
+    vectorDraw: Phaser.GameObjects.Graphics;
+    tilesprite: Phaser.GameObjects.TileSprite;
+    View: Phaser.GameObjects.Container;
+    Text: Phaser.GameObjects.Text;
+    NineSlice: Phaser.GameObjects.NineSlice;
+    Particles: import('./particles/particle-types').ParticlesHandle;
+    Sprite: Phaser.GameObjects.Sprite;
+    Image: Phaser.GameObjects.Image;
+    Graphics: Phaser.GameObjects.Graphics;
+    TileSprite: Phaser.GameObjects.TileSprite;
+}
+/**
+ * Maps node type names to their props interfaces
+ */
+export interface NodePropsMap {
+    view: ViewBaseProps;
+    text: TextBaseProps;
+    nineslice: NineSliceBaseProps;
+    particles: ParticlesBaseProps;
+    sprite: SpriteBaseProps;
+    image: ImageBaseProps;
+    graphics: GraphicsBaseProps;
+    vectorDraw: VectorDrawContentPrimitiveProps;
+    tilesprite: TileSpriteBaseProps;
+    View: ViewBaseProps;
+    Text: TextBaseProps;
+    NineSlice: NineSliceBaseProps;
+    Particles: ParticlesBaseProps;
+    Sprite: SpriteBaseProps;
+    Image: ImageBaseProps;
+    Graphics: GraphicsBaseProps;
+    TileSprite: TileSpriteBaseProps;
+}
+/**
+ * Union of all supported node type names
+ */
+export type NodeType = keyof NodeMap;
+/**
+ * Get the instance type for a given node type
+ */
+export type NodeInstance<T extends NodeType = NodeType> = NodeMap[T];
+/**
+ * Get the props type for a given node type
+ */
+export type NodeProps<T extends NodeType = NodeType> = NodePropsMap[T];
+//# sourceMappingURL=core-types.d.ts.map

package/dist/core-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-types.d.ts","sourceRoot":"","sources":["../src/core-types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,oBAAoB,CAAA;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AACzE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AACnE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAA;AAC3E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAA;AAC3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AACrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AAC7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAEjE;;GAEG;AACH,MAAM,WAAW,OAAO;IAEtB,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,CAAA;IAClC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,IAAI,CAAA;IAC7B,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,CAAA;IACvC,SAAS,EAAE,OAAO,4BAA4B,EAAE,eAAe,CAAA;IAC/D,MAAM,EAAE,MAAM,CAAC,WAAW,CAAC,MAAM,CAAA;IACjC,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,KAAK,CAAA;IAC/B,QAAQ,EAAE,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAA;IACrC,UAAU,EAAE,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAA;IACvC,UAAU,EAAE,MAAM,CAAC,WAAW,CAAC,UAAU,CAAA;IAEzC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,CAAA;IAClC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,IAAI,CAAA;IAC7B,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,CAAA;IACvC,SAAS,EAAE,OAAO,4BAA4B,EAAE,eAAe,CAAA;IAC/D,MAAM,EAAE,MAAM,CAAC,WAAW,CAAC,MAAM,CAAA;IACjC,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,KAAK,CAAA;IAC/B,QAAQ,EAAE,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAA;IACrC,UAAU,EAAE,MAAM,CAAC,WAAW,CAAC,UAAU,CAAA;CAC1C;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAE3B,IAAI,EAAE,aAAa,CAAA;IACnB,IAAI,EAAE,aAAa,CAAA;IACnB,SAAS,EAAE,kBAAkB,CAAA;IAC7B,SAAS,EAAE,kBAAkB,CAAA;IAC7B,MAAM,EAAE,eAAe,CAAA;IACvB,KAAK,EAAE,cAAc,CAAA;IACrB,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,UAAU,EAAE,+BAA+B,CAAA;IAC3C,UAAU,EAAE,mBAAmB,CAAA;IAE/B,IAAI,EAAE,aAAa,CAAA;IACnB,IAAI,EAAE,aAAa,CAAA;IACnB,SAAS,EAAE,kBAAkB,CAAA;IAC7B,SAAS,EAAE,kBAAkB,CAAA;IAC7B,MAAM,EAAE,eAAe,CAAA;IACvB,KAAK,EAAE,cAAc,CAAA;IACrB,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,UAAU,EAAE,mBAAmB,CAAA;CAChC;AAED;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAA;AAEpC;;GAEG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,CAAA;AAEpE;;GAEG;AACH,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,IAAI,YAAY,CAAC,CAAC,CAAC,CAAA"}

package/dist/design-tokens/resolve-theme-tokens.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxCore = require("@number10/jsx-core");
+const theme = require("../theme.cjs");
+function resolveThemeTokens(localTheme) {
+  if (localTheme?.__colorPreset) {
+    const preset = jsxCore.getPresetWithMode(
+      localTheme.__colorPreset.name,
+      localTheme.__colorPreset.mode ?? "light"
+    );
+    return jsxCore.createDesignTokens(preset);
+  }
+  const colors = theme.themeRegistry.getColorTokens();
+  if (colors) {
+    return {
+      colors,
+      textStyles: jsxCore.createTextStyleTokens(colors.text.DEFAULT.toString()),
+      spacing: jsxCore.defaultSpacingTokens,
+      sizes: jsxCore.defaultSizeTokens,
+      radius: jsxCore.defaultRadiusTokens
+    };
+  }
+  const fallback = jsxCore.getPresetWithMode("oceanBlue", "light");
+  return jsxCore.createDesignTokens(fallback);
+}
+exports.resolveThemeTokens = resolveThemeTokens;
+//# sourceMappingURL=resolve-theme-tokens.cjs.map

package/dist/design-tokens/resolve-theme-tokens.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-theme-tokens.cjs","sources":["../../src/design-tokens/resolve-theme-tokens.ts"],"sourcesContent":["/**\n * Resolve design tokens from theme state (synchronous, no hooks).\n * Called by the VDOM cycle to inject tokens into the hook context.\n *\n * Extracted from use-theme-tokens.ts to break circular dependency:\n *   phaser-vdom-runtime → phaser-surface-adapter → use-theme-tokens → hooks → vdom → phaser-vdom-runtime\n */\nimport {\n  createDesignTokens,\n  createTextStyleTokens,\n  defaultRadiusTokens,\n  defaultSizeTokens,\n  defaultSpacingTokens,\n  getPresetWithMode,\n  type DesignTokens,\n} from '@number10/jsx-core'\nimport type { PhaserPartialTheme } from '../theme'\nimport { themeRegistry } from '../theme'\n\n/**\n * Resolve design tokens from theme state.\n * @param localTheme - Current VDOM theme (or undefined)\n * @returns DesignTokens or undefined\n */\nexport function resolveThemeTokens(localTheme: PhaserPartialTheme | undefined): DesignTokens {\n  if (localTheme?.__colorPreset) {\n    const preset = getPresetWithMode(\n      localTheme.__colorPreset.name as Parameters<typeof getPresetWithMode>[0],\n      localTheme.__colorPreset.mode ?? 'light'\n    )\n    return createDesignTokens(preset)\n  }\n\n  const colors = themeRegistry.getColorTokens()\n  if (colors) {\n    return {\n      colors,\n      textStyles: createTextStyleTokens(colors.text.DEFAULT.toString()),\n      spacing: defaultSpacingTokens,\n      sizes: defaultSizeTokens,\n      radius: defaultRadiusTokens,\n    }\n  }\n\n  // Fallback: use oceanBlue light preset as default (same as Pixi)\n  const fallback = getPresetWithMode('oceanBlue', 'light')\n  return createDesignTokens(fallback)\n}\n"],"names":["getPresetWithMode","createDesignTokens","themeRegistry","createTextStyleTokens","defaultSpacingTokens","defaultSizeTokens","defaultRadiusTokens"],"mappings":";;;;AAwBO,SAAS,mBAAmB,YAA0D;AAC3F,MAAI,YAAY,eAAe;AAC7B,UAAM,SAASA,QAAAA;AAAAA,MACb,WAAW,cAAc;AAAA,MACzB,WAAW,cAAc,QAAQ;AAAA,IAAA;AAEnC,WAAOC,QAAAA,mBAAmB,MAAM;AAAA,EAClC;AAEA,QAAM,SAASC,MAAAA,cAAc,eAAA;AAC7B,MAAI,QAAQ;AACV,WAAO;AAAA,MACL;AAAA,MACA,YAAYC,QAAAA,sBAAsB,OAAO,KAAK,QAAQ,UAAU;AAAA,MAChE,SAASC,QAAAA;AAAAA,MACT,OAAOC,QAAAA;AAAAA,MACP,QAAQC,QAAAA;AAAAA,IAAA;AAAA,EAEZ;AAGA,QAAM,WAAWN,QAAAA,kBAAkB,aAAa,OAAO;AACvD,SAAOC,QAAAA,mBAAmB,QAAQ;AACpC;;"}

package/dist/design-tokens/resolve-theme-tokens.d.ts

@@ -0,0 +1,9 @@
+import { DesignTokens } from '@number10/jsx-core';
+import { PhaserPartialTheme } from '../theme';
+/**
+ * Resolve design tokens from theme state.
+ * @param localTheme - Current VDOM theme (or undefined)
+ * @returns DesignTokens or undefined
+ */
+export declare function resolveThemeTokens(localTheme: PhaserPartialTheme | undefined): DesignTokens;
+//# sourceMappingURL=resolve-theme-tokens.d.ts.map

package/dist/design-tokens/resolve-theme-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-theme-tokens.d.ts","sourceRoot":"","sources":["../../src/design-tokens/resolve-theme-tokens.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAOL,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAGlD;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,kBAAkB,GAAG,SAAS,GAAG,YAAY,CAuB3F"}

package/dist/design-tokens/resolve-theme-tokens.js

@@ -0,0 +1,27 @@
+import { defaultRadiusTokens, defaultSizeTokens, defaultSpacingTokens, createTextStyleTokens, getPresetWithMode, createDesignTokens } from "@number10/jsx-core";
+import { themeRegistry } from "../theme.js";
+function resolveThemeTokens(localTheme) {
+  if (localTheme?.__colorPreset) {
+    const preset = getPresetWithMode(
+      localTheme.__colorPreset.name,
+      localTheme.__colorPreset.mode ?? "light"
+    );
+    return createDesignTokens(preset);
+  }
+  const colors = themeRegistry.getColorTokens();
+  if (colors) {
+    return {
+      colors,
+      textStyles: createTextStyleTokens(colors.text.DEFAULT.toString()),
+      spacing: defaultSpacingTokens,
+      sizes: defaultSizeTokens,
+      radius: defaultRadiusTokens
+    };
+  }
+  const fallback = getPresetWithMode("oceanBlue", "light");
+  return createDesignTokens(fallback);
+}
+export {
+  resolveThemeTokens
+};
+//# sourceMappingURL=resolve-theme-tokens.js.map

package/dist/design-tokens/resolve-theme-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-theme-tokens.js","sources":["../../src/design-tokens/resolve-theme-tokens.ts"],"sourcesContent":["/**\n * Resolve design tokens from theme state (synchronous, no hooks).\n * Called by the VDOM cycle to inject tokens into the hook context.\n *\n * Extracted from use-theme-tokens.ts to break circular dependency:\n *   phaser-vdom-runtime → phaser-surface-adapter → use-theme-tokens → hooks → vdom → phaser-vdom-runtime\n */\nimport {\n  createDesignTokens,\n  createTextStyleTokens,\n  defaultRadiusTokens,\n  defaultSizeTokens,\n  defaultSpacingTokens,\n  getPresetWithMode,\n  type DesignTokens,\n} from '@number10/jsx-core'\nimport type { PhaserPartialTheme } from '../theme'\nimport { themeRegistry } from '../theme'\n\n/**\n * Resolve design tokens from theme state.\n * @param localTheme - Current VDOM theme (or undefined)\n * @returns DesignTokens or undefined\n */\nexport function resolveThemeTokens(localTheme: PhaserPartialTheme | undefined): DesignTokens {\n  if (localTheme?.__colorPreset) {\n    const preset = getPresetWithMode(\n      localTheme.__colorPreset.name as Parameters<typeof getPresetWithMode>[0],\n      localTheme.__colorPreset.mode ?? 'light'\n    )\n    return createDesignTokens(preset)\n  }\n\n  const colors = themeRegistry.getColorTokens()\n  if (colors) {\n    return {\n      colors,\n      textStyles: createTextStyleTokens(colors.text.DEFAULT.toString()),\n      spacing: defaultSpacingTokens,\n      sizes: defaultSizeTokens,\n      radius: defaultRadiusTokens,\n    }\n  }\n\n  // Fallback: use oceanBlue light preset as default (same as Pixi)\n  const fallback = getPresetWithMode('oceanBlue', 'light')\n  return createDesignTokens(fallback)\n}\n"],"names":[],"mappings":";;AAwBO,SAAS,mBAAmB,YAA0D;AAC3F,MAAI,YAAY,eAAe;AAC7B,UAAM,SAAS;AAAA,MACb,WAAW,cAAc;AAAA,MACzB,WAAW,cAAc,QAAQ;AAAA,IAAA;AAEnC,WAAO,mBAAmB,MAAM;AAAA,EAClC;AAEA,QAAM,SAAS,cAAc,eAAA;AAC7B,MAAI,QAAQ;AACV,WAAO;AAAA,MACL;AAAA,MACA,YAAY,sBAAsB,OAAO,KAAK,QAAQ,UAAU;AAAA,MAChE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAGA,QAAM,WAAW,kBAAkB,aAAa,OAAO;AACvD,SAAO,mBAAmB,QAAQ;AACpC;"}

package/dist/design-tokens/use-theme-tokens.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../hooks.cjs");
+const theme = require("../theme.cjs");
+const resolveThemeTokens = require("./resolve-theme-tokens.cjs");
+const jsxCore = require("@number10/jsx-core");
+function useThemeTokens() {
+  const localTheme = jsxCore.useTheme();
+  const getInitialTokens = () => resolveThemeTokens.resolveThemeTokens(localTheme);
+  const [tokens, setTokens] = jsxCore.useState(getInitialTokens());
+  const [, forceUpdate] = jsxCore.useState(0);
+  jsxCore.useEffect(() => {
+    const unsubscribe = theme.themeRegistry.subscribe(() => {
+      const currentTheme = localTheme?.__colorPreset ? {
+        ...localTheme,
+        __colorPreset: { ...localTheme.__colorPreset, mode: theme.themeRegistry.getColorMode() }
+      } : localTheme;
+      setTokens(resolveThemeTokens.resolveThemeTokens(currentTheme));
+      forceUpdate((n) => n + 1);
+    });
+    return unsubscribe;
+  }, [localTheme]);
+  return tokens;
+}
+exports.useThemeTokens = useThemeTokens;
+//# sourceMappingURL=use-theme-tokens.cjs.map

package/dist/design-tokens/use-theme-tokens.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme-tokens.cjs","sources":["../../src/design-tokens/use-theme-tokens.ts"],"sourcesContent":["/**\n * Hook to access complete design token system\n * Combines colors with text styles, spacing, sizes, and radius tokens\n */\nimport type { DesignTokens } from '@number10/jsx-core'\nimport { useEffect, useState, useTheme } from '../hooks'\nimport { themeRegistry } from '../theme'\nimport { resolveThemeTokens } from './resolve-theme-tokens'\n\n/**\n * Hook to access complete design token system from theme context\n * Provides colors, text styles, spacing, sizes, and radius tokens\n * Automatically updates when color mode or preset changes\n * @returns Current DesignTokens or undefined\n * @example\n * ```typescript\n * function MyComponent() {\n *   const tokens = useThemeTokens()\n *\n *   if (!tokens) return null\n *\n *   return (\n *     <View\n *       backgroundColor={tokens.colors.surface.DEFAULT}\n *       padding={tokens.spacing.lg}\n *       cornerRadius={tokens.radius.md}\n *     >\n *       <Text text=\"Title\" style={tokens.textStyles.title} />\n *       <Text text=\"Body text\" style={tokens.textStyles.DEFAULT} />\n *     </View>\n *   )\n * }\n * ```\n */\nexport function useThemeTokens(): DesignTokens | undefined {\n  const localTheme = useTheme()\n\n  const getInitialTokens = (): DesignTokens | undefined => resolveThemeTokens(localTheme)\n\n  const [tokens, setTokens] = useState<DesignTokens | undefined>(getInitialTokens())\n  const [, forceUpdate] = useState(0)\n\n  useEffect(() => {\n    // Subscribe to theme changes (mode/preset switches)\n    const unsubscribe = themeRegistry.subscribe(() => {\n      const currentTheme = localTheme?.__colorPreset\n        ? {\n            ...localTheme,\n            __colorPreset: { ...localTheme.__colorPreset, mode: themeRegistry.getColorMode() },\n          }\n        : localTheme\n      setTokens(resolveThemeTokens(currentTheme))\n      forceUpdate((n) => n + 1)\n    })\n\n    return unsubscribe\n  }, [localTheme])\n\n  return tokens\n}\n"],"names":["useTheme","resolveThemeTokens","useState","useEffect","themeRegistry"],"mappings":";;;;;;AAkCO,SAAS,iBAA2C;AACzD,QAAM,aAAaA,QAAAA,SAAA;AAEnB,QAAM,mBAAmB,MAAgCC,mBAAAA,mBAAmB,UAAU;AAEtF,QAAM,CAAC,QAAQ,SAAS,IAAIC,QAAAA,SAAmC,kBAAkB;AACjF,QAAM,GAAG,WAAW,IAAIA,QAAAA,SAAS,CAAC;AAElCC,UAAAA,UAAU,MAAM;AAEd,UAAM,cAAcC,oBAAc,UAAU,MAAM;AAChD,YAAM,eAAe,YAAY,gBAC7B;AAAA,QACE,GAAG;AAAA,QACH,eAAe,EAAE,GAAG,WAAW,eAAe,MAAMA,MAAAA,cAAc,eAAa;AAAA,MAAE,IAEnF;AACJ,gBAAUH,mBAAAA,mBAAmB,YAAY,CAAC;AAC1C,kBAAY,CAAC,MAAM,IAAI,CAAC;AAAA,IAC1B,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AACT;;"}

package/dist/design-tokens/use-theme-tokens.d.ts

@@ -0,0 +1,28 @@
+import { DesignTokens } from '@number10/jsx-core';
+/**
+ * Hook to access complete design token system from theme context
+ * Provides colors, text styles, spacing, sizes, and radius tokens
+ * Automatically updates when color mode or preset changes
+ * @returns Current DesignTokens or undefined
+ * @example
+ * ```typescript
+ * function MyComponent() {
+ *   const tokens = useThemeTokens()
+ *
+ *   if (!tokens) return null
+ *
+ *   return (
+ *     <View
+ *       backgroundColor={tokens.colors.surface.DEFAULT}
+ *       padding={tokens.spacing.lg}
+ *       cornerRadius={tokens.radius.md}
+ *     >
+ *       <Text text="Title" style={tokens.textStyles.title} />
+ *       <Text text="Body text" style={tokens.textStyles.DEFAULT} />
+ *     </View>
+ *   )
+ * }
+ * ```
+ */
+export declare function useThemeTokens(): DesignTokens | undefined;
+//# sourceMappingURL=use-theme-tokens.d.ts.map

package/dist/design-tokens/use-theme-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme-tokens.d.ts","sourceRoot":"","sources":["../../src/design-tokens/use-theme-tokens.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAKtD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,cAAc,IAAI,YAAY,GAAG,SAAS,CAyBzD"}

package/dist/design-tokens/use-theme-tokens.js

@@ -0,0 +1,26 @@
+import "../hooks.js";
+import { themeRegistry } from "../theme.js";
+import { resolveThemeTokens } from "./resolve-theme-tokens.js";
+import { useTheme, useState, useEffect } from "@number10/jsx-core";
+function useThemeTokens() {
+  const localTheme = useTheme();
+  const getInitialTokens = () => resolveThemeTokens(localTheme);
+  const [tokens, setTokens] = useState(getInitialTokens());
+  const [, forceUpdate] = useState(0);
+  useEffect(() => {
+    const unsubscribe = themeRegistry.subscribe(() => {
+      const currentTheme = localTheme?.__colorPreset ? {
+        ...localTheme,
+        __colorPreset: { ...localTheme.__colorPreset, mode: themeRegistry.getColorMode() }
+      } : localTheme;
+      setTokens(resolveThemeTokens(currentTheme));
+      forceUpdate((n) => n + 1);
+    });
+    return unsubscribe;
+  }, [localTheme]);
+  return tokens;
+}
+export {
+  useThemeTokens
+};
+//# sourceMappingURL=use-theme-tokens.js.map

package/dist/design-tokens/use-theme-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme-tokens.js","sources":["../../src/design-tokens/use-theme-tokens.ts"],"sourcesContent":["/**\n * Hook to access complete design token system\n * Combines colors with text styles, spacing, sizes, and radius tokens\n */\nimport type { DesignTokens } from '@number10/jsx-core'\nimport { useEffect, useState, useTheme } from '../hooks'\nimport { themeRegistry } from '../theme'\nimport { resolveThemeTokens } from './resolve-theme-tokens'\n\n/**\n * Hook to access complete design token system from theme context\n * Provides colors, text styles, spacing, sizes, and radius tokens\n * Automatically updates when color mode or preset changes\n * @returns Current DesignTokens or undefined\n * @example\n * ```typescript\n * function MyComponent() {\n *   const tokens = useThemeTokens()\n *\n *   if (!tokens) return null\n *\n *   return (\n *     <View\n *       backgroundColor={tokens.colors.surface.DEFAULT}\n *       padding={tokens.spacing.lg}\n *       cornerRadius={tokens.radius.md}\n *     >\n *       <Text text=\"Title\" style={tokens.textStyles.title} />\n *       <Text text=\"Body text\" style={tokens.textStyles.DEFAULT} />\n *     </View>\n *   )\n * }\n * ```\n */\nexport function useThemeTokens(): DesignTokens | undefined {\n  const localTheme = useTheme()\n\n  const getInitialTokens = (): DesignTokens | undefined => resolveThemeTokens(localTheme)\n\n  const [tokens, setTokens] = useState<DesignTokens | undefined>(getInitialTokens())\n  const [, forceUpdate] = useState(0)\n\n  useEffect(() => {\n    // Subscribe to theme changes (mode/preset switches)\n    const unsubscribe = themeRegistry.subscribe(() => {\n      const currentTheme = localTheme?.__colorPreset\n        ? {\n            ...localTheme,\n            __colorPreset: { ...localTheme.__colorPreset, mode: themeRegistry.getColorMode() },\n          }\n        : localTheme\n      setTokens(resolveThemeTokens(currentTheme))\n      forceUpdate((n) => n + 1)\n    })\n\n    return unsubscribe\n  }, [localTheme])\n\n  return tokens\n}\n"],"names":[],"mappings":";;;;AAkCO,SAAS,iBAA2C;AACzD,QAAM,aAAa,SAAA;AAEnB,QAAM,mBAAmB,MAAgC,mBAAmB,UAAU;AAEtF,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAmC,kBAAkB;AACjF,QAAM,GAAG,WAAW,IAAI,SAAS,CAAC;AAElC,YAAU,MAAM;AAEd,UAAM,cAAc,cAAc,UAAU,MAAM;AAChD,YAAM,eAAe,YAAY,gBAC7B;AAAA,QACE,GAAG;AAAA,QACH,eAAe,EAAE,GAAG,WAAW,eAAe,MAAM,cAAc,eAAa;AAAA,MAAE,IAEnF;AACJ,gBAAU,mBAAmB,YAAY,CAAC;AAC1C,kBAAY,CAAC,MAAM,IAAI,CAAC;AAAA,IAC1B,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AACT;"}

package/dist/effects/index.d.ts

@@ -0,0 +1,2 @@
+export { useGameObjectEffect } from './use-effect';
+//# sourceMappingURL=index.d.ts.map

package/dist/effects/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/effects/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAGH,OAAO,yBAAyB,CAAA;AAGhC,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA"}

package/dist/effects/phaser-effects-bridge.cjs

@@ -0,0 +1,48 @@
+"use strict";
+const jsxCore = require("@number10/jsx-core");
+const Phaser = require("phaser");
+const useEffect = require("./use-effect.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const Phaser__namespace = /* @__PURE__ */ _interopNamespaceDefault(Phaser);
+function applyEffectOrigin(obj, effect) {
+  const origin = jsxCore.resolveEffectTransformOrigin(effect);
+  const originX = origin === "center" || origin === "top-center" ? 0.5 : 0;
+  const originY = origin === "center" ? 0.5 : 0;
+  const originable = obj;
+  if (typeof originable.setOrigin === "function") {
+    originable.setOrigin(originX, originY);
+  }
+}
+const phaserEffectRunner = (node, effect, config) => {
+  if (!(node instanceof Phaser__namespace.GameObjects.Container)) return;
+  if (!node.scene) return;
+  const def = jsxCore.EFFECT_DEFINITIONS[effect];
+  if (!def) return;
+  applyEffectOrigin(node, effect);
+  const origin = jsxCore.resolveEffectTransformOrigin(effect);
+  const target = useEffect.createPhaserTarget(node, origin);
+  jsxCore.runEffect(node, target, def, config ?? {});
+};
+jsxCore.registerEffectRunner(phaserEffectRunner);
+const phaserEffectStopRunner = (node) => {
+  if (!(node instanceof Phaser__namespace.GameObjects.Container)) return;
+  if (!node.scene) return;
+  jsxCore.stopAnimationEffect(node);
+};
+jsxCore.registerEffectStopRunner(phaserEffectStopRunner);
+//# sourceMappingURL=phaser-effects-bridge.cjs.map

package/dist/effects/phaser-effects-bridge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"phaser-effects-bridge.cjs","sources":["../../src/effects/phaser-effects-bridge.ts"],"sourcesContent":["/**\n * Phaser effects bridge — delegates to central Core effect engine.\n *\n * Registers a runner that wraps Phaser game objects as EffectTargets\n * and delegates to runEffect/Core stopEffect.\n */\nimport {\n  EFFECT_DEFINITIONS,\n  registerEffectRunner,\n  registerEffectStopRunner,\n  resolveEffectTransformOrigin,\n  runEffect,\n  stopAnimationEffect as stopEngineEffect,\n  type EffectConfig,\n  type EffectName,\n} from '@number10/jsx-core'\nimport * as Phaser from 'phaser'\n\n// Import createPhaserTarget from use-effect\nimport { createPhaserTarget } from './use-effect'\n\n/**\n * Apply effect transform origin to a Phaser game object.\n *\n * Phaser Sprites and Images support setOrigin(x, y) natively.\n * Plain Containers don't — they fall back to top-left behavior,\n * which matches the default for 'top-left' effects (fade, shake, etc.).\n */\nfunction applyEffectOrigin(obj: Phaser.GameObjects.Container, effect: EffectName): void {\n  const origin = resolveEffectTransformOrigin(effect)\n  const originX = origin === 'center' || origin === 'top-center' ? 0.5 : 0\n  const originY = origin === 'center' ? 0.5 : 0\n\n  // Duck-type check for setOrigin (Sprites, Images, Text have it; Container does not)\n  const originable = obj as unknown as { setOrigin?: (x: number, y: number) => void }\n  if (typeof originable.setOrigin === 'function') {\n    originable.setOrigin(originX, originY)\n  }\n}\n\n/**\n * Phaser effect runner: wraps the game object as an EffectTarget,\n * sets the transform origin, and delegates to Core's central engine.\n */\nconst phaserEffectRunner = (node: unknown, effect: EffectName, config?: EffectConfig): void => {\n  if (!(node instanceof Phaser.GameObjects.Container)) return\n  if (!node.scene) return\n\n  const def = EFFECT_DEFINITIONS[effect]\n  if (!def) return\n\n  // Set transform origin before running the effect\n  applyEffectOrigin(node, effect)\n\n  const origin = resolveEffectTransformOrigin(effect)\n  const target = createPhaserTarget(node, origin)\n  runEffect(node, target, def, config ?? {})\n}\n\nregisterEffectRunner(phaserEffectRunner)\n\nconst phaserEffectStopRunner = (node: unknown): void => {\n  if (!(node instanceof Phaser.GameObjects.Container)) return\n  if (!node.scene) return\n  stopEngineEffect(node)\n}\n\nregisterEffectStopRunner(phaserEffectStopRunner)\n"],"names":["resolveEffectTransformOrigin","Phaser","EFFECT_DEFINITIONS","createPhaserTarget","runEffect","registerEffectRunner","stopEngineEffect","registerEffectStopRunner"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA4BA,SAAS,kBAAkB,KAAmC,QAA0B;AACtF,QAAM,SAASA,QAAAA,6BAA6B,MAAM;AAClD,QAAM,UAAU,WAAW,YAAY,WAAW,eAAe,MAAM;AACvE,QAAM,UAAU,WAAW,WAAW,MAAM;AAG5C,QAAM,aAAa;AACnB,MAAI,OAAO,WAAW,cAAc,YAAY;AAC9C,eAAW,UAAU,SAAS,OAAO;AAAA,EACvC;AACF;AAMA,MAAM,qBAAqB,CAAC,MAAe,QAAoB,WAAgC;AAC7F,MAAI,EAAE,gBAAgBC,kBAAO,YAAY,WAAY;AACrD,MAAI,CAAC,KAAK,MAAO;AAEjB,QAAM,MAAMC,QAAAA,mBAAmB,MAAM;AACrC,MAAI,CAAC,IAAK;AAGV,oBAAkB,MAAM,MAAM;AAE9B,QAAM,SAASF,QAAAA,6BAA6B,MAAM;AAClD,QAAM,SAASG,UAAAA,mBAAmB,MAAM,MAAM;AAC9CC,UAAAA,UAAU,MAAM,QAAQ,KAAK,UAAU,CAAA,CAAE;AAC3C;AAEAC,QAAAA,qBAAqB,kBAAkB;AAEvC,MAAM,yBAAyB,CAAC,SAAwB;AACtD,MAAI,EAAE,gBAAgBJ,kBAAO,YAAY,WAAY;AACrD,MAAI,CAAC,KAAK,MAAO;AACjBK,UAAAA,oBAAiB,IAAI;AACvB;AAEAC,QAAAA,yBAAyB,sBAAsB;"}

package/dist/effects/phaser-effects-bridge.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=phaser-effects-bridge.d.ts.map

package/dist/effects/phaser-effects-bridge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phaser-effects-bridge.d.ts","sourceRoot":"","sources":["../../src/effects/phaser-effects-bridge.ts"],"names":[],"mappings":""}

package/dist/effects/phaser-effects-bridge.js

@@ -0,0 +1,30 @@
+import { registerEffectRunner, registerEffectStopRunner, EFFECT_DEFINITIONS, resolveEffectTransformOrigin, runEffect, stopAnimationEffect } from "@number10/jsx-core";
+import * as Phaser from "phaser";
+import { createPhaserTarget } from "./use-effect.js";
+function applyEffectOrigin(obj, effect) {
+  const origin = resolveEffectTransformOrigin(effect);
+  const originX = origin === "center" || origin === "top-center" ? 0.5 : 0;
+  const originY = origin === "center" ? 0.5 : 0;
+  const originable = obj;
+  if (typeof originable.setOrigin === "function") {
+    originable.setOrigin(originX, originY);
+  }
+}
+const phaserEffectRunner = (node, effect, config) => {
+  if (!(node instanceof Phaser.GameObjects.Container)) return;
+  if (!node.scene) return;
+  const def = EFFECT_DEFINITIONS[effect];
+  if (!def) return;
+  applyEffectOrigin(node, effect);
+  const origin = resolveEffectTransformOrigin(effect);
+  const target = createPhaserTarget(node, origin);
+  runEffect(node, target, def, config ?? {});
+};
+registerEffectRunner(phaserEffectRunner);
+const phaserEffectStopRunner = (node) => {
+  if (!(node instanceof Phaser.GameObjects.Container)) return;
+  if (!node.scene) return;
+  stopAnimationEffect(node);
+};
+registerEffectStopRunner(phaserEffectStopRunner);
+//# sourceMappingURL=phaser-effects-bridge.js.map

package/dist/effects/phaser-effects-bridge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"phaser-effects-bridge.js","sources":["../../src/effects/phaser-effects-bridge.ts"],"sourcesContent":["/**\n * Phaser effects bridge — delegates to central Core effect engine.\n *\n * Registers a runner that wraps Phaser game objects as EffectTargets\n * and delegates to runEffect/Core stopEffect.\n */\nimport {\n  EFFECT_DEFINITIONS,\n  registerEffectRunner,\n  registerEffectStopRunner,\n  resolveEffectTransformOrigin,\n  runEffect,\n  stopAnimationEffect as stopEngineEffect,\n  type EffectConfig,\n  type EffectName,\n} from '@number10/jsx-core'\nimport * as Phaser from 'phaser'\n\n// Import createPhaserTarget from use-effect\nimport { createPhaserTarget } from './use-effect'\n\n/**\n * Apply effect transform origin to a Phaser game object.\n *\n * Phaser Sprites and Images support setOrigin(x, y) natively.\n * Plain Containers don't — they fall back to top-left behavior,\n * which matches the default for 'top-left' effects (fade, shake, etc.).\n */\nfunction applyEffectOrigin(obj: Phaser.GameObjects.Container, effect: EffectName): void {\n  const origin = resolveEffectTransformOrigin(effect)\n  const originX = origin === 'center' || origin === 'top-center' ? 0.5 : 0\n  const originY = origin === 'center' ? 0.5 : 0\n\n  // Duck-type check for setOrigin (Sprites, Images, Text have it; Container does not)\n  const originable = obj as unknown as { setOrigin?: (x: number, y: number) => void }\n  if (typeof originable.setOrigin === 'function') {\n    originable.setOrigin(originX, originY)\n  }\n}\n\n/**\n * Phaser effect runner: wraps the game object as an EffectTarget,\n * sets the transform origin, and delegates to Core's central engine.\n */\nconst phaserEffectRunner = (node: unknown, effect: EffectName, config?: EffectConfig): void => {\n  if (!(node instanceof Phaser.GameObjects.Container)) return\n  if (!node.scene) return\n\n  const def = EFFECT_DEFINITIONS[effect]\n  if (!def) return\n\n  // Set transform origin before running the effect\n  applyEffectOrigin(node, effect)\n\n  const origin = resolveEffectTransformOrigin(effect)\n  const target = createPhaserTarget(node, origin)\n  runEffect(node, target, def, config ?? {})\n}\n\nregisterEffectRunner(phaserEffectRunner)\n\nconst phaserEffectStopRunner = (node: unknown): void => {\n  if (!(node instanceof Phaser.GameObjects.Container)) return\n  if (!node.scene) return\n  stopEngineEffect(node)\n}\n\nregisterEffectStopRunner(phaserEffectStopRunner)\n"],"names":["stopEngineEffect"],"mappings":";;;AA4BA,SAAS,kBAAkB,KAAmC,QAA0B;AACtF,QAAM,SAAS,6BAA6B,MAAM;AAClD,QAAM,UAAU,WAAW,YAAY,WAAW,eAAe,MAAM;AACvE,QAAM,UAAU,WAAW,WAAW,MAAM;AAG5C,QAAM,aAAa;AACnB,MAAI,OAAO,WAAW,cAAc,YAAY;AAC9C,eAAW,UAAU,SAAS,OAAO;AAAA,EACvC;AACF;AAMA,MAAM,qBAAqB,CAAC,MAAe,QAAoB,WAAgC;AAC7F,MAAI,EAAE,gBAAgB,OAAO,YAAY,WAAY;AACrD,MAAI,CAAC,KAAK,MAAO;AAEjB,QAAM,MAAM,mBAAmB,MAAM;AACrC,MAAI,CAAC,IAAK;AAGV,oBAAkB,MAAM,MAAM;AAE9B,QAAM,SAAS,6BAA6B,MAAM;AAClD,QAAM,SAAS,mBAAmB,MAAM,MAAM;AAC9C,YAAU,MAAM,QAAQ,KAAK,UAAU,CAAA,CAAE;AAC3C;AAEA,qBAAqB,kBAAkB;AAEvC,MAAM,yBAAyB,CAAC,SAAwB;AACtD,MAAI,EAAE,gBAAgB,OAAO,YAAY,WAAY;AACrD,MAAI,CAAC,KAAK,MAAO;AACjBA,sBAAiB,IAAI;AACvB;AAEA,yBAAyB,sBAAsB;"}