@activecollab/components 2.0.407 → 2.0.409

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useState } from "react";
 import styled from "styled-components";
 import { IconButton } from "../../components/IconButton";
-import { AttachmentIcon, CircleIcon, ConnectionIcon, DrawIcon, InsertLinkIcon, RoundedRectangleIcon, ShapesIcon, NoteIcon, TextIcon, TriangleIcon } from "../../components/Icons";
+import { AttachmentIcon, CircleIcon, ConnectionIcon, DrawIcon, InsertLinkIcon, ProjectIcon, ProjectStarIcon, RoundedRectangleIcon, ShapesIcon, NoteIcon, TaskIcon, TextIcon, TriangleIcon } from "../../components/Icons";
 import { Tooltip } from "../../components/Tooltip";
 import { Caption1 } from "../../components/Typography";
 
@@ -14,7 +14,7 @@ import { Caption1 } from "../../components/Typography";
 export const ToolSurface = styled.div.withConfig({
   displayName: "bottomDock__ToolSurface",
   componentId: "sc-1xsxwg0-0"
-})(["display:flex;align-items:center;gap:2px;padding:6px;border-radius:14px;background-color:var(--page-paper-main);box-shadow:0 6px 24px rgba(0,0,0,0.16);border:1px solid var(--border-primary);"]);
+})(["display:flex;align-items:center;gap:2px;padding:6px;border-radius:14px;background-color:var(--page-paper-main);box-shadow:0 6px 24px rgba(0,0,0,0.16);border:1px solid var(--border-primary);svg > [stroke],svg > g [stroke]{stroke:currentColor;}"]);
 
 /* vertical separator used inside the toolbars */
 export 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";
@@ -23,9 +23,16 @@ export const StyledBottomDock = styled.div.withConfig({
   componentId: "sc-1xsxwg0-1"
 })(["position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;max-width:calc(100% - 32px);"]);
 
-/* shape sub-toolbar: Circle / Rectangle / Triangle */
-export const StyledShapePicker = styled(ToolSurface).withConfig({
-  displayName: "bottomDock__StyledShapePicker",
+/**
+ * The floating second toolbar row — a small pill above the dock that holds the
+ * members of one tool family (Circle / Rectangle / Triangle, or Task / Project).
+ *
+ * It is the same surface as the dock itself, so a family reads as an extension
+ * of the button that opened it rather than as a different kind of UI. Only one
+ * pill is ever up, because only one tool is ever armed.
+ */
+export const StyledToolPill = styled(ToolSurface).withConfig({
+  displayName: "bottomDock__StyledToolPill",
   componentId: "sc-1xsxwg0-2"
 })([""]);
 
@@ -42,24 +49,40 @@ export const 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.",
+  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.",
   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.",
   text: "Click anywhere on the canvas to start typing. Press T for text.",
   draw: "Click and drag to draw freehand. Press D for the pen.",
-  shapes: "Start drawing the shape on canvas to see the result. Press R to draw a rectangle."
+  shapes: "Pick a shape above, then draw it on the board. Press R for a rectangle."
 };
 
 /**
- * The armed board tool. Link, File and the three shapes are wired — arming one
- * turns the next canvas click into "drop the default-size element here" and a
- * drag into "draw one this big"; everything else stays a mock, so the board is
- * otherwise always in select mode.
+ * The armed board tool. Link, File, Project, Task and the three shapes are
+ * wired — arming one turns the next canvas click into "drop the default-size
+ * element here" and a drag into "draw one this big"; everything else stays a
+ * mock, so the board is otherwise always in select mode.
  */
 
 export const SHAPE_TOOLS = ["circle", "roundedRectangle", "triangle"];
 export const isShapeTool = tool => SHAPE_TOOLS.includes(tool);
 
+/**
+ * What a dock button arms the instant its pill opens.
+ *
+ * Opening a family and choosing inside it are two separate decisions, and the
+ * second one has a right answer often enough that asking for it every time is
+ * just a toll: a shape is usually a rectangle, and the thing people put on a
+ * board is usually a task. So the pill opens with that member already armed and
+ * the gesture can start immediately — picking another member is a correction,
+ * not a required step.
+ */
+export const DEFAULT_SHAPE_TOOL = "roundedRectangle";
+export const DEFAULT_PROJECT_ELEMENT_TOOL = "task";
+
 /* What a plain click drops — mirrors DEFAULT_SHAPE_SIZES in
    new-activecollab-front, and is exactly what the hover preview promises. */
 export const SHAPE_DEFAULT_SIZES = {
@@ -100,7 +123,10 @@ export const ToolButton = _ref => {
     onMouseLeave: onMouseLeave
   }, children));
 };
