@crewlethq/ui 0.64.1 → 0.65.1

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/ArtifactCard/index.js

@@ -1,15 +1,15 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-N7PXGOZP.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-UBIPDEFV.js';
 import '../chunk-BRLZXYPA.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-L6NG7CUA.js';
 import '../chunk-RE3FBGQQ.js';
-import '../chunk-7XKDPTZ5.js';
+import '../chunk-4AUTALJA.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-NHLNHH4J.js';
-import '../chunk-PBCNINMB.js';
 import '../chunk-DOY3KC6I.js';
+import '../chunk-PBCNINMB.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';
 import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';

package/dist/AuthLayout/index.js

@@ -1,6 +1,6 @@
-export { AuthLayout } from '../chunk-JAFWGVX2.js';
+export { AuthLayout } from '../chunk-WKKWF277.js';
 import '../chunk-7KBNFFM3.js';
-import '../chunk-7XKDPTZ5.js';
+import '../chunk-4AUTALJA.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';

package/dist/Card/index.js

@@ -1,4 +1,4 @@
-export { Card } from '../chunk-7XKDPTZ5.js';
+export { Card } from '../chunk-4AUTALJA.js';
 export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';

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/DeepWorkCard/index.js

@@ -1,11 +1,11 @@
-export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-RHL4OMQ3.js';
+export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-UWOYDHVW.js';
 import '../chunk-HJBHP66O.js';
 import '../chunk-RQFRRPV6.js';
 import '../chunk-M25IV5MH.js';
-import '../chunk-G4234OIG.js';
+import '../chunk-NTQPJJAN.js';
 import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-7XKDPTZ5.js';
+import '../chunk-4AUTALJA.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-222VILSP.js';
 import '../chunk-IVTQWOXV.js';

package/dist/EntityList/index.js

@@ -1,8 +1,8 @@
-export { EntityList } from '../chunk-ISBKJOLI.js';
-import '../chunk-G4234OIG.js';
+export { EntityList } from '../chunk-7IW3P6FH.js';
+import '../chunk-NTQPJJAN.js';
 import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-7XKDPTZ5.js';
+import '../chunk-4AUTALJA.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';

package/dist/FolderTile/index.js

@@ -1,5 +1,5 @@
-export { FolderTile, describeFolderContents, folderContentsParts } from '../chunk-6MTJWQ3V.js';
-import '../chunk-7XKDPTZ5.js';
+export { FolderTile, describeFolderContents, folderContentsParts } from '../chunk-WTXCK46H.js';
+import '../chunk-4AUTALJA.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';

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/OpenInAppCard/index.js

@@ -1,11 +1,11 @@
-export { OPEN_IN_APP_CARD_LABELS, OpenInAppCard } from '../chunk-ZFN4IBVC.js';
+export { OPEN_IN_APP_CARD_LABELS, OpenInAppCard } from '../chunk-5K7GGQNX.js';
 import '../chunk-BAKPMH3S.js';
 import '../chunk-3LI4TRUR.js';
 import '../chunk-M25IV5MH.js';
-import '../chunk-G4234OIG.js';
+import '../chunk-NTQPJJAN.js';
 import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-7XKDPTZ5.js';
+import '../chunk-4AUTALJA.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';

package/dist/ProposalCard/index.js

@@ -1,11 +1,11 @@
-export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, ProposalCard } from '../chunk-4WKOLL7C.js';
+export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, ProposalCard } from '../chunk-FZUDUNCK.js';
 import '../chunk-M25IV5MH.js';
-import '../chunk-G4234OIG.js';
+import '../chunk-NTQPJJAN.js';
 import '../chunk-WQRSZMN4.js';
 import '../chunk-LR4IWUWQ.js';
 import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-7XKDPTZ5.js';
+import '../chunk-4AUTALJA.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-222VILSP.js';
 import '../chunk-IVTQWOXV.js';

package/dist/RefusalCard/index.js

@@ -1,8 +1,8 @@
-export { REFUSAL_CARD_LABELS, RefusalCard } from '../chunk-YBKZJBKM.js';
-import '../chunk-G4234OIG.js';
+export { REFUSAL_CARD_LABELS, RefusalCard } from '../chunk-RQHN4J5P.js';
+import '../chunk-NTQPJJAN.js';
 import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-7XKDPTZ5.js';
+import '../chunk-4AUTALJA.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';

package/dist/RelatedRow/index.js

@@ -1,7 +1,7 @@
-export { RelatedRow } from '../chunk-OGRMOWMO.js';
+export { RelatedRow } from '../chunk-CNEHFH2A.js';
 import '../chunk-QP2P6GDQ.js';
 import '../chunk-ZAC7SKUN.js';
-import '../chunk-7XKDPTZ5.js';
+import '../chunk-4AUTALJA.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';

package/dist/ResultTableCard/index.js

@@ -1,12 +1,12 @@
-export { RESULT_TABLE_CARD_LABELS, RESULT_TABLE_COLLAPSED_ROWS, RESULT_TABLE_MAX_ROWS, ResultTableCard } from '../chunk-RPX3WICJ.js';
+export { RESULT_TABLE_CARD_LABELS, RESULT_TABLE_COLLAPSED_ROWS, RESULT_TABLE_MAX_ROWS, ResultTableCard } from '../chunk-7QTJO3PV.js';
 import '../chunk-5DJMFRSZ.js';
 import '../chunk-NSCYGUDG.js';
 import '../chunk-YNRKVY7X.js';
-import '../chunk-G4234OIG.js';
+import '../chunk-NTQPJJAN.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-7XKDPTZ5.js';
+import '../chunk-4AUTALJA.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';

package/dist/RichEditor/index.js

@@ -1,4 +1,4 @@
-export { RichEditor, preloadRichEditor } from '../chunk-BVNFNFA6.js';
+export { RichEditor, preloadRichEditor } from '../chunk-DS5NBENV.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-CSQTDGTS.js';
 import '../chunk-BAKPMH3S.js';
 import '../chunk-BPCY7ZID.js';