@crewlethq/ui 0.35.1 → 0.37.0

package/README.md

@@ -54,7 +54,7 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | Arranging a page | `ArrangeBoard`, `ArrangeGrid`, `ArrangeFrame` (with `useGridResize`), `ArrangeGroup`, `ArrangeList`, and the reorder hooks under them (`useReorder`, `useReorderLists`, `moveKey`) |
 | Application shell | `AppShell` with `AppShell.Rail`, `AppShell.Topbar`, `AppShell.AccountRow` and `useAppShell`, `AuthLayout`, `SidebarNav` and `NavItem`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen`, `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,95 @@ 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.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
+
+**`AgentHandoffPanel` hands the work to an agent beside what is being made.** A create page is the direct way to make something; asking an agent is a panel at its side rather than a mode that swaps the page for a form, so a person can lay out a slide, ask, and lay out another. It is an `ArtifactPanel` (titled "Ask an agent"), so inside an `ArtifactWorkspace` it is a column where there is room, a drawer over the page's end where there is not, and the screen on a phone. Top to bottom: an `intro` line, the brief (a `Composer` with its visible `briefLabel`, `briefPlaceholder`, `briefHelper` and `briefMaxLength`), `starters` offered as one-press chips while the brief is empty (`onStarter`), the kind's own fields (`children`), **Who builds it** (`agent`, the host's picker), **Goes with it** (`carried`: what the reader already made, each with an icon, a label and a detail) with the task exactly as it is filed behind a disclosure (`task`), and **What happens next** (`steps`, a `Timeline`). A `notice` (a refusal) sits above the commit. The commit is the panel's foot (`send`: its label, the chosen agent's picture as `media`, `busy` and `disabledReason`), always in reach however far the panel scrolls; a held send says why in words beside the button as well as in its tooltip, and the picture is hidden from the button's name. Command+Enter from any field in the panel sends, and the press is answered there, so a page-wide shortcut behind the panel never also fires. Every heading and label is in `labels` (`AGENT_HANDOFF_LABELS`).
+
+**An artifact panel takes a `footer`** (`ArtifactPanel`): what stays under the body however far it scrolls, on a hairline at the panel's foot and outside the scrolling body, such as a hand-off's Send. A panel without one is unchanged.
+
+**`ArtifactMakeRow` is the gallery's Make something new row, a quiet tray rather than a row of pictures.** Each kind is its glyph on the kind's own tint, its name and a few words on what it is for (`detail`), the whole item one link named by the kind with the words as its description; with `disabledReason` an item stays a focusable stop that says why it cannot start one. The tray is Crewlet's dotted field in a hairline ring, and an item lifts off it as a card under the pointer while nothing inside it moves. It lays itself out by its own width: under 560px three across in two lines, each mark over its name; from 560px the six in one line, still mark over name, so a long name is never cut; from 920px the mark beside the name with what the kind is for under it. At 1440 the row is 52px tall where the tiles were 166px. `ArtifactKindTile` stays, for a create page's starting points.
+
+### Chosen options and focus
+
+**A chosen option is calm, and the focus ring is the one accent line on a page.** Two tokens name what a chosen option draws: `--color-border-selected`, the accent at 0.6 (the full accent in a high-contrast theme), so a tint mixed toward its ground, and `--color-surface-selected`, the soft fill. Every component that marks a pick takes them, at one pixel, and pairs them with a mark of its own that clears 3:1, so the state never rests on the tint:
+
+- `ThemeGallery`: the chosen card's edge is the selected edge over the selected fill, and a check stands beside its name. It was a full accent border.
+- `SlideFilmstrip` and `SlideGrid`: the slide being edited keeps its one-pixel edge in the selected edge, with the selected fill as a 3px band outside it, and its number in the accent ink. It was a 2px ring in the full accent, the focus ring's weight and colour.
+- `DatasetSource`: an open source is one card. The selected edge rings the whole entry, its preview included, over the selected fill on its summary, which is the card's head; the preview is a well under it on the inset ground, parted from the head by one line in the same edge, so the settings and figures it shows read as the entry's own rather than as loose items of the rail. It was the full accent around the summary alone. Selected without a preview it is the selected edge and fill around the summary; closed, it is unchanged.
+- `ChoiceList` and `LayersList`: the picked row stands on the selected fill. A layer used to take the accent rail of a current row (the outline's heading, the page in the rail), which beside a canvas read as a second selection; the rail's room is kept, and forced colours draw it in `Highlight`.
+- `SlideFilmstrip`'s focus ring grows outward from the thumbnail's edge. It sat on the inset offset, inside the thumbnail, where a dark slide swallowed it and tabbing through the strip showed nothing.
+- `Card`: a chosen card (`selected`) takes the selected edge over the selected fill, laid over its own surface. It was the full accent border under `--shadow-selection`, a second 2px accent ring.
+- `ArtifactKindTile`: a tile that is a button takes `selected` (announced as a pressed button): the selected edge on its frame over the selected fill, and a check beside its name. Its ground no longer draws a tinted inner line, which with the frame's edge and the focus ring read as three nested rings; the frame is the tile's one edge.
+- `ArrangeFrame`: the block under the pointer, or holding focus in one of its fields, takes the selected edge; the block itself in keyboard focus takes a 2px focus ring (it was one pixel); a picked or resizing block keeps one crisp pixel of the accent.
+- `FilterChip`: a pressed chip stands on the selected fill, keeping its lighter line and the accent ink.
+- `ChoiceList`: the radio is drawn rather than the platform's, an empty ring on the control boundary until chosen and an accent dot when it is, because the platform's dark radio filled every unchosen answer with a grey disc that read as a second choice; forced colours hand it back to the platform. A tag ("Suggested") is set in the tertiary ink, no longer a second accent mark on the chosen row.
+- `SlideFilmstrip`'s thumbnails take the strong line at rest and its hover step under the pointer: on the dark page the plain hairline left a strip of dark slides with no edges.
+- `CanvasBoard`: hover is one screen pixel of the selected edge, and a pick one crisp pixel of the full accent with its four corners. It was two pixels, so a picked board and the live board ([data-active], which keeps the 2px focus ring) read alike.
+
+**A field rings at 2px for the keyboard and at its own hairline for a pointer.** `trackFocusModality` (and `useFocusModality`, exported with `FOCUS_MODALITY_ATTRIBUTE`) writes `data-crewlet-focus="keyboard" | "pointer"` on the root: Tab, or any key pressed outside a text-entry control, is the keyboard, a pointer press is the pointer, and typing in a field is neither. Every field (`Input`, `Textarea`, `Select` and its search box, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `Composer`, `DocumentTitleField`) starts it while mounted, and an application may call `trackFocusModality()` at boot so the first key a reader presses is seen before any field mounts. A boxed field's ring is now 2px in `--color-focus` over its boundary, the area WCAG 2.2's focus appearance asks of a keyboard indicator, and where a pointer put the caret it narrows to one pixel in `--color-border-selected`, so a page that focuses its first field on load no longer rings it in the focus colour before anybody has touched a key. A refused field keeps its danger colour under either. A document that tracks nothing keeps the 2px ring. `Input.test.tsx` holds every boxed ring to one narrowing rule. `SourceEditor` rings as a field does too, in place of its accent border and soft halo.
+
+**`Composer` rings as a field does.** Its box takes the field ring above, keyed on the field so tabbing onto the send action shows that button's ring. It used to recolour its border to the accent and lay a 2px soft halo outside it: two highlights for one state.
+
+**A composer's footer is drawn only with something in it** (`Composer`). With no send shortcut, counter or actions there is no strip under the field, and a footer holding only the shortcut's hint goes on a phone, where the hint is not drawn, instead of leaving an empty strip. A footer with actions or a counter stays on every width.
+
+### Titles
+
+**`DocumentTitleField` wraps.** It is a textarea of one row that grows with the title, so a long title, or a long example in its placeholder, wraps on a phone as the title it becomes does, where the input it replaced cut it mid-word. It is still one line of text: Enter inserts nothing (its keydown reaches the caller and the page as an input's does, and in a form with a submit button it submits, as an input's Enter does), a pasted, dropped or autofilled line break becomes a space before `onChange` reads the value, and it is named to assistive technology as a single-line field (`aria-multiline="false"`). It forwards a ref to the textarea. A caller that typed its handlers or ref for `HTMLInputElement` types them for `HTMLTextAreaElement`.
+
+**`DocumentTitleField` underlines in a tint for a pointer and in two focus pixels for the keyboard.** The line along its foot is one pixel (the hairline under the pointer, the selected edge once a click has put the caret in it), and two pixels in the focus colour for the keyboard, drawn as the border and a shadow under it with a transparent outline that forced colours paint. The padding takes the pixel the border no longer reserves, so the title sits where it did. A page that focuses its title on load no longer draws a 2px accent bar under it before anybody has touched anything.
+
+### Live previews
+
+**A live preview is a snapshot: rendered once, then a still copy with nothing live behind it** (`LivePreview`). Scrolling a gallery up and down tore every card down as it left and drew it again from its stand-in as it came back, so the kind's drawing flickered over content the reader had just seen, and every redraw read its data again. Now the content renders once, out of sight behind the stand-in; when it calls `useLivePreview().ready()` and the page's fonts have loaded, what it drew is copied (its DOM, cloned: a canvas as an image of what it drew, and nothing that would load again, such as a frame, a video or an embedded object), the copy fades in over the stand-in, which is hidden only once the fade is done (fading both at once showed a double exposure), and the content is unmounted in the same commit. From then on the preview holds no React tree, query, subscription, observer of its own or timer, and it never reads, polls or redraws again; nothing inside a copy animates. A copy laid out at `width` is rescaled when its box changes size by one ResizeObserver the provider shares; one with no `width` is drawn again only if its box changes size. A render that has not drawn within `LIVE_PREVIEW_RENDER_MS` (15 seconds, past the ten a framed page is given to answer) gives up and keeps its stand-in.
+
+**A snapshot is kept by key for the provider's life** (`snapshot`, new). Previews under one `LivePreviewBudgetProvider` with the same key share one copy, so a card mounted again (a filter, a change of shape, a page of results) shows it at once with nothing read or rendered, and no fade. A key names a version of the content: a new key is a new snapshot, and a provider mounted afresh (the page loaded again) takes new ones. The provider keeps up to `LIVE_PREVIEW_STILLS_KEPT` copies (200, four pages of a listing at fifty; `kept` changes it), the one used longest ago dropped first. A preview that failed is remembered under its key too. `createLivePreviewStills` is the store, exported for a host that measures.
+
+**A frame is kept, not copied** (`frame`). A page in a frame lives in another document, which nothing can clone and a clone of the frame would load again, so a framed preview keeps its frame once drawn and fades it in. Kept frames are capped apart (`LIVE_PREVIEW_MAX_FRAMES`, twelve, the pages a design's canvas runs at once): one the reader has left is parked, and taken back only when a frame coming near needs its place, the one left longest ago first; one on screen is never taken back for another.
+
+**The budget bounds renders at once, six by default** (`LIVE_PREVIEW_MAX`, from twelve). A slot is held only while content renders, and given to the next box the moment the content says it has drawn, so six is enough for any gallery: six is the number of connections a browser opens to one host over HTTP/1.1, which is how a preview's reads reach their server, so a seventh render would only queue behind them. `LivePreviewBudgetProvider` takes `maxFrames` and `kept` beside `max`.
+
+**A preview starts a screen ahead** (`LIVE_PREVIEW_MARGIN`, `'100% 0px'`, from `'200px 0px'`). A snapshot costs nothing once taken, so drawing a screen ahead in each direction is paid once and lets a reader scrolling at any pace meet every card already drawn.
+
+Measured on a gallery of 44 cards at 1440 by 900, scrolling down and back at reading pace, in flings, then to the foot and twice over again, against 0.36.0's earlier preview (a parked slot and a still copy only on reclaim): visible cards drawn again after they had drawn stayed at 0; cards seen before their first draw fell from 18 samples to 0 (from about 50 to 0 with the CPU slowed fourfold); teardowns of a drawn card fell from 93 to 0; requests and socket questions after every card had drawn fell from 7 and 2 to none, and over the whole visit from 106 and 27 to 57 and 12, every board, dataset and sheet read exactly once; long tasks at fourfold slowdown fell from about 40 (2.4 seconds in all) to 2 (150 milliseconds); the heap after the visit from 15.1 to 13.7 MB and the document's nodes from 6,356 to 5,994. The first screen draws within about 15 milliseconds of the time it took before (about 70 with the CPU slowed fourfold).
+
+**A preview's margin is measured against its scroll container.** The observer was rooted at the window, and a page that scrolls inside a frame clips its content at the frame's edge, so `rootMargin` never applied and every card started drawing only once it was on screen. It now observes against the nearest ancestor that scrolls.
+
+**`createLivePreviewBudget().request` answers a slot** (`LivePreviewSlot`: `release`, `drawn`, `park` and `resume`) in place of a give-back function, and takes the holder's `reclaim` and whether it is a `frame`. `drawn()` ends a render: it gives a page's slot back for good and keeps a frame among the frames. A host that called the answer to give a slot back calls `release()`.
+
+### Artifact kit
+
+**A kit sheet reads the page's capabilities again once the runtime's handshake lands** (`@crewlethq/artifact-kit`: `<crewlet-sheet>`, `mountSheet`). Before the handshake the runtime answers `capabilities.has` from what the origin told it as the page loaded, and from the handshake on the host's word is the authority. The sheet read the answer once, when it was first drawn, and kept it, so a sheet drawn on one answer and handed another by the handshake kept the first: a page whose host said `db` at the handshake could still show "This sheet cannot load" for good. The sheet now reads the declaration again when `ready` resolves, its subscriptions following what it reads, and says a page has no datastore only once the handshake has said so; before then it draws nothing. `mountSheet` and the element still wait for the handshake before they draw, so a page sees no change unless a host's handshake disagrees with what its page loaded with.
+
+### Smaller fixes
+
+**A framed slide keeps its edge on the dark theme** (`SlideStage` with `framed`). The slide's outline takes `--color-border-strong` rather than `--color-border-default`. On the dark theme the default border is a step off the page, so a dark slide (most themes are dark) on a dark page drew no edge and read as a hole in the page; the strong border is the third step of the ramp and clears the page in both themes. Hosts that recolour the outline for a marked stage are unchanged.
+
+**An artifact bar's status is quiet by default** (`ArtifactBar`'s `status`). Plain words handed to it ("Creating…", "25 words", "4 slides · Nightshade") are drawn in the compact step and the secondary ink, with tabular figures, as `EditingStatus` draws itself, rather than at the bar title's size and ink. A host that styled its own status span for this can drop the span; one that wants a stronger status passes an element with its own colour.
+
+**An option with a detail starts at its top** (`ChoiceButtons`). Laid out as tiles by a host's grid, the options in one row stretch to the tallest, and centred text set a label with a one-line detail lower than its neighbour with a two-line one. An option that has a detail now aligns its label, detail and mark to its top edge, so every label in a row starts on one line. An option without a detail, and a column of options, look as they did.
+
+**A narrow board keeps a readable name** (`CanvasBoard`). A name with too little room above its board is shortened to at least three letters and an ellipsis; a board narrower than that is called by its number in the design ("3"), and only a board narrower than a digit goes unnamed. A shortened name or a number carries the whole name as a tooltip, and the board's region is still named in full. The name row counts the room the move handle and the open control take, so a touch screen's open control no longer cuts the name to nothing. `boardName(title, position, room)` is that rule, and `BOARD_NAME_MIN_CHARS` the letters it keeps. `boardRoom(width, height)` now answers the placeholder's `lines` alone, and `BOARD_TITLE_MIN_WIDTH` is gone: a host that read `boardRoom(...).title` asks `boardName` instead.
+
+Beyond what is named above (a `DocumentTitleField` handler or ref typed for a textarea, a budget's `request` answering a slot, and `boardRoom(...).title` read through `boardName`), a host has nothing else to change. A host stylesheet that drew its own chosen state in `--color-brand-accent` can take the two selected tokens in its place, and one that drew a title underline of its own can follow `DocumentTitleField`.
+
 ## Changes in 0.35.1
 
 **A column given another type keeps only what every type has** (`SheetColumnEditor`, and `retypeColumn` in the sheet model). Its field, name, width, freezing, read-only flag and Required stay, and so does its length cap between text and long text, which both read it. Every other setting belongs to the old type and is dropped: a number's bounds, decimals and format, a choice's options, a date's time of day. The column is built up from what is kept rather than pared down from the old one, so a setting a type adds later is dropped without the editor having to name it. Before, a date's time of day and a text's length cap rode along, unseen, into a type that ignores them, and came back if the old type was picked again. A host that relied on a setting surviving a type change sets it again on the column it is handed.

package/dist/AgentHandoffPanel/AgentHandoffPanel.d.ts

@@ -0,0 +1,99 @@
+import { type ReactNode, type Ref } from 'react';
+/** One thing that goes to the agent with the brief: the draft, the slides laid out, the board. */
+export interface AgentHandoffItem {
+    key: string;
+    /** A small glyph before the words. */
+    icon?: ReactNode;
+    /** What it is, in a line: "Your draft", "4 slides in Nightshade". */
+    label: ReactNode;
+    /** A second, quieter line: how much of it, or what the agent does with it. */
+    detail?: ReactNode;
+}
+/** A brief to start from, offered while the brief is empty. */
+export interface AgentHandoffStarter {
+    key: string;
+    /** Its name on the chip: "Incident review". */
+    label: string;
+}
+/** The panel's commit: the press that files the work. */
+export interface AgentHandoffSend {
+    /** Its words: "Ask SRE Lead". */
+    label: string;
+    /** Drawn before the words and hidden from the name: the chosen agent's character. */
+    media?: ReactNode;
+    onSend: () => void;
+    /** Unavailable, and why. Said on the button and, in words, beside it. */
+    disabledReason?: string | undefined;
+    /** Filing the work now. */
+    busy?: boolean | undefined;
+}
+export interface AgentHandoffLabels {
+    title: string;
+    brief: string;
+    starters: string;
+    agent: string;
+    carried: string;
+    task: string;
+    next: string;
+    step: string;
+}
+export declare const AGENT_HANDOFF_LABELS: AgentHandoffLabels;
+export interface AgentHandoffPanelProps {
+    onClose: () => void;
+    /** A glyph before the title: the one on the control that opened the panel. */
+    icon?: ReactNode;
+    /** See [ArtifactPanel]: false for a panel that is open on arrival. */
+    focusOnOpen?: boolean | undefined;
+    /** A line under the title saying what the panel does, in the kind's words. */
+    intro?: ReactNode;
+    brief: string;
+    onBriefChange: (brief: string) => void;
+    /** The brief field's visible name, asked as a question where that reads better. */
+    briefLabel?: string | undefined;
+    briefPlaceholder?: string | undefined;
+    /** Under the field: what a good brief says. */
+    briefHelper?: ReactNode;
+    briefMaxLength?: number | undefined;
+    briefRef?: Ref<HTMLTextAreaElement> | undefined;
+    /** Briefs to start from, drawn while the brief is empty. */
+    starters?: readonly AgentHandoffStarter[] | undefined;
+    onStarter?: ((key: string) => void) | undefined;
+    /** The kind's own fields, under the brief: what a page may do, references. */
+    children?: ReactNode;
+    /** Who builds it: the host's agent picker, and the project it files in. */
+    agent: ReactNode;
+    /** What goes to the agent with the brief, so nothing the reader made is lost. */
+    carried?: readonly AgentHandoffItem[] | undefined;
+    /** The task exactly as it is filed, behind a disclosure. */
+    task?: {
+        title: string;
+        body: string;
+    } | undefined;
+    /** What happens after the press, step by step. */
+    steps?: readonly ReactNode[] | undefined;
+    /** A refusal or a warning, said above the commit. */
+    notice?: ReactNode;
+    send: AgentHandoffSend;
+    labels?: Partial<AgentHandoffLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * Handing the work to an agent, at the side of what the reader is making.
+ *
+ * A PANEL, NOT A MODE. The page beside it is the direct way to make the thing,
+ * and stays live and editable while the brief is written, so a person can lay
+ * out a slide, then ask, then lay out another. What they made goes with the
+ * brief (`carried`), and the panel says so, so moving between the two ways
+ * loses nothing. Built on [ArtifactPanel], so it is a column where there is
+ * room, a drawer over the page's end where there is not, and the screen on a
+ * phone, exactly as an open artifact's panels are.
+ *
+ * THE BRIEF FIRST, as every agent composer puts it: the field the reader came
+ * to fill, with briefs to start from while it is empty. Then who builds it,
+ * what goes with it, the task as it is filed and what happens next, so nothing
+ * about the ask is hidden. The commit sits in the panel's foot, always in
+ * reach, with the chosen agent's character beside its words; Command+Enter
+ * anywhere in the panel presses it. A send that is held says why in words
+ * beside it, not only in the button's tooltip.
+ */
+export declare function AgentHandoffPanel({ onClose, icon, focusOnOpen, intro, brief, onBriefChange, briefLabel, briefPlaceholder, briefHelper, briefMaxLength, briefRef, starters, onStarter, children, agent, carried, task, steps, notice, send, labels, className, }: AgentHandoffPanelProps): import("react").JSX.Element;

package/dist/AgentHandoffPanel/index.d.ts

@@ -0,0 +1,3 @@
+import './AgentHandoffPanel.css';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from './AgentHandoffPanel.js';
+export type { AgentHandoffItem, AgentHandoffLabels, AgentHandoffPanelProps, AgentHandoffSend, AgentHandoffStarter, } from './AgentHandoffPanel.js';

package/dist/AgentHandoffPanel/index.js

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

package/dist/AgentHandoffPanel-JWSW62GU.css

@@ -0,0 +1,151 @@
+/*
+ * Handing work to an agent, at the side of what is being made. The panel is
+ * an ArtifactPanel; this is its inside: the brief, its starters, the agent,
+ * what goes with it and the steps after, on one rhythm, and the commit in the
+ * panel's foot.
+ *
+ * ONE STEP BETWEEN SECTIONS (spacing-6) and one inside them (spacing-2): the
+ * brief and its helper read as one block, the next question as the next.
+ */
+
+.crewlet-agent-handoff__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+  min-width: 0;
+}
+
+.crewlet-agent-handoff__intro {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-agent-handoff__brief {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/* THE BRIEF'S NAME is a section's name, at a section heading's size, since
+   it heads the panel's first question. */
+.crewlet-agent-handoff__label {
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-agent-handoff__helper {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-agent-handoff__starters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+}
+
+.crewlet-agent-handoff__section {
+  min-width: 0;
+}
+
+.crewlet-agent-handoff__carried {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin: 0 0 var(--spacing-2);
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-agent-handoff__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-agent-handoff__item-icon {
+  display: inline-flex;
+  flex: none;
+  /* On the first line's centre, whatever the glyph's own box. */
+  margin-top: 1px;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-agent-handoff__item-words {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-agent-handoff__item-label {
+  overflow-wrap: anywhere;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-agent-handoff__item-detail {
+  overflow-wrap: anywhere;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-agent-handoff__task {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding-top: var(--spacing-2);
+}
+
+.crewlet-agent-handoff__task-title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+/* THE BODY AS SENT, wrapped rather than scrolled sideways: a reader checks it
+   line by line, and a panel's width is narrower than its longest line. */
+.crewlet-agent-handoff__task-body {
+  max-height: 16rem;
+  margin: 0;
+  overflow: auto;
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-inset);
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-agent-handoff__foot {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.crewlet-agent-handoff__media {
+  display: inline-flex;
+}
+
+.crewlet-agent-handoff__reason {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}

package/dist/ArrangeFrame/index.js

@@ -1,4 +1,4 @@
-export { ArrangeFrame, useGridResize } from '../chunk-DEJHAOC5.js';
+export { ArrangeFrame, useGridResize } from '../chunk-WMXAX6VA.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{ArrangeFrame-3PLZAG22.css → ArrangeFrame-QXOQTFAH.css}

@@ -59,9 +59,8 @@
 
 /*
  * THE ONE RING, over the block's own edge, on the innermost block the
- * pointer or the focus is in. A hairline drawn exactly over the block's own
- * 1px border, so the border turns to the accent rather than a second, heavier
- * line appearing around it.
+ * pointer or the focus is in. Drawn exactly over the block's own 1px border,
+ * so the border changes colour rather than a second line appearing around it.
  *
  * IT IS A LAYER OF ITS OWN, above the content. An outline is painted with the
  * block, under any content that is positioned or scrolls (a card with a fixed
@@ -78,14 +77,32 @@
   border-radius: inherit;
   pointer-events: none;
 }
-.crewlet-arrange-frame.is-editing:is(:hover, :focus-visible, :has(:focus-visible)):not(
+/*
+ * THREE STRENGTHS ON THE ONE LAYER. The innermost block under the pointer, or
+ * holding the focus in one of its fields, takes the selected edge, the accent
+ * mixed toward the page: it says where the reader is working, and in the full
+ * accent a caret in a cell's field drew a frame in the focus ring's own hue
+ * round the whole block. The block ITSELF in keyboard focus takes the focus
+ * ring, two pixels in the focus colour, the area a keyboard indicator needs.
+ * A picked or resizing block takes one crisp pixel of the full accent, as a
+ * picked board on a canvas does, its handles saying the rest.
+ */
+.crewlet-arrange-frame.is-editing:is(:hover, :has(:focus-visible)):not(:focus-visible, .is-selected, .is-resizing):not(
     :has(.crewlet-arrange-frame:is(:hover, :focus-visible, :has(:focus-visible)))
-  )::after,
+  )::after {
+  border-color: var(--color-border-selected);
+}
+
 .crewlet-arrange-frame.is-selected::after,
 .crewlet-arrange-frame.is-resizing::after {
   border-color: var(--color-brand-accent);
 }
 
+.crewlet-arrange-frame.is-editing:focus-visible::after {
+  border-width: 2px;
+  border-color: var(--color-focus);
+}
+
 /* A block with no surface of its own takes its ring a step outside it. */
 .crewlet-arrange-frame.is-bare {
   --crewlet-arrange-frame-radius: var(--radius-md);

package/dist/ArrangeList/index.js

@@ -1,8 +1,9 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-V43UVX4H.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-27GD7LVR.js';
 import '../chunk-A722MUNR.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-CPEPST4S.js';
-import '../chunk-6QFAK2WV.js';
+import '../chunk-PJIPUEJ3.js';
+import '../chunk-IUYUS2SO.js';
+import '../chunk-YSGLEHND.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.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/ArtifactBar.d.ts

@@ -100,7 +100,8 @@ export interface ArtifactBarProps {
     presence?: ReactNode;
     /**
      * What the kind is doing now, said before its tools: an `EditingStatus`
-     * while a doc is edited. Never folded away; a status that has words to
+     * while a doc is edited, or plain words ("Creating…"), which the bar draws
+     * in its quiet small step. Never folded away; a status that has words to
      * spare folds them itself.
      */
     status?: ReactNode;

package/dist/ArtifactBar/index.js

@@ -1,12 +1,12 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-NKZCJRKO.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-APDKUGSH.js';
 import '../chunk-WKEPORNM.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-6ZJ3N7QI.js';
 import '../chunk-CCAXYHQS.js';
 import '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-ILDNJHRU.js';
 import '../chunk-CE2THTQR.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BUVCV3WI.js';
 import '../chunk-OMV5W53A.js';

package/dist/{ArtifactBar-HV5AT4RG.css → ArtifactBar-FWPBBKQ5.css}

@@ -198,11 +198,19 @@
   margin-inline-start: var(--spacing-1);
 }
 
+/* THE STATUS IS QUIET by default, in the bar's small step and the secondary
+   ink that `EditingStatus` takes, so a host that hands it words ("Creating…",
+   "25 words") draws them as the open artifact draws its own, never at the
+   title's weight. Its figures are tabular, so a count does not jitter. */
 .crewlet-artifact-bar__status {
   display: inline-flex;
   align-items: center;
   min-width: 0;
   margin-inline-end: var(--spacing-2);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-compact);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
 
 .crewlet-artifact-bar__presence {

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';