ywana-core8 0.2.8 → 0.2.9

package/dist/index.js

@@ -32446,6 +32446,8 @@ const ApplicationMenu = ({ isOpen, onClose }) => {
   const [selectedCategory, setSelectedCategory] = React.useState("all");
   const [apps, setApps] = React.useState([]);
   const [categories, setCategories] = React.useState([]);
+  const [viewMode, setViewMode] = React.useState("list");
+  const [isCondensed, setIsCondensed] = React.useState(true);
   const searchInputRef = React.useRef(null);
   const { createWindow } = useWindows();
   React.useEffect(() => {
@@ -32507,7 +32509,31 @@ const ApplicationMenu = ({ isOpen, onClose }) => {
     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(
+  return /* @__PURE__ */ React.createElement("div", { className: "application-menu-overlay", onClick: onClose }, /* @__PURE__ */ React.createElement("div", { className: `application-menu ${isCondensed ? "application-menu--condensed" : ""}`, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement("div", { className: "application-menu__header" }, /* @__PURE__ */ React.createElement("div", { className: "application-menu__header-controls" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: `application-menu__view-toggle ${isCondensed ? "active" : ""}`,
+      onClick: () => setIsCondensed(!isCondensed),
+      title: isCondensed ? "Normal view" : "Condensed view"
+    },
+    "⚏"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: `application-menu__view-toggle ${viewMode === "grid" ? "active" : ""}`,
+      onClick: () => setViewMode("grid"),
+      title: "Grid view"
+    },
+    "⊞"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: `application-menu__view-toggle ${viewMode === "list" ? "active" : ""}`,
+      onClick: () => setViewMode("list"),
+      title: "List view"
+    },
+    "☰"
+  ), /* @__PURE__ */ React.createElement(
     "button",
     {
       className: "application-menu__close",
@@ -32515,7 +32541,7 @@ const ApplicationMenu = ({ isOpen, onClose }) => {
       title: "Close menu"
     },
     "×"
-  )), /* @__PURE__ */ React.createElement("div", { className: "application-menu__search" }, /* @__PURE__ */ React.createElement(
+  ))), /* @__PURE__ */ React.createElement("div", { className: "application-menu__search" }, /* @__PURE__ */ React.createElement(
     "input",
     {
       ref: searchInputRef,
@@ -32529,7 +32555,8 @@ const ApplicationMenu = ({ isOpen, onClose }) => {
     "button",
     {
       className: `application-menu__category ${selectedCategory === "all" ? "active" : ""}`,
-      onClick: () => handleCategorySelect("all")
+      onClick: () => handleCategorySelect("all"),
+      title: "All Apps"
     },
     /* @__PURE__ */ React.createElement("span", { className: "category-icon" }, "📱"),
     /* @__PURE__ */ React.createElement("span", { className: "category-name" }, "All Apps")
@@ -32538,30 +32565,31 @@ const ApplicationMenu = ({ isOpen, onClose }) => {
     {
       key: category.id,
       className: `application-menu__category ${selectedCategory === category.id ? "active" : ""}`,
-      onClick: () => handleCategorySelect(category.id)
+      onClick: () => handleCategorySelect(category.id),
+      title: category.name
     },
     /* @__PURE__ */ React.createElement("span", { className: "category-icon" }, category.icon),
     /* @__PURE__ */ React.createElement("span", { className: "category-name" }, 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(
+  )))), /* @__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-${viewMode}` }, filteredApps.map((app) => /* @__PURE__ */ React.createElement(
     "div",
     {
       key: app.id,
-      className: "application-menu__app",
+      className: `application-menu__app--${viewMode}`,
       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(
+    viewMode === "list" ? /* @__PURE__ */ React.createElement("div", { className: "app-info" }, /* @__PURE__ */ React.createElement("div", { className: "app-name" }, app.name), /* @__PURE__ */ React.createElement("div", { className: "app-description" }, app.description)) : /* @__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-${viewMode}` }, categoryApps.map((app) => /* @__PURE__ */ React.createElement(
     "div",
     {
       key: app.id,
-      className: "application-menu__app",
+      className: `application-menu__app--${viewMode}`,
       onClick: () => handleLaunchApp(app),
       title: app.description
     },
     /* @__PURE__ */ React.createElement("div", { className: "app-icon" }, app.icon),
-    /* @__PURE__ */ React.createElement("div", { className: "app-name" }, app.name)
+    viewMode === "list" ? /* @__PURE__ */ React.createElement("div", { className: "app-info" }, /* @__PURE__ */ React.createElement("div", { className: "app-name" }, app.name), /* @__PURE__ */ React.createElement("div", { className: "app-description" }, app.description)) : /* @__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 {
@@ -32569,107 +32597,6 @@ class AppManager {
     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
@@ -32789,6 +32716,160 @@ class AppManager {
     return grouped;
   }
 }
+class AppLoader {
+  /**
+   * Load configuration into AppManager
+   * @param {AppManager} appManager - The AppManager instance
+   * @param {Object} config - JSON configuration object
+   * @param {Array} config.categories - Array of category definitions
+   * @param {Array} config.applications - Array of application definitions
+   */
+  static load(appManager, config) {
+    if (!config) {
+      console.warn("AppLoader: No configuration provided");
+      return;
+    }
+    if (config.categories && Array.isArray(config.categories)) {
+      this.loadCategories(appManager, config.categories);
+    }
+    if (config.applications && Array.isArray(config.applications)) {
+      this.loadApplications(appManager, config.applications);
+    }
+  }
+  /**
+   * Load categories from configuration
+   * @param {AppManager} appManager - The AppManager instance
+   * @param {Array} categories - Array of category definitions
+   */
+  static loadCategories(appManager, categories) {
+    categories.forEach((category) => {
+      if (this.validateCategory(category)) {
+        appManager.categories.set(category.id, category);
+      } else {
+        console.warn("AppLoader: Invalid category configuration:", category);
+      }
+    });
+  }
+  /**
+   * Load applications from configuration
+   * @param {AppManager} appManager - The AppManager instance
+   * @param {Array} applications - Array of application definitions
+   */
+  static loadApplications(appManager, applications) {
+    applications.forEach((app) => {
+      if (this.validateApplication(app)) {
+        appManager.registerApp(app);
+      } else {
+        console.warn("AppLoader: Invalid application configuration:", app);
+      }
+    });
+  }
+  /**
+   * Validate category configuration
+   * @param {Object} category - Category definition
+   * @returns {boolean} - True if valid
+   */
+  static validateCategory(category) {
+    return category && typeof category.id === "string" && typeof category.name === "string" && category.id.length > 0 && category.name.length > 0;
+  }
+  /**
+   * Validate application configuration
+   * @param {Object} app - Application definition
+   * @returns {boolean} - True if valid
+   */
+  static validateApplication(app) {
+    return app && typeof app.id === "string" && typeof app.name === "string" && app.id.length > 0 && app.name.length > 0;
+  }
+}
+const defaultDesktopConfig = {
+  categories: [
+    { 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" }
+  ],
+  applications: [
+    {
+      id: "file-explorer",
+      name: "File Explorer",
+      description: "Browse and manage files",
+      icon: "📁",
+      category: "System",
+      component: null,
+      size: { width: 600, height: 400 },
+      toolbar: null,
+      statusBar: null
+    },
+    {
+      id: "text-editor",
+      name: "Text Editor",
+      description: "Edit text files",
+      icon: "📝",
+      category: "Productivity",
+      component: null,
+      size: { width: 500, height: 350 },
+      toolbar: null,
+      statusBar: null
+    },
+    {
+      id: "calculator",
+      name: "Calculator",
+      description: "Perform calculations",
+      icon: "🧮",
+      category: "Utilities",
+      component: null,
+      size: { width: 300, height: 400 }
+    },
+    {
+      id: "settings",
+      name: "Settings",
+      description: "System configuration",
+      icon: "⚙️",
+      category: "System",
+      component: null,
+      size: { width: 450, height: 300 }
+    },
+    {
+      id: "browser",
+      name: "Web Browser",
+      description: "Browse the internet",
+      icon: "🌐",
+      category: "Internet",
+      component: null,
+      size: { width: 800, height: 500 }
+    },
+    {
+      id: "terminal",
+      name: "Terminal",
+      description: "Command line interface",
+      icon: "💻",
+      category: "Development",
+      component: null,
+      size: { width: 700, height: 400 }
+    },
+    {
+      id: "image-viewer",
+      name: "Image Viewer",
+      description: "View and edit images",
+      icon: "🖼️",
+      category: "Media",
+      component: null,
+      size: { width: 600, height: 500 }
+    },
+    {
+      id: "music-player",
+      name: "Music Player",
+      description: "Play audio files",
+      icon: "🎵",
+      category: "Media",
+      component: null,
+      size: { width: 400, height: 300 }
+    }
+  ]
+};
 const defaultAppManager = new AppManager();
 const AppContext = React.createContext();
 const useApplicationMenu = () => {
@@ -32805,8 +32886,17 @@ const useAppManager = () => {
   }
   return context.appManager;
 };
-const AppProvider = ({ children, appManager = defaultAppManager }) => {
+const AppProvider = ({
+  children,
+  desktopConfig = defaultDesktopConfig
+}) => {
+  const appManager = new AppManager();
   const [isApplicationMenuOpen, setIsApplicationMenuOpen] = React.useState(false);
+  React.useEffect(() => {
+    if (appManager.getAllApps().length === 0 && desktopConfig) {
+      AppLoader.load(appManager, desktopConfig);
+    }
+  }, [appManager, desktopConfig]);
   const value = {
     // Application Menu state
     applicationMenu: {
@@ -33070,8 +33160,19 @@ const DesktopInternal = ({ desktopSize, children, ...props }) => {
     }
   )), /* @__PURE__ */ React.createElement(DesktopTaskbar, null)));
 };
-const Desktop = ({ desktopSize, children, ...props }) => {
-  return /* @__PURE__ */ React.createElement(AppProvider, null, /* @__PURE__ */ React.createElement(DesktopInternal, { desktopSize, ...props }, children));
+const Desktop = ({
+  desktopSize,
+  children,
+  desktopConfig,
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    AppProvider,
+    {
+      desktopConfig
+    },
+    /* @__PURE__ */ React.createElement(DesktopInternal, { desktopSize, ...props }, children)
+  );
 };
 const ContentForm = ({ content, columns = 1, filter: filter2, rules, onChange }) => {
   const form = content.form();