@activecollab/components 2.0.397 → 2.0.399

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

@@ -0,0 +1,177 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledBoardSettingsMenu = exports.BoardSettingsMenu = exports.BoardMenuSliderStyle = exports.BOARD_MENU_WIDTH = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _elements = require("./elements");
+var _CompleteCheckbox = require("../../components/CompleteCheckbox");
+var _IconButton = require("../../components/IconButton");
+var _Icons = require("../../components/Icons");
+var _List = require("../../components/List");
+var _Menu = require("../../components/Menu");
+var _Transitions = require("../../components/Transitions");
+var _Typography = require("../../components/Typography");
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/* ------------------------------------------------------------------ */
+/* Board Settings menu — Grid granularity + Snap to Grid               */
+/* ------------------------------------------------------------------ */
+
+var BOARD_MENU_WIDTH = exports.BOARD_MENU_WIDTH = 264;
+
+/* The menu drills in place (index → Grid), so the paper clips the sliding
+   panels and gives them a positioning context (mirrors the project "..." menu). */
+var BoardMenuSliderStyle = exports.BoardMenuSliderStyle = (0, _styledComponents.createGlobalStyle)([".c-simple-menu__paper.board-settings-menu{overflow:hidden;position:relative;}"]);
+var StyledBoardSettingsMenu = exports.StyledBoardSettingsMenu = _styledComponents.default.div.withConfig({
+  displayName: "settingsMenu__StyledBoardSettingsMenu",
+  componentId: "sc-8wy9x6-0"
+})([".toggle-item{justify-content:space-between;}.toggle-item .opt-left{display:flex;align-items:center;min-width:0;}.toggle-item .grid-right{display:flex;align-items:center;gap:6px;flex-shrink:0;}.toggle-item .grid-caret{flex-shrink:0;fill:var(--color-theme-600);}.toggle-item .c-complete-checkbox{width:16px;height:16px;border-radius:3px;align-self:center;flex-shrink:0;}.snap-off{opacity:0.5;}.option-item{justify-content:space-between;}.option-item .grid-check{flex-shrink:0;fill:var(--color-primary);}"]);
+var BoardSettingsMenu = exports.BoardSettingsMenu = function BoardSettingsMenu(_ref) {
+  var gridSize = _ref.gridSize,
+    snapToGrid = _ref.snapToGrid,
+    onGridSizeChange = _ref.onGridSizeChange,
+    onSnapToGridChange = _ref.onSnapToGridChange;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)("index"),
+    _useState4 = _slicedToArray(_useState3, 2),
+    view = _useState4[0],
+    setView = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isLeft = _useState6[0],
+    setIsLeft = _useState6[1];
+  var _useState7 = (0, _react.useState)(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    height = _useState8[0],
+    setHeight = _useState8[1];
+  var measure = (0, _react.useCallback)(function (node) {
+    if (node) {
+      setHeight(node.offsetHeight);
+    }
+  }, []);
+  var goToGrid = function goToGrid() {
+    setView("grid");
+    setIsLeft(true);
+  };
+  var backToIndex = function backToIndex() {
+    setView("index");
+    setIsLeft(false);
+  };
+  var handleClose = function handleClose() {
+    setOpen(false);
+    setView("index");
+    setIsLeft(true);
+  };
+  var snapDisabled = gridSize === "off";
+  var indexView = /*#__PURE__*/_react.default.createElement(StyledBoardSettingsMenu, null, /*#__PURE__*/_react.default.createElement(_List.List, {
+    style: {
+      padding: "8px 0"
+    },
+    tabIndex: -1
+  }, /*#__PURE__*/_react.default.createElement(_List.ListItem, {
+    className: "toggle-item",
+    onClick: goToGrid
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "opt-left"
+  }, "Grid"), /*#__PURE__*/_react.default.createElement("span", {
+    className: "grid-right"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    color: "secondary"
+  }, (0, _elements.gridLevel)(gridSize).label), /*#__PURE__*/_react.default.createElement(_Icons.CaretRightIcon, {
+    className: "grid-caret",
+    width: 16,
+    height: 16
+  }))), /*#__PURE__*/_react.default.createElement(_List.ListItem, {
+    className: snapDisabled ? "toggle-item snap-off" : "toggle-item",
+    onClick: snapDisabled ? undefined : function () {
+      return onSnapToGridChange(!snapToGrid);
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "opt-left"
+  }, "Snap to Grid"), /*#__PURE__*/_react.default.createElement(_CompleteCheckbox.CompleteCheckbox, {
+    primary: true,
+    completed: snapToGrid,
+    disabled: snapDisabled
+  }))));
+  var gridView = /*#__PURE__*/_react.default.createElement(StyledBoardSettingsMenu, null, /*#__PURE__*/_react.default.createElement(_Menu.MenuHeader, {
+    title: "Grid",
+    leftElement: /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+      type: "button",
+      variant: "text gray",
+      size: "small",
+      onClick: backToIndex,
+      "aria-label": "Back"
+    }, /*#__PURE__*/_react.default.createElement(_Icons.ArrowLeftIcon, null))
+  }), /*#__PURE__*/_react.default.createElement(_List.List, {
+    style: {
+      padding: "8px 0"
+    },
+    tabIndex: -1
+  }, _elements.GRID_LEVELS.map(function (level) {
+    return /*#__PURE__*/_react.default.createElement(_List.ListItem, {
+      key: level.value,
+      className: "option-item",
+      onClick: function onClick() {
+        onGridSizeChange(level.value);
+        backToIndex();
+      }
+    }, /*#__PURE__*/_react.default.createElement("span", null, level.label), level.value === gridSize ? /*#__PURE__*/_react.default.createElement(_Icons.CheckIcon, {
+      className: "grid-check",
+      width: 16,
+      height: 16
+    }) : null);
+  })));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BoardMenuSliderStyle, null), /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+    open: open,
+    onOpen: function onOpen() {
+      return setOpen(true);
+    },
+    onClose: handleClose,
+    position: "bottom-end",
+    menuClassName: "board-settings-menu",
+    target: /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+      type: "button",
+      variant: "text gray",
+      active: open
+    }, /*#__PURE__*/_react.default.createElement(_Icons.SettingsIcon, null))
+  }, /*#__PURE__*/_react.default.createElement(_Transitions.ResizeTransition, {
+    in: true,
+    style: {
+      height,
+      width: BOARD_MENU_WIDTH
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: "relative",
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Transitions.SlideLeftRightTransition, {
+    in: view === "index",
+    direction: isLeft ? "left" : "right"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: measure,
+    style: {
+      width: BOARD_MENU_WIDTH
+    }
+  }, indexView)), /*#__PURE__*/_react.default.createElement(_Transitions.SlideLeftRightTransition, {
+    in: view === "grid",
+    direction: isLeft ? "left" : "right"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: measure,
+    style: {
+      width: BOARD_MENU_WIDTH
+    }
+  }, gridView))))));
+};
+//# sourceMappingURL=settingsMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"settingsMenu.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_elements","_CompleteCheckbox","_IconButton","_Icons","_List","_Menu","_Transitions","_Typography","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","a","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","length","l","Symbol","iterator","u","next","done","push","value","return","isArray","BOARD_MENU_WIDTH","exports","BoardMenuSliderStyle","createGlobalStyle","StyledBoardSettingsMenu","styled","div","withConfig","displayName","componentId","BoardSettingsMenu","_ref","gridSize","snapToGrid","onGridSizeChange","onSnapToGridChange","_useState","useState","_useState2","open","setOpen","_useState3","_useState4","view","setView","_useState5","_useState6","isLeft","setIsLeft","_useState7","_useState8","height","setHeight","measure","useCallback","node","offsetHeight","goToGrid","backToIndex","handleClose","snapDisabled","indexView","createElement","List","style","padding","tabIndex","ListItem","className","onClick","Caption1","color","gridLevel","label","CaretRightIcon","width","undefined","CompleteCheckbox","primary","completed","disabled","gridView","MenuHeader","title","leftElement","IconButton","type","variant","size","ArrowLeftIcon","GRID_LEVELS","map","level","key","CheckIcon","Fragment","Menu","onOpen","onClose","position","menuClassName","target","active","SettingsIcon","ResizeTransition","in","overflow","SlideLeftRightTransition","direction","ref"],"sources":["../../../../src/presentation/whiteboard/settingsMenu.tsx"],"sourcesContent":["import React, { ReactElement, useCallback, useState } from \"react\";\n\nimport styled, { createGlobalStyle } from \"styled-components\";\n\nimport { GRID_LEVELS, GridSize, gridLevel } from \"./elements\";\nimport { CompleteCheckbox } from \"../../components/CompleteCheckbox\";\nimport { IconButton } from \"../../components/IconButton\";\nimport {\n  ArrowLeftIcon,\n  CaretRightIcon,\n  CheckIcon,\n  SettingsIcon,\n} from \"../../components/Icons\";\nimport { List, ListItem } from \"../../components/List\";\nimport { Menu, MenuHeader } from \"../../components/Menu\";\nimport {\n  ResizeTransition,\n  SlideLeftRightTransition,\n} from \"../../components/Transitions\";\nimport { Caption1 } from \"../../components/Typography\";\n\n/* ------------------------------------------------------------------ */\n/* Board Settings menu — Grid granularity + Snap to Grid               */\n/* ------------------------------------------------------------------ */\n\nexport const BOARD_MENU_WIDTH = 264;\n\n/* The menu drills in place (index → Grid), so the paper clips the sliding\n   panels and gives them a positioning context (mirrors the project \"...\" menu). */\nexport const BoardMenuSliderStyle = createGlobalStyle`\n  .c-simple-menu__paper.board-settings-menu {\n    overflow: hidden;\n    position: relative;\n  }\n`;\n\nexport const StyledBoardSettingsMenu = styled.div`\n  .toggle-item {\n    justify-content: space-between;\n  }\n\n  .toggle-item .opt-left {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n  }\n\n  .toggle-item .grid-right {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    flex-shrink: 0;\n  }\n\n  .toggle-item .grid-caret {\n    flex-shrink: 0;\n    fill: var(--color-theme-600);\n  }\n\n  .toggle-item .c-complete-checkbox {\n    width: 16px;\n    height: 16px;\n    border-radius: 3px;\n    align-self: center;\n    flex-shrink: 0;\n  }\n\n  .snap-off {\n    opacity: 0.5;\n  }\n\n  .option-item {\n    justify-content: space-between;\n  }\n\n  .option-item .grid-check {\n    flex-shrink: 0;\n    fill: var(--color-primary);\n  }\n`;\n\nexport interface BoardSettingsMenuProps {\n  gridSize: GridSize;\n  snapToGrid: boolean;\n  onGridSizeChange: (value: GridSize) => void;\n  onSnapToGridChange: (value: boolean) => void;\n}\n\nexport const BoardSettingsMenu = ({\n  gridSize,\n  snapToGrid,\n  onGridSizeChange,\n  onSnapToGridChange,\n}: BoardSettingsMenuProps): ReactElement => {\n  const [open, setOpen] = useState(false);\n  const [view, setView] = useState<\"index\" | \"grid\">(\"index\");\n  const [isLeft, setIsLeft] = useState(true);\n  const [height, setHeight] = useState(0);\n\n  const measure = useCallback((node: HTMLDivElement | null) => {\n    if (node) {\n      setHeight(node.offsetHeight);\n    }\n  }, []);\n\n  const goToGrid = (): void => {\n    setView(\"grid\");\n    setIsLeft(true);\n  };\n\n  const backToIndex = (): void => {\n    setView(\"index\");\n    setIsLeft(false);\n  };\n\n  const handleClose = (): void => {\n    setOpen(false);\n    setView(\"index\");\n    setIsLeft(true);\n  };\n\n  const snapDisabled = gridSize === \"off\";\n\n  const indexView = (\n    <StyledBoardSettingsMenu>\n      <List style={{ padding: \"8px 0\" }} tabIndex={-1}>\n        <ListItem className=\"toggle-item\" onClick={goToGrid}>\n          <span className=\"opt-left\">Grid</span>\n          <span className=\"grid-right\">\n            <Caption1 color=\"secondary\">{gridLevel(gridSize).label}</Caption1>\n            <CaretRightIcon className=\"grid-caret\" width={16} height={16} />\n          </span>\n        </ListItem>\n        <ListItem\n          className={snapDisabled ? \"toggle-item snap-off\" : \"toggle-item\"}\n          onClick={\n            snapDisabled ? undefined : () => onSnapToGridChange(!snapToGrid)\n          }\n        >\n          <span className=\"opt-left\">Snap to Grid</span>\n          <CompleteCheckbox\n            primary\n            completed={snapToGrid}\n            disabled={snapDisabled}\n          />\n        </ListItem>\n      </List>\n    </StyledBoardSettingsMenu>\n  );\n\n  const gridView = (\n    <StyledBoardSettingsMenu>\n      <MenuHeader\n        title=\"Grid\"\n        leftElement={\n          <IconButton\n            type=\"button\"\n            variant=\"text gray\"\n            size=\"small\"\n            onClick={backToIndex}\n            aria-label=\"Back\"\n          >\n            <ArrowLeftIcon />\n          </IconButton>\n        }\n      />\n      <List style={{ padding: \"8px 0\" }} tabIndex={-1}>\n        {GRID_LEVELS.map((level) => (\n          <ListItem\n            key={level.value}\n            className=\"option-item\"\n            onClick={() => {\n              onGridSizeChange(level.value);\n              backToIndex();\n            }}\n          >\n            <span>{level.label}</span>\n            {level.value === gridSize ? (\n              <CheckIcon className=\"grid-check\" width={16} height={16} />\n            ) : null}\n          </ListItem>\n        ))}\n      </List>\n    </StyledBoardSettingsMenu>\n  );\n\n  return (\n    <>\n      <BoardMenuSliderStyle />\n      <Menu\n        open={open}\n        onOpen={() => setOpen(true)}\n        onClose={handleClose}\n        position=\"bottom-end\"\n        menuClassName=\"board-settings-menu\"\n        target={\n          <IconButton type=\"button\" variant=\"text gray\" active={open}>\n            <SettingsIcon />\n          </IconButton>\n        }\n      >\n        <ResizeTransition in style={{ height, width: BOARD_MENU_WIDTH }}>\n          <div style={{ position: \"relative\", overflow: \"hidden\" }}>\n            <SlideLeftRightTransition\n              in={view === \"index\"}\n              direction={isLeft ? \"left\" : \"right\"}\n            >\n              <div ref={measure} style={{ width: BOARD_MENU_WIDTH }}>\n                {indexView}\n              </div>\n            </SlideLeftRightTransition>\n            <SlideLeftRightTransition\n              in={view === \"grid\"}\n              direction={isLeft ? \"left\" : \"right\"}\n            >\n              <div ref={measure} style={{ width: BOARD_MENU_WIDTH }}>\n                {gridView}\n              </div>\n            </SlideLeftRightTransition>\n          </div>\n        </ResizeTransition>\n      </Menu>\n    </>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,51 @@
+import React, { ReactElement, ReactNode } from "react";
+export declare const ToolSurface: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare 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";
+export declare const StyledBottomDock: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledShapePicker: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledHint: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../..").ICaptionProps & Omit<import("../../components/Typography/Typography").ITypographyProps, "variant" | "weight"> & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const TOOL_HINTS: {
+    readonly circle: "Click to drop a default circle, or draw one to size. Press O for a circle.";
+    readonly roundedRectangle: "Click to drop a default rectangle, or draw one to size. Press R for a rectangle.";
+    readonly triangle: "Click to drop a default triangle, or draw one to size. Press Y for a triangle.";
+    readonly connector: "Drag from one element to another to connect them. Press C to connect.";
+    readonly link: "Draw a box to place a link, or paste a URL anywhere. Press L for link.";
+    readonly file: "Draw a box to place a file, or drop one on the board. Press F for file.";
+    readonly sticky: "Click anywhere on the canvas to drop a sticky note. Press S for a sticky note.";
+    readonly text: "Click anywhere on the canvas to start typing. Press T for text.";
+    readonly draw: "Click and drag to draw freehand. Press D for the pen.";
+    readonly shapes: "Start drawing the shape on canvas to see the result. Press R to draw a rectangle.";
+};
+export type ToolHintKey = keyof typeof TOOL_HINTS;
+export type ShapeTool = "circle" | "roundedRectangle" | "triangle";
+/**
+ * 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.
+ */
+export type BoardTool = "select" | "link" | "file" | ShapeTool;
+export declare const SHAPE_TOOLS: readonly ShapeTool[];
+export declare const isShapeTool: (tool: BoardTool) => tool is ShapeTool;
+export declare const SHAPE_DEFAULT_SIZES: Record<ShapeTool, {
+    width: number;
+    height: number;
+}>;
+export declare const CARD_PREVIEW_HEIGHT = 240;
+/** The kinds of card the draw gesture can place. */
+export type DrawableTool = Exclude<BoardTool, "select">;
+export interface ToolButtonProps {
+    tip: string;
+    active?: boolean;
+    children: ReactNode;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}
+export declare const ToolButton: ({ tip, active, children, onClick, onMouseEnter, onMouseLeave, }: ToolButtonProps) => ReactElement;
+export interface BottomDockProps {
+    activeTool: BoardTool;
+    onToolChange: (tool: BoardTool) => void;
+}
+export declare const BottomDock: ({ activeTool, onToolChange, }: BottomDockProps) => ReactElement;
+//# sourceMappingURL=bottomDock.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bottomDock.d.ts","sourceRoot":"","sources":["../../../../src/presentation/whiteboard/bottomDock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAyBjE,eAAO,MAAM,WAAW,oEASvB,CAAC;AAGF,eAAO,MAAM,eAAe,sJAQ3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAU5B,CAAC;AAGF,eAAO,MAAM,iBAAiB,oEAAwB,CAAC;AAIvD,eAAO,MAAM,UAAU,mQAQtB,CAAC;AAGF,eAAO,MAAM,UAAU;;;;;;;;;;;CAiBb,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,UAAU,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,kBAAkB,GAAG,UAAU,CAAC;AAEnE;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAE/D,eAAO,MAAM,WAAW,EAAE,SAAS,SAAS,EAI3C,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,MAAM,SAAS,KAAG,IAAI,IAAI,SACH,CAAC;AAIpD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CACtC,SAAS,EACT;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAKlC,CAAC;AAIF,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAEvC,oDAAoD;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAExD,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,GAAI,iEAOxB,eAAe,KAAG,YAYpB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,SAAS,CAAC;IACtB,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACzC;AAGD,eAAO,MAAM,UAAU,GAAI,+BAGxB,eAAe,KAAG,YAwGpB,CAAC"}

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

