@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/components/accordion.d.ts

@@ -1,20 +1,46 @@
+import type * as React from "react";
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
 /**
  * Sections that open and close under their headings.
  *
  * @family Other
- * @when Optional or advanced content in named sections, such as the questions of a help page.
- * @instead One piece of supporting detail is `Disclosure`. A long block cut short is
- * `ExpandableBlock`. The page's main answer is never hidden in one.
- * @behaviour Related sections may stay open together; exclusive ones open one at a time. The
- * trigger's chevron turns when open.
- * @words Each trigger names its topic as a noun phrase or a question a person asks.
- * @access Each trigger is a `button` with `aria-expanded` controlling its panel; headings keep the
- * page's outline.
+ * @when “Use Collapse for optional, advanced, or repetitive content that most users skip on most visits (FAQ, advanced settings, request payload preview).” (https://vercel.com/geist/collapse)
+ * “For top-level structure that every user reads, use page sections with regular headings; collapsing primary content hides what the page is about.” (https://vercel.com/geist/collapse)
+ * Ours: Geist's `CollapseGroup` is `Accordion`: named sections such as a help page's questions or
+ * advanced settings.
+ * @instead “Single Collapse for one optional block. `CollapseGroup` for a related set; switch to `Tabs` when the items are sibling views, not optional drill-downs.” (https://vercel.com/geist/collapse)
+ * Ours: one piece of supporting detail is `Disclosure`, and a single optional block is
+ * `Collapsible`.
+ * @behaviour “Default state is closed unless the first-time visitor must read the content to act.” (https://vercel.com/geist/collapse)
+ * “Inside a `CollapseGroup`, allow only one panel open at a time when items are mutually exclusive; allow multiple when items are independent.” (https://vercel.com/geist/collapse)
+ * “Animate the open/close transition; jump-cuts make the page feel like it teleported.” (https://vercel.com/geist/collapse)
+ * “Don’t nest Collapse more than one level deep. Two-level nesting hides too much and breaks the keyboard tab path.” (https://vercel.com/geist/collapse)
+ * Ours: a flat list divided by 1 px lines, closed at the top and under every section, with no fill, no
+ * card and no hover change. A section is a heading row with the title at the start and a 16 px
+ * chevron at the end that points right while closed and down while open. `size` is `default` (a
+ * 24 px semibold title, an 84 px row) or `small` (a 16 px medium title, a 48 px row). Colour is
+ * neutral only, in every state. Exclusive sections open one at a time and the open one can be
+ * closed; independent ones stay open together with `multiple`. The panel animates its height, and
+ * under reduced motion it jumps. An accordion never nests in another.
+ * @words “Heading is Title Case and names the topic, not the action (`Advanced Settings`, not `Show Advanced Settings`).” (https://vercel.com/geist/collapse)
+ * “Body is sentence case prose with normal section formatting; treat the panel as a small page, not a tooltip.” (https://vercel.com/geist/collapse)
+ * “Don’t put primary destructive actions inside a closed Collapse; the user has to click twice to reach the warning.” (https://vercel.com/geist/collapse)
+ * Ours: the trigger is required and names its topic as a noun phrase or a question a person asks, in
+ * sentence case, not Title Case: *Advanced settings*, never *Show advanced settings*.
+ * @access “The trigger is a `<button>` with `aria-expanded` that flips on toggle and `aria-controls` pointing at the panel id.” (https://vercel.com/geist/collapse)
+ * “Enter and Space toggle. Don’t bind any other key globally; arrow keys move focus inside the panel content.” (https://vercel.com/geist/collapse)
+ * “Render the panel content in the DOM when closed (with `hidden` or visibility) so search and find-in-page still hit it; lazy-render only for expensive content.” (https://vercel.com/geist/collapse)
+ * Ours: a closed panel stays in the page, hidden until found, so find-in-page opens it; pass
+ * `hiddenUntilFound={false}` on a heavy panel to mount it only when open. Headings keep the page's
+ * outline.
  */
-declare function Accordion({ className, ...props }: AccordionPrimitive.Root.Props): import("react").JSX.Element;
-declare function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props): import("react").JSX.Element;
-declare function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props): import("react").JSX.Element;
-declare function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props): import("react").JSX.Element;
+declare function Accordion({ className, size, ...props }: AccordionPrimitive.Root.Props & {
+    size?: "default" | "small";
+}): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props): React.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: Omit<AccordionPrimitive.Trigger.Props, "children"> & {
+    children: React.ReactNode;
+}): React.JSX.Element;
+declare function AccordionContent({ className, children, hiddenUntilFound, ...props }: AccordionPrimitive.Panel.Props): React.JSX.Element;
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
 //# sourceMappingURL=accordion.d.ts.map

package/dist/components/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAK3E;;;;;;;;;;;;GAYG;AACH,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,KAAK,+BAQxE;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,KAAK,+BAQ5E;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,OAAO,CAAC,KAAK,+BAmB5F;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,KAAK,CAAC,KAAK,+BAiB1F;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAK3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,IAAI,CAAC,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;CAAE,qBAShE;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,KAAK,qBAQ5E;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,KAAK,EAAE,UAAU,CAAC,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAmBpF;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,gBAAuB,EACvB,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,KAAK,CAAC,KAAK,qBAkBhC;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/accordion.js

@@ -1,30 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { ChevronRightIcon } from "lucide-react";
 import { cn } from "../lib/utils.js";
