@crewlethq/ui 0.43.0 → 0.45.0

package/README.md

@@ -41,7 +41,7 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | Area | Components |
 | ---- | ---------- |
 | Actions | `Button` and `ButtonLink` (variants `primary`, `secondary`, `outline`, `ghost`, `accent`, `danger`; sizes `small`, `medium`, `large`; shapes `square`, `pill`), `IconButton`, `Menu`, `Link`, `Copyable`, `CopyButton`, `DownloadButton`, `Kbd` |
-| Content and text | `Text` (the eight registers and `inherit`), `Prose`, `Document`, `DocumentTitle` and `DocumentTitleField`, the Markdown grammar (`parseMarkdown`, `parseMarkdownSpans`, `markdownInline`, `safeHref` and the line readers, with no React in it), `Highlight`, `InlineCode`, `List` and `ListItem`, `DescriptionList`, `Timeline`, `RelativeTime`, `Note`, `Divider` |
+| Content and text | `Text` (the eight registers and `inherit`), `Prose`, `Statement`, `Document`, `DocumentTitle` and `DocumentTitleField`, the Markdown grammar (`parseMarkdown`, `parseMarkdownSpans`, `markdownInline`, `safeHref` and the line readers, with no React in it), `Highlight`, `InlineCode`, `List` and `ListItem`, `DescriptionList`, `Timeline`, `RelativeTime`, `Note`, `Divider` |
 | Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `CheckboxGroup`, `ConfirmField`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `ImageUpload`, `CharacterPicker`, `HuePicker`, `AvatarPicker`, `FactList`, `ChoiceList`, `Composer`, `MarkdownEditor`, `RichEditor` (with `preloadRichEditor`, and the round trip `roundTripMarkdown` and `canonicalMarkdown` from `@crewlethq/ui/RichEditorMarkdown`) |
 | Data display | `DataTable`, `CopyableCell`, `Table`, the read-only table cells (`TableKeyCell`, `TableNumberCell`, `TableDateCell`, `TableEntityCell`, `TableStatusCell`, `TableTagsCell`, `TableTextCell`), `StatCard`, `Meter`, `SegmentedMeter`, `Stepper`, `PricingCard`, `Avatar`, `AvatarStack`, `EntityChip`, `CodeBlock`, `QrCode`, `ObjectHeader`, `FactLine`, `SetByLine`, `Skeleton`, `Eyebrow`, `StatGroup`, `PinTile`, `IconTile`, `SettingsTable` (with `SettingsTable.Row`), `CatalogTile` |
 | List screens | `DataView`, and its parts on their own: `DataViewToolbar`, `FilterAxisBar`, `FilterAxisChip`, plus the filter model (`filterDefsFromColumns`, `applyColumnFilters`, `filterPredicate`, `blankFilterValue`) |
@@ -50,7 +50,7 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | Charts | `Legend`, `BarList`, `StackedBar`, `StackedColumns`, `ActivityStrip`, `TimeSeries`, `Sparkline`, the reading layer they share (`ChartTooltip`, `useChartHover`), and the ramp (`DATA_COLORS`, `DATA_COLOR_OTHER`, `dataColor`) |
 | Marks | `Count`, `StatusDot`, `EmptyValue`, `VisuallyHidden` |
 | Hooks and seams | `useModalLayer`, `usePopupLayer`, `LayerHost`, `useListbox`, `useOptionKeys`, `useHighlightRest` and `HIGHLIGHT_REST_MS`, `useClipboard`, `useDownload`, `downloadText`, `downloadBlob`, `safeFilename`, `toCsv`, `elementToPng` and `ElementToPngError`, `useOutcome`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx`, the node hues (`NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue`) |
-| Layout | `Container`, `Section`, `Card`, `TileGrid`, `ListDetail`, `Tabs`, `Accordion`, `Disclosure`, `Outline` (with `useActiveHeading` and `scrollToHeading`), `TreeGrid` |
+| Layout | `Container`, `Section`, `Card`, `TileGrid`, `ListDetail`, `AsideLayout`, `Tabs`, `Accordion`, `Disclosure`, `Outline` (with `useActiveHeading` and `scrollToHeading`), `TreeGrid` |
 | Arranging a page | `ArrangeBoard`, `ArrangeGrid`, `ArrangeFrame` (with `useGridResize`), `ArrangeGroup`, `ArrangeList`, and the reorder hooks under them (`useReorder`, `useReorderLists`, `moveKey`) |
 | Application shell | `AppShell` with `AppShell.Rail`, `SectionFrame` (with `SectionFrame.Nav` and `SectionFrame.Body`), `LockedLabel`, `AppShell.Topbar`, `AppShell.AccountRow` and `useAppShell`, `AuthLayout`, `SidebarNav` and `NavItem`, `DirectoryList`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen`, `useIdle`, `useMediaMatch` |
 | Preferences | `ThemeToggle`, `ThemeSwitcher`, `DensitySwitcher`, `ThemeGallery`, `ThemeSwatch`, `useThemePreference`, `useDensityPreference`, `useSystemTheme`, `resolveTheme`, `applyStoredPreferences`, and the framework-free `applyTheme`, `applyPalette`, `applyDensity` with `THEME_PREFERENCES`, `DENSITY_PREFERENCES` and their guards |
