@edenapp/sdk 0.1.0

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

@@ -0,0 +1,301 @@
+import { createSignal, createEffect, onMount, For, Show } from "solid-js";
+import { createStore } from "solid-js/store";
+import type { Component } from "solid-js";
+import type { AppManifest, SettingsCategory } from "@edenapp/types";
+import { FiSettings, FiCode, FiPackage } from "solid-icons/fi";
+import { VsSettings, VsSymbolColor, VsPulse } from "solid-icons/vs";
+import SettingInput from "./components/SettingInput";
+import "./App.css";
+
+interface SelectedItem {
+  type: "eden" | "app";
+  id: string;
+  label: string;
+}
+
+const App: Component = () => {
+  const [apps, setApps] = createSignal<AppManifest[]>([]);
+  const [appIcons, setAppIcons] = createSignal<Record<string, string>>({});
+  const [edenSchema, setEdenSchema] = createSignal<SettingsCategory[]>([]);
+  const [selectedItem, setSelectedItem] = createSignal<SelectedItem | null>(null);
+  const [currentSettings, setCurrentSettings] = createSignal<SettingsCategory[]>([]);
+  const [settingValues, setSettingValues] = createStore<Record<string, string>>({});
+  const [loading, setLoading] = createSignal(true);
+
+  onMount(async () => {
+    await Promise.all([loadEdenSchema(), loadApps()]);
+    setLoading(false);
+  });
+
+  const loadEdenSchema = async () => {
+    try {
+      const result = await window.edenAPI!.shellCommand("settings/schema", {});
+      setEdenSchema(result.schema);
+    } catch (error) {
+      console.error("Failed to load Eden schema:", error);
+    }
+  };
+
+  const loadApps = async () => {
+    try {
+      const result = await window.edenAPI!.shellCommand("package/list", { showHidden: true });
+      const appsWithSettings = result.filter((app: AppManifest) => 
+        app.settings && app.settings.length > 0
+      );
+      setApps(appsWithSettings);
+
+      const icons: Record<string, string> = {};
+      for (const app of appsWithSettings) {
+        try {
+          const iconResult = await window.edenAPI!.shellCommand("package/get-icon", { appId: app.id });
+          if (iconResult.icon) {
+            icons[app.id] = iconResult.icon;
+          }
+        } catch {
+          // Icon not available
+        }
+      }
+      setAppIcons(icons);
+    } catch (error) {
+      console.error("Failed to load apps:", error);
+    }
+  };
+
+  createEffect(() => {
+    const item = selectedItem();
+    if (!item) return;
+
+    if (item.type === "eden") {
+      loadEdenSettings(item.id);
+    } else {
+      loadAppSettings(item.id);
+    }
+  });
+
+  const loadEdenSettings = async (categoryId: string) => {
+    const schema = edenSchema();
+    const category = schema.find((c) => c.id === categoryId);
+    if (!category) return;
+
+    setCurrentSettings([category]);
+
+    const values: Record<string, string> = {};
+    try {
+      // Eden settings use appId "com.eden"
+      const result = await window.edenAPI!.shellCommand("settings/get-all/su", { appId: "com.eden" });
+      for (const setting of category.settings) {
+        values[setting.key] = result.settings[setting.key] ?? setting.defaultValue ?? "";
+      }
+    } catch (error) {
+      console.error("Failed to load Eden settings:", error);
+      for (const setting of category.settings) {
+        values[setting.key] = setting.defaultValue ?? "";
+      }
+    }
+
+    setSettingValues(values);
+  };
+
+  const loadAppSettings = async (appId: string) => {
+    const app = apps().find((a) => a.id === appId);
+    if (!app?.settings) return;
+
+    setCurrentSettings(app.settings);
+
+    const values: Record<string, string> = {};
+    try {
+      const result = await window.edenAPI!.shellCommand("settings/get-all/su", { appId });
+      for (const category of app.settings) {
+        for (const setting of category.settings) {
+          values[setting.key] = result.settings[setting.key] ?? setting.defaultValue ?? "";
+        }
+      }
+    } catch (error) {
+      console.error("Failed to load app settings:", error);
+      for (const category of app.settings) {
+        for (const setting of category.settings) {
+          values[setting.key] = setting.defaultValue ?? "";
+        }
+      }
+    }
+
+    setSettingValues(values);
+  };
+
+  const handleSettingChange = async (key: string, value: string) => {
+    setSettingValues(key, value);
+
+    const item = selectedItem();
+    if (!item) return;
+
+    try {
+      if (item.type === "eden") {
+        // Eden settings use appId "com.eden"
+        await window.edenAPI!.shellCommand("settings/set/su", {
+          appId: "com.eden",
+          key,
+          value,
+        });
+      } else {
+        await window.edenAPI!.shellCommand("settings/set/su", {
+          appId: item.id,
+          key,
+          value,
+        });
+      }
+    } catch (error) {
+      console.error("Failed to save setting:", error);
+    }
+  };
+
+  const handleSelectEdenCategory = (category: SettingsCategory) => {
+    setSelectedItem({
+      type: "eden",
+      id: category.id,
+      label: category.name,
+    });
+  };
+
+  const handleSelectApp = (app: AppManifest) => {
+    setSelectedItem({
+      type: "app",
+      id: app.id,
+      label: app.name,
+    });
+  };
+
+  const getCategoryIcon = (iconName?: string) => {
+    switch (iconName) {
+      case "palette":
+        return <VsSymbolColor />;
+      case "settings":
+        return <VsPulse />;
+      case "code":
+        return <FiCode />;
+      default:
+        return <FiSettings />;
+    }
+  };
+
+  return (
+    <div class="settings-app">
+      {/* Sidebar - using edencss sidebar component */}
+      <aside class="eden-sidebar">
+        <div class="eden-sidebar-section">
+          <div class="eden-sidebar-section-title">Eden</div>
+          <div class="eden-sidebar-items">
+            <For each={edenSchema()}>
+              {(category) => (
+                <div
+                  class={`eden-sidebar-item ${selectedItem()?.type === "eden" && selectedItem()?.id === category.id ? "eden-sidebar-item-selected" : ""}`}
+                  onClick={() => handleSelectEdenCategory(category)}
+                >
+                  <div class="eden-sidebar-item-icon">
+                    {getCategoryIcon(category.icon)}
+                  </div>
+                  <span class="eden-sidebar-item-text">{category.name}</span>
+                </div>
+              )}
+            </For>
+          </div>
+        </div>
+
+        <div class="eden-sidebar-divider" />
+
+        <div class="eden-sidebar-section eden-sidebar-section-scrollable">
+          <div class="eden-sidebar-section-title">Applications</div>
+          <div class="eden-sidebar-items eden-sidebar-items-scrollable">
+            <Show
+              when={apps().length > 0}
+              fallback={
+                <div class="eden-sidebar-item eden-sidebar-item-disabled">
+                  <div class="eden-sidebar-item-icon"><FiPackage /></div>
+                  <span class="eden-sidebar-item-text">No apps with settings</span>
+                </div>
+              }
+            >
+              <For each={apps()}>
+                {(app) => (
+                  <div
+                    class={`eden-sidebar-item ${selectedItem()?.type === "app" && selectedItem()?.id === app.id ? "eden-sidebar-item-selected" : ""}`}
+                    onClick={() => handleSelectApp(app)}
+                  >
+                    <div class="eden-sidebar-item-icon">
+                      <Show
+                        when={appIcons()[app.id]}
+                        fallback={<FiPackage />}
+                      >
+                        <img src={appIcons()[app.id]} alt="" />
+                      </Show>
+                    </div>
+                    <span class="eden-sidebar-item-text">{app.name}</span>
+                  </div>
+                )}
+              </For>
+            </Show>
+          </div>
+        </div>
+      </aside>
+
+      {/* Main Content */}
+      <main class="main-content">
+        <Show
+          when={!loading()}
+          fallback={<div class="loading"><span class="loading-spinner">⟳</span> Loading...</div>}
+        >
+          <Show
+            when={selectedItem()}
+            fallback={
+              <div class="empty-state">
+                <div class="empty-state-icon"><VsSettings /></div>
+                <div class="empty-state-text">Select a category from the sidebar</div>
+              </div>
+            }
+          >
+            {(item) => (
+              <>
+                <header class="content-header">
+                  <h1 class="content-title">{item().label}</h1>
+                  <Show when={item().type === "app"}>
+                    <p class="content-description">{apps().find(a => a.id === item().id)?.description}</p>
+                  </Show>
+                </header>
+
+                <div class="settings-list">
+                  <For each={currentSettings()}>
+                    {(category) => (
+                      <>
+                        <Show when={currentSettings().length > 1}>
+                          <h3 class="category-header">{category.name}</h3>
+                        </Show>
+                        <For each={category.settings}>
+                          {(setting) => (
+                            <div class="setting-item">
+                              <div class="setting-info">
+                                <h4 class="setting-label">{setting.label}</h4>
+                                <Show when={setting.description}>
+                                  <p class="setting-description">{setting.description}</p>
+                                </Show>
+                              </div>
+                              <SettingInput
+                                setting={setting}
+                                value={settingValues[setting.key] ?? setting.defaultValue ?? ""}
+                                onChange={(value) => handleSettingChange(setting.key, value)}
+                              />
+                            </div>
+                          )}
+                        </For>
+                      </>
+                    )}
+                  </For>
+                </div>
+              </>
+            )}
+          </Show>
+        </Show>
+      </main>
+    </div>
+  );
+};
+
+export default App;

