@rpgjs/client 5.0.0-alpha.9 → 5.0.0-beta.10

package/dist/components/character.ce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"character.ce.js","names":[],"sources":["../../src/components/character.ce"],"sourcesContent":["<Container x={smoothX} y={smoothY} zIndex={z} viewportFollow={shouldFollowCamera} controls onBeforeDestroy  visible>\n  @for (compConfig of normalizedComponentsBehind) {\n    <Container>\n      <compConfig.component object ...compConfig.props />\n    </Container>\n  } \n  <PlayerComponents object position=\"bottom\" graphicBounds />\n  <PlayerComponents object position=\"left\" graphicBounds />\n  <Particle emit={emitParticleTrigger} settings={particleSettings} zIndex={1000} name={particleName} />\n  <Container>\n    @for (graphicObj of graphicsSignals) {\n      <Container scale={graphicScale(graphicObj)}>\n        <Sprite \n          sheet={sheet(graphicObj)} \n          direction \n          tint \n          hitbox\n          shadowCaster={shadowCaster(graphicObj)}\n          flash={flashConfig}\n        />\n      </Container>\n    }\n  </Container>\n  <PlayerComponents object position=\"center\" graphicBounds />\n  <PlayerComponents object position=\"right\" graphicBounds />\n  <PlayerComponents object position=\"top\" graphicBounds />\n  @for (compConfig of normalizedComponentsInFront) {\n    <Container dependencies={compConfig.dependencies}>\n      <compConfig.component object ...compConfig.props />\n    </Container>\n  }\n  @for (attachedGui of attachedGuis) {\n    @if (shouldDisplayAttachedGui) {\n      <Container>\n        <attachedGui.component ...attachedGui.data() dependencies={attachedGui.dependencies} object={object} onFinish={(data) => {\n          onAttachedGuiFinish(attachedGui, data)\n        }} onInteraction={(name, data) => {\n          onAttachedGuiInteraction(attachedGui, name, data)\n        }} />\n      </Container>\n    }\n  }\n</Container>\n\n<script>\n  import { signal, effect, mount, computed, tick, animatedSignal, on } from \"canvasengine\";\n  import { Assets } from \"pixi.js\";\n\n  import { lastValueFrom, combineLatest, pairwise, filter, map, startWith } from \"rxjs\";\n  import { Particle } from \"@canvasengine/presets\";\n  import { GameEngineToken, ModulesToken } from \"@rpgjs/common\";\n  import { RpgClientEngine } from \"../RpgClientEngine\";\n  import { inject } from \"../core/inject\";  \n  import { Direction, Animation } from \"@rpgjs/common\";\n  import Hit from \"./effects/hit.ce\";\n  import PlayerComponents from \"./player-components.ce\";\n  import { RpgGui } from \"../Gui/Gui\";\n  import { getCanMoveValue } from \"../utils/readPropValue\";\n\n  const { object, id } = defineProps();\n\n  const client = inject(RpgClientEngine);\n  const hooks = inject(ModulesToken);\n  const guiService = inject(RpgGui);\n\n  const spritesheets = client.spritesheets;\n  const componentsBehind = client.spriteComponentsBehind;\n  const componentsInFront = client.spriteComponentsInFront;\n  const readProp = (value) => typeof value === 'function' ? value() : value;\n  const isCurrentPlayer = () => {\n    const playerId = client.playerIdSignal();\n    const currentPlayer = playerId ? client.sceneMap?.players?.()?.[playerId] : undefined;\n    return readProp(id) === playerId\n      || readProp(object?.id) === playerId\n      || object === currentPlayer\n      || object === client.sceneMap?.getCurrentPlayer?.();\n  };\n  const isMe = computed(isCurrentPlayer);\n  const shadowsEnabled = computed(() => {\n    const lighting = client.sceneMap?.lighting?.();\n    return Boolean(lighting?.shadows?.enabled || (lighting?.spots?.length ?? 0) > 0);\n  });\n\n  /**\n   * Normalize a single sprite component configuration\n   * \n   * Handles both direct component references and configuration objects with optional props and dependencies.\n   * Extracts the component reference and creates a computed function that returns the props.\n   * \n   * ## Design\n   * \n   * Supports two formats:\n   * 1. Direct component: `ShadowComponent`\n   * 2. Configuration object: `{ component: LightHalo, props: {...}, dependencies: (object) => [...] }`\n   * \n   * The normalization process:\n   * - Extracts the actual component from either format\n   * - Extracts dependencies function if provided\n   * - Creates a computed function that returns props (static object or dynamic function result)\n   * - Returns a normalized object with `component`, `props`, and `dependencies`\n   * \n   * @param comp - Component reference or configuration object\n   * @returns Normalized component configuration with component, props, and dependencies\n   * \n   * @example\n   * ```ts\n   * // Direct component\n   * normalizeComponent(ShadowComponent)\n   * // => { component: ShadowComponent, props: {}, dependencies: undefined }\n   * \n   * // With static props\n   * normalizeComponent({ component: LightHalo, props: { radius: 30 } })\n   * // => { component: LightHalo, props: { radius: 30 }, dependencies: undefined }\n   * \n   * // With dynamic props and dependencies\n   * normalizeComponent({ \n   *   component: HealthBar, \n   *   props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),\n   *   dependencies: (object) => [object.hp, object.param.maxHp]\n   * })\n   * // => { component: HealthBar, props: {...}, dependencies: (object) => [...] }\n   * ```\n   */\n  const normalizeComponent = (comp) => {\n    let componentRef;\n    let propsValue;\n    let dependenciesFn;\n    \n    // If it's a direct component reference\n    if (typeof comp === 'function' || (comp && typeof comp === 'object' && !comp.component)) {\n      componentRef = comp;\n      propsValue = undefined;\n      dependenciesFn = undefined;\n    }\n    // If it's a configuration object with component and props\n    else if (comp && typeof comp === 'object' && comp.component) {\n      componentRef = comp.component;\n      // Support both \"data\" (legacy) and \"props\" (new) for backward compatibility\n      propsValue = comp.props !== undefined ? comp.props : comp.data;\n      dependenciesFn = comp.dependencies;\n    }\n    // Fallback: treat as direct component\n    else {\n      componentRef = comp;\n      propsValue = undefined;\n      dependenciesFn = undefined;\n    }\n    \n    // Return props directly (object or function), not as computed\n    // The computed will be created in the template when needed\n    return {\n      component: componentRef,\n      props: typeof propsValue === 'function' ? propsValue(object) : propsValue || {},\n      dependencies: dependenciesFn ? dependenciesFn(object) : []\n    };\n  };\n\n  /**\n   * Normalize an array of sprite components\n   * \n   * Applies normalization to each component in the array using `normalizeComponent`.\n   * \n   * @param components - Array of component references or configuration objects\n   * @returns Array of normalized component configurations\n   */\n  const normalizeComponents = (components) => {\n    return components.map((comp) => normalizeComponent(comp));\n  };\n\n\n  /**\n   * Normalized components to render behind sprites\n   * Handles both direct component references and configuration objects with optional props and dependencies\n   * \n   * Supports multiple formats:\n   * 1. Direct component: `ShadowComponent`\n   * 2. Configuration object: `{ component: LightHalo, props: {...} }`\n   * 3. With dynamic props: `{ component: LightHalo, props: (object) => {...} }`\n   * 4. With dependencies: `{ component: HealthBar, dependencies: (object) => [object.hp, object.param.maxHp] }`\n   * \n   * Components with dependencies will only be displayed when all dependencies are resolved (!= undefined).\n   * The object is passed to the dependencies function to allow sprite-specific dependency resolution.\n   * \n   * @example\n   * ```ts\n   * // Direct component\n   * componentsBehind: [ShadowComponent]\n   * \n   * // With static props\n   * componentsBehind: [{ component: LightHalo, props: { radius: 30 } }]\n   * \n   * // With dynamic props and dependencies\n   * componentsBehind: [{ \n   *   component: HealthBar, \n   *   props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),\n   *   dependencies: (object) => [object.hp, object.param.maxHp]\n   * }]\n   * ```\n   */\n  const normalizedComponentsBehind = computed(() => {\n    return normalizeComponents(componentsBehind());\n  });\n\n  /**\n   * Normalized components to render in front of sprites\n   * Handles both direct component references and configuration objects with optional props and dependencies\n   * \n   * See `normalizedComponentsBehind` for format details.\n   * Components with dependencies will only be displayed when all dependencies are resolved.\n   */\n  const normalizedComponentsInFront = computed(() => {\n    return normalizeComponents(componentsInFront());\n  });\n  \n  /**\n   * Determine if the camera should follow this sprite\n   * \n   * The camera follows this sprite if:\n   * - It's explicitly set as the camera follow target, OR\n   * - It's the current player and no explicit target is set (default behavior)\n   */\n  const shouldFollowCamera = computed(() => {\n    const cameraTargetId = client.cameraFollowTargetId();\n    // If a target is explicitly set, only follow if this sprite is the target\n    if (cameraTargetId !== null) {\n      return id() === cameraTargetId;\n    }\n    // Otherwise, follow the current player (default behavior)\n    return isMe();\n  });\n\n  /**\n   * Get all attached GUI components that should be rendered on sprites\n   * These are GUIs with attachToSprite: true\n   */\n  const attachedGuis = computed(() => {\n    return guiService.getAttachedGuis();\n  });\n\n  /**\n   * Check if attached GUIs should be displayed for this sprite\n   * This is controlled by showAttachedGui/hideAttachedGui on the server\n   */\n  const shouldDisplayAttachedGui = computed(() => {\n    return guiService.shouldDisplayAttachedGui(id());\n  });\n\n  const { \n    x, \n    y, \n    tint, \n    direction, \n    animationName, \n    animationCurrentIndex,\n    emitParticleTrigger, \n    particleName, \n    graphics, \n    hitbox,\n    isConnected,\n    graphicsSignals,\n    flashTrigger\n  } = object;\n\n  /**\n   * Flash configuration signals for dynamic options\n   * These signals are updated when the flash trigger is activated with options\n   */\n  const flashType = signal<'alpha' | 'tint' | 'both'>('alpha');\n  const flashDuration = signal(300);\n  const flashCycles = signal(1);\n  const flashAlpha = signal(0.3);\n  const flashTint = signal(0xffffff);\n\n  /**\n   * Listen to flash trigger to update configuration dynamically\n   * When flash is triggered with options, update the signals\n   */\n  on(flashTrigger, (data) => {\n    if (data && typeof data === 'object') {\n      if (data.type !== undefined) flashType.set(data.type);\n      if (data.duration !== undefined) flashDuration.set(data.duration);\n      if (data.cycles !== undefined) flashCycles.set(data.cycles);\n      if (data.alpha !== undefined) flashAlpha.set(data.alpha);\n      if (data.tint !== undefined) flashTint.set(data.tint);\n    }\n  });\n\n  /**\n   * Flash configuration for the sprite\n   * \n   * This configuration is used by the flash directive to create visual feedback effects.\n   * The flash trigger is exposed through the object, allowing both server events and\n   * client-side code to trigger flash animations. Options can be passed dynamically\n   * through the trigger, which updates the reactive signals.\n   */\n  const flashConfig = computed(() => ({\n    trigger: flashTrigger,\n    type: flashType(),\n    duration: flashDuration(),\n    cycles: flashCycles(),\n    alpha: flashAlpha(),\n    tint: flashTint(),\n  }));\n\n  const particleSettings = client.particleSettings;\n\n  const canControls = () => isMe() && getCanMoveValue(object)\n  const keyboardControls = client.globalConfig.keyboardControls;\n\n  const visible = computed(() => {\n    if (object.isEvent()) {\n      return true\n    }\n    return isConnected()\n  });\n\n  const controls = {\n    down: {\n      repeat: true,\n      bind: keyboardControls.down,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Down })\n      },\n    },\n    up: {\n      repeat: true,\n      bind: keyboardControls.up,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Up })\n      },\n    },\n    left: {\n      repeat: true,\n      bind: keyboardControls.left,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Left })\n      },\n    },\n    right: {\n      repeat: true,\n      bind: keyboardControls.right,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Right })\n      },\n    },\n    action: {\n      bind: keyboardControls.action,\n      keyDown() {\n        if (canControls()) {\n          client.processAction({ action: 'action' })\n        }\n      },\n    },\n    escape: {\n      bind: keyboardControls.escape,\n      keyDown() {\n        if (canControls()) {\n          client.processAction({ action: 'escape' })\n        }\n      },\n    },\n    gamepad: {\n      enabled: true\n    }\n  };\n\n  const smoothX = animatedSignal(x(), {\n    duration: isMe() ? 0 : 0\n  });\n\n  const smoothY = animatedSignal(y(), {\n    duration: isMe() ? 0 : 0,\n  });\n\n  const z = computed(() => {\n    return object.y() + object.z()\n  });\n\n  const realAnimationName = signal(animationName());\n\n  const xSubscription = x.observable.subscribe((value) => {\n    smoothX.set(value);\n  });\n\n  const ySubscription = y.observable.subscribe((value) => {\n    smoothY.set(value);\n  });\n  \n  const sheet = (graphicObject) => {\n    return {\n      definition: graphicObject,\n      playing: realAnimationName(),\n      params: {\n        direction: direction()\n      },\n      onFinish() {\n        animationCurrentIndex.update(index => index + 1)\n      }\n    };\n  }\n\n  const graphicScale = (graphicObject) => {\n    const scale = graphicObject?.scale;\n    if (Array.isArray(scale)) return scale;\n    if (typeof scale === 'number') return [scale, scale];\n    if (scale && typeof scale === 'object') {\n      const x = typeof scale.x === 'number' ? scale.x : 1;\n      const y = typeof scale.y === 'number' ? scale.y : x;\n      return [x, y];\n    }\n    return undefined;\n  }\n\n  const shadowCaster = (graphicObject) => {\n    const box = hitbox();\n    const bounds = graphicBounds();\n    const scale = graphicScale(graphicObject);\n    const scaleY = Array.isArray(scale) && typeof scale[1] === 'number' ? Math.abs(scale[1]) : 1;\n    const height = Math.max(bounds?.height ?? box?.h ?? 32, box?.h ?? 32) * scaleY;\n\n    return {\n      enabled: shadowsEnabled,\n      height,\n      footAnchor: { x: 0.5, y: 1 },\n      footOffset: { x: 0, y: 2 },\n      alpha: 0.5,\n      blur: 3.5,\n      gradientPower: 2,\n      hardness: 0.42,\n      minLength: Math.max(6, (box?.h ?? 32) * 0.25),\n      maxLength: Math.max(90, height * 1.8),\n      contactAlpha: 0.3,\n      contactScale: 0.3,\n    };\n  }\n\n  const imageDimensions = signal({});\n  const loadingImageDimensions = new Set();\n\n  const toPositiveNumber = (value) => {\n    const number = typeof value === 'number' ? value : parseFloat(value);\n    return Number.isFinite(number) && number > 0 ? number : undefined;\n  };\n\n  const toFiniteNumber = (value, fallback = 0) => {\n    const number = typeof value === 'number' ? value : parseFloat(value);\n    return Number.isFinite(number) ? number : fallback;\n  };\n\n  const clampRatio = (value) => Math.min(1, Math.max(0, value));\n\n  const normalizePair = (value, fallback = [1, 1]) => {\n    if (Array.isArray(value)) {\n      const x = toFiniteNumber(value[0], fallback[0]);\n      const y = toFiniteNumber(value[1] ?? value[0], x);\n      return [x, y];\n    }\n    if (typeof value === 'number') {\n      return [value, value];\n    }\n    if (value && typeof value === 'object') {\n      const x = toFiniteNumber(value.x, fallback[0]);\n      const y = toFiniteNumber(value.y ?? value.x, x);\n      return [x, y];\n    }\n    return fallback;\n  };\n\n  const normalizeAnchor = (value) => {\n    if (!Array.isArray(value)) return undefined;\n    const [x, y] = normalizePair(value, [0, 0]);\n    return [clampRatio(x), clampRatio(y)];\n  };\n\n  const resolveImageSource = (image) => {\n    if (typeof image === 'string') return image;\n    if (typeof image?.default === 'string') return image.default;\n    return undefined;\n  };\n\n  const parentTextureOptions = (graphicObject) => {\n    const props = [\n      'width',\n      'height',\n      'framesHeight',\n      'framesWidth',\n      'rectWidth',\n      'rectHeight',\n      'offset',\n      'image',\n      'sound',\n      'spriteRealSize',\n      'scale',\n      'anchor',\n      'pivot',\n      'x',\n      'y',\n      'opacity'\n    ];\n\n    return props.reduce((options, prop) => {\n      if (graphicObject?.[prop] !== undefined) {\n        options[prop] = graphicObject[prop];\n      }\n      return options;\n    }, {});\n  };\n\n  const resolveTextureOptions = (graphicObject) => {\n    const textures = graphicObject?.textures ?? {};\n    const texture =\n      textures[realAnimationName()] ??\n      textures[Animation.Stand] ??\n      Object.values(textures)[0] ??\n      {};\n\n    return {\n      ...parentTextureOptions(graphicObject),\n      ...texture\n    };\n  };\n\n  const resolveFirstAnimationFrame = (textureOptions) => {\n    const animations = textureOptions?.animations;\n    if (!animations) return {};\n\n    try {\n      const frames = typeof animations === 'function'\n        ? animations({ direction: direction() })\n        : animations;\n      if (!Array.isArray(frames)) return {};\n      const firstGroup = frames[0];\n      return Array.isArray(firstGroup) ? firstGroup[0] ?? {} : firstGroup ?? {};\n    }\n    catch {\n      return {};\n    }\n  };\n\n  const optionValue = (prop, frame, textureOptions, graphicObject) => {\n    return frame?.[prop] ?? textureOptions?.[prop] ?? graphicObject?.[prop];\n  };\n\n  const resolveFrameSize = (textureOptions, dimensions) => {\n    const framesWidth = toPositiveNumber(textureOptions?.framesWidth) ?? 1;\n    const framesHeight = toPositiveNumber(textureOptions?.framesHeight) ?? 1;\n    const imageSource = resolveImageSource(textureOptions?.image);\n    const loadedSize = imageSource ? dimensions[imageSource] : undefined;\n    const fullWidth = toPositiveNumber(textureOptions?.width) ?? loadedSize?.width;\n    const fullHeight = toPositiveNumber(textureOptions?.height) ?? loadedSize?.height;\n    const width = toPositiveNumber(textureOptions?.rectWidth) ??\n      toPositiveNumber(textureOptions?.spriteWidth) ??\n      (fullWidth ? fullWidth / framesWidth : undefined);\n    const height = toPositiveNumber(textureOptions?.rectHeight) ??\n      toPositiveNumber(textureOptions?.spriteHeight) ??\n      (fullHeight ? fullHeight / framesHeight : undefined);\n\n    return {\n      width,\n      height\n    };\n  };\n\n  const resolveHitboxAnchor = (spriteWidth, spriteHeight, realSize, box) => {\n    if (!spriteWidth || !spriteHeight || !box) {\n      return [0, 0];\n    }\n\n    const heightOfSprite = typeof realSize === 'number' ? realSize : realSize?.height;\n    const resolvedHeight = toPositiveNumber(heightOfSprite) ?? spriteHeight;\n    const gap = Math.max(0, (spriteHeight - resolvedHeight) / 2);\n    const hitboxTopLeftX = clampRatio((spriteWidth - box.w) / 2 / spriteWidth);\n    const hitboxTopLeftY = clampRatio((spriteHeight - box.h - gap) / spriteHeight);\n    const hitboxCenterX = clampRatio(hitboxTopLeftX + box.w / 2 / spriteWidth);\n    const hitboxCenterY = clampRatio(hitboxTopLeftY + box.h / 2 / spriteHeight);\n    const footY = clampRatio((spriteHeight - gap) / spriteHeight);\n\n    switch (box.anchorMode ?? 'top-left') {\n      case 'center':\n        return [hitboxCenterX, hitboxCenterY];\n      case 'foot':\n        return [hitboxCenterX, footY];\n      case 'top-left':\n      default:\n        return [hitboxTopLeftX, hitboxTopLeftY];\n    }\n  };\n\n  const loadImageDimensions = (image) => {\n    const source = resolveImageSource(image);\n    if (!source || imageDimensions()[source] || loadingImageDimensions.has(source)) {\n      return;\n    }\n\n    loadingImageDimensions.add(source);\n    Assets.load(source)\n      .then((texture) => {\n        const width = toPositiveNumber(texture?.width);\n        const height = toPositiveNumber(texture?.height);\n        if (!width || !height) return;\n\n        imageDimensions.update((dimensions) => ({\n          ...dimensions,\n          [source]: { width, height }\n        }));\n      })\n      .catch(() => {})\n      .finally(() => {\n        loadingImageDimensions.delete(source);\n      });\n  };\n\n  effect(() => {\n    const sources = new Set();\n\n    graphicsSignals().forEach((graphicObject) => {\n      const baseImage = resolveImageSource(graphicObject?.image);\n      if (baseImage) sources.add(baseImage);\n\n      Object.values(graphicObject?.textures ?? {}).forEach((textureOptions) => {\n        const image = resolveImageSource(textureOptions?.image ?? graphicObject?.image);\n        if (image) sources.add(image);\n      });\n    });\n\n    sources.forEach((source) => loadImageDimensions(source));\n  });\n\n  const hitboxBounds = computed(() => {\n    const box = hitbox();\n    const width = box?.w ?? 0;\n    const height = box?.h ?? 0;\n\n    return {\n      left: 0,\n      top: 0,\n      right: width,\n      bottom: height,\n      width,\n      height,\n      centerX: width / 2,\n      centerY: height / 2\n    };\n  });\n\n  const graphicBounds = computed(() => {\n    const box = hitbox();\n    const fallback = hitboxBounds();\n    const dimensions = imageDimensions();\n    const graphics = graphicsSignals();\n    let bounds = null;\n\n    graphics.forEach((graphicObject) => {\n      const textureOptions = resolveTextureOptions(graphicObject);\n      const frame = resolveFirstAnimationFrame(textureOptions);\n      const size = resolveFrameSize(textureOptions, dimensions);\n      const spriteWidth = size.width ?? box?.w;\n      const spriteHeight = size.height ?? box?.h;\n\n      if (!spriteWidth || !spriteHeight) {\n        return;\n      }\n\n      const explicitAnchor = normalizeAnchor(optionValue('anchor', frame, textureOptions, graphicObject));\n      const anchor = explicitAnchor ?? resolveHitboxAnchor(\n        spriteWidth,\n        spriteHeight,\n        optionValue('spriteRealSize', frame, textureOptions, graphicObject),\n        box\n      );\n      const scale = normalizePair(optionValue('scale', frame, textureOptions, graphicObject) ?? graphicScale(graphicObject));\n      const x = toFiniteNumber(optionValue('x', frame, textureOptions, graphicObject), 0);\n      const y = toFiniteNumber(optionValue('y', frame, textureOptions, graphicObject), 0);\n      const leftEdge = -anchor[0] * spriteWidth * scale[0];\n      const rightEdge = (1 - anchor[0]) * spriteWidth * scale[0];\n      const topEdge = -anchor[1] * spriteHeight * scale[1];\n      const bottomEdge = (1 - anchor[1]) * spriteHeight * scale[1];\n      const graphic = {\n        left: x + Math.min(leftEdge, rightEdge),\n        top: y + Math.min(topEdge, bottomEdge),\n        right: x + Math.max(leftEdge, rightEdge),\n        bottom: y + Math.max(topEdge, bottomEdge)\n      };\n\n      bounds = bounds\n        ? {\n            left: Math.min(bounds.left, graphic.left),\n            top: Math.min(bounds.top, graphic.top),\n            right: Math.max(bounds.right, graphic.right),\n            bottom: Math.max(bounds.bottom, graphic.bottom)\n          }\n        : graphic;\n    });\n\n    if (!bounds) {\n      return fallback;\n    }\n\n    const width = bounds.right - bounds.left;\n    const height = bounds.bottom - bounds.top;\n\n    return {\n      ...bounds,\n      width,\n      height,\n      centerX: bounds.left + width / 2,\n      centerY: bounds.top + height / 2\n    };\n  });\n\n  // Combine animation change detection with movement state from smoothX/smoothY\n  const movementAnimations = ['walk', 'stand'];\n  const epsilon = 0; // movement threshold to consider the easing still running\n\n  const stateX$ = smoothX.animatedState.observable;\n  const stateY$ = smoothY.animatedState.observable;\n  const animationName$ = animationName.observable;\n\n  const moving$ = combineLatest([stateX$, stateY$]).pipe(\n    map(([sx, sy]) => {\n      const xFinished = Math.abs(sx.value.current - sx.value.end) <= epsilon;\n      const yFinished = Math.abs(sy.value.current - sy.value.end) <= epsilon;\n      return !xFinished || !yFinished; // moving if X or Y is not finished\n    }),\n    startWith(false)\n  );\n\n  const animationChange$ = animationName$.pipe(\n    startWith(animationName()),\n    pairwise(),\n    filter(([prev, curr]) => prev !== curr)\n  );\n\n  let beforeRemovePromise = null;\n  let beforeRemoveTransitionValue = null;\n  const resolveRemoveContext = () => {\n    if (!object._removeTransition) return null;\n    const value = object._removeTransition();\n    if (!value || typeof value !== 'string') return null;\n    try {\n      const context = JSON.parse(value);\n      if (!context || typeof context !== 'object' || !context.active) return null;\n      context.__transitionValue = value;\n      return context;\n    }\n    catch {\n      return null;\n    }\n  };\n\n  const withTimeout = (promise, timeoutMs = 0) => {\n    if (!timeoutMs || timeoutMs <= 0) return promise;\n    return Promise.race([\n      promise,\n      new Promise((resolve) => setTimeout(resolve, timeoutMs)),\n    ]);\n  };\n\n  const runBeforeRemove = () => {\n    const context = resolveRemoveContext();\n    if (!context) return Promise.resolve();\n    if (beforeRemovePromise && beforeRemoveTransitionValue === context.__transitionValue) {\n      return beforeRemovePromise;\n    }\n    beforeRemoveTransitionValue = context.__transitionValue;\n    beforeRemovePromise = withTimeout(\n      lastValueFrom(hooks.callHooks(\"client-sprite-onBeforeRemove\", object, context)),\n      context.timeoutMs\n    );\n    return beforeRemovePromise;\n  };\n\n  const removeTransitionSubscription = object._removeTransition?.observable?.subscribe(() => {\n    if (resolveRemoveContext()) {\n      runBeforeRemove();\n    }\n  });\n\n  const animationMovementSubscription = combineLatest([animationChange$, moving$]).subscribe(([[prev, curr], isMoving]) => {\n    if (curr == 'stand' && !isMoving) {\n      realAnimationName.set(curr);\n    }\n    else if (curr == 'walk' && isMoving) {\n      realAnimationName.set(curr);\n    }\n    else if (!movementAnimations.includes(curr)) {\n      realAnimationName.set(curr);\n    }\n    if (!isMoving && object.animationIsPlaying && object.animationIsPlaying()) {\n      if (movementAnimations.includes(curr)) {\n        if (typeof object.resetAnimationState === 'function') {\n          object.resetAnimationState();\n        }\n      }\n    }\n  });\n\n  /**\n   * Cleanup subscriptions and call hooks before sprite destruction.\n   *\n   * # Design\n   * - Prevent memory leaks by unsubscribing from all local subscriptions created in this component.\n   * - Execute destruction hooks to notify modules and scene map of sprite removal.\n   *\n   * @example\n   * await onBeforeDestroy();\n   */\n  const waitForTemporaryAnimationEnd = (maxDuration = 1200) => {\n    if (!object.animationIsPlaying || !object.animationIsPlaying()) {\n      return Promise.resolve();\n    }\n\n    return new Promise((resolve) => {\n      let finished = false;\n      let timeout;\n      let subscription;\n      const finish = () => {\n        if (finished) return;\n        finished = true;\n        clearTimeout(timeout);\n        subscription?.unsubscribe();\n        resolve();\n      };\n      timeout = setTimeout(finish, maxDuration);\n      subscription = object.animationIsPlaying.observable.subscribe((isPlaying) => {\n        if (!isPlaying) finish();\n      });\n      if (finished) subscription.unsubscribe();\n    });\n  };\n\n  const onBeforeDestroy = async () => {\n    await runBeforeRemove();\n    await waitForTemporaryAnimationEnd();\n    removeTransitionSubscription?.unsubscribe();\n    animationMovementSubscription.unsubscribe();\n    xSubscription.unsubscribe();\n    ySubscription.unsubscribe();\n    await lastValueFrom(hooks.callHooks(\"client-sprite-onDestroy\", object)) \n    await lastValueFrom(hooks.callHooks(\"client-sceneMap-onRemoveSprite\", client.sceneMap, object))\n  }\n\n  mount((element) => {\n    hooks.callHooks(\"client-sprite-onAdd\", object).subscribe()\n    hooks.callHooks(\"client-sceneMap-onAddSprite\", client.sceneMap, object).subscribe()\n    effect(() => {\n      if (isCurrentPlayer()) {\n        client.setKeyboardControls(element.directives.controls)\n      }\n    })\n  })\n\n  /**\n   * Handle attached GUI finish event\n   * \n   * @param gui - The GUI instance\n   * @param data - Data passed from the GUI component\n   */\n  const onAttachedGuiFinish = (gui, data) => {\n    guiService.guiClose(gui.name, data);\n  };\n\n  /**\n   * Handle attached GUI interaction event\n   * \n   * @param gui - The GUI instance\n   * @param name - Interaction name\n   * @param data - Interaction data\n   */\n  const onAttachedGuiInteraction = (gui, name, data) => {\n    guiService.guiInteraction(gui.name, name, data);\n  };\n\n  tick(() => {\n    hooks.callHooks(\"client-sprite-onUpdate\").subscribe()\n  })\n</script>\n"],"mappings":"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"}

