pixi-solid 0.1.21 → 0.2.0

package/dist/components/bind-props/bind-children.js.map

@@ -1 +1 @@
-{"version":3,"file":"bind-children.js","names":[],"sources":["../../../src/components/bind-props/bind-children.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { children as resolveChildren, createRenderEffect } from \"solid-js\";\nimport type { JSX } from \"solid-js\";\n\nexport class InvalidChildTypeError extends Error {\n  constructor(cause: Error) {\n    super(\n      \"Invalid pixi-solid child type. Children must be pixi-solid or PixiJS element. Did you accidentally pass an invalid child to a pixi-solid parent?\",\n      { cause },\n    );\n    this.name = \"InvalidChildTypeError\";\n  }\n}\n\nexport const bindChildrenToContainer = (parent: Pixi.Container, children?: JSX.Element): void => {\n  const resolvedChildren = resolveChildren(() => children);\n\n  const canAddChild = \"addChildAt\" in parent;\n\n  if (!canAddChild) {\n    throw new Error(\"Parent does not support children.\");\n  }\n\n  createRenderEffect(() => {\n    const nextChildren = resolvedChildren.toArray().filter(Boolean) as unknown as Pixi.Container[];\n\n    try {\n      for (let i = 0; i < nextChildren.length; i += 1) {\n        parent.addChildAt(nextChildren[i], i);\n      }\n    } catch (error) {\n      if (error instanceof Error) {\n        console.error(\"Invalid children\", nextChildren);\n        throw new InvalidChildTypeError(error);\n      } else {\n        throw error;\n      }\n    }\n  });\n};\n\nexport const bindChildrenToRenderLayer = (\n  parent: Pixi.RenderLayer,\n  children?: JSX.Element,\n): void => {\n  const resolvedChildren = resolveChildren(() => children);\n\n  createRenderEffect((prevChildren: Pixi.Container[] | undefined) => {\n    const nextChildren = resolvedChildren.toArray().filter(Boolean) as unknown as Pixi.Container[];\n\n    try {\n      if (prevChildren) {\n        for (let i = 0; i < prevChildren.length; i += 1) {\n          const child = prevChildren[i];\n          if (nextChildren.includes(child)) continue;\n\n          parent.detach(child);\n        }\n      }\n\n      for (let i = 0; i < nextChildren.length; i += 1) {\n        parent.attach(nextChildren[i]);\n      }\n    } catch (error) {\n      if (error instanceof Error) {\n        console.error(\"Invalid children\", nextChildren);\n        throw new InvalidChildTypeError(error);\n      } else {\n        throw error;\n      }\n    }\n\n    return nextChildren;\n  });\n};\n"],"mappings":";;AAIA,IAAa,wBAAb,cAA2C,MAAM;CAC/C,YAAY,OAAc;AACxB,QACE,oJACA,EAAE,OAAO,CACV;AACD,OAAK,OAAO;;;AAIhB,IAAa,2BAA2B,QAAwB,eAAiC;CAC/F,MAAM,mBAAmB,eAAsB,WAAS;AAIxD,KAAI,EAFgB,gBAAgB,QAGlC,OAAM,IAAI,MAAM,oCAAoC;AAGtD,0BAAyB;EACvB,MAAM,eAAe,iBAAiB,SAAS,CAAC,OAAO,QAAQ;AAE/D,MAAI;AACF,QAAK,IAAI,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,EAC5C,QAAO,WAAW,aAAa,IAAI,EAAE;WAEhC,OAAO;AACd,OAAI,iBAAiB,OAAO;AAC1B,YAAQ,MAAM,oBAAoB,aAAa;AAC/C,UAAM,IAAI,sBAAsB,MAAM;SAEtC,OAAM;;GAGV;;AAGJ,IAAa,6BACX,QACA,eACS;CACT,MAAM,mBAAmB,eAAsB,WAAS;AAExD,qBAAoB,iBAA+C;EACjE,MAAM,eAAe,iBAAiB,SAAS,CAAC,OAAO,QAAQ;AAE/D,MAAI;AACF,OAAI,aACF,MAAK,IAAI,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;IAC/C,MAAM,QAAQ,aAAa;AAC3B,QAAI,aAAa,SAAS,MAAM,CAAE;AAElC,WAAO,OAAO,MAAM;;AAIxB,QAAK,IAAI,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,EAC5C,QAAO,OAAO,aAAa,GAAG;WAEzB,OAAO;AACd,OAAI,iBAAiB,OAAO;AAC1B,YAAQ,MAAM,oBAAoB,aAAa;AAC/C,UAAM,IAAI,sBAAsB,MAAM;SAEtC,OAAM;;AAIV,SAAO;GACP"}
+{"version":3,"file":"bind-children.js","names":[],"sources":["../../../src/components/bind-props/bind-children.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { children as resolveChildren, createRenderEffect } from \"solid-js\";\nimport type { JSX } from \"solid-js\";\n\nexport class InvalidChildTypeError extends Error {\n  constructor(cause: Error) {\n    super(\n      \"Invalid pixi-solid child type. Children must be pixi-solid or PixiJS element. Did you accidentally pass an invalid child to a pixi-solid parent?\",\n      { cause },\n    );\n    this.name = \"InvalidChildTypeError\";\n  }\n}\n\nexport const bindChildrenToContainer = (parent: Pixi.Container, children?: JSX.Element): void => {\n  const resolvedChildren = resolveChildren(() => children);\n\n  const canAddChild = \"addChildAt\" in parent;\n\n  if (!canAddChild) {\n    throw new Error(\"Parent does not support children.\");\n  }\n\n  createRenderEffect(() => {\n    const nextChildren = resolvedChildren.toArray().filter(Boolean) as unknown as Pixi.Container[];\n\n    try {\n      for (let i = 0; i < nextChildren.length; i += 1) {\n        parent.addChildAt(nextChildren[i], i);\n      }\n    } catch (error) {\n      if (error instanceof Error) {\n        console.error(\"Invalid children\", nextChildren);\n        throw new InvalidChildTypeError(error);\n      } else {\n        throw error;\n      }\n    }\n  });\n};\n\nexport const bindChildrenToRenderLayer = (\n  parent: Pixi.RenderLayer,\n  children?: JSX.Element,\n): void => {\n  const resolvedChildren = resolveChildren(() => children);\n\n  createRenderEffect((prevChildren: Pixi.Container[] | undefined) => {\n    const nextChildren = resolvedChildren.toArray().filter(Boolean) as unknown as Pixi.Container[];\n\n    try {\n      if (prevChildren) {\n        for (let i = 0; i < prevChildren.length; i += 1) {\n          const child = prevChildren[i];\n          if (nextChildren.includes(child)) continue;\n\n          parent.detach(child);\n        }\n      }\n\n      for (let i = 0; i < nextChildren.length; i += 1) {\n        parent.attach(nextChildren[i]);\n      }\n    } catch (error) {\n      if (error instanceof Error) {\n        console.error(\"Invalid children\", nextChildren);\n        throw new InvalidChildTypeError(error);\n      } else {\n        throw error;\n      }\n    }\n\n    return nextChildren;\n  });\n};\n"],"mappings":";;AAIA,IAAa,wBAAb,cAA2C,MAAM;CAC/C,YAAY,OAAc;EACxB,MACE,oJACA,EAAE,OAAO,CACV;EACD,KAAK,OAAO;;;AAIhB,IAAa,2BAA2B,QAAwB,eAAiC;CAC/F,MAAM,mBAAmB,eAAsB,WAAS;CAIxD,IAAI,EAFgB,gBAAgB,SAGlC,MAAM,IAAI,MAAM,oCAAoC;CAGtD,yBAAyB;EACvB,MAAM,eAAe,iBAAiB,SAAS,CAAC,OAAO,QAAQ;EAE/D,IAAI;GACF,KAAK,IAAI,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAC5C,OAAO,WAAW,aAAa,IAAI,EAAE;WAEhC,OAAO;GACd,IAAI,iBAAiB,OAAO;IAC1B,QAAQ,MAAM,oBAAoB,aAAa;IAC/C,MAAM,IAAI,sBAAsB,MAAM;UAEtC,MAAM;;GAGV;;AAGJ,IAAa,6BACX,QACA,eACS;CACT,MAAM,mBAAmB,eAAsB,WAAS;CAExD,oBAAoB,iBAA+C;EACjE,MAAM,eAAe,iBAAiB,SAAS,CAAC,OAAO,QAAQ;EAE/D,IAAI;GACF,IAAI,cACF,KAAK,IAAI,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;IAC/C,MAAM,QAAQ,aAAa;IAC3B,IAAI,aAAa,SAAS,MAAM,EAAE;IAElC,OAAO,OAAO,MAAM;;GAIxB,KAAK,IAAI,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAC5C,OAAO,OAAO,aAAa,GAAG;WAEzB,OAAO;GACd,IAAI,iBAAiB,OAAO;IAC1B,QAAQ,MAAM,oBAAoB,aAAa;IAC/C,MAAM,IAAI,sBAAsB,MAAM;UAEtC,MAAM;;EAIV,OAAO;GACP"}

package/dist/components/bind-props/bind-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"bind-props.js","names":[],"sources":["../../../src/components/bind-props/bind-props.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { createRenderEffect, onCleanup, on } from \"solid-js\";\n\nimport type { ContainerProps } from \"../component-factories\";\n\nimport { bindChildrenToContainer, bindChildrenToRenderLayer } from \"./bind-children\";\nimport { isEventProperty } from \"./is-event-property\";\nimport {\n  isPointProperty,\n  setPointProperty,\n  isPointAxisProperty,\n  setPointAxisProperty,\n} from \"./set-point-property\";\n\n/**\n * Binds the props to a Pixi instance with subscriptions to maintain reactivity.\n *\n * This is specifically for the runtime props that can't be set at initialisation. These props will be set on the Pixi instance immediately after it is created but before rendering.\n *\n * @param instance The Pixi instance we want to bind the props to.\n * @param props The props object.\n */\nexport const bindRuntimeProps = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends ContainerProps<InstanceType>,\n>(\n  instance: InstanceType,\n  props: OptionsType,\n): void => {\n  createRenderEffect(() => {\n    for (const key in props) {\n      if (key === \"as\") continue;\n\n      if (key === \"ref\") {\n        (props[key] as unknown as (arg: any) => void)(instance);\n\n        continue;\n      } else if (key === \"children\") {\n        if (\"attach\" in instance && \"detach\" in instance) {\n          bindChildrenToRenderLayer(instance as unknown as Pixi.RenderLayer, props.children);\n        } else {\n          bindChildrenToContainer(instance, props.children);\n        }\n\n        continue;\n      }\n\n      if (isPointProperty(key)) {\n        createRenderEffect(() => setPointProperty(instance, key, props[key]));\n\n        continue;\n      }\n\n      if (isPointAxisProperty(key)) {\n        createRenderEffect(() => setPointAxisProperty(instance, key, props[key]));\n        continue;\n      }\n\n      if (isEventProperty(key)) {\n        createRenderEffect(() => {\n          const eventName = key.slice(2);\n          const eventHandler = props[key];\n\n          if (eventHandler) {\n            instance.on(eventName, eventHandler as any);\n            onCleanup(() => {\n              instance.off(eventName, eventHandler as any);\n            });\n          }\n        });\n\n        continue;\n      }\n\n      if (key in instance) {\n        createRenderEffect(() => ((instance as any)[key] = props[key]));\n        continue;\n      }\n    }\n  });\n};\n\n/**\n * Binds the props to a Pixi instance with subscriptions to maintain reactivity.\n *\n * This is specifically for the initialisation props that can be set at the time of instance creation. These props will be passed into the Pixi class during instantiation but won't be set on the instance until they are changed again. This is to avoid side effects that can be caused by setting certain props after the instance is created, such as the AnimatedSprite's `textures` prop which stops the animation if it was already instantiated with `autoplay: true`.\n *\n * @param instance The Pixi instance we want to bind the props to.\n * @param props The props object.\n */\nexport const bindInitialisationProps = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends ContainerProps<InstanceType>,\n>(\n  instance: InstanceType,\n  props: OptionsType,\n): void => {\n  createRenderEffect<boolean>((defer) => {\n    for (const key in props) {\n      if (isPointProperty(key)) {\n        createRenderEffect(\n          on(\n            () => props[key],\n            () => {\n              return setPointProperty(instance, key, props[key]);\n            },\n            { defer },\n          ),\n        );\n\n        continue;\n      }\n\n      if (key in instance) {\n        createRenderEffect(\n          on(\n            () => props[key],\n            () => {\n              (instance as any)[key] = props[key];\n            },\n            { defer },\n          ),\n        );\n      }\n    }\n\n    return false;\n  }, true);\n\n  /**\n   * Do not throw an error here for invalid prop names because there are some initialisation props that are not available as public properties. We want to allow users to pass these props but not try to set them on the instance.\n   */\n};\n"],"mappings":";;;;;;;;;;;;;AAsBA,IAAa,oBAIX,UACA,UACS;AACT,0BAAyB;AACvB,OAAK,MAAM,OAAO,OAAO;AACvB,OAAI,QAAQ,KAAM;AAElB,OAAI,QAAQ,OAAO;AAChB,UAAM,KAAuC,SAAS;AAEvD;cACS,QAAQ,YAAY;AAC7B,QAAI,YAAY,YAAY,YAAY,SACtC,2BAA0B,UAAyC,MAAM,SAAS;QAElF,yBAAwB,UAAU,MAAM,SAAS;AAGnD;;AAGF,OAAI,gBAAgB,IAAI,EAAE;AACxB,6BAAyB,iBAAiB,UAAU,KAAK,MAAM,KAAK,CAAC;AAErE;;AAGF,OAAI,oBAAoB,IAAI,EAAE;AAC5B,6BAAyB,qBAAqB,UAAU,KAAK,MAAM,KAAK,CAAC;AACzE;;AAGF,OAAI,gBAAgB,IAAI,EAAE;AACxB,6BAAyB;KACvB,MAAM,YAAY,IAAI,MAAM,EAAE;KAC9B,MAAM,eAAe,MAAM;AAE3B,SAAI,cAAc;AAChB,eAAS,GAAG,WAAW,aAAoB;AAC3C,sBAAgB;AACd,gBAAS,IAAI,WAAW,aAAoB;QAC5C;;MAEJ;AAEF;;AAGF,OAAI,OAAO,UAAU;AACnB,6BAA0B,SAAkB,OAAO,MAAM,KAAM;AAC/D;;;GAGJ;;;;;;;;;;AAWJ,IAAa,2BAIX,UACA,UACS;AACT,qBAA6B,UAAU;AACrC,OAAK,MAAM,OAAO,OAAO;AACvB,OAAI,gBAAgB,IAAI,EAAE;AACxB,uBACE,SACQ,MAAM,YACN;AACJ,YAAO,iBAAiB,UAAU,KAAK,MAAM,KAAK;OAEpD,EAAE,OAAO,CACV,CACF;AAED;;AAGF,OAAI,OAAO,SACT,oBACE,SACQ,MAAM,YACN;AACH,aAAiB,OAAO,MAAM;MAEjC,EAAE,OAAO,CACV,CACF;;AAIL,SAAO;IACN,KAAK"}
+{"version":3,"file":"bind-props.js","names":[],"sources":["../../../src/components/bind-props/bind-props.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { createRenderEffect, onCleanup, on } from \"solid-js\";\n\nimport type { ContainerProps } from \"../component-factories\";\n\nimport { bindChildrenToContainer, bindChildrenToRenderLayer } from \"./bind-children\";\nimport { isEventProperty } from \"./is-event-property\";\nimport {\n  isPointProperty,\n  setPointProperty,\n  isPointAxisProperty,\n  setPointAxisProperty,\n} from \"./set-point-property\";\n\n/**\n * Binds the props to a Pixi instance with subscriptions to maintain reactivity.\n *\n * This is specifically for the runtime props that can't be set at initialisation. These props will be set on the Pixi instance immediately after it is created but before rendering.\n *\n * @param instance The Pixi instance we want to bind the props to.\n * @param props The props object.\n */\nexport const bindRuntimeProps = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends ContainerProps<InstanceType>,\n>(\n  instance: InstanceType,\n  props: OptionsType,\n): void => {\n  createRenderEffect(() => {\n    for (const key in props) {\n      if (key === \"as\") continue;\n\n      if (key === \"ref\") {\n        (props[key] as unknown as (arg: any) => void)(instance);\n\n        continue;\n      } else if (key === \"children\") {\n        if (\"attach\" in instance && \"detach\" in instance) {\n          bindChildrenToRenderLayer(instance as unknown as Pixi.RenderLayer, props.children);\n        } else {\n          bindChildrenToContainer(instance, props.children);\n        }\n\n        continue;\n      }\n\n      if (isPointProperty(key)) {\n        createRenderEffect(() => setPointProperty(instance, key, props[key]));\n\n        continue;\n      }\n\n      if (isPointAxisProperty(key)) {\n        createRenderEffect(() => setPointAxisProperty(instance, key, props[key]));\n        continue;\n      }\n\n      if (isEventProperty(key)) {\n        createRenderEffect(() => {\n          const eventName = key.slice(2);\n          const eventHandler = props[key];\n\n          if (eventHandler) {\n            instance.on(eventName, eventHandler as any);\n            onCleanup(() => {\n              instance.off(eventName, eventHandler as any);\n            });\n          }\n        });\n\n        continue;\n      }\n\n      if (key in instance) {\n        createRenderEffect(() => ((instance as any)[key] = props[key]));\n        continue;\n      }\n    }\n  });\n};\n\n/**\n * Binds the props to a Pixi instance with subscriptions to maintain reactivity.\n *\n * This is specifically for the initialisation props that can be set at the time of instance creation. These props will be passed into the Pixi class during instantiation but won't be set on the instance until they are changed again. This is to avoid side effects that can be caused by setting certain props after the instance is created, such as the AnimatedSprite's `textures` prop which stops the animation if it was already instantiated with `autoplay: true`.\n *\n * @param instance The Pixi instance we want to bind the props to.\n * @param props The props object.\n */\nexport const bindInitialisationProps = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends ContainerProps<InstanceType>,\n>(\n  instance: InstanceType,\n  props: OptionsType,\n): void => {\n  createRenderEffect<boolean>((defer) => {\n    for (const key in props) {\n      if (isPointProperty(key)) {\n        createRenderEffect(\n          on(\n            () => props[key],\n            () => {\n              return setPointProperty(instance, key, props[key]);\n            },\n            { defer },\n          ),\n        );\n\n        continue;\n      }\n\n      if (key in instance) {\n        createRenderEffect(\n          on(\n            () => props[key],\n            () => {\n              (instance as any)[key] = props[key];\n            },\n            { defer },\n          ),\n        );\n      }\n    }\n\n    return false;\n  }, true);\n\n  /**\n   * Do not throw an error here for invalid prop names because there are some initialisation props that are not available as public properties. We want to allow users to pass these props but not try to set them on the instance.\n   */\n};\n"],"mappings":";;;;;;;;;;;;;AAsBA,IAAa,oBAIX,UACA,UACS;CACT,yBAAyB;EACvB,KAAK,MAAM,OAAO,OAAO;GACvB,IAAI,QAAQ,MAAM;GAElB,IAAI,QAAQ,OAAO;IACjB,MAAO,KAAuC,SAAS;IAEvD;UACK,IAAI,QAAQ,YAAY;IAC7B,IAAI,YAAY,YAAY,YAAY,UACtC,0BAA0B,UAAyC,MAAM,SAAS;SAElF,wBAAwB,UAAU,MAAM,SAAS;IAGnD;;GAGF,IAAI,gBAAgB,IAAI,EAAE;IACxB,yBAAyB,iBAAiB,UAAU,KAAK,MAAM,KAAK,CAAC;IAErE;;GAGF,IAAI,oBAAoB,IAAI,EAAE;IAC5B,yBAAyB,qBAAqB,UAAU,KAAK,MAAM,KAAK,CAAC;IACzE;;GAGF,IAAI,gBAAgB,IAAI,EAAE;IACxB,yBAAyB;KACvB,MAAM,YAAY,IAAI,MAAM,EAAE;KAC9B,MAAM,eAAe,MAAM;KAE3B,IAAI,cAAc;MAChB,SAAS,GAAG,WAAW,aAAoB;MAC3C,gBAAgB;OACd,SAAS,IAAI,WAAW,aAAoB;QAC5C;;MAEJ;IAEF;;GAGF,IAAI,OAAO,UAAU;IACnB,yBAA0B,SAAkB,OAAO,MAAM,KAAM;IAC/D;;;GAGJ;;;;;;;;;;AAWJ,IAAa,2BAIX,UACA,UACS;CACT,oBAA6B,UAAU;EACrC,KAAK,MAAM,OAAO,OAAO;GACvB,IAAI,gBAAgB,IAAI,EAAE;IACxB,mBACE,SACQ,MAAM,YACN;KACJ,OAAO,iBAAiB,UAAU,KAAK,MAAM,KAAK;OAEpD,EAAE,OAAO,CACV,CACF;IAED;;GAGF,IAAI,OAAO,UACT,mBACE,SACQ,MAAM,YACN;IACJ,SAAkB,OAAO,MAAM;MAEjC,EAAE,OAAO,CACV,CACF;;EAIL,OAAO;IACN,KAAK"}

package/dist/components/bind-props/point-property-names.js.map

