@crewlethq/ui 0.40.0 → 0.41.0

package/README.md

@@ -204,6 +204,14 @@ 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.41.0
+
+**The rail's head carries a status** (`AppShell.Rail` `status`, drawn with `AppShell.RailStatus`). An application's own state, such as its engine's, stands compact at the end of the head's line, beside the name: a status dot and, when something stands against it, a count in the foot row's inks (the warning ink with its mark for alarms). The state's words are the status's name and title rather than a line of the rail ("Engine serving, 1 alarm"), so the count is read once, in words. A status that opens a panel is the panel's trigger, as a foot row is (`aria-haspopup`, `aria-expanded` and `aria-controls` reach its button, and a `Popover` anchors to it), and `label` names it where a press does something the state does not say ("Engine signed out. Sign in"). A status nothing presses is a statement with no place in the tab order. It reserves the width of a dot and a two-figure count, and a `BrandLockup` beside it gives up its end inset to the head's gap, so the name truncates at one place whatever the count says, it is a 24px target each way with its focus ring inside its box, and it ends on the nav's gutter, where every row's background ends. It stands in the drawer's head the same way. The foot's doc now names it the place for what a reader reaches for rarely.
+
+## Changes in 0.40.1
+
+**The rail's foot stands on the compact step.** What a reader reaches for rarely (a settings link, a status row, who they are) takes less of the rail's height: the foot's rows are 26px (`--size-control-sm`, through `--crewlet-rail-foot-row`) where they were the nav's 30px, the foot's gap is 2px and its inset 4px where they were 4px and 8px, and the account row spends 2px around its name and detail where it spent 8px. A foot of Settings, an engine row and the account row is 101px tall where it was 133px. Only heights change: every row keeps its order, its columns, its glyphs and its words, the rows above the foot keep their 30px step, and every target still clears 24px, with the targets of neighbouring rows meeting across the gap.
+
 ## Changes in 0.40.0
 
 The engine dashboard's own lists, page parts and navigation pieces, moved into the kit so every application draws them from one place.

package/dist/AppShell/AppShell.d.ts