package/dist/components/dynamics/bar.ce.js

@@ -0,0 +1,96 @@
+import { resolveDynamicValue } from "./parse-value.js";
+import { Container, Graphics, Text, computed, cond, h, useDefineProps, useProps } from "canvasengine";
+//#region src/components/dynamics/bar.ce
+function component($$props) {
+	useProps($$props);
+	const { object, current, max, style, text } = useDefineProps($$props)();
+	const read = (prop, fallback) => prop ? prop() : fallback;
+	const toNumber = (value, fallback = 0) => {
+		const resolved = resolveDynamicValue(value, object);
+		const num = typeof resolved === "number" ? resolved : parseFloat(resolved);
+		return Number.isFinite(num) ? num : fallback;
+	};
+	const toColor = (value, fallback) => {
+		const resolved = resolveDynamicValue(value, object);
+		if (typeof resolved === "number") return resolved;
+		if (typeof resolved === "string" && resolved.startsWith("#")) return parseInt(resolved.slice(1), 16);
+		return resolved ?? fallback;
+	};
+	const config = computed(() => read(style, {}) ?? {});
+	const width = computed(() => toNumber(config().width, 50));
+	const height = computed(() => toNumber(config().height, 8));
+	const borderRadius = computed(() => toNumber(config().borderRadius, 3));
+	const borderWidth = computed(() => toNumber(config().borderWidth, 1));
+	const backgroundColor = computed(() => toColor(config().bgColor, 1450302));
+	const fillColor = computed(() => toColor(config().fillColor, 4906624));
+	const borderColor = computed(() => toColor(config().borderColor, 4871528));
+	const opacity = computed(() => Math.max(0, Math.min(1, toNumber(config().opacity, 1))));
+	const currentValue = computed(() => toNumber(read(current, 0), 0));
+	const maxValue = computed(() => Math.max(0, toNumber(read(max, 0), 0)));
+	const percent = computed(() => {
+		const max = maxValue();
+		if (max <= 0) return 0;
+		return Math.max(0, Math.min(1, currentValue() / max));
+	});
+	const fillWidth = computed(() => Math.max(0, width() * percent()));
+	const labelTemplate = computed(() => read(text, null));
+	const labelText = computed(() => {
+		const template = labelTemplate();
+		if (template == null || template === "") return "";
+		const value = String(template).replace(/\{\$current\}/g, String(currentValue())).replace(/\{\$max\}/g, String(maxValue())).replace(/\{\$percent\}/g, String(Math.round(percent() * 100)));
+		return String(resolveDynamicValue(value, object) ?? "");
+	});
+	const labelSize = computed(() => toNumber(config().fontSize, 10));
+	const hasLabel = computed(() => labelText().length > 0);
+	const labelOffset = computed(() => hasLabel() ? labelSize() + 2 : 0);
+	const containerHeight = computed(() => labelOffset() + height());
+	const labelColor = computed(() => toColor(config().textColor, 16777215));
+	const labelPosition = computed(() => ({
+		x: 0,
+		y: 0
+	}));
+	const drawBar = (g) => {
+		g.roundRect(0, labelOffset(), width(), height(), borderRadius());
+		g.fill({
+			color: backgroundColor(),
+			alpha: opacity()
+		});
+		const currentWidth = fillWidth();
+		if (currentWidth > 0) {
+			g.roundRect(0, labelOffset(), currentWidth, height(), borderRadius());
+			g.fill({
+				color: fillColor(),
+				alpha: opacity()
+			});
+		}
+		const strokeWidth = borderWidth();
+		if (strokeWidth <= 0) return;
+		g.roundRect(0, labelOffset(), width(), height(), borderRadius());
+		g.stroke({
+			color: borderColor(),
+			width: strokeWidth,
+			alpha: opacity()
+		});
+	};
+	return h(Container, {
+		width,
+		height: containerHeight,
+		minWidth: width,
+		minHeight: containerHeight
+	}, [h(Graphics, {
+		width,
+		height: containerHeight,
+		draw: drawBar
+	}), cond(hasLabel, () => h(Text, {
+		text: labelText,
+		x: labelPosition.x,
+		y: labelPosition.y,
+		size: labelSize,
+		color: labelColor
+	}))]);
+}
+var __ce_component = component;
+//#endregion
+export { __ce_component as default };
+
+//# sourceMappingURL=bar.ce.js.map

