@crewlethq/ui 0.95.0 → 0.97.0

package/README.md

@@ -170,8 +170,11 @@ drawn as a ligature, anything loaded from a host, a theme painted on a body
 class, the decoration step used as text, and a focus rule that turns the
 outline off without putting one back. A second, literal check refuses a colour,
 font size, radius, duration or z-index spelled out where a token belongs, a
-`color-mix()`, a media query off the breakpoint steps and a hover overlay drawn
-on a pseudo element. `npm run lint` in this package runs both over every
+`color-mix()`, a media query off the breakpoint steps, a hover overlay drawn
+on a pseudo element, and a `scrollbar-width` or `scrollbar-color` set outside
+`@supports not selector(::-webkit-scrollbar)`, where Chromium would ignore the
+slim bar `@crewlethq/tokens/css/base` draws and paint its native one (`none`
+and `auto` pass). `npm run lint` in this package runs both over every
 stylesheet in `src`, and `npx crewlet-css-check <folder>` runs both over an
 application's own stylesheets.
 

package/dist/AppShell/index.js

@@ -1,4 +1,4 @@
-export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-ORONAXSF.js';
+export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-CWJLDCB7.js';
 import '../chunk-PCAT2EFB.js';
 import '../chunk-JLOESTT2.js';
 import '../chunk-YJQXESOJ.js';

package/dist/{AppShell-NX5HCD4O.css → AppShell-24IM2GC3.css}

@@ -208,7 +208,18 @@
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
-  scrollbar-color: var(--color-scrollbar) transparent;
+}
+
+/* The rail's bar, only where `::-webkit-scrollbar` is not read: set where it
+   is, Chromium would draw its native bar instead of the base sheet's slim one. */
+@supports not selector(::-webkit-scrollbar) {
+  .crewlet-app-shell__rail-body {
+    scrollbar-color: var(--color-scrollbar) transparent;
+  }
+
+  .crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-body {
+    scrollbar-width: thin;
+  }
 }
 
 /*
@@ -1033,7 +1044,6 @@
 
 .crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-body {
   padding: var(--spacing-1) 0;
-  scrollbar-width: thin;
 }
 
 /*

package/dist/AsideLayout/AsideLayout.d.ts

@@ -1,11 +1,32 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+/** The room the layout is drawn in: a whole page, or a detail pane beside a list. */
+export type AsideLayoutFit = 'page' | 'pane';
+/**
+ * The layout's own width, in rem, from which the aside stands beside the main
+ * column, by `fit`. The stylesheet's container queries split at these widths.
+ */
+export declare const ASIDE_LAYOUT_SPLIT_REM: Readonly<Record<AsideLayoutFit, number>>;
 export interface AsideLayoutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** The page's main column: what the page is about. */
     children: ReactNode;
-    /** The column beside it: facts about the subject, how it is used, related places. */
-    aside: ReactNode;
+    /**
+     * The column beside it: facts about the subject, how it is used, related
+     * places. Left out (or null), the main column stands alone at the full width.
+     */
+    aside?: ReactNode;
     /** What the aside is, for a screen reader's landmark: "About the company". */
     asideLabel: string;
+    /**
+     * `page` (the default): the aside stands beside the main column from 56rem,
+     * 18rem wide. `pane`: from 44rem, 16rem wide and 16px apart, for a detail
+     * pane beside a list, such as setup steps beside the form they explain.
+     */
+    fit?: AsideLayoutFit | undefined;
+    /**
+     * Beside the main column, the aside's content stays at the scroller's top
+     * while the main column scrolls past. For an aside shorter than its scroller.
+     */
+    sticky?: boolean | undefined;
 }
 /**
  * A page's main column with an aside beside it, each a stack of blocks one
@@ -13,12 +34,15 @@ export interface AsideLayoutProps extends Omit<HTMLAttributes<HTMLDivElement>, '
  *
  * THE COLUMNS FOLLOW THE ROOM THE PAGE HAS, NOT THE WINDOW. It is a container
  * query on its own width, because a page beside a navigation rail is narrow
- * on a wide screen too: from 56rem the aside stands beside the main column at
- * `--crewlet-aside-layout-aside` (18rem by default), and below that it
- * follows the main column under one hairline, so a phone reads the subject
- * first and its facts after it.
+ * on a wide screen too: from 56rem (44rem in a `pane`) the aside stands beside
+ * the main column at `--crewlet-aside-layout-aside` (18rem by default, 16rem
+ * in a pane), and below that it follows the main column under one hairline,
+ * so a phone reads the subject first and its facts after it.
+ *
+ * THE MAIN COLUMN IS ALWAYS THE FIRST CHILD, so it stays the same element as
+ * an aside comes and goes, and nothing in it is drawn afresh.
  *
  * THE ASIDE IS A COMPLEMENTARY LANDMARK named by `asideLabel`, so a screen
  * reader can skip to it or past it.
  */
-export declare function AsideLayout({ children, aside, asideLabel, className, ...rest }: AsideLayoutProps): import("react").JSX.Element;
+export declare function AsideLayout({ children, aside, asideLabel, fit, sticky, className, ...rest }: AsideLayoutProps): import("react").JSX.Element;

package/dist/AsideLayout/index.d.ts

@@ -1,3 +1,3 @@
 import './AsideLayout.css';
-export { AsideLayout } from './AsideLayout.js';
-export type { AsideLayoutProps } from './AsideLayout.js';
+export { ASIDE_LAYOUT_SPLIT_REM, AsideLayout } from './AsideLayout.js';
+export type { AsideLayoutFit, AsideLayoutProps } from './AsideLayout.js';

package/dist/AsideLayout/index.js

@@ -1,2 +1,2 @@
-export { AsideLayout } from '../chunk-QOXLP5PE.js';
+export { ASIDE_LAYOUT_SPLIT_REM, AsideLayout } from '../chunk-7UQQEUOT.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AsideLayout-SJO7VLPQ.css

