@useupup/svelte 3.3.0

package/dist/components/shared/FileSuccessCheck.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { cn } from '@useupup/core/internal'
+
+  /**
+   * Completion checkmark (states-tour.html state E): a sky ring with a tick that
+   * DRAWS in and a wrapper that POPS, shown when a file reaches
+   * UploadStatus.SUCCESSFUL. Hosts (FilePreview tile, FileRow, FileHero) gate it
+   * on status; the fx classes render UNCONDITIONALLY — the shared CSS
+   * `data-motion="off"` kill rule is the one gate, so under motion-off the mark
+   * simply appears drawn (no draw/pop). aria-hidden: completion is already
+   * conveyed textually by the file list's live region + the upload announcement.
+   */
+  let {
+    index = 0,
+    class: className = '',
+    size = 22,
+  }: {
+    /** Position in the sorted list — drives the draw/pop stagger (capped at 8). */
+    index?: number
+    class?: string
+    size?: number
+  } = $props()
+
+  const delay = $derived(`${Math.min(index, 8) * 40}ms`)
+</script>
+
+<span
+  data-upup-slot="file-success"
+  aria-hidden="true"
+  class={cn('upup-animate-fx-pop upup-inline-flex', className)}
+  style={`animation-delay: ${delay}`}
+>
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" aria-hidden="true">
+    <circle cx="12" cy="12" r="11" stroke="#38bdf8" stroke-width="2" />
+    <path
+      d="M7 12.5l3.2 3.2L17 8.8"
+      stroke="#38bdf8"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      pathLength="24"
+      stroke-dasharray="24"
+      class="upup-animate-fx-draw"
+      style={`animation-delay: ${delay}`}
+    />
+  </svg>
+</span>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    /** Position in the sorted list — drives the draw/pop stagger (capped at 8). */
+    index?: number;
+    class?: string;
+    size?: number;
+};
+declare const FileSuccessCheck: import("svelte").Component<$$ComponentProps, {}, "">;
+type FileSuccessCheck = ReturnType<typeof FileSuccessCheck>;
+export default FileSuccessCheck;
+//# sourceMappingURL=FileSuccessCheck.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileSuccessCheck.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/shared/FileSuccessCheck.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAI;IACtB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAC;AA+BJ,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/shared/ProgressBar.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import {
+    useUploaderI18n,
+    useUploaderTheme,
+    useUploaderUploadControls,
+  } from '../../context/uploader-context'
+  import { isUploadActive, cn } from '@useupup/core/internal'
+
+  let {
+    progress,
+    showValue = false,
+    progressBarClassName = '',
+    class: className = '',
+  }: {
+    progress: number
+    showValue?: boolean
+    progressBarClassName?: string
+    class?: string
+  } = $props()
+
+  const { isDark: dark, slotOverrides: slotClasses, slots: themeSlots } = useUploaderTheme()
+  const { translations: tr } = useUploaderI18n()
+  const { upload: { uploadStatus } } = useUploaderUploadControls()
+</script>
+
+{#if !!progress || isUploadActive($uploadStatus)}
+  <div
+    data-testid="upup-progress-bar"
+    data-upup-slot="progress-bar"
+    role="progressbar"
+    aria-valuenow={progress}
+    aria-valuemin={0}
+    aria-valuemax={100}
+    aria-label={tr.uploadProgress}
+    class={cn(
+      'upup-flex upup-items-center upup-gap-2',
+      className,
+      $slotClasses.progressBarContainer,
+      $themeSlots?.progressBar?.root,
+    )}
+  >
+    <div
+      class={cn(
+        'upup-relative upup-h-[6px] upup-flex-1 upup-overflow-hidden upup-rounded-[4px]',
+        $dark ? 'upup-bg-white/[0.12]' : 'upup-bg-[#F5F5F5]',
+        progressBarClassName,
+        $slotClasses.progressBar,
+        $themeSlots?.progressBar?.track,
+      )}
+    >
+      <div
+        style={`width: ${progress}%`}
+        class={cn(
+          'upup-fx-progress-fill upup-fx-essential upup-h-full',
+          $dark ? 'upup-bg-[#38bdf8]' : 'upup-bg-[#0ea5e9]',
+          $slotClasses.progressBarInner,
+          $themeSlots?.progressBar?.fill,
+        )}
+      ></div>
+      {#if isUploadActive($uploadStatus)}
+        <div
+          aria-hidden="true"
+          class="upup-animate-fx-sheen upup-pointer-events-none upup-absolute upup-inset-y-0 upup-left-0 upup-w-2/5"
+          style="background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent)"
+        ></div>
+      {/if}
+    </div>
+    {#if !!showValue}
+      <p
+        class={cn(
+          'upup-text-xs upup-font-semibold',
+          { 'upup-text-white': $dark },
+          $slotClasses.progressBarText,
+          $themeSlots?.progressBar?.text,
+        )}
+      >
+        {progress}%
+      </p>
+    {/if}
+  </div>
+{/if}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/shared/ProgressBar.svelte.ts"],"names":[],"mappings":"AAUC,KAAK,gBAAgB,GAAI;IACtB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAwDJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/shared/SourceViewContainer.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { useUploaderTheme } from '../../context/uploader-context'
+  import { cn } from '@useupup/core/internal'
+  import type { Snippet } from 'svelte'
+
+  const { isLoading = false, children, ...rest }: { isLoading?: boolean; children?: Snippet; [key: string]: unknown } = $props()
+
+  const { isDark: dark, slotOverrides: slotClasses } = useUploaderTheme()
+</script>
+
+<div
+  data-testid="upup-source-view"
+  class={cn(
+    // Transparent by design: the view body sits directly on the panel's
+    // gradient chrome (the old black/[0.075] wash read as a mismatched gray
+    // block over the light gradient).
+    'upup-flex upup-items-center upup-justify-center upup-overflow-hidden',
+    {
+      'upup-text-[#FAFAFA] dark:upup-text-[#FAFAFA]': isLoading && $dark,
+      [$slotClasses.sourceView!]: !isLoading && !!$slotClasses.sourceView,
+      [$slotClasses.driveLoading!]: isLoading && !!$slotClasses.driveLoading,
+    },
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    isLoading?: boolean;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const SourceViewContainer: import("svelte").Component<$$ComponentProps, {}, "">;
+type SourceViewContainer = ReturnType<typeof SourceViewContainer>;
+export default SourceViewContainer;
+//# sourceMappingURL=SourceViewContainer.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SourceViewContainer.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/shared/SourceViewContainer.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAErC,KAAK,gBAAgB,GAAI;IAAE,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,CAAC;AA2B9F,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/shared/UploaderHeader.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import { derived } from 'svelte/store'
+  import { formatUiMessage as t, pluralUiMessage as plural } from '@useupup/core'
+import { isUploadActive, cn } from '@useupup/core/internal'
+  import {
+    useUploaderFiles,
+    useUploaderI18n,
+    useUploaderOptions,
+    useUploaderTheme,
+    useUploaderUploadControls,
+    useUploaderView,
+  } from '../../context/uploader-context'
+  import Icon from '../Icon.svelte'
+
+  let {
+    handleCancel,
+    forcedList = false,
+    hideAddMore = false,
+  }: {
+    handleCancel: () => void
+    /** True when the panel forces the row list (tiles don't fit one row) —
+     *  the grid/list toggle is hidden in that state. */
+    forcedList?: boolean
+    /** True in quiet-completion mode after success — hides the add-more
+     *  control so the completed panel offers no further CTAs. */
+    hideAddMore?: boolean
+  } = $props()
+
+  const { files } = useUploaderFiles()
+  const { viewMode, setViewMode, openSourceOverlay } = useUploaderView()
+  const { translations: tr } = useUploaderI18n()
+  const {
+    mini,
+    limit,
+    isProcessing,
+    icons: { ContainerAddMoreIcon },
+  } = useUploaderOptions()
+  const { isDark: dark, slotOverrides: slotClasses } = useUploaderTheme()
+  const { upload: { uploadStatus } } = useUploaderUploadControls()
+
+  const isUploading = derived(uploadStatus, $s => isUploadActive($s))
+  const isLimitReached = derived(files, $f => limit === $f.size)
+</script>
+
+{#if !mini}
+  <div
+    data-testid="upup-header"
+    data-upup-slot="header"
+    class={cn(
+      'upup-shadow-bottom upup-left-0 upup-right-0 upup-top-0 upup-z-10 upup-grid upup-grid-cols-4 upup-grid-rows-2 upup-items-center upup-justify-between upup-rounded-t-lg upup-bg-black/[0.025] upup-px-3 upup-py-2 md:upup-grid-rows-1',
+      { 'upup-bg-white/5 dark:upup-bg-white/5': $dark },
+      $slotClasses.containerHeader,
+    )}
+  >
+    <button
+      class={cn(
+        'upup-max-md upup-col-start-1 upup-col-end-3 upup-row-start-2 upup-p-1 upup-text-left upup-text-sm upup-text-[#0284c7] md:upup-col-end-2 md:upup-row-start-1',
+        { 'upup-text-[#38bdf8] dark:upup-text-[#38bdf8]': $dark },
+        $slotClasses.containerCancelButton,
+      )}
+      onclick={handleCancel}
+      disabled={$isUploading || isProcessing}
+    >
+      {tr.removeAllFiles}
+    </button>
+    <span
+      class={cn(
+        'upup-col-span-4 upup-text-center upup-text-sm upup-text-[#6D6D6D] md:upup-col-span-2',
+        { 'upup-text-gray-300 dark:upup-text-gray-300': $dark },
+      )}
+    >
+      {t(plural(tr, 'filesSelected', $files.size), { count: $files.size })}
+    </span>
+    <div class="upup-col-start-3 upup-col-end-5 upup-flex upup-items-center upup-justify-end upup-gap-2 md:upup-col-start-4">
+      <!-- Two-segment grid|list control. Hidden once the row list is
+           forced (tiles don't fit one row of the fixed panel). The
+           active segment carries the sky highlight; both segments
+           always show their icon so the choice is self-evident. -->
+      {#if $files.size > 1 && !forcedList}
+        <div
+          role="group"
+          aria-label={tr.switchToGridView}
+          data-upup-slot="view-toggle"
+          class={cn(
+            'upup-flex upup-items-center upup-gap-0.5 upup-rounded-lg upup-p-0.5',
+            $dark ? 'upup-bg-white/[0.06]' : 'upup-bg-black/[0.05]',
+          )}
+        >
+          <button
+            data-testid="upup-view-toggle-grid"
+            aria-label={tr.switchToGridView}
+            aria-pressed={$viewMode === 'grid'}
+            title={tr.switchToGridView}
+            class={cn(
+              'upup-flex upup-h-6 upup-items-center upup-justify-center upup-gap-1 upup-rounded-md upup-px-1.5 upup-transition-colors',
+              $viewMode === 'grid'
+                ? 'upup-bg-[#0ea5e9] upup-text-white'
+                : $dark
+                  ? 'upup-text-gray-300 hover:upup-bg-white/10'
+                  : 'upup-text-gray-500 hover:upup-bg-black/10',
+            )}
+            onclick={() => setViewMode('grid')}
+          >
+            <Icon name="layout-grid" size={15} />
+            <!-- Label only on the ACTIVE segment, and only at md+
+                 where the header has room (mini shows no header at
+                 all). Inactive segment stays icon-only. -->
+            {#if $viewMode === 'grid'}
+              <span class="upup-hidden upup-text-xs upup-font-medium upup-leading-none md:upup-inline">
+                {tr.viewGrid}
+              </span>
+            {/if}
+          </button>
+          <button
+            data-testid="upup-view-toggle-list"
+            aria-label={tr.switchToListView}
+            aria-pressed={$viewMode === 'list'}
+            title={tr.switchToListView}
+            class={cn(
+              'upup-flex upup-h-6 upup-items-center upup-justify-center upup-gap-1 upup-rounded-md upup-px-1.5 upup-transition-colors',
+              $viewMode === 'list'
+                ? 'upup-bg-[#0ea5e9] upup-text-white'
+                : $dark
+                  ? 'upup-text-gray-300 hover:upup-bg-white/10'
+                  : 'upup-text-gray-500 hover:upup-bg-black/10',
+            )}
+            onclick={() => setViewMode('list')}
+          >
+            <Icon name="layout-list" size={15} />
+            {#if $viewMode === 'list'}
+              <span class="upup-hidden upup-text-xs upup-font-medium upup-leading-none md:upup-inline">
+                {tr.viewList}
+              </span>
+            {/if}
+          </button>
+        </div>
+      {/if}
+      {#if limit > 1 && !$isLimitReached && !hideAddMore}
+        <button
+          data-testid="upup-add-more"
+          data-placement="header"
+          data-upup-slot="add-more"
+          class={cn(
+            'upup-fx-hover-lift upup-fx-press upup-inline-flex upup-shrink-0 upup-items-center upup-gap-1 upup-whitespace-nowrap upup-rounded-md upup-border upup-border-dashed upup-border-[#38bdf8]/50 upup-px-2 upup-py-1 upup-text-sm upup-leading-none upup-text-[#0284c7]',
+            { 'upup-text-[#38bdf8] dark:upup-text-[#38bdf8]': $dark },
+            $slotClasses.containerAddMoreButton,
+          )}
+          onclick={openSourceOverlay}
+          disabled={$isUploading || isProcessing}
+        >
+          <ContainerAddMoreIcon /> {tr.addMore}
+        </button>
+      {/if}
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    handleCancel: () => void;
+    /** True when the panel forces the row list (tiles don't fit one row) —
+     *  the grid/list toggle is hidden in that state. */
+    forcedList?: boolean;
+    /** True in quiet-completion mode after success — hides the add-more
+     *  control so the completed panel offers no further CTAs. */
+    hideAddMore?: boolean;
+};
+declare const UploaderHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type UploaderHeader = ReturnType<typeof UploaderHeader>;
+export default UploaderHeader;
+//# sourceMappingURL=UploaderHeader.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploaderHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/shared/UploaderHeader.svelte.ts"],"names":[],"mappings":"AAgBC,KAAK,gBAAgB,GAAI;IACtB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB;wDACoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;iEAC6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAC;AAwGJ,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/composables/use-tiles-per-row.d.ts

@@ -0,0 +1,19 @@
+import { type Readable } from 'svelte/store';
+export interface UseTilesPerRowReturn {
+    /** Reactive tile-per-row count for the currently observed element (0 until
+     *  measured — see view-mode.ts). */
+    tilesPerRow: Readable<number>;
+    /** (Re)observe an element with the ResizeObserver. Call it whenever the
+     *  scroll container the file list binds changes (it mounts after the list
+     *  first renders); passing null disconnects. */
+    observe: (el: HTMLElement | null) => void;
+}
+/**
+ * Measure an element's content-box width with a ResizeObserver and derive how
+ * many 160px grid tiles fit one row (see view-mode.ts). Returns 0 until measured
+ * (SSR / jsdom / pre-paint), which isListViewForced reads as "unknown — don't
+ * force list yet". Isolated in its own module so tests can mock the measurement
+ * seam without a real layout engine. Mirrors React's lib/use-tiles-per-row.
+ */
+export declare function useTilesPerRow(): UseTilesPerRowReturn;
+//# sourceMappingURL=use-tiles-per-row.d.ts.map

package/dist/composables/use-tiles-per-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tiles-per-row.d.ts","sourceRoot":"","sources":["../../src/composables/use-tiles-per-row.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAA;AAGtD,MAAM,WAAW,oBAAoB;IACjC;wCACoC;IACpC,WAAW,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IAC7B;;oDAEgD;IAChD,OAAO,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CAC5C;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,IAAI,oBAAoB,CAqBrD"}

package/dist/composables/use-tiles-per-row.js

@@ -0,0 +1,30 @@
+import { onDestroy } from 'svelte';
+import { writable } from 'svelte/store';
+import { computeTilesPerRow } from '../lib/view-mode';
+/**
+ * Measure an element's content-box width with a ResizeObserver and derive how
+ * many 160px grid tiles fit one row (see view-mode.ts). Returns 0 until measured
+ * (SSR / jsdom / pre-paint), which isListViewForced reads as "unknown — don't
+ * force list yet". Isolated in its own module so tests can mock the measurement
+ * seam without a real layout engine. Mirrors React's lib/use-tiles-per-row.
+ */
+export function useTilesPerRow() {
+    const tilesPerRow = writable(0);
+    let ro = null;
+    function observe(el) {
+        ro?.disconnect();
+        ro = null;
+        if (!el || typeof ResizeObserver === 'undefined')
+            return;
+        ro = new ResizeObserver(entries => {
+            const next = entries[0]?.contentRect.width ?? 0;
+            tilesPerRow.set(computeTilesPerRow(next));
+        });
+        ro.observe(el);
+    }
+    onDestroy(() => {
+        ro?.disconnect();
+        ro = null;
+    });
+    return { tilesPerRow: { subscribe: tilesPerRow.subscribe }, observe };
+}

package/dist/composables/useBox.d.ts

@@ -0,0 +1,28 @@
+import { type Readable } from 'svelte/store';
+import { type DriveFile, type DriveFolder } from '@useupup/core';
+import { type DriveBrowserState } from '@useupup/core/internal';
+export interface UseBoxReturn {
+    user: Readable<DriveBrowserState['user']>;
+    boxFiles: Readable<DriveBrowserState['folder']>;
+    logout: () => void;
+    authenticate: () => void;
+    token: Readable<'active' | undefined>;
+    isAuthenticated: Readable<DriveBrowserState['isAuthenticated']>;
+    isLoading: Readable<DriveBrowserState['isLoading']>;
+    path: Readable<DriveBrowserState['path']>;
+    setPath: (newPath: DriveFolder[]) => void;
+    handleClick: (file: DriveFile) => void;
+    selectedFiles: Readable<DriveBrowserState['selectedFiles']>;
+    showLoader: Readable<DriveBrowserState['showLoader']>;
+    handleSubmit: () => Promise<void>;
+    handleCancelDownload: () => void;
+    onSelectCurrentFolder: () => Promise<void>;
+    isClickLoading: Readable<DriveBrowserState['isClickLoading']>;
+    error: Readable<DriveBrowserState['error']>;
+    hasMore: Readable<DriveBrowserState['hasMore']>;
+    isLoadingMore: Readable<DriveBrowserState['isLoadingMore']>;
+    loadMore: () => Promise<void>;
+}
+export declare function useBox(): UseBoxReturn;
+export default useBox;
+//# sourceMappingURL=useBox.d.ts.map

package/dist/composables/useBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBox.d.ts","sourceRoot":"","sources":["../../src/composables/useBox.ts"],"names":[],"mappings":"AACA,OAAO,EAAW,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,EAAkB,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAA;AAChF,OAAO,EAEH,KAAK,iBAAiB,EACzB,MAAM,wBAAwB,CAAA;AAQ/B,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,QAAQ,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAA;IACzC,QAAQ,EAAE,QAAQ,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC/C,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,KAAK,EAAE,QAAQ,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAA;IACrC,eAAe,EAAE,QAAQ,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,CAAA;IAC/D,SAAS,EAAE,QAAQ,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAA;IACnD,IAAI,EAAE,QAAQ,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAA;IACzC,OAAO,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,IAAI,CAAA;IACzC,WAAW,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACtC,aAAa,EAAE,QAAQ,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAA;IAC3D,UAAU,EAAE,QAAQ,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC,CAAA;IACrD,YAAY,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IACjC,oBAAoB,EAAE,MAAM,IAAI,CAAA;IAChC,qBAAqB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC1C,cAAc,EAAE,QAAQ,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,CAAA;IAC7D,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAA;IAC3C,OAAO,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAA;IAC/C,aAAa,EAAE,QAAQ,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAA;IAC3D,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAChC;AAED,wBAAgB,MAAM,IAAI,YAAY,CA8DrC;AAED,eAAe,MAAM,CAAA"}

package/dist/composables/useBox.js

@@ -0,0 +1,61 @@
+import { onMount, onDestroy } from 'svelte';
+import { derived } from 'svelte/store';
+import { BOX_DESCRIPTOR } from '@useupup/core';
+import { DriveBrowserController, } from '@useupup/core/internal';
+import { useUploaderFiles, useUploaderRuntime, useUploaderSource, } from '../context/uploader-context';
+import { toReadable } from '../lib/to-readable';
+export function useBox() {
+    const { core } = useUploaderRuntime();
+    const { setActiveSource } = useUploaderSource();
+    const { setFiles } = useUploaderFiles();
+    if (!core)
+        throw new Error('useBox must be used inside an initialized <UpupUploader />');
+    const controller = new DriveBrowserController(core, BOX_DESCRIPTOR, {
+        onFilesSelected: files => {
+            setFiles(files);
+        },
+        onClose: () => {
+            setActiveSource(undefined);
+        },
+    });
+    const state = toReadable(controller);
+    onMount(() => {
+        controller.init();
+    });
+    onDestroy(() => {
+        controller.destroy();
+    });
+    return {
+        user: derived(state, $s => $s.user),
+        boxFiles: derived(state, $s => $s.folder),
+        logout: () => {
+            controller.signOut();
+        },
+        authenticate: () => {
+            controller.signIn();
+        },
+        token: derived(state, $s => $s.isAuthenticated ? 'active' : undefined),
+        isAuthenticated: derived(state, $s => $s.isAuthenticated),
+        isLoading: derived(state, $s => $s.isLoading),
+        path: derived(state, $s => $s.path),
+        setPath: (newPath) => {
+            controller.setPath(newPath);
+        },
+        handleClick: (file) => {
+            controller.handleClick(file);
+        },
+        selectedFiles: derived(state, $s => $s.selectedFiles),
+        showLoader: derived(state, $s => $s.showLoader),
+        handleSubmit: () => controller.handleSubmit(),
+        handleCancelDownload: () => {
+            controller.handleCancelDownload();
+        },
+        onSelectCurrentFolder: () => controller.onSelectCurrentFolder(),
+        isClickLoading: derived(state, $s => $s.isClickLoading),
+        error: derived(state, $s => $s.error),
+        hasMore: derived(state, $s => $s.hasMore),
+        isLoadingMore: derived(state, $s => $s.isLoadingMore),
+        loadMore: () => controller.loadMore(),
+    };
+}
+export default useBox;

package/dist/composables/useCameraUploader.d.ts

@@ -0,0 +1,23 @@
+import { type Readable, type Writable } from 'svelte/store';
+import { useUploaderI18n, useUploaderOptions, useUploaderTheme } from '../context/uploader-context';
+export declare enum FacingMode {
+    Environment = "environment",
+    User = "user"
+}
+export interface UseCameraUploaderReturn {
+    setVideoEl: (el: HTMLVideoElement | null) => void;
+    capturedUrl: Writable<string>;
+    facingMode: Writable<FacingMode>;
+    newCameraSide: Readable<'front' | 'back'>;
+    startCamera: () => Promise<void>;
+    stopCamera: () => void;
+    capture: () => void;
+    clearUrl: () => void;
+    handleFetchImage: () => Promise<void>;
+    handleCameraSwitch: () => void;
+    translations: ReturnType<typeof useUploaderI18n>['translations'];
+    props: ReturnType<typeof useUploaderOptions>;
+    theme: ReturnType<typeof useUploaderTheme>;
+}
+export default function useCameraUploader(): UseCameraUploaderReturn;
+//# sourceMappingURL=useCameraUploader.d.ts.map

package/dist/composables/useCameraUploader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCameraUploader.d.ts","sourceRoot":"","sources":["../../src/composables/useCameraUploader.ts"],"names":[],"mappings":"AAAA,OAAO,EAIH,KAAK,QAAQ,EACb,KAAK,QAAQ,EAChB,MAAM,cAAc,CAAA;AAErB,OAAO,EAEH,eAAe,EACf,kBAAkB,EAGlB,gBAAgB,EACnB,MAAM,6BAA6B,CAAA;AAEpC,oBAAY,UAAU;IAClB,WAAW,gBAAgB;IAC3B,IAAI,SAAS;CAChB;AAED,MAAM,WAAW,uBAAuB;IACpC,UAAU,EAAE,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAA;IACjD,WAAW,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IAC7B,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAA;IAChC,aAAa,EAAE,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAC,CAAA;IACzC,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAChC,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,gBAAgB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IACrC,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B,YAAY,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,cAAc,CAAC,CAAA;IAChE,KAAK,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAA;IAC5C,KAAK,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;CAC7C;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,IAAI,uBAAuB,CAwHnE"}