package/dist/components/dynamics/bar.ce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar.ce.js","names":[],"sources":["../../../src/components/dynamics/bar.ce"],"sourcesContent":["<Container width={width} height={containerHeight} minWidth={width} minHeight={containerHeight}>\n  <Graphics width={width} height={containerHeight} draw={drawBar} />\n  @if (hasLabel) {\n    <Text text={labelText} x={labelPosition.x} y={labelPosition.y} size={labelSize} color={labelColor} />\n  }\n</Container>\n\n<script>\nimport { computed } from \"canvasengine\";\nimport { resolveDynamicValue } from \"./parse-value\";\n\nconst { object, current, max, style, text } = defineProps();\n\nconst read = (prop, fallback) => prop ? prop() : fallback;\n\nconst toNumber = (value, fallback = 0) => {\n  const resolved = resolveDynamicValue(value, object);\n  const num = typeof resolved === 'number' ? resolved : parseFloat(resolved);\n  return Number.isFinite(num) ? num : fallback;\n};\n\nconst toColor = (value, fallback) => {\n  const resolved = resolveDynamicValue(value, object);\n  if (typeof resolved === 'number') return resolved;\n  if (typeof resolved === 'string' && resolved.startsWith('#')) {\n    return parseInt(resolved.slice(1), 16);\n  }\n  return resolved ?? fallback;\n};\n\nconst config = computed(() => read(style, {}) ?? {});\nconst width = computed(() => toNumber(config().width, 50));\nconst height = computed(() => toNumber(config().height, 8));\nconst borderRadius = computed(() => toNumber(config().borderRadius, 3));\nconst borderWidth = computed(() => toNumber(config().borderWidth, 1));\nconst backgroundColor = computed(() => toColor(config().bgColor, 0x16213e));\nconst fillColor = computed(() => toColor(config().fillColor, 0x4ade80));\nconst borderColor = computed(() => toColor(config().borderColor, 0x4a5568));\nconst opacity = computed(() => Math.max(0, Math.min(1, toNumber(config().opacity, 1))));\n\nconst currentValue = computed(() => toNumber(read(current, 0), 0));\nconst maxValue = computed(() => Math.max(0, toNumber(read(max, 0), 0)));\nconst percent = computed(() => {\n  const max = maxValue();\n  if (max <= 0) return 0;\n  return Math.max(0, Math.min(1, currentValue() / max));\n});\n\nconst fillWidth = computed(() => Math.max(0, width() * percent()));\nconst labelTemplate = computed(() => read(text, null));\nconst labelText = computed(() => {\n  const template = labelTemplate();\n  if (template == null || template === '') return '';\n\n  const value = String(template)\n    .replace(/\\{\\$current\\}/g, String(currentValue()))\n    .replace(/\\{\\$max\\}/g, String(maxValue()))\n    .replace(/\\{\\$percent\\}/g, String(Math.round(percent() * 100)));\n\n  return String(resolveDynamicValue(value, object) ?? '');\n});\nconst labelSize = computed(() => toNumber(config().fontSize, 10));\nconst hasLabel = computed(() => labelText().length > 0);\nconst labelOffset = computed(() => hasLabel() ? labelSize() + 2 : 0);\nconst containerHeight = computed(() => labelOffset() + height());\nconst labelColor = computed(() => toColor(config().textColor, 0xffffff));\nconst labelPosition = computed(() => ({\n  x: 0,\n  y: 0\n}));\n\nconst drawBar = (g) => {\n  g.roundRect(0, labelOffset(), width(), height(), borderRadius());\n  g.fill({ color: backgroundColor(), alpha: opacity() });\n\n  const currentWidth = fillWidth();\n  if (currentWidth > 0) {\n    g.roundRect(0, labelOffset(), currentWidth, height(), borderRadius());\n    g.fill({ color: fillColor(), alpha: opacity() });\n  }\n  \n  const strokeWidth = borderWidth();\n  if (strokeWidth <= 0) return;\n  g.roundRect(0, labelOffset(), width(), height(), borderRadius());\n  g.stroke({ color: borderColor(), width: strokeWidth, alpha: opacity() });\n};\n</script>\n"],"mappings":";;;AASM,SAAG,UAAA,SAAsB;;+CAEH,eAAe,OAAA,EAAA;CAE3C,MAAM,QAAQ,MAAM,aAAa,OAAO,KAAK,IAAI;;EAEjD,MAAM,WAAY,oBAAuB,OAAC,MAAA;EACxC,MAAM,MAAQ,OAAG,aAAA,WAA2B,WAAO,WAAA,QAAA;EACnD,OAAS,OAAG,SAAO,GAAS,IAAI,MAAC;CACnC;CACA,MAAC,WAAA,OAAA,aAAA;;EAED,IAAM,OAAS,aAAS,UAChB,OAAA;EACJ,IAAE,OAAO,aAAc,YAAS,SAAO,WAAQ,GAAA,GAC7C,OAAO,SAAW,SAAS,MAAK,CAAA,GAAA,EAAA;EAEpC,OAAA,YAAA;CACF;CACA,MAAC,SAAA,eAAA,KAAA,OAAA,CAAA,CAAA,KAAA,CAAA,CAAA;;CAED,MAAM,SAAS,eAAe,SAAK,OAAW,EAAE,QAAI,CAAA,CAAA;CACpD,MAAM,eAAQ,eAAe,SAAgB,OAAO,EAAE,cAAI,CAAA,CAAA;CAC1D,MAAM,cAAS,eAAe,SAAS,OAAS,EAAA,aAAW,CAAA,CAAA;CAC3D,MAAM,kBAAe,eAAe,QAAS,OAAS,EAAA,SAAA,OAAiB,CAAA;CACvE,MAAM,YAAY,eAAe,QAAE,OAAS,EAAM,WAAG,OAAgB,CAAA;CACrE,MAAM,cAAA,eAA6B,QAAI,OAAQ,EAAA,aAAkB,OAAQ,CAAC;CAC1E,MAAM,UAAU,eAAe,KAAE,IAAO,GAAC,KAAO,IAAE,GAAA,SAAW,OAAU,EAAA,SAAA,CAAA,CAAA,CAAA,CAAA;CACvE,MAAM,eAAc,eAAe,SAAQ,KAAO,SAAE,CAAA,GAAW,CAAC,CAAC;CACjE,MAAM,WAAU,eAAe,KAAK,IAAK,GAAE,SAAU,KAAE,KAAQ,CAAC,GAAA,CAAA,CAAA,CAAM;;EAEtE,MAAM,MAAA,SAAe;EACrB,IAAM,OAAS,GACT,OAAS;EACb,OAAS,KAAG,IAAA,GAAS,KAAC,IAAA,GAAA,aAAA,IAAA,GAAA,CAAA;CACxB,CAAC;CACD,MAAE,YAAgB,eAAe,KAAA,IAAA,GAAY,MAAK,IAAK,QAAA,CAAA,CAAA;CACvD,MAAE,gBAAA,eAAA,KAAA,MAAA,IAAA,CAAA;;EAEF,MAAM,WAAY,cAAe;EACjC,IAAM,YAAc,QAAE,aAAmB,IACnC,OAAS;EACb,MAAM,QAAU,OAAC,QAAc,EAC3B,QAAW,kBAAkB,OAAO,aAAU,CAAA,CAAA,EAAA,QAAA,cAAA,OAAA,SAAA,CAAA,CAAA,EAE5C,QAAQ,kBAAe,OAAA,KAAA,MAAA,QAAA,IAAA,GAAA,CAAA,CAAA;EAC3B,OAAC,OAAa,oBAAoB,OAAA,MAAa,KAAE,EAAA;CACrD,CAAC;CACD,MAAK,YAAa,eAAa,SAAW,OAAO,EAAA,UAAY,EAAA,CAAG;;CAEhE,MAAE,cAAc,eAAmB,SAAQ,IAAA,UAAc,IAAA,IAAA,CAAA;CACzD,MAAE,kBAAA,eAAA,YAAA,IAAA,OAAA,CAAA;CACF,MAAM,aAAY,eAAe,QAAS,OAAO,EAAE,WAAU,QAAI,CAAA;CACjE,MAAM,gBAAW,gBAAe;EAChC,GAAM;EACN,GAAM;CACN,EAAA;CACA,MAAM,WAAA,MAAgB;EAClB,EAAE,UAAA,GAAA,YAAA,GAAA,MAAA,GAAA,OAAA,GAAA,aAAA,CAAA;EACF,EAAC,KAAA;GAAA,OAAA,gBAAA;GAAA,OAAA,QAAA;EAAA,CAAA;EACF,MAAA,eAAA,UAAA;;GAEG,EAAA,UAAc,GAAG,YAAA,GAAA,cAAA,OAAA,GAAA,aAAA,CAAA;GACnB,EAAA,KAAW;IAAE,OAAA,UAAe;IAAK,OAAI,QAAU;GAAA,CAAA;EAC/C;;EAEF,IAAM,eAAe,GACjB;EACF,EAAE,UAAU,GAAG,YAAY,GAAG,MAAA,GAAA,OAAc,GAAA,aAAU,CAAA;EACtD,EAAE,OAAO;GAAA,OAAO,YAAa;GAAA,OAAO;GAAY,OAAA,QAAA;EAAA,CAAA;CACpD;CAEQ,OADP,EAAA,WAAA;EAAA;EAAA,QAAA;EAAA,UAAA;EAAA,WAAA;CAAA,GAAA,CAAA,EAAA,UAAA;EAAA;EAAA,QAAA;EAAA,MAAA;CAAA,CAAA,GAAA,KAAA,gBAAA,EAAA,MAAA;EAAA,MAAA;EAAA,GAAA,cAAA;EAAA,GAAA,cAAA;EAAA,MAAA;EAAA,OAAA;CAAA,CAAA,CAAA,CAAA,CACkB;AACb;AAEF,IAAQ,iBAEJ"}