@@ -103,6 +103,7 @@ export declare function AppShell({ sidebar, topbar, banner, footer, mainId, main
 export declare namespace AppShell {
     var Rail: typeof AppShellRail;
     var RailRow: import("react").ForwardRefExoticComponent<AppShellRailRowProps & import("react").RefAttributes<HTMLElement>>;
+    var RailStatus: import("react").ForwardRefExoticComponent<AppShellRailStatusProps & import("react").RefAttributes<HTMLElement>>;
     var Topbar: typeof AppShellTopbar;
     var Toggle: typeof AppShellToggle;
     var AccountRow: typeof import("./AccountRow.js").AccountRow;
@@ -122,16 +123,24 @@ export interface AppShellRailProps {
      */
     search?: ReactNode;
     /**
-     * The foot: what the engine is doing, the theme and density controls. An
-     * `<AppShell.RailRow>` puts a line there on the rail's own insets, so its
-     * mark lands on the line every nav glyph above it sits on.
+     * A compact status at the end of the head's line, beside the name the head
+     * carries: an `<AppShell.RailStatus>`, the application's own state in a
+     * dot and a count. It takes its own width, so the name keeps the rest and
+     * truncates there, and it stands in the drawer's head the same way.
+     */
+    status?: ReactNode;
+    /**
+     * The foot: what a reader reaches for rarely, such as a settings link and
+     * their own account row. An `<AppShell.RailRow>` puts a line there on the
+     * rail's own insets, so its mark lands on the line every nav glyph above it
+     * sits on. A state the application reports belongs in `status`, compact.
      */
     footer?: ReactNode;
     className?: string | undefined;
     children?: ReactNode;
 }
 /** The rail's three regions: a head, a scrolling middle, and a foot. */
-export declare function AppShellRail({ header, search, footer, className, children }: AppShellRailProps): import("react").JSX.Element;
+export declare function AppShellRail({ header, search, status, footer, className, children }: AppShellRailProps): import("react").JSX.Element;
 /**
  * A figure at the end of a row in the foot, and what it counts.
  *
@@ -262,6 +271,65 @@ export type AppShellRailRowProps = StaticRailRowProps | ActionRailRowProps;
  * says whether it is open.
  */
 export declare const AppShellRailRow: import("react").ForwardRefExoticComponent<AppShellRailRowProps & import("react").RefAttributes<HTMLElement>>;
+/** What the head's status says, whether or not it is a control. */
+interface RailStatusContent {
+    /** The state's mark: a status dot. The status draws no words, so the mark and the count are what is seen. */
+    icon: ReactNode;
+    /**
+     * The state in words, "Engine serving". Not drawn: it is the status's name,
+     * read by assistive technology and shown as its title, with the count's
+     * words after it ("Engine serving, 1 alarm").
+     */
+    children: string;
+    /** How many of something stands against the state, drawn as a row's count is. */
+    count?: RailRowCount | undefined;
+    /** A mark after the count, for a state a press resolves: the key beside "sign in". */
+    trailing?: ReactNode;
+    className?: string | undefined;
+}
+/** A status the head states and nothing presses. */
+export interface StaticRailStatusProps extends RailStatusContent {
+    onClick?: undefined;
+    label?: undefined;
+    'aria-expanded'?: undefined;
+    'aria-haspopup'?: undefined;
+    'aria-controls'?: undefined;
+}
+/** A status that opens something: the engine's panel. */
+export interface ActionRailStatusProps extends RailStatusContent {
+    onClick: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Names the control where the state and its count are not what pressing it
+     * does ("Engine signed out. Sign in"). It replaces that name, and the title.
+     */
+    label?: string | undefined;
+    /** Whether the panel it opens is open, as a `Popover` or a `Menu` trigger passes it. */
+    'aria-expanded'?: boolean | undefined;
+    /** What it opens. */
+    'aria-haspopup'?: AriaAttributes['aria-haspopup'];
+    /** The panel it opens, while it is open. */
+    'aria-controls'?: string | undefined;
+}
+export type AppShellRailStatusProps = StaticRailStatusProps | ActionRailStatusProps;
+/**
+ * The application's state, compact, at the end of the rail head's line.
+ *
+ * A FOOT ROW'S MEANING IN A DOT AND A COUNT. The state's words are its name
+ * and its title rather than a line of the rail ("Engine serving, 1 alarm"),
+ * so a sighted reader reads the dot and the count, and hovers for the words,
+ * and a screen reader is told what a foot row would have told it. The count
+ * is the row's own (`RailRowCount`), in the same inks.
+ *
+ * IT TAKES A FIXED FLOOR OF WIDTH, a dot and a two-figure count, so the
+ * name beside it truncates at one place whatever the count says: the name
+ * does not lose a character when an alarm is raised. A count wider than the
+ * floor still grows the status rather than being cut.
+ *
+ * A STATUS THAT OPENS A PANEL IS ITS TRIGGER, as the foot's row is: the
+ * element goes to `ref` and the popup attributes reach the button, so a
+ * `Popover` anchors to it and it says whether the panel is open.
+ */
+export declare const AppShellRailStatus: import("react").ForwardRefExoticComponent<AppShellRailStatusProps & import("react").RefAttributes<HTMLElement>>;
 export interface AppShellToggleProps {
     className?: string | undefined;
 }

package/dist/AppShell/index.d.ts

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

package/dist/AppShell/index.js

@@ -1,4 +1,4 @@
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-KKNHMXTE.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-SCPEMLLY.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-D6FEHY5G.js';
 import '../chunk-OMV5W53A.js';

package/dist/{AppShell-NPSWZ3XW.css → AppShell-V3TAAYL3.css}

@@ -155,6 +155,68 @@
   min-width: 0;
 }
 
+/*
+ * THE HEAD'S STATUS, at the end of the name's line (`AppShell.RailStatus`):
+ * the application's state as a dot and a count, its words in its name and
+ * title. It ends on the nav's gutter, where every row's background ends, and
+ * it reserves the width of a dot and a two-figure count, so the name beside
+ * it truncates at one place whether the engine is healthy or has alarms.
+ */
+.crewlet-app-shell__rail-status {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: calc(var(--size-target-min) * 2 + var(--spacing-1));
+  margin-inline-end: var(--size-nav-gutter);
+}
+
+/* A lockup beside a status gives up its end inset: the head's gap parts the
+   two, and the inset is what kept a lockup alone on its line off the edge. */
+.crewlet-app-shell__rail-head:has(> .crewlet-app-shell__rail-status) > .crewlet-brand {
+  padding-inline-end: 0;
+}
+
+/* The dot and the count on one compact target: the 24px floor each way. */
+.crewlet-app-shell__rail-status-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--spacing-1) + var(--spacing-1) / 2);
+  min-width: var(--size-target-min);
+  min-height: var(--size-target-min);
+  margin: 0;
+  padding: 0 var(--spacing-1);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font: inherit;
+}
+
+.crewlet-app-shell__rail-status-icon,
+.crewlet-app-shell__rail-status-trailing {
+  display: inline-flex;
+  align-items: center;
+}
+
+.crewlet-app-shell__rail-status-mark--action {
+  cursor: pointer;
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* Open is pointed at, as the foot's row draws it: the lift stays while the panel is open. */
+.crewlet-app-shell__rail-status-mark--action:hover,
+.crewlet-app-shell__rail-status-mark--action[aria-expanded='true'] {
+  background: var(--color-surface-hover);
+}
+
+/* Inside its own box, so the ring is never cut by the head or the drawer's edge. */
+.crewlet-app-shell__rail-status-mark--action:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
 /*
  * THE RAIL'S FIELD ON THE NAV'S COLUMNS. It stands on the nav's gutter, so
  * its right edge is where every row's background ends; and its glyph stands
@@ -171,14 +233,22 @@
 }
 
 /* The same gutter the nav takes, so what the foot says lines up with the rows
-   above it rather than sitting further out. */
+   above it rather than sitting further out.
+
+   THE FOOT IS THE COMPACT STEP. It holds what a reader reaches for rarely (a
+   settings link, the engine's state, who they are), so its rows stand on the
+   small control step (`--crewlet-rail-foot-row`, 26px, never under the 24px
+   target) on a half-step gap and a one-step inset, where the nav above keeps
+   its 30px rows. Only heights change: every row keeps its order, columns,
+   glyphs and words. */
 .crewlet-app-shell__rail-foot {
-  --crewlet-rail-foot-gap: var(--spacing-1);
+  --crewlet-rail-foot-gap: calc(var(--spacing-1) / 2);
+  --crewlet-rail-foot-row: var(--size-control-sm);
   flex: none;
   display: flex;
   flex-direction: column;
   gap: var(--crewlet-rail-foot-gap);
-  padding: var(--spacing-2) var(--size-nav-gutter);
+  padding: var(--spacing-1) var(--size-nav-gutter);
   border-top: 1px solid var(--color-border-default);
 }
 
@@ -279,6 +349,14 @@
   min-width: 14px;
 }
 
+/* The foot's own step (see `.crewlet-app-shell__rail-foot`), for its rows and
+   for a navigation dropped into it, whose rows keep the rail's columns. */
+.crewlet-app-shell__rail-foot > .crewlet-app-shell__rail-row--action:not(.crewlet-app-shell__rail-row--block),
+.crewlet-app-shell__rail-foot > .crewlet-btn,
+.crewlet-app-shell__rail-foot .crewlet-nav-item__row {
+  min-height: var(--crewlet-rail-foot-row);
+}
+
 /*
  * OPEN IS POINTED AT. The row a panel is open from keeps the hover's lift for
  * as long as the panel is open, drawn from `aria-expanded` so the picture and
@@ -684,7 +762,8 @@
   .crewlet-app-shell__rail,
   .crewlet-app-shell__rail[data-open='true'],
   .crewlet-app-shell__rail-row--action,
-  .crewlet-app-shell__rail-foot > .crewlet-btn {
+  .crewlet-app-shell__rail-foot > .crewlet-btn,
+  .crewlet-app-shell__rail-status-mark--action {
     transition: none;
   }
 }
@@ -731,9 +810,16 @@
  * whatever size of badge a caller hands the row, it is centred where a glyph
  * is, and the row takes the nav row's pad and its glyph-to-word gap.
  */
+.crewlet-app-shell__rail-foot .crewlet-account-row {
+  --crewlet-account-row-pad: var(--spacing-0);
+}
+
 .crewlet-app-shell__rail-foot .crewlet-account-row__who {
   --crewlet-hit-area-block-start: calc(var(--crewlet-rail-foot-gap) / 2 + var(--crewlet-account-row-pad));
   gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  /* On the foot's compact step: the two lines of name and detail with half a
+     step above and below them, which still clears the avatar. */
+  padding-block: calc(var(--spacing-1) / 2);
   padding-inline-start: var(--size-nav-row-pad);
 }
 

package/dist/DataView/index.js

@@ -1,4 +1,4 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-QRKT4XTT.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-6QNN3WIT.js';
 import '../chunk-HOXGBLEY.js';
 import '../chunk-UB6MLXUL.js';
 import '../chunk-FXBGEANQ.js';
@@ -6,9 +6,9 @@ import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-IAGYPTEJ.js';
 import '../chunk-7KHM2FZH.js';
+import '../chunk-NR4CPM4T.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-NR4CPM4T.js';
 import '../chunk-AXS6MBNH.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';

package/dist/{chunk-KKNHMXTE.js → chunk-SCPEMLLY.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-NPSWZ3XW.css';
+import './AppShell-V3TAAYL3.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,9 +231,12 @@ function ShellDrawer({
     }
   );
 }
