@crewlethq/ui 0.36.0 → 0.37.1

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`, `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) |
+| 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) |
 | 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), `SlideNav` (Previous, the position and Next, with `SLIDE_NAV_LABELS`), `SlideFilmstrip`, `SlideGrid`, `SlideCompare` (with `SLIDE_COMPARE_LABELS`), `PresenterView` (with `formatStopwatch`) |
@@ -204,6 +204,46 @@ 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.37.1
+
+### Sheets
+
+**`SheetGrid`'s Add column fits the header's end.** Its track was the 24px pointer-target floor, narrower than the small icon button it holds (26px at the normal density, more at comfortable), so the square filled the track edge to edge and pushed it wider. The track is now the button's square plus a 4px inset on each side, at every density, and the plus is drawn at the button's own glyph size.
+
+**`SheetGrid` with Add column no longer scrolls sideways by a few pixels.** The grid was held to the scroller's width less an assumed width for the Add column control, so it overflowed by however much wider the control drew (2px at the default density), and the platform drew a horizontal scrollbar under a sheet with room to spare. The grid now grows into whatever room the control leaves.
+
+**`fit="content"` makes room for a horizontal scrollbar.** Sized exactly to its rows, a sheet wider than its box lost the scrollbar's height to it wherever the platform draws scrollbars in the layout, and scrolled down by that much as well. The grid measures the bar and adds its height, so a wide, short sheet scrolls sideways only.
+
+**A `LivePreview` still copy draws no scrollbar,** and nor does the live layer it is copied from. A copy of a box that scrolled (a sheet wider than its card) is a picture of its first view, and its scrollbar sat across the card as a stray band; with none in the live layer either, a sheet there leaves no room for one under its rows.
+
+### Focus
+
+**Focus handed back after a pointer press draws no ring.** A trigger focused again when its palette, menu, listbox or popover closes matched `:focus-visible`, because the field inside always did, so a palette opened with a click and closed with Escape left the sidebar's search box ringed. `returnFocus(el)` (exported with `FOCUS_RETURNED_ATTRIBUTE`) focuses the element and marks it until it blurs, and the base stylesheet in `@crewlethq/tokens` keeps the ring off a marked element while the modality is the pointer's. A key pressed afterwards brings it back. The modal stack, `Menu`, `Popover`, `Select`, `Switcher`, `Canvas`'s zoom field and `ArtifactBar`'s rename all hand focus back through it.
+
+**A shortcut outside a field is the keyboard** (`trackFocusModality`). Cmd+K or Ctrl+K opens the palette, so closing it with Escape rings whatever focus returns to. Inside a field a shortcut is still neither, since it is copy, paste or undo.
+
+**The palette's search field draws no ring under the pointer either.** Every field's pointer narrowing now matches the modality inside `:where()`, so it narrows a ring and never outranks a variant's own. Matched bare, it beat `Input`'s command variant and drew a square accent hairline round the palette's borderless field.
+
+### Hit areas
+
+**The rows of a list meet at their targets.** A list draws its rows a step apart, and the gap between two rows used to belong to no row: a pointer crossing a list slowly met the list itself there, so the hand turned into the arrow and the hover fill went out between every two rows and came back on the next, which reads as the cursor flickering. Measured on the sheet create page's "Start from" list, a slow pass down it switched the cursor 14 times and crossed six dead strips of 4px; it now switches twice, on entering and leaving. Each row reaches half the gap on each side with an empty `::after`, so the drawn spacing is unchanged and the targets meet in the middle of the gap. The reach is `HIT_AREA_CLASS` (`HitArea.css`), set on the row from the gap its list is laid out with as `--crewlet-hit-area-block` and `--crewlet-hit-area-inline`, measured from the row's padding edge. `ChoiceList` (with the answer after a dashed rule reaching up across it, and a row with its panel open reaching nothing downward), `SidebarNav`'s rows and nested rows, the rail foot's `AppShellRailRow` and `AccountRow`, `ArtifactMakeRow`'s tray, `Tabs` in every variant, `SegmentedControl`, `Select`'s and `Combobox`'s options, `DatasetSourceList`'s entries and the command palette's scopes take it. A list of an application's own takes it the same way (Foundations / Hit areas). No scroller grows: the reach stays inside each list's padding, and a scrolling row of tabs reaches nothing past its first and last tab.
+
+## Changes in 0.37.0
+
+### An artifact list with an identity
+
+**`ArtifactNameCell` names an artifact in a list.** The kind's glyph on the kind's tint (the Make row's tile at a list's size, so a doc started from the tray is found in the list by the same mark in the same colour), the title, and under it the kind's word and the artifact's description (`detail`) on one quiet line, each cut on one line with the whole of it on hover. The kind is printed, so a list needs no Type column of its own. Under the pointer the row's ground moves and the mark's hairline takes the kind's hue; nothing lifts. `pinned` draws and says a pin, and `trashed` draws the mark without its tint. Every word is in `labels`.
+
+**`ArtifactAccessLabel` says who can open an artifact** as its glyph and a word: Private, Shared or Company (`ARTIFACT_ACCESS_LABELS`), or the caller's own `label` and `title`. Access is a fact about reach, never a status, so it takes no colour: the word is a step stronger where others can open it. The glyphs are `ArtifactAccessGlyph`, which `ArtifactCard` now draws its access with too, and the `ArtifactAccess` type has moved to this module (the card's subpath still exports it).
+
+### Previews
+
+**`PreviewScale` fills a box with `fit="fill"`.** The content covers the box edge to edge, centred across and held at the top, wherever that leaves at most a fifth of it outside the box (`PREVIEW_FILL_MAX_CUT`), and is contained whole otherwise. A design's laptop board (16:10) in a gallery card (16:9) was contained, which left an empty strip down each side of the card; filled, it reaches both sides and loses a tenth of its foot. A phone's board is still shown whole. `PreviewFit` names the three fits.
+
+### Wording
+
+**The gallery's tray is "Start a new artifact"** in the stories, the tests and the notes on `ArtifactMakeRow` and `ArtifactKindTile`, where it was "Make something new".
+
 ## Changes in 0.36.0
 
 ### New on a create page and in the gallery

