@crewlethq/ui 0.35.1 → 0.36.0

package/dist/utils/focusModality.d.ts

@@ -0,0 +1,41 @@
+/**
+ * HOW THE READER LAST MOVED: by keyboard or by pointer, written on the root
+ * element as `data-crewlet-focus="keyboard" | "pointer"` so a stylesheet can
+ * tell the two apart where the platform cannot.
+ *
+ * WHY IT EXISTS. A text field matches `:focus-visible` on a pointer press as
+ * well as on a tab: the platform treats every caret as an indicator worth
+ * showing. That leaves a field two choices and both are wrong. Ringed for the
+ * keyboard (2px in the focus colour, the area WCAG 2.2's focus appearance asks
+ * for), a click into a title or a search box drew a heavy band round the one
+ * thing a reader was already looking at, and on a page of fields that band was
+ * the loudest thing on it. Ringed for the pointer (one quiet pixel), a reader
+ * tabbing through a form was given half the indicator they need. So a field
+ * draws the keyboard's ring by default and narrows it only where this
+ * attribute says the caret was put there by a pointer.
+ *
+ * THE DEFAULT IS THE KEYBOARD'S. A document that never tracks the modality
+ * keeps the full ring everywhere, which is the accessible failure mode: a
+ * missing call costs some calm, never a reader's indicator.
+ *
+ * WHAT COUNTS AS THE KEYBOARD: Tab from anywhere, and any key pressed while
+ * focus is NOT in a text-entry control (Enter on a link, the arrows in a
+ * radio group, Escape out of a menu), because those keys move focus. Typing
+ * inside a field does not, or the ring would widen under every character a
+ * reader typed into a field they clicked. A modifier on its own is neither.
+ *
+ * One listener set per document however many fields mount, counted, and taken
+ * down when the last one unmounts.
+ */
+export type FocusModality = 'keyboard' | 'pointer';
+export declare const FOCUS_MODALITY_ATTRIBUTE = "data-crewlet-focus";
+/**
+ * Start tracking the modality on `doc`, and return the release. Safe to call
+ * any number of times: the listeners are installed once per document. An
+ * application may call it at boot, so the very first key a reader presses
+ * (Enter on the link that opened a page with a field already focused) is seen
+ * before any field has mounted.
+ */
+export declare function trackFocusModality(doc?: Document): () => void;
+/** Track the modality for as long as the calling component is mounted. */
+export declare function useFocusModality(): void;

package/dist/utils/index.d.ts

@@ -14,3 +14,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, trackFocusModality, useFocusModality } from './focusModality.js';
+export type { FocusModality } from './focusModality.js';

package/dist/utils/index.js

@@ -1,7 +1,8 @@
-export { ElementToPngError, elementToPng, parseCsv, serializeElement, toCsv } from '../chunk-OSFA5ROT.js';
+export { ElementToPngError, elementToPng, parseCsv, serializeElement, toCsv } from '../chunk-FEJANUZK.js';
 export { downloadBlob, downloadText, safeFilename, useDownload } from '../chunk-IW55G7XG.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 { FOCUS_MODALITY_ATTRIBUTE, trackFocusModality, useFocusModality } from '../chunk-YSGLEHND.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from '../chunk-PQADV6P6.js';
 export { cx } from '../chunk-ODEQTPFM.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.35.1",
+  "version": "0.36.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.35.1",
-    "@crewlethq/tokens": "0.35.1",
+    "@crewlethq/icons": "0.36.0",
+    "@crewlethq/tokens": "0.36.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/LivePreview-SRO7KHO4.css