-import { ChevronDownIcon } from "lucide-react";
 /**
  * Sections that open and close under their headings.
  *
  * @family Other
- * @when Optional or advanced content in named sections, such as the questions of a help page.
- * @instead One piece of supporting detail is `Disclosure`. A long block cut short is
- * `ExpandableBlock`. The page's main answer is never hidden in one.
- * @behaviour Related sections may stay open together; exclusive ones open one at a time. The
- * trigger's chevron turns when open.
- * @words Each trigger names its topic as a noun phrase or a question a person asks.
- * @access Each trigger is a `button` with `aria-expanded` controlling its panel; headings keep the
- * page's outline.
+ * @when “Use Collapse for optional, advanced, or repetitive content that most users skip on most visits (FAQ, advanced settings, request payload preview).” (https://vercel.com/geist/collapse)
+ * “For top-level structure that every user reads, use page sections with regular headings; collapsing primary content hides what the page is about.” (https://vercel.com/geist/collapse)
+ * Ours: Geist's `CollapseGroup` is `Accordion`: named sections such as a help page's questions or
+ * advanced settings.
+ * @instead “Single Collapse for one optional block. `CollapseGroup` for a related set; switch to `Tabs` when the items are sibling views, not optional drill-downs.” (https://vercel.com/geist/collapse)
+ * Ours: one piece of supporting detail is `Disclosure`, and a single optional block is
+ * `Collapsible`.
+ * @behaviour “Default state is closed unless the first-time visitor must read the content to act.” (https://vercel.com/geist/collapse)
+ * “Inside a `CollapseGroup`, allow only one panel open at a time when items are mutually exclusive; allow multiple when items are independent.” (https://vercel.com/geist/collapse)
+ * “Animate the open/close transition; jump-cuts make the page feel like it teleported.” (https://vercel.com/geist/collapse)
+ * “Don’t nest Collapse more than one level deep. Two-level nesting hides too much and breaks the keyboard tab path.” (https://vercel.com/geist/collapse)
+ * Ours: a flat list divided by 1 px lines, closed at the top and under every section, with no fill, no
+ * card and no hover change. A section is a heading row with the title at the start and a 16 px
+ * chevron at the end that points right while closed and down while open. `size` is `default` (a
+ * 24 px semibold title, an 84 px row) or `small` (a 16 px medium title, a 48 px row). Colour is
+ * neutral only, in every state. Exclusive sections open one at a time and the open one can be
+ * closed; independent ones stay open together with `multiple`. The panel animates its height, and
+ * under reduced motion it jumps. An accordion never nests in another.
+ * @words “Heading is Title Case and names the topic, not the action (`Advanced Settings`, not `Show Advanced Settings`).” (https://vercel.com/geist/collapse)
+ * “Body is sentence case prose with normal section formatting; treat the panel as a small page, not a tooltip.” (https://vercel.com/geist/collapse)
+ * “Don’t put primary destructive actions inside a closed Collapse; the user has to click twice to reach the warning.” (https://vercel.com/geist/collapse)
+ * Ours: the trigger is required and names its topic as a noun phrase or a question a person asks, in
+ * sentence case, not Title Case: *Advanced settings*, never *Show advanced settings*.
+ * @access “The trigger is a `<button>` with `aria-expanded` that flips on toggle and `aria-controls` pointing at the panel id.” (https://vercel.com/geist/collapse)
+ * “Enter and Space toggle. Don’t bind any other key globally; arrow keys move focus inside the panel content.” (https://vercel.com/geist/collapse)
+ * “Render the panel content in the DOM when closed (with `hidden` or visibility) so search and find-in-page still hit it; lazy-render only for expensive content.” (https://vercel.com/geist/collapse)
+ * Ours: a closed panel stays in the page, hidden until found, so find-in-page opens it; pass
+ * `hiddenUntilFound={false}` on a heavy panel to mount it only when open. Headings keep the page's
+ * outline.
  */
-function Accordion({ className, ...props }) {
-    return (_jsx(AccordionPrimitive.Root, { "data-slot": "accordion", className: cn("flex w-full flex-col", className), ...props }));
+function Accordion({ className, size = "default", ...props }) {
+    return (_jsx(AccordionPrimitive.Root, { "data-slot": "accordion", "data-size": size, className: cn("group/accordion flex w-full flex-col border-t", className), ...props }));
 }
 function AccordionItem({ className, ...props }) {
-    return (_jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn("not-last:border-b", className), ...props }));
+    return (_jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn("border-b", className), ...props }));
 }
 function AccordionTrigger({ className, children, ...props }) {
-    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn("nc-transition-paint group/accordion-trigger relative flex min-h-touch-target flex-1 items-start justify-between rounded-sm border border-transparent py-2.5 text-left text-sm font-medium hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className), ...props, children: [children, _jsx(ChevronDownIcon, { "data-slot": "accordion-trigger-icon", className: "nc-transition-transform pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:rotate-180" })] }) }));
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn("nc-transition-paint group/accordion-trigger flex min-h-touch-target flex-1 items-center justify-between gap-4 rounded-sm py-6.5 text-left text-heading-md aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[size=small]/accordion:py-3 group-data-[size=small]/accordion:text-body-md group-data-[size=small]/accordion:font-medium [@media(hover:hover)_and_(pointer:fine)]:min-h-0", className), ...props, children: [children, _jsx(ChevronRightIcon, { "data-slot": "accordion-trigger-icon", className: "nc-transition-transform pointer-events-none size-4 shrink-0 group-aria-expanded/accordion-trigger:rotate-90" })] }) }));
 }
