@ai-matrx/design-system 0.86.334 → 0.86.336

package/dist/menu-look.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 
 /**
  * The opaque surface option shared by every floating menu surface
@@ -33,9 +35,6 @@ type PopoverSurface = "default" | "solid";
  * Icons are the package's inlined SVGs (C19) — no icon-library dependency.
  */
 
-declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    inset?: boolean;
-} & React.RefAttributes<HTMLDivElement>>;
 /**
  * A SUBMENU OPENS BESIDE ITS PARENT, NEVER ON TOP OF IT (merged-grid review 2, C1: "nested
  * submenus overlap the parent menu"). The submenu was drawn INSIDE the parent's surface, and that
@@ -58,18 +57,147 @@ interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<typeof
 }
 declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
 
+/**
+ * ContextMenu — the right-click menu primitive.
+ *
+ * THE ROOT RENDERS UNCONDITIONALLY — no hydration mount gate. The gate a
+ * matrx-frontend wrapper once carried ("Radix generates dynamic aria-controls
+ * ids that differ between SSR and client") was false twice over: a CLOSED
+ * `ContextMenuTrigger` renders only `data-state` / `data-disabled` and emits
+ * no id at all, so there was never a mismatch to defend against. And the gate
+ * was actively harmful: the Trigger wraps ALWAYS-VISIBLE content, so `return
+ * null` deleted the wrapped subtree from the server render and the first
+ * client render — around a list row, that means the list paints EMPTY and
+ * fills in after hydration. Gating the Root would additionally orphan any
+ * Trigger rendered beneath it.
+ *
+ * That history is exactly why this belongs in the package: the same repo had
+ * already accumulated two copies of this wrapper, one gated and one not, with
+ * the CORRECT one sitting unused beside the defective one.
+ *
+ * This is the PRIMITIVE only. A host's actual right-click menu SYSTEM — the
+ * sections, the copy/export/convert actions, the surface registry — composes
+ * these parts and stays host-owned; nothing here knows what an action is.
+ *
+ * Portalling goes through the package's `usePortalContainer` seam so a menu
+ * raised inside a Dialog mounts inside it; an explicit `container` wins.
+ */
+
+/** Portalled like its parent, so it opens BESIDE it — see `DropdownMenuSubContent` for why. */
+declare const ContextMenuSubContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    container?: HTMLElement | null;
+} & React.RefAttributes<HTMLDivElement>>;
+interface ContextMenuContentProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> {
+    /** Explicit portal target; wins over the injected container. */
+    container?: HTMLElement | null;
+}
+declare const ContextMenuContent: React.ForwardRefExoticComponent<ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Popover — ported verbatim from matrx-frontend `components/ui/popover.tsx`.
+ *
+ * Seam inversion: the host's `useNestedPortalContainer` (dialog/popout aware)
+ * becomes the injected `PortalContainerProvider` seam (`portal-container.tsx`);
+ * the explicit `container` prop keeps top priority, exactly as before.
+ *
+ * THE ROOT RENDERS UNCONDITIONALLY — no mount gate. This wrapper used to defer
+ * rendering until after hydration ("Radix generates dynamic aria-controls ids
+ * that differ between SSR and client"), and that justification was false:
+ * Radix ids come from React's SSR-stable `useId` (verified against
+ * @radix-ui/react-popover 1.1.17 / react-id 1.1.2). The gate was actively
+ * harmful — the Trigger wraps ALWAYS-VISIBLE content, so `return null`
+ * deleted it from SSR and the first client paint.
+ */
+
+interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
+    /** Explicit portal target; wins over the injected container. */
+    container?: HTMLElement | null;
+    /**
+     * Package-owned open/close motion. Default `true`. Pass `false` for a
+     * surface that must appear instantly — a picker re-anchoring while the user
+     * types, a measurement pass. It is NOT the reduced-motion switch;
+     * `styles.css` already honors `prefers-reduced-motion`.
+     */
+    animated?: boolean;
+    /**
+     * HOW WIDE THE POPOVER IS ALLOWED TO BE, and it is the SYSTEM that decides — never a
+     * surface pasting its own `w-64` over the default (lane FIX-14, 2026-09-22).
+     *
+     * `"fixed"` (default) is the historical `w-72`: right for a menu of short, known
+     * labels, where a ragged edge would look broken.
+     *
+     * `"content"` is for a popover whose whole job is to SHOW SOMETHING THE SYSTEM DID
+     * NOT CHOOSE — a person's name, a record's title, a row the user is about to
+     * create. The relation picker offered
+     *
+     *     Create “Marisol Okonkwo — 418 Calle Pu
+     *
+     * inside a 16rem box, cut mid-word, on the one control that exists to show the name
+     * being created. A fixed width cannot be right for content of unknown length, so
+     * this one grows to its content between an honest floor and an honest ceiling:
+     *
+     *   · at least the trigger's own width, and at least 20rem — the width Airtable's and
+     *     Notion's link-record pickers settle on, and wide enough that an ordinary
+     *     "name — street, town" fits on one line;
+     *   · at most 28rem, and never wider than the viewport less a 1rem gutter each side,
+     *     so it still fits a 375px phone with nothing running off the screen. The floor is
+     *     clamped by the same gutter, so on a very narrow screen the ceiling still wins.
+     *
+     * Beyond that ceiling the CONTENT truncates with an ellipsis and carries a `title`.
+     * Growing, then ellipsis — never a mid-word cut.
+     *
+     * BOTH modes keep the phone gutter (2026-09-26): the box is never wider than the
+     * viewport less 1rem each side, and Radix keeps it `collisionPadding` (16px) off every
+     * screen edge. Measured at 375px before this: `w-72`/`w-80` callers landed flush on
+     * the right edge (55→375) because collision padding was 0.
+     */
+    sizing?: "fixed" | "content";
+    /**
+     * The surface fill. `"default"` is the theme's popover surface (a host may render it
+     * translucent / glass). `"solid"` is the OPAQUE surface — the popover token at full
+     * alpha, no backdrop blur — for a menu that must read as paper over a cover image or a
+     * busy page (a Notion-style ••• menu). Same option on `DropdownMenuContent`.
+     */
+    surface?: PopoverSurface;
+    /**
+     * A NAMED fixed width (0.68.22), for a `sizing="fixed"` popover whose content needs more or
+     * less room than the default `md` (18rem) — never a pasted `w-[260px]`. Every width keeps the
+     * phone gutter (never wider than the viewport less 1rem each side). Derived from the call
+     * sites: `xs` 12rem (a short menu), `sm` 15rem (a ••• menu), `md` 18rem (default),
+     * `lg` 20rem (a small form), `xl` 26rem (a picker grid), `2xl` 34rem (a gallery).
+     * Ignored when `sizing="content"`.
+     */
+    width?: PopoverWidth;
+    /**
+     * The inner padding, named (0.68.22): `none` (the content draws its own — a command list, a
+     * picker), `xs` 4px (a menu of rows), `sm` 8px, `md` 12px, `default` 16px.
+     */
+    padding?: PopoverPadding;
+}
+type PopoverWidth = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type PopoverPadding = "none" | "xs" | "sm" | "md" | "default";
+declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+
 /**
  * `@ai-matrx/design-system/menu-look` — THE ONE MENU LOOK (Arman, 2026-10-23: the header "…", every
  * crumb dropdown and every Alchemy dropdown are "the IDENTICAL dropdown that I use for Alchemy for size
  * and style" — the right-click menu).
  *
- * Two halves, one look:
+ * Four families, one look:
  *  - `MENU_LOOK_CLASS` / `MenuLookRowBody` / `MenuLookIconSlot`: the class names and the inside of a row,
  *    used by @ai-matrx/context-menu's MenuPanel (its own non-Radix renderer, the right-click menu);
- *  - `MenuLookContent` / `MenuLookSubContent` / `MenuLookItem` / `MenuLookSubTrigger` /
- *    `MenuLookCheckboxItem` / `MenuLookLabel` / `MenuLookSeparator` / `MenuLookSearch`: the same panel and rows on the Radix
- *    dropdown (keyboard, typeahead, focus return, collision padding), used by Alchemy's dropdowns and the
- *    frame's "…" and crumb menus.
+ *  - THE DROPDOWN — `MenuLookContent` / `MenuLookSubContent` / `MenuLookItem` / `MenuLookSubTrigger` /
+ *    `MenuLookCheckboxItem` / `MenuLookRadioGroup` / `MenuLookRadioItem` / `MenuLookLabel` /
+ *    `MenuLookSeparator` / `MenuLookSearch` (+ `MenuLookSub`): the panel and rows on the Radix dropdown
+ *    (keyboard, typeahead, focus return, collision padding) — Alchemy's dropdowns, the frame's "…" and
+ *    crumb menus, a row's "…" (ItemMenu);
+ *  - THE RIGHT-CLICK — `MenuLookContext*`: the SAME rows on the Radix context menu (a row's right-click,
+ *    ItemContextMenu without a host menu);
+ *  - THE PANEL — `MenuLookPanel` / `MenuLookPopoverContent` / `MenuLookPanelItem` /
+ *    `MenuLookPanelControlRow` / `MenuLookPanelHeader` / `MenuLookPanelDisclosure` /
+ *    `MenuLookPanelLabel` / `MenuLookPanelSeparator`: the same panel and rows WITHOUT a Radix menu, for a
+ *    popover or sheet that also holds controls (a theme switch, a Switch, a search list) — the account
+ *    rail's Settings, Organization and account menus and the frame's admin menu.
  * Every measurement lives once, in `menu-look.css` (shipped inside `styles.css`): 280px panel, 30px rows,
  * 13px text on a 1.25 line, 16px icons, 4px/8px row padding, 10px corners. No part takes a `className`.
  *
@@ -83,9 +211,11 @@ declare const MENU_LOOK: {
     readonly width: 280;
     readonly largeWidth: 360;
     readonly rowHeight: 30;
+    readonly sheetRowHeight: 44;
     readonly fontSize: 13;
     readonly lineHeight: 1.25;
     readonly icon: 16;
+    readonly headerMark: 28;
     readonly rowPaddingY: 4;
     readonly rowPaddingX: 8;
     readonly radius: 10;
@@ -100,11 +230,19 @@ declare const MENU_LOOK_CLASS: {
     readonly label: "cm-label";
     readonly hint: "cm-hint";
     readonly current: "cm-current";
+    readonly chevron: "cm-chevron";
     readonly search: "cm-search";
     readonly trail: "cm-trail";
+    readonly badge: "cm-badge";
     readonly shortcut: "cm-shortcut";
+    readonly control: "cm-control";
     readonly divider: "cm-divider";
     readonly sectionLabel: "cm-section-label";
+    readonly header: "cm-header";
+    readonly headerMark: "cm-header-mark";
+    readonly headerText: "cm-header-text";
+    readonly headerTitle: "cm-header-title";
+    readonly headerSubtitle: "cm-header-subtitle";
     readonly danger: "cm-danger";
     readonly dimmed: "cm-dimmed";
 };
@@ -118,39 +256,71 @@ interface MenuLookRowBodyProps {
     /** The glyph (any 16px svg; the slot sizes it). Omitted → no icon column; the text starts the row. */
     icon?: React.ReactNode | undefined;
     label: React.ReactNode;