@@ -0,0 +1,162 @@
+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 { Tooltip } from "../../components/Tooltip";
+import { Caption1 } from "../../components/Typography";
+
+/* ------------------------------------------------------------------ */
+/* Floating toolbar surfaces                                           */
+/* ------------------------------------------------------------------ */
+
+/* A floating, rounded toolbar surface (paper + shadow). */
+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);"]);
+
+/* 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";
+export const StyledBottomDock = styled.div.withConfig({
+  displayName: "bottomDock__StyledBottomDock",
+  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",
+  componentId: "sc-1xsxwg0-2"
+})([""]);
+
+/* Reserve two Caption1 lines (2 × 16px) so showing/hiding the hint never
+   shifts the dock; visibility keeps the reserved space when hidden. */
+export const StyledHint = styled(Caption1).withConfig({
+  displayName: "bottomDock__StyledHint",
+  componentId: "sc-1xsxwg0-3"
+})(["text-align:center;padding:0 16px;min-height:32px;&.hint-hidden{visibility:hidden;}"]);
+
+/* Per-tool hint shown under the dock only while that tool is hovered. */
+export const TOOL_HINTS = {
+  circle: "Click to drop a default circle, or draw one to size. Press O for a circle.",
+  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.",
+  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."
+};
+
+/**
+ * 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.
+ */
+
+export const SHAPE_TOOLS = ["circle", "roundedRectangle", "triangle"];
+export const isShapeTool = tool => SHAPE_TOOLS.includes(tool);
+
+/* 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 = {
+  roundedRectangle: {
+    width: 100,
+    height: 60
+  },
+  circle: {
+    width: 80,
+    height: 80
+  },
+  triangle: {
+    width: 80,
+    height: 80
+  }
+};
+
+/* Cards are auto-height, so their hover preview uses the app's nominal wire
+   height (DEFAULT_LINK_CARD_SIZE / DEFAULT_FILE_CARD_SIZE). */
+export const CARD_PREVIEW_HEIGHT = 240;
+
+/** The kinds of card the draw gesture can place. */
+
+export const ToolButton = _ref => {
+  let tip = _ref.tip,
+    active = _ref.active,
+    children = _ref.children,
+    onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave;
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: tip
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "text gray",
+    active: active,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, children));
+};
+/* Bottom-centre tool dock (shape picker + main toolbar + hint). */
+export const BottomDock = _ref2 => {
+  let activeTool = _ref2.activeTool,
+    onToolChange = _ref2.onToolChange;
+  const _useState = useState(null),
+    hoverHint = _useState[0],
+    setHoverHint = _useState[1];
+  const hoverProps = tool => ({
+    onMouseEnter: () => setHoverHint(TOOL_HINTS[tool]),
+    onMouseLeave: () => setHoverHint(null)
+  });
+
+  /* An armed tool keeps its hint up after the pointer leaves the dock — the
+     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",
+    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",
+    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",
+    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, {
+    title: "Sticky Note"
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+    variant: "text gray"
+  }, hoverProps("sticky")), /*#__PURE__*/React.createElement(NoteIcon, null))), /*#__PURE__*/React.createElement(ToolButton, _extends({
+    tip: "Text"
+  }, hoverProps("text")), /*#__PURE__*/React.createElement(TextIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
+    tip: "Draw"
+  }, hoverProps("draw")), /*#__PURE__*/React.createElement(DrawIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
+    tip: "Shape"
+  }, hoverProps("shapes")), /*#__PURE__*/React.createElement(ShapesIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
+    tip: "Connect"
+  }, hoverProps("connector")), /*#__PURE__*/React.createElement(ConnectionIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
+    tip: "Link",
+    active: activeTool === "link",
+    onClick: () => onToolChange(activeTool === "link" ? "select" : "link")
+  }, hoverProps("link")), /*#__PURE__*/React.createElement(InsertLinkIcon, null)), /*#__PURE__*/React.createElement(ToolButton, _extends({
+    tip: "File",
+    active: activeTool === "file",
+    onClick: () => onToolChange(activeTool === "file" ? "select" : "file")
+  }, hoverProps("file")), /*#__PURE__*/React.createElement(AttachmentIcon, null))), /*#__PURE__*/React.createElement(StyledHint, {
+    color: "tertiary",
+    className: hint ? undefined : "hint-hidden"
+  }, hint != null ? hint : " "));
+};
+//# sourceMappingURL=bottomDock.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,61 @@
+import React, { ReactElement } from "react";
+import { BoardTool } from "./bottomDock";
+import { CanvasElementDef, GridSize, ShapeElementState, StickyTextStyle } from "./elements";
+import { FileElementDef } from "./fileElement";
+import { LinkElementDef } from "./linkElement";
+/**
+ * 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
+ * must not start a board drag.
+ *
+ * The resize grip needs no entry here: the shipped handle calls
+ * `preventDefault()` on pointerdown, which suppresses the compatibility mouse
+ * events entirely, so a grip press never reaches this at all.
+ */
+export declare const NO_DRAG_SELECTOR = "a, button, input, textarea, [data-no-drag]";
+/**
+ * …except a control that IS the whole card.
+ *
+ * A placeholder is one big button filling its card, so treating it as a control
+ * left no surface to grab and the card could not be moved at all. Marked
+ * drag-through, it does both: moving the pointer drags the card, and releasing
+ * without moving is still a click that opens the editor or the file picker.
+ * (Atlassian's rule — make a handle draggable, not the whole element — assumes
+ * the element has some non-interactive surface. This one has none.)
+ */
+export declare const DRAG_THROUGH_SELECTOR = "[data-drag-through]";
+export interface CanvasElementsProps {
+    gridSize: GridSize;
+    snapToGrid: boolean;
+    activeTool: BoardTool;
+    onToolUsed: () => void;
+    selectedId: string | null;
+    onSelectedIdChange: React.Dispatch<React.SetStateAction<string | null>>;
+    positions: Record<string, {
+        x: number;
+        y: number;
+    }>;
+    setPositions: React.Dispatch<React.SetStateAction<Record<string, {
+        x: number;
+        y: number;
+    }>>>;
+    shapes: Record<string, ShapeElementState>;
+    setShapes: React.Dispatch<React.SetStateAction<Record<string, ShapeElementState>>>;
+    stickyStyle: StickyTextStyle;
+    setStickyStyle: React.Dispatch<React.SetStateAction<StickyTextStyle>>;
+    links: LinkElementDef[];
+    setLinks: React.Dispatch<React.SetStateAction<LinkElementDef[]>>;
+    files: FileElementDef[];
+    setFiles: React.Dispatch<React.SetStateAction<FileElementDef[]>>;
+    createdShapes: CanvasElementDef[];
+    setCreatedShapes: React.Dispatch<React.SetStateAction<CanvasElementDef[]>>;
+    sizes: Record<string, {
+        width: number;
+        height: number;
+    }>;
+    rotations: Record<string, number>;
+    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;
+//# sourceMappingURL=canvasElements.d.ts.map

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

@@ -0,0 +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"}