@useupup/svelte 3.3.0

package/dist/components/shared/DriveAuthFallback.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { Readable } from 'svelte/store'
+  import { type DriveBrowserError, formatUiMessage as t } from '@useupup/core'
+import { cn } from '@useupup/core/internal'
+  import { useUploaderI18n, useUploaderTheme } from '../../context/uploader-context'
+  import SourceViewContainer from './SourceViewContainer.svelte'
+
+  const {
+    providerName,
+    onRetry,
+    error,
+    dataUpupSlot = 'drive-auth-fallback',
+  }: {
+    providerName: string
+    onRetry: () => void
+    error?: Readable<DriveBrowserError | undefined>
+    dataUpupSlot?: string
+  } = $props()
+
+  const { isDark: dark, slotOverrides: slotClasses } = useUploaderTheme()
+  const { translations: tr } = useUploaderI18n()
+</script>
+
+<SourceViewContainer data-upup-slot={dataUpupSlot}>
+  <div class="upup-flex upup-h-full upup-w-full upup-flex-col upup-items-center upup-justify-center upup-gap-4 upup-p-6 upup-text-center">
+    {#if error && !!$error}
+      <p
+        data-testid="upup-drive-error"
+        data-upup-slot="drive-error"
+        role="alert"
+        class="upup-p-4 upup-text-sm upup-text-red-600 dark:upup-text-red-400"
+      >
+        {t(tr.driveLoadError, { message: $error.message })}
+      </p>
+    {/if}
+    <p
+      class={cn(
+        'upup-text-sm upup-text-[#333]',
+        {
+          'upup-text-[#FAFAFA] dark:upup-text-[#FAFAFA]': $dark,
+        },
+        $slotClasses.sourceView,
+      )}
+    >
+      {t(tr.authenticatePrompt, { provider: providerName })}
+    </p>
+    <button
+      type="button"
+      class={cn(
+        'upup-rounded-md upup-bg-[#0ea5e9] upup-px-4 upup-py-2 upup-text-sm upup-font-medium upup-text-white upup-transition-all upup-duration-300 hover:upup-bg-[#0284c7]',
+        {
+          'upup-bg-[#38bdf8] hover:upup-bg-[#0ea5e9] dark:upup-bg-[#38bdf8] dark:hover:upup-bg-[#0ea5e9]': $dark,
+        },
+      )}
+      onclick={onRetry}
+    >
+      {t(tr.signInWith, { provider: providerName })}
+    </button>
+  </div>
+</SourceViewContainer>

package/dist/components/shared/DriveAuthFallback.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Readable } from 'svelte/store';
+import { type DriveBrowserError } from '@useupup/core';
+type $$ComponentProps = {
+    providerName: string;
+    onRetry: () => void;
+    error?: Readable<DriveBrowserError | undefined>;
+    dataUpupSlot?: string;
+};
+declare const DriveAuthFallback: import("svelte").Component<$$ComponentProps, {}, "">;
+type DriveAuthFallback = ReturnType<typeof DriveAuthFallback>;
+export default DriveAuthFallback;
+//# sourceMappingURL=DriveAuthFallback.svelte.d.ts.map

