@ai-matrx/design-system 0.86.335 → 0.86.337

package/dist/menu-look.cjs

@@ -35,19 +35,41 @@ __export(menu_look_exports, {
   MENU_LOOK_CLASS: () => MENU_LOOK_CLASS,
   MenuLookCheckboxItem: () => MenuLookCheckboxItem,
   MenuLookContent: () => MenuLookContent,
+  MenuLookContextCheckboxItem: () => MenuLookContextCheckboxItem,
+  MenuLookContextContent: () => MenuLookContextContent,
+  MenuLookContextItem: () => MenuLookContextItem,
+  MenuLookContextLabel: () => MenuLookContextLabel,
+  MenuLookContextRadioGroup: () => MenuLookContextRadioGroup,
+  MenuLookContextRadioItem: () => MenuLookContextRadioItem,
+  MenuLookContextSeparator: () => MenuLookContextSeparator,
+  MenuLookContextSub: () => MenuLookContextSub,
+  MenuLookContextSubContent: () => MenuLookContextSubContent,
+  MenuLookContextSubTrigger: () => MenuLookContextSubTrigger,
   MenuLookIconSlot: () => MenuLookIconSlot,
   MenuLookItem: () => MenuLookItem,
   MenuLookLabel: () => MenuLookLabel,
+  MenuLookPanel: () => MenuLookPanel,
+  MenuLookPanelControlRow: () => MenuLookPanelControlRow,
+  MenuLookPanelDisclosure: () => MenuLookPanelDisclosure,
+  MenuLookPanelHeader: () => MenuLookPanelHeader,
+  MenuLookPanelItem: () => MenuLookPanelItem,
+  MenuLookPanelLabel: () => MenuLookPanelLabel,
+  MenuLookPanelSeparator: () => MenuLookPanelSeparator,
+  MenuLookPopoverContent: () => MenuLookPopoverContent,
+  MenuLookRadioGroup: () => MenuLookRadioGroup,
+  MenuLookRadioItem: () => MenuLookRadioItem,
   MenuLookRowBody: () => MenuLookRowBody,
   MenuLookSearch: () => MenuLookSearch,
   MenuLookSeparator: () => MenuLookSeparator,
+  MenuLookSub: () => MenuLookSub,
   MenuLookSubContent: () => MenuLookSubContent,
   MenuLookSubTrigger: () => MenuLookSubTrigger,
   menuLookItemClass: () => menuLookItemClass
 });
 module.exports = __toCommonJS(menu_look_exports);
-var React6 = __toESM(require("react"), 1);
+var React8 = __toESM(require("react"), 1);
 var DropdownMenuPrimitive2 = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