@@ -1,65 +0,0 @@
-/*
- * A live preview: the stand-in and the live layer stacked in one box. The box
- * takes its size from its parent (a card's preview area), so it fills it and
- * clips whatever the content lays out past its edge.
- */
-
-.crewlet-live-preview {
-  position: relative;
-  display: block;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  contain: layout paint;
-}
-
-.crewlet-live-preview__fallback {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  transition: opacity var(--motion-duration-base) var(--motion-easing-out);
-}
-
-.crewlet-live-preview__live {
-  position: absolute;
-  inset: 0;
-  display: block;
-  overflow: hidden;
-  opacity: 0;
-  pointer-events: none;
-  user-select: none;
-  transition: opacity var(--motion-duration-base) var(--motion-easing-out);
-}
-
-/* LAID OUT AT ITS OWN SIZE from the top left corner, and scaled from there:
-   to the box's width, its top left the box's, or whole and centred. */
-.crewlet-preview-scale {
-  position: absolute;
-  inset: 0;
-  display: block;
-  overflow: hidden;
-}
-
-.crewlet-preview-scale__layer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  overflow: hidden;
-  transform-origin: 0 0;
-}
-
-.crewlet-live-preview[data-state='ready'] > .crewlet-live-preview__live {
-  opacity: 1;
-}
-
-.crewlet-live-preview[data-state='ready'] > .crewlet-live-preview__fallback {
-  opacity: 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .crewlet-live-preview__fallback,
-  .crewlet-live-preview__live {
-    transition: none;
-  }
-}

package/dist/chunk-KF6YGL4B.js

