@crewlethq/ui 0.82.0 → 0.83.0

package/dist/styles.css

@@ -944,7 +944,7 @@
 }
 
 
-/* AppShell-F7RID4P4.css */
+/* AppShell-U7D2MUUF.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -974,30 +974,40 @@
   --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. */
+     nothing where there is no rail or the rail is a drawer. */
   --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)
+  /*
+   * THE ASIDE'S TRACK, while it is a column: the inset it is held off the
+   * window's edge by at least, and the panel's width and that inset at most.
+   * THE CAP IS THE GRID'S. The page's sheet takes the host's floor as its
+   * own track's minimum (`--crewlet-app-shell-aside-reserve`, the page's sheet
+   * with its own inset and hairlines), and the grid hands the aside what is
+   * left once the rail and that floor have theirs, up to its width. The rail's
+   * track is the rail's live width, so while the rail eases between its
+   * shapes the cap eases with it: a cap computed from the rail's VARIABLE
+   * named the shape drawn, and jumped at both ends of a fold. With no reserve
+   * the panel takes the width it was given, as far as the window holds it.
+   */
+  --crewlet-app-shell-aside-track: minmax(
+    var(--size-shell-inset),
+    calc(var(--crewlet-app-shell-aside) + var(--size-shell-inset))
+  );
+  /* The page's floor beside an aside column, never more than the window
+     leaves it: on a window too narrow for the floor, the page gives way rather
+     than the shell growing past the window's edge. */
+  --crewlet-app-shell-sheet-floor: min(
+    var(--crewlet-app-shell-aside-reserve, 0px),
+    max(0px, 100% - var(--crewlet-app-shell-beside) - 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. */
   --crewlet-app-shell-drawer-z: var(--z-index-overlay);
   display: grid;
-  grid-template-columns: var(--crewlet-app-shell-rail) minmax(0, 1fr);
+  /* The rail's track is the rail's own width (`auto`), and the rail takes
+     `--crewlet-app-shell-rail` itself, so the track follows it while it eases
+     between its two shapes (see the rail's motion, below). */
+  grid-template-columns: auto minmax(0, 1fr);
   /* One row, the viewport's height less nothing: the sheet's own margin is
      what holds it off the frame's edges, and a row sized by its content would
      let a tall screen push the sheet's bottom edge off the window. */
@@ -1036,11 +1046,11 @@
    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);
+  grid-template-columns: auto minmax(var(--crewlet-app-shell-sheet-floor), 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);
+  grid-template-columns: minmax(var(--crewlet-app-shell-sheet-floor), 1fr) var(--crewlet-app-shell-aside-track);
 }
 
 /* The skip link, drawn only while it holds focus, over everything. */
@@ -1086,14 +1096,25 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  width: var(--crewlet-app-shell-rail);
   min-height: 0;
   min-width: 0;
+  /* THE MOVING EDGE CUTS WHAT IT PASSES. While the rail eases between its
+     shapes its content keeps the width of the shape drawn (below), and the
+     edge clips it rather than squeezing it. Across only: a ring or a badge
+     at a row's top or bottom is never cut. */
+  overflow-x: clip;
   background: var(--color-surface-frame);
+  transition: width var(--motion-duration-slow) var(--motion-easing-emphasized);
 }
 
+/* THE CONTENT IS LAID OUT AT ITS SHAPE'S WIDTH, never at a width between the
+   two, so no word in the rail rewraps while it moves and nothing drifts with
+   the edge: the column stands still and the edge travels over it. */
 .crewlet-app-shell__rail-inner {
   display: flex;
   flex-direction: column;
+  width: var(--crewlet-app-shell-rail);
   min-height: 0;
   height: 100%;
 }
