@activecollab/components 2.0.440 → 2.0.442

package/dist/cjs/presentation/whiteboard/projectElements.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.taskDisplayName = exports.projectElementTitle = exports.projectClientLabel = exports.projectCardWidth = exports.isProjectTool = exports.groupTasks = exports.groupProjects = exports.TaskElementCard = exports.TASK_CARD_WIDTH = exports.StyledResolving = exports.StyledProjectElementBox = exports.StyledProjectDraft = exports.StyledPlaceholder = exports.StyledLimitedCard = exports.SEEDED_PROJECT_ELEMENT_POSITIONS = exports.SEEDED_PROJECT_ELEMENTS = exports.RESOLVE_MS = exports.ProjectElementPicker = exports.ProjectElementNode = exports.ProjectElementCard = exports.PROJECT_CARD_WIDTH = exports.PLACEHOLDER_MIN_WIDTH = exports.PLACEHOLDER_MIN_HEIGHT = exports.PICKER_PROJECT_LABELS = exports.PICKER_PROJECTS = exports.PICKER_PEOPLE = exports.PICKER_LABELS = exports.LimitedElementCard = exports.LIMITED_ACCESS_MESSAGE = exports.LIMITED_ACCESS_LABEL = exports.INTERNAL_CLIENT_LABEL = void 0;
+exports.taskDisplayName = exports.projectElementTitle = exports.projectClientLabel = exports.projectCardWidth = exports.isProjectTool = exports.groupTasks = exports.groupProjects = exports.clampPersonSize = exports.TaskElementCard = exports.TASK_CARD_WIDTH = exports.StyledResolving = exports.StyledProjectElementBox = exports.StyledProjectDraft = exports.StyledPlaceholder = exports.StyledPersonResolving = exports.StyledPersonPlaceholder = exports.StyledPersonFace = exports.StyledPersonDraft = exports.StyledLimitedCard = exports.SEEDED_PROJECT_ELEMENT_POSITIONS = exports.SEEDED_PROJECT_ELEMENTS = exports.RESOLVE_MS = exports.ProjectElementPicker = exports.ProjectElementNode = exports.ProjectElementCard = exports.PersonElementFace = exports.PROJECT_CARD_WIDTH = exports.PLACEHOLDER_MIN_WIDTH = exports.PLACEHOLDER_MIN_HEIGHT = exports.PICKER_PROJECT_LABELS = exports.PICKER_PROJECTS = exports.PICKER_PEOPLE_LIST = exports.PICKER_PEOPLE = exports.PICKER_LABELS = exports.PERSON_MIN_SIZE = exports.PERSON_MAX_SIZE = exports.PERSON_DEFAULT_SIZE = exports.LimitedElementCard = exports.LIMITED_ACCESS_MESSAGE = exports.LIMITED_ACCESS_LABEL = exports.INTERNAL_CLIENT_LABEL = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _elements = require("./elements");
@@ -21,17 +21,17 @@ var _shared = require("../shared");
 var _content = require("../stackedCard/content");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /* ------------------------------------------------------------------ */
 /* Project elements — placeholder → picker → resolved card             */
 /* ------------------------------------------------------------------ */
@@ -71,9 +71,19 @@ var TASK_CARD_WIDTH = exports.TASK_CARD_WIDTH = 260;
 
 /* How long the "details are being resolved from the backend" flash lasts. */
 var RESOLVE_MS = exports.RESOLVE_MS = 480;
-/** True for the two board tools this module owns. */
+/** True for the three board tools this module owns. */
 var isProjectTool = exports.isProjectTool = function isProjectTool(tool) {
-  return tool === "project" || tool === "task";
+  return tool === "project" || tool === "task" || tool === "person";
+};
+
+/* A person is not a card: a square whose width IS its height, so the avatar
+   circle stays a circle. The drawn width is its side, clamped to these bounds —
+   the same 1:1 lock the app enforces on the canvas grip and in the Inspector. */
+var PERSON_DEFAULT_SIZE = exports.PERSON_DEFAULT_SIZE = 96;
+var PERSON_MIN_SIZE = exports.PERSON_MIN_SIZE = 48;
+var PERSON_MAX_SIZE = exports.PERSON_MAX_SIZE = 240;
+var clampPersonSize = exports.clampPersonSize = function clampPersonSize(size) {
+  return Math.min(PERSON_MAX_SIZE, Math.max(PERSON_MIN_SIZE, Math.round(size)));
 };
 
 /* ------------------------------------------------------------------ */