@@ -1,160 +0,0 @@
-import { cx } from './chunk-ODEQTPFM.js';
-import './LivePreview-SRO7KHO4.css';
-import { createContext, useMemo, useContext, useRef, useState, useEffect, useLayoutEffect } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-// src/LivePreview/budget.ts
-var LIVE_PREVIEW_MAX = 12;
-var immediately = (run) => {
-  run();
-  return () => {
-  };
-};
-var perFrame = (run) => {
-  if (typeof requestAnimationFrame === "undefined") return immediately(run);
-  let timer;
-  const frame = requestAnimationFrame(() => {
-    timer = setTimeout(run, 0);
-  });
-  return () => {
-    cancelAnimationFrame(frame);
-    if (timer !== void 0) clearTimeout(timer);
-  };
-};
-function createLivePreviewBudget(max = LIVE_PREVIEW_MAX, schedule = immediately) {
-  const held = /* @__PURE__ */ new Set();
-  const queue = [];
-  let pending = null;
-  const next = () => {
-    if (pending || held.size >= max || queue.length === 0) return;
-    let ran = false;
-    const cancel = schedule(() => {
-      ran = true;
-      pending = null;
-      const ask = queue.shift();
-      if (ask && held.size < max) {
-        held.add(ask.ticket);
-        ask.grant();
-      } else if (ask) {
-        queue.unshift(ask);
-      }
-      next();
-    });
-    if (!ran) pending = cancel;
-  };
-  return {
-    max,
-    request(grant) {
-      const ticket = {};
-      queue.push({ ticket, grant });
-      next();
-      let done = false;
-      return () => {
-        if (done) return;
-        done = true;
-        if (held.delete(ticket)) {
-          next();
-          return;
-        }
-        const at = queue.findIndex((a) => a.ticket === ticket);
-        if (at >= 0) queue.splice(at, 1);
-        if (queue.length === 0 && pending) {
-          pending();
-          pending = null;
-        }
-      };
-    },
-    live: () => held.size,
-    waiting: () => queue.length
-  };
-}
-var LIVE_PREVIEW_DWELL_MS = 120;
-var DefaultBudget = createLivePreviewBudget(LIVE_PREVIEW_MAX, perFrame);
-var BudgetContext = createContext(DefaultBudget);
-function LivePreviewBudgetProvider({ max = LIVE_PREVIEW_MAX, children }) {
-  const budget = useMemo(() => createLivePreviewBudget(max, perFrame), [max]);
-  return /* @__PURE__ */ jsx(BudgetContext.Provider, { value: budget, children });
-}
-var NOOP = { ready: () => {
-}, fail: () => {
-} };
-var SignalContext = createContext(NOOP);
-function useLivePreview() {
-  return useContext(SignalContext);
-}
-function LivePreview({ children, fallback, width, rootMargin = "200px 0px", disabled = false, dwellMs = LIVE_PREVIEW_DWELL_MS, onStateChange, className }) {
-  const budget = useContext(BudgetContext);
-  const box = useRef(null);
-  const [near, setNear] = useState(false);
-  const [state, setState] = useState("idle");
-  const [failed, setFailed] = useState(false);
-  useEffect(() => {
-    const el = box.current;
-    if (!el || disabled || typeof IntersectionObserver === "undefined") return void 0;
-    const seen = new IntersectionObserver((entries) => setNear(entries.some((e) => e.isIntersecting)), { rootMargin });
-    seen.observe(el);
-    return () => seen.disconnect();
-  }, [disabled, rootMargin]);
-  useEffect(() => {
-    if (!near || disabled || failed) {
-      setState(failed ? "failed" : "idle");
-      return void 0;
-    }
-    setState("waiting");
-    let granted = false;
-    let giveBack = () => {
-    };
-    const dwell = setTimeout(() => {
-      giveBack = budget.request(() => {
-        granted = true;
-        setState("live");
-      });
-    }, dwellMs);
-    return () => {
-      clearTimeout(dwell);
-      giveBack();
-      if (granted) setState("idle");
-    };
-  }, [near, disabled, failed, budget, dwellMs]);
-  useEffect(() => onStateChange?.(state), [state, onStateChange]);
-  const mounted = state === "live" || state === "ready";
-  const signals = useMemo(
-    () => ({
-      ready: () => setState((s) => s === "live" ? "ready" : s),
-      fail: () => setFailed(true)
-    }),
-    []
-  );
-  return /* @__PURE__ */ jsxs("span", { ref: box, className: cx("crewlet-live-preview", className), "data-state": state, "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx("span", { className: "crewlet-live-preview__fallback", children: fallback }),
-    mounted ? /* @__PURE__ */ jsx("span", { className: "crewlet-live-preview__live", inert: true, children: /* @__PURE__ */ jsx(SignalContext.Provider, { value: signals, children: width === void 0 ? children : /* @__PURE__ */ jsx(PreviewScale, { width, children }) }) }) : null
-  ] });
-}
-function PreviewScale({ children, width, height, fit = "width" }) {
-  const box = useRef(null);
-  const [size, setSize] = useState(null);
-  useLayoutEffect(() => {
-    const el = box.current;
-    if (!el) return void 0;
-    const measure = () => {
-      const rect = el.getBoundingClientRect();
-      if (rect.width > 0) setSize((was) => was && was.w === rect.width && was.h === rect.height ? was : { w: rect.width, h: rect.height });
-    };
-    measure();
-    if (typeof ResizeObserver === "undefined") return void 0;
-    const watch = new ResizeObserver(measure);
-    watch.observe(el);
-    return () => watch.disconnect();
-  }, []);
-  let layer = { width, visibility: "hidden" };
-  if (size) {
-    const k = fit === "contain" && height ? Math.min(size.w / width, size.h / height) : size.w / width;
-    const h = height ?? size.h / k;
-    const left = fit === "contain" ? (size.w - width * k) / 2 : 0;
-    const top = fit === "contain" ? (size.h - h * k) / 2 : 0;
-    layer = { width, height: h, transform: `translate(${left}px, ${top}px) scale(${k})` };
-  }
-  return /* @__PURE__ */ jsx("span", { ref: box, className: "crewlet-preview-scale", children: /* @__PURE__ */ jsx("span", { className: "crewlet-preview-scale__layer", style: layer, children }) });
-}
-
-export { LIVE_PREVIEW_DWELL_MS, LIVE_PREVIEW_MAX, LivePreview, LivePreviewBudgetProvider, PreviewScale, createLivePreviewBudget, immediately, perFrame, useLivePreview };

package/dist/chunk-TYKQ33CL.js

