@hypen-space/web 0.4.36 → 0.4.38

package/dist/dom/components/index.js

@@ -1,1430 +1,112 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toCommonJS = (from) => {
-  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
-  if (entry)
-    return entry;
-  entry = __defProp({}, "__esModule", { value: true });
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (var key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(entry, key))
-        __defProp(entry, key, {
-          get: __accessProp.bind(from, key),
-          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-        });
-  }
-  __moduleCache.set(from, entry);
-  return entry;
-};
-var __moduleCache;
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: __exportSetter.bind(all, name)
-    });
-};
-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.style.alignItems = "flex-start";
-      el.dataset.hypenType = "column";
-      return el;
-    }
-  };
-});
-
-// src/dom/components/row.ts
-var exports_row = {};
-__export(exports_row, {
-  rowHandler: () => rowHandler
-});
-function ensureRowStyles() {
-  if (rowStylesInjected)
-    return;
-  rowStylesInjected = true;
-  const style = document.createElement("style");
-  style.id = "hypen-row-styles";
-  style.textContent = `
-    /* Row expands to fill width when it has children with flex/weight */
-    /* This matches iOS/Android behavior where weighted children cause parent to expand */
-    [data-hypen-type="row"]:has(> [data-hypen-flex]) {
-      width: 100%;
-    }
-  `;
-  document.head.appendChild(style);
-}
-var rowStylesInjected = false, rowHandler;
-var init_row = __esm(() => {
-  rowHandler = {
-    create() {
-      ensureRowStyles();
-      const el = document.createElement("div");
-      el.style.display = "flex";
-      el.style.flexDirection = "row";
-      el.style.alignItems = "flex-start";
-      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.style.lineHeight = "1";
-      el.style.verticalAlign = "top";
-      el.style.margin = "0";
-      el.style.padding = "0";
-      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.style.border = "none";
-      el.style.background = "none";
-      el.style.padding = "0";
-      el.style.margin = "0";
-      el.style.font = "inherit";
-      el.style.color = "inherit";
-      el.style.cursor = "pointer";
-      el.style.display = "flex";
-      el.style.flexDirection = "column";
-      el.style.alignItems = "flex-start";
-      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.style.width = "100%";
-      el.style.height = "100%";
-      el.style.alignSelf = "stretch";
-      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.flexDirection = "column";
-      el.style.alignItems = "flex-start";
-      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.value ?? props["0"];
-      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
-});
-function ensureStackStyles() {
-  if (stackStylesInjected)
-    return;
-  stackStylesInjected = true;
-  const style = document.createElement("style");
-  style.id = "hypen-stack-styles";
-  style.textContent = `
-    [data-hypen-type="stack"] {
-      position: relative;
-      display: grid;
-      grid-template-areas: "stack";
-      /* Default alignment: top-left (matching iOS/Android ZStack default) */
-      justify-items: start;
-      align-items: start;
-      /* Ensure Stack participates properly in flex layouts (Row/Column) */
-      min-width: 0;
-      min-height: 0;
-    }
-    [data-hypen-type="stack"] > * {
-      grid-area: stack;
-      /* Don't set justify-self/align-self here - let parent's justify-items/align-items control */
-    }
-  `;
-  document.head.appendChild(style);
-}
-var stackStylesInjected = false, stackHandler;
-var init_stack = __esm(() => {
-  stackHandler = {
-    create() {
-      ensureStackStyles();
-      const el = document.createElement("div");
-      el.dataset.hypenType = "stack";
-      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
-});
-function ensureGridStyles() {
-  if (gridStylesInjected)
-    return;
-  gridStylesInjected = true;
-  const style = document.createElement("style");
-  style.id = "hypen-grid-styles";
-  style.textContent = `
-    /* Grid children stretch to fill cells by default (matches Android behavior) */
-    [data-hypen-type="grid"] > * {
-      justify-self: stretch;
-      align-self: stretch;
-    }
-  `;
-  document.head.appendChild(style);
-}
-var gridStylesInjected = false, gridHandler;
-var init_grid = __esm(() => {
-  gridHandler = {
-    create() {
-      ensureGridStyles();
-      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) {
-      const src = props["src.0"] || props["0"] || props.src || props.source;
-      if (src !== undefined) {
-        const img = document.createElement("img");
-        img.src = String(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
-});
-import { frameworkLoggers } from "@hypen-space/core/logger";
-var log, routeHandler;
-var init_route = __esm(() => {
-  log = frameworkLoggers.router;
-  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);
-      }
-      log.debug(`Route created: path="${path}", lazy=${isLazy}, component="${el.dataset.routeComponent || "none"}"`);
-    }
-  };
-});
-
-// src/dom/components/hypenapp.ts
-var exports_hypenapp = {};
-__export(exports_hypenapp, {
-  hypenAppHandler: () => hypenAppHandler,
-  disconnectHypenApp: () => disconnectHypenApp
-});
-import { RemoteEngine } from "@hypen-space/core/remote/client";
-import { frameworkLoggers as frameworkLoggers2 } from "@hypen-space/core/logger";
-function applyPatches(container, nodes, patches, engine, onRoot) {
-  for (const patch of patches) {
-    switch (patch.type) {
-      case "create": {
-        const el = createElement(patch.elementType, patch.props || {});
-        el.dataset.hypenId = patch.id;
-        el.__hypenEngine = engine;
-        nodes.set(patch.id, el);
-        break;
-      }
-      case "setProp": {
-        const el = nodes.get(patch.id);
-        if (el) {
-          applyProp(el, patch.name, patch.value);
+/**
+ * Component Registry
+ *
+ * Manages mappings from Hypen component types to DOM elements
+ */
+export class ComponentRegistry {
+    handlers = new Map();
+    constructor() {
+        this.registerDefaults();
+    }
+    /**
+     * Register a component handler
+     */
+    register(type, handler) {
+        this.handlers.set(type.toLowerCase(), handler);
+    }
+    /**
+     * Get handler for a component type
+     */
+    get(type) {
+        if (!type)
+            return undefined;
+        return this.handlers.get(type.toLowerCase());
+    }
+    /**
+     * Create element for a component type
+     */
+    createElement(type, props = {}) {
+        if (!type)
+            return null;
+        const handler = this.get(type);
+        if (!handler)
+            return null;
+        const element = handler.create();
+        if (handler.applyProps) {
+            handler.applyProps(element, props);
         }
-        break;
-      }
-      case "setText": {
-        const el = nodes.get(patch.id);
-        if (el) {
-          el.textContent = patch.text;
-        }
-        break;
-      }
-      case "insert": {
-        const parentId = patch.parentId;
-        const parent = parentId === "root" ? container : nodes.get(parentId);
-        const child = nodes.get(patch.id);
-        const beforeId = patch.beforeId;
-        if (parent && child) {
-          if (parentId === "root") {
-            onRoot(patch.id);
-          }
-          if (beforeId) {
-            const before = nodes.get(beforeId);
-            if (before && before.parentNode === parent) {
-              parent.insertBefore(child, before);
-            } else if (!parent.contains(child)) {
-              parent.appendChild(child);
-            }
-          } else if (!parent.contains(child)) {
-            parent.appendChild(child);
-          }
-        }
-        break;
-      }
-      case "move": {
-        const parentId = patch.parentId;
-        const parent = parentId === "root" ? container : nodes.get(parentId);
-        const child = nodes.get(patch.id);
-        const beforeId = patch.beforeId;
-        if (parent && child) {
-          if (beforeId) {
-            const before = nodes.get(beforeId);
-            if (before && before.parentNode === parent) {
-              parent.insertBefore(child, before);
-            }
-          } else {
-            parent.appendChild(child);
-          }
-        }
-        break;
-      }
-      case "remove": {
-        const el = nodes.get(patch.id);
-        if (el && el.parentNode) {
-          el.parentNode.removeChild(el);
-        }
-        nodes.delete(patch.id);
-        break;
-      }
-    }
-  }
-}
-function createElement(type, props) {
-  const normalizedType = type.toLowerCase();
-  const tagMap = {
-    column: "div",
-    row: "div",
-    text: "span",
-    button: "button",
-    input: "input",
-    image: "img",
-    container: "div",
-    box: "div",
-    center: "div",
-    list: "div",
-    spacer: "div",
-    stack: "div",
-    divider: "hr",
-    grid: "div",
-    card: "div",
-    heading: "h2",
-    link: "a",
-    textarea: "textarea",
-    checkbox: "input",
-    select: "select",
-    slider: "input",
-    switch: "input",
-    spinner: "div",
-    badge: "span",
-    avatar: "img",
-    progressbar: "div",
-    video: "video",
-    audio: "audio"
-  };
-  const tag = tagMap[normalizedType] || "div";
-  const el = document.createElement(tag);
-  el.dataset.hypenType = normalizedType;
-  if (normalizedType === "column") {
-    el.style.display = "flex";
-    el.style.flexDirection = "column";
-  } else if (normalizedType === "row") {
-    el.style.display = "flex";
-    el.style.flexDirection = "row";
-  } else if (normalizedType === "center") {
-    el.style.display = "flex";
-    el.style.alignItems = "center";
-    el.style.justifyContent = "center";
-  } else if (normalizedType === "text") {
-    if (props["0"]) {
-      el.textContent = String(props["0"]);
-    }
-  } else if (normalizedType === "button") {
-    el.style.cursor = "pointer";
-  } else if (normalizedType === "checkbox" || normalizedType === "switch") {
-    el.type = "checkbox";
-  } else if (normalizedType === "slider") {
-    el.type = "range";
-  }
-  return el;
-}
-function applyProp(el, name, value) {
-  if (name === "0" || name === "text") {
-    el.textContent = String(value);
-    return;
-  }
-  const styleProps = {
-    padding: "padding",
-    margin: "margin",
-    backgroundColor: "backgroundColor",
-    background: "background",
-    color: "color",
-    fontSize: "fontSize",
-    fontWeight: "fontWeight",
-    width: "width",
-    height: "height",
-    minWidth: "minWidth",
-    minHeight: "minHeight",
-    maxWidth: "maxWidth",
-    maxHeight: "maxHeight",
-    borderRadius: "borderRadius",
-    border: "border",
-    gap: "gap",
-    flex: "flex",
-    opacity: "opacity",
-    overflow: "overflow"
-  };
-  if (styleProps[name]) {
-    const cssValue = typeof value === "number" ? `${value}px` : String(value);
-    el.style[styleProps[name]] = cssValue;
-    return;
-  }
-  if (name === "onClick" || name === "onclick") {
-    el.onclick = () => {
-      const engine = el.__hypenEngine;
-      if (engine && typeof value === "string" && value.startsWith("@actions.")) {
-        const action = value.replace("@actions.", "");
-        engine.dispatchAction(action);
-      }
-    };
-    return;
-  }
-  el.setAttribute(name, String(value));
-}
-function disconnectHypenApp(element) {
-  const instance = activeInstances.get(element);
-  if (instance) {
-    instance.engine.disconnect();
-    activeInstances.delete(element);
-  }
-}
-var log2, activeInstances, hypenAppHandler;
-var init_hypenapp = __esm(() => {
-  log2 = frameworkLoggers2.remote;
-  activeInstances = new WeakMap;
-  hypenAppHandler = {
-    create() {
-      const el = document.createElement("div");
-      el.dataset.hypenType = "hypenapp";
-      el.style.display = "contents";
-      return el;
-    },
-    applyProps(element, props) {
-      const url = props["0"] || props.url;
-      if (!url || typeof url !== "string") {
-        log2.error("HypenApp: URL is required");
-        element.innerHTML = '<div style="color: red;">HypenApp: URL required</div>';
-        return;
-      }
-      const existing = activeInstances.get(element);
-      if (existing) {
-        return;
-      }
-      const engine = new RemoteEngine(url, {
-        autoReconnect: props.autoReconnect ?? true,
-        reconnectInterval: props.reconnectInterval ?? 3000,
-        maxReconnectAttempts: props.maxReconnectAttempts ?? 10
-      });
-      const nodes = new Map;
-      let rootId = null;
-      activeInstances.set(element, { engine, nodes });
-      engine.onPatches((patches) => {
-        applyPatches(element, nodes, patches, engine, (id) => {
-          if (!rootId)
-            rootId = id;
-        });
-      });
-      element.innerHTML = '<div class="hypen-app-loading">Connecting...</div>';
-      engine.connect().then(() => {
-        element.innerHTML = "";
-        log2.debug(`HypenApp connected to ${url}`);
-      }).catch((error) => {
-        element.innerHTML = `<div style="color: red;">HypenApp: Connection failed - ${error.message}</div>`;
-        log2.error("HypenApp connection failed:", error);
-      });
-      engine.onDisconnect(() => {
-        log2.debug("HypenApp disconnected");
-      });
-      engine.onError((error) => {
-        log2.error("HypenApp error:", error);
-      });
-      const observer = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-          for (const removedNode of mutation.removedNodes) {
-            if (removedNode === element || removedNode.contains?.(element)) {
-              engine.disconnect();
-              activeInstances.delete(element);
-              observer.disconnect();
-              log2.debug("HypenApp cleaned up");
-              return;
-            }
-          }
-        }
-      });
-      if (element.parentNode) {
-        observer.observe(element.parentNode, { childList: true, subtree: true });
-      }
-    }
-  };
-});
-
-// src/dom/components/app.ts
-var exports_app = {};
-__export(exports_app, {
-  appHandler: () => appHandler
-});
-var appHandler;
-var init_app = __esm(() => {
-  appHandler = {
-    create() {
-      const el = document.createElement("div");
-      el.style.display = "flex";
-      el.style.flexDirection = "column";
-      el.style.minHeight = "100vh";
-      el.style.width = "100%";
-      el.dataset.hypenType = "app";
-      return el;
-    }
-  };
-});
-
-// src/dom/components/index.ts
-class ComponentRegistry {
-  handlers = new Map;
-  constructor() {
-    this.registerDefaults();
-  }
-  register(type, handler) {
-    this.handlers.set(type.toLowerCase(), handler);
-  }
-  get(type) {
-    if (!type)
-      return;
-    return this.handlers.get(type.toLowerCase());
-  }
-  createElement(type, props = {}) {
-    if (!type)
-      return null;
-    const handler = this.get(type);
-    if (!handler)
-      return null;
-    const element = handler.create();
-    if (handler.applyProps) {
-      handler.applyProps(element, props);
+        return element;
+    }
+    /**
+     * Register all default Hypen components
+     */
+    registerDefaults() {
+        // Import and register all component handlers
+        const { columnHandler } = require("./column.js");
+        const { rowHandler } = require("./row.js");
+        const { textHandler } = require("./text.js");
+        const { imageHandler } = require("./image.js");
+        const { buttonHandler } = require("./button.js");
+        const { containerHandler } = require("./container.js");
+        const { centerHandler } = require("./center.js");
+        const { listHandler } = require("./list.js");
+        const { inputHandler } = require("./input.js");
+        const { linkHandler } = require("./link.js");
+        const { textareaHandler } = require("./textarea.js");
+        const { checkboxHandler } = require("./checkbox.js");
+        const { selectHandler } = require("./select.js");
+        const { spacerHandler } = require("./spacer.js");
+        const { stackHandler } = require("./stack.js");
+        const { dividerHandler } = require("./divider.js");
+        const { gridHandler } = require("./grid.js");
+        const { cardHandler } = require("./card.js");
+        const { headingHandler } = require("./heading.js");
+        const { switchHandler } = require("./switch.js");
+        const { sliderHandler } = require("./slider.js");
+        const { spinnerHandler } = require("./spinner.js");
+        const { badgeHandler } = require("./badge.js");
+        const { avatarHandler } = require("./avatar.js");
+        const { progressBarHandler } = require("./progressbar.js");
+        const { videoHandler } = require("./video.js");
+        const { audioHandler } = require("./audio.js");
+        const { paragraphHandler } = require("./paragraph.js");
+        const { routerHandler } = require("./router.js");
+        const { routeHandler } = require("./route.js");
+        const { hypenAppHandler } = require("./hypenapp.js");
+        const { appHandler } = require("./app.js");
+        this.register("app", appHandler);
+        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);
+        this.register("hypenapp", hypenAppHandler);
     }
-    return element;
-  }
-  registerDefaults() {
-    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));
-    const { hypenAppHandler: hypenAppHandler2 } = (init_hypenapp(), __toCommonJS(exports_hypenapp));
-    const { appHandler: appHandler2 } = (init_app(), __toCommonJS(exports_app));
-    this.register("app", appHandler2);
-    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);
-    this.register("hypenapp", hypenAppHandler2);
-  }
 }
-export {
-  ComponentRegistry
-};
-
-//# debugId=FBCAEBC2A5AF806F64756E2164756E21
+//# sourceMappingURL=index.js.map