windowpp 0.1.1

package/framework/src/filedrop/filedrop.css

@@ -0,0 +1,421 @@
+/**
+ * FileDrop Styles - Drop zone styling for drag & drop functionality
+ * 
+ * Usage:
+ *   <div class="filedrop-zone">
+ *     Drop files here
+ *   </div>
+ * 
+ * States automatically applied via JavaScript:
+ *   - .wpp-dropzone-active: When drag enters the zone
+ *   - .wpp-dropzone-disabled: When file drop is disabled
+ */
+
+/* ============================================================================
+ * BASE DROP ZONE STYLES
+ * ============================================================================ */
+
+.wpp-dropzone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  padding: 2rem;
+  border: 2px dashed #cbd5e1;
+  border-radius: 0.75rem;
+  background-color: #f8fafc;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  user-select: none;
+}
+
+.wpp-dropzone:hover {
+  border-color: #94a3b8;
+  background-color: #f1f5f9;
+}
+
+/* ============================================================================
+ * ACTIVE STATE (Drag Over)
+ * ============================================================================ */
+
+.wpp-dropzone.wpp-dropzone-active {
+  border-color: #3b82f6;
+  background-color: #eff6ff;
+  border-width: 3px;
+  transform: scale(1.02);
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+}
+
+.wpp-dropzone.wpp-dropzone-active::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 0.5rem;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 51, 234, 0.05));
+  pointer-events: none;
+}
+
+/* ============================================================================
+ * DISABLED STATE
+ * ============================================================================ */
+
+.wpp-dropzone.wpp-dropzone-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  border-color: #e2e8f0;
+  background-color: #f8fafc;
+}
+
+.wpp-dropzone.wpp-dropzone-disabled:hover {
+  border-color: #e2e8f0;
+  background-color: #f8fafc;
+  transform: none;
+}
+
+/* ============================================================================
+ * DROP ZONE CONTENT
+ * ============================================================================ */
+
+.wpp-dropzone-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  text-align: center;
+  pointer-events: none;
+}
+
+.wpp-dropzone-icon {
+  width: 3rem;
+  height: 3rem;
+  color: #94a3b8;
+  transition: all 0.2s ease-in-out;
+}
+
+.wpp-dropzone.wpp-dropzone-active .wpp-dropzone-icon {
+  color: #3b82f6;
+  transform: scale(1.2);
+}
+
+.wpp-dropzone.wpp-dropzone-disabled .wpp-dropzone-icon {
+  color: #cbd5e1;
+}
+
+.wpp-dropzone-text {
+  font-size: 1rem;
+  font-weight: 500;
+  color: #475569;
+  transition: color 0.2s ease-in-out;
+}
+
+.wpp-dropzone.wpp-dropzone-active .wpp-dropzone-text {
+  color: #3b82f6;
+  font-weight: 600;
+}
+
+.wpp-dropzone.wpp-dropzone-disabled .wpp-dropzone-text {
+  color: #cbd5e1;
+}
+
+.wpp-dropzone-hint {
+  font-size: 0.875rem;
+  color: #94a3b8;
+  transition: color 0.2s ease-in-out;
+}
+
+.wpp-dropzone.wpp-dropzone-active .wpp-dropzone-hint {
+  color: #60a5fa;
+}
+
+.wpp-dropzone.wpp-dropzone-disabled .wpp-dropzone-hint {
+  color: #cbd5e1;
+}
+
+/* ============================================================================
+ * COMPACT VARIANT
+ * ============================================================================ */
+
+.wpp-dropzone.wpp-dropzone-compact {
+  min-height: 120px;
+  padding: 1.5rem;
+}
+
+.wpp-dropzone.wpp-dropzone-compact .wpp-dropzone-icon {
+  width: 2rem;
+  height: 2rem;
+}
+
+.wpp-dropzone.wpp-dropzone-compact .wpp-dropzone-text {
+  font-size: 0.875rem;
+}
+
+.wpp-dropzone.wpp-dropzone-compact .wpp-dropzone-hint {
+  font-size: 0.75rem;
+}
+
+/* ============================================================================
+ * INLINE VARIANT (Full Width)
+ * ============================================================================ */
+
+.wpp-dropzone.wpp-dropzone-inline {
+  min-height: 80px;
+  padding: 1rem;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 1rem;
+}
+
+.wpp-dropzone.wpp-dropzone-inline .wpp-dropzone-content {
+  flex-direction: row;
+  align-items: center;
+  text-align: left;
+  gap: 0.75rem;
+}
+
+.wpp-dropzone.wpp-dropzone-inline .wpp-dropzone-icon {
+  width: 2rem;
+  height: 2rem;
+}
+
+/* ============================================================================
+ * FILE LIST DISPLAY
+ * ============================================================================ */
+
+.wpp-dropzone-files {
+  margin-top: 1rem;
+  width: 100%;
+}
+
+.wpp-dropzone-file-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background-color: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.5rem;
+  margin-bottom: 0.5rem;
+  transition: all 0.2s ease-in-out;
+}
+
+.wpp-dropzone-file-item:hover {
+  border-color: #cbd5e1;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.wpp-dropzone-file-icon {
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f1f5f9;
+  border-radius: 0.375rem;
+  color: #64748b;
+}
+
+.wpp-dropzone-file-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.wpp-dropzone-file-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #334155;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.wpp-dropzone-file-meta {
+  font-size: 0.75rem;
+  color: #94a3b8;
+  margin-top: 0.125rem;
+}
+
+.wpp-dropzone-file-remove {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem;
+  color: #94a3b8;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  pointer-events: auto;
+}
+
+.wpp-dropzone-file-remove:hover {
+  background-color: #fee2e2;
+  color: #ef4444;
+}
+
+/* ============================================================================
+ * DARK MODE SUPPORT
+ * ============================================================================ */
+
+@media (prefers-color-scheme: dark) {
+  .wpp-dropzone {
+    border-color: #475569;
+    background-color: #1e293b;
+  }
+
+  .wpp-dropzone:hover {
+    border-color: #64748b;
+    background-color: #334155;
+  }
+
+  .wpp-dropzone.wpp-dropzone-active {
+    border-color: #60a5fa;
+    background-color: #1e3a8a;
+    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1);
+  }
+
+  .wpp-dropzone.wpp-dropzone-active::before {
+    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(168, 85, 247, 0.1));
+  }
+
+  .wpp-dropzone.wpp-dropzone-disabled {
+    border-color: #334155;
+    background-color: #1e293b;
+  }
+
+  .wpp-dropzone-icon {
+    color: #64748b;
+  }
+
+  .wpp-dropzone.wpp-dropzone-active .wpp-dropzone-icon {
+    color: #60a5fa;
+  }
+
+  .wpp-dropzone.wpp-dropzone-disabled .wpp-dropzone-icon {
+    color: #475569;
+  }
+
+  .wpp-dropzone-text {
+    color: #cbd5e1;
+  }
+
+  .wpp-dropzone.wpp-dropzone-active .wpp-dropzone-text {
+    color: #93c5fd;
+  }
+
+  .wpp-dropzone.wpp-dropzone-disabled .wpp-dropzone-text {
+    color: #64748b;
+  }
+
+  .wpp-dropzone-hint {
+    color: #64748b;
+  }
+
+  .wpp-dropzone.wpp-dropzone-active .wpp-dropzone-hint {
+    color: #93c5fd;
+  }
+
+  .wpp-dropzone-file-item {
+    background-color: #334155;
+    border-color: #475569;
+  }
+
+  .wpp-dropzone-file-item:hover {
+    border-color: #64748b;
+  }
+
+  .wpp-dropzone-file-icon {
+    background-color: #1e293b;
+    color: #94a3b8;
+  }
+
+  .wpp-dropzone-file-name {
+    color: #e2e8f0;
+  }
+
+  .wpp-dropzone-file-meta {
+    color: #64748b;
+  }
+
+  .wpp-dropzone-file-remove:hover {
+    background-color: #7f1d1d;
+    color: #fca5a5;
+  }
+}
+
+/* ============================================================================
+ * ANIMATION UTILITIES
+ * ============================================================================ */
+
+@keyframes filedrop-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+.wpp-dropzone.wpp-dropzone-processing {
+  animation: filedrop-pulse 1.5s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes filedrop-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-4px);
+  }
+  75% {
+    transform: translateX(4px);
+  }
+}
+
+.wpp-dropzone.wpp-dropzone-error {
+  border-color: #ef4444;
+  background-color: #fee2e2;
+  animation: filedrop-shake 0.3s ease-in-out;
+}
+
+@media (prefers-color-scheme: dark) {
+  .wpp-dropzone.wpp-dropzone-error {
+    border-color: #f87171;
+    background-color: #7f1d1d;
+  }
+}
+
+/* ============================================================================
+ * CUSTOM VARIANTS
+ * ============================================================================ */
+
+/* Minimal variant - subtle styling */
+.wpp-dropzone.wpp-dropzone-minimal {
+  border-style: solid;
+  border-width: 1px;
+  background-color: transparent;
+}
+
+.wpp-dropzone.wpp-dropzone-minimal:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+@media (prefers-color-scheme: dark) {
+  .wpp-dropzone.wpp-dropzone-minimal:hover {
+    background-color: rgba(255, 255, 255, 0.02);
+  }
+}
+
+/* Bold variant - prominent styling */
+.wpp-dropzone.wpp-dropzone-bold {
+  border-width: 3px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.wpp-dropzone.wpp-dropzone-bold.wpp-dropzone-active {
+  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2);
+}

