@activecollab/components 2.0.397 → 2.0.399

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

@@ -0,0 +1,966 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.outlineLabel = exports.UNGROUPED = exports.StyledSidebarHeader = exports.StyledPanelChooseSlot = exports.StyledOutlineTypeIcon = exports.StyledOutlineToggle = exports.StyledOutlineSignifiers = exports.StyledOutlineSidebar = exports.StyledOutlineRow = exports.StyledOutlineResizer = exports.StyledOutlineName = exports.StyledOutlineGroupRow = exports.StyledOutlineElementMenu = exports.StyledOutlineCounter = exports.StyledOutlineChildRow = exports.StyledOutlineBody = exports.StyledNewGroupRow = exports.StyledInfoPanel = exports.StyledChooseRow = exports.OutlineMenuSliderStyle = exports.OutlineGroupOptionsMenu = exports.OutlineElementOptionsMenu = exports.OutlineCounter = exports.OUTLINE_WIDTH = exports.OUTLINE_TYPE_LABELS = exports.OUTLINE_TYPE_ICONS = exports.OUTLINE_MIN_WIDTH = exports.OUTLINE_MENU_WIDTH = exports.OUTLINE_MENU_LIST_STYLE = exports.OUTLINE_MAX_WIDTH = exports.OUTLINE_GROUPS = exports.OUTLINE_ELEMENTS = exports.LeftSidebar = exports.LeftMenuContents = exports.InfoPanelContent = exports.INFO_ROWS = exports.ARRANGE_ITEMS = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _elements = require("./elements");
+var _peopleMenu = require("./peopleMenu");
+var _Button = require("../../components/Button");
+var _Chip = require("../../components/Chip");
+var _ChooseV = require("../../components/ChooseV2");
+var _EditableText = require("../../components/EditableText");
+var _IconButton = require("../../components/IconButton");
+var _Icons = require("../../components/Icons");
+var _List = require("../../components/List");
+var _Menu = require("../../components/Menu");
+var _Signifier = require("../../components/Signifier");
+var _Tooltip = require("../../components/Tooltip");
+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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/* ------------------------------------------------------------------ */
+/* Outline sidebar                                                     */
+/* ------------------------------------------------------------------ */
+
+/* An OUTLINE, not a layers panel. Whiteboard elements are a flat list today
+   with no nesting and no names, so the hierarchy here is AUTHORED rather than
+   derived from z-order or spatial containment: the user creates groups, names
+   things, and drags to order them, and all of that is persisted.
+   Deliberately excluded: stacking order. z-order stays on the element context
+   menu (send to front / back / forward / backward) and the sidebar never shows
+   or edits it — the outline order and the paint order are different questions,
+   and conflating them is what makes layers panels confusing on boards that are
+   really structured documents.
+
+   The model this prototype stands in for:
+     GroupElement   a new element type on the single-table-inheritance
+                    `whiteboard_elements` table — no migration needed, and it
+                    inherits ops, realtime, undo/redo and trash for free.
+                    Element.jsx's render switch already returns null by
+                    default, so a group draws nothing on the canvas. It must be
+                    filtered out of the spatial index, marquee select and the
+                    z-order sort.
+     name           a real authored field, separate from `content` (the text
+                    painted on the canvas). Needed because the eventual goal is
+                    exporting the outline as a document, and `content` is empty
+                    on every freshly drawn shape and absent on freehand.
+     outlinePosition
+                    integer ordering SCOPED PER CONTAINER — groups ordered
+                    among themselves, elements ordered within their group.
+                    Named to avoid colliding with `element.position`, which is
+                    already the {x, y} canvas coordinate. Reordering follows
+                    the house TaskReorderer contract: the client sends the full
+                    ordered id list, the server renumbers 1..N in one
+                    transaction. Here that is a new `reorder` op on the
+                    existing ops pipeline, so it inherits undo/redo, the id_map
+                    reconcile and the realtime merge.
+
+   ONE level of nesting only. Groups cannot contain groups — an exported
+   document does not want arbitrarily deep headings, and multi-level grouping
+   is a later, separate model. */
+
+/* The local `Glyph` type is for this story's hand-drawn SVGs; the DS icons are
+   forwardRef components, so the map needs the wider component type. */
+
+var OUTLINE_TYPE_ICONS = exports.OUTLINE_TYPE_ICONS = {
+  circle: _Icons.CircleIcon,
+  roundedRectangle: _Icons.RoundedRectangleIcon,
+  triangle: _Icons.TriangleIcon,
+  postit: _Icons.NoteIcon,
+  text: _Icons.TextIcon,
+  freehand: _Icons.DrawIcon,
+  link: _Icons.InsertLinkIcon,
+  file: _Icons.AttachmentIcon
+};
+
+/* Fallback label when an element has no name. Deliberately reads as a
+   PLACEHOLDER (muted + italic) rather than as a name, because an unnamed
+   element exports as nothing — the styling is the warning. */
+var OUTLINE_TYPE_LABELS = exports.OUTLINE_TYPE_LABELS = {
+  circle: "Circle",
+  roundedRectangle: "Rounded Rectangle",
+  triangle: "Triangle",
+  postit: "Sticky Note",
+  text: "Text",
+  freehand: "Freehand",
+  link: "Link",
+  file: "File"
+};
+/* Ids prefixed `shape-` / `sticky` are the elements really on the canvas, so
+   selection syncs both ways for them. The rest stand in for the parts of a
+   bigger board scrolled out of view — a four-element outline would not show
+   whether the grouping reads well. */
+var OUTLINE_GROUPS = exports.OUTLINE_GROUPS = [{
+  id: "group-discovery",
+  name: "Discovery phase"
+}, {
+  id: "group-sketches",
+  name: "Solution sketches"
+}, {
+  id: "group-questions",
+  name: "Open questions"
+}];
+var OUTLINE_ELEMENTS = exports.OUTLINE_ELEMENTS = [{
+  id: "sticky",
+  name: "Interview five customers",
+  type: "postit",
+  connections: 2,
+  groupId: "group-discovery"
+}, {
+  id: "shape-rounded",
+  name: "Problem statement",
+  type: "roundedRectangle",
+  connections: 3,
+  groupId: "group-discovery"
+}, {
+  id: "outline-freehand",
+  name: null,
+  type: "freehand",
+  groupId: "group-discovery"
+}, {
+  id: "shape-circle",
+  name: "Success metric",
+  type: "circle",
+  locked: true,
+  connections: 1,
+  groupId: "group-discovery"
+}, {
+  id: "outline-sketch-link",
+  name: "Competitor teardown",
+  type: "link",
+  groupId: "group-sketches"
+}, {
+  id: "outline-sketch-file",
+  name: "Wireframes v3.pdf",
+  type: "file",
+  connections: 1,
+  groupId: "group-sketches"
+}, {
+  id: "outline-sketch-text",
+  name: null,
+  type: "text",
+  groupId: "group-sketches"
+},
+/* A deliberately long name, so the truncation and the right-edge behaviour of
+   the signifiers and the counter are visible in the story. */
+{
+  id: "outline-parking",
+  name: "Parking lot for everything we could not agree on today",
+  type: "postit",
+  connections: 4,
+  locked: true,
+  groupId: null
+}, {
+  id: "shape-triangle",
+  name: null,
+  type: "triangle",
+  groupId: null
+}, {
+  id: "outline-q3",
+  name: "Revisit in Q3",
+  type: "text",
+  connections: 12,
+  groupId: null
+}];
+
+/* Min is the point below which a group name plus its counter stops being
+   readable; max follows the common side-panel rule of thumb of 3x the min, past
+   which the panel competes with the canvas for the screen rather than annotating
+   it. The default sits just above the min — panels of this sort open narrow and
+   are widened on demand, not the other way round. */
+var OUTLINE_MIN_WIDTH = exports.OUTLINE_MIN_WIDTH = 260;
+var OUTLINE_MAX_WIDTH = exports.OUTLINE_MAX_WIDTH = OUTLINE_MIN_WIDTH * 3;
+var OUTLINE_WIDTH = exports.OUTLINE_WIDTH = 320;
+var UNGROUPED = exports.UNGROUPED = "__ungrouped__";
+var StyledOutlineSidebar = exports.StyledOutlineSidebar = _styledComponents.default.aside.withConfig({
+  displayName: "outline__StyledOutlineSidebar",
+  componentId: "sc-173k9fg-0"
+})(["flex-shrink:0;position:relative;box-sizing:border-box;display:flex;flex-direction:column;border-right:1px solid var(--selectable);background-color:var(--page-paper-main);font-family:-apple-system,BlinkMacSystemFont,\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;"]);
+
+/* Grab strip on the RIGHT edge, because the panel is docked left — dragging it
+   right widens. It sits outside the row list and uses mouse events rather than
+   HTML5 drag, so it can never be mistaken for a row reorder. 3px wide with a
+   larger invisible hit area is the usual compromise: easy to grab. The border
+   line itself stays the selectable grey until hover paints the active token
+   over it. */
+var StyledOutlineResizer = exports.StyledOutlineResizer = _styledComponents.default.div.withConfig({
+  displayName: "outline__StyledOutlineResizer",
+  componentId: "sc-173k9fg-1"
+})(["position:absolute;top:0;bottom:0;right:-4px;width:8px;cursor:col-resize;z-index:2;&::after{content:\"\";position:absolute;top:0;bottom:0;left:50%;margin-left:-0.5px;width:1px;background-color:var(--selectable-active);opacity:0;transition:opacity 150ms ease;}&:hover::after,&.resizing::after{opacity:1;}"]);
+var StyledOutlineBody = exports.StyledOutlineBody = _styledComponents.default.div.withConfig({
+  displayName: "outline__StyledOutlineBody",
+  componentId: "sc-173k9fg-2"
+})(["flex:1;overflow-y:auto;padding:6px 0 24px;"]);
+
+/* Rows are bordered, not carded — the outline is a dense list and rounded
+   tiles at this density read as clutter. */
+/* Row geometry is My Work's, not something invented for this sidebar: the app's
+   `ListItem` is `tw-w-full tw-flex tw-items-center tw-h-10` — a fixed 40px row —
+   with `border-bottom: 1px solid var(--color-theme-300)` from `.list-item-wrapper`
+   and `background-color: var(--color-theme-200)` on `.task-list-item:hover`.
+   Reusing those exact values is what makes the outline read as an ActiveCollab
+   list rather than as a bespoke panel. */
+var StyledOutlineRow = exports.StyledOutlineRow = _styledComponents.default.div.withConfig({
+  displayName: "outline__StyledOutlineRow",
+  componentId: "sc-173k9fg-3"
+})(["display:flex;align-items:center;height:40px;box-sizing:border-box;padding-right:8px;cursor:pointer;position:relative;border-bottom:1px solid var(--color-theme-300);&:hover{background-color:var(--color-theme-200);}&.selected{background-color:var(--color-theme-200);box-shadow:inset 2px 0 0 0 ", ";}&.drop-before::after,&.drop-after::after{content:\"\";position:absolute;left:0;right:0;height:2px;background-color:", ";z-index:1;}&.drop-before::after{top:-1px;}&.drop-after::after{bottom:-1px;}&.drop-into{background-color:var(--color-theme-200);box-shadow:inset 0 0 0 1px ", ";}&.dragging{opacity:0.4;}.outline-trailing{flex-shrink:0;display:flex;align-items:center;}.outline-options{margin-left:auto;flex-shrink:0;display:flex;align-items:center;padding-left:4px;}.outline-hover{opacity:0;transition:opacity 200ms ease;}&:hover .outline-hover,.outline-hover.open,.outline-hover:focus-within{opacity:1;}"], _elements.SELECTION_BLUE, _elements.SELECTION_BLUE, _elements.SELECTION_BLUE);
+
+/* 8px so the 24px toggle sits in the same left rail as the app's ExpandToggle,
+   scaled down from My Work's 24px page margin for a 300px panel. */
+var StyledOutlineGroupRow = exports.StyledOutlineGroupRow = (0, _styledComponents.default)(StyledOutlineRow).withConfig({
+  displayName: "outline__StyledOutlineGroupRow",
+  componentId: "sc-173k9fg-4"
+})(["padding-left:8px;"]);
+
+/* 32px = where the group's 24px toggle ends. The child's type icon starts
+   exactly there, putting the child NAME one 16px step right of the group name —
+   enough to read as nested without a staircase, which is all one level of
+   nesting ever needs. */
+var StyledOutlineChildRow = exports.StyledOutlineChildRow = (0, _styledComponents.default)(StyledOutlineRow).withConfig({
+  displayName: "outline__StyledOutlineChildRow",
+  componentId: "sc-173k9fg-5"
+})(["padding-left:32px;"]);
+
+/* Matches the app's ExpandToggle exactly: CollapseExpandSingleIcon at its
+   intrinsic 24px, rotate(0) expanded and rotate(180deg) collapsed, over
+   `transition-transform` 200ms. */
+var StyledOutlineToggle = exports.StyledOutlineToggle = _styledComponents.default.button.withConfig({
+  displayName: "outline__StyledOutlineToggle",
+  componentId: "sc-173k9fg-6"
+})(["border:0;padding:0;margin:0 8px 0 0;background:none;cursor:pointer;display:flex;align-items:center;flex-shrink:0;transition:transform 200ms ease;&.collapsed{transform:rotate(180deg);}"]);
+
+/* Same treatment as the count badges on the System Settings pages — a Chip on
+   var(--color-theme-300) with var(--color-theme-900) text — at the 18px small
+   size, which sits inside a 40px row without crowding it. Wrapped so the 8px
+   left margin is one decision rather than repeated at each call site: it is what
+   keeps the chip a fixed distance from the name whether the name is an
+   EditableText (whose input carries its own 4px padding) or plain Typography. */
+var StyledOutlineCounter = exports.StyledOutlineCounter = _styledComponents.default.span.withConfig({
+  displayName: "outline__StyledOutlineCounter",
+  componentId: "sc-173k9fg-7"
+})(["display:flex;align-items:center;flex-shrink:0;margin-left:8px;"]);
+var OutlineCounter = exports.OutlineCounter = function OutlineCounter(_ref) {
+  var count = _ref.count;
+  return /*#__PURE__*/_react.default.createElement(StyledOutlineCounter, {
+    className: "outline-trailing"
+  }, /*#__PURE__*/_react.default.createElement(_Chip.Chip, {
+    label: String(count),
+    backgroundColor: "var(--color-theme-300)",
+    color: "var(--color-theme-900)",
+    size: "small"
+  }));
+};
+
+/* The 2px separator dot is a house convention rather than part of the DS
+   Signifier: `_components.task-signifiers.less` puts it on `.c-signifier:before`
+   at 2px square, `var(--color-theme-600)`, `margin: 0 6px`, with no
+   `:not(:first-child)` guard — so the first signifier gets a leading dot too,
+   which is exactly what separates it from the name. */
+var StyledOutlineSignifiers = exports.StyledOutlineSignifiers = _styledComponents.default.span.withConfig({
+  displayName: "outline__StyledOutlineSignifiers",
+  componentId: "sc-173k9fg-8"
+})(["display:inline-flex;align-items:center;flex-shrink:0;.c-signifier::before{content:\"\";flex-shrink:0;width:2px;height:2px;margin:0 6px;border-radius:100%;background-color:var(--color-theme-600);}"]);
+
+/* The DS EditableText is an always-live input styled as text — it reveals its
+   border on hover and focus rather than swapping into an edit mode. That makes
+   it a click-to-edit target, which competes with the row's own click. Element
+   rows therefore keep it `disabled` until the row is SELECTED: the first click
+   selects, and only then does the name accept a caret. Group rows have no
+   selected state, so their name is always live (matching the task-list header
+   in ListView) and the toggle, count and row padding carry the collapse. */
+/* 24px reserved so the icon column is stable whether or not a type icon is a
+   perfect 16px square, and so it lines up with the group toggle above it. */
+var StyledOutlineTypeIcon = exports.StyledOutlineTypeIcon = _styledComponents.default.span.withConfig({
+  displayName: "outline__StyledOutlineTypeIcon",
+  componentId: "sc-173k9fg-9"
+})(["display:flex;align-items:center;justify-content:flex-start;width:24px;flex-shrink:0;"]);
+var StyledOutlineName = exports.StyledOutlineName = _styledComponents.default.div.withConfig({
+  displayName: "outline__StyledOutlineName",
+  componentId: "sc-173k9fg-10"
+})(["display:flex;align-items:center;flex:0 1 auto;min-width:0;> div{max-width:100%;}> .typography{display:block;padding-left:4px;padding-right:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}&.unnamed .presentation,&.unnamed input{font-style:italic;color:var(--color-theme-500);}"]);
+var outlineLabel = exports.outlineLabel = function outlineLabel(element) {
+  var _element$name;
+  return (_element$name = element.name) !== null && _element$name !== void 0 ? _element$name : OUTLINE_TYPE_LABELS[element.type];
+};
+
+/* Both menus follow the shared TaskListOptionsMenu shape: Menu in normal mode
+   (260px bubble), an IconButton + TreeDots trigger whose `.open` class keeps it
+   visible while the menu is up, and a flat List of leading-icon ListItems
+   grouped by ListSeparator. Every row is an icon plus a caption — no submenu
+   rows and no icon-only action strip, so there is exactly one way to read the
+   menu.
+
+   Note where STACKING lives: bring to front / send to back are here, not in the
+   outline. The outline orders the document; the menu orders the pixels. Keeping
+   them apart is the whole reason the sidebar can be an outline rather than a
+   layers panel. */
+var OUTLINE_MENU_LIST_STYLE = exports.OUTLINE_MENU_LIST_STYLE = {
+  padding: "8px 0"
+};
+var OUTLINE_MENU_WIDTH = exports.OUTLINE_MENU_WIDTH = 264;
+
+/* Same drill-in mechanics as the board Settings menu: the paper clips the two
+   sliding panels and gives them a positioning context. */
+var OutlineMenuSliderStyle = exports.OutlineMenuSliderStyle = (0, _styledComponents.createGlobalStyle)([".c-simple-menu__paper.outline-element-menu{overflow:hidden;position:relative;}"]);
+var StyledOutlineElementMenu = exports.StyledOutlineElementMenu = _styledComponents.default.div.withConfig({
+  displayName: "outline__StyledOutlineElementMenu",
+  componentId: "sc-173k9fg-11"
+})([".drill-item{justify-content:space-between;}.drill-item .opt-left{display:flex;align-items:center;min-width:0;}.drill-item .opt-left > svg:first-child{margin-right:8px;}.drill-item .drill-caret{flex-shrink:0;fill:var(--color-theme-600);}"]);
+var ARRANGE_ITEMS = exports.ARRANGE_ITEMS = [{
+  label: "Bring to Front",
+  Icon: _Icons.LayerFrontIcon
+}, {
+  label: "Send Forward",
+  Icon: _Icons.LayerForwardIcon
+}, {
+  label: "Send Backward",
+  Icon: _Icons.LayerBackwardIcon
+}, {
+  label: "Send to Back",
+  Icon: _Icons.LayerBackIcon
+}];
+var OutlineElementOptionsMenu = exports.OutlineElementOptionsMenu = function OutlineElementOptionsMenu(_ref2) {
+  var locked = _ref2.locked,
+    onToggleLock = _ref2.onToggleLock;
+  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 goToArrange = function goToArrange() {
+    setView("arrange");
+    setIsLeft(true);
+  };
+  var backToIndex = function backToIndex() {
+    setView("index");
+    setIsLeft(false);
+  };
+  var handleClose = function handleClose() {
+    setOpen(false);
+    setView("index");
+    setIsLeft(true);
+  };
+  var indexView = /*#__PURE__*/_react.default.createElement(StyledOutlineElementMenu, null, /*#__PURE__*/_react.default.createElement(_List.List, {
+    style: OUTLINE_MENU_LIST_STYLE,
+    tabIndex: -1
+  }, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_Icons.EditIcon, null), "Rename"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_Icons.DuplicateIcon, null), "Duplicate"), /*#__PURE__*/_react.default.createElement(_List.ListSeparator, null), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_Icons.FolderMoveIcon, null), "Move to Group"), /*#__PURE__*/_react.default.createElement(_List.ListItem, {
+    className: "drill-item",
+    onClick: goToArrange
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "opt-left"
+  }, /*#__PURE__*/_react.default.createElement(_Icons.LayersIcon, null), "Arrange"), /*#__PURE__*/_react.default.createElement(_Icons.CaretRightIcon, {
+    className: "drill-caret",
+    width: 16,
+    height: 16
+  })), /*#__PURE__*/_react.default.createElement(_List.ListSeparator, null), /*#__PURE__*/_react.default.createElement(_List.ListItem, {
+    onClick: function onClick() {
+      onToggleLock();
+      handleClose();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icons.LockIcon, null), locked ? "Unlock" : "Lock"), /*#__PURE__*/_react.default.createElement(_List.ListSeparator, null), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_Icons.TrashIcon, null), "Move to Trash")));
+  var arrangeView = /*#__PURE__*/_react.default.createElement(StyledOutlineElementMenu, null, /*#__PURE__*/_react.default.createElement(_Menu.MenuHeader, {
+    title: "Arrange",
+    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: OUTLINE_MENU_LIST_STYLE,
+    tabIndex: -1
+  }, ARRANGE_ITEMS.map(function (_ref3) {
+    var label = _ref3.label,
+      Icon = _ref3.Icon;
+    return /*#__PURE__*/_react.default.createElement(_List.ListItem, {
+      key: label,
+      onClick: backToIndex
+    }, /*#__PURE__*/_react.default.createElement(Icon, null), label);
+  })));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(OutlineMenuSliderStyle, null), /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+    open: open,
+    onOpen: function onOpen() {
+      return setOpen(true);
+    },
+    onClose: handleClose,
+    position: "bottom-end",
+    menuClassName: "outline-element-menu",
+    target: /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+      type: "button",
+      variant: "text gray",
+      className: open ? "open" : undefined,
+      active: open
+    }, /*#__PURE__*/_react.default.createElement(_Icons.TreeDotsIcon, null))
+  }, /*#__PURE__*/_react.default.createElement(_Transitions.ResizeTransition, {
+    in: true,
+    style: {
+      height,
+      width: OUTLINE_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: OUTLINE_MENU_WIDTH
+    }
+  }, indexView)), /*#__PURE__*/_react.default.createElement(_Transitions.SlideLeftRightTransition, {
+    in: view === "arrange",
+    direction: isLeft ? "left" : "right"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: measure,
+    style: {
+      width: OUTLINE_MENU_WIDTH
+    }
+  }, arrangeView))))));
+};
+var OutlineGroupOptionsMenu = exports.OutlineGroupOptionsMenu = function OutlineGroupOptionsMenu() {
+  var _useState9 = (0, _react.useState)(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    open = _useState0[0],
+    setOpen = _useState0[1];
+  return /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+    open: open,
+    onOpen: function onOpen() {
+      return setOpen(true);
+    },
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    position: "bottom-end",
+    target: /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+      type: "button",
+      variant: "text gray",
+      className: open ? "open" : undefined,
+      active: open
+    }, /*#__PURE__*/_react.default.createElement(_Icons.TreeDotsIcon, null))
+  }, /*#__PURE__*/_react.default.createElement(_List.List, {
+    style: OUTLINE_MENU_LIST_STYLE,
+    tabIndex: -1
+  }, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_Icons.EditIcon, null), "Rename"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_Icons.DuplicateIcon, null), "Duplicate"), /*#__PURE__*/_react.default.createElement(_List.ListSeparator, null), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_Icons.FolderMoveIcon, null), "Ungroup"), /*#__PURE__*/_react.default.createElement(_List.ListSeparator, null), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, /*#__PURE__*/_react.default.createElement(_Icons.TrashIcon, null), "Move to Trash")));
+};
+var INFO_ROWS = exports.INFO_ROWS = [["Owner", "Ilija Studen"], ["Created", "Jul 30, 2026"], ["Members", "12"], ["Elements", "48"], ["Last edited", "2 hours ago"]];
+
+/* The upper-left menu — exit fullscreen, board name, the Show / Hide Sidebar
+   toggle and the people menu. It renders in one of two places: floating over the
+   board while the sidebar is closed, and inside the sidebar's header once it
+   opens, so the controls follow the panel rather than being shoved aside by it. */
+var LeftMenuContents = exports.LeftMenuContents = function LeftMenuContents(_ref4) {
+  var sidebarOpen = _ref4.sidebarOpen,
+    onToggleSidebar = _ref4.onToggleSidebar,
+    boardName = _ref4.boardName,
+    onRenameBoard = _ref4.onRenameBoard;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    title: "Back to Whiteboards"
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    variant: "text gray"
+  }, /*#__PURE__*/_react.default.createElement(_Icons.ArrowLeftIcon, null))), /*#__PURE__*/_react.default.createElement("span", {
+    className: "wb-title"
+  }, /*#__PURE__*/_react.default.createElement(_EditableText.EditableText, {
+    value: boardName,
+    variant: "Title 2",
+    weight: "bold",
+    onSave: function onSave(event) {
+      return onRenameBoard(event.target.value);
+    },
+    inputProps: {
+      maxLength: 150
+    }
+  })), /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    title: sidebarOpen ? "Hide Sidebar" : "Show Sidebar"
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    variant: "text gray",
+    onClick: onToggleSidebar
+  }, /*#__PURE__*/_react.default.createElement(_Icons.SidebarLeftIcon, null))), /*#__PURE__*/_react.default.createElement(_peopleMenu.WhiteboardPeopleMenu, null));
+};
+
+/* When the sidebar is open the left menu becomes its header: same controls, but
+   laid out as a flat 60px bar with the board name flexing to fill the middle. */
+var StyledSidebarHeader = exports.StyledSidebarHeader = _styledComponents.default.div.withConfig({
+  displayName: "outline__StyledSidebarHeader",
+  componentId: "sc-173k9fg-12"
+})(["display:flex;align-items:center;gap:2px;height:60px;padding:0 12px;box-sizing:border-box;flex-shrink:0;.wb-title{flex:1;min-width:0;margin:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}"]);
+
+/* Centered segmented switch between the dock's two panels; the active one is
+   highlighted. This row replaces the old per-panel header. */
+var StyledChooseRow = exports.StyledChooseRow = _styledComponents.default.div.withConfig({
+  displayName: "outline__StyledChooseRow",
+  componentId: "sc-173k9fg-13"
+})(["display:flex;justify-content:center;padding:12px 16px;flex-shrink:0;"]);
+
+/* The app renders the switch through ChooseV2 in a fixed 224px slot with the
+   button group centered inside it (the group alone is narrower than the slot,
+   and ChooseV2's own flex container leaves it at the left edge). */
+var StyledPanelChooseSlot = exports.StyledPanelChooseSlot = _styledComponents.default.div.withConfig({
+  displayName: "outline__StyledPanelChooseSlot",
+  componentId: "sc-173k9fg-14"
+})(["width:224px;.c-btn-group{margin:0 auto;}"]);
+var StyledInfoPanel = exports.StyledInfoPanel = _styledComponents.default.div.withConfig({
+  displayName: "outline__StyledInfoPanel",
+  componentId: "sc-173k9fg-15"
+})(["flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px;.info-meta{display:flex;flex-direction:column;gap:10px;}.info-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}"]);
+
+/* Mock only — the Info panel's content is a placeholder while the two-panel dock
+   is explored; the fields here are not the point. */
+var InfoPanelContent = exports.InfoPanelContent = function InfoPanelContent(_ref5) {
+  var boardName = _ref5.boardName;
+  return /*#__PURE__*/_react.default.createElement(StyledInfoPanel, null, /*#__PURE__*/_react.default.createElement(_Typography.Header3, {
+    color: "primary"
+  }, boardName), /*#__PURE__*/_react.default.createElement("div", {
+    className: "info-meta"
+  }, INFO_ROWS.map(function (_ref6) {
+    var _ref7 = _slicedToArray(_ref6, 2),
+      label = _ref7[0],
+      value = _ref7[1];
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "info-row",
+      key: label
+    }, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+      color: "secondary"
+    }, label), /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+      weight: "medium"
+    }, value));
+  })));
+};
+
+/* Centered text button below the group list — same text-gray treatment as the
+   old header icon (no outline, gray fill on hover), now with a label since it is
+   no longer squeezed into a header. */
+var StyledNewGroupRow = exports.StyledNewGroupRow = _styledComponents.default.div.withConfig({
+  displayName: "outline__StyledNewGroupRow",
+  componentId: "sc-173k9fg-16"
+})(["display:flex;justify-content:center;padding:12px 0 4px;svg{width:16px;height:16px;margin-right:6px;}"]);
+var LeftSidebar = exports.LeftSidebar = function LeftSidebar(_ref8) {
+  var selectedId = _ref8.selectedId,
+    onSelect = _ref8.onSelect,
+    activePanel = _ref8.activePanel,
+    onPanelChange = _ref8.onPanelChange,
+    sidebarOpen = _ref8.sidebarOpen,
+    onToggleSidebar = _ref8.onToggleSidebar,
+    boardName = _ref8.boardName,
+    onRenameBoard = _ref8.onRenameBoard;
+  var _useState1 = (0, _react.useState)(OUTLINE_WIDTH),
+    _useState10 = _slicedToArray(_useState1, 2),
+    width = _useState10[0],
+    setWidth = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    resizing = _useState12[0],
+    setResizing = _useState12[1];
+  var _useState13 = (0, _react.useState)(OUTLINE_GROUPS),
+    _useState14 = _slicedToArray(_useState13, 2),
+    groups = _useState14[0],
+    setGroups = _useState14[1];
+  var _useState15 = (0, _react.useState)(OUTLINE_ELEMENTS),
+    _useState16 = _slicedToArray(_useState15, 2),
+    elements = _useState16[0],
+    setElements = _useState16[1];
+  var _useState17 = (0, _react.useState)(["group-sketches"]),
+    _useState18 = _slicedToArray(_useState17, 2),
+    collapsed = _useState18[0],
+    setCollapsed = _useState18[1];
+  var _useState19 = (0, _react.useState)(null),
+    _useState20 = _slicedToArray(_useState19, 2),
+    dragId = _useState20[0],
+    setDragId = _useState20[1];
+  var _useState21 = (0, _react.useState)(null),
+    _useState22 = _slicedToArray(_useState21, 2),
+    dropSpot = _useState22[0],
+    setDropSpot = _useState22[1];
+  var isGroup = (0, _react.useCallback)(function (id) {
+    return groups.some(function (group) {
+      return group.id === id;
+    });
+  }, [groups]);
+  var membersOf = (0, _react.useCallback)(function (groupId) {
+    return elements.filter(function (element) {
+      return element.groupId === groupId;
+    });
+  }, [elements]);
+  var toggleCollapsed = (0, _react.useCallback)(function (id) {
+    setCollapsed(function (current) {
+      return current.includes(id) ? current.filter(function (entry) {
+        return entry !== id;
+      }) : [...current, id];
+    });
+  }, []);
+  var renameGroup = (0, _react.useCallback)(function (id, name) {
+    setGroups(function (current) {
+      return current.map(function (group) {
+        return group.id === id ? _objectSpread(_objectSpread({}, group), {}, {
+          name
+        }) : group;
+      });
+    });
+  }, []);
+  var renameElement = (0, _react.useCallback)(function (id, name) {
+    setElements(function (current) {
+      return current.map(function (element) {
+        return element.id === id ? _objectSpread(_objectSpread({}, element), {}, {
+          name
+        }) : element;
+      });
+    });
+  }, []);
+  var toggleLock = (0, _react.useCallback)(function (id) {
+    setElements(function (current) {
+      return current.map(function (element) {
+        return element.id === id ? _objectSpread(_objectSpread({}, element), {}, {
+          locked: !element.locked
+        }) : element;
+      });
+    });
+  }, []);
+
+  /* The gesture is tracked from its ORIGIN (pointer x + width at mousedown)
+     rather than from the pointer's absolute position, so the panel edge stays
+     locked to the cursor even once the width clamps at a bound — otherwise the
+     pointer drifts away from the edge and the panel jumps when it comes back.
+     Listeners go on window so the drag survives the pointer leaving the strip,
+     and body user-select is suspended so dragging does not select the rows. */
+  var startResize = (0, _react.useCallback)(function (event) {
+    var _event$currentTarget$, _event$currentTarget$2;
+    event.preventDefault();
+    var startX = event.clientX;
+    var startWidth = (_event$currentTarget$ = (_event$currentTarget$2 = event.currentTarget.parentElement) === null || _event$currentTarget$2 === void 0 ? void 0 : _event$currentTarget$2.offsetWidth) !== null && _event$currentTarget$ !== void 0 ? _event$currentTarget$ : 0;
+    var previousUserSelect = document.body.style.userSelect;
+    setResizing(true);
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "col-resize";
+    var handleMove = function handleMove(moveEvent) {
+      var next = startWidth + (moveEvent.clientX - startX);
+      setWidth(Math.min(OUTLINE_MAX_WIDTH, Math.max(OUTLINE_MIN_WIDTH, next)));
+    };
+    var _handleUp = function handleUp() {
+      setResizing(false);
+      document.body.style.userSelect = previousUserSelect;
+      document.body.style.cursor = "";
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", _handleUp);
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", _handleUp);
+  }, []);
+  var addGroup = (0, _react.useCallback)(function () {
+    setGroups(function (current) {
+      return [...current, {
+        id: "group-".concat(Date.now()),
+        name: "New group"
+      }];
+    });
+  }, []);
+
+  /* Reorder mirrors the server contract: splice the moved entry into its new
+     slot, then treat the resulting array order AS the 1..N renumbering the
+     server would write back. Groups reorder among groups; an element moves
+     within or between containers, and its groupId follows the drop target —
+     which is the whole of "one level of nesting" as an invariant, since a
+     group is never a valid child. */
+  var handleDrop = (0, _react.useCallback)(function () {
+    var draggedId = dragId;
+    var spot = dropSpot;
+    setDragId(null);
+    setDropSpot(null);
+    if (!draggedId || !spot || draggedId === spot.id) {
+      return;
+    }
+    if (isGroup(draggedId)) {
+      /* a group can only land among groups, never inside one */
+      if (spot.kind === "into" || !isGroup(spot.id)) {
+        return;
+      }
+      setGroups(function (current) {
+        var from = current.findIndex(function (group) {
+          return group.id === draggedId;
+        });
+        var next = [...current];
+        var _next$splice = next.splice(from, 1),
+          _next$splice2 = _slicedToArray(_next$splice, 1),
+          moved = _next$splice2[0];
+        var to = next.findIndex(function (group) {
+          return group.id === spot.id;
+        });
+        next.splice(spot.kind === "before" ? to : to + 1, 0, moved);
+        return next;
+      });
+      return;
+    }
+    setElements(function (current) {
+      var from = current.findIndex(function (element) {
+        return element.id === draggedId;
+      });
+      var next = [...current];
+      var _next$splice3 = next.splice(from, 1),
+        _next$splice4 = _slicedToArray(_next$splice3, 1),
+        moved = _next$splice4[0];
+      if (spot.kind === "into") {
+        var groupId = spot.id === UNGROUPED ? null : spot.id;
+        var last = next.reduce(function (acc, element, index) {
+          return element.groupId === groupId ? index : acc;
+        }, -1);
+        next.splice(last + 1, 0, _objectSpread(_objectSpread({}, moved), {}, {
+          groupId
+        }));
+        return next;
+      }
+      var target = next.find(function (element) {
+        return element.id === spot.id;
+      });
+      if (!target) {
+        return current;
+      }
+      var to = next.findIndex(function (element) {
+        return element.id === spot.id;
+      });
+      next.splice(spot.kind === "before" ? to : to + 1, 0, _objectSpread(_objectSpread({}, moved), {}, {
+        groupId: target.groupId
+      }));
+      return next;
+    });
+  }, [dragId, dropSpot, isGroup]);
+  var rowDragProps = (0, _react.useCallback)(function (id) {
+    return {
+      draggable: true,
+      onDragStart: function onDragStart(event) {
+        /* A live EditableText input sits inside the row, and dragging a text
+           selection inside it must not turn into a row reorder. */
+        if (event.target.closest("input")) {
+          event.preventDefault();
+          return;
+        }
+        event.stopPropagation();
+        setDragId(id);
+      },
+      onDragEnd: function onDragEnd() {
+        setDragId(null);
+        setDropSpot(null);
+      },
+      onDragOver: function onDragOver(event) {
+        if (!dragId || dragId === id) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        var box = event.currentTarget.getBoundingClientRect();
+        var isTopHalf = event.clientY - box.top < box.height / 2;
+
+        /* an element dragged onto a GROUP header joins that group; the
+           insertion halves are reserved for reordering groups themselves */
+        if (isGroup(id) && !isGroup(dragId)) {
+          setDropSpot({
+            kind: "into",
+            id
+          });
+          return;
+        }
+        setDropSpot({
+          kind: isTopHalf ? "before" : "after",
+          id
+        });
+      },
+      onDrop: function onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        handleDrop();
+      }
+    };
+  }, [dragId, handleDrop, isGroup]);
+  var dropClass = (0, _react.useCallback)(function (id) {
+    if (dragId === id) {
+      return "dragging";
+    }
+    if (!dropSpot || dropSpot.id !== id) {
+      return "";
+    }
+    return "drop-".concat(dropSpot.kind);
+  }, [dragId, dropSpot]);
+  var renderElementRow = function renderElementRow(element) {
+    var TypeIcon = OUTLINE_TYPE_ICONS[element.type];
+    var selected = element.id === selectedId;
+    return /*#__PURE__*/_react.default.createElement(StyledOutlineChildRow, _extends({
+      key: element.id,
+      className: "".concat(selected ? "selected" : "", " ").concat(dropClass(element.id)),
+      onClick: function onClick() {
+        return onSelect(element.id);
+      }
+    }, rowDragProps(element.id)), /*#__PURE__*/_react.default.createElement(StyledOutlineTypeIcon, null, /*#__PURE__*/_react.default.createElement(TypeIcon, {
+      width: 16,
+      height: 16,
+      fill: element.name ? "var(--color-theme-700)" : "var(--color-theme-500)"
+    })), /*#__PURE__*/_react.default.createElement(StyledOutlineName, {
+      className: element.name ? "" : "unnamed"
+    }, /*#__PURE__*/_react.default.createElement(_EditableText.EditableText, {
+      value: outlineLabel(element),
+      variant: "Body 2",
+      weight: "medium",
+      disabled: !selected,
+      onSave: function onSave(event) {
+        return renameElement(element.id, event.target.value);
+      },
+      inputProps: {
+        maxLength: 150
+      }
+    })), element.locked || element.connections ? /*#__PURE__*/_react.default.createElement(StyledOutlineSignifiers, {
+      className: "outline-trailing"
+    }, element.connections ? /*#__PURE__*/_react.default.createElement(_Signifier.Signifier, {
+      type: _Icons.DependencySmallIcon,
+      value: element.connections,
+      tooltipText: "".concat(element.connections, " ").concat(element.connections === 1 ? "connection" : "connections")
+    }) : null, element.locked ? /*#__PURE__*/_react.default.createElement(_Signifier.Signifier, {
+      type: _Icons.LockSmallIcon,
+      tooltipText: "Locked"
+    }) : null) : null, /*#__PURE__*/_react.default.createElement("span", {
+      className: "outline-options outline-hover"
+    }, /*#__PURE__*/_react.default.createElement(OutlineElementOptionsMenu, {
+      locked: Boolean(element.locked),
+      onToggleLock: function onToggleLock() {
+        return toggleLock(element.id);
+      }
+    })));
+  };
+  return /*#__PURE__*/_react.default.createElement(StyledOutlineSidebar, {
+    style: {
+      width
+    }
+  }, /*#__PURE__*/_react.default.createElement(StyledOutlineResizer, {
+    className: resizing ? "resizing" : "",
+    onMouseDown: startResize,
+    role: "separator",
+    "aria-orientation": "vertical",
+    "aria-label": "Resize outline"
+  }), /*#__PURE__*/_react.default.createElement(StyledSidebarHeader, null, /*#__PURE__*/_react.default.createElement(LeftMenuContents, {
+    sidebarOpen: sidebarOpen,
+    onToggleSidebar: onToggleSidebar,
+    boardName: boardName,
+    onRenameBoard: onRenameBoard
+  })), /*#__PURE__*/_react.default.createElement(StyledChooseRow, null, /*#__PURE__*/_react.default.createElement(StyledPanelChooseSlot, null, /*#__PURE__*/_react.default.createElement(_ChooseV.ChooseV2, {
+    required: true,
+    options: [{
+      id: "info",
+      name: "Info"
+    }, {
+      id: "outline",
+      name: "Outline"
+    }],
+    selected: [activePanel],
+    onChange: function onChange(selected) {
+      return onPanelChange(selected[0]);
+    }
+  }))), activePanel === "info" ? /*#__PURE__*/_react.default.createElement(InfoPanelContent, {
+    boardName: boardName
+  }) : null, activePanel === "outline" ? /*#__PURE__*/_react.default.createElement(StyledOutlineBody, null, /*#__PURE__*/_react.default.createElement(StyledOutlineGroupRow, {
+    className: (dropSpot === null || dropSpot === void 0 ? void 0 : dropSpot.kind) === "into" && dropSpot.id === UNGROUPED ? "drop-into" : "",
+    onClick: function onClick() {
+      return toggleCollapsed(UNGROUPED);
+    },
+    onDragOver: function onDragOver(event) {
+      if (!dragId || isGroup(dragId)) {
+        return;
+      }
+      event.preventDefault();
+      setDropSpot({
+        kind: "into",
+        id: UNGROUPED
+      });
+    },
+    onDrop: function onDrop(event) {
+      event.preventDefault();
+      handleDrop();
+    }
+  }, /*#__PURE__*/_react.default.createElement(StyledOutlineToggle, {
+    type: "button",
+    className: collapsed.includes(UNGROUPED) ? "collapsed" : "",
+    "aria-label": "Toggle ungrouped",
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      toggleCollapsed(UNGROUPED);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icons.CollapseExpandSingleIcon, {
+    fill: "var(--color-theme-700)"
+  })), /*#__PURE__*/_react.default.createElement(StyledOutlineName, null, /*#__PURE__*/_react.default.createElement(_Typography.Header3, {
+    color: "primary"
+  }, "Ungrouped")), /*#__PURE__*/_react.default.createElement(OutlineCounter, {
+    count: membersOf(null).length
+  })), collapsed.includes(UNGROUPED) ? null : membersOf(null).map(renderElementRow), groups.map(function (group) {
+    var members = membersOf(group.id);
+    var isOpen = !collapsed.includes(group.id);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: group.id
+    }, /*#__PURE__*/_react.default.createElement(StyledOutlineGroupRow, _extends({
+      className: dropClass(group.id),
+      onClick: function onClick() {
+        return toggleCollapsed(group.id);
+      }
+    }, rowDragProps(group.id)), /*#__PURE__*/_react.default.createElement(StyledOutlineToggle, {
+      type: "button",
+      className: isOpen ? "" : "collapsed",
+      "aria-label": isOpen ? "Collapse group" : "Expand group",
+      onClick: function onClick(event) {
+        event.stopPropagation();
+        toggleCollapsed(group.id);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Icons.CollapseExpandSingleIcon, {
+      fill: "var(--color-theme-700)"
+    })), /*#__PURE__*/_react.default.createElement(StyledOutlineName, {
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
+    }, /*#__PURE__*/_react.default.createElement(_EditableText.EditableText, {
+      value: group.name,
+      variant: "Header 3",
+      weight: "bold",
+      onSave: function onSave(event) {
+        return renameGroup(group.id, event.target.value);
+      },
+      inputProps: {
+        maxLength: 150
+      }
+    })), /*#__PURE__*/_react.default.createElement(OutlineCounter, {
+      count: members.length
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "outline-options outline-hover"
+    }, /*#__PURE__*/_react.default.createElement(OutlineGroupOptionsMenu, null))), isOpen ? members.map(renderElementRow) : null);
+  }), /*#__PURE__*/_react.default.createElement(StyledNewGroupRow, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    variant: "text gray",
+    onClick: addGroup
+  }, /*#__PURE__*/_react.default.createElement(_Icons.FolderPlusIcon, null), "New Group"))) : null);
+};
+//# sourceMappingURL=outline.js.map