@crewlethq/ui 0.17.0 → 0.18.0

package/dist/FollowBanner/index.d.ts

@@ -0,0 +1,2 @@
+export { FollowBanner } from './FollowBanner.js';
+export type { FollowBannerLabels, FollowBannerProps, FollowBannerState } from './FollowBanner.js';

package/dist/FollowBanner/index.js

@@ -0,0 +1,7 @@
+export { FollowBanner } from '../chunk-FW7HN6AP.js';
+import '../chunk-SVSCLHHI.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-HMPFGIWM.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/FrameProtocol/index.d.ts

@@ -0,0 +1,2 @@
+export { applyFrameTheme, checkFrameSandbox, DEFAULT_FRAME_THEME, EXTERNAL_URL_MAX, externalUrl, FRAME_BRIDGE, FRAME_MESSAGE, FRAME_ORIGIN_MODES, FRAME_SANDBOX_TOKENS, frameFragment, frameOriginMatches, frameThemeMessage, httpOrigin, isFocusExit, isFrameNonce, negotiateBridge, parseFrameFragment, portTargetOrigin, readFrameHello, readFramePortMessage, readFrameTheme, readOpenLink, } from './protocol.js';
+export type { FrameBridgeRange, FrameFragment, FrameHello, FrameOpenLinkMessage, FrameOriginMode, FramePortMessage, FrameSandboxVerdict, FrameTheme, FrameThemeMessage, } from './protocol.js';

package/dist/FrameProtocol/index.js

@@ -0,0 +1,2 @@
+export { DEFAULT_FRAME_THEME, EXTERNAL_URL_MAX, FRAME_BRIDGE, FRAME_MESSAGE, FRAME_ORIGIN_MODES, FRAME_SANDBOX_TOKENS, applyFrameTheme, checkFrameSandbox, externalUrl, frameFragment, frameOriginMatches, frameThemeMessage, httpOrigin, isFocusExit, isFrameNonce, negotiateBridge, parseFrameFragment, portTargetOrigin, readFrameHello, readFramePortMessage, readFrameTheme, readOpenLink } from '../chunk-F6V2PTN6.js';
+import '../chunk-ZXXDZJQN.js';

package/dist/FrameProtocol/protocol.d.ts

