@crewlethq/ui 0.28.0 → 0.29.0

package/README.md

@@ -54,7 +54,7 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | 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`, `AppShell.Topbar`, `AppShell.AccountRow` and `useAppShell`, `AuthLayout`, `SidebarNav` and `NavItem`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen` |
 | 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`, `LinkInterstitial` and `openExternal`, `VersionTimeline`, `ShareDialog` with the role ladder (`ARTIFACT_ROLES`, `SHAREABLE_ROLES`, `roleAtLeast`), `PrincipalPicker`, `Principal` and `PrincipalAvatar`, `ArtifactCard` and `ArtifactKindGlyph`, `CanvasBoard` (a design's artboards and notes on a `Canvas`, with the visibility budget `liveBoards`), `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) |
+| Artifacts | `SandboxedFrame`, `LinkInterstitial` and `openExternal`, `VersionTimeline`, `ShareDialog` with the role ladder (`ARTIFACT_ROLES`, `SHAREABLE_ROLES`, `roleAtLeast`), `PrincipalPicker`, `Principal` and `PrincipalAvatar`, `ArtifactCard` and `ArtifactKindGlyph`, `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`), `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) |
 | 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) |
 | Presence | `PresenceStack`, `PresenceRing` and `presenceHueClass`, `CursorFlag`, `LiveCursor`, `FollowBanner`, `PeopleRail` (with `peopleRailKey`), and `PresenceModel` (the roster order, one entry per person, the session hues from `PRESENCE_HUES`, with no React in it) |
 | Presentations | `SlideStage` (a slide laid out at 1920 by 1080 and scaled to its box, with `SLIDE_WIDTH` and `SLIDE_HEIGHT`), `useSlideKeys` (the keys a show and a clicker send), `SlideFilmstrip`, `SlideGrid`, `SlideCompare` (with `SLIDE_COMPARE_LABELS`), `PresenterView` (with `formatStopwatch`) |
@@ -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.29.0
+
+0.29.0 adds the chrome an open artifact sits in: one slim bar over the artifact, and one panel at its side, so a host can give the artifact the screen and open everything else on demand.
+
+**`ArtifactBar`** is the bar, the height of a large row. At its start, the way back (`back`, a link), the kind's glyph (the artifact's own `icon` word where it has one), the title as the heading (renamed in place where `onRename` is given: Enter takes it, Escape puts it back without reaching anything under the field, leaving the field takes it, and a sentence `onRename` answers keeps the field open and says it), and the `version` slot. In its middle, the kind's views (`modes`, one segmented choice, centred while both sides have room). At its end, `presence`, the kind's tools (`kindTools`), every artifact's tools (`tools`) and More (`menu`). A tool is data, not an element (a label, a glyph, its `keys`, `pressed`, a `badge`, `disabledReason`), because the bar draws each one twice: as an icon button with its name and keys in a tooltip and as `aria-keyshortcuts`, and as a row of More. It folds by its own width, a container query: under 860px the presence stack goes (a tool's `badge` comes back in its place), under 720px a `labelled` tool keeps only its glyph, and under 640px the views and every unlabelled tool fold into More as rows with their keys, and the kind's glyph gives the title its room. Both arrangements are drawn and the stylesheet shows one. `renaming` and `onRenamingChange` start a rename from elsewhere (a Rename row); `pending` stands a placeholder in for a title still being read; `as="div"` sits it inside a host's own banner.
+
+**`ArtifactVersionChip`** is the version on show as a quiet chip beside the title that opens a menu of versions (`items`, so the host decides which and what else the menu offers). An older version than `latest` reads `v2 of 3` in the accent, so history never passes for the present.
+
+**`ArtifactPanel`** is a panel at the artifact's side: a complementary region named by its heading, a head with its title, optional `actions`, an expand toggle where `onExpandedChange` is given, and Close, then a body that scrolls under the head. Opening moves focus to the heading unless `focusOnOpen` is false (a panel a link opened); closing with focus inside hands focus back to whatever held it before; Escape from anywhere inside closes it, unless something inside answered the press first. Its body starts headings at level 3, so a `Section` inside it nests under the panel's title. Sizes `sm`, `md` and `lg` rest at 20, 25 and 36rem.
+
+**`ArtifactWorkspace`** lays the artifact's body and its one panel side by side: the panel is a column where the workspace holds two useful columns (960px), slides over the body's end edge under that, and is the whole screen under 640px. `expanded` gives the panel the whole workspace, with the body kept mounted behind it. The body scrolls itself; `bodyRef`, `bodyClassName` and `bodyLabel` are for the host's own listeners, styles and region name.
+
+**`PeopleRail` takes `variant="plain"`**: its list alone, with no border, heading or close, for a host that already frames and names it, such as an `ArtifactPanel`.
+
+**`AppShell` reserves no scrollbar gutter on a `fill` screen.** Its main never scrolls there, so the reserved gutter was a dead strip down the screen's end edge, which an artifact drawn edge to edge showed as a band beside it.
+
+What to change:
+
+- Nothing for an existing host. A `fill` screen's content column is the gutter's width wider than before.
+
 ## Changes in 0.28.0
 
 **`ArrangeGrid`** is the page grid a board's blocks stand on: equal columns (twelve unless `columns` says otherwise), the board's own gap, each `ArrangeFrame` spanning the columns it names. A frame writes `grid-column: span N`, which only a grid parent reads, so frames placed straight in an `ArrangeBoard` stacked at full width; every board now lays its blocks on this one grid rather than on a grid of its own. `ArrangeGroup`'s body is the same grid inside the group, so a block is one width on the page and in a group, and while the page is arranged the grid opens its rows a step for each block's toolbar.

package/dist/AccessDeniedCard/index.js

@@ -1,8 +1,8 @@
-export { ACCESS_DENIED_REASONS, AccessDeniedCard } from '../chunk-G3EEUNZQ.js';
+export { ACCESS_DENIED_REASONS, AccessDeniedCard } from '../chunk-UB7TJEKZ.js';
 import '../chunk-RA2ULG6H.js';
-import '../chunk-YZCJ63JF.js';
+import '../chunk-ACA27MZH.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Accordion/index.js

@@ -1,6 +1,6 @@
-export { Accordion, AccordionItem } from '../chunk-G2AVKPSL.js';
-import '../chunk-ENJUPIND.js';
-import '../chunk-PQADV6P6.js';
+export { Accordion, AccordionItem } from '../chunk-RIAZM6L3.js';
+import '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AppShell/index.js

@@ -1,4 +1,4 @@
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-WENCSQ47.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-EBNI36UQ.js';
 import '../chunk-IG75YMUN.js';
 import '../chunk-2HIOJ4YZ.js';
 import '../chunk-HMPFGIWM.js';

package/dist/{AppShell-APHZKJYH.css → AppShell-GCM4TDVY.css}

@@ -489,9 +489,12 @@
 }
 
 /* A screen that draws to the bottom of the window: the scroller stops
-   scrolling and the content column takes the height that is left. */
+   scrolling and the content column takes the height that is left. It
+   reserves no scrollbar gutter either, since nothing in it scrolls: the
+   reserved strip was a dead band down the screen's end edge. */
 .crewlet-app-shell--fill .crewlet-app-shell__main {
   overflow: hidden;
+  scrollbar-gutter: auto;
 }
 
 .crewlet-app-shell--fill .crewlet-app-shell__content {

package/dist/ArtifactBar/ArtifactBar.d.ts

@@ -0,0 +1,143 @@
+import { type ReactNode } from 'react';
+import type { ArtifactKind } from '../ArtifactCard/index.js';
+import { type MenuEntry } from '../Menu/index.js';
+/**
+ * One control at the bar's end: a panel it opens, or an action it runs.
+ *
+ * A TOOL IS DATA, NOT AN ELEMENT, because the bar draws each one twice: as an
+ * icon button while the bar has room, and as a row of the More menu once it
+ * does not. An element could only ever be drawn in one of the two.
+ */
+export interface ArtifactBarTool {
+    key: string;
+    /** What it does, in words: the button's name, its tooltip and its menu row. */
+    label: string;
+    /** A glyph from @crewlethq/icons/glyphs. */
+    icon: ReactNode;
+    onSelect: () => void;
+    /** A panel it opens is open: drawn pressed, and said to be. */
+    pressed?: boolean | undefined;
+    /**
+     * The shortcut, as the keys it is pressed with (`['h']`, `['Mod', 'k']`).
+     * Drawn in the tooltip and the menu row and set as `aria-keyshortcuts`;
+     * binding it is the caller's.
+     */
+    keys?: readonly string[] | undefined;
+    /** A small figure on the glyph: how many people are here. Say it in `label` too. */
+    badge?: string | number | undefined;
+    /** Unavailable, and why. The control stays drawn and says it. */
+    disabledReason?: string | undefined;
+    /**
+     * Drawn with its word beside the glyph while the bar is wide, and kept in
+     * the bar as a glyph when it is not, rather than folded into More: Share,
+     * or a kind's primary action such as a doc's Edit.
+     */
+    labelled?: boolean | undefined;
+}
+/** The ways a kind draws itself, as one choice: a deck's Edit, Grid and Present. */
+export interface ArtifactBarModes {
+    /** Names the group: "View". */
+    label: string;
+    value: string;
+    options: readonly {
+        value: string;
+        label: string;
+        icon?: ReactNode;
+    }[];
+    onValueChange: (value: string) => void;
+}
+export interface ArtifactBarLabels {
+    /** The More menu's name. */
+    more: (title: string) => string;
+    /** Said after the title's own name when it can be renamed by pressing it. */
+    renameHint: string;
+    /** The title field's name while renaming. */
+    titleField: string;
+    /** What an empty title is told. */
+    emptyTitle: string;
+}
+export declare const ARTIFACT_BAR_LABELS: ArtifactBarLabels;
+export interface ArtifactBarProps {
+    title: string;
+    kind: ArtifactKind;
+    /** The artifact's own icon word; its kind's glyph where it has none. */
+    icon?: string | null | undefined;
+    /** What the kind is called, said with the glyph: "Slides". */
+    kindLabel: string;
+    /** The way back to where the reader came from, as a link. */
+    back?: {
+        href: string;
+        label: string;
+    } | undefined;
+    /** Before everything, such as an application shell's navigation toggle. */
+    start?: ReactNode;
+    /**
+     * Renames in place. Left out, the title is read only. It answers what went
+     * wrong, in a sentence, to keep the field open and say it; or nothing when
+     * the new title was taken.
+     */
+    onRename?: ((title: string) => Promise<string | null | undefined | void> | string | null | undefined | void) | undefined;
+    /** Whether the title is being renamed now; controlled, for a Rename row elsewhere. */
+    renaming?: boolean | undefined;
+    onRenamingChange?: ((renaming: boolean) => void) | undefined;
+    /** Beside the title: the version chip ([ArtifactVersionChip]). */
+    version?: ReactNode;
+    /** The kind's views, drawn in the middle of the bar. */
+    modes?: ArtifactBarModes | undefined;
+    /** Who else is here, such as a presence stack. Folded away first on a narrower bar. */
+    presence?: ReactNode;
+    /** The kind's own controls, before the panels: a doc's Edit. */
+    kindTools?: readonly ArtifactBarTool[] | undefined;
+    /** The panels and actions every artifact has: details, history, people, share. */
+    tools?: readonly ArtifactBarTool[] | undefined;
+    /** The More menu's own rows. The tools that fold on a narrow bar are added above them. */
+    menu?: readonly MenuEntry[] | undefined;
+    /** `header` stands as the page's banner; `div` sits inside a host's own. */
+    as?: 'header' | 'div' | undefined;
+    /** The title's heading level: 1 where the bar is the page's own head. */
+    headingLevel?: 1 | 2 | 3 | undefined;
+    /** The title is still being read: a placeholder stands in its place. */
+    pending?: boolean | undefined;
+    labels?: Partial<ArtifactBarLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * The one slim bar an open artifact sits under, so the artifact keeps the
+ * rest of the screen.
+ *
+ * WHAT IT HOLDS, IN THE ORDER A READER SCANS IT: the way back, what the
+ * artifact is (its glyph and its title, renamed in place by whoever may), the
+ * version on show, then the kind's own views in the middle, and at the end
+ * who else is here, the kind's tools, the panels every artifact has, Share
+ * and More. Everything past the title opens on demand: a panel, a menu or a
+ * dialog, never a second row of chrome.
+ *
+ * IT FOLDS BY ITS OWN WIDTH, a container query rather than the window's, since
+ * a sidebar or a panel beside it is what decides its room. Narrower than a
+ * laptop's sheet the presence stack goes, then the labelled tools' words;
+ * narrower than a phone's two panes, the views and every tool but the
+ * labelled ones fold into More, where each is a row with its shortcut, and
+ * the kind's glyph gives the title its room. Both arrangements are drawn and
+ * the stylesheet shows one, so no control is ever in two places a reader can
+ * see at once and nothing is measured in script.
+ */
+export declare function ArtifactBar({ title, kind, icon, kindLabel, back, start, onRename, renaming, onRenamingChange, version, modes, presence, kindTools, tools, menu, as, headingLevel, pending, labels, className, }: ArtifactBarProps): import("react").JSX.Element;
+export interface ArtifactVersionChipProps {
+    /** The version on show. */
+    version: number;
+    /** The newest version. */
+    latest: number;
+    /** The versions to pick from, newest first, and what else the menu offers. */
+    items: readonly MenuEntry[];
+    /** Names the menu. */
+    label?: string | undefined;
+    /** The chip's words: `v3`, or `v2 of 3` for an older one. */
+    format?: ((version: number, latest: number) => string) | undefined;
+}
+/**
+ * The version on show, as a quiet chip beside the title that opens the
+ * versions. An older version than the newest says so in the chip itself and
+ * takes the accent, so a reader looking at history cannot mistake it for
+ * what everyone else sees.
+ */
+export declare function ArtifactVersionChip({ version, latest, items, label, format, }: ArtifactVersionChipProps): import("react").JSX.Element;

package/dist/ArtifactBar/index.d.ts

@@ -0,0 +1,3 @@
+import './ArtifactBar.css';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from './ArtifactBar.js';
+export type { ArtifactBarLabels, ArtifactBarModes, ArtifactBarProps, ArtifactBarTool, ArtifactVersionChipProps, } from './ArtifactBar.js';

package/dist/ArtifactBar/index.js

@@ -0,0 +1,25 @@
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-QMBP23BL.js';
+import '../chunk-FQCLKD7U.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-QWOPX2MN.js';
+import '../chunk-RCQXUT5K.js';
+import '../chunk-HJEVSQN6.js';
+import '../chunk-RKKO7QHH.js';
+import '../chunk-4JUKWWUD.js';
+import '../chunk-GOSQXEZU.js';
+import '../chunk-4KP4RC3O.js';
+import '../chunk-3CZ7XAVY.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-UAN5NE7M.js';
+import '../chunk-5OM447RW.js';
+import '../chunk-ACA27MZH.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2HIOJ4YZ.js';
+import '../chunk-HMPFGIWM.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ArtifactBar-IBWB5POL.css

@@ -0,0 +1,358 @@
+/*
+ * One row, one hairline under it, the height of a large row. The lead (the
+ * way back, the glyph, the title, the version) takes what the end leaves it
+ * and the title is what gives way, ellipsised; the views sit between the two,
+ * centred while both sides have room, because the lead and the end each grow
+ * from a zero basis and the end never shrinks below its controls.
+ *
+ * Three widths of its OWN fold it (a container query, since a sidebar or a
+ * panel beside it decides its room, not the window): under a laptop sheet's
+ * width the presence stack goes (the People control still counts who is
+ * here), then the labelled tools' words, and under a phone's two panes the
+ * views, the unlabelled tools and the kind's glyph fold away, the first two
+ * into More.
+ */
+
+.crewlet-artifact-bar {
+  container: crewlet-artifact-bar / inline-size;
+  display: block;
+  min-width: 0;
+  background: var(--color-surface-background);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-artifact-bar__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  height: var(--size-row-lg);
+  padding: 0 var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-artifact-bar__lead {
+  display: flex;
+  flex: 1 1 0;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-artifact-bar__end {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-2);
+  margin-inline-start: auto;
+}
+
+/* WITH VIEWS TO CENTRE, the end grows from zero as the lead does, so the two
+   sides stay equal while there is room and the views sit in the middle; the
+   end never shrinks below its controls, so it is the title that gives way. */
+.crewlet-artifact-bar__row--centred .crewlet-artifact-bar__end {
+  flex: 1 0 0;
+  min-width: max-content;
+}
+
+.crewlet-artifact-bar__modes {
+  display: flex;
+  flex: none;
+  align-items: center;
+}
+
+.crewlet-artifact-bar__glyph {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-sm);
+  height: var(--size-control-sm);
+  color: var(--color-text-secondary);
+}
+
+/* THE TITLE. Read only, it is text; renamable, its words are a button drawn
+   as text that answers the pointer with the hover ground, as a field would. */
+.crewlet-artifact-bar__title {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: var(--font-line-height-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-artifact-bar__title--editing {
+  overflow: visible;
+}
+
+.crewlet-artifact-bar__rename {
+  min-width: 0;
+  max-width: 100%;
+  margin: 0;
+  padding: var(--spacing-1) var(--spacing-2);
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: text;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-artifact-bar__rename:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-artifact-bar__rename:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The field is as wide as what is typed in it: the grid cell is sized by a
+   hidden copy of the text, and the field fills that cell. */
+.crewlet-artifact-bar__sizer {
+  display: inline-grid;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.crewlet-artifact-bar__sizer::after {
+  content: attr(data-value) ' ';
+  visibility: hidden;
+  grid-area: 1 / 1;
+  padding: var(--spacing-1) var(--spacing-2);
+  overflow: hidden;
+  white-space: pre;
+  font: inherit;
+}
+
+.crewlet-artifact-bar__field {
+  grid-area: 1 / 1;
+  min-width: 0;
+  width: 100%;
+  margin: 0;
+  padding: calc(var(--spacing-1) - 1px) calc(var(--spacing-2) - 1px);
+  border: 1px solid var(--color-border-control);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  font: inherit;
+  letter-spacing: inherit;
+}
+
+.crewlet-artifact-bar__field:focus {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-artifact-bar__field[aria-invalid='true'] {
+  border-color: var(--color-feedback-danger);
+}
+
+.crewlet-artifact-bar__error {
+  position: absolute;
+  top: calc(100% + var(--spacing-1));
+  left: 0;
+  z-index: var(--z-index-dropdown);
+  padding: var(--spacing-1) var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-md);
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  white-space: nowrap;
+}
+
+.crewlet-artifact-bar__placeholder {
+  display: block;
+  flex: 0 1 12rem;
+  height: var(--font-size-sm);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-artifact-bar__version {
+  display: inline-flex;
+  flex: none;
+  margin-inline-start: var(--spacing-1);
+}
+
+.crewlet-artifact-bar__presence {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-end: var(--spacing-1);
+}
+
+.crewlet-artifact-bar__tools {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-artifact-bar__tool {
+  position: relative;
+  display: inline-flex;
+}
+
+/* A figure on the glyph's corner, inside the button's own box so it never
+   reaches past the bar's edge. */
+.crewlet-artifact-bar__badge {
+  position: absolute;
+  top: calc(-1 * var(--spacing-1));
+  right: calc(-1 * var(--spacing-1));
+  min-width: var(--spacing-4);
+  height: var(--spacing-4);
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--spacing-4);
+  text-align: center;
+  pointer-events: none;
+}
+
+/* WHILE THE PRESENCE STACK IS DRAWN it says who is here, so a tool's figure
+   saying the same is not drawn beside it; it comes back where the stack
+   folds away. */
+.crewlet-artifact-bar--present .crewlet-artifact-bar__badge {
+  display: none;
+}
+
+/* A rule between two groups of tools: the kind's, then every artifact's. */
+.crewlet-artifact-bar__rule {
+  width: 1px;
+  height: var(--spacing-4);
+  margin: 0 var(--spacing-1);
+  background: var(--color-border-default);
+}
+
+.crewlet-artifact-bar__tip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+/* Both arrangements are drawn; the bar's width says which one shows. */
+.crewlet-artifact-bar__narrow,
+.crewlet-artifact-bar__tight {
+  display: none;
+}
+
+.crewlet-artifact-bar__wide,
+.crewlet-artifact-bar__roomy {
+  display: inline-flex;
+}
+
+@container crewlet-artifact-bar (width < 860px) {
+  .crewlet-artifact-bar__presence {
+    display: none;
+  }
+
+  .crewlet-artifact-bar--present .crewlet-artifact-bar__badge {
+    display: block;
+  }
+}
+
+@container crewlet-artifact-bar (width < 720px) {
+  .crewlet-artifact-bar__roomy {
+    display: none;
+  }
+
+  .crewlet-artifact-bar__tight {
+    display: inline-flex;
+  }
+}
+
+@container crewlet-artifact-bar (width < 640px) {
+  .crewlet-artifact-bar__row {
+    gap: var(--spacing-1);
+    padding: 0 var(--spacing-2);
+  }
+
+  /* The title has the row's room before the kind's glyph does: the glyph
+     says again what the title already names. */
+  .crewlet-artifact-bar__wide,
+  .crewlet-artifact-bar__glyph {
+    display: none;
+  }
+
+  .crewlet-artifact-bar__narrow {
+    display: inline-flex;
+  }
+
+  /* The views have folded, so there is nothing to centre: the title takes
+     the room. */
+  .crewlet-artifact-bar__row--centred .crewlet-artifact-bar__end {
+    flex: none;
+    min-width: 0;
+  }
+}
+
+/*
+ * THE VERSION CHIP: quiet at rest, the hover ground under the pointer, and
+ * the accent's soft ground while an older version than the newest is on
+ * show, so history never passes for the present.
+ */
+.crewlet-version-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  height: var(--size-target-min);
+  padding: 0 var(--spacing-2);
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-subtle);
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-version-chip:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+.crewlet-version-chip:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-version-chip--older {
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-version-chip--older:hover {
+  background: var(--color-brand-accent-soft-strong);
+  color: var(--color-brand-accent-ink);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-artifact-bar__rename,
+  .crewlet-version-chip {
+    transition: none;
+  }
+}

package/dist/ArtifactCard/index.js

@@ -1,12 +1,12 @@
-export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph } from '../chunk-6J35F334.js';
+export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph } from '../chunk-GOSQXEZU.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
-import '../chunk-YZCJ63JF.js';
+import '../chunk-ACA27MZH.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactCover/index.js

@@ -1,14 +1,14 @@
-export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-MQEEQVG6.js';
+export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-XALUCIG5.js';
 import '../chunk-WI6K5M5X.js';
-import '../chunk-6J35F334.js';
+import '../chunk-GOSQXEZU.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
-import '../chunk-YZCJ63JF.js';
+import '../chunk-ACA27MZH.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactIcon/index.js

@@ -1,13 +1,13 @@
-export { ARTIFACT_ICON_WORDS, ArtifactIcon, artifactIconGlyph } from '../chunk-V2Z24W2Z.js';
-import '../chunk-6J35F334.js';
+export { ARTIFACT_ICON_WORDS, ArtifactIcon, artifactIconGlyph } from '../chunk-4JUKWWUD.js';
+import '../chunk-GOSQXEZU.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
-import '../chunk-YZCJ63JF.js';
+import '../chunk-ACA27MZH.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';