ywana-core8 0.2.3 → 0.2.5

package/dist/index.modern.js

@@ -32250,6 +32250,386 @@ const Window = ({
     statusBar && /* @__PURE__ */ React.createElement("div", { className: "window__status-bar" }, statusBar)
   );
 };
+const ApplicationMenu = ({ isOpen, onClose }) => {
+  const appManager = useAppManager();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState("all");
+  const [apps, setApps] = useState([]);
+  const [categories, setCategories] = useState([]);
+  const searchInputRef = useRef(null);
+  const { createWindow } = useWindows();
+  useEffect(() => {
+    const loadData = () => {
+      setApps(appManager.getAllApps());
+      setCategories(appManager.getAllCategories());
+    };
+    loadData();
+    appManager.addListener(loadData);
+    return () => {
+      appManager.removeListener(loadData);
+    };
+  }, [appManager]);
+  useEffect(() => {
+    if (isOpen && searchInputRef.current) {
+      setTimeout(() => {
+        searchInputRef.current.focus();
+      }, 100);
+    }
+  }, [isOpen]);
+  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 = createContext();
+const useApplicationMenu = () => {
+  const context = useContext(AppContext);
+  if (!context) {
+    throw new Error("useApplicationMenu must be used within AppProvider");
+  }
+  return context.applicationMenu;
+};
+const useAppManager = () => {
+  const context = useContext(AppContext);
+  if (!context) {
+    throw new Error("useAppManager must be used within AppProvider");
+  }
+  return context.appManager;
+};
+const AppProvider = ({ children, appManager = defaultAppManager }) => {
+  const [isApplicationMenuOpen, setIsApplicationMenuOpen] = 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 = useRef(null);
   const { windowManager } = useWindows();
@@ -32305,7 +32685,7 @@ const Workspace = ({ children }) => {
       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 = () => {
@@ -32318,6 +32698,7 @@ const DesktopTaskbar = () => {
     minimizeWindow,
     closeWindow
   } = useWindows();
+  const { open: openApplicationMenu } = useApplicationMenu();
   const handleCreateWindow = () => {
     const windowTypes = [
       { title: "File Explorer", icon: "📁", size: { width: 600, height: 400 } },
@@ -32369,12 +32750,34 @@ const DesktopTaskbar = () => {
     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",
@@ -32382,7 +32785,7 @@ const DesktopTaskbar = () => {
         fontSize: "12px",
         flexShrink: 0
       },
-      title: "Create new window"
+      title: "Create random window (for testing)"
     },
     "+"
   ), /* @__PURE__ */ React.createElement("div", { style: {
@@ -32452,8 +32855,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: filter2, rules, onChange }) => {
   const form = content.form();
@@ -42174,6 +42587,9 @@ export {
   AccordionExamples,
   ActionButton,
   ActionsCell,
+  AppManager,
+  AppProvider,
+  ApplicationMenu,
   Avatar,
   Button,
   ButtonExamples,
@@ -42327,8 +42743,11 @@ export {
   Wizard,
   WizardContext,
   Workspace,
+  defaultAppManager,
   isEmpty,
   isFunction,
+  useAppManager,
+  useApplicationMenu,
   useCreateWindow,
   useHashPage,
   useWindow,