@crewlethq/ui 0.64.1 → 0.65.0

package/dist/AppShell/index.d.ts

@@ -5,6 +5,7 @@ export { APP_SHELL_ASIDE_WIDTH, AppShell, AppShellRail, AppShellRailRow, AppShel
 export { RESIZE_HANDLE_LARGE_STEP, RESIZE_HANDLE_STEP, ResizeHandle, clampSize } from './ResizeHandle.js';
 export type { ResizeHandleProps } from './ResizeHandle.js';
 export { readStoredWidth, useStoredWidth } from './storedWidth.js';
+export { useScreenBelow, useScreenWidth } from './screenWidth.js';
 export type { StoredWidth, StoredWidthOptions, WidthStorage } from './storedWidth.js';
 export { AccountRow } from './AccountRow.js';
 export type { AccountRowMenu, AccountRowProps } from './AccountRow.js';

package/dist/AppShell/index.js

@@ -1,4 +1,4 @@
-export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useStoredWidth } from '../chunk-AJLMINJU.js';
+export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-E55DKVY7.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-T73DMDU4.js';
 export { RESIZE_HANDLE_LARGE_STEP, RESIZE_HANDLE_STEP, ResizeHandle, clampSize, useAppShellAside, useAppShellPeek } from '../chunk-PIYJNCN7.js';

package/dist/AppShell/screenWidth.d.ts

@@ -0,0 +1,66 @@
+/**
+ * The SCREEN'S width: the content column the shell draws a screen in, which is
+ * what a screen's layout has to fit, rather than the window's.
+ *
+ * WHY NOT THE WINDOW. The window reports what the frame takes from it only
+ * while that never changes. The rail is a fixed share, but an aside the reader
+ * opens (the assistant) and drags wider takes width the window never reports:
+ * at a 1375px window with a 640px aside the screen is 443px wide while a
+ * media query still answers "desktop". A split screen that asks the window
+ * keeps its two columns and draws its reading pane 130px wide. Stylesheets
+ * already answer this with a container query on the content column; this is
+ * the same answer for the decisions a stylesheet cannot make, such as which
+ * pane a screen renders or whether it fills the window.
+ *
+ * ONE MEASUREMENT FOR EVERY CONSUMER. The shell measures its content column
+ * once and publishes the width through a store, so twenty screens asking do
+ * not attach twenty observers, and every one of them reads the same number in
+ * the same frame.
+ *
+ * RE-RENDERS ON A CROSSING, NOT ON A PIXEL. [useScreenBelow] subscribes to the
+ * answer to its own question, so dragging the aside re-renders a screen only
+ * when the screen crosses that screen's threshold.
+ *
+ * OUTSIDE A SHELL IT IS THE WINDOW. A primitive drawn in a story, a test or an
+ * application without the shell still gets an answer: the window's, through
+ * the same media query it would have asked before. The first render inside a
+ * shell answers the same way, and the shell's measurement replaces it in a
+ * layout effect, before anything is painted.
+ */
+/** Where the shell keeps the content column's width, and who listens. */
+export interface ScreenWidthStore {
+    /** The content column's inner width in px, or null before it is measured. */
+    get(): number | null;
+    /** Record a new width, telling every listener when it changed. */
+    set(width: number | null): void;
+    subscribe(listener: () => void): () => void;
+}
+/** A store for one shell's content column. */
+export declare function createScreenWidthStore(): ScreenWidthStore;
+export declare const ScreenWidthContext: import("react").Context<ScreenWidthStore | null>;
+/**
+ * The width of an element's content box: its client width less its inline
+ * padding, which is what a container query on it measures.
+ *
+ * NULL FOR AN ELEMENT WITH NO BOX (hidden, detached, or a document without
+ * layout such as a test's): a width of zero there is not a measurement, and
+ * answering "narrower than everything" would fold every screen. The window's
+ * answer stands instead.
+ */
+export declare function contentInlineSize(element: HTMLElement): number | null;
+/**
+ * The width of the screen's content column in px, re-read whenever it
+ * changes; null outside a shell, or before the shell has measured it.
+ */
+export declare function useScreenWidth(): number | null;
+/**
+ * Whether the screen's content column is narrower than `width` px: the
+ * question a screen asks before it chooses its narrow shape. Inside a shell it
+ * is answered from the shell's measured content column, so an aside the
+ * reader opens or drags counts; outside one, by the window, exactly as
+ * `useMediaMatch(`(width < ${width}px)`)` would.
+ *
+ * STRICTLY UNDER, like the stylesheets' `(width < 640px)`: at exactly the
+ * threshold the wide shape fits.
+ */
+export declare function useScreenBelow(width: number): boolean;

