@hypen-space/web 0.2.0

package/dist/src/dom/components/index.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/dom/components/index.ts"],
+  "sourcesContent": [
+    "/**\n * Component Registry\n *\n * Manages mappings from Hypen component types to DOM elements\n */\n\nexport interface ComponentHandler {\n  create(): HTMLElement;\n  applyProps?(element: HTMLElement, props: Record<string, any>): void;\n}\n\nexport class ComponentRegistry {\n  private handlers: Map<string, ComponentHandler> = new Map();\n\n  constructor() {\n    this.registerDefaults();\n  }\n\n  /**\n   * Register a component handler\n   */\n  register(type: string, handler: ComponentHandler): void {\n    this.handlers.set(type.toLowerCase(), handler);\n  }\n\n  /**\n   * Get handler for a component type\n   */\n  get(type: string): ComponentHandler | undefined {\n    return this.handlers.get(type.toLowerCase());\n  }\n\n  /**\n   * Create element for a component type\n   */\n  createElement(type: string, props: Record<string, any> = {}): HTMLElement | null {\n    const handler = this.get(type);\n    if (!handler) return null;\n\n    const element = handler.create();\n    if (handler.applyProps) {\n      handler.applyProps(element, props);\n    }\n    return element;\n  }\n\n  /**\n   * Register all default Hypen components\n   */\n  private registerDefaults(): void {\n    // Import and register all component handlers\n    const { columnHandler } = require(\"./column.js\");\n    const { rowHandler } = require(\"./row.js\");\n    const { textHandler } = require(\"./text.js\");\n    const { imageHandler } = require(\"./image.js\");\n    const { buttonHandler } = require(\"./button.js\");\n    const { containerHandler } = require(\"./container.js\");\n    const { centerHandler } = require(\"./center.js\");\n    const { listHandler } = require(\"./list.js\");\n    const { inputHandler } = require(\"./input.js\");\n    const { linkHandler } = require(\"./link.js\");\n    const { textareaHandler } = require(\"./textarea.js\");\n    const { checkboxHandler } = require(\"./checkbox.js\");\n    const { selectHandler } = require(\"./select.js\");\n    const { spacerHandler } = require(\"./spacer.js\");\n    const { stackHandler } = require(\"./stack.js\");\n    const { dividerHandler } = require(\"./divider.js\");\n    const { gridHandler } = require(\"./grid.js\");\n    const { cardHandler } = require(\"./card.js\");\n    const { headingHandler } = require(\"./heading.js\");\n    const { switchHandler } = require(\"./switch.js\");\n    const { sliderHandler } = require(\"./slider.js\");\n    const { spinnerHandler } = require(\"./spinner.js\");\n    const { badgeHandler } = require(\"./badge.js\");\n    const { avatarHandler } = require(\"./avatar.js\");\n    const { progressBarHandler } = require(\"./progressbar.js\");\n    const { videoHandler } = require(\"./video.js\");\n    const { audioHandler } = require(\"./audio.js\");\n    const { paragraphHandler } = require(\"./paragraph.js\");\n    const { routerHandler } = require(\"./router.js\");\n    const { routeHandler } = require(\"./route.js\");\n\n    this.register(\"column\", columnHandler);\n    this.register(\"row\", rowHandler);\n    this.register(\"text\", textHandler);\n    this.register(\"image\", imageHandler);\n    this.register(\"button\", buttonHandler);\n    this.register(\"container\", containerHandler);\n    this.register(\"box\", containerHandler);\n    this.register(\"center\", centerHandler);\n    this.register(\"list\", listHandler);\n    this.register(\"input\", inputHandler);\n    this.register(\"link\", linkHandler);\n    this.register(\"textarea\", textareaHandler);\n    this.register(\"checkbox\", checkboxHandler);\n    this.register(\"select\", selectHandler);\n    this.register(\"spacer\", spacerHandler);\n    this.register(\"stack\", stackHandler);\n    this.register(\"divider\", dividerHandler);\n    this.register(\"grid\", gridHandler);\n    this.register(\"card\", cardHandler);\n    this.register(\"heading\", headingHandler);\n    this.register(\"switch\", switchHandler);\n    this.register(\"slider\", sliderHandler);\n    this.register(\"spinner\", spinnerHandler);\n    this.register(\"badge\", badgeHandler);\n    this.register(\"avatar\", avatarHandler);\n    this.register(\"progressbar\", progressBarHandler);\n    this.register(\"video\", videoHandler);\n    this.register(\"audio\", audioHandler);\n    this.register(\"paragraph\", paragraphHandler);\n    this.register(\"router\", routerHandler);\n    this.register(\"route\", routeHandler);\n  }\n}\n"
+  ],
+  "mappings": "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",
+  "debugId": "65DAAC739196799D64756E2164756E21",
+  "names": []
+}

package/dist/src/dom/components/input.js

