@edenapp/sdk 0.1.0

package/edencss/tokens.ts

@@ -0,0 +1,125 @@
+/**
+ * Eden CSS - TypeScript/JavaScript API
+ *
+ * ⚠️  AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+ *
+ * 🎯 SINGLE SOURCE OF TRUTH: src/design-system/tokens.json
+ *
+ * This file is generated from tokens.json using Style Dictionary.
+ * Run `npm run tokens:build` to regenerate
+ *
+ * This provides programmatic access to design tokens for TypeScript/JavaScript code.
+ */
+
+export const EdenColorBgPrimary =
+  "linear-gradient(135deg, #060b1a 0%, #111b33 45%, #1d2e57 100%)";
+export const EdenColorBgSecondary =
+  "linear-gradient(135deg, #1d2e57 0%, #354b86 50%, #6797f5 100%)";
+export const EdenColorBgGlassLight = "rgba(255, 255, 255, 0.04)";
+export const EdenColorBgGlassMedium = "rgba(255, 255, 255, 0.08)";
+export const EdenColorBgGlassStrong = "rgba(18, 24, 42, 0.55)";
+export const EdenColorBgOverlay = "rgba(8, 12, 24, 0.62)";
+export const EdenColorBgDark = "rgba(0, 0, 0, 0.04)";
+export const EdenColorSurfacePrimary = "#1e1e2e";
+export const EdenColorSurfaceSecondary = "#2d2d44";
+export const EdenColorSurfaceTertiary = "#3d3d5c";
+export const EdenColorSurfaceElevated = "rgba(255, 255, 255, 0.06)";
+export const EdenColorSurfaceHover = "rgba(255, 255, 255, 0.12)";
+export const EdenColorSurfaceActive = "rgba(255, 255, 255, 0.18)";
+export const EdenColorTextPrimary = "rgba(239, 244, 255, 0.96)";
+export const EdenColorTextSecondary = "rgba(234, 234, 234, 0.95)";
+export const EdenColorTextTertiary = "rgba(189, 189, 189, 0.9)";
+export const EdenColorTextMuted = "rgba(255, 255, 255, 0.6)";
+export const EdenColorTextInverse = "#1a1a1a";
+export const EdenColorTextOnDark = "#ffffff";
+export const EdenColorAccentPrimary = "#4a9eff";
+export const EdenColorAccentPrimaryHover = "#5ca8ff";
+export const EdenColorAccentPrimaryActive = "#3b8ee8";
+export const EdenColorAccentBlue = "rgb(82, 163, 255)";
+export const EdenColorAccentBlueDark = "rgb(54, 123, 255)";
+export const EdenColorAccentPurple = "#667eea";
+export const EdenColorAccentPurpleLight = "#7c92f0";
+export const EdenColorSuccess = "#51cf66";
+export const EdenColorSuccessHover = "#69db7c";
+export const EdenColorDanger = "#ff3b30";
+export const EdenColorDangerHover = "#ff6b6b";
+export const EdenColorDangerBg = "rgba(255, 59, 48, 0.1)";
+export const EdenColorWarning = "#ffd93d";
+export const EdenColorInfo = "#4dabf7";
+export const EdenColorBorderLight = "rgba(255, 255, 255, 0.06)";
+export const EdenColorBorderMedium = "rgba(255, 255, 255, 0.12)";
+export const EdenColorBorderDark = "rgba(0, 0, 0, 0.1)";
+export const EdenColorBorderSeparator = "rgba(255, 255, 255, 0.18)";
+export const EdenSpaceXs = "4px";
+export const EdenSpaceSm = "8px";
+export const EdenSpaceMd = "16px";
+export const EdenSpaceLg = "24px";
+export const EdenSpaceXl = "36px";
+export const EdenSpace2xl = "48px";
+export const EdenSpace3xl = "64px";
+export const EdenRadiusXs = "6px";
+export const EdenRadiusSm = "10px";
+export const EdenRadiusMd = "14px";
+export const EdenRadiusLg = "18px";
+export const EdenRadiusXl = "20px";
+export const EdenRadius2xl = "28px";
+export const EdenRadiusRound = "50%";
+export const EdenShadowXs = "0 1px 3px rgba(0, 0, 0, 0.3)";
+export const EdenShadowSm = "0 2px 6px rgba(0, 0, 0, 0.5)";
+export const EdenShadowMd = "0 8px 20px rgba(0, 0, 0, 0.28)";
+export const EdenShadowLg = "0 10px 30px rgba(0, 0, 0, 0.3)";
+export const EdenShadowXl = "0 20px 60px rgba(0, 0, 0, 0.3)";
+export const EdenShadow2xl = "0 28px 80px rgba(0, 0, 0, 0.45)";
+export const EdenShadowInner = "inset 0 1px 3px rgba(0, 0, 0, 0.2)";
+export const EdenGlassLight = "blur(10px) saturate(120%)";
+export const EdenGlassMedium = "blur(18px) saturate(140%)";
+export const EdenGlassStrong = "blur(26px) saturate(160%)";
+export const EdenGlassUltra = "blur(34px) saturate(170%)";
+export const EdenFontFamilyBase =
+  '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif';
+export const EdenFontFamilyMono =
+  '"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace';
+export const EdenFontSizeXs = "10px";
+export const EdenFontSizeSm = "11px";
+export const EdenFontSizeBase = "13px";
+export const EdenFontSizeMd = "14px";
+export const EdenFontSizeLg = "16px";
+export const EdenFontSizeXl = "18px";
+export const EdenFontSize2xl = "24px";
+export const EdenFontSize3xl = "32px";
+export const EdenFontSize4xl = "48px";
+export const EdenFontWeightNormal = 400;
+export const EdenFontWeightMedium = 500;
+export const EdenFontWeightSemibold = 600;
+export const EdenFontWeightBold = 700;
+export const EdenFontLineHeightTight = 1.2;
+export const EdenFontLineHeightNormal = 1.5;
+export const EdenFontLineHeightRelaxed = 1.75;
+export const EdenFontLetterSpacingTight = "-0.6px";
+export const EdenFontLetterSpacingNormal = "-0.2px";
+export const EdenFontLetterSpacingWide = "0.1px";
+export const EdenTransitionFast = "0.15s ease";
+export const EdenTransitionBase = "0.2s cubic-bezier(0.4, 0, 0.2, 1)";
+export const EdenTransitionSmooth = "0.3s cubic-bezier(0.4, 0, 0.2, 1)";
+export const EdenTransitionBounce =
+  "0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)";
+export const EdenTransitionEaseIn = "cubic-bezier(0.4, 0, 1, 1)";
+export const EdenTransitionEaseOut = "cubic-bezier(0, 0, 0.2, 1)";
+export const EdenTransitionEaseInOut = "cubic-bezier(0.4, 0, 0.2, 1)";
+export const EdenZBase = 0;
+export const EdenZDropdown = 100;
+export const EdenZSticky = 200;
+export const EdenZOverlay = 1000;
+export const EdenZModal = 2000;
+export const EdenZPopover = 2001;
+export const EdenZTooltip = 3000;
+export const EdenLayoutDockHeight = "72px";
+export const EdenLayoutIconSizeSm = "24px";
+export const EdenLayoutIconSizeMd = "40px";
+export const EdenLayoutIconSizeLg = "64px";
+export const EdenLayoutIconSizeXl = "88px";
+export const EdenDurationInstant = "0.1s";
+export const EdenDurationFast = "0.15s";
+export const EdenDurationNormal = "0.22s";
+export const EdenDurationSlow = "0.32s";
+export const EdenDurationSlower = "0.5s";

