@crewlethq/ui 0.32.0 → 0.34.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` and `DocumentTitle`, 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`, `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` |
 | List screens | `DataView`, and its parts on their own: `DataViewToolbar`, `FilterAxisBar`, `FilterAxisChip`, plus the filter model (`filterDefsFromColumns`, `applyColumnFilters`, `filterPredicate`, `blankFilterValue`) |
@@ -52,12 +52,12 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | 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`, `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`, `AppShell.Topbar`, `AppShell.AccountRow` and `useAppShell`, `AuthLayout`, `SidebarNav` and `NavItem`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen` |
+| 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`, `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`, `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`), `CanvasToolbar` (a canvas's tool palette, with `toolForKey`), `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` (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) |
 | 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`) |
+| 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), `SlideNav` (Previous, the position and Next, with `SLIDE_NAV_LABELS`), `SlideFilmstrip`, `SlideGrid`, `SlideCompare` (with `SLIDE_COMPARE_LABELS`), `PresenterView` (with `formatStopwatch`) |
 
 Storybook stories live under `apps/storybook/src/stories`.
 
@@ -161,7 +161,7 @@ land at once.
   `runPalette({ tokens, themes: themes + override })` from
   `@crewlethq/tokens/test/palette`.
 
-- **Component variables.** A few components expose their own `--crewlet-*` variables for values that are not tokens, for example `--crewlet-data-table-active-sort-color`, `--crewlet-data-table-row-hover-bg` and `--crewlet-data-table-archived-rail` on the compact `DataTable`, `--crewlet-avatar-stack-ground` for the cut-out round each badge of an `AvatarStack` (the sheet, `--color-surface-background`, by default, which is where the design draws every stack; on a card or any other surface, set it to that surface), `--crewlet-spark-ground` for the ring a `Sparkline`'s current point is cut out of the ground by (the card, `--color-surface-subtle`, by default, where a sparkline stands beside its number), `--crewlet-statcard-trend-width` for the figure at the end of a `StatCard`'s value line (96px), `--crewlet-bar-list-label-width` (128px) and `--crewlet-bar-list-value-room` (`6ch` and a gap) for the words' column and the value's room in a `BarList layout="beside"`, and `--crewlet-search-trigger-width` for a `SearchTrigger variant="toolbar"` at rest (200px). Override them from a rule that targets the component's root.
+- **Component variables.** A few components expose their own `--crewlet-*` variables for values that are not tokens, for example `--crewlet-data-table-active-sort-color`, `--crewlet-data-table-row-hover-bg`, `--crewlet-data-table-archived-rail` and `--crewlet-data-table-row-height` (the list row token, `--size-row-md`, by default; rebind `--crewlet-data-table-cell-pad-y` with it) on the compact `DataTable`, `--crewlet-avatar-stack-ground` for the cut-out round each badge of an `AvatarStack` (the sheet, `--color-surface-background`, by default, which is where the design draws every stack; on a card or any other surface, set it to that surface), `--crewlet-spark-ground` for the ring a `Sparkline`'s current point is cut out of the ground by (the card, `--color-surface-subtle`, by default, where a sparkline stands beside its number), `--crewlet-statcard-trend-width` for the figure at the end of a `StatCard`'s value line (96px), `--crewlet-bar-list-label-width` (128px) and `--crewlet-bar-list-value-room` (`6ch` and a gap) for the words' column and the value's room in a `BarList layout="beside"`, and `--crewlet-search-trigger-width` for a `SearchTrigger variant="toolbar"` at rest (200px). Override them from a rule that targets the component's root.
 
 The component stylesheets read only variables that `@crewlethq/tokens` emits or
 that the components declare themselves, and the same check refuses a glyph