+    /** Hover text for the label (a long description stays out of the row: no "novels" in menus). */
+    labelTitle?: string | undefined;
     /** A muted second line under the label. */
     description?: React.ReactNode | undefined;
     /** A muted end-of-row hint (a trail, a shortcut word). */
     trail?: React.ReactNode | undefined;
+    /** A small outlined tag at the row's end ("New", "Beta", a count). */
+    badge?: React.ReactNode | undefined;
+    /** The row's key, at its end ("⌘C", "R"). */
+    shortcut?: React.ReactNode | undefined;
     /** The row the person is on now: medium weight and a check at the row's end (never a left gutter). */
     current?: boolean | undefined;
 }
-/** The inside of a row: icon (when given), label (with an optional second line), end hint, current check. */
-declare function MenuLookRowBody({ icon, label, description, trail, current }: MenuLookRowBodyProps): React.ReactElement;
+/** The inside of a row: icon (when given), label (+ second line), end hint, badge, key, current check. */
+declare function MenuLookRowBody({ icon, label, labelTitle, description, trail, badge, shortcut, current }: MenuLookRowBodyProps): React.ReactElement;
 /** A row's classes: the look's row, plus its danger / dimmed marks. */
 declare function menuLookItemClass({ destructive, dimmed }?: {
     destructive?: boolean | undefined;
     dimmed?: boolean | undefined;
 }): string;
