@activecollab/components 2.0.408 → 2.0.409

package/dist/esm/presentation/whiteboard/inspector.d.ts

@@ -2,17 +2,45 @@ import React, { ReactElement } from "react";
 import { CanvasElementDef, ShapeElementState, ShapeType, StickyTextStyle } from "./elements";
 import { FileElementDef } from "./fileElement";
 import { LinkElementDef } from "./linkElement";
+import { ProjectElementDef } from "./projectElements";
 export type RightPanel = "inspector" | "comments" | null;
 export interface ElementTraits {
     geometry: boolean;
     fill: boolean;
+    renamable?: boolean;
     fillTransparent?: boolean;
     stroke: boolean;
     text: boolean;
     autoWidth?: boolean;
     autoHeight?: boolean;
+    readOnly?: boolean;
 }
 export declare const elementTraits: (def: CanvasElementDef) => ElementTraits;
+/**
+ * A project / task card's traits. It is the most constrained element on the
+ * board, and every "false" here is a fact about the card rather than a feature
+ * that has not been built yet:
+ *
+ *   fill / stroke / text   the card's appearance is the design system's, not
+ *                          the board's — recolouring it would make a task look
+ *                          like something it is not on another person's screen.
+ *   autoHeight             the card is content-sized; only its width is given.
+ *   renamable              the title belongs to the task / project record.
+ *
+ * Rotation is absent for the same reason it is absent on link and file cards:
+ * the Geometry group for a card simply does not render one.
+ */
+export declare const PROJECT_ELEMENT_TRAITS: ElementTraits;
+/**
+ * A LIMITED-ACCESS card's traits: the project card's, with everything the
+ * viewer could have changed taken away.
+ *
+ * The panel is not empty, and that is deliberate — geometry still renders, so
+ * the viewer can see that the thing has a position and a size, which is
+ * precisely the amount that Workload's limited cell exposes (its data shape is
+ * a quantity and an offset). It simply cannot be edited.
+ */
+export declare const LIMITED_ELEMENT_TRAITS: ElementTraits;
 export declare const TYPE_LABEL: Record<ShapeType, string>;
 export declare const sameColor: (a: string | undefined, b: string) => boolean;
 export declare const StyledInspectorSidebar: import("styled-components").StyledComponent<"aside", any, {}, never>;