package/dist/components/shared/DriveAuthFallback.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DriveAuthFallback.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/shared/DriveAuthFallback.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,KAAK,iBAAiB,EAAwB,MAAM,eAAe,CAAA;AAK3E,KAAK,gBAAgB,GAAI;IACtB,YAAY,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAA;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAC;AAgDJ,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/components/shared/DriveBrowser.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+  import type { Readable } from 'svelte/store'
+  import { type DriveBrowserError, type DriveFile, type DriveFolder, type DriveUser, formatUiMessage as t, pluralUiMessage as plural } from '@useupup/core'
+import { searchDriveFiles, cn } from '@useupup/core/internal'
+  import {
+    useUploaderI18n,
+    useUploaderOptions,
+    useUploaderTheme,
+  } from '../../context/uploader-context'
+  import SourceViewContainer from './SourceViewContainer.svelte'
+  import DriveBrowserHeader from './DriveBrowserHeader.svelte'
+  import DriveBrowserItem from './DriveBrowserItem.svelte'
+
+  const {
+    isClickLoading,
+    driveFiles,
+    path,
+    setPath,
+    user,
+    handleSignOut,
+    handleClick,
+    selectedFiles,
+    showLoader,
+    handleSubmit,
+    handleCancelDownload,
+    onSelectCurrentFolder,
+    error,
+    hasMore,
+    isLoadingMore,
+    loadMore,
+    dataUpupSlot = 'drive-browser',
+  }: {
+    isClickLoading?: Readable<boolean>
+    driveFiles?: Readable<DriveFolder | undefined>
+    path: Readable<DriveFolder[]>
+    setPath: (newPath: DriveFolder[]) => void
+    user?: Readable<DriveUser | undefined>
+    handleSignOut: () => Promise<void>
+    handleClick: (file: DriveFile) => void | Promise<void>
+    selectedFiles: Readable<DriveFile[]>
+    showLoader: Readable<boolean>
+    handleSubmit: () => Promise<void>
+    handleCancelDownload: () => void
+    onSelectCurrentFolder?: () => Promise<void> | void
+    error?: Readable<DriveBrowserError | undefined>
+    hasMore?: Readable<boolean>
+    isLoadingMore?: Readable<boolean>
+    loadMore?: () => void | Promise<void>
+    dataUpupSlot?: string
+  } = $props()
+
+  const { allowedFileTypes, icons } = useUploaderOptions()
+  const Loader = icons.LoaderIcon
+  const { isDark: dark, slotOverrides: slotClasses } = useUploaderTheme()
+  const { translations: tr } = useUploaderI18n()
+  let searchTerm = $state('')
+
+  function filterItems(item: DriveFile, accept: string) {
+    if (item.isFolder) return true
+    if (!accept || accept === '*') return true
+    return accept.split(',').some((pattern) => {
+      const p = pattern.trim()
+      if (p.startsWith('.')) return item.name.endsWith(p)
+      if (p.endsWith('/*')) return item.mimeType.startsWith(p.replace('/*', '/'))
+      return item.mimeType === p
+    })
+  }
+
+  const items = $derived(
+    $path[$path.length - 1]?.children?.filter((item) =>
+      filterItems(item, allowedFileTypes),
+    ),
+  )
+
+  const displayedItems = $derived(searchDriveFiles(items ?? [], searchTerm) || [])
+
+  // error short-circuits the perpetual loader — the exact F-123/F-124 symptom.
+  const isLoading = $derived(!$error && (($isClickLoading ?? false) || !$driveFiles))
+
+  function noopClick() { /* disabled click */ }
+</script>
+
+<SourceViewContainer isLoading={isLoading} data-upup-slot={dataUpupSlot}>
+  {#if isLoading}
+    <Loader />
+  {:else}
+    <div data-testid="upup-drive-browser" class="upup-grid upup-h-full upup-w-full upup-grid-rows-[auto,1fr,auto] upup-overflow-auto">
+      <DriveBrowserHeader
+        showSearch={!!items?.length}
+        path={$path}
+        {setPath}
+        {searchTerm}
+        onSearch={(v) => (searchTerm = v)}
+        user={$user}
+        {handleSignOut}
+      />
+      {#if !!$path}
+        <div
+          class={cn(
+            'upup-h-full upup-overflow-y-auto upup-pt-2',
+            {
+              'upup-text-[#fafafa] dark:upup-text-[#fafafa]': $dark,
+            },
+            $slotClasses.driveBody,
+          )}
+        >
+          {#if !!$error}
+            <div class="upup-flex upup-h-full upup-flex-col upup-items-center upup-justify-center upup-px-6 upup-text-center">
+              <p
+                data-testid="upup-drive-error"
+                data-upup-slot="drive-error"
+                role="alert"
+                class="upup-text-sm upup-text-red-600 dark:upup-text-red-400"
+              >
+                {t(tr.driveLoadError, { message: $error.message })}
+              </p>
+            </div>
+          {/if}
+          {#if !!displayedItems.length}
+            <ul class="upup-p-2">
+              {#each displayedItems as file (file.id)}
+                <DriveBrowserItem
+                  {file}
+                  handleClick={$isClickLoading || $showLoader ? noopClick : handleClick}
+                  selectedFiles={$selectedFiles}
+                />
+              {/each}
+            </ul>
+          {/if}
+          {#if !displayedItems.length && !$error}
+            <div class="upup-flex upup-h-full upup-flex-col upup-items-center upup-justify-center">
+              <p class="upup-text-xs upup-opacity-70">
+                {tr.noAcceptedFilesFound}
+              </p>
+            </div>
+          {/if}
+          {#if !!$hasMore}
+            <button
+              data-testid="upup-drive-load-more"
+              data-upup-slot="drive-load-more"
+              class="upup-mx-auto upup-my-2 upup-block upup-rounded-md upup-px-3 upup-py-1.5 upup-text-sm upup-text-[#0284c7] disabled:upup-opacity-50"
+              disabled={$isLoadingMore}
+              onclick={() => loadMore?.()}
+            >
+              {$isLoadingMore ? tr.loading : tr.loadMore}
+            </button>
+          {/if}
+        </div>
+      {/if}
+
+      {#if (!!$selectedFiles.length || !!onSelectCurrentFolder) && !$error}
+        <div
+          class={cn(
+            'upup-flex upup-origin-bottom upup-items-center upup-justify-start upup-gap-4 upup-border-t upup-px-3 upup-py-2',
+            $dark
+              ? 'upup-border-white/[0.08] upup-text-[#fafafa]'
+              : 'upup-border-black/[0.06]',
+            $slotClasses.driveFooter,
+          )}
+        >
+          {#if !!onSelectCurrentFolder}
+            <button
+              class={cn(
+                'upup-rounded-md upup-bg-transparent upup-px-3 upup-py-2 upup-text-sm upup-font-medium upup-text-[#0284c7] upup-transition-all upup-duration-300',
+                {
+                  'upup-text-[#38bdf8] dark:upup-text-[#38bdf8]': $dark,
+                },
+              )}
+              disabled={$showLoader}
+              onclick={() => onSelectCurrentFolder?.()}
+            >
+              {tr.selectThisFolder}
+            </button>
+          {/if}
+          <button
+            class={cn(
+              'upup-rounded-md upup-bg-[#0ea5e9] upup-px-3 upup-py-2 upup-text-sm upup-font-medium upup-text-white upup-transition-all upup-duration-300',
+              {
+                'upup-animate-pulse': $showLoader,
+                'upup-bg-[#38bdf8] dark:upup-bg-[#38bdf8]': $dark,
+              },
+              $slotClasses.driveAddFilesButton,
+            )}
+            disabled={$showLoader}
+            onclick={handleSubmit}
+          >
+            {t(
+              plural(tr, 'addFiles', $selectedFiles.length),
+              { count: $selectedFiles.length },
+            )}
+          </button>
+          <button
+            class={cn(
+              'upup-ml-auto upup-rounded-md upup-p-1 upup-text-sm upup-text-[#0284c7] upup-transition-all upup-duration-300',
+              {
+                'upup-text-[#38bdf8] dark:upup-text-[#38bdf8]': $dark,
+              },
+              $slotClasses.driveCancelFilesButton,
+            )}
+            disabled={$showLoader}
+            onclick={handleCancelDownload}
+          >
+            {tr.cancel}
+          </button>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</SourceViewContainer>

package/dist/components/shared/DriveBrowser.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Readable } from 'svelte/store';
+import { type DriveBrowserError, type DriveFile, type DriveFolder, type DriveUser } from '@useupup/core';
+type $$ComponentProps = {
+    isClickLoading?: Readable<boolean>;
+    driveFiles?: Readable<DriveFolder | undefined>;
+    path: Readable<DriveFolder[]>;
+    setPath: (newPath: DriveFolder[]) => void;
+    user?: Readable<DriveUser | undefined>;
+    handleSignOut: () => Promise<void>;
+    handleClick: (file: DriveFile) => void | Promise<void>;
+    selectedFiles: Readable<DriveFile[]>;
+    showLoader: Readable<boolean>;
+    handleSubmit: () => Promise<void>;
+    handleCancelDownload: () => void;
+    onSelectCurrentFolder?: () => Promise<void> | void;
+    error?: Readable<DriveBrowserError | undefined>;
+    hasMore?: Readable<boolean>;
+    isLoadingMore?: Readable<boolean>;
+    loadMore?: () => void | Promise<void>;
+    dataUpupSlot?: string;
+};
+declare const DriveBrowser: import("svelte").Component<$$ComponentProps, {}, "">;
+type DriveBrowser = ReturnType<typeof DriveBrowser>;
+export default DriveBrowser;
+//# sourceMappingURL=DriveBrowser.svelte.d.ts.map

package/dist/components/shared/DriveBrowser.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DriveBrowser.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/shared/DriveBrowser.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAmD,MAAM,eAAe,CAAA;AAWxJ,KAAK,gBAAgB,GAAI;IACtB,cAAc,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IAClC,UAAU,CAAC,EAAE,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAC,CAAA;IAC9C,IAAI,EAAE,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAA;IAC7B,OAAO,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,IAAI,CAAA;IACzC,IAAI,CAAC,EAAE,QAAQ,CAAC,SAAS,GAAG,SAAS,CAAC,CAAA;IACtC,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAClC,WAAW,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACtD,aAAa,EAAE,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAA;IACpC,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC7B,YAAY,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IACjC,oBAAoB,EAAE,MAAM,IAAI,CAAA;IAChC,qBAAqB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAClD,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAA;IAC/C,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC3B,aAAa,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACrC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAC;AAwJJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/shared/DriveBrowserHeader.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+  import { writable } from 'svelte/store'
+  import { type DriveFolder, type DriveUser } from '@useupup/core'
+import { cn } from '@useupup/core/internal'
+  import {
+    useUploaderI18n,
+    useUploaderSource,
+    useUploaderTheme,
+  } from '../../context/uploader-context'
+  import {
+    useSourceViewHeaderExtra,
+    portal,
+  } from '../../context/source-view-header-extra'
+  import Icon from '../Icon.svelte'
+
+  const {
+    path,
+    setPath,
+    handleSignOut,
+    showSearch,
+    searchTerm,
+    onSearch,
+    user,
+  }: {
+    path: DriveFolder[]
+    setPath: (newPath: DriveFolder[]) => void
+    handleSignOut: () => Promise<void>
+    showSearch: boolean
+    searchTerm: string
+    onSearch: (value: string) => void
+    user?: DriveUser | undefined
+  } = $props()
+
+  const { setActiveSource } = useUploaderSource()
+  const { translations: tr } = useUploaderI18n()
+  const { isDark: dark, slotOverrides: slotClasses } = useUploaderTheme()
+
+  const headerExtraStore =
+    useSourceViewHeaderExtra() ?? writable<HTMLElement | null>(null)
+
+  // Once navigated into a folder we show a Back affordance + the current folder
+  // name, not a full breadcrumb trail (long provider folder names blew the row
+  // up, and multi-level jumps weren't worth the fragility).
+  const navigated = $derived(path.length > 1)
+  const currentFolder = $derived(path[path.length - 1])
+  const hasFilter = $derived(searchTerm.trim().length > 0)
+
+  // Collapsed/expanded search lives here; the term itself stays in DriveBrowser.
+  let searchOpen = $state(false)
+  let searchInputEl = $state<HTMLInputElement | null>(null)
+
+  // Focus the field the moment it expands.
+  $effect(() => {
+    if (searchOpen && searchInputEl) searchInputEl.focus()
+  })
+
+  function onLogout() {
+    void handleSignOut()
+    setActiveSource(undefined)
+  }
+</script>
+
+{#if user}
+  <div data-upup-slot="drive-browser-header">
+    <!-- Account controls live in the SourceView header row (portal), next to
+         Back, separated by a hairline — not in their own strip. -->
+    {#if $headerExtraStore}
+      <div style="display: contents" use:portal={$headerExtraStore}>
+        <div
+          class="upup-relative upup-flex upup-h-6 upup-w-6 upup-items-center upup-justify-center upup-overflow-hidden upup-rounded-full"
+        >
+          {#if !!user.picture}
+            <img
+              alt={user.name}
+              src={user.picture}
+              class="upup-bg-center upup-object-cover"
+            />
+          {:else}
+            <Icon name="user" class="upup-text-xl" />
+          {/if}
+        </div>
+        <button
+          class={cn(
+            'upup-hover:upup-underline upup-text-xs upup-font-medium upup-text-[#0284c7]',
+            { 'upup-text-[#38bdf8] dark:upup-text-[#38bdf8]': $dark },
+            $slotClasses.driveLogoutButton,
+          )}
+          onclick={onLogout}
+        >
+          {tr.logOut}
+        </button>
+        <span
+          aria-hidden="true"
+          class={cn('upup-h-4 upup-w-px', $dark ? 'upup-bg-white/15' : 'upup-bg-black/15')}
+        ></span>
+      </div>
+    {/if}
+
+    {#if showSearch || navigated}
+      <div
+        class={cn(
+          'upup-flex upup-items-center upup-gap-2.5 upup-px-3 upup-py-2 upup-text-xs upup-font-medium upup-text-[#333]',
+          { 'upup-text-[#FAFAFA] dark:upup-text-[#FAFAFA]': $dark },
+          $slotClasses.driveHeader,
+        )}
+      >
+        {#if navigated}
+          <button
+            type="button"
+            data-testid="upup-drive-back"
+            data-upup-slot="drive-back"
+            aria-label={tr.overlayBack}
+            class={cn(
+              'upup-fx-hover-lift upup-fx-press upup-flex upup-h-7 upup-w-7 upup-shrink-0 upup-items-center upup-justify-center upup-rounded-lg',
+              $dark
+                ? 'upup-text-[#e2e8f0] hover:upup-bg-white/[0.08]'
+                : 'upup-text-[#334155] hover:upup-bg-black/[0.05]',
+            )}
+            onclick={() => setPath(path.slice(0, -1))}
+          >
+            <Icon name="chevron-left" />
+          </button>
+        {/if}
+        {#if navigated && !searchOpen}
+          <span
+            data-upup-slot="drive-current-folder"
+            title={currentFolder?.name}
+            class="upup-min-w-0 upup-flex-1 upup-truncate upup-font-medium"
+          >
+            {currentFolder?.name}
+          </span>
+        {/if}
+        {#if navigated && showSearch && !searchOpen}
+          <button
+            type="button"
+            data-testid="upup-drive-search-toggle"
+            data-upup-slot="drive-search-toggle"
+            aria-label={tr.search}
+            aria-expanded="false"
+            class={cn(
+              'upup-fx-hover-lift upup-fx-press upup-ml-auto upup-flex upup-h-7 upup-w-7 upup-shrink-0 upup-items-center upup-justify-center upup-rounded-lg',
+              hasFilter
+                ? 'upup-text-[#0ea5e9]'
+                : $dark
+                  ? 'upup-text-[#94a3b8] hover:upup-bg-white/[0.08]'
+                  : 'upup-text-[#64748b] hover:upup-bg-black/[0.05]',
+            )}
+            onclick={() => (searchOpen = true)}
+          >
+            <Icon name="search" />
+          </button>
+        {/if}
+        {#if showSearch && (!navigated || searchOpen)}
+          <div
+            class={cn(
+              'upup-relative upup-min-w-0 upup-flex-1',
+              navigated && 'upup-fx-search-expand',
+              $slotClasses.driveSearchContainer,
+            )}
+          >
+            <input
+              bind:this={searchInputEl}
+              type="search"
+              name="upup-drive-search"
+              data-testid="upup-drive-search-input"
+              data-upup-slot="drive-search-input"
+              aria-label={tr.search}
+              class={cn(
+                'upup-w-full upup-rounded-lg upup-px-3 upup-py-1.5 upup-pl-8 upup-text-xs upup-outline-none upup-ring-1 upup-transition-shadow focus:upup-ring-2 focus:upup-ring-[#38bdf8]',
+                $dark
+                  ? 'upup-bg-white/[0.06] upup-text-[#e2e8f0] upup-ring-white/[0.1] placeholder:upup-text-[#64748b]'
+                  : 'upup-bg-white upup-text-[#0f172a] upup-ring-black/[0.08] placeholder:upup-text-[#94a3b8]',
+                $slotClasses.driveSearchInput,
+              )}
+              placeholder={tr.search}
+              value={searchTerm}
+              oninput={(e) => onSearch((e.target as HTMLInputElement).value)}
+              onkeydown={(e) => {
+                if (e.key === 'Escape') searchOpen = false
+              }}
+              onblur={() => {
+                if (!searchTerm) searchOpen = false
+              }}
+            />
+            <Icon name="search" class="upup-absolute upup-left-2.5 upup-top-1/2 upup--translate-y-1/2 upup-text-[#939393]" />
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
+{/if}

package/dist/components/shared/DriveBrowserHeader.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type DriveFolder, type DriveUser } from '@useupup/core';
+type $$ComponentProps = {
+    path: DriveFolder[];
+    setPath: (newPath: DriveFolder[]) => void;
+    handleSignOut: () => Promise<void>;
+    showSearch: boolean;
+    searchTerm: string;
+    onSearch: (value: string) => void;
+    user?: DriveUser | undefined;
+};
+declare const DriveBrowserHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type DriveBrowserHeader = ReturnType<typeof DriveBrowserHeader>;
+export default DriveBrowserHeader;
+//# sourceMappingURL=DriveBrowserHeader.svelte.d.ts.map

package/dist/components/shared/DriveBrowserHeader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DriveBrowserHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/shared/DriveBrowserHeader.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAA;AAa/D,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,WAAW,EAAE,CAAA;IACnB,OAAO,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,IAAI,CAAA;IACzC,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAClC,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAC7B,CAAC;AAmIJ,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/shared/DriveBrowserIcon.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { type DriveFile } from '@useupup/core'
+import { cn, b64EncodeUnicode } from '@useupup/core/internal'
+  import { useUploaderTheme } from '../../context/uploader-context'
+  import Icon from '../Icon.svelte'
+
+  const { file }: { file: DriveFile } = $props()
+  const { isDark: dark } = useUploaderTheme()
+
+  function handleImgError(e: Event) {
+    const img = e.target as HTMLImageElement
+    const svg = `<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path></svg>`
+    img.src = `data:image/svg+xml;base64,${b64EncodeUnicode(svg)}`
+    img.onerror = null
+  }
+</script>
+
+{#if file.isFolder}
+  <i class="upup-flex-grow upup-text-lg">
+    <!-- Amber filled folder in both themes — folders read unmistakably as folders. -->
+    <Icon name="folder-filled" class="upup-text-[#fbbf24]" />
+  </i>
+{:else if !file.thumbnail}
+  <i class="upup-flex-grow upup-text-lg">
+    <Icon
+      name="file"
+      class={cn({
+        'upup-text-[#6D6D6D] dark:upup-text-[#6D6D6D]': $dark,
+      })}
+    />
+  </i>
+{:else}
+  <img
+    src={file.thumbnail}
+    alt={file.name}
+    class="upup-h-5 upup-w-5 upup-flex-grow upup-rounded-md upup-shadow"
+    onerror={handleImgError}
+  />
+{/if}

package/dist/components/shared/DriveBrowserIcon.svelte.d.ts

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

package/dist/components/shared/DriveBrowserIcon.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DriveBrowserIcon.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/shared/DriveBrowserIcon.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAA;AAK7C,KAAK,gBAAgB,GAAI;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAmC9C,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/shared/DriveBrowserItem.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { type DriveFile } from '@useupup/core'
+import { cn } from '@useupup/core/internal'
+  import { useUploaderTheme } from '../../context/uploader-context'
+  import DriveBrowserIcon from './DriveBrowserIcon.svelte'
+
+  const { file, handleClick, selectedFiles }: {
+    file: DriveFile
+    handleClick: (file: DriveFile) => void | Promise<void>
+    selectedFiles: DriveFile[]
+  } = $props()
+
+  const { isDark: dark, slotOverrides: slotClasses } = useUploaderTheme()
+
+  const isFolder = $derived(file.isFolder)
+  const isFileSelected = $derived(selectedFiles.filter((f) => f.id === file.id).length)
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  data-upup-slot="drive-browser-item"
+  class={cn(
+    'upup-fx-hover-lift upup-group upup-mb-1.5 upup-flex upup-cursor-pointer upup-items-center upup-justify-between upup-gap-2 upup-rounded-[11px] upup-px-3 upup-py-2.5 upup-ring-1',
+    {
+      'upup-font-medium': isFolder,
+    },
+    isFileSelected
+      ? $dark
+        ? 'upup-bg-[#0ea5e9]/10 upup-ring-[#38bdf8]/35'
+        : 'upup-bg-[#0ea5e9]/10 upup-ring-[#0ea5e9]/40'
+      : $dark
+        ? 'upup-bg-white/[0.04] upup-ring-white/[0.06] hover:upup-bg-white/[0.07]'
+        : 'upup-bg-black/[0.03] upup-ring-black/[0.06] hover:upup-bg-black/[0.05]',
+    {
+      [$slotClasses.driveItemContainerDefault!]:
+        !isFileSelected && $slotClasses.driveItemContainerDefault,
+      [$slotClasses.driveItemContainerSelected!]:
+        isFileSelected && $slotClasses.driveItemContainerSelected,
+    },
+  )}
+  onclick={() => handleClick(file)}
+>
+  <div
+    class={cn(
+      'upup-flex upup-items-center upup-gap-2',
+      $slotClasses.driveItemContainerInner,
+    )}
+  >
+    <DriveBrowserIcon {file} />
+    <h1
+      class={cn(
+        'upup-text-wrap upup-break-all upup-text-xs',
+        {
+          'upup-text-[#e0e0e0] dark:upup-text-[#e0e0e0]': $dark,
+        },
+        $slotClasses.driveItemInnerText,
+      )}
+    >
+      {file.name}
+    </h1>
+  </div>
+</div>

package/dist/components/shared/DriveBrowserItem.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type DriveFile } from '@useupup/core';
+type $$ComponentProps = {
+    file: DriveFile;
+    handleClick: (file: DriveFile) => void | Promise<void>;
+    selectedFiles: DriveFile[];
+};
+declare const DriveBrowserItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type DriveBrowserItem = ReturnType<typeof DriveBrowserItem>;
+export default DriveBrowserItem;
+//# sourceMappingURL=DriveBrowserItem.svelte.d.ts.map

package/dist/components/shared/DriveBrowserItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DriveBrowserItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/shared/DriveBrowserItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAA;AAK7C,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,SAAS,CAAA;IACf,WAAW,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACtD,aAAa,EAAE,SAAS,EAAE,CAAA;CAC3B,CAAC;AAuDJ,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}