fcr-ui-scene 3.7.2 → 3.7.3

package/lib/modules/components/toolbar/components/group-tool/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnnotationGroupTool = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _item = require("../item");
+var _panel = require("../panel");
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationGroupTool = exports.AnnotationGroupTool = function AnnotationGroupTool(props) {
+  var size = props.size,
+    placement = props.placement,
+    children = props.children;
+  var t = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var handleClick = function handleClick() {
+    setVisible(!visible);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+    size: size,
+    iconType: _type.FcrIconType.FCR_SUBTRACT,
+    title: t('fmt_screenshare_whiteboard_button_additionaltools'),
+    hideTitle: true,
+    placement: placement,
+    visible: visible,
+    onClick: handleClick,
+    onVisibleChange: setVisible,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.AnnotationToolPanel, {
+      size: "small",
+      direction: "vertical",
+      header: children
+    })
+  });
+};

package/lib/modules/components/toolbar/components/icons/fold-icon.d.ts

@@ -0,0 +1,2 @@
+declare const FoldIcon: () => import("react/jsx-runtime").JSX.Element;
+export default FoldIcon;

package/lib/modules/components/toolbar/components/icons/fold-icon.js

@@ -0,0 +1,41 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+var FoldIcon = function FoldIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+    width: "16",
+    height: "72",
+    viewBox: "0 0 16 72",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+      clipPath: "url(#clip0_9209_166297)",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        d: "M9.49744 11.6558C12.3854 14.6399 14 18.63 14 22.7827L14 49.2173C14 53.37 12.3854 57.3601 9.49744 60.3442L7 62.9248C4.68094 64.9898 2.69913 67.4048 1.12644 70.0823L-2.86197e-07 72L2.86102e-06 -6.11959e-07L1.12644 1.91773C2.69914 4.5952 4.68094 7.0102 7 9.07519L9.49744 11.6558Z",
+        fill: "#2F2F2F",
+        fillOpacity: "0.95"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        d: "M6.56598 35.0095L8.13153 32.2698C8.6403 31.3795 10 31.7401 10 32.7656L10 39.2344C10 40.2599 8.64053 40.6209 8.13176 39.7306L6.56702 36.9923C6.21566 36.3774 6.21463 35.6244 6.56598 35.0095Z",
+        fill: "#4262FF"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
+        id: "clip0_9209_166297",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+          width: "72",
+          height: "16",
+          fill: "white",
+          transform: "translate(16) rotate(90)"
+        })
+      })
+    })]
+  });
+};
+var _default = exports["default"] = FoldIcon;

package/lib/modules/components/toolbar/components/icons/move-icon.d.ts

@@ -0,0 +1 @@
+export default function MoveIcon(): import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/toolbar/components/icons/move-icon.js

@@ -0,0 +1,66 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = MoveIcon;
+var _jsxRuntime = require("react/jsx-runtime");
+function MoveIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+    width: "40",
+    height: "16",
+    viewBox: "0 0 40 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: "7.5",
+      cy: "4.5",
+      r: "1.5",
+      fill: "black",
+      fillOpacity: "0.1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: "7.5",
+      cy: "10.5",
+      r: "1.5",
+      fill: "black",
+      fillOpacity: "0.1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: "15.5",
+      cy: "4.5",
+      r: "1.5",
+      fill: "black",
+      fillOpacity: "0.1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: "15.5",
+      cy: "10.5",
+      r: "1.5",
+      fill: "black",
+      fillOpacity: "0.1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: "23.5",
+      cy: "4.5",
+      r: "1.5",
+      fill: "black",
+      fillOpacity: "0.1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: "23.5",
+      cy: "10.5",
+      r: "1.5",
+      fill: "black",
+      fillOpacity: "0.1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: "31.5",
+      cy: "4.5",
+      r: "1.5",
+      fill: "black",
+      fillOpacity: "0.1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: "31.5",
+      cy: "10.5",
+      r: "1.5",
+      fill: "black",
+      fillOpacity: "0.1"
+    })]
+  });
+}

