@hsu-react/ui 0.0.1

package/lib/components/Modal/index.module.less

@@ -0,0 +1,90 @@
+.Modal {
+  > div {
+    width: 100%;
+    height: 100%;
+  }
+
+  &.full {
+    width: 100% !important;
+    max-width: 100% !important;
+    height: 100%;
+
+    .content {
+      max-height: 100%;
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    height: 100%;
+    max-height: 90vh;
+    padding: 0px 0px 15px;
+  }
+
+  .ant-modal-close {
+    top: 15px;
+    inset-inline-end: 10px;
+  }
+
+  .header {
+    padding: 15px 45px 0px 15px;
+    margin-bottom: 15px;
+
+    user-select: none;
+
+    border: none;
+
+    * {
+      user-select: none;
+    }
+
+    &.moveable {
+      &:hover {
+        cursor: move;
+      }
+    }
+
+    .ant-modal-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      width: 100%;
+      height: 32px;
+
+      font-size: 20px;
+
+      .titleButtonGroup {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        column-gap: 10px;
+      }
+    }
+  }
+
+  .body {
+    flex: 1;
+
+    min-height: 0px;
+    padding: 0px 15px;
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    padding: 0px 15px;
+    margin-top: 15px;
+
+    border: none;
+
+    &.noFooter {
+      display: none;
+    }
+  }
+}

package/lib/components/Operate/_hooks/useOperateEllipsis.d.ts

@@ -0,0 +1,10 @@
+import { OperateProps } from "../index";
+/**
+ * 计算操作按钮是否超出显示范围
+ * @param menu - 菜单项数组
+ * @param maxVisible - 最大可见数量
+ * @param enableEllipsis - 是否启用省略
+ * @returns 是否超出
+ */
+declare const useOperateEllipsis: (menu: OperateProps[], maxVisible?: number, enableEllipsis?: boolean) => boolean;
+export default useOperateEllipsis;

package/lib/components/Operate/_hooks/useOperateEllipsis.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+/**
+ * 计算操作按钮是否超出显示范围
+ * @param menu - 菜单项数组
+ * @param maxVisible - 最大可见数量
+ * @param enableEllipsis - 是否启用省略
+ * @returns 是否超出
+ */
+const useOperateEllipsis = (menu, maxVisible, enableEllipsis = true) => {
+  return (0, _react.useMemo)(() => {
+    if (!enableEllipsis || maxVisible === undefined) {
+      return false;
+    }
+    return menu.length > maxVisible;
+  }, [menu.length, maxVisible, enableEllipsis]);
+};
+var _default = exports.default = useOperateEllipsis;

package/lib/components/Operate/index.d.ts

@@ -0,0 +1,21 @@
+import { ButtonProps } from "../Button";
+import { PopconfirmProps } from "antd";
+import React, { ReactNode } from "react";
+export interface OperateProps extends Omit<ButtonProps, "children" | "title" | "onClick" | "hasPermi"> {
+    title?: ReactNode;
+    menu?: OperateProps[];
+    onClick?: () => void;
+    onConfirm?: () => void;
+    icon?: ReactNode | false;
+    delete?: boolean;
+    popconfirm?: Omit<PopconfirmProps, "title"> & {
+        title?: ReactNode;
+    };
+    hidden?: boolean;
+    hasPermi?: string[];
+    maxVisible?: number;
+    enableEllipsis?: boolean;
+    moreIcon?: ReactNode | false;
+}
+declare const Operate: React.FC<OperateProps>;
+export default Operate;

package/lib/components/Operate/index.js