package/dist/DataGrid/DataGrid.d.ts

@@ -243,26 +243,58 @@ export interface GridFit {
     readonly width: number;
     /** The keys it dropped, in the order it dropped them. */
     readonly dropped: readonly string[];
+    /**
+     * Whether the grid has STACKED into card rows: it still did not fit with
+     * every give-way column gone, so its rows are cards, as on a phone.
+     */
+    readonly stacked?: boolean | undefined;
 }
 /**
  * The next fit, or null when this one stands. PURE, so the rules are held
  * without a layout engine:
  *
- * - the grid GREW past the width columns were dropped at: start again from all
- *   of them (the next pass drops again only what still does not fit);
+ * - the grid GREW past the width columns were dropped or it stacked at: start
+ *   again from all of them as columns (the next pass drops, and stacks, again
+ *   only what still does not fit);
+ * - a stacked grid that did not grow stays stacked: its rows are cards and
+ *   there is no column left to measure;
  * - the tracks OVERRUN the grid: drop the visible column with the lowest
  *   `drop`, if there is one;
+ * - nothing is left to drop and the grid still cannot draw its values
+ *   (`stack`: the tracks overrun, or a value is cut short): STACK into card
+ *   rows, the shape a phone draws, rather than clip;
  * - otherwise remember a narrower width, so growing back past it re-tries.
  */
