@crewlethq/ui 0.42.0 → 0.44.0

package/README.md

@@ -50,9 +50,9 @@ 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`, `Tabs`, `Accordion`, `Disclosure`, `Outline` (with `useActiveHeading` and `scrollToHeading`), `TreeGrid` |
+| Layout | `Container`, `Section`, `Card`, `TileGrid`, `ListDetail`, `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`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen`, `useIdle`, `useMediaMatch` |
+| 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 |
 | Artifacts | `SandboxedFrame` (with `SandboxedFramePlaceholder` and `SandboxedFrameNotice`), `LinkInterstitial` and `openExternal`, `VersionTimeline`, `ShareDialog` with the role ladder (`ARTIFACT_ROLES`, `SHAREABLE_ROLES`, `roleAtLeast`), `PrincipalPicker`, `Principal` and `PrincipalAvatar`, `ArtifactCard`, `ArtifactKindGlyph` and `ArtifactPreviewGlyph` (the preview a card draws with no cover, for a cover with nothing to draw), `ArtifactBar` and `ArtifactVersionChip` (an open artifact's one slim bar), `ArtifactPanel` and `ArtifactWorkspace` (the panels it opens beside or over the artifact), `CanvasBoard` (a design's artboards and notes on a `Canvas`, with the visibility budget `liveBoards`), `CanvasToolbar` (a canvas's tool palette, with `toolForKey`), `LayersList` (the list of a canvas's items beside it, marked by the canvas's selection), `CanvasSchematic` (a design's cover, drawn from its boards' frames), `AccessDeniedCard`, `ArtifactIcon` (with `artifactIconGlyph` and `ARTIFACT_ICON_WORDS`), the native gallery covers (`DocCover`, `SheetCover`, `DashboardCover`), `MergeConflicts`, the dashboard pieces (`WidgetFrame`, `DatasetSource` and `DatasetSourceList`), and `FrameProtocol` (the wire between a host page and an embedded artifact, with no React in it), `ArtifactNameCell` and `ArtifactAccessLabel` (with `ArtifactAccessGlyph`) for a list of artifacts |
 | Sheets | `SheetGrid`, the cells on their own (`CheckboxCell`, `TextCell`, `LongTextCell`, `NumberCell`, `SelectCell`, `MultiSelectCell`, `PersonCell`, `StatusCell`, `DateCell`, `UrlCell`, `RatingCell`, and `SheetCell` for any type), `ChangeMark`, and `SheetModel` (every rule a sheet is drawn from, with no React in it: values, parsing, the keyboard model, TSV, the pending edits of D23) |
@@ -204,6 +204,28 @@ 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.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.
+
+**`DirectoryList` is a directory in named groups**: each line a link to the item's own page with its mark, its label, a quieter hint under it (`hint`, the app a product belongs to) and its state where it has one (`status`, a status dot or a pill), the chosen line `aria-current="page"` on the selected ground. It is a navigation landmark of lists under headings (`headingLevel`), and it fills the height it is given: the groups scroll on their own and the `foot` holds the bottom of the column, one small step under them with one hairline above it, for one fact about the whole list such as an address.
+
+**`ListDetail` lays a list beside the detail of what is chosen in it**, each scrolling on its own in the height it is given (an application shell's `fill`), the list column `--crewlet-list-detail-list` wide (17rem by default) with a hairline between the two. Below 640px it is one pane, the one `showing` names (`list` or `detail`), on a page that scrolls as any other.
+
+**`ObjectHeader` takes a `mark`**: the object's own mark, drawn on a plate the catalogue tile's well at one and a half rows, beside the column the rest of the header keeps (a row at `size="peek"` and on a phone). A header without one is unchanged.
+
+**`@crewlethq/icons` adds `ProductMark`**, the marks of the services built into Crewlet (`works`, `knowledge`, `chat`) beside `VendorMark`, with `soon` for a product that has not shipped, drawn hollow rather than grey. See the icons README.
+
 ## Changes in 0.42.0
 
 **`IconButtonLink` is an icon-only link** drawn as an `IconButton`: a place reached by its glyph, such as Settings beside the reader's own row in a rail's foot. It is a real anchor (`href`), named and titled by its `label`, and `current` marks the page the reader is on with `aria-current="page"` and a nav row's selected treatment, the lifted ground inside the default hairline, drawn on the square's own transparent boundary so nothing moves; its ring then covers that edge.

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

@@ -1,10 +1,10 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-AGNZIT3Z.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-NVMZQ3Y4.js';
+import '../chunk-PWG3VHRQ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-PWG3VHRQ.js';
 import '../chunk-7CXGSS7D.js';
 import '../chunk-ZI5G5RS7.js';
 import '../chunk-SMBKXWML.js';

package/dist/DirectoryList/DirectoryList.d.ts

@@ -0,0 +1,60 @@
+import { type MouseEventHandler, type ReactNode } from 'react';
+import { type HeadingLevel } from '../utils/headingLevel.js';
+export interface DirectoryItem {
+    /** Unique within the list. */
+    key: string;
+    /** Where the line goes: the item's own page. */
+    href: string;
+    /**
+     * 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 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;
+    /** The item the page is showing. */
+    selected?: boolean | undefined;
+    /** For an application that routes in place of the browser. */
+    onClick?: MouseEventHandler<HTMLAnchorElement> | undefined;
+}
+export interface DirectoryGroup {
+    /** Unique within the list. */
+    key: string;
+    label: ReactNode;
+    items: readonly DirectoryItem[];
+}
+export interface DirectoryListProps {
+    /** What the list is, for a screen reader's landmark: "Integrations". */
+    label: string;
+    groups: readonly DirectoryGroup[];
+    /**
+     * One quiet fact that belongs to the whole list, held at its foot: it stays
+     * at the bottom of the column while the groups scroll above it.
+     */
+    foot?: ReactNode;
+    /** The level of each group's heading; the level the list stands at by default. */
+    headingLevel?: HeadingLevel | undefined;
+    className?: string | undefined;
+}
+/**
+ * A directory: everything of one kind, in named groups, each line a link to
+ * the item's own page, beside which a page shows the one chosen.
+ *
+ * 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 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
+ * step under them, so a fact about the whole list (an address, a count) is in
+ * the same place however long the list is. Placed in a column of a page that
+ * scrolls as a whole, it is as tall as its lines and the foot ends it.
+ */
+export declare function DirectoryList({ label, groups, foot, headingLevel, className }: DirectoryListProps): import("react").JSX.Element;

package/dist/DirectoryList/index.d.ts

@@ -0,0 +1,3 @@
+import './DirectoryList.css';
+export { DirectoryList } from './DirectoryList.js';
+export type { DirectoryGroup, DirectoryItem, DirectoryListProps } from './DirectoryList.js';

package/dist/DirectoryList/index.js

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

package/dist/DirectoryList-7OXXN47X.css

@@ -0,0 +1,149 @@
+/*
+ * DirectoryList: named groups of links, each line a mark, a label and a state,
+ * and one foot that holds the bottom (DirectoryList.tsx).
+ *
+ * NO FRAME OF ITS OWN. The list draws on the column it is placed in, its lines
+ * on the hover and selected grounds alone, so it never makes a box inside a
+ * box; the foot's hairline is the one rule it draws.
+ */
+
+.crewlet-directory {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  font-family: var(--font-family-sans);
+}
+
+/* The groups take the room and scroll on their own, so the foot stays put. */
+.crewlet-directory__groups {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  /* 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;
+}
+
+.crewlet-directory__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-directory__heading {
+  margin: 0;
+  padding: 0 var(--spacing-2);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-directory__items {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  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);
+  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-compact);
+  line-height: var(--font-line-height-tight);
+  text-decoration: none;
+}
+
+.crewlet-directory__item:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-directory__item--selected,
+.crewlet-directory__item--selected:hover {
+  background: var(--color-surface-selected);
+}
+
+.crewlet-directory__item:focus-visible {
+  outline: 2px solid var(--color-focus);
+  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;
+}
+
+/* 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;
+  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;
+  white-space: nowrap;
+}
+
+.crewlet-directory__hint {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  text-overflow: ellipsis;
+  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);
+}
+
+/* The foot: one small step under the groups, at the bottom of the column. */
+.crewlet-directory__foot {
+  flex: none;
+  min-width: 0;
+  padding: var(--spacing-2) var(--spacing-2) 0;
+  border-top: 1px solid var(--color-border-default);
+}

package/dist/ListDetail/ListDetail.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type ListDetailPane = 'list' | 'detail';
+export interface ListDetailProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The list column: a `DirectoryList`, an inbox. */
+    list: ReactNode;
+    /** 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.
+     */
+    showing?: ListDetailPane | undefined;
+}
+/**
+ * A list beside the detail of what is chosen in it, each scrolling on its own.
+ *
+ * IT FILLS THE HEIGHT IT IS GIVEN, so place it in a box of the window's
+ * height (an application shell's `fill`): the list column holds its place
+ * while the detail scrolls, and a list that grows scrolls inside its own
+ * 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.
+ */
+export declare function ListDetail({ list, children, showing, className, ...rest }: ListDetailProps): import("react").JSX.Element;

package/dist/ListDetail/index.d.ts

@@ -0,0 +1,3 @@
+import './ListDetail.css';
+export { ListDetail } from './ListDetail.js';
+export type { ListDetailPane, ListDetailProps } from './ListDetail.js';

package/dist/ListDetail/index.js

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

package/dist/ListDetail-ALKU5VJW.css

@@ -0,0 +1,53 @@
+/*
+ * 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).
+ */
+
+.crewlet-list-detail {
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-columns: var(--crewlet-list-detail-list, 17rem) minmax(0, 1fr);
+  gap: var(--spacing-8);
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.crewlet-list-detail__list {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  padding-right: var(--spacing-6);
+  border-right: 1px solid var(--color-border-default);
+}
+
+.crewlet-list-detail__detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-5);
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+@media (width < 640px) {
+  .crewlet-list-detail {
+    grid-template-columns: minmax(0, 1fr);
+    height: auto;
+  }
+
+  .crewlet-list-detail__list {
+    padding-right: 0;
+    border-right: 0;
+  }
+
+  .crewlet-list-detail__detail {
+    overflow: visible;
+  }
+
+  .crewlet-list-detail--showing-list .crewlet-list-detail__detail,
+  .crewlet-list-detail--showing-detail .crewlet-list-detail__list {
+    display: none;
+  }
+}

package/dist/ObjectHeader/ObjectHeader.d.ts

@@ -96,6 +96,12 @@ export interface ObjectHeaderProps {
     kind: ReactNode;
     /** A glyph beside the kind. A component, not a name. */
     icon?: ReactNode;
+    /**
+     * The object's own mark, drawn large on a plate beside everything else: a
+     * vendor's or a product's mark on an integration's page. Decorative, since
+     * the title names the object; a header without one keeps its one column.
+     */
+    mark?: ReactNode;
     /** The key, handle or id, in the mono face. */
     identifier?: ReactNode;
     /**
@@ -141,4 +147,4 @@ export interface ObjectHeaderProps {
  * the actions wrap onto a line of their own instead of each giving up a few
  * characters.
  */
-export declare function ObjectHeader({ kind, icon, identifier, within, title, status, facts, description, actions, size, className, }: ObjectHeaderProps): import("react").JSX.Element;
+export declare function ObjectHeader({ kind, icon, mark, identifier, within, title, status, facts, description, actions, size, className, }: ObjectHeaderProps): import("react").JSX.Element;

package/dist/ObjectHeader/index.js

@@ -1,4 +1,4 @@
-export { FactLine, ObjectHeader, SetByLine } from '../chunk-ODOJJGXH.js';
+export { FactLine, ObjectHeader, SetByLine } from '../chunk-HFQBMEEH.js';
 import '../chunk-FBSEJO2C.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ObjectHeader-ZOS22FKX.css → ObjectHeader-DNQWRGUK.css}

@@ -18,6 +18,56 @@
   padding: var(--spacing-3) 0 var(--spacing-2);
 }
 
+/*
+ * A MARKED HEADER: the object's own mark on a plate, the catalogue tile's well
+ * at one and a half rows, beside the column the rest of the header keeps. The
+ * plate is the one box in the header, so the mark reads as the object's face
+ * rather than as one more glyph in the eyebrow.
+ */
+.crewlet-object-header--marked {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--spacing-4);
+}
+
+.crewlet-object-header__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--size-row-lg) * 1.5);
+  height: calc(var(--size-row-lg) * 1.5);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border-default);
+}
+
+.crewlet-object-header--peek .crewlet-object-header__mark {
+  width: var(--size-row-lg);
+  height: var(--size-row-lg);
+  border-radius: var(--radius-md);
+}
+
+.crewlet-object-header__body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+@media (width < 640px) {
+  .crewlet-object-header--marked {
+    gap: var(--spacing-3);
+  }
+
+  .crewlet-object-header--marked .crewlet-object-header__mark {
+    width: var(--size-row-lg);
+    height: var(--size-row-lg);
+    border-radius: var(--radius-md);
+  }
+}
+
 .crewlet-object-header__eyebrow {
   display: flex;
   align-items: center;

package/dist/PropertyList/index.js

@@ -1,5 +1,5 @@
-export { PropertyList } from '../chunk-T6MXORP5.js';
-import '../chunk-ODOJJGXH.js';
+export { PropertyList } from '../chunk-JGCDFMXN.js';
+import '../chunk-HFQBMEEH.js';
 import '../chunk-FBSEJO2C.js';
 import '../chunk-MFS6F2P7.js';
 import '../chunk-EUCC37WY.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);