@crewlethq/ui 0.8.1 → 0.9.0

package/dist/chunk-26TXVHN2.js

@@ -0,0 +1,31 @@
+import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
+import { SegmentedControl } from './chunk-LPHHDCN3.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './HuePicker-5QIUR6L7.css';
+import { jsx } from 'react/jsx-runtime';
+
+var optionsFor = (disabled) => NODE_HUES.map((hue) => ({
+  value: hue,
+  label: NODE_HUE_NAMES[hue],
+  icon: /* @__PURE__ */ jsx("span", { className: `crewlet-hue-picker__swatch crewlet-hue-picker__swatch--${hue}` }),
+  disabled
+}));
+var ENABLED = optionsFor(false);
+var DISABLED = optionsFor(true);
+function HuePicker({ label, value, onValueChange, size, disabled = false, className }) {
+  return /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      semantics: "radio",
+      layout: "chips",
+      label,
+      options: disabled ? DISABLED : ENABLED,
+      value,
+      onValueChange,
+      size,
+      className: cx("crewlet-hue-picker", className)
+    }
+  );
+}
+
+export { HuePicker };

package/dist/chunk-AYKXMIOR.js

@@ -0,0 +1,13 @@
+// src/utils/nodeHue.ts
+var NODE_HUES = ["purple", "cyan", "green", "amber", "rose", "blue"];
+var NODE_HUE_NAMES = {
+  purple: "Purple",
+  cyan: "Cyan",
+  green: "Green",
+  amber: "Amber",
+  rose: "Rose",
+  blue: "Blue"
+};
+var isNodeHue = (value) => typeof value === "string" && NODE_HUES.includes(value);
+
+export { NODE_HUES, NODE_HUE_NAMES, isNodeHue };

package/dist/chunk-CBOICT64.js

@@ -0,0 +1,74 @@
+import { useRef, useState } from 'react';
+
+// src/Tabs/roving.ts
+function tabStop(items, selected) {
+  if (selected >= 0 && !items[selected]?.disabled) return selected;
+  return items.findIndex((item) => !item.disabled);
+}
+function useRoving(count, select, { followFocus = false, columns } = {}) {
+  const buttons = useRef([]);
+  const [landed, setLanded] = useState(null);
+  function step(from, by) {
+    for (let i = 0; i < count; i += 1) {
+      const at = ((from + by * i) % count + count) % count;
+      const el = buttons.current[at];
+      if (el && !el.disabled) return at;
+    }
+    return null;
+  }
+  function rowStep(at, by, across) {
+    const target = at + by * across;
+    if (target < 0 || target >= count) return null;
+    const el = buttons.current[target];
+    return el && !el.disabled ? target : null;
+  }
+  function moveTo(key, at, vertical) {
+    if (count === 0) return null;
+    if (columns !== void 0 && (key === "ArrowDown" || key === "ArrowUp")) {
+      return rowStep(at, key === "ArrowDown" ? 1 : -1, columns);
+    }
+    switch (key) {
+      case "ArrowRight":
+        return step(at + 1, 1);
+      case "ArrowLeft":
+        return step(at - 1, -1);
+      case "ArrowDown":
+        return vertical ? step(at + 1, 1) : null;
+      case "ArrowUp":
+        return vertical ? step(at - 1, -1) : null;
+      case "Home":
+        return step(0, 1);
+      case "End":
+        return step(count - 1, -1);
+      default:
+        return null;
+    }
+  }
+  const onFocusAt = (index) => {
+    if (followFocus) setLanded(index);
+  };
+  const onKeyDown = (event, vertical) => {
+    const at = buttons.current.findIndex((button) => button === document.activeElement);
+    if (at < 0) return;
+    const next = moveTo(event.key, at, vertical);
+    if (next === null) return;
+    event.preventDefault();
+    buttons.current[next]?.focus();
+    onFocusAt(next);
+    select?.(next);
+  };
+  return {
+    buttons,
+    onKeyDown,
+    onFocusAt,
+    /*
+     * Where the stop belongs, or null for "on the caller's selection, as
+     * ever". Bounded by the CURRENT count, because a row whose options
+     * changed under a remembered index would otherwise put its only stop past
+     * its own end, where Tab finds nothing at all.
+     */
+    focused: followFocus && landed !== null && landed < count ? landed : null
+  };
+}
+
+export { tabStop, useRoving };

