ywana-core8 0.2.16 → 0.2.18

package/dist/index.modern.js

@@ -32418,7 +32418,7 @@ const Window = ({
     isResizing && "window--resizing",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(WindowInstanceProvider, { windowId: id }, /* @__PURE__ */ React.createElement(
     "div",
     {
       ref: windowRef,
@@ -32514,8 +32514,224 @@ const Window = ({
         className: "window__resize-handle window__resize-handle--sw",
         onMouseDown: (e) => handleResizeStart(e, "sw")
       }
+    )),
+    /* @__PURE__ */ React.createElement(FloatingElementsRenderer, null)
+  ));
+};
+const WindowInstanceContext = createContext(null);
+const WindowInstanceProvider = ({ windowId, children }) => {
+  const [dialogs, setDialogs] = useState([]);
+  const [notifications, setNotifications] = useState([]);
+  const [tooltips, setTooltips] = useState([]);
+  const [contextMenus, setContextMenus] = useState([]);
+  const [overlays, setOverlays] = useState([]);
+  const idCounterRef = useRef(0);
+  const generateId = useCallback(() => {
+    return `${windowId}-element-${++idCounterRef.current}`;
+  }, [windowId]);
+  const showDialog = 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 = useCallback((id) => {
+    setDialogs((prev) => prev.filter((dialog) => dialog.id !== id));
+  }, []);
+  const hideAllDialogs = useCallback(() => {
+    setDialogs([]);
+  }, []);
+  const showNotification = 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 = useCallback((id) => {
+    setNotifications((prev) => prev.filter((notification) => notification.id !== id));
+  }, []);
+  const hideAllNotifications = useCallback(() => {
+    setNotifications([]);
+  }, []);
+  const showTooltip = useCallback((config) => {
+    const id = generateId();
+    const tooltip = { id, type: "tooltip", ...config, createdAt: Date.now() };
+    setTooltips((prev) => [...prev, tooltip]);
+    return id;
+  }, [generateId]);
+  const hideTooltip = useCallback((id) => {
+    setTooltips((prev) => prev.filter((tooltip) => tooltip.id !== id));
+  }, []);
+  const hideAllTooltips = useCallback(() => {
+    setTooltips([]);
+  }, []);
+  const showContextMenu = 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 = useCallback((id) => {
+    setContextMenus((prev) => prev.filter((menu) => menu.id !== id));
+  }, []);
+  const hideAllContextMenus = useCallback(() => {
+    setContextMenus([]);
+  }, []);
+  const showOverlay = 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 = useCallback((id) => {
+    setOverlays((prev) => prev.filter((overlay) => overlay.id !== id));
+  }, []);
+  const hideAllOverlays = useCallback(() => {
+    setOverlays([]);
+  }, []);
+  const clearAll = 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 = 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);