-function AccordionContent({ className, children, ...props }) {
-    return (_jsx(AccordionPrimitive.Panel, { "data-slot": "accordion-content", className: "overflow-hidden text-sm", ...props, children: _jsx("div", { className: cn("h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className), children: children }) }));
+function AccordionContent({ className, children, hiddenUntilFound = true, ...props }) {
+    return (_jsx(AccordionPrimitive.Panel, { "data-slot": "accordion-content", className: "h-(--accordion-panel-height) overflow-hidden text-body-md transition-[height] duration-[var(--nc-duration-open)] ease-[var(--nc-ease-out-strong)] data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none", hiddenUntilFound: hiddenUntilFound, ...props, children: _jsx("div", { className: cn("pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className), children: children }) }));
 }
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/components/account-menu.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, ReactElement, ReactNode } from "react";
+import type { ComponentProps, ReactNode } from "react";
 import type { MenuCommand } from "./action-menu.js";
 import { type MenuChoiceRowProps } from "./menu-choice-row.js";
 import type { PageCommandAction } from "./page-actions.js";
@@ -16,26 +16,29 @@ export type AccountIdentity = {
     /** The name a person recognises as theirs. */
     name: string;
     /**
-     * Under the name: an email, the scope they are working in, a notice. The
-     * trigger, one sidebar row high, shows the first; the menu's header shows
-     * them all.
+     * Under the name in the menu's header: an email, the scope they are working
+     * in. The trigger shows none of them.
      */
     lines?: ReactNode[];
+    /**
+     * A condition the person must see without opening the menu, such as the
+     * account being suspended: the trigger shows it under the name, and the
+     * menu's header shows it first.
+     */
+    notice?: ReactNode;
 };
 export type AccountMenuIdentityProps = {
     className?: string;
     identity: AccountIdentity;
     /** The picture alone, for a navigation rail drawn too narrow for the name. */
     pictureOnly?: boolean;
-    /** `lg` is the menu's own header; `default` is the trigger. */
-    size?: "default" | "lg";
 };
 /**
- * The account's avatar beside its name and lines. The trigger shows it with the
- * first line, and the menu opens on it with every line, so a person sees the
- * same block in both places.
+ * Whose account it is at the sidebar's foot, as Vercel draws it: the picture,
+ * the name with any notice under it, and the three dots at the end. The
+ * account menu's trigger draws it, and so does a sample of the Portal's column.
  */
-export declare function AccountMenuIdentity({ className, identity, pictureOnly, size, }: AccountMenuIdentityProps): import("react").JSX.Element;
+export declare function AccountMenuIdentity({ className, identity, pictureOnly, }: AccountMenuIdentityProps): import("react").JSX.Element;
 export type AccountMenuCommand = MenuCommand & {
     /** A reading at the row's end: "62% left". */
     value?: ReactNode;
@@ -43,7 +46,6 @@ export type AccountMenuCommand = MenuCommand & {
 /** A product's own exclusive setting, in a submenu: Alveare's presence. */
 export type AccountMenuChoice = {
     label: string;
-    icon: ReactElement;
     value: string;
     /** Each option's name, its mark, and one muted line under the name when the name alone does not say what it is. */
     options: readonly {
@@ -75,19 +77,17 @@ export type AccountMenuProps = {
     };
     /** Applies at once and keeps the menu open. */
     theme: ComponentProps<typeof ThemeModeMenu>;
-    language?: MenuChoiceRowProps<string> & {
-        icon: ReactElement;
-    };
+    language?: MenuChoiceRowProps<string>;
     choices?: readonly AccountMenuChoice[];
     commands?: readonly AccountMenuCommand[];
+    /** Where the product's commands stand: first, above Theme, or after its choices. */
+    commandsAt?: "end" | "start";
     signOut: AccountMenuSignOut;
     /**
      * The trigger shows the picture alone, for a navigation rail drawn too narrow
      * for the name; the menu still opens on the whole identity.
      */
     pictureOnly?: boolean;
-    /** The element the trigger renders as, when a shell has its own button. */
-    triggerRender?: ReactElement;
     align?: "center" | "end" | "start";
     side?: "bottom" | "left" | "right" | "top";
     /** Runs when the menu opens or closes, for a shell that records where it was. */
@@ -100,9 +100,9 @@ export type AccountMenuProps = {
  * @family Menus
  * @when The account at the sidebar's foot in the Portal, Nadia and Alveare: the gear to the account's settings, Theme, Language, a product's own settings, its commands, and Sign out.
  * @instead A record's or a page's commands are an ActionMenu; a setting with more than a few options or one that needs a Save belongs on a SettingsPage.
- * @behaviour The menu opens upward on the identity. In order: the gear, Theme, Language, the product's choices as submenus, its commands with any reading at their end, and Sign out last in the error colour. Theme and Language apply at once and keep the menu open. While signing out, Sign out says its pending word, the menu stays open and the trigger is locked; a failure shows under it. A Sign out that `confirms` closes the menu instead, for the product's own confirmation.
+ * @behaviour The menu opens 6 px above its trigger, 288 px wide, as Vercel's does: a header of the name and every line under it with the gear at its end, one divider, then 36 px rows, each its label leading and its icon or control trailing: Theme and Language as small round pills, the product's choices as submenus, its commands with any reading before their icon, and Sign out last. Theme and Language apply at once and keep the menu open. While signing out, Sign out says its pending word, the menu stays open and the trigger is locked; a failure shows under it. A Sign out that `confirms` closes the menu instead, for the product's own confirmation.
  * @words The menu's name ("Account"), the person's name and lines, then each row's noun or verb from the product's catalogue: "Theme", "Language", "Usage", "Sign out" and "Signing out".
  * @access The trigger and the menu are named "{label}: {name}"; the gear carries its label; the pending sign-out is aria-busy and announced through a status; a failure is an alert.
  */
-export declare function AccountMenu({ align, choices, commands, identity, label, language, onOpenChange, pictureOnly, settings, side, signOut, theme, triggerRender, }: AccountMenuProps): import("react").JSX.Element;
+export declare function AccountMenu({ align, choices, commands, commandsAt, identity, label, language, onOpenChange, pictureOnly, settings, side, signOut, theme, }: AccountMenuProps): import("react").JSX.Element;
 //# sourceMappingURL=account-menu.d.ts.map

package/dist/components/account-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"account-menu.d.ts","sourceRoot":"","sources":["../../src/components/account-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAkB5D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AACtF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAIjE,2FAA2F;AAC3F,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,eAAe,CAAC;IAC1B,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACzB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,QAAQ,EACR,WAAmB,EACnB,IAAgB,GACjB,EAAE,wBAAwB,+BA4B1B;AAED,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,2EAA2E;AAC3E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,mHAAmH;IACnH,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,SAAS,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACxF,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACjC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,eAAe,CAAC;IAC1B,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,iBAAiB,GAAG;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,+CAA+C;IAC/C,KAAK,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,GAAG;QAAE,IAAI,EAAE,YAAY,CAAA;KAAE,CAAC;IAC/D,OAAO,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACzC,OAAO,EAAE,kBAAkB,CAAC;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAC;IACnC,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;IAC3C,iFAAiF;IACjF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAe,EACf,OAAY,EACZ,QAAa,EACb,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,WAAmB,EACnB,QAAQ,EACR,IAAY,EACZ,OAAO,EACP,KAAK,EACL,aAAa,GACd,EAAE,gBAAgB,+BAgGlB"}
+{"version":3,"file":"account-menu.d.ts","sourceRoot":"","sources":["../../src/components/account-menu.tsx"],"names":[],"mappings":"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"}

package/dist/components/account-menu.js

@@ -1,22 +1,22 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ChevronsUpDown, LogOut, Settings, UserRound } from "lucide-react";
+import { Ellipsis, LogOut, Settings, UserRound } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
-import { DropdownMenu, DropdownMenuCommand, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./dropdown-menu.js";
 import { FieldError } from "./field.js";
 import { MenuChoiceRow } from "./menu-choice-row.js";
 import { PendingLabel } from "./pending-label.js";
 import { bodyBeyondTitle } from "./product-message.js";
 import { ThemeModeMenu } from "./theme-mode-switcher.js";
-import { MenuCommandRow, menuItemAction } from "../internal/record-menu-items.js";
+import { menuItemAction } from "../internal/record-menu-items.js";
 import { cn } from "../lib/utils.js";
 /**
- * The account's avatar beside its name and lines. The trigger shows it with the
- * first line, and the menu opens on it with every line, so a person sees the
- * same block in both places.
+ * Whose account it is at the sidebar's foot, as Vercel draws it: the picture,
+ * the name with any notice under it, and the three dots at the end. The
+ * account menu's trigger draws it, and so does a sample of the Portal's column.
  */
-export function AccountMenuIdentity({ className, identity, pictureOnly = false, size = "default", }) {
-    return (_jsxs("span", { className: cn("flex min-w-0 items-center gap-2 text-left text-sm", className), "data-slot": "account-menu-identity", children: [_jsxs(Avatar, { "aria-hidden": "true", size: size === "lg" ? "default" : "sm", children: [identity.image ? _jsx(AvatarImage, { alt: "", src: identity.image }) : null, _jsx(AvatarFallback, { children: identity.initials || _jsx(UserRound, { "aria-hidden": "true", className: "size-3/5" }) })] }), pictureOnly ? null : (_jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5 leading-tight", children: [_jsx("span", { className: "truncate font-medium text-foreground", children: identity.name }), (size === "lg" ? identity.lines : identity.lines?.slice(0, 1))?.map((line, index) => (_jsx("span", { className: "truncate text-xs font-normal text-muted-foreground", children: line }, index)))] }))] }));
+export function AccountMenuIdentity({ className, identity, pictureOnly = false, }) {
+    return (_jsxs("span", { className: cn("flex min-w-0 items-center gap-2 text-left text-sm", !pictureOnly && "flex-1", className), "data-slot": "account-menu-identity", children: [_jsxs(Avatar, { className: "size-5", decorative: true, size: "sm", children: [identity.image ? _jsx(AvatarImage, { alt: "", src: identity.image }) : null, _jsx(AvatarFallback, { children: identity.initials || _jsx(UserRound, { "aria-hidden": "true", className: "size-3/5" }) })] }), pictureOnly ? null : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "grid min-w-0 flex-1 leading-tight", children: [_jsx("span", { className: "truncate text-foreground", children: identity.name }), identity.notice ? _jsx("span", { className: "truncate text-xs", children: identity.notice }) : null] }), _jsx("span", { "aria-hidden": "true", className: "grid size-6 shrink-0 place-content-center rounded-full border border-border bg-popover text-muted-foreground transition-colors group-hover/account:text-foreground group-data-[popup-open]/account:text-foreground", children: _jsx(Ellipsis, { className: "size-3" }) })] }))] }));
 }
 /**
  * The account menu at the foot of a shell's navigation: whose account it is,
@@ -25,20 +25,24 @@ export function AccountMenuIdentity({ className, identity, pictureOnly = false,
  * @family Menus
  * @when The account at the sidebar's foot in the Portal, Nadia and Alveare: the gear to the account's settings, Theme, Language, a product's own settings, its commands, and Sign out.
  * @instead A record's or a page's commands are an ActionMenu; a setting with more than a few options or one that needs a Save belongs on a SettingsPage.
- * @behaviour The menu opens upward on the identity. In order: the gear, Theme, Language, the product's choices as submenus, its commands with any reading at their end, and Sign out last in the error colour. Theme and Language apply at once and keep the menu open. While signing out, Sign out says its pending word, the menu stays open and the trigger is locked; a failure shows under it. A Sign out that `confirms` closes the menu instead, for the product's own confirmation.
+ * @behaviour The menu opens 6 px above its trigger, 288 px wide, as Vercel's does: a header of the name and every line under it with the gear at its end, one divider, then 36 px rows, each its label leading and its icon or control trailing: Theme and Language as small round pills, the product's choices as submenus, its commands with any reading before their icon, and Sign out last. Theme and Language apply at once and keep the menu open. While signing out, Sign out says its pending word, the menu stays open and the trigger is locked; a failure shows under it. A Sign out that `confirms` closes the menu instead, for the product's own confirmation.
  * @words The menu's name ("Account"), the person's name and lines, then each row's noun or verb from the product's catalogue: "Theme", "Language", "Usage", "Sign out" and "Signing out".
  * @access The trigger and the menu are named "{label}: {name}"; the gear carries its label; the pending sign-out is aria-busy and announced through a status; a failure is an alert.
  */
-export function AccountMenu({ align = "start", choices = [], commands = [], identity, label, language, onOpenChange, pictureOnly = false, settings, side = "top", signOut, theme, triggerRender, }) {
+export function AccountMenu({ align = "start", choices = [], commands = [], commandsAt = "end", identity, label, language, onOpenChange, pictureOnly = false, settings, side = "top", signOut, theme, }) {
     const name = `${label}: ${identity.name}`;
-    return (_jsxs(DropdownMenu, { onOpenChange: onOpenChange, children: [_jsxs(DropdownMenuTrigger, { "aria-label": name, disabled: signOut.pending, render: triggerRender ?? (_jsx("button", { className: "flex w-full min-w-0 items-center gap-2 rounded-sm p-1.5 text-left outline-none hover:bg-accent focus-visible:nc-focus-outline focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-[popup-open]:bg-accent", type: "button" })), children: [_jsx(AccountMenuIdentity, { className: pictureOnly ? undefined : "flex-1", identity: identity, pictureOnly: pictureOnly }), pictureOnly ? null : (_jsx(ChevronsUpDown, { "aria-hidden": "true", className: "ml-auto size-4 shrink-0 text-muted-foreground" }))] }), _jsxs(DropdownMenuContent, { align: align, "aria-label": name, className: "w-72 max-w-[calc(100vw-2rem)]", density: "comfortable", side: side, sideOffset: 8, children: [_jsxs(DropdownMenuGroup, { className: "flex min-w-0 items-center gap-1 pr-1.5", children: [_jsx(AccountMenuIdentity, { className: "min-w-0 flex-1 px-2 py-2", identity: identity, size: "lg" }), settings ? (_jsx(DropdownMenuItem, { "aria-label": settings.label, iconOnly: true, ...menuItemAction(settings), children: _jsx(Settings, { "aria-hidden": "true" }) })) : null] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(ThemeModeMenu, { ...theme }), language ? _jsx(MenuChoiceRow, { ...language }) : null, choices.map((choice) => (_jsx(AccountMenuChoiceRow, { choice: choice }, choice.label)))] }), commands.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuGroup, { children: commands.map(({ value, ...command }) => (_jsx(MenuCommandRow, { command: command, value: value }, command.label))) })] })) : null, _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuCommand, { "aria-busy": signOut.pending || undefined, closeOnClick: signOut.confirms === true, disabled: signOut.pending, icon: _jsx(LogOut, {}), onClick: () => {
+    const commandRows = commands.map(({ value, ...command }) => (_jsx(AccountMenuRow, { "aria-label": command.accessibleName, disabled: command.locked === true || command.disabledReason !== undefined, icon: command.icon, reason: command.locked ? command.reason : command.disabledReason, value: value, ...menuItemAction(command), children: command.label }, command.label)));
+    return (_jsxs(DropdownMenu, { onOpenChange: onOpenChange, children: [_jsx(DropdownMenuTrigger, { "aria-label": name, className: cn("group/account flex min-h-9 min-w-0 items-center rounded-full outline-none focus-visible:nc-focus-outline focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50", pictureOnly ? "justify-center" : "w-full pr-2 pl-2.5"), disabled: signOut.pending, children: _jsx(AccountMenuIdentity, { identity: identity, pictureOnly: pictureOnly }) }), _jsxs(DropdownMenuContent, { align: align, "aria-label": name, className: "w-72 max-w-[calc(100vw-2rem)] p-1.5", density: "comfortable", side: side, sideOffset: 6, children: [_jsxs(DropdownMenuGroup, { className: "flex min-w-0 items-center gap-2 py-1.5 pl-2", "data-slot": "account-menu-header", children: [_jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5 text-left", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: identity.name }), identity.notice ? _jsx("span", { className: "text-xs", children: identity.notice }) : null, identity.lines?.map((line, index) => (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: line }, index)))] }), settings ? (_jsx(DropdownMenuItem, { "aria-label": settings.label, className: "text-muted-foreground", iconOnly: true, ...menuItemAction(settings), children: _jsx(Settings, { "aria-hidden": "true" }) })) : null] }), _jsx(DropdownMenuSeparator, { className: "-mx-1.5 my-1.5" }), _jsxs(DropdownMenuGroup, { children: [commandsAt === "start" ? commandRows : null, _jsx(ThemeModeMenu, { ...theme }), language ? _jsx(MenuChoiceRow, { ...language }) : null, choices.map((choice) => (_jsx(AccountMenuChoiceRow, { choice: choice }, choice.label))), commandsAt === "end" ? commandRows : null, _jsx(AccountMenuRow, { "aria-busy": signOut.pending || undefined, closeOnClick: signOut.confirms === true, disabled: signOut.pending, icon: _jsx(LogOut, {}), onClick: () => {
                                     if (!signOut.pending)
                                         signOut.onSignOut();
-                                }, variant: "destructive", children: _jsx(PendingLabel, { pending: signOut.pending, pendingLabel: signOut.pendingLabel, children: signOut.label }) }), signOut.pending ? (_jsx("span", { className: "sr-only", role: "status", children: signOut.pendingLabel })) : null, signOut.failure ? (_jsxs(FieldError, { className: "mx-3 mb-1 break-words", "data-message-code": signOut.failure.code, children: [_jsx("span", { className: "block font-medium", children: signOut.failure.title }), bodyBeyondTitle(signOut.failure) ? (_jsx("span", { className: "block", children: bodyBeyondTitle(signOut.failure) })) : null] })) : null] })] })] }));
+                                }, children: _jsx(PendingLabel, { pending: signOut.pending, pendingLabel: signOut.pendingLabel, children: signOut.label }) }), signOut.pending ? (_jsx("span", { className: "sr-only", role: "status", children: signOut.pendingLabel })) : null, signOut.failure ? (_jsxs(FieldError, { className: "mx-2 mb-1 break-words", "data-message-code": signOut.failure.code, children: [_jsx("span", { className: "block font-medium", children: signOut.failure.title }), bodyBeyondTitle(signOut.failure) ? (_jsx("span", { className: "block", children: bodyBeyondTitle(signOut.failure) })) : null] })) : null] })] })] }));
+}
+function AccountMenuRow({ children, icon, reason, value, ...props }) {
+    return (_jsxs(DropdownMenuItem, { ...props, className: "min-h-9 gap-3 px-2 py-1.5 group-data-[density=comfortable]/menu:px-2 group-data-[density=comfortable]/menu:py-1.5 [@media(hover:hover)_and_(pointer:fine)]:min-h-9", children: [_jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5", children: [_jsx("span", { className: "truncate", children: children }), reason ? _jsx("span", { className: "text-xs text-muted-foreground", children: reason }) : null] }), value === undefined ? null : " ", value === undefined ? null : (_jsx(DropdownMenuShortcut, { className: "ml-0", children: value })), _jsx("span", { "aria-hidden": "true", className: "flex shrink-0 items-center text-muted-foreground", children: icon })] }));
 }
 function AccountMenuChoiceRow({ choice }) {
     const current = choice.options.find((option) => option.value === choice.value);
-    return (_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { className: "gap-2.5", children: [_jsx("span", { "aria-hidden": "true", className: "flex shrink-0 items-center text-muted-foreground", children: choice.icon }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: choice.label }), current ? (_jsx(DropdownMenuShortcut, { className: "ml-0", children: current.label })) : null] }), _jsx(DropdownMenuSubContent, { children: _jsx(DropdownMenuRadioGroup, { "aria-label": choice.label, onValueChange: (next) => {
+    return (_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { className: "min-h-9 gap-3 px-2 py-1.5 group-data-[density=comfortable]/menu:px-2 group-data-[density=comfortable]/menu:py-1.5 [@media(hover:hover)_and_(pointer:fine)]:min-h-9", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: choice.label }), current ? (_jsx(DropdownMenuShortcut, { className: "ml-0", children: current.label })) : null] }), _jsx(DropdownMenuSubContent, { children: _jsx(DropdownMenuRadioGroup, { "aria-label": choice.label, onValueChange: (next) => {
                         const selected = choice.options.find((option) => option.value === next);
                         if (selected)
                             choice.onValueChange(selected.value);

package/dist/components/action-menu.d.ts

@@ -1,20 +1,21 @@
-import type { ComponentProps, ReactElement, ReactNode } from "react";
-import { DropdownMenuContent } from "./dropdown-menu.js";
-import type { PageCommandAction } from "./page-actions.js";
-/** One command in a menu: its icon first, then its label. */
-export type MenuCommand = PageCommandAction & {
+import type { ComponentProps, ReactElement } from "react";
+import { DropdownMenuContent, type DropdownMenuCommandState } from "./dropdown-menu.js";
+import type { PageCommandAction, PendingWord } from "./page-actions.js";
+/**
+ * One command in a menu: its icon first, then its label. It is runnable, or it cannot run now and says why
+ * (`disabledReason`), or the person may not run it (`locked`, with its `reason`), or it is running (`pending`,
+ * which always comes with its `pendingLabel`, the label's -ing form: "Removing mailbox").
+ */
+export type MenuCommand = PageCommandAction & PendingWord & {
     label: string;
     icon: ReactElement;
     /** Read instead of the label when the label alone does not name the target: "Let Sofia use Gmail". */
     accessibleName?: string | undefined;
     /** Drawn last, after the divider, in the error colour. */
     destructive?: boolean | undefined;
-    disabled?: boolean | undefined;
     /** The value it acts on, in mono under its label: the address Copy address copies. */
     detail?: string | undefined;
-    /** Why it cannot run now, read under its label; a disabled command keeps it visible. */
-    reason?: ReactNode;
-};
+} & DropdownMenuCommandState;
 /** A record's menu: whose it is, and what can be done to it. */
 export type RecordMenu = {
     /** The trigger's accessible name, from the catalogue: "More for pec@acme.it". */
@@ -38,11 +39,11 @@ export type ActionMenuProps = RecordMenu & {
  * A record's three dots: the menu of its secondary commands, headed by the record's name.
  *
  * @family Menus
- * @when The secondary commands of one record from a visible trigger: the row's three dots, or the page's, which comes last in the title row.
- * @instead For a record's main task use a visible button (Edit opens the row). For finding across everything use `CommandDialog`. For a value to choose use `Select`. For right-click use the mirror, `ActionContextMenu`.
- * @behaviour Ghost 36 px trigger that keeps its fill while open. The menu opens aligned to the trigger's end, 6 px below: the record's name, the commands with their icons first and the value one acts on in mono under it, then the destructive ones after a divider in the error colour. Typeahead, arrows, Escape returns focus. A disabled command stays, greyed, with its reason under it. Nothing renders with no command.
- * @words The trigger reads "More for {record}"; the header is the record's name. Commands are verb and noun in sentence case, "Remove mailbox", never a bare "Delete". About ten at most; rows wrap, never truncate.
- * @access The trigger is a ghost icon button named by `label`, `aria-expanded` while open. `role="menu"`, items `menuitem` in a group named by the record; the value a command acts on and its reason are the item's description; icons hidden.
+ * @when "An overflow menu triggered by a three-dot icon that reveals additional actions in a dropdown." (https://vercel.com/geist/dots-menu) "Use Menu for a discoverable trigger that opens a list of actions on a single resource (a dots menu on a row, a dropdown on a primary entity)." (https://vercel.com/geist/menu) Ours: the secondary commands of one record from a visible trigger: the row's three dots, or the page's, which comes last in the title row. A record's one main task is a visible button beside the dots; one non-destructive command that can run, alone, is drawn as a button by `RecordList` and `PageActions`, never as a menu; one that cannot run or is locked stays in the menu so its reason is read.
+ * @instead "For right-click or long-press on a row, use `ContextMenu`. For global commands behind `⌘K`, use `CommandMenu`. For two related primary actions, use a split button rather than burying the secondary action." (https://vercel.com/geist/menu) Ours: for a record's main task use a visible button (Edit opens the row). For finding across everything use `CommandDialog`. For a value to choose use `Select`. For right-click use the mirror, `ActionContextMenu`.
+ * @behaviour "Open on click, not hover; hover-open menus collide with screen readers and trackpad scrolls." (https://vercel.com/geist/menu) "Position auto-flips based on window bounds; don’t hardcode a side that clips on narrow viewports." (https://vercel.com/geist/menu) "Close on item activation, Escape, and outside-click. Don’t auto-close on a hover-out." (https://vercel.com/geist/menu) "Use `MenuItemLocked` for permission-gated actions so the lock icon and disabled state explain why the row is inert." (https://vercel.com/geist/menu) Ours: that is `locked` with its `reason`, in the same tooltip. The trigger keeps its fill while open. The menu opens 10 px under the trigger, aligned to its end: the record's name, the commands with their icons first and the value one acts on in mono under it, then the destructive ones after a divider in the error colour. A command that cannot run now takes `disabledReason`: it stays in place, 36 px like the rest, with its text muted, never dimmed, and says why in a tooltip on the row; a destructive one is muted, not red; a running one takes `pending` and `pendingLabel`. Nothing renders with no command.
+ * @words "Item children are Title Case `Verb + Noun` (`Rename Project`, `Duplicate Deployment`). Bare verbs like `Rename` or `Edit` are wrong outside obvious single-object context." (https://vercel.com/geist/menu) "End an item with `…` only when activating it opens a follow-up dialog (`Rename…`, `Transfer to Team…`)." (https://vercel.com/geist/menu) "Group destructive items at the bottom, separated by a divider, and keep the destructive copy as `Verb + Noun` (`Delete Project`, never bare `Delete`)." (https://vercel.com/geist/menu) "Cap a Menu around 10 items. Past that, group with `MenuSection` or move secondary actions to a settings page." (https://vercel.com/geist/menu) Ours: sentence case, "Remove mailbox", not Title Case. The trigger reads "More for {record}"; the header is the record's name. Rows wrap, never truncate.
+ * @access "Typeahead jumps to the next item whose label starts with the typed character; keep the visible label first so typeahead matches what the user sees." (https://vercel.com/geist/menu) "Return focus to the trigger on close so keyboard users keep their place in the row." (https://vercel.com/geist/menu) Ours: the trigger is a ghost icon button named by `label`, which is required, `aria-expanded` while open. `role="menu"`, items `menuitem` in a group named by `record`, which is required; every command requires its `icon`. The value a command acts on and its reason are the item's description; icons hidden.
  */
 export declare function ActionMenu({ label, record, commands, triggerId, open, onOpenChange, modal, side, finalFocus, }: ActionMenuProps): import("react").JSX.Element | null;
 /** The same commands on a right-click, Shift+F10 or the Menu key of the record's row. */
@@ -54,11 +55,11 @@ export type ActionContextMenuProps = RecordMenu & {
  * A record's menu opened from its row by a right-click: the mirror of its `ActionMenu`.
  *
  * @family Menus
- * @when A right-click or long-press convenience on a record that already has a visible menu with the same commands.
- * @instead For anything a person must find use the visible three dots or a button: a context menu is never the only way. For global search use `CommandDialog`.
- * @behaviour The dropdown's surface and rows exactly, opening at the pointer. The same commands in the same order, the same disabled reasons, destructive last after a divider. With no command the row renders alone.
- * @words Identical to the visible menu's, in the same order; a command reached two ways reads the same both ways.
- * @access The Menu key and Shift+F10 open it on the focused row. The menu is named by `label`; Escape closes it and returns focus to the row.
+ * @when "ContextMenu must never be the only entry point for an action. Mirror every item in a visible `Menu` trigger or row button so mouse-only and keyboard-only users have parity." (https://vercel.com/geist/context-menu) Ours: a right-click or long-press convenience on a record that already has a visible menu with the same commands.
+ * @instead "For a global command palette, use `CommandMenu`; for a dropdown opened from a visible trigger, use `Menu`." (https://vercel.com/geist/context-menu) Ours: for anything a person must find use the visible three dots or a button. For global search use `CommandDialog`.
+ * @behaviour "Bind to right-click on desktop and long-press on touch. Suppress the native browser menu only on the trigger area, not the whole page." (https://vercel.com/geist/context-menu) "Position the menu at the pointer; if it would overflow the viewport, flip horizontally then vertically before clipping." (https://vercel.com/geist/context-menu) "Close on activation, Escape, and outside-click. Don’t close on hover-out." (https://vercel.com/geist/context-menu) Ours: the dropdown's surface and rows exactly. The same commands in the same order, the same muted rows and reasons, destructive last after a divider. With no command the row renders alone.
+ * @words "Items follow the same rules as `Menu`: Title Case `Verb + Noun` (`Open in New Tab`, `Copy URL`, `Delete Deployment`). Bare verbs are wrong." (https://vercel.com/geist/context-menu) Ours: sentence case, "Copy address". Identical to the visible menu's, in the same order; a command reached two ways reads the same both ways.
+ * @access "Trigger the keyboard menu key (`Shift+F10` on Windows/Linux, the menu key, or platform equivalent) to open the same menu without right-click." (https://vercel.com/geist/context-menu) "Up/Down arrows move focus, Enter/Space activates, Escape closes and returns focus to the row." (https://vercel.com/geist/context-menu) Ours: the menu is named by `label`, which is required.
  */
 export declare function ActionContextMenu({ label, record, commands, children }: ActionContextMenuProps): import("react").JSX.Element;
 //# sourceMappingURL=action-menu.d.ts.map

package/dist/components/action-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-menu.d.ts","sourceRoot":"","sources":["../../src/components/action-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrE,OAAO,EAAgB,mBAAmB,EAAuB,MAAM,4BAA4B,CAAC;AACpG,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAGnE,6DAA6D;AAC7D,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,sGAAsG;IACtG,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,wFAAwF;IACxF,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,gEAAgE;AAChE,MAAM,MAAM,UAAU,GAAG;IACvB,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,WAAW,EAAE,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,gGAAgG;IAChG,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACrD,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACpC,gGAAgG;IAChG,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC,YAAY,CAAC,CAAC;CACvE,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,IAAe,EACf,UAAU,GACX,EAAE,eAAe,sCAoBjB;AAED,yFAAyF;AACzF,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG;IAChD,wEAAwE;IACxE,QAAQ,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,sBAAsB,+BAU9F"}
+{"version":3,"file":"action-menu.d.ts","sourceRoot":"","sources":["../../src/components/action-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAK1D,OAAO,EAEL,mBAAmB,EAEnB,KAAK,wBAAwB,EAC9B,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAKhF;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GACzC,WAAW,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,sGAAsG;IACtG,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7B,GAAG,wBAAwB,CAAC;AAE/B,gEAAgE;AAChE,MAAM,MAAM,UAAU,GAAG;IACvB,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,WAAW,EAAE,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,gGAAgG;IAChG,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACrD,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACpC,gGAAgG;IAChG,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC,YAAY,CAAC,CAAC;CACvE,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,IAAe,EACf,UAAU,GACX,EAAE,eAAe,sCA4BjB;AAED,yFAAyF;AACzF,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG;IAChD,wEAAwE;IACxE,QAAQ,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,sBAAsB,+BAc9F"}

package/dist/components/action-menu.js

@@ -3,35 +3,42 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { EllipsisIcon } from "lucide-react";
 import { Button } from "./button.js";
 import { ContextMenu, ContextMenuContent, ContextMenuTrigger } from "./context-menu.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "./dropdown-menu.js";
 import { RecordMenuItems } from "../internal/record-menu-items.js";
+const MAX_COMMANDS = 10;
 /**
  * A record's three dots: the menu of its secondary commands, headed by the record's name.
  *
  * @family Menus
- * @when The secondary commands of one record from a visible trigger: the row's three dots, or the page's, which comes last in the title row.
- * @instead For a record's main task use a visible button (Edit opens the row). For finding across everything use `CommandDialog`. For a value to choose use `Select`. For right-click use the mirror, `ActionContextMenu`.
- * @behaviour Ghost 36 px trigger that keeps its fill while open. The menu opens aligned to the trigger's end, 6 px below: the record's name, the commands with their icons first and the value one acts on in mono under it, then the destructive ones after a divider in the error colour. Typeahead, arrows, Escape returns focus. A disabled command stays, greyed, with its reason under it. Nothing renders with no command.
- * @words The trigger reads "More for {record}"; the header is the record's name. Commands are verb and noun in sentence case, "Remove mailbox", never a bare "Delete". About ten at most; rows wrap, never truncate.
- * @access The trigger is a ghost icon button named by `label`, `aria-expanded` while open. `role="menu"`, items `menuitem` in a group named by the record; the value a command acts on and its reason are the item's description; icons hidden.
+ * @when "An overflow menu triggered by a three-dot icon that reveals additional actions in a dropdown." (https://vercel.com/geist/dots-menu) "Use Menu for a discoverable trigger that opens a list of actions on a single resource (a dots menu on a row, a dropdown on a primary entity)." (https://vercel.com/geist/menu) Ours: the secondary commands of one record from a visible trigger: the row's three dots, or the page's, which comes last in the title row. A record's one main task is a visible button beside the dots; one non-destructive command that can run, alone, is drawn as a button by `RecordList` and `PageActions`, never as a menu; one that cannot run or is locked stays in the menu so its reason is read.
+ * @instead "For right-click or long-press on a row, use `ContextMenu`. For global commands behind `⌘K`, use `CommandMenu`. For two related primary actions, use a split button rather than burying the secondary action." (https://vercel.com/geist/menu) Ours: for a record's main task use a visible button (Edit opens the row). For finding across everything use `CommandDialog`. For a value to choose use `Select`. For right-click use the mirror, `ActionContextMenu`.
+ * @behaviour "Open on click, not hover; hover-open menus collide with screen readers and trackpad scrolls." (https://vercel.com/geist/menu) "Position auto-flips based on window bounds; don’t hardcode a side that clips on narrow viewports." (https://vercel.com/geist/menu) "Close on item activation, Escape, and outside-click. Don’t auto-close on a hover-out." (https://vercel.com/geist/menu) "Use `MenuItemLocked` for permission-gated actions so the lock icon and disabled state explain why the row is inert." (https://vercel.com/geist/menu) Ours: that is `locked` with its `reason`, in the same tooltip. The trigger keeps its fill while open. The menu opens 10 px under the trigger, aligned to its end: the record's name, the commands with their icons first and the value one acts on in mono under it, then the destructive ones after a divider in the error colour. A command that cannot run now takes `disabledReason`: it stays in place, 36 px like the rest, with its text muted, never dimmed, and says why in a tooltip on the row; a destructive one is muted, not red; a running one takes `pending` and `pendingLabel`. Nothing renders with no command.
+ * @words "Item children are Title Case `Verb + Noun` (`Rename Project`, `Duplicate Deployment`). Bare verbs like `Rename` or `Edit` are wrong outside obvious single-object context." (https://vercel.com/geist/menu) "End an item with `…` only when activating it opens a follow-up dialog (`Rename…`, `Transfer to Team…`)." (https://vercel.com/geist/menu) "Group destructive items at the bottom, separated by a divider, and keep the destructive copy as `Verb + Noun` (`Delete Project`, never bare `Delete`)." (https://vercel.com/geist/menu) "Cap a Menu around 10 items. Past that, group with `MenuSection` or move secondary actions to a settings page." (https://vercel.com/geist/menu) Ours: sentence case, "Remove mailbox", not Title Case. The trigger reads "More for {record}"; the header is the record's name. Rows wrap, never truncate.
+ * @access "Typeahead jumps to the next item whose label starts with the typed character; keep the visible label first so typeahead matches what the user sees." (https://vercel.com/geist/menu) "Return focus to the trigger on close so keyboard users keep their place in the row." (https://vercel.com/geist/menu) Ours: the trigger is a ghost icon button named by `label`, which is required, `aria-expanded` while open. `role="menu"`, items `menuitem` in a group named by `record`, which is required; every command requires its `icon`. The value a command acts on and its reason are the item's description; icons hidden.
  */
 export function ActionMenu({ label, record, commands, triggerId, open, onOpenChange, modal, side = "bottom", finalFocus, }) {
+    if (typeof process !== "undefined" &&
+        process.env.NODE_ENV !== "production" &&
+        commands.length > MAX_COMMANDS) {
+        console.warn(`ActionMenu "${label}" has ${commands.length} commands; a menu holds ${MAX_COMMANDS} at most. Move the rest to the record's page.`);
+    }
     if (commands.length === 0)
         return null;
-    return (_jsxs(DropdownMenu, { modal: modal, onOpenChange: onOpenChange ? (next) => onOpenChange(next) : undefined, open: open, children: [_jsx(DropdownMenuTrigger, { id: triggerId, "aria-label": label, render: _jsx(Button, { variant: "ghost", size: "icon" }), children: _jsx(EllipsisIcon, { "aria-hidden": "true" }) }), _jsx(DropdownMenuContent, { align: "end", finalFocus: finalFocus, side: side, children: _jsx(RecordMenuItems, { commands: commands, record: record }) })] }));
+    return (_jsxs(DropdownMenu, { modal: modal, onOpenChange: onOpenChange ? (next) => onOpenChange(next) : undefined, open: open, children: [_jsx(DropdownMenuTrigger, { id: triggerId, render: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": label }), children: _jsx(EllipsisIcon, { "aria-hidden": "true" }) }), _jsx(DropdownMenuContent, { align: "end", finalFocus: finalFocus, side: side, children: _jsx(RecordMenuItems, { commands: commands, record: record }) })] }));
 }
 /**
  * A record's menu opened from its row by a right-click: the mirror of its `ActionMenu`.
  *
  * @family Menus
- * @when A right-click or long-press convenience on a record that already has a visible menu with the same commands.
- * @instead For anything a person must find use the visible three dots or a button: a context menu is never the only way. For global search use `CommandDialog`.
- * @behaviour The dropdown's surface and rows exactly, opening at the pointer. The same commands in the same order, the same disabled reasons, destructive last after a divider. With no command the row renders alone.
- * @words Identical to the visible menu's, in the same order; a command reached two ways reads the same both ways.
- * @access The Menu key and Shift+F10 open it on the focused row. The menu is named by `label`; Escape closes it and returns focus to the row.
+ * @when "ContextMenu must never be the only entry point for an action. Mirror every item in a visible `Menu` trigger or row button so mouse-only and keyboard-only users have parity." (https://vercel.com/geist/context-menu) Ours: a right-click or long-press convenience on a record that already has a visible menu with the same commands.
+ * @instead "For a global command palette, use `CommandMenu`; for a dropdown opened from a visible trigger, use `Menu`." (https://vercel.com/geist/context-menu) Ours: for anything a person must find use the visible three dots or a button. For global search use `CommandDialog`.
+ * @behaviour "Bind to right-click on desktop and long-press on touch. Suppress the native browser menu only on the trigger area, not the whole page." (https://vercel.com/geist/context-menu) "Position the menu at the pointer; if it would overflow the viewport, flip horizontally then vertically before clipping." (https://vercel.com/geist/context-menu) "Close on activation, Escape, and outside-click. Don’t close on hover-out." (https://vercel.com/geist/context-menu) Ours: the dropdown's surface and rows exactly. The same commands in the same order, the same muted rows and reasons, destructive last after a divider. With no command the row renders alone.
+ * @words "Items follow the same rules as `Menu`: Title Case `Verb + Noun` (`Open in New Tab`, `Copy URL`, `Delete Deployment`). Bare verbs are wrong." (https://vercel.com/geist/context-menu) Ours: sentence case, "Copy address". Identical to the visible menu's, in the same order; a command reached two ways reads the same both ways.
+ * @access "Trigger the keyboard menu key (`Shift+F10` on Windows/Linux, the menu key, or platform equivalent) to open the same menu without right-click." (https://vercel.com/geist/context-menu) "Up/Down arrows move focus, Enter/Space activates, Escape closes and returns focus to the row." (https://vercel.com/geist/context-menu) Ours: the menu is named by `label`, which is required.
  */
 export function ActionContextMenu({ label, record, commands, children }) {
-    if (commands.length === 0)
-        return children;
-    return (_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { render: children }), _jsx(ContextMenuContent, { "aria-label": label, children: _jsx(RecordMenuItems, { commands: commands, record: record }) })] }));
+    const none = commands.length === 0;
+    // The row stays one element whether or not it has commands, so a menu that appears or goes
+    // never remounts the row; with none the browser keeps its own menu and the row its selection.
+    return (_jsxs(ContextMenu, { disabled: none, children: [_jsx(ContextMenuTrigger, { className: none ? "select-auto" : undefined, render: children }), none ? null : (_jsx(ContextMenuContent, { "aria-label": label, children: _jsx(RecordMenuItems, { commands: commands, record: record }) }))] }));
 }

package/dist/components/action-status.d.ts

@@ -1,26 +1,30 @@
 import type { ReactNode } from "react";
-interface ActionStatusProps {
+import { type TextButtonProps } from "./button.js";
+type ActionStatusProps = Omit<TextButtonProps, "children" | "loading" | "loadingLabel" | "prefix" | "suffix"> & {
     state: "done" | "idle" | "saving";
     idle: string;
     busy: string;
     done: string;
     idleIcon?: ReactNode;
-}
+};
 /**
- * A control's three words on one action: what it does, what it is doing, what it did.
+ * A button's three words on one action: what it does, what it is doing, what it did.
  *
  * @family Status
- * @when A control that reports its own action: what it does, what it is doing, what it did. Waits
+ * @when A button that reports its own action: what it does, what it is doing, what it did. Waits
  * under about a second.
  * @instead The record's resulting state is a `StatusBadge`. A wait past a second adds one waiting
- * line beside the work. An Agent's work is her orb.
- * @behaviour Saving keeps the idle icon, the size and the place; only the word changes. The caller
- * sets `disabled` and `aria-busy`. Done shows the check.
+ * line beside the work. An Agent's work is her orb. A button with no done word is a `Button` with
+ * `loading`.
+ * @behaviour Takes the props of a text `Button`. Saving is the button's `loading`: the idle icon, the
+ * size and the place stay, only the word changes, a second press is ignored and focus stays. Done
+ * swaps the icon for the check.
  * @words Verb and noun idle (*Save changes*), the verb in progress (*Saving*), the result
  * (*Saved*). No ellipsis. Italian: *Salva modifiche*, *Salvataggio*, *Salvato*.
- * @access The button's name is the current word. The result is announced once in a `role="status"`
- * region; a failure as an alert.
+ * @access The button's name is the current word, and it is `aria-busy` while saving. It renders no
+ * status region: the caller's `role="status"` region announces the result once and a failure as an
+ * alert.
  */
-declare function ActionStatus({ state, idle, busy, done, idleIcon }: ActionStatusProps): import("react").JSX.Element;
+declare function ActionStatus({ state, idle, busy, done, idleIcon, ...props }: ActionStatusProps): import("react").JSX.Element;
 export { ActionStatus };
 //# sourceMappingURL=action-status.d.ts.map

package/dist/components/action-status.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-status.d.ts","sourceRoot":"","sources":["../../src/components/action-status.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AACD;;;;;;;;;;;;;;GAcG;AACH,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAe,EAAE,EAAE,iBAAiB,+BAOpF;AACD,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"action-status.d.ts","sourceRoot":"","sources":["../../src/components/action-status.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAU,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEnE,KAAK,iBAAiB,GAAG,IAAI,CAC3B,eAAe,EACf,UAAU,GAAG,SAAS,GAAG,cAAc,GAAG,QAAQ,GAAG,QAAQ,CAC9D,GAAG;IACF,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAWvF;AACD,OAAO,EAAE,YAAY,EAAE,CAAC"}