@vef-framework/starter 1.0.135 → 2.0.1

package/dist/es/components/layout/components/search/search-result.js

@@ -0,0 +1,131 @@
+/*! @vef-framework/starter v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:38.668Z */
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { globalCssVars, Empty } from '@vef-framework/components';
+import { AnimatePresence, motion } from '@vef-framework/core';
+import { useHotkeys } from '@vef-framework/hooks';
+import { getPinyinInitials, getPinyin } from '@vef-framework/shared';
+import { useMemo, useState, useEffect } from 'react';
+import '../../../../stores/index.js';
+import '../../hooks/index.js';
+import { useLayoutStore } from '../../store.js';
+import { SearchResultItem } from './search-result-item.js';
+import { useAppStore } from '../../../../stores/app.js';
+import { useMenuNavigate } from '../../hooks/use-menu-navigate.js';
+
+const resultStyle = /* @__PURE__ */ css({
+  display: "flex",
+  flexDirection: "column",
+  rowGap: globalCssVars.spacingSm
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy92ZW51cy9WRUYvdmVmLWZyYW1ld29yay1yZWFjdC9wYWNrYWdlcy9zdGFydGVyL3NyYy9jb21wb25lbnRzL2xheW91dC9jb21wb25lbnRzL3NlYXJjaC9zZWFyY2gtcmVzdWx0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQm9CIiwiZmlsZSI6Ii9Vc2Vycy92ZW51cy9WRUYvdmVmLWZyYW1ld29yay1yZWFjdC9wYWNrYWdlcy9zdGFydGVyL3NyYy9jb21wb25lbnRzL2xheW91dC9jb21wb25lbnRzL3NlYXJjaC9zZWFyY2gtcmVzdWx0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgV2l0aFBpbnlpbiB9IGZyb20gXCJAdmVmLWZyYW1ld29yay9zaGFyZWRcIjtcblxuaW1wb3J0IHR5cGUgeyBVc2VyTWVudSB9IGZyb20gXCIuLi8uLi8uLi8uLi90eXBlc1wiO1xuXG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCB7IEVtcHR5LCBnbG9iYWxDc3NWYXJzIH0gZnJvbSBcIkB2ZWYtZnJhbWV3b3JrL2NvbXBvbmVudHNcIjtcbmltcG9ydCB7IEFuaW1hdGVQcmVzZW5jZSwgbW90aW9uIH0gZnJvbSBcIkB2ZWYtZnJhbWV3b3JrL2NvcmVcIjtcbmltcG9ydCB7IHVzZUhvdGtleXMgfSBmcm9tIFwiQHZlZi1mcmFtZXdvcmsvaG9va3NcIjtcbmltcG9ydCB7IGdldFBpbnlpbiwgZ2V0UGlueWluSW5pdGlhbHMgfSBmcm9tIFwiQHZlZi1mcmFtZXdvcmsvc2hhcmVkXCI7XG5pbXBvcnQgeyB1c2VFZmZlY3QsIHVzZU1lbW8sIHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCI7XG5cbmltcG9ydCB7IHVzZUFwcFN0b3JlIH0gZnJvbSBcIi4uLy4uLy4uLy4uL3N0b3Jlc1wiO1xuaW1wb3J0IHsgdXNlTWVudU5hdmlnYXRlIH0gZnJvbSBcIi4uLy4uL2hvb2tzXCI7XG5pbXBvcnQgeyB1c2VMYXlvdXRTdG9yZSB9IGZyb20gXCIuLi8uLi9zdG9yZVwiO1xuaW1wb3J0IHsgU2VhcmNoUmVzdWx0SXRlbSB9IGZyb20gXCIuL3NlYXJjaC1yZXN1bHQtaXRlbVwiO1xuXG5pbnRlcmZhY2UgU2VhcmNoUmVzdWx0UHJvcHMge1xuICBrZXl3b3JkOiBzdHJpbmc7XG59XG5cbnR5cGUgTWVudUl0ZW0gPSBXaXRoUGlueWluPFVzZXJNZW51LCBcIm5hbWVcIj47XG5cbmNvbnN0IHJlc3VsdFN0eWxlID0gY3NzKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gIHJvd0dhcDogZ2xvYmFsQ3NzVmFycy5zcGFjaW5nU21cbn0pO1xuXG5leHBvcnQgZnVuY3Rpb24gU2VhcmNoUmVzdWx0KHsga2V5d29yZCB9OiBTZWFyY2hSZXN1bHRQcm9wcykge1xuICBjb25zdCBzZXRJc1NlYXJjaFZpc2libGUgPSB1c2VMYXlvdXRTdG9yZShzdGF0ZSA9PiBzdGF0ZS5zZXRJc1NlYXJjaFZpc2libGUpO1xuICBjb25zdCB1c2VyTWVudU1hcCA9IHVzZUFwcFN0b3JlKHN0YXRlID0+IHN0YXRlLnVzZXJNZW51TWFwKTtcbiAgY29uc3QgbWVudUl0ZW1zID0gdXNlTWVtbyhcbiAgICAoKSA9PiBidWlsZE1lbnVJdGVtcyh1c2VyTWVudU1hcCA/IFsuLi51c2VyTWVudU1hcC52YWx1ZXMoKV0gOiBbXSksXG4gICAgW3VzZXJNZW51TWFwXVxuICApO1xuICBjb25zdCBtYXRjaGVkTWVudUl0ZW1zID0gdXNlTWVtbyhcbiAgICAoKSA9PiBtZW51SXRlbXMuZmlsdGVyKGl0ZW0gPT4gbWF0Y2goaXRlbSwga2V5d29yZCkpLFxuICAgIFttZW51SXRlbXMsIGtleXdvcmRdXG4gICk7XG4gIGNvbnN0IFthY3RpdmVNZW51UGF0aCwgc2V0QWN0aXZlTWVudVBhdGhdID0gdXNlU3RhdGU8c3RyaW5nPigpO1xuXG4gIGNvbnN0IGhhbmRsZU1lbnVTZWxlY3QgPSAob2Zmc2V0OiAxIHwgLTEpID0+IHtcbiAgICBjb25zdCB7IGxlbmd0aCB9ID0gbWF0Y2hlZE1lbnVJdGVtcztcblxuICAgIGlmIChsZW5ndGggPT09IDApIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBjb25zdCBpbmRleCA9IG1hdGNoZWRNZW51SXRlbXMuZmluZEluZGV4KGl0ZW0gPT4gaXRlbS5wYXRoID09PSBhY3RpdmVNZW51UGF0aCk7XG5cbiAgICBpZiAoaW5kZXggPT09IC0xKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgY29uc3QgbmV3SW5kZXggPSAoaW5kZXggKyBvZmZzZXQgKyBsZW5ndGgpICUgbGVuZ3RoO1xuICAgIHNldEFjdGl2ZU1lbnVQYXRoKG1hdGNoZWRNZW51SXRlbXNbbmV3SW5kZXhdIS5wYXRoKTtcbiAgfTtcblxuICBjb25zdCBuYXZpZ2F0ZSA9IHVzZU1lbnVOYXZpZ2F0ZSgpO1xuICB1c2VIb3RrZXlzKFwiZXNjXCIsICgpID0+IHNldElzU2VhcmNoVmlzaWJsZShmYWxzZSksIHsgZW5hYmxlT25Gb3JtVGFnczogdHJ1ZSB9KTtcbiAgdXNlSG90a2V5cyhcImVudGVyXCIsICgpID0+IHtcbiAgICBpZiAoIWFjdGl2ZU1lbnVQYXRoKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgc2V0SXNTZWFyY2hWaXNpYmxlKGZhbHNlKTtcbiAgICBjb25zdCBtZW51ID0gdXNlck1lbnVNYXA/LmdldChhY3RpdmVNZW51UGF0aCk7XG5cbiAgICBpZiAobWVudSkge1xuICAgICAgbmF2aWdhdGUobWVudSk7XG4gICAgfVxuICB9LCB7IGVuYWJsZU9uRm9ybVRhZ3M6IHRydWUgfSk7XG4gIHVzZUhvdGtleXMoXCJ1cFwiLCAoKSA9PiBoYW5kbGVNZW51U2VsZWN0KC0xKSwgeyBlbmFibGVPbkZvcm1UYWdzOiB0cnVlIH0pO1xuICB1c2VIb3RrZXlzKFwiZG93blwiLCAoKSA9PiBoYW5kbGVNZW51U2VsZWN0KDEpLCB7IGVuYWJsZU9uRm9ybVRhZ3M6IHRydWUgfSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAobWF0Y2hlZE1lbnVJdGVtcy5sZW5ndGggPiAwKSB7XG4gICAgICBjb25zdCB7IHBhdGggfSA9IG1hdGNoZWRNZW51SXRlbXNbMF0hO1xuXG4gICAgICBzZXRBY3RpdmVNZW51UGF0aChwYXRoKTtcbiAgICB9XG4gIH0sIFttYXRjaGVkTWVudUl0ZW1zXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2IGNzcz17cmVzdWx0U3R5bGV9PlxuICAgICAgPEFuaW1hdGVQcmVzZW5jZT5cbiAgICAgICAge21hdGNoZWRNZW51SXRlbXMubWFwKChpdGVtLCBpbmRleCkgPT4gKFxuICAgICAgICAgIDxtb3Rpb24uZGl2XG4gICAgICAgICAgICBrZXk9e2l0ZW0ucGF0aH1cbiAgICAgICAgICAgIGxheW91dFxuICAgICAgICAgICAgYW5pbWF0ZT17eyBvcGFjaXR5OiAxLCB5OiAwIH19XG4gICAgICAgICAgICBpbml0aWFsPXt7IG9wYWNpdHk6IDAsIHk6IDIwIH19XG4gICAgICAgICAgICB0cmFuc2l0aW9uPXt7XG4gICAgICAgICAgICAgIGR1cmF0aW9uOiAwLjMsXG4gICAgICAgICAgICAgIGRlbGF5OiBpbmRleCAqIDAuMDUsXG4gICAgICAgICAgICAgIGVhc2U6IFwiZWFzZU91dFwiXG4gICAgICAgICAgICB9fVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxTZWFyY2hSZXN1bHRJdGVtXG4gICAgICAgICAgICAgIGFjdGl2ZT17YWN0aXZlTWVudVBhdGggPT09IGl0ZW0ucGF0aH1cbiAgICAgICAgICAgICAgaWNvbj17aXRlbS5pY29uID09PSBudWxsID8gdW5kZWZpbmVkIDogaXRlbS5pY29ufVxuICAgICAgICAgICAgICBsYWJlbD17aXRlbS5uYW1lfVxuICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgaWYgKGFjdGl2ZU1lbnVQYXRoICE9PSBpdGVtLnBhdGgpIHtcbiAgICAgICAgICAgICAgICAgIHNldEFjdGl2ZU1lbnVQYXRoKGl0ZW0ucGF0aCk7XG4gICAgICAgICAgICAgICAgICByZXR1cm47XG4gICAgICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAgICAgc2V0SXNTZWFyY2hWaXNpYmxlKGZhbHNlKTtcbiAgICAgICAgICAgICAgICBjb25zdCBtZW51ID0gdXNlck1lbnVNYXA/LmdldChpdGVtLnBhdGgpO1xuXG4gICAgICAgICAgICAgICAgaWYgKG1lbnUpIHtcbiAgICAgICAgICAgICAgICAgIG5hdmlnYXRlKG1lbnUpO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9tb3Rpb24uZGl2PlxuICAgICAgICApKX1cbiAgICAgIDwvQW5pbWF0ZVByZXNlbmNlPlxuXG4gICAgICA8QW5pbWF0ZVByZXNlbmNlPlxuICAgICAgICB7bWF0Y2hlZE1lbnVJdGVtcy5sZW5ndGggPT09IDAgJiYgKFxuICAgICAgICAgIDxtb3Rpb24uZGl2XG4gICAgICAgICAgICBrZXk9XCJlbXB0eS1zdGF0ZVwiXG4gICAgICAgICAgICBhbmltYXRlPXt7IG9wYWNpdHk6IDEsIHNjYWxlOiAxIH19XG4gICAgICAgICAgICBpbml0aWFsPXt7IG9wYWNpdHk6IDAsIHNjYWxlOiAwLjk1IH19XG4gICAgICAgICAgICB0cmFuc2l0aW9uPXt7IGR1cmF0aW9uOiAwLjMsIGVhc2U6IFwiZWFzZU91dFwiIH19XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPEVtcHR5XG4gICAgICAgICAgICAgIGRlc2NyaXB0aW9uPXtcbiAgICAgICAgICAgICAgICBrZXl3b3JkXG4gICAgICAgICAgICAgICAgICA/IGDmsqHmnInmib7liLDkuI5cIiR7a2V5d29yZH1cIuebuOWFs+eahOiPnOWNlWBcbiAgICAgICAgICAgICAgICAgIDogXCLor7fovpPlhaXlhbPplK7lrZfmkJzntKJcIlxuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvbW90aW9uLmRpdj5cbiAgICAgICAgKX1cbiAgICAgIDwvQW5pbWF0ZVByZXNlbmNlPlxuICAgIDwvZGl2PlxuICApO1xufVxuXG5mdW5jdGlvbiBtYXRjaChtZW51SXRlbTogTWVudUl0ZW0sIGtleXdvcmQ6IHN0cmluZykge1xuICBpZiAoIWtleXdvcmQpIHtcbiAgICByZXR1cm4gZmFsc2U7XG4gIH1cblxuICBjb25zdCB7XG4gICAgbmFtZSxcbiAgICBuYW1lUGlueWluLFxuICAgIG5hbWVQaW55aW5Jbml0aWFsc1xuICB9ID0gbWVudUl0ZW07XG5cbiAgcmV0dXJuIG5hbWUuaW5jbHVkZXMoa2V5d29yZCkgfHwgbmFtZVBpbnlpbi5pbmNsdWRlcyhrZXl3b3JkKSB8fCBuYW1lUGlueWluSW5pdGlhbHMuaW5jbHVkZXMoa2V5d29yZCk7XG59XG5cbmZ1bmN0aW9uIGJ1aWxkTWVudUl0ZW1zKG1lbnVzOiByZWFkb25seSBVc2VyTWVudVtdKTogTWVudUl0ZW1bXSB7XG4gIHJldHVybiBtZW51cy5tYXAobWVudSA9PiB7XG4gICAgY29uc3QgeyBuYW1lIH0gPSBtZW51O1xuXG4gICAgcmV0dXJuIHtcbiAgICAgIC4uLm1lbnUsXG4gICAgICBuYW1lUGlueWluOiBnZXRQaW55aW4obmFtZSkuam9pbihcIlwiKSxcbiAgICAgIG5hbWVQaW55aW5Jbml0aWFsczogZ2V0UGlueWluSW5pdGlhbHMobmFtZSkuam9pbihcIlwiKVxuICAgIH07XG4gIH0pO1xufVxuIl19 */");
+function SearchResult({
+  keyword
+}) {
+  const setIsSearchVisible = useLayoutStore((state) => state.setIsSearchVisible);
+  const userMenuMap = useAppStore((state) => state.userMenuMap);
+  const menuItems = useMemo(() => buildMenuItems(userMenuMap ? [...userMenuMap.values()] : []), [userMenuMap]);
+  const matchedMenuItems = useMemo(() => menuItems.filter((item) => match(item, keyword)), [menuItems, keyword]);
+  const [activeMenuPath, setActiveMenuPath] = useState();
+  const handleMenuSelect = (offset) => {
+    const {
+      length
+    } = matchedMenuItems;
+    if (length === 0) {
+      return;
+    }
+    const index = matchedMenuItems.findIndex((item) => item.path === activeMenuPath);
+    if (index === -1) {
+      return;
+    }
+    const newIndex = (index + offset + length) % length;
+    setActiveMenuPath(matchedMenuItems[newIndex].path);
+  };
+  const navigate = useMenuNavigate();
+  useHotkeys("esc", () => setIsSearchVisible(false), {
+    enableOnFormTags: true
+  });
+  useHotkeys("enter", () => {
+    if (!activeMenuPath) {
+      return;
+    }
+    setIsSearchVisible(false);
+    const menu = userMenuMap?.get(activeMenuPath);
+    if (menu) {
+      navigate(menu);
+    }
+  }, {
+    enableOnFormTags: true
+  });
+  useHotkeys("up", () => handleMenuSelect(-1), {
+    enableOnFormTags: true
+  });
+  useHotkeys("down", () => handleMenuSelect(1), {
+    enableOnFormTags: true
+  });
+  useEffect(() => {
+    if (matchedMenuItems.length > 0) {
+      const {
+        path
+      } = matchedMenuItems[0];
+      setActiveMenuPath(path);
+    }
+  }, [matchedMenuItems]);
+  return /* @__PURE__ */ jsxs("div", { css: resultStyle, children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: matchedMenuItems.map((item, index) => /* @__PURE__ */ jsx(motion.div, { layout: true, animate: {
+      opacity: 1,
+      y: 0
+    }, initial: {
+      opacity: 0,
+      y: 20
+    }, transition: {
+      duration: 0.3,
+      delay: index * 0.05,
+      ease: "easeOut"
+    }, children: /* @__PURE__ */ jsx(SearchResultItem, { active: activeMenuPath === item.path, icon: item.icon === null ? void 0 : item.icon, label: item.name, onClick: () => {
+      if (activeMenuPath !== item.path) {
+        setActiveMenuPath(item.path);
+        return;
+      }
+      setIsSearchVisible(false);
+      const menu = userMenuMap?.get(item.path);
+      if (menu) {
+        navigate(menu);
+      }
+    } }) }, item.path)) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: matchedMenuItems.length === 0 && /* @__PURE__ */ jsx(motion.div, { animate: {
+      opacity: 1,
+      scale: 1
+    }, initial: {
+      opacity: 0,
+      scale: 0.95
+    }, transition: {
+      duration: 0.3,
+      ease: "easeOut"
+    }, children: /* @__PURE__ */ jsx(Empty, { description: keyword ? `没有找到与"${keyword}"相关的菜单` : "请输入关键字搜索" }) }, "empty-state") })
+  ] });
+}
+function match(menuItem, keyword) {
+  if (!keyword) {
+    return false;
+  }
+  const {
+    name,
+    namePinyin,
+    namePinyinInitials
+  } = menuItem;
+  return name.includes(keyword) || namePinyin.includes(keyword) || namePinyinInitials.includes(keyword);
+}
+function buildMenuItems(menus) {
+  return menus.map((menu) => {
+    const {
+      name
+    } = menu;
+    return {
+      ...menu,
+      namePinyin: getPinyin(name).join(""),
+      namePinyinInitials: getPinyinInitials(name).join("")
+    };
+  });
+}
+
+export { SearchResult };

