@hypen-space/web 0.2.0

package/dist/chunk-2s02mkzs.js

@@ -0,0 +1,32 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+
+export { __toCommonJS, __export, __esm };
+
+//# debugId=7CFBE4211FBB190464756E2164756E21

package/dist/chunk-2s02mkzs.js.map

@@ -0,0 +1,9 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [
+  ],
+  "mappings": "",
+  "debugId": "7CFBE4211FBB190464756E2164756E21",
+  "names": []
+}

package/dist/src/canvas/accessibility.js

@@ -0,0 +1,152 @@
+import"../../chunk-2s02mkzs.js";
+
+// src/canvas/accessibility.ts
+class AccessibilityLayer {
+  shadowRoot;
+  nodeMap = new Map;
+  enabled;
+  constructor(container, enabled = true) {
+    this.enabled = enabled && typeof document !== "undefined";
+    if (this.enabled && typeof document !== "undefined") {
+      this.shadowRoot = document.createElement("div");
+      this.shadowRoot.setAttribute("role", "application");
+      this.shadowRoot.setAttribute("aria-label", "Hypen Canvas Application");
+      this.shadowRoot.style.position = "absolute";
+      this.shadowRoot.style.left = "-9999px";
+      this.shadowRoot.style.width = "1px";
+      this.shadowRoot.style.height = "1px";
+      this.shadowRoot.style.overflow = "hidden";
+      if (container) {
+        container.appendChild(this.shadowRoot);
+      }
+    } else {
+      this.shadowRoot = {};
+    }
+  }
+  syncTree(root) {
+    if (!this.enabled)
+      return;
+    this.shadowRoot.innerHTML = "";
+    this.nodeMap.clear();
+    const shadowNode = this.createShadowNode(root);
+    if (shadowNode) {
+      this.shadowRoot.appendChild(shadowNode);
+    }
+  }
+  createShadowNode(node) {
+    if (!node.visible)
+      return null;
+    let element;
+    switch (node.type.toLowerCase()) {
+      case "button":
+        element = document.createElement("button");
+        element.textContent = this.getNodeText(node);
+        if (node.props.onclick) {
+          element.setAttribute("aria-label", "Clickable button");
+        }
+        break;
+      case "input":
+        element = document.createElement("input");
+        element.type = node.props.type || "text";
+        element.value = node.props.value || "";
+        if (node.props.placeholder) {
+          element.placeholder = node.props.placeholder;
+        }
+        break;
+      case "textarea":
+        element = document.createElement("textarea");
+        element.value = node.props.value || "";
+        if (node.props.placeholder) {
+          element.placeholder = node.props.placeholder;
+        }
+        break;
+      case "image":
+        element = document.createElement("img");
+        element.src = node.props.src || "";
+        element.alt = node.props.alt || "Image";
+        break;
+      case "text":
+        element = document.createElement("span");
+        element.textContent = String(node.props[0] || node.props.text || "");
+        break;
+      case "column":
+      case "row":
+      case "container":
+      case "box":
+        element = document.createElement("div");
+        element.setAttribute("role", node.type === "column" ? "group" : "group");
+        break;
+      default:
+        element = document.createElement("div");
+    }
+    element.setAttribute("data-hypen-id", node.id);
+    if (node.props["aria-label"]) {
+      element.setAttribute("aria-label", node.props["aria-label"]);
+    }
+    if (node.focusable) {
+      element.tabIndex = 0;
+    }
+    this.nodeMap.set(node.id, element);
+    for (const child of node.children) {
+      const childElement = this.createShadowNode(child);
+      if (childElement) {
+        element.appendChild(childElement);
+      }
+    }
+    return element;
+  }
+  getNodeText(node) {
+    if (node.type === "text") {
+      return String(node.props[0] || node.props.text || "");
+    }
+    let text = "";
+    for (const child of node.children) {
+      text += this.getNodeText(child);
+    }
+    return text;
+  }
+  focusNode(nodeId) {
+    if (!this.enabled)
+      return;
+    const element = this.nodeMap.get(nodeId);
+    if (element) {
+      element.focus();
+    }
+  }
+  updateNode(node) {
+    if (!this.enabled)
+      return;
+    const element = this.nodeMap.get(node.id);
+    if (!element)
+      return;
+    if (node.type === "text") {
+      element.textContent = String(node.props[0] || node.props.text || "");
+    }
+    if (node.type === "input" || node.type === "textarea") {
+      element.value = node.props.value || "";
+    }
+    element.style.display = node.visible ? "" : "none";
+  }
+  getElement(nodeId) {
+    return this.nodeMap.get(nodeId);
+  }
+  setEnabled(enabled) {
+    this.enabled = enabled;
+    if (!enabled && this.shadowRoot.parentElement) {
+      this.shadowRoot.remove();
+    }
+  }
+  destroy() {
+    if (this.shadowRoot.parentElement) {
+      this.shadowRoot.remove();
+    }
+    this.nodeMap.clear();
+  }
+}
+export {
+  AccessibilityLayer
+};
+
+export { AccessibilityLayer };
+
+//# debugId=FEB7D90D0DE68F0B64756E2164756E21

