@activecollab/components 2.0.440 → 2.0.442

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

@@ -62,9 +62,10 @@ var TOOL_HINTS = exports.TOOL_HINTS = {
   roundedRectangle: "Click to drop a default rectangle, or draw one to size. Press R for a rectangle.",
   triangle: "Click to drop a default triangle, or draw one to size. Press Y for a triangle.",
   connector: "Drag from one element to another to connect them. Press C to connect.",
-  projectElements: "Put a task or a project on the board — pick which above, then draw its card.",
+  projectElements: "Put a task, a project or a person on the board — pick which above, then draw it.",
   project: "Draw a box to place a project card, then pick the project it shows.",
   task: "Draw a box to place a task card, then pick the task it shows.",
+  person: "Draw a circle to place a person, then pick who it shows.",
   link: "Draw a box to place a link, or paste a URL anywhere. Press L for link.",
   file: "Draw a box to place a file, or drop one on the board. Press F for file.",
   sticky: "Click anywhere on the canvas to drop a sticky note. Press S for a sticky note.",
@@ -172,7 +173,7 @@ var BottomDock = exports.BottomDock = function BottomDock(_ref2) {
      the pill for free — another dock tool, Esc on the canvas, or the gesture
      finishing and disarming the tool. Two states could disagree; one cannot. */
   var shapesOpen = isShapeTool(activeTool);
-  var projectElementsOpen = activeTool === "task" || activeTool === "project";
+  var projectElementsOpen = activeTool === "task" || activeTool === "project" || activeTool === "person";
   return /*#__PURE__*/_react.default.createElement(StyledBottomDock, null, shapesOpen ? /*#__PURE__*/_react.default.createElement(StyledToolPill, null, /*#__PURE__*/_react.default.createElement(ToolButton, _extends({
     tip: "Circle",
     active: activeTool === "circle",
@@ -203,7 +204,13 @@ var BottomDock = exports.BottomDock = function BottomDock(_ref2) {
     onClick: function onClick() {
       return onToolChange("project");
     }
-  }, hoverProps("project")), /*#__PURE__*/_react.default.createElement(_Icons.ProjectIcon, null))) : null, /*#__PURE__*/_react.default.createElement(ToolSurface, null, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+  }, hoverProps("project")), /*#__PURE__*/_react.default.createElement(_Icons.ProjectIcon, null)), /*#__PURE__*/_react.default.createElement(ToolButton, _extends({
+    tip: "User",
+    active: activeTool === "person",
+    onClick: function onClick() {
+      return onToolChange("person");
+    }
+  }, hoverProps("person")), /*#__PURE__*/_react.default.createElement(_Icons.PersonIcon, null))) : null, /*#__PURE__*/_react.default.createElement(ToolSurface, null, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
     title: "Sticky Note"
   }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, _extends({
     variant: "text gray",

package/dist/cjs/presentation/whiteboard/bottomDock.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottomDock.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_IconButton","_Icons","_Tooltip","_Typography","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","a","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","l","Symbol","iterator","u","next","done","push","value","return","isArray","ToolSurface","exports","styled","div","withConfig","displayName","componentId","verticalDivider","StyledBottomDock","StyledToolPill","StyledHint","Caption1","TOOL_HINTS","circle","roundedRectangle","triangle","connector","projectElements","project","task","link","file","sticky","text","draw","shapes","SHAPE_TOOLS","isShapeTool","tool","includes","DEFAULT_SHAPE_TOOL","DEFAULT_PROJECT_ELEMENT_TOOL","SHAPE_DEFAULT_SIZES","width","height","CARD_PREVIEW_HEIGHT","ToolButton","_ref","tip","active","children","onClick","onMouseEnter","onMouseLeave","createElement","Tooltip","title","IconButton","variant","BottomDock","_ref2","activeTool","onToolChange","_useState","useState","_useState2","hoverHint","setHoverHint","hoverProps","hint","shapesOpen","projectElementsOpen","CircleIcon","RoundedRectangleIcon","TriangleIcon","TaskIcon","ProjectIcon","NoteIcon","TextIcon","DrawIcon","ShapesIcon","ConnectionIcon","ProjectStarIcon","InsertLinkIcon","AttachmentIcon","color","className","undefined"],"sources":["../../../../src/presentation/whiteboard/bottomDock.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode, useState } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { IconButton } from \"../../components/IconButton\";\nimport {\n  AttachmentIcon,\n  CircleIcon,\n  ConnectionIcon,\n  DrawIcon,\n  InsertLinkIcon,\n  ProjectIcon,\n  ProjectStarIcon,\n  RoundedRectangleIcon,\n  ShapesIcon,\n  NoteIcon,\n  TaskIcon,\n  TextIcon,\n  TriangleIcon,\n} from \"../../components/Icons\";\nimport { Tooltip } from \"../../components/Tooltip\";\nimport { Caption1 } from \"../../components/Typography\";\n\n/* ------------------------------------------------------------------ */\n/* Floating toolbar surfaces                                           */\n/* ------------------------------------------------------------------ */\n\n/* A floating, rounded toolbar surface (paper + shadow). */\nexport const ToolSurface = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 6px;\n  border-radius: 14px;\n  background-color: var(--page-paper-main);\n  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);\n  border: 1px solid var(--border-primary);\n\n  /* A DS button colours its icon by declaring svg { fill: currentColor }, so\n     every FILLED glyph follows the button's active and hover states for free.\n     Three glyphs here are not filled: RoundedRectangleIcon and TriangleIcon are\n     outlines with a stroke of var(--color-theme-600) baked into the path, and\n     ProjectIcon draws its ruler as a stroked rect. Nothing about the button\n     could ever reach them — an armed rectangle stayed exactly as grey as an\n     unarmed one. This extends the same currentColor contract to a declared\n     stroke.\n\n     Scoped to direct children and to shapes inside a <g>, NOT to every\n     descendant: ProjectIcon cuts its ruler with a <mask> whose <line> is\n     stroked BLACK on purpose. In a mask only luminance matters, so recolouring\n     that line would turn a clean diagonal cut into a half-transparent smear. */\n  svg > [stroke],\n  svg > g [stroke] {\n    stroke: currentColor;\n  }\n`;\n\n/* vertical separator used inside the toolbars */\nexport const verticalDivider = `\n  .divider {\n    width: 1px;\n    height: 24px;\n    background-color: var(--color-theme-400);\n    margin: 0 6px;\n    flex-shrink: 0;\n  }\n`;\n\nexport const StyledBottomDock = styled.div`\n  position: absolute;\n  left: 50%;\n  bottom: 18px;\n  transform: translateX(-50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  max-width: calc(100% - 32px);\n`;\n\n/**\n * The floating second toolbar row — a small pill above the dock that holds the\n * members of one tool family (Circle / Rectangle / Triangle, or Task / Project).\n *\n * It is the same surface as the dock itself, so a family reads as an extension\n * of the button that opened it rather than as a different kind of UI. Only one\n * pill is ever up, because only one tool is ever armed.\n */\nexport const StyledToolPill = styled(ToolSurface)``;\n\n/* Reserve two Caption1 lines (2 × 16px) so showing/hiding the hint never\n   shifts the dock; visibility keeps the reserved space when hidden. */\nexport const StyledHint = styled(Caption1)`\n  text-align: center;\n  padding: 0 16px;\n  min-height: 32px;\n\n  &.hint-hidden {\n    visibility: hidden;\n  }\n`;\n\n/* Per-tool hint shown under the dock only while that tool is hovered. */\nexport const TOOL_HINTS = {\n  circle:\n    \"Click to drop a default circle, or draw one to size. Press O for a circle.\",\n  roundedRectangle:\n    \"Click to drop a default rectangle, or draw one to size. Press R for a rectangle.\",\n  triangle:\n    \"Click to drop a default triangle, or draw one to size. Press Y for a triangle.\",\n  connector:\n    \"Drag from one element to another to connect them. Press C to connect.\",\n  projectElements:\n    \"Put a task or a project on the board — pick which above, then draw its card.\",\n  project:\n    \"Draw a box to place a project card, then pick the project it shows.\",\n  task: \"Draw a box to place a task card, then pick the task it shows.\",\n  link: \"Draw a box to place a link, or paste a URL anywhere. Press L for link.\",\n  file: \"Draw a box to place a file, or drop one on the board. Press F for file.\",\n  sticky:\n    \"Click anywhere on the canvas to drop a sticky note. Press S for a sticky note.\",\n  text: \"Click anywhere on the canvas to start typing. Press T for text.\",\n  draw: \"Click and drag to draw freehand. Press D for the pen.\",\n  shapes:\n    \"Pick a shape above, then draw it on the board. Press R for a rectangle.\",\n} as const;\n\nexport type ToolHintKey = keyof typeof TOOL_HINTS;\n\nexport type ShapeTool = \"circle\" | \"roundedRectangle\" | \"triangle\";\n\n/**\n * The armed board tool. Link, File, Project, Task and the three shapes are\n * wired — arming one turns the next canvas click into \"drop the default-size\n * element here\" and a drag into \"draw one this big\"; everything else stays a\n * mock, so the board is otherwise always in select mode.\n */\nexport type BoardTool =\n  | \"select\"\n  | \"link\"\n  | \"file\"\n  | \"project\"\n  | \"task\"\n  | ShapeTool;\n\nexport const SHAPE_TOOLS: readonly ShapeTool[] = [\n  \"circle\",\n  \"roundedRectangle\",\n  \"triangle\",\n];\n\nexport const isShapeTool = (tool: BoardTool): tool is ShapeTool =>\n  (SHAPE_TOOLS as readonly string[]).includes(tool);\n\n/**\n * What a dock button arms the instant its pill opens.\n *\n * Opening a family and choosing inside it are two separate decisions, and the\n * second one has a right answer often enough that asking for it every time is\n * just a toll: a shape is usually a rectangle, and the thing people put on a\n * board is usually a task. So the pill opens with that member already armed and\n * the gesture can start immediately — picking another member is a correction,\n * not a required step.\n */\nexport const DEFAULT_SHAPE_TOOL: ShapeTool = \"roundedRectangle\";\nexport const DEFAULT_PROJECT_ELEMENT_TOOL: BoardTool = \"task\";\n\n/* What a plain click drops — mirrors DEFAULT_SHAPE_SIZES in\n   new-activecollab-front, and is exactly what the hover preview promises. */\nexport const SHAPE_DEFAULT_SIZES: Record<\n  ShapeTool,\n  { width: number; height: number }\n> = {\n  roundedRectangle: { width: 100, height: 60 },\n  circle: { width: 80, height: 80 },\n  triangle: { width: 80, height: 80 },\n};\n\n/* Cards are auto-height, so their hover preview uses the app's nominal wire\n   height (DEFAULT_LINK_CARD_SIZE / DEFAULT_FILE_CARD_SIZE). */\nexport const CARD_PREVIEW_HEIGHT = 240;\n\n/** The kinds of card the draw gesture can place. */\nexport type DrawableTool = Exclude<BoardTool, \"select\">;\n\nexport interface ToolButtonProps {\n  tip: string;\n  active?: boolean;\n  children: ReactNode;\n  onClick?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n}\n\nexport const ToolButton = ({\n  tip,\n  active,\n  children,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n}: ToolButtonProps): ReactElement => (\n  <Tooltip title={tip}>\n    <IconButton\n      variant=\"text gray\"\n      active={active}\n      onClick={onClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {children}\n    </IconButton>\n  </Tooltip>\n);\n\nexport interface BottomDockProps {\n  activeTool: BoardTool;\n  onToolChange: (tool: BoardTool) => void;\n}\n\n/* Bottom-centre tool dock: the family pill (when one is open), the main\n   toolbar, and the shared hint line. The dock is anchored by its BOTTOM edge,\n   so a pill appearing or disappearing grows the stack upwards and never moves\n   the toolbar itself. */\nexport const BottomDock = ({\n  activeTool,\n  onToolChange,\n}: BottomDockProps): ReactElement => {\n  const [hoverHint, setHoverHint] = useState<string | null>(null);\n\n  const hoverProps = (tool: ToolHintKey): Record<string, () => void> => ({\n    onMouseEnter: () => setHoverHint(TOOL_HINTS[tool]),\n    onMouseLeave: () => setHoverHint(null),\n  });\n\n  /* An armed tool keeps its hint up after the pointer leaves the dock — the\n     gesture happens on the canvas, so that is exactly when the instruction is\n     needed. */\n  const hint =\n    hoverHint ?? (activeTool === \"select\" ? null : TOOL_HINTS[activeTool]);\n\n  /* Which pill is up. Both are DERIVED from the armed tool rather than kept as\n     their own open/closed state: opening a pill always arms one of its members,\n     so \"a member of this family is armed\" and \"this pill is showing\" are the\n     same fact. Deriving it is what makes every way of leaving the family close\n     the pill for free — another dock tool, Esc on the canvas, or the gesture\n     finishing and disarming the tool. Two states could disagree; one cannot. */\n  const shapesOpen = isShapeTool(activeTool);\n  const projectElementsOpen = activeTool === \"task\" || activeTool === \"project\";\n\n  return (\n    <StyledBottomDock>\n      {/* Shapes pill — hidden until the Shape dock button opens it. Inside a\n          pill a click is a plain choice, never a toggle off: the dock button is\n          what closes the family, so clicking the armed shape again must not\n          make the row that is being used disappear. */}\n      {shapesOpen ? (\n        <StyledToolPill>\n          <ToolButton\n            tip=\"Circle\"\n            active={activeTool === \"circle\"}\n            onClick={() => onToolChange(\"circle\")}\n            {...hoverProps(\"circle\")}\n          >\n            <CircleIcon />\n          </ToolButton>\n          <ToolButton\n            tip=\"Rectangle\"\n            active={activeTool === \"roundedRectangle\"}\n            onClick={() => onToolChange(\"roundedRectangle\")}\n            {...hoverProps(\"roundedRectangle\")}\n          >\n            <RoundedRectangleIcon />\n          </ToolButton>\n          <ToolButton\n            tip=\"Triangle\"\n            active={activeTool === \"triangle\"}\n            onClick={() => onToolChange(\"triangle\")}\n            {...hoverProps(\"triangle\")}\n          >\n            <TriangleIcon />\n          </ToolButton>\n        </StyledToolPill>\n      ) : null}\n\n      {/* Project Elements pill — the same surface, the same button size and\n          spacing, in the same slot above the dock. Task comes first because it\n          is what the button arms by default. */}\n      {projectElementsOpen ? (\n        <StyledToolPill>\n          <ToolButton\n            tip=\"Task\"\n            active={activeTool === \"task\"}\n            onClick={() => onToolChange(\"task\")}\n            {...hoverProps(\"task\")}\n          >\n            <TaskIcon />\n          </ToolButton>\n          <ToolButton\n            tip=\"Project\"\n            active={activeTool === \"project\"}\n            onClick={() => onToolChange(\"project\")}\n            {...hoverProps(\"project\")}\n          >\n            <ProjectIcon />\n          </ToolButton>\n        </StyledToolPill>\n      ) : null}\n\n      <ToolSurface>\n        {/* The tools that are still mocks arm nothing — but they do DISARM, so\n            reaching for one closes whatever pill is up and ends the gesture the\n            board was waiting for. A dead button that also leaves the previous\n            tool armed would be the confusing half of \"not implemented yet\". */}\n        <Tooltip title=\"Sticky Note\">\n          <IconButton\n            variant=\"text gray\"\n            onClick={() => onToolChange(\"select\")}\n            {...hoverProps(\"sticky\")}\n          >\n            <NoteIcon />\n          </IconButton>\n        </Tooltip>\n        <ToolButton\n          tip=\"Text\"\n          onClick={() => onToolChange(\"select\")}\n          {...hoverProps(\"text\")}\n        >\n          <TextIcon />\n        </ToolButton>\n        <ToolButton\n          tip=\"Draw\"\n          onClick={() => onToolChange(\"select\")}\n          {...hoverProps(\"draw\")}\n        >\n          <DrawIcon />\n        </ToolButton>\n        {/* Opening the family and arming its default member are one click: the\n            pill appears with Rectangle already armed, so the next thing the\n            pointer does can be the drawing itself. */}\n        <ToolButton\n          tip=\"Shape\"\n          active={shapesOpen}\n          onClick={() =>\n            onToolChange(shapesOpen ? \"select\" : DEFAULT_SHAPE_TOOL)\n          }\n          {...hoverProps(\"shapes\")}\n        >\n          <ShapesIcon />\n        </ToolButton>\n        <ToolButton\n          tip=\"Connect\"\n          onClick={() => onToolChange(\"select\")}\n          {...hoverProps(\"connector\")}\n        >\n          <ConnectionIcon />\n        </ToolButton>\n        <ToolButton\n          tip=\"Project Elements\"\n          active={projectElementsOpen}\n          onClick={() =>\n            onToolChange(\n              projectElementsOpen ? \"select\" : DEFAULT_PROJECT_ELEMENT_TOOL\n            )\n          }\n          {...hoverProps(\"projectElements\")}\n        >\n          <ProjectStarIcon />\n        </ToolButton>\n        <ToolButton\n          tip=\"Link\"\n          active={activeTool === \"link\"}\n          onClick={() =>\n            onToolChange(activeTool === \"link\" ? \"select\" : \"link\")\n          }\n          {...hoverProps(\"link\")}\n        >\n          <InsertLinkIcon />\n        </ToolButton>\n        <ToolButton\n          tip=\"File\"\n          active={activeTool === \"file\"}\n          onClick={() =>\n            onToolChange(activeTool === \"file\" ? \"select\" : \"file\")\n          }\n          {...hoverProps(\"file\")}\n        >\n          <AttachmentIcon />\n        </ToolButton>\n      </ToolSurface>\n\n      <StyledHint color=\"tertiary\" className={hint ? undefined : \"hint-hidden\"}>\n        {hint ?? \" \"}\n      </StyledHint>\n    </StyledBottomDock>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"bottomDock.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_IconButton","_Icons","_Tooltip","_Typography","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","a","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","l","Symbol","iterator","u","next","done","push","value","return","isArray","ToolSurface","exports","styled","div","withConfig","displayName","componentId","verticalDivider","StyledBottomDock","StyledToolPill","StyledHint","Caption1","TOOL_HINTS","circle","roundedRectangle","triangle","connector","projectElements","project","task","person","link","file","sticky","text","draw","shapes","SHAPE_TOOLS","isShapeTool","tool","includes","DEFAULT_SHAPE_TOOL","DEFAULT_PROJECT_ELEMENT_TOOL","SHAPE_DEFAULT_SIZES","width","height","CARD_PREVIEW_HEIGHT","ToolButton","_ref","tip","active","children","onClick","onMouseEnter","onMouseLeave","createElement","Tooltip","title","IconButton","variant","BottomDock","_ref2","activeTool","onToolChange","_useState","useState","_useState2","hoverHint","setHoverHint","hoverProps","hint","shapesOpen","projectElementsOpen","CircleIcon","RoundedRectangleIcon","TriangleIcon","TaskIcon","ProjectIcon","PersonIcon","NoteIcon","TextIcon","DrawIcon","ShapesIcon","ConnectionIcon","ProjectStarIcon","InsertLinkIcon","AttachmentIcon","color","className","undefined"],"sources":["../../../../src/presentation/whiteboard/bottomDock.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode, useState } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { IconButton } from \"../../components/IconButton\";\nimport {\n  AttachmentIcon,\n  CircleIcon,\n  ConnectionIcon,\n  DrawIcon,\n  InsertLinkIcon,\n  PersonIcon,\n  ProjectIcon,\n  ProjectStarIcon,\n  RoundedRectangleIcon,\n  ShapesIcon,\n  NoteIcon,\n  TaskIcon,\n  TextIcon,\n  TriangleIcon,\n} from \"../../components/Icons\";\nimport { Tooltip } from \"../../components/Tooltip\";\nimport { Caption1 } from \"../../components/Typography\";\n\n/* ------------------------------------------------------------------ */\n/* Floating toolbar surfaces                                           */\n/* ------------------------------------------------------------------ */\n\n/* A floating, rounded toolbar surface (paper + shadow). */\nexport const ToolSurface = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 6px;\n  border-radius: 14px;\n  background-color: var(--page-paper-main);\n  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);\n  border: 1px solid var(--border-primary);\n\n  /* A DS button colours its icon by declaring svg { fill: currentColor }, so\n     every FILLED glyph follows the button's active and hover states for free.\n     Three glyphs here are not filled: RoundedRectangleIcon and TriangleIcon are\n     outlines with a stroke of var(--color-theme-600) baked into the path, and\n     ProjectIcon draws its ruler as a stroked rect. Nothing about the button\n     could ever reach them — an armed rectangle stayed exactly as grey as an\n     unarmed one. This extends the same currentColor contract to a declared\n     stroke.\n\n     Scoped to direct children and to shapes inside a <g>, NOT to every\n     descendant: ProjectIcon cuts its ruler with a <mask> whose <line> is\n     stroked BLACK on purpose. In a mask only luminance matters, so recolouring\n     that line would turn a clean diagonal cut into a half-transparent smear. */\n  svg > [stroke],\n  svg > g [stroke] {\n    stroke: currentColor;\n  }\n`;\n\n/* vertical separator used inside the toolbars */\nexport const verticalDivider = `\n  .divider {\n    width: 1px;\n    height: 24px;\n    background-color: var(--color-theme-400);\n    margin: 0 6px;\n    flex-shrink: 0;\n  }\n`;\n\nexport const StyledBottomDock = styled.div`\n  position: absolute;\n  left: 50%;\n  bottom: 18px;\n  transform: translateX(-50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  max-width: calc(100% - 32px);\n`;\n\n/**\n * The floating second toolbar row — a small pill above the dock that holds the\n * members of one tool family (Circle / Rectangle / Triangle, or Task / Project).\n *\n * It is the same surface as the dock itself, so a family reads as an extension\n * of the button that opened it rather than as a different kind of UI. Only one\n * pill is ever up, because only one tool is ever armed.\n */\nexport const StyledToolPill = styled(ToolSurface)``;\n\n/* Reserve two Caption1 lines (2 × 16px) so showing/hiding the hint never\n   shifts the dock; visibility keeps the reserved space when hidden. */\nexport const StyledHint = styled(Caption1)`\n  text-align: center;\n  padding: 0 16px;\n  min-height: 32px;\n\n  &.hint-hidden {\n    visibility: hidden;\n  }\n`;\n\n/* Per-tool hint shown under the dock only while that tool is hovered. */\nexport const TOOL_HINTS = {\n  circle:\n    \"Click to drop a default circle, or draw one to size. Press O for a circle.\",\n  roundedRectangle:\n    \"Click to drop a default rectangle, or draw one to size. Press R for a rectangle.\",\n  triangle:\n    \"Click to drop a default triangle, or draw one to size. Press Y for a triangle.\",\n  connector:\n    \"Drag from one element to another to connect them. Press C to connect.\",\n  projectElements:\n    \"Put a task, a project or a person on the board — pick which above, then draw it.\",\n  project:\n    \"Draw a box to place a project card, then pick the project it shows.\",\n  task: \"Draw a box to place a task card, then pick the task it shows.\",\n  person: \"Draw a circle to place a person, then pick who it shows.\",\n  link: \"Draw a box to place a link, or paste a URL anywhere. Press L for link.\",\n  file: \"Draw a box to place a file, or drop one on the board. Press F for file.\",\n  sticky:\n    \"Click anywhere on the canvas to drop a sticky note. Press S for a sticky note.\",\n  text: \"Click anywhere on the canvas to start typing. Press T for text.\",\n  draw: \"Click and drag to draw freehand. Press D for the pen.\",\n  shapes:\n    \"Pick a shape above, then draw it on the board. Press R for a rectangle.\",\n} as const;\n\nexport type ToolHintKey = keyof typeof TOOL_HINTS;\n\nexport type ShapeTool = \"circle\" | \"roundedRectangle\" | \"triangle\";\n\n/**\n * The armed board tool. Link, File, Project, Task and the three shapes are\n * wired — arming one turns the next canvas click into \"drop the default-size\n * element here\" and a drag into \"draw one this big\"; everything else stays a\n * mock, so the board is otherwise always in select mode.\n */\nexport type BoardTool =\n  | \"select\"\n  | \"link\"\n  | \"file\"\n  | \"project\"\n  | \"task\"\n  | \"person\"\n  | ShapeTool;\n\nexport const SHAPE_TOOLS: readonly ShapeTool[] = [\n  \"circle\",\n  \"roundedRectangle\",\n  \"triangle\",\n];\n\nexport const isShapeTool = (tool: BoardTool): tool is ShapeTool =>\n  (SHAPE_TOOLS as readonly string[]).includes(tool);\n\n/**\n * What a dock button arms the instant its pill opens.\n *\n * Opening a family and choosing inside it are two separate decisions, and the\n * second one has a right answer often enough that asking for it every time is\n * just a toll: a shape is usually a rectangle, and the thing people put on a\n * board is usually a task. So the pill opens with that member already armed and\n * the gesture can start immediately — picking another member is a correction,\n * not a required step.\n */\nexport const DEFAULT_SHAPE_TOOL: ShapeTool = \"roundedRectangle\";\nexport const DEFAULT_PROJECT_ELEMENT_TOOL: BoardTool = \"task\";\n\n/* What a plain click drops — mirrors DEFAULT_SHAPE_SIZES in\n   new-activecollab-front, and is exactly what the hover preview promises. */\nexport const SHAPE_DEFAULT_SIZES: Record<\n  ShapeTool,\n  { width: number; height: number }\n> = {\n  roundedRectangle: { width: 100, height: 60 },\n  circle: { width: 80, height: 80 },\n  triangle: { width: 80, height: 80 },\n};\n\n/* Cards are auto-height, so their hover preview uses the app's nominal wire\n   height (DEFAULT_LINK_CARD_SIZE / DEFAULT_FILE_CARD_SIZE). */\nexport const CARD_PREVIEW_HEIGHT = 240;\n\n/** The kinds of card the draw gesture can place. */\nexport type DrawableTool = Exclude<BoardTool, \"select\">;\n\nexport interface ToolButtonProps {\n  tip: string;\n  active?: boolean;\n  children: ReactNode;\n  onClick?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n}\n\nexport const ToolButton = ({\n  tip,\n  active,\n  children,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n}: ToolButtonProps): ReactElement => (\n  <Tooltip title={tip}>\n    <IconButton\n      variant=\"text gray\"\n      active={active}\n      onClick={onClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {children}\n    </IconButton>\n  </Tooltip>\n);\n\nexport interface BottomDockProps {\n  activeTool: BoardTool;\n  onToolChange: (tool: BoardTool) => void;\n}\n\n/* Bottom-centre tool dock: the family pill (when one is open), the main\n   toolbar, and the shared hint line. The dock is anchored by its BOTTOM edge,\n   so a pill appearing or disappearing grows the stack upwards and never moves\n   the toolbar itself. */\nexport const BottomDock = ({\n  activeTool,\n  onToolChange,\n}: BottomDockProps): ReactElement => {\n  const [hoverHint, setHoverHint] = useState<string | null>(null);\n\n  const hoverProps = (tool: ToolHintKey): Record<string, () => void> => ({\n    onMouseEnter: () => setHoverHint(TOOL_HINTS[tool]),\n    onMouseLeave: () => setHoverHint(null),\n  });\n\n  /* An armed tool keeps its hint up after the pointer leaves the dock — the\n     gesture happens on the canvas, so that is exactly when the instruction is\n     needed. */\n  const hint =\n    hoverHint ?? (activeTool === \"select\" ? null : TOOL_HINTS[activeTool]);\n\n  /* Which pill is up. Both are DERIVED from the armed tool rather than kept as\n     their own open/closed state: opening a pill always arms one of its members,\n     so \"a member of this family is armed\" and \"this pill is showing\" are the\n     same fact. Deriving it is what makes every way of leaving the family close\n     the pill for free — another dock tool, Esc on the canvas, or the gesture\n     finishing and disarming the tool. Two states could disagree; one cannot. */\n  const shapesOpen = isShapeTool(activeTool);\n  const projectElementsOpen =\n    activeTool === \"task\" ||\n    activeTool === \"project\" ||\n    activeTool === \"person\";\n\n  return (\n    <StyledBottomDock>\n      {/* Shapes pill — hidden until the Shape dock button opens it. Inside a\n          pill a click is a plain choice, never a toggle off: the dock button is\n          what closes the family, so clicking the armed shape again must not\n          make the row that is being used disappear. */}\n      {shapesOpen ? (\n        <StyledToolPill>\n          <ToolButton\n            tip=\"Circle\"\n            active={activeTool === \"circle\"}\n            onClick={() => onToolChange(\"circle\")}\n            {...hoverProps(\"circle\")}\n          >\n            <CircleIcon />\n          </ToolButton>\n          <ToolButton\n            tip=\"Rectangle\"\n            active={activeTool === \"roundedRectangle\"}\n            onClick={() => onToolChange(\"roundedRectangle\")}\n            {...hoverProps(\"roundedRectangle\")}\n          >\n            <RoundedRectangleIcon />\n          </ToolButton>\n          <ToolButton\n            tip=\"Triangle\"\n            active={activeTool === \"triangle\"}\n            onClick={() => onToolChange(\"triangle\")}\n            {...hoverProps(\"triangle\")}\n          >\n            <TriangleIcon />\n          </ToolButton>\n        </StyledToolPill>\n      ) : null}\n\n      {/* Project Elements pill — the same surface, the same button size and\n          spacing, in the same slot above the dock. Task comes first because it\n          is what the button arms by default; User is third, beside Task and\n          Project, and arms the same draw gesture with a person placeholder. */}\n      {projectElementsOpen ? (\n        <StyledToolPill>\n          <ToolButton\n            tip=\"Task\"\n            active={activeTool === \"task\"}\n            onClick={() => onToolChange(\"task\")}\n            {...hoverProps(\"task\")}\n          >\n            <TaskIcon />\n          </ToolButton>\n          <ToolButton\n            tip=\"Project\"\n            active={activeTool === \"project\"}\n            onClick={() => onToolChange(\"project\")}\n            {...hoverProps(\"project\")}\n          >\n            <ProjectIcon />\n          </ToolButton>\n          <ToolButton\n            tip=\"User\"\n            active={activeTool === \"person\"}\n            onClick={() => onToolChange(\"person\")}\n            {...hoverProps(\"person\")}\n          >\n            <PersonIcon />\n          </ToolButton>\n        </StyledToolPill>\n      ) : null}\n\n      <ToolSurface>\n        {/* The tools that are still mocks arm nothing — but they do DISARM, so\n            reaching for one closes whatever pill is up and ends the gesture the\n            board was waiting for. A dead button that also leaves the previous\n            tool armed would be the confusing half of \"not implemented yet\". */}\n        <Tooltip title=\"Sticky Note\">\n          <IconButton\n            variant=\"text gray\"\n            onClick={() => onToolChange(\"select\")}\n            {...hoverProps(\"sticky\")}\n          >\n            <NoteIcon />\n          </IconButton>\n        </Tooltip>\n        <ToolButton\n          tip=\"Text\"\n          onClick={() => onToolChange(\"select\")}\n          {...hoverProps(\"text\")}\n        >\n          <TextIcon />\n        </ToolButton>\n        <ToolButton\n          tip=\"Draw\"\n          onClick={() => onToolChange(\"select\")}\n          {...hoverProps(\"draw\")}\n        >\n          <DrawIcon />\n        </ToolButton>\n        {/* Opening the family and arming its default member are one click: the\n            pill appears with Rectangle already armed, so the next thing the\n            pointer does can be the drawing itself. */}\n        <ToolButton\n          tip=\"Shape\"\n          active={shapesOpen}\n          onClick={() =>\n            onToolChange(shapesOpen ? \"select\" : DEFAULT_SHAPE_TOOL)\n          }\n          {...hoverProps(\"shapes\")}\n        >\n          <ShapesIcon />\n        </ToolButton>\n        <ToolButton\n          tip=\"Connect\"\n          onClick={() => onToolChange(\"select\")}\n          {...hoverProps(\"connector\")}\n        >\n          <ConnectionIcon />\n        </ToolButton>\n        <ToolButton\n          tip=\"Project Elements\"\n          active={projectElementsOpen}\n          onClick={() =>\n            onToolChange(\n              projectElementsOpen ? \"select\" : DEFAULT_PROJECT_ELEMENT_TOOL\n            )\n          }\n          {...hoverProps(\"projectElements\")}\n        >\n          <ProjectStarIcon />\n        </ToolButton>\n        <ToolButton\n          tip=\"Link\"\n          active={activeTool === \"link\"}\n          onClick={() =>\n            onToolChange(activeTool === \"link\" ? \"select\" : \"link\")\n          }\n          {...hoverProps(\"link\")}\n        >\n          <InsertLinkIcon />\n        </ToolButton>\n        <ToolButton\n          tip=\"File\"\n          active={activeTool === \"file\"}\n          onClick={() =>\n            onToolChange(activeTool === \"file\" ? \"select\" : \"file\")\n          }\n          {...hoverProps(\"file\")}\n        >\n          <AttachmentIcon />\n        </ToolButton>\n      </ToolSurface>\n\n      <StyledHint color=\"tertiary\" className={hint ? undefined : \"hint-hidden\"}>\n        {hint ?? \" \"}\n      </StyledHint>\n    </StyledBottomDock>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -7,10 +7,13 @@ exports.NO_DRAG_SELECTOR = exports.DRAG_THROUGH_SELECTOR = exports.CanvasElement
 var _react = _interopRequireWildcard(require("react"));
 var _bottomDock = require("./bottomDock");
 var _elements = require("./elements");
+var _entityCardActions = require("./entityCardActions");
 var _fileElement = require("./fileElement");
 var _linkElement = require("./linkElement");
+var _shared = require("../shared");
 var _projectElements = require("./projectElements");
 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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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; } }
