@edenapp/sdk 0.1.0

package/apps/com/eden/editor/src/App.tsx

@@ -0,0 +1,212 @@
+import { createSignal, onMount, onCleanup, Show } from "solid-js";
+import type { Component } from "solid-js";
+
+// Use lazy-loading components - Monaco is loaded on-demand, not at startup
+import { TabBar, Toolbar, ErrorBanner, WelcomeScreen, LazyMonacoEditor, setEditorContentLazy, getEditorContentLazy, preloadMonaco } from "./components";
+import { EditorTab, FileOpenedEvent, getLanguageFromPath, getFileName } from "./types";
+
+// Type for the editor instance (just the interface, not the actual module)
+type IStandaloneCodeEditor = import("monaco-editor").editor.IStandaloneCodeEditor;
+
+const App: Component = () => {
+  const [tabs, setTabs] = createSignal<EditorTab[]>([]);
+  const [activeTabId, setActiveTabId] = createSignal<string | null>(null);
+  const [isSaving, setIsSaving] = createSignal(false);
+  const [error, setError] = createSignal<string | null>(null);
+  const [editorReady, setEditorReady] = createSignal(false);
+  
+  let editor: IStandaloneCodeEditor | undefined;
+
+  // Get the currently active tab
+  const activeTab = () => tabs().find(t => t.id === activeTabId());
+
+  // Subscribe to file open events and set up keyboard shortcuts
+  onMount(async () => {
+    console.log("Editor app mounted");
+    
+    // Start loading Monaco in the background immediately
+    // This way it's ready by the time the user opens a file
+    preloadMonaco();
+    
+    // Check for launch arguments - if app was launched with a file path, open it
+    const launchArgs = window.edenAPI.getLaunchArgs();
+    console.log("Launch args:", launchArgs);
+    if (launchArgs.length > 0) {
+      // Open the first argument as a file path
+      openFile(launchArgs[0]);
+    }
+    
+    // Subscribe to file open events for when app is already running
+    window.edenAPI.subscribe("file/opened", handleFileOpened as (data: unknown) => void);
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "s") {
+        e.preventDefault();
+        saveFile();
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key === "w") {
+        e.preventDefault();
+        const active = activeTabId();
+        if (active) closeTab(active);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+
+    onCleanup(() => {
+      document.removeEventListener("keydown", handleKeyDown);
+      window.edenAPI.unsubscribe("file/opened", handleFileOpened as (data: unknown) => void);
+    });
+  });
+
+  const handleFileOpened = (data: FileOpenedEvent) => {
+    console.log("File opened:", data);
+    if (!data.isDirectory) {
+      openFile(data.path);
+    }
+  };
+
+  const openFile = async (path: string) => {
+    // Check if file is already open
+    const existingTab = tabs().find(t => t.path === path);
+    if (existingTab) {
+      setActiveTabId(existingTab.id);
+      switchToTab(existingTab);
+      return;
+    }
+
+    try {
+      setError(null);
+      
+      const fileContent = await window.edenAPI.shellCommand("fs/read", { path });
+      
+      const newTab: EditorTab = {
+        id: `tab-${Date.now()}`,
+        path,
+        name: getFileName(path),
+        content: fileContent,
+        originalContent: fileContent,
+        isModified: false,
+        language: getLanguageFromPath(path),
+      };
+
+      setTabs([...tabs(), newTab]);
+      setActiveTabId(newTab.id);
+      
+      // Only set content if editor is ready, otherwise onEditorReady will handle it
+      if (editorReady()) {
+        await setEditorContentLazy(editor, fileContent, newTab.language);
+      }
+      window.edenFrame?.setTitle(newTab.name);
+    } catch (err) {
+      setError(`Failed to load file: ${(err as Error).message}`);
+    }
+  };
+
+  const switchToTab = async (tab: EditorTab) => {
+    setActiveTabId(tab.id);
+    await setEditorContentLazy(editor, tab.content, tab.language);
+    window.edenFrame?.setTitle(tab.name);
+  };
+
+  const closeTab = (tabId: string) => {
+    const tabIndex = tabs().findIndex(t => t.id === tabId);
+    const newTabs = tabs().filter(t => t.id !== tabId);
+    setTabs(newTabs);
+
+    if (activeTabId() === tabId) {
+      if (newTabs.length > 0) {
+        const newActiveIndex = Math.min(tabIndex, newTabs.length - 1);
+        switchToTab(newTabs[newActiveIndex]);
+      } else {
+        setActiveTabId(null);
+        if (editor) editor.setValue("");
+        window.edenFrame?.setTitle("Text Editor");
+      }
+    }
+  };
+
+  const saveFile = async () => {
+    const active = activeTab();
+    if (!active || isSaving()) return;
+
+    try {
+      setIsSaving(true);
+      setError(null);
+
+      const currentContent = getEditorContentLazy(editor);
+      
+      await window.edenAPI.shellCommand("fs/write", {
+        path: active.path,
+        content: currentContent,
+      });
+
+      setTabs(tabs().map(t => 
+        t.id === active.id 
+          ? { ...t, originalContent: currentContent, isModified: false }
+          : t
+      ));
+    } catch (err) {
+      setError(`Failed to save file: ${(err as Error).message}`);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleEditorContentChange = (content: string) => {
+    const active = activeTab();
+    if (active) {
+      setTabs(tabs().map(t => 
+        t.id === active.id 
+          ? { ...t, content, isModified: content !== t.originalContent }
+          : t
+      ));
+    }
+  };
+
+  return (
+    <div class="editor-app">
+      <TabBar
+        tabs={tabs()}
+        activeTabId={activeTabId()}
+        onTabClick={switchToTab}
+        onTabClose={closeTab}
+      />
+
+      <Show when={activeTab()}>
+        <Toolbar
+          activeTab={activeTab()}
+          isSaving={isSaving()}
+          onSave={saveFile}
+        />
+      </Show>
+
+      <Show when={error()}>
+        <ErrorBanner
+          message={error()!}
+          onDismiss={() => setError(null)}
+        />
+      </Show>
+
+      <Show when={tabs().length === 0}>
+        <WelcomeScreen />
+      </Show>
+
+      <Show when={tabs().length > 0}>
+        <LazyMonacoEditor
+          onContentChange={handleEditorContentChange}
+          ref={(e: IStandaloneCodeEditor) => { editor = e; }}
+          onReady={() => {
+            setEditorReady(true);
+            // Set content for the active tab now that editor is ready
+            const active = activeTab();
+            if (active) {
+              setEditorContentLazy(editor, active.content, active.language);
+            }
+          }}
+        />
+      </Show>
+    </div>
+  );
+};
+
+export default App;

package/apps/com/eden/editor/src/components/ErrorBanner.tsx

@@ -0,0 +1,13 @@
+interface ErrorBannerProps {
+  message: string;
+  onDismiss: () => void;
+}
+
+export function ErrorBanner(props: ErrorBannerProps) {
+  return (
+    <div class="error-banner">
+      <span>{props.message}</span>
+      <button onClick={props.onDismiss}>×</button>
+    </div>
+  );
+}

package/apps/com/eden/editor/src/components/LazyMonacoEditor.tsx

@@ -0,0 +1,154 @@
+import { createSignal, onCleanup, Show, onMount } from "solid-js";
+
+// Types we need from monaco (just the interface, not the actual module)
+type IStandaloneCodeEditor = import("monaco-editor").editor.IStandaloneCodeEditor;
+type MonacoModule = typeof import("monaco-editor");
+
+interface LazyMonacoEditorProps {
+  onContentChange: (content: string) => void;
+  ref: (editor: IStandaloneCodeEditor) => void;
+  onReady?: () => void;
+}
+
+// Module-level cache for Monaco
+let monacoModule: MonacoModule | null = null;
+let monacoLoadPromise: Promise<MonacoModule> | null = null;
+
+/**
+ * Lazy-loads the Monaco Editor module.
+ * Uses a singleton pattern to ensure it's only loaded once.
+ */
+async function loadMonaco(): Promise<MonacoModule> {
+  if (monacoModule) {
+    return monacoModule;
+  }
+  
+  if (monacoLoadPromise) {
+    return monacoLoadPromise;
+  }
+  
+  console.log("[LazyMonaco] Starting Monaco load...");
+  const startTime = performance.now();
+  
+  monacoLoadPromise = import("monaco-editor").then((mod) => {
+    monacoModule = mod;
+    console.log(`[LazyMonaco] Monaco loaded in ${(performance.now() - startTime).toFixed(0)}ms`);
+    return mod;
+  });
+  
+  return monacoLoadPromise;
+}
+
+/**
+ * Lazy-loading Monaco Editor component.
+ * Monaco is only loaded when this component mounts, not at app startup.
+ */
+export function LazyMonacoEditor(props: LazyMonacoEditorProps) {
+  const [isLoading, setIsLoading] = createSignal(true);
+  const [loadError, setLoadError] = createSignal<string | null>(null);
+  
+  let containerRef: HTMLDivElement | undefined;
+  let editor: IStandaloneCodeEditor | undefined;
+
+  onMount(async () => {
+    try {
+      const monaco = await loadMonaco();
+      
+      if (!containerRef) {
+        throw new Error("Container ref not available");
+      }
+      
+      editor = monaco.editor.create(containerRef, {
+        value: "",
+        language: "plaintext",
+        theme: "vs-dark",
+        automaticLayout: true,
+        minimap: { enabled: false },
+        fontSize: 13,
+        lineNumbers: "on",
+        wordWrap: "off",
+        scrollBeyondLastLine: false,
+        renderWhitespace: "selection",
+        tabSize: 2,
+        padding: { top: 8 },
+      });
+
+      // Pass editor reference to parent
+      props.ref(editor);
+
+      // Track content changes
+      editor.onDidChangeModelContent(() => {
+        const currentContent = editor?.getValue() || "";
+        props.onContentChange(currentContent);
+      });
+      
+      setIsLoading(false);
+      props.onReady?.();
+      
+    } catch (err) {
+      console.error("[LazyMonaco] Failed to load Monaco:", err);
+      setLoadError((err as Error).message);
+      setIsLoading(false);
+    }
+  });
+
+  onCleanup(() => {
+    editor?.dispose();
+  });
+
+  return (
+    <div class="editor-container" ref={containerRef}>
+      <Show when={isLoading()}>
+        <div class="monaco-loading">
+          <div class="monaco-loading-spinner"></div>
+          <span>Loading editor...</span>
+        </div>
+      </Show>
+      <Show when={loadError()}>
+        <div class="monaco-error">
+          Failed to load editor: {loadError()}
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+/**
+ * Set editor content with language detection.
+ * Handles the case where Monaco may not be loaded yet.
+ */
+export async function setEditorContentLazy(
+  editor: IStandaloneCodeEditor | undefined,
+  content: string,
+  language: string
+): Promise<void> {
+  if (!editor) return;
+  
+  // Ensure Monaco is loaded (should be instant if already loaded)
+  const monaco = await loadMonaco();
+  
+  const model = editor.getModel();
+  if (model) {
+    monaco.editor.setModelLanguage(model, language);
+  }
+  editor.setValue(content);
+}
+
+/**
+ * Get editor content.
+ */
+export function getEditorContentLazy(
+  editor: IStandaloneCodeEditor | undefined
+): string {
+  return editor?.getValue() || "";
+}
+
+/**
+ * Pre-load Monaco in the background.
+ * Call this early to start loading Monaco before it's needed.
+ */
+export function preloadMonaco(): void {
+  loadMonaco().catch((err) => {
+    console.warn("[LazyMonaco] Background preload failed:", err);
+  });
+}

package/apps/com/eden/editor/src/components/TabBar.tsx

@@ -0,0 +1,36 @@
+import { For } from "solid-js";
+import type { EditorTab } from "../types";
+
+interface TabBarProps {
+  tabs: EditorTab[];
+  activeTabId: string | null;
+  onTabClick: (tab: EditorTab) => void;
+  onTabClose: (tabId: string) => void;
+}
+
+export function TabBar(props: TabBarProps) {
+  return (
+    <div class="editor-tabs">
+      <For each={props.tabs}>
+        {(tab) => (
+          <div
+            class={`editor-tab ${props.activeTabId === tab.id ? 'active' : ''} ${tab.isModified ? 'modified' : ''}`}
+            onClick={() => props.onTabClick(tab)}
+            role="tab"
+          >
+            <span class="tab-name">{tab.name}</span>
+            <button
+              class="tab-close"
+              onClick={(e: MouseEvent) => {
+                e.stopPropagation();
+                props.onTabClose(tab.id);
+              }}
+            >
+              ×
+            </button>
+          </div>
+        )}
+      </For>
+    </div>
+  );
+}

package/apps/com/eden/editor/src/components/Toolbar.tsx

@@ -0,0 +1,39 @@
+import type { EditorTab } from "../types";
+
+// Floppy disk save icon
+function SaveIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
+      <polyline points="17 21 17 13 7 13 7 21"></polyline>
+      <polyline points="7 3 7 8 15 8"></polyline>
+    </svg>
+  );
+}
+
+interface ToolbarProps {
+  activeTab: EditorTab | undefined;
+  isSaving: boolean;
+  onSave: () => void;
+}
+
+export function Toolbar(props: ToolbarProps) {
+  return (
+    <div class="editor-toolbar">
+      <div class="toolbar-info">
+        <span class="file-path">{props.activeTab?.path}</span>
+        <span class="file-language">{props.activeTab?.language}</span>
+      </div>
+      <div class="toolbar-actions">
+        <button 
+          class="eden-btn eden-btn-sm"
+          onClick={props.onSave}
+          disabled={!props.activeTab?.isModified || props.isSaving}
+          title="Save (Ctrl+S)"
+        >
+          <SaveIcon />
+        </button>
+      </div>
+    </div>
+  );
+}

package/apps/com/eden/editor/src/components/WelcomeScreen.tsx

@@ -0,0 +1,49 @@
+// Document icon
+function DocumentIcon() {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+    >
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+      <polyline points="14 2 14 8 20 8"></polyline>
+      <line x1="16" y1="13" x2="8" y2="13"></line>
+      <line x1="16" y1="17" x2="8" y2="17"></line>
+      <polyline points="10 9 9 9 8 9"></polyline>
+    </svg>
+  );
+}
+
+interface ShortcutItemProps {
+  shortcut: string;
+  description: string;
+}
+
+function ShortcutItem(props: ShortcutItemProps) {
+  return (
+    <div class="shortcut-item">
+      <span class="shortcut-key">{props.shortcut}</span>
+      <span>{props.description}</span>
+    </div>
+  );
+}
+
+export function WelcomeScreen() {
+  return (
+    <div class="welcome-content">
+      <div class="empty-state-icon">
+        <DocumentIcon />
+      </div>
+      <h1>Text Editor</h1>
+      <p>Open a file from the Files app to start editing</p>
+      <div class="welcome-shortcuts">
+        <ShortcutItem shortcut="Ctrl+S" description="Save file" />
+        <ShortcutItem shortcut="Ctrl+W" description="Close tab" />
+      </div>
+    </div>
+  );
+}

package/apps/com/eden/editor/src/components/index.ts

@@ -0,0 +1,11 @@
+export { TabBar } from "./TabBar";
+export { Toolbar } from "./Toolbar";
+export { ErrorBanner } from "./ErrorBanner";
+export { WelcomeScreen } from "./WelcomeScreen";
+// Lazy-loading exports (recommended for faster startup)
+export { 
+  LazyMonacoEditor, 
+  setEditorContentLazy, 
+  getEditorContentLazy,
+  preloadMonaco 
+} from "./LazyMonacoEditor";

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

@@ -0,0 +1,10 @@
+/* @refresh reload */
+import { render } from "solid-js/web";
+import App from "./App";
+import "./styles.css";
+
+const root = document.getElementById("root");
+
+if (root) {
+  render(() => <App />, root);
+}