package/framework/src/filedrop/filedrop.hpp

@@ -0,0 +1,92 @@
+#pragma once
+
+#include <cstdint>
+#include <string>
+#include <vector>
+#include <functional>
+
+namespace pw {
+class Window;
+}
+
+namespace pw {
+
+/**
+ * FileInfo - Represents a dropped file
+ */
+struct FileInfo {
+    std::string path;        // Full path to the file
+    std::string name;        // File name with extension
+    std::string type;        // MIME type (e.g., "image/png", "text/plain")
+    std::uint64_t size;      // File size in bytes
+};
+
+/**
+ * FileDrop - Cross-platform drag & drop file handling
+ *
+ * Enables dragging files into the webview window and from the window to the desktop.
+ * Supports all file types cross-platform (Windows, macOS, Linux).
+ */
+class FileDrop {
+public:
+    FileDrop();
+    ~FileDrop();
+
+    static FileDrop& instance() {
+        static FileDrop instance;
+        return instance;
+    }
+
+    /**
+     * Attach FileDrop handlers to a Window
+     */
+    void attach(void* nativeWindowHandle);
+
+    /**
+     * Enable or disable file drop into window
+     * @param enabled - true to allow files to be dropped into the window
+     */
+    void setEnabled(bool enabled);
+
+    /**
+     * Check if file drop is currently enabled
+     * @return true if file drop is enabled
+     */
+    bool isEnabled() const;
+
+    /**
+     * Set callback for when files are dropped into the window
+     * @param callback - Function called with array of dropped files
+     */
+    void onFilesDropped(std::function<void(const std::vector<FileInfo>&)> callback);
+
+    /**
+     * Set callback for when a drag operation enters the window
+     * @param callback - Function called when drag enters
+     */
+    void onDragEnter(std::function<void()> callback);
+
+    /**
+     * Set callback for when a drag operation leaves the window
+     * @param callback - Function called when drag leaves
+     */
+    void onDragLeave(std::function<void()> callback);
+
+    /**
+     * Start a drag operation to drag files out of the window
+     * @param filePaths - Paths to files to be dragged
+     * @return true if drag operation started successfully
+     */
+    bool startDrag(const std::vector<std::string>& filePaths);
+
+    /**
+     * Clear all callbacks
+     */
+    void clearCallbacks();
+
+private:
+    struct Impl;
+    Impl* pImpl;
+};
+
+} // namespace pw