-export declare function fitGridColumns({ fit, width, overflows, visible, }: {
+export declare function fitGridColumns({ fit, width, overflows, stack, visible, }: {
     fit: GridFit;
     width: number;
+    /** The columns do not fit: overrun, or a value or a head cut short. */
     overflows: boolean;
+    /**
+     * The grid cannot draw its VALUES: the tracks overrun, or a value is cut
+     * short. A head alone cut short drops a give-way column but never stacks.
+     */
+    stack?: boolean;
     visible: readonly {
         key: string;
         drop?: number | undefined;
     }[];
 }): GridFit | null;
+/**
+ * Whether a content-sized column has been SQUEEZED: drawn narrower than its
+ * cap AND cutting a value short, or its HEAD. The quieter way a grid fails to
+ * fit: rather than overrun, it shrinks a status pill to a letter, or every
+ * head of a row of counts to its first letter over values that still fit,
+ * while the columns that could have gone stay. Read over the head and the
+ * first screen of rows. `leading` is how many of the grid's own columns (the
+ * selection column) are drawn before the caller's.
+ *
+ * `'values'` where a value is cut short (the grid cannot be read: drop, then
+ * stack), `'heads'` where only a head is (drop a column if one may go, but a
+ * grid whose every value reads is not turned into cards for a head), and
+ * null where nothing is.
+ */
+export declare function squeezed<T>(wrap: HTMLElement, visible: readonly DataGridColumn<T>[], leading?: number): 'values' | 'heads' | null;
 /**
  * A list as columns: sortable heads, optional and give-way columns, bands for
  * a grouped answer, a row link stretched over each row, and a card per row on

package/dist/DataGrid/index.js

@@ -1,4 +1,4 @@
-export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, parseGridSort, useAnyDataGridDriving, useDataGridDriving } from '../chunk-4W7F3JEK.js';
+export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, parseGridSort, useAnyDataGridDriving, useDataGridDriving } from '../chunk-ELLRZ5XR.js';
 import '../chunk-PBCNINMB.js';
 import '../chunk-PPUR46MK.js';
 import '../chunk-ETSF7SU6.js';

package/dist/{DataGrid-QYORTTHI.css → DataGrid-NHIN2I42.css}

@@ -467,7 +467,7 @@ button.crewlet-data-grid__row-link {
   }
 }
 
-/* ---- A ROW IS A CARD ON A PHONE -----------------------------------------
+/* ---- A ROW IS A CARD ON A PHONE, OR WHERE COLUMNS DO NOT FIT -----------------------------------------
    A GRID IS COLUMNS, AND A PHONE DOES NOT HAVE THEM: the grid clips (for its
    sticky head), so the columns past the edge were cut off with nothing to
    scroll to, and a sideways scroller resolves every flexible track to zero. So
@@ -477,111 +477,114 @@ button.crewlet-data-grid__row-link {
    (`:empty`), and a cell that draws a marked absence has content and stays.
    The sort is in the application's state, so a sorted list still arrives
    sorted. */
-@media (width < 640px) {
-  .crewlet-data-grid {
-    /* No ghost control is pulled out here (see above): every line of a card
-       starts at the grid's edge, and a compact row's marks run on one line,
-       where the hover ground swallowed the gap before it. */
-    --crewlet-data-grid-control-outdent: 0px;
-
-    display: block;
-  }
+/* Card rows are the grid's own decision (`data-stacked`, DataGrid.tsx): set
+   on a phone, and wherever the grid's own width cannot hold its columns once
+   every give-way column has gone. `:where()` keeps each rule's weight what it
+   was when this block was a media query, so a rule written against the card
+   shape still wins where it did. */
+.crewlet-data-grid:where([data-stacked]) {
+  /* No ghost control is pulled out here (see above): every line of a card
+     starts at the grid's edge, and a compact row's marks run on one line,
+     where the hover ground swallowed the gap before it. */
+  --crewlet-data-grid-control-outdent: 0px;
 
-  .crewlet-data-grid__head {
-    display: none;
-  }
+  display: block;
+}
 
-  .crewlet-data-grid__body,
-  .crewlet-data-grid__band {
-    display: block;
-  }
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__head {
+  display: none;
+}
 
-  .crewlet-data-grid__row {
-    display: block;
-    padding: var(--spacing-2) var(--crewlet-data-grid-edge);
-    min-height: 0;
-  }
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__body,
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__band {
+  display: block;
+}
 
-  /* A FIXED BASIS lines the names up without a track, and the name wraps
-     inside it rather than pushing its value past every other card line. */
-  .crewlet-data-grid__cell {
-    display: flex;
-    align-items: baseline;
-    gap: var(--spacing-3);
-    padding: 1px 0;
-    min-width: 0;
-  }
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__row {
+  display: block;
+  padding: var(--spacing-2) var(--crewlet-data-grid-edge);
+  min-height: 0;
+}
 
-  .crewlet-data-grid__cell:empty {
-    display: none;
-  }
+/* A FIXED BASIS lines the names up without a track, and the name wraps
+   inside it rather than pushing its value past every other card line. */
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-3);
+  padding: 1px 0;
+  min-width: 0;
+}
 
-  .crewlet-data-grid__cell[data-label]::before {
-    content: attr(data-label);
-    flex: 0 0 7rem;
-    overflow-wrap: anywhere;
-    font-size: var(--font-size-2xs);
-    text-transform: uppercase;
-    letter-spacing: var(--font-letter-spacing-wide);
-    color: var(--color-text-tertiary);
-  }
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell:empty {
+  display: none;
+}
 
-  /* `shrink` and `right` are column shapes, and there are no columns here. */
-  .crewlet-data-grid__cell--shrink,
-  .crewlet-data-grid__cell--right {
-    white-space: normal;
-    justify-content: flex-start;
-  }
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell[data-label]::before {
+  content: attr(data-label);
+  flex: 0 0 7rem;
+  overflow-wrap: anywhere;
+  font-size: var(--font-size-2xs);
+  text-transform: uppercase;
+  letter-spacing: var(--font-letter-spacing-wide);
+  color: var(--color-text-tertiary);
+}
 
-  .crewlet-data-grid__cell .crewlet-data-grid__truncate {
-    white-space: normal;
-    overflow: visible;
-    text-overflow: clip;
-    overflow-wrap: anywhere;
-  }
+/* `shrink` and `right` are column shapes, and there are no columns here. */
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell--shrink,
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell--right {
+  white-space: normal;
+  justify-content: flex-start;
+}
 
-  /* ---- THE COMPACT ROW (`phoneRows="compact"`) ---------------------------
-     TWO LINES, NO LABELS: what the row is, then its marks. One flex run that
-     breaks once: the lead cells first, a zero-height full-width `::after`
-     between them and the rest, then every other cell in column order. */
-  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--spacing-1) var(--spacing-2);
-  }
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell .crewlet-data-grid__truncate {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  overflow-wrap: anywhere;
+}
 