package/dist/components/dynamics/image.ce.js

@@ -0,0 +1,23 @@
+import { inject } from "../../core/inject.js";
+import { resolveDynamicValue } from "./parse-value.js";
+import { RpgClientEngine } from "../../RpgClientEngine.js";
+import { Sprite, computed, h, useDefineProps, useProps } from "canvasengine";
+//#region src/components/dynamics/image.ce
+function component($$props) {
+	useProps($$props);
+	const { object, value } = useDefineProps($$props)();
+	const client = inject(RpgClientEngine);
+	return h(Sprite, { sheet: computed(() => {
+		const id = resolveDynamicValue(value?.(), object);
+		if (!id) return null;
+		return {
+			definition: client.getSpriteSheet(id),
+			playing: "default"
+		};
+	}) });
+}
+var __ce_component = component;
+//#endregion
+export { __ce_component as default };
+
+//# sourceMappingURL=image.ce.js.map

package/dist/components/dynamics/image.ce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.ce.js","names":[],"sources":["../../../src/components/dynamics/image.ce"],"sourcesContent":["<Sprite sheet={sheet} />\n\n<script>\nimport { computed } from \"canvasengine\";\nimport { RpgClientEngine } from \"../../RpgClientEngine\";\nimport { inject } from \"../../core/inject\";\nimport { resolveDynamicValue } from \"./parse-value\";\n\nconst { object, value } = defineProps();\nconst client = inject(RpgClientEngine);\n\nconst sheet = computed(() => {\n  const id = resolveDynamicValue(value?.(), object);\n  if (!id) return null;\n  return {\n    definition: client.getSpriteSheet(id),\n    playing: 'default'\n  };\n});\n</script>\n"],"mappings":";;;;;AASM,SAAS,UAAO,SAAA;;CAGd,MAAK,EAAA,QAAA,UADe,eAAC,OACe,EAAA;CAC5C,MAAM,SAAK,OAAW,eAAA;2BACb,eAAA;EACL,MAAA,KAAW,oBAAQ,QAAkB,GAAA,MAAA;EACrC,IAAA,CAAA,IACD,OAAA;EACD,OAAA;GACM,YAAA,OAAA,eAAA,EAAA"}

