@crewlethq/ui 0.83.0 → 0.84.0

package/README.md

@@ -205,6 +205,40 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.84.0
+
+### The application rail
+
+**The fold control is a chevron again, before the brand's mark.** The plus and minus of 0.83.0 give way to the chevrons the control drew before them, pointing left to fold the rail while it is full and right to unfold it while it is compact, and the control moves from the rail's top left corner onto the head's row, just before the brand's mark. The control and the mark are one pair, a step apart (`--spacing-1`) and centred together in the compact column, so the 76px column holds both (12, 24, 4, 24, 12) and neither moves when the rail folds; the mark's inset follows from the same arithmetic. Its names, `aria-expanded`, `aria-controls`, `aria-keyshortcuts`, the keys in its tooltip, its target floor and its ring inside its own box are unchanged. In the compact rail the lockup gives up its end inset, so the mark is all the column holds. Props are unchanged.
+
+**A badge takes a tone.** `NavItem`'s and `CompactNavItem`'s `badge` (type `NavBadge`) take `tone`, `'attention' | 'quiet'` (Count's own `CountTone`), with `attention` the default, so the inbox's accent pill is unchanged. `quiet` keeps the round pill, its size and its place on the row's end line, in the quiet count's grey: a neutral wash (`--color-fill-soft`) carrying the secondary ink, lifting to the row's ink on the reader's own row, measured on every ground a row can have in every palette. It is for work that is the reader's own and waits but does not call: My work beside the Inbox. In the compact rail a quiet badge is the tile's quiet figure, and a folded group's tile adds up only the badges that call. Story: `SidebarNav` Badge Tones.
+
+**Choosing a place in a folded group's flyout leaves focus somewhere.** The flyout closed on every choice, by a press, by the pointer resting and by the keys, but only a choice made with the keys handed focus back to the tile; a press left focus on the place's link, which went with the flyout, so the reader's next Tab started from the top of the document. Focus now follows the navigation: the destination takes it first (the place's handler, or a router that focuses the page it lands on, in its handler or its effects, often only where nothing holds focus), and only where nothing has taken it by the next frame does it go back to the tile, by a press as by a key (without a ring for a pointer reader). A place with no `href` closes like Escape, with focus straight back on the tile.
+
+**A choice does not reopen the flyout under a resting pointer.** Choosing a place closed the flyout with the pointer still on the tile or beside it, and resting there opened it again a moment later, over the page just chosen, so the flyout looked as if it had stayed open. After a choice, resting no longer opens it until the pointer has been somewhere other than the tile; a press and the keys still open it at once.
+
+### Screens that fill the window
+
+**A list's detail draws its scrollbar on the sheet's edge.** On a fill screen the scroller reserved its scrollbar's gutter and the content column padded inside it, so a `ListDetail`'s detail drew its scrollbar 31px inside the sheet beside an empty strip, and a trailing control (a header's Disconnect, a tile's Open) touched that scrollbar. A fill screen's scroller now reserves no gutter: its column pads its end by the inset plus the gutter instead, so its content stands exactly where it did, publishes that length as `--crewlet-app-shell-bleed-end`, and runs the sheet's whole width (a fill column no longer takes the `--size-content-max` measure; prose inside it keeps its own). A `ListDetail` placed directly in that column takes the length back, so its detail is the pane's outermost box and its scrollbar the sheet's last pixel. The detail reserves its gutter (`scrollbar-gutter: stable`) and keeps the screen's side inset inside itself (`--crewlet-list-detail-end`, the shell's inset by default), so its content, header actions and right-aligned section buttons end under the bar's last control whether or not it scrolls; folded to one pane, the list does the same. Only there: a `ListDetail` on a scrolling or a flush screen, or outside a shell, is as wide as its box, with nothing reserved. On a fill screen the shell reads the scrollbar's width off a hidden gauge, so the bar's controls keep their place between a fill screen and a scrolling one; a flush screen is unchanged. The bar and the column now share one inset, `--crewlet-app-shell-inset` (20px, 16px under the shell's breakpoint). Props are unchanged. Story: `ListDetail` In A Fill Screen, whose play function measures these edges.
+
+**A directory's lines clear its scrollbar.** `DirectoryList`'s groups, which scroll on their own above the foot, now reserve their scrollbar's gutter and end their lines a step (`--spacing-2`) before it, so a line's state pill no longer touches the scrollbar and does not move when the list grows long enough to scroll. Props are unchanged.
+
+### Catalogue tiles
+
+**Breaking: `CatalogTile`'s `status` is a tone and a word.** It took any node, so one row of tiles drew a service's In use as a soft pill and an app's Connected as a dot and a word, at two heights. It now takes `{ tone, label }` (type `CatalogTileStatus`, `tone` from the kit's `Tone`), and the tile draws every state the same way, the tone's dot and its word, at the caption step. On a compact tile the state stands after the name and the fact after the state on the header line; on a comfortable tile the fact stays in the foot. Pass `status={{ tone: 'success', label: 'In use' }}` where a `Tag` or a `StatusDot` was passed.
+
+### Answering in the inbox
+
+**A row taken from a group closes its height.** An `InboxGroup` keeps a keyed row that leaves its children drawn in its place, inert (focus inside it is let go), while its one track eases from `1fr` to `0fr` and it fades, on the slow step with the emphasized curve, so the rows under it slide up rather than jump; it is drawn no more once that motion has ended. The host only removes the row, in the same commit it adds it to another group. Rows need stable keys of their own, such as their ids: a row without one is told apart by its position, so it is not kept while it leaves (it goes at once), and the group says so once in development. Any keyed component child is kept as a row, so a host that draws its rows through a wrapper of its own (a memoized item) has the wrapper forward `leaving` and `onLeft` to its `InboxRow`; a plain element such as an empty state's `li` goes at once. The host's own `onLeft` on a row still runs, once, when the row has closed, which is how a host keeps a group that has emptied drawn until its last row has gone. A list of the host's own can drive the same with `InboxRow`'s `leaving` and `onLeft`. The row's content now stands in one box (`crewlet-inbox-row__body`) so its track can close over it. The motion a suite fakes is exported as `INBOX_ROW_LEAVE` (a transition of the row's own `grid-template-rows`).
+
+**An arrival is washed.** `InboxRow`'s `arrived` plays a brief wash of the accent that fades back to the row's own ground, and `InboxGroup`'s `arrived`, a token such as the arriving row's key, plays it over the group's label and count each time it changes, so a row that lands in a closed group is seen to land. Pass either only for a row that has just arrived.
+
+**`ReadingPane` moves on with its item.** `contentKey` names what the pane shows: a new value draws the item afresh and plays it in (a short fade and rise on the moderate step, `READING_PANE_ENTER` on the column), and moves focus to its title, without scrolling the page, where the reader was last in the pane (focus came into it, or a press landed in it), as after the control they answered with has gone with its item. A focused body is not taken as the pane's: Safari does not focus a pressed control and a live update moves nothing, so a reader in the list, or nowhere, keeps their place. Every change plays the item in, a return to the first item included. `focusTarget` names another place for it. `ReadingPaneTitle` is now focusable from code (`tabIndex={-1}`), never a tab stop. Under reduced motion nothing moves, and focus still follows. Story: `InboxList` Answering Moves On.
+
+### First-step cards
+
+**`ActionCard` is calmer, in light and dark.** The cards a new room opens with ("Add people and agents", "Add a description", "Start from a template") stood on saturated slabs of the kind's hue, deep purple, navy and brown on the dark sheet, under a full-hue edge and a muddy glow. Each ground is now a calm tint: the card rung, tinted by a share of the kind's hue (`--color-artifact-kind-<kind>-ground` and its steps, derived by the tokens build at 0.42 of the hue's chroma and 0.12 of its lightness from the card's neutral, 0.6 and 0.18 under the pointer, held to a chroma ceiling and to 4.5:1 for the title in every palette). The edge is the kind's own, at 3:1: its hue stepped toward the palette's ink until it clears 3:1 on the sheet and on the card's tint (`--color-artifact-kind-<kind>-edge`, derived by the tokens build), and a step further under the pointer (`-edge-strong`, against the strong tint), where the tint deepens and a small shadow lifts the card; the ring is drawn over the card's own edge. The corner and the shadow are from the edge scale (`--radius-xl`, `--shadow-xs`, `--shadow-sm` under the pointer). Every kind's drawing takes the same box, the card's width less its inset at the drawing canvas's own shape, so a tall page and a wide slide weigh the same, set a step into the card's foot on a soft shadow of the kind's Fill, with a lower halo (the glow at 0.24, was 0.46). Props are unchanged.
+
 ## Changes in 0.83.0
 
 ### The application rail

