ywana-core8 0.2.17 → 0.2.18

package/dist/index.umd.js

@@ -32421,7 +32421,7 @@ const rows = [
       isResizing && "window--resizing",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(WindowInstanceProvider, { windowId: id }, /* @__PURE__ */ React.createElement(
       "div",
       {
         ref: windowRef,
@@ -32517,8 +32517,224 @@ const rows = [
           className: "window__resize-handle window__resize-handle--sw",
           onMouseDown: (e) => handleResizeStart(e, "sw")
         }
+      )),
+      /* @__PURE__ */ React.createElement(FloatingElementsRenderer, null)
+    ));
+  };
+  const WindowInstanceContext = React.createContext(null);
+  const WindowInstanceProvider = ({ windowId, children }) => {
+    const [dialogs, setDialogs] = React.useState([]);
+    const [notifications, setNotifications] = React.useState([]);
+    const [tooltips, setTooltips] = React.useState([]);
+    const [contextMenus, setContextMenus] = React.useState([]);
+    const [overlays, setOverlays] = React.useState([]);
+    const idCounterRef = React.useRef(0);
+    const generateId = React.useCallback(() => {
+      return `${windowId}-element-${++idCounterRef.current}`;
+    }, [windowId]);
+    const showDialog = React.useCallback((config) => {
+      const id = generateId();
+      const dialog = {
+        id,
+        type: "dialog",
+        ...config,
+        createdAt: Date.now(),
+        onClose: () => hideDialog(id)
+      };
+      setDialogs((prev) => [...prev, dialog]);
+      return id;
+    }, [generateId]);
+    const hideDialog = React.useCallback((id) => {
+      setDialogs((prev) => prev.filter((dialog) => dialog.id !== id));
+    }, []);
+    const hideAllDialogs = React.useCallback(() => {
+      setDialogs([]);
+    }, []);
+    const showNotification = React.useCallback((config) => {
+      const id = generateId();
+      const notification = {
+        id,
+        type: "notification",
+        duration: 5e3,
+        ...config,
+        createdAt: Date.now(),
+        onClose: () => hideNotification(id)
+      };
+      setNotifications((prev) => [...prev, notification]);
+      if (notification.duration > 0) {
+        setTimeout(() => hideNotification(id), notification.duration);
+      }
+      return id;
+    }, [generateId]);
+    const hideNotification = React.useCallback((id) => {
+      setNotifications((prev) => prev.filter((notification) => notification.id !== id));
+    }, []);
+    const hideAllNotifications = React.useCallback(() => {
+      setNotifications([]);
+    }, []);
+    const showTooltip = React.useCallback((config) => {
+      const id = generateId();
+      const tooltip = { id, type: "tooltip", ...config, createdAt: Date.now() };
+      setTooltips((prev) => [...prev, tooltip]);
+      return id;
+    }, [generateId]);
+    const hideTooltip = React.useCallback((id) => {
+      setTooltips((prev) => prev.filter((tooltip) => tooltip.id !== id));
+    }, []);
+    const hideAllTooltips = React.useCallback(() => {
+      setTooltips([]);
+    }, []);
+    const showContextMenu = React.useCallback((config) => {
+      setContextMenus([]);
+      const id = generateId();
+      const contextMenu = {
+        id,
+        type: "contextMenu",
+        ...config,
+        createdAt: Date.now(),
+        onClose: () => hideContextMenu(id)
+      };
+      setContextMenus([contextMenu]);
+      return id;
+    }, [generateId]);
+    const hideContextMenu = React.useCallback((id) => {
+      setContextMenus((prev) => prev.filter((menu) => menu.id !== id));
+    }, []);
+    const hideAllContextMenus = React.useCallback(() => {
+      setContextMenus([]);
+    }, []);
+    const showOverlay = React.useCallback((config) => {
+      const id = generateId();
+      const overlay = {
+        id,
+        type: "overlay",
+        ...config,
+        createdAt: Date.now(),
+        onClose: () => hideOverlay(id)
+      };
+      setOverlays((prev) => [...prev, overlay]);
+      return id;
+    }, [generateId]);
+    const hideOverlay = React.useCallback((id) => {
+      setOverlays((prev) => prev.filter((overlay) => overlay.id !== id));
+    }, []);
+    const hideAllOverlays = React.useCallback(() => {
+      setOverlays([]);
+    }, []);
+    const clearAll = React.useCallback(() => {
+      setDialogs([]);
+      setNotifications([]);
+      setTooltips([]);
+      setContextMenus([]);
+      setOverlays([]);
+    }, []);
+    const value = {
+      windowId,
+      dialogs,
+      notifications,
+      tooltips,
+      contextMenus,
+      overlays,
+      showDialog,
+      hideDialog,
+      hideAllDialogs,
+      showNotification,
+      hideNotification,
+      hideAllNotifications,
+      showTooltip,
+      hideTooltip,
+      hideAllTooltips,
+      showContextMenu,
+      hideContextMenu,
+      hideAllContextMenus,
+      showOverlay,
+      hideOverlay,
+      hideAllOverlays,
+      clearAll,
+      generateId
+    };
+    return /* @__PURE__ */ React.createElement(WindowInstanceContext.Provider, { value }, children);
+  };
+  const useWindowInstance = () => {
+    const context = React.useContext(WindowInstanceContext);
+    if (!context) {
+      throw new Error("useWindowInstance must be used within a WindowInstanceProvider");
+    }
+    return context;
+  };
+  const FloatingElementsRenderer = () => {
+    const { dialogs, notifications, tooltips, contextMenus, overlays } = useWindowInstance();
+    return /* @__PURE__ */ React.createElement("div", { className: "window-floating-elements" }, overlays.map((overlay) => /* @__PURE__ */ React.createElement("div", { key: overlay.id, className: "window-overlay" }, /* @__PURE__ */ React.createElement("div", { className: "window-overlay__content" }, overlay.content, overlay.showCloseButton !== false && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "window-dialog__close",
+        onClick: () => overlay.onClose && overlay.onClose(),
+        style: { position: "absolute", top: "8px", right: "8px" }
+      },
+      "×"
+    )))), dialogs.map((dialog) => /* @__PURE__ */ React.createElement("div", { key: dialog.id, className: "window-dialog" }, /* @__PURE__ */ React.createElement("div", { className: "window-dialog__content" }, dialog.title && /* @__PURE__ */ React.createElement("div", { className: "window-dialog__header" }, /* @__PURE__ */ React.createElement("h3", { className: "window-dialog__title" }, dialog.title), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "window-dialog__close",
+        onClick: () => dialog.onClose && dialog.onClose()
+      },
+      "×"
+    )), /* @__PURE__ */ React.createElement("div", { className: "window-dialog__body" }, dialog.content), dialog.actions && /* @__PURE__ */ React.createElement("div", { className: "window-dialog__footer" }, dialog.actions)))), notifications.map((notification) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: notification.id,
+        className: `window-notification window-notification--${notification.type || "info"}`,
+        style: {
+          top: `${16 + notifications.indexOf(notification) * 80}px`
+        }
+      },
+      notification.icon && /* @__PURE__ */ React.createElement("div", { style: { fontSize: "18px", flexShrink: 0 } }, notification.icon),
+      /* @__PURE__ */ React.createElement("div", { className: "window-notification__content" }, notification.title && /* @__PURE__ */ React.createElement("div", { className: "window-notification__title" }, notification.title), /* @__PURE__ */ React.createElement("div", { className: "window-notification__message" }, notification.message)),
+      /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          className: "window-notification__close",
+          onClick: () => notification.onClose && notification.onClose()
+        },
+        "×"
+      )
+    )), tooltips.map((tooltip) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: tooltip.id,
+        className: "window-tooltip",
+        style: {
+          left: tooltip.x,
+          top: tooltip.y,
+          transform: tooltip.position === "top" ? "translateX(-50%) translateY(-100%)" : "translateX(-50%)"
+        }
+      },
+      tooltip.text
+    )), contextMenus.map((menu) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: menu.id,
+        className: "window-context-menu",
+        style: {
+          left: menu.x,
+          top: menu.y
+        }
+      },
+      menu.items && menu.items.map((item, index) => /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: index,
+          className: "window-context-menu__item",
+          onClick: () => {
+            item.onClick && item.onClick();
+            menu.onClose && menu.onClose();
+          }
+        },
+        item.icon && /* @__PURE__ */ React.createElement("span", null, item.icon),
+        /* @__PURE__ */ React.createElement("span", null, item.label),
+        item.shortcut && /* @__PURE__ */ React.createElement("span", { style: { marginLeft: "auto", fontSize: "11px", color: "#999" } }, item.shortcut)
       ))
-    );
+    )));
   };
   const ApplicationMenu = ({ isOpen, onClose }) => {
     console.log("ApplicationMenu render - isOpen:", isOpen, "onClose:", onClose);