package/edencss/utilities.css

@@ -0,0 +1,423 @@
+/**
+ * Eden Design System - Utility Classes
+ * 
+ * Reusable utility classes for common styling patterns.
+ */
+
+/* ===== Glass Effects ===== */
+.eden-glass-light {
+  background: var(--eden-color-bg-glass-light);
+  backdrop-filter: var(--eden-glass-light);
+}
+
+.eden-glass-medium {
+  background: var(--eden-color-bg-glass-medium);
+  backdrop-filter: var(--eden-glass-medium);
+}
+
+.eden-glass-strong {
+  background: var(--eden-color-bg-glass-strong);
+  backdrop-filter: var(--eden-glass-strong);
+}
+
+.eden-glass-ultra {
+  backdrop-filter: var(--eden-glass-ultra);
+}
+
+/* ===== Shadows ===== */
+.eden-shadow-xs {
+  box-shadow: var(--eden-shadow-xs);
+}
+
+.eden-shadow-sm {
+  box-shadow: var(--eden-shadow-sm);
+}
+
+.eden-shadow-md {
+  box-shadow: var(--eden-shadow-md);
+}
+
+.eden-shadow-lg {
+  box-shadow: var(--eden-shadow-lg);
+}
+
+.eden-shadow-xl {
+  box-shadow: var(--eden-shadow-xl);
+}
+
+.eden-shadow-2xl {
+  box-shadow: var(--eden-shadow-2xl);
+}
+
+.eden-shadow-inner {
+  box-shadow: var(--eden-shadow-inner);
+}
+
+/* ===== Surfaces ===== */
+.eden-surface {
+  background: var(--eden-surface-primary);
+  color: var(--eden-text-primary);
+}
+
+.eden-surface-secondary {
+  background: var(--eden-surface-secondary);
+  color: var(--eden-text-primary);
+}
+
+.eden-surface-elevated {
+  background: var(--eden-surface-elevated);
+  color: var(--eden-text-primary);
+}
+
+/* ===== Text Utilities ===== */
+.eden-text-primary {
+  color: var(--eden-text-primary);
+}
+
+.eden-text-secondary {
+  color: var(--eden-text-secondary);
+}
+
+.eden-text-tertiary {
+  color: var(--eden-text-tertiary);
+}
+
+.eden-text-muted {
+  color: var(--eden-text-muted);
+}
+
+.eden-text-xs {
+  font-size: var(--eden-font-size-xs);
+}
+
+.eden-text-sm {
+  font-size: var(--eden-font-size-sm);
+}
+
+.eden-text-base {
+  font-size: var(--eden-font-size-base);
+}
+
+.eden-text-md {
+  font-size: var(--eden-font-size-md);
+}
+
+.eden-text-lg {
+  font-size: var(--eden-font-size-lg);
+}
+
+.eden-text-xl {
+  font-size: var(--eden-font-size-xl);
+}
+
+.eden-text-2xl {
+  font-size: var(--eden-font-size-2xl);
+}
+
+.eden-text-3xl {
+  font-size: var(--eden-font-size-3xl);
+}
+
+.eden-font-medium {
+  font-weight: var(--eden-font-weight-medium);
+}
+
+.eden-font-semibold {
+  font-weight: var(--eden-font-weight-semibold);
+}
+
+.eden-font-bold {
+  font-weight: var(--eden-font-weight-bold);
+}
+
+/* ===== Spacing Utilities ===== */
+.eden-m-xs {
+  margin: var(--eden-space-xs);
+}
+
+.eden-m-sm {
+  margin: var(--eden-space-sm);
+}
+
+.eden-m-md {
+  margin: var(--eden-space-md);
+}
+
+.eden-m-lg {
+  margin: var(--eden-space-lg);
+}
+
+.eden-m-xl {
+  margin: var(--eden-space-xl);
+}
+
+.eden-p-xs {
+  padding: var(--eden-space-xs);
+}
+
+.eden-p-sm {
+  padding: var(--eden-space-sm);
+}
+
+.eden-p-md {
+  padding: var(--eden-space-md);
+}
+
+.eden-p-lg {
+  padding: var(--eden-space-lg);
+}
+
+.eden-p-xl {
+  padding: var(--eden-space-xl);
+}
+
+.eden-gap-xs {
+  gap: var(--eden-space-xs);
+}
+
+.eden-gap-sm {
+  gap: var(--eden-space-sm);
+}
+
+.eden-gap-md {
+  gap: var(--eden-space-md);
+}
+
+.eden-gap-lg {
+  gap: var(--eden-space-lg);
+}
+
+.eden-gap-xl {
+  gap: var(--eden-space-xl);
+}
+
+/* ===== Layout Utilities ===== */
+.eden-flex {
+  display: flex;
+}
+
+.eden-flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.eden-flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.eden-flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.eden-grid {
+  display: grid;
+}
+
+.eden-grid-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.eden-grid-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.eden-grid-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+/* ===== Border Radius ===== */
+.eden-rounded-xs {
+  border-radius: var(--eden-radius-xs);
+}
+
+.eden-rounded-sm {
+  border-radius: var(--eden-radius-sm);
+}
+
+.eden-rounded-md {
+  border-radius: var(--eden-radius-md);
+}
+
+.eden-rounded-lg {
+  border-radius: var(--eden-radius-lg);
+}
+
+.eden-rounded-xl {
+  border-radius: var(--eden-radius-xl);
+}
+
+.eden-rounded-2xl {
+  border-radius: var(--eden-radius-2xl);
+}
+
+.eden-rounded-full {
+  border-radius: var(--eden-radius-round);
+}
+
+/* ===== Transitions ===== */
+.eden-transition {
+  transition: all var(--eden-transition-base);
+}
+
+.eden-transition-fast {
+  transition: all var(--eden-transition-fast);
+}
+
+.eden-transition-smooth {
+  transition: all var(--eden-transition-smooth);
+}
+
+/* ===== Interactive Elements ===== */
+.eden-interactive {
+  cursor: pointer;
+  transition: all var(--eden-transition-base);
+}
+
+.eden-interactive:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--eden-shadow-lg);
+}
+
+.eden-interactive:active {
+  transform: translateY(0);
+  box-shadow: var(--eden-shadow-md);
+}
+
+/* ===== Scrollbar ===== */
+.eden-scrollbar::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.eden-scrollbar::-webkit-scrollbar-track {
+  background: var(--eden-color-bg-glass-light);
+  border-radius: var(--eden-radius-xs);
+}
+
+.eden-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--eden-color-border-separator);
+  border-radius: var(--eden-radius-xs);
+}
+
+.eden-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--eden-color-surface-hover);
+}
+
+/* Default scrollbar for all scrollable elements */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--eden-color-border-separator) var(--eden-color-bg-glass-light);
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--eden-color-bg-glass-light);
+  border-radius: var(--eden-radius-xs);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--eden-color-border-separator);
+  border-radius: var(--eden-radius-xs);
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--eden-color-surface-hover);
+}
+
+/* ===== Overlay ===== */
+.eden-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--eden-bg-overlay);
+  backdrop-filter: var(--eden-glass-strong);
+  z-index: var(--eden-z-overlay);
+}
+
+/* ===== Animations ===== */
+@keyframes eden-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes eden-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes eden-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes eden-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes eden-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes eden-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+.eden-animate-fade-in {
+  animation: eden-fade-in var(--eden-duration-normal) var(--eden-ease-out);
+}
+
+.eden-animate-slide-up {
+  animation: eden-slide-up var(--eden-duration-slow) var(--eden-ease-out);
+}
+
+.eden-animate-scale-in {
+  animation: eden-scale-in var(--eden-duration-normal) var(--eden-ease-out);
+}