@@ -0,0 +1,254 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Button = _interopRequireDefault(require("../Button"));
+var _icons = require("@ant-design/icons");
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _usePermissions = _interopRequireDefault(require("../../hooks/usePermissions"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _useOperateEllipsis = _interopRequireDefault(require("./_hooks/useOperateEllipsis"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _more = _interopRequireDefault(require("./more.png"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * 渲染图标
+ * @param icon - 图标配置
+ * @param defaultIcon - 默认图标
+ * @returns 渲染的图标元素
+ */
+const renderIcon = (icon, defaultIcon) => {
+  if (icon === false) return null;
+  if (icon) {
+    return typeof icon === "string" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      icon: icon
+    }) : icon;
+  }
+  return defaultIcon;
+};
+
+/**
+ * 阻止事件冒泡的处理器
+ */
+const stopPropagation = e => {
+  e?.stopPropagation();
+};
+const Operate = props => {
+  const {
+    title,
+    className,
+    menu = [],
+    icon,
+    delete: isDelete,
+    popconfirm,
+    hidden,
+    onClick,
+    onConfirm,
+    hasPermi,
+    maxVisible = 3,
+    enableEllipsis = true,
+    moreIcon,
+    ...config
+  } = props;
+  const {
+    checkPermission
+  } = (0, _usePermissions.default)();
+
+  // 过滤菜单项（根据权限和隐藏状态）
+  const filteredMenu = (0, _react.useMemo)(() => {
+    return menu.filter(item => !item.hidden && checkPermission(item.hasPermi));
+  }, [menu, checkPermission]);
+
+  // 计算是否超出
+  const isOverflow = (0, _useOperateEllipsis.default)(filteredMenu, maxVisible, enableEllipsis);
+
+  // 计算可见的菜单项和隐藏的菜单项
+  const {
+    visibleItems,
+    hiddenItems
+  } = (0, _react.useMemo)(() => {
+    if (!isOverflow || maxVisible === undefined) {
+      return {
+        visibleItems: filteredMenu,
+        hiddenItems: []
+      };
+    }
+    return {
+      visibleItems: filteredMenu.slice(0, maxVisible),
+      hiddenItems: filteredMenu.slice(maxVisible)
+    };
+  }, [filteredMenu, isOverflow, maxVisible]);
+
+  // 处理确认事件
+  const handleConfirm = (0, _react.useCallback)(e => {
+    stopPropagation(e);
+    onConfirm?.() ?? onClick?.();
+  }, [onConfirm, onClick]);
+
+  // 处理菜单项确认事件
+  const handleMenuItemConfirm = (0, _react.useCallback)(item => e => {
+    stopPropagation(e);
+    item.onConfirm?.() ?? item.onClick?.();
+  }, []);
+  if (hidden) return null;
+
+  // 渲染按钮的通用配置
+  const buttonClassName = `${_indexModule.default.Operate} ${className ?? ""}`.trim();
+
+  // 准备传递给 Button 的 props（排除 hasPermi，因为 Button 不支持 false 类型）
+  const buttonProps = {
+    ...config,
+    ...(hasPermi?.length ? {
+      hasPermi
+    } : {})
+  };
+
+  // 如果有菜单，渲染多个操作按钮
+  if (menu.length > 0) {
+    // 生成下拉菜单项（用于"更多"按钮）
+    const menuItems = hiddenItems?.map(item => {
+      const hasConfirm = !!item.onConfirm;
+      const defaultIcon = item.delete ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FormOutlined, {});
+      const menuButtonContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        type: "text",
+        danger: item.delete,
+        icon: renderIcon(item.icon, defaultIcon),
+        className: `${_indexModule.default.menuItem} ${item.className ?? ""}`.trim(),
+        onClick: e => {
+          stopPropagation(e);
+          if (!hasConfirm) {
+            item.onClick?.();
+          }
+        },
+        ...(item.hasPermi?.length ? {
+          hasPermi: item.hasPermi
+        } : {}),
+        ...Object.fromEntries(Object.entries(item).filter(([key]) => !["title", "icon", "delete", "className", "hasPermi", "menu", "onClick", "onConfirm", "popconfirm", "hidden", "maxVisible", "enableEllipsis", "moreIcon"].includes(key))),
+        children: item.title
+      });
+      return {
+        key: String(item.title),
+        label: hasConfirm ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popconfirm, {
+          placement: "left",
+          title: item.popconfirm?.title ?? `确认${item.title}?`,
+          okText: "\u786E\u8BA4",
+          cancelText: "\u53D6\u6D88",
+          onConfirm: handleMenuItemConfirm(item),
+          onCancel: stopPropagation,
+          ...item.popconfirm,
+          children: menuButtonContent
+        }) : menuButtonContent
+      };
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _indexModule.default.container,
+      children: [visibleItems?.map((item, index) => {
+        const hasConfirm = !!item.onConfirm;
+        const {
+          title: itemTitle,
+          icon: itemIcon,
+          delete: itemDelete,
+          className: itemClassName,
+          hasPermi: itemHasPermi
+        } = item;
+        // 透传剩余 Button 属性时排除事件/配置键，避免 onConfirm 等泄漏到 DOM（React 警告）
+        const itemButtonProps = Object.fromEntries(Object.entries(item).filter(([key]) => !["title", "icon", "delete", "className", "hasPermi", "menu", "onClick", "onConfirm", "popconfirm", "hidden", "maxVisible", "enableEllipsis", "moreIcon"].includes(key)));
+        const defaultIcon = itemDelete ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FormOutlined, {});
+        const buttonContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          icon: renderIcon(itemIcon, defaultIcon),
+          type: "link",
+          danger: itemDelete,
+          className: `${_indexModule.default.Operate} ${itemClassName ?? ""}`.trim(),
+          onClick: e => {
+            stopPropagation(e);
+            if (!hasConfirm) {
+              item.onClick?.();
+            }
+          },
+          ...(itemHasPermi?.length ? {
+            hasPermi: itemHasPermi
+          } : {}),
+          ...itemButtonProps,
+          children: itemTitle
+        }, index);
+        if (hasConfirm) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popconfirm, {
+            placement: "bottom",
+            title: item.popconfirm?.title ?? `确认${item.title}?`,
+            okText: "\u786E\u8BA4",
+            cancelText: "\u53D6\u6D88",
+            onConfirm: handleMenuItemConfirm(item),
+            onCancel: stopPropagation,
+            ...item.popconfirm,
+            children: buttonContent
+          }, index);
+        }
+        return buttonContent;
+      }), isOverflow && hiddenItems.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Dropdown, {
+        overlayClassName: _indexModule.default.menu,
+        placement: "bottom",
+        menu: {
+          items: menuItems
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          icon: renderIcon(moreIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: _more.default,
+            alt: "more",
+            className: _indexModule.default.moreImg
+          })),
+          iconPosition: "end",
+          type: "link",
+          className: (0, _classnames.default)(buttonClassName, _indexModule.default.moreButton),
+          onClick: stopPropagation,
+          ...buttonProps,
+          children: title
+        })
+      })]
+    });
+  }
+
+  // 单个操作按钮
+  const hasConfirm = !!onConfirm;
+  const defaultIcon = isDelete ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FormOutlined, {});
+  const buttonContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+    icon: renderIcon(icon, defaultIcon),
+    type: "link",
+    danger: isDelete,
+    className: buttonClassName,
+    onClick: e => {
+      stopPropagation(e);
+      if (!hasConfirm) {
+        onClick?.();
+      }
+    },
+    ...buttonProps,
+    children: title
+  });
+  if (hasConfirm) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _indexModule.default.container,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popconfirm, {
+        placement: "bottom",
+        title: popconfirm?.title ?? `确认${title}?`,
+        okText: "\u786E\u8BA4",
+        cancelText: "\u53D6\u6D88",
+        onConfirm: handleConfirm,
+        onCancel: stopPropagation,
+        ...popconfirm,
+        children: buttonContent
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: _indexModule.default.container,
+    children: buttonContent
+  });
+};
+var _default = exports.default = Operate;