-type ContentProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuContent>, "className" | "surface">;
-interface MenuLookContentProps extends ContentProps {
+type DataAttributes = {
+    [dataAttribute: `data-${string}`]: string | undefined;
+};
+interface PanelLookProps {
     /** "standard" (280px, the right-click menu) or "large" (360px, 36px rows). */
     size?: MenuLookSize | undefined;
     density?: MenuLookDensity | undefined;
-    [dataAttribute: `data-${string}`]: string | undefined;
+}
+/**
+ * A submenu panel's fit: `"menu"` (the look's width and padding) or `"content"` — the panel holds a
+ * host's own surface (the Alchemy palette): its width, no padding, and the popover height the surface
+ * reads mapped to the room this menu measured.
+ */
+type MenuLookSubFit = "menu" | "content";
+type ContentProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuContent>, "className" | "surface">;
+interface MenuLookContentProps extends ContentProps, PanelLookProps, DataAttributes {
+    /**
+     * A LONG MENU SAYS SO, IN WORDS (FIX-Q13, production `/agents/all` at 1024x768: a record's "…" hid
+     * its Delete below the fold and read as dead). Given, the panel is a frame that does not scroll, the
+     * rows scroll inside it, and a bar with these words ("More actions below") sits at its bottom edge
+     * whenever there is more below — a press scrolls to the end. Measured: a menu that fits shows nothing.
+     */
+    moreBelowLabel?: string | undefined;
 }
 /** The menu's panel on the Radix dropdown (portalled, capped at the room Radix measured, scrolls past it). */
 declare const MenuLookContent: React.ForwardRefExoticComponent<MenuLookContentProps & React.RefAttributes<HTMLDivElement>>;
 type SubContentProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuSubContent>, "className" | "surface">;
-interface MenuLookSubContentProps extends SubContentProps {
-    size?: MenuLookSize | undefined;
-    density?: MenuLookDensity | undefined;
-    [dataAttribute: `data-${string}`]: string | undefined;
+interface MenuLookSubContentProps extends SubContentProps, PanelLookProps, DataAttributes {
+    fit?: MenuLookSubFit | undefined;
 }
 /** A submenu's panel: the same panel, as wide as the menu it opens from. */
 declare const MenuLookSubContent: React.ForwardRefExoticComponent<MenuLookSubContentProps & React.RefAttributes<HTMLDivElement>>;
+type ContextContentProps = Omit<React.ComponentPropsWithoutRef<typeof ContextMenuContent>, "className">;
+interface MenuLookContextContentProps extends ContextContentProps, PanelLookProps, DataAttributes {
+}
+/** The right-click menu's panel on the Radix context menu: the dropdown's panel, opened at the pointer. */
+declare const MenuLookContextContent: React.ForwardRefExoticComponent<MenuLookContextContentProps & React.RefAttributes<HTMLDivElement>>;
+type ContextSubContentProps = Omit<React.ComponentPropsWithoutRef<typeof ContextMenuSubContent>, "className">;
+interface MenuLookContextSubContentProps extends ContextSubContentProps, PanelLookProps, DataAttributes {
+    fit?: MenuLookSubFit | undefined;
+}
+/** A right-click submenu's panel. */
+declare const MenuLookContextSubContent: React.ForwardRefExoticComponent<MenuLookContextSubContentProps & React.RefAttributes<HTMLDivElement>>;
 type ItemProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, "className" | "children" | "asChild">;
-interface MenuLookItemProps extends ItemProps, MenuLookRowBodyProps {
+interface MenuLookItemProps extends ItemProps, MenuLookRowBodyProps, DataAttributes {
     destructive?: boolean | undefined;
     /** Drawn dimmed (a greyed verb whose reason is the row's tooltip); still focusable. */
     dimmed?: boolean | undefined;
@@ -159,29 +329,142 @@ interface MenuLookItemProps extends ItemProps, MenuLookRowBodyProps {
     target?: string | undefined;
     /** Props for the `<a>` (aria-current, title, onClick). */
     linkProps?: undefined | Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "target" | "className" | "children">;
-    [dataAttribute: `data-${string}`]: string | undefined;
 }
-/** One row: icon, label (+ optional second line), optional end hint; a link when given `href`. */
-declare const MenuLookItem: React.ForwardRefExoticComponent<MenuLookItemProps & React.RefAttributes<HTMLDivElement>>;
-type SubTriggerProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuSubTrigger>, "className" | "children" | "inset">;
-interface MenuLookSubTriggerProps extends SubTriggerProps, MenuLookRowBodyProps {
-    [dataAttribute: `data-${string}`]: string | undefined;
+type SubTriggerProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>, "className" | "children" | "asChild">;
+interface MenuLookSubTriggerProps extends SubTriggerProps, MenuLookRowBodyProps, DataAttributes {
 }
-/** A row that opens a submenu (the chevron is the dropdown's own). */
-declare const MenuLookSubTrigger: React.ForwardRefExoticComponent<MenuLookSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
 type CheckboxProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>, "className" | "children" | "asChild">;
-interface MenuLookCheckboxItemProps extends CheckboxProps, MenuLookRowBodyProps {
-    [dataAttribute: `data-${string}`]: string | undefined;
+interface MenuLookCheckboxItemProps extends CheckboxProps, MenuLookRowBodyProps, DataAttributes {
+}
+type RadioProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>, "className" | "children" | "asChild">;
+interface MenuLookRadioItemProps extends RadioProps, Omit<MenuLookRowBodyProps, "current">, DataAttributes {
+}
+type LabelPrimitiveProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>, "className">;
+interface MenuLookLabelProps extends LabelPrimitiveProps {
+    /** A muted line under the heading (a menu's header: the record it acts on). */
+    description?: React.ReactNode | undefined;
 }
-/** A toggle row: a check in the icon slot while on (the right-click menu's toggle), else its icon — a
- * toggle keeps its column either way, so switching it never moves its label. */
+type SeparatorProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>, "className">;
+declare const MenuLookItem: React.ForwardRefExoticComponent<MenuLookItemProps & React.RefAttributes<HTMLDivElement>>;
+/** Holds a submenu: `MenuLookSub` > `MenuLookSubTrigger` + `MenuLookSubContent`. */
+declare const MenuLookSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const MenuLookSubTrigger: React.ForwardRefExoticComponent<MenuLookSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
 declare const MenuLookCheckboxItem: React.ForwardRefExoticComponent<MenuLookCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
-/** A section heading ("Copy", "Brands", "Pages"). */
-declare const MenuLookLabel: React.ForwardRefExoticComponent<Omit<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref">, "className"> & React.RefAttributes<HTMLDivElement>>;
-/** The line between sections. */
-declare const MenuLookSeparator: React.ForwardRefExoticComponent<Omit<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref">, "className"> & React.RefAttributes<HTMLDivElement>>;
-interface MenuLookSearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "style" | "size" | "type"> {
-    [dataAttribute: `data-${string}`]: string | undefined;
+/** A group of one-of rows (`MenuLookRadioItem`); the host owns `value` / `onValueChange`. */
+declare const MenuLookRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const MenuLookRadioItem: React.ForwardRefExoticComponent<MenuLookRadioItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const MenuLookLabel: React.ForwardRefExoticComponent<MenuLookLabelProps & React.RefAttributes<HTMLDivElement>>;
+declare const MenuLookSeparator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+/** The right-click twins of the dropdown rows — identical rows, the Radix context menu underneath. */
+declare const MenuLookContextItem: React.ForwardRefExoticComponent<MenuLookItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const MenuLookContextSub: React.FC<ContextMenuPrimitive.ContextMenuSubProps>;
+declare const MenuLookContextSubTrigger: React.ForwardRefExoticComponent<MenuLookSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
+declare const MenuLookContextCheckboxItem: React.ForwardRefExoticComponent<MenuLookCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const MenuLookContextRadioGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const MenuLookContextRadioItem: React.ForwardRefExoticComponent<MenuLookRadioItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const MenuLookContextLabel: React.ForwardRefExoticComponent<MenuLookLabelProps & React.RefAttributes<HTMLDivElement>>;
+declare const MenuLookContextSeparator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Where a panel sits: `"floating"` draws the menu's own box (border, popover fill, shadow, 280px) — a
+ * CSS-toggled menu, or a host whose popover draws nothing; `"sheet"` draws no box (a phone's bottom
+ * sheet, or a host popover that is already the box) and gives its rows 44px touch height.
+ */
+type MenuLookPanelSurface = "floating" | "sheet";
+interface MenuLookPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style">, PanelLookProps, DataAttributes {
+    surface?: MenuLookPanelSurface | undefined;
+    /**
+     * `"lg"`: below the large breakpoint (1024px) the floating panel fills the width its host gives it —
+     * a CSS-toggled menu that becomes a bottom-anchored sheet on a phone (AppShell's account menu).
+     */
+    fillBelow?: "lg" | undefined;
+}
+/** The menu's panel as a plain element: its rows are `MenuLookPanel*` parts. Role `menu` by default. */
+declare const MenuLookPanel: React.ForwardRefExoticComponent<MenuLookPanelProps & React.RefAttributes<HTMLDivElement>>;
+type PopoverProps = Omit<React.ComponentPropsWithoutRef<typeof PopoverContent>, "className" | "surface" | "width" | "padding" | "sizing">;
+interface MenuLookPopoverContentProps extends PopoverProps, PanelLookProps, DataAttributes {
+}
+/**
+ * The panel IS the popover: a Radix popover (outside click, Esc, focus return, collision padding)
+ * wearing the menu's box — one element, never a popover box around a menu box. Role `menu`.
+ */
+declare const MenuLookPopoverContent: React.ForwardRefExoticComponent<MenuLookPopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+type LinkComponent = React.ElementType;
+interface PanelRowMarks {
+    destructive?: boolean | undefined;
+    /** Drawn dimmed (a greyed verb whose reason is the row's tooltip); still pressable. */
+    dimmed?: boolean | undefined;
+}
+interface MenuLookPanelItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "style" | "children" | "type">, MenuLookRowBodyProps, PanelRowMarks, DataAttributes {
+    /**
+     * A toggle row's state (a tool that is showing): `aria-pressed`, and while on it reads like the
+     * current row (medium weight, the check at its end).
+     */
+    pressed?: boolean | undefined;
+    /** A link: the row is an anchor (or `as`, the host's link component — Next's Link, an app link). */
+    href?: string | undefined;
+    target?: string | undefined;
+    rel?: string | undefined;
+    /** The link component for `href` (it receives `href`, `className`, `role`, `onClick`, children). */
+    as?: LinkComponent | undefined;
+    /** Extra props for the link component (`prefetch={false}`, `aria-current`). */
+    linkProps?: Record<string, unknown> | undefined;
+}
+/** A panel row: a button, or a link with `href`. Same row as the dropdown's (`cm-item`). */
+declare const MenuLookPanelItem: React.ForwardRefExoticComponent<MenuLookPanelItemProps & React.RefAttributes<HTMLElement>>;
+interface MenuLookPanelControlRowProps extends Omit<React.HTMLAttributes<HTMLElement>, "className" | "style" | "children">, Pick<MenuLookRowBodyProps, "icon" | "label" | "description">, DataAttributes {
+    /** The row's own control at its end: a `Switch`, a `SegmentedControl`, a count. */
+    control: React.ReactNode;
+    /** `"label"` when the whole row should press its control (a Switch); default `"div"`. */
+    as?: "div" | "label" | undefined;
+}
+/**
+ * A row that holds a control instead of being one (Theme: Light | Dark | Device; Standard view with its
+ * Switch): the same icon slot, label and left edge as every row, the control at its END, and no hover
+ * fill (the control answers the pointer, not the row).
+ */
+declare const MenuLookPanelControlRow: React.ForwardRefExoticComponent<MenuLookPanelControlRowProps & React.RefAttributes<HTMLElement>>;
+interface MenuLookPanelHeaderProps extends DataAttributes {
+    /** The 28px mark (an avatar, an organization mark, a colored glyph). */
+    mark: React.ReactNode;
+    title: React.ReactNode;
+    /** One muted line under the title. */
+    subtitle?: React.ReactNode | undefined;
+    /** The header is a door to its own page. */
+    href?: string | undefined;
+    as?: LinkComponent | undefined;
+    linkProps?: Record<string, unknown> | undefined;
+    onClick?: React.MouseEventHandler<HTMLElement> | undefined;
+}
+/**
+ * The row a panel opens with (Settings, the organization, the person): a 28px mark on the rows' left
+ * edge, a title, an optional muted subtitle. With `href` it is a link to its page.
+ */
+declare function MenuLookPanelHeader({ mark, title, subtitle, href, as, linkProps, onClick, ...data }: MenuLookPanelHeaderProps): React.ReactElement;
+interface MenuLookPanelDisclosureProps extends Pick<MenuLookRowBodyProps, "icon" | "label">, DataAttributes {
+    /** Omitted with `pending`: the group's rows are still on their way. */
+    children?: React.ReactNode;
+    /**
+     * The group's row while its rows load (a lazy chunk): the same row and chevron, inert and hidden
+     * from assistive tech, so nothing below it moves when the group arrives (no layout shift).
+     */
+    pending?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    open?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+}
+/**
+ * A folded group of rows ("Quick Access", "Admin"): a row with a down-chevron at its END that opens
+ * the group in place. Closed, its rows are ABSENT (hidden: out of the hit-test tree and the tab order),
+ * never clipped-but-live. Open, they sit on the same left edge as every row — no indent.
+ */
+declare function MenuLookPanelDisclosure({ icon, label, children, pending, defaultOpen, open: openProp, onOpenChange, ...data }: MenuLookPanelDisclosureProps): React.ReactElement;
+/** A panel's section heading. */
+declare function MenuLookPanelLabel({ children, ...data }: {
+    children: React.ReactNode;
+} & DataAttributes): React.ReactElement;
+/** The line between a panel's sections. */
+declare function MenuLookPanelSeparator(): React.ReactElement;
+interface MenuLookSearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "style" | "size" | "type">, DataAttributes {
 }
 /**
  * The menu's search: its own header row (full-bleed, a hairline under it, held at the top while the
@@ -190,4 +473,4 @@ interface MenuLookSearchProps extends Omit<React.InputHTMLAttributes<HTMLInputEl
  */
 declare const MenuLookSearch: React.ForwardRefExoticComponent<MenuLookSearchProps & React.RefAttributes<HTMLInputElement>>;
 
-export { MENU_LOOK, MENU_LOOK_CLASS, MenuLookCheckboxItem, type MenuLookCheckboxItemProps, MenuLookContent, type MenuLookContentProps, type MenuLookDensity, MenuLookIconSlot, MenuLookItem, type MenuLookItemProps, MenuLookLabel, MenuLookRowBody, type MenuLookRowBodyProps, MenuLookSearch, type MenuLookSearchProps, MenuLookSeparator, type MenuLookSize, MenuLookSubContent, type MenuLookSubContentProps, MenuLookSubTrigger, type MenuLookSubTriggerProps, menuLookItemClass };
+export { MENU_LOOK, MENU_LOOK_CLASS, MenuLookCheckboxItem, type MenuLookCheckboxItemProps, MenuLookContent, type MenuLookContentProps, MenuLookContextCheckboxItem, MenuLookContextContent, type MenuLookContextContentProps, MenuLookContextItem, MenuLookContextLabel, MenuLookContextRadioGroup, MenuLookContextRadioItem, MenuLookContextSeparator, MenuLookContextSub, MenuLookContextSubContent, type MenuLookContextSubContentProps, MenuLookContextSubTrigger, type MenuLookDensity, MenuLookIconSlot, MenuLookItem, type MenuLookItemProps, MenuLookLabel, type MenuLookLabelProps, MenuLookPanel, MenuLookPanelControlRow, type MenuLookPanelControlRowProps, MenuLookPanelDisclosure, type MenuLookPanelDisclosureProps, MenuLookPanelHeader, type MenuLookPanelHeaderProps, MenuLookPanelItem, type MenuLookPanelItemProps, MenuLookPanelLabel, type MenuLookPanelProps, MenuLookPanelSeparator, type MenuLookPanelSurface, MenuLookPopoverContent, type MenuLookPopoverContentProps, MenuLookRadioGroup, MenuLookRadioItem, type MenuLookRadioItemProps, MenuLookRowBody, type MenuLookRowBodyProps, MenuLookSearch, type MenuLookSearchProps, MenuLookSeparator, type MenuLookSize, MenuLookSub, MenuLookSubContent, type MenuLookSubContentProps, type MenuLookSubFit, MenuLookSubTrigger, type MenuLookSubTriggerProps, menuLookItemClass };

package/dist/menu-look.js

@@ -1,143 +1,82 @@
 "use client";
 import {
-  DropdownMenuContent,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger
-} from "./chunk-X6ZRHJQP.js";
+  MENU_LOOK,
+  MENU_LOOK_CLASS,
+  MenuLookCheckboxItem,
+  MenuLookContent,
+  MenuLookContextCheckboxItem,
+  MenuLookContextContent,
+  MenuLookContextItem,
+  MenuLookContextLabel,
+  MenuLookContextRadioGroup,
+  MenuLookContextRadioItem,
+  MenuLookContextSeparator,
+  MenuLookContextSub,
+  MenuLookContextSubContent,
+  MenuLookContextSubTrigger,
+  MenuLookIconSlot,
+  MenuLookItem,
+  MenuLookLabel,
+  MenuLookPanel,
+  MenuLookPanelControlRow,
+  MenuLookPanelDisclosure,
+  MenuLookPanelHeader,
+  MenuLookPanelItem,
+  MenuLookPanelLabel,
+  MenuLookPanelSeparator,
+  MenuLookPopoverContent,
+  MenuLookRadioGroup,
+  MenuLookRadioItem,
+  MenuLookRowBody,
+  MenuLookSearch,
+  MenuLookSeparator,
+  MenuLookSub,
+  MenuLookSubContent,
+  MenuLookSubTrigger,
+  menuLookItemClass
+} from "./chunk-L5OACQXS.js";
+import "./chunk-HEFTQUJ5.js";
+import "./chunk-OPF265PU.js";
+import "./chunk-X6ZRHJQP.js";
 import "./chunk-BNXNIN2S.js";
 import "./chunk-FXXSZNER.js";
 import "./chunk-DGNHZBJY.js";
 import "./chunk-XIUVUL2Y.js";
-import {
-  RadixCheckIcon
-} from "./chunk-YCUFQCJW.js";
+import "./chunk-YCUFQCJW.js";
 import "./chunk-IMOOQQOO.js";
 import "./chunk-M6KA5EHN.js";
-
-// src/menu-look.tsx
-import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var MENU_LOOK = {
-  width: 280,
-  largeWidth: 360,
-  rowHeight: 30,
-  fontSize: 13,
-  lineHeight: 1.25,
-  icon: 16,
-  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",
-  search: "cm-search",
-  trail: "cm-trail",
-  shortcut: "cm-shortcut",
-  divider: "cm-divider",
-  sectionLabel: "cm-section-label",
-  danger: "cm-danger",
-  dimmed: "cm-dimmed"
-};
-function MenuLookIconSlot({ children }) {
-  return /* @__PURE__ */ jsx("span", { className: MENU_LOOK_CLASS.iconSlot, children });
-}
-function MenuLookRowBody({ icon, label, description, trail, 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, 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,
-    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}` : ""}`;
-}
-var MenuLookContent = React.forwardRef(function MenuLookContent2({ size = "standard", density = "comfortable", ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    DropdownMenuContent,
-    {
-      ref,
-      surface: "solid",
-      "data-menu-look": "",
-      "data-size": size,
-      "data-density": density,
-      ...props,
-      className: MENU_LOOK_CLASS.panel
-    }
-  );
-});
-var MenuLookSubContent = React.forwardRef(function MenuLookSubContent2({ size = "standard", density = "comfortable", ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    DropdownMenuSubContent,
-    {
-      ref,
-      surface: "solid",
-      "data-menu-look": "",
-      "data-size": size,
-      "data-density": density,
-      ...props,
-      className: MENU_LOOK_CLASS.panel
-    }
-  );
-});
-var MenuLookItem = React.forwardRef(function MenuLookItem2({ icon, label, description, trail, current, destructive, dimmed, href, target, linkProps, ...props }, ref) {
-  const className = menuLookItemClass({ destructive, dimmed });
-  const body = /* @__PURE__ */ jsx(MenuLookRowBody, { icon, label, description, trail, current });
-  const mark = current ? { "data-current": "" } : {};
-  if (href) {
-    return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, { ref, asChild: true, ...props, ...mark, className, children: /* @__PURE__ */ jsx("a", { href, target, rel: target === "_blank" ? "noopener noreferrer" : void 0, ...linkProps, children: body }) });
-  }
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, { ref, ...props, ...mark, className, children: body });
-});
-var MenuLookSubTrigger = React.forwardRef(function MenuLookSubTrigger2({ icon, label, description, trail, ...props }, ref) {
-  return /* @__PURE__ */ jsx(DropdownMenuSubTrigger, { ref, ...props, className: MENU_LOOK_CLASS.item, children: /* @__PURE__ */ jsx(MenuLookRowBody, { icon, label, description, trail }) });
-});
-var MenuLookCheckboxItem = React.forwardRef(function MenuLookCheckboxItem2({ icon, label, description, trail, checked, ...props }, ref) {
-  const on = checked === true;
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.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, description, trail }) });
-});
-var MenuLookLabel = React.forwardRef(function MenuLookLabel2(props, ref) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, { ref, ...props, className: MENU_LOOK_CLASS.sectionLabel });
-});
-var MenuLookSeparator = React.forwardRef(function MenuLookSeparator2(props, ref) {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, { ref, ...props, 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,
   MenuLookCheckboxItem,
   MenuLookContent,
+  MenuLookContextCheckboxItem,
+  MenuLookContextContent,
+  MenuLookContextItem,
+  MenuLookContextLabel,
+  MenuLookContextRadioGroup,
+  MenuLookContextRadioItem,
+  MenuLookContextSeparator,
+  MenuLookContextSub,
+  MenuLookContextSubContent,
+  MenuLookContextSubTrigger,
   MenuLookIconSlot,
   MenuLookItem,
   MenuLookLabel,
+  MenuLookPanel,
+  MenuLookPanelControlRow,
+  MenuLookPanelDisclosure,
+  MenuLookPanelHeader,
+  MenuLookPanelItem,
+  MenuLookPanelLabel,
+  MenuLookPanelSeparator,
+  MenuLookPopoverContent,
+  MenuLookRadioGroup,
+  MenuLookRadioItem,
   MenuLookRowBody,
   MenuLookSearch,
   MenuLookSeparator,
+  MenuLookSub,
   MenuLookSubContent,
   MenuLookSubTrigger,
   menuLookItemClass