@crewlethq/ui 0.2.0 → 0.3.0

package/dist/Kbd-W66MXQI5.css

@@ -0,0 +1,61 @@
+/* A keycap: the key's name on a small raised tile. */
+.crewlet-kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 18px;
+  padding: 1px var(--spacing-1);
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--color-border-default);
+  /* The thicker bottom edge is the whole of the "cap": one border, drawn
+     heavier on one side, reads as a key without a shadow that forced-colors
+     mode would drop. */
+  border-bottom-width: 2px;
+  background: var(--color-surface-inset);
+  /*
+   * The MONO face, not the surrounding one. A keycap is a literal: the reader
+   * is being told which character is printed on a key, and a proportional face
+   * draws `l`, `I` and `1` as three widths of the same mark.
+   */
+  font-family: var(--font-family-mono);
+  font-variant-ligatures: none;
+  font-size: var(--font-size-2xs);
+  /* THE DOCUMENT'S OWN LEADING, because a cap is drawn INSIDE a line of text
+     and not beside it: a hint at the end of a search field, a key named in a
+     sentence, a shortcut in a menu row. Tightened it stood a pixel under the
+     line it sits in and the row it was in wobbled by that pixel wherever a
+     cap appeared and wherever one did not. */
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+/*
+ * A quieter cap: FLATTER, not fainter. The opacity this replaces multiplied
+ * the ink as well as the frame, and 0.7 of a text step measures 3.43:1 on the
+ * panel, so a hint printing the key a reader is told to press was the one
+ * thing on the row they could not read. The cap gives up its raised edge and
+ * its fill instead, and keeps the tertiary ink, which is measured at 4.5:1 on
+ * every surface the package paints on.
+ */
+.crewlet-kbd--subtle {
+  border-bottom-width: 1px;
+  background: none;
+}
+
+/*
+ * A whole shortcut: the caps drawn together, and one sentence read instead of
+ * them. The caps are hidden from assistive technology by the component; this
+ * only lays them out.
+ */
+.crewlet-kbd-combo {
+  display: inline-flex;
+  align-items: center;
+}
+
+.crewlet-kbd-keys {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}