@@ -204,6 +204,150 @@ 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.34.0
+
+**`ArtifactCard` is redesigned as a gallery card.** The `card` size draws a large preview on top with a generous corner, the kind's glyph on a badge standing over the preview's foot in the kind's ink, the title at the large step on one line, and one quiet line under it: who can open it (`access`: `private` a lock, `shared` people, `company` a building, each said in words to assistive technology through `labels.access`), the owner when the reader is not the owner, and when it was last edited. The default change word is "Edited" ("Edited 20h ago by Maya"), in both sizes. `actions` (a More menu) is drawn beside the link rather than inside it, over the preview's top corner, shown on hover, while focus is inside the card and while its menu is open, and always on a screen with no hover; a keyboard reaches it after the link. `trashed` fades the preview. Hover lifts the card's edge and shadow (not under `prefers-reduced-motion`), and focus rings the whole card. The `compact` row is unchanged but for "Edited". **`ArtifactCardSkeleton`** is the card's own shape while a gallery loads. **`ArtifactPreviewGlyph`** now draws the kind's illustration on its tinted ground (`ArtifactKindGround`) rather than a lone glyph.
+
+**`ArtifactKindIllustration`, `ArtifactKindGround` and `ArtifactKindTile` picture each kind of artifact.** The illustration is a simple geometric drawing per kind (a page of prose with a checklist, a slide with a picture, a phone screen, a board of bars, a window of code, a grid of cells), hidden from assistive technology and drawn entirely in the kind's tokens at four fixed weights, so it holds no colour of its own. The ground sets it on the kind's fill falling into the card, as a preview's stand-in. The tile is a "Make something new" entry: the ground framed in a hairline holder, the kind's name under it, one link named by the name (and an optional `badge`, read after it); with `disabledReason` it stays a focusable stop that says why it cannot start one.
+
+**`LivePreview`, `LivePreviewBudgetProvider` and `PreviewScale` draw real content small.** `LivePreview` lays its content out at `width` CSS pixels and scales it to its box with a transform (`PreviewScale`, which also fits a board of its own size whole with `fit="contain"`), mounts it only while the box is within `rootMargin` of the viewport, has stayed there for `dwellMs` (120ms by default, so a fling mounts nothing) and holds a slot of the shared budget (`LIVE_PREVIEW_MAX`, twelve, granted one per animation frame so a row arriving at once never costs one long task), and draws `fallback` otherwise: off screen, waiting for a slot, until the content calls `useLivePreview().ready()`, after it calls `fail()` (which gives its slot back for good) and in a browser with no IntersectionObserver. The live layer is `inert`, takes no pointer and is hidden from assistive technology; the swap is a short fade, and none under `prefers-reduced-motion`. `createLivePreviewBudget` is the bookkeeping, exported for a host that measures.
+
+**`Select` takes `appearance="quiet"`**: no boundary or fill until the pointer is over it, for a toolbar whose pickers arrange content that is the page's point. A quiet filter that is on takes the accent's soft fill under its accent ink, and a quiet picker sizes to its answer with no floor.
+
+**Tokens: `--color-artifact-kind-<kind>` with its `-ink`, `-fill` and `-line` steps** for `doc`, `slides`, `design`, `dashboard`, `html` and `sheet`. Each is an alias of a node hue (doc blue, slides amber, design purple, dashboard cyan, HTML rose, sheet green), so every theme, light and dark, repaints them with no value of its own.
+
+**`SheetGrid`'s row gutter puts the number and the row's actions in one place.** The number sits centred in the fixed-width gutter, in the tertiary ink and tabular figures, so row 9 and row 1000 stand in one column. Where the host takes row actions (`onDeleteRow`), the number gives way, in the same place and with no shift, to the actions button at the small `IconButton` step, centred, with a `Tooltip` and the name "Actions for row N" (`labels.rowActions`, which read "Row actions for row N"). It shows under the pointer, on the row holding focus and while its menu is open; the button is drawn in every row with actions, clear until then, so a tap on the number opens the menu on a touch screen, where there is no hover. It sat pinned to the gutter's trailing border, half over the number ("2 ⋯"), was drawn only on the active or hovered row, and carried only the native tooltip. The tip opens above the button from its leading edge, so it never hangs past the grid's own edge or is pushed off the button at a page's edge. The row header is named by its row alone (`aria-labelledby`), not by the button inside it, and keys pressed on the button stay the menu button's rather than also moving the active cell. A selection marks its rows' numbers as it marks its cells; in forced colours the number takes the selection's ink on the page's ground.
+
+**`Tooltip` takes `align="start"`**, which lines the panel up with the trigger's leading edge (its right edge in a right-to-left page) rather than centring it, for a control at the leading edge of what it belongs to. `center` stays the default.
+
+**A selected frozen cell stays opaque when the sheet scrolls sideways.** The selection's translucent tint replaced the cell's ground, so the values passing under a frozen column showed through a selected cell in it. The tint is now laid over the cell's own ground, as it is in the gutter.
+
+## Changes in 0.33.0
+
+**`ArtifactPanel` rests every panel of text at one width, and its `sm` size is removed.** Details at `sm` and History at `md` moved the artifact's edge by 80px between two panels of text. There are two sizes now: `md`, at 22.5rem, for every panel of text (facts, a list, a form), so moving between them never moves the artifact's edge, and `lg`, at 36rem, for a table. Where there is no room for two columns, a panel that slides over the artifact takes the drawer's lift, the one the shell's rail drawer wears, so its start edge reads as a sheet over the artifact rather than a cut through it. The body publishes its padding as `--crewlet-artifact-panel-inset`, which a sticky foot offsets itself by to sit on the panel's edge, and it is a flex column, so a child that sets `min-height: 0` can fit the panel rather than scroll it. A `Section` inside it heads at the panel's register: its title reads `--crewlet-section-title-size`, which the panel's body sets to the small step, and its sentence stacks under the title (the actions kept on the title's line) when the column it sits in is narrow.
+
+**`ArtifactBar` stands at the shell top bar's height and inset.** It is `--size-shell-topbar` tall, hairline included, where it was 49px against the top bar's 52, so the line under it no longer jumps when a reader opens an artifact from the gallery, and on a phone its first control keeps the shell's inset. Below 900px of bar, "Editing · Unsaved changes" folds to its dot, which turns the accent once anything is unsaved and stays in the status for a screen reader, before the title is cut; "Editing" still folds below 640px. The rename hint is a hidden element the title's description is read from, no longer a stray "Rename" in the reading order, and `ArtifactVersionChip` takes a control's corner (`--radius-md`), as the bar's other controls of its height do.
+
+**`Callout` centres a one-line message on its action, and moves a narrow callout's action under its text.** The content is padded by half of what the small control is taller than a line, so one line centres on the button and a longer message keeps its icon on its first line. A callout with an action measures its own width: under 28rem the action takes a row of its own at the start of the text's column, and wider it stays beside the text.
+
+**`ShareDialog` lists a share that reaches nobody, and gives its sections room.** A stored share whose row carries `invalid` (the reason in words) is listed rather than hidden: it reads `labels.noAccess` in place of a role, says why in the warning ink, and offers Remove as its one action. Each section carries one step more above its heading, so "Who has access" no longer reads as the add field's label.
+
+**A `Modal` head with a subtitle keeps its controls on the title's line.** The head carries `crewlet-modal__header--subtitled`, aligns to the top, and centres the mark, the actions and the back and close controls on the title's first line. A sheet's head is a bar and keeps its centring. A `CommandPalette`'s foot has no actions, so its legend spans the foot and a consumer can end it with what the search is doing at the far edge.
+
+**A toast's countdown fades at its leading edge.** Cut square, the draining wash read as a strip painted in two tones whenever it stood still, in a still frame or paused under the pointer; it now reads as a tint running out, in both themes.
+
+**`AccessDeniedCard` draws as an artifact's other blocked state**: on the page, in no box, at a reading width, with the default empty state's 24px glyph, as a trashed artifact does. It was a bordered card with a 32px glyph.
+
+**`ArtifactCard` reads its facts as one run, and its change time first.** A line's facts are one run, each after the first opened by a quiet dot ("Sheet · OPS · v12"), and the change reads time first and changer after (`labels.by`, "Updated 4m ago by Maya"); leave `owner` out where the reader owns it, and `updatedBy` where it is the owner already named, whose change then reads "Updated 4m ago" beside their name. The title, cut to one line, is offered whole on hover, and a compact card is a row in every bundle, where `Card`'s column layout used to win. The `html` kind's default label is "HTML", not "Page", which is Knowledge's word; the kind id is unchanged.
+
+**`DashboardCover` draws its figures as rows**, so each label has the card's width; three side by side cut every label to its first word. **`ArtifactPreviewGlyph`** is the preview a card draws with no cover, for a host whose cover has nothing to draw yet or at all: a cover element that rendered nothing left an empty box, since the card cannot tell it from a picture.
+
+**`AppShell` and `Container` keep the top bar's 16px gutter on a phone.** Under the shell step the content's side padding dropped to 12px, and `Container`'s did under 480px, so a page's first line stood 4px left of the title and the controls over it. Both are 16px now, the shell's phone gutter and the top bar's own inset.
+
+**`DocumentTitleField` is new: the field a new page's title is written in**, set as `DocumentTitle` sets the title once the page exists: no box, the title's own type, and a line at its foot that answers the pointer, focus (in the ring's colour) and a refusal (`aria-invalid`). Its name is the caller's.
+
+**A `Document`'s heading levels each take their own step, and quotes keep the body's rhythm.** A body is drawn from h2 down, so a page's fourth and fifth levels land on h5 and h6, which were both set at h4's 16px; h5 now takes the body's step and h6 the same step in the secondary ink. A quote and a callout body keep the body's gap between paragraphs, and a list item (task items included) the smaller step, so its paragraphs still read as one item.
+
+**`DocTabsEditor` is a list with row menus and rename in place.** A tab is a row in the outline's register: its title opens it, the open row is filled, and the handle and an actions menu (Rename, Move up, Move down, Remove) show under the pointer, on focus and on the open row. Rename (or a double press) turns the title into its field in place, where Enter or leaving keeps it and Escape puts the old title back. Add, at the list's heading, opens a field under the open tab and reports the title on Enter, so a new tab is never named after a placeholder. Titles wrap rather than being cut. Six tabs used to read as thirty controls around truncated title fields.
+
+**A link's label can hold a picture.** The Markdown grammar reads a whole picture before the label's own brackets, so a badge that links somewhere (`[![build](badge.svg)](ci)`) draws the picture inside the link, where it was a link labelled `![build` followed by the raw text `](ci)`, and `RichEditor` writes it back as written.
+
+**A presentation's pieces are finished for the page, full screen and a phone.**
+
+- **`SlideStage` takes `framed`**, the slide's own hairline edge on a small radius, so a slide whose ground is the page's colour still reads as a slide. Grid cards, the comparison's sides and the presenter's slides use it. In full screen a `contain` or `view` stage letterboxes on `--color-projection-letterbox`, black in every theme.
+- **`SlideNav` is new**: Previous, the position and Next at the small control step, off at the ends with the reason on the control, and a slot for the show's own controls after a rule. `tone="projection"` floats it over a slide shown full screen, in the projection's fixed colours (`--color-projection-ground`, `-ink`, `-hover`, `-rule`, new in `@crewlethq/tokens`).
+- **`useIdle(ref, enabled)` is new**: whether the pointer has rested over an element, for a full screen show to put its controls and cursor away. A move, a press or focus wakes it; a key (a clicker) does not.
+- **`PresenterView` shows the room's slide whole on a phone**, where it used to collapse to nothing, and as large as fits beside the side column elsewhere, drawn as the slide rather than letterboxed in a well. Its controls are `SlideNav`; the room's slide, the next one and the notes carry visible captions; the end of the deck holds the next slide's shape so nothing moves on the last slide.
+- **`SlideFilmstrip` keeps the slide on the stage in view**, scrolling only itself, and takes `orientation="horizontal"` for a row under the stage on a phone (Left and Right step it). Its reorder handle takes a control's corner (`--radius-md`). The strip is its own scroller now: a host bounds its height and no longer sets `overflow`.
+- **`SlideGrid` lays a phone out two to a row.**
+- **`SlideCompare` names its columns** by version over the first row (over each side once they stack), and the side a version lacks reads "Not in this version". Two identical versions draw no empty list.
+
+**Every chart says when it has nothing to draw.** `TimeSeries`, `StackedColumns`, `StackedBar` and `ActivityStrip` take `emptyLabel`, as `BarList` did, and draw that one sentence in the chart's place (`.crewlet-chart-empty`) rather than an empty grid, a scale of 0 to 4, a bare track or a window starting at the epoch. The sentence stands in the middle of the plot, at the plot's height. `ChartEmpty` is exported for a host drawing a figure's empty state itself; it takes `height` and `align` (`start` for a list, which `BarList` uses).
+
+**`BarList` draws every bar in the first data hue.** A ranked list is one series; a hue per rank gave five rows five identities and painted the tail as the residual. A row's `color` still overrides it.
+
+**`TimeSeries` draws below zero, a single point, and its own legend.** The scale runs from zero to the peak, and below zero when a value is, with the baseline on zero, an area filled to it, and "low" beside "peak" under the plot. A series of one point draws its point, a window of one instant draws it at the middle, and the reading draws every series' point on the crosshair. Two series or more are lines with no wash; every series is keyed by a legend of line keys the chart draws itself (`legend`, `below` by default, or `none` for a card whose title names its one series). The grid is a solid hairline. Under 18rem the range leaves the line to the window's ends.
+
+**`StackedColumns` stands on zero.** A negative part hangs from the zero line, zero is always one of the scale's lines, and the tooltip reads values with their sign. `formatScale` writes the scale's words apart from the tooltip's. The scale's words are the sans at the caption step, as the dates are; a column is at most 24px wide; the middle date leaves a chart narrower than 22rem.
+
+**`ActivityStrip` takes `reading`,** which makes the strip one tab stop whose cells read their time and value by pointer or by ←/→. A cell is at most 24px wide, so a strip of one day is one mark.
+
+**`Legend` items take `shape: 'line'`** for a series drawn as a line. A chart's tooltip ends a long series name in an ellipsis before its value, which is never cut; the name used to run under the number.
+
+**`StatCard` takes `hideLabel` and `trendPlacement`, and moves a figure before it cuts the number.** `hideLabel`, as `Meter` does, is for a tile its container names. In a tile too narrow for both, the trend figure moves under the number rather than the number being cut, and a `unit` too long to share the number's line moves under it whole; only a number too long for the tile alone ends in an ellipsis. `trendPlacement="below"` stands the figure under the number at the tile's width instead, for a quota whose bar is the reading, so a row of them keeps one shape at every width. In a `WidgetFrame` a tile reserves no empty second line, and in a frame narrower than 11rem its number steps down to `--font-size-xl` rather than being cut.
+
+**`WidgetFrame` takes `holdTitle`, and a flush frame insets only its table's outer cells.** `holdTitle` keeps the title's two lines so the numbers of a row of frames start on one line. A narrow frame's stacked citation takes a second line before it ends, and the source's whole title is its tooltip. In a flush frame the first and last columns of a table stand on the frame's 16px; between columns a cell keeps the compact table's own inset.
+
+**`ArrangeGroup` takes `variant="section"`**: a quiet header on the page's ground (the name at a card title's step, its count, the chevron) over a hairline in the hue, and the blocks on the page's grid with no inset, for a page being read rather than arranged. `band`, the default, is unchanged.
+
+**`Note` spaces its paragraphs** a step apart, whatever the host's base sheet resets.
+
+**`SheetGrid` sizes a column to its header and values.** A column that declares no width is as wide as the widest of its header and a few of its values (every live choice for a choice column, the longest values otherwise), drawn by the real header and cells in a hidden, inert row and measured, within bounds its type sets; `fitSamples`, `fittedWidth`, `SHEET_FIT_SAMPLES` and `SHEET_COLUMN_BOUNDS` in `SheetModel` are that rule. Samples are taken when the columns change and when the first rows arrive, never on an edit, and measured again once the face loads. The frozen columns hold at most 60% of the visible width, so a long title column never fills a phone. On the compact step, values are 13px under 12px sentence-case headers.
+
+**A `fit="content"` `SheetGrid` gives way in a bounded column.** Its scroller shrinks to the room its column leaves, down to the page's `--crewlet-sheet-min-height` and never below its own rows' height, which it publishes as `--crewlet-sheet-content-height`, so a page no longer subtracts a guess of everything above and below it to compute a `max-height`.
+
+**`SheetGrid`'s headers sit on their column's edge, and a sheet that has just opened is quiet.** Number and rating names end where their values end (the sort mark on the inner side), checkbox names centre, and each header carries its whole name as its title. The active cell's history control is a 24px target at the control radius with room of its own, so a value ends in an ellipsis before it, and it sits on the leading edge of a number or rating, so neither moves when its cell turns active. That control, the active row's actions and a single selected cell's tint show while the reader is in the grid (or hovering), not on every sheet as it opens; a range of cells stays tinted. Once scrolled sideways, the frozen edge ends on the strong hairline.
+
+**A compact `DataTable` takes `--crewlet-data-table-row-height`**, its row's height (`--size-row-md` by default; rebind `--crewlet-data-table-cell-pad-y` with it), so a host whose list keeps another rhythm sets it rather than reaching past the table into its cells.
+
+**Pill `Tabs` stand at the 28px tab step.** Tabs sit between the 26px controls of a toolbar or panel and the 32px actions of a page, so a row of them reads as navigation rather than as one more button: the well's inset is 1px round a 24px chip (the row was 30px), and the chip takes `--radius-chip`.
+
+**A router-mode `Tabs` row carries its own overflow.** `trailing` is drawn inside the `nav` after the last link, so the menu a row of sections folds into ("More") or a note about every section is part of the navigation landmark; a tab list holds tabs alone and ignores it. `ref` hands over the row's root, for a consumer that measures which links fit. A tab's `count` takes a formatted string ("1.2k") as well as a number, drawn as given, and an empty string draws no count.
+
+**The compact `Checkbox` centres its line in a form row.** One line is exactly the row's height, on the line the small inputs and selects beside it hold, and a longer label grows downwards with the box still on its first line.
+
+**`LayersList` is new: a canvas's list of items beside it, as a design tool's layers are.** The caller holds the selection and hands it to the list and the canvas both; the picked entry takes the accent edge every current row takes, held on every entry so nothing moves when the pick does. It is one tab stop, walked with the arrows, Home and End without picking; Space or a click picks (`onSelect`) and Enter or a double-click opens (`onOpen`), which an entry's name then says. Names are cut to one line with the whole name as the tip, the entries hang into the gutter so their letters stand on the list's edge, and the list scrolls on its own under an optional `heading` (its count) that stays. The engine dashboard's design view drew this list itself; it now uses this one.
+
+**A caller can hold a board canvas's selection.** `selected` and `onSelectedChange` (with `CanvasBoardSelection`) let a list of boards beside the canvas mark the board picked on it, and pick one there.
+
+**A design's canvas lays its grid on the boards' plane.** `Canvas` takes `ground="grid"`: the dotted ground's dots, panned with the content and pitched by the zoom (doubling or halving to stay between one and two spacing steps on screen), as a design tool's grid is. `gridOf(view)` is that rule on its own. `CanvasBoard` draws on it; `dotted` is unchanged and still stays put under a chart.
+
+**A board says only what it has room for.** A board drawn narrower than `BOARD_TITLE_MIN_WIDTH` (40px) goes unnamed until it is zoomed into, and a placeholder drops its lines in turn (why it is not running, then its size) rather than clipping them at both ends over the boards beside it; `boardRoom(width, height)` is that rule. A placeholder no longer repeats the board's name, which the title above it already says. A board's title row is one line of type tall, so a row of boards zoomed out loses less to the names above it, and a hidden open control leaves the row, so a narrow board's name has the width it held.
+
+**More boards run as thumbnails.** `CANVAS_BOARD_MIN_LIVE_WIDTH` is 96px (was 160), so a design fitted on a phone or zoomed out over a dozen boards draws its pages rather than a grey box each; `CANVAS_BOARD_MAX_LIVE` still caps how many run.
+
+**The chrome is drawn over the content.** A board's name and open control, a note's tools and the resize corners sit above every board and note. Far out, a note laid out after a board covered the board's name and took its presses.
+
+**The open control and a note's tools are the item's.** Where a pointer can hover they show on the board or note under it, the selected one and the one holding focus; a touch screen always shows them.
+
+**A board name that is a move handle keeps the name's type and place.** In edit mode the title was set at the page's size (the handle's `font: inherit` won) and moved off the board's edge by the handle's padding. The handle takes the control radius.
+
+**The palette is the zoom bar's height, and moves on a narrow canvas.** `CanvasToolbar`'s tools are the small control step (26px), the toolbar and panel step every canvas control takes, with the zoom bar's shadow, where they were 30px and stood taller than the zoom bar beside them. On a canvas narrower than 36rem the palette sits in the top left corner instead of over the zoom bar.
+
+**A canvas's hint no longer moves its zoom bar.** In a bottom corner the status note ("Double-click to use this board") is drawn above the bar, so the bar stays under a pointer on its way to it.
+
+**`SandboxedFramePlaceholder` and `SandboxedFrameNotice` are new: the frame's own states for a host with no frame to mount yet.** The placeholder draws while the frame's ticket is minted and the notice when the engine refused one, in the same box the frame takes, so the reader meets one loading state and one way of saying a page is not here; a host that drew its own placeholder showed a second, differently shaped one that jumped when the frame took over. The frame's loading and end states share one inset (the skeleton no longer opens with an empty band or runs past the frame's bottom edge), an end state's action sits under its message, and its title drops its closing full stop, as every other callout title does. `Skeleton`'s `borderRadius` takes any CSS length, such as a radius token.
+
+**`SandboxedFrame` says a page that loaded without a hello failed within a beat.** The runtime says hello as the page's first script runs, long before the load event, so a load with no hello ends the frame `FRAME_LOAD_GRACE_MS` (1.5s) after it; a document that never loads keeps `FRAME_HELLO_TIMEOUT_MS`. An expired ticket, a missing page and a starting node, which the artifact origin answers with an empty refusal, used to hold the placeholder for the full ten seconds. When a page hands focus back, the frame's region draws its ring inside its edge, on a layer above the frame, so a frame filling a clipping card keeps it, and forced colours mode keeps it too.
+
+**`@crewlethq/artifact-kit` draws a sheet once the runtime's handshake is done.** `whenRuntime` and `mountSheet` wait for `crewlet.ready`, so a sheet no longer reads a page that declared `db` as one that did not; on a phone every sheet of a page lost that race. A url cell's link opens through the runtime's new `openLink`, since a frame cannot open a window, a sheet the reader cannot edit draws no sync strip, and the refusals name the collection in quotes rather than telling a reader about a capability. The presence row keeps its hue ring clear of the sheet's edge by the reach `PresenceStack` now publishes (`--crewlet-presence-stack-reach`), so a page's clipping card no longer cuts it.
+
+**A page's sheet shows who is in that sheet, not the whole room.** The dashboard's artifact bar draws the room once; a `<crewlet-sheet>` drew the room's stack again over every sheet of a page. It now rings the cells people are on and stacks only the members whose focus is in its collection (`membersIn`), named "1 other person is in this sheet" or "N other people are in this sheet", and draws no stack when nobody else is in it. Pages pinned to an older kit keep the stack they were published with.
+
+**`@crewlethq/artifact-kit` ships `content.css`, an opt-in stylesheet for the plain HTML an artifact page writes itself.** Linked after `kit.css` (`/_crewlet/kit/<version>/content.css`), it gives headings, running text, lists, quotes, code, tables, rules, figures, disclosures and every form control Document's prose and the medium Button, Input, Textarea and Select, from the tokens, so it follows the reader's theme. Every rule weighs only its element, so a page's own class wins; nothing the kit draws (a `<crewlet-sheet>`, any `crewlet-` class) and nothing under `data-crewlet-content="off"` is touched; and a page that does not link it, every published page included, is unchanged. Storybook: Artifact kit, Content stylesheet.
+
+**`useMediaMatch(query)` is exported**: whether a media query matches, read during render (`useSyncExternalStore`) so the first render already has the answer, and again on every change; `false` where there is no `matchMedia`. It is the package's own copy, the one the shell and the switcher read, so an application's "is this a phone" can no longer disagree with the kit's. Keep it for the decision a stylesheet cannot make (which element to draw); a width a media query in CSS can decide belongs there.
+
+**An end-aligned `Popover`, `Menu` or `Select` opens near the left edge.** Each asked whether its anchor had left the layer using the aligned panel's start instead of the anchor, so a panel wider than its trigger's right edge (a toolbar's last control wrapped to the left of a phone) closed on the frame it opened. They now ask of the anchor itself (`anchorGone`, from the layer's placement helpers, which `Tooltip` uses too), and the placement clamps the panel inside the window.
+
+**`getInitials` reads past punctuation and colons.** A colon splits a handle as the other separators do (`ci:release` gives CR, where it gave one initial for two words), and the punctuation around a word is not taken for its first letter ("review (API token)" gives RA, where it gave R().
+
+What to change:
+
+- `ArtifactPanel` no longer takes `size="sm"`: pass `md`, the one width for a panel of text. This is the release's breaking change.
+- A page that bounded a `fit="content"` `SheetGrid` with a computed `max-height` drops it, and sets `--crewlet-sheet-min-height` for the least the grid may give way to.
+- `DocTabsEditorLabels` takes `heading`, `actions(title)` and `rename`, and `moveUp`, `moveDown` and `remove` are strings now, not functions of the title; `editText`, `lastTab`, `atTop`, `atBottom` and `addNeedsTitle` are gone.
+- `SlideCompareLabels.missing` is a string now, not a function of the version.
+- A host that drew a show's Previous, count and Next itself uses `SlideNav`.
+- A host that set `overflow` on the box round a `SlideFilmstrip` bounds its height instead and drops the `overflow`.
+- A `TimeSeries` caller that drew its own `Legend` beside it passes `legend="none"` or drops its own.
+- A host that reached into a compact `DataTable`'s cells for its row height sets `--crewlet-data-table-row-height` instead.
+- A host that drew its own placeholder before a frame was minted, or its own refusal in the frame's place, uses `SandboxedFramePlaceholder` and `SandboxedFrameNotice`.
+- A host that top-aligned a subtitled `Modal` head's controls, or spanned a `CommandPalette` legend across its foot, drops its override.
+- A host that drew a list of a canvas's items beside it uses `LayersList`, holding the selection with `CanvasBoard`'s `selected` and `onSelectedChange`.
+- An application that start-aligned its panels on a phone to dodge the close above can align them as it wants again.
+- An application with its own media query hook can use `useMediaMatch` instead.
+
 ## Changes in 0.32.0
 
 **A canvas title fits its box.** `CanvasBoard` sets a title note in a size fitted to its box both ways (three fifths of its height, smaller when its text would run past its width; `titleSize` is that rule on its own), and the text clips at the box where an unusually wide face still overruns it. A long heading used to run past its box over the boards beside it, at every zoom.

package/dist/AccessDeniedCard/AccessDeniedCard.d.ts

@@ -35,5 +35,10 @@ export interface AccessDeniedCardProps {
  * IT SAYS WHAT THE READER CAN DO, never what the artifact is. A title, a
  * kind or an owner the engine has not shown this reader stays unsaid, so the
  * card is safe to draw from nothing but the engine's refusal.
+ *
+ * DRAWN AS AN ARTIFACT'S OTHER BLOCKED STATE IS: the default empty state with
+ * the 24px glyph, on the page and in no box. A bordered card with a larger
+ * glyph made a refused link look like a different product from a trashed
+ * artifact, which says the same kind of thing.
  */
 export declare function AccessDeniedCard({ reason, owner, action, headingLevel, className, labels }: AccessDeniedCardProps): import("react").JSX.Element;

package/dist/AccessDeniedCard/index.js

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

package/dist/AccessDeniedCard-QVNDMT46.css

@@ -0,0 +1,8 @@
+/* One empty state and nothing else, at a reading width, so a refusal in a
+   wide viewer body reads as one sentence rather than a banner. */
+
+.crewlet-access-denied-card {
+  width: 100%;
+  max-width: var(--size-measure);
+  margin-inline: auto;
+}

package/dist/AppShell/index.js

@@ -1,7 +1,7 @@
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-EBNI36UQ.js';
-import '../chunk-IG75YMUN.js';
-import '../chunk-2HIOJ4YZ.js';
-import '../chunk-HMPFGIWM.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-T46NR3WP.js';
+import '../chunk-RTPQDNW3.js';
+import '../chunk-3EB2AV3H.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

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

@@ -610,8 +610,10 @@
     display: inline-flex;
   }
 
+  /* THE TOP BAR'S GUTTER, 16px: the content's 12px stood every page's first
+     line 4px left of the title and the controls over it. */
   .crewlet-app-shell__content {
-    padding: var(--spacing-4) var(--spacing-3) var(--spacing-9);
+    padding: var(--spacing-4) var(--spacing-4) var(--spacing-9);
   }
 }
 