-/* Bottom-centre tool dock (shape picker + main toolbar + hint). */
+/* Bottom-centre tool dock: the family pill (when one is open), the main
+   toolbar, and the shared hint line. The dock is anchored by its BOTTOM edge,
+   so a pill appearing or disappearing grows the stack upwards and never moves
+   the toolbar itself. */
 export const BottomDock = _ref2 => {
   let activeTool = _ref2.activeTool,
     onToolChange = _ref2.onToolChange;
@@ -116,37 +142,58 @@ export const BottomDock = _ref2 => {
      gesture happens on the canvas, so that is exactly when the instruction is
      needed. */
   const hint = hoverHint != null ? hoverHint : activeTool === "select" ? null : TOOL_HINTS[activeTool];
-  return /*#__PURE__*/React.createElement(StyledBottomDock, null, /*#__PURE__*/React.createElement(StyledShapePicker, null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Circle"
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    variant: "text gray",
+
+  /* Which pill is up. Both are DERIVED from the armed tool rather than kept as
+     their own open/closed state: opening a pill always arms one of its members,
+     so "a member of this family is armed" and "this pill is showing" are the
+     same fact. Deriving it is what makes every way of leaving the family close
+     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. */
+  const shapesOpen = isShapeTool(activeTool);
+  const projectElementsOpen = activeTool === "task" || activeTool === "project";
+  return /*#__PURE__*/React.createElement(StyledBottomDock, null, shapesOpen ? /*#__PURE__*/React.createElement(StyledToolPill, null, /*#__PURE__*/React.createElement(ToolButton, _extends({
+    tip: "Circle",
     active: activeTool === "circle",
-    onClick: () => onToolChange(activeTool === "circle" ? "select" : "circle")
-  }, hoverProps("circle")), /*#__PURE__*/React.createElement(CircleIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Rectangle"
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    variant: "text gray",
+    onClick: () => onToolChange("circle")
+  }, hoverProps("circle")), /*#__PURE__*/React.createElement(CircleIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
+    tip: "Rectangle",
     active: activeTool === "roundedRectangle",
-    onClick: () => onToolChange(activeTool === "roundedRectangle" ? "select" : "roundedRectangle")
-  }, hoverProps("roundedRectangle")), /*#__PURE__*/React.createElement(RoundedRectangleIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Triangle"
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    variant: "text gray",
+    onClick: () => onToolChange("roundedRectangle")
+  }, hoverProps("roundedRectangle")), /*#__PURE__*/React.createElement(RoundedRectangleIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
+    tip: "Triangle",
     active: activeTool === "triangle",
-    onClick: () => onToolChange(activeTool === "triangle" ? "select" : "triangle")
-  }, hoverProps("triangle")), /*#__PURE__*/React.createElement(TriangleIcon, null)))), /*#__PURE__*/React.createElement(ToolSurface, null, /*#__PURE__*/React.createElement(Tooltip, {
+    onClick: () => onToolChange("triangle")
+  }, hoverProps("triangle")), /*#__PURE__*/React.createElement(TriangleIcon, null))) : null, projectElementsOpen ? /*#__PURE__*/React.createElement(StyledToolPill, null, /*#__PURE__*/React.createElement(ToolButton, _extends({
+    tip: "Task",
+    active: activeTool === "task",
+    onClick: () => onToolChange("task")
+  }, hoverProps("task")), /*#__PURE__*/React.createElement(TaskIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
+    tip: "Project",
+    active: activeTool === "project",
+    onClick: () => onToolChange("project")
+  }, hoverProps("project")), /*#__PURE__*/React.createElement(ProjectIcon, null))) : null, /*#__PURE__*/React.createElement(ToolSurface, null, /*#__PURE__*/React.createElement(Tooltip, {
     title: "Sticky Note"
   }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    variant: "text gray"
+    variant: "text gray",
+    onClick: () => onToolChange("select")
   }, hoverProps("sticky")), /*#__PURE__*/React.createElement(NoteIcon, null))), /*#__PURE__*/React.createElement(ToolButton, _extends({
-    tip: "Text"
+    tip: "Text",
+    onClick: () => onToolChange("select")
   }, hoverProps("text")), /*#__PURE__*/React.createElement(TextIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
-    tip: "Draw"
+    tip: "Draw",
+    onClick: () => onToolChange("select")
   }, hoverProps("draw")), /*#__PURE__*/React.createElement(DrawIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
-    tip: "Shape"
+    tip: "Shape",
+    active: shapesOpen,
+    onClick: () => onToolChange(shapesOpen ? "select" : DEFAULT_SHAPE_TOOL)
   }, hoverProps("shapes")), /*#__PURE__*/React.createElement(ShapesIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
-    tip: "Connect"
+    tip: "Connect",
+    onClick: () => onToolChange("select")
   }, hoverProps("connector")), /*#__PURE__*/React.createElement(ConnectionIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
+    tip: "Project Elements",
+    active: projectElementsOpen,
+    onClick: () => onToolChange(projectElementsOpen ? "select" : DEFAULT_PROJECT_ELEMENT_TOOL)
+  }, hoverProps("projectElements")), /*#__PURE__*/React.createElement(ProjectStarIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
     tip: "Link",
     active: activeTool === "link",
     onClick: () => onToolChange(activeTool === "link" ? "select" : "link")

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

@@ -1 +1 @@
-{"version":3,"file":"bottomDock.js","names":["React","useState","styled","IconButton","AttachmentIcon","CircleIcon","ConnectionIcon","DrawIcon","InsertLinkIcon","RoundedRectangleIcon","ShapesIcon","NoteIcon","TextIcon","TriangleIcon","Tooltip","Caption1","ToolSurface","div","withConfig","displayName","componentId","verticalDivider","StyledBottomDock","StyledShapePicker","StyledHint","TOOL_HINTS","circle","roundedRectangle","triangle","connector","link","file","sticky","text","draw","shapes","SHAPE_TOOLS","isShapeTool","tool","includes","SHAPE_DEFAULT_SIZES","width","height","CARD_PREVIEW_HEIGHT","ToolButton","_ref","tip","active","children","onClick","onMouseEnter","onMouseLeave","createElement","title","variant","BottomDock","_ref2","activeTool","onToolChange","_useState","hoverHint","setHoverHint","hoverProps","hint","_extends","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  RoundedRectangleIcon,\n  ShapesIcon,\n  NoteIcon,\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\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/* shape sub-toolbar: Circle / Rectangle / Triangle */\nexport const StyledShapePicker = 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  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    \"Start drawing the shape on canvas to see the result. Press R to draw 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 and the three shapes are wired — arming one\n * turns the next canvas click into \"drop the default-size element here\" and a\n * drag into \"draw one this big\"; everything else stays a mock, so the board is\n * otherwise always in select mode.\n */\nexport type BoardTool = \"select\" | \"link\" | \"file\" | 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/* 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 (shape picker + main toolbar + hint). */\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  return (\n    <StyledBottomDock>\n      <StyledShapePicker>\n        <Tooltip title=\"Circle\">\n          <IconButton\n            variant=\"text gray\"\n            active={activeTool === \"circle\"}\n            onClick={() =>\n              onToolChange(activeTool === \"circle\" ? \"select\" : \"circle\")\n            }\n            {...hoverProps(\"circle\")}\n          >\n            <CircleIcon />\n          </IconButton>\n        </Tooltip>\n        <Tooltip title=\"Rectangle\">\n          <IconButton\n            variant=\"text gray\"\n            active={activeTool === \"roundedRectangle\"}\n            onClick={() =>\n              onToolChange(\n                activeTool === \"roundedRectangle\"\n                  ? \"select\"\n                  : \"roundedRectangle\"\n              )\n            }\n            {...hoverProps(\"roundedRectangle\")}\n          >\n            <RoundedRectangleIcon />\n          </IconButton>\n        </Tooltip>\n        <Tooltip title=\"Triangle\">\n          <IconButton\n            variant=\"text gray\"\n            active={activeTool === \"triangle\"}\n            onClick={() =>\n              onToolChange(activeTool === \"triangle\" ? \"select\" : \"triangle\")\n            }\n            {...hoverProps(\"triangle\")}\n          >\n            <TriangleIcon />\n          </IconButton>\n        </Tooltip>\n      </StyledShapePicker>\n\n      <ToolSurface>\n        <Tooltip title=\"Sticky Note\">\n          <IconButton variant=\"text gray\" {...hoverProps(\"sticky\")}>\n            <NoteIcon />\n          </IconButton>\n        </Tooltip>\n        <ToolButton tip=\"Text\" {...hoverProps(\"text\")}>\n          <TextIcon />\n        </ToolButton>\n        <ToolButton tip=\"Draw\" {...hoverProps(\"draw\")}>\n          <DrawIcon />\n        </ToolButton>\n        <ToolButton tip=\"Shape\" {...hoverProps(\"shapes\")}>\n          <ShapesIcon />\n        </ToolButton>\n        <ToolButton tip=\"Connect\" {...hoverProps(\"connector\")}>\n          <ConnectionIcon />\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","useState","styled","IconButton","AttachmentIcon","CircleIcon","ConnectionIcon","DrawIcon","InsertLinkIcon","ProjectIcon","ProjectStarIcon","RoundedRectangleIcon","ShapesIcon","NoteIcon","TaskIcon","TextIcon","TriangleIcon","Tooltip","Caption1","ToolSurface","div","withConfig","displayName","componentId","verticalDivider","StyledBottomDock","StyledToolPill","StyledHint","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","title","variant","BottomDock","_ref2","activeTool","onToolChange","_useState","hoverHint","setHoverHint","hoverProps","hint","shapesOpen","projectElementsOpen","_extends","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":";AAAA,OAAOA,KAAK,IAA6BC,QAAQ,QAAQ,OAAO;AAEhE,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,SAASC,UAAU,QAAQ,6BAA6B;AACxD,SACEC,cAAc,EACdC,UAAU,EACVC,cAAc,EACdC,QAAQ,EACRC,cAAc,EACdC,WAAW,EACXC,eAAe,EACfC,oBAAoB,EACpBC,UAAU,EACVC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,YAAY,QACP,wBAAwB;AAC/B,SAASC,OAAO,QAAQ,0BAA0B;AAClD,SAASC,QAAQ,QAAQ,6BAA6B;;AAEtD;AACA;AACA;;AAEA;AACA,OAAO,MAAMC,WAAW,GAAGjB,MAAM,CAACkB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0PA2BpC;;AAED;AACA,OAAO,MAAMC,eAAe,sJAQ3B;AAED,OAAO,MAAMC,gBAAgB,GAAGvB,MAAM,CAACkB,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qKAUzC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,cAAc,GAAGxB,MAAM,CAACiB,WAAW,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,QAAE;;AAEnD;AACA;AACA,OAAO,MAAMI,UAAU,GAAGzB,MAAM,CAACgB,QAAQ,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0FAQzC;;AAED;AACA,OAAO,MAAMK,UAAU,GAAG;EACxBC,MAAM,EACJ,4EAA4E;EAC9EC,gBAAgB,EACd,kFAAkF;EACpFC,QAAQ,EACN,gFAAgF;EAClFC,SAAS,EACP,uEAAuE;EACzEC,eAAe,EACb,8EAA8E;EAChFC,OAAO,EACL,qEAAqE;EACvEC,IAAI,EAAE,+DAA+D;EACrEC,IAAI,EAAE,wEAAwE;EAC9EC,IAAI,EAAE,yEAAyE;EAC/EC,MAAM,EACJ,gFAAgF;EAClFC,IAAI,EAAE,iEAAiE;EACvEC,IAAI,EAAE,uDAAuD;EAC7DC,MAAM,EACJ;AACJ,CAAU;;AAMV;AACA;AACA;AACA;AACA;AACA;;AASA,OAAO,MAAMC,WAAiC,GAAG,CAC/C,QAAQ,EACR,kBAAkB,EAClB,UAAU,CACX;AAED,OAAO,MAAMC,WAAW,GAAIC,IAAe,IACxCF,WAAW,CAAuBG,QAAQ,CAACD,IAAI,CAAC;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,kBAA6B,GAAG,kBAAkB;AAC/D,OAAO,MAAMC,4BAAuC,GAAG,MAAM;;AAE7D;AACA;AACA,OAAO,MAAMC,mBAGZ,GAAG;EACFlB,gBAAgB,EAAE;IAAEmB,KAAK,EAAE,GAAG;IAAEC,MAAM,EAAE;EAAG,CAAC;EAC5CrB,MAAM,EAAE;IAAEoB,KAAK,EAAE,EAAE;IAAEC,MAAM,EAAE;EAAG,CAAC;EACjCnB,QAAQ,EAAE;IAAEkB,KAAK,EAAE,EAAE;IAAEC,MAAM,EAAE;EAAG;AACpC,CAAC;;AAED;AACA;AACA,OAAO,MAAMC,mBAAmB,GAAG,GAAG;;AAEtC;;AAYA,OAAO,MAAMC,UAAU,GAAGC,IAAA;EAAA,IACxBC,GAAG,GAAAD,IAAA,CAAHC,GAAG;IACHC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,YAAY,GAAAL,IAAA,CAAZK,YAAY;IACZC,YAAY,GAAAN,IAAA,CAAZM,YAAY;EAAA,oBAEZ3D,KAAA,CAAA4D,aAAA,CAAC3C,OAAO;IAAC4C,KAAK,EAAEP;EAAI,gBAClBtD,KAAA,CAAA4D,aAAA,CAACzD,UAAU;IACT2D,OAAO,EAAC,WAAW;IACnBP,MAAM,EAAEA,MAAO;IACfE,OAAO,EAAEA,OAAQ;IACjBC,YAAY,EAAEA,YAAa;IAC3BC,YAAY,EAAEA;EAAa,GAE1BH,QACS,CACL,CAAC;AAAA,CACX;AAOD;AACA;AACA;AACA;AACA,OAAO,MAAMO,UAAU,GAAGC,KAAA,IAGW;EAAA,IAFnCC,UAAU,GAAAD,KAAA,CAAVC,UAAU;IACVC,YAAY,GAAAF,KAAA,CAAZE,YAAY;EAEZ,MAAAC,SAAA,GAAkClE,QAAQ,CAAgB,IAAI,CAAC;IAAxDmE,SAAS,GAAAD,SAAA;IAAEE,YAAY,GAAAF,SAAA;EAE9B,MAAMG,UAAU,GAAI1B,IAAiB,KAAkC;IACrEc,YAAY,EAAEA,CAAA,KAAMW,YAAY,CAACzC,UAAU,CAACgB,IAAI,CAAC,CAAC;IAClDe,YAAY,EAAEA,CAAA,KAAMU,YAAY,CAAC,IAAI;EACvC,CAAC,CAAC;;EAEF;AACF;AACA;EACE,MAAME,IAAI,GACRH,SAAS,WAATA,SAAS,GAAKH,UAAU,KAAK,QAAQ,GAAG,IAAI,GAAGrC,UAAU,CAACqC,UAAU,CAAE;;EAExE;AACF;AACA;AACA;AACA;AACA;EACE,MAAMO,UAAU,GAAG7B,WAAW,CAACsB,UAAU,CAAC;EAC1C,MAAMQ,mBAAmB,GAAGR,UAAU,KAAK,MAAM,IAAIA,UAAU,KAAK,SAAS;EAE7E,oBACEjE,KAAA,CAAA4D,aAAA,CAACnC,gBAAgB,QAKd+C,UAAU,gBACTxE,KAAA,CAAA4D,aAAA,CAAClC,cAAc,qBACb1B,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,QAAQ;IACZC,MAAM,EAAEU,UAAU,KAAK,QAAS;IAChCR,OAAO,EAAEA,CAAA,KAAMS,YAAY,CAAC,QAAQ;EAAE,GAClCI,UAAU,CAAC,QAAQ,CAAC,gBAExBtE,KAAA,CAAA4D,aAAA,CAACvD,UAAU,MAAE,CACH,CAAC,eACbL,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,WAAW;IACfC,MAAM,EAAEU,UAAU,KAAK,kBAAmB;IAC1CR,OAAO,EAAEA,CAAA,KAAMS,YAAY,CAAC,kBAAkB;EAAE,GAC5CI,UAAU,CAAC,kBAAkB,CAAC,gBAElCtE,KAAA,CAAA4D,aAAA,CAACjD,oBAAoB,MAAE,CACb,CAAC,eACbX,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,UAAU;IACdC,MAAM,EAAEU,UAAU,KAAK,UAAW;IAClCR,OAAO,EAAEA,CAAA,KAAMS,YAAY,CAAC,UAAU;EAAE,GACpCI,UAAU,CAAC,UAAU,CAAC,gBAE1BtE,KAAA,CAAA4D,aAAA,CAAC5C,YAAY,MAAE,CACL,CACE,CAAC,GACf,IAAI,EAKPyD,mBAAmB,gBAClBzE,KAAA,CAAA4D,aAAA,CAAClC,cAAc,qBACb1B,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,MAAM;IACVC,MAAM,EAAEU,UAAU,KAAK,MAAO;IAC9BR,OAAO,EAAEA,CAAA,KAAMS,YAAY,CAAC,MAAM;EAAE,GAChCI,UAAU,CAAC,MAAM,CAAC,gBAEtBtE,KAAA,CAAA4D,aAAA,CAAC9C,QAAQ,MAAE,CACD,CAAC,eACbd,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,SAAS;IACbC,MAAM,EAAEU,UAAU,KAAK,SAAU;IACjCR,OAAO,EAAEA,CAAA,KAAMS,YAAY,CAAC,SAAS;EAAE,GACnCI,UAAU,CAAC,SAAS,CAAC,gBAEzBtE,KAAA,CAAA4D,aAAA,CAACnD,WAAW,MAAE,CACJ,CACE,CAAC,GACf,IAAI,eAERT,KAAA,CAAA4D,aAAA,CAACzC,WAAW,qBAKVnB,KAAA,CAAA4D,aAAA,CAAC3C,OAAO;IAAC4C,KAAK,EAAC;EAAa,gBAC1B7D,KAAA,CAAA4D,aAAA,CAACzD,UAAU,EAAAuE,QAAA;IACTZ,OAAO,EAAC,WAAW;IACnBL,OAAO,EAAEA,CAAA,KAAMS,YAAY,CAAC,QAAQ;EAAE,GAClCI,UAAU,CAAC,QAAQ,CAAC,gBAExBtE,KAAA,CAAA4D,aAAA,CAAC/C,QAAQ,MAAE,CACD,CACL,CAAC,eACVb,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,MAAM;IACVG,OAAO,EAAEA,CAAA,KAAMS,YAAY,CAAC,QAAQ;EAAE,GAClCI,UAAU,CAAC,MAAM,CAAC,gBAEtBtE,KAAA,CAAA4D,aAAA,CAAC7C,QAAQ,MAAE,CACD,CAAC,eACbf,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,MAAM;IACVG,OAAO,EAAEA,CAAA,KAAMS,YAAY,CAAC,QAAQ;EAAE,GAClCI,UAAU,CAAC,MAAM,CAAC,gBAEtBtE,KAAA,CAAA4D,aAAA,CAACrD,QAAQ,MAAE,CACD,CAAC,eAIbP,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,OAAO;IACXC,MAAM,EAAEiB,UAAW;IACnBf,OAAO,EAAEA,CAAA,KACPS,YAAY,CAACM,UAAU,GAAG,QAAQ,GAAG1B,kBAAkB;EACxD,GACGwB,UAAU,CAAC,QAAQ,CAAC,gBAExBtE,KAAA,CAAA4D,aAAA,CAAChD,UAAU,MAAE,CACH,CAAC,eACbZ,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,SAAS;IACbG,OAAO,EAAEA,CAAA,KAAMS,YAAY,CAAC,QAAQ;EAAE,GAClCI,UAAU,CAAC,WAAW,CAAC,gBAE3BtE,KAAA,CAAA4D,aAAA,CAACtD,cAAc,MAAE,CACP,CAAC,eACbN,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,kBAAkB;IACtBC,MAAM,EAAEkB,mBAAoB;IAC5BhB,OAAO,EAAEA,CAAA,KACPS,YAAY,CACVO,mBAAmB,GAAG,QAAQ,GAAG1B,4BACnC;EACD,GACGuB,UAAU,CAAC,iBAAiB,CAAC,gBAEjCtE,KAAA,CAAA4D,aAAA,CAAClD,eAAe,MAAE,CACR,CAAC,eACbV,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,MAAM;IACVC,MAAM,EAAEU,UAAU,KAAK,MAAO;IAC9BR,OAAO,EAAEA,CAAA,KACPS,YAAY,CAACD,UAAU,KAAK,MAAM,GAAG,QAAQ,GAAG,MAAM;EACvD,GACGK,UAAU,CAAC,MAAM,CAAC,gBAEtBtE,KAAA,CAAA4D,aAAA,CAACpD,cAAc,MAAE,CACP,CAAC,eACbR,KAAA,CAAA4D,aAAA,CAACR,UAAU,EAAAsB,QAAA;IACTpB,GAAG,EAAC,MAAM;IACVC,MAAM,EAAEU,UAAU,KAAK,MAAO;IAC9BR,OAAO,EAAEA,CAAA,KACPS,YAAY,CAACD,UAAU,KAAK,MAAM,GAAG,QAAQ,GAAG,MAAM;EACvD,GACGK,UAAU,CAAC,MAAM,CAAC,gBAEtBtE,KAAA,CAAA4D,aAAA,CAACxD,cAAc,MAAE,CACP,CACD,CAAC,eAEdJ,KAAA,CAAA4D,aAAA,CAACjC,UAAU;IAACgD,KAAK,EAAC,UAAU;IAACC,SAAS,EAAEL,IAAI,GAAGM,SAAS,GAAG;EAAc,GACtEN,IAAI,WAAJA,IAAI,GAAI,GACC,CACI,CAAC;AAEvB,CAAC","ignoreList":[]}

package/dist/esm/presentation/whiteboard/canvasElements.d.ts

@@ -3,6 +3,7 @@ import { BoardTool } from "./bottomDock";
 import { CanvasElementDef, GridSize, ShapeElementState, StickyTextStyle } from "./elements";
 import { FileElementDef } from "./fileElement";
 import { LinkElementDef } from "./linkElement";
+import { ProjectElementDef } from "./projectElements";
 /**
  * A card is full of its own controls — the URL field, the display toggle, the
  * retry button, the toolbar. A mousedown on any of them selects the element but
@@ -47,6 +48,8 @@ export interface CanvasElementsProps {
     setLinks: React.Dispatch<React.SetStateAction<LinkElementDef[]>>;
     files: FileElementDef[];
     setFiles: React.Dispatch<React.SetStateAction<FileElementDef[]>>;
+    projectElements: ProjectElementDef[];
+    setProjectElements: React.Dispatch<React.SetStateAction<ProjectElementDef[]>>;
     createdShapes: CanvasElementDef[];
     setCreatedShapes: React.Dispatch<React.SetStateAction<CanvasElementDef[]>>;
     sizes: Record<string, {
@@ -57,5 +60,5 @@ export interface CanvasElementsProps {
     locks: Record<string, boolean>;
     setLocks: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
 }
-export declare const CanvasElements: ({ gridSize, snapToGrid, activeTool, onToolUsed, selectedId, onSelectedIdChange: setSelectedId, positions, setPositions, shapes, setShapes, stickyStyle, setStickyStyle, links, setLinks, files, setFiles, createdShapes, setCreatedShapes, sizes, rotations, locks, setLocks, }: CanvasElementsProps) => ReactElement;
+export declare const CanvasElements: ({ gridSize, snapToGrid, activeTool, onToolUsed, selectedId, onSelectedIdChange: setSelectedId, positions, setPositions, shapes, setShapes, stickyStyle, setStickyStyle, links, setLinks, files, setFiles, projectElements, setProjectElements, createdShapes, setCreatedShapes, sizes, rotations, locks, setLocks, }: CanvasElementsProps) => ReactElement;
 //# sourceMappingURL=canvasElements.d.ts.map

package/dist/esm/presentation/whiteboard/canvasElements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvasElements.d.ts","sourceRoot":"","sources":["../../../../src/presentation/whiteboard/canvasElements.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,YAAY,EAKb,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAMV,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,gBAAgB,EAChB,QAAQ,EAGR,iBAAiB,EAEjB,eAAe,EAShB,MAAM,YAAY,CAAC;AACpB,OAAO,EAGL,cAAc,EAIf,MAAM,eAAe,CAAC;AACvB,OAAO,EAIL,cAAc,EAMf,MAAM,eAAe,CAAC;AAEvB;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,+CAA+C,CAAC;AAE7E;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,wBAAwB,CAAC;AAE3D,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,SAAS,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IAKvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAKxE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,YAAY,EAAE,KAAK,CAAC,QAAQ,CAC1B,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAC/D,CAAC;IACF,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAC1C,SAAS,EAAE,KAAK,CAAC,QAAQ,CACvB,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CACxD,CAAC;IACF,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;IAGtE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IACjE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IAGjE,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;IAE3E,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAGlC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;CACzE;AAUD,eAAO,MAAM,cAAc,GAAI,iRAuB5B,mBAAmB,KAAG,YAw3BxB,CAAC"}
+{"version":3,"file":"canvasElements.d.ts","sourceRoot":"","sources":["../../../../src/presentation/whiteboard/canvasElements.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,YAAY,EAKb,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAMV,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,gBAAgB,EAChB,QAAQ,EAGR,iBAAiB,EAEjB,eAAe,EAShB,MAAM,YAAY,CAAC;AACpB,OAAO,EAGL,cAAc,EAIf,MAAM,eAAe,CAAC;AACvB,OAAO,EAIL,cAAc,EAMf,MAAM,eAAe,CAAC;AACvB,OAAO,EAKL,iBAAiB,EASlB,MAAM,mBAAmB,CAAC;AAE3B;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,+CAA+C,CAAC;AAE7E;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,wBAAwB,CAAC;AAE3D,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,SAAS,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IAKvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAKxE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,YAAY,EAAE,KAAK,CAAC,QAAQ,CAC1B,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAC/D,CAAC;IACF,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAC1C,SAAS,EAAE,KAAK,CAAC,QAAQ,CACvB,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CACxD,CAAC;IACF,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;IAGtE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IACjE,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IAGjE,eAAe,EAAE,iBAAiB,EAAE,CAAC;IACrC,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC;IAG9E,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;IAE3E,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACzD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAGlC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;CACzE;AAUD,eAAO,MAAM,cAAc,GAAI,sTAyB5B,mBAAmB,KAAG,YA6lCxB,CAAC"}

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

@@ -4,6 +4,7 @@ import { CARD_PREVIEW_HEIGHT, SHAPE_DEFAULT_SIZES, isShapeTool } from "./bottomD
 import { CANVAS_ELEMENTS, PostitFormattingToolbar, ResizeHandles, ShapeFormattingToolbar, StyledCanvasElement, StyledCanvasLayer, StyledSticky, defaultShapeState, gridLevel, renderShapeBody, snapValue, stickyGradient } from "./elements";
 import { FILE_DEFAULT_WIDTH, FileElement, binaryFrom, describeFile, revokeThumbnail } from "./fileElement";
 import { CARD_DRAW_THRESHOLD, LINK_DEFAULT_WIDTH, LinkElement, StyledLinkDraft, StyledShapePreview, clampCardWidth, isValidLinkUrl, shapePreviewGlyph } from "./linkElement";
+import { PLACEHOLDER_MIN_HEIGHT, PLACEHOLDER_MIN_WIDTH, ProjectElementNode, ProjectElementPicker, RESOLVE_MS, StyledProjectDraft, StyledProjectElementBox, isProjectTool, projectCardWidth } from "./projectElements";
 
 /**
  * A card is full of its own controls — the URL field, the display toggle, the
@@ -36,6 +37,7 @@ export const 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. */
 export const CanvasElements = _ref => {
+  var _projectElements$find;
   let gridSize = _ref.gridSize,
     snapToGrid = _ref.snapToGrid,
     activeTool = _ref.activeTool,
@@ -52,6 +54,8 @@ export const CanvasElements = _ref => {
     setLinks = _ref.setLinks,
     files = _ref.files,
     setFiles = _ref.setFiles,
+    projectElements = _ref.projectElements,
+    setProjectElements = _ref.setProjectElements,
     createdShapes = _ref.createdShapes,
     setCreatedShapes = _ref.setCreatedShapes,
     sizes = _ref.sizes,
@@ -172,6 +176,23 @@ export const CanvasElements = _ref => {
     window.addEventListener("mousemove", handleDragMove);
     window.addEventListener("mouseup", handleDragEnd);
   }, [positions, handleDragMove, handleDragEnd, setSelectedId]);
+
+  /**
+   * The press a limited card gets instead of the one every other element gets.
+   *
+   * It selects — the Inspector still has something to say about it — and stops
+   * there: no drag is armed, because a viewer who cannot see what a card points
+   * at has no business moving it for the people who can. Gating at the call
+   * site rather than inside `handleElementMouseDown` leaves the normal drag
+   * path exactly as it was.
+   */
+  const handleLimitedMouseDown = useCallback((event, id) => {
+    if (event.button !== 0 || activeToolRef.current !== "select") {
+      return;
+    }
+    event.stopPropagation();
+    setSelectedId(id);
+  }, [setSelectedId]);
   const updateShape = useCallback((id, partial) => setShapes(current => _extends({}, current, {
     [id]: _extends({}, current[id], partial)
   })), [setShapes]);
@@ -379,6 +400,80 @@ export const CanvasElements = _ref => {
     }) : link));
   }, [setLinks]);
 