package/dist/Layer/LayerHost.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+export interface LayerHostProps {
+    children?: ReactNode;
+    className?: string | undefined;
+}
+/**
+ * Provides a portal target for every overlay rendered inside it.
+ *
+ * The target is a sibling AFTER the children, covering the host's own box, so
+ * a surface placed against `getBoundingClientRect()` is placed against the
+ * container rather than the window. It takes no pointer events itself, so the
+ * content beneath stays live while nothing is open; each overlay inside takes
+ * them back for its own panel.
+ */
+export declare function LayerHost({ children, className }: LayerHostProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The element an overlay rendered here should portal into.
+ *
+ * `null` before the host's own element is measured and on the server, which is
+ * what a caller renders nothing for; everywhere else it is the nearest host,
+ * or the document body.
+ */
+export declare function useLayerContainer(): HTMLElement | null;

package/dist/Layer/index.d.ts

@@ -0,0 +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 type { Placement, PlacementRect, PlacementSize } from './place.js';
+export { LayerHost, useLayerContainer } from './LayerHost.js';
+export type { LayerHostProps } from './LayerHost.js';

package/dist/Layer/index.js

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

package/dist/Layer/place.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Where a floating surface goes beside the thing it belongs to.
+ *
+ * KEPT PURE, and separate from every component that calls it, because none of
+ * it can be observed in jsdom: there is no layout, so a menu that placed
+ * itself off the bottom of a canvas or lost its last item past an edge nobody
+ * can scroll would pass any component suite. As arithmetic over numbers it has
+ * a suite of its own, and each component is left with the wiring.
+ *
+ * All four values are in the SAME coordinate space, whichever one the caller
+ * picks: viewport coordinates for a surface positioned against the window,
+ * container coordinates for one inside a `LayerHost`. The function does no
+ * conversion, so a caller that mixes the two gets an answer in neither.
+ */
+/** The slice of a DOMRect these functions read, so a plain object works too. */
+export interface PlacementRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface PlacementSize {
+    width: number;
+    height: number;
+}
+export interface Placement {
+    left: number;
+    top: number;
+    /** Which side of the anchor the surface ended up on. */
+    side: 'below' | 'above';
+}
+/**
+ * The event a layer receives when the content beneath it moves.
+ *
+ * A surface positioned from an anchor's rectangle has to follow that anchor
+ * through a pan, a zoom or a scroll, and listening on the layer it was
+ * rendered into is the whole contract: it never needs to know what kind of
+ * surface drew the layer.
+ */
+export declare const LAYER_REPOSITION_EVENT = "crewlet:viewchange";
+/** Space between a surface and its anchor, and between a surface and an edge. */
+export declare const LAYER_GAP = 4;
+/**
+ * Where a surface of `size` goes beside `anchor`, inside `bounds`.
+ *
+ * On the preferred side of the anchor and aligned to its start; on the other
+ * side when the preferred one has not room and the other has more; and slid
+ * back inside the bounds on both axes, so a menu opened from a card at the
+ * edge of a canvas is never cut off by the edge it opened near. Where neither
+ * side has room for the whole surface it overlaps its anchor rather than
+ * losing its last items past an edge nobody can scroll; one larger than the
+ * bounds keeps its START in view, which is where its first item is.
+ *
+ * `prefer` exists because the caller sometimes knows better than the geometry:
+ * a picker at the foot of a form opens upward by design, and a panel that
+ * flipped only when it ran out of room would jump between sides as the page
+ * scrolled.
+ */
+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 been carried entirely outside its bounds. */
+export declare function outsideBounds(anchor: PlacementRect, bounds: PlacementRect): boolean;

package/dist/Layer/stack.d.ts

@@ -0,0 +1,159 @@
+/**
+ * The layer stack: which open surface a key press or a press outside belongs to.
+ *
+ * WHY IT EXISTS. Every overlay in this package used to put its own Escape
+ * listener on the document, so one press closed a Select, the Modal around it
+ * and the page's own dialog together; a backdrop press closed two layers at
+ * once; and nothing trapped Tab, so a keyboard reader walked straight out of a
+ * dialog into the page behind its veil. Two shells getting those rules right
+ * separately is how the two come to disagree.
+ *
+ * THE RULES IT KEEPS.
+ *
+ * - ONE STACK holding modals (a dialog, a sheet) and popups (a menu, a
+ *   listbox). Only the TOPMOST entry handles Escape and a press outside, so an
+ *   open menu inside a dialog closes first, then the dialog.
+ * - ORDER IS OPENING ORDER, taken when the surface renders open rather than
+ *   when its effect runs: React runs a child's effects before its parent's, so
+ *   a dialog mounted inside a sheet in the same commit would otherwise
+ *   register first and end up beneath the sheet it sits on.
+ * - A MODAL TRAPS TAB. Focus cycles inside the topmost modal, and Tab from
+ *   anywhere outside it comes back in. There is no exception for a modal the
+ *   stack does not know: a hand-rolled one raised over a sheet would have its
+ *   Tab pulled back into the sheet and its Escape taken by the sheet beneath
+ *   it, which is why every overlay in this package is on the stack.
+ * - FOCUS GOES IN ON OPEN, unless something inside already took it (a field
+ *   with `autoFocus`), and GOES BACK ON CLOSE to whatever held it when the
+ *   modal first rendered. That is captured during RENDER on purpose: by the
+ *   time an effect runs, `autoFocus` has already moved focus into the modal,
+ *   and a capture taken then would restore focus to an element that no longer
+ *   exists. When that element has gone because it sat in a modal that closed
+ *   as this one opened, focus goes where that modal would have sent it; when
+ *   it has gone from a modal that is still open, to that modal's panel, never
+ *   behind its veil (`returnChain`). A modal that closes BENEATH another
+ *   surface still open above it returns nothing: focus is in that surface.
+ * - A VEIL CLOSES ONLY ITS OWN MODAL, and only when the press lands on the
+ *   veil itself. The decision is taken on `pointerdown`, before any surface
+ *   closes, so the press that dismisses a menu is never also read as a press
+ *   on the veil beneath it. The CLOSE waits for that press's `click`: a veil
+ *   removed on `pointerdown` is gone before a tap's compatibility mouse events
+ *   are hit-tested, so the click a finger ends with would land on whatever the
+ *   veil was covering, such as a Delete button behind a dialog.
+ * - A CONTROL THAT CONSUMES ESCAPE KEEPS IT. A completion list that closes on
+ *   Escape calls `preventDefault` or stops propagation, and the stack leaves
+ *   that press alone. So does an input method mid-composition (`isComposing`):
+ *   its Escape abandons a word, and its Tab is its own.
+ * - A SURFACE'S Z-INDEX IS ITS DEPTH IN THE STACK, inside a band of its own
+ *   (`--z-index-layer-base` to `--z-index-layer-max`), never a counter that
+ *   only grows. The token scale leaves two free steps above a modal (popover,
+ *   then toast), so a counter would put the second dialog of a session at the
+ *   popover level, the third at the toast level, and everything after that
+ *   permanently above the toast. A toast reports what a write inside a dialog
+ *   did; it has to paint above it.
+ *
+ * WHAT IT DOES NOT OWN: markup, copy, and whether closing is allowed right
+ * now. A modal mid-write passes `dismissable: false`.
+ *
+ * ONE STACK PER DOCUMENT, EVEN WITH TWO COPIES OF THE PACKAGE. It lives under
+ * `Symbol.for('crewlet.layer-stack')` on `globalThis`, because a consumer that
+ * ends up with two versions of @crewlethq/ui installed would otherwise get two
+ * module-level arrays, and a dialog on one of them would not know about a menu
+ * on the other: Escape would close both, and Tab would leave.
+ */
+export type LayerKind = 'modal' | 'popup';
+/** Why a surface is being dismissed. */
+export type DismissReason = 'escape' | 'outside' | 'tab';
+/**
+ * Whether this press belongs to an input method's composition rather than to
+ * the page.
+ *
+ * Somebody typing Japanese, Chinese or Korean builds each word in a
+ * composition: the arrows walk the candidates, Enter accepts one and Escape
+ * abandons it. Those presses still reach the page as `keydown`, so a list that
+ * read that Enter as "take the highlighted option", or a modal that read that
+ * Escape as "close", acted on a key the reader pressed for the input method.
+ *
+ * Browsers flag such a press with `isComposing`. Safari delivers the Enter
+ * that ENDS a composition after it has already cleared that flag, marked only
+ * by the legacy key code 229, so both are read. One definition, because a
+ * primitive checking only the flag would act on that Enter in Safari while the
+ * others did not.
+ */
+export declare function isComposing(event: {
+    isComposing?: boolean;
+    keyCode?: number;
+    nativeEvent?: unknown;
+}): boolean;
+/**
+ * What a keyboard user can Tab to inside `root`, in document order.
+ *
+ * Exported because a surface choosing where focus starts needs the same answer
+ * the trap uses; two selectors would disagree about a disabled button.
+ */
+export declare function focusables(root: Element): HTMLElement[];
+/**
+ * Whether a modal is open, which makes everything behind it inert.
+ *
+ * For a shortcut that belongs to the page rather than to any surface, such as
+ * a shell's search. `aria-modal` tells a screen reader that nothing behind the
+ * dialog can be reached, and a page shortcut that fires through it breaks that
+ * in the most expensive way: search opened over a dialog navigates, and the
+ * navigation unmounts the dialog, a write still in flight included. A popup
+ * does not count: it is not modal, and the page's keys still reach past a
+ * menu.
+ */
+export declare function isModalLayerOpen(): boolean;
+export interface ModalLayerOptions {
+    onClose: () => void;
+    /** False while a request is in flight: Escape and the veil stop closing. */
+    dismissable?: boolean | undefined;
+    /**
+     * Where focus starts when nothing inside has taken it, if not the first
+     * control. A sheet's first control is its Close button, and an editor that
+     * opens with focus on Close has made closing the first thing it asks.
+     */
+    initialFocus?: (() => HTMLElement | null) | undefined;
+}
+export interface ModalLayer {
+    /** The dialog element: focus goes into it and Tab stays in it. */
+    panelRef: (el: HTMLElement | null) => void;
+    /** The veil behind it: a press on the veil itself closes the modal. */
+    veilRef: (el: HTMLElement | null) => void;
+    /** This surface's place in the band, to put on the veil. */
+    zIndex: number;
+    /** Whether this surface is the one a key press would reach now. */
+    isTopmost: boolean;
+}
+/** A modal surface: a dialog or a sheet. Mount it only while it is open. */
+export declare function useModalLayer({ onClose, dismissable, initialFocus }: ModalLayerOptions): ModalLayer;
+export interface PopupLayerOptions {
+    open: boolean;
+    /** Called on Escape and on a press outside the popup and its `inside` elements. */
+    onDismiss: (reason: DismissReason) => void;
+}
+export interface PopupLayer {
+    /** The popup surface. */
+    panelRef: (el: HTMLElement | null) => void;
+    /** An element a press on does not dismiss, such as the button that toggles it. */
+    insideRef: (el: HTMLElement | null) => void;
+    zIndex: number;
+    isTopmost: boolean;
+}
+/**
+ * A non-modal popup on the same stack: a menu, a listbox. It traps nothing,
+ * and it closes before anything beneath it.
+ */
+export declare function usePopupLayer({ open, onDismiss }: PopupLayerOptions): PopupLayer;
+/**
+ * Holding the document's scroll while a surface is up, counted.
+ *
+ * REF COUNTED, because two modals can be open at once and each writes
+ * `document.body.style.overflow` on the way in and gives it back on the way
+ * out. Written as two independent effects, the inner one's cleanup restores
+ * the scroll while the outer modal is still up, and the page behind a dialog
+ * starts scrolling under it. The FIRST lock records what to give back, so a
+ * host page that had its own overflow keeps it.
+ */
+export declare function useBodyScrollLock(active: boolean): void;
+/** How many surfaces are on the stack. Exported for the package's own suites. */
+export declare function layerCount(): number;

package/dist/Layer-NAFSGCFA.css

@@ -0,0 +1,23 @@
+/*
+ * The portal target a LayerHost provides.
+ *
+ * It covers its container so a surface placed against its rectangle is placed
+ * against the container, and it is inert until something is drawn in it: an
+ * empty host over a canvas must not swallow the drag that pans the canvas.
+ * Each overlay inside takes pointer events back for its own panel.
+ *
+ * Its container establishes the positioning context. A host whose parent is
+ * static covers the nearest positioned ancestor instead, which is the
+ * viewport in the common case and is still a usable bound.
+ */
+
+.crewlet-layer-host {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: var(--z-index-layer-base);
+}
+
+.crewlet-layer-host > * {
+  pointer-events: auto;
+}

package/dist/Layout/Layout.d.ts

@@ -0,0 +1,104 @@
+/**
+ * The four layout primitives every screen is assembled from.
+ *
+ * WHY THEY EXIST. A product that has no Stack writes `display: flex` in a
+ * hundred places, and each one spends its own gap: the dashboard this set
+ * comes from carried 87 inline `style` props, 56 of them holding a literal (a
+ * gap of 2, a max width of 380, a left pad of depth times 12). Every one of
+ * those is a value nobody can find again and nothing can hold to a scale.
+ *
+ * So a gap is a STEP on the spacing scale rather than a number, which is what
+ * makes a density setting reach it: every step is `calc(Npx * var(--density))`
+ * in the token layer, so a compact reader gets a compact page without a single
+ * component knowing that density exists.
+ *
+ * WHAT THEY ARE NOT. They are not a style prop, and they are not a grid
+ * system. There is no `padding`, no `margin` and no colour here, because a
+ * component that takes those stops being a layout and starts being a second
+ * way to write CSS, with none of the review a stylesheet gets.
+ */
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+/**
+ * A step on the spacing scale, never a number of pixels.
+ *
+ * The union is what stops `gap={7.5}` and `gap={300}`: a value off the scale
+ * is the whole defect these primitives exist to remove.
+ */
+export type SpacingStep = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
+/** Cross-axis placement, in the words a reader of the markup can check. */
+export type LayoutAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+/** Main-axis placement. */
+export type LayoutJustify = 'start' | 'center' | 'end' | 'between' | 'around';
+/**
+ * What both flex primitives take.
+ *
+ * Exported under both names, as every other component in the package exports
+ * the props it takes: a screen that wraps a Stack in a component of its own
+ * has to be able to name what it is passing on.
+ */
+export interface StackProps extends HTMLAttributes<HTMLElement> {
+    /** The gap between children, as a spacing step. */
+    gap?: SpacingStep | undefined;
+    align?: LayoutAlign | undefined;
+    justify?: LayoutJustify | undefined;
+    /** Lets the children wrap onto another line. */
+    wrap?: boolean | undefined;
+    /** The element to draw. A div by default; a `ul`, a `header`, a `form`. */
+    as?: ElementType | undefined;
+    children?: ReactNode;
+}
+/** An Inline takes the same props; only the axis and the default align differ. */
+export type InlineProps = StackProps;
+/**
+ * A vertical run of children with one gap between them.
+ *
+ * `min-width: 0` is part of the primitive rather than something each caller
+ * remembers: a flex child's minimum size is its content, so one long token in
+ * one row pushes the whole column wider than its parent and the page grows a
+ * horizontal scrollbar nobody asked for.
+ */
+export declare function Stack({ gap, align, justify, wrap, as: Tag, className, children, ...rest }: StackProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * A horizontal run of children, centred on the cross axis.
+ *
+ * Centred by default because that is what a row of controls, chips and labels
+ * wants; a row whose items are different heights and must line up at the top
+ * passes `align="start"`.
+ */
+export declare function Inline({ gap, align, justify, wrap, as: Tag, className, children, ...rest }: StackProps): import("react/jsx-runtime").JSX.Element;
+export type SpacerProps = HTMLAttributes<HTMLSpanElement>;
+/**
+ * The flexible space that pushes what follows it to the far end of a row.
+ *
+ * DECORATION, so it is hidden from assistive technology: it holds no content,
+ * and an empty element in the accessibility tree is one more thing to walk
+ * past. A row that wants its trailing group pushed over uses this rather than
+ * `margin-left: auto` on a child, because the child then carries a rule about
+ * where it happens to sit in one particular row.
+ */
+export declare function Spacer({ className, ...rest }: SpacerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The smallest column a card may be drawn at, as a named step.
+ *
+ * Three steps, taken from the three the dashboard measured its own cards at:
+ * `sm` for a stat tile, `md` for a card with a sentence in it, `lg` for one
+ * holding a table or a chart.
+ */
+export type AutoGridMin = 'sm' | 'md' | 'lg';
+export interface AutoGridProps extends HTMLAttributes<HTMLDivElement> {
+    /** The narrowest a track may be before the row drops a column. */
+    min?: AutoGridMin | undefined;
+    gap?: SpacingStep | undefined;
+    children?: ReactNode;
+}
+/**
+ * Cards laid out at a minimum readable width, wrapping without a breakpoint.
+ *
+ * `auto-fill` with `minmax(min(step, 100%), 1fr)` is the whole of it. The
+ * inner `min()` is what stops the track being wider than the grid itself on a
+ * narrow screen, which is how a card grid gives a phone a horizontal
+ * scrollbar; `auto-fill` rather than `auto-fit` is what keeps a row that is
+ * short of a full set of cards drawing cards at the width the full row would
+ * give them, instead of stretching them over the collapsed tracks.
+ */
+export declare function AutoGrid({ min, gap, className, children, ...rest }: AutoGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/Layout/index.d.ts

@@ -0,0 +1,3 @@
+import './Layout.css';
+export { AutoGrid, Inline, Spacer, Stack } from './Layout.js';
+export type { AutoGridMin, AutoGridProps, InlineProps, LayoutAlign, LayoutJustify, SpacerProps, SpacingStep, StackProps, } from './Layout.js';

package/dist/Layout/index.js

@@ -0,0 +1,2 @@
+export { AutoGrid, Inline, Spacer, Stack } from '../chunk-W4ENKCXJ.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Layout-2ZCV3IGF.css

@@ -0,0 +1,171 @@
+/*
+ * Stack, Inline, Spacer and AutoGrid.
+ *
+ * The gap is one custom property with a token default, so a caller that passes
+ * no step still gets a value off the scale rather than the browser's zero, and
+ * the alignment classes are shared by both flex primitives: an align is an
+ * align whichever axis it is read on.
+ */
+
+.crewlet-stack,
+.crewlet-inline {
+  display: flex;
+  --crewlet-layout-gap: var(--spacing-2);
+  gap: var(--crewlet-layout-gap);
+  /* A flex child's minimum size is its content. Without this one long
+     identifier in one row widens the whole column past its parent. */
+  min-width: 0;
+}
+
+.crewlet-stack {
+  flex-direction: column;
+}
+
+.crewlet-inline {
+  flex-direction: row;
+}
+
+/*
+ * A GRID OF CARDS KEEPS ITS TRACKS. `auto-fill` lays down every track the row
+ * has room for and leaves the empty ones empty; `auto-fit`, which this was,
+ * COLLAPSES them, so the last row of a list, and every list that is short of a
+ * full row, stretches its cards across the whole width. One seat in a company
+ * drew a single card 1109px wide where its neighbours in a full row are 365.
+ * The inner min() is what keeps a track from being wider than the grid on a
+ * narrow screen, which is how a card row gives a phone a sideways scroll.
+ *
+ * The three track minimums are component variables rather than tokens: the
+ * token layer has no grid-track family, and a card's narrowest readable column
+ * is a property of the card rather than of the scale. An application that
+ * needs a fourth step sets --crewlet-auto-grid-min on its own wrapper.
+ *
+ * DECLARED BEFORE THE GAP CLASSES, and that order is load-bearing: a container
+ * and a --gap-N modifier are both one class, so the later rule in this file
+ * wins. Below them, `<AutoGrid gap={3}>` drew its own 16px default and the
+ * caller's step did nothing at all.
+ */
+.crewlet-auto-grid {
+  display: grid;
+  --crewlet-layout-gap: var(--spacing-4);
+  --crewlet-auto-grid-min: 260px;
+  gap: var(--crewlet-layout-gap);
+  grid-template-columns: repeat(auto-fill, minmax(min(var(--crewlet-auto-grid-min), 100%), 1fr));
+  min-width: 0;
+}
+
+.crewlet-auto-grid--sm {
+  --crewlet-auto-grid-min: 180px;
+}
+
+.crewlet-auto-grid--md {
+  --crewlet-auto-grid-min: 260px;
+}
+
+.crewlet-auto-grid--lg {
+  --crewlet-auto-grid-min: 360px;
+}
+
+/*
+ * One gap class per step on the scale, shared by all three containers: a gap
+ * is the same distance whichever direction the children run in. Written out
+ * rather than composed in JavaScript so every token name a component can read
+ * appears literally in a stylesheet, which is what the custom property check
+ * verifies against the tokens the build emits.
+ */
+.crewlet-layout--gap-0 {
+  --crewlet-layout-gap: var(--spacing-0);
+}
+
+.crewlet-layout--gap-1 {
+  --crewlet-layout-gap: var(--spacing-1);
+}
+
+.crewlet-layout--gap-2 {
+  --crewlet-layout-gap: var(--spacing-2);
+}
+
+.crewlet-layout--gap-3 {
+  --crewlet-layout-gap: var(--spacing-3);
+}
+
+.crewlet-layout--gap-4 {
+  --crewlet-layout-gap: var(--spacing-4);
+}
+
+.crewlet-layout--gap-5 {
+  --crewlet-layout-gap: var(--spacing-5);
+}
+
+.crewlet-layout--gap-6 {
+  --crewlet-layout-gap: var(--spacing-6);
+}
+
+.crewlet-layout--gap-7 {
+  --crewlet-layout-gap: var(--spacing-7);
+}
+
+.crewlet-layout--gap-8 {
+  --crewlet-layout-gap: var(--spacing-8);
+}
+
+.crewlet-layout--gap-9 {
+  --crewlet-layout-gap: var(--spacing-9);
+}
+
+.crewlet-layout--gap-10 {
+  --crewlet-layout-gap: var(--spacing-10);
+}
+
+.crewlet-layout--gap-11 {
+  --crewlet-layout-gap: var(--spacing-11);
+}
+
+.crewlet-layout--align-start {
+  align-items: flex-start;
+}
+
+.crewlet-layout--align-center {
+  align-items: center;
+}
+
+.crewlet-layout--align-end {
+  align-items: flex-end;
+}
+
+.crewlet-layout--align-baseline {
+  align-items: baseline;
+}
+
+.crewlet-layout--align-stretch {
+  align-items: stretch;
+}
+
+.crewlet-layout--justify-start {
+  justify-content: flex-start;
+}
+
+.crewlet-layout--justify-center {
+  justify-content: center;
+}
+
+.crewlet-layout--justify-end {
+  justify-content: flex-end;
+}
+
+.crewlet-layout--justify-between {
+  justify-content: space-between;
+}
+
+.crewlet-layout--justify-around {
+  justify-content: space-around;
+}
+
+.crewlet-layout--wrap {
+  flex-wrap: wrap;
+}
+
+.crewlet-spacer {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+

package/dist/Link/Link.d.ts

@@ -0,0 +1,45 @@
+import { type AnchorHTMLAttributes, type ReactNode } from 'react';
+export type LinkVariant = 
+/** A navigation: the accent ink, underlined on hover. */
+'default'
+/** An identity a reader clicks through to: neutral ink, underlined on hover. */
+ | 'subtle';
+export type LinkSize = 'body' | 'caption';
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    variant?: LinkVariant | undefined;
+    size?: LinkSize | undefined;
+    /**
+     * Leaves the application. Opens a tab, withholds the referrer and the
+     * opener, draws the mark that says so, and reads the sentence below.
+     */
+    external?: boolean | undefined;
+    /** Read after the link's own words when `external`. */
+    newTabLabel?: string | undefined;
+    /**
+     * A whole row is the target. It fills its line, draws no underline, and the
+     * focus ring is drawn inside the row rather than around the words.
+     */
+    block?: boolean | undefined;
+    /**
+     * Render the single child element with these classes instead of an anchor,
+     * to put this look on a router's own Link while keeping its navigation.
+     */
+    asChild?: boolean | undefined;
+    children?: ReactNode;
+}
+/**
+ * A link that reads as one.
+ *
+ * WHY IT IS NOT A `Text` WITH A COLOUR. The registers used to be utility
+ * classes, and a caption-sized link spelled with the caption class took the
+ * caption's quiet ink, which won over the anchor rule: four real navigations
+ * rendered as dim static micro-text that a reader could only find by hovering.
+ * A link is a different thing from a piece of text, so it is a different
+ * component, and `size="caption"` sets the caption's SIZE without its ink.
+ *
+ * `subtle` is for a link whose words are an identity rather than an
+ * instruction, a seat's name in a row, say. It is still underlined on hover
+ * and still takes the focus ring, because a link a reader cannot find is not
+ * quieter, it is hidden.
+ */
+export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;