ssovee-os-web-ui 0.1.76 → 0.1.78

package/dist/index.cjs

@@ -1,8 +1,15 @@
 'use strict';
 
-var React22 = require('react');
+var React23 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@phosphor-icons/react');
+require('tinymce/tinymce');
+require('tinymce/icons/default/icons');
+require('tinymce/themes/silver');
+require('tinymce/models/dom/model');
+require('tinymce/skins/ui/oxide/skin.css');
+require('tinymce/skins/ui/oxide/content.css');
+require('tinymce/skins/content/default/content.css');
 var Editor = require('@monaco-editor/react');
 var uaParserJs = require('ua-parser-js');
 
@@ -26,7 +33,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React22__namespace = /*#__PURE__*/_interopNamespace(React22);
+var React23__namespace = /*#__PURE__*/_interopNamespace(React23);
 var Editor__default = /*#__PURE__*/_interopDefault(Editor);
 
 // src/components/Button.tsx
@@ -35,7 +42,7 @@ var Editor__default = /*#__PURE__*/_interopDefault(Editor);
 function cn(...inputs) {
   return inputs.filter(Boolean).join(" ");
 }
-var Button = React22__namespace.default.forwardRef(
+var Button = React23__namespace.default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -171,7 +178,7 @@ var Typography = ({
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { className: classes, children });
 };
 var Typography_default = Typography;
-var Input = React22__namespace.default.forwardRef(
+var Input = React23__namespace.default.forwardRef(
   ({
     className,
     variant = "default",
@@ -249,7 +256,7 @@ var Input = React22__namespace.default.forwardRef(
 );
 Input.displayName = "Input";
 var Input_default = Input;
-var TextArea = React22__namespace.default.forwardRef(
+var TextArea = React23__namespace.default.forwardRef(
   ({
     className,
     variant = "default",
@@ -306,6 +313,146 @@ var TextArea = React22__namespace.default.forwardRef(
 );
 TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
+var DEFAULT_PLUGINS = [
+  "advlist",
+  "autolink",
+  "lists",
+  "link",
+  "image",
+  "charmap",
+  "preview",
+  "anchor",
+  "searchreplace",
+  "visualblocks",
+  "code",
+  "fullscreen",
+  "insertdatetime",
+  "media",
+  "table",
+  "wordcount"
+];
+var DEFAULT_TOOLBAR = "undo redo | blocks | bold italic underline strikethrough | alignleft aligncenter alignright | bullist numlist outdent indent | link image media | code fullscreen";
+var RichEditor = React23__namespace.default.forwardRef(
+  ({
+    value = "",
+    onChange,
+    label,
+    helperText,
+    error,
+    fullWidth = false,
+    height = "220px",
+    menubar = false,
+    toolbar = DEFAULT_TOOLBAR,
+    className,
+    plugins = DEFAULT_PLUGINS,
+    disabled = false,
+    placeholder,
+    rows,
+    ...props
+  }, ref) => {
+    const editorId = React23.useId().replace(/:/g, "");
+    const textareaRef = React23.useRef(null);
+    const hasTinymce = typeof window !== "undefined" && Boolean(window.tinymce);
+    React23.useEffect(() => {
+      if (typeof window === "undefined" || !textareaRef.current || !window.tinymce) {
+        return;
+      }
+      const tinymceApi = window.tinymce;
+      const existingEditor = tinymceApi.get(editorId);
+      if (existingEditor) {
+        existingEditor.remove();
+      }
+      tinymceApi.init({
+        target: textareaRef.current,
+        selector: void 0,
+        skin: "oxide",
+        content_css: "default",
+        height,
+        menubar,
+        toolbar,
+        plugins,
+        statusbar: false,
+        resize: false,
+        branding: false,
+        promotion: false,
+        placeholder,
+        readonly: disabled,
+        content_style: "body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.6; }",
+        setup: (editor) => {
+          editor.on("init", () => {
+            editor.setContent(value ?? "");
+          });
+          editor.on("input change keyup", () => {
+            onChange?.(editor.getContent());
+          });
+        }
+      });
+      return () => {
+        const activeEditor = tinymceApi.get(editorId);
+        activeEditor?.remove();
+      };
+    }, [disabled, editorId, height, menubar, onChange, placeholder, plugins, toolbar, value]);
+    React23.useEffect(() => {
+      const tinymceApi = window?.tinymce;
+      const activeEditor = tinymceApi?.get(editorId);
+      if (activeEditor && activeEditor.getContent() !== (value ?? "")) {
+        activeEditor.setContent(value ?? "");
+      }
+    }, [editorId, value]);
+    const fallbackTextArea = /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ref: textareaRef,
+        id: editorId,
+        value,
+        onChange: (event) => onChange?.(event.currentTarget.value),
+        disabled,
+        placeholder,
+        rows: rows ?? 7,
+        "aria-label": label ?? props["aria-label"] ?? "Rich text editor",
+        className: cn(
+          "w-full min-h-[200px] rounded-[6px] border border-surface-1 bg-primary px-3 py-2 text-base text-neutral-700 transition-all duration-200 focus:border-brand-color focus:outline-none focus:ring-1 focus:ring-brand-color/50 placeholder:text-neutral-400",
+          error && "border-red-500 focus:border-red-500 focus:ring-red-500/50",
+          disabled && "cursor-not-allowed opacity-60",
+          fullWidth && "w-full"
+        ),
+        ...props
+      }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-1", fullWidth && "w-full", className), children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-neutral-500 dark:text-white", htmlFor: editorId, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "overflow-hidden rounded-[6px] border border-surface-1 bg-white transition-all duration-200",
+            fullWidth && "w-full",
+            error && "border-red-500"
+          ),
+          style: { minHeight: height },
+          children: hasTinymce ? /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              id: editorId,
+              defaultValue: value,
+              "aria-label": label ?? props["aria-label"] ?? "Rich text editor",
+              disabled,
+              style: { display: "none" },
+              ...props
+            }
+          ) : fallbackTextArea
+        }
+      ),
+      (error || helperText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1", children: [
+        error && /* @__PURE__ */ jsxRuntime.jsx(Typography_default, { variant: "p", className: "text-xs text-red-500", children: error }),
+        helperText && !error && /* @__PURE__ */ jsxRuntime.jsx(Typography_default, { variant: "p", className: "text-xs text-neutral-400", children: helperText })
+      ] })
+    ] });
+  }
+);
+RichEditor.displayName = "RichEditor";
+var RichEditor_default = RichEditor;
 var CodeEditor = ({
   value,
   onChange,
@@ -328,7 +475,7 @@ var CodeEditor = ({
   ) });
 };
 var CodeEditor_default = CodeEditor;