@@ -138,6 +148,21 @@ var PICKER_PEOPLE = exports.PICKER_PEOPLE = {
   }
 };
 
+/* The People picker's one flat list: everyone the board knows, by name, with
+   no company or project layer — a person chip points at a user, not at a
+   membership. The record key doubles as the row id. */
+var PICKER_PEOPLE_LIST = exports.PICKER_PEOPLE_LIST = Object.entries(PICKER_PEOPLE).map(function (_ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+    id = _ref2[0],
+    person = _ref2[1];
+  return {
+    id,
+    person
+  };
+}).sort(function (a, b) {
+  return a.person.name.localeCompare(b.person.name);
+});
+
 /* Label colours are data too: they are the label's own colour in the app. */
 var PICKER_LABELS = exports.PICKER_LABELS = {
   assigned: {
@@ -450,6 +475,10 @@ var projectElementTitle = exports.projectElementTitle = function projectElementT
   if (element.limited) {
     return LIMITED_ACCESS_LABEL;
   }
+  if (element.kind === "person") {
+    var _element$person$name, _element$person;
+    return (_element$person$name = (_element$person = element.person) === null || _element$person === void 0 ? void 0 : _element$person.name) !== null && _element$person$name !== void 0 ? _element$person$name : "Person";
+  }
   if (element.kind === "project") {
     var _element$project$name, _element$project;
     return (_element$project$name = (_element$project = element.project) === null || _element$project === void 0 ? void 0 : _element$project.name) !== null && _element$project$name !== void 0 ? _element$project$name : "Project";
@@ -483,7 +512,8 @@ var SEEDED = [{
     status: "resolved",
     limited: true,
     project: null,
-    task: null
+    task: null,
+    person: null
   },
   x: 120,
   y: 200
@@ -496,7 +526,8 @@ var SEEDED = [{
     status: "resolved",
     limited: true,
     project: null,
-    task: null
+    task: null,
+    person: null
   },
   x: 120,
   y: 380
@@ -522,7 +553,7 @@ var SEEDED_PROJECT_ELEMENT_POSITIONS = exports.SEEDED_PROJECT_ELEMENT_POSITIONS
 var StyledProjectElementBox = exports.StyledProjectElementBox = (0, _styledComponents.default)(_elements.StyledCanvasElement).withConfig({
   displayName: "projectElements__StyledProjectElementBox",
   componentId: "sc-1cayxi5-0"
-})(["border-radius:8px;transition:width 160ms ease;&.limited{cursor:not-allowed;}"]);
+})(["border-radius:8px;transition:width 160ms ease;&.limited{cursor:not-allowed;}&.person{border-radius:50%;}"]);
 
 /* The rubber band and the armed tool's hover preview — the same blue dashed
    box the link tool draws, so the gesture reads as one board convention. */
@@ -531,18 +562,44 @@ var StyledProjectDraft = exports.StyledProjectDraft = _styledComponents.default.
   componentId: "sc-1cayxi5-1"
 })(["position:absolute;box-sizing:border-box;border:1.5px dashed ", ";border-radius:8px;background-color:rgba(59,130,246,0.08);pointer-events:none;"], _elements.SELECTION_BLUE);
 
+/* The person rubber band and hover preview: the same dashed blue, round. */
+var StyledPersonDraft = exports.StyledPersonDraft = (0, _styledComponents.default)(StyledProjectDraft).withConfig({
+  displayName: "projectElements__StyledPersonDraft",
+  componentId: "sc-1cayxi5-2"
+})(["border-radius:50%;"]);
+
 /* The placeholder that waits for the picker's answer. Card-like on purpose:
    rounded, dashed, tinted — a card-shaped hole, not a selection marquee. */
 var StyledPlaceholder = exports.StyledPlaceholder = _styledComponents.default.div.withConfig({
   displayName: "projectElements__StyledPlaceholder",
-  componentId: "sc-1cayxi5-2"
+  componentId: "sc-1cayxi5-3"
 })(["box-sizing:border-box;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:12px;border:1.5px dashed var(--border-primary);border-radius:8px;background-color:var(--color-theme-200);user-select:none;"]);
 
+/* A person's placeholder is the circle its avatar will fill — dashed and
+   tinted like the card placeholder, with the person glyph where the face will
+   be, so the pick swaps one circle for another without a change of shape. */
+var StyledPersonPlaceholder = exports.StyledPersonPlaceholder = (0, _styledComponents.default)(StyledPlaceholder).withConfig({
+  displayName: "projectElements__StyledPersonPlaceholder",
+  componentId: "sc-1cayxi5-4"
+})(["border-radius:50%;padding:0;color:var(--color-theme-600);svg{width:40%;height:40%;fill:currentColor;}"]);
+var StyledPersonResolving = exports.StyledPersonResolving = _styledComponents.default.div.withConfig({
+  displayName: "projectElements__StyledPersonResolving",
+  componentId: "sc-1cayxi5-5"
+})(["width:100%;height:100%;border-radius:50%;overflow:hidden;.c-loader{width:100%;height:100%;border-radius:50%;}"]);
+
+/* The resolved chip. The avatar fills the element's square and the name hangs
+   below it, outside the box: the circle is the whole footprint the board
+   measures, so the caption never changes the element's size. */
+var StyledPersonFace = exports.StyledPersonFace = _styledComponents.default.div.withConfig({
+  displayName: "projectElements__StyledPersonFace",
+  componentId: "sc-1cayxi5-6"
+})(["position:relative;width:100%;height:100%;border-radius:50%;user-select:none;.person-avatar{width:100%;height:100%;}.person-name{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;white-space:nowrap;}"]);
+
 /* The resolving flash: the placeholder's box, with the card's rows sketched in
    so the swap to the real card does not read as a different element. */
 var StyledResolving = exports.StyledResolving = (0, _styledComponents.default)(StyledPlaceholder).withConfig({
   displayName: "projectElements__StyledResolving",
-  componentId: "sc-1cayxi5-3"
+  componentId: "sc-1cayxi5-7"
 })(["flex-direction:column;align-items:stretch;justify-content:center;gap:10px;.c-loader{height:12px;}"]);
 
 /**
@@ -564,8 +621,8 @@ var StyledResolving = exports.StyledResolving = (0, _styledComponents.default)(S
  */
 var StyledLimitedCard = exports.StyledLimitedCard = _styledComponents.default.div.withConfig({
   displayName: "projectElements__StyledLimitedCard",
-  componentId: "sc-1cayxi5-4"
-})(["box-sizing:border-box;width:100%;height:100%;min-height:96px;display:flex;align-items:center;justify-content:center;padding:12px;border:1px solid var(--border-primary);border-radius:8px;background-color:var(--muted-surface);background-image:repeating-linear-gradient( -45deg,transparent,transparent 5px,var(--stripe-pattern) 5px,var(--stripe-pattern) 5.7px );color:var(--muted-surface-text);cursor:not-allowed;user-select:none;.limited-label{color:var(--muted-surface-text);}"]);
+  componentId: "sc-1cayxi5-8"
+})(["box-sizing:border-box;width:100%;height:100%;min-height:96px;display:flex;align-items:center;justify-content:center;padding:12px;border:1px solid var(--border-primary);border-radius:8px;background-color:var(--muted-surface);background-image:repeating-linear-gradient( -45deg,transparent,transparent 5px,var(--stripe-pattern) 5px,var(--stripe-pattern) 5.7px );color:var(--muted-surface-text);cursor:not-allowed;user-select:none;.limited-label{color:var(--muted-surface-text);}&.round{border-radius:50%;min-height:0;}"]);
 
 /**
  * Both resolved faces are the design system's `StackedCard` — the same shell the
@@ -578,7 +635,7 @@ var StyledLimitedCard = exports.StyledLimitedCard = _styledComponents.default.di
  */
 var StyledEntityCard = (0, _styledComponents.default)(_StackedCard.StackedCard).withConfig({
   displayName: "projectElements__StyledEntityCard",
-  componentId: "sc-1cayxi5-5"
+  componentId: "sc-1cayxi5-9"
 })(["&&{width:100%;}user-select:none;"]);
 /**
  * The task face — the shared `TaskCard`, with the project line switched on.
@@ -593,11 +650,11 @@ var StyledEntityCard = (0, _styledComponents.default)(_StackedCard.StackedCard).
  * The title is the app's own display name (`#123: Name`, `taskDisplayName`), so
  * the card's separate task-number prefix stays off.
  */