@@ -0,0 +1,41 @@
+import {
+  __esm,
+  __export
+} from "../../../chunk-2s02mkzs.js";
+
+// src/dom/components/input.ts
+var exports_input = {};
+__export(exports_input, {
+  inputHandler: () => inputHandler
+});
+var inputHandler;
+var init_input = __esm(() => {
+  inputHandler = {
+    create() {
+      const el = document.createElement("input");
+      el.dataset.hypenType = "input";
+      return el;
+    },
+    applyProps(el, props) {
+      const input = el;
+      if (props.type !== undefined) {
+        input.type = String(props.type);
+      }
+      if (props.placeholder !== undefined) {
+        input.placeholder = String(props.placeholder);
+      }
+      if (props.value !== undefined) {
+        input.value = String(props.value);
+      }
+    }
+  };
+});
+init_input();
+
+export {
+  inputHandler
+};
+
+export { exports_input, init_input };
+
+//# debugId=1CF520F1301367CC64756E2164756E21

package/dist/src/dom/components/input.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/dom/components/input.ts"],
+  "sourcesContent": [
+    "/**\n * Input Component\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const inputHandler: ComponentHandler = {\n  create(): HTMLElement {\n    const el = document.createElement(\"input\");\n    el.dataset.hypenType = \"input\";\n    return el as any as HTMLElement;\n  },\n\n  applyProps(el: HTMLElement, props: Record<string, any>): void {\n    const input = el as HTMLInputElement;\n\n    if (props.type !== undefined) {\n      input.type = String(props.type);\n    }\n\n    if (props.placeholder !== undefined) {\n      input.placeholder = String(props.placeholder);\n    }\n\n    if (props.value !== undefined) {\n      input.value = String(props.value);\n    }\n  },\n};\n"
+  ],
+  "mappings": ";;;;;;;;;;IAMa;AAAA;AAAA,iBAAiC;AAAA,IAC5C,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,OAAO;AAAA,MACzC,GAAG,QAAQ,YAAY;AAAA,MACvB,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,MAC5D,MAAM,QAAQ;AAAA,MAEd,IAAI,MAAM,SAAS,WAAW;AAAA,QAC5B,MAAM,OAAO,OAAO,MAAM,IAAI;AAAA,MAChC;AAAA,MAEA,IAAI,MAAM,gBAAgB,WAAW;AAAA,QACnC,MAAM,cAAc,OAAO,MAAM,WAAW;AAAA,MAC9C;AAAA,MAEA,IAAI,MAAM,UAAU,WAAW;AAAA,QAC7B,MAAM,QAAQ,OAAO,MAAM,KAAK;AAAA,MAClC;AAAA;AAAA,EAEJ;AAAA;",
+  "debugId": "1CF520F1301367CC64756E2164756E21",
+  "names": []
+}

package/dist/src/dom/components/link.js

@@ -0,0 +1,42 @@
+import {
+  __esm,
+  __export
+} from "../../../chunk-2s02mkzs.js";
+
+// src/dom/components/link.ts
+var exports_link = {};
+__export(exports_link, {
+  linkHandler: () => linkHandler
+});
+var linkHandler;
+var init_link = __esm(() => {
+  linkHandler = {
+    create() {
+      const el = document.createElement("a");
+      el.dataset.hypenType = "link";
+      return el;
+    },
+    applyProps(el, props) {
+      const anchor = el;
+      const href = props["0"] || props.href;
+      if (href !== undefined) {
+        anchor.href = String(href);
+      }
+      if (props.target !== undefined) {
+        anchor.target = String(props.target);
+      }
+      if (props.rel !== undefined) {
+        anchor.rel = String(props.rel);
+      }
+    }
+  };
+});
+init_link();
+
+export {
+  linkHandler
+};
+
+export { exports_link, init_link };
+
+//# debugId=7160BB72E49FD8B864756E2164756E21

package/dist/src/dom/components/link.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/dom/components/link.ts"],
+  "sourcesContent": [
+    "/**\n * Link Component\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const linkHandler: ComponentHandler = {\n  create(): HTMLElement {\n    const el = document.createElement(\"a\");\n    el.dataset.hypenType = \"link\";\n    return el;\n  },\n\n  applyProps(el: HTMLElement, props: Record<string, any>): void {\n    const anchor = el as HTMLAnchorElement;\n\n    // Support href or first positional argument\n    const href = props[\"0\"] || props.href;\n    if (href !== undefined) {\n      anchor.href = String(href);\n    }\n\n    // Target property\n    if (props.target !== undefined) {\n      anchor.target = String(props.target);\n    }\n\n    // Rel property\n    if (props.rel !== undefined) {\n      anchor.rel = String(props.rel);\n    }\n  },\n};\n\n\n"
+  ],
+  "mappings": ";;;;;;;;;;IAMa;AAAA;AAAA,gBAAgC;AAAA,IAC3C,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,GAAG;AAAA,MACrC,GAAG,QAAQ,YAAY;AAAA,MACvB,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,MAC5D,MAAM,SAAS;AAAA,MAGf,MAAM,OAAO,MAAM,QAAQ,MAAM;AAAA,MACjC,IAAI,SAAS,WAAW;AAAA,QACtB,OAAO,OAAO,OAAO,IAAI;AAAA,MAC3B;AAAA,MAGA,IAAI,MAAM,WAAW,WAAW;AAAA,QAC9B,OAAO,SAAS,OAAO,MAAM,MAAM;AAAA,MACrC;AAAA,MAGA,IAAI,MAAM,QAAQ,WAAW;AAAA,QAC3B,OAAO,MAAM,OAAO,MAAM,GAAG;AAAA,MAC/B;AAAA;AAAA,EAEJ;AAAA;",
+  "debugId": "7160BB72E49FD8B864756E2164756E21",
+  "names": []
+}