+var ContextMenuPrimitive2 = __toESM(require("@radix-ui/react-context-menu"), 1);
 
 // src/dropdown-menu.tsx
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
@@ -547,15 +569,244 @@ var DropdownMenuShortcut = ({
 );
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
-// src/menu-look.tsx
+// src/context-menu.tsx
+var ContextMenuPrimitive = __toESM(require("@radix-ui/react-context-menu"), 1);
+var React6 = __toESM(require("react"), 1);
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var SURFACE_CLASS = "z-[10001] min-w-[8rem] max-h-[var(--radix-context-menu-content-available-height)] overflow-y-auto overflow-x-hidden overscroll-contain rounded-md border bg-popover p-1 text-popover-foreground";
+var ITEM_CLASS = "relative flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:text-disabled-foreground";
+var INDICATOR_ITEM_CLASS = "relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:text-disabled-foreground";
+var ContextMenuSubTrigger = React6.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  ContextMenuPrimitive.SubTrigger,
+  {
+    ref,
+    "data-slot": "context-menu-sub-trigger",
+    className: cn(
+      "flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+var ContextMenuSubContent = React6.forwardRef(({ className, container, onFocusOutside, collisionPadding, children, ...props }, ref) => {
+  const portalContainer = usePortalContainer(container);
+  const nested = useNestedSubmenuPlacement(ref, collisionPadding);
+  const keep = useSubmenuSurvivesParentPanelFocus(nested.ref, onFocusOutside);
+  const edges = useMenuScrollEdges(keep.ref);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    ContextMenuPrimitive.SubContent,
+    {
+      ref: edges.ref,
+      onFocusOutside: keep.onFocusOutside,
+      ...nested.padding === void 0 ? {} : { collisionPadding: nested.padding },
+      "data-slot": "context-menu-sub-content",
+      className: cn(SURFACE_CLASS, edges.surfaceClassName, "shadow-lg", MOTION_POPPER, className),
+      ...props,
+      children: nested.wrap(edges.wrap(children))
+    }
+  ) });
+});
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+function OpenStamp({ at }) {
+  React6.useLayoutEffect(() => {
+    at.current = Date.now();
+  }, [at]);
+  return null;
+}
+var ContextMenuContent = React6.forwardRef(({ className, container, children, onCloseAutoFocus, onPointerDownCapture, onPointerUpCapture, ...props }, ref) => {
+  const portalContainer = usePortalContainer(container);
+  const edges = useMenuScrollEdges(ref);
+  const openedAt = React6.useRef(0);
+  const pressedHere = React6.useRef(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    ContextMenuPrimitive.Content,
+    {
+      ref: edges.ref,
+      onPointerDownCapture: (event) => {
+        pressedHere.current = true;
+        onPointerDownCapture?.(event);
+      },
+      onPointerUpCapture: (event) => {
+        if (!pressedHere.current && Date.now() - openedAt.current < 350) event.preventDefault();
+        pressedHere.current = false;
+        onPointerUpCapture?.(event);
+      },
+      "data-slot": "context-menu-content",
+      className: cn(SURFACE_CLASS, edges.surfaceClassName, "shadow-md", MOTION_POPPER, className),
+      ...props,
+      onCloseAutoFocus: keepMovedFocus(onCloseAutoFocus),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(OpenStamp, { at: openedAt }),
+        edges.wrap(children)
+      ]
+    }
+  ) });
+});
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+var ContextMenuItem = React6.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  ContextMenuPrimitive.Item,
+  {
+    ref,
+    "data-slot": "context-menu-item",
+    className: cn(
+      ITEM_CLASS,
+      "gap-2 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+var ContextMenuCheckboxItem = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  ContextMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    "data-slot": "context-menu-checkbox-item",
+    className: cn(INDICATOR_ITEM_CLASS, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadixCheckIcon, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+var ContextMenuRadioItem = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  ContextMenuPrimitive.RadioItem,
+  {
+    ref,
+    "data-slot": "context-menu-radio-item",
+    className: cn(INDICATOR_ITEM_CLASS, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+var ContextMenuLabel = React6.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  ContextMenuPrimitive.Label,
+  {
+    ref,
+    "data-slot": "context-menu-label",
+    className: cn(
+      "type-label px-2 pb-1 pt-2 text-muted-foreground",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+var ContextMenuSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  ContextMenuPrimitive.Separator,
+  {
+    ref,
+    "data-slot": "context-menu-separator",
+    className: cn("-mx-1 my-1 h-px bg-border", className),
+    ...props
+  }
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+var ContextMenuShortcut = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  "span",
+  {
+    "data-slot": "context-menu-shortcut",
+    className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+    ...props
+  }
+);
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+// src/popover.tsx
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
+var React7 = __toESM(require("react"), 1);
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var POPOVER_WIDTH_CLASS = {
+  xs: "w-48",
+  sm: "w-60",
+  md: "w-72",
+  lg: "w-80",
+  xl: "w-[26rem]",
+  "2xl": "w-[34rem]"
+};
+var POPOVER_PADDING_CLASS = {
+  none: "p-0",
+  xs: "p-1",
+  sm: "p-2",
+  md: "p-3",
+  default: "p-4"
+};
+var PopoverContent = React7.forwardRef(
+  ({
+    className,
+    align = "center",
+    sideOffset = 4,
+    container,
+    animated = true,
+    sizing = "fixed",
+    surface = "default",
+    width = "md",
+    padding = "default",
+    collisionPadding = 16,
+    onCloseAutoFocus,
+    ...props
+  }, ref) => {
+    const portalContainer = usePortalContainer(container);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      PopoverPrimitive.Content,
+      {
+        ref,
+        align,
+        sideOffset,
+        collisionPadding,
+        "data-surface": surface === "solid" ? "solid" : void 0,
+        "data-width": sizing === "content" ? void 0 : width,
+        "data-padding": padding,
+        className: cn(
+          // Cap to the viewport space Radix measured and scroll — a popover taller
+          // than the screen must never trap the user with unreachable content.
+          // z must EQUAL the dialog layer (z-[10000]), never exceed it: with equal
+          // z, DOM portal order decides, so a dialog opened FROM a popover stacks
+          // above it, and a popover opened from a dialog still stacks above the
+          // dialog. z-[10001] buried dialogs behind fullscreen popovers.
+          "z-[10000] max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
+          POPOVER_PADDING_CLASS[padding],
+          sizing === "content" ? "w-auto min-w-[min(max(var(--radix-popover-trigger-width),20rem),calc(100vw-2rem))] max-w-[min(28rem,calc(100vw-2rem))]" : cn(POPOVER_WIDTH_CLASS[width], "max-w-[calc(100vw-2rem)]"),
+          surface === "solid" && SOLID_SURFACE_CLASS,
+          animated && MOTION_POPPER,
+          className
+        ),
+        ...props,
+        onCloseAutoFocus: keepMovedFocus(onCloseAutoFocus)
+      }
+    ) });
+  }
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/menu-look.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var MENU_LOOK = {
   width: 280,
   largeWidth: 360,
   rowHeight: 30,
+  sheetRowHeight: 44,
   fontSize: 13,
   lineHeight: 1.25,
   icon: 16,
+  headerMark: 28,
   rowPaddingY: 4,
   rowPaddingX: 8,
   radius: 10
@@ -569,83 +820,317 @@ var MENU_LOOK_CLASS = {
   label: "cm-label",
   hint: "cm-hint",
   current: "cm-current",
+  chevron: "cm-chevron",
   search: "cm-search",
   trail: "cm-trail",
+  badge: "cm-badge",
   shortcut: "cm-shortcut",
+  control: "cm-control",
   divider: "cm-divider",
   sectionLabel: "cm-section-label",
+  header: "cm-header",
+  headerMark: "cm-header-mark",
+  headerText: "cm-header-text",
+  headerTitle: "cm-header-title",
+  headerSubtitle: "cm-header-subtitle",
   danger: "cm-danger",
   dimmed: "cm-dimmed"
 };
 function MenuLookIconSlot({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: MENU_LOOK_CLASS.iconSlot, children });
-}
-function MenuLookRowBody({ icon, label, description, trail, current }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    icon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuLookIconSlot, { children: icon }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: MENU_LOOK_CLASS.text, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: MENU_LOOK_CLASS.label, children: label }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: MENU_LOOK_CLASS.hint, children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: MENU_LOOK_CLASS.iconSlot, children });
+}
+function MenuLookRowBody({ icon, label, labelTitle, description, trail, badge, shortcut, current }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    icon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuLookIconSlot, { children: icon }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: MENU_LOOK_CLASS.text, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: MENU_LOOK_CLASS.label, title: labelTitle, children: label }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: MENU_LOOK_CLASS.hint, children: description }) : null
     ] }),