@@ -0,0 +1,164 @@
+import { type ThemeId } from '@crewlethq/tokens';
+import { type DensityPreference, type ThemePreference } from '../ThemeSwitcher/apply.js';
+/** The message names, on the window before the handshake and on the port after it. */
+export declare const FRAME_MESSAGE: {
+    /** Frame to host, on the window: "I am the document you embedded, here is your nonce". */
+    readonly hello: "crewlet.hello";
+    /** Host to frame, on the window, carrying the transferred port. */
+    readonly port: "crewlet.port";
+    /** Host to frame, on the port: the reader's appearance changed. */
+    readonly theme: "crewlet.theme";
+    /** Frame to host, on the port: open this link outside the frame. */
+    readonly openLink: "crewlet.openLink";
+    /** Frame to host, on the port: give keyboard focus back to the page around the frame. */
+    readonly focusExit: "crewlet.focusExit";
+};
+/**
+ * The bridge protocol versions this host speaks, negotiated in the hello.
+ *
+ * The page-facing contract (`window.crewlet`) and the host-facing bridge are
+ * versioned apart: a page pins its contract for as long as it is published,
+ * while the bridge moves with the host, which supports the current version and
+ * the one before it.
+ */
+export declare const FRAME_BRIDGE: {
+    readonly min: 1;
+    readonly max: 1;
+};
+/**
+ * How the engine isolated the artifact, as its `Frame.mode` says.
+ *
+ * `per_artifact` serves every artifact from an origin of its own, so its
+ * messages arrive from that origin. `shared` serves every artifact from one
+ * host with an opaque origin, so its messages arrive from `"null"` and only
+ * the source window and the nonce bind them to this frame.
+ */
+export type FrameOriginMode = 'per_artifact' | 'shared';
+export declare const FRAME_ORIGIN_MODES: readonly ["per_artifact", "shared"];
+/** The reader's appearance, as the page around the frame resolved it. */
+export interface FrameTheme {
+    mode: ThemePreference;
+    /** A theme id from `@crewlethq/tokens`. */
+    palette: ThemeId;
+    density: DensityPreference;
+}
+/** What a frame paints before the host has said anything: the system, the default theme, the unscaled step. */
+export declare const DEFAULT_FRAME_THEME: FrameTheme;
+/**
+ * The fragment the host appends to the engine's frame URL.
+ *
+ * A FRAGMENT, NEVER A QUERY. A browser never sends a fragment to a server and
+ * never writes it to a log, so the handshake nonce and the reader's appearance
+ * stay between the two documents. The theme is in it so the frame paints in
+ * the reader's palette on its first frame, before any message can arrive.
+ */
+export declare function frameFragment(nonce: string, theme: FrameTheme): string;
+/** What a frame reads back from its own fragment. Each value is checked; a bad one falls back. */
+export interface FrameFragment {
+    /** The handshake nonce, or null when the fragment carries none. */
+    nonce: string | null;
+    theme: FrameTheme;
+}
+/**
+ * Reads a frame's own `location.hash`.
+ *
+ * A value that is not one of the allowed ones is dropped for its default
+ * rather than applied, because the fragment is a string anybody can edit by
+ * hand in the address of a page opened on its own.
+ */
+export declare function parseFrameFragment(hash: string): FrameFragment;
+/** Whether a nonce is the shape the engine mints. */
+export declare function isFrameNonce(value: unknown): value is string;
+/**
+ * The origin of an absolute http or https URL, or null.
+ *
+ * Only those two schemes: a frame served from `data:`, `blob:` or
+ * `javascript:` would inherit or forge an origin, and the frame policy has no
+ * answer for any of them.
+ */
+export declare function httpOrigin(raw: string): string | null;
+/** Whether a message's origin is the one this mode says the frame's document has. */
+export declare function frameOriginMatches(mode: FrameOriginMode, expected: string, actual: string): boolean;
+/**
+ * The `targetOrigin` the host posts the port with.
+ *
+ * Per artifact, the artifact's own origin: if the frame has navigated
+ * anywhere else in the meantime, the browser drops the message. An opaque
+ * origin cannot be named, so `"*"` is the only value that reaches it, and the
+ * port is posted to the verified source window in the same task as the
+ * verified hello, so no navigation can come between the check and the send.
+ */
+export declare function portTargetOrigin(mode: FrameOriginMode, origin: string): string;
+/**
+ * Every sandbox token a frame may carry, and when.
+ *
+ * The engine computes the attribute and the host sets it VERBATIM; this is a
+ * second check, so a host never embeds a policy the engine would never have
+ * written. There is no `allow-popups` at all: an external link goes through
+ * the bridge's `openLink`, which the page around the frame opens after an
+ * interstitial, with `noopener`.
+ */
+export declare const FRAME_SANDBOX_TOKENS: Readonly<Record<string, 'always' | 'per_artifact' | 'declared'>>;
+export type FrameSandboxVerdict = {
+    ok: true;
+    value: string;
+} | {
+    ok: false;
+    refused: string[];
+};
+/** Checks the engine's sandbox attribute against the tokens a frame in this mode may carry. */
+export declare function checkFrameSandbox(sandbox: string, mode: FrameOriginMode): FrameSandboxVerdict;
+/** The range of bridge versions a runtime speaks. */
+export interface FrameBridgeRange {
+    min: number;
+    max: number;
+}
+/** Frame to host: the first message, posted on the window. */
+export interface FrameHello {
+    type: typeof FRAME_MESSAGE.hello;
+    nonce: string;
+    /** The page-facing contract the runtime implements, `major.minor.patch`. */
+    contract: string;
+    bridge: FrameBridgeRange;
+}
+/** Reads a hello, or null for anything that is not exactly one. */
+export declare function readFrameHello(data: unknown): FrameHello | null;
+/** The highest bridge version both ends speak, or null when they share none. */
+export declare function negotiateBridge(offered: FrameBridgeRange, supported?: FrameBridgeRange): number | null;
+/** Host to frame: the port message, posted on the window with the port transferred. */
+export interface FramePortMessage {
+    type: typeof FRAME_MESSAGE.port;
+    bridge: number;
+}
+/** Reads a port message, or null. The port itself is the event's `ports[0]`. */
+export declare function readFramePortMessage(data: unknown): FramePortMessage | null;
+/** Host to frame: the reader's appearance, on the port. */
+export interface FrameThemeMessage extends FrameTheme {
+    type: typeof FRAME_MESSAGE.theme;
+}
+export declare function frameThemeMessage(theme: FrameTheme): FrameThemeMessage;
+/** Reads a theme message, or null when any of its three values is not an allowed one. */
+export declare function readFrameTheme(data: unknown): FrameTheme | null;
+/** Writes the three appearance attributes on a root element, the same way the application writes its own. */
+export declare function applyFrameTheme(theme: FrameTheme, root?: Element | null): void;
+/** Frame to host: open a link outside the frame. */
+export interface FrameOpenLinkMessage {
+    type: typeof FRAME_MESSAGE.openLink;
+    url: string;
+}
+/** Reads an open-link request's raw URL, or null. Use `externalUrl` to decide whether it may be opened. */
+export declare function readOpenLink(data: unknown): string | null;
+/** Whether a port message asks for focus back. */
+export declare function isFocusExit(data: unknown): boolean;
+/** The longest link an artifact may ask the host to open. */
+export declare const EXTERNAL_URL_MAX = 2048;
+/**
+ * A link an artifact may ask to open, parsed, or null.
+ *
+ * Absolute `https:`, `http:` and `mailto:` only. `javascript:` and `data:`
+ * would run or render in the page that opens them; a relative link has no
+ * meaning outside the frame it was written in. A URL carrying a user name or
+ * password is refused too, because `https://bank.example@evil.example` is the
+ * classic way to make a destination read as somewhere it is not.
+ */
+export declare function externalUrl(raw: string): URL | null;