package/foundation/foundation-preload.js

@@ -0,0 +1,15 @@
+// Foundation Preload Script
+// Provides safe IPC communication for the foundation layer
+
+const { contextBridge, ipcRenderer } = require('electron');
+
+// Expose a safe edenAPI to the foundation renderer
+contextBridge.exposeInMainWorld('edenAPI', {
+    // Shell commands
+    shellCommand: (command, args) => {
+        return ipcRenderer.invoke('shell-command', command, args);
+    },
+
+});
+
+console.log('Foundation preload script loaded');

package/foundation/foundation.css

@@ -0,0 +1,40 @@
+/* Foundation Layer Styles */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+body {
+    font-family: var(--eden-font-family-base);
+    /* Use Eden background - foundation is the lowest Z layer */
+    background: var(--eden-color-bg-primary);
+    color: var(--eden-color-text-primary);
+}
+
+#foundation-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+#workspace {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    /* Transparent to allow views to show through */
+    background: transparent;
+    /* Don't capture pointer events - let app views handle them */
+    pointer-events: none;
+    /* Reserve space for dock at the bottom (72px = DOCK_HEIGHT) */
+    padding-bottom: 72px;
+    box-sizing: border-box;
+}

package/foundation/foundation.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Eden Foundation</title>
+    <link rel="stylesheet" href="../edencss/eden.css">
+    <link rel="stylesheet" href="./foundation.css">
+</head>
+
+<body>
+    <!-- Foundation provides the base layer and workspace area -->
+    <div id="foundation-container">
+        <!-- Workspace area where app views will be positioned -->
+        <div id="workspace"></div>
+    </div>
+
+    <script src="./foundation.js"></script>
+</body>
+
+</html>

