@activecollab/components 2.0.450 → 2.0.452

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

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useState } from "react";
 import styled from "styled-components";
-import { MinusGlyph, PlusGlyph, SquareGlyph } from "./glyphs";
 import { Dot } from "../../components/Dot";
 import { IconButton } from "../../components/IconButton";
 import { ArrowRefreshIcon, CircleIcon, CircleSlashIcon, LockIcon, RoundedRectangleIcon, TextAlignCenterIcon, TextAlignJustifyIcon, TextAlignLeftIcon, TextAlignRightIcon, TextStyleBoldIcon, TextStyleItalicIcon, TextStyleStrikeIcon, TextStyleUnderlineIcon, TrashIcon, TriangleIcon } from "../../components/Icons";
 import { List, ListItem } from "../../components/List";
 import { Menu } from "../../components/Menu";
+import { Select } from "../../components/Select";
+import { SelectTrigger } from "../../components/SelectTrigger";
 import { Tooltip } from "../../components/Tooltip";
 import { colors } from "../../utils/colors";
 
@@ -24,9 +25,6 @@ export const ELEMENT_TEXT = "#1f2937";
 export const STICKY_FILL = "#fbbf24";
 export const SELECTION_BLUE = "#3b82f6";
 
-/* COLOR_PALETTE from toolbar/colorPalette.js (submenu swatch rows) */
-export const COLOR_PALETTE = ["#ffffff", "#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#f97316", "#06b6d4", "#84cc16", "#ec4899", "#6b7280"];
-
 /* Discrete option sets for the right Inspector — mirror the app's fixed
    font-size ladder and the border-thickness steps offered in the toolbar. */
 export const FONT_SIZE_OPTIONS = [10, 13, 16, 20, 24, 30, 36, 48, 72, 96, 144, 216, 288];
@@ -232,13 +230,17 @@ export const ResizeHandles = () => /*#__PURE__*/React.createElement(StyledHandle
 export const StyledFormattingToolbar = styled.div.withConfig({
   displayName: "elements__StyledFormattingToolbar",
   componentId: "sc-ohnju4-4"
-})(["position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:8px;border-radius:8px;background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);white-space:nowrap;cursor:auto;z-index:20;.tb-group{position:relative;display:flex;align-items:center;gap:4px;padding-right:8px;margin-right:8px;border-right:1px solid var(--border-primary);}.tb-rel{position:relative;display:inline-flex;}.divider{width:1px;height:20px;background-color:var(--border-primary);margin:0 4px;flex-shrink:0;}"]);
+})(["position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:8px;border-radius:8px;background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);white-space:nowrap;cursor:auto;z-index:20;.tb-group{position:relative;display:flex;align-items:center;gap:4px;padding-right:8px;margin-right:8px;border-right:1px solid var(--border-primary);}.tb-rel{position:relative;display:inline-flex;}.tb-color-value{display:inline-flex;align-items:center;justify-content:center;width:100%;}.divider{width:1px;height:20px;background-color:var(--border-primary);margin:0 4px;flex-shrink:0;}"]);
 
