@activecollab/components 2.0.397 → 2.0.399

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

@@ -0,0 +1,884 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sameColor = exports.elementTraits = exports.colorName = exports.TYPE_LABEL = exports.TRANSPARENT_OPTION = exports.StyledSegmented = exports.StyledPropRow = exports.StyledPropGroups = exports.StyledPropGroup = exports.StyledInspectorSidebar = exports.StyledInspectorResizer = exports.StyledInspectorHeader = exports.StyledInspectorEmpty = exports.StyledInspectorBody = exports.StyledFieldGrid = exports.StyledControl = exports.StyledCheckboxRow = exports.StyledBody = exports.StyledAutoField = exports.RightInspector = exports.OptionSelect = exports.NumberField = exports.ColorPickerField = exports.AutoField = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _elements = require("./elements");
+var _fileElement = require("./fileElement");
+var _outline = require("./outline");
+var _Checkbox = require("../../components/Checkbox");
+var _ChooseV = require("../../components/ChooseV2");
+var _Dot = require("../../components/Dot");
+var _EditableText = require("../../components/EditableText");
+var _IconButton = require("../../components/IconButton");
+var _Icons = require("../../components/Icons");
+var _Input = require("../../components/Input");
+var _Label = require("../../components/Label");
+var _Select = require("../../components/Select");
+var _SelectTrigger = require("../../components/SelectTrigger");
+var _Tooltip = require("../../components/Tooltip");
+var _Typography = require("../../components/Typography");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 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; }
+/* ------------------------------------------------------------------ */
+/* Right Inspector — selected-element properties panel                 */
+/* ------------------------------------------------------------------ */
+
+/* Which right-docked panel is open. Only "inspector" is built here; "comments"
+   is reserved for the next iteration. */
+
+/* ── Inspector capability traits ──────────────────────────────────────────
+   The Inspector is TRAIT-DRIVEN: a selected element declares which property
+   groups it supports, and only those groups render. This is the "interface
+   with implementation traits" model — the interface is the full set of groups,
+   and each element kind overrides the flags it does not support (a sticky has
+   no stroke, and its height is auto because the note grows with its content).
+   New element kinds slot in by returning their own trait set. */
+
+var elementTraits = exports.elementTraits = function elementTraits(def) {
+  return def.kind === "sticky" ? {
+    geometry: true,
+    fill: true,
+    fillTransparent: false,
+    stroke: false,
+    text: true,
+    autoHeight: true
+  } : {
+    geometry: true,
+    fill: true,
+    fillTransparent: true,
+    stroke: true,
+    text: true
+  };
+};
+var TYPE_LABEL = exports.TYPE_LABEL = {
+  rectangle: "Rectangle",
+  roundedRectangle: "Rounded Rectangle",
+  circle: "Circle",
+  triangle: "Triangle"
+};
+var sameColor = exports.sameColor = function sameColor(a, b) {
+  return (a !== null && a !== void 0 ? a : "").toLowerCase() === b.toLowerCase();
+};
+
+/* Right dock — mirrors StyledOutlineSidebar but docked on the RIGHT: border on
+   the left edge, resizer on the left edge. Same 260–780 width band. */
+var StyledInspectorSidebar = exports.StyledInspectorSidebar = _styledComponents.default.aside.withConfig({
+  displayName: "inspector__StyledInspectorSidebar",
+  componentId: "sc-do334k-0"
+})(["flex-shrink:0;position:relative;box-sizing:border-box;display:flex;flex-direction:column;border-left: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 LEFT edge, because the panel is docked right — dragging it
+   left widens. Same token pair as the outline resizer: selectable grey at
+   rest, the hover token while grabbed. */
+var StyledInspectorResizer = exports.StyledInspectorResizer = _styledComponents.default.div.withConfig({
+  displayName: "inspector__StyledInspectorResizer",
+  componentId: "sc-do334k-1"
+})(["position:absolute;top:0;bottom:0;left:-2px;width:5px;cursor:col-resize;z-index:2;&::after{content:\"\";position:absolute;top:0;bottom:0;left:2px;width:1px;background-color:var(--selectable-active);opacity:0;transition:opacity 150ms ease;}&:hover::after,&.resizing::after{opacity:1;}"]);
+var StyledInspectorBody = exports.StyledInspectorBody = _styledComponents.default.div.withConfig({
+  displayName: "inspector__StyledInspectorBody",
+  componentId: "sc-do334k-2"
+})(["flex:1;overflow-y:auto;display:flex;flex-direction:column;"]);
+
+/* Wraps the property groups. The Properties/Comments switch above does the
+   separating, so the first group drops its top hairline — no divider directly
+   under the header, matching the left sidebar. Inner groups keep separators. */
+var StyledPropGroups = exports.StyledPropGroups = _styledComponents.default.div.withConfig({
+  displayName: "inspector__StyledPropGroups",
+  componentId: "sc-do334k-3"
+})(["display:flex;flex-direction:column;> div:first-child{border-top:none;}"]);
+var StyledInspectorHeader = exports.StyledInspectorHeader = _styledComponents.default.div.withConfig({
+  displayName: "inspector__StyledInspectorHeader",
+  componentId: "sc-do334k-4"
+})(["display:flex;align-items:center;gap:8px;height:56px;padding:0 16px;box-sizing:border-box;flex-shrink:0;.inspector-type-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;color:var(--color-theme-700);}.inspector-type-icon svg{width:20px;height:20px;}.inspector-name{flex:1;min-width:0;}"]);
+
+/* Empty state — same muted treatment the outline uses for unnamed rows. */
+var StyledInspectorEmpty = exports.StyledInspectorEmpty = _styledComponents.default.div.withConfig({
+  displayName: "inspector__StyledInspectorEmpty",
+  componentId: "sc-do334k-5"
+})(["flex:1;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;color:var(--color-theme-600);"]);
+
+/* Non-collapsible section: bold title, no chevron / drag handle, separated from
+   the section above by a hairline. */
+var StyledPropGroup = exports.StyledPropGroup = _styledComponents.default.div.withConfig({
+  displayName: "inspector__StyledPropGroup",
+  componentId: "sc-do334k-6"
+})(["display:flex;flex-direction:column;gap:12px;padding:16px;border-top:1px solid var(--border-primary);.group-title{color:var(--color-theme-800);}"]);
+var StyledPropRow = exports.StyledPropRow = _styledComponents.default.div.withConfig({
+  displayName: "inspector__StyledPropRow",
+  componentId: "sc-do334k-7"
+})(["display:flex;flex-direction:column;gap:4px;"]);
+var StyledFieldGrid = exports.StyledFieldGrid = _styledComponents.default.div.withConfig({
+  displayName: "inspector__StyledFieldGrid",
+  componentId: "sc-do334k-8"
+})(["display:grid;grid-template-columns:1fr 1fr;gap:12px;"]);
+
+/* InputNumber's wrapper is a fixed 360px and SelectTrigger a fixed 300px — both
+   overflow the narrow dock, so force every inspector control to fill its cell. */
+var StyledControl = exports.StyledControl = _styledComponents.default.div.withConfig({
+  displayName: "inspector__StyledControl",
+  componentId: "sc-do334k-9"
+})(["width:100%;&.disabled{opacity:0.4;pointer-events:none;}.c-input-wrapper{width:100%;}.wb-inspector-trigger{width:100%;}.wb-color-value{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.wb-color-value .wb-transparent-swatch{flex:none;color:var(--color-theme-500);}"]);
+
+/* Locked checkbox row — the DS Checkbox renders only the box, so it is paired
+   with a Label the way the design system expects. */
+var StyledCheckboxRow = exports.StyledCheckboxRow = _styledComponents.default.div.withConfig({
+  displayName: "inspector__StyledCheckboxRow",
+  componentId: "sc-do334k-10"
+})(["display:flex;align-items:center;gap:8px;"]);
+
+/* The element body is HTML (the API's `body` field). The Inspector renders it
+   formatted and read-only for now — editing comes later. Raw text needs an
+   explicit font-family (no global reset), and the child tags get light prose
+   styling. */
+var StyledBody = exports.StyledBody = _styledComponents.default.div.withConfig({
+  displayName: "inspector__StyledBody",
+  componentId: "sc-do334k-11"
+})(["width:100%;max-height:140px;overflow-y:auto;font-family:-apple-system,BlinkMacSystemFont,\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;font-size:13px;line-height:1.5;color:var(--color-theme-800);p{margin:0 0 8px;}p:last-child{margin-bottom:0;}ul,ol{margin:0 0 8px;padding-left:18px;}li{margin:2px 0;}strong{font-weight:600;}em{font-style:italic;}a{color:var(--color-primary);}"]);
+
+/* Read-only "Auto" field for an auto-sized dimension (a sticky's height). */
+var StyledAutoField = exports.StyledAutoField = _styledComponents.default.div.withConfig({
+  displayName: "inspector__StyledAutoField",
+  componentId: "sc-do334k-12"
+})(["height:32px;display:flex;align-items:center;padding:0 8px;box-sizing:border-box;border:1px solid var(--color-theme-400);border-radius:var(--ac-br-8);background-color:var(--color-theme-200);color:var(--color-theme-600);font-size:13px;"]);
+var StyledSegmented = exports.StyledSegmented = _styledComponents.default.div.withConfig({
+  displayName: "inspector__StyledSegmented",
+  componentId: "sc-do334k-13"
+})(["display:flex;gap:4px;svg{display:block;width:16px;height:16px;}"]);
+var NumberField = exports.NumberField = function NumberField(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    min = _ref.min,
+    unit = _ref.unit,
+    onCommit = _ref.onCommit;
+  return /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    size: "small",
+    weight: "regular"
+  }, label), /*#__PURE__*/_react.default.createElement(StyledControl, null, /*#__PURE__*/_react.default.createElement(_Input.InputNumber, {
+    className: "wb-inspector-num",
+    value: value,
+    decimalLength: 0,
+    min: min,
+    update: true,
+    endAdornment: unit ? /*#__PURE__*/_react.default.createElement(_Input.InputAdornment, {
+      disablePointerEvents: true
+    }, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+      color: "secondary"
+    }, unit)) : undefined,
+    onChange: function onChange(next) {
+      if (next !== undefined && !Number.isNaN(next)) {
+        onCommit(Math.round(next));
+      }
+    }
+  })));
+};
+var AutoField = exports.AutoField = function AutoField(_ref2) {
+  var label = _ref2.label;
+  return /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    size: "small",
+    weight: "regular"
+  }, label), /*#__PURE__*/_react.default.createElement(StyledAutoField, null, "Auto"));
+};
+var OptionSelect = exports.OptionSelect = function OptionSelect(_ref3) {
+  var options = _ref3.options,
+    value = _ref3.value,
+    triggerLabel = _ref3.triggerLabel,
+    _onChange = _ref3.onChange;
+  return /*#__PURE__*/_react.default.createElement(StyledControl, null, /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    type: "single",
+    disableSearch: true,
+    forceCloseMenu: true,
+    options: options,
+    selected: value,
+    onChange: function onChange(next) {
+      return _onChange(Array.isArray(next) ? next[0] : next);
+    },
+    target: /*#__PURE__*/_react.default.createElement(_SelectTrigger.SelectTrigger, {
+      className: "wb-inspector-trigger"
+    }, triggerLabel)
+  }));
+};
+var TRANSPARENT_OPTION = exports.TRANSPARENT_OPTION = {
+  id: "transparent",
+  name: "Transparent",
+  color: "transparent",
+  textColor: "transparent"
+};
+
+/* The name shown on the color picker's trigger, resolved from the current hex. */
+var colorName = exports.colorName = function colorName(hex) {
+  if (!hex || sameColor(hex, "transparent")) {
+    return "Transparent";
+  }
+  var match = _elements.COLOR_OPTIONS.find(function (option) {
+    return sameColor(hex, option.color);
+  });
+  return match ? match.name : "Custom";
+};
+/* The regular design-system named-colour picker (the one in the label dialogs):
+   a Select whose trigger is a Dot + colour name, and whose menu is the standard
+   dot-and-radio list. Custom colours are deferred. */
+var ColorPickerField = exports.ColorPickerField = function ColorPickerField(_ref4) {
+  var value = _ref4.value,
+    disabled = _ref4.disabled,
+    includeTransparent = _ref4.includeTransparent,
+    onSelect = _ref4.onSelect;
+  var options = includeTransparent ? [TRANSPARENT_OPTION, ..._elements.COLOR_OPTIONS] : _elements.COLOR_OPTIONS;
+  var isTransparent = !value || sameColor(value, "transparent");
+  return /*#__PURE__*/_react.default.createElement(StyledControl, {
+    className: disabled ? "disabled" : undefined
+  }, /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    type: "single",
+    disableSearch: true,
+    forceCloseMenu: true,
+    options: options,
+    selected: isTransparent ? "transparent" : value,
+    onChange: function onChange(next) {
+      return onSelect(String(Array.isArray(next) ? next[0] : next));
+    },
+    target: /*#__PURE__*/_react.default.createElement(_SelectTrigger.SelectTrigger, {
+      className: "wb-inspector-trigger"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "wb-color-value"
+    }, isTransparent ? /*#__PURE__*/_react.default.createElement(_Icons.CircleSlashIcon, {
+      width: 14,
+      height: 14,
+      fill: "currentColor",
+      className: "wb-transparent-swatch"
+    }) : /*#__PURE__*/_react.default.createElement(_Dot.Dot, {
+      color: value,
+      size: 14
+    }), colorName(value)))
+  }));
+};
+var RightInspector = exports.RightInspector = function RightInspector(_ref5) {
+  var _sizes$def$id, _positions$def$id, _rotations$def$id, _names$def$id, _shape$align, _BORDER_STYLE_OPTIONS, _BORDER_STYLE_OPTIONS2;
+  var selectedId = _ref5.selectedId,
+    positions = _ref5.positions,
+    setPositions = _ref5.setPositions,
+    sizes = _ref5.sizes,
+    setSizes = _ref5.setSizes,
+    rotations = _ref5.rotations,
+    setRotations = _ref5.setRotations,
+    shapes = _ref5.shapes,
+    setShapes = _ref5.setShapes,
+    stickyStyle = _ref5.stickyStyle,
+    setStickyStyle = _ref5.setStickyStyle,
+    links = _ref5.links,
+    setLinks = _ref5.setLinks,
+    files = _ref5.files,
+    setFiles = _ref5.setFiles,
+    createdShapes = _ref5.createdShapes,
+    locks = _ref5.locks,
+    setLocks = _ref5.setLocks;
+  var _useState = (0, _react.useState)(_outline.OUTLINE_WIDTH),
+    _useState2 = _slicedToArray(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    resizing = _useState4[0],
+    setResizing = _useState4[1];
+  /* Mock only — element display names are not persisted anywhere; they default
+     to the type label until renamed here. */
+  var _useState5 = (0, _react.useState)({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    names = _useState6[0],
+    setNames = _useState6[1];
+  /* Which inspector tab is showing: the property groups we design, or the
+     upcoming comments stream (details TBD). */
+  var _useState7 = (0, _react.useState)("properties"),
+    _useState8 = _slicedToArray(_useState7, 2),
+    tab = _useState8[0],
+    setTab = _useState8[1];
+
+  /* Docked right, so the grab strip is on the LEFT edge and dragging left
+     widens: the delta is subtracted rather than added (see LeftSidebar). */
+  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.OUTLINE_MAX_WIDTH, Math.max(_outline.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 def = selectedId ? [..._elements.CANVAS_ELEMENTS, ...createdShapes].find(function (element) {
+    return element.id === selectedId;
+  }) : undefined;
+  var linkDef = selectedId ? links.find(function (link) {
+    return link.id === selectedId;
+  }) : undefined;
+  var fileDef = selectedId ? files.find(function (file) {
+    return file.id === selectedId;
+  }) : undefined;
+  var shell = function shell(content) {
+    return /*#__PURE__*/_react.default.createElement(StyledInspectorSidebar, {
+      style: {
+        width
+      }
+    }, /*#__PURE__*/_react.default.createElement(StyledInspectorResizer, {
+      className: resizing ? "resizing" : "",
+      onMouseDown: startResize,
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": "Resize inspector"
+    }), content);
+  };
+
+  /* Description — inline, multi-line editable text, shown first for every
+     element kind. */
+  /* Read-only formatted body (HTML from the API's `body` field). No label; when
+     the body is empty the field is not rendered at all. No edit yet. */
+  var renderBody = function renderBody(id) {
+    var _ELEMENT_BODIES$id;
+    var html = (_ELEMENT_BODIES$id = _elements.ELEMENT_BODIES[id]) !== null && _ELEMENT_BODIES$id !== void 0 ? _ELEMENT_BODIES$id : "";
+    if (!html) {
+      return null;
+    }
+
+    // eslint-disable-next-line react/no-danger
+    return /*#__PURE__*/_react.default.createElement(StyledBody, {
+      dangerouslySetInnerHTML: {
+        __html: html
+      }
+    });
+  };
+
+  /* The Locked checkbox — shown for every element kind, toggling a design lock
+     flag keyed by element id. */
+  var renderLocked = function renderLocked(id) {
+    var _locks$id;
+    return /*#__PURE__*/_react.default.createElement(StyledCheckboxRow, null, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+      id: "wb-lock-".concat(id),
+      checked: (_locks$id = locks[id]) !== null && _locks$id !== void 0 ? _locks$id : false,
+      onChange: function onChange() {
+        return setLocks(function (current) {
+          var _current$id;
+          return _objectSpread(_objectSpread({}, current), {}, {
+            [id]: !((_current$id = current[id]) !== null && _current$id !== void 0 ? _current$id : false)
+          });
+        });
+      }
+    }), /*#__PURE__*/_react.default.createElement(_Label.Label, {
+      htmlFor: "wb-lock-".concat(id),
+      size: "small",
+      weight: "regular"
+    }, "Locked"));
+  };
+
+  /* Geometry for a card (link / file): X/Y from the shared positions map, an
+     editable width and an auto height (cards are content-sized). Cards cannot
+     be rotated, so there is no Rotation field. */
+  var renderCardGeometry = function renderCardGeometry(id, cardWidth, onWidth) {
+    var _positions$id;
+    var cardPosition = (_positions$id = positions[id]) !== null && _positions$id !== void 0 ? _positions$id : {
+      x: 0,
+      y: 0
+    };
+    return /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+      weight: "bold",
+      className: "group-title"
+    }, "Geometry"), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, /*#__PURE__*/_react.default.createElement(NumberField, {
+      label: "X",
+      unit: "px",
+      value: cardPosition.x,
+      onCommit: function onCommit(next) {
+        return setPositions(function (current) {
+          var _current$id2;
+          return _objectSpread(_objectSpread({}, current), {}, {
+            [id]: _objectSpread(_objectSpread({}, (_current$id2 = current[id]) !== null && _current$id2 !== void 0 ? _current$id2 : {
+              x: 0,
+              y: 0
+            }), {}, {
+              x: next
+            })
+          });
+        });
+      }
+    }), /*#__PURE__*/_react.default.createElement(NumberField, {
+      label: "Y",
+      unit: "px",
+      value: cardPosition.y,
+      onCommit: function onCommit(next) {
+        return setPositions(function (current) {
+          var _current$id3;
+          return _objectSpread(_objectSpread({}, current), {}, {
+            [id]: _objectSpread(_objectSpread({}, (_current$id3 = current[id]) !== null && _current$id3 !== void 0 ? _current$id3 : {
+              x: 0,
+              y: 0
+            }), {}, {
+              y: next
+            })
+          });
+        });
+      }
+    })), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, /*#__PURE__*/_react.default.createElement(NumberField, {
+      label: "Width",
+      unit: "px",
+      value: cardWidth,
+      min: 1,
+      onCommit: onWidth
+    }), /*#__PURE__*/_react.default.createElement(AutoField, {
+      label: "Height"
+    })));
+  };
+
+  /* Header + panel switch + body, shared by every element kind — only the
+     groups inside differ. */
+  var renderInspectorBody = function renderInspectorBody(icon, headerName, id, groups) {
+    return /*#__PURE__*/_react.default.createElement(StyledInspectorBody, null, /*#__PURE__*/_react.default.createElement(StyledInspectorHeader, null, /*#__PURE__*/_react.default.createElement("span", {
+      className: "inspector-type-icon"
+    }, icon), /*#__PURE__*/_react.default.createElement("span", {
+      className: "inspector-name"
+    }, /*#__PURE__*/_react.default.createElement(_EditableText.EditableText, {
+      value: headerName,
+      variant: "Header 3",
+      weight: "bold",
+      onSave: function onSave(event) {
+        return setNames(function (current) {
+          return _objectSpread(_objectSpread({}, current), {}, {
+            [id]: event.target.value
+          });
+        });
+      },
+      inputProps: {
+        maxLength: 120
+      }
+    }))), /*#__PURE__*/_react.default.createElement(_outline.StyledChooseRow, null, /*#__PURE__*/_react.default.createElement(_outline.StyledPanelChooseSlot, null, /*#__PURE__*/_react.default.createElement(_ChooseV.ChooseV2, {
+      required: true,
+      options: [{
+        id: "properties",
+        name: "Properties"
+      }, {
+        id: "comments",
+        name: "Comments"
+      }],
+      selected: [tab],
+      onChange: function onChange(selected) {
+        return setTab(selected[0]);
+      }
+    }))), tab === "comments" ? /*#__PURE__*/_react.default.createElement(StyledInspectorEmpty, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, null, "The comments stream is coming soon.")) : /*#__PURE__*/_react.default.createElement(StyledPropGroups, null, groups));
+  };
+
+  /* Nothing selected. */
+  if (!def && !linkDef && !fileDef) {
+    return shell(/*#__PURE__*/_react.default.createElement(StyledInspectorEmpty, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, null, "Select an element to see its properties.")));
+  }
+
+  /* Link card — its URL plus the shared Locked flag. */
+  if (linkDef) {
+    var _names$linkDef$id, _linkDef$url;
+    return shell(renderInspectorBody(/*#__PURE__*/_react.default.createElement(_Icons.InsertLinkIcon, null), (_names$linkDef$id = names[linkDef.id]) !== null && _names$linkDef$id !== void 0 ? _names$linkDef$id : linkDef.url || "Link", linkDef.id, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, renderBody(linkDef.id), /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+      size: "small",
+      weight: "regular"
+    }, "URL"), /*#__PURE__*/_react.default.createElement(StyledControl, null, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+      value: (_linkDef$url = linkDef.url) !== null && _linkDef$url !== void 0 ? _linkDef$url : "",
+      placeholder: "https://\u2026",
+      onChange: function onChange(event) {
+        return setLinks(function (current) {
+          return current.map(function (link) {
+            return link.id === linkDef.id ? _objectSpread(_objectSpread({}, link), {}, {
+              url: event.target.value
+            }) : link;
+          });
+        });
+      }
+    }))), renderLocked(linkDef.id)), renderCardGeometry(linkDef.id, linkDef.width, function (width) {
+      return setLinks(function (current) {
+        return current.map(function (link) {
+          return link.id === linkDef.id ? _objectSpread(_objectSpread({}, link), {}, {
+            width
+          }) : link;
+        });
+      });
+    }))));
+  }
+
+  /* File card — read-only size plus the shared Locked flag. */
+  if (fileDef) {
+    var _names$fileDef$id;
+    return shell(renderInspectorBody(/*#__PURE__*/_react.default.createElement(_Icons.AttachmentIcon, null), (_names$fileDef$id = names[fileDef.id]) !== null && _names$fileDef$id !== void 0 ? _names$fileDef$id : fileDef.file ? "".concat(fileDef.file.base, ".").concat(fileDef.file.extension) : "File", fileDef.id, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, renderBody(fileDef.id), /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+      size: "small",
+      weight: "regular"
+    }, "Size"), /*#__PURE__*/_react.default.createElement(StyledAutoField, null, fileDef.file ? (0, _fileElement.formatFileSize)(fileDef.file.size) : "—")), renderLocked(fileDef.id)), renderCardGeometry(fileDef.id, fileDef.width, function (width) {
+      return setFiles(function (current) {
+        return current.map(function (file) {
+          return file.id === fileDef.id ? _objectSpread(_objectSpread({}, file), {}, {
+            width
+          }) : file;
+        });
+      });
+    }))));
+  }
+
+  /* Shape / sticky from here on. */
+  if (!def) {
+    return shell(/*#__PURE__*/_react.default.createElement(StyledInspectorEmpty, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, null, "Select an element to see its properties.")));
+  }
+  var traits = elementTraits(def);
+  var shape = def.kind === "shape" ? shapes[def.id] : null;
+  var size = (_sizes$def$id = sizes[def.id]) !== null && _sizes$def$id !== void 0 ? _sizes$def$id : {
+    width: def.width,
+    height: def.height
+  };
+  var position = (_positions$def$id = positions[def.id]) !== null && _positions$def$id !== void 0 ? _positions$def$id : {
+    x: def.x,
+    y: def.y
+  };
+  var rotation = (_rotations$def$id = rotations[def.id]) !== null && _rotations$def$id !== void 0 ? _rotations$def$id : 0;
+  var typeLabel = shape ? TYPE_LABEL[shape.type] : "Sticky note";
+  var name = (_names$def$id = names[def.id]) !== null && _names$def$id !== void 0 ? _names$def$id : typeLabel;
+  var updateShape = function updateShape(partial) {
+    return setShapes(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, {
+        [def.id]: _objectSpread(_objectSpread({}, current[def.id]), partial)
+      });
+    });
+  };
+
+  /* Fill is unified across kinds: a shape writes shape.fill, a sticky its note
+     colour. A transparent colour means no fill. */
+  var currentFill = shape ? shape.fill : stickyStyle.color;
+  var currentFillOpacity = shape ? shape.fillOpacity : stickyStyle.fillOpacity;
+  var setFill = function setFill(color) {
+    if (shape) {
+      updateShape({
+        fill: color
+      });
+    } else {
+      setStickyStyle(_objectSpread(_objectSpread({}, stickyStyle), {}, {
+        color
+      }));
+    }
+  };
+  var setFillOpacity = function setFillOpacity(next) {
+    if (shape) {
+      updateShape({
+        fillOpacity: next
+      });
+    } else {
+      setStickyStyle(_objectSpread(_objectSpread({}, stickyStyle), {}, {
+        fillOpacity: next
+      }));
+    }
+  };
+  var currentFontSize = shape ? shape.fontSize : stickyStyle.fontSize;
+  var currentAlign = shape ? (_shape$align = shape.align) !== null && _shape$align !== void 0 ? _shape$align : "left" : stickyStyle.align;
+  var setFontSize = function setFontSize(next) {
+    if (shape) {
+      updateShape({
+        fontSize: next
+      });
+    } else {
+      setStickyStyle(_objectSpread(_objectSpread({}, stickyStyle), {}, {
+        fontSize: next
+      }));
+    }
+  };
+  var setAlign = function setAlign(next) {
+    if (shape) {
+      updateShape({
+        align: next
+      });
+    } else {
+      setStickyStyle(_objectSpread(_objectSpread({}, stickyStyle), {}, {
+        align: next
+      }));
+    }
+  };
+  var styleFlags = shape !== null && shape !== void 0 ? shape : stickyStyle;
+  var toggleStyle = function toggleStyle(key) {
+    if (shape) {
+      updateShape({
+        [key]: !shape[key]
+      });
+    } else {
+      setStickyStyle(_objectSpread(_objectSpread({}, stickyStyle), {}, {
+        [key]: !stickyStyle[key]
+      }));
+    }
+  };
+  return shell(renderInspectorBody(shape ? _elements.SHAPE_TYPE_ICON[shape.type] : /*#__PURE__*/_react.default.createElement(_Icons.NoteIcon, null), name, def.id, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, renderBody(def.id), shape ? /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    size: "small",
+    weight: "regular"
+  }, "Shape"), /*#__PURE__*/_react.default.createElement(OptionSelect, {
+    options: ["rectangle", "roundedRectangle", "circle", "triangle"].map(function (shapeType) {
+      return {
+        id: shapeType,
+        name: TYPE_LABEL[shapeType]
+      };
+    }),
+    value: shape.type,
+    triggerLabel: TYPE_LABEL[shape.type],
+    onChange: function onChange(next) {
+      return updateShape({
+        type: next
+      });
+    }
+  })) : null, renderLocked(def.id)), traits.geometry ? /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    weight: "bold",
+    className: "group-title"
+  }, "Geometry"), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, /*#__PURE__*/_react.default.createElement(NumberField, {
+    label: "X",
+    unit: "px",
+    value: position.x,
+    onCommit: function onCommit(next) {
+      return setPositions(function (current) {
+        return _objectSpread(_objectSpread({}, current), {}, {
+          [def.id]: _objectSpread(_objectSpread({}, current[def.id]), {}, {
+            x: next
+          })
+        });
+      });
+    }
+  }), /*#__PURE__*/_react.default.createElement(NumberField, {
+    label: "Y",
+    unit: "px",
+    value: position.y,
+    onCommit: function onCommit(next) {
+      return setPositions(function (current) {
+        return _objectSpread(_objectSpread({}, current), {}, {
+          [def.id]: _objectSpread(_objectSpread({}, current[def.id]), {}, {
+            y: next
+          })
+        });
+      });
+    }
+  })), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, traits.autoWidth ? /*#__PURE__*/_react.default.createElement(AutoField, {
+    label: "Width"
+  }) : /*#__PURE__*/_react.default.createElement(NumberField, {
+    label: "Width",
+    unit: "px",
+    value: size.width,
+    min: 1,
+    onCommit: function onCommit(next) {
+      return setSizes(function (current) {
+        var _current$def$id$heigh, _current$def$id;
+        return _objectSpread(_objectSpread({}, current), {}, {
+          [def.id]: {
+            width: next,
+            height: (_current$def$id$heigh = (_current$def$id = current[def.id]) === null || _current$def$id === void 0 ? void 0 : _current$def$id.height) !== null && _current$def$id$heigh !== void 0 ? _current$def$id$heigh : def.height
+          }
+        });
+      });
+    }
+  }), traits.autoHeight ? /*#__PURE__*/_react.default.createElement(AutoField, {
+    label: "Height"
+  }) : /*#__PURE__*/_react.default.createElement(NumberField, {
+    label: "Height",
+    unit: "px",
+    value: size.height,
+    min: 1,
+    onCommit: function onCommit(next) {
+      return setSizes(function (current) {
+        var _current$def$id$width, _current$def$id2;
+        return _objectSpread(_objectSpread({}, current), {}, {
+          [def.id]: {
+            width: (_current$def$id$width = (_current$def$id2 = current[def.id]) === null || _current$def$id2 === void 0 ? void 0 : _current$def$id2.width) !== null && _current$def$id$width !== void 0 ? _current$def$id$width : def.width,
+            height: next
+          }
+        });
+      });
+    }
+  })), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, /*#__PURE__*/_react.default.createElement(NumberField, {
+    label: "Rotation",
+    unit: "\xB0",
+    value: rotation,
+    onCommit: function onCommit(next) {
+      return setRotations(function (current) {
+        return _objectSpread(_objectSpread({}, current), {}, {
+          [def.id]: next
+        });
+      });
+    }
+  }))) : null, traits.fill ? /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    weight: "bold",
+    className: "group-title"
+  }, "Fill"), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    size: "small",
+    weight: "regular"
+  }, "Color"), /*#__PURE__*/_react.default.createElement(ColorPickerField, {
+    includeTransparent: traits.fillTransparent,
+    value: currentFill,
+    onSelect: setFill
+  })), /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    size: "small",
+    weight: "regular"
+  }, "Opacity"), /*#__PURE__*/_react.default.createElement(OptionSelect, {
+    options: _elements.OPACITY_OPTIONS.map(function (opacity) {
+      return {
+        id: opacity,
+        name: "".concat(opacity, "%")
+      };
+    }),
+    value: currentFillOpacity,
+    triggerLabel: "".concat(currentFillOpacity, "%"),
+    onChange: function onChange(next) {
+      return setFillOpacity(Number(next));
+    }
+  })))) : null, traits.stroke && shape ? /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    weight: "bold",
+    className: "group-title"
+  }, "Stroke"), /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    size: "small",
+    weight: "regular"
+  }, "Pattern"), /*#__PURE__*/_react.default.createElement(StyledSegmented, null, /*#__PURE__*/_react.default.createElement(_ChooseV.ChooseV2, {
+    required: true,
+    options: _elements.BORDER_STYLE_OPTIONS.map(function (option) {
+      return {
+        id: option.label,
+        name: option.label
+      };
+    }),
+    selected: [(_BORDER_STYLE_OPTIONS = (_BORDER_STYLE_OPTIONS2 = _elements.BORDER_STYLE_OPTIONS.find(function (option) {
+      return option.value === shape.strokeDash;
+    })) === null || _BORDER_STYLE_OPTIONS2 === void 0 ? void 0 : _BORDER_STYLE_OPTIONS2.label) !== null && _BORDER_STYLE_OPTIONS !== void 0 ? _BORDER_STYLE_OPTIONS : "Solid"],
+    onChange: function onChange(selected) {
+      var _BORDER_STYLE_OPTIONS3;
+      return updateShape({
+        strokeDash: (_BORDER_STYLE_OPTIONS3 = _elements.BORDER_STYLE_OPTIONS.find(function (option) {
+          return option.label === selected[0];
+        })) === null || _BORDER_STYLE_OPTIONS3 === void 0 ? void 0 : _BORDER_STYLE_OPTIONS3.value
+      });
+    }
+  }))), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    size: "small",
+    weight: "regular"
+  }, "Thickness"), /*#__PURE__*/_react.default.createElement(OptionSelect, {
+    options: _elements.THICKNESS_OPTIONS.map(function (thickness) {
+      return {
+        id: thickness,
+        name: "".concat(thickness, " pt")
+      };
+    }),
+    value: shape.strokeWidth,
+    triggerLabel: "".concat(shape.strokeWidth, " pt"),
+    onChange: function onChange(next) {
+      return updateShape({
+        strokeWidth: Number(next)
+      });
+    }
+  })), /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    size: "small",
+    weight: "regular"
+  }, "Color"), /*#__PURE__*/_react.default.createElement(ColorPickerField, {
+    value: shape.stroke,
+    onSelect: function onSelect(color) {
+      return updateShape({
+        stroke: color
+      });
+    }
+  }))), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    size: "small",
+    weight: "regular"
+  }, "Radius"), /*#__PURE__*/_react.default.createElement(OptionSelect, {
+    options: _elements.RADIUS_OPTIONS.map(function (radius) {
+      return {
+        id: radius,
+        name: "".concat(radius, " px")
+      };
+    }),
+    value: shape.borderRadius,
+    triggerLabel: "".concat(shape.borderRadius, " px"),
+    onChange: function onChange(next) {
+      return updateShape({
+        borderRadius: Number(next)
+      });
+    }
+  })), /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    size: "small",
+    weight: "regular"
+  }, "Opacity"), /*#__PURE__*/_react.default.createElement(OptionSelect, {
+    options: _elements.OPACITY_OPTIONS.map(function (opacity) {
+      return {
+        id: opacity,
+        name: "".concat(opacity, "%")
+      };
+    }),
+    value: shape.strokeOpacity,
+    triggerLabel: "".concat(shape.strokeOpacity, "%"),
+    onChange: function onChange(next) {
+      return updateShape({
+        strokeOpacity: Number(next)
+      });
+    }
+  })))) : null, traits.text ? /*#__PURE__*/_react.default.createElement(StyledPropGroup, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    weight: "bold",
+    className: "group-title"
+  }, "Text"), /*#__PURE__*/_react.default.createElement(StyledFieldGrid, null, /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    size: "small",
+    weight: "regular"
+  }, "Style"), /*#__PURE__*/_react.default.createElement(StyledSegmented, null, _elements.STYLE_OPTIONS.map(function (option) {
+    return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+      key: option.key,
+      title: option.label
+    }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+      variant: "text gray",
+      active: styleFlags[option.key],
+      "aria-label": option.label,
+      onClick: function onClick() {
+        return toggleStyle(option.key);
+      }
+    }, option.icon));
+  }))), /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    size: "small",
+    weight: "regular"
+  }, "Size"), /*#__PURE__*/_react.default.createElement(OptionSelect, {
+    options: _elements.FONT_SIZE_OPTIONS.map(function (fontSize) {
+      return {
+        id: fontSize,
+        name: "".concat(fontSize, " pt")
+      };
+    }),
+    value: currentFontSize,
+    triggerLabel: "".concat(currentFontSize, " pt"),
+    onChange: function onChange(next) {
+      return setFontSize(Number(next));
+    }
+  }))), /*#__PURE__*/_react.default.createElement(StyledPropRow, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
+    size: "small",
+    weight: "regular"
+  }, "Alignment"), /*#__PURE__*/_react.default.createElement(StyledSegmented, null, _elements.ALIGN_OPTIONS.map(function (option) {
+    return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+      key: option.value,
+      title: option.label
+    }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+      variant: "text gray",
+      active: currentAlign === option.value,
+      "aria-label": option.label,
+      onClick: function onClick() {
+        return setAlign(option.value);
+      }
+    }, option.icon));
+  })))) : null)));
+};
+//# sourceMappingURL=inspector.js.map