package/dist/AgentHandoffPanel/index.js

@@ -1,16 +1,16 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-EOQFPZEE.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-YSG3DW7W.js';
 import '../chunk-AUQPBL4O.js';
 import '../chunk-3TFDQLW3.js';
 import '../chunk-MICH6QSJ.js';
-import '../chunk-RH2NCQBZ.js';
+import '../chunk-ISA2O2BK.js';
 import '../chunk-Y5BD4MTE.js';
-import '../chunk-IUYUS2SO.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-YSGLEHND.js';
 import '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AppShell/index.d.ts

@@ -1,3 +1,4 @@
+import '../HitArea/HitArea.css';
 import './AppShell.css';
 export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from './AppShell.js';
 export { AccountRow } from './AccountRow.js';

package/dist/AppShell/index.js

@@ -1,9 +1,11 @@
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-PGZ2R3ON.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-HDHZWIFL.js';
 import '../chunk-RTPQDNW3.js';
-import '../chunk-BUVCV3WI.js';
+import '../chunk-D6FEHY5G.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

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

@@ -146,10 +146,11 @@
 /* The same gutter the nav takes, so what the foot says lines up with the rows
    above it rather than sitting further out. */
 .crewlet-app-shell__rail-foot {
+  --crewlet-rail-foot-gap: var(--spacing-1);
   flex: none;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-1);
+  gap: var(--crewlet-rail-foot-gap);
   padding: var(--spacing-2) var(--size-nav-gutter);
   border-top: 1px solid var(--color-border-default);
 }
