@crewlethq/ui 0.35.0 → 0.36.0

package/README.md

@@ -204,6 +204,83 @@ 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.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.
+
 ## Changes in 0.35.0
 
 **The gallery card is a step smaller and calm under the pointer** (`ArtifactCard`, `size="card"`). Its title is the body size rather than a large one, its body inset is one spacing step tighter, and the kind's badge on the preview's foot is 32px (from 40px) with the small glyph, so a gallery fits four cards across a laptop's page in the same design. Hover no longer lifts the card or casts the wide card shadow: the hairline darkens and an extra-small shadow settles under it, over the fast duration, and the card never moves. The More menu still appears on hover and focus. A host that relied on the lift has nothing to change.

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-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-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/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/index.js

@@ -1,10 +1,10 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-7UYONN6K.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-OSZDHN5Z.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-W7QBBKUE.js';
-import '../chunk-ACA27MZH.js';
+import '../chunk-MJW6SQYB.js';
+import '../chunk-5QXRI35B.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';

package/dist/ArtifactCover/index.js

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

package/dist/ArtifactKindIllustration/ArtifactKindIllustration.d.ts

@@ -20,8 +20,8 @@ export declare function ArtifactKindIllustration({ kind, className }: {
 }): import("react").JSX.Element;
 /**
  * A kind's drawing on its tinted ground: the stand-in a preview shows while
- * nothing live is drawn (off screen, still loading, over the live budget,
- * failed or empty), and the face of a Make something new tile.
+ * nothing live is drawn (never yet near, still loading, over the live budget,
+ * failed or empty), and the face of a kind tile.
  */
 export declare function ArtifactKindGround({ kind, className, children, }: {
     kind: ArtifactKind;
@@ -31,7 +31,7 @@ export declare function ArtifactKindGround({ kind, className, children, }: {
 }): import("react").JSX.Element;
 export interface ArtifactKindTileProps {
     kind: ArtifactKind;
-    /** The kind's name, under the tile: "Docs". */
+    /** The name under the tile: "Docs", or a starting point's "Landing page". */
     label: string;
     /** Where starting one goes. Left out with `disabledReason`, the tile starts nothing. */
     href?: string | undefined;
@@ -41,6 +41,13 @@ export interface ArtifactKindTileProps {
      * button. `href` wins where both are given.
      */
     onSelect?: (() => void) | undefined;
+    /**
+     * For a tile that is a button: whether it is the one chosen (a starting
+     * layout already picked). Drawn as every chosen option is, the selected
+     * edge over the selected fill with a check beside the name, and announced
+     * as a pressed button. Left out, the tile is an action with no state.
+     */
+    selected?: boolean | undefined;
     /**
      * Drawn on the kind's ground in place of its drawing: a picture of this
      * particular starting point, such as a design layout's schematic.
@@ -55,12 +62,14 @@ export interface ArtifactKindTileProps {
     className?: string | undefined;
 }
 /**
- * One kind on a "Make something new" row: the kind's drawing on its tinted
- * ground, framed, with its name under it. The whole tile is one link named by
- * the kind's name.
+ * 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
+ * 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
  * through it by keyboard hears why (`disabledReason`) rather than finding a
  * kind missing.
  */
-export declare function ArtifactKindTile({ kind, label, href, onSelect, face, detail, badge, disabledReason, className, }: ArtifactKindTileProps): import("react").JSX.Element;
+export declare function ArtifactKindTile({ kind, label, href, onSelect, selected, face, detail, badge, disabledReason, className, }: ArtifactKindTileProps): import("react").JSX.Element;

package/dist/ArtifactKindIllustration/index.js

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

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

@@ -201,6 +201,42 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
   outline-offset: var(--size-focus-ring-inset-offset);
 }
 
+/*
+ * A TILE THAT STARTS SOMETHING IN PLACE (a create page's starting layouts)
+ * DRAWS ONE EDGE. Its face is a picture of the layout, with boards of its
+ * own, so the ground's tinted inner line was a second outline a few pixels
+ * inside the frame's, and with the focus ring over the frame the tile read as
+ * three nested rings. The frame is the tile's one edge; the ground keeps its
+ * tint.
+ */
+.crewlet-kind-tile--button .crewlet-kind-tile__ground {
+  box-shadow: none;
+}
+
+/*
+ * CHOSEN, as every chosen option is drawn: the selected edge (the accent
+ * mixed toward the page) on the frame, over the selected fill, and a check
+ * beside the name, the mark that clears 3:1. Under the pointer it keeps its
+ * edge, and the focus ring is drawn over it for the keyboard alone.
+ */
+.crewlet-kind-tile--button.is-selected .crewlet-kind-tile__frame,
+.crewlet-kind-tile--button.is-selected:hover .crewlet-kind-tile__frame {
+  border-color: var(--color-border-selected);
+  background-image: linear-gradient(var(--color-surface-selected), var(--color-surface-selected));
+}
+
+.crewlet-kind-tile__check {
+  flex: none;
+  margin-inline-start: auto;
+  color: var(--color-brand-accent-ink);
+}
+
+@media (forced-colors: active) {
+  .crewlet-kind-tile--button.is-selected .crewlet-kind-tile__frame {
+    border-color: Highlight;
+  }
+}
+
 .crewlet-kind-tile--disabled {
   cursor: not-allowed;
 }