package/dist/{chunk-W4GQWFRX.js → chunk-E3HDS4F7.js}

@@ -1,4 +1,4 @@
-import { avatarCorner, Avatar } from './chunk-IA232OTU.js';
+import { avatarCorner, Avatar } from './chunk-UDW3DAP5.js';
 import './ImageUpload-L2GE4JUM.css';
 import { useRef } from 'react';
 import { CameraGlyph, XGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-A3K56LY6.js → chunk-EUT7VBQG.js}

@@ -1,13 +1,13 @@
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { PageHeader } from './chunk-HOXGBLEY.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { PageHeader } from './chunk-HOXGBLEY.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { DataTable } from './chunk-KTIEJ5Q5.js';
+import { useListbox, useOptionKeys } from './chunk-6MU7HNB4.js';
+import { Input } from './chunk-ZGX2DP7F.js';
+import { DataTable } from './chunk-CVB7O3SZ.js';
 import { Menu } from './chunk-LSB3EHBW.js';
 import { DateTimePicker } from './chunk-5I56UXBJ.js';
 import { Popover } from './chunk-PDUZO35I.js';
-import { useListbox, useOptionKeys } from './chunk-6MU7HNB4.js';
-import { Input } from './chunk-ZGX2DP7F.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { Button } from './chunk-OG6CL3EB.js';

package/dist/{chunk-DRHXRGB6.js → chunk-HEOVQZL7.js}

@@ -1,69 +1,10 @@
+import { useRoving, tabStop } from './chunk-CBOICT64.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Tabs-BWFQSWY3.css';
-import React, { useRef, useState, useLayoutEffect } from 'react';
+import React, { useRef, useLayoutEffect } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-function tabStop(items, selected) {
-  if (selected >= 0 && !items[selected]?.disabled) return selected;
-  return items.findIndex((item) => !item.disabled);
-}
-function useRoving(count, select, { followFocus = false } = {}) {
-  const buttons = useRef([]);
-  const [landed, setLanded] = useState(null);
-  function step(from, by) {
-    for (let i = 0; i < count; i += 1) {
-      const at = ((from + by * i) % count + count) % count;
-      const el = buttons.current[at];
-      if (el && !el.disabled) return at;
-    }
-    return null;
-  }
-  function moveTo(key, at, vertical) {
-    if (count === 0) return null;
-    switch (key) {
-      case "ArrowRight":
-        return step(at + 1, 1);
-      case "ArrowLeft":
-        return step(at - 1, -1);
-      case "ArrowDown":
-        return vertical ? step(at + 1, 1) : null;
-      case "ArrowUp":
-        return vertical ? step(at - 1, -1) : null;
-      case "Home":
-        return step(0, 1);
-      case "End":
-        return step(count - 1, -1);
-      default:
-        return null;
-    }
-  }
-  const onFocusAt = (index) => {
-    if (followFocus) setLanded(index);
-  };
-  const onKeyDown = (event, vertical) => {
-    const at = buttons.current.findIndex((button) => button === document.activeElement);
-    if (at < 0) return;
-    const next = moveTo(event.key, at, vertical);
-    if (next === null) return;
-    event.preventDefault();
-    buttons.current[next]?.focus();
-    onFocusAt(next);
-    select?.(next);
-  };
-  return {
-    buttons,
-    onKeyDown,
-    onFocusAt,
-    /*
-     * Where the stop belongs, or null for "on the caller's selection, as
-     * ever". Bounded by the CURRENT count, because a row whose options
-     * changed under a remembered index would otherwise put its only stop past
-     * its own end, where Tab finds nothing at all.
-     */
-    focused: followFocus && landed !== null && landed < count ? landed : null
-  };
-}
 function tabId(panelId, value) {
   return `${panelId}-tab-${value}`;
 }