@@ -53,7 +56,7 @@ var DRAG_THROUGH_SELECTOR = exports.DRAG_THROUGH_SELECTOR = "[data-drag-through]
    Link elements are created here too — by drawing a box with the Link tool
    armed, or by pasting a URL onto the canvas. */
 var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
-  var _projectElements$find;
+  var _projectElements$find, _projectElements$find2, _projectElements$find3;
   var gridSize = _ref.gridSize,
     snapToGrid = _ref.snapToGrid,
     activeTool = _ref.activeTool,
@@ -531,7 +534,8 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
         height: size.height,
         status: "placeholder",
         project: null,
-        task: null
+        task: null,
+        person: null
       }];
     });
     setSelectedId(id);
@@ -541,15 +545,13 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
   /* The picker answered. The card keeps the placeholder's top-left and flashes
      a skeleton while the "backend" fills the details in — the same two-phase
      honesty the file card's upload / preparing pair has. */
-  var resolveProjectElement = (0, _react.useCallback)(function (id, project, task) {
+  var resolveProjectElement = (0, _react.useCallback)(function (id, fill) {
     setPickerFor(null);
     setProjectElements(function (current) {
       return current.map(function (entry) {
         return entry.id === id ? _objectSpread(_objectSpread({}, entry), {}, {
-          status: "resolving",
-          project,
-          task
-        }) : entry;
+          status: "resolving"
+        }, fill) : entry;
       });
     });
     var timer = window.setTimeout(function () {
@@ -560,8 +562,10 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
             /* The card takes its natural width HERE rather than the
                renderer deriving it, so from this moment on there is a
                single stored width for the canvas, the drag and the
-               Inspector's Width field to agree on. */
-            width: (0, _projectElements.projectCardWidth)(entry.kind)
+               Inspector's Width field to agree on. A person keeps the
+               square that was drawn: the avatar fills whatever circle
+               the gesture made. */
+            width: entry.kind === "person" ? entry.width : (0, _projectElements.projectCardWidth)(entry.kind)
           }) : entry;
         });
       });