package/dist/src/dom/components/list.js

@@ -0,0 +1,42 @@
+import {
+  __esm,
+  __export
+} from "../../../chunk-2s02mkzs.js";
+
+// src/dom/components/list.ts
+var exports_list = {};
+__export(exports_list, {
+  listHandler: () => listHandler
+});
+var listHandler;
+var init_list = __esm(() => {
+  listHandler = {
+    create() {
+      const el = document.createElement("div");
+      el.style.display = "flex";
+      el.style.overflow = "auto";
+      el.dataset.hypenType = "list";
+      return el;
+    },
+    applyProps(el, props) {
+      const direction = props.direction || props["1"] || "vertical";
+      if (direction === "vertical") {
+        el.style.flexDirection = "column";
+      } else {
+        el.style.flexDirection = "row";
+      }
+      if (props.gap !== undefined) {
+        el.style.gap = typeof props.gap === "number" ? `${props.gap}px` : String(props.gap);
+      }
+    }
+  };
+});
+init_list();
+
+export {
+  listHandler
+};
+
+export { exports_list, init_list };
+
+//# debugId=CBBE9B5B1A1F182564756E2164756E21

package/dist/src/dom/components/list.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/dom/components/list.ts"],
+  "sourcesContent": [
+    "/**\n * List Component - Scrollable stack\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const listHandler: ComponentHandler = {\n  create(): HTMLElement {\n    const el = document.createElement(\"div\");\n    el.style.display = \"flex\";\n    el.style.overflow = \"auto\";\n    el.dataset.hypenType = \"list\";\n    return el;\n  },\n\n  applyProps(el: HTMLElement, props: Record<string, any>): void {\n    // Direction: vertical or horizontal\n    const direction = props.direction || props[\"1\"] || \"vertical\";\n    if (direction === \"vertical\") {\n      el.style.flexDirection = \"column\";\n    } else {\n      el.style.flexDirection = \"row\";\n    }\n\n    // Gap between items\n    if (props.gap !== undefined) {\n      el.style.gap = typeof props.gap === \"number\" ? `${props.gap}px` : String(props.gap);\n    }\n  },\n};\n"
+  ],
+  "mappings": ";;;;;;;;;;IAMa;AAAA;AAAA,gBAAgC;AAAA,IAC3C,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,KAAK;AAAA,MACvC,GAAG,MAAM,UAAU;AAAA,MACnB,GAAG,MAAM,WAAW;AAAA,MACpB,GAAG,QAAQ,YAAY;AAAA,MACvB,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,MAE5D,MAAM,YAAY,MAAM,aAAa,MAAM,QAAQ;AAAA,MACnD,IAAI,cAAc,YAAY;AAAA,QAC5B,GAAG,MAAM,gBAAgB;AAAA,MAC3B,EAAO;AAAA,QACL,GAAG,MAAM,gBAAgB;AAAA;AAAA,MAI3B,IAAI,MAAM,QAAQ,WAAW;AAAA,QAC3B,GAAG,MAAM,MAAM,OAAO,MAAM,QAAQ,WAAW,GAAG,MAAM,UAAU,OAAO,MAAM,GAAG;AAAA,MACpF;AAAA;AAAA,EAEJ;AAAA;",
+  "debugId": "CBBE9B5B1A1F182564756E2164756E21",
+  "names": []
+}

package/dist/src/dom/components/paragraph.js

@@ -0,0 +1,35 @@
+import {
+  __esm,
+  __export
+} from "../../../chunk-2s02mkzs.js";
+
+// src/dom/components/paragraph.ts
+var exports_paragraph = {};
+__export(exports_paragraph, {
+  paragraphHandler: () => paragraphHandler
+});
+var paragraphHandler;
+var init_paragraph = __esm(() => {
+  paragraphHandler = {
+    create() {
+      const el = document.createElement("p");
+      el.dataset.hypenType = "paragraph";
+      return el;
+    },
+    applyProps(el, props) {
+      const text = props["0"] || props.text;
+      if (text !== undefined) {
+        el.textContent = String(text);
+      }
+    }
+  };
+});
+init_paragraph();
+
+export {
+  paragraphHandler
+};
+
+export { exports_paragraph, init_paragraph };
+
+//# debugId=001EE21AF022B18C64756E2164756E21