@@ -184,4 +125,4 @@ function TabPanel({ id, value, children, className }) {
   );
 }
 
-export { TabPanel, Tabs, tabId, tabStop, useRoving };
+export { TabPanel, Tabs, tabId };

package/dist/chunk-IKH3Y4MP.js

@@ -0,0 +1,73 @@
+import { useRoving, tabStop } from './chunk-CBOICT64.js';
+import { Avatar } from './chunk-UDW3DAP5.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './CharacterPicker-ZEYIKUNQ.css';
+import { CREWLET_CHARACTERS, CREWLET_CHARACTER_GEOMETRY } from '@crewlethq/icons/characters';
+import { jsx } from 'react/jsx-runtime';
+
+var CHARACTER_PICKER_COLUMNS = 6;
+function CharacterPicker({
+  label,
+  value,
+  onValueChange,
+  hue,
+  characters = CREWLET_CHARACTERS,
+  disabled = false,
+  className,
+  ...rest
+}) {
+  const { buttons, onKeyDown, onFocusAt } = useRoving(
+    characters.length,
+    disabled ? null : (index) => onValueChange(characters[index]),
+    { columns: CHARACTER_PICKER_COLUMNS }
+  );
+  const options = characters.map(() => ({ disabled }));
+  const stop = tabStop(options, characters.indexOf(value));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      role: "radiogroup",
+      "aria-label": label,
+      "aria-disabled": disabled || void 0,
+      className: cx("crewlet-character-picker", className),
+      children: characters.map((character, index) => {
+        const chosen = character === value;
+        const { name } = CREWLET_CHARACTER_GEOMETRY[character];
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: (el) => {
+              buttons.current[index] = el;
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": chosen,
+            "aria-label": name,
+            title: name,
+            tabIndex: index === stop ? 0 : -1,
+            disabled,
+            className: cx("crewlet-character-picker__option", chosen && "is-chosen"),
+            onClick: () => onValueChange(character),
+            onFocus: () => onFocusAt(index),
+            onKeyDown: (event) => onKeyDown(event, true),
+            children: /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                kind: "agent",
+                character,
+                hue,
+                size: "lg",
+                ring: chosen ? "brand" : void 0,
+                decorative: true
+              }
+            )
+          },
+          character
+        );
+      })
+    }
+  );
+}
+
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker };

package/dist/{chunk-B47YUQGM.js → chunk-J3IS2TOA.js}

@@ -1,4 +1,4 @@
-import { Avatar } from './chunk-IA232OTU.js';
+import { Avatar } from './chunk-UDW3DAP5.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './OrgLabel-6WSKJQOT.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-6SIG5I72.js → chunk-JB6AN4ZC.js}

@@ -1,6 +1,6 @@
 import { TreeGrid } from './chunk-SX2DFTQV.js';
 import { createTreeModel, treeParent } from './chunk-S3BCVWTU.js';
-import { OrgLabel } from './chunk-B47YUQGM.js';
+import { OrgLabel } from './chunk-J3IS2TOA.js';
 import { AddPill } from './chunk-74WGARJE.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-VCOELPCT.js → chunk-K7OS4O2U.js}

@@ -1,4 +1,4 @@
-import { OrgLabel } from './chunk-B47YUQGM.js';
+import { OrgLabel } from './chunk-J3IS2TOA.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './OrgNode-TCHJH5FO.css';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-N5KCGFWI.js → chunk-LPHHDCN3.js}

@@ -1,9 +1,8 @@
-import { useRoving, tabStop, tabId } from './chunk-DRHXRGB6.js';
+import { tabId } from './chunk-HEOVQZL7.js';
+import { useRoving, tabStop } from './chunk-CBOICT64.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Tabs-BWFQSWY3.css';
-import './SegmentedControl-76HODRBT.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/chunk-OAH4IEQJ.js

