canvasengine 2.0.0-beta.3 → 2.0.0-beta.30

package/dist/DebugRenderer-DcvJLrrD.js

@@ -0,0 +1,172 @@
+import { Bounds as F, Rectangle as C, Container as M, Graphics as x, BigPool as b } from "pixi.js";
+import { F as _, E as p } from "./index-C-iY-lCt.js";
+var l = /* @__PURE__ */ ((e) => (e.Margin = "margin", e.Padding = "padding", e.Border = "border", e.Flex = "flex", e.Content = "content", e))(l || {});
+function w(e, t) {
+  const r = `getComputed${t.charAt(0).toUpperCase() + t.slice(1)}`;
+  return {
+    top: e.yoga[r](p.Top),
+    right: e.yoga[r](p.Right),
+    bottom: e.yoga[r](p.Bottom),
+    left: e.yoga[r](p.Left)
+  };
+}
+function B(e, t) {
+  const { width: r, height: h } = e.computedLayout, a = w(e, "margin"), i = w(e, "border"), c = w(e, "padding"), n = t.get(
+    "margin"
+    /* Margin */
+  );
+  n.outer.x = -a.left, n.outer.y = -a.top, n.outer.width = r + a.left + a.right, n.outer.height = h + a.top + a.bottom, n.inner.x = 0, n.inner.y = 0, n.inner.width = r, n.inner.height = h;
+  const o = t.get(
+    "border"
+    /* Border */
+  );
+  o.outer.x = 0, o.outer.y = 0, o.outer.width = r, o.outer.height = h, o.inner.x = i.left, o.inner.y = i.top, o.inner.width = r - i.left - i.right, o.inner.height = h - i.top - i.bottom;
+  const s = t.get(
+    "padding"
+    /* Padding */
+  );
+  s.outer.copyFrom(o.inner), s.inner.x = c.left + i.left, s.inner.y = c.top + i.top, s.inner.width = r - c.left - c.right - i.left - i.right, s.inner.height = h - c.top - c.bottom - i.top - i.bottom, E(e, t);
+}
+function E(e, t) {
+  var r;
+  const h = t.get(
+    "flex"
+    /* Flex */
+  ), a = t.get(
+    "padding"
+    /* Padding */
+  );
+  h.outer.copyFrom(a.inner);
+  const i = new F(), c = e.yoga.getChildCount();
+  for (let o = 0; o < c; o++) {
+    const d = e.yoga.getChild(o).getComputedLayout();
+    i.addRect(
+      new C(d.left, d.top, d.width, d.height)
+    );
+  }
+  const n = e.yoga.getFlexDirection();
+  n === _.Column || n === _.ColumnReverse ? (i.width = h.outer.width, i.x = h.outer.x) : (i.height = h.outer.height, i.y = h.outer.y), (r = h.inner) == null || r.copyFrom(i.rectangle), t.get(
+    "content"
+    /* Content */
+  ).outer.copyFrom(i.rectangle);
+}
+var O = Object.defineProperty, A = (e, t, r) => t in e ? O(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, v = (e, t, r) => A(e, typeof t != "symbol" ? t + "" : t, r);
+function P(e, t, r) {
+  const h = Math.round(e[0] + (t[0] - e[0]) * r), a = Math.round(e[1] + (t[1] - e[1]) * r), i = Math.round(e[2] + (t[2] - e[2]) * r);
+  return `rgb(${h},${a},${i})`;
+}
+class G extends M {
+  constructor() {
+    super(), v(this, "graphics"), v(this, "heatGraphics"), this.graphics = /* @__PURE__ */ new Map(), Object.values(l).forEach((t) => {
+      const r = new x();
+      this.graphics.set(t, r), this.addChild(r);
+    }), this.heatGraphics = new x(), this.addChild(this.heatGraphics);
+  }
+  /**
+   * Initialize the debug object with region data
+   */
+  init(t) {
+    const { target: r, alpha: h, heat: a } = t;
+    t.heatOnly || Object.entries(t).forEach(([n, o]) => {
+      if (n === "target" || n === "alpha" || n === "heat" || n === "heatOnly") return;
+      o = o;
+      const s = this.graphics.get(n);
+      if (!(!s || !o.draw))
+        if (o.inner)
+          this.drawCutBox(s, o.outer, o.inner, o.color, h);
+        else {
+          const { x: d, y: u, width: g, height: m } = o.outer;
+          s.rect(d, u, g, Math.max(m, 1)), s.fill({ color: o.color, alpha: h });
+        }
+    });
+    const { invalidationCount: i, draw: c } = a;
+    if (i > 0 && c) {
+      const o = Math.min(i / 20, 1), s = t[l.Margin], g = P([255, 255, 0], [255, 0, 0], o);
+      this.heatGraphics.rect(
+        s.outer.x,
+        s.outer.y,
+        s.outer.width,
+        s.outer.height
+      ), this.heatGraphics.fill({ color: g, alpha: Math.min(0.3, o) }), this.heatGraphics.stroke({ color: g, alpha: Math.max(0.3, o), pixelLine: !0 });
+    }
+    this.position.set(r.x, r.y);
+  }
+  /**
+   * Reset the debug object's state
+   */
+  reset() {
+    this.graphics.forEach((t) => t.clear()), this.heatGraphics.clear(), this.removeFromParent();
+  }
+  /**
+   * Draw a box with a cut-out center
+   */
+  drawCutBox(t, r, h, a, i) {
+    const { x: c, y: n, width: o, height: s } = r, { x: d, y: u, width: g, height: m } = h;
+    t.rect(c, n, o, s), t.fill({ color: a, alpha: i }), t.rect(d, u, g, m), t.cut();
+  }
+}
+var R = Object.defineProperty, $ = (e, t, r) => t in e ? R(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, f = (e, t, r) => $(e, typeof t != "symbol" ? t + "" : t, r);
+class y {
+  constructor() {
+    f(this, "holder", new M()), f(this, "regions", /* @__PURE__ */ new Map()), f(this, "colors", {
+      [l.Margin]: "#B68655",
+      [l.Padding]: "#BAC57F",
+      [l.Border]: "#E7C583",
+      [l.Content]: "#89B1BE",
+      [l.Flex]: "#6E28D9"
+    }), f(this, "alpha", 0.75), Object.values(l).forEach((t) => {
+      this.regions.set(t, {
+        outer: new C(),
+        inner: new C()
+      });
+    }), this.holder.__devtoolIgnore = !0, this.holder.__devtoolIgnoreChildren = !0, this.holder.eventMode = "none", this.holder.interactiveChildren = !1;
+  }
+  /**
+   * Clean up previous render state
+   */
+  reset() {
+    for (let t = this.holder.children.length - 1; t >= 0; t--) {
+      const r = this.holder.children[t];
+      b.return(r);
+    }
+  }
+  /**
+   * Render debug visuals for the given layout
+   */
+  render(t) {
+    B(t, this.regions);
+    const r = Object.values(l).reduce(
+      (n, o) => {
+        const s = this.regions.get(o);
+        if (!s) return n;
+        const d = `debugDraw${o.charAt(0).toUpperCase()}${o.slice(1)}`;
+        return n[o] = {
+          ...s,
+          color: this.colors[o],
+          draw: t._styles.custom[d] ?? !0
+        }, n;
+      },
+      {}
+    ), { left: h, top: a } = t.computedLayout, i = t.target.getGlobalPosition(), c = b.get(G, {
+      ...r,
+      target: { x: i.x + h, y: i.y + a },
+      alpha: this.alpha,
+      heat: {
+        invalidationCount: t._modificationCount,
+        draw: t._styles.custom.debugHeat !== !1
+      },
+      heatOnly: !t._styles.custom.debug
+    });
+    this.holder.addChildAt(c, 0);
+  }
+  /**
+   * Clean up the debug renderer
+   */
+  destroy() {
+    this.reset(), this.holder.destroy(), this.regions.clear();
+  }
+}
+export {
+  y as DebugRenderer
+};
+//# sourceMappingURL=DebugRenderer-DcvJLrrD.js.map

package/dist/DebugRenderer-DcvJLrrD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugRenderer-DcvJLrrD.js","sources":["../../../node_modules/.pnpm/@pixi+layout@3.0.2_@types+react@19.1.3_pixi.js@8.9.2_react@19.1.0_yoga-layout@3.2.1/node_modules/@pixi/layout/dist/core/debug/calculateDebugRegions.mjs","../../../node_modules/.pnpm/@pixi+layout@3.0.2_@types+react@19.1.3_pixi.js@8.9.2_react@19.1.0_yoga-layout@3.2.1/node_modules/@pixi/layout/dist/core/debug/DebugNode.mjs","../../../node_modules/.pnpm/@pixi+layout@3.0.2_@types+react@19.1.3_pixi.js@8.9.2_react@19.1.0_yoga-layout@3.2.1/node_modules/@pixi/layout/dist/core/debug/DebugRenderer.mjs"],"sourcesContent":["import { Bounds, Rectangle } from \"pixi.js\";\nimport { Edge, FlexDirection } from \"yoga-layout/load\";\nvar DebugRegionType = /* @__PURE__ */ ((DebugRegionType2) => {\n  DebugRegionType2[\"Margin\"] = \"margin\";\n  DebugRegionType2[\"Padding\"] = \"padding\";\n  DebugRegionType2[\"Border\"] = \"border\";\n  DebugRegionType2[\"Flex\"] = \"flex\";\n  DebugRegionType2[\"Content\"] = \"content\";\n  return DebugRegionType2;\n})(DebugRegionType || {});\nfunction getEdgeValues(layout, type) {\n  const method = `getComputed${type.charAt(0).toUpperCase() + type.slice(1)}`;\n  return {\n    top: layout.yoga[method](Edge.Top),\n    right: layout.yoga[method](Edge.Right),\n    bottom: layout.yoga[method](Edge.Bottom),\n    left: layout.yoga[method](Edge.Left)\n  };\n}\nfunction calculateRegions(layout, regions) {\n  const { width, height } = layout.computedLayout;\n  const margin = getEdgeValues(layout, \"margin\");\n  const border = getEdgeValues(layout, \"border\");\n  const padding = getEdgeValues(layout, \"padding\");\n  const marginRegion = regions.get(\n    \"margin\"\n    /* Margin */\n  );\n  marginRegion.outer.x = -margin.left;\n  marginRegion.outer.y = -margin.top;\n  marginRegion.outer.width = width + margin.left + margin.right;\n  marginRegion.outer.height = height + margin.top + margin.bottom;\n  marginRegion.inner.x = 0;\n  marginRegion.inner.y = 0;\n  marginRegion.inner.width = width;\n  marginRegion.inner.height = height;\n  const borderRegion = regions.get(\n    \"border\"\n    /* Border */\n  );\n  borderRegion.outer.x = 0;\n  borderRegion.outer.y = 0;\n  borderRegion.outer.width = width;\n  borderRegion.outer.height = height;\n  borderRegion.inner.x = border.left;\n  borderRegion.inner.y = border.top;\n  borderRegion.inner.width = width - border.left - border.right;\n  borderRegion.inner.height = height - border.top - border.bottom;\n  const paddingRegion = regions.get(\n    \"padding\"\n    /* Padding */\n  );\n  paddingRegion.outer.copyFrom(borderRegion.inner);\n  paddingRegion.inner.x = padding.left + border.left;\n  paddingRegion.inner.y = padding.top + border.top;\n  paddingRegion.inner.width = width - padding.left - padding.right - border.left - border.right;\n  paddingRegion.inner.height = height - padding.top - padding.bottom - border.top - border.bottom;\n  calculateFlexRegion(layout, regions);\n}\nfunction calculateFlexRegion(layout, regions) {\n  var _a;\n  const flexRegion = regions.get(\n    \"flex\"\n    /* Flex */\n  );\n  const paddingRegion = regions.get(\n    \"padding\"\n    /* Padding */\n  );\n  flexRegion.outer.copyFrom(paddingRegion.inner);\n  const bounds = new Bounds();\n  const children = layout.yoga.getChildCount();\n  for (let i = 0; i < children; i++) {\n    const child = layout.yoga.getChild(i);\n    const computedBounds = child.getComputedLayout();\n    bounds.addRect(\n      new Rectangle(computedBounds.left, computedBounds.top, computedBounds.width, computedBounds.height)\n    );\n  }\n  const flexDir = layout.yoga.getFlexDirection();\n  if (flexDir === FlexDirection.Column || flexDir === FlexDirection.ColumnReverse) {\n    bounds.width = flexRegion.outer.width;\n    bounds.x = flexRegion.outer.x;\n  } else {\n    bounds.height = flexRegion.outer.height;\n    bounds.y = flexRegion.outer.y;\n  }\n  (_a = flexRegion.inner) == null ? void 0 : _a.copyFrom(bounds.rectangle);\n  regions.get(\n    \"content\"\n    /* Content */\n  ).outer.copyFrom(bounds.rectangle);\n}\nexport {\n  DebugRegionType,\n  calculateRegions\n};\n//# sourceMappingURL=calculateDebugRegions.mjs.map\n","var __defProp = Object.defineProperty;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== \"symbol\" ? key + \"\" : key, value);\nimport { Container, Graphics as Graphics$1 } from \"pixi.js\";\nimport { DebugRegionType } from \"./calculateDebugRegions.mjs\";\nfunction lerpColor(start, end, t) {\n  const r = Math.round(start[0] + (end[0] - start[0]) * t);\n  const g = Math.round(start[1] + (end[1] - start[1]) * t);\n  const b = Math.round(start[2] + (end[2] - start[2]) * t);\n  return `rgb(${r},${g},${b})`;\n}\nclass DebugNode extends Container {\n  constructor() {\n    super();\n    /** Graphics objects for each region type */\n    __publicField(this, \"graphics\");\n    __publicField(this, \"heatGraphics\");\n    this.graphics = /* @__PURE__ */ new Map();\n    Object.values(DebugRegionType).forEach((type) => {\n      const graphics = new Graphics$1();\n      this.graphics.set(type, graphics);\n      this.addChild(graphics);\n    });\n    this.heatGraphics = new Graphics$1();\n    this.addChild(this.heatGraphics);\n  }\n  /**\n   * Initialize the debug object with region data\n   */\n  init(regions) {\n    const { target, alpha, heat } = regions;\n    if (!regions.heatOnly) {\n      Object.entries(regions).forEach(([type, region]) => {\n        if (type === \"target\" || type === \"alpha\" || type === \"heat\" || type === \"heatOnly\") return;\n        region = region;\n        const graphics = this.graphics.get(type);\n        if (!graphics || !region.draw) return;\n        if (region.inner) {\n          this.drawCutBox(graphics, region.outer, region.inner, region.color, alpha);\n        } else {\n          const { x, y, width, height } = region.outer;\n          graphics.rect(x, y, width, Math.max(height, 1));\n          graphics.fill({ color: region.color, alpha });\n        }\n      });\n    }\n    const { invalidationCount, draw } = heat;\n    if (invalidationCount > 0 && draw) {\n      const MAX_INVALIDATE_COUNT = 20;\n      const normalizedAlpha = Math.min(invalidationCount / MAX_INVALIDATE_COUNT, 1);\n      const marginRegion = regions[DebugRegionType.Margin];\n      const startColor = [255, 255, 0];\n      const endColor = [255, 0, 0];\n      const color = lerpColor(startColor, endColor, normalizedAlpha);\n      this.heatGraphics.rect(\n        marginRegion.outer.x,\n        marginRegion.outer.y,\n        marginRegion.outer.width,\n        marginRegion.outer.height\n      );\n      this.heatGraphics.fill({ color, alpha: Math.min(0.3, normalizedAlpha) });\n      this.heatGraphics.stroke({ color, alpha: Math.max(0.3, normalizedAlpha), pixelLine: true });\n    }\n    this.position.set(target.x, target.y);\n  }\n  /**\n   * Reset the debug object's state\n   */\n  reset() {\n    this.graphics.forEach((graphics) => graphics.clear());\n    this.heatGraphics.clear();\n    this.removeFromParent();\n  }\n  /**\n   * Draw a box with a cut-out center\n   */\n  drawCutBox(graphics, outer, inner, color, alpha) {\n    const { x, y, width, height } = outer;\n    const { x: innerX, y: innerY, width: innerWidth, height: innerHeight } = inner;\n    graphics.rect(x, y, width, height);\n    graphics.fill({ color, alpha });\n    graphics.rect(innerX, innerY, innerWidth, innerHeight);\n    graphics.cut();\n  }\n}\nexport {\n  DebugNode\n};\n//# sourceMappingURL=DebugNode.mjs.map\n","var __defProp = Object.defineProperty;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== \"symbol\" ? key + \"\" : key, value);\nimport { Container, Rectangle, BigPool } from \"pixi.js\";\nimport { DebugRegionType, calculateRegions } from \"./calculateDebugRegions.mjs\";\nimport { DebugNode } from \"./DebugNode.mjs\";\nclass DebugRenderer {\n  constructor() {\n    /** Container for all debug visuals */\n    __publicField(this, \"holder\", new Container());\n    /** Region data for each debug type */\n    __publicField(this, \"regions\", /* @__PURE__ */ new Map());\n    /** Color configuration for each region type */\n    __publicField(this, \"colors\", {\n      [DebugRegionType.Margin]: \"#B68655\",\n      [DebugRegionType.Padding]: \"#BAC57F\",\n      [DebugRegionType.Border]: \"#E7C583\",\n      [DebugRegionType.Content]: \"#89B1BE\",\n      [DebugRegionType.Flex]: \"#6E28D9\"\n    });\n    /** Global alpha value for all regions */\n    __publicField(this, \"alpha\", 0.75);\n    Object.values(DebugRegionType).forEach((type) => {\n      this.regions.set(type, {\n        outer: new Rectangle(),\n        inner: new Rectangle()\n      });\n    });\n    this.holder.__devtoolIgnore = true;\n    this.holder.__devtoolIgnoreChildren = true;\n    this.holder.eventMode = \"none\";\n    this.holder.interactiveChildren = false;\n  }\n  /**\n   * Clean up previous render state\n   */\n  reset() {\n    for (let i = this.holder.children.length - 1; i >= 0; i--) {\n      const child = this.holder.children[i];\n      BigPool.return(child);\n    }\n  }\n  /**\n   * Render debug visuals for the given layout\n   */\n  render(layout) {\n    calculateRegions(layout, this.regions);\n    const regionData = Object.values(DebugRegionType).reduce(\n      (acc, type) => {\n        const region = this.regions.get(type);\n        if (!region) return acc;\n        const drawString = `debugDraw${type.charAt(0).toUpperCase()}${type.slice(1)}`;\n        acc[type] = {\n          ...region,\n          color: this.colors[type],\n          draw: layout._styles.custom[drawString] ?? true\n        };\n        return acc;\n      },\n      {}\n    );\n    const { left, top } = layout.computedLayout;\n    const pos = layout.target.getGlobalPosition();\n    const debugObject = BigPool.get(DebugNode, {\n      ...regionData,\n      target: { x: pos.x + left, y: pos.y + top },\n      alpha: this.alpha,\n      heat: {\n        invalidationCount: layout._modificationCount,\n        draw: layout._styles.custom.debugHeat !== false\n      },\n      heatOnly: !layout._styles.custom.debug\n    });\n    this.holder.addChildAt(debugObject, 0);\n  }\n  /**\n   * Clean up the debug renderer\n   */\n  destroy() {\n    this.reset();\n    this.holder.destroy();\n    this.regions.clear();\n  }\n}\nexport {\n  DebugRenderer\n};\n//# sourceMappingURL=DebugRenderer.mjs.map\n"],"names":["DebugRegionType","DebugRegionType2","getEdgeValues","layout","type","method","Edge","calculateRegions","regions","width","height","margin","border","padding","marginRegion","borderRegion","paddingRegion","calculateFlexRegion","_a","flexRegion","bounds","Bounds","children","i","computedBounds","Rectangle","flexDir","FlexDirection","__defProp","__defNormalProp","obj","key","value","__publicField","lerpColor","start","end","t","r","g","b","DebugNode","Container","graphics","Graphics$1","target","alpha","heat","region","x","y","invalidationCount","draw","normalizedAlpha","color","outer","inner","innerX","innerY","innerWidth","innerHeight","DebugRenderer","child","BigPool","regionData","acc","drawString","left","top","pos","debugObject"],"mappings":"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","x_google_ignoreList":[0,1,2]}

