@realmorg/realm 0.0.1

package/dist/realm.development.js

@@ -0,0 +1,2458 @@
+/**
+ * @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 CSS_CUSTOM_SELECTOR_REGEX = /:host\(\[\\([#@]\w+?)\](\[(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)
+        return JSONSafeParse(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 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 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 = () => style.getPropertyValue(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 styleMap = rule.styleMap;
+  if (styleMap.get(name) !== value)
+    styleMap.set(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, dataType, isGlobalUpdate = false) => {
+  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);
+  }
+  subscribe(callback) {
+    arrayPush(this.#attrObserver, callback);
+  }
+  connectedCallback() {
+    const [observeAttr] = subscribeAttrMutation(
+      this,
+      (attrName, attrValue, prevAttrValue) => {
+        forEach(
+          this.#attrObserver,
+          (callback) => callback?.(attrName, attrValue, prevAttrValue)
+        );
+        this.onAttributeChanged?.(this, attrName, attrValue, prevAttrValue);
+      }
+    );
+    observeAttr();
+    reqAnim(() => this.onMounted?.(this));
+  }
+  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 });
+    }
+    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 = element.$qsAll(
+    selector,
+    attrs,
+    isGlobalUpdate ? doc : void 0
+  );
+  forEachNode(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, isGlobalUpdate, isUpdate) => {
+  bindCSS(element, name, value, 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 [attrName, global] = strSplit(
+          $attrName(attr),
+          COLON
+        );
+        const isGlobal = global === RealmAttributeNames.GLOBAL;
+        const hasBindAttr = strStartWith(attrName, BIND_ATTR_PREFIX);
+        const hasAttr = element.$hasAttr(attrName, node);
+        if (hasAttr && !hasBindAttr)
+          return acc2;
+        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_ELEMENT_REQUEST_CACHE = createMap();
+var importElement = defineElement({
+  name: RealmTagNames.IMPORT_ELEMENT,
+  async onBeforeInit(element) {
+    const { from, automount, as: tagAlias, ...attrs } = element.$attrsKv();
+    const [, cachedHtml] = getMap(IMPORT_ELEMENT_REQUEST_CACHE, from) ?? [];
+    if (!cachedHtml) {
+      try {
+        const response = await fetch(from);
+        const html = await response.text();
+        setMap(IMPORT_ELEMENT_REQUEST_CACHE, from, html);
+      } catch {
+        newError(`Failed to fetch "${from}"`);
+      }
+    }
+    const customElement2 = element.$qs(
+      RealmTagNames.CUSTOM_ELEMENT,
+      [],
+      DOMFrom(getMap(IMPORT_ELEMENT_REQUEST_CACHE, from))
+    );
+    if (!customElement2)
+      return element._remove();
+    const nameAttr = element.$attr(
+      RealmAttributeNames.NAME,
+      customElement2
+    );
+    let customElementName = tagAlias ?? nameAttr;
+    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();
+    }
+  }
+});
+
+// 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 = "initial";
+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]) => {
+  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]: () => [
+        ...prevValue,
+        ...arrayReduce2(
+          attrValue,
+          (acc, value) => {
+            const newId = `${SOURCE_PREFIX}${SOURCE_PREFIX}${$randId()}`;
+            return [
+              ...acc,
+              typeof value === "object" ? {
+                [newId]: Symbol(newId),
+                ...value
+              } : value
+            ];
+          },
+          []
+        )
+      ],
+      [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 } = 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 */]: 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 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";
+  const attrValue = getSourceFrom(
+    element,
+    attrType,
+    valueAttr,
+    sourceType,
+    event2
+  );
+  const [_toggle, hasToggle] = findAttr(actionArgs, AttrToggle);
+  const mutatedValue = mutatesValue([
+    mutateAttr,
+    attrType,
+    hasToggle ? !attrValue : attrValue,
+    +attrIndex
+  ]);
+  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);
+    if (!(hasResponseOkAttr || hasResponseFailAttr))
+      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 {
+      if (!hasResponseOkActions)
+        return;
+      const response = await fetch(urlAttr, {
+        body,
+        method,
+        headers
+      });
+      if (!response.ok)
+        throw newError(`[${response.status}] ${urlAttr}`);
+      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) {
+        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
+    );
+    reqAnim(() => {
+      getScriptFlow(elementName, scriptIdAttr)?.apply(
+        element,
+        getScriptArgs(element, event2)
+      );
+    });
+  }
+});
+
+// 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);
+    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]?.() : 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 eventCaller = isRemoveEvent ? dispatcherElement._removeEvent : dispatcherElement._addCustomEvent;
+  const isCustomEvent = eventType === FlowRuntimeEventTypes.ON;
+  const finalEventName = isCustomEvent ? FlowRuntimeEventTypes.ON + COLON + eventName : eventType;
+  eventCaller(
+    finalEventName,
+    (event2) => 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?.();
+  const triggerEvent = () => dispatcherElement._sendEvent(FlowEventNames.TRIGGER_EVENT, [
+    EMPTY_STRING,
+    eventName,
+    actions,
+    event2
+  ]);
+  if (debounceTime > 0) {
+    debounceTimer = timerOnce(triggerEvent, debounceTime);
+    return;
+  }
+  return triggerEvent();
+};
+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, (item, index) => {
+        element._append(
+          element.$clone(fragment),
+          elementShadow
+        );
+        const elementAttrBindings2 = getElementAttrBindings(element);
+        forEach(
+          toDotNotation(item),
+          (name) => bindElement(
+            element,
+            RealmMutableAttr.SRC,
+            elementAttrBindings2,
+            name,
+            item,
+            false
+          )
+        );
+        const meta = { index, length: entries.length };
+        forEach(
+          toDotNotation(meta, META_PREFIX),
+          (name) => bindElement(
+            element,
+            RealmMutableAttr.META,
+            elementAttrBindings2,
+            name,
+            meta,
+            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)
+          };
+          bindElement(
+            element,
+            dataType,
+            elementAttrBindings,
+            mutateName,
+            valueLookup[dataType](),
+            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,
+                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](),
+          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];
+        if (mutateType === RealmMutableAttr.STATE)
+          arrayPush(eventDetail, globalState2);
+        element._sendEvent(
+          FlowRuntimeMutableEventTypesLookup[mutateType],
+          eventDetail
+        );
+        bindElement(
+          element,
+          mutateType,
+          bindingElements,
+          mutatorName,
+          value,
+          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();
+})();