@crewlethq/ui 0.32.0 → 0.34.0

package/dist/Layer/index.d.ts

@@ -1,7 +1,7 @@
 import './Layer.css';
 export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer, } from './stack.js';
 export type { DismissReason, LayerKind, ModalLayer, ModalLayerOptions, PopupLayer, PopupLayerOptions, } from './stack.js';
-export { LAYER_GAP, LAYER_REPOSITION_EVENT, outsideBounds, placePopup, viewportBounds } from './place.js';
+export { LAYER_GAP, LAYER_REPOSITION_EVENT, anchorGone, outsideBounds, placePopup, viewportBounds } from './place.js';
 export type { Placement, PlacementRect, PlacementSize } from './place.js';
 export { LayerHost, useLayerContainer } from './LayerHost.js';
 export type { LayerHostProps } from './LayerHost.js';

package/dist/Layer/index.js

@@ -1,3 +1,3 @@
-export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds } from '../chunk-HMPFGIWM.js';
+export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, anchorGone, outsideBounds, placePopup, useLayerContainer, viewportBounds } from '../chunk-OMV5W53A.js';
 export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Layer/place.d.ts

@@ -59,5 +59,23 @@ export declare const LAYER_GAP = 4;
 export declare function placePopup(anchor: PlacementRect, size: PlacementSize, bounds: PlacementRect, gap?: number, prefer?: 'below' | 'above'): Placement;
 /** The rectangle of the window itself, for a surface with no layer host. */
 export declare function viewportBounds(): PlacementRect;
+/**
+ * Whether an anchor has left its layer: the ANCHOR'S OWN BOX, in the layer's
+ * coordinates, carried entirely outside the layer's whole rectangle (not the
+ * gap-inset one a surface is placed in, since an anchor in the gap is at the
+ * layer's edge, not off it).
+ *
+ * ASKED OF THE ANCHOR, never of where the aligned surface would start: an
+ * end-aligned panel wider than its trigger's right edge starts left of the
+ * layer while the trigger is in plain view, and every surface that asked of
+ * that start closed on the frame it opened. Placement clamps such a panel
+ * inside the bounds instead.
+ */
+export declare function anchorGone(anchor: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}, host: PlacementRect, inHost: boolean): boolean;
 /** Whether an anchor has been carried entirely outside its bounds. */
 export declare function outsideBounds(anchor: PlacementRect, bounds: PlacementRect): boolean;

