@useupup/svelte 3.3.0

package/dist/components/ClientGoogleDriveUploader.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import useGoogleDrive from '../composables/useGoogleDrive'
+  import DriveAuthFallback from './shared/DriveAuthFallback.svelte'
+  import DriveBrowser from './shared/DriveBrowser.svelte'
+
+  const {
+    user,
+    googleFiles: driveFiles,
+    handleSignOut,
+    token,
+    authCancelled,
+    retryAuth,
+    isAuthReady,
+    path,
+    setPath,
+    isClickLoading,
+    handleClick,
+    selectedFiles,
+    showLoader,
+    handleSubmit,
+    handleCancelDownload,
+    onSelectCurrentFolder,
+    error,
+    hasMore,
+    isLoadingMore,
+    loadMore,
+  } = useGoogleDrive()
+</script>
+
+{#if !$token && ($authCancelled || $isAuthReady)}
+  <DriveAuthFallback
+    providerName="Google Drive"
+    onRetry={retryAuth}
+    {error}
+    dataUpupSlot="google-drive-uploader"
+  />
+{:else}
+  <DriveBrowser
+    {driveFiles}
+    {user}
+    {handleSignOut}
+    dataUpupSlot="google-drive-uploader"
+    {path}
+    {setPath}
+    {isClickLoading}
+    {handleClick}
+    {selectedFiles}
+    {showLoader}
+    {handleSubmit}
+    {handleCancelDownload}
+    {onSelectCurrentFolder}
+    {error}
+    {hasMore}
+    {isLoadingMore}
+    {loadMore}
+  />
+{/if}

package/dist/components/ClientGoogleDriveUploader.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ClientGoogleDriveUploader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ClientGoogleDriveUploader = InstanceType<typeof ClientGoogleDriveUploader>;
+export default ClientGoogleDriveUploader;
+//# sourceMappingURL=ClientGoogleDriveUploader.svelte.d.ts.map

package/dist/components/ClientGoogleDriveUploader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientGoogleDriveUploader.svelte.d.ts","sourceRoot":"","sources":["../../src/components/ClientGoogleDriveUploader.svelte.ts"],"names":[],"mappings":"AA4CA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,yBAAyB;;kBAA+E,CAAC;AAC7F,KAAK,yBAAyB,GAAG,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAClF,eAAe,yBAAyB,CAAC"}

package/dist/components/ClientOneDriveUploader.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { useOneDrive } from '../composables/useOneDrive'
+  import DriveAuthFallback from './shared/DriveAuthFallback.svelte'
+  import DriveBrowser from './shared/DriveBrowser.svelte'
+
+  const {
+    user,
+    oneDriveFiles: driveFiles,
+    signOut,
+    token,
+    isAuthenticated,
+    authenticate,
+    isLoading,
+    path,
+    setPath,
+    isClickLoading,
+    handleClick,
+    selectedFiles,
+    showLoader,
+    handleSubmit,
+    handleCancelDownload,
+    onSelectCurrentFolder,
+    error,
+    hasMore,
+    isLoadingMore,
+    loadMore,
+  } = useOneDrive()
+
+  async function handleSignOut() {
+    signOut()
+  }
+</script>
+
+{#if !$isAuthenticated && !$token && !$isLoading}
+  <DriveAuthFallback
+    providerName="OneDrive"
+    onRetry={authenticate}
+    dataUpupSlot="one-drive-uploader"
+  />
+{:else}
+  <DriveBrowser
+    {driveFiles}
+    {user}
+    {handleSignOut}
+    dataUpupSlot="one-drive-uploader"
+    {path}
+    {setPath}
+    {isClickLoading}
+    {handleClick}
+    {selectedFiles}
+    {showLoader}
+    {handleSubmit}
+    {handleCancelDownload}
+    {onSelectCurrentFolder}
+    {error}
+    {hasMore}
+    {isLoadingMore}
+    {loadMore}
+  />
+{/if}

package/dist/components/ClientOneDriveUploader.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ClientOneDriveUploader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ClientOneDriveUploader = InstanceType<typeof ClientOneDriveUploader>;
+export default ClientOneDriveUploader;
+//# sourceMappingURL=ClientOneDriveUploader.svelte.d.ts.map

package/dist/components/ClientOneDriveUploader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientOneDriveUploader.svelte.d.ts","sourceRoot":"","sources":["../../src/components/ClientOneDriveUploader.svelte.ts"],"names":[],"mappings":"AAgDA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,sBAAsB;;kBAA+E,CAAC;AAC1F,KAAK,sBAAsB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC5E,eAAe,sBAAsB,CAAC"}

package/dist/components/DefaultAddMoreIcon.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  // Default 'add more' glyph — renders the shared registry 'plus' icon (parity with
+  // React's DefaultPlusIconComponent). Forwards the consumer's class/size to the svg.
+  import Icon from './Icon.svelte'
+  let {
+    class: className = '',
+    size = undefined,
+  }: { class?: string; size?: number } = $props()
+</script>
+
+<Icon name="plus" class={className} {size} />

package/dist/components/DefaultAddMoreIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    class?: string;
+    size?: number;
+};
+declare const DefaultAddMoreIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type DefaultAddMoreIcon = ReturnType<typeof DefaultAddMoreIcon>;
+export default DefaultAddMoreIcon;
+//# sourceMappingURL=DefaultAddMoreIcon.svelte.d.ts.map

package/dist/components/DefaultAddMoreIcon.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultAddMoreIcon.svelte.d.ts","sourceRoot":"","sources":["../../src/components/DefaultAddMoreIcon.svelte.ts"],"names":[],"mappings":"AAOC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAe5D,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/DefaultLoaderIcon.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import Icon from './Icon.svelte'
+</script>
+
+<Icon name="loader" class="upup-animate-spin upup-text-3xl upup-text-[#6D6D6D]" />

package/dist/components/DefaultLoaderIcon.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DefaultLoaderIcon: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DefaultLoaderIcon = InstanceType<typeof DefaultLoaderIcon>;
+export default DefaultLoaderIcon;
+//# sourceMappingURL=DefaultLoaderIcon.svelte.d.ts.map

package/dist/components/DefaultLoaderIcon.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultLoaderIcon.svelte.d.ts","sourceRoot":"","sources":["../../src/components/DefaultLoaderIcon.svelte.ts"],"names":[],"mappings":"AAaA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,iBAAiB;;kBAA+E,CAAC;AACrF,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAClE,eAAe,iBAAiB,CAAC"}

package/dist/components/DropboxUploader.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { useUploaderRuntime, useUploaderSource } from '../context/uploader-context'
+  import ClientDropboxUploader from './ClientDropboxUploader.svelte'
+  import ServerModeDriveUploader from './ServerModeDriveUploader.svelte'
+
+  const { mode } = useUploaderRuntime()
+  const { setActiveSource } = useUploaderSource()
+</script>
+
+{#if mode === 'server'}
+  <ServerModeDriveUploader
+    provider="dropbox"
+    onBack={() => setActiveSource(undefined)}
+  />
+{:else}
+  <ClientDropboxUploader />
+{/if}

package/dist/components/DropboxUploader.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DropboxUploader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DropboxUploader = InstanceType<typeof DropboxUploader>;
+export default DropboxUploader;
+//# sourceMappingURL=DropboxUploader.svelte.d.ts.map

package/dist/components/DropboxUploader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropboxUploader.svelte.d.ts","sourceRoot":"","sources":["../../src/components/DropboxUploader.svelte.ts"],"names":[],"mappings":"AAwBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,eAAe;;kBAA+E,CAAC;AACnF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}

package/dist/components/EmptyIcon.svelte

@@ -0,0 +1,3 @@
+<script lang="ts"></script>
+
+<!-- Renders nothing. Default placeholder for optional icon props. -->

package/dist/components/EmptyIcon.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const EmptyIcon: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type EmptyIcon = InstanceType<typeof EmptyIcon>;
+export default EmptyIcon;
+//# sourceMappingURL=EmptyIcon.svelte.d.ts.map

package/dist/components/EmptyIcon.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyIcon.svelte.d.ts","sourceRoot":"","sources":["../../src/components/EmptyIcon.svelte.ts"],"names":[],"mappings":"AASA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,SAAS;;kBAA+E,CAAC;AAC7E,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}

