plusui-native-core 0.1.7 → 0.1.9

package/Core/Features/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:
+ *   - .filedrop-active: When drag enters the zone
+ *   - .filedrop-disabled: When file drop is disabled
+ */
+
+/* ============================================================================
+ * BASE DROP ZONE STYLES
+ * ============================================================================ */
+
+.filedrop-zone {
+  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;
+}
+
+.filedrop-zone:hover {
+  border-color: #94a3b8;
+  background-color: #f1f5f9;
+}
+
+/* ============================================================================
+ * ACTIVE STATE (Drag Over)
+ * ============================================================================ */
+
+.filedrop-zone.filedrop-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);
+}
+
+.filedrop-zone.filedrop-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
+ * ============================================================================ */
+
+.filedrop-zone.filedrop-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  border-color: #e2e8f0;
+  background-color: #f8fafc;
+}
+
+.filedrop-zone.filedrop-disabled:hover {
+  border-color: #e2e8f0;
+  background-color: #f8fafc;
+  transform: none;
+}
+
+/* ============================================================================
+ * DROP ZONE CONTENT
+ * ============================================================================ */
+
+.filedrop-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  text-align: center;
+  pointer-events: none;
+}
+
+.filedrop-icon {
+  width: 3rem;
+  height: 3rem;
+  color: #94a3b8;
+  transition: all 0.2s ease-in-out;
+}
+
+.filedrop-zone.filedrop-active .filedrop-icon {
+  color: #3b82f6;
+  transform: scale(1.2);
+}
+
+.filedrop-zone.filedrop-disabled .filedrop-icon {
+  color: #cbd5e1;
+}
+
+.filedrop-text {
+  font-size: 1rem;
+  font-weight: 500;
+  color: #475569;
+  transition: color 0.2s ease-in-out;
+}
+
+.filedrop-zone.filedrop-active .filedrop-text {
+  color: #3b82f6;
+  font-weight: 600;
+}
+
+.filedrop-zone.filedrop-disabled .filedrop-text {
+  color: #cbd5e1;
+}
+
+.filedrop-hint {
+  font-size: 0.875rem;
+  color: #94a3b8;
+  transition: color 0.2s ease-in-out;
+}
+
+.filedrop-zone.filedrop-active .filedrop-hint {
+  color: #60a5fa;
+}
+
+.filedrop-zone.filedrop-disabled .filedrop-hint {
+  color: #cbd5e1;
+}
+
+/* ============================================================================
+ * COMPACT VARIANT
+ * ============================================================================ */
+
+.filedrop-zone.filedrop-compact {
+  min-height: 120px;
+  padding: 1.5rem;
+}
+
+.filedrop-zone.filedrop-compact .filedrop-icon {
+  width: 2rem;
+  height: 2rem;
+}
+
+.filedrop-zone.filedrop-compact .filedrop-text {
+  font-size: 0.875rem;
+}
+
+.filedrop-zone.filedrop-compact .filedrop-hint {
+  font-size: 0.75rem;
+}
+
+/* ============================================================================
+ * INLINE VARIANT (Full Width)
+ * ============================================================================ */
+
+.filedrop-zone.filedrop-inline {
+  min-height: 80px;
+  padding: 1rem;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 1rem;
+}
+
+.filedrop-zone.filedrop-inline .filedrop-content {
+  flex-direction: row;
+  align-items: center;
+  text-align: left;
+  gap: 0.75rem;
+}
+
+.filedrop-zone.filedrop-inline .filedrop-icon {
+  width: 2rem;
+  height: 2rem;
+}
+
+/* ============================================================================
+ * FILE LIST DISPLAY
+ * ============================================================================ */
+
+.filedrop-files {
+  margin-top: 1rem;
+  width: 100%;
+}
+
+.filedrop-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;
+}
+
+.filedrop-file-item:hover {
+  border-color: #cbd5e1;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.filedrop-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;
+}
+
+.filedrop-file-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.filedrop-file-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #334155;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.filedrop-file-meta {
+  font-size: 0.75rem;
+  color: #94a3b8;
+  margin-top: 0.125rem;
+}
+
+.filedrop-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;
+}
+
+.filedrop-file-remove:hover {
+  background-color: #fee2e2;
+  color: #ef4444;
+}
+
+/* ============================================================================
+ * DARK MODE SUPPORT
+ * ============================================================================ */
+
+@media (prefers-color-scheme: dark) {
+  .filedrop-zone {
+    border-color: #475569;
+    background-color: #1e293b;
+  }
+
+  .filedrop-zone:hover {
+    border-color: #64748b;
+    background-color: #334155;
+  }
+
+  .filedrop-zone.filedrop-active {
+    border-color: #60a5fa;
+    background-color: #1e3a8a;
+    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1);
+  }
+
+  .filedrop-zone.filedrop-active::before {
+    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(168, 85, 247, 0.1));
+  }
+
+  .filedrop-zone.filedrop-disabled {
+    border-color: #334155;
+    background-color: #1e293b;
+  }
+
+  .filedrop-icon {
+    color: #64748b;
+  }
+
+  .filedrop-zone.filedrop-active .filedrop-icon {
+    color: #60a5fa;
+  }
+
+  .filedrop-zone.filedrop-disabled .filedrop-icon {
+    color: #475569;
+  }
+
+  .filedrop-text {
+    color: #cbd5e1;
+  }
+
+  .filedrop-zone.filedrop-active .filedrop-text {
+    color: #93c5fd;
+  }
+
+  .filedrop-zone.filedrop-disabled .filedrop-text {
+    color: #64748b;
+  }
+
+  .filedrop-hint {
+    color: #64748b;
+  }
+
+  .filedrop-zone.filedrop-active .filedrop-hint {
+    color: #93c5fd;
+  }
+
+  .filedrop-file-item {
+    background-color: #334155;
+    border-color: #475569;
+  }
+
+  .filedrop-file-item:hover {
+    border-color: #64748b;
+  }
+
+  .filedrop-file-icon {
+    background-color: #1e293b;
+    color: #94a3b8;
+  }
+
+  .filedrop-file-name {
+    color: #e2e8f0;
+  }
+
+  .filedrop-file-meta {
+    color: #64748b;
+  }
+
+  .filedrop-file-remove:hover {
+    background-color: #7f1d1d;
+    color: #fca5a5;
+  }
+}
+
+/* ============================================================================
+ * ANIMATION UTILITIES
+ * ============================================================================ */
+
+@keyframes filedrop-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+.filedrop-zone.filedrop-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);
+  }
+}
+
+.filedrop-zone.filedrop-error {
+  border-color: #ef4444;
+  background-color: #fee2e2;
+  animation: filedrop-shake 0.3s ease-in-out;
+}
+
+@media (prefers-color-scheme: dark) {
+  .filedrop-zone.filedrop-error {
+    border-color: #f87171;
+    background-color: #7f1d1d;
+  }
+}
+
+/* ============================================================================
+ * CUSTOM VARIANTS
+ * ============================================================================ */
+
+/* Minimal variant - subtle styling */
+.filedrop-zone.filedrop-minimal {
+  border-style: solid;
+  border-width: 1px;
+  background-color: transparent;
+}
+
+.filedrop-zone.filedrop-minimal:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+@media (prefers-color-scheme: dark) {
+  .filedrop-zone.filedrop-minimal:hover {
+    background-color: rgba(255, 255, 255, 0.02);
+  }
+}
+
+/* Bold variant - prominent styling */
+.filedrop-zone.filedrop-bold {
+  border-width: 3px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.filedrop-zone.filedrop-bold.filedrop-active {
+  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2);
+}

