@crewlethq/ui 0.81.2 → 0.83.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/focusModality.d.ts

@@ -55,3 +55,17 @@ export declare const FOCUS_RETURNED_ATTRIBUTE = "data-crewlet-focus-returned";
  * it the keyboard's, and the ring shows.
  */
 export declare function returnFocus(el: HTMLElement | null | undefined, options?: FocusOptions): boolean;
+/**
+ * Whether `el` holds the focus a ring is drawn for: KEYBOARD focus, the focus
+ * `:focus-visible` matches, less a focus handed back by `returnFocus` while
+ * the reader is using a pointer, which the base stylesheet draws no ring on
+ * either. A surface that keeps something open while its trigger is focused (a
+ * tooltip) asks this rather than "is it focused": a mouse press focuses a
+ * button too, and so does a layer handing focus back as it closes, and
+ * neither is a reader asking to read the hint.
+ *
+ * A browser that cannot answer for `:focus-visible` counts every focus as
+ * visible, the accessible failure mode: a missed answer costs some calm,
+ * never a keyboard reader's hint.
+ */
+export declare function isVisibleFocus(el: Element): boolean;

package/dist/utils/heldHint.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A control's hint while it is held (`disabledReason`): what it does, then
+ * why it cannot be used now, so the tip a pointer or a keyboard opens says
+ * both. "React with eyes. Join the room to react."
+ */
+export declare function heldHint(hint: string, reason: string | undefined): string;

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';
@@ -14,5 +16,5 @@ export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from './nodeHue.js';
 export type { NodeHue } from './nodeHue.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from './headingLevel.js';
 export type { HeadingLevel, HeadingLevelProviderProps } from './headingLevel.js';
-export { FOCUS_MODALITY_ATTRIBUTE, FOCUS_RETURNED_ATTRIBUTE, returnFocus, trackFocusModality, useFocusModality, } from './focusModality.js';
+export { FOCUS_MODALITY_ATTRIBUTE, FOCUS_RETURNED_ATTRIBUTE, isVisibleFocus, returnFocus, trackFocusModality, useFocusModality, } from './focusModality.js';
 export type { FocusModality } from './focusModality.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 { FOCUS_MODALITY_ATTRIBUTE, FOCUS_RETURNED_ATTRIBUTE, returnFocus, trackFocusModality, useFocusModality } from '../chunk-NUZHC6MM.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.81.2",
+  "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.81.2",
-    "@crewlethq/tokens": "0.81.2",
+    "@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/ArtifactKinds-O3CALPVX.css

@@ -1,16 +0,0 @@
-/*
- * A kind's colours, set once per kind on `--crewlet-kind-*` by its class
- * (`crewlet-kind--<kind>`): the hue, its Fill and Line steps and the ink a
- * glyph is drawn in. Every surface that tints by kind reads these, so a kind
- * glyph in a bar, a card's badge and a Make row's tile repaint together with
- * the theme, and no surface spells a kind's colour of its own. A sheet of
- * 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--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--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--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--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--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--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); }

package/dist/{chunk-PLNJEDGI.js → chunk-I4IO56EY.js}

@@ -1,5 +1,5 @@
-import { announce } from './chunk-2G355KDJ.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
+import { announce } from './chunk-2G355KDJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArrangeFrame-QCQZ5RF6.css';
 import { forwardRef, useRef, useCallback, useState, useEffect } from 'react';

package/dist/{chunk-624X3RVA.js → chunk-O55JQ7BE.js}

@@ -1,5 +1,5 @@
-import { StatusDot } from './chunk-CYQBDZ6M.js';
 import { toISO, useNow, formatRelative } from './chunk-EJNJMHQG.js';
+import { StatusDot } from './chunk-CYQBDZ6M.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './EditingStatus-TMGT265J.css';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';