@crewlethq/ui 0.23.0 → 0.25.0

package/README.md

@@ -49,14 +49,15 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | Documents and review | `DiffView` and `DiffSummary` with the line diff they draw (`diffLines`, `diffStat`, `collapseDiff`, `firstChangedLines`, `splitLines`, `MAX_DIFF_LINES`, with no React in it), `DiffList`, `VersionCompare`, `CommentThread` |
 | Charts | `Legend`, `BarList`, `StackedBar`, `StackedColumns`, `ActivityStrip`, `TimeSeries`, `Sparkline`, the reading layer they share (`ChartTooltip`, `useChartHover`), and the ramp (`DATA_COLORS`, `DATA_COLOR_OTHER`, `dataColor`) |
 | Marks | `Count`, `StatusDot`, `EmptyValue`, `VisuallyHidden` |
-| Hooks and seams | `useModalLayer`, `usePopupLayer`, `LayerHost`, `useListbox`, `useOptionKeys`, `useHighlightRest` and `HIGHLIGHT_REST_MS`, `useClipboard`, `useDownload`, `downloadText`, `safeFilename`, `useOutcome`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx`, the node hues (`NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue`) |
+| Hooks and seams | `useModalLayer`, `usePopupLayer`, `LayerHost`, `useListbox`, `useOptionKeys`, `useHighlightRest` and `HIGHLIGHT_REST_MS`, `useClipboard`, `useDownload`, `downloadText`, `downloadBlob`, `safeFilename`, `toCsv`, `elementToPng` and `ElementToPngError`, `useOutcome`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx`, the node hues (`NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue`) |
 | Layout | `Container`, `Section`, `Card`, `Tabs`, `Accordion`, `Disclosure`, `Outline` (with `useActiveHeading` and `scrollToHeading`), `TreeGrid` |
 | Arranging a page | `ArrangeBoard`, `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` |
 | Preferences | `ThemeToggle`, `ThemeSwitcher`, `DensitySwitcher`, `ThemeGallery`, `ThemeSwatch`, `useThemePreference`, `useDensityPreference`, `useSystemTheme`, `resolveTheme`, `applyStoredPreferences`, and the framework-free `applyTheme`, `applyPalette`, `applyDensity` with `THEME_PREFERENCES`, `DENSITY_PREFERENCES` and their guards |
