@hypen-space/web 0.2.6 → 0.2.7

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

@@ -1,126 +1,977 @@
-import {
-  exports_list,
-  init_list
-} from "./list.js";
-import {
-  exports_textarea,
-  init_textarea
-} from "./textarea.js";
-import {
-  exports_grid,
-  init_grid
-} from "./grid.js";
-import {
-  exports_link,
-  init_link
-} from "./link.js";
-import {
-  exports_container,
-  init_container
-} from "./container.js";
-import {
-  exports_avatar,
-  init_avatar
-} from "./avatar.js";
-import {
-  exports_switch,
-  init_switch
-} from "./switch.js";
-import {
-  exports_badge,
-  init_badge
-} from "./badge.js";
-import {
-  exports_route,
-  init_route
-} from "./route.js";
-import {
-  exports_center,
-  init_center
-} from "./center.js";
-import {
-  exports_divider,
-  init_divider
-} from "./divider.js";
-import {
-  exports_spacer,
-  init_spacer
-} from "./spacer.js";
-import {
-  exports_text,
-  init_text
-} from "./text.js";
-import {
-  exports_input,
-  init_input
-} from "./input.js";
-import {
-  exports_stack,
-  init_stack
-} from "./stack.js";
-import {
-  exports_progressbar,
-  init_progressbar
-} from "./progressbar.js";
-import {
-  exports_button,
-  init_button
-} from "./button.js";
-import {
-  exports_heading,
-  init_heading
-} from "./heading.js";
-import {
-  exports_slider,
-  init_slider
-} from "./slider.js";
-import {
-  exports_card,
-  init_card
-} from "./card.js";
-import {
-  exports_image,
-  init_image
-} from "./image.js";
-import {
-  exports_video,
-  init_video
-} from "./video.js";
-import {
-  exports_spinner,
-  init_spinner
-} from "./spinner.js";
-import {
-  exports_row,
-  init_row
-} from "./row.js";
-import {
-  exports_select,
-  init_select
-} from "./select.js";
-import {
-  exports_router,
-  init_router
-} from "./router.js";
-import {
-  exports_audio,
-  init_audio
-} from "./audio.js";
-import {
-  exports_paragraph,
-  init_paragraph
-} from "./paragraph.js";
-import {
-  exports_checkbox,
-  init_checkbox
-} from "./checkbox.js";
-import {
-  exports_column,
-  init_column
-} from "./column.js";
-import {
-  __toCommonJS
-} from "../../../chunk-2s02mkzs.js";
+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);
+
+// src/dom/components/column.ts
+var exports_column = {};
+__export(exports_column, {
+  columnHandler: () => columnHandler
+});
+var columnHandler;
+var init_column = __esm(() => {
+  columnHandler = {
+    create() {
+      const el = document.createElement("div");
+      el.style.display = "flex";
+      el.style.flexDirection = "column";
+      el.dataset.hypenType = "column";
+      return el;
+    }
+  };
+});
+
+// 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;
+    }
+  };
+});
+
+// src/dom/components/text.ts
+var exports_text = {};
+__export(exports_text, {
+  textHandler: () => textHandler
+});
+var textHandler;
+var init_text = __esm(() => {
+  textHandler = {
+    create() {
+      const el = document.createElement("span");
+      el.style.display = "inline-block";
+      el.dataset.hypenType = "text";
+      return el;
+    },
+    applyProps(el, props) {
+      const text = props["0"] || props.text;
+      if (text !== undefined) {
+        el.dataset.textTemplate = String(text);
+        el.textContent = String(text);
+      }
+    }
+  };
+});
+
+// src/dom/components/image.ts
+var exports_image = {};
+__export(exports_image, {
+  imageHandler: () => imageHandler
+});
+var imageHandler;
+var init_image = __esm(() => {
+  imageHandler = {
+    create() {
+      const el = document.createElement("img");
+      el.dataset.hypenType = "image";
+      return el;
+    },
+    applyProps(el, props) {
+      const img = el;
+      const src = props["0"] || props.url || props.src;
+      if (src !== undefined) {
+        img.src = String(src);
+      }
+      if (props.alt !== undefined) {
+        img.alt = String(props.alt);
+      }
+    }
+  };
+});
+
+// src/dom/components/button.ts
+var exports_button = {};
+__export(exports_button, {
+  buttonHandler: () => buttonHandler
+});
+var buttonHandler;
+var init_button = __esm(() => {
+  buttonHandler = {
+    create() {
+      const el = document.createElement("button");
+      el.dataset.hypenType = "button";
+      return el;
+    }
+  };
+});
+
+// src/dom/components/container.ts
+var exports_container = {};
+__export(exports_container, {
+  containerHandler: () => containerHandler
+});
+var containerHandler;
+var init_container = __esm(() => {
+  containerHandler = {
+    create() {
+      const el = document.createElement("div");
+      el.dataset.hypenType = "container";
+      return el;
+    }
+  };
+});
+
+// src/dom/components/center.ts
+var exports_center = {};
+__export(exports_center, {
+  centerHandler: () => centerHandler
+});
+var centerHandler;
+var init_center = __esm(() => {
+  centerHandler = {
+    create() {
+      const el = document.createElement("div");
+      el.style.display = "flex";
+      el.style.alignItems = "center";
+      el.style.justifyContent = "center";
+      el.dataset.hypenType = "center";
+      return el;
+    }
+  };
+});
+
+// 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);
+      }
+    }
+  };
+});
+
+// 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);
+      }
+    }
+  };
+});
+
+// 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);
+      }
+    }
+  };
+});
+
+// src/dom/components/textarea.ts
+var exports_textarea = {};
+__export(exports_textarea, {
+  textareaHandler: () => textareaHandler
+});
+var textareaHandler;
+var init_textarea = __esm(() => {
+  textareaHandler = {
+    create() {
+      const el = document.createElement("textarea");
+      el.dataset.hypenType = "textarea";
+      return el;
+    },
+    applyProps(el, props) {
+      const textarea = el;
+      const value = props["0"] || props.value;
+      if (value !== undefined) {
+        textarea.value = String(value);
+      }
+      if (props.placeholder !== undefined) {
+        textarea.placeholder = String(props.placeholder);
+      }
+      if (props.rows !== undefined) {
+        textarea.rows = Number(props.rows);
+      }
+      if (props.cols !== undefined) {
+        textarea.cols = Number(props.cols);
+      }
+      if (props.disabled !== undefined) {
+        textarea.disabled = Boolean(props.disabled);
+      }
+      if (props.readonly !== undefined) {
+        textarea.readOnly = Boolean(props.readonly);
+      }
+    }
+  };
+});
+
+// src/dom/components/checkbox.ts
+var exports_checkbox = {};
+__export(exports_checkbox, {
+  checkboxHandler: () => checkboxHandler
+});
+var checkboxHandler;
+var init_checkbox = __esm(() => {
+  checkboxHandler = {
+    create() {
+      const wrapper = document.createElement("label");
+      wrapper.dataset.hypenType = "checkbox";
+      wrapper.style.display = "inline-flex";
+      wrapper.style.alignItems = "center";
+      wrapper.style.gap = "8px";
+      wrapper.style.cursor = "pointer";
+      const input = document.createElement("input");
+      input.type = "checkbox";
+      input.dataset.hypenCheckbox = "true";
+      wrapper.appendChild(input);
+      return wrapper;
+    },
+    applyProps(el, props) {
+      const input = el.querySelector('input[type="checkbox"]');
+      if (!input)
+        return;
+      if (props.checked !== undefined) {
+        input.checked = Boolean(props.checked);
+      }
+      if (props.disabled !== undefined) {
+        input.disabled = Boolean(props.disabled);
+      }
+      const label = props["0"] || props.label;
+      if (label !== undefined) {
+        const textNodes = Array.from(el.childNodes).filter((node) => node.nodeType === Node.TEXT_NODE);
+        textNodes.forEach((node) => node.remove());
+        el.appendChild(document.createTextNode(String(label)));
+      }
+    }
+  };
+});
+
+// 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);
+        });
+      }
+    }
+  };
+});
+
+// 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;
+    }
+  };
+});
+
+// src/dom/components/stack.ts
+var exports_stack = {};
+__export(exports_stack, {
+  stackHandler: () => stackHandler
+});
+var stackHandler;
+var init_stack = __esm(() => {
+  stackHandler = {
+    create() {
+      const el = document.createElement("div");
+      el.style.position = "relative";
+      el.style.display = "flex";
+      el.dataset.hypenType = "stack";
+      const style = document.createElement("style");
+      style.textContent = `
+      [data-hypen-type="stack"] > * {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+      [data-hypen-type="stack"] > *:first-child {
+        position: relative;
+      }
+    `;
+      el.appendChild(style);
+      return el;
+    }
+  };
+});
+
+// src/dom/components/divider.ts
+var exports_divider = {};
+__export(exports_divider, {
+  dividerHandler: () => dividerHandler
+});
+var dividerHandler;
+var init_divider = __esm(() => {
+  dividerHandler = {
+    create() {
+      const el = document.createElement("hr");
+      el.dataset.hypenType = "divider";
+      el.style.border = "none";
+      el.style.borderTop = "1px solid #e0e0e0";
+      el.style.margin = "0";
+      return el;
+    },
+    applyProps(el, props) {
+      if (props.thickness !== undefined) {
+        const thickness = typeof props.thickness === "number" ? `${props.thickness}px` : String(props.thickness);
+        el.style.borderTopWidth = thickness;
+      }
+      if (props.orientation === "vertical") {
+        el.style.borderTop = "none";
+        el.style.borderLeft = "1px solid #e0e0e0";
+        el.style.height = "100%";
+        el.style.width = "0";
+        el.style.display = "inline-block";
+      }
+    }
+  };
+});
+
+// src/dom/components/grid.ts
+var exports_grid = {};
+__export(exports_grid, {
+  gridHandler: () => gridHandler
+});
+var gridHandler;
+var init_grid = __esm(() => {
+  gridHandler = {
+    create() {
+      const el = document.createElement("div");
+      el.style.display = "grid";
+      el.dataset.hypenType = "grid";
+      return el;
+    },
+    applyProps(el, props) {
+      if (props.columns !== undefined) {
+        const columns = typeof props.columns === "number" ? `repeat(${props.columns}, 1fr)` : String(props.columns);
+        el.style.gridTemplateColumns = columns;
+      }
+      if (props.rows !== undefined) {
+        const rows = typeof props.rows === "number" ? `repeat(${props.rows}, 1fr)` : String(props.rows);
+        el.style.gridTemplateRows = rows;
+      }
+      if (props.gap !== undefined) {
+        const gap = typeof props.gap === "number" ? `${props.gap}px` : String(props.gap);
+        el.style.gap = gap;
+      }
+    }
+  };
+});
+
+// src/dom/components/card.ts
+var exports_card = {};
+__export(exports_card, {
+  cardHandler: () => cardHandler
+});
+var cardHandler;
+var init_card = __esm(() => {
+  cardHandler = {
+    create() {
+      const el = document.createElement("div");
+      el.dataset.hypenType = "card";
+      el.style.backgroundColor = "#ffffff";
+      el.style.borderRadius = "8px";
+      el.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.1)";
+      el.style.padding = "16px";
+      return el;
+    }
+  };
+});
+
+// src/dom/components/heading.ts
+var exports_heading = {};
+__export(exports_heading, {
+  headingHandler: () => headingHandler
+});
+var headingHandler;
+var init_heading = __esm(() => {
+  headingHandler = {
+    create() {
+      const el = document.createElement("h2");
+      el.dataset.hypenType = "heading";
+      return el;
+    },
+    applyProps(el, props) {
+      if (props.level !== undefined) {
+        const level = Math.max(1, Math.min(6, Number(props.level)));
+        const newEl = document.createElement(`h${level}`);
+        newEl.dataset.hypenType = "heading";
+        newEl.innerHTML = el.innerHTML;
+        Array.from(el.attributes).forEach((attr) => {
+          newEl.setAttribute(attr.name, attr.value);
+        });
+        if (el.parentNode) {
+          el.parentNode.replaceChild(newEl, el);
+        }
+      }
+      const text = props["0"] || props.text;
+      if (text !== undefined) {
+        el.textContent = String(text);
+      }
+    }
+  };
+});
+
+// src/dom/components/switch.ts
+var exports_switch = {};
+__export(exports_switch, {
+  switchHandler: () => switchHandler
+});
+var switchHandler;
+var init_switch = __esm(() => {
+  switchHandler = {
+    create() {
+      const wrapper = document.createElement("label");
+      wrapper.dataset.hypenType = "switch";
+      wrapper.style.display = "inline-flex";
+      wrapper.style.alignItems = "center";
+      wrapper.style.gap = "8px";
+      wrapper.style.cursor = "pointer";
+      const input = document.createElement("input");
+      input.type = "checkbox";
+      input.dataset.hypenSwitch = "true";
+      input.style.appearance = "none";
+      input.style.width = "44px";
+      input.style.height = "24px";
+      input.style.backgroundColor = "#ccc";
+      input.style.borderRadius = "12px";
+      input.style.position = "relative";
+      input.style.cursor = "pointer";
+      input.style.transition = "background-color 0.2s";
+      const style = document.createElement("style");
+      style.textContent = `
+      input[data-hypen-switch="true"]::before {
+        content: "";
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        background-color: white;
+        border-radius: 50%;
+        top: 2px;
+        left: 2px;
+        transition: transform 0.2s;
+      }
+      input[data-hypen-switch="true"]:checked {
+        background-color: #4CAF50;
+      }
+      input[data-hypen-switch="true"]:checked::before {
+        transform: translateX(20px);
+      }
+    `;
+      wrapper.appendChild(style);
+      wrapper.appendChild(input);
+      return wrapper;
+    },
+    applyProps(el, props) {
+      const input = el.querySelector('input[type="checkbox"]');
+      if (!input)
+        return;
+      if (props.on !== undefined) {
+        input.checked = Boolean(props.on);
+      }
+      if (props.disabled !== undefined) {
+        input.disabled = Boolean(props.disabled);
+      }
+      const label = props["0"] || props.label;
+      if (label !== undefined) {
+        const textNodes = Array.from(el.childNodes).filter((node) => node.nodeType === Node.TEXT_NODE);
+        textNodes.forEach((node) => node.remove());
+        el.appendChild(document.createTextNode(String(label)));
+      }
+    }
+  };
+});
+
+// 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);
+      }
+    }
+  };
+});
+
+// src/dom/components/spinner.ts
+var exports_spinner = {};
+__export(exports_spinner, {
+  spinnerHandler: () => spinnerHandler
+});
+var spinnerHandler;
+var init_spinner = __esm(() => {
+  spinnerHandler = {
+    create() {
+      const wrapper = document.createElement("div");
+      wrapper.dataset.hypenType = "spinner";
+      wrapper.style.display = "inline-block";
+      const spinner = document.createElement("div");
+      spinner.style.width = "40px";
+      spinner.style.height = "40px";
+      spinner.style.border = "4px solid #f3f3f3";
+      spinner.style.borderTop = "4px solid #3498db";
+      spinner.style.borderRadius = "50%";
+      spinner.style.animation = "spin 1s linear infinite";
+      const style = document.createElement("style");
+      style.textContent = `
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    `;
+      wrapper.appendChild(style);
+      wrapper.appendChild(spinner);
+      return wrapper;
+    },
+    applyProps(el, props) {
+      const spinner = el.querySelector("div:not(style)");
+      if (!spinner)
+        return;
+      if (props.size !== undefined) {
+        const size = String(props.size);
+        const sizeMap = {
+          small: "24px",
+          medium: "40px",
+          large: "60px"
+        };
+        const actualSize = sizeMap[size] || size;
+        spinner.style.width = actualSize;
+        spinner.style.height = actualSize;
+      }
+      if (props.color !== undefined) {
+        spinner.style.borderTopColor = String(props.color);
+      }
+    }
+  };
+});
+
+// src/dom/components/badge.ts
+var exports_badge = {};
+__export(exports_badge, {
+  badgeHandler: () => badgeHandler
+});
+var badgeHandler;
+var init_badge = __esm(() => {
+  badgeHandler = {
+    create() {
+      const el = document.createElement("span");
+      el.dataset.hypenType = "badge";
+      el.style.display = "inline-block";
+      el.style.padding = "4px 8px";
+      el.style.borderRadius = "4px";
+      el.style.fontSize = "12px";
+      el.style.fontWeight = "600";
+      el.style.backgroundColor = "#e0e0e0";
+      el.style.color = "#333";
+      return el;
+    },
+    applyProps(el, props) {
+      if (props.theme !== undefined) {
+        const theme = String(props.theme);
+        const themeColors = {
+          success: { bg: "#4CAF50", color: "#fff" },
+          error: { bg: "#f44336", color: "#fff" },
+          warning: { bg: "#ff9800", color: "#fff" },
+          info: { bg: "#2196F3", color: "#fff" },
+          default: { bg: "#e0e0e0", color: "#333" }
+        };
+        const colors = themeColors[theme] || themeColors.default;
+        el.style.backgroundColor = colors.bg;
+        el.style.color = colors.color;
+      }
+      const text = props["0"] || props.text;
+      if (text !== undefined) {
+        el.textContent = String(text);
+      }
+    }
+  };
+});
+
+// src/dom/components/avatar.ts
+var exports_avatar = {};
+__export(exports_avatar, {
+  avatarHandler: () => avatarHandler
+});
+var avatarHandler;
+var init_avatar = __esm(() => {
+  avatarHandler = {
+    create() {
+      const el = document.createElement("div");
+      el.dataset.hypenType = "avatar";
+      el.style.display = "inline-flex";
+      el.style.alignItems = "center";
+      el.style.justifyContent = "center";
+      el.style.width = "40px";
+      el.style.height = "40px";
+      el.style.borderRadius = "50%";
+      el.style.backgroundColor = "#9e9e9e";
+      el.style.color = "#fff";
+      el.style.fontSize = "16px";
+      el.style.fontWeight = "600";
+      el.style.overflow = "hidden";
+      return el;
+    },
+    applyProps(el, props) {
+      if (props.src !== undefined) {
+        const img = document.createElement("img");
+        img.src = String(props.src);
+        img.style.width = "100%";
+        img.style.height = "100%";
+        img.style.objectFit = "cover";
+        el.innerHTML = "";
+        el.appendChild(img);
+      } else if (props.initials !== undefined) {
+        el.textContent = String(props.initials).toUpperCase();
+      }
+      if (props.size !== undefined) {
+        const size = typeof props.size === "number" ? `${props.size}px` : String(props.size);
+        el.style.width = size;
+        el.style.height = size;
+      }
+    }
+  };
+});
+
+// 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;
+      }
+    }
+  };
+});
+
+// src/dom/components/video.ts
+var exports_video = {};
+__export(exports_video, {
+  videoHandler: () => videoHandler
+});
+var videoHandler;
+var init_video = __esm(() => {
+  videoHandler = {
+    create() {
+      const el = document.createElement("video");
+      el.dataset.hypenType = "video";
+      return el;
+    },
+    applyProps(el, props) {
+      const video = el;
+      const src = props["0"] || props.src;
+      if (src !== undefined) {
+        video.src = String(src);
+      }
+      if (props.controls !== undefined) {
+        video.controls = Boolean(props.controls);
+      }
+      if (props.autoplay !== undefined) {
+        video.autoplay = Boolean(props.autoplay);
+      }
+      if (props.loop !== undefined) {
+        video.loop = Boolean(props.loop);
+      }
+      if (props.muted !== undefined) {
+        video.muted = Boolean(props.muted);
+      }
+      if (props.poster !== undefined) {
+        video.poster = String(props.poster);
+      }
+    }
+  };
+});
+
+// src/dom/components/audio.ts
+var exports_audio = {};
+__export(exports_audio, {
+  audioHandler: () => audioHandler
+});
+var audioHandler;
+var init_audio = __esm(() => {
+  audioHandler = {
+    create() {
+      const el = document.createElement("audio");
+      el.dataset.hypenType = "audio";
+      return el;
+    },
+    applyProps(el, props) {
+      const audio = el;
+      const src = props["0"] || props.src;
+      if (src !== undefined) {
+        audio.src = String(src);
+      }
+      if (props.controls !== undefined) {
+        audio.controls = Boolean(props.controls);
+      }
+      if (props.autoplay !== undefined) {
+        audio.autoplay = Boolean(props.autoplay);
+      }
+      if (props.loop !== undefined) {
+        audio.loop = Boolean(props.loop);
+      }
+      if (props.muted !== undefined) {
+        audio.muted = Boolean(props.muted);
+      }
+    }
+  };
+});
+
+// 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);
+      }
+    }
+  };
+});
+
+// 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) {}
+  };
+});
+
+// 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"}"`);
+    }
+  };
+});
 
 // src/dom/components/index.ts
 class ComponentRegistry {
@@ -145,73 +996,71 @@ class ComponentRegistry {
     return element;
   }
   registerDefaults() {
-    const { columnHandler } = (init_column(), __toCommonJS(exports_column));
-    const { rowHandler } = (init_row(), __toCommonJS(exports_row));
-    const { textHandler } = (init_text(), __toCommonJS(exports_text));
-    const { imageHandler } = (init_image(), __toCommonJS(exports_image));
-    const { buttonHandler } = (init_button(), __toCommonJS(exports_button));
-    const { containerHandler } = (init_container(), __toCommonJS(exports_container));
-    const { centerHandler } = (init_center(), __toCommonJS(exports_center));
-    const { listHandler } = (init_list(), __toCommonJS(exports_list));
-    const { inputHandler } = (init_input(), __toCommonJS(exports_input));
-    const { linkHandler } = (init_link(), __toCommonJS(exports_link));
-    const { textareaHandler } = (init_textarea(), __toCommonJS(exports_textarea));
-    const { checkboxHandler } = (init_checkbox(), __toCommonJS(exports_checkbox));
-    const { selectHandler } = (init_select(), __toCommonJS(exports_select));
-    const { spacerHandler } = (init_spacer(), __toCommonJS(exports_spacer));
-    const { stackHandler } = (init_stack(), __toCommonJS(exports_stack));
-    const { dividerHandler } = (init_divider(), __toCommonJS(exports_divider));
-    const { gridHandler } = (init_grid(), __toCommonJS(exports_grid));
-    const { cardHandler } = (init_card(), __toCommonJS(exports_card));
-    const { headingHandler } = (init_heading(), __toCommonJS(exports_heading));
-    const { switchHandler } = (init_switch(), __toCommonJS(exports_switch));
-    const { sliderHandler } = (init_slider(), __toCommonJS(exports_slider));
-    const { spinnerHandler } = (init_spinner(), __toCommonJS(exports_spinner));
-    const { badgeHandler } = (init_badge(), __toCommonJS(exports_badge));
-    const { avatarHandler } = (init_avatar(), __toCommonJS(exports_avatar));
-    const { progressBarHandler } = (init_progressbar(), __toCommonJS(exports_progressbar));
-    const { videoHandler } = (init_video(), __toCommonJS(exports_video));
-    const { audioHandler } = (init_audio(), __toCommonJS(exports_audio));
-    const { paragraphHandler } = (init_paragraph(), __toCommonJS(exports_paragraph));
-    const { routerHandler } = (init_router(), __toCommonJS(exports_router));
-    const { routeHandler } = (init_route(), __toCommonJS(exports_route));
-    this.register("column", columnHandler);
-    this.register("row", rowHandler);
-    this.register("text", textHandler);
-    this.register("image", imageHandler);
-    this.register("button", buttonHandler);
-    this.register("container", containerHandler);
-    this.register("box", containerHandler);
-    this.register("center", centerHandler);
-    this.register("list", listHandler);
-    this.register("input", inputHandler);
-    this.register("link", linkHandler);
-    this.register("textarea", textareaHandler);
-    this.register("checkbox", checkboxHandler);
-    this.register("select", selectHandler);
-    this.register("spacer", spacerHandler);
-    this.register("stack", stackHandler);
-    this.register("divider", dividerHandler);
-    this.register("grid", gridHandler);
-    this.register("card", cardHandler);
-    this.register("heading", headingHandler);
-    this.register("switch", switchHandler);
-    this.register("slider", sliderHandler);
-    this.register("spinner", spinnerHandler);
-    this.register("badge", badgeHandler);
-    this.register("avatar", avatarHandler);
-    this.register("progressbar", progressBarHandler);
-    this.register("video", videoHandler);
-    this.register("audio", audioHandler);
-    this.register("paragraph", paragraphHandler);
-    this.register("router", routerHandler);
-    this.register("route", routeHandler);
+    const { columnHandler: columnHandler2 } = (init_column(), __toCommonJS(exports_column));
+    const { rowHandler: rowHandler2 } = (init_row(), __toCommonJS(exports_row));
+    const { textHandler: textHandler2 } = (init_text(), __toCommonJS(exports_text));
+    const { imageHandler: imageHandler2 } = (init_image(), __toCommonJS(exports_image));
+    const { buttonHandler: buttonHandler2 } = (init_button(), __toCommonJS(exports_button));
+    const { containerHandler: containerHandler2 } = (init_container(), __toCommonJS(exports_container));
+    const { centerHandler: centerHandler2 } = (init_center(), __toCommonJS(exports_center));
+    const { listHandler: listHandler2 } = (init_list(), __toCommonJS(exports_list));
+    const { inputHandler: inputHandler2 } = (init_input(), __toCommonJS(exports_input));
+    const { linkHandler: linkHandler2 } = (init_link(), __toCommonJS(exports_link));
+    const { textareaHandler: textareaHandler2 } = (init_textarea(), __toCommonJS(exports_textarea));
+    const { checkboxHandler: checkboxHandler2 } = (init_checkbox(), __toCommonJS(exports_checkbox));
+    const { selectHandler: selectHandler2 } = (init_select(), __toCommonJS(exports_select));
+    const { spacerHandler: spacerHandler2 } = (init_spacer(), __toCommonJS(exports_spacer));
+    const { stackHandler: stackHandler2 } = (init_stack(), __toCommonJS(exports_stack));
+    const { dividerHandler: dividerHandler2 } = (init_divider(), __toCommonJS(exports_divider));
+    const { gridHandler: gridHandler2 } = (init_grid(), __toCommonJS(exports_grid));
+    const { cardHandler: cardHandler2 } = (init_card(), __toCommonJS(exports_card));
+    const { headingHandler: headingHandler2 } = (init_heading(), __toCommonJS(exports_heading));
+    const { switchHandler: switchHandler2 } = (init_switch(), __toCommonJS(exports_switch));
+    const { sliderHandler: sliderHandler2 } = (init_slider(), __toCommonJS(exports_slider));
+    const { spinnerHandler: spinnerHandler2 } = (init_spinner(), __toCommonJS(exports_spinner));
+    const { badgeHandler: badgeHandler2 } = (init_badge(), __toCommonJS(exports_badge));
+    const { avatarHandler: avatarHandler2 } = (init_avatar(), __toCommonJS(exports_avatar));
+    const { progressBarHandler: progressBarHandler2 } = (init_progressbar(), __toCommonJS(exports_progressbar));
+    const { videoHandler: videoHandler2 } = (init_video(), __toCommonJS(exports_video));
+    const { audioHandler: audioHandler2 } = (init_audio(), __toCommonJS(exports_audio));
+    const { paragraphHandler: paragraphHandler2 } = (init_paragraph(), __toCommonJS(exports_paragraph));
+    const { routerHandler: routerHandler2 } = (init_router(), __toCommonJS(exports_router));
+    const { routeHandler: routeHandler2 } = (init_route(), __toCommonJS(exports_route));
+    this.register("column", columnHandler2);
+    this.register("row", rowHandler2);
+    this.register("text", textHandler2);
+    this.register("image", imageHandler2);
+    this.register("button", buttonHandler2);
+    this.register("container", containerHandler2);
+    this.register("box", containerHandler2);
+    this.register("center", centerHandler2);
+    this.register("list", listHandler2);
+    this.register("input", inputHandler2);
+    this.register("link", linkHandler2);
+    this.register("textarea", textareaHandler2);
+    this.register("checkbox", checkboxHandler2);
+    this.register("select", selectHandler2);
+    this.register("spacer", spacerHandler2);
+    this.register("stack", stackHandler2);
+    this.register("divider", dividerHandler2);
+    this.register("grid", gridHandler2);
+    this.register("card", cardHandler2);
+    this.register("heading", headingHandler2);
+    this.register("switch", switchHandler2);
+    this.register("slider", sliderHandler2);
+    this.register("spinner", spinnerHandler2);
+    this.register("badge", badgeHandler2);
+    this.register("avatar", avatarHandler2);
+    this.register("progressbar", progressBarHandler2);
+    this.register("video", videoHandler2);
+    this.register("audio", audioHandler2);
+    this.register("paragraph", paragraphHandler2);
+    this.register("router", routerHandler2);
+    this.register("route", routeHandler2);
   }
 }
 export {
   ComponentRegistry
 };
 
-export { ComponentRegistry };
-
-//# debugId=D69B3D47E1A589AD64756E2164756E21
+//# debugId=A06A68E51E99B3DB64756E2164756E21