@edenapp/sdk 0.1.0

package/apps/com/eden/eveshell/src/styles.css

@@ -0,0 +1,409 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--eden-font-family-base);
+  /* Transparent background for overlay views */
+  background: transparent;
+  color: var(--eden-color-text-primary);
+  overflow: hidden;
+  height: 100vh;
+  width: 100vw;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+}
+
+/* Shell Overlay Container */
+.shell-overlay {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* Dock mode - compact bottom bar */
+.shell-overlay[data-mode="dock"] {
+  height: var(--eden-layout-dock-height);
+  max-height: var(--eden-layout-dock-height);
+  /* Safeguard against desync */
+  overflow: hidden;
+}
+
+/* Fullscreen mode - fill entire window */
+.shell-overlay[data-mode="fullscreen"] {
+  height: 100vh;
+  max-height: 100vh;
+}
+
+/* Keep dock at bottom when in fullscreen mode */
+.shell-overlay[data-mode="fullscreen"] .dock {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+/* Dock Styles */
+.dock {
+  height: var(--eden-layout-dock-height);
+  /* Make dock visually float with transparent, frosted background */
+  background: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--eden-space-sm);
+  position: relative;
+  overflow: visible;
+}
+
+/* One-time slide-in animation on initial load */
+.dock.dock-initial {
+  animation: dockSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+@keyframes dockSlideIn {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.dock::before {
+  /* Frosted panel behind dock content */
+  content: "";
+  position: absolute;
+  left: var(--eden-space-sm);
+  right: var(--eden-space-sm);
+  bottom: var(--eden-space-sm);
+  height: calc(var(--eden-layout-dock-height) - var(--eden-space-md));
+  border-radius: var(--eden-radius-xl);
+  background: var(--eden-color-bg-glass-medium);
+  backdrop-filter: var(--eden-glass-medium);
+  -webkit-backdrop-filter: var(--eden-glass-medium);
+  box-shadow: var(--eden-shadow-lg);
+  /* Avoid inset border which can produce hairline seams on some displays */
+  border: 1px solid var(--eden-color-border-light);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.dock-left {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  z-index: 1;
+  /* above frosted background */
+}
+
+.dock-right {
+  position: absolute;
+  right: var(--eden-space-sm);
+  display: flex;
+  align-items: center;
+  padding: var(--eden-space-sm) var(--eden-space-md);
+  border-radius: var(--eden-radius-lg);
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border: none;
+  box-shadow: none;
+  z-index: 1;
+}
+
+.dock-right,
+.dock-right * {
+  color: var(--eden-color-text-primary);
+}
+
+.dock-right .clock .time {
+  color: var(--eden-color-text-primary);
+  font-size: var(--eden-font-size-lg);
+  line-height: var(--eden-font-line-height-tight);
+}
+
+.dock-right .clock .date {
+  color: var(--eden-color-text-secondary);
+}
+
+.dock-right .separator {
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    var(--eden-color-border-medium) 20%,
+    var(--eden-color-border-medium) 80%,
+    transparent
+  );
+}
+
+.app-icons {
+  display: flex;
+  align-items: center;
+  gap: var(--eden-space-sm);
+  padding: var(--eden-space-sm) var(--eden-space-md);
+  border-radius: var(--eden-radius-md);
+  /* Subtle dark container so icons sit naturally on the background */
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border: none;
+  box-shadow: none;
+  overflow: visible;
+  z-index: 1;
+}
+
+.app-icons.magnify .app-icon:hover {
+  transform: none;
+}
+
+.app-icons.magnify .icon-container {
+  transform-origin: bottom center;
+}
+
+.app-icons.magnify.magnify-active .icon-container {
+  filter: brightness(1.05);
+}
+
+.dock-left,
+.dock-left * {
+  color: var(--eden-color-text-primary);
+}
+
+.dock-left .app-name {
+  color: var(--eden-color-text-secondary);
+}
+
+.dock-left .separator {
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    var(--eden-color-border-medium) 20%,
+    var(--eden-color-border-medium) 80%,
+    transparent
+  );
+}
+
+.separator {
+  width: 1px;
+  height: 32px;
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    var(--eden-color-border-medium) 20%,
+    var(--eden-color-border-medium) 80%,
+    transparent
+  );
+  margin: 0 var(--eden-space-xs);
+}
+
+/* App Icon Styles */
+.app-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0px;
+  padding: 2px 4px;
+  cursor: pointer;
+  border-radius: var(--eden-radius-sm);
+  transition: all var(--eden-transition-base);
+  position: relative;
+  min-width: 44px;
+}
+
+.app-icon:hover {
+  transform: none;
+}
+
+.app-icon:hover .icon-container {
+  filter: brightness(1.1);
+}
+
+.app-icon:active {
+  transform: translateY(-2px) scale(1.05);
+}
+
+.app-icon.running {
+  background: var(--eden-color-bg-dark);
+}
+
+.icon-container {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--eden-radius-sm);
+  position: relative;
+  background: transparent;
+  box-shadow: none;
+  transition: transform 0.16s ease-out, filter 0.2s ease;
+}
+
+.icon-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.app-name {
+  font-size: var(--eden-font-size-sm);
+  color: var(--eden-color-text-primary);
+  text-align: center;
+  max-width: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: var(--eden-font-weight-medium);
+  position: absolute;
+  left: 50%;
+  top: calc(100% + 2px);
+  transform: translateX(-50%);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+
+.app-icon:hover .app-name {
+  opacity: 1;
+}
+
+.running-indicator {
+  position: absolute;
+  bottom: -2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 4px;
+  height: 4px;
+  background: var(--eden-color-text-primary);
+  border-radius: 50%;
+  box-shadow: none;
+}
+
+/* Clock Styles */
+.clock {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 1px;
+  user-select: none;
+}
+
+.clock .time {
+  font-size: var(--eden-font-size-md);
+  font-weight: var(--eden-font-weight-semibold);
+  color: var(--eden-color-text-primary);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: var(--eden-font-letter-spacing-normal);
+}
+
+.clock .date {
+  font-size: var(--eden-font-size-xs);
+  color: var(--eden-color-text-secondary);
+  font-weight: var(--eden-font-weight-medium);
+  letter-spacing: var(--eden-font-letter-spacing-tight);
+}
+
+/* ============================
+   All Apps - Minimal overrides
+   Uses eden-modal-*, eden-input, eden-btn from Eden CSS
+   ============================ */
+
+/* Override grid to fixed 4 columns */
+.eden-modal-body .eden-card-grid {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+/* App tile in the grid - square with centered content */
+.all-apps-tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--eden-space-md);
+  border-radius: var(--eden-radius-lg);
+  aspect-ratio: 1 / 1;
+}
+
+.all-apps-tile.running {
+  background: var(--eden-color-surface-active);
+}
+
+/* Override app-icon styles for grid view */
+.all-apps-tile .app-icon {
+  min-width: auto;
+  width: auto;
+}
+
+.all-apps-tile .icon-container {
+  width: 64px;
+  height: 64px;
+  border-radius: var(--eden-radius-lg);
+}
+
+.all-apps-tile .icon-container img {
+  width: 100%;
+  height: 100%;
+}
+
+.all-apps-tile .app-name {
+  position: static;
+  transform: none;
+  left: auto;
+  top: auto;
+  opacity: 1;
+  margin-top: var(--eden-space-sm);
+  font-size: var(--eden-font-size-sm);
+  font-weight: var(--eden-font-weight-medium);
+  color: var(--eden-color-text-primary);
+  text-align: center;
+  max-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Context Menu Icons */
+.eden-icon {
+  font-size: var(--eden-font-size-lg);
+  width: 20px;
+  text-align: center;
+  flex-shrink: 0;
+  font-family: var(--eden-font-family-base);
+  font-weight: var(--eden-font-weight-semibold);
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ============================
+   App Context Menu
+   ============================ */
+
+.context-menu-overlay {
+  background: transparent;
+  backdrop-filter: none;
+}
+
+.context-menu-title {
+  border-bottom: 1px solid var(--eden-color-border-light);
+  padding-bottom: var(--eden-space-xs);
+  margin-bottom: var(--eden-space-xs);
+}
+
+.context-menu-btn {
+  justify-content: flex-start;
+  width: 100%;
+}

package/apps/com/eden/eveshell/src/types.ts

@@ -0,0 +1,5 @@
+export interface AppInfo {
+  id: string;
+  name: string;
+  isRunning: boolean;
+}

package/apps/com/eden/eveshell/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "composite": true,
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "outDir": "../../dist/eveshell-types",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": [
+      "vite/client",
+      "@edenapp/types/global"
+    ]
+  },
+  "include": [
+    "./**/*.ts",
+    "./**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/apps/com/eden/eveshell/vite.config.mts

@@ -0,0 +1,23 @@
+import { defineConfig } from "vite";
+import solidPlugin from "vite-plugin-solid";
+import { fileURLToPath } from "url";
+import { dirname, resolve } from "path";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export default defineConfig({
+  plugins: [solidPlugin()],
+  base: "./",
+  root: __dirname,
+  build: {
+    outDir: "./dist",
+    emptyOutDir: true,
+    rollupOptions: {
+      input: resolve(__dirname, "index.html"),
+    },
+  },
+  resolve: {
+    conditions: ["development", "browser"],
+  },
+});

package/apps/com/eden/example/appbus/client-a/app.js

@@ -0,0 +1,239 @@
+// AppBus Client A
+// Connects to Hub for mediated chat + exposes direct-chat service for Isolated app
+
+const CLIENT_ID = 'com.eden.example.appbus.client-a';
+const NICKNAME = 'Client A';
+
+class ClientAApp {
+  constructor() {
+    this.hubConnection = null;
+    this.directConnections = new Map(); // Track direct connections from Isolated
+    
+    // DOM elements
+    this.hubStatus = document.getElementById('hub-status');
+    this.hubClientsCount = document.getElementById('hub-clients-count');
+    this.hubChat = document.getElementById('hub-chat');
+    this.hubMessage = document.getElementById('hub-message');
+    this.hubSendBtn = document.getElementById('hub-send-btn');
+    
+    this.directStatus = document.getElementById('direct-status');
+    this.directChat = document.getElementById('direct-chat');
+    this.directMessage = document.getElementById('direct-message');
+    this.directSendBtn = document.getElementById('direct-send-btn');
+    
+    this.setupEventListeners();
+    this.connectToHub();
+    this.exposeDirectChatService();
+  }
+
+  setupEventListeners() {
+    // Hub chat
+    this.hubSendBtn.addEventListener('click', () => this.sendHubMessage());
+    this.hubMessage.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') this.sendHubMessage();
+    });
+
+    // Direct chat
+    this.directSendBtn.addEventListener('click', () => this.sendDirectMessage());
+    this.directMessage.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') this.sendDirectMessage();
+    });
+  }
+
+  // === HUB CONNECTION ===
+  
+  async connectToHub() {
+    this.addHubMessage('Connecting to Hub...', 'system');
+    
+    try {
+      const result = await window.appBus.connect(
+        'com.eden.example.appbus.hub',
+        'chat-relay'
+      );
+
+      if ('error' in result) {
+        this.addHubMessage(`Failed: ${result.error}`, 'system');
+        return;
+      }
+
+      this.hubConnection = result;
+      this.hubStatus.textContent = 'Connected';
+      this.hubStatus.className = 'eden-badge eden-badge-success';
+
+      // Handle hub disconnect
+      this.hubConnection.onClose(() => {
+        this.addHubMessage('Hub connection closed', 'system');
+        this.hubStatus.textContent = 'Disconnected';
+        this.hubStatus.className = 'eden-badge eden-badge-danger';
+        this.hubConnection = null;
+      });
+
+      // Listen for incoming messages from Hub
+      this.hubConnection.on('chat-message', (data) => {
+        const isOwn = data.from === CLIENT_ID;
+        this.addHubMessage(`${data.nickname}: ${data.message}`, isOwn ? 'own' : 'other');
+      });
+
+      this.hubConnection.on('client-joined', (data) => {
+        this.addHubMessage(`${data.nickname} joined the chat`, 'system');
+        this.updateClientCount();
+      });
+
+      this.hubConnection.on('client-left', (data) => {
+        this.addHubMessage(`${data.nickname} left the chat`, 'system');
+        this.updateClientCount();
+      });
+
+      // Join the chat
+      const joinResult = await this.hubConnection.request('join', {
+        clientId: CLIENT_ID,
+        nickname: NICKNAME
+      });
+
+      if (joinResult.success) {
+        this.addHubMessage('Joined hub chat!', 'system');
+        this.hubClientsCount.textContent = joinResult.clients.length;
+      }
+
+    } catch (err) {
+      this.addHubMessage(`Error: ${err.message}`, 'system');
+    }
+  }
+
+  async sendHubMessage() {
+    const text = this.hubMessage.value.trim();
+    if (!text || !this.hubConnection) return;
+
+    this.hubMessage.value = '';
+
+    try {
+      await this.hubConnection.request('send-message', {
+        clientId: CLIENT_ID,
+        message: text
+      });
+    } catch (err) {
+      this.addHubMessage(`Send failed: ${err.message}`, 'system');
+    }
+  }
+
+  async updateClientCount() {
+    if (!this.hubConnection) return;
+    try {
+      const result = await this.hubConnection.request('list-clients', {});
+      this.hubClientsCount.textContent = result.clients.length;
+    } catch (err) {
+      console.error('Failed to get client count:', err);
+    }
+  }
+
+  addHubMessage(text, type = 'other') {
+    const div = document.createElement('div');
+    div.className = `chat-message ${type}`;
+    
+    const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    div.innerHTML = `<span class="time">${time}</span>${text}`;
+    
+    this.hubChat.appendChild(div);
+    this.hubChat.scrollTop = this.hubChat.scrollHeight;
+  }
+
+  // === DIRECT CHAT SERVICE ===
+  
+  async exposeDirectChatService() {
+    this.addDirectMessage('Exposing direct-chat service...', 'system');
+    
+    try {
+      // New API: onConnect callback receives a connection for each client
+      const result = await window.appBus.exposeService(
+        'direct-chat',
+        (connection, { appId }) => {
+          console.log(`[Client A] Isolated app connected: ${appId}`);
+          
+          // Store the connection
+          this.directConnections.set(appId, connection);
+          this.addDirectMessage(`${appId} connected!`, 'system');
+          
+          this.directStatus.textContent = 'Connected';
+          this.directStatus.className = 'eden-badge eden-badge-success';
+          
+          // Handle connection close
+          connection.onClose(() => {
+            this.addDirectMessage(`${appId} disconnected`, 'system');
+            this.directConnections.delete(appId);
+            if (this.directConnections.size === 0) {
+              this.directStatus.textContent = 'Waiting';
+              this.directStatus.className = 'eden-badge eden-badge-info';
+            }
+          });
+
+          // Handle incoming messages from Isolated
+          connection.on('message', (data) => {
+            this.addDirectMessage(`Isolated: ${data.text}`, 'other');
+          });
+          
+          // Handle requests from Isolated
+          connection.handle('ping', () => {
+            return { pong: true, from: NICKNAME };
+          });
+          
+          // Send welcome message
+          connection.send('message', { text: `Welcome! You're connected to ${NICKNAME}` });
+        },
+        {
+          description: 'Direct chat service for Isolated app'
+        }
+      );
+
+      if (result.success) {
+        this.directStatus.textContent = 'Waiting';
+        this.directStatus.className = 'eden-badge eden-badge-info';
+        this.addDirectMessage('Ready for Isolated app connection', 'system');
+      } else {
+        this.addDirectMessage(`Failed to expose: ${result.error}`, 'system');
+      }
+    } catch (err) {
+      this.addDirectMessage(`Error: ${err.message}`, 'system');
+    }
+  }
+
+  sendDirectMessage() {
+    const text = this.directMessage.value.trim();
+    if (!text) return;
+
+    this.directMessage.value = '';
+    
+    // Send to all connected direct clients
+    if (this.directConnections.size === 0) {
+      this.addDirectMessage('No clients connected', 'system');
+      return;
+    }
+    
+    this.addDirectMessage(`Me: ${text}`, 'own');
+    
+    this.directConnections.forEach((connection, appId) => {
+      try {
+        connection.send('message', { text, from: NICKNAME });
+      } catch (err) {
+        console.error(`Failed to send to ${appId}:`, err);
+      }
+    });
+  }
+
+  addDirectMessage(text, type = 'other') {
+    const div = document.createElement('div');
+    div.className = `chat-message ${type}`;
+    
+    const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    div.innerHTML = `<span class="time">${time}</span>${text}`;
+    
+    this.directChat.appendChild(div);
+    this.directChat.scrollTop = this.directChat.scrollHeight;
+  }
+}
+
+// Initialize when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => new ClientAApp());
+} else {
+  new ClientAApp();
+}