package/dist/HuePicker/index.js

@@ -1,8 +1,8 @@
 import '../chunk-EXHQ2QVW.js';
-export { HuePicker } from '../chunk-NXDEPUVG.js';
-import '../chunk-AYKXMIOR.js';
+export { HuePicker } from '../chunk-PA4CYTBY.js';
 import '../chunk-26PEPONN.js';
 import '../chunk-4LDTQWS7.js';
+import '../chunk-AYKXMIOR.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/LinkInterstitial/LinkInterstitial.d.ts

@@ -0,0 +1,41 @@
+export interface LinkInterstitialLabels {
+    title: string;
+    /** The line naming who asked. Given the source's name, or none when the caller names no source. */
+    intro: (source: string | undefined) => string;
+    destination: string;
+    insecure: string;
+    open: string;
+    cancel: string;
+}
+/**
+ * Opens a link in a new browsing context that cannot reach back.
+ *
+ * `noopener` severs `window.opener`, so the page that opens cannot navigate
+ * the dashboard that opened it; `noreferrer` keeps the dashboard's address out
+ * of the request. Exported so every place that opens an artifact's link opens
+ * it the same way.
+ */
+export declare function openExternal(url: URL): void;
+export interface LinkInterstitialProps {
+    /** The link a page asked to open, already checked by `externalUrl`. The dialog is open while this is set. */
+    url: URL | null;
+    /** Who asked, in the words the reader knows it by: the artifact's title. */
+    source?: string | undefined;
+    /** Asked to close, after the link was opened or when the reader declined. */
+    onClose: () => void;
+    /** The link was opened. */
+    onOpened?: ((url: URL) => void) | undefined;
+    labels?: Partial<LinkInterstitialLabels> | undefined;
+}
+/**
+ * The stop between an artifact's link and the open web.
+ *
+ * AN ARTIFACT NEVER OPENS A WINDOW. Its frame has no popup token at all, so a
+ * link reaches the page around it through the bridge, and this dialog names
+ * the destination before anything is opened: the host in large type, because
+ * the host is the claim a reader is deciding whether to trust, then the whole
+ * address. The host is the ASCII form the URL parser gives, so a name drawn in
+ * look-alike letters from another script shows as the `xn--` form it really
+ * is.
+ */
+export declare function LinkInterstitial({ url, source, onClose, onOpened, labels }: LinkInterstitialProps): import("react").JSX.Element;