package/dist/components/FileHero.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+  import { cn, isFileRemovalLocked } from '@useupup/core/internal'
+  import { UploadStatus, type UploadFile, type Translations } from '@useupup/core'
+  import { fileGetExtension, fileGetIsImage } from '@useupup/core/internal'
+  import {
+    useUploaderFiles,
+    useUploaderI18n,
+    useUploaderOptions,
+    useUploaderTheme,
+    useUploaderUploadControls,
+  } from '../context/uploader-context'
+  import FileIcon from './FileIcon.svelte'
+  import ProgressBar from './shared/ProgressBar.svelte'
+  import FileSuccessCheck from './shared/FileSuccessCheck.svelte'
+
+  /**
+   * Single-file HERO preview (spec §4 state 3, states-tour-v2.html "single file").
+   * One visual fills the fixed-height content area with a bottom scrim caption.
+   * The panel is fixed-height by ruling, so the media MUST stay bounded with
+   * `min-h-0 flex-1 object-contain` — the repo's #1 visual trap.
+   */
+  let { file }: { file: UploadFile } = $props()
+
+  const { handleFileRemove } = useUploaderFiles()
+  const { translations: tr } = useUploaderI18n()
+  const { icons: { FileDeleteIcon } } = useUploaderOptions()
+  const { isDark: dark } = useUploaderTheme()
+  const { upload: { filesProgressMap } } = useUploaderUploadControls()
+
+  const isImage = $derived(fileGetIsImage(file.type ?? ''))
+  const isVideo = $derived((file.type ?? '').startsWith('video/'))
+  const extension = $derived(fileGetExtension(file.type ?? '', file.name))
+  const progress = $derived.by(() => {
+    const p = $filesProgressMap[file.id]
+    const loaded = p?.loaded ?? NaN
+    const total = p?.total ?? NaN
+    const pct = Math.floor((loaded / total) * 100)
+    // No progress entry ⇒ NaN; total === 0 ⇒ Infinity. Either would render
+    // width:NaN%/aria-valuenow=NaN in ProgressBar while an upload is active.
+    return Number.isFinite(pct) ? pct : 0
+  })
+
+  function formatFileSize(bytes: number | undefined, t: Translations): string {
+    if (!bytes || bytes === 0) return t.zeroBytes
+    const k = 1024
+    const sizes = [t.bytes, t.kb, t.mb, t.gb]
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return Math.round((bytes / Math.pow(k, i)) * 10) / 10 + ' ' + sizes[i]
+  }
+
+  function onRemove(e: MouseEvent) {
+    e.stopPropagation()
+    handleFileRemove(file.id)
+  }
+</script>
+
+<div
+  data-testid="upup-file-hero"
+  data-upup-slot="file-hero"
+  role="listitem"
+  class={cn(
+    'upup-relative upup-flex upup-min-h-0 upup-flex-1 upup-flex-col upup-overflow-hidden upup-rounded-2xl upup-ring-1',
+    $dark
+      ? 'upup-bg-white/[0.03] upup-ring-white/[0.08]'
+      : 'upup-bg-black/[0.04] upup-ring-black/[0.06]',
+  )}
+>
+  {#if isImage}
+    <img
+      src={file.url ?? ''}
+      alt={file.name}
+      class="upup-min-h-0 upup-flex-1 upup-object-contain"
+    />
+  {:else if isVideo}
+    <!-- preload="metadata" paints the first frame — a real thumbnail without
+         controls chrome. Muted + playsInline keep mobile browsers from
+         hijacking it into a player. -->
+    <video
+      src={file.url ?? ''}
+      muted
+      playsinline
+      preload="metadata"
+      class="upup-pointer-events-none upup-min-h-0 upup-flex-1 upup-object-contain"
+    ></video>
+  {:else}
+    <div
+      class="upup-flex upup-min-h-0 upup-flex-1 upup-items-center upup-justify-center upup-bg-gradient-to-br upup-from-[#0ea5e9]/10 upup-to-[#7c3aed]/10"
+    >
+      <FileIcon {extension} />
+    </div>
+  {/if}
+
+  {#if file.status === UploadStatus.SUCCESSFUL}
+    <FileSuccessCheck class="upup-absolute upup-left-3 upup-top-3 upup-z-10" />
+  {/if}
+
+  <!-- Delete is gone once the file has uploaded successfully — the
+       completion check (top-left) is the only remaining overlay mark. -->
+  {#if file.status !== UploadStatus.SUCCESSFUL}
+    <button
+      class={cn(
+        'upup-fx-remove upup-fx-press upup-absolute upup-right-3 upup-top-3 upup-z-10',
+        'upup-flex upup-h-[34px] upup-w-[34px] upup-items-center upup-justify-center',
+        'upup-rounded-[9px] upup-bg-[#04080f]/40 upup-text-[#e2e8f0]',
+        'hover:upup-bg-[#04080f]/65',
+        'disabled:upup-cursor-not-allowed disabled:upup-opacity-50',
+      )}
+      onclick={onRemove}
+      type="button"
+      disabled={isFileRemovalLocked(progress, file.status)}
+      aria-label={tr.removeFile}
+      data-testid="upup-file-remove"
+    >
+      <FileDeleteIcon class="upup-h-5 upup-w-5" />
+    </button>
+  {/if}
+
+  <!-- Caption scrim: theme-aware (a black scrim over a light hero read as
+       a dark-mode leak). The progress bar lives INSIDE the scrim flow so
+       it can never overlap the name/size lines. -->
+  <div
+    class={cn(
+      'upup-pointer-events-none upup-absolute upup-inset-x-0 upup-bottom-0 upup-bg-gradient-to-t upup-to-transparent upup-px-[18px] upup-pb-3.5 upup-pt-4',
+      $dark
+        ? 'upup-from-[#04080f]/[0.86] upup-via-[#04080f]/50'
+        : 'upup-from-white/[0.92] upup-via-white/60',
+    )}
+  >
+    <div
+      class={cn(
+        'upup-truncate upup-text-[13px] upup-font-semibold',
+        $dark ? 'upup-text-[#e2e8f0]' : 'upup-text-[#1e293b]',
+      )}
+    >
+      {file.name}
+    </div>
+    <div
+      class={cn(
+        'upup-mt-0.5 upup-text-[12px]',
+        $dark ? 'upup-text-[#94a3b8]' : 'upup-text-[#64748b]',
+      )}
+    >
+      {formatFileSize(file.size, tr)}
+    </div>
+    <ProgressBar
+      class={cn('upup-mt-2', $dark ? 'upup-text-white' : 'upup-text-[#0f172a]')}
+      progressBarClassName="upup-rounded"
+      {progress}
+      showValue
+    />
+  </div>
+</div>

package/dist/components/FileHero.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type UploadFile } from '@useupup/core';
+type $$ComponentProps = {
+    file: UploadFile;
+};
+declare const FileHero: import("svelte").Component<$$ComponentProps, {}, "">;
+type FileHero = ReturnType<typeof FileHero>;
+export default FileHero;
+//# sourceMappingURL=FileHero.svelte.d.ts.map

package/dist/components/FileHero.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileHero.svelte.d.ts","sourceRoot":"","sources":["../../src/components/FileHero.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,UAAU,EAAqB,MAAM,eAAe,CAAA;AAa/E,KAAK,gBAAgB,GAAI;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC;AA8G/C,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/FileIcon.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { fileTypeIconName } from '@useupup/core'
+import { cn } from '@useupup/core/internal'
+  import { useUploaderTheme } from '../context/uploader-context'
+  import Icon from './Icon.svelte'
+
+  let {
+    extension = '',
+    class: className = '',
+  }: { extension?: string; class?: string | undefined } = $props()
+
+  const { isDark: dark } = useUploaderTheme()
+
+  const iconClass = $derived(
+    cn('upup-text-5xl upup-text-[#0284c7]', className, {
+      'upup-text-[#38bdf8] dark:upup-text-[#38bdf8]': $dark,
+    }),
+  )
+</script>
+
+<span class="upup-inline-flex" data-testid="upup-file-icon" data-upup-slot="file-icon">
+  <Icon name={fileTypeIconName(extension)} class={iconClass} />
+</span>

package/dist/components/FileIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    extension?: string;
+    class?: string | undefined;
+};
+declare const FileIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type FileIcon = ReturnType<typeof FileIcon>;
+export default FileIcon;
+//# sourceMappingURL=FileIcon.svelte.d.ts.map

package/dist/components/FileIcon.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileIcon.svelte.d.ts","sourceRoot":"","sources":["../../src/components/FileIcon.svelte.ts"],"names":[],"mappings":"AAQC,KAAK,gBAAgB,GAAI;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAAC;AA2B7E,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/FileItem.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import type { UploadFile } from '@useupup/core'
+  import { cn } from '@useupup/core/internal'
+  import {
+    useUploaderFiles,
+    useUploaderOptions,
+    useUploaderRuntime,
+    useUploaderTheme,
+    useUploaderView,
+  } from '../context/uploader-context'
+  import FilePreview from './FilePreview.svelte'
+  import FilePreviewPortal from './FilePreviewPortal.svelte'
+  import FileRow from './FileRow.svelte'
+
+  let {
+    file,
+    index = 0,
+    forcedList = false,
+  }: {
+    file: UploadFile
+    /** Position in the sorted list — drives the entrance stagger. */
+    index?: number
+    /** True when the panel forces the row list (tiles don't fit one row). */
+    forcedList?: boolean
+  } = $props()
+
+  const { core } = useUploaderRuntime()
+  const { files, leavingFileIds } = useUploaderFiles()
+  const { viewMode } = useUploaderView()
+  const { onFileClick } = useUploaderOptions()
+  const { slotOverrides: slotClasses } = useUploaderTheme()
+
+  let showPreviewPortal = $state(false)
+  let canPreview = $state(false)
+
+  const leaving = $derived($leavingFileIds.has(file.id))
+
+  function openPreviewPortal() {
+    showPreviewPortal = true
+    core?.emit('file-preview-open', { fileId: file.id, fileName: file.name })
+  }
+
+  function closePreviewPortal() {
+    showPreviewPortal = false
+    core?.emit('file-preview-close', { fileId: file.id, fileName: file.name })
+  }
+
+  function onStopPropagation(e: MouseEvent) {
+    e.stopPropagation()
+  }
+</script>
+
+<div
+  data-testid="upup-file-item"
+  data-upup-slot="file-item"
+  role="listitem"
+  class={cn(
+    'upup-animate-fx-enter',
+    'upup-relative upup-flex upup-flex-1 upup-flex-col upup-items-start upup-gap-1 upup-bg-transparent',
+    leaving && 'upup-animate-fx-exit upup-overflow-hidden',
+    {
+      [$slotClasses.fileItemMultiple ?? '']: !!$slotClasses.fileItemMultiple && $files.size > 1,
+      [$slotClasses.fileItemSingle ?? '']: !!$slotClasses.fileItemSingle && $files.size === 1,
+    },
+  )}
+  style={leaving ? undefined : `animation-delay: ${Math.min(index, 8) * 40}ms`}
+>
+  {#if $viewMode === 'list' || forcedList}
+    <FileRow {file} {index} />
+  {:else}
+    <FilePreview
+      fileName={file.name}
+      fileType={file.type ?? ''}
+      fileId={file.id}
+      fileUrl={file.url ?? ''}
+      fileSize={file.size}
+      {index}
+      {canPreview}
+      onRequestPreview={openPreviewPortal}
+      onUpdateCanPreview={(val) => (canPreview = val)}
+      onclick={() => onFileClick(file)}
+    />
+
+    {#if canPreview && showPreviewPortal}
+      <FilePreviewPortal
+        fileType={file.type ?? ''}
+        fileUrl={file.url ?? ''}
+        fileName={file.name}
+        fileSize={file.size}
+        onClose={closePreviewPortal}
+        {onStopPropagation}
+      />
+    {/if}
+  {/if}
+</div>

package/dist/components/FileItem.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { UploadFile } from '@useupup/core';
+type $$ComponentProps = {
+    file: UploadFile;
+    /** Position in the sorted list — drives the entrance stagger. */
+    index?: number;
+    /** True when the panel forces the row list (tiles don't fit one row). */
+    forcedList?: boolean;
+};
+declare const FileItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type FileItem = ReturnType<typeof FileItem>;
+export default FileItem;
+//# sourceMappingURL=FileItem.svelte.d.ts.map

package/dist/components/FileItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileItem.svelte.d.ts","sourceRoot":"","sources":["../../src/components/FileItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAa9C,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,UAAU,CAAA;IAChB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAC;AA+DJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}