package/dist/ActionCard/ActionCard.d.ts

@@ -19,14 +19,14 @@ export interface ActionCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
     onSelect: () => void;
 }
 /**
- * A first step offered as a picture: a tall card on one of the kit's colour
- * grounds, its title at the top and a drawing at its foot. A new room opens
- * with a row of these (add people, add a description, start from a
- * template) until its first message.
+ * A first step offered as a picture: a tall card on a calm tint of one of
+ * the kit's kind colours, edged in the kind's hairline, its title at the top
+ * and a drawing at its foot. A new room opens with a row of these (add
+ * people, add a description, start from a template) until its first message.
  *
- * A QUIET HOVER. The ground deepens a step and a small shadow lifts the card
- * off the page; nothing moves, so a row of cards holds still under a pointer
- * passing over it.
+ * A QUIET HOVER. The tint deepens a step, the edge takes the kind's hue and a
+ * small shadow lifts the card off the page; nothing moves, so a row of cards
+ * holds still under a pointer passing over it.
  *
  * A BUTTON NAMED BY ITS TITLE. The drawing is hidden from assistive
  * technology, so a reader hears "Add people and agents, button" and nothing

package/dist/ActionCard/index.js

@@ -1,2 +1,2 @@
-export { ACTION_CARD_GROUND, ActionCard, ActionCardRow } from '../chunk-HTBTAIH6.js';
+export { ACTION_CARD_GROUND, ActionCard, ActionCardRow } from '../chunk-OM2LABPS.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ActionCard-YZKL3CKR.css

@@ -0,0 +1,130 @@
+/*
+ * ActionCard: a first step offered as a picture, on a CALM TINT of an
+ * artifact kind's hue. The ground is the kind's own Ground steps
+ * (ArtifactKinds.css): the card rung tinted by a share of the hue's chroma,
+ * never a slab of it, which the palette suite holds to 4.5:1 for the primary
+ * text in every palette and both modes and to a chroma ceiling. The edge is
+ * the kind's hue stepped toward the ink until it clears 3:1, a step further
+ * under the pointer, and a soft halo of the hue stands behind the drawing.
+ */
+
+/*
+ * ONE ROW THAT SCROLLS SIDEWAYS when it runs out of width, so a phone shows
+ * two cards and part of the third (the part says there is more) instead of a
+ * tall stack. The block padding keeps the focus ring and the hover shadow
+ * inside the scroller's clip; the negative margin gives that space back to
+ * the layout. A host that runs the row to its container's edges sets the
+ * inline padding and `scroll-padding-inline` to its own inset.
+ */
+.crewlet-action-cards {
+  display: flex;
+  gap: var(--spacing-2);
+  overflow-x: auto;
+  margin-block: calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1);
+  padding-block: var(--spacing-1) var(--spacing-2);
+  scroll-snap-type: x mandatory;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+
+.crewlet-action-cards::-webkit-scrollbar {
+  display: none;
+}
+
+.crewlet-action-card {
+  --crewlet-action-card-ground: var(--crewlet-kind-ground);
+  --crewlet-action-card-edge: var(--crewlet-kind-edge);
+  position: relative;
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 148px;
+  height: 172px;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: var(--spacing-3) var(--spacing-3) 0;
+  /* THE KIND'S OWN EDGE: its hue stepped toward the ink until it clears 3:1
+     on the sheet and on the card's tint (`--color-artifact-kind-<kind>-edge`,
+     derived by the tokens build and held by its suite). The Line step, the
+     hue at 0.38, did not clear it, and a neutral grey outline read as a card
+     from another family. */
+  border: 1px solid var(--crewlet-action-card-edge);
+  /* The edge scale: the extra-large corner a tall card of its own takes, and
+     the smallest shadow, so the card sits on the page rather than in it. */
+  border-radius: var(--radius-xl);
+  background-color: var(--color-surface-subtle);
+  background-image:
+    radial-gradient(90% 56% at 50% 100%, var(--crewlet-kind-glow) 0%, transparent 72%),
+    linear-gradient(180deg, var(--crewlet-action-card-ground) 0%, var(--crewlet-kind-ground-end) 100%);
+  box-shadow: var(--shadow-xs);
+  color: var(--color-text-primary);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  scroll-snap-align: start;
+  transition:
+    box-shadow var(--motion-duration-fast) var(--motion-easing-default),
+    border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* A QUIET HOVER: the tint deepens a step, the edge takes a stronger step of
+   the hue, and a small shadow lifts the card off the page. Nothing moves, so
+   a row of cards stays still under a pointer passing over it. */
+.crewlet-action-card:hover {
+  --crewlet-action-card-ground: var(--crewlet-kind-ground-strong);
+  --crewlet-action-card-edge: var(--crewlet-kind-edge-strong);
+  box-shadow: var(--shadow-sm);
+}
+
+/* The card draws its own edge, so the ring is drawn over it, on the same
+   corner. */
+.crewlet-action-card:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The title at the medium weight, as every emphasis in a conversation is,
+   two lines at most at its width, balanced so neither line is one word. */
+.crewlet-action-card__title {
+  max-width: 14ch;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-snug);
+  text-wrap: balance;
+}
+
+/*
+ * THE DRAWING STANDS ON THE CARD'S FOOT, still, the card's own width less its
+ * inset. Every kind's drawing is one canvas (160 by 120), so each takes the
+ * same box whatever its shape, a tall page and a wide slide alike, where a
+ * fixed width and a height cap drew a page half the size of a slide. It is
+ * set a step into the foot, so it stands on the edge rather than floating
+ * above it, on a soft shadow of the kind's Fill.
+ */
+.crewlet-action-card__art {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  margin-bottom: calc(var(--spacing-2) * -1);
+}
+
+.crewlet-action-card__art .crewlet-kind-illustration {
+  width: 100%;
+  height: auto;
+  filter: drop-shadow(0 4px 10px var(--crewlet-kind-fill));
+}
+
+/* FORCED COLORS drops the ground and the hue; the edge is drawn in the
+   system's text colour, so the card keeps its outline. */
+@media (forced-colors: active) {
+  .crewlet-action-card {
+    border-color: CanvasText;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-action-card {
+    transition: none;
+  }
+}

package/dist/AppShell/AppShell.d.ts

@@ -132,15 +132,18 @@ export interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
     /** The scroll container itself, for a router restoring a position. */
     mainRef?: Ref<HTMLElement> | undefined;
     /**
-     * Gives the screen the whole height left under the bar, as a flex column,
-     * for a canvas or a split view that draws to the bottom of the window
-     * instead of scrolling.
+     * Gives the screen the whole height and width left under the bar, as a flex
+     * column, for a canvas or a split view that draws to the bottom of the
+     * window instead of scrolling. The column keeps its pad, and its end pad
+     * counts the scrollbar's width, so its content stands where a scrolling
+     * screen's does; a `ListDetail` standing in it reaches past that pad, so
+     * its detail's scrollbar is on the sheet's edge.
      *
      * `flush` is the same column EDGE TO EDGE: the content column gives up its
-     * pad, its measure and its gap, and the scroller reserves no gutter, for a
-     * screen that draws its own frame to the sheet's edges (a conversation with
-     * a list and a pane either side of it). The column is positioned, so a
-     * `LayerHost` the screen keeps inside it fills exactly the screen.
+     * pad and its gap as well, for a screen that draws its own frame to the
+     * sheet's edges (a conversation with a list and a pane either side of it).
+     * The column is positioned, so a `LayerHost` the screen keeps inside it
+     * fills exactly the screen.
      */
     fill?: boolean | 'flush' | undefined;
     /**
@@ -162,10 +165,10 @@ export interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
     rail?: AppShellRailShape | undefined;
     /**
      * Called with the other shape when the reader presses the fold control.
-     * Given, the shell draws THE fold control (never in the drawer): a minus in
-     * the rail's top left corner while it is full, and a plus in the same place
-     * while it is compact. Keeping the choice, and binding a key to it, are the
-     * application's.
+     * Given, the shell draws THE fold control (never in the drawer): a chevron
+     * on the head's row, before the brand's mark, pointing left while the rail
+     * is full and right while it is compact. Keeping the choice, and binding a
+     * key to it, are the application's.
      */
     onRailChange?: ((next: AppShellRailShape) => void) | undefined;
     /**

package/dist/AppShell/index.js

@@ -1,4 +1,4 @@
-export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-PGBKZSSQ.js';
+export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-ORONAXSF.js';
 import '../chunk-PCAT2EFB.js';
 import '../chunk-JLOESTT2.js';
 import '../chunk-YJQXESOJ.js';

package/dist/{AppShell-U7D2MUUF.css → AppShell-NX5HCD4O.css}

@@ -26,6 +26,11 @@
 .crewlet-app-shell {
   --crewlet-app-shell-rail: var(--size-shell-rail);
   --crewlet-app-shell-topbar: var(--size-shell-topbar);
+  /* THE SHEET'S SIDE INSET, ONE LENGTH: the bar's, the content column's, and
+     the inset a box that reaches past the column to the sheet's edge keeps
+     inside itself (a `ListDetail` on a fill screen), one step narrower on a
+     narrow window. */
+  --crewlet-app-shell-inset: var(--spacing-5);
   /* What stands on the frame to the sheet's left: the rail's column, or
      nothing where there is no rail or the rail is a drawer. */
   --crewlet-app-shell-beside: var(--crewlet-app-shell-rail);
@@ -628,7 +633,8 @@
   gap: var(--spacing-3);
   flex: none;
   height: var(--crewlet-app-shell-topbar);
-  padding: 0 calc(var(--spacing-5) + var(--crewlet-app-shell-gutter, 0px)) 0 var(--spacing-5);
+  padding: 0 calc(var(--crewlet-app-shell-inset) + var(--crewlet-app-shell-gutter, 0px)) 0
+    var(--crewlet-app-shell-inset);
   border-bottom: 1px solid var(--color-border-default);
   background: var(--color-surface-background);
 }
