@vuestic/compiler/dist/devtools/client/vuestic-devtools.es.js

Combination of bundling tools focusing on improving development experience when working with Vuestic UI

import '././style.css'
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: true, configurable: true, writable: true, value }) : obj[key2] = value;
var __publicField = (obj, key2, value) => __defNormalProp(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value);
import { onMounted, onBeforeUnmount, watch, defineComponent, ref, watchEffect, toRef, openBlock, createElementBlock, normalizeStyle, unref, createCommentVNode, computed, Fragment, isVNode, useModel, createBlock, withCtx, createElementVNode, createTextVNode, toDisplayString, mergeModels, createVNode, renderList, getCurrentInstance, toHandlerKey, withDirectives, vModelText, resolveComponent, reactive, renderSlot, normalizeClass, withModifiers, onBeforeMount, nextTick, Teleport, mergeProps, toHandlers, createApp } from "vue";
import { useColors, VaSelect, VaColorIndicator, VaInput, VaCheckbox, VaCounter, VaButton, VaIcon, VaDivider, VaTextarea, VaButtonToggle, VaSpacer, VaTabs, VaTab, VaDropdown, VaDropdownContent, useModal, useToast, VaCard, VaScrollContainer, createVuestic } from "vuestic-ui";
const useEvent = (event, handler, options = {}) => {
  onMounted(() => {
    window.addEventListener(event, handler, options);
  });
  onBeforeUnmount(() => {
    window.removeEventListener(event, handler, options);
  });
};
const outlines = [];
const useOutlines = () => {
  return () => {
    outlines.forEach((recalculate) => recalculate());
  };
};
const useOutline = (recalculate) => {
  onMounted(() => {
    outlines.push(recalculate);
  });
  onBeforeUnmount(() => {
    const index = outlines.indexOf(recalculate);
    if (index !== -1) {
      outlines.splice(index, 1);
    }
  });
};
const useMutationObserver = (target, callback) => {
  let observer = new MutationObserver(callback);
  watch(target, (newValue, oldValue) => {
    if (oldValue) {
      observer.disconnect();
    }
    if (newValue) {
      observer.observe(newValue, {
        attributes: true,
        childList: true,
        subtree: true
      });
    }
  });
};
const _sfc_main$v = /* @__PURE__ */ defineComponent({
  __name: "Outline",
  props: {
    node: {},
    color: { default: "outlinePrimary" },
    background: { default: "transparent" },
    dashed: { type: Boolean, default: false },
    thickness: { default: 1 }
  },
  setup(__props) {
    const props = __props;
    const outlineEl = ref();
    const { getColor } = useColors();
    const updateSize = () => {
      if (!props.node) {
        return;
      }
      if (!outlineEl.value) {
        return;
      }
      const { top, left, width, height } = props.node.getBoundingClientRect();
      outlineEl.value.style.top = `${top}px`;
      outlineEl.value.style.left = `${left}px`;
      outlineEl.value.style.width = `${width}px`;
      outlineEl.value.style.height = `${height}px`;
    };
    watchEffect(updateSize);
    let prevTimeout;
    useEvent("resize", () => {
      clearTimeout(prevTimeout);
      prevTimeout = setTimeout(updateSize, 0);
    });
    useOutline(updateSize);
    useMutationObserver(toRef(props, "node"), updateSize);
    return (_ctx, _cache) => {
      return _ctx.node ? (openBlock(), createElementBlock("div", {
        key: 0,
        class: "va-devtools-outline",
        ref_key: "outlineEl",
        ref: outlineEl,
        style: normalizeStyle({
          borderColor: unref(getColor)(_ctx.color),
          borderStyle: _ctx.dashed ? "dashed" : "solid",
          borderWidth: `${_ctx.thickness}px`,
          background: unref(getColor)(_ctx.background)
        })
      }, null, 4)) : createCommentVNode("", true);
    };
  }
});
const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key2, val] of props) {
    target[key2] = val;
  }
  return target;
};
const Outline = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-e435855f"]]);
const _sfc_main$u = {};
const _hoisted_1$i = { class: "va-devtools-overlay" };
function _sfc_render(_ctx, _cache) {
  return openBlock(), createElementBlock("div", _hoisted_1$i);
}
const Overlay = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render], ["__scopeId", "data-v-1a4b2b08"]]);
const getTagContent = (source) => {
  if (source.endsWith("/>")) {
    return source.slice(1, -2);
  }
  return source.slice(1, -1);
};
const parseOpenTag = (source) => {
  source = source.trim().replace(/\n/g, "");
  let tagName = "";
  const attributes = {};
  let tagContent = getTagContent(source);
  if (!tagContent.includes(" ")) {
    tagName = tagContent;
    return { tagName, attributes };
  }
  tagContent += " ";
  let i = 0;
  while (tagContent[i] !== " ") {
    tagName += tagContent[i];
    i++;
  }
  i++;
  let key2 = "";
  let value = null;
  let isInQuotes = false;
  while (i < tagContent.length) {
    if (tagContent[i] === '"') {
      isInQuotes = !isInQuotes;
      i++;
      continue;
    }
    if (tagContent[i] === " " && !isInQuotes) {
      if (key2 !== "") {
        attributes[key2] = value;
      }
      key2 = "";
      value = null;
      i++;
      continue;
    }
    if (tagContent[i] === "=") {
      i++;
      value = "";
      continue;
    }
    if (isInQuotes) {
      value += tagContent[i];
    } else {
      key2 += tagContent[i];
    }
    i++;
  }
  return { tagName, attributes };
};
const superTrim = (content) => {
  return content.replace(/\n/gm, "").trim();
};
const isValidContent = (content) => {
  return superTrim(content) !== "";
};
const parseTokens = (source) => {
  let current = 0;
  const tokens = [];
  while (current < source.length) {
    const startTag = source.indexOf("<", current);
    if (startTag === -1) {
      break;
    }
    const endTag = source.indexOf(">", startTag);
    if (endTag === -1) {
      break;
    }
    const tagContent = source.slice(startTag, endTag + 1);
    const isSelfClosing = tagContent.endsWith("/>");
    const isClosingTag = tagContent.startsWith("</");
    const content = source.slice(current, startTag);
    if (isValidContent(content)) {
      tokens.push({
        type: "content",
        loc: {
          start: { offset: current },
          end: { offset: startTag },
          source: source.slice(current, startTag)
        }
      });
    }
    if (isSelfClosing) {
      tokens.push({
        type: "tag:self-closing",
        loc: {
          start: { offset: startTag },
          end: { offset: endTag + 1 },
          source: tagContent
        },
        tag: tagContent.slice(1, -2)
      });
    } else if (isClosingTag) {
      tokens.push({
        type: "tag:close",
        loc: {
          start: { offset: startTag },
          end: { offset: endTag + 1 },
          source: tagContent
        },
        tag: tagContent.slice(2, -1)
      });
    } else {
      tokens.push({
        type: "tag:open",
        loc: {
          start: { offset: startTag },
          end: { offset: endTag + 1 },
          source: tagContent
        },
        tag: superTrim(tagContent.slice(1, -1).split(" ")[0])
      });
    }
    current = endTag + 1;
  }
  return tokens;
};
const tokensToTree = (tokens) => {
  const root2 = {
    type: "root",
    children: []
  };
  let parent = root2;
  for (let i = 0; i < tokens.length; i++) {
    const token = tokens[i];
    if (token.type === "tag:open") {
      if (!parent.children || typeof parent.children === "string") {
        throw new Error("Unexpected error when parsing HTML");
      }
      const { attributes } = parseOpenTag(token.loc.source);
      const node = {
        type: "element",
        tag: token.tag,
        children: [],
        attributes,
        parent
      };
      parent.children.push(node);
      parent = node;
    }
    if (token.type === "tag:close") {
      if (!("parent" in parent)) {
        throw new Error("Closing tag without parent node");
      }
      parent = parent.parent;
    }
    if (token.type === "content") {
      if (!parent.children || typeof parent.children === "string") {
        throw new Error("Unexpected error when parsing HTML");
      }
      parent.children.push({
        type: "content",
        text: token.loc.source,
        parent
      });
    }
    if (token.type === "tag:self-closing") {
      if (!parent.children || typeof parent.children === "string") {
        throw new Error("Unexpected error when parsing HTML");
      }
      const { attributes, tagName } = parseOpenTag(token.loc.source);
      parent.children.push({
        type: "element",
        tag: tagName,
        children: [],
        attributes,
        parent
      });
    }
  }
  return root2;
};
const parseSource = (source) => {
  const tokens = parseTokens(source);
  const tree = tokensToTree(tokens);
  return tree;
};
const getVNodeComponent = (vNode) => {
  var _a;
  if (!vNode) return null;
  if (typeof vNode.type === "string") {
    return { name: vNode.type, props: {} };
  }
  if (typeof vNode.type === "object") {
    if ("__name" in vNode.type) {
      return {
        name: vNode.type.__name || void 0,
        props: vNode.type.props
      };
    }
    if ("name" in vNode.type) {
      return {
        name: vNode.type.name || void 0,
        props: vNode.props
      };
    }
  }
  return {
    name: ((_a = vNode.el) == null ? void 0 : _a.tagName) ?? "unknown",
    props: {}
  };
};
const useComponentMeta = (vNode) => {
  return computed(() => {
    var _a;
    return {
      type: (_a = vNode.value) == null ? void 0 : _a.type,
      ...getVNodeComponent(vNode.value)
    };
  });
};
const printSource = (source) => {
  let tabSize = 0;
  const printTabs = () => " ".repeat(tabSize);
  const print = (node) => {
    let result = "";
    for (const child of node.children) {
      if ("text" in child) {
        result += child.text.split("\n").filter((line) => line.trim() !== "").map((line) => printTabs() + line.trim()).join("\n") + "\n";
      } else {
        result += printTabs() + `<${child.tag}`;
        const attributesCount = Object.keys(child.attributes).length;
        if (attributesCount === 1) {
          const [key2, value] = Object.entries(child.attributes)[0];
          if (value === null) {
            result += ` ${key2}`;
          } else {
            result += ` ${key2}="${value}"`;
          }
        } else if (attributesCount > 1) {
          result += "\n";
          tabSize += 2;
          for (const [key2, value] of Object.entries(child.attributes)) {
            if (value === null) {
              result += printTabs() + ` ${key2}`;
            } else {
              result += printTabs() + ` ${key2}="${value}"`;
            }
            result += "\n";
          }
          tabSize -= 2;
          result += printTabs();
        }
        if (child.children.length === 0) {
          if (attributesCount <= 1) {
            result += " ";
          }
          result += "/>\n";
          continue;
        }
        result += ">\n";
        tabSize += 2;
        result += printTabs() + print(child).trim();
        tabSize -= 2;
        result += "\n" + printTabs() + `</${child.tag}>
`;
      }
    }
    return result;
  };
  if (source.type === "content") {
    return source.text;
  }
  return print(source);
};
const transformPropName = (name, type) => {
  switch (type) {
    case "attr":
      return name;
    case "bind":
      return `:${name}`;
    case "v-model":
      return `v-model:${name}`;
    case "event":
      return `@${name}`;
  }
};
const extractSlotName = (keys) => {
  for (const key2 of keys) {
    if (key2.startsWith("v-slot:")) {
      return key2.slice(7);
    }
    if (key2.startsWith("#")) {
      return key2.slice(1);
    }
  }
};
const removeDuplicatedAttributes = (attrs) => {
  Object.keys(attrs).forEach((attributeName, i, keys) => {
    const attributeNameNormalized = attributeName.replace(/^:|^v-model:|^v-bind:/, "");
    if (attributeNameNormalized === attributeName) {
      return;
    }
    if (keys.includes(attributeNameNormalized)) {
      delete attrs[attributeName];
    }
  });
  return attrs;
};
const useComponentCode = (source, vNode) => {
  const ast = computed(() => {
    if (!source.value) return null;
    try {
      return parseSource(source.value);
    } catch (e) {
      console.log(e);
      return null;
    }
  });
  const meta = useComponentMeta(vNode);
  const attributes = computed(() => {
    if (!ast.value) return null;
    const element2 = ast.value.children[0];
    if (!element2) return null;
    if (element2.type === "content") {
      return null;
    }
    return element2.attributes;
  });
  const slots = computed(() => {
    if (!ast.value) return null;
    const element2 = ast.value.children[0];
    if (element2.type === "content") {
      return [{ name: "default", text: element2.text }];
    }
    const slots2 = [];
    for (const child of element2.children) {
      if (child.type === "content") {
        slots2.push({ name: "default", text: child.text.trim() });
        continue;
      }
      if (child.tag === "template") {
        const slotName = extractSlotName(Object.keys(child.attributes));
        const slotText = child.children.length === 1 && child.children[0].type === "content" ? child.children[0].text : null;
        if (slotName && slotText) {
          slots2.push({ name: slotName, text: slotText.trim() });
        }
      }
    }
    return slots2;
  });
  const updateAttribute = (name, value, type = "attr") => {
    if (!ast.value) {
      throw new Error("Unable to update attribute: no AST available");
    }
    if (ast.value.children.length !== 1) {
      throw new Error("Unable to update attribute: multi-node");
    }
    const element2 = ast.value.children[0];
    if (element2.type === "content") {
      throw new Error("Unable to update attribute: content node can not have attributes");
    }
    const currentAttributesNames = Object.keys(element2.attributes);
    const newAttributes = currentAttributesNames.reduce((acc, attributeName) => {
      if (attributeName === name) {
        return acc;
      }
      acc[attributeName] = element2.attributes[attributeName];
      return acc;
    }, {});
    const newRoot = {
      type: "root",
      children: []
    };
    const propsMeta = meta.value.props;
    if (propsMeta && name in propsMeta) {
      const propMeta = propsMeta[name];
      if (propMeta.default === value && value !== void 0) {
        newRoot.children.push({
          ...element2,
          attributes: removeDuplicatedAttributes(newAttributes),
          parent: newRoot
        });
        return printSource(newRoot);
      }
    }
    const child = {
      ...element2,
      attributes: removeDuplicatedAttributes({
        ...newAttributes,
        [transformPropName(name, type)]: value
      }),
      parent: newRoot
    };
    if (value === void 0) {
      delete child.attributes[name];
    }
    newRoot.children.push(child);
    return printSource(newRoot);
  };
  const updateSlot = (name, value) => {
    if (!ast.value) {
      throw new Error("Unable to update slot: no AST available");
    }
    if (ast.value.children.length !== 1) {
      throw new Error("Unable to update slot: multi-node");
    }
    const element2 = ast.value.children[0];
    const newRoot = {
      type: "root",
      children: []
    };
    if (element2.type === "content") {
      if (name !== "default") {
        throw new Error("Unable to update slot: content node can only have default slot");
      }
      newRoot.children.push({
        type: "content",
        text: value,
        parent: newRoot
      });
      return printSource(newRoot);
    }
    const newChildren = element2.children.map((child) => {
      if (child.type === "content") {
        if (name === "default") {
          return {
            ...child,
            text: value
          };
        }
        return child;
      }
      if (child.tag === "template") {
        const slotName = extractSlotName(Object.keys(child.attributes));
        if (slotName === name) {
          return {
            ...child,
            children: [{ type: "content", text: value, parent: child }]
          };
        }
      }
      return child;
    });
    newRoot.children.push({
      ...element2,
      children: newChildren,
      parent: newRoot
    });
    return printSource(newRoot);
  };
  const appendChild = (code2) => {
    if (!ast.value) {
      throw new Error("Unable to append child: no AST available");
    }
    if (ast.value.children.length !== 1) {
      throw new Error("Unable to append child: multi-node");
    }
    const element2 = ast.value.children[0];
    const newRoot = {
      type: "root",
      children: []
    };
    if (element2.type === "content") {
      throw new Error("Unable to append child: content node can not have children");
    }
    const newChildren = [
      ...element2.children,
      {
        type: "content",
        text: code2,
        parent: element2
      }
    ];
    newRoot.children.push({
      ...element2,
      children: newChildren,
      parent: newRoot
    });
    return printSource(newRoot);
  };
  const isParsed = computed(() => {
    return attributes.value !== null && slots.value !== null && !source.isLoading && source.value !== null;
  });
  return {
    isParsed,
    meta,
    // ast,
    attributes,
    slots,
    updateAttribute,
    updateSlot,
    appendChild
  };
};
const PREFIX = "va";
const EDIT_MODE_CLASS = "va-edit-mode";
const API_PREFIX = "/vuestic-devtools-api";
const API_URL = new URL(import.meta.url).origin + API_PREFIX;
const getNodeSource = (q) => {
  return fetch(`${API_URL}/node-source?q=${q}`);
};
const setNodeSource = (q, source) => {
  return fetch(`${API_URL}/node-source?q=${q}`, {
    method: "PATCH",
    body: source
  });
};
const getVSCodePath = (q) => {
  return fetch(`${API_URL}/vscode-path?q=${q}`);
};
const deleteNodeSource = (q) => {
  return fetch(`${API_URL}/node-source?q=${q}`, {
    method: "DELETE"
  });
};
const getFileRelativePath = (q) => {
  return fetch(`${API_URL}/relative-file-path?q=${q}`);
};
const useAsyncComputed = (fn, defaultValue) => {
  const value = ref(defaultValue);
  const isLoading = ref(false);
  const error = ref(null);
  const load = async () => {
    try {
      isLoading.value = true;
      value.value = await fn();
    } catch (e) {
      if (e instanceof Error) {
        error.value = e;
      }
    } finally {
      isLoading.value = false;
    }
  };
  watchEffect(() => {
    load();
  });
  const comp = computed(() => {
    return value.value;
  });
  Object.defineProperty(comp, "loading", {
    get() {
      return isLoading.value;
    }
  });
  return comp;
};
const useComponentSource = (uid) => {
  const source = ref(null);
  const isSourceLoading = ref(false);
  const resetSource = () => {
    source.value = null;
  };
  const loadSource = async () => {
    if (!uid.value) {
      resetSource();
      return;
    }
    try {
      isSourceLoading.value = true;
      const response = await getNodeSource(uid.value);
      source.value = await response.text();
    } finally {
      isSourceLoading.value = false;
    }
  };
  const saveSource = async (source2) => {
    if (!uid.value) {
      throw new Error("Can not save source: no q available");
    }
    await setNodeSource(uid.value, source2);
    await loadSource();
  };
  const removeFromSource = async () => {
    if (!uid.value) {
      throw new Error("Can not delete source: no q available");
    }
    source.value = "";
    await deleteNodeSource(uid.value);
  };
  watch(uid, async () => {
    resetSource();
    loadSource();
  }, { immediate: true });
  const openInVSCode = async () => {
    if (!uid.value) {
      throw new Error("Can not open in VSCode: no q available");
    }
    const path = await (await getVSCodePath(uid.value)).text();
    fetch(`/__open-in-editor?file=${path}`);
  };
  const fileName = useAsyncComputed(async () => {
    if (!uid.value) {
      return null;
    }
    return await (await getFileRelativePath(uid.value)).text();
  }, "");
  return {
    content: source,
    get value() {
      return source.value;
    },
    get isLoading() {
      return isSourceLoading.value;
    },
    fileName,
    refresh: loadSource,
    update: saveSource,
    remove: removeFromSource,
    openInVSCode
  };
};
const defineGlobal = (composable) => {
  const result = composable();
  return () => result;
};
const selectedAppTreeItem = ref(null);
const useSelectedAppTreeItem = () => {
  return {
    selectedAppTreeItem,
    sameNodeItems: computed(() => {
      if (!selectedAppTreeItem.value) {
        return [];
      }
      const items = [];
      const walk = (tree) => {
        var _a, _b;
        for (const item of tree) {
          if ("text" in item) {
            continue;
          }
          if ((_a = item.el) == null ? void 0 : _a.isEqualNode(selectedAppTreeItem.value.el)) {
            items.push(item);
          }
          if ((_b = item.repeatedElements) == null ? void 0 : _b.some((el) => el.isEqualNode(selectedAppTreeItem.value.el))) {
            items.push(item);
          }
          walk(item.children);
        }
      };
      walk(_appTree.value);
      return items;
    }),
    selectAppTreeItem(search) {
      if (search === null) {
        selectedAppTreeItem.value = null;
        return;
      }
      const item = typeof search === "string" || search instanceof HTMLElement ? walkTree(search) : search;
      if (!item) {
        console.log(
          _appTree.value,
          search
        );
        throw new Error("Could not find item");
      }
      if ("text" in item) {
        throw new Error("Can not select text item");
      }
      selectedAppTreeItem.value = item;
    }
  };
};
const isDevtoolsComponent = (vnode) => {
  const el = vnode.el;
  if (!el) {
    return false;
  }
  if ("dataset" in el) {
    return Object.keys(el.dataset).includes(PREFIX);
  }
  return false;
};
const getItemName = (vnode) => {
  if (typeof vnode.type === "string") {
    return vnode.type;
  }
  if (typeof vnode.type === "object") {
    if ("name" in vnode.type) {
      return vnode.type.name;
    }
    if ("__name" in vnode.type) {
      return vnode.type.__name;
    }
  }
};
const getItemChildren = (vnode) => {
  if (vnode.component) {
    if (vnode.type.__hmrId) {
      return [vnode.component.subTree];
    }
    return getItemChildren(vnode.component.subTree);
  }
  if (Array.isArray(vnode.children)) {
    return vnode.children;
  }
  if (vnode.children === null) {
    return null;
  }
  if (typeof vnode.children === "object") {
    return null;
  }
  return [vnode.children];
};
const getAppTree = async () => {
  const app = document.querySelector("#app");
  if (!app) {
    throw new Error("App element not found when building app tree");
  }
  const traverseChildren = (vnode2) => {
    if (vnode2 === null) {
      return [];
    }
    if (Array.isArray(vnode2)) {
      return vnode2.filter((vnode3) => !!vnode3).map((vnode3) => {
        if (Array.isArray(vnode3)) {
          return traverseChildren(vnode3);
        }
        if (isVNode(vnode3)) {
          return traverse(vnode3);
        }
        return {
          text: String(vnode3)
        };
      }).flat();
    }
    return {
      text: String(vnode2)
    };
  };
  const traverse = (vnode2) => {
    var _a;
    if (vnode2.type === Fragment) {
      return traverseChildren(vnode2.children);
    }
    const name = getItemName(vnode2);
    if (!isDevtoolsComponent(vnode2)) {
      return traverseChildren(getItemChildren(vnode2));
    }
    const ids = vnode2.props && Object.keys(vnode2.props).filter((p2) => p2.startsWith(`data-${PREFIX}-`)).map((p2) => p2.replace(`data-`, ""));
    if (!ids) {
      return traverseChildren(getItemChildren(vnode2));
    }
    const removeInheritedId = (children) => {
      if (ids) {
        children.forEach((child) => {
          if ("ids" in child) {
            child.ids = child.ids.filter((id) => !ids.includes(id));
          }
        });
      }
      const grouped = [];
      children.forEach((child) => {
        if ("ids" in child) {
          const [id] = child.ids;
          const existing = grouped.find((group) => "ids" in group && group.ids.includes(id));
          if (!existing) {
            grouped.push(child);
          } else {
            existing.repeated = (existing.repeated || 1) + 1;
            existing.repeatedElements = existing.repeatedElements || [];
            existing.repeatedElements.push(child.el);
          }
        } else {
          grouped.push(child);
        }
      });
      return grouped;
    };
    return {
      ids: ids ?? [],
      el: vnode2.el,
      vnode: vnode2,
      name: name ?? "unknown",
      children: removeInheritedId(((_a = getItemChildren(vnode2)) == null ? void 0 : _a.map((child) => {
        if (Array.isArray(child)) {
          return traverseChildren(child);
        }
        if (isVNode(child)) {
          return traverse(child);
        }
        return {
          text: String(child)
        };
      }).flat()) ?? [])
    };
  };
  const getAppVNode = () => {
    return new Promise((resolve) => {
      if ("_vnode" in app) {
        return resolve(app._vnode);
      }
      requestAnimationFrame(async () => {
        resolve(await getAppVNode());
      });
    });
  };
  const vnode = await getAppVNode();
  return traverse(vnode);
};
const walkTree = (search, tree = appTree.value) => {
  var _a, _b, _c, _d;
  for (const item of tree) {
    if ("text" in item) {
      continue;
    }
    if (typeof search === "string") {
      if (item.ids.includes(search)) {
        return item;
      }
    } else if (search instanceof HTMLElement) {
      if ((_a = item.el) == null ? void 0 : _a.isEqualNode(search)) {
        return item;
      }
      if ((_b = item.repeatedElements) == null ? void 0 : _b.some((el) => el.isEqualNode(search))) {
        return item;
      }
    } else if ("name" in search) {
      const searchEl = search.el;
      const searchName = search.name;
      const isSameNode = ((_c = item.el) == null ? void 0 : _c.isEqualNode(searchEl)) || ((_d = item.repeatedElements) == null ? void 0 : _d.some((el) => el.isEqualNode(el)));
      const isSameName = item.name === searchName;
      if (isSameName && isSameNode) {
        return item;
      }
    }
    const child = walkTree(search, item.children);
    if (child) {
      return child;
    }
  }
  return null;
};
const appTree = ref([]);
const _appTree = appTree;
const useAppTree = () => {
  const { selectedAppTreeItem: selectedAppTreeItem2, sameNodeItems, selectAppTreeItem } = useSelectedAppTreeItem();
  const refresh = async () => {
    const oldSelectedAppTreeItem = selectedAppTreeItem2.value;
    const tree = await getAppTree();
    if (!Array.isArray(tree)) {
      appTree.value = [tree];
    } else {
      appTree.value = tree;
    }
    if (oldSelectedAppTreeItem) {
      const selectedNode = walkTree(oldSelectedAppTreeItem);
      if (selectedNode && "el" in selectedNode) {
        selectedAppTreeItem2.value = selectedNode;
      }
    }
  };
  onMounted(() => {
    if (appTree.value.length === 0) {
      refresh();
    }
  });
  return {
    appTree,
    refresh,
    selectAppTreeItem,
    selectedAppTreeItem: selectedAppTreeItem2,
    sameNodeItems
  };
};
const findPropFromAttributes = (attributes, propName) => {
  const possibleNames = [
    propName,
    `:${propName}`,
    `v-bind:${propName}`,
    `@${propName}`,
    `v-model:${propName}`
  ];
  for (const name of possibleNames) {
    if (name in attributes) {
      return {
        name,
        value: attributes[name],
        isDynamic: name.startsWith(":") || name.startsWith("v-bind"),
        isVModel: name.startsWith("v-model"),
        isEvent: name.startsWith("@")
      };
    }
  }
  return null;
};
const useComponentOptions = (code2, source, vNode) => {
  const props = computed(() => {
    var _a;
    if (!code2.attributes.value) {
      return {};
    }
    const props2 = {};
    for (const name in code2.meta.value.props) {
      const propMeta = (_a = code2.meta.value.props) == null ? void 0 : _a[name];
      const attributeFromCode = findPropFromAttributes(code2.attributes.value, name);
      props2[name] = {
        name,
        meta: propMeta,
        get currentValue() {
          var _a2, _b;
          return (_b = (_a2 = vNode.value) == null ? void 0 : _a2.props) == null ? void 0 : _b[name];
        },
        get codeValue() {
          return attributeFromCode == null ? void 0 : attributeFromCode.value;
        },
        set codeValue(newCodeValue) {
          source.update(code2.updateAttribute(name, newCodeValue));
        },
        codeAttribute: attributeFromCode ?? void 0,
        updateAttribute: code2.updateAttribute
      };
    }
    return props2;
  });
  const slots = computed(() => {
    var _a;
    return ((_a = code2.slots.value) == null ? void 0 : _a.map((slot) => {
      let timeout;
      return {
        name: slot.name,
        get codeValue() {
          return slot.text;
        },
        set codeValue(newCodeValue) {
          clearTimeout(timeout);
          timeout = setTimeout(() => {
            source.update(code2.updateSlot(slot.name, newCodeValue));
          }, 300);
        }
      };
    })) ?? [];
  });
  const style = computed({
    get() {
      var _a;
      if (!((_a = code2.attributes.value) == null ? void 0 : _a.style)) {
        return {};
      }
      return code2.attributes.value.style.split(";").reduce((acc, style2) => {
        const [key2, value] = style2.split(":");
        if (key2 && value) {
          acc[key2.trim()] = value.trim();
        }
        return acc;
      }, {});
    },
    set(newStyle) {
      const style2 = Object.entries(newStyle).map(([key2, value]) => `${key2}: ${value}`).join("; ");
      source.update(code2.updateAttribute("style", style2));
    }
  });
  return {
    props,
    slots,
    style
  };
};
const useComponent = defineGlobal(() => {
  const {
    selectedAppTreeItem: selectedAppTreeItem2,
    selectAppTreeItem
  } = useAppTree();
  const vNode = computed(() => {
    var _a;
    return ((_a = selectedAppTreeItem2.value) == null ? void 0 : _a.vnode) ?? null;
  });
  const element2 = computed(() => {
    var _a;
    return ((_a = selectedAppTreeItem2.value) == null ? void 0 : _a.el) ?? null;
  });
  const uid = computed(() => {
    var _a;
    return (_a = selectedAppTreeItem2.value) == null ? void 0 : _a.ids[0];
  });
  const name = computed(() => {
    var _a;
    return (_a = selectedAppTreeItem2.value) == null ? void 0 : _a.name;
  });
  const source = useComponentSource(uid);
  const code2 = useComponentCode(source, vNode);
  const options = useComponentOptions(code2, source, vNode);
  return {
    uid,
    name,
    element: element2,
    source,
    code: code2,
    options,
    setComponent: selectAppTreeItem
  };
});
const useApp = () => {
  const app = document.querySelector("#app");
  if (!app) {
    throw new Error("VuesticDevtools: App element not found when accessing Vuestic Config");
  }
  const vueApp = ref();
  const tryGetVueApp = () => {
    vueApp.value = app.__vue_app__;
    if (!vueApp.value) {
      requestAnimationFrame(tryGetVueApp);
    }
  };
  tryGetVueApp();
  return vueApp;
};
const useAppVuesticConfig = () => {
  const vueApp = useApp();
  return computed(() => {
    var _a;
    return (_a = vueApp.value) == null ? void 0 : _a.config.globalProperties.$vaConfig.globalConfig;
  });
};
const _hoisted_1$h = { class: "color-option__option" };
const _sfc_main$t = /* @__PURE__ */ defineComponent({
  __name: "Color",
  props: /* @__PURE__ */ mergeModels({
    label: {},
    prop: {}
  }, {
    "modelValue": {},
    "modelModifiers": {}
  }),
  emits: ["update:modelValue"],
  setup(__props) {
    const config = useAppVuesticConfig();
    const colorOptions = computed(() => {
      var _a, _b;
      const variables = (_b = (_a = config.value) == null ? void 0 : _a.colors) == null ? void 0 : _b.variables;
      if (!variables) return [];
      return [...Object.keys(variables)];
    });
    const toCamelCase = (str) => str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
    const getColor = (name) => {
      var _a;
      return (_a = config.value) == null ? void 0 : _a.colors.variables[toCamelCase(name)];
    };
    const props = __props;
    const vModel = useModel(__props, "modelValue");
    const vModelProxy = computed({
      get() {
        return toCamelCase(vModel.value ?? props.prop.meta.default ?? "");
      },
      set(v) {
        if (v === "") {
          vModel.value = void 0;
        } else {
          vModel.value = v;
        }
      }
    });
    return (_ctx, _cache) => {
      return unref(config) ? (openBlock(), createBlock(unref(VaSelect), {
        key: 0,
        options: colorOptions.value,
        class: "color-option",
        label: props.label,
        modelValue: vModelProxy.value,
        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vModelProxy.value = $event),
        clearable: vModelProxy.value !== _ctx.prop.meta.default
      }, {
        "option-content": withCtx(({ option: option2 }) => [
          createElementVNode("div", _hoisted_1$h, [
            option2 && option2 !== "unset" ? (openBlock(), createBlock(unref(VaColorIndicator), {
              key: 0,
              color: getColor(option2),
              class: "color-option__color"
            }, null, 8, ["color"])) : createCommentVNode("", true),
            createTextVNode(" " + toDisplayString(option2), 1)
          ])
        ]),
        _: 1
      }, 8, ["options", "label", "modelValue", "clearable"])) : createCommentVNode("", true);
    };
  }
});
const Color = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-32b4dcc4"]]);
const _sfc_main$s = /* @__PURE__ */ defineComponent({
  __name: "MultiText",
  props: /* @__PURE__ */ mergeModels({
    label: {}
  }, {
    "modelValue": {},
    "modelModifiers": {}
  }),
  emits: ["update:modelValue"],
  setup(__props) {
    const props = __props;
    const vModel = useModel(__props, "modelValue");
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(VaInput), {
        label: props.label,
        modelValue: vModel.value,
        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vModel.value = $event)
      }, null, 8, ["label", "modelValue"]);
    };
  }
});
const _hoisted_1$g = { class: "checkbox-option" };
const _hoisted_2$a = { class: "va-label" };
const _hoisted_3$7 = { class: "checkbox-option__box" };
const _sfc_main$r = /* @__PURE__ */ defineComponent({
  __name: "Checkbox",
  props: /* @__PURE__ */ mergeModels({
    label: {},
    prop: {}
  }, {
    "modelValue": {},
    "modelModifiers": {}
  }),
  emits: ["update:modelValue"],
  setup(__props) {
    const props = __props;
    const vModel = useModel(__props, "modelValue");
    const vModelProxy = computed({
      get() {
        return vModel.value === "true" || vModel.value === null;
      },
      set(v) {
        var _a;
        const prop = props.prop;
        prop.updateAttribute(((_a = prop.codeAttribute) == null ? void 0 : _a.name) ?? prop.name, void 0);
        if (v === prop.meta.default) {
          return;
        }
        if (v === true) {
          prop.updateAttribute(prop.name, null);
        } else {
          prop.updateAttribute(prop.name, "false", "bind");
        }
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$g, [
        createElementVNode("div", _hoisted_2$a, toDisplayString(props.label), 1),
        createElementVNode("div", _hoisted_3$7, [
          createVNode(unref(VaCheckbox), {
            label: vModelProxy.value ? "true" : "false",
            modelValue: vModelProxy.value,
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vModelProxy.value = $event)
          }, null, 8, ["label", "modelValue"])
        ])
      ]);
    };
  }
});
const globalConfig = {
  color: { type: "color" },
  textColor: { type: "color" },
  background: { type: "color" },
  backgroundColor: { type: "color" },
  stripeColor: { type: "color" },
  to: { type: "text" },
  preset: { type: "multi-text" },
  sizesConfig: { type: "disabled" },
  fontSizesConfig: { type: "disabled" }
};
const componentsConfig = {};
const getPropConfig = (component, prop) => {
  if (componentsConfig[component] && componentsConfig[component][prop]) {
    return componentsConfig[component][prop];
  }
  return globalConfig[prop];
};
const _hoisted_1$f = { class: "number-option" };
const _sfc_main$q = /* @__PURE__ */ defineComponent({
  __name: "Number",
  props: /* @__PURE__ */ mergeModels({
    label: {},
    prop: {}
  }, {
    "modelValue": {},
    "modelModifiers": {}
  }),
  emits: ["update:modelValue"],
  setup(__props) {
    const props = __props;
    const vModel = useModel(__props, "modelValue");
    const clearValue = () => {
      var _a;
      props.prop.updateAttribute(((_a = props.prop.codeAttribute) == null ? void 0 : _a.name) ?? props.prop.name, void 0);
    };
    const vModelProxy = computed({
      get() {
        return vModel.value ?? props.prop.meta.default;
      },
      set(v) {
        var _a;
        const prop = props.prop;
        prop.updateAttribute(((_a = prop.codeAttribute) == null ? void 0 : _a.name) ?? prop.name, void 0);
        if (v === prop.meta.default) {
          return;
        }
        prop.updateAttribute(prop.name, v.toString(), "bind");
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$f, [
        createVNode(unref(VaCounter), {
          class: "number-option__input",
          label: props.label,
          modelValue: vModelProxy.value,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vModelProxy.value = $event),
          "manual-input": ""
        }, null, 8, ["label", "modelValue"]),
        createVNode(unref(VaButton), {
          class: "number-option__reset-button",
          onClick: clearValue,
          icon: "va-clear",
          preset: "secondary",
          disabled: vModelProxy.value === _ctx.prop.meta.default
        }, null, 8, ["disabled"])
      ]);
    };
  }
});
const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-f94fa3ea"]]);
const _hoisted_1$e = { class: "not-avaliable-option" };
const _hoisted_2$9 = { class: "va-label" };
const _sfc_main$p = /* @__PURE__ */ defineComponent({
  __name: "NotAvaliable",
  props: {
    label: {}
  },
  setup(__props) {
    const props = __props;
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$e, [
        createElementVNode("div", _hoisted_2$9, toDisplayString(props.label), 1),
        _cache[0] || (_cache[0] = createElementVNode("div", { class: "not-avaliable-option__box" }, " Not avaliable ", -1))
      ]);
    };
  }
});
const _hoisted_1$d = { class: "component-props" };
const _hoisted_2$8 = { key: 7 };
const _hoisted_3$6 = { class: "va-label" };
const _sfc_main$o = /* @__PURE__ */ defineComponent({
  __name: "ComponentProps",
  setup(__props) {
    const { options, name } = useComponent();
    const getTypeFromProp = (proptype) => {
      if (proptype === void 0) {
        return "text";
      }
      if (proptype === String) {
        return "text";
      }
      if (proptype === Number) {
        return "number";
      }
      if (proptype === Boolean) {
        return "checkbox";
      }
      if (Array.isArray(proptype)) {
        proptype = proptype.filter((t) => t !== null);
        if (proptype.length === 2) {
          if (proptype.includes(String) && proptype.includes(Number)) {
            return "text";
          }
        }
      }
      return "unknown";
    };
    const propsFilter = ref("");
    const propsConfigs = computed(() => {
      return Object.entries(options.props.value).map(([propName, p2]) => {
        const prop = p2;
        const customConfig = getPropConfig(name.value ?? "", propName);
        const type = (customConfig == null ? void 0 : customConfig.type) ?? getTypeFromProp(prop.meta.type);
        if (type === "unknown") {
          console.error(`Unknown type for prop ${propName}`, prop.meta.type);
        }
        return {
          ...customConfig,
          name: propName,
          prop,
          type,
          get value() {
            return prop.codeValue;
          },
          set value(value) {
            prop.codeValue = value;
          }
        };
      }).sort((a, b) => a.name.localeCompare(b.name)).filter((prop) => prop.name.toLowerCase().includes(propsFilter.value.toLowerCase()));
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$d, [
        createVNode(unref(VaInput), {
          modelValue: propsFilter.value,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => propsFilter.value = $event),
          class: "component-settings__search-field",
          placeholder: "Search"
        }, {
          prependInner: withCtx(() => [
            createVNode(unref(VaIcon), { name: "search" })
          ]),
          _: 1
        }, 8, ["modelValue"]),
        createVNode(unref(VaDivider)),
        (openBlock(true), createElementBlock(Fragment, null, renderList(propsConfigs.value, (prop) => {
          return openBlock(), createElementBlock(Fragment, null, [
            prop.type === "color" ? (openBlock(), createBlock(Color, {
              key: 0,
              label: prop.name,
              modelValue: prop.value,
              "onUpdate:modelValue": ($event) => prop.value = $event,
              prop: prop.prop
            }, null, 8, ["label", "modelValue", "onUpdate:modelValue", "prop"])) : prop.type === "text" ? (openBlock(), createBlock(unref(VaInput), {
              key: 1,
              label: prop.name,
              modelValue: prop.value,
              "onUpdate:modelValue": ($event) => prop.value = $event
            }, null, 8, ["label", "modelValue", "onUpdate:modelValue"])) : prop.type === "checkbox" ? (openBlock(), createBlock(_sfc_main$r, {
              key: 2,
              label: prop.name,
              modelValue: prop.value,
              "onUpdate:modelValue": ($event) => prop.value = $event,
              prop: prop.prop
            }, null, 8, ["label", "modelValue", "onUpdate:modelValue", "prop"])) : prop.type === "select" ? (openBlock(), createBlock(unref(VaSelect), {
              key: 3,
              label: prop.name,
              modelValue: prop.value,
              "onUpdate:modelValue": ($event) => prop.value = $event,
              options: "options" in prop ? prop.options : []
            }, null, 8, ["label", "modelValue", "onUpdate:modelValue", "options"])) : prop.type === "number" ? (openBlock(), createBlock(NumberInput, {
              key: 4,
              label: prop.name,
              modelValue: prop.value,
              "onUpdate:modelValue": ($event) => prop.value = $event,
              prop: prop.prop
            }, null, 8, ["label", "modelValue", "onUpdate:modelValue", "prop"])) : prop.type === "multi-text" ? (openBlock(), createBlock(_sfc_main$s, {
              key: 5,
              label: prop.name,
              modelValue: prop.value,
              "onUpdate:modelValue": ($event) => prop.value = $event
            }, null, 8, ["label", "modelValue", "onUpdate:modelValue"])) : prop.type === "disabled" ? (openBlock(), createBlock(_sfc_main$p, {
              key: 6,
              label: prop.name
            }, null, 8, ["label"])) : (openBlock(), createElementBlock("div", _hoisted_2$8, [
              createElementVNode("div", _hoisted_3$6, toDisplayString(prop.name), 1),
              _cache[1] || (_cache[1] = createElementVNode("div", { style: { "height": "36px", "line-height": "36px" } }, " This prop can be edited only in Source Code tab for now. ", -1))
            ]))
          ], 64);
        }), 256))
      ]);
    };
  }
});
const _hoisted_1$c = { class: "component-slots" };
const _sfc_main$n = /* @__PURE__ */ defineComponent({
  __name: "ComponentSlots",
  setup(__props) {
    const { options: { slots } } = useComponent();
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1$c, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(slots), (slot) => {
          return openBlock(), createBlock(unref(VaTextarea), {
            modelValue: slot.codeValue,
            "onUpdate:modelValue": ($event) => slot.codeValue = $event,
            label: slot.name
          }, null, 8, ["modelValue", "onUpdate:modelValue", "label"]);
        }), 256))
      ]);
    };
  }
});
const ComponentSlots = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-406ffc41"]]);
const bundledThemesInfo = [
  {
    "id": "andromeeda",
    "displayName": "Andromeeda",
    "type": "dark",
    "import": () => import("./andromeeda.js")
  },
  {
    "id": "aurora-x",
    "displayName": "Aurora X",
    "type": "dark",
    "import": () => import("./aurora-x.js")
  },
  {
    "id": "ayu-dark",
    "displayName": "Ayu Dark",
    "type": "dark",
    "import": () => import("./ayu-dark.js")
  },
  {
    "id": "catppuccin-frappe",
    "displayName": "Catppuccin Frappé",
    "type": "dark",
    "import": () => import("./catppuccin-frappe.js")
  },
  {
    "id": "catppuccin-latte",
    "displayName": "Catppuccin Latte",
    "type": "light",
    "import": () => import("./catppuccin-latte.js")
  },
  {
    "id": "catppuccin-macchiato",
    "displayName": "Catppuccin Macchiato",
    "type": "dark",
    "import": () => import("./catppuccin-macchiato.js")
  },
  {
    "id": "catppuccin-mocha",
    "displayName": "Catppuccin Mocha",
    "type": "dark",
    "import": () => import("./catppuccin-mocha.js")
  },
  {
    "id": "dark-plus",
    "displayName": "Dark Plus",
    "type": "dark",
    "import": () => import("./dark-plus.js")
  },
  {
    "id": "dracula",
    "displayName": "Dracula Theme",
    "type": "dark",
    "import": () => import("./dracula.js")
  },
  {
    "id": "dracula-soft",
    "displayName": "Dracula Theme Soft",
    "type": "dark",
    "import": () => import("./dracula-soft.js")
  },
  {
    "id": "everforest-dark",
    "displayName": "Everforest Dark",
    "type": "dark",
    "import": () => import("./everforest-dark.js")
  },
  {
    "id": "everforest-light",
    "displayName": "Everforest Light",
    "type": "light",
    "import": () => import("./everforest-light.js")
  },
  {
    "id": "github-dark",
    "displayName": "GitHub Dark",
    "type": "dark",
    "import": () => import("./github-dark.js")
  },
  {
    "id": "github-dark-default",
    "displayName": "GitHub Dark Default",
    "type": "dark",
    "import": () => import("./github-dark-default.js")
  },
  {
    "id": "github-dark-dimmed",
    "displayName": "GitHub Dark Dimmed",
    "type": "dark",
    "import": () => import("./github-dark-dimmed.js")
  },
  {
    "id": "github-dark-high-contrast",
    "displayName": "GitHub Dark High Contrast",
    "type": "dark",
    "import": () => import("./github-dark-high-contrast.js")
  },
  {
    "id": "github-light",
    "displayName": "GitHub Light",
    "type": "light",
    "import": () => import("./github-light.js")
  },
  {
    "id": "github-light-default",
    "displayName": "GitHub Light Default",
    "type": "light",
    "import": () => import("./github-light-default.js")
  },
  {
    "id": "github-light-high-contrast",
    "displayName": "GitHub Light High Contrast",
    "type": "light",
    "import": () => import("./github-light-high-contrast.js")
  },
  {
    "id": "houston",
    "displayName": "Houston",
    "type": "dark",
    "import": () => import("./houston.js")
  },
  {
    "id": "kanagawa-dragon",
    "displayName": "Kanagawa Dragon",
    "type": "dark",
    "import": () => import("./kanagawa-dragon.js")
  },
  {
    "id": "kanagawa-lotus",
    "displayName": "Kanagawa Lotus",
    "type": "light",
    "import": () => import("./kanagawa-lotus.js")
  },
  {
    "id": "kanagawa-wave",
    "displayName": "Kanagawa Wave",
    "type": "dark",
    "import": () => import("./kanagawa-wave.js")
  },
  {
    "id": "laserwave",
    "displayName": "LaserWave",
    "type": "dark",
    "import": () => import("./laserwave.js")
  },
  {
    "id": "light-plus",
    "displayName": "Light Plus",
    "type": "light",
    "import": () => import("./light-plus.js")
  },
  {
    "id": "material-theme",
    "displayName": "Material Theme",
    "type": "dark",
    "import": () => import("./material-theme.js")
  },
  {
    "id": "material-theme-darker",
    "displayName": "Material Theme Darker",
    "type": "dark",
    "import": () => import("./material-theme-darker.js")
  },
  {
    "id": "material-theme-lighter",
    "displayName": "Material Theme Lighter",
    "type": "light",
    "import": () => import("./material-theme-lighter.js")
  },
  {
    "id": "material-theme-ocean",
    "displayName": "Material Theme Ocean",
    "type": "dark",
    "import": () => import("./material-theme-ocean.js")
  },
  {
    "id": "material-theme-palenight",
    "displayName": "Material Theme Palenight",
    "type": "dark",
    "import": () => import("./material-theme-palenight.js")
  },
  {
    "id": "min-dark",
    "displayName": "Min Dark",
    "type": "dark",
    "import": () => import("./min-dark.js")
  },
  {
    "id": "min-light",
    "displayName": "Min Light",
    "type": "light",
    "import": () => import("./min-light.js")
  },
  {
    "id": "monokai",
    "displayName": "Monokai",
    "type": "dark",
    "import": () => import("./monokai.js")
  },
  {
    "id": "night-owl",
    "displayName": "Night Owl",
    "type": "dark",
    "import": () => import("./night-owl.js")
  },
  {
    "id": "nord",
    "displayName": "Nord",
    "type": "dark",
    "import": () => import("./nor