-/* Button variant="option" (idle) / "tertiary" (active), h-8 px-2 gap-1 */
+/* The app's toolbar buttons are DS `Button` / `IconButton` variant="option",
+   size small, h-8 px-2: grey text (theme-700) that darkens on hover over a
+   theme-300 wash, and the primary colour only for a PRESSED state (an armed
+   lock, an active text style). Same palette here, so the story's bars read as
+   the app's and not as a row of links. */
 export const StyledToolbarButton = styled.button.withConfig({
   displayName: "elements__StyledToolbarButton",
   componentId: "sc-ohnju4-5"
-})(["display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;box-sizing:border-box;padding:0 8px;border:0;border-radius:8px;background-color:transparent;color:var(--color-secondary);font-family:-apple-system,BlinkMacSystemFont,\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;font-size:14px;cursor:pointer;&:hover{background-color:var(--color-theme-200);}&.active{background-color:var(--color-theme-300);}&.icon-only{width:32px;padding:0;}&:disabled{opacity:0.45;cursor:default;&:hover{background-color:transparent;}}svg{fill:currentColor;flex-shrink:0;}svg.i16{width:16px;height:16px;}svg.i12{width:12px;height:12px;}"]);
+})(["display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;box-sizing:border-box;padding:0 8px;border:0;border-radius:var(--ac-br-6);background-color:transparent;color:var(--color-theme-700);font-family:-apple-system,BlinkMacSystemFont,\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;font-size:14px;font-weight:500;cursor:pointer;&:hover,&:focus-visible{background-color:var(--color-theme-300);color:var(--color-theme-900);}&.active,&.active:hover{color:var(--color-primary);}&.icon-only{width:32px;padding:0;}&:disabled{opacity:0.45;cursor:default;&:hover{background-color:transparent;}}svg{fill:currentColor;flex-shrink:0;}svg.i16{width:16px;height:16px;}svg.i12{width:12px;height:12px;}"]);
 
 /* Same chrome as a toolbar button, but an <a> — used where the action is a real
    navigation (Visit). `withComponent` keeps the styles and swaps the element, so
@@ -247,93 +249,27 @@ export const StyledToolbarLink = styled(StyledToolbarButton.withComponent("a")).
   displayName: "elements__StyledToolbarLink",
   componentId: "sc-ohnju4-6"
 })(["text-decoration:none;"]);
-
-/* font-mono min-w-[24px] text-xs readout between the stepper buttons */
-export const StyledFontSizeValue = styled.span.withConfig({
-  displayName: "elements__StyledFontSizeValue",
-  componentId: "sc-ohnju4-7"
-})(["min-width:24px;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--color-secondary);"]);
 export const stopClick = event => event.stopPropagation();
 
-/* Shared drop shadow for the colour swatch popover / colour wheel that the
-   compact toolbar swatch trigger opens. */
-export const SUBMENU_SHADOW = "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)";
-
-/* ColorWheelPopover: beside the submenu (SHAPE_POPOVER_CLASS) or below
-   a toolbar trigger (sticky default class) */
-export const StyledColorPopover = styled.div.withConfig({
-  displayName: "elements__StyledColorPopover",
-  componentId: "sc-ohnju4-8"
-})(["position:absolute;box-sizing:border-box;padding:12px;background-color:var(--page-paper-main);border:1px solid var(--border-primary);border-radius:8px;box-shadow:", ";z-index:70;cursor:auto;&.beside{top:0;left:100%;margin-left:8px;}&.below{top:40px;left:0;}"], SUBMENU_SHADOW);
-
-/* ImprovedColorWheel: hue = angle from east (atan2), saturation = distance,
-   lightness 50 — the canvas wheel replicated with CSS gradients */
-export const WHEEL_SIZE = 200;
-export const WHEEL_RADIUS = WHEEL_SIZE / 2 - 5;
-export const StyledColorWheel = styled.button.withConfig({
-  displayName: "elements__StyledColorWheel",
-  componentId: "sc-ohnju4-9"
-})(["display:block;width:", "px;height:", "px;padding:0;border:0;border-radius:50%;cursor:crosshair;box-shadow:", ";background:radial-gradient( circle closest-side,#ffffff,rgba(255,255,255,0) ),conic-gradient( from 90deg,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000 );"], WHEEL_SIZE, WHEEL_SIZE, SUBMENU_SHADOW);
-export const ColorWheel = _ref => {
-  let onColorChange = _ref.onColorChange;
-  return /*#__PURE__*/React.createElement(StyledColorWheel, {
-    onClick: event => {
-      const rect = event.currentTarget.getBoundingClientRect();
-      const dx = event.clientX - rect.left - WHEEL_SIZE / 2;
-      const dy = event.clientY - rect.top - WHEEL_SIZE / 2;
-      const distance = Math.sqrt(dx * dx + dy * dy);
-      if (distance > WHEEL_RADIUS) {
-        return;
-      }
-      let angle = Math.atan2(dy, dx);
-      if (angle < 0) {
-        angle += 2 * Math.PI;
-      }
-      const hue = Math.round(angle * 180 / Math.PI);
-      const saturation = Math.round(Math.min(100, distance / WHEEL_RADIUS * 100));
-      onColorChange("hsl(" + hue + ", " + saturation + "%, 50%)");
-    }
-  });
-};
+/* The trigger widths the app gives its toolbar selects: `tw-w-20` for the font
+   size ("16 pt"), `tw-w-16 tw-px-2` for the swatch-only colour trigger. */
+const TOOLBAR_SELECT_WIDTH = 80;
+const TOOLBAR_COLOR_TRIGGER_WIDTH = 64;
 