@@ -718,46 +724,76 @@
   gap: var(--spacing-5);
   max-width: var(--size-content-max);
   margin: 0 auto;
-  padding: var(--spacing-5) var(--spacing-5);
+  padding: var(--crewlet-app-shell-inset);
   padding-bottom: var(--crewlet-app-shell-content-end);
   min-width: 0;
 }
 
-/* A screen that draws to the bottom of the window: the scroller stops
-   scrolling and the content column takes the height that is left.
-
-   IT KEEPS THE GUTTER RESERVED, like every other screen. The top bar's end
-   inset counts the scroller's gutter (`--crewlet-app-shell-gutter`, measured
-   by the shell), so a fill screen that reserved none put the bar's controls
-   one gutter further out than on the screen beside it: with classic
-   scrollbars, Add seat moved 11px between an org chart and its roster, two
-   tabs of one page. A strip at the end edge of a full-screen canvas is the
-   smaller cost than a bar that moves under the pointer. */
+/*
+ * A screen that draws to the bottom of the window: the scroller stops
+ * scrolling and the content column takes the height that is left, and the
+ * whole width, since a screen that fills the window is a frame for panes
+ * rather than a page of prose (prose inside it keeps its own measure).
+ *
+ * THE SCROLLER RESERVES NO GUTTER; THE COLUMN PADS BY IT INSTEAD. Nothing
+ * scrolls here, so the strip a scrolling screen keeps for its scrollbar is
+ * only there to hold the content where the bar's controls expect it (the
+ * bar's end inset counts the gutter). A reserved strip did that, and also
+ * stood between the sheet's edge and every pane that scrolls on its own: a
+ * list's detail drew its scrollbar 31px inside the sheet, beside an empty
+ * strip, and nothing in the screen could paint over a reserved gutter. The
+ * same length as padding holds the content exactly where it stood, and a box
+ * standing in the column can reach past padding: the column publishes it as
+ * `--crewlet-app-shell-bleed-end`, and a `ListDetail` takes it back so its
+ * scrollbar is the sheet's last pixel. The scrollbar's width is read off the
+ * shell's gauge here (AppShell.tsx), so the bar keeps its place between a
+ * fill screen and a scrolling one.
+ */
 .crewlet-app-shell--fill .crewlet-app-shell__main {
   overflow: hidden;
+  scrollbar-gutter: auto;
 }
 
 .crewlet-app-shell--fill .crewlet-app-shell__content {
   --crewlet-app-shell-content-end: var(--spacing-5);
+  --crewlet-app-shell-bleed-end: calc(var(--crewlet-app-shell-inset) + var(--crewlet-app-shell-gutter, 0px));
 
   height: 100%;
+  max-width: none;
+  padding-right: var(--crewlet-app-shell-bleed-end);
 }
 
 /*
- * A FLUSH SCREEN draws its own frame to the sheet's edges: the column gives up
- * its pad, its measure and its gap, and the scroller reserves no gutter, since
- * nothing in it scrolls and a strip at its end would cut the screen's own
- * edge. The column is the containing block for a `LayerHost` the screen
- * keeps, so its layers fill the screen rather than the window.
+ * THE GAUGE: an empty scroller, never seen, that always draws its scrollbar,
+ * so the shell can read the scrollbar's width on a fill screen, where the
+ * screen's own scroller reserves none. It is a row of no height in the
+ * sheet's column, clipped, so it takes no room and moves nothing; the ruler
+ * inside it has a height of its own, because a scroller of no height draws
+ * no scrollbar in Firefox and measured 0 there.
  */