package/dist/LinkInterstitial/index.d.ts

@@ -0,0 +1,3 @@
+import './LinkInterstitial.css';
+export { LinkInterstitial, openExternal } from './LinkInterstitial.js';
+export type { LinkInterstitialLabels, LinkInterstitialProps } from './LinkInterstitial.js';

package/dist/LinkInterstitial/index.js

@@ -0,0 +1,11 @@
+export { LinkInterstitial, openExternal } from '../chunk-A7EBCHEG.js';
+import '../chunk-2TZATTIU.js';
+import '../chunk-5CLW2CXT.js';
+import '../chunk-SVSCLHHI.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-HMPFGIWM.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/LinkInterstitial-ET4MSVSV.css

@@ -0,0 +1,34 @@
+/*
+ * The destination, said twice: the host as the claim a reader decides on, in
+ * the title's register, then the whole address in mono for whoever wants to
+ * read it exactly. The address wraps anywhere, because a long URL that does
+ * not wrap pushes the dialog wider than a phone.
+ */
+
+.crewlet-link-interstitial {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-inset);
+}
+
+.crewlet-link-interstitial__label {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-link-interstitial__host {
+  color: var(--color-text-primary);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-link-interstitial__href {
+  align-self: flex-start;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}

package/dist/ListInput/index.js

@@ -3,8 +3,8 @@ import '../chunk-SMBKXWML.js';
 import '../chunk-4GB57WIT.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/LiveCursor/LiveCursor.d.ts

@@ -0,0 +1,34 @@
+import type { NodeHue } from '../utils/nodeHue.js';
+/** How long a cursor that stopped moving stays at full strength, and how long until it is hidden. */
+export declare const LIVE_CURSOR_REST_MS = 5000;
+export declare const LIVE_CURSOR_HIDE_MS = 30000;
+export interface LiveCursorProps {
+    /** Position in px from the leading top corner of the nearest positioned ancestor. */
+    x: number;
+    y: number;
+    name: string;
+    hue: NodeHue;
+    kind?: 'human' | 'agent' | undefined;
+    /** Fades to 40% after this long without a move. */
+    idleAfterMs?: number | undefined;
+    /** Hidden after this long without a move. */
+    hideAfterMs?: number | undefined;
+    /**
+     * Glides between positions. A reduced-motion preference always jumps
+     * instead, whatever this says; false jumps for everybody.
+     */
+    interpolate?: boolean | undefined;
+    className?: string | undefined;
+}
+/**
+ * A collaborator's pointer, with their name flag, at a point on a board or a
+ * page that shares cursors.
+ *
+ * IT FADES AS IT RESTS: full strength while it moves, 40% after five seconds
+ * still, hidden after thirty, so a pointer somebody left over a chart does not
+ * stand there all afternoon. Under a reduced-motion preference it jumps from
+ * point to point and never glides; the flag still appears. DECORATIVE to
+ * assistive technology, like every presence mark: where people are is said in
+ * words in the presence list.
+ */
+export declare function LiveCursor({ x, y, name, hue, kind, idleAfterMs, hideAfterMs, interpolate, className, }: LiveCursorProps): import("react").JSX.Element;

package/dist/LiveCursor/index.d.ts

@@ -0,0 +1,3 @@
+import './LiveCursor.css';
+export { LIVE_CURSOR_HIDE_MS, LIVE_CURSOR_REST_MS, LiveCursor } from './LiveCursor.js';
+export type { LiveCursorProps } from './LiveCursor.js';

package/dist/LiveCursor/index.js

@@ -0,0 +1,4 @@
+export { LIVE_CURSOR_HIDE_MS, LIVE_CURSOR_REST_MS, LiveCursor } from '../chunk-5XACKNYR.js';
+import '../chunk-3BYIWOTV.js';
+import '../chunk-I6POAB4V.js';
+import '../chunk-ODEQTPFM.js';

package/dist/LiveCursor-DZHGIYWE.css

@@ -0,0 +1,47 @@
+/*
+ * A collaborator's live pointer and its flag (LiveCursor.tsx). It stands at a
+ * point by transform, so a moving cursor repaints without a layout, and the
+ * flag hangs below and after the pointer's tip.
+ */
+
+.crewlet-live-cursor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--z-index-presence);
+  display: block;
+  pointer-events: none;
+}
+
+.crewlet-live-cursor__pointer {
+  display: block;
+  color: var(--crewlet-presence-hue);
+}
+
+.crewlet-live-cursor__flag {
+  position: absolute;
+  top: calc(var(--spacing-4) + var(--spacing-1));
+  left: var(--spacing-3);
+}
+
+.crewlet-live-cursor--resting {
+  opacity: 0.4;
+}
+
+.crewlet-live-cursor--gone {
+  display: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .crewlet-live-cursor--glide {
+    transition:
+      transform var(--motion-duration-fast) linear,
+      opacity var(--motion-duration-base) var(--motion-easing-default);
+  }
+}
+
+@media (forced-colors: active) {
+  .crewlet-live-cursor__pointer {
+    color: Highlight;
+  }
+}