package/dist/ArrangeGroup/ArrangeGroup.d.ts

@@ -2,10 +2,25 @@ import { type HTMLAttributes, type ReactNode } from 'react';
 import type { NodeHue } from '../utils/nodeHue.js';
 /** A surface's colour: one of the six hues, or none. */
 export type SurfaceTone = NodeHue | 'none';
+/**
+ * How a group is drawn.
+ *
+ * `band`, the default, is a bordered box whose header is a band in the tone,
+ * for a page being arranged, where each group is an object to move.
+ *
+ * `section` is a quiet section of a page being read: the name, its count and
+ * the chevron on the page's ground over a hairline (in the tone, where there
+ * is one), and the blocks on the page's own grid with no inset, so a block in
+ * the section lines up with the blocks outside it. A filled band among cards
+ * outweighed every card on the page.
+ */
+export type ArrangeGroupVariant = 'band' | 'section';
 export interface ArrangeGroupProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /** What the group holds, in the reader's words: "Delivery". */
     title: string;
     tone?: SurfaceTone | undefined;
+    /** How the group is drawn: see the type. Defaults to `band`. */
+    variant?: ArrangeGroupVariant | undefined;
     collapsed: boolean;
     onCollapsedChange: (collapsed: boolean) => void;
     /** How many blocks it holds, beside the title. */
