ywana-core8 0.2.8 → 0.2.10

package/dist/index.umd.js

@@ -32447,6 +32447,8 @@ const rows = [
     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(() => {
@@ -32508,7 +32510,31 @@ const rows = [
       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",
@@ -32516,7 +32542,7 @@ const rows = [
         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,
@@ -32530,7 +32556,8 @@ const rows = [
       "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")
@@ -32539,30 +32566,31 @@ const rows = [
       {
         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 {
@@ -32570,107 +32598,6 @@ const rows = [
       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
@@ -32790,6 +32717,160 @@ const rows = [
       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 = () => {
@@ -32806,8 +32887,17 @@ const rows = [
     }
     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: {
@@ -33071,8 +33161,19 @@ Middle click: Close`
       }
     )), /* @__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, rules, onChange }) => {
     const form = content.form();