package/dist/src/canvas/accessibility.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/canvas/accessibility.ts"],
+  "sourcesContent": [
+    "/**\n * Accessibility Layer\n *\n * Maintain shadow DOM for screen readers\n */\n\nimport type { VirtualNode } from \"./types.js\";\nimport { walkTree } from \"./utils.js\";\n\n/**\n * Accessibility Manager\n */\nexport class AccessibilityLayer {\n  private shadowRoot: HTMLElement;\n  private nodeMap = new Map<string, HTMLElement>();\n  private enabled: boolean;\n\n  constructor(container: HTMLElement | null, enabled: boolean = true) {\n    this.enabled = enabled && typeof document !== \"undefined\";\n\n    // Create shadow root container (only in browser)\n    if (this.enabled && typeof document !== \"undefined\") {\n      this.shadowRoot = document.createElement(\"div\");\n      this.shadowRoot.setAttribute(\"role\", \"application\");\n      this.shadowRoot.setAttribute(\"aria-label\", \"Hypen Canvas Application\");\n      this.shadowRoot.style.position = \"absolute\";\n      this.shadowRoot.style.left = \"-9999px\";\n      this.shadowRoot.style.width = \"1px\";\n      this.shadowRoot.style.height = \"1px\";\n      this.shadowRoot.style.overflow = \"hidden\";\n\n      if (container) {\n        container.appendChild(this.shadowRoot);\n      }\n    } else {\n      // Fallback for non-browser environments\n      this.shadowRoot = {} as HTMLElement;\n    }\n  }\n\n  /**\n   * Sync shadow DOM with virtual tree\n   */\n  syncTree(root: VirtualNode): void {\n    if (!this.enabled) return;\n\n    // Clear existing\n    this.shadowRoot.innerHTML = \"\";\n    this.nodeMap.clear();\n\n    // Build shadow DOM\n    const shadowNode = this.createShadowNode(root);\n    if (shadowNode) {\n      this.shadowRoot.appendChild(shadowNode);\n    }\n  }\n\n  /**\n   * Create shadow DOM element for virtual node\n   */\n  private createShadowNode(node: VirtualNode): HTMLElement | null {\n    if (!node.visible) return null;\n\n    let element: HTMLElement;\n\n    // Create appropriate HTML element\n    switch (node.type.toLowerCase()) {\n      case \"button\":\n        element = document.createElement(\"button\");\n        element.textContent = this.getNodeText(node);\n        if (node.props.onclick) {\n          element.setAttribute(\"aria-label\", \"Clickable button\");\n        }\n        break;\n\n      case \"input\":\n        element = document.createElement(\"input\");\n        (element as HTMLInputElement).type = node.props.type || \"text\";\n        (element as HTMLInputElement).value = node.props.value || \"\";\n        if (node.props.placeholder) {\n          (element as HTMLInputElement).placeholder = node.props.placeholder;\n        }\n        break;\n\n      case \"textarea\":\n        element = document.createElement(\"textarea\");\n        (element as HTMLTextAreaElement).value = node.props.value || \"\";\n        if (node.props.placeholder) {\n          (element as HTMLTextAreaElement).placeholder = node.props.placeholder;\n        }\n        break;\n\n      case \"image\":\n        element = document.createElement(\"img\");\n        (element as HTMLImageElement).src = node.props.src || \"\";\n        (element as HTMLImageElement).alt = node.props.alt || \"Image\";\n        break;\n\n      case \"text\":\n        element = document.createElement(\"span\");\n        element.textContent = String(node.props[0] || node.props.text || \"\");\n        break;\n\n      case \"column\":\n      case \"row\":\n      case \"container\":\n      case \"box\":\n        element = document.createElement(\"div\");\n        element.setAttribute(\"role\", node.type === \"column\" ? \"group\" : \"group\");\n        break;\n\n      default:\n        element = document.createElement(\"div\");\n    }\n\n    // Set common attributes\n    element.setAttribute(\"data-hypen-id\", node.id);\n\n    if (node.props[\"aria-label\"]) {\n      element.setAttribute(\"aria-label\", node.props[\"aria-label\"]);\n    }\n\n    if (node.focusable) {\n      element.tabIndex = 0;\n    }\n\n    // Store mapping\n    this.nodeMap.set(node.id, element);\n\n    // Add children\n    for (const child of node.children) {\n      const childElement = this.createShadowNode(child);\n      if (childElement) {\n        element.appendChild(childElement);\n      }\n    }\n\n    return element;\n  }\n\n  /**\n   * Get text content from node tree\n   */\n  private getNodeText(node: VirtualNode): string {\n    if (node.type === \"text\") {\n      return String(node.props[0] || node.props.text || \"\");\n    }\n\n    let text = \"\";\n    for (const child of node.children) {\n      text += this.getNodeText(child);\n    }\n    return text;\n  }\n\n  /**\n   * Focus node in shadow DOM\n   */\n  focusNode(nodeId: string): void {\n    if (!this.enabled) return;\n\n    const element = this.nodeMap.get(nodeId);\n    if (element) {\n      element.focus();\n    }\n  }\n\n  /**\n   * Update single node\n   */\n  updateNode(node: VirtualNode): void {\n    if (!this.enabled) return;\n\n    const element = this.nodeMap.get(node.id);\n    if (!element) return;\n\n    // Update text content\n    if (node.type === \"text\") {\n      element.textContent = String(node.props[0] || node.props.text || \"\");\n    }\n\n    // Update input value\n    if (node.type === \"input\" || node.type === \"textarea\") {\n      (element as HTMLInputElement | HTMLTextAreaElement).value = node.props.value || \"\";\n    }\n\n    // Update visibility\n    element.style.display = node.visible ? \"\" : \"none\";\n  }\n\n  /**\n   * Get shadow element by node ID\n   */\n  getElement(nodeId: string): HTMLElement | undefined {\n    return this.nodeMap.get(nodeId);\n  }\n\n  /**\n   * Enable or disable accessibility layer\n   */\n  setEnabled(enabled: boolean): void {\n    this.enabled = enabled;\n    if (!enabled && this.shadowRoot.parentElement) {\n      this.shadowRoot.remove();\n    }\n  }\n\n  /**\n   * Cleanup\n   */\n  destroy(): void {\n    if (this.shadowRoot.parentElement) {\n      this.shadowRoot.remove();\n    }\n    this.nodeMap.clear();\n  }\n}\n\n"
+  ],
+  "mappings": ";;;AAYO,MAAM,mBAAmB;AAAA,EACtB;AAAA,EACA,UAAU,IAAI;AAAA,EACd;AAAA,EAER,WAAW,CAAC,WAA+B,UAAmB,MAAM;AAAA,IAClE,KAAK,UAAU,WAAW,OAAO,aAAa;AAAA,IAG9C,IAAI,KAAK,WAAW,OAAO,aAAa,aAAa;AAAA,MACnD,KAAK,aAAa,SAAS,cAAc,KAAK;AAAA,MAC9C,KAAK,WAAW,aAAa,QAAQ,aAAa;AAAA,MAClD,KAAK,WAAW,aAAa,cAAc,0BAA0B;AAAA,MACrE,KAAK,WAAW,MAAM,WAAW;AAAA,MACjC,KAAK,WAAW,MAAM,OAAO;AAAA,MAC7B,KAAK,WAAW,MAAM,QAAQ;AAAA,MAC9B,KAAK,WAAW,MAAM,SAAS;AAAA,MAC/B,KAAK,WAAW,MAAM,WAAW;AAAA,MAEjC,IAAI,WAAW;AAAA,QACb,UAAU,YAAY,KAAK,UAAU;AAAA,MACvC;AAAA,IACF,EAAO;AAAA,MAEL,KAAK,aAAa,CAAC;AAAA;AAAA;AAAA,EAOvB,QAAQ,CAAC,MAAyB;AAAA,IAChC,IAAI,CAAC,KAAK;AAAA,MAAS;AAAA,IAGnB,KAAK,WAAW,YAAY;AAAA,IAC5B,KAAK,QAAQ,MAAM;AAAA,IAGnB,MAAM,aAAa,KAAK,iBAAiB,IAAI;AAAA,IAC7C,IAAI,YAAY;AAAA,MACd,KAAK,WAAW,YAAY,UAAU;AAAA,IACxC;AAAA;AAAA,EAMM,gBAAgB,CAAC,MAAuC;AAAA,IAC9D,IAAI,CAAC,KAAK;AAAA,MAAS,OAAO;AAAA,IAE1B,IAAI;AAAA,IAGJ,QAAQ,KAAK,KAAK,YAAY;AAAA,WACvB;AAAA,QACH,UAAU,SAAS,cAAc,QAAQ;AAAA,QACzC,QAAQ,cAAc,KAAK,YAAY,IAAI;AAAA,QAC3C,IAAI,KAAK,MAAM,SAAS;AAAA,UACtB,QAAQ,aAAa,cAAc,kBAAkB;AAAA,QACvD;AAAA,QACA;AAAA,WAEG;AAAA,QACH,UAAU,SAAS,cAAc,OAAO;AAAA,QACvC,QAA6B,OAAO,KAAK,MAAM,QAAQ;AAAA,QACvD,QAA6B,QAAQ,KAAK,MAAM,SAAS;AAAA,QAC1D,IAAI,KAAK,MAAM,aAAa;AAAA,UACzB,QAA6B,cAAc,KAAK,MAAM;AAAA,QACzD;AAAA,QACA;AAAA,WAEG;AAAA,QACH,UAAU,SAAS,cAAc,UAAU;AAAA,QAC1C,QAAgC,QAAQ,KAAK,MAAM,SAAS;AAAA,QAC7D,IAAI,KAAK,MAAM,aAAa;AAAA,UACzB,QAAgC,cAAc,KAAK,MAAM;AAAA,QAC5D;AAAA,QACA;AAAA,WAEG;AAAA,QACH,UAAU,SAAS,cAAc,KAAK;AAAA,QACrC,QAA6B,MAAM,KAAK,MAAM,OAAO;AAAA,QACrD,QAA6B,MAAM,KAAK,MAAM,OAAO;AAAA,QACtD;AAAA,WAEG;AAAA,QACH,UAAU,SAAS,cAAc,MAAM;AAAA,QACvC,QAAQ,cAAc,OAAO,KAAK,MAAM,MAAM,KAAK,MAAM,QAAQ,EAAE;AAAA,QACnE;AAAA,WAEG;AAAA,WACA;AAAA,WACA;AAAA,WACA;AAAA,QACH,UAAU,SAAS,cAAc,KAAK;AAAA,QACtC,QAAQ,aAAa,QAAQ,KAAK,SAAS,WAAW,UAAU,OAAO;AAAA,QACvE;AAAA;AAAA,QAGA,UAAU,SAAS,cAAc,KAAK;AAAA;AAAA,IAI1C,QAAQ,aAAa,iBAAiB,KAAK,EAAE;AAAA,IAE7C,IAAI,KAAK,MAAM,eAAe;AAAA,MAC5B,QAAQ,aAAa,cAAc,KAAK,MAAM,aAAa;AAAA,IAC7D;AAAA,IAEA,IAAI,KAAK,WAAW;AAAA,MAClB,QAAQ,WAAW;AAAA,IACrB;AAAA,IAGA,KAAK,QAAQ,IAAI,KAAK,IAAI,OAAO;AAAA,IAGjC,WAAW,SAAS,KAAK,UAAU;AAAA,MACjC,MAAM,eAAe,KAAK,iBAAiB,KAAK;AAAA,MAChD,IAAI,cAAc;AAAA,QAChB,QAAQ,YAAY,YAAY;AAAA,MAClC;AAAA,IACF;AAAA,IAEA,OAAO;AAAA;AAAA,EAMD,WAAW,CAAC,MAA2B;AAAA,IAC7C,IAAI,KAAK,SAAS,QAAQ;AAAA,MACxB,OAAO,OAAO,KAAK,MAAM,MAAM,KAAK,MAAM,QAAQ,EAAE;AAAA,IACtD;AAAA,IAEA,IAAI,OAAO;AAAA,IACX,WAAW,SAAS,KAAK,UAAU;AAAA,MACjC,QAAQ,KAAK,YAAY,KAAK;AAAA,IAChC;AAAA,IACA,OAAO;AAAA;AAAA,EAMT,SAAS,CAAC,QAAsB;AAAA,IAC9B,IAAI,CAAC,KAAK;AAAA,MAAS;AAAA,IAEnB,MAAM,UAAU,KAAK,QAAQ,IAAI,MAAM;AAAA,IACvC,IAAI,SAAS;AAAA,MACX,QAAQ,MAAM;AAAA,IAChB;AAAA;AAAA,EAMF,UAAU,CAAC,MAAyB;AAAA,IAClC,IAAI,CAAC,KAAK;AAAA,MAAS;AAAA,IAEnB,MAAM,UAAU,KAAK,QAAQ,IAAI,KAAK,EAAE;AAAA,IACxC,IAAI,CAAC;AAAA,MAAS;AAAA,IAGd,IAAI,KAAK,SAAS,QAAQ;AAAA,MACxB,QAAQ,cAAc,OAAO,KAAK,MAAM,MAAM,KAAK,MAAM,QAAQ,EAAE;AAAA,IACrE;AAAA,IAGA,IAAI,KAAK,SAAS,WAAW,KAAK,SAAS,YAAY;AAAA,MACpD,QAAmD,QAAQ,KAAK,MAAM,SAAS;AAAA,IAClF;AAAA,IAGA,QAAQ,MAAM,UAAU,KAAK,UAAU,KAAK;AAAA;AAAA,EAM9C,UAAU,CAAC,QAAyC;AAAA,IAClD,OAAO,KAAK,QAAQ,IAAI,MAAM;AAAA;AAAA,EAMhC,UAAU,CAAC,SAAwB;AAAA,IACjC,KAAK,UAAU;AAAA,IACf,IAAI,CAAC,WAAW,KAAK,WAAW,eAAe;AAAA,MAC7C,KAAK,WAAW,OAAO;AAAA,IACzB;AAAA;AAAA,EAMF,OAAO,GAAS;AAAA,IACd,IAAI,KAAK,WAAW,eAAe;AAAA,MACjC,KAAK,WAAW,OAAO;AAAA,IACzB;AAAA,IACA,KAAK,QAAQ,MAAM;AAAA;AAEvB;",
+  "debugId": "FEB7D90D0DE68F0B64756E2164756E21",
+  "names": []
+}

