@crewlethq/ui 0.34.2 → 0.35.1

package/README.md

@@ -204,6 +204,57 @@ 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.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.
+
+**An artifact's bar draws the kind's glyph in the kind's colour** (`ArtifactBar`), as the gallery's badge and the Make row do, on an open artifact and on a create page alike. The kinds' colour classes (`crewlet-kind--<kind>`, which set `--crewlet-kind-ink` and its siblings) moved to a sheet of their own that the bar, the card and the illustrations each import, so the bar is tinted on a page that draws no card. `ArtifactKindGlyph`'s module still carries no stylesheet.
+
+**An artifact bar's primary action can take a short word on a narrow bar** (`ArtifactBar`, `shortLabel` on an `ArtifactBarTool`), so "Create and ask SRE Lead" reads "Create" on a phone and keeps its full word as its accessible name. **On a narrow bar the status gives way before the title**: it is cut to an ellipsis instead of drawn over the title, and its words stay whole for a screen reader.
+
+**A menu's `label` names its trigger when the trigger shows text** (`Menu`). It was the accessible name of an icon trigger only, so a "New" button that opens a menu of kinds was announced as "New". Keep the visible words in the label ("New artifact"), so a person who speaks what they see still reaches it. A test that found a text trigger by its words alone finds it by its label now.
+
+**A choice can carry a picture** (`ChoiceList`, `media` on an option): drawn between the radio and the words and hidden from the name, such as an agent's character in a "who builds it" list. A list without pictures is unchanged.
+
+**A Make row's tile keeps its drawing still on hover** (`ArtifactKindTile`). The illustration used to rise and grow inside its frame; the frame's border now steps alone, over the fast duration. Reduced motion drops the transition.
+
+**A list marker alone on its line is an empty list item**, as CommonMark reads it: `-`, `*`, `+`, `1.`, `1)` and a task's `- [ ]` or `- [x]` with nothing after them, with or without the trailing space an editor strips. The grammar read a bare `1.` as text, so an outline whose trailing spaces were lost drew "1. 2. 3." inside a paragraph, in `RichEditor` and in every renderer alike. An empty item does not interrupt a paragraph, again as in CommonMark, so a lone `-` under a line of text stays that text's next line. Bodies that already round-tripped still do byte for byte, and the editor's corpus holds the bare forms (`bare-markers.md`).
+
+- `SlideFilmstrip` takes a slide's actions, as a presentation editor's
+  filmstrip has them: `onDuplicate` (Command+D, Control+D elsewhere, on a
+  thumbnail), `onDelete` (Delete or Backspace) and `actions` (further menu
+  entries), named with their keys in a per-slide menu that the Menu key or
+  Shift+F10 opens from the thumbnail. `footer` holds what follows the last
+  slide inside the strip, such as a New slide control.
+- `ThemeGallery` takes `renderPreview`, which draws a card's thumbnail in
+  place of its swatch, for a theme of something other than the product's
+  chrome (a slide deck's, drawn as its cover). A theme's `swatch` is optional
+  when the gallery is given one.
+
+**`SheetGrid` shapes its columns in place.** `renderColumnEditor` makes each column header open that column's settings in a popover anchored to it: a press, Enter or Space on a header opens it, Escape closes it and returns focus to the header, and the host draws what is inside. `settingsColumn` and `onSettingsColumnChange` let the host open a column itself (one it has just added). A header that opens settings does not sort on a press; a host that offers both puts its sort in the settings. `onAddColumn` draws Add column after the last header, outside the grid's roles (a grid's rows hold cells only), sticking to the top with the header row and reached as its own tab stop after the grid's. Keys, presses and pastes inside a portalled popover no longer reach the grid's own handlers. New labels: `columnSettings`, `columnSettingsHelp` and `addColumn`.
+
+**`SheetColumnEditor`** is one column's settings as a compact panel: its name, its type (each with its `SheetColumnTypeGlyph` and a line on what it holds), the choices a select, multi-select or status column offers (each with its colour from a hue menu, or its category for a status; a new status column starts with Not started, In progress and Done), the stars of a rating, Required, Move left and Move right, Delete column (with `deleteDisabledReason`) and Done. Every change is handed to the host at once as the next `SheetColumn`, so the grid beside it redraws as the reader types; a name cleared to nothing is held and restored. `suggestedType` offers a type the host proposes (from a column's name or its values) as one press, and `typeLockedReason` says why a type cannot change. A choice's id is made once from its label (`optionId` for a store's own rule) and never changes after.
+
+**`parseCsv`** reads CSV the way spreadsheets write it: quoted separators, doubled quotes and line breaks inside a field, CRLF, LF or CR line ends, a byte order mark dropped, and the separator found from the first record (a comma, a semicolon or a tab) unless given. It reads back what `toCsv` writes, defused formulas included, keeps every value as text, and refuses an unclosed quote or more than `maxRows` records with the line it happened on rather than cutting silently.
+
+**`ChoiceList`'s panel is styled as part of its choice.** A selected choice's `panel` had no styles at all: it sat under the row against the box's edge, outside the selected fill. It now continues the row's fill and starts where the label does.
+
+**`HueSwatch`** is the dot `HuePicker` draws for a hue (or the hairline ring of no hue), exported for a hue menu or a list of coloured choices.
+
+**`CanvasBoard` can shape a canvas before it is drawn.** An editable board given `onBoardCreate` adds Frame (`F`) to its palette, between Hand and Text: a click on the field hands the caller the canvas point, the caller adds a board of whatever size and name it gives new ones and returns its id, and the canvas selects it and hands back Move. `onBoardRemove` lets Delete (or Backspace) remove a selected board, as it removes a selected note. Neither is offered on a view-only canvas, so a published design's viewer is unchanged. The `Shaping` story lays out a design's boards this way. `@crewlethq/icons` vendors `frame`, `laptop`, `tablet` and `smartphone` for it and for frame presets.
+
+**`ArtifactKindTile` can start something in place.** Given `onSelect` and no `href`, the tile is a button drawn exactly as the link is, for a create page's starting points. `face` draws on the kind's ground in place of its drawing (a design layout's `CanvasSchematic`), and `detail` is one quiet line under the name, read as the tile's description. The `StartingPoints` story shows a row of them.
+
+**`SourceEditor` writes source text in place**: a real, monospaced textarea with a line gutter, and the lines a checker named (`marks`, each a `line`, a `tone` of `danger` or `warning`, and an optional `message` shown as the gutter number's tooltip) drawn in the gutter and behind the text. Lines never wrap, so a number and a mark always sit on their line. Tab and Shift+Tab indent and outdent the lines under the selection, Escape then Tab leaves the field (the field's description says so to a screen reader, as `SOURCE_EDITOR_KEYS`), Enter keeps the line's indent and Command+Enter (Control+Enter) calls `onSubmit`. A refusal on any line sets `aria-invalid`. The handle's `revealLine(n)` focuses the field with the caret at line `n`, scrolled into view; `fill` makes it take its parent's height.
+
+**`FindingList` lists what a checker found**: one row per `Finding` (a `tone` of `danger` or `warning`, an optional `location` such as `index.html, line 6`, and the `message`), refusals before advice, the tone's glyph in its ink and the tone said in words to a screen reader (`toneLabels` renames them). A finding with `onSelect` is a button that takes the reader there, so a keyboard walks the findings with Tab.
+
+**`FileDrop` and `FilePickButton` bring files in.** `FileDrop` is a dashed target of its own (a `title`, a `hint` and `actions`) or, given children, a region that takes files dropped on it and shows a frosted overlay saying so only while files are held over it. Dropped folders are walked through the entries API, and every file is answered as a `PickedFile` (`path` with forward slashes, inside the folder it came from, and the `File`). A drag that carries no files (text moved inside an editor) passes through untouched. `FilePickButton` is the keyboard's and the screen reader's way in: a `Button` that opens the system picker, for files (`accept`, `multiple`) or a whole folder (`directory`). `droppedFiles` and `pickedFiles` are the readers, exported for a host with its own target.
+
 ## Changes in 0.34.1
 
 **`ArtifactKindGlyph`, `ARTIFACT_KINDS` and `ArtifactKind` have a module of their own** (`@crewlethq/ui/ArtifactKindGlyph`), and it imports nothing but the glyphs. They were defined in `ArtifactCard`'s module, and a bundler places a module whole, so a host that drew one kind glyph in its frame (a sidebar's pins, a command palette's hits) took the whole card into its first screen, and with 0.34.0 the kind illustrations the card draws: about 11 KB of script for a gallery the reader had not opened. Nothing is renamed: the root export and `@crewlethq/ui/ArtifactCard` still answer for all three, and `ArtifactIcon`, `ArtifactBar`, `DashboardCover` and `ArtifactKindIllustration` now import them from the new module.

package/dist/AppShell/index.js

@@ -1,6 +1,6 @@
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-T46NR3WP.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-PGZ2R3ON.js';
 import '../chunk-RTPQDNW3.js';
-import '../chunk-3EB2AV3H.js';
+import '../chunk-BUVCV3WI.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/ArtifactBar/ArtifactBar.d.ts

@@ -39,6 +39,12 @@ export interface ArtifactBarTool {
      * every width, because a glyph alone does not say what a press commits.
      */
     emphasis?: 'primary' | undefined;
+    /**
+     * A primary tool's word on a narrow bar, where the full one would push the
+     * title out: "Create" for "Create and ask SRE Lead". The full word stays its
+     * accessible name at every width, and it is drawn whole while there is room.
+     */
+    shortLabel?: string | undefined;
 }
 /** The ways a kind draws itself, as one choice: a deck's Edit, Grid and Present. */
 export interface ArtifactBarModes {

package/dist/ArtifactBar/index.d.ts

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

package/dist/ArtifactBar/index.js

@@ -1,4 +1,4 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-ZADVT7IL.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-NKZCJRKO.js';
 import '../chunk-WKEPORNM.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-6ZJ3N7QI.js';
@@ -8,7 +8,7 @@ import '../chunk-RKKO7QHH.js';
 import '../chunk-ILDNJHRU.js';
 import '../chunk-CE2THTQR.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-3EB2AV3H.js';
+import '../chunk-BUVCV3WI.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

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

@@ -64,6 +64,9 @@
   align-items: center;
 }
 
+/* THE KIND'S GLYPH IN THE KIND'S INK, as the gallery's badge and the Make
+   row draw it, so an open artifact and a create page say what they are in the
+   same colour the reader picked it by. */
 .crewlet-artifact-bar__glyph {
   display: inline-flex;
   flex: none;
@@ -71,7 +74,7 @@
   justify-content: center;
   width: var(--size-control-sm);
   height: var(--size-control-sm);
-  color: var(--color-text-secondary);
+  color: var(--crewlet-kind-ink, var(--color-text-secondary));
 }
 
 /* THE TITLE. Read only, it is text; renamable, its words are a button drawn
@@ -262,7 +265,8 @@
 
 /* Both arrangements are drawn; the bar's width says which one shows. */
 .crewlet-artifact-bar__narrow,
-.crewlet-artifact-bar__tight {
+.crewlet-artifact-bar__tight,
+.crewlet-artifact-bar__word-short {
   display: none;
 }
 
@@ -309,6 +313,39 @@
     display: inline-flex;
   }
 
+  /* A PRIMARY ACTION TAKES ITS SHORT WORD, where it has one, so "Create and
+     ask SRE Lead" does not push the title out of a phone's bar. */
+  .crewlet-artifact-bar__word-full {
+    display: none;
+  }
+
+  .crewlet-artifact-bar__word-short {
+    display: inline;
+  }
+
+  /* THE STATUS GIVES WAY BEFORE THE TITLE: the end may shrink, and the
+     status is the part of it that does, cut to an ellipsis rather than drawn
+     over the title. Its words stay whole for a screen reader. */
+  .crewlet-artifact-bar__end {
+    flex: 0 1 auto;
+    min-width: 0;
+  }
+
+  .crewlet-artifact-bar__end > * {
+    flex: none;
+  }
+
+  .crewlet-artifact-bar__end > .crewlet-artifact-bar__status {
+    display: block;
+    flex: 0 1 auto;
+    min-width: 0;
+    max-width: 30cqi;
+    margin-inline-end: var(--spacing-1);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   /* The views have folded, so there is nothing to centre: the title takes
      the room. */
   .crewlet-artifact-bar__row--centred .crewlet-artifact-bar__end {

package/dist/ArtifactCard/index.d.ts

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

package/dist/ArtifactCard/index.js

@@ -1,9 +1,9 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-7T5LSYZ2.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-7UYONN6K.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-UDQW6UK7.js';
+import '../chunk-W7QBBKUE.js';
 import '../chunk-ACA27MZH.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-5AQBPHZD.js';

package/dist/{ArtifactCard-XHRLAL7C.css → ArtifactCard-OGTMO2KI.css}

@@ -119,7 +119,12 @@
  * A SOFT PANE WITH A GENEROUS CORNER. The card is the card rung with its
  * hairline, rounded a step past a plain card's because the preview inside it
  * is a picture, and a picture in a tight corner reads as a screenshot pasted
- * into a box. Hover lifts the edge and the shadow, never the colour.
+ * into a box.
+ *
+ * HOVER IS A STEP, NEVER A MOVE: the hairline darkens and a hairline shadow
+ * settles under the card, quickly and with the standard ease. A card that rose
+ * and cast a wide shadow made a gallery ripple as the pointer crossed it, and
+ * the preview inside it never moves.
  */
 .crewlet-artifact-card--card {
   position: relative;
@@ -130,15 +135,13 @@
   border-radius: var(--radius-xl);
   background: var(--color-surface-subtle);
   transition:
-    border-color var(--motion-duration-base) var(--motion-easing-out),
-    box-shadow var(--motion-duration-base) var(--motion-easing-out),
-    transform var(--motion-duration-base) var(--motion-easing-out);
+    border-color var(--motion-duration-fast) var(--motion-easing-out),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-out);
 }
 
 .crewlet-artifact-card--card:hover {
   border-color: var(--color-border-hover);
-  box-shadow: var(--shadow-card);
-  transform: translateY(-1px);
+  box-shadow: var(--shadow-xs);
 }
 
 .crewlet-artifact-card--card:has(.crewlet-artifact-card__link:focus-visible) {
@@ -178,7 +181,7 @@
 
 .crewlet-artifact-card--card .crewlet-artifact-card__body {
   gap: var(--spacing-1);
-  padding: 0 var(--spacing-5) var(--spacing-5);
+  padding: 0 var(--spacing-4) var(--spacing-4);
 }
 
 /*
@@ -193,19 +196,19 @@
   align-items: center;
   justify-content: center;
   align-self: flex-start;
-  width: 40px;
-  height: 40px;
-  margin-top: -22px;
+  width: 32px;
+  height: 32px;
+  margin-top: -18px;
   margin-bottom: var(--spacing-2);
   border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   background: var(--color-surface-background);
   box-shadow: var(--shadow-sm);
   color: var(--crewlet-kind-ink, var(--color-text-secondary));
 }
 
 .crewlet-artifact-card--card .crewlet-artifact-card__title {
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-md);
   font-weight: var(--font-weight-medium);
   line-height: 1.35;
 }
@@ -274,10 +277,6 @@
   .crewlet-artifact-card__actions {
     transition: none;
   }
-
-  .crewlet-artifact-card--card:hover {
-    transform: none;
-  }
 }
 
 .crewlet-artifact-card--skeleton {

package/dist/ArtifactKindIllustration/ArtifactKindIllustration.d.ts

@@ -35,6 +35,19 @@ export interface ArtifactKindTileProps {
     label: string;
     /** Where starting one goes. Left out with `disabledReason`, the tile starts nothing. */
     href?: string | undefined;
+    /**
+     * What a press does, for a tile that starts something in place rather than
+     * going somewhere (a create page's starting layouts): the tile is then a
+     * button. `href` wins where both are given.
+     */
+    onSelect?: (() => void) | 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.
+     */
+    face?: ReactNode;
+    /** One quiet line under the name saying what the tile starts: "3 boards". */
+    detail?: ReactNode;
     /** A short tag after the name ("New", "Beta"), for a kind that is genuinely new. */
     badge?: string | undefined;
     /** Why this reader cannot start one. The tile stays focusable and says so. */
@@ -50,4 +63,4 @@ export interface ArtifactKindTileProps {
  * through it by keyboard hears why (`disabledReason`) rather than finding a
  * kind missing.
  */
-export declare function ArtifactKindTile({ kind, label, href, badge, disabledReason, className }: ArtifactKindTileProps): import("react").JSX.Element;
+export declare function ArtifactKindTile({ kind, label, href, onSelect, face, detail, badge, disabledReason, className, }: ArtifactKindTileProps): import("react").JSX.Element;

package/dist/ArtifactKindIllustration/index.d.ts

@@ -1,3 +1,4 @@
+import './ArtifactKinds.css';
 import './ArtifactKindIllustration.css';
 export { ArtifactKindGround, ArtifactKindIllustration, ArtifactKindTile } from './ArtifactKindIllustration.js';
 export type { ArtifactKindTileProps } from './ArtifactKindIllustration.js';

package/dist/ArtifactKindIllustration/index.js

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

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

@@ -2,17 +2,11 @@
  * A kind's drawing, its tinted ground and the Make something new 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-*` and read by
- * every rule below, so the drawing, the ground and the tile repaint together
- * with the theme.
+ * Fill and Line steps, set once per kind on `--crewlet-kind-*`
+ * (`ArtifactKinds.css`) and read by every rule below, so the drawing, the
+ * ground and the tile repaint together with the theme.
  */
 
-.crewlet-kind--doc { --crewlet-kind-hue: var(--color-artifact-kind-doc); --crewlet-kind-fill: var(--color-artifact-kind-doc-fill); --crewlet-kind-line: var(--color-artifact-kind-doc-line); --crewlet-kind-ink: var(--color-artifact-kind-doc-ink); }
-.crewlet-kind--slides { --crewlet-kind-hue: var(--color-artifact-kind-slides); --crewlet-kind-fill: var(--color-artifact-kind-slides-fill); --crewlet-kind-line: var(--color-artifact-kind-slides-line); --crewlet-kind-ink: var(--color-artifact-kind-slides-ink); }
-.crewlet-kind--design { --crewlet-kind-hue: var(--color-artifact-kind-design); --crewlet-kind-fill: var(--color-artifact-kind-design-fill); --crewlet-kind-line: var(--color-artifact-kind-design-line); --crewlet-kind-ink: var(--color-artifact-kind-design-ink); }
-.crewlet-kind--dashboard { --crewlet-kind-hue: var(--color-artifact-kind-dashboard); --crewlet-kind-fill: var(--color-artifact-kind-dashboard-fill); --crewlet-kind-line: var(--color-artifact-kind-dashboard-line); --crewlet-kind-ink: var(--color-artifact-kind-dashboard-ink); }
-.crewlet-kind--html { --crewlet-kind-hue: var(--color-artifact-kind-html); --crewlet-kind-fill: var(--color-artifact-kind-html-fill); --crewlet-kind-line: var(--color-artifact-kind-html-line); --crewlet-kind-ink: var(--color-artifact-kind-html-ink); }
-.crewlet-kind--sheet { --crewlet-kind-hue: var(--color-artifact-kind-sheet); --crewlet-kind-fill: var(--color-artifact-kind-sheet-fill); --crewlet-kind-line: var(--color-artifact-kind-sheet-line); --crewlet-kind-ink: var(--color-artifact-kind-sheet-ink); }
 
 /* ---- the drawing ---- */
 
@@ -135,9 +129,7 @@
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-2xl);
   background: var(--color-surface-subtle);
-  transition:
-    border-color var(--motion-duration-base) var(--motion-easing-out),
-    box-shadow var(--motion-duration-base) var(--motion-easing-out);
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-out);
 }
 
 .crewlet-kind-tile__ground {
@@ -146,10 +138,6 @@
   overflow: hidden;
 }
 
-.crewlet-kind-tile__ground > .crewlet-kind-illustration {
-  transition: transform var(--motion-duration-base) var(--motion-easing-out);
-}
-
 .crewlet-kind-tile__label {
   display: flex;
   align-items: center;
@@ -177,12 +165,35 @@
   font-weight: var(--font-weight-medium);
 }
 
-a.crewlet-kind-tile:hover .crewlet-kind-tile__frame {
-  border-color: var(--color-border-hover);
+/* A tile that starts something in place is a button, drawn as the link is. */
+.crewlet-kind-tile--button {
+  /* A button shrinks to its content where a link in a grid cell fills it. */
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+/* What the tile starts, under its name, in the quiet ink. */
+.crewlet-kind-tile__detail {
+  margin-top: calc(-1 * var(--spacing-1));
+  padding-inline: var(--spacing-1);
+  overflow: hidden;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-a.crewlet-kind-tile:hover .crewlet-kind-tile__ground > .crewlet-kind-illustration {
-  transform: translateY(-2px) scale(1.03);
+/* HOVER IS THE FRAME'S STEP ALONE: the drawing inside stays still, as a
+   card's preview does, so a row of tiles never ripples under the pointer. */
+a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
+.crewlet-kind-tile--button:hover .crewlet-kind-tile__frame {
+  border-color: var(--color-border-hover);
 }
 
 .crewlet-kind-tile:focus-visible .crewlet-kind-tile__frame {
@@ -200,12 +211,7 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__ground > .crewlet-kind-illustratio
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .crewlet-kind-tile__frame,
-  .crewlet-kind-tile__ground > .crewlet-kind-illustration {
+  .crewlet-kind-tile__frame {
     transition: none;
   }
-
-  a.crewlet-kind-tile:hover .crewlet-kind-tile__ground > .crewlet-kind-illustration {
-    transform: none;
-  }
 }

package/dist/ArtifactKinds-CVD3FCYO.css

@@ -0,0 +1,15 @@
+/*
+ * A kind's colours, set once per kind on `--crewlet-kind-*` by its class
+ * (`crewlet-kind--<kind>`): the hue, its Fill and Line steps and the ink a
+ * glyph is drawn in. Every surface that tints by kind reads these, so a kind
+ * glyph in a bar, a card's badge and a Make row's tile repaint together with
+ * the theme, and no surface spells a kind's colour of its own. A sheet of
+ * its own, imported by each surface that tints, because the glyph's module
+ * carries no stylesheet (a frame that draws one glyph takes nothing else).
+ */
+.crewlet-kind--doc { --crewlet-kind-hue: var(--color-artifact-kind-doc); --crewlet-kind-fill: var(--color-artifact-kind-doc-fill); --crewlet-kind-line: var(--color-artifact-kind-doc-line); --crewlet-kind-ink: var(--color-artifact-kind-doc-ink); }
+.crewlet-kind--slides { --crewlet-kind-hue: var(--color-artifact-kind-slides); --crewlet-kind-fill: var(--color-artifact-kind-slides-fill); --crewlet-kind-line: var(--color-artifact-kind-slides-line); --crewlet-kind-ink: var(--color-artifact-kind-slides-ink); }
+.crewlet-kind--design { --crewlet-kind-hue: var(--color-artifact-kind-design); --crewlet-kind-fill: var(--color-artifact-kind-design-fill); --crewlet-kind-line: var(--color-artifact-kind-design-line); --crewlet-kind-ink: var(--color-artifact-kind-design-ink); }
+.crewlet-kind--dashboard { --crewlet-kind-hue: var(--color-artifact-kind-dashboard); --crewlet-kind-fill: var(--color-artifact-kind-dashboard-fill); --crewlet-kind-line: var(--color-artifact-kind-dashboard-line); --crewlet-kind-ink: var(--color-artifact-kind-dashboard-ink); }
+.crewlet-kind--html { --crewlet-kind-hue: var(--color-artifact-kind-html); --crewlet-kind-fill: var(--color-artifact-kind-html-fill); --crewlet-kind-line: var(--color-artifact-kind-html-line); --crewlet-kind-ink: var(--color-artifact-kind-html-ink); }
+.crewlet-kind--sheet { --crewlet-kind-hue: var(--color-artifact-kind-sheet); --crewlet-kind-fill: var(--color-artifact-kind-sheet-fill); --crewlet-kind-line: var(--color-artifact-kind-sheet-line); --crewlet-kind-ink: var(--color-artifact-kind-sheet-ink); }

package/dist/AvatarPicker/index.js

@@ -1,5 +1,5 @@
-export { AvatarPicker } from '../chunk-OMLACFPP.js';
-import '../chunk-GPHWCK7M.js';
+export { AvatarPicker } from '../chunk-FJJHD73S.js';
+import '../chunk-SUXP4OBT.js';
 import '../chunk-K3IJQNB7.js';
 import '../chunk-YEVG2X5R.js';
 import '../chunk-AYKXMIOR.js';

package/dist/CanvasBoard/CanvasBoard.d.ts

@@ -15,10 +15,12 @@
  * click on a board or a note selects it, a click on the field clears it, and
  * the pointer is the arrow. Hand (`H`, or Space held) pans whatever is under
  * the pointer, boards included, with the open hand. An editable canvas that
- * can create notes adds Text (`T`) and Sticky (`S`): a click on the field
- * places one there, opens it for typing, and hands back the Move tool. The
- * pointer is always the tool's (the Canvas cursors), and a pan in progress is
- * always the closed hand.
+ * can create boards adds Frame (`F`): a click on the field places a board
+ * there, selected, and hands back the Move tool. One that can create notes
+ * adds Text (`T`) and Sticky (`S`): a click on the field places one there,
+ * opens it for typing, and hands back the Move tool. The pointer is always
+ * the tool's (the Canvas cursors), and a pan in progress is always the closed
+ * hand.
  *
  * A PAGE INSIDE A BOARD NEVER TAKES THE CANVAS'S POINTER BY SURPRISE. A live
  * board is covered by a shield that pans the canvas like the field around it;
@@ -32,7 +34,8 @@
  * own paper or its handle, retyped on a double-click, and deleted with Delete
  * while selected. Each finished gesture is reported once, with whole canvas
  * pixels, and the caller decides what a change is (for a design, a new
- * version of its canvas).
+ * version of its canvas). Delete removes a selected note, and a selected
+ * board where the caller removes boards (`onBoardRemove`).
  *
  * HOVER AND SELECTION ARE OUTLINES IN THE ACCENT, at one screen pixel and two,
  * over a board's own hairline edge; hovering a board's name outlines its board,
@@ -125,18 +128,21 @@ export interface CanvasBoardLabels {
     /** Each tool's name. */
     moveTool: string;
     handTool: string;
+    frameTool: string;
     textTool: string;
     stickyTool: string;
 }
 /**
- * The tools a board canvas offers. Move and Hand always; Text and Sticky only
- * where a person may edit and the caller places notes (`onNoteCreate`).
+ * The tools a board canvas offers. Move and Hand always; Frame only where a
+ * person may edit and the caller places boards (`onBoardCreate`), and Text and
+ * Sticky only where the caller places notes (`onNoteCreate`).
  *
- * NO FRAME TOOL. A board is a page an agent or an upload made, with a file
- * behind it, and an empty frame drawn here would be a board with nothing to
- * render. NO COMMENT TOOL until a canvas has comments to anchor.
+ * FRAME IS FOR SHAPING A CANVAS BEFORE IT IS DRAWN: a design's create page,
+ * where a person lays out the boards an agent then fills. A published design's
+ * board is a page with a file behind it, so its viewer offers no Frame. NO
+ * COMMENT TOOL until a canvas has comments to anchor.
  */
-export type CanvasBoardTool = 'move' | 'hand' | 'text' | 'sticky';
+export type CanvasBoardTool = 'move' | 'hand' | 'frame' | 'text' | 'sticky';
 /**
  * The smallest zoom a board canvas fits at. A design laid out across many
  * full-size pages is many screens wide, and every board has to be on screen
@@ -166,6 +172,18 @@ export interface CanvasBoardProps {
     onNoteChange?: ((note: CanvasBoardNote) => void) | undefined;
     /** A note was deleted. */
     onNoteRemove?: ((id: string) => void) | undefined;
+    /**
+     * The Frame tool placed a board at a canvas point (its top left, in canvas
+     * pixels). The caller adds the board, with whatever size and name it gives
+     * new boards, and returns its id, which the canvas then selects. Absent, or
+     * on a canvas that is not editable, the tool is not offered.
+     */
+    onBoardCreate?: ((at: CanvasPoint) => string | undefined) | undefined;
+    /**
+     * Delete pressed on a selected board. Absent, a board is not deleted from
+     * the canvas.
+     */
+    onBoardRemove?: ((id: string) => void) | undefined;
     /**
      * The Text or Sticky tool placed a note at a canvas point (its top left, in
      * canvas pixels). The caller adds the note, with whatever size and starting
@@ -212,4 +230,4 @@ export declare function boardRoom(width: number, height: number): {
 };
 /** The narrowest a board is drawn, in screen pixels, with its name above it. */
 export declare const BOARD_TITLE_MIN_WIDTH = 40;
-export declare function CanvasBoard({ label, boards, notes, renderBoard, maxLive, minLiveWidth, editable, minSide, maxSide, onBoardChange, onNoteChange, onNoteRemove, onNoteCreate, onOpen, onActivate, selected: heldSelection, onSelectedChange, controlsExtra, toolbar, labels, canvasLabels, canvasRef, className, }: CanvasBoardProps): import("react").JSX.Element;
+export declare function CanvasBoard({ label, boards, notes, renderBoard, maxLive, minLiveWidth, editable, minSide, maxSide, onBoardChange, onNoteChange, onNoteRemove, onNoteCreate, onBoardCreate, onBoardRemove, onOpen, onActivate, selected: heldSelection, onSelectedChange, controlsExtra, toolbar, labels, canvasLabels, canvasRef, className, }: CanvasBoardProps): import("react").JSX.Element;

package/dist/CanvasBoard/index.js

@@ -1,4 +1,4 @@
-export { BOARD_TITLE_MIN_WIDTH, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardRoom, liveBoards, titleSize } from '../chunk-WPX6A5BV.js';
+export { BOARD_TITLE_MIN_WIDTH, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardRoom, liveBoards, titleSize } from '../chunk-E35CMI5D.js';
 import '../chunk-5SZGKSGL.js';
 import '../chunk-3Y56GQPM.js';
 import '../chunk-PGRPNDWM.js';

package/dist/ChangeMark/index.js

@@ -1,5 +1,5 @@
-export { ChangeMark } from '../chunk-SGHIAGPR.js';
-import '../chunk-VI5FWDZW.js';
+export { ChangeMark } from '../chunk-47JQAGRV.js';
+import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-6ZJ3N7QI.js';

package/dist/ChoiceList/ChoiceList.d.ts

@@ -5,6 +5,11 @@ export interface ChoiceListOption {
     value: string;
     /** What the choice is, in a few words. */
     label: ReactNode;
+    /**
+     * A picture of the choice, drawn between the radio and the words: an
+     * agent's character, a kind's glyph. Decorative; the label names it.
+     */
+    media?: ReactNode;
     /** One line under the label saying what choosing it means. */
     detail?: ReactNode;
     /** A short word at the row's end, such as "Recommended". */
@@ -34,7 +39,8 @@ export interface ChoiceListProps {
 }
 /**
  * One answer from a short list, each choice a row with its label, a line of
- * detail and an optional tag, in one bordered box.
+ * detail, an optional picture (`media`) and an optional tag, in one bordered
+ * box.
  *
  * NATIVE RADIOS, so the arrow keys move the choice and Tab leaves the group as
  * the platform does, and every row is its radio's label, so the whole row

package/dist/ChoiceList/index.js

@@ -1,2 +1,2 @@
-export { ChoiceList } from '../chunk-QBXZLGK2.js';
+export { ChoiceList } from '../chunk-ZU3DUXD2.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ChoiceList-2PQJS4DX.css → ChoiceList-RBL7FNQL.css}

@@ -4,6 +4,8 @@
  * accent's soft fill, so the answer reads at a glance without the radio.
  */
 .crewlet-choice-list {
+  /* The platform's radio, sized here so a panel can line up with the text beside it. */
+  --crewlet-choice-list-radio-size: 13px;
   display: grid;
   gap: var(--spacing-1);
   padding: var(--spacing-1);
@@ -43,6 +45,22 @@
   transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+/* A choice with a picture: the radio, the picture, the words, the tag. The
+   picture centres on the label and its detail together. */
+.crewlet-choice-list__row.has-media {
+  grid-template-columns: auto auto minmax(0, 1fr) auto;
+  align-items: center;
+}
+
+.crewlet-choice-list__row.has-media .crewlet-choice-list__radio {
+  margin-top: 0;
+}
+
+.crewlet-choice-list__media {
+  display: inline-flex;
+  flex: none;
+}
+
 .crewlet-choice-list__row:hover {
   background: var(--color-surface-hover);
 }
@@ -56,6 +74,8 @@
 }
 
 .crewlet-choice-list__radio {
+  width: var(--crewlet-choice-list-radio-size);
+  height: var(--crewlet-choice-list-radio-size);
   margin: 3px 0 0;
   accent-color: var(--color-brand-accent);
   cursor: inherit;
@@ -95,6 +115,25 @@
   white-space: nowrap;
 }
 
+/* A SELECTED CHOICE'S PANEL is part of the choice: it continues the row's
+   fill under it, and its content starts where the label does, not under the
+   radio. */
+.crewlet-choice-list__item:has(> .crewlet-choice-list__panel) {
+  gap: 0;
+}
+
+.crewlet-choice-list__item:has(> .crewlet-choice-list__panel) > .crewlet-choice-list__row {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.crewlet-choice-list__panel {
+  padding: var(--spacing-1) var(--spacing-2) var(--spacing-3) calc(var(--spacing-2) + var(--crewlet-choice-list-radio-size) + var(--spacing-3));
+  border-end-start-radius: var(--radius-sm);
+  border-end-end-radius: var(--radius-sm);
+  background: var(--color-brand-accent-soft);
+}
+
 .crewlet-choice-list__footer {
   display: flex;
   justify-content: flex-end;