package/framework/src/filedrop/filedrop.ts

@@ -0,0 +1,183 @@
+/**
+ * WindowPP FileDrop API
+ * 
+ * Simple API for handling OS file drops in your app.
+ * Enable in config: .fileDrop(true)
+ * 
+ * Usage:
+ *   import windowpp from 'windowpp';
+ *   
+ *   // Listen for file drops on a zone
+ *   windowpp.fileDrop.onFiles('myZone', (files) => {
+ *     console.log('Dropped:', files.map(f => f.name));
+ *   });
+ *   
+ *   // Or use data-dropzone attribute
+ *   // <div data-dropzone="upload"></div>
+ */
+
+export interface FileInfo {
+  path: string;
+  name: string;
+  type: string;
+  size: number;
+}
+
+export interface DropZone {
+  name: string;
+  onFiles(callback: (files: FileInfo[]) => void): () => void;
+  onDragEnter(callback: () => void): () => void;
+  onDragLeave(callback: () => void): () => void;
+  element: HTMLElement | null;
+}
+
+interface PendingCall {
+  resolve: (v: any) => void;
+  reject: (e: any) => void;
+}
+
+let callId = 0;
+const pending = new Map<string, PendingCall>();
+const zones = new Map<string, DropZone>();
+
+function getGlobal(): any {
+  if (typeof window !== 'undefined') return window;
+  if (typeof globalThis !== 'undefined') return globalThis;
+  return {};
+}
+
+const g = getGlobal();
+const previousResponse = g.__response__;
+
+g.__response__ = function(id: string, result: any, error?: any) {
+  const p = pending.get(id);
+  if (p) {
+    pending.delete(id);
+    error ? p.reject(new Error(error)) : p.resolve(result);
+    return;
+  }
+
+  if (previousResponse) {
+    previousResponse(id, result, error);
+  }
+};
+
+g.__wpp_fileDrop__ = function(zoneName: string, files: FileInfo[]) {
+  const zone = zones.get(zoneName);
+  if (zone) {
+    const cb = (zone as any).__onFiles;
+    if (cb) cb(files);
+  }
+};
+
+async function invoke<T>(method: string, params: any[] = []): Promise<T> {
+  return new Promise((resolve, reject) => {
+    const id = String(++callId);
+    pending.set(id, { resolve, reject });
+    const payload = JSON.stringify({ id, method, params });
+
+    if (g.__native_invoke__) {
+      g.__native_invoke__(payload);
+    } else if (g.chrome && g.chrome.webview && g.chrome.webview.postMessage) {
+      g.chrome.webview.postMessage(payload);
+    } else {
+      pending.delete(id);
+      console.warn('[WindowPP] Native bridge not ready');
+      resolve(null as T);
+    }
+  });
+}
+
+export function createDropZone(name: string, element?: HTMLElement | null): DropZone {
+  const el = element || document.querySelector(`[data-dropzone="${name}"]`) as HTMLElement;
+  
+  if (el) {
+    el.setAttribute('data-dropzone', name);
+    el.classList.add('wpp-dropzone');
+  }
+
+  const zone: DropZone = {
+    name,
+    element: el,
+    onFiles: (callback: (files: FileInfo[]) => void) => {
+      (zone as any).__onFiles = callback;
+      zones.set(name, zone);
+      return () => {
+        (zone as any).__onFiles = undefined;
+        zones.delete(name);
+      };
+    },
+    onDragEnter: (callback: () => void) => {
+      (zone as any).__onDragEnter = callback;
+      return () => { (zone as any).__onDragEnter = undefined; };
+    },
+    onDragLeave: (callback: () => void) => {
+      (zone as any).__onDragLeave = callback;
+      return () => { (zone as any).__onDragLeave = undefined; };
+    }
+  };
+
+  zones.set(name, zone);
+  return zone;
+}
+
+export const fileDrop = {
+  createDropZone,
+  
+  onFiles: (name: string, callback: (files: FileInfo[]) => void): (() => void) => {
+    const zone = zones.get(name);
+    if (zone) {
+      return zone.onFiles(callback);
+    }
+    const newZone = createDropZone(name);
+    return newZone.onFiles(callback);
+  },
+
+  setEnabled: (enabled: boolean): Promise<void> => 
+    invoke<void>('wpp.fileDrop.setEnabled', [enabled]),
+    
+  isEnabled: (): Promise<boolean> => 
+    invoke<boolean>('wpp.fileDrop.isEnabled'),
+    
+  startDrag: (filePaths: string[]): Promise<void> =>
+    invoke<void>('wpp.fileDrop.startDrag', [filePaths]),
+};
+
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+}
+
+export function filterFilesByExtension(files: FileInfo[], extensions: string[]): FileInfo[] {
+  const exts = extensions.map(e => e.toLowerCase().replace(/^\./, ''));
+  return files.filter(f => {
+    const ext = f.name.split('.').pop()?.toLowerCase() || '';
+    return exts.includes(ext);
+  });
+}
+
+export function filterFilesByMimeType(files: FileInfo[], mimeTypes: string[]): FileInfo[] {
+  return files.filter(f => mimeTypes.includes(f.type));
+}
+
+export function isImageFile(file: FileInfo): boolean {
+  return file.type.startsWith('image/');
+}
+
+export function isVideoFile(file: FileInfo): boolean {
+  return file.type.startsWith('video/');
+}
+
+export function isAudioFile(file: FileInfo): boolean {
+  return file.type.startsWith('audio/');
+}
+
+export function isTextFile(file: FileInfo): boolean {
+  return file.type.startsWith('text/') || file.name.endsWith('.txt') || 
+         file.name.endsWith('.md') || file.name.endsWith('.json');
+}
+
+export default fileDrop;