-/* ColorSwatchRow.jsx: 32px swatches + a "+" that opens the color wheel */
-export const StyledSwatchRow = styled.div.withConfig({
-  displayName: "elements__StyledSwatchRow",
-  componentId: "sc-ohnju4-10"
-})(["display:flex;flex-wrap:wrap;gap:8px;.swatch{width:32px;height:32px;box-sizing:border-box;padding:0;border:2px solid var(--border-primary);border-radius:4px;cursor:pointer;&:hover{border-color:var(--color-theme-500);}&.selected{box-shadow:0 0 0 2px ", ";}}.swatch-add{display:flex;align-items:center;justify-content:center;background-color:var(--color-theme-200);color:var(--color-secondary);}"], SELECTION_BLUE);
-export const ColorSwatchRow = _ref2 => {
-  let selectedColor = _ref2.selectedColor,
-    includeTransparent = _ref2.includeTransparent,
-    onSelect = _ref2.onSelect,
-    onAddClick = _ref2.onAddClick;
-  return /*#__PURE__*/React.createElement(StyledSwatchRow, null, includeTransparent ? /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: selectedColor === "transparent" ? "swatch swatch-add selected" : "swatch swatch-add",
-    "aria-label": "Transparent",
-    onClick: () => onSelect("transparent")
-  }, /*#__PURE__*/React.createElement(CircleSlashIcon, {
-    width: 20,
-    height: 20,
-    fill: "currentColor"
-  })) : null, COLOR_PALETTE.map(color => /*#__PURE__*/React.createElement("button", {
-    key: color,
-    type: "button",
-    className: selectedColor === color ? "swatch selected" : "swatch",
-    style: {
-      backgroundColor: color
-    },
-    onClick: () => onSelect(color)
-  })), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "swatch swatch-add",
-    onClick: onAddClick
-  }, /*#__PURE__*/React.createElement(PlusGlyph, null)));
-};
+/* Hollow rounded rectangle, the app's own glyph for the "Rounded Rectangle"
+   shape option (its ShapeTypeMenu draws a bordered span, because the icon set
+   has one rectangle glyph and it is already taken by "Rectangle"). */
+const RoundedRectangleOutline = styled.span.withConfig({
+  displayName: "elements__RoundedRectangleOutline",
+  componentId: "sc-ohnju4-7"
+})(["display:block;width:16px;height:16px;box-sizing:border-box;border:1px solid currentColor;border-radius:4px;"]);
 export const SHAPE_TYPE_ICON = {
-  rectangle: /*#__PURE__*/React.createElement(SquareGlyph, null),
-  roundedRectangle: /*#__PURE__*/React.createElement(RoundedRectangleIcon, {
+  rectangle: /*#__PURE__*/React.createElement(RoundedRectangleIcon, {
     className: "i16"
   }),
+  roundedRectangle: /*#__PURE__*/React.createElement(RoundedRectangleOutline, {
+    "aria-hidden": "true"
+  }),
   circle: /*#__PURE__*/React.createElement(CircleIcon, {
     className: "i16"
   }),
@@ -382,10 +318,10 @@ export const BORDER_STYLE_OPTIONS = [{
    separator → Lock → Delete, in the standard control colour (not red). Mirrors
    app `toolbar/ToolbarActions.jsx`. */
 
-export const ToolbarActions = _ref3 => {
-  let locked = _ref3.locked,
-    onToggleLock = _ref3.onToggleLock,
-    onDelete = _ref3.onDelete;
+export const ToolbarActions = _ref => {
+  let locked = _ref.locked,
+    onToggleLock = _ref.onToggleLock,
+    onDelete = _ref.onDelete;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: "divider"
   }), /*#__PURE__*/React.createElement(Tooltip, {
@@ -410,9 +346,9 @@ export const ToolbarActions = _ref3 => {
    current shape, opening a dropdown of the four types. Modeled on the app's
    ShapeTypeMenu (DS Menu + List). */
 
-export const ShapeTypeMenu = _ref4 => {
-  let value = _ref4.value,
-    onChange = _ref4.onChange;
+export const ShapeTypeMenu = _ref2 => {
+  let value = _ref2.value,
+    onChange = _ref2.onChange;
   const _useState = useState(false),
     open = _useState[0],
     setOpen = _useState[1];
@@ -423,7 +359,7 @@ export const ShapeTypeMenu = _ref4 => {
     position: "bottom-start",
     target: /*#__PURE__*/React.createElement(IconButton, {
       type: "button",
-      variant: "text gray",
+      variant: "option",
       active: open,
       "aria-label": "Shape"
     }, SHAPE_TYPE_ICON[value])
@@ -446,11 +382,11 @@ export const ShapeTypeMenu = _ref4 => {
    compact-toolbar counterpart to the Inspector's expanded four-button row.
    Mirrors the app's AlignmentMenu. */
 
-export const AlignmentMenu = _ref5 => {
+export const AlignmentMenu = _ref3 => {
   var _ALIGN_OPTIONS$find;
-  let value = _ref5.value,
-    onChange = _ref5.onChange,
-    disabled = _ref5.disabled;
+  let value = _ref3.value,
+    onChange = _ref3.onChange,
+    disabled = _ref3.disabled;
   const _useState2 = useState(false),
     open = _useState2[0],
     setOpen = _useState2[1];
@@ -462,7 +398,7 @@ export const AlignmentMenu = _ref5 => {
     position: "bottom-start",
     target: /*#__PURE__*/React.createElement(IconButton, {
       type: "button",
-      variant: "text gray",
+      variant: "option",
       active: open,
       disabled: disabled,
       "aria-label": "Alignment"
@@ -482,63 +418,101 @@ export const AlignmentMenu = _ref5 => {
   }, option.icon, option.label))));
 };
 
-/* Compact swatch-only colour trigger: a single dot (or a CircleSlash chip when
-   transparent) that opens a swatch popover. The Inspector's ColorPickerField
-   keeps the swatch + name; the floating toolbars use this swatch-only variant.
-   `includeTransparent` is passed through to the swatch row — shape fill opts
-   in, sticky fill and text colour do not. */
-
-export const ToolbarColorSwatch = _ref6 => {
-  let value = _ref6.value,
-    includeTransparent = _ref6.includeTransparent,
-    label = _ref6.label,
-    onChange = _ref6.onChange;
-  const _useState3 = useState(false),
-    open = _useState3[0],
-    setOpen = _useState3[1];
-  const _useState4 = useState(false),
-    wheelOpen = _useState4[0],
-    setWheelOpen = _useState4[1];
-  const isTransparent = value === "transparent";
-  return /*#__PURE__*/React.createElement("span", {
-    className: "tb-rel"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    title: label
-  }, /*#__PURE__*/React.createElement(StyledToolbarButton, {
-    className: open ? "icon-only active" : "icon-only",
-    "aria-label": label,
-    onClick: () => {
-      setOpen(current => !current);
-      setWheelOpen(false);
-    }
-  }, isTransparent ? /*#__PURE__*/React.createElement(CircleSlashIcon, {
+/* The app's compact `ColorPicker`: a DS `Select` whose trigger is the swatch
+   alone (a Dot, or the CircleSlash chip when transparent) and whose menu is the
+   standard dot-and-name list — the same control the Inspector's colour field
+   uses, minus the name on the trigger. `includeTransparent` adds "Transparent"
+   first: shape fill opts in, sticky fill and text colour do not. */
+
+const TOOLBAR_TRANSPARENT_OPTION = {
+  id: "transparent",
+  name: "Transparent",
+  color: "transparent",
+  textColor: "transparent"
+};
+const sameHex = (a, b) => a.toLowerCase() === b.toLowerCase();
+const ColorDot = _ref4 => {
+  let color = _ref4.color;
+  return sameHex(color, "transparent") ? /*#__PURE__*/React.createElement(CircleSlashIcon, {
     width: 16,
     height: 16,
     fill: "currentColor"
   }) : /*#__PURE__*/React.createElement(Dot, {
-    color: value,
+    color: color,
     size: 16
-  }))), open ? /*#__PURE__*/React.createElement(StyledColorPopover, {
-    className: "below"
-  }, /*#__PURE__*/React.createElement(ColorSwatchRow, {
-    selectedColor: value,
-    includeTransparent: includeTransparent,
-    onSelect: color => {
-      onChange(color);
-      setOpen(false);
-    },
-    onAddClick: () => setWheelOpen(current => !current)
-  }), wheelOpen ? /*#__PURE__*/React.createElement(StyledColorPopover, {
-    className: "beside"
-  }, /*#__PURE__*/React.createElement(ColorWheel, {
-    onColorChange: color => {
-      onChange(color);
-      setOpen(false);
-    }
-  })) : null) : null);
+  });
+};
+export const ToolbarColorSwatch = _ref5 => {
+  var _options$find$id, _options$find;
+  let value = _ref5.value,
+    includeTransparent = _ref5.includeTransparent,
+    label = _ref5.label,
+    onChange = _ref5.onChange;
+  const options = includeTransparent ? [TOOLBAR_TRANSPARENT_OPTION, ...COLOR_OPTIONS] : COLOR_OPTIONS;
+  const selected = (_options$find$id = (_options$find = options.find(option => sameHex(option.id, value))) == null ? void 0 : _options$find.id) != null ? _options$find$id : value;
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: label
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "tb-rel"
+  }, /*#__PURE__*/React.createElement(Select, {
+    type: "single",
+    disableSearch: true,
+    forceCloseMenu: true,
+    keepSameOptionsOrder: true,
+    options: options,
+    selected: selected,
+    onChange: next => onChange(String(Array.isArray(next) ? next[0] : next)),
+    renderOption: option => /*#__PURE__*/React.createElement("span", {
+      className: "tb-color-option"
+    }, /*#__PURE__*/React.createElement(ColorDot, {
+      color: String(option.id)
+    }), option.name),
+    target: /*#__PURE__*/React.createElement(SelectTrigger, {
+      "aria-label": label,
+      style: {
+        width: TOOLBAR_COLOR_TRIGGER_WIDTH,
+        paddingLeft: 8,
+        paddingRight: 8
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "tb-color-value"
+    }, /*#__PURE__*/React.createElement(ColorDot, {
+      color: value
+    })))
+  })));
+};
+
+/* The app's `ValuePicker` for the font size: a DS `Select` over the fixed size
+   ladder, its trigger reading "16 pt". */
+
+export const ToolbarFontSizeSelect = _ref6 => {
+  let value = _ref6.value,
+    onChange = _ref6.onChange;
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Font Size"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "tb-rel"
+  }, /*#__PURE__*/React.createElement(Select, {
+    type: "single",
+    disableSearch: true,
+    forceCloseMenu: true,
+    keepSameOptionsOrder: true,
+    options: FONT_SIZE_OPTIONS.map(size => ({
+      id: size,
+      name: size + " pt"
+    })),
+    selected: value,
+    onChange: next => onChange(Number(Array.isArray(next) ? next[0] : next)),
+    target: /*#__PURE__*/React.createElement(SelectTrigger, {
+      "aria-label": "Font Size",
+      style: {
+        width: TOOLBAR_SELECT_WIDTH
+      }
+    }, value, " pt")
+  })));
 };
 
-/* The text controls shared by the shape and sticky toolbars: font-size stepper,
+/* The text controls shared by the shape and sticky toolbars: font-size select,
    B / I / U / S, and the collapsed alignment menu. Same set the app's sticky
    and shape toolbars share (font-size picker, TextStyleButtons, AlignmentMenu).
    Kept generic so both element shapes can drive it. */
@@ -550,23 +524,10 @@ export const ToolbarTextControls = _ref7 => {
     onFontSize = _ref7.onFontSize,
     onToggleStyle = _ref7.onToggleStyle,
     onAlign = _ref7.onAlign;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Decrease font size"
-  }, /*#__PURE__*/React.createElement(StyledToolbarButton, {
-    className: "icon-only",
-    "aria-label": "Decrease font size",
-    onClick: () => onFontSize(Math.max(8, fontSize - 2))
-  }, /*#__PURE__*/React.createElement(MinusGlyph, {
-    className: "i16"
-  }))), /*#__PURE__*/React.createElement(StyledFontSizeValue, null, fontSize), /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Increase font size"
-  }, /*#__PURE__*/React.createElement(StyledToolbarButton, {
-    className: "icon-only",
-    "aria-label": "Increase font size",
-    onClick: () => onFontSize(Math.min(96, fontSize + 2))
-  }, /*#__PURE__*/React.createElement(PlusGlyph, {
-    className: "i16"
-  }))), STYLE_OPTIONS.map(option => /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarFontSizeSelect, {
+    value: fontSize,
+    onChange: onFontSize
+  }), STYLE_OPTIONS.map(option => /*#__PURE__*/React.createElement(Tooltip, {
     key: option.key,
     title: option.label
   }, /*#__PURE__*/React.createElement(StyledToolbarButton, {