-    trail ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: MENU_LOOK_CLASS.trail, children: trail }) : null,
-    current ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadixCheckIcon, { className: MENU_LOOK_CLASS.current, "aria-hidden": "true", "data-menu-current-mark": "" }) : null
+    trail ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: MENU_LOOK_CLASS.trail, children: trail }) : null,
+    badge ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: MENU_LOOK_CLASS.badge, children: badge }) : null,
+    shortcut ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("kbd", { className: MENU_LOOK_CLASS.shortcut, children: shortcut }) : null,
+    current ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixCheckIcon, { className: MENU_LOOK_CLASS.current, "aria-hidden": "true", "data-menu-current-mark": "" }) : null
   ] });
 }
 function menuLookItemClass({ destructive, dimmed } = {}) {
   return `${MENU_LOOK_CLASS.item}${destructive ? ` ${MENU_LOOK_CLASS.danger}` : ""}${dimmed ? ` ${MENU_LOOK_CLASS.dimmed}` : ""}`;
 }
-var MenuLookContent = React6.forwardRef(function MenuLookContent2({ size = "standard", density = "comfortable", ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+function DeclaredOverflow({ label, children }) {
+  const fade = useScrollFade();
+  const viewport = React8.useRef(null);
+  const setViewport = React8.useCallback(
+    (node) => {
+      viewport.current = node;
+      fade.ref(node);
+    },
+    [fade.ref]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: setViewport, className: "cm-viewport", "data-slot": "menu-look-viewport", children }),
+    fade.state.bottom ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "cm-more-below",
+        "data-slot": "menu-look-more-below",
+        tabIndex: -1,
+        "aria-hidden": "true",
+        onPointerDown: (event) => event.preventDefault(),
+        onClick: () => viewport.current?.scrollTo({ top: viewport.current.scrollHeight, behavior: "smooth" }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixChevronDownIcon, { "aria-hidden": "true" }),
+          label
+        ]
+      }
+    ) : null
+  ] });
+}
+var MenuLookContent = React8.forwardRef(function MenuLookContent2({ size = "standard", density = "comfortable", moreBelowLabel, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     DropdownMenuContent,
     {
       ref,
       surface: "solid",
       "data-menu-look": "",
+      "data-menu-family": "dropdown",
       "data-size": size,
       "data-density": density,
+      ...moreBelowLabel ? { "data-overflow": "declared" } : {},
       ...props,
-      className: MENU_LOOK_CLASS.panel
+      className: MENU_LOOK_CLASS.panel,
+      children: moreBelowLabel ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DeclaredOverflow, { label: moreBelowLabel, children }) : children
     }
   );
 });