@@ -39,4 +54,4 @@ export interface ArrangeGroupProps extends Omit<HTMLAttributes<HTMLElement>, 'ti
  * THE TONE IS A BAND, never the whole surface: the header carries the hue and
  * the body stays the page's, so the cards inside keep their own contrast.
  */
-export declare function ArrangeGroup({ title, tone, collapsed, onCollapsedChange, count, onTitleChange, bodyProps, empty, columns, actions, className, children, ...rest }: ArrangeGroupProps): import("react").JSX.Element;
+export declare function ArrangeGroup({ title, tone, variant, collapsed, onCollapsedChange, count, onTitleChange, bodyProps, empty, columns, actions, className, children, ...rest }: ArrangeGroupProps): import("react").JSX.Element;

package/dist/ArrangeGroup/index.d.ts

@@ -1,3 +1,3 @@
 import './ArrangeGroup.css';
 export { ArrangeGroup } from './ArrangeGroup.js';
-export type { ArrangeGroupProps, SurfaceTone } from './ArrangeGroup.js';
+export type { ArrangeGroupProps, ArrangeGroupVariant, SurfaceTone } from './ArrangeGroup.js';

package/dist/ArrangeGroup/index.js

@@ -1,4 +1,4 @@
-export { ArrangeGroup } from '../chunk-B4EBHPK3.js';
+export { ArrangeGroup } from '../chunk-M5KZX5JE.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ArrangeGroup-GY5YMP6E.css → ArrangeGroup-KRWWOJKR.css}