package/lib/modules/components/toolbar/components/item/index.d.ts

@@ -0,0 +1,25 @@
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
+import './style.css';
+export declare const toolBarItemClassName = "annotation-toolbar-item";
+export declare const AnnotationToolItem: (props: {
+    iconType: FcrIconType;
+    title?: string;
+    size?: number;
+    active?: boolean;
+    content?: React.ReactNode;
+    color?: string;
+    disabled?: boolean;
+    lineColor?: string;
+    onClick?: (value: string) => void;
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    level?: number;
+    selected?: boolean;
+    hideTitle?: boolean;
+    placement?: ToolTipProps["placement"];
+    contextMenu?: React.ReactNode;
+    showArrow?: boolean;
+    onContextMenuClick?: (color: string) => void;
+    commonColors?: string[];
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/toolbar/components/item/index.js

@@ -0,0 +1,165 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toolBarItemClassName = exports.AnnotationToolItem = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _react = require("react");
+require("./style.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var toolBarItemClassName = exports.toolBarItemClassName = 'annotation-toolbar-item';
+var AnnotationToolItem = exports.AnnotationToolItem = function AnnotationToolItem(props) {
+  var _props$iconType = props.iconType,
+    iconType = _props$iconType === void 0 ? _type.FcrIconType.FCR_WHITEBOARD_TEXT : _props$iconType,
+    title = props.title,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 32 : _props$size,
+    _props$active = props.active,
+    active = _props$active === void 0 ? false : _props$active,
+    content = props.content,
+    color = props.color,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    lineColor = props.lineColor,
+    onClick = props.onClick,
+    visible = props.visible,
+    onVisibleChange = props.onVisibleChange,
+    level = props.level,
+    selected = props.selected,
+    hideTitle = props.hideTitle,
+    placement = props.placement,
+    contextMenu = props.contextMenu,
+    _props$showArrow = props.showArrow,
+    showArrow = _props$showArrow === void 0 ? false : _props$showArrow,
+    onContextMenuClick = props.onContextMenuClick,
+    commonColors = props.commonColors;
+  var _useState = (0, _react.useState)(visible),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visibled = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    hover = _useState4[0],
+    setHover = _useState4[1];
+  var defaultColor = "var(".concat(active || visibled ? "--fcr_ui_scene_ramp_brand6" : "--fcr_ui_scene_icontext1", ")");
+  var disabledColor = "".concat(disabled ? "var(--fcr_ui_scene_icontext3)" : defaultColor);
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    contextMenuVisible = _useState6[0],
+    setContextMenuVisible = _useState6[1];
+  var handleClick = function handleClick() {
+    if (disabled) return;
+    onClick === null || onClick === void 0 || onClick(color || '');
+  };
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(visible);
+    setVisible(visible);
+  };
+  var handleContextMenu = function handleContextMenu(e) {
+    e.preventDefault();
+    setContextMenuVisible(true);
+  };
+  (0, _react.useEffect)(function () {
+    setVisible(!!visible);
+  }, [visible]);
+  var hasSelected = typeof selected === 'boolean';
+  var handleMouseEnter = function handleMouseEnter() {
+    hasSelected && setHover(!hover);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    setContextMenuVisible(false);
+  };
+  var colorIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+    onClick: handleClick,
+    type: iconType,
+    size: size,
+    fill: "none",
+    colors: {
+      iconPrimary: color || disabledColor,
+      iconSecondary: hover && !commonColors ? color : lineColor || defaultColor,
+      level: level,
+      selected: selected
+    }
+  });
+  var iconElement = contextMenu ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+    visible: contextMenuVisible,
+    overlayOffset: 0,
+    overlayInnerStyle: {
+      width: 'fit-content'
+    },
+    placement: "bottom",
+    showArrow: true,
+    trigger: "contextMenu",
+    size: "small",
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "annotation-toolbar-item-context-menu",
+      onMouseLeave: handleMouseLeave,
+      onClick: function onClick() {
+        return onContextMenuClick === null || onContextMenuClick === void 0 ? void 0 : onContextMenuClick(color || '');
+      },
+      children: contextMenu
+    }),
+    children: colorIcon
+  }) : colorIcon;
+  var element = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "".concat(toolBarItemClassName, " ").concat((active || visibled) && !hasSelected ? 'is-active' : '', " ").concat(disabled ? 'is-disabled' : ''),
+    onMouseLeave: handleMouseLeave,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "annotation-toolbar-item-icon",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseEnter,
+      onContextMenu: contextMenu ? handleContextMenu : undefined,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: commonColors ? "annotation-toolbar-item-icon-wrapper" : '',
+        children: [!(commonColors !== null && commonColors !== void 0 && commonColors.includes(color || '')) && iconElement, content && !commonColors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_WHITEBOARD_LOWERRIGHTARROW,
+          size: 4,
+          className: "fcr-board-toolbar-expansion-icon"
+        })]
+      })
+    }), title && !hideTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "annotation-toolbar-item-title",
+      children: title
+    })]
+  });
+  return title ? content ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      showArrow: false,
+      content: title,
+      placement: placement,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+        visible: visibled,
+        overlayOffset: 10,
+        overlayInnerStyle: {
+          width: 'fit-content'
+        },
+        placement: placement,
+        getTooltipContainer: function getTooltipContainer(e) {
+          return e;
+        },
+        trigger: "click",
+        showArrow: showArrow,
+        content: content,
+        onVisibleChange: handleVisibleChange,
+        children: element
+      })
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    showArrow: showArrow,
+    visible: visibled,
+    content: title,
+    onVisibleChange: handleVisibleChange,
+    placement: placement,
+    children: element
+  }) : element;
+};

