@pactor-app/ui 1.1.0 → 1.2.0

package/dist/chunk-HJPHJKVA.js

@@ -0,0 +1,671 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from "./chunk-2LYMCWEJ.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/components/components/Icon/index.tsx
+import {
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  Bell,
+  Bookmark,
+  Brain,
+  Briefcase,
+  Building2,
+  Calendar,
+  Camera,
+  ChartColumn,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsUpDown,
+  ChevronUp,
+  CircleAlert,
+  CircleCheck,
+  CircleQuestionMark,
+  CircleX,
+  Clock,
+  Cloud,
+  Code,
+  Copy,
+  CreditCard,
+  Database,
+  Download,
+  Ellipsis,
+  EllipsisVertical,
+  ExternalLink,
+  Eye,
+  File,
+  FileText,
+  Flag,
+  Folder,
+  Funnel,
+  Globe,
+  Heart,
+  History,
+  House,
+  Image,
+  Info,
+  Key,
+  Languages,
+  LayoutGrid,
+  Link,
+  List,
+  ListFilter,
+  LoaderCircle,
+  Lock,
+  LockOpen,
+  LogIn,
+  LogOut,
+  Mail,
+  MapPin,
+  Menu,
+  MessageCircle,
+  MessageSquare,
+  Minus,
+  Moon,
+  Package,
+  PanelLeft,
+  PanelRightOpen,
+  Paperclip,
+  Pencil,
+  Phone,
+  Plus,
+  Quote,
+  RefreshCcw,
+  RotateCcw,
+  Save,
+  Search,
+  Send,
+  Settings,
+  Share2,
+  Shield,
+  ShoppingCart,
+  Square,
+  SquarePen,
+  Star,
+  Sun,
+  Table,
+  Tag,
+  Terminal,
+  ThumbsDown,
+  ThumbsUp,
+  Trash2,
+  TriangleAlert,
+  Upload,
+  User,
+  Users,
+  X,
+  Zap
+} from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+var ICONS = {
+  "arrow-left": ArrowLeft,
+  "arrow-right": ArrowRight,
+  "arrow-up": ArrowUp,
+  "arrow-down": ArrowDown,
+  "chevron-left": ChevronLeft,
+  "chevron-right": ChevronRight,
+  "chevron-up": ChevronUp,
+  "chevron-down": ChevronDown,
+  check: Check,
+  x: X,
+  plus: Plus,
+  minus: Minus,
+  search: Search,
+  settings: Settings,
+  user: User,
+  users: Users,
+  home: House,
+  menu: Menu,
+  bell: Bell,
+  calendar: Calendar,
+  clock: Clock,
+  download: Download,
+  upload: Upload,
+  pencil: Pencil,
+  edit: SquarePen,
+  trash: Trash2,
+  eye: Eye,
+  info: Info,
+  warning: TriangleAlert,
+  error: CircleAlert,
+  "check-circle": CircleCheck,
+  "x-circle": CircleX,
+  "help-circle": CircleQuestionMark,
+  loading: LoaderCircle,
+  spinner: LoaderCircle,
+  star: Star,
+  heart: Heart,
+  bookmark: Bookmark,
+  share: Share2,
+  copy: Copy,
+  "external-link": ExternalLink,
+  link: Link,
+  mail: Mail,
+  phone: Phone,
+  lock: Lock,
+  unlock: LockOpen,
+  "log-in": LogIn,
+  "log-out": LogOut,
+  sun: Sun,
+  moon: Moon,
+  globe: Globe,
+  filter: Funnel,
+  "list-filter": ListFilter,
+  "more-horizontal": Ellipsis,
+  "more-vertical": EllipsisVertical,
+  refresh: RefreshCcw,
+  save: Save,
+  file: File,
+  folder: Folder,
+  image: Image,
+  camera: Camera,
+  chart: ChartColumn,
+  table: Table,
+  list: List,
+  grid: LayoutGrid,
+  tag: Tag,
+  "shopping-cart": ShoppingCart,
+  "credit-card": CreditCard,
+  package: Package,
+  "map-pin": MapPin,
+  building: Building2,
+  briefcase: Briefcase,
+  send: Send,
+  message: MessageCircle,
+  "message-square": MessageSquare,
+  paperclip: Paperclip,
+  "thumbs-up": ThumbsUp,
+  "thumbs-down": ThumbsDown,
+  zap: Zap,
+  flag: Flag,
+  key: Key,
+  shield: Shield,
+  terminal: Terminal,
+  code: Code,
+  database: Database,
+  cloud: Cloud,
+  languages: Languages,
+  // @pactor-app/chat 收敛（spec: chat-icon-convergence）：chat 既有图标与
+  // 契约图标名（menu.icon / messageActions[].icon 的既有取值）直通
+  "chevrons-up-down": ChevronsUpDown,
+  "file-text": FileText,
+  "panel-left": PanelLeft,
+  "panel-right-open": PanelRightOpen,
+  square: Square,
+  history: History,
+  "rotate-ccw": RotateCcw,
+  quote: Quote,
+  chat: MessageSquare,
+  brain: Brain
+};
+function normalizeIconName(name) {
+  return name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[_\s]+/g, "-").toLowerCase();
+}
+var sizePx = {
+  sm: 16,
+  default: 20,
+  lg: 24
+};
+function Icon({
+  name,
+  size = "default",
+  color,
+  strokeWidth,
+  className,
+  style
+}) {
+  const key = name ? normalizeIconName(name) : "";
+  const Lucide = ICONS[key];
+  const px = typeof size === "number" ? size : sizePx[size];
+  if (!Lucide) {
+    return /* @__PURE__ */ jsx(
+      CircleQuestionMark,
+      {
+        "data-slot": "icon",
+        "data-unknown": name,
+        size: px,
+        color,
+        strokeWidth,
+        className: cn("shrink-0 text-muted-foreground", className),
+        style,
+        "aria-hidden": "true"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Lucide,
+    {
+      "data-slot": "icon",
+      size: px,
+      color,
+      strokeWidth,
+      className: cn("shrink-0", className),
+      style,
+      "aria-hidden": "true"
+    }
+  );
+}
+
+// src/components/components/Sidebar/rail-tooltip.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function RailTooltip({
+  label,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx2(TooltipTrigger, { render: children }),
+    /* @__PURE__ */ jsx2(TooltipContent, { side: "right", sideOffset: 8, children: label })
+  ] });
+}
+
+// src/components/components/Sidebar/index.tsx
+import { useI18n, useRenderer } from "@pactor-app/runtime";
+import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState
+} from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SidebarDrawerContext = createContext(null);
+function useSidebarDrawer() {
+  return useContext(SidebarDrawerContext);
+}
+var MOBILE_MEDIA_QUERY = "(max-width: 767px)";
+function useIsMobileViewport() {
+  const [isMobile, setIsMobile] = useState(
+    () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(MOBILE_MEDIA_QUERY).matches
+  );
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function") {
+      return;
+    }
+    const media = window.matchMedia(MOBILE_MEDIA_QUERY);
+    const onChange = (event) => {
+      setIsMobile(event.matches);
+    };
+    setIsMobile(media.matches);
+    media.addEventListener("change", onChange);
+    return () => media.removeEventListener("change", onChange);
+  }, []);
+  return isMobile;
+}
+function useOptionalRenderer() {
+  try {
+    return useRenderer();
+  } catch {
+    return null;
+  }
+}
+function SidebarContent({ content }) {
+  const renderer = useOptionalRenderer();
+  if (renderer !== null && typeof content === "object" && content !== null && !("$$typeof" in content) && "type" in content) {
+    return /* @__PURE__ */ jsx3(Fragment, { children: renderer.renderChildren([content]) });
+  }
+  return /* @__PURE__ */ jsx3(Fragment, { children: content });
+}
+function isBrandObject(brand) {
+  return typeof brand === "object" && brand !== null && !("$$typeof" in brand) && "title" in brand;
+}
+function Sidebar({
+  brand,
+  items = [],
+  content,
+  sidebarFooter,
+  collapsible,
+  onCollapse,
+  locationKey,
+  drawer = true,
+  className,
+  style,
+  children
+}) {
+  const { t } = useI18n();
+  const isMobile = useIsMobileViewport();
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
+  const collapsedEffective = collapsible === true && collapsed && !isMobile;
+  const close = useCallback(() => setDrawerOpen(false), []);
+  const toggleCollapsed = () => {
+    const next = !collapsed;
+    setCollapsed(next);
+    onCollapse?.(next);
+  };
+  const [trackedLocationKey, setTrackedLocationKey] = useState(locationKey);
+  if (trackedLocationKey !== locationKey) {
+    setTrackedLocationKey(locationKey);
+    setDrawerOpen(false);
+  }
+  useEffect(() => {
+    if (!drawerOpen) {
+      return;
+    }
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setDrawerOpen(false);
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [drawerOpen]);
+  const brandNode = isBrandObject(brand) ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+    brand.logo ? /* @__PURE__ */ jsx3(
+      "img",
+      {
+        "data-slot": "sidebar-brand-logo",
+        src: brand.logo,
+        alt: brand.title,
+        className: "size-6 shrink-0"
+      }
+    ) : null,
+    collapsedEffective ? null : /* @__PURE__ */ jsx3("span", { className: "truncate text-sm font-semibold", children: brand.title })
+  ] }) : brand;
+  const collapseTrigger = collapsible && !isMobile ? /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      "data-slot": "sidebar-collapse-trigger",
+      "aria-label": collapsedEffective ? t("pactor.layout.expandSidebar") : t("pactor.layout.collapseSidebar"),
+      "aria-expanded": !collapsedEffective,
+      title: collapsedEffective ? t("pactor.layout.expandSidebar") : t("pactor.layout.collapseSidebar"),
+      className: cn(
+        "cursor-pointer flex size-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/60 transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground"
+      ),
+      onClick: toggleCollapsed,
+      children: collapsedEffective ? /* @__PURE__ */ jsx3(ChevronRight2, { "aria-hidden": true, className: "size-4" }) : /* @__PURE__ */ jsx3(ChevronLeft2, { "aria-hidden": true, className: "size-4" })
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx3(
+    SidebarDrawerContext.Provider,
+    {
+      value: { close, collapsed: collapsedEffective },
+      children: /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          "data-slot": "sidebar-layout",
+          className: cn("flex min-h-screen w-full", className),
+          style,
+          children: [
+            drawer && drawerOpen ? /* @__PURE__ */ jsx3(
+              "div",
+              {
+                "data-slot": "sidebar-scrim",
+                "aria-hidden": true,
+                className: "fixed inset-0 z-40 bg-black/40 md:hidden",
+                onClick: close
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs2(
+              "aside",
+              {
+                "data-slot": "sidebar",
+                "data-collapsed": collapsedEffective || void 0,
+                "data-open": drawerOpen ? "true" : "false",
+                inert: drawer && isMobile && !drawerOpen ? true : void 0,
+                className: cn(
+                  "flex shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width,transform]",
+                  collapsedEffective ? "w-16" : "w-60",
+                  // 移动端覆盖抽屉：退出文档流，关闭时移出屏幕
+                  drawer && "max-md:fixed max-md:inset-y-0 max-md:left-0 max-md:z-50 max-md:w-60 max-md:-translate-x-full max-md:data-[open=true]:translate-x-0"
+                ),
+                children: [
+                  brand !== void 0 || collapseTrigger !== null ? /* @__PURE__ */ jsxs2(
+                    "div",
+                    {
+                      "data-slot": "sidebar-brand",
+                      className: cn(
+                        "flex h-14 shrink-0 items-center gap-2 border-b border-sidebar-border px-4",
+                        // 移动端品牌维持顶栏现状：抽屉内不重复渲染品牌行
+                        "max-md:hidden",
+                        collapsedEffective && "justify-center px-2"
+                      ),
+                      children: [
+                        collapsedEffective ? null : /* @__PURE__ */ jsx3("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: brandNode }),
+                        collapseTrigger
+                      ]
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx3(
+                    "nav",
+                    {
+                      "data-slot": "sidebar-nav",
+                      className: "min-h-0 flex-1 overflow-auto p-2",
+                      children: content !== void 0 && content !== null ? /* @__PURE__ */ jsx3(SidebarContent, { content }) : items.map((item, index) => /* @__PURE__ */ jsx3(
+                        SidebarEntry,
+                        {
+                          item,
+                          depth: 0,
+                          collapsed: collapsedEffective
+                        },
+                        item.href ?? item.label ?? index
+                      ))
+                    }
+                  ),
+                  sidebarFooter !== void 0 && sidebarFooter !== null && !collapsedEffective ? /* @__PURE__ */ jsx3(
+                    "div",
+                    {
+                      "data-slot": "sidebar-footer",
+                      className: "shrink-0 border-t border-sidebar-border p-2",
+                      children: sidebarFooter
+                    }
+                  ) : null
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs2(
+              "main",
+              {
+                "data-slot": "sidebar-content",
+                className: "flex min-w-0 flex-1 flex-col",
+                children: [
+                  drawer ? /* @__PURE__ */ jsxs2(
+                    "div",
+                    {
+                      "data-slot": "sidebar-topbar",
+                      className: "flex h-14 items-center gap-2 border-b border-sidebar-border bg-sidebar px-3 md:hidden",
+                      children: [
+                        /* @__PURE__ */ jsx3(
+                          "button",
+                          {
+                            type: "button",
+                            "data-slot": "sidebar-menu-trigger",
+                            "aria-label": t("pactor.layout.openNavigation"),
+                            "aria-expanded": drawerOpen,
+                            className: "flex size-8 items-center justify-center rounded-md text-sidebar-foreground/60 transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground",
+                            onClick: () => setDrawerOpen(true),
+                            children: /* @__PURE__ */ jsx3(Icon, { name: "menu", size: 18 })
+                          }
+                        ),
+                        brandNode
+                      ]
+                    }
+                  ) : null,
+                  children
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function SidebarEntry({
+  item,
+  depth,
+  collapsed
+}) {
+  const entryClass = cn(
+    "flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition-colors",
+    "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+    collapsed && "justify-center px-0"
+  );
+  const indentStyle = !collapsed && depth > 0 ? { paddingLeft: 12 + depth * 16 } : void 0;
+  const labelNode = collapsed ? null : item.label;
+  const iconNode = item.icon ? /* @__PURE__ */ jsx3(Icon, { name: item.icon, size: "sm" }) : null;
+  const entry = item.href ? /* @__PURE__ */ jsxs2(
+    "a",
+    {
+      "data-slot": "sidebar-item",
+      href: item.href,
+      className: entryClass,
+      style: indentStyle,
+      children: [
+        iconNode,
+        labelNode
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs2("span", { "data-slot": "sidebar-item", className: entryClass, style: indentStyle, children: [
+    iconNode,
+    labelNode
+  ] });
+  return /* @__PURE__ */ jsxs2("div", { "data-slot": "sidebar-entry", children: [
+    collapsed ? /* @__PURE__ */ jsx3(RailTooltip, { label: item.label, children: entry }) : entry,
+    item.children?.map((child, index) => /* @__PURE__ */ jsx3(
+      SidebarEntry,
+      {
+        item: child,
+        depth: depth + 1,
+        collapsed
+      },
+      child.href ?? child.label ?? index
+    ))
+  ] });
+}
+
+// src/components/components/Menu/index.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function Menu2({
+  items = [],
+  mode = "inline",
+  selectedKey,
+  onSelect,
+  className,
+  style
+}) {
+  const drawer = useSidebarDrawer();
+  const collapsed = mode === "inline" && drawer?.collapsed === true;
+  let previousGroup;
+  return /* @__PURE__ */ jsx4(
+    "nav",
+    {
+      "data-slot": "menu",
+      "data-mode": mode,
+      "data-collapsed": collapsed || void 0,
+      className: cn(
+        mode === "horizontal" ? "flex items-center gap-1" : "flex flex-col gap-0.5 p-2",
+        className
+      ),
+      style,
+      children: items.map((item) => {
+        let groupLabel;
+        if (!collapsed && mode === "inline" && item.group !== void 0 && item.group !== previousGroup) {
+          groupLabel = item.group;
+        }
+        previousGroup = item.group;
+        return /* @__PURE__ */ jsxs3("div", { "data-slot": "menu-group-entry", children: [
+          groupLabel !== void 0 && /* @__PURE__ */ jsx4(
+            "div",
+            {
+              "data-slot": "menu-group",
+              className: "px-3 pb-1 pt-3 text-xs font-medium text-muted-foreground first:pt-1",
+              children: groupLabel
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            MenuEntry,
+            {
+              item,
+              mode,
+              depth: 0,
+              selectedKey,
+              onSelect,
+              collapsed
+            }
+          )
+        ] }, item.key);
+      })
+    }
+  );
+}
+function MenuEntry({
+  item,
+  mode,
+  depth,
+  selectedKey,
+  onSelect,
+  collapsed = false
+}) {
+  const selected = item.key === selectedKey;
+  const button = /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      type: "button",
+      "data-slot": "menu-item",
+      "aria-current": selected ? "page" : void 0,
+      disabled: item.disabled,
+      className: cn(
+        "flex w-full items-center gap-2 rounded-md text-sm transition-colors",
+        mode === "horizontal" ? "px-3 py-2" : "px-3 py-2 text-left",
+        collapsed && "justify-center px-0",
+        selected ? "bg-accent font-medium text-accent-foreground" : "cursor-pointer text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+        item.disabled && "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-muted-foreground"
+      ),
+      style: mode === "inline" && depth > 0 && !collapsed ? { paddingLeft: 12 + depth * 16 } : void 0,
+      onClick: () => {
+        if (!item.disabled) {
+          onSelect?.(item.key);
+        }
+      },
+      children: [
+        item.icon ? /* @__PURE__ */ jsx4(Icon, { name: item.icon, size: "sm" }) : null,
+        collapsed ? null : /* @__PURE__ */ jsx4("span", { className: "min-w-0 flex-1 truncate text-left", children: item.label }),
+        item.dot && !collapsed ? /* @__PURE__ */ jsx4("span", { "data-slot": "menu-item-dot", className: "size-1.5 shrink-0 rounded-full bg-destructive" }) : null,
+        item.badge !== void 0 && !collapsed ? /* @__PURE__ */ jsx4(
+          "span",
+          {
+            "data-slot": "menu-item-badge",
+            className: "shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-xs text-muted-foreground",
+            children: item.badge
+          }
+        ) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs3("div", { "data-slot": "menu-entry", "data-key": item.key, children: [
+    collapsed ? /* @__PURE__ */ jsx4(RailTooltip, { label: item.label, children: button }) : button,
+    item.children?.map((child) => /* @__PURE__ */ jsx4(
+      MenuEntry,
+      {
+        item: child,
+        mode,
+        depth: depth + 1,
+        selectedKey,
+        onSelect,
+        collapsed
+      },
+      child.key
+    ))
+  ] });
+}
+
+export {
+  ICONS,
+  normalizeIconName,
+  Icon,
+  RailTooltip,
+  useSidebarDrawer,
+  Sidebar,
+  Menu2 as Menu
+};

package/dist/{chunk-BZSRLTQQ.js → chunk-L45CSL6I.js}

@@ -196,7 +196,7 @@ var toastTypeClass = {
   info: "border-l-4 border-l-info",
   warning: "border-l-4 border-l-warning"
 };
-function ShadcnInteractionProvider({
+function InteractionProvider({
   bridge,
   children
 }) {
@@ -315,7 +315,7 @@ function toCssWidth(width) {
   }
   return typeof width === "number" ? `${width}px` : width;
 }
-function ShadcnOverlayHost({ manager, resolvePage }) {
+function OverlayHost({ manager, resolvePage }) {
   const renderer = useRenderer();
   const stack = useSyncExternalStore(
     (onChange) => manager.subscribe(onChange),
@@ -474,7 +474,7 @@ function PageOverlayBody({
     if (!resolvePage) {
       setError(
         new Error(
-          `[@pactor-app/ui] page overlay\uFF08pageId: "${entry.page?.pageId}"\uFF09\u9700\u8981 ShadcnOverlayHost \u6CE8\u5165 resolvePage`
+          `[@pactor-app/ui] page overlay\uFF08pageId: "${entry.page?.pageId}"\uFF09\u9700\u8981 OverlayHost \u6CE8\u5165 resolvePage`
         )
       );
       return;
@@ -525,6 +525,6 @@ export {
   OverlayManager,
   createUiBridge,
   registerInteractionActions,
-  ShadcnInteractionProvider,
-  ShadcnOverlayHost
+  InteractionProvider,
+  OverlayHost
 };