package/dist/components/Button.d.ts

@@ -0,0 +1,136 @@
+import { FederatedPointerEvent } from 'pixi.js';
+
+/**
+ * Button states for visual feedback
+ */
+export declare enum ButtonState {
+    Normal = "normal",
+    Hover = "hover",
+    Pressed = "pressed",
+    Disabled = "disabled"
+}
+/**
+ * Button style configuration for different visual approaches
+ */
+export interface ButtonStyle {
+    /** Background color for each state */
+    backgroundColor?: {
+        [ButtonState.Normal]?: string;
+        [ButtonState.Hover]?: string;
+        [ButtonState.Pressed]?: string;
+        [ButtonState.Disabled]?: string;
+    };
+    /** Border configuration */
+    border?: {
+        color?: string;
+        width?: number;
+        radius?: number;
+    };
+    /** Text styling */
+    text?: {
+        color?: string;
+        fontSize?: number;
+        fontFamily?: string;
+    };
+    /** Sprite textures for each state (alternative to backgroundColor) */
+    textures?: {
+        [ButtonState.Normal]?: string;
+        [ButtonState.Hover]?: string;
+        [ButtonState.Pressed]?: string;
+        [ButtonState.Disabled]?: string;
+    };
+}
+/**
+ * Properties for the Button component
+ */
+export interface ButtonProps {
+    /** Button text content */
+    text?: string;
+    /** Button disabled state */
+    disabled?: boolean;
+    /** Click event handler */
+    click?: (event: FederatedPointerEvent) => void;
+    /** Hover enter event handler */
+    hoverEnter?: (event: FederatedPointerEvent) => void;
+    /** Hover leave event handler */
+    hoverLeave?: (event: FederatedPointerEvent) => void;
+    /** Press down event handler */
+    pressDown?: (event: FederatedPointerEvent) => void;
+    /** Press up event handler */
+    pressUp?: (event: FederatedPointerEvent) => void;
+    /** Visual style configuration */
+    style?: ButtonStyle;
+    /** Button width */
+    width?: number;
+    /** Button height */
+    height?: number;
+    /** Button position X */
+    x?: number;
+    /** Button position Y */
+    y?: number;
+    /** Button alpha/opacity */
+    alpha?: number;
+    /** Button visibility */
+    visible?: boolean;
+    /** Button cursor */
+    cursor?: string;
+}
+/**
+ * Creates a Button component with interactive states and customizable styling.
+ *
+ * This component provides a fully interactive button with visual feedback
+ * for different states (normal, hover, pressed, disabled). It supports both
+ * sprite-based and graphics-based rendering approaches.
+ *
+ * The button is built using a Container with background and text elements,
+ * providing reactive state management and event handling.
+ *
+ * @param props - Button configuration including text, styling, and event handlers
+ * @returns A reactive Button component
+ * @example
+ * ```typescript
+ * // Simple button with text and click handler
+ * const simpleButton = Button({
+ *   text: "Click Me",
+ *   onClick: () => console.log("Button clicked!"),
+ *   width: 150,
+ *   height: 50
+ * });
+ *
+ * // Styled button with custom colors
+ * const styledButton = Button({
+ *   text: "Styled Button",
+ *   style: {
+ *     backgroundColor: {
+ *       normal: "#28a745",
+ *       hover: "#218838",
+ *       pressed: "#1e7e34",
+ *       disabled: "#6c757d"
+ *     },
+ *     border: {
+ *       radius: 8,
+ *       width: 2,
+ *       color: "#ffffff"
+ *     },
+ *     text: {
+ *       fontSize: 18,
+ *       color: "#ffffff"
+ *     }
+ *   }
+ * });
+ *
+ * // Sprite-based button
+ * const spriteButton = Button({
+ *   text: "Play Game",
+ *   style: {
+ *     textures: {
+ *       normal: "/assets/button-normal.png",
+ *       hover: "/assets/button-hover.png",
+ *       pressed: "/assets/button-pressed.png"
+ *     }
+ *   }
+ * });
+ * ```
+ */
+export declare function Button(props: ButtonProps): import('..').Element<import('./DisplayObject').ComponentInstance> | Promise<import('..').Element<import('./DisplayObject').ComponentInstance>>;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAOhD;;GAEG;AACH,oBAAY,WAAW;IACrB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,sCAAsC;IACtC,eAAe,CAAC,EAAE;QAChB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC;QAC9B,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC;QAC7B,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,EAAE,MAAM,CAAC;QAC/B,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;IACF,2BAA2B;IAC3B,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,mBAAmB;IACnB,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,sEAAsE;IACtE,QAAQ,CAAC,EAAE;QACT,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC;QAC9B,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC;QAC7B,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,EAAE,MAAM,CAAC;QAC/B,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC/C,gCAAgC;IAChC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACpD,gCAAgC;IAChC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACpD,+BAA+B;IAC/B,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACnD,6BAA6B;IAC7B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,iCAAiC;IACjC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,wBAAwB;IACxB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,kJA6HxC"}