-.crewlet-app-shell--fill-flush .crewlet-app-shell__main {
-  scrollbar-gutter: auto;
+.crewlet-app-shell__gauge {
+  flex: none;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.crewlet-app-shell__gauge-ruler {
+  height: var(--size-target-min);
+  overflow-y: scroll;
 }
 
+/*
+ * A FLUSH SCREEN draws its own frame to the sheet's edges: the column gives up
+ * its pad and its gap as well, so there is nothing for a box in it to reach
+ * past. The column is the containing block for a `LayerHost` the screen
+ * keeps, so its layers fill the screen rather than the window.
+ */
 .crewlet-app-shell--fill-flush .crewlet-app-shell__content {
+  --crewlet-app-shell-bleed-end: 0px;
+
   position: relative;
   gap: 0;
-  max-width: none;
   padding: 0;
 }
 
@@ -922,22 +958,26 @@
 }
 
 /*
- * THE FOLD CONTROL stands in the rail's top left corner, in both shapes, so
- * it never moves under the pointer that pressed it: a minus while the rail is
- * full and a plus while it is compact. The corner is the square the head
- * leaves empty up and to the left of the brand's mark, and the control is the
- * target floor (`--size-target-min`), so it ends short of the mark on the
- * compact column's centre at every density.
+ * THE FOLD CONTROL stands on the head's row, before the brand's mark, in both
+ * shapes, so it never moves under the pointer that pressed it: chevrons
+ * pointing left to fold the rail and right to unfold it.
+ *
+ * THE CONTROL AND THE MARK ARE ONE PAIR: the control at the target floor
+ * (`--size-target-min`, at every density), a step (`--spacing-1`), then the
+ * mark, which is a target's size too, the pair centred in the compact column
+ * so the 76px column holds both (12 + 24 + 4 + 24 + 12). The control is
+ * centred on the bar's line as the mark is: the inset, then half of what the
+ * bar leaves round it. The mark's inset below is the same arithmetic from the
+ * other side.
  *
  * Quiet until the rail is pointed at: the tertiary ink, which holds 3:1 on
  * the frame, then the secondary, and the ghost's own primary under the
- * pointer. Its ring is drawn inside its own box, because the corner it
- * stands in is the window's, and a ring outside it would be cut there.
+ * pointer. Its ring is drawn inside its own box, clear of the mark beside it.
  */
 .crewlet-app-shell__fold {
   position: absolute;
-  top: 0;
-  left: 0;
+  top: calc(var(--size-shell-inset) + (var(--crewlet-app-shell-topbar) - var(--size-target-min)) / 2);
+  left: calc((var(--size-shell-rail-compact) - 2 * var(--size-target-min) - var(--spacing-1)) / 2);
   z-index: 1;
   display: inline-flex;
 }
@@ -957,13 +997,20 @@
 }
 
 /*
- * THE MARK STANDS WHERE THE COMPACT RAIL'S DOES, in both shapes: centred over
- * the compact column, in the head. Full, the name follows it; compact, the
- * name is not drawn (the link keeps it as its name and title).
+ * THE MARK STANDS WHERE THE COMPACT RAIL'S DOES, in both shapes. With no fold
+ * control it is centred over the compact column; beside the fold control it
+ * is the second of the pair (above), a step after the control, which is half
+ * the column and half the step in. Full, the name follows it; compact, the
+ * name is not drawn (the link keeps it as its name and title), and the
+ * lockup's end inset is given up, so the mark is all the column holds.
  */