@@ -204,6 +204,26 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.45.0
+
+The pieces of the engine's Company › Principles page: a company's mission, vision and policies beside the facts about it.
+
+**`Statement` is new**: a label over the words a page exists to say (a mission, a vision, a goal), set a step over the body (`--font-size-lg`, the body's own step over it on a phone) at the reading measure, with the author's line breaks kept. A block such as a numbered list is drawn as given under the same label, so every statement on a page heads the same way. An unwritten one says so through `empty` (`title`, `description` and an optional `action`) as an inline empty state, never as grey text in the words' place. It is a region named by its label.
+
+**`AsideLayout` is new**: a page's main column with an aside beside it from 56rem of the layout's own width (a container query, not the window's), the aside `--crewlet-aside-layout-aside` wide (18rem by default). Narrower, the aside follows the main column past one hairline. Each column is a stack one step apart, and the aside is a complementary landmark named by `asideLabel`.
+
+**`EmptyState` takes `size="inline"`**: one left-aligned row on a dashed hairline, the sentence beside its one action and no glyph, for a part of a page that is empty while the rest of it is not.
+
+## Changes in 0.44.0
+
+The pieces of the engine's Company › Integrations home, a summary of what a company has in use beside the directory of everything it could.
+
+**`DirectoryList` lines stand at the rail's row step**: each line is exactly `--size-nav-row` (30px) in the rail's compact type, its mark at the glyph step (16px, `md`), its `hint` inline after the label in the quiet ink, giving way before the label in a narrow column, and its state held inside the row, so no line stands taller than the rest. Groups stand one small step (`--spacing-3`) apart.
+
+**`CatalogTile` takes `density="compact"`**, a summary's tile at about half the height: the mark, the name, its state, its fact (`meta`) and the one action on the header line, and the sentence on one line under it, cut to fit with the whole of it in its title. The default, `comfortable`, is unchanged.
+
+**`Section` takes `spacing="tight"`**: one small step (`--spacing-2`) between a heading and what it introduces, titled or not. A heading may carry the kit's `Count` of what is under it (`title={<>In use <Count value={4} /></>}`).
+
 ## Changes in 0.43.0
 
 The parts of the engine's Company › Integrations page, a directory of everything a company works in beside the detail of the one chosen.

package/dist/AccessDeniedCard/index.js

@@ -1,4 +1,4 @@
-export { ACCESS_DENIED_REASONS, AccessDeniedCard } from '../chunk-KV3ODJXH.js';
-import '../chunk-RA2ULG6H.js';
+export { ACCESS_DENIED_REASONS, AccessDeniedCard } from '../chunk-QTMUKRTN.js';
+import '../chunk-PPUR46MK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AgentHandoffPanel/index.js

@@ -1,6 +1,6 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-BO7Q6JP6.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-N3SHQ3VU.js';
 import '../chunk-AUQPBL4O.js';
-import '../chunk-3TFDQLW3.js';
+import '../chunk-JQ7IFSF6.js';
 import '../chunk-OGXHZHRX.js';
 import '../chunk-7CXGSS7D.js';
 import '../chunk-NBDN5JZV.js';

package/dist/ArrangeFrame/index.js

@@ -1,5 +1,5 @@
-export { ArrangeFrame, useGridResize } from '../chunk-LKBZV5IT.js';
-import '../chunk-LACA4JGC.js';
+export { ArrangeFrame, useGridResize } from '../chunk-VWYT3GVV.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-LACA4JGC.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArrangeList/index.js

@@ -4,8 +4,8 @@ import '../chunk-XJ2QEBMM.js';
 import '../chunk-EY7LACIR.js';
 import '../chunk-ZI5G5RS7.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactCard/index.js

@@ -1,13 +1,13 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-U2XAJONO.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-OKE5YSLD.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-UBZDYOCA.js';
 import '../chunk-INHXF2CL.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-5AQBPHZD.js';
-import '../chunk-PZKHBB7D.js';
 import '../chunk-BGLKLXL3.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-CE2THTQR.js';
 import '../chunk-BHHIIK3M.js';

package/dist/AsideLayout/AsideLayout.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+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;
+    /** What the aside is, for a screen reader's landmark: "About the company". */
+    asideLabel: string;
+}
+/**
+ * A page's main column with an aside beside it, each a stack of blocks one
+ * page step apart.
+ *
+ * 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.
+ *
+ * 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;

package/dist/AsideLayout/index.d.ts

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

package/dist/AsideLayout/index.js

@@ -0,0 +1,2 @@
+export { AsideLayout } from '../chunk-KY65C4XS.js';
+import '../chunk-ODEQTPFM.js';

package/dist/AsideLayout-TH5SQZNK.css

@@ -0,0 +1,45 @@
+/*
+ * 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 {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+  gap: var(--spacing-7);
+}
+
+/* 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. */
+.crewlet-aside-layout__aside {
+  padding-top: var(--spacing-6);
+  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/AvatarPicker/index.js

@@ -1,13 +1,13 @@
-export { AvatarPicker } from '../chunk-PLLYOPS4.js';
+export { AvatarPicker } from '../chunk-Q7HLZH32.js';
 import '../chunk-QOP7QYUW.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-VZICPYGR.js';
-import '../chunk-PZKHBB7D.js';
+import '../chunk-SNQRGH4A.js';
 import '../chunk-BF5WV7NM.js';
 import '../chunk-KA75QPFM.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PCI7ZJ6Z.js';
 import '../chunk-OMV5W53A.js';

package/dist/CatalogTile/CatalogTile.d.ts

@@ -1,6 +1,15 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { type HeadingLevel } from '../utils/headingLevel.js';
 export type CatalogTileElement = 'article' | 'li' | 'div';
+/**
+ * How much room a tile takes. `comfortable` (the default) is the catalogue's
+ * tile: a mark well, a name with its state under it, a reserved two-line
+ * sentence and a ruled foot. `compact` is a summary's: one header line (the
+ * mark, the name, its state and the fact, then the action at its end) over
+ * one line of sentence, about half the height, for a page that lists what is
+ * already in use rather than offers a choice.
+ */
+export type CatalogTileDensity = 'comfortable' | 'compact';
 export interface CatalogTileProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /** The element the tile is: an `li` in a `TileGrid as="ul"`. */
     as?: CatalogTileElement | undefined;
@@ -33,6 +42,8 @@ export interface CatalogTileProps extends Omit<HTMLAttributes<HTMLElement>, 'tit
      * strength, because a tile not yet set up is the one a reader came to set up.
      */
     quiet?: boolean | undefined;
+    /** How much room the tile takes; see [CatalogTileDensity]. */
+    density?: CatalogTileDensity | undefined;
 }
 /**
  * One entry in a catalogue: its mark, its name, its state when it has one, a
@@ -44,4 +55,4 @@ export interface CatalogTileProps extends Omit<HTMLAttributes<HTMLElement>, 'tit
  * action draws no foot at all, since a rule with nothing under it reads as a
  * missing control.
  */
-export declare function CatalogTile({ as: Element, mark, title, headingLevel, status, description, meta, action, quiet, className, ...rest }: CatalogTileProps): import("react").JSX.Element;
+export declare function CatalogTile({ as: Element, mark, title, headingLevel, status, description, meta, action, quiet, density, className, ...rest }: CatalogTileProps): import("react").JSX.Element;

package/dist/CatalogTile/index.d.ts

@@ -1,3 +1,3 @@
 import './CatalogTile.css';
 export { CatalogTile } from './CatalogTile.js';
-export type { CatalogTileElement, CatalogTileProps } from './CatalogTile.js';
+export type { CatalogTileDensity, CatalogTileElement, CatalogTileProps } from './CatalogTile.js';

package/dist/CatalogTile/index.js

@@ -1,3 +1,3 @@
-export { CatalogTile } from '../chunk-PCT47E7O.js';
+export { CatalogTile } from '../chunk-5GNA4RKP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{CatalogTile-XL4XLFUH.css → CatalogTile-VPSLCKJE.css}

@@ -133,3 +133,58 @@
     min-height: 0;
   }
 }