package/dist/components/Canvas.d.ts

@@ -0,0 +1,18 @@
+import { Props } from '../engine/reactive';
+import { ComponentFunction } from '../engine/signal';
+import { SignalOrPrimitive } from './types';
+import { Size } from './types/DisplayObject';
+
+export interface CanvasProps extends Props {
+    cursorStyles?: () => any;
+    width?: SignalOrPrimitive<Size>;
+    height?: SignalOrPrimitive<Size>;
+    canvasEl?: HTMLElement;
+    selector?: string;
+    isRoot?: boolean;
+    tick?: any;
+    class?: SignalOrPrimitive<string>;
+    background?: string;
+}
+export declare const Canvas: ComponentFunction<CanvasProps>;
+//# sourceMappingURL=Canvas.d.ts.map

package/dist/components/Canvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../src/components/Canvas.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,EAIN,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAe7C,MAAM,WAAW,WAAY,SAAQ,KAAK;IACxC,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC;IACzB,KAAK,CAAC,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CAsGjD,CAAC"}

package/dist/components/Container.d.ts

@@ -0,0 +1,80 @@
+import { ComponentFunction } from '../engine/signal';
+import { DisplayObjectProps } from './types/DisplayObject';
+
+interface ContainerProps extends DisplayObjectProps {
+    sortableChildren?: boolean;
+}
+declare const CanvasContainer_base: {
+    new (): {
+        [x: string]: any;
+        "__#1@#canvasContext": {
+            [key: string]: any;
+        } | null;
+        isFlex: boolean;
+        fullProps: import('..').Props;
+        isMounted: boolean;
+        _anchorPoints: import('pixi.js').ObservablePoint;
+        isCustomAnchor: boolean;
+        displayWidth: import('@signe/reactive').WritableSignal<number>;
+        displayHeight: import('@signe/reactive').WritableSignal<number>;
+        overrideProps: string[];
+        layout: any;
+        onBeforeDestroy: import('./DisplayObject').OnHook | null;
+        onAfterMount: import('./DisplayObject').OnHook | null;
+        subjectInit: import('rxjs').BehaviorSubject<any>;
+        disableLayout: boolean;
+        "__#1@#registeredEvents": Map<string, Function>;
+        readonly deltaRatio: any;
+        readonly parentIsFlex: any;
+        onInit(props: import('..').Props): void;
+        onMount({ parent, props }: import('..').Element</*elided*/ any>, index?: number): Promise<void>;
+        onUpdate(props: import('..').Props): void;
+        onDestroy(parent: import('..').Element, afterDestroy?: () => void): Promise<void>;
+        setFlexDirection(direction: import('./types/DisplayObject').FlexDirection): void;
+        setFlexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): void;
+        setAlignContent(align: import('./types/DisplayObject').AlignContent): void;
+        setAlignSelf(align: import('./types/DisplayObject').AlignContent): void;
+        setAlignItems(align: import('./types/DisplayObject').AlignContent): void;
+        setJustifyContent(justifyContent: "flex-start" | "flex-end" | "center" | "space-between" | "space-around"): void;
+        setPosition(position: import('./types/DisplayObject').EdgeSize): void;
+        setX(x: number): void;
+        setY(y: number): void;
+        setPadding(padding: import('./types/DisplayObject').EdgeSize): void;
+        setMargin(margin: import('./types/DisplayObject').EdgeSize): void;
+        setGap(gap: import('./types/DisplayObject').EdgeSize): void;
+        setBorder(border: import('./types/DisplayObject').EdgeSize): void;
+        setPositionType(positionType: "relative" | "absolute"): void;
+        setWidth(width: number): void;
+        setHeight(height: number): void;
+        getWidth(): number;
+        getHeight(): number;
+        setMinWidth(minWidth: number | string): void;
+        setMinHeight(minHeight: number | string): void;
+        setMaxWidth(maxWidth: number | string): void;
+        setMaxHeight(maxHeight: number | string): void;
+        setAspectRatio(aspectRatio: number): void;
+        setFlexGrow(flexGrow: number): void;
+        setFlexShrink(flexShrink: number): void;
+        setFlexBasis(flexBasis: number | string): void;
+        setRowGap(rowGap: number): void;
+        setColumnGap(columnGap: number): void;
+        setTop(top: number | string): void;
+        setLeft(left: number | string): void;
+        setRight(right: number | string): void;
+        setBottom(bottom: number | string): void;
+        setObjectFit(objectFit: import('./types/DisplayObject').ObjectFit): void;
+        setObjectPosition(objectPosition: import('./types/DisplayObject').ObjectPosition): void;
+        setTransformOrigin(transformOrigin: import('./types/DisplayObject').TransformOrigin): void;
+    };
+    [x: string]: any;
+};
+export declare class CanvasContainer extends CanvasContainer_base {
+    isCustomAnchor: boolean;
+    onUpdate(props: any): void;
+    onMount(args: any): Promise<void>;
+}
+export interface CanvasContainer extends DisplayObjectProps {
+}
+export declare const Container: ComponentFunction<ContainerProps>;
+export {};
+//# sourceMappingURL=Container.d.ts.map

