@activecollab/components 2.0.397 → 2.0.399

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

@@ -0,0 +1,870 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useCallback, useState } from "react";
+import styled, { createGlobalStyle } from "styled-components";
+import { SELECTION_BLUE } from "./elements";
+import { WhiteboardPeopleMenu } from "./peopleMenu";
+import { Button } from "../../components/Button";
+import { Chip } from "../../components/Chip";
+import { ChooseV2 } from "../../components/ChooseV2";
+import { EditableText } from "../../components/EditableText";
+import { IconButton } from "../../components/IconButton";
+import { ArrowLeftIcon, AttachmentIcon, CaretRightIcon, CircleIcon, CollapseExpandSingleIcon, DependencySmallIcon, DrawIcon, DuplicateIcon, EditIcon, FolderMoveIcon, FolderPlusIcon, InsertLinkIcon, LayerBackIcon, LayerBackwardIcon, LayerForwardIcon, LayerFrontIcon, LayersIcon, LockIcon, LockSmallIcon, RoundedRectangleIcon, SidebarLeftIcon, NoteIcon, TextIcon, TrashIcon, TreeDotsIcon, TriangleIcon } from "../../components/Icons";
+import { List, ListItem, ListSeparator } from "../../components/List";
+import { Menu, MenuHeader } from "../../components/Menu";
+import { Signifier } from "../../components/Signifier";
+import { Tooltip } from "../../components/Tooltip";
+import { ResizeTransition, SlideLeftRightTransition } from "../../components/Transitions";
+import { Body2, Caption1, Header3 } from "../../components/Typography";
+
+/* ------------------------------------------------------------------ */
+/* 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. */
+
+export const OUTLINE_TYPE_ICONS = {
+  circle: CircleIcon,
+  roundedRectangle: RoundedRectangleIcon,
+  triangle: TriangleIcon,
+  postit: NoteIcon,
+  text: TextIcon,
+  freehand: DrawIcon,
+  link: InsertLinkIcon,
+  file: 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. */
+export const 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. */
+export const OUTLINE_GROUPS = [{
+  id: "group-discovery",
+  name: "Discovery phase"
+}, {
+  id: "group-sketches",
+  name: "Solution sketches"
+}, {
+  id: "group-questions",
+  name: "Open questions"
+}];
+export const 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. */
+export const OUTLINE_MIN_WIDTH = 260;
+export const OUTLINE_MAX_WIDTH = OUTLINE_MIN_WIDTH * 3;
+export const OUTLINE_WIDTH = 320;
+export const UNGROUPED = "__ungrouped__";
+export const StyledOutlineSidebar = styled.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. */
+export const StyledOutlineResizer = styled.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;}"]);
+export const StyledOutlineBody = styled.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. */
+export const StyledOutlineRow = styled.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;}"], SELECTION_BLUE, SELECTION_BLUE, 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. */
+export const StyledOutlineGroupRow = styled(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. */
+export const StyledOutlineChildRow = styled(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. */
+export const StyledOutlineToggle = styled.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. */
+export const StyledOutlineCounter = styled.span.withConfig({
+  displayName: "outline__StyledOutlineCounter",
+  componentId: "sc-173k9fg-7"
+})(["display:flex;align-items:center;flex-shrink:0;margin-left:8px;"]);
+export const OutlineCounter = _ref => {
+  let count = _ref.count;
+  return /*#__PURE__*/React.createElement(StyledOutlineCounter, {
+    className: "outline-trailing"
+  }, /*#__PURE__*/React.createElement(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. */
+export const StyledOutlineSignifiers = styled.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. */
+export const StyledOutlineTypeIcon = styled.span.withConfig({
+  displayName: "outline__StyledOutlineTypeIcon",
+  componentId: "sc-173k9fg-9"
+})(["display:flex;align-items:center;justify-content:flex-start;width:24px;flex-shrink:0;"]);
+export const StyledOutlineName = styled.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);}"]);
+export const outlineLabel = element => {
+  var _element$name;
+  return (_element$name = element.name) != null ? _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. */
+export const OUTLINE_MENU_LIST_STYLE = {
+  padding: "8px 0"
+};
+export const 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. */
+export const OutlineMenuSliderStyle = createGlobalStyle([".c-simple-menu__paper.outline-element-menu{overflow:hidden;position:relative;}"]);
+export const StyledOutlineElementMenu = styled.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);}"]);
+export const ARRANGE_ITEMS = [{
+  label: "Bring to Front",
+  Icon: LayerFrontIcon
+}, {
+  label: "Send Forward",
+  Icon: LayerForwardIcon
+}, {
+  label: "Send Backward",
+  Icon: LayerBackwardIcon
+}, {
+  label: "Send to Back",
+  Icon: LayerBackIcon
+}];
+export const OutlineElementOptionsMenu = _ref2 => {
+  let locked = _ref2.locked,
+    onToggleLock = _ref2.onToggleLock;
+  const _useState = useState(false),
+    open = _useState[0],
+    setOpen = _useState[1];
+  const _useState2 = useState("index"),
+    view = _useState2[0],
+    setView = _useState2[1];
+  const _useState3 = useState(true),
+    isLeft = _useState3[0],
+    setIsLeft = _useState3[1];
+  const _useState4 = useState(0),
+    height = _useState4[0],
+    setHeight = _useState4[1];
+  const measure = useCallback(node => {
+    if (node) {
+      setHeight(node.offsetHeight);
+    }
+  }, []);
+  const goToArrange = () => {
+    setView("arrange");
+    setIsLeft(true);
+  };
+  const backToIndex = () => {
+    setView("index");
+    setIsLeft(false);
+  };
+  const handleClose = () => {
+    setOpen(false);
+    setView("index");
+    setIsLeft(true);
+  };
+  const indexView = /*#__PURE__*/React.createElement(StyledOutlineElementMenu, null, /*#__PURE__*/React.createElement(List, {
+    style: OUTLINE_MENU_LIST_STYLE,
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(EditIcon, null), "Rename"), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(DuplicateIcon, null), "Duplicate"), /*#__PURE__*/React.createElement(ListSeparator, null), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(FolderMoveIcon, null), "Move to Group"), /*#__PURE__*/React.createElement(ListItem, {
+    className: "drill-item",
+    onClick: goToArrange
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "opt-left"
+  }, /*#__PURE__*/React.createElement(LayersIcon, null), "Arrange"), /*#__PURE__*/React.createElement(CaretRightIcon, {
+    className: "drill-caret",
+    width: 16,
+    height: 16
+  })), /*#__PURE__*/React.createElement(ListSeparator, null), /*#__PURE__*/React.createElement(ListItem, {
+    onClick: () => {
+      onToggleLock();
+      handleClose();
+    }
+  }, /*#__PURE__*/React.createElement(LockIcon, null), locked ? "Unlock" : "Lock"), /*#__PURE__*/React.createElement(ListSeparator, null), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(TrashIcon, null), "Move to Trash")));
+  const arrangeView = /*#__PURE__*/React.createElement(StyledOutlineElementMenu, null, /*#__PURE__*/React.createElement(MenuHeader, {
+    title: "Arrange",
+    leftElement: /*#__PURE__*/React.createElement(IconButton, {
+      type: "button",
+      variant: "text gray",
+      size: "small",
+      onClick: backToIndex,
+      "aria-label": "Back"
+    }, /*#__PURE__*/React.createElement(ArrowLeftIcon, null))
+  }), /*#__PURE__*/React.createElement(List, {
+    style: OUTLINE_MENU_LIST_STYLE,
+    tabIndex: -1
+  }, ARRANGE_ITEMS.map(_ref3 => {
+    let label = _ref3.label,
+      Icon = _ref3.Icon;
+    return /*#__PURE__*/React.createElement(ListItem, {
+      key: label,
+      onClick: backToIndex
+    }, /*#__PURE__*/React.createElement(Icon, null), label);
+  })));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OutlineMenuSliderStyle, null), /*#__PURE__*/React.createElement(Menu, {
+    open: open,
+    onOpen: () => setOpen(true),
+    onClose: handleClose,
+    position: "bottom-end",
+    menuClassName: "outline-element-menu",
+    target: /*#__PURE__*/React.createElement(IconButton, {
+      type: "button",
+      variant: "text gray",
+      className: open ? "open" : undefined,
+      active: open
+    }, /*#__PURE__*/React.createElement(TreeDotsIcon, null))
+  }, /*#__PURE__*/React.createElement(ResizeTransition, {
+    in: true,
+    style: {
+      height,
+      width: OUTLINE_MENU_WIDTH
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement(SlideLeftRightTransition, {
+    in: view === "index",
+    direction: isLeft ? "left" : "right"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: measure,
+    style: {
+      width: OUTLINE_MENU_WIDTH
+    }
+  }, indexView)), /*#__PURE__*/React.createElement(SlideLeftRightTransition, {
+    in: view === "arrange",
+    direction: isLeft ? "left" : "right"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: measure,
+    style: {
+      width: OUTLINE_MENU_WIDTH
+    }
+  }, arrangeView))))));
+};
+export const OutlineGroupOptionsMenu = () => {
+  const _useState5 = useState(false),
+    open = _useState5[0],
+    setOpen = _useState5[1];
+  return /*#__PURE__*/React.createElement(Menu, {
+    open: open,
+    onOpen: () => setOpen(true),
+    onClose: () => setOpen(false),
+    position: "bottom-end",
+    target: /*#__PURE__*/React.createElement(IconButton, {
+      type: "button",
+      variant: "text gray",
+      className: open ? "open" : undefined,
+      active: open
+    }, /*#__PURE__*/React.createElement(TreeDotsIcon, null))
+  }, /*#__PURE__*/React.createElement(List, {
+    style: OUTLINE_MENU_LIST_STYLE,
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(EditIcon, null), "Rename"), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(DuplicateIcon, null), "Duplicate"), /*#__PURE__*/React.createElement(ListSeparator, null), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(FolderMoveIcon, null), "Ungroup"), /*#__PURE__*/React.createElement(ListSeparator, null), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(TrashIcon, null), "Move to Trash")));
+};
+export const 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. */
+export const LeftMenuContents = _ref4 => {
+  let sidebarOpen = _ref4.sidebarOpen,
+    onToggleSidebar = _ref4.onToggleSidebar,
+    boardName = _ref4.boardName,
+    onRenameBoard = _ref4.onRenameBoard;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Back to Whiteboards"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "text gray"
+  }, /*#__PURE__*/React.createElement(ArrowLeftIcon, null))), /*#__PURE__*/React.createElement("span", {
+    className: "wb-title"
+  }, /*#__PURE__*/React.createElement(EditableText, {
+    value: boardName,
+    variant: "Title 2",
+    weight: "bold",
+    onSave: event => onRenameBoard(event.target.value),
+    inputProps: {
+      maxLength: 150
+    }
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    title: sidebarOpen ? "Hide Sidebar" : "Show Sidebar"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "text gray",
+    onClick: onToggleSidebar
+  }, /*#__PURE__*/React.createElement(SidebarLeftIcon, null))), /*#__PURE__*/React.createElement(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. */
+export const StyledSidebarHeader = styled.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. */
+export const StyledChooseRow = styled.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). */
+export const StyledPanelChooseSlot = styled.div.withConfig({
+  displayName: "outline__StyledPanelChooseSlot",
+  componentId: "sc-173k9fg-14"
+})(["width:224px;.c-btn-group{margin:0 auto;}"]);
+export const StyledInfoPanel = styled.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. */
+export const InfoPanelContent = _ref5 => {
+  let boardName = _ref5.boardName;
+  return /*#__PURE__*/React.createElement(StyledInfoPanel, null, /*#__PURE__*/React.createElement(Header3, {
+    color: "primary"
+  }, boardName), /*#__PURE__*/React.createElement("div", {
+    className: "info-meta"
+  }, INFO_ROWS.map(_ref6 => {
+    let label = _ref6[0],
+      value = _ref6[1];
+    return /*#__PURE__*/React.createElement("div", {
+      className: "info-row",
+      key: label
+    }, /*#__PURE__*/React.createElement(Caption1, {
+      color: "secondary"
+    }, label), /*#__PURE__*/React.createElement(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. */
+export const StyledNewGroupRow = styled.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;}"]);
+export const LeftSidebar = _ref7 => {
+  let selectedId = _ref7.selectedId,
+    onSelect = _ref7.onSelect,
+    activePanel = _ref7.activePanel,
+    onPanelChange = _ref7.onPanelChange,
+    sidebarOpen = _ref7.sidebarOpen,
+    onToggleSidebar = _ref7.onToggleSidebar,
+    boardName = _ref7.boardName,
+    onRenameBoard = _ref7.onRenameBoard;
+  const _useState6 = useState(OUTLINE_WIDTH),
+    width = _useState6[0],
+    setWidth = _useState6[1];
+  const _useState7 = useState(false),
+    resizing = _useState7[0],
+    setResizing = _useState7[1];
+  const _useState8 = useState(OUTLINE_GROUPS),
+    groups = _useState8[0],
+    setGroups = _useState8[1];
+  const _useState9 = useState(OUTLINE_ELEMENTS),
+    elements = _useState9[0],
+    setElements = _useState9[1];
+  const _useState0 = useState(["group-sketches"]),
+    collapsed = _useState0[0],
+    setCollapsed = _useState0[1];
+  const _useState1 = useState(null),
+    dragId = _useState1[0],
+    setDragId = _useState1[1];
+  const _useState10 = useState(null),
+    dropSpot = _useState10[0],
+    setDropSpot = _useState10[1];
+  const isGroup = useCallback(id => groups.some(group => group.id === id), [groups]);
+  const membersOf = useCallback(groupId => elements.filter(element => element.groupId === groupId), [elements]);
+  const toggleCollapsed = useCallback(id => {
+    setCollapsed(current => current.includes(id) ? current.filter(entry => entry !== id) : [...current, id]);
+  }, []);
+  const renameGroup = useCallback((id, name) => {
+    setGroups(current => current.map(group => group.id === id ? _extends({}, group, {
+      name
+    }) : group));
+  }, []);
+  const renameElement = useCallback((id, name) => {
+    setElements(current => current.map(element => element.id === id ? _extends({}, element, {
+      name
+    }) : element));
+  }, []);
+  const toggleLock = useCallback(id => {
+    setElements(current => current.map(element => element.id === id ? _extends({}, 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. */
+  const startResize = useCallback(event => {
+    var _event$currentTarget$, _event$currentTarget$2;
+    event.preventDefault();
+    const startX = event.clientX;
+    const startWidth = (_event$currentTarget$ = (_event$currentTarget$2 = event.currentTarget.parentElement) == null ? void 0 : _event$currentTarget$2.offsetWidth) != null ? _event$currentTarget$ : 0;
+    const previousUserSelect = document.body.style.userSelect;
+    setResizing(true);
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "col-resize";
+    const handleMove = moveEvent => {
+      const next = startWidth + (moveEvent.clientX - startX);
+      setWidth(Math.min(OUTLINE_MAX_WIDTH, Math.max(OUTLINE_MIN_WIDTH, next)));
+    };
+    const 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);
+  }, []);
+  const addGroup = useCallback(() => {
+    setGroups(current => [...current, {
+      id: "group-" + 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. */
+  const handleDrop = useCallback(() => {
+    const draggedId = dragId;
+    const 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(current => {
+        const from = current.findIndex(group => group.id === draggedId);
+        const next = [...current];
+        const _next$splice = next.splice(from, 1),
+          moved = _next$splice[0];
+        const to = next.findIndex(group => group.id === spot.id);
+        next.splice(spot.kind === "before" ? to : to + 1, 0, moved);
+        return next;
+      });
+      return;
+    }
+    setElements(current => {
+      const from = current.findIndex(element => element.id === draggedId);
+      const next = [...current];
+      const _next$splice2 = next.splice(from, 1),
+        moved = _next$splice2[0];
+      if (spot.kind === "into") {
+        const groupId = spot.id === UNGROUPED ? null : spot.id;
+        const last = next.reduce((acc, element, index) => element.groupId === groupId ? index : acc, -1);
+        next.splice(last + 1, 0, _extends({}, moved, {
+          groupId
+        }));
+        return next;
+      }
+      const target = next.find(element => element.id === spot.id);
+      if (!target) {
+        return current;
+      }
+      const to = next.findIndex(element => element.id === spot.id);
+      next.splice(spot.kind === "before" ? to : to + 1, 0, _extends({}, moved, {
+        groupId: target.groupId
+      }));
+      return next;
+    });
+  }, [dragId, dropSpot, isGroup]);
+  const rowDragProps = useCallback(id => ({
+    draggable: true,
+    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: () => {
+      setDragId(null);
+      setDropSpot(null);
+    },
+    onDragOver: event => {
+      if (!dragId || dragId === id) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      const box = event.currentTarget.getBoundingClientRect();
+      const 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: event => {
+      event.preventDefault();
+      event.stopPropagation();
+      handleDrop();
+    }
+  }), [dragId, handleDrop, isGroup]);
+  const dropClass = useCallback(id => {
+    if (dragId === id) {
+      return "dragging";
+    }
+    if (!dropSpot || dropSpot.id !== id) {
+      return "";
+    }
+    return "drop-" + dropSpot.kind;
+  }, [dragId, dropSpot]);
+  const renderElementRow = element => {
+    const TypeIcon = OUTLINE_TYPE_ICONS[element.type];
+    const selected = element.id === selectedId;
+    return /*#__PURE__*/React.createElement(StyledOutlineChildRow, _extends({
+      key: element.id,
+      className: (selected ? "selected" : "") + " " + dropClass(element.id),
+      onClick: () => onSelect(element.id)
+    }, rowDragProps(element.id)), /*#__PURE__*/React.createElement(StyledOutlineTypeIcon, null, /*#__PURE__*/React.createElement(TypeIcon, {
+      width: 16,
+      height: 16,
+      fill: element.name ? "var(--color-theme-700)" : "var(--color-theme-500)"
+    })), /*#__PURE__*/React.createElement(StyledOutlineName, {
+      className: element.name ? "" : "unnamed"
+    }, /*#__PURE__*/React.createElement(EditableText, {
+      value: outlineLabel(element),
+      variant: "Body 2",
+      weight: "medium",
+      disabled: !selected,
+      onSave: event => renameElement(element.id, event.target.value),
+      inputProps: {
+        maxLength: 150
+      }
+    })), element.locked || element.connections ? /*#__PURE__*/React.createElement(StyledOutlineSignifiers, {
+      className: "outline-trailing"
+    }, element.connections ? /*#__PURE__*/React.createElement(Signifier, {
+      type: DependencySmallIcon,
+      value: element.connections,
+      tooltipText: element.connections + " " + (element.connections === 1 ? "connection" : "connections")
+    }) : null, element.locked ? /*#__PURE__*/React.createElement(Signifier, {
+      type: LockSmallIcon,
+      tooltipText: "Locked"
+    }) : null) : null, /*#__PURE__*/React.createElement("span", {
+      className: "outline-options outline-hover"
+    }, /*#__PURE__*/React.createElement(OutlineElementOptionsMenu, {
+      locked: Boolean(element.locked),
+      onToggleLock: () => toggleLock(element.id)
+    })));
+  };
+  return /*#__PURE__*/React.createElement(StyledOutlineSidebar, {
+    style: {
+      width
+    }
+  }, /*#__PURE__*/React.createElement(StyledOutlineResizer, {
+    className: resizing ? "resizing" : "",
+    onMouseDown: startResize,
+    role: "separator",
+    "aria-orientation": "vertical",
+    "aria-label": "Resize outline"
+  }), /*#__PURE__*/React.createElement(StyledSidebarHeader, null, /*#__PURE__*/React.createElement(LeftMenuContents, {
+    sidebarOpen: sidebarOpen,
+    onToggleSidebar: onToggleSidebar,
+    boardName: boardName,
+    onRenameBoard: onRenameBoard
+  })), /*#__PURE__*/React.createElement(StyledChooseRow, null, /*#__PURE__*/React.createElement(StyledPanelChooseSlot, null, /*#__PURE__*/React.createElement(ChooseV2, {
+    required: true,
+    options: [{
+      id: "info",
+      name: "Info"
+    }, {
+      id: "outline",
+      name: "Outline"
+    }],
+    selected: [activePanel],
+    onChange: selected => onPanelChange(selected[0])
+  }))), activePanel === "info" ? /*#__PURE__*/React.createElement(InfoPanelContent, {
+    boardName: boardName
+  }) : null, activePanel === "outline" ? /*#__PURE__*/React.createElement(StyledOutlineBody, null, /*#__PURE__*/React.createElement(StyledOutlineGroupRow, {
+    className: (dropSpot == null ? void 0 : dropSpot.kind) === "into" && dropSpot.id === UNGROUPED ? "drop-into" : "",
+    onClick: () => toggleCollapsed(UNGROUPED),
+    onDragOver: event => {
+      if (!dragId || isGroup(dragId)) {
+        return;
+      }
+      event.preventDefault();
+      setDropSpot({
+        kind: "into",
+        id: UNGROUPED
+      });
+    },
+    onDrop: event => {
+      event.preventDefault();
+      handleDrop();
+    }
+  }, /*#__PURE__*/React.createElement(StyledOutlineToggle, {
+    type: "button",
+    className: collapsed.includes(UNGROUPED) ? "collapsed" : "",
+    "aria-label": "Toggle ungrouped",
+    onClick: event => {
+      event.stopPropagation();
+      toggleCollapsed(UNGROUPED);
+    }
+  }, /*#__PURE__*/React.createElement(CollapseExpandSingleIcon, {
+    fill: "var(--color-theme-700)"
+  })), /*#__PURE__*/React.createElement(StyledOutlineName, null, /*#__PURE__*/React.createElement(Header3, {
+    color: "primary"
+  }, "Ungrouped")), /*#__PURE__*/React.createElement(OutlineCounter, {
+    count: membersOf(null).length
+  })), collapsed.includes(UNGROUPED) ? null : membersOf(null).map(renderElementRow), groups.map(group => {
+    const members = membersOf(group.id);
+    const isOpen = !collapsed.includes(group.id);
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: group.id
+    }, /*#__PURE__*/React.createElement(StyledOutlineGroupRow, _extends({
+      className: dropClass(group.id),
+      onClick: () => toggleCollapsed(group.id)
+    }, rowDragProps(group.id)), /*#__PURE__*/React.createElement(StyledOutlineToggle, {
+      type: "button",
+      className: isOpen ? "" : "collapsed",
+      "aria-label": isOpen ? "Collapse group" : "Expand group",
+      onClick: event => {
+        event.stopPropagation();
+        toggleCollapsed(group.id);
+      }
+    }, /*#__PURE__*/React.createElement(CollapseExpandSingleIcon, {
+      fill: "var(--color-theme-700)"
+    })), /*#__PURE__*/React.createElement(StyledOutlineName, {
+      onClick: event => event.stopPropagation()
+    }, /*#__PURE__*/React.createElement(EditableText, {
+      value: group.name,
+      variant: "Header 3",
+      weight: "bold",
+      onSave: event => renameGroup(group.id, event.target.value),
+      inputProps: {
+        maxLength: 150
+      }
+    })), /*#__PURE__*/React.createElement(OutlineCounter, {
+      count: members.length
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "outline-options outline-hover"
+    }, /*#__PURE__*/React.createElement(OutlineGroupOptionsMenu, null))), isOpen ? members.map(renderElementRow) : null);
+  }), /*#__PURE__*/React.createElement(StyledNewGroupRow, null, /*#__PURE__*/React.createElement(Button, {
+    variant: "text gray",
+    onClick: addGroup
+  }, /*#__PURE__*/React.createElement(FolderPlusIcon, null), "New Group"))) : null);
+};
+//# sourceMappingURL=outline.js.map