@crewlethq/ui 0.39.0 → 0.40.1

package/dist/Tabs/Tabs.d.ts

@@ -7,6 +7,12 @@ import React, { type ReactNode, type Ref } from 'react';
  */
 export type TabsVariant = 'pill' | 'underline' | 'chip';
 export type TabsSize = 'sm' | 'md';
+/**
+ * What a row does with tabs it has no room for. `scroll` scrolls the row with
+ * its bar hidden; `menu` draws the tabs that fit and folds the rest into a
+ * "More" menu at the row's end.
+ */
+export type TabsOverflow = 'scroll' | 'menu';
 export interface TabsItem {
     /** Stable identity: the value reported, and half of the tab's id. */
     value: string;
@@ -26,6 +32,18 @@ export interface TabsItem {
      * replaces the count while it is set. `label` is what a screen reader hears.
      */
     marker?: TabsMarker | undefined;
+    /**
+     * What is happening behind the tab right now, IN WORDS ("running now"):
+     * drawn as a pulsing dot in place of the icon and read after the label. The
+     * words rather than a flag, so a tab cannot be marked without saying what
+     * the mark means; folded into "More", they are the item's second line.
+     */
+    live?: string | undefined;
+    /**
+     * How the tab reads folded into "More", where `label` is a node (a label
+     * drawn with a lock, say). A string `label` is used as it is.
+     */
+    menuLabel?: string | undefined;
     disabled?: boolean;
     /** Any extra props the consumer's renderItem needs to read. */
     [key: string]: unknown;
@@ -57,6 +75,20 @@ export interface TabsRenderItemProps {
     onSelect: () => void;
     /** Pre-rendered icon, label and count nodes for the tab body. */
     children: ReactNode;
+    /** Folded into "More" (overflow `menu`): drawn there, and kept here only to be measured. */
+    folded: boolean;
+    /**
+     * SPREAD THESE on the element you render. A folded link stays in the row to
+     * be measured, and these take it out of reach of the pointer, the keyboard
+     * and a screen reader, which meet it in the menu instead. Empty while it is
+     * drawn.
+     */
+    foldProps: TabsFoldProps;
+}
+/** What takes a folded item out of reach. See [TabsRenderItemProps.foldProps]. */
+export interface TabsFoldProps {
+    'aria-hidden'?: true;
+    inert?: true;
 }
 export interface TabsProps {
     items: TabsItem[];
@@ -64,6 +96,7 @@ export interface TabsProps {
     size?: TabsSize;
     /** Names the row. A tab row with no name is announced as "tab list" alone. */
     ariaLabel?: string;
+    /** On the row's root: the row, or with overflow `menu` on a tab list, the box holding the row and "More". */
     className?: string;
     /** Currently active item value. */
     value?: string;
@@ -89,6 +122,27 @@ export interface TabsProps {
      * without `renderItem` ignores it.
      */
     trailing?: ReactNode;
+    /**
+     * What the row does with tabs it has no room for. `scroll` (the default)
+     * scrolls it. `menu` draws the tabs that FIT, in order, and folds the rest
+     * into a "More" menu at its end, each entry with its figure; the tab the
+     * reader is on is always drawn, taking the last place that fits. The widths
+     * are measured, not guessed, and measured again whenever anything in the
+     * row changes size. Choosing an entry calls `onValueChange`, in router mode
+     * too, where it is the consumer's navigation.
+     */
+    overflow?: TabsOverflow | undefined;
+    /** The "More" trigger's words. */
+    moreLabel?: string | undefined;
+    /** The menu's accessible name. Defaults to "More of" the row's `ariaLabel`. */
+    moreMenuLabel?: string | undefined;
+    /**
+     * A sentence about every tab, at the row's far end, overflow `menu` only.
+     * It GIVES WAY TO THE TABS: drawn only where every tab fits beside it, and
+     * gone before a single tab folds, because a tab is a place and the note is
+     * not.
+     */
+    note?: ReactNode;
     /**
      * The row's root element, for a consumer that measures the row: which of
      * its items fit, and what folds into its trailing menu.
@@ -120,7 +174,7 @@ export declare function tabId(panelId: string, value: string): string;
  * says. In router mode that IS what the items are, so the root becomes a
  * `nav`, the tab roles go, and the consumer's own link carries the state.
  */
-export declare function Tabs({ items, variant, size, ariaLabel, className, value, onValueChange, panelId, renderItem, trailing, ref, }: TabsProps): React.JSX.Element;
+export declare function Tabs({ items, variant, size, ariaLabel, className, value, onValueChange, panelId, renderItem, trailing, overflow, moreLabel, moreMenuLabel, note, ref, }: TabsProps): React.JSX.Element;
 export interface TabPanelProps {
     /** The same id the row was given as `panelId`. */
     id: string;

package/dist/Tabs/fold.d.ts

@@ -0,0 +1,54 @@
+import { type RefObject } from 'react';
+/**
+ * Which tabs of a row fold into its "More" menu, from their widths: the
+ * arithmetic, apart from the DOM it is measured in, so it can be held to its
+ * rules directly.
+ *
+ * `widths` are the tabs' own, in order; `space` is the row's inner width,
+ * `gap` the space between two items and `more` the "More" trigger's width.
+ * Returns the INDEXES that fold. Everything fits, none. Otherwise the row
+ * keeps the tab the reader is on (`current`) and, before it, as long a run of
+ * the others FROM THE START as fits beside it and the trigger. A run, never a
+ * pick of whichever narrower tabs would squeeze in further along, because a
+ * row whose order changes with its width is one a reader cannot learn.
+ */
+export declare function foldTabs({ widths, current, space, gap, more, }: {
+    widths: readonly number[];
+    current: number;
+    space: number;
+    gap: number;
+    more: number;
+}): number[];
+/**
+ * Whether a row's note has room at its end BESIDE EVERY TAB.
+ *
+ * THE TABS COME FIRST. A note is a sentence about how to read the row; a tab
+ * is a place. So the note takes no room a tab would need: it is drawn only
+ * where every tab fits with it, and gives way before a single tab folds. A
+ * note measured at no width is one the page is not drawing, and has nothing
+ * to fit.
+ */
+export declare function noteFits({ widths, space, gap, note, }: {
+    widths: readonly number[];
+    space: number;
+    gap: number;
+    note: number;
+}): boolean;
+/** What a folding row draws: the values that live in "More", and whether its note is shown. */
+export interface Fold {
+    folded: readonly string[];
+    note: boolean;
+}
+/**
+ * The fold of a row, MEASURED after layout and again whenever the row or
+ * anything in it changes size: a count arriving, a web font replacing its
+ * fallback, a density step.
+ *
+ * A folded tab STAYS IN THE DOCUMENT, out of the flow and invisible, so its
+ * width is known when the row grows again; "More" and the note are always in
+ * the document for the same reason. `box` is the element whose inner width is
+ * the room the row has; `row` holds the tabs. They are one element for a row
+ * of links, and two for a tab list, which holds tabs alone and leaves "More"
+ * beside it, where the box's own gap and the row's chrome are counted too.
+ */
+export declare function useFold(enabled: boolean, box: RefObject<HTMLElement | null>, row: RefObject<HTMLElement | null>, values: readonly string[], current: string | undefined): Fold;

package/dist/Tabs/index.d.ts

@@ -1,4 +1,4 @@
 import '../HitArea/HitArea.css';
 import './Tabs.css';
 export { TabPanel, Tabs, tabId } from './Tabs.js';
-export type { TabPanelProps, TabsItem, TabsMarker, TabsProps, TabsRenderItemProps, TabsSize, TabsVariant, } from './Tabs.js';
+export type { TabPanelProps, TabsFoldProps, TabsItem, TabsMarker, TabsOverflow, TabsProps, TabsRenderItemProps, TabsSize, TabsVariant, } from './Tabs.js';

package/dist/Tabs/index.js

@@ -1,6 +1,13 @@
-export { TabPanel, Tabs, tabId } from '../chunk-7SDUKCNW.js';
-import '../chunk-RKKO7QHH.js';
+export { TabPanel, Tabs, tabId } from '../chunk-X4IXXLWM.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-D6FEHY5G.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Tabs/roving.d.ts

@@ -63,9 +63,9 @@ export interface RovingOptions {
  * under manual activation and wants `followFocus`, because the stop and the
  * selection have come apart; a caller that passes one wants neither.
  *
- * A DISABLED BUTTON IS STEPPED OVER rather than focused: a browser refuses it
- * focus, so a move that lands on one drops focus on the page body and the
- * next arrow press does nothing at all.
+ * A DISABLED OR INERT BUTTON IS STEPPED OVER rather than focused: a browser
+ * refuses it focus, so a move that lands on one drops focus on the page body
+ * and the next arrow press does nothing at all.
  */
 export declare function useRoving(count: number, select: ((index: number) => void) | null, { followFocus, columns }?: RovingOptions): {
     buttons: import("react").RefObject<(HTMLButtonElement | null)[]>;

package/dist/{Tabs-WIF7457H.css → Tabs-S7F4RWAN.css}

@@ -400,6 +400,83 @@
   display: contents;
 }
 
+/* ─── Fold (overflow: menu) ───────────────────────────────────── */
+/*
+ * THE ROW NEVER SCROLLS: what does not fit has already left it for "More".
+ * A scroll with its bar hidden cut a whole tab off at a phone's edge with
+ * nothing to say it was there, and a fade at the edge is too quiet to read as
+ * "there is more"; a menu that says More is not.
+ */
+.crewlet-tabs--fold {
+  position: relative;
+  min-width: 0;
+  overflow: visible;
+}
+
+/*
+ * A FOLDED ITEM STAYS IN THE DOCUMENT, out of the flow and invisible, so it
+ * can be measured again when the row grows. Pinned to the row's start, inside
+ * it, so it can never widen the page. A tab, "More" with nothing in it, and a
+ * note with no room alike.
+ */
+.crewlet-tabs--fold > .crewlet-tabs__tab.is-folded,
+.crewlet-tabs__more.is-folded,
+.crewlet-tabs__note.is-folded {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* "More" is the quiet menu button, centred on the tabs' line. */
+.crewlet-tabs__more {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+/* The note sits at the row's far end, a sentence about every tab and never
+   one of them. */
+.crewlet-tabs__note {
+  flex: none;
+  align-self: center;
+  margin-inline-start: auto;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
+.crewlet-tabs__trailing {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+/*
+ * A TAB LIST HOLDS TABS ALONE, so its "More" stands beside it in a box. The
+ * row is as wide as the tabs it draws, and the underline's rule is the box's,
+ * painted on its last pixel row (the one the row's own border sits on), so
+ * it runs on under "More" to the edge.
+ */
+.crewlet-tabs-fold {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-tabs-fold > .crewlet-tabs {
+  flex: 0 1 auto;
+  width: auto;
+  min-width: 0;
+}
+
+.crewlet-tabs-fold--underline {
+  box-shadow: inset 0 -1px 0 var(--color-border-default);
+}
+
 /*
  * The slider ARRIVES rather than travels, and a chip changes without a fade.
  * The indicator still moves; what stops is the animation between the two

package/dist/TagsInput/index.js

@@ -1,7 +1,7 @@
 export { TagsInput } from '../chunk-BH52LIY6.js';
 import '../chunk-KYIAFNU7.js';
-import '../chunk-WIATRXEJ.js';
 import '../chunk-7KHM2FZH.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';

package/dist/ThemeGallery/index.js

@@ -1,7 +1,7 @@
-export { ThemeGallery } from '../chunk-PPHTIKZO.js';
+export { ThemeGallery } from '../chunk-E4BOVKNJ.js';
 import '../chunk-MNFU2RNT.js';
 import '../chunk-7KHM2FZH.js';
-import '../chunk-RKKO7QHH.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ThemeSwitcher/index.js

@@ -1,11 +1,18 @@
-export { DensitySwitcher, ThemeSwitcher } from '../chunk-ZMDYQ2HH.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-KWWP3D7M.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from '../chunk-ZXXDZJQN.js';
-import '../chunk-4ISUIS6F.js';
-import '../chunk-2QZ2VPHR.js';
-import '../chunk-7SDUKCNW.js';
-import '../chunk-RKKO7QHH.js';
+import '../chunk-OOC7Q67K.js';
+import '../chunk-4OK4DX3V.js';
+import '../chunk-X4IXXLWM.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-D6FEHY5G.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/VersionCompare/index.js

@@ -1,12 +1,19 @@
-export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-4LRAJXHL.js';
+export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-JSWOXRRE.js';
 import '../chunk-BVWSLXTY.js';
-import '../chunk-4ISUIS6F.js';
-import '../chunk-2QZ2VPHR.js';
-import '../chunk-7SDUKCNW.js';
-import '../chunk-RKKO7QHH.js';
+import '../chunk-OOC7Q67K.js';
+import '../chunk-4OK4DX3V.js';
+import '../chunk-X4IXXLWM.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-RA2ULG6H.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-D6FEHY5G.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{chunk-B5J23C73.js → chunk-2PEXZ7L4.js}

@@ -1,4 +1,4 @@
-import { SegmentedControl } from './chunk-2QZ2VPHR.js';
+import { SegmentedControl } from './chunk-4OK4DX3V.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './MergeConflicts-O44ESH4T.css';

package/dist/{chunk-TZYFTC4M.js → chunk-2VOHUGUA.js}

@@ -1,4 +1,4 @@
-import { SegmentedControl } from './chunk-2QZ2VPHR.js';
+import { SegmentedControl } from './chunk-4OK4DX3V.js';
 import { Tooltip } from './chunk-I33UIUZD.js';
 import { ArtifactIcon } from './chunk-ILDNJHRU.js';
 import { isApplePlatform, Kbd } from './chunk-SMBKXWML.js';

package/dist/{chunk-2QZ2VPHR.js → chunk-4OK4DX3V.js}

@@ -1,5 +1,5 @@
-import { tabId } from './chunk-7SDUKCNW.js';
-import { useRoving, tabStop } from './chunk-RKKO7QHH.js';
+import { tabId } from './chunk-X4IXXLWM.js';
+import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-ECGGQX2H.js → chunk-A44YHLCQ.js}

@@ -1,7 +1,7 @@
-import { HuePicker } from './chunk-F4LPQA4E.js';
+import { HuePicker } from './chunk-BA32AVKS.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { CharacterPicker } from './chunk-YEVG2X5R.js';
+import { CharacterPicker } from './chunk-SNQRGH4A.js';
 import { Avatar } from './chunk-PZKHBB7D.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AvatarPicker-PREY36MG.css';

package/dist/{chunk-F4LPQA4E.js → chunk-BA32AVKS.js}

@@ -1,5 +1,5 @@
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { SegmentedControl } from './chunk-2QZ2VPHR.js';
+import { SegmentedControl } from './chunk-4OK4DX3V.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/chunk-CV4NES3P.js

@@ -0,0 +1,9 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './PageNote-RHLXH3ML.css';
+import { jsx } from 'react/jsx-runtime';
+
+function PageNote({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("p", { ...rest, className: cx("crewlet-page-note", className), children });
+}
+
+export { PageNote };

package/dist/{chunk-PPHTIKZO.js → chunk-E4BOVKNJ.js}

@@ -1,6 +1,6 @@
 import { ThemeSwatch } from './chunk-MNFU2RNT.js';
 import { useHighlightRest } from './chunk-7KHM2FZH.js';
-import { useRoving, tabStop } from './chunk-RKKO7QHH.js';
+import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ThemeGallery-X35Y25EX.css';
 import { useId } from 'react';

package/dist/{chunk-W7PAIVAP.js → chunk-E7QLG3PG.js}

@@ -1,31 +1,34 @@
+import { LockedLabel } from './chunk-OHGH7O6T.js';
 import { KeyChip } from './chunk-FYTIJM2T.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
-import './SidebarNav-7SGUZYKK.css';
-import { useId, useState } from 'react';
+import './SidebarNav-YI74SPDC.css';
+import { createContext, useId, useContext, useState } from 'react';
 import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+var GroupLocked = createContext(false);
 function SidebarNav({ label, className, children }) {
   return /* @__PURE__ */ jsx("nav", { className: cx("crewlet-sidebar-nav", className), "aria-label": label, children });
 }
-function NavGroup({ label, action, className, children }) {
+function NavGroup({ label, action, locked, className, children }) {
   const id = useId();
   const named = label !== void 0 && label !== null && label !== false && label !== "";
+  const groupLocked = named && locked !== void 0 && locked !== "";
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx("crewlet-nav-group", className),
+      className: cx("crewlet-nav-group", groupLocked && "crewlet-nav-group--locked", className),
       role: named ? "group" : void 0,
       "aria-labelledby": named ? id : void 0,
       children: [
         named || action ? /* @__PURE__ */ jsxs("div", { className: "crewlet-nav-group__head", children: [
-          named ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-group__label", id, children: label }) : null,
+          named ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-group__label", id, children: /* @__PURE__ */ jsx(LockedLabel, { reason: groupLocked ? locked : void 0, children: label }) }) : null,
           action ? /* @__PURE__ */ jsx("button", { type: "button", className: "crewlet-nav-group__action", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ jsx("span", { className: "crewlet-nav-group__action-icon", "aria-hidden": true, children: action.icon }) }) : null
         ] }) : null,
-        children
+        /* @__PURE__ */ jsx(GroupLocked.Provider, { value: groupLocked, children })
       ]
     }
   );
@@ -48,6 +51,9 @@ function NavItem({
   href,
   current = false,
   disabledReason,
+  locked,
+  title,
+  onPrefetch,
   renderLink,
   onClick,
   children,
@@ -58,6 +64,7 @@ function NavItem({
   className
 }) {
   const id = useId();
+  const inLockedGroup = useContext(GroupLocked);
   const [ownExpanded, setOwnExpanded] = useState(defaultExpanded);
   const open = expanded ?? ownExpanded;
   const nested = children !== void 0 && children !== null && children !== false;
@@ -72,7 +79,7 @@ function NavItem({
     lead ? /* @__PURE__ */ jsx(KeyChip, { className: "crewlet-nav-item__lead", children: lead }) : null,
     lead ? " " : null,
     /* @__PURE__ */ jsxs("span", { className: "crewlet-nav-item__label", children: [
-      label,
+      /* @__PURE__ */ jsx(LockedLabel, { reason: locked, mark: !inLockedGroup, children: label }),
       count || badge ? /* @__PURE__ */ jsx(VisuallyHidden, { children: spoken([count, badge]) }) : null
     ] }),
     count ? /* @__PURE__ */ jsx(Figure, { figure: count, mark: count.mark, className: "crewlet-nav-item__count" }) : null,
@@ -99,10 +106,24 @@ function NavItem({
       children: inside,
       ...href === void 0 ? {} : { href },
       ...current ? { "aria-current": "page" } : {},
-      ...onClick === void 0 ? {} : { onClick }
+      ...onClick === void 0 ? {} : { onClick },
+      ...title === void 0 ? {} : { title },
+      ...onPrefetch === void 0 ? {} : { onPointerEnter: onPrefetch, onFocus: onPrefetch }
     });
   } else if (href !== void 0) {
-    row = /* @__PURE__ */ jsx("a", { className: rowClass, href, "aria-current": current ? "page" : void 0, onClick, children: inside });
+    row = /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: rowClass,
+        href,
+        "aria-current": current ? "page" : void 0,
+        onClick,
+        title,
+        onPointerEnter: onPrefetch,
+        onFocus: onPrefetch,
+        children: inside
+      }
+    );
   } else {
     row = /* @__PURE__ */ jsxs(
       "button",

package/dist/{chunk-RKKO7QHH.js → chunk-EGMQURBR.js}

@@ -5,22 +5,23 @@ function tabStop(items, selected) {
   if (selected >= 0 && !items[selected]?.disabled) return selected;
   return items.findIndex((item) => !item.disabled);
 }
+function reachable(el) {
+  return Boolean(el) && !el.disabled && !el.hasAttribute("inert");
+}
 function useRoving(count, select, { followFocus = false, columns } = {}) {
   const buttons = useRef([]);
   const [landed, setLanded] = useState(null);
   function step(from, by) {
     for (let i = 0; i < count; i += 1) {
       const at = ((from + by * i) % count + count) % count;
-      const el = buttons.current[at];
-      if (el && !el.disabled) return at;
+      if (reachable(buttons.current[at])) return at;
     }
     return null;
   }
   function rowStep(at, by, across) {
     const target = at + by * across;
     if (target < 0 || target >= count) return null;
-    const el = buttons.current[target];
-    return el && !el.disabled ? target : null;
+    return reachable(buttons.current[target]) ? target : null;
   }
   function moveTo(key, at, vertical) {
     if (count === 0) return null;

package/dist/{chunk-GMW4ZHST.js → chunk-EX22Q5SH.js}

@@ -1,6 +1,6 @@
 import { Toolbar } from './chunk-NR4CPM4T.js';
-import { SegmentedControl } from './chunk-2QZ2VPHR.js';
-import { tabId } from './chunk-7SDUKCNW.js';
+import { SegmentedControl } from './chunk-4OK4DX3V.js';
+import { tabId } from './chunk-X4IXXLWM.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './MarkdownEditor-WOKV7CLK.css';

package/dist/{chunk-F3WZ5AKM.js → chunk-GFYQKMQZ.js}

@@ -1,6 +1,6 @@
 import { Select } from './chunk-XQZ6EWOE.js';
 import { SHEET_LABELS, SHEET_COLUMN_TYPES, optionHue, retypeColumn } from './chunk-LFSIKGRQ.js';
-import { HueSwatch } from './chunk-F4LPQA4E.js';
+import { HueSwatch } from './chunk-BA32AVKS.js';
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
 import { Checkbox } from './chunk-AXS6MBNH.js';
 import { FormField, Input } from './chunk-TYONQSOK.js';

package/dist/{chunk-DYB66CNM.js → chunk-GR4YM7HT.js}

@@ -6,7 +6,7 @@ import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
-import './AppShell-NDU4XMGF.css';
+import './AppShell-VE2MAV42.css';
 import { createContext, forwardRef, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { ChevronUpGlyph, ChevronsUpDownGlyph, ChevronRightGlyph, MenuGlyph } from '@crewlethq/icons/glyphs';
@@ -231,10 +231,13 @@ function ShellDrawer({
     }
   );
 }
-function AppShellRail({ header, footer, className, children }) {
+function AppShellRail({ header, search, footer, className, children }) {
   return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-app-shell__rail-inner", className), children: [
     header ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-head", children: header }) : null,
-    /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-body", children }),
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__rail-body", children: [
+      search ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-search", children: search }) : null,
+      children
+    ] }),
     footer ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-foot", children: footer }) : null
   ] });
 }