@@ -40,6 +68,10 @@ export declare const NumberField: ({ label, value, min, unit, onCommit, }: Numbe
 export declare const AutoField: ({ label }: {
     label: string;
 }) => ReactElement;
+export declare const ReadOnlyField: ({ label, value, }: {
+    label: string;
+    value: string;
+}) => ReactElement;
 export interface OptionSelectProps {
     options: {
         id: string | number;
@@ -93,8 +125,10 @@ export interface RightInspectorProps {
     files: FileElementDef[];
     setFiles: React.Dispatch<React.SetStateAction<FileElementDef[]>>;
     createdShapes: CanvasElementDef[];
+    projectElements: ProjectElementDef[];
+    setProjectElements: React.Dispatch<React.SetStateAction<ProjectElementDef[]>>;
     locks: Record<string, boolean>;
     setLocks: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
 }
-export declare const RightInspector: ({ selectedId, positions, setPositions, sizes, setSizes, rotations, setRotations, shapes, setShapes, stickyStyle, setStickyStyle, links, setLinks, files, setFiles, createdShapes, locks, setLocks, }: RightInspectorProps) => ReactElement;
+export declare const RightInspector: ({ selectedId, positions, setPositions, sizes, setSizes, rotations, setRotations, shapes, setShapes, stickyStyle, setStickyStyle, links, setLinks, files, setFiles, createdShapes, projectElements, setProjectElements, locks, setLocks, }: RightInspectorProps) => ReactElement;
 //# sourceMappingURL=inspector.d.ts.map

package/dist/esm/presentation/whiteboard/inspector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inspector.d.ts","sourceRoot":"","sources":["../../../../src/presentation/whiteboard/inspector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"inspector.d.ts","sourceRoot":"","sources":["../../../../src/presentation/whiteboard/inspector.tsx"],"names":[],"mappings":"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"}

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

@@ -4,18 +4,19 @@ 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 { projectElementTitle } from "./projectElements";
 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 { AttachmentIcon, CircleSlashIcon, InsertLinkIcon, LockIcon, NoteIcon, ProjectIcon, TaskIcon } 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";
+import { Body2, Caption1, Header3 } from "../../components/Typography";
 
 /* ------------------------------------------------------------------ */
 /* Right Inspector — selected-element properties panel                 */
@@ -46,6 +47,42 @@ export const elementTraits = def => def.kind === "sticky" ? {
   stroke: true,
   text: true
 };
+
+/**
+ * A project / task card's traits. It is the most constrained element on the
+ * board, and every "false" here is a fact about the card rather than a feature
+ * that has not been built yet:
+ *
+ *   fill / stroke / text   the card's appearance is the design system's, not
+ *                          the board's — recolouring it would make a task look
+ *                          like something it is not on another person's screen.
+ *   autoHeight             the card is content-sized; only its width is given.
+ *   renamable              the title belongs to the task / project record.
+ *
+ * Rotation is absent for the same reason it is absent on link and file cards:
+ * the Geometry group for a card simply does not render one.
+ */
+export const PROJECT_ELEMENT_TRAITS = {
+  geometry: true,
+  fill: false,
+  stroke: false,
+  text: false,
+  autoHeight: true,
+  renamable: false
+};
+
+/**
+ * A LIMITED-ACCESS card's traits: the project card's, with everything the
+ * viewer could have changed taken away.
+ *
+ * The panel is not empty, and that is deliberate — geometry still renders, so
+ * the viewer can see that the thing has a position and a size, which is
+ * precisely the amount that Workload's limited cell exposes (its data shape is
+ * a quantity and an offset). It simply cannot be edited.
+ */
+export const LIMITED_ELEMENT_TRAITS = _extends({}, PROJECT_ELEMENT_TRAITS, {
+  readOnly: true
+});
 export const TYPE_LABEL = {
   rectangle: "Rectangle",
   roundedRectangle: "Rounded Rectangle",
@@ -83,7 +120,7 @@ export const StyledPropGroups = styled.div.withConfig({
 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;}"]);
+})(["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;}.inspector-name-static{padding:0 4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"]);
 
 /* Empty state — same muted treatment the outline uses for unnamed rows. */
 export const StyledInspectorEmpty = styled.div.withConfig({
@@ -172,11 +209,24 @@ export const AutoField = _ref2 => {
     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;
+
+/* A geometry value the viewer may READ but not change — the same field
+   `AutoField` and the file card's Size already use, with a real value in it.
+   Showing the number greyed out is the point: a limited card still has a
+   position and a size, and those are the only facts about it there are. */
+export const ReadOnlyField = _ref3 => {
+  let label = _ref3.label,
+    value = _ref3.value;
+  return /*#__PURE__*/React.createElement(StyledPropRow, null, /*#__PURE__*/React.createElement(Label, {
+    size: "small",
+    weight: "regular"
+  }, label), /*#__PURE__*/React.createElement(StyledAutoField, null, value));
+};
+export const OptionSelect = _ref4 => {
+  let options = _ref4.options,
+    value = _ref4.value,
+    triggerLabel = _ref4.triggerLabel,
+    onChange = _ref4.onChange;
   return /*#__PURE__*/React.createElement(StyledControl, null, /*#__PURE__*/React.createElement(Select, {
     type: "single",
     disableSearch: true,
@@ -207,11 +257,11 @@ export const colorName = hex => {
 /* 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;
+export const ColorPickerField = _ref5 => {
+  let value = _ref5.value,
+    disabled = _ref5.disabled,
+    includeTransparent = _ref5.includeTransparent,
+    onSelect = _ref5.onSelect;
   const options = includeTransparent ? [TRANSPARENT_OPTION, ...COLOR_OPTIONS] : COLOR_OPTIONS;
   const isTransparent = !value || sameColor(value, "transparent");
   return /*#__PURE__*/React.createElement(StyledControl, {
@@ -238,26 +288,28 @@ export const ColorPickerField = _ref4 => {
     }), colorName(value)))
   }));
 };
-export const RightInspector = _ref5 => {
+export const RightInspector = _ref6 => {
   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;
+  let selectedId = _ref6.selectedId,
+    positions = _ref6.positions,
+    setPositions = _ref6.setPositions,
+    sizes = _ref6.sizes,
+    setSizes = _ref6.setSizes,
+    rotations = _ref6.rotations,
+    setRotations = _ref6.setRotations,
+    shapes = _ref6.shapes,
+    setShapes = _ref6.setShapes,
+    stickyStyle = _ref6.stickyStyle,
+    setStickyStyle = _ref6.setStickyStyle,
+    links = _ref6.links,
+    setLinks = _ref6.setLinks,
+    files = _ref6.files,
+    setFiles = _ref6.setFiles,
+    createdShapes = _ref6.createdShapes,
+    projectElements = _ref6.projectElements,
+    setProjectElements = _ref6.setProjectElements,
+    locks = _ref6.locks,
+    setLocks = _ref6.setLocks;
   const _useState = useState(OUTLINE_WIDTH),
     width = _useState[0],
     setWidth = _useState[1];
@@ -303,6 +355,7 @@ export const RightInspector = _ref5 => {
   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 projectDef = selectedId ? projectElements.find(entry => entry.id === selectedId) : undefined;
   const shell = content => /*#__PURE__*/React.createElement(StyledInspectorSidebar, {
     style: {
       width
@@ -336,11 +389,19 @@ export const RightInspector = _ref5 => {
 
   /* The Locked checkbox — shown for every element kind, toggling a design lock
      flag keyed by element id. */
-  const renderLocked = id => {
+  /* `forced` is the limited-access case: the element is locked FOR THIS VIEWER
+     and the checkbox is the honest place to say so — ticked, and disabled so it
+     reads as a statement about the element rather than a switch that was left
+     on. */
+  const renderLocked = function (id, forced) {
     var _locks$id;
+    if (forced === void 0) {
+      forced = false;
+    }
     return /*#__PURE__*/React.createElement(StyledCheckboxRow, null, /*#__PURE__*/React.createElement(Checkbox, {
       id: "wb-lock-" + id,
-      checked: (_locks$id = locks[id]) != null ? _locks$id : false,
+      checked: forced || ((_locks$id = locks[id]) != null ? _locks$id : false),
+      disabled: forced,
       onChange: () => setLocks(current => {
         var _current$id;
         return _extends({}, current, {
@@ -354,11 +415,17 @@ export const RightInspector = _ref5 => {
     }, "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) => {
+  /* Geometry for a card (link / file / project / task): 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.
+     `readOnly` keeps the same three values in the same three places and swaps
+     the inputs for read-only fields — a limited card's geometry is information,
+     not a control. */
+  const renderCardGeometry = function (id, cardWidth, onWidth, readOnly) {
     var _positions$id;
+    if (readOnly === void 0) {
+      readOnly = false;
+    }
     const cardPosition = (_positions$id = positions[id]) != null ? _positions$id : {
       x: 0,
       y: 0
@@ -366,7 +433,10 @@ export const RightInspector = _ref5 => {
     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, {
+    }, "Geometry"), /*#__PURE__*/React.createElement(StyledFieldGrid, null, readOnly ? /*#__PURE__*/React.createElement(ReadOnlyField, {
+      label: "X",
+      value: cardPosition.x + " px"
+    }) : /*#__PURE__*/React.createElement(NumberField, {
       label: "X",
       unit: "px",
       value: cardPosition.x,
@@ -381,7 +451,10 @@ export const RightInspector = _ref5 => {
           })
         });
       })
-    }), /*#__PURE__*/React.createElement(NumberField, {
+    }), readOnly ? /*#__PURE__*/React.createElement(ReadOnlyField, {
+      label: "Y",
+      value: cardPosition.y + " px"
+    }) : /*#__PURE__*/React.createElement(NumberField, {
       label: "Y",
       unit: "px",
       value: cardPosition.y,
@@ -396,7 +469,10 @@ export const RightInspector = _ref5 => {
           })
         });
       })
-    })), /*#__PURE__*/React.createElement(StyledFieldGrid, null, /*#__PURE__*/React.createElement(NumberField, {
+    })), /*#__PURE__*/React.createElement(StyledFieldGrid, null, readOnly ? /*#__PURE__*/React.createElement(ReadOnlyField, {
+      label: "Width",
+      value: cardWidth + " px"
+    }) : /*#__PURE__*/React.createElement(NumberField, {
       label: "Width",
       unit: "px",
       value: cardWidth,
@@ -408,39 +484,65 @@ export const RightInspector = _ref5 => {
   };
 
   /* 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
+     groups inside differ. `renamable` false swaps the live EditableText for
+     read-only text, for elements whose name is not the board's to change. */
+  const renderInspectorBody = function (icon, headerName, id, groups, renamable) {
+    if (renamable === void 0) {
+      renamable = true;
     }
-  }))), /*#__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));
+    return /*#__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"
+    }, renamable ? /*#__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(Header3, {
+      className: "inspector-name-static",
+      title: headerName
+    }, headerName))), /*#__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) {
+  if (!def && !linkDef && !fileDef && !projectDef) {
     return shell(/*#__PURE__*/React.createElement(StyledInspectorEmpty, null, /*#__PURE__*/React.createElement(Body2, null, "Select an element to see its properties.")));
   }
 
+  /* Project / task card — the most constrained element here. Its look is not
+     the board's to change (no Fill, Stroke or Text), and its title belongs to
+     the record it shows, so the header is read-only. What is left is what the
+     board really does own: where the card sits, how wide it is, and whether it
+     is locked. */
+  if (projectDef) {
+    const limited = projectDef.limited === true;
+    const cardTraits = limited ? LIMITED_ELEMENT_TRAITS : PROJECT_ELEMENT_TRAITS;
+    return shell(renderInspectorBody(
+    /* A limited card gets a NEUTRAL icon. The task and project glyphs would
+       each say which kind of record is behind the card, and the kind is
+       part of what the viewer is not entitled to. */
+    limited ? /*#__PURE__*/React.createElement(LockIcon, null) : projectDef.kind === "project" ? /*#__PURE__*/React.createElement(ProjectIcon, null) : /*#__PURE__*/React.createElement(TaskIcon, null), projectElementTitle(projectDef), projectDef.id, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPropGroup, null, renderLocked(projectDef.id, cardTraits.readOnly)), cardTraits.geometry ? renderCardGeometry(projectDef.id, projectDef.width, width => setProjectElements(current => current.map(entry => entry.id === projectDef.id ? _extends({}, entry, {
+      width
+    }) : entry)), cardTraits.readOnly) : null), cardTraits.renamable));
+  }
+
   /* Link card — its URL plus the shared Locked flag. */
   if (linkDef) {
     var _names$linkDef$id, _linkDef$url;