@crewlethq/ui 0.42.0 → 0.43.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,18 @@ 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.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/ArrangeFrame/index.js

@@ -1,5 +1,5 @@
-export { ArrangeFrame, useGridResize } from '../chunk-VWYT3GVV.js';
-import '../chunk-RSAQOKH3.js';
+export { ArrangeFrame, useGridResize } from '../chunk-LKBZV5IT.js';
 import '../chunk-LACA4JGC.js';
+import '../chunk-RSAQOKH3.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/AvatarPicker/index.js

@@ -1,13 +1,13 @@
-export { AvatarPicker } from '../chunk-Q7HLZH32.js';
+export { AvatarPicker } from '../chunk-PLLYOPS4.js';
 import '../chunk-QOP7QYUW.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-SNQRGH4A.js';
+import '../chunk-VZICPYGR.js';
+import '../chunk-PZKHBB7D.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/CharacterPicker/index.js

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

package/dist/DataView/index.js

@@ -1,7 +1,7 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-AACPFUZW.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-NCM73C34.js';
 import '../chunk-HOXGBLEY.js';
-import '../chunk-UFXLNC2N.js';
 import '../chunk-GI3S6RMM.js';
+import '../chunk-UFXLNC2N.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-FYINAYAJ.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

@@ -0,0 +1,55 @@
+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. Decorative, since the label names it. */
+    mark?: ReactNode;
+    label: ReactNode;
+    /** A quieter line under the label: 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 under it) and its state where it has
+ * one; a line with no state says nothing rather than "none".
+ *
+ * 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-SJ6DMG4R.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/DirectoryList-EESYMH2U.css

@@ -0,0 +1,126 @@
+/*
+ * 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;
+  gap: var(--spacing-5);
+  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;
+}
+
+.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);
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  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;
+}
+
+.crewlet-directory__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-row-sm);
+  height: var(--size-row-sm);
+}
+
+.crewlet-directory__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-directory__label {
+  overflow: hidden;
+  font-weight: var(--font-weight-medium);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-directory__hint {
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-directory__status {
+  display: inline-flex;
+  flex: none;
+  font-size: var(--font-size-xs);
+  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/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/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/ListInput/index.js

@@ -1,11 +1,11 @@
-export { ListInput } from '../chunk-NMYGJJJK.js';
+export { ListInput } from '../chunk-Z5WMCBHR.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/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/RichEditor/index.js

@@ -1,4 +1,4 @@
-export { RichEditor, preloadRichEditor } from '../chunk-TVSHR35W.js';
+export { RichEditor, preloadRichEditor } from '../chunk-JF3TJUBU.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-CSQTDGTS.js';
 import '../chunk-BAKPMH3S.js';
 import '../chunk-SZZRIHGT.js';

package/dist/SheetGrid/index.js

@@ -1,24 +1,24 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-OWIGEE2Y.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-OVHJTOKW.js';
 import '../chunk-O2EGEONV.js';
 import '../chunk-CENOOTAV.js';
-import '../chunk-KYIAFNU7.js';
 import '../chunk-3BYIWOTV.js';
 import '../chunk-I6POAB4V.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-66X5WDKE.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-WIATRXEJ.js';
-import '../chunk-I33UIUZD.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-RSAQOKH3.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-I33UIUZD.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/SlideFilmstrip/index.js

@@ -2,12 +2,12 @@ export { SlideFilmstrip } from '../chunk-MCOC3KQA.js';
 import '../chunk-RMEBFYL7.js';
 import '../chunk-XJ2QEBMM.js';
 import '../chunk-SMBKXWML.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/Switcher/index.js

@@ -1,4 +1,4 @@
-export { Switcher } from '../chunk-NF6SWHQI.js';
+export { Switcher } from '../chunk-524GGA67.js';
 import '../chunk-FYINAYAJ.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-KHJIEPZV.js';
@@ -6,12 +6,12 @@ import '../chunk-FYTIJM2T.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-ZI5G5RS7.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-RTPQDNW3.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/TableCells/index.js

@@ -1,10 +1,10 @@
 export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-4BJK7FE5.js';
 import '../chunk-FBSEJO2C.js';
 import '../chunk-KYIAFNU7.js';
-import '../chunk-WIATRXEJ.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TagsInput/index.js

@@ -1,11 +1,11 @@
-export { TagsInput } from '../chunk-SXBJMBSV.js';
+export { TagsInput } from '../chunk-IVAR7NRW.js';
 import '../chunk-KYIAFNU7.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-WIATRXEJ.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';