@@ -587,6 +591,29 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
     return entry.id === pickerFor;
   })) !== null && _projectElements$find !== void 0 ? _projectElements$find : null;
 
+  /* A selected element's Delete, the same removal the link and file cards' own
+     toolbars do: the board element goes, the entity is never touched. */
+  var deleteProjectElement = (0, _react.useCallback)(function (id) {
+    setProjectElements(function (current) {
+      return current.filter(function (entry) {
+        return entry.id !== id;
+      });
+    });
+    setSelectedId(function (selected) {
+      return selected === id ? null : selected;
+    });
+  }, [setProjectElements, setSelectedId]);
+
+  /* Which person's Details dialog is open — keyed off the element id so the
+     element stays the single source of the person it shows. */
+  var _useState1 = (0, _react.useState)(null),
+    _useState10 = _slicedToArray(_useState1, 2),
+    detailsId = _useState10[0],
+    setDetailsId = _useState10[1];
+  var detailsPerson = (_projectElements$find2 = (_projectElements$find3 = projectElements.find(function (entry) {
+    return entry.id === detailsId;
+  })) === null || _projectElements$find3 === void 0 ? void 0 : _projectElements$find3.person) !== null && _projectElements$find2 !== void 0 ? _projectElements$find2 : null;
+
   /* ---- draw-to-place ------------------------------------------------ */
 
   var drawRef = (0, _react.useRef)(null);
