@crewlethq/ui 0.17.1 → 0.19.0

package/dist/chunk-WXAULPBH.js

@@ -0,0 +1,135 @@
+import { Timeline } from './chunk-AUQPBL4O.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './VersionTimeline-EBJ6MIPJ.css';
+import { RotateCcwClockGlyph, PencilGlyph, ShieldGlyph, DatabaseGlyph, UploadGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var LABELS = {
+  list: "Versions",
+  version: (version) => `Version ${version}`,
+  latest: "Latest",
+  publish: "Published",
+  restore: (from) => from === void 0 ? "Restored" : `Restored version ${from}`,
+  schema: "Schema changed",
+  capabilities: "Capabilities changed",
+  compare: "Compare",
+  compareWith: (version) => `Compare with version ${version}`,
+  restoreAction: "Restore",
+  restoreVersion: (version) => `Restore version ${version}`,
+  labelAction: "Name",
+  labelVersion: (version) => `Name version ${version}`,
+  retention: (oldestKept) => oldestKept > 2 ? `Versions 1 to ${oldestKept - 1} are past the retention window and are no longer kept.` : "Version 1 is past the retention window and is no longer kept."
+};
+var GLYPHS = {
+  publish: /* @__PURE__ */ jsx(UploadGlyph, { size: "xs" }),
+  restore: /* @__PURE__ */ jsx(RotateCcwClockGlyph, { size: "xs" }),
+  schema: /* @__PURE__ */ jsx(DatabaseGlyph, { size: "xs" }),
+  capabilities: /* @__PURE__ */ jsx(ShieldGlyph, { size: "xs" })
+};
+function VersionTimeline({
+  versions,
+  latest,
+  selected,
+  against,
+  onSelect,
+  onCompare,
+  onRestore,
+  onLabel,
+  oldestKept,
+  now,
+  labels,
+  className,
+  ...rest
+}) {
+  const text = { ...LABELS, ...labels };
+  const newest = latest ?? versions.reduce((high, item) => Math.max(high, item.version), 0);
+  const gap = oldestKept !== void 0 && oldestKept > 1;
+  return /* @__PURE__ */ jsxs("nav", { ...rest, "aria-label": text.list, className: cx("crewlet-version-timeline", className), children: [
+    /* @__PURE__ */ jsx(Timeline, { children: versions.map((item) => {
+      const kind = item.kind ?? "publish";
+      const current = item.version === selected;
+      const compared = item.version === against;
+      const what = kind === "restore" ? text.restore(item.restoredFrom) : text[kind];
+      return /* @__PURE__ */ jsxs(
+        Timeline.Item,
+        {
+          marker: GLYPHS[kind],
+          label: false,
+          className: cx(current && "is-current", compared && "is-compared"),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "crewlet-version-timeline__select",
+                "aria-current": current || void 0,
+                onClick: () => onSelect(item.version),
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "crewlet-version-timeline__head", children: [
+                    /* @__PURE__ */ jsx("span", { className: "crewlet-version-timeline__number", children: text.version(item.version) }),
+                    item.version === newest ? /* @__PURE__ */ jsx("span", { className: "crewlet-version-timeline__latest", children: text.latest }) : null,
+                    item.label ? /* @__PURE__ */ jsx("span", { className: "crewlet-version-timeline__label", children: item.label }) : null
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "crewlet-version-timeline__summary", children: item.summary ?? what })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-version-timeline__meta", children: [
+              /* @__PURE__ */ jsx(PrincipalAvatar, { principal: item.author, size: "xs" }),
+              /* @__PURE__ */ jsx("span", { children: item.author.name }),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }),
+              /* @__PURE__ */ jsx(RelativeTime, { value: item.at, now }),
+              item.summary ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }),
+                /* @__PURE__ */ jsx("span", { children: what })
+              ] }) : null
+            ] }),
+            item.source ? /* @__PURE__ */ jsx("span", { className: "crewlet-version-timeline__source", children: item.source }) : null,
+            onCompare || onRestore || onLabel ? /* @__PURE__ */ jsxs("span", { className: "crewlet-version-timeline__actions", children: [
+              onCompare && !current ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "ghost",
+                  pressed: compared,
+                  "aria-label": text.compareWith(item.version),
+                  onClick: () => onCompare(compared ? null : item.version),
+                  children: text.compare
+                }
+              ) : null,
+              onRestore && item.version !== newest ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "ghost",
+                  leadingIcon: /* @__PURE__ */ jsx(RotateCcwClockGlyph, {}),
+                  "aria-label": text.restoreVersion(item.version),
+                  onClick: () => onRestore(item.version),
+                  children: text.restoreAction
+                }
+              ) : null,
+              onLabel ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "ghost",
+                  leadingIcon: /* @__PURE__ */ jsx(PencilGlyph, {}),
+                  "aria-label": text.labelVersion(item.version),
+                  onClick: () => onLabel(item.version),
+                  children: text.labelAction
+                }
+              ) : null
+            ] }) : null
+          ]
+        },
+        item.version
+      );
+    }) }),
+    gap ? /* @__PURE__ */ jsx("p", { className: "crewlet-version-timeline__gap", children: text.retention(oldestKept) }) : null
+  ] });
+}
+
+export { VersionTimeline };