package/dist/src/dom/components/paragraph.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/dom/components/paragraph.ts"],
+  "sourcesContent": [
+    "/**\n * Paragraph Component\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const paragraphHandler: ComponentHandler = {\n  create(): HTMLElement {\n    const el = document.createElement(\"p\");\n    el.dataset.hypenType = \"paragraph\";\n    return el;\n  },\n\n  applyProps(el: HTMLElement, props: Record<string, any>): void {\n    // Text content\n    const text = props[\"0\"] || props.text;\n    if (text !== undefined) {\n      el.textContent = String(text);\n    }\n  },\n};\n\n\n"
+  ],
+  "mappings": ";;;;;;;;;;IAMa;AAAA;AAAA,qBAAqC;AAAA,IAChD,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,GAAG;AAAA,MACrC,GAAG,QAAQ,YAAY;AAAA,MACvB,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,MAE5D,MAAM,OAAO,MAAM,QAAQ,MAAM;AAAA,MACjC,IAAI,SAAS,WAAW;AAAA,QACtB,GAAG,cAAc,OAAO,IAAI;AAAA,MAC9B;AAAA;AAAA,EAEJ;AAAA;",
+  "debugId": "001EE21AF022B18C64756E2164756E21",
+  "names": []
+}

package/dist/src/dom/components/progressbar.js

@@ -0,0 +1,57 @@
+import {
+  __esm,
+  __export
+} from "../../../chunk-2s02mkzs.js";
+
+// src/dom/components/progressbar.ts
+var exports_progressbar = {};
+__export(exports_progressbar, {
+  progressBarHandler: () => progressBarHandler
+});
+var progressBarHandler;
+var init_progressbar = __esm(() => {
+  progressBarHandler = {
+    create() {
+      const wrapper = document.createElement("div");
+      wrapper.dataset.hypenType = "progressbar";
+      wrapper.style.width = "100%";
+      wrapper.style.height = "8px";
+      wrapper.style.backgroundColor = "#e0e0e0";
+      wrapper.style.borderRadius = "4px";
+      wrapper.style.overflow = "hidden";
+      const bar = document.createElement("div");
+      bar.dataset.hypenBar = "true";
+      bar.style.height = "100%";
+      bar.style.backgroundColor = "#2196F3";
+      bar.style.transition = "width 0.3s ease";
+      bar.style.width = "0%";
+      wrapper.appendChild(bar);
+      return wrapper;
+    },
+    applyProps(el, props) {
+      const bar = el.querySelector('[data-hypen-bar="true"]');
+      if (!bar)
+        return;
+      const value = Number(props.value || 0);
+      const max = Number(props.max || 100);
+      const percentage = Math.min(100, Math.max(0, value / max * 100));
+      bar.style.width = `${percentage}%`;
+      if (props.color !== undefined) {
+        bar.style.backgroundColor = String(props.color);
+      }
+      if (props.height !== undefined) {
+        const height = typeof props.height === "number" ? `${props.height}px` : String(props.height);
+        el.style.height = height;
+      }
+    }
+  };
+});
+init_progressbar();
+
+export {
+  progressBarHandler
+};
+
+export { exports_progressbar, init_progressbar };
+
+//# debugId=BB4025F69DB9C50764756E2164756E21

package/dist/src/dom/components/progressbar.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/dom/components/progressbar.ts"],
+  "sourcesContent": [
+    "/**\n * ProgressBar Component\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const progressBarHandler: ComponentHandler = {\n  create(): HTMLElement {\n    const wrapper = document.createElement(\"div\");\n    wrapper.dataset.hypenType = \"progressbar\";\n    wrapper.style.width = \"100%\";\n    wrapper.style.height = \"8px\";\n    wrapper.style.backgroundColor = \"#e0e0e0\";\n    wrapper.style.borderRadius = \"4px\";\n    wrapper.style.overflow = \"hidden\";\n\n    const bar = document.createElement(\"div\");\n    bar.dataset.hypenBar = \"true\";\n    bar.style.height = \"100%\";\n    bar.style.backgroundColor = \"#2196F3\";\n    bar.style.transition = \"width 0.3s ease\";\n    bar.style.width = \"0%\";\n\n    wrapper.appendChild(bar);\n    return wrapper;\n  },\n\n  applyProps(el: HTMLElement, props: Record<string, any>): void {\n    const bar = el.querySelector('[data-hypen-bar=\"true\"]') as HTMLElement;\n    if (!bar) return;\n\n    // Value and max\n    const value = Number(props.value || 0);\n    const max = Number(props.max || 100);\n    const percentage = Math.min(100, Math.max(0, (value / max) * 100));\n    bar.style.width = `${percentage}%`;\n\n    // Color\n    if (props.color !== undefined) {\n      bar.style.backgroundColor = String(props.color);\n    }\n\n    // Height\n    if (props.height !== undefined) {\n      const height = typeof props.height === \"number\" ? `${props.height}px` : String(props.height);\n      el.style.height = height;\n    }\n  },\n};\n\n\n"
+  ],
+  "mappings": ";;;;;;;;;;IAMa;AAAA;AAAA,uBAAuC;AAAA,IAClD,MAAM,GAAgB;AAAA,MACpB,MAAM,UAAU,SAAS,cAAc,KAAK;AAAA,MAC5C,QAAQ,QAAQ,YAAY;AAAA,MAC5B,QAAQ,MAAM,QAAQ;AAAA,MACtB,QAAQ,MAAM,SAAS;AAAA,MACvB,QAAQ,MAAM,kBAAkB;AAAA,MAChC,QAAQ,MAAM,eAAe;AAAA,MAC7B,QAAQ,MAAM,WAAW;AAAA,MAEzB,MAAM,MAAM,SAAS,cAAc,KAAK;AAAA,MACxC,IAAI,QAAQ,WAAW;AAAA,MACvB,IAAI,MAAM,SAAS;AAAA,MACnB,IAAI,MAAM,kBAAkB;AAAA,MAC5B,IAAI,MAAM,aAAa;AAAA,MACvB,IAAI,MAAM,QAAQ;AAAA,MAElB,QAAQ,YAAY,GAAG;AAAA,MACvB,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,MAC5D,MAAM,MAAM,GAAG,cAAc,yBAAyB;AAAA,MACtD,IAAI,CAAC;AAAA,QAAK;AAAA,MAGV,MAAM,QAAQ,OAAO,MAAM,SAAS,CAAC;AAAA,MACrC,MAAM,MAAM,OAAO,MAAM,OAAO,GAAG;AAAA,MACnC,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;AAAA,MACjE,IAAI,MAAM,QAAQ,GAAG;AAAA,MAGrB,IAAI,MAAM,UAAU,WAAW;AAAA,QAC7B,IAAI,MAAM,kBAAkB,OAAO,MAAM,KAAK;AAAA,MAChD;AAAA,MAGA,IAAI,MAAM,WAAW,WAAW;AAAA,QAC9B,MAAM,SAAS,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,aAAa,OAAO,MAAM,MAAM;AAAA,QAC3F,GAAG,MAAM,SAAS;AAAA,MACpB;AAAA;AAAA,EAEJ;AAAA;",
+  "debugId": "BB4025F69DB9C50764756E2164756E21",
+  "names": []
+}