-  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__row::after {
-    content: '';
-    order: 1;
-    flex-basis: 100%;
-    height: 0;
-  }
+/* ---- THE COMPACT ROW (`phoneRows="compact"`) ---------------------------
+   TWO LINES, NO LABELS: what the row is, then its marks. One flex run that
+   breaks once: the lead cells first, a zero-height full-width `::after`
+   between them and the rest, then every other cell in column order. */
+.crewlet-data-grid[data-phone-rows='compact']:where([data-stacked]) .crewlet-data-grid__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-2);
+}
 
-  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell {
-    order: 2;
-    padding: 0;
-    align-items: center;
-    gap: var(--spacing-1);
-  }
+.crewlet-data-grid[data-phone-rows='compact']:where([data-stacked]) .crewlet-data-grid__row::after {
+  content: '';
+  order: 1;
+  flex-basis: 100%;
+  height: 0;
+}
 
-  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell[data-lead] {
-    order: 0;
-  }
+.crewlet-data-grid[data-phone-rows='compact']:where([data-stacked]) .crewlet-data-grid__cell {
+  order: 2;
+  padding: 0;
+  align-items: center;
+  gap: var(--spacing-1);
+}
 
-  /* The title takes the rest of the first line, beside the key. */
-  .crewlet-data-grid[data-phone-rows='compact']
-    .crewlet-data-grid__cell[data-lead]:not(.crewlet-data-grid__cell--shrink) {
-    flex: 1 1 0;
-    min-width: 0;
-    font-weight: var(--font-weight-medium);
-  }
+.crewlet-data-grid[data-phone-rows='compact']:where([data-stacked]) .crewlet-data-grid__cell[data-lead] {
+  order: 0;
+}
 
-  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell[data-label]::before {
-    content: none;
-  }
+/* The title takes the rest of the first line, beside the key. */
+.crewlet-data-grid[data-phone-rows='compact']
+  .crewlet-data-grid__cell[data-lead]:not(.crewlet-data-grid__cell--shrink) {
+  flex: 1 1 0;
+  min-width: 0;
+  font-weight: var(--font-weight-medium);
+}
 
-  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell[data-phone-omit] {
-    display: none;
-  }
+.crewlet-data-grid[data-phone-rows='compact']:where([data-stacked]) .crewlet-data-grid__cell[data-label]::before {
+  content: none;
+}
+
+.crewlet-data-grid[data-phone-rows='compact']:where([data-stacked]) .crewlet-data-grid__cell[data-phone-omit] {
+  display: none;
 }

package/dist/ListDetail/ListDetail.d.ts

@@ -6,8 +6,9 @@ export interface ListDetailProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
     /** The chosen item's detail. */
     children: ReactNode;
     /**
-     * Which pane a phone shows, where the two are one column: the list until
-     * something is chosen, then the detail. Wider, both are always shown.
+     * Which pane shows where the two are one column (under 640px of the
+     * component's own width): the list until something is chosen, then the
+     * detail. Wider, both are always shown.
      */
     showing?: ListDetailPane | undefined;
 }