-var MenuLookSubContent = React6.forwardRef(function MenuLookSubContent2({ size = "standard", density = "comfortable", ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var MenuLookSubContent = React8.forwardRef(function MenuLookSubContent2({ size = "standard", density = "comfortable", fit = "menu", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     DropdownMenuSubContent,
     {
       ref,
       surface: "solid",
       "data-menu-look": "",
+      "data-menu-family": "dropdown",
       "data-size": size,
       "data-density": density,
+      "data-fit": fit,
       ...props,
       className: MENU_LOOK_CLASS.panel
     }
   );
 });
-var MenuLookItem = React6.forwardRef(function MenuLookItem2({ icon, label, description, trail, current, destructive, dimmed, href, target, linkProps, ...props }, ref) {
-  const className = menuLookItemClass({ destructive, dimmed });
-  const body = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuLookRowBody, { icon, label, description, trail, current });
-  const mark = current ? { "data-current": "" } : {};
-  if (href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive2.Item, { ref, asChild: true, ...props, ...mark, className, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { href, target, rel: target === "_blank" ? "noopener noreferrer" : void 0, ...linkProps, children: body }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive2.Item, { ref, ...props, ...mark, className, children: body });
+var MenuLookContextContent = React8.forwardRef(function MenuLookContextContent2({ size = "standard", density = "comfortable", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ContextMenuContent,
+    {
+      ref,
+      "data-menu-look": "",
+      "data-menu-family": "context",
+      "data-size": size,
+      "data-density": density,
+      ...props,
+      className: MENU_LOOK_CLASS.panel
+    }
+  );
 });
-var MenuLookSubTrigger = React6.forwardRef(function MenuLookSubTrigger2({ icon, label, description, trail, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuSubTrigger, { ref, ...props, className: MENU_LOOK_CLASS.item, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuLookRowBody, { icon, label, description, trail }) });
+var MenuLookContextSubContent = React8.forwardRef(function MenuLookContextSubContent2({ size = "standard", density = "comfortable", fit = "menu", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ContextMenuSubContent,
+    {
+      ref,
+      "data-menu-look": "",
+      "data-menu-family": "context",
+      "data-size": size,
+      "data-density": density,
+      "data-fit": fit,
+      ...props,
+      className: MENU_LOOK_CLASS.panel
+    }
+  );
+});
+function menuLookRows(P, family) {
+  const Item3 = React8.forwardRef(function MenuLookItem2({ icon, label, labelTitle, description, trail, badge, shortcut, current, destructive, dimmed, href, target, linkProps, ...props }, ref) {
+    const className = menuLookItemClass({ destructive, dimmed });
+    const body = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuLookRowBody, { icon, label, labelTitle, description, trail, badge, shortcut, current });
+    const mark = current ? { "data-current": "" } : {};
+    if (href) {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(P.Item, { ref, asChild: true, "data-slot": `${family}-item`, ...props, ...mark, className, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("a", { href, target, rel: target === "_blank" ? "noopener noreferrer" : void 0, ...linkProps, children: body }) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(P.Item, { ref, "data-slot": `${family}-item`, ...props, ...mark, className, children: body });
+  });
+  const SubTrigger3 = React8.forwardRef(function MenuLookSubTrigger2({ icon, label, labelTitle, description, trail, badge, shortcut, current, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(P.SubTrigger, { ref, "data-slot": `${family}-sub-trigger`, ...props, ...current ? { "data-current": "" } : {}, className: MENU_LOOK_CLASS.item, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuLookRowBody, { icon, label, labelTitle, description, trail, badge, shortcut }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixChevronRightIcon, { className: MENU_LOOK_CLASS.chevron, "aria-hidden": "true" })
+    ] });
+  });
+  const CheckboxItem3 = React8.forwardRef(function MenuLookCheckboxItem2({ icon, label, labelTitle, description, trail, badge, shortcut, checked, ...props }, ref) {
+    const on = checked === true;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(P.CheckboxItem, { ref, ...checked === void 0 ? {} : { checked }, ...props, className: MENU_LOOK_CLASS.item, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuLookRowBody, { icon: on ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixCheckIcon, { className: MENU_LOOK_CLASS.icon }) : icon ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: MENU_LOOK_CLASS.icon, "aria-hidden": "true" }), label, labelTitle, description, trail, badge, shortcut }) });
+  });
+  const RadioItem3 = React8.forwardRef(function MenuLookRadioItem2({ icon, label, labelTitle, description, trail, badge, shortcut, ...props }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(P.RadioItem, { ref, ...props, className: MENU_LOOK_CLASS.item, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuLookRowBody, { icon, label, labelTitle, description, trail, badge, shortcut }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(P.ItemIndicator, { className: MENU_LOOK_CLASS.current, "data-menu-current-mark": "", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixCheckIcon, { "aria-hidden": "true" }) })
+    ] });
+  });
+  const Label3 = React8.forwardRef(function MenuLookLabel2({ description, children, ...props }, ref) {
+    if (!description) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(P.Label, { ref, ...props, className: MENU_LOOK_CLASS.sectionLabel, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(P.Label, { ref, ...props, "data-has-hint": "", className: MENU_LOOK_CLASS.sectionLabel, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: MENU_LOOK_CLASS.hint, children: description })
+    ] });
+  });
+  const Separator3 = React8.forwardRef(function MenuLookSeparator2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(P.Separator, { ref, ...props, className: MENU_LOOK_CLASS.divider });
+  });
+  return { Item: Item3, SubTrigger: SubTrigger3, CheckboxItem: CheckboxItem3, RadioItem: RadioItem3, Label: Label3, Separator: Separator3 };
+}
+var dropdownRows = menuLookRows(DropdownMenuPrimitive2, "dropdown-menu");
+var contextRows = menuLookRows(ContextMenuPrimitive2, "context-menu");
+var MenuLookItem = dropdownRows.Item;
+var MenuLookSub = DropdownMenuPrimitive2.Sub;
+var MenuLookSubTrigger = dropdownRows.SubTrigger;
+var MenuLookCheckboxItem = dropdownRows.CheckboxItem;
+var MenuLookRadioGroup = DropdownMenuPrimitive2.RadioGroup;
+var MenuLookRadioItem = dropdownRows.RadioItem;
+var MenuLookLabel = dropdownRows.Label;
+var MenuLookSeparator = dropdownRows.Separator;
+var MenuLookContextItem = contextRows.Item;
+var MenuLookContextSub = ContextMenuPrimitive2.Sub;
+var MenuLookContextSubTrigger = contextRows.SubTrigger;
+var MenuLookContextCheckboxItem = contextRows.CheckboxItem;
+var MenuLookContextRadioGroup = ContextMenuPrimitive2.RadioGroup;
+var MenuLookContextRadioItem = contextRows.RadioItem;
+var MenuLookContextLabel = contextRows.Label;
+var MenuLookContextSeparator = contextRows.Separator;
+var MenuLookPanel = React8.forwardRef(function MenuLookPanel2({ size = "standard", density = "comfortable", surface = "floating", fillBelow, role = "menu", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      ref,
+      role,
+      "data-menu-look": "",
+      "data-menu-family": "panel",
+      "data-surface": surface,
+      ...fillBelow ? { "data-fill-below": fillBelow } : {},
+      "data-size": size,
+      "data-density": density,
+      ...props,
+      className: MENU_LOOK_CLASS.panel
+    }
+  );
 });