-.crewlet-app-shell--foldable .crewlet-app-shell__rail-head > .crewlet-brand,
 .crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-head > .crewlet-brand {
   padding-left: calc((var(--size-shell-rail-compact) - var(--crewlet-brand-mark)) / 2);
+  padding-right: 0;
+}
+
+.crewlet-app-shell--foldable[data-rail] .crewlet-app-shell__rail-head > .crewlet-brand {
+  padding-left: calc((var(--size-shell-rail-compact) + var(--spacing-1)) / 2);
 }
 
 .crewlet-app-shell[data-rail='compact'] .crewlet-brand__name,
@@ -1087,6 +1134,9 @@
 @media (width < 1024px) {
   .crewlet-app-shell {
     --crewlet-app-shell-beside: 0px;
+    /* 16px: the content's 12px stood every page's first line 4px left of
+       the bar's title and the controls over it. */
+    --crewlet-app-shell-inset: var(--spacing-4);
     grid-template-columns: minmax(0, 1fr);
   }
 
@@ -1169,18 +1219,8 @@
     display: inline-flex;
   }
 
-  /* THE TOP BAR'S GUTTER, 16px: the content's 12px stood every page's first
-     line 4px left of the title and the controls over it. The bar and the
-     content take it together. */
-  .crewlet-app-shell__topbar {
-    padding: 0 calc(var(--spacing-4) + var(--crewlet-app-shell-gutter, 0px)) 0 var(--spacing-4);
-  }
-
   .crewlet-app-shell__content {
     --crewlet-app-shell-content-end: var(--spacing-9);
-
-    padding: var(--spacing-4) var(--spacing-4);
-    padding-bottom: var(--crewlet-app-shell-content-end);
   }
 }
 