@@ -156,6 +156,49 @@
   pointer-events: none;
 }
 
+/*
+ * THE SECTION VARIANT: a quiet header on the page's ground, over a hairline
+ * in the group's hue (the default border with none), and the blocks
+ * on the page's grid with no inset of their own. The name is a card title's
+ * step and ink, the chevron the quiet ink, and the count its chip.
+ */
+.crewlet-arrange-group--section {
+  border: 0;
+  border-radius: 0;
+  background: none;
+  overflow: visible;
+}
+
+.crewlet-arrange-group--section .crewlet-arrange-group__head {
+  min-height: 0;
+  padding: 0 0 var(--spacing-2);
+  border-bottom: 1px solid var(--crewlet-arrange-group-line);
+  background: none;
+}
+
+.crewlet-arrange-group--section.is-collapsed .crewlet-arrange-group__head {
+  border-bottom-color: var(--crewlet-arrange-group-line);
+}
+
+/* The chevron stands on the page's edge, its hover reaching past it. */
+.crewlet-arrange-group--section .crewlet-arrange-group__toggle {
+  min-height: var(--size-control-sm);
+  margin-inline-start: calc(var(--spacing-1) * -1);
+  padding: 0 var(--spacing-1);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-arrange-group--section .crewlet-arrange-group__title {
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--font-letter-spacing-normal);
+  color: var(--color-text-primary);
+}
+
+.crewlet-arrange-group--section .crewlet-arrange-group__body {
+  min-height: 0;
+  padding: var(--spacing-3) 0 0;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-arrange-group__chevron,
   .crewlet-arrange-group__title-field {

package/dist/ArrangeList/index.js

@@ -1,7 +1,7 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-5LUI3WQP.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-V43UVX4H.js';
 import '../chunk-A722MUNR.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-7T42VQQT.js';
+import '../chunk-CPEPST4S.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';

package/dist/ArtifactBar/index.js

@@ -1,23 +1,25 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-P4BOXB6E.js';
-import '../chunk-FQCLKD7U.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-IUD5VA2Z.js';
+import '../chunk-WKEPORNM.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-QWOPX2MN.js';
-import '../chunk-RCQXUT5K.js';
-import '../chunk-HJEVSQN6.js';
+import '../chunk-6ZJ3N7QI.js';
+import '../chunk-CCAXYHQS.js';
+import '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';
-import '../chunk-4JUKWWUD.js';
-import '../chunk-GOSQXEZU.js';
-import '../chunk-4KP4RC3O.js';
+import '../chunk-PLDUNXAO.js';
+import '../chunk-XTOVADJU.js';
+import '../chunk-TEUQWOWZ.js';
+import '../chunk-CI3VPIJN.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-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
+import '../chunk-UDQW6UK7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-2HIOJ4YZ.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-3EB2AV3H.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/{ArtifactBar-MLMJHWY6.css → ArtifactBar-C462VD4C.css}

@@ -25,7 +25,10 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-3);
-  height: var(--size-row-lg);
+  /* THE SHELL'S TOP BAR'S HEIGHT, its hairline included: the bar stands in
+     its place, and at a row's height of its own the line under it jumped by
+     three pixels between the gallery and the artifact opened from it. */
+  height: calc(var(--size-shell-topbar) - 1px);
   padding: 0 var(--spacing-3);
   min-width: 0;
 }