@@ -0,0 +1,68 @@
+import { AVATAR_SIZES, Avatar } from './chunk-UDW3DAP5.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Avatar-JAU77SHZ.css';
+import './AvatarStack-GEJBNV7E.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function counted(count, one, many) {
+  return `${count} ${count === 1 ? one : many}`;
+}
+function avatarStackLabel(members) {
+  const humans = members.filter((member) => member.kind === "human").length;
+  const agents = members.length - humans;
+  const agentWords = counted(agents, "agent", "agents");
+  const humanWords = counted(humans, "person", "people");
+  const who = humans === 0 ? agentWords : agents === 0 ? humanWords : `${agentWords} and ${humanWords}`;
+  return `${who}: ${members.map((member) => member.name).join(", ")}`;
+}
+function AvatarStack({
+  members,
+  max = 4,
+  size = "sm",
+  label,
+  decorative = false,
+  className,
+  style,
+  ...rest
+}) {
+  if (!Number.isInteger(max) || max < 1) {
+    throw new RangeError(`AvatarStack max must be a whole number of at least 1; it was ${max}`);
+  }
+  if (members.length === 0) return null;
+  const shown = members.slice(0, max);
+  const overflow = members.length - shown.length;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...rest,
+      className: cx("crewlet-avatar-stack", className),
+      style: { "--crewlet-avatar-stack-size": `${AVATAR_SIZES[size]}px`, ...style },
+      role: decorative ? void 0 : "img",
+      "aria-label": decorative ? void 0 : label ?? avatarStackLabel(members),
+      "aria-hidden": decorative ? true : void 0,
+      children: [
+        shown.map((member) => /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            className: "crewlet-avatar-stack__member",
+            name: member.name,
+            kind: member.kind,
+            src: member.src,
+            ring: member.ring,
+            character: member.character,
+            hue: member.hue,
+            size,
+            decorative: true
+          },
+          member.id ?? member.name
+        )),
+        overflow > 0 ? /* @__PURE__ */ jsxs("span", { className: "crewlet-avatar-stack__member crewlet-avatar-stack__more", "aria-hidden": "true", children: [
+          "+",
+          overflow
+        ] }) : null
+      ]
+    }
+  );
+}
+
+export { AvatarStack, avatarStackLabel };

package/dist/{chunk-IA232OTU.js → chunk-UDW3DAP5.js}

@@ -1,11 +1,11 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './Avatar-XID7Z74C.css';
-import './AvatarStack-GEJBNV7E.css';
 import { useState, useEffect } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { CrewletCharacter } from '@crewlethq/icons/characters';
+import { jsx } from 'react/jsx-runtime';
 
 var AVATAR_SIZES = { xs: 20, sm: 26, md: 32, lg: 40 };
 var AVATAR_CORNER_RATIO = 0.29;
