@useupup/svelte 3.3.0

package/dist/components/AudioUploader.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte'
+  import {
+    useUploaderFiles,
+    useUploaderSource,
+    useUploaderTheme,
+  } from '../context/uploader-context'
+  import { cn } from '@useupup/core/internal'
+  import SourceViewContainer from './shared/SourceViewContainer.svelte'
+  import AudioWaveform from './AudioWaveform.svelte'
+
+  type RecordingState = 'idle' | 'recording' | 'recorded'
+
+  const { setFiles } = useUploaderFiles()
+  const { setActiveSource } = useUploaderSource()
+  const { isDark: dark } = useUploaderTheme()
+
+  let recordingState: RecordingState = $state('idle')
+  let duration = $state(0)
+  let audioUrl: string | null = $state(null)
+  let error: string | null = $state(null)
+
+  let mediaRecorder: MediaRecorder | null = null
+  const chunks: Blob[] = []
+  let timerHandle: ReturnType<typeof setInterval> | null = null
+  let streamRef: MediaStream | null = $state(null)
+
+  onDestroy(() => {
+    if (timerHandle) clearInterval(timerHandle)
+    if (audioUrl) URL.revokeObjectURL(audioUrl)
+    streamRef?.getTracks().forEach((t) => t.stop())
+  })
+
+  async function startRecording() {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+      streamRef = stream
+      chunks.length = 0
+      const recorder = new MediaRecorder(stream)
+      mediaRecorder = recorder
+
+      recorder.ondataavailable = (e) => {
+        if (e.data.size > 0) chunks.push(e.data)
+      }
+
+      recorder.onstop = () => {
+        const blob = new Blob(chunks, { type: recorder.mimeType || 'audio/webm' })
+        audioUrl = URL.createObjectURL(blob)
+        stream.getTracks().forEach((t) => t.stop())
+      }
+
+      recorder.start()
+      recordingState = 'recording'
+      duration = 0
+      timerHandle = setInterval(() => { duration++ }, 1000)
+    } catch {
+      error = 'Microphone access denied. Please allow microphone access and try again.'
+    }
+  }
+
+  function stopRecording() {
+    mediaRecorder?.stop()
+    if (timerHandle) clearInterval(timerHandle)
+    recordingState = 'recorded'
+  }
+
+  function discardRecording() {
+    if (audioUrl) URL.revokeObjectURL(audioUrl)
+    audioUrl = null
+    duration = 0
+    recordingState = 'idle'
+  }
+
+  function addRecording() {
+    if (!audioUrl) return
+    const ext = mediaRecorder?.mimeType?.includes('webm') ? 'webm' : 'ogg'
+    fetch(audioUrl)
+      .then((r) => r.blob())
+      .then((blob) => {
+        const file = new File([blob], `recording-${Date.now()}.${ext}`, { type: blob.type })
+        setFiles([file])
+        setActiveSource(undefined)
+      })
+      .catch(() => {
+        // upup-catch: replaying an in-memory object URL cannot fail in practice; ignore
+      })
+  }
+
+  function formatTime(s: number) {
+    const m = Math.floor(s / 60)
+    const sec = s % 60
+    return `${m}:${sec.toString().padStart(2, '0')}`
+  }
+</script>
+
+{#if error}
+  <!-- Error state -->
+  <SourceViewContainer data-upup-slot="audio-uploader">
+    <div class="upup-flex upup-flex-col upup-items-center upup-gap-3 upup-p-6 upup-text-center">
+      <p
+        class={cn('upup-text-sm upup-text-red-500', {
+          'upup-text-red-400': $dark,
+        })}
+      >
+        {error}
+      </p>
+    </div>
+  </SourceViewContainer>
+{:else}
+  <!-- Normal state -->
+  <SourceViewContainer data-upup-slot="audio-uploader">
+    <div class="upup-flex upup-h-full upup-w-full upup-flex-col upup-items-center upup-justify-center upup-gap-6 upup-p-6">
+      <div
+        class={cn(
+          'upup-flex upup-h-24 upup-w-24 upup-items-center upup-justify-center upup-rounded-full',
+          {
+            'upup-bg-red-500/20': recordingState === 'recording',
+            'upup-bg-[#0ea5e9]/20': recordingState === 'idle' || recordingState === 'recorded',
+          },
+        )}
+      >
+        <div
+          class={cn(
+            'upup-flex upup-h-16 upup-w-16 upup-items-center upup-justify-center upup-rounded-full upup-transition-all',
+            {
+              'upup-animate-pulse upup-bg-red-500': recordingState === 'recording',
+              'upup-bg-[#0ea5e9]': recordingState === 'idle' || recordingState === 'recorded',
+            },
+          )}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="28"
+            height="28"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="white"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+            <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+            <line x1="12" x2="12" y1="19" y2="22" />
+          </svg>
+        </div>
+      </div>
+
+      {#if recordingState === 'recording' && streamRef}
+        <AudioWaveform stream={streamRef!} />
+      {/if}
+
+      <span
+        class={cn(
+          'upup-text-2xl upup-font-mono upup-tabular-nums',
+          {
+            'upup-text-[#1b1b1b]': !$dark,
+            'upup-text-white': $dark,
+          },
+        )}
+      >
+        {formatTime(duration)}
+      </span>
+
+      {#if recordingState === 'recorded' && audioUrl}
+        <!-- svelte-ignore a11y_media_has_caption -->
+        <audio controls src={audioUrl} class="upup-w-full upup-max-w-xs"></audio>
+      {/if}
+
+      <div class="upup-flex upup-gap-3">
+        {#if recordingState === 'idle'}
+          <button
+            type="button"
+            class={cn(
+              'upup-rounded-lg upup-bg-[#0ea5e9] upup-px-6 upup-py-2.5 upup-text-sm upup-font-medium upup-text-white upup-transition-colors hover:upup-bg-[#0284c7]',
+              {
+                'upup-bg-[#38bdf8] hover:upup-bg-[#0ea5e9] dark:upup-bg-[#38bdf8]': $dark,
+              },
+            )}
+            onclick={startRecording}
+          >
+            Start Recording
+          </button>
+        {/if}
+
+        {#if recordingState === 'recording'}
+          <button
+            type="button"
+            class="upup-rounded-lg upup-bg-red-500 upup-px-6 upup-py-2.5 upup-text-sm upup-font-medium upup-text-white upup-transition-colors hover:upup-bg-red-600"
+            onclick={stopRecording}
+          >
+            Stop Recording
+          </button>
+        {/if}
+
+        {#if recordingState === 'recorded'}
+          <button
+            type="button"
+            class="upup-rounded-lg upup-bg-gray-500 upup-px-4 upup-py-2.5 upup-text-sm upup-font-medium upup-text-white upup-transition-colors hover:upup-bg-gray-600"
+            onclick={discardRecording}
+          >
+            Discard
+          </button>
+          <button
+            type="button"
+            class={cn(
+              'upup-rounded-lg upup-bg-[#0ea5e9] upup-px-4 upup-py-2.5 upup-text-sm upup-font-medium upup-text-white upup-transition-colors hover:upup-bg-[#0284c7]',
+              {
+                'upup-bg-[#38bdf8] hover:upup-bg-[#0ea5e9] dark:upup-bg-[#38bdf8]': $dark,
+              },
+            )}
+            onclick={addRecording}
+          >
+            Add Recording
+          </button>
+        {/if}
+      </div>
+    </div>
+  </SourceViewContainer>
+{/if}

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

@@ -0,0 +1,4 @@
+declare const AudioUploader: import("svelte").Component<Record<string, never>, {}, "">;
+type AudioUploader = ReturnType<typeof AudioUploader>;
+export default AudioUploader;
+//# sourceMappingURL=AudioUploader.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AudioUploader.svelte.d.ts","sourceRoot":"","sources":["../../src/components/AudioUploader.svelte.ts"],"names":[],"mappings":"AAsMA,QAAA,MAAM,aAAa,2DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/AudioWaveform.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte'
+
+  const BAR_COUNT = 28
+
+  /**
+   * Live recording waveform (states-tour-3 state D): sky bars whose heights track
+   * the microphone's live frequency data via a Web Audio AnalyserNode.
+   *
+   * This is the ONE place JS-driven visuals are sanctioned — the bars render REAL
+   * audio data, not fx decoration, so (a) they are NOT classed `upup-fx-*` (the
+   * motion gate must not freeze live data) and (b) the rAF read loop is
+   * legitimate. Heights are written straight to the DOM (no per-frame render).
+   * The AnalyserNode + AudioContext are torn down on unmount/stop.
+   */
+  let { stream }: { stream: MediaStream } = $props()
+
+  const barEls: Array<HTMLSpanElement | null> = Array.from(
+    { length: BAR_COUNT },
+    () => null,
+  )
+  let raf = 0
+  let audioCtx: AudioContext | null = null
+  let sourceNode: MediaStreamAudioSourceNode | null = null
+
+  onMount(() => {
+    const AudioCtor =
+      window.AudioContext ??
+      (window as unknown as { webkitAudioContext?: typeof AudioContext })
+        .webkitAudioContext
+    if (!AudioCtor) return
+    audioCtx = new AudioCtor()
+    // Autoplay policy may create the context suspended; without resuming,
+    // getByteFrequencyData returns all-zeros and the bars silently flatline.
+    void audioCtx.resume()
+    sourceNode = audioCtx.createMediaStreamSource(stream)
+    const analyser = audioCtx.createAnalyser()
+    analyser.fftSize = 64
+    sourceNode.connect(analyser)
+    const data = new Uint8Array(analyser.frequencyBinCount)
+    const tick = () => {
+      analyser.getByteFrequencyData(data)
+      for (let i = 0; i < barEls.length; i++) {
+        const v = data[i % data.length] ?? 0
+        const el = barEls[i]
+        if (el) el.style.height = `${6 + (v / 255) * 34}px`
+      }
+      raf = requestAnimationFrame(tick)
+    }
+    raf = requestAnimationFrame(tick)
+  })
+
+  onDestroy(() => {
+    cancelAnimationFrame(raf)
+    sourceNode?.disconnect()
+    void audioCtx?.close()
+  })
+</script>
+
+<div
+  data-upup-slot="audio-waveform"
+  aria-hidden="true"
+  class="upup-flex upup-h-11 upup-items-center upup-justify-center upup-gap-[3px]"
+>
+  {#each Array.from({ length: BAR_COUNT }) as _, i}
+    <span
+      bind:this={barEls[i]}
+      class="upup-w-[3px] upup-flex-none upup-rounded-full upup-bg-[#38bdf8]"
+      style="height: 6px"
+    ></span>
+  {/each}
+</div>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    stream: MediaStream;
+};
+declare const AudioWaveform: import("svelte").Component<$$ComponentProps, {}, "">;
+type AudioWaveform = ReturnType<typeof AudioWaveform>;
+export default AudioWaveform;
+//# sourceMappingURL=AudioWaveform.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AudioWaveform.svelte.d.ts","sourceRoot":"","sources":["../../src/components/AudioWaveform.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAI;IAAE,MAAM,EAAE,WAAW,CAAA;CAAE,CAAC;AAoElD,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/BoxUploader.svelte

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

package/dist/components/BoxUploader.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 BoxUploader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BoxUploader = InstanceType<typeof BoxUploader>;
+export default BoxUploader;
+//# sourceMappingURL=BoxUploader.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxUploader.svelte.d.ts","sourceRoot":"","sources":["../../src/components/BoxUploader.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,WAAW;;kBAA+E,CAAC;AAC/E,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}

package/dist/components/CameraUploader.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte'
+  import { formatUiMessage as t } from '@useupup/core'
+import { cn } from '@useupup/core/internal'
+  import useCameraUploader from '../composables/useCameraUploader'
+  import SourceViewContainer from './shared/SourceViewContainer.svelte'
+
+  const {
+    setVideoEl,
+    capturedUrl,
+    facingMode,
+    newCameraSide,
+    startCamera,
+    capture,
+    clearUrl,
+    handleFetchImage,
+    handleCameraSwitch,
+    translations: tr,
+    props,
+    theme,
+  } = useCameraUploader()
+
+  const { icons: { CameraCaptureIcon, CameraDeleteIcon, CameraRotateIcon } } = props
+  const { isDark: dark, slotOverrides: slotClasses } = theme
+
+  // video element bound via bind:this — set into composable
+  let videoEl: HTMLVideoElement | null = $state(null)
+
+  // Keep composable in sync with the bound element
+  $effect(() => {
+    setVideoEl(videoEl)
+  })
+
+  onMount(() => {
+    // Start camera initially
+    startCamera()
+
+    // Restart camera when facingMode changes, but only when no capture is shown
+    let isFirst = true
+    const unsub = facingMode.subscribe(() => {
+      if (isFirst) { isFirst = false; return }
+      let currentCapturedUrl = ''
+      const u = capturedUrl.subscribe((v) => { currentCapturedUrl = v })
+      u()
+      if (!currentCapturedUrl) startCamera()
+    })
+
+    return () => unsub()
+  })
+</script>
+
+<SourceViewContainer data-upup-slot="camera-uploader">
+  <div
+    data-testid="upup-camera-uploader"
+    class="upup-flex upup-h-full upup-w-full upup-flex-col upup-justify-center upup-overflow-hidden upup-px-3 upup-py-2"
+  >
+    <div class="upup-flex upup-min-h-0 upup-flex-1 upup-items-center upup-justify-center upup-pt-2">
+      {#if $capturedUrl}
+        <div
+          class={cn(
+            'upup-relative upup-aspect-video upup-max-h-full upup-max-w-full upup-bg-black/[0.025] upup-bg-contain upup-bg-center upup-bg-no-repeat upup-shadow-xl',
+            {
+              'upup-bg-white/5 dark:upup-bg-white/5': $dark,
+            },
+            $slotClasses.cameraPreviewContainer,
+          )}
+          style="background-image: url({$capturedUrl})"
+        >
+          <button
+            onclick={clearUrl}
+            class={cn(
+              'upup-absolute upup--right-2 upup--top-2 upup-z-10 upup-rounded-full upup-bg-[#272727] upup-p-1 upup-text-xl upup-text-[#f5f5f5]',
+              $slotClasses.cameraDeleteButton,
+            )}
+            type="button"
+          >
+            <CameraDeleteIcon />
+          </button>
+        </div>
+      {:else}
+        <!-- svelte-ignore a11y_media_has_caption -->
+        <video
+          bind:this={videoEl}
+          autoplay
+          muted
+          playsinline
+          class="upup-aspect-video upup-max-h-full upup-max-w-full upup-rounded-xl upup-object-contain"
+        ></video>
+      {/if}
+    </div>
+
+    <div class="upup-flex upup-shrink-0 upup-gap-4">
+      {#if !$capturedUrl}
+        <button
+          class={cn(
+            'upup-mt-2 upup-flex upup-w-1/3 upup-flex-col upup-items-center upup-justify-center upup-rounded-md upup-bg-[#0ea5e9] upup-p-2 upup-text-white upup-transition-all upup-duration-300',
+            {
+              'upup-bg-[#38bdf8] dark:upup-bg-[#38bdf8]': $dark,
+            },
+            $slotClasses.cameraCaptureButton,
+          )}
+          onclick={capture}
+          type="button"
+        >
+          <span><CameraCaptureIcon /></span>
+          <span>{tr.capture}</span>
+        </button>
+        <button
+          class={cn(
+            'upup-mt-2 upup-flex upup-w-1/3 upup-flex-col upup-items-center upup-rounded-md upup-bg-gray-500 upup-p-2 upup-text-white upup-transition-all upup-duration-300 hover:upup-bg-gray-600',
+            $slotClasses.cameraRotateButton,
+          )}
+          onclick={handleCameraSwitch}
+          type="button"
+        >
+          <span><CameraRotateIcon /></span>
+          <span>
+            {t(tr.switchToCamera, {
+              side: $newCameraSide === 'front' ? tr.front : tr.back,
+            })}
+          </span>
+        </button>
+      {:else}
+        <button
+          class={cn(
+            'upup-mt-2 upup-w-full upup-rounded-md upup-bg-[#0ea5e9] upup-p-2 upup-text-white upup-transition-all upup-duration-300',
+            {
+              'upup-bg-[#38bdf8] dark:upup-bg-[#38bdf8]': $dark,
+            },
+            $slotClasses.cameraAddButton,
+          )}
+          onclick={handleFetchImage}
+          type="button"
+        >
+          {tr.addImage}
+        </button>
+      {/if}
+    </div>
+  </div>
+</SourceViewContainer>

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

@@ -0,0 +1,4 @@
+declare const CameraUploader: import("svelte").Component<Record<string, never>, {}, "">;
+type CameraUploader = ReturnType<typeof CameraUploader>;
+export default CameraUploader;
+//# sourceMappingURL=CameraUploader.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CameraUploader.svelte.d.ts","sourceRoot":"","sources":["../../src/components/CameraUploader.svelte.ts"],"names":[],"mappings":"AA4HA,QAAA,MAAM,cAAc,2DAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/ClientBoxUploader.svelte

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

package/dist/components/ClientBoxUploader.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 ClientBoxUploader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ClientBoxUploader = InstanceType<typeof ClientBoxUploader>;
+export default ClientBoxUploader;
+//# sourceMappingURL=ClientBoxUploader.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClientBoxUploader.svelte.d.ts","sourceRoot":"","sources":["../../src/components/ClientBoxUploader.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,iBAAiB;;kBAA+E,CAAC;AACrF,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAClE,eAAe,iBAAiB,CAAC"}

package/dist/components/ClientDropboxUploader.svelte

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

package/dist/components/ClientDropboxUploader.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 ClientDropboxUploader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ClientDropboxUploader = InstanceType<typeof ClientDropboxUploader>;
+export default ClientDropboxUploader;
+//# sourceMappingURL=ClientDropboxUploader.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClientDropboxUploader.svelte.d.ts","sourceRoot":"","sources":["../../src/components/ClientDropboxUploader.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,qBAAqB;;kBAA+E,CAAC;AACzF,KAAK,qBAAqB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC1E,eAAe,qBAAqB,CAAC"}