@crewlethq/ui 0.20.0 → 0.22.0

package/README.md

@@ -203,6 +203,28 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.22.0
+
+**`Menu` takes `width`** (`'content'`, the default, or `'trigger'`). `'trigger'` keeps the panel no narrower than its trigger, so a trigger that spans a column opens a menu that covers it edge to edge, and still lets it grow past the trigger when a row needs the room.
+
+**`Menu` takes `trailingIcon`**, a glyph after a text trigger's words, such as a picker's chevron. It is drawn as the button's trailing icon, a gap away from the words, where a glyph written into `trigger` sat flush against them.
+
+**`Menu` reads more easily.** A header's name and value share one line (`Access … Admin`), and a row's description is one type step under its label rather than two.
+
+**`AppShell.AccountRow`'s menu covers the row.** Pressing who you are opens a menu at least as wide as the row itself.
+
+What to change: nothing.
+
+## Changes in 0.21.0
+
+**`AppShell.AccountRow` takes `menu`** (`AccountRowMenu`: `label`, `header`, `items`): pressing who you are opens the reader's own menu instead of linking anywhere, which is where a reader looks for their account and for signing out. The row becomes the menu button, ending in the up-and-down chevron a menu's trigger draws, keeps the account page's current-row lift (`data-current`), and the menu's header holds the facts the row does not already say, such as the reader's access. Given, `menu` takes the place of `href`.
+
+**`Menu` takes `header` and `renderTrigger`.** `header` is a line of facts above the items: never an item, so the arrows never stop on it, and the menu's description, so a screen reader hears it when the menu opens. `renderTrigger` makes the caller's own element the trigger, given the props it spreads (`MenuTriggerProps`), keeping every rule of the menu's button, focus coming back to it included.
+
+**`@crewlethq/icons` vendors `log-out` and `log-in`**, for signing out and in from that menu.
+
+What to change: nothing. Everything is new.
+
 ## Changes in 0.20.0
 
 0.20.0 adds the review surfaces the engine dashboard drew for itself: a line diff, two versions compared, a document's comment thread, the note a lost edit race leaves, the People rail beside a shared document, and the read-only cells its tables share. Each takes its data and its callbacks as props, so nothing in it fetches or knows a route.

package/dist/AppShell/AccountRow.d.ts

@@ -1,4 +1,14 @@
 import type { ReactNode } from 'react';
