@crewlethq/ui 0.82.0 → 0.84.0

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/developing.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Whether the host is a development build, for a warning a component gives
+ * only there. A bundler replaces `process.env.NODE_ENV` with a literal, so the
+ * check costs nothing in a production build and is true in development. It is
+ * NOT guarded with `typeof process`: that expression is not replaced, and in
+ * a browser it is 'undefined' even in development, which would silence the
+ * warning everywhere. An ESM host with no bundler has no `process` at all, and
+ * the ReferenceError reads as not developing.
+ */
+export declare function developing(): boolean;

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.84.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.84.0",
+    "@crewlethq/tokens": "0.84.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/ActionCard-47WSZ2O5.css

@@ -1,110 +0,0 @@
-/*
- * ActionCard: a first step offered as a picture, on an artifact kind's
- * colour ground. The ground is the kind's own Ground steps (ArtifactKinds.css)
- * laid over the card rung, which the palette suite holds to 4.5:1 for the
- * primary text in every palette and both modes, with the kind's glow 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);
-  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 hue itself is the edge: 3:1 or more on the sheet in every
-     palette and mode, where the kind's Line step measured 2.5:1. */
-  border: 1px solid var(--crewlet-kind-hue);
-  border-radius: var(--radius-lg);
-  background-color: var(--color-surface-subtle);
-  background-image:
-    radial-gradient(110% 64% 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%);
-  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);
-}
-
-/* A QUIET HOVER: the ground deepens a step and a small shadow lifts the
-   card off the page. Nothing moves. */
-.crewlet-action-card:hover {
-  --crewlet-action-card-ground: var(--crewlet-kind-ground-strong);
-  box-shadow: var(--shadow-sm);
-}
-
-/* The card draws its own edge, so the ring is drawn over it. */
-.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. */
-.crewlet-action-card__art {
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  height: 100px;
-  margin: 0 calc(var(--spacing-3) * -1);
-}
-
-.crewlet-action-card__art .crewlet-kind-illustration {
-  width: 112px;
-  max-height: 96px;
-  margin-bottom: calc(var(--spacing-2) * -1);
-  filter: drop-shadow(0 6px 12px var(--crewlet-kind-line));
-}
-
-/* FORCED COLORS drops the ground; the hue's border stays as the card's edge. */
-@media (forced-colors: active) {
-  .crewlet-action-card {
-    border-color: CanvasText;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .crewlet-action-card {
-    transition: none;
-  }
-}

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';