package/dist/src/canvas/events.js

@@ -0,0 +1,198 @@
+import {
+  getAbsoluteBounds,
+  isPointInRoundedRect
+} from "./utils.js";
+import"../../chunk-2s02mkzs.js";
+
+// src/canvas/events.ts
+class CanvasEventManager {
+  canvas;
+  engine;
+  rootNode = null;
+  hoveredNode = null;
+  focusedNode = null;
+  mouseDownNode = null;
+  constructor(canvas, engine) {
+    this.canvas = canvas;
+    this.engine = engine;
+    this.setupEventListeners();
+  }
+  setRootNode(node) {
+    this.rootNode = node;
+  }
+  setupEventListeners() {
+    this.canvas.addEventListener("mousemove", this.onMouseMove.bind(this));
+    this.canvas.addEventListener("mousedown", this.onMouseDown.bind(this));
+    this.canvas.addEventListener("mouseup", this.onMouseUp.bind(this));
+    this.canvas.addEventListener("click", this.onClick.bind(this));
+    this.canvas.addEventListener("dblclick", this.onDoubleClick.bind(this));
+    this.canvas.addEventListener("keydown", this.onKeyDown.bind(this));
+    this.canvas.addEventListener("keyup", this.onKeyUp.bind(this));
+  }
+  getCanvasCoordinates(e) {
+    const rect = this.canvas.getBoundingClientRect();
+    const scaleX = this.canvas.width / rect.width;
+    const scaleY = this.canvas.height / rect.height;
+    return {
+      x: (e.clientX - rect.left) * scaleX,
+      y: (e.clientY - rect.top) * scaleY
+    };
+  }
+  hitTest(point) {
+    if (!this.rootNode)
+      return null;
+    return this.hitTestNode(this.rootNode, point);
+  }
+  hitTestNode(node, point) {
+    if (!node.visible || !node.layout)
+      return null;
+    const bounds = getAbsoluteBounds(node);
+    if (!bounds)
+      return null;
+    for (let i = node.children.length - 1;i >= 0; i--) {
+      const child = node.children[i];
+      const hit = this.hitTestNode(child, point);
+      if (hit)
+        return hit;
+    }
+    const radius = node.layout.border.radius;
+    if (isPointInRoundedRect(point, bounds, radius)) {
+      return node;
+    }
+    return null;
+  }
+  onMouseMove(e) {
+    const point = this.getCanvasCoordinates(e);
+    const node = this.hitTest(point);
+    if (node !== this.hoveredNode) {
+      if (this.hoveredNode) {
+        this.hoveredNode.hovered = false;
+        this.dispatchNodeEvent(this.hoveredNode, "mouseleave", {});
+      }
+      this.hoveredNode = node;
+      if (node) {
+        node.hovered = true;
+        this.dispatchNodeEvent(node, "mouseenter", {});
+      }
+      this.updateCursor(node);
+      this.requestRedraw();
+    }
+  }
+  onMouseDown(e) {
+    const point = this.getCanvasCoordinates(e);
+    const node = this.hitTest(point);
+    this.mouseDownNode = node;
+    if (node && node.clickable) {
+      this.dispatchNodeEvent(node, "mousedown", {
+        button: e.button,
+        clientX: e.clientX,
+        clientY: e.clientY
+      });
+    }
+    if (node && node.focusable) {
+      this.setFocus(node);
+    } else {
+      this.setFocus(null);
+    }
+  }
+  onMouseUp(e) {
+    const point = this.getCanvasCoordinates(e);
+    const node = this.hitTest(point);
+    if (node && node.clickable) {
+      this.dispatchNodeEvent(node, "mouseup", {
+        button: e.button,
+        clientX: e.clientX,
+        clientY: e.clientY
+      });
+    }
+    this.mouseDownNode = null;
+  }
+  onClick(e) {
+    const point = this.getCanvasCoordinates(e);
+    const node = this.hitTest(point);
+    if (node && node.clickable && node === this.mouseDownNode) {
+      this.dispatchNodeEvent(node, "click", {
+        button: e.button,
+        clientX: e.clientX,
+        clientY: e.clientY
+      });
+    }
+  }
+  onDoubleClick(e) {
+    const point = this.getCanvasCoordinates(e);
+    const node = this.hitTest(point);
+    if (node && node.clickable) {
+      this.dispatchNodeEvent(node, "dblclick", {
+        button: e.button,
+        clientX: e.clientX,
+        clientY: e.clientY
+      });
+    }
+  }
+  onKeyDown(e) {
+    if (this.focusedNode) {
+      this.dispatchNodeEvent(this.focusedNode, "keydown", {
+        key: e.key,
+        code: e.code,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        altKey: e.altKey
+      });
+    }
+  }
+  onKeyUp(e) {
+    if (this.focusedNode) {
+      this.dispatchNodeEvent(this.focusedNode, "keyup", {
+        key: e.key,
+        code: e.code,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        altKey: e.altKey
+      });
+    }
+  }
+  setFocus(node) {
+    if (node === this.focusedNode)
+      return;
+    if (this.focusedNode) {
+      this.focusedNode.focused = false;
+      this.dispatchNodeEvent(this.focusedNode, "blur", {});
+    }
+    this.focusedNode = node;
+    if (node) {
+      node.focused = true;
+      this.dispatchNodeEvent(node, "focus", {});
+    }
+    this.requestRedraw();
+  }
+  updateCursor(node) {
+    if (!node) {
+      this.canvas.style.cursor = "default";
+      return;
+    }
+    const cursor = node.props.cursor || (node.clickable ? "pointer" : "default");
+    this.canvas.style.cursor = cursor;
+  }
+  dispatchNodeEvent(node, eventType, data) {
+    const actionName = node.props[`on${eventType}`] || node.props[eventType];
+    if (actionName && typeof actionName === "string") {
+      this.engine.dispatchAction(actionName, {
+        type: eventType,
+        nodeId: node.id,
+        timestamp: Date.now(),
+        ...data
+      });
+    }
+  }
+  requestRedraw() {
+    this.canvas.dispatchEvent(new CustomEvent("hypen:redraw"));
+  }
+  destroy() {}
+}
+export {
+  CanvasEventManager
+};
+
+export { CanvasEventManager };
+
+//# debugId=4735E18D82AF967764756E2164756E21