@@ -1,35 +0,0 @@
-import { cx } from './chunk-ODEQTPFM.js';
-import './Document-JUGCSQ4L.css';
-import { jsx } from 'react/jsx-runtime';
-
-function Document({ as: Tag = "div", size = "md", measure = "normal", className, children, ...rest }) {
-  return /* @__PURE__ */ jsx(
-    Tag,
-    {
-      ...rest,
-      className: cx(
-        "crewlet-document",
-        `crewlet-document--${size}`,
-        measure === "normal" && "crewlet-document--measure",
-        className
-      ),
-      children
-    }
-  );
-}
-function DocumentTitle({ as: Tag = "h1", className, children, ...rest }) {
-  return /* @__PURE__ */ jsx(Tag, { ...rest, className: cx("crewlet-document-title", className), children });
-}
-function DocumentTitleField({ error = false, className, ...rest }) {
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      ...rest,
-      type: "text",
-      "aria-invalid": error || void 0,
-      className: cx("crewlet-document-title", "crewlet-document-title-field", className)
-    }
-  );
-}
-
-export { Document, DocumentTitle, DocumentTitleField };

package/dist/{chunk-3P4Y5RX6.js → chunk-4BYHAOHH.js}

@@ -1,6 +1,6 @@
 import { LayerNodeBridge } from './chunk-LM3ISVJA.js';
-import { Kbd } from './chunk-SMBKXWML.js';
 import { Tooltip } from './chunk-6ZJ3N7QI.js';
+import { Kbd } from './chunk-SMBKXWML.js';
 import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-OMV5W53A.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';

package/dist/{chunk-KD2IRYCT.js → chunk-5WDXPHEW.js}

@@ -1,5 +1,5 @@
-import { InlineCode } from './chunk-5CLW2CXT.js';
 import { ConfirmModal } from './chunk-XEGZHHRH.js';
+import { InlineCode } from './chunk-5CLW2CXT.js';
 import { Callout } from './chunk-SZZRIHGT.js';
 import './LinkInterstitial-ET4MSVSV.css';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-FJJHD73S.js → chunk-GYBDPCRC.js}

@@ -1,7 +1,7 @@
 import { HuePicker } from './chunk-SUXP4OBT.js';
 import { Popover } from './chunk-K3IJQNB7.js';
-import { CharacterPicker } from './chunk-YEVG2X5R.js';
 import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
+import { CharacterPicker } from './chunk-YEVG2X5R.js';
 import { Avatar } from './chunk-PZKHBB7D.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AvatarPicker-PREY36MG.css';

package/dist/{chunk-VHZ3AXJD.js → chunk-NQCY44B3.js}

@@ -1,6 +1,6 @@
-import { Timeline } from './chunk-AUQPBL4O.js';
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { Timeline } from './chunk-AUQPBL4O.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './VersionTimeline-6KRXEEOO.css';

package/dist/{chunk-FF5OZV77.js → chunk-W3HYWD63.js}

@@ -1,8 +1,8 @@
 import { TagGroup } from './chunk-O2EGEONV.js';
-import { Tag } from './chunk-GFV4LJHH.js';
-import { StatusDot } from './chunk-WIATRXEJ.js';
 import { CursorFlag } from './chunk-3BYIWOTV.js';
 import { presenceHueClass } from './chunk-I6POAB4V.js';
+import { Tag } from './chunk-GFV4LJHH.js';
+import { StatusDot } from './chunk-WIATRXEJ.js';
 import { ChangeMark } from './chunk-47JQAGRV.js';
 import { isEmptyValue, displayText, ratingMax, findPerson, findOption, statusTone, editText, textMax, sheetLabels, normalizeValue, sameValue, spokenText, drawnColumns, fitSamples, fittedWidth, columnWidth, SHEET_COLUMN_BOUNDS, sortRows, SHEET_ROW_HEIGHT, cellKey, columnOffsets, SHEET_ROW_NUMBER_WIDTH, rangeOf, presenceByCell, presenceByRow, presenceByColumn, scrollToRow, planClear, visibleRows, cellDescription, nextSort, rowName, inRange, hasPrevious, flagText, toTSV, planPaste, parseTSV, isMod, moveFrom, isTypingKey, editorSide, optionHue, parseText, liveOptions, checkValue } from './chunk-LFSIKGRQ.js';
 import { presenceLabels } from './chunk-Z7JYG5TF.js';