-var Select = React22__namespace.default.forwardRef(
+var Select = React23__namespace.default.forwardRef(
   ({
     className,
     options,
@@ -408,7 +555,7 @@ var Select = React22__namespace.default.forwardRef(
 );
 Select.displayName = "Select";
 var Select_default = Select;
-var Checkbox = React22__namespace.default.forwardRef(
+var Checkbox = React23__namespace.default.forwardRef(
   ({
     className,
     variant = "default",
@@ -483,7 +630,7 @@ var Checkbox = React22__namespace.default.forwardRef(
 );
 Checkbox.displayName = "Checkbox";
 var Checkbox_default = Checkbox;
-var Toggle = React22__namespace.default.forwardRef(
+var Toggle = React23__namespace.default.forwardRef(
   ({
     checked,
     onChange,
@@ -589,10 +736,10 @@ var Dropdown = ({
   className,
   trigger
 }) => {
-  const [isOpen, setIsOpen] = React22.useState(false);
-  const dropdownRef = React22.useRef(null);
+  const [isOpen, setIsOpen] = React23.useState(false);
+  const dropdownRef = React23.useRef(null);
   const selectedOption = options.find((option) => option.value === value);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -719,9 +866,9 @@ var ImageWithPlaceholder = ({
   };
   const resolvedSrc = resolveSrc(src);
   const initialSrc = isValidSrc(resolvedSrc) ? resolvedSrc : fallbackSrc;
-  const [imgSrc, setImgSrc] = React22.useState(initialSrc);
-  const [hasError, setHasError] = React22.useState(!isValidSrc(resolvedSrc));
-  React22.useEffect(() => {
+  const [imgSrc, setImgSrc] = React23.useState(initialSrc);
+  const [hasError, setHasError] = React23.useState(!isValidSrc(resolvedSrc));
+  React23.useEffect(() => {
     const nextResolvedSrc = resolveSrc(src);
     if (isValidSrc(nextResolvedSrc)) {
       setImgSrc(nextResolvedSrc);
@@ -930,8 +1077,8 @@ var Toast = ({
   showCloseButton = true,
   className
 }) => {
-  const [isShowing, setIsShowing] = React22.useState(false);
-  React22.useEffect(() => {
+  const [isShowing, setIsShowing] = React23.useState(false);
+  React23.useEffect(() => {
     if (isVisible) {
       setIsShowing(true);
       let timer = null;
@@ -1155,7 +1302,7 @@ var Modal = ({
   closeOnEscape = true,
   className
 }) => {
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (!isOpen) return;
     const handleEscape = (e) => {
       if (e.key === "Escape" && closeOnEscape) {
@@ -1222,7 +1369,7 @@ var Modal = ({
   );
 };
 var Modal_default = Modal;
-var Card = React22__namespace.default.forwardRef(
+var Card = React23__namespace.default.forwardRef(
   ({
     className,
     variant = "default",
@@ -1260,7 +1407,7 @@ var Card = React22__namespace.default.forwardRef(
 );
 Card.displayName = "Card";
 var Card_default = Card;
-var Badge = React22__namespace.default.forwardRef(
+var Badge = React23__namespace.default.forwardRef(
   ({
     className,
     variant = "default",
@@ -1315,7 +1462,7 @@ var Avatar = ({
   className,
   onClick
 }) => {
-  const [imgError, setImgError] = React22.useState(false);
+  const [imgError, setImgError] = React23.useState(false);
   const sizeClasses = {
     sm: "w-8 h-8 text-xs",
     md: "w-10 h-10 text-sm",
@@ -1338,7 +1485,7 @@ var Avatar = ({
       }
     ) }) });
   };
-  const handleImgError = React22.useCallback(() => {
+  const handleImgError = React23.useCallback(() => {
     setImgError(true);
   }, []);
   const isSrcAvailable = typeof src === "string" && src.trim() !== "";
@@ -1410,8 +1557,8 @@ var Tooltip = ({
   delay = 200,
   className
 }) => {
-  const [isVisible, setIsVisible] = React22.useState(false);
-  const [timeoutId, setTimeoutId] = React22.useState(null);
+  const [isVisible, setIsVisible] = React23.useState(false);
+  const [timeoutId, setTimeoutId] = React23.useState(null);
   const showTooltip = () => {
     const id = setTimeout(() => setIsVisible(true), delay);
     setTimeoutId(id);
@@ -1603,12 +1750,12 @@ var matchShortcut = (event, shortcut, os) => {
   return pressed.every((k) => keySet.has(k));
 };
 var useShortcutFormatter = () => {
-  const [os, setOS] = React22.useState("windows");
-  const listenersRef = React22.useRef(/* @__PURE__ */ new Map());
-  React22.useEffect(() => {
+  const [os, setOS] = React23.useState("windows");
+  const listenersRef = React23.useRef(/* @__PURE__ */ new Map());
+  React23.useEffect(() => {
     setOS(detectOS());
   }, []);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const handleKeyDown = (event) => {
       for (const shortcut of globalKeyboardShortcuts) {
         if (matchShortcut(event, shortcut.shortcut, os)) {
@@ -1651,7 +1798,7 @@ var useShortcutFormatter = () => {
   };
 };
 var useShortcutFormatter_default = useShortcutFormatter;
-var SearchInput = React22__namespace.default.forwardRef(
+var SearchInput = React23__namespace.default.forwardRef(
   ({
     onSearch,
     placeholder = "Search...",
@@ -1666,11 +1813,11 @@ var SearchInput = React22__namespace.default.forwardRef(
     isActive = true,
     ...props
   }, ref) => {
-    const [searchValue, setSearchValue] = React22__namespace.default.useState(value || "");
-    const inputRef = React22.useRef(null);
-    React22.useImperativeHandle(ref, () => inputRef.current);
+    const [searchValue, setSearchValue] = React23__namespace.default.useState(value || "");
+    const inputRef = React23.useRef(null);
+    React23.useImperativeHandle(ref, () => inputRef.current);
     const { addShortcutListener, removeShortcutListener, formatKeys, getShortcutByCommand } = useShortcutFormatter_default();
-    React22.useEffect(() => {
+    React23.useEffect(() => {
       setSearchValue(value ?? "");
     }, [value]);
     const handleChange = (e) => {
@@ -1679,7 +1826,7 @@ var SearchInput = React22__namespace.default.forwardRef(
       onChange?.(e);
       onSearch?.(newValue);
     };
-    const handleClear = React22.useCallback(() => {
+    const handleClear = React23.useCallback(() => {
       setSearchValue("");
       onSearch?.("");
       const syntheticEvent = {
@@ -1687,7 +1834,7 @@ var SearchInput = React22__namespace.default.forwardRef(
       };
       onChange?.(syntheticEvent);
     }, [onChange, onSearch]);
-    React22.useEffect(() => {
+    React23.useEffect(() => {
       if (!enableKeyboardShortcuts || !isActive) return;
       const handleFocusSearch = (e) => {
         e?.preventDefault();
@@ -1817,8 +1964,8 @@ var FileUpload = ({
   children,
   dragAndDrop = false
 }) => {
-  const fileInputRef = React22.useRef(null);
-  const [isDragOver, setIsDragOver] = React22__namespace.default.useState(false);
+  const fileInputRef = React23.useRef(null);
+  const [isDragOver, setIsDragOver] = React23__namespace.default.useState(false);
   const handleFileSelect = (files) => {
     if (!files) return;
     const fileArray = Array.from(files);
@@ -2116,7 +2263,7 @@ var Pagination = ({
   ] });
 };
 var Pagination_default = Pagination;
-var Radio = React22__namespace.default.forwardRef(
+var Radio = React23__namespace.default.forwardRef(
   ({
     className,
     label,
@@ -2181,7 +2328,7 @@ var Radio = React22__namespace.default.forwardRef(
 Radio.displayName = "Radio";
 var Radio_default = Radio;
 var Accordion = ({ items, active = -1 }) => {
-  const [activeIndex, setActiveIndex] = React22.useState(active);
+  const [activeIndex, setActiveIndex] = React23.useState(active);
   const toggleAccordion = (index) => {
     setActiveIndex(activeIndex === index ? null : index);
   };
@@ -2222,8 +2369,8 @@ var Tabs = ({
   buttonClassName = "flex items-center gap-1 px-[8px] py-[2px] text-[13px] cursor-pointer transition-all duration-300 text-neutral-300 rounded-[6px] m-[8px]",
   activeButtonClassName = "bg-surface-3 text-neutral-400"
 }) => {
-  const [activeTab, setActiveTab] = React22.useState(defaultActiveTab);
-  React22.useEffect(() => {
+  const [activeTab, setActiveTab] = React23.useState(defaultActiveTab);
+  React23.useEffect(() => {
     setActiveTab(defaultActiveTab);
   }, [defaultActiveTab]);
   const handleTabClick = (index) => {
@@ -2262,11 +2409,11 @@ function renderPluginChild(child, app, api, reloadKey) {
     const renderFn = child;
     return renderFn({ app, api });
   }
-  return React22.Children.map(child, (node, index) => {
-    if (!React22.isValidElement(node)) {
+  return React23.Children.map(child, (node, index) => {
+    if (!React23.isValidElement(node)) {
       return node;
     }
-    return React22.cloneElement(
+    return React23.cloneElement(
       node,
       {
         key: `${reloadKey}-${index}`,
@@ -2298,20 +2445,20 @@ function PluginPlayground({
   onClose,
   onMinimize
 }) {
-  const [mockUser] = React22.useState(DEFAULT_MOCK_USER);
-  const [mockToken] = React22.useState(DEFAULT_TOKEN);
-  const [isMinimized, setIsMinimized] = React22.useState(false);
-  const [isClosed, setIsClosed] = React22.useState(false);
-  const [isActive, setIsActive] = React22.useState(true);
-  const [isNightMode, setIsNightMode] = React22.useState(true);
-  React22.useEffect(() => {
+  const [mockUser] = React23.useState(DEFAULT_MOCK_USER);
+  const [mockToken] = React23.useState(DEFAULT_TOKEN);
+  const [isMinimized, setIsMinimized] = React23.useState(false);
+  const [isClosed, setIsClosed] = React23.useState(false);
+  const [isActive, setIsActive] = React23.useState(true);
+  const [isNightMode, setIsNightMode] = React23.useState(true);
+  React23.useEffect(() => {
     if (typeof window === "undefined") return;
     const storedTheme = window.localStorage.getItem("plugin-playground-theme");
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     const shouldUseDark = storedTheme ? storedTheme === "dark" : prefersDark;
     setIsNightMode(shouldUseDark);
   }, []);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (typeof document === "undefined") return;
     document.documentElement.classList.toggle("dark", isNightMode);
     window.localStorage.setItem(
@@ -2321,28 +2468,28 @@ function PluginPlayground({
   }, [isNightMode]);
   const title = metadata.title ?? metadata.name ?? "Plugin Playground";
   const slug = metadata.slug ?? "local-plugin";
-  const defaultSize = React22.useMemo(() => getDefaultSize(metadata), [metadata]);
+  const defaultSize = React23.useMemo(() => getDefaultSize(metadata), [metadata]);
   const canvasBackground = backgroundImage ?? metadata.backgroundImage ?? DEFAULT_BACKGROUND;
   const isWindowResizable = metadata.windowSize?.isAppWindowResizing ?? metadata.isResizing ?? true;
-  const minimizeWindow = React22.useCallback(() => {
+  const minimizeWindow = React23.useCallback(() => {
     setIsActive(false);
     setIsMinimized(true);
     setIsClosed(false);
     onMinimize?.(true);
   }, [onMinimize]);
-  const closeWindow = React22.useCallback(() => {
+  const closeWindow = React23.useCallback(() => {
     setIsActive(false);
     setIsClosed(true);
     setIsMinimized(false);
     onClose?.();
   }, [onClose]);
-  const restoreWindow = React22.useCallback(() => {
+  const restoreWindow = React23.useCallback(() => {
     setIsActive(true);
     setIsClosed(false);
     setIsMinimized(false);
     onMinimize?.(false);
   }, [onMinimize]);
-  const mockApi = React22.useMemo(
+  const mockApi = React23.useMemo(
     () => ({
       showToast: (message, type) => {
         console.info(`[playground:${type}] ${message}`);
@@ -2359,7 +2506,7 @@ function PluginPlayground({
     }),
     [mockToken, mockUser]
   );
-  const appProps = React22.useMemo(
+  const appProps = React23.useMemo(
     () => ({
       name: title,
       slug,
@@ -2529,13 +2676,13 @@ var WindowWithSideMenu = ({
     removeShortcutListener,
     getShortcutByCommand
   } = useShortcutFormatter_default();
-  const [state, dispatch] = React22.useReducer(reducer, {
+  const [state, dispatch] = React23.useReducer(reducer, {
     ...initialState,
     windowSize: app.windowSize.windowSize ?? defaultSize,
     defaultSize: app.windowSize.windowSize ?? defaultSize
   });
-  const windowRef = React22.useRef(null);
-  React22.useEffect(() => {
+  const windowRef = React23.useRef(null);
+  React23.useEffect(() => {
     if (app.isMinimize !== state.isMinimized) {
       dispatch({ type: "SYNC_MINIMIZE_STATE", payload: app.isMinimize });
     }
@@ -2596,7 +2743,7 @@ var WindowWithSideMenu = ({
     document.body.style.userSelect = "none";
     dispatch({ type: "START_RESIZE", payload: { x: e.clientX, y: e.clientY } });
   };
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (state.isDragging || state.resizeStart) {
       window.addEventListener("mousemove", handleMouseMove);
       window.addEventListener("mouseup", handleMouseUp);
@@ -2607,7 +2754,7 @@ var WindowWithSideMenu = ({
       document.body.style.userSelect = "";
     };
   }, [state.isDragging, state.resizeStart]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (windowRef.current) {
       windowRef.current.addEventListener("click", () => {
         if (app?.callback) {
@@ -2616,7 +2763,7 @@ var WindowWithSideMenu = ({
       });
     }
   }, [app?.slug, windowRef]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const handleExitApp = () => {
       if (app?.callback) {
         app?.callback("CLOSE_APP");
@@ -2627,7 +2774,7 @@ var WindowWithSideMenu = ({
       removeShortcutListener("exit_app", handleExitApp);
     };
   }, [app?.slug, app.isActive]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const handleMinimize = () => {
       if (app?.slug && app.isActive) {
         dispatch({
@@ -2644,7 +2791,7 @@ var WindowWithSideMenu = ({
       removeShortcutListener("minimize_app", handleMinimize);
     };
   }, [app?.slug, app.isActive, state.isMinimized, state.windowSize]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const handleMaximize = () => {
       if (app?.slug && app.isActive) {
         dispatch({
@@ -2815,7 +2962,7 @@ var WindowWithSideMenu = ({
                   style: {
                     maxHeight: `${state.windowSize.height - 37}px`
                   },
-                  children: React22.isValidElement(children) && typeof children.type !== "string" ? React22__namespace.default.cloneElement(children, {
+                  children: React23.isValidElement(children) && typeof children.type !== "string" ? React23__namespace.default.cloneElement(children, {
                     windowSize: state.windowSize,
                     isAppWindowResizing: state.resizeStart !== null
                   }) : children
@@ -2921,13 +3068,13 @@ var WindowWithoutSideMenu = ({
     removeShortcutListener,
     getShortcutByCommand
   } = useShortcutFormatter_default();
-  const [state, dispatch] = React22.useReducer(reducer2, {
+  const [state, dispatch] = React23.useReducer(reducer2, {
     ...initialState2,
     windowSize: app.windowSize.windowSize ?? defaultSize,
     defaultSize: app.windowSize.windowSize ?? defaultSize
   });
-  const windowRef = React22.useRef(null);
-  React22.useEffect(() => {
+  const windowRef = React23.useRef(null);
+  React23.useEffect(() => {
     if (app.isMinimize !== state.isMinimized) {
       dispatch({ type: "SYNC_MINIMIZE_STATE", payload: app.isMinimize });
     }
@@ -2984,7 +3131,7 @@ var WindowWithoutSideMenu = ({
     document.body.style.userSelect = "none";
     dispatch({ type: "START_RESIZE", payload: { x: e.clientX, y: e.clientY } });
   };
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (state.isDragging || state.resizeStart) {
       window.addEventListener("mousemove", handleMouseMove);
       window.addEventListener("mouseup", handleMouseUp);
@@ -2995,7 +3142,7 @@ var WindowWithoutSideMenu = ({
       document.body.style.userSelect = "";
     };
   }, [state.isDragging, state.resizeStart]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (windowRef.current) {
       windowRef.current.addEventListener("click", () => {
         if (app?.callback) {
@@ -3004,7 +3151,7 @@ var WindowWithoutSideMenu = ({
       });
     }
   }, [app?.slug, windowRef]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const handleExitApp = () => {
       if (app?.callback) {
         app?.callback("CLOSE_APP");
@@ -3015,7 +3162,7 @@ var WindowWithoutSideMenu = ({
       removeShortcutListener("exit_app", handleExitApp);
     };
   }, [app?.slug, app.isActive]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const handleMinimize = () => {
       if (app?.slug && app.isActive) {
         dispatch({
@@ -3032,7 +3179,7 @@ var WindowWithoutSideMenu = ({
       removeShortcutListener("minimize_app", handleMinimize);
     };
   }, [app?.slug, app.isActive, state.isMinimized, state.windowSize]);
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const handleMaximize = () => {
       if (app?.slug && app.isActive) {
         dispatch({
@@ -3148,7 +3295,7 @@ var WindowWithoutSideMenu = ({
                 style: {
                   maxHeight: `${state.windowSize.height - 37}px`
                 },
-                children: React22.isValidElement(children) && typeof children.type !== "string" ? React22__namespace.default.cloneElement(children, {
+                children: React23.isValidElement(children) && typeof children.type !== "string" ? React23__namespace.default.cloneElement(children, {
                   windowSize: state.windowSize,
                   isAppWindowResizing: state.resizeStart !== null
                 }) : children
@@ -3171,7 +3318,7 @@ var WindowWithoutSideMenu = ({
   );
 };
 var WindowWithoutSideMenu_default = WindowWithoutSideMenu;
-var Table = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+var Table = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
   "table",
   {
     ref,
@@ -3180,9 +3327,9 @@ var Table = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b text-neutral-400 bg-surface-2", className), ...props }));
+var TableHeader = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b text-neutral-400 bg-surface-2", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableBody = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tbody",
   {
     ref,
@@ -3191,7 +3338,7 @@ var TableBody = React22__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableFooter = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tfoot",
   {
     ref,
@@ -3203,7 +3350,7 @@ var TableFooter = React22__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React22__namespace.forwardRef(({ className, onClick, ...props }, ref) => {
+var TableRow = React23__namespace.forwardRef(({ className, onClick, ...props }, ref) => {
   const isInteractive = typeof onClick === "function";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "tr",
@@ -3220,7 +3367,7 @@ var TableRow = React22__namespace.forwardRef(({ className, onClick, ...props },
   );
 });
 TableRow.displayName = "TableRow";
-var TableHead = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableHead = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "th",
   {
     ref,
@@ -3232,7 +3379,7 @@ var TableHead = React22__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCell = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "td",
   {
     ref,
@@ -3241,7 +3388,7 @@ var TableCell = React22__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCaption = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "caption",
   {
     ref,
@@ -3251,16 +3398,16 @@ var TableCaption = React22__namespace.forwardRef(({ className, ...props }, ref)
 ));
 TableCaption.displayName = "TableCaption";
 var useGridClasses = (windowSize, gridRules) => {
-  const deviceType = React22.useMemo(() => {
+  const deviceType = React23.useMemo(() => {
     if (windowSize.width <= 640) return "mobile";
     if (windowSize.width <= 1024) return "tablet";
     return "desktop";
   }, [windowSize]);
-  const gridClasses = React22.useMemo(() => {
+  const gridClasses = React23.useMemo(() => {
     const classes = {};
     for (const element in gridRules) {
-      const classRules = gridRules[element];
-      const colSpan = classRules["col-span"][deviceType];
+      const classRules = gridRules[element] ?? {};
+      const colSpan = classRules["col-span"]?.[deviceType] ?? "12";
       classes[element] = `col-span-${deviceType}-${colSpan}`;
     }
     return classes;
@@ -3269,8 +3416,8 @@ var useGridClasses = (windowSize, gridRules) => {
 };
 var useGridClasses_default = useGridClasses;
 var useDeviceSupport = () => {
-  const [isSupported, setIsSupported] = React22.useState(true);
-  React22.useEffect(() => {
+  const [isSupported, setIsSupported] = React23.useState(true);
+  React23.useEffect(() => {
     function checkSupport() {
       const ua = typeof window !== "undefined" ? window.navigator.userAgent : "";
       const width = typeof window !== "undefined" ? window.innerWidth : 1920;
@@ -3396,7 +3543,7 @@ var useSound = () => {
     audio.currentTime = 0;
     await audio.play();
   };
-  const playSound = React22.useCallback((type) => {
+  const playSound = React23.useCallback((type) => {
     if (typeof window === "undefined") {
       return;
     }
@@ -3463,6 +3610,7 @@ exports.Pagination = Pagination_default;
 exports.PluginPlayground = PluginPlayground;
 exports.Progress = Progress_default;
 exports.Radio = Radio_default;
+exports.RichEditor = RichEditor_default;
 exports.SearchInput = SearchInput_default;
 exports.Select = Select_default;
 exports.Skeleton = Skeleton_default;