@@ -1837,7 +1858,7 @@
 }
 
 /*
- * THE COMPACT RAIL: the same track, narrowed to the compact column. One
+ * THE COMPACT RAIL: the same rail, narrowed to the compact column. One
  * variable is the rail's width for the grid, the aside's cap and the drawer
  * alike, so folding the rail is this one declaration. The shell writes the
  * attribute only where the layout is wide: the drawer under the step is
@@ -1848,21 +1869,29 @@
 }
 
 /*
- * THE FOLD CONTROL stands over the compact column's centre, in the row under
- * the head, in both shapes, so it never moves under the pointer that pressed
- * it. 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.
+ * 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.
+ *
+ * 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.
  */
 .crewlet-app-shell__fold {
   position: absolute;
-  top: calc(var(--size-shell-inset) + var(--crewlet-app-shell-topbar));
-  left: calc((var(--size-shell-rail-compact) - var(--size-control-sm)) / 2);
+  top: 0;
+  left: 0;
   z-index: 1;
   display: inline-flex;
 }
 
 .crewlet-app-shell__fold > .crewlet-icon-btn {
+  width: var(--size-target-min);
+  height: var(--size-target-min);
   color: var(--color-text-tertiary);
 }
 
@@ -1870,6 +1899,10 @@
   color: var(--color-text-secondary);
 }
 
