ywana-core8 0.2.3 → 0.2.5

package/dist/index.umd.js

@@ -32253,6 +32253,386 @@ const rows = [
       statusBar && /* @__PURE__ */ React.createElement("div", { className: "window__status-bar" }, statusBar)
     );
   };
+  const ApplicationMenu = ({ isOpen, onClose }) => {
+    const appManager = useAppManager();
+    const [searchTerm, setSearchTerm] = React.useState("");
+    const [selectedCategory, setSelectedCategory] = React.useState("all");
+    const [apps, setApps] = React.useState([]);
+    const [categories, setCategories] = React.useState([]);
+    const searchInputRef = React.useRef(null);
+    const { createWindow } = useWindows();
+    React.useEffect(() => {
+      const loadData = () => {
+        setApps(appManager.getAllApps());
+        setCategories(appManager.getAllCategories());
+      };
+      loadData();
+      appManager.addListener(loadData);
+      return () => {
+        appManager.removeListener(loadData);
+      };
+    }, [appManager]);
+    React.useEffect(() => {
+      if (isOpen && searchInputRef.current) {
+        setTimeout(() => {
+          searchInputRef.current.focus();
+        }, 100);
+      }
+    }, [isOpen]);
+    React.useEffect(() => {
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape" && isOpen) {
+          onClose();
+        }
+      };
+      if (isOpen) {
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+      }
+    }, [isOpen, onClose]);
+    const filteredApps = apps.filter((app) => {
+      const matchesSearch = searchTerm === "" || app.name.toLowerCase().includes(searchTerm.toLowerCase()) || app.description.toLowerCase().includes(searchTerm.toLowerCase());
+      const matchesCategory = selectedCategory === "all" || app.category.toLowerCase() === selectedCategory.toLowerCase();
+      return matchesSearch && matchesCategory;
+    });
+    const groupedApps = filteredApps.reduce((groups, app) => {
+      const category = app.category;
+      if (!groups[category]) {
+        groups[category] = [];
+      }
+      groups[category].push(app);
+      return groups;
+    }, {});
+    const handleLaunchApp = (app) => {
+      createWindow({
+        id: `${app.id}-${Date.now()}`,
+        title: app.name,
+        icon: app.icon,
+        size: app.size,
+        toolbar: app.toolbar,
+        statusBar: app.statusBar,
+        content: app.component || /* @__PURE__ */ React.createElement("div", { style: { padding: "20px", textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: "48px", marginBottom: "16px" } }, app.icon), /* @__PURE__ */ React.createElement("h2", null, app.name), /* @__PURE__ */ React.createElement("p", { style: { color: "#666", marginBottom: "20px" } }, app.description), /* @__PURE__ */ React.createElement("p", { style: { fontSize: "14px", color: "#999" } }, "This is a placeholder for the ", app.name, " application."))
+      });
+      onClose();
+    };
+    const handleCategorySelect = (categoryId) => {
+      setSelectedCategory(categoryId);
+      setSearchTerm("");
+    };
+    if (!isOpen) return null;
+    return /* @__PURE__ */ React.createElement("div", { className: "application-menu-overlay", onClick: onClose }, /* @__PURE__ */ React.createElement("div", { className: "application-menu", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement("div", { className: "application-menu__header" }, /* @__PURE__ */ React.createElement("h2", null, "Applications"), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "application-menu__close",
+        onClick: onClose,
+        title: "Close menu"
+      },
+      "×"
+    )), /* @__PURE__ */ React.createElement("div", { className: "application-menu__search" }, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        ref: searchInputRef,
+        type: "text",
+        placeholder: "Search applications...",
+        value: searchTerm,
+        onChange: (e) => setSearchTerm(e.target.value),
+        className: "application-menu__search-input"
+      }
+    )), /* @__PURE__ */ React.createElement("div", { className: "application-menu__categories" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: `application-menu__category ${selectedCategory === "all" ? "active" : ""}`,
+        onClick: () => handleCategorySelect("all")
+      },
+      /* @__PURE__ */ React.createElement("span", { className: "category-icon" }, "📱"),
+      "All Apps"
+    ), categories.map((category) => /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        key: category.id,
+        className: `application-menu__category ${selectedCategory === category.id ? "active" : ""}`,
+        onClick: () => handleCategorySelect(category.id)
+      },
+      /* @__PURE__ */ React.createElement("span", { className: "category-icon" }, category.icon),
+      category.name
+    ))), /* @__PURE__ */ React.createElement("div", { className: "application-menu__content" }, searchTerm && /* @__PURE__ */ React.createElement("div", { className: "application-menu__search-results" }, /* @__PURE__ */ React.createElement("h3", null, "Search Results (", filteredApps.length, ")"), /* @__PURE__ */ React.createElement("div", { className: "application-menu__apps-grid" }, filteredApps.map((app) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: app.id,
+        className: "application-menu__app",
+        onClick: () => handleLaunchApp(app),
+        title: app.description
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "app-icon" }, app.icon),
+      /* @__PURE__ */ React.createElement("div", { className: "app-name" }, app.name)
+    )))), !searchTerm && /* @__PURE__ */ React.createElement("div", { className: "application-menu__categories-content" }, Object.entries(groupedApps).map(([categoryName, categoryApps]) => /* @__PURE__ */ React.createElement("div", { key: categoryName, className: "application-menu__category-section" }, /* @__PURE__ */ React.createElement("h3", { className: "category-title" }, categoryName), /* @__PURE__ */ React.createElement("div", { className: "application-menu__apps-grid" }, categoryApps.map((app) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: app.id,
+        className: "application-menu__app",
+        onClick: () => handleLaunchApp(app),
+        title: app.description
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "app-icon" }, app.icon),
+      /* @__PURE__ */ React.createElement("div", { className: "app-name" }, app.name)
+    )))))), filteredApps.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "application-menu__no-results" }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: "48px", marginBottom: "16px" } }, "🔍"), /* @__PURE__ */ React.createElement("h3", null, "No applications found"), /* @__PURE__ */ React.createElement("p", null, "Try adjusting your search or category filter.")))));
+  };
+  class AppManager {
+    constructor() {
+      this.applications = /* @__PURE__ */ new Map();
+      this.categories = /* @__PURE__ */ new Map();
+      this.listeners = /* @__PURE__ */ new Set();
+      this.initializeDefaultApps();
+    }
+    /**
+     * Initialize default applications
+     */
+    initializeDefaultApps() {
+      this.registerApp({
+        id: "file-explorer",
+        name: "File Explorer",
+        description: "Browse and manage files",
+        icon: "📁",
+        category: "System",
+        component: null,
+        // Will be set when registering actual components
+        size: { width: 600, height: 400 },
+        toolbar: null,
+        statusBar: null
+      });
+      this.registerApp({
+        id: "text-editor",
+        name: "Text Editor",
+        description: "Edit text files",
+        icon: "📝",
+        category: "Productivity",
+        component: null,
+        size: { width: 500, height: 350 },
+        toolbar: null,
+        statusBar: null
+      });
+      this.registerApp({
+        id: "calculator",
+        name: "Calculator",
+        description: "Perform calculations",
+        icon: "🧮",
+        category: "Utilities",
+        component: null,
+        size: { width: 300, height: 400 }
+      });
+      this.registerApp({
+        id: "settings",
+        name: "Settings",
+        description: "System configuration",
+        icon: "⚙️",
+        category: "System",
+        component: null,
+        size: { width: 450, height: 300 }
+      });
+      this.registerApp({
+        id: "browser",
+        name: "Web Browser",
+        description: "Browse the internet",
+        icon: "🌐",
+        category: "Internet",
+        component: null,
+        size: { width: 800, height: 500 }
+      });
+      this.registerApp({
+        id: "terminal",
+        name: "Terminal",
+        description: "Command line interface",
+        icon: "💻",
+        category: "Development",
+        component: null,
+        size: { width: 700, height: 400 }
+      });
+      this.registerApp({
+        id: "image-viewer",
+        name: "Image Viewer",
+        description: "View and edit images",
+        icon: "🖼️",
+        category: "Media",
+        component: null,
+        size: { width: 600, height: 500 }
+      });
+      this.registerApp({
+        id: "music-player",
+        name: "Music Player",
+        description: "Play audio files",
+        icon: "🎵",
+        category: "Media",
+        component: null,
+        size: { width: 400, height: 300 }
+      });
+      this.initializeCategories();
+    }
+    /**
+     * Initialize application categories
+     */
+    initializeCategories() {
+      const categoryData = [
+        { id: "system", name: "System", icon: "⚙️", color: "#607d8b" },
+        { id: "productivity", name: "Productivity", icon: "📊", color: "#2196f3" },
+        { id: "utilities", name: "Utilities", icon: "🔧", color: "#ff9800" },
+        { id: "internet", name: "Internet", icon: "🌐", color: "#4caf50" },
+        { id: "development", name: "Development", icon: "💻", color: "#9c27b0" },
+        { id: "media", name: "Media", icon: "🎬", color: "#e91e63" },
+        { id: "games", name: "Games", icon: "🎮", color: "#f44336" }
+      ];
+      categoryData.forEach((category) => {
+        this.categories.set(category.id, category);
+      });
+    }
+    /**
+     * Register a new application
+     */
+    registerApp(appConfig) {
+      const app = {
+        id: appConfig.id,
+        name: appConfig.name,
+        description: appConfig.description || "",
+        icon: appConfig.icon || "📄",
+        category: appConfig.category || "Utilities",
+        component: appConfig.component || null,
+        size: appConfig.size || { width: 600, height: 400 },
+        toolbar: appConfig.toolbar || null,
+        statusBar: appConfig.statusBar || null,
+        ...appConfig
+      };
+      this.applications.set(app.id, app);
+      this.notifyListeners();
+      return app.id;
+    }
+    /**
+     * Unregister an application
+     */
+    unregisterApp(appId) {
+      const removed = this.applications.delete(appId);
+      if (removed) {
+        this.notifyListeners();
+      }
+      return removed;
+    }
+    /**
+     * Get an application by ID
+     */
+    getApp(appId) {
+      return this.applications.get(appId);
+    }
+    /**
+     * Get all applications
+     */
+    getAllApps() {
+      return Array.from(this.applications.values());
+    }
+    /**
+     * Get applications by category
+     */
+    getAppsByCategory(categoryId) {
+      return Array.from(this.applications.values()).filter((app) => app.category.toLowerCase() === categoryId.toLowerCase());
+    }
+    /**
+     * Get all categories
+     */
+    getAllCategories() {
+      return Array.from(this.categories.values());
+    }
+    /**
+     * Get category by ID
+     */
+    getCategory(categoryId) {
+      return this.categories.get(categoryId.toLowerCase());
+    }
+    /**
+     * Search applications
+     */
+    searchApps(query) {
+      const searchTerm = query.toLowerCase();
+      return Array.from(this.applications.values()).filter(
+        (app) => app.name.toLowerCase().includes(searchTerm) || app.description.toLowerCase().includes(searchTerm) || app.category.toLowerCase().includes(searchTerm)
+      );
+    }
+    /**
+     * Add listener for changes
+     */
+    addListener(listener) {
+      this.listeners.add(listener);
+    }
+    /**
+     * Remove listener
+     */
+    removeListener(listener) {
+      this.listeners.delete(listener);
+    }
+    /**
+     * Notify all listeners about changes
+     */
+    notifyListeners() {
+      this.listeners.forEach((listener) => listener(this.getAllApps()));
+    }
+    /**
+     * Get applications grouped by category
+     */
+    getAppsGroupedByCategory() {
+      const grouped = {};
+      const categories = this.getAllCategories();
+      categories.forEach((category) => {
+        grouped[category.id] = {
+          category,
+          apps: []
+        };
+      });
+      this.getAllApps().forEach((app) => {
+        const categoryId = app.category.toLowerCase();
+        if (grouped[categoryId]) {
+          grouped[categoryId].apps.push(app);
+        } else {
+          grouped[categoryId] = {
+            category: { id: categoryId, name: app.category, icon: "📁", color: "#757575" },
+            apps: [app]
+          };
+        }
+      });
+      Object.keys(grouped).forEach((key) => {
+        if (grouped[key].apps.length === 0) {
+          delete grouped[key];
+        }
+      });
+      return grouped;
+    }
+  }
+  const defaultAppManager = new AppManager();
+  const AppContext = React.createContext();
+  const useApplicationMenu = () => {
+    const context = React.useContext(AppContext);
+    if (!context) {
+      throw new Error("useApplicationMenu must be used within AppProvider");
+    }
+    return context.applicationMenu;
+  };
+  const useAppManager = () => {
+    const context = React.useContext(AppContext);
+    if (!context) {
+      throw new Error("useAppManager must be used within AppProvider");
+    }
+    return context.appManager;
+  };
+  const AppProvider = ({ children, appManager = defaultAppManager }) => {
+    const [isApplicationMenuOpen, setIsApplicationMenuOpen] = React.useState(false);
+    const value = {
+      // Application Menu state
+      applicationMenu: {
+        isOpen: isApplicationMenuOpen,
+        open: () => setIsApplicationMenuOpen(true),
+        close: () => setIsApplicationMenuOpen(false),
+        toggle: () => setIsApplicationMenuOpen(!isApplicationMenuOpen)
+      },
+      // App Manager instance
+      appManager
+    };
+    return /* @__PURE__ */ React.createElement(AppContext.Provider, { value }, children);
+  };
   const DesktopLayout = ({ children, className = "", ...props }) => {
     const desktopRef = React.useRef(null);
     const { windowManager } = useWindows();
@@ -32308,7 +32688,7 @@ const rows = [
         toolbar: window2.toolbar,
         statusBar: window2.statusBar
       },
-      /* @__PURE__ */ React.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ React.createElement("h3", null, "Window: ", window2.title), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "ID:"), " ", window2.id), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Position:"), " ", window2.position.x, ", ", window2.position.y), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Size:"), " ", window2.size.width, " × ", window2.size.height), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Z-Index:"), " ", window2.zIndex), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Status:"), " ", window2.minimized ? "Minimized" : window2.maximized ? "Maximized" : "Normal"), /* @__PURE__ */ React.createElement("div", { style: { marginTop: "16px", padding: "12px", background: "#f8f9fa", borderRadius: "4px" } }, /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Window Content Area")), /* @__PURE__ */ React.createElement("p", null, "This is where your application content would go."), /* @__PURE__ */ React.createElement("p", null, "The window is fully draggable and has working minimize, maximize, and close buttons.")))
+      /* @__PURE__ */ React.createElement("div", { style: { padding: "16px" } }, window2.content)
     )));
   };
   const DesktopTaskbar = () => {
@@ -32321,6 +32701,7 @@ const rows = [
       minimizeWindow,
       closeWindow
     } = useWindows();
+    const { open: openApplicationMenu } = useApplicationMenu();
     const handleCreateWindow = () => {
       const windowTypes = [
         { title: "File Explorer", icon: "📁", size: { width: 600, height: 400 } },
@@ -32372,12 +32753,34 @@ const rows = [
       padding: "0 16px",
       gap: "8px"
     } }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        onClick: openApplicationMenu,
+        style: {
+          padding: "8px 16px",
+          background: "#1976d2",
+          color: "white",
+          border: "none",
+          borderRadius: "4px",
+          cursor: "pointer",
+          fontSize: "14px",
+          fontWeight: "bold",
+          flexShrink: 0,
+          display: "flex",
+          alignItems: "center",
+          gap: "6px"
+        },
+        title: "Open application menu"
+      },
+      /* @__PURE__ */ React.createElement("span", { style: { fontSize: "16px" } }, "🚀"),
+      "Start"
+    ), /* @__PURE__ */ React.createElement(
       "button",
       {
         onClick: handleCreateWindow,
         style: {
           padding: "8px 12px",
-          background: "#1976d2",
+          background: "#666",
           color: "white",
           border: "none",
           borderRadius: "4px",
@@ -32385,7 +32788,7 @@ const rows = [
           fontSize: "12px",
           flexShrink: 0
         },
-        title: "Create new window"
+        title: "Create random window (for testing)"
       },
       "+"
     ), /* @__PURE__ */ React.createElement("div", { style: {
@@ -32455,8 +32858,18 @@ Middle click: Close`
       textAlign: "right"
     } }, desktopSize.width, "×", desktopSize.height));
   };
+  const DesktopInternal = ({ desktopSize, children, ...props }) => {
+    const { isOpen, close } = useApplicationMenu();
+    return /* @__PURE__ */ React.createElement(WindowProvider, { desktopSize }, /* @__PURE__ */ React.createElement(DesktopLayout, { ...props }, /* @__PURE__ */ React.createElement(Workspace, null, children), /* @__PURE__ */ React.createElement(DesktopTaskbar, null), /* @__PURE__ */ React.createElement(
+      ApplicationMenu,
+      {
+        isOpen,
+        onClose: close
+      }
+    )));
+  };
   const Desktop = ({ desktopSize, children, ...props }) => {
-    return /* @__PURE__ */ React.createElement(WindowProvider, { desktopSize }, /* @__PURE__ */ React.createElement(DesktopLayout, { ...props }, /* @__PURE__ */ React.createElement(Workspace, null, children), /* @__PURE__ */ React.createElement(DesktopTaskbar, null)));
+    return /* @__PURE__ */ React.createElement(AppProvider, null, /* @__PURE__ */ React.createElement(DesktopInternal, { desktopSize, ...props }, children));
   };
   const ContentForm = ({ content, columns = 1, filter, rules, onChange }) => {
     const form = content.form();
@@ -42176,6 +42589,9 @@ Middle click: Close`
   exports2.AccordionExamples = AccordionExamples;
   exports2.ActionButton = ActionButton;
   exports2.ActionsCell = ActionsCell;
+  exports2.AppManager = AppManager;
+  exports2.AppProvider = AppProvider;
+  exports2.ApplicationMenu = ApplicationMenu;
   exports2.Avatar = Avatar;
   exports2.Button = Button;
   exports2.ButtonExamples = ButtonExamples;
@@ -42329,8 +42745,11 @@ Middle click: Close`
   exports2.Wizard = Wizard;
   exports2.WizardContext = WizardContext;
   exports2.Workspace = Workspace;
+  exports2.defaultAppManager = defaultAppManager;
   exports2.isEmpty = isEmpty;
   exports2.isFunction = isFunction;
+  exports2.useAppManager = useAppManager;
+  exports2.useApplicationMenu = useApplicationMenu;
   exports2.useCreateWindow = useCreateWindow;
   exports2.useHashPage = useHashPage;
   exports2.useWindow = useWindow;