package/lib/modules/components/toolbar/components/item/style.css

@@ -0,0 +1,94 @@
+.annotation-toolbar-item {
+  min-width: 32px;
+  max-width: 64px;
+  min-height: 32px;
+  max-height: 52px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--fcr_ui_scene_icontext1);
+  cursor: pointer;
+  position: relative;
+}
+
+.annotation-toolbar-item .fcr-popover .fcr-tooltip-inner {
+  overflow: inherit !important;
+}
+
+.annotation-toolbar-item-icon {
+  max-width: 44px;
+  min-width: 32px;
+  height: 32px;
+  border-radius: var(--fcr_cornerradius_xs);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.annotation-toolbar-item-title {
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 300;
+}
+
+/* .annotation-toolbar-item:hover > .annotation-toolbar-item-icon {
+  background: var(--fcr_ui_scene_ramp_brand1);
+}
+
+.annotation-toolbar-item.hover > .annotation-toolbar-item-title {
+  color: var(--fcr_ui_scene_ramp_brand6);
+} */
+
+.annotation-toolbar-item.is-active > .annotation-toolbar-item-icon {
+  background: var(--fcr_ui_scene_ramp_brand0);
+}
+
+.annotation-toolbar-item.is-active > .annotation-toolbar-item-title {
+  color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.annotation-toolbar-item.is-disabled {
+  cursor: not-allowed;
+}
+
+.annotation-toolbar-item.is-disabled > .annotation-toolbar-item-title {
+  color: var(--fcr_ui_scene_icontext3);
+}
+
+.annotation-toolbar-item-context-menu {
+  color: var(--fcr_ui_scene_icontext1);
+  line-height: 100%;
+}
+.annotation-toolbar-item-icon-wrapper {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: conic-gradient(
+    from 180deg at 50% 50%,
+    #ff7171 0deg,
+    #ffa471 30deg,
+    #ffe37f 63.75deg,
+    #e3ff75 91.88deg,
+    #a9ff75 125.63deg,
+    #79ff8f 163.12deg,
+    #72ffe6 189.38deg,
+    #70cff8 210deg,
+    #6880ff 232.5deg,
+    #7856ff 260.62deg,
+    #dd56ff 277.5deg,
+    #ff56da 303.75deg,
+    #ff3797 327.96deg,
+    #ff6464 340.25deg,
+    #ff5656 359.93deg,
+    #ff7171 360deg
+  );
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.annotation-toolbar-item-icon-wrapper > svg {
+  position: absolute;
+  width: 28px;
+  height: 28px;
+}

package/lib/modules/components/toolbar/components/multiple-color-tool/index.d.ts

@@ -0,0 +1,12 @@
+import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
+export declare const MultipleColorTool: (props: {
+    coverCount?: number;
+    commonColors: string[];
+    currentColor: string;
+    colors: string[];
+    setStrokeColor: (color: string) => void;
+    placement: ToolTipProps["placement"];
+    themeColors: string[];
+    size?: number;
+    onContextMenuClick?: (color: string[]) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/toolbar/components/multiple-color-tool/index.js

@@ -0,0 +1,75 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultipleColorTool = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _item = require("../item");
+var _colorTool = require("../color-tool");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var MultipleColorTool = exports.MultipleColorTool = function MultipleColorTool(props) {
+  var transI18n = (0, _i18n.useI18n)();
+  var _props$coverCount = props.coverCount,
+    coverCount = _props$coverCount === void 0 ? 0 : _props$coverCount,
+    commonColors = props.commonColors,
+    currentColor = props.currentColor,
+    setStrokeColor = props.setStrokeColor,
+    placement = props.placement,
+    themeColors = props.themeColors,
+    size = props.size,
+    onContextMenuClick = props.onContextMenuClick;
+  var handleContextMenuClick = function handleContextMenuClick(color) {
+    var _ref = commonColors || [],
+      _ref2 = (0, _slicedToArray2["default"])(_ref, 1),
+      firstColor = _ref2[0];
+    onContextMenuClick === null || onContextMenuClick === void 0 || onContextMenuClick(firstColor ? [color, firstColor] : [color]);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [commonColors === null || commonColors === void 0 ? void 0 : commonColors.filter(function (_, index) {
+      return commonColors.length - 1 - index > coverCount;
+    }).map(function (color) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        size: currentColor === color ? 26 : size,
+        hideTitle: true,
+        iconType: _type.FcrIconType.FCR_COLOR,
+        color: color,
+        lineColor: currentColor === color ? color : 'transparent',
+        onClick: function onClick() {
+          return setStrokeColor(color);
+        }
+      });
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorTool.AnnotationColorTool, {
+      direction: "vertical",
+      placement: placement,
+      size: size,
+      currentColor: currentColor,
+      colors: themeColors,
+      commonColors: commonColors,
+      setStrokeColor: setStrokeColor,
+      selected: !(commonColors !== null && commonColors !== void 0 && commonColors.includes(currentColor)),
+      hideTitle: true,
+      contextMenu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+        type: "gray",
+        block: true,
+        size: "XXS",
+        shape: "rounded",
+        children: transI18n('fmt_screenshare_whiteboard_button_setcolor')
+      }),
+      onContextMenuClick: handleContextMenuClick
+    })]
+  });
+};