@@ -289,9 +292,10 @@
 }
 
 @container crewlet-artifact-bar (width < 640px) {
+  /* THE ROW KEEPS THE SHELL'S PHONE INSET, so the first glyph stands over
+     the page's own gutter rather than eight pixels from the edge. */
   .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
@@ -325,7 +329,8 @@
   height: var(--size-target-min);
   padding: 0 var(--spacing-2);
   border: 0;
-  border-radius: var(--radius-pill);
+  /* A CONTROL'S CORNER, the one every bar control of its height takes. */
+  border-radius: var(--radius-md);
   background: var(--color-surface-subtle);
   color: var(--color-text-secondary);
   font-family: var(--font-family-sans);

package/dist/ArtifactCard/ArtifactCard.d.ts

@@ -12,6 +12,23 @@ export declare function ArtifactKindGlyph({ kind, size }: {
     kind: ArtifactKind;
     size?: GlyphSize | undefined;
 }): import("react").JSX.Element;
+/**
+ * What a card's preview draws when there is no cover: the kind's drawing on
+ * its tinted ground (`ArtifactKindGround`). Exported for a host whose cover
+ * has nothing to draw YET (its content still loading) or at all (a sheet with
+ * no columns): a cover that rendered nothing left an empty box where every
+ * other card has a picture, since the card cannot know that a cover it was
+ * given drew nothing.
+ */
+export declare function ArtifactPreviewGlyph({ kind }: {
+    kind: ArtifactKind;
+}): import("react").JSX.Element;
+/**
+ * Who can open an artifact, as its card says it: only its owner (and those
+ * they shared it with by name, which the owner alone sees), people it is
+ * shared with, or the whole company.
+ */
+export type ArtifactAccess = 'private' | 'shared' | 'company';
 export type ArtifactCardSize = 'card' | 'compact';
 export interface ArtifactCardLabels {
     kinds: Record<ArtifactKind, string>;
@@ -19,7 +36,12 @@ export interface ArtifactCardLabels {
     version: (version: number) => string;
     changes: (count: number) => string;
     present: (count: number) => string;
+    /** The change's time, opening the line: "Edited" before "4m ago". */
     updated: string;
+    /** Who can open it, said to assistive technology beside its glyph. */
+    access: Record<ArtifactAccess, string>;
+    /** Who made it, after the time: "by Maya". */
+    by: (name: string) => string;
 }
 export interface ArtifactCardProps {
     title: string;
@@ -31,9 +53,14 @@ export interface ArtifactCardProps {
      * Never a screenshot. The kind's glyph stands in when there is none.
      */
     preview?: ReactNode;
+    /** Who owns it. Leave it out where the reader is the owner and saying so would only repeat it. */
     owner?: Principal | undefined;
     updatedAt: TimeValue;
-    /** Who made the latest change, when it is worth saying ("Maya"). */
+    /**
+     * Who made the latest change, when it is worth saying ("Maya"): read as
+     * "Updated 4m ago by Maya". Left unsaid where it is the owner, whose name
+     * the line already carries.
+     */
     updatedBy?: string | undefined;
     /** Who has it open now. */
     presence?: readonly AvatarStackMember[] | undefined;
@@ -43,6 +70,17 @@ export interface ArtifactCardProps {
     version?: number | undefined;
     /** The project or task it belongs to, as its key ("OPS", "ENG-412"). */
     project?: string | undefined;
+    /** Who can open it, drawn as a glyph opening the card's line. Left out, nothing is said about it. */
+    access?: ArtifactAccess | undefined;
+    /**
+     * The card's own controls (a More menu), drawn OUTSIDE its link in the
+     * preview's top corner and shown on hover and while focus is inside the
+     * card, so they are reachable by keyboard and never nested in the link.
+     * The `card` size only.
+     */
+    actions?: ReactNode;
+    /** It is in the trash: the preview is drawn faded. */
+    trashed?: boolean | undefined;
     /** `compact` is a row for a narrow rail or a phone, with no preview. */
     size?: ArtifactCardSize | undefined;
     className?: string | undefined;
@@ -51,12 +89,32 @@ export interface ArtifactCardProps {
     labels?: Partial<ArtifactCardLabels> | undefined;
 }
 /**
- * One artifact, as a card in a gallery, a row in a task's rail or an embed.
+ * One artifact, as a card in a gallery or a row in a task's rail.
+ *
+ * THE CARD (`size="card"`) is a gallery's: a large preview of the artifact's
+ * own content on top, the kind's glyph on a badge over the preview's foot,
+ * then the title on one line and one quiet line under it, who can open it
+ * and when it was last edited ("Edited 20h ago"), with the owner named when
+ * the reader is not the owner.
  *
  * THE WHOLE CARD IS ONE LINK, named by the title alone and described by the
  * rest, so a reader moving through a gallery by link hears "Vendor scorecard"
- * and then, if they wait, what it is and who changed it. Nothing inside is a
- * second control: a pin or a menu inside a link is a control nobody can reach
- * without opening the artifact. Those live on the gallery row's own menu.
+ * and then, if they wait, what it is and who changed it. The card's own
+ * controls (`actions`, a More menu) are drawn beside the link rather than
+ * inside it, over the preview's corner, so they are real controls a keyboard
+ * reaches in turn after the link.
+ *
+ * THE COMPACT ROW (`size="compact"`) is a task rail's: the kind's glyph, the
+ * title and the facts, with no preview and no actions.
  */
-export declare function ArtifactCard({ title, kind, href, preview, owner, updatedAt, updatedBy, presence, changes, pinned, version, project, size, className, now, labels, }: ArtifactCardProps): import("react").JSX.Element;
+export declare function ArtifactCard({ title, kind, href, preview, owner, updatedAt, updatedBy, presence, changes, pinned, version, project, access, actions, trashed, size, className, now, labels, }: ArtifactCardProps): import("react").JSX.Element;
+/**
+ * A gallery card while its listing loads: the card's own shape (the preview
+ * at its ratio, the badge over its foot, a title line and a meta line), so a
+ * gallery that arrives replaces each placeholder in place rather than
+ * reflowing the page. Decorative: the host says once what is loading
+ * (`Skeleton`'s `label`, or its own status line).
+ */
+export declare function ArtifactCardSkeleton({ className }: {
+    className?: string | undefined;
+}): import("react").JSX.Element;

package/dist/ArtifactCard/index.d.ts

@@ -1,3 +1,3 @@
 import './ArtifactCard.css';
-export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph } from './ArtifactCard.js';
-export type { ArtifactCardLabels, ArtifactCardProps, ArtifactCardSize, ArtifactKind } from './ArtifactCard.js';
+export { ARTIFACT_KINDS, ArtifactCard, ArtifactCardSkeleton, ArtifactKindGlyph, ArtifactPreviewGlyph } from './ArtifactCard.js';
+export type { ArtifactAccess, ArtifactCardLabels, ArtifactCardProps, ArtifactCardSize, ArtifactKind } from './ArtifactCard.js';

package/dist/ArtifactCard/index.js

@@ -1,11 +1,13 @@
-export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph } from '../chunk-GOSQXEZU.js';
-import '../chunk-4KP4RC3O.js';
+export { ARTIFACT_KINDS, ArtifactCard, ArtifactCardSkeleton, ArtifactKindGlyph, ArtifactPreviewGlyph } from '../chunk-XTOVADJU.js';
+import '../chunk-TEUQWOWZ.js';
+import '../chunk-CI3VPIJN.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-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
+import '../chunk-UDQW6UK7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';