package/dist/src/canvas/events.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/canvas/events.ts"],
+  "sourcesContent": [
+    "/**\n * Event System\n *\n * Hit testing and event handling for canvas nodes\n */\n\nimport type { VirtualNode, Point } from \"./types.js\";\nimport { isPointInRoundedRect, getAbsoluteBounds } from \"./utils.js\";\n\n// Interface for the engine that CanvasEventManager needs\ninterface IEngine {\n  dispatchAction(name: string, payload?: any): void;\n}\n\n/**\n * Canvas Event Manager\n */\nexport class CanvasEventManager {\n  private canvas: HTMLCanvasElement;\n  private engine: IEngine;\n  private rootNode: VirtualNode | null = null;\n  private hoveredNode: VirtualNode | null = null;\n  private focusedNode: VirtualNode | null = null;\n  private mouseDownNode: VirtualNode | null = null;\n\n  constructor(canvas: HTMLCanvasElement, engine: IEngine) {\n    this.canvas = canvas;\n    this.engine = engine;\n    this.setupEventListeners();\n  }\n\n  /**\n   * Set the root node for hit testing\n   */\n  setRootNode(node: VirtualNode | null): void {\n    this.rootNode = node;\n  }\n\n  /**\n   * Setup canvas event listeners\n   */\n  private setupEventListeners(): void {\n    this.canvas.addEventListener(\"mousemove\", this.onMouseMove.bind(this));\n    this.canvas.addEventListener(\"mousedown\", this.onMouseDown.bind(this));\n    this.canvas.addEventListener(\"mouseup\", this.onMouseUp.bind(this));\n    this.canvas.addEventListener(\"click\", this.onClick.bind(this));\n    this.canvas.addEventListener(\"dblclick\", this.onDoubleClick.bind(this));\n    this.canvas.addEventListener(\"keydown\", this.onKeyDown.bind(this));\n    this.canvas.addEventListener(\"keyup\", this.onKeyUp.bind(this));\n  }\n\n  /**\n   * Get canvas coordinates from mouse event\n   */\n  private getCanvasCoordinates(e: MouseEvent): Point {\n    const rect = this.canvas.getBoundingClientRect();\n    const scaleX = this.canvas.width / rect.width;\n    const scaleY = this.canvas.height / rect.height;\n\n    return {\n      x: (e.clientX - rect.left) * scaleX,\n      y: (e.clientY - rect.top) * scaleY,\n    };\n  }\n\n  /**\n   * Find node at canvas coordinates\n   */\n  private hitTest(point: Point): VirtualNode | null {\n    if (!this.rootNode) return null;\n    return this.hitTestNode(this.rootNode, point);\n  }\n\n  /**\n   * Recursively test node and children\n   */\n  private hitTestNode(node: VirtualNode, point: Point): VirtualNode | null {\n    if (!node.visible || !node.layout) return null;\n\n    const bounds = getAbsoluteBounds(node);\n    if (!bounds) return null;\n\n    // Test children first (front to back)\n    for (let i = node.children.length - 1; i >= 0; i--) {\n      const child = node.children[i];\n      const hit = this.hitTestNode(child, point);\n      if (hit) return hit;\n    }\n\n    // Test this node\n    const radius = node.layout.border.radius;\n    if (isPointInRoundedRect(point, bounds, radius)) {\n      return node;\n    }\n\n    return null;\n  }\n\n  /**\n   * Handle mouse move\n   */\n  private onMouseMove(e: MouseEvent): void {\n    const point = this.getCanvasCoordinates(e);\n    const node = this.hitTest(point);\n\n    // Update hover state\n    if (node !== this.hoveredNode) {\n      // Leave old node\n      if (this.hoveredNode) {\n        this.hoveredNode.hovered = false;\n        this.dispatchNodeEvent(this.hoveredNode, \"mouseleave\", {});\n      }\n\n      // Enter new node\n      this.hoveredNode = node;\n      if (node) {\n        node.hovered = true;\n        this.dispatchNodeEvent(node, \"mouseenter\", {});\n      }\n\n      // Update cursor\n      this.updateCursor(node);\n\n      // Request redraw for hover effects\n      this.requestRedraw();\n    }\n  }\n\n  /**\n   * Handle mouse down\n   */\n  private onMouseDown(e: MouseEvent): void {\n    const point = this.getCanvasCoordinates(e);\n    const node = this.hitTest(point);\n\n    this.mouseDownNode = node;\n\n    if (node && node.clickable) {\n      this.dispatchNodeEvent(node, \"mousedown\", {\n        button: e.button,\n        clientX: e.clientX,\n        clientY: e.clientY,\n      });\n    }\n\n    // Update focus\n    if (node && node.focusable) {\n      this.setFocus(node);\n    } else {\n      this.setFocus(null);\n    }\n  }\n\n  /**\n   * Handle mouse up\n   */\n  private onMouseUp(e: MouseEvent): void {\n    const point = this.getCanvasCoordinates(e);\n    const node = this.hitTest(point);\n\n    if (node && node.clickable) {\n      this.dispatchNodeEvent(node, \"mouseup\", {\n        button: e.button,\n        clientX: e.clientX,\n        clientY: e.clientY,\n      });\n    }\n\n    this.mouseDownNode = null;\n  }\n\n  /**\n   * Handle click\n   */\n  private onClick(e: MouseEvent): void {\n    const point = this.getCanvasCoordinates(e);\n    const node = this.hitTest(point);\n\n    if (node && node.clickable && node === this.mouseDownNode) {\n      this.dispatchNodeEvent(node, \"click\", {\n        button: e.button,\n        clientX: e.clientX,\n        clientY: e.clientY,\n      });\n    }\n  }\n\n  /**\n   * Handle double click\n   */\n  private onDoubleClick(e: MouseEvent): void {\n    const point = this.getCanvasCoordinates(e);\n    const node = this.hitTest(point);\n\n    if (node && node.clickable) {\n      this.dispatchNodeEvent(node, \"dblclick\", {\n        button: e.button,\n        clientX: e.clientX,\n        clientY: e.clientY,\n      });\n    }\n  }\n\n  /**\n   * Handle keyboard events\n   */\n  private onKeyDown(e: KeyboardEvent): void {\n    if (this.focusedNode) {\n      this.dispatchNodeEvent(this.focusedNode, \"keydown\", {\n        key: e.key,\n        code: e.code,\n        ctrlKey: e.ctrlKey,\n        shiftKey: e.shiftKey,\n        altKey: e.altKey,\n      });\n    }\n  }\n\n  private onKeyUp(e: KeyboardEvent): void {\n    if (this.focusedNode) {\n      this.dispatchNodeEvent(this.focusedNode, \"keyup\", {\n        key: e.key,\n        code: e.code,\n        ctrlKey: e.ctrlKey,\n        shiftKey: e.shiftKey,\n        altKey: e.altKey,\n      });\n    }\n  }\n\n  /**\n   * Set focused node\n   */\n  private setFocus(node: VirtualNode | null): void {\n    if (node === this.focusedNode) return;\n\n    if (this.focusedNode) {\n      this.focusedNode.focused = false;\n      this.dispatchNodeEvent(this.focusedNode, \"blur\", {});\n    }\n\n    this.focusedNode = node;\n\n    if (node) {\n      node.focused = true;\n      this.dispatchNodeEvent(node, \"focus\", {});\n    }\n\n    this.requestRedraw();\n  }\n\n  /**\n   * Update cursor based on node\n   */\n  private updateCursor(node: VirtualNode | null): void {\n    if (!node) {\n      this.canvas.style.cursor = \"default\";\n      return;\n    }\n\n    const cursor = node.props.cursor || (node.clickable ? \"pointer\" : \"default\");\n    this.canvas.style.cursor = cursor;\n  }\n\n  /**\n   * Dispatch event to engine\n   */\n  private dispatchNodeEvent(node: VirtualNode, eventType: string, data: any): void {\n    // Check if node has action handler for this event\n    const actionName = node.props[`on${eventType}`] || node.props[eventType];\n\n    if (actionName && typeof actionName === \"string\") {\n      // Dispatch to engine\n      this.engine.dispatchAction(actionName, {\n        type: eventType,\n        nodeId: node.id,\n        timestamp: Date.now(),\n        ...data,\n      });\n    }\n  }\n\n  /**\n   * Request redraw from renderer\n   */\n  private requestRedraw(): void {\n    // This will be called via a callback set by the renderer\n    // For now, dispatch a custom event\n    this.canvas.dispatchEvent(new CustomEvent(\"hypen:redraw\"));\n  }\n\n  /**\n   * Cleanup\n   */\n  destroy(): void {\n    // Remove event listeners if needed\n  }\n}\n\n\n\n\n\n\n\n\n\n"
+  ],
+  "mappings": "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",
+  "debugId": "4735E18D82AF967764756E2164756E21",
+  "names": []
+}