@@ -1 +1 @@
-{"version":3,"file":"point-property-names.js","names":[],"sources":["../../../src/components/bind-props/point-property-names.ts"],"sourcesContent":["// Common point properties available on all Container-based components\nexport const COMMON_POINT_PROP_NAMES = [\"position\", \"scale\", \"pivot\", \"skew\"] as const;\n\nexport type CommonPointPropName = (typeof COMMON_POINT_PROP_NAMES)[number];\n\n// Anchor properties only available on Sprite-like components (Sprite, Text, etc.)\nexport const ANCHOR_POINT_PROP_NAMES = [\"anchor\"] as const;\n\nexport type AnchorPointPropName = (typeof ANCHOR_POINT_PROP_NAMES)[number];\n\n// Tiling properties only available on TilingSprite\nexport const TILING_POINT_PROP_NAMES = [\"tilePosition\", \"tileScale\"] as const;\n\nexport type TilingPointPropName = (typeof TILING_POINT_PROP_NAMES)[number];\n\n// All point properties (for runtime checking)\nexport const POINT_PROP_NAMES = [\n  ...COMMON_POINT_PROP_NAMES,\n  ...ANCHOR_POINT_PROP_NAMES,\n  ...TILING_POINT_PROP_NAMES,\n] as const;\n\nexport type PointPropName = (typeof POINT_PROP_NAMES)[number];\n\nexport const POINT_PROP_NAMES_SET: Set<string> = new Set(POINT_PROP_NAMES);\n\n// Common axis properties available on all Container-based components\nexport const COMMON_POINT_PROP_AXIS_NAMES = [\n  \"positionX\",\n  \"positionY\",\n  \"scaleX\",\n  \"scaleY\",\n  \"pivotX\",\n  \"pivotY\",\n  \"skewX\",\n  \"skewY\",\n] as const;\n\nexport type CommonPointAxisPropName = (typeof COMMON_POINT_PROP_AXIS_NAMES)[number];\n\n// Anchor axis properties only available on Sprite-like components\nexport const ANCHOR_POINT_PROP_AXIS_NAMES = [\"anchorX\", \"anchorY\"] as const;\n\nexport type AnchorPointAxisPropName = (typeof ANCHOR_POINT_PROP_AXIS_NAMES)[number];\n\n// Tiling axis properties only available on TilingSprite\nexport const TILING_POINT_PROP_AXIS_NAMES = [\n  \"tilePositionX\",\n  \"tilePositionY\",\n  \"tileScaleX\",\n  \"tileScaleY\",\n] as const;\n\nexport type TilingPointAxisPropName = (typeof TILING_POINT_PROP_AXIS_NAMES)[number];\n\n// All axis properties (for runtime checking)\nexport const POINT_PROP_AXIS_NAMES = [\n  ...COMMON_POINT_PROP_AXIS_NAMES,\n  ...ANCHOR_POINT_PROP_AXIS_NAMES,\n  ...TILING_POINT_PROP_AXIS_NAMES,\n] as const;\n\nexport type PointAxisPropName = (typeof POINT_PROP_AXIS_NAMES)[number];\n\nexport const POINT_PROP_AXIS_NAMES_SET: Set<string> = new Set(POINT_PROP_AXIS_NAMES);\n\nexport const ALL_VALID_PROP_NAMES_SET: Set<string> = new Set([\n  ...POINT_PROP_NAMES_SET,\n  ...POINT_PROP_AXIS_NAMES_SET,\n]);\n\nexport const POINT_PROP_AXIS_MAP = POINT_PROP_AXIS_NAMES.reduce((map, name) => {\n  const axisName = name[name.length - 1].toLowerCase() as \"x\" | \"y\";\n  const propertyName = name.slice(0, -1);\n  map.set(name, { propertyName, axisName });\n  return map;\n}, new Map<string, { propertyName: string; axisName: \"x\" | \"y\" }>());\n"],"mappings":";AACA,IAAa,0BAA0B;CAAC;CAAY;CAAS;CAAS;CAAO;AAK7E,IAAa,0BAA0B,CAAC,SAAS;AAKjD,IAAa,0BAA0B,CAAC,gBAAgB,YAAY;AAKpE,IAAa,mBAAmB;CAC9B,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAID,IAAa,uBAAoC,IAAI,IAAI,iBAAiB;AAG1E,IAAa,+BAA+B;CAC1C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAKD,IAAa,+BAA+B,CAAC,WAAW,UAAU;AAKlE,IAAa,+BAA+B;CAC1C;CACA;CACA;CACA;CACD;AAKD,IAAa,wBAAwB;CACnC,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAID,IAAa,4BAAyC,IAAI,IAAI,sBAAsB;AAE/B,IAAI,IAAI,CAC3D,GAAG,sBACH,GAAG,0BACJ,CAAC;AAEF,IAAa,sBAAsB,sBAAsB,QAAQ,KAAK,SAAS;CAC7E,MAAM,WAAW,KAAK,KAAK,SAAS,GAAG,aAAa;CACpD,MAAM,eAAe,KAAK,MAAM,GAAG,GAAG;AACtC,KAAI,IAAI,MAAM;EAAE;EAAc;EAAU,CAAC;AACzC,QAAO;mBACN,IAAI,KAA4D,CAAC"}
+{"version":3,"file":"point-property-names.js","names":[],"sources":["../../../src/components/bind-props/point-property-names.ts"],"sourcesContent":["// Common point properties available on all Container-based components\nexport const COMMON_POINT_PROP_NAMES = [\"position\", \"scale\", \"pivot\", \"skew\"] as const;\n\nexport type CommonPointPropName = (typeof COMMON_POINT_PROP_NAMES)[number];\n\n// Anchor properties only available on Sprite-like components (Sprite, Text, etc.)\nexport const ANCHOR_POINT_PROP_NAMES = [\"anchor\"] as const;\n\nexport type AnchorPointPropName = (typeof ANCHOR_POINT_PROP_NAMES)[number];\n\n// Tiling properties only available on TilingSprite\nexport const TILING_POINT_PROP_NAMES = [\"tilePosition\", \"tileScale\"] as const;\n\nexport type TilingPointPropName = (typeof TILING_POINT_PROP_NAMES)[number];\n\n// All point properties (for runtime checking)\nexport const POINT_PROP_NAMES = [\n  ...COMMON_POINT_PROP_NAMES,\n  ...ANCHOR_POINT_PROP_NAMES,\n  ...TILING_POINT_PROP_NAMES,\n] as const;\n\nexport type PointPropName = (typeof POINT_PROP_NAMES)[number];\n\nexport const POINT_PROP_NAMES_SET: Set<string> = new Set(POINT_PROP_NAMES);\n\n// Common axis properties available on all Container-based components\nexport const COMMON_POINT_PROP_AXIS_NAMES = [\n  \"positionX\",\n  \"positionY\",\n  \"scaleX\",\n  \"scaleY\",\n  \"pivotX\",\n  \"pivotY\",\n  \"skewX\",\n  \"skewY\",\n] as const;\n\nexport type CommonPointAxisPropName = (typeof COMMON_POINT_PROP_AXIS_NAMES)[number];\n\n// Anchor axis properties only available on Sprite-like components\nexport const ANCHOR_POINT_PROP_AXIS_NAMES = [\"anchorX\", \"anchorY\"] as const;\n\nexport type AnchorPointAxisPropName = (typeof ANCHOR_POINT_PROP_AXIS_NAMES)[number];\n\n// Tiling axis properties only available on TilingSprite\nexport const TILING_POINT_PROP_AXIS_NAMES = [\n  \"tilePositionX\",\n  \"tilePositionY\",\n  \"tileScaleX\",\n  \"tileScaleY\",\n] as const;\n\nexport type TilingPointAxisPropName = (typeof TILING_POINT_PROP_AXIS_NAMES)[number];\n\n// All axis properties (for runtime checking)\nexport const POINT_PROP_AXIS_NAMES = [\n  ...COMMON_POINT_PROP_AXIS_NAMES,\n  ...ANCHOR_POINT_PROP_AXIS_NAMES,\n  ...TILING_POINT_PROP_AXIS_NAMES,\n] as const;\n\nexport type PointAxisPropName = (typeof POINT_PROP_AXIS_NAMES)[number];\n\nexport const POINT_PROP_AXIS_NAMES_SET: Set<string> = new Set(POINT_PROP_AXIS_NAMES);\n\nexport const ALL_VALID_PROP_NAMES_SET: Set<string> = new Set([\n  ...POINT_PROP_NAMES_SET,\n  ...POINT_PROP_AXIS_NAMES_SET,\n]);\n\nexport const POINT_PROP_AXIS_MAP = POINT_PROP_AXIS_NAMES.reduce((map, name) => {\n  const axisName = name[name.length - 1].toLowerCase() as \"x\" | \"y\";\n  const propertyName = name.slice(0, -1);\n  map.set(name, { propertyName, axisName });\n  return map;\n}, new Map<string, { propertyName: string; axisName: \"x\" | \"y\" }>());\n"],"mappings":";AACA,IAAa,0BAA0B;CAAC;CAAY;CAAS;CAAS;CAAO;AAK7E,IAAa,0BAA0B,CAAC,SAAS;AAKjD,IAAa,0BAA0B,CAAC,gBAAgB,YAAY;AAKpE,IAAa,mBAAmB;CAC9B,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAID,IAAa,uBAAoC,IAAI,IAAI,iBAAiB;AAG1E,IAAa,+BAA+B;CAC1C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAKD,IAAa,+BAA+B,CAAC,WAAW,UAAU;AAKlE,IAAa,+BAA+B;CAC1C;CACA;CACA;CACA;CACD;AAKD,IAAa,wBAAwB;CACnC,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAID,IAAa,4BAAyC,IAAI,IAAI,sBAAsB;AAE/B,IAAI,IAAI,CAC3D,GAAG,sBACH,GAAG,0BACJ,CAAC;AAEF,IAAa,sBAAsB,sBAAsB,QAAQ,KAAK,SAAS;CAC7E,MAAM,WAAW,KAAK,KAAK,SAAS,GAAG,aAAa;CACpD,MAAM,eAAe,KAAK,MAAM,GAAG,GAAG;CACtC,IAAI,IAAI,MAAM;EAAE;EAAc;EAAU,CAAC;CACzC,OAAO;mBACN,IAAI,KAA4D,CAAC"}

package/dist/components/bind-props/set-point-property.js.map

@@ -1 +1 @@
-{"version":3,"file":"set-point-property.js","names":[],"sources":["../../../src/components/bind-props/set-point-property.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\n\nimport {\n  POINT_PROP_NAMES_SET,\n  POINT_PROP_AXIS_MAP,\n  POINT_PROP_AXIS_NAMES_SET,\n} from \"./point-property-names\";\nimport type { PointAxisPropName, PointPropName } from \"./point-property-names\";\n\nexport const isPointProperty = (propName: string): propName is PointPropName =>\n  POINT_PROP_NAMES_SET.has(propName);\n\nexport const setPointProperty = <T>(node: Pixi.Container, name: PointPropName, value: T): void => {\n  if (typeof value === \"number\") {\n    (node as any)[name].set(value);\n    return;\n  }\n\n  (node as any)[name].set((value as any).x, (value as any).y);\n};\n\nexport const isPointAxisProperty = (propName: string): propName is PointAxisPropName =>\n  POINT_PROP_AXIS_NAMES_SET.has(propName);\n\nexport const setPointAxisProperty = <T>(\n  node: Pixi.Container,\n  name: PointAxisPropName,\n  value: T,\n): void => {\n  const axisInfo = POINT_PROP_AXIS_MAP.get(name);\n  if (axisInfo) {\n    (node as any)[axisInfo.propertyName][axisInfo.axisName] = value;\n  }\n};\n"],"mappings":";;AASA,IAAa,mBAAmB,aAC9B,qBAAqB,IAAI,SAAS;AAEpC,IAAa,oBAAuB,MAAsB,MAAqB,UAAmB;AAChG,KAAI,OAAO,UAAU,UAAU;AAC5B,OAAa,MAAM,IAAI,MAAM;AAC9B;;AAGD,MAAa,MAAM,IAAK,MAAc,GAAI,MAAc,EAAE;;AAG7D,IAAa,uBAAuB,aAClC,0BAA0B,IAAI,SAAS;AAEzC,IAAa,wBACX,MACA,MACA,UACS;CACT,MAAM,WAAW,oBAAoB,IAAI,KAAK;AAC9C,KAAI,SACD,MAAa,SAAS,cAAc,SAAS,YAAY"}
+{"version":3,"file":"set-point-property.js","names":[],"sources":["../../../src/components/bind-props/set-point-property.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\n\nimport {\n  POINT_PROP_NAMES_SET,\n  POINT_PROP_AXIS_MAP,\n  POINT_PROP_AXIS_NAMES_SET,\n} from \"./point-property-names\";\nimport type { PointAxisPropName, PointPropName } from \"./point-property-names\";\n\nexport const isPointProperty = (propName: string): propName is PointPropName =>\n  POINT_PROP_NAMES_SET.has(propName);\n\nexport const setPointProperty = <T>(node: Pixi.Container, name: PointPropName, value: T): void => {\n  if (typeof value === \"number\") {\n    (node as any)[name].set(value);\n    return;\n  }\n\n  (node as any)[name].set((value as any).x, (value as any).y);\n};\n\nexport const isPointAxisProperty = (propName: string): propName is PointAxisPropName =>\n  POINT_PROP_AXIS_NAMES_SET.has(propName);\n\nexport const setPointAxisProperty = <T>(\n  node: Pixi.Container,\n  name: PointAxisPropName,\n  value: T,\n): void => {\n  const axisInfo = POINT_PROP_AXIS_MAP.get(name);\n  if (axisInfo) {\n    (node as any)[axisInfo.propertyName][axisInfo.axisName] = value;\n  }\n};\n"],"mappings":";;AASA,IAAa,mBAAmB,aAC9B,qBAAqB,IAAI,SAAS;AAEpC,IAAa,oBAAuB,MAAsB,MAAqB,UAAmB;CAChG,IAAI,OAAO,UAAU,UAAU;EAC7B,KAAc,MAAM,IAAI,MAAM;EAC9B;;CAGF,KAAc,MAAM,IAAK,MAAc,GAAI,MAAc,EAAE;;AAG7D,IAAa,uBAAuB,aAClC,0BAA0B,IAAI,SAAS;AAEzC,IAAa,wBACX,MACA,MACA,UACS;CACT,MAAM,WAAW,oBAAoB,IAAI,KAAK;CAC9C,IAAI,UACF,KAAc,SAAS,cAAc,SAAS,YAAY"}

package/dist/components/component-factories.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-factories.js","names":[],"sources":["../../src/components/component-factories.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { createRenderEffect, on, splitProps, onCleanup } from \"solid-js\";\n\nimport { getTicker } from \"../pixi-application\";\n\nimport { bindInitialisationProps, bindRuntimeProps } from \"./bind-props\";\nimport type { PixiSolidEventHandlerMap } from \"./bind-props/event-names\";\nimport { PIXI_SOLID_EVENT_HANDLER_NAMES } from \"./bind-props/event-names\";\nimport type {\n  CommonPointAxisPropName,\n  AnchorPointAxisPropName,\n  TilingPointAxisPropName,\n} from \"./bind-props/point-property-names\";\nimport {\n  COMMON_POINT_PROP_AXIS_NAMES,\n  ANCHOR_POINT_PROP_AXIS_NAMES,\n  TILING_POINT_PROP_AXIS_NAMES,\n} from \"./bind-props/point-property-names\";\n\n/**\n * Common point axis properties available on all Container-based components\n */\nexport type CommonPointAxisProps = Partial<Record<CommonPointAxisPropName, number>>;\n\n/**\n * Anchor point axis properties available on Sprite-like components\n */\nexport type AnchorPointAxisProps = Partial<Record<AnchorPointAxisPropName, number>>;\n\n/**\n * Tiling point axis properties available on TilingSprite\n */\nexport type TilingPointAxisProps = Partial<Record<TilingPointAxisPropName, number>>;\n\n/**\n * This is a utility type useful for extending the props of custom components to allow props to be passed through to the underlying Pixi instance.\n *\n * If you don't require them all it's recommended to narrow the type by using Pick or Omit the props to only allow the ones you need.\n *\n * @example PixiComponentProps<Pixi.SpriteOptions>.\n */\nexport type PixiComponentProps<\n  ComponentOptions extends Pixi.ContainerOptions = Pixi.ContainerOptions,\n> = PixiSolidEventHandlerMap & CommonPointAxisProps & Omit<ComponentOptions, \"children\">;\n\ntype RefAsProps<Component> = {\n  ref?: Ref<Component>;\n  as?: Component;\n};\n\ntype PixiComponent<Props, Instance> = (props: Props) => Instance & JSX.Element;\n\n/**\n * Prop definition for basic Container components (position, scale, pivot, skew only)\n */\nexport type ContainerProps<Component> = PixiSolidEventHandlerMap &\n  CommonPointAxisProps &\n  RefAsProps<Component> & {\n    children?: JSX.Element;\n  };\n\n/**\n * Prop definition for components that cannot have children\n */\nexport type LeafProps<Component> = PixiSolidEventHandlerMap &\n  CommonPointAxisProps &\n  RefAsProps<Component>;\n\n/**\n * Prop definition for Sprite-like components (includes anchor properties)\n */\nexport type SpriteProps<Component> = PixiSolidEventHandlerMap &\n  CommonPointAxisProps &\n  AnchorPointAxisProps &\n  RefAsProps<Component>;\n\nexport type AnimatedSpriteProps<Component> = SpriteProps<Component> &\n  Pick<Pixi.AnimatedSpriteOptions, \"autoUpdate\">;\n\ntype AnimatedSpriteLike = Pixi.Container & {\n  autoUpdate: boolean;\n  update: (ticker: Pixi.Ticker) => void;\n};\n\n/**\n * Prop definition for TilingSprite (includes anchor and tiling properties)\n */\nexport type TilingSpriteProps<Component> = PixiSolidEventHandlerMap &\n  CommonPointAxisProps &\n  AnchorPointAxisProps &\n  TilingPointAxisProps &\n  RefAsProps<Component>;\n\n/**\n * Prop definition for filter components\n */\nexport type FilterProps<Component> = RefAsProps<Component>;\n\n// Keys that are specific to Solid components and not Pixi props\nexport const SOLID_PROP_KEYS = [\"ref\", \"as\", \"children\"] as const;\n\n// Combined keys for splitting props\nconst CONTAINER_RUNTIME_KEYS = [\n  ...SOLID_PROP_KEYS,\n  ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n  ...COMMON_POINT_PROP_AXIS_NAMES,\n] as const;\n\n// Sprite components don't accept \"children\" since they can't have children\nconst SPRITE_RUNTIME_KEYS = [\n  \"ref\",\n  \"as\",\n  ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n  ...COMMON_POINT_PROP_AXIS_NAMES,\n  ...ANCHOR_POINT_PROP_AXIS_NAMES,\n] as const;\n\nconst TILING_SPRITE_RUNTIME_KEYS = [\n  \"ref\",\n  \"as\",\n  ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n  ...COMMON_POINT_PROP_AXIS_NAMES,\n  ...ANCHOR_POINT_PROP_AXIS_NAMES,\n  ...TILING_POINT_PROP_AXIS_NAMES,\n] as const;\n\nexport const createContainerComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n): PixiComponent<Omit<OptionsType, \"children\"> & ContainerProps<InstanceType>, InstanceType> => {\n  return (props): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, CONTAINER_RUNTIME_KEYS);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    bindInitialisationProps(instance, initialisationProps);\n    bindRuntimeProps(instance, runtimeProps);\n\n    onCleanup(() => {\n      if (\"attach\" in instance) {\n        // Means it's a render layer so we don't want to destroy children as they are managed elsewhere in the tree.\n        instance.destroy({ children: false });\n      } else {\n        instance.destroy({ children: true });\n      }\n    });\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n\nexport const createLeafComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n): PixiComponent<Omit<OptionsType, \"children\"> & LeafProps<InstanceType>, InstanceType> => {\n  return (\n    props: Omit<OptionsType, \"children\"> & LeafProps<InstanceType>,\n  ): InstanceType & JSX.Element => {\n    return createContainerComponent<InstanceType, OptionsType>(PixiClass)(props);\n  };\n};\n\nexport const createSpriteComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n): PixiComponent<Omit<OptionsType, \"children\"> & SpriteProps<InstanceType>, InstanceType> => {\n  return (\n    props: Omit<OptionsType, \"children\"> & SpriteProps<InstanceType>,\n  ): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, SPRITE_RUNTIME_KEYS);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    bindInitialisationProps(instance, initialisationProps);\n    bindRuntimeProps(instance, runtimeProps);\n\n    onCleanup(() => {\n      instance.destroy({ children: true });\n    });\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n\nexport const createAnimatedSpriteComponent = <\n  InstanceType extends AnimatedSpriteLike,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n): PixiComponent<\n  Omit<OptionsType, \"children\"> & AnimatedSpriteProps<InstanceType>,\n  InstanceType\n> => {\n  return (\n    props: Omit<OptionsType, \"children\"> & AnimatedSpriteProps<InstanceType>,\n  ): InstanceType & JSX.Element => {\n    // Specifically separate `autoUpdate` as we handle it manually below.\n    const [runtimeProps, update, initialisationProps] = splitProps(props, SPRITE_RUNTIME_KEYS, [\n      \"autoUpdate\",\n    ]);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    // Set this to false to override Pixi's default shared ticker behaviour.\n    instance.autoUpdate = false;\n\n    createRenderEffect(\n      on(\n        () => update.autoUpdate,\n        (autoUpdate) => {\n          const updateInstance = (ticker: Pixi.Ticker) => {\n            instance.update(ticker);\n          };\n\n          if (autoUpdate !== false) {\n            const ticker = getTicker();\n            ticker.add(updateInstance);\n            onCleanup(() => {\n              ticker.remove(updateInstance);\n            });\n          }\n        },\n      ),\n    );\n\n    bindInitialisationProps(instance, initialisationProps);\n    bindRuntimeProps(instance, runtimeProps);\n\n    onCleanup(() => {\n      instance.destroy({ children: true });\n    });\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n\nexport const createTilingSpriteComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n): PixiComponent<Omit<OptionsType, \"children\"> & TilingSpriteProps<InstanceType>, InstanceType> => {\n  return (\n    props: Omit<OptionsType, \"children\"> & TilingSpriteProps<InstanceType>,\n  ): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, TILING_SPRITE_RUNTIME_KEYS);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    bindInitialisationProps(instance, initialisationProps);\n    bindRuntimeProps(instance, runtimeProps);\n\n    onCleanup(() => {\n      instance.destroy({ children: true });\n    });\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n\nexport const createFilterComponent = <InstanceType extends Pixi.Filter, OptionsType extends object>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n): PixiComponent<OptionsType & FilterProps<InstanceType>, InstanceType> => {\n  return (props: OptionsType & FilterProps<InstanceType>): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, [\"ref\", \"as\"]);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    for (const key in initialisationProps) {\n      if (key === \"as\") continue;\n\n      if (key === \"ref\") {\n        createRenderEffect(() => {\n          // Solid converts the ref prop to a callback function\n          (props[key] as unknown as (arg: any) => void)(instance);\n        });\n      } else if (key === \"children\") {\n        throw new Error(`Cannot set children on non-container instance.`);\n      } else {\n        createRenderEffect(\n          on(\n            () => props[key as keyof typeof initialisationProps],\n            () => {\n              (instance as any)[key] = initialisationProps[key];\n            },\n            { defer: true },\n          ),\n        );\n      }\n    }\n\n    for (const key in runtimeProps) {\n      if (key === \"as\") continue;\n\n      if (key === \"ref\") {\n        createRenderEffect(() => {\n          // Solid converts the ref prop to a callback function\n          (props[key] as unknown as (arg: any) => void)(instance);\n        });\n      }\n    }\n\n    onCleanup(() => {\n      instance.destroy();\n    });\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n"],"mappings":";;;;;AAuGA,IAAM,yBAAyB;CAC7B,GAAG;EAJ2B;EAAO;EAAM;EAIxC;CACH,GAAG;CACH,GAAG;CACJ;AAGD,IAAM,sBAAsB;CAC1B;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,IAAM,6BAA6B;CACjC;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,IAAa,4BAIX,cAC8F;AAC9F,SAAQ,UAAsC;EAC5C,MAAM,CAAC,cAAc,uBAAuB,WAAW,OAAO,uBAAuB;EAErF,MAAM,WAAW,MAAM,MAAM,IAAI,UAAU,oBAA2B;AAEtE,0BAAwB,UAAU,oBAAoB;AACtD,mBAAiB,UAAU,aAAa;AAExC,kBAAgB;AACd,OAAI,YAAY,SAEd,UAAS,QAAQ,EAAE,UAAU,OAAO,CAAC;OAErC,UAAS,QAAQ,EAAE,UAAU,MAAM,CAAC;IAEtC;AAEF,SAAO;;;AAIX,IAAa,uBAIX,cACyF;AACzF,SACE,UAC+B;AAC/B,SAAO,yBAAoD,UAAU,CAAC,MAAM;;;AAIhF,IAAa,yBAIX,cAC2F;AAC3F,SACE,UAC+B;EAC/B,MAAM,CAAC,cAAc,uBAAuB,WAAW,OAAO,oBAAoB;EAElF,MAAM,WAAW,MAAM,MAAM,IAAI,UAAU,oBAA2B;AAEtE,0BAAwB,UAAU,oBAAoB;AACtD,mBAAiB,UAAU,aAAa;AAExC,kBAAgB;AACd,YAAS,QAAQ,EAAE,UAAU,MAAM,CAAC;IACpC;AAEF,SAAO;;;AAIX,IAAa,iCAIX,cAIG;AACH,SACE,UAC+B;EAE/B,MAAM,CAAC,cAAc,QAAQ,uBAAuB,WAAW,OAAO,qBAAqB,CACzF,aACD,CAAC;EAEF,MAAM,WAAW,MAAM,MAAM,IAAI,UAAU,oBAA2B;AAGtE,WAAS,aAAa;AAEtB,qBACE,SACQ,OAAO,aACZ,eAAe;GACd,MAAM,kBAAkB,WAAwB;AAC9C,aAAS,OAAO,OAAO;;AAGzB,OAAI,eAAe,OAAO;IACxB,MAAM,SAAS,WAAW;AAC1B,WAAO,IAAI,eAAe;AAC1B,oBAAgB;AACd,YAAO,OAAO,eAAe;MAC7B;;IAGP,CACF;AAED,0BAAwB,UAAU,oBAAoB;AACtD,mBAAiB,UAAU,aAAa;AAExC,kBAAgB;AACd,YAAS,QAAQ,EAAE,UAAU,MAAM,CAAC;IACpC;AAEF,SAAO;;;AAIX,IAAa,+BAIX,cACiG;AACjG,SACE,UAC+B;EAC/B,MAAM,CAAC,cAAc,uBAAuB,WAAW,OAAO,2BAA2B;EAEzF,MAAM,WAAW,MAAM,MAAM,IAAI,UAAU,oBAA2B;AAEtE,0BAAwB,UAAU,oBAAoB;AACtD,mBAAiB,UAAU,aAAa;AAExC,kBAAgB;AACd,YAAS,QAAQ,EAAE,UAAU,MAAM,CAAC;IACpC;AAEF,SAAO"}
+{"version":3,"file":"component-factories.js","names":[],"sources":["../../src/components/component-factories.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { createRenderEffect, on, splitProps, onCleanup } from \"solid-js\";\n\nimport { getTicker } from \"../pixi-application\";\n\nimport { bindInitialisationProps, bindRuntimeProps } from \"./bind-props\";\nimport type { PixiSolidEventHandlerMap } from \"./bind-props/event-names\";\nimport { PIXI_SOLID_EVENT_HANDLER_NAMES } from \"./bind-props/event-names\";\nimport type {\n  CommonPointAxisPropName,\n  AnchorPointAxisPropName,\n  TilingPointAxisPropName,\n} from \"./bind-props/point-property-names\";\nimport {\n  COMMON_POINT_PROP_AXIS_NAMES,\n  ANCHOR_POINT_PROP_AXIS_NAMES,\n  TILING_POINT_PROP_AXIS_NAMES,\n} from \"./bind-props/point-property-names\";\n\n/**\n * Common point axis properties available on all Container-based components\n */\nexport type CommonPointAxisProps = Partial<Record<CommonPointAxisPropName, number>>;\n\n/**\n * Anchor point axis properties available on Sprite-like components\n */\nexport type AnchorPointAxisProps = Partial<Record<AnchorPointAxisPropName, number>>;\n\n/**\n * Tiling point axis properties available on TilingSprite\n */\nexport type TilingPointAxisProps = Partial<Record<TilingPointAxisPropName, number>>;\n\n/**\n * This is a utility type useful for extending the props of custom components to allow props to be passed through to the underlying Pixi instance.\n *\n * If you don't require them all it's recommended to narrow the type by using Pick or Omit the props to only allow the ones you need.\n *\n * @example PixiComponentProps<Pixi.SpriteOptions>.\n */\nexport type PixiComponentProps<\n  ComponentOptions extends Pixi.ContainerOptions = Pixi.ContainerOptions,\n> = PixiSolidEventHandlerMap & CommonPointAxisProps & Omit<ComponentOptions, \"children\">;\n\ntype RefAsProps<Component> = {\n  ref?: Ref<Component>;\n  as?: Component;\n};\n\ntype PixiComponent<Props, Instance> = (props: Props) => Instance & JSX.Element;\n\n/**\n * Prop definition for basic Container components (position, scale, pivot, skew only)\n */\nexport type ContainerProps<Component> = PixiSolidEventHandlerMap &\n  CommonPointAxisProps &\n  RefAsProps<Component> & {\n    children?: JSX.Element;\n  };\n\n/**\n * Prop definition for components that cannot have children\n */\nexport type LeafProps<Component> = PixiSolidEventHandlerMap &\n  CommonPointAxisProps &\n  RefAsProps<Component>;\n\n/**\n * Prop definition for Sprite-like components (includes anchor properties)\n */\nexport type SpriteProps<Component> = PixiSolidEventHandlerMap &\n  CommonPointAxisProps &\n  AnchorPointAxisProps &\n  RefAsProps<Component>;\n\nexport type AnimatedSpriteProps<Component> = SpriteProps<Component> &\n  Pick<Pixi.AnimatedSpriteOptions, \"autoUpdate\">;\n\ntype AnimatedSpriteLike = Pixi.Container & {\n  autoUpdate: boolean;\n  update: (ticker: Pixi.Ticker) => void;\n};\n\n/**\n * Prop definition for TilingSprite (includes anchor and tiling properties)\n */\nexport type TilingSpriteProps<Component> = PixiSolidEventHandlerMap &\n  CommonPointAxisProps &\n  AnchorPointAxisProps &\n  TilingPointAxisProps &\n  RefAsProps<Component>;\n\n/**\n * Prop definition for filter components\n */\nexport type FilterProps<Component> = RefAsProps<Component>;\n\n// Keys that are specific to Solid components and not Pixi props\nexport const SOLID_PROP_KEYS = [\"ref\", \"as\", \"children\"] as const;\n\n// Combined keys for splitting props\nconst CONTAINER_RUNTIME_KEYS = [\n  ...SOLID_PROP_KEYS,\n  ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n  ...COMMON_POINT_PROP_AXIS_NAMES,\n] as const;\n\n// Sprite components don't accept \"children\" since they can't have children\nconst SPRITE_RUNTIME_KEYS = [\n  \"ref\",\n  \"as\",\n  ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n  ...COMMON_POINT_PROP_AXIS_NAMES,\n  ...ANCHOR_POINT_PROP_AXIS_NAMES,\n] as const;\n\nconst TILING_SPRITE_RUNTIME_KEYS = [\n  \"ref\",\n  \"as\",\n  ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n  ...COMMON_POINT_PROP_AXIS_NAMES,\n  ...ANCHOR_POINT_PROP_AXIS_NAMES,\n  ...TILING_POINT_PROP_AXIS_NAMES,\n] as const;\n\nexport const createContainerComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n): PixiComponent<Omit<OptionsType, \"children\"> & ContainerProps<InstanceType>, InstanceType> => {\n  return (props): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, CONTAINER_RUNTIME_KEYS);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    bindInitialisationProps(instance, initialisationProps);\n    bindRuntimeProps(instance, runtimeProps);\n\n    onCleanup(() => {\n      if (\"attach\" in instance) {\n        // Means it's a render layer so we don't want to destroy children as they are managed elsewhere in the tree.\n        instance.destroy({ children: false });\n      } else {\n        instance.destroy({ children: true });\n      }\n    });\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n\nexport const createLeafComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n): PixiComponent<Omit<OptionsType, \"children\"> & LeafProps<InstanceType>, InstanceType> => {\n  return (\n    props: Omit<OptionsType, \"children\"> & LeafProps<InstanceType>,\n  ): InstanceType & JSX.Element => {\n    return createContainerComponent<InstanceType, OptionsType>(PixiClass)(props);\n  };\n};\n\nexport const createSpriteComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n): PixiComponent<Omit<OptionsType, \"children\"> & SpriteProps<InstanceType>, InstanceType> => {\n  return (\n    props: Omit<OptionsType, \"children\"> & SpriteProps<InstanceType>,\n  ): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, SPRITE_RUNTIME_KEYS);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    bindInitialisationProps(instance, initialisationProps);\n    bindRuntimeProps(instance, runtimeProps);\n\n    onCleanup(() => {\n      instance.destroy({ children: true });\n    });\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n\nexport const createAnimatedSpriteComponent = <\n  InstanceType extends AnimatedSpriteLike,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n): PixiComponent<\n  Omit<OptionsType, \"children\"> & AnimatedSpriteProps<InstanceType>,\n  InstanceType\n> => {\n  return (\n    props: Omit<OptionsType, \"children\"> & AnimatedSpriteProps<InstanceType>,\n  ): InstanceType & JSX.Element => {\n    // Specifically separate `autoUpdate` as we handle it manually below.\n    const [runtimeProps, update, initialisationProps] = splitProps(props, SPRITE_RUNTIME_KEYS, [\n      \"autoUpdate\",\n    ]);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    // Set this to false to override Pixi's default shared ticker behaviour.\n    instance.autoUpdate = false;\n\n    createRenderEffect(\n      on(\n        () => update.autoUpdate,\n        (autoUpdate) => {\n          const updateInstance = (ticker: Pixi.Ticker) => {\n            instance.update(ticker);\n          };\n\n          if (autoUpdate !== false) {\n            const ticker = getTicker();\n            ticker.add(updateInstance);\n            onCleanup(() => {\n              ticker.remove(updateInstance);\n            });\n          }\n        },\n      ),\n    );\n\n    bindInitialisationProps(instance, initialisationProps);\n    bindRuntimeProps(instance, runtimeProps);\n\n    onCleanup(() => {\n      instance.destroy({ children: true });\n    });\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n\nexport const createTilingSpriteComponent = <\n  InstanceType extends Pixi.Container,\n  OptionsType extends object,\n>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n): PixiComponent<Omit<OptionsType, \"children\"> & TilingSpriteProps<InstanceType>, InstanceType> => {\n  return (\n    props: Omit<OptionsType, \"children\"> & TilingSpriteProps<InstanceType>,\n  ): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, TILING_SPRITE_RUNTIME_KEYS);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    bindInitialisationProps(instance, initialisationProps);\n    bindRuntimeProps(instance, runtimeProps);\n\n    onCleanup(() => {\n      instance.destroy({ children: true });\n    });\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n\nexport const createFilterComponent = <InstanceType extends Pixi.Filter, OptionsType extends object>(\n  PixiClass: new (props: OptionsType) => InstanceType,\n): PixiComponent<OptionsType & FilterProps<InstanceType>, InstanceType> => {\n  return (props: OptionsType & FilterProps<InstanceType>): InstanceType & JSX.Element => {\n    const [runtimeProps, initialisationProps] = splitProps(props, [\"ref\", \"as\"]);\n\n    const instance = props.as || new PixiClass(initialisationProps as any);\n\n    for (const key in initialisationProps) {\n      if (key === \"as\") continue;\n\n      if (key === \"ref\") {\n        createRenderEffect(() => {\n          // Solid converts the ref prop to a callback function\n          (props[key] as unknown as (arg: any) => void)(instance);\n        });\n      } else if (key === \"children\") {\n        throw new Error(`Cannot set children on non-container instance.`);\n      } else {\n        createRenderEffect(\n          on(\n            () => props[key as keyof typeof initialisationProps],\n            () => {\n              (instance as any)[key] = initialisationProps[key];\n            },\n            { defer: true },\n          ),\n        );\n      }\n    }\n\n    for (const key in runtimeProps) {\n      if (key === \"as\") continue;\n\n      if (key === \"ref\") {\n        createRenderEffect(() => {\n          // Solid converts the ref prop to a callback function\n          (props[key] as unknown as (arg: any) => void)(instance);\n        });\n      }\n    }\n\n    onCleanup(() => {\n      instance.destroy();\n    });\n\n    return instance as InstanceType & JSX.Element;\n  };\n};\n"],"mappings":";;;;;AAuGA,IAAM,yBAAyB;CAC7B,GAAG;EAJ2B;EAAO;EAAM;EAIxC;CACH,GAAG;CACH,GAAG;CACJ;AAGD,IAAM,sBAAsB;CAC1B;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,IAAM,6BAA6B;CACjC;CACA;CACA,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,IAAa,4BAIX,cAC8F;CAC9F,QAAQ,UAAsC;EAC5C,MAAM,CAAC,cAAc,uBAAuB,WAAW,OAAO,uBAAuB;EAErF,MAAM,WAAW,MAAM,MAAM,IAAI,UAAU,oBAA2B;EAEtE,wBAAwB,UAAU,oBAAoB;EACtD,iBAAiB,UAAU,aAAa;EAExC,gBAAgB;GACd,IAAI,YAAY,UAEd,SAAS,QAAQ,EAAE,UAAU,OAAO,CAAC;QAErC,SAAS,QAAQ,EAAE,UAAU,MAAM,CAAC;IAEtC;EAEF,OAAO;;;AAIX,IAAa,uBAIX,cACyF;CACzF,QACE,UAC+B;EAC/B,OAAO,yBAAoD,UAAU,CAAC,MAAM;;;AAIhF,IAAa,yBAIX,cAC2F;CAC3F,QACE,UAC+B;EAC/B,MAAM,CAAC,cAAc,uBAAuB,WAAW,OAAO,oBAAoB;EAElF,MAAM,WAAW,MAAM,MAAM,IAAI,UAAU,oBAA2B;EAEtE,wBAAwB,UAAU,oBAAoB;EACtD,iBAAiB,UAAU,aAAa;EAExC,gBAAgB;GACd,SAAS,QAAQ,EAAE,UAAU,MAAM,CAAC;IACpC;EAEF,OAAO;;;AAIX,IAAa,iCAIX,cAIG;CACH,QACE,UAC+B;EAE/B,MAAM,CAAC,cAAc,QAAQ,uBAAuB,WAAW,OAAO,qBAAqB,CACzF,aACD,CAAC;EAEF,MAAM,WAAW,MAAM,MAAM,IAAI,UAAU,oBAA2B;EAGtE,SAAS,aAAa;EAEtB,mBACE,SACQ,OAAO,aACZ,eAAe;GACd,MAAM,kBAAkB,WAAwB;IAC9C,SAAS,OAAO,OAAO;;GAGzB,IAAI,eAAe,OAAO;IACxB,MAAM,SAAS,WAAW;IAC1B,OAAO,IAAI,eAAe;IAC1B,gBAAgB;KACd,OAAO,OAAO,eAAe;MAC7B;;IAGP,CACF;EAED,wBAAwB,UAAU,oBAAoB;EACtD,iBAAiB,UAAU,aAAa;EAExC,gBAAgB;GACd,SAAS,QAAQ,EAAE,UAAU,MAAM,CAAC;IACpC;EAEF,OAAO;;;AAIX,IAAa,+BAIX,cACiG;CACjG,QACE,UAC+B;EAC/B,MAAM,CAAC,cAAc,uBAAuB,WAAW,OAAO,2BAA2B;EAEzF,MAAM,WAAW,MAAM,MAAM,IAAI,UAAU,oBAA2B;EAEtE,wBAAwB,UAAU,oBAAoB;EACtD,iBAAiB,UAAU,aAAa;EAExC,gBAAgB;GACd,SAAS,QAAQ,EAAE,UAAU,MAAM,CAAC;IACpC;EAEF,OAAO"}

