@mlightcad/ui-components 0.1.0 → 0.1.2

package/dist/ui-components.es.js

@@ -1,81 +1,83 @@
-(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".ml-dropdown-icon[data-v-3fc33b5d],.ml-dropdown-icon[data-v-3fc33b5d]:hover{outline:none;border:none}.ml-status-bar[data-v-d6a59cf0]{position:fixed;bottom:0;left:0;right:0;height:30px;display:flex;justify-content:space-between;align-items:center;background-color:var(--el-fill-color);box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-status-bar-left[data-v-d6a59cf0],.ml-status-bar-right[data-v-d6a59cf0]{display:flex;align-items:center}.ml-status-bar-left[data-v-d6a59cf0]>*{margin-right:10px}.ml-status-bar-right[data-v-d6a59cf0]>*{margin-left:10px}.ml-toggle-button[data-v-b676e93b]{border:none;padding:0;cursor:pointer;width:var(--0547f26d);height:var(--0547f26d)}.ml-vertical-toolbar-button-group[data-v-5261c686]{display:flex;flex-direction:column}.ml-horizontal-toolbar-button-group[data-v-5261c686]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-5261c686]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-5261c686]{margin-left:0;margin-top:5px}.ml-tool-palette-dialog[data-v-8645db4f]{cursor:default;width:300px;min-width:var(--collapsed-width);position:fixed;box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-tool-palette-dialog-icon[data-v-8645db4f]{border-bottom:1px solid var(--el-border-color);cursor:default}.ml-tool-palette-dialog-icon[data-v-8645db4f]:hover{color:var(--el-color-primary)}.ml-tool-palette-dialog-layout[data-v-8645db4f]{display:flex;height:100%}.ml-tool-palette-title-bar[data-v-8645db4f]{width:var(--collapsed-width);display:flex;justify-content:left;align-items:center;cursor:move;writing-mode:vertical-rl;text-align:center;background-color:var(--el-fill-color)}.ml-tool-palette-title[data-v-8645db4f]{pointer-events:none;margin-top:10px;margin-bottom:10px;font-size:small;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-tool-palette-content[data-v-8645db4f]{-webkit-user-select:none;user-select:none;flex-grow:1;display:flex;justify-content:space-around;background-color:var(--el-fill-color);overflow:hidden}.ml-tool-palette-dialog-layout.left .ml-tool-palette-title-bar[data-v-8645db4f]{order:1}.ml-tool-palette-dialog-layout.left .ml-tool-palette-content[data-v-8645db4f],.ml-tool-palette-dialog-layout.right .ml-tool-palette-title-bar[data-v-8645db4f]{order:2}.ml-tool-palette-dialog-layout.right .ml-tool-palette-content[data-v-8645db4f]{order:1}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { ElIcon as H, ElDropdownItem as ue, ElDropdownMenu as ae, ElDropdown as ce, ElButton as Q, ElTooltip as Z, ElButtonGroup as re } from "element-plus/es";
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".ml-dropdown-icon[data-v-3fc33b5d],.ml-dropdown-icon[data-v-3fc33b5d]:hover{outline:none;border:none}.ml-status-bar[data-v-d6a59cf0]{position:fixed;bottom:0;left:0;right:0;height:30px;display:flex;justify-content:space-between;align-items:center;background-color:var(--el-fill-color);box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-status-bar-left[data-v-d6a59cf0],.ml-status-bar-right[data-v-d6a59cf0]{display:flex;align-items:center}.ml-status-bar-left[data-v-d6a59cf0]>*{margin-right:10px}.ml-status-bar-right[data-v-d6a59cf0]>*{margin-left:10px}.ml-toggle-button[data-v-b676e93b]{border:none;padding:0;cursor:pointer;width:var(--0547f26d);height:var(--0547f26d)}.ml-vertical-toolbar-button-group[data-v-c6504e33]{display:flex;flex-direction:column;background-color:var(--el-fill-color)}.ml-horizontal-toolbar-button-group[data-v-c6504e33]{display:flex;flex-direction:row;background-color:var(--el-fill-color)}.ml-toolbar-button[data-v-c6504e33]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-c6504e33]{margin-left:0;margin-top:5px}.ml-tool-palette-dialog[data-v-43098ce9]{cursor:default;width:300px;min-width:var(--collapsed-width);position:fixed;box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-tool-palette-dialog-icon[data-v-43098ce9]{border-bottom:1px solid var(--el-border-color);cursor:default}.ml-tool-palette-dialog-icon[data-v-43098ce9]:hover{color:var(--el-color-primary)}.ml-tool-palette-dialog-layout[data-v-43098ce9]{display:flex;height:100%}.ml-tool-palette-title-bar[data-v-43098ce9]{width:var(--collapsed-width);display:flex;justify-content:left;align-items:center;cursor:move;writing-mode:vertical-rl;text-align:center;background-color:var(--el-fill-color)}.ml-tool-palette-title[data-v-43098ce9]{pointer-events:none;margin-top:10px;margin-bottom:10px;font-size:small;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-tool-palette-content[data-v-43098ce9]{-webkit-user-select:none;user-select:none;flex-grow:1;display:flex;flex-direction:column;background-color:var(--el-fill-color);overflow:hidden}.ml-tool-palette-tabs[data-v-43098ce9]{display:flex;flex-direction:column;height:100%;flex:1}.ml-tool-palette-tabs[data-v-43098ce9] .el-tabs{display:flex;flex-direction:column;height:100%}.ml-tool-palette-tabs[data-v-43098ce9] .el-tabs__header{margin:0;border-bottom:none;order:1;flex-shrink:0;position:relative}.ml-tool-palette-tabs[data-v-43098ce9] .el-tabs__content{flex:1;overflow:auto;padding:0;order:2;min-height:0;position:relative}.ml-tool-palette-tabs[data-v-43098ce9] .el-tab-pane{height:100%;overflow:auto}.ml-tool-palette-default-content[data-v-43098ce9]{flex:1;overflow:auto;display:flex;flex-direction:column}.ml-tool-palette-dialog-layout.left .ml-tool-palette-title-bar[data-v-43098ce9]{order:1}.ml-tool-palette-dialog-layout.left .ml-tool-palette-content[data-v-43098ce9],.ml-tool-palette-dialog-layout.right .ml-tool-palette-title-bar[data-v-43098ce9]{order:2}.ml-tool-palette-dialog-layout.right .ml-tool-palette-content[data-v-43098ce9]{order:1}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { ElIcon as U, ElDropdownItem as ae, ElDropdownMenu as ue, ElDropdown as ce, ElButton as P, ElTooltip as R, ElButtonGroup as re, ElTabPane as ve, ElTabs as de } from "element-plus/es";
 import "element-plus/es/components/base/style/css";
 import "element-plus/es/components/icon/style/css";
-import { openBlock as M, createElementBlock as I, createElementVNode as E, defineComponent as S, mergeModels as V, useModel as U, computed as p, createBlock as $, withCtx as B, resolveDynamicComponent as P, createVNode as D, Fragment as R, renderList as ee, createTextVNode as ve, toDisplayString as F, pushScopeId as te, popScopeId as ne, renderSlot as O, useCssVars as de, normalizeClass as le, normalizeStyle as X, createCommentVNode as oe, ref as m, onMounted as Y, onUnmounted as G, watch as L, onBeforeUnmount as se, unref as j } from "vue";
+import { openBlock as b, createElementBlock as V, createElementVNode as B, defineComponent as Y, mergeModels as D, useModel as H, computed as p, createBlock as $, withCtx as C, resolveDynamicComponent as ee, createVNode as S, Fragment as G, renderList as j, createTextVNode as me, toDisplayString as O, pushScopeId as te, popScopeId as ne, renderSlot as X, useCssVars as he, normalizeClass as le, normalizeStyle as N, createCommentVNode as oe, ref as f, onMounted as W, onUnmounted as q, watch as y, onBeforeUnmount as se, unref as J } from "vue";
 import "element-plus/es/components/dropdown/style/css";
 import "element-plus/es/components/dropdown-menu/style/css";
 import "element-plus/es/components/dropdown-item/style/css";
 import "element-plus/es/components/tooltip/style/css";
 import "element-plus/es/components/button/style/css";
 import "element-plus/es/components/button-group/style/css";
-const me = {
+import "element-plus/es/components/tabs/style/css";
+import "element-plus/es/components/tab-pane/style/css";
+const fe = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
   height: "1em",
   viewBox: "0 0 1024 1024"
-}, he = /* @__PURE__ */ E("path", {
+}, pe = /* @__PURE__ */ B("path", {
   fill: "currentColor",
   d: "M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.59 30.59 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.59 30.59 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0"
-}, null, -1), fe = [
-  he
+}, null, -1), _e = [
+  pe
 ];
-function pe(e, s) {
-  return M(), I("svg", me, [...fe]);
+function we(e, a) {
+  return b(), V("svg", fe, [..._e]);
 }
-const q = { render: pe }, _e = {
+const K = { render: we }, ge = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
   height: "1em",
   viewBox: "0 0 1024 1024"
-}, we = /* @__PURE__ */ E("path", {
+}, be = /* @__PURE__ */ B("path", {
   fill: "currentColor",
   d: "M340.864 149.312a30.59 30.59 0 0 0 0 42.752L652.736 512 340.864 831.872a30.59 30.59 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
-}, null, -1), ge = [
-  we
+}, null, -1), Le = [
+  be
 ];
-function Le(e, s) {
-  return M(), I("svg", _e, [...ge]);
+function xe(e, a) {
+  return b(), V("svg", ge, [...Le]);
 }
-const J = { render: Le }, xe = /* @__PURE__ */ S({
+const Q = { render: xe }, ye = /* @__PURE__ */ Y({
   __name: "MlCollapse",
-  props: /* @__PURE__ */ V({
+  props: /* @__PURE__ */ D({
     size: { default: 18 },
     reverse: { type: Boolean, default: !1 }
   }, {
     modelValue: { default: !0 },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ V(["change"], ["update:modelValue"]),
-  setup(e, { emit: s }) {
-    const t = e, o = U(e, "modelValue"), l = s, n = p(() => t.reverse ? o.value ? q : J : o.value ? J : q), u = p(() => `${t.size}px`), d = () => {
+  emits: /* @__PURE__ */ D(["change"], ["update:modelValue"]),
+  setup(e, { emit: a }) {
+    const t = e, o = H(e, "modelValue"), l = a, n = p(() => t.reverse ? o.value ? K : Q : o.value ? Q : K), u = p(() => `${t.size}px`), m = () => {
       l("change", o.value), o.value = !o.value;
     };
-    return (i, a) => {
-      const r = H;
-      return M(), $(r, {
+    return (s, c) => {
+      const v = U;
+      return b(), $(v, {
         size: u.value,
-        onClick: d
+        onClick: m
       }, {
-        default: B(() => [
-          (M(), $(P(n.value)))
+        default: C(() => [
+          (b(), $(ee(n.value)))
         ]),
         _: 1
       }, 8, ["size"]);
     };
   }
-}), Me = (e) => (te("data-v-3fc33b5d"), e = e(), ne(), e), be = /* @__PURE__ */ Me(() => /* @__PURE__ */ E("svg", {
+}), Me = (e) => (te("data-v-3fc33b5d"), e = e(), ne(), e), Ee = /* @__PURE__ */ Me(() => /* @__PURE__ */ B("svg", {
   preserveAspectRatio: "xMidYMid meet",
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em",
   "data-v-63d067da": ""
 }, [
-  /* @__PURE__ */ E("path", {
+  /* @__PURE__ */ B("path", {
     fill: "currentColor",
     d: "m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"
   })
-], -1)), ye = /* @__PURE__ */ S({
+], -1)), ze = /* @__PURE__ */ Y({
   __name: "MlDropdown",
   props: {
     icon: {},
@@ -85,22 +87,22 @@ const J = { render: Le }, xe = /* @__PURE__ */ S({
   emits: {
     click: null
   },
-  setup(e, { emit: s }) {
-    const t = e, o = s, l = p(() => t.items.filter((u) => u.name !== t.current)), n = (u) => {
+  setup(e, { emit: a }) {
+    const t = e, o = a, l = p(() => t.items.filter((u) => u.name !== t.current)), n = (u) => {
       o("click", u);
     };
-    return (u, d) => {
-      const i = H, a = ue, r = ae, _ = ce;
-      return M(), $(_, { onCommand: n }, {
-        dropdown: B(() => [
-          D(r, null, {
-            default: B(() => [
-              (M(!0), I(R, null, ee(l.value, (c) => (M(), $(a, {
-                key: c.text,
-                command: c.name
+    return (u, m) => {
+      const s = U, c = ae, v = ue, _ = ce;
+      return b(), $(_, { onCommand: n }, {
+        dropdown: C(() => [
+          S(v, null, {
+            default: C(() => [
+              (b(!0), V(G, null, j(l.value, (r) => (b(), $(c, {
+                key: r.text,
+                command: r.name
               }, {
-                default: B(() => [
-                  ve(F(c.text), 1)
+                default: C(() => [
+                  me(O(r.text), 1)
                 ]),
                 _: 2
               }, 1032, ["command"]))), 128))
@@ -108,13 +110,13 @@ const J = { render: Le }, xe = /* @__PURE__ */ S({
             _: 1
           })
         ]),
-        default: B(() => [
-          D(i, {
+        default: C(() => [
+          S(s, {
             size: "30",
             class: "ml-dropdown-icon"
           }, {
-            default: B(() => [
-              be
+            default: C(() => [
+              Ee
             ]),
             _: 1
           })
@@ -123,12 +125,12 @@ const J = { render: Le }, xe = /* @__PURE__ */ S({
       });
     };
   }
-}), A = (e, s) => {
+}), A = (e, a) => {
   const t = e.__vccOpts || e;
-  for (const [o, l] of s)
+  for (const [o, l] of a)
     t[o] = l;
   return t;
-}, N = /* @__PURE__ */ A(ye, [["__scopeId", "data-v-3fc33b5d"]]), ze = '<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" data-v-63d067da=""><path fill="currentColor" d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"></path></svg>', Ee = /* @__PURE__ */ S({
+}, F = /* @__PURE__ */ A(ze, [["__scopeId", "data-v-3fc33b5d"]]), Te = '<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" data-v-63d067da=""><path fill="currentColor" d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"></path></svg>', Ce = /* @__PURE__ */ Y({
   __name: "MlLanguage",
   props: {
     languages: {},
@@ -137,66 +139,66 @@ const J = { render: Le }, xe = /* @__PURE__ */ S({
   emits: {
     click: null
   },
-  setup(e, { emit: s }) {
-    const t = e, o = s, l = (n) => {
+  setup(e, { emit: a }) {
+    const t = e, o = a, l = (n) => {
       o("click", n);
     };
-    return (n, u) => (M(), $(N, {
-      icon: ze,
+    return (n, u) => (b(), $(F, {
+      icon: Te,
       items: t.languages,
       current: t.current,
       onClick: l
     }, null, 8, ["items", "current"]));
   }
-}), Ce = {}, Be = { class: "ml-status-bar" }, ke = { class: "ml-status-bar-left" }, Te = { class: "ml-status-bar-right" };
-function $e(e, s) {
-  return M(), I("div", Be, [
-    E("div", ke, [
-      O(e.$slots, "left", {}, void 0, !0)
+}), Be = {}, ke = { class: "ml-status-bar" }, $e = { class: "ml-status-bar-left" }, Ie = { class: "ml-status-bar-right" };
+function Ve(e, a) {
+  return b(), V("div", ke, [
+    B("div", $e, [
+      X(e.$slots, "left", {}, void 0, !0)
     ]),
-    E("div", Te, [
-      O(e.$slots, "right", {}, void 0, !0)
+    B("div", Ie, [
+      X(e.$slots, "right", {}, void 0, !0)
     ])
   ]);
 }
-const We = /* @__PURE__ */ A(Ce, [["render", $e], ["__scopeId", "data-v-d6a59cf0"]]), Ie = /* @__PURE__ */ S({
+const We = /* @__PURE__ */ A(Be, [["render", Ve], ["__scopeId", "data-v-d6a59cf0"]]), De = /* @__PURE__ */ Y({
   __name: "MlToggleButton",
-  props: /* @__PURE__ */ V({
+  props: /* @__PURE__ */ D({
     size: { default: 30 },
     data: {}
   }, {
     modelValue: { default: !1 },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ V(["click"], ["update:modelValue"]),
-  setup(e, { emit: s }) {
-    de((a) => ({
+  emits: /* @__PURE__ */ D(["click"], ["update:modelValue"]),
+  setup(e, { emit: a }) {
+    he((c) => ({
       "0547f26d": u.value
     }));
-    const t = e, o = U(e, "modelValue"), l = s, n = p(() => o.value ? t.data.onIcon : t.data.offIcon), u = p(() => t.size + "px"), d = p(() => o.value ? t.data.onTooltip : t.data.offTooltip), i = () => {
+    const t = e, o = H(e, "modelValue"), l = a, n = p(() => o.value ? t.data.onIcon : t.data.offIcon), u = p(() => t.size + "px"), m = p(() => o.value ? t.data.onTooltip : t.data.offTooltip), s = () => {
       o.value = !o.value, l("click", o.value);
     };
-    return (a, r) => {
-      const _ = Q, c = Z;
-      return M(), $(c, {
-        content: d.value,
+    return (c, v) => {
+      const _ = P, r = R;
+      return b(), $(r, {
+        content: m.value,
         "hide-after": 0
       }, {
-        default: B(() => [
-          D(_, {
+        default: C(() => [
+          S(_, {
             class: "ml-toggle-button",
             icon: n.value,
-            onClick: i
+            onClick: s
           }, null, 8, ["icon"])
         ]),
         _: 1
       }, 8, ["content"]);
     };
   }
-}), Ve = /* @__PURE__ */ A(Ie, [["__scopeId", "data-v-b676e93b"]]), De = {
+}), Se = /* @__PURE__ */ A(De, [["__scopeId", "data-v-b676e93b"]]), Ye = {
   key: 0,
   class: "ml-toolbar-button-text"
-}, Se = /* @__PURE__ */ S({
+}, Ae = /* @__PURE__ */ Y({
   __name: "MlToolBar",
   props: {
     items: {},
@@ -206,8 +208,8 @@ const We = /* @__PURE__ */ A(Ce, [["render", $e], ["__scopeId", "data-v-d6a59cf0
   emits: {
     click: null
   },
-  setup(e, { emit: s }) {
-    const t = e, o = s, l = p(() => t.direction === "vertical" ? "ml-vertical-toolbar-button-group" : "ml-horizontal-toolbar-button-group"), n = p(() => t.size === "small" ? 20 : 30), u = p(() => {
+  setup(e, { emit: a }) {
+    const t = e, o = a, l = p(() => t.direction === "vertical" ? "ml-vertical-toolbar-button-group" : "ml-horizontal-toolbar-button-group"), n = p(() => t.size === "small" ? 20 : 30), u = p(() => {
       switch (t.size) {
         case "small":
           return 30;
@@ -215,36 +217,36 @@ const We = /* @__PURE__ */ A(Ce, [["render", $e], ["__scopeId", "data-v-d6a59cf0
           return 50;
       }
       return 70;
-    }), d = (r) => r.description ? r.description : r.text, i = p(() => t.size === "large"), a = (r) => {
-      o("click", r);
+    }), m = (v) => v.description ? v.description : v.text, s = p(() => t.size === "large"), c = (v) => {
+      o("click", v);
     };
-    return (r, _) => {
-      const c = H, h = Q, v = Z, f = re;
-      return M(), $(f, {
+    return (v, _) => {
+      const r = U, h = P, d = R, M = re;
+      return b(), $(M, {
         class: le(l.value)
       }, {
-        default: B(() => [
-          (M(!0), I(R, null, ee(r.items, (x, C) => (M(), $(v, {
-            key: x.text,
-            content: d(x),
+        default: C(() => [
+          (b(!0), V(G, null, j(v.items, (E, k) => (b(), $(d, {
+            key: E.text,
+            content: m(E),
             "hide-after": 0
           }, {
-            default: B(() => [
-              (M(), $(h, {
+            default: C(() => [
+              (b(), $(h, {
                 class: "ml-toolbar-button",
-                style: X({ width: u.value + "px", height: u.value + "px" }),
-                key: C,
-                onClick: (k) => a(x.command)
+                style: N({ width: u.value + "px", height: u.value + "px" }),
+                key: k,
+                onClick: (I) => c(E.command)
               }, {
-                default: B(() => [
-                  E("div", null, [
-                    D(c, { size: n.value }, {
-                      default: B(() => [
-                        (M(), $(P(x.icon)))
+                default: C(() => [
+                  B("div", null, [
+                    S(r, { size: n.value }, {
+                      default: C(() => [
+                        (b(), $(ee(E.icon)))
                       ]),
                       _: 2
                     }, 1032, ["size"]),
-                    i.value ? (M(), I("div", De, F(x.text), 1)) : oe("", !0)
+                    s.value ? (b(), V("div", Ye, O(E.text), 1)) : oe("", !0)
                   ])
                 ]),
                 _: 2
@@ -257,391 +259,447 @@ const We = /* @__PURE__ */ A(Ce, [["render", $e], ["__scopeId", "data-v-d6a59cf0
       }, 8, ["class"]);
     };
   }
-}), Ye = /* @__PURE__ */ A(Se, [["__scopeId", "data-v-5261c686"]]), K = 20;
-function Ae(e, s, t) {
-  const o = m(!1), l = (i) => {
+}), He = /* @__PURE__ */ A(Ae, [["__scopeId", "data-v-c6504e33"]]), Z = 20;
+function Oe(e, a, t) {
+  const o = f(!1), l = (s) => {
     if (t.value && e.value) {
-      const a = e.value.getBoundingClientRect(), r = i.clientX < a.left || i.clientX > a.right || i.clientY < a.top || i.clientY > a.bottom;
-      o.value = !r;
+      const c = e.value.getBoundingClientRect(), v = s.clientX < c.left || s.clientX > c.right || s.clientY < c.top || s.clientY > c.bottom;
+      o.value = !v;
     }
   }, n = () => {
     t.value && (o.value = !0);
   }, u = () => {
-    s.value && s.value.addEventListener("mousemove", n), e.value && e.value.addEventListener("mousemove", n);
-  }, d = () => {
-    s.value && s.value.removeEventListener("mousemove", n), e.value && e.value.removeEventListener("mousemove", n);
+    a.value && a.value.addEventListener("mousemove", n), e.value && e.value.addEventListener("mousemove", n);
+  }, m = () => {
+    a.value && a.value.removeEventListener("mousemove", n), e.value && e.value.removeEventListener("mousemove", n);
   };
-  return Y(() => {
+  return W(() => {
     window.addEventListener("mousemove", l);
-  }), G(() => {
+  }), q(() => {
     window.removeEventListener("mousemove", l);
-  }), L(t, (i) => {
-    i && (o.value = !1);
-  }), L(e, (i) => {
-    i ? u() : d();
+  }), y(t, (s) => {
+    s && (o.value = !1);
+  }), y(e, (s) => {
+    s ? u() : m();
   }), { autoOpened: o };
 }
-function He(e, s, t) {
-  const o = m(!1), l = m(null), n = m(null), u = { x: 0, y: 0 }, d = p(() => l.value == null || n.value == null ? { x: 0, y: 0 } : {
+function Xe(e, a, t) {
+  const o = f(!1), l = f(null), n = f(null), u = { x: 0, y: 0 }, m = p(() => l.value == null || n.value == null ? { x: 0, y: 0 } : {
     x: l.value.x - n.value.x,
     y: l.value.y - n.value.y
-  }), i = () => {
+  }), s = () => {
     if (e.value) {
-      const v = e.value.getBoundingClientRect();
+      const d = e.value.getBoundingClientRect();
       n.value = {
-        x: v.left,
-        y: v.top
+        x: d.left,
+        y: d.top
       }, l.value = {
-        x: v.left,
-        y: v.top
+        x: d.left,
+        y: d.top
       };
     }
-  }, a = () => {
+  }, c = () => {
     e.value && e.value.addEventListener("mousedown", _);
-  }, r = () => {
+  }, v = () => {
     e.value && e.value.removeEventListener("mousedown", _);
-  }, _ = (v) => {
+  }, _ = (d) => {
     if (e.value != null) {
-      if (s && s.value) {
-        const f = s.value.getBoundingClientRect();
-        if (v.clientX < f.left || v.clientX > f.right || v.clientY < f.top || v.clientY > f.bottom) return;
+      if (a && a.value) {
+        const M = a.value.getBoundingClientRect();
+        if (d.clientX < M.left || d.clientX > M.right || d.clientY < M.top || d.clientY > M.bottom) return;
       }
-      o.value = !0, u.x = v.clientX, u.y = v.clientY, i(), document.addEventListener("mousemove", c), document.addEventListener("mouseup", h);
+      o.value = !0, u.x = d.clientX, u.y = d.clientY, s(), document.addEventListener("mousemove", r), document.addEventListener("mouseup", h);
     }
-  }, c = (v) => {
+  }, r = (d) => {
     if (o.value && n.value && l.value) {
-      const f = window.innerWidth, x = window.innerHeight, C = e.value, k = C.getBoundingClientRect(), z = k.width, w = k.height, W = n.value.x + (v.clientX - u.x), y = n.value.y + (v.clientY - u.y);
+      const M = window.innerWidth, E = window.innerHeight, k = e.value, I = k.getBoundingClientRect(), T = I.width, i = I.height, L = n.value.x + (d.clientX - u.x), w = n.value.y + (d.clientY - u.y);
       l.value.x = Math.max(
         t ? t.value.offset.value.left : 0,
-        W
+        L
       );
-      const g = f - z;
+      const g = M - T;
       l.value.x = Math.min(
         t ? g - t.value.offset.value.right : g,
         l.value.x
       ), l.value.y = Math.max(
         t ? t.value.offset.value.top : 0,
-        Math.min(y, x - w)
+        Math.min(w, E - i)
       );
-      const b = x - w;
+      const z = E - i;
       l.value.y = Math.min(
-        t ? b - t.value.offset.value.bottom : b,
+        t ? z - t.value.offset.value.bottom : z,
         l.value.y
-      ), C.style.left = l.value.x + "px", C.style.top = l.value.y + "px";
+      ), k.style.left = l.value.x + "px", k.style.top = l.value.y + "px";
     }
   }, h = () => {
-    o.value = !1, document.removeEventListener("mousemove", c), document.removeEventListener("mouseup", h);
+    o.value = !1, document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", h);
   };
-  return Y(() => {
-    e.value && (i(), a());
-  }), G(() => {
+  return W(() => {
+    e.value && (s(), c());
+  }), q(() => {
     e.value && e.value.removeEventListener("mousedown", _);
-  }), L(e, (v) => {
-    v ? (i(), a()) : r();
+  }), y(e, (d) => {
+    d ? (s(), c()) : v();
   }), {
     isDragging: o,
-    movement: d,
+    movement: m,
     position: l
   };
 }
-function Oe(e, s, t) {
-  const o = m(!1), l = m("left"), { isDragging: n, movement: u, position: d } = He(
+function Ue(e, a, t) {
+  const o = f(!1), l = f("left"), { isDragging: n, movement: u, position: m } = Xe(
     e,
-    s,
+    a,
     t
   );
-  return L(u, (i) => {
-    if (i && e.value) {
-      const r = e.value.getBoundingClientRect();
-      r.left <= t.value.offset.value.left ? (l.value = "left", o.value = !0) : window.innerWidth - r.left - r.width <= t.value.offset.value.right ? (l.value = "right", o.value = !0) : o.value = !1;
+  return y(u, (s) => {
+    if (s && e.value) {
+      const v = e.value.getBoundingClientRect();
+      v.left <= t.value.offset.value.left ? (l.value = "left", o.value = !0) : window.innerWidth - v.left - v.width <= t.value.offset.value.right ? (l.value = "right", o.value = !0) : o.value = !1;
     }
   }), {
     docked: o,
     orientation: l,
     isDragging: n,
     movement: u,
-    position: d
+    position: m
   };
 }
-function Xe(e, s, t, o) {
-  const l = m(null), n = m(null), u = m(null), d = m(null);
-  return L(e, (i, a) => {
-    l.value = a;
-  }), L(s, (i, a) => {
-    n.value = a;
-  }), L(t, (i, a) => {
-    u.value = a;
-  }), L(o, (i, a) => {
-    d.value = a;
+function Ne(e, a, t, o) {
+  const l = f(null), n = f(null), u = f(null), m = f(null);
+  return y(e, (s, c) => {
+    l.value = c;
+  }), y(a, (s, c) => {
+    n.value = c;
+  }), y(t, (s, c) => {
+    u.value = c;
+  }), y(o, (s, c) => {
+    m.value = c;
   }), {
     lastLeft: l,
     lastTop: n,
     lastWidth: u,
-    lastHeight: d
+    lastHeight: m
   };
 }
-function Ne(e, s, t, o) {
-  const l = m(e.value.width), n = m(e.value.left), u = p(() => e.value.width), d = p(() => e.value.left), i = p(() => t.value ? t.value.x : null);
-  return L([u, d], ([a, r]) => {
-    (l.value == null || n.value == null || s.value) && (l.value = a, n.value = r);
-  }), L(i, (a) => {
-    o.value && t.value && (n.value = a);
+function Fe(e, a, t, o) {
+  const l = f(e.value.width), n = f(e.value.left), u = p(() => e.value.width), m = p(() => e.value.left), s = p(() => t.value ? t.value.x : null);
+  return y([u, m], ([c, v]) => {
+    (l.value == null || n.value == null || a.value) && (l.value = c, n.value = v);
+  }), y(s, (c) => {
+    o.value && t.value && (n.value = c);
   }), { left: n, width: l };
 }
-function Ue(e, s = m({ left: 0, right: 0, top: 0, bottom: 0 })) {
-  const t = m({});
+function Ge(e, a = f({ left: 0, right: 0, top: 0, bottom: 0 })) {
+  const t = f({});
   let o = !1;
   const l = () => {
     if (!o && e.value) {
       const n = e.value.getBoundingClientRect();
-      t.value.left = Math.max(n.left, s.value.left), t.value.top = Math.max(n.top, s.value.top), t.value.width = n.width, t.value.height = n.height, o = !0;
+      t.value.left = Math.max(n.left, a.value.left), t.value.top = Math.max(n.top, a.value.top), t.value.width = n.width, t.value.height = n.height, o = !0;
     }
   };
-  return Y(() => {
+  return W(() => {
     e.value && l();
-  }), L(e, (n) => {
+  }), y(e, (n) => {
     n && l();
   }), {
     isIntialized: o,
     initialRect: t
   };
 }
-function Fe(e, s = m(!1), t = m(!1), o = m({ left: 0, right: 0, top: 0, bottom: 0 }), l = { width: 20, height: 40 }) {
-  const { initialRect: n } = Ue(e, o), u = m(!1);
-  let d = 0, i = 0, a = 0, r = 0, _ = 0;
-  const c = 5, h = m(null), v = (z) => {
-    if (!(!e.value || s.value))
+function je(e, a = f(!1), t = f(!1), o = f({ left: 0, right: 0, top: 0, bottom: 0 }), l = { width: 20, height: 40 }) {
+  const { initialRect: n } = Ge(e, o), u = f(!1);
+  let m = 0, s = 0, c = 0, v = 0, _ = 0;
+  const r = 5, h = f(null), d = (T) => {
+    if (!(!e.value || a.value))
       if (u.value) {
-        const w = z.clientX - r, W = z.clientY - _;
+        const i = T.clientX - v, L = T.clientY - _;
         if (h.value === "left" || h.value === "left-bottom-corner") {
-          const y = i - w;
-          y > l.width && (n.value.width = y, n.value.left = d + w, e.value.style.left = n.value.left + "px", e.value.style.width = n.value.width + "px");
+          const w = s - i;
+          w > l.width && (n.value.width = w, n.value.left = m + i, e.value.style.left = n.value.left + "px", e.value.style.width = n.value.width + "px");
         }
         if (h.value === "right" || h.value === "right-bottom-corner") {
-          const y = i + w;
-          y > l.width && (n.value.width = y, e.value.style.width = n.value.width + "px");
+          const w = s + i;
+          w > l.width && (n.value.width = w, e.value.style.width = n.value.width + "px");
         }
         if (h.value === "bottom" || h.value === "left-bottom-corner" || h.value === "right-bottom-corner") {
-          const y = a + W;
-          y > l.height && (n.value.height = y, e.value.style.height = n.value.height + "px");
+          const w = c + L;
+          w > l.height && (n.value.height = w, e.value.style.height = n.value.height + "px");
         }
       } else {
-        const w = e.value.getBoundingClientRect(), W = z.clientX - w.left, y = z.clientY - w.top, g = W <= c, b = W >= w.width - c, T = y >= w.height - c;
-        g && T && t.value ? (e.value.style.cursor = "nesw-resize", h.value = "left-bottom-corner") : b && T && !t.value ? (e.value.style.cursor = "nwse-resize", h.value = "right-bottom-corner") : g && t.value ? (e.value.style.cursor = "ew-resize", h.value = "left") : b && !t.value ? (e.value.style.cursor = "ew-resize", h.value = "right") : T ? (e.value.style.cursor = "ns-resize", h.value = "bottom") : (e.value.style.cursor = "", h.value = null);
+        const i = e.value.getBoundingClientRect(), L = T.clientX - i.left, w = T.clientY - i.top, g = L <= r, z = L >= i.width - r, x = w >= i.height - r;
+        g && x && t.value ? (e.value.style.cursor = "nesw-resize", h.value = "left-bottom-corner") : z && x && !t.value ? (e.value.style.cursor = "nwse-resize", h.value = "right-bottom-corner") : g && t.value ? (e.value.style.cursor = "ew-resize", h.value = "left") : z && !t.value ? (e.value.style.cursor = "ew-resize", h.value = "right") : x ? (e.value.style.cursor = "ns-resize", h.value = "bottom") : (e.value.style.cursor = "", h.value = null);
       }
-  }, f = (z) => {
+  }, M = (T) => {
     if (!e.value || !h.value) return;
-    const w = e.value.getBoundingClientRect();
-    r = z.clientX, _ = z.clientY, i = w.width, a = w.height, d = w.left, n.value.width = i, n.value.height = a, n.value.left = w.left, n.value.top = w.top, u.value = !0, document.addEventListener("mousemove", v), document.addEventListener("mouseup", x);
-  }, x = () => {
-    u.value = !1, h.value = null, e.value && (e.value.style.cursor = ""), document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", x);
-  }, C = () => {
-    e.value && (e.value.removeEventListener("mousedown", f), e.value.removeEventListener("mousemove", v)), document.removeEventListener("mouseup", x);
+    const i = e.value.getBoundingClientRect();
+    v = T.clientX, _ = T.clientY, s = i.width, c = i.height, m = i.left, n.value.width = s, n.value.height = c, n.value.left = i.left, n.value.top = i.top, u.value = !0, document.addEventListener("mousemove", d), document.addEventListener("mouseup", E);
+  }, E = () => {
+    u.value = !1, h.value = null, e.value && (e.value.style.cursor = ""), document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", E);
   }, k = () => {
-    e.value && (e.value.addEventListener("mousedown", f), e.value.addEventListener("mousemove", v));
+    e.value && (e.value.removeEventListener("mousedown", M), e.value.removeEventListener("mousemove", d)), document.removeEventListener("mouseup", E);
+  }, I = () => {
+    e.value && (e.value.addEventListener("mousedown", M), e.value.addEventListener("mousemove", d));
   };
-  return Y(() => {
-    e.value && k();
+  return W(() => {
+    e.value && I();
   }), se(() => {
-    C();
-  }), L(e, (z) => {
-    z ? k() : C();
+    k();
+  }), y(e, (T) => {
+    T ? I() : k();
   }), { rect: n, isResizing: u };
 }
-function Ge(e, s, t, o) {
+function qe(e, a, t, o) {
   const l = () => {
     if (e.value) {
-      const i = e.value;
-      s.value ? i.style.transition = "width 0.3s ease-out, left 0.3s ease-out" : i.style.transition = "width 0.3s ease";
+      const s = e.value;
+      a.value ? s.style.transition = "width 0.3s ease-out, left 0.3s ease-out" : s.style.transition = "width 0.3s ease";
     }
   }, n = () => {
     e.value && (e.value.style.transition = "");
   }, u = () => {
     e.value && e.value.removeEventListener("transitionend", n);
-  }, d = () => {
+  }, m = () => {
     e.value && e.value.addEventListener("transitionend", n);
   };
-  Y(() => {
+  W(() => {
     e.value && e.value.addEventListener("transitionend", n);
   }), se(() => {
     e.value && e.value.removeEventListener("transitionend", n);
-  }), L(e, (i) => {
-    i ? d() : u();
-  }), L(t, () => {
+  }), y(e, (s) => {
+    s ? m() : u();
+  }), y(t, () => {
     l();
-  }), L(o, () => {
+  }), y(o, () => {
     l();
   });
 }
-function je(e, s, t, o) {
-  const l = m(window.innerWidth), n = m(window.innerHeight), { docked: u, orientation: d, movement: i, position: a, isDragging: r } = Oe(
+function Je(e, a, t, o) {
+  const l = f(window.innerWidth), n = f(window.innerHeight), { docked: u, orientation: m, movement: s, position: c, isDragging: v } = Ue(
     e,
-    s,
+    a,
     o
-  ), _ = p(() => d.value === "right"), { rect: c, isResizing: h } = Fe(
+  ), _ = p(() => m.value === "right"), { rect: r, isResizing: h } = je(
     e,
     t,
     _,
     o.value.offset
-  ), { width: v, left: f } = Ne(
-    c,
+  ), { width: d, left: M } = Fe(
+    r,
     h,
-    a,
-    r
-  ), { lastTop: x, lastHeight: C } = Xe(
-    p(() => c.value.left),
-    p(() => c.value.top),
-    p(() => c.value.width),
-    p(() => c.value.height)
-  ), { autoOpened: k } = Ae(e, s, t);
-  Ge(e, _, t, k);
-  const z = (g) => {
+    c,
+    v
+  ), { lastTop: E, lastHeight: k } = Ne(
+    p(() => r.value.left),
+    p(() => r.value.top),
+    p(() => r.value.width),
+    p(() => r.value.height)
+  ), { autoOpened: I } = Oe(e, a, t);
+  qe(e, _, t, I);
+  const T = (g) => {
     if (e.value) {
-      const b = e.value.getBoundingClientRect(), T = b.left + g;
+      const z = e.value.getBoundingClientRect(), x = z.left + g;
       if (_.value) {
-        c.value.left = T;
-        const ie = window.innerWidth - b.width - b.left;
-        b.left <= 0 && ie >= 0 && g < 0 && (c.value.left = Math.max(0, T)), window.innerWidth - b.width <= 0 && (c.value.left = window.innerWidth - b.width);
+        r.value.left = x;
+        const ie = window.innerWidth - z.width - z.left;
+        z.left <= 0 && ie >= 0 && g < 0 && (r.value.left = Math.max(0, x)), window.innerWidth - z.width <= 0 && (r.value.left = window.innerWidth - z.width);
       } else
-        b.left + b.width >= window.innerWidth && g < 0 && (c.value.left = Math.max(0, T));
+        z.left + z.width >= window.innerWidth && g < 0 && (r.value.left = Math.max(0, x));
     }
-  }, w = () => {
+  }, i = () => {
     const g = window.innerWidth - l.value;
-    l.value = window.innerWidth, n.value = window.innerHeight, z(g);
+    l.value = window.innerWidth, n.value = window.innerHeight, T(g);
   };
-  Y(() => {
-    window.addEventListener("resize", w);
-  }), G(() => {
-    window.removeEventListener("resize", w);
+  W(() => {
+    window.addEventListener("resize", i);
+  }), q(() => {
+    window.removeEventListener("resize", i);
   });
-  const W = (g) => {
-    g ? (c.value.width = K, _.value && f.value && v.value && (c.value.left = f.value + v.value - K)) : (c.value.width = v.value, _.value && f.value && v.value && (c.value.left = f.value));
-  }, y = () => {
-    u.value ? (c.value.top = o.value.offset.value.top, c.value.height = window.innerHeight - o.value.offset.value.top - o.value.offset.value.bottom) : (c.value.top = x.value, c.value.height = C.value);
+  const L = (g) => {
+    g ? (r.value.width = Z, _.value && M.value && d.value && (r.value.left = M.value + d.value - Z)) : (r.value.width = d.value, _.value && M.value && d.value && (r.value.left = M.value));
+  }, w = () => {
+    u.value ? (r.value.top = o.value.offset.value.top, r.value.height = window.innerHeight - o.value.offset.value.top - o.value.offset.value.bottom) : (r.value.top = E.value, r.value.height = k.value);
   };
-  return L(u, () => {
-    y();
-  }), L(t, (g) => {
-    W(g);
-  }), L(k, (g) => {
-    t.value && !r.value && W(!g);
-  }), L(i, (g) => {
+  return y(u, () => {
+    w();
+  }), y(t, (g) => {
+    L(g);
+  }), y(I, (g) => {
+    t.value && !v.value && L(!g);
+  }), y(s, (g) => {
     if (g && e.value) {
-      const T = e.value.getBoundingClientRect();
-      c.value.left = T.left, c.value.top = T.top;
+      const x = e.value.getBoundingClientRect();
+      r.value.left = x.left, r.value.top = x.top;
     }
-  }), { rect: c, orientation: d, reversed: _ };
+  }), { rect: r, orientation: m, reversed: _ };
 }
-const qe = (e) => (te("data-v-8645db4f"), e = e(), ne(), e), Je = /* @__PURE__ */ qe(() => /* @__PURE__ */ E("svg", {
+const Ke = (e) => (te("data-v-43098ce9"), e = e(), ne(), e), Qe = /* @__PURE__ */ Ke(() => /* @__PURE__ */ B("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
   height: "1em",
   viewBox: "0 0 1024 1024"
 }, [
-  /* @__PURE__ */ E("path", {
+  /* @__PURE__ */ B("path", {
     fill: "currentColor",
     d: "M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
   })
-], -1)), Ke = { class: "ml-tool-palette-title" }, Qe = { class: "ml-tool-palette-content" }, Ze = /* @__PURE__ */ S({
+], -1)), Ze = { class: "ml-tool-palette-title" }, Pe = { class: "ml-tool-palette-content" }, Re = {
+  key: 1,
+  class: "ml-tool-palette-default-content"
+}, et = /* @__PURE__ */ Y({
   __name: "MlToolPalette",
-  props: /* @__PURE__ */ V({
+  props: /* @__PURE__ */ D({
     title: { default: "" },
+    tabs: { default: void 0 },
     leftOffset: { default: 0 },
     rightOffset: { default: 0 },
     topOffset: { default: 0 },
     bottomOffset: { default: 0 }
   }, {
     modelValue: { default: !0 },
-    modelModifiers: {}
+    modelModifiers: {},
+    activeTab: { default: "" },
+    activeTabModifiers: {}
   }),
-  emits: /* @__PURE__ */ V(["close"], ["update:modelValue"]),
-  setup(e, { emit: s }) {
-    const t = e, o = U(e, "modelValue"), l = s, n = m(!1), u = m(null), d = m(null), i = p(() => ({
-      offset: m({
+  emits: /* @__PURE__ */ D(["close", "tab-change", "tab-close"], ["update:modelValue", "update:activeTab"]),
+  setup(e, { emit: a }) {
+    const t = e, o = H(e, "modelValue"), l = H(e, "activeTab"), n = a, u = p(() => t.tabs && t.tabs.length > 0);
+    W(() => {
+      u.value && !l.value && t.tabs && t.tabs.length > 0 && (l.value = t.tabs[0].name);
+    }), y(() => t.tabs, (i) => {
+      i && i.length > 0 && !l.value && (l.value = i[0].name);
+    }, { immediate: !0 });
+    const m = f(!1), s = f(null), c = f(null), v = p(() => ({
+      offset: f({
         left: t.leftOffset,
         right: t.rightOffset,
         top: t.topOffset,
         bottom: t.bottomOffset
       })
     })), {
-      rect: a,
+      rect: _,
       orientation: r,
-      reversed: _
-    } = je(d, u, n, i), c = p(() => ({
-      left: `${a.value.left}px`,
-      top: `${a.value.top}px`,
-      width: `${a.value.width}px`,
-      height: `${a.value.height}px`
-    })), h = p(() => _.value ? {
+      reversed: h
+    } = Je(c, s, m, v), d = p(() => ({
+      left: `${_.value.left}px`,
+      top: `${_.value.top}px`,
+      width: `${_.value.width}px`,
+      height: `${_.value.height}px`
+    })), M = p(() => h.value ? {
       borderLeft: "1px solid var(--el-border-color)",
       borderRight: null
     } : {
       borderLeft: null,
       borderRight: "1px solid var(--el-border-color)"
-    }), v = () => {
+    }), E = p(() => {
+      if (u.value && l.value && t.tabs) {
+        const i = t.tabs.find((L) => L.name === l.value);
+        if (i && i.title)
+          return i.title;
+      }
+      return t.title;
+    }), k = () => {
       o.value = !1;
-      const f = d.value;
-      l("close", {
-        x: f ? f.clientLeft : 0,
-        y: f ? f.clientTop : 0
+      const i = c.value;
+      n("close", {
+        x: i ? i.clientLeft : 0,
+        y: i ? i.clientTop : 0
       });
+    }, I = (i) => {
+      n("tab-change", i);
+    }, T = (i) => {
+      if (n("tab-close", i), l.value === i && t.tabs) {
+        const L = t.tabs.findIndex((w) => w.name === i);
+        if (L >= 0) {
+          const w = t.tabs[L + 1] || t.tabs[L - 1];
+          w && (l.value = w.name);
+        }
+      }
     };
-    return (f, x) => {
-      const C = H;
-      return o.value ? (M(), I("div", {
+    return (i, L) => {
+      const w = U, g = ve, z = de;
+      return o.value ? (b(), V("div", {
         key: 0,
         ref_key: "toolPaletteElement",
-        ref: d,
-        style: X([c.value]),
+        ref: c,
+        style: N([d.value]),
         class: "ml-tool-palette-dialog"
       }, [
-        E("div", {
-          class: le(["ml-tool-palette-dialog-layout", j(r)])
+        B("div", {
+          class: le(["ml-tool-palette-dialog-layout", J(r)])
         }, [
-          E("div", {
+          B("div", {
             ref_key: "titleBarElement",
-            ref: u,
+            ref: s,
             class: "ml-tool-palette-title-bar",
-            style: X(h.value)
+            style: N(M.value)
           }, [
-            D(C, {
+            S(w, {
               size: 18,
               class: "ml-tool-palette-dialog-icon",
-              onClick: v
+              onClick: k
             }, {
-              default: B(() => [
-                Je
+              default: C(() => [
+                Qe
               ]),
               _: 1
             }),
-            D(xe, {
+            S(ye, {
               class: "ml-tool-palette-dialog-icon",
-              modelValue: n.value,
-              "onUpdate:modelValue": x[0] || (x[0] = (k) => n.value = k),
-              reverse: j(_)
+              modelValue: m.value,
+              "onUpdate:modelValue": L[0] || (L[0] = (x) => m.value = x),
+              reverse: J(h)
             }, null, 8, ["modelValue", "reverse"]),
-            E("span", Ke, F(t.title), 1)
+            B("span", Ze, O(E.value), 1)
           ], 4),
-          E("div", Qe, [
-            O(f.$slots, "default", {}, void 0, !0)
+          B("div", Pe, [
+            u.value ? (b(), $(z, {
+              key: 0,
+              modelValue: l.value,
+              "onUpdate:modelValue": L[1] || (L[1] = (x) => l.value = x),
+              type: "border-card",
+              class: "ml-tool-palette-tabs",
+              onTabRemove: T,
+              onTabChange: I
+            }, {
+              default: C(() => [
+                (b(!0), V(G, null, j(t.tabs, (x) => (b(), $(g, {
+                  key: x.name,
+                  name: x.name,
+                  label: x.label
+                }, {
+                  label: C(() => [
+                    B("span", null, O(x.label), 1)
+                  ]),
+                  default: C(() => [
+                    X(i.$slots, `tab-${x.name}`, {}, void 0, !0)
+                  ]),
+                  _: 2
+                }, 1032, ["name", "label"]))), 128))
+              ]),
+              _: 3
+            }, 8, ["modelValue"])) : (b(), V("div", Re, [
+              X(i.$slots, "default", {}, void 0, !0)
+            ]))
           ])
         ], 2)
       ], 4)) : oe("", !0);
     };
   }
-}), Pe = /* @__PURE__ */ A(Ze, [["__scopeId", "data-v-8645db4f"]]), ct = {
+}), tt = /* @__PURE__ */ A(et, [["__scopeId", "data-v-43098ce9"]]), ht = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   install(e) {
-    e.component("MlCollapse", N), e.component("MlDropdown", N), e.component("MlLanguage", Ee), e.component("MlStatusBar", We), e.component("MlToggleButton", Ve), e.component("MlToolBar", Ye), e.component("MlToolPalette", Pe);
+    e.component("MlCollapse", F), e.component("MlDropdown", F), e.component("MlLanguage", Ce), e.component("MlStatusBar", We), e.component("MlToggleButton", Se), e.component("MlToolBar", He), e.component("MlToolPalette", tt);
   }
 };
 export {
-  xe as MlCollapse,
-  N as MlDropdown,
-  Ee as MlLanguage,
+  ye as MlCollapse,
+  F as MlDropdown,
+  Ce as MlLanguage,
   We as MlStatusBar,
-  Ve as MlToggleButton,
-  Ye as MlToolBar,
-  Pe as MlToolPalette,
-  ct as default
+  Se as MlToggleButton,
+  He as MlToolBar,
+  tt as MlToolPalette,
+  ht as default
 };