package/dist/src/dom/components/route.js

@@ -0,0 +1,44 @@
+import {
+  __esm,
+  __export
+} from "../../../chunk-2s02mkzs.js";
+
+// src/dom/components/route.ts
+var exports_route = {};
+__export(exports_route, {
+  routeHandler: () => routeHandler
+});
+var routeHandler;
+var init_route = __esm(() => {
+  routeHandler = {
+    create() {
+      const el = document.createElement("div");
+      el.style.display = "flex";
+      el.style.flexDirection = "column";
+      el.style.width = "100%";
+      el.dataset.hypenType = "route";
+      el.dataset.routeRendered = "false";
+      return el;
+    },
+    applyProps(el, props) {
+      const path = props.path || props["0"] || "/";
+      el.dataset.routePath = String(path);
+      const isLazy = props.__lazy === true;
+      el.dataset.routeLazy = String(isLazy);
+      const componentName = props.component || props.__lazy_child;
+      if (componentName) {
+        el.dataset.routeComponent = String(componentName);
+      }
+      console.log(`\uD83D\uDEE3️ Route created: path="${path}", lazy=${isLazy}, component="${el.dataset.routeComponent || "none"}"`);
+    }
+  };
+});
+init_route();
+
+export {
+  routeHandler
+};
+
+export { exports_route, init_route };
+
+//# debugId=2AB6DB7ACC705E4564756E2164756E21

package/dist/src/dom/components/route.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/dom/components/route.ts"],
+  "sourcesContent": [
+    "/**\n * Route Component - Lazy rendering container for route content\n * Stores component name as metadata, Router handles actual rendering\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const routeHandler: ComponentHandler = {\n  create(): HTMLElement {\n    const el = document.createElement(\"div\");\n    el.style.display = \"flex\";\n    el.style.flexDirection = \"column\";\n    el.style.width = \"100%\";\n    el.dataset.hypenType = \"route\";\n    el.dataset.routeRendered = \"false\"; // Track if component has been rendered\n    return el;\n  },\n\n  applyProps(el: HTMLElement, props: Record<string, any>): void {\n    // Extract route path from props\n    const path = props.path || props[\"0\"] || \"/\";\n    el.dataset.routePath = String(path);\n    \n    // Check if this is a lazy route (has __lazy flag)\n    const isLazy = props.__lazy === true;\n    el.dataset.routeLazy = String(isLazy);\n    \n    // Store component name - either from explicit prop or from lazy child\n    const componentName = props.component || props.__lazy_child;\n    if (componentName) {\n      el.dataset.routeComponent = String(componentName);\n    }\n    \n    console.log(`🛣️ Route created: path=\"${path}\", lazy=${isLazy}, component=\"${el.dataset.routeComponent || 'none'}\"`);\n  },\n};\n\n"
+  ],
+  "mappings": ";;;;;;;;;;IAOa;AAAA;AAAA,iBAAiC;AAAA,IAC5C,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,KAAK;AAAA,MACvC,GAAG,MAAM,UAAU;AAAA,MACnB,GAAG,MAAM,gBAAgB;AAAA,MACzB,GAAG,MAAM,QAAQ;AAAA,MACjB,GAAG,QAAQ,YAAY;AAAA,MACvB,GAAG,QAAQ,gBAAgB;AAAA,MAC3B,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,MAE5D,MAAM,OAAO,MAAM,QAAQ,MAAM,QAAQ;AAAA,MACzC,GAAG,QAAQ,YAAY,OAAO,IAAI;AAAA,MAGlC,MAAM,SAAS,MAAM,WAAW;AAAA,MAChC,GAAG,QAAQ,YAAY,OAAO,MAAM;AAAA,MAGpC,MAAM,gBAAgB,MAAM,aAAa,MAAM;AAAA,MAC/C,IAAI,eAAe;AAAA,QACjB,GAAG,QAAQ,iBAAiB,OAAO,aAAa;AAAA,MAClD;AAAA,MAEA,QAAQ,IAAI,sCAA2B,eAAe,sBAAsB,GAAG,QAAQ,kBAAkB,SAAS;AAAA;AAAA,EAEtH;AAAA;",
+  "debugId": "2AB6DB7ACC705E4564756E2164756E21",
+  "names": []
+}