package/dist/components/Container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../src/components/Container.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAG3D,UAAU,cAAe,SAAQ,kBAAkB;IACjD,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAED,qBAAa,eAAgB,SAAQ,oBAA4B;IAC/D,cAAc,UAAQ;IAEtB,QAAQ,CAAC,KAAK,KAAA;IAaR,OAAO,CAAC,IAAI,KAAA;CAUnB;AAED,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;CAAG;AAI9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,CAEvD,CAAC"}

package/dist/components/DOMContainer.d.ts

@@ -0,0 +1,77 @@
+import { Element } from '../engine/reactive';
+import { ComponentFunction } from '../engine/signal';
+import { DisplayObjectProps } from './types/DisplayObject';
+
+declare const CanvasDOMContainer_base: {
+    new (): {
+        [x: string]: any;
+        "__#1@#canvasContext": {
+            [key: string]: any;
+        } | null;
+        isFlex: boolean;
+        fullProps: import('..').Props;
+        isMounted: boolean;
+        _anchorPoints: import('pixi.js').ObservablePoint;
+        isCustomAnchor: boolean;
+        displayWidth: import('@signe/reactive').WritableSignal<number>;
+        displayHeight: import('@signe/reactive').WritableSignal<number>;
+        overrideProps: string[];
+        layout: any;
+        onBeforeDestroy: import('./DisplayObject').OnHook | null;
+        onAfterMount: import('./DisplayObject').OnHook | null;
+        subjectInit: import('rxjs').BehaviorSubject<any>;
+        disableLayout: boolean;
+        "__#1@#registeredEvents": Map<string, Function>;
+        readonly deltaRatio: any;
+        readonly parentIsFlex: any;
+        onInit(props: import('..').Props): void;
+        onMount({ parent, props }: Element</*elided*/ any>, index?: number): Promise<void>;
+        onUpdate(props: import('..').Props): void;
+        onDestroy(parent: Element, afterDestroy?: () => void): Promise<void>;
+        setFlexDirection(direction: import('./types/DisplayObject').FlexDirection): void;
+        setFlexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): void;
+        setAlignContent(align: import('./types/DisplayObject').AlignContent): void;
+        setAlignSelf(align: import('./types/DisplayObject').AlignContent): void;
+        setAlignItems(align: import('./types/DisplayObject').AlignContent): void;
+        setJustifyContent(justifyContent: "flex-start" | "flex-end" | "center" | "space-between" | "space-around"): void;
+        setPosition(position: import('./types/DisplayObject').EdgeSize): void;
+        setX(x: number): void;
+        setY(y: number): void;
+        setPadding(padding: import('./types/DisplayObject').EdgeSize): void;
+        setMargin(margin: import('./types/DisplayObject').EdgeSize): void;
+        setGap(gap: import('./types/DisplayObject').EdgeSize): void;
+        setBorder(border: import('./types/DisplayObject').EdgeSize): void;
+        setPositionType(positionType: "relative" | "absolute"): void;
+        setWidth(width: number): void;
+        setHeight(height: number): void;
+        getWidth(): number;
+        getHeight(): number;
+        setMinWidth(minWidth: number | string): void;
+        setMinHeight(minHeight: number | string): void;
+        setMaxWidth(maxWidth: number | string): void;
+        setMaxHeight(maxHeight: number | string): void;
+        setAspectRatio(aspectRatio: number): void;
+        setFlexGrow(flexGrow: number): void;
+        setFlexShrink(flexShrink: number): void;
+        setFlexBasis(flexBasis: number | string): void;
+        setRowGap(rowGap: number): void;
+        setColumnGap(columnGap: number): void;
+        setTop(top: number | string): void;
+        setLeft(left: number | string): void;
+        setRight(right: number | string): void;
+        setBottom(bottom: number | string): void;
+        setObjectFit(objectFit: import('./types/DisplayObject').ObjectFit): void;
+        setObjectPosition(objectPosition: import('./types/DisplayObject').ObjectPosition): void;
+        setTransformOrigin(transformOrigin: import('./types/DisplayObject').TransformOrigin): void;
+    };
+    [x: string]: any;
+};
+export declare class CanvasDOMContainer extends CanvasDOMContainer_base {
+    disableLayout: boolean;
+    onInit(props: any): void;
+}
+export interface CanvasDOMContainer extends DisplayObjectProps {
+}
+export declare const DOMContainer: ComponentFunction<any>;
+export {};
+//# sourceMappingURL=DOMContainer.d.ts.map