@@ -0,0 +1,93 @@
+/*
+ * AsideLayout: a main column with an aside beside it from 56rem of its own
+ * width (44rem in a pane), and after it below that (AsideLayout.tsx).
+ */
+
+.crewlet-aside-layout {
+  container-type: inline-size;
+  min-width: 0;
+}
+
+.crewlet-aside-layout__columns {
+  --crewlet-aside-layout-gap: var(--spacing-7);
+
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+  gap: var(--crewlet-aside-layout-gap);
+}
+
+/* EACH COLUMN IS A STACK one step apart, so the blocks in it stand apart
+   evenly without each carrying a margin of its own. */
+.crewlet-aside-layout__main,
+.crewlet-aside-layout__aside {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+  min-width: 0;
+}
+
+/* FOLLOWING THE MAIN COLUMN, the aside is set off by one hairline, so its
+   facts read as about the page rather than as more of it. The hairline sits
+   midway: the aside takes the gap's own step under it, where the stack's
+   smaller step left it 32px under the main column and 24px over the aside. */
+.crewlet-aside-layout__aside {
+  --crewlet-aside-layout-stick: static;
+
+  padding-top: var(--crewlet-aside-layout-gap);
+  border-top: 1px solid var(--color-border-default);
+}
+
+@container (min-width: 56rem) {
+  .crewlet-aside-layout__columns {
+    grid-template-columns: minmax(0, 1fr) var(--crewlet-aside-layout-aside, 18rem);
+    gap: var(--spacing-8);
+  }
+
+  .crewlet-aside-layout__aside {
+    --crewlet-aside-layout-stick: sticky;
+
+    padding-top: 0;
+    border-top: 0;
+  }
+}
+
+/* A PANE (`fit="pane"`) is narrower than a page by the list beside it: it
+   splits sooner, at a narrower aside, one step apart. */
+.crewlet-aside-layout--pane .crewlet-aside-layout__columns {
+  --crewlet-aside-layout-gap: var(--spacing-6);
+}
+
+@container (min-width: 44rem) {
+  .crewlet-aside-layout--pane .crewlet-aside-layout__columns {
+    grid-template-columns: minmax(0, 1fr) var(--crewlet-aside-layout-aside, 16rem);
+    gap: var(--spacing-4);
+  }
+
+  .crewlet-aside-layout--pane .crewlet-aside-layout__aside {
+    --crewlet-aside-layout-stick: sticky;
+
+    padding-top: 0;
+    border-top: 0;
+  }
+}
+
+/* STICKY (`sticky`): the aside's content as one stack, as tall as itself, so
+   it has the aside's length to stick along. Only a split sets the aside's
+   `--crewlet-aside-layout-stick`, so it sticks beside the main column alone. */
+.crewlet-aside-layout--sticky > .crewlet-aside-layout__columns {
+  align-items: stretch;
+}
+
+.crewlet-aside-layout__stick {
+  position: var(--crewlet-aside-layout-stick);
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+}
+
+/* ALONE (no aside), the main column is the whole width at every size. */
+.crewlet-aside-layout--alone > .crewlet-aside-layout__columns {
+  grid-template-columns: minmax(0, 1fr);
+}

package/dist/DeepWorkCard/index.js

@@ -1,7 +1,7 @@
-export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-XJOTW2FB.js';
+export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-5U6XAUYM.js';
 import '../chunk-KUMHQY2B.js';
-import '../chunk-RQFRRPV6.js';
 import '../chunk-ZWCK4N4L.js';
+import '../chunk-RQFRRPV6.js';
 import '../chunk-4BEMS6Q7.js';
 import '../chunk-SJ3EUCFD.js';
 import '../chunk-U2IQNDDR.js';

package/dist/List/List.d.ts

@@ -47,6 +47,14 @@ export interface ListProps extends HTMLAttributes<HTMLElement> {
      * Unset, the words take the row's width, as a feed's do.
      */
     measure?: 'normal' | 'wide' | undefined;
+    /**
+     * Where a `bulleted` or `numbered` list's markers stand. `indented` (the
+     * default) gives them a gutter inside the list. `hanging` sets them in the
+     * margin before it, so the words line up with the text above and a narrow
+     * box keeps its width for them. For a container that keeps that margin free,
+     * such as a titled Callout's icon column.
+     */
+    markers?: 'indented' | 'hanging' | undefined;
 }
 /**
  * The non-tabular list: an activity feed, a set of search results, a
@@ -58,7 +66,7 @@ export interface ListProps extends HTMLAttributes<HTMLElement> {
  * means nothing. What a feed does want is alignment, which `template` gives it
  * without the promise.
  */
-export declare function List({ variant, template, density, measure, className, style, children, ...rest }: ListProps): import("react").JSX.Element;
+export declare function List({ variant, template, density, measure, markers, className, style, children, ...rest }: ListProps): import("react").JSX.Element;
 export declare namespace List {
     var Item: typeof ListItem;
 }

package/dist/List/index.js

@@ -1,3 +1,3 @@
-export { List, ListItem } from '../chunk-A7UOYLK3.js';
+export { List, ListItem } from '../chunk-F2ZSFDJZ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{List-ZZF6ZHRT.css → List-BNA4XGMH.css}

@@ -127,6 +127,13 @@
   display: list-item;
 }
 
+/* HANGING MARKERS stand in the margin before the list, so its words line up
+   with the text above rather than one gutter inside it. */
+.crewlet-list--hanging.crewlet-list--bulleted,
+.crewlet-list--hanging.crewlet-list--numbered {
+  padding-inline-start: 0;
+}
+
 .crewlet-list--bulleted .crewlet-list__row,
 .crewlet-list--numbered .crewlet-list__row {
   min-height: 0;

package/dist/OrgTable/index.js

@@ -1,14 +1,14 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-I46ZTLDW.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-DWQYV5AV.js';
 import '../chunk-ZDWAIVWL.js';
 import '../chunk-MY374UUD.js';
 import '../chunk-5YXMKZUA.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-YTLWOHOY.js';
 import '../chunk-XZY6S3UC.js';
+import '../chunk-CVKANYHD.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-TUEM2XIW.js';
 import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-CVKANYHD.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/RoomRow/index.js

@@ -1,4 +1,4 @@
-export { RoomRow } from '../chunk-Z34W5TM6.js';
-import '../chunk-A7UOYLK3.js';
+export { RoomRow } from '../chunk-PQDQ64KY.js';
+import '../chunk-F2ZSFDJZ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Switcher/index.js

@@ -1,4 +1,4 @@
-export { Switcher } from '../chunk-ET4I3IEA.js';
+export { Switcher } from '../chunk-O3II3KJY.js';
 import '../chunk-ZXXZESCD.js';
 import '../chunk-YGRTX67J.js';
 import '../chunk-HBDA76EZ.js';

package/dist/{Switcher-VWQMZUTN.css → Switcher-ZGRTTVCS.css}

@@ -202,7 +202,14 @@ svg.crewlet-switcher-trigger__chevron {
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: var(--spacing-1);
-  scrollbar-width: thin;
+}
+
+/* Thin only where `::-webkit-scrollbar` is not read: set where it is, Chromium
+   would draw its native bar instead of the base sheet's slim one. */
+@supports not selector(::-webkit-scrollbar) {
+  .crewlet-switcher__scroller {
+    scrollbar-width: thin;
+  }
 }
 
 .crewlet-switcher__list {

package/dist/chunk-7UQQEUOT.js

@@ -0,0 +1,35 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './AsideLayout-SJO7VLPQ.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ASIDE_LAYOUT_SPLIT_REM = { page: 56, pane: 44 };
+function AsideLayout({
+  children,
+  aside,
+  asideLabel,
+  fit = "page",
+  sticky = false,
+  className,
+  ...rest
+}) {
+  const alone = aside === null || aside === void 0 || aside === false;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: cx(
+        "crewlet-aside-layout",
+        fit === "pane" && "crewlet-aside-layout--pane",
+        sticky && "crewlet-aside-layout--sticky",
+        alone && "crewlet-aside-layout--alone",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "crewlet-aside-layout__columns", children: [
+        /* @__PURE__ */ jsx("div", { className: "crewlet-aside-layout__main", children }),
+        alone ? null : /* @__PURE__ */ jsx("aside", { className: "crewlet-aside-layout__aside", "aria-label": asideLabel, children: sticky ? /* @__PURE__ */ jsx("div", { className: "crewlet-aside-layout__stick", children: aside }) : aside })
+      ] })
+    }
+  );
+}
+
+export { ASIDE_LAYOUT_SPLIT_REM, AsideLayout };

package/dist/{chunk-ORONAXSF.js → chunk-CWJLDCB7.js}