package/dist/ArtifactBar/index.js

@@ -1,4 +1,4 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-BXGBGYKH.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-HKUZ2GYX.js';
 import '../chunk-36WK24AI.js';
 import '../chunk-AZYE7NR4.js';
 import '../chunk-MVKUE4FI.js';

package/dist/ArtifactCard/index.js

@@ -1,4 +1,4 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-QM3432PH.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-C4JTX25K.js';
 import '../chunk-I4IUX3JF.js';
 import '../chunk-HF5L56YQ.js';
 import '../chunk-EJNJMHQG.js';
@@ -7,7 +7,7 @@ import '../chunk-U2IQNDDR.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-IRONPJB4.js';
 import '../chunk-XZY6S3UC.js';
-import '../chunk-ZB3E2Z4Y.js';
+import '../chunk-J5T5TDM2.js';
 import '../chunk-YQ7Q52XU.js';
 import '../chunk-DOY3KC6I.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';

package/dist/ArtifactKindIllustration/index.js

@@ -1,3 +1,3 @@
-export { ArtifactKindGround, ArtifactKindIllustration, ArtifactKindTile } from '../chunk-ZB3E2Z4Y.js';
+export { ArtifactKindGround, ArtifactKindIllustration, ArtifactKindTile } from '../chunk-J5T5TDM2.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ArtifactKinds-3EH4KR3F.css → ArtifactKinds-27TE3KJL.css}

@@ -9,10 +9,10 @@
  * its own, imported by each surface that tints, because the glyph's module
  * carries no stylesheet (a frame that draws one glyph takes nothing else).
  */