package/dist/es/components/layout/components/sidebar.js

@@ -0,0 +1,50 @@
+/*! @vef-framework/starter v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:38.668Z */
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { ClassNames } from '@emotion/react';
+import { ScrollArea } from '@vef-framework/components';
+import { HoneycombPattern } from './honeycomb-pattern.js';
+import { Logo } from './logo.js';
+import { Menu } from './menu.js';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+const logoStyle = process.env.NODE_ENV === "production" ? {
+  name: "dooaqh",
+  styles: "flex:none;height:var(--vef-layout-header-height)"
+} : {
+  name: "dooaqh",
+  styles: "flex:none;height:var(--vef-layout-header-height)/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy92ZW51cy9WRUYvdmVmLWZyYW1ld29yay1yZWFjdC9wYWNrYWdlcy9zdGFydGVyL3NyYy9jb21wb25lbnRzL2xheW91dC9jb21wb25lbnRzL3NpZGViYXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFrQiIsImZpbGUiOiIvVXNlcnMvdmVudXMvVkVGL3ZlZi1mcmFtZXdvcmstcmVhY3QvcGFja2FnZXMvc3RhcnRlci9zcmMvY29tcG9uZW50cy9sYXlvdXQvY29tcG9uZW50cy9zaWRlYmFyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgTGF5b3V0UHJvcHMgfSBmcm9tIFwiLi4vcHJvcHNcIjtcblxuaW1wb3J0IHsgQ2xhc3NOYW1lcywgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyBTY3JvbGxBcmVhIH0gZnJvbSBcIkB2ZWYtZnJhbWV3b3JrL2NvbXBvbmVudHNcIjtcblxuaW1wb3J0IHsgSG9uZXljb21iUGF0dGVybiB9IGZyb20gXCIuL2hvbmV5Y29tYi1wYXR0ZXJuXCI7XG5pbXBvcnQgeyBMb2dvIH0gZnJvbSBcIi4vbG9nb1wiO1xuaW1wb3J0IHsgTWVudSB9IGZyb20gXCIuL21lbnVcIjtcblxuaW50ZXJmYWNlIFNpZGViYXJQcm9wcyBleHRlbmRzIFBpY2s8TGF5b3V0UHJvcHMsIFwibG9nb1wiIHwgXCJ0aXRsZVwiPiB7XG4gIGlzU2lkZWJhckNvbGxhcHNlZD86IGJvb2xlYW47XG59XG5cbmNvbnN0IGxvZ29TdHlsZSA9IGNzcyh7XG4gIGZsZXg6IFwibm9uZVwiLFxuICBoZWlnaHQ6IFwidmFyKC0tdmVmLWxheW91dC1oZWFkZXItaGVpZ2h0KVwiXG59KTtcblxuY29uc3QgbWVudVdyYXBwZXJTdHlsZSA9IGNzcyh7XG4gIGZsZXg6IFwiYXV0b1wiXG59KTtcblxuY29uc3QgbWVudUNvbnRhaW5lclN0eWxlID0gY3NzKHtcbiAgcGFkZGluZzogXCIycHhcIlxufSk7XG5cbmV4cG9ydCBmdW5jdGlvbiBTaWRlYmFyKHtcbiAgaXNTaWRlYmFyQ29sbGFwc2VkLFxuICBsb2dvLFxuICB0aXRsZVxufTogU2lkZWJhclByb3BzKSB7XG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxIb25leWNvbWJQYXR0ZXJuIC8+XG5cbiAgICAgIDxMb2dvXG4gICAgICAgIGNzcz17bG9nb1N0eWxlfVxuICAgICAgICBpc1RpdGxlVmlzaWJsZT17IWlzU2lkZWJhckNvbGxhcHNlZH1cbiAgICAgICAgbG9nbz17bG9nb31cbiAgICAgICAgdGl0bGU9e3RpdGxlfVxuICAgICAgLz5cblxuICAgICAgPENsYXNzTmFtZXM+XG4gICAgICAgIHsoeyBjc3MgfSkgPT4gKFxuICAgICAgICAgIDxTY3JvbGxBcmVhXG4gICAgICAgICAgICBjc3M9e21lbnVXcmFwcGVyU3R5bGV9XG4gICAgICAgICAgICBzY3JvbGxiYXJTaXplPXs4fVxuICAgICAgICAgICAgdHlwZT1cInNjcm9sbFwiXG4gICAgICAgICAgICB2aWV3cG9ydENsYXNzTmFtZT17Y3NzKG1lbnVDb250YWluZXJTdHlsZSl9XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPE1lbnUgaXNTaWRlYmFyQ29sbGFwc2VkPXtpc1NpZGViYXJDb2xsYXBzZWR9IGxheW91dD1cInZlcnRpY2FsXCIgLz5cbiAgICAgICAgICA8L1Njcm9sbEFyZWE+XG4gICAgICAgICl9XG4gICAgICA8L0NsYXNzTmFtZXM+XG4gICAgPC8+XG4gICk7XG59XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const menuWrapperStyle = process.env.NODE_ENV === "production" ? {
+  name: "1o3mejq",
+  styles: "flex:auto"
+} : {
+  name: "1o3mejq",
+  styles: "flex:auto/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy92ZW51cy9WRUYvdmVmLWZyYW1ld29yay1yZWFjdC9wYWNrYWdlcy9zdGFydGVyL3NyYy9jb21wb25lbnRzL2xheW91dC9jb21wb25lbnRzL3NpZGViYXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCeUIiLCJmaWxlIjoiL1VzZXJzL3ZlbnVzL1ZFRi92ZWYtZnJhbWV3b3JrLXJlYWN0L3BhY2thZ2VzL3N0YXJ0ZXIvc3JjL2NvbXBvbmVudHMvbGF5b3V0L2NvbXBvbmVudHMvc2lkZWJhci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IExheW91dFByb3BzIH0gZnJvbSBcIi4uL3Byb3BzXCI7XG5cbmltcG9ydCB7IENsYXNzTmFtZXMsIGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHsgU2Nyb2xsQXJlYSB9IGZyb20gXCJAdmVmLWZyYW1ld29yay9jb21wb25lbnRzXCI7XG5cbmltcG9ydCB7IEhvbmV5Y29tYlBhdHRlcm4gfSBmcm9tIFwiLi9ob25leWNvbWItcGF0dGVyblwiO1xuaW1wb3J0IHsgTG9nbyB9IGZyb20gXCIuL2xvZ29cIjtcbmltcG9ydCB7IE1lbnUgfSBmcm9tIFwiLi9tZW51XCI7XG5cbmludGVyZmFjZSBTaWRlYmFyUHJvcHMgZXh0ZW5kcyBQaWNrPExheW91dFByb3BzLCBcImxvZ29cIiB8IFwidGl0bGVcIj4ge1xuICBpc1NpZGViYXJDb2xsYXBzZWQ/OiBib29sZWFuO1xufVxuXG5jb25zdCBsb2dvU3R5bGUgPSBjc3Moe1xuICBmbGV4OiBcIm5vbmVcIixcbiAgaGVpZ2h0OiBcInZhcigtLXZlZi1sYXlvdXQtaGVhZGVyLWhlaWdodClcIlxufSk7XG5cbmNvbnN0IG1lbnVXcmFwcGVyU3R5bGUgPSBjc3Moe1xuICBmbGV4OiBcImF1dG9cIlxufSk7XG5cbmNvbnN0IG1lbnVDb250YWluZXJTdHlsZSA9IGNzcyh7XG4gIHBhZGRpbmc6IFwiMnB4XCJcbn0pO1xuXG5leHBvcnQgZnVuY3Rpb24gU2lkZWJhcih7XG4gIGlzU2lkZWJhckNvbGxhcHNlZCxcbiAgbG9nbyxcbiAgdGl0bGVcbn06IFNpZGViYXJQcm9wcykge1xuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8SG9uZXljb21iUGF0dGVybiAvPlxuXG4gICAgICA8TG9nb1xuICAgICAgICBjc3M9e2xvZ29TdHlsZX1cbiAgICAgICAgaXNUaXRsZVZpc2libGU9eyFpc1NpZGViYXJDb2xsYXBzZWR9XG4gICAgICAgIGxvZ289e2xvZ299XG4gICAgICAgIHRpdGxlPXt0aXRsZX1cbiAgICAgIC8+XG5cbiAgICAgIDxDbGFzc05hbWVzPlxuICAgICAgICB7KHsgY3NzIH0pID0+IChcbiAgICAgICAgICA8U2Nyb2xsQXJlYVxuICAgICAgICAgICAgY3NzPXttZW51V3JhcHBlclN0eWxlfVxuICAgICAgICAgICAgc2Nyb2xsYmFyU2l6ZT17OH1cbiAgICAgICAgICAgIHR5cGU9XCJzY3JvbGxcIlxuICAgICAgICAgICAgdmlld3BvcnRDbGFzc05hbWU9e2NzcyhtZW51Q29udGFpbmVyU3R5bGUpfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxNZW51IGlzU2lkZWJhckNvbGxhcHNlZD17aXNTaWRlYmFyQ29sbGFwc2VkfSBsYXlvdXQ9XCJ2ZXJ0aWNhbFwiIC8+XG4gICAgICAgICAgPC9TY3JvbGxBcmVhPlxuICAgICAgICApfVxuICAgICAgPC9DbGFzc05hbWVzPlxuICAgIDwvPlxuICApO1xufVxuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const menuContainerStyle = process.env.NODE_ENV === "production" ? {
+  name: "eeu0j5",
+  styles: "padding:2px"
+} : {
+  name: "eeu0j5",
+  styles: "padding:2px/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy92ZW51cy9WRUYvdmVmLWZyYW1ld29yay1yZWFjdC9wYWNrYWdlcy9zdGFydGVyL3NyYy9jb21wb25lbnRzL2xheW91dC9jb21wb25lbnRzL3NpZGViYXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCMkIiLCJmaWxlIjoiL1VzZXJzL3ZlbnVzL1ZFRi92ZWYtZnJhbWV3b3JrLXJlYWN0L3BhY2thZ2VzL3N0YXJ0ZXIvc3JjL2NvbXBvbmVudHMvbGF5b3V0L2NvbXBvbmVudHMvc2lkZWJhci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IExheW91dFByb3BzIH0gZnJvbSBcIi4uL3Byb3BzXCI7XG5cbmltcG9ydCB7IENsYXNzTmFtZXMsIGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHsgU2Nyb2xsQXJlYSB9IGZyb20gXCJAdmVmLWZyYW1ld29yay9jb21wb25lbnRzXCI7XG5cbmltcG9ydCB7IEhvbmV5Y29tYlBhdHRlcm4gfSBmcm9tIFwiLi9ob25leWNvbWItcGF0dGVyblwiO1xuaW1wb3J0IHsgTG9nbyB9IGZyb20gXCIuL2xvZ29cIjtcbmltcG9ydCB7IE1lbnUgfSBmcm9tIFwiLi9tZW51XCI7XG5cbmludGVyZmFjZSBTaWRlYmFyUHJvcHMgZXh0ZW5kcyBQaWNrPExheW91dFByb3BzLCBcImxvZ29cIiB8IFwidGl0bGVcIj4ge1xuICBpc1NpZGViYXJDb2xsYXBzZWQ/OiBib29sZWFuO1xufVxuXG5jb25zdCBsb2dvU3R5bGUgPSBjc3Moe1xuICBmbGV4OiBcIm5vbmVcIixcbiAgaGVpZ2h0OiBcInZhcigtLXZlZi1sYXlvdXQtaGVhZGVyLWhlaWdodClcIlxufSk7XG5cbmNvbnN0IG1lbnVXcmFwcGVyU3R5bGUgPSBjc3Moe1xuICBmbGV4OiBcImF1dG9cIlxufSk7XG5cbmNvbnN0IG1lbnVDb250YWluZXJTdHlsZSA9IGNzcyh7XG4gIHBhZGRpbmc6IFwiMnB4XCJcbn0pO1xuXG5leHBvcnQgZnVuY3Rpb24gU2lkZWJhcih7XG4gIGlzU2lkZWJhckNvbGxhcHNlZCxcbiAgbG9nbyxcbiAgdGl0bGVcbn06IFNpZGViYXJQcm9wcykge1xuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8SG9uZXljb21iUGF0dGVybiAvPlxuXG4gICAgICA8TG9nb1xuICAgICAgICBjc3M9e2xvZ29TdHlsZX1cbiAgICAgICAgaXNUaXRsZVZpc2libGU9eyFpc1NpZGViYXJDb2xsYXBzZWR9XG4gICAgICAgIGxvZ289e2xvZ299XG4gICAgICAgIHRpdGxlPXt0aXRsZX1cbiAgICAgIC8+XG5cbiAgICAgIDxDbGFzc05hbWVzPlxuICAgICAgICB7KHsgY3NzIH0pID0+IChcbiAgICAgICAgICA8U2Nyb2xsQXJlYVxuICAgICAgICAgICAgY3NzPXttZW51V3JhcHBlclN0eWxlfVxuICAgICAgICAgICAgc2Nyb2xsYmFyU2l6ZT17OH1cbiAgICAgICAgICAgIHR5cGU9XCJzY3JvbGxcIlxuICAgICAgICAgICAgdmlld3BvcnRDbGFzc05hbWU9e2NzcyhtZW51Q29udGFpbmVyU3R5bGUpfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxNZW51IGlzU2lkZWJhckNvbGxhcHNlZD17aXNTaWRlYmFyQ29sbGFwc2VkfSBsYXlvdXQ9XCJ2ZXJ0aWNhbFwiIC8+XG4gICAgICAgICAgPC9TY3JvbGxBcmVhPlxuICAgICAgICApfVxuICAgICAgPC9DbGFzc05hbWVzPlxuICAgIDwvPlxuICApO1xufVxuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+function Sidebar({
+  isSidebarCollapsed,
+  logo,
+  title
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(HoneycombPattern, {}),
+    /* @__PURE__ */ jsx(Logo, { css: logoStyle, isTitleVisible: !isSidebarCollapsed, logo, title }),
+    /* @__PURE__ */ jsx(ClassNames, { children: ({
+      css: css2
+    }) => /* @__PURE__ */ jsx(ScrollArea, { css: menuWrapperStyle, scrollbarSize: 8, type: "scroll", viewportClassName: css2(menuContainerStyle), children: /* @__PURE__ */ jsx(Menu, { isSidebarCollapsed, layout: "vertical" }) }) })
+  ] });
+}
+
+export { Sidebar };