package/Core/Features/FileDrop/filedrop.ts

@@ -0,0 +1,269 @@
+/**
+ * FileDrop API - 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).
+ */
+
+/**
+ * Information about a dropped file
+ */
+export interface FileInfo {
+  /** Full path to the file */
+  path: string;
+  /** File name with extension */
+  name: string;
+  /** MIME type (e.g., "image/png", "text/plain") */
+  type: string;
+  /** File size in bytes */
+  size: number;
+}
+
+/**
+ * Drag event data
+ */
+export interface DragEvent {
+  /** X coordinate of drag position */
+  x?: number;
+  /** Y coordinate of drag position */
+  y?: number;
+}
+
+export interface FileDropAPI {
+  /**
+   * Enable or disable file drop into window
+   * @param enabled - true to allow files to be dropped into the window
+   */
+  setEnabled(enabled: boolean): Promise<void>;
+
+  /**
+   * Check if file drop is currently enabled
+   * @returns true if file drop is enabled
+   */
+  isEnabled(): Promise<boolean>;
+
+  /**
+   * Start a drag operation to drag files out of the window
+   * @param filePaths - Paths to files to be dragged
+   * @returns true if drag operation started successfully
+   */
+  startDrag(filePaths: string[]): Promise<boolean>;
+
+  /**
+   * Clear all callbacks
+   */
+  clearCallbacks(): Promise<void>;
+
+  /**
+   * Listen for files dropped into the window
+   * @param callback - Function called with array of dropped files
+   * @returns Unsubscribe function
+   */
+  onFilesDropped(callback: (files: FileInfo[]) => void): () => void;
+
+  /**
+   * Listen for drag enter events
+   * @param callback - Function called when drag enters the window
+   * @returns Unsubscribe function
+   */
+  onDragEnter(callback: (event: DragEvent) => void): () => void;
+
+  /**
+   * Listen for drag leave events
+   * @param callback - Function called when drag leaves the window
+   * @returns Unsubscribe function
+   */
+  onDragLeave(callback: (event: DragEvent) => void): () => void;
+}
+
+export class FileDrop implements FileDropAPI {
+  private invokeFn: (name: string, args?: unknown[]) => Promise<unknown>;
+  private onFn: (event: string, callback: (data: unknown) => void) => () => void;
+
+  constructor(
+    invokeFn: (name: string, args?: unknown[]) => Promise<unknown>,
+    onFn: (event: string, callback: (data: unknown) => void) => () => void
+  ) {
+    this.invokeFn = invokeFn;
+    this.onFn = onFn;
+  }
+
+  /**
+   * Enable or disable file drop into window
+   * @param enabled - true to allow files to be dropped into the window
+   */
+  async setEnabled(enabled: boolean): Promise<void> {
+    await this.invokeFn('fileDrop.setEnabled', [enabled]);
+  }
+
+  /**
+   * Check if file drop is currently enabled
+   * @returns true if file drop is enabled
+   */
+  async isEnabled(): Promise<boolean> {
+    return (await this.invokeFn('fileDrop.isEnabled')) as boolean;
+  }
+
+  /**
+   * Start a drag operation to drag files out of the window
+   * @param filePaths - Paths to files to be dragged
+   * @returns true if drag operation started successfully
+   */
+  async startDrag(filePaths: string[]): Promise<boolean> {
+    if (!filePaths || filePaths.length === 0) {
+      throw new Error('filePaths must be a non-empty array');
+    }
+    return (await this.invokeFn('fileDrop.startDrag', [filePaths])) as boolean;
+  }
+
+  /**
+   * Clear all callbacks
+   */
+  async clearCallbacks(): Promise<void> {
+    await this.invokeFn('fileDrop.clearCallbacks');
+  }
+
+  /**
+   * Listen for files dropped into the window
+   * @param callback - Function called with array of dropped files
+   * @returns Unsubscribe function
+   */
+  onFilesDropped(callback: (files: FileInfo[]) => void): () => void {
+    return this.onFn('fileDrop.filesDropped', (data) => {
+      callback(data as FileInfo[]);
+    });
+  }
+
+  /**
+   * Listen for drag enter events
+   * @param callback - Function called when drag enters the window
+   * @returns Unsubscribe function
+   */
+  onDragEnter(callback: (event: DragEvent) => void): () => void {
+    return this.onFn('fileDrop.dragEnter', (data) => {
+      callback((data as DragEvent) || {});
+    });
+  }
+
+  /**
+   * Listen for drag leave events
+   * @param callback - Function called when drag leaves the window
+   * @returns Unsubscribe function
+   */
+  onDragLeave(callback: (event: DragEvent) => void): () => void {
+    return this.onFn('fileDrop.dragLeave', (data) => {
+      callback((data as DragEvent) || {});
+    });
+  }
+}
+
+// Helper functions for common use cases
+
+/**
+ * Read dropped file as text
+ * @param filePath - Path to the file
+ * @returns File contents as text
+ */
+export async function readFileAsText(filePath: string): Promise<string> {
+  const response = await fetch(`file://${filePath}`);
+  return await response.text();
+}
+
+/**
+ * Read dropped file as data URL (useful for images)
+ * @param filePath - Path to the file
+ * @returns File contents as data URL
+ */
+export async function readFileAsDataUrl(filePath: string): Promise<string> {
+  const response = await fetch(`file://${filePath}`);
+  const blob = await response.blob();
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
+/**
+ * Filter files by extension
+ * @param files - Array of file info
+ * @param extensions - Array of extensions to filter (e.g., ['.png', '.jpg'])
+ * @returns Filtered array of files
+ */
+export function filterFilesByExtension(
+  files: FileInfo[],
+  extensions: string[]
+): FileInfo[] {
+  const lowerExtensions = extensions.map((ext) => ext.toLowerCase());
+  return files.filter((file) => {
+    const ext = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
+    return lowerExtensions.includes(ext);
+  });
+}
+
+/**
+ * Filter files by MIME type
+ * @param files - Array of file info
+ * @param mimeTypes - Array of MIME types to filter (e.g., ['image/png', 'image/jpeg'])
+ * @returns Filtered array of files
+ */
+export function filterFilesByMimeType(
+  files: FileInfo[],
+  mimeTypes: string[]
+): FileInfo[] {
+  return files.filter((file) => mimeTypes.includes(file.type));
+}
+
+/**
+ * Check if file is an image
+ * @param file - File info
+ * @returns true if file is an image
+ */
+export function isImageFile(file: FileInfo): boolean {
+  return file.type.startsWith('image/');
+}
+
+/**
+ * Check if file is a video
+ * @param file - File info
+ * @returns true if file is a video
+ */
+export function isVideoFile(file: FileInfo): boolean {
+  return file.type.startsWith('video/');
+}
+
+/**
+ * Check if file is audio
+ * @param file - File info
+ * @returns true if file is audio
+ */
+export function isAudioFile(file: FileInfo): boolean {
+  return file.type.startsWith('audio/');
+}
+
+/**
+ * Check if file is text
+ * @param file - File info
+ * @returns true if file is text
+ */
+export function isTextFile(file: FileInfo): boolean {
+  return file.type.startsWith('text/') || 
+         file.type === 'application/json' ||
+         file.type === 'application/xml';
+}
+
+/**
+ * Format file size for display
+ * @param bytes - File size in bytes
+ * @returns Formatted string (e.g., "1.5 MB")
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 Bytes';
+  
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}