package/dist/index.js

@@ -1,10 +1,10 @@
 import { getPixiApp } from "./pixi-application/get-pixi-app.js";
 import { getTicker } from "./pixi-application/get-ticker.js";
 import { PixiApplicationProvider, TickerProvider } from "./pixi-application/pixi-application-provider.js";
-import { usePixiScreen } from "./use-pixi-screen/use-pixi-screen.js";
+import { getRenderer } from "./pixi-application/get-renderer.js";
 import { onResize } from "./on-resize.js";
 import { onTick } from "./on-tick.js";
-import { createAsyncDelay, delay } from "./delay.js";
 import { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, NineSliceSprite, ParticleContainer, PerspectiveMesh, RenderContainer, RenderLayer, Sprite, Text, TilingSprite } from "./components/components.js";
 import { PixiCanvas } from "./pixi-canvas.js";
-export { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, NineSliceSprite, ParticleContainer, PerspectiveMesh, PixiApplicationProvider, PixiCanvas, RenderContainer, RenderLayer, Sprite, Text, TickerProvider, TilingSprite, createAsyncDelay, delay, getPixiApp, getTicker, onResize, onTick, usePixiScreen };
+import { usePixiScreen } from "./use-pixi-screen/use-pixi-screen.js";
+export { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, NineSliceSprite, ParticleContainer, PerspectiveMesh, PixiApplicationProvider, PixiCanvas, RenderContainer, RenderLayer, Sprite, Text, TickerProvider, TilingSprite, getPixiApp, getRenderer, getTicker, onResize, onTick, usePixiScreen };

package/dist/on-resize.js

@@ -1,6 +1,5 @@
 import { getPixiApp } from "./pixi-application/get-pixi-app.js";
-import { usePixiScreen } from "./use-pixi-screen/use-pixi-screen.js";
-import { createEffect, on } from "solid-js";
+import { onCleanup } from "solid-js";
 //#region src/on-resize.ts
 /**
 *
@@ -20,20 +19,16 @@ var onResize = (resizeCallback) => {
 	} catch {
 		throw new Error("onResize must be used within a PixiApplicationProvider or a PixiCanvas");
 	}
-	const screen = usePixiScreen();
-	/**
-	* We derive from the reactive screen store so this hook always fires after `usePixiScreen()` has
-	* been updated.
-	* This avoids a race condition and guarantees consistent values when both are used together.
-	*/
-	createEffect(on(() => [
-		screen.width,
-		screen.height,
-		screen.x,
-		screen.y
-	], () => {
-		resizeCallback(pixiApp.renderer.screen);
-	}, { defer: false }));
+	resizeCallback(pixiApp.renderer.screen);
+	const handleResize = () => {
+		queueMicrotask(() => {
+			resizeCallback(pixiApp.renderer.screen);
+		});
+	};
+	pixiApp.renderer.addListener("resize", handleResize);
+	onCleanup(() => {
+		pixiApp.renderer.removeListener("resize", handleResize);
+	});
 };
 //#endregion
 export { onResize };

package/dist/on-resize.js.map

@@ -1 +1 @@
-{"version":3,"file":"on-resize.js","names":[],"sources":["../src/on-resize.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { createEffect, on } from \"solid-js\";\n\nimport { getPixiApp } from \"./pixi-application\";\nimport { usePixiScreen } from \"./use-pixi-screen\";\n\n/**\n *\n * A SolidJS hook that runs a callback function whenever the PixiJS renderer is resized.\n * The callback is automatically removed when the component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiCanvas` or `PixiApplicationProvider`.\n *\n * @param resizeCallback - A callback function that receives the updated screen dimensions as a `Pixi.Rectangle` object. This function will be called immediately upon hook initialization and then on every subsequent resize event.\n *\n * We listen for the renderer's \"resize\" event so this hook will work correctly whether the window is resized or just the DOM element the PixiCanvas is inside of changes size.\n */\nexport const onResize = (resizeCallback: (screen: Pixi.Rectangle) => void): void => {\n  let pixiApp: Pixi.Application;\n\n  try {\n    pixiApp = getPixiApp();\n  } catch {\n    throw new Error(\"onResize must be used within a PixiApplicationProvider or a PixiCanvas\");\n  }\n\n  const screen = usePixiScreen();\n\n  /**\n   * We derive from the reactive screen store so this hook always fires after `usePixiScreen()` has\n   * been updated.\n   * This avoids a race condition and guarantees consistent values when both are used together.\n   */\n  createEffect(\n    on(\n      () => [screen.width, screen.height, screen.x, screen.y],\n      () => {\n        resizeCallback(pixiApp.renderer.screen);\n      },\n      { defer: false },\n    ),\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,IAAa,YAAY,mBAA2D;CAClF,IAAI;AAEJ,KAAI;AACF,YAAU,YAAY;SAChB;AACN,QAAM,IAAI,MAAM,yEAAyE;;CAG3F,MAAM,SAAS,eAAe;;;;;;AAO9B,cACE,SACQ;EAAC,OAAO;EAAO,OAAO;EAAQ,OAAO;EAAG,OAAO;EAAE,QACjD;AACJ,iBAAe,QAAQ,SAAS,OAAO;IAEzC,EAAE,OAAO,OAAO,CACjB,CACF"}
+{"version":3,"file":"on-resize.js","names":[],"sources":["../src/on-resize.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { onCleanup } from \"solid-js\";\n\nimport { getPixiApp } from \"./pixi-application\";\n\n/**\n *\n * A SolidJS hook that runs a callback function whenever the PixiJS renderer is resized.\n * The callback is automatically removed when the component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiCanvas` or `PixiApplicationProvider`.\n *\n * @param resizeCallback - A callback function that receives the updated screen dimensions as a `Pixi.Rectangle` object. This function will be called immediately upon hook initialization and then on every subsequent resize event.\n *\n * We listen for the renderer's \"resize\" event so this hook will work correctly whether the window is resized or just the DOM element the PixiCanvas is inside of changes size.\n */\nexport const onResize = (resizeCallback: (screen: Pixi.Rectangle) => void): void => {\n  let pixiApp: Pixi.Application;\n\n  try {\n    pixiApp = getPixiApp();\n  } catch {\n    throw new Error(\"onResize must be used within a PixiApplicationProvider or a PixiCanvas\");\n  }\n\n  // Ensure initial callback happens during setup.\n  resizeCallback(pixiApp.renderer.screen);\n\n  const handleResize = () => {\n    // Keep onResize event-driven (fires for every renderer resize event), but schedule the\n    // callback after the current emit cycle so usePixiScreen listeners have already synchronized\n    // their reactive values. This avoids stale reads when both hooks are used together.\n    queueMicrotask(() => {\n      resizeCallback(pixiApp.renderer.screen);\n    });\n  };\n\n  pixiApp.renderer.addListener(\"resize\", handleResize);\n\n  onCleanup(() => {\n    pixiApp.renderer.removeListener(\"resize\", handleResize);\n  });\n};\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAa,YAAY,mBAA2D;CAClF,IAAI;CAEJ,IAAI;EACF,UAAU,YAAY;SAChB;EACN,MAAM,IAAI,MAAM,yEAAyE;;CAI3F,eAAe,QAAQ,SAAS,OAAO;CAEvC,MAAM,qBAAqB;EAIzB,qBAAqB;GACnB,eAAe,QAAQ,SAAS,OAAO;IACvC;;CAGJ,QAAQ,SAAS,YAAY,UAAU,aAAa;CAEpD,gBAAgB;EACd,QAAQ,SAAS,eAAe,UAAU,aAAa;GACvD"}

package/dist/on-tick.js.map

@@ -1 +1 @@
-{"version":3,"file":"on-tick.js","names":[],"sources":["../src/on-tick.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { UPDATE_PRIORITY } from \"pixi.js\";\nimport { onCleanup, useContext } from \"solid-js\";\n\nimport { TickerContext } from \"./pixi-application\";\n\n/**\n * onTick\n *\n * A custom SolidJS hook that registers a callback function to be executed on every frame\n * of the PIXI.Application's ticker. The callback is automatically removed when the\n * component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiCanvas`,\n * `PixiApplicationProvider`, or `TickerProvider`.\n *\n * @param tickerCallback - The function to call on each ticker update. It receives\n * the `Pixi.Ticker` instance as its argument.\n * @param priority - An optional priority level for the ticker callback.\n *\n */\nexport const onTick = (\n  tickerCallback: Pixi.TickerCallback<Pixi.Ticker>,\n  priority: Pixi.UPDATE_PRIORITY = UPDATE_PRIORITY.NORMAL,\n): void => {\n  const ticker = useContext(TickerContext);\n\n  if (!ticker) {\n    throw new Error(\n      \"onTick must be used within a PixiApplicationProvider, PixiCanvas or a TickerProvider\",\n    );\n  }\n\n  ticker.add(tickerCallback, ticker, priority);\n\n  onCleanup(() => {\n    ticker.remove(tickerCallback, ticker);\n  });\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,IAAa,UACX,gBACA,WAAiC,gBAAgB,WACxC;CACT,MAAM,SAAS,WAAW,cAAc;AAExC,KAAI,CAAC,OACH,OAAM,IAAI,MACR,uFACD;AAGH,QAAO,IAAI,gBAAgB,QAAQ,SAAS;AAE5C,iBAAgB;AACd,SAAO,OAAO,gBAAgB,OAAO;GACrC"}
+{"version":3,"file":"on-tick.js","names":[],"sources":["../src/on-tick.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { UPDATE_PRIORITY } from \"pixi.js\";\nimport { onCleanup, useContext } from \"solid-js\";\n\nimport { TickerContext } from \"./pixi-application\";\n\n/**\n * onTick\n *\n * A custom SolidJS hook that registers a callback function to be executed on every frame\n * of the PIXI.Application's ticker. The callback is automatically removed when the\n * component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiCanvas`,\n * `PixiApplicationProvider`, or `TickerProvider`.\n *\n * @param tickerCallback - The function to call on each ticker update. It receives\n * the `Pixi.Ticker` instance as its argument.\n * @param priority - An optional priority level for the ticker callback.\n *\n */\nexport const onTick = (\n  tickerCallback: Pixi.TickerCallback<Pixi.Ticker>,\n  priority: Pixi.UPDATE_PRIORITY = UPDATE_PRIORITY.NORMAL,\n): void => {\n  const ticker = useContext(TickerContext);\n\n  if (!ticker) {\n    throw new Error(\n      \"onTick must be used within a PixiApplicationProvider, PixiCanvas or a TickerProvider\",\n    );\n  }\n\n  ticker.add(tickerCallback, ticker, priority);\n\n  onCleanup(() => {\n    ticker.remove(tickerCallback, ticker);\n  });\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,IAAa,UACX,gBACA,WAAiC,gBAAgB,WACxC;CACT,MAAM,SAAS,WAAW,cAAc;CAExC,IAAI,CAAC,QACH,MAAM,IAAI,MACR,uFACD;CAGH,OAAO,IAAI,gBAAgB,QAAQ,SAAS;CAE5C,gBAAgB;EACd,OAAO,OAAO,gBAAgB,OAAO;GACrC"}

package/dist/pixi-application/context.js

@@ -2,7 +2,8 @@ import { createContext } from "solid-js";
 //#region src/pixi-application/context.ts
 var PixiAppContext = createContext();
 var TickerContext = createContext();
+var ScreenStoreContext = createContext();
 //#endregion
-export { PixiAppContext, TickerContext };
+export { PixiAppContext, ScreenStoreContext, TickerContext };
 
 //# sourceMappingURL=context.js.map

package/dist/pixi-application/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../src/pixi-application/context.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { createContext } from \"solid-js\";\n\nimport type { PixiScreenDimensions } from \"../use-pixi-screen/pixi-screen-store\";\n\nexport const PixiAppContext = createContext<{\n  app: Pixi.Application;\n  pixiScreenStore: Readonly<PixiScreenDimensions>;\n}>();\n\nexport const TickerContext = createContext<Pixi.Ticker>();\n"],"mappings":";;AAKA,IAAa,iBAAiB,eAG1B;AAEJ,IAAa,gBAAgB,eAA4B"}
+{"version":3,"file":"context.js","names":[],"sources":["../../src/pixi-application/context.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { createContext } from \"solid-js\";\n\nimport type { PixiScreenDimensions } from \"../use-pixi-screen/pixi-screen-store\";\n\nexport const PixiAppContext = createContext<Pixi.Application>();\n\nexport const TickerContext = createContext<Pixi.Ticker>();\n\nexport const ScreenStoreContext = createContext<Readonly<PixiScreenDimensions>>();\n"],"mappings":";;AAKA,IAAa,iBAAiB,eAAiC;AAE/D,IAAa,gBAAgB,eAA4B;AAEzD,IAAa,qBAAqB,eAA+C"}

package/dist/pixi-application/get-pixi-app.js

@@ -10,7 +10,7 @@ import { useContext } from "solid-js";
 var getPixiApp = () => {
 	const appContext = useContext(PixiAppContext);
 	if (!appContext) throw new Error("getPixiApp must be used within a PixiApplicationProvider or a PixiCanvas");
-	return appContext.app;
+	return appContext;
 };
 //#endregion
 export { getPixiApp };

package/dist/pixi-application/get-pixi-app.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-pixi-app.js","names":[],"sources":["../../src/pixi-application/get-pixi-app.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { useContext } from \"solid-js\";\n\nimport { PixiAppContext } from \"./context\";\n\n/**\n * A custom SolidJS hook to access the root Pixi.Application instance.\n * This hook must be called from a component that is a descendant of `PixiApplicationProvider` or `PixiCanvas`.\n *\n * @returns The Pixi.Application instance provided by the `PixiApplication` component.\n */\nexport const getPixiApp = (): Pixi.Application => {\n  const appContext = useContext(PixiAppContext);\n\n  if (!appContext) {\n    throw new Error(\"getPixiApp must be used within a PixiApplicationProvider or a PixiCanvas\");\n  }\n\n  return appContext.app;\n};\n"],"mappings":";;;;;;;;;AAWA,IAAa,mBAAqC;CAChD,MAAM,aAAa,WAAW,eAAe;AAE7C,KAAI,CAAC,WACH,OAAM,IAAI,MAAM,2EAA2E;AAG7F,QAAO,WAAW"}
+{"version":3,"file":"get-pixi-app.js","names":[],"sources":["../../src/pixi-application/get-pixi-app.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { useContext } from \"solid-js\";\n\nimport { PixiAppContext } from \"./context\";\n\n/**\n * A custom SolidJS hook to access the root Pixi.Application instance.\n * This hook must be called from a component that is a descendant of `PixiApplicationProvider` or `PixiCanvas`.\n *\n * @returns The Pixi.Application instance provided by the `PixiApplication` component.\n */\nexport const getPixiApp = (): Pixi.Application => {\n  const appContext = useContext(PixiAppContext);\n\n  if (!appContext) {\n    throw new Error(\"getPixiApp must be used within a PixiApplicationProvider or a PixiCanvas\");\n  }\n\n  return appContext;\n};\n"],"mappings":";;;;;;;;;AAWA,IAAa,mBAAqC;CAChD,MAAM,aAAa,WAAW,eAAe;CAE7C,IAAI,CAAC,YACH,MAAM,IAAI,MAAM,2EAA2E;CAG7F,OAAO"}