package/dist/src/dom/components/router.js

@@ -0,0 +1,33 @@
+import {
+  __esm,
+  __export
+} from "../../../chunk-2s02mkzs.js";
+
+// src/dom/components/router.ts
+var exports_router = {};
+__export(exports_router, {
+  routerHandler: () => routerHandler
+});
+var routerHandler;
+var init_router = __esm(() => {
+  routerHandler = {
+    create() {
+      const el = document.createElement("div");
+      el.style.display = "flex";
+      el.style.flexDirection = "column";
+      el.style.width = "100%";
+      el.dataset.hypenType = "router";
+      return el;
+    },
+    applyProps(el, props) {}
+  };
+});
+init_router();
+
+export {
+  routerHandler
+};
+
+export { exports_router, init_router };
+
+//# debugId=F93DB4C558ED7A5864756E2164756E21

package/dist/src/dom/components/router.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/dom/components/router.ts"],
+  "sourcesContent": [
+    "/**\n * Router Component - Container for routes\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const routerHandler: ComponentHandler = {\n  create(): HTMLElement {\n    const el = document.createElement(\"div\");\n    el.style.display = \"flex\";\n    el.style.flexDirection = \"column\";\n    el.style.width = \"100%\";\n    el.dataset.hypenType = \"router\";\n    return el;\n  },\n\n  applyProps(el: HTMLElement, props: Record<string, any>): void {\n    // Router doesn't need special prop handling\n    // The routing logic is handled by the Router module\n  },\n};\n\n"
+  ],
+  "mappings": ";;;;;;;;;;IAMa;AAAA;AAAA,kBAAkC;AAAA,IAC7C,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,KAAK;AAAA,MACvC,GAAG,MAAM,UAAU;AAAA,MACnB,GAAG,MAAM,gBAAgB;AAAA,MACzB,GAAG,MAAM,QAAQ;AAAA,MACjB,GAAG,QAAQ,YAAY;AAAA,MACvB,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,EAIhE;AAAA;",
+  "debugId": "F93DB4C558ED7A5864756E2164756E21",
+  "names": []
+}

package/dist/src/dom/components/row.js

@@ -0,0 +1,31 @@
+import {
+  __esm,
+  __export
+} from "../../../chunk-2s02mkzs.js";
+
+// src/dom/components/row.ts
+var exports_row = {};
+__export(exports_row, {
+  rowHandler: () => rowHandler
+});
+var rowHandler;
+var init_row = __esm(() => {
+  rowHandler = {
+    create() {
+      const el = document.createElement("div");
+      el.style.display = "flex";
+      el.style.flexDirection = "row";
+      el.dataset.hypenType = "row";
+      return el;
+    }
+  };
+});
+init_row();
+
+export {
+  rowHandler
+};
+
+export { exports_row, init_row };
+
+//# debugId=8B631490F2609A1764756E2164756E21

package/dist/src/dom/components/row.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/dom/components/row.ts"],
+  "sourcesContent": [
+    "/**\n * Row Component - Horizontal Stack\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const rowHandler: ComponentHandler = {\n  create(): HTMLElement {\n    const el = document.createElement(\"div\");\n    el.style.display = \"flex\";\n    el.style.flexDirection = \"row\";\n    el.dataset.hypenType = \"row\";\n    return el;\n  },\n};\n"
+  ],
+  "mappings": ";;;;;;;;;;IAMa;AAAA;AAAA,eAA+B;AAAA,IAC1C,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,KAAK;AAAA,MACvC,GAAG,MAAM,UAAU;AAAA,MACnB,GAAG,MAAM,gBAAgB;AAAA,MACzB,GAAG,QAAQ,YAAY;AAAA,MACvB,OAAO;AAAA;AAAA,EAEX;AAAA;",
+  "debugId": "8B631490F2609A1764756E2164756E21",
+  "names": []
+}

package/dist/src/dom/components/select.js