package/dist/components/dynamics/parse-value.d.ts

@@ -0,0 +1,4 @@
+export declare const getDynamicValue: (property: string, object?: any) => any;
+export declare const resolveDynamicValue: (value: any, object?: any) => any;
+export declare const resolveDynamicProps: (props: any, object?: any) => any;
+export declare const parseDynamicValue: (value: any, object?: any) => import('canvasengine').ComputedSignal<string>;

package/dist/components/dynamics/parse-value.js

@@ -0,0 +1,63 @@
+import { computed } from "canvasengine";
+//#region src/components/dynamics/parse-value.ts
+var readSignal = (value) => typeof value === "function" ? value() : value;
+var DYNAMIC_VALUE_PATTERN = /\{([^}]+)\}/g;
+var hasDynamicValue = (value) => {
+	value = readSignal(value);
+	if (typeof value !== "string") return false;
+	DYNAMIC_VALUE_PATTERN.lastIndex = 0;
+	return DYNAMIC_VALUE_PATTERN.test(value);
+};
+var resolveDynamicSnapshot = (value, object) => {
+	value = readSignal(value);
+	if (Array.isArray(value)) return value.map((entry) => resolveDynamicSnapshot(entry, object));
+	if (value && typeof value === "object") return Object.fromEntries(Object.entries(value).map(([key, entry]) => [key, resolveDynamicSnapshot(entry, object)]));
+	return resolveDynamicValue(value, object);
+};
+var getDynamicValue = (property, object) => {
+	try {
+		const propertyPath = property.split(".");
+		let currentValue = object;
+		for (let j = 0; j < propertyPath.length; j++) {
+			let prop = propertyPath[j];
+			currentValue = readSignal(currentValue);
+			if (j === 0) {
+				if (prop === "hp") prop = "hpSignal";
+				if (prop === "sp") prop = "spSignal";
+				if (prop === "param") prop = "_param";
+				if (prop === "name" && currentValue && typeof currentValue === "object" && "_name" in currentValue) prop = "_name";
+				if (prop === "speed" && currentValue && typeof currentValue === "object" && "_speed" in currentValue) prop = "_speed";
+				if (prop === "canMove" && currentValue && typeof currentValue === "object" && "_canMove" in currentValue) prop = "_canMove";
+			}
+			if (currentValue && typeof currentValue === "object" && prop in currentValue) currentValue = currentValue[prop];
+			else return;
+		}
+		return readSignal(currentValue);
+	} catch (error) {
+		return;
+	}
+};
+var resolveDynamicValue = (value, object) => {
+	value = readSignal(value);
+	if (typeof value !== "string") return value;
+	return value.replace(DYNAMIC_VALUE_PATTERN, (fullMatch, property) => {
+		const propertyValue = getDynamicValue(property, object);
+		if (propertyValue == null && property.startsWith("$")) return fullMatch;
+		return propertyValue != null ? String(propertyValue) : "";
+	});
+};
+var resolveDynamicProp = (value, object) => {
+	if (Array.isArray(value) || value && typeof value === "object" && typeof value !== "function") return computed(() => resolveDynamicSnapshot(value, object));
+	if (typeof value === "function" || hasDynamicValue(value)) return computed(() => resolveDynamicValue(value, object));
+	return value;
+};
+var resolveDynamicProps = (props, object) => {
+	props = readSignal(props);
+	if (Array.isArray(props)) return computed(() => resolveDynamicSnapshot(props, object));
+	if (props && typeof props === "object") return Object.fromEntries(Object.entries(props).map(([key, value]) => [key, resolveDynamicProp(value, object)]));
+	return resolveDynamicProp(props, object);
+};
+//#endregion
+export { resolveDynamicProps, resolveDynamicValue };
+
+//# sourceMappingURL=parse-value.js.map