+var AVATAR_CHARACTER_FULL_DETAIL = 56;
 var getInitials = (name) => {
   if (!name) return "?";
   const words = name.trim().split(/[\s\-_.]+/).filter(Boolean);
@@ -40,6 +40,8 @@ var Avatar = ({
   ring,
   decorative = false,
   colorSeed,
+  character,
+  hue,
   className,
   style,
   ...rest
@@ -62,6 +64,31 @@ var Avatar = ({
     ring === void 0 ? null : `crewlet-avatar--ring-${ring}`,
     className
   );
+  if (character !== void 0 && kind === "agent") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...rest,
+        className: cx(
+          classes,
+          "crewlet-avatar--character",
+          hue === void 0 ? "crewlet-avatar--neutral" : `crewlet-avatar--hue-${hue}`
+        ),
+        style: { ...measured, ...style },
+        role: decorative ? void 0 : "img",
+        "aria-hidden": decorative ? true : void 0,
+        "aria-label": decorative ? void 0 : name ? `${name} avatar` : "Avatar",
+        children: /* @__PURE__ */ jsx(
+          CrewletCharacter,
+          {
+            className: "crewlet-avatar__character",
+            character,
+            detail: pixels >= AVATAR_CHARACTER_FULL_DETAIL ? "full" : "compact"
+          }
+        )
+      }
+    );
+  }
   if (src && !imageFailed) {
     return /* @__PURE__ */ jsx(
       "img",
@@ -94,63 +121,5 @@ var Avatar = ({
     }
   );
 };
-function counted(count, one, many) {
-  return `${count} ${count === 1 ? one : many}`;
-}
-function avatarStackLabel(members) {
-  const humans = members.filter((member) => member.kind === "human").length;
-  const agents = members.length - humans;
-  const agentWords = counted(agents, "agent", "agents");
-  const humanWords = counted(humans, "person", "people");
-  const who = humans === 0 ? agentWords : agents === 0 ? humanWords : `${agentWords} and ${humanWords}`;
-  return `${who}: ${members.map((member) => member.name).join(", ")}`;
-}
-function AvatarStack({
-  members,
-  max = 4,
-  size = "sm",
-  label,
-  decorative = false,
-  className,
-  style,
-  ...rest
-}) {
-  if (!Number.isInteger(max) || max < 1) {
-    throw new RangeError(`AvatarStack max must be a whole number of at least 1; it was ${max}`);
-  }
-  if (members.length === 0) return null;
-  const shown = members.slice(0, max);
-  const overflow = members.length - shown.length;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      ...rest,
-      className: cx("crewlet-avatar-stack", className),
-      style: { "--crewlet-avatar-stack-size": `${AVATAR_SIZES[size]}px`, ...style },
-      role: decorative ? void 0 : "img",
-      "aria-label": decorative ? void 0 : label ?? avatarStackLabel(members),
-      "aria-hidden": decorative ? true : void 0,
-      children: [
-        shown.map((member) => /* @__PURE__ */ jsx(
-          Avatar,
-          {
-            className: "crewlet-avatar-stack__member",
-            name: member.name,
-            kind: member.kind,
-            src: member.src,
-            ring: member.ring,
-            size,
-            decorative: true
-          },
-          member.id ?? member.name
-        )),
-        overflow > 0 ? /* @__PURE__ */ jsxs("span", { className: "crewlet-avatar-stack__member crewlet-avatar-stack__more", "aria-hidden": "true", children: [
-          "+",
-          overflow
-        ] }) : null
-      ]
-    }
-  );
-}
 
-export { AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, AvatarStack, avatarCorner, avatarPixels, avatarStackLabel, avatarTint, getInitials };
+export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, avatarCorner, avatarPixels, avatarTint, getInitials };

package/dist/chunk-UI6HWAWE.js

@@ -0,0 +1,2 @@
+import './Tabs-BWFQSWY3.css';
+import './SegmentedControl-76HODRBT.css';

package/dist/{chunk-RHHGLTXJ.js → chunk-X6K6OZ47.js}

@@ -1,5 +1,5 @@
 import { useThemePreference, useDensityPreference } from './chunk-K3OWD7BJ.js';
-import { SegmentedControl } from './chunk-N5KCGFWI.js';
+import { SegmentedControl } from './chunk-LPHHDCN3.js';
 import { SunGlyph, MonitorGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-WSOFKOLP.js → chunk-Y2V3TSQC.js}

@@ -1,4 +1,4 @@
-import { Avatar } from './chunk-IA232OTU.js';
+import { Avatar } from './chunk-UDW3DAP5.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './EntityChip-LUCPZBBG.css';
 import { Children, isValidElement, cloneElement } from 'react';

package/dist/generated/index.d.ts

@@ -9,6 +9,7 @@ export * from '../CalendarGrid/index.js';
 export * from '../Callout/index.js';
 export * from '../Canvas/index.js';
 export * from '../Card/index.js';
+export * from '../CharacterPicker/index.js';
 export * from '../Charts/index.js';
 export * from '../Checkbox/index.js';
 export * from '../CodeBlock/index.js';
@@ -30,6 +31,7 @@ export * from '../ErrorBoundary/index.js';
 export * from '../Eyebrow/index.js';
 export * from '../FilterChip/index.js';
 export * from '../Fullscreen/index.js';
+export * from '../HuePicker/index.js';
 export * from '../IconButton/index.js';
 export * from '../ImageUpload/index.js';
 export * from '../InlineCode/index.js';