@activecollab/components 2.0.398 → 2.0.400

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

@@ -0,0 +1,753 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useCallback, useState } from "react";
+import styled from "styled-components";
+import { BORDER_STYLE_OPTIONS, CANVAS_ELEMENTS, COLOR_OPTIONS, ELEMENT_BODIES, FONT_SIZE_OPTIONS, OPACITY_OPTIONS, RADIUS_OPTIONS, SHAPE_TYPE_ICON, THICKNESS_OPTIONS, ALIGN_OPTIONS, STYLE_OPTIONS } from "./elements";
+import { formatFileSize } from "./fileElement";
+import { OUTLINE_MAX_WIDTH, OUTLINE_MIN_WIDTH, OUTLINE_WIDTH, StyledChooseRow, StyledPanelChooseSlot } from "./outline";
+import { Checkbox } from "../../components/Checkbox";
+import { ChooseV2 } from "../../components/ChooseV2";
+import { Dot } from "../../components/Dot";
+import { EditableText } from "../../components/EditableText";
+import { IconButton } from "../../components/IconButton";
+import { AttachmentIcon, CircleSlashIcon, InsertLinkIcon, NoteIcon } from "../../components/Icons";
+import { Input, InputAdornment, InputNumber } from "../../components/Input";
+import { Label } from "../../components/Label";
+import { Select } from "../../components/Select";
+import { SelectTrigger } from "../../components/SelectTrigger";
+import { Tooltip } from "../../components/Tooltip";
+import { Body2, Caption1 } from "../../components/Typography";
+
+/* ------------------------------------------------------------------ */
+/* 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. */
+
+export const elementTraits = def => 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
+};
+export const TYPE_LABEL = {
+  rectangle: "Rectangle",
+  roundedRectangle: "Rounded Rectangle",
+  circle: "Circle",
+  triangle: "Triangle"
+};
+export const sameColor = (a, b) => (a != null ? 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. */
+export const StyledInspectorSidebar = styled.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. */
+export const StyledInspectorResizer = styled.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;}"]);
+export const StyledInspectorBody = styled.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. */
+export const StyledPropGroups = styled.div.withConfig({
+  displayName: "inspector__StyledPropGroups",
+  componentId: "sc-do334k-3"
+})(["display:flex;flex-direction:column;> div:first-child{border-top:none;}"]);
+export const StyledInspectorHeader = styled.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. */
+export const StyledInspectorEmpty = styled.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. */
+export const StyledPropGroup = styled.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);}"]);
+export const StyledPropRow = styled.div.withConfig({
+  displayName: "inspector__StyledPropRow",
+  componentId: "sc-do334k-7"
+})(["display:flex;flex-direction:column;gap:4px;"]);
+export const StyledFieldGrid = styled.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. */
+export const StyledControl = styled.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. */
+export const StyledCheckboxRow = styled.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. */
+export const StyledBody = styled.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). */
+export const StyledAutoField = styled.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;"]);
+export const StyledSegmented = styled.div.withConfig({
+  displayName: "inspector__StyledSegmented",
+  componentId: "sc-do334k-13"
+})(["display:flex;gap:4px;svg{display:block;width:16px;height:16px;}"]);
+export const NumberField = _ref => {
+  let label = _ref.label,
+    value = _ref.value,
+    min = _ref.min,
+    unit = _ref.unit,
+    onCommit = _ref.onCommit;
+  return /*#__PURE__*/React.createElement(StyledPropRow, null, /*#__PURE__*/React.createElement(Label, {
+    size: "small",
+    weight: "regular"
+  }, label), /*#__PURE__*/React.createElement(StyledControl, null, /*#__PURE__*/React.createElement(InputNumber, {
+    className: "wb-inspector-num",
+    value: value,
+    decimalLength: 0,
+    min: min,
+    update: true,
+    endAdornment: unit ? /*#__PURE__*/React.createElement(InputAdornment, {
+      disablePointerEvents: true
+    }, /*#__PURE__*/React.createElement(Caption1, {
+      color: "secondary"
+    }, unit)) : undefined,
+    onChange: next => {
+      if (next !== undefined && !Number.isNaN(next)) {
+        onCommit(Math.round(next));
+      }
+    }
+  })));
+};
+export const AutoField = _ref2 => {
+  let label = _ref2.label;
+  return /*#__PURE__*/React.createElement(StyledPropRow, null, /*#__PURE__*/React.createElement(Label, {
+    size: "small",
+    weight: "regular"
+  }, label), /*#__PURE__*/React.createElement(StyledAutoField, null, "Auto"));
+};
+export const OptionSelect = _ref3 => {
+  let options = _ref3.options,
+    value = _ref3.value,
+    triggerLabel = _ref3.triggerLabel,
+    onChange = _ref3.onChange;
+  return /*#__PURE__*/React.createElement(StyledControl, null, /*#__PURE__*/React.createElement(Select, {
+    type: "single",
+    disableSearch: true,
+    forceCloseMenu: true,
+    options: options,
+    selected: value,
+    onChange: next => onChange(Array.isArray(next) ? next[0] : next),
+    target: /*#__PURE__*/React.createElement(SelectTrigger, {
+      className: "wb-inspector-trigger"
+    }, triggerLabel)
+  }));
+};
+export const TRANSPARENT_OPTION = {
+  id: "transparent",
+  name: "Transparent",
+  color: "transparent",
+  textColor: "transparent"
+};
+
+/* The name shown on the color picker's trigger, resolved from the current hex. */
+export const colorName = hex => {
+  if (!hex || sameColor(hex, "transparent")) {
+    return "Transparent";
+  }
+  const match = COLOR_OPTIONS.find(option => 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. */
+export const ColorPickerField = _ref4 => {
+  let value = _ref4.value,
+    disabled = _ref4.disabled,
+    includeTransparent = _ref4.includeTransparent,
+    onSelect = _ref4.onSelect;
+  const options = includeTransparent ? [TRANSPARENT_OPTION, ...COLOR_OPTIONS] : COLOR_OPTIONS;
+  const isTransparent = !value || sameColor(value, "transparent");
+  return /*#__PURE__*/React.createElement(StyledControl, {
+    className: disabled ? "disabled" : undefined
+  }, /*#__PURE__*/React.createElement(Select, {
+    type: "single",
+    disableSearch: true,
+    forceCloseMenu: true,
+    options: options,
+    selected: isTransparent ? "transparent" : value,
+    onChange: next => onSelect(String(Array.isArray(next) ? next[0] : next)),
+    target: /*#__PURE__*/React.createElement(SelectTrigger, {
+      className: "wb-inspector-trigger"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "wb-color-value"
+    }, isTransparent ? /*#__PURE__*/React.createElement(CircleSlashIcon, {
+      width: 14,
+      height: 14,
+      fill: "currentColor",
+      className: "wb-transparent-swatch"
+    }) : /*#__PURE__*/React.createElement(Dot, {
+      color: value,
+      size: 14
+    }), colorName(value)))
+  }));
+};
+export const RightInspector = _ref5 => {
+  var _sizes$def$id, _positions$def$id, _rotations$def$id, _names$def$id, _shape$align, _BORDER_STYLE_OPTIONS, _BORDER_STYLE_OPTIONS2;
+  let 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;
+  const _useState = useState(OUTLINE_WIDTH),
+    width = _useState[0],
+    setWidth = _useState[1];
+  const _useState2 = useState(false),
+    resizing = _useState2[0],
+    setResizing = _useState2[1];
+  /* Mock only — element display names are not persisted anywhere; they default
+     to the type label until renamed here. */
+  const _useState3 = useState({}),
+    names = _useState3[0],
+    setNames = _useState3[1];
+  /* Which inspector tab is showing: the property groups we design, or the
+     upcoming comments stream (details TBD). */
+  const _useState4 = useState("properties"),
+    tab = _useState4[0],
+    setTab = _useState4[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). */
+  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 def = selectedId ? [...CANVAS_ELEMENTS, ...createdShapes].find(element => element.id === selectedId) : undefined;
+  const linkDef = selectedId ? links.find(link => link.id === selectedId) : undefined;
+  const fileDef = selectedId ? files.find(file => file.id === selectedId) : undefined;
+  const shell = content => /*#__PURE__*/React.createElement(StyledInspectorSidebar, {
+    style: {
+      width
+    }
+  }, /*#__PURE__*/React.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. */
+  const renderBody = id => {
+    var _ELEMENT_BODIES$id;
+    const html = (_ELEMENT_BODIES$id = ELEMENT_BODIES[id]) != null ? _ELEMENT_BODIES$id : "";
+    if (!html) {
+      return null;
+    }
+
+    // eslint-disable-next-line react/no-danger
+    return /*#__PURE__*/React.createElement(StyledBody, {
+      dangerouslySetInnerHTML: {
+        __html: html
+      }
+    });
+  };
+
+  /* The Locked checkbox — shown for every element kind, toggling a design lock
+     flag keyed by element id. */
+  const renderLocked = id => {
+    var _locks$id;
+    return /*#__PURE__*/React.createElement(StyledCheckboxRow, null, /*#__PURE__*/React.createElement(Checkbox, {
+      id: "wb-lock-" + id,
+      checked: (_locks$id = locks[id]) != null ? _locks$id : false,
+      onChange: () => setLocks(current => {
+        var _current$id;
+        return _extends({}, current, {
+          [id]: !((_current$id = current[id]) != null ? _current$id : false)
+        });
+      })
+    }), /*#__PURE__*/React.createElement(Label, {
+      htmlFor: "wb-lock-" + 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. */
+  const renderCardGeometry = (id, cardWidth, onWidth) => {
+    var _positions$id;
+    const cardPosition = (_positions$id = positions[id]) != null ? _positions$id : {
+      x: 0,
+      y: 0
+    };
+    return /*#__PURE__*/React.createElement(StyledPropGroup, null, /*#__PURE__*/React.createElement(Body2, {
+      weight: "bold",
+      className: "group-title"
+    }, "Geometry"), /*#__PURE__*/React.createElement(StyledFieldGrid, null, /*#__PURE__*/React.createElement(NumberField, {
+      label: "X",
+      unit: "px",
+      value: cardPosition.x,
+      onCommit: next => setPositions(current => {
+        var _current$id2;
+        return _extends({}, current, {
+          [id]: _extends({}, (_current$id2 = current[id]) != null ? _current$id2 : {
+            x: 0,
+            y: 0
+          }, {
+            x: next
+          })
+        });
+      })
+    }), /*#__PURE__*/React.createElement(NumberField, {
+      label: "Y",
+      unit: "px",
+      value: cardPosition.y,
+      onCommit: next => setPositions(current => {
+        var _current$id3;
+        return _extends({}, current, {
+          [id]: _extends({}, (_current$id3 = current[id]) != null ? _current$id3 : {
+            x: 0,
+            y: 0
+          }, {
+            y: next
+          })
+        });
+      })
+    })), /*#__PURE__*/React.createElement(StyledFieldGrid, null, /*#__PURE__*/React.createElement(NumberField, {
+      label: "Width",
+      unit: "px",
+      value: cardWidth,
+      min: 1,
+      onCommit: onWidth
+    }), /*#__PURE__*/React.createElement(AutoField, {
+      label: "Height"
+    })));
+  };
+
+  /* Header + panel switch + body, shared by every element kind — only the
+     groups inside differ. */
+  const renderInspectorBody = (icon, headerName, id, groups) => /*#__PURE__*/React.createElement(StyledInspectorBody, null, /*#__PURE__*/React.createElement(StyledInspectorHeader, null, /*#__PURE__*/React.createElement("span", {
+    className: "inspector-type-icon"
+  }, icon), /*#__PURE__*/React.createElement("span", {
+    className: "inspector-name"
+  }, /*#__PURE__*/React.createElement(EditableText, {
+    value: headerName,
+    variant: "Header 3",
+    weight: "bold",
+    onSave: event => setNames(current => _extends({}, current, {
+      [id]: event.target.value
+    })),
+    inputProps: {
+      maxLength: 120
+    }
+  }))), /*#__PURE__*/React.createElement(StyledChooseRow, null, /*#__PURE__*/React.createElement(StyledPanelChooseSlot, null, /*#__PURE__*/React.createElement(ChooseV2, {
+    required: true,
+    options: [{
+      id: "properties",
+      name: "Properties"
+    }, {
+      id: "comments",
+      name: "Comments"
+    }],
+    selected: [tab],
+    onChange: selected => setTab(selected[0])
+  }))), tab === "comments" ? /*#__PURE__*/React.createElement(StyledInspectorEmpty, null, /*#__PURE__*/React.createElement(Body2, null, "The comments stream is coming soon.")) : /*#__PURE__*/React.createElement(StyledPropGroups, null, groups));
+
+  /* Nothing selected. */
+  if (!def && !linkDef && !fileDef) {
+    return shell(/*#__PURE__*/React.createElement(StyledInspectorEmpty, null, /*#__PURE__*/React.createElement(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.createElement(InsertLinkIcon, null), (_names$linkDef$id = names[linkDef.id]) != null ? _names$linkDef$id : linkDef.url || "Link", linkDef.id, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPropGroup, null, renderBody(linkDef.id), /*#__PURE__*/React.createElement(StyledPropRow, null, /*#__PURE__*/React.createElement(Label, {
+      size: "small",
+      weight: "regular"
+    }, "URL"), /*#__PURE__*/React.createElement(StyledControl, null, /*#__PURE__*/React.createElement(Input, {
+      value: (_linkDef$url = linkDef.url) != null ? _linkDef$url : "",
+      placeholder: "https://\u2026",
+      onChange: event => setLinks(current => current.map(link => link.id === linkDef.id ? _extends({}, link, {
+        url: event.target.value
+      }) : link))
+    }))), renderLocked(linkDef.id)), renderCardGeometry(linkDef.id, linkDef.width, width => setLinks(current => current.map(link => link.id === linkDef.id ? _extends({}, link, {
+      width
+    }) : link))))));
+  }
+
+  /* File card — read-only size plus the shared Locked flag. */
+  if (fileDef) {
+    var _names$fileDef$id;
+    return shell(renderInspectorBody(/*#__PURE__*/React.createElement(AttachmentIcon, null), (_names$fileDef$id = names[fileDef.id]) != null ? _names$fileDef$id : fileDef.file ? fileDef.file.base + "." + fileDef.file.extension : "File", fileDef.id, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPropGroup, null, renderBody(fileDef.id), /*#__PURE__*/React.createElement(StyledPropRow, null, /*#__PURE__*/React.createElement(Label, {
+      size: "small",
+      weight: "regular"
+    }, "Size"), /*#__PURE__*/React.createElement(StyledAutoField, null, fileDef.file ? formatFileSize(fileDef.file.size) : "—")), renderLocked(fileDef.id)), renderCardGeometry(fileDef.id, fileDef.width, width => setFiles(current => current.map(file => file.id === fileDef.id ? _extends({}, file, {
+      width
+    }) : file))))));
+  }
+
+  /* Shape / sticky from here on. */
+  if (!def) {
+    return shell(/*#__PURE__*/React.createElement(StyledInspectorEmpty, null, /*#__PURE__*/React.createElement(Body2, null, "Select an element to see its properties.")));
+  }
+  const traits = elementTraits(def);
+  const shape = def.kind === "shape" ? shapes[def.id] : null;
+  const size = (_sizes$def$id = sizes[def.id]) != null ? _sizes$def$id : {
+    width: def.width,
+    height: def.height
+  };
+  const position = (_positions$def$id = positions[def.id]) != null ? _positions$def$id : {
+    x: def.x,
+    y: def.y
+  };
+  const rotation = (_rotations$def$id = rotations[def.id]) != null ? _rotations$def$id : 0;
+  const typeLabel = shape ? TYPE_LABEL[shape.type] : "Sticky note";
+  const name = (_names$def$id = names[def.id]) != null ? _names$def$id : typeLabel;
+  const updateShape = partial => setShapes(current => _extends({}, current, {
+    [def.id]: _extends({}, 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. */
+  const currentFill = shape ? shape.fill : stickyStyle.color;
+  const currentFillOpacity = shape ? shape.fillOpacity : stickyStyle.fillOpacity;
+  const setFill = color => {
+    if (shape) {
+      updateShape({
+        fill: color
+      });
+    } else {
+      setStickyStyle(_extends({}, stickyStyle, {
+        color
+      }));
+    }
+  };
+  const setFillOpacity = next => {
+    if (shape) {
+      updateShape({
+        fillOpacity: next
+      });
+    } else {
+      setStickyStyle(_extends({}, stickyStyle, {
+        fillOpacity: next
+      }));
+    }
+  };
+  const currentFontSize = shape ? shape.fontSize : stickyStyle.fontSize;
+  const currentAlign = shape ? (_shape$align = shape.align) != null ? _shape$align : "left" : stickyStyle.align;
+  const setFontSize = next => {
+    if (shape) {
+      updateShape({
+        fontSize: next
+      });
+    } else {
+      setStickyStyle(_extends({}, stickyStyle, {
+        fontSize: next
+      }));
+    }
+  };
+  const setAlign = next => {
+    if (shape) {
+      updateShape({
+        align: next
+      });
+    } else {
+      setStickyStyle(_extends({}, stickyStyle, {
+        align: next
+      }));
+    }
+  };
+  const styleFlags = shape != null ? shape : stickyStyle;
+  const toggleStyle = key => {
+    if (shape) {
+      updateShape({
+        [key]: !shape[key]
+      });
+    } else {
+      setStickyStyle(_extends({}, stickyStyle, {
+        [key]: !stickyStyle[key]
+      }));
+    }
+  };
+  return shell(renderInspectorBody(shape ? SHAPE_TYPE_ICON[shape.type] : /*#__PURE__*/React.createElement(NoteIcon, null), name, def.id, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPropGroup, null, renderBody(def.id), shape ? /*#__PURE__*/React.createElement(StyledPropRow, null, /*#__PURE__*/React.createElement(Label, {
+    size: "small",
+    weight: "regular"
+  }, "Shape"), /*#__PURE__*/React.createElement(OptionSelect, {
+    options: ["rectangle", "roundedRectangle", "circle", "triangle"].map(shapeType => ({
+      id: shapeType,
+      name: TYPE_LABEL[shapeType]
+    })),
+    value: shape.type,
+    triggerLabel: TYPE_LABEL[shape.type],
+    onChange: next => updateShape({
+      type: next
+    })
+  })) : null, renderLocked(def.id)), traits.geometry ? /*#__PURE__*/React.createElement(StyledPropGroup, null, /*#__PURE__*/React.createElement(Body2, {
+    weight: "bold",
+    className: "group-title"
+  }, "Geometry"), /*#__PURE__*/React.createElement(StyledFieldGrid, null, /*#__PURE__*/React.createElement(NumberField, {
+    label: "X",
+    unit: "px",
+    value: position.x,
+    onCommit: next => setPositions(current => _extends({}, current, {
+      [def.id]: _extends({}, current[def.id], {
+        x: next
+      })
+    }))
+  }), /*#__PURE__*/React.createElement(NumberField, {
+    label: "Y",
+    unit: "px",
+    value: position.y,
+    onCommit: next => setPositions(current => _extends({}, current, {
+      [def.id]: _extends({}, current[def.id], {
+        y: next
+      })
+    }))
+  })), /*#__PURE__*/React.createElement(StyledFieldGrid, null, traits.autoWidth ? /*#__PURE__*/React.createElement(AutoField, {
+    label: "Width"
+  }) : /*#__PURE__*/React.createElement(NumberField, {
+    label: "Width",
+    unit: "px",
+    value: size.width,
+    min: 1,
+    onCommit: next => setSizes(current => {
+      var _current$def$id$heigh, _current$def$id;
+      return _extends({}, current, {
+        [def.id]: {
+          width: next,
+          height: (_current$def$id$heigh = (_current$def$id = current[def.id]) == null ? void 0 : _current$def$id.height) != null ? _current$def$id$heigh : def.height
+        }
+      });
+    })
+  }), traits.autoHeight ? /*#__PURE__*/React.createElement(AutoField, {
+    label: "Height"
+  }) : /*#__PURE__*/React.createElement(NumberField, {
+    label: "Height",
+    unit: "px",
+    value: size.height,
+    min: 1,
+    onCommit: next => setSizes(current => {
+      var _current$def$id$width, _current$def$id2;
+      return _extends({}, current, {
+        [def.id]: {
+          width: (_current$def$id$width = (_current$def$id2 = current[def.id]) == null ? void 0 : _current$def$id2.width) != null ? _current$def$id$width : def.width,
+          height: next
+        }
+      });
+    })
+  })), /*#__PURE__*/React.createElement(StyledFieldGrid, null, /*#__PURE__*/React.createElement(NumberField, {
+    label: "Rotation",
+    unit: "\xB0",
+    value: rotation,
+    onCommit: next => setRotations(current => _extends({}, current, {
+      [def.id]: next
+    }))
+  }))) : null, traits.fill ? /*#__PURE__*/React.createElement(StyledPropGroup, null, /*#__PURE__*/React.createElement(Body2, {
+    weight: "bold",
+    className: "group-title"
+  }, "Fill"), /*#__PURE__*/React.createElement(StyledFieldGrid, null, /*#__PURE__*/React.createElement(StyledPropRow, null, /*#__PURE__*/React.createElement(Label, {
+    size: "small",
+    weight: "regular"
+  }, "Color"), /*#__PURE__*/React.createElement(ColorPickerField, {
+    includeTransparent: traits.fillTransparent,
+    value: currentFill,
+    onSelect: setFill
+  })), /*#__PURE__*/React.createElement(StyledPropRow, null, /*#__PURE__*/React.createElement(Label, {
+    size: "small",
+    weight: "regular"
+  }, "Opacity"), /*#__PURE__*/React.createElement(OptionSelect, {
+    options: OPACITY_OPTIONS.map(opacity => ({
+      id: opacity,
+      name: opacity + "%"
+    })),
+    value: currentFillOpacity,
+    triggerLabel: currentFillOpacity + "%",
+    onChange: next => setFillOpacity(Number(next))
+  })))) : null, traits.stroke && shape ? /*#__PURE__*/React.createElement(StyledPropGroup, null, /*#__PURE__*/React.createElement(Body2, {
+    weight: "bold",
+    className: "group-title"
+  }, "Stroke"), /*#__PURE__*/React.createElement(StyledPropRow, null, /*#__PURE__*/React.createElement(Label, {
+    size: "small",
+    weight: "regular"
+  }, "Pattern"), /*#__PURE__*/React.createElement(StyledSegmented, null, /*#__PURE__*/React.createElement(ChooseV2, {
+    required: true,
+    options: BORDER_STYLE_OPTIONS.map(option => ({
+      id: option.label,
+      name: option.label
+    })),
+    selected: [(_BORDER_STYLE_OPTIONS = (_BORDER_STYLE_OPTIONS2 = BORDER_STYLE_OPTIONS.find(option => option.value === shape.strokeDash)) == null ? void 0 : _BORDER_STYLE_OPTIONS2.label) != null ? _BORDER_STYLE_OPTIONS : "Solid"],
+    onChange: selected => {
+      var _BORDER_STYLE_OPTIONS3;
+      return updateShape({
+        strokeDash: (_BORDER_STYLE_OPTIONS3 = BORDER_STYLE_OPTIONS.find(option => option.label === selected[0])) == null ? void 0 : _BORDER_STYLE_OPTIONS3.value
+      });
+    }
+  }))), /*#__PURE__*/React.createElement(StyledFieldGrid, null, /*#__PURE__*/React.createElement(StyledPropRow, null, /*#__PURE__*/React.createElement(Label, {
+    size: "small",
+    weight: "regular"
+  }, "Thickness"), /*#__PURE__*/React.createElement(OptionSelect, {
+    options: THICKNESS_OPTIONS.map(thickness => ({
+      id: thickness,
+      name: thickness + " pt"
+    })),
+    value: shape.strokeWidth,
+    triggerLabel: shape.strokeWidth + " pt",
+    onChange: next => updateShape({
+      strokeWidth: Number(next)
+    })
+  })), /*#__PURE__*/React.createElement(StyledPropRow, null, /*#__PURE__*/React.createElement(Label, {
+    size: "small",
+    weight: "regular"
+  }, "Color"), /*#__PURE__*/React.createElement(ColorPickerField, {
+    value: shape.stroke,
+    onSelect: color => updateShape({
+      stroke: color
+    })
+  }))), /*#__PURE__*/React.createElement(StyledFieldGrid, null, /*#__PURE__*/React.createElement(StyledPropRow, null, /*#__PURE__*/React.createElement(Label, {
+    size: "small",
+    weight: "regular"
+  }, "Radius"), /*#__PURE__*/React.createElement(OptionSelect, {
+    options: RADIUS_OPTIONS.map(radius => ({
+      id: radius,
+      name: radius + " px"
+    })),
+    value: shape.borderRadius,
+    triggerLabel: shape.borderRadius + " px",
+    onChange: next => updateShape({
+      borderRadius: Number(next)
+    })
+  })), /*#__PURE__*/React.createElement(StyledPropRow, null, /*#__PURE__*/React.createElement(Label, {
+    size: "small",
+    weight: "regular"
+  }, "Opacity"), /*#__PURE__*/React.createElement(OptionSelect, {
+    options: OPACITY_OPTIONS.map(opacity => ({
+      id: opacity,
+      name: opacity + "%"
+    })),
+    value: shape.strokeOpacity,
+    triggerLabel: shape.strokeOpacity + "%",
+    onChange: next => updateShape({
+      strokeOpacity: Number(next)
+    })
+  })))) : null, traits.text ? /*#__PURE__*/React.createElement(StyledPropGroup, null, /*#__PURE__*/React.createElement(Body2, {
+    weight: "bold",
+    className: "group-title"
+  }, "Text"), /*#__PURE__*/React.createElement(StyledFieldGrid, null, /*#__PURE__*/React.createElement(StyledPropRow, null, /*#__PURE__*/React.createElement(Label, {
+    size: "small",
+    weight: "regular"
+  }, "Style"), /*#__PURE__*/React.createElement(StyledSegmented, null, STYLE_OPTIONS.map(option => /*#__PURE__*/React.createElement(Tooltip, {
+    key: option.key,
+    title: option.label
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "text gray",
+    active: styleFlags[option.key],
+    "aria-label": option.label,
+    onClick: () => toggleStyle(option.key)
+  }, option.icon))))), /*#__PURE__*/React.createElement(StyledPropRow, null, /*#__PURE__*/React.createElement(Label, {
+    size: "small",
+    weight: "regular"
+  }, "Size"), /*#__PURE__*/React.createElement(OptionSelect, {
+    options: FONT_SIZE_OPTIONS.map(fontSize => ({
+      id: fontSize,
+      name: fontSize + " pt"
+    })),
+    value: currentFontSize,
+    triggerLabel: currentFontSize + " pt",
+    onChange: next => setFontSize(Number(next))
+  }))), /*#__PURE__*/React.createElement(StyledPropRow, null, /*#__PURE__*/React.createElement(Label, {
+    size: "small",
+    weight: "regular"
+  }, "Alignment"), /*#__PURE__*/React.createElement(StyledSegmented, null, ALIGN_OPTIONS.map(option => /*#__PURE__*/React.createElement(Tooltip, {
+    key: option.value,
+    title: option.label
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "text gray",
+    active: currentAlign === option.value,
+    "aria-label": option.label,
+    onClick: () => setAlign(option.value)
+  }, option.icon)))))) : null)));
+};
+//# sourceMappingURL=inspector.js.map