-var MenuLookCheckboxItem = React6.forwardRef(function MenuLookCheckboxItem2({ icon, label, description, trail, checked, ...props }, ref) {
-  const on = checked === true;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive2.CheckboxItem, { ref, ...checked === void 0 ? {} : { checked }, ...props, className: MENU_LOOK_CLASS.item, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuLookRowBody, { icon: on ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadixCheckIcon, { className: MENU_LOOK_CLASS.icon }) : icon ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: MENU_LOOK_CLASS.icon, "aria-hidden": "true" }), label, description, trail }) });
+var MenuLookPopoverContent = React8.forwardRef(function MenuLookPopoverContent2({ size = "standard", density = "comfortable", role = "menu", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    PopoverContent,
+    {
+      ref,
+      role,
+      surface: "solid",
+      padding: "none",
+      animated: true,
+      "data-menu-look": "",
+      "data-menu-family": "panel",
+      "data-in-popover": "",
+      "data-surface": "floating",
+      "data-size": size,
+      "data-density": density,
+      ...props,
+      className: MENU_LOOK_CLASS.panel
+    }
+  );
 });
-var MenuLookLabel = React6.forwardRef(function MenuLookLabel2(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive2.Label, { ref, ...props, className: MENU_LOOK_CLASS.sectionLabel });
+var MenuLookPanelItem = React8.forwardRef(function MenuLookPanelItem2({ icon, label, labelTitle, description, trail, badge, shortcut, current, pressed, destructive, dimmed, href, target, rel, as, linkProps, onClick, role = "menuitem", ...props }, ref) {
+  const marked = Boolean(current || pressed);
+  const body = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuLookRowBody, { icon, label, labelTitle, description, trail, badge, shortcut, current: marked });
+  const className = menuLookItemClass({ destructive, dimmed });
+  const mark = marked ? { "data-current": "" } : {};
+  if (href) {
+    const Link = as ?? "a";
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      Link,
+      {
+        ref,
+        href,
+        target,
+        rel: rel ?? (target === "_blank" ? "noopener noreferrer" : void 0),
+        role,
+        onClick,
+        ...props,
+        ...linkProps,
+        ...mark,
+        className,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "button",
+    {
+      ref,
+      type: "button",
+      role,
+      onClick,
+      ...pressed === void 0 ? {} : { "aria-pressed": pressed },
+      ...props,
+      ...mark,
+      className,
+      children: body
+    }
+  );
 });
-var MenuLookSeparator = React6.forwardRef(function MenuLookSeparator2(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive2.Separator, { ref, ...props, className: MENU_LOOK_CLASS.divider });
+var MenuLookPanelControlRow = React8.forwardRef(function MenuLookPanelControlRow2({ icon, label, description, control, as = "div", ...props }, ref) {
+  const Row = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Row, { ref, "data-control-row": "", ...props, className: MENU_LOOK_CLASS.item, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuLookRowBody, { icon, label, description }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: MENU_LOOK_CLASS.control, children: control })
+  ] });
 });
