@pactor-app/ui 1.2.0 → 1.7.0

package/dist/chunk-ZM3WJZZ7.js

@@ -0,0 +1,727 @@
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRoot,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  useIsMobile,
+  useSidebar
+} from "./chunk-L4Z7MNYY.js";
+import {
+  cn
+} from "./chunk-WKJUCGV4.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 {
+  useEffect,
+  useRef
+} from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function useSidebarDrawer() {
+  try {
+    const ctx = useSidebar();
+    return {
+      close: () => ctx.setOpenMobile(false),
+      collapsed: ctx.state === "collapsed"
+    };
+  } catch {
+    return null;
+  }
+}
+function useOptionalRenderer() {
+  try {
+    return useRenderer();
+  } catch {
+    return null;
+  }
+}
+function SidebarContentSlot({ 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 BrandNode({ brand, collapsed }) {
+  if (brand === void 0 || brand === null) {
+    return null;
+  }
+  if (isBrandObject(brand)) {
+    return /* @__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,
+      collapsed ? null : /* @__PURE__ */ jsx3("span", { className: "truncate text-sm font-semibold", children: brand.title })
+    ] });
+  }
+  return /* @__PURE__ */ jsx3(Fragment, { children: brand });
+}
+function SidebarNavItems({ items }) {
+  return /* @__PURE__ */ jsx3(SidebarMenu, { children: items.map((item, index) => /* @__PURE__ */ jsx3(SidebarNavEntry, { item, depth: 0 }, item.href ?? item.label ?? index)) });
+}
+function SidebarNavEntry({ item, depth }) {
+  const iconNode = item.icon ? /* @__PURE__ */ jsx3(Icon, { name: item.icon, size: "sm" }) : null;
+  const labelNode = item.label;
+  const button = item.href ? /* @__PURE__ */ jsx3(SidebarMenuButton, { asChild: true, tooltip: item.label, children: /* @__PURE__ */ jsxs2("a", { href: item.href, children: [
+    iconNode,
+    /* @__PURE__ */ jsx3("span", { children: labelNode })
+  ] }) }) : /* @__PURE__ */ jsxs2(SidebarMenuButton, { tooltip: item.label, children: [
+    iconNode,
+    /* @__PURE__ */ jsx3("span", { children: labelNode })
+  ] });
+  return /* @__PURE__ */ jsxs2(SidebarMenuItem, { children: [
+    button,
+    item.children && item.children.length > 0 && /* @__PURE__ */ jsx3("div", { className: cn("ml-4"), children: item.children.map((child, index) => /* @__PURE__ */ jsx3(
+      SidebarNavEntry,
+      {
+        item: child,
+        depth: depth + 1
+      },
+      child.href ?? child.label ?? index
+    )) })
+  ] });
+}
+function Sidebar({
+  brand,
+  items = [],
+  content,
+  sidebarFooter,
+  collapsible,
+  onCollapse,
+  locationKey,
+  drawer = true,
+  className,
+  style,
+  children
+}) {
+  return /* @__PURE__ */ jsx3(
+    SidebarProvider,
+    {
+      defaultOpen: true,
+      className,
+      style,
+      children: /* @__PURE__ */ jsx3(
+        SidebarInner,
+        {
+          brand,
+          items,
+          content,
+          sidebarFooter,
+          collapsible,
+          onCollapse,
+          locationKey,
+          drawer,
+          children
+        }
+      )
+    }
+  );
+}
+function SidebarInner({
+  brand,
+  items = [],
+  content,
+  sidebarFooter,
+  collapsible,
+  onCollapse,
+  locationKey,
+  drawer = true,
+  children
+}) {
+  const { t } = useI18n();
+  const isMobile = useIsMobile();
+  const { state, setOpenMobile, toggleSidebar } = useSidebar();
+  const collapsed = state === "collapsed";
+  const prevCollapsed = useRef(collapsed);
+  useEffect(() => {
+    if (prevCollapsed.current !== collapsed) {
+      prevCollapsed.current = collapsed;
+      onCollapse?.(collapsed);
+    }
+  }, [collapsed, onCollapse]);
+  useEffect(() => {
+    if (locationKey !== void 0) {
+      setOpenMobile(false);
+    }
+  }, [locationKey, setOpenMobile]);
+  const collapsedEffective = collapsible === true && collapsed && !isMobile;
+  const brandNode = /* @__PURE__ */ jsx3(BrandNode, { brand, collapsed: collapsedEffective });
+  const sidebarContent = content !== void 0 && content !== null ? /* @__PURE__ */ jsx3(SidebarContentSlot, { content }) : items.length > 0 ? /* @__PURE__ */ jsx3(SidebarNavItems, { items }) : null;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(
+      SidebarRoot,
+      {
+        collapsible: collapsible ? "icon" : "offcanvas",
+        children: [
+          (brand !== void 0 || collapsible) && /* @__PURE__ */ jsx3(SidebarHeader, { children: /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              "data-slot": "sidebar-brand",
+              className: cn(
+                "flex h-14 shrink-0 items-center gap-2 px-2",
+                collapsedEffective && "justify-center px-0"
+              ),
+              children: [
+                collapsedEffective ? null : /* @__PURE__ */ jsx3("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: brandNode }),
+                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,
+                    className: "flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-sidebar-foreground/60 transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground",
+                    onClick: toggleSidebar,
+                    children: /* @__PURE__ */ jsx3(Icon, { name: collapsedEffective ? "chevron-right" : "chevron-left", size: 16 })
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx3(SidebarContent, { children: sidebarContent }),
+          sidebarFooter !== void 0 && sidebarFooter !== null && !collapsedEffective && /* @__PURE__ */ jsx3(SidebarFooter, { children: sidebarFooter })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs2(SidebarInset, { 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"),
+                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: toggleSidebar,
+                children: /* @__PURE__ */ jsx3(Icon, { name: "menu", size: 18 })
+              }
+            ),
+            brandNode
+          ]
+        }
+      ),
+      children
+    ] })
+  ] });
+}
+
+// src/components/components/Menu/index.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function collectAncestors(items, target, into, trail = []) {
+  for (const item of items) {
+    if (item.key === target) {
+      for (const key of trail) into.add(key);
+      return true;
+    }
+    if (item.children?.length && collectAncestors(item.children, target, into, [...trail, item.key])) {
+      return true;
+    }
+  }
+  return false;
+}
+function Menu2({
+  items = [],
+  mode = "inline",
+  selectedKey,
+  collapsible = false,
+  defaultExpandedKeys,
+  onSelect,
+  className,
+  style
+}) {
+  const drawer = useSidebarDrawer();
+  const collapsed = mode === "inline" && drawer?.collapsed === true;
+  const collapsibleOn = collapsible && mode === "inline" && !collapsed;
+  const [expandedKeys, setExpandedKeys] = useState(() => {
+    const initial = new Set(defaultExpandedKeys ?? []);
+    if (selectedKey !== void 0) {
+      collectAncestors(items, selectedKey, initial);
+    }
+    return initial;
+  });
+  const toggleExpanded = (key) => {
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
+  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,
+              collapsible: collapsibleOn,
+              expandedKeys,
+              onToggle: toggleExpanded
+            }
+          )
+        ] }, item.key);
+      })
+    }
+  );
+}
+function MenuEntry({
+  item,
+  mode,
+  depth,
+  selectedKey,
+  onSelect,
+  collapsed = false,
+  collapsible = false,
+  expandedKeys,
+  onToggle
+}) {
+  const selected = item.key === selectedKey;
+  const hasChildren = (item.children?.length ?? 0) > 0;
+  const isDirectory = collapsible && hasChildren;
+  const expanded = isDirectory && expandedKeys?.has(item.key) === true;
+  const railDirectory = collapsed && hasChildren;
+  const [flyoutOpen, setFlyoutOpen] = useState(false);
+  const flyoutTimer = useRef2(void 0);
+  const flyoutOpenNow = () => {
+    window.clearTimeout(flyoutTimer.current);
+    setFlyoutOpen(true);
+  };
+  const flyoutCloseLater = () => {
+    window.clearTimeout(flyoutTimer.current);
+    flyoutTimer.current = window.setTimeout(() => setFlyoutOpen(false), 200);
+  };
+  useEffect2(() => () => window.clearTimeout(flyoutTimer.current), []);
+  const button = /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      type: "button",
+      "data-slot": "menu-item",
+      "aria-current": selected ? "page" : void 0,
+      "aria-expanded": isDirectory ? expanded : railDirectory ? flyoutOpen : 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-(--menu-active-background) font-medium text-(--menu-active-foreground)" : "cursor-pointer text-muted-foreground hover:bg-(--menu-hover-background)/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,
+      onMouseEnter: railDirectory ? flyoutOpenNow : void 0,
+      onMouseLeave: railDirectory ? flyoutCloseLater : void 0,
+      onClick: () => {
+        if (item.disabled) return;
+        if (railDirectory) return;
+        if (isDirectory) {
+          onToggle?.(item.key);
+        } else {
+          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,
+        isDirectory ? /* @__PURE__ */ jsx4(
+          "span",
+          {
+            "data-slot": "menu-item-chevron",
+            className: cn(
+              "shrink-0 transition-transform",
+              expanded && "rotate-180"
+            ),
+            children: /* @__PURE__ */ jsx4(Icon, { name: "chevron-down", size: "sm" })
+          }
+        ) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs3("div", { "data-slot": "menu-entry", "data-key": item.key, children: [
+    railDirectory ? /* @__PURE__ */ jsxs3(Popover, { open: flyoutOpen, onOpenChange: setFlyoutOpen, children: [
+      /* @__PURE__ */ jsx4(PopoverTrigger, { render: button }),
+      /* @__PURE__ */ jsxs3(
+        PopoverContent,
+        {
+          "data-slot": "menu-flyout",
+          side: "right",
+          align: "start",
+          sideOffset: 8,
+          className: "max-h-[70vh] w-48 overflow-auto p-1",
+          initialFocus: false,
+          onMouseEnter: flyoutOpenNow,
+          onMouseLeave: flyoutCloseLater,
+          onClick: (event) => {
+            if (event.target.closest("[data-slot=menu-item]")) {
+              setFlyoutOpen(false);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx4("div", { className: "px-3 pt-2 pb-1 text-xs font-semibold text-muted-foreground", children: item.label }),
+            item.children?.map((child) => /* @__PURE__ */ jsx4(
+              MenuEntry,
+              {
+                item: child,
+                mode: "inline",
+                depth: 0,
+                selectedKey,
+                onSelect
+              },
+              child.key
+            ))
+          ]
+        }
+      )
+    ] }) : collapsed ? /* @__PURE__ */ jsx4(RailTooltip, { label: item.label, children: button }) : button,
+    railDirectory || isDirectory && !expanded ? null : item.children?.map((child) => /* @__PURE__ */ jsx4(
+      MenuEntry,
+      {
+        item: child,
+        mode,
+        depth: depth + 1,
+        selectedKey,
+        onSelect,
+        collapsed,
+        collapsible,
+        expandedKeys,
+        onToggle
+      },
+      child.key
+    ))
+  ] });
+}
+
+export {
+  ICONS,
+  normalizeIconName,
+  Icon,
+  RailTooltip,
+  useSidebarDrawer,
+  Sidebar,
+  Menu2 as Menu
+};