package/apps/com/eden/settings/src/components/SettingInput.tsx

@@ -0,0 +1,131 @@
+import { Component, Show, For } from "solid-js";
+import type { SettingDefinition } from "@edenapp/types";
+
+interface SettingInputProps {
+  setting: SettingDefinition;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+const SettingInput: Component<SettingInputProps> = (props) => {
+  const handleCheckbox = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    props.onChange(target.checked ? "true" : "false");
+  };
+
+  const handleInput = (e: Event) => {
+    const target = e.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+    props.onChange(target.value);
+  };
+
+  return (
+    <div class="setting-control">
+      {/* Toggle */}
+      <Show when={props.setting.type === "toggle"}>
+        <input
+          type="checkbox"
+          class="eden-toggle"
+          checked={props.value === "true"}
+          onChange={handleCheckbox}
+        />
+      </Show>
+
+      {/* Checkbox */}
+      <Show when={props.setting.type === "checkbox"}>
+        <input
+          type="checkbox"
+          class="eden-checkbox"
+          checked={props.value === "true"}
+          onChange={handleCheckbox}
+        />
+      </Show>
+
+      {/* Select */}
+      <Show when={props.setting.type === "select"}>
+        <select class="eden-select" value={props.value} onChange={handleInput} style={{ "min-width": "160px" }}>
+          <For each={props.setting.options}>
+            {(option) => (
+              <option value={option.value}>{option.label}</option>
+            )}
+          </For>
+        </select>
+      </Show>
+
+      {/* Radio */}
+      <Show when={props.setting.type === "radio"}>
+        <div class="eden-radio-group">
+          <For each={props.setting.options}>
+            {(option) => (
+              <label class="eden-radio-option">
+                <input
+                  type="radio"
+                  class="eden-radio"
+                  name={props.setting.key}
+                  value={option.value}
+                  checked={props.value === option.value}
+                  onChange={handleInput}
+                />
+                <span class="eden-radio-option-label">{option.label}</span>
+              </label>
+            )}
+          </For>
+        </div>
+      </Show>
+
+      {/* Text Input */}
+      <Show when={props.setting.type === "text"}>
+        <input
+          type="text"
+          class="eden-input"
+          value={props.value}
+          placeholder={props.setting.placeholder}
+          onInput={handleInput}
+          style={{ "min-width": "200px" }}
+        />
+      </Show>
+
+      {/* Number Input */}
+      <Show when={props.setting.type === "number"}>
+        <input
+          type="number"
+          class="eden-input"
+          value={props.value}
+          min={props.setting.min}
+          max={props.setting.max}
+          step={props.setting.step}
+          onInput={handleInput}
+          style={{ width: "100px" }}
+        />
+      </Show>
+
+      {/* Textarea */}
+      <Show when={props.setting.type === "textarea"}>
+        <textarea
+          class="eden-textarea"
+          value={props.value}
+          placeholder={props.setting.placeholder}
+          onInput={handleInput}
+          rows={3}
+          style={{ "min-width": "300px" }}
+        />
+      </Show>
+
+      {/* Range Slider */}
+      <Show when={props.setting.type === "range"}>
+        <div class="eden-range">
+          <input
+            type="range"
+            value={props.value}
+            min={props.setting.min ?? 0}
+            max={props.setting.max ?? 100}
+            step={props.setting.step ?? 1}
+            onInput={handleInput}
+          />
+          <span class="eden-range-value">{props.value}</span>
+        </div>
+      </Show>
+    </div>
+  );
+};
+
+export default SettingInput;

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

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

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

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

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