-var MenuLookSearch = React6.forwardRef(function MenuLookSearch2({ placeholder = "Search", ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: MENU_LOOK_CLASS.search, "data-menu-look-search": "", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+function MenuLookPanelHeader({ mark, title, subtitle, href, as, linkProps, onClick, ...data }) {
+  const body = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: MENU_LOOK_CLASS.headerMark, children: mark }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: MENU_LOOK_CLASS.headerText, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: MENU_LOOK_CLASS.headerTitle, children: title }),
+      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: MENU_LOOK_CLASS.headerSubtitle, children: subtitle }) : null
+    ] })
+  ] });
+  if (href) {
+    const Link = as ?? "a";
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Link, { href, onClick, "data-menu-look-header": "", ...data, ...linkProps, className: MENU_LOOK_CLASS.header, children: body });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "data-menu-look-header": "", ...data, className: MENU_LOOK_CLASS.header, children: body });
+}
+function MenuLookPanelDisclosure({ icon, label, children, pending, defaultOpen = false, open: openProp, onOpenChange, ...data }) {
+  const [ownOpen, setOwnOpen] = React8.useState(defaultOpen);
+  const open = openProp ?? ownOpen;
+  const id = React8.useId();
+  const toggle = () => {
+    const next = !open;
+    if (openProp === void 0) setOwnOpen(next);
+    onOpenChange?.(next);
+  };
+  if (pending) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "data-menu-look-disclosure": "", "data-pending": "", "aria-hidden": "true", ...data, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: MENU_LOOK_CLASS.item, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuLookRowBody, { icon, label }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixChevronDownIcon, { className: MENU_LOOK_CLASS.chevron, "aria-hidden": "true", "data-disclosure-chevron": "" })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-menu-look-disclosure": "", ...data, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", className: MENU_LOOK_CLASS.item, "aria-expanded": open, "aria-controls": id, onClick: toggle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuLookRowBody, { icon, label }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixChevronDownIcon, { className: MENU_LOOK_CLASS.chevron, "aria-hidden": "true", "data-disclosure-chevron": "" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { id, role: "group", hidden: !open, children })
+  ] });
+}
+function MenuLookPanelLabel({ children, ...data }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...data, className: MENU_LOOK_CLASS.sectionLabel, children });
+}
+function MenuLookPanelSeparator() {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { role: "separator", className: MENU_LOOK_CLASS.divider });
+}
+var MenuLookSearch = React8.forwardRef(function MenuLookSearch2({ placeholder = "Search", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: MENU_LOOK_CLASS.search, "data-menu-look-search": "", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "input",
     {
       ref,