@classic-homes/theme-svelte 0.1.0

package/dist/lib/components/DropdownMenu.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+  import type { Snippet } from 'svelte';
+
+  export interface DropdownMenuItem {
+    type?: 'item' | 'separator' | 'label';
+    label?: string;
+    value?: string;
+    disabled?: boolean;
+    onSelect?: () => void;
+    destructive?: boolean;
+    shortcut?: string;
+  }
+
+  export interface DropdownMenuGroup {
+    label?: string;
+    items: DropdownMenuItem[];
+  }
+
+  interface Props {
+    /** Menu items */
+    items: (DropdownMenuItem | DropdownMenuGroup)[];
+    /** Trigger element */
+    trigger: Snippet;
+    /** Side of trigger to show menu */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Alignment of menu relative to trigger */
+    align?: 'start' | 'center' | 'end';
+    /** Whether menu is open (controlled) */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional class for menu content */
+    class?: string;
+  }
+
+  let {
+    items,
+    trigger,
+    side = 'bottom',
+    align = 'start',
+    open = $bindable(false),
+    onOpenChange,
+    class: className,
+  }: Props = $props();
+
+  function handleOpenChange(newOpen: boolean) {
+    open = newOpen;
+    onOpenChange?.(newOpen);
+  }
+
+  function isGroup(item: DropdownMenuItem | DropdownMenuGroup): item is DropdownMenuGroup {
+    return 'items' in item;
+  }
+</script>
+
+<DropdownMenuPrimitive.Root bind:open onOpenChange={handleOpenChange}>
+  <DropdownMenuPrimitive.Trigger asChild>
+    {#snippet child({ props })}
+      <span {...props}>
+        {@render trigger()}
+      </span>
+    {/snippet}
+  </DropdownMenuPrimitive.Trigger>
+
+  <DropdownMenuPrimitive.Content
+    {side}
+    {align}
+    sideOffset={4}
+    class={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+  >
+    {#each items as item}
+      {#if isGroup(item)}
+        <DropdownMenuPrimitive.Group>
+          {#if item.label}
+            <div class="px-2 py-1.5 text-sm font-semibold">
+              {item.label}
+            </div>
+          {/if}
+          {#each item.items as subItem}
+            {#if subItem.type === 'separator'}
+              <DropdownMenuPrimitive.Separator class="-mx-1 my-1 h-px bg-muted" />
+            {:else if subItem.type === 'label'}
+              <div class="px-2 py-1.5 text-sm font-semibold">
+                {subItem.label}
+              </div>
+            {:else}
+              <DropdownMenuPrimitive.Item
+                disabled={subItem.disabled}
+                onSelect={() => subItem.onSelect?.()}
+                class={cn(
+                  'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                  subItem.destructive && 'text-destructive focus:text-destructive'
+                )}
+              >
+                {subItem.label}
+                {#if subItem.shortcut}
+                  <span class="ml-auto text-xs tracking-widest opacity-60">
+                    {subItem.shortcut}
+                  </span>
+                {/if}
+              </DropdownMenuPrimitive.Item>
+            {/if}
+          {/each}
+        </DropdownMenuPrimitive.Group>
+      {:else if item.type === 'separator'}
+        <DropdownMenuPrimitive.Separator class="-mx-1 my-1 h-px bg-muted" />
+      {:else if item.type === 'label'}
+        <div class="px-2 py-1.5 text-sm font-semibold">
+          {item.label}
+        </div>
+      {:else}
+        <DropdownMenuPrimitive.Item
+          disabled={item.disabled}
+          onSelect={() => item.onSelect?.()}
+          class={cn(
+            'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            item.destructive && 'text-destructive focus:text-destructive'
+          )}
+        >
+          {item.label}
+          {#if item.shortcut}
+            <span class="ml-auto text-xs tracking-widest opacity-60">
+              {item.shortcut}
+            </span>
+          {/if}
+        </DropdownMenuPrimitive.Item>
+      {/if}
+    {/each}
+  </DropdownMenuPrimitive.Content>
+</DropdownMenuPrimitive.Root>

package/dist/lib/components/DropdownMenu.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+export interface DropdownMenuItem {
+    type?: 'item' | 'separator' | 'label';
+    label?: string;
+    value?: string;
+    disabled?: boolean;
+    onSelect?: () => void;
+    destructive?: boolean;
+    shortcut?: string;
+}
+export interface DropdownMenuGroup {
+    label?: string;
+    items: DropdownMenuItem[];
+}
+interface Props {
+    /** Menu items */
+    items: (DropdownMenuItem | DropdownMenuGroup)[];
+    /** Trigger element */
+    trigger: Snippet;
+    /** Side of trigger to show menu */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Alignment of menu relative to trigger */
+    align?: 'start' | 'center' | 'end';
+    /** Whether menu is open (controlled) */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional class for menu content */
+    class?: string;
+}
+declare const DropdownMenu: import("svelte").Component<Props, {}, "open">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;

package/dist/lib/components/FileUpload.svelte

@@ -0,0 +1,448 @@
+<script lang="ts">
+  /**
+   * FileUpload - Drag-and-drop file upload component
+   *
+   * Features:
+   * - Drag and drop zone with visual feedback
+   * - Click to browse files
+   * - File preview (thumbnails for images, icons for other types)
+   * - Size and type validation
+   * - Multiple file support
+   * - Remove file action
+   * - Accessible with keyboard navigation
+   */
+  import type { FileMetadata } from '../types/components.js';
+  import { cn } from '../utils.js';
+  import Button from './Button.svelte';
+
+  interface Props {
+    /** Input ID */
+    id?: string;
+    /** Array of uploaded files (bindable) */
+    files?: FileMetadata[];
+    /** Maximum number of files allowed */
+    maxFiles?: number;
+    /** Maximum file size in bytes (default: 10MB) */
+    maxSizeBytes?: number;
+    /** Accepted MIME types */
+    acceptedTypes?: string[];
+    /** Whether upload is disabled */
+    disabled?: boolean;
+    /** External error message */
+    error?: string;
+    /** Callback when files are selected */
+    onFilesChange?: (files: FileMetadata[]) => void;
+    /** Callback to handle file upload (optional - if not provided, files are stored locally) */
+    onUpload?: (file: File) => Promise<FileMetadata>;
+    /** Label text */
+    label?: string;
+    /** Hint text shown below the drop zone */
+    hint?: string;
+    /** Additional classes */
+    class?: string;
+  }
+
+  let {
+    id = `file-upload-${Math.random().toString(36).slice(2, 9)}`,
+    files = $bindable([]),
+    maxFiles = 10,
+    maxSizeBytes = 10 * 1024 * 1024, // 10MB
+    acceptedTypes = ['image/*', 'application/pdf'],
+    disabled = false,
+    error: externalError,
+    onFilesChange,
+    onUpload,
+    label,
+    hint,
+    class: className,
+  }: Props = $props();
+
+  let isDragging = $state(false);
+  let internalError = $state<string | undefined>(undefined);
+  let fileInput: HTMLInputElement;
+
+  /** Map of file IDs to their AbortControllers for cancellation */
+  const uploadControllers = new Map<string, AbortController>();
+
+  const displayError = $derived(externalError || internalError);
+
+  // Helper to generate unique ID
+  function generateId(): string {
+    return `file-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+  }
+
+  // Validate file
+  function validateFile(file: File): string | null {
+    if (file.size > maxSizeBytes) {
+      const maxMB = Math.round(maxSizeBytes / (1024 * 1024));
+      return `File "${file.name}" exceeds maximum size of ${maxMB}MB`;
+    }
+
+    // Check if file type is accepted
+    const isAccepted = acceptedTypes.some((type) => {
+      if (type.endsWith('/*')) {
+        const category = type.slice(0, -2);
+        return file.type.startsWith(category);
+      }
+      return file.type === type;
+    });
+
+    if (!isAccepted) {
+      return `File type "${file.type}" is not allowed`;
+    }
+
+    return null;
+  }
+
+  // Format file size
+  function formatSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  }
+
+  // Get file icon based on type
+  function getFileIcon(contentType: string): string {
+    if (contentType.startsWith('image/')) {
+      return 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z';
+    }
+    if (contentType === 'application/pdf') {
+      return 'M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z';
+    }
+    return 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z';
+  }
+
+  // Create FileMetadata from File
+  async function createFileMetadata(file: File): Promise<FileMetadata> {
+    const metadata: FileMetadata = {
+      id: generateId(),
+      filename: file.name,
+      contentType: file.type,
+      size: file.size,
+      uploading: !!onUpload,
+      progress: 0,
+    };
+
+    // Generate preview for images
+    if (file.type.startsWith('image/')) {
+      metadata.url = await new Promise<string>((resolve) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result as string);
+        reader.readAsDataURL(file);
+      });
+    }
+
+    return metadata;
+  }
+
+  /**
+   * Atomically update a specific file by ID
+   * This prevents race conditions when multiple files upload simultaneously
+   */
+  function updateFileById(id: string, updates: Partial<FileMetadata>): void {
+    files = files.map((f) => (f.id === id ? { ...f, ...updates } : f));
+  }
+
+  /**
+   * Process selected files with proper async handling
+   * Files are added immediately, then uploads happen in parallel with atomic state updates
+   */
+  async function processFiles(selectedFiles: FileList | File[]): Promise<void> {
+    if (disabled) return;
+
+    internalError = undefined;
+    const fileArray = Array.from(selectedFiles);
+
+    // Check max files limit
+    if (files.length + fileArray.length > maxFiles) {
+      internalError = `Maximum ${maxFiles} files allowed`;
+      return;
+    }
+
+    // Track upload promises for waiting on completion
+    const uploadPromises: Promise<void>[] = [];
+
+    for (const file of fileArray) {
+      const validationError = validateFile(file);
+      if (validationError) {
+        internalError = validationError;
+        continue;
+      }
+
+      const metadata = await createFileMetadata(file);
+
+      // Add file to list immediately with uploading state
+      files = [...files, metadata];
+
+      // Handle upload if handler provided
+      if (onUpload) {
+        const controller = new AbortController();
+        uploadControllers.set(metadata.id, controller);
+
+        const uploadPromise = (async () => {
+          try {
+            const result = await onUpload(file);
+
+            // Check if upload was cancelled (file removed during upload)
+            if (controller.signal.aborted) return;
+
+            // Atomic update on completion
+            updateFileById(metadata.id, {
+              ...result,
+              uploading: false,
+              progress: 100,
+            });
+          } catch (err) {
+            // Check if error is from abort (file removed during upload)
+            if (controller.signal.aborted) return;
+
+            // Atomic update on error
+            updateFileById(metadata.id, {
+              uploading: false,
+              error: err instanceof Error ? err.message : 'Upload failed',
+            });
+          } finally {
+            uploadControllers.delete(metadata.id);
+          }
+        })();
+
+        uploadPromises.push(uploadPromise);
+      } else {
+        // No upload handler - mark as complete immediately
+        updateFileById(metadata.id, {
+          uploading: false,
+          progress: 100,
+        });
+      }
+    }
+
+    // Wait for all uploads to complete before notifying
+    if (uploadPromises.length > 0) {
+      await Promise.allSettled(uploadPromises);
+    }
+
+    onFilesChange?.(files);
+  }
+
+  /**
+   * Remove a file by ID and cancel any pending upload
+   */
+  function removeFile(fileId: string): void {
+    // Cancel pending upload if exists
+    const controller = uploadControllers.get(fileId);
+    if (controller) {
+      controller.abort();
+      uploadControllers.delete(fileId);
+    }
+
+    files = files.filter((f) => f.id !== fileId);
+    onFilesChange?.(files);
+  }
+
+  // Handle drag events
+  function handleDragEnter(e: DragEvent) {
+    e.preventDefault();
+    if (!disabled) isDragging = true;
+  }
+
+  function handleDragLeave(e: DragEvent) {
+    e.preventDefault();
+    isDragging = false;
+  }
+
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault();
+  }
+
+  function handleDrop(e: DragEvent) {
+    e.preventDefault();
+    isDragging = false;
+    if (e.dataTransfer?.files) {
+      processFiles(e.dataTransfer.files);
+    }
+  }
+
+  // Handle click to browse
+  function handleClick() {
+    if (!disabled) {
+      fileInput?.click();
+    }
+  }
+
+  // Handle file input change
+  function handleInputChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+    if (input.files) {
+      processFiles(input.files);
+      // Reset input so same file can be selected again
+      input.value = '';
+    }
+  }
+
+  // Handle keyboard activation
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleClick();
+    }
+  }
+</script>
+
+<div class={cn('space-y-2', className)}>
+  {#if label}
+    <label for={id} class="block text-sm font-medium text-foreground">
+      {label}
+    </label>
+  {/if}
+
+  <!-- Drop Zone -->
+  <div
+    role="button"
+    tabindex={disabled ? -1 : 0}
+    aria-disabled={disabled}
+    aria-describedby={displayError ? `${id}-error` : undefined}
+    class={cn(
+      'relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors',
+      'cursor-pointer focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+      isDragging && !disabled && 'border-primary bg-primary/5',
+      disabled && 'cursor-not-allowed opacity-50',
+      displayError && 'border-destructive',
+      !isDragging &&
+        !disabled &&
+        !displayError &&
+        'border-muted-foreground/25 hover:border-muted-foreground/50'
+    )}
+    ondragenter={handleDragEnter}
+    ondragleave={handleDragLeave}
+    ondragover={handleDragOver}
+    ondrop={handleDrop}
+    onclick={handleClick}
+    onkeydown={handleKeyDown}
+  >
+    <!-- Cloud Upload Icon -->
+    <svg
+      class={cn('mb-3 h-10 w-10', isDragging ? 'text-primary' : 'text-muted-foreground')}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="1.5"
+      aria-hidden="true"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+      />
+    </svg>
+
+    <p class="text-sm text-muted-foreground">
+      <span class="font-medium text-foreground">Click to upload</span> or drag and drop
+    </p>
+    <p class="mt-1 text-xs text-muted-foreground">
+      {acceptedTypes.join(', ')} (max {formatSize(maxSizeBytes)})
+    </p>
+
+    <!-- Hidden file input -->
+    <input
+      bind:this={fileInput}
+      type="file"
+      {id}
+      multiple={maxFiles > 1}
+      accept={acceptedTypes.join(',')}
+      {disabled}
+      class="sr-only"
+      onchange={handleInputChange}
+      aria-label="File upload"
+    />
+  </div>
+
+  <!-- Hint text -->
+  {#if hint && !displayError}
+    <p class="text-sm text-muted-foreground">{hint}</p>
+  {/if}
+
+  <!-- Error message -->
+  {#if displayError}
+    <p id={`${id}-error`} class="text-sm text-destructive" role="alert">
+      {displayError}
+    </p>
+  {/if}
+
+  <!-- File List -->
+  {#if files.length > 0}
+    <ul class="mt-4 space-y-2" aria-label="Uploaded files">
+      {#each files as file (file.id)}
+        <li
+          class={cn(
+            'flex items-center gap-3 rounded-lg border p-3',
+            file.error && 'border-destructive bg-destructive/5'
+          )}
+        >
+          <!-- Preview/Icon -->
+          <div class="flex-shrink-0">
+            {#if file.url && file.contentType.startsWith('image/')}
+              <img src={file.url} alt={file.filename} class="h-10 w-10 rounded object-cover" />
+            {:else}
+              <div class="flex h-10 w-10 items-center justify-center rounded bg-muted">
+                <svg
+                  class="h-5 w-5 text-muted-foreground"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d={getFileIcon(file.contentType)}
+                  />
+                </svg>
+              </div>
+            {/if}
+          </div>
+
+          <!-- File Info -->
+          <div class="min-w-0 flex-1">
+            <p class="truncate text-sm font-medium">{file.filename}</p>
+            <p class="text-xs text-muted-foreground">
+              {formatSize(file.size)}
+              {#if file.error}
+                <span class="text-destructive"> - {file.error}</span>
+              {/if}
+            </p>
+
+            <!-- Progress bar -->
+            {#if file.uploading}
+              <div class="mt-1 h-1 w-full overflow-hidden rounded-full bg-muted">
+                <div
+                  class="h-full bg-primary transition-all duration-300"
+                  style="width: {file.progress || 0}%"
+                ></div>
+              </div>
+            {/if}
+          </div>
+
+          <!-- Remove button -->
+          <Button
+            variant="ghost"
+            size="icon"
+            class="h-8 w-8 flex-shrink-0"
+            onclick={() => removeFile(file.id)}
+            aria-label={`Remove ${file.filename}`}
+            disabled={file.uploading}
+          >
+            <svg
+              class="h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </Button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>

package/dist/lib/components/FileUpload.svelte.d.ts

@@ -0,0 +1,42 @@
+/**
+   * FileUpload - Drag-and-drop file upload component
+   *
+   * Features:
+   * - Drag and drop zone with visual feedback
+   * - Click to browse files
+   * - File preview (thumbnails for images, icons for other types)
+   * - Size and type validation
+   * - Multiple file support
+   * - Remove file action
+   * - Accessible with keyboard navigation
+   */
+import type { FileMetadata } from '../types/components.js';
+interface Props {
+    /** Input ID */
+    id?: string;
+    /** Array of uploaded files (bindable) */
+    files?: FileMetadata[];
+    /** Maximum number of files allowed */
+    maxFiles?: number;
+    /** Maximum file size in bytes (default: 10MB) */
+    maxSizeBytes?: number;
+    /** Accepted MIME types */
+    acceptedTypes?: string[];
+    /** Whether upload is disabled */
+    disabled?: boolean;
+    /** External error message */
+    error?: string;
+    /** Callback when files are selected */
+    onFilesChange?: (files: FileMetadata[]) => void;
+    /** Callback to handle file upload (optional - if not provided, files are stored locally) */
+    onUpload?: (file: File) => Promise<FileMetadata>;
+    /** Label text */
+    label?: string;
+    /** Hint text shown below the drop zone */
+    hint?: string;
+    /** Additional classes */
+    class?: string;
+}
+declare const FileUpload: import("svelte").Component<Props, {}, "files">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;