package/dist/MarkdownEditor/index.js

@@ -1,10 +1,10 @@
-export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-77IEHFY4.js';
+export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-QQGWES46.js';
 import '../chunk-VYY56AMX.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-26PEPONN.js';
 import '../chunk-4LDTQWS7.js';
 import '../chunk-CBOICT64.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BHHIIK3M.js';

package/dist/Modal/index.js

@@ -1,8 +1,8 @@
-export { ConfirmModal, Modal } from '../chunk-DEEVA6TV.js';
+export { ConfirmModal, Modal } from '../chunk-2TZATTIU.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-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgTable/index.js

@@ -5,9 +5,9 @@ import '../chunk-AKEZ3G5V.js';
 import '../chunk-VYOKRN2I.js';
 import '../chunk-TROLVEZY.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-UAN5NE7M.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-BZFWDIV6.js';
+import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
+import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PresenceModel/index.d.ts

@@ -0,0 +1,2 @@
+export { PRESENCE_ACTIVITIES, PRESENCE_LABELS, assignPresenceHues, collapseSessions, joinNames, presenceLabels, presenceOrder, } from './presence.js';
+export type { PresenceActivity, PresenceKind, PresenceLabels, PresenceMember } from './presence.js';

package/dist/PresenceModel/index.js

@@ -0,0 +1,3 @@
+import '../chunk-CENOOTAV.js';
+export { PRESENCE_ACTIVITIES, PRESENCE_LABELS, assignPresenceHues, collapseSessions, joinNames, presenceLabels, presenceOrder } from '../chunk-S35G6PNC.js';
+import '../chunk-AYKXMIOR.js';

