@ai-matrx/design-system 0.86.335 → 0.86.336

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.86.336
+
+UNVERIFIED: this release has no Unreleased entry and the source comparison could not be made (the caller supplied no source comparison). Whether source changed is unknown; consumer action is unknown.
+Check the package's gitHead on npm against this version's gitHead: `git diff <previous gitHead> <this gitHead> -- apps/shared/design-system/src`.
+
 ## 0.86.335
 
 - **Select `hint` never truncates** (vault review, 2026-10-23): in the menu and on the trigger the label truncates and the option's `hint` (a short id) stays whole, so two long same-named options stay told apart (`data-select-hint`). Proof: `src/controls/select-search-hint.test.tsx`. Consumer action: none.

package/dist/chunk-L5OACQXS.js

@@ -0,0 +1,409 @@
+"use client";
+import {
+  ContextMenuContent,
+  ContextMenuSubContent
+} from "./chunk-HEFTQUJ5.js";
+import {
+  PopoverContent
+} from "./chunk-OPF265PU.js";
+import {
+  DropdownMenuContent,
+  DropdownMenuSubContent
+} from "./chunk-X6ZRHJQP.js";
+import {
+  useScrollFade
+} from "./chunk-BNXNIN2S.js";
+import {
+  RadixCheckIcon,
+  RadixChevronDownIcon,
+  RadixChevronRightIcon
+} from "./chunk-YCUFQCJW.js";
+
+// src/menu-look.tsx
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Fragment, jsx, jsxs } from "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
+};
+var MENU_LOOK_CLASS = {
+  panel: "cm-menu",
+  item: "cm-item",
+  iconSlot: "cm-icon-slot",
+  icon: "cm-icon",
+  text: "cm-text",
+  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__ */ jsx("span", { className: MENU_LOOK_CLASS.iconSlot, children });
+}
+function MenuLookRowBody({ icon, label, labelTitle, description, trail, badge, shortcut, current }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon ? /* @__PURE__ */ jsx(MenuLookIconSlot, { children: icon }) : null,
+    /* @__PURE__ */ jsxs("span", { className: MENU_LOOK_CLASS.text, children: [
+      /* @__PURE__ */ jsx("span", { className: MENU_LOOK_CLASS.label, title: labelTitle, children: label }),
+      description ? /* @__PURE__ */ jsx("span", { className: MENU_LOOK_CLASS.hint, children: description }) : null
+    ] }),
+    trail ? /* @__PURE__ */ jsx("span", { className: MENU_LOOK_CLASS.trail, children: trail }) : null,
+    badge ? /* @__PURE__ */ jsx("span", { className: MENU_LOOK_CLASS.badge, children: badge }) : null,
+    shortcut ? /* @__PURE__ */ jsx("kbd", { className: MENU_LOOK_CLASS.shortcut, children: shortcut }) : null,
+    current ? /* @__PURE__ */ 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}` : ""}`;
+}
+function DeclaredOverflow({ label, children }) {
+  const fade = useScrollFade();
+  const viewport = React.useRef(null);
+  const setViewport = React.useCallback(
+    (node) => {
+      viewport.current = node;
+      fade.ref(node);
+    },
+    [fade.ref]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { ref: setViewport, className: "cm-viewport", "data-slot": "menu-look-viewport", children }),
+    fade.state.bottom ? /* @__PURE__ */ 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__ */ jsx(RadixChevronDownIcon, { "aria-hidden": "true" }),
+          label
+        ]
+      }
+    ) : null
+  ] });
+}
+var MenuLookContent = React.forwardRef(function MenuLookContent2({ size = "standard", density = "comfortable", moreBelowLabel, children, ...props }, ref) {
+  return /* @__PURE__ */ 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,
+      children: moreBelowLabel ? /* @__PURE__ */ jsx(DeclaredOverflow, { label: moreBelowLabel, children }) : children
+    }
+  );
+});
+var MenuLookSubContent = React.forwardRef(function MenuLookSubContent2({ size = "standard", density = "comfortable", fit = "menu", ...props }, ref) {
+  return /* @__PURE__ */ 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 MenuLookContextContent = React.forwardRef(function MenuLookContextContent2({ size = "standard", density = "comfortable", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ContextMenuContent,
+    {
+      ref,
+      "data-menu-look": "",
+      "data-menu-family": "context",
+      "data-size": size,
+      "data-density": density,
+      ...props,
+      className: MENU_LOOK_CLASS.panel
+    }
+  );
+});
+var MenuLookContextSubContent = React.forwardRef(function MenuLookContextSubContent2({ size = "standard", density = "comfortable", fit = "menu", ...props }, ref) {
+  return /* @__PURE__ */ 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 Item = React.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__ */ jsx(MenuLookRowBody, { icon, label, labelTitle, description, trail, badge, shortcut, current });
+    const mark = current ? { "data-current": "" } : {};
+    if (href) {
+      return /* @__PURE__ */ jsx(P.Item, { ref, asChild: true, "data-slot": `${family}-item`, ...props, ...mark, className, children: /* @__PURE__ */ jsx("a", { href, target, rel: target === "_blank" ? "noopener noreferrer" : void 0, ...linkProps, children: body }) });
+    }
+    return /* @__PURE__ */ jsx(P.Item, { ref, "data-slot": `${family}-item`, ...props, ...mark, className, children: body });
+  });
+  const SubTrigger = React.forwardRef(function MenuLookSubTrigger2({ icon, label, labelTitle, description, trail, badge, shortcut, current, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(P.SubTrigger, { ref, "data-slot": `${family}-sub-trigger`, ...props, ...current ? { "data-current": "" } : {}, className: MENU_LOOK_CLASS.item, children: [
+      /* @__PURE__ */ jsx(MenuLookRowBody, { icon, label, labelTitle, description, trail, badge, shortcut }),
+      /* @__PURE__ */ jsx(RadixChevronRightIcon, { className: MENU_LOOK_CLASS.chevron, "aria-hidden": "true" })
+    ] });
+  });
+  const CheckboxItem = React.forwardRef(function MenuLookCheckboxItem2({ icon, label, labelTitle, description, trail, badge, shortcut, checked, ...props }, ref) {
+    const on = checked === true;
+    return /* @__PURE__ */ jsx(P.CheckboxItem, { ref, ...checked === void 0 ? {} : { checked }, ...props, className: MENU_LOOK_CLASS.item, children: /* @__PURE__ */ jsx(MenuLookRowBody, { icon: on ? /* @__PURE__ */ jsx(RadixCheckIcon, { className: MENU_LOOK_CLASS.icon }) : icon ?? /* @__PURE__ */ jsx("span", { className: MENU_LOOK_CLASS.icon, "aria-hidden": "true" }), label, labelTitle, description, trail, badge, shortcut }) });
+  });
+  const RadioItem = React.forwardRef(function MenuLookRadioItem2({ icon, label, labelTitle, description, trail, badge, shortcut, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(P.RadioItem, { ref, ...props, className: MENU_LOOK_CLASS.item, children: [
+      /* @__PURE__ */ jsx(MenuLookRowBody, { icon, label, labelTitle, description, trail, badge, shortcut }),
+      /* @__PURE__ */ jsx(P.ItemIndicator, { className: MENU_LOOK_CLASS.current, "data-menu-current-mark": "", children: /* @__PURE__ */ jsx(RadixCheckIcon, { "aria-hidden": "true" }) })
+    ] });
+  });
+  const Label = React.forwardRef(function MenuLookLabel2({ description, children, ...props }, ref) {
+    if (!description) return /* @__PURE__ */ jsx(P.Label, { ref, ...props, className: MENU_LOOK_CLASS.sectionLabel, children });
+    return /* @__PURE__ */ jsxs(P.Label, { ref, ...props, "data-has-hint": "", className: MENU_LOOK_CLASS.sectionLabel, children: [
+      /* @__PURE__ */ jsx("span", { children }),
+      /* @__PURE__ */ jsx("span", { className: MENU_LOOK_CLASS.hint, children: description })
+    ] });
+  });
+  const Separator = React.forwardRef(function MenuLookSeparator2(props, ref) {
+    return /* @__PURE__ */ jsx(P.Separator, { ref, ...props, className: MENU_LOOK_CLASS.divider });
+  });
+  return { Item, SubTrigger, CheckboxItem, RadioItem, Label, Separator };
+}
+var dropdownRows = menuLookRows(DropdownMenuPrimitive, "dropdown-menu");
+var contextRows = menuLookRows(ContextMenuPrimitive, "context-menu");
+var MenuLookItem = dropdownRows.Item;
+var MenuLookSub = DropdownMenuPrimitive.Sub;
+var MenuLookSubTrigger = dropdownRows.SubTrigger;
+var MenuLookCheckboxItem = dropdownRows.CheckboxItem;
+var MenuLookRadioGroup = DropdownMenuPrimitive.RadioGroup;
+var MenuLookRadioItem = dropdownRows.RadioItem;
+var MenuLookLabel = dropdownRows.Label;
+var MenuLookSeparator = dropdownRows.Separator;
+var MenuLookContextItem = contextRows.Item;
+var MenuLookContextSub = ContextMenuPrimitive.Sub;
+var MenuLookContextSubTrigger = contextRows.SubTrigger;
+var MenuLookContextCheckboxItem = contextRows.CheckboxItem;
+var MenuLookContextRadioGroup = ContextMenuPrimitive.RadioGroup;
+var MenuLookContextRadioItem = contextRows.RadioItem;
+var MenuLookContextLabel = contextRows.Label;
+var MenuLookContextSeparator = contextRows.Separator;
+var MenuLookPanel = React.forwardRef(function MenuLookPanel2({ size = "standard", density = "comfortable", surface = "floating", fillBelow, role = "menu", ...props }, ref) {
+  return /* @__PURE__ */ 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 MenuLookPopoverContent = React.forwardRef(function MenuLookPopoverContent2({ size = "standard", density = "comfortable", role = "menu", ...props }, ref) {
+  return /* @__PURE__ */ 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 MenuLookPanelItem = React.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__ */ 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__ */ jsx(
+      Link,
+      {
+        ref,
+        href,
+        target,
+        rel: rel ?? (target === "_blank" ? "noopener noreferrer" : void 0),
+        role,
+        onClick,
+        ...props,
+        ...linkProps,
+        ...mark,
+        className,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      role,
+      onClick,
+      ...pressed === void 0 ? {} : { "aria-pressed": pressed },
+      ...props,
+      ...mark,
+      className,
+      children: body
+    }
+  );
+});
+var MenuLookPanelControlRow = React.forwardRef(function MenuLookPanelControlRow2({ icon, label, description, control, as = "div", ...props }, ref) {
+  const Row = as;
+  return /* @__PURE__ */ jsxs(Row, { ref, "data-control-row": "", ...props, className: MENU_LOOK_CLASS.item, children: [
+    /* @__PURE__ */ jsx(MenuLookRowBody, { icon, label, description }),
+    /* @__PURE__ */ jsx("span", { className: MENU_LOOK_CLASS.control, children: control })
+  ] });
+});
+function MenuLookPanelHeader({ mark, title, subtitle, href, as, linkProps, onClick, ...data }) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: MENU_LOOK_CLASS.headerMark, children: mark }),
+    /* @__PURE__ */ jsxs("span", { className: MENU_LOOK_CLASS.headerText, children: [
+      /* @__PURE__ */ jsx("span", { className: MENU_LOOK_CLASS.headerTitle, children: title }),
+      subtitle ? /* @__PURE__ */ jsx("span", { className: MENU_LOOK_CLASS.headerSubtitle, children: subtitle }) : null
+    ] })
+  ] });
+  if (href) {
+    const Link = as ?? "a";
+    return /* @__PURE__ */ jsx(Link, { href, onClick, "data-menu-look-header": "", ...data, ...linkProps, className: MENU_LOOK_CLASS.header, children: body });
+  }
+  return /* @__PURE__ */ 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] = React.useState(defaultOpen);
+  const open = openProp ?? ownOpen;
+  const id = React.useId();
+  const toggle = () => {
+    const next = !open;
+    if (openProp === void 0) setOwnOpen(next);
+    onOpenChange?.(next);
+  };
+  if (pending) {
+    return /* @__PURE__ */ jsx("div", { "data-menu-look-disclosure": "", "data-pending": "", "aria-hidden": "true", ...data, children: /* @__PURE__ */ jsxs("div", { className: MENU_LOOK_CLASS.item, children: [
+      /* @__PURE__ */ jsx(MenuLookRowBody, { icon, label }),
+      /* @__PURE__ */ jsx(RadixChevronDownIcon, { className: MENU_LOOK_CLASS.chevron, "aria-hidden": "true", "data-disclosure-chevron": "" })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-menu-look-disclosure": "", ...data, children: [
+    /* @__PURE__ */ jsxs("button", { type: "button", className: MENU_LOOK_CLASS.item, "aria-expanded": open, "aria-controls": id, onClick: toggle, children: [
+      /* @__PURE__ */ jsx(MenuLookRowBody, { icon, label }),
+      /* @__PURE__ */ jsx(RadixChevronDownIcon, { className: MENU_LOOK_CLASS.chevron, "aria-hidden": "true", "data-disclosure-chevron": "" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { id, role: "group", hidden: !open, children })
+  ] });
+}
+function MenuLookPanelLabel({ children, ...data }) {
+  return /* @__PURE__ */ jsx("div", { ...data, className: MENU_LOOK_CLASS.sectionLabel, children });
+}
+function MenuLookPanelSeparator() {
+  return /* @__PURE__ */ jsx("div", { role: "separator", className: MENU_LOOK_CLASS.divider });
+}
+var MenuLookSearch = React.forwardRef(function MenuLookSearch2({ placeholder = "Search", ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { className: MENU_LOOK_CLASS.search, "data-menu-look-search": "", children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type: "search",
+      autoComplete: "off",
+      spellCheck: false,
+      placeholder,
+      "aria-label": props["aria-label"] ?? placeholder,
+      ...props
+    }
+  ) });
+});
+
+export {
+  MENU_LOOK,
+  MENU_LOOK_CLASS,
+  MenuLookIconSlot,
+  MenuLookRowBody,
+  menuLookItemClass,
+  MenuLookContent,
+  MenuLookSubContent,
+  MenuLookContextContent,
+  MenuLookContextSubContent,
+  MenuLookItem,
+  MenuLookSub,
+  MenuLookSubTrigger,
+  MenuLookCheckboxItem,
+  MenuLookRadioGroup,
+  MenuLookRadioItem,
+  MenuLookLabel,
+  MenuLookSeparator,
+  MenuLookContextItem,
+  MenuLookContextSub,
+  MenuLookContextSubTrigger,
+  MenuLookContextCheckboxItem,
+  MenuLookContextRadioGroup,
+  MenuLookContextRadioItem,
+  MenuLookContextLabel,
+  MenuLookContextSeparator,
+  MenuLookPanel,
+  MenuLookPopoverContent,
+  MenuLookPanelItem,
+  MenuLookPanelControlRow,
+  MenuLookPanelHeader,
+  MenuLookPanelDisclosure,
+  MenuLookPanelLabel,
+  MenuLookPanelSeparator,
+  MenuLookSearch
+};
+//# sourceMappingURL=chunk-L5OACQXS.js.map

package/dist/chunk-L5OACQXS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/menu-look.tsx"],"sourcesContent":["\"use client\";\n/**\n * `@ai-matrx/design-system/menu-look` — THE ONE MENU LOOK (Arman, 2026-10-23: the header \"…\", every\n * crumb dropdown and every Alchemy dropdown are \"the IDENTICAL dropdown that I use for Alchemy for size\n * and style\" — the right-click menu).\n *\n * Four families, one look:\n *  - `MENU_LOOK_CLASS` / `MenuLookRowBody` / `MenuLookIconSlot`: the class names and the inside of a row,\n *    used by @ai-matrx/context-menu's MenuPanel (its own non-Radix renderer, the right-click menu);\n *  - THE DROPDOWN — `MenuLookContent` / `MenuLookSubContent` / `MenuLookItem` / `MenuLookSubTrigger` /\n *    `MenuLookCheckboxItem` / `MenuLookRadioGroup` / `MenuLookRadioItem` / `MenuLookLabel` /\n *    `MenuLookSeparator` / `MenuLookSearch` (+ `MenuLookSub`): the panel and rows on the Radix dropdown\n *    (keyboard, typeahead, focus return, collision padding) — Alchemy's dropdowns, the frame's \"…\" and\n *    crumb menus, a row's \"…\" (ItemMenu);\n *  - THE RIGHT-CLICK — `MenuLookContext*`: the SAME rows on the Radix context menu (a row's right-click,\n *    ItemContextMenu without a host menu);\n *  - THE PANEL — `MenuLookPanel` / `MenuLookPopoverContent` / `MenuLookPanelItem` /\n *    `MenuLookPanelControlRow` / `MenuLookPanelHeader` / `MenuLookPanelDisclosure` /\n *    `MenuLookPanelLabel` / `MenuLookPanelSeparator`: the same panel and rows WITHOUT a Radix menu, for a\n *    popover or sheet that also holds controls (a theme switch, a Switch, a search list) — the account\n *    rail's Settings, Organization and account menus and the frame's admin menu.\n * Every measurement lives once, in `menu-look.css` (shipped inside `styles.css`): 280px panel, 30px rows,\n * 13px text on a 1.25 line, 16px icons, 4px/8px row padding, 10px corners. No part takes a `className`.\n *\n * ONE LEFT EDGE (Arman, 2026-10-23: \"get rid of the HORRIBLE and ugly indentation\"): a row without a\n * glyph draws no icon column, the current row is marked with a check at its END (`current`), and the\n * search is the menu's own header row whose text starts where every row's text starts.\n */\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\";\nimport { DropdownMenuContent, DropdownMenuSubContent } from \"./dropdown-menu\";\nimport { ContextMenuContent, ContextMenuSubContent } from \"./context-menu\";\nimport { PopoverContent } from \"./popover\";\nimport { RadixCheckIcon, RadixChevronDownIcon, RadixChevronRightIcon } from \"./icons\";\nimport { useScrollFade } from \"./use-scroll-fade\";\n\n/** The look's measurements (what `menu-look.css` draws), for tests and hosts that size around a menu. */\nexport const MENU_LOOK = {\n  width: 280,\n  largeWidth: 360,\n  rowHeight: 30,\n  sheetRowHeight: 44,\n  fontSize: 13,\n  lineHeight: 1.25,\n  icon: 16,\n  headerMark: 28,\n  rowPaddingY: 4,\n  rowPaddingX: 8,\n  radius: 10,\n} as const;\n\n/** The look's class names — the ONLY classes a menu part wears. */\nexport const MENU_LOOK_CLASS = {\n  panel: \"cm-menu\",\n  item: \"cm-item\",\n  iconSlot: \"cm-icon-slot\",\n  icon: \"cm-icon\",\n  text: \"cm-text\",\n  label: \"cm-label\",\n  hint: \"cm-hint\",\n  current: \"cm-current\",\n  chevron: \"cm-chevron\",\n  search: \"cm-search\",\n  trail: \"cm-trail\",\n  badge: \"cm-badge\",\n  shortcut: \"cm-shortcut\",\n  control: \"cm-control\",\n  divider: \"cm-divider\",\n  sectionLabel: \"cm-section-label\",\n  header: \"cm-header\",\n  headerMark: \"cm-header-mark\",\n  headerText: \"cm-header-text\",\n  headerTitle: \"cm-header-title\",\n  headerSubtitle: \"cm-header-subtitle\",\n  danger: \"cm-danger\",\n  dimmed: \"cm-dimmed\",\n} as const;\n\nexport type MenuLookSize = \"standard\" | \"large\";\nexport type MenuLookDensity = \"comfortable\" | \"compact\";\n\n/** The 16px icon column of a row that has a glyph (an empty slot draws nothing: no reserved gutter). */\nexport function MenuLookIconSlot({ children }: { children?: React.ReactNode }): React.ReactElement {\n  return <span className={MENU_LOOK_CLASS.iconSlot}>{children}</span>;\n}\n\nexport interface MenuLookRowBodyProps {\n  /** The glyph (any 16px svg; the slot sizes it). Omitted → no icon column; the text starts the row. */\n  icon?: React.ReactNode | undefined;\n  label: React.ReactNode;\n  /** Hover text for the label (a long description stays out of the row: no \"novels\" in menus). */\n  labelTitle?: string | undefined;\n  /** A muted second line under the label. */\n  description?: React.ReactNode | undefined;\n  /** A muted end-of-row hint (a trail, a shortcut word). */\n  trail?: React.ReactNode | undefined;\n  /** A small outlined tag at the row's end (\"New\", \"Beta\", a count). */\n  badge?: React.ReactNode | undefined;\n  /** The row's key, at its end (\"⌘C\", \"R\"). */\n  shortcut?: React.ReactNode | undefined;\n  /** The row the person is on now: medium weight and a check at the row's end (never a left gutter). */\n  current?: boolean | undefined;\n}\n\n/** The inside of a row: icon (when given), label (+ second line), end hint, badge, key, current check. */\nexport function MenuLookRowBody({ icon, label, labelTitle, description, trail, badge, shortcut, current }: MenuLookRowBodyProps): React.ReactElement {\n  return (\n    <>\n      {icon ? <MenuLookIconSlot>{icon}</MenuLookIconSlot> : null}\n      <span className={MENU_LOOK_CLASS.text}>\n        <span className={MENU_LOOK_CLASS.label} title={labelTitle}>{label}</span>\n        {description ? <span className={MENU_LOOK_CLASS.hint}>{description}</span> : null}\n      </span>\n      {trail ? <span className={MENU_LOOK_CLASS.trail}>{trail}</span> : null}\n      {badge ? <span className={MENU_LOOK_CLASS.badge}>{badge}</span> : null}\n      {shortcut ? <kbd className={MENU_LOOK_CLASS.shortcut}>{shortcut}</kbd> : null}\n      {current ? <RadixCheckIcon className={MENU_LOOK_CLASS.current} aria-hidden=\"true\" data-menu-current-mark=\"\" /> : null}\n    </>\n  );\n}\n\n/** A row's classes: the look's row, plus its danger / dimmed marks. */\nexport function menuLookItemClass({ destructive, dimmed }: { destructive?: boolean | undefined; dimmed?: boolean | undefined } = {}): string {\n  return `${MENU_LOOK_CLASS.item}${destructive ? ` ${MENU_LOOK_CLASS.danger}` : \"\"}${dimmed ? ` ${MENU_LOOK_CLASS.dimmed}` : \"\"}`;\n}\n\ntype DataAttributes = { [dataAttribute: `data-${string}`]: string | undefined };\n\ninterface PanelLookProps {\n  /** \"standard\" (280px, the right-click menu) or \"large\" (360px, 36px rows). */\n  size?: MenuLookSize | undefined;\n  density?: MenuLookDensity | undefined;\n}\n\n/**\n * A submenu panel's fit: `\"menu\"` (the look's width and padding) or `\"content\"` — the panel holds a\n * host's own surface (the Alchemy palette): its width, no padding, and the popover height the surface\n * reads mapped to the room this menu measured.\n */\nexport type MenuLookSubFit = \"menu\" | \"content\";\n\n// ── THE DROPDOWN and THE RIGHT-CLICK: one set of rows over either Radix menu ──────────────────────\n\ntype ContentProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuContent>, \"className\" | \"surface\">;\n\nexport interface MenuLookContentProps extends ContentProps, PanelLookProps, DataAttributes {\n  /**\n   * A LONG MENU SAYS SO, IN WORDS (FIX-Q13, production `/agents/all` at 1024x768: a record's \"…\" hid\n   * its Delete below the fold and read as dead). Given, the panel is a frame that does not scroll, the\n   * rows scroll inside it, and a bar with these words (\"More actions below\") sits at its bottom edge\n   * whenever there is more below — a press scrolls to the end. Measured: a menu that fits shows nothing.\n   */\n  moreBelowLabel?: string | undefined;\n}\n\n/** The rows' scroller and its \"more below\" bar, for a panel that declares its overflow. */\nfunction DeclaredOverflow({ label, children }: { label: string; children: React.ReactNode }): React.ReactElement {\n  const fade = useScrollFade();\n  const viewport = React.useRef<HTMLDivElement | null>(null);\n  const setViewport = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      viewport.current = node;\n      fade.ref(node);\n    },\n    [fade.ref],\n  );\n  return (\n    <>\n      <div ref={setViewport} className=\"cm-viewport\" data-slot=\"menu-look-viewport\">\n        {children}\n      </div>\n      {fade.state.bottom ? (\n        <button\n          type=\"button\"\n          className=\"cm-more-below\"\n          data-slot=\"menu-look-more-below\"\n          // Not a menu item: never roving focus or type-ahead; Escape and arrows stay the list's.\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          // Radix would otherwise close the menu on the press that starts this click.\n          onPointerDown={(event) => event.preventDefault()}\n          onClick={() => viewport.current?.scrollTo({ top: viewport.current.scrollHeight, behavior: \"smooth\" })}\n        >\n          <RadixChevronDownIcon aria-hidden=\"true\" />\n          {label}\n        </button>\n      ) : null}\n    </>\n  );\n}\n\n/** The menu's panel on the Radix dropdown (portalled, capped at the room Radix measured, scrolls past it). */\nexport const MenuLookContent = React.forwardRef<HTMLDivElement, MenuLookContentProps>(function MenuLookContent(\n  { size = \"standard\", density = \"comfortable\", moreBelowLabel, children, ...props },\n  ref,\n) {\n  return (\n    <DropdownMenuContent\n      ref={ref}\n      surface=\"solid\"\n      data-menu-look=\"\"\n      data-menu-family=\"dropdown\"\n      data-size={size}\n      data-density={density}\n      {...(moreBelowLabel ? { \"data-overflow\": \"declared\" } : {})}\n      {...props}\n      className={MENU_LOOK_CLASS.panel}\n    >\n      {moreBelowLabel ? <DeclaredOverflow label={moreBelowLabel}>{children}</DeclaredOverflow> : children}\n    </DropdownMenuContent>\n  );\n});\n\ntype SubContentProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuSubContent>, \"className\" | \"surface\">;\n\nexport interface MenuLookSubContentProps extends SubContentProps, PanelLookProps, DataAttributes {\n  fit?: MenuLookSubFit | undefined;\n}\n\n/** A submenu's panel: the same panel, as wide as the menu it opens from. */\nexport const MenuLookSubContent = React.forwardRef<HTMLDivElement, MenuLookSubContentProps>(function MenuLookSubContent(\n  { size = \"standard\", density = \"comfortable\", fit = \"menu\", ...props },\n  ref,\n) {\n  return (\n    <DropdownMenuSubContent\n      ref={ref}\n      surface=\"solid\"\n      data-menu-look=\"\"\n      data-menu-family=\"dropdown\"\n      data-size={size}\n      data-density={density}\n      data-fit={fit}\n      {...props}\n      className={MENU_LOOK_CLASS.panel}\n    />\n  );\n});\n\ntype ContextContentProps = Omit<React.ComponentPropsWithoutRef<typeof ContextMenuContent>, \"className\">;\n\nexport interface MenuLookContextContentProps extends ContextContentProps, PanelLookProps, DataAttributes {}\n\n/** The right-click menu's panel on the Radix context menu: the dropdown's panel, opened at the pointer. */\nexport const MenuLookContextContent = React.forwardRef<HTMLDivElement, MenuLookContextContentProps>(function MenuLookContextContent(\n  { size = \"standard\", density = \"comfortable\", ...props },\n  ref,\n) {\n  return (\n    <ContextMenuContent\n      ref={ref}\n      data-menu-look=\"\"\n      data-menu-family=\"context\"\n      data-size={size}\n      data-density={density}\n      {...props}\n      className={MENU_LOOK_CLASS.panel}\n    />\n  );\n});\n\ntype ContextSubContentProps = Omit<React.ComponentPropsWithoutRef<typeof ContextMenuSubContent>, \"className\">;\n\nexport interface MenuLookContextSubContentProps extends ContextSubContentProps, PanelLookProps, DataAttributes {\n  fit?: MenuLookSubFit | undefined;\n}\n\n/** A right-click submenu's panel. */\nexport const MenuLookContextSubContent = React.forwardRef<HTMLDivElement, MenuLookContextSubContentProps>(function MenuLookContextSubContent(\n  { size = \"standard\", density = \"comfortable\", fit = \"menu\", ...props },\n  ref,\n) {\n  return (\n    <ContextMenuSubContent\n      ref={ref}\n      data-menu-look=\"\"\n      data-menu-family=\"context\"\n      data-size={size}\n      data-density={density}\n      data-fit={fit}\n      {...props}\n      className={MENU_LOOK_CLASS.panel}\n    />\n  );\n});\n\ntype ItemProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, \"className\" | \"children\" | \"asChild\">;\n\nexport interface MenuLookItemProps extends ItemProps, MenuLookRowBodyProps, DataAttributes {\n  destructive?: boolean | undefined;\n  /** Drawn dimmed (a greyed verb whose reason is the row's tooltip); still focusable. */\n  dimmed?: boolean | undefined;\n  /** A real link: the row is an `<a>` (a modified click keeps the browser's link behaviour). */\n  href?: string | undefined;\n  target?: string | undefined;\n  /** Props for the `<a>` (aria-current, title, onClick). */\n  linkProps?: undefined | Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"href\" | \"target\" | \"className\" | \"children\">;\n}\n\ntype SubTriggerProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>, \"className\" | \"children\" | \"asChild\">;\n\nexport interface MenuLookSubTriggerProps extends SubTriggerProps, MenuLookRowBodyProps, DataAttributes {}\n\ntype CheckboxProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>, \"className\" | \"children\" | \"asChild\">;\n\nexport interface MenuLookCheckboxItemProps extends CheckboxProps, MenuLookRowBodyProps, DataAttributes {}\n\ntype RadioProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>, \"className\" | \"children\" | \"asChild\">;\n\nexport interface MenuLookRadioItemProps extends RadioProps, Omit<MenuLookRowBodyProps, \"current\">, DataAttributes {}\n\ntype LabelPrimitiveProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>, \"className\">;\n\nexport interface MenuLookLabelProps extends LabelPrimitiveProps {\n  /** A muted line under the heading (a menu's header: the record it acts on). */\n  description?: React.ReactNode | undefined;\n}\n\ntype SeparatorProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>, \"className\">;\n\n/** The parts both Radix menus share (the context menu's are the same components under other names). */\ninterface MenuPrimitives {\n  Item: typeof DropdownMenuPrimitive.Item;\n  SubTrigger: typeof DropdownMenuPrimitive.SubTrigger;\n  CheckboxItem: typeof DropdownMenuPrimitive.CheckboxItem;\n  RadioItem: typeof DropdownMenuPrimitive.RadioItem;\n  ItemIndicator: typeof DropdownMenuPrimitive.ItemIndicator;\n  Label: typeof DropdownMenuPrimitive.Label;\n  Separator: typeof DropdownMenuPrimitive.Separator;\n}\n\n/** The rows, drawn once, over either Radix menu — so a row's \"…\" and its right-click are one look. */\nfunction menuLookRows(P: MenuPrimitives, family: \"dropdown-menu\" | \"context-menu\") {\n  /** One row: icon, label (+ optional second line), optional end hint; a link when given `href`. */\n  const Item = React.forwardRef<HTMLDivElement, MenuLookItemProps>(function MenuLookItem(\n    { icon, label, labelTitle, description, trail, badge, shortcut, current, destructive, dimmed, href, target, linkProps, ...props },\n    ref,\n  ) {\n    const className = menuLookItemClass({ destructive, dimmed });\n    const body = <MenuLookRowBody icon={icon} label={label} labelTitle={labelTitle} description={description} trail={trail} badge={badge} shortcut={shortcut} current={current} />;\n    const mark = current ? { \"data-current\": \"\" } : {};\n    if (href) {\n      return (\n        <P.Item ref={ref} asChild data-slot={`${family}-item`} {...props} {...mark} className={className}>\n          <a href={href} target={target} rel={target === \"_blank\" ? \"noopener noreferrer\" : undefined} {...linkProps}>\n            {body}\n          </a>\n        </P.Item>\n      );\n    }\n    return (\n      <P.Item ref={ref} data-slot={`${family}-item`} {...props} {...mark} className={className}>\n        {body}\n      </P.Item>\n    );\n  });\n\n  /**\n   * A row that opens a submenu: the same row (icon slot, the standard gap, one left edge) with the\n   * look's chevron at its END (`cm-chevron`, 16px, muted) — never a bare SubTrigger whose icon touches\n   * its label.\n   */\n  const SubTrigger = React.forwardRef<HTMLDivElement, MenuLookSubTriggerProps>(function MenuLookSubTrigger(\n    { icon, label, labelTitle, description, trail, badge, shortcut, current, ...props },\n    ref,\n  ) {\n    return (\n      <P.SubTrigger ref={ref} data-slot={`${family}-sub-trigger`} {...props} {...(current ? { \"data-current\": \"\" } : {})} className={MENU_LOOK_CLASS.item}>\n        <MenuLookRowBody icon={icon} label={label} labelTitle={labelTitle} description={description} trail={trail} badge={badge} shortcut={shortcut} />\n        <RadixChevronRightIcon className={MENU_LOOK_CLASS.chevron} aria-hidden=\"true\" />\n      </P.SubTrigger>\n    );\n  });\n\n  /** A toggle row: a check in the icon slot while on (the right-click menu's toggle), else its icon — a\n   * toggle keeps its column either way, so switching it never moves its label. */\n  const CheckboxItem = React.forwardRef<HTMLDivElement, MenuLookCheckboxItemProps>(function MenuLookCheckboxItem(\n    { icon, label, labelTitle, description, trail, badge, shortcut, checked, ...props },\n    ref,\n  ) {\n    const on = checked === true;\n    return (\n      <P.CheckboxItem ref={ref} {...(checked === undefined ? {} : { checked })} {...props} className={MENU_LOOK_CLASS.item}>\n        <MenuLookRowBody icon={on ? <RadixCheckIcon className={MENU_LOOK_CLASS.icon} /> : (icon ?? <span className={MENU_LOOK_CLASS.icon} aria-hidden=\"true\" />)} label={label} labelTitle={labelTitle} description={description} trail={trail} badge={badge} shortcut={shortcut} />\n      </P.CheckboxItem>\n    );\n  });\n\n  /** A one-of row: the chosen one is marked like the current row — medium weight and a check at the\n   * row's END — so no row reserves a left gutter for a dot. */\n  const RadioItem = React.forwardRef<HTMLDivElement, MenuLookRadioItemProps>(function MenuLookRadioItem(\n    { icon, label, labelTitle, description, trail, badge, shortcut, ...props },\n    ref,\n  ) {\n    return (\n      <P.RadioItem ref={ref} {...props} className={MENU_LOOK_CLASS.item}>\n        <MenuLookRowBody icon={icon} label={label} labelTitle={labelTitle} description={description} trail={trail} badge={badge} shortcut={shortcut} />\n        <P.ItemIndicator className={MENU_LOOK_CLASS.current} data-menu-current-mark=\"\">\n          <RadixCheckIcon aria-hidden=\"true\" />\n        </P.ItemIndicator>\n      </P.RadioItem>\n    );\n  });\n\n  /** A section heading (\"Copy\", \"Brands\", \"Pages\"), with an optional muted line under it. */\n  const Label = React.forwardRef<HTMLDivElement, MenuLookLabelProps>(function MenuLookLabel(\n    { description, children, ...props },\n    ref,\n  ) {\n    if (!description) return <P.Label ref={ref} {...props} className={MENU_LOOK_CLASS.sectionLabel}>{children}</P.Label>;\n    return (\n      <P.Label ref={ref} {...props} data-has-hint=\"\" className={MENU_LOOK_CLASS.sectionLabel}>\n        <span>{children}</span>\n        <span className={MENU_LOOK_CLASS.hint}>{description}</span>\n      </P.Label>\n    );\n  });\n\n  /** The line between sections. */\n  const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(function MenuLookSeparator(props, ref) {\n    return <P.Separator ref={ref} {...props} className={MENU_LOOK_CLASS.divider} />;\n  });\n\n  return { Item, SubTrigger, CheckboxItem, RadioItem, Label, Separator };\n}\n\nconst dropdownRows = menuLookRows(DropdownMenuPrimitive, \"dropdown-menu\");\nconst contextRows = menuLookRows(ContextMenuPrimitive as unknown as MenuPrimitives, \"context-menu\");\n\nexport const MenuLookItem = dropdownRows.Item;\n/** Holds a submenu: `MenuLookSub` > `MenuLookSubTrigger` + `MenuLookSubContent`. */\nexport const MenuLookSub = DropdownMenuPrimitive.Sub;\nexport const MenuLookSubTrigger = dropdownRows.SubTrigger;\nexport const MenuLookCheckboxItem = dropdownRows.CheckboxItem;\n/** A group of one-of rows (`MenuLookRadioItem`); the host owns `value` / `onValueChange`. */\nexport const MenuLookRadioGroup = DropdownMenuPrimitive.RadioGroup;\nexport const MenuLookRadioItem = dropdownRows.RadioItem;\nexport const MenuLookLabel = dropdownRows.Label;\nexport const MenuLookSeparator = dropdownRows.Separator;\n\n/** The right-click twins of the dropdown rows — identical rows, the Radix context menu underneath. */\nexport const MenuLookContextItem = contextRows.Item;\nexport const MenuLookContextSub = ContextMenuPrimitive.Sub;\nexport const MenuLookContextSubTrigger = contextRows.SubTrigger;\nexport const MenuLookContextCheckboxItem = contextRows.CheckboxItem;\nexport const MenuLookContextRadioGroup = ContextMenuPrimitive.RadioGroup;\nexport const MenuLookContextRadioItem = contextRows.RadioItem;\nexport const MenuLookContextLabel = contextRows.Label;\nexport const MenuLookContextSeparator = contextRows.Separator;\n\n// ── THE PANEL: the same panel and rows with no Radix menu (a popover or sheet that holds controls) ──\n\n/**\n * Where a panel sits: `\"floating\"` draws the menu's own box (border, popover fill, shadow, 280px) — a\n * CSS-toggled menu, or a host whose popover draws nothing; `\"sheet\"` draws no box (a phone's bottom\n * sheet, or a host popover that is already the box) and gives its rows 44px touch height.\n */\nexport type MenuLookPanelSurface = \"floating\" | \"sheet\";\n\nexport interface MenuLookPanelProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"className\" | \"style\">,\n    PanelLookProps,\n    DataAttributes {\n  surface?: MenuLookPanelSurface | undefined;\n  /**\n   * `\"lg\"`: below the large breakpoint (1024px) the floating panel fills the width its host gives it —\n   * a CSS-toggled menu that becomes a bottom-anchored sheet on a phone (AppShell's account menu).\n   */\n  fillBelow?: \"lg\" | undefined;\n}\n\n/** The menu's panel as a plain element: its rows are `MenuLookPanel*` parts. Role `menu` by default. */\nexport const MenuLookPanel = React.forwardRef<HTMLDivElement, MenuLookPanelProps>(function MenuLookPanel(\n  { size = \"standard\", density = \"comfortable\", surface = \"floating\", fillBelow, role = \"menu\", ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      role={role}\n      data-menu-look=\"\"\n      data-menu-family=\"panel\"\n      data-surface={surface}\n      {...(fillBelow ? { \"data-fill-below\": fillBelow } : {})}\n      data-size={size}\n      data-density={density}\n      {...props}\n      className={MENU_LOOK_CLASS.panel}\n    />\n  );\n});\n\ntype PopoverProps = Omit<React.ComponentPropsWithoutRef<typeof PopoverContent>, \"className\" | \"surface\" | \"width\" | \"padding\" | \"sizing\">;\n\nexport interface MenuLookPopoverContentProps extends PopoverProps, PanelLookProps, DataAttributes {}\n\n/**\n * The panel IS the popover: a Radix popover (outside click, Esc, focus return, collision padding)\n * wearing the menu's box — one element, never a popover box around a menu box. Role `menu`.\n */\nexport const MenuLookPopoverContent = React.forwardRef<HTMLDivElement, MenuLookPopoverContentProps>(function MenuLookPopoverContent(\n  { size = \"standard\", density = \"comfortable\", role = \"menu\", ...props },\n  ref,\n) {\n  return (\n    <PopoverContent\n      ref={ref}\n      role={role}\n      surface=\"solid\"\n      padding=\"none\"\n      animated\n      data-menu-look=\"\"\n      data-menu-family=\"panel\"\n      data-in-popover=\"\"\n      data-surface=\"floating\"\n      data-size={size}\n      data-density={density}\n      {...props}\n      className={MENU_LOOK_CLASS.panel}\n    />\n  );\n});\n\ntype LinkComponent = React.ElementType;\n\ninterface PanelRowMarks {\n  destructive?: boolean | undefined;\n  /** Drawn dimmed (a greyed verb whose reason is the row's tooltip); still pressable. */\n  dimmed?: boolean | undefined;\n}\n\nexport interface MenuLookPanelItemProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"className\" | \"style\" | \"children\" | \"type\">,\n    MenuLookRowBodyProps,\n    PanelRowMarks,\n    DataAttributes {\n  /**\n   * A toggle row's state (a tool that is showing): `aria-pressed`, and while on it reads like the\n   * current row (medium weight, the check at its end).\n   */\n  pressed?: boolean | undefined;\n  /** A link: the row is an anchor (or `as`, the host's link component — Next's Link, an app link). */\n  href?: string | undefined;\n  target?: string | undefined;\n  rel?: string | undefined;\n  /** The link component for `href` (it receives `href`, `className`, `role`, `onClick`, children). */\n  as?: LinkComponent | undefined;\n  /** Extra props for the link component (`prefetch={false}`, `aria-current`). */\n  linkProps?: Record<string, unknown> | undefined;\n}\n\n/** A panel row: a button, or a link with `href`. Same row as the dropdown's (`cm-item`). */\nexport const MenuLookPanelItem = React.forwardRef<HTMLElement, MenuLookPanelItemProps>(function MenuLookPanelItem(\n  { icon, label, labelTitle, description, trail, badge, shortcut, current, pressed, destructive, dimmed, href, target, rel, as, linkProps, onClick, role = \"menuitem\", ...props },\n  ref,\n) {\n  const marked = Boolean(current || pressed);\n  const body = <MenuLookRowBody icon={icon} label={label} labelTitle={labelTitle} description={description} trail={trail} badge={badge} shortcut={shortcut} current={marked} />;\n  const className = menuLookItemClass({ destructive, dimmed });\n  const mark = marked ? { \"data-current\": \"\" } : {};\n  if (href) {\n    const Link = as ?? \"a\";\n    return (\n      <Link\n        ref={ref}\n        href={href}\n        target={target}\n        rel={rel ?? (target === \"_blank\" ? \"noopener noreferrer\" : undefined)}\n        role={role}\n        onClick={onClick}\n        {...props}\n        {...linkProps}\n        {...mark}\n        className={className}\n      >\n        {body}\n      </Link>\n    );\n  }\n  return (\n    <button\n      ref={ref as React.Ref<HTMLButtonElement>}\n      type=\"button\"\n      role={role}\n      onClick={onClick}\n      {...(pressed === undefined ? {} : { \"aria-pressed\": pressed })}\n      {...props}\n      {...mark}\n      className={className}\n    >\n      {body}\n    </button>\n  );\n});\n\nexport interface MenuLookPanelControlRowProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"className\" | \"style\" | \"children\">,\n    Pick<MenuLookRowBodyProps, \"icon\" | \"label\" | \"description\">,\n    DataAttributes {\n  /** The row's own control at its end: a `Switch`, a `SegmentedControl`, a count. */\n  control: React.ReactNode;\n  /** `\"label\"` when the whole row should press its control (a Switch); default `\"div\"`. */\n  as?: \"div\" | \"label\" | undefined;\n}\n\n/**\n * A row that holds a control instead of being one (Theme: Light | Dark | Device; Standard view with its\n * Switch): the same icon slot, label and left edge as every row, the control at its END, and no hover\n * fill (the control answers the pointer, not the row).\n */\nexport const MenuLookPanelControlRow = React.forwardRef<HTMLElement, MenuLookPanelControlRowProps>(function MenuLookPanelControlRow(\n  { icon, label, description, control, as = \"div\", ...props },\n  ref,\n) {\n  const Row = as;\n  return (\n    <Row ref={ref as React.Ref<never>} data-control-row=\"\" {...props} className={MENU_LOOK_CLASS.item}>\n      <MenuLookRowBody icon={icon} label={label} description={description} />\n      <span className={MENU_LOOK_CLASS.control}>{control}</span>\n    </Row>\n  );\n});\n\nexport interface MenuLookPanelHeaderProps extends DataAttributes {\n  /** The 28px mark (an avatar, an organization mark, a colored glyph). */\n  mark: React.ReactNode;\n  title: React.ReactNode;\n  /** One muted line under the title. */\n  subtitle?: React.ReactNode | undefined;\n  /** The header is a door to its own page. */\n  href?: string | undefined;\n  as?: LinkComponent | undefined;\n  linkProps?: Record<string, unknown> | undefined;\n  onClick?: React.MouseEventHandler<HTMLElement> | undefined;\n}\n\n/**\n * The row a panel opens with (Settings, the organization, the person): a 28px mark on the rows' left\n * edge, a title, an optional muted subtitle. With `href` it is a link to its page.\n */\nexport function MenuLookPanelHeader({ mark, title, subtitle, href, as, linkProps, onClick, ...data }: MenuLookPanelHeaderProps): React.ReactElement {\n  const body = (\n    <>\n      <span className={MENU_LOOK_CLASS.headerMark}>{mark}</span>\n      <span className={MENU_LOOK_CLASS.headerText}>\n        <span className={MENU_LOOK_CLASS.headerTitle}>{title}</span>\n        {subtitle ? <span className={MENU_LOOK_CLASS.headerSubtitle}>{subtitle}</span> : null}\n      </span>\n    </>\n  );\n  if (href) {\n    const Link = as ?? \"a\";\n    return (\n      <Link href={href} onClick={onClick} data-menu-look-header=\"\" {...data} {...linkProps} className={MENU_LOOK_CLASS.header}>\n        {body}\n      </Link>\n    );\n  }\n  return (\n    <div data-menu-look-header=\"\" {...data} className={MENU_LOOK_CLASS.header}>\n      {body}\n    </div>\n  );\n}\n\nexport interface MenuLookPanelDisclosureProps extends Pick<MenuLookRowBodyProps, \"icon\" | \"label\">, DataAttributes {\n  /** Omitted with `pending`: the group's rows are still on their way. */\n  children?: React.ReactNode;\n  /**\n   * The group's row while its rows load (a lazy chunk): the same row and chevron, inert and hidden\n   * from assistive tech, so nothing below it moves when the group arrives (no layout shift).\n   */\n  pending?: boolean | undefined;\n  defaultOpen?: boolean | undefined;\n  open?: boolean | undefined;\n  onOpenChange?: ((open: boolean) => void) | undefined;\n}\n\n/**\n * A folded group of rows (\"Quick Access\", \"Admin\"): a row with a down-chevron at its END that opens\n * the group in place. Closed, its rows are ABSENT (hidden: out of the hit-test tree and the tab order),\n * never clipped-but-live. Open, they sit on the same left edge as every row — no indent.\n */\nexport function MenuLookPanelDisclosure({ icon, label, children, pending, defaultOpen = false, open: openProp, onOpenChange, ...data }: MenuLookPanelDisclosureProps): React.ReactElement {\n  const [ownOpen, setOwnOpen] = React.useState(defaultOpen);\n  const open = openProp ?? ownOpen;\n  const id = React.useId();\n  const toggle = () => {\n    const next = !open;\n    if (openProp === undefined) setOwnOpen(next);\n    onOpenChange?.(next);\n  };\n  if (pending) {\n    return (\n      <div data-menu-look-disclosure=\"\" data-pending=\"\" aria-hidden=\"true\" {...data}>\n        <div className={MENU_LOOK_CLASS.item}>\n          <MenuLookRowBody icon={icon} label={label} />\n          <RadixChevronDownIcon className={MENU_LOOK_CLASS.chevron} aria-hidden=\"true\" data-disclosure-chevron=\"\" />\n        </div>\n      </div>\n    );\n  }\n  return (\n    <div data-menu-look-disclosure=\"\" {...data}>\n      <button type=\"button\" className={MENU_LOOK_CLASS.item} aria-expanded={open} aria-controls={id} onClick={toggle}>\n        <MenuLookRowBody icon={icon} label={label} />\n        <RadixChevronDownIcon className={MENU_LOOK_CLASS.chevron} aria-hidden=\"true\" data-disclosure-chevron=\"\" />\n      </button>\n      <div id={id} role=\"group\" hidden={!open}>\n        {children}\n      </div>\n    </div>\n  );\n}\n\n/** A panel's section heading. */\nexport function MenuLookPanelLabel({ children, ...data }: { children: React.ReactNode } & DataAttributes): React.ReactElement {\n  return (\n    <div {...data} className={MENU_LOOK_CLASS.sectionLabel}>\n      {children}\n    </div>\n  );\n}\n\n/** The line between a panel's sections. */\nexport function MenuLookPanelSeparator(): React.ReactElement {\n  return <div role=\"separator\" className={MENU_LOOK_CLASS.divider} />;\n}\n\n// ── The menu's search ─────────────────────────────────────────────────────────────────────────\n\nexport interface MenuLookSearchProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"className\" | \"style\" | \"size\" | \"type\">,\n    DataAttributes {}\n\n/**\n * The menu's search: its own header row (full-bleed, a hairline under it, held at the top while the\n * list scrolls) whose text starts on the rows' left edge. The host owns the value and its keys (stop\n * propagation on letters so the menu's type-ahead never takes them).\n */\nexport const MenuLookSearch = React.forwardRef<HTMLInputElement, MenuLookSearchProps>(function MenuLookSearch(\n  { placeholder = \"Search\", ...props },\n  ref,\n) {\n  return (\n    <div className={MENU_LOOK_CLASS.search} data-menu-look-search=\"\">\n      <input\n        ref={ref}\n        type=\"search\"\n        autoComplete=\"off\"\n        spellCheck={false}\n        placeholder={placeholder}\n        aria-label={props[\"aria-label\"] ?? placeholder}\n        {...props}\n      />\n    </div>\n  );\n});\n"],"mappings":"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","names":["MenuLookContent","MenuLookSubContent","MenuLookContextContent","MenuLookContextSubContent","MenuLookItem","MenuLookSubTrigger","MenuLookCheckboxItem","MenuLookRadioItem","MenuLookLabel","MenuLookSeparator","MenuLookPanel","MenuLookPopoverContent","MenuLookPanelItem","MenuLookPanelControlRow","MenuLookSearch"]}

package/dist/{chunk-SUVIHUAD.js → chunk-MAMZGJJ3.js}

@@ -1,4 +1,8 @@
 "use client";
+import {
+  MENU_LOOK_CLASS,
+  MenuLookRowBody
+} from "./chunk-L5OACQXS.js";
 import {
   ARCHIVE_LABEL
 } from "./chunk-VQQ3O7J5.js";
@@ -203,7 +207,7 @@ function OrganizationPicker({
   onSelect,
   onToggleFavorite,
   hideHeading = false,
-  itemClassName,
+  look = "default",
   foldedLabel = "More",
   className,
   more
@@ -227,7 +231,33 @@ function OrganizationPicker({
     const isActive2 = org.id === activeOrganizationId;
     const favorite = isFavorite(org.id);
     return /* @__PURE__ */ jsxs2("li", { role: "none", className: "group/org relative flex items-center", children: [
-      /* @__PURE__ */ jsxs2(
+      look === "menu" ? /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": isActive2,
+          "aria-pressed": isActive2,
+          onClick: (event) => {
+            event.stopPropagation();
+            onSelect(org);
+          },
+          className: MENU_LOOK_CLASS.item,
+          "data-active": isActive2 ? "" : void 0,
+          "data-current": isActive2 ? "" : void 0,
+          "data-end-button": onToggleFavorite || favorite ? "" : void 0,
+          children: /* @__PURE__ */ jsx3(
+            MenuLookRowBody,
+            {
+              icon: /* @__PURE__ */ jsx3(OrganizationMark, { id: org.id, name: org.name, abbreviation: org.abbreviation, size: 16 }),
+              label: org.name,
+              description: sharesItsName(org) && org.distinguisher ? org.distinguisher : void 0,
+              trail: org.detail ?? void 0,
+              current: isActive2
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsxs2(
         "button",
         {
           type: "button",
@@ -240,8 +270,7 @@ function OrganizationPicker({
           },
           className: cn(
             "flex w-full min-w-0 items-center gap-2.5 rounded-md py-1.5 pl-2 pr-8 text-left text-sm text-foreground transition-colors hover:bg-accent",
-            isActive2 && "bg-primary/10 font-semibold text-primary-ink ring-1 ring-inset ring-primary/30 hover:bg-primary/15",
-            itemClassName
+            isActive2 && "bg-primary/10 font-semibold text-primary-ink ring-1 ring-inset ring-primary/30 hover:bg-primary/15"
           ),
           "data-active": isActive2 ? "" : void 0,
           children: [
@@ -735,4 +764,4 @@ export {
   CanvasLayout,
   ModeSwitch
 };
-//# sourceMappingURL=chunk-SUVIHUAD.js.map
+//# sourceMappingURL=chunk-MAMZGJJ3.js.map