@react95/core 9.5.2 → 9.6.0-alpha.0

package/cjs/GlobalStyle/GlobalStyle.css.cjs

@@ -1,4 +1,3 @@
 require('./GlobalStyle.css.ts.vanilla.css');
 "use strict";
-require("../themes/contract.css.ts.vanilla.css.cjs");
 /* empty css                                   */

package/cjs/Modal/Modal.cjs

@@ -9,30 +9,34 @@ const TitleBar = require("../TitleBar/TitleBar.cjs");
 const Modal_css = require("./Modal.css.cjs");
 const cn = require("classnames");
 const usehooksTs = require("usehooks-ts");
-const events = require("../shared/events.cjs");
+const useModal = require("../shared/use-modal.cjs");
+const modalTypes = require("../shared/modal-types.cjs");
 const ModalContent = Frame.fixedForwardRef(
   (rest, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, ref, className: cn(Modal_css.content, rest.className) })
 );
 const ModalMinimize = Frame.fixedForwardRef(
   (props, ref) => {
     const [id, setId] = React.useState("");
+    const { minimize, focus, subscribe } = useModal.useModal();
     React.useEffect(() => {
       const handleVisibilityChange = ({ id: activeId }) => {
         setId(activeId);
       };
-      events.modals.on(events.ModalEvents.ModalVisibilityChanged, handleVisibilityChange);
-      return () => {
-        events.modals.off(events.ModalEvents.ModalVisibilityChanged, handleVisibilityChange);
-      };
-    }, []);
+      const unsubscribe = subscribe(
+        modalTypes.ModalEvents.ModalVisibilityChanged,
+        handleVisibilityChange
+      );
+      return unsubscribe;
+    }, [subscribe]);
     const handleMinimize = () => {
-      events.modals.emit(events.ModalEvents.MinimizeModal, { id });
-      events.modals.emit(events.ModalEvents.ModalVisibilityChanged, { id: "no id" });
+      minimize(id);
+      focus("no-id");
     };
     return /* @__PURE__ */ React.createElement(TitleBar.TitleBar.Minimize, { ...props, ref, onClick: handleMinimize });
   }
 );
 const ModalRenderer = ({
+  id: providedId,
   hasWindowButton: hasButton = true,
   buttons = [],
   buttonsAlignment = "flex-end",
@@ -45,10 +49,11 @@ const ModalRenderer = ({
   className,
   ...rest
 }, ref) => {
-  const [id] = React.useState(nanoid.nanoid());
+  const [id] = React.useState(providedId || nanoid.nanoid());
   const [menuOpened, setMenuOpened] = React.useState("");
   const [isActive, setIsActive] = React.useState(false);
   const [isModalMinimized, setIsModalMinimized] = React.useState(false);
+  const { add, remove, focus, subscribe } = useModal.useModal();
   const draggableRef = React.useRef(null);
   react.useDraggable(draggableRef, {
     ...dragOptions,
@@ -59,38 +64,46 @@ const ModalRenderer = ({
     setMenuOpened("");
   });
   React.useEffect(() => {
-    events.modals.emit(events.ModalEvents.AddModal, {
+    add({
       icon,
-      title,
+      title: title || "",
       id,
       hasButton
     });
-    events.modals.on(events.ModalEvents.ModalVisibilityChanged, ({ id: activeId }) => {
-      setIsActive(activeId === id);
-    });
-    events.modals.emit(events.ModalEvents.ModalVisibilityChanged, { id });
+    const unsubscribeVisibility = subscribe(
+      modalTypes.ModalEvents.ModalVisibilityChanged,
+      ({ id: activeId }) => {
+        setIsActive(activeId === id);
+      }
+    );
+    focus(id);
     return () => {
-      events.modals.emit(events.ModalEvents.RemoveModal, { id });
+      remove(id);
+      unsubscribeVisibility();
     };
-  }, []);
+  }, [id, icon, title, hasButton, providedId, add, remove, focus, subscribe]);
   React.useEffect(() => {
-    events.modals.on(events.ModalEvents.MinimizeModal, ({ id: activeId }) => {
-      if (activeId === id) {
-        setIsModalMinimized(true);
+    const unsubscribeMinimize = subscribe(
+      modalTypes.ModalEvents.MinimizeModal,
+      ({ id: activeId }) => {
+        if (activeId === id) {
+          setIsModalMinimized(true);
+        }
       }
-    });
-    events.modals.on(events.ModalEvents.RestoreModal, ({ id: activeId }) => {
-      if (activeId === id) {
-        setIsModalMinimized(false);
+    );
+    const unsubscribeRestore = subscribe(
+      modalTypes.ModalEvents.RestoreModal,
+      ({ id: activeId }) => {
+        if (activeId === id) {
+          setIsModalMinimized(false);
+        }
       }
-    });
+    );
     return () => {
-      events.modals.off(events.ModalEvents.MinimizeModal, () => {
-      });
-      events.modals.off(events.ModalEvents.RestoreModal, () => {
-      });
+      unsubscribeMinimize();
+      unsubscribeRestore();
     };
-  }, [id]);
+  }, [id, subscribe]);
   React.useImperativeHandle(ref, () => {
     return draggableRef.current;
   });
@@ -106,7 +119,7 @@ const ModalRenderer = ({
       "aria-hidden": isModalMinimized,
       ref: draggableRef,
       onMouseDown: () => {
-        events.modals.emit(events.ModalEvents.ModalVisibilityChanged, { id });
+        focus(id);
       }
     },
     /* @__PURE__ */ React.createElement(

package/cjs/TaskBar/TaskBar.cjs

@@ -6,16 +6,27 @@ const Clock = require("./Clock.cjs");
 const WindowButton = require("./WindowButton.cjs");
 const icons = require("@react95/icons");
 const TaskBar_css = require("./TaskBar.css.cjs");
-const events = require("../shared/events.cjs");
+const useModal = require("../shared/use-modal.cjs");
+const modalTypes = require("../shared/modal-types.cjs");
 const TaskBar = React.forwardRef(
   ({ list, className }, ref) => {
     const [showList, toggleShowList] = React.useState(false);
     const [activeStart, toggleActiveStart] = React.useState(false);
     const [modalWindows, setModalWindows] = React.useState([]);
     const [activeWindow, setActiveWindow] = React.useState();
+    const { minimize, restore, focus, subscribe } = useModal.useModal();
     React.useEffect(() => {
       const addModal = (window) => {
-        setModalWindows((prevModals) => [...prevModals, window]);
+        if (!window.id) {
+          console.warn("Modal added without ID");
+          return;
+        }
+        setModalWindows((prevModals) => {
+          if (prevModals.some((modal) => modal.id === window.id)) {
+            return prevModals;
+          }
+          return [...prevModals, window];
+        });
       };
       const removeModal = (data) => {
         setModalWindows((prevModals) => {
@@ -23,10 +34,8 @@ const TaskBar = React.forwardRef(
             (modal) => modal.id !== data.id
           );
           const lastModal = filteredModals.at(-1);
-          if (!activeWindow && lastModal) {
-            events.modals.emit(events.ModalEvents.ModalVisibilityChanged, {
-              id: lastModal == null ? void 0 : lastModal.id
-            });
+          if (activeWindow === data.id && lastModal) {
+            focus(lastModal.id);
           }
           return filteredModals;
         });
@@ -34,15 +43,18 @@ const TaskBar = React.forwardRef(
       const updateVisibleModal = ({ id }) => {
         setActiveWindow(id);
       };
-      events.modals.on(events.ModalEvents.AddModal, addModal);
-      events.modals.on(events.ModalEvents.RemoveModal, removeModal);
-      events.modals.on(events.ModalEvents.ModalVisibilityChanged, updateVisibleModal);
+      const unsubscribeAdd = subscribe(modalTypes.ModalEvents.AddModal, addModal);
+      const unsubscribeRemove = subscribe(modalTypes.ModalEvents.RemoveModal, removeModal);
+      const unsubscribeVisibility = subscribe(
+        modalTypes.ModalEvents.ModalVisibilityChanged,
+        updateVisibleModal
+      );
       return () => {
-        events.modals.off(events.ModalEvents.AddModal, addModal);
-        events.modals.off(events.ModalEvents.RemoveModal, removeModal);
-        events.modals.off(events.ModalEvents.ModalVisibilityChanged, updateVisibleModal);
+        unsubscribeAdd();
+        unsubscribeRemove();
+        unsubscribeVisibility();
       };
-    }, []);
+    }, [activeWindow, subscribe, focus]);
     return /* @__PURE__ */ React.createElement(
       Frame.Frame,
       {
@@ -95,11 +107,11 @@ const TaskBar = React.forwardRef(
             active: id === activeWindow,
             onClick: () => {
               if (id === activeWindow) {
-                events.modals.emit(events.ModalEvents.MinimizeModal, { id });
-                setActiveWindow("Minimize");
+                minimize(id);
+                setActiveWindow(void 0);
               } else {
-                events.modals.emit(events.ModalEvents.RestoreModal, { id });
-                events.modals.emit(events.ModalEvents.ModalVisibilityChanged, { id });
+                restore(id);
+                focus(id);
               }
             },
             small: false

package/cjs/index.cjs

@@ -24,6 +24,8 @@ const TitleBar = require("./TitleBar/TitleBar.cjs");
 const Video = require("./Video/Video.cjs");
 const contract_css = require("./themes/contract.css.cjs");
 const index = require("./themes/tokens/index.cjs");
+const modalTypes = require("./shared/modal-types.cjs");
+const useModal = require("./shared/use-modal.cjs");
 exports.Modal = Modal.Modal;
 exports.Tabs = Tabs.Tabs;
 exports.Tab = Tab.Tab;
@@ -48,3 +50,5 @@ exports.TitleBar = TitleBar.TitleBar;
 exports.Video = Video.Video;
 exports.contract = contract_css.contract;
 exports.tokens = index;
+exports.ModalEvents = modalTypes.ModalEvents;
+exports.useModal = useModal.useModal;

package/cjs/shared/emitter.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+class Emitter {
+  constructor() {
+    this.listeners = {};
+  }
+  on(eventName, callback) {
+    var _a;
+    if (!this.listeners[eventName]) {
+      this.listeners[eventName] = [];
+    }
+    (_a = this.listeners[eventName]) == null ? void 0 : _a.push(callback);
+  }
+  off(eventName, callback) {
+    var _a;
+    if (this.listeners[eventName]) {
+      this.listeners[eventName] = (_a = this.listeners[eventName]) == null ? void 0 : _a.filter(
+        (cb) => cb !== callback
+      );
+    }
+  }
+  emit(eventName, data) {
+    var _a;
+    if (this.listeners[eventName]) {
+      (_a = this.listeners[eventName]) == null ? void 0 : _a.forEach((callback) => {
+        try {
+          callback(data);
+        } catch (error) {
+          console.error(`Error in event listener for ${eventName}:`, error);
+        }
+      });
+    }
+  }
+}
+exports.Emitter = Emitter;

package/cjs/shared/modal-controller.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const emitter = require("./emitter.cjs");
+const modals = new emitter.Emitter();
+exports.modals = modals;

package/cjs/shared/modal-types.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var ModalEvents = /* @__PURE__ */ ((ModalEvents2) => {
+  ModalEvents2["AddModal"] = "add-modal";
+  ModalEvents2["RemoveModal"] = "remove-modal";
+  ModalEvents2["ModalVisibilityChanged"] = "modal-visibility-changed";
+  ModalEvents2["MinimizeModal"] = "minimize-modal";
+  ModalEvents2["RestoreModal"] = "restore-modal";
+  ModalEvents2["FocusModal"] = "focus-modal";
+  return ModalEvents2;
+})(ModalEvents || {});
+exports.ModalEvents = ModalEvents;

package/cjs/shared/use-modal.cjs

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const modalController = require("./modal-controller.cjs");
+const modalTypes = require("./modal-types.cjs");
+const useModal = () => {
+  const add = React.useCallback((modal) => {
+    modalController.modals.emit(modalTypes.ModalEvents.AddModal, modal);
+  }, []);
+  const remove = React.useCallback((id) => {
+    modalController.modals.emit(modalTypes.ModalEvents.RemoveModal, { id });
+  }, []);
+  const minimize = React.useCallback((id) => {
+    modalController.modals.emit(modalTypes.ModalEvents.MinimizeModal, { id });
+  }, []);
+  const restore = React.useCallback((id) => {
+    modalController.modals.emit(modalTypes.ModalEvents.RestoreModal, { id });
+  }, []);
+  const focus = React.useCallback((id) => {
+    modalController.modals.emit(modalTypes.ModalEvents.ModalVisibilityChanged, { id });
+  }, []);
+  const toggle = React.useCallback((id, isActive) => {
+    if (isActive) {
+      modalController.modals.emit(modalTypes.ModalEvents.MinimizeModal, { id });
+    } else {
+      modalController.modals.emit(modalTypes.ModalEvents.RestoreModal, { id });
+      modalController.modals.emit(modalTypes.ModalEvents.ModalVisibilityChanged, { id });
+    }
+  }, []);
+  const subscribe = React.useCallback(
+    (event, callback) => {
+      modalController.modals.on(event, callback);
+      return () => modalController.modals.off(event, callback);
+    },
+    []
+  );
+  return { add, remove, minimize, restore, focus, toggle, subscribe };
+};
+exports.useModal = useModal;

package/cjs/themes/contract.css.cjs

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("./contract.css.ts.vanilla.css.cjs");
 var contract = { space: { "0": "var(--r95-space-0)", "1": "var(--r95-space-1)", "2": "var(--r95-space-2)", "3": "var(--r95-space-3)", "4": "var(--r95-space-4)", "5": "var(--r95-space-5)", "6": "var(--r95-space-6)", "7": "var(--r95-space-7)", "8": "var(--r95-space-8)", "9": "var(--r95-space-9)", "10": "var(--r95-space-10)", "11": "var(--r95-space-11)", "12": "var(--r95-space-12)", "13": "var(--r95-space-13)", "14": "var(--r95-space-14)", "15": "var(--r95-space-15)", "16": "var(--r95-space-16)", "17": "var(--r95-space-17)", "18": "var(--r95-space-18)", "19": "var(--r95-space-19)", "20": "var(--r95-space-20)" }, colors: { anchor: "var(--r95-color-anchor)", anchorVisited: "var(--r95-color-anchorVisited)", borderDark: "var(--r95-color-borderDark)", borderDarkest: "var(--r95-color-borderDarkest)", borderLight: "var(--r95-color-borderLight)", borderLighter: "var(--r95-color-borderLighter)", borderLightest: "var(--r95-color-borderLightest)", canvas: "var(--r95-color-canvas)", canvasText: "var(--r95-color-canvasText)", headerBackground: "var(--r95-color-headerBackground)", headerNotActiveBackground: "var(--r95-color-headerNotActiveBackground)", headerNotActiveText: "var(--r95-color-headerNotActiveText)", headerText: "var(--r95-color-headerText)", material: "var(--r95-color-material)", materialText: "var(--r95-color-materialText)", materialTextDisabled: "var(--r95-color-materialTextDisabled)", materialTextDisabledShadow: "var(--r95-color-materialTextDisabledShadow)", materialTextInvert: "var(--r95-color-materialTextInvert)", progress: "var(--r95-color-progress)", inputBackground: "var(--r95-color-inputBackground)", inputBackgroundDisabled: "var(--r95-color-inputBackgroundDisabled)" }, zIndices: { modal: "var(--r95-zIndex-modal)", tooltip: "var(--r95-zIndex-tooltip)", taskbar: "var(--r95-zIndex-taskbar)" }, shadows: { out: "var(--r95-shadow-out)", "in": "var(--r95-shadow-in)", input: "var(--r95-shadow-input)" } };
 exports.contract = contract;

package/esm/GlobalStyle/GlobalStyle.css.mjs

@@ -1,3 +1,2 @@
 import './GlobalStyle.css.ts.vanilla.css';
-import "../themes/contract.css.ts.vanilla.css.mjs";
 /* empty css                                 */

package/esm/Modal/Modal.mjs

@@ -7,30 +7,34 @@ import { TitleBar } from "../TitleBar/TitleBar.mjs";
 import { content, modalWrapper, menuWrapper, menuItem, buttonWrapper } from "./Modal.css.mjs";
 import cn from "classnames";
 import { useOnClickOutside } from "usehooks-ts";
-import { modals, ModalEvents } from "../shared/events.mjs";
+import { useModal } from "../shared/use-modal.mjs";
+import { ModalEvents } from "../shared/modal-types.mjs";
 const ModalContent = fixedForwardRef(
   (rest, ref) => /* @__PURE__ */ React.createElement(Frame, { ...rest, ref, className: cn(content, rest.className) })
 );
 const ModalMinimize = fixedForwardRef(
   (props, ref) => {
     const [id, setId] = useState("");
+    const { minimize, focus, subscribe } = useModal();
     useEffect(() => {
       const handleVisibilityChange = ({ id: activeId }) => {
         setId(activeId);
       };
-      modals.on(ModalEvents.ModalVisibilityChanged, handleVisibilityChange);
-      return () => {
-        modals.off(ModalEvents.ModalVisibilityChanged, handleVisibilityChange);
-      };
-    }, []);
+      const unsubscribe = subscribe(
+        ModalEvents.ModalVisibilityChanged,
+        handleVisibilityChange
+      );
+      return unsubscribe;
+    }, [subscribe]);
     const handleMinimize = () => {
-      modals.emit(ModalEvents.MinimizeModal, { id });
-      modals.emit(ModalEvents.ModalVisibilityChanged, { id: "no id" });
+      minimize(id);
+      focus("no-id");
     };
     return /* @__PURE__ */ React.createElement(TitleBar.Minimize, { ...props, ref, onClick: handleMinimize });
   }
 );
 const ModalRenderer = ({
+  id: providedId,
   hasWindowButton: hasButton = true,
   buttons = [],
   buttonsAlignment = "flex-end",
@@ -43,10 +47,11 @@ const ModalRenderer = ({
   className,
   ...rest
 }, ref) => {
-  const [id] = useState(nanoid());
+  const [id] = useState(providedId || nanoid());
   const [menuOpened, setMenuOpened] = useState("");
   const [isActive, setIsActive] = useState(false);
   const [isModalMinimized, setIsModalMinimized] = useState(false);
+  const { add, remove, focus, subscribe } = useModal();
   const draggableRef = useRef(null);
   useDraggable(draggableRef, {
     ...dragOptions,
@@ -57,38 +62,46 @@ const ModalRenderer = ({
     setMenuOpened("");
   });
   useEffect(() => {
-    modals.emit(ModalEvents.AddModal, {
+    add({
       icon,
-      title,
+      title: title || "",
       id,
       hasButton
     });
-    modals.on(ModalEvents.ModalVisibilityChanged, ({ id: activeId }) => {
-      setIsActive(activeId === id);
-    });
-    modals.emit(ModalEvents.ModalVisibilityChanged, { id });
+    const unsubscribeVisibility = subscribe(
+      ModalEvents.ModalVisibilityChanged,
+      ({ id: activeId }) => {
+        setIsActive(activeId === id);
+      }
+    );
+    focus(id);
     return () => {
-      modals.emit(ModalEvents.RemoveModal, { id });
+      remove(id);
+      unsubscribeVisibility();
     };
-  }, []);
+  }, [id, icon, title, hasButton, providedId, add, remove, focus, subscribe]);
   useEffect(() => {
-    modals.on(ModalEvents.MinimizeModal, ({ id: activeId }) => {
-      if (activeId === id) {
-        setIsModalMinimized(true);
+    const unsubscribeMinimize = subscribe(
+      ModalEvents.MinimizeModal,
+      ({ id: activeId }) => {
+        if (activeId === id) {
+          setIsModalMinimized(true);
+        }
       }
-    });
-    modals.on(ModalEvents.RestoreModal, ({ id: activeId }) => {
-      if (activeId === id) {
-        setIsModalMinimized(false);
+    );
+    const unsubscribeRestore = subscribe(
+      ModalEvents.RestoreModal,
+      ({ id: activeId }) => {
+        if (activeId === id) {
+          setIsModalMinimized(false);
+        }
       }
-    });
+    );
     return () => {
-      modals.off(ModalEvents.MinimizeModal, () => {
-      });
-      modals.off(ModalEvents.RestoreModal, () => {
-      });
+      unsubscribeMinimize();
+      unsubscribeRestore();
     };
-  }, [id]);
+  }, [id, subscribe]);
   useImperativeHandle(ref, () => {
     return draggableRef.current;
   });
@@ -104,7 +117,7 @@ const ModalRenderer = ({
       "aria-hidden": isModalMinimized,
       ref: draggableRef,
       onMouseDown: () => {
-        modals.emit(ModalEvents.ModalVisibilityChanged, { id });
+        focus(id);
       }
     },
     /* @__PURE__ */ React.createElement(

package/esm/TaskBar/TaskBar.mjs

@@ -4,16 +4,27 @@ import { Clock } from "./Clock.mjs";
 import { WindowButton } from "./WindowButton.mjs";
 import { Logo } from "@react95/icons";
 import { truncate } from "./TaskBar.css.mjs";
-import { modals, ModalEvents } from "../shared/events.mjs";
+import { useModal } from "../shared/use-modal.mjs";
+import { ModalEvents } from "../shared/modal-types.mjs";
 const TaskBar = forwardRef(
   ({ list, className }, ref) => {
     const [showList, toggleShowList] = useState(false);
     const [activeStart, toggleActiveStart] = useState(false);
     const [modalWindows, setModalWindows] = React.useState([]);
     const [activeWindow, setActiveWindow] = useState();
+    const { minimize, restore, focus, subscribe } = useModal();
     useEffect(() => {
       const addModal = (window) => {
-        setModalWindows((prevModals) => [...prevModals, window]);
+        if (!window.id) {
+          console.warn("Modal added without ID");
+          return;
+        }
+        setModalWindows((prevModals) => {
+          if (prevModals.some((modal) => modal.id === window.id)) {
+            return prevModals;
+          }
+          return [...prevModals, window];
+        });
       };
       const removeModal = (data) => {
         setModalWindows((prevModals) => {
@@ -21,10 +32,8 @@ const TaskBar = forwardRef(
             (modal) => modal.id !== data.id
           );
           const lastModal = filteredModals.at(-1);
-          if (!activeWindow && lastModal) {
-            modals.emit(ModalEvents.ModalVisibilityChanged, {
-              id: lastModal == null ? void 0 : lastModal.id
-            });
+          if (activeWindow === data.id && lastModal) {
+            focus(lastModal.id);
           }
           return filteredModals;
         });
@@ -32,15 +41,18 @@ const TaskBar = forwardRef(
       const updateVisibleModal = ({ id }) => {
         setActiveWindow(id);
       };
-      modals.on(ModalEvents.AddModal, addModal);
-      modals.on(ModalEvents.RemoveModal, removeModal);
-      modals.on(ModalEvents.ModalVisibilityChanged, updateVisibleModal);
+      const unsubscribeAdd = subscribe(ModalEvents.AddModal, addModal);
+      const unsubscribeRemove = subscribe(ModalEvents.RemoveModal, removeModal);
+      const unsubscribeVisibility = subscribe(
+        ModalEvents.ModalVisibilityChanged,
+        updateVisibleModal
+      );
       return () => {
-        modals.off(ModalEvents.AddModal, addModal);
-        modals.off(ModalEvents.RemoveModal, removeModal);
-        modals.off(ModalEvents.ModalVisibilityChanged, updateVisibleModal);
+        unsubscribeAdd();
+        unsubscribeRemove();
+        unsubscribeVisibility();
       };
-    }, []);
+    }, [activeWindow, subscribe, focus]);
     return /* @__PURE__ */ React.createElement(
       Frame,
       {
@@ -93,11 +105,11 @@ const TaskBar = forwardRef(
             active: id === activeWindow,
             onClick: () => {
               if (id === activeWindow) {
-                modals.emit(ModalEvents.MinimizeModal, { id });
-                setActiveWindow("Minimize");
+                minimize(id);
+                setActiveWindow(void 0);
               } else {
-                modals.emit(ModalEvents.RestoreModal, { id });
-                modals.emit(ModalEvents.ModalVisibilityChanged, { id });
+                restore(id);
+                focus(id);
               }
             },
             small: false

package/esm/index.mjs

@@ -22,6 +22,8 @@ import { TitleBar } from "./TitleBar/TitleBar.mjs";
 import { Video } from "./Video/Video.mjs";
 import { contract } from "./themes/contract.css.mjs";
 import * as index from "./themes/tokens/index.mjs";
+import { ModalEvents } from "./shared/modal-types.mjs";
+import { useModal } from "./shared/use-modal.mjs";
 export {
   Alert,
   Avatar,
@@ -34,6 +36,7 @@ export {
   Input,
   List,
   Modal,
+  ModalEvents,
   ProgressBar,
   RadioButton,
   Range,
@@ -46,5 +49,6 @@ export {
   Tree,
   Video,
   contract,
-  index as tokens
+  index as tokens,
+  useModal
 };

package/esm/shared/emitter.mjs

@@ -0,0 +1,35 @@
+class Emitter {
+  constructor() {
+    this.listeners = {};
+  }
+  on(eventName, callback) {
+    var _a;
+    if (!this.listeners[eventName]) {
+      this.listeners[eventName] = [];
+    }
+    (_a = this.listeners[eventName]) == null ? void 0 : _a.push(callback);
+  }
+  off(eventName, callback) {
+    var _a;
+    if (this.listeners[eventName]) {
+      this.listeners[eventName] = (_a = this.listeners[eventName]) == null ? void 0 : _a.filter(
+        (cb) => cb !== callback
+      );
+    }
+  }
+  emit(eventName, data) {
+    var _a;
+    if (this.listeners[eventName]) {
+      (_a = this.listeners[eventName]) == null ? void 0 : _a.forEach((callback) => {
+        try {
+          callback(data);
+        } catch (error) {
+          console.error(`Error in event listener for ${eventName}:`, error);
+        }
+      });
+    }
+  }
+}
+export {
+  Emitter
+};

package/esm/shared/modal-controller.mjs

@@ -0,0 +1,5 @@
+import { Emitter } from "./emitter.mjs";
+const modals = new Emitter();
+export {
+  modals
+};

package/esm/shared/modal-types.mjs

@@ -0,0 +1,12 @@
+var ModalEvents = /* @__PURE__ */ ((ModalEvents2) => {
+  ModalEvents2["AddModal"] = "add-modal";
+  ModalEvents2["RemoveModal"] = "remove-modal";
+  ModalEvents2["ModalVisibilityChanged"] = "modal-visibility-changed";
+  ModalEvents2["MinimizeModal"] = "minimize-modal";
+  ModalEvents2["RestoreModal"] = "restore-modal";
+  ModalEvents2["FocusModal"] = "focus-modal";
+  return ModalEvents2;
+})(ModalEvents || {});
+export {
+  ModalEvents
+};

package/esm/shared/use-modal.mjs

@@ -0,0 +1,39 @@
+import { useCallback } from "react";
+import { modals } from "./modal-controller.mjs";
+import { ModalEvents } from "./modal-types.mjs";
+const useModal = () => {
+  const add = useCallback((modal) => {
+    modals.emit(ModalEvents.AddModal, modal);
+  }, []);
+  const remove = useCallback((id) => {
+    modals.emit(ModalEvents.RemoveModal, { id });
+  }, []);
+  const minimize = useCallback((id) => {
+    modals.emit(ModalEvents.MinimizeModal, { id });
+  }, []);
+  const restore = useCallback((id) => {
+    modals.emit(ModalEvents.RestoreModal, { id });
+  }, []);
+  const focus = useCallback((id) => {
+    modals.emit(ModalEvents.ModalVisibilityChanged, { id });
+  }, []);
+  const toggle = useCallback((id, isActive) => {
+    if (isActive) {
+      modals.emit(ModalEvents.MinimizeModal, { id });
+    } else {
+      modals.emit(ModalEvents.RestoreModal, { id });
+      modals.emit(ModalEvents.ModalVisibilityChanged, { id });
+    }
+  }, []);
+  const subscribe = useCallback(
+    (event, callback) => {
+      modals.on(event, callback);
+      return () => modals.off(event, callback);
+    },
+    []
+  );
+  return { add, remove, minimize, restore, focus, toggle, subscribe };
+};
+export {
+  useModal
+};

package/esm/themes/contract.css.mjs

@@ -1,3 +1,4 @@
+import "./contract.css.ts.vanilla.css.mjs";
 var contract = { space: { "0": "var(--r95-space-0)", "1": "var(--r95-space-1)", "2": "var(--r95-space-2)", "3": "var(--r95-space-3)", "4": "var(--r95-space-4)", "5": "var(--r95-space-5)", "6": "var(--r95-space-6)", "7": "var(--r95-space-7)", "8": "var(--r95-space-8)", "9": "var(--r95-space-9)", "10": "var(--r95-space-10)", "11": "var(--r95-space-11)", "12": "var(--r95-space-12)", "13": "var(--r95-space-13)", "14": "var(--r95-space-14)", "15": "var(--r95-space-15)", "16": "var(--r95-space-16)", "17": "var(--r95-space-17)", "18": "var(--r95-space-18)", "19": "var(--r95-space-19)", "20": "var(--r95-space-20)" }, colors: { anchor: "var(--r95-color-anchor)", anchorVisited: "var(--r95-color-anchorVisited)", borderDark: "var(--r95-color-borderDark)", borderDarkest: "var(--r95-color-borderDarkest)", borderLight: "var(--r95-color-borderLight)", borderLighter: "var(--r95-color-borderLighter)", borderLightest: "var(--r95-color-borderLightest)", canvas: "var(--r95-color-canvas)", canvasText: "var(--r95-color-canvasText)", headerBackground: "var(--r95-color-headerBackground)", headerNotActiveBackground: "var(--r95-color-headerNotActiveBackground)", headerNotActiveText: "var(--r95-color-headerNotActiveText)", headerText: "var(--r95-color-headerText)", material: "var(--r95-color-material)", materialText: "var(--r95-color-materialText)", materialTextDisabled: "var(--r95-color-materialTextDisabled)", materialTextDisabledShadow: "var(--r95-color-materialTextDisabledShadow)", materialTextInvert: "var(--r95-color-materialTextInvert)", progress: "var(--r95-color-progress)", inputBackground: "var(--r95-color-inputBackground)", inputBackgroundDisabled: "var(--r95-color-inputBackgroundDisabled)" }, zIndices: { modal: "var(--r95-zIndex-modal)", tooltip: "var(--r95-zIndex-tooltip)", taskbar: "var(--r95-zIndex-taskbar)" }, shadows: { out: "var(--r95-shadow-out)", "in": "var(--r95-shadow-in)", input: "var(--r95-shadow-input)" } };
 export {
   contract

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react95/core",
-  "version": "9.5.2",
+  "version": "9.6.0-alpha.0",
   "description": "Windows 95 styleguide",
   "main": "cjs/index.cjs",
   "type": "module",
@@ -195,7 +195,7 @@
     "url": "https://github.com/React95/React95/issues"
   },
   "homepage": "https://github.com/React95/React95#readme",
-  "gitHead": "8661cec1a88979b849d605a7d5533a8e1a0e5d1f",
+  "gitHead": "35643bfccf1cb19b59ed30bc1e91944b2aeb14b8",
   "module": "esm/index.mjs",
   "private": false,
   "types": "types/index.d.ts"

package/types/Modal/Modal.d.ts

@@ -17,6 +17,7 @@ export type ModalDefaultPosition = {
 };
 type TitleBarOptions = typeof TitleBar.Close | typeof TitleBar.Help | typeof TitleBar.Maximize | typeof TitleBar.Minimize | typeof TitleBar.Restore;
 export type ModalProps = {
+    id?: string;
     buttons?: Array<ModalButtons>;
     menu?: Array<ModalMenu>;
     dragOptions?: Omit<DragOptions, 'handle'>;
@@ -2391,7 +2392,7 @@ declare const ModalContent: (props: {
     };
 }> & React.RefAttributes<HTMLDivElement>) => React.ReactNode;
 declare const ModalMinimize: OptionReturnType;
-declare const ModalRenderer: ({ hasWindowButton: hasButton, buttons, buttonsAlignment, children, icon, menu, title, dragOptions, titleBarOptions, className, ...rest }: ModalProps, ref: Ref<HTMLDivElement | null>) => React.JSX.Element;
+declare const ModalRenderer: ({ id: providedId, hasWindowButton: hasButton, buttons, buttonsAlignment, children, icon, menu, title, dragOptions, titleBarOptions, className, ...rest }: ModalProps, ref: Ref<HTMLDivElement | null>) => React.JSX.Element;
 export declare const Modal: ModalProps & typeof ModalRenderer & {
     Content: typeof ModalContent;
     Minimize: typeof ModalMinimize;

package/types/index.d.ts

@@ -22,4 +22,5 @@ import { TitleBar } from './TitleBar/TitleBar';
 import { Video } from './Video/Video';
 import { contract } from './themes/contract.css';
 import * as tokens from './themes/tokens';
-export { Alert, Avatar, Button, Checkbox, Cursor, Dropdown, Fieldset, Frame, Input, List, Modal, ProgressBar, RadioButton, Range, Tab, Tabs, TaskBar, TextArea, Tree, Tooltip, TitleBar, Video, contract, tokens, };
+import { ModalEvents, useModal } from './shared/events';
+export { Alert, Avatar, Button, Checkbox, Cursor, Dropdown, Fieldset, Frame, Input, List, Modal, ProgressBar, RadioButton, Range, Tab, Tabs, TaskBar, TextArea, Tree, Tooltip, TitleBar, Video, contract, tokens, ModalEvents, useModal, };

package/types/shared/emitter.d.ts

@@ -0,0 +1,6 @@
+export declare class Emitter<U extends string, T> {
+    private listeners;
+    on(eventName: U, callback: (data: Partial<T>) => void): void;
+    off(eventName: U, callback: (data: Partial<T>) => void): void;
+    emit(eventName: U, data: Partial<T>): void;
+}

package/types/shared/events.d.ts

@@ -1,21 +1,4 @@
-import { ReactElement } from 'react';
-export declare class Emitter<U extends string, T> {
-    private listeners;
-    on(eventName: U, callback: (data: T) => void): void;
-    off(eventName: U, callback: (data: T) => void): void;
-    emit(eventName: U, data: Partial<T>): void;
-}
-export declare enum ModalEvents {
-    AddModal = "add-modal",
-    RemoveModal = "remove-modal",
-    ModalVisibilityChanged = "modal-visibility-changed",
-    MinimizeModal = "minimize-modal",
-    RestoreModal = "restore-modal"
-}
-export interface ModalWindow {
-    icon?: ReactElement;
-    title: string;
-    hasButton: boolean;
-    id: string;
-}
-export declare const modals: Emitter<ModalEvents, ModalWindow>;
+export { Emitter } from './emitter';
+export { ModalEvents, type ModalWindow } from './modal-types';
+export { modals, modalController } from './modal-controller';
+export { useModal } from './use-modal';

package/types/shared/modal-controller.d.ts

@@ -0,0 +1,11 @@
+import { Emitter } from './emitter';
+import { ModalEvents, ModalWindow } from './modal-types';
+export declare const modals: Emitter<ModalEvents, ModalWindow>;
+export declare const modalController: {
+    add: (modal: ModalWindow) => void;
+    remove: (id: string) => void;
+    minimize: (id: string) => void;
+    restore: (id: string) => void;
+    focus: (id: string) => void;
+    toggle: (id: string, isActive: boolean) => void;
+};

package/types/shared/modal-types.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+export declare enum ModalEvents {
+    AddModal = "add-modal",
+    RemoveModal = "remove-modal",
+    ModalVisibilityChanged = "modal-visibility-changed",
+    MinimizeModal = "minimize-modal",
+    RestoreModal = "restore-modal",
+    FocusModal = "focus-modal"
+}
+export interface ModalWindow {
+    icon?: ReactElement;
+    title: string;
+    hasButton: boolean;
+    id: string;
+}

package/types/shared/use-modal.d.ts

@@ -0,0 +1,14 @@
+import { ModalEvents, ModalWindow } from './modal-types';
+/**
+ * Hook for controlling and listening to modal events
+ * @returns Object with methods to control modals and subscribe to events
+ */
+export declare const useModal: () => {
+    add: (modal: ModalWindow) => void;
+    remove: (id: string) => void;
+    minimize: (id: string) => void;
+    restore: (id: string) => void;
+    focus: (id: string) => void;
+    toggle: (id: string, isActive: boolean) => void;
+    subscribe: (event: ModalEvents, callback: (data: Partial<ModalWindow>) => void) => () => void;
+};

package/cjs/shared/events.cjs

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-class Emitter {
-  constructor() {
-    this.listeners = {};
-  }
-  on(eventName, callback) {
-    if (!this.listeners[eventName]) {
-      this.listeners[eventName] = [];
-    }
-    this.listeners[eventName].push(callback);
-  }
-  off(eventName, callback) {
-    if (this.listeners[eventName]) {
-      this.listeners[eventName] = this.listeners[eventName].filter(
-        (cb) => cb !== callback
-      );
-    }
-  }
-  emit(eventName, data) {
-    if (this.listeners[eventName]) {
-      this.listeners[eventName].forEach((callback) => callback(data));
-    }
-  }
-}
-var ModalEvents = /* @__PURE__ */ ((ModalEvents2) => {
-  ModalEvents2["AddModal"] = "add-modal";
-  ModalEvents2["RemoveModal"] = "remove-modal";
-  ModalEvents2["ModalVisibilityChanged"] = "modal-visibility-changed";
-  ModalEvents2["MinimizeModal"] = "minimize-modal";
-  ModalEvents2["RestoreModal"] = "restore-modal";
-  return ModalEvents2;
-})(ModalEvents || {});
-const modals = new Emitter();
-exports.Emitter = Emitter;
-exports.ModalEvents = ModalEvents;
-exports.modals = modals;

package/esm/shared/events.mjs

@@ -1,37 +0,0 @@
-class Emitter {
-  constructor() {
-    this.listeners = {};
-  }
-  on(eventName, callback) {
-    if (!this.listeners[eventName]) {
-      this.listeners[eventName] = [];
-    }
-    this.listeners[eventName].push(callback);
-  }
-  off(eventName, callback) {
-    if (this.listeners[eventName]) {
-      this.listeners[eventName] = this.listeners[eventName].filter(
-        (cb) => cb !== callback
-      );
-    }
-  }
-  emit(eventName, data) {
-    if (this.listeners[eventName]) {
-      this.listeners[eventName].forEach((callback) => callback(data));
-    }
-  }
-}
-var ModalEvents = /* @__PURE__ */ ((ModalEvents2) => {
-  ModalEvents2["AddModal"] = "add-modal";
-  ModalEvents2["RemoveModal"] = "remove-modal";
-  ModalEvents2["ModalVisibilityChanged"] = "modal-visibility-changed";
-  ModalEvents2["MinimizeModal"] = "minimize-modal";
-  ModalEvents2["RestoreModal"] = "restore-modal";
-  return ModalEvents2;
-})(ModalEvents || {});
-const modals = new Emitter();
-export {
-  Emitter,
-  ModalEvents,
-  modals
-};