-var TaskElementCard = exports.TaskElementCard = function TaskElementCard(_ref) {
+var TaskElementCard = exports.TaskElementCard = function TaskElementCard(_ref3) {
   var _task$subtasks, _task$comments, _task$date;
-  var project = _ref.project,
-    task = _ref.task,
-    selected = _ref.selected;
+  var project = _ref3.project,
+    task = _ref3.task,
+    selected = _ref3.selected;
   return /*#__PURE__*/_react.default.createElement(StyledEntityCard, {
     selected: selected
   }, /*#__PURE__*/_react.default.createElement(_content.TaskCard, {
@@ -622,9 +679,9 @@ var TaskElementCard = exports.TaskElementCard = function TaskElementCard(_ref) {
  * right. No progress indicator, and no row at all when the project has neither a
  * leader nor a label.
  */
-var ProjectElementCard = exports.ProjectElementCard = function ProjectElementCard(_ref2) {
-  var project = _ref2.project,
-    selected = _ref2.selected;
+var ProjectElementCard = exports.ProjectElementCard = function ProjectElementCard(_ref4) {
+  var project = _ref4.project,
+    selected = _ref4.selected;
   return /*#__PURE__*/_react.default.createElement(StyledEntityCard, {
     selected: selected
   }, /*#__PURE__*/_react.default.createElement(_content.ProjectCard, {
@@ -650,25 +707,74 @@ var ProjectElementCard = exports.ProjectElementCard = function ProjectElementCar
  * not the entity's identity — the opposite of the tooltip Workload disables on
  * a limited event, which would have leaked the name.
  */
-var LimitedElementCard = exports.LimitedElementCard = function LimitedElementCard() {
+var LimitedElementCard = exports.LimitedElementCard = function LimitedElementCard(_ref5) {
+  var _ref5$round = _ref5.round,
+    round = _ref5$round === void 0 ? false : _ref5$round;
   return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
     title: LIMITED_ACCESS_MESSAGE
   }, /*#__PURE__*/_react.default.createElement(StyledLimitedCard, {
-    "data-testid": "wb-limited-card"
+    "data-testid": "wb-limited-card",
+    className: round ? "round" : undefined
   }, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
     weight: "bold",
     className: "limited-label"
   }, LIMITED_ACCESS_LABEL)));
 };
+/**
+ * The person face — an avatar circle with a name caption. Always a chip: never
+ * a StackedCard, it never expands, no hover card, no online-status dot. The
+ * initials avatar stands in for the server-rendered avatar, as it does on the
+ * cards.
+ */
+var PersonElementFace = exports.PersonElementFace = function PersonElementFace(_ref6) {
+  var person = _ref6.person,
+    size = _ref6.size;
+  return /*#__PURE__*/_react.default.createElement(StyledPersonFace, {
+    "data-testid": "wb-person-face"
+  }, /*#__PURE__*/_react.default.createElement(_shared.RoundAvatar, {
+    className: "person-avatar",
+    $bg: person.color,
+    $size: size,
+    $bordered: false,
+    style: {
+      fontSize: Math.round(size * 0.28)
+    },
+    "aria-label": person.name
+  }, person.initials), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    weight: "bold",
+    className: "person-name"
+  }, person.name));
+};
 
 /** One board element, in whichever of its three states it currently is. */
-var ProjectElementNode = exports.ProjectElementNode = function ProjectElementNode(_ref3) {
-  var element = _ref3.element,
-    selected = _ref3.selected;
+var ProjectElementNode = exports.ProjectElementNode = function ProjectElementNode(_ref7) {
+  var element = _ref7.element,
+    selected = _ref7.selected;
   /* Checked before anything else: a limited element must never be able to fall
      through to a branch that renders entity data. */
   if (element.limited) {
-    return /*#__PURE__*/_react.default.createElement(LimitedElementCard, null);
+    return /*#__PURE__*/_react.default.createElement(LimitedElementCard, {
+      round: element.kind === "person"
+    });
+  }
+
+  /* A person is the board's second non-card render: every state is a circle. */
+  if (element.kind === "person") {
+    if (element.status === "placeholder") {
+      return /*#__PURE__*/_react.default.createElement(StyledPersonPlaceholder, {
+        "aria-label": "Pick a person"
+      }, /*#__PURE__*/_react.default.createElement(_Icons.PersonIcon, null));
+    }
+    if (element.status === "resolving") {
+      return /*#__PURE__*/_react.default.createElement(StyledPersonResolving, null, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, null));
+    }
+    if (element.person) {
+      return /*#__PURE__*/_react.default.createElement(PersonElementFace, {
+        person: element.person,
+        size: element.width
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(StyledPersonPlaceholder, null);
   }
   if (element.status === "placeholder") {
     return /*#__PURE__*/_react.default.createElement(StyledPlaceholder, null, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
@@ -716,30 +822,31 @@ var ProjectElementNode = exports.ProjectElementNode = function ProjectElementNod
    share: the portal, the overlay, the focus lock and the Esc handler. */
 var StyledPickerPanel = (0, _styledComponents.default)(_Paper.Paper).withConfig({
   displayName: "projectElements__StyledPickerPanel",
-  componentId: "sc-1cayxi5-6"
+  componentId: "sc-1cayxi5-10"
 })(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;width:470px;max-width:calc(100vw - 32px);max-height:70vh;overflow:hidden;&&{border-radius:12px;border:1px solid var(--border-primary);box-shadow:0 18px 48px rgba(0,0,0,0.24);}"]);
 
 /* Search + adornments, mirroring `Select`'s own form row: the back arrow is a
    start adornment (TaskList), the group-by sort a end adornment (ProjectList). */
 var StyledPickerHeader = _styledComponents.default.div.withConfig({
   displayName: "projectElements__StyledPickerHeader",
-  componentId: "sc-1cayxi5-7"
+  componentId: "sc-1cayxi5-11"
 })(["display:flex;align-items:center;gap:8px;flex-shrink:0;padding:12px 12px 8px;.picker-search{width:100%;border-radius:8px;}.picker-search:focus-within{border-color:var(--color-primary);outline:1px solid var(--color-primary);}"]);
 var StyledPickerList = _styledComponents.default.div.withConfig({
   displayName: "projectElements__StyledPickerList",
-  componentId: "sc-1cayxi5-8"
+  componentId: "sc-1cayxi5-12"
 })(["flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 0 12px;.picker-group-header{box-sizing:border-box;height:36px;display:flex;align-items:center;padding:0 20px;margin-top:4px;}.picker-empty{padding:24px 20px;text-align:center;}"]);
 
 /* A generously spaced row: the name on the left, an empty radio on the right —
    the shape `Select` gives a single-choice option, at picker scale. */
 var StyledPickerRow = _styledComponents.default.div.withConfig({
   displayName: "projectElements__StyledPickerRow",
-  componentId: "sc-1cayxi5-9"
-})(["box-sizing:border-box;height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;cursor:pointer;outline:none;&:hover,&:focus-visible{background-color:var(--color-theme-200);}.row-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.c-radio-btn{flex-shrink:0;}"]);
-var PickerRow = function PickerRow(_ref4) {
-  var id = _ref4.id,
-    name = _ref4.name,
-    onSelect = _ref4.onSelect;
+  componentId: "sc-1cayxi5-13"
+})(["box-sizing:border-box;height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;cursor:pointer;outline:none;&:hover,&:focus-visible{background-color:var(--color-theme-200);}.row-lead{display:flex;align-items:center;gap:12px;min-width:0;}.row-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.c-radio-btn{flex-shrink:0;}"]);
+var PickerRow = function PickerRow(_ref8) {
+  var id = _ref8.id,
+    name = _ref8.name,
+    avatar = _ref8.avatar,
+    onSelect = _ref8.onSelect;
   return /*#__PURE__*/_react.default.createElement(StyledPickerRow, {
     role: "button",
     tabIndex: 0,
@@ -751,23 +858,31 @@ var PickerRow = function PickerRow(_ref4) {
       }
     }
   }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "row-lead"
+  }, avatar ? /*#__PURE__*/_react.default.createElement(_shared.RoundAvatar, {
+    $bg: avatar.color,
+    $size: 24,
+    $bordered: false
+  }, avatar.initials) : null, /*#__PURE__*/_react.default.createElement("span", {
     className: "row-name"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.Body2, null, name)), /*#__PURE__*/_react.default.createElement(_RadioButton.RadioButton, {
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Body2, null, name))), /*#__PURE__*/_react.default.createElement(_RadioButton.RadioButton, {
     id: "wb-picker-".concat(id),
     tabIndex: -1
   }));
 };
 /**
- * One picker, two flows — the same split the app makes between
- * `MenuSelector/ProjectList` (one step) and `ProjectTaskMenuSelector` (project,
- * then task). The task flow deliberately drops the app's "Directly on project"
- * default option: a task card has to be a task.
+ * One picker, three flows — the same split the app makes between
+ * `MenuSelector/ProjectList` (one step), `ProjectTaskMenuSelector` (project,
+ * then task) and the flat People list (one step, no grouping). The task flow
+ * deliberately drops the app's "Directly on project" default option: a task
+ * card has to be a task.
  */
-var ProjectElementPicker = exports.ProjectElementPicker = function ProjectElementPicker(_ref5) {
-  var kind = _ref5.kind,
-    onSelectProject = _ref5.onSelectProject,
-    onSelectTask = _ref5.onSelectTask,
-    onCancel = _ref5.onCancel;
+var ProjectElementPicker = exports.ProjectElementPicker = function ProjectElementPicker(_ref9) {
+  var kind = _ref9.kind,
+    onSelectProject = _ref9.onSelectProject,
+    onSelectTask = _ref9.onSelectTask,
+    onSelectPerson = _ref9.onSelectPerson,
+    onCancel = _ref9.onCancel;
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
     project = _useState2[0],
@@ -783,6 +898,7 @@ var ProjectElementPicker = exports.ProjectElementPicker = function ProjectElemen
      gesture that created it. */
   var pressedInsideRef = (0, _react.useRef)(false);
   var onTaskStep = kind === "task" && project !== null;
+  var onPeopleStep = kind === "person";
   var projectGroups = (0, _react.useMemo)(function () {
     return groupProjects(PICKER_PROJECTS.filter(function (entry) {
       return matchesQuery(entry.name, query);
@@ -805,7 +921,14 @@ var ProjectElementPicker = exports.ProjectElementPicker = function ProjectElemen
     setProject(null);
     setQuery("");
   };
-  var isEmpty = onTaskStep ? taskGroups.length === 0 : projectGroups.length === 0;
+  var people = (0, _react.useMemo)(function () {
+    return PICKER_PEOPLE_LIST.filter(function (entry) {
+      return matchesQuery(entry.person.name, query);
+    });
+  }, [query]);
+  var isEmpty = onPeopleStep ? people.length === 0 : onTaskStep ? taskGroups.length === 0 : projectGroups.length === 0;
+  var searchPlaceholder = onPeopleStep ? "Search a person" : onTaskStep ? "Search a task" : "Search a project";
+  var emptyLabel = onPeopleStep ? "No people" : onTaskStep ? "No Result" : "No Projects";
   return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     open: true,
     onClose: onCancel,
@@ -831,11 +954,11 @@ var ProjectElementPicker = exports.ProjectElementPicker = function ProjectElemen
     className: "picker-search",
     autoFocus: true,
     value: query,
-    placeholder: onTaskStep ? "Search a task" : "Search a project",
+    placeholder: searchPlaceholder,
     onChange: function onChange(event) {
       return setQuery(event.target.value);
     }
-  }), onTaskStep ? null : /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+  }), onTaskStep || onPeopleStep ? null : /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
     title: "Group by"
   }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
     type: "button",
@@ -844,7 +967,19 @@ var ProjectElementPicker = exports.ProjectElementPicker = function ProjectElemen
     className: "picker-empty"
   }, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
     color: "tertiary"
-  }, onTaskStep ? "No Result" : "No Projects")) : null, onTaskStep && project ? taskGroups.map(function (group) {
+  }, emptyLabel)) : null, onPeopleStep ? people.map(function (_ref0) {
+    var id = _ref0.id,
+      person = _ref0.person;
+    return /*#__PURE__*/_react.default.createElement(PickerRow, {
+      key: id,
+      id: id,
+      name: person.name,
+      avatar: person,
+      onSelect: function onSelect() {
+        return onSelectPerson(person);
+      }
+    });
+  }) : null, onTaskStep && project ? taskGroups.map(function (group) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: group.taskList
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -861,7 +996,7 @@ var ProjectElementPicker = exports.ProjectElementPicker = function ProjectElemen
         }
       });
     }));
-  }) : null, onTaskStep ? null : projectGroups.map(function (group) {
+  }) : null, onTaskStep || onPeopleStep ? null : projectGroups.map(function (group) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: group.client
     }, /*#__PURE__*/_react.default.createElement("div", {