-.crewlet-kind--doc { --crewlet-kind-hue: var(--color-artifact-kind-doc); --crewlet-kind-fill: var(--color-artifact-kind-doc-fill); --crewlet-kind-line: var(--color-artifact-kind-doc-line); --crewlet-kind-ink: var(--color-artifact-kind-doc-ink); --crewlet-kind-ground: var(--color-artifact-kind-doc-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-doc-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-doc-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-doc-glow); }
-.crewlet-kind--slides { --crewlet-kind-hue: var(--color-artifact-kind-slides); --crewlet-kind-fill: var(--color-artifact-kind-slides-fill); --crewlet-kind-line: var(--color-artifact-kind-slides-line); --crewlet-kind-ink: var(--color-artifact-kind-slides-ink); --crewlet-kind-ground: var(--color-artifact-kind-slides-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-slides-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-slides-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-slides-glow); }
-.crewlet-kind--design { --crewlet-kind-hue: var(--color-artifact-kind-design); --crewlet-kind-fill: var(--color-artifact-kind-design-fill); --crewlet-kind-line: var(--color-artifact-kind-design-line); --crewlet-kind-ink: var(--color-artifact-kind-design-ink); --crewlet-kind-ground: var(--color-artifact-kind-design-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-design-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-design-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-design-glow); }
-.crewlet-kind--dashboard { --crewlet-kind-hue: var(--color-artifact-kind-dashboard); --crewlet-kind-fill: var(--color-artifact-kind-dashboard-fill); --crewlet-kind-line: var(--color-artifact-kind-dashboard-line); --crewlet-kind-ink: var(--color-artifact-kind-dashboard-ink); --crewlet-kind-ground: var(--color-artifact-kind-dashboard-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-dashboard-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-dashboard-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-dashboard-glow); }
-.crewlet-kind--html { --crewlet-kind-hue: var(--color-artifact-kind-html); --crewlet-kind-fill: var(--color-artifact-kind-html-fill); --crewlet-kind-line: var(--color-artifact-kind-html-line); --crewlet-kind-ink: var(--color-artifact-kind-html-ink); --crewlet-kind-ground: var(--color-artifact-kind-html-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-html-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-html-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-html-glow); }
-.crewlet-kind--brand { --crewlet-kind-hue: var(--color-artifact-kind-brand); --crewlet-kind-fill: var(--color-artifact-kind-brand-fill); --crewlet-kind-line: var(--color-artifact-kind-brand-line); --crewlet-kind-ink: var(--color-artifact-kind-brand-ink); --crewlet-kind-ground: var(--color-artifact-kind-brand-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-brand-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-brand-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-brand-glow); }
-.crewlet-kind--sheet { --crewlet-kind-hue: var(--color-artifact-kind-sheet); --crewlet-kind-fill: var(--color-artifact-kind-sheet-fill); --crewlet-kind-line: var(--color-artifact-kind-sheet-line); --crewlet-kind-ink: var(--color-artifact-kind-sheet-ink); --crewlet-kind-ground: var(--color-artifact-kind-sheet-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-sheet-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-sheet-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-sheet-glow); }
+.crewlet-kind--doc { --crewlet-kind-hue: var(--color-artifact-kind-doc); --crewlet-kind-fill: var(--color-artifact-kind-doc-fill); --crewlet-kind-line: var(--color-artifact-kind-doc-line); --crewlet-kind-ink: var(--color-artifact-kind-doc-ink); --crewlet-kind-ground: var(--color-artifact-kind-doc-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-doc-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-doc-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-doc-glow); --crewlet-kind-edge: var(--color-artifact-kind-doc-edge); --crewlet-kind-edge-strong: var(--color-artifact-kind-doc-edge-strong); }
+.crewlet-kind--slides { --crewlet-kind-hue: var(--color-artifact-kind-slides); --crewlet-kind-fill: var(--color-artifact-kind-slides-fill); --crewlet-kind-line: var(--color-artifact-kind-slides-line); --crewlet-kind-ink: var(--color-artifact-kind-slides-ink); --crewlet-kind-ground: var(--color-artifact-kind-slides-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-slides-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-slides-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-slides-glow); --crewlet-kind-edge: var(--color-artifact-kind-slides-edge); --crewlet-kind-edge-strong: var(--color-artifact-kind-slides-edge-strong); }
+.crewlet-kind--design { --crewlet-kind-hue: var(--color-artifact-kind-design); --crewlet-kind-fill: var(--color-artifact-kind-design-fill); --crewlet-kind-line: var(--color-artifact-kind-design-line); --crewlet-kind-ink: var(--color-artifact-kind-design-ink); --crewlet-kind-ground: var(--color-artifact-kind-design-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-design-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-design-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-design-glow); --crewlet-kind-edge: var(--color-artifact-kind-design-edge); --crewlet-kind-edge-strong: var(--color-artifact-kind-design-edge-strong); }
+.crewlet-kind--dashboard { --crewlet-kind-hue: var(--color-artifact-kind-dashboard); --crewlet-kind-fill: var(--color-artifact-kind-dashboard-fill); --crewlet-kind-line: var(--color-artifact-kind-dashboard-line); --crewlet-kind-ink: var(--color-artifact-kind-dashboard-ink); --crewlet-kind-ground: var(--color-artifact-kind-dashboard-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-dashboard-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-dashboard-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-dashboard-glow); --crewlet-kind-edge: var(--color-artifact-kind-dashboard-edge); --crewlet-kind-edge-strong: var(--color-artifact-kind-dashboard-edge-strong); }
+.crewlet-kind--html { --crewlet-kind-hue: var(--color-artifact-kind-html); --crewlet-kind-fill: var(--color-artifact-kind-html-fill); --crewlet-kind-line: var(--color-artifact-kind-html-line); --crewlet-kind-ink: var(--color-artifact-kind-html-ink); --crewlet-kind-ground: var(--color-artifact-kind-html-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-html-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-html-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-html-glow); --crewlet-kind-edge: var(--color-artifact-kind-html-edge); --crewlet-kind-edge-strong: var(--color-artifact-kind-html-edge-strong); }
+.crewlet-kind--brand { --crewlet-kind-hue: var(--color-artifact-kind-brand); --crewlet-kind-fill: var(--color-artifact-kind-brand-fill); --crewlet-kind-line: var(--color-artifact-kind-brand-line); --crewlet-kind-ink: var(--color-artifact-kind-brand-ink); --crewlet-kind-ground: var(--color-artifact-kind-brand-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-brand-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-brand-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-brand-glow); --crewlet-kind-edge: var(--color-artifact-kind-brand-edge); --crewlet-kind-edge-strong: var(--color-artifact-kind-brand-edge-strong); }
+.crewlet-kind--sheet { --crewlet-kind-hue: var(--color-artifact-kind-sheet); --crewlet-kind-fill: var(--color-artifact-kind-sheet-fill); --crewlet-kind-line: var(--color-artifact-kind-sheet-line); --crewlet-kind-ink: var(--color-artifact-kind-sheet-ink); --crewlet-kind-ground: var(--color-artifact-kind-sheet-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-sheet-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-sheet-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-sheet-glow); --crewlet-kind-edge: var(--color-artifact-kind-sheet-edge); --crewlet-kind-edge-strong: var(--color-artifact-kind-sheet-edge-strong); }

