thunderous 2.3.13 → 2.4.2

package/dist/index.js

@@ -1,5 +1,1152 @@
-export { customElement } from './custom-element';
-export { createRegistry } from './registry';
-export { onServerDefine, insertTemplates, clientOnlyCallback } from './server-side';
-export { createEffect, createSignal, derived } from './signals';
-export { html, css } from './render';
+// src/constants.ts
+var DEFAULT_RENDER_OPTIONS = {
+  formAssociated: false,
+  observedAttributes: [],
+  attributesAsProperties: [],
+  attachShadow: true,
+  shadowRootOptions: {
+    mode: "closed",
+    delegatesFocus: false,
+    clonable: false,
+    serializable: false,
+    slotAssignment: "named"
+  }
+};
+
+// src/signals.ts
+var ident = null;
+var effects = /* @__PURE__ */ new WeakMap();
+var createSignal = (initVal, options) => {
+  const subscribers = /* @__PURE__ */ new Set();
+  let value = initVal;
+  const getter = (getterOptions) => {
+    if (ident !== null) {
+      subscribers.add(ident);
+    }
+    if (options?.debugMode === true || getterOptions?.debugMode === true) {
+      let label = "anonymous signal";
+      if (options?.label !== void 0) {
+        label = `(${options.label})`;
+        if (getterOptions?.label !== void 0) {
+          label += ` ${getterOptions.label}`;
+        }
+      } else if (getterOptions?.label !== void 0) {
+        label = getterOptions.label;
+      }
+      console.log("Signal retrieved:", {
+        value,
+        subscribers: Array.from(subscribers).map((sym) => effects.get(sym)),
+        label
+      });
+    }
+    return value;
+  };
+  getter.getter = true;
+  let stackLength = 0;
+  const setter = (newValue, setterOptions) => {
+    stackLength++;
+    queueMicrotask(() => stackLength--);
+    if (stackLength > 1e3) {
+      console.error(new Error("Signal setter stack overflow detected. Possible infinite loop. Bailing out."));
+      stackLength = 0;
+      return;
+    }
+    const isObject = typeof newValue === "object" && newValue !== null;
+    if (!isObject && value === newValue) return;
+    if (isObject && typeof value === "object" && value !== null) {
+      const isPlainObject = (obj) => typeof obj === "object" && obj !== null && Object.getPrototypeOf(obj) === Object.prototype;
+      if (isPlainObject(value) && isPlainObject(newValue)) {
+        if (JSON.stringify(value) === JSON.stringify(newValue)) return;
+      }
+    }
+    const oldValue = value;
+    value = newValue;
+    for (const sym of subscribers) {
+      const effectRef = effects.get(sym);
+      if (effectRef !== void 0) {
+        try {
+          effectRef.fn({
+            lastValue: effectRef.value,
+            destroy: () => {
+              effects.delete(sym);
+              queueMicrotask(() => subscribers.delete(sym));
+            }
+          });
+        } catch (error) {
+          console.error("Error in subscriber:", { error, oldValue, newValue, fn: effectRef.fn });
+        }
+      } else {
+        queueMicrotask(() => subscribers.delete(sym));
+      }
+    }
+    if (options?.debugMode === true || setterOptions?.debugMode === true) {
+      let label = "anonymous signal";
+      if (options?.label !== void 0) {
+        label = `(${options.label})`;
+        if (setterOptions?.label !== void 0) {
+          label += ` ${setterOptions.label}`;
+        }
+      } else if (setterOptions?.label !== void 0) {
+        label = setterOptions.label;
+      }
+      console.log("Signal set:", {
+        oldValue,
+        newValue,
+        subscribers: Array.from(subscribers).map((sym) => effects.get(sym)),
+        label
+      });
+    }
+  };
+  return [getter, setter];
+};
+var derived = (fn, options) => {
+  const [getter, setter] = createSignal(void 0, options);
+  createEffect(() => {
+    try {
+      setter(fn());
+    } catch (error) {
+      console.error("Error in derived signal:", { error, fn });
+    }
+  });
+  return getter;
+};
+var createEffect = (fn, value) => {
+  const privateIdent = ident = {};
+  effects.set(ident, { fn, value });
+  try {
+    fn({
+      lastValue: value,
+      destroy: () => {
+        effects.delete(privateIdent);
+      }
+    });
+  } catch (error) {
+    console.error("Error in effect:", { error, fn });
+  }
+  ident = null;
+};
+
+// src/utilities.ts
+var NOOP = () => void 0;
+var queryComment = (node, comment) => {
+  const walker = document.createTreeWalker(node, NodeFilter.SHOW_COMMENT, {
+    acceptNode: (n) => n.nodeValue === comment ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+  });
+  return walker.nextNode();
+};
+var queryChildren = (children, selector) => {
+  for (const child of children) {
+    if (child instanceof Element && child.matches(selector)) {
+      return child;
+    }
+  }
+  return null;
+};
+
+// src/server-side.ts
+var isServer = typeof window === "undefined";
+var serverDefineFns = /* @__PURE__ */ new Set();
+var onServerDefine = (fn) => {
+  serverDefineFns.add(fn);
+};
+var serverDefine = ({
+  tagName,
+  serverRender,
+  options,
+  elementResult,
+  scopedRegistry,
+  parentRegistry
+}) => {
+  if (parentRegistry !== void 0) {
+    if (parentRegistry.getTagName(elementResult) !== tagName.toUpperCase()) {
+      parentRegistry.define(tagName, elementResult);
+    }
+    parentRegistry.__serverRenderOpts.set(tagName, { serverRender, ...options });
+    if (parentRegistry.scoped) return;
+  }
+  for (const fn of serverDefineFns) {
+    let result = serverRender(getServerRenderArgs(tagName));
+    result = wrapTemplate({
+      tagName,
+      serverRender,
+      options
+    });
+    if (scopedRegistry !== void 0) {
+      for (const [scopedTagName, scopedRenderOptions] of scopedRegistry.__serverRenderOpts) {
+        const { serverRender: serverRender2, ...scopedOptions } = scopedRenderOptions;
+        let template = serverRender2(getServerRenderArgs(scopedTagName, scopedRegistry));
+        template = wrapTemplate({
+          tagName: scopedTagName,
+          serverRender: serverRender2,
+          options: scopedOptions
+        });
+        result = insertTemplates(scopedTagName, template, result);
+      }
+    }
+    fn(tagName, result);
+  }
+};
+var serverCss = /* @__PURE__ */ new Map();
+var getServerRenderArgs = (tagName, registry) => ({
+  get elementRef() {
+    return new Proxy({}, {
+      get: () => {
+        const error = new Error("The `elementRef` property is not available on the server.");
+        console.error(error);
+        throw error;
+      }
+    });
+  },
+  get root() {
+    return new Proxy({}, {
+      get: () => {
+        const error = new Error("The `root` property is not available on the server.");
+        console.error(error);
+        throw error;
+      }
+    });
+  },
+  get internals() {
+    return new Proxy({}, {
+      get: () => {
+        const error = new Error("The `internals` property is not available on the server.");
+        console.error(error);
+        throw error;
+      }
+    });
+  },
+  attributeChangedCallback: NOOP,
+  connectedCallback: NOOP,
+  disconnectedCallback: NOOP,
+  adoptedCallback: NOOP,
+  formDisabledCallback: NOOP,
+  formResetCallback: NOOP,
+  formStateRestoreCallback: NOOP,
+  formAssociatedCallback: NOOP,
+  clientOnlyCallback: NOOP,
+  customCallback: () => "",
+  getter: (fn) => {
+    const _fn = () => fn();
+    _fn.getter = true;
+    return _fn;
+  },
+  attrSignals: new Proxy({}, { get: (_, attr) => createSignal(`{{attr:${String(attr)}}}`) }),
+  propSignals: new Proxy({}, { get: () => createSignal(null) }),
+  refs: {},
+  // @ts-expect-error // this will be a string for SSR, but this is true for internal cases only.
+  // The end user will see the public type, which is either a CSSStyleSheet or HTMLStyleElement.
+  adoptStyleSheet: (cssStr) => {
+    const _serverCss = registry !== void 0 ? registry.__serverCss : serverCss;
+    const cssArr = _serverCss.get(tagName) ?? [];
+    cssArr.push(cssStr);
+    _serverCss.set(tagName, cssArr);
+  }
+});
+var wrapTemplate = ({ tagName, serverRender, options }) => {
+  const { registry } = options.shadowRootOptions;
+  const scopedRegistry = registry !== void 0 && "scoped" in registry ? registry : void 0;
+  const initialRenderString = serverRender(getServerRenderArgs(tagName, scopedRegistry));
+  const _serverCss = scopedRegistry?.__serverCss ?? serverCss;
+  const cssRenderString = (_serverCss.get(tagName) ?? []).map((cssStr) => `<style>${cssStr}</style>`).join("");
+  const finalScopedRenderString = options.attachShadow ? (
+    /* html */
+    `
+				<template
+					shadowrootmode="${options.shadowRootOptions.mode}"
+					shadowrootdelegatesfocus="${options.shadowRootOptions.delegatesFocus}"
+					shadowrootclonable="${options.shadowRootOptions.clonable}"
+					shadowrootserializable="${options.shadowRootOptions.serializable}"
+				>
+					${cssRenderString + initialRenderString}
+				</template>
+			`
+  ) : cssRenderString + initialRenderString;
+  return finalScopedRenderString;
+};
+var insertTemplates = (tagName, template, inputString) => {
+  return inputString.replace(new RegExp(`(<s*${tagName}([^>]*)>)`, "gm"), ($1, _, $3) => {
+    const attrs = $3.split(/(?<=")\s+/).filter((attr) => attr.trim() !== "").map((attr) => {
+      const [_key, _value] = attr.split("=");
+      const key = _key.trim();
+      const value = _value?.replace(/"/g, "") ?? "";
+      return [key, value];
+    });
+    let scopedResult = template;
+    for (const [key, value] of attrs) {
+      scopedResult = scopedResult.replace(new RegExp(`{{attr:${key}}}`, "gm"), value);
+    }
+    return $1 + scopedResult;
+  });
+};
+var clientOnlyCallback = (fn) => {
+  if (!isServer) return fn();
+};
+
+// src/render.ts
+var CALLBACK_BINDING_REGEX = /(\{\{callback:.+\}\})/;
+var LEGACY_CALLBACK_BINDING_REGEX = /(this.getRootNode\(\).host.__customCallbackFns.get\('.+'\)\(event\))/;
+var SIGNAL_BINDING_REGEX = /(\{\{signal:.+\}\})/;
+var FRAGMENT_ATTRIBUTE = "___thunderous-fragment";
+var renderState = {
+  currentShadowRoot: null,
+  signalMap: /* @__PURE__ */ new Map(),
+  callbackMap: /* @__PURE__ */ new Map(),
+  fragmentMap: /* @__PURE__ */ new Map(),
+  childrenMap: /* @__PURE__ */ new Map(),
+  propertyMap: /* @__PURE__ */ new Map(),
+  registry: typeof customElements !== "undefined" ? customElements : {}
+};
+var logPropertyWarning = (propName, element) => {
+  console.warn(
+    `Property "${propName}" does not exist on element:`,
+    element,
+    "\n\nThunderous will attempt to set the property anyway, but this may result in unexpected behavior. Please make sure the property exists on the element prior to setting it."
+  );
+};
+var asNodeList = (value, parent) => {
+  if (typeof value === "string") return [new Text(value)];
+  if (value instanceof DocumentFragment) return [...value.children];
+  if (Array.isArray(value)) {
+    const nodeList = [];
+    let count = 0;
+    const keys = /* @__PURE__ */ new Set();
+    for (const item of value) {
+      const cachedItem = item instanceof DocumentFragment ? renderState.childrenMap.get(item) : void 0;
+      const children = cachedItem ?? asNodeList(item, parent);
+      if (cachedItem === void 0 && item instanceof DocumentFragment) {
+        renderState.childrenMap.set(item, children);
+      }
+      if (children.length > 1) {
+        console.error(
+          "When rendering arrays, fragments must contain only one top-level element at a time. Error occured in:",
+          parent
+        );
+      }
+      const child = children[0];
+      if (child === null || !(child instanceof Element)) continue;
+      let key = child.getAttribute("key");
+      if (key === null) {
+        console.warn(
+          "When rendering arrays, a `key` attribute should be provided on each child element. An index was automatically applied, but this could result in unexpected behavior:",
+          child
+        );
+        key = String(count);
+        child.setAttribute("key", key);
+      }
+      if (keys.has(key)) {
+        console.warn(
+          `When rendering arrays, each child should have a unique \`key\` attribute. Duplicate key "${key}" found on:`,
+          child
+        );
+      }
+      keys.add(key);
+      count++;
+      nodeList.push(...children);
+    }
+    return nodeList;
+  }
+  return [new Text()];
+};
+var processValue = (value) => {
+  if (!isServer && value instanceof DocumentFragment) {
+    const uniqueKey = crypto.randomUUID();
+    renderState.fragmentMap.set(uniqueKey, value);
+    return `<div ${FRAGMENT_ATTRIBUTE}="${uniqueKey}"></div>`;
+  }
+  if (typeof value === "function" && "getter" in value && value.getter === true) {
+    const getter = value;
+    const uniqueKey = crypto.randomUUID();
+    renderState.signalMap.set(uniqueKey, getter);
+    let result = getter();
+    if (Array.isArray(result)) {
+      result = result.map((item) => processValue(item)).join("");
+    }
+    return isServer ? String(result) : `{{signal:${uniqueKey}}}`;
+  }
+  if (typeof value === "function") {
+    const uniqueKey = crypto.randomUUID();
+    renderState.callbackMap.set(uniqueKey, value);
+    return isServer ? String(value()) : `{{callback:${uniqueKey}}}`;
+  }
+  return String(value);
+};
+var evaluateBindings = (element, fragment) => {
+  for (const child of [...element.childNodes]) {
+    if (child instanceof Text && SIGNAL_BINDING_REGEX.test(child.data)) {
+      const textList = child.data.split(SIGNAL_BINDING_REGEX);
+      const nextSibling = child.nextSibling;
+      const prevSibling = child.previousSibling;
+      textList.forEach((text, i) => {
+        const uniqueKey = SIGNAL_BINDING_REGEX.test(text) ? text.replace(/\{\{signal:(.+)\}\}/, "$1") : void 0;
+        const signal = uniqueKey !== void 0 ? renderState.signalMap.get(uniqueKey) : void 0;
+        const newValue = signal !== void 0 ? signal() : text;
+        const initialChildren = asNodeList(newValue, element);
+        if (i === 0) {
+          child.replaceWith(...initialChildren);
+        } else {
+          const endAnchor2 = queryComment(element, `${uniqueKey}:end`) ?? nextSibling;
+          if (endAnchor2 !== null) {
+            endAnchor2.before(...initialChildren);
+          } else {
+            element.append(...initialChildren);
+          }
+        }
+        if (uniqueKey === void 0) return;
+        const startAnchor = document.createComment(`${uniqueKey}:start`);
+        if (prevSibling !== null) {
+          prevSibling.after(startAnchor);
+        } else {
+          element.prepend(startAnchor);
+        }
+        const endAnchor = document.createComment(`${uniqueKey}:end`);
+        if (nextSibling !== null) {
+          nextSibling.before(endAnchor);
+        } else {
+          element.append(endAnchor);
+        }
+        const bindText = (node, signal2) => {
+          createEffect(({ destroy }) => {
+            const result = signal2();
+            if (Array.isArray(result)) {
+              destroy();
+              bindArray(signal2);
+              return;
+            }
+            if (result instanceof DocumentFragment) {
+              destroy();
+              bindFragment(signal2);
+              return;
+            }
+            node.data = result === null ? "" : String(result);
+          });
+        };
+        const bindArray = (signal2) => {
+          createEffect(
+            ({ lastValue: oldChildren, destroy }) => {
+              const result = signal2();
+              const newChildren = asNodeList(result, element);
+              const firstChild = newChildren[0];
+              if (!Array.isArray(result) && newChildren.length === 1 && firstChild instanceof DocumentFragment) {
+                destroy();
+                bindFragment(signal2);
+                return;
+              }
+              if (newChildren.length === 1 && firstChild instanceof Text) {
+                destroy();
+                bindText(firstChild, signal2);
+                return;
+              }
+              while (startAnchor.nextSibling !== endAnchor) {
+                startAnchor.nextSibling?.remove();
+              }
+              startAnchor.after(...newChildren);
+              if (oldChildren === null) return newChildren;
+              for (const persistedChild of oldChildren) {
+                if (persistedChild instanceof Element) {
+                  const key = persistedChild.getAttribute("key");
+                  if (key === null) continue;
+                  const newChild = queryChildren(newChildren, `[key="${key}"]`);
+                  if (newChild === null) {
+                    persistedChild.remove();
+                    continue;
+                  }
+                  for (const attr of [...persistedChild.attributes]) {
+                    if (!newChild.hasAttribute(attr.name)) persistedChild.removeAttribute(attr.name);
+                  }
+                  for (const newAttr of [...newChild.attributes]) {
+                    const oldAttrValue = persistedChild.getAttribute(newAttr.name);
+                    if (oldAttrValue?.startsWith("this.__customCallbackFns")) continue;
+                    persistedChild.setAttribute(newAttr.name, newAttr.value);
+                  }
+                  newChild.replaceWith(persistedChild);
+                }
+              }
+              return newChildren;
+            },
+            null
+          );
+        };
+        const bindFragment = (signal2) => {
+          const initialFragment = signal2();
+          renderState.childrenMap.set(initialFragment, [...initialFragment.childNodes]);
+          createEffect(({ destroy }) => {
+            const result = signal2();
+            const cachedChildren = renderState.childrenMap.get(initialFragment);
+            const children = cachedChildren ?? asNodeList(result, element);
+            if (Array.isArray(result)) {
+              destroy();
+              bindArray(signal2);
+              return;
+            }
+            if (result instanceof Text) {
+              const children2 = asNodeList(result, element);
+              const text2 = children2[0];
+              destroy();
+              bindText(text2, signal2);
+              return;
+            }
+            while (startAnchor.nextSibling !== endAnchor) {
+              startAnchor.nextSibling?.remove();
+            }
+            startAnchor.after(...children);
+          });
+        };
+        if (signal !== void 0) {
+          if (Array.isArray(newValue)) {
+            bindArray(signal);
+          } else if (initialChildren instanceof DocumentFragment) {
+            bindFragment(signal);
+          } else {
+            const initialChild = initialChildren[0];
+            bindText(initialChild, signal);
+          }
+        }
+      });
+    }
+    if (child instanceof Element && child.hasAttribute(FRAGMENT_ATTRIBUTE)) {
+      const uniqueKey = child.getAttribute(FRAGMENT_ATTRIBUTE);
+      const childFragment = renderState.fragmentMap.get(uniqueKey);
+      if (childFragment !== void 0) {
+        child.replaceWith(childFragment);
+      }
+    } else if (child instanceof Element) {
+      for (const attr of [...child.attributes]) {
+        const attrName = attr.name;
+        if (SIGNAL_BINDING_REGEX.test(attr.value)) {
+          const textList = attr.value.split(SIGNAL_BINDING_REGEX);
+          let prevText = attr.value;
+          createEffect(() => {
+            let newText = "";
+            let hasNull = false;
+            let signal;
+            for (const text of textList) {
+              const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
+              if (signal === void 0) {
+                signal = uniqueKey !== text ? renderState.signalMap.get(uniqueKey) : void 0;
+                const value = signal !== void 0 ? signal() : text;
+                if (value === null) hasNull = true;
+                newText += String(value);
+              } else {
+                newText += text;
+              }
+            }
+            if (hasNull && newText === "null" || attrName.startsWith("prop-id:")) {
+              if (child.hasAttribute(attrName)) child.removeAttribute(attrName);
+            } else {
+              if (newText !== prevText) child.setAttribute(attrName, newText);
+            }
+            if (attrName.startsWith("prop-id:")) {
+              if (child.hasAttribute(attrName)) child.removeAttribute(attrName);
+              const propId = attrName.replace("prop-id:", "");
+              const propName = renderState.propertyMap.get(propId);
+              if (propName === void 0) {
+                console.error(
+                  `BRANCH:SIGNAL; Property ID "${propId}" does not exist in the property map. This is likely a problem with Thunderous. Report a bug if you see this message. https://github.com/Thunder-Solutions/Thunderous/issues`,
+                  child
+                );
+                return;
+              }
+              const newValue = hasNull && newText === "null" ? null : newText;
+              if (!(propName in child)) logPropertyWarning(propName, child);
+              child[propName] = signal !== void 0 ? signal() : newValue;
+            }
+            prevText = newText;
+          });
+        } else if (LEGACY_CALLBACK_BINDING_REGEX.test(attr.value)) {
+          const getRootNode = child.getRootNode.bind(child);
+          child.getRootNode = () => {
+            const rootNode = getRootNode();
+            return rootNode instanceof ShadowRoot ? rootNode : fragment;
+          };
+        } else if (CALLBACK_BINDING_REGEX.test(attr.value)) {
+          const textList = attr.value.split(CALLBACK_BINDING_REGEX);
+          createEffect(() => {
+            child.__customCallbackFns = child.__customCallbackFns ?? /* @__PURE__ */ new Map();
+            let uniqueKey = "";
+            for (const text of textList) {
+              const _uniqueKey = text.replace(/\{\{callback:(.+)\}\}/, "$1");
+              if (_uniqueKey !== text) uniqueKey = _uniqueKey;
+              const callback = uniqueKey !== text ? renderState.callbackMap.get(uniqueKey) : void 0;
+              if (callback !== void 0) {
+                child.__customCallbackFns.set(uniqueKey, callback);
+              }
+            }
+            if (uniqueKey !== "" && !attrName.startsWith("prop-id:")) {
+              child.setAttribute(attrName, `this.__customCallbackFns.get('${uniqueKey}')(event)`);
+            } else if (attrName.startsWith("prop-id:")) {
+              child.removeAttribute(attrName);
+              const propId = attrName.replace("prop-id:", "");
+              const propName = renderState.propertyMap.get(propId);
+              if (propName === void 0) {
+                console.error(
+                  `BRANCH:CALLBACK; Property ID "${propId}" does not exist in the property map. This is likely a problem with Thunderous. Report a bug if you see this message. https://github.com/Thunder-Solutions/Thunderous/issues`,
+                  child
+                );
+                return;
+              }
+              if (!(propName in child)) logPropertyWarning(propName, child);
+              child[propName] = child.__customCallbackFns.get(uniqueKey);
+            }
+          });
+        } else if (attrName.startsWith("prop-id:")) {
+          child.removeAttribute(attrName);
+          const propId = attrName.replace("prop-id:", "");
+          const propName = renderState.propertyMap.get(propId);
+          if (propName === void 0) {
+            console.error(
+              `BRANCH:PROP; Property ID "${propId}" does not exist in the property map. This is likely a problem with Thunderous. Report a bug if you see this message. https://github.com/Thunder-Solutions/Thunderous/issues`,
+              child
+            );
+            return;
+          }
+          if (!(propName in child)) logPropertyWarning(propName, child);
+          child[propName] = attr.value;
+        }
+      }
+      evaluateBindings(child, fragment);
+    }
+  }
+};
+var html = (strings, ...values) => {
+  let innerHTML = strings.reduce((innerHTML2, str, i) => {
+    let value = values[i] ?? "";
+    if (Array.isArray(value)) {
+      value = value.map((item) => processValue(item)).join("");
+    } else {
+      value = processValue(value);
+    }
+    innerHTML2 += str + String(value === null ? "" : value);
+    return innerHTML2;
+  }, "");
+  if (isServer) return innerHTML;
+  const props = innerHTML.match(/prop:([^=]+)/g);
+  if (props !== null) {
+    for (const prop of props) {
+      const name = prop.split(":")[1].trim();
+      const id = crypto.randomUUID();
+      const newProp = `prop-id:${id}`;
+      renderState.propertyMap.set(id, name);
+      innerHTML = innerHTML.replace(`prop:${name}`, newProp);
+    }
+  }
+  const template = document.createElement("template");
+  template.innerHTML = innerHTML;
+  const fragment = renderState.currentShadowRoot?.importNode?.(template.content, true) ?? document.importNode(template.content, true);
+  renderState.registry.upgrade(fragment);
+  evaluateBindings(fragment, fragment);
+  return fragment;
+};
+var adoptedStylesSupported = typeof window !== "undefined" && window.ShadowRoot?.prototype.hasOwnProperty("adoptedStyleSheets") && window.CSSStyleSheet?.prototype.hasOwnProperty("replace");
+var isCSSStyleSheet = (stylesheet) => {
+  return typeof CSSStyleSheet !== "undefined" && stylesheet instanceof CSSStyleSheet;
+};
+var css = (strings, ...values) => {
+  let cssText = "";
+  const signalMap = /* @__PURE__ */ new Map();
+  const signalBindingRegex = /(\{\{signal:.+\}\})/;
+  strings.forEach((string, i) => {
+    let value = values[i] ?? "";
+    if (typeof value === "function") {
+      const uniqueKey = crypto.randomUUID();
+      signalMap.set(uniqueKey, value);
+      value = isServer ? value() : `{{signal:${uniqueKey}}}`;
+    }
+    if (typeof value === "object" && value !== null) {
+      console.error("Objects are not valid in CSS values. Received:", value);
+      value = "";
+    }
+    cssText += string + String(value);
+  });
+  if (isServer) {
+    return cssText;
+  }
+  const stylesheet = adoptedStylesSupported ? new CSSStyleSheet() : document.createElement("style");
+  const textList = cssText.split(signalBindingRegex);
+  createEffect(() => {
+    const newCSSTextList = [];
+    for (const text of textList) {
+      const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
+      const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : null;
+      const newValue = signal !== null ? signal() : text;
+      const newText = String(newValue);
+      newCSSTextList.push(newText);
+    }
+    const newCSSText = newCSSTextList.join("");
+    if (isCSSStyleSheet(stylesheet)) {
+      stylesheet.replaceSync(newCSSText);
+    } else {
+      stylesheet.textContent = newCSSText;
+    }
+  });
+  return stylesheet;
+};
+
+// src/custom-element.ts
+var ANY_BINDING_REGEX = /(\{\{.+:.+\}\})/;
+var customElement = (render, options) => {
+  const _options = { ...DEFAULT_RENDER_OPTIONS, ...options };
+  const {
+    formAssociated,
+    observedAttributes: _observedAttributes,
+    attributesAsProperties,
+    attachShadow,
+    shadowRootOptions: _shadowRootOptions
+  } = _options;
+  const shadowRootOptions = { ...DEFAULT_RENDER_OPTIONS.shadowRootOptions, ..._shadowRootOptions };
+  const allOptions = { ..._options, shadowRootOptions };
+  if (isServer) {
+    const serverRender = render;
+    let _tagName2;
+    let _registry2;
+    const scopedRegistry = (() => {
+      if (shadowRootOptions.registry !== void 0 && "scoped" in shadowRootOptions.registry && shadowRootOptions.registry.scoped) {
+        return shadowRootOptions.registry;
+      }
+      return void 0;
+    })();
+    return {
+      define(tagName) {
+        _tagName2 = tagName;
+        serverDefine({
+          tagName,
+          serverRender,
+          options: allOptions,
+          scopedRegistry,
+          parentRegistry: _registry2,
+          elementResult: this
+        });
+        return this;
+      },
+      register(registry) {
+        if (_tagName2 !== void 0 && "eject" in registry && registry.scoped) {
+          console.error("Must call `register()` before `define()` for scoped registries.");
+          return this;
+        }
+        if ("eject" in registry) {
+          _registry2 = registry;
+        } else {
+          console.error("Registry must be created with `createRegistry()` for SSR.");
+        }
+        return this;
+      },
+      eject() {
+        const error = new Error("Cannot eject a custom element on the server.");
+        console.error(error);
+        throw error;
+      }
+    };
+  }
+  shadowRootOptions.registry = shadowRootOptions.customElements = shadowRootOptions.registry instanceof CustomElementRegistry ? shadowRootOptions.registry : shadowRootOptions.registry?.eject();
+  const observedAttributesSet = new Set(_observedAttributes);
+  const attributesAsPropertiesMap = /* @__PURE__ */ new Map();
+  for (const [attrName, coerce] of attributesAsProperties) {
+    observedAttributesSet.add(attrName);
+    attributesAsPropertiesMap.set(attrName, {
+      // convert kebab-case attribute names to camelCase property names
+      prop: attrName.replace(/(?<=-|_)([a-z])/g, (_, letter) => letter.toUpperCase()).replace(/(-|_)/g, ""),
+      coerce,
+      value: null
+    });
+  }
+  const observedAttributes = Array.from(observedAttributesSet);
+  class CustomElement extends HTMLElement {
+    #attributesAsPropertiesMap = new Map(attributesAsPropertiesMap);
+    #attrSignals = {};
+    #propSignals = {};
+    #attributeChangedFns = /* @__PURE__ */ new Set();
+    #connectedFns = /* @__PURE__ */ new Set();
+    #disconnectedFns = /* @__PURE__ */ new Set();
+    #adoptedCallbackFns = /* @__PURE__ */ new Set();
+    #formAssociatedCallbackFns = /* @__PURE__ */ new Set();
+    #formDisabledCallbackFns = /* @__PURE__ */ new Set();
+    #formResetCallbackFns = /* @__PURE__ */ new Set();
+    #formStateRestoreCallbackFns = /* @__PURE__ */ new Set();
+    #clientOnlyCallbackFns = /* @__PURE__ */ new Set();
+    #internals = this.attachInternals();
+    #shadowRoot = attachShadow ? this.#internals.shadowRoot ?? this.attachShadow(shadowRootOptions) : null;
+    #observer = options?.observedAttributes !== void 0 ? null : new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        const attrName = mutation.attributeName;
+        if (mutation.type !== "attributes" || attrName === null) continue;
+        if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
+        const [getter, setter] = this.#attrSignals[attrName];
+        const oldValue = getter();
+        const newValue = this.getAttribute(attrName);
+        setter(newValue);
+        for (const fn of this.#attributeChangedFns) {
+          fn(attrName, oldValue, newValue);
+        }
+      }
+    });
+    #getPropSignal = ((prop, { allowUndefined = false } = {}) => {
+      if (!(prop in this.#propSignals)) this.#propSignals[prop] = createSignal();
+      const [_getter, __setter] = this.#propSignals[prop];
+      let stackLength = 0;
+      const _setter = (newValue, options2) => {
+        stackLength++;
+        queueMicrotask(() => stackLength--);
+        if (stackLength > 999) {
+          console.error(
+            new Error(
+              `Property signal setter stack overflow detected. Possible infinite loop. Bailing out.
+
+Property: ${prop}
+
+New value: ${JSON.stringify(newValue, null, 2)}
+
+Element: <${this.tagName.toLowerCase()}>
+`
+            )
+          );
+          stackLength = 0;
+          return;
+        }
+        __setter(newValue, options2);
+      };
+      const descriptor = Object.getOwnPropertyDescriptor(this, prop);
+      if (descriptor === void 0) {
+        Object.defineProperty(this, prop, {
+          get: _getter,
+          set: _setter,
+          configurable: false,
+          enumerable: true
+        });
+      }
+      const setter = (newValue, options2) => {
+        this[prop] = newValue;
+        _setter(newValue, options2);
+      };
+      const getter = ((options2) => {
+        const value = _getter(options2);
+        if (value === void 0 && !allowUndefined) {
+          const error = new Error(
+            `Error accessing property: "${prop}"
+You must set an initial value before calling a property signal's getter.
+`
+          );
+          console.error(error);
+          throw error;
+        }
+        return value;
+      });
+      getter.getter = true;
+      const publicSignal = [getter, setter];
+      publicSignal.init = (value) => {
+        _setter(value);
+        return [getter, setter];
+      };
+      return publicSignal;
+    }).bind(this);
+    #render = (() => {
+      const root = this.#shadowRoot ?? this;
+      renderState.currentShadowRoot = this.#shadowRoot;
+      renderState.registry = shadowRootOptions.customElements ?? customElements;
+      const fragment = render({
+        elementRef: this,
+        root,
+        internals: this.#internals,
+        attributeChangedCallback: (fn) => this.#attributeChangedFns.add(fn),
+        connectedCallback: (fn) => this.#connectedFns.add(fn),
+        disconnectedCallback: (fn) => this.#disconnectedFns.add(fn),
+        adoptedCallback: (fn) => this.#adoptedCallbackFns.add(fn),
+        formAssociatedCallback: (fn) => this.#formAssociatedCallbackFns.add(fn),
+        formDisabledCallback: (fn) => this.#formDisabledCallbackFns.add(fn),
+        formResetCallback: (fn) => this.#formResetCallbackFns.add(fn),
+        formStateRestoreCallback: (fn) => this.#formStateRestoreCallbackFns.add(fn),
+        clientOnlyCallback: (fn) => this.#clientOnlyCallbackFns.add(fn),
+        getter: (fn) => {
+          const _fn = () => fn();
+          _fn.getter = true;
+          return _fn;
+        },
+        customCallback: (fn) => {
+          const key = crypto.randomUUID();
+          this.__customCallbackFns?.set(key, fn);
+          return `this.getRootNode().host.__customCallbackFns.get('${key}')(event)`;
+        },
+        attrSignals: new Proxy(
+          {},
+          {
+            get: (_, prop) => {
+              if (!(prop in this.#attrSignals)) this.#attrSignals[prop] = createSignal(null);
+              const [getter] = this.#attrSignals[prop];
+              const setter = (newValue) => this.setAttribute(prop, newValue);
+              return [getter, setter];
+            },
+            set: () => {
+              console.error("Signals must be assigned via setters.");
+              return false;
+            }
+          }
+        ),
+        propSignals: new Proxy({}, {
+          get: (_, prop) => this.#getPropSignal(prop),
+          set: () => {
+            console.error("Signals must be assigned via setters.");
+            return false;
+          }
+        }),
+        refs: new Proxy(
+          {},
+          {
+            get: (_, prop) => root.querySelector(`[ref=${prop}]`),
+            set: () => {
+              console.error("Refs are readonly and cannot be assigned.");
+              return false;
+            }
+          }
+        ),
+        adoptStyleSheet: (stylesheet) => {
+          if (!attachShadow) {
+            console.warn(
+              "Styles are only encapsulated when using shadow DOM. The stylesheet will be applied to the global document instead."
+            );
+          }
+          if (isCSSStyleSheet(stylesheet)) {
+            if (this.#shadowRoot === null) {
+              for (const rule of stylesheet.cssRules) {
+                if (rule instanceof CSSStyleRule && rule.selectorText.includes(":host")) {
+                  console.error("Styles with :host are not supported when not using shadow DOM.");
+                }
+              }
+              document.adoptedStyleSheets.push(stylesheet);
+              return;
+            }
+            this.#shadowRoot.adoptedStyleSheets.push(stylesheet);
+          } else {
+            requestAnimationFrame(() => {
+              root.appendChild(stylesheet);
+            });
+          }
+        }
+      });
+      fragment.host = this;
+      for (const fn of this.#clientOnlyCallbackFns) {
+        fn();
+      }
+      root.replaceChildren(fragment);
+      renderState.currentShadowRoot = null;
+      renderState.registry = customElements;
+    }).bind(this);
+    static get formAssociated() {
+      return formAssociated;
+    }
+    static get observedAttributes() {
+      return observedAttributes;
+    }
+    constructor() {
+      try {
+        super();
+        if (!Object.prototype.hasOwnProperty.call(this, "__customCallbackFns")) {
+          this.__customCallbackFns = /* @__PURE__ */ new Map();
+        }
+        for (const attr of this.attributes) {
+          this.#attrSignals[attr.name] = createSignal(attr.value);
+        }
+        this.#render();
+      } catch (error) {
+        const _error = new Error(
+          "Error instantiating element:\nThis usually occurs if you have errors in the function body of your component. Check prior logs for possible causes.\n",
+          { cause: error }
+        );
+        console.error(_error);
+        throw _error;
+      }
+    }
+    connectedCallback() {
+      for (const [attrName, attr] of this.#attributesAsPropertiesMap) {
+        if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
+        const propName = attr.prop;
+        const [getter] = this.#getPropSignal(propName, { allowUndefined: true });
+        let busy = false;
+        createEffect(() => {
+          if (busy) return;
+          busy = true;
+          const value = getter();
+          if (value === void 0) return;
+          if (value !== null && value !== false) {
+            this.setAttribute(attrName, String(value === true ? "" : value));
+          } else {
+            this.removeAttribute(attrName);
+          }
+          busy = false;
+        });
+      }
+      if (this.#observer !== null) {
+        this.#observer.observe(this, { attributes: true });
+      }
+      for (const fn of this.#connectedFns) {
+        fn();
+      }
+    }
+    disconnectedCallback() {
+      if (this.#observer !== null) {
+        this.#observer.disconnect();
+      }
+      for (const fn of this.#disconnectedFns) {
+        fn();
+      }
+    }
+    #attributesBusy = false;
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (this.#attributesBusy || ANY_BINDING_REGEX.test(newValue ?? "")) return;
+      const [, attrSetter] = this.#attrSignals[name] ?? [];
+      attrSetter?.(newValue);
+      const prop = this.#attributesAsPropertiesMap.get(name);
+      if (prop !== void 0) {
+        const propName = prop.prop;
+        this.#attributesBusy = true;
+        const [, propSetter] = this.#getPropSignal(propName);
+        if (prop.coerce === Boolean) {
+          const bool = newValue !== null && newValue !== "false";
+          const propValue = newValue === null ? null : bool;
+          propSetter(propValue);
+        } else {
+          const propValue = newValue === null ? null : prop.coerce(newValue);
+          propSetter(propValue);
+        }
+        this.#attributesBusy = false;
+      }
+      for (const fn of this.#attributeChangedFns) {
+        fn(name, oldValue, newValue);
+      }
+    }
+    adoptedCallback() {
+      for (const fn of this.#adoptedCallbackFns) {
+        fn();
+      }
+    }
+    formAssociatedCallback() {
+      for (const fn of this.#formAssociatedCallbackFns) {
+        fn();
+      }
+    }
+    formDisabledCallback() {
+      for (const fn of this.#formDisabledCallbackFns) {
+        fn();
+      }
+    }
+    formResetCallback() {
+      for (const fn of this.#formResetCallbackFns) {
+        fn();
+      }
+    }
+    formStateRestoreCallback() {
+      for (const fn of this.#formStateRestoreCallbackFns) {
+        fn();
+      }
+    }
+  }
+  let _tagName;
+  let _registry;
+  const elementResult = {
+    define(tagName, options2) {
+      const registry = _registry ?? customElements;
+      const nativeRegistry = "eject" in registry ? registry.eject() : registry;
+      if (nativeRegistry.get(tagName) !== void 0) {
+        console.warn(`Custom element "${tagName}" was already defined. Skipping...`);
+        return this;
+      }
+      registry.define(tagName, CustomElement, options2);
+      _tagName = tagName;
+      return this;
+    },
+    register(registry) {
+      if (_tagName !== void 0 && "eject" in registry && registry.scoped) {
+        console.error("Must call `register()` before `define()` for scoped registries.");
+        return this;
+      }
+      _registry = registry;
+      return this;
+    },
+    eject: () => CustomElement
+  };
+  return elementResult;
+};
+
+// src/registry.ts
+var createRegistry = (args) => {
+  const { scoped = false } = args ?? {};
+  const customElementMap = /* @__PURE__ */ new Map();
+  const elementResultMap = /* @__PURE__ */ new Map();
+  const customElementTags = /* @__PURE__ */ new Set();
+  const nativeRegistry = (() => {
+    if (isServer) return;
+    if (scoped) {
+      try {
+        return new CustomElementRegistry();
+      } catch {
+        console.error(
+          "The scoped custom elements polyfill was not found. Falling back to global registry.\n\nCheck `RegistryResult.scoped` at https://thunderous.dev/docs/registries for more information."
+        );
+      }
+    }
+    return customElements;
+  })();
+  return {
+    __serverCss: /* @__PURE__ */ new Map(),
+    __serverRenderOpts: /* @__PURE__ */ new Map(),
+    define(tagName, ElementResult, options) {
+      const isResult = "eject" in ElementResult;
+      const upperCaseTagName = tagName.toUpperCase();
+      if (customElementTags.has(upperCaseTagName)) {
+        console.warn(`Custom element tag name "${upperCaseTagName}" was already defined. Skipping...`);
+        return this;
+      }
+      if (isResult) {
+        if (elementResultMap.has(ElementResult)) {
+          console.warn(`${upperCaseTagName} was already defined. Skipping...`);
+          return this;
+        }
+      }
+      if (!isServer) {
+        const CustomElement2 = isResult ? ElementResult.eject() : ElementResult;
+        if (customElementMap.has(CustomElement2)) {
+          console.warn(`Custom element class "${CustomElement2.constructor.name}" was already defined. Skipping...`);
+          return this;
+        }
+        customElementMap.set(CustomElement2, upperCaseTagName);
+      }
+      if (isResult) elementResultMap.set(ElementResult, upperCaseTagName);
+      customElementTags.add(upperCaseTagName);
+      if (isServer) {
+        if (isResult) ElementResult.register(this).define(tagName, options);
+        return this;
+      }
+      const CustomElement = isResult ? ElementResult.eject() : ElementResult;
+      nativeRegistry?.define(tagName, CustomElement, options);
+      return this;
+    },
+    getTagName: (ElementResult) => {
+      const isResult = "eject" in ElementResult;
+      if (isServer) {
+        if (isResult) return elementResultMap.get(ElementResult);
+        return;
+      }
+      const CustomElement = isResult ? ElementResult.eject() : ElementResult;
+      return customElementMap.get(CustomElement);
+    },
+    getAllTagNames: () => Array.from(customElementTags),
+    eject: () => {
+      if (nativeRegistry === void 0) {
+        const error = new Error("Cannot eject a registry on the server.");
+        console.error(error);
+        throw error;
+      }
+      return nativeRegistry;
+    },
+    scoped
+  };
+};
+export {
+  clientOnlyCallback,
+  createEffect,
+  createRegistry,
+  createSignal,
+  css,
+  customElement,
+  derived,
+  html,
+  insertTemplates,
+  onServerDefine
+};