-| Artifacts | `SandboxedFrame`, `LinkInterstitial` and `openExternal`, `VersionTimeline`, `ShareDialog` with the role ladder (`ARTIFACT_ROLES`, `SHAREABLE_ROLES`, `roleAtLeast`), `PrincipalPicker`, `Principal` and `PrincipalAvatar`, `ArtifactCard` and `ArtifactKindGlyph`, `AccessDeniedCard`, and `FrameProtocol` (the wire between a host page and an embedded artifact, with no React in it) |
+| Artifacts | `SandboxedFrame`, `LinkInterstitial` and `openExternal`, `VersionTimeline`, `ShareDialog` with the role ladder (`ARTIFACT_ROLES`, `SHAREABLE_ROLES`, `roleAtLeast`), `PrincipalPicker`, `Principal` and `PrincipalAvatar`, `ArtifactCard` and `ArtifactKindGlyph`, `CanvasBoard` (a design's artboards and notes on a `Canvas`, with the visibility budget `liveBoards`), `CanvasSchematic` (a design's cover, drawn from its boards' frames), `AccessDeniedCard`, `ArtifactIcon` (with `artifactIconGlyph` and `ARTIFACT_ICON_WORDS`), the native gallery covers (`DocCover`, `SheetCover`, `DashboardCover`), `MergeConflicts`, the dashboard pieces (`WidgetFrame`, `DatasetSource` and `DatasetSourceList`), and `FrameProtocol` (the wire between a host page and an embedded artifact, with no React in it) |
 | Sheets | `SheetGrid`, the cells on their own (`CheckboxCell`, `TextCell`, `LongTextCell`, `NumberCell`, `SelectCell`, `MultiSelectCell`, `PersonCell`, `StatusCell`, `DateCell`, `UrlCell`, `RatingCell`, and `SheetCell` for any type), `ChangeMark`, and `SheetModel` (every rule a sheet is drawn from, with no React in it: values, parsing, the keyboard model, TSV, the pending edits of D23) |
-| Presence | `PresenceStack`, `PresenceRing` and `presenceHueClass`, `CursorFlag`, `LiveCursor`, `FollowBanner`, `PeopleRail` (with `peopleRailKey`), and `PresenceModel` (the roster order, one entry per person, the session hues, with no React in it) |
+| Presence | `PresenceStack`, `PresenceRing` and `presenceHueClass`, `CursorFlag`, `LiveCursor`, `FollowBanner`, `PeopleRail` (with `peopleRailKey`), and `PresenceModel` (the roster order, one entry per person, the session hues from `PRESENCE_HUES`, with no React in it) |
+| Presentations | `SlideStage` (a slide laid out at 1920 by 1080 and scaled to its box, with `SLIDE_WIDTH` and `SLIDE_HEIGHT`), `useSlideKeys` (the keys a show and a clicker send), `SlideFilmstrip`, `SlideGrid`, `SlideCompare` (with `SLIDE_COMPARE_LABELS`), `PresenterView` (with `formatStopwatch`) |
 
 Storybook stories live under `apps/storybook/src/stories`.
 
@@ -203,6 +204,77 @@ 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.25.0
+
+0.25.0 adds the pieces the slides, dashboard, doc and sheet artifact kinds are drawn with, and the fixes from the artifact audit. Every new piece draws content the host renders itself and takes its data and callbacks as props, so nothing in it parses an artifact or knows a route.
+
+Slides:
+
+**`SlideStage`** lays a slide out at its authored size, 1920 by 1080 (`SLIDE_WIDTH`, `SLIDE_HEIGHT`), and scales it as a whole to its box, measured whenever the box resizes, so a thumbnail, the editor and a projector show the same line breaks. `fit="width"` is as wide as its column at 16:9; `fit="contain"` is as large as fits both ways, letterboxed, for Present; a fixed `scale` is for print. It is a group announced as a slide, named by `label`.
+
+**`useSlideKeys`** answers the keys every presentation and every clicker sends: forward on Right, Down, Page Down, Space and Enter, back on Left, Up, Page Up and Backspace, Home and End to the ends, Escape out. It listens at the document while `enabled`, and leaves alone a field the reader is typing in, a composition, a key a nearer surface handled, and modified keys.
+
+**`SlideFilmstrip`** is the column of thumbnails beside a deck's stage: the slide on the stage marked `aria-current`, one tab stop whose arrow keys move to the next slide, and, with `onReorder`, a handle per slide that moves it by drag or by its arrow keys and announces where it landed. A hidden slide is dimmed and says so.
+
+**`SlideGrid`** lays every slide out by the outline's sections, numbered across the deck, each a button that opens its slide.
+
+**`SlideCompare`** compares two versions of a deck slide by slide: each slide's older and newer drawings side by side, paired by its id, a slide one version lacks drawn as an empty side naming that version, and every change said in words beside a glyph (Changed, Added, Removed, Moved from 6 to 7), the list opening with the count of each. Unchanged slides fold away behind one control.
+
+**`VersionCompare`** takes `versions`, a comparison the host draws in the versions lens in place of the two panes, for content compared item by item (a deck's slides, which two independent panes could not line up).
+
+**`PresenterView`** is the presenter's own screen: the slide the room sees, the next one, the speaker notes large and on their own scroll, a timer that pauses, resumes and resets (`formatStopwatch` reads it as m:ss), and controls that stop at the ends of the deck.
+
+Dashboards:
+
+**`WidgetFrame`** is one figure on a dashboard, drawn inside the host's `ArrangeFrame`: its title, the figure, and the citation line every figure carries, the dataset's title (`WidgetSource.label`) then "live" or "as of" a relative time, the exact instant on hover. With `onCite` the citation is a button that opens the host's Sources rail at that dataset; `actions` holds the host's menu. `source.status` (`DatasetStatus`: `loading`, `live`, `ready`, `stale`, `refused`, `failed`) decides the body: a placeholder while loading, a marked citation when stale, and for `refused` and `failed` a calm sentence (`detail`, else the default words) IN PLACE of the figure, which is never drawn, so a host that passed rows by mistake still shows none.
+
+**`DatasetSource`** is one entry of a Sources rail: the dataset's title, its source kind as a chip (`DatasetSourceKind`: `store`, `engine`, `file`, `calc`, drawn Datastore, Engine, File, Calculated, renamed through `labels.kinds`), its `definition`, then where its rows stand, how many there are and its `refresh` promise. With `onSelect` the summary is a toggle (`aria-pressed`) and the host's rows preview (`children`) is drawn under it when `selected`, outside the button. **`DatasetSourceList`** is the rail itself, a named list of entries. `DATASET_SOURCE_KINDS` lists the kinds.
+
+**`downloadBlob`** saves any bytes the page holds (a chart's PNG, an archive) and answers whether the browser took them, under the name it offered; `downloadText` now saves through it, so text and binary files share one path. **`toCsv`** writes a table as RFC 4180 CSV (CRLF line ends, quoted where needed, doubled quotes) and defuses a TEXT cell that a spreadsheet would run as a formula (one starting with `=`, `+`, `-`, `@`, a tab or a carriage return) with a leading apostrophe; a number is never prefixed, so `-3` stays a value. **`elementToPng`** rasterises a drawn chart in the browser: one `<svg>` is serialised with its computed styles inlined (CSS variables resolved), anything else is cloned into an SVG `foreignObject`, and a failure rejects with **`ElementToPngError`**, whose `reason` (`unsupported`, `tainted`, `empty`) a host maps to its own words. **`serializeElement`** is the serialisation half on its own.
+
+Docs, sheets and every kind:
+
+**`DocCover`, `SheetCover` and `DashboardCover`** are the native gallery covers for `ArtifactCard.preview`, one module (`@crewlethq/ui/ArtifactCover`) sharing one frame: a doc's opening, rendered by the host's own Markdown renderer, set as a small page that fades at the card's edge; and a sheet's first columns and rows (at most `SHEET_COVER_COLUMNS` and `SHEET_COVER_ROWS`) as a hairline grid; and a dashboard's headline figures: up to three `stats`, each the reader's own value when the gallery holds it and otherwise its label and the title of the dataset it cites (never a placeholder number), else a schematic of the board's first widgets on its twelve columns (`layout`), else the kind's glyph. All three are decorative, as the card's preview is.
+
+**`MergeConflicts`** settles a three-way merge of one text: each passage both edits changed shows the other side's lines (`theirs`, "version 4") beside the draft's, and the person keeps theirs, yours or both. Nothing is pre-chosen, `onApply` reports one `MergeChoice` per clash in order once each has one, and focus moves to its heading when it opens. The merge itself stays the host's.
+
+**`ArtifactIcon`** draws the one short word an artifact's author gave it ("chart", "calendar") as a glyph, from a closed, case-insensitive vocabulary (`ARTIFACT_ICON_WORDS`, looked up by `artifactIconGlyph`), and the kind's glyph for any other word. **`ObjectHeader`** takes a `description`, the author's sentence under the title, clamped to two lines.
+
+**`CanvasBoard` draws a design.** Artboards sit on a dotted `Canvas` at their own size with their titles above them, and titles and stickies (on `Note`'s papers) sit beside them. A board renders what the caller draws inside it only while it is on screen and at least `minLiveWidth` pixels wide, and at most `maxLive` (twelve) at once, so a canvas of sixty boards runs a dozen pages; the rest draw a titled placeholder of their size. `liveBoards` is that budget on its own, with no React in it. A live board is covered by a shield that pans like the field around it until a click hands the board the pointer, and Escape gives it back. With `editable`, a board's title moves it and its corner resizes it, by pointer or arrow keys, and notes are moved, resized, retyped and deleted; each finished gesture is reported once, in whole canvas pixels.
+
+**`CanvasSchematic` draws a design's cover** from its boards' frames alone: every board where the canvas places it, the cover board marked and titled, notes as faint blocks.
+
+**`Canvas` reports its view.** `onViewChange` is called with the view and the viewport's size from the first fit on, with an easing's destination rather than each step of it.
+
+**`DocTabsEditor`** is a document's tabs as an editor arranges them: each tab's title edited at its field and held to the host's `titleProblem` there, the open tab marked (`selected`, `onSelect`), tabs moved by their handle, the arrow keys or Move up and Move down, removed (never the last), and a new tab added by its title after the open one. The host owns the tabs; every change is reported.
+
+Fixes from the artifact audit:
+
+- **`SheetGrid`**: a row's number carries its actions (on the active row, on hover, and Shift+F10) with Delete row through `onDeleteRow`, which the host confirms. A refusal is announced as it arrives, and the sync strip holds it as "N changes not saved" (`SheetSyncState.refused`) until the reader dismisses it through `onDismissRefused`, which calls `SheetPendingEdits.dismissAll`, so a refused write is never followed by "Saved". Text and long text edit in an overlay at least the column's width that wraps and grows to six lines. `fit="content"` sizes the grid to its rows, capped by `height` or `--crewlet-sheet-max-height`. List editors show a filter only above eight choices, and multi-select cells keep their chips on one line with a "+N" count.
+- **`TagGroup`** takes `overflow="fit"`: one line, with the tags that do not fit counted in a static "+N" chip.
+- **`SegmentedControl`**: `capped` draws a count as a floor ("50+"); a disabled option with `describedBy` stays focusable and says why it cannot be chosen; a pill row wraps inside its container; and a value changed from outside the row puts the tab stop back on the choice.
+- **`Checkbox`** takes `size="sm"`, the label at the compact step for a dense form row.
+- **`Section`** keeps its title on one line and lets the hint give way beside it. **`Meter`** draws its track with an edge on any ground, a minimum fill above zero, and moves its figure to its own line rather than cutting the label.
+- **`VersionTimeline`** reads a version's kind ("Published") on the meta line, marks the version on show by fill alone, and its label action reads "Label". **`ShareDialog`**'s default title names its object in curly quotes.
+- Presence hands out **`PRESENCE_HUES`**, the node hues without purple, so a collaborator is never ringed in the accent's hue. An agent whose chosen hue is purple keeps it.
+- **`@crewlethq/artifact-kit`**: a page's sheet is as tall as its rows, and its sync strip offers Dismiss for refused changes.
+
+What to change:
+
+- A complete `SheetLabels` object of your own (rather than overrides through `labels` or `sheetLabels()`) needs the new keys `dismiss`, `notSaved`, `rowActions`, `deleteRow` and `rowActionsHelp`.
+- A host that draws `SheetGrid` with `SheetPendingEdits` passes `onDismissRefused={() => edits.dismissAll()}`; without it, a refusal holds the strip at "not saved" until its cell is edited again.
+- A test that finds a version's label action by the name "Name" finds it by "Label".
+
+## Changes in 0.24.0
+
+**The `markdown` artifact kind is now `doc`**, as the engine names it (`artifacts.KindDoc`). `ArtifactKind`, `ARTIFACT_KINDS`, `ArtifactKindGlyph` and `ArtifactCard` take `doc`, and the card's default label for it is "Doc".
+
+What to change: pass `kind="doc"` wherever you passed `kind="markdown"`, and rename the `markdown` key of a custom `labels.kinds` to `doc`.
+
+**`ArtifactKind` names every kind the engine ships**: `html`, `doc`, `slides`, `design`, `dashboard` and `sheet`, in the engine's order (`artifacts.Kinds`), which `ARTIFACT_KINDS` lists. Each draws its own glyph where a card has no preview (`slides` a presentation, `design` a palette, `dashboard` a dashboard layout), and its own default label ("Slides", "Design", "Dashboard"). A custom `labels.kinds` passes only the kinds it renames. `@crewlethq/icons` adds `PresentationGlyph`.
+
+What to change: a `Record<ArtifactKind, ...>` of your own needs the three new keys.
+
 ## Changes in 0.23.0
 
 **A text field's edge is quieter.** `Input`, the textarea, `TagsInput`, `MarkdownEditor` and the typed boxes inside `DateTimePicker` and `TimeWindowPicker` draw `--color-border-field` (new in `@crewlethq/tokens` 0.23.0): the secondary button's edge lifted only as far as 3:1 on the surfaces a field stands on, rather than the control boundary that was the brightest edge on the page. Under the pointer the edge steps up to `--color-border-control`; it used to step down to the hover hairline and fade. Checkboxes, switches and editors inside a row keep `--color-border-control`.

package/dist/ArrangeList/index.js

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

package/dist/ArtifactCard/ArtifactCard.d.ts

@@ -4,8 +4,9 @@ import { type AvatarStackMember } from '../Avatar/index.js';
 import { type Principal } from '../Principal/index.js';
 import { type TimeValue } from '../RelativeTime/index.js';
 /** What an artifact is, as the engine names it (`artifacts.Kind`), which decides how it is drawn. */
-export type ArtifactKind = 'html' | 'markdown' | 'sheet';
-export declare const ARTIFACT_KINDS: readonly ["html", "markdown", "sheet"];
+export type ArtifactKind = 'html' | 'doc' | 'slides' | 'design' | 'dashboard' | 'sheet';
+/** Every kind, in the engine's order (`artifacts.Kinds`). */
+export declare const ARTIFACT_KINDS: readonly ["html", "doc", "slides", "design", "dashboard", "sheet"];
 /** The glyph a kind is drawn with, wherever a kind is drawn, at a glyph size step or in px. */
 export declare function ArtifactKindGlyph({ kind, size }: {
     kind: ArtifactKind;

package/dist/ArtifactCard/index.js

@@ -1,4 +1,4 @@
-export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph } from '../chunk-TODND5AD.js';
+export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph } from '../chunk-6J35F334.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';

package/dist/ArtifactCover/ArtifactCover.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+/**
+ * The native covers a gallery card draws in `ArtifactCard.preview`, one per
+ * kind whose content can be drawn small (D64): never a screenshot, always the
+ * artifact's own content drawn by the design system at card size. A card
+ * whose kind has no cover keeps its glyph.
+ *
+ * The dashboard's cover is DashboardCover.tsx beside this file. All three
+ * share one frame, `.crewlet-artifact-cover`, so a card draws each the same way.
+ *
+ * DECORATIVE. The card is one link named by its title and described by its
+ * facts, and its preview is hidden from assistive tech, so a cover carries no
+ * names, roles or focusable parts of its own.
+ */
+export interface DocCoverProps {
+    /**
+     * The opening of the doc, rendered by the host's own Markdown renderer as
+     * the plain elements `Document` styles. It is clipped to the card, so a
+     * host passes a few lines rather than the whole document.
+     */
+    children: ReactNode;
+    className?: string | undefined;
+}
+/** A doc's cover: its opening, set as a small page that fades out at the card's edge. */
+export declare function DocCover({ children, className }: DocCoverProps): import("react").JSX.Element;
+export interface SheetCoverProps {
+    /** The first columns' names. */
+    columns: readonly string[];
+    /** The first rows, each a cell's text per column. */
+    rows: readonly (readonly string[])[];
+    className?: string | undefined;
+}
+/** The columns and rows a sheet cover draws at most; past them a card has no room. */
+export declare const SHEET_COVER_COLUMNS = 4;
+export declare const SHEET_COVER_ROWS = 5;
+/** A sheet's cover: its first columns and rows as a small grid. */
+export declare function SheetCover({ columns, rows, className }: SheetCoverProps): import("react").JSX.Element;

package/dist/ArtifactCover/DashboardCover.d.ts

@@ -0,0 +1,46 @@
+import type { HTMLAttributes } from 'react';
+/** One headline figure a cover draws. */
+export interface DashboardCoverStat {
+    /** The widget's title: "Open tasks". */
+    label: string;
+    /**
+     * The figure as THIS reader sees it, already formatted. Unset when the
+     * gallery does not hold it, and then the cover draws `source` in its place,
+     * never a placeholder number.
+     */
+    value?: string | undefined;
+    /** The title of the dataset the figure is drawn from. */
+    source?: string | undefined;
+}
+/** What one widget of the board is, for the schematic. */
+export type DashboardCoverWidgetKind = 'stat' | 'chart' | 'table' | 'note';
+/** One widget of the board, for the schematic: its width in grid columns and what it is. */
+export interface DashboardCoverWidget {
+    /** Columns of a twelve-column grid, 1 to 12. */
+    w: number;
+    kind: DashboardCoverWidgetKind;
+}
+export interface DashboardCoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The board's first headline figures. At most three are drawn. */
+    stats?: readonly DashboardCoverStat[] | undefined;
+    /** The board's first widgets, drawn as a schematic when there are no stats. */
+    layout?: readonly DashboardCoverWidget[] | undefined;
+}
+/**
+ * A dashboard artifact's cover in a gallery, passed as `ArtifactCard`'s
+ * `preview`: drawn natively, never a screenshot.
+ *
+ * THE READER'S NUMBERS OR NONE. A dashboard's figures are decided per reader,
+ * so a cover that baked in one reader's numbers would show every other reader
+ * figures they may not be allowed to see. A stat the gallery holds for this
+ * reader draws its value; one it does not draws its label and the title of
+ * the dataset it cites, so the card still says what the board measures.
+ *
+ * Without stats, a schematic of the board's first widgets on its twelve
+ * columns says what shape the board is. With neither, the kind's glyph.
+ *
+ * DECORATIVE where `ArtifactCard` draws it: the card hides its preview from
+ * assistive technology, because the card's own title and facts are what a
+ * screen reader reads. Drawn on its own, the stats remain readable text.
+ */
+export declare function DashboardCover({ stats, layout, className, ...rest }: DashboardCoverProps): import("react").JSX.Element;

package/dist/ArtifactCover/index.d.ts

@@ -0,0 +1,6 @@
+import './ArtifactCover.css';
+import './DashboardCover.css';
+export { DocCover, SheetCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS } from './ArtifactCover.js';
+export type { DocCoverProps, SheetCoverProps } from './ArtifactCover.js';
+export { DashboardCover } from './DashboardCover.js';
+export type { DashboardCoverProps, DashboardCoverStat, DashboardCoverWidget, DashboardCoverWidgetKind, } from './DashboardCover.js';

package/dist/ArtifactCover/index.js

@@ -0,0 +1,14 @@
+export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-MQEEQVG6.js';
+import '../chunk-WI6K5M5X.js';
+import '../chunk-6J35F334.js';
+import '../chunk-4KP4RC3O.js';
+import '../chunk-3CZ7XAVY.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-UAN5NE7M.js';
+import '../chunk-5OM447RW.js';
+import '../chunk-YZCJ63JF.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ArtifactCover-D4MBEJ5H.css

@@ -0,0 +1,67 @@
+/* The frame every native cover shares (DocCover, SheetCover, DashboardCover):
+   it fills a card's preview edge to edge and clips whatever runs past it. */
+.crewlet-artifact-cover {
+  box-sizing: border-box;
+  align-self: stretch;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* A doc's cover: a small page, inset from the card's edges, whose text runs
+   off the bottom under a fade rather than stopping mid-line at a hard edge. */
+.crewlet-doc-cover {
+  position: relative;
+  display: block;
+  padding: var(--spacing-3) var(--spacing-4) 0;
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+}
+
+.crewlet-doc-cover::after {
+  content: '';
+  position: absolute;
+  inset: auto 0 0;
+  height: 40%;
+  background: linear-gradient(to bottom, transparent, var(--color-surface-elevated));
+  pointer-events: none;
+}
+
+.crewlet-doc-cover__page {
+  font-size: var(--font-size-2xs);
+  line-height: 1.45;
+}
+
+.crewlet-doc-cover__page > :first-child {
+  margin-top: 0;
+}
+
+.crewlet-doc-cover__page h1,
+.crewlet-doc-cover__page h2,
+.crewlet-doc-cover__page h3 {
+  font-size: var(--font-size-sm);
+}
+
+/* A sheet's cover: its first columns and rows as a hairline grid. */
+.crewlet-sheet-cover {
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-sheet-cover-columns), minmax(0, 1fr));
+  grid-auto-rows: min-content;
+  background: var(--color-surface-elevated);
+  font-size: var(--font-size-2xs);
+}
+
+.crewlet-sheet-cover__cell {
+  overflow: hidden;
+  padding: var(--spacing-1) var(--spacing-2);
+  border-bottom: 1px solid var(--color-border-default);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.crewlet-sheet-cover__cell--head {
+  background: var(--color-surface-inset);
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-medium);
+}

package/dist/ArtifactIcon/ArtifactIcon.d.ts

@@ -0,0 +1,29 @@
+/**
+ * An artifact's own icon: the one short word its author gave it ("chart",
+ * "calendar"), drawn as a glyph, with the kind's glyph when the word names
+ * nothing this design system draws.
+ *
+ * A CLOSED VOCABULARY, not a lookup into every glyph by name. The word is
+ * typed by a person or an agent into a free field, so it is matched against a
+ * small table of common words, case-insensitive, and anything else falls back
+ * to the kind: an unknown word never draws a broken or arbitrary mark, and a
+ * glyph renamed in the icon set is one edit here rather than a stored word
+ * that silently stops matching.
+ */
+import { ChartColumnGlyph, type GlyphSize } from '@crewlethq/icons/glyphs';
+import { type ArtifactKind } from '../ArtifactCard/index.js';
+type Glyph = typeof ChartColumnGlyph;
+/** Every word an icon may be, for a hint or a picker. */
+export declare const ARTIFACT_ICON_WORDS: readonly string[];
+/** The glyph an icon word names, or null for a word outside the vocabulary (or none). */
+export declare function artifactIconGlyph(word: string | undefined | null): Glyph | null;
+export interface ArtifactIconProps {
+    /** The artifact's icon word, as its author typed it. */
+    icon?: string | undefined | null;
+    /** The kind, whose glyph is drawn when the word names nothing. */
+    kind: ArtifactKind;
+    size?: GlyphSize | undefined;
+}
+/** An artifact's icon word as a glyph, or its kind's glyph. Decorative: the title names the artifact. */
+export declare function ArtifactIcon({ icon, kind, size }: ArtifactIconProps): import("react").JSX.Element;
+export {};

package/dist/ArtifactIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { ARTIFACT_ICON_WORDS, ArtifactIcon, artifactIconGlyph } from './ArtifactIcon.js';
+export type { ArtifactIconProps } from './ArtifactIcon.js';

package/dist/ArtifactIcon/index.js

@@ -0,0 +1,13 @@
+export { ARTIFACT_ICON_WORDS, ArtifactIcon, artifactIconGlyph } from '../chunk-V2Z24W2Z.js';
+import '../chunk-6J35F334.js';
+import '../chunk-4KP4RC3O.js';
+import '../chunk-3CZ7XAVY.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-UAN5NE7M.js';
+import '../chunk-5OM447RW.js';
+import '../chunk-YZCJ63JF.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/AvatarPicker/index.js

@@ -1,11 +1,11 @@
-export { AvatarPicker } from '../chunk-U63Y5OCW.js';
-import '../chunk-OQT7GSKJ.js';
-import '../chunk-7QL2OFP6.js';
-import '../chunk-XJFOOXCF.js';
+export { AvatarPicker } from '../chunk-PRNX5AFE.js';
+import '../chunk-SGIQCI6Y.js';
+import '../chunk-RCQXUT5K.js';
+import '../chunk-HJEVSQN6.js';
 import '../chunk-BWRGFKJP.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-5PSXBL73.js';
-import '../chunk-CBOICT64.js';
+import '../chunk-HVIX5ECM.js';
+import '../chunk-RKKO7QHH.js';
 import '../chunk-5OM447RW.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-HMPFGIWM.js';

package/dist/Canvas/Canvas.d.ts

@@ -73,7 +73,7 @@
  * Ported from the engine dashboard's `ui/Canvas.tsx`, with its suite.
  */
 import { type ReactNode, type Ref } from 'react';
-import { type CanvasPoint, type CanvasRect } from './geometry.js';
+import { type CanvasPoint, type CanvasRect, type CanvasSize, type CanvasView } from './geometry.js';
 /**
  * How a view change moves: a correction to where the reader already is, or the
  * chart travelling somewhere else. See the state that holds it, below.
@@ -243,7 +243,18 @@ export interface CanvasProps {
     labels?: Partial<CanvasLabels> | undefined;
     /** Called once, when the first measured layout has been fitted. */
     onReady?: (() => void) | undefined;
+    /**
+     * Called with the view and the viewport's size whenever either changes,
+     * from the first fit on.
+     *
+     * THE VIEW IT IS GIVEN IS WHERE THE CONTENT IS GOING, not where an easing
+     * has got to: a fit or a zoom step reports its destination at once, so a
+     * surface that mounts what is on screen (a design's live artboards) mounts
+     * what the reader will see when the move lands, rather than chasing every
+     * frame of it.
+     */
+    onViewChange?: ((view: CanvasView, viewport: CanvasSize) => void) | undefined;
     ref?: Ref<CanvasHandle> | undefined;
     className?: string | undefined;
 }
-export declare function Canvas({ label, content, children, overlay, controls, controlsPlacement, controlsExtra, controlsBelow, hint, largestItemWidth, dimmed, ground, touch, labels, onReady, ref, className, }: CanvasProps): import("react").JSX.Element;
+export declare function Canvas({ label, content, children, overlay, controls, controlsPlacement, controlsExtra, controlsBelow, hint, largestItemWidth, dimmed, ground, touch, labels, onReady, onViewChange, ref, className, }: CanvasProps): import("react").JSX.Element;

package/dist/Canvas/index.js

@@ -1,4 +1,4 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-TXAFKH2A.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-KZOGQXSP.js';
 import '../chunk-VYOKRN2I.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-HMPFGIWM.js';

package/dist/CanvasBoard/CanvasBoard.d.ts

@@ -0,0 +1,117 @@
+/**
+ * A canvas of artboards and notes: a design.
+ *
+ * WHAT IT DRAWS. Each artboard is a frame of its own size, placed on the
+ * canvas at its position, with its title above it; the caller renders what is
+ * inside (for a design, a sandboxed page). Notes are titles laid over groups of
+ * boards and coloured stickies beside them, drawn here as plain text.
+ *
+ * THE VISIBILITY BUDGET (budget.ts). A board's content is rendered only while
+ * the board is on screen and drawn wide enough to read, and at most
+ * [CANVAS_BOARD_MAX_LIVE] at once; every other board draws as a placeholder of
+ * its size, so a canvas of sixty boards runs a dozen pages, not sixty.
+ *
+ * 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;
+ * a click (not a drag) on it activates that board, and only then does the page
+ * receive the pointer. Escape gives the pointer back to the canvas.
+ *
+ * EDITING (`editable`). A board's title bar becomes its move handle and a
+ * corner its resize handle, by pointer or by the arrow keys (Shift for a larger
+ * step); a note gains the same handles, and its text is edited in place. 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).
+ *
+ * THE CHROME STAYS ONE SIZE ON SCREEN. Titles and handles are counter-scaled
+ * by the zoom, so a board's label is readable and its handle is a full pointer
+ * target whatever the zoom, while the board itself scales with the canvas.
+ */
+import { type ReactNode, type Ref } from 'react';
+import { type CanvasHandle, type CanvasLabels } from '../Canvas/index.js';
+/** An artboard: an id, its frame in canvas pixels and its title. */
+export interface CanvasBoardItem {
+    id: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    title: string;
+}
+/** A sticky's colour, a name drawn from the theme's own palette. */
+export type CanvasNoteColor = 'yellow' | 'pink' | 'blue' | 'green' | 'purple';
+/** Every sticky colour, the first being a sticky's default. */
+export declare const CANVAS_NOTE_COLORS: readonly ["yellow", "pink", "blue", "green", "purple"];
+/** A note: a title over a group of boards, or a sticky beside them. */
+export interface CanvasBoardNote {
+    id: string;
+    kind: 'title' | 'sticky';
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    text: string;
+    color?: CanvasNoteColor | undefined;
+}
+/** A frame as an edit reports it. */
+export interface CanvasBoardRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** Every string the board renders itself. */
+export interface CanvasBoardLabels {
+    /** A board's size, read after its title: "1440 by 900". */
+    size: (w: number, h: number) => string;
+    /** The control that opens one board full size. */
+    open: (title: string) => string;
+    /** The move handle of a board or note, in edit mode. */
+    move: (title: string) => string;
+    /** The resize handle of a board or note, in edit mode. */
+    resize: (title: string) => string;
+    /** The control that edits a note's text. */
+    editNote: string;
+    /** The control that deletes a note. */
+    removeNote: string;
+    /** The field a note's text is typed into. */
+    noteText: string;
+    /** Said by a board whose page is not running because it is off screen or too small. */
+    paused: string;
+    /** Said by an active board, so a reader knows how to give the pointer back. */
+    active: string;
+}
+export interface CanvasBoardProps {
+    /** The accessible name of the canvas, such as "Launch landing page". */
+    label: string;
+    boards: readonly CanvasBoardItem[];
+    notes?: readonly CanvasBoardNote[] | undefined;
+    /** What a live board draws inside its frame. Called only for live boards. */
+    renderBoard: (board: CanvasBoardItem) => ReactNode;
+    /** The most boards live at once. */
+    maxLive?: number | undefined;
+    /** The narrowest a board may be drawn on screen and still be live, in pixels. */
+    minLiveWidth?: number | undefined;
+    /** Whether a person may move and resize boards and edit notes. */
+    editable?: boolean | undefined;
+    /** The smallest and largest side a board or note may be given, in canvas pixels. */
+    minSide?: number | undefined;
+    maxSide?: number | undefined;
+    /** A board was moved or resized, reported once when the gesture ends. */
+    onBoardChange?: ((id: string, rect: CanvasBoardRect) => void) | undefined;
+    /** A note was moved, resized or retyped. */
+    onNoteChange?: ((note: CanvasBoardNote) => void) | undefined;
+    /** A note was deleted. */
+    onNoteRemove?: ((id: string) => void) | undefined;
+    /** The control that opens one board full size; absent, there is none. */
+    onOpen?: ((id: string) => void) | undefined;
+    /** The board that holds the pointer changed; null is the canvas itself. */
+    onActivate?: ((id: string | null) => void) | undefined;
+    /** Anything else in the canvas's control bar. */
+    controlsExtra?: ReactNode | undefined;
+    labels?: Partial<CanvasBoardLabels> | undefined;
+    canvasLabels?: Partial<CanvasLabels> | undefined;
+    /** The canvas underneath, for a caller that reveals or fits a board. */
+    canvasRef?: Ref<CanvasHandle> | undefined;
+    className?: string | undefined;
+}
+export declare function CanvasBoard({ label, boards, notes, renderBoard, maxLive, minLiveWidth, editable, minSide, maxSide, onBoardChange, onNoteChange, onNoteRemove, onOpen, onActivate, controlsExtra, labels, canvasLabels, canvasRef, className, }: CanvasBoardProps): import("react").JSX.Element;

package/dist/CanvasBoard/budget.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Which artboards a canvas frames at once: the visibility budget.
+ *
+ * WHY A BUDGET. Every live artboard is a document of its own (a sandboxed
+ * frame running its own scripts), so a canvas of sixty boards zoomed out would
+ * otherwise run sixty pages at once, most of them drawn smaller than a thumb.
+ * A board is live only while it is on screen AND drawn wide enough to read,
+ * and at most a fixed number are live together, the largest on screen first.
+ * Every other board draws as a titled placeholder of its size.
+ *
+ * Pure arithmetic over the canvas's view, so it is tested without a layout.
+ */
+import type { CanvasSize, CanvasView } from '../Canvas/index.js';
+/** A board's frame on the canvas, in world units. */
+export interface BoardFrame {
+    id: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/**
+ * The most boards live at once. Twelve covers a landing page's sections on
+ * one screen with room, and is well under what a browser runs smoothly as
+ * separate documents.
+ */
+export declare const CANVAS_BOARD_MAX_LIVE = 12;
+/**
+ * The narrowest a board may be drawn, in screen pixels, and still be live:
+ * below it a page's text is unreadable, so running it buys nothing.
+ */
+export declare const CANVAS_BOARD_MIN_LIVE_WIDTH = 160;
+/**
+ * The boards to frame for a view: those on screen and at least `minWidth`
+ * pixels wide there, the most visible area first, at most `max` of them,
+ * answered in the order `boards` lists them.
+ */
+export declare function liveBoards(boards: readonly BoardFrame[], view: CanvasView, viewport: CanvasSize, max?: number, minWidth?: number): string[];

package/dist/CanvasBoard/index.d.ts

@@ -0,0 +1,5 @@
+import './CanvasBoard.css';
+export { CanvasBoard, CANVAS_NOTE_COLORS } from './CanvasBoard.js';
+export type { CanvasBoardItem, CanvasBoardLabels, CanvasBoardNote, CanvasBoardProps, CanvasBoardRect, CanvasNoteColor, } from './CanvasBoard.js';
+export { CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, liveBoards } from './budget.js';
+export type { BoardFrame } from './budget.js';

package/dist/CanvasBoard/index.js

@@ -0,0 +1,10 @@
+export { CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_NOTE_COLORS, CanvasBoard, liveBoards } from '../chunk-3D7PSL2L.js';
+import '../chunk-63WJLRB2.js';
+import '../chunk-KZOGQXSP.js';
+import '../chunk-VYOKRN2I.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-HMPFGIWM.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';