package/dist/LayersList/LayersList.d.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+/** One entry of the list: what it names and the id it is picked by. */
+export interface LayersListItem {
+    id: string;
+    label: string;
+}
+export interface LayersListLabels {
+    /**
+     * An entry's accessible name where the list opens entries (`onOpen`), so a
+     * reader hears how: "Hero, press Enter or double-click to open".
+     */
+    openable: (label: string) => string;
+}
+export declare const LAYERS_LIST_LABELS: LayersListLabels;
+export interface LayersListProps {
+    /** The list's accessible name, such as "Boards". */
+    label: string;
+    items: readonly LayersListItem[];
+    /** The entry picked on the surface the list stands beside; null or absent is none. */
+    selected?: string | null | undefined;
+    /** A press picks an entry: a click, or Space on the one with focus. */
+    onSelect?: ((id: string) => void) | undefined;
+    /** Enter or a double-click opens an entry. Absent, entries are only picked. */
+    onOpen?: ((id: string) => void) | undefined;
+    /** What stands over the list, such as its count ("14 boards"). It does not scroll. */
+    heading?: ReactNode;
+    labels?: Partial<LayersListLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * The list of a canvas's items beside it, as a design tool's layers are: a
+ * board picked on the canvas is marked here, and one picked here is picked
+ * there. The caller holds the selection and hands it to both.
+ *
+ * QUIET UNTIL IT IS CURRENT. Entries are one line in the secondary ink; the
+ * picked one takes the primary ink and the accent edge every current row in
+ * the system takes (the document outline's open entry), and the edge is held
+ * on every entry in its resting colour, so nothing moves when the pick does.
+ * A long name is cut to one line with the whole of it as the native tip: a
+ * layer list is scanned down its left edge, and a name that wrapped made its
+ * neighbours hard to find.
+ *
+ * ITS LETTERS STAND ON ITS CONTAINER'S EDGE. The entries' padding and edge
+ * hang into the gutter beside the list, so the names line up with whatever
+ * stands above the list (a count, a bar) and only an entry's hover and the
+ * current entry's mark reach past that line.
+ *
+ * ONE TAB STOP. The list is one control: Tab passes it, the arrows and Home
+ * and End move inside it without picking (manual activation, so a reader can
+ * look along the list without moving the canvas), Space or a click picks,
+ * and Enter or a double-click opens. The stop is the picked entry, or the
+ * one focus last left.
+ *
+ * IT SCROLLS ON ITS OWN, under a heading that stays, when it holds more
+ * entries than the height it is given; it never grows the page.
+ */
+export declare function LayersList({ label, items, selected, onSelect, onOpen, heading, labels, className, }: LayersListProps): import("react").JSX.Element;

package/dist/LayersList/index.d.ts

@@ -0,0 +1,3 @@
+import './LayersList.css';
+export { LayersList, LAYERS_LIST_LABELS } from './LayersList.js';
+export type { LayersListItem, LayersListLabels, LayersListProps } from './LayersList.js';

package/dist/LayersList/index.js

@@ -0,0 +1,3 @@
+export { LAYERS_LIST_LABELS, LayersList } from '../chunk-ONL54WMH.js';
+import '../chunk-RKKO7QHH.js';
+import '../chunk-ODEQTPFM.js';

package/dist/LayersList-NQZEIPZB.css

@@ -0,0 +1,82 @@
+/*
+ * A canvas's list of layers (LayersList.tsx): a heading that stays, over one
+ * line per entry that scrolls on its own.
+ */
+
+.crewlet-layers-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+  min-height: 0;
+}
+
+.crewlet-layers-list__heading {
+  flex: none;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+}
+
+/*
+ * THE ENTRIES HANG INTO THE GUTTER by their own padding and edge, so their
+ * letters stand on the list's edge, in line with the heading above them.
+ */
+.crewlet-layers-list__items {
+  flex: 1 1 auto;
+  min-height: 0;
+  margin: 0;
+  margin-inline-start: calc(-1 * (var(--spacing-2) + 2px));
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+/*
+ * The current entry's mark is held on every entry in the resting ink, as the
+ * document outline's is, so nothing moves when the pick does. The radius is
+ * the control step's on the end the mark does not take.
+ */
+.crewlet-layers-list__item {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
+  margin: 0;
+  padding: var(--spacing-1) var(--spacing-2);
+  border: none;
+  border-inline-start: 2px solid transparent;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: var(--radius-md);
+  border-end-end-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-normal);
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.crewlet-layers-list__item:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+/* The accent edge every current row in the system takes, in the primary ink.
+   A border, so forced colours keep it. */
+.crewlet-layers-list__item[aria-current='true'] {
+  border-inline-start-color: var(--color-brand-accent);
+  color: var(--color-text-primary);
+}
+
+/* The ring lies inside the entry, where the scroller beside it cannot cut it. */
+.crewlet-layers-list__item:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}

package/dist/LinkInterstitial/index.js

@@ -1,9 +1,9 @@
-export { LinkInterstitial, openExternal } from '../chunk-ZR5VN5IV.js';
-import '../chunk-I3KKZ2O3.js';
+export { LinkInterstitial, openExternal } from '../chunk-KD2IRYCT.js';
 import '../chunk-5CLW2CXT.js';
-import '../chunk-SVSCLHHI.js';
+import '../chunk-XEGZHHRH.js';
+import '../chunk-SZZRIHGT.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/ListInput/index.js

@@ -2,7 +2,7 @@ export { ListInput } from '../chunk-Z6VW6CXX.js';
 import '../chunk-6QFAK2WV.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/LivePreview/LivePreview.d.ts

@@ -0,0 +1,83 @@
+import { type ReactNode } from 'react';
+/**
+ * Real content drawn small: a live, scaled-down snapshot of a page, a grid or
+ * a frame inside a fixed box, the way a gallery card previews what it opens.
+ *
+ * LAID OUT AT FULL SIZE, THEN SCALED. The content is given `width` CSS pixels
+ * to lay itself out in, exactly as it would on its own page, and the whole is
+ * scaled down to the box with a CSS transform, so the preview is the page
+ * itself at a smaller size and never a second layout of it. Left out, the
+ * content fills the box unscaled (a slide stage that scales itself).
+ *
+ * DRAWN ONLY WHEN IT CAN BE SEEN, AND ONLY SO MANY AT ONCE. The content is
+ * mounted while the box is within `rootMargin` of the viewport and the
+ * shared budget (`LivePreviewBudgetProvider`, twelve by default) grants it a
+ * slot, and unmounted when it scrolls away, giving the slot back. Until the
+ * content says it has drawn (`useLivePreview().ready()`), while it waits for a
+ * slot, when it failed (`fail()`) and in a browser with no
+ * IntersectionObserver, the box shows `fallback`.
+ *
+ * NEVER INTERACTIVE, NEVER ANNOUNCED. The live layer is `inert`, takes no
+ * pointer and is hidden from assistive technology: nothing in it can be
+ * focused or clicked, and whatever surrounds the preview (a card's link)
+ * names what it shows. The swap from the stand-in to the content is a short
+ * fade, and none under `prefers-reduced-motion`.
+ */
+/**
+ * How long a box stays near the viewport before its content is asked for: a
+ * card a reader scrolls to rests longer than this, and one a fling carries
+ * past does not.
+ */
+export declare const LIVE_PREVIEW_DWELL_MS = 120;
+/** Gives the previews under it a budget of their own, `max` live at once. */
+export declare function LivePreviewBudgetProvider({ max, children }: {
+    max?: number | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface LivePreviewSignals {
+    /** The content has drawn: the stand-in gives way to it. */
+    ready: () => void;
+    /** The content has nothing to draw or could not draw: the stand-in stays, and the slot is given back. */
+    fail: () => void;
+}
+/** What live content tells the preview around it. Outside one, both do nothing. */
+export declare function useLivePreview(): LivePreviewSignals;
+/** Where a preview is in its life. */
+export type LivePreviewState = 'idle' | 'waiting' | 'live' | 'ready' | 'failed';
+export interface LivePreviewProps {
+    /** What is drawn small. Mounted only while the preview is live. */
+    children: ReactNode;
+    /** The stand-in, drawn whenever the content is not. */
+    fallback: ReactNode;
+    /** The width, in CSS pixels, the content lays itself out at before it is scaled to the box. */
+    width?: number | undefined;
+    /** How near the viewport the box comes before its content is mounted. */
+    rootMargin?: string | undefined;
+    /** Nothing live is drawn: the stand-in only (no content to show, or a host that has turned previews off). */
+    disabled?: boolean | undefined;
+    /** How long the box stays near the viewport before its content is asked for, in ms. */
+    dwellMs?: number | undefined;
+    /** Told each time the state moves, for a host that measures. */
+    onStateChange?: ((state: LivePreviewState) => void) | undefined;
+    className?: string | undefined;
+}
+export declare function LivePreview({ children, fallback, width, rootMargin, disabled, dwellMs, onStateChange, className }: LivePreviewProps): import("react").JSX.Element;
+export interface PreviewScaleProps {
+    children: ReactNode;
+    /** The width, in CSS pixels, the content is laid out at. */
+    width: number;
+    /** The height it is laid out at. Left out, as tall as the box allows at the scale its width sets. */
+    height?: number | undefined;
+    /**
+     * `width` scales the content to the box's width from its top (the top of a
+     * page); `contain` scales it to fit inside the box whole, centred (a board
+     * of its own size).
+     */
+    fit?: 'width' | 'contain' | undefined;
+}
+/**
+ * Content laid out at a size of its own and scaled to the box it is drawn in,
+ * with a CSS transform: the layout `LivePreview` gives a page, for content
+ * that knows its own size only once it has loaded (a design's board).
+ */
+export declare function PreviewScale({ children, width, height, fit }: PreviewScaleProps): import("react").JSX.Element;

package/dist/LivePreview/budget.d.ts

@@ -0,0 +1,50 @@
+/**
+ * How many live previews draw at once: the budget a gallery's cards share.
+ *
+ * WHY A BUDGET. A live preview is real content drawn small: a page of prose,
+ * a grid of cells, a slide, or a sandboxed frame running a page of its own. A
+ * gallery of two hundred artifacts that drew every one would run two hundred
+ * of them, most never seen. A preview asks for a slot when it comes near the
+ * viewport and gives it back when it leaves; past the cap it waits, drawing
+ * its stand-in, and is granted a slot the moment one is free, the oldest ask
+ * first.
+ *
+ * Plain bookkeeping with no layout, so it is tested without a browser.
+ */
+/**
+ * The most previews live at once by default. A gallery at 1440 shows two or
+ * three rows of three cards with a row of margin either side, so twelve keeps
+ * everything a reader can scroll to in a moment live, and is the number of
+ * pages a design's canvas already runs at once (`CANVAS_BOARD_MAX_LIVE`).
+ */
+export declare const LIVE_PREVIEW_MAX = 12;
+export interface LivePreviewBudget {
+    /** The most slots granted at once. */
+    readonly max: number;
+    /**
+     * Asks for a slot. `grant` is called once, now or when a slot frees. The
+     * answer gives the slot back, or withdraws the ask if it was never granted;
+     * calling it again does nothing.
+     */
+    request(grant: () => void): () => void;
+    /** Slots held now, for a test or a measurement. */
+    live(): number;
+    /** Asks waiting now. */
+    waiting(): number;
+}
+/**
+ * Runs a grant later, and answers how to call it off. The budget hands out
+ * at most one slot per call, so a burst of asks (a fast scroll bringing a
+ * whole row near at once) mounts one preview per tick rather than all of them
+ * in one long task.
+ */
+export type LivePreviewSchedule = (run: () => void) => () => void;
+/** Grants now: for a test, and for a host that paces nothing. */
+export declare const immediately: LivePreviewSchedule;
+/**
+ * One grant per animation frame, after the frame's own work: the default in a
+ * browser, so mounting a row of previews never costs one frame more than one
+ * preview does.
+ */
+export declare const perFrame: LivePreviewSchedule;
+export declare function createLivePreviewBudget(max?: number, schedule?: LivePreviewSchedule): LivePreviewBudget;

package/dist/LivePreview/index.d.ts

@@ -0,0 +1,5 @@
+import './LivePreview.css';
+export { LIVE_PREVIEW_DWELL_MS, LivePreview, LivePreviewBudgetProvider, PreviewScale, useLivePreview } from './LivePreview.js';
+export type { LivePreviewProps, LivePreviewSignals, LivePreviewState, PreviewScaleProps } from './LivePreview.js';
+export { createLivePreviewBudget, immediately, LIVE_PREVIEW_MAX, perFrame } from './budget.js';
+export type { LivePreviewBudget, LivePreviewSchedule } from './budget.js';

package/dist/LivePreview/index.js

@@ -0,0 +1,2 @@
+export { LIVE_PREVIEW_DWELL_MS, LIVE_PREVIEW_MAX, LivePreview, LivePreviewBudgetProvider, PreviewScale, createLivePreviewBudget, immediately, perFrame, useLivePreview } from '../chunk-KF6YGL4B.js';
+import '../chunk-ODEQTPFM.js';

package/dist/LivePreview-SRO7KHO4.css

@@ -0,0 +1,65 @@
+/*
+ * A live preview: the stand-in and the live layer stacked in one box. The box
+ * takes its size from its parent (a card's preview area), so it fills it and
+ * clips whatever the content lays out past its edge.
+ */
+
+.crewlet-live-preview {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  contain: layout paint;
+}
+
+.crewlet-live-preview__fallback {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  transition: opacity var(--motion-duration-base) var(--motion-easing-out);
+}
+
+.crewlet-live-preview__live {
+  position: absolute;
+  inset: 0;
+  display: block;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  user-select: none;
+  transition: opacity var(--motion-duration-base) var(--motion-easing-out);
+}
+
+/* LAID OUT AT ITS OWN SIZE from the top left corner, and scaled from there:
+   to the box's width, its top left the box's, or whole and centred. */
+.crewlet-preview-scale {
+  position: absolute;
+  inset: 0;
+  display: block;
+  overflow: hidden;
+}
+
+.crewlet-preview-scale__layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  overflow: hidden;
+  transform-origin: 0 0;
+}
+
+.crewlet-live-preview[data-state='ready'] > .crewlet-live-preview__live {
+  opacity: 1;
+}
+
+.crewlet-live-preview[data-state='ready'] > .crewlet-live-preview__fallback {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-live-preview__fallback,
+  .crewlet-live-preview__live {
+    transition: none;
+  }
+}

package/dist/Markdown/index.js

@@ -1 +1 @@
-export { MARKDOWN_CALLOUT_NAMES, MARKDOWN_CALLOUT_TONES, markdownBreaks, markdownClosesFence, markdownCodeText, markdownFenceOf, markdownHeadingOf, markdownInline, markdownLines, parseMarkdown, parseMarkdownSpans, safeHref } from '../chunk-SKOYC2CF.js';
+export { MARKDOWN_CALLOUT_NAMES, MARKDOWN_CALLOUT_TONES, markdownBreaks, markdownClosesFence, markdownCodeText, markdownFenceOf, markdownHeadingOf, markdownInline, markdownLines, parseMarkdown, parseMarkdownSpans, safeHref } from '../chunk-KK5OYNAF.js';

package/dist/MarkdownEditor/index.js

@@ -1,11 +1,11 @@
-export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-LZHLSQYK.js';
+export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-OOWPSBIS.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-FQCLKD7U.js';
-import '../chunk-RCQXUT5K.js';
-import '../chunk-HJEVSQN6.js';
+import '../chunk-WKEPORNM.js';
+import '../chunk-CCAXYHQS.js';
+import '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/MediaMatch/index.d.ts

@@ -0,0 +1 @@
+export { useMediaMatch } from './useMediaMatch.js';

package/dist/MediaMatch/index.js

@@ -0,0 +1 @@
+export { useMediaMatch } from '../chunk-RTPQDNW3.js';

package/dist/MediaMatch/useMediaMatch.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Whether a media query matches now, and again whenever that changes.
+ *
+ * ONE COPY FOR EVERY CONSUMER. The shell reads it to decide where its rail
+ * goes, the switcher whether it opens as a sheet, and an application the one
+ * layout decision a stylesheet cannot make (which element a phone draws, not
+ * how it is styled); two copies of the subscription would be two answers to
+ * "is this a phone" that can disagree for a frame while a window is resized.
+ * Anything a media query in a stylesheet CAN decide belongs there instead: a
+ * width written in both places is a width that can disagree with itself.
+ *
+ * READ DURING RENDER, through `useSyncExternalStore`, so the first render
+ * already has the answer: a layout decided in an effect paints the wrong
+ * shape for a frame and then moves.
+ *
+ * On the server, and in a browser without `matchMedia`, the answer is `false`:
+ * the wide layout is the one that needs no JavaScript to be usable.
+ */
+export declare function useMediaMatch(query: string): boolean;

package/dist/Menu/index.js

@@ -1,5 +1,5 @@
-export { Menu } from '../chunk-2HIOJ4YZ.js';
-import '../chunk-HMPFGIWM.js';
+export { Menu } from '../chunk-3EB2AV3H.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/MergeConflicts/index.js

@@ -1,7 +1,7 @@
-export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-RWA4H2TV.js';
-import '../chunk-FQCLKD7U.js';
-import '../chunk-RCQXUT5K.js';
-import '../chunk-HJEVSQN6.js';
+export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-J6ON5SYE.js';
+import '../chunk-WKEPORNM.js';
+import '../chunk-CCAXYHQS.js';
+import '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-OG6CL3EB.js';

package/dist/Modal/index.js

@@ -1,6 +1,6 @@
-export { ConfirmModal, Modal } from '../chunk-I3KKZ2O3.js';
+export { ConfirmModal, Modal } from '../chunk-XEGZHHRH.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/{Modal-XOSV6FAH.css → Modal-7MWRCWAI.css}

@@ -284,6 +284,36 @@
   border-bottom: 1px solid var(--color-border-default);
 }
 
+/*
+ * WITH A SUBTITLE, THE HEAD'S CONTROLS SIT ON THE TITLE'S LINE. Centred on
+ * the whole head, the mark, the actions and the close control floated beside
+ * the description, belonging to neither line; top-aligned, they hung from the
+ * head's top edge, a few pixels above the title they belong to. So the row
+ * aligns to the top and each control is centred on the title's first line:
+ * the mark and the actions in a box one title line tall (what is taller
+ * overflows it evenly, into the head's padding), and a lone control by the
+ * margin that puts its centre there. A dialog with no subtitle keeps the
+ * centring above, where the two are the same thing.
+ *
+ * DIALOGS ONLY. A sheet's head is a bar at the shell's top-bar height and
+ * centres what it holds on the bar, as the bar behind it does.
+ */
+.crewlet-modal__header--subtitled {
+  --crewlet-modal-title-line: calc(var(--font-size-sm) * var(--font-line-height-tight));
+  align-items: flex-start;
+}
+
+.crewlet-modal__header--subtitled > .crewlet-modal__icon,
+.crewlet-modal__header--subtitled > .crewlet-modal__actions {
+  align-items: center;
+  height: var(--crewlet-modal-title-line);
+}
+
+.crewlet-modal__header--subtitled > .crewlet-modal__close,
+.crewlet-modal__header--subtitled > .crewlet-modal__back {
+  margin-block: calc((var(--crewlet-modal-title-line) - var(--size-control-md)) / 2);
+}
+
 /*
  * A SHEET IS COMMITTED FROM ITS HEAD, so its head is the taller band, not the
  * tighter one. It stands at the shell's own top-bar height, which is what puts

package/dist/Note/index.js

@@ -1,2 +1,2 @@
-export { Note } from '../chunk-CJKMURZO.js';
+export { Note } from '../chunk-5SZGKSGL.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Note-ONSKKTOA.css → Note-WI5MLZOO.css}

@@ -60,6 +60,19 @@
   text-decoration: underline;
   text-underline-offset: 2px;
 }
+/*
+ * PARAGRAPHS STAND APART, by the step a note's heading stands from its words.
+ * A host that resets a paragraph's margins (as an application's base sheet
+ * does) ran two paragraphs into what read as one that wrapped early.
+ */
+.crewlet-note :is(p, ul, ol) {
+  margin-block: 0;
+}
+
+.crewlet-note :is(p, ul, ol) + :is(p, ul, ol) {
+  margin-block-start: var(--spacing-2);
+}
+
 .crewlet-note > :first-child {
   margin-top: 0;
 }

package/dist/OrgLabel/index.js

@@ -1,4 +1,4 @@
-export { OrgLabel } from '../chunk-AKEZ3G5V.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+export { OrgLabel } from '../chunk-ONQKKHON.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgNode/index.js

@@ -1,5 +1,5 @@
-export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-TBMDMXEX.js';
-import '../chunk-AKEZ3G5V.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-YA3AWELW.js';
+import '../chunk-ONQKKHON.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgTable/index.js

@@ -1,12 +1,12 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-AMNN4WDX.js';
-import '../chunk-VEB5ERRE.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-JBUMD6DS.js';
+import '../chunk-QWNVSR6G.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-AKEZ3G5V.js';
-import '../chunk-VYOKRN2I.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+import '../chunk-ONQKKHON.js';
+import '../chunk-LM3ISVJA.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-TROLVEZY.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/PeopleRail/index.js

@@ -1,9 +1,9 @@
-export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-UQHKFF2N.js';
+export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-GPWJCP3U.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/Popover/index.js

@@ -1,4 +1,4 @@
-export { Popover } from '../chunk-BWRGFKJP.js';
-import '../chunk-HMPFGIWM.js';
+export { Popover } from '../chunk-K3IJQNB7.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/PresenceStack/index.js

@@ -1,9 +1,9 @@
-export { PresenceStack } from '../chunk-ODT5H4MN.js';
+export { PresenceStack } from '../chunk-3LYWD3BO.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-I6POAB4V.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-UAN5NE7M.js';
-import '../chunk-5OM447RW.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';