+.crewlet-app-shell__fold > .crewlet-icon-btn:focus-visible {
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
 /*
  * 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
@@ -1886,30 +1919,16 @@
 }
 
 /*
- * FULL, THE FIELD STARTS AFTER THE FOLD CONTROL, a step off it, on the row
- * the control stands in. The field holds its place at the top of the rail's
- * middle while the rows scroll under it, on the frame's own ground, so the
- * control beside it is always beside it.
+ * COMPACT, THE STATUS HAS A ROW OF ITS OWN under the mark, a small control
+ * step tall, its dot and its count centred in the column: the first thing
+ * under the head, before the places, where the fold control stood before it
+ * moved to the corner.
  */
-/* The middle is a stacking context of its own, so the field pinned in it
-   stands over the rows scrolling under it and the whole middle stands under
-   the fold control, which is painted a step above the rail. */
-.crewlet-app-shell--foldable .crewlet-app-shell__rail-body {
-  isolation: isolate;
-}
-
-.crewlet-app-shell--foldable[data-rail='full'] .crewlet-app-shell__rail-search {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  padding-left: calc((var(--size-shell-rail-compact) + var(--size-control-sm)) / 2 + var(--spacing-2));
-  background: var(--color-surface-frame);
-}
-
-/* COMPACT, THE FOLD CONTROL HAS A ROW OF ITS OWN under the mark, which the
-   head leaves room for, and the column of tiles starts under it. */
-.crewlet-app-shell--foldable[data-rail='compact'] .crewlet-app-shell__rail-head {
-  margin-bottom: var(--size-control-sm);
+.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-inner > .crewlet-app-shell__rail-status {
+  justify-content: center;
+  min-width: 0;
+  min-height: var(--size-control-sm);
+  margin: 0;
 }
 
 .crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-body {
@@ -1919,7 +1938,7 @@
 
 /*
  * The compact foot: what the full foot holds, centred in the column, a step
- * apart: the status's dot, a Settings tile, the reader's face.
+ * apart: a Settings tile, the reader's face.
  */
 .crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-foot {
   align-items: center;
@@ -1931,10 +1950,85 @@
   align-self: stretch;
 }
 
-.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-foot > .crewlet-app-shell__rail-status {
-  justify-content: center;
-  min-width: 0;
-  margin: 0;
+/*
+ * THE COMPACT FACE IS CENTRED ON THE TILES' LINE. It gives up the full row's
+ * badge column and the step after it (above): kept, the step stood the face
+ * 4px left of the column's centre, in a box 8px wider than the face, so the
+ * face sat off the line every tile above it is centred on.
+ */
+.crewlet-app-shell__rail-foot .crewlet-account-row--compact .crewlet-account-row__avatar {
+  width: auto;
+  margin-inline-end: 0;
+}
+
+/*
+ * THE RAIL'S MOTION (railMotion.ts). The rail's width eases between the two
+ * shapes on the slow step with the emphasized curve, the motion a
+ * `DockColumn` opens and closes by, so a column of the frame and a column of
+ * a screen move as one. What the rail holds keeps the width of the shape
+ * drawn, so the moving edge clips the words rather than squeezing them.
+ *
+ * FOLDING, the full rail stays drawn, inert, while the edge narrows to the
+ * compact column, and its words fade out on the base step; the compact column
+ * is drawn when the rail's motion has ended, and fades in on the fast step.
+ * UNFOLDING, the full rail is drawn at once and fades in while the edge
+ * uncovers it. The brand's mark and the fold control are in the same place in
+ * both shapes, so neither fades.
+ *
+ * THE WORDS LEAVE BY A TRANSITION and arrive by keyframes. A fold takes their
+ * opacity to nothing; a fold pressed again mid way (`reverse`) declares
+ * nothing of its own, so the same transition takes the opacity back from
+ * wherever it had reached. Faded out by keyframes instead, a reversal could
+ * only start an entrance from nothing, and the words blinked out and back.
+ * The transition is declared only while the rail moves, so nothing else that
+ * sets these parts' opacity is eased.
+ */
+.crewlet-app-shell[data-rail-motion='fold'] > .crewlet-app-shell__rail {
+  width: var(--size-shell-rail-compact);
+}
+
+/* Two names for one entrance, so an unfold pressed while the compact column
+   is still arriving starts the full rail's entrance afresh. */
+@keyframes crewlet-app-shell-rail-unfold {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes crewlet-app-shell-rail-settle {
+  from {
+    opacity: 0;
+  }
+}
+
+.crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-body,
+.crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-foot,
+.crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-status,
+.crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-head .crewlet-brand__name,
+.crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-head .crewlet-brand__context {
+  transition: opacity var(--motion-duration-base) var(--motion-easing-out);
+}
+
+.crewlet-app-shell[data-rail-motion='fold'] .crewlet-app-shell__rail-body,
+.crewlet-app-shell[data-rail-motion='fold'] .crewlet-app-shell__rail-foot,
+.crewlet-app-shell[data-rail-motion='fold'] .crewlet-app-shell__rail-status,
+.crewlet-app-shell[data-rail-motion='fold'] .crewlet-app-shell__rail-head .crewlet-brand__name,
+.crewlet-app-shell[data-rail-motion='fold'] .crewlet-app-shell__rail-head .crewlet-brand__context {
+  opacity: 0;
+}
+
+.crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-body,
+.crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-foot,
+.crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-status,
+.crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-head .crewlet-brand__name,
+.crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-head .crewlet-brand__context {
+  animation: crewlet-app-shell-rail-unfold var(--motion-duration-slow) var(--motion-easing-out);
+}
+
+.crewlet-app-shell[data-rail-motion='folded'] .crewlet-app-shell__rail-body,
+.crewlet-app-shell[data-rail-motion='folded'] .crewlet-app-shell__rail-foot,
+.crewlet-app-shell[data-rail-motion='folded'] .crewlet-app-shell__rail-status {
+  animation: crewlet-app-shell-rail-settle var(--motion-duration-fast) var(--motion-easing-out);
 }
 
 @media (width < 1024px) {
@@ -1947,7 +2041,7 @@
      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);
+    grid-template-columns: minmax(var(--crewlet-app-shell-sheet-floor), 1fr) var(--crewlet-app-shell-aside-track);
   }
 
   .crewlet-app-shell--no-rail {
@@ -2012,6 +2106,12 @@
     transition: transform var(--motion-duration-slow) var(--motion-easing-emphasized);
   }
 
+  /* The drawer never changes shape, and on a window narrower than the rail
+     it is the window's width: its content fills it rather than being cut. */
+  .crewlet-app-shell__rail-inner {
+    width: auto;
+  }
+
   .crewlet-app-shell__toggle {
     display: inline-flex;
   }
@@ -2046,6 +2146,27 @@
   .crewlet-app-shell__aside[data-shape='sheet'] {
     animation: none;
   }
+
+  /* Under reduced motion the shell draws the new shape at once
+     (`usePresence`), so no phase starts; these hold even if one did. */
+  .crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-body,
+  .crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-foot,
+  .crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-status,
+  .crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-head .crewlet-brand__name,
+  .crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-head .crewlet-brand__context {
+    transition: none;
+  }
+
+  .crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-body,
+  .crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-foot,
+  .crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-status,
+  .crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-head .crewlet-brand__name,
+  .crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-head .crewlet-brand__context,
+  .crewlet-app-shell[data-rail-motion='folded'] .crewlet-app-shell__rail-body,
+  .crewlet-app-shell[data-rail-motion='folded'] .crewlet-app-shell__rail-foot,
+  .crewlet-app-shell[data-rail-motion='folded'] .crewlet-app-shell__rail-status {
+    animation: none;
+  }
 }
 
 /* ── the account row ───────────────────────────────────────────────────── */
@@ -19563,6 +19684,70 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* DockColumn-SMJCXHS4.css */
+/*
+ * A column docked beside the content (DockColumn.tsx).
+ *
+ * THE COLUMN EASES ITS WIDTH between none and its panel's, on the slow step
+ * with the emphasized curve: the motion the application rail folds by,
+ * so a column of the frame and a column of a screen open and close as one
+ * movement. The host gives it an `auto` track, so its width is the track.
+ * Clipped rather than hidden, so it is never a scroll container a focus or a
+ * scrollIntoView could scroll.
+ *
+ * THE PANEL KEEPS ITS WIDTH and is held to the column's edge that faces the
+ * content: before the content (`start`) it is held to the column's end, so
+ * the moving edge uncovers it from the start edge, and after the content
+ * (`end`) the other way round.
+ *
+ * Tokens only. The width is the component's own variable, set from the
+ * `width` prop, so the column and the panel read one value.
+ */
+
+.crewlet-dock-column {
+  display: flex;
+  justify-content: flex-end;
+  width: 0;
+  min-width: 0;
+  min-height: 0;
+  overflow: clip;
+  transition: width var(--motion-duration-slow) var(--motion-easing-emphasized);
+}
+
+.crewlet-dock-column[data-side='end'] {
+  justify-content: flex-start;
+}
+
+.crewlet-dock-column[data-open] {
+  width: var(--crewlet-dock-column-width);
+}
+
+.crewlet-dock-column__panel {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: var(--crewlet-dock-column-width);
+  min-height: 0;
+  background: var(--crewlet-dock-column-ground, transparent);
+}
+
+/* The hairline on the panel's edge that faces the content. */
+.crewlet-dock-column--divider[data-side='start'] > .crewlet-dock-column__panel {
+  border-inline-end: 1px solid var(--color-border-default);
+}
+
+.crewlet-dock-column--divider[data-side='end'] > .crewlet-dock-column__panel {
+  border-inline-start: 1px solid var(--color-border-default);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-dock-column {
+    transition: none;
+  }
+}
+
+
 /* Document-M6JYGLWV.css */
 /*
  * Rendered markdown, set as a document (Document.tsx).

package/dist/utils/composedRef.d.ts

@@ -0,0 +1,39 @@
+/**
+ * One ref for an element several owners need: a component that clones its
+ * trigger (a tooltip, a popover) and the ref the trigger already carried.
+ *
+ * STABLE WHILE THE REFS IT JOINS ARE. A ref callback written inline is a new
+ * function on every render, and React treats a new ref as a change: it
+ * releases the old one in the commit's mutation phase and attaches the new
+ * one in its layout phase, in tree order. So every render of the component
+ * that cloned the trigger set the trigger's own ref to null and back, and a
+ * layout effect EARLIER in the tree (a dock handing focus to that very
+ * control as it closes) read null while the element stood in the document.
+ * Memoised on the refs it joins, the joined ref changes only when one of
+ * them does, which is exactly when React would have moved a ref of its own.
+ */
+import { type Ref, type RefCallback } from 'react';
+/**
+ * Hands `element` to one ref, and returns how to take it back, the way React
+ * would have released that ref itself: a callback that returns its own
+ * teardown gets the teardown called, any other callback is called with null,
+ * and an object's `current` is emptied.
+ */
+export declare function attachRef<T>(ref: Ref<T> | undefined, element: T | null): () => void;
+/**
+ * One ref callback that hands the element to every ref given and releases
+ * each as React would, for code outside a component.
+ */
+export declare function composeRefs<T>(...refs: readonly (Ref<T> | undefined)[]): RefCallback<T>;
+/**
+ * `composeRefs` for a component: any number of refs joined into one callback
+ * that is THE SAME CALLBACK for as long as the refs given are the same, in the
+ * same order, and a new one the render any of them changes.
+ *
+ * Held in a ref and compared ref by ref rather than memoised on a dependency
+ * list, which must be written out, and a list of refs of any length cannot
+ * be. Not state: a ref written inline beside the hook is new on every render,
+ * and replacing state for it would render again for ever. Here it simply
+ * makes a new callback, which is what React does with an inline ref.
+ */
+export declare function useComposedRef<T>(...refs: readonly (Ref<T> | undefined)[]): RefCallback<T>;

package/dist/utils/index.d.ts

@@ -1,4 +1,6 @@
 export { cx } from './cx.js';
+export { attachRef, composeRefs, useComposedRef } from './composedRef.js';
+export { tokenMs } from './tokenMs.js';
 export { useClipboard, writeClipboard } from './useClipboard.js';
 export type { Clipboard, ClipboardOptions, ClipboardState } from './useClipboard.js';
 export { useOutcome } from './useOutcome.js';

package/dist/utils/index.js

@@ -1,8 +1,10 @@
-export { ElementToPngError, elementToPng, parseCsv, serializeElement, toCsv } from '../chunk-FEJANUZK.js';
+export { ElementToPngError, elementToPng, parseCsv, serializeElement, toCsv } from '../chunk-KBSD476L.js';
 export { downloadBlob, downloadText, safeFilename, useDownload } from '../chunk-YNRKVY7X.js';
 export { useClipboard, writeClipboard } from '../chunk-STJ7QBC3.js';
 export { useOutcome } from '../chunk-DTIW4CHZ.js';
 export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from '../chunk-AYKXMIOR.js';
+export { tokenMs } from '../chunk-HTS5RJ7S.js';
+export { attachRef, composeRefs, useComposedRef } from '../chunk-L72URIHR.js';
 export { FOCUS_MODALITY_ATTRIBUTE, FOCUS_RETURNED_ATTRIBUTE, isVisibleFocus, returnFocus, trackFocusModality, useFocusModality } from '../chunk-4ITETIGZ.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from '../chunk-PQADV6P6.js';
 export { cx } from '../chunk-ODEQTPFM.js';

package/dist/utils/tokenMs.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A motion token as a number of milliseconds, for a delay or a bound that
+ * JavaScript has to count (`tokenMs(motion.duration.fast)`). The tokens are
+ * written in ms (`120ms`), so the number is the token's own, never a copy.
+ */
+export declare function tokenMs(value: string): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.82.0",
+  "version": "0.83.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.82.0",
-    "@crewlethq/tokens": "0.82.0",
+    "@crewlethq/icons": "0.83.0",
+    "@crewlethq/tokens": "0.83.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",
@@ -57,8 +57,8 @@
     "uqr": "0.1.3"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": ">=19",
+    "react-dom": ">=19"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",

package/dist/{chunk-IYI6HWKN.js → chunk-CV2LU2T2.js}

@@ -1,6 +1,6 @@
 import { StepList } from './chunk-RJWO2PC5.js';
-import { Meter } from './chunk-RQFRRPV6.js';
 import { ReceiptStrip } from './chunk-ZWCK4N4L.js';
+import { Meter } from './chunk-RQFRRPV6.js';
 import { StatusCard } from './chunk-FLW5U7YS.js';
 import { Disclosure } from './chunk-LVJGN5II.js';
 import { Spinner } from './chunk-XSPCITPN.js';

package/dist/{chunk-FVZPSTL2.js → chunk-G4EHZHKM.js}

@@ -1,5 +1,5 @@
-import { IconTile } from './chunk-3LI4TRUR.js';
 import { safeHref } from './chunk-KBZO4B33.js';
+import { IconTile } from './chunk-3LI4TRUR.js';
 import { ReceiptStrip } from './chunk-ZWCK4N4L.js';
 import { StatusCard } from './chunk-FLW5U7YS.js';
 import { ButtonLink, Button } from './chunk-DGXZ635L.js';

package/dist/{chunk-2H6YDUR5.js → chunk-QM3432PH.js}

@@ -4,8 +4,8 @@ import { RelativeTime } from './chunk-EJNJMHQG.js';
 import { Card } from './chunk-U2IQNDDR.js';
 import { AvatarStack } from './chunk-IRONPJB4.js';
 import { ArtifactKindGround } from './chunk-ZB3E2Z4Y.js';
-import { ArtifactAccessGlyph } from './chunk-DOY3KC6I.js';
 import { Checkbox } from './chunk-YQ7Q52XU.js';
+import { ArtifactAccessGlyph } from './chunk-DOY3KC6I.js';
 import { ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';