package/foundation/foundation.js

@@ -0,0 +1,69 @@
+// Foundation Layer
+// Handles workspace area reporting and global event handling
+
+(function () {
+    'use strict';
+
+    console.log('Foundation layer initializing...');
+
+    const workspace = document.getElementById('workspace');
+    if (!workspace) {
+        console.error('Workspace element not found!');
+        return;
+    }
+
+    /**
+     * Report workspace bounds to the backend
+     */
+    function reportWorkspaceBounds() {
+        const rect = workspace.getBoundingClientRect();
+        const bounds = {
+            x: Math.round(rect.left),
+            y: Math.round(rect.top),
+            width: Math.round(rect.width),
+            height: Math.round(rect.height) - 72,
+        };
+
+        // Get window size from body
+        const windowSize = {
+            width: Math.round(document.body.clientWidth),
+            height: Math.round(document.body.clientHeight),
+        };
+
+        // Send to backend via eden API (provided by preload)
+        window.edenAPI.shellCommand('view/update-global-bounds', { bounds, windowSize })
+            .catch((error) => {
+                console.error('Failed to update global bounds:', error);
+            });
+    }
+
+    /**
+     * Handle global mouseup events
+     * Cleanup for any active drag/resize operations happening in app views
+     */
+    function handleGlobalMouseUp() {
+        window.edenAPI.shellCommand('view/global-mouseup', {})
+            .catch((error) => {
+                console.error('Failed to send global-mouseup:', error);
+            });
+    }
+
+    // Initial workspace bounds report
+    reportWorkspaceBounds();
+
+    // Watch for workspace resizes
+    const resizeObserver = new ResizeObserver(() => {
+        reportWorkspaceBounds();
+    });
+    resizeObserver.observe(workspace);
+
+    // Listen for global mouseup events
+    window.addEventListener('mouseup', handleGlobalMouseUp);
+
+    // Listen for window resize events
+    window.addEventListener('resize', () => {
+        reportWorkspaceBounds();
+    });
+
+    console.log('Foundation layer initialized');
+})();