@@ -12,7 +12,7 @@ import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
-import './AppShell-NX5HCD4O.css';
+import './AppShell-24IM2GC3.css';
 import './ResizeHandle-2UNSZ4ZQ.css';
 import { createContext, forwardRef, useContext, useSyncExternalStore, useCallback, useId, useState, useRef, useEffect, useLayoutEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';

package/dist/{chunk-A7UOYLK3.js → chunk-F2ZSFDJZ.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './List-ZZF6ZHRT.css';
+import './List-BNA4XGMH.css';
 import { createContext, useContext, Children, isValidElement, cloneElement } from 'react';
 import { CircleAlertGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -11,6 +11,7 @@ function List({
   template,
   density = "comfortable",
   measure,
+  markers = "indented",
   className,
   style,
   children,
@@ -28,6 +29,7 @@ function List({
         templated && "crewlet-list--templated",
         density === "compact" && "crewlet-list--compact",
         measure && `crewlet-list--measure-${measure}`,
+        markers === "hanging" && "crewlet-list--hanging",
         className
       ),
       style: templated ? { ...style, "--crewlet-list-template": template } : style,

package/dist/{chunk-ET4I3IEA.js → chunk-O3II3KJY.js}

@@ -10,7 +10,7 @@ import { returnFocus } from './chunk-4ITETIGZ.js';
 import { announce } from './chunk-2G355KDJ.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Switcher-VWQMZUTN.css';
+import './Switcher-ZGRTTVCS.css';
 import { forwardRef, useId, useRef, useCallback, useMemo, useEffect } from 'react';
 import { ChevronDownGlyph, SearchGlyph } from '@crewlethq/icons/glyphs';
 import { breakpoint } from '@crewlethq/tokens';

package/dist/{chunk-Z34W5TM6.js → chunk-PQDQ64KY.js}

@@ -1,4 +1,4 @@
-import { ListItem } from './chunk-A7UOYLK3.js';
+import { ListItem } from './chunk-F2ZSFDJZ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ChatScale-L4SIHSKL.css';
 import './RoomRow-3OTEY6GK.css';

package/dist/generated/index.js

@@ -9,27 +9,27 @@ export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '
 export { ThemeToggle } from '../chunk-IPMJGK2Q.js';
 export { THREAD_SUMMARY_LABELS, ThreadSummary } from '../chunk-JXDJVUWN.js';
 export { TileGrid } from '../chunk-UFID3DSP.js';
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-2BZ2W2YU.js';
 export { TIME_RANGE_CUSTOM, TIME_RANGE_PICKER_LABELS, TimeRangePicker, timeRangeFieldKey, timeRangeProblem } from '../chunk-T5HZ5AYW.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-2BZ2W2YU.js';
 export { ToastProvider, Toaster, readingDuration, toasterInsetStyle, useToast } from '../chunk-JIBWNHTC.js';
 export { TagsInput } from '../chunk-3LKOXQWZ.js';
 export { ThemeGallery } from '../chunk-4TAMRAUQ.js';
 export { ThemeSwatch } from '../chunk-3XQUEF5C.js';
 export { DensitySwitcher, ThemeSwitcher } from '../chunk-FRERGOW3.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
-export { Switcher } from '../chunk-ET4I3IEA.js';
+export { Switcher } from '../chunk-O3II3KJY.js';
 export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell, TableTwoLineCell } from '../chunk-QW4LAFTX.js';
-export { SlideGrid } from '../chunk-6M2N6ETA.js';
 export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from '../chunk-PW57R4BN.js';
 export { StatCard } from '../chunk-G5IZGAWS.js';
-export { Statement } from '../chunk-MZJKPTA5.js';
 export { StatGroup } from '../chunk-OUD75UB2.js';
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-ZDMZP5H4.js';
-export { TagGroup } from '../chunk-UEOEBOBR.js';
+export { Statement } from '../chunk-MZJKPTA5.js';
 export { matchesShortcut, useShortcut } from '../chunk-LZNPL266.js';
 import '../chunk-5AHNW5CP.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-ZDMZP5H4.js';
+export { TagGroup } from '../chunk-UEOEBOBR.js';
 export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-XJMES7AE.js';
 export { SlideFilmstrip } from '../chunk-RO5JU6SN.js';
+export { SlideGrid } from '../chunk-6M2N6ETA.js';
 export { SegmentedMeter, segmentedMeterLabel } from '../chunk-4AK52VHB.js';
 export { SelectionBar } from '../chunk-XA2QKGBJ.js';
 export { SEND_BUTTON_LABELS, SendButton } from '../chunk-T2GC7UAP.js';
@@ -37,19 +37,19 @@ export { SettingsTable, SettingsTableRow } from '../chunk-SOYPCCSJ.js';
 export { SetupWizard } from '../chunk-IX6CHGM4.js';
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-Y7PPKQFQ.js';
 export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-WJZTI2WC.js';
-export { canonicalMarkdown, roundTripMarkdown } from '../chunk-GBASM5EV.js';
-import '../chunk-7CSTEH5I.js';
-export { RoomRow } from '../chunk-Z34W5TM6.js';
+export { RoomRow } from '../chunk-PQDQ64KY.js';
 export { RUN_STATES, RunChip } from '../chunk-MYFSVZKZ.js';
 export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from '../chunk-V6WDJUYK.js';
 export { SearchTrigger } from '../chunk-ERNT3UTB.js';
 export { SectionFrame, SectionFrameBody, SectionFrameNav } from '../chunk-7BDBO2NP.js';
+export { RelatedRow } from '../chunk-CL3FWLDO.js';
 export { RecordChip, RecordChipList } from '../chunk-ZPTKAYJK.js';
 export { REFUSAL_CARD_LABELS, RefusalCard } from '../chunk-GKBH5JHE.js';
-export { RelatedRow } from '../chunk-CL3FWLDO.js';
 export { RESULT_TABLE_CARD_LABELS, RESULT_TABLE_COLLAPSED_ROWS, RESULT_TABLE_MAX_ROWS, ResultTableCard } from '../chunk-BMBQ6UMD.js';
 export { Table } from '../chunk-75NQV4R4.js';
 export { ReviewList } from '../chunk-AGVGX52B.js';
+export { canonicalMarkdown, roundTripMarkdown } from '../chunk-GBASM5EV.js';
+import '../chunk-7CSTEH5I.js';
 export { RichEditor, preloadRichEditor } from '../chunk-3P7XS5VT.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-2DMTW2Y3.js';
 export { PropertyList } from '../chunk-OPVTNHPH.js';
@@ -60,8 +60,8 @@ export { RAIL_LIST_LABELS, RailList } from '../chunk-M576OESX.js';
 export { Select } from '../chunk-3IWZVEXA.js';
 export { NavGroup, NavItem, SidebarNav } from '../chunk-BRK3HXGZ.js';
 export { Text } from '../chunk-O5CEG7TQ.js';
-export { READING_PANE_ENTER, ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from '../chunk-64JNKLLP.js';
 export { AddReaction, REACTION_BAR_LABELS, ReactionBar, reactionWho } from '../chunk-B3BJ66GQ.js';
+export { READING_PANE_ENTER, ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from '../chunk-64JNKLLP.js';
 export { PresenceStack } from '../chunk-F7HZYTZT.js';
 export { PresenterView, formatStopwatch } from '../chunk-LMEMH6DO.js';
 export { SLIDE_NAV_LABELS, SlideNav } from '../chunk-5AJR6X75.js';
@@ -78,10 +78,11 @@ export { NewItemsNotice } from '../chunk-463DNZXI.js';
 export { FactLine, ObjectHeader, SetByLine } from '../chunk-AXEXOAZQ.js';
 export { OPEN_IN_APP_CARD_LABELS, OpenInAppCard } from '../chunk-HZBXC3YD.js';
 export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-NKBKHOMU.js';
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-I46ZTLDW.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-DWQYV5AV.js';
 export { TreeGrid } from '../chunk-ZDWAIVWL.js';
 export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, layoutConnectors, layoutForest, placeGroups, treeAllExpandable, treeAncestors, treeCollapseOrAscend, treeExpandOrDescend, treeExpandTo, treeExpandable, treeFirst, treeFirstChild, treeItemAction, treeLast, treeLevel, treeNext, treeParent, treePosInSet, treePrevious, treeSetSize, treeStep, treeTypeAhead, treeVisible, typeAheadBuffer, useLayoutAnchor, useMeasuredSizes, useTreeState } from '../chunk-MY374UUD.js';
 export { OrgLabel } from '../chunk-5YXMKZUA.js';
+export { MEMBER_PICKER_LABELS, MemberPicker, chosenMembers } from '../chunk-SDHLAW3G.js';
 export { MentionChip } from '../chunk-PX5BOALQ.js';
 export { MENTION_MENU_LABELS, MentionMenu, mentionQuery } from '../chunk-G7SAFRSJ.js';
 export { PersonRow } from '../chunk-6TD2PCZB.js';
@@ -93,21 +94,20 @@ export { LIVE_CURSOR_HIDE_MS, LIVE_CURSOR_REST_MS, LiveCursor } from '../chunk-D
 export { LIVE_PREVIEW_DWELL_MS, LIVE_PREVIEW_MARGIN, LIVE_PREVIEW_MAX, LIVE_PREVIEW_MAX_FRAMES, LIVE_PREVIEW_RENDER_MS, LIVE_PREVIEW_STILLS_KEPT, LivePreview, LivePreviewBudgetProvider, PREVIEW_FILL_MAX_CUT, PreviewScale, createLivePreviewBudget, createLivePreviewStills, immediately, perFrame, useLivePreview } from '../chunk-CQFQGAZI.js';
 export { LogoSlot, LogoSlotGroup } from '../chunk-LAZ72JOP.js';
 export { MARKDOWN_FORMATS, MARKDOWN_TEXT_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-XSJSDNRR.js';
-export { MEMBER_PICKER_LABELS, MemberPicker, chosenMembers } from '../chunk-SDHLAW3G.js';
 export { LAYERS_LIST_LABELS, LayersList } from '../chunk-VUYNNILP.js';
 export { AutoGrid, Inline, Spacer, Stack } from '../chunk-ZAC7SKUN.js';
 export { Link } from '../chunk-QF5UNP4T.js';
 export { LinkCard } from '../chunk-O3MYBNRO.js';
 import '../chunk-KOJPDCGQ.js';
-export { List, ListItem } from '../chunk-A7UOYLK3.js';
-export { ListDetail } from '../chunk-P33VNG7Q.js';
 export { LinkInterstitial, openExternal } from '../chunk-OC6BMY3C.js';
+export { List, ListItem } from '../chunk-F2ZSFDJZ.js';
+export { ListDetail } from '../chunk-P33VNG7Q.js';
 export { ListInput, withDraft } from '../chunk-PICHV3PC.js';
 export { INLINE_EDITOR_LABELS, InlineEditor } from '../chunk-CFJ7FQZI.js';
 export { InlineRef } from '../chunk-JGDCVLD4.js';
 export { MARKDOWN_CALLOUT_NAMES, MARKDOWN_CALLOUT_TONES, markdownBreaks, markdownClosesFence, markdownCodeText, markdownFenceOf, markdownHeadingOf, markdownInline, markdownLines, parseMarkdown, parseMarkdownSpans, safeHref } from '../chunk-KBZO4B33.js';
 export { KeyValueRows, keyValueRowsLabels } from '../chunk-SRHLFQ4J.js';
-export { IDLE_AFTER_MS, useFullscreen, useIdle } from '../chunk-W5XCNEZC.js';
+export { Highlight, highlightRanges, highlightTerms } from '../chunk-H6VKCIWV.js';
 import '../chunk-MICRGE3J.js';
 import '../chunk-FFMCMSJB.js';
 export { IconTile } from '../chunk-3LI4TRUR.js';
@@ -121,7 +121,7 @@ export { FolderTile, describeFolderContents, folderContentsParts } from '../chun
 export { FollowBanner } from '../chunk-NTRKC2JV.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 { Highlight, highlightRanges, highlightTerms } from '../chunk-H6VKCIWV.js';
+export { IDLE_AFTER_MS, useFullscreen, useIdle } from '../chunk-W5XCNEZC.js';
 export { EntityChip } from '../chunk-65RFU7LF.js';
 export { EntityList } from '../chunk-TN3BH3Q4.js';
 export { ErrorBoundary } from '../chunk-IJ7KLXUZ.js';
@@ -136,10 +136,10 @@ export { downloadBlob, downloadText, safeFilename, useDownload } from '../chunk-
 export { EditingStatus } from '../chunk-OU6ZSWEJ.js';
 export { EMOJI_GROUPS, EMOJI_PICKER_COLUMNS, EMOJI_PICKER_LABELS, EmojiPicker, emojiName, searchEmoji } from '../chunk-HZPUMGQV.js';
 export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-C2HIMGFI.js';
-export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-XJOTW2FB.js';
+export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-5U6XAUYM.js';
 export { STEP_STATES, STEP_STATE_LABELS, StepList, StepStateMark, Stepper, stepDetailPieces } from '../chunk-KUMHQY2B.js';
-export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from '../chunk-RQFRRPV6.js';
 export { REFUSAL_STRIP_LABELS, ReceiptStrip, RefusalStrip } from '../chunk-ZWCK4N4L.js';
+export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from '../chunk-RQFRRPV6.js';
 export { DELIVERY_RECEIPT_LABELS, DeliveryReceipt } from '../chunk-NGJWRR7E.js';
 export { DescriptionList, DescriptionListItem } from '../chunk-LH4OF7FI.js';
 export { DIFF_SUMMARY_LABELS, DIFF_VIEW_LABELS, DiffSummary, DiffView, MAX_DIFF_LINES, collapseDiff, diffLines, diffStat, firstChangedLines, splitLines } from '../chunk-AOFVXE6V.js';
@@ -208,7 +208,7 @@ export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth,
 export { Callout } from '../chunk-BPCY7ZID.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-NCUSI4ZU.js';
 import '../chunk-LM3ISVJA.js';
-export { AsideLayout } from '../chunk-QOXLP5PE.js';
+export { ASIDE_LAYOUT_SPLIT_REM, AsideLayout } from '../chunk-7UQQEUOT.js';
 export { ATTACHMENT_CHIP_LABELS, AttachmentChip } from '../chunk-MTDISM7I.js';
 export { Tag } from '../chunk-SJ3EUCFD.js';
 export { ATTENTION_LIST_LABELS, AttentionList } from '../chunk-AELKT34H.js';
@@ -234,7 +234,7 @@ export { Document, DocumentTitle, DocumentTitleField } from '../chunk-I4PBFJGX.j
 export { ArtifactKindGround, ArtifactKindIllustration, ArtifactKindTile } from '../chunk-J5T5TDM2.js';
 export { ArtifactMakeRow } from '../chunk-HDEKHP65.js';
 export { ArtifactNameCell } from '../chunk-LTD7KLOU.js';
-export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-ORONAXSF.js';
+export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-CWJLDCB7.js';
 export { afterMotion, releaseFocus, runningMotion, usePresence } from '../chunk-PCAT2EFB.js';
 import '../chunk-JLOESTT2.js';
 export { ArrangeBoard } from '../chunk-QO7QEQKV.js';
@@ -262,9 +262,10 @@ export { attachRef, composeRefs, useComposedRef } from '../chunk-L72URIHR.js';
 export { ACCESS_DENIED_REASONS, AccessDeniedCard } from '../chunk-QTMUKRTN.js';
 export { EmptyState } from '../chunk-PPUR46MK.js';
 export { Accordion, AccordionItem } from '../chunk-E2QPZGLG.js';
-export { ACTION_CARD_GROUND, ActionCard, ActionCardRow } from '../chunk-OM2LABPS.js';
 export { ActivityLine } from '../chunk-V7N5XWZ6.js';
 export { ThinkingIndicator } from '../chunk-3OIVYHAA.js';
+export { ACTION_CARD_GROUND, ActionCard, ActionCardRow } from '../chunk-OM2LABPS.js';
+export { ADD_PILL_MS, AddPill } from '../chunk-CVKANYHD.js';
 export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-BHVEHAAX.js';
 export { Timeline, TimelineItem } from '../chunk-ZDJQQ4LU.js';
 export { Section } from '../chunk-WFCWPXJN.js';
@@ -287,7 +288,6 @@ export { IconButton, IconButtonLink } from '../chunk-UAUP6XGK.js';
 export { DisclosureAnatomy } from '../chunk-ULYHDP7U.js';
 export { Count } from '../chunk-D2GT3CR4.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from '../chunk-PQADV6P6.js';
-export { ADD_PILL_MS, AddPill } from '../chunk-CVKANYHD.js';
 export { Announcer, announce, useAnnouncer } from '../chunk-2G355KDJ.js';
 export { VisuallyHidden } from '../chunk-UT6CW3C7.js';
 export { cx } from '../chunk-ODEQTPFM.js';

package/dist/index.js

@@ -9,27 +9,27 @@ export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '
 export { ThemeToggle } from './chunk-IPMJGK2Q.js';
 export { THREAD_SUMMARY_LABELS, ThreadSummary } from './chunk-JXDJVUWN.js';
 export { TileGrid } from './chunk-UFID3DSP.js';
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from './chunk-2BZ2W2YU.js';
 export { TIME_RANGE_CUSTOM, TIME_RANGE_PICKER_LABELS, TimeRangePicker, timeRangeFieldKey, timeRangeProblem } from './chunk-T5HZ5AYW.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from './chunk-2BZ2W2YU.js';
 export { ToastProvider, Toaster, readingDuration, toasterInsetStyle, useToast } from './chunk-JIBWNHTC.js';
 export { TagsInput } from './chunk-3LKOXQWZ.js';
 export { ThemeGallery } from './chunk-4TAMRAUQ.js';
 export { ThemeSwatch } from './chunk-3XQUEF5C.js';
 export { DensitySwitcher, ThemeSwitcher } from './chunk-FRERGOW3.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from './chunk-Z24ZUSTX.js';
-export { Switcher } from './chunk-ET4I3IEA.js';
+export { Switcher } from './chunk-O3II3KJY.js';
 export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell, TableTwoLineCell } from './chunk-QW4LAFTX.js';
-export { SlideGrid } from './chunk-6M2N6ETA.js';
 export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from './chunk-PW57R4BN.js';
 export { StatCard } from './chunk-G5IZGAWS.js';
-export { Statement } from './chunk-MZJKPTA5.js';
 export { StatGroup } from './chunk-OUD75UB2.js';
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from './chunk-ZDMZP5H4.js';
-export { TagGroup } from './chunk-UEOEBOBR.js';
+export { Statement } from './chunk-MZJKPTA5.js';
 export { matchesShortcut, useShortcut } from './chunk-LZNPL266.js';
 import './chunk-5AHNW5CP.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from './chunk-ZDMZP5H4.js';
+export { TagGroup } from './chunk-UEOEBOBR.js';
 export { SLIDE_COMPARE_LABELS, SlideCompare } from './chunk-XJMES7AE.js';
 export { SlideFilmstrip } from './chunk-RO5JU6SN.js';
+export { SlideGrid } from './chunk-6M2N6ETA.js';
 export { SegmentedMeter, segmentedMeterLabel } from './chunk-4AK52VHB.js';
 export { SelectionBar } from './chunk-XA2QKGBJ.js';
 export { SEND_BUTTON_LABELS, SendButton } from './chunk-T2GC7UAP.js';
@@ -37,19 +37,19 @@ export { SettingsTable, SettingsTableRow } from './chunk-SOYPCCSJ.js';
 export { SetupWizard } from './chunk-IX6CHGM4.js';
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from './chunk-Y7PPKQFQ.js';
 export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from './chunk-WJZTI2WC.js';
-export { canonicalMarkdown, roundTripMarkdown } from './chunk-GBASM5EV.js';
-import './chunk-7CSTEH5I.js';
-export { RoomRow } from './chunk-Z34W5TM6.js';
+export { RoomRow } from './chunk-PQDQ64KY.js';
 export { RUN_STATES, RunChip } from './chunk-MYFSVZKZ.js';
 export { FRAME_HELLO_TIMEOUT_MS, FRAME_LOAD_GRACE_MS, SandboxedFrame, SandboxedFrameNotice, SandboxedFramePlaceholder } from './chunk-V6WDJUYK.js';
 export { SearchTrigger } from './chunk-ERNT3UTB.js';
 export { SectionFrame, SectionFrameBody, SectionFrameNav } from './chunk-7BDBO2NP.js';
+export { RelatedRow } from './chunk-CL3FWLDO.js';
 export { RecordChip, RecordChipList } from './chunk-ZPTKAYJK.js';
 export { REFUSAL_CARD_LABELS, RefusalCard } from './chunk-GKBH5JHE.js';
-export { RelatedRow } from './chunk-CL3FWLDO.js';
 export { RESULT_TABLE_CARD_LABELS, RESULT_TABLE_COLLAPSED_ROWS, RESULT_TABLE_MAX_ROWS, ResultTableCard } from './chunk-BMBQ6UMD.js';
 export { Table } from './chunk-75NQV4R4.js';
 export { ReviewList } from './chunk-AGVGX52B.js';
+export { canonicalMarkdown, roundTripMarkdown } from './chunk-GBASM5EV.js';
+import './chunk-7CSTEH5I.js';
 export { RichEditor, preloadRichEditor } from './chunk-3P7XS5VT.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from './chunk-2DMTW2Y3.js';
 export { PropertyList } from './chunk-OPVTNHPH.js';
@@ -60,8 +60,8 @@ export { RAIL_LIST_LABELS, RailList } from './chunk-M576OESX.js';
 export { Select } from './chunk-3IWZVEXA.js';
 export { NavGroup, NavItem, SidebarNav } from './chunk-BRK3HXGZ.js';
 export { Text } from './chunk-O5CEG7TQ.js';
-export { READING_PANE_ENTER, ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from './chunk-64JNKLLP.js';
 export { AddReaction, REACTION_BAR_LABELS, ReactionBar, reactionWho } from './chunk-B3BJ66GQ.js';
+export { READING_PANE_ENTER, ReadingPane, ReadingPaneByline, ReadingPaneLead, ReadingPaneOutcome, ReadingPaneQuote, ReadingPaneReasoning, ReadingPaneSection, ReadingPaneTitle } from './chunk-64JNKLLP.js';
 export { PresenceStack } from './chunk-F7HZYTZT.js';
 export { PresenterView, formatStopwatch } from './chunk-LMEMH6DO.js';
 export { SLIDE_NAV_LABELS, SlideNav } from './chunk-5AJR6X75.js';
@@ -78,10 +78,11 @@ export { NewItemsNotice } from './chunk-463DNZXI.js';
 export { FactLine, ObjectHeader, SetByLine } from './chunk-AXEXOAZQ.js';
 export { OPEN_IN_APP_CARD_LABELS, OpenInAppCard } from './chunk-HZBXC3YD.js';
 export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from './chunk-NKBKHOMU.js';
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from './chunk-I46ZTLDW.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from './chunk-DWQYV5AV.js';
 export { TreeGrid } from './chunk-ZDWAIVWL.js';
 export { SIZE_EPSILON, TYPE_AHEAD_RESET_MS, createTreeModel, isTypeAheadKey, layoutConnectors, layoutForest, placeGroups, treeAllExpandable, treeAncestors, treeCollapseOrAscend, treeExpandOrDescend, treeExpandTo, treeExpandable, treeFirst, treeFirstChild, treeItemAction, treeLast, treeLevel, treeNext, treeParent, treePosInSet, treePrevious, treeSetSize, treeStep, treeTypeAhead, treeVisible, typeAheadBuffer, useLayoutAnchor, useMeasuredSizes, useTreeState } from './chunk-MY374UUD.js';
 export { OrgLabel } from './chunk-5YXMKZUA.js';
+export { MEMBER_PICKER_LABELS, MemberPicker, chosenMembers } from './chunk-SDHLAW3G.js';
 export { MentionChip } from './chunk-PX5BOALQ.js';
 export { MENTION_MENU_LABELS, MentionMenu, mentionQuery } from './chunk-G7SAFRSJ.js';
 export { PersonRow } from './chunk-6TD2PCZB.js';
@@ -93,21 +94,20 @@ export { LIVE_CURSOR_HIDE_MS, LIVE_CURSOR_REST_MS, LiveCursor } from './chunk-DP
 export { LIVE_PREVIEW_DWELL_MS, LIVE_PREVIEW_MARGIN, LIVE_PREVIEW_MAX, LIVE_PREVIEW_MAX_FRAMES, LIVE_PREVIEW_RENDER_MS, LIVE_PREVIEW_STILLS_KEPT, LivePreview, LivePreviewBudgetProvider, PREVIEW_FILL_MAX_CUT, PreviewScale, createLivePreviewBudget, createLivePreviewStills, immediately, perFrame, useLivePreview } from './chunk-CQFQGAZI.js';
 export { LogoSlot, LogoSlotGroup } from './chunk-LAZ72JOP.js';
 export { MARKDOWN_FORMATS, MARKDOWN_TEXT_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from './chunk-XSJSDNRR.js';
-export { MEMBER_PICKER_LABELS, MemberPicker, chosenMembers } from './chunk-SDHLAW3G.js';
 export { LAYERS_LIST_LABELS, LayersList } from './chunk-VUYNNILP.js';
 export { AutoGrid, Inline, Spacer, Stack } from './chunk-ZAC7SKUN.js';
 export { Link } from './chunk-QF5UNP4T.js';
 export { LinkCard } from './chunk-O3MYBNRO.js';
 import './chunk-KOJPDCGQ.js';
-export { List, ListItem } from './chunk-A7UOYLK3.js';
-export { ListDetail } from './chunk-P33VNG7Q.js';
 export { LinkInterstitial, openExternal } from './chunk-OC6BMY3C.js';
+export { List, ListItem } from './chunk-F2ZSFDJZ.js';
+export { ListDetail } from './chunk-P33VNG7Q.js';
 export { ListInput, withDraft } from './chunk-PICHV3PC.js';
 export { INLINE_EDITOR_LABELS, InlineEditor } from './chunk-CFJ7FQZI.js';
 export { InlineRef } from './chunk-JGDCVLD4.js';
 export { MARKDOWN_CALLOUT_NAMES, MARKDOWN_CALLOUT_TONES, markdownBreaks, markdownClosesFence, markdownCodeText, markdownFenceOf, markdownHeadingOf, markdownInline, markdownLines, parseMarkdown, parseMarkdownSpans, safeHref } from './chunk-KBZO4B33.js';
 export { KeyValueRows, keyValueRowsLabels } from './chunk-SRHLFQ4J.js';
-export { IDLE_AFTER_MS, useFullscreen, useIdle } from './chunk-W5XCNEZC.js';
+export { Highlight, highlightRanges, highlightTerms } from './chunk-H6VKCIWV.js';
 import './chunk-MICRGE3J.js';
 import './chunk-FFMCMSJB.js';
 export { IconTile } from './chunk-3LI4TRUR.js';
@@ -121,7 +121,7 @@ export { FolderTile, describeFolderContents, folderContentsParts } from './chunk
 export { FollowBanner } from './chunk-NTRKC2JV.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 { Highlight, highlightRanges, highlightTerms } from './chunk-H6VKCIWV.js';
+export { IDLE_AFTER_MS, useFullscreen, useIdle } from './chunk-W5XCNEZC.js';
 export { EntityChip } from './chunk-65RFU7LF.js';
 export { EntityList } from './chunk-TN3BH3Q4.js';
 export { ErrorBoundary } from './chunk-IJ7KLXUZ.js';
@@ -136,10 +136,10 @@ export { downloadBlob, downloadText, safeFilename, useDownload } from './chunk-Y
 export { EditingStatus } from './chunk-OU6ZSWEJ.js';
 export { EMOJI_GROUPS, EMOJI_PICKER_COLUMNS, EMOJI_PICKER_LABELS, EmojiPicker, emojiName, searchEmoji } from './chunk-HZPUMGQV.js';
 export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from './chunk-C2HIMGFI.js';
-export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from './chunk-XJOTW2FB.js';
+export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from './chunk-5U6XAUYM.js';
 export { STEP_STATES, STEP_STATE_LABELS, StepList, StepStateMark, Stepper, stepDetailPieces } from './chunk-KUMHQY2B.js';
-export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from './chunk-RQFRRPV6.js';
 export { REFUSAL_STRIP_LABELS, ReceiptStrip, RefusalStrip } from './chunk-ZWCK4N4L.js';
+export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from './chunk-RQFRRPV6.js';
 export { DELIVERY_RECEIPT_LABELS, DeliveryReceipt } from './chunk-NGJWRR7E.js';
 export { DescriptionList, DescriptionListItem } from './chunk-LH4OF7FI.js';
 export { DIFF_SUMMARY_LABELS, DIFF_VIEW_LABELS, DiffSummary, DiffView, MAX_DIFF_LINES, collapseDiff, diffLines, diffStat, firstChangedLines, splitLines } from './chunk-AOFVXE6V.js';
@@ -208,7 +208,7 @@ export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth,
 export { Callout } from './chunk-BPCY7ZID.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-NCUSI4ZU.js';
 import './chunk-LM3ISVJA.js';
-export { AsideLayout } from './chunk-QOXLP5PE.js';
+export { ASIDE_LAYOUT_SPLIT_REM, AsideLayout } from './chunk-7UQQEUOT.js';
 export { ATTACHMENT_CHIP_LABELS, AttachmentChip } from './chunk-MTDISM7I.js';
 export { Tag } from './chunk-SJ3EUCFD.js';
 export { ATTENTION_LIST_LABELS, AttentionList } from './chunk-AELKT34H.js';
@@ -234,7 +234,7 @@ export { Document, DocumentTitle, DocumentTitleField } from './chunk-I4PBFJGX.js
 export { ArtifactKindGround, ArtifactKindIllustration, ArtifactKindTile } from './chunk-J5T5TDM2.js';
 export { ArtifactMakeRow } from './chunk-HDEKHP65.js';
 export { ArtifactNameCell } from './chunk-LTD7KLOU.js';
-export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from './chunk-ORONAXSF.js';
+export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from './chunk-CWJLDCB7.js';
 export { afterMotion, releaseFocus, runningMotion, usePresence } from './chunk-PCAT2EFB.js';
 import './chunk-JLOESTT2.js';
 export { ArrangeBoard } from './chunk-QO7QEQKV.js';
@@ -262,9 +262,10 @@ export { attachRef, composeRefs, useComposedRef } from './chunk-L72URIHR.js';
 export { ACCESS_DENIED_REASONS, AccessDeniedCard } from './chunk-QTMUKRTN.js';
 export { EmptyState } from './chunk-PPUR46MK.js';
 export { Accordion, AccordionItem } from './chunk-E2QPZGLG.js';
-export { ACTION_CARD_GROUND, ActionCard, ActionCardRow } from './chunk-OM2LABPS.js';
 export { ActivityLine } from './chunk-V7N5XWZ6.js';
 export { ThinkingIndicator } from './chunk-3OIVYHAA.js';
+export { ACTION_CARD_GROUND, ActionCard, ActionCardRow } from './chunk-OM2LABPS.js';
+export { ADD_PILL_MS, AddPill } from './chunk-CVKANYHD.js';
 export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from './chunk-BHVEHAAX.js';
 export { Timeline, TimelineItem } from './chunk-ZDJQQ4LU.js';
 export { Section } from './chunk-WFCWPXJN.js';
@@ -287,7 +288,6 @@ export { IconButton, IconButtonLink } from './chunk-UAUP6XGK.js';
 export { DisclosureAnatomy } from './chunk-ULYHDP7U.js';
 export { Count } from './chunk-D2GT3CR4.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from './chunk-PQADV6P6.js';
-export { ADD_PILL_MS, AddPill } from './chunk-CVKANYHD.js';
 export { Announcer, announce, useAnnouncer } from './chunk-2G355KDJ.js';
 export { VisuallyHidden } from './chunk-UT6CW3C7.js';
 export { cx } from './chunk-ODEQTPFM.js';

package/dist/styles.css

@@ -964,7 +964,7 @@
 }
 
 
-/* AppShell-NX5HCD4O.css */
+/* AppShell-24IM2GC3.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -1175,7 +1175,18 @@
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
-  scrollbar-color: var(--color-scrollbar) transparent;
+}
+
+/* The rail's bar, only where `::-webkit-scrollbar` is not read: set where it
+   is, Chromium would draw its native bar instead of the base sheet's slim one. */
+@supports not selector(::-webkit-scrollbar) {
+  .crewlet-app-shell__rail-body {
+    scrollbar-color: var(--color-scrollbar) transparent;
+  }
+
+  .crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-body {
+    scrollbar-width: thin;
+  }
 }
 
 /*
@@ -2000,7 +2011,6 @@
 
 .crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-body {
   padding: var(--spacing-1) 0;
-  scrollbar-width: thin;
 }
 
 /*
@@ -4938,10 +4948,10 @@ a.crewlet-make-row__item:active {
 }
 
 
-/* AsideLayout-AA3DEJKN.css */
+/* AsideLayout-SJO7VLPQ.css */
 /*
  * AsideLayout: a main column with an aside beside it from 56rem of its own
- * width, and after it below that (AsideLayout.tsx).
+ * width (44rem in a pane), and after it below that (AsideLayout.tsx).
  */
 
 .crewlet-aside-layout {
@@ -4973,6 +4983,8 @@ a.crewlet-make-row__item:active {
    midway: the aside takes the gap's own step under it, where the stack's
    smaller step left it 32px under the main column and 24px over the aside. */
 .crewlet-aside-layout__aside {
+  --crewlet-aside-layout-stick: static;
+
   padding-top: var(--crewlet-aside-layout-gap);
   border-top: 1px solid var(--color-border-default);
 }
@@ -4984,11 +4996,53 @@ a.crewlet-make-row__item:active {
   }
 
   .crewlet-aside-layout__aside {
+    --crewlet-aside-layout-stick: sticky;
+
     padding-top: 0;
     border-top: 0;
   }
 }
 
+/* A PANE (`fit="pane"`) is narrower than a page by the list beside it: it
+   splits sooner, at a narrower aside, one step apart. */
+.crewlet-aside-layout--pane .crewlet-aside-layout__columns {
+  --crewlet-aside-layout-gap: var(--spacing-6);
+}
+
+@container (min-width: 44rem) {
+  .crewlet-aside-layout--pane .crewlet-aside-layout__columns {
+    grid-template-columns: minmax(0, 1fr) var(--crewlet-aside-layout-aside, 16rem);
+    gap: var(--spacing-4);
+  }
+
+  .crewlet-aside-layout--pane .crewlet-aside-layout__aside {
+    --crewlet-aside-layout-stick: sticky;
+
+    padding-top: 0;
+    border-top: 0;
+  }
+}
+
+/* STICKY (`sticky`): the aside's content as one stack, as tall as itself, so
+   it has the aside's length to stick along. Only a split sets the aside's
+   `--crewlet-aside-layout-stick`, so it sticks beside the main column alone. */
+.crewlet-aside-layout--sticky > .crewlet-aside-layout__columns {
+  align-items: stretch;
+}
+
+.crewlet-aside-layout__stick {
+  position: var(--crewlet-aside-layout-stick);
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+}
+
+/* ALONE (no aside), the main column is the whole width at every size. */
+.crewlet-aside-layout--alone > .crewlet-aside-layout__columns {
+  grid-template-columns: minmax(0, 1fr);
+}
+
 
 /* AttachmentChip-RZ6ZCB43.css */
 /*
@@ -25257,7 +25311,7 @@ a.crewlet-link-card:hover .crewlet-link-card__title {
 }
 
 
-/* List-ZZF6ZHRT.css */
+/* List-BNA4XGMH.css */
 /*
  * The non-tabular list. One row recipe, four framings.
  *
@@ -25387,6 +25441,13 @@ a.crewlet-link-card:hover .crewlet-link-card__title {
   display: list-item;
 }
 
+/* HANGING MARKERS stand in the margin before the list, so its words line up
+   with the text above rather than one gutter inside it. */
+.crewlet-list--hanging.crewlet-list--bulleted,
+.crewlet-list--hanging.crewlet-list--numbered {
+  padding-inline-start: 0;
+}
+
 .crewlet-list--bulleted .crewlet-list__row,
 .crewlet-list--numbered .crewlet-list__row {
   min-height: 0;
@@ -41008,7 +41069,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Switcher-VWQMZUTN.css */
+/* Switcher-ZGRTTVCS.css */
 /*
  * The switcher: a button that is the page's name, and a banded panel under it
  * (a search band, a list that scrolls, and a footer that does not).
@@ -41213,7 +41274,14 @@ svg.crewlet-switcher-trigger__chevron {
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: var(--spacing-1);
-  scrollbar-width: thin;
+}
+
+/* Thin only where `::-webkit-scrollbar` is not read: set where it is, Chromium
+   would draw its native bar instead of the base sheet's slim one. */
+@supports not selector(::-webkit-scrollbar) {
+  .crewlet-switcher__scroller {
+    scrollbar-width: thin;
+  }
 }
 
 .crewlet-switcher__list {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.95.0",
+  "version": "0.97.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.95.0",
-    "@crewlethq/tokens": "0.95.0",
+    "@crewlethq/icons": "0.97.0",
+    "@crewlethq/tokens": "0.97.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/scripts/check-css-literals.mjs

@@ -47,6 +47,10 @@
 //     the hover overlay, never both, because both are a background on the same
 //     element and the selected state wins. Drawing the hover on a ::before is
 //     the one way to stack them, and it produces a composite nothing measured.
+//  7. `scrollbar-width` and `scrollbar-color` only inside
+//     `@supports not selector(::-webkit-scrollbar)`, apart from `auto` and a
+//     hidden bar's `none`. Chromium ignores every `::-webkit-scrollbar` rule on
+//     an element that sets either, and draws its native bar instead.
 
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -76,6 +80,16 @@ const MOTION = new Map([
 /** The one query a stop is read inside: exactly this, with nothing else around it. */
 const REDUCE = /^@media\s*\(\s*prefers-reduced-motion\s*:\s*reduce\s*\)$/;
 
+/** The condition a scrollbar's standard properties are set under (rule 7). */
+const WITHOUT_WEBKIT_SCROLLBAR = /^@supports not \(?\s*selector\(\s*::-webkit-scrollbar\s*\)\s*\)?$/;
+
+/** Whether a declaration switches Chromium off the `::-webkit-scrollbar` rules. */
+function overridesWebkitScrollbar(property, value) {
+  const bare = value.replace(/!\s*important\s*$/i, '').trim().toLowerCase();
+  if (property === 'scrollbar-width') return bare !== 'auto' && bare !== 'none';
+  return property === 'scrollbar-color' && bare !== 'auto';
+}
+
 function declarations(body) {
   const found = [];
   for (const part of body.split(';')) {
@@ -235,8 +249,10 @@ export async function findings(roots, base = packageRoot) {
   for (const file of files) {
     const at = (index) => `${file.where}:${lineOf(file.text, index)}`;
 
-    for (const { selector, body, index, nestedDeclarations } of rules(file.text)) {
+    for (const block of rules(file.text)) {
+      const { selector, body, index, nestedDeclarations } = block;
       const where = at(index);
+      const withoutWebkitScrollbar = conditions(block).some((head) => WITHOUT_WEBKIT_SCROLLBAR.test(head));
 
       // Declarations resumed after a nested block carry their block's head
       // again, and the head was read with the block.
@@ -279,6 +295,11 @@ export async function findings(roots, base = packageRoot) {
         if (property === 'z-index' && /^-?\d+$/.test(bare.trim()) && Math.abs(Number(bare.trim())) > 1) {
           problems.push(`${where}: z-index is a literal (${value.trim()}). Use a --z-index-* token, or the Layer module's own depth`);
         }
+        if (!withoutWebkitScrollbar && overridesWebkitScrollbar(property, value)) {
+          problems.push(
+            `${where}: ${property} is set where Chromium reads ::-webkit-scrollbar, so it ignores those rules and draws its native bar. Set it inside @supports not selector(::-webkit-scrollbar)`,
+          );
+        }
       }
     }
 

package/dist/AsideLayout-AA3DEJKN.css

@@ -1,49 +0,0 @@
-/*
- * AsideLayout: a main column with an aside beside it from 56rem of its own
- * width, and after it below that (AsideLayout.tsx).
- */
-
-.crewlet-aside-layout {
-  container-type: inline-size;
-  min-width: 0;
-}
-
-.crewlet-aside-layout__columns {
-  --crewlet-aside-layout-gap: var(--spacing-7);
-
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  align-items: start;
-  gap: var(--crewlet-aside-layout-gap);
-}
-
-/* EACH COLUMN IS A STACK one step apart, so the blocks in it stand apart
-   evenly without each carrying a margin of its own. */
-.crewlet-aside-layout__main,
-.crewlet-aside-layout__aside {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-6);
-  min-width: 0;
-}
-
-/* FOLLOWING THE MAIN COLUMN, the aside is set off by one hairline, so its
-   facts read as about the page rather than as more of it. The hairline sits
-   midway: the aside takes the gap's own step under it, where the stack's
-   smaller step left it 32px under the main column and 24px over the aside. */
-.crewlet-aside-layout__aside {
-  padding-top: var(--crewlet-aside-layout-gap);
-  border-top: 1px solid var(--color-border-default);
-}
-
-@container (min-width: 56rem) {
-  .crewlet-aside-layout__columns {
-    grid-template-columns: minmax(0, 1fr) var(--crewlet-aside-layout-aside, 18rem);
-    gap: var(--spacing-8);
-  }
-
-  .crewlet-aside-layout__aside {
-    padding-top: 0;
-    border-top: 0;
-  }
-}

package/dist/chunk-QOXLP5PE.js

@@ -1,12 +0,0 @@
-import { cx } from './chunk-ODEQTPFM.js';
-import './AsideLayout-AA3DEJKN.css';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-function AsideLayout({ children, aside, asideLabel, className, ...rest }) {
-  return /* @__PURE__ */ jsx("div", { ...rest, className: cx("crewlet-aside-layout", className), children: /* @__PURE__ */ jsxs("div", { className: "crewlet-aside-layout__columns", children: [
-    /* @__PURE__ */ jsx("div", { className: "crewlet-aside-layout__main", children }),
-    /* @__PURE__ */ jsx("aside", { className: "crewlet-aside-layout__aside", "aria-label": asideLabel, children: aside })
-  ] }) });
-}
-
-export { AsideLayout };

package/dist/{chunk-XJOTW2FB.js → chunk-5U6XAUYM.js}

@@ -1,6 +1,6 @@
 import { StepList } from './chunk-KUMHQY2B.js';
-import { Meter } from './chunk-RQFRRPV6.js';
 import { ReceiptStrip } from './chunk-ZWCK4N4L.js';
+import { Meter } from './chunk-RQFRRPV6.js';
 import { StatusCard } from './chunk-4BEMS6Q7.js';
 import { Disclosure } from './chunk-NAHA62WD.js';
 import { Spinner } from './chunk-XSPCITPN.js';

package/dist/{chunk-I46ZTLDW.js → chunk-DWQYV5AV.js}

@@ -1,8 +1,8 @@
 import { TreeGrid } from './chunk-ZDWAIVWL.js';
 import { createTreeModel, treeParent } from './chunk-MY374UUD.js';
 import { OrgLabel } from './chunk-5YXMKZUA.js';
-import { IconButton } from './chunk-UAUP6XGK.js';
 import { AddPill } from './chunk-CVKANYHD.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './OrgTable-JZSYTUIK.css';
 import { useMemo, useRef, useImperativeHandle, useCallback } from 'react';