@crewlethq/ui 0.17.0 → 0.18.0

package/README.md

@@ -51,7 +51,10 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | 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`) |
 | Layout | `Container`, `Section`, `Card`, `Tabs`, `Accordion`, `Disclosure`, `Outline` (with `useActiveHeading` and `scrollToHeading`), `TreeGrid` |
 | 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` |
+| 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) |
+| 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`, and `PresenceModel` (the roster order, one entry per person, the session hues, with no React in it) |
 
 Storybook stories live under `apps/storybook/src/stories`.
 
@@ -198,6 +201,38 @@ 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.18.0
+
+0.18.0 adds the pieces the engine dashboard's Artifacts workspace is built from: the frame an artifact runs in, its versions, who it is shared with, and the card and refusal that stand for it elsewhere; the editable sheet; and the marks that show who else is in an artifact.
+
+**`SandboxedFrame`** embeds an artifact's document with the engine's `sandbox` and `allow` attributes set verbatim, after a second check that refuses any token the host never sets: there is no `allow-popups` at all, and `allow-same-origin` only when the artifact has an origin of its own. A hello is accepted only from the iframe's own window, carrying the nonce minted with its ticket, and per artifact from the artifact's origin; only then is one `MessagePort` transferred, in the same task, to the window that was checked. The reader's appearance travels in the URL fragment for the first paint and on the port afterwards. A document that does not announce itself is torn down (`failed`, or `navigated` when it replaced one that did), a runtime with no common bridge version is `outdated`, and each refusal reaches `onRefusal`. The frame never opens a window: an external link reaches `onOpenLink`. A port message asking for focus back moves focus to the frame's region, or to `onFocusExit`.
+
+**`FrameProtocol`** is that wire, written once for both ends and free of React, so the engine's runtime and `@crewlethq/artifact-kit`'s `theme.js` import it: `FRAME_MESSAGE`, `frameFragment` and `parseFrameFragment`, `readFrameHello`, `negotiateBridge`, `checkFrameSandbox`, `readFrameTheme` and `applyFrameTheme`, and `externalUrl`, which admits absolute https, http and mailto links only and never one carrying a user name or password.
+
+**`LinkInterstitial`** is the stop between an artifact's link and the open web: the host in large type (the parser's ASCII form, so a look-alike name shows as the `xn--` name it is), the whole address, a warning on plain http, and **`openExternal`**, which opens with `noopener` and `noreferrer`.
+
+**`VersionTimeline`** lists versions newest first on the `Timeline` ledger with the one on show current, Compare as a toggle, Restore (never on the newest) and Name, glyphs and words for schema, capability and restore versions, and a line for versions past retention. **`Timeline.Item` takes `label={false}`** for an item whose content already says what it is.
+
+**`ShareDialog`** is who can open an artifact on the engine's five-role ladder (viewer, commenter, contributor, editor, owner): a grantee search slot handed the role chosen beside it, direct shares with a role control and a remove, effective access with what it is through and no control, company access in words, and Copy link. Changes are confirmed rather than optimistic, a refusal is said on its row, no control offers owner, and a reader who cannot share sees the same audience in words with the reason. **`PrincipalPicker`** is the search the slot usually holds, grouped people, agents and teams. **`Principal`** and **`PrincipalAvatar`** draw a person, an agent or a team one way everywhere.
+
+**`ArtifactCard`** is one real link named by the artifact's title and described by its facts, with a natively drawn preview or the kind's glyph (**`ArtifactKindGlyph`**), and a compact row. **`AccessDeniedCard`** is the refusal an artifact's place shows; "not found" says both things the engine means by it and never names an owner.
+
+**The appearance attributes have a module of their own.** `applyTheme` and `applyDensity` take an optional root element, **`applyPalette`** is new (the default theme removes the attribute, as `system` and `normal` do), and `THEME_PREFERENCES`, `DENSITY_PREFERENCES`, `PALETTE_ID` and their guards are exported.
+
+**`SheetGrid`** is the editable, virtualised grid of a sheet artifact, and the grid `@crewlethq/artifact-kit` draws for a page's `<crewlet-sheet>`. It is an ARIA grid with one tab stop and a spreadsheet's keys: the arrows, Enter or F2 to edit, Escape to cancel, Tab across (leaving the grid at a row's edge), Space on a checkbox, typing to start an edit with that character, Mod+C, Mod+X and Mod+V for ranges as tab-separated values, Delete to clear, Mod+Z and Mod+Shift+Z handed to the host's `onUndo` and `onRedo`, and Mod+Alt+H for a cell's history (`onShowHistory`, also a control on the active cell). Every one of the eleven column types is drawn and edited (text, long text, number, checkbox, select, multi-select, status, person, date, URL, rating); frozen columns lead and stay in view; headers sort; only the rows in view are in the document, so ten thousand rows cost what forty do. Edits reach the host as one batch through `onEdit`: the host draws the value at once and lists the field in the row's `pending` until the engine confirms it, which the grid draws as Saving (the honest instant edit, D23), and a refusal arrives in the row's `refused` and is said on the cell. A value that does not fit its column is refused on the cell before it is sent, with the reason. A remote change landing under the editor keeps it open and names the writer, with Keep yours and Use theirs. Collaborators on cells (`presence`) wear a ring in their presence hue and a name flag, cells changed since the reader looked (`changed`) wear a **`ChangeMark`**, and the focused cell's description says all of it in words. `onActiveCellChange` and `onEditingChange` hand the host the reader's own cell for its presence frames, and `sync` drives the strip that says Saved, Saving, Offline or Could not save with Retry.
+
+**The cells stand on their own.** `CheckboxCell`, `TextCell`, `LongTextCell`, `NumberCell`, `SelectCell`, `MultiSelectCell`, `PersonCell`, `StatusCell`, `DateCell`, `UrlCell` and `RatingCell` (and `SheetCell` with a `type`) draw the same display and editors as a field in a form: a checkbox is a real checkbox, every other type a button that says its column and value and opens its editor in place.
+
+**`SheetModel`** holds every rule the sheet is drawn from, with no React and no stylesheet, so the artifact kit and any host share it: the column, row and edit shapes, mirroring the engine's datastore schema; `normalizeValue`, `displayText`, `editText` and `parseText` for each type, with the reason a value is refused; `optionHue` and `statusTone`; the keyboard model (`moveFrom`, `rangeOf`) and the row window (`visibleRows`); `toTSV`, `parseTSV`, `planPaste` and `planClear`; **`SheetPendingEdits`**, the bookkeeping of which cells wait on the engine and which were refused, with `refusalText`; and `cellDescription`, the words a focused cell is described by.
+
+**Presence** is drawn in the narrow presence colour exception (D22): a collaborator's node hue, on a cursor, a selection ring, a cell outline and a name flag only, always beside the name. **`PresenceStack`** is who is here, people editing first, each present badge ringed in its hue and an idle one faded, one image named "You and 3 others are here", or a button per badge with `onSelect`. **`PresenceRing`** is the inset ring in a hue, dashed when idle; **`presenceHueClass`** sets the one hue variable every presence mark reads. **`CursorFlag`** is the name on its hue, in the new `--color-presence-flag-text`. **`LiveCursor`** is a pointer and its flag at a point, fading after five seconds still and hidden after thirty, jumping rather than gliding under a reduced-motion preference. **`FollowBanner`** is the follow mode strip, which Escape ends from anywhere. Every mark is decorative to assistive technology, because the same facts are said in words. **`PresenceModel`** holds the roster order (`presenceOrder`), one entry per person (`collapseSessions`), the session hues (`assignPresenceHues`: an agent keeps its chosen hue, a person takes the first hue nobody present wears) and the words.
+
+**`Tag` takes `hue`**, a node hue an author chose for a value (a select option's colour), drawn in the node steps; a hue is never a state, so with one the variant colours nothing.
+
+`@crewlethq/icons` adds `share-2`, `rotate-ccw-clock` (Lucide's canonical name for the drawing it once called `history`), `upload`, `file-code`, `image`, and `mouse-pointer-2` (fillable, for the live cursor). `@crewlethq/tokens` adds `--color-presence-flag-text`, `--color-change-mark`, `--shadow-cursor`, `--z-index-presence` and `--size-sheet-row`.
+
+What to change: nothing. Every addition is new, and `applyTheme` and `applyDensity` keep their one-argument form.
+
 ## Changes in 0.17.0
 
 **`Avatar` takes `mark`**, a glyph on the lower-right corner that says how a principal is present rather than what it is doing: a seat's badge acting through an API token keeps its own initials and wears a key there. It sits in the notch a status uses, drawn quiet in the neutral badge's raised fill, strong hairline and secondary ink, and a `status` wins over it. **`markLabel`** is said after the name by a badge that names itself (`Miles avatar, signed in with an API token`); a decorative one says nothing. A marked badge, like one with a status, is drawn inside a `.crewlet-avatar-frame` and draws no ring. What to change: nothing.

package/dist/AccessDeniedCard/AccessDeniedCard.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import type { HeadingLevel } from '../utils/headingLevel.js';
+/**
+ * Why an artifact cannot be shown.
+ *
+ * `not-found` is what the engine answers for an artifact the reader has no
+ * relation to, as much as for one that does not exist: telling the two apart
+ * would tell anybody holding a link that the artifact is there. So it says
+ * both, and it says them together. `no-access` is for a reader the engine has
+ * told plainly (a member of the company opening a private artifact through a
+ * surface that already named it). `revoked` is access that ended while the
+ * reader had it open. `app-locked` is a reader whose role does not open the
+ * Artifacts app at all.
+ */
+export type AccessDeniedReason = 'not-found' | 'no-access' | 'revoked' | 'app-locked';
+export declare const ACCESS_DENIED_REASONS: readonly ["not-found", "no-access", "revoked", "app-locked"];
+export interface AccessDeniedCardLabels {
+    titles: Record<AccessDeniedReason, string>;
+    /** The line under the title, given the owner's name when the caller knows it. */
+    descriptions: Record<AccessDeniedReason, (owner: string | undefined) => string>;
+}
+export interface AccessDeniedCardProps {
+    reason: AccessDeniedReason;
+    /** The owner's name, where the reader is allowed to know it, so the request names a person. */
+    owner?: string | undefined;
+    /** What the reader can do next: "Back to artifacts", "Request access". */
+    action?: ReactNode;
+    headingLevel?: HeadingLevel | 'none' | undefined;
+    className?: string | undefined;
+    labels?: Partial<AccessDeniedCardLabels> | undefined;
+}
+/**
+ * The card an artifact's place shows when the reader may not open it.
+ *
+ * IT SAYS WHAT THE READER CAN DO, never what the artifact is. A title, a
+ * kind or an owner the engine has not shown this reader stays unsaid, so the
+ * card is safe to draw from nothing but the engine's refusal.
+ */
+export declare function AccessDeniedCard({ reason, owner, action, headingLevel, className, labels }: AccessDeniedCardProps): import("react").JSX.Element;

package/dist/AccessDeniedCard/index.d.ts

@@ -0,0 +1,3 @@
+import './AccessDeniedCard.css';
+export { ACCESS_DENIED_REASONS, AccessDeniedCard } from './AccessDeniedCard.js';
+export type { AccessDeniedCardLabels, AccessDeniedCardProps, AccessDeniedReason } from './AccessDeniedCard.js';

package/dist/AccessDeniedCard/index.js

@@ -0,0 +1,8 @@
+export { ACCESS_DENIED_REASONS, AccessDeniedCard } from '../chunk-LFZ45HV2.js';
+import '../chunk-RA2ULG6H.js';
+import '../chunk-EG6NYWVK.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/AccessDeniedCard-WXM5DBDZ.css

@@ -0,0 +1,8 @@
+/* The card holds one empty state and nothing else, at a reading width, so a
+   refusal in a wide viewer body reads as one sentence rather than a banner. */
+
+.crewlet-access-denied-card {
+  width: 100%;
+  max-width: var(--size-measure);
+  margin-inline: auto;
+}

package/dist/ArtifactCard/ArtifactCard.d.ts

@@ -0,0 +1,61 @@
+import { type ReactNode } from 'react';
+import { type GlyphSize } from '@crewlethq/icons/glyphs';
+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"];
+/** 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;
+    size?: GlyphSize | undefined;
+}): import("react").JSX.Element;
+export type ArtifactCardSize = 'card' | 'compact';
+export interface ArtifactCardLabels {
+    kinds: Record<ArtifactKind, string>;
+    pinned: string;
+    version: (version: number) => string;
+    changes: (count: number) => string;
+    present: (count: number) => string;
+    updated: string;
+}
+export interface ArtifactCardProps {
+    title: string;
+    kind: ArtifactKind;
+    /** Where the card goes: the artifact's viewer. The whole card is one real link. */
+    href: string;
+    /**
+     * A thumbnail drawn natively: a sheet's first rows, an author's cover image.
+     * Never a screenshot. The kind's glyph stands in when there is none.
+     */
+    preview?: ReactNode;
+    owner?: Principal | undefined;
+    updatedAt: TimeValue;
+    /** Who made the latest change, when it is worth saying ("Maya"). */
+    updatedBy?: string | undefined;
+    /** Who has it open now. */
+    presence?: readonly AvatarStackMember[] | undefined;
+    /** Changes since this reader last opened it. Nothing is drawn for none or for never opened. */
+    changes?: number | undefined;
+    pinned?: boolean | undefined;
+    version?: number | undefined;
+    /** The project or task it belongs to, as its key ("OPS", "ENG-412"). */
+    project?: string | undefined;
+    /** `compact` is a row for a narrow rail or a phone, with no preview. */
+    size?: ArtifactCardSize | undefined;
+    className?: string | undefined;
+    /** Overrides the shared clock, for a story or a suite. */
+    now?: number | undefined;
+    labels?: Partial<ArtifactCardLabels> | undefined;
+}
+/**
+ * One artifact, as a card in a gallery, a row in a task's rail or an embed.
+ *
+ * THE WHOLE CARD IS ONE LINK, named by the title alone and described by the
+ * rest, so a reader moving through a gallery by link hears "Vendor scorecard"
+ * and then, if they wait, what it is and who changed it. Nothing inside is a
+ * second control: a pin or a menu inside a link is a control nobody can reach
+ * without opening the artifact. Those live on the gallery row's own menu.
+ */
+export declare function ArtifactCard({ title, kind, href, preview, owner, updatedAt, updatedBy, presence, changes, pinned, version, project, size, className, now, labels, }: ArtifactCardProps): import("react").JSX.Element;

package/dist/ArtifactCard/index.d.ts

@@ -0,0 +1,3 @@
+import './ArtifactCard.css';
+export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph } from './ArtifactCard.js';
+export type { ArtifactCardLabels, ArtifactCardProps, ArtifactCardSize, ArtifactKind } from './ArtifactCard.js';

package/dist/ArtifactCard/index.js

@@ -0,0 +1,12 @@
+export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph } from '../chunk-4U3GQ7D2.js';
+import '../chunk-4KP4RC3O.js';
+import '../chunk-3CZ7XAVY.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-UAN5NE7M.js';
+import '../chunk-5OM447RW.js';
+import '../chunk-EG6NYWVK.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ArtifactCard-EXVAEBV6.css

@@ -0,0 +1,109 @@
+/*
+ * A card in a gallery: the preview on top at a fixed ratio, so a grid of them
+ * lines up whatever each preview is, then the title and up to three lines of
+ * facts. `compact` is a row with the kind's glyph in place of the preview.
+ */
+
+.crewlet-artifact-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  color: inherit;
+  text-decoration: none;
+}
+
+.crewlet-artifact-card--compact {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  padding: var(--spacing-3);
+}
+
+.crewlet-artifact-card__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-bottom: 1px solid var(--color-border-default);
+  background: var(--color-surface-inset);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-card__glyph {
+  display: inline-flex;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-card__glyph--compact {
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-md);
+  height: var(--size-control-md);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-inset);
+}
+
+.crewlet-artifact-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding: var(--spacing-3);
+}
+
+.crewlet-artifact-card--compact .crewlet-artifact-card__body {
+  padding: 0;
+}
+
+.crewlet-artifact-card__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-artifact-card__title {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-artifact-card__pin {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-card__facts {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-artifact-card__line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-artifact-card__owner,
+.crewlet-artifact-card__presence {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-artifact-card__changes {
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+}

package/dist/AvatarPicker/index.js

@@ -1,14 +1,14 @@
-export { AvatarPicker } from '../chunk-HENOTGUV.js';
-import '../chunk-NXDEPUVG.js';
-import '../chunk-AYKXMIOR.js';
+export { AvatarPicker } from '../chunk-BOW2VUCH.js';
+import '../chunk-PA4CYTBY.js';
 import '../chunk-26PEPONN.js';
 import '../chunk-4LDTQWS7.js';
 import '../chunk-BWRGFKJP.js';
+import '../chunk-AYKXMIOR.js';
 import '../chunk-5PSXBL73.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-5OM447RW.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
-import '../chunk-5OM447RW.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ChangeMark/ChangeMark.d.ts

@@ -0,0 +1,26 @@
+import { type SheetChange, type SheetLabels } from '../SheetModel/index.js';
+export interface ChangeMarkProps {
+    /** Who changed it, by display name. */
+    by: string;
+    at: SheetChange['at'];
+    /** The value before the change, already written for a reader ("6.8"), or null to say nothing of it. */
+    previous?: string | null | undefined;
+    /** A BCP 47 tag for the time; the reader's own locale when absent. */
+    locale?: string | undefined;
+    className?: string | undefined;
+    labels?: Pick<Partial<SheetLabels>, 'changed'> | undefined;
+}
+/**
+ * The corner mark on a cell or an element that changed since the reader last
+ * looked, with a tooltip that says who changed it, when, and what it was:
+ * "Changed by Maya Ortiz, 10:42. Was 6.8."
+ *
+ * A SHAPE AND WORDS, never colour alone: the mark is a corner notch in
+ * `--color-change-mark`, and the tooltip is the meaning. The mark itself is
+ * decorative to assistive technology, because the element it sits on carries
+ * the same sentence in its description (SheetGrid writes it into every focused
+ * cell's), and a mark read out on top of that would say it twice. A host
+ * drawing the mark on an element of its own says the sentence the same way,
+ * with `changeText` from the sheet model.
+ */
+export declare function ChangeMark({ by, at, previous, locale, className, labels }: ChangeMarkProps): import("react").JSX.Element;

package/dist/ChangeMark/index.d.ts

@@ -0,0 +1,3 @@
+import './ChangeMark.css';
+export { ChangeMark } from './ChangeMark.js';
+export type { ChangeMarkProps } from './ChangeMark.js';

package/dist/ChangeMark/index.js

@@ -0,0 +1,8 @@
+export { ChangeMark } from '../chunk-PPAQFGS2.js';
+import '../chunk-YYZRLLLY.js';
+import '../chunk-S35G6PNC.js';
+import '../chunk-QWOPX2MN.js';
+import '../chunk-AYKXMIOR.js';
+import '../chunk-HMPFGIWM.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ChangeMark-3VMTW7MT.css

@@ -0,0 +1,22 @@
+/*
+ * A change mark (ChangeMark.tsx): a notch in the top end corner of whatever
+ * it sits on, which is the nearest positioned ancestor. A triangle drawn by
+ * two borders, so it is a shape at any zoom and needs no glyph.
+ */
+
+.crewlet-change-mark {
+  position: absolute;
+  top: 0;
+  inset-inline-end: 0;
+  width: 0;
+  height: 0;
+  border-top: var(--spacing-2) solid var(--color-change-mark);
+  border-inline-start: var(--spacing-2) solid transparent;
+  pointer-events: auto;
+}
+
+@media (forced-colors: active) {
+  .crewlet-change-mark {
+    border-top-color: CanvasText;
+  }
+}

package/dist/Combobox/index.js

@@ -2,7 +2,7 @@ export { Combobox } from '../chunk-ZFH7H7GS.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-4GB57WIT.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommandPalette/index.js

@@ -1,13 +1,13 @@
-export { CommandPalette } from '../chunk-PQ63NLFC.js';
-import '../chunk-DEEVA6TV.js';
+export { CommandPalette } from '../chunk-IFKBDRNJ.js';
+import '../chunk-2TZATTIU.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-4GB57WIT.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CursorFlag/CursorFlag.d.ts

@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from 'react';
+import type { NodeHue } from '../utils/nodeHue.js';
+/**
+ * Where a flag stands against the element it labels: above its end edge, below
+ * it, or in the flow for a component that places it itself (a live cursor).
+ */
+export type CursorFlagPlacement = 'top-end' | 'bottom-end' | 'inline';
+export interface CursorFlagProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The name, or several when more than one collaborator is on the same element ("Maya, @pm"). */
+    name: string | readonly string[];
+    hue: NodeHue;
+    /** A person's flag is a pill, an agent's a squircle, as their badges are. */
+    kind?: 'human' | 'agent' | undefined;
+    /** The collaborator is editing rather than looking: a pencil leads the name. */
+    editing?: boolean | undefined;
+    placement?: CursorFlagPlacement | undefined;
+}
+/**
+ * The name flag pinned to a collaborator's mark: a cell they are on, a cursor,
+ * a selection.
+ *
+ * THE NAME IS ALWAYS ON IT. A flag is the half of the presence colour
+ * exception (D22) that makes the hue mean somebody: a ring in a hue with no
+ * name beside it would be colour carrying identity on its own. The name is
+ * drawn in `--color-presence-flag-text`, which the palette suite holds at
+ * 4.5:1 on each of the six hues in every theme, and a long name is truncated
+ * rather than wrapped, so a flag never covers the row under it.
+ *
+ * DECORATIVE TO ASSISTIVE TECHNOLOGY. A flag moves with somebody else's
+ * attention, and announcing it would read the room out loud. The same fact is
+ * said in words wherever presence is listed, and in the focused element's
+ * description.
+ */
+export declare function CursorFlag({ name, hue, kind, editing, placement, className, ...rest }: CursorFlagProps): import("react").JSX.Element;

package/dist/CursorFlag/index.d.ts

@@ -0,0 +1,3 @@
+import './CursorFlag.css';
+export { CursorFlag } from './CursorFlag.js';
+export type { CursorFlagPlacement, CursorFlagProps } from './CursorFlag.js';

package/dist/CursorFlag/index.js

@@ -0,0 +1,3 @@
+export { CursorFlag } from '../chunk-3BYIWOTV.js';
+import '../chunk-I6POAB4V.js';
+import '../chunk-ODEQTPFM.js';

package/dist/CursorFlag-AJQJBUGY.css

@@ -0,0 +1,61 @@
+/*
+ * A collaborator's name flag (CursorFlag.tsx): the name on a plate of their
+ * presence hue, in the ink the palette suite holds at 4.5:1 on every hue.
+ */
+
+.crewlet-cursor-flag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  box-sizing: border-box;
+  max-width: 16em;
+  padding: 0 calc(var(--spacing-1) * 1.5);
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-presence-hue);
+  box-shadow: var(--shadow-cursor);
+  color: var(--color-presence-flag-text);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-normal);
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+}
+
+.crewlet-cursor-flag--agent {
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-cursor-flag__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.crewlet-cursor-flag__glyph {
+  flex: none;
+}
+
+/* Pinned to the element it labels, which is the nearest positioned ancestor. */
+.crewlet-cursor-flag--top-end,
+.crewlet-cursor-flag--bottom-end {
+  position: absolute;
+  inset-inline-end: 0;
+  z-index: var(--z-index-presence);
+}
+
+.crewlet-cursor-flag--top-end {
+  bottom: 100%;
+}
+
+.crewlet-cursor-flag--bottom-end {
+  top: 100%;
+}
+
+@media (forced-colors: active) {
+  .crewlet-cursor-flag {
+    border: 1px solid CanvasText;
+    background: Canvas;
+    color: CanvasText;
+  }
+}

package/dist/DataTable/index.js

@@ -1,16 +1,16 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-RF5O4FYL.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-76FXDZAZ.js';
 import '../chunk-NS7BVLL3.js';
-import '../chunk-EUCC37WY.js';
+import '../chunk-2TZATTIU.js';
 import '../chunk-75CLJNDQ.js';
+import '../chunk-4GB57WIT.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-DEEVA6TV.js';
-import '../chunk-4GB57WIT.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-AV2DXAEL.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataView/index.js

@@ -1,26 +1,26 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-XU4H6JQB.js';
-import '../chunk-3CZ7XAVY.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-KVT3TJVG.js';
 import '../chunk-HOXGBLEY.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-RF5O4FYL.js';
+import '../chunk-76FXDZAZ.js';
 import '../chunk-NS7BVLL3.js';
-import '../chunk-EUCC37WY.js';
-import '../chunk-2UU5IGZI.js';
-import '../chunk-75CLJNDQ.js';
-import '../chunk-STJ7QBC3.js';
-import '../chunk-DTIW4CHZ.js';
-import '../chunk-DEEVA6TV.js';
+import '../chunk-5NVKTB6E.js';
+import '../chunk-2TZATTIU.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-75CLJNDQ.js';
 import '../chunk-4GB57WIT.js';
+import '../chunk-STJ7QBC3.js';
+import '../chunk-DTIW4CHZ.js';
+import '../chunk-BWRGFKJP.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-AV2DXAEL.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-BWRGFKJP.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-3CZ7XAVY.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DateTimePicker/index.js

@@ -1,8 +1,8 @@
-export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-2UU5IGZI.js';
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-5NVKTB6E.js';
+import '../chunk-BWRGFKJP.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-BWRGFKJP.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';

package/dist/FollowBanner/FollowBanner.d.ts

@@ -0,0 +1,35 @@
+/** Following somebody, or the moment they left and following stopped. */
+export type FollowBannerState = 'following' | 'left';
+export interface FollowBannerLabels {
+    following: (name: string) => string;
+    left: (name: string) => string;
+    stop: string;
+    dismiss: string;
+}
+export interface FollowBannerProps {
+    /** The followed collaborator's full name in the sentence: "Maya Ortiz", or the first name once they left. */
+    name: string;
+    state?: FollowBannerState | undefined;
+    /** Stop following: the Stop control, or Escape anywhere in the document while following. */
+    onStop: () => void;
+    /** Takes the banner down once it has said the followed person left. */
+    onDismiss?: (() => void) | undefined;
+    className?: string | undefined;
+    labels?: Partial<FollowBannerLabels> | undefined;
+}
+/**
+ * The strip across the top of an artifact while its reader follows somebody:
+ * the view moves with theirs (tab, version, scroll, active cell) until the
+ * reader takes it back.
+ *
+ * ESCAPE STOPS IT FROM ANYWHERE, because following moves the reader's view
+ * under them and the way out has to be one key wherever focus happens to be.
+ * A key a composition is using, and one a nearer surface (an open menu, a
+ * dialog) already handled, are left alone. Scrolling or any own move of the
+ * view stops it too; that is the host's to call `onStop` for, since only the
+ * host knows which scroll is the reader's and which is the follow.
+ *
+ * ANNOUNCED POLITELY when it appears and when its sentence changes, so a
+ * screen reader user is told they are following and told when it stopped.
+ */
+export declare function FollowBanner({ name, state, onStop, onDismiss, className, labels }: FollowBannerProps): import("react").JSX.Element;