@@ -20,8 +21,12 @@ export interface ListDetailProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
  * column. The list column is `--crewlet-list-detail-list` wide (17rem by
  * default), with a hairline between the two.
  *
- * BELOW 640px IT IS ONE PANE, the one `showing` names, as tall as its content
- * on a page that scrolls as any other: a phone has no room for two columns,
- * and the application gives its detail a way back to the list.
+ * BELOW 640px OF ITS OWN WIDTH IT IS ONE PANE, the one `showing` names: the
+ * list and a reading detail do not both fit, whether the window is a phone or
+ * an aside beside the screen has taken the room. The application gives its
+ * detail a way back to the list, and asks the same question to decide when to
+ * draw it (`useScreenBelow(640)` for a ListDetail that spans the screen, or a
+ * container query on it). On a phone the page scrolls as any other, each pane
+ * as tall as its content.
  */
 export declare function ListDetail({ list, children, showing, className, ...rest }: ListDetailProps): import("react").JSX.Element;

package/dist/ListDetail/index.js

@@ -1,2 +1,2 @@
-export { ListDetail } from '../chunk-RXG543EB.js';
+export { ListDetail } from '../chunk-YBC2CYPD.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ListDetail-5NXERLRJ.css → ListDetail-N3L7PB46.css}

@@ -1,6 +1,15 @@
 /*
  * ListDetail: a list beside the detail of what is chosen in it, each scrolling
- * on its own in the height it is given, one pane on a phone (ListDetail.tsx).
+ * on its own in the height it is given, one pane where it is narrow
+ * (ListDetail.tsx).
+ *
+ * IT FOLDS BY ITS OWN WIDTH, NOT THE WINDOW'S. The root is an inline-size
+ * container and the panes are its child, so the fold answers how wide THIS
+ * list and detail are: beside an aside the reader opened (the assistant) a
+ * 1375px window can leave the screen 443px, and a fold that asked the window
+ * drew the detail 130px wide beside a 17rem list. The phone rule below is the
+ * one decision that stays the window's: on a phone the page scrolls as a
+ * whole rather than each pane on its own.
  */
 
 /* THE HAIRLINE STANDS MIDWAY between the two panes: the list's inset before it
@@ -9,11 +18,20 @@
 .crewlet-list-detail {
   --crewlet-list-detail-gutter: var(--spacing-7);
 
+  container: crewlet-list-detail / inline-size;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.crewlet-list-detail__panes {
   display: grid;
   flex: 1 1 auto;
   grid-template-columns: var(--crewlet-list-detail-list, 17rem) minmax(0, 1fr);
   gap: var(--crewlet-list-detail-gutter);
-  height: 100%;
   min-width: 0;
   min-height: 0;
 }
@@ -36,19 +54,18 @@
   overflow-y: auto;
 }
 
-@media (width < 640px) {
-  .crewlet-list-detail {
+/* ONE PANE UNDER 640px OF ITS OWN WIDTH: the list and a reading detail do not
+   both fit, so the pane `showing` names takes the whole width and keeps its
+   own scroller, which is what lets it sit in a screen that fills the window. */
+@container crewlet-list-detail (width < 640px) {
+  .crewlet-list-detail__panes {
     grid-template-columns: minmax(0, 1fr);
-    height: auto;
   }
 
   .crewlet-list-detail__list {
     padding-right: 0;
     border-right: 0;
-  }
-
-  .crewlet-list-detail__detail {
-    overflow: visible;
+    overflow-y: auto;
   }
 
   .crewlet-list-detail--showing-list .crewlet-list-detail__detail,
@@ -56,3 +73,15 @@
     display: none;
   }
 }
+
+/* ON A PHONE THE PAGE SCROLLS AS A WHOLE, as tall as its content. */
+@media (width < 640px) {
+  .crewlet-list-detail {
+    height: auto;
+  }
+
+  .crewlet-list-detail__list,
+  .crewlet-list-detail__detail {
+    overflow: visible;
+  }
+}

