@edenapp/sdk 0.1.0

package/apps/com/eden/toaster/node_modules/.bin/vite

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/dariusz/Desktop/eden/node_modules/.pnpm/vite@5.4.21_@types+node@22.19.1/node_modules/vite/bin/node_modules:/home/dariusz/Desktop/eden/node_modules/.pnpm/vite@5.4.21_@types+node@22.19.1/node_modules/vite/node_modules:/home/dariusz/Desktop/eden/node_modules/.pnpm/vite@5.4.21_@types+node@22.19.1/node_modules:/home/dariusz/Desktop/eden/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/dariusz/Desktop/eden/node_modules/.pnpm/vite@5.4.21_@types+node@22.19.1/node_modules/vite/bin/node_modules:/home/dariusz/Desktop/eden/node_modules/.pnpm/vite@5.4.21_@types+node@22.19.1/node_modules/vite/node_modules:/home/dariusz/Desktop/eden/node_modules/.pnpm/vite@5.4.21_@types+node@22.19.1/node_modules:/home/dariusz/Desktop/eden/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../vite/bin/vite.js" "$@"
+else
+  exec node  "$basedir/../vite/bin/vite.js" "$@"
+fi

package/apps/com/eden/toaster/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "com.eden.toaster",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@edenapp/types": "workspace:*",
+    "vite": "^5.4.14"
+  }
+}

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