package/lib/components/Operate/index.module.less

@@ -0,0 +1,60 @@
+.container {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.Operate {
+  height: max-content;
+  padding: 0px 4px;
+}
+
+.menu {
+  > ul > li {
+    padding: 4px 0px !important;
+
+    border-bottom: 1px solid var(--cf-border);
+
+    &:first-child {
+      padding-top: 0px !important;
+    }
+
+    &:last-child {
+      padding-bottom: 0px !important;
+
+      border-bottom: none;
+    }
+
+    &:hover {
+      background-color: transparent !important;
+    }
+  }
+
+  .menuItem {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    width: 100%;
+    height: 100%;
+    padding: 4px 12px;
+  }
+}
+
+.moreButton {
+  &.ant-btn-icon-only {
+    width: max-content;
+
+    padding-inline: 4px;
+  }
+
+  .ant-btn-icon {
+    display: inline-flex;
+    align-items: center;
+
+    .moreImg {
+      display: inline-flex;
+      height: 18px;
+    }
+  }
+}

package/lib/components/Panel/DefaultPanel/index.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from "react";
+import { BreadcrumbProps } from "antd";
+import { TreeProps } from "../../Tree";
+export interface DefaultPanelProps {
+    children?: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    wrapperClassName?: string;
+    treeProps?: TreeProps;
+    baseTreeBreadcrumb?: BreadcrumbProps["items"];
+    showTreeBreadcrumb?: boolean;
+}
+declare const DefaultPanel: React.FC<DefaultPanelProps>;
+export default DefaultPanel;

package/lib/components/Panel/DefaultPanel/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _mobxReactLite = require("mobx-react-lite");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Tree = _interopRequireDefault(require("../../Tree"));
+var _lodash = require("lodash");
+var _cssSupports = require("../../../utils/cssSupports");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const DefaultPanel = (0, _mobxReactLite.observer)(props => {
+  const {
+    className,
+    contentClassName,
+    wrapperClassName,
+    treeProps = {},
+    baseTreeBreadcrumb,
+    showTreeBreadcrumb = true,
+    children
+  } = props;
+  const {
+    className: treeClassName,
+    ...treeConfig
+  } = treeProps;
+  const hasTree = !!Object.keys(treeConfig).length;
+  const legacyHasSelector = (0, _cssSupports.isLegacyHasSelectorBrowser)();
+  const [treeBreadcrumb, setTreeBreadcrumb] = (0, _react.useState)(baseTreeBreadcrumb ? (0, _lodash.cloneDeep)(baseTreeBreadcrumb) : []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)(_indexModule.default.DefaultPanelWrapper, wrapperClassName, {
+      [_indexModule.default.legacyHasTree]: legacyHasSelector && hasTree
+    }),
+    children: [hasTree && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tree.default, {
+      ...treeConfig,
+      className: (0, _classnames.default)(treeClassName, _indexModule.default.DefaultPanelTree),
+      onSelectPath: (path, selectedKeys) => {
+        treeConfig.onSelectPath?.(path, selectedKeys);
+        setTreeBreadcrumb([...(baseTreeBreadcrumb || []), ...(path?.map(item => {
+          return {
+            title: item.title
+          };
+        }) || [])]);
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)(_indexModule.default.DefaultPanel, className),
+      children: [hasTree && showTreeBreadcrumb && !!treeBreadcrumb?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Breadcrumb, {
+        items: treeBreadcrumb
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames.default)(_indexModule.default.content, contentClassName),
+        children: children
+      })]
+    })]
+  });
+});
+var _default = exports.default = DefaultPanel;