package/dist/PresenceModel/presence.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Who is present in an artifact, as plain data: the order a roster is drawn
+ * in, the hue each collaborator's marks are drawn in, and the words a reader
+ * hears for both.
+ *
+ * FRAMEWORK FREE. Nothing here imports React or touches the document, because
+ * two renderers draw presence from it: the React components in this package,
+ * which the dashboard draws, and the artifact kit's custom elements, which an
+ * artifact page draws. A rule written once here cannot come to differ between
+ * the two.
+ *
+ * THE PRESENCE COLOUR IS THE NARROW EXCEPTION to colour carrying state. A
+ * collaborator's hue ties their cursor, their selection ring, their cell
+ * outline and their name flag to their name, and nothing else is drawn in it.
+ * An agent wears the hue an operator chose for it. A person is given one of
+ * the six node hues for the session, in join order, skipping the hues already
+ * in use in the room: never a hash of a name, and never stored on the person.
+ */
+import { type NodeHue } from '../utils/nodeHue.js';
+/** What a collaborator is doing: the engine's `artifacts.PresenceActivity`. */
+export type PresenceActivity = 'editing' | 'viewing' | 'idle';
+export declare const PRESENCE_ACTIVITIES: readonly ["editing", "viewing", "idle"];
+/** A person, or an agent seat whose turn has the artifact open. */
+export type PresenceKind = 'human' | 'agent';
+/** One collaborator present in an artifact. */
+export interface PresenceMember {
+    /** What tells two entries apart: a session, or a seat once tabs are collapsed. */
+    id: string;
+    /** The seat handle or principal the entry belongs to, so two tabs of one person collapse to one. */
+    seat?: string | undefined;
+    /** The display name, resolved by the host: the engine sends the seat handle only. */
+    name: string;
+    kind: PresenceKind;
+    activity: PresenceActivity;
+    /** The hue the collaborator's marks are drawn in. `assignPresenceHues` gives a person one. */
+    hue?: NodeHue | undefined;
+    /** An agent's Crewlet character, as `Avatar` draws it. */
+    character?: string | undefined;
+    /** A person's photo, as `Avatar` draws it. */
+    src?: string | undefined;
+    /** Where they are, in words: "Editing row Acme Corp", "Reading version 12 for ENG-412". */
+    location?: string | undefined;
+}
+export declare function presenceOrder<M extends Pick<PresenceMember, 'kind' | 'activity'>>(members: readonly M[]): M[];
+/**
+ * One entry per seat: two tabs of one person are one collaborator, and the
+ * most active tab speaks for them. Entries with no seat are kept as they are.
+ * The first tab's position in the list is kept, so collapsing never reorders.
+ */
+export declare function collapseSessions<M extends Pick<PresenceMember, 'id' | 'seat' | 'activity'>>(members: readonly M[]): M[];
+/**
+ * The hue each member's marks are drawn in.
+ *
+ * An agent with a chosen hue keeps it. Every other member keeps the hue it was
+ * given before (`held`, the previous answer) while it stays present, and a
+ * newcomer, in the order given, takes the first of the six hues nobody present
+ * wears; past six, the hue the fewest members wear, so hues repeat as evenly
+ * as they can and the name on the flag tells the two apart.
+ */
+export declare function assignPresenceHues(members: readonly Pick<PresenceMember, 'id' | 'kind' | 'hue'>[], held?: ReadonlyMap<string, NodeHue>): Map<string, NodeHue>;
+/** Every string presence says, overridable wherever it is drawn. */
+export interface PresenceLabels {
+    /** The activity word: "Editing", "Viewing", "Reading" for an agent viewing, "Idle". */
+    activity: (activity: PresenceActivity, kind: PresenceKind) => string;
+    /** The roster's accessible name. `others` counts everyone but the reader. */
+    here: (others: number, withSelf: boolean) => string;
+    /** One member, read out: "Maya Ortiz, editing row Acme Corp". */
+    member: (member: Pick<PresenceMember, 'name' | 'kind' | 'activity' | 'location'>) => string;
+    /** The members counted in the overflow chip: "3 more". */
+    more: (count: number) => string;
+    /** The flag on a cell somebody is editing: "Maya is editing". */
+    editing: (names: string) => string;
+    /** The words a focused cell gains when others are on it: "Jane Founder is also here." */
+    alsoHere: (names: readonly string[]) => string;
+}
+/** "Maya", "Maya and Jane", "Maya, Jane and 2 others". */
+export declare function joinNames(names: readonly string[], shown?: number): string;
+export declare const PRESENCE_LABELS: PresenceLabels;
+/** Labels with a caller's overrides applied, the one way every component merges them. */
+export declare function presenceLabels(overrides?: Partial<PresenceLabels>): PresenceLabels;

