@edenapp/sdk 0.1.0

package/apps/com/eden/eveshell/src/components/Dock.tsx

@@ -0,0 +1,147 @@
+import { For, Show, createSignal, onMount } from "solid-js";
+import AppIcon from "./AppIcon";
+import Clock from "./Clock";
+import { AppInfo } from "../types";
+import { ContextMenuData } from "./AppContextMenu";
+import appsViewIcon from "../../assets/apps-grid-icon.svg";
+
+interface DockProps {
+  runningApps: AppInfo[];  // Running apps that are NOT pinned
+  pinnedApps: AppInfo[];   // Pinned apps (may or may not be running)
+  onAppClick: (appId: string) => void;
+  onShowAllApps: () => void;
+  onContextMenu: (menu: ContextMenuData) => void;
+}
+
+export default function Dock(props: DockProps) {
+  let containerRef: HTMLDivElement | undefined;
+  let dockRef: HTMLDivElement | undefined;
+  const [isInitial, setIsInitial] = createSignal(true);
+
+  onMount(() => {
+    // Remove the initial class after animation completes
+    setTimeout(() => {
+      setIsInitial(false);
+    }, 300); // Match animation duration
+  });
+
+  function handleMouseMove(e: MouseEvent) {
+    if (!containerRef) return;
+    const bounds = containerRef.getBoundingClientRect();
+    const mouseX = e.clientX;
+
+    const sigma = 70; // cursor influence radius (px)
+    const maxScale = 1.25; // maximum magnification
+
+    containerRef.classList.add("magnify-active");
+
+    const icons = containerRef.querySelectorAll<HTMLDivElement>(".app-icon");
+    icons.forEach((icon) => {
+      const iconBox = icon.querySelector<HTMLDivElement>(".icon-container");
+      if (!iconBox) return;
+      const rect = icon.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      const d = Math.abs(mouseX - centerX);
+      const influence = Math.exp(-(d * d) / (2 * sigma * sigma)); // gaussian falloff
+      const scale = 1 + (maxScale - 1) * influence;
+      // pass influence to CSS var; lift entire tile and scale just the icon
+      icon.style.setProperty("--influence", influence.toFixed(3));
+      const lift = -8 * influence;
+      icon.style.transform = `translateY(${lift.toFixed(1)}px)`;
+      icon.style.zIndex = `${Math.round(scale * 100)}`; // larger sits above
+      iconBox.style.transform = `scale(${scale.toFixed(3)})`;
+    });
+  }
+
+  function handleMouseLeave() {
+    if (!containerRef) return;
+    containerRef.classList.remove("magnify-active");
+    const appIcons = containerRef.querySelectorAll<HTMLDivElement>(".app-icon");
+    appIcons.forEach((icon) => {
+      const iconBox = icon.querySelector<HTMLDivElement>(".icon-container");
+      if (iconBox) {
+        iconBox.style.transform = "";
+      }
+      icon.style.transform = "";
+      icon.style.zIndex = "";
+    });
+  }
+
+  return (
+    <div class="dock" classList={{ "dock-initial": isInitial() }} ref={dockRef}>
+      <div class="dock-left">
+        <div
+          class="app-icons magnify"
+          ref={containerRef}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+        >
+          {/* Running apps (not pinned) */}
+          <For each={props.runningApps}>
+            {(app) => (
+              <AppIcon
+                appId={app.id}
+                appName={app.name}
+                isRunning={app.isRunning}
+                onClick={() => props.onAppClick(app.id)}
+                onContextMenu={(e) => {
+                  e.preventDefault();
+                  props.onContextMenu({
+                    appId: app.id,
+                    appName: app.name,
+                    isRunning: app.isRunning,
+                    left: e.clientX,
+                    bottom: 72,
+                  });
+                }}
+              />
+            )}
+          </For>
+          
+          {/* Separator between running and pinned */}
+          <Show when={props.runningApps.length > 0 && props.pinnedApps.length > 0}>
+            <div class="separator"></div>
+          </Show>
+          
+          {/* Pinned apps */}
+          <For each={props.pinnedApps}>
+            {(app) => (
+              <AppIcon
+                appId={app.id}
+                appName={app.name}
+                isRunning={app.isRunning}
+                onClick={() => props.onAppClick(app.id)}
+                onContextMenu={(e) => {
+                  e.preventDefault();
+                  console.log(e.clientX, e.clientY);
+                  props.onContextMenu({
+                    appId: app.id,
+                    appName: app.name,
+                    isRunning: app.isRunning,
+                    left: e.clientX,
+                    bottom: 72,
+                  });
+                }}
+              />
+            )}
+          </For>
+          
+          {/* Separator before All Apps button */}
+          <Show when={props.runningApps.length > 0 || props.pinnedApps.length > 0}>
+            <div class="separator"></div>
+          </Show>
+          
+          <AppIcon
+            appId="apps-view"
+            appName="All Apps"
+            icon={appsViewIcon}
+            onClick={props.onShowAllApps}
+          />
+        </div>
+      </div>
+      <div class="dock-right">
+        <Clock />
+      </div>
+    </div>
+  );
+}