package/dist/{chunk-AJLMINJU.js → chunk-E55DKVY7.js}

@@ -10,7 +10,7 @@ import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
 import './AppShell-LZQA3XU4.css';
 import './ResizeHandle-2UNSZ4ZQ.css';
-import { createContext, forwardRef, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
+import { createContext, forwardRef, useContext, useSyncExternalStore, useCallback, useId, useState, useRef, useEffect, useLayoutEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { ChevronUpGlyph, ChevronsUpDownGlyph, ChevronRightGlyph, MenuGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -79,6 +79,49 @@ function AccountRow({
     actions ? /* @__PURE__ */ jsx("div", { className: "crewlet-account-row__actions", children: actions }) : null
   ] });
 }
+function createScreenWidthStore() {
+  let width = null;
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    get: () => width,
+    set(next) {
+      if (next === width) return;
+      width = next;
+      for (const listener of listeners) listener();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+var ScreenWidthContext = createContext(null);
+var noSubscription = () => () => {
+};
+function contentInlineSize(element) {
+  if (element.getClientRects().length === 0) return null;
+  const style = getComputedStyle(element);
+  const padding = (Number.parseFloat(style.paddingLeft) || 0) + (Number.parseFloat(style.paddingRight) || 0);
+  return Math.max(0, Math.round(element.clientWidth - padding));
+}
+function useScreenWidth() {
+  const store = useContext(ScreenWidthContext);
+  return useSyncExternalStore(
+    store ? store.subscribe : noSubscription,
+    () => store ? store.get() : null,
+    () => null
+  );
+}
+function useScreenBelow(width) {
+  const store = useContext(ScreenWidthContext);
+  const window2 = useMediaMatch(`(width < ${width}px)`);
+  const read = useCallback(() => {
+    const measured2 = store ? store.get() : null;
+    return measured2 === null ? null : measured2 < width;
+  }, [store, width]);
+  const measured = useSyncExternalStore(store ? store.subscribe : noSubscription, read, () => null);
+  return measured ?? window2;
+}
 var APP_SHELL_ASIDE_WIDTH = 420;
 var NARROW = `(width < ${breakpoint.shell})`;
 var AppShellContext = createContext(null);
@@ -167,6 +210,21 @@ function AppShell({
     observer.observe(frame);
     return () => observer.disconnect();
   }, [asideColumn]);
+  const content = useRef(null);
+  const [screenWidth] = useState(createScreenWidthStore);
+  useLayoutEffect(() => {
+    const column = content.current;
+    if (!column) return void 0;
+    const measure = () => screenWidth.set(contentInlineSize(column));
+    measure();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(measure);
+    observer.observe(column);
+    return () => {
+      observer.disconnect();
+      screenWidth.set(null);
+    };
+  }, [screenWidth]);
   const shell = {
     narrow,
     drawerOpen,
@@ -238,7 +296,7 @@ function AppShell({
           topbar,
           banner ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__banner", children: banner }) : null,
           /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__body", children: [
-            /* @__PURE__ */ jsx("main", { id: main, ref: setMain, className: "crewlet-app-shell__main", tabIndex: -1, children: /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__content", children }) }),
+            /* @__PURE__ */ jsx("main", { id: main, ref: setMain, className: "crewlet-app-shell__main", tabIndex: -1, children: /* @__PURE__ */ jsx("div", { ref: content, className: "crewlet-app-shell__content", children: /* @__PURE__ */ jsx(ScreenWidthContext.Provider, { value: screenWidth, children }) }) }),
             hasPeek ? /* @__PURE__ */ jsx(PeekContext.Provider, { value: { shape: peekShape }, children: peek }) : null
           ] }),
           footer
@@ -598,4 +656,4 @@ function useStoredWidth({ key, min, max, storage }) {
   return { width, setWidth, commitWidth };
 }
 
-export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useStoredWidth };
+export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth };