ywana-core8 0.2.16 → 0.2.18

package/dist/index.css

@@ -15876,6 +15876,7 @@ li.selected,
     overflow: hidden;
     user-select: none;
     pointer-events: auto; /* Ensure windows are clickable */
+    position: relative; /* For floating elements positioning */
 }
 
 .window:focus-within {
@@ -16121,6 +16122,236 @@ li.selected,
     user-select: none !important;
 }
 
+/* Window Instance Context - Floating Elements */
+.window-floating-elements {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    z-index: 1000;
+}
+
+/* Dialog Styles */
+.window-dialog {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: auto;
+    z-index: 1002;
+}
+
+.window-dialog__content {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    min-width: 300px;
+    max-width: 80%;
+    max-height: 80%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.window-dialog__header {
+    padding: 16px 20px;
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #f8f9fa;
+}
+
+.window-dialog__title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+}
+
+.window-dialog__close {
+    background: none;
+    border: none;
+    font-size: 18px;
+    cursor: pointer;
+    color: #666;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+}
+
+.window-dialog__close:hover {
+    background: rgba(0, 0, 0, 0.1);
+    color: #333;
+}
+
+.window-dialog__body {
+    padding: 20px;
+    flex: 1;
+    overflow: auto;
+}
+
+.window-dialog__footer {
+    padding: 16px 20px;
+    border-top: 1px solid #e0e0e0;
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    background: #f8f9fa;
+}
+
+/* Notification Styles */
+.window-notification {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 12px 16px;
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    max-width: 300px;
+    pointer-events: auto;
+    z-index: 1003;
+    border-left: 4px solid #007bff;
+    animation: slideInRight 0.3s ease-out;
+}
+
+.window-notification--success { border-left-color: #28a745; }
+.window-notification--warning { border-left-color: #ffc107; }
+.window-notification--error { border-left-color: #dc3545; }
+.window-notification--info { border-left-color: #17a2b8; }
+
+.window-notification__content {
+    flex: 1;
+    min-width: 0;
+}
+
+.window-notification__title {
+    font-weight: 600;
+    font-size: 14px;
+    margin-bottom: 4px;
+    color: #333;
+}
+
+.window-notification__message {
+    font-size: 13px;
+    color: #666;
+    line-height: 1.4;
+}
+
+.window-notification__close {
+    background: none;
+    border: none;
+    font-size: 16px;
+    cursor: pointer;
+    color: #999;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    flex-shrink: 0;
+}
+
+.window-notification__close:hover {
+    background: rgba(0, 0, 0, 0.1);
+    color: #666;
+}
+
+/* Tooltip Styles */
+.window-tooltip {
+    position: absolute;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    border-radius: 6px;
+    padding: 8px 12px;
+    font-size: 12px;
+    max-width: 200px;
+    pointer-events: auto;
+    z-index: 1005;
+    animation: fadeIn 0.15s ease-out;
+}
+
+/* Context Menu Styles */
+.window-context-menu {
+    position: absolute;
+    background: white;
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    border: 1px solid #e0e0e0;
+    padding: 4px 0;
+    min-width: 150px;
+    pointer-events: auto;
+    z-index: 1004;
+    animation: fadeIn 0.1s ease-out;
+}
+
+.window-context-menu__item {
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-size: 13px;
+    color: #333;
+    transition: background-color 0.15s ease;
+}
+
+.window-context-menu__item:hover {
+    background: #f8f9fa;
+}
+
+/* Overlay Styles */
+.window-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: auto;
+    z-index: 1001;
+    animation: fadeIn 0.2s ease-out;
+}
+
+.window-overlay__content {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    max-width: 90%;
+    max-height: 90%;
+    overflow: auto;
+    position: relative;
+}
+
+/* Animations */
+@keyframes slideInRight {
+    from { transform: translateX(100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
 /* Window Resize Handles */
 .window__resize-handle {
     position: absolute;

package/dist/index.js

@@ -32420,7 +32420,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,
@@ -32516,8 +32516,224 @@ const Window = ({
         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);