package/dist/PresenceRing/PresenceRing.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { NodeHue } from '../utils/nodeHue.js';
+/** A collaborator's hue, or `neutral` for a host that draws every collaborator alike. */
+export type PresenceHue = NodeHue | 'neutral';
+/** Active is a solid ring; idle is dashed, for a collaborator who has stepped away. */
+export type PresenceRingState = 'active' | 'idle';
+/**
+ * The class that sets `--crewlet-presence-hue` on an element, for a component
+ * that draws a presence mark of its own (a flag, a cursor, a badge's ring).
+ * One table of hues for every presence mark, so a hue cannot be spelt two ways.
+ */
+export declare function presenceHueClass(hue: PresenceHue): string;
+export interface PresenceRingProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    hue: PresenceHue;
+    state?: PresenceRingState | undefined;
+    /** How far inside the element's edge the ring is drawn, in px. 1 by default, inside a hairline. */
+    inset?: number | undefined;
+    children?: ReactNode;
+}
+/**
+ * A collaborator's outline round whatever they are on: a cell, a card, an
+ * element of a page.
+ *
+ * INSET, so it never doubles the element's own border: the element keeps its
+ * one edge and the ring is drawn inside it. DECORATIVE: it is a pseudo element
+ * nothing reads, because the same fact is said in words where presence is
+ * listed and in the focused element's description ("Jane Founder is also
+ * here"). The hue is the presence colour exception (D22), so it is only ever
+ * drawn beside the collaborator's name.
+ */
+export declare function PresenceRing({ hue, state, inset, className, style, children, ...rest }: PresenceRingProps): import("react").JSX.Element;

package/dist/PresenceRing/index.d.ts

@@ -0,0 +1,3 @@
+import './PresenceRing.css';
+export { PresenceRing, presenceHueClass } from './PresenceRing.js';
+export type { PresenceHue, PresenceRingProps, PresenceRingState } from './PresenceRing.js';

package/dist/PresenceRing/index.js

@@ -0,0 +1,2 @@
+export { PresenceRing, presenceHueClass } from '../chunk-I6POAB4V.js';
+import '../chunk-ODEQTPFM.js';

package/dist/PresenceRing-M4C22Q6U.css

@@ -0,0 +1,68 @@
+/*
+ * The presence hues and the ring drawn in them (PresenceRing.tsx).
+ *
+ * ONE TABLE OF HUES for every presence mark: a ring, a flag, a cursor and a
+ * badge's ring each read `--crewlet-presence-hue` from the class
+ * `presenceHueClass` writes, so the six node hues are spelt once. The hue is
+ * the presence colour exception: it ties a mark to a name and is spent on
+ * nothing else.
+ */
+
+.crewlet-presence-hue--purple {
+  --crewlet-presence-hue: var(--color-node-purple);
+}
+
+.crewlet-presence-hue--cyan {
+  --crewlet-presence-hue: var(--color-node-cyan);
+}
+
+.crewlet-presence-hue--green {
+  --crewlet-presence-hue: var(--color-node-green);
+}
+
+.crewlet-presence-hue--amber {
+  --crewlet-presence-hue: var(--color-node-amber);
+}
+
+.crewlet-presence-hue--rose {
+  --crewlet-presence-hue: var(--color-node-rose);
+}
+
+.crewlet-presence-hue--blue {
+  --crewlet-presence-hue: var(--color-node-blue);
+}
+
+.crewlet-presence-hue--neutral {
+  --crewlet-presence-hue: var(--color-border-strong);
+}
+
+/*
+ * THE RING IS INSET and drawn on a pseudo element, so it never moves the
+ * content, never doubles the element's own border and is never read. 2px,
+ * the weight a selection ring is drawn at.
+ */
+.crewlet-presence-ring {
+  --crewlet-presence-ring-inset: 1px;
+  position: relative;
+  display: inline-block;
+}
+
+.crewlet-presence-ring::after {
+  position: absolute;
+  inset: var(--crewlet-presence-ring-inset);
+  z-index: var(--z-index-presence);
+  border: 2px solid var(--crewlet-presence-hue);
+  border-radius: inherit;
+  content: '';
+  pointer-events: none;
+}
+
+.crewlet-presence-ring--idle::after {
+  border-style: dashed;
+}
+
+@media (forced-colors: active) {
+  .crewlet-presence-ring::after {
+    border-color: Highlight;
+  }
+}