@@ -0,0 +1,159 @@
+/* Eden Toaster Styles */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  font-family: var(--eden-font-family-base);
+  overflow: hidden;
+}
+
+#toast-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--eden-space-md);
+  width: 100%;
+}
+
+.toast {
+  min-width: 320px;
+  max-width: 320px;
+  max-height: 400px; /* Clip very long messages */
+  padding: var(--eden-space-lg) var(--eden-space-lg);
+  padding-bottom: calc(
+    var(--eden-space-lg) + var(--eden-space-sm) + 4px
+  ); /* Extra space for progress bar */
+  overflow: hidden;
+
+  /* Override eden-card-glass large shadow due to restricted view's size */
+  box-shadow: var(--eden-shadow-xs);
+}
+
+.toast-inner {
+  display: flex;
+  align-items: center;
+  gap: var(--eden-space-md);
+}
+
+.toast-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.toast-title {
+  font-size: var(--eden-font-size-md);
+  font-weight: var(--eden-font-weight-semibold);
+  color: var(--eden-color-text-primary);
+  margin-bottom: var(--eden-space-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.toast-message {
+  font-size: var(--eden-font-size-sm);
+  color: var(--eden-color-text-secondary);
+  line-height: var(--eden-font-line-height-normal);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  /* Clamp to ~15 lines with ellipsis */
+  display: -webkit-box;
+  -webkit-line-clamp: 15;
+  line-clamp: 15;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.toast-dismiss {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: var(--eden-color-text-muted);
+  font-size: var(--eden-font-size-xl);
+  cursor: pointer;
+  padding: var(--eden-space-xs);
+  border-radius: var(--eden-radius-sm);
+  transition: color var(--eden-transition-fast),
+    background var(--eden-transition-fast);
+}
+
+.toast-dismiss:hover {
+  color: var(--eden-color-text-primary);
+  background: var(--eden-color-bg-glass-light);
+}
+
+/* Progress container - positioned at bottom */
+.toast-progress-container {
+  position: absolute;
+  bottom: var(--eden-space-sm);
+  left: var(--eden-space-md);
+  right: var(--eden-space-md);
+}
+
+/* Override eden-progress sizing for toast */
+.toast-progress-container .eden-progress {
+  height: 4px;
+  border: none;
+  background: var(--eden-color-bg-glass-light);
+}
+
+/* Decaying progress bar animation */
+.toast-progress-container .eden-progress-bar {
+  animation: toast-decay linear forwards;
+}
+
+@keyframes toast-decay {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+
+/* Ensure toast has relative positioning for progress bar */
+.toast {
+  position: relative;
+}
+
+/* ===== Notification Type Variants ===== */
+
+/* Success */
+.toast-success .eden-progress-bar {
+  background: linear-gradient(
+    90deg,
+    var(--eden-color-success),
+    var(--eden-color-success-hover)
+  );
+  box-shadow: 0 0 10px rgba(81, 207, 102, 0.5);
+}
+
+/* Warning */
+.toast-warning .eden-progress-bar {
+  background: var(--eden-color-warning);
+  box-shadow: 0 0 10px rgba(255, 217, 61, 0.5);
+}
+
+/* Danger */
+.toast-danger .eden-progress-bar {
+  background: linear-gradient(
+    90deg,
+    var(--eden-color-danger),
+    var(--eden-color-danger-hover)
+  );
+  box-shadow: 0 0 10px rgba(255, 59, 48, 0.5);
+}
+
+/* ===== Dismiss All Button ===== */
+.dismiss-all-btn {
+  margin-bottom: var(--eden-space-sm);
+  width: 100%;
+  font-size: var(--eden-font-size-sm);
+  padding: var(--eden-space-sm) var(--eden-space-md);
+}

package/apps/com/eden/toaster/src/toaster.ts

@@ -0,0 +1,470 @@
+/**
+ * Eden Toaster - Toast Notification Display
+ *
+ * Subscribes to notification events and displays toasts in the configured corner.
+ * Dynamically resizes the overlay based on visible toast count.
+ * Handles timeout/pause logic locally.
+ */
+
+import type { WindowSize, ViewBounds, Notification } from "@edenapp/types";
+
+// Configuration
+interface ToasterConfig {
+  corner: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+  toastWidth: number;
+  spacing: number;
+  marginX: number;
+  marginY: number;
+}
+
+const CONFIG: ToasterConfig = {
+  corner: "bottom-right",
+  toastWidth: 320,
+  spacing: 16,
+  marginX: 16,
+  marginY: 96,
+};
+
+interface ActiveToast extends Notification {
+  element: HTMLElement;
+  timeoutId: number | null;
+  remainingTime: number;
+  isPaused: boolean;
+  isHoverPaused: boolean;
+  startTime: number;
+}
+
+// Visible toasts currently displayed
+const visibleToasts = new Map<string, ActiveToast>();
+
+// Queue of pending notifications (waiting to be shown)
+const pendingQueue: Notification[] = [];
+
+let windowSize: WindowSize | null = null;
+
+/**
+ * Get current window size from Eden API
+ */
+async function fetchWindowSize(): Promise<WindowSize> {
+  try {
+    const size = await window.edenAPI.shellCommand("view/window-size", {});
+    windowSize = size;
+    return size;
+  } catch (err) {
+    console.error("Failed to get window size:", err);
+    return { width: 1280, height: 800 };
+  }
+}
+
+/**
+ * Calculate max available height for toasts
+ */
+function getMaxHeight(): number {
+  const ws = windowSize || { width: 1280, height: 800 };
+  return ws.height - CONFIG.marginY * 2;
+}
+
+/**
+ * Calculate current total height of visible toasts
+ */
+function getVisibleToastsHeight(): number {
+  let totalHeight = 0;
+  let count = 0;
+  for (const toast of visibleToasts.values()) {
+    totalHeight += toast.element.offsetHeight || 100;
+    count++;
+  }
+  if (count > 1) {
+    totalHeight += (count - 1) * CONFIG.spacing;
+  }
+  return totalHeight;
+}
+
+/**
+ * Check if there's room for another toast
+ */
+function hasRoomForToast(estimatedHeight: number = 120): boolean {
+  const currentHeight = getVisibleToastsHeight();
+  const maxHeight = getMaxHeight();
+  const neededHeight =
+    currentHeight +
+    (visibleToasts.size > 0 ? CONFIG.spacing : 0) +
+    estimatedHeight;
+  return neededHeight <= maxHeight;
+}
+
+/**
+ * Calculate overlay bounds based on visible toast heights
+ */
+function calculateBounds(): ViewBounds {
+  const container = document.getElementById("toast-container");
+
+  if (visibleToasts.size === 0 || !container) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+
+  const ws = windowSize || { width: 1280, height: 800 };
+
+  // Use container's scrollHeight to get actual content height
+  const totalHeight = container.scrollHeight;
+
+  const width = CONFIG.toastWidth;
+  const height = totalHeight;
+
+  // Calculate position based on corner
+  let x: number, y: number;
+  switch (CONFIG.corner) {
+    case "top-left":
+      x = CONFIG.marginX;
+      y = CONFIG.marginY;
+      break;
+    case "top-right":
+      x = ws.width - width - CONFIG.marginX;
+      y = CONFIG.marginY;
+      break;
+    case "bottom-left":
+      x = CONFIG.marginX;
+      y = ws.height - height - CONFIG.marginY;
+      break;
+    case "bottom-right":
+    default:
+      x = ws.width - width - CONFIG.marginX;
+      y = ws.height - height - CONFIG.marginY;
+      break;
+  }
+
+  return { x, y, width, height };
+}
+
+/**
+ * Update overlay bounds via Eden API
+ */
+async function updateOverlayBounds(): Promise<void> {
+  const bounds = calculateBounds();
+  try {
+    await window.edenAPI.shellCommand("view/update-view-bounds", {
+      appId: "com.eden.toaster",
+      bounds,
+    });
+  } catch (err) {
+    console.error("Failed to update overlay bounds:", err);
+  }
+}
+
+/**
+ * Escape HTML to prevent XSS
+ */
+function escapeHtml(text: string): string {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+/**
+ * Show next toast from the pending queue
+ */
+function showNextPendingToast(): void {
+  if (pendingQueue.length === 0) return;
+  if (!hasRoomForToast()) return;
+
+  // Get the oldest pending notification (FIFO)
+  const notification = pendingQueue.shift()!;
+  displayToast(notification);
+}
+
+/**
+ * Dismiss a toast locally
+ */
+function dismissToast(id: string): void {
+  const toast = visibleToasts.get(id);
+  if (!toast) return;
+
+  // Clear timeout
+  if (toast.timeoutId !== null) {
+    clearTimeout(toast.timeoutId);
+  }
+
+  // Remove immediately
+  toast.element.remove();
+  visibleToasts.delete(id);
+  updateDismissAllButton();
+  updateOverlayBounds();
+
+  // Try to show next pending toast
+  showNextPendingToast();
+}
+
+/**
+ * Dismiss all visible toasts and clear pending queue
+ */
+function dismissAllToasts(): void {
+  // Clear pending queue
+  pendingQueue.length = 0;
+
+  // Dismiss all visible toasts immediately
+  for (const toast of visibleToasts.values()) {
+    if (toast.timeoutId !== null) {
+      clearTimeout(toast.timeoutId);
+    }
+    toast.element.remove();
+  }
+  visibleToasts.clear();
+  updateDismissAllButton();
+  updateOverlayBounds();
+}
+
+/**
+ * Show/hide the dismiss all button based on toast count
+ */
+function updateDismissAllButton(): void {
+  const container = document.getElementById("toast-container");
+  if (!container) return;
+
+  let btn = document.getElementById("dismiss-all-btn");
+  const totalCount = visibleToasts.size + pendingQueue.length;
+
+  if (totalCount > 1) {
+    // Show button
+    if (!btn) {
+      btn = document.createElement("button");
+      btn.id = "dismiss-all-btn";
+      btn.className = "dismiss-all-btn eden-btn eden-btn-ghost";
+      btn.textContent = "Dismiss All";
+      btn.addEventListener("click", dismissAllToasts);
+      // Prepend so it's always at the top
+      container.prepend(btn);
+    }
+    // Update count
+    btn.textContent = `Dismiss All (${totalCount})`;
+  } else {
+    // Hide button
+    if (btn) {
+      btn.remove();
+    }
+  }
+}
+
+/**
+ * Pause toast timeout (on hover)
+ */
+function pauseToast(id: string): void {
+  const toast = visibleToasts.get(id);
+  if (!toast || toast.isHoverPaused) return;
+
+  toast.isHoverPaused = true;
+
+  if (!toast.isPaused) {
+    doPauseToast(toast);
+  }
+}
+
+/**
+ * Resume toast timeout (on mouse leave)
+ */
+function resumeToast(id: string): void {
+  const toast = visibleToasts.get(id);
+  if (!toast || !toast.isHoverPaused) return;
+
+  toast.isHoverPaused = false;
+
+  if (toast.isPaused) {
+    doResumeToast(toast);
+  }
+}
+
+/**
+ * Actually pause the toast timer and animation
+ */
+function doPauseToast(toast: ActiveToast): void {
+  if (toast.isPaused) return;
+
+  // Clear current timeout
+  if (toast.timeoutId !== null) {
+    clearTimeout(toast.timeoutId);
+    toast.timeoutId = null;
+  }
+
+  // Calculate remaining time
+  const elapsed = Date.now() - toast.startTime;
+  toast.remainingTime = Math.max(0, toast.remainingTime - elapsed);
+  toast.isPaused = true;
+
+  // Pause the progress bar animation
+  const progressBar = toast.element.querySelector(
+    ".eden-progress-bar"
+  ) as HTMLElement;
+  if (progressBar) {
+    progressBar.style.animationPlayState = "paused";
+  }
+}
+
+/**
+ * Actually resume the toast timer and animation
+ */
+function doResumeToast(toast: ActiveToast): void {
+  if (!toast.isPaused) return;
+
+  toast.isPaused = false;
+  toast.startTime = Date.now();
+
+  // Resume the progress bar animation
+  const progressBar = toast.element.querySelector(
+    ".eden-progress-bar"
+  ) as HTMLElement;
+  if (progressBar) {
+    progressBar.style.animationPlayState = "running";
+  }
+
+  // Set new timeout with remaining time
+  if (toast.remainingTime > 0) {
+    toast.timeoutId = window.setTimeout(() => {
+      dismissToast(toast.id);
+    }, toast.remainingTime);
+  } else {
+    dismissToast(toast.id);
+  }
+}
+
+/**
+ * Create a toast element
+ */
+function createToastElement(notification: Notification): HTMLElement {
+  const toast = document.createElement("div");
+  const type = notification.type || "info";
+  const isPersistent = !notification.timeout || notification.timeout <= 0;
+  toast.className = `toast eden-card-glass toast-${type}${
+    isPersistent ? " toast-persistent" : ""
+  }`;
+  toast.dataset.id = notification.id;
+
+  // Build progress bar HTML only for non-persistent notifications
+  const progressHtml = isPersistent
+    ? ""
+    : `
+    <div class="toast-progress-container">
+      <div class="eden-progress">
+        <div class="eden-progress-bar" style="animation-duration: ${notification.timeout}ms;"></div>
+      </div>
+    </div>
+  `;
+
+  toast.innerHTML = `
+    <div class="toast-inner">
+      <div class="toast-content">
+        <div class="toast-title">${escapeHtml(notification.title)}</div>
+        <div class="toast-message">${escapeHtml(notification.message)}</div>
+      </div>
+      <button class="toast-dismiss" aria-label="Dismiss">×</button>
+    </div>
+    ${progressHtml}
+  `;
+
+  // Handle dismiss click
+  const dismissBtn = toast.querySelector(".toast-dismiss");
+  dismissBtn?.addEventListener("click", (e) => {
+    e.stopPropagation();
+    dismissToast(notification.id);
+  });
+
+  // Pause on hover (only for non-persistent)
+  if (!isPersistent) {
+    toast.addEventListener("mouseenter", () => {
+      pauseToast(notification.id);
+    });
+
+    // Resume on mouse leave
+    toast.addEventListener("mouseleave", () => {
+      resumeToast(notification.id);
+    });
+  }
+
+  return toast;
+}
+
+/**
+ * Display a toast (actually render it)
+ */
+function displayToast(notification: Notification): void {
+  const container = document.getElementById("toast-container");
+  if (!container) return;
+
+  const element = createToastElement(notification);
+
+  // Always append at the end - oldest at bottom, newest at top
+  container.appendChild(element);
+
+  const isPersistent = !notification.timeout || notification.timeout <= 0;
+
+  // Set up timeout only for non-persistent notifications
+  let timeoutId: number | null = null;
+  if (!isPersistent) {
+    timeoutId = window.setTimeout(() => {
+      dismissToast(notification.id);
+    }, notification.timeout);
+  }
+
+  const toast: ActiveToast = {
+    ...notification,
+    element,
+    timeoutId,
+    remainingTime: notification.timeout ?? 0,
+    isPaused: false,
+    isHoverPaused: false,
+    startTime: Date.now(),
+  };
+
+  visibleToasts.set(notification.id, toast);
+
+  // Update dismiss all button and bounds
+  updateDismissAllButton();
+  updateOverlayBounds();
+}
+
+/**
+ * Handle new toast notification
+ */
+function handleToastAdded(data: { notification: Notification }): void {
+  const { notification } = data;
+
+  if (hasRoomForToast()) {
+    // Show immediately
+    displayToast(notification);
+  } else {
+    // Add to pending queue (will be shown when space is available)
+    pendingQueue.push(notification);
+    updateDismissAllButton();
+    console.log(
+      `Toast queued: ${notification.id} (${pendingQueue.length} pending)`
+    );
+  }
+}
+
+/**
+ * Initialize the toaster
+ */
+async function init(): Promise<void> {
+  console.log("Eden Toaster initializing...");
+
+  // Fetch initial window size
+  await fetchWindowSize();
+
+  // Subscribe to notification events
+  window.edenAPI.subscribe("notification/added", handleToastAdded);
+
+  // Subscribe to window size changes
+  window.edenAPI.subscribe(
+    "view/global-bounds-changed",
+    (data: { windowSize: WindowSize }) => {
+      windowSize = data.windowSize;
+      updateOverlayBounds();
+    }
+  );
+
+  // Initial bounds (0x0)
+  await updateOverlayBounds();
+
+  console.log("Eden Toaster ready!");
+}
+
+// Start
+init();

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

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": [
+      "@edenapp/types"
+    ]
+  },
+  "include": [
+    "src"
+  ]
+}

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

@@ -0,0 +1,18 @@
+import { defineConfig } from "vite";
+import * as path from "path";
+
+export default defineConfig({
+  root: __dirname,
+  base: "./",
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+    rollupOptions: {
+      input: path.resolve(__dirname, "index.html"),
+    },
+  },
+  server: {
+    port: 5200,
+    strictPort: true,
+  },
+});