@pactor-app/ui 1.1.0 → 1.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @pactor-app/ui
 
-[Pactor](https://github.com/426-330/pactor) 的**唯一内置 UI kit**（shadcn 风格）：内含 components / interaction / layout 三层（vendored shadcn/ui 组件源码——Base UI 原语（`@base-ui/react`，shadcn 官方默认原语层）+ cva + tailwind-merge + lucide-react；12 组件 props 契约类型、交互核心 `OverlayManager` / `createUiBridge` / `registerInteractionActions` / `UiBridge`、布局类型与 `resolveLayout` 均为本包自有），并提供 `shadcnUiKit` 预设对象与预建样式表。**这是 @pactor-app/app 的内置默认（也是唯一内置）UI kit**。主入口导出三层全部公开 API 与预设，另提供子路径入口：`@pactor-app/ui/components`（DSL 组件适配层）/ `/interaction` / `/layout` / `/ui`（vendored shadcn 原语组件——宿主自写 React UI 用，如槽位内容与自定义组件）。
+[Pactor](https://github.com/426-330/pactor) 的**内置默认 UI 实现**（shadcn 风格）：内含 components / interaction / layout 三层（vendored shadcn/ui 组件源码——Base UI 原语（`@base-ui/react`，shadcn 官方默认原语层）+ cva + tailwind-merge + lucide-react；12 组件 props 契约类型、交互核心 `OverlayManager` / `createUiBridge` / `registerInteractionActions` / `UiBridge`、布局类型与 `resolveLayout` 均为本包自有），并提供预建样式表。**这是 @pactor-app/app 的内置默认 UI 实现**。主入口导出三层全部公开 API，另提供子路径入口：`@pactor-app/ui/components`（DSL 组件适配层）/ `/interaction` / `/layout` / `/ui`（vendored shadcn 原语组件——宿主自写 React UI 用，如槽位内容与自定义组件）。
 
 ## 安装
 
@@ -26,33 +26,28 @@ createPactorApplication({
 }).mount('#root');
 ```
 
-## 预设对象 shadcnUiKit
+## 自定义覆盖点
 
-显式表达或局部覆盖场景使用 `shadcnUiKit`，一次提供三个槽位：
+业务可用 `createPactorApplication` 的细粒度选项逐槽位覆盖默认实现：
 
-| 槽位 | 值 |
+| 槽位 | 默认值 |
 | --- | --- |
-| `componentRegistry` | `createShadcnComponentRegistry`（components 层） |
-| `layoutRegistry` | `createShadcnLayoutRegistry`（layout 层） |
-| `interactionKit` | `{ Provider: ShadcnInteractionProvider, OverlayHost: ShadcnOverlayHost }`（interaction 层） |
+| `componentRegistry` | `createComponentRegistry`（components 层） |
+| `layoutRegistry` | `createLayoutRegistry`（layout 层） |
+| `interactionKit` | `{ Provider: InteractionProvider, OverlayHost: OverlayHost }`（interaction 层） |
 
-```ts
-import { shadcnUiKit } from '@pactor-app/ui';
-
-createPactorApplication({
-  appId: 'risk-admin',
-  api: { baseURL: '/api/runtime' },
-  ui: shadcnUiKit, // 与不传 ui 的默认行为一致
-});
-```
-
-每个槽位的取值优先级为：**显式细粒度选项 > `ui` 预设 > 内置 shadcn 默认**。例如只覆盖布局层、其余槽位保持 shadcn 预设：
+各槽位独立合并，显式传入的选项优先于内置默认。例如只覆盖布局层、其余槽位保持内置默认：
 
 ```ts
+import { createLayoutRegistry } from '@pactor-app/ui/layout';
+
 createPactorApplication({
   appId: 'risk-admin',
-  ui: shadcnUiKit,
-  layoutRegistry: createMyLayoutRegistry, // 覆盖预设的布局槽位
+  layoutRegistry: () => {
+    const registry = createLayoutRegistry();
+    registry.register('my-layout', MyLayout);
+    return registry;
+  },
 });
 ```
 
@@ -70,39 +65,38 @@ import '@pactor-app/ui/styles.css';
 
 ## 独立使用（不经 @pactor-app/app）
 
-以 `createShadcnComponentRegistry()` 创建组件注册表，与 @pactor-app/runtime 直接组合：
+以 `createComponentRegistry()` 创建组件注册表，与 @pactor-app/runtime 直接组合：
 
 ```tsx
 import { createPageRuntime, PageRuntimeView } from '@pactor-app/runtime';
-import { createShadcnComponentRegistry } from '@pactor-app/ui/components';
+import { createComponentRegistry } from '@pactor-app/ui/components';
 import '@pactor-app/ui/styles.css';
 
 const runtime = createPageRuntime(pageDsl, {
-  components: createShadcnComponentRegistry(),
+  components: createComponentRegistry(),
 });
 
 await runtime.initialized;
 <PageRuntimeView runtime={runtime} />;
 ```
 
-布局层（`createShadcnLayoutRegistry` / `registerShadcnLayouts`）与交互层（`ShadcnInteractionProvider` / `ShadcnOverlayHost`）同样可独立组合；交互核心（`OverlayManager` / `createUiBridge` / `registerInteractionActions`）由本包 `@pactor-app/ui/interaction` 导出。
+布局层（`createLayoutRegistry` / `registerBuiltinLayouts`）预注册五种内置布局：admin / blank / login / landing / chat；与交互层（`InteractionProvider` / `OverlayHost`）同样可独立组合。交互核心（`OverlayManager` / `createUiBridge` / `registerInteractionActions`）由本包 `@pactor-app/ui/interaction` 导出。
 
 ## 聚合 re-export
 
-三层的公开 API 与预设均可直接从本包导入：
+三层的公开 API 均可直接从本包导入：
 
 ```ts
 import {
-  createShadcnComponentRegistry,
-  createShadcnLayoutRegistry,
-  ShadcnInteractionProvider,
-  ShadcnOverlayHost,
-  shadcnUiKit,
+  createComponentRegistry,
+  createLayoutRegistry,
+  InteractionProvider,
+  OverlayHost,
   // ...以及三层其余全部导出
 } from '@pactor-app/ui';
 ```
 
-契约类型（props / layout / interaction）与交互核心均为本包自有定义（自 0.x 的 `unify-ui-shadcn` 变更起；旧 `pactor-ui-antd` / `pactor-ui-radix` 包已删除，等价符号的迁移对照见 docs 的 @pactor-app/ui 章节）。
+契约类型（props / layout / interaction）与交互核心均为本包自有定义。
 
 ## 文档
 

package/dist/{chunk-GV5R6TUT.js → chunk-22TEN3ER.js}

@@ -1,6 +1,8 @@
 import {
-  Icon
-} from "./chunk-6JNCDPGS.js";
+  Icon,
+  Menu,
+  Sidebar
+} from "./chunk-HJPHJKVA.js";
 import {
   Accordion,
   AccordionContent,
@@ -13,7 +15,7 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger
-} from "./chunk-GL7IO22L.js";
+} from "./chunk-2LYMCWEJ.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -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();
@@ -304,7 +306,7 @@ function MenuTree({
     }
   );
 }
-function ShadcnAdminLayout({
+function AdminLayout({
   config = {},
   brand,
   registry,
@@ -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,7 +823,7 @@ 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",
@@ -702,8 +831,8 @@ function ShadcnLandingLayout({
             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
 };

package/dist/{chunk-GL7IO22L.js → chunk-2LYMCWEJ.js}

@@ -207,6 +207,66 @@ function PopoverContent({
   ) });
 }
 
+// src/ui/tooltip.tsx
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function TooltipProvider({
+  delay = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delay,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(TooltipProvider, { children: /* @__PURE__ */ jsx4(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
+    TooltipPrimitive.Positioner,
+    {
+      align,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxs2(
+        TooltipPrimitive.Popup,
+        {
+          "data-slot": "tooltip-content",
+          className: cn(
+            "z-50 w-fit origin-(--transform-origin) rounded-md bg-primary px-3 py-1.5 text-xs text-balance text-primary-foreground duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            /* @__PURE__ */ jsx4(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 rotate-45 rounded-[2px] bg-primary fill-primary data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1" })
+          ]
+        }
+      )
+    }
+  ) });
+}
+
 export {
   Accordion,
   AccordionItem,
@@ -221,5 +281,9 @@ export {
   CardFooter,
   Popover,
   PopoverTrigger,
-  PopoverContent
+  PopoverContent,
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent
 };