package/dist/components/dynamics/parse-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse-value.js","names":[],"sources":["../../../src/components/dynamics/parse-value.ts"],"sourcesContent":["import { computed } from \"canvasengine\";\n\ninterface MatchResult {\n    property: string;\n    fullMatch: string;\n    index: number;\n}\n\nconst readSignal = (value: any) => typeof value === 'function' ? value() : value;\nconst DYNAMIC_VALUE_PATTERN = /\\{([^}]+)\\}/g;\n\nconst hasDynamicValue = (value: any) => {\n    value = readSignal(value);\n    if (typeof value !== 'string') return false;\n    DYNAMIC_VALUE_PATTERN.lastIndex = 0;\n    return DYNAMIC_VALUE_PATTERN.test(value);\n};\n\nconst resolveDynamicSnapshot = (value: any, object?: any): any => {\n    value = readSignal(value);\n\n    if (Array.isArray(value)) {\n        return value.map((entry) => resolveDynamicSnapshot(entry, object));\n    }\n\n    if (value && typeof value === 'object') {\n        return Object.fromEntries(\n            Object.entries(value).map(([key, entry]) => [key, resolveDynamicSnapshot(entry, object)])\n        );\n    }\n\n    return resolveDynamicValue(value, object);\n};\n\nexport const getDynamicValue = (property: string, object?: any) => {\n    try {\n        const propertyPath = property.split('.');\n        let currentValue = object;\n\n        for (let j = 0; j < propertyPath.length; j++) {\n            let prop = propertyPath[j];\n\n            currentValue = readSignal(currentValue);\n\n            if (j === 0) {\n                if (prop === 'hp') prop = 'hpSignal';\n                if (prop === 'sp') prop = 'spSignal';\n                if (prop === 'param') prop = '_param';\n                if (prop === 'name' && currentValue && typeof currentValue === 'object' && '_name' in currentValue) {\n                    prop = '_name';\n                }\n                if (prop === 'speed' && currentValue && typeof currentValue === 'object' && '_speed' in currentValue) {\n                    prop = '_speed';\n                }\n                if (prop === 'canMove' && currentValue && typeof currentValue === 'object' && '_canMove' in currentValue) {\n                    prop = '_canMove';\n                }\n            }\n\n            if (currentValue && typeof currentValue === 'object' && prop in currentValue) {\n                currentValue = currentValue[prop];\n            } else {\n                return undefined;\n            }\n        }\n\n        return readSignal(currentValue);\n    } catch (error) {\n        return undefined;\n    }\n};\n\nexport const resolveDynamicValue = (value: any, object?: any): any => {\n    value = readSignal(value);\n\n    if (typeof value !== 'string') {\n        return value;\n    }\n\n    return value.replace(DYNAMIC_VALUE_PATTERN, (fullMatch, property) => {\n        const propertyValue = getDynamicValue(property, object);\n        if (propertyValue == null && property.startsWith('$')) return fullMatch;\n        return propertyValue != null ? String(propertyValue) : '';\n    });\n};\n\nconst resolveDynamicProp = (value: any, object?: any): any => {\n    if (Array.isArray(value) || (value && typeof value === 'object' && typeof value !== 'function')) {\n        return computed(() => resolveDynamicSnapshot(value, object));\n    }\n\n    if (typeof value === 'function' || hasDynamicValue(value)) {\n        return computed(() => resolveDynamicValue(value, object));\n    }\n\n    return value;\n};\n\nexport const resolveDynamicProps = (props: any, object?: any): any => {\n    props = readSignal(props);\n\n    if (Array.isArray(props)) {\n        return computed(() => resolveDynamicSnapshot(props, object));\n    }\n\n    if (props && typeof props === 'object') {\n        return Object.fromEntries(\n            Object.entries(props).map(([key, value]) => [key, resolveDynamicProp(value, object)])\n        );\n    }\n\n    return resolveDynamicProp(props, object);\n};\n\nexport const parseDynamicValue = (value: any, object?: any) => {\n    if (typeof value !== 'string') {\n        return computed(() => String(value ?? ''));\n    }\n\n    // Find all dynamic references like {propertyName}\n    const matches: MatchResult[] = [];\n    let match;\n\n    DYNAMIC_VALUE_PATTERN.lastIndex = 0;\n    while ((match = DYNAMIC_VALUE_PATTERN.exec(value)) !== null) {\n        matches.push({\n            property: match[1],\n            fullMatch: match[0],\n            index: match.index!\n        });\n    }\n\n    // If no dynamic references found, return simple computed\n    if (matches.length === 0) {\n        return computed(() => value);\n    }\n\n    // Create computed that tracks all referenced signals\n    return computed(() => {\n        let result = value;\n        \n        // Replace from end to start to preserve indices\n        for (let i = matches.length - 1; i >= 0; i--) {\n            const { property, fullMatch } = matches[i];\n            \n            const currentValue = getDynamicValue(property, object);\n            const propertyValue = currentValue != null ? String(currentValue) : property.startsWith('$') ? fullMatch : '';\n            \n            result = result.replace(fullMatch, propertyValue);\n        }\n        \n        return result;\n    });\n};\n"],"mappings":";;AAQA,IAAM,cAAc,UAAe,OAAO,UAAU,aAAa,MAAM,IAAI;AAC3E,IAAM,wBAAwB;AAE9B,IAAM,mBAAmB,UAAe;CACpC,QAAQ,WAAW,KAAK;CACxB,IAAI,OAAO,UAAU,UAAU,OAAO;CACtC,sBAAsB,YAAY;CAClC,OAAO,sBAAsB,KAAK,KAAK;AAC3C;AAEA,IAAM,0BAA0B,OAAY,WAAsB;CAC9D,QAAQ,WAAW,KAAK;CAExB,IAAI,MAAM,QAAQ,KAAK,GACnB,OAAO,MAAM,KAAK,UAAU,uBAAuB,OAAO,MAAM,CAAC;CAGrE,IAAI,SAAS,OAAO,UAAU,UAC1B,OAAO,OAAO,YACV,OAAO,QAAQ,KAAK,EAAE,KAAK,CAAC,KAAK,WAAW,CAAC,KAAK,uBAAuB,OAAO,MAAM,CAAC,CAAC,CAC5F;CAGJ,OAAO,oBAAoB,OAAO,MAAM;AAC5C;AAEA,IAAa,mBAAmB,UAAkB,WAAiB;CAC/D,IAAI;EACA,MAAM,eAAe,SAAS,MAAM,GAAG;EACvC,IAAI,eAAe;EAEnB,KAAK,IAAI,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK;GAC1C,IAAI,OAAO,aAAa;GAExB,eAAe,WAAW,YAAY;GAEtC,IAAI,MAAM,GAAG;IACT,IAAI,SAAS,MAAM,OAAO;IAC1B,IAAI,SAAS,MAAM,OAAO;IAC1B,IAAI,SAAS,SAAS,OAAO;IAC7B,IAAI,SAAS,UAAU,gBAAgB,OAAO,iBAAiB,YAAY,WAAW,cAClF,OAAO;IAEX,IAAI,SAAS,WAAW,gBAAgB,OAAO,iBAAiB,YAAY,YAAY,cACpF,OAAO;IAEX,IAAI,SAAS,aAAa,gBAAgB,OAAO,iBAAiB,YAAY,cAAc,cACxF,OAAO;GAEf;GAEA,IAAI,gBAAgB,OAAO,iBAAiB,YAAY,QAAQ,cAC5D,eAAe,aAAa;QAE5B;EAER;EAEA,OAAO,WAAW,YAAY;CAClC,SAAS,OAAO;EACZ;CACJ;AACJ;AAEA,IAAa,uBAAuB,OAAY,WAAsB;CAClE,QAAQ,WAAW,KAAK;CAExB,IAAI,OAAO,UAAU,UACjB,OAAO;CAGX,OAAO,MAAM,QAAQ,wBAAwB,WAAW,aAAa;EACjE,MAAM,gBAAgB,gBAAgB,UAAU,MAAM;EACtD,IAAI,iBAAiB,QAAQ,SAAS,WAAW,GAAG,GAAG,OAAO;EAC9D,OAAO,iBAAiB,OAAO,OAAO,aAAa,IAAI;CAC3D,CAAC;AACL;AAEA,IAAM,sBAAsB,OAAY,WAAsB;CAC1D,IAAI,MAAM,QAAQ,KAAK,KAAM,SAAS,OAAO,UAAU,YAAY,OAAO,UAAU,YAChF,OAAO,eAAe,uBAAuB,OAAO,MAAM,CAAC;CAG/D,IAAI,OAAO,UAAU,cAAc,gBAAgB,KAAK,GACpD,OAAO,eAAe,oBAAoB,OAAO,MAAM,CAAC;CAG5D,OAAO;AACX;AAEA,IAAa,uBAAuB,OAAY,WAAsB;CAClE,QAAQ,WAAW,KAAK;CAExB,IAAI,MAAM,QAAQ,KAAK,GACnB,OAAO,eAAe,uBAAuB,OAAO,MAAM,CAAC;CAG/D,IAAI,SAAS,OAAO,UAAU,UAC1B,OAAO,OAAO,YACV,OAAO,QAAQ,KAAK,EAAE,KAAK,CAAC,KAAK,WAAW,CAAC,KAAK,mBAAmB,OAAO,MAAM,CAAC,CAAC,CACxF;CAGJ,OAAO,mBAAmB,OAAO,MAAM;AAC3C"}

package/dist/components/dynamics/parse-value.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/dynamics/shape-utils.d.ts

@@ -0,0 +1,16 @@
+export declare function getShapePointBounds(points?: any[], toNumber?: (value: any, fallback?: number) => number): {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+};
+export declare function getShapeBox(cfg: any, toNumber?: (value: any, fallback?: number) => number): {
+    width: any;
+    height: any;
+    offsetX: number;
+    offsetY: number;
+};
+export declare function translatePolygonPoints(points: any[] | undefined, box: {
+    offsetX: number;
+    offsetY: number;
+}, toNumber?: (value: any, fallback?: number) => number): number[];

package/dist/components/dynamics/shape-utils.js

@@ -0,0 +1,73 @@
+//#region src/components/dynamics/shape-utils.ts
+var defaultToNumber = (value, fallback = 0) => {
+	const num = typeof value === "number" ? value : parseFloat(value);
+	return Number.isFinite(num) ? num : fallback;
+};
+function getShapePointBounds(points = [], toNumber = defaultToNumber) {
+	if (!Array.isArray(points) || points.length < 2) return {
+		minX: 0,
+		minY: 0,
+		maxX: 1,
+		maxY: 1
+	};
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+	for (let i = 0; i < points.length; i += 2) {
+		const x = toNumber(points[i], 0);
+		const y = toNumber(points[i + 1], 0);
+		minX = Math.min(minX, x);
+		minY = Math.min(minY, y);
+		maxX = Math.max(maxX, x);
+		maxY = Math.max(maxY, y);
+	}
+	return {
+		minX,
+		minY,
+		maxX,
+		maxY
+	};
+}
+function getShapeBox(cfg, toNumber = defaultToNumber) {
+	if (cfg.type === "circle") return {
+		width: cfg.radius * 2,
+		height: cfg.radius * 2,
+		offsetX: 0,
+		offsetY: 0
+	};
+	if (cfg.type === "line") {
+		const minX = Math.min(cfg.x1, cfg.x2);
+		const minY = Math.min(cfg.y1, cfg.y2);
+		const maxX = Math.max(cfg.x1, cfg.x2);
+		const maxY = Math.max(cfg.y1, cfg.y2);
+		return {
+			width: Math.max(1, maxX - minX),
+			height: Math.max(1, maxY - minY),
+			offsetX: -minX,
+			offsetY: -minY
+		};
+	}
+	if (cfg.type === "polygon") {
+		const bounds = getShapePointBounds(cfg.points, toNumber);
+		return {
+			width: Math.max(1, bounds.maxX - bounds.minX),
+			height: Math.max(1, bounds.maxY - bounds.minY),
+			offsetX: -bounds.minX,
+			offsetY: -bounds.minY
+		};
+	}
+	return {
+		width: cfg.width,
+		height: cfg.height,
+		offsetX: 0,
+		offsetY: 0
+	};
+}
+function translatePolygonPoints(points = [], box, toNumber = defaultToNumber) {
+	return points.map((point, index) => toNumber(point, 0) + (index % 2 === 0 ? box.offsetX : box.offsetY));
+}
+//#endregion
+export { getShapeBox, translatePolygonPoints };
+
+//# sourceMappingURL=shape-utils.js.map