package/apps/com/eden/eveshell/src/components/ShellOverlay.tsx

@@ -0,0 +1,343 @@
+import { createSignal, onMount, onCleanup, Show } from "solid-js";
+import Dock from "./Dock";
+import AllApps from "./AllApps";
+import AppContextMenu, { ContextMenuData } from "./AppContextMenu";
+import {
+  ViewBounds,
+  WindowSize,
+  AppManifest,
+  AppInstance,
+} from "@edenapp/types";
+import { AppInfo } from "../types";
+
+// Constants
+const DOCK_HEIGHT = 72; // Should match --eden-layout-dock-height in pixels
+
+// Database key for persisting pinned dock apps
+const PINNED_DOCK_APPS_KEY = "pinned-dock-apps";
+
+export default function ShellOverlay() {
+  const [runningApps, setRunningApps] = createSignal<AppInstance[]>([]);
+  const [installedApps, setInstalledApps] = createSignal<AppManifest[]>([]);
+  const [pinnedDockApps, setPinnedDockApps] = createSignal<string[]>([]);
+  const [showAllApps, setShowAllApps] = createSignal(false);
+  const [dockContextMenu, setDockContextMenu] = createSignal<ContextMenuData | null>(null);
+
+  // Load pinned apps from database
+  const loadPinnedApps = async () => {
+    try {
+      const result = await window.edenAPI.shellCommand("db/get", {
+        key: PINNED_DOCK_APPS_KEY,
+      });
+      if (result.value) {
+        const parsed = JSON.parse(result.value);
+        if (Array.isArray(parsed)) {
+          setPinnedDockApps(parsed);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to load pinned dock apps:", error);
+    }
+  };
+
+  // Save pinned apps to database
+  const savePinnedApps = async (appIds: string[]) => {
+    try {
+      await window.edenAPI.shellCommand("db/set", {
+        key: PINNED_DOCK_APPS_KEY,
+        value: JSON.stringify(appIds),
+      });
+    } catch (error) {
+      console.error("Failed to save pinned dock apps:", error);
+    }
+  };
+
+  // Add an app to the dock (pin it)
+  const handleAddToDock = async (appId: string) => {
+    const current = pinnedDockApps();
+    if (!current.includes(appId)) {
+      const updated = [...current, appId];
+      setPinnedDockApps(updated);
+      await savePinnedApps(updated);
+    }
+  };
+
+  // Remove an app from the dock (unpin it)
+  const handleRemoveFromDock = async (appId: string) => {
+    const current = pinnedDockApps();
+    const updated = current.filter((id) => id !== appId);
+    setPinnedDockApps(updated);
+    await savePinnedApps(updated);
+  };
+
+  // Check if an app is pinned to the dock
+  const isAppPinned = (appId: string): boolean => {
+    return pinnedDockApps().includes(appId);
+  };
+
+  // Running apps that are NOT pinned (for the left section of dock)
+  const dockRunningApps = (): AppInfo[] => {
+    return runningApps()
+      .filter((instance) => !pinnedDockApps().includes(instance.manifest.id))
+      .map((instance) => ({
+        id: instance.manifest.id,
+        name: instance.manifest.name,
+        isRunning: true,
+      }));
+  };
+
+  // Pinned apps with their running status (for the right section of dock)
+  const dockPinnedApps = (): AppInfo[] => {
+    const runningIds = new Set(runningApps().map((i) => i.manifest.id));
+    const installed = installedApps();
+
+    return pinnedDockApps()
+      .map((appId) => {
+        const manifest = installed.find((m) => m.id === appId);
+        if (!manifest) return null;
+        return {
+          id: appId,
+          name: manifest.name,
+          isRunning: runningIds.has(appId),
+        };
+      })
+      .filter((app): app is AppInfo => app !== null);
+  };
+
+  // All installed apps for the apps view
+  const allApps = (): AppInfo[] => {
+    const runningIds = new Set(runningApps().map((i) => i.manifest.id));
+    return installedApps().map((app) => ({
+      id: app.id,
+      name: app.name,
+      isRunning: runningIds.has(app.id),
+    }));
+  };
+
+  const loadSystemInfo = async () => {
+    try {
+      // Fetch installed apps from package manager
+      const installed = await window.edenAPI.shellCommand("package/list", {});
+      if (Array.isArray(installed)) {
+        setInstalledApps(installed);
+      }
+
+      // Fetch running apps from process manager
+      const running = await window.edenAPI.shellCommand("process/list", {});
+      if (Array.isArray(running)) {
+        setRunningApps(running);
+      }
+    } catch (error) {
+      console.error("Failed to load system info:", error);
+    }
+  };
+
+  // Helper function to calculate bounds based on mode and window size
+  const calculateBounds = (
+    mode: "dock" | "fullscreen",
+    windowSize: WindowSize
+  ) => {
+    return mode === "fullscreen"
+      ? { x: 0, y: 0, width: windowSize.width, height: windowSize.height }
+      : {
+          x: 0,
+          y: windowSize.height - DOCK_HEIGHT,
+          width: windowSize.width,
+          height: DOCK_HEIGHT,
+        };
+  };
+
+  // Helper function to update overlay bounds via API
+  const updateOverlayBounds = async (bounds: ViewBounds) => {
+    try {
+      await window.edenAPI.shellCommand("view/update-view-bounds", {
+        appId: "com.eden.eveshell",
+        bounds,
+      });
+    } catch (error) {
+      console.error("Failed to update overlay bounds:", error);
+    }
+  };
+
+  const requestResize = async (mode: "dock" | "fullscreen") => {
+    try {
+      // Get current window bounds
+      const windowSize = await window.edenAPI.shellCommand(
+        "view/window-size",
+        {}
+      );
+      const bounds = calculateBounds(mode, windowSize);
+      await updateOverlayBounds(bounds);
+    } catch (error) {
+      console.error("Failed to resize overlay:", error);
+    }
+  };
+
+  const handleAppClick = async (appId: string) => {
+    const isRunning = runningApps().some((app) => app.manifest.id === appId);
+
+    if (isRunning) {
+      // App is running, focus/show it
+      try {
+        await window.edenAPI.shellCommand("view/focus-app", { appId });
+      } catch (error) {
+        console.error("Failed to focus app:", error);
+      }
+    } else {
+      // App is not running, launch it
+      try {
+        await window.edenAPI.shellCommand("process/launch", { appId });
+        // Add a small delay before refreshing to let the app start
+        setTimeout(() => {
+          loadSystemInfo();
+        }, 500);
+      } catch (error) {
+        console.error("Failed to launch app:", error);
+      }
+    }
+  };
+
+  const handleShowAllApps = async () => {
+    const next = !showAllApps();
+    setShowAllApps(next);
+
+    // Resize overlay
+    await requestResize(next ? "fullscreen" : "dock");
+
+    // Refresh installed apps when opening the apps view
+    if (next) {
+      loadSystemInfo();
+    }
+  };
+
+  const handleStopApp = async (appId: string) => {
+    try {
+      await window.edenAPI.shellCommand("process/stop", { appId });
+      // Refresh app list
+      setTimeout(() => {
+        loadSystemInfo();
+      }, 300);
+    } catch (error) {
+      console.error("Failed to stop app:", error);
+    }
+  };
+
+  const handleUninstallApp = async (appId: string) => {
+    try {
+      // Confirm before uninstalling
+      if (confirm(`Are you sure you want to uninstall this app?`)) {
+        await window.edenAPI.shellCommand("package/uninstall", { appId });
+        // Refresh app list
+        await loadSystemInfo();
+      }
+    } catch (error) {
+      console.error("Failed to uninstall app:", error);
+    }
+  };
+
+  // Handle context menu from dock - resize to fullscreen so menu fits
+  const handleDockContextMenu = async (menu: ContextMenuData) => {
+    await requestResize("fullscreen");
+    setDockContextMenu(menu);
+  };
+
+  // Close dock context menu and resize back to dock
+  const handleCloseDockContextMenu = async () => {
+    setDockContextMenu(null);
+    if (!showAllApps()) {
+      await requestResize("dock");
+    }
+  };
+
+  onMount(() => {
+    // Event handlers
+    const handleAppLifecycle = () => loadSystemInfo();
+
+    const handleBoundsChange = (data: {
+      workspaceBounds: ViewBounds;
+      windowSize: WindowSize;
+    }) => {
+      const { windowSize } = data;
+      const mode = showAllApps() ? "fullscreen" : "dock";
+      const bounds = calculateBounds(mode, windowSize);
+      updateOverlayBounds(bounds);
+    };
+
+    // Register cleanup synchronously (must happen before any async work)
+    onCleanup(() => {
+      window.edenAPI.unsubscribe("process/launched", handleAppLifecycle);
+      window.edenAPI.unsubscribe("process/stopped", handleAppLifecycle);
+      window.edenAPI.unsubscribe(
+        "view/global-bounds-changed",
+        handleBoundsChange
+      );
+    });
+
+    // Async initialization
+    (async () => {
+      // Load initial system info and pinned apps
+      loadSystemInfo();
+      loadPinnedApps();
+
+      // Set initial overlay size
+      await requestResize("dock");
+
+      try {
+        // Subscribe to events
+        await window.edenAPI.subscribe("process/launched", handleAppLifecycle);
+        await window.edenAPI.subscribe("process/stopped", handleAppLifecycle);
+        await window.edenAPI.subscribe(
+          "view/global-bounds-changed",
+          handleBoundsChange
+        );
+      } catch (error) {
+        console.error("Failed to subscribe to events:", error);
+      }
+    })();
+  });
+
+  return (
+    <div
+      class="shell-overlay"
+      data-mode={showAllApps() || dockContextMenu() ? "fullscreen" : "dock"}
+    >
+      {/* AllApps appears above the dock when active */}
+      <Show when={showAllApps()}>
+        <AllApps
+          apps={allApps()}
+          onClose={handleShowAllApps}
+          onAppClick={handleAppClick}
+          onStopApp={handleStopApp}
+          onUninstallApp={handleUninstallApp}
+          isAppPinned={isAppPinned}
+          onAddToDock={handleAddToDock}
+          onRemoveFromDock={handleRemoveFromDock}
+        />
+      </Show>
+
+      {/* Dock is always visible */}
+      <Dock
+        runningApps={dockRunningApps()}
+        pinnedApps={dockPinnedApps()}
+        onAppClick={handleAppClick}
+        onShowAllApps={handleShowAllApps}
+        onContextMenu={handleDockContextMenu}
+      />
+
+      {/* Context menu for dock apps */}
+      <Show when={dockContextMenu()}>
+        {(menu) => (
+          <AppContextMenu
+            menu={menu()}
+            isAppPinned={isAppPinned}
+            onStopApp={handleStopApp}
+            onAddToDock={handleAddToDock}
+            onRemoveFromDock={handleRemoveFromDock}
+            onUninstallApp={handleUninstallApp}
+            onClose={handleCloseDockContextMenu}
+          />
+        )}
+      </Show>
+    </div>
+  );
+}

package/apps/com/eden/eveshell/src/icon-cache.ts

@@ -0,0 +1,38 @@
+// Cache for fetched icons to avoid redundant API calls
+const iconCache = new Map<string, string | undefined>();
+
+/**
+ * Fetch an app icon as a base64 data URL
+ */
+export async function fetchAppIcon(appId: string): Promise<string | undefined> {
+  // Check cache first
+  if (iconCache.has(appId)) {
+    return iconCache.get(appId);
+  }
+
+  try {
+    const result = await window.edenAPI.shellCommand("package/get-icon", {
+      appId,
+    });
+    iconCache.set(appId, result.icon);
+    return result.icon;
+  } catch (error) {
+    console.warn(`Failed to fetch icon for ${appId}:`, error);
+    iconCache.set(appId, undefined);
+    return undefined;
+  }
+}
+
+/**
+ * Clear the icon cache (useful for refreshing after app updates)
+ */
+export function clearIconCache(): void {
+  iconCache.clear();
+}
+
+/**
+ * Remove a specific app's icon from cache
+ */
+export function invalidateIconCache(appId: string): void {
+  iconCache.delete(appId);
+}

package/apps/com/eden/eveshell/src/index.tsx

@@ -0,0 +1,11 @@
+import { render } from "solid-js/web";
+import ShellOverlay from "./components/ShellOverlay";
+import "./styles.css";
+
+const root = document.getElementById("root");
+
+if (!root) {
+  throw new Error("Root element not found");
+}
+
+render(() => <ShellOverlay />, root);