package/dist/components/DOMContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DOMContainer.d.ts","sourceRoot":"","sources":["../../src/components/DOMContainer.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EAER,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,iBAAiB,EAAK,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmG3D,qBAAa,kBAAmB,SAAQ,uBAA+B;IACrE,aAAa,UAAQ;IAErB,MAAM,CAAC,KAAK,EAAE,GAAG;CAIlB;AAED,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;CAAG;AAIjE,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,GAAG,CAE/C,CAAC"}

package/dist/components/DOMElement.d.ts

@@ -0,0 +1,44 @@
+import { Element } from '../engine/reactive';
+import { OnHook } from './DisplayObject';
+import { ComponentFunction } from '../engine/signal';
+import { DisplayObjectProps } from './types/DisplayObject';
+
+interface DOMContainerProps extends DisplayObjectProps {
+    element: string | {
+        value: HTMLElement;
+    };
+    textContent?: string;
+    attrs?: Record<string, any> & {
+        class?: string | string[] | Record<string, boolean> | {
+            items?: string[];
+        } | {
+            value?: string | string[] | Record<string, boolean>;
+        };
+        style?: string | Record<string, string | number> | {
+            value?: string | Record<string, string | number>;
+        };
+    };
+    onBeforeDestroy?: OnHook;
+}
+export declare class CanvasDOMElement {
+    element: HTMLElement;
+    private eventListeners;
+    private onBeforeDestroy;
+    private valueSignal;
+    private isFormElementType;
+    /**
+     * Checks if the element is a form element that supports the value attribute
+     * @param elementType - The element type string from props
+     * @returns true if the element is a form element with value support
+     */
+    private isFormElement;
+    onInit(props: DOMContainerProps): void;
+    onMount(context: Element<CanvasDOMElement>): void;
+    onUpdate(props: DOMContainerProps): void;
+    onDestroy(parent: Element<CanvasDOMElement>, afterDestroy: () => void): Promise<void>;
+}
+export interface CanvasDOMElement extends DisplayObjectProps {
+}
+export declare const DOMElement: ComponentFunction<DOMContainerProps>;
+export {};
+//# sourceMappingURL=DOMElement.d.ts.map

