woby/dist/index.es.js

A high-performance framework with fine-grained observable/signal-based reactivity for building rich applications.

var _a, _b;
import { c as createElement, w as wrapCloneElement, a as wrapElement } from "./create_element-XaqhKbBT.js";
import { F, S, g, i, j, b, d, u } from "./create_element-XaqhKbBT.js";
import { j as isFunction, x as get, _ as _with, y as cleanup, s as setChild, F as FragmentUtils, v as createHTMLNode, z as useRenderEffect, A as assign, B as isPrimitive, f as SYMBOL_CLONE, C as isArray, i as isObject, E as once, G as setStyles, H as setRef, I as setProperty, J as setHTML, K as setEvent, L as setClasses, M as setChildReplacement, N as setAttribute, P as indexOf, k as isString, Q as SYMBOL_TEMPLATE_ACCESSOR, R as isObservable, T as SYMBOL_OBSERVABLE } from "./setters-Be-jpuHZ.js";
import { ai, D, aj, am, h, g as g2, an, ao, ap, ak, al, aq, ar, d as d2, e, c, Y, Z, U, ab, $, V, a0, p, a1, a2, a3, a4, a5, n, a6, ah, a7, m, W, a8, a9, o, aa, ae, ad, X, ac, u as u2, ag, af } from "./setters-Be-jpuHZ.js";
import { m as memo, r as resolve, u as useResolved, o as observable, s as suspense, b as boolean, h as htm, a as useResource } from "./render_to_string-Bc8wL1Vg.js";
import { E, F as F2, I, S as S2, q, T, g as g3, c as c2, d as d3, e as e2, n as n2, f, j as j2, k, i as i2, p as p2, l, t, x, y, z, A, v, B, O, C, D as D2, G, H, J, w, M, N, K, P, Q, R, L, U as U2 } from "./render_to_string-Bc8wL1Vg.js";
import { r as root } from "./root-Cy1I57g_.js";
const IS_BROWSER = !!((_b = (_a = globalThis.CDATASection) == null ? void 0 : _a.toString) == null ? void 0 : _b.call(_a).match(/^\s*function\s+CDATASection\s*\(\s*\)\s*\{\s*\[native code\]\s*\}\s*$/));
const isServer = () => {
  return !IS_BROWSER;
};
const types = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null
}, Symbol.toStringTag, { value: "Module" }));
const Dynamic = ({ component, props, children }) => {
  if (isFunction(component) || isFunction(props)) {
    return memo(() => {
      return resolve(createElement(get(component, false), get(props), children));
    });
  } else {
    return createElement(component, props, children);
  }
};
const cache = {};
const runWithSuperRoot = _with();
let lockId = 1;
const KeepAlive = ({ id, ttl, children }) => {
  return memo((stack) => {
    return useResolved([id, ttl], (id2, ttl2) => {
      var _a2;
      const lock = lockId++;
      const item = cache[id2] || (cache[id2] = { id: id2, lock });
      item.lock = lock;
      (_a2 = item.reset) == null ? void 0 : _a2.call(item, stack);
      item.suspended || (item.suspended = observable(false));
      item.suspended(false);
      if (!item.dispose || !item.result) {
        runWithSuperRoot(() => {
          root((stack2, dispose) => {
            item.dispose = () => {
              delete cache[id2];
              dispose(stack2);
            };
            suspense(item.suspended, () => {
              item.result = resolve(children);
            }, stack2);
          });
        }, stack);
      }
      cleanup(() => {
        var _a3;
        const hasLock = () => lock === item.lock;
        if (!hasLock()) return;
        (_a3 = item.suspended) == null ? void 0 : _a3.call(item, true);
        if (!ttl2 || ttl2 <= 0 || ttl2 >= Infinity) return;
        const dispose = () => {
          var _a4;
          return hasLock() && ((_a4 = item.dispose) == null ? void 0 : _a4.call(item, stack));
        };
        const timeoutId = setTimeout(dispose, ttl2);
        const reset = () => clearTimeout(timeoutId);
        item.reset = reset;
      });
      return item.result;
    });
  });
};
const render = (child, parent) => {
  if (!parent || !(parent instanceof HTMLElement || parent instanceof ShadowRoot)) throw new Error("Invalid parent node");
  parent.textContent = "";
  return root((stack, dispose) => {
    setChild(parent, child, FragmentUtils.make(), stack);
    return () => {
      dispose(stack);
      parent.textContent = "";
    };
  });
};
const Portal = ({ when = true, mount, wrapper, children }) => {
  const portal = get(wrapper) || createHTMLNode("div");
  if (!(portal instanceof HTMLElement)) throw new Error("Invalid wrapper node");
  const condition = boolean(when);
  const stack = new Error();
  useRenderEffect(() => {
    if (!get(condition)) return;
    const parent = get(mount) || document.body;
    if (!(parent instanceof Element)) throw new Error("Invalid mount node");
    parent.insertBefore(portal, null);
    return () => {
      parent.removeChild(portal);
    };
  }, stack);
  useRenderEffect(() => {
    if (!get(condition)) return;
    return render(children, portal);
  }, stack);
  return assign(() => get(condition) || children, { metadata: { portal } });
};
const cloneElement = (element, props, ...children) => {
  if (isPrimitive(element))
    return element;
  else if (isFunction(element)) {
    if (!element[SYMBOL_CLONE])
      throw new Error("target is not cloneable, it is not created by jsx.createElement");
    const { Component, props: oldProps } = element[SYMBOL_CLONE];
    const newProps = { ...oldProps, ...props };
    if (children.length > 0)
      Object.assign(props, { children });
    return wrapCloneElement(createElement(Component, newProps), Component, newProps);
  } else if (isArray(element))
    return element.map((e3) => cloneElement(e3, props));
  else if (element.cloneNode)
    return element.cloneNode();
  throw new Error("Unknown element");
};
function h$1(component, props, ...children) {
  if (children.length || isObject(props) && !isArray(props)) {
    if (!props) props = { children };
    else props = { ...props, children };
    return createElement(component, props);
  } else {
    return createElement(component, null, props);
  }
}
const registry = {};
const h2 = (type, props, ...children) => createElement(registry[type] || type, props, ...children);
const register = (components) => void assign(registry, components);
const html = assign(htm.bind(h2), { register });
const lazy = (fetcher) => {
  const fetcherOnce = once(fetcher);
  const component = (props) => {
    const resource = useResource(fetcherOnce);
    return memo(() => {
      return useResolved(resource, ({ pending, error, value }) => {
        if (pending) return;
        if (error) throw error;
        const component2 = "default" in value ? value.default : value;
        return resolve(createElement(component2, props));
      });
    });
  };
  component.preload = () => {
    return new Promise((resolve2, reject) => {
      const resource = useResource(fetcherOnce);
      useResolved(resource, ({ pending, error }) => {
        if (pending) return;
        if (error) return reject(error);
        return resolve2();
      });
    });
  };
  return component;
};
const template = (fn) => {
  const safePropertyRe = /^[a-z0-9-_]+$/i;
  const checkValidProperty = (property) => {
    if (isString(property) && safePropertyRe.test(property)) return true;
    throw new Error(`Invalid property, only alphanumeric properties are allowed inside templates, received: "${property}"`);
  };
  const makeAccessor = (actionsWithNodes) => {
    return new Proxy({}, {
      get(target, prop) {
        checkValidProperty(prop);
        const accessor = (node, method, key, targetNode) => {
          if (key) checkValidProperty(key);
          actionsWithNodes.push([node, method, prop, key, targetNode]);
        };
        const metadata = { [SYMBOL_TEMPLATE_ACCESSOR]: true };
        return assign(accessor, metadata);
      }
    });
  };
  const makeActionsWithNodesAndTemplate = () => {
    const actionsWithNodes = [];
    const accessor = makeAccessor(actionsWithNodes);
    const component = fn(accessor);
    if (isFunction(component)) {
      const root2 = component();
      if (root2 instanceof Element) {
        return { actionsWithNodes, root: root2 };
      }
    }
    throw new Error("Invalid template, it must return a function that returns an Element");
  };
  const makeActionsWithPaths = (actionsWithNodes) => {
    const actionsWithPaths = [];
    for (let i3 = 0, l2 = actionsWithNodes.length; i3 < l2; i3++) {
      const [node, method, prop, key, targetNode] = actionsWithNodes[i3];
      const nodePath = makeNodePath(node);
      const targetNodePath = targetNode ? makeNodePath(targetNode) : void 0;
      actionsWithPaths.push([nodePath, method, prop, key, targetNodePath]);
    }
    return actionsWithPaths;
  };
  const makeNodePath = /* @__PURE__ */ (() => {
    let prevNode = null;
    let prevPath;
    return (node) => {
      if (node === prevNode) return prevPath;
      const path = [];
      let child = node;
      let parent = child.parentNode;
      while (parent) {
        const index = !child.previousSibling ? 0 : !child.nextSibling ? -0 : indexOf(parent.childNodes, child);
        path.push(index);
        child = parent;
        parent = parent.parentNode;
      }
      prevNode = node;
      prevPath = path;
      return path;
    };
  })();
  const makeNodePathProperties = (path) => {
    const properties = ["root"];
    const parts = path.slice().reverse();
    for (let i3 = 0, l2 = parts.length; i3 < l2; i3++) {
      const part = parts[i3];
      if (Object.is(0, part)) {
        properties.push("firstChild");
      } else if (Object.is(-0, part)) {
        properties.push("lastChild");
      } else {
        properties.push("firstChild");
        for (let nsi = 0; nsi < part; nsi++) {
          properties.push("nextSibling");
        }
      }
    }
    return properties;
  };
  const makeReviverPaths = (actionsWithPaths) => {
    const paths = [];
    for (let i3 = 0, l2 = actionsWithPaths.length; i3 < l2; i3++) {
      const action = actionsWithPaths[i3];
      const nodePath = action[0];
      const targetNodePath = action[4];
      paths.push(nodePath);
      if (targetNodePath) {
        paths.push(targetNodePath);
      }
    }
    return paths;
  };
  const makeReviverVariablesData = (paths, properties) => {
    const data = new Array(paths.length);
    for (let i3 = 0, l2 = paths.length; i3 < l2; i3++) {
      data[i3] = {
        path: paths[i3],
        properties: properties[i3]
      };
    }
    return data;
  };
  const makeReviverVariables = (actionsWithPaths) => {
    const paths = makeReviverPaths(actionsWithPaths);
    const properties = paths.map(makeNodePathProperties);
    const data = makeReviverVariablesData(paths, properties);
    const assignments = [];
    const map = /* @__PURE__ */ new Map();
    let variableId = 0;
    while (true) {
      const datum = data.find((datum2) => datum2.properties.length > 1);
      if (!datum) break;
      const [current, next] = datum.properties;
      const variable = `$${variableId++}`;
      const assignment = `const ${variable} = ${current}.${next};`;
      assignments.push(assignment);
      for (let i3 = 0, l2 = data.length; i3 < l2; i3++) {
        const datum2 = data[i3];
        const [otherCurrent, otherNext] = datum2.properties;
        if (otherCurrent !== current || otherNext !== next) continue;
        datum2.properties[0] = variable;
        datum2.properties.splice(1, 1);
      }
    }
    for (let i3 = 0, l2 = data.length; i3 < l2; i3++) {
      const datum = data[i3];
      map.set(datum.path, datum.properties[0]);
    }
    return { assignments, map };
  };
  const makeReviverActions = (actionsWithPaths, variables) => {
    const actions = [];
    for (let i3 = 0, l2 = actionsWithPaths.length; i3 < l2; i3++) {
      const [nodePath, method, prop, key, targetNodePath] = actionsWithPaths[i3];
      if (targetNodePath) {
        actions.push(`this.${method} ( props["${prop}"], ${variables.get(targetNodePath)} );`);
      } else if (key) {
        actions.push(`this.${method} ( ${variables.get(nodePath)}, "${key}", props["${prop}"] );`);
      } else {
        actions.push(`this.${method} ( ${variables.get(nodePath)}, props["${prop}"] );`);
      }
    }
    return actions;
  };
  const makeReviver = (actionsWithPaths) => {
    const { assignments, map } = makeReviverVariables(actionsWithPaths);
    const actions = makeReviverActions(actionsWithPaths, map);
    const fn2 = new Function("root", "props", `${assignments.join("")}${actions.join("")}return root;`);
    const apis = { setAttribute, setChildReplacement, setClasses, setEvent, setHTML, setProperty, setRef, setStyles };
    const reviver = fn2.bind(apis);
    return reviver;
  };
  const makeComponent = () => {
    const { actionsWithNodes, root: root2 } = makeActionsWithNodesAndTemplate();
    const actionsWithPaths = makeActionsWithPaths(actionsWithNodes);
    const reviver = makeReviver(actionsWithPaths);
    return (props) => {
      const clone2 = root2.cloneNode(true);
      return wrapElement(reviver.bind(void 0, clone2, props));
    };
  };
  return makeComponent();
};
const clone = (source, deepClone = false) => {
  if (isPrimitive(source))
    return source;
  if (isFunction(source))
    return source;
  if (isArray(source))
    if (deepClone)
      return source.map((item) => clone(item, deepClone));
    else
      return source;
  const newObject = {};
  Object.keys(source).forEach((key) => {
    if (typeof source[key] === "function" && !isObservable(source[key])) {
      newObject[key] = source[key];
    } else if (isObservable(source[key]) && isObject(get(source[key])) && !isArray(get(source[key]))) {
      const innerObject = clone(get(source[key]));
      newObject[key] = innerObject;
    } else if (isObservable(source[key])) {
      newObject[key] = observable(get(source[key]));
    } else if (isObject(get(source[key])) && deepClone) {
      const innerObject = clone(source[key]);
      newObject[key] = innerObject;
    } else
      newObject[key] = source[key];
  });
  return newObject;
};
const is = (value) => value === "" || value === "true" || value === true;
const HtmlBoolean = {
  equals: (a, b2) => is(a) === is(b2),
  type: Boolean,
  toHtml: (value) => is(value) ? "" : void 0,
  // Return empty string for true, undefined for false
  fromHtml: (value) => is(value)
};
const toNumber = (value) => {
  if (value === void 0 || value === "") return NaN;
  if (typeof value === "number") return value;
  const num = Number(value);
  return isNaN(num) ? NaN : num;
};
const HtmlNumber = {
  equals: (a, b2) => toNumber(a) === toNumber(b2),
  type: Number,
  toHtml: (value) => {
    const num = toNumber(value);
    return isNaN(num) ? void 0 : String(num);
  },
  fromHtml: (value) => toNumber(value)
};
const toDate = (value) => {
  if (value === void 0 || value === "") return void 0;
  if (value instanceof Date) return isNaN(value.getTime()) ? void 0 : value;
  if (typeof value === "number") {
    const date2 = new Date(value);
    return isNaN(date2.getTime()) ? void 0 : date2;
  }
  if (typeof value === "string") {
    const timestamp = Date.parse(value);
    if (!isNaN(timestamp)) {
      return new Date(timestamp);
    }
    const numericTimestamp = Number(value);
    if (!isNaN(numericTimestamp)) {
      const date3 = new Date(numericTimestamp);
      if (!isNaN(date3.getTime())) {
        return date3;
      }
    }
    const date2 = new Date(value);
    return isNaN(date2.getTime()) ? void 0 : date2;
  }
  const date = new Date(value);
  return isNaN(date.getTime()) ? void 0 : date;
};
const HtmlDate = {
  equals: (a, b2) => {
    const dateA = toDate(a);
    const dateB = toDate(b2);
    return dateA === void 0 && dateB === void 0 || dateA !== void 0 && dateB !== void 0 && dateA.getTime() === dateB.getTime();
  },
  type: Date,
  toHtml: (value) => {
    const date = toDate(value);
    return date ? date.toISOString() : "";
  },
  fromHtml: (value) => toDate(value) || /* @__PURE__ */ new Date(NaN)
};
const toBigInt = (value) => {
  if (value === void 0 || value === "") return void 0;
  try {
    if (typeof value === "bigint") return value;
    if (typeof value === "number") {
      if (!Number.isInteger(value)) return void 0;
      return BigInt(value);
    }
    return BigInt(value);
  } catch {
    return void 0;
  }
};
const HtmlBigInt = {
  equals: (a, b2) => {
    const bigA = toBigInt(a);
    const bigB = toBigInt(b2);
    return bigA === void 0 && bigB === void 0 || bigA !== void 0 && bigB !== void 0 && bigA === bigB;
  },
  type: BigInt,
  toHtml: (value) => {
    const big = toBigInt(value);
    return big ? big.toString() : void 0;
  },
  fromHtml: (value) => toBigInt(value) || BigInt(0)
};
const toObject = (value) => {
  if (value === void 0 || value === "") return void 0;
  if (typeof value !== "string") return value;
  try {
    return HtmlObject.JSON.parse(value);
  } catch {
    return void 0;
  }
};
const HtmlObject = {
  /**
   * JSON implementation used for parsing and stringifying objects.
   * Consumers can replace this with alternative implementations like JSON5.
   */
  JSON,
  equals: (a, b2) => {
    const objA = toObject(a);
    const objB = toObject(b2);
    return objA === void 0 && objB === void 0 || objA !== void 0 && objB !== void 0 && HtmlObject.JSON.stringify(objA) === HtmlObject.JSON.stringify(objB);
  },
  type: Object,
  toHtml: (value) => {
    const obj = toObject(value);
    try {
      return obj ? HtmlObject.JSON.stringify(obj) : void 0;
    } catch {
      return "";
    }
  },
  fromHtml: (value) => toObject(value) || {}
};
const parseCSSLength = (value) => {
  if (typeof value === "string" && value === "") {
    return void 0;
  }
  if (typeof value === "object" && value !== null && "value" in value && "unit" in value) {
    return {
      value: value.value,
      unit: value.unit,
      valueOf: () => `${value.value}${value.unit}`,
      toString: () => `${value.value}${value.unit}`
    };
  }
  if (value === "auto" || value === "inherit" || value === "initial" || value === "unset") {
    return value;
  }
  if (typeof value === "undefined")
    return void 0;
  const match = value.match(/^(-?\d*\.?\d+)([a-zA-Z%]+)$/);
  if (match) {
    const [, num, unit] = match;
    const numericValue = parseFloat(num);
    return {
      value: numericValue,
      unit,
      valueOf: () => `${numericValue}${unit}`,
      toString: () => `${numericValue}${unit}`
    };
  }
  if (typeof value === "string" && /^-?\d*\.?\d+$/.test(value)) {
    const numericValue = parseFloat(value);
    return {
      value: numericValue,
      unit: "px",
      valueOf: () => `${numericValue}px`,
      toString: () => `${numericValue}px`
    };
  }
  return value;
};
const stringifyCSSLength = (value) => {
  if (typeof value === "string") return value;
  if (typeof value === "number") return `${value}px`;
  return `${value.value}${value.unit}`;
};
const HtmlLength = {
  equals: (a, b2) => {
    const parsedA = parseCSSLength(a);
    const parsedB = parseCSSLength(b2);
    if (typeof parsedA === "string" && typeof parsedB === "string") {
      return parsedA === parsedB;
    }
    if (typeof parsedA === "object" && typeof parsedB === "object") {
      return parsedA.value === parsedB.value && parsedA.unit === parsedB.unit;
    }
    return false;
  },
  type: Object,
  toHtml: (value) => {
    const parsed = parseCSSLength(value);
    if (parsed === void 0) return void 0;
    if (typeof parsed === "string" || typeof parsed === "number") return parsed;
    return stringifyCSSLength(parsed);
  },
  fromHtml: (value) => {
    if (typeof value !== "string") return value;
    return parseCSSLength(value);
  }
};
const parseCSSBox = (value) => {
  if (value === "") {
    return void 0;
  }
  if (typeof value === "object" && value !== null && "top" in value && "right" in value && "bottom" in value && "left" in value) {
    return {
      top: value.top,
      right: value.right,
      bottom: value.bottom,
      left: value.left,
      valueOf: () => `${value.top} ${value.right} ${value.bottom} ${value.left}`,
      toString: () => `${value.top} ${value.right} ${value.bottom} ${value.left}`
    };
  }
  if (Array.isArray(value)) {
    switch (value.length) {
      case 1:
        return {
          top: value[0],
          right: value[0],
          bottom: value[0],
          left: value[0],
          valueOf: () => `${value[0]}`,
          toString: () => `${value[0]}`
        };
      case 2:
        return {
          top: value[0],
          right: value[1],
          bottom: value[0],
          left: value[1],
          valueOf: () => `${value[0]} ${value[1]}`,
          toString: () => `${value[0]} ${value[1]}`
        };
      case 3:
        return {
          top: value[0],
          right: value[1],
          bottom: value[2],
          left: value[1],
          valueOf: () => `${value[0]} ${value[1]} ${value[2]}`,
          toString: () => `${value[0]} ${value[1]} ${value[2]}`
        };
      case 4:
        return {
          top: value[0],
          right: value[1],
          bottom: value[2],
          left: value[3],
          valueOf: () => `${value[0]} ${value[1]} ${value[2]} ${value[3]}`,
          toString: () => `${value[0]} ${value[1]} ${value[2]} ${value[3]}`
        };
    }
  }
  if (typeof value === "string" || typeof value === "number") {
    return {
      top: value,
      right: value,
      bottom: value,
      left: value,
      valueOf: () => `${value}`,
      toString: () => `${value}`
    };
  }
  return {
    top: "0px",
    right: "0px",
    bottom: "0px",
    left: "0px",
    valueOf: () => "0px",
    toString: () => "0px"
  };
};
const HtmlBox = {
  // Compare two CSS box values for equality
  // Handles undefined, string, and object values
  equals: (a, b2) => {
    const boxA = parseCSSBox(a);
    const boxB = parseCSSBox(b2);
    if (boxA === void 0 || boxB === void 0) {
      return boxA === boxB;
    }
    return boxA.top === boxB.top && boxA.right === boxB.right && boxA.bottom === boxB.bottom && boxA.left === boxB.left;
  },
  type: Object,
  toHtml: (value) => {
    const box = parseCSSBox(value);
    if (box === void 0) return void 0;
    return box.toString();
  },
  fromHtml: (value) => {
    if (typeof value !== "string") return value;
    const parts = value.split(" ").filter((part) => part.length > 0);
    switch (parts.length) {
      case 1:
        return { top: parts[0], right: parts[0], bottom: parts[0], left: parts[0], valueOf: () => value, toString: () => value };
      case 2:
        return { top: parts[0], right: parts[1], bottom: parts[0], left: parts[1], valueOf: () => value, toString: () => value };
      case 3:
        return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[1], valueOf: () => value, toString: () => value };
      case 4:
        return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[3], valueOf: () => value, toString: () => value };
      default:
        return { top: "0px", right: "0px", bottom: "0px", left: "0px", valueOf: () => "0px", toString: () => "0px" };
    }
  }
};
const parseCSSColor = (value) => {
  if (value === "") {
    return void 0;
  }
  if (typeof value === "object" && value !== null && "r" in value && "g" in value && "b" in value) {
    return {
      r: value.r,
      g: value.g,
      b: value.b,
      valueOf: () => `#${Math.min(255, Math.max(0, value.r)).toString(16).padStart(2, "0")}${Math.min(255, Math.max(0, value.g)).toString(16).padStart(2, "0")}${Math.min(255, Math.max(0, value.b)).toString(16).padStart(2, "0")}`,
      toString: () => `#${Math.min(255, Math.max(0, value.r)).toString(16).padStart(2, "0")}${Math.min(255, Math.max(0, value.g)).toString(16).padStart(2, "0")}${Math.min(255, Math.max(0, value.b)).toString(16).padStart(2, "0")}`
    };
  }
  if (typeof value === "string") {
    if (value.startsWith("#")) {
      const hex = value.slice(1);
      if (hex.length === 3) {
        const r = parseInt(hex[0] + hex[0], 16);
        const g4 = parseInt(hex[1] + hex[1], 16);
        const b2 = parseInt(hex[2] + hex[2], 16);
        return {
          r,
          g: g4,
          b: b2,
          valueOf: () => value,
          toString: () => value
        };
      } else if (hex.length === 6) {
        const r = parseInt(hex.slice(0, 2), 16);
        const g4 = parseInt(hex.slice(2, 4), 16);
        const b2 = parseInt(hex.slice(4, 6), 16);
        return {
          r,
          g: g4,
          b: b2,
          valueOf: () => value,
          toString: () => value
        };
      }
    }
    return value;
  }
  if (typeof value === "number") {
    const r = value >> 16 & 255;
    const g4 = value >> 8 & 255;
    const b2 = value & 255;
    const hex = `#${r.toString(16).padStart(2, "0")}${g4.toString(16).padStart(2, "0")}${b2.toString(16).padStart(2, "0")}`;
    return {
      r,
      g: g4,
      b: b2,
      valueOf: () => hex,
      toString: () => hex
    };
  }
  return String(value);
};
const stringifyCSSColor = (value) => {
  if (typeof value === "string") return value;
  return `#${Math.min(255, Math.max(0, value.r)).toString(16).padStart(2, "0")}${Math.min(255, Math.max(0, value.g)).toString(16).padStart(2, "0")}${Math.min(255, Math.max(0, value.b)).toString(16).padStart(2, "0")}`;
};
const HtmlColor = {
  equals: (a, b2) => {
    const parsedA = parseCSSColor(a);
    const parsedB = parseCSSColor(b2);
    if (typeof parsedA === "string" && typeof parsedB === "string") {
      return parsedA === parsedB;
    }
    if (typeof parsedA === "object" && typeof parsedB === "object" && "r" in parsedA && "r" in parsedB) {
      return parsedA.r === parsedB.r && parsedA.g === parsedB.g && parsedA.b === parsedB.b;
    }
    return false;
  },
  type: String,
  toHtml: (value) => {
    const parsed = parseCSSColor(value);
    if (parsed === void 0) return void 0;
    return stringifyCSSColor(parsed);
  },
  fromHtml: (value) => {
    return value;
  }
};
const toStyleObject = (value) => {
  if (value === void 0 || value === "") return void 0;
  if (typeof value === "object" && value !== null) {
    return value;
  }
  if (typeof value === "string") {
    if (value.trim() === "") return void 0;
    const style = {};
    const rules = value.split(";");
    for (const rule of rules) {
      const trimmedRule = rule.trim();
      if (trimmedRule) {
        const colonIndex = trimmedRule.indexOf(":");
        if (colonIndex > 0) {
          const property = trimmedRule.substring(0, colonIndex).trim();
          const value2 = trimmedRule.substring(colonIndex + 1).trim();
          if (property && value2) {
            const camelCaseProperty = property.replace(/-([a-z])/g, (g4) => g4[1].toUpperCase());
            style[camelCaseProperty] = value2;
          }
        }
      }
    }
    return Object.keys(style).length > 0 ? style : void 0;
  }
  return void 0;
};
const stringifyStyleObject = (value) => {
  if (value === void 0 || value === null) return "";
  const cssRules = [];
  for (const [property, val] of Object.entries(value)) {
    if (property && val !== void 0 && val !== null) {
      const kebabCaseProperty = property.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
      cssRules.push(`${kebabCaseProperty}: ${val}`);
    }
  }
  return cssRules.join("; ");
};
const HtmlStyle = {
  // Compare two CSS style values for equality
  // Handles undefined, string, and object values
  equals: (a, b2) => {
    const styleA = toStyleObject(a);
    const styleB = toStyleObject(b2);
    if (styleA === void 0 && styleB === void 0) return true;
    if (styleA === void 0 || styleB === void 0) return false;
    return stringifyStyleObject(styleA) === stringifyStyleObject(styleB);
  },
  type: Object,
  toHtml: (value) => {
    const style = toStyleObject(value);
    return stringifyStyleObject(style);
  },
  fromHtml: (value) => {
    return toStyleObject(value) || {};
  }
};
const toString = (value) => {
  if (value === null || value === void 0) return "";
  return String(value);
};
const HtmlString = {
  equals: (a, b2) => toString(a) === toString(b2),
  type: String,
  toHtml: (value) => toString(value),
  fromHtml: (value) => toString(value)
};
const toFunctionString = (value) => {
  if (value === null || value === void 0) return void 0;
  return void 0;
};
const HtmlFunction = {
  equals: (a, b2) => {
    return a === b2;
  },
  type: Function,
  toHtml: (value) => {
    const result = toFunctionString(value);
    return result;
  },
  fromHtml: (value) => {
    return void 0;
  }
};
const toClassString = (value) => {
  if (value === null || value === void 0) return "";
  if (typeof value === "string") return value;
  if (typeof value === "number") return String(value);
  if (typeof value === "boolean") return value ? "" : "";
  if (typeof value === "function") {
    try {
      return toClassString(value());
    } catch {
      return "";
    }
  }
  if (Array.isArray(value)) {
    return value.map(toClassString).filter(Boolean).join(" ");
  }
  if (typeof value === "object") {
    return Object.entries(value).filter(([key, val]) => {
      try {
        const resolvedVal = typeof val === "function" ? val() : val;
        return resolvedVal === true;
      } catch {
        return false;
      }
    }).map(([key]) => key).join(" ");
  }
  return "";
};
const HtmlClass = {
  equals: (a, b2) => toClassString(a) === toClassString(b2),
  type: String,
  toHtml: (value) => toClassString(value),
  fromHtml: (value) => value
};
const HtmlHidden = () => ({
  equals: (a, b2) => {
    return a === b2;
  },
  type: Function,
  toHtml: (value) => void 0,
  fromHtml: (value) => void 0
});
const HtmlChild = HtmlHidden();
const ObservableSymbol = SYMBOL_OBSERVABLE;
export {
  observable as $,
  get as $$,
  ai as CONTEXTS_DATA,
  D as DEBUGGER,
  aj as DIRECTIVES,
  Dynamic,
  E as ErrorBoundary,
  F2 as For,
  F as Fragment,
  FragmentUtils,
  HtmlBigInt,
  HtmlBoolean,
  HtmlBox,
  HtmlChild,
  HtmlClass,
  HtmlColor,
  HtmlDate,
  HtmlFunction,
  HtmlHidden,
  HtmlLength,
  HtmlNumber,
  HtmlObject,
  HtmlString,
  HtmlStyle,
  I as If,
  types as JSX,
  KeepAlive,
  ObservableSymbol,
  Portal,
  am as SYMBOLS_DIRECTIVES,
  SYMBOL_CLONE,
  h as SYMBOL_DEFAULT,
  g2 as SYMBOL_JSX,
  SYMBOL_OBSERVABLE,
  an as SYMBOL_OBSERVABLE_FROZEN,
  ao as SYMBOL_OBSERVABLE_READABLE,
  ap as SYMBOL_OBSERVABLE_WRITABLE,
  S as SYMBOL_STACK,
  ak as SYMBOL_SUSPENSE,
  al as SYMBOL_SUSPENSE_COLLECTOR,
  SYMBOL_TEMPLATE_ACCESSOR,
  aq as SYMBOL_UNCACHED,
  ar as SYMBOL_UNTRACKED,
  d2 as SYMBOL_UNTRACKED_UNWRAPPED,
  e as Stack,
  S2 as Suspense,
  q as Switch,
  T as Ternary,
  g3 as assign,
  c2 as batch,
  c as callStack,
  Y as castArray,
  Z as castError,
  clone,
  cloneElement,
  U as context,
  d3 as createContext,
  e2 as createDirective,
  createElement,
  n2 as customElement,
  f as defaults,
  ab as fixBigInt,
  $ as flatten,
  g as getMeta,
  h$1 as h,
  j2 as hmr,
  html,
  indexOf,
  isArray,
  V as isBatching,
  a0 as isBoolean,
  p as isClass,
  a1 as isComponent,
  a2 as isError,
  a3 as isFalsy,
  isFunction,
  a4 as isFunctionReactive,
  i as isJsx,
  a5 as isNil,
  n as isNode,
  isObject,
  isObservable,
  k as isObservableWritable,
  isPrimitive,
  a6 as isPromise,
  ah as isSSR,
  a7 as isSVG,
  m as isSVGElement,
  isServer,
  W as isStore,
  isString,
  a8 as isTemplateAccessor,
  a9 as isTruthy,
  o as isVoidChild,
  j as jsx,
  b as jsxDEV,
  d as jsxs,
  lazy,
  i2 as make,
  p2 as mark,
  aa as noop,
  once,
  render,
  l as renderToString,
  resolve,
  ae as resolveArraysAndStatics,
  setChild,
  ad as setProp,
  setRef,
  X as store,
  template,
  t as tick,
  ac as toArray,
  u2 as untrack,
  u as unwrapJsx,
  x as useAbortController,
  y as useAbortSignal,
  z as useAnimationFrame,
  A as useAnimationLoop,
  v as useAttached,
  boolean as useBoolean,
  cleanup as useCleanup,
  B as useContext,
  O as useDisposed,
  ag as useEffect,
  C as useEventListener,
  D2 as useFetch,
  G as useIdleCallback,
  H as useIdleLoop,
  J as useInterval,
  w as useLightDom,
  memo as useMemo,
  af as useMicrotask,
  M as useMounted,
  N as useMountedContext,
  K as usePromise,
  P as useReadonly,
  useResolved,
  useResource,
  root as useRoot,
  Q as useSelector,
  R as useSuspended,
  suspense as useSuspense,
  L as useTimeout,
  U2 as useUntracked,
  wrapCloneElement
};
//# sourceMappingURL=index.es.js.map