package/dist/ArtifactMakeRow/index.js

@@ -1,4 +1,4 @@
-export { ArtifactMakeRow } from '../chunk-MVMVMHYI.js';
+export { ArtifactMakeRow } from '../chunk-HDEKHP65.js';
 import '../chunk-RSKW25Y5.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-UT6CW3C7.js';

package/dist/ArtifactNameCell/index.js

@@ -1,4 +1,4 @@
-export { ArtifactNameCell } from '../chunk-C46DDVTK.js';
+export { ArtifactNameCell } from '../chunk-LTD7KLOU.js';
 import '../chunk-RSKW25Y5.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/BriefCard/index.js

@@ -1,5 +1,6 @@
-export { BRIEF_CARD_LABELS, BRIEF_CARD_MAX_FOLLOW_UPS, BRIEF_CARD_MAX_NEEDS, BRIEF_CARD_MAX_POINTS, BriefCard } from '../chunk-CF4M6N6A.js';
+export { BRIEF_CARD_LABELS, BRIEF_CARD_MAX_FOLLOW_UPS, BRIEF_CARD_MAX_NEEDS, BRIEF_CARD_MAX_POINTS, BriefCard } from '../chunk-XYSSFI5C.js';
 import '../chunk-Y7PVLEZJ.js';
+import '../chunk-6C7GQOBV.js';
 import '../chunk-FLW5U7YS.js';
 import '../chunk-LBGKLYBY.js';
 import '../chunk-U2IQNDDR.js';

package/dist/CatalogTile/CatalogTile.d.ts

@@ -1,5 +1,6 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { type HeadingLevel } from '../utils/headingLevel.js';
+import type { Tone } from '../utils/tone.js';
 export type CatalogTileElement = 'article' | 'li' | 'div';
 /**
  * How much room a tile takes. `comfortable` (the default) is the catalogue's
@@ -10,6 +11,23 @@ export type CatalogTileElement = 'article' | 'li' | 'div';
  * already in use rather than offers a choice.
  */
 export type CatalogTileDensity = 'comfortable' | 'compact';
+/**
+ * An entry's state, as data: the tile draws it, the same way on every tile.
+ *
+ * ONE PRESENTATION, NOT A SLOT. Taken as any node, a service's In use came as
+ * a soft pill and an app's Connected as a dot and a word, so one row of tiles
+ * drew its states two ways and at two heights. A tone and a word cannot be
+ * drawn two ways.
+ */
+export interface CatalogTileStatus {
+    /**
+     * What the state is: `success` for in use or connected, `warning` for
+     * something owed, `danger` for broken, `neutral` for coming soon.
+     */
+    tone: Tone;
+    /** The state in a word or two: In use, Connected, Needs attention. */
+    label: string;
+}
 export interface CatalogTileProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /** The element the tile is: an `li` in a `TileGrid as="ul"`. */
     as?: CatalogTileElement | undefined;
@@ -24,12 +42,12 @@ export interface CatalogTileProps extends Omit<HTMLAttributes<HTMLElement>, 'tit
     /** Overrides the level the name is rendered at. */
     headingLevel?: HeadingLevel | undefined;
     /**
-     * The entry's state, as a `Tag`, ONLY when the state is worth reading: On,
-     * Connected, Needs attention, Coming soon. An entry in its resting state
-     * (available, not set up) carries none, and its name stands centred beside
-     * its mark; a pill under every name is a column a reader learns to skip.
+     * The entry's state, drawn as its tone's dot and its word, ONLY when the
+     * state is worth reading: In use, Connected, Needs attention, Coming soon.
+     * An entry in its resting state (available, not set up) carries none; a
+     * state under every name is a column a reader learns to skip.
      */
-    status?: ReactNode;
+    status?: CatalogTileStatus | undefined;
     /** One sentence: what the entry is for, or what is owed when something is. */
     description?: ReactNode;
     /** A quiet fact at the foot (`2 agents · 14 deliveries`). */

package/dist/CatalogTile/index.d.ts

@@ -1,3 +1,3 @@
 import './CatalogTile.css';
 export { CatalogTile } from './CatalogTile.js';
-export type { CatalogTileDensity, CatalogTileElement, CatalogTileProps } from './CatalogTile.js';
+export type { CatalogTileDensity, CatalogTileElement, CatalogTileProps, CatalogTileStatus } from './CatalogTile.js';

package/dist/CatalogTile/index.js

@@ -1,3 +1,4 @@
-export { CatalogTile } from '../chunk-QE4OIE3Q.js';
+export { CatalogTile } from '../chunk-DJIWCW5Z.js';
+import '../chunk-CYQBDZ6M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';