package/dist/chunk-XJ2QEBMM.js

@@ -0,0 +1,277 @@
+import { announce } from './chunk-RSAQOKH3.js';
+import { useId, useState, useRef, useCallback, useLayoutEffect, useMemo } from 'react';
+
+var DEFAULT_REORDER_LABELS = {
+  handle: (name) => `Move ${name}`,
+  hint: "Drag to move, or press the arrow keys.",
+  moved: (name, position, total) => `${name} moved to position ${position} of ${total}.`
+};
+function moveKey(keys, key, to) {
+  const next = keys.filter((k) => k !== key);
+  next.splice(Math.max(0, Math.min(to, next.length)), 0, key);
+  return next;
+}
+function listOf(lists, key) {
+  for (const [id, keys] of Object.entries(lists)) if (keys.includes(key)) return id;
+  return null;
+}
+function place(lists, key, list, index) {
+  const next = {};
+  for (const [id, keys] of Object.entries(lists)) next[id] = keys.filter((k) => k !== key);
+  const target = next[list] ?? [];
+  target.splice(Math.max(0, Math.min(index, target.length)), 0, key);
+  next[list] = target;
+  return next;
+}
+var SETTLE_MS = 200;
+var settleMs = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 20 : SETTLE_MS;
+var now = () => typeof performance !== "undefined" ? performance.now() : Date.now();
+function byRows(node, axis) {
+  if (axis === "vertical") return true;
+  const row = node.parentElement?.getBoundingClientRect();
+  return row !== void 0 && node.getBoundingClientRect().width > row.width * 0.75;
+}
+var lineOf = (node, axis) => byRows(node, axis) ? "horizontal" : "vertical";
+function inEarlierHalf(node, axis, x, y) {
+  const r = node.getBoundingClientRect();
+  return byRows(node, axis) ? y < r.top + r.height / 2 : x < r.left + r.width / 2;
+}
+function lastOf(keys, except) {
+  const rest = (keys ?? []).filter((k) => k !== except);
+  return rest[rest.length - 1];
+}
+var sameLists = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+var PREVIOUS = {
+  vertical: ["ArrowUp"],
+  grid: ["ArrowUp", "ArrowLeft"]
+};
+var NEXT = {
+  vertical: ["ArrowDown"],
+  grid: ["ArrowDown", "ArrowRight"]
+};
+function useReorderLists({
+  lists,
+  onReorder,
+  nameOf,
+  accepts,
+  axis = "vertical",
+  labels: labelOverrides
+}) {
+  const labels = { ...DEFAULT_REORDER_LABELS, ...labelOverrides };
+  const hintId = `${useId()}-reorder-hint`;
+  const [dragging, setDragging] = useState(null);
+  const [preview, setPreview] = useState(null);
+  const [target, setTarget] = useState(
+    null
+  );
+  const shown = preview ?? lists;
+  const nodes = useRef(/* @__PURE__ */ new Map());
+  const before = useRef(/* @__PURE__ */ new Map());
+  const measure = useCallback(() => {
+    before.current = /* @__PURE__ */ new Map();
+    for (const [key, node] of nodes.current) {
+      for (const a of node.getAnimations?.() ?? []) a.finish();
+      before.current.set(key, node.getBoundingClientRect());
+    }
+  }, []);
+  const shape = JSON.stringify(shown);
+  useLayoutEffect(() => {
+    const last = before.current;
+    before.current = /* @__PURE__ */ new Map();
+    if (last.size === 0) return;
+    if (typeof window === "undefined" || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+    for (const [key, node] of nodes.current) {
+      const was = last.get(key);
+      if (!was) continue;
+      const now2 = node.getBoundingClientRect();
+      const dx = was.left - now2.left;
+      const dy = was.top - now2.top;
+      if (dx === 0 && dy === 0) continue;
+      node.animate?.([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "translate(0, 0)" }], {
+        duration: 180,
+        easing: "cubic-bezier(0.2, 0, 0, 1)"
+      });
+    }
+  }, [shape]);
+  const said = useRef(labels.moved);
+  said.current = labels.moved;
+  const commit = useCallback(
+    (next, moved) => {
+      onReorder(next);
+      const list = listOf(next, moved);
+      const keys = list ? next[list] ?? [] : [];
+      announce(said.current(nameOf(moved), keys.indexOf(moved) + 1, keys.length));
+    },
+    [onReorder, nameOf]
+  );
+  const move = useCallback(
+    (key, by) => {
+      const list = listOf(lists, key);
+      if (list === null) return;
+      const keys = lists[list] ?? [];
+      const at = keys.indexOf(key);
+      const to = Math.max(0, Math.min(keys.length - 1, at + by));
+      if (to === at) return;
+      measure();
+      commit(place(lists, key, list, to), key);
+    },
+    [lists, measure, commit]
+  );
+  const moveTo = useCallback(
+    (key, list) => {
+      if (listOf(lists, key) === list) return;
+      if (accepts && !accepts(key, list)) return;
+      measure();
+      commit(place(lists, key, list, (lists[list] ?? []).length), key);
+    },
+    [lists, accepts, measure, commit]
+  );
+  const settled = useRef(0);
+  const insertionPoint = (list, moved, x, y) => {
+    let last;
+    for (const k of preview?.[list] ?? []) {
+      if (k === moved) continue;
+      const node = nodes.current.get(k);
+      if (!node) continue;
+      last = node;
+      const r = node.getBoundingClientRect();
+      if (y < r.top || y <= r.bottom && inEarlierHalf(node, axis, x, y)) {
+        return { list, before: k, line: lineOf(node, axis) };
+      }
+    }
+    return { list, before: null, line: last ? lineOf(last, axis) : "vertical" };
+  };
+  const aim = (list, moved, x, y) => {
+    const next = insertionPoint(list, moved, x, y);
+    if (target?.list !== next.list || target.before !== next.before || target.line !== next.line) setTarget(next);
+  };
+  const reset = () => {
+    setDragging(null);
+    setPreview(null);
+    setTarget(null);
+    settled.current = 0;
+  };
+  const drop = (event) => {
+    if (dragging === null || !preview) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const moved = dragging;
+    let next = preview;
+    if (target) {
+      const keys = (preview[target.list] ?? []).filter((k) => k !== moved);
+      const at = target.before === null ? keys.length : keys.indexOf(target.before);
+      next = place(preview, moved, target.list, at < 0 ? keys.length : at);
+    }
+    reset();
+    if (!sameLists(next, lists)) {
+      measure();
+      commit(next, moved);
+    }
+  };
+  const handleProps = (key) => ({
+    draggable: true,
+    "aria-label": labels.handle(nameOf(key)),
+    "aria-describedby": hintId,
+    onDragStart: (event) => {
+      event.stopPropagation();
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", nameOf(key));
+      const node = nodes.current.get(key);
+      if (node) event.dataTransfer.setDragImage(node, 24, 16);
+      setDragging(key);
+      setPreview(Object.fromEntries(Object.entries(lists).map(([id, keys]) => [id, [...keys]])));
+    },
+    // Whatever ended the drag, the preview goes: a drop has already committed.
+    onDragEnd: reset,
+    onKeyDown: (event) => {
+      if (event.altKey || event.ctrlKey || event.metaKey) return;
+      const by = PREVIOUS[axis].includes(event.key) ? -1 : NEXT[axis].includes(event.key) ? 1 : 0;
+      if (by === 0) return;
+      event.preventDefault();
+      event.stopPropagation();
+      move(key, by);
+    }
+  });
+  const markerOf = (key) => {
+    if (!target) return {};
+    const edge = target.before === key ? "before" : target.before === null && lastOf(preview?.[target.list], dragging) === key ? "after" : void 0;
+    return edge ? { "data-reorder-target": edge, "data-reorder-line": target.line } : {};
+  };
+  const itemProps = (key) => ({
+    ref: (node) => {
+      if (node) nodes.current.set(key, node);
+      else nodes.current.delete(key);
+    },
+    "data-reorder": dragging === key ? "dragging" : "idle",
+    ...markerOf(key),
+    onDragOver: (event) => {
+      if (dragging === null || !preview) return;
+      const list = listOf(preview, key);
+      if (list === null) return;
+      if (accepts && !accepts(dragging, list)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      event.dataTransfer.dropEffect = "move";
+      if (key === dragging) return;
+      if (listOf(preview, dragging) !== list) {
+        aim(list, dragging, event.clientX, event.clientY);
+        return;
+      }
+      if (target) setTarget(null);
+      if (now() < settled.current) return;
+      const keys = preview[list] ?? [];
+      const from = keys.indexOf(dragging);
+      const to = keys.indexOf(key);
+      if (from === to) return;
+      const early = inEarlierHalf(event.currentTarget, axis, event.clientX, event.clientY);
+      if (from < to && early) return;
+      if (from > to && !early) return;
+      measure();
+      setPreview(place(preview, dragging, list, to));
+      settled.current = now() + settleMs();
+    },
+    onDrop: drop
+  });
+  const listProps = (list) => ({
+    // Lit only when the item would move INTO this list: reordering within a
+    // list is already shown by the items moving.
+    "data-reorder-over": dragging !== null && target?.list === list ? "true" : void 0,
+    onDragOver: (event) => {
+      if (dragging === null || !preview) return;
+      if (accepts && !accepts(dragging, list)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (listOf(preview, dragging) === list) {
+        if (target) setTarget(null);
+        return;
+      }
+      aim(list, dragging, event.clientX, event.clientY);
+    },
+    onDrop: drop
+  });
+  return { lists: shown, dragging, handleProps, itemProps, listProps, move, moveTo, hintId, hint: labels.hint };
+}
+var ONLY = "list";
+function useReorder({
+  keys,
+  onReorder,
+  nameOf,
+  axis,
+  labels
+}) {
+  const lists = useMemo(() => ({ [ONLY]: keys }), [keys]);
+  const report = useCallback((next) => onReorder(next[ONLY] ?? []), [onReorder]);
+  const r = useReorderLists({ lists, onReorder: report, nameOf, axis, labels });
+  return {
+    order: r.lists[ONLY] ?? [],
+    dragging: r.dragging,
+    handleProps: r.handleProps,
+    itemProps: r.itemProps,
+    containerProps: r.listProps(ONLY),
+    move: r.move,
+    hintId: r.hintId,
+    hint: r.hint
+  };
+}
+
+export { DEFAULT_REORDER_LABELS, moveKey, useReorder, useReorderLists };

package/dist/{chunk-NXDEPUVG.js → chunk-XU4ZUGLE.js}

@@ -1,5 +1,5 @@
-import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
 import { SegmentedControl } from './chunk-26PEPONN.js';
+import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -11,16 +11,31 @@ var optionsFor = (disabled) => NODE_HUES.map((hue) => ({
 }));
 var ENABLED = optionsFor(false);
 var DISABLED = optionsFor(true);
-function HuePicker({ label, value, onValueChange, size, disabled = false, className }) {
+function HuePicker(props) {
+  const { label, size, disabled = false, className } = props;
+  const hues = disabled ? DISABLED : ENABLED;
+  const options = props.none === void 0 ? hues : [
+    {
+      value: "none",
+      label: props.none,
+      icon: /* @__PURE__ */ jsx("span", { className: "crewlet-hue-picker__swatch crewlet-hue-picker__swatch--none" }),
+      disabled
+    },
+    ...hues
+  ];
   return /* @__PURE__ */ jsx(
     SegmentedControl,
     {
       semantics: "radio",
       layout: "chips",
       label,
-      options: disabled ? DISABLED : ENABLED,
-      value,
-      onValueChange,
+      options,
+      value: props.value,
+      onValueChange: (next) => {
+        if (props.none === void 0) {
+          if (next !== "none") props.onValueChange(next);
+        } else props.onValueChange(next);
+      },
       size,
       className: cx("crewlet-hue-picker", className)
     }

package/dist/chunk-YM3GJHGW.js

@@ -0,0 +1,69 @@
+import { presenceHueClass } from './chunk-I6POAB4V.js';
+import { presenceLabels, presenceOrder } from './chunk-S35G6PNC.js';
+import { AVATAR_SIZES, Avatar } from './chunk-5OM447RW.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './PresenceStack-QSXQJND5.css';
+import { isCrewletCharacter } from '@crewlethq/icons/characters';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function PresenceStack({ members, self = true, max = 4, size = "sm", onSelect, label, labels, className }) {
+  if (!Number.isInteger(max) || max < 1) {
+    throw new RangeError(`PresenceStack max must be a whole number of at least 1; it was ${max}`);
+  }
+  const text = presenceLabels(labels);
+  const ordered = presenceOrder(members);
+  if (ordered.length === 0 && !self) return null;
+  const shown = ordered.slice(0, max);
+  const hidden = ordered.slice(max);
+  const here = label ?? text.here(ordered.length, self);
+  const spoken = [here, ...ordered.map((member) => text.member(member))].join(". ");
+  const badge = (member) => /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      name: member.name,
+      kind: member.kind,
+      src: member.src,
+      character: member.character !== void 0 && isCrewletCharacter(member.character) ? member.character : void 0,
+      hue: member.kind === "agent" ? member.hue : void 0,
+      size,
+      decorative: true,
+      className: cx(
+        "crewlet-presence-stack__badge",
+        member.hue !== void 0 && member.activity !== "idle" && presenceHueClass(member.hue),
+        member.hue !== void 0 && member.activity !== "idle" && "crewlet-presence-stack__badge--present",
+        member.activity === "idle" && "crewlet-presence-stack__badge--idle"
+      )
+    }
+  );
+  const more = hidden.length > 0 ? /* @__PURE__ */ jsxs("span", { className: "crewlet-avatar-stack__member crewlet-avatar-stack__more", "aria-hidden": "true", children: [
+    "+",
+    hidden.length
+  ] }) : null;
+  const style = { "--crewlet-avatar-stack-size": `${AVATAR_SIZES[size]}px` };
+  if (onSelect === void 0) {
+    if (ordered.length === 0) return null;
+    return /* @__PURE__ */ jsxs("span", { className: cx("crewlet-avatar-stack", "crewlet-presence-stack", className), style, role: "img", "aria-label": spoken, children: [
+      shown.map((member) => /* @__PURE__ */ jsx("span", { className: cx("crewlet-avatar-stack__member", "crewlet-presence-stack__member", `crewlet-presence-stack__member--${member.kind}`), children: badge(member) }, member.id)),
+      more
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-avatar-stack", "crewlet-presence-stack", className), style, role: "group", "aria-label": here, children: [
+    shown.map((member) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cx("crewlet-avatar-stack__member", "crewlet-presence-stack__member", `crewlet-presence-stack__member--${member.kind}`),
+        "aria-label": text.member(member),
+        title: text.member(member),
+        onClick: () => onSelect(member),
+        children: badge(member)
+      },
+      member.id
+    )),
+    more,
+    hidden.length > 0 ? /* @__PURE__ */ jsx(VisuallyHidden, { children: `${text.more(hidden.length)}: ${hidden.map((member) => text.member(member)).join(", ")}` }) : null
+  ] });
+}
+
+export { PresenceStack };

package/dist/{chunk-T3ZWBZ65.js → chunk-YSJYWQSP.js}

@@ -1,8 +1,8 @@
 import { Kbd } from './chunk-SMBKXWML.js';
-import { FormField, Textarea, Input } from './chunk-4GB57WIT.js';
+import { FormField, Textarea, Input } from './chunk-Q55TXPA3.js';
+import { isComposing } from './chunk-R25RGPUB.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
-import { isComposing } from './chunk-R25RGPUB.js';
 import './ListInput-O7LJKOIG.css';
 import { useState, useRef, useLayoutEffect } from 'react';
 import { ArrowUpGlyph, ArrowDownGlyph, XGlyph, PlusGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-CXBAIVYZ.js → chunk-YSY6UJ4F.js}

@@ -1,5 +1,5 @@
 import { InlineCode } from './chunk-5CLW2CXT.js';
-import { FormField, Input } from './chunk-4GB57WIT.js';
+import { FormField, Input } from './chunk-Q55TXPA3.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function confirmMatches(typed, phrase) {