@crewlethq/ui 0.17.1 → 0.19.0

package/dist/Divider/Divider.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'react';
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Words on the rule, for a divider that names what follows: "History". */
+    label?: string | undefined;
+    /** Where the words sit: at the start, as a section's name, or centred. */
+    align?: 'start' | 'center' | undefined;
+}
+/**
+ * A rule between parts of a page, with or without a name.
+ *
+ * A SEPARATOR TO A SCREEN READER, and a named one says its name, so a reader
+ * moving through the page hears where one part ends and "History" begins
+ * rather than nothing at all.
+ */
+export declare function Divider({ label, align, className, ...rest }: DividerProps): import("react").JSX.Element;

package/dist/Divider/index.d.ts

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

package/dist/Divider/index.js

@@ -0,0 +1,2 @@
+export { Divider } from '../chunk-6KWNXIDE.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Divider-3Z77ZAJH.css

@@ -0,0 +1,37 @@
+/* Divider: a rule across its space, with its name at its start or in its middle. */
+
+.crewlet-divider {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-height: var(--size-row-sm);
+  min-width: 0;
+}
+.crewlet-divider::before,
+.crewlet-divider::after {
+  content: '';
+  flex: 1 1 auto;
+  border-top: 1px solid var(--color-border-strong);
+}
+/* One rule unless the words sit in the middle of it. */
+.crewlet-divider:not(.crewlet-divider--center)::before {
+  display: none;
+}
+.crewlet-divider:not(.crewlet-divider--labelled)::before {
+  display: block;
+}
+.crewlet-divider:not(.crewlet-divider--labelled)::after {
+  display: none;
+}
+
+.crewlet-divider__label {
+  flex: 0 1 auto;
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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;

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/HuePicker.d.ts

@@ -1,15 +1,26 @@
 import { type SegmentedSize } from '../SegmentedControl/SegmentedControl.js';
 import { type NodeHue } from '../utils/nodeHue.js';
-export interface HuePickerProps {
+interface HuePickerBase {
     /** The group's name, said on entering it: "Color". */
     label: string;
-    value: NodeHue;
-    onValueChange: (hue: NodeHue) => void;
     size?: SegmentedSize | undefined;
     /** Nothing can be chosen, and the row says so. */
     disabled?: boolean | undefined;
     className?: string | undefined;
 }
+/**
+ * The six hues, or the six and NO HUE first, named by `none` ("Plain"): a
+ * surface that may carry a colour (a group's band, a note) but need not.
+ */
+export type HuePickerProps = HuePickerBase & ({
+    none?: undefined;
+    value: NodeHue;
+    onValueChange: (hue: NodeHue) => void;
+} | {
+    none: string;
+    value: NodeHue | 'none';
+    onValueChange: (hue: NodeHue | 'none') => void;
+});
 /**
  * The choice of an entity's hue: the six node hues as a row of chips, each a
  * swatch and the hue's name.
@@ -23,4 +34,5 @@ export interface HuePickerProps {
  * row is still read and the chosen hue still shown, and nothing in it takes
  * focus or a press.
  */
-export declare function HuePicker({ label, value, onValueChange, size, disabled, className }: HuePickerProps): import("react").JSX.Element;
+export declare function HuePicker(props: HuePickerProps): import("react").JSX.Element;
+export {};

package/dist/HuePicker/index.js

@@ -1,8 +1,8 @@
-import '../chunk-EXHQ2QVW.js';
-export { HuePicker } from '../chunk-NXDEPUVG.js';
-import '../chunk-AYKXMIOR.js';
+import '../chunk-FFMCMSJB.js';
+export { HuePicker } from '../chunk-XU4ZUGLE.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/{HuePicker-5QIUR6L7.css → HuePicker-PAIGH6LR.css}

@@ -16,3 +16,9 @@
 .crewlet-hue-picker__swatch--amber { background: var(--color-node-amber); }
 .crewlet-hue-picker__swatch--rose { background: var(--color-node-rose); }
 .crewlet-hue-picker__swatch--blue { background: var(--color-node-blue); }
+
+/* No hue: a ring in the hairline, so the row still reads as swatches. */
+.crewlet-hue-picker__swatch--none {
+  box-sizing: border-box;
+  border: 1px solid var(--color-border-strong);
+}

package/dist/IconTile/IconTile.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { NodeHue } from '../utils/nodeHue.js';
+export interface IconTileProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The glyph, at the size the tile is drawn at: `sm` in a `sm` or `md` tile, `md` in a `lg` one. */
+    children: ReactNode;
+    /** The hue it is tinted in. Left out, the brand accent's soft fill and ink. */
+    hue?: NodeHue | undefined;
+    /** One of the row heights: `sm` 28px, `md` 36px, `lg` 48px. */
+    size?: 'sm' | 'md' | 'lg' | undefined;
+}
+/**
+ * A glyph on a tinted square: what a choice in a library or a catalog is
+ * told apart by before its name is read. The widget tray draws one per widget
+ * it offers.
+ *
+ * A HUE PER KIND, NOT PER STATE. The tint is decorative and picked for the
+ * thing it marks (`NodeHue`), so a tile in rose says nothing is wrong; a state
+ * is a `StatusDot` or a `Tag`.
+ *
+ * DECORATION. The tile is hidden from assistive technology: the name beside it
+ * is what is read.
+ */
+export declare function IconTile({ children, hue, size, className, ...rest }: IconTileProps): import("react").JSX.Element;

package/dist/IconTile/index.d.ts

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

package/dist/IconTile/index.js

@@ -0,0 +1,2 @@
+export { IconTile } from '../chunk-IXJHTFXG.js';
+import '../chunk-ODEQTPFM.js';

package/dist/IconTile-4GNWTLAW.css

@@ -0,0 +1,30 @@
+/*
+ * IconTile: a glyph on a tinted square. Each hue pairs its fill and its ink
+ * from one measured family (`--color-node-*`); left out, the brand accent's
+ * soft fill and ink. No edge: the tile sits inside a card that has one.
+ */
+.crewlet-icon-tile {
+  --crewlet-icon-tile-fill: var(--color-brand-accent-soft);
+  --crewlet-icon-tile-ink: var(--color-brand-accent-ink);
+  --crewlet-icon-tile-size: var(--size-row-md);
+
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--crewlet-icon-tile-size);
+  height: var(--crewlet-icon-tile-size);
+  border-radius: var(--radius-md);
+  background: var(--crewlet-icon-tile-fill);
+  color: var(--crewlet-icon-tile-ink);
+}
+
+.crewlet-icon-tile--sm { --crewlet-icon-tile-size: var(--size-row-sm); }
+.crewlet-icon-tile--lg { --crewlet-icon-tile-size: var(--size-row-lg); border-radius: var(--radius-lg); }
+
+.crewlet-icon-tile--purple { --crewlet-icon-tile-fill: var(--color-node-purple-fill); --crewlet-icon-tile-ink: var(--color-node-purple-ink); }
+.crewlet-icon-tile--cyan { --crewlet-icon-tile-fill: var(--color-node-cyan-fill); --crewlet-icon-tile-ink: var(--color-node-cyan-ink); }
+.crewlet-icon-tile--green { --crewlet-icon-tile-fill: var(--color-node-green-fill); --crewlet-icon-tile-ink: var(--color-node-green-ink); }
+.crewlet-icon-tile--amber { --crewlet-icon-tile-fill: var(--color-node-amber-fill); --crewlet-icon-tile-ink: var(--color-node-amber-ink); }
+.crewlet-icon-tile--rose { --crewlet-icon-tile-fill: var(--color-node-rose-fill); --crewlet-icon-tile-ink: var(--color-node-rose-ink); }
+.crewlet-icon-tile--blue { --crewlet-icon-tile-fill: var(--color-node-blue-fill); --crewlet-icon-tile-ink: var(--color-node-blue-ink); }

package/dist/Input/index.js

@@ -1,5 +1,5 @@
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-4GB57WIT.js';
-import '../chunk-4FQT6ZAY.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-Q55TXPA3.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.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-RT323I4I.js';
+import '../chunk-7IJARUIF.js';
+import '../chunk-5CLW2CXT.js';
+import '../chunk-SVSCLHHI.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-HMPFGIWM.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.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

@@ -1,10 +1,10 @@
-export { ListInput } from '../chunk-T3ZWBZ65.js';
+export { ListInput } from '../chunk-YSJYWQSP.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-4GB57WIT.js';
-import '../chunk-RSAQOKH3.js';
-import '../chunk-4FQT6ZAY.js';
+import '../chunk-Q55TXPA3.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-4FQT6ZAY.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,12 +1,12 @@
-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-BHHIIK3M.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-BHHIIK3M.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Menu/index.js

@@ -1,7 +1,7 @@
-export { Menu } from '../chunk-NS7BVLL3.js';
+export { Menu } from '../chunk-JULMZNGT.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';