package/dist/pixi-application/get-renderer.js

@@ -0,0 +1,18 @@
+import { PixiAppContext } from "./context.js";
+import { useContext } from "solid-js";
+//#region src/pixi-application/get-renderer.ts
+/**
+* A custom SolidJS hook to access the root Pixi Renderer instance.
+* This hook must be called from a component that is a descendant of `PixiApplicationProvider` or `PixiCanvas`.
+*
+* @returns The Pixi.Renderer instance.
+*/
+var getRenderer = () => {
+	const appContext = useContext(PixiAppContext);
+	if (!appContext) throw new Error("getRenderer must be used within a PixiApplicationProvider or a PixiCanvas");
+	return appContext.renderer;
+};
+//#endregion
+export { getRenderer };
+
+//# sourceMappingURL=get-renderer.js.map

package/dist/pixi-application/get-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-renderer.js","names":[],"sources":["../../src/pixi-application/get-renderer.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { useContext } from \"solid-js\";\n\nimport { PixiAppContext } from \"./context\";\n\n/**\n * A custom SolidJS hook to access the root Pixi Renderer instance.\n * This hook must be called from a component that is a descendant of `PixiApplicationProvider` or `PixiCanvas`.\n *\n * @returns The Pixi.Renderer instance.\n */\nexport const getRenderer = (): Pixi.Renderer => {\n  const appContext = useContext(PixiAppContext);\n\n  if (!appContext) {\n    throw new Error(\"getRenderer must be used within a PixiApplicationProvider or a PixiCanvas\");\n  }\n\n  return appContext.renderer;\n};\n"],"mappings":";;;;;;;;;AAWA,IAAa,oBAAmC;CAC9C,MAAM,aAAa,WAAW,eAAe;CAE7C,IAAI,CAAC,YACH,MAAM,IAAI,MAAM,4EAA4E;CAG9F,OAAO,WAAW"}

package/dist/pixi-application/get-ticker.js

@@ -2,18 +2,14 @@ import { TickerContext } from "./context.js";
 import { useContext } from "solid-js";
 //#region src/pixi-application/get-ticker.ts
 /**
-* getTicker
+* A custom SolidJS hook that provides access to the Pixi Ticker instance.
+* This hook must be called from a component that is a descendant of `PixiApplicationProvider`, `PixiCanvas` or `TickerProvider`.
 *
-* A custom SolidJS hook that provides access to the PIXI.Application's shared Ticker instance.
-* This hook must be called from a component that is a descendant of `PixiApplication`.
-* Or a descendant of `TickerProvider` if being used for testing without an application.
-*
-* @returns The PIXI.Ticker instance from the application context.
-* @throws Will throw an error if used outside of a `PixiApplication` or `TickerProvider` context.
+* @returns The Pixi.Ticker instance from the nearest context provider.
 */
 var getTicker = () => {
 	const ticker = useContext(TickerContext);
-	if (!ticker) throw new Error("getTicker must be used within a PixiApplication or a TickerProvider");
+	if (!ticker) throw new Error("getTicker must be used within a PixiApplicationProvider, PixiCanvas, or TickerProvider");
 	return ticker;
 };
 //#endregion

package/dist/pixi-application/get-ticker.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-ticker.js","names":[],"sources":["../../src/pixi-application/get-ticker.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { useContext } from \"solid-js\";\n\nimport { TickerContext } from \"./context\";\n\n/**\n * getTicker\n *\n * A custom SolidJS hook that provides access to the PIXI.Application's shared Ticker instance.\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n * Or a descendant of `TickerProvider` if being used for testing without an application.\n *\n * @returns The PIXI.Ticker instance from the application context.\n * @throws Will throw an error if used outside of a `PixiApplication` or `TickerProvider` context.\n */\nexport const getTicker = (): Pixi.Ticker => {\n  const ticker = useContext(TickerContext);\n  if (!ticker) {\n    throw new Error(\"getTicker must be used within a PixiApplication or a TickerProvider\");\n  }\n  return ticker;\n};\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAa,kBAA+B;CAC1C,MAAM,SAAS,WAAW,cAAc;AACxC,KAAI,CAAC,OACH,OAAM,IAAI,MAAM,sEAAsE;AAExF,QAAO"}
+{"version":3,"file":"get-ticker.js","names":[],"sources":["../../src/pixi-application/get-ticker.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { useContext } from \"solid-js\";\n\nimport { TickerContext } from \"./context\";\n\n/**\n * A custom SolidJS hook that provides access to the Pixi Ticker instance.\n * This hook must be called from a component that is a descendant of `PixiApplicationProvider`, `PixiCanvas` or `TickerProvider`.\n *\n * @returns The Pixi.Ticker instance from the nearest context provider.\n */\nexport const getTicker = (): Pixi.Ticker => {\n  const ticker = useContext(TickerContext);\n  if (!ticker) {\n    throw new Error(\n      \"getTicker must be used within a PixiApplicationProvider, PixiCanvas, or TickerProvider\",\n    );\n  }\n  return ticker;\n};\n"],"mappings":";;;;;;;;;AAWA,IAAa,kBAA+B;CAC1C,MAAM,SAAS,WAAW,cAAc;CACxC,IAAI,CAAC,QACH,MAAM,IAAI,MACR,yFACD;CAEH,OAAO"}

package/dist/pixi-application/pixi-application-provider.js

@@ -1,4 +1,4 @@
-import { PixiAppContext, TickerContext } from "./context.js";
+import { PixiAppContext, ScreenStoreContext, TickerContext } from "./context.js";
 import { createPixiApplication } from "./pixi-application.js";
 import { createPixiScreenStore } from "../use-pixi-screen/pixi-screen-store.js";
 import { Show, createResource, onCleanup, splitProps, useContext } from "solid-js";
