@edenapp/sdk 0.1.0

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

@@ -0,0 +1,595 @@
+/**
+ * File Explorer - Custom Styles
+ */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--eden-font-family-base);
+  background: var(--eden-color-bg-secondary);
+  color: var(--eden-color-text-on-dark);
+  overflow: hidden;
+}
+
+/* ===== Main Layout ===== */
+.file-explorer {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+}
+
+/* ===== Header with Breadcrumb and Navigation ===== */
+.explorer-header {
+  background: var(--eden-color-bg-glass-strong);
+  position: relative;
+  z-index: 100;
+  border-bottom: 1px solid var(--eden-color-border-light);
+  padding: var(--eden-space-md) var(--eden-space-lg);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: var(--eden-space-lg);
+}
+
+
+.toolbar-left,
+.toolbar-right {
+  display: flex;
+  gap: var(--eden-space-sm);
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.toolbar-left button,
+.toolbar-right button {
+  min-width: 40px;
+}
+
+/* ===== Omnibox ===== */
+.omnibox-container {
+  flex: 1;
+  min-width: 0;
+  position: relative;
+  z-index: 10;
+}
+
+.omnibox-display {
+  display: flex;
+  align-items: center;
+  gap: var(--eden-space-sm);
+  background: var(--eden-color-bg-glass-medium);
+  backdrop-filter: var(--eden-glass-medium);
+  border: 1px solid var(--eden-color-border-light);
+  border-radius: var(--eden-radius-md);
+  padding: var(--eden-space-sm) var(--eden-space-md);
+  cursor: text;
+  transition: all var(--eden-transition-base);
+  min-height: 32px;
+}
+
+.omnibox-display:hover {
+  border-color: var(--eden-color-accent-primary);
+  background: var(--eden-color-bg-glass-strong);
+}
+
+.omnibox-icon {
+  font-size: 14px;
+  color: var(--eden-color-text-muted);
+  flex-shrink: 0;
+}
+
+.breadcrumb-display {
+  display: flex;
+  align-items: center;
+  gap: var(--eden-space-xs);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.breadcrumb-part {
+  color: var(--eden-color-text-primary);
+  font-size: var(--eden-font-size-sm);
+  white-space: nowrap;
+}
+
+.breadcrumb-separator {
+  color: var(--eden-color-text-muted);
+  user-select: none;
+  padding: 0 var(--eden-space-xs);
+}
+
+.omnibox-input-container {
+  display: flex;
+  align-items: center;
+  gap: var(--eden-space-sm);
+  background: var(--eden-color-bg-glass-strong);
+  backdrop-filter: var(--eden-glass-strong);
+  border: 2px solid var(--eden-color-accent-primary);
+  border-radius: var(--eden-radius-md);
+  padding: calc(var(--eden-space-sm) - 1px) calc(var(--eden-space-md) - 1px);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), var(--eden-shadow-lg);
+  animation: eden-fade-in 0.15s ease-out;
+}
+
+.omnibox-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  outline: none;
+  color: var(--eden-color-text-primary);
+  font-size: var(--eden-font-size-sm);
+  font-family: var(--eden-font-mono);
+  padding: var(--eden-space-xs) 0;
+  min-width: 0;
+}
+
+.omnibox-input::placeholder {
+  color: var(--eden-color-text-muted);
+  font-family: var(--eden-font-family-base);
+}
+
+.omnibox-loading {
+  font-size: 14px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.omnibox-suggestions {
+  position: absolute;
+  top: calc(100% + var(--eden-space-xs));
+  left: 0;
+  right: 0;
+  border: 1px solid var(--eden-color-border-medium);
+  border-radius: var(--eden-radius-lg);
+  box-shadow: var(--eden-shadow-xl);
+  max-height: 400px;
+  overflow-y: auto;
+  z-index: 1000;
+  animation: eden-fade-in 0.15s ease-out;
+
+}
+
+.suggestion-item {
+  display: flex;
+  align-items: center;
+  gap: var(--eden-space-md);
+  padding: var(--eden-space-md) var(--eden-space-lg);
+  cursor: pointer;
+  transition: all var(--eden-transition-base);
+  border-bottom: 1px solid var(--eden-color-border-light);
+}
+
+.suggestion-item:last-child {
+  border-bottom: none;
+}
+
+.suggestion-item:hover,
+.suggestion-item.selected {
+  background: var(--eden-color-surface-active);
+}
+
+.suggestion-icon {
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.suggestion-name {
+  font-size: var(--eden-font-size-sm);
+  font-weight: var(--eden-font-weight-medium);
+  color: var(--eden-color-text-primary);
+  flex-shrink: 0;
+  min-width: 150px;
+}
+
+.suggestion-path {
+  font-size: var(--eden-font-size-xs);
+  font-family: var(--eden-font-mono);
+  color: var(--eden-color-text-muted);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
+
+/* ===== Main Content Area ===== */
+.explorer-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--eden-space-lg);
+  background: var(--eden-color-bg-secondary);
+}
+
+/* ===== File List ===== */
+.file-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: var(--eden-space-md);
+  padding: var(--eden-space-sm);
+}
+
+.file-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--eden-space-lg);
+  border-radius: var(--eden-radius-lg);
+  background: var(--eden-color-bg-glass-medium);
+  backdrop-filter: var(--eden-glass-medium);
+  border: 1px solid var(--eden-color-border-light);
+  cursor: pointer;
+  transition: all var(--eden-transition-base);
+  user-select: none;
+  position: relative;
+}
+
+.file-item:hover {
+  background: var(--eden-color-bg-glass-strong);
+  border-color: var(--eden-color-accent-primary);
+  transform: translateY(-2px);
+  box-shadow: var(--eden-shadow-lg);
+}
+
+.file-item.selected {
+  background: var(--eden-color-surface-active);
+  border-color: var(--eden-color-accent-primary);
+  box-shadow: var(--eden-shadow-md);
+}
+
+.file-icon {
+  font-size: 48px;
+  margin-bottom: var(--eden-space-sm);
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+}
+
+.file-name {
+  font-size: var(--eden-font-size-sm);
+  font-weight: var(--eden-font-weight-medium);
+  color: var(--eden-color-text-primary);
+  text-align: center;
+  word-break: break-word;
+  max-width: 100%;
+}
+
+.file-meta {
+  font-size: var(--eden-font-size-xs);
+  color: var(--eden-color-text-muted);
+  margin-top: var(--eden-space-xs);
+  text-align: center;
+}
+
+.file-item-actions {
+  position: absolute;
+  top: var(--eden-space-sm);
+  right: var(--eden-space-sm);
+  display: none;
+  gap: var(--eden-space-xs);
+}
+
+.file-item:hover .file-item-actions {
+  display: flex;
+}
+
+.file-action-btn {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  line-height: 1;
+  background: var(--eden-color-bg-glass-strong);
+  backdrop-filter: var(--eden-glass-ultra);
+}
+
+/* ===== Status Bar ===== */
+.explorer-status {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--eden-space-sm) var(--eden-space-lg);
+  background: var(--eden-color-bg-glass-strong);
+  backdrop-filter: var(--eden-glass-strong);
+  border-top: 1px solid var(--eden-color-border-light);
+  font-size: var(--eden-font-size-sm);
+  color: var(--eden-color-text-secondary);
+}
+
+.status-path {
+  font-family: var(--eden-font-mono);
+  color: var(--eden-color-accent-primary);
+}
+
+/* ===== Empty State ===== */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--eden-space-4xl);
+  text-align: center;
+  color: var(--eden-color-text-muted);
+  min-height: 300px;
+}
+
+.empty-icon {
+  font-size: 64px;
+  margin-bottom: var(--eden-space-lg);
+  opacity: 0.5;
+}
+
+.empty-message {
+  font-size: var(--eden-font-size-lg);
+  margin-bottom: var(--eden-space-sm);
+}
+
+.empty-hint {
+  font-size: var(--eden-font-size-sm);
+  opacity: 0.7;
+}
+
+/* ===== Loading State ===== */
+.loading-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--eden-space-4xl);
+  font-size: var(--eden-font-size-lg);
+  color: var(--eden-color-text-secondary);
+}
+
+/* ===== Error State ===== */
+.error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--eden-space-4xl);
+  text-align: center;
+  color: var(--eden-color-danger);
+}
+
+.error-icon {
+  font-size: 64px;
+  margin-bottom: var(--eden-space-lg);
+}
+
+.error-title {
+  font-size: var(--eden-font-size-xl);
+  font-weight: var(--eden-font-weight-semibold);
+  margin-bottom: var(--eden-space-sm);
+}
+
+.error-details {
+  font-size: var(--eden-font-size-sm);
+  color: var(--eden-color-text-secondary);
+}
+
+/* ===== Animations ===== */
+.file-item {
+  animation: eden-fade-in 0.3s ease-out;
+}
+
+/* ===== Display Options Dropdown (Eden CSS Overrides) ===== */
+.display-options-position {
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding: var(--eden-space-lg);
+}
+
+.display-options-popover {
+  margin-top: 60px;
+  margin-right: var(--eden-space-md);
+  width: 280px;
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
+  animation: eden-scale-in var(--eden-duration-fast) var(--eden-transition-ease-out);
+}
+
+/* ===== List View Layout ===== */
+.file-list.list-view {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  grid-template-columns: none;
+}
+
+.file-item.list-view {
+  flex-direction: row;
+  align-items: center;
+  padding: var(--item-padding-list, var(--eden-space-md) var(--eden-space-lg));
+  border-radius: var(--eden-radius-md);
+  gap: var(--item-gap-list, var(--eden-space-lg));
+}
+
+.file-item.list-view .file-icon {
+  font-size: var(--icon-size-list, var(--eden-font-size-2xl));
+  margin-bottom: 0;
+  width: var(--icon-width-list, var(--eden-space-2xl));
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.file-item.list-view .file-name {
+  flex: 1;
+  min-width: 200px;
+  text-align: left;
+  word-break: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--name-size, var(--eden-font-size-sm));
+}
+
+.file-item.list-view .file-size {
+  width: var(--column-width, 100px);
+  text-align: right;
+  font-size: var(--meta-size, var(--eden-font-size-sm));
+  color: var(--eden-color-text-secondary);
+  flex-shrink: 0;
+}
+
+.file-item.list-view .file-modified {
+  width: calc(var(--column-width, 100px) * 1.5);
+  text-align: right;
+  font-size: var(--meta-size, var(--eden-font-size-sm));
+  color: var(--eden-color-text-muted);
+  flex-shrink: 0;
+}
+
+.file-item.list-view:hover {
+  transform: translateY(0);
+}
+
+/* ===== File Item Base with CSS Variables ===== */
+.file-item {
+  --item-padding: var(--eden-space-lg);
+  --item-gap: var(--eden-space-lg);
+  --icon-size: var(--eden-font-size-4xl);
+  --icon-width: var(--eden-space-2xl);
+  --icon-margin: var(--eden-space-sm);
+  --name-size: var(--eden-font-size-sm);
+  --meta-size: var(--eden-font-size-xs);
+  --column-width: 100px;
+
+  /* List view variants */
+  --item-padding-list: var(--eden-space-md) var(--eden-space-lg);
+  --item-gap-list: var(--eden-space-lg);
+  --icon-size-list: var(--eden-font-size-2xl);
+  --icon-width-list: var(--eden-space-2xl);
+}
+
+/* ===== Size Variations ===== */
+
+/* Tiny Size */
+.file-item.size-tiny {
+  --item-padding: var(--eden-space-xs) var(--eden-space-sm);
+  --icon-size: var(--eden-font-size-2xl);
+  --icon-margin: var(--eden-space-xs);
+  --name-size: var(--eden-font-size-sm);
+  --meta-size: var(--eden-font-size-xs);
+
+  --item-padding-list: var(--eden-space-xs) var(--eden-space-sm);
+  --item-gap-list: var(--eden-space-sm);
+  --icon-size-list: var(--eden-font-size-lg);
+  --icon-width-list: var(--eden-space-lg);
+}
+
+/* Small Size */
+.file-item.size-small {
+  --item-padding: var(--eden-space-sm) var(--eden-space-md);
+  --icon-size: var(--eden-font-size-3xl);
+  --icon-margin: var(--eden-space-xs);
+  --name-size: var(--eden-font-size-xs);
+  --meta-size: var(--eden-font-size-xs);
+
+  --item-padding-list: var(--eden-space-sm) var(--eden-space-md);
+  --item-gap-list: var(--eden-space-md);
+  --icon-size-list: var(--eden-font-size-xl);
+  --icon-width-list: var(--eden-space-lg);
+}
+
+/* Medium Size (default) */
+.file-item.size-medium {
+  --item-padding: var(--eden-space-lg);
+  --icon-size: var(--eden-font-size-4xl);
+  --icon-margin: var(--eden-space-sm);
+  --name-size: var(--eden-font-size-sm);
+  --meta-size: var(--eden-font-size-xs);
+
+  --item-padding-list: var(--eden-space-md) var(--eden-space-lg);
+  --item-gap-list: var(--eden-space-lg);
+  --icon-size-list: var(--eden-font-size-2xl);
+  --icon-width-list: var(--eden-space-2xl);
+}
+
+/* Large Size */
+.file-item.size-large {
+  --item-padding: var(--eden-space-xl);
+  --icon-size: var(--eden-layout-icon-size-lg);
+  --icon-margin: var(--eden-space-md);
+  --name-size: var(--eden-font-size-md);
+  --meta-size: var(--eden-font-size-sm);
+  --column-width: 120px;
+
+  --item-padding-list: var(--eden-space-lg) var(--eden-space-xl);
+  --item-gap-list: var(--eden-space-xl);
+  --icon-size-list: var(--eden-font-size-3xl);
+  --icon-width-list: var(--eden-space-xl);
+}
+
+/* Huge Size */
+.file-item.size-huge {
+  --item-padding: var(--eden-space-2xl);
+  --icon-size: var(--eden-layout-icon-size-xl);
+  --icon-margin: var(--eden-space-lg);
+  --name-size: var(--eden-font-size-lg);
+  --meta-size: var(--eden-font-size-md);
+  --column-width: 140px;
+
+  --item-padding-list: var(--eden-space-xl) var(--eden-space-2xl);
+  --item-gap-list: var(--eden-space-2xl);
+  --icon-size-list: var(--eden-space-xl);
+  --icon-width-list: var(--eden-space-3xl);
+}
+
+/* Apply CSS variables to elements */
+.file-item {
+  padding: var(--item-padding);
+}
+
+.file-item .file-icon {
+  font-size: var(--icon-size);
+  margin-bottom: var(--icon-margin);
+}
+
+.file-item .file-name {
+  font-size: var(--name-size);
+}
+
+.file-item .file-meta {
+  font-size: var(--meta-size);
+  margin-top: var(--eden-space-xs);
+}
+
+.file-item.size-huge .file-name {
+  font-weight: var(--eden-font-weight-semibold);
+}
+
+/* ===== Responsive Design ===== */
+@media (max-width: 768px) {
+  .file-list {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
+
+  .header-content {
+    flex-wrap: wrap;
+  }
+
+  .breadcrumb {
+    font-size: var(--eden-font-size-sm);
+  }
+
+  .file-item.list-view .file-modified {
+    display: none;
+  }
+
+  .file-item.list-view .file-size {
+    width: 80px;
+  }
+}

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

@@ -0,0 +1,20 @@
+export interface FileItem {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  isFile: boolean;
+  size: number;
+  modified: Date;
+}
+
+export type ViewStyle = 'grid' | 'list';
+export type ItemSize = 'tiny' | 'small' | 'medium' | 'large' | 'huge';
+export type SortBy = 'name' | 'size' | 'modified';
+export type SortOrder = 'asc' | 'desc';
+
+export interface DisplayPreferences {
+  viewStyle: ViewStyle;
+  itemSize: ItemSize;
+  sortBy: SortBy;
+  sortOrder: SortOrder;
+}

package/apps/com/eden/files/src/utils.ts

@@ -0,0 +1,44 @@
+import type { FileItem } from "./types";
+
+export const joinPath = (...parts: string[]) => {
+  return parts.join("/").replace(/\/+/g, "/").replace(/\/$/, "") || "/";
+};
+
+export const getParentPath = (path: string) => {
+  if (path === "/") return "/";
+  const parts = path.split("/").filter((p) => p);
+  parts.pop();
+  return "/" + parts.join("/");
+};
+
+export const isValidName = (name: string) => {
+  return /^[a-zA-Z0-9._-]+$/.test(name);
+};
+
+export const formatFileSize = (bytes: number) => {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+};
+
+export const getFileIcon = (item: FileItem) => {
+  if (item.isDirectory) return "📁";
+
+  const ext = item.name.split(".").pop()?.toLowerCase() || "";
+  const iconMap: Record<string, string> = {
+    txt: "📄",
+    md: "📝",
+    js: "📜",
+    json: "📋",
+    html: "🌐",
+    css: "🎨",
+    png: "🖼️",
+    jpg: "🖼️",
+    pdf: "📕",
+    zip: "📦",
+  };
+
+  return iconMap[ext] || "📄";
+};

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

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "types": [
+      "vite/client",
+      "@edenapp/types/global"
+    ]
+  },
+  "include": [
+    "src"
+  ]
+}

package/apps/com/eden/files/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"],
+  },
+});