+  /* ---- project / task elements --------------------------------------- */
+
+  const projectCounterRef = useRef(0);
+  /* The placeholder the centred picker is currently answering for. This one
+     stays local: it is a half-finished GESTURE, not board content, so nothing
+     outside the canvas has any use for it. The elements themselves are lifted
+     to the scene (see props) exactly like links and files, because the
+     Inspector reads and edits them. */
+  const _useState5 = useState(null),
+    pickerFor = _useState5[0],
+    setPickerFor = _useState5[1];
+  /* Pending "resolving" flashes, so unmounting never leaves a timer behind
+     that sets state on a component that is gone. */
+  const resolveTimersRef = useRef([]);
+  useEffect(() => () => resolveTimersRef.current.forEach(timer => window.clearTimeout(timer)), []);
+
+  /* Create a placeholder and open its picker. The drawn box is what the card
+     lands in; the picker supplies what the card actually says. */
+  const addProjectElement = useCallback((point, size, kind) => {
+    projectCounterRef.current += 1;
+    const id = kind + "-element-" + projectCounterRef.current;
+    const step = snapStepRef.current;
+    setPositions(current => _extends({}, current, {
+      [id]: {
+        x: snapValue(point.x, step),
+        y: snapValue(point.y, step)
+      }
+    }));
+    setProjectElements(current => [...current, {
+      id,
+      kind,
+      width: size.width,
+      height: size.height,
+      status: "placeholder",
+      project: null,
+      task: null
+    }]);
+    setSelectedId(id);
+    setPickerFor(id);
+  }, [setPositions, setProjectElements, setSelectedId]);
+
+  /* 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. */
+  const resolveProjectElement = useCallback((id, project, task) => {
+    setPickerFor(null);
+    setProjectElements(current => current.map(entry => entry.id === id ? _extends({}, entry, {
+      status: "resolving",
+      project,
+      task
+    }) : entry));
+    const timer = window.setTimeout(() => {
+      setProjectElements(current => current.map(entry => entry.id === id ? _extends({}, entry, {
+        status: "resolved",
+        /* 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: projectCardWidth(entry.kind)
+      }) : entry));
+    }, RESOLVE_MS);
+    resolveTimersRef.current.push(timer);
+  }, [setProjectElements]);
+
+  /* Esc, or a click on the overlay. The placeholder was only ever the first
+     half of the gesture, so cancelling throws it away rather than leaving a
+     blank card on the board. */
+  const cancelProjectElement = useCallback(id => {
+    setPickerFor(null);
+    setProjectElements(current => current.filter(entry => entry.id !== id));
+    setSelectedId(selected => selected === id ? null : selected);
+  }, [setProjectElements, setSelectedId]);
+  const pickerElement = (_projectElements$find = projectElements.find(entry => entry.id === pickerFor)) != null ? _projectElements$find : null;
+
   /* ---- draw-to-place ------------------------------------------------ */
 
   const drawRef = useRef(null);
@@ -433,13 +528,21 @@ export const CanvasElements = _ref => {
         width,
         height
       } : SHAPE_DEFAULT_SIZES[origin.tool]);
+    } else if (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
+         its own contents — so the drawn box is clamped, not honoured. */
+      addProjectElement(at, {
+        width: Math.max(PLACEHOLDER_MIN_WIDTH, Math.round(width)),
+        height: Math.max(PLACEHOLDER_MIN_HEIGHT, Math.round(height))
+      }, origin.tool);
     } else if (origin.tool === "file") {
       addFile(at, drawn ? width : FILE_DEFAULT_WIDTH, null);
     } else {
       addLink(at, drawn ? width : LINK_DEFAULT_WIDTH, null);
     }
     onToolUsed();
-  }, [addFile, addLink, addShape, canvasPoint, handleDrawMove, onToolUsed]);
+  }, [addFile, addLink, addProjectElement, addShape, canvasPoint, handleDrawMove, onToolUsed]);
   const handleLayerMouseDown = useCallback(event => {
     const tool = activeToolRef.current;
     if (event.button !== 0 || tool === "select") {
@@ -467,9 +570,9 @@ export const 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. */
-  const _useState5 = useState(null),
-    hoverPoint = _useState5[0],
-    setHoverPoint = _useState5[1];
+  const _useState6 = useState(null),
+    hoverPoint = _useState6[0],
+    setHoverPoint = _useState6[1];
   useEffect(() => {
     if (activeTool === "select") {
       setHoverPoint(null);
@@ -691,7 +794,33 @@ export const CanvasElements = _ref => {
       onCancel: () => detachFile(entry.id),
       onDelete: () => deleteFile(entry.id)
     }));
-  }), draft && !isShapeTool(draft.tool) ? /*#__PURE__*/React.createElement(StyledLinkDraft, {
+  }), projectElements.map(entry => {
+    var _positions$entry$id$x2, _positions$entry$id3, _positions$entry$id$y2, _positions$entry$id4;
+    const selected = entry.id === selectedId;
+    return /*#__PURE__*/React.createElement(StyledProjectElementBox, {
+      key: entry.id,
+      className: [selected ? "selected" : "", entry.limited ? "limited" : "",
+      /* 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(" "),
+      style: {
+        left: (_positions$entry$id$x2 = (_positions$entry$id3 = positions[entry.id]) == null ? void 0 : _positions$entry$id3.x) != null ? _positions$entry$id$x2 : 0,
+        top: (_positions$entry$id$y2 = (_positions$entry$id4 = positions[entry.id]) == null ? void 0 : _positions$entry$id4.y) != null ? _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
+      },
+      onMouseDown: event => entry.limited ? handleLimitedMouseDown(event, entry.id) : handleElementMouseDown(event, entry.id),
+      onClickCapture: handleElementClickCapture,
+      onClick: event => event.stopPropagation()
+    }, /*#__PURE__*/React.createElement(ProjectElementNode, {
+      element: entry,
+      selected: selected
+    }));
+  }), draft && !isShapeTool(draft.tool) && !isProjectTool(draft.tool) ? /*#__PURE__*/React.createElement(StyledLinkDraft, {
     style: {
       left: draft.x,
       top: draft.y,
@@ -700,7 +829,14 @@ export const CanvasElements = _ref => {
     }
   }, /*#__PURE__*/React.createElement("span", {
     className: "draft-width"
-  }, "W", " ", draft.width >= CARD_DRAW_THRESHOLD ? clampCardWidth(draft.width) : draft.tool === "file" ? FILE_DEFAULT_WIDTH : LINK_DEFAULT_WIDTH, " ", "\xB7 height follows content")) : null, draft && isShapeTool(draft.tool) ? /*#__PURE__*/React.createElement(StyledShapePreview, {
+  }, "W", " ", draft.width >= CARD_DRAW_THRESHOLD ? clampCardWidth(draft.width) : draft.tool === "file" ? FILE_DEFAULT_WIDTH : LINK_DEFAULT_WIDTH, " ", "\xB7 height follows content")) : null, draft && isProjectTool(draft.tool) ? /*#__PURE__*/React.createElement(StyledProjectDraft, {
+    style: {
+      left: draft.x,
+      top: draft.y,
+      width: Math.max(draft.width, PLACEHOLDER_MIN_WIDTH),
+      height: Math.max(draft.height, PLACEHOLDER_MIN_HEIGHT)
+    }
+  }) : null, draft && isShapeTool(draft.tool) ? /*#__PURE__*/React.createElement(StyledShapePreview, {
     style: {
       left: draft.x,
       top: draft.y,
@@ -722,6 +858,16 @@ export const CanvasElements = _ref => {
         }, size)
       }, shapePreviewGlyph(activeTool, size.width, size.height));
     }
+    if (isProjectTool(activeTool)) {
+      return /*#__PURE__*/React.createElement(StyledProjectDraft, {
+        style: {
+          left: at.x,
+          top: at.y,
+          width: PLACEHOLDER_MIN_WIDTH,
+          height: PLACEHOLDER_MIN_HEIGHT
+        }
+      });
+    }
     const width = activeTool === "file" ? FILE_DEFAULT_WIDTH : LINK_DEFAULT_WIDTH;
     return /*#__PURE__*/React.createElement(StyledShapePreview, {
       style: {
@@ -741,6 +887,11 @@ export const CanvasElements = _ref => {
       rx: 8,
       ry: 8
     })));
-  })() : null);
+  })() : null, pickerElement ? /*#__PURE__*/React.createElement(ProjectElementPicker, {
+    kind: pickerElement.kind,
+    onSelectProject: project => resolveProjectElement(pickerElement.id, project, null),
+    onSelectTask: (project, task) => resolveProjectElement(pickerElement.id, project, task),
+    onCancel: () => cancelProjectElement(pickerElement.id)
+  }) : null);
 };
 //# sourceMappingURL=canvasElements.js.map