@@ -0,0 +1,57 @@
+import {
+  __esm,
+  __export
+} from "../../../chunk-2s02mkzs.js";
+
+// src/dom/components/select.ts
+var exports_select = {};
+__export(exports_select, {
+  selectHandler: () => selectHandler
+});
+var selectHandler;
+var init_select = __esm(() => {
+  selectHandler = {
+    create() {
+      const el = document.createElement("select");
+      el.dataset.hypenType = "select";
+      return el;
+    },
+    applyProps(el, props) {
+      const select = el;
+      if (props.value !== undefined) {
+        select.value = String(props.value);
+      }
+      if (props.disabled !== undefined) {
+        select.disabled = Boolean(props.disabled);
+      }
+      if (props.multiple !== undefined) {
+        select.multiple = Boolean(props.multiple);
+      }
+      if (props.options && Array.isArray(props.options)) {
+        select.innerHTML = "";
+        props.options.forEach((opt) => {
+          const option = document.createElement("option");
+          if (typeof opt === "string") {
+            option.value = opt;
+            option.textContent = opt;
+          } else if (typeof opt === "object") {
+            option.value = String(opt.value ?? opt.label ?? "");
+            option.textContent = String(opt.label ?? opt.value ?? "");
+            if (opt.disabled)
+              option.disabled = true;
+          }
+          select.appendChild(option);
+        });
+      }
+    }
+  };
+});
+init_select();
+
+export {
+  selectHandler
+};
+
+export { exports_select, init_select };
+
+//# debugId=E33F02098F1DD13564756E2164756E21

package/dist/src/dom/components/select.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/dom/components/select.ts"],
+  "sourcesContent": [
+    "/**\n * Select Component\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const selectHandler: ComponentHandler = {\n  create(): HTMLElement {\n    const el = document.createElement(\"select\");\n    el.dataset.hypenType = \"select\";\n    return el as any as HTMLElement;\n  },\n\n  applyProps(el: HTMLElement, props: Record<string, any>): void {\n    const select = el as HTMLSelectElement;\n\n    // Value property\n    if (props.value !== undefined) {\n      select.value = String(props.value);\n    }\n\n    // Disabled\n    if (props.disabled !== undefined) {\n      select.disabled = Boolean(props.disabled);\n    }\n\n    // Multiple\n    if (props.multiple !== undefined) {\n      select.multiple = Boolean(props.multiple);\n    }\n\n    // Options array\n    if (props.options && Array.isArray(props.options)) {\n      // Clear existing options\n      select.innerHTML = \"\";\n      \n      // Add new options\n      props.options.forEach((opt: any) => {\n        const option = document.createElement(\"option\");\n        \n        if (typeof opt === \"string\") {\n          option.value = opt;\n          option.textContent = opt;\n        } else if (typeof opt === \"object\") {\n          option.value = String(opt.value ?? opt.label ?? \"\");\n          option.textContent = String(opt.label ?? opt.value ?? \"\");\n          if (opt.disabled) option.disabled = true;\n        }\n        \n        select.appendChild(option);\n      });\n    }\n  },\n};\n\n\n"
+  ],
+  "mappings": ";;;;;;;;;;IAMa;AAAA;AAAA,kBAAkC;AAAA,IAC7C,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,QAAQ;AAAA,MAC1C,GAAG,QAAQ,YAAY;AAAA,MACvB,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,MAC5D,MAAM,SAAS;AAAA,MAGf,IAAI,MAAM,UAAU,WAAW;AAAA,QAC7B,OAAO,QAAQ,OAAO,MAAM,KAAK;AAAA,MACnC;AAAA,MAGA,IAAI,MAAM,aAAa,WAAW;AAAA,QAChC,OAAO,WAAW,QAAQ,MAAM,QAAQ;AAAA,MAC1C;AAAA,MAGA,IAAI,MAAM,aAAa,WAAW;AAAA,QAChC,OAAO,WAAW,QAAQ,MAAM,QAAQ;AAAA,MAC1C;AAAA,MAGA,IAAI,MAAM,WAAW,MAAM,QAAQ,MAAM,OAAO,GAAG;AAAA,QAEjD,OAAO,YAAY;AAAA,QAGnB,MAAM,QAAQ,QAAQ,CAAC,QAAa;AAAA,UAClC,MAAM,SAAS,SAAS,cAAc,QAAQ;AAAA,UAE9C,IAAI,OAAO,QAAQ,UAAU;AAAA,YAC3B,OAAO,QAAQ;AAAA,YACf,OAAO,cAAc;AAAA,UACvB,EAAO,SAAI,OAAO,QAAQ,UAAU;AAAA,YAClC,OAAO,QAAQ,OAAO,IAAI,SAAS,IAAI,SAAS,EAAE;AAAA,YAClD,OAAO,cAAc,OAAO,IAAI,SAAS,IAAI,SAAS,EAAE;AAAA,YACxD,IAAI,IAAI;AAAA,cAAU,OAAO,WAAW;AAAA,UACtC;AAAA,UAEA,OAAO,YAAY,MAAM;AAAA,SAC1B;AAAA,MACH;AAAA;AAAA,EAEJ;AAAA;",
+  "debugId": "E33F02098F1DD13564756E2164756E21",
+  "names": []
+}

package/dist/src/dom/components/slider.js