package/dist/components/DOMElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DOMElement.d.ts","sourceRoot":"","sources":["../../src/components/DOMElement.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EAER,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAoC,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAI3D,UAAU,iBAAkB,SAAQ,kBAAkB;IACpD,OAAO,EACH,MAAM,GACN;QACE,KAAK,EAAE,WAAW,CAAC;KACpB,CAAC;IACN,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG;QAC5B,KAAK,CAAC,EACF,MAAM,GACN,MAAM,EAAE,GACR,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACvB;YAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;SAAE,GACpB;YAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;SAAE,CAAC;QAC5D,KAAK,CAAC,EACF,MAAM,GACN,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAC/B;YAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;SAAE,CAAC;KAC1D,CAAC;IACF,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAwKD,qBAAa,gBAAgB;IACpB,OAAO,EAAE,WAAW,CAAC;IAC5B,OAAO,CAAC,cAAc,CAA8C;IACpE,OAAO,CAAC,eAAe,CAAuB;IAC9C,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,iBAAiB,CAAkB;IAE3C;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAKrB,MAAM,CAAC,KAAK,EAAE,iBAAiB;IAgE/B,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,gBAAgB,CAAC;IAgC1C,QAAQ,CAAC,KAAK,EAAE,iBAAiB;IA2E3B,SAAS,CACb,MAAM,EAAE,OAAO,CAAC,gBAAgB,CAAC,EACjC,YAAY,EAAE,MAAM,IAAI,GACvB,OAAO,CAAC,IAAI,CAAC;CAqBjB;AAED,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;CAAG;AAI/D,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,iBAAiB,CAE3D,CAAC"}