@@ -19,9 +19,9 @@ var PixiApplicationProvider = (props) => {
 	const [appResource] = createResource(async () => {
 		if (externallyProvidedApp) return externallyProvidedApp;
 		const existingContext = useContext(PixiAppContext);
-		if (existingContext?.app) {
-			externallyProvidedApp = existingContext.app;
-			return existingContext.app;
+		if (existingContext) {
+			externallyProvidedApp = existingContext;
+			return existingContext;
 		}
 		const [, initialisationProps] = splitProps(props, ["children", "existingApp"]);
 		return await createPixiApplication(initialisationProps);
@@ -36,19 +36,22 @@ var PixiApplicationProvider = (props) => {
 		},
 		children: (app) => {
 			const pixiScreenStore = createPixiScreenStore(app().renderer);
-			const contextValue = {
-				app: app(),
-				pixiScreenStore
-			};
 			return createComponent(PixiAppContext.Provider, {
-				value: contextValue,
+				get value() {
+					return app();
+				},
 				get children() {
-					return createComponent(TickerContext.Provider, {
-						get value() {
-							return app().ticker;
-						},
+					return createComponent(ScreenStoreContext.Provider, {
+						value: pixiScreenStore,
 						get children() {
-							return props.children;
+							return createComponent(TickerContext.Provider, {
+								get value() {
+									return app().ticker;
+								},
+								get children() {
+									return props.children;
+								}
+							});
 						}
 					});
 				}

package/dist/pixi-application/pixi-application-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"pixi-application-provider.js","names":["Pixi","JSX","ParentProps","createResource","onCleanup","Show","splitProps","useContext","createPixiScreenStore","PixiAppContext","TickerContext","createPixiApplication","PixiApplicationProps","Partial","Omit","ApplicationOptions","children","Element","existingApp","Application","PixiApplicationProvider","props","externallyProvidedApp","appResource","existingContext","app","initialisationProps","destroy","_$createComponent","when","pixiScreenStore","renderer","contextValue","Provider","value","ticker","TickerProviderProps","Ticker","TickerProvider"],"sources":["../../src/pixi-application/pixi-application-provider.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, ParentProps } from \"solid-js\";\nimport { createResource, onCleanup, Show, splitProps, useContext } from \"solid-js\";\n\nimport { createPixiScreenStore } from \"../use-pixi-screen/pixi-screen-store\";\n\nimport { PixiAppContext, TickerContext } from \"./context\";\nimport { createPixiApplication } from \"./pixi-application\";\n\n/**\n * Props for the `PixiApplication` component. It extends the PIXI.ApplicationOptions\n * minus the `children` and `resizeTo` properties, which are handled by pixi-solid internally.\n * There is also an optional `existingApp` property to pass in an already created Pixi.Application instance, which will be used instead of creating a new one.\n */\nexport type PixiApplicationProps = Partial<\n  Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">\n> & {\n  children?: JSX.Element;\n  existingApp?: Pixi.Application;\n};\n\n/**\n * A SolidJS component that creates a Pixi.Application instance and works as a context provider.\n * It provides the application instance through context to be used by child components\n * and custom hooks like `getPixiApp`, `onTick`, `getTicker` and `usePixiScreen`.\n *\n * This component should only be used once in your application.\n *\n * @param props The properties to configure the Pixi.js Application.\n *\n */\nexport const PixiApplicationProvider = (props: PixiApplicationProps): JSX.Element => {\n  let externallyProvidedApp: Pixi.Application | undefined = props.existingApp;\n\n  const [appResource] = createResource(async () => {\n    if (externallyProvidedApp) {\n      return externallyProvidedApp;\n    }\n\n    const existingContext = useContext(PixiAppContext);\n    if (existingContext?.app) {\n      externallyProvidedApp = existingContext.app;\n      return existingContext.app;\n    }\n\n    const [, initialisationProps] = splitProps(props, [\"children\", \"existingApp\"]);\n    return await createPixiApplication(initialisationProps);\n  });\n\n  onCleanup(() => {\n    // Only destroy the app if it was created here.\n    if (externallyProvidedApp) return;\n    appResource()?.destroy(true, { children: true });\n  });\n\n  return (\n    <Show when={appResource()}>\n      {(app) => {\n        const pixiScreenStore = createPixiScreenStore(app().renderer);\n        const contextValue = {\n          app: app(),\n          pixiScreenStore,\n        };\n\n        return (\n          <PixiAppContext.Provider value={contextValue}>\n            <TickerContext.Provider value={app().ticker}>{props.children}</TickerContext.Provider>\n          </PixiAppContext.Provider>\n        );\n      }}\n    </Show>\n  );\n};\n\nexport type TickerProviderProps = ParentProps<{ ticker: Pixi.Ticker }>;\n\n/**\n * This is only required if you want a ticker without the Pixi Application.\n * For applications that want to use multiple tickers or for testing a store that relies on the ticker related utilities.\n * It provides context for the `onTick`, `delay`, `createAsyncDelay` and `getTicker` utilities.\n *\n * The ticker instance you want to use needs to be passed in as a prop so it can be manually controlled from the outside for testing.\n */\nexport const TickerProvider = (props: TickerProviderProps): JSX.Element => {\n  return <TickerContext.Provider value={props.ticker}>{props.children}</TickerContext.Provider>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA+BA,IAAaoB,2BAA2BC,UAA6C;CACnF,IAAIC,wBAAsDD,MAAMH;CAEhE,MAAM,CAACK,eAAepB,eAAe,YAAY;AAC/C,MAAImB,sBACF,QAAOA;EAGT,MAAME,kBAAkBjB,WAAWE,eAAe;AAClD,MAAIe,iBAAiBC,KAAK;AACxBH,2BAAwBE,gBAAgBC;AACxC,UAAOD,gBAAgBC;;EAGzB,MAAM,GAAGC,uBAAuBpB,WAAWe,OAAO,CAAC,YAAY,cAAc,CAAC;AAC9E,SAAO,MAAMV,sBAAsBe,oBAAoB;GACvD;AAEFtB,iBAAgB;AAEd,MAAIkB,sBAAuB;AAC3BC,eAAa,EAAEI,QAAQ,MAAM,EAAEX,UAAU,MAAM,CAAC;GAChD;AAEF,QAAAY,gBACGvB,MAAI;EAAA,IAACwB,OAAI;AAAA,UAAEN,aAAa;;EAAAP,WACrBS,QAAQ;GACR,MAAMK,kBAAkBtB,sBAAsBiB,KAAK,CAACM,SAAS;GAC7D,MAAMC,eAAe;IACnBP,KAAKA,KAAK;IACVK;IACD;AAED,UAAAF,gBACGnB,eAAewB,UAAQ;IAACC,OAAOF;IAAY,IAAAhB,WAAA;AAAA,YAAAY,gBACzClB,cAAcuB,UAAQ;MAAA,IAACC,QAAK;AAAA,cAAET,KAAK,CAACU;;MAAM,IAAAnB,WAAA;AAAA,cAAGK,MAAML;;MAAQ,CAAA;;IAAA,CAAA;;EAGjE,CAAA;;;;;;;;;AAcP,IAAasB,kBAAkBjB,UAA4C;AACzE,QAAAO,gBAAQlB,cAAcuB,UAAQ;EAAA,IAACC,QAAK;AAAA,UAAEb,MAAMc;;EAAM,IAAAnB,WAAA;AAAA,UAAGK,MAAML;;EAAQ,CAAA"}
+{"version":3,"file":"pixi-application-provider.js","names":["Pixi","JSX","ParentProps","createResource","onCleanup","Show","splitProps","useContext","createPixiScreenStore","PixiAppContext","TickerContext","ScreenStoreContext","createPixiApplication","PixiApplicationProps","Partial","Omit","ApplicationOptions","children","Element","existingApp","Application","PixiApplicationProvider","props","externallyProvidedApp","appResource","existingContext","initialisationProps","destroy","_$createComponent","when","app","pixiScreenStore","renderer","Provider","value","ticker","TickerProviderProps","Ticker","TickerProvider"],"sources":["../../src/pixi-application/pixi-application-provider.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, ParentProps } from \"solid-js\";\nimport { createResource, onCleanup, Show, splitProps, useContext } from \"solid-js\";\n\nimport { createPixiScreenStore } from \"../use-pixi-screen/pixi-screen-store\";\n\nimport { PixiAppContext, TickerContext, ScreenStoreContext } from \"./context\";\nimport { createPixiApplication } from \"./pixi-application\";\n\n/**\n * Props for the `PixiApplication` component. It extends the PIXI.ApplicationOptions\n * minus the `children` and `resizeTo` properties, which are handled by pixi-solid internally.\n * There is also an optional `existingApp` property to pass in an already created Pixi.Application instance, which will be used instead of creating a new one.\n */\nexport type PixiApplicationProps = Partial<\n  Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">\n> & {\n  children?: JSX.Element;\n  existingApp?: Pixi.Application;\n};\n\n/**\n * A SolidJS component that creates a Pixi.Application instance and works as a context provider.\n * It provides the application instance through context to be used by child components\n * and custom hooks like `getPixiApp`, `onTick`, `getTicker` and `usePixiScreen`.\n *\n * This component should only be used once in your application.\n *\n * @param props The properties to configure the Pixi.js Application.\n *\n */\nexport const PixiApplicationProvider = (props: PixiApplicationProps): JSX.Element => {\n  let externallyProvidedApp: Pixi.Application | undefined = props.existingApp;\n\n  const [appResource] = createResource(async () => {\n    if (externallyProvidedApp) {\n      return externallyProvidedApp;\n    }\n\n    const existingContext = useContext(PixiAppContext);\n    if (existingContext) {\n      externallyProvidedApp = existingContext;\n      return existingContext;\n    }\n\n    const [, initialisationProps] = splitProps(props, [\"children\", \"existingApp\"]);\n    return await createPixiApplication(initialisationProps);\n  });\n\n  onCleanup(() => {\n    // Only destroy the app if it was created here.\n    if (externallyProvidedApp) return;\n    appResource()?.destroy(true, { children: true });\n  });\n\n  return (\n    <Show when={appResource()}>\n      {(app) => {\n        const pixiScreenStore = createPixiScreenStore(app().renderer);\n\n        return (\n          <PixiAppContext.Provider value={app()}>\n            <ScreenStoreContext.Provider value={pixiScreenStore}>\n              <TickerContext.Provider value={app().ticker}>{props.children}</TickerContext.Provider>\n            </ScreenStoreContext.Provider>\n          </PixiAppContext.Provider>\n        );\n      }}\n    </Show>\n  );\n};\n\nexport type TickerProviderProps = ParentProps<{ ticker: Pixi.Ticker }>;\n\n/**\n * This is only required if you want a ticker without the Pixi Application.\n * For applications that want to use multiple tickers or for testing a store that relies on the ticker related utilities.\n * It provides context for the `onTick`, `delay`, `createAsyncDelay` and `getTicker` utilities.\n *\n * The ticker instance you want to use needs to be passed in as a prop so it can be manually controlled from the outside for testing.\n */\nexport const TickerProvider = (props: TickerProviderProps): JSX.Element => {\n  return <TickerContext.Provider value={props.ticker}>{props.children}</TickerContext.Provider>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA+BA,IAAaqB,2BAA2BC,UAA6C;CACnF,IAAIC,wBAAsDD,MAAMH;CAEhE,MAAM,CAACK,eAAerB,eAAe,YAAY;EAC/C,IAAIoB,uBACF,OAAOA;EAGT,MAAME,kBAAkBlB,WAAWE,eAAe;EAClD,IAAIgB,iBAAiB;GACnBF,wBAAwBE;GACxB,OAAOA;;EAGT,MAAM,GAAGC,uBAAuBpB,WAAWgB,OAAO,CAAC,YAAY,cAAc,CAAC;EAC9E,OAAO,MAAMV,sBAAsBc,oBAAoB;GACvD;CAEFtB,gBAAgB;EAEd,IAAImB,uBAAuB;EAC3BC,aAAa,EAAEG,QAAQ,MAAM,EAAEV,UAAU,MAAM,CAAC;GAChD;CAEF,OAAAW,gBACGvB,MAAI;EAAA,IAACwB,OAAI;GAAA,OAAEL,aAAa;;EAAAP,WACrBa,QAAQ;GACR,MAAMC,kBAAkBvB,sBAAsBsB,KAAK,CAACE,SAAS;GAE7D,OAAAJ,gBACGnB,eAAewB,UAAQ;IAAA,IAACC,QAAK;KAAA,OAAEJ,KAAK;;IAAA,IAAAb,WAAA;KAAA,OAAAW,gBAClCjB,mBAAmBsB,UAAQ;MAACC,OAAOH;MAAe,IAAAd,WAAA;OAAA,OAAAW,gBAChDlB,cAAcuB,UAAQ;QAAA,IAACC,QAAK;SAAA,OAAEJ,KAAK,CAACK;;QAAM,IAAAlB,WAAA;SAAA,OAAGK,MAAML;;QAAQ,CAAA;;MAAA,CAAA;;IAAA,CAAA;;EAInE,CAAA;;;;;;;;;AAcP,IAAaqB,kBAAkBhB,UAA4C;CACzE,OAAAM,gBAAQlB,cAAcuB,UAAQ;EAAA,IAACC,QAAK;GAAA,OAAEZ,MAAMa;;EAAM,IAAAlB,WAAA;GAAA,OAAGK,MAAML;;EAAQ,CAAA"}

package/dist/pixi-application/pixi-application.js.map

@@ -1 +1 @@
-{"version":3,"file":"pixi-application.js","names":[],"sources":["../../src/pixi-application/pixi-application.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { Application } from \"pixi.js\";\n\nexport type PixiApplicationProps = Partial<Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">>;\n\nexport const createPixiApplication = async (\n  props?: PixiApplicationProps,\n): Promise<Pixi.Application> => {\n  const app = new Application();\n  await app.init({\n    resolution: window.devicePixelRatio,\n    autoDensity: true,\n    ...props,\n  });\n\n  app.canvas.style.display = \"block\";\n  app.canvas.style.position = \"absolute\";\n  app.canvas.style.top = \"0\";\n  app.canvas.style.left = \"0\";\n  app.canvas.style.width = \"100%\";\n  app.canvas.style.height = \"100%\";\n\n  return app;\n};\n"],"mappings":";;AAKA,IAAa,wBAAwB,OACnC,UAC8B;CAC9B,MAAM,MAAM,IAAI,aAAa;AAC7B,OAAM,IAAI,KAAK;EACb,YAAY,OAAO;EACnB,aAAa;EACb,GAAG;EACJ,CAAC;AAEF,KAAI,OAAO,MAAM,UAAU;AAC3B,KAAI,OAAO,MAAM,WAAW;AAC5B,KAAI,OAAO,MAAM,MAAM;AACvB,KAAI,OAAO,MAAM,OAAO;AACxB,KAAI,OAAO,MAAM,QAAQ;AACzB,KAAI,OAAO,MAAM,SAAS;AAE1B,QAAO"}
+{"version":3,"file":"pixi-application.js","names":[],"sources":["../../src/pixi-application/pixi-application.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { Application } from \"pixi.js\";\n\nexport type PixiApplicationProps = Partial<Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">>;\n\nexport const createPixiApplication = async (\n  props?: PixiApplicationProps,\n): Promise<Pixi.Application> => {\n  const app = new Application();\n  await app.init({\n    resolution: window.devicePixelRatio,\n    autoDensity: true,\n    ...props,\n  });\n\n  app.canvas.style.display = \"block\";\n  app.canvas.style.position = \"absolute\";\n  app.canvas.style.top = \"0\";\n  app.canvas.style.left = \"0\";\n  app.canvas.style.width = \"100%\";\n  app.canvas.style.height = \"100%\";\n\n  return app;\n};\n"],"mappings":";;AAKA,IAAa,wBAAwB,OACnC,UAC8B;CAC9B,MAAM,MAAM,IAAI,aAAa;CAC7B,MAAM,IAAI,KAAK;EACb,YAAY,OAAO;EACnB,aAAa;EACb,GAAG;EACJ,CAAC;CAEF,IAAI,OAAO,MAAM,UAAU;CAC3B,IAAI,OAAO,MAAM,WAAW;CAC5B,IAAI,OAAO,MAAM,MAAM;CACvB,IAAI,OAAO,MAAM,OAAO;CACxB,IAAI,OAAO,MAAM,QAAQ;CACzB,IAAI,OAAO,MAAM,SAAS;CAE1B,OAAO"}

package/dist/pixi-canvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"pixi-canvas.js","names":["Pixi","JSX","onCleanup","onMount","bindRuntimeProps","ContainerProps","getPixiApp","PixiApplicationProvider","OmitColonEvents","T","K","PixiCanvasProps","children","Element","ref","el","HTMLDivElement","Omit","HTMLAttributes","Partial","ApplicationOptions","isDomPropKey","key","startsWith","test","splitPixiCanvasProps","props","wrapperProps","applicationOptions","value","Record","InnerPixiCanvas","canvasWrapElement","pixiApp","Application","Error","stage","Container","previousResizeTo","HTMLElement","Window","resizeObserver","ResizeObserver","resizeTo","queueResize","observe","disconnect","undefined","_el$","_tmpl$","_$use","userRef","_$spread","_$mergeProps","style","position","_$insert","canvas","PixiCanvas","_$createComponent"],"sources":["../src/pixi-canvas.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX } from \"solid-js\";\nimport { onCleanup, onMount } from \"solid-js\";\n\nimport { bindRuntimeProps } from \"./components\";\nimport type { ContainerProps } from \"./components\";\nimport { getPixiApp, PixiApplicationProvider } from \"./pixi-application\";\n\n// Helper type to remove colon event handlers from JSX attributes\ntype OmitColonEvents<T> = {\n  [K in keyof T as K extends `on:${string}` ? never : K]: T[K];\n};\n\nexport type PixiCanvasProps = {\n  children: JSX.Element;\n  ref?: (el: HTMLDivElement) => void;\n} & OmitColonEvents<Omit<JSX.HTMLAttributes<HTMLDivElement>, \"children\" | \"ref\">> &\n  Partial<Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">>;\n\nconst isDomPropKey = (key: string): boolean => {\n  if (key === \"class\" || key === \"classList\" || key === \"style\") return true;\n  if (key === \"id\" || key === \"title\" || key === \"role\" || key === \"tabIndex\") return true;\n  if (key.startsWith(\"aria-\") || key.startsWith(\"data-\")) return true;\n  if (/^on[A-Z]/.test(key)) return true;\n\n  return false;\n};\n\nconst splitPixiCanvasProps = (props: PixiCanvasProps) => {\n  const wrapperProps: JSX.HTMLAttributes<HTMLDivElement> = {};\n  const applicationOptions: Partial<Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">> = {};\n\n  for (const key in props) {\n    if (key === \"children\") continue;\n    const value = props[key as keyof PixiCanvasProps];\n\n    if (key === \"ref\" || isDomPropKey(key)) {\n      (wrapperProps as Record<string, unknown>)[key] = value;\n    } else {\n      (applicationOptions as Record<string, unknown>)[key] = value;\n    }\n  }\n\n  return { applicationOptions, wrapperProps };\n};\n\nconst InnerPixiCanvas = (props: {\n  children: JSX.Element;\n  wrapperProps?: JSX.HTMLAttributes<HTMLDivElement>;\n}): JSX.Element => {\n  let canvasWrapElement: HTMLDivElement | undefined;\n  let pixiApp: Pixi.Application;\n\n  try {\n    pixiApp = getPixiApp();\n  } catch {\n    throw new Error(\n      \"InnerPixiCanvas must be used within a PixiApplicationProvider or a PixiCanvas\",\n    );\n  }\n\n  bindRuntimeProps(pixiApp.stage, {\n    children: props.children,\n  } as ContainerProps<Pixi.Container>);\n\n  let previousResizeTo: HTMLElement | Window;\n  let resizeObserver: ResizeObserver | undefined;\n\n  onMount(() => {\n    if (!canvasWrapElement) return;\n    previousResizeTo = pixiApp.resizeTo;\n    pixiApp.resizeTo = canvasWrapElement;\n    pixiApp.queueResize();\n    resizeObserver = new ResizeObserver(() => {\n      pixiApp.queueResize();\n    });\n    resizeObserver.observe(canvasWrapElement);\n  });\n\n  onCleanup(() => {\n    if (!canvasWrapElement) return;\n    pixiApp.resizeTo = previousResizeTo;\n    resizeObserver?.disconnect();\n    resizeObserver = undefined;\n  });\n\n  return (\n    <div\n      {...props.wrapperProps}\n      ref={(el) => {\n        canvasWrapElement = el;\n        const userRef = props.wrapperProps?.ref;\n        if (typeof userRef === \"function\") {\n          userRef(el);\n        }\n      }}\n      style={{\n        position: \"relative\",\n        /* Disables the callout/menu on long-press */\n        [\"-webkit-touch-callout\"]: \"none\",\n        /* Disables text selection */\n        [\"-webkit-user-select\"]: \"none\",\n        [\"user-select\"]: \"none\",\n        ...(typeof props.wrapperProps?.style === \"object\" ? props.wrapperProps.style : {}),\n      }}\n    >\n      {pixiApp.canvas}\n    </div>\n  );\n};\n\n/**\n * PixiCanvas\n *\n * A small wrapper that mounts the PIXI application's canvas element into the DOM\n * and automatically resizes it.\n *\n * - Works with or without a surrounding `PixiApplicationProvider` component.\n * - If used inside `PixiApplicationProvider`, it will use the provided context.\n * - If used standalone, it will create its own PixiApplication and provide context.\n * - Accepts pixi-solid components as children, which will be rendered inside the canvas.\n *\n * Props:\n * @param props.children - JSX content to render inside the canvas wrapper.\n * @param props - DOM props for the wrapper and Pixi ApplicationOptions (except 'children' and 'resizeTo').\n */\n\nexport const PixiCanvas = (props: PixiCanvasProps): JSX.Element => {\n  const { applicationOptions, wrapperProps } = splitPixiCanvasProps(props);\n  return (\n    <PixiApplicationProvider {...applicationOptions}>\n      <InnerPixiCanvas wrapperProps={wrapperProps}>{props.children}</InnerPixiCanvas>\n    </PixiApplicationProvider>\n  );\n};\n"],"mappings":";;;;;;;AAmBA,IAAMqB,gBAAgBC,QAAyB;AAC7C,KAAIA,QAAQ,WAAWA,QAAQ,eAAeA,QAAQ,QAAS,QAAO;AACtE,KAAIA,QAAQ,QAAQA,QAAQ,WAAWA,QAAQ,UAAUA,QAAQ,WAAY,QAAO;AACpF,KAAIA,IAAIC,WAAW,QAAQ,IAAID,IAAIC,WAAW,QAAQ,CAAE,QAAO;AAC/D,KAAI,WAAWC,KAAKF,IAAI,CAAE,QAAO;AAEjC,QAAO;;AAGT,IAAMG,wBAAwBC,UAA2B;CACvD,MAAMC,eAAmD,EAAE;CAC3D,MAAMC,qBAAsF,EAAE;AAE9F,MAAK,MAAMN,OAAOI,OAAO;AACvB,MAAIJ,QAAQ,WAAY;EACxB,MAAMO,QAAQH,MAAMJ;AAEpB,MAAIA,QAAQ,SAASD,aAAaC,IAAI,CACnCK,cAAyCL,OAAOO;MAEhDD,oBAA+CN,OAAOO;;AAI3D,QAAO;EAAED;EAAoBD;EAAc;;AAG7C,IAAMI,mBAAmBL,UAGN;CACjB,IAAIM;CACJ,IAAIC;AAEJ,KAAI;AACFA,YAAU3B,YAAY;SAChB;AACN,QAAM,IAAI6B,MACR,gFACD;;AAGH/B,kBAAiB6B,QAAQG,OAAO,EAC9BxB,UAAUc,MAAMd,UACjB,CAAmC;CAEpC,IAAI0B;CACJ,IAAIG;AAEJtC,eAAc;AACZ,MAAI,CAAC6B,kBAAmB;AACxBM,qBAAmBL,QAAQU;AAC3BV,UAAQU,WAAWX;AACnBC,UAAQW,aAAa;AACrBH,mBAAiB,IAAIC,qBAAqB;AACxCT,WAAQW,aAAa;IACrB;AACFH,iBAAeI,QAAQb,kBAAkB;GACzC;AAEF9B,iBAAgB;AACd,MAAI,CAAC8B,kBAAmB;AACxBC,UAAQU,WAAWL;AACnBG,kBAAgBK,YAAY;AAC5BL,mBAAiBM,KAAAA;GACjB;AAEF,eAAA;EAAA,IAAAC,OAAAC,QAAA;AAAAC,OAGUnC,OAAO;AACXiB,uBAAoBjB;GACpB,MAAMoC,UAAUzB,MAAMC,cAAcb;AACpC,OAAI,OAAOqC,YAAY,WACrBA,SAAQpC,GAAG;KAEdiC,KAAA;AAAAI,SAAAJ,MAAAK,iBAPG3B,MAAMC,cAAY,EAAA,IAQtB2B,QAAK;AAAA,UAAE;IACLC,UAAU;KAET,0BAA0B;KAE1B,wBAAwB;KACxB,gBAAgB;IACjB,GAAI,OAAO7B,MAAMC,cAAc2B,UAAU,WAAW5B,MAAMC,aAAa2B,QAAQ,EAAE;IAClF;KAAA,CAAA,EAAA,OAAA,KAAA;AAAAE,SAAAR,YAEAf,QAAQwB,OAAM;AAAA,SAAAT;KAAA;;;;;;;;;;;;;;;;;AAqBrB,IAAaU,cAAchC,UAAwC;CACjE,MAAM,EAAEE,oBAAoBD,iBAAiBF,qBAAqBC,MAAM;AACxE,QAAAiC,gBACGpD,yBAAuB8C,WAAKzB,oBAAkB,EAAA,IAAAhB,WAAA;AAAA,SAAA+C,gBAC5C5B,iBAAe;GAAeJ;GAAY,IAAAf,WAAA;AAAA,WAAGc,MAAMd;;GAAQ,CAAA;IAAA,CAAA,CAAA"}
+{"version":3,"file":"pixi-canvas.js","names":["Pixi","JSX","onCleanup","onMount","bindRuntimeProps","ContainerProps","getPixiApp","PixiApplicationProvider","OmitColonEvents","T","K","PixiCanvasProps","children","Element","ref","el","HTMLDivElement","Omit","HTMLAttributes","Partial","ApplicationOptions","isDomPropKey","key","startsWith","test","splitPixiCanvasProps","props","wrapperProps","applicationOptions","value","Record","InnerPixiCanvas","canvasWrapElement","pixiApp","Application","Error","stage","Container","previousResizeTo","HTMLElement","Window","resizeObserver","ResizeObserver","resizeTo","queueResize","observe","disconnect","undefined","_el$","_tmpl$","_$use","userRef","_$spread","_$mergeProps","style","position","_$insert","canvas","PixiCanvas","_$createComponent"],"sources":["../src/pixi-canvas.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX } from \"solid-js\";\nimport { onCleanup, onMount } from \"solid-js\";\n\nimport { bindRuntimeProps } from \"./components\";\nimport type { ContainerProps } from \"./components\";\nimport { getPixiApp, PixiApplicationProvider } from \"./pixi-application\";\n\n// Helper type to remove colon event handlers from JSX attributes\ntype OmitColonEvents<T> = {\n  [K in keyof T as K extends `on:${string}` ? never : K]: T[K];\n};\n\nexport type PixiCanvasProps = {\n  children: JSX.Element;\n  ref?: (el: HTMLDivElement) => void;\n} & OmitColonEvents<Omit<JSX.HTMLAttributes<HTMLDivElement>, \"children\" | \"ref\">> &\n  Partial<Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">>;\n\nconst isDomPropKey = (key: string): boolean => {\n  if (key === \"class\" || key === \"classList\" || key === \"style\") return true;\n  if (key === \"id\" || key === \"title\" || key === \"role\" || key === \"tabIndex\") return true;\n  if (key.startsWith(\"aria-\") || key.startsWith(\"data-\")) return true;\n  if (/^on[A-Z]/.test(key)) return true;\n\n  return false;\n};\n\nconst splitPixiCanvasProps = (props: PixiCanvasProps) => {\n  const wrapperProps: JSX.HTMLAttributes<HTMLDivElement> = {};\n  const applicationOptions: Partial<Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">> = {};\n\n  for (const key in props) {\n    if (key === \"children\") continue;\n    const value = props[key as keyof PixiCanvasProps];\n\n    if (key === \"ref\" || isDomPropKey(key)) {\n      (wrapperProps as Record<string, unknown>)[key] = value;\n    } else {\n      (applicationOptions as Record<string, unknown>)[key] = value;\n    }\n  }\n\n  return { applicationOptions, wrapperProps };\n};\n\nconst InnerPixiCanvas = (props: {\n  children: JSX.Element;\n  wrapperProps?: JSX.HTMLAttributes<HTMLDivElement>;\n}): JSX.Element => {\n  let canvasWrapElement: HTMLDivElement | undefined;\n  let pixiApp: Pixi.Application;\n\n  try {\n    pixiApp = getPixiApp();\n  } catch {\n    throw new Error(\n      \"InnerPixiCanvas must be used within a PixiApplicationProvider or a PixiCanvas\",\n    );\n  }\n\n  bindRuntimeProps(pixiApp.stage, {\n    children: props.children,\n  } as ContainerProps<Pixi.Container>);\n\n  let previousResizeTo: HTMLElement | Window;\n  let resizeObserver: ResizeObserver | undefined;\n\n  onMount(() => {\n    if (!canvasWrapElement) return;\n    previousResizeTo = pixiApp.resizeTo;\n    pixiApp.resizeTo = canvasWrapElement;\n    pixiApp.queueResize();\n    resizeObserver = new ResizeObserver(() => {\n      pixiApp.queueResize();\n    });\n    resizeObserver.observe(canvasWrapElement);\n  });\n\n  onCleanup(() => {\n    if (!canvasWrapElement) return;\n    pixiApp.resizeTo = previousResizeTo;\n    resizeObserver?.disconnect();\n    resizeObserver = undefined;\n  });\n\n  return (\n    <div\n      {...props.wrapperProps}\n      ref={(el) => {\n        canvasWrapElement = el;\n        const userRef = props.wrapperProps?.ref;\n        if (typeof userRef === \"function\") {\n          userRef(el);\n        }\n      }}\n      style={{\n        position: \"relative\",\n        /* Disables the callout/menu on long-press */\n        [\"-webkit-touch-callout\"]: \"none\",\n        /* Disables text selection */\n        [\"-webkit-user-select\"]: \"none\",\n        [\"user-select\"]: \"none\",\n        ...(typeof props.wrapperProps?.style === \"object\" ? props.wrapperProps.style : {}),\n      }}\n    >\n      {pixiApp.canvas}\n    </div>\n  );\n};\n\n/**\n * PixiCanvas\n *\n * A small wrapper that mounts the PIXI application's canvas element into the DOM\n * and automatically resizes it.\n *\n * - Works with or without a surrounding `PixiApplicationProvider` component.\n * - If used inside `PixiApplicationProvider`, it will use the provided context.\n * - If used standalone, it will create its own PixiApplication and provide context.\n * - Accepts pixi-solid components as children, which will be rendered inside the canvas.\n *\n * Props:\n * @param props.children - JSX content to render inside the canvas wrapper.\n * @param props - DOM props for the wrapper and Pixi ApplicationOptions (except 'children' and 'resizeTo').\n */\n\nexport const PixiCanvas = (props: PixiCanvasProps): JSX.Element => {\n  const { applicationOptions, wrapperProps } = splitPixiCanvasProps(props);\n  return (\n    <PixiApplicationProvider {...applicationOptions}>\n      <InnerPixiCanvas wrapperProps={wrapperProps}>{props.children}</InnerPixiCanvas>\n    </PixiApplicationProvider>\n  );\n};\n"],"mappings":";;;;;;;AAmBA,IAAMqB,gBAAgBC,QAAyB;CAC7C,IAAIA,QAAQ,WAAWA,QAAQ,eAAeA,QAAQ,SAAS,OAAO;CACtE,IAAIA,QAAQ,QAAQA,QAAQ,WAAWA,QAAQ,UAAUA,QAAQ,YAAY,OAAO;CACpF,IAAIA,IAAIC,WAAW,QAAQ,IAAID,IAAIC,WAAW,QAAQ,EAAE,OAAO;CAC/D,IAAI,WAAWC,KAAKF,IAAI,EAAE,OAAO;CAEjC,OAAO;;AAGT,IAAMG,wBAAwBC,UAA2B;CACvD,MAAMC,eAAmD,EAAE;CAC3D,MAAMC,qBAAsF,EAAE;CAE9F,KAAK,MAAMN,OAAOI,OAAO;EACvB,IAAIJ,QAAQ,YAAY;EACxB,MAAMO,QAAQH,MAAMJ;EAEpB,IAAIA,QAAQ,SAASD,aAAaC,IAAI,EACpC,aAA0CA,OAAOO;OAEjD,mBAAgDP,OAAOO;;CAI3D,OAAO;EAAED;EAAoBD;EAAc;;AAG7C,IAAMI,mBAAmBL,UAGN;CACjB,IAAIM;CACJ,IAAIC;CAEJ,IAAI;EACFA,UAAU3B,YAAY;SAChB;EACN,MAAM,IAAI6B,MACR,gFACD;;CAGH/B,iBAAiB6B,QAAQG,OAAO,EAC9BxB,UAAUc,MAAMd,UACjB,CAAmC;CAEpC,IAAI0B;CACJ,IAAIG;CAEJtC,cAAc;EACZ,IAAI,CAAC6B,mBAAmB;EACxBM,mBAAmBL,QAAQU;EAC3BV,QAAQU,WAAWX;EACnBC,QAAQW,aAAa;EACrBH,iBAAiB,IAAIC,qBAAqB;GACxCT,QAAQW,aAAa;IACrB;EACFH,eAAeI,QAAQb,kBAAkB;GACzC;CAEF9B,gBAAgB;EACd,IAAI,CAAC8B,mBAAmB;EACxBC,QAAQU,WAAWL;EACnBG,gBAAgBK,YAAY;EAC5BL,iBAAiBM,KAAAA;GACjB;CAEF,cAAA;EAAA,IAAAC,OAAAC,QAAA;EAAAC,KAGUnC,OAAO;GACXiB,oBAAoBjB;GACpB,MAAMoC,UAAUzB,MAAMC,cAAcb;GACpC,IAAI,OAAOqC,YAAY,YACrBA,QAAQpC,GAAG;KAEdiC,KAAA;EAAAI,OAAAJ,MAAAK,iBAPG3B,MAAMC,cAAY,EAAA,IAQtB2B,QAAK;GAAA,OAAE;IACLC,UAAU;KAET,0BAA0B;KAE1B,wBAAwB;KACxB,gBAAgB;IACjB,GAAI,OAAO7B,MAAMC,cAAc2B,UAAU,WAAW5B,MAAMC,aAAa2B,QAAQ,EAAE;IAClF;KAAA,CAAA,EAAA,OAAA,KAAA;EAAAE,OAAAR,YAEAf,QAAQwB,OAAM;EAAA,OAAAT;KAAA;;;;;;;;;;;;;;;;;AAqBrB,IAAaU,cAAchC,UAAwC;CACjE,MAAM,EAAEE,oBAAoBD,iBAAiBF,qBAAqBC,MAAM;CACxE,OAAAiC,gBACGpD,yBAAuB8C,WAAKzB,oBAAkB,EAAA,IAAAhB,WAAA;EAAA,OAAA+C,gBAC5C5B,iBAAe;GAAeJ;GAAY,IAAAf,WAAA;IAAA,OAAGc,MAAMd;;GAAQ,CAAA;IAAA,CAAA,CAAA"}

package/dist/types/index.d.ts

@@ -2,8 +2,7 @@ export type { AnimatedSpriteProps, ContainerProps, LeafProps, SpriteProps, Tilin
 export { onResize } from "./on-resize";
 export { onTick } from "./on-tick";
 export type { PixiApplicationProps } from "./pixi-application";
-export { getPixiApp, getTicker, PixiApplicationProvider, TickerProvider } from "./pixi-application";
-export { createAsyncDelay, delay } from "./delay";
+export { getPixiApp, getTicker, getRenderer, PixiApplicationProvider, TickerProvider, } from "./pixi-application";
 export type { PixiCanvasProps } from "./pixi-canvas";
 export { PixiCanvas } from "./pixi-canvas";
 export { AnimatedSprite, BitmapText, Container, Graphics, HTMLText, MeshPlane, MeshRope, NineSliceSprite, ParticleContainer, PerspectiveMesh, RenderContainer, RenderLayer, Sprite, Text, TilingSprite, } from "./components";

package/dist/types/pixi-application/context.d.ts

@@ -1,7 +1,5 @@
 import type * as Pixi from "pixi.js";
 import type { PixiScreenDimensions } from "../use-pixi-screen/pixi-screen-store";
-export declare const PixiAppContext: import("solid-js").Context<{
-    app: Pixi.Application;
-    pixiScreenStore: Readonly<PixiScreenDimensions>;
-} | undefined>;
+export declare const PixiAppContext: import("solid-js").Context<Pixi.Application<Pixi.Renderer> | undefined>;
 export declare const TickerContext: import("solid-js").Context<Pixi.Ticker | undefined>;
+export declare const ScreenStoreContext: import("solid-js").Context<Readonly<PixiScreenDimensions> | undefined>;

package/dist/types/pixi-application/get-renderer.d.ts

@@ -0,0 +1,8 @@
+import type * as Pixi from "pixi.js";
+/**
+ * A custom SolidJS hook to access the root Pixi Renderer instance.
+ * This hook must be called from a component that is a descendant of `PixiApplicationProvider` or `PixiCanvas`.
+ *
+ * @returns The Pixi.Renderer instance.
+ */
+export declare const getRenderer: () => Pixi.Renderer;

package/dist/types/pixi-application/get-ticker.d.ts

@@ -1,12 +1,8 @@
 import type * as Pixi from "pixi.js";
 /**
- * getTicker
+ * A custom SolidJS hook that provides access to the Pixi Ticker instance.
+ * This hook must be called from a component that is a descendant of `PixiApplicationProvider`, `PixiCanvas` or `TickerProvider`.
  *
- * A custom SolidJS hook that provides access to the PIXI.Application's shared Ticker instance.
- * This hook must be called from a component that is a descendant of `PixiApplication`.
- * Or a descendant of `TickerProvider` if being used for testing without an application.
- *
- * @returns The PIXI.Ticker instance from the application context.
- * @throws Will throw an error if used outside of a `PixiApplication` or `TickerProvider` context.
+ * @returns The Pixi.Ticker instance from the nearest context provider.
  */
 export declare const getTicker: () => Pixi.Ticker;

package/dist/types/pixi-application/index.d.ts

@@ -1,6 +1,7 @@
-export { PixiAppContext, TickerContext } from "./context";
+export { PixiAppContext, TickerContext, ScreenStoreContext } from "./context";
 export { getPixiApp } from "./get-pixi-app";
 export { getTicker } from "./get-ticker";
 export { createPixiApplication } from "./pixi-application";
 export type { PixiApplicationProps } from "./pixi-application-provider";
 export { PixiApplicationProvider, TickerProvider } from "./pixi-application-provider";
+export { getRenderer } from "./get-renderer";

package/dist/types/testing/index.d.ts

@@ -1,9 +1,3 @@
-import type { JSX } from "solid-js";
-export declare const withTestRoot: <T>(setup: () => T) => {
-    value: T;
-    dispose: () => void;
-};
-/**
- * Calls pixi solid components in a pure Solid root without mounting to the Canvas.
- */
-export declare const mountHeadless: (component: () => JSX.Element) => (() => void);
+export { mountHeadless, withTestRoot } from "./test-root";
+export { createMockApp, createMockRenderer, TestPixiProvider } from "./pixi-renderer-mock";
+export type { MockRenderer } from "./pixi-renderer-mock";

package/dist/types/testing/pixi-renderer-mock.d.ts

@@ -0,0 +1,24 @@
+import type * as Pixi from "pixi.js";
+import type { JSX, ParentProps } from "solid-js";
+export type MockRenderer = {
+    screen: {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    };
+    addListener: (event: string, listener: () => void) => void;
+    removeListener: (event: string, listener: () => void) => void;
+    emitResize: (nextScreen?: Partial<{
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    }>) => void;
+};
+export declare const createMockRenderer: () => MockRenderer;
+export declare const createMockApp: (renderer: MockRenderer) => Pixi.Application;
+export declare const TestPixiProvider: (props: ParentProps<{
+    app: Pixi.Application;
+    renderer: MockRenderer;
+}>) => JSX.Element;

package/dist/types/testing/test-root.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from "solid-js";
+export declare const withTestRoot: <T>(setup: () => T) => {
+    value: T;
+    dispose: () => void;
+};
+/**
+ * Calls pixi solid components in a pure Solid root without mounting to the Canvas.
+ */
+export declare const mountHeadless: (component: () => JSX.Element) => (() => void);

package/dist/types/testing/test-root.test.d.ts

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

package/dist/types/use-pixi-screen/use-pixi-screen.d.ts

@@ -1,11 +1,10 @@
 import type { PixiScreenDimensions } from "./pixi-screen-store";
 /**
  *
- * A hook that provides the current dimensions of the Pixi application's screen as a reactive object.
- * The properties of the returned object will update automatically when the screen size changes and can be subscribed to reactively.
+ * A hook that provides a reactive object with the current dimensions of the Pixi application's screen.
+ * The properties of the returned object update automatically when the screen size changes.
  *
  * This hook must be called from a component that is a descendant of `PixiCanvas` or `PixiApplicationProvider`.
  *
- * @returns An object containing the width and height of the Pixi screen.
  */
 export declare const usePixiScreen: () => Readonly<PixiScreenDimensions>;

package/dist/types/use-pixi-screen/use-pixi-screen.test.d.ts

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

package/dist/types/{delay.d.ts → utils/delay.d.ts}

@@ -1,7 +1,8 @@
+export type AsyncDelayFunction = (delayMs: number, signal?: AbortSignal) => Promise<void>;
 /**
  * Runs a callback when a given number of milliseconds has passed on the ticker.
  *
- * It is guaranteed to be in sync with the shared ticker and uses accumulated deltaMs not an external time measurement.
+ * It is guaranteed to be in sync with the current Ticker context and uses accumulated deltaMs not an external time measurement.
  *
  * @param delayMs - Number of milliseconds to wait (measured in the ticker's time units).
  *
@@ -27,4 +28,4 @@ export declare const delay: (delayMs: number, callback?: () => void) => void;
  *
  * @throws {Error} If called outside of a `PixiApplicationProvider` or `TickerProvider` context.
  */
-export declare const createAsyncDelay: () => ((delayMs: number, signal?: AbortSignal) => Promise<void>);
+export declare const createAsyncDelay: () => AsyncDelayFunction;

package/dist/types/utils/index.d.ts

@@ -1,5 +1,7 @@
-export type { ObjectFitMode } from "./object-fit";
-export { objectFit } from "./object-fit";
+export type { ObjectFitMode, ObjectPosition, ObjectFitContainerProps } from "./object-fit";
+export { objectFit, ObjectFitContainer } from "./object-fit";
 export { useSmoothDamp } from "./smooth-damp";
 export type { Spring, UseSpringProps } from "./spring";
 export { useSpring } from "./spring";
+export { createAsyncDelay, delay } from "./delay";
+export type { AsyncDelayFunction } from "./delay";

package/dist/types/utils/object-fit-container.test.d.ts

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

package/dist/types/utils/object-fit.d.ts

@@ -1,12 +1,51 @@
 import type * as Pixi from "pixi.js";
-export type ObjectFitMode = "cover" | "contain" | "fill" | "scale-down";
+import type { JSX } from "solid-js";
+import type { PixiComponentProps } from "../components";
+export type ObjectFitMode = "cover" | "contain" | "fill" | "scale-down" | "none";
+export type ObjectPosition = "center" | "top" | "right" | "bottom" | "left" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | {
+    x: number;
+    y: number;
+};
 /**
  * Scale an object to fit within the given bounds according to the specified fit mode.
+ *
+ * This function sets the scale and position properties of the object to fit within the bounds while respecting the aspect ratio based on the fit mode.
+ *
  * @param object The object to be scaled.
  * @param bounds The bounds it should fit within.
  * @param fitMode The object fit mode to apply.
+ * @param position Optional object position anchor. Defaults to center.
  */
 export declare const objectFit: (object: Pixi.Container, bounds: {
     width: number;
     height: number;
-}, fitMode: ObjectFitMode) => void;
+}, fitMode: ObjectFitMode, position?: ObjectPosition) => void;
+export type ObjectFitContainerProps = PixiComponentProps & {
+    width: number;
+    height: number;
+    children: JSX.Element;
+    fitMode: ObjectFitMode;
+    objectPosition?: ObjectPosition;
+    observeBounds?: boolean;
+};
+/**
+ * This component allows the parent container to dictate the size of its children.
+ *
+ * Each child is wrapped in a container and object-fit scaling is applied to the wrapping container based on the width and height values passed as props.
+ *
+ * If multiple children are passed, each one will be wrapped, scaled and positioned independently according to the fit mode and object position.
+ *
+ * If you want to apply the same object-fit behavior to multiple children as a group, wrap them in a parent `Container` and pass that single container as the child to `ObjectFitContainer`.
+ *
+ * Accepts all standard pixi-solid `Container` props (position, scale, mask, events, etc.) on the outer
+ * container. The `width`, `height`, `fitMode`, and `objectPosition` props control how children are scaled
+ * and aligned within the bounds. Set `observeBounds={true}` to enable ticker-based local-bounds watching.
+ *
+ * @example
+ * ```tsx
+ * <ObjectFitContainer x={100} y={100} width={800} height={600} fitMode="contain" objectPosition="top-left">
+ *   <Sprite texture={texture} />
+ * </ObjectFitContainer>
+ * ```
+ */
+export declare const ObjectFitContainer: (props: ObjectFitContainerProps) => JSX.Element;

package/dist/types/utils/object-fit.test.d.ts

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

package/dist/use-pixi-screen/pixi-screen-store.js.map

@@ -1 +1 @@
-{"version":3,"file":"pixi-screen-store.js","names":[],"sources":["../../src/use-pixi-screen/pixi-screen-store.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { batch, onCleanup } from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\n\nexport type PixiScreenDimensions = {\n  width: number;\n  height: number;\n  left: number;\n  right: number;\n  bottom: number;\n  top: number;\n  x: number;\n  y: number;\n};\n\nexport const createPixiScreenStore = (renderer: Pixi.Renderer): Readonly<PixiScreenDimensions> => {\n  const [pixiScreen, setPixiScreen] = createStore<PixiScreenDimensions>({\n    width: renderer.screen.width,\n    height: renderer.screen.height,\n    get left() {\n      return this.x;\n    },\n    get right() {\n      return this.x + this.width;\n    },\n    get top() {\n      return this.y;\n    },\n    get bottom() {\n      return this.y + this.height;\n    },\n    x: renderer.screen.x,\n    y: renderer.screen.y,\n  });\n\n  const handleResize = () => {\n    batch(() => {\n      setPixiScreen(\"width\", renderer.screen.width);\n      setPixiScreen(\"height\", renderer.screen.height);\n      setPixiScreen(\"x\", renderer.screen.x);\n      setPixiScreen(\"y\", renderer.screen.y);\n    });\n  };\n\n  renderer.addListener(\"resize\", handleResize);\n\n  onCleanup(() => {\n    renderer.removeListener(\"resize\", handleResize);\n  });\n\n  return pixiScreen;\n};\n"],"mappings":";;;AAeA,IAAa,yBAAyB,aAA4D;CAChG,MAAM,CAAC,YAAY,iBAAiB,YAAkC;EACpE,OAAO,SAAS,OAAO;EACvB,QAAQ,SAAS,OAAO;EACxB,IAAI,OAAO;AACT,UAAO,KAAK;;EAEd,IAAI,QAAQ;AACV,UAAO,KAAK,IAAI,KAAK;;EAEvB,IAAI,MAAM;AACR,UAAO,KAAK;;EAEd,IAAI,SAAS;AACX,UAAO,KAAK,IAAI,KAAK;;EAEvB,GAAG,SAAS,OAAO;EACnB,GAAG,SAAS,OAAO;EACpB,CAAC;CAEF,MAAM,qBAAqB;AACzB,cAAY;AACV,iBAAc,SAAS,SAAS,OAAO,MAAM;AAC7C,iBAAc,UAAU,SAAS,OAAO,OAAO;AAC/C,iBAAc,KAAK,SAAS,OAAO,EAAE;AACrC,iBAAc,KAAK,SAAS,OAAO,EAAE;IACrC;;AAGJ,UAAS,YAAY,UAAU,aAAa;AAE5C,iBAAgB;AACd,WAAS,eAAe,UAAU,aAAa;GAC/C;AAEF,QAAO"}
+{"version":3,"file":"pixi-screen-store.js","names":[],"sources":["../../src/use-pixi-screen/pixi-screen-store.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { batch, onCleanup } from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\n\nexport type PixiScreenDimensions = {\n  width: number;\n  height: number;\n  left: number;\n  right: number;\n  bottom: number;\n  top: number;\n  x: number;\n  y: number;\n};\n\nexport const createPixiScreenStore = (renderer: Pixi.Renderer): Readonly<PixiScreenDimensions> => {\n  const [pixiScreen, setPixiScreen] = createStore<PixiScreenDimensions>({\n    width: renderer.screen.width,\n    height: renderer.screen.height,\n    get left() {\n      return this.x;\n    },\n    get right() {\n      return this.x + this.width;\n    },\n    get top() {\n      return this.y;\n    },\n    get bottom() {\n      return this.y + this.height;\n    },\n    x: renderer.screen.x,\n    y: renderer.screen.y,\n  });\n\n  const handleResize = () => {\n    batch(() => {\n      setPixiScreen(\"width\", renderer.screen.width);\n      setPixiScreen(\"height\", renderer.screen.height);\n      setPixiScreen(\"x\", renderer.screen.x);\n      setPixiScreen(\"y\", renderer.screen.y);\n    });\n  };\n\n  renderer.addListener(\"resize\", handleResize);\n\n  onCleanup(() => {\n    renderer.removeListener(\"resize\", handleResize);\n  });\n\n  return pixiScreen;\n};\n"],"mappings":";;;AAeA,IAAa,yBAAyB,aAA4D;CAChG,MAAM,CAAC,YAAY,iBAAiB,YAAkC;EACpE,OAAO,SAAS,OAAO;EACvB,QAAQ,SAAS,OAAO;EACxB,IAAI,OAAO;GACT,OAAO,KAAK;;EAEd,IAAI,QAAQ;GACV,OAAO,KAAK,IAAI,KAAK;;EAEvB,IAAI,MAAM;GACR,OAAO,KAAK;;EAEd,IAAI,SAAS;GACX,OAAO,KAAK,IAAI,KAAK;;EAEvB,GAAG,SAAS,OAAO;EACnB,GAAG,SAAS,OAAO;EACpB,CAAC;CAEF,MAAM,qBAAqB;EACzB,YAAY;GACV,cAAc,SAAS,SAAS,OAAO,MAAM;GAC7C,cAAc,UAAU,SAAS,OAAO,OAAO;GAC/C,cAAc,KAAK,SAAS,OAAO,EAAE;GACrC,cAAc,KAAK,SAAS,OAAO,EAAE;IACrC;;CAGJ,SAAS,YAAY,UAAU,aAAa;CAE5C,gBAAgB;EACd,SAAS,eAAe,UAAU,aAAa;GAC/C;CAEF,OAAO"}

package/dist/use-pixi-screen/use-pixi-screen.js

@@ -1,19 +1,18 @@
-import { PixiAppContext } from "../pixi-application/context.js";
+import { ScreenStoreContext } from "../pixi-application/context.js";
 import { useContext } from "solid-js";
 //#region src/use-pixi-screen/use-pixi-screen.ts
 /**
 *
-* A hook that provides the current dimensions of the Pixi application's screen as a reactive object.
-* The properties of the returned object will update automatically when the screen size changes and can be subscribed to reactively.
+* A hook that provides a reactive object with the current dimensions of the Pixi application's screen.
+* The properties of the returned object update automatically when the screen size changes.
 *
 * This hook must be called from a component that is a descendant of `PixiCanvas` or `PixiApplicationProvider`.
 *
-* @returns An object containing the width and height of the Pixi screen.
 */
 var usePixiScreen = () => {
-	const pixiAppContext = useContext(PixiAppContext);
-	if (!pixiAppContext) throw new Error("usePixiScreen must be used within a PixiApplicationProvider or PixiCanvas");
-	return pixiAppContext.pixiScreenStore;
+	const pixiScreenStore = useContext(ScreenStoreContext);
+	if (!pixiScreenStore) throw new Error("usePixiScreen must be used within a PixiApplicationProvider or PixiCanvas");
+	return pixiScreenStore;
 };
 //#endregion
 export { usePixiScreen };

package/dist/use-pixi-screen/use-pixi-screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-pixi-screen.js","names":[],"sources":["../../src/use-pixi-screen/use-pixi-screen.ts"],"sourcesContent":["import { useContext } from \"solid-js\";\n\nimport { PixiAppContext } from \"../pixi-application\";\n\nimport type { PixiScreenDimensions } from \"./pixi-screen-store\";\n\n/**\n *\n * A hook that provides the current dimensions of the Pixi application's screen as a reactive object.\n * The properties of the returned object will update automatically when the screen size changes and can be subscribed to reactively.\n *\n * This hook must be called from a component that is a descendant of `PixiCanvas` or `PixiApplicationProvider`.\n *\n * @returns An object containing the width and height of the Pixi screen.\n */\nexport const usePixiScreen = (): Readonly<PixiScreenDimensions> => {\n  const pixiAppContext = useContext(PixiAppContext);\n  if (!pixiAppContext) {\n    throw new Error(\"usePixiScreen must be used within a PixiApplicationProvider or PixiCanvas\");\n  }\n  return pixiAppContext.pixiScreenStore;\n};\n"],"mappings":";;;;;;;;;;;;AAeA,IAAa,sBAAsD;CACjE,MAAM,iBAAiB,WAAW,eAAe;AACjD,KAAI,CAAC,eACH,OAAM,IAAI,MAAM,4EAA4E;AAE9F,QAAO,eAAe"}
+{"version":3,"file":"use-pixi-screen.js","names":[],"sources":["../../src/use-pixi-screen/use-pixi-screen.ts"],"sourcesContent":["import { useContext } from \"solid-js\";\n\nimport { ScreenStoreContext } from \"../pixi-application\";\n\nimport type { PixiScreenDimensions } from \"./pixi-screen-store\";\n\n/**\n *\n * A hook that provides a reactive object with the current dimensions of the Pixi application's screen.\n * The properties of the returned object update automatically when the screen size changes.\n *\n * This hook must be called from a component that is a descendant of `PixiCanvas` or `PixiApplicationProvider`.\n *\n */\nexport const usePixiScreen = (): Readonly<PixiScreenDimensions> => {\n  const pixiScreenStore = useContext(ScreenStoreContext);\n  if (!pixiScreenStore) {\n    throw new Error(\"usePixiScreen must be used within a PixiApplicationProvider or PixiCanvas\");\n  }\n  return pixiScreenStore;\n};\n"],"mappings":";;;;;;;;;;;AAcA,IAAa,sBAAsD;CACjE,MAAM,kBAAkB,WAAW,mBAAmB;CACtD,IAAI,CAAC,iBACH,MAAM,IAAI,MAAM,4EAA4E;CAE9F,OAAO"}

package/dist/{delay.js → utils/delay.js}

@@ -1,10 +1,10 @@
-import { TickerContext } from "./pixi-application/context.js";
+import { TickerContext } from "../pixi-application/context.js";
 import { useContext } from "solid-js";
-//#region src/delay.ts
+//#region src/utils/delay.ts
 /**
 * Runs a callback when a given number of milliseconds has passed on the ticker.
 *
-* It is guaranteed to be in sync with the shared ticker and uses accumulated deltaMs not an external time measurement.
+* It is guaranteed to be in sync with the current Ticker context and uses accumulated deltaMs not an external time measurement.
 *
 * @param delayMs - Number of milliseconds to wait (measured in the ticker's time units).
 *

package/dist/utils/delay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"delay.js","names":[],"sources":["../../src/utils/delay.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { useContext } from \"solid-js\";\n\nimport { TickerContext } from \"../pixi-application\";\n\nexport type AsyncDelayFunction = (delayMs: number, signal?: AbortSignal) => Promise<void>;\n\n/**\n * Runs a callback when a given number of milliseconds has passed on the ticker.\n *\n * It is guaranteed to be in sync with the current Ticker context and uses accumulated deltaMs not an external time measurement.\n *\n * @param delayMs - Number of milliseconds to wait (measured in the ticker's time units).\n *\n * @param callback - A callback function that will fire when the delayMs time has passed.\n *\n * @throws {Error} If called outside of a `PixiApplicationProvider` or `TickerProvider` context.\n *\n * @note It will not run the callback if the ticker is paused or stopped.\n *\n */\nexport const delay = (delayMs: number, callback?: () => void): void => {\n  const ticker = useContext(TickerContext);\n  if (!ticker) {\n    throw new Error(\"`delay` must be used within a PixiApplicationProvider or a TickerProvider.\");\n  }\n\n  let timeDelayed = 0;\n\n  const internalCallback = () => {\n    timeDelayed += ticker.deltaMS;\n    if (timeDelayed < delayMs) return;\n    callback?.();\n    ticker.remove(internalCallback);\n  };\n\n  ticker.add(internalCallback);\n};\n\nconst asyncDelay = async (ticker: Pixi.Ticker, delayMs: number, signal?: AbortSignal) => {\n  let timeDelayed = 0;\n  let resolvePromise: (value: void | PromiseLike<void>) => void;\n\n  const promise = new Promise<void>((resolve) => {\n    resolvePromise = resolve;\n  });\n\n  const internalCallback = () => {\n    timeDelayed += ticker.deltaMS;\n    if (timeDelayed < delayMs) return;\n    resolvePromise();\n  };\n\n  const handleAbort = () => {\n    ticker.remove(internalCallback);\n    resolvePromise();\n  };\n\n  if (signal?.aborted) {\n    // Already aborted before we even started\n    return;\n  }\n\n  signal?.addEventListener(\"abort\", handleAbort);\n\n  ticker.add(internalCallback);\n  await promise;\n  ticker.remove(internalCallback);\n  signal?.removeEventListener(\"abort\", handleAbort);\n};\n\n/**\n * Create a delay function that waits until a given number of milliseconds has passed on the current Ticker context before resolving.\n *\n * This function must be called inside a `PixiApplicationProvider` or `TickerProvider` context.\n *\n * @param signal - Optional AbortSignal to resolve the delay early\n * @returns An async function we can await to delay events in sync with time passed on the Ticker.\n *\n * Simply await for it to resolve in an async context. If the signal aborts, the promise resolves immediately.\n *\n * @note It will not resolve if the ticker is paused or stopped.\n *\n * @throws {Error} If called outside of a `PixiApplicationProvider` or `TickerProvider` context.\n */\nexport const createAsyncDelay = (): AsyncDelayFunction => {\n  const ticker = useContext(TickerContext);\n\n  if (!ticker) {\n    throw new Error(\n      \"`createAsyncDelay` must be used within a PixiApplicationProvider or a TickerProvider. The returned delay function can be called in an async context but `createAsyncDelay` must be called in a synchronous scope within a PixiApplicationProvider or a TickerProvider\",\n    );\n  }\n  const delayWithTicker = (delayMs: number, signal?: AbortSignal) =>\n    asyncDelay(ticker, delayMs, signal);\n\n  return delayWithTicker;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,IAAa,SAAS,SAAiB,aAAgC;CACrE,MAAM,SAAS,WAAW,cAAc;CACxC,IAAI,CAAC,QACH,MAAM,IAAI,MAAM,6EAA6E;CAG/F,IAAI,cAAc;CAElB,MAAM,yBAAyB;EAC7B,eAAe,OAAO;EACtB,IAAI,cAAc,SAAS;EAC3B,YAAY;EACZ,OAAO,OAAO,iBAAiB;;CAGjC,OAAO,IAAI,iBAAiB;;AAG9B,IAAM,aAAa,OAAO,QAAqB,SAAiB,WAAyB;CACvF,IAAI,cAAc;CAClB,IAAI;CAEJ,MAAM,UAAU,IAAI,SAAe,YAAY;EAC7C,iBAAiB;GACjB;CAEF,MAAM,yBAAyB;EAC7B,eAAe,OAAO;EACtB,IAAI,cAAc,SAAS;EAC3B,gBAAgB;;CAGlB,MAAM,oBAAoB;EACxB,OAAO,OAAO,iBAAiB;EAC/B,gBAAgB;;CAGlB,IAAI,QAAQ,SAEV;CAGF,QAAQ,iBAAiB,SAAS,YAAY;CAE9C,OAAO,IAAI,iBAAiB;CAC5B,MAAM;CACN,OAAO,OAAO,iBAAiB;CAC/B,QAAQ,oBAAoB,SAAS,YAAY;;;;;;;;;;;;;;;;AAiBnD,IAAa,yBAA6C;CACxD,MAAM,SAAS,WAAW,cAAc;CAExC,IAAI,CAAC,QACH,MAAM,IAAI,MACR,wQACD;CAEH,MAAM,mBAAmB,SAAiB,WACxC,WAAW,QAAQ,SAAS,OAAO;CAErC,OAAO"}

package/dist/utils/index.js

@@ -1,4 +1,5 @@
-import { objectFit } from "./object-fit.js";
+import { ObjectFitContainer, objectFit } from "./object-fit.js";
 import { useSmoothDamp } from "./smooth-damp.js";
 import { useSpring } from "./spring.js";
-export { objectFit, useSmoothDamp, useSpring };
+import { createAsyncDelay, delay } from "./delay.js";
+export { ObjectFitContainer, createAsyncDelay, delay, objectFit, useSmoothDamp, useSpring };

package/dist/utils/object-fit.js

@@ -1,13 +1,11 @@
-//#region src/utils/object-fit.ts
-/**
-* Scale an object to fit within the given bounds according to the specified fit mode.
-* @param object The object to be scaled.
-* @param bounds The bounds it should fit within.
-* @param fitMode The object fit mode to apply.
-*/
-var objectFit = (object, bounds, fitMode) => {
-	const originalWidth = object.width / object.scale.x;
-	const originalHeight = object.height / object.scale.y;
+import { onTick } from "../on-tick.js";
+import { Container } from "../components/components.js";
+import { Index, children, createEffect, on, onCleanup, splitProps } from "solid-js";
+import { createComponent, mergeProps } from "solid-js/web";
+//#region src/utils/object-fit.tsx
+var objectFitWithLocalBounds = (object, bounds, fitMode, position, localBounds) => {
+	const originalWidth = localBounds.width;
+	const originalHeight = localBounds.height;
 	if (originalWidth === 0 || originalHeight === 0 || bounds.width === 0 || bounds.height === 0) return;
 	const widthRatio = bounds.width / originalWidth;
 	const heightRatio = bounds.height / originalHeight;
@@ -31,22 +29,162 @@ var objectFit = (object, bounds, fitMode) => {
 			scaleY = heightRatio;
 			break;
 		case "scale-down":
-			if (originalWidth <= bounds.width && originalHeight <= bounds.height) {
-				scaleX = 1;
-				scaleY = 1;
-			} else {
-				const scaleDown = Math.min(widthRatio, heightRatio);
-				scaleX = scaleDown;
-				scaleY = scaleDown;
-			}
+			scaleX = scaleY = Math.min(1, Math.min(widthRatio, heightRatio));
 			break;
-		default: break;
+		case "none": break;
 	}
 	object.scale.set(scaleX, scaleY);
-	object.x = (bounds.width - object.width) / 2;
-	object.y = (bounds.height - object.height) / 2;
+	const resolvedPosition = resolveObjectPosition(position);
+	const scaledWidth = localBounds.width * scaleX;
+	const scaledHeight = localBounds.height * scaleY;
+	object.x = -localBounds.x * scaleX + (bounds.width - scaledWidth) * resolvedPosition.x;
+	object.y = -localBounds.y * scaleY + (bounds.height - scaledHeight) * resolvedPosition.y;
+};
+var resolveObjectPosition = (position) => {
+	const defaultPosition = {
+		x: .5,
+		y: .5
+	};
+	if (!position) return defaultPosition;
+	if (typeof position === "object") return position;
+	switch (position) {
+		case "top": return {
+			x: .5,
+			y: 0
+		};
+		case "right": return {
+			x: 1,
+			y: .5
+		};
+		case "bottom": return {
+			x: .5,
+			y: 1
+		};
+		case "left": return {
+			x: 0,
+			y: .5
+		};
+		case "top-left": return {
+			x: 0,
+			y: 0
+		};
+		case "top-right": return {
+			x: 1,
+			y: 0
+		};
+		case "bottom-left": return {
+			x: 0,
+			y: 1
+		};
+		case "bottom-right": return {
+			x: 1,
+			y: 1
+		};
+		default: return defaultPosition;
+	}
+};
+/**
+* Scale an object to fit within the given bounds according to the specified fit mode.
+*
+* This function sets the scale and position properties of the object to fit within the bounds while respecting the aspect ratio based on the fit mode.
+*
+* @param object The object to be scaled.
+* @param bounds The bounds it should fit within.
+* @param fitMode The object fit mode to apply.
+* @param position Optional object position anchor. Defaults to center.
+*/
+var objectFit = (object, bounds, fitMode, position = "center") => {
+	objectFitWithLocalBounds(object, bounds, fitMode, position, object.getLocalBounds());
+};
+/**
+* This component allows the parent container to dictate the size of its children.
+*
+* Each child is wrapped in a container and object-fit scaling is applied to the wrapping container based on the width and height values passed as props.
+*
+* If multiple children are passed, each one will be wrapped, scaled and positioned independently according to the fit mode and object position.
+*
+* If you want to apply the same object-fit behavior to multiple children as a group, wrap them in a parent `Container` and pass that single container as the child to `ObjectFitContainer`.
+*
+* Accepts all standard pixi-solid `Container` props (position, scale, mask, events, etc.) on the outer
+* container. The `width`, `height`, `fitMode`, and `objectPosition` props control how children are scaled
+* and aligned within the bounds. Set `observeBounds={true}` to enable ticker-based local-bounds watching.
+*
+* @example
+* ```tsx
+* <ObjectFitContainer x={100} y={100} width={800} height={600} fitMode="contain" objectPosition="top-left">
+*   <Sprite texture={texture} />
+* </ObjectFitContainer>
+* ```
+*/
+var ObjectFitContainer = (props) => {
+	const [local, rest] = splitProps(props, [
+		"width",
+		"height",
+		"fitMode",
+		"objectPosition",
+		"observeBounds",
+		"children"
+	]);
+	const resolvedChildren = children(() => local.children);
+	const innerContainerSet = /* @__PURE__ */ new Set();
+	const cachedBoundsMap = /* @__PURE__ */ new WeakMap();
+	createEffect(() => {
+		local.width;
+		local.height;
+		local.fitMode;
+		local.objectPosition;
+		resolvedChildren();
+		for (const child of innerContainerSet) objectFit(child, local, local.fitMode, local.objectPosition);
+	});
+	createEffect(on(() => local.observeBounds, (observeBounds) => {
+		if (observeBounds !== true) return;
+		onTick(() => {
+			for (const child of innerContainerSet) {
+				const nextLocalBounds = child.getLocalBounds();
+				let previousLocalBounds = cachedBoundsMap.get(child);
+				if (!previousLocalBounds || previousLocalBounds.x !== nextLocalBounds.x || previousLocalBounds.y !== nextLocalBounds.y || previousLocalBounds.width !== nextLocalBounds.width || previousLocalBounds.height !== nextLocalBounds.height) {
+					if (!previousLocalBounds) {
+						previousLocalBounds = {
+							x: nextLocalBounds.x,
+							y: nextLocalBounds.y,
+							width: nextLocalBounds.width,
+							height: nextLocalBounds.height
+						};
+						cachedBoundsMap.set(child, previousLocalBounds);
+					} else {
+						previousLocalBounds.x = nextLocalBounds.x;
+						previousLocalBounds.y = nextLocalBounds.y;
+						previousLocalBounds.width = nextLocalBounds.width;
+						previousLocalBounds.height = nextLocalBounds.height;
+					}
+					objectFitWithLocalBounds(child, local, local.fitMode, local.objectPosition ?? "center", nextLocalBounds);
+				}
+			}
+		});
+	}));
+	return createComponent(Container, mergeProps(rest, { get children() {
+		return createComponent(Index, {
+			get each() {
+				return resolvedChildren.toArray();
+			},
+			children: (child, index) => {
+				return createComponent(Container, {
+					label: `object-fit-child-wrapper-${index}`,
+					ref: (el) => {
+						innerContainerSet.add(el);
+						onCleanup(() => {
+							innerContainerSet.delete(el);
+						});
+					},
+					get children() {
+						return child();
+					}
+				});
+			}
+		});
+	} }));
 };
 //#endregion
-export { objectFit };
+export { ObjectFitContainer, objectFit };
 
 //# sourceMappingURL=object-fit.js.map

package/dist/utils/object-fit.js.map

@@ -1 +1 @@
-{"version":3,"file":"object-fit.js","names":[],"sources":["../../src/utils/object-fit.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\n\nexport type ObjectFitMode = \"cover\" | \"contain\" | \"fill\" | \"scale-down\";\n\n/**\n * Scale an object to fit within the given bounds according to the specified fit mode.\n * @param object The object to be scaled.\n * @param bounds The bounds it should fit within.\n * @param fitMode The object fit mode to apply.\n */\nexport const objectFit = (\n  object: Pixi.Container,\n  bounds: { width: number; height: number },\n  fitMode: ObjectFitMode,\n): void => {\n  const originalWidth = object.width / object.scale.x;\n  const originalHeight = object.height / object.scale.y;\n\n  if (originalWidth === 0 || originalHeight === 0 || bounds.width === 0 || bounds.height === 0)\n    return;\n\n  const widthRatio = bounds.width / originalWidth;\n  const heightRatio = bounds.height / originalHeight;\n\n  let scaleX = 1;\n  let scaleY = 1;\n\n  // biome-ignore lint/nursery/noUnnecessaryConditions: <explanation>\n  switch (fitMode) {\n    case \"cover\": {\n      const coverScale = Math.max(widthRatio, heightRatio);\n      scaleX = coverScale;\n      scaleY = coverScale;\n      break;\n    }\n    case \"contain\": {\n      const containScale = Math.min(widthRatio, heightRatio);\n      scaleX = containScale;\n      scaleY = containScale;\n      break;\n    }\n    case \"fill\": {\n      scaleX = widthRatio;\n      scaleY = heightRatio;\n      break;\n    }\n    case \"scale-down\": {\n      // If the object is smaller than the container, it's 'none' (no scaling up).\n      // Otherwise, it's 'contain'.\n      if (originalWidth <= bounds.width && originalHeight <= bounds.height) {\n        scaleX = 1;\n        scaleY = 1;\n      } else {\n        const scaleDown = Math.min(widthRatio, heightRatio);\n        scaleX = scaleDown;\n        scaleY = scaleDown;\n      }\n      break;\n    }\n    default:\n      // Default to no scaling if an unknown fitMode is provided\n      break;\n  }\n\n  object.scale.set(scaleX, scaleY);\n\n  // Center the object\n  object.x = (bounds.width - object.width) / 2;\n  object.y = (bounds.height - object.height) / 2;\n};\n"],"mappings":";;;;;;;AAUA,IAAa,aACX,QACA,QACA,YACS;CACT,MAAM,gBAAgB,OAAO,QAAQ,OAAO,MAAM;CAClD,MAAM,iBAAiB,OAAO,SAAS,OAAO,MAAM;AAEpD,KAAI,kBAAkB,KAAK,mBAAmB,KAAK,OAAO,UAAU,KAAK,OAAO,WAAW,EACzF;CAEF,MAAM,aAAa,OAAO,QAAQ;CAClC,MAAM,cAAc,OAAO,SAAS;CAEpC,IAAI,SAAS;CACb,IAAI,SAAS;AAGb,SAAQ,SAAR;EACE,KAAK,SAAS;GACZ,MAAM,aAAa,KAAK,IAAI,YAAY,YAAY;AACpD,YAAS;AACT,YAAS;AACT;;EAEF,KAAK,WAAW;GACd,MAAM,eAAe,KAAK,IAAI,YAAY,YAAY;AACtD,YAAS;AACT,YAAS;AACT;;EAEF,KAAK;AACH,YAAS;AACT,YAAS;AACT;EAEF,KAAK;AAGH,OAAI,iBAAiB,OAAO,SAAS,kBAAkB,OAAO,QAAQ;AACpE,aAAS;AACT,aAAS;UACJ;IACL,MAAM,YAAY,KAAK,IAAI,YAAY,YAAY;AACnD,aAAS;AACT,aAAS;;AAEX;EAEF,QAEE;;AAGJ,QAAO,MAAM,IAAI,QAAQ,OAAO;AAGhC,QAAO,KAAK,OAAO,QAAQ,OAAO,SAAS;AAC3C,QAAO,KAAK,OAAO,SAAS,OAAO,UAAU"}
+{"version":3,"file":"object-fit.js","names":["Pixi","JSX","createEffect","splitProps","children","Index","onCleanup","on","PixiComponentProps","Container","onTick","ObjectFitMode","ObjectPosition","x","y","objectFitWithLocalBounds","object","bounds","width","height","fitMode","position","localBounds","originalWidth","originalHeight","widthRatio","heightRatio","scaleX","scaleY","coverScale","Math","max","containScale","min","scale","set","resolvedPosition","resolveObjectPosition","scaledWidth","scaledHeight","defaultPosition","objectFit","getLocalBounds","ObjectFitContainerProps","Element","objectPosition","observeBounds","ObjectFitContainer","props","local","rest","resolvedChildren","innerContainerSet","Set","cachedBoundsMap","WeakMap","child","nextLocalBounds","previousLocalBounds","get","_$createComponent","_$mergeProps","each","toArray","index","label","ref","el","add","delete"],"sources":["../../src/utils/object-fit.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX } from \"solid-js\";\nimport { createEffect, splitProps, children, Index, onCleanup, on } from \"solid-js\";\n\nimport type { PixiComponentProps } from \"../components\";\nimport { Container } from \"../components/components\";\nimport { onTick } from \"../on-tick\";\n\nexport type ObjectFitMode = \"cover\" | \"contain\" | \"fill\" | \"scale-down\" | \"none\";\n\nexport type ObjectPosition =\n  | \"center\"\n  | \"top\"\n  | \"right\"\n  | \"bottom\"\n  | \"left\"\n  | \"top-left\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-right\"\n  | { x: number; y: number };\n\nconst objectFitWithLocalBounds = (\n  object: Pixi.Container,\n  bounds: { width: number; height: number },\n  fitMode: ObjectFitMode,\n  position: ObjectPosition,\n  localBounds: { x: number; y: number; width: number; height: number },\n): void => {\n  const originalWidth = localBounds.width;\n  const originalHeight = localBounds.height;\n\n  if (originalWidth === 0 || originalHeight === 0 || bounds.width === 0 || bounds.height === 0)\n    return;\n\n  const widthRatio = bounds.width / originalWidth;\n  const heightRatio = bounds.height / originalHeight;\n\n  let scaleX = 1;\n  let scaleY = 1;\n\n  switch (fitMode) {\n    case \"cover\": {\n      const coverScale = Math.max(widthRatio, heightRatio);\n      scaleX = coverScale;\n      scaleY = coverScale;\n      break;\n    }\n    case \"contain\": {\n      const containScale = Math.min(widthRatio, heightRatio);\n      scaleX = containScale;\n      scaleY = containScale;\n      break;\n    }\n    case \"fill\": {\n      scaleX = widthRatio;\n      scaleY = heightRatio;\n      break;\n    }\n    case \"scale-down\": {\n      scaleX = scaleY = Math.min(1, Math.min(widthRatio, heightRatio));\n      break;\n    }\n    case \"none\":\n      break;\n  }\n\n  object.scale.set(scaleX, scaleY);\n  const resolvedPosition = resolveObjectPosition(position);\n  const scaledWidth = localBounds.width * scaleX;\n  const scaledHeight = localBounds.height * scaleY;\n\n  object.x = -localBounds.x * scaleX + (bounds.width - scaledWidth) * resolvedPosition.x;\n  object.y = -localBounds.y * scaleY + (bounds.height - scaledHeight) * resolvedPosition.y;\n};\n\nconst resolveObjectPosition = (position: ObjectPosition | undefined): { x: number; y: number } => {\n  const defaultPosition = { x: 0.5, y: 0.5 };\n\n  if (!position) {\n    return defaultPosition;\n  }\n\n  if (typeof position === \"object\") {\n    return position;\n  }\n\n  switch (position) {\n    case \"top\":\n      return { x: 0.5, y: 0 };\n    case \"right\":\n      return { x: 1, y: 0.5 };\n    case \"bottom\":\n      return { x: 0.5, y: 1 };\n    case \"left\":\n      return { x: 0, y: 0.5 };\n    case \"top-left\":\n      return { x: 0, y: 0 };\n    case \"top-right\":\n      return { x: 1, y: 0 };\n    case \"bottom-left\":\n      return { x: 0, y: 1 };\n    case \"bottom-right\":\n      return { x: 1, y: 1 };\n    case \"center\":\n    default:\n      return defaultPosition;\n  }\n};\n\n/**\n * Scale an object to fit within the given bounds according to the specified fit mode.\n *\n * This function sets the scale and position properties of the object to fit within the bounds while respecting the aspect ratio based on the fit mode.\n *\n * @param object The object to be scaled.\n * @param bounds The bounds it should fit within.\n * @param fitMode The object fit mode to apply.\n * @param position Optional object position anchor. Defaults to center.\n */\nexport const objectFit = (\n  object: Pixi.Container,\n  bounds: { width: number; height: number },\n  fitMode: ObjectFitMode,\n  position: ObjectPosition = \"center\",\n): void => {\n  objectFitWithLocalBounds(object, bounds, fitMode, position, object.getLocalBounds());\n};\n\nexport type ObjectFitContainerProps = PixiComponentProps & {\n  width: number;\n  height: number;\n  children: JSX.Element;\n  fitMode: ObjectFitMode;\n  objectPosition?: ObjectPosition;\n  observeBounds?: boolean;\n};\n\n/**\n * This component allows the parent container to dictate the size of its children.\n *\n * Each child is wrapped in a container and object-fit scaling is applied to the wrapping container based on the width and height values passed as props.\n *\n * If multiple children are passed, each one will be wrapped, scaled and positioned independently according to the fit mode and object position.\n *\n * If you want to apply the same object-fit behavior to multiple children as a group, wrap them in a parent `Container` and pass that single container as the child to `ObjectFitContainer`.\n *\n * Accepts all standard pixi-solid `Container` props (position, scale, mask, events, etc.) on the outer\n * container. The `width`, `height`, `fitMode`, and `objectPosition` props control how children are scaled\n * and aligned within the bounds. Set `observeBounds={true}` to enable ticker-based local-bounds watching.\n *\n * @example\n * ```tsx\n * <ObjectFitContainer x={100} y={100} width={800} height={600} fitMode=\"contain\" objectPosition=\"top-left\">\n *   <Sprite texture={texture} />\n * </ObjectFitContainer>\n * ```\n */\nexport const ObjectFitContainer = (props: ObjectFitContainerProps): JSX.Element => {\n  const [local, rest] = splitProps(props, [\n    \"width\",\n    \"height\",\n    \"fitMode\",\n    \"objectPosition\",\n    \"observeBounds\",\n    \"children\",\n  ]);\n\n  const resolvedChildren = children(() => local.children);\n  const innerContainerSet = new Set<Pixi.Container>();\n  const cachedBoundsMap = new WeakMap<\n    Pixi.Container,\n    { x: number; y: number; width: number; height: number }\n  >();\n\n  createEffect(() => {\n    void local.width;\n    void local.height;\n    void local.fitMode;\n    void local.objectPosition;\n    void resolvedChildren();\n\n    for (const child of innerContainerSet) {\n      objectFit(child, local, local.fitMode, local.objectPosition);\n    }\n  });\n\n  createEffect(\n    on(\n      () => local.observeBounds,\n      (observeBounds) => {\n        if (observeBounds !== true) {\n          return;\n        }\n\n        onTick(() => {\n          for (const child of innerContainerSet) {\n            const nextLocalBounds = child.getLocalBounds();\n            let previousLocalBounds = cachedBoundsMap.get(child);\n\n            if (\n              !previousLocalBounds ||\n              previousLocalBounds.x !== nextLocalBounds.x ||\n              previousLocalBounds.y !== nextLocalBounds.y ||\n              previousLocalBounds.width !== nextLocalBounds.width ||\n              previousLocalBounds.height !== nextLocalBounds.height\n            ) {\n              if (!previousLocalBounds) {\n                previousLocalBounds = {\n                  x: nextLocalBounds.x,\n                  y: nextLocalBounds.y,\n                  width: nextLocalBounds.width,\n                  height: nextLocalBounds.height,\n                };\n                cachedBoundsMap.set(child, previousLocalBounds);\n              } else {\n                previousLocalBounds.x = nextLocalBounds.x;\n                previousLocalBounds.y = nextLocalBounds.y;\n                previousLocalBounds.width = nextLocalBounds.width;\n                previousLocalBounds.height = nextLocalBounds.height;\n              }\n\n              objectFitWithLocalBounds(\n                child,\n                local,\n                local.fitMode,\n                local.objectPosition ?? \"center\",\n                nextLocalBounds,\n              );\n            }\n          }\n        });\n      },\n    ),\n  );\n\n  return (\n    <Container {...rest}>\n      <Index each={resolvedChildren.toArray()}>\n        {(child, index) => {\n          return (\n            <Container\n              label={`object-fit-child-wrapper-${index}`}\n              ref={(el) => {\n                innerContainerSet.add(el);\n                onCleanup(() => {\n                  innerContainerSet.delete(el);\n                });\n              }}\n            >\n              {child()}\n            </Container>\n          );\n        }}\n      </Index>\n    </Container>\n  );\n};\n"],"mappings":";;;;;AAsBA,IAAMe,4BACJC,QACAC,QACAG,SACAC,UACAC,gBACS;CACT,MAAMC,gBAAgBD,YAAYJ;CAClC,MAAMM,iBAAiBF,YAAYH;CAEnC,IAAII,kBAAkB,KAAKC,mBAAmB,KAAKP,OAAOC,UAAU,KAAKD,OAAOE,WAAW,GACzF;CAEF,MAAMM,aAAaR,OAAOC,QAAQK;CAClC,MAAMG,cAAcT,OAAOE,SAASK;CAEpC,IAAIG,SAAS;CACb,IAAIC,SAAS;CAEb,QAAQR,SAAR;EACE,KAAK,SAAS;GACZ,MAAMS,aAAaC,KAAKC,IAAIN,YAAYC,YAAY;GACpDC,SAASE;GACTD,SAASC;GACT;;EAEF,KAAK,WAAW;GACd,MAAMG,eAAeF,KAAKG,IAAIR,YAAYC,YAAY;GACtDC,SAASK;GACTJ,SAASI;GACT;;EAEF,KAAK;GACHL,SAASF;GACTG,SAASF;GACT;EAEF,KAAK;GACHC,SAASC,SAASE,KAAKG,IAAI,GAAGH,KAAKG,IAAIR,YAAYC,YAAY,CAAC;GAChE;EAEF,KAAK,QACH;;CAGJV,OAAOkB,MAAMC,IAAIR,QAAQC,OAAO;CAChC,MAAMQ,mBAAmBC,sBAAsBhB,SAAS;CACxD,MAAMiB,cAAchB,YAAYJ,QAAQS;CACxC,MAAMY,eAAejB,YAAYH,SAASS;CAE1CZ,OAAOH,IAAI,CAACS,YAAYT,IAAIc,UAAUV,OAAOC,QAAQoB,eAAeF,iBAAiBvB;CACrFG,OAAOF,IAAI,CAACQ,YAAYR,IAAIc,UAAUX,OAAOE,SAASoB,gBAAgBH,iBAAiBtB;;AAGzF,IAAMuB,yBAAyBhB,aAAmE;CAChG,MAAMmB,kBAAkB;EAAE3B,GAAG;EAAKC,GAAG;EAAK;CAE1C,IAAI,CAACO,UACH,OAAOmB;CAGT,IAAI,OAAOnB,aAAa,UACtB,OAAOA;CAGT,QAAQA,UAAR;EACE,KAAK,OACH,OAAO;GAAER,GAAG;GAAKC,GAAG;GAAG;EACzB,KAAK,SACH,OAAO;GAAED,GAAG;GAAGC,GAAG;GAAK;EACzB,KAAK,UACH,OAAO;GAAED,GAAG;GAAKC,GAAG;GAAG;EACzB,KAAK,QACH,OAAO;GAAED,GAAG;GAAGC,GAAG;GAAK;EACzB,KAAK,YACH,OAAO;GAAED,GAAG;GAAGC,GAAG;GAAG;EACvB,KAAK,aACH,OAAO;GAAED,GAAG;GAAGC,GAAG;GAAG;EACvB,KAAK,eACH,OAAO;GAAED,GAAG;GAAGC,GAAG;GAAG;EACvB,KAAK,gBACH,OAAO;GAAED,GAAG;GAAGC,GAAG;GAAG;EAEvB,SACE,OAAO0B;;;;;;;;;;;;;AAcb,IAAaC,aACXzB,QACAC,QACAG,SACAC,WAA2B,aAClB;CACTN,yBAAyBC,QAAQC,QAAQG,SAASC,UAAUL,OAAO0B,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;AAgCtF,IAAaK,sBAAsBC,UAAgD;CACjF,MAAM,CAACC,OAAOC,QAAQ/C,WAAW6C,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAMG,mBAAmB/C,eAAe6C,MAAM7C,SAAS;CACvD,MAAMgD,oCAAoB,IAAIC,KAAqB;CACnD,MAAMC,kCAAkB,IAAIC,SAGzB;CAEHrD,mBAAmB;EACjB,MAAWgB;EACX,MAAWC;EACX,MAAWC;EACX,MAAWyB;EACX,kBAAuB;EAEvB,KAAK,MAAMW,SAASJ,mBAClBX,UAAUe,OAAOP,OAAOA,MAAM7B,SAAS6B,MAAMJ,eAAe;GAE9D;CAEF3C,aACEK,SACQ0C,MAAMH,gBACXA,kBAAkB;EACjB,IAAIA,kBAAkB,MACpB;EAGFpC,aAAa;GACX,KAAK,MAAM8C,SAASJ,mBAAmB;IACrC,MAAMK,kBAAkBD,MAAMd,gBAAgB;IAC9C,IAAIgB,sBAAsBJ,gBAAgBK,IAAIH,MAAM;IAEpD,IACE,CAACE,uBACDA,oBAAoB7C,MAAM4C,gBAAgB5C,KAC1C6C,oBAAoB5C,MAAM2C,gBAAgB3C,KAC1C4C,oBAAoBxC,UAAUuC,gBAAgBvC,SAC9CwC,oBAAoBvC,WAAWsC,gBAAgBtC,QAC/C;KACA,IAAI,CAACuC,qBAAqB;MACxBA,sBAAsB;OACpB7C,GAAG4C,gBAAgB5C;OACnBC,GAAG2C,gBAAgB3C;OACnBI,OAAOuC,gBAAgBvC;OACvBC,QAAQsC,gBAAgBtC;OACzB;MACDmC,gBAAgBnB,IAAIqB,OAAOE,oBAAoB;YAC1C;MACLA,oBAAoB7C,IAAI4C,gBAAgB5C;MACxC6C,oBAAoB5C,IAAI2C,gBAAgB3C;MACxC4C,oBAAoBxC,QAAQuC,gBAAgBvC;MAC5CwC,oBAAoBvC,SAASsC,gBAAgBtC;;KAG/CJ,yBACEyC,OACAP,OACAA,MAAM7B,SACN6B,MAAMJ,kBAAkB,UACxBY,gBACD;;;IAGL;GAGR,CAAC;CAED,OAAAG,gBACGnD,WAASoD,WAAKX,MAAI,EAAA,IAAA9C,WAAA;EAAA,OAAAwD,gBAChBvD,OAAK;GAAA,IAACyD,OAAI;IAAA,OAAEX,iBAAiBY,SAAS;;GAAA3D,WACnCoD,OAAOQ,UAAU;IACjB,OAAAJ,gBACGnD,WAAS;KACRwD,OAAO,4BAA4BD;KAAOE,MACpCC,OAAO;MACXf,kBAAkBgB,IAAID,GAAG;MACzB7D,gBAAgB;OACd8C,kBAAkBiB,OAAOF,GAAG;QAC5B;;KACH,IAAA/D,WAAA;MAAA,OAEAoD,OAAO;;KAAA,CAAA;;GAGb,CAAA;IAAA,CAAA,CAAA"}

package/dist/utils/smooth-damp.js.map

@@ -1 +1 @@
-{"version":3,"file":"smooth-damp.js","names":[],"sources":["../../src/utils/smooth-damp.ts"],"sourcesContent":["import type { Accessor } from \"solid-js\";\nimport { createSignal } from \"solid-js\";\nimport { createMutable } from \"solid-js/store\";\n\nimport { onTick } from \"../on-tick\";\n\n/**\n * Smoothly dampens a value towards a target over time.\n * This is similar to Unity's Mathf.SmoothDamp function.\n *\n * @param current - The current value.\n * @param target - The target value.\n * @param velocity - A reference to the current velocity. This should be persistent between calls.\n * @param smoothTimeMs - The approximate time it will take to reach the target in milliseconds. Smaller values will reach the target faster.\n * @param maxSpeed - Optionally, the maximum speed the value can move in units per second. Defaults to Infinity.\n * @param deltaTime - The time since the last call in seconds. Defaults to 1/60 (assuming 60 FPS).\n * @param precision - Optionally, the threshold for snapping the value to the target. If the absolute difference between the current and target value is less than this, it snaps to the target. Defaults to 0.01.\n * @returns The new current value.\n */\nexport const smoothDamp = (\n  current: number,\n  target: number,\n  velocity: { value: number },\n  smoothTimeMs: number = 300,\n  maxSpeed: number = Infinity,\n  deltaTime: number = 1 / 60,\n  precision: number = 0.01, // Added precision parameter with a default\n): number => {\n  if (current === target) return current;\n\n  // Check precision and velocity before doing calculations\n  if (Math.abs(current - target) < precision && Math.abs(velocity.value) < precision) {\n    velocity.value = 0; // Reset velocity\n    return target; // Snap to target and return early\n  }\n\n  const smoothTime = smoothTimeMs / 1000; // Convert smoothTimeMs to seconds\n  const omega = 2 / smoothTime;\n  const x = omega * deltaTime;\n  const exp = 1 / (1 + x + 0.48 * x * x + 0.235 * x * x * x);\n  const change = current - target;\n  const temp = (velocity.value + omega * change) * deltaTime;\n  velocity.value = (velocity.value - omega * temp) * exp;\n\n  let result = target + (change + temp) * exp;\n\n  // Clamp to max speed\n  if (maxSpeed !== Infinity) {\n    const maxChange = maxSpeed * deltaTime;\n    result = current + Math.max(-maxChange, Math.min(maxChange, result - current));\n  }\n\n  return result;\n};\n\n/**\n * A SolidJS hook that provides a smoothly damped signal towards a target value.\n * Internally manages velocity and continuous updates synced to the Pixi ticker.\n *\n * @param to - An accessor for the target value to damp towards.\n * @param smoothTimeMs - The approximate time it will take to reach the target in milliseconds. Smaller values will reach the target faster. Defaults to 300ms.\n * @param maxSpeed - Optionally, the maximum speed the value can move in units per second. Defaults to Infinity.\n * @returns A signal containing the current damped value.\n */\n\nexport type UseSmoothDampProps = {\n  to: () => number;\n  smoothTimeMs?: () => number;\n  maxSpeed?: () => number;\n};\n\nexport type SmoothDamp = {\n  value: Accessor<number>;\n  velocity: Accessor<number>;\n};\n\nexport const useSmoothDamp = (props: UseSmoothDampProps): SmoothDamp => {\n  const [current, setCurrent] = createSignal(props.to());\n  const velocity = createMutable({ value: 0 });\n\n  const update = (deltaTimeMS: number) => {\n    const currentValue = current();\n    const currentTarget = props.to();\n\n    if (currentValue === currentTarget) {\n      velocity.value = 0;\n      return;\n    }\n\n    const deltaTime = deltaTimeMS / 1000; // Convert milliseconds to seconds\n    const newCurrent = smoothDamp(\n      currentValue,\n      currentTarget,\n      velocity,\n      props.smoothTimeMs?.(),\n      props.maxSpeed?.(),\n      deltaTime,\n    );\n    setCurrent(newCurrent);\n  };\n\n  onTick((ticker) => {\n    update(ticker.deltaMS);\n  });\n\n  return {\n    value: current,\n    velocity: () => velocity.value,\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,IAAa,cACX,SACA,QACA,UACA,eAAuB,KACvB,WAAmB,UACnB,YAAoB,IAAI,IACxB,YAAoB,QACT;AACX,KAAI,YAAY,OAAQ,QAAO;AAG/B,KAAI,KAAK,IAAI,UAAU,OAAO,GAAG,aAAa,KAAK,IAAI,SAAS,MAAM,GAAG,WAAW;AAClF,WAAS,QAAQ;AACjB,SAAO;;CAIT,MAAM,QAAQ,KADK,eAAe;CAElC,MAAM,IAAI,QAAQ;CAClB,MAAM,MAAM,KAAK,IAAI,IAAI,MAAO,IAAI,IAAI,OAAQ,IAAI,IAAI;CACxD,MAAM,SAAS,UAAU;CACzB,MAAM,QAAQ,SAAS,QAAQ,QAAQ,UAAU;AACjD,UAAS,SAAS,SAAS,QAAQ,QAAQ,QAAQ;CAEnD,IAAI,SAAS,UAAU,SAAS,QAAQ;AAGxC,KAAI,aAAa,UAAU;EACzB,MAAM,YAAY,WAAW;AAC7B,WAAS,UAAU,KAAK,IAAI,CAAC,WAAW,KAAK,IAAI,WAAW,SAAS,QAAQ,CAAC;;AAGhF,QAAO;;AAwBT,IAAa,iBAAiB,UAA0C;CACtE,MAAM,CAAC,SAAS,cAAc,aAAa,MAAM,IAAI,CAAC;CACtD,MAAM,WAAW,cAAc,EAAE,OAAO,GAAG,CAAC;CAE5C,MAAM,UAAU,gBAAwB;EACtC,MAAM,eAAe,SAAS;EAC9B,MAAM,gBAAgB,MAAM,IAAI;AAEhC,MAAI,iBAAiB,eAAe;AAClC,YAAS,QAAQ;AACjB;;EAGF,MAAM,YAAY,cAAc;AAShC,aARmB,WACjB,cACA,eACA,UACA,MAAM,gBAAgB,EACtB,MAAM,YAAY,EAClB,UAES,CAAW;;AAGxB,SAAQ,WAAW;AACjB,SAAO,OAAO,QAAQ;GACtB;AAEF,QAAO;EACL,OAAO;EACP,gBAAgB,SAAS;EAC1B"}
+{"version":3,"file":"smooth-damp.js","names":[],"sources":["../../src/utils/smooth-damp.ts"],"sourcesContent":["import type { Accessor } from \"solid-js\";\nimport { createSignal } from \"solid-js\";\nimport { createMutable } from \"solid-js/store\";\n\nimport { onTick } from \"../on-tick\";\n\n/**\n * Smoothly dampens a value towards a target over time.\n * This is similar to Unity's Mathf.SmoothDamp function.\n *\n * @param current - The current value.\n * @param target - The target value.\n * @param velocity - A reference to the current velocity. This should be persistent between calls.\n * @param smoothTimeMs - The approximate time it will take to reach the target in milliseconds. Smaller values will reach the target faster.\n * @param maxSpeed - Optionally, the maximum speed the value can move in units per second. Defaults to Infinity.\n * @param deltaTime - The time since the last call in seconds. Defaults to 1/60 (assuming 60 FPS).\n * @param precision - Optionally, the threshold for snapping the value to the target. If the absolute difference between the current and target value is less than this, it snaps to the target. Defaults to 0.01.\n * @returns The new current value.\n */\nexport const smoothDamp = (\n  current: number,\n  target: number,\n  velocity: { value: number },\n  smoothTimeMs: number = 300,\n  maxSpeed: number = Infinity,\n  deltaTime: number = 1 / 60,\n  precision: number = 0.01, // Added precision parameter with a default\n): number => {\n  if (current === target) return current;\n\n  // Check precision and velocity before doing calculations\n  if (Math.abs(current - target) < precision && Math.abs(velocity.value) < precision) {\n    velocity.value = 0; // Reset velocity\n    return target; // Snap to target and return early\n  }\n\n  const smoothTime = smoothTimeMs / 1000; // Convert smoothTimeMs to seconds\n  const omega = 2 / smoothTime;\n  const x = omega * deltaTime;\n  const exp = 1 / (1 + x + 0.48 * x * x + 0.235 * x * x * x);\n  const change = current - target;\n  const temp = (velocity.value + omega * change) * deltaTime;\n  velocity.value = (velocity.value - omega * temp) * exp;\n\n  let result = target + (change + temp) * exp;\n\n  // Clamp to max speed\n  if (maxSpeed !== Infinity) {\n    const maxChange = maxSpeed * deltaTime;\n    result = current + Math.max(-maxChange, Math.min(maxChange, result - current));\n  }\n\n  return result;\n};\n\n/**\n * A SolidJS hook that provides a smoothly damped signal towards a target value.\n * Internally manages velocity and continuous updates synced to the Pixi ticker.\n *\n * @param to - An accessor for the target value to damp towards.\n * @param smoothTimeMs - The approximate time it will take to reach the target in milliseconds. Smaller values will reach the target faster. Defaults to 300ms.\n * @param maxSpeed - Optionally, the maximum speed the value can move in units per second. Defaults to Infinity.\n * @returns A signal containing the current damped value.\n */\n\nexport type UseSmoothDampProps = {\n  to: () => number;\n  smoothTimeMs?: () => number;\n  maxSpeed?: () => number;\n};\n\nexport type SmoothDamp = {\n  value: Accessor<number>;\n  velocity: Accessor<number>;\n};\n\nexport const useSmoothDamp = (props: UseSmoothDampProps): SmoothDamp => {\n  const [current, setCurrent] = createSignal(props.to());\n  const velocity = createMutable({ value: 0 });\n\n  const update = (deltaTimeMS: number) => {\n    const currentValue = current();\n    const currentTarget = props.to();\n\n    if (currentValue === currentTarget) {\n      velocity.value = 0;\n      return;\n    }\n\n    const deltaTime = deltaTimeMS / 1000; // Convert milliseconds to seconds\n    const newCurrent = smoothDamp(\n      currentValue,\n      currentTarget,\n      velocity,\n      props.smoothTimeMs?.(),\n      props.maxSpeed?.(),\n      deltaTime,\n    );\n    setCurrent(newCurrent);\n  };\n\n  onTick((ticker) => {\n    update(ticker.deltaMS);\n  });\n\n  return {\n    value: current,\n    velocity: () => velocity.value,\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,IAAa,cACX,SACA,QACA,UACA,eAAuB,KACvB,WAAmB,UACnB,YAAoB,IAAI,IACxB,YAAoB,QACT;CACX,IAAI,YAAY,QAAQ,OAAO;CAG/B,IAAI,KAAK,IAAI,UAAU,OAAO,GAAG,aAAa,KAAK,IAAI,SAAS,MAAM,GAAG,WAAW;EAClF,SAAS,QAAQ;EACjB,OAAO;;CAIT,MAAM,QAAQ,KADK,eAAe;CAElC,MAAM,IAAI,QAAQ;CAClB,MAAM,MAAM,KAAK,IAAI,IAAI,MAAO,IAAI,IAAI,OAAQ,IAAI,IAAI;CACxD,MAAM,SAAS,UAAU;CACzB,MAAM,QAAQ,SAAS,QAAQ,QAAQ,UAAU;CACjD,SAAS,SAAS,SAAS,QAAQ,QAAQ,QAAQ;CAEnD,IAAI,SAAS,UAAU,SAAS,QAAQ;CAGxC,IAAI,aAAa,UAAU;EACzB,MAAM,YAAY,WAAW;EAC7B,SAAS,UAAU,KAAK,IAAI,CAAC,WAAW,KAAK,IAAI,WAAW,SAAS,QAAQ,CAAC;;CAGhF,OAAO;;AAwBT,IAAa,iBAAiB,UAA0C;CACtE,MAAM,CAAC,SAAS,cAAc,aAAa,MAAM,IAAI,CAAC;CACtD,MAAM,WAAW,cAAc,EAAE,OAAO,GAAG,CAAC;CAE5C,MAAM,UAAU,gBAAwB;EACtC,MAAM,eAAe,SAAS;EAC9B,MAAM,gBAAgB,MAAM,IAAI;EAEhC,IAAI,iBAAiB,eAAe;GAClC,SAAS,QAAQ;GACjB;;EAGF,MAAM,YAAY,cAAc;EAShC,WARmB,WACjB,cACA,eACA,UACA,MAAM,gBAAgB,EACtB,MAAM,YAAY,EAClB,UAES,CAAW;;CAGxB,QAAQ,WAAW;EACjB,OAAO,OAAO,QAAQ;GACtB;CAEF,OAAO;EACL,OAAO;EACP,gBAAgB,SAAS;EAC1B"}

package/dist/utils/spring.js.map

@@ -1 +1 @@
-{"version":3,"file":"spring.js","names":[],"sources":["../../src/utils/spring.ts"],"sourcesContent":["import type { Accessor } from \"solid-js\";\nimport { createSignal } from \"solid-js\";\n\nimport { onTick } from \"../on-tick\";\n\n/**\n * @typedef {Object} UseSpringProps\n * @property {Accessor<number>} to - An accessor for the target value for the spring.\n * @property {Accessor<number>} [stiffness=10] - Effective range from 0 - 100. Controls the spring's resistance to displacement.\n * @property {Accessor<number>} [damping=30] - Effective range from 0 - 100. Controls the amount of friction or resistance to motion.\n * @property {Accessor<number>} [mass=20] - Effective range from 0 - 100. Controls the inertia of the spring.\n */\nexport type UseSpringProps = {\n  to: () => number;\n  stiffness?: () => number;\n  damping?: () => number;\n  mass?: () => number;\n};\n\nexport type Spring = {\n  value: Accessor<number>;\n  velocity: Accessor<number>;\n};\n\n/**\n * A SolidJS hook that provides a spring-animated signal towards a target value.\n * Internally manages the spring physics and continuous updates synced to the Pixi ticker.\n *\n * @param {UseSpringProps} props - The properties for the spring animation.\n * @returns {Accessor<number>} A signal containing the current spring-animated value.\n */\nexport const useSpring = (props: UseSpringProps): Spring => {\n  const [value, setValue] = createSignal(props.to());\n  const [velocity, setVelocity] = createSignal(0);\n\n  const update = (deltaTimeMS: number) => {\n    const targetInput = props.to();\n    const currentValue = value();\n    const currentVelocity = velocity();\n\n    if (targetInput === currentValue) return;\n\n    // Settling condition: if output is very close to input and velocity is negligible,\n    // snap to input and stop calculations.\n    if (Math.abs(currentVelocity) < 0.1 && Math.abs(currentValue - targetInput) < 0.01) {\n      setVelocity(0);\n      setValue(targetInput);\n      return;\n    }\n\n    const deltaTime = deltaTimeMS / 1000; // Convert milliseconds to seconds\n\n    // Get current spring properties, using defaults if not provided\n    const stiffness = percentToValueBetweenRange(props.stiffness?.() ?? 10, -1, -300);\n    const damping = percentToValueBetweenRange(props.damping?.() ?? 30, -0.4, -20);\n    const mass = percentToValueBetweenRange(props.mass?.() ?? 20, 0.1, 10);\n\n    const springX = stiffness * (currentValue - targetInput);\n    const damperX = damping * currentVelocity;\n    const amplitude = (springX + damperX) / mass;\n\n    setVelocity((prev) => prev + amplitude * deltaTime);\n    setValue(currentValue + currentVelocity * deltaTime);\n  };\n\n  onTick((ticker) => {\n    update(ticker.deltaMS);\n  });\n\n  return { value, velocity };\n};\n\n// Helper to convert 0-100 percent range to internal calculation range\nconst percentToValueBetweenRange = (percent: number, min: number, max: number) =>\n  (percent * (max - min)) / 100 + min;\n"],"mappings":";;;;;;;;;;AA+BA,IAAa,aAAa,UAAkC;CAC1D,MAAM,CAAC,OAAO,YAAY,aAAa,MAAM,IAAI,CAAC;CAClD,MAAM,CAAC,UAAU,eAAe,aAAa,EAAE;CAE/C,MAAM,UAAU,gBAAwB;EACtC,MAAM,cAAc,MAAM,IAAI;EAC9B,MAAM,eAAe,OAAO;EAC5B,MAAM,kBAAkB,UAAU;AAElC,MAAI,gBAAgB,aAAc;AAIlC,MAAI,KAAK,IAAI,gBAAgB,GAAG,MAAO,KAAK,IAAI,eAAe,YAAY,GAAG,KAAM;AAClF,eAAY,EAAE;AACd,YAAS,YAAY;AACrB;;EAGF,MAAM,YAAY,cAAc;EAGhC,MAAM,YAAY,2BAA2B,MAAM,aAAa,IAAI,IAAI,IAAI,KAAK;EACjF,MAAM,UAAU,2BAA2B,MAAM,WAAW,IAAI,IAAI,KAAM,IAAI;EAC9E,MAAM,OAAO,2BAA2B,MAAM,QAAQ,IAAI,IAAI,IAAK,GAAG;EAItE,MAAM,aAFU,aAAa,eAAe,eAC5B,UAAU,mBACc;AAExC,eAAa,SAAS,OAAO,YAAY,UAAU;AACnD,WAAS,eAAe,kBAAkB,UAAU;;AAGtD,SAAQ,WAAW;AACjB,SAAO,OAAO,QAAQ;GACtB;AAEF,QAAO;EAAE;EAAO;EAAU;;AAI5B,IAAM,8BAA8B,SAAiB,KAAa,QAC/D,WAAW,MAAM,OAAQ,MAAM"}
+{"version":3,"file":"spring.js","names":[],"sources":["../../src/utils/spring.ts"],"sourcesContent":["import type { Accessor } from \"solid-js\";\nimport { createSignal } from \"solid-js\";\n\nimport { onTick } from \"../on-tick\";\n\n/**\n * @typedef {Object} UseSpringProps\n * @property {Accessor<number>} to - An accessor for the target value for the spring.\n * @property {Accessor<number>} [stiffness=10] - Effective range from 0 - 100. Controls the spring's resistance to displacement.\n * @property {Accessor<number>} [damping=30] - Effective range from 0 - 100. Controls the amount of friction or resistance to motion.\n * @property {Accessor<number>} [mass=20] - Effective range from 0 - 100. Controls the inertia of the spring.\n */\nexport type UseSpringProps = {\n  to: () => number;\n  stiffness?: () => number;\n  damping?: () => number;\n  mass?: () => number;\n};\n\nexport type Spring = {\n  value: Accessor<number>;\n  velocity: Accessor<number>;\n};\n\n/**\n * A SolidJS hook that provides a spring-animated signal towards a target value.\n * Internally manages the spring physics and continuous updates synced to the Pixi ticker.\n *\n * @param {UseSpringProps} props - The properties for the spring animation.\n * @returns {Accessor<number>} A signal containing the current spring-animated value.\n */\nexport const useSpring = (props: UseSpringProps): Spring => {\n  const [value, setValue] = createSignal(props.to());\n  const [velocity, setVelocity] = createSignal(0);\n\n  const update = (deltaTimeMS: number) => {\n    const targetInput = props.to();\n    const currentValue = value();\n    const currentVelocity = velocity();\n\n    if (targetInput === currentValue) return;\n\n    // Settling condition: if output is very close to input and velocity is negligible,\n    // snap to input and stop calculations.\n    if (Math.abs(currentVelocity) < 0.1 && Math.abs(currentValue - targetInput) < 0.01) {\n      setVelocity(0);\n      setValue(targetInput);\n      return;\n    }\n\n    const deltaTime = deltaTimeMS / 1000; // Convert milliseconds to seconds\n\n    // Get current spring properties, using defaults if not provided\n    const stiffness = percentToValueBetweenRange(props.stiffness?.() ?? 10, -1, -300);\n    const damping = percentToValueBetweenRange(props.damping?.() ?? 30, -0.4, -20);\n    const mass = percentToValueBetweenRange(props.mass?.() ?? 20, 0.1, 10);\n\n    const springX = stiffness * (currentValue - targetInput);\n    const damperX = damping * currentVelocity;\n    const amplitude = (springX + damperX) / mass;\n\n    setVelocity((prev) => prev + amplitude * deltaTime);\n    setValue(currentValue + currentVelocity * deltaTime);\n  };\n\n  onTick((ticker) => {\n    update(ticker.deltaMS);\n  });\n\n  return { value, velocity };\n};\n\n// Helper to convert 0-100 percent range to internal calculation range\nconst percentToValueBetweenRange = (percent: number, min: number, max: number) =>\n  (percent * (max - min)) / 100 + min;\n"],"mappings":";;;;;;;;;;AA+BA,IAAa,aAAa,UAAkC;CAC1D,MAAM,CAAC,OAAO,YAAY,aAAa,MAAM,IAAI,CAAC;CAClD,MAAM,CAAC,UAAU,eAAe,aAAa,EAAE;CAE/C,MAAM,UAAU,gBAAwB;EACtC,MAAM,cAAc,MAAM,IAAI;EAC9B,MAAM,eAAe,OAAO;EAC5B,MAAM,kBAAkB,UAAU;EAElC,IAAI,gBAAgB,cAAc;EAIlC,IAAI,KAAK,IAAI,gBAAgB,GAAG,MAAO,KAAK,IAAI,eAAe,YAAY,GAAG,KAAM;GAClF,YAAY,EAAE;GACd,SAAS,YAAY;GACrB;;EAGF,MAAM,YAAY,cAAc;EAGhC,MAAM,YAAY,2BAA2B,MAAM,aAAa,IAAI,IAAI,IAAI,KAAK;EACjF,MAAM,UAAU,2BAA2B,MAAM,WAAW,IAAI,IAAI,KAAM,IAAI;EAC9E,MAAM,OAAO,2BAA2B,MAAM,QAAQ,IAAI,IAAI,IAAK,GAAG;EAItE,MAAM,aAFU,aAAa,eAAe,eAC5B,UAAU,mBACc;EAExC,aAAa,SAAS,OAAO,YAAY,UAAU;EACnD,SAAS,eAAe,kBAAkB,UAAU;;CAGtD,QAAQ,WAAW;EACjB,OAAO,OAAO,QAAQ;GACtB;CAEF,OAAO;EAAE;EAAO;EAAU;;AAI5B,IAAM,8BAA8B,SAAiB,KAAa,QAC/D,WAAW,MAAM,OAAQ,MAAM"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixi-solid",
-  "version": "0.1.21",
+  "version": "0.2.0",
   "private": false,
   "description": "A library to write PixiJS applications with SolidJS",
   "homepage": "https://lukecarlthompson.github.io/pixi-solid/",

package/dist/delay.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"delay.js","names":[],"sources":["../src/delay.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { useContext } from \"solid-js\";\n\nimport { TickerContext } from \"./pixi-application\";\n\n/**\n * Runs a callback when a given number of milliseconds has passed on the ticker.\n *\n * It is guaranteed to be in sync with the shared ticker and uses accumulated deltaMs not an external time measurement.\n *\n * @param delayMs - Number of milliseconds to wait (measured in the ticker's time units).\n *\n * @param callback - A callback function that will fire when the delayMs time has passed.\n *\n * @throws {Error} If called outside of a `PixiApplicationProvider` or `TickerProvider` context.\n *\n * @note It will not run the callback if the ticker is paused or stopped.\n *\n */\nexport const delay = (delayMs: number, callback?: () => void): void => {\n  const ticker = useContext(TickerContext);\n  if (!ticker) {\n    throw new Error(\"`delay` must be used within a PixiApplicationProvider or a TickerProvider.\");\n  }\n\n  let timeDelayed = 0;\n\n  const internalCallback = () => {\n    timeDelayed += ticker.deltaMS;\n    if (timeDelayed < delayMs) return;\n    callback?.();\n    ticker.remove(internalCallback);\n  };\n\n  ticker.add(internalCallback);\n};\n\nconst asyncDelay = async (ticker: Pixi.Ticker, delayMs: number, signal?: AbortSignal) => {\n  let timeDelayed = 0;\n  let resolvePromise: (value: void | PromiseLike<void>) => void;\n\n  const promise = new Promise<void>((resolve) => {\n    resolvePromise = resolve;\n  });\n\n  const internalCallback = () => {\n    timeDelayed += ticker.deltaMS;\n    if (timeDelayed < delayMs) return;\n    resolvePromise();\n  };\n\n  const handleAbort = () => {\n    ticker.remove(internalCallback);\n    resolvePromise();\n  };\n\n  if (signal?.aborted) {\n    // Already aborted before we even started\n    return;\n  }\n\n  signal?.addEventListener(\"abort\", handleAbort);\n\n  ticker.add(internalCallback);\n  await promise;\n  ticker.remove(internalCallback);\n  signal?.removeEventListener(\"abort\", handleAbort);\n};\n\n/**\n * Create a delay function that waits until a given number of milliseconds has passed on the current Ticker context before resolving.\n *\n * This function must be called inside a `PixiApplicationProvider` or `TickerProvider` context.\n *\n * @param signal - Optional AbortSignal to resolve the delay early\n * @returns An async function we can await to delay events in sync with time passed on the Ticker.\n *\n * Simply await for it to resolve in an async context. If the signal aborts, the promise resolves immediately.\n *\n * @note It will not resolve if the ticker is paused or stopped.\n *\n * @throws {Error} If called outside of a `PixiApplicationProvider` or `TickerProvider` context.\n */\nexport const createAsyncDelay = (): ((delayMs: number, signal?: AbortSignal) => Promise<void>) => {\n  const ticker = useContext(TickerContext);\n\n  if (!ticker) {\n    throw new Error(\n      \"`createAsyncDelay` must be used within a PixiApplicationProvider or a TickerProvider. The returned delay function can be called in an async context but `createAsyncDelay` must be called in a synchronous scope within a PixiApplicationProvider or a TickerProvider\",\n    );\n  }\n  const delayWithTicker = (delayMs: number, signal?: AbortSignal) =>\n    asyncDelay(ticker, delayMs, signal);\n\n  return delayWithTicker;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,IAAa,SAAS,SAAiB,aAAgC;CACrE,MAAM,SAAS,WAAW,cAAc;AACxC,KAAI,CAAC,OACH,OAAM,IAAI,MAAM,6EAA6E;CAG/F,IAAI,cAAc;CAElB,MAAM,yBAAyB;AAC7B,iBAAe,OAAO;AACtB,MAAI,cAAc,QAAS;AAC3B,cAAY;AACZ,SAAO,OAAO,iBAAiB;;AAGjC,QAAO,IAAI,iBAAiB;;AAG9B,IAAM,aAAa,OAAO,QAAqB,SAAiB,WAAyB;CACvF,IAAI,cAAc;CAClB,IAAI;CAEJ,MAAM,UAAU,IAAI,SAAe,YAAY;AAC7C,mBAAiB;GACjB;CAEF,MAAM,yBAAyB;AAC7B,iBAAe,OAAO;AACtB,MAAI,cAAc,QAAS;AAC3B,kBAAgB;;CAGlB,MAAM,oBAAoB;AACxB,SAAO,OAAO,iBAAiB;AAC/B,kBAAgB;;AAGlB,KAAI,QAAQ,QAEV;AAGF,SAAQ,iBAAiB,SAAS,YAAY;AAE9C,QAAO,IAAI,iBAAiB;AAC5B,OAAM;AACN,QAAO,OAAO,iBAAiB;AAC/B,SAAQ,oBAAoB,SAAS,YAAY;;;;;;;;;;;;;;;;AAiBnD,IAAa,yBAAqF;CAChG,MAAM,SAAS,WAAW,cAAc;AAExC,KAAI,CAAC,OACH,OAAM,IAAI,MACR,wQACD;CAEH,MAAM,mBAAmB,SAAiB,WACxC,WAAW,QAAQ,SAAS,OAAO;AAErC,QAAO"}