package/dist/src/canvas/index.js

@@ -0,0 +1,28 @@
+import {
+  CanvasRenderer
+} from "./renderer.js";
+import {
+  registerPainter
+} from "./paint.js";
+import"./layout.js";
+import {
+  CanvasEventManager
+} from "./events.js";
+import {
+  AccessibilityLayer
+} from "./accessibility.js";
+import"./text.js";
+import {
+  InputOverlay
+} from "./input.js";
+import"./utils.js";
+import"../../chunk-2s02mkzs.js";
+export {
+  registerPainter,
+  InputOverlay,
+  CanvasRenderer,
+  CanvasEventManager,
+  AccessibilityLayer
+};
+
+//# debugId=11D5013CD5400CA064756E2164756E21

package/dist/src/canvas/index.js.map

@@ -0,0 +1,9 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [
+  ],
+  "mappings": "",
+  "debugId": "11D5013CD5400CA064756E2164756E21",
+  "names": []
+}

package/dist/src/canvas/input.js

@@ -0,0 +1,132 @@
+import {
+  getAbsoluteBounds
+} from "./utils.js";
+import"../../chunk-2s02mkzs.js";
+
+// src/canvas/input.ts
+class InputOverlay {
+  container;
+  overlay = null;
+  focusedNode = null;
+  onChangeCallback = null;
+  constructor(container) {
+    this.container = container || {};
+  }
+  showInput(node, canvasBounds, onChange) {
+    if (typeof document === "undefined")
+      return;
+    this.hideInput();
+    const bounds = getAbsoluteBounds(node);
+    if (!bounds)
+      return;
+    const isMultiline = node.type === "textarea";
+    this.overlay = isMultiline ? document.createElement("textarea") : document.createElement("input");
+    this.styleOverlay(node, bounds, canvasBounds);
+    const value = node.props.value || "";
+    this.overlay.value = value;
+    this.onChangeCallback = onChange;
+    this.overlay.addEventListener("input", this.onInput.bind(this));
+    this.overlay.addEventListener("blur", this.onBlur.bind(this));
+    this.overlay.addEventListener("keydown", this.onKeyDown.bind(this));
+    this.container.appendChild(this.overlay);
+    this.overlay.focus();
+    this.focusedNode = node;
+  }
+  hideInput() {
+    if (this.overlay) {
+      this.overlay.remove();
+      this.overlay = null;
+    }
+    this.focusedNode = null;
+    this.onChangeCallback = null;
+  }
+  updatePosition(node, canvasBounds) {
+    if (!this.overlay || node !== this.focusedNode)
+      return;
+    const bounds = getAbsoluteBounds(node);
+    if (!bounds)
+      return;
+    this.positionOverlay(bounds, canvasBounds);
+  }
+  styleOverlay(node, bounds, canvasBounds) {
+    if (!this.overlay)
+      return;
+    const props = node.props;
+    this.positionOverlay(bounds, canvasBounds);
+    const fontSize = parseFloat(props.fontSize) || 16;
+    const fontWeight = props.fontWeight || "normal";
+    const fontFamily = props.fontFamily || "system-ui, sans-serif";
+    const color = props.color || "#000000";
+    Object.assign(this.overlay.style, {
+      fontSize: `${fontSize}px`,
+      fontWeight,
+      fontFamily,
+      color,
+      border: "none",
+      outline: "2px solid #007bff",
+      backgroundColor: props.backgroundColor || "#ffffff",
+      padding: `${props.padding || 8}px`,
+      borderRadius: `${props.borderRadius || 4}px`,
+      boxSizing: "border-box",
+      resize: "none"
+    });
+    if (props.placeholder) {
+      this.overlay.placeholder = props.placeholder;
+    }
+    if (this.overlay instanceof HTMLInputElement && props.type) {
+      this.overlay.type = props.type;
+    }
+  }
+  positionOverlay(bounds, canvasBounds) {
+    if (!this.overlay)
+      return;
+    const canvas = this.container.querySelector("canvas");
+    const scaleX = canvasBounds.width / canvas.width;
+    const scaleY = canvasBounds.height / canvas.height;
+    const left = bounds.x * scaleX;
+    const top = bounds.y * scaleY;
+    const width = bounds.width * scaleX;
+    const height = bounds.height * scaleY;
+    Object.assign(this.overlay.style, {
+      position: "absolute",
+      left: `${left}px`,
+      top: `${top}px`,
+      width: `${width}px`,
+      height: `${height}px`
+    });
+  }
+  onInput(e) {
+    if (!this.overlay || !this.onChangeCallback)
+      return;
+    const value = this.overlay.value;
+    this.onChangeCallback(value);
+  }
+  onBlur() {
+    this.hideInput();
+  }
+  onKeyDown(e) {
+    if (!this.overlay)
+      return;
+    if (e.key === "Enter" && this.overlay instanceof HTMLInputElement) {
+      e.preventDefault();
+      this.overlay.blur();
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      this.overlay.blur();
+    }
+  }
+  isShown() {
+    return this.overlay !== null;
+  }
+  getFocusedNode() {
+    return this.focusedNode;
+  }
+}
+export {
+  InputOverlay
+};
+
+export { InputOverlay };
+
+//# debugId=222277311BC256D364756E2164756E21