package/dist/components/dynamics/shape-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape-utils.js","names":[],"sources":["../../../src/components/dynamics/shape-utils.ts"],"sourcesContent":["const defaultToNumber = (value: any, fallback = 0) => {\n  const num = typeof value === 'number' ? value : parseFloat(value);\n  return Number.isFinite(num) ? num : fallback;\n};\n\nexport function getShapePointBounds(points: any[] = [], toNumber = defaultToNumber) {\n  if (!Array.isArray(points) || points.length < 2) {\n    return { minX: 0, minY: 0, maxX: 1, maxY: 1 };\n  }\n\n  let minX = Infinity;\n  let minY = Infinity;\n  let maxX = -Infinity;\n  let maxY = -Infinity;\n\n  for (let i = 0; i < points.length; i += 2) {\n    const x = toNumber(points[i], 0);\n    const y = toNumber(points[i + 1], 0);\n    minX = Math.min(minX, x);\n    minY = Math.min(minY, y);\n    maxX = Math.max(maxX, x);\n    maxY = Math.max(maxY, y);\n  }\n\n  return { minX, minY, maxX, maxY };\n}\n\nexport function getShapeBox(cfg: any, toNumber = defaultToNumber) {\n  if (cfg.type === 'circle') {\n    return { width: cfg.radius * 2, height: cfg.radius * 2, offsetX: 0, offsetY: 0 };\n  }\n\n  if (cfg.type === 'line') {\n    const minX = Math.min(cfg.x1, cfg.x2);\n    const minY = Math.min(cfg.y1, cfg.y2);\n    const maxX = Math.max(cfg.x1, cfg.x2);\n    const maxY = Math.max(cfg.y1, cfg.y2);\n    return {\n      width: Math.max(1, maxX - minX),\n      height: Math.max(1, maxY - minY),\n      offsetX: -minX,\n      offsetY: -minY\n    };\n  }\n\n  if (cfg.type === 'polygon') {\n    const bounds = getShapePointBounds(cfg.points, toNumber);\n    return {\n      width: Math.max(1, bounds.maxX - bounds.minX),\n      height: Math.max(1, bounds.maxY - bounds.minY),\n      offsetX: -bounds.minX,\n      offsetY: -bounds.minY\n    };\n  }\n\n  return { width: cfg.width, height: cfg.height, offsetX: 0, offsetY: 0 };\n}\n\nexport function translatePolygonPoints(points: any[] = [], box: { offsetX: number; offsetY: number }, toNumber = defaultToNumber) {\n  return points.map((point, index) => toNumber(point, 0) + (index % 2 === 0 ? box.offsetX : box.offsetY));\n}\n"],"mappings":";AAAA,IAAM,mBAAmB,OAAY,WAAW,MAAM;CACpD,MAAM,MAAM,OAAO,UAAU,WAAW,QAAQ,WAAW,KAAK;CAChE,OAAO,OAAO,SAAS,GAAG,IAAI,MAAM;AACtC;AAEA,SAAgB,oBAAoB,SAAgB,CAAC,GAAG,WAAW,iBAAiB;CAClF,IAAI,CAAC,MAAM,QAAQ,MAAM,KAAK,OAAO,SAAS,GAC5C,OAAO;EAAE,MAAM;EAAG,MAAM;EAAG,MAAM;EAAG,MAAM;CAAE;CAG9C,IAAI,OAAO;CACX,IAAI,OAAO;CACX,IAAI,OAAO;CACX,IAAI,OAAO;CAEX,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK,GAAG;EACzC,MAAM,IAAI,SAAS,OAAO,IAAI,CAAC;EAC/B,MAAM,IAAI,SAAS,OAAO,IAAI,IAAI,CAAC;EACnC,OAAO,KAAK,IAAI,MAAM,CAAC;EACvB,OAAO,KAAK,IAAI,MAAM,CAAC;EACvB,OAAO,KAAK,IAAI,MAAM,CAAC;EACvB,OAAO,KAAK,IAAI,MAAM,CAAC;CACzB;CAEA,OAAO;EAAE;EAAM;EAAM;EAAM;CAAK;AAClC;AAEA,SAAgB,YAAY,KAAU,WAAW,iBAAiB;CAChE,IAAI,IAAI,SAAS,UACf,OAAO;EAAE,OAAO,IAAI,SAAS;EAAG,QAAQ,IAAI,SAAS;EAAG,SAAS;EAAG,SAAS;CAAE;CAGjF,IAAI,IAAI,SAAS,QAAQ;EACvB,MAAM,OAAO,KAAK,IAAI,IAAI,IAAI,IAAI,EAAE;EACpC,MAAM,OAAO,KAAK,IAAI,IAAI,IAAI,IAAI,EAAE;EACpC,MAAM,OAAO,KAAK,IAAI,IAAI,IAAI,IAAI,EAAE;EACpC,MAAM,OAAO,KAAK,IAAI,IAAI,IAAI,IAAI,EAAE;EACpC,OAAO;GACL,OAAO,KAAK,IAAI,GAAG,OAAO,IAAI;GAC9B,QAAQ,KAAK,IAAI,GAAG,OAAO,IAAI;GAC/B,SAAS,CAAC;GACV,SAAS,CAAC;EACZ;CACF;CAEA,IAAI,IAAI,SAAS,WAAW;EAC1B,MAAM,SAAS,oBAAoB,IAAI,QAAQ,QAAQ;EACvD,OAAO;GACL,OAAO,KAAK,IAAI,GAAG,OAAO,OAAO,OAAO,IAAI;GAC5C,QAAQ,KAAK,IAAI,GAAG,OAAO,OAAO,OAAO,IAAI;GAC7C,SAAS,CAAC,OAAO;GACjB,SAAS,CAAC,OAAO;EACnB;CACF;CAEA,OAAO;EAAE,OAAO,IAAI;EAAO,QAAQ,IAAI;EAAQ,SAAS;EAAG,SAAS;CAAE;AACxE;AAEA,SAAgB,uBAAuB,SAAgB,CAAC,GAAG,KAA2C,WAAW,iBAAiB;CAChI,OAAO,OAAO,KAAK,OAAO,UAAU,SAAS,OAAO,CAAC,KAAK,QAAQ,MAAM,IAAI,IAAI,UAAU,IAAI,QAAQ;AACxG"}

package/dist/components/dynamics/shape-utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/dynamics/shape.ce.js

@@ -0,0 +1,83 @@
+import { resolveDynamicValue } from "./parse-value.js";
+import { getShapeBox, translatePolygonPoints } from "./shape-utils.js";
+import { Container, Graphics, computed, h, useDefineProps, useProps } from "canvasengine";
+//#region src/components/dynamics/shape.ce
+function component($$props) {
+	useProps($$props);
+	const props = useDefineProps($$props)();
+	const { object } = props;
+	const read = (prop, fallback) => prop ? prop() : fallback;
+	const toNumber = (value, fallback = 0) => {
+		const resolved = resolveDynamicValue(value, object);
+		const num = typeof resolved === "number" ? resolved : parseFloat(resolved);
+		return Number.isFinite(num) ? num : fallback;
+	};
+	const toColor = (value, fallback) => {
+		const resolved = resolveDynamicValue(value, object);
+		if (typeof resolved === "number") return resolved;
+		if (typeof resolved === "string" && resolved.startsWith("#")) return parseInt(resolved.slice(1), 16);
+		return resolved ?? fallback;
+	};
+	const config = computed(() => ({
+		type: read(props.type, "rectangle"),
+		fill: toColor(read(props.fill, "#ffffff"), 16777215),
+		radius: toNumber(read(props.radius, 8), 8),
+		width: toNumber(read(props.width, 16), 16),
+		height: toNumber(read(props.height, 16), 16),
+		x1: toNumber(read(props.x1, 0), 0),
+		y1: toNumber(read(props.y1, 0), 0),
+		x2: toNumber(read(props.x2, 16), 16),
+		y2: toNumber(read(props.y2, 0), 0),
+		opacity: Math.max(0, Math.min(1, toNumber(read(props.opacity, 1), 1))),
+		points: read(props.points, []),
+		line: read(props.line, null)
+	}));
+	const shapeBox = computed(() => getShapeBox(config(), toNumber));
+	const shapeWidth = computed(() => shapeBox().width);
+	const shapeHeight = computed(() => shapeBox().height);
+	const drawShape = (g) => {
+		const cfg = config();
+		const box = shapeBox();
+		if (cfg.type === "circle") g.circle(cfg.radius, cfg.radius, cfg.radius);
+		else if (cfg.type === "ellipse") g.ellipse(box.width / 2, box.height / 2, box.width / 2, box.height / 2);
+		else if (cfg.type === "line") {
+			g.moveTo(cfg.x1 + box.offsetX, cfg.y1 + box.offsetY);
+			g.lineTo(cfg.x2 + box.offsetX, cfg.y2 + box.offsetY);
+		} else if (cfg.type === "polygon" && Array.isArray(cfg.points)) g.poly(translatePolygonPoints(cfg.points, box, toNumber));
+		else if (cfg.type === "rounded-rectangle") g.roundRect(0, 0, box.width, box.height, toNumber(read(props.radius, 4), 4));
+		else g.rect(0, 0, box.width, box.height);
+		if (cfg.type === "line") {
+			const line = cfg.line ?? {};
+			g.stroke({
+				color: toColor(line.color, cfg.fill),
+				width: toNumber(line.width, 1),
+				alpha: toNumber(line.alpha, cfg.opacity)
+			});
+			return;
+		}
+		g.fill({
+			color: cfg.fill,
+			alpha: cfg.opacity
+		});
+		if (cfg.line) g.stroke({
+			color: toColor(cfg.line.color, cfg.fill),
+			width: toNumber(cfg.line.width, 1),
+			alpha: toNumber(cfg.line.alpha, cfg.opacity)
+		});
+	};
+	return h(Container, {
+		width: shapeWidth,
+		height: shapeHeight,
+		minWidth: shapeWidth,
+		minHeight: shapeHeight
+	}, h(Graphics, {
+		width: shapeWidth,
+		height: shapeHeight,
+		draw: drawShape
+	}));
+}
+var __ce_component = component;
+//#endregion
+export { __ce_component as default };
+
+//# sourceMappingURL=shape.ce.js.map

package/dist/components/dynamics/shape.ce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.ce.js","names":[],"sources":["../../../src/components/dynamics/shape.ce"],"sourcesContent":["<Container width={shapeWidth} height={shapeHeight} minWidth={shapeWidth} minHeight={shapeHeight}>\n  <Graphics width={shapeWidth} height={shapeHeight} draw={drawShape} />\n</Container>\n\n<script>\nimport { computed } from \"canvasengine\";\nimport { resolveDynamicValue } from \"./parse-value\";\nimport { getShapeBox, translatePolygonPoints } from \"./shape-utils\";\n\nconst props = defineProps();\nconst { object } = props;\n\nconst read = (prop, fallback) => prop ? prop() : fallback;\n\nconst toNumber = (value, fallback = 0) => {\n  const resolved = resolveDynamicValue(value, object);\n  const num = typeof resolved === 'number' ? resolved : parseFloat(resolved);\n  return Number.isFinite(num) ? num : fallback;\n};\n\nconst toColor = (value, fallback) => {\n  const resolved = resolveDynamicValue(value, object);\n  if (typeof resolved === 'number') return resolved;\n  if (typeof resolved === 'string' && resolved.startsWith('#')) {\n    return parseInt(resolved.slice(1), 16);\n  }\n  return resolved ?? fallback;\n};\n\nconst config = computed(() => ({\n  type: read(props.type, 'rectangle'),\n  fill: toColor(read(props.fill, '#ffffff'), 0xffffff),\n  radius: toNumber(read(props.radius, 8), 8),\n  width: toNumber(read(props.width, 16), 16),\n  height: toNumber(read(props.height, 16), 16),\n  x1: toNumber(read(props.x1, 0), 0),\n  y1: toNumber(read(props.y1, 0), 0),\n  x2: toNumber(read(props.x2, 16), 16),\n  y2: toNumber(read(props.y2, 0), 0),\n  opacity: Math.max(0, Math.min(1, toNumber(read(props.opacity, 1), 1))),\n  points: read(props.points, []),\n  line: read(props.line, null)\n}));\n\nconst shapeBox = computed(() => getShapeBox(config(), toNumber));\n\nconst shapeWidth = computed(() => shapeBox().width);\nconst shapeHeight = computed(() => shapeBox().height);\n\nconst drawShape = (g) => {\n  const cfg = config();\n  const box = shapeBox();\n\n  if (cfg.type === 'circle') {\n    g.circle(cfg.radius, cfg.radius, cfg.radius);\n  } else if (cfg.type === 'ellipse') {\n    g.ellipse(box.width / 2, box.height / 2, box.width / 2, box.height / 2);\n  } else if (cfg.type === 'line') {\n    g.moveTo(cfg.x1 + box.offsetX, cfg.y1 + box.offsetY);\n    g.lineTo(cfg.x2 + box.offsetX, cfg.y2 + box.offsetY);\n  } else if (cfg.type === 'polygon' && Array.isArray(cfg.points)) {\n    g.poly(translatePolygonPoints(cfg.points, box, toNumber));\n  } else if (cfg.type === 'rounded-rectangle') {\n    g.roundRect(0, 0, box.width, box.height, toNumber(read(props.radius, 4), 4));\n  } else {\n    g.rect(0, 0, box.width, box.height);\n  }\n\n  if (cfg.type === 'line') {\n    const line = cfg.line ?? {};\n    g.stroke({\n      color: toColor(line.color, cfg.fill),\n      width: toNumber(line.width, 1),\n      alpha: toNumber(line.alpha, cfg.opacity)\n    });\n    return;\n  }\n\n  g.fill({ color: cfg.fill, alpha: cfg.opacity });\n\n  if (cfg.line) {\n    g.stroke({\n      color: toColor(cfg.line.color, cfg.fill),\n      width: toNumber(cfg.line.width, 1),\n      alpha: toNumber(cfg.line.alpha, cfg.opacity)\n    });\n  }\n};\n</script>\n"],"mappings":"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"}