package/dist/es/components/layout/components/tabs/context-menu.js

@@ -0,0 +1,92 @@
+/*! @vef-framework/starter v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:38.668Z */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Icon, Dropdown } from '@vef-framework/components';
+import { useShallow } from '@vef-framework/core';
+import { XIcon, ChevronsLeftRightEllipsisIcon, ArrowLeftFromLineIcon, ArrowRightFromLineIcon, ChevronsRightLeftIcon } from 'lucide-react';
+import '../../../../stores/index.js';
+import '../../hooks/index.js';
+import { useTabStore } from '../../../../stores/tab.js';
+import { useTabNavigate } from '../../hooks/use-tab-navigate.js';
+
+const contextMenuOptions = [{
+  key: "close",
+  icon: /* @__PURE__ */ jsx(Icon, { component: XIcon }),
+  label: "关闭"
+}, {
+  key: "close-other",
+  icon: /* @__PURE__ */ jsx(Icon, { component: ChevronsLeftRightEllipsisIcon }),
+  label: "关闭其他"
+}, {
+  key: "close-left",
+  icon: /* @__PURE__ */ jsx(Icon, { component: ArrowLeftFromLineIcon }),
+  label: "关闭左侧"
+}, {
+  key: "close-right",
+  icon: /* @__PURE__ */ jsx(Icon, { component: ArrowRightFromLineIcon }),
+  label: "关闭右侧"
+}, {
+  key: "close-all",
+  icon: /* @__PURE__ */ jsx(Icon, { component: ChevronsRightLeftIcon }),
+  label: "关闭所有"
+}];
+function ContextMenu({
+  children,
+  tabId
+}) {
+  const {
+    removeTab,
+    removeAllTabs,
+    removeAllTabsExcept,
+    removeLeftTabs,
+    removeRightTabs
+  } = useTabStore(useShallow(({
+    removeTab: removeTab2,
+    removeAllTabs: removeAllTabs2,
+    removeAllTabsExcept: removeAllTabsExcept2,
+    removeLeftTabs: removeLeftTabs2,
+    removeRightTabs: removeRightTabs2
+  }) => {
+    return {
+      removeTab: removeTab2,
+      removeAllTabs: removeAllTabs2,
+      removeAllTabsExcept: removeAllTabsExcept2,
+      removeLeftTabs: removeLeftTabs2,
+      removeRightTabs: removeRightTabs2
+    };
+  }));
+  const navigate = useTabNavigate({
+    async: true
+  });
+  const handleMenuClick = ({
+    key
+  }) => {
+    switch (key) {
+      case "close": {
+        removeTab(tabId, navigate);
+        break;
+      }
+      case "close-other": {
+        removeAllTabsExcept(tabId, navigate);
+        break;
+      }
+      case "close-left": {
+        removeLeftTabs(tabId, navigate);
+        break;
+      }
+      case "close-right": {
+        removeRightTabs(tabId, navigate);
+        break;
+      }
+      case "close-all": {
+        removeAllTabs(navigate);
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(Dropdown, { trigger: ["contextMenu"], menu: {
+    items: contextMenuOptions,
+    onClick: handleMenuClick
+  }, children });
+}
+
+export { ContextMenu };

package/dist/es/components/layout/components/tabs/index.js

@@ -0,0 +1,36 @@
+/*! @vef-framework/starter v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:38.668Z */
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { globalCssVars } from '@vef-framework/components';
+import { MainContentMaximum } from './main-content-maximum.js';
+import { Reload } from './reload.js';
+import { TabsContainer } from './tabs-container.js';
+
+const tabsStyle = /* @__PURE__ */ css({
+  position: "relative",
+  zIndex: 1,
+  height: "100%",
+  backgroundColor: globalCssVars.colorBgContainer,
+  boxShadow: "0 1px 2px rgb(0, 21, 41, 0.08)",
+  padding: `0 ${globalCssVars.spacingSm}`,
+  display: "flex",
+  gap: globalCssVars.spacingSm
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy92ZW51cy9WRUYvdmVmLWZyYW1ld29yay1yZWFjdC9wYWNrYWdlcy9zdGFydGVyL3NyYy9jb21wb25lbnRzL2xheW91dC9jb21wb25lbnRzL3RhYnMvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9rQiIsImZpbGUiOiIvVXNlcnMvdmVudXMvVkVGL3ZlZi1mcmFtZXdvcmstcmVhY3QvcGFja2FnZXMvc3RhcnRlci9zcmMvY29tcG9uZW50cy9sYXlvdXQvY29tcG9uZW50cy90YWJzL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHsgZ2xvYmFsQ3NzVmFycyB9IGZyb20gXCJAdmVmLWZyYW1ld29yay9jb21wb25lbnRzXCI7XG5cbmltcG9ydCB7IE1haW5Db250ZW50TWF4aW11bSB9IGZyb20gXCIuL21haW4tY29udGVudC1tYXhpbXVtXCI7XG5pbXBvcnQgeyBSZWxvYWQgfSBmcm9tIFwiLi9yZWxvYWRcIjtcbmltcG9ydCB7IFRhYnNDb250YWluZXIgfSBmcm9tIFwiLi90YWJzLWNvbnRhaW5lclwiO1xuXG5jb25zdCB0YWJzU3R5bGUgPSBjc3Moe1xuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICB6SW5kZXg6IDEsXG4gIGhlaWdodDogXCIxMDAlXCIsXG4gIGJhY2tncm91bmRDb2xvcjogZ2xvYmFsQ3NzVmFycy5jb2xvckJnQ29udGFpbmVyLFxuICBib3hTaGFkb3c6IFwiMCAxcHggMnB4IHJnYigwLCAyMSwgNDEsIDAuMDgpXCIsXG4gIHBhZGRpbmc6IGAwICR7Z2xvYmFsQ3NzVmFycy5zcGFjaW5nU219YCxcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGdhcDogZ2xvYmFsQ3NzVmFycy5zcGFjaW5nU21cbn0pO1xuXG5jb25zdCBhY3Rpb25zU3R5bGUgPSBjc3Moe1xuICBmbGV4OiBcIm5vbmVcIixcbiAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGNvbHVtbkdhcDogZ2xvYmFsQ3NzVmFycy5zcGFjaW5nWHhzLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiXG59KTtcblxuZXhwb3J0IGZ1bmN0aW9uIFRhYnMoKSB7XG4gIHJldHVybiAoXG4gICAgPGRpdiBjc3M9e3RhYnNTdHlsZX0+XG4gICAgICA8VGFic0NvbnRhaW5lciAvPlxuXG4gICAgICA8ZGl2IGNzcz17YWN0aW9uc1N0eWxlfT5cbiAgICAgICAgPFJlbG9hZCAvPlxuICAgICAgICA8TWFpbkNvbnRlbnRNYXhpbXVtIC8+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdfQ== */");
+const actionsStyle = /* @__PURE__ */ css({
+  flex: "none",
+  height: "100%",
+  display: "flex",
+  columnGap: globalCssVars.spacingXxs,
+  alignItems: "center"
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy92ZW51cy9WRUYvdmVmLWZyYW1ld29yay1yZWFjdC9wYWNrYWdlcy9zdGFydGVyL3NyYy9jb21wb25lbnRzL2xheW91dC9jb21wb25lbnRzL3RhYnMvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCcUIiLCJmaWxlIjoiL1VzZXJzL3ZlbnVzL1ZFRi92ZWYtZnJhbWV3b3JrLXJlYWN0L3BhY2thZ2VzL3N0YXJ0ZXIvc3JjL2NvbXBvbmVudHMvbGF5b3V0L2NvbXBvbmVudHMvdGFicy9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCB7IGdsb2JhbENzc1ZhcnMgfSBmcm9tIFwiQHZlZi1mcmFtZXdvcmsvY29tcG9uZW50c1wiO1xuXG5pbXBvcnQgeyBNYWluQ29udGVudE1heGltdW0gfSBmcm9tIFwiLi9tYWluLWNvbnRlbnQtbWF4aW11bVwiO1xuaW1wb3J0IHsgUmVsb2FkIH0gZnJvbSBcIi4vcmVsb2FkXCI7XG5pbXBvcnQgeyBUYWJzQ29udGFpbmVyIH0gZnJvbSBcIi4vdGFicy1jb250YWluZXJcIjtcblxuY29uc3QgdGFic1N0eWxlID0gY3NzKHtcbiAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgekluZGV4OiAxLFxuICBoZWlnaHQ6IFwiMTAwJVwiLFxuICBiYWNrZ3JvdW5kQ29sb3I6IGdsb2JhbENzc1ZhcnMuY29sb3JCZ0NvbnRhaW5lcixcbiAgYm94U2hhZG93OiBcIjAgMXB4IDJweCByZ2IoMCwgMjEsIDQxLCAwLjA4KVwiLFxuICBwYWRkaW5nOiBgMCAke2dsb2JhbENzc1ZhcnMuc3BhY2luZ1NtfWAsXG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBnYXA6IGdsb2JhbENzc1ZhcnMuc3BhY2luZ1NtXG59KTtcblxuY29uc3QgYWN0aW9uc1N0eWxlID0gY3NzKHtcbiAgZmxleDogXCJub25lXCIsXG4gIGhlaWdodDogXCIxMDAlXCIsXG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBjb2x1bW5HYXA6IGdsb2JhbENzc1ZhcnMuc3BhY2luZ1h4cyxcbiAgYWxpZ25JdGVtczogXCJjZW50ZXJcIlxufSk7XG5cbmV4cG9ydCBmdW5jdGlvbiBUYWJzKCkge1xuICByZXR1cm4gKFxuICAgIDxkaXYgY3NzPXt0YWJzU3R5bGV9PlxuICAgICAgPFRhYnNDb250YWluZXIgLz5cblxuICAgICAgPGRpdiBjc3M9e2FjdGlvbnNTdHlsZX0+XG4gICAgICAgIDxSZWxvYWQgLz5cbiAgICAgICAgPE1haW5Db250ZW50TWF4aW11bSAvPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXX0= */");
+function Tabs() {
+  return /* @__PURE__ */ jsxs("div", { css: tabsStyle, children: [
+    /* @__PURE__ */ jsx(TabsContainer, {}),
+    /* @__PURE__ */ jsxs("div", { css: actionsStyle, children: [
+      /* @__PURE__ */ jsx(Reload, {}),
+      /* @__PURE__ */ jsx(MainContentMaximum, {})
+    ] })
+  ] });
+}
+
+export { Tabs };

package/dist/es/components/layout/components/tabs/main-content-maximum.js

@@ -0,0 +1,19 @@
+/*! @vef-framework/starter v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:38.668Z */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { IconButton } from '@vef-framework/components';
+import { ShrinkIcon, ExpandIcon } from 'lucide-react';
+import '../../../../stores/index.js';
+import { useThemeStore } from '../../../../stores/theme.js';
+
+function MainContentMaximum({
+  className
+}) {
+  const isMainContentMaximum = useThemeStore((state) => state.isMainContentMaximum);
+  return /* @__PURE__ */ jsx(IconButton, { className, icon: isMainContentMaximum ? /* @__PURE__ */ jsx(ShrinkIcon, {}) : /* @__PURE__ */ jsx(ExpandIcon, {}), placement: "bottom", tip: isMainContentMaximum ? "退出内容最大化" : "内容最大化", onClick: () => {
+    useThemeStore.setState((state) => {
+      state.isMainContentMaximum = !state.isMainContentMaximum;
+    });
+  } }, String(isMainContentMaximum));
+}
+
+export { MainContentMaximum };

package/dist/es/components/layout/components/tabs/reload.js

@@ -0,0 +1,17 @@
+/*! @vef-framework/starter v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:38.668Z */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { IconButton } from '@vef-framework/components';
+import { RefreshCwIcon } from 'lucide-react';
+import '../../../../helpers/index.js';
+import '../../../../hooks/index.js';
+import { useRouteFullPath } from '../../../../hooks/use-route-full-path.js';
+import { reloadPage } from '../../../../helpers/event.js';
+
+function Reload({
+  className
+}) {
+  const fullPath = useRouteFullPath();
+  return /* @__PURE__ */ jsx(IconButton, { className, icon: /* @__PURE__ */ jsx(RefreshCwIcon, {}), placement: "bottom", tip: "刷新页面", onClick: () => reloadPage(fullPath) });
+}
+
+export { Reload };

package/dist/es/components/layout/components/tabs/tab-item.js

@@ -0,0 +1,80 @@
+/*! @vef-framework/starter v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:38.668Z */
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { globalCssVars, IconButton } from '@vef-framework/components';
+import { useSortable, motion } from '@vef-framework/core';
+import { useMergedRef } from '@vef-framework/hooks';
+import { XIcon } from 'lucide-react';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+const tabItemStyle = /* @__PURE__ */ css({
+  flex: "none",
+  height: "calc(100% - 12px)",
+  display: "flex",
+  alignItems: "center",
+  columnGap: globalCssVars.spacingXs,
+  paddingInlineStart: globalCssVars.spacingSm,
+  paddingInlineEnd: `calc(${globalCssVars.spacingSm} - 3px)`,
+  borderRadius: globalCssVars.borderRadiusSm,
+  cursor: "pointer",
+  border: `1px solid ${globalCssVars.colorBorderSecondary}`,
+  userSelect: "none",
+  backgroundColor: globalCssVars.colorBgContainer,
+  transitionDuration: globalCssVars.motionDurationMid,
+  transitionProperty: "color, border-color, background-color",
+  transitionTimingFunction: "ease",
+  "&:hover": {
+    color: globalCssVars.colorPrimaryText,
+    borderColor: globalCssVars.colorPrimaryBorder,
+    "& .vef-btn-sm": {
+      "--vef-btn-text-color": globalCssVars.colorPrimaryText,
+      "--vef-btn-text-color-hover": globalCssVars.colorPrimaryTextHover,
+      "--vef-btn-text-color-active": globalCssVars.colorPrimaryTextActive
+    }
+  },
+  "&.active": {
+    color: globalCssVars.colorPrimaryText,
+    borderColor: globalCssVars.colorPrimaryBorder,
+    backgroundColor: globalCssVars.colorPrimaryBg,
+    "& .vef-btn-sm": {
+      "--vef-btn-text-color": globalCssVars.colorPrimaryText,
+      "--vef-btn-text-color-hover": globalCssVars.colorPrimaryTextHover,
+      "--vef-btn-text-color-active": globalCssVars.colorPrimaryTextActive
+    }
+  }
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy92ZW51cy9WRUYvdmVmLWZyYW1ld29yay1yZWFjdC9wYWNrYWdlcy9zdGFydGVyL3NyYy9jb21wb25lbnRzL2xheW91dC9jb21wb25lbnRzL3RhYnMvdGFiLWl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVxQiIsImZpbGUiOiIvVXNlcnMvdmVudXMvVkVGL3ZlZi1mcmFtZXdvcmstcmVhY3QvcGFja2FnZXMvc3RhcnRlci9zcmMvY29tcG9uZW50cy9sYXlvdXQvY29tcG9uZW50cy90YWJzL3RhYi1pdGVtLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ29tcG9uZW50UHJvcHMsIFJlYWN0Tm9kZSB9IGZyb20gXCJyZWFjdFwiO1xuXG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCB7IGdsb2JhbENzc1ZhcnMsIEljb25CdXR0b24gfSBmcm9tIFwiQHZlZi1mcmFtZXdvcmsvY29tcG9uZW50c1wiO1xuaW1wb3J0IHsgbW90aW9uLCB1c2VTb3J0YWJsZSB9IGZyb20gXCJAdmVmLWZyYW1ld29yay9jb3JlXCI7XG5pbXBvcnQgeyB1c2VNZXJnZWRSZWYgfSBmcm9tIFwiQHZlZi1mcmFtZXdvcmsvaG9va3NcIjtcbmltcG9ydCB7IFhJY29uIH0gZnJvbSBcImx1Y2lkZS1yZWFjdFwiO1xuXG5pbnRlcmZhY2UgVGFiSXRlbVByb3BzIGV4dGVuZHMgQ29tcG9uZW50UHJvcHM8dHlwZW9mIG1vdGlvbi5kaXY+IHtcbiAgaW5kZXg6IG51bWJlcjtcbiAgdGFiSWQ6IHN0cmluZztcbiAgbGFiZWw6IFJlYWN0Tm9kZTtcbiAgb25DbG9zZT86ICgpID0+IHZvaWQ7XG59XG5cbmNvbnN0IHRhYkl0ZW1TdHlsZSA9IGNzcyh7XG4gIGZsZXg6IFwibm9uZVwiLFxuICBoZWlnaHQ6IFwiY2FsYygxMDAlIC0gMTJweClcIixcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIGNvbHVtbkdhcDogZ2xvYmFsQ3NzVmFycy5zcGFjaW5nWHMsXG4gIHBhZGRpbmdJbmxpbmVTdGFydDogZ2xvYmFsQ3NzVmFycy5zcGFjaW5nU20sXG4gIHBhZGRpbmdJbmxpbmVFbmQ6IGBjYWxjKCR7Z2xvYmFsQ3NzVmFycy5zcGFjaW5nU219IC0gM3B4KWAsXG4gIGJvcmRlclJhZGl1czogZ2xvYmFsQ3NzVmFycy5ib3JkZXJSYWRpdXNTbSxcbiAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgYm9yZGVyOiBgMXB4IHNvbGlkICR7Z2xvYmFsQ3NzVmFycy5jb2xvckJvcmRlclNlY29uZGFyeX1gLFxuICB1c2VyU2VsZWN0OiBcIm5vbmVcIixcbiAgYmFja2dyb3VuZENvbG9yOiBnbG9iYWxDc3NWYXJzLmNvbG9yQmdDb250YWluZXIsXG4gIHRyYW5zaXRpb25EdXJhdGlvbjogZ2xvYmFsQ3NzVmFycy5tb3Rpb25EdXJhdGlvbk1pZCxcbiAgdHJhbnNpdGlvblByb3BlcnR5OiBcImNvbG9yLCBib3JkZXItY29sb3IsIGJhY2tncm91bmQtY29sb3JcIixcbiAgdHJhbnNpdGlvblRpbWluZ0Z1bmN0aW9uOiBcImVhc2VcIixcbiAgXCImOmhvdmVyXCI6IHtcbiAgICBjb2xvcjogZ2xvYmFsQ3NzVmFycy5jb2xvclByaW1hcnlUZXh0LFxuICAgIGJvcmRlckNvbG9yOiBnbG9iYWxDc3NWYXJzLmNvbG9yUHJpbWFyeUJvcmRlcixcbiAgICBcIiYgLnZlZi1idG4tc21cIjoge1xuICAgICAgXCItLXZlZi1idG4tdGV4dC1jb2xvclwiOiBnbG9iYWxDc3NWYXJzLmNvbG9yUHJpbWFyeVRleHQsXG4gICAgICBcIi0tdmVmLWJ0bi10ZXh0LWNvbG9yLWhvdmVyXCI6IGdsb2JhbENzc1ZhcnMuY29sb3JQcmltYXJ5VGV4dEhvdmVyLFxuICAgICAgXCItLXZlZi1idG4tdGV4dC1jb2xvci1hY3RpdmVcIjogZ2xvYmFsQ3NzVmFycy5jb2xvclByaW1hcnlUZXh0QWN0aXZlXG4gICAgfVxuICB9LFxuICBcIiYuYWN0aXZlXCI6IHtcbiAgICBjb2xvcjogZ2xvYmFsQ3NzVmFycy5jb2xvclByaW1hcnlUZXh0LFxuICAgIGJvcmRlckNvbG9yOiBnbG9iYWxDc3NWYXJzLmNvbG9yUHJpbWFyeUJvcmRlcixcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IGdsb2JhbENzc1ZhcnMuY29sb3JQcmltYXJ5QmcsXG4gICAgXCImIC52ZWYtYnRuLXNtXCI6IHtcbiAgICAgIFwiLS12ZWYtYnRuLXRleHQtY29sb3JcIjogZ2xvYmFsQ3NzVmFycy5jb2xvclByaW1hcnlUZXh0LFxuICAgICAgXCItLXZlZi1idG4tdGV4dC1jb2xvci1ob3ZlclwiOiBnbG9iYWxDc3NWYXJzLmNvbG9yUHJpbWFyeVRleHRIb3ZlcixcbiAgICAgIFwiLS12ZWYtYnRuLXRleHQtY29sb3ItYWN0aXZlXCI6IGdsb2JhbENzc1ZhcnMuY29sb3JQcmltYXJ5VGV4dEFjdGl2ZVxuICAgIH1cbiAgfVxufSk7XG5cbmNvbnN0IGNsb3NlSWNvblN0eWxlID0gY3NzKHtcbiAgXCImLnZlZi1idG4tc21cIjoge1xuICAgIFwiLS12ZWYtY29udHJvbC1oZWlnaHQtc21cIjogXCIyMHB4XCIsXG4gICAgXCItLXZlZi1idXR0b24tY29udGVudC1mb250LXNpemUtc21cIjogXCIxMnB4XCJcbiAgfVxufSk7XG5cbmV4cG9ydCBmdW5jdGlvbiBUYWJJdGVtKHtcbiAgcmVmLFxuICBpbmRleCxcbiAgdGFiSWQsXG4gIGxhYmVsLFxuICBvbkNsb3NlLFxuICAuLi5wcm9wc1xufTogVGFiSXRlbVByb3BzKSB7XG4gIGNvbnN0IHsgcmVmOiBzb3J0YWJsZVJlZiB9ID0gdXNlU29ydGFibGUoe1xuICAgIGlkOiB0YWJJZCxcbiAgICBpbmRleFxuICB9KTtcbiAgY29uc3QgbWVyZ2VkUmVmID0gdXNlTWVyZ2VkUmVmPEhUTUxEaXZFbGVtZW50Pihzb3J0YWJsZVJlZiwgcmVmKTtcblxuICByZXR1cm4gKFxuICAgIDxtb3Rpb24uZGl2XG4gICAgICByZWY9e21lcmdlZFJlZn1cbiAgICAgIGNzcz17dGFiSXRlbVN0eWxlfVxuICAgICAgey4uLnByb3BzfVxuICAgID5cbiAgICAgIDxzcGFuPntsYWJlbH08L3NwYW4+XG5cbiAgICAgIDxJY29uQnV0dG9uXG4gICAgICAgIGNzcz17Y2xvc2VJY29uU3R5bGV9XG4gICAgICAgIGljb249ezxYSWNvbiAvPn1cbiAgICAgICAgc2hhcGU9XCJyb3VuZFwiXG4gICAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICAgIG9uQ2xpY2s9e2V2ZW50ID0+IHtcbiAgICAgICAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICAgICAgICBvbkNsb3NlPy4oKTtcbiAgICAgICAgfX1cbiAgICAgIC8+XG4gICAgPC9tb3Rpb24uZGl2PlxuICApO1xufVxuIl19 */");
+const closeIconStyle = process.env.NODE_ENV === "production" ? {
+  name: "n4rgm7",
+  styles: "&.vef-btn-sm{--vef-control-height-sm:20px;--vef-button-content-font-size-sm:12px;}"
+} : {
+  name: "n4rgm7",
+  styles: "&.vef-btn-sm{--vef-control-height-sm:20px;--vef-button-content-font-size-sm:12px;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy92ZW51cy9WRUYvdmVmLWZyYW1ld29yay1yZWFjdC9wYWNrYWdlcy9zdGFydGVyL3NyYy9jb21wb25lbnRzL2xheW91dC9jb21wb25lbnRzL3RhYnMvdGFiLWl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9EdUIiLCJmaWxlIjoiL1VzZXJzL3ZlbnVzL1ZFRi92ZWYtZnJhbWV3b3JrLXJlYWN0L3BhY2thZ2VzL3N0YXJ0ZXIvc3JjL2NvbXBvbmVudHMvbGF5b3V0L2NvbXBvbmVudHMvdGFicy90YWItaXRlbS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENvbXBvbmVudFByb3BzLCBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcblxuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL3JlYWN0XCI7XG5pbXBvcnQgeyBnbG9iYWxDc3NWYXJzLCBJY29uQnV0dG9uIH0gZnJvbSBcIkB2ZWYtZnJhbWV3b3JrL2NvbXBvbmVudHNcIjtcbmltcG9ydCB7IG1vdGlvbiwgdXNlU29ydGFibGUgfSBmcm9tIFwiQHZlZi1mcmFtZXdvcmsvY29yZVwiO1xuaW1wb3J0IHsgdXNlTWVyZ2VkUmVmIH0gZnJvbSBcIkB2ZWYtZnJhbWV3b3JrL2hvb2tzXCI7XG5pbXBvcnQgeyBYSWNvbiB9IGZyb20gXCJsdWNpZGUtcmVhY3RcIjtcblxuaW50ZXJmYWNlIFRhYkl0ZW1Qcm9wcyBleHRlbmRzIENvbXBvbmVudFByb3BzPHR5cGVvZiBtb3Rpb24uZGl2PiB7XG4gIGluZGV4OiBudW1iZXI7XG4gIHRhYklkOiBzdHJpbmc7XG4gIGxhYmVsOiBSZWFjdE5vZGU7XG4gIG9uQ2xvc2U/OiAoKSA9PiB2b2lkO1xufVxuXG5jb25zdCB0YWJJdGVtU3R5bGUgPSBjc3Moe1xuICBmbGV4OiBcIm5vbmVcIixcbiAgaGVpZ2h0OiBcImNhbGMoMTAwJSAtIDEycHgpXCIsXG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICBjb2x1bW5HYXA6IGdsb2JhbENzc1ZhcnMuc3BhY2luZ1hzLFxuICBwYWRkaW5nSW5saW5lU3RhcnQ6IGdsb2JhbENzc1ZhcnMuc3BhY2luZ1NtLFxuICBwYWRkaW5nSW5saW5lRW5kOiBgY2FsYygke2dsb2JhbENzc1ZhcnMuc3BhY2luZ1NtfSAtIDNweClgLFxuICBib3JkZXJSYWRpdXM6IGdsb2JhbENzc1ZhcnMuYm9yZGVyUmFkaXVzU20sXG4gIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gIGJvcmRlcjogYDFweCBzb2xpZCAke2dsb2JhbENzc1ZhcnMuY29sb3JCb3JkZXJTZWNvbmRhcnl9YCxcbiAgdXNlclNlbGVjdDogXCJub25lXCIsXG4gIGJhY2tncm91bmRDb2xvcjogZ2xvYmFsQ3NzVmFycy5jb2xvckJnQ29udGFpbmVyLFxuICB0cmFuc2l0aW9uRHVyYXRpb246IGdsb2JhbENzc1ZhcnMubW90aW9uRHVyYXRpb25NaWQsXG4gIHRyYW5zaXRpb25Qcm9wZXJ0eTogXCJjb2xvciwgYm9yZGVyLWNvbG9yLCBiYWNrZ3JvdW5kLWNvbG9yXCIsXG4gIHRyYW5zaXRpb25UaW1pbmdGdW5jdGlvbjogXCJlYXNlXCIsXG4gIFwiJjpob3ZlclwiOiB7XG4gICAgY29sb3I6IGdsb2JhbENzc1ZhcnMuY29sb3JQcmltYXJ5VGV4dCxcbiAgICBib3JkZXJDb2xvcjogZ2xvYmFsQ3NzVmFycy5jb2xvclByaW1hcnlCb3JkZXIsXG4gICAgXCImIC52ZWYtYnRuLXNtXCI6IHtcbiAgICAgIFwiLS12ZWYtYnRuLXRleHQtY29sb3JcIjogZ2xvYmFsQ3NzVmFycy5jb2xvclByaW1hcnlUZXh0LFxuICAgICAgXCItLXZlZi1idG4tdGV4dC1jb2xvci1ob3ZlclwiOiBnbG9iYWxDc3NWYXJzLmNvbG9yUHJpbWFyeVRleHRIb3ZlcixcbiAgICAgIFwiLS12ZWYtYnRuLXRleHQtY29sb3ItYWN0aXZlXCI6IGdsb2JhbENzc1ZhcnMuY29sb3JQcmltYXJ5VGV4dEFjdGl2ZVxuICAgIH1cbiAgfSxcbiAgXCImLmFjdGl2ZVwiOiB7XG4gICAgY29sb3I6IGdsb2JhbENzc1ZhcnMuY29sb3JQcmltYXJ5VGV4dCxcbiAgICBib3JkZXJDb2xvcjogZ2xvYmFsQ3NzVmFycy5jb2xvclByaW1hcnlCb3JkZXIsXG4gICAgYmFja2dyb3VuZENvbG9yOiBnbG9iYWxDc3NWYXJzLmNvbG9yUHJpbWFyeUJnLFxuICAgIFwiJiAudmVmLWJ0bi1zbVwiOiB7XG4gICAgICBcIi0tdmVmLWJ0bi10ZXh0LWNvbG9yXCI6IGdsb2JhbENzc1ZhcnMuY29sb3JQcmltYXJ5VGV4dCxcbiAgICAgIFwiLS12ZWYtYnRuLXRleHQtY29sb3ItaG92ZXJcIjogZ2xvYmFsQ3NzVmFycy5jb2xvclByaW1hcnlUZXh0SG92ZXIsXG4gICAgICBcIi0tdmVmLWJ0bi10ZXh0LWNvbG9yLWFjdGl2ZVwiOiBnbG9iYWxDc3NWYXJzLmNvbG9yUHJpbWFyeVRleHRBY3RpdmVcbiAgICB9XG4gIH1cbn0pO1xuXG5jb25zdCBjbG9zZUljb25TdHlsZSA9IGNzcyh7XG4gIFwiJi52ZWYtYnRuLXNtXCI6IHtcbiAgICBcIi0tdmVmLWNvbnRyb2wtaGVpZ2h0LXNtXCI6IFwiMjBweFwiLFxuICAgIFwiLS12ZWYtYnV0dG9uLWNvbnRlbnQtZm9udC1zaXplLXNtXCI6IFwiMTJweFwiXG4gIH1cbn0pO1xuXG5leHBvcnQgZnVuY3Rpb24gVGFiSXRlbSh7XG4gIHJlZixcbiAgaW5kZXgsXG4gIHRhYklkLFxuICBsYWJlbCxcbiAgb25DbG9zZSxcbiAgLi4ucHJvcHNcbn06IFRhYkl0ZW1Qcm9wcykge1xuICBjb25zdCB7IHJlZjogc29ydGFibGVSZWYgfSA9IHVzZVNvcnRhYmxlKHtcbiAgICBpZDogdGFiSWQsXG4gICAgaW5kZXhcbiAgfSk7XG4gIGNvbnN0IG1lcmdlZFJlZiA9IHVzZU1lcmdlZFJlZjxIVE1MRGl2RWxlbWVudD4oc29ydGFibGVSZWYsIHJlZik7XG5cbiAgcmV0dXJuIChcbiAgICA8bW90aW9uLmRpdlxuICAgICAgcmVmPXttZXJnZWRSZWZ9XG4gICAgICBjc3M9e3RhYkl0ZW1TdHlsZX1cbiAgICAgIHsuLi5wcm9wc31cbiAgICA+XG4gICAgICA8c3Bhbj57bGFiZWx9PC9zcGFuPlxuXG4gICAgICA8SWNvbkJ1dHRvblxuICAgICAgICBjc3M9e2Nsb3NlSWNvblN0eWxlfVxuICAgICAgICBpY29uPXs8WEljb24gLz59XG4gICAgICAgIHNoYXBlPVwicm91bmRcIlxuICAgICAgICBzaXplPVwic21hbGxcIlxuICAgICAgICBvbkNsaWNrPXtldmVudCA9PiB7XG4gICAgICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICAgICAgb25DbG9zZT8uKCk7XG4gICAgICAgIH19XG4gICAgICAvPlxuICAgIDwvbW90aW9uLmRpdj5cbiAgKTtcbn1cbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+function TabItem({
+  ref,
+  index,
+  tabId,
+  label,
+  onClose,
+  ...props
+}) {
+  const {
+    ref: sortableRef
+  } = useSortable({
+    id: tabId,
+    index
+  });
+  const mergedRef = useMergedRef(sortableRef, ref);
+  return /* @__PURE__ */ jsxs(motion.div, { ref: mergedRef, css: tabItemStyle, ...props, children: [
+    /* @__PURE__ */ jsx("span", { children: label }),
+    /* @__PURE__ */ jsx(IconButton, { css: closeIconStyle, icon: /* @__PURE__ */ jsx(XIcon, {}), shape: "round", size: "small", onClick: (event) => {
+      event.stopPropagation();
+      onClose?.();
+    } })
+  ] });
+}
+
+export { TabItem };

package/dist/es/components/layout/components/tabs/tab-list.js

@@ -0,0 +1,87 @@
+/*! @vef-framework/starter v2.0.0 made with ❤️ by Venus | 2025-11-25T10:06:38.668Z */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { globalCssVars } from '@vef-framework/components';
+import { useShallow, DragDropProvider, AnimatePresence, clsx, moveDragItem, RestrictToHorizontalAxis } from '@vef-framework/core';
+import '../../../../constants/index.js';
+import '../../../../stores/index.js';
+import '../../hooks/index.js';
+import { ContextMenu } from './context-menu.js';
+import { TabItem } from './tab-item.js';
+import { useTabStore } from '../../../../stores/tab.js';
+import { useTabNavigate } from '../../hooks/use-tab-navigate.js';
+import { INDEX_ROUTE_PATH } from '../../../../constants/router.js';
+
+const tabListStyle = /* @__PURE__ */ css({
+  display: "flex",
+  alignItems: "center",
+  height: "var(--vef-layout-tabs-height)",
+  columnGap: globalCssVars.spacingXs,
+  width: "max-content"
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy92ZW51cy9WRUYvdmVmLWZyYW1ld29yay1yZWFjdC9wYWNrYWdlcy9zdGFydGVyL3NyYy9jb21wb25lbnRzL2xheW91dC9jb21wb25lbnRzL3RhYnMvdGFiLWxpc3QudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVVxQiIsImZpbGUiOiIvVXNlcnMvdmVudXMvVkVGL3ZlZi1mcmFtZXdvcmstcmVhY3QvcGFja2FnZXMvc3RhcnRlci9zcmMvY29tcG9uZW50cy9sYXlvdXQvY29tcG9uZW50cy90YWJzL3RhYi1saXN0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHsgZ2xvYmFsQ3NzVmFycyB9IGZyb20gXCJAdmVmLWZyYW1ld29yay9jb21wb25lbnRzXCI7XG5pbXBvcnQgeyBBbmltYXRlUHJlc2VuY2UsIGNsc3gsIERyYWdEcm9wUHJvdmlkZXIsIG1vdmVEcmFnSXRlbSwgUmVzdHJpY3RUb0hvcml6b250YWxBeGlzLCB1c2VTaGFsbG93IH0gZnJvbSBcIkB2ZWYtZnJhbWV3b3JrL2NvcmVcIjtcblxuaW1wb3J0IHsgSU5ERVhfUk9VVEVfUEFUSCB9IGZyb20gXCIuLi8uLi8uLi8uLi9jb25zdGFudHNcIjtcbmltcG9ydCB7IHVzZVRhYlN0b3JlIH0gZnJvbSBcIi4uLy4uLy4uLy4uL3N0b3Jlc1wiO1xuaW1wb3J0IHsgdXNlVGFiTmF2aWdhdGUgfSBmcm9tIFwiLi4vLi4vaG9va3NcIjtcbmltcG9ydCB7IENvbnRleHRNZW51IH0gZnJvbSBcIi4vY29udGV4dC1tZW51XCI7XG5pbXBvcnQgeyBUYWJJdGVtIH0gZnJvbSBcIi4vdGFiLWl0ZW1cIjtcblxuY29uc3QgdGFiTGlzdFN0eWxlID0gY3NzKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gIGhlaWdodDogXCJ2YXIoLS12ZWYtbGF5b3V0LXRhYnMtaGVpZ2h0KVwiLFxuICBjb2x1bW5HYXA6IGdsb2JhbENzc1ZhcnMuc3BhY2luZ1hzLFxuICB3aWR0aDogXCJtYXgtY29udGVudFwiXG59KTtcblxuZXhwb3J0IGZ1bmN0aW9uIFRhYkxpc3QoKSB7XG4gIGNvbnN0IHsgc2V0VGFicywgcmVtb3ZlVGFiIH0gPSB1c2VUYWJTdG9yZShcbiAgICB1c2VTaGFsbG93KCh7IHNldFRhYnMsIHJlbW92ZVRhYiB9KSA9PiB7XG4gICAgICByZXR1cm4geyBzZXRUYWJzLCByZW1vdmVUYWIgfTtcbiAgICB9KVxuICApO1xuXG4gIGNvbnN0IGFjdGl2ZVRhYklkID0gdXNlVGFiU3RvcmUoc3RhdGUgPT4gc3RhdGUuYWN0aXZlVGFiSWQpO1xuICBjb25zdCB0YWJzID0gdXNlVGFiU3RvcmUoc3RhdGUgPT4gc3RhdGUudGFicyk7XG5cbiAgY29uc3QgbmF2aWdhdGUgPSB1c2VUYWJOYXZpZ2F0ZSgpO1xuXG4gIHJldHVybiAoXG4gICAgPERyYWdEcm9wUHJvdmlkZXJcbiAgICAgIC8vIFRPRE8gT3B0aW1pemUgdHlwZSBtaXNtYXRjaFxuICAgICAgbW9kaWZpZXJzPXtbUmVzdHJpY3RUb0hvcml6b250YWxBeGlzIGFzIG5ldmVyXX1cbiAgICAgIG9uRHJhZ0VuZD17ZXZlbnQgPT4ge1xuICAgICAgICBzZXRUYWJzKFxuICAgICAgICAgIG1vdmVEcmFnSXRlbSh0YWJzLCBldmVudClcbiAgICAgICAgKTtcbiAgICAgIH19XG4gICAgPlxuICAgICAgPGRpdiBjc3M9e3RhYkxpc3RTdHlsZX0+XG4gICAgICAgIDxBbmltYXRlUHJlc2VuY2U+XG4gICAgICAgICAge1xuICAgICAgICAgICAgdGFicy5tYXAoKHRhYiwgaW5kZXgpID0+IChcbiAgICAgICAgICAgICAgPENvbnRleHRNZW51IGtleT17dGFiLmlkfSB0YWJJZD17dGFiLmlkfT5cbiAgICAgICAgICAgICAgICA8VGFiSXRlbVxuICAgICAgICAgICAgICAgICAgbGF5b3V0XG4gICAgICAgICAgICAgICAgICBpbmRleD17aW5kZXh9XG4gICAgICAgICAgICAgICAgICBsYWJlbD17dGFiLmxhYmVsfVxuICAgICAgICAgICAgICAgICAgdGFiSWQ9e3RhYi5pZH1cbiAgICAgICAgICAgICAgICAgIGFuaW1hdGU9e3tcbiAgICAgICAgICAgICAgICAgICAgb3BhY2l0eTogMSxcbiAgICAgICAgICAgICAgICAgICAgeDogMCxcbiAgICAgICAgICAgICAgICAgICAgc2NhbGU6IDFcbiAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgICBjbGFzc05hbWU9e2Nsc3goe1xuICAgICAgICAgICAgICAgICAgICBhY3RpdmU6IHRhYi5pZCA9PT0gYWN0aXZlVGFiSWRcbiAgICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICAgICAgZXhpdD17e1xuICAgICAgICAgICAgICAgICAgICBvcGFjaXR5OiAwLFxuICAgICAgICAgICAgICAgICAgICB4OiAtMjAsXG4gICAgICAgICAgICAgICAgICAgIHNjYWxlOiAwLjgsXG4gICAgICAgICAgICAgICAgICAgIHRyYW5zaXRpb246IHtcbiAgICAgICAgICAgICAgICAgICAgICBlYXNlOiBcImVhc2VJblwiXG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgICBpbml0aWFsPXt7XG4gICAgICAgICAgICAgICAgICAgIG9wYWNpdHk6IDAsXG4gICAgICAgICAgICAgICAgICAgIHg6IDIwLFxuICAgICAgICAgICAgICAgICAgICBzY2FsZTogMC44XG4gICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgICAgdHJhbnNpdGlvbj17e1xuICAgICAgICAgICAgICAgICAgICBkdXJhdGlvbjogMC4zLFxuICAgICAgICAgICAgICAgICAgICBkZWxheTogaW5kZXggKiAwLjA1LFxuICAgICAgICAgICAgICAgICAgICBlYXNlOiBcImVhc2VPdXRcIlxuICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9e2V2ZW50ID0+IHtcbiAgICAgICAgICAgICAgICAgICAgY29uc3QgdGFyZ2V0RWxlbWVudCA9IGV2ZW50LmN1cnJlbnRUYXJnZXQ7XG4gICAgICAgICAgICAgICAgICAgIG5hdmlnYXRlKHRhYik7XG4gICAgICAgICAgICAgICAgICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgaWYgKHRhcmdldEVsZW1lbnQuaXNDb25uZWN0ZWQpIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHRhcmdldEVsZW1lbnQuc2Nyb2xsSW50b1ZpZXcoe1xuICAgICAgICAgICAgICAgICAgICAgICAgICBpbmxpbmU6IFwiY2VudGVyXCIsXG4gICAgICAgICAgICAgICAgICAgICAgICAgIGJlaGF2aW9yOiBcInNtb290aFwiXG4gICAgICAgICAgICAgICAgICAgICAgICB9KTtcbiAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgIG9uQ2xvc2U9eygpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgaWYgKHRhYnMubGVuZ3RoID09PSAxICYmIHRhYi5mdWxsUGF0aCA9PT0gSU5ERVhfUk9VVEVfUEFUSCkge1xuICAgICAgICAgICAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAgICAgICAgIHJlbW92ZVRhYih0YWIuaWQsIG5hdmlnYXRlKTtcbiAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgPC9Db250ZXh0TWVudT5cbiAgICAgICAgICAgICkpXG4gICAgICAgICAgfVxuICAgICAgICA8L0FuaW1hdGVQcmVzZW5jZT5cbiAgICAgIDwvZGl2PlxuICAgIDwvRHJhZ0Ryb3BQcm92aWRlcj5cbiAgKTtcbn1cbiJdfQ== */");
+function TabList() {
+  const {
+    setTabs,
+    removeTab
+  } = useTabStore(useShallow(({
+    setTabs: setTabs2,
+    removeTab: removeTab2
+  }) => {
+    return {
+      setTabs: setTabs2,
+      removeTab: removeTab2
+    };
+  }));
+  const activeTabId = useTabStore((state) => state.activeTabId);
+  const tabs = useTabStore((state) => state.tabs);
+  const navigate = useTabNavigate();
+  return /* @__PURE__ */ jsx(
+    DragDropProvider,
+    {
+      modifiers: [RestrictToHorizontalAxis],
+      onDragEnd: (event) => {
+        setTabs(moveDragItem(tabs, event));
+      },
+      children: /* @__PURE__ */ jsx("div", { css: tabListStyle, children: /* @__PURE__ */ jsx(AnimatePresence, { children: tabs.map((tab, index) => /* @__PURE__ */ jsx(ContextMenu, { tabId: tab.id, children: /* @__PURE__ */ jsx(TabItem, { layout: true, index, label: tab.label, tabId: tab.id, animate: {
+        opacity: 1,
+        x: 0,
+        scale: 1
+      }, className: clsx({
+        active: tab.id === activeTabId
+      }), exit: {
+        opacity: 0,
+        x: -20,
+        scale: 0.8,
+        transition: {
+          ease: "easeIn"
+        }
+      }, initial: {
+        opacity: 0,
+        x: 20,
+        scale: 0.8
+      }, transition: {
+        duration: 0.3,
+        delay: index * 0.05,
+        ease: "easeOut"
+      }, onClick: (event) => {
+        const targetElement = event.currentTarget;
+        navigate(tab);
+        requestAnimationFrame(() => {
+          if (targetElement.isConnected) {
+            targetElement.scrollIntoView({
+              inline: "center",
+              behavior: "smooth"
+            });
+          }
+        });
+      }, onClose: () => {
+        if (tabs.length === 1 && tab.fullPath === INDEX_ROUTE_PATH) {
+          return;
+        }
+        removeTab(tab.id, navigate);
+      } }) }, tab.id)) }) })
+    }
+  );
+}
+
+export { TabList };