@@ -209,6 +210,10 @@
 
 .crewlet-app-shell__rail-row--action,
 .crewlet-app-shell__rail-foot > .crewlet-btn {
+  /* Half the foot's gap to each neighbour, so the rows' targets meet
+     (HitArea.css), across the row's 1px border; the account row below
+     reaches back the same way. */
+  --crewlet-hit-area-block: calc(var(--crewlet-rail-foot-gap, 0px) / 2 + 1px);
   cursor: pointer;
   transition:
     background var(--motion-duration-fast) var(--motion-easing-default),
@@ -635,11 +640,12 @@
  * the controls off the rail.
  */
 .crewlet-account-row {
+  --crewlet-account-row-pad: var(--spacing-1);
   display: flex;
   align-items: center;
   gap: var(--spacing-1);
   min-width: 0;
-  padding: var(--spacing-1) 0;
+  padding: var(--crewlet-account-row-pad) 0;
 }
 
 .crewlet-account-row__who {
@@ -656,6 +662,12 @@
   transition: background var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+/* In the rail's foot, the account row reaches up across its own padding to
+   half the foot's gap, to meet the row above (HitArea.css). */
+.crewlet-app-shell__rail-foot .crewlet-account-row__who {
+  --crewlet-hit-area-block-start: calc(var(--crewlet-rail-foot-gap) / 2 + var(--crewlet-account-row-pad));
+}
+
 /* The row as the reader's menu button: a button drawn as the link is. */
 button.crewlet-account-row__who {
   width: 100%;

package/dist/ArrangeList/index.js

@@ -1,11 +1,11 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-27GD7LVR.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-ZMWXE4GT.js';
 import '../chunk-A722MUNR.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-PJIPUEJ3.js';
-import '../chunk-IUYUS2SO.js';
-import '../chunk-YSGLEHND.js';
+import '../chunk-AXS6MBNH.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactAccess/ArtifactAccess.d.ts

@@ -0,0 +1,40 @@
+import { type GlyphSize } from '@crewlethq/icons/glyphs';
+/**
+ * Who can open an artifact: 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';
+/** Every access, from the narrowest to the widest. */
+export declare const ARTIFACT_ACCESSES: readonly ["private", "shared", "company"];
+/**
+ * What each access is called where there is room for a word: a list's column,
+ * a card's hover text. Short, because a column of them is read down.
+ */
+export declare const ARTIFACT_ACCESS_LABELS: Readonly<Record<ArtifactAccess, string>>;
+/**
+ * The glyph an access is drawn with, wherever it is drawn: a lock, people or
+ * the company's building. Decorative: whatever draws it says the word too,
+ * printed or for assistive technology.
+ */
+export declare function ArtifactAccessGlyph({ access, size }: {
+    access: ArtifactAccess;
+    size?: GlyphSize | undefined;
+}): import("react").JSX.Element;
+export interface ArtifactAccessLabelProps {
+    access: ArtifactAccess;
+    /** The word printed beside the glyph. The design system's short word by default. */
+    label?: string | undefined;
+    /** The hover text, where the word is not the whole story: "Shared with 3 people". */
+    title?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * Who can open an artifact, as a glyph and its word: a list's Access column.
+ *
+ * QUIET FOR PRIVATE, A STEP UP FOR SHARED. The glyph is the tertiary step,
+ * and an artifact others can open prints its word a step stronger than one
+ * nobody else sees, so a column read down picks out what is shared without
+ * a hue: access is a fact about reach, never a status, and takes no colour.
+ */
+export declare function ArtifactAccessLabel({ access, label, title, className }: ArtifactAccessLabelProps): import("react").JSX.Element;

package/dist/ArtifactAccess/index.d.ts

@@ -0,0 +1,3 @@
+import './ArtifactAccess.css';
+export { ARTIFACT_ACCESSES, ARTIFACT_ACCESS_LABELS, ArtifactAccessGlyph, ArtifactAccessLabel } from './ArtifactAccess.js';
+export type { ArtifactAccess, ArtifactAccessLabelProps } from './ArtifactAccess.js';

package/dist/ArtifactAccess/index.js

@@ -0,0 +1,2 @@
+export { ARTIFACT_ACCESSES, ARTIFACT_ACCESS_LABELS, ArtifactAccessGlyph, ArtifactAccessLabel } from '../chunk-BGLKLXL3.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ArtifactAccess-Y53ZTRFS.css

@@ -0,0 +1,31 @@
+/*
+ * An artifact's access as a glyph and its word. No colour of its own: the
+ * glyph is the tertiary step and the word the secondary, one step stronger
+ * where others can open it.
+ */
+
+.crewlet-artifact-access {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing-1) * 1.5);
+  min-width: 0;
+  max-width: 100%;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-access__glyph {
+  display: inline-flex;
+  flex: none;
+}
+
+.crewlet-artifact-access__word {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-artifact-access--shared,
+.crewlet-artifact-access--company {
+  color: var(--color-text-secondary);
+}

package/dist/ArtifactBar/index.js

@@ -1,17 +1,19 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-APDKUGSH.js';
-import '../chunk-WKEPORNM.js';
-import '../chunk-6ZJ3N7QI.js';
-import '../chunk-CCAXYHQS.js';
-import '../chunk-VL6CUNSX.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-S27UBCVX.js';
+import '../chunk-4ISUIS6F.js';
+import '../chunk-2QZ2VPHR.js';
+import '../chunk-7SDUKCNW.js';
 import '../chunk-RKKO7QHH.js';
+import '../chunk-I33UIUZD.js';
 import '../chunk-ILDNJHRU.js';
 import '../chunk-CE2THTQR.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-BUVCV3WI.js';
+import '../chunk-D6FEHY5G.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactCard/ArtifactCard.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type ArtifactAccess } from '../ArtifactAccess/index.js';
 import { type ArtifactKind } from '../ArtifactKindGlyph/index.js';
 import { type AvatarStackMember } from '../Avatar/index.js';
 import { type Principal } from '../Principal/index.js';
@@ -14,12 +15,6 @@ import { type TimeValue } from '../RelativeTime/index.js';
 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>;

package/dist/ArtifactCard/index.d.ts

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

package/dist/ArtifactCard/index.js

@@ -1,13 +1,14 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-OSZDHN5Z.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-OHA6WSAG.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-MJW6SQYB.js';
+import '../chunk-UBZDYOCA.js';
 import '../chunk-5QXRI35B.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
+import '../chunk-BGLKLXL3.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-CE2THTQR.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/ArtifactCover/index.js

@@ -1,5 +1,5 @@
-export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-JQLS3MZB.js';
-import '../chunk-P6WFZDKS.js';
+export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-FWBKMPNR.js';
+import '../chunk-PWG3VHRQ.js';
 import '../chunk-CE2THTQR.js';
-import '../chunk-YSGLEHND.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactKindIllustration/ArtifactKindIllustration.d.ts

@@ -65,7 +65,7 @@ export interface ArtifactKindTileProps {
  * One kind, or one starting point of a kind, as a tile: the kind's drawing on
  * its tinted ground (or the starting point's own `face`), framed, with its
  * name under it, such as a create page's starting layouts. The whole tile is
- * one link or button named by the name. The gallery's Make something new row
+ * one link or button named by the name. The gallery's "Start a new artifact" row
  * is the quieter `ArtifactMakeRow`, a toolbar of glyphs rather than pictures.
  *
  * A TILE THAT CANNOT START is still a stop on the row, so a reader moving

package/dist/ArtifactKindIllustration/index.js

@@ -1,3 +1,3 @@
-export { ArtifactKindGround, ArtifactKindIllustration, ArtifactKindTile } from '../chunk-MJW6SQYB.js';
+export { ArtifactKindGround, ArtifactKindIllustration, ArtifactKindTile } from '../chunk-UBZDYOCA.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ArtifactKindIllustration-5KTP43QS.css → ArtifactKindIllustration-KLFL7KBG.css}

@@ -1,5 +1,5 @@
 /*
- * A kind's drawing, its tinted ground and the Make something new tile.
+ * A kind's drawing, its tinted ground and the "Start a new artifact" tile.
  *
  * Every colour is the kind's token, `--color-artifact-kind-<kind>` and its
  * Fill and Line steps, set once per kind on `--crewlet-kind-*`

package/dist/ArtifactMakeRow/index.d.ts

@@ -1,3 +1,4 @@
+import '../HitArea/HitArea.css';
 import '../ArtifactKindIllustration/ArtifactKinds.css';
 import './ArtifactMakeRow.css';
 export { ArtifactMakeRow } from './ArtifactMakeRow.js';

package/dist/ArtifactMakeRow/index.js

@@ -1,4 +1,5 @@
-export { ArtifactMakeRow } from '../chunk-66ADEPFB.js';
+export { ArtifactMakeRow } from '../chunk-NS4NSHVX.js';
 import '../chunk-CE2THTQR.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ArtifactMakeRow-RWUTS5MC.css → ArtifactMakeRow-W3RD5YWZ.css}

@@ -1,5 +1,5 @@
 /*
- * The Make something new tray.
+ * The "Start a new artifact" tray.
  *
  * Every colour is a token: the tray's ground, its dots and its hairlines are
  * the surface and border steps, and each kind's mark reads the kind's own
@@ -26,9 +26,10 @@
 }
 
 .crewlet-make-row__list {
+  --crewlet-make-row-gap: var(--spacing-1);
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--spacing-1);
+  gap: var(--crewlet-make-row-gap);
   margin: 0;
   padding: var(--spacing-1);
   list-style: none;
@@ -53,6 +54,10 @@
   color: var(--color-text-primary);
   text-decoration: none;
   outline: none;
+  /* Half the gap to each neighbour, so the targets meet (HitArea.css), and
+     the 1px border the reach is measured inside of. */
+  --crewlet-hit-area-block: calc(var(--crewlet-make-row-gap) / 2 + 1px);
+  --crewlet-hit-area-inline: calc(var(--crewlet-make-row-gap) / 2 + 1px);
   transition:
     background-color var(--motion-duration-fast) var(--motion-easing-out),
     border-color var(--motion-duration-fast) var(--motion-easing-out),

package/dist/ArtifactNameCell/ArtifactNameCell.d.ts

@@ -0,0 +1,37 @@
+import { type ArtifactKind } from '../ArtifactKindGlyph/index.js';
+export interface ArtifactNameCellLabels {
+    kinds: Record<ArtifactKind, string>;
+    pinned: string;
+}
+export interface ArtifactNameCellProps {
+    kind: ArtifactKind;
+    title: string;
+    /**
+     * What it is about, in a line under the title after the kind's word: the
+     * artifact's own description. Left out, the kind's word stands alone.
+     */
+    detail?: string | undefined;
+    pinned?: boolean | undefined;
+    /** It is in the trash: its mark is drawn without its kind's tint. */
+    trashed?: boolean | undefined;
+    className?: string | undefined;
+    labels?: Partial<ArtifactNameCellLabels> | undefined;
+}
+/**
+ * An artifact's name in a list: its kind's glyph on the kind's tint, the
+ * title, and under it the kind's word and what it is about.
+ *
+ * THE SAME MARK AS THE MAKE ROW'S, so a reader who started a doc from the
+ * tray finds it in the list by the same tile in the same colour, and the
+ * grid's badge and the list's mark name one kind one way. The mark is the one
+ * coloured thing on the row; the words are the text steps.
+ *
+ * TWO LINES, ONE NAME. The title is the row's name and the line under it is
+ * its description, each cut on one line with the whole of it on hover, so a
+ * list of long titles keeps one row height. The kind's word is printed rather
+ * than only drawn, which is what lets the list drop a Type column of its own.
+ *
+ * Not a link: the row it sits in is. The mark is decorative because the kind
+ * is printed beside it.
+ */
+export declare function ArtifactNameCell({ kind, title, detail, pinned, trashed, className, labels }: ArtifactNameCellProps): import("react").JSX.Element;

package/dist/ArtifactNameCell/index.d.ts

@@ -0,0 +1,4 @@
+import '../ArtifactKindIllustration/ArtifactKinds.css';
+import './ArtifactNameCell.css';
+export { ArtifactNameCell } from './ArtifactNameCell.js';
+export type { ArtifactNameCellLabels, ArtifactNameCellProps } from './ArtifactNameCell.js';

package/dist/ArtifactNameCell/index.js

@@ -0,0 +1,4 @@
+export { ArtifactNameCell } from '../chunk-P5VGSVWG.js';
+import '../chunk-CE2THTQR.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ArtifactNameCell-RTVP4LO4.css

@@ -0,0 +1,104 @@
+/*
+ * An artifact's name in a list: the kind's mark on its tint, the title over
+ * one quiet line. Every colour is a token: the mark reads the kind's own Fill,
+ * Line and Ink (`ArtifactKinds.css`), the words the text steps.
+ */
+
+.crewlet-artifact-name {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-width: 0;
+  max-width: 100%;
+  padding-block: var(--spacing-1);
+}
+
+/* THE MARK, the Make row's tile at a list's size: the kind's glyph on its
+   tint inside the kind's hairline. */
+.crewlet-artifact-name__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  box-sizing: border-box;
+  border-radius: var(--radius-md);
+  background: var(--crewlet-kind-fill);
+  box-shadow: inset 0 0 0 1px var(--crewlet-kind-line);
+  color: var(--crewlet-kind-ink);
+  transition: box-shadow var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+/* UNDER THE POINTER the row's ground moves (the row's own hover), and the
+   mark's hairline takes the kind's hue, so the one coloured thing on the row
+   answers too. No lift and no movement: a list is read down, not played. */
+:is(tr, [role='row']):hover .crewlet-artifact-name__mark {
+  box-shadow: inset 0 0 0 1px var(--crewlet-kind-hue);
+}
+
+.crewlet-artifact-name--trashed .crewlet-artifact-name__mark {
+  background: var(--color-surface-inset);
+  box-shadow: inset 0 0 0 1px var(--color-border-default);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-name__words {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-artifact-name__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-artifact-name__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.35;
+}
+
+.crewlet-artifact-name__pin {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-name__detail {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-1);
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: 1.35;
+}
+
+.crewlet-artifact-name__kind,
+.crewlet-artifact-name__dot {
+  flex: none;
+}
+
+.crewlet-artifact-name__about {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-artifact-name__mark {
+    transition: none;
+  }
+}

package/dist/AvatarPicker/index.js

@@ -1,14 +1,16 @@
-export { AvatarPicker } from '../chunk-GYBDPCRC.js';
-import '../chunk-SUXP4OBT.js';
-import '../chunk-K3IJQNB7.js';
+export { AvatarPicker } from '../chunk-ECGGQX2H.js';
+import '../chunk-F4LPQA4E.js';
+import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-YEVG2X5R.js';
-import '../chunk-CCAXYHQS.js';
-import '../chunk-VL6CUNSX.js';
+import '../chunk-2QZ2VPHR.js';
+import '../chunk-7SDUKCNW.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-2YTOOH3A.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Canvas/index.js

@@ -1,10 +1,11 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-4BYHAOHH.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-DAERKOOG.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-6ZJ3N7QI.js';
+import '../chunk-I33UIUZD.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CanvasBoard/index.js

@@ -1,14 +1,15 @@
-export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-FHHYXZSP.js';
+export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-C7OKDYBH.js';
 import '../chunk-5SZGKSGL.js';
-import '../chunk-7VAUGG6B.js';
-import '../chunk-PGRPNDWM.js';
-import '../chunk-4BYHAOHH.js';
+import '../chunk-B5UHX5UC.js';
+import '../chunk-NR4CPM4T.js';
+import '../chunk-DAERKOOG.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-6ZJ3N7QI.js';
+import '../chunk-I33UIUZD.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';