package/lib/modules/components/toolbar/components/panel/index.d.ts

@@ -0,0 +1,9 @@
+import './style.css';
+export declare const AnnotationToolPanel: (props: {
+    header?: React.ReactNode;
+    content?: React.ReactNode;
+    footer?: React.ReactNode;
+    size?: "small" | "medium";
+    direction?: "horizontal" | "vertical";
+    type?: "color" | "multiple-color" | "graphic" | "pen";
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/toolbar/components/panel/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnnotationToolPanel = void 0;
+require("core-js/modules/es.array.concat.js");
+require("./style.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationToolPanel = exports.AnnotationToolPanel = function AnnotationToolPanel(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-annotation-toolbar-panel ".concat(props.size === 'small' ? 'small' : 'medium', " ").concat(props.direction),
+    style: {
+      flexDirection: props.type === 'color' ? 'column' : undefined
+    },
+    children: [props.header && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-annotation-toolbar-panel-header",
+      children: props.header
+    }), props.content && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-annotation-toolbar-panel-content",
+      children: props.content
+    }), props.footer && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-annotation-toolbar-panel-footer",
+      children: props.footer
+    })]
+  });
+};

package/lib/modules/components/toolbar/components/panel/style.css

@@ -0,0 +1,86 @@
+.fcr-annotation-toolbar-panel {
+  max-width: 300px;
+  padding: 0 6px;
+  height: auto;
+  background: var(fcr_mobile_ui_scene_color_popup_fill2);
+  border-radius: var(--fcr_cornerradius_l);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  --small-width: 148px;
+}
+
+.fcr-annotation-toolbar-panel.small {
+  box-sizing: content-box;
+  border-radius: 8px;
+}
+
+.fcr-annotation-toolbar-panel.medium {
+  padding: 12px;
+}
+
+.fcr-annotation-toolbar-panel.small > div {
+  min-height: 36px;
+  display: flex;
+  gap: 0;
+  box-sizing: content-box;
+}
+
+.fcr-annotation-toolbar-panel.medium > div {
+  min-height: 36px;
+  display: flex;
+  gap: 12px;
+  box-sizing: content-box;
+}
+
+.fcr-annotation-toolbar-panel .annotation-toolbar-item {
+  width: 36px;
+}
+
+.fcr-annotation-toolbar-panel.medium .fcr-annotation-toolbar-panel-footer {
+  border-top: 1px solid var(--fcr_ui_scene_line1);
+  padding-top: 8px;
+  margin-top: 8px;
+}
+
+.fcr-annotation-toolbar-panel.small .fcr-annotation-toolbar-panel-footer {
+  border-top: 1px solid var(--fcr_ui_scene_line1);
+  font-size: 12px;
+  color: var(--fcr_ui_scene_black3);
+  min-height: 24px;
+  text-align: center;
+  line-height: 1.2;
+  border-top: 1px solid var(--fcr_ui_scene_black1);
+  max-width: var(--small-width);
+}
+
+.fcr-annotation-toolbar-panel.vertical {
+  flex-direction: column;
+}
+.fcr-annotation-toolbar-panel.vertical .fcr-annotation-toolbar-panel-header {
+  padding: 6px 0;
+  gap: 6px;
+  flex-direction: column;
+}
+.fcr-annotation-toolbar-panel.vertical .fcr-annotation-toolbar-panel-footer {
+  padding: 6px 0;
+  gap: 6px;
+  flex-direction: column;
+}
+.fcr-annotation-toolbar-panel.horizontal {
+  flex-direction: row;
+}
+.fcr-annotation-toolbar-panel.horizontal .fcr-annotation-toolbar-panel-header {
+  flex-direction: row;
+}
+
+.fcr-annotation-toolbar-panel.horizontal .fcr-annotation-toolbar-panel-footer {
+  flex-direction: row;
+}
+
+.fcr-annotation-toolbar-panel-content {
+  width: var(--small-width);
+  display: flex;
+  flex-wrap: wrap;
+  padding: 8px;
+}

package/lib/modules/components/toolbar/components/pen-tool/index.d.ts

@@ -0,0 +1,13 @@
+import { FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
+export declare const AnnotationPenTool: (props: {
+    size?: number;
+    hideTitle?: boolean;
+    currentStrokeWidth: number;
+    currentColor: string;
+    currentTool: FcrBoardToolType;
+    setStrokeWidth: (width: number) => void;
+    setTool: (tool: FcrBoardToolType) => void;
+    placement: ToolTipProps["placement"];
+    direction?: "horizontal" | "vertical";
+}) => import("react/jsx-runtime").JSX.Element;