@realmorg/realm 0.0.18 → 2.0.0-alpha.2

package/dist/realm.development.js

@@ -1,2518 +0,0 @@
-/**
- * @license Realm
- * @link https://realm.codes
- * @link https://github.com/realmorg
- * @copyright Copyright (c) Realmorg
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-
-// src/constants/attrs.ts
-var RealmAttributeNames = {
-  ACTION: "action",
-  AS: "as",
-  ASYNC: "async",
-  CHILDREN: "children",
-  DEBOUNCE: "debounce",
-  DEBUG: "debug",
-  DEFER: "defer",
-  ELEMENT: "element",
-  EVERY: "every",
-  FROM: "from",
-  GLOBAL: "global",
-  HREF: "href",
-  INDEX: "index",
-  IS_LOADED: "loaded",
-  MOUNT: "mount",
-  MUTATE: "mutate",
-  NAME: "name",
-  OF: "of",
-  ONCE: "once",
-  REF: "ref",
-  REL: "rel",
-  SCRIPT_ID: "script-id",
-  SLOT: "slot",
-  SRC: "src",
-  STORAGE: "storage",
-  TO: "to",
-  TOGGLE: "toggle",
-  TYPE: "type",
-  VALUE: "value",
-  METHOD: "method",
-  HTTP_URL: "url"
-};
-var RealmMutableAttr = {
-  ATTR: "attr",
-  META: "meta",
-  SRC: "src",
-  STATE: "state"
-};
-
-// src/constants/chars.ts
-var EMPTY_STRING = "";
-var BIND_ATTR_PREFIX = "_";
-var STATE_PREFIX = "#";
-var ATTR_PREFIX = "@";
-var SOURCE_PREFIX = "$";
-var EVENT_PREFIX = "RLM:";
-var DATA_PREFIX = "data-";
-var VAR_PREFIX = "var";
-var COMMA_SEPARATOR = ",";
-var DASH_SEPARATOR = "-";
-var PIPELINE_SEPARATOR = "|";
-var COLON = ":";
-var SEMICOLON = ";";
-var LEFT_PARENTHESES = "(";
-var RIGHT_PARENTHESES = ")";
-var LEFT_BRACES = "{";
-var RIGHT_BRACES = "}";
-var DOT_NOTATION = ".";
-var META_PREFIX = "!";
-var ALL = "*";
-var RealmLogicOp = {
-  EQUALS_TO: "eq",
-  NOT_EQUALS_TO: "neq",
-  GREATER_THAN: "gt",
-  GREATER_THAN_OR_EQUALS_TO: "gte",
-  LESS_THAN: "lt",
-  LESS_THAN_OR_EQUALS_TO: "lte",
-  CONTAINS: "contains"
-};
-
-// src/constants/tags.ts
-var RealmTagNames = {
-  ALL,
-  TEMPLATE: "template",
-  EMBED: "embed",
-  SLOT: "slot",
-  WEB_APP: "web-app",
-  GLOBAL_STATE: "global-state",
-  DEFINE_ELEMENT: "define-element",
-  CUSTOM_ELEMENT: "custom-element",
-  ELEMENT_ATTR: "element-attr",
-  ELEMENT_STATE: "element-state",
-  ELEMENT_FLOW: "element-flow",
-  REPEAT_LIST: "repeat-list",
-  IS_VISIBLE: "is-visible",
-  IS_HIDDEN: "is-hidden",
-  IMPORT_ELEMENT: "import-element",
-  IMPORT_SCRIPT: "import-script",
-  IMPORT_STYLE: "import-style",
-  SCRIPT: "script",
-  LINK: "link",
-  STYLE: "style",
-  HEAD: "head"
-};
-
-// src/constants/data.ts
-var RealmMimeTypes = {
-  HTML: "text/html",
-  JSON: "application/json",
-  TEXT: "text/plain"
-};
-
-// src/utils/json.ts
-var JSONstringify = JSON.stringify;
-var JSONparse = JSON.parse;
-var JSONSafeStringify = (value = EMPTY_STRING) => typeof value === "object" ? JSONstringify(value) : `${value}`;
-var JSONSafeParse = (value) => JSONparse(JSONSafeStringify(value));
-
-// src/utils/logger.ts
-var logger = (messsages, type = "log") => console[type](...messsages);
-
-// src/constants/regx.ts
-var UPPERCASE_ALPHABET_REGEX = /([A-Z])+/g;
-var SPECIAL_CHARS_REGEX = /(?=[A-Z])|[.\-\s_]/;
-var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-var CSS_CUSTOM_SELECTOR_REGEX = isSafari ? /:host\(\[([#@][a-zA-Z0-9-_.]+?)\](\[(global)\])?(\[(eq|neq|gt|gte|lt|lte|contains)=\"(\w+?)\"\])?\)/g : /:host\(\[\\([#@][a-zA-Z0-9-_.]+?)\](\[(global)\])?(\[(eq|neq|gt|gte|lt|lte|contains)="(\w+?)"\])?\)/g;
-var DOT_NOTATION_REGEX = /[$|#|@|!]([.]?(?:\w+[.-])*\w+)/gm;
-
-// src/libs/RealmState.class.ts
-var RealmState = class {
-  #states;
-  #observers;
-  constructor() {
-    this.#states = createMap();
-    this.#observers = createSet();
-  }
-  set(stateName, value, storage) {
-    const prevValue = getMap(this.#states, stateName);
-    const newValue = typeof value === "function" ? value(prevValue) : value;
-    if (storage !== "memory" /* MEMORY */) {
-      window?.[storage]?.setItem(
-        stateName,
-        JSONSafeStringify(newValue)
-      );
-    }
-    setMap(this.#states, stateName, newValue);
-    forEach(
-      this.#observers,
-      (fn) => fn?.apply?.(this, [stateName, newValue, prevValue])
-    );
-  }
-  get(name, storage) {
-    if (storage !== "memory" /* MEMORY */) {
-      const value = window?.[storage]?.getItem(name);
-      if (value !== void 0)
-        return JSONparse(JSONstringify(value));
-    }
-    return getMap(this.#states, name);
-  }
-  async subscribe(observer) {
-    this.#observe(observer);
-    addSet(this.#observers, observer);
-  }
-  #observe(observer) {
-    forEachMap(
-      this.#states,
-      (value, stateName) => observer?.apply?.(this, [stateName, value])
-    );
-  }
-};
-
-// src/utils/string.ts
-var strTrim = (str) => str.trim();
-var strSlice = (str, start = 1, end) => {
-  if (str == null)
-    return EMPTY_STRING;
-  return str.slice(start, end);
-};
-var strSplit = (str, split) => str.split(split);
-var strToLower = (str) => str?.toLowerCase?.();
-var strReplace = (str, searchValue, replaceValue) => str.replace(searchValue, replaceValue);
-var strStartWith = (str, searchValue) => str.startsWith(searchValue);
-var strIncludes = (str, searchValue) => str.includes(searchValue);
-var toUpperCase = (str) => str.toUpperCase();
-var capitalize = (str) => {
-  if (!str)
-    return EMPTY_STRING;
-  const [first, ...rest] = strSplit(strToLower(str), EMPTY_STRING);
-  return toUpperCase(first) + arrayJoin(rest, EMPTY_STRING);
-};
-var splitChars = (str) => strSplit(
-  str?.replace(UPPERCASE_ALPHABET_REGEX, capitalize),
-  SPECIAL_CHARS_REGEX
-);
-var dash = (str) => {
-  const parts = arrayMap(splitChars(str), strToLower) ?? [];
-  const length = parts.length;
-  if (length === 0)
-    return EMPTY_STRING;
-  if (length === 1)
-    return parts.at(0);
-  return arrayJoin(parts, DASH_SEPARATOR);
-};
-var newError = (errorMessage) => new Error(errorMessage);
-
-// src/utils/object.ts
-var createMap = (map = []) => new Map(map);
-var createSet = (entries) => new Set(entries);
-var createArray = (from) => Array.from(from);
-var getObject = (isState) => (acc, item, index) => isState && index === 0 ? acc.get(item) : acc[item];
-var getValueFrom = (source, dotNotation, prefix) => {
-  if (!dotNotation)
-    return source;
-  if (!DOT_NOTATION_REGEX.test(dotNotation))
-    return dotNotation;
-  if (!!prefix && !strStartWith(dotNotation, prefix))
-    return dotNotation;
-  const isState = source instanceof RealmState;
-  return dotNotation.replace(DOT_NOTATION_REGEX, (_match, group) => {
-    const target = arraySplit(strSlice(group), DOT_NOTATION);
-    const replaceValue = arrayReduce2(target, getObject(isState), source);
-    return typeof replaceValue === "object" ? JSONstringify(replaceValue) : replaceValue;
-  });
-};
-var toDotNotation = (object, prefix = SOURCE_PREFIX) => {
-  const entries = entriesOf(object);
-  return arrayReduce2(
-    entries,
-    (acc, [key, value]) => {
-      if (typeof value === "object")
-        return arrayReduce2(
-          toDotNotation(value),
-          (acc2, item) => [
-            ...acc2,
-            `${prefix}${DOT_NOTATION}${key}${DOT_NOTATION}${item}`
-          ],
-          acc
-        );
-      return [...acc, `${prefix}${DOT_NOTATION}${key}`];
-    },
-    []
-  );
-};
-var isArray = (array) => Array.isArray(array);
-var forEach = (array, fn) => void arrayReduce2(createArray(array), (acc, item, index) => {
-  fn?.(item, index);
-  return acc;
-});
-var forEachMap = (map, fn) => map.forEach(fn);
-var forEachNode = (nodes, fn) => nodes.forEach(fn);
-var arrayReduce2 = (array, fn, initialValue) => array.reduce(fn, initialValue);
-var arrayPush = (array, value) => array.push(value);
-var arrayPop = (array) => array.pop();
-var arrayMap = (array, fn) => array.map(fn);
-var arrayJoin = (array, separator) => array.join(separator);
-var arraySplit = (str, separator) => str.split(separator);
-var arraySplice = (array, start, deleteCount, ...items) => array.splice(start, deleteCount, ...items);
-var arrayIncludes = (value, array) => array.includes(value);
-var trimArrayString = (array) => array.map((item) => item.trim());
-var someArray = (array, fn) => array.some(fn);
-var findArray = (array, fn) => array.find(fn);
-var findIndex = (array, fn) => array.findIndex(fn);
-var filterArray = (array, fn) => array.filter(fn);
-var getMap = (map, key) => map.get(key);
-var setMap = (map, key, value) => map.set(key, value);
-var addSet = (set, value) => set.add(value);
-var fromEntries = (entries) => Object.fromEntries(entries);
-var entriesOf = (object) => Object.entries(object);
-
-// src/utils/dom.ts
-var doc = document;
-var head = doc.head;
-var win = window;
-var _html = (self, html) => self.innerHTML = html;
-var _clear = (self) => (element) => _html(element ?? self, EMPTY_STRING);
-var _content = (self) => (content, element) => (element ?? self).textContent = typeof content === "object" ? JSONstringify(content) : `${content}`;
-var _attach = (self) => () => {
-  const element = self;
-  element.shadow = self.attachShadow({
-    mode: "closed",
-    slotAssignment: "manual"
-  });
-  return $shadow(element)();
-};
-var _append = (self) => (element, appendTo) => (appendTo ?? self).append(element);
-var _renderTemplate = (self) => (node) => {
-  if (!node)
-    return;
-  const $$clone = $clone(self);
-  const element = node instanceof HTMLTemplateElement ? $$clone(node).content : node;
-  _append(self)(element, $shadow(self)());
-};
-var _remove = (self) => (element) => (element ?? self).remove();
-var _replace = (self) => (newElement, targetElement) => (targetElement ?? self).replaceWith(newElement);
-var _createElement = (tagName) => doc.createElement(tagName);
-var _createFragment = () => doc.createDocumentFragment();
-var _removeAttr = (self) => (attrName, element) => (element ?? self).removeAttribute(attrName);
-var _attrs = (self) => (attributes, element) => {
-  const el = element ?? self;
-  const setAttribute = el.setAttribute.bind(el);
-  const removeAttribute = el.removeAttribute.bind(el);
-  const setDOMAttribute = (name, value) => name in el && (el[name] = value);
-  forEach(
-    attributes.filter((attr) => attr),
-    ([name, value]) => {
-      if (typeof value !== "boolean") {
-        const finalValue = JSONSafeStringify(value);
-        setAttribute(name, finalValue);
-        setDOMAttribute(name, finalValue);
-        return;
-      }
-      if (value) {
-        setAttribute(name, EMPTY_STRING);
-      } else {
-        removeAttribute(name);
-      }
-      setDOMAttribute(name, value);
-    }
-  );
-};
-var _attr = (self) => (name, value, element) => _attrs(self)([[name, value]], element);
-var _data = (self) => (name, value, element) => _attr(self)(`${DATA_PREFIX}${name}`, value, element);
-var _datas = (self) => (attributes, element) => _attrs(self)(attributes, element);
-var _slotTo = (slot, nodes) => slot && !!nodes && slot.assign(...nodes);
-var _addEvent = (self) => (name, callback, element) => (element ?? self).addEventListener(name, callback);
-var _removeEvent = (self) => (name, callback, element) => (element ?? self).removeEventListener(name, callback);
-var _addCustomEvent = (self) => (name, callback, element) => _addEvent(self)(
-  EVENT_PREFIX + name,
-  (event2) => callback?.apply(element ?? self, [event2.detail])
-);
-var _sendEvent = (self) => (name, detail, element) => (element ?? self).dispatchEvent(
-  new CustomEvent(EVENT_PREFIX + name, {
-    detail
-  })
-);
-var _debug = (self) => (slot, value, element) => {
-  const debug = $attr(element ?? self)(
-    RealmAttributeNames.DEBUG,
-    slot
-  );
-  if (debug)
-    logger([debug, value]);
-};
-var $randId = () => parseInt(
-  strReplace(Math.random().toString(), DOT_NOTATION, EMPTY_STRING)
-).toString(16);
-var $html = (element) => element?.innerHTML;
-var $name = (self) => () => self.name;
-var $id = (self) => (element) => (element ?? self).id;
-var $tagName = (self) => (element) => strToLower((element ?? self)?.tagName);
-var $clone = (self) => (element) => (element ?? self).cloneNode(true);
-var $qsString = (selector, attrs) => {
-  if (!isArray(attrs))
-    return selector;
-  return arrayReduce2(
-    attrs.filter((item) => isArray(item)),
-    (acc, [attrName, attrValue]) => {
-      const attrValueAssignment = `="${attrValue}"`;
-      if (attrName)
-        acc += `[${attrName}${attrValue ? attrValueAssignment : EMPTY_STRING}]`;
-      return acc;
-    },
-    selector
-  );
-};
-var $qs = (self) => (selector, attrs, element) => (element ?? self)?.querySelector($qsString(selector, attrs));
-var $qsAll = (self) => (selector, attrs, element) => (element ?? self)?.querySelectorAll($qsString(selector, attrs));
-var $children = (self) => (element) => createArray((element ?? self).children);
-var $nodes = (self) => (element) => createArray((element ?? self).childNodes);
-var $attrName = (attr) => attr.name;
-var $attrValue = (attr) => attr.value;
-var $attrs = (self) => (element) => createArray((element || self)?.attributes ?? []);
-var $attrsKv = (self) => (element) => arrayReduce2(
-  $attrs(self)(element),
-  (acc, attr) => {
-    acc[$attrName(attr)] = $attrValue(attr);
-    return acc;
-  },
-  {}
-);
-var $attr = (self) => (name, element) => (element || self)?.getAttribute?.(name);
-var $hasAttr = (self) => (name, element) => (element || self).hasAttribute(name);
-var $data = (self) => (name, element) => $attr(self)(`${DATA_PREFIX}${name}`, element);
-var $el = (self) => (selector, attrNameOrAttrs, attrValue) => $qs(self)(
-  selector,
-  isArray(attrNameOrAttrs) ? attrNameOrAttrs : [[attrNameOrAttrs, attrValue]]
-);
-var $els = (self) => (selector, attrNameOrAttrs, attrValue) => $qsAll(self)(
-  selector,
-  isArray(attrNameOrAttrs) ? attrNameOrAttrs : [[attrNameOrAttrs, attrValue]]
-);
-var $shadowEl = (self) => (selector, attrNameOrAttrs, attrValue) => $qs(self)(
-  selector,
-  isArray(attrNameOrAttrs) ? attrNameOrAttrs : [[attrNameOrAttrs, attrValue]],
-  $shadow(self)()
-);
-var $shadowEls = (self) => (selector, attrNameOrAttrs, attrValue) => $qsAll(self)(
-  selector,
-  isArray(attrNameOrAttrs) ? attrNameOrAttrs : [[attrNameOrAttrs, attrValue]],
-  $shadow(self)()
-);
-var $slotAttrName = (name) => `${ATTR_PREFIX}${name}`;
-var $slotStateName = (name) => `${STATE_PREFIX}${name}`;
-var $parent = (self) => (element) => (element ?? self).parentElement;
-var $parentNode = (self) => (element) => (element ?? self).parentNode;
-var $shadow = (self) => () => self.shadow;
-var $root = (self) => () => self.getRootNode();
-var $host = (self) => () => $root(self)().host;
-var DOMFrom = (string) => {
-  const domParser = new DOMParser();
-  return domParser.parseFromString(string, RealmMimeTypes.HTML);
-};
-
-// src/constants/styles.ts
-var HOST_SELECTOR = ":host";
-var RealmCSSVarConst = {
-  OPERATOR: "op",
-  COMPARATOR: "comp",
-  VALUE: "value",
-  STYLE: "style",
-  GLOBAL: "global"
-};
-
-// src/utils/logic.ts
-var isTruthy = (operator, comparator, value) => {
-  const eq = operator === RealmLogicOp.EQUALS_TO ? comparator : null;
-  const neq = operator === RealmLogicOp.NOT_EQUALS_TO ? comparator : null;
-  const gt = operator === RealmLogicOp.GREATER_THAN ? comparator : null;
-  const gte = operator === RealmLogicOp.GREATER_THAN_OR_EQUALS_TO ? comparator : null;
-  const lt = operator === RealmLogicOp.LESS_THAN ? comparator : null;
-  const lte = operator === RealmLogicOp.LESS_THAN_OR_EQUALS_TO ? comparator : null;
-  const contains = operator === RealmLogicOp.CONTAINS ? comparator : null;
-  const isStringOrBoolLike = ["true", "false"].includes(value) || isNaN(+value);
-  if (isStringOrBoolLike) {
-    return !!eq && value === eq || !!neq && value !== neq || !!contains && strIncludes(value, contains);
-  }
-  return !!eq && +value === +eq || !!neq && +value !== +neq || !!gt && +value > +gt || !!gte && +value >= +gte || !!lt && +value < +lt || !!lte && +value <= +lte;
-};
-
-// src/utils/cssom.ts
-var getStyle = (rule) => rule?.style;
-var selectorText = (rule, value) => {
-  if (!value)
-    return rule?.selectorText;
-  rule.selectorText = value;
-};
-var CSSText = (style, value) => {
-  if (!value)
-    return style.cssText;
-  style.cssText = value;
-};
-var setStyleProperty = (style, propName, propValue) => style.setProperty(propName, propValue);
-var getStyleProperty = (style, propName) => style.getPropertyValue(propName);
-var forEachCSSRules = (sheets, callback) => forEach(sheets, (sheet) => forEach(Object.values(sheet.cssRules), callback));
-var $adoptedStyleSheets = (self) => $shadow(self)().adoptedStyleSheets;
-var _attachStyle = (self) => () => {
-  const sheet = new CSSStyleSheet();
-  arrayPush($adoptedStyleSheets(self), sheet);
-  return sheet;
-};
-var _CSSvar = (name, rule, value, overwrite = true) => {
-  const varName = `${DASH_SEPARATOR}${DASH_SEPARATOR}${CSS.escape(dash(name))}`;
-  const style = getStyle(rule);
-  if (!style)
-    return varName;
-  const getProperty = () => getStyleProperty(style, varName);
-  if (value === void 0)
-    return getProperty();
-  const setProperty = () => setStyleProperty(style, varName, `${value}`);
-  if (!overwrite && !getProperty()) {
-    setProperty();
-    return;
-  }
-  setProperty();
-};
-var $CSSvar = (name) => `${VAR_PREFIX}${LEFT_PARENTHESES}${DASH_SEPARATOR}${DASH_SEPARATOR}${name}${RIGHT_PARENTHESES}`;
-var _renderStyle = (self) => (styleElement) => {
-  if (!styleElement)
-    return;
-  const cssRules = $html(styleElement);
-  const sheet = _attachStyle(self)();
-  arrayPush($adoptedStyleSheets(self), sheet);
-  sheet.replaceSync(cssRules);
-  forEachCSSRules([sheet], (rule) => {
-    const selector = selectorText(rule);
-    const matches = createArray(
-      selector?.matchAll(CSS_CUSTOM_SELECTOR_REGEX) ?? []
-    );
-    if (!matches.length)
-      return;
-    const currentRule = getStyle(rule);
-    const cssPropValue = arrayReduce2(
-      arraySplit(CSSText(currentRule), SEMICOLON),
-      (acc, style) => !style ? acc : [...acc, arrayMap(arraySplit(style, COLON), strTrim)],
-      []
-    );
-    selectorText(
-      rule,
-      strReplace(selector, CSS_CUSTOM_SELECTOR_REGEX, HOST_SELECTOR)
-    );
-    _CSSvar(
-      RealmCSSVarConst.STYLE,
-      rule,
-      arrayJoin(
-        arrayMap(cssPropValue, (item) => arrayJoin(item, COLON)),
-        PIPELINE_SEPARATOR
-      )
-    );
-    for (const match of matches) {
-      const [, mutator, _hasCondition, operatorOrGlobal, ...operators] = match;
-      const mutatorType = strStartWith(mutator, STATE_PREFIX) ? RealmMutableAttr.STATE : RealmMutableAttr.ATTR;
-      const mutatorName = strSlice(mutator);
-      _CSSvar(mutatorType, rule, mutatorName);
-      const isGlobal = operatorOrGlobal === RealmCSSVarConst.GLOBAL;
-      const cssVarPrefix = mutatorName + DASH_SEPARATOR;
-      if (isGlobal)
-        _CSSvar(cssVarPrefix + RealmCSSVarConst.GLOBAL, rule, 1);
-      const [hasOperator, operator, value] = operators ?? [];
-      if (!hasOperator)
-        return;
-      _CSSvar(cssVarPrefix + RealmCSSVarConst.OPERATOR, rule, operator);
-      _CSSvar(cssVarPrefix + RealmCSSVarConst.COMPARATOR, rule, value);
-    }
-  });
-  _remove(styleElement)();
-};
-var _addCSS = (sheet, cssRules) => sheet.insertRule(
-  arrayReduce2(
-    cssRules,
-    (acc, [selector, rules]) => {
-      acc += selector + LEFT_BRACES + arrayJoin(
-        arrayReduce2(
-          rules,
-          (acc2, [property, value]) => [
-            ...acc2,
-            arrayJoin([property, value], COLON)
-          ],
-          []
-        ),
-        SEMICOLON
-      ) + RIGHT_BRACES;
-      return acc;
-    },
-    EMPTY_STRING
-  )
-);
-var _setCSSProperty = (self) => (selector, name, value) => forEachCSSRules($adoptedStyleSheets(self), (rule) => {
-  if (selectorText(rule) !== selector)
-    return;
-  const style = rule.style;
-  if (getStyleProperty(style, name) !== value)
-    setStyleProperty(style, name, value);
-});
-var updateRuleProperty = (rule) => ([property, value]) => setStyleProperty(getStyle(rule), property, value);
-var removeRuleProperty = (rule) => ([property]) => getStyle(rule).removeProperty(property);
-var bindCSS = (element, name, value, valueType, dataType, isGlobalUpdate = false) => {
-  if (![
-    "string" /* STRING */,
-    "boolean" /* BOOLEAN */,
-    "number" /* NUMBER */
-  ].includes(valueType))
-    return;
-  const sheet = $adoptedStyleSheets(element);
-  const strValue = `${value}`;
-  forEachCSSRules(sheet, (rule) => {
-    const defaultCSSVarPrefix = (isGlobalUpdate ? RealmCSSVarConst.GLOBAL : dataType) + DASH_SEPARATOR;
-    _CSSvar(defaultCSSVarPrefix + name, rule, strValue, false);
-    const state = _CSSvar(RealmMutableAttr.STATE, rule);
-    const attr = _CSSvar(RealmMutableAttr.ATTR, rule);
-    if (!state && !attr)
-      return;
-    if (state && state !== name || attr && attr !== name)
-      return;
-    const cssVarPrefix = name + DASH_SEPARATOR;
-    _CSSvar(cssVarPrefix + RealmCSSVarConst.VALUE, rule, strValue);
-    const operator = _CSSvar(cssVarPrefix + RealmCSSVarConst.OPERATOR, rule);
-    const styles = _CSSvar(RealmCSSVarConst.STYLE, rule);
-    const cssText = arrayMap(
-      arraySplit(styles, PIPELINE_SEPARATOR),
-      (style) => arraySplit(style, COLON)
-    );
-    const hasOperator = !!operator;
-    const comparator = _CSSvar(
-      cssVarPrefix + RealmCSSVarConst.COMPARATOR,
-      rule
-    );
-    const isTrue = isTruthy(operator, comparator, strValue);
-    const isUpdateStyle = hasOperator ? isTrue : true;
-    if (!isUpdateStyle) {
-      if (!someArray(cssText, ([property]) => !!getStyle(rule)[property]))
-        return;
-      return forEach(cssText, removeRuleProperty(rule));
-    }
-    forEach(cssText, updateRuleProperty(rule));
-  });
-};
-
-// src/libs/RealmBase.class.ts
-var RealmBase = class extends HTMLElement {
-  // Element's name / tag's name
-  name;
-  // Element's random id
-  id;
-  // innerHTML cacche
-  #html;
-  // Shadow root assigned to element
-  shadow;
-  // Element's state
-  states;
-  // Default element's states and attributes
-  statesRegistry;
-  attrsRegistry;
-  // Clear HTML content
-  _clear = _clear(this);
-  // Set innerHTML
-  _html = (html, element) => {
-    const setCurrentHtml = () => this.#html = `${html}`;
-    element ? _html(element, `${html}`) : setCurrentHtml();
-  };
-  //#region manipulate DOM utility functions
-  _renderTemplate = _renderTemplate(this);
-  _renderShadow = (flowElement) => flowElement && _append(this)($clone(this)(flowElement), this.$shadow());
-  _content = _content(this);
-  _attach = _attach(this);
-  _append = _append(this);
-  _remove = _remove(this);
-  _replace = _replace(this);
-  _createElement = _createElement;
-  _createFragment = _createFragment;
-  _attrs = _attrs(this);
-  _attr = _attr(this);
-  _removeAttr = _removeAttr(this);
-  _data = _data(this);
-  _datas = _datas(this);
-  _slotTo = _slotTo;
-  _addEvent = _addEvent(this);
-  _removeEvent = _removeEvent(this);
-  _addCustomEvent = _addCustomEvent(this);
-  _sendEvent = _sendEvent(this);
-  _debug = _debug(this);
-  //#endregion
-  //#region get DOM infos utility functions
-  $html = (element) => $html(element ?? this);
-  $randId = $randId;
-  $name = $name(this);
-  $id = $id(this);
-  $tagName = $tagName(this);
-  $parent = $parent(this);
-  $parentNode = $parentNode(this);
-  $shadow = $shadow(this);
-  $root = $root(this);
-  $host = (element) => $host(element ?? this)();
-  $clone = $clone(this);
-  $qsString = $qsString;
-  $qs = $qs(this);
-  $qsAll = $qsAll(this);
-  $children = $children(this);
-  $nodes = $nodes(this);
-  $attrs = $attrs(this);
-  $attrsKv = $attrsKv(this);
-  $attr = $attr(this);
-  $hasAttr = $hasAttr(this);
-  $data = $data(this);
-  $el = $el(this);
-  $els = $els(this);
-  $shadowEl = $shadowEl(this);
-  $shadowEls = $shadowEls(this);
-  $slotAttrName = $slotAttrName;
-  $slotStateName = $slotStateName;
-  //#endregion
-  //#region CSSOM utility functions
-  _attachStyle = _attachStyle(this);
-  _renderStyle = _renderStyle(this);
-  _addCSS = _addCSS;
-  _setCSSProperty = _setCSSProperty(this);
-  _CSSvar = _CSSvar;
-  $CSSvar = $CSSvar;
-  //#endregion
-};
-
-// src/utils/timer.ts
-var timerOnce = (handler, timeout) => {
-  let timer = setTimeout(handler, timeout);
-  return [timer, () => clearTimeout(timer)];
-};
-var timerEvery = (handler, timeout) => {
-  let interval = setInterval(handler, timeout);
-  return [interval, () => clearInterval(interval)];
-};
-var reqAnim = (handler) => {
-  let req = requestAnimationFrame(handler);
-  return [req, () => cancelAnimationFrame(req)];
-};
-
-// src/libs/RealmElement.class.ts
-var RealmElement = class extends RealmBase {
-  onInit;
-  onMounted;
-  onUnmounted;
-  onAttributeChanged;
-  states = new RealmState();
-  statesRegistry = createSet();
-  attrsRegistry = createSet();
-  #attrObserver = [];
-  constructor({
-    name,
-    onInit,
-    onBeforeInit,
-    onMounted,
-    onUnmounted,
-    onAttributeChanged
-  }) {
-    super();
-    this.name = name;
-    this.id = this.$randId();
-    this.onMounted = onMounted;
-    this.onUnmounted = onUnmounted;
-    this.onAttributeChanged = onAttributeChanged;
-    onBeforeInit?.(this);
-    this._html(this.$html());
-    onInit?.(this);
-    reqAnim(() => this.onMounted?.(this));
-  }
-  subscribe(callback) {
-    arrayPush(this.#attrObserver, callback);
-  }
-  async connectedCallback() {
-    const [observeAttr] = subscribeAttrMutation(
-      this,
-      (attrName, attrValue, prevAttrValue) => {
-        forEach(
-          this.#attrObserver,
-          (callback) => callback?.(attrName, attrValue, prevAttrValue)
-        );
-        this.onAttributeChanged?.(this, attrName, attrValue, prevAttrValue);
-      }
-    );
-    observeAttr();
-  }
-  disconnectedCallback() {
-    this.onUnmounted?.(this);
-  }
-};
-
-// src/utils/element.ts
-var ElementDataTypes = /* @__PURE__ */ ((ElementDataTypes3) => {
-  ElementDataTypes3["STRING"] = "string";
-  ElementDataTypes3["NUMBER"] = "number";
-  ElementDataTypes3["BOOLEAN"] = "boolean";
-  ElementDataTypes3["ARRAY"] = "array";
-  ElementDataTypes3["OBJECT"] = "object";
-  ElementDataTypes3["HTML"] = "html";
-  ElementDataTypes3["JSON_STRING"] = "json";
-  return ElementDataTypes3;
-})(ElementDataTypes || {});
-var defineElement = ({
-  name,
-  extends: extendsTagName,
-  onBeforeRegister,
-  onRegistered,
-  onConnected,
-  ...params
-}) => () => new Promise((resolve) => {
-  const isNameValid = strIncludes(name, DASH_SEPARATOR);
-  const isDefined = customElements.get(name);
-  if (!isNameValid || isDefined)
-    throw newError(
-      `Element \`${name}\` has invalid name or already defined`
-    );
-  customElements.whenDefined(name).then(async () => {
-    onRegistered?.(name);
-    resolve(true);
-  });
-  onBeforeRegister?.(name);
-  class CustomElement extends RealmElement {
-    constructor() {
-      super({ name, ...params });
-    }
-    async connectedCallback() {
-      super.connectedCallback();
-      onConnected?.(this);
-    }
-  }
-  customElements.define(name, CustomElement, { extends: extendsTagName });
-});
-var parseValue = (type, value) => {
-  const transformValue = (defaultValue) => typeof value !== "string" ? value : JSONSafeParse(value || defaultValue);
-  const valueLookup = {
-    ["number" /* NUMBER */]: () => +value,
-    ["boolean" /* BOOLEAN */]: () => transformValue(value),
-    ["array" /* ARRAY */]: () => transformValue("[]"),
-    ["object" /* OBJECT */]: () => transformValue("{}")
-  };
-  return valueLookup?.[type]?.() ?? value;
-};
-var getElementEntries = (element, tagName = RealmTagNames.ELEMENT_ATTR) => createArray(element.$els(tagName));
-var getCustomElementAttrs = (element, tagName) => createSet(
-  arrayReduce2(
-    getElementEntries(element, tagName),
-    (acc, item) => {
-      const name = element.$attr(RealmAttributeNames.NAME, item);
-      const type = element.$attr(
-        RealmAttributeNames.TYPE,
-        item
-      );
-      const value = parseValue(type, element.$html(item));
-      const attrs = [name, type, value];
-      return [...acc, attrs];
-    },
-    []
-  )
-);
-var removeCustomElementAttrs = (element, tagName) => forEach(getElementEntries(element, tagName), (el) => element._remove(el));
-var getValueType = (slotName, registry) => findArray(
-  createArray(registry),
-  ([name]) => name === slotName
-)?.at(1);
-var bindSlot = (element, dataType, slotName, slotValue, hasGlobalAttr) => {
-  const getSlotName = () => slotName;
-  const getSlotValue = () => slotValue;
-  const getSlotValueFromObject = () => getValueFrom(slotValue, slotName);
-  const attrNameLookup = {
-    [RealmMutableAttr.STATE]: () => element.$slotStateName(slotName),
-    [RealmMutableAttr.ATTR]: () => element.$slotAttrName(slotName),
-    [RealmMutableAttr.SRC]: getSlotName,
-    [RealmMutableAttr.META]: getSlotName
-  };
-  const slotAttrName = attrNameLookup[dataType]?.();
-  const attrValueLookup = {
-    [RealmMutableAttr.STATE]: getSlotValue,
-    [RealmMutableAttr.ATTR]: getSlotValue,
-    [RealmMutableAttr.SRC]: getSlotValueFromObject,
-    [RealmMutableAttr.META]: getSlotValueFromObject
-  };
-  const slotAttrValue = attrValueLookup[dataType]?.();
-  const attrTypeLookup = {
-    [RealmMutableAttr.STATE]: getValueType(slotName, element.statesRegistry),
-    [RealmMutableAttr.ATTR]: getValueType(slotName, element.attrsRegistry)
-  };
-  const slotAttrType = attrTypeLookup[dataType];
-  forEachNode(
-    element.$shadowEls(RealmAttributeNames.SLOT, [
-      [RealmAttributeNames.NAME, slotAttrName],
-      hasGlobalAttr && [RealmAttributeNames.GLOBAL]
-    ]),
-    (shadowSlot) => {
-      if (!shadowSlot)
-        return;
-      if (!hasGlobalAttr && element.$hasAttr(RealmAttributeNames.GLOBAL, shadowSlot))
-        return;
-      const slot = element._createElement(RealmTagNames.SLOT);
-      const slotId = element.$slotStateName(element.$randId());
-      const slotAttrMap = createMap();
-      setMap(slotAttrMap, shadowSlot, RealmAttributeNames.NAME);
-      setMap(slotAttrMap, slot, RealmAttributeNames.SLOT);
-      forEach([shadowSlot, slot], (slotElement) => {
-        element._data(dataType, slotAttrName, slotElement);
-        element._attrs(
-          [
-            [getMap(slotAttrMap, slotElement), slotId],
-            hasGlobalAttr && [RealmAttributeNames.GLOBAL]
-          ],
-          slotElement
-        );
-      });
-      if (slotAttrType === "html" /* HTML */) {
-        element._html(slotAttrValue, slot);
-      } else {
-        element._content(slotAttrValue, slot);
-      }
-      element._append(slot);
-      element._slotTo(shadowSlot, [slot]);
-      element._debug(shadowSlot, slotAttrValue);
-    }
-  );
-};
-var updateSlot = (element, dataType, slotName, slotValue, isGlobalUpdate) => {
-  const attrNameLookup = {
-    [RealmMutableAttr.STATE]: element.$slotStateName(slotName),
-    [RealmMutableAttr.ATTR]: element.$slotAttrName(slotName),
-    [RealmMutableAttr.SRC]: slotName
-  };
-  const slotAttrName = attrNameLookup[dataType];
-  const attrTypeLookup = {
-    [RealmMutableAttr.STATE]: getValueType(slotName, element.statesRegistry),
-    [RealmMutableAttr.ATTR]: getValueType(slotName, element.attrsRegistry)
-  };
-  const slotAttrType = attrTypeLookup[dataType];
-  const selector = !isGlobalUpdate ? `[${DATA_PREFIX}${dataType}="${slotAttrName}"]:not([${RealmAttributeNames.GLOBAL}])` : RealmTagNames.SLOT;
-  const attrs = !isGlobalUpdate ? [] : [
-    [RealmAttributeNames.GLOBAL],
-    [`${DATA_PREFIX}${dataType}`, slotAttrName]
-  ];
-  const nodes = createArray([
-    ...element.$qsAll(selector, attrs),
-    ...element.$qsAll(
-      selector,
-      attrs,
-      isGlobalUpdate ? doc : void 0
-    )
-  ]);
-  forEach(nodes, (slot) => {
-    if (!slot)
-      return;
-    if (slotAttrType === "html" /* HTML */) {
-      element._html(slotValue, slot);
-    } else {
-      element._content(slotValue, slot);
-    }
-    element._debug(
-      element.$shadowEl(selector, [
-        ...attrs,
-        [
-          RealmAttributeNames.NAME,
-          element.$attr(RealmAttributeNames.SLOT, slot)
-        ],
-        [RealmAttributeNames.DEBUG]
-      ]),
-      slotValue
-    );
-  });
-};
-var bindAttr = (element, dataType, dataBinding, node, name, value, isGlobalUpdate) => {
-  const getValue = () => value;
-  const getSlotValueFromObject = () => getValueFrom(value, name);
-  const attrValueLookup = {
-    [RealmMutableAttr.STATE]: getValue,
-    [RealmMutableAttr.ATTR]: getValue,
-    [RealmMutableAttr.SRC]: getSlotValueFromObject,
-    [RealmMutableAttr.META]: getSlotValueFromObject
-  };
-  const attrValue = attrValueLookup[dataType]();
-  const nodeHasGlobalAttr = element.$hasAttr(RealmAttributeNames.GLOBAL, node);
-  forEach(dataBinding, ([attrName, attrSrc, isGlobalFlag]) => {
-    const shouldUpdateGlobalState = isGlobalUpdate ? isGlobalFlag : !(isGlobalFlag && !nodeHasGlobalAttr);
-    const shouldUpdate = shouldUpdateGlobalState && name === attrSrc;
-    if (shouldUpdate)
-      element._attr(attrName, attrValue, node);
-  });
-};
-var attrMutableLookup = (statesBinding = createSet(), attrsBinding = createSet(), srcDataBinding = createSet(), metasBinding = createSet()) => ({
-  [RealmMutableAttr.STATE]: statesBinding,
-  [RealmMutableAttr.ATTR]: attrsBinding,
-  [RealmMutableAttr.SRC]: srcDataBinding,
-  [RealmMutableAttr.META]: metasBinding
-});
-var bindElement = (element, dataType, dataBinding, name, value, valueType, isGlobalUpdate, isUpdate) => {
-  bindCSS(element, name, value, valueType, dataType, isGlobalUpdate);
-  forEach(
-    dataBinding,
-    ([node, ...bindings]) => bindAttr(
-      element,
-      dataType,
-      attrMutableLookup?.(...bindings)[dataType],
-      node,
-      name,
-      value,
-      isGlobalUpdate
-    )
-  );
-  if (isUpdate)
-    return updateSlot(element, dataType, name, value, isGlobalUpdate);
-  if (!isGlobalUpdate && dataType === RealmMutableAttr.STATE)
-    element.states.set(name, value);
-  return bindSlot(element, dataType, name, value, isGlobalUpdate);
-};
-var addAttrBinding = (element, attrName) => {
-  const globalAttrName = `${attrName}${COLON}${RealmAttributeNames.GLOBAL}`;
-  const isGlobal = element.$hasAttr(globalAttrName);
-  const attrSelector = isGlobal ? globalAttrName : attrName;
-  element._attr(BIND_ATTR_PREFIX + attrSelector, element.$attr(attrSelector));
-};
-var mutationObserver = (target, options) => {
-  const observer = new MutationObserver(options?.callback);
-  return [() => observer.observe(target, options), () => observer.disconnect()];
-};
-var addToBindList = (shouldAdded, bindAttrValues, attrName, attrValue, isGlobal) => shouldAdded && addSet(bindAttrValues, [attrName, attrValue, isGlobal]);
-var getElementAttrBindings = (element) => arrayReduce2(
-  createArray(element.$shadowEls(RealmTagNames.ALL)),
-  (acc, node) => {
-    const stateBindList = createSet();
-    const attrBindList = createSet();
-    const srcBindList = createSet();
-    const metaBindList = createSet();
-    const [statesBinding, attrsBinding, srcDataBinding, metasBinding] = arrayReduce2(
-      element.$attrs(node),
-      (acc2, attr) => {
-        const hasBindAttr = strStartWith($attrName(attr), BIND_ATTR_PREFIX);
-        const hasAttr = element.$hasAttr($attrName(attr), node);
-        if (hasAttr && !hasBindAttr)
-          return acc2;
-        const [attrName, global] = strSplit(
-          $attrName(attr),
-          COLON
-        );
-        const isGlobal = global === RealmAttributeNames.GLOBAL;
-        const attrValue = $attrValue(attr);
-        const slicedAttrName = strSlice(attrName);
-        const slicedAttrValue = strSlice(attrValue);
-        const isState = strStartWith(attrValue, STATE_PREFIX);
-        addToBindList(
-          isState,
-          stateBindList,
-          slicedAttrName,
-          slicedAttrValue,
-          isGlobal
-        );
-        const isAttr = strStartWith(attrValue, ATTR_PREFIX);
-        addToBindList(
-          isAttr,
-          attrBindList,
-          slicedAttrName,
-          slicedAttrValue,
-          false
-        );
-        const isSource = strStartWith(attrValue, SOURCE_PREFIX);
-        addToBindList(
-          isSource,
-          srcBindList,
-          slicedAttrName,
-          attrValue,
-          false
-        );
-        const isMeta = strStartWith(attrValue, META_PREFIX);
-        addToBindList(
-          isMeta,
-          metaBindList,
-          slicedAttrName,
-          attrValue,
-          false
-        );
-        if (isSource || isMeta)
-          element._removeAttr(attr.name, node);
-        return [stateBindList, attrBindList, srcBindList, metaBindList];
-      },
-      []
-    );
-    return [
-      ...acc,
-      [node, statesBinding, attrsBinding, srcDataBinding, metasBinding]
-    ];
-  },
-  []
-);
-var subscribeAttrMutation = (element, observer) => mutationObserver(element, {
-  attributes: true,
-  attributeOldValue: true,
-  callback: (mutationList) => {
-    for (const mutation of mutationList) {
-      if (mutation.type !== "attributes")
-        return;
-      const attrName = mutation.attributeName;
-      const attrValue = element.$attr(attrName, mutation.target);
-      const prevAttrValue = mutation.oldValue;
-      if (prevAttrValue !== attrValue) {
-        observer?.(attrName, attrValue, prevAttrValue);
-      }
-    }
-  }
-});
-var findAttrFrom = (actionArgs, comparator, isMultipleResult) => isMultipleResult ? arrayMap(
-  filterArray(actionArgs, ([argName]) => argName === comparator),
-  ([, argValue]) => argValue
-) : findArray(actionArgs, ([argName]) => argName === comparator)?.at(1);
-var getDefaultAttrValues = (element) => fromEntries(
-  arrayMap(createArray(element.attrsRegistry), ([attrName, , attrValue]) => [
-    attrName,
-    attrValue
-  ])
-);
-
-// src/elements/import-element.ts
-var IMPORT_CACHE = createMap();
-var IMPORT_STATUS = createMap();
-var importElement = defineElement({
-  name: RealmTagNames.IMPORT_ELEMENT,
-  async onBeforeInit(element) {
-    const { from, automount, as: tagAlias, ...attrs } = element.$attrsKv();
-    const hasFromAttr = !!from;
-    const [, cachedHtml] = getMap(IMPORT_CACHE, from) ?? [];
-    if (!cachedHtml && hasFromAttr) {
-      try {
-        const response = await fetch(from);
-        const html = await response.text();
-        setMap(IMPORT_CACHE, from, html);
-      } catch {
-        newError(`Failed to fetch "${from}"`);
-      }
-    }
-    const customElement2 = element.$qs(
-      RealmTagNames.CUSTOM_ELEMENT,
-      [],
-      DOMFrom(getMap(IMPORT_CACHE, from))
-    );
-    if (!customElement2)
-      return element._remove();
-    const nameAttr = element.$attr(
-      RealmAttributeNames.NAME,
-      customElement2
-    );
-    let customElementName = tagAlias ?? nameAttr;
-    if (getMap(IMPORT_STATUS, customElementName))
-      return;
-    const hasDefined = !!customElements.get(customElementName);
-    if (hasDefined)
-      customElementName = customElementName + DOT_NOTATION + element.$randId();
-    element._attr(RealmAttributeNames.NAME, customElementName, customElement2);
-    if (automount !== void 0) {
-      const mountElement = element._createElement(customElementName);
-      element._attrs(entriesOf(attrs), mountElement);
-      element._append(customElement2, doc.body);
-      element._replace(mountElement, element);
-    } else {
-      element._append(customElement2, doc.body);
-      element._remove();
-    }
-    setMap(IMPORT_STATUS, customElementName, true);
-  }
-});
-
-// src/elements/import-resource.ts
-var SCRIPT_RESOURCE_REGISTRY = createMap();
-var STYLES_RESOURCE_REGISTRY = createMap();
-var appendResource = (element, tagName, attrs, appendTo) => {
-  const createdElement = element._createElement(tagName);
-  element._attrs(attrs, createdElement);
-  element._append(createdElement, appendTo);
-};
-var importScriptElement = defineElement({
-  name: RealmTagNames.IMPORT_SCRIPT,
-  onMounted(element) {
-    const parentNode = element.$parentNode();
-    const isValidParentNode = parentNode instanceof ShadowRoot;
-    if (!isValidParentNode)
-      return;
-    const { from, local, ...attrs } = element.$attrsKv();
-    const hasAdded = getMap(SCRIPT_RESOURCE_REGISTRY, from);
-    const hasLocal = local !== void 0;
-    if (!hasAdded && !hasLocal) {
-      appendResource(
-        element,
-        RealmTagNames.SCRIPT,
-        [[RealmAttributeNames.SRC, from], ...entriesOf(attrs)],
-        head
-      );
-      setMap(SCRIPT_RESOURCE_REGISTRY, from, true);
-    }
-    element._remove();
-  }
-});
-var importStyleElement = defineElement({
-  name: RealmTagNames.IMPORT_STYLE,
-  onMounted(element) {
-    const parentNode = element.$parentNode();
-    const isValidParentNode = parentNode instanceof ShadowRoot;
-    if (!isValidParentNode)
-      return;
-    const { from, local, ...attrs } = element.$attrsKv();
-    const hasAdded = getMap(STYLES_RESOURCE_REGISTRY, from);
-    const hasLocalAttr = local !== void 0;
-    const resourceArgs = [
-      element,
-      RealmTagNames.LINK,
-      [
-        [RealmAttributeNames.HREF, from],
-        [RealmAttributeNames.REL, "stylesheet"],
-        ...entriesOf(attrs)
-      ]
-    ];
-    if (!hasAdded) {
-      appendResource.apply(null, [...resourceArgs, head]);
-      setMap(STYLES_RESOURCE_REGISTRY, from, true);
-    }
-    if (hasLocalAttr) {
-      appendResource.apply(null, [
-        ...resourceArgs,
-        element.$host().$shadow()
-      ]);
-    }
-    element._remove();
-  }
-});
-
-// src/elements/visibility-element.ts
-var getOperatorComparator = (element) => arrayReduce2(
-  [
-    RealmLogicOp.EQUALS_TO,
-    RealmLogicOp.NOT_EQUALS_TO,
-    RealmLogicOp.GREATER_THAN,
-    RealmLogicOp.GREATER_THAN_OR_EQUALS_TO,
-    RealmLogicOp.LESS_THAN,
-    RealmLogicOp.LESS_THAN_OR_EQUALS_TO,
-    RealmLogicOp.CONTAINS
-  ],
-  (acc, operator) => {
-    if (!element.$hasAttr(operator))
-      return acc;
-    return [operator, element.$attr(operator)];
-  },
-  []
-);
-var isVisibleTruthy = (element, value) => {
-  const [operator, comparator] = getOperatorComparator(element);
-  return isTruthy(operator, comparator, `${value}`);
-};
-var updateIsVisibleCSSProperty = (element, attrValue, cssVarName, isVisiblePropName, isHiddenPropName) => {
-  const hasAttrValue = element.$hasAttr(RealmAttributeNames.VALUE);
-  const isVisible = isVisibleTruthy(
-    element,
-    attrValue || hasAttrValue && attrValue === ""
-  );
-  element._setCSSProperty(
-    HOST_SELECTOR,
-    element._CSSvar(cssVarName),
-    isVisible ? isVisiblePropName : isHiddenPropName
-  );
-};
-var createVisibilityElement = (elementName, [visible, hidden]) => {
-  const displayVarName = VAR_PREFIX + DASH_SEPARATOR + $randId();
-  return defineElement({
-    name: elementName,
-    onBeforeInit(element) {
-      const [operator] = getOperatorComparator(element);
-      addAttrBinding(element, RealmAttributeNames.VALUE);
-      addAttrBinding(element, operator);
-      const slot = element._createElement(RealmTagNames.SLOT);
-      const cssRules = [
-        [
-          HOST_SELECTOR,
-          [
-            [_CSSvar(displayVarName), hidden],
-            ["display", element.$CSSvar(displayVarName)]
-          ]
-        ]
-      ];
-      element._attach();
-      element._append(slot, element.$shadow());
-      element._addCSS(element._attachStyle(), cssRules);
-      element._slotTo(slot, element.$nodes());
-    },
-    onInit(element) {
-      updateIsVisibleCSSProperty(
-        element,
-        element.$attr(RealmAttributeNames.VALUE),
-        displayVarName,
-        hidden,
-        visible
-      );
-    },
-    onAttributeChanged(element, attrName, attrValue) {
-      if (attrName !== RealmAttributeNames.VALUE)
-        return;
-      updateIsVisibleCSSProperty(
-        element,
-        attrValue,
-        displayVarName,
-        hidden,
-        visible
-      );
-    }
-  });
-};
-var VISIBLE_VALUE = "contents";
-var HIDDEN_VALUE = "none";
-var isVisibleElement = createVisibilityElement(
-  RealmTagNames.IS_VISIBLE,
-  [HIDDEN_VALUE, VISIBLE_VALUE]
-);
-var isHiddenElement = createVisibilityElement(
-  RealmTagNames.IS_HIDDEN,
-  [VISIBLE_VALUE, HIDDEN_VALUE]
-);
-
-// src/constants/flow.ts
-var FlowEventNames = {
-  TRIGGER_EVENT: "trigger-event",
-  LISTEN_EVENT: "listen-event"
-};
-var FlowRuntimeEventTypes = {
-  MOUNTED: "mounted",
-  UNMOUNTED: "unmounted",
-  ATTR_CHANGED: "attrchanged",
-  STATE_CHANGED: "statechanged",
-  ON: "on"
-};
-var FlowRuntimeMutableEventTypesLookup = {
-  [RealmMutableAttr.ATTR]: FlowRuntimeEventTypes.ATTR_CHANGED,
-  [RealmMutableAttr.STATE]: FlowRuntimeEventTypes.STATE_CHANGED
-};
-var FlowActionTypes = {
-  SET_STATE: "set-state",
-  SET_ATTR: "set-attr",
-  SET_TIMER: "set-timer",
-  SEND_EVENT: "send-event",
-  TRIGGER_ELEMENT: "trigger-element",
-  SCRIPT: "script",
-  HTTP_REQUEST: "http-request",
-  REQUEST_HEADER: "request-header",
-  REQUEST_BODY: "request-body",
-  RESPONSE_SUCCESS: "response-ok",
-  RESPONSE_ERROR: "response-fail"
-};
-var FlowMutateTypes = {
-  EQUALS_TO: "=",
-  ADD: "+",
-  SUBTRACT: "-",
-  MULTIPLY: "*",
-  DIVIDE: "/",
-  ADD_STR: "add",
-  ASSIGN: "assign",
-  PUSH: "push",
-  POP: "pop",
-  REMOVE: "remove"
-};
-var ALL_USE_FN = `${"localState" /* LOCAL_STATE */},${"globalState" /* GLOBAL_STATE */},${"event" /* EVENT */},attrs, ${"attr" /* ATTR */},$`;
-
-// src/constants/scripts.ts
-var RealmScriptTypes = {
-  REALM_MODULE: "module/realm",
-  JS: "application/javascript",
-  MODULE: "module"
-};
-
-// src/utils/script.ts
-var createScriptBlob = (script) => new Blob([script], { type: RealmScriptTypes.JS });
-var createScriptURL = (elementName, scriptId, script, params) => {
-  const fnParams = params.length ? `{ ${arrayJoin(params, ", ")} }` : "";
-  const scriptWrapper = `async (${fnParams})=>{
-${script}
-}`;
-  const scriptContent = `__REALM_ADD_CUSTOM_FLOW('${elementName}', '${scriptId}', ${scriptWrapper})`;
-  return URL.createObjectURL(createScriptBlob(scriptContent));
-};
-var attatchScriptFlow = (elementName, scriptId, script, params, onScriptLoad) => {
-  const scriptURL = createScriptURL(elementName, scriptId, script, params);
-  const scriptElement = _createElement(RealmTagNames.SCRIPT);
-  scriptElement.onload = () => {
-    onScriptLoad?.(elementName);
-    URL.revokeObjectURL(scriptURL);
-    _remove(head)(scriptElement);
-  };
-  _attrs(scriptElement)([
-    [RealmAttributeNames.SRC, scriptURL],
-    [RealmAttributeNames.TYPE, RealmScriptTypes.MODULE],
-    [RealmAttributeNames.ASYNC],
-    [RealmAttributeNames.SCRIPT_ID, scriptId]
-  ]);
-  _append(head)(scriptElement);
-};
-
-// src/utils/flow.ts
-var CUSTOM_SCRIPT_FLOW_REGISTRY = createMap();
-var FLOW_REGISTRY = createMap();
-var getScriptFlowRegistry = (elementName) => getMap(CUSTOM_SCRIPT_FLOW_REGISTRY, elementName);
-var addScriptFlow = (elementName, scriptId, fn) => setMap(getScriptFlowRegistry(elementName), scriptId, fn);
-window.__REALM_ADD_CUSTOM_FLOW = addScriptFlow;
-var registerScriptFlow = (eventFlowOwnerName) => setMap(
-  CUSTOM_SCRIPT_FLOW_REGISTRY,
-  eventFlowOwnerName,
-  createMap()
-);
-var getScriptFlow = (elementName, scriptId) => getMap(getScriptFlowRegistry(elementName), scriptId);
-var getFlowRegistry = (name) => getMap(FLOW_REGISTRY, name) ?? createMap();
-var registerFlow = (name, elementName, flow) => {
-  const flowMap = getFlowRegistry(name) ?? createMap();
-  setMap(flowMap, elementName, flow);
-  setMap(FLOW_REGISTRY, name, flowMap);
-};
-var getFlow = (name, elementName) => getMap(getFlowRegistry(name), elementName);
-var mutatesValue = ([
-  mutateType,
-  attrType,
-  attrValue,
-  attrIndex,
-  toggleArray
-]) => {
-  const isAllowedMutation = arrayIncludes(attrType, [
-    "number" /* NUMBER */,
-    "array" /* ARRAY */
-  ]);
-  return (prevValue) => {
-    if (!isAllowedMutation)
-      return attrValue;
-    const mutateLookup = {
-      [FlowMutateTypes.EQUALS_TO]: () => isArray(attrValue) ? attrValue : +attrValue,
-      [FlowMutateTypes.ADD]: () => +prevValue + +attrValue,
-      [FlowMutateTypes.SUBTRACT]: () => +prevValue - +attrValue,
-      [FlowMutateTypes.MULTIPLY]: () => +prevValue * +attrValue,
-      [FlowMutateTypes.DIVIDE]: () => +prevValue / +attrValue,
-      [FlowMutateTypes.ASSIGN]: () => {
-        const array = [...prevValue];
-        const prevValueIndex = array[+attrIndex];
-        if (prevValueIndex !== void 0)
-          array[+attrIndex] = typeof prevValueIndex === "object" ? {
-            ...prevValueIndex,
-            ...attrValue?.[0]
-          } : attrValue;
-        return array;
-      },
-      [FlowMutateTypes.PUSH]: () => arrayReduce2(
-        attrValue,
-        (acc, value) => {
-          const prevIndex = findIndex(acc, (val) => val === value);
-          if (toggleArray && prevIndex > -1) {
-            arraySplice(acc, prevIndex, 1);
-            return acc;
-          }
-          const newId = `${SOURCE_PREFIX}${SOURCE_PREFIX}${$randId()}`;
-          return [
-            ...acc,
-            typeof value === "object" ? {
-              [newId]: Symbol(newId),
-              ...value
-            } : value
-          ];
-        },
-        [...prevValue]
-      ),
-      [FlowMutateTypes.POP]: () => {
-        const array = [...prevValue];
-        arrayPop(array);
-        return array;
-      },
-      [FlowMutateTypes.REMOVE]: () => {
-        const array = [...prevValue];
-        arraySplice(array, +attrIndex, 1);
-        return array;
-      }
-    };
-    return mutateLookup?.[mutateType]?.();
-  };
-};
-var actionFlowReducer = (eventFlowOwnerName, eventOwnerElement, acc, actionElement) => {
-  const actionName = eventOwnerElement.$tagName(actionElement);
-  const actionAttrs = eventOwnerElement.$attrs(actionElement);
-  const actionContent = eventOwnerElement.$html(actionElement);
-  const actionArgs = arrayReduce2(
-    actionAttrs,
-    eventFlowReducer,
-    []
-  );
-  if (actionName === FlowActionTypes.SET_STATE) {
-    arrayPush(actionArgs, [RealmAttributeNames.VALUE, actionContent]);
-  }
-  if (actionName === RealmTagNames.SCRIPT) {
-    const { type, use = "" } = fromEntries(actionArgs);
-    const isValidScriptType = type === RealmScriptTypes.REALM_MODULE;
-    if (isValidScriptType) {
-      const scriptId = `${actionName}-${eventOwnerElement.$id()}-${eventOwnerElement.$randId()}`;
-      const dependencies = trimArrayString(
-        arraySplit(use === ALL ? ALL_USE_FN : use, COMMA_SEPARATOR)
-      );
-      arrayPush(actionArgs, [RealmAttributeNames.SCRIPT_ID, scriptId]);
-      attatchScriptFlow(
-        eventFlowOwnerName,
-        scriptId,
-        actionContent,
-        dependencies
-      );
-    }
-  }
-  if ([
-    FlowActionTypes.SET_TIMER,
-    FlowActionTypes.HTTP_REQUEST,
-    FlowActionTypes.RESPONSE_SUCCESS,
-    FlowActionTypes.RESPONSE_ERROR
-  ].includes(actionName)) {
-    const actionReducer = createActionReducer(
-      eventFlowOwnerName,
-      eventOwnerElement
-    );
-    arrayPush(actionArgs, [
-      RealmAttributeNames.ACTION,
-      arrayReduce2(
-        eventOwnerElement.$children(actionElement),
-        actionReducer(),
-        []
-      )
-    ]);
-  }
-  if ([
-    FlowActionTypes.SEND_EVENT,
-    FlowActionTypes.REQUEST_BODY
-  ].includes(actionName)) {
-    arrayPush(actionArgs, [
-      RealmAttributeNames.ACTION,
-      eventOwnerElement.$html(actionElement)
-    ]);
-  }
-  const actionFlow = [actionName, actionArgs];
-  return [...acc, actionFlow];
-};
-var createActionReducer = (eventFlowOwnerName, eventOwnerElement) => () => (acc, actionElement) => actionFlowReducer(
-  eventFlowOwnerName,
-  eventOwnerElement,
-  acc,
-  actionElement
-);
-var eventFlowReducer = (acc, attr) => [
-  ...acc,
-  [$attrName(attr), $attrValue(attr)]
-];
-var createEventReducer = () => () => (acc, attr) => eventFlowReducer(acc, attr);
-var defineFlow = ({
-  name,
-  onBeforeRegister,
-  onRegistered,
-  onApply,
-  onRemove
-}) => {
-  const registerFlowFn = async (eventOwnerName, eventOwnerElement) => {
-    const flowElements = createArray(eventOwnerElement.$els(name));
-    const attrReducer = createEventReducer();
-    const actionReducer = createActionReducer(
-      eventOwnerName,
-      eventOwnerElement
-    );
-    const flow = createSet(
-      arrayReduce2(
-        flowElements,
-        (acc, eventElement) => [
-          ...acc,
-          [
-            // @note: attributes
-            arrayReduce2(
-              eventOwnerElement.$attrs(eventElement),
-              attrReducer(),
-              []
-            ),
-            // @note: actions
-            arrayReduce2(
-              eventOwnerElement.$children(eventElement),
-              actionReducer(),
-              []
-            )
-          ]
-        ],
-        []
-      )
-    );
-    registerScriptFlow(eventOwnerName);
-    onBeforeRegister?.(eventOwnerName);
-    registerFlow(name, eventOwnerName, flow);
-    onRegistered?.(eventOwnerName, flow);
-  };
-  const flowCallback = (callback) => async (hostElement, dispatcherElement) => {
-    const flow = getFlow(name, hostElement.$tagName());
-    if (flow)
-      callback?.(flow, hostElement, dispatcherElement);
-  };
-  return [registerFlowFn, flowCallback(onApply), flowCallback(onRemove)];
-};
-
-// src/elements/global-state.ts
-var globalState = win.globalState = new RealmState();
-var GLOBAL_STATE_REGISTRY = createSet();
-var getGlobalStateRegistry = () => GLOBAL_STATE_REGISTRY;
-var findGlobalStateRegistry = (name) => findArray(
-  createArray(GLOBAL_STATE_REGISTRY),
-  ([stateName]) => stateName === name
-);
-var getGlobalStateType = (name) => findGlobalStateRegistry(name)?.at(1);
-var getGlobalStateStorage = (name) => {
-  const options = findGlobalStateRegistry(name)?.at(3);
-  return options?.storage ?? "memory" /* MEMORY */;
-};
-var getGlobalState = () => globalState;
-var getGlobalStateValue = (name) => globalState.get(name, getGlobalStateStorage(name));
-var updateGlobalState = (name, value) => globalState.set(name, value, getGlobalStateStorage(name));
-var globalStateElement = defineElement({
-  name: RealmTagNames.GLOBAL_STATE,
-  onBeforeInit(element) {
-    const [name, type, storage] = arrayMap(
-      [
-        RealmAttributeNames.NAME,
-        RealmAttributeNames.TYPE,
-        RealmAttributeNames.STORAGE
-      ],
-      (item) => element.$attr(item)
-    );
-    const value = parseValue(type, element.$html());
-    addSet(GLOBAL_STATE_REGISTRY, [name, type, value, { storage }]);
-    updateGlobalState(name, getGlobalStateValue(name) ?? value);
-  },
-  onMounted(element) {
-    element._remove();
-  }
-});
-
-// src/utils/action.ts
-var ACTIONS_REGISTRY = createMap();
-var ATTRS_REGISTRY = createMap();
-var STATE_REGISTRY = createMap();
-var setAttrMapRegistry = (attrMap, elementName, attrs) => attrs.size && setMap(attrMap, elementName, attrs);
-var setAttrRegistry = (elementName, attrs) => setAttrMapRegistry(ATTRS_REGISTRY, elementName, attrs);
-var setStateRegistry = (elementName, attrs) => setAttrMapRegistry(STATE_REGISTRY, elementName, attrs);
-var getAttrRegistry = (elementName) => getMap(ATTRS_REGISTRY, elementName) ?? createSet();
-var getStateRegistry = (elementName) => getMap(STATE_REGISTRY, elementName) ?? createSet();
-var {
-  EQUALS_TO: MutateTypeEqual,
-  REMOVE: MutateTypeRemove,
-  POP: MutateTypeArrayPop,
-  PUSH: MutateTypeArrayPush,
-  ASSIGN: MutateTypeArrayAssign,
-  ADD_STR: MutateTypeArrayAdd
-} = FlowMutateTypes;
-var {
-  MUTATE: AttrMutate,
-  INDEX: AttrIndex,
-  VALUE: AttrValue,
-  FROM: AttrFrom,
-  TOGGLE: AttrToggle
-} = RealmAttributeNames;
-var {
-  ARRAY: DataTypeArray,
-  HTML: DataTypeHTML,
-  BOOLEAN: DataTypeBool
-} = ElementDataTypes;
-var getRawSourceFrom = (element, value, sourceType, event2) => {
-  const strValue = `${value}`;
-  const eventLookup = {
-    ["event" /* EVENT */]: () => getValueFrom(event2, strValue),
-    ["globalState" /* GLOBAL_STATE */]: () => getValueFrom(getGlobalState(), strValue),
-    ["localState" /* LOCAL_STATE */]: () => getValueFrom(element.states, strValue),
-    ["event:attr" /* EVENT_ATTR */]: () => {
-      const attrOwner = event2.target;
-      const attrs = element.$attrsKv(attrOwner);
-      return getValueFrom(attrs, strValue);
-    },
-    ["attr" /* ATTR */]: () => getValueFrom(
-      {
-        ...getDefaultAttrValues(element),
-        ...element.$attrsKv(element)
-      },
-      strValue
-    )
-  };
-  return eventLookup?.[sourceType]?.();
-};
-var getSourceFrom = (element, type, value, sourceType, event2) => {
-  const getRawValue = () => getRawSourceFrom(element, value, sourceType, event2);
-  const eventLookup = {
-    ["event" /* EVENT */]: () => parseValue(type, getRawValue()),
-    ["event:attr" /* EVENT_ATTR */]: getRawValue,
-    ["attr" /* ATTR */]: getRawValue,
-    ["globalState" /* GLOBAL_STATE */]: () => parseValue(type, getRawValue()),
-    ["localState" /* LOCAL_STATE */]: () => parseValue(type, getRawValue())
-  };
-  return eventLookup?.[sourceType]?.() ?? parseValue(type, value);
-};
-var findAttr = (actionArgs, attrName, fallbackAttr, isMultipleResult = false) => {
-  const attr = findAttrFrom(actionArgs, attrName, isMultipleResult);
-  const hasAttr = attr !== void 0;
-  return [hasAttr ? attr : fallbackAttr, hasAttr];
-};
-var getMutatedValue = (element, actionArgs, attrType, event2) => {
-  const [mutateAttr] = findAttr(
-    actionArgs,
-    AttrMutate,
-    MutateTypeEqual
-  );
-  const [indexAttr, hasIndexAttr] = findAttr(actionArgs, AttrIndex);
-  const [valueAttr, hasValueAttr] = findAttr(
-    actionArgs,
-    AttrValue
-  );
-  const isDataTypeArray = attrType === DataTypeArray;
-  const isDataTypeHTML = attrType === DataTypeHTML;
-  const isDataTypeBool = attrType === DataTypeBool;
-  const isMutateTypeEqualsTo = mutateAttr === MutateTypeEqual;
-  const isMutateTypeArrayRemove = mutateAttr === MutateTypeRemove;
-  const isMutateTypeArrayPop = mutateAttr === MutateTypeArrayPop;
-  const isMutateTypeArrayPush = mutateAttr === MutateTypeArrayPush;
-  const isMutateTypeArrayAdd = mutateAttr === MutateTypeArrayAdd;
-  const isMutateTypeArrayAssign = mutateAttr === MutateTypeArrayAssign;
-  const isMutationArrayNotRequiredIndex = isMutateTypeArrayPush || isMutateTypeEqualsTo;
-  const isMutationArrayRequiredIndex = isMutateTypeArrayRemove || isMutateTypeArrayAdd || isMutateTypeArrayAssign;
-  const isStringMutationAllowed = !isDataTypeArray && hasValueAttr;
-  const isHTMLMutationAllowed = isDataTypeHTML;
-  const isArrayMutationAllowed = isDataTypeArray && (isMutateTypeArrayPop || isMutationArrayRequiredIndex && hasIndexAttr || isMutationArrayNotRequiredIndex && hasValueAttr);
-  const isMutationAllowed = isStringMutationAllowed || isHTMLMutationAllowed || isArrayMutationAllowed;
-  if (!isMutationAllowed)
-    return;
-  const [sourceType] = findAttr(actionArgs, AttrFrom);
-  const attrIndex = hasIndexAttr ? getSourceFrom(element, attrType, indexAttr, sourceType, event2) : "-1";
-  let attrValue = getSourceFrom(
-    element,
-    attrType,
-    valueAttr,
-    sourceType,
-    event2
-  );
-  const [, hasToggleAttr] = findAttr(actionArgs, AttrToggle);
-  const isToggleBoolean = hasToggleAttr && isDataTypeBool;
-  if (isToggleBoolean)
-    attrValue = !attrValue;
-  const mutatedValue = mutatesValue([
-    mutateAttr,
-    attrType,
-    attrValue,
-    +attrIndex,
-    hasToggleAttr
-  ]);
-  return mutatedValue;
-};
-var getAttrType = (name, attrEntries) => arrayReduce2(
-  createArray(attrEntries),
-  (acc, [attrName, attrType]) => attrName === name ? attrType : acc
-);
-var doAction = (element, elementName, actions) => (eventType, eventName, event2) => forEach(actions, ([actionName, actionArgs]) => {
-  const [requiredAttrs = [], triggerAction] = getMap(
-    ACTIONS_REGISTRY,
-    actionName
-  );
-  const isValidAction = someArray(requiredAttrs, (attrName) => {
-    const [, hasAttr] = findAttr(actionArgs, attrName);
-    return hasAttr;
-  });
-  if (requiredAttrs.length && !isValidAction)
-    return;
-  return triggerAction?.(
-    element,
-    elementName,
-    actionArgs,
-    event2,
-    eventType,
-    eventName
-  );
-});
-var actionTrigger = (element, elementName) => (actions) => doAction(element, elementName, actions);
-var createActionTrigger = (element) => actionTrigger(element, element.$name());
-var defineAction = ({ name, requiredAttrs, onTrigger }) => () => setMap(ACTIONS_REGISTRY, name, [requiredAttrs, onTrigger]);
-
-// src/actions/http-request.ts
-var HttpMethod = {
-  GET: "GET",
-  POST: "POST",
-  PUT: "PUT",
-  DELETE: "DELETE",
-  PATCH: "PATCH"
-};
-var ResponseType = {
-  JSON: "json" /* JSON_STRING */,
-  HTML: "html" /* HTML */,
-  TEXT: "text"
-};
-var httpRequestAction = defineAction({
-  name: FlowActionTypes.HTTP_REQUEST,
-  async onTrigger(element, elementName, actionArgs, $event, eventType, eventName) {
-    const [urlAttr, hasUrlAttr] = findAttr(
-      actionArgs,
-      RealmAttributeNames.HTTP_URL
-    );
-    if (!hasUrlAttr)
-      throw newError(
-        `Missing "${RealmAttributeNames.HTTP_URL}" attribute on <${FlowActionTypes.HTTP_REQUEST} />`
-      );
-    const [actionAttrs] = findAttr(
-      actionArgs,
-      RealmAttributeNames.ACTION
-    );
-    const [responseResponseOkAttr = [], hasResponseOkAttr] = findAttr(actionAttrs, FlowActionTypes.RESPONSE_SUCCESS);
-    const [responseOkActions, hasResponseOkActions] = findAttr(
-      responseResponseOkAttr,
-      RealmAttributeNames.ACTION
-    );
-    const [responseResponseFailAttr = [], hasResponseFailAttr] = findAttr(actionAttrs, FlowActionTypes.RESPONSE_ERROR);
-    const [responseFailActions, hasResponseFailActions] = findAttr(responseResponseFailAttr, RealmAttributeNames.ACTION);
-    const isValidHttpRequest = hasResponseOkAttr || hasResponseFailAttr;
-    if (!isValidHttpRequest)
-      return;
-    const [method = HttpMethod.GET] = findAttr(
-      actionArgs,
-      RealmAttributeNames.METHOD
-    );
-    const [asAttr = ResponseType.TEXT] = findAttr(
-      actionArgs,
-      RealmAttributeNames.AS
-    );
-    const [headersAttrs = []] = findAttr(
-      actionAttrs,
-      FlowActionTypes.REQUEST_HEADER,
-      [],
-      true
-    );
-    const headers = new Headers();
-    forEach(headersAttrs, (headerAttr) => {
-      const header = fromEntries(headerAttr);
-      headers.set(
-        header[RealmAttributeNames.NAME],
-        header[RealmAttributeNames.VALUE]
-      );
-    });
-    const [bodyAttr, hasBodyAttr] = findAttr(
-      actionAttrs,
-      FlowActionTypes.REQUEST_BODY
-    );
-    let body;
-    if (hasBodyAttr) {
-      const [bodyContent, hasBodyContent] = findAttr(
-        bodyAttr,
-        RealmAttributeNames.ACTION
-      );
-      if (hasBodyAttr && hasBodyContent)
-        body = bodyContent;
-      const [bodyValueAttr, hasBodyValueAttr] = findAttr(
-        bodyAttr,
-        RealmAttributeNames.VALUE
-      );
-      const [bodyFromAttr, hasBodyFromAttr] = findAttr(
-        bodyAttr,
-        RealmAttributeNames.FROM
-      );
-      if (hasBodyValueAttr && hasBodyFromAttr) {
-        body = getRawSourceFrom(element, bodyValueAttr, bodyFromAttr, $event);
-      }
-    }
-    const doActionWrapper = (responseAction, $event2) => doAction(element, elementName, responseAction)(
-      eventName,
-      eventType,
-      $event2
-    );
-    try {
-      const response = await fetch(urlAttr, {
-        body,
-        method,
-        headers
-      });
-      if (!response.ok)
-        throw newError(`[${response.status}] ${urlAttr}`);
-      if (!hasResponseOkActions)
-        return;
-      const getTextResponse = () => response.text();
-      const valueLookup = {
-        [ResponseType.JSON]: () => response.json(),
-        [ResponseType.HTML]: getTextResponse,
-        [ResponseType.TEXT]: getTextResponse
-      };
-      const responseValue = await valueLookup?.[asAttr]?.();
-      doActionWrapper(responseOkActions, responseValue);
-    } catch (err) {
-      if (!hasResponseFailActions)
-        return;
-      doActionWrapper(responseFailActions, {
-        message: "[ERROR] " + err?.message
-      });
-    }
-  }
-});
-
-// src/actions/script-flow.ts
-var getScriptArgs = (element, $event) => {
-  event = void 0;
-  const attrs = {
-    ...getDefaultAttrValues(element),
-    ...element.$attrsKv()
-  };
-  const getShadowArgs = (refName) => [
-    EMPTY_STRING,
-    [[RealmAttributeNames.REF, refName]]
-  ];
-  return [
-    {
-      $: element,
-      attr: {
-        get: (name) => element.$attr(name) ?? attrs?.[name],
-        set: element._attr
-      },
-      refs: (refName) => element.$shadowEls.apply(null, getShadowArgs(refName)),
-      ref: (refName) => element.$shadowEl.apply(null, getShadowArgs(refName)),
-      attrs: element.$attrsKv(),
-      localState: element.states,
-      globalState: getGlobalState(),
-      event: $event
-    }
-  ];
-};
-var scriptAction = defineAction({
-  name: FlowActionTypes.SCRIPT,
-  requiredAttrs: [RealmAttributeNames.SCRIPT_ID],
-  onTrigger(element, elementName, actionArgs, event2) {
-    const [scriptIdAttr] = findAttr(
-      actionArgs,
-      RealmAttributeNames.SCRIPT_ID
-    );
-    const eventValue = event2?.target?.[RealmAttributeNames.VALUE];
-    const waitForScriptLoaded = () => reqAnim(() => {
-      const scriptFlow = getScriptFlow(elementName, scriptIdAttr);
-      const isScriptLoaded = !!scriptFlow;
-      if (!isScriptLoaded)
-        return waitForScriptLoaded();
-      if (eventValue !== void 0 && !!event2?.target)
-        event2.target[RealmAttributeNames.VALUE] = eventValue;
-      scriptFlow?.apply(element, getScriptArgs(element, event2));
-    });
-    waitForScriptLoaded();
-  }
-});
-
-// src/actions/send-event.ts
-var sendEventAction = defineAction({
-  name: FlowActionTypes.SEND_EVENT,
-  requiredAttrs: [RealmAttributeNames.NAME],
-  onTrigger(element, _elementName, actionArgs, $event) {
-    const [eventNameAttr] = findAttr(
-      actionArgs,
-      RealmAttributeNames.NAME
-    );
-    const [targetAttr, hasTargetAttr] = findAttr(
-      actionArgs,
-      RealmAttributeNames.TO
-    );
-    const [parentTargetAttr, hasParentTargetAttr] = findAttr(
-      actionArgs,
-      RealmAttributeNames.TO + COLON + "parent"
-    );
-    const [typeAttr, hasTypeAttr] = findAttr(
-      actionArgs,
-      RealmAttributeNames.TYPE
-    );
-    const [valueAttr, hasValueAttr] = findAttr(
-      actionArgs,
-      RealmAttributeNames.VALUE
-    );
-    const [fromAttr, hasFromAttr] = findAttr(
-      actionArgs,
-      RealmAttributeNames.FROM
-    );
-    const [actionAttr] = findAttr(
-      actionArgs,
-      RealmAttributeNames.ACTION
-    );
-    const hasValueFromAttr = hasValueAttr && hasFromAttr;
-    const getValue = () => getSourceFrom(element, typeAttr, valueAttr, fromAttr, $event) || valueAttr;
-    const eventDetailExtendedTypeLookup = {
-      ["html" /* HTML */]: () => actionAttr,
-      ["json" /* JSON_STRING */]: () => JSONSafeParse(actionAttr)
-    };
-    const selector = [EMPTY_STRING, RealmAttributeNames.REF, targetAttr];
-    const eventName = FlowRuntimeEventTypes.ON + COLON + eventNameAttr;
-    let eventDetail = $event;
-    if (hasTypeAttr)
-      eventDetail = !hasValueFromAttr ? eventDetailExtendedTypeLookup[typeAttr]?.() ?? valueAttr : getValue();
-    let targetElements = [element];
-    if (hasTargetAttr) {
-      targetElements = createArray(element.$shadowEls.apply(null, selector));
-    }
-    if (hasParentTargetAttr) {
-      const parentElement = element.$host();
-      targetElements = [parentElement];
-      if (parentTargetAttr !== EMPTY_STRING) {
-        targetElements = createArray(
-          parentElement.$shadowEls.apply(null, selector)
-        );
-      }
-    }
-    forEach(
-      targetElements,
-      (targetElement) => targetElement._sendEvent(eventName, eventDetail)
-    );
-  }
-});
-
-// src/actions/set-action.ts
-var setStateAction = defineAction({
-  name: FlowActionTypes.SET_STATE,
-  requiredAttrs: [RealmAttributeNames.NAME],
-  onTrigger(element, _elementName, actionArgs, event2) {
-    const updateLocalState = (name, value2) => element.states.set(name, value2);
-    const [nameAttr] = findAttr(actionArgs, RealmAttributeNames.NAME);
-    const [, hasGlobalAttr] = findAttr(actionArgs, RealmAttributeNames.GLOBAL);
-    const attrType = hasGlobalAttr ? getGlobalStateType(nameAttr) : getAttrType(nameAttr, element.statesRegistry);
-    const updateState = hasGlobalAttr ? updateGlobalState : updateLocalState;
-    const value = getMutatedValue(element, actionArgs, attrType, event2);
-    updateState(nameAttr, value);
-  }
-});
-var setAttrAction = defineAction({
-  name: FlowActionTypes.SET_ATTR,
-  requiredAttrs: [RealmAttributeNames.NAME],
-  onTrigger(element, _elementName, actionArgs, event2) {
-    const [nameAttr] = findAttr(actionArgs, RealmAttributeNames.NAME);
-    const attrType = getAttrType(nameAttr, element.attrsRegistry);
-    const mutatedValue = getMutatedValue(element, actionArgs, attrType, event2);
-    const prevValue = parseValue(attrType, element.$attr(nameAttr));
-    const value = mutatedValue(prevValue);
-    element._attr(nameAttr, `${value}`);
-  }
-});
-
-// src/actions/set-timer.ts
-var setTimerAction = defineAction({
-  name: FlowActionTypes.SET_TIMER,
-  requiredAttrs: [RealmAttributeNames.ONCE, RealmAttributeNames.EVERY],
-  onTrigger(element, elementName, actionArgs, event2, eventType, eventName) {
-    const [actionAttr, hasActionAttr] = findAttr(
-      actionArgs,
-      RealmAttributeNames.ACTION
-    );
-    if (!hasActionAttr)
-      return;
-    const [onceAttr, hasOnceAttr] = findAttr(
-      actionArgs,
-      RealmAttributeNames.ONCE
-    );
-    const [everyAttr, hasEveryAttr] = findAttr(
-      actionArgs,
-      RealmAttributeNames.EVERY
-    );
-    const doTimer = () => doAction(element, elementName, actionAttr)(eventName, eventType, event2);
-    if (hasOnceAttr) {
-      timerOnce(doTimer, +onceAttr);
-    } else if (hasEveryAttr) {
-      timerEvery(doTimer, +everyAttr);
-    }
-  }
-});
-
-// src/actions/trigger-element.ts
-var triggerElementAction = defineAction({
-  name: FlowActionTypes.TRIGGER_ELEMENT,
-  onTrigger(element, _elementName, actionArgs, event2) {
-    forEach(
-      actionArgs,
-      ([actionName, selector]) => forEachNode(
-        element.$shadowEls(EMPTY_STRING, [[RealmAttributeNames.REF, selector]]),
-        (el) => el?.[actionName]?.(event2)
-      )
-    );
-  }
-});
-
-// src/flows/listen-event.ts
-var dispatchEvent = (isRemoveEvent) => (dispatcherElement, eventType, eventName, actions) => {
-  const hasEventName = !!eventName;
-  const eventCaller = isRemoveEvent ? dispatcherElement._removeEvent : dispatcherElement._addCustomEvent;
-  const isCustomEvent = eventType === FlowRuntimeEventTypes.ON;
-  const finalEventName = isCustomEvent ? FlowRuntimeEventTypes.ON + COLON + eventName : eventType;
-  eventCaller(finalEventName, (event2) => {
-    if (!isCustomEvent && hasEventName && eventName !== event2[0])
-      return;
-    reqAnim(
-      () => dispatcherElement._sendEvent(FlowEventNames.LISTEN_EVENT, [
-        eventType,
-        eventName,
-        actions,
-        event2
-      ])
-    );
-  });
-};
-var applyEventListener = (flow, hostElement, applyEventCallback) => forEach(
-  flow,
-  ([attrs, actions]) => forEach(
-    attrs,
-    ([eventType, eventName]) => applyEventCallback(hostElement, eventType, eventName, actions)
-  )
-);
-var listenEventFlow = defineFlow({
-  name: FlowEventNames.LISTEN_EVENT,
-  async onApply(flow, hostElement, dispatcherElement) {
-    applyEventListener(flow, dispatcherElement ?? hostElement, dispatchEvent());
-  },
-  async onRemove(flow, hostElement, dispatcherElement) {
-    applyEventListener(
-      flow,
-      dispatcherElement ?? hostElement,
-      dispatchEvent(true)
-    );
-  }
-});
-
-// src/flows/trigger-event.ts
-var sendTriggerEvent = (dispatcherElement, debounceTimer, debounceTime, eventName, actions) => (event2) => {
-  const [, clearTimeout2] = debounceTimer || [];
-  clearTimeout2?.();
-  if (debounceTime > 0) {
-    const eventValue = event2?.target?.[RealmAttributeNames.VALUE];
-    debounceTimer = timerOnce(() => {
-      if (eventValue !== void 0 && !!event2?.target)
-        event2.target[RealmAttributeNames.VALUE] = eventValue;
-      dispatcherElement._sendEvent(FlowEventNames.TRIGGER_EVENT, [
-        EMPTY_STRING,
-        eventName,
-        actions,
-        event2
-      ]);
-    }, debounceTime);
-    return;
-  }
-  return dispatcherElement._sendEvent(FlowEventNames.TRIGGER_EVENT, [
-    EMPTY_STRING,
-    eventName,
-    actions,
-    event2
-  ]);
-};
-var dispatchEvent2 = (hostElement, isRemoveEvent) => (dispatcherElement, debounceTime, eventName, actions) => (listenerElement) => {
-  let debounceTimer;
-  const eventCaller = isRemoveEvent ? dispatcherElement._removeEvent : dispatcherElement._addEvent;
-  eventCaller(
-    eventName,
-    sendTriggerEvent(
-      hostElement,
-      debounceTimer,
-      debounceTime,
-      eventName,
-      actions
-    ),
-    listenerElement
-  );
-};
-var applyTriggerEvent = (flow, hostElement, applyEventCallback) => forEach(flow, ([attrs, actions]) => {
-  const debounceTime = +findAttrFrom(attrs, RealmAttributeNames.DEBOUNCE);
-  forEach(attrs, ([attrName, attrValue]) => {
-    if (attrName === RealmAttributeNames.DEBOUNCE)
-      return;
-    forEachNode(
-      hostElement.$shadowEls(
-        EMPTY_STRING,
-        RealmAttributeNames.REF,
-        attrValue
-      ),
-      applyEventCallback(hostElement, debounceTime, attrName, actions)
-    );
-  });
-});
-var triggerEventFlow = defineFlow({
-  name: FlowEventNames.TRIGGER_EVENT,
-  async onApply(flow, hostElement, dispatcherElement) {
-    applyTriggerEvent(
-      flow,
-      dispatcherElement ?? hostElement,
-      dispatchEvent2(hostElement)
-    );
-  },
-  async onRemove(flow, hostElement, dispatcherElement) {
-    applyTriggerEvent(
-      flow,
-      dispatcherElement ?? hostElement,
-      dispatchEvent2(hostElement, true)
-    );
-  }
-});
-
-// src/elements/element-flow.ts
-var eventFlowList = [listenEventFlow, triggerEventFlow];
-var actionList = [
-  httpRequestAction,
-  scriptAction,
-  sendEventAction,
-  setAttrAction,
-  setStateAction,
-  setTimerAction,
-  triggerElementAction
-];
-var elementFlow = defineElement({
-  name: RealmTagNames.ELEMENT_FLOW,
-  async onBeforeInit(element) {
-    const parentElement = element.$parent();
-    if (!parentElement)
-      return;
-    const eventFlowOwnerName = element.$attr(
-      RealmAttributeNames.NAME,
-      parentElement
-    );
-    for (const registerAction of actionList)
-      await registerAction();
-    for (const [registerEventFlow] of eventFlowList)
-      await registerEventFlow(eventFlowOwnerName, element);
-  },
-  async onMounted(element) {
-    const parentNode = element.$parentNode();
-    const isValidParentNode = parentNode instanceof ShadowRoot;
-    if (!isValidParentNode)
-      return;
-    const hostElement = element.$host();
-    for (const [, applyEventFlow] of eventFlowList)
-      await applyEventFlow(hostElement);
-    element._remove();
-  }
-});
-
-// src/elements/repeat-list.ts
-var repeatListElement = defineElement({
-  name: RealmTagNames.REPEAT_LIST,
-  onBeforeInit(element) {
-    const fragment = element._createFragment();
-    forEach(element.$nodes(), (node) => {
-      element._append(element.$clone(node), fragment);
-      element._remove(node);
-    });
-    element._attach();
-    element._clear();
-    const hostElement = element.$host();
-    if (!hostElement)
-      return;
-    const ofAttr = element.$attr(RealmAttributeNames.OF);
-    const dataSource = strSlice(ofAttr);
-    if (!dataSource)
-      return;
-    const hostElementStates = hostElement?.states;
-    const hostElementStatesRegistry = hostElement.statesRegistry;
-    const hostElementAttrsRegistry = hostElement.attrsRegistry;
-    const removeElementFlow = async () => {
-      for (const [, , removeEventFlow] of eventFlowList)
-        await removeEventFlow(hostElement, element);
-    };
-    const updateElementFlow = async () => {
-      for (const [, applyEventFlow] of eventFlowList)
-        await applyEventFlow(hostElement, element);
-    };
-    const updateIterableContent = (entries) => {
-      const elementShadow = element.$shadow();
-      element._clear();
-      element._clear(elementShadow);
-      forEach(entries, (value, index) => {
-        element._append(
-          element.$clone(fragment),
-          elementShadow
-        );
-        const elementAttrBindings2 = getElementAttrBindings(element);
-        forEach(toDotNotation(value), (mutateName) => {
-          bindElement(
-            element,
-            RealmMutableAttr.SRC,
-            elementAttrBindings2,
-            mutateName,
-            value,
-            void 0,
-            false
-          );
-        });
-        const meta = { index, length: entries.length };
-        forEach(
-          toDotNotation(meta, META_PREFIX),
-          (name) => bindElement(
-            element,
-            RealmMutableAttr.META,
-            elementAttrBindings2,
-            name,
-            meta,
-            void 0,
-            false
-          )
-        );
-      });
-      const elementAttrBindings = getElementAttrBindings(element);
-      forEach(
-        createArray([
-          [hostElementStatesRegistry, RealmMutableAttr.STATE],
-          [hostElementAttrsRegistry, RealmMutableAttr.ATTR]
-        ]),
-        ([registry, dataType]) => forEach(registry, ([mutateName]) => {
-          const valueLookup = {
-            [RealmMutableAttr.ATTR]: () => hostElement.$attr(mutateName),
-            [RealmMutableAttr.STATE]: () => hostElementStates.get(mutateName)
-          };
-          const valueType = getAttrType(mutateName, registry);
-          bindElement(
-            element,
-            dataType,
-            elementAttrBindings,
-            mutateName,
-            valueLookup[dataType](),
-            valueType,
-            false
-          );
-        })
-      );
-    };
-    forEach(
-      createArray([
-        [hostElement, RealmMutableAttr.ATTR],
-        [hostElementStates, RealmMutableAttr.STATE],
-        [getGlobalState(), RealmMutableAttr.STATE, true]
-      ]),
-      ([mutator, mutateType, isGlobalState]) => {
-        mutator.subscribe(
-          async (mutatorName, value) => {
-            const isValidIterableSource = isArray(value) && mutatorName === dataSource;
-            if (!isValidIterableSource)
-              return bindElement(
-                element,
-                mutateType,
-                getElementAttrBindings(element),
-                mutatorName,
-                value,
-                void 0,
-                isGlobalState,
-                true
-              );
-            await removeElementFlow();
-            updateIterableContent(value);
-            await updateElementFlow();
-          }
-        );
-      }
-    );
-  }
-});
-
-// src/elements/web-app.ts
-var webAppElement = defineElement({
-  name: RealmTagNames.WEB_APP,
-  onMounted(element) {
-    element._attr(RealmAttributeNames.IS_LOADED, true);
-  }
-});
-
-// src/elements/core-element.ts
-var HTML_REGISTRY = createMap();
-var STYLE_REGISTRY = createMap();
-var ELEMENT_FLOW_REGISTRY = createMap();
-var SCRIPT_REGISTRY = createMap();
-var LINK_STYLE_REGISTRY = createMap();
-var registerElement = (elementName) => defineElement({
-  name: elementName,
-  onBeforeRegister() {
-    const element = $el(doc)(
-      RealmTagNames.CUSTOM_ELEMENT,
-      RealmAttributeNames.NAME,
-      elementName
-    );
-    const template = $el(element)(
-      RealmTagNames.TEMPLATE
-    );
-    setMap(HTML_REGISTRY, elementName, template);
-    if (template) {
-      forEachNode(
-        $els(template.content)(RealmTagNames.STYLE),
-        (style) => setMap(STYLE_REGISTRY, elementName, style)
-      );
-    }
-    forEach(
-      [
-        [RealmTagNames.ELEMENT_FLOW, ELEMENT_FLOW_REGISTRY],
-        [RealmTagNames.IMPORT_SCRIPT, SCRIPT_REGISTRY],
-        [RealmTagNames.IMPORT_STYLE, LINK_STYLE_REGISTRY]
-      ],
-      ([tagName, registry]) => {
-        setMap(
-          registry,
-          elementName,
-          createSet(createArray($els(element)(tagName)))
-        );
-      }
-    );
-  },
-  onBeforeInit(element) {
-    element._attach();
-    element._renderStyle(getMap(STYLE_REGISTRY, elementName));
-    element._renderTemplate(getMap(HTML_REGISTRY, elementName));
-    forEach(
-      [ELEMENT_FLOW_REGISTRY, SCRIPT_REGISTRY, LINK_STYLE_REGISTRY],
-      (registry) => forEach(getMap(registry, elementName), element._renderShadow)
-    );
-    const slotChildren = element.$shadowEl(
-      RealmTagNames.SLOT,
-      [[RealmAttributeNames.CHILDREN]]
-    );
-    const slottedChildren = arrayReduce2(
-      element.$nodes(),
-      (acc, childElement) => {
-        const slotName = element.$attr(
-          RealmAttributeNames.SLOT,
-          childElement
-        );
-        if (slotName) {
-          element._slotTo(
-            element.$shadowEl(RealmTagNames.SLOT, [
-              [RealmAttributeNames.NAME, slotName]
-            ]),
-            [childElement]
-          );
-          return acc;
-        }
-        return [...acc, childElement];
-      },
-      []
-    );
-    element._slotTo(slotChildren, slottedChildren);
-    const bindingElements = getElementAttrBindings(element);
-    const attributesRegistry = getAttrRegistry(elementName);
-    const statesRegistry = getStateRegistry(elementName);
-    forEach(
-      createArray([
-        [createArray(attributesRegistry), RealmMutableAttr.ATTR],
-        [createArray(statesRegistry), RealmMutableAttr.STATE],
-        [getGlobalStateRegistry(), RealmMutableAttr.STATE, true]
-      ]),
-      ([registry, dataType, isGlobalState]) => forEach(registry, ([mutateName, valueType, value]) => {
-        const getParsedValue = () => parseValue(valueType, value);
-        const getValueFromSource = () => getValueFrom(value, mutateName);
-        const valueLookup = {
-          [RealmMutableAttr.ATTR]: () => element.$attr(mutateName) ?? getParsedValue(),
-          [RealmMutableAttr.STATE]: getParsedValue,
-          [RealmMutableAttr.SRC]: getValueFromSource,
-          [RealmMutableAttr.META]: getValueFromSource
-        };
-        if (dataType === RealmMutableAttr.ATTR)
-          addSet(element.attrsRegistry, [mutateName, valueType, value]);
-        if (!isGlobalState && dataType === RealmMutableAttr.STATE)
-          addSet(element.statesRegistry, [mutateName, valueType, value]);
-        bindElement(
-          element,
-          dataType,
-          bindingElements,
-          mutateName,
-          valueLookup[dataType](),
-          valueType,
-          isGlobalState
-        );
-      })
-    );
-    forEach(
-      createArray([
-        [element, RealmMutableAttr.ATTR],
-        [element.states, RealmMutableAttr.STATE, false],
-        [getGlobalState(), RealmMutableAttr.STATE, true]
-      ]),
-      ([mutator, mutateType, globalState2]) => mutator.subscribe((mutatorName, value, oldValue) => {
-        const eventDetail = [mutatorName, value, oldValue];
-        const valueType = globalState2 ? getGlobalStateType(mutatorName) : getAttrType(
-          mutatorName,
-          mutateType === RealmMutableAttr.STATE ? statesRegistry : attributesRegistry
-        );
-        if (mutateType === RealmMutableAttr.STATE)
-          arrayPush(eventDetail, globalState2);
-        element._sendEvent(
-          FlowRuntimeMutableEventTypesLookup[mutateType],
-          eventDetail
-        );
-        bindElement(
-          element,
-          mutateType,
-          bindingElements,
-          mutatorName,
-          value,
-          valueType,
-          globalState2,
-          true
-        );
-      })
-    );
-    const actionTrigger2 = createActionTrigger(element);
-    forEach(
-      entriesOf(FlowEventNames),
-      ([, flowName]) => element._addCustomEvent(
-        flowName,
-        ([eventType, eventName, actions, event2]) => actionTrigger2(actions)(eventType, eventName, event2)
-      )
-    );
-  },
-  onMounted(element) {
-    element._sendEvent(FlowRuntimeEventTypes.MOUNTED);
-  },
-  onUnmounted(element) {
-    element._sendEvent(FlowRuntimeEventTypes.UNMOUNTED);
-  }
-});
-
-// src/elements/custom-element.ts
-var customElement = defineElement({
-  name: RealmTagNames.CUSTOM_ELEMENT,
-  /**
-   * Preparing attributes and states for `custom-element` element
-   * @param element RealmElement
-   */
-  onBeforeInit(element) {
-    const mutableStores = [
-      [RealmTagNames.ELEMENT_ATTR, setAttrRegistry],
-      [RealmTagNames.ELEMENT_STATE, setStateRegistry]
-    ];
-    const customElementName = element.$attr(RealmAttributeNames.NAME);
-    for (const [tagName, setRegistry] of mutableStores) {
-      const attrs = getCustomElementAttrs(element, tagName);
-      if (attrs)
-        setRegistry(customElementName, attrs);
-      removeCustomElementAttrs(element, tagName);
-    }
-  },
-  /**
-   * Initializing custom element
-   * @param element RealmElement
-   */
-  onInit(element) {
-    registerElement(element.$attr(RealmAttributeNames.NAME)).call(this);
-  },
-  /**
-   * Mounting custom element
-   * @param element RealmElement
-   */
-  onMounted(element) {
-    element._remove();
-  }
-});
-
-// src/index.ts
-var ASYNC_ELEMENT = [
-  importElement,
-  importScriptElement,
-  importStyleElement,
-  repeatListElement,
-  isVisibleElement,
-  isHiddenElement,
-  elementFlow
-];
-var SYNC_ELEMENT = [globalStateElement, customElement, webAppElement];
-(async () => {
-  for (const defineElement2 of ASYNC_ELEMENT)
-    await defineElement2();
-  for (const defineElement2 of SYNC_ELEMENT)
-    defineElement2();
-})();