package/dist/src/canvas/input.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/canvas/input.ts"],
+  "sourcesContent": [
+    "/**\n * Input Overlay System\n *\n * Handle text input using DOM overlay elements\n */\n\nimport type { VirtualNode, Rectangle } from \"./types.js\";\nimport { getAbsoluteBounds } from \"./utils.js\";\n\n/**\n * Input Overlay Manager\n */\nexport class InputOverlay {\n  private container: HTMLElement;\n  private overlay: HTMLInputElement | HTMLTextAreaElement | null = null;\n  private focusedNode: VirtualNode | null = null;\n  private onChangeCallback: ((value: string) => void) | null = null;\n\n  constructor(container: HTMLElement | null) {\n    this.container = container || ({} as HTMLElement);\n  }\n\n  /**\n   * Show input overlay for a node\n   */\n  showInput(\n    node: VirtualNode,\n    canvasBounds: DOMRect,\n    onChange: (value: string) => void\n  ): void {\n    // Skip if document is not available (non-browser environment)\n    if (typeof document === \"undefined\") return;\n\n    this.hideInput();\n\n    const bounds = getAbsoluteBounds(node);\n    if (!bounds) return;\n\n    const isMultiline = node.type === \"textarea\";\n    this.overlay = isMultiline\n      ? document.createElement(\"textarea\")\n      : document.createElement(\"input\");\n\n    // Style overlay\n    this.styleOverlay(node, bounds, canvasBounds);\n\n    // Set initial value\n    const value = node.props.value || \"\";\n    this.overlay.value = value;\n\n    // Setup event handlers\n    this.onChangeCallback = onChange;\n    this.overlay.addEventListener(\"input\", this.onInput.bind(this));\n    this.overlay.addEventListener(\"blur\", this.onBlur.bind(this));\n    this.overlay.addEventListener(\"keydown\", this.onKeyDown.bind(this) as EventListener);\n\n    // Add to DOM and focus\n    this.container.appendChild(this.overlay);\n    this.overlay.focus();\n\n    this.focusedNode = node;\n  }\n\n  /**\n   * Hide input overlay\n   */\n  hideInput(): void {\n    if (this.overlay) {\n      this.overlay.remove();\n      this.overlay = null;\n    }\n    this.focusedNode = null;\n    this.onChangeCallback = null;\n  }\n\n  /**\n   * Update overlay position\n   */\n  updatePosition(node: VirtualNode, canvasBounds: DOMRect): void {\n    if (!this.overlay || node !== this.focusedNode) return;\n\n    const bounds = getAbsoluteBounds(node);\n    if (!bounds) return;\n\n    this.positionOverlay(bounds, canvasBounds);\n  }\n\n  /**\n   * Style overlay to match canvas node\n   */\n  private styleOverlay(\n    node: VirtualNode,\n    bounds: Rectangle,\n    canvasBounds: DOMRect\n  ): void {\n    if (!this.overlay) return;\n\n    const props = node.props;\n\n    // Position\n    this.positionOverlay(bounds, canvasBounds);\n\n    // Font and text styling\n    const fontSize = parseFloat(props.fontSize) || 16;\n    const fontWeight = props.fontWeight || \"normal\";\n    const fontFamily = props.fontFamily || \"system-ui, sans-serif\";\n    const color = props.color || \"#000000\";\n\n    Object.assign(this.overlay.style, {\n      fontSize: `${fontSize}px`,\n      fontWeight: fontWeight,\n      fontFamily: fontFamily,\n      color: color,\n      border: \"none\",\n      outline: \"2px solid #007bff\",\n      backgroundColor: props.backgroundColor || \"#ffffff\",\n      padding: `${props.padding || 8}px`,\n      borderRadius: `${props.borderRadius || 4}px`,\n      boxSizing: \"border-box\",\n      resize: \"none\",\n    });\n\n    // Placeholder\n    if (props.placeholder) {\n      this.overlay.placeholder = props.placeholder;\n    }\n\n    // Input type\n    if (this.overlay instanceof HTMLInputElement && props.type) {\n      this.overlay.type = props.type;\n    }\n  }\n\n  /**\n   * Position overlay over canvas node\n   */\n  private positionOverlay(bounds: Rectangle, canvasBounds: DOMRect): void {\n    if (!this.overlay) return;\n\n    // Calculate scale factor between canvas and display\n    const canvas = this.container.querySelector(\"canvas\") as HTMLCanvasElement;\n    const scaleX = canvasBounds.width / canvas.width;\n    const scaleY = canvasBounds.height / canvas.height;\n\n    const left = bounds.x * scaleX;\n    const top = bounds.y * scaleY;\n    const width = bounds.width * scaleX;\n    const height = bounds.height * scaleY;\n\n    Object.assign(this.overlay.style, {\n      position: \"absolute\",\n      left: `${left}px`,\n      top: `${top}px`,\n      width: `${width}px`,\n      height: `${height}px`,\n    });\n  }\n\n  /**\n   * Handle input event\n   */\n  private onInput(e: Event): void {\n    if (!this.overlay || !this.onChangeCallback) return;\n\n    const value = this.overlay.value;\n    this.onChangeCallback(value);\n  }\n\n  /**\n   * Handle blur event\n   */\n  private onBlur(): void {\n    // Hide overlay when focus is lost\n    this.hideInput();\n  }\n\n  /**\n   * Handle keyboard events\n   */\n  private onKeyDown(e: KeyboardEvent): void {\n    if (!this.overlay) return;\n\n    // Enter key submits (unless multiline)\n    if (e.key === \"Enter\" && this.overlay instanceof HTMLInputElement) {\n      e.preventDefault();\n      this.overlay.blur();\n    }\n\n    // Escape cancels\n    if (e.key === \"Escape\") {\n      e.preventDefault();\n      this.overlay.blur();\n    }\n  }\n\n  /**\n   * Check if input is currently shown\n   */\n  isShown(): boolean {\n    return this.overlay !== null;\n  }\n\n  /**\n   * Get current focused node\n   */\n  getFocusedNode(): VirtualNode | null {\n    return this.focusedNode;\n  }\n}\n\n"
+  ],
+  "mappings": ";;;;;;AAYO,MAAM,aAAa;AAAA,EAChB;AAAA,EACA,UAAyD;AAAA,EACzD,cAAkC;AAAA,EAClC,mBAAqD;AAAA,EAE7D,WAAW,CAAC,WAA+B;AAAA,IACzC,KAAK,YAAY,aAAc,CAAC;AAAA;AAAA,EAMlC,SAAS,CACP,MACA,cACA,UACM;AAAA,IAEN,IAAI,OAAO,aAAa;AAAA,MAAa;AAAA,IAErC,KAAK,UAAU;AAAA,IAEf,MAAM,SAAS,kBAAkB,IAAI;AAAA,IACrC,IAAI,CAAC;AAAA,MAAQ;AAAA,IAEb,MAAM,cAAc,KAAK,SAAS;AAAA,IAClC,KAAK,UAAU,cACX,SAAS,cAAc,UAAU,IACjC,SAAS,cAAc,OAAO;AAAA,IAGlC,KAAK,aAAa,MAAM,QAAQ,YAAY;AAAA,IAG5C,MAAM,QAAQ,KAAK,MAAM,SAAS;AAAA,IAClC,KAAK,QAAQ,QAAQ;AAAA,IAGrB,KAAK,mBAAmB;AAAA,IACxB,KAAK,QAAQ,iBAAiB,SAAS,KAAK,QAAQ,KAAK,IAAI,CAAC;AAAA,IAC9D,KAAK,QAAQ,iBAAiB,QAAQ,KAAK,OAAO,KAAK,IAAI,CAAC;AAAA,IAC5D,KAAK,QAAQ,iBAAiB,WAAW,KAAK,UAAU,KAAK,IAAI,CAAkB;AAAA,IAGnF,KAAK,UAAU,YAAY,KAAK,OAAO;AAAA,IACvC,KAAK,QAAQ,MAAM;AAAA,IAEnB,KAAK,cAAc;AAAA;AAAA,EAMrB,SAAS,GAAS;AAAA,IAChB,IAAI,KAAK,SAAS;AAAA,MAChB,KAAK,QAAQ,OAAO;AAAA,MACpB,KAAK,UAAU;AAAA,IACjB;AAAA,IACA,KAAK,cAAc;AAAA,IACnB,KAAK,mBAAmB;AAAA;AAAA,EAM1B,cAAc,CAAC,MAAmB,cAA6B;AAAA,IAC7D,IAAI,CAAC,KAAK,WAAW,SAAS,KAAK;AAAA,MAAa;AAAA,IAEhD,MAAM,SAAS,kBAAkB,IAAI;AAAA,IACrC,IAAI,CAAC;AAAA,MAAQ;AAAA,IAEb,KAAK,gBAAgB,QAAQ,YAAY;AAAA;AAAA,EAMnC,YAAY,CAClB,MACA,QACA,cACM;AAAA,IACN,IAAI,CAAC,KAAK;AAAA,MAAS;AAAA,IAEnB,MAAM,QAAQ,KAAK;AAAA,IAGnB,KAAK,gBAAgB,QAAQ,YAAY;AAAA,IAGzC,MAAM,WAAW,WAAW,MAAM,QAAQ,KAAK;AAAA,IAC/C,MAAM,aAAa,MAAM,cAAc;AAAA,IACvC,MAAM,aAAa,MAAM,cAAc;AAAA,IACvC,MAAM,QAAQ,MAAM,SAAS;AAAA,IAE7B,OAAO,OAAO,KAAK,QAAQ,OAAO;AAAA,MAChC,UAAU,GAAG;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,iBAAiB,MAAM,mBAAmB;AAAA,MAC1C,SAAS,GAAG,MAAM,WAAW;AAAA,MAC7B,cAAc,GAAG,MAAM,gBAAgB;AAAA,MACvC,WAAW;AAAA,MACX,QAAQ;AAAA,IACV,CAAC;AAAA,IAGD,IAAI,MAAM,aAAa;AAAA,MACrB,KAAK,QAAQ,cAAc,MAAM;AAAA,IACnC;AAAA,IAGA,IAAI,KAAK,mBAAmB,oBAAoB,MAAM,MAAM;AAAA,MAC1D,KAAK,QAAQ,OAAO,MAAM;AAAA,IAC5B;AAAA;AAAA,EAMM,eAAe,CAAC,QAAmB,cAA6B;AAAA,IACtE,IAAI,CAAC,KAAK;AAAA,MAAS;AAAA,IAGnB,MAAM,SAAS,KAAK,UAAU,cAAc,QAAQ;AAAA,IACpD,MAAM,SAAS,aAAa,QAAQ,OAAO;AAAA,IAC3C,MAAM,SAAS,aAAa,SAAS,OAAO;AAAA,IAE5C,MAAM,OAAO,OAAO,IAAI;AAAA,IACxB,MAAM,MAAM,OAAO,IAAI;AAAA,IACvB,MAAM,QAAQ,OAAO,QAAQ;AAAA,IAC7B,MAAM,SAAS,OAAO,SAAS;AAAA,IAE/B,OAAO,OAAO,KAAK,QAAQ,OAAO;AAAA,MAChC,UAAU;AAAA,MACV,MAAM,GAAG;AAAA,MACT,KAAK,GAAG;AAAA,MACR,OAAO,GAAG;AAAA,MACV,QAAQ,GAAG;AAAA,IACb,CAAC;AAAA;AAAA,EAMK,OAAO,CAAC,GAAgB;AAAA,IAC9B,IAAI,CAAC,KAAK,WAAW,CAAC,KAAK;AAAA,MAAkB;AAAA,IAE7C,MAAM,QAAQ,KAAK,QAAQ;AAAA,IAC3B,KAAK,iBAAiB,KAAK;AAAA;AAAA,EAMrB,MAAM,GAAS;AAAA,IAErB,KAAK,UAAU;AAAA;AAAA,EAMT,SAAS,CAAC,GAAwB;AAAA,IACxC,IAAI,CAAC,KAAK;AAAA,MAAS;AAAA,IAGnB,IAAI,EAAE,QAAQ,WAAW,KAAK,mBAAmB,kBAAkB;AAAA,MACjE,EAAE,eAAe;AAAA,MACjB,KAAK,QAAQ,KAAK;AAAA,IACpB;AAAA,IAGA,IAAI,EAAE,QAAQ,UAAU;AAAA,MACtB,EAAE,eAAe;AAAA,MACjB,KAAK,QAAQ,KAAK;AAAA,IACpB;AAAA;AAAA,EAMF,OAAO,GAAY;AAAA,IACjB,OAAO,KAAK,YAAY;AAAA;AAAA,EAM1B,cAAc,GAAuB;AAAA,IACnC,OAAO,KAAK;AAAA;AAEhB;",
+  "debugId": "222277311BC256D364756E2164756E21",
+  "names": []
+}