@@ -641,6 +668,14 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
         width,
         height
       } : _bottomDock.SHAPE_DEFAULT_SIZES[origin.tool]);
+    } else if (origin.tool === "person") {
+      /* A person is a square: the drawn WIDTH is its side, clamped to the
+         person bounds, and a plain click drops the default size. */
+      var side = drawn ? (0, _projectElements.clampPersonSize)(width) : _projectElements.PERSON_DEFAULT_SIZE;
+      addProjectElement(at, {
+        width: side,
+        height: side
+      }, "person");
     } else if ((0, _projectElements.isProjectTool)(origin.tool)) {
       /* Both dimensions matter here (a project card is not auto-height the
          way a link is), and a card smaller than the minimum could not hold
@@ -683,10 +718,10 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
 
   /* Where the armed tool's hover preview sits — cleared while a draw gesture
      runs (the rubber band takes over) and whenever the tool disarms. */
-  var _useState1 = (0, _react.useState)(null),
-    _useState10 = _slicedToArray(_useState1, 2),
-    hoverPoint = _useState10[0],
-    setHoverPoint = _useState10[1];
+  var _useState11 = (0, _react.useState)(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    hoverPoint = _useState12[0],
+    setHoverPoint = _useState12[1];
   (0, _react.useEffect)(function () {
     if (activeTool === "select") {
       setHoverPoint(null);
@@ -953,23 +988,25 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
       }
     }));
   }), projectElements.map(function (entry) {
-    var _positions$entry$id$x2, _positions$entry$id3, _positions$entry$id$y2, _positions$entry$id4;
+    var _positions$entry$id$x2, _positions$entry$id3, _positions$entry$id$y2, _positions$entry$id4, _locks$entry$id;
     var selected = entry.id === selectedId;
     return /*#__PURE__*/_react.default.createElement(_projectElements.StyledProjectElementBox, {
       key: entry.id,
-      className: [selected ? "selected" : "", entry.limited ? "limited" : "",
+      className: [selected ? "selected" : "", entry.limited ? "limited" : "", entry.kind === "person" ? "person" : "",
       /* A resolved card is a StackedCard, and the shell draws its own
          ring — so the box stands down, exactly as it does for the link
-         and file cards. The placeholder, the resolving flash and the
-         limited card are not StackedCards and keep the box's ring. */
-      entry.status === "resolved" && !entry.limited ? "is-card" : ""].filter(Boolean).join(" "),
+         and file cards. The placeholder, the resolving flash, the
+         limited card and the person chip are not StackedCards and keep
+         the box's ring. */
+      entry.status === "resolved" && !entry.limited && entry.kind !== "person" ? "is-card" : ""].filter(Boolean).join(" "),
       style: {
         left: (_positions$entry$id$x2 = (_positions$entry$id3 = positions[entry.id]) === null || _positions$entry$id3 === void 0 ? void 0 : _positions$entry$id3.x) !== null && _positions$entry$id$x2 !== void 0 ? _positions$entry$id$x2 : 0,
         top: (_positions$entry$id$y2 = (_positions$entry$id4 = positions[entry.id]) === null || _positions$entry$id4 === void 0 ? void 0 : _positions$entry$id4.y) !== null && _positions$entry$id$y2 !== void 0 ? _positions$entry$id$y2 : 0,
         width: entry.width,
         /* Only the placeholder box is measured in both directions; the
-           resolved card is auto-height like every other card here. */
-        height: entry.status === "resolved" ? undefined : entry.height
+           resolved card is auto-height like every other card here. A
+           person is a fixed square in every state. */
+        height: entry.status === "resolved" && entry.kind !== "person" ? undefined : entry.height
       },
       onMouseDown: function onMouseDown(event) {
         return entry.limited ? handleLimitedMouseDown(event, entry.id) : handleElementMouseDown(event, entry.id);
@@ -981,7 +1018,18 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_projectElements.ProjectElementNode, {
       element: entry,
       selected: selected
-    }));
+    }), selected && entry.kind === "person" && entry.status === "resolved" && !entry.limited && entry.person ? /*#__PURE__*/_react.default.createElement(_entityCardActions.PersonCardToolbar, {
+      onDetails: function onDetails() {
+        return setDetailsId(entry.id);
+      },
+      locked: (_locks$entry$id = locks[entry.id]) !== null && _locks$entry$id !== void 0 ? _locks$entry$id : false,
+      onToggleLock: function onToggleLock() {
+        return toggleLock(entry.id);
+      },
+      onDelete: function onDelete() {
+        return deleteProjectElement(entry.id);
+      }
+    }) : null);
   }), draft && !(0, _bottomDock.isShapeTool)(draft.tool) && !(0, _projectElements.isProjectTool)(draft.tool) ? /*#__PURE__*/_react.default.createElement(_linkElement.StyledLinkDraft, {
     style: {
       left: draft.x,
@@ -991,7 +1039,17 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "draft-width"
-  }, "W", " ", draft.width >= _linkElement.CARD_DRAW_THRESHOLD ? (0, _linkElement.clampCardWidth)(draft.width) : draft.tool === "file" ? _fileElement.FILE_DEFAULT_WIDTH : _linkElement.LINK_DEFAULT_WIDTH, " ", "\xB7 height follows content")) : null, draft && (0, _projectElements.isProjectTool)(draft.tool) ? /*#__PURE__*/_react.default.createElement(_projectElements.StyledProjectDraft, {
+  }, "W", " ", draft.width >= _linkElement.CARD_DRAW_THRESHOLD ? (0, _linkElement.clampCardWidth)(draft.width) : draft.tool === "file" ? _fileElement.FILE_DEFAULT_WIDTH : _linkElement.LINK_DEFAULT_WIDTH, " ", "\xB7 height follows content")) : null, draft && draft.tool === "person" ? function () {
+    var side = draft.width >= _linkElement.CARD_DRAW_THRESHOLD ? (0, _projectElements.clampPersonSize)(draft.width) : _projectElements.PERSON_DEFAULT_SIZE;
+    return /*#__PURE__*/_react.default.createElement(_projectElements.StyledPersonDraft, {
+      style: {
+        left: draft.x,
+        top: draft.y,
+        width: side,
+        height: side
+      }
+    });
+  }() : null, draft && (0, _projectElements.isProjectTool)(draft.tool) && draft.tool !== "person" ? /*#__PURE__*/_react.default.createElement(_projectElements.StyledProjectDraft, {
     style: {
       left: draft.x,
       top: draft.y,
@@ -1020,6 +1078,16 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
         }, size)
       }, (0, _linkElement.shapePreviewGlyph)(activeTool, size.width, size.height));
     }