+
+/*
+ * COMPACT: a summary's tile, about half the comfortable one's height. One
+ * header line holds the mark (the row step's well, 28px), the name, its state
+ * and its fact, and the action at the end; the sentence is one line under it,
+ * aligned to the name, cut to fit. No reserve and no foot, because a summary
+ * has no row of feet to line up.
+ */
+.crewlet-catalog-tile--compact {
+  gap: var(--spacing-1);
+  padding: var(--spacing-3);
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__head {
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__mark {
+  width: var(--size-row-sm);
+  height: var(--size-row-sm);
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__title {
+  flex: 1 1 auto;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding-top: 0;
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__name {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__status {
+  flex: none;
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__meta {
+  flex: 0 1 auto;
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__description {
+  flex: none;
+  min-height: 0;
+  padding-left: calc(var(--size-row-sm) + var(--spacing-2));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/CharacterPicker/index.js

@@ -1,5 +1,5 @@
 import '../chunk-3L5NHASN.js';
-export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-VZICPYGR.js';
-import '../chunk-PZKHBB7D.js';
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-SNQRGH4A.js';
 import '../chunk-EGMQURBR.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataGrid/index.js

@@ -1,5 +1,5 @@
-export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, fitGridColumns, parseGridSort } from '../chunk-XIDD7PJO.js';
-import '../chunk-RA2ULG6H.js';
+export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, fitGridColumns, parseGridSort } from '../chunk-2MYSESZF.js';
+import '../chunk-PPUR46MK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-OG6CL3EB.js';

package/dist/DataView/index.js

@@ -1,14 +1,14 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-NCM73C34.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-Y4GXCKOC.js';
 import '../chunk-HOXGBLEY.js';
-import '../chunk-GI3S6RMM.js';
 import '../chunk-UFXLNC2N.js';
+import '../chunk-GI3S6RMM.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-FYINAYAJ.js';
 import '../chunk-7KHM2FZH.js';
+import '../chunk-NR4CPM4T.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-NR4CPM4T.js';
 import '../chunk-EY7LACIR.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';

package/dist/DatasetSource/index.js

@@ -1,8 +1,8 @@
 export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-HQJ24WPM.js';
 import '../chunk-KYIAFNU7.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-WIATRXEJ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DirectoryList/DirectoryList.d.ts

@@ -5,10 +5,13 @@ export interface DirectoryItem {
     key: string;
     /** Where the line goes: the item's own page. */
     href: string;
-    /** The item's mark: a vendor's, a product's. Decorative, since the label names it. */
+    /**
+     * The item's mark: a vendor's, a product's, at the glyph step (16px, `md`).
+     * Decorative, since the label names it.
+     */
     mark?: ReactNode;
     label: ReactNode;
-    /** A quieter line under the label: the app a product belongs to. */
+    /** A quieter word after the label, on its line: the app a product belongs to. */
     hint?: ReactNode;
     /** The item's state where it has one: a status dot and word, or a pill. */
     status?: ReactNode;
@@ -43,8 +46,10 @@ export interface DirectoryListProps {
  * A NAVIGATION LANDMARK of lists under headings, so a screen reader can jump
  * group to group and is told how many lines each holds. The chosen line is
  * `aria-current="page"` and drawn on the selected ground. A line carries its
- * mark, its label (and a quieter hint under it) and its state where it has
- * one; a line with no state says nothing rather than "none".
+ * mark, its label (and a quieter hint after it) and its state where it has
+ * one; a line with no state says nothing rather than "none". A LINE STANDS
+ * AT THE RAIL'S ROW STEP (30px), in the rail's compact type, because a
+ * directory is navigation beside the page as the rail is beside the app.
  *
  * IT FILLS THE HEIGHT IT IS GIVEN. The groups take the room and scroll on
  * their own when they outgrow it, and the foot holds the bottom, one small

package/dist/DirectoryList/index.js

@@ -1,3 +1,3 @@
-export { DirectoryList } from '../chunk-SJ6DMG4R.js';
+export { DirectoryList } from '../chunk-4AA6WPQU.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{DirectoryList-EESYMH2U.css → DirectoryList-7OXXN47X.css}

@@ -22,7 +22,9 @@
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
-  gap: var(--spacing-5);
+  /* One small step between groups, so a heading reads as the head of the lines
+     under it rather than a band between two runs of them. */
+  gap: var(--spacing-3);
   min-height: 0;
   overflow-y: auto;
 }
@@ -53,16 +55,24 @@
   list-style: none;
 }
 
+/*
+ * THE RAIL'S ROW STEP, 30px (--size-nav-row): a directory is navigation beside
+ * the page as the rail is beside the app, so its lines stand at the rail's
+ * height and in its compact type. Everything a line says fits that one line:
+ * a mark the size of the rail's glyph box, the hint inline after the label,
+ * and the state compact at the end.
+ */
 .crewlet-directory__item {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--spacing-2);
-  min-height: var(--size-row-md);
-  padding: var(--spacing-1) var(--spacing-2);
+  height: var(--size-nav-row);
+  padding: 0 var(--spacing-2);
   border-radius: var(--radius-md);
   color: var(--color-text-primary);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-tight);
   text-decoration: none;
 }
 
@@ -80,22 +90,28 @@
   outline-offset: 1px;
 }
 
+/* The box takes its mark, as the rail's glyph box does: a mark at the glyph's
+   own step (16px, `md`) sits in the row with room to spare. */
 .crewlet-directory__mark {
   display: inline-flex;
   flex: none;
   align-items: center;
   justify-content: center;
-  width: var(--size-row-sm);
-  height: var(--size-row-sm);
 }
 
+/* ONE LINE: the label, then the hint after it in the quiet ink. The hint gives
+   way first, so a narrow column cuts "Atlassian" before it cuts "Confluence". */
 .crewlet-directory__text {
   display: flex;
-  flex-direction: column;
+  align-items: baseline;
+  gap: var(--spacing-1);
   min-width: 0;
 }
 
 .crewlet-directory__label {
+  flex: 0 0 auto;
+  max-width: 100%;
+  min-width: 0;
   overflow: hidden;
   font-weight: var(--font-weight-medium);
   text-overflow: ellipsis;
@@ -103,6 +119,8 @@
 }
 
 .crewlet-directory__hint {
+  flex: 0 1 auto;
+  min-width: 0;
   overflow: hidden;
   font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
@@ -110,10 +128,15 @@
   white-space: nowrap;
 }
 
+/* THE STATE IS COMPACT: a pill or a dot and its word in the small step, held
+   inside the row so a state never makes one line taller than the rest. */
 .crewlet-directory__status {
   display: inline-flex;
   flex: none;
+  align-items: center;
+  max-height: calc(var(--size-nav-row) - var(--spacing-2));
   font-size: var(--font-size-xs);
+  line-height: 1;
   color: var(--color-text-secondary);
 }
 

package/dist/DocTabsEditor/index.js

@@ -2,12 +2,12 @@ export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-W53CWWX3.js';
 import '../chunk-XJ2QEBMM.js';
 import '../chunk-ZI5G5RS7.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-PCI7ZJ6Z.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/EmptyState/EmptyState.d.ts

@@ -1,6 +1,13 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 import { type HeadingLevel } from '../utils/headingLevel.js';
-export type EmptyStateSize = 'default' | 'compact';
+/**
+ * `default` is a screen's, `compact` a panel's, both centred under a glyph.
+ * `inline` is a field's or a section's: one left-aligned row on a dashed
+ * hairline, the sentence beside its one action and no glyph, for a part of a
+ * page that is empty while the rest of it is not (a mission nobody has
+ * written, a list with nothing in it yet).
+ */
+export type EmptyStateSize = 'default' | 'compact' | 'inline';
 export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     /** A glyph, drawn large and quiet. Replaced by `illustration` when both are given. */
     icon?: ReactNode;
@@ -17,7 +24,7 @@ export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
     description: ReactNode;
     /** What would fill it, as a control: "Create the first seat", "Connect Slack". */
     action?: ReactNode;
-    /** `compact` is for an empty state inside a panel rather than a screen. */
+    /** How much room it takes; see [EmptyStateSize]. */
     size?: EmptyStateSize | undefined;
     /**
      * The heading level of the title. Taken from where the component finds

package/dist/EmptyState/index.js

@@ -1,3 +1,3 @@
-export { EmptyState } from '../chunk-RA2ULG6H.js';
+export { EmptyState } from '../chunk-PPUR46MK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{EmptyState-C6HRBGT7.css → EmptyState-7L4UAQBX.css}

@@ -71,3 +71,37 @@
 .crewlet-empty-state__action {
   margin-top: var(--spacing-2);
 }
+
+/*
+ * INLINE: one left-aligned row on a dashed hairline, the sentence beside its
+ * action. The dash says "nothing here yet" without a glyph, and the box keeps
+ * the place the content will take, so the page does not move when it is
+ * filled. Narrow, the action wraps under the words.
+ */
+.crewlet-empty-state--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: var(--spacing-2) var(--spacing-4);
+  padding: var(--spacing-3) var(--spacing-4);
+  border: 1px dashed var(--color-border-default);
+  border-radius: var(--radius-md);
+  text-align: start;
+}
+
+.crewlet-empty-state__text {
+  display: flex;
+  flex: 1 1 16rem;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-empty-state--inline .crewlet-empty-state__description {
+  max-width: var(--size-measure);
+}
+
+.crewlet-empty-state--inline .crewlet-empty-state__action {
+  flex: none;
+  margin-top: 0;
+}

package/dist/LinkInterstitial/index.js

@@ -1,6 +1,6 @@
-export { LinkInterstitial, openExternal } from '../chunk-UAGDFEBG.js';
-import '../chunk-FYINAYAJ.js';
+export { LinkInterstitial, openExternal } from '../chunk-KKUJSMLF.js';
 import '../chunk-5CLW2CXT.js';
+import '../chunk-FYINAYAJ.js';
 import '../chunk-SZZRIHGT.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';

package/dist/ListInput/index.js

@@ -1,11 +1,11 @@
-export { ListInput } from '../chunk-Z5WMCBHR.js';
+export { ListInput } from '../chunk-NMYGJJJK.js';
 import '../chunk-ZI5G5RS7.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Section/Section.d.ts

@@ -9,6 +9,12 @@ export type SectionSpacing =
  * marketing band between each pair of panels puts one panel per viewport.
  */
  | 'compact'
+/**
+ * The console band at its tightest: one small step between the heading and
+ * what it introduces, for a summary whose sections stand close, as a list's
+ * group headings do.
+ */
+ | 'tight'
 /** A marketing band. State one: a page of them is a deliberate page. */
  | 'sm' | 'md' | 'lg';
 export type SectionElement = 'section' | 'div' | 'header' | 'footer' | 'article';

package/dist/Section/index.js

@@ -1,3 +1,3 @@
-export { Section } from '../chunk-3TFDQLW3.js';
+export { Section } from '../chunk-JQ7IFSF6.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Section-O5AHGSOG.css → Section-M7SG6NP2.css}

@@ -23,6 +23,14 @@
   padding-block: 0;
 }
 
+/* The console band at its tightest: a group heading's step to what it names. */
+.crewlet-section--tight {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding-block: 0;
+}
+
 .crewlet-section--sm {
   padding-block: var(--spacing-9);
 }
@@ -106,6 +114,12 @@
   gap: var(--spacing-3);
 }
 
+/* A tight band keeps its one small step with a title too: the titled column's
+   gap would otherwise win, being later in the sheet. */
+.crewlet-section--tight.crewlet-section--titled {
+  gap: var(--spacing-2);
+}
+
 @media (max-width: 768px) {
   .crewlet-section--sm {
     padding-block: var(--spacing-7);