@crewlethq/ui 0.21.0 → 0.22.0

package/README.md

@@ -203,6 +203,18 @@ 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`.

package/dist/AppShell/index.js

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

package/dist/DataTable/index.js

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

package/dist/DataView/index.js

@@ -1,8 +1,8 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-AV6YX4GZ.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-RE6ED5TO.js';
-import '../chunk-LG244LY7.js';
+import '../chunk-BXSGT3YC.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-F4DPAJCN.js';
@@ -17,7 +17,7 @@ import '../chunk-BWRGFKJP.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-4MIM356A.js';
+import '../chunk-UFKUWVMV.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';

package/dist/LinkInterstitial/index.js

@@ -1,6 +1,6 @@
-export { LinkInterstitial, openExternal } from '../chunk-ZM7HLFOA.js';
-import '../chunk-5CLW2CXT.js';
+export { LinkInterstitial, openExternal } from '../chunk-L2OQRPXJ.js';
 import '../chunk-F4DPAJCN.js';
+import '../chunk-5CLW2CXT.js';
 import '../chunk-SVSCLHHI.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OG6CL3EB.js';

package/dist/Menu/Menu.d.ts

@@ -58,6 +58,11 @@
  *   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
@@ -124,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;
@@ -131,6 +142,12 @@ 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.
@@ -140,5 +157,5 @@ export interface MenuProps {
     header?: ReactNode;
     className?: string | undefined;
 }
-export declare function Menu({ label, items, icon, trigger, triggerVariant, triggerTabIndex, open: controlled, onOpenChange, align, renderTrigger, header, 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.js

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

package/dist/{Menu-XIJ4LQUT.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;
 }
 
@@ -222,11 +234,17 @@
 /*
  * 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-direction: column;
-  gap: var(--spacing-1);
+  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);

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

@@ -1,5 +1,5 @@
 import { useMediaMatch } from './chunk-IG75YMUN.js';
-import { Menu } from './chunk-4MIM356A.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';
@@ -40,6 +40,7 @@ function AccountRow({
         label: menu.label ?? "Your account",
         items: menu.items,
         header: menu.header,
+        width: "trigger",
         renderTrigger: (trigger) => /* @__PURE__ */ jsxs(
           "button",
           {

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

@@ -3,7 +3,7 @@ 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-4MIM356A.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';

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

@@ -1,14 +1,14 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
 import { Toolbar } from './chunk-PGRPNDWM.js';
 import { DateTimePicker } from './chunk-RE6ED5TO.js';
-import { DataTable } from './chunk-LG244LY7.js';
+import { DataTable } from './chunk-BXSGT3YC.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.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-4MIM356A.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';

package/dist/{chunk-4MIM356A.js → chunk-UFKUWVMV.js}

@@ -3,7 +3,7 @@ import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup
 import { usePopupLayer } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Menu-XIJ4LQUT.css';
+import './Menu-KEKAD3BZ.css';
 import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { EllipsisVerticalGlyph, CheckGlyph } from '@crewlethq/icons/glyphs';
@@ -29,11 +29,13 @@ function Menu({
   items,
   icon,
   trigger,
+  trailingIcon,
   triggerVariant = "ghost",
   triggerTabIndex,
   open: controlled,
   onOpenChange,
   align = "start",
+  width = "content",
   renderTrigger,
   header,
   className
@@ -88,7 +90,9 @@ function Menu({
     const inHost = container !== document.body;
     const host = inHost ? container.getBoundingClientRect() : viewportBounds();
     const rect = at.getBoundingClientRect();
-    const own = box.getBoundingClientRect();
+    const measured = box.getBoundingClientRect();
+    const floor = width === "trigger" ? rect.width : void 0;
+    const own = { width: Math.max(measured.width, floor ?? 0), height: measured.height };
     const local = {
       x: (align === "end" ? rect.right - own.width : rect.left) - (inHost ? host.x : 0),
       y: rect.top - (inHost ? host.y : 0),
@@ -107,8 +111,10 @@ function Menu({
       return;
     }
     const spot = placePopup(local, { width: own.width, height: own.height }, bounds, LAYER_GAP);
-    setPlace((was) => was && was.left === spot.left && was.top === spot.top ? was : { left: spot.left, top: spot.top });
-  }, [align, close, container]);
+    setPlace(
+      (was) => was && was.left === spot.left && was.top === spot.top && was.floor === floor ? was : { left: spot.left, top: spot.top, floor }
+    );
+  }, [align, close, container, width]);
   useLayoutEffect(() => {
     if (!open) return;
     position();
@@ -233,7 +239,12 @@ function Menu({
         menu.current = el;
         popup.panelRef(el);
       },
-      style: place ? { left: place.left, top: place.top, zIndex: popup.zIndex } : { visibility: "hidden" },
+      style: place ? {
+        left: place.left,
+        top: place.top,
+        zIndex: popup.zIndex,
+        ...place.floor === void 0 ? null : { "--crewlet-menu-floor": `${place.floor}px` }
+      } : { visibility: "hidden" },
       onKeyDown: onMenuKeyDown,
       onPointerDown: (event) => event.stopPropagation(),
       onClick: (event) => event.stopPropagation(),
@@ -269,7 +280,7 @@ function Menu({
     onKeyDown: onTriggerKeyDown
   };
   return /* @__PURE__ */ jsxs("span", { className: "crewlet-menu-anchor", children: [
-    renderTrigger ? renderTrigger(shared) : trigger === void 0 ? /* @__PURE__ */ jsx(IconButton, { ...shared, label, icon: icon ?? /* @__PURE__ */ jsx(EllipsisVerticalGlyph, {}), size: "sm" }) : /* @__PURE__ */ jsx(Button, { ...shared, variant: triggerVariant, size: "small", leadingIcon: icon, children: trigger }),
+    renderTrigger ? renderTrigger(shared) : trigger === void 0 ? /* @__PURE__ */ jsx(IconButton, { ...shared, label, icon: icon ?? /* @__PURE__ */ jsx(EllipsisVerticalGlyph, {}), size: "sm" }) : /* @__PURE__ */ jsx(Button, { ...shared, variant: triggerVariant, size: "small", leadingIcon: icon, trailingIcon, children: trigger }),
     list && container ? createPortal(list, container) : null
   ] });
 }

package/dist/generated/index.js

@@ -9,10 +9,10 @@ export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTh
 export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-NUZC6PJX.js';
 export { Timeline, TimelineItem } from '../chunk-AUQPBL4O.js';
 export { ToastProvider, Toaster, useToast } from '../chunk-QH3AKP2N.js';
+export { Table } from '../chunk-V2N3BMOT.js';
 export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-MUGM7SEG.js';
 export { TagGroup } from '../chunk-E6UWRXNM.js';
 export { TagsInput } from '../chunk-7ZNKEPLN.js';
-export { Table } from '../chunk-V2N3BMOT.js';
 export { Text } from '../chunk-IKBK4A5O.js';
 export { ThemeGallery } from '../chunk-KLIEPFEZ.js';
 export { ThemeSwatch } from '../chunk-MNFU2RNT.js';
@@ -28,8 +28,9 @@ export { Select } from '../chunk-FC4YTTFJ.js';
 export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-36CWC2NH.js';
 export { matchesShortcut, useShortcut } from '../chunk-2FPENTCF.js';
 export { Prose } from '../chunk-JCSA3XVH.js';
-export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from '../chunk-ZAJHGDAW.js';
+export { PrincipalPicker } from '../chunk-JEDWC3GI.js';
 export { QR_DARK, QR_LIGHT, QR_QUIET_ZONE, QrCode, qrModulePath, qrModules } from '../chunk-Y56FM3K4.js';
+export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from '../chunk-ZAJHGDAW.js';
 export { FRAME_HELLO_TIMEOUT_MS, SandboxedFrame } from '../chunk-VYDFB6PJ.js';
 export { Skeleton } from '../chunk-W5J7R5EB.js';
 export { SearchTrigger } from '../chunk-6DRDCT22.js';
@@ -40,7 +41,6 @@ import '../chunk-CENOOTAV.js';
 export { PricingCard } from '../chunk-DQSXWQMJ.js';
 export { Tag } from '../chunk-GFV4LJHH.js';
 export { StatusDot } from '../chunk-WIATRXEJ.js';
-export { PrincipalPicker } from '../chunk-JEDWC3GI.js';
 export { NewItemsNotice } from '../chunk-PXU6HOZB.js';
 export { Note } from '../chunk-63WJLRB2.js';
 export { FactLine, ObjectHeader, SetByLine } from '../chunk-I7WXZOWA.js';
@@ -58,7 +58,7 @@ import '../chunk-VYY56AMX.js';
 export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from '../chunk-4PZ6FJKW.js';
 export { AutoGrid, Inline, Spacer, Stack } from '../chunk-ZAC7SKUN.js';
 export { Link } from '../chunk-FBSEJO2C.js';
-export { LinkInterstitial, openExternal } from '../chunk-ZM7HLFOA.js';
+export { LinkInterstitial, openExternal } from '../chunk-L2OQRPXJ.js';
 export { DEFAULT_FRAME_THEME, EXTERNAL_URL_MAX, FRAME_BRIDGE, FRAME_MESSAGE, FRAME_ORIGIN_MODES, FRAME_SANDBOX_TOKENS, applyFrameTheme, checkFrameSandbox, externalUrl, frameFragment, frameOriginMatches, frameThemeMessage, httpOrigin, isFocusExit, isFrameNonce, negotiateBridge, parseFrameFragment, portTargetOrigin, readFrameHello, readFramePortMessage, readFrameTheme, readOpenLink } from '../chunk-F6V2PTN6.js';
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from '../chunk-ZXXDZJQN.js';
 export { useFullscreen } from '../chunk-XDTYBF2F.js';
@@ -80,19 +80,17 @@ export { Disclosure } from '../chunk-S4RCG44T.js';
 export { Divider } from '../chunk-6KWNXIDE.js';
 export { DownloadButton } from '../chunk-BJCFNRGH.js';
 export { downloadText, safeFilename, useDownload } from '../chunk-F6NZOVWL.js';
-export { ConfirmField, confirmMatches } from '../chunk-YSY6UJ4F.js';
-export { InlineCode } from '../chunk-5CLW2CXT.js';
 export { CONFLICT_NOTE_LABELS, ConflictNote } from '../chunk-UO7JZVCO.js';
 export { Container } from '../chunk-QVE4GJAT.js';
+export { ChoiceList } from '../chunk-QBXZLGK2.js';
 export { CursorFlag } from '../chunk-3BYIWOTV.js';
 export { PresenceRing, presenceHueClass } from '../chunk-I6POAB4V.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-AV6YX4GZ.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';
 export { PageHeader } from '../chunk-HOXGBLEY.js';
 export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-PGRPNDWM.js';
 export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-RE6ED5TO.js';
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-LG244LY7.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-BXSGT3YC.js';
 export { ChoiceButtons } from '../chunk-YSJC7AZC.js';
-export { ChoiceList } from '../chunk-QBXZLGK2.js';
 export { CodeBlock } from '../chunk-GDDE4UM7.js';
 export { CopyButton, Copyable } from '../chunk-W46LPU4R.js';
 export { useClipboard, writeClipboard } from '../chunk-STJ7QBC3.js';
@@ -105,6 +103,8 @@ export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-IC64IWOO.js';
 export { Document, DocumentTitle } from '../chunk-WI6K5M5X.js';
 export { COMPOSER_COUNTER_AT, Composer } from '../chunk-VJLYGPPE.js';
 export { Kbd, isApplePlatform, keyGlyph } from '../chunk-SMBKXWML.js';
+export { ConfirmField, confirmMatches } from '../chunk-YSY6UJ4F.js';
+export { InlineCode } from '../chunk-5CLW2CXT.js';
 export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth, today } from '../chunk-GXQ3B46I.js';
 export { Callout } from '../chunk-SVSCLHHI.js';
 export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-TXAFKH2A.js';
@@ -148,9 +148,9 @@ export { DisclosureAnatomy } from '../chunk-ENJUPIND.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from '../chunk-PQADV6P6.js';
 export { Count } from '../chunk-BHHIIK3M.js';
 export { ADD_PILL_MS, AddPill } from '../chunk-TROLVEZY.js';
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-G5TAKMEA.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-BFQK7CYJ.js';
 import '../chunk-IG75YMUN.js';
-export { Menu } from '../chunk-4MIM356A.js';
+export { Menu } from '../chunk-UFKUWVMV.js';
 export { Button, ButtonLink } from '../chunk-OG6CL3EB.js';
 export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds } from '../chunk-HMPFGIWM.js';
 export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from '../chunk-R25RGPUB.js';

package/dist/index.js

@@ -9,10 +9,10 @@ export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTh
 export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from './chunk-NUZC6PJX.js';
 export { Timeline, TimelineItem } from './chunk-AUQPBL4O.js';
 export { ToastProvider, Toaster, useToast } from './chunk-QH3AKP2N.js';
+export { Table } from './chunk-V2N3BMOT.js';
 export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from './chunk-MUGM7SEG.js';
 export { TagGroup } from './chunk-E6UWRXNM.js';
 export { TagsInput } from './chunk-7ZNKEPLN.js';
-export { Table } from './chunk-V2N3BMOT.js';
 export { Text } from './chunk-IKBK4A5O.js';
 export { ThemeGallery } from './chunk-KLIEPFEZ.js';
 export { ThemeSwatch } from './chunk-MNFU2RNT.js';
@@ -28,8 +28,9 @@ export { Select } from './chunk-FC4YTTFJ.js';
 export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from './chunk-36CWC2NH.js';
 export { matchesShortcut, useShortcut } from './chunk-2FPENTCF.js';
 export { Prose } from './chunk-JCSA3XVH.js';
-export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from './chunk-ZAJHGDAW.js';
+export { PrincipalPicker } from './chunk-JEDWC3GI.js';
 export { QR_DARK, QR_LIGHT, QR_QUIET_ZONE, QrCode, qrModulePath, qrModules } from './chunk-Y56FM3K4.js';
+export { ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from './chunk-ZAJHGDAW.js';
 export { FRAME_HELLO_TIMEOUT_MS, SandboxedFrame } from './chunk-VYDFB6PJ.js';
 export { Skeleton } from './chunk-W5J7R5EB.js';
 export { SearchTrigger } from './chunk-6DRDCT22.js';
@@ -40,7 +41,6 @@ import './chunk-CENOOTAV.js';
 export { PricingCard } from './chunk-DQSXWQMJ.js';
 export { Tag } from './chunk-GFV4LJHH.js';
 export { StatusDot } from './chunk-WIATRXEJ.js';
-export { PrincipalPicker } from './chunk-JEDWC3GI.js';
 export { NewItemsNotice } from './chunk-PXU6HOZB.js';
 export { Note } from './chunk-63WJLRB2.js';
 export { FactLine, ObjectHeader, SetByLine } from './chunk-I7WXZOWA.js';
@@ -58,7 +58,7 @@ import './chunk-VYY56AMX.js';
 export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from './chunk-4PZ6FJKW.js';
 export { AutoGrid, Inline, Spacer, Stack } from './chunk-ZAC7SKUN.js';
 export { Link } from './chunk-FBSEJO2C.js';
-export { LinkInterstitial, openExternal } from './chunk-ZM7HLFOA.js';
+export { LinkInterstitial, openExternal } from './chunk-L2OQRPXJ.js';
 export { DEFAULT_FRAME_THEME, EXTERNAL_URL_MAX, FRAME_BRIDGE, FRAME_MESSAGE, FRAME_ORIGIN_MODES, FRAME_SANDBOX_TOKENS, applyFrameTheme, checkFrameSandbox, externalUrl, frameFragment, frameOriginMatches, frameThemeMessage, httpOrigin, isFocusExit, isFrameNonce, negotiateBridge, parseFrameFragment, portTargetOrigin, readFrameHello, readFramePortMessage, readFrameTheme, readOpenLink } from './chunk-F6V2PTN6.js';
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from './chunk-ZXXDZJQN.js';
 export { useFullscreen } from './chunk-XDTYBF2F.js';
@@ -80,19 +80,17 @@ export { Disclosure } from './chunk-S4RCG44T.js';
 export { Divider } from './chunk-6KWNXIDE.js';
 export { DownloadButton } from './chunk-BJCFNRGH.js';
 export { downloadText, safeFilename, useDownload } from './chunk-F6NZOVWL.js';
-export { ConfirmField, confirmMatches } from './chunk-YSY6UJ4F.js';
-export { InlineCode } from './chunk-5CLW2CXT.js';
 export { CONFLICT_NOTE_LABELS, ConflictNote } from './chunk-UO7JZVCO.js';
 export { Container } from './chunk-QVE4GJAT.js';
+export { ChoiceList } from './chunk-QBXZLGK2.js';
 export { CursorFlag } from './chunk-3BYIWOTV.js';
 export { PresenceRing, presenceHueClass } from './chunk-I6POAB4V.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-AV6YX4GZ.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';
 export { PageHeader } from './chunk-HOXGBLEY.js';
 export { Toolbar, ToolbarOverflow, ToolbarWide } from './chunk-PGRPNDWM.js';
 export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from './chunk-RE6ED5TO.js';
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-LG244LY7.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-BXSGT3YC.js';
 export { ChoiceButtons } from './chunk-YSJC7AZC.js';
-export { ChoiceList } from './chunk-QBXZLGK2.js';
 export { CodeBlock } from './chunk-GDDE4UM7.js';
 export { CopyButton, Copyable } from './chunk-W46LPU4R.js';
 export { useClipboard, writeClipboard } from './chunk-STJ7QBC3.js';
@@ -105,6 +103,8 @@ export { COMMENT_THREAD_LABELS, CommentThread } from './chunk-IC64IWOO.js';
 export { Document, DocumentTitle } from './chunk-WI6K5M5X.js';
 export { COMPOSER_COUNTER_AT, Composer } from './chunk-VJLYGPPE.js';
 export { Kbd, isApplePlatform, keyGlyph } from './chunk-SMBKXWML.js';
+export { ConfirmField, confirmMatches } from './chunk-YSY6UJ4F.js';
+export { InlineCode } from './chunk-5CLW2CXT.js';
 export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth, today } from './chunk-GXQ3B46I.js';
 export { Callout } from './chunk-SVSCLHHI.js';
 export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from './chunk-TXAFKH2A.js';
@@ -148,9 +148,9 @@ export { DisclosureAnatomy } from './chunk-ENJUPIND.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from './chunk-PQADV6P6.js';
 export { Count } from './chunk-BHHIIK3M.js';
 export { ADD_PILL_MS, AddPill } from './chunk-TROLVEZY.js';
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from './chunk-G5TAKMEA.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from './chunk-BFQK7CYJ.js';
 import './chunk-IG75YMUN.js';
-export { Menu } from './chunk-4MIM356A.js';
+export { Menu } from './chunk-UFKUWVMV.js';
 export { Button, ButtonLink } from './chunk-OG6CL3EB.js';
 export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds } from './chunk-HMPFGIWM.js';
 export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from './chunk-R25RGPUB.js';

package/dist/styles.css

@@ -13304,7 +13304,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Menu-XIJ4LQUT.css */
+/* Menu-KEKAD3BZ.css */
 /*
  * The menu button's panel.
  *
@@ -13341,9 +13341,15 @@ svg.crewlet-datetime__chevron {
    * 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;
@@ -13500,6 +13506,7 @@ svg.crewlet-datetime__chevron {
 .crewlet-menu__text {
   display: flex;
   flex-direction: column;
+  gap: calc(var(--spacing-1) / 2);
   min-width: 0;
 }
 
@@ -13509,9 +13516,14 @@ svg.crewlet-datetime__chevron {
   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;
 }
 
@@ -13529,11 +13541,17 @@ svg.crewlet-datetime__chevron {
 /*
  * 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-direction: column;
-  gap: var(--spacing-1);
+  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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.21.0",
-    "@crewlethq/tokens": "0.21.0",
+    "@crewlethq/icons": "0.22.0",
+    "@crewlethq/tokens": "0.22.0",
     "uqr": "0.1.3"
   },
   "peerDependencies": {

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

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