+    if (activeTool === "person") {
+      return /*#__PURE__*/_react.default.createElement(_projectElements.StyledPersonDraft, {
+        style: {
+          left: at.x,
+          top: at.y,
+          width: _projectElements.PERSON_DEFAULT_SIZE,
+          height: _projectElements.PERSON_DEFAULT_SIZE
+        }
+      });
+    }
     if ((0, _projectElements.isProjectTool)(activeTool)) {
       return /*#__PURE__*/_react.default.createElement(_projectElements.StyledProjectDraft, {
         style: {
@@ -1049,13 +1117,34 @@ var CanvasElements = exports.CanvasElements = function CanvasElements(_ref) {
       rx: 8,
       ry: 8
     })));
-  }() : null, pickerElement ? /*#__PURE__*/_react.default.createElement(_projectElements.ProjectElementPicker, {
+  }() : null, detailsPerson ? /*#__PURE__*/_react.default.createElement(_shared.UserDetailsDialog, _extends({
+    open: true
+  }, (0, _entityCardActions.personDetailsProps)(detailsPerson), {
+    onClose: function onClose() {
+      return setDetailsId(null);
+    }
+  })) : null, pickerElement ? /*#__PURE__*/_react.default.createElement(_projectElements.ProjectElementPicker, {
     kind: pickerElement.kind,
     onSelectProject: function onSelectProject(project) {
-      return resolveProjectElement(pickerElement.id, project, null);
+      return resolveProjectElement(pickerElement.id, {
+        project,
+        task: null,
+        person: null
+      });
     },
     onSelectTask: function onSelectTask(project, task) {
-      return resolveProjectElement(pickerElement.id, project, task);
+      return resolveProjectElement(pickerElement.id, {
+        project,
+        task,
+        person: null
+      });
+    },
+    onSelectPerson: function onSelectPerson(person) {
+      return resolveProjectElement(pickerElement.id, {
+        project: null,
+        task: null,
+        person
+      });
     },
     onCancel: function onCancel() {
       return cancelProjectElement(pickerElement.id);