@pactor-app/ui 1.1.0 → 1.3.0

package/dist/{chunk-GV5R6TUT.js → chunk-TDVG7MZ5.js}

@@ -1,6 +1,8 @@
 import {
-  Icon
-} from "./chunk-6JNCDPGS.js";
+  Icon,
+  Menu,
+  Sidebar
+} from "./chunk-EVGIS2ZE.js";
 import {
   Accordion,
   AccordionContent,
@@ -13,10 +15,10 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger
-} from "./chunk-GL7IO22L.js";
+} from "./chunk-L4Z7MNYY.js";
 import {
   cn
-} from "./chunk-RQHJBTEU.js";
+} from "./chunk-WKJUCGV4.js";
 
 // src/layout/admin/menu-chain.ts
 function findMenuChain(registry, menuId) {
@@ -62,7 +64,7 @@ function collectDefaultOpenKeys(registry, activeMenuId) {
   return keys;
 }
 
-// src/layout/admin/ShadcnAdminLayout.tsx
+// src/layout/admin/AdminLayout.tsx
 import { filterMenusByPermission } from "@pactor-app/permission";
 import {
   resolveRoute
@@ -103,7 +105,7 @@ function useBreakpointBelow(breakpoint) {
   return breakpoint !== void 0 && matches;
 }
 
-// src/layout/admin/ShadcnAdminLayout.tsx
+// src/layout/admin/AdminLayout.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function buildVisibleMenuTree(registry, permissionChecker) {
   const tree = registry.tree();
@@ -119,7 +121,7 @@ function navigateMenuItem(menu, bridge) {
   }
   bridge.push(menu.path);
 }
-var menuItemClass = "flex w-full cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-left text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50";
+var menuItemClass = "flex w-full cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-left text-sm text-muted-foreground transition-colors hover:bg-(--menu-hover-background) hover:text-(--menu-hover-foreground) disabled:pointer-events-none disabled:opacity-50";
 function CollapsedGroupFlyout({
   menu,
   registry,
@@ -225,7 +227,7 @@ function MenuTree({
           className: cn(
             menuItemClass,
             "mx-auto size-10 justify-center px-0 font-semibold",
-            menu.id === activeMenuId && "bg-accent font-semibold text-accent-foreground"
+            menu.id === activeMenuId && "bg-(--menu-active-background) font-semibold text-(--menu-active-foreground)"
           ),
           disabled: menu.disabled,
           title: menu.title,
@@ -288,7 +290,7 @@ function MenuTree({
             "data-active": menu.id === activeMenuId || void 0,
             className: cn(
               menuItemClass,
-              menu.id === activeMenuId && "bg-accent font-semibold text-accent-foreground"
+              menu.id === activeMenuId && "bg-(--menu-active-background) font-semibold text-(--menu-active-foreground)"
             ),
             disabled: menu.disabled,
             title: menu.title,
@@ -304,7 +306,7 @@ function MenuTree({
     }
   );
 }
-function ShadcnAdminLayout({
+function AdminLayout({
   config = {},
   brand,
   registry,
@@ -394,7 +396,7 @@ function ShadcnAdminLayout({
     {
       "data-slot": "admin-header",
       className: cn(
-        "flex h-14 items-center gap-4 border-b border-border bg-background px-6",
+        "flex h-14 items-center gap-4 border-b border-border bg-card px-6",
         fixedHeader && "sticky top-0 z-20"
       ),
       children: [
@@ -421,7 +423,7 @@ function ShadcnAdminLayout({
           className: cn(
             menuItemClass,
             "size-10 justify-center px-0 font-semibold",
-            (menu.id === secondaryTopId || menu.id === activeTopId) && "bg-accent text-accent-foreground"
+            (menu.id === secondaryTopId || menu.id === activeTopId) && "bg-(--menu-active-background) text-(--menu-active-foreground)"
           ),
           disabled: menu.disabled,
           title: menu.title,
@@ -445,7 +447,7 @@ function ShadcnAdminLayout({
       "data-slot": "admin-sidebar",
       "data-collapsed": effectiveCollapsed || void 0,
       className: cn(
-        "shrink-0 overflow-auto border-r border-border bg-background py-2",
+        "shrink-0 overflow-auto border-r border-border bg-sidebar py-2",
         effectiveCollapsed ? "w-16 px-1.5" : "w-52",
         fixedSider && (mode === "side-full" ? "sticky top-0 h-screen" : "sticky top-14 h-[calc(100vh-3.5rem)]")
       ),
@@ -492,7 +494,7 @@ function ShadcnAdminLayout({
             "data-slot": "admin-collapse-trigger",
             "aria-label": effectiveCollapsed ? t("pactor.layout.expandSidebar") : t("pactor.layout.collapseSidebar"),
             "aria-expanded": !effectiveCollapsed,
-            className: "sticky bottom-0 flex w-full cursor-pointer items-center justify-center border-t border-border bg-background py-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+            className: "sticky bottom-0 flex w-full cursor-pointer items-center justify-center border-t border-border bg-sidebar py-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
             onClick: () => setCollapsed((value) => !value),
             children: effectiveCollapsed ? "\xBB" : "\xAB"
           }
@@ -506,7 +508,7 @@ function ShadcnAdminLayout({
       {
         "data-slot": "admin-tabs",
         role: "tablist",
-        className: "flex items-center gap-1 border-b border-border bg-background px-4 pt-2",
+        className: "flex items-center gap-1 border-b border-border bg-card px-4 pt-2",
         children: tabs.map((tab, index) => /* @__PURE__ */ jsxs(
           "div",
           {
@@ -515,7 +517,7 @@ function ShadcnAdminLayout({
             role: "presentation",
             className: cn(
               "inline-flex items-center gap-1 rounded-t-md border border-b-0 border-border px-3 py-1.5 text-sm",
-              tab.key === currentPath ? "bg-background font-medium text-foreground" : "bg-muted text-muted-foreground"
+              tab.key === currentPath ? "bg-card font-medium text-foreground" : "bg-muted text-muted-foreground"
             ),
             children: [
               /* @__PURE__ */ jsx(
@@ -611,9 +613,9 @@ function ShadcnAdminLayout({
   );
 }
 
-// src/layout/basic/ShadcnBlankLayout.tsx
+// src/layout/basic/BlankLayout.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-function ShadcnBlankLayout({ children }) {
+function BlankLayout({ children }) {
   return /* @__PURE__ */ jsx2(
     "div",
     {
@@ -624,17 +626,144 @@ function ShadcnBlankLayout({ children }) {
   );
 }
 
-// src/layout/basic/ShadcnLoginLayout.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function ShadcnLoginLayout({
+// src/layout/chat/ChatLayout.tsx
+import { filterMenusByPermission as filterMenusByPermission2 } from "@pactor-app/permission";
+import { useEffect as useEffect3, useMemo as useMemo2, useState as useState3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ChatLayout({
+  brand,
+  menu,
+  registry,
+  bridge,
+  route: routeProp,
+  permissionChecker,
+  activeMenuKey,
+  onMenuSelect,
+  collapsible,
+  sidebar,
+  sidebarFooter,
+  children
+}) {
+  const registryMenus = useMemo2(() => {
+    if (menu !== void 0 || registry === void 0) {
+      return [];
+    }
+    const tree = registry.tree();
+    const visible = permissionChecker !== void 0 ? filterMenusByPermission2(tree, permissionChecker) : tree;
+    return visible.flatMap((item) => menuItemToMenuData(item));
+  }, [menu, registry, permissionChecker]);
+  const menuItems = menu ?? registryMenus;
+  const [bridgePath, setBridgePath] = useState3(
+    () => bridge?.getLocation().pathname ?? "/"
+  );
+  useEffect3(() => {
+    if (bridge === void 0) {
+      return;
+    }
+    return bridge.subscribe((location) => {
+      setBridgePath(location.pathname);
+    });
+  }, [bridge]);
+  const activeKey = useMemo2(() => {
+    if (activeMenuKey !== void 0) {
+      return activeMenuKey;
+    }
+    const path = routeProp?.path ?? bridgePath;
+    return menuItems.find((item) => item.path === path)?.key;
+  }, [activeMenuKey, routeProp, bridgePath, menuItems]);
+  const handleSelect = (key) => {
+    const item = menuItems.find((m) => m.key === key);
+    if (item === void 0 || item.disabled === true) {
+      return;
+    }
+    if (onMenuSelect !== void 0) {
+      onMenuSelect(key, item);
+      return;
+    }
+    if (bridge !== void 0 && item.path !== void 0) {
+      bridge.push(item.path);
+    }
+  };
+  const sidebarContent = sidebar !== void 0 && sidebar !== null ? sidebar : menuItems.length > 0 ? /* @__PURE__ */ jsx3(
+    Menu,
+    {
+      items: menuItems.map((item) => chatMenuItemToUiMenuItem(item)),
+      selectedKey: activeKey,
+      onSelect: handleSelect
+    }
+  ) : void 0;
+  return /* @__PURE__ */ jsx3(
+    Sidebar,
+    {
+      brand,
+      content: sidebarContent,
+      sidebarFooter,
+      collapsible,
+      locationKey: routeProp?.path ?? bridgePath,
+      children: /* @__PURE__ */ jsx3(
+        "div",
+        {
+          "data-slot": "chat-layout-content",
+          className: "flex min-h-0 flex-1 flex-col",
+          children
+        }
+      )
+    }
+  );
+}
+function chatMenuItemToUiMenuItem(item) {
+  return {
+    key: item.key,
+    label: item.label,
+    icon: item.icon,
+    badge: item.badge,
+    dot: item.dot,
+    group: item.group,
+    disabled: item.disabled
+  };
+}
+function menuItemToMenuData(item) {
+  if (item.type === "group") {
+    const children = (item.children ?? []).flatMap(
+      (child) => menuItemToMenuData(child)
+    );
+    if (children.length === 0) {
+      return [];
+    }
+    return children.map((child, index) => ({
+      ...child,
+      group: index === 0 ? item.title : void 0
+    }));
+  }
+  if (item.hidden === true) {
+    return [];
+  }
+  const ext = item;
+  return [
+    {
+      key: item.id,
+      label: item.title,
+      icon: item.icon,
+      path: item.path,
+      badge: item.badge,
+      dot: ext.dot,
+      group: ext.group,
+      disabled: item.disabled
+    }
+  ];
+}
+
+// src/layout/basic/LoginLayout.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function LoginLayout({
   variant = "center",
   brand,
   children
 }) {
   const brandBlock = /* @__PURE__ */ jsxs2("div", { "data-slot": "login-brand", className: "flex flex-col items-center gap-2", children: [
     brand.logo,
-    /* @__PURE__ */ jsx3("h1", { className: "text-xl font-semibold", children: brand.title }),
-    brand.description !== void 0 && /* @__PURE__ */ jsx3("div", { className: "text-sm text-muted-foreground", children: brand.description })
+    /* @__PURE__ */ jsx4("h1", { className: "text-xl font-semibold", children: brand.title }),
+    brand.description !== void 0 && /* @__PURE__ */ jsx4("div", { className: "text-sm text-muted-foreground", children: brand.description })
   ] });
   if (variant === "split") {
     return /* @__PURE__ */ jsxs2(
@@ -644,7 +773,7 @@ function ShadcnLoginLayout({
         "data-variant": "split",
         className: "grid min-h-screen grid-cols-2 bg-background text-foreground",
         children: [
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "div",
             {
               "data-slot": "login-brand-panel",
@@ -652,7 +781,7 @@ function ShadcnLoginLayout({
               children: brandBlock
             }
           ),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "div",
             {
               "data-slot": "login-form-panel",
@@ -664,7 +793,7 @@ function ShadcnLoginLayout({
       }
     );
   }
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "login-layout",
@@ -672,18 +801,18 @@ function ShadcnLoginLayout({
       className: "flex min-h-screen items-center justify-center bg-muted/40 text-foreground",
       children: /* @__PURE__ */ jsxs2(Card, { "data-slot": "login-card", className: "w-full max-w-sm gap-4 py-6", children: [
         /* @__PURE__ */ jsxs2(CardHeader, { className: "px-6", children: [
-          /* @__PURE__ */ jsx3(CardTitle, { className: "sr-only", children: brand.title }),
+          /* @__PURE__ */ jsx4(CardTitle, { className: "sr-only", children: brand.title }),
           brandBlock
         ] }),
-        /* @__PURE__ */ jsx3(CardContent, { className: "flex flex-col gap-4 px-6", children })
+        /* @__PURE__ */ jsx4(CardContent, { className: "flex flex-col gap-4 px-6", children })
       ] })
     }
   );
 }
 
-// src/layout/basic/ShadcnLandingLayout.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function ShadcnLandingLayout({
+// src/layout/basic/LandingLayout.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function LandingLayout({
   navbar,
   footer,
   children
@@ -694,16 +823,16 @@ function ShadcnLandingLayout({
       "data-slot": "landing-layout",
       className: "flex min-h-screen flex-col bg-background text-foreground",
       children: [
-        navbar !== void 0 && /* @__PURE__ */ jsx4(
+        navbar !== void 0 && /* @__PURE__ */ jsx5(
           "header",
           {
             "data-slot": "landing-navbar",
-            className: "border-b border-border bg-background",
+            className: "border-b border-border bg-card",
             children: navbar
           }
         ),
-        /* @__PURE__ */ jsx4("main", { "data-slot": "landing-content", className: "flex-1", children }),
-        footer !== void 0 && /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5("main", { "data-slot": "landing-content", className: "flex-1", children }),
+        footer !== void 0 && /* @__PURE__ */ jsx5(
           "footer",
           {
             "data-slot": "landing-footer",
@@ -718,15 +847,16 @@ function ShadcnLandingLayout({
 
 // src/layout/registry.ts
 import { Registry } from "@pactor-app/core";
-function registerShadcnLayouts(registry) {
-  registry.register("admin", ShadcnAdminLayout);
-  registry.register("blank", ShadcnBlankLayout);
-  registry.register("login", ShadcnLoginLayout);
-  registry.register("landing", ShadcnLandingLayout);
+function registerBuiltinLayouts(registry) {
+  registry.register("admin", AdminLayout);
+  registry.register("blank", BlankLayout);
+  registry.register("login", LoginLayout);
+  registry.register("landing", LandingLayout);
+  registry.register("chat", ChatLayout);
 }
-function createShadcnLayoutRegistry() {
+function createLayoutRegistry() {
   const registry = new Registry("LayoutRegistry");
-  registerShadcnLayouts(registry);
+  registerBuiltinLayouts(registry);
   return registry;
 }
 function resolveLayout(registry, type) {
@@ -735,7 +865,7 @@ function resolveLayout(registry, type) {
     console.warn(
       `[pactor-layout] unknown layout type "${type}", fallback to BlankLayout`
     );
-    return ShadcnBlankLayout;
+    return BlankLayout;
   }
   return component;
 }
@@ -743,11 +873,12 @@ function resolveLayout(registry, type) {
 export {
   findMenuChain,
   collectDefaultOpenKeys,
-  ShadcnAdminLayout,
-  ShadcnBlankLayout,
-  ShadcnLoginLayout,
-  ShadcnLandingLayout,
-  registerShadcnLayouts,
-  createShadcnLayoutRegistry,
+  AdminLayout,
+  BlankLayout,
+  ChatLayout,
+  LoginLayout,
+  LandingLayout,
+  registerBuiltinLayouts,
+  createLayoutRegistry,
   resolveLayout
 };