@pactor-app/ui 1.14.0 → 1.15.0

package/dist/index.cjs

@@ -3800,6 +3800,7 @@ function Grid({ columns = 1, gap, className, style, children }) {
 // src/components/components/Header/index.tsx
 var import_runtime11 = require("@pactor-app/runtime");
 var import_lucide_react16 = require("lucide-react");
+var import_react15 = require("react");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var menuItemClass = "flex items-center gap-1 rounded-md px-3 py-2 text-sm transition-colors text-muted-foreground hover:bg-accent/50 hover:text-foreground";
 function Header({
@@ -3810,6 +3811,8 @@ function Header({
   menu,
   user,
   locales,
+  themeToggle = false,
+  onThemeChange,
   onMenuSelect,
   onDropdownSelect,
   onUserSelect,
@@ -3830,7 +3833,7 @@ function Header({
     "flex h-14 shrink-0 items-center gap-4 border-b bg-card px-4",
     className
   );
-  if (!hasBrand && !dropdown && !hasMenu && !hasUser && !hasLocales) {
+  if (!hasBrand && !dropdown && !hasMenu && !hasUser && !hasLocales && !themeToggle) {
     return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("header", { "data-slot": "layout-header", className: rootClass, style, children });
   }
   const brandNode = hasBrand && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { "data-slot": "header-brand", className: "flex items-center gap-2", children: [
@@ -3847,7 +3850,7 @@ function Header({
   ] });
   const dropdownNode = dropdown !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(HeaderDropdownArea, { dropdown, onSelect: onDropdownSelect });
   const showLeft = brandLeft || dropdownLeft || hasMenu;
-  const showRight = dropdownRight || brandRight || hasLocales || hasUser;
+  const showRight = dropdownRight || brandRight || hasLocales || hasUser || themeToggle;
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("header", { "data-slot": "layout-header", className: rootClass, style, children: [
     showLeft && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { "data-slot": "header-left", className: "flex items-center gap-4", children: [
       brandLeft && brandNode,
@@ -3858,6 +3861,7 @@ function Header({
     showRight && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { "data-slot": "header-right", className: "flex items-center gap-4", children: [
       dropdownRight && dropdownNode,
       brandRight && brandNode,
+      themeToggle && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(HeaderThemeToggle, { onSelect: onThemeChange }),
       hasLocales && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(HeaderLocalesArea, { locales, onSelect: onLocaleChange }),
       hasUser && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(HeaderUserArea, { user, onSelect: onUserSelect })
     ] })
@@ -4005,6 +4009,39 @@ function HeaderLocalesArea({
     )) })
   ] });
 }
+function readCurrentTheme() {
+  if (typeof document === "undefined") {
+    return "light";
+  }
+  return document.documentElement.getAttribute("data-pactor-theme") === "dark" ? "dark" : "light";
+}
+function HeaderThemeToggle({
+  onSelect
+}) {
+  const [theme, setTheme] = (0, import_react15.useState)(readCurrentTheme);
+  const handleToggle = () => {
+    const next = readCurrentTheme() === "dark" ? "light" : "dark";
+    if (next === "dark") {
+      document.documentElement.setAttribute("data-pactor-theme", "dark");
+    } else {
+      document.documentElement.removeAttribute("data-pactor-theme");
+    }
+    setTheme(next);
+    onSelect?.(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    "button",
+    {
+      type: "button",
+      "data-slot": "header-theme-toggle",
+      className: "flex size-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground",
+      title: theme === "dark" ? "\u5207\u6362\u4E3A\u6D45\u8272" : "\u5207\u6362\u4E3A\u6DF1\u8272",
+      "aria-label": "\u5207\u6362\u660E\u6697\u4E3B\u9898",
+      onClick: handleToggle,
+      children: theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: "sun", size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: "moon", size: "sm" })
+    }
+  );
+}
 
 // src/components/components/HoverCard/index.tsx
 var import_runtime12 = require("@pactor-app/runtime");
@@ -4066,7 +4103,7 @@ function HoverCard2({ content, children, className, style }) {
 
 // src/components/components/Input/index.tsx
 var import_runtime13 = require("@pactor-app/runtime");
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 function Input2({
   name,
@@ -4084,9 +4121,9 @@ function Input2({
 }) {
   const form = useFormContext();
   const { t } = (0, import_runtime13.useI18n)();
-  const controlId = (0, import_react15.useId)();
+  const controlId = (0, import_react16.useId)();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
@@ -4203,7 +4240,7 @@ function InputGroup2({ className, style, children }) {
 }
 
 // src/components/components/InputOTP/index.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/ui/input-otp.tsx
 var import_input_otp = require("input-otp");
@@ -4279,15 +4316,15 @@ function InputOTP2({
 }) {
   const form = useFormContext();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
     }
     return void 0;
   });
-  const [innerValue, setInnerValue] = (0, import_react16.useState)(typeof value === "string" ? value : "");
-  (0, import_react16.useEffect)(() => {
+  const [innerValue, setInnerValue] = (0, import_react17.useState)(typeof value === "string" ? value : "");
+  (0, import_react17.useEffect)(() => {
     if (!inForm) setInnerValue(typeof value === "string" ? value : "");
   }, [inForm, value]);
   const current = inForm && form && name ? typeof form.values[name] === "string" ? form.values[name] : "" : innerValue;
@@ -4525,7 +4562,7 @@ function Link2({ href, text, target, className, style, children }) {
 }
 
 // src/components/components/Menu/index.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/components/Sidebar/rail-tooltip.tsx
 var import_jsx_runtime78 = require("react/jsx-runtime");
@@ -4541,7 +4578,7 @@ function RailTooltip({
 
 // src/components/components/Sidebar/index.tsx
 var import_runtime16 = require("@pactor-app/runtime");
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/ui/sidebar.tsx
 var React5 = __toESM(require("react"), 1);
@@ -4549,13 +4586,13 @@ var import_class_variance_authority5 = require("class-variance-authority");
 var import_lucide_react19 = require("lucide-react");
 
 // src/hooks/use-mobile.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 var MOBILE_MEDIA_QUERY = "(max-width: 767px)";
 function useIsMobile() {
-  const [isMobile, setIsMobile] = (0, import_react17.useState)(
+  const [isMobile, setIsMobile] = (0, import_react18.useState)(
     () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(MOBILE_MEDIA_QUERY).matches
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (typeof window.matchMedia !== "function") {
       return;
     }
@@ -4887,7 +4924,12 @@ function SidebarRoot({
             className: cn(
               "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
               side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : (
+                // 边框色显式声明：不能只给宽度——宿主引入 Tailwind 时其
+                // preflight（同为 base 层且后加载）会把默认 border-color
+                // 重置为 currentColor，宽度型边框会脱离皮肤令牌
+                "border-sidebar-border group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l"
+              ),
               className
             ),
             ...props,
@@ -5188,14 +5230,14 @@ function SidebarInner({
   const isMobile = useIsMobile();
   const { state, setOpenMobile, toggleSidebar } = useSidebar();
   const collapsed = state === "collapsed";
-  const prevCollapsed = (0, import_react18.useRef)(collapsed);
-  (0, import_react18.useEffect)(() => {
+  const prevCollapsed = (0, import_react19.useRef)(collapsed);
+  (0, import_react19.useEffect)(() => {
     if (prevCollapsed.current !== collapsed) {
       prevCollapsed.current = collapsed;
       onCollapse?.(collapsed);
     }
   }, [collapsed, onCollapse]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (locationKey !== void 0) {
       setOpenMobile(false);
     }
@@ -5293,7 +5335,7 @@ function Menu2({
   const drawer = useSidebarDrawer();
   const collapsed = mode === "inline" && drawer?.collapsed === true;
   const collapsibleOn = collapsible && mode === "inline" && !collapsed;
-  const [expandedKeys, setExpandedKeys] = (0, import_react19.useState)(() => {
+  const [expandedKeys, setExpandedKeys] = (0, import_react20.useState)(() => {
     const initial = new Set(defaultExpandedKeys ?? []);
     if (selectedKey !== void 0) {
       collectAncestors(items, selectedKey, initial);
@@ -5373,8 +5415,8 @@ function MenuEntry({
   const isDirectory = collapsible && hasChildren;
   const expanded = isDirectory && expandedKeys?.has(item.key) === true;
   const railDirectory = collapsed && hasChildren;
-  const [flyoutOpen, setFlyoutOpen] = (0, import_react19.useState)(false);
-  const flyoutTimer = (0, import_react19.useRef)(void 0);
+  const [flyoutOpen, setFlyoutOpen] = (0, import_react20.useState)(false);
+  const flyoutTimer = (0, import_react20.useRef)(void 0);
   const flyoutOpenNow = () => {
     window.clearTimeout(flyoutTimer.current);
     setFlyoutOpen(true);
@@ -5383,7 +5425,7 @@ function MenuEntry({
     window.clearTimeout(flyoutTimer.current);
     flyoutTimer.current = window.setTimeout(() => setFlyoutOpen(false), 200);
   };
-  (0, import_react19.useEffect)(() => () => window.clearTimeout(flyoutTimer.current), []);
+  (0, import_react20.useEffect)(() => () => window.clearTimeout(flyoutTimer.current), []);
   const button = /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
     "button",
     {
@@ -5782,7 +5824,7 @@ function Page({ title, className, style, children }) {
 }
 
 // src/components/components/Pagination/index.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/ui/pagination.tsx
 var import_lucide_react21 = require("lucide-react");
@@ -5910,7 +5952,7 @@ function Pagination2({
   className,
   style
 }) {
-  const [innerPage, setInnerPage] = (0, import_react20.useState)(1);
+  const [innerPage, setInnerPage] = (0, import_react21.useState)(1);
   const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
   const current = Math.min(Math.max(1, page ?? innerPage), pageCount);
   const goTo = (next) => {
@@ -6030,7 +6072,7 @@ function Progress2({ value, className, style }) {
 }
 
 // src/components/components/RadioGroup/index.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/ui/radio-group.tsx
 var import_radio = require("@base-ui/react/radio");
@@ -6116,9 +6158,9 @@ function RadioGroup2({
   style
 }) {
   const form = useFormContext();
-  const controlId = (0, import_react21.useId)();
+  const controlId = (0, import_react22.useId)();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
@@ -6190,7 +6232,7 @@ function RadioGroup2({
 
 // src/components/components/Resizable/index.tsx
 var import_runtime18 = require("@pactor-app/runtime");
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/ui/resizable.tsx
 var import_lucide_react22 = require("lucide-react");
@@ -6243,7 +6285,7 @@ function Resizable({
   style
 }) {
   const { renderChildren } = (0, import_runtime18.useRenderer)();
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(PanelGroup, { orientation: direction, className, style, children: panels.map((panel, index) => /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_react22.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(PanelGroup, { orientation: direction, className, style, children: panels.map((panel, index) => /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_react23.Fragment, { children: [
     index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(ResizableHandle, { withHandle: true }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
       Panel,
@@ -6335,7 +6377,7 @@ function ScrollArea2({
 
 // src/components/components/Select/index.tsx
 var import_runtime19 = require("@pactor-app/runtime");
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/ui/select.tsx
 var import_select = require("@base-ui/react/select");
@@ -6485,9 +6527,9 @@ function Select2({
 }) {
   const form = useFormContext();
   const { t } = (0, import_runtime19.useI18n)();
-  const controlId = (0, import_react23.useId)();
+  const controlId = (0, import_react24.useId)();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
@@ -6682,7 +6724,7 @@ function Skeleton2({ shape = "line", width, height, className, style }) {
 }
 
 // src/components/components/Slider/index.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/ui/slider.tsx
 var import_slider = require("@base-ui/react/slider");
@@ -6764,7 +6806,7 @@ function Slider2({
 }) {
   const form = useFormContext();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
@@ -6815,7 +6857,7 @@ function Slider2({
 
 // src/components/components/Sonner/index.tsx
 var import_runtime20 = require("@pactor-app/runtime");
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/ui/toast.tsx
 var import_toast = require("@base-ui/react/toast");
@@ -6895,7 +6937,7 @@ function Toaster({ className }) {
 var import_jsx_runtime111 = require("react/jsx-runtime");
 function Sonner({ className, style }) {
   const { context } = (0, import_runtime20.useRenderer)();
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const { actions } = context;
     if (actions.has("toast")) {
       return;
@@ -6953,7 +6995,7 @@ function Statistic({ title, value, precision, suffix, className, style }) {
 }
 
 // src/components/components/Switch/index.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/ui/switch.tsx
 var import_switch = require("@base-ui/react/switch");
@@ -6992,9 +7034,9 @@ function Switch2({
   style
 }) {
   const form = useFormContext();
-  const controlId = (0, import_react26.useId)();
+  const controlId = (0, import_react27.useId)();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
@@ -7048,7 +7090,7 @@ function Switch2({
 
 // src/components/components/Table/index.tsx
 var import_runtime21 = require("@pactor-app/runtime");
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime117 = require("react/jsx-runtime");
 function renderCellValue2(value) {
   if (value === void 0 || value === null) {
@@ -7071,7 +7113,7 @@ function Table3({
 }) {
   const { renderChildren } = (0, import_runtime21.useRenderer)();
   const { t } = (0, import_runtime21.useI18n)();
-  const [current, setCurrent] = (0, import_react27.useState)(1);
+  const [current, setCurrent] = (0, import_react28.useState)(1);
   const pageSize = pagination === false ? void 0 : pagination?.pageSize;
   const total = dataSource.length;
   const pageCount = pageSize !== void 0 && pageSize > 0 ? Math.max(1, Math.ceil(total / pageSize)) : 1;
@@ -7306,7 +7348,7 @@ function Text({
 }
 
 // src/components/components/Textarea/index.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime121 = require("react/jsx-runtime");
 function Textarea2({
   name,
@@ -7321,9 +7363,9 @@ function Textarea2({
   style
 }) {
   const form = useFormContext();
-  const controlId = (0, import_react28.useId)();
+  const controlId = (0, import_react29.useId)();
   const inForm = form?.inForm === true && typeof name === "string" && name !== "";
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (inForm && form && name) {
       form.registerField(name, rules, value);
       return () => form.unregisterField(name);
@@ -7751,10 +7793,10 @@ function collectDefaultOpenKeys(registry, activeMenuId) {
 var import_permission = require("@pactor-app/permission");
 var import_router = require("@pactor-app/router");
 var import_runtime23 = require("@pactor-app/runtime");
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/layout/admin/use-media-query.ts
-var import_react29 = require("react");
+var import_react30 = require("react");
 var BREAKPOINT_PX = {
   xs: 480,
   sm: 576,
@@ -7764,10 +7806,10 @@ var BREAKPOINT_PX = {
   xxl: 1600
 };
 function useMediaQuery(query) {
-  const [matches, setMatches] = (0, import_react29.useState)(
+  const [matches, setMatches] = (0, import_react30.useState)(
     () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false
   );
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
       return;
     }
@@ -7810,8 +7852,8 @@ function CollapsedGroupFlyout({
   activeMenuId,
   defaultOpenKeys
 }) {
-  const [open, setOpen] = (0, import_react30.useState)(false);
-  const closeTimer = (0, import_react30.useRef)(void 0);
+  const [open, setOpen] = (0, import_react31.useState)(false);
+  const closeTimer = (0, import_react31.useRef)(void 0);
   const openNow = () => {
     window.clearTimeout(closeTimer.current);
     setOpen(true);
@@ -7820,7 +7862,7 @@ function CollapsedGroupFlyout({
     window.clearTimeout(closeTimer.current);
     closeTimer.current = window.setTimeout(() => setOpen(false), 200);
   };
-  (0, import_react30.useEffect)(() => () => window.clearTimeout(closeTimer.current), []);
+  (0, import_react31.useEffect)(() => () => window.clearTimeout(closeTimer.current), []);
   return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
       PopoverTrigger,
@@ -8004,16 +8046,16 @@ function AdminLayout({
   const showTabs = config.tabs ?? false;
   const showBreadcrumb = config.breadcrumb ?? false;
   const showFooter = config.footer ?? false;
-  const [collapsed, setCollapsed] = (0, import_react30.useState)(config.collapsed ?? false);
+  const [collapsed, setCollapsed] = (0, import_react31.useState)(config.collapsed ?? false);
   const broken = useBreakpointBelow(config.breakpoint);
   const effectiveCollapsed = collapsed || broken;
-  const [bridgeRoute, setBridgeRoute] = (0, import_react30.useState)(
+  const [bridgeRoute, setBridgeRoute] = (0, import_react31.useState)(
     () => (0, import_router.resolveRoute)(registry, bridge.getLocation())
   );
-  const [tabs, setTabs] = (0, import_react30.useState)([]);
-  const tabsRef = (0, import_react30.useRef)(tabs);
+  const [tabs, setTabs] = (0, import_react31.useState)([]);
+  const tabsRef = (0, import_react31.useRef)(tabs);
   tabsRef.current = tabs;
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const handleLocation = (location) => {
       const next = (0, import_router.resolveRoute)(registry, location);
       setBridgeRoute(next);
@@ -8034,16 +8076,16 @@ function AdminLayout({
   }, [registry, bridge]);
   const route = routeProp ?? bridgeRoute;
   const activeMenuId = route?.activeMenu;
-  const visibleMenus = (0, import_react30.useMemo)(
+  const visibleMenus = (0, import_react31.useMemo)(
     () => buildVisibleMenuTree(registry, permissionChecker),
     [registry, permissionChecker]
   );
-  const defaultOpenKeysRef = (0, import_react30.useRef)(null);
+  const defaultOpenKeysRef = (0, import_react31.useRef)(null);
   if (defaultOpenKeysRef.current === null) {
     defaultOpenKeysRef.current = collectDefaultOpenKeys(registry, activeMenuId);
   }
   const defaultOpenKeys = defaultOpenKeysRef.current;
-  const activeTopId = (0, import_react30.useMemo)(() => {
+  const activeTopId = (0, import_react31.useMemo)(() => {
     if (activeMenuId !== void 0) {
       const chain = findMenuChain(registry, activeMenuId);
       if (chain.length > 0) {
@@ -8052,11 +8094,11 @@ function AdminLayout({
     }
     return void 0;
   }, [registry, activeMenuId]);
-  const [selectedTopId, setSelectedTopId] = (0, import_react30.useState)();
+  const [selectedTopId, setSelectedTopId] = (0, import_react31.useState)();
   const secondaryTopId = selectedTopId ?? activeTopId ?? visibleMenus.find((m) => m.type === "group")?.id ?? visibleMenus[0]?.id;
   const secondaryTop = visibleMenus.find((m) => m.id === secondaryTopId);
   const hasSecondary = (secondaryTop?.children?.length ?? 0) > 0;
-  const breadcrumbItems = (0, import_react30.useMemo)(() => {
+  const breadcrumbItems = (0, import_react31.useMemo)(() => {
     if (!showBreadcrumb || activeMenuId === void 0) {
       return [];
     }
@@ -8309,7 +8351,7 @@ function BlankLayout({ children }) {
 
 // src/layout/chat/ChatLayout.tsx
 var import_permission2 = require("@pactor-app/permission");
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime131 = require("react/jsx-runtime");
 function ChatLayout({
   brand,
@@ -8325,7 +8367,7 @@ function ChatLayout({
   sidebarFooter,
   children
 }) {
-  const registryMenus = (0, import_react31.useMemo)(() => {
+  const registryMenus = (0, import_react32.useMemo)(() => {
     if (menu !== void 0 || registry === void 0) {
       return [];
     }
@@ -8334,10 +8376,10 @@ function ChatLayout({
     return visible.flatMap((item) => menuItemToMenuData(item));
   }, [menu, registry, permissionChecker]);
   const menuItems = menu ?? registryMenus;
-  const [bridgePath, setBridgePath] = (0, import_react31.useState)(
+  const [bridgePath, setBridgePath] = (0, import_react32.useState)(
     () => bridge?.getLocation().pathname ?? "/"
   );
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (bridge === void 0) {
       return;
     }
@@ -8345,7 +8387,7 @@ function ChatLayout({
       setBridgePath(location.pathname);
     });
   }, [bridge]);
-  const activeKey = (0, import_react31.useMemo)(() => {
+  const activeKey = (0, import_react32.useMemo)(() => {
     if (activeMenuKey !== void 0) {
       return activeMenuKey;
     }
@@ -8720,7 +8762,7 @@ function isRecord(value) {
 
 // src/interaction/provider.tsx
 var import_runtime25 = require("@pactor-app/runtime");
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime134 = require("react/jsx-runtime");
 var TOAST_DURATION = 3e3;
@@ -8734,11 +8776,11 @@ function InteractionProvider({
   bridge,
   children
 }) {
-  const [confirmState, setConfirmState] = (0, import_react32.useState)(null);
-  const [confirmOpen, setConfirmOpen] = (0, import_react32.useState)(false);
-  const [toasts, setToasts] = (0, import_react32.useState)([]);
+  const [confirmState, setConfirmState] = (0, import_react33.useState)(null);
+  const [confirmOpen, setConfirmOpen] = (0, import_react33.useState)(false);
+  const [toasts, setToasts] = (0, import_react33.useState)([]);
   const { t } = (0, import_runtime25.useI18n)();
-  const { modal, message } = (0, import_react32.useMemo)(() => {
+  const { modal, message } = (0, import_react33.useMemo)(() => {
     const pushToast = (type, content) => {
       const id = Date.now() + Math.random();
       setToasts((prev) => [...prev, { id, type, content }]);
@@ -8760,7 +8802,7 @@ function InteractionProvider({
     };
     return { modal: modalImpl, message: messageImpl };
   }, []);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     bridge.modal = modal;
     bridge.message = message;
     return () => {
@@ -8843,7 +8885,7 @@ function InteractionProvider({
 // src/interaction/host.tsx
 var import_lucide_react27 = require("lucide-react");
 var import_runtime26 = require("@pactor-app/runtime");
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime135 = require("react/jsx-runtime");
 function toCssWidth(width) {
   if (width === void 0) {
@@ -8853,11 +8895,11 @@ function toCssWidth(width) {
 }
 function OverlayHost({ manager, resolvePage }) {
   const renderer = (0, import_runtime26.useRenderer)();
-  const stack = (0, import_react33.useSyncExternalStore)(
+  const stack = (0, import_react34.useSyncExternalStore)(
     (onChange) => manager.subscribe(onChange),
     () => manager.stack()
   );
-  (0, import_react33.useSyncExternalStore)(
+  (0, import_react34.useSyncExternalStore)(
     (onChange) => {
       const offState = renderer.context.state.subscribe(onChange);
       const offData = renderer.context.data.subscribe(onChange);
@@ -9004,9 +9046,9 @@ function PageOverlayBody({
   renderer,
   resolvePage
 }) {
-  const [child, setChild] = (0, import_react33.useState)(null);
-  const [error, setError] = (0, import_react33.useState)(null);
-  (0, import_react33.useEffect)(() => {
+  const [child, setChild] = (0, import_react34.useState)(null);
+  const [error, setError] = (0, import_react34.useState)(null);
+  (0, import_react34.useEffect)(() => {
     if (!resolvePage) {
       setError(
         new Error(

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { Accordion, AccordionItemData, AccordionProps, Alert, AlertDialog, AlertDialogProps, AlertProps, AlertVariant, AspectRatio, AspectRatioProps, Avatar, AvatarProps, Badge, BadgeProps, BadgeVariant, Breadcrumb, BreadcrumbItemData, BreadcrumbProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, ButtonVariant, Calendar, CalendarProps, Card, CardProps, Carousel, CarouselImage, CarouselItemData, CarouselProps, Chart, ChartProps, ChartType, ChatInput, ChatInputProps, Checkbox, CheckboxProps, Collapsible, CollapsibleProps, Combobox, ComboboxOption, ComboboxProps, Command, CommandGroupData, CommandItemData, CommandProps, Content, ContentProps, ContextMenu, ContextMenuItemData, ContextMenuProps, DataTable, DataTableColumn, DataTablePagination, DataTableProps, DataTableSort, DataTableSortOrder, DatePicker, DatePickerPreset, DatePickerPresetKey, DatePickerProps, DatePickerRangeProps, DatePickerSingleProps, DateRangeValue, Dialog, DialogProps, Drawer, DrawerPlacement, DrawerProps, DropdownMenu, DropdownMenuItemData, DropdownMenuProps, Empty, EmptyProps, Field, FieldProps, FieldRule, Flex, FlexProps, Footer, FooterProps, Form, FormContextValue, FormProps, Grid, GridProps, Header, HeaderBrandPosition, HeaderDropdown, HeaderDropdownItem, HeaderLocale, HeaderMenuItem, HeaderProps, HeaderUser, HeaderUserItem, HoverCard, HoverCardProps, ICONS, Icon, IconProps, IconSize, Input, InputGroup, InputGroupProps, InputOTP, InputOTPProps, InputProps, Item, ItemProps, Kbd, KbdProps, Label, LabelProps, Layout, LayoutProps, Link, LinkProps, Menu, MenuItem, MenuProps, Menubar, MenubarLeafItem, MenubarMenuData, MenubarProps, NavigationMenu, NavigationMenuChildItem, NavigationMenuItemData, NavigationMenuProps, Page, PageProps, Pagination, PaginationProps, Popover, PopoverProps, Progress, ProgressProps, RadioGroup, RadioGroupOption, RadioGroupProps, RailTooltip, Resizable, ResizablePanelData, ResizableProps, ScrollArea, ScrollAreaProps, Select, SelectOption, SelectProps, Separator, SeparatorProps, Sheet, SheetProps, SheetSide, Sidebar, SidebarBrand, SidebarNavItem, SidebarProps, Sider, SiderProps, Skeleton, SkeletonProps, SkeletonShape, Slider, SliderProps, Sonner, SonnerProps, Spinner, SpinnerProps, SpinnerSize, Statistic, StatisticProps, Switch, SwitchProps, TabItem, Table, TableColumn, TablePagination, TablePaginationInfo, TableProps, Tabs, TabsProps, Text, TextProps, TextType, Textarea, TextareaProps, Toggle, ToggleGroup, ToggleGroupOption, ToggleGroupProps, ToggleProps, Tooltip, TooltipProps, Typography, TypographyProps, TypographyVariant, builtinComponents, createComponentRegistry, normalizeIconName, registerBuiltinComponents, useFormContext, useSidebarDrawer } from './components/index.cjs';
+export { Accordion, AccordionItemData, AccordionProps, Alert, AlertDialog, AlertDialogProps, AlertProps, AlertVariant, AspectRatio, AspectRatioProps, Avatar, AvatarProps, Badge, BadgeProps, BadgeVariant, Breadcrumb, BreadcrumbItemData, BreadcrumbProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, ButtonVariant, Calendar, CalendarProps, Card, CardProps, Carousel, CarouselImage, CarouselItemData, CarouselProps, Chart, ChartProps, ChartType, ChatInput, ChatInputProps, Checkbox, CheckboxProps, Collapsible, CollapsibleProps, Combobox, ComboboxOption, ComboboxProps, Command, CommandGroupData, CommandItemData, CommandProps, Content, ContentProps, ContextMenu, ContextMenuItemData, ContextMenuProps, DataTable, DataTableColumn, DataTablePagination, DataTableProps, DataTableSort, DataTableSortOrder, DatePicker, DatePickerPreset, DatePickerPresetKey, DatePickerProps, DatePickerRangeProps, DatePickerSingleProps, DateRangeValue, Dialog, DialogProps, Drawer, DrawerPlacement, DrawerProps, DropdownMenu, DropdownMenuItemData, DropdownMenuProps, Empty, EmptyProps, Field, FieldProps, FieldRule, Flex, FlexProps, Footer, FooterProps, Form, FormContextValue, FormProps, Grid, GridProps, Header, HeaderBrandPosition, HeaderDropdown, HeaderDropdownItem, HeaderLocale, HeaderMenuItem, HeaderProps, HeaderTheme, HeaderUser, HeaderUserItem, HoverCard, HoverCardProps, ICONS, Icon, IconProps, IconSize, Input, InputGroup, InputGroupProps, InputOTP, InputOTPProps, InputProps, Item, ItemProps, Kbd, KbdProps, Label, LabelProps, Layout, LayoutProps, Link, LinkProps, Menu, MenuItem, MenuProps, Menubar, MenubarLeafItem, MenubarMenuData, MenubarProps, NavigationMenu, NavigationMenuChildItem, NavigationMenuItemData, NavigationMenuProps, Page, PageProps, Pagination, PaginationProps, Popover, PopoverProps, Progress, ProgressProps, RadioGroup, RadioGroupOption, RadioGroupProps, RailTooltip, Resizable, ResizablePanelData, ResizableProps, ScrollArea, ScrollAreaProps, Select, SelectOption, SelectProps, Separator, SeparatorProps, Sheet, SheetProps, SheetSide, Sidebar, SidebarBrand, SidebarNavItem, SidebarProps, Sider, SiderProps, Skeleton, SkeletonProps, SkeletonShape, Slider, SliderProps, Sonner, SonnerProps, Spinner, SpinnerProps, SpinnerSize, Statistic, StatisticProps, Switch, SwitchProps, TabItem, Table, TableColumn, TablePagination, TablePaginationInfo, TableProps, Tabs, TabsProps, Text, TextProps, TextType, Textarea, TextareaProps, Toggle, ToggleGroup, ToggleGroupOption, ToggleGroupProps, ToggleProps, Tooltip, TooltipProps, Typography, TypographyProps, TypographyVariant, builtinComponents, createComponentRegistry, normalizeIconName, registerBuiltinComponents, useFormContext, useSidebarDrawer } from './components/index.cjs';
 export { AdminBrand, AdminLayout, AdminLayoutBreakpoint, AdminLayoutConfig, AdminLayoutMode, AdminLayoutProps, BlankLayout, BlankLayoutProps, ChatLayout, ChatLayoutBrand, ChatLayoutMenuItem, ChatLayoutProps, LandingLayout, LandingLayoutProps, LayoutComponent, LayoutRegistry, LoginBrand, LoginLayout, LoginLayoutProps, collectDefaultOpenKeys, createLayoutRegistry, findMenuChain, registerBuiltinLayouts, resolveLayout } from './layout/index.cjs';
 export { InteractionProvider, InteractionProviderProps, OVERLAY_CANCEL_PAYLOAD, OverlayConfig, OverlayEntry, OverlayHost, OverlayHostProps, OverlayListener, OverlayManager, ResolvePageFn, UiBridge, UiMessage, UiModal, createUiBridge, registerInteractionActions } from './interaction/index.cjs';
 import '@pactor-app/runtime';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Accordion, AccordionItemData, AccordionProps, Alert, AlertDialog, AlertDialogProps, AlertProps, AlertVariant, AspectRatio, AspectRatioProps, Avatar, AvatarProps, Badge, BadgeProps, BadgeVariant, Breadcrumb, BreadcrumbItemData, BreadcrumbProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, ButtonVariant, Calendar, CalendarProps, Card, CardProps, Carousel, CarouselImage, CarouselItemData, CarouselProps, Chart, ChartProps, ChartType, ChatInput, ChatInputProps, Checkbox, CheckboxProps, Collapsible, CollapsibleProps, Combobox, ComboboxOption, ComboboxProps, Command, CommandGroupData, CommandItemData, CommandProps, Content, ContentProps, ContextMenu, ContextMenuItemData, ContextMenuProps, DataTable, DataTableColumn, DataTablePagination, DataTableProps, DataTableSort, DataTableSortOrder, DatePicker, DatePickerPreset, DatePickerPresetKey, DatePickerProps, DatePickerRangeProps, DatePickerSingleProps, DateRangeValue, Dialog, DialogProps, Drawer, DrawerPlacement, DrawerProps, DropdownMenu, DropdownMenuItemData, DropdownMenuProps, Empty, EmptyProps, Field, FieldProps, FieldRule, Flex, FlexProps, Footer, FooterProps, Form, FormContextValue, FormProps, Grid, GridProps, Header, HeaderBrandPosition, HeaderDropdown, HeaderDropdownItem, HeaderLocale, HeaderMenuItem, HeaderProps, HeaderUser, HeaderUserItem, HoverCard, HoverCardProps, ICONS, Icon, IconProps, IconSize, Input, InputGroup, InputGroupProps, InputOTP, InputOTPProps, InputProps, Item, ItemProps, Kbd, KbdProps, Label, LabelProps, Layout, LayoutProps, Link, LinkProps, Menu, MenuItem, MenuProps, Menubar, MenubarLeafItem, MenubarMenuData, MenubarProps, NavigationMenu, NavigationMenuChildItem, NavigationMenuItemData, NavigationMenuProps, Page, PageProps, Pagination, PaginationProps, Popover, PopoverProps, Progress, ProgressProps, RadioGroup, RadioGroupOption, RadioGroupProps, RailTooltip, Resizable, ResizablePanelData, ResizableProps, ScrollArea, ScrollAreaProps, Select, SelectOption, SelectProps, Separator, SeparatorProps, Sheet, SheetProps, SheetSide, Sidebar, SidebarBrand, SidebarNavItem, SidebarProps, Sider, SiderProps, Skeleton, SkeletonProps, SkeletonShape, Slider, SliderProps, Sonner, SonnerProps, Spinner, SpinnerProps, SpinnerSize, Statistic, StatisticProps, Switch, SwitchProps, TabItem, Table, TableColumn, TablePagination, TablePaginationInfo, TableProps, Tabs, TabsProps, Text, TextProps, TextType, Textarea, TextareaProps, Toggle, ToggleGroup, ToggleGroupOption, ToggleGroupProps, ToggleProps, Tooltip, TooltipProps, Typography, TypographyProps, TypographyVariant, builtinComponents, createComponentRegistry, normalizeIconName, registerBuiltinComponents, useFormContext, useSidebarDrawer } from './components/index.js';
+export { Accordion, AccordionItemData, AccordionProps, Alert, AlertDialog, AlertDialogProps, AlertProps, AlertVariant, AspectRatio, AspectRatioProps, Avatar, AvatarProps, Badge, BadgeProps, BadgeVariant, Breadcrumb, BreadcrumbItemData, BreadcrumbProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, ButtonVariant, Calendar, CalendarProps, Card, CardProps, Carousel, CarouselImage, CarouselItemData, CarouselProps, Chart, ChartProps, ChartType, ChatInput, ChatInputProps, Checkbox, CheckboxProps, Collapsible, CollapsibleProps, Combobox, ComboboxOption, ComboboxProps, Command, CommandGroupData, CommandItemData, CommandProps, Content, ContentProps, ContextMenu, ContextMenuItemData, ContextMenuProps, DataTable, DataTableColumn, DataTablePagination, DataTableProps, DataTableSort, DataTableSortOrder, DatePicker, DatePickerPreset, DatePickerPresetKey, DatePickerProps, DatePickerRangeProps, DatePickerSingleProps, DateRangeValue, Dialog, DialogProps, Drawer, DrawerPlacement, DrawerProps, DropdownMenu, DropdownMenuItemData, DropdownMenuProps, Empty, EmptyProps, Field, FieldProps, FieldRule, Flex, FlexProps, Footer, FooterProps, Form, FormContextValue, FormProps, Grid, GridProps, Header, HeaderBrandPosition, HeaderDropdown, HeaderDropdownItem, HeaderLocale, HeaderMenuItem, HeaderProps, HeaderTheme, HeaderUser, HeaderUserItem, HoverCard, HoverCardProps, ICONS, Icon, IconProps, IconSize, Input, InputGroup, InputGroupProps, InputOTP, InputOTPProps, InputProps, Item, ItemProps, Kbd, KbdProps, Label, LabelProps, Layout, LayoutProps, Link, LinkProps, Menu, MenuItem, MenuProps, Menubar, MenubarLeafItem, MenubarMenuData, MenubarProps, NavigationMenu, NavigationMenuChildItem, NavigationMenuItemData, NavigationMenuProps, Page, PageProps, Pagination, PaginationProps, Popover, PopoverProps, Progress, ProgressProps, RadioGroup, RadioGroupOption, RadioGroupProps, RailTooltip, Resizable, ResizablePanelData, ResizableProps, ScrollArea, ScrollAreaProps, Select, SelectOption, SelectProps, Separator, SeparatorProps, Sheet, SheetProps, SheetSide, Sidebar, SidebarBrand, SidebarNavItem, SidebarProps, Sider, SiderProps, Skeleton, SkeletonProps, SkeletonShape, Slider, SliderProps, Sonner, SonnerProps, Spinner, SpinnerProps, SpinnerSize, Statistic, StatisticProps, Switch, SwitchProps, TabItem, Table, TableColumn, TablePagination, TablePaginationInfo, TableProps, Tabs, TabsProps, Text, TextProps, TextType, Textarea, TextareaProps, Toggle, ToggleGroup, ToggleGroupOption, ToggleGroupProps, ToggleProps, Tooltip, TooltipProps, Typography, TypographyProps, TypographyVariant, builtinComponents, createComponentRegistry, normalizeIconName, registerBuiltinComponents, useFormContext, useSidebarDrawer } from './components/index.js';
 export { AdminBrand, AdminLayout, AdminLayoutBreakpoint, AdminLayoutConfig, AdminLayoutMode, AdminLayoutProps, BlankLayout, BlankLayoutProps, ChatLayout, ChatLayoutBrand, ChatLayoutMenuItem, ChatLayoutProps, LandingLayout, LandingLayoutProps, LayoutComponent, LayoutRegistry, LoginBrand, LoginLayout, LoginLayoutProps, collectDefaultOpenKeys, createLayoutRegistry, findMenuChain, registerBuiltinLayouts, resolveLayout } from './layout/index.js';
 export { InteractionProvider, InteractionProviderProps, OVERLAY_CANCEL_PAYLOAD, OverlayConfig, OverlayEntry, OverlayHost, OverlayHostProps, OverlayListener, OverlayManager, ResolvePageFn, UiBridge, UiMessage, UiModal, createUiBridge, registerInteractionActions } from './interaction/index.js';
 import '@pactor-app/runtime';