package/dist/components/dynamics/text.ce.js

@@ -0,0 +1,50 @@
+import { resolveDynamicValue } from "./parse-value.js";
+import { Text, computed, h, useDefineProps, useProps } from "canvasengine";
+//#region src/components/dynamics/text.ce
+function component($$props) {
+	useProps($$props);
+	const { object, value, style } = useDefineProps($$props)();
+	const read = (prop, fallback) => prop ? prop() : fallback;
+	const parseNumericStyleValue = (value, object) => {
+		value = resolveDynamicValue(value, object);
+		if (value === void 0 || value === null) return void 0;
+		if (typeof value === "number") return value;
+		const num = parseFloat(value);
+		return isNaN(num) ? void 0 : num;
+	};
+	const getTextStyle = (style) => {
+		if (!style) return {};
+		const textStyle = {};
+		if (style.fontStyle !== void 0) textStyle.fontStyle = resolveDynamicValue(style.fontStyle, object);
+		if (style.fontWeight !== void 0) textStyle.fontWeight = resolveDynamicValue(style.fontWeight, object);
+		if (style.stroke !== void 0) textStyle.stroke = resolveDynamicValue(style.stroke, object);
+		if (style.opacity !== void 0) {
+			const opacityValue = parseNumericStyleValue(style.opacity, object);
+			if (opacityValue !== void 0) textStyle.opacity = opacityValue;
+		}
+		if (style.wordWrap !== void 0) textStyle.wordWrap = style.wordWrap;
+		if (style.align !== void 0) textStyle.align = resolveDynamicValue(style.align, object);
+		return textStyle;
+	};
+	return h(Text, {
+		text: computed(() => String(resolveDynamicValue(read(value, ""), object) ?? "")),
+		color: computed(() => {
+			const currentStyle = read(style, {});
+			return currentStyle.fill !== void 0 ? resolveDynamicValue(currentStyle.fill, object) : void 0;
+		}),
+		size: computed(() => {
+			const currentStyle = read(style, {});
+			return currentStyle.fontSize !== void 0 ? parseNumericStyleValue(currentStyle.fontSize, object) : void 0;
+		}),
+		fontFamily: computed(() => {
+			const currentStyle = read(style, {});
+			return currentStyle.fontFamily !== void 0 ? resolveDynamicValue(currentStyle.fontFamily, object) : void 0;
+		}),
+		style: computed(() => getTextStyle(read(style, {})))
+	});
+}
+var __ce_component = component;
+//#endregion
+export { __ce_component as default };
+
+//# sourceMappingURL=text.ce.js.map

package/dist/components/dynamics/text.ce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.ce.js","names":[],"sources":["../../../src/components/dynamics/text.ce"],"sourcesContent":["<Text text={textValue} color={textColor} size={textSize} fontFamily={textFontFamily} style={textStyle} />\n\n<script>\nimport { computed } from \"canvasengine\";\nimport { resolveDynamicValue } from \"./parse-value\";\n\nconst { object, value, style } = defineProps();\n\nconst read = (prop, fallback) => prop ? prop() : fallback;\n\nconst parseNumericStyleValue = (value, object) => {\n    value = resolveDynamicValue(value, object);\n    if (value === undefined || value === null) return undefined;\n    if (typeof value === 'number') return value;\n\n    const num = parseFloat(value);\n    return isNaN(num) ? undefined : num;\n};\n\nconst getTextStyle = (style) => {\n    if (!style) return {};\n    const textStyle = {};\n\n    if (style.fontStyle !== undefined) {\n        textStyle.fontStyle = resolveDynamicValue(style.fontStyle, object);\n    }\n\n    if (style.fontWeight !== undefined) {\n        textStyle.fontWeight = resolveDynamicValue(style.fontWeight, object);\n    }\n\n    if (style.stroke !== undefined) {\n        textStyle.stroke = resolveDynamicValue(style.stroke, object);\n    }\n\n    if (style.opacity !== undefined) {\n        const opacityValue = parseNumericStyleValue(style.opacity, object);\n        if (opacityValue !== undefined) {\n            textStyle.opacity = opacityValue;\n        }\n    }\n\n    if (style.wordWrap !== undefined) {\n        textStyle.wordWrap = style.wordWrap;\n    }\n\n    if (style.align !== undefined) {\n        textStyle.align = resolveDynamicValue(style.align, object);\n    }\n\n    return textStyle;\n};\n\nconst textValue = computed(() => String(resolveDynamicValue(read(value, ''), object) ?? ''));\nconst textColor = computed(() => {\n    const currentStyle = read(style, {});\n    return currentStyle.fill !== undefined ? resolveDynamicValue(currentStyle.fill, object) : undefined;\n});\nconst textSize = computed(() => {\n    const currentStyle = read(style, {});\n    return currentStyle.fontSize !== undefined ? parseNumericStyleValue(currentStyle.fontSize, object) : undefined;\n});\nconst textFontFamily = computed(() => {\n    const currentStyle = read(style, {});\n    return currentStyle.fontFamily !== undefined ? resolveDynamicValue(currentStyle.fontFamily, object) : undefined;\n});\nconst textStyle = computed(() => getTextStyle(read(style, {})));\n</script>\n"],"mappings":";;;;CAQoB,SAAY,OAAO;CAEjC,MAAA,EAAA,QAAA,OAAyB,UAAA,eAAA,OAAmB,EAAA;CAClD,MAAI,QAAQ,MAAA,aAAoB,OAAO,KAAM,IAAC;CAC9C,MAAM,0BAAyB,OAAQ,WAAQ;EAC3C,QAAI,oBAAwB,OAAG,MAAO;0CAEtC,OAAW,KAAA;EACX,IAAA,OAAO,UAAa,UACvB,OAAA;;EAED,OAAM,MAAA,GAAc,IAAE,KAAA,IAAU;CAChC;CACA,MAAI,gBAAkB,UAAE;cAEhB,OAAM,CAAA;EACV,MAAI,YAAU,CAAA;EACd,IAAA,MAAA,cAAA,KAAA,GAAA,UAAA,YAAA,oBAAA,MAAA,WAAA,MAAA;EAGA,IAAI,MAAA,eAAqB,KAAA,GACzB,UAAA,aAAA,oBAAA,MAAA,YAAA,MAAA;EAEA,IAAI,MAAM,WAAW,KAAA,GACjB,UAAU,SAAS,oBAAoB,MAAM,QAAQ,MAAM;;GAG3D,MAAM,eAAY,uBAAW,MAAA,SAAA,MAAA;GAC7B,IAAA,iBAAqB,KAAA,GACjB,UAAA,UAAiB;EAEzB;EACA,IAAA,MAAA,aAAA,KAAA,GAAA,UAAA,WAAA,MAAA;EAGA,IAAI,MAAA,UAAU,KAAA,GACd,UAAA,QAAA,oBAAA,MAAA,OAAA,MAAA;EAEA,OAAI;CACR;CAgBI,OADgB,EAAE,MAAC;EAAA,MAdnB,eAAA,OAAA,oBAAA,KAAA,OAAA,EAAA,GAAA,MAAA,KAAA,EAAA,CAckC;EAAA,OAAA,eAAA;GAZlC,MAAM,eAAU,KAAA,OAAA,CAAA,CAAA;GACnB,OAAA,aAAA,SAAA,KAAA,IAAA,oBAAA,aAAA,MAAA,MAAA,IAAA,KAAA;GAWqC;EAAA,MATrB,eAAe;GAChC,MAAM,eAAY,KAAY,OAAG,CAAA,CAAA;GAC7B,OAAM,aAAc,aAAa,KAAA,IAAG,uBAAA,aAAA,UAAA,MAAA,IAAA,KAAA;EACxC,CAMsC;EAAA,YALpC,eAAA;GACF,MAAM,eAAmB,KAAK,OAAE,CAAA,CAAA;GAC5B,OAAM,aAAc,eAAe,KAAA,IAAC,oBAAA,aAAA,YAAA,MAAA,IAAA,KAAA;EACxC,CAEsC;EAAA,OADpC,eAAA,aAAA,KAAA,OAAA,CAAA,CAAA,CAAA,CACoC;CAAA,CAC5B;AACN;AAEE,IAAA,iBAAA"}

package/dist/components/gui/box.ce.js

@@ -0,0 +1,26 @@
+import { inject } from "../../core/inject.js";
+import { RpgClientEngine } from "../../RpgClientEngine.js";
+import "../../index.js";
+import { Container, Rect, computed, h, useDefineProps, useProps } from "canvasengine";
+//#region src/components/gui/box.ce
+function component($$props) {
+	useProps($$props);
+	const { width, height, children, color, top, left } = useDefineProps($$props)();
+	const engine = inject(RpgClientEngine);
+	const child = children[0];
+	const _color = computed(() => engine.globalConfig.gui?.windowColor || color?.() || "#1a1a2e");
+	return h(Container, {
+		positionType: "absolute",
+		top,
+		left
+	}, h(Container, { anchor: [.5, .5] }, [h(Rect, {
+		width,
+		height,
+		color: _color
+	}), h(Container, { attach: child })]));
+}
+var __ce_component = component;
+//#endregion
+export { __ce_component as default };
+
+//# sourceMappingURL=box.ce.js.map

package/dist/components/gui/box.ce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.ce.js","names":[],"sources":["../../../src/components/gui/box.ce"],"sourcesContent":["<Container positionType=\"absolute\" top={top} left={left}>\n    <Container\n      anchor={[0.5, 0.5]}\n    >\n    <Rect width height color={_color} />\n    <Container attach={child}></Container>\n  </Container>  \n</Container>\n\n<script>\n  import { RpgClientEngine, inject } from \"../../index\";\n\n  const { width, height, children, color, top, left } = defineProps();\n  const engine = inject(RpgClientEngine)\n  const child = children[0]\n  const _color = computed(() => engine.globalConfig.gui?.windowColor || color?.() || \"#1a1a2e\")\n</script>"],"mappings":";;;;;AAOE,SAAS,UAAA,SAAA;;CAGH,MAAG,EAAA,OAAA,QAAiB,UAAa,OAAO,KAAC,SAD1C,eAAA,OACgD,EAAA;;CAEvD,MAAE,QAAQ,SAAa;CACvB,MAAE,SAAa,eAAS,OAAA,aAAe,KAAA,eAAA,QAAA,KAAA,SAAA;CAE/B,OADQ,EAAA,WAAU;EAAA,cAAA;EAAA;EAAA;CAAA,GAAA,EAAA,WAAA,EAAA,QAAA,CAAA,IAAA,EAAA,EAAA,GAAA,CAAA,EAAA,MAAA;EAAA;EAAA;EAAA,OAAA;CAAA,CAAA,GAAA,EAAA,WAAA,EAAA,QAAA,MAAA,CAAA,CAAA,CAAA,CACT;AACf"}