+import { type MenuEntry } from '../Menu/index.js';
+/** The menu the row opens (`AccountRowProps.menu`). */
+export interface AccountRowMenu {
+    /** The menu's name. Defaults to "Your account". */
+    label?: string | undefined;
+    /** Facts above the items that the row does not already say: the reader's access. */
+    header?: ReactNode;
+    /** The reader's own actions: their account, signing out. */
+    items: readonly MenuEntry[];
+}
 export interface AccountRowProps {
     /** The reader's badge, drawn decorative: the name beside it says who it is. */
     avatar: ReactNode;
@@ -6,8 +16,14 @@ export interface AccountRowProps {
     name: ReactNode;
     /** The line under the name: a login, a seat. Left out where it would repeat the name. */
     detail?: ReactNode;
-    /** The reader's account page. Without it the row states who is signed in and goes nowhere. */
+    /** The reader's account page. Without it (or `menu`) the row states who is signed in and goes nowhere. */
     href?: string | undefined;
+    /**
+     * The reader's own menu, which the row OPENS rather than linking anywhere:
+     * their account among its items, and signing out. Given, it takes the place
+     * of `href`.
+     */
+    menu?: AccountRowMenu | undefined;
     /** Whether the reader is on that page, which marks the row as the rail marks its current row. */
     current?: boolean | undefined;
     /** What the link opens, as its tooltip. */
@@ -36,5 +52,11 @@ export interface AccountRowProps {
  *
  * The controls are siblings of the link, never inside it, so each keeps its
  * own name and the link's name stays the reader's.
+ *
+ * OR THE ROW OPENS THE READER'S MENU (`menu`): pressing who you are is where a
+ * reader looks for their account and for signing out, so the row is the menu
+ * button, ending in the up-and-down chevron a menu's trigger draws, and the
+ * account is one item of it. The menu says only what the row does not, in its
+ * header (their access), above the actions.
  */
-export declare function AccountRow({ avatar, name, detail, href, current, title, linkSuffix, actions, className, }: AccountRowProps): import("react").JSX.Element;
+export declare function AccountRow({ avatar, name, detail, href, menu, current, title, linkSuffix, actions, className, }: AccountRowProps): import("react").JSX.Element;

package/dist/AppShell/index.d.ts

@@ -1,5 +1,5 @@
 import './AppShell.css';
 export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from './AppShell.js';
 export { AccountRow } from './AccountRow.js';
-export type { AccountRowProps } from './AccountRow.js';
+export type { AccountRowMenu, AccountRowProps } from './AccountRow.js';
 export type { ActionRailRowProps, AppShellContextValue, AppShellProps, AppShellRailProps, AppShellRailRowProps, AppShellToggleProps, AppShellTopbarProps, RailRowCount, StaticRailRowProps, } from './AppShell.js';

package/dist/AppShell/index.js

@@ -1,5 +1,7 @@
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-EDGCPVVD.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-BFQK7CYJ.js';
 import '../chunk-IG75YMUN.js';
+import '../chunk-UFKUWVMV.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/{AppShell-RUNVM4WH.css → AppShell-APHZKJYH.css}

@@ -651,18 +651,40 @@
   transition: background var(--motion-duration-fast) var(--motion-easing-default);
 }
 
-a.crewlet-account-row__who:hover {
+/* The row as the reader's menu button: a button drawn as the link is. */
+button.crewlet-account-row__who {
+  width: 100%;
+  margin: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+/* A row that opens a menu fills the row as the link does. */
+.crewlet-account-row > .crewlet-menu-anchor {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+a.crewlet-account-row__who:hover,
+button.crewlet-account-row__who:hover,
+button.crewlet-account-row__who[aria-expanded='true'] {
   background: var(--color-surface-hover);
 }
 
 /* After :hover, so the current row shows the lift rather than the overlay. */
-a.crewlet-account-row__who[aria-current='page'] {
+a.crewlet-account-row__who[aria-current='page'],
+button.crewlet-account-row__who[data-current] {
   background: var(--color-surface-elevated);
   outline: 1px solid var(--color-border-default);
   outline-offset: -1px;
 }
 
-a.crewlet-account-row__who:focus-visible {
+a.crewlet-account-row__who:focus-visible,
+button.crewlet-account-row__who:focus-visible {
   outline: 2px solid var(--color-focus);
   outline-offset: var(--size-focus-ring-inset-offset);
 }

package/dist/CommandPalette/index.js

@@ -1,11 +1,11 @@
-export { CommandPalette } from '../chunk-UXELEORU.js';
-import '../chunk-7IJARUIF.js';
+export { CommandPalette } from '../chunk-4HRB62EA.js';
+import '../chunk-F4DPAJCN.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-Q55TXPA3.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/CommentThread/index.js

@@ -1,8 +1,7 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-EZBLOUWX.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-IC64IWOO.js';
 import '../chunk-WI6K5M5X.js';
 import '../chunk-VJLYGPPE.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-Q55TXPA3.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-3CZ7XAVY.js';
@@ -11,6 +10,7 @@ import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataTable/index.js

@@ -1,14 +1,14 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-AJESMWJS.js';
-import '../chunk-JULMZNGT.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-BXSGT3YC.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-7IJARUIF.js';
-import '../chunk-OG6CL3EB.js';
+import '../chunk-F4DPAJCN.js';
 import '../chunk-I6NZKJGK.js';
 import '../chunk-Q55TXPA3.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-UFKUWVMV.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/DataView/index.js

@@ -1,16 +1,14 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-OIMAK5AE.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-KYEXTEJ3.js';
 import '../chunk-HOXGBLEY.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-AJESMWJS.js';
-import '../chunk-JULMZNGT.js';
-import '../chunk-L4H7SSWF.js';
+import '../chunk-RE6ED5TO.js';
+import '../chunk-BXSGT3YC.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-7IJARUIF.js';
+import '../chunk-F4DPAJCN.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-I6NZKJGK.js';
 import '../chunk-Q55TXPA3.js';
 import '../chunk-3CZ7XAVY.js';
@@ -19,6 +17,8 @@ import '../chunk-BWRGFKJP.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-UFKUWVMV.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/DateTimePicker/index.js

@@ -1,7 +1,7 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-L4H7SSWF.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-RE6ED5TO.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BWRGFKJP.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/LinkInterstitial/index.js

@@ -1,9 +1,9 @@
-export { LinkInterstitial, openExternal } from '../chunk-A4VMJMXJ.js';
+export { LinkInterstitial, openExternal } from '../chunk-L2OQRPXJ.js';
+import '../chunk-F4DPAJCN.js';
 import '../chunk-5CLW2CXT.js';
-import '../chunk-7IJARUIF.js';
 import '../chunk-SVSCLHHI.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/Menu/Menu.d.ts

@@ -53,10 +53,24 @@
  * - IT CAN BE OPENED FROM OUTSIDE (`open`, `onOpenChange`), because a tree item
  *   that holds focus opens its card's menu from the keyboard while the trigger
  *   itself is out of the tab order (`triggerTabIndex={-1}`).
+ * - ITS TRIGGER CAN BE THE CALLER'S OWN (`renderTrigger`): a row that IS the
+ *   way in, such as the signed-in reader at the foot of the rail, opens the
+ *   menu itself rather than sitting beside a second button that does. The
+ *   caller spreads the props it is handed on its element, which keeps every
+ *   rule above, the focus coming back included.
+ * - IT CAN BE NO NARROWER THAN ITS TRIGGER (`width="trigger"`): a trigger
+ *   that spans a column, such as the signed-in reader at the foot of the
+ *   rail, opens a panel that covers it edge to edge, and that still grows
+ *   past it when a row needs the room, so a description reads on one line
+ *   rather than wrapping into a column of short lines.
+ * - A HEADER SAYS WHAT THE ACTIONS ARE ABOUT (`header`): a line of facts
+ *   above the items, such as the access a signed-in reader carries. It is
+ *   not an item, so the arrows never stop on it, and the menu is described by
+ *   it, so a screen reader hears it when the menu opens.
  *
  * Ported from the engine dashboard's `ui/Menu.tsx`, with its suite.
  */
-import { type ReactNode } from 'react';
+import { type KeyboardEvent, type ReactNode } from 'react';
 import { type ButtonVariant } from '../Button/index.js';
 export interface MenuItem {
     kind?: 'item';
@@ -97,6 +111,16 @@ type Run = {
 };
 /** Gathers each run of consecutive answers (items given `checked`) into one group. */
 export declare function runs(entries: readonly MenuEntry[]): Run[];
+/** What a caller's own trigger spreads on its element (`renderTrigger`). */
+export interface MenuTriggerProps {
+    ref: (el: HTMLElement | null) => void;
+    'aria-haspopup': 'menu';
+    'aria-expanded': boolean;
+    'aria-controls': string | undefined;
+    tabIndex: number | undefined;
+    onClick: () => void;
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+}
 export interface MenuProps {
     /** The trigger's accessible name, such as "Actions for Software Engineer". */
     label: string;
@@ -105,6 +129,12 @@ export interface MenuProps {
     icon?: ReactNode;
     /** Visible trigger text; without it the trigger is an icon button named by `label`. */
     trigger?: ReactNode;
+    /**
+     * A glyph after the trigger's text, such as the chevron of a picker. Drawn
+     * as the button's trailing icon, a gap away from the words; a glyph written
+     * into `trigger` instead sits flush against them. Read only with `trigger`.
+     */
+    trailingIcon?: ReactNode;
     triggerVariant?: ButtonVariant | undefined;
     /** -1 for a pointer-only trigger whose actions the keyboard reaches another way. */
     triggerTabIndex?: number | undefined;
@@ -112,7 +142,20 @@ export interface MenuProps {
     onOpenChange?: ((open: boolean) => void) | undefined;
     /** Which edge of the trigger the menu lines up with. */
     align?: 'start' | 'end' | undefined;
+    /**
+     * How wide the panel is: its longest row (`content`, the default), or its
+     * longest row but never narrower than its trigger (`trigger`), for a
+     * trigger that spans a column.
+     */
+    width?: 'content' | 'trigger' | undefined;
+    /**
+     * The caller's own trigger, in place of the menu's button: an element given
+     * these props. `label` still names the menu; the trigger names itself.
+     */
+    renderTrigger?: ((props: MenuTriggerProps) => ReactNode) | undefined;
+    /** Facts above the items: what the actions are about. Never an item. */
+    header?: ReactNode;
     className?: string | undefined;
 }
-export declare function Menu({ label, items, icon, trigger, triggerVariant, triggerTabIndex, open: controlled, onOpenChange, align, className, }: MenuProps): import("react").JSX.Element;
+export declare function Menu({ label, items, icon, trigger, trailingIcon, triggerVariant, triggerTabIndex, open: controlled, onOpenChange, align, width, renderTrigger, header, className, }: MenuProps): import("react").JSX.Element;
 export {};

package/dist/Menu/index.d.ts

@@ -1,3 +1,3 @@
 import './Menu.css';
 export { Menu } from './Menu.js';
-export type { MenuEntry, MenuItem, MenuProps, MenuSeparator } from './Menu.js';
+export type { MenuEntry, MenuItem, MenuProps, MenuSeparator, MenuTriggerProps } from './Menu.js';

package/dist/Menu/index.js

@@ -1,4 +1,4 @@
-export { Menu } from '../chunk-JULMZNGT.js';
+export { Menu } from '../chunk-UFKUWVMV.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';

package/dist/{Menu-BT5PMFJI.css → Menu-KEKAD3BZ.css}

@@ -34,9 +34,15 @@
    * however long that label was and the 320px was a number nothing read. A
    * width is clamped by the ceiling, and the label that no longer fits is the
    * one that truncates.
+   *
+   * A FLOOR, when the trigger sets one (`width="trigger"`, which writes
+   * --crewlet-menu-floor): the panel is never narrower than a trigger that
+   * spans a column. The ceiling is lifted to meet it, so the two never cross
+   * and the rule above still holds.
    */
   width: max-content;
-  max-width: 320px;
+  min-width: var(--crewlet-menu-floor, 0px);
+  max-width: max(320px, var(--crewlet-menu-floor, 0px));
   max-height: min(360px, 60vh);
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -193,6 +199,7 @@
 .crewlet-menu__text {
   display: flex;
   flex-direction: column;
+  gap: calc(var(--spacing-1) / 2);
   min-width: 0;
 }
 
@@ -202,9 +209,14 @@
   white-space: nowrap;
 }
 
+/*
+ * ONE STEP UNDER THE LABEL, not two. At 11px under a 13px label the second
+ * line read as fine print; at 12px in the tertiary ink it is still plainly the
+ * lesser line, and it is legible at a glance.
+ */
 .crewlet-menu__description {
   color: var(--color-text-tertiary);
-  font-size: var(--font-size-2xs);
+  font-size: var(--font-size-xs);
   white-space: normal;
 }
 
@@ -219,6 +231,27 @@
   font-size: var(--font-size-xs);
 }
 
+/*
+ * Facts above the items, across the panel's full width with a hairline under
+ * them: what the actions below are about, read rather than pressed.
+ *
+ * A NAME AND ITS VALUE SHARE ONE LINE, the name at the start and the value at
+ * the end, as a property reads ("Access … Admin"). Stacked, the pair spent two
+ * lines on one fact. A value too long for the line wraps beneath its name.
+ */
+.crewlet-menu__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-1) var(--spacing-2);
+  margin: calc(var(--spacing-1) * -1) calc(var(--spacing-1) * -1) var(--spacing-1);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-bottom: 1px solid var(--color-border-default);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+}
+
 .crewlet-menu__separator {
   height: 1px;
   margin: var(--spacing-1) 0;

package/dist/Modal/index.js

@@ -1,6 +1,6 @@
-export { ConfirmModal, Modal } from '../chunk-7IJARUIF.js';
-import '../chunk-OG6CL3EB.js';
+export { ConfirmModal, Modal } from '../chunk-F4DPAJCN.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/PeopleRail/index.js

@@ -1,11 +1,11 @@
-export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-N4GFRW5C.js';
+export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-J4OKGJQ6.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-S35G6PNC.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-5OM447RW.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ShareDialog/index.js

@@ -1,17 +1,17 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-HTCJSUIZ.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-XMGB3ZAT.js';
 import '../chunk-FC4YTTFJ.js';
 import '../chunk-W46LPU4R.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-7IJARUIF.js';
+import '../chunk-F4DPAJCN.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-SVSCLHHI.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-IG75YMUN.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/SheetGrid/index.js

@@ -1,4 +1,4 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-J2G4HGQM.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-36CWC2NH.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
@@ -8,10 +8,10 @@ import '../chunk-PPAQFGS2.js';
 import '../chunk-YYZRLLLY.js';
 import '../chunk-S35G6PNC.js';
 import '../chunk-QWOPX2MN.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-5OM447RW.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Switcher/index.js

@@ -1,13 +1,13 @@
-export { Switcher } from '../chunk-7FQEUNHX.js';
+export { Switcher } from '../chunk-7X5WOECO.js';
 import '../chunk-W5J7R5EB.js';
-import '../chunk-7IJARUIF.js';
+import '../chunk-F4DPAJCN.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-Q55TXPA3.js';
 import '../chunk-BWRGFKJP.js';
 import '../chunk-FYTIJM2T.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-IG75YMUN.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-RSAQOKH3.js';

package/dist/TimeWindowPicker/index.js

@@ -1,11 +1,11 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-EIGEIT4O.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-NUZC6PJX.js';
 import '../chunk-FC4YTTFJ.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-Q55TXPA3.js';
 import '../chunk-BWRGFKJP.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/VersionTimeline/index.js

@@ -1,10 +1,10 @@
-export { VersionTimeline } from '../chunk-WXAULPBH.js';
+export { VersionTimeline } from '../chunk-UNZ7TVV5.js';
 import '../chunk-AUQPBL4O.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{chunk-UXELEORU.js → chunk-4HRB62EA.js}

@@ -1,4 +1,4 @@
-import { Modal } from './chunk-7IJARUIF.js';
+import { Modal } from './chunk-F4DPAJCN.js';
 import { useListbox, useHighlightRest } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Input } from './chunk-Q55TXPA3.js';

package/dist/{chunk-7FQEUNHX.js → chunk-7X5WOECO.js}

@@ -1,5 +1,5 @@
 import { Skeleton } from './chunk-W5J7R5EB.js';
-import { Modal } from './chunk-7IJARUIF.js';
+import { Modal } from './chunk-F4DPAJCN.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Input } from './chunk-Q55TXPA3.js';
 import { Popover } from './chunk-BWRGFKJP.js';

package/dist/{chunk-EDGCPVVD.js → chunk-BFQK7CYJ.js}

@@ -1,12 +1,13 @@
 import { useMediaMatch } from './chunk-IG75YMUN.js';
+import { Menu } from './chunk-UFKUWVMV.js';
 import { useModalLayer, focusables } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './AppShell-RUNVM4WH.css';
+import './AppShell-APHZKJYH.css';
 import { createContext, forwardRef, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
-import { ChevronUpGlyph, ChevronRightGlyph, MenuGlyph } from '@crewlethq/icons/glyphs';
+import { ChevronUpGlyph, ChevronsUpDownGlyph, ChevronRightGlyph, MenuGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function AccountRow({
@@ -14,6 +15,7 @@ function AccountRow({
   name,
   detail,
   href,
+  menu,
   current = false,
   title,
   linkSuffix = ", your account",
@@ -32,7 +34,30 @@ function AccountRow({
     ] })
   ] });
   return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-account-row", className), children: [
-    href === void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-account-row__who", children: who }) : /* @__PURE__ */ jsxs(
+    menu ? /* @__PURE__ */ jsx(
+      Menu,
+      {
+        label: menu.label ?? "Your account",
+        items: menu.items,
+        header: menu.header,
+        width: "trigger",
+        renderTrigger: (trigger) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "crewlet-account-row__who",
+            title,
+            "data-current": current ? "" : void 0,
+            ...trigger,
+            children: [
+              who,
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: linkSuffix }),
+              /* @__PURE__ */ jsx(ChevronsUpDownGlyph, { size: "xs", className: "crewlet-account-row__go", "aria-hidden": "true" })
+            ]
+          }
+        )
+      }
+    ) : href === void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-account-row__who", children: who }) : /* @__PURE__ */ jsxs(
       "a",
       {
         className: "crewlet-account-row__who",

package/dist/{chunk-AJESMWJS.js → chunk-BXSGT3YC.js}

@@ -1,10 +1,10 @@
-import { Menu } from './chunk-JULMZNGT.js';
 import { useClipboard } from './chunk-STJ7QBC3.js';
-import { Modal } from './chunk-7IJARUIF.js';
-import { Button } from './chunk-OG6CL3EB.js';
+import { Modal } from './chunk-F4DPAJCN.js';
 import { Checkbox } from './chunk-I6NZKJGK.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
+import { Menu } from './chunk-UFKUWVMV.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-OIMAK5AE.js → chunk-KYEXTEJ3.js}

@@ -1,15 +1,15 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { DataTable } from './chunk-AJESMWJS.js';
-import { Menu } from './chunk-JULMZNGT.js';
-import { DateTimePicker } from './chunk-L4H7SSWF.js';
+import { DateTimePicker } from './chunk-RE6ED5TO.js';
+import { DataTable } from './chunk-BXSGT3YC.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Button } from './chunk-OG6CL3EB.js';
 import { Input } from './chunk-Q55TXPA3.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Popover } from './chunk-BWRGFKJP.js';
 import { Count } from './chunk-BHHIIK3M.js';
+import { Menu } from './chunk-UFKUWVMV.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-A4VMJMXJ.js → chunk-L2OQRPXJ.js}

@@ -1,5 +1,5 @@
+import { ConfirmModal } from './chunk-F4DPAJCN.js';
 import { InlineCode } from './chunk-5CLW2CXT.js';
-import { ConfirmModal } from './chunk-7IJARUIF.js';
 import { Callout } from './chunk-SVSCLHHI.js';
 import './LinkInterstitial-ET4MSVSV.css';
 import { jsx, jsxs } from 'react/jsx-runtime';