package/lib/components/Panel/DefaultPanel/index.module.less

@@ -0,0 +1,51 @@
+.DefaultPanelWrapper {
+  display: flex;
+  column-gap: 10px;
+
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+
+  overflow: hidden;
+
+  &:has(.DefaultPanelTree) {
+    .DefaultPanel {
+      flex: 1;
+      min-width: 0px;
+    }
+  }
+
+  &.legacyHasTree {
+    .DefaultPanel {
+      flex: 1;
+      min-width: 0px;
+    }
+  }
+}
+
+.DefaultPanelTree {
+  width: 250px;
+  height: 100%;
+  padding: 10px;
+}
+
+.DefaultPanel {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+
+  width: 100%;
+  height: 100%;
+}
+
+.content {
+  flex: 1;
+  width: 100%;
+  padding: 10px;
+
+  background: var(--cf-surface);
+
+  // CF 风格：描边白卡片
+  border-radius: 8px;
+  border: 1px solid var(--cf-border);
+}

package/lib/components/Panel/IframePanel/index.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from "react";
+export interface IframePanelProps extends React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement> {
+    fullBtn?: boolean;
+    children?: ReactNode;
+}
+declare const IframePanel: React.FC<IframePanelProps>;
+export default IframePanel;

package/lib/components/Panel/IframePanel/index.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Icon = _interopRequireDefault(require("../../Icon"));
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const IframePanel = props => {
+  const {
+    fullBtn,
+    children,
+    ...coreProps
+  } = props;
+  const ref = (0, _react.useRef)(null);
+  const [spinning, setSpinning] = (0, _react.useState)(true);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)(_indexModule.default.IframPanel),
+    children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: ref,
+      className: _indexModule.default.content,
+      children: children
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Spin, {
+      spinning: spinning,
+      wrapperClassName: _indexModule.default.spin,
+      size: "large",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
+        ...coreProps,
+        ref: ref,
+        onLoad: () => setSpinning(false)
+      })
+    }), fullBtn && (!spinning || children) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _indexModule.default.full,
+      onClick: () => {
+        if (ref.current) {
+          const div = ref.current;
+          div.requestFullscreen?.();
+        }
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        icon: "lets-icons:full-alt"
+      })
+    })]
+  });
+};
+var _default = exports.default = IframePanel;