@@ -0,0 +1,22 @@
+import { defineConfig } from "vite";
+import solidPlugin from "vite-plugin-solid";
+import path from "path";
+
+export default defineConfig({
+  plugins: [solidPlugin()],
+  base: "./",
+  server: {
+    port: 3004,
+    strictPort: true,
+  },
+  build: {
+    target: "esnext",
+    outDir: "dist",
+    emptyOutDir: true,
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});

package/apps/com/eden/toaster/README.md

@@ -0,0 +1,89 @@
+# Eden Toaster
+
+A toast notification overlay system for Eden that displays notifications in the bottom-right corner of the screen.
+
+## Features
+
+### Notification Types
+
+Notifications support different visual types with color-coded progress bars:
+
+- **info** (default) - Blue accent
+- **success** - Green accent
+- **warning** - Yellow/amber accent
+- **danger** - Red accent
+
+### Visual Design
+
+- Responsive sizing - toasts expand to fit content
+- Maximum toast height of 400px with ellipsis for long messages
+- Title truncation with ellipsis for long titles (single line)
+- Message text wraps and clamps at ~15 lines
+
+### Queue-Based System
+
+- **FIFO ordering** - Oldest notifications are shown first
+- **Smart queueing** - When display area is full, new notifications queue up
+- **Automatic dequeue** - When a visible toast is dismissed, the next queued toast appears
+
+### Timeout & Pause Behavior
+
+- Each notification has a configurable timeout (default: 5 seconds)
+- **Persistent notifications** - Set `timeout: 0` (or omit) to keep until manually dismissed
+- **Hover pause** - Hovering over a toast pauses its timer and progress bar
+- Progress bar visually shows remaining time (not shown for persistent notifications)
+
+### Interactive Elements
+
+- **Dismiss button** (×) - Click to immediately dismiss a toast
+- **Dismiss All button** - Appears when 2+ notifications exist, shows total count, clears all visible and queued toasts
+- **Hover interaction** - Pauses timer on mouse enter, resumes on mouse leave
+
+## Configuration
+
+The toaster is configured in `toaster.ts`:
+
+```typescript
+const CONFIG = {
+  corner: "bottom-right", // Position: top-left, top-right, bottom-left, bottom-right
+  toastWidth: 320, // Toast width in pixels
+  spacing: 16, // Gap between toasts
+  marginX: 16, // Horizontal margin from screen edge
+  marginY: 96, // Vertical margin from screen edge
+};
+```
+
+## Usage
+
+Push notifications from any Eden app:
+
+```typescript
+// Basic notification
+window.edenAPI.shellCommand("notification/push", {
+  title: "Hello",
+  message: "This is a notification",
+});
+
+// With type
+window.edenAPI.shellCommand("notification/push", {
+  title: "Success!",
+  message: "Operation completed successfully",
+  type: "success",
+});
+
+// With custom timeout (ms)
+window.edenAPI.shellCommand("notification/push", {
+  title: "Warning",
+  message: "This will stay for 10 seconds",
+  type: "warning",
+  timeout: 10000,
+});
+
+// Persistent notification (no auto-dismiss)
+window.edenAPI.shellCommand("notification/push", {
+  title: "Action Required",
+  message: "This stays until you click × to dismiss",
+  type: "danger",
+  timeout: 0, // 0 or omit for persistent
+});
+```

package/apps/com/eden/toaster/dist/assets/index-8JMcmBCJ.css

@@ -0,0 +1 @@
+*{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;padding:var(--eden-space-lg) var(--eden-space-lg);padding-bottom:calc(var(--eden-space-lg) + var(--eden-space-sm) + 4px);overflow:hidden;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;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)}.toast-progress-container{position:absolute;bottom:var(--eden-space-sm);left:var(--eden-space-md);right:var(--eden-space-md)}.toast-progress-container .eden-progress{height:4px;border:none;background:var(--eden-color-bg-glass-light)}.toast-progress-container .eden-progress-bar{animation:toast-decay linear forwards}@keyframes toast-decay{0%{width:100%}to{width:0%}}.toast{position:relative}.toast-success .eden-progress-bar{background:linear-gradient(90deg,var(--eden-color-success),var(--eden-color-success-hover));box-shadow:0 0 10px #51cf6680}.toast-warning .eden-progress-bar{background:var(--eden-color-warning);box-shadow:0 0 10px #ffd93d80}.toast-danger .eden-progress-bar{background:linear-gradient(90deg,var(--eden-color-danger),var(--eden-color-danger-hover));box-shadow:0 0 10px #ff3b3080}.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/dist/assets/index-C4cVyh7j.js

@@ -0,0 +1,16 @@
+(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))o(s);new MutationObserver(s=>{for(const n of s)if(n.type==="childList")for(const a of n.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&o(a)}).observe(document,{childList:!0,subtree:!0});function i(s){const n={};return s.integrity&&(n.integrity=s.integrity),s.referrerPolicy&&(n.referrerPolicy=s.referrerPolicy),s.crossOrigin==="use-credentials"?n.credentials="include":s.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function o(s){if(s.ep)return;s.ep=!0;const n=i(s);fetch(s.href,n)}})();const r={corner:"bottom-right",toastWidth:320,spacing:16,marginX:16,marginY:96},d=new Map,l=[];let m=null;async function w(){try{const e=await window.edenAPI.shellCommand("view/window-size",{});return m=e,e}catch(e){return console.error("Failed to get window size:",e),{width:1280,height:800}}}function v(){return(m||{height:800}).height-r.marginY*2}function y(){let e=0,t=0;for(const i of d.values())e+=i.element.offsetHeight||100,t++;return t>1&&(e+=(t-1)*r.spacing),e}function h(e=120){const t=y(),i=v();return t+(d.size>0?r.spacing:0)+e<=i}function b(){const e=document.getElementById("toast-container");if(d.size===0||!e)return{x:0,y:0,width:0,height:0};const t=m||{width:1280,height:800},i=e.scrollHeight,o=r.toastWidth,s=i;let n,a;switch(r.corner){case"top-left":n=r.marginX,a=r.marginY;break;case"top-right":n=t.width-o-r.marginX,a=r.marginY;break;case"bottom-left":n=r.marginX,a=t.height-s-r.marginY;break;case"bottom-right":default:n=t.width-o-r.marginX,a=t.height-s-r.marginY;break}return{x:n,y:a,width:o,height:s}}async function u(){const e=b();try{await window.edenAPI.shellCommand("view/update-view-bounds",{appId:"com.eden.toaster",bounds:e})}catch(t){console.error("Failed to update overlay bounds:",t)}}function f(e){const t=document.createElement("div");return t.textContent=e,t.innerHTML}function T(){if(l.length===0||!h())return;const e=l.shift();p(e)}function c(e){const t=d.get(e);t&&(t.timeoutId!==null&&clearTimeout(t.timeoutId),t.element.remove(),d.delete(e),g(),u(),T())}function P(){l.length=0;for(const e of d.values())e.timeoutId!==null&&clearTimeout(e.timeoutId),e.element.remove();d.clear(),g(),u()}function g(){const e=document.getElementById("toast-container");if(!e)return;let t=document.getElementById("dismiss-all-btn");const i=d.size+l.length;i>1?(t||(t=document.createElement("button"),t.id="dismiss-all-btn",t.className="dismiss-all-btn eden-btn eden-btn-ghost",t.textContent="Dismiss All",t.addEventListener("click",P),e.prepend(t)),t.textContent=`Dismiss All (${i})`):t&&t.remove()}function I(e){const t=d.get(e);!t||t.isHoverPaused||(t.isHoverPaused=!0,t.isPaused||E(t))}function H(e){const t=d.get(e);!t||!t.isHoverPaused||(t.isHoverPaused=!1,t.isPaused&&L(t))}function E(e){if(e.isPaused)return;e.timeoutId!==null&&(clearTimeout(e.timeoutId),e.timeoutId=null);const t=Date.now()-e.startTime;e.remainingTime=Math.max(0,e.remainingTime-t),e.isPaused=!0;const i=e.element.querySelector(".eden-progress-bar");i&&(i.style.animationPlayState="paused")}function L(e){if(!e.isPaused)return;e.isPaused=!1,e.startTime=Date.now();const t=e.element.querySelector(".eden-progress-bar");t&&(t.style.animationPlayState="running"),e.remainingTime>0?e.timeoutId=window.setTimeout(()=>{c(e.id)},e.remainingTime):c(e.id)}function z(e){const t=document.createElement("div"),i=e.type||"info",o=!e.timeout||e.timeout<=0;t.className=`toast eden-card-glass toast-${i}${o?" toast-persistent":""}`,t.dataset.id=e.id;const s=o?"":`
+    <div class="toast-progress-container">
+      <div class="eden-progress">
+        <div class="eden-progress-bar" style="animation-duration: ${e.timeout}ms;"></div>
+      </div>
+    </div>
+  `;t.innerHTML=`
+    <div class="toast-inner">
+      <div class="toast-content">
+        <div class="toast-title">${f(e.title)}</div>
+        <div class="toast-message">${f(e.message)}</div>
+      </div>
+      <button class="toast-dismiss" aria-label="Dismiss">×</button>
+    </div>
+    ${s}
+  `;const n=t.querySelector(".toast-dismiss");return n==null||n.addEventListener("click",a=>{a.stopPropagation(),c(e.id)}),o||(t.addEventListener("mouseenter",()=>{I(e.id)}),t.addEventListener("mouseleave",()=>{H(e.id)})),t}function p(e){const t=document.getElementById("toast-container");if(!t)return;const i=z(e);t.appendChild(i);const o=!e.timeout||e.timeout<=0;let s=null;o||(s=window.setTimeout(()=>{c(e.id)},e.timeout));const n={...e,element:i,timeoutId:s,remainingTime:e.timeout??0,isPaused:!1,isHoverPaused:!1,startTime:Date.now()};d.set(e.id,n),g(),u()}function A(e){const{notification:t}=e;h()?p(t):(l.push(t),g(),console.log(`Toast queued: ${t.id} (${l.length} pending)`))}async function x(){console.log("Eden Toaster initializing..."),await w(),window.edenAPI.subscribe("notification/added",A),window.edenAPI.subscribe("view/global-bounds-changed",e=>{m=e.windowSize,u()}),await u(),console.log("Eden Toaster ready!")}x();

package/apps/com/eden/toaster/dist/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Eden Toaster</title>
+  <script type="module" crossorigin src="./assets/index-C4cVyh7j.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-8JMcmBCJ.css">
+</head>
+
+<body>
+  <div id="toast-container"></div>
+</body>
+
+</html>

package/apps/com/eden/toaster/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Eden Toaster</title>
+  <link rel="stylesheet" href="/src/styles.css" />
+</head>
+
+<body>
+  <div id="toast-container"></div>
+  <script type="module" src="/src/toaster.ts"></script>
+</body>
+
+</html>

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

@@ -0,0 +1,28 @@
+{
+  "id": "com.eden.toaster",
+  "name": "Toast Notifications",
+  "version": "1.0.0",
+  "overlay": true,
+  "autostart": true,
+  "build": {
+    "command": "npm run build"
+  },
+  "frontend": {
+    "entry": "dist/index.html"
+  },
+  "window": {
+    "mode": "floating",
+    "defaultSize": {
+      "width": 0,
+      "height": 0
+    },
+    "defaultPosition": {
+      "x": 0,
+      "y": 0
+    },
+    "injections": {
+      "css": "full",
+      "appFrame": false
+    }
+  }
+}