@@ -0,0 +1,48 @@
+import {
+  __esm,
+  __export
+} from "../../../chunk-2s02mkzs.js";
+
+// src/dom/components/slider.ts
+var exports_slider = {};
+__export(exports_slider, {
+  sliderHandler: () => sliderHandler
+});
+var sliderHandler;
+var init_slider = __esm(() => {
+  sliderHandler = {
+    create() {
+      const el = document.createElement("input");
+      el.type = "range";
+      el.dataset.hypenType = "slider";
+      return el;
+    },
+    applyProps(el, props) {
+      const input = el;
+      if (props.value !== undefined) {
+        input.value = String(props.value);
+      }
+      if (props.min !== undefined) {
+        input.min = String(props.min);
+      }
+      if (props.max !== undefined) {
+        input.max = String(props.max);
+      }
+      if (props.step !== undefined) {
+        input.step = String(props.step);
+      }
+      if (props.disabled !== undefined) {
+        input.disabled = Boolean(props.disabled);
+      }
+    }
+  };
+});
+init_slider();
+
+export {
+  sliderHandler
+};
+
+export { exports_slider, init_slider };
+
+//# debugId=3FB4A09CF0E671AF64756E2164756E21

package/dist/src/dom/components/slider.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/dom/components/slider.ts"],
+  "sourcesContent": [
+    "/**\n * Slider Component (Range Input)\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const sliderHandler: ComponentHandler = {\n  create(): HTMLElement {\n    const el = document.createElement(\"input\");\n    el.type = \"range\";\n    el.dataset.hypenType = \"slider\";\n    return el as any as HTMLElement;\n  },\n\n  applyProps(el: HTMLElement, props: Record<string, any>): void {\n    const input = el as HTMLInputElement;\n\n    // Value\n    if (props.value !== undefined) {\n      input.value = String(props.value);\n    }\n\n    // Min\n    if (props.min !== undefined) {\n      input.min = String(props.min);\n    }\n\n    // Max\n    if (props.max !== undefined) {\n      input.max = String(props.max);\n    }\n\n    // Step\n    if (props.step !== undefined) {\n      input.step = String(props.step);\n    }\n\n    // Disabled\n    if (props.disabled !== undefined) {\n      input.disabled = Boolean(props.disabled);\n    }\n  },\n};\n\n\n"
+  ],
+  "mappings": ";;;;;;;;;;IAMa;AAAA;AAAA,kBAAkC;AAAA,IAC7C,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,OAAO;AAAA,MACzC,GAAG,OAAO;AAAA,MACV,GAAG,QAAQ,YAAY;AAAA,MACvB,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,MAC5D,MAAM,QAAQ;AAAA,MAGd,IAAI,MAAM,UAAU,WAAW;AAAA,QAC7B,MAAM,QAAQ,OAAO,MAAM,KAAK;AAAA,MAClC;AAAA,MAGA,IAAI,MAAM,QAAQ,WAAW;AAAA,QAC3B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,MAC9B;AAAA,MAGA,IAAI,MAAM,QAAQ,WAAW;AAAA,QAC3B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,MAC9B;AAAA,MAGA,IAAI,MAAM,SAAS,WAAW;AAAA,QAC5B,MAAM,OAAO,OAAO,MAAM,IAAI;AAAA,MAChC;AAAA,MAGA,IAAI,MAAM,aAAa,WAAW;AAAA,QAChC,MAAM,WAAW,QAAQ,MAAM,QAAQ;AAAA,MACzC;AAAA;AAAA,EAEJ;AAAA;",
+  "debugId": "3FB4A09CF0E671AF64756E2164756E21",
+  "names": []
+}

package/dist/src/dom/components/spacer.js

@@ -0,0 +1,30 @@
+import {
+  __esm,
+  __export
+} from "../../../chunk-2s02mkzs.js";
+
+// src/dom/components/spacer.ts
+var exports_spacer = {};
+__export(exports_spacer, {
+  spacerHandler: () => spacerHandler
+});
+var spacerHandler;
+var init_spacer = __esm(() => {
+  spacerHandler = {
+    create() {
+      const el = document.createElement("div");
+      el.style.flex = "1";
+      el.dataset.hypenType = "spacer";
+      return el;
+    }
+  };
+});
+init_spacer();
+
+export {
+  spacerHandler
+};
+
+export { exports_spacer, init_spacer };
+
+//# debugId=3716FA7084AF269D64756E2164756E21

package/dist/src/dom/components/spacer.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/dom/components/spacer.ts"],
+  "sourcesContent": [
+    "/**\n * Spacer Component - Flexible space in flex layouts\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const spacerHandler: ComponentHandler = {\n  create(): HTMLElement {\n    const el = document.createElement(\"div\");\n    el.style.flex = \"1\";\n    el.dataset.hypenType = \"spacer\";\n    return el;\n  },\n};\n\n\n"
+  ],
+  "mappings": ";;;;;;;;;;IAMa;AAAA;AAAA,kBAAkC;AAAA,IAC7C,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,KAAK;AAAA,MACvC,GAAG,MAAM,OAAO;AAAA,MAChB,GAAG,QAAQ,YAAY;AAAA,MACvB,OAAO;AAAA;AAAA,EAEX;AAAA;",
+  "debugId": "3716FA7084AF269D64756E2164756E21",
+  "names": []
+}