@crewlethq/ui 0.54.1 → 0.56.0

package/dist/{AppShell-5LPXYUV3.css → AppShell-ZVCJRGXH.css}

@@ -26,6 +26,25 @@
 .crewlet-app-shell {
   --crewlet-app-shell-rail: var(--size-shell-rail);
   --crewlet-app-shell-topbar: var(--size-shell-topbar);
+  /* 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. The aside's cap
+     below subtracts it, so it is one name for both. */
+  --crewlet-app-shell-beside: var(--crewlet-app-shell-rail);
+  /* THE ASIDE'S TRACK, while it is a column: the panel's width and the inset
+     it is held off the window's edge by, capped so the sheet keeps the
+     host's floor (`--crewlet-app-shell-aside-reserve`, the page's sheet with
+     its own inset and hairlines). The host publishes both widths on this
+     element; with no reserve the panel takes the width it was given. */
+  --crewlet-app-shell-aside-track: calc(
+    min(
+      var(--crewlet-app-shell-aside),
+      max(
+        0px,
+        100% - var(--crewlet-app-shell-beside) - var(--crewlet-app-shell-aside-reserve, 0px) - var(--size-shell-inset)
+      )
+    ) +
+      var(--size-shell-inset)
+  );
   /* Where the drawer's veil sits while it is open. The shell replaces it with
      the surface's own place in the layer band; this default only has to clear
      the page chrome for the moment before that lands. */
@@ -56,10 +75,22 @@
  * beaten the narrow block's one.
  */
 .crewlet-app-shell--no-rail {
+  --crewlet-app-shell-beside: 0px;
   grid-template-columns: minmax(0, 1fr);
   padding-left: var(--size-shell-inset);
 }
 
+/* THE ASIDE AS A COLUMN: a third track, mirroring the rail. The page's sheet
+   keeps its column and is only narrower, so nothing under the bar moves but
+   its end edge. */
+.crewlet-app-shell[data-aside='column'] {
+  grid-template-columns: var(--crewlet-app-shell-rail) minmax(0, 1fr) var(--crewlet-app-shell-aside-track);
+}
+
+.crewlet-app-shell--no-rail[data-aside='column'] {
+  grid-template-columns: minmax(0, 1fr) var(--crewlet-app-shell-aside-track);
+}
+
 /* The skip link, drawn only while it holds focus, over everything. */
 .crewlet-app-shell__skip {
   position: fixed;
@@ -590,8 +621,22 @@
  * and a short one does not shift every element sideways by the scrollbar's
  * width, which reads as the page jumping on each move.
  */
-.crewlet-app-shell__main {
+/*
+ * THE BODY: the row under the bar that the scroller and a peek column share.
+ * It takes the sheet's remaining height, and the scroller takes the row's
+ * remaining width, so a sheet with no peek draws exactly as it did before the
+ * row existed.
+ */
+.crewlet-app-shell__body {
+  display: flex;
   flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.crewlet-app-shell__main {
+  flex: 1 1 0%;
+  min-width: 0;
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
@@ -690,11 +735,131 @@
   background: var(--color-surface-scrim);
 }
 
+/*
+ * THE ASIDE: a second sheet on the frame, to the right of the page's, the
+ * same ground, hairline and corner, held off the window's top, right and
+ * bottom by the inset. The seam between the two sheets is the page sheet's
+ * own end inset, and the grip stands in it (`ResizeHandle`, outside the
+ * sheet that clips). The sheet clips what it holds to its corner, so the
+ * panel inside runs square to its edges.
+ */
+.crewlet-app-shell__aside {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  grid-column: -2 / -1;
+  grid-row: 1;
+  min-width: 0;
+  min-height: 0;
+  margin: var(--size-shell-inset) var(--size-shell-inset) var(--size-shell-inset) 0;
+}
+
+/* The grip stands in the seam and over the sheet's hairline, which is the
+   edge it moves. */
+.crewlet-app-shell__aside > .crewlet-resize-handle--left {
+  left: calc((var(--crewlet-resize-handle-width) + 1px) * -1);
+  width: calc(var(--crewlet-resize-handle-width) + 1px);
+}
+
+.crewlet-app-shell__aside-sheet {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sheet);
+  background: var(--color-surface-background);
+  overflow: hidden;
+}
+
+/* A dialog takes focus on itself only as the stack's last resort, so its
+   own ring would draw round the whole panel; its content draws the focus.
+   Transparent rather than none, so forced colours still draw one. */
+.crewlet-app-shell__aside:focus {
+  outline: 2px solid transparent;
+}
+
+/*
+ * THE OVERLAY: over the page's end edge, lifted off it, behind a veil. It
+ * keeps the column's corner and inset, so the panel is the same sheet in
+ * both shapes and only its ground changes, and it never takes the whole
+ * window: a strip of the page stays in view to say what it is over.
+ */
+.crewlet-app-shell__aside[data-shape='overlay'] {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--z-index-overlay);
+  width: min(var(--crewlet-app-shell-aside), calc(100vw - var(--spacing-10) - var(--size-shell-inset) * 2));
+}
+
+.crewlet-app-shell__aside[data-shape='overlay'] > .crewlet-app-shell__aside-sheet {
+  box-shadow: var(--shadow-xl);
+}
+
+/* THE SHEET: the whole window on a phone, its inset, corner and hairline
+   collapsed to nothing, as the page's sheet is under the shell step. */
+.crewlet-app-shell__aside[data-shape='sheet'] {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-index-overlay);
+  margin: 0;
+}
+
+.crewlet-app-shell__aside[data-shape='sheet'] > .crewlet-app-shell__aside-sheet {
+  border-width: 0;
+  border-radius: 0;
+}
+
+/* What a modal aside sits on: the dialog's ground, the application faded
+   back into its own frame, rather than the rail drawer's darker scrim. */
+.crewlet-app-shell__aside-veil {
+  background: var(--color-surface-veil);
+}
+
+/*
+ * AN ENTRANCE, never an exit: the panel arrives from the edge it stands on,
+ * and leaves at once when it is closed, so a close is never a wait. The page
+ * beside a column reflows at once, because a grid track that appears has no
+ * width to start from.
+ */
+@keyframes crewlet-app-shell-aside-in {
+  from {
+    opacity: 0;
+    transform: translateX(var(--spacing-4));
+  }
+}
+
+@keyframes crewlet-app-shell-aside-slide {
+  from {
+    transform: translateX(calc(100% + var(--size-shell-inset)));
+  }
+}
+
+.crewlet-app-shell__aside[data-shape='column'] > .crewlet-app-shell__aside-sheet {
+  animation: crewlet-app-shell-aside-in var(--motion-duration-slow) var(--motion-easing-emphasized);
+}
+
+.crewlet-app-shell__aside[data-shape='overlay'],
+.crewlet-app-shell__aside[data-shape='sheet'] {
+  animation: crewlet-app-shell-aside-slide var(--motion-duration-slow) var(--motion-easing-emphasized);
+}
+
 @media (width < 1024px) {
   .crewlet-app-shell {
+    --crewlet-app-shell-beside: 0px;
     grid-template-columns: minmax(0, 1fr);
   }
 
+  /* The host decides the aside's shape, so a column it asks for under the
+     step is still a column; the rail is a drawer here and takes no track. */
+  .crewlet-app-shell[data-aside='column'],
+  .crewlet-app-shell--no-rail[data-aside='column'] {
+    grid-template-columns: minmax(0, 1fr) var(--crewlet-app-shell-aside-track);
+  }
+
   .crewlet-app-shell--no-rail {
     padding-left: 0;
   }
@@ -785,6 +950,12 @@
   .crewlet-app-shell__rail-status-mark--action {
     transition: none;
   }
+
+  .crewlet-app-shell__aside[data-shape='column'] > .crewlet-app-shell__aside-sheet,
+  .crewlet-app-shell__aside[data-shape='overlay'],
+  .crewlet-app-shell__aside[data-shape='sheet'] {
+    animation: none;
+  }
 }
 
 /* ── the account row ───────────────────────────────────────────────────── */

package/dist/ArrangeFrame/index.js

@@ -1,5 +1,5 @@
-export { ArrangeFrame, useGridResize } from '../chunk-VWYT3GVV.js';
+export { ArrangeFrame, useGridResize } from '../chunk-FLTMDSC3.js';
 import '../chunk-RSAQOKH3.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArrangeList/index.js

@@ -1,13 +1,13 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-SSHDQBHR.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-6KLK7E76.js';
 import '../chunk-A722MUNR.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-RQI43UJ7.js';
-import '../chunk-LJHH4WWB.js';
+import '../chunk-NHJQXDHA.js';
+import '../chunk-FXQLNETQ.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactBar/ArtifactBar.d.ts

@@ -111,6 +111,16 @@ export interface ArtifactBarProps {
     tools?: readonly ArtifactBarTool[] | undefined;
     /** The More menu's own rows. The tools that fold on a narrow bar are added above them. */
     menu?: readonly MenuEntry[] | undefined;
+    /**
+     * After everything, More included: a control the host ends every page head
+     * with, such as an assistant's Ask button, so an open artifact's own bar
+     * keeps it where every other page's bar does. It is the host's own element
+     * and is never folded into More, so it stays in reach at every width; a
+     * control that should draw smaller on a phone does so itself. It stands a
+     * step further from the bar's own tools than they stand from each other,
+     * never wraps, and the title gives way to it.
+     */
+    end?: ReactNode;
     /** `header` stands as the page's banner; `div` sits inside a host's own. */
     as?: 'header' | 'div' | undefined;
     /** The title's heading level: 1 where the bar is the page's own head. */
@@ -128,7 +138,8 @@ export interface ArtifactBarProps {
  * artifact is (its glyph and its title, renamed in place by whoever may), the
  * version on show, then the kind's own views in the middle, and at the end
  * who else is here, the kind's tools, the panels every artifact has, Share
- * and More. Everything past the title opens on demand: a panel, a menu or a
+ * and More, and last the host's own control (`end`), as `start` is first.
+ * Everything past the title opens on demand: a panel, a menu or a
  * dialog, never a second row of chrome.
  *
  * IT FOLDS BY ITS OWN WIDTH, a container query rather than the window's, since
@@ -140,7 +151,7 @@ export interface ArtifactBarProps {
  * the stylesheet shows one, so no control is ever in two places a reader can
  * see at once and nothing is measured in script.
  */
-export declare function ArtifactBar({ title, kind, icon, kindLabel, back, start, onRename, renaming, onRenamingChange, version, modes, presence, status, kindTools, tools, menu, as, headingLevel, pending, labels, className, }: ArtifactBarProps): import("react").JSX.Element;
+export declare function ArtifactBar({ title, kind, icon, kindLabel, back, start, onRename, renaming, onRenamingChange, version, modes, presence, status, kindTools, tools, menu, end, as, headingLevel, pending, labels, className, }: ArtifactBarProps): import("react").JSX.Element;
 export interface ArtifactVersionChipProps {
     /** The version on show. */
     version: number;

package/dist/ArtifactBar/index.js

@@ -1,20 +1,21 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-VN47PYUF.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-TDQZ4LB5.js';
 import '../chunk-OOC7Q67K.js';
 import '../chunk-I33UIUZD.js';
-import '../chunk-6FVGSWLS.js';
-import '../chunk-ILFEWRLG.js';
+import '../chunk-AWSFK2IK.js';
+import '../chunk-I7VG6RQE.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-AVL52EME.js';
 import '../chunk-RSKW25Y5.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-TMM32U7D.js';
+import '../chunk-TKS7FTTO.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ArtifactBar-UMZCTARR.css → ArtifactBar-LEBMR35Y.css}

@@ -10,7 +10,7 @@
  * width the presence stack goes (the People control still counts who is
  * here), then the labelled tools' words, and under a phone's two panes the
  * views, the unlabelled tools and the kind's glyph fold away, the first two
- * into More.
+ * into More. The host's own control at the end (`end`) never folds.
  */
 
 .crewlet-artifact-bar {
@@ -271,6 +271,19 @@
   display: none;
 }
 
+/* THE HOST'S OWN CONTROL ENDS THE ROW (`end`), such as the Ask button every
+   page bar ends with: a step further from the bar's own tools than they
+   stand from each other, so it reads as the frame's rather than the
+   artifact's. It never folds and never wraps; the title gives way to it. */
+.crewlet-artifact-bar__trail {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin-inline-start: var(--spacing-1);
+  white-space: nowrap;
+}
+
 /* A rule between two groups of tools: the kind's, then every artifact's. */
 .crewlet-artifact-bar__rule {
   width: 1px;
@@ -357,6 +370,11 @@
     flex: none;
   }
 
+  /* The phone's row is tight, and so is the host's control beside More. */
+  .crewlet-artifact-bar__end > .crewlet-artifact-bar__trail {
+    margin-inline-start: 0;
+  }
+
   .crewlet-artifact-bar__end > .crewlet-artifact-bar__status {
     display: block;
     flex: 0 1 auto;

package/dist/ArtifactCard/index.js

@@ -1,23 +1,23 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-CUL5XV6O.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-IDQBSMMZ.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
-import '../chunk-3CZ7XAVY.js';
+import '../chunk-KS7YIJ4S.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-RV6XB5UV.js';
 import '../chunk-INHXF2CL.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-RQI43UJ7.js';
+import '../chunk-NHJQXDHA.js';
 import '../chunk-BGLKLXL3.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';
-import '../chunk-LJHH4WWB.js';
+import '../chunk-FXQLNETQ.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactNameCell/ArtifactNameCell.d.ts

@@ -1,6 +1,12 @@
 import { type ArtifactKind } from '../ArtifactKindGlyph/index.js';
 export interface ArtifactNameCellLabels {
-    kinds: Record<ArtifactKind, string>;
+    /**
+     * The word under an artifact's name, per kind. PARTIAL, and merged over the
+     * kit's own words, so a consumer that words only the kinds it knows (an
+     * application built before a kind was added) still compiles, and a kind it
+     * does not word reads in the kit's own word rather than nothing.
+     */
+    kinds: Partial<Record<ArtifactKind, string>>;
     pinned: string;
     /** The word under a folder's name, where an artifact's says its kind. */
     folder: string;

package/dist/ArtifactNameCell/index.js

@@ -1,4 +1,4 @@
-export { ArtifactNameCell } from '../chunk-J24Q4HTD.js';
+export { ArtifactNameCell } from '../chunk-5NT6OIPP.js';
 import '../chunk-RSKW25Y5.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactPanel/ArtifactPanel.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode, type Ref } from 'react';
+import type { ReactNode, Ref } from 'react';
 /**
  * How wide a panel rests beside the artifact: text (facts, a list, a form) or
  * a table. ONE WIDTH FOR TEXT, so moving from one text panel to another never
@@ -47,21 +47,12 @@ export interface ArtifactPanelProps {
  * A panel at the artifact's side: its details, its history, its data, who is
  * here, its settings. One at a time, opened from the bar's controls.
  *
- * A COMPLEMENTARY REGION, NOT A DIALOG. The artifact beside it stays live and
- * reachable, so the panel is an `aside` named by its heading and never traps
- * focus; the reader moves between the two with Tab as between any two parts
- * of a page.
- *
- * FOCUS IS STILL MANAGED, because a panel opened from a control that is then
- * pressed again, or closed from inside, would otherwise leave focus on nothing.
- * Opening moves focus to the heading, so a screen reader announces what
- * opened; closing with focus inside hands it back to whatever held it before
- * (the bar's control, as a rule), and leaves it alone otherwise.
- *
- * ESCAPE CLOSES IT from anywhere inside, a field included, unless something
- * inside answered the press first: a menu or a dialog opened from the panel is
- * portalled out of it, and the press that closes one of them never reaches
- * this.
+ * A PRESET OF `SidePanel`, which carries the region, the focus contract and
+ * Escape (see there). What is the artifact's own: two resting widths, the
+ * expanded view, the control that toggles it, the head on the row step, and
+ * a heading that rings when the keyboard reaches it. It keeps the class names
+ * it has always published (`crewlet-artifact-panel__body` and the rest), so a
+ * stylesheet written against them keeps matching.
  */
 export declare function ArtifactPanel({ title, icon, onClose, size, expanded, onExpandedChange, actions, footer, focusOnOpen, labels, className, children, }: ArtifactPanelProps): import("react").JSX.Element;
 export interface ArtifactWorkspaceProps {
@@ -88,5 +79,8 @@ export interface ArtifactWorkspaceProps {
  * artifact's end edge; on a phone it covers the artifact whole. An expanded
  * panel takes the workspace at every width, with the artifact kept mounted
  * behind it so a page's state survives the look at its data.
+ *
+ * A PRESET OF `SidePanelFrame` with no `shape`, which is the frame measuring
+ * itself, under the names it has always published.
  */
-export declare function ArtifactWorkspace({ panel, expanded, bodyRef, bodyClassName, bodyLabel, className, children, }: ArtifactWorkspaceProps): import("react").JSX.Element;
+export declare function ArtifactWorkspace(props: ArtifactWorkspaceProps): import("react").JSX.Element;

package/dist/ArtifactPanel/index.d.ts

@@ -1,3 +1,6 @@
+import '../HitArea/HitArea.css';
+import '../AppShell/ResizeHandle.css';
+import '../SidePanel/SidePanel.css';
 import './ArtifactPanel.css';
 export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from './ArtifactPanel.js';
 export type { ArtifactPanelLabels, ArtifactPanelProps, ArtifactPanelSize, ArtifactWorkspaceProps, } from './ArtifactPanel.js';

package/dist/ArtifactPanel/index.js

@@ -1,5 +1,11 @@
-export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from '../chunk-NBDN5JZV.js';
+export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from '../chunk-HGYHWWA5.js';
+import '../chunk-XODESBSR.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-PIYJNCN7.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-2YTOOH3A.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-2BQYODY3.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactPanel-TN4FFK2F.css

@@ -0,0 +1,43 @@
+/*
+ * The artifact's presets of the side panel and its frame (`ArtifactPanel`,
+ * `ArtifactWorkspace`). SidePanel.css draws them; what is here is only what
+ * the artifact sets differently, and the names it has always published.
+ *
+ * Every rule names BOTH classes, so it outranks the side panel's own rule of
+ * one class whichever of the two stylesheets a bundle puts first.
+ */
+
+/* The workspace answers to its own container name as well as the frame's,
+   so a page's `@container crewlet-artifact-workspace` query keeps matching. */
+.crewlet-side-panel-frame.crewlet-artifact-workspace {
+  container-name: crewlet-side-panel-frame crewlet-artifact-workspace;
+}
+
+.crewlet-side-panel.crewlet-artifact-panel {
+  /* THE TEXT WIDTH, every panel of facts, a list or a form: three widths for
+     those moved the artifact's edge 80px between Details and History. */
+  --crewlet-artifact-panel-width: 22.5rem;
+  --crewlet-side-panel-width: var(--crewlet-artifact-panel-width);
+  /* The head on the row step, under the artifact's own bar. */
+  --crewlet-side-panel-head-height: var(--size-row-lg);
+}
+
+.crewlet-side-panel.crewlet-artifact-panel--lg {
+  --crewlet-artifact-panel-width: 36rem;
+}
+
+/* The heading rings when the keyboard reaches it, as it always has here. */
+.crewlet-side-panel__title.crewlet-artifact-panel__title:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+  border-radius: var(--radius-sm);
+}
+
+/* THE BODY'S INSET IS PUBLISHED under its own name too
+   (--crewlet-artifact-panel-inset), which a sticky foot offsets itself by,
+   and the body answers to its own container name. */
+.crewlet-side-panel__body.crewlet-artifact-panel__body {
+  container-name: crewlet-side-panel crewlet-artifact-panel;
+  --crewlet-artifact-panel-inset: var(--spacing-4);
+  --crewlet-side-panel-inset: var(--crewlet-artifact-panel-inset);
+}

package/dist/AvatarPicker/index.js

@@ -1,20 +1,21 @@
-export { AvatarPicker } from '../chunk-3QSKDZR5.js';
-import '../chunk-34RMTXDZ.js';
+export { AvatarPicker } from '../chunk-4OINEWR4.js';
+import '../chunk-OYAXKHVW.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-SNQRGH4A.js';
-import '../chunk-6FVGSWLS.js';
-import '../chunk-ILFEWRLG.js';
+import '../chunk-AWSFK2IK.js';
+import '../chunk-I7VG6RQE.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-TMM32U7D.js';
+import '../chunk-TKS7FTTO.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Breadcrumb/index.js

@@ -1,3 +1,3 @@
-export { Breadcrumb } from '../chunk-VWNC2L6W.js';
+export { Breadcrumb } from '../chunk-KW6KCVM7.js';
 import '../chunk-FYTIJM2T.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Button/index.js

@@ -1,3 +1,4 @@
-export { Button, ButtonLink } from '../chunk-OG6CL3EB.js';
+export { Button, ButtonLink } from '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Button-UWKBTKYD.css → Button-VXJ7M5XF.css}

@@ -307,45 +307,22 @@
 }
 
 /*
- * Pending. The spinner takes the leading icon's place, so a button that has
- * one neither moves nor changes width mid-action, and the label stays exactly
- * as it was: a button whose text becomes "Saving" has stopped saying what it
- * does.
+ * Pending. The spinner (the package's one ring, `Spinner`) takes the leading
+ * icon's place, so a button that has one neither moves nor changes width
+ * mid-action, and the label stays exactly as it was: a button whose text
+ * becomes "Saving" has stopped saying what it does. The ring's drawing, its
+ * turn and its reduced-motion stop are Spinner.css's.
+ *
+ * A disabled button already reads as unavailable; a loading one should still
+ * read as this button, mid-action.
  */
-.crewlet-btn__spinner {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: var(--radius-circle);
-  opacity: 0.7;
-  animation: crewlet-btn-spin var(--motion-duration-slow) linear infinite;
-  flex: none;
-}
-
-@keyframes crewlet-btn-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* A disabled button already reads as unavailable; a loading one should still
-   read as this button, mid-action. */
 .crewlet-btn--loading {
   cursor: progress;
 }
 
-/*
- * A spinner that cannot spin should not pretend to, and a colour change that
- * cannot fade is still a colour change. The ring reads as pending either way.
- */
+/* A colour change that cannot fade is still a colour change. */
 @media (prefers-reduced-motion: reduce) {
   .crewlet-btn {
     transition: none;
   }
-
-  .crewlet-btn__spinner {
-    animation: none;
-  }
 }

package/dist/Canvas/index.js

@@ -1,11 +1,12 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-D7Q5MQRF.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-YEURM24I.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CanvasBoard/index.js

@@ -1,15 +1,16 @@
-export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-VP2ODUCC.js';
+export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-Q6R6EUQ4.js';
 import '../chunk-5SZGKSGL.js';
-import '../chunk-X4NIE7CI.js';
+import '../chunk-LQ6AGUDL.js';
 import '../chunk-NR4CPM4T.js';
-import '../chunk-D7Q5MQRF.js';
+import '../chunk-YEURM24I.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';