-function AppShellRail({ header, search, footer, className, children }) {
+function AppShellRail({ header, search, status, 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,
+    header || status ? /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__rail-head", children: [
+      header,
+      status ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-status", children: status }) : null
+    ] }) : null,
     /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__rail-body", children: [
       search ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-search", children: search }) : null,
       children
@@ -241,6 +244,25 @@ function AppShellRail({ header, search, footer, className, children }) {
     footer ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-foot", children: footer }) : null
   ] });
 }
+function countWords(count) {
+  return `, ${String(count.value)} ${count.label}`;
+}
+function RailCountFigure({ count }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cx(
+        "crewlet-app-shell__rail-row-count",
+        count.tone === "warning" && "crewlet-app-shell__rail-row-count--warning"
+      ),
+      "aria-hidden": true,
+      children: [
+        count.mark ? /* @__PURE__ */ jsx("span", { className: "crewlet-app-shell__rail-row-count-mark", children: count.mark }) : null,
+        count.value
+      ]
+    }
+  );
+}
 function opensSomething(haspopup) {
   return haspopup !== void 0 && haspopup !== false && haspopup !== "false";
 }
@@ -265,7 +287,7 @@ var AppShellRailRow = forwardRef(function AppShellRailRow2({
       /* @__PURE__ */ jsxs("span", { className: "crewlet-app-shell__rail-row-text", children: [
         /* @__PURE__ */ jsxs("span", { className: "crewlet-app-shell__rail-row-label", children: [
           children,
-          count ? /* @__PURE__ */ jsx(VisuallyHidden, { children: `, ${String(count.value)} ${count.label}` }) : null
+          count ? /* @__PURE__ */ jsx(VisuallyHidden, { children: countWords(count) }) : null
         ] }),
         block ? /* @__PURE__ */ jsxs(Fragment, { children: [
           " ",
@@ -274,20 +296,7 @@ var AppShellRailRow = forwardRef(function AppShellRailRow2({
       ] }),
       count ? /* @__PURE__ */ jsxs(Fragment, { children: [
         " ",
-        /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: cx(
-              "crewlet-app-shell__rail-row-count",
-              count.tone === "warning" && "crewlet-app-shell__rail-row-count--warning"
-            ),
-            "aria-hidden": true,
-            children: [
-              count.mark ? /* @__PURE__ */ jsx("span", { className: "crewlet-app-shell__rail-row-count-mark", children: count.mark }) : null,
-              count.value
-            ]
-          }
-        )
+        /* @__PURE__ */ jsx(RailCountFigure, { count })
       ] }) : null,
       trailing ? /* @__PURE__ */ jsxs(Fragment, { children: [
         " ",
@@ -315,6 +324,47 @@ var AppShellRailRow = forwardRef(function AppShellRailRow2({
     }
   );
 });
+var AppShellRailStatus = forwardRef(function AppShellRailStatus2({
+  icon,
+  children,
+  count,
+  trailing,
+  onClick,
+  label,
+  className,
+  "aria-expanded": expanded,
+  "aria-haspopup": haspopup,
+  "aria-controls": controls
+}, ref) {
+  const name = label ?? `${children}${count ? countWords(count) : ""}`;
+  const marks = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-app-shell__rail-status-icon", "aria-hidden": true, children: icon }),
+    count ? /* @__PURE__ */ jsx(RailCountFigure, { count }) : null,
+    trailing ? /* @__PURE__ */ jsx("span", { className: "crewlet-app-shell__rail-status-trailing", "aria-hidden": true, children: trailing }) : null
+  ] });
+  const shape = cx("crewlet-app-shell__rail-status-mark", className);
+  if (onClick === void 0) {
+    return /* @__PURE__ */ jsxs("span", { ref, className: shape, title: name, children: [
+      marks,
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: name })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cx(shape, "crewlet-app-shell__rail-status-mark--action", HIT_AREA_CLASS),
+      "aria-label": name,
+      title: name,
+      "aria-expanded": expanded,
+      "aria-haspopup": haspopup,
+      "aria-controls": controls,
+      onClick,
+      children: marks
+    }
+  );
+});
 function AppShellToggle({ className }) {
   const { drawerOpen, toggleDrawer, railId, toggleLabel, hasRail } = useAppShell();
   if (!hasRail) return null;
@@ -341,8 +391,9 @@ function AppShellTopbar({ title, titleId, actions, className, children, ...rest
 }
 AppShell.Rail = AppShellRail;
 AppShell.RailRow = AppShellRailRow;
+AppShell.RailStatus = AppShellRailStatus;
 AppShell.Topbar = AppShellTopbar;
 AppShell.Toggle = AppShellToggle;
 AppShell.AccountRow = AccountRow;
 
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell };
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, useAppShell };

package/dist/generated/index.js

@@ -1,11 +1,11 @@
 import '../chunk-S3QTFUJX.js';
 export { VersionTimeline } from '../chunk-NQCY44B3.js';
-export { matchesShortcut, useShortcut } from '../chunk-AYHIF6DH.js';
 export { WidgetFrame } from '../chunk-DFK5EQTU.js';
 export { ElementToPngError, elementToPng, parseCsv, serializeElement, toCsv } from '../chunk-FEJANUZK.js';
 export { ToastProvider, Toaster, useToast } from '../chunk-AC22RZKC.js';
 export { TreeCanvas } from '../chunk-5BUOMF6N.js';
 export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-JSWOXRRE.js';
+export { TagsInput } from '../chunk-BH52LIY6.js';
 export { ThemeGallery } from '../chunk-E4BOVKNJ.js';
 export { ThemeSwatch } from '../chunk-MNFU2RNT.js';
 export { DensitySwitcher, ThemeSwitcher } from '../chunk-KWWP3D7M.js';
@@ -13,21 +13,21 @@ export { ThemeToggle } from '../chunk-NP2C4Y4E.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
 export { TileGrid } from '../chunk-NNTO3TNC.js';
 export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-YPMGP2X4.js';
+export { Stepper } from '../chunk-5QWIJSQM.js';
 export { Switcher } from '../chunk-JKAGN4V4.js';
 export { Table } from '../chunk-V2N3BMOT.js';
 export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-4BJK7FE5.js';
-export { TagsInput } from '../chunk-BH52LIY6.js';
+export { SlideFilmstrip } from '../chunk-FBW3Q2OY.js';
 export { SlideGrid } from '../chunk-3V5T5K5H.js';
 export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from '../chunk-D3EJSLCL.js';
-export { StatGroup } from '../chunk-OUD75UB2.js';
 export { StatCard } from '../chunk-YPTTSJPM.js';
-export { Stepper } from '../chunk-5QWIJSQM.js';
+export { StatGroup } from '../chunk-OUD75UB2.js';
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-KNHUBHFX.js';
 export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-GFYQKMQZ.js';
 export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-3PR65I3H.js';
 export { TagGroup } from '../chunk-O2EGEONV.js';
+export { matchesShortcut, useShortcut } from '../chunk-AYHIF6DH.js';
 export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-7CGPPAYR.js';
-export { SlideFilmstrip } from '../chunk-FBW3Q2OY.js';
 export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from '../chunk-356JNSER.js';
 export { SearchTrigger } from '../chunk-6DRDCT22.js';
 export { SectionFrame, SectionFrameBody, SectionFrameNav } from '../chunk-INVSUFJK.js';
@@ -58,8 +58,8 @@ export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, lay
 export { Outline, scrollToHeading, useActiveHeading } from '../chunk-A5YKNRG6.js';
 export { PageNote } from '../chunk-CV4NES3P.js';
 export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-GPWJCP3U.js';
-import '../chunk-CENOOTAV.js';
 export { PinTile } from '../chunk-6MIXD6IW.js';
+import '../chunk-CENOOTAV.js';
 export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-2PEXZ7L4.js';
 export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from '../chunk-UGNUUVRI.js';
 export { NewItemsNotice } from '../chunk-PXU6HOZB.js';
@@ -76,21 +76,20 @@ export { AutoGrid, Inline, Spacer, Stack } from '../chunk-ZAC7SKUN.js';
 export { Link } from '../chunk-FBSEJO2C.js';
 export { LinkInterstitial, openExternal } from '../chunk-N3TFYBN3.js';
 export { List, ListItem } from '../chunk-NZWX27J7.js';
-import '../chunk-MICRGE3J.js';
+export { Highlight, highlightRanges, highlightTerms } from '../chunk-H6VKCIWV.js';
 import '../chunk-FFMCMSJB.js';
 export { IconTile } from '../chunk-IXJHTFXG.js';
 export { ImageUpload } from '../chunk-FWYHRU7M.js';
 export { InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from '../chunk-XYCADWZN.js';
 export { FactList } from '../chunk-RLJXVFEH.js';
-export { FileDrop, FilePickButton, droppedFiles, pickedFiles } from '../chunk-THDGBD6Y.js';
 export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from '../chunk-UYZZV4DZ.js';
+export { FileDrop, FilePickButton, droppedFiles, pickedFiles } from '../chunk-THDGBD6Y.js';
 export { FindingList } from '../chunk-NTB5LRRD.js';
 export { FollowBanner } from '../chunk-OED6LUWE.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 { IDLE_AFTER_MS, useFullscreen, useIdle } from '../chunk-W5XCNEZC.js';
-export { Highlight, highlightRanges, highlightTerms } from '../chunk-H6VKCIWV.js';
-export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-SYBYFQTY.js';
+import '../chunk-MICRGE3J.js';
 export { DownloadButton } from '../chunk-BEHFTRMZ.js';
 export { downloadBlob, downloadText, safeFilename, useDownload } from '../chunk-IW55G7XG.js';
 export { EditingStatus } from '../chunk-TC7DJTXI.js';
@@ -103,12 +102,13 @@ export { DescriptionList, DescriptionListItem } from '../chunk-MFS6F2P7.js';
 export { DIFF_LIST_LABELS, DiffList } from '../chunk-LFHCXZO5.js';
 export { DIFF_SUMMARY_LABELS, DIFF_VIEW_LABELS, DiffSummary, DiffView, MAX_DIFF_LINES, collapseDiff, diffLines, diffStat, firstChangedLines, splitLines } from '../chunk-BVWSLXTY.js';
 export { Divider } from '../chunk-6KWNXIDE.js';
+export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-SYBYFQTY.js';
 export { CONFLICT_NOTE_LABELS, ConflictNote } from '../chunk-UO7JZVCO.js';
 export { Container } from '../chunk-HJO4WCH6.js';
 export { CursorFlag } from '../chunk-3BYIWOTV.js';
 export { PresenceRing, presenceHueClass } from '../chunk-I6POAB4V.js';
 export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, fitGridColumns, parseGridSort } from '../chunk-XIDD7PJO.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-QRKT4XTT.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-6QNN3WIT.js';
 export { PageHeader } from '../chunk-HOXGBLEY.js';
 export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-UB6MLXUL.js';
 export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-FXBGEANQ.js';
@@ -125,7 +125,10 @@ export { HIGHLIGHT_REST_MS, TYPE_AHEAD_WINDOW, useHighlightRest, useListbox, use
 export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-MMPKN7WV.js';
 export { ConfirmField, confirmMatches } from '../chunk-PEUGPAKH.js';
 export { InlineCode } from '../chunk-5CLW2CXT.js';
-export { CanvasSchematic } from '../chunk-NBWNLYWZ.js';
+export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-C7OKDYBH.js';
+export { Note } from '../chunk-5SZGKSGL.js';
+export { CanvasToolbar, toolForKey } from '../chunk-B5UHX5UC.js';
+export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-NR4CPM4T.js';
 export { CatalogTile } from '../chunk-PCT47E7O.js';
 export { ChangeMark } from '../chunk-66X5WDKE.js';
 export { LONGTEXT_MAX_DEFAULT, RATING_MAX_CEILING, RATING_MAX_DEFAULT, SHEET_COLUMN_BOUNDS, SHEET_COLUMN_TYPES, SHEET_COLUMN_WIDTHS, SHEET_FIT_SAMPLES, SHEET_LABELS, SHEET_ROW_HEIGHT, SHEET_ROW_NUMBER_WIDTH, SheetPendingEdits, TEXT_MAX_DEFAULT, URL_MAX, cellDescription, cellKey, cellSpeech, changeText, changeTime, checkValue, columnOffsets, columnWidth, compareValues, displayText, drawnColumns, editText, editorSide, findOption, findPerson, fitSamples, fittedWidth, flagText, hasPrevious, inRange, isEmptyValue, isMod, isMultiCell, isSheetColumnType, isTypingKey, liveOptions, moveFrom, nextSort, normalizeValue, optionHue, parseOptionList, parseTSV, parseText, planClear, planPaste, presenceByCell, presenceByColumn, presenceByRow, rangeOf, ratingMax, refusalText, retypeColumn, rowName, sameValue, scrollToRow, sheetLabels, sortRows, spokenText, statusTone, textMax, toTSV, visibleRows } from '../chunk-LFSIKGRQ.js';
@@ -141,12 +144,9 @@ export { Breadcrumb } from '../chunk-VWNC2L6W.js';
 export { KeyChip } from '../chunk-FYTIJM2T.js';
 export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth, today } from '../chunk-GXQ3B46I.js';
 export { Callout } from '../chunk-SZZRIHGT.js';
-export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-C7OKDYBH.js';
-export { Note } from '../chunk-5SZGKSGL.js';
-export { CanvasToolbar, toolForKey } from '../chunk-B5UHX5UC.js';
-export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-NR4CPM4T.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, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-DAERKOOG.js';
 import '../chunk-LM3ISVJA.js';
+export { CanvasSchematic } from '../chunk-NBWNLYWZ.js';
 export { ArtifactMakeRow } from '../chunk-R2IBCEU6.js';
 export { ArtifactNameCell } from '../chunk-P5VGSVWG.js';
 export { AuthLayout } from '../chunk-S4DREXGM.js';
@@ -183,7 +183,6 @@ export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-CE2THTQR.js';
 export { ACCESS_DENIED_REASONS, AccessDeniedCard } from '../chunk-KV3ODJXH.js';
 export { EmptyState } from '../chunk-RA2ULG6H.js';
 export { Accordion, AccordionItem } from '../chunk-ZNOXQACX.js';
-export { ADD_PILL_MS, AddPill } from '../chunk-TROLVEZY.js';
 export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-3TXY3PJZ.js';
 export { Timeline, TimelineItem } from '../chunk-AUQPBL4O.js';
 export { Section } from '../chunk-3TFDQLW3.js';
@@ -195,8 +194,9 @@ export { Kbd, isApplePlatform, keyGlyph } from '../chunk-SMBKXWML.js';
 export { DisclosureAnatomy } from '../chunk-FZVJDJFN.js';
 export { Count } from '../chunk-BHHIIK3M.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from '../chunk-PQADV6P6.js';
+export { ADD_PILL_MS, AddPill } from '../chunk-TROLVEZY.js';
 export { Announcer, announce, useAnnouncer } from '../chunk-RSAQOKH3.js';
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-KKNHMXTE.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-SCPEMLLY.js';
 export { useMediaMatch } from '../chunk-RTPQDNW3.js';
 export { Menu } from '../chunk-D6FEHY5G.js';
 export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, anchorGone, outsideBounds, placePopup, useLayerContainer, viewportBounds } from '../chunk-OMV5W53A.js';

package/dist/index.js

@@ -1,11 +1,11 @@
 import './chunk-S3QTFUJX.js';
 export { VersionTimeline } from './chunk-NQCY44B3.js';
-export { matchesShortcut, useShortcut } from './chunk-AYHIF6DH.js';
 export { WidgetFrame } from './chunk-DFK5EQTU.js';
 export { ElementToPngError, elementToPng, parseCsv, serializeElement, toCsv } from './chunk-FEJANUZK.js';
 export { ToastProvider, Toaster, useToast } from './chunk-AC22RZKC.js';
 export { TreeCanvas } from './chunk-5BUOMF6N.js';
 export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from './chunk-JSWOXRRE.js';
+export { TagsInput } from './chunk-BH52LIY6.js';
 export { ThemeGallery } from './chunk-E4BOVKNJ.js';
 export { ThemeSwatch } from './chunk-MNFU2RNT.js';
 export { DensitySwitcher, ThemeSwitcher } from './chunk-KWWP3D7M.js';
@@ -13,21 +13,21 @@ export { ThemeToggle } from './chunk-NP2C4Y4E.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from './chunk-Z24ZUSTX.js';
 export { TileGrid } from './chunk-NNTO3TNC.js';
 export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from './chunk-YPMGP2X4.js';
+export { Stepper } from './chunk-5QWIJSQM.js';
 export { Switcher } from './chunk-JKAGN4V4.js';
 export { Table } from './chunk-V2N3BMOT.js';
 export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from './chunk-4BJK7FE5.js';
-export { TagsInput } from './chunk-BH52LIY6.js';
+export { SlideFilmstrip } from './chunk-FBW3Q2OY.js';
 export { SlideGrid } from './chunk-3V5T5K5H.js';
 export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from './chunk-D3EJSLCL.js';
-export { StatGroup } from './chunk-OUD75UB2.js';
 export { StatCard } from './chunk-YPTTSJPM.js';
-export { Stepper } from './chunk-5QWIJSQM.js';
+export { StatGroup } from './chunk-OUD75UB2.js';
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from './chunk-KNHUBHFX.js';
 export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from './chunk-GFYQKMQZ.js';
 export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from './chunk-3PR65I3H.js';
 export { TagGroup } from './chunk-O2EGEONV.js';
+export { matchesShortcut, useShortcut } from './chunk-AYHIF6DH.js';
 export { SLIDE_COMPARE_LABELS, SlideCompare } from './chunk-7CGPPAYR.js';
-export { SlideFilmstrip } from './chunk-FBW3Q2OY.js';
 export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from './chunk-356JNSER.js';
 export { SearchTrigger } from './chunk-6DRDCT22.js';
 export { SectionFrame, SectionFrameBody, SectionFrameNav } from './chunk-INVSUFJK.js';
@@ -58,8 +58,8 @@ export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, lay
 export { Outline, scrollToHeading, useActiveHeading } from './chunk-A5YKNRG6.js';
 export { PageNote } from './chunk-CV4NES3P.js';
 export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from './chunk-GPWJCP3U.js';
-import './chunk-CENOOTAV.js';
 export { PinTile } from './chunk-6MIXD6IW.js';
+import './chunk-CENOOTAV.js';
 export { MERGE_CONFLICTS_LABELS, MergeConflicts } from './chunk-2PEXZ7L4.js';
 export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from './chunk-UGNUUVRI.js';
 export { NewItemsNotice } from './chunk-PXU6HOZB.js';
@@ -76,21 +76,20 @@ export { AutoGrid, Inline, Spacer, Stack } from './chunk-ZAC7SKUN.js';
 export { Link } from './chunk-FBSEJO2C.js';
 export { LinkInterstitial, openExternal } from './chunk-N3TFYBN3.js';
 export { List, ListItem } from './chunk-NZWX27J7.js';
-import './chunk-MICRGE3J.js';
+export { Highlight, highlightRanges, highlightTerms } from './chunk-H6VKCIWV.js';
 import './chunk-FFMCMSJB.js';
 export { IconTile } from './chunk-IXJHTFXG.js';
 export { ImageUpload } from './chunk-FWYHRU7M.js';
 export { InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from './chunk-XYCADWZN.js';
 export { FactList } from './chunk-RLJXVFEH.js';
-export { FileDrop, FilePickButton, droppedFiles, pickedFiles } from './chunk-THDGBD6Y.js';
 export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from './chunk-UYZZV4DZ.js';
+export { FileDrop, FilePickButton, droppedFiles, pickedFiles } from './chunk-THDGBD6Y.js';
 export { FindingList } from './chunk-NTB5LRRD.js';
 export { FollowBanner } from './chunk-OED6LUWE.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 { IDLE_AFTER_MS, useFullscreen, useIdle } from './chunk-W5XCNEZC.js';
-export { Highlight, highlightRanges, highlightTerms } from './chunk-H6VKCIWV.js';
-export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from './chunk-SYBYFQTY.js';
+import './chunk-MICRGE3J.js';
 export { DownloadButton } from './chunk-BEHFTRMZ.js';
 export { downloadBlob, downloadText, safeFilename, useDownload } from './chunk-IW55G7XG.js';
 export { EditingStatus } from './chunk-TC7DJTXI.js';
@@ -103,12 +102,13 @@ export { DescriptionList, DescriptionListItem } from './chunk-MFS6F2P7.js';
 export { DIFF_LIST_LABELS, DiffList } from './chunk-LFHCXZO5.js';
 export { DIFF_SUMMARY_LABELS, DIFF_VIEW_LABELS, DiffSummary, DiffView, MAX_DIFF_LINES, collapseDiff, diffLines, diffStat, firstChangedLines, splitLines } from './chunk-BVWSLXTY.js';
 export { Divider } from './chunk-6KWNXIDE.js';
+export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from './chunk-SYBYFQTY.js';
 export { CONFLICT_NOTE_LABELS, ConflictNote } from './chunk-UO7JZVCO.js';
 export { Container } from './chunk-HJO4WCH6.js';
 export { CursorFlag } from './chunk-3BYIWOTV.js';
 export { PresenceRing, presenceHueClass } from './chunk-I6POAB4V.js';
 export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, fitGridColumns, parseGridSort } from './chunk-XIDD7PJO.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-QRKT4XTT.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-6QNN3WIT.js';
 export { PageHeader } from './chunk-HOXGBLEY.js';
 export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from './chunk-UB6MLXUL.js';
 export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-FXBGEANQ.js';
@@ -125,7 +125,10 @@ export { HIGHLIGHT_REST_MS, TYPE_AHEAD_WINDOW, useHighlightRest, useListbox, use
 export { COMMENT_THREAD_LABELS, CommentThread } from './chunk-MMPKN7WV.js';
 export { ConfirmField, confirmMatches } from './chunk-PEUGPAKH.js';
 export { InlineCode } from './chunk-5CLW2CXT.js';
-export { CanvasSchematic } from './chunk-NBWNLYWZ.js';
+export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from './chunk-C7OKDYBH.js';
+export { Note } from './chunk-5SZGKSGL.js';
+export { CanvasToolbar, toolForKey } from './chunk-B5UHX5UC.js';
+export { Toolbar, ToolbarOverflow, ToolbarWide } from './chunk-NR4CPM4T.js';
 export { CatalogTile } from './chunk-PCT47E7O.js';
 export { ChangeMark } from './chunk-66X5WDKE.js';
 export { LONGTEXT_MAX_DEFAULT, RATING_MAX_CEILING, RATING_MAX_DEFAULT, SHEET_COLUMN_BOUNDS, SHEET_COLUMN_TYPES, SHEET_COLUMN_WIDTHS, SHEET_FIT_SAMPLES, SHEET_LABELS, SHEET_ROW_HEIGHT, SHEET_ROW_NUMBER_WIDTH, SheetPendingEdits, TEXT_MAX_DEFAULT, URL_MAX, cellDescription, cellKey, cellSpeech, changeText, changeTime, checkValue, columnOffsets, columnWidth, compareValues, displayText, drawnColumns, editText, editorSide, findOption, findPerson, fitSamples, fittedWidth, flagText, hasPrevious, inRange, isEmptyValue, isMod, isMultiCell, isSheetColumnType, isTypingKey, liveOptions, moveFrom, nextSort, normalizeValue, optionHue, parseOptionList, parseTSV, parseText, planClear, planPaste, presenceByCell, presenceByColumn, presenceByRow, rangeOf, ratingMax, refusalText, retypeColumn, rowName, sameValue, scrollToRow, sheetLabels, sortRows, spokenText, statusTone, textMax, toTSV, visibleRows } from './chunk-LFSIKGRQ.js';
@@ -141,12 +144,9 @@ export { Breadcrumb } from './chunk-VWNC2L6W.js';
 export { KeyChip } from './chunk-FYTIJM2T.js';
 export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth, today } from './chunk-GXQ3B46I.js';
 export { Callout } from './chunk-SZZRIHGT.js';
-export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from './chunk-C7OKDYBH.js';
-export { Note } from './chunk-5SZGKSGL.js';
-export { CanvasToolbar, toolForKey } from './chunk-B5UHX5UC.js';
-export { Toolbar, ToolbarOverflow, ToolbarWide } from './chunk-NR4CPM4T.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, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from './chunk-DAERKOOG.js';
 import './chunk-LM3ISVJA.js';
+export { CanvasSchematic } from './chunk-NBWNLYWZ.js';
 export { ArtifactMakeRow } from './chunk-R2IBCEU6.js';
 export { ArtifactNameCell } from './chunk-P5VGSVWG.js';
 export { AuthLayout } from './chunk-S4DREXGM.js';
@@ -183,7 +183,6 @@ export { ARTIFACT_KINDS, ArtifactKindGlyph } from './chunk-CE2THTQR.js';
 export { ACCESS_DENIED_REASONS, AccessDeniedCard } from './chunk-KV3ODJXH.js';
 export { EmptyState } from './chunk-RA2ULG6H.js';
 export { Accordion, AccordionItem } from './chunk-ZNOXQACX.js';
-export { ADD_PILL_MS, AddPill } from './chunk-TROLVEZY.js';
 export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from './chunk-3TXY3PJZ.js';
 export { Timeline, TimelineItem } from './chunk-AUQPBL4O.js';
 export { Section } from './chunk-3TFDQLW3.js';
@@ -195,8 +194,9 @@ export { Kbd, isApplePlatform, keyGlyph } from './chunk-SMBKXWML.js';
 export { DisclosureAnatomy } from './chunk-FZVJDJFN.js';
 export { Count } from './chunk-BHHIIK3M.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from './chunk-PQADV6P6.js';
+export { ADD_PILL_MS, AddPill } from './chunk-TROLVEZY.js';
 export { Announcer, announce, useAnnouncer } from './chunk-RSAQOKH3.js';
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from './chunk-KKNHMXTE.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, useAppShell } from './chunk-SCPEMLLY.js';
 export { useMediaMatch } from './chunk-RTPQDNW3.js';
 export { Menu } from './chunk-D6FEHY5G.js';
 export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, anchorGone, outsideBounds, placePopup, useLayerContainer, viewportBounds } from './chunk-OMV5W53A.js';

package/dist/styles.css

@@ -702,7 +702,7 @@
 }
 
 
-/* AppShell-NPSWZ3XW.css */
+/* AppShell-V3TAAYL3.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -860,6 +860,68 @@
   min-width: 0;
 }
 
+/*
+ * THE HEAD'S STATUS, at the end of the name's line (`AppShell.RailStatus`):
+ * the application's state as a dot and a count, its words in its name and
+ * title. It ends on the nav's gutter, where every row's background ends, and
+ * it reserves the width of a dot and a two-figure count, so the name beside
+ * it truncates at one place whether the engine is healthy or has alarms.
+ */
+.crewlet-app-shell__rail-status {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: calc(var(--size-target-min) * 2 + var(--spacing-1));
+  margin-inline-end: var(--size-nav-gutter);
+}
+
+/* A lockup beside a status gives up its end inset: the head's gap parts the
+   two, and the inset is what kept a lockup alone on its line off the edge. */
+.crewlet-app-shell__rail-head:has(> .crewlet-app-shell__rail-status) > .crewlet-brand {
+  padding-inline-end: 0;
+}
+
+/* The dot and the count on one compact target: the 24px floor each way. */
+.crewlet-app-shell__rail-status-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--spacing-1) + var(--spacing-1) / 2);
+  min-width: var(--size-target-min);
+  min-height: var(--size-target-min);
+  margin: 0;
+  padding: 0 var(--spacing-1);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font: inherit;
+}
+
+.crewlet-app-shell__rail-status-icon,
+.crewlet-app-shell__rail-status-trailing {
+  display: inline-flex;
+  align-items: center;
+}
+
+.crewlet-app-shell__rail-status-mark--action {
+  cursor: pointer;
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* Open is pointed at, as the foot's row draws it: the lift stays while the panel is open. */
+.crewlet-app-shell__rail-status-mark--action:hover,
+.crewlet-app-shell__rail-status-mark--action[aria-expanded='true'] {
+  background: var(--color-surface-hover);
+}
+
+/* Inside its own box, so the ring is never cut by the head or the drawer's edge. */
+.crewlet-app-shell__rail-status-mark--action:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
 /*
  * THE RAIL'S FIELD ON THE NAV'S COLUMNS. It stands on the nav's gutter, so
  * its right edge is where every row's background ends; and its glyph stands
@@ -876,14 +938,22 @@
 }
 
 /* The same gutter the nav takes, so what the foot says lines up with the rows
-   above it rather than sitting further out. */
+   above it rather than sitting further out.
+
+   THE FOOT IS THE COMPACT STEP. It holds what a reader reaches for rarely (a
+   settings link, the engine's state, who they are), so its rows stand on the
+   small control step (`--crewlet-rail-foot-row`, 26px, never under the 24px
+   target) on a half-step gap and a one-step inset, where the nav above keeps
+   its 30px rows. Only heights change: every row keeps its order, columns,
+   glyphs and words. */
 .crewlet-app-shell__rail-foot {
-  --crewlet-rail-foot-gap: var(--spacing-1);
+  --crewlet-rail-foot-gap: calc(var(--spacing-1) / 2);
+  --crewlet-rail-foot-row: var(--size-control-sm);
   flex: none;
   display: flex;
   flex-direction: column;
   gap: var(--crewlet-rail-foot-gap);
-  padding: var(--spacing-2) var(--size-nav-gutter);
+  padding: var(--spacing-1) var(--size-nav-gutter);
   border-top: 1px solid var(--color-border-default);
 }
 
@@ -984,6 +1054,14 @@
   min-width: 14px;
 }
 
+/* The foot's own step (see `.crewlet-app-shell__rail-foot`), for its rows and
+   for a navigation dropped into it, whose rows keep the rail's columns. */
+.crewlet-app-shell__rail-foot > .crewlet-app-shell__rail-row--action:not(.crewlet-app-shell__rail-row--block),
+.crewlet-app-shell__rail-foot > .crewlet-btn,
+.crewlet-app-shell__rail-foot .crewlet-nav-item__row {
+  min-height: var(--crewlet-rail-foot-row);
+}
+
 /*
  * OPEN IS POINTED AT. The row a panel is open from keeps the hover's lift for
  * as long as the panel is open, drawn from `aria-expanded` so the picture and
@@ -1389,7 +1467,8 @@
   .crewlet-app-shell__rail,
   .crewlet-app-shell__rail[data-open='true'],
   .crewlet-app-shell__rail-row--action,
-  .crewlet-app-shell__rail-foot > .crewlet-btn {
+  .crewlet-app-shell__rail-foot > .crewlet-btn,
+  .crewlet-app-shell__rail-status-mark--action {
     transition: none;
   }
 }
@@ -1436,9 +1515,16 @@
  * whatever size of badge a caller hands the row, it is centred where a glyph
  * is, and the row takes the nav row's pad and its glyph-to-word gap.
  */
+.crewlet-app-shell__rail-foot .crewlet-account-row {
+  --crewlet-account-row-pad: var(--spacing-0);
+}
+
 .crewlet-app-shell__rail-foot .crewlet-account-row__who {
   --crewlet-hit-area-block-start: calc(var(--crewlet-rail-foot-gap) / 2 + var(--crewlet-account-row-pad));
   gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  /* On the foot's compact step: the two lines of name and detail with half a
+     step above and below them, which still clears the avatar. */
+  padding-block: calc(var(--spacing-1) / 2);
   padding-inline-start: var(--size-nav-row-pad);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.40.0",
+  "version": "0.41.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.40.0",
-    "@crewlethq/tokens": "0.40.0",
+    "@crewlethq/icons": "0.41.0",
+    "@crewlethq/tokens": "0.41.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/{chunk-QRKT4XTT.js → chunk-6QNN3WIT.js}

@@ -2,8 +2,8 @@ import { PageHeader } from './chunk-HOXGBLEY.js';
 import { DateTimePicker } from './chunk-UB6MLXUL.js';
 import { DataTable } from './chunk-FXBGEANQ.js';
 import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
-import { Popover } from './chunk-KHJIEPZV.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
+import { Popover } from './chunk-KHJIEPZV.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Input } from './chunk-TYONQSOK.js';
 import { Kbd } from './chunk-SMBKXWML.js';