@gradio/imageslider 0.2.13 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @gradio/imageslider
 
+## 0.3.0
+
+### Features
+
+- [#11858](https://github.com/gradio-app/gradio/pull/11858) [`3f8ea13`](https://github.com/gradio-app/gradio/commit/3f8ea13a8ca92abf0ad34392e403a449fda3c6c2) - remove lite.  Thanks @pngwn!
+
+### Fixes
+
+- [#11784](https://github.com/gradio-app/gradio/pull/11784) [`d9dd3f5`](https://github.com/gradio-app/gradio/commit/d9dd3f54b7fb34cf7118e549d39fc63937ca3489) - Add "hidden" option to component's `visible` kwarg to render but visually hide the component.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/statustracker@0.11.1
+- @gradio/atoms@0.18.0
+- @gradio/client@1.19.0
+- @gradio/upload@0.17.0
+
+## 0.2.14
+
+### Dependency updates
+
+- @gradio/client@1.18.0
+- @gradio/icons@0.14.0
+- @gradio/atoms@0.17.0
+- @gradio/statustracker@0.11.0
+- @gradio/upload@0.16.17
+
+## 0.2.13
+
+### Dependency updates
+
+- @gradio/statustracker@0.10.18
+
+## 0.2.13
+
+### Dependency updates
+
+- @gradio/icons@0.13.1
+- @gradio/upload@0.16.16
+
 ## 0.2.13
 
 ### Dependency updates

package/Index.svelte

@@ -17,7 +17,7 @@
 	export let value_is_output = false;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
-	export let visible = true;
+	export let visible: boolean | "hidden" = true;
 	export let value: [FileData | null, FileData | null] = [null, null];
 	let old_value: [FileData | null, FileData | null] = [null, null];
 	export let label: string;

package/dist/Example.svelte.d.ts

@@ -4,12 +4,14 @@ declare const __propDef: {
         value: [string, string];
         samples_dir: string;
         type: "gallery" | "table";
-        selected?: boolean | undefined;
+        selected?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ExampleProps = typeof __propDef.props;
 export type ExampleEvents = typeof __propDef.events;

package/dist/Index.svelte

@@ -33,10 +33,8 @@ export let upload_count = 1;
 export let slider_color = "var(--border-color-primary)";
 export let max_height;
 let uploading = false;
-$:
-  normalised_slider_position = Math.max(0, Math.min(100, slider_position)) / 100;
-$:
-  input_ready = !uploading;
+$: normalised_slider_position = Math.max(0, Math.min(100, slider_position)) / 100;
+$: input_ready = !uploading;
 export let gradio;
 $: {
   if (JSON.stringify(value) !== JSON.stringify(old_value)) {

package/dist/Index.svelte.d.ts

@@ -4,19 +4,19 @@ import { type FileData } from "@gradio/client";
 import type { LoadingStatus } from "@gradio/statustracker";
 declare const __propDef: {
     props: {
-        value_is_output?: boolean | undefined;
-        elem_id?: string | undefined;
-        elem_classes?: string[] | undefined;
-        visible?: boolean | undefined;
-        value?: [FileData | null, FileData | null] | undefined;
+        value_is_output?: boolean;
+        elem_id?: string;
+        elem_classes?: string[];
+        visible?: boolean | "hidden";
+        value?: [FileData | null, FileData | null];
         label: string;
         show_label: boolean;
         show_download_button: boolean;
         root: string;
         height: number | undefined;
         width: number | undefined;
-        container?: boolean | undefined;
-        scale?: (number | null) | undefined;
+        container?: boolean;
+        scale?: number | null;
         min_width?: number | undefined;
         loading_status: LoadingStatus;
         interactive: boolean;
@@ -24,8 +24,8 @@ declare const __propDef: {
         show_fullscreen_button: boolean;
         input_ready: boolean;
         slider_position: number;
-        upload_count?: number | undefined;
-        slider_color?: string | undefined;
+        upload_count?: number;
+        slider_color?: string;
         max_height: number;
         gradio: Gradio<{
             input: never;
@@ -46,6 +46,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type IndexProps = typeof __propDef.props;
 export type IndexEvents = typeof __propDef.events;
@@ -60,12 +62,12 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get elem_classes(): string[] | undefined;
     /**accessor*/
     set elem_classes(_: string[] | undefined);
-    get visible(): boolean | undefined;
+    get visible(): boolean | "hidden" | undefined;
     /**accessor*/
-    set visible(_: boolean | undefined);
-    get value(): [FileData | null, FileData | null] | undefined;
+    set visible(_: boolean | "hidden" | undefined);
+    get value(): [any, any] | undefined;
     /**accessor*/
-    set value(_: [FileData | null, FileData | null] | undefined);
+    set value(_: [any, any] | undefined);
     get label(): string;
     /**accessor*/
     set label(_: string);

package/dist/shared/ClearImage.svelte.d.ts

@@ -1,14 +1,14 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
+    props: Record<string, never>;
     events: {
         remove_image: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ClearImageProps = typeof __propDef.props;
 export type ClearImageEvents = typeof __propDef.events;

package/dist/shared/Image.svelte

@@ -1,13 +1,12 @@
 <script>import Slider from "./Slider.svelte";
 import { createEventDispatcher, tick } from "svelte";
-import { BlockLabel, Empty, IconButton } from "@gradio/atoms";
+import { BlockLabel, Empty, IconButton, DownloadLink } from "@gradio/atoms";
 import { Download } from "@gradio/icons";
 import { Image } from "@gradio/icons";
 import {} from "@gradio/utils";
 import ClearImage from "./ClearImage.svelte";
 import ImageEl from "./ImageEl.svelte";
 import { Upload } from "@gradio/upload";
-import { DownloadLink } from "@gradio/wasm/svelte";
 import {} from "@gradio/client";
 export let value;
 export let label = void 0;
@@ -38,15 +37,13 @@ async function handle_upload({ detail }, n) {
   dispatch("upload", new_value);
 }
 let old_value = "";
-$:
-  if (JSON.stringify(value) !== old_value) {
-    old_value = JSON.stringify(value);
-    value_ = value;
-  }
+$: if (JSON.stringify(value) !== old_value) {
+  old_value = JSON.stringify(value);
+  value_ = value;
+}
 const dispatch = createEventDispatcher();
 export let dragging = false;
-$:
-  dispatch("drag", dragging);
+$: dispatch("drag", dragging);
 </script>
 
 <BlockLabel {show_label} Icon={Image} label={label || i18n("image.image")} />

package/dist/shared/Image.svelte.d.ts

@@ -8,15 +8,15 @@ declare const __propDef: {
         show_label: boolean;
         root: string;
         position: number;
-        upload_count?: number | undefined;
-        show_download_button?: boolean | undefined;
+        upload_count?: number;
+        show_download_button?: boolean;
         slider_color: string;
         upload: Client["upload"];
         stream_handler: Client["stream"];
-        max_file_size?: (number | null) | undefined;
+        max_file_size?: number | null;
         i18n: I18nFormatter;
         max_height: number;
-        dragging?: boolean | undefined;
+        dragging?: boolean;
     };
     events: {
         change: CustomEvent<string | null>;
@@ -24,7 +24,7 @@ declare const __propDef: {
         edit: CustomEvent<undefined>;
         clear: CustomEvent<undefined>;
         drag: CustomEvent<boolean>;
-        upload: CustomEvent<[FileData | null, FileData | null]>;
+        upload: CustomEvent<[any, any]>;
         select: CustomEvent<SelectData>;
     } & {
         [evt: string]: CustomEvent<any>;
@@ -32,6 +32,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ImageProps = typeof __propDef.props;
 export type ImageEvents = typeof __propDef.events;

package/dist/shared/ImageEl.svelte

@@ -1,32 +1,17 @@
 <script>import { createEventDispatcher, onMount, tick } from "svelte";
-import { resolve_wasm_src } from "@gradio/wasm/svelte";
 export let src = void 0;
 export let fullscreen = false;
-let resolved_src;
 export let fixed = false;
 export let transform = "translate(0px, 0px) scale(1)";
 export let img_el = null;
 export let hidden = false;
 export let variant = "upload";
 export let max_height = 500;
-let latest_src;
-$: {
-  resolved_src = src;
-  latest_src = src;
-  const resolving_src = src;
-  resolve_wasm_src(resolving_src).then((s) => {
-    if (latest_src === resolving_src) {
-      resolved_src = s;
-    }
-  });
-}
 const dispatch = createEventDispatcher();
 function get_image_size(img) {
-  if (!img)
-    return { top: 0, left: 0, width: 0, height: 0 };
+  if (!img) return { top: 0, left: 0, width: 0, height: 0 };
   const container = img.parentElement?.getBoundingClientRect();
-  if (!container)
-    return { top: 0, left: 0, width: 0, height: 0 };
+  if (!container) return { top: 0, left: 0, width: 0, height: 0 };
   const naturalAspect = img.naturalWidth / img.naturalHeight;
   const containerAspect = container.width / container.height;
   let displayedWidth, displayedHeight;
@@ -62,7 +47,7 @@ onMount(() => {
 
 <!-- svelte-ignore a11y-missing-attribute -->
 <img
-	src={resolved_src}
+	{src}
 	{...$$restProps}
 	class:fixed
 	style:transform

package/dist/shared/ImageEl.svelte.d.ts

@@ -1,242 +1,15 @@
 import { SvelteComponent } from "svelte";
+import type { HTMLImgAttributes } from "svelte/elements";
 declare const __propDef: {
-    props: {
-        [x: `data-${string}`]: any;
-        alt?: string | undefined | null;
-        crossorigin?: "anonymous" | "use-credentials" | "" | undefined | null;
-        decoding?: "async" | "auto" | "sync" | undefined | null;
-        fetchpriority?: "auto" | "high" | "low" | undefined | null;
-        height?: number | string | undefined | null;
-        ismap?: boolean | undefined | null;
-        loading?: "eager" | "lazy" | undefined | null;
-        referrerpolicy?: ReferrerPolicy | undefined | null;
-        sizes?: string | undefined | null;
-        src?: string | undefined | null;
-        srcset?: string | undefined | null;
-        usemap?: string | undefined | null;
-        width?: number | string | undefined | null;
-        readonly 'bind:naturalWidth'?: number | undefined | null;
-        readonly 'bind:naturalHeight'?: number | undefined | null;
-        accesskey?: string | undefined | null;
-        autofocus?: boolean | undefined | null;
-        class?: string | undefined | null;
-        contenteditable?: import("svelte/elements").Booleanish | "inherit" | "plaintext-only" | undefined | null;
-        contextmenu?: string | undefined | null;
-        dir?: string | undefined | null;
-        draggable?: import("svelte/elements").Booleanish | undefined | null;
-        enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | null;
-        hidden?: boolean | undefined;
-        id?: string | undefined | null;
-        lang?: string | undefined | null;
-        part?: string | undefined | null;
-        placeholder?: string | undefined | null;
-        slot?: string | undefined | null;
-        spellcheck?: import("svelte/elements").Booleanish | undefined | null;
-        style?: string | undefined | null;
-        tabindex?: number | undefined | null;
-        title?: string | undefined | null;
-        translate?: "yes" | "no" | "" | undefined | null;
-        inert?: boolean | undefined | null;
-        popover?: "auto" | "manual" | "" | undefined | null;
-        radiogroup?: string | undefined | null;
-        role?: import("svelte/elements").AriaRole | undefined | null;
-        about?: string | undefined | null;
-        datatype?: string | undefined | null;
-        inlist?: any;
-        prefix?: string | undefined | null;
-        property?: string | undefined | null;
-        resource?: string | undefined | null;
-        typeof?: string | undefined | null;
-        vocab?: string | undefined | null;
-        autocapitalize?: string | undefined | null;
-        autocorrect?: string | undefined | null;
-        autosave?: string | undefined | null;
-        color?: string | undefined | null;
-        itemprop?: string | undefined | null;
-        itemscope?: boolean | undefined | null;
-        itemtype?: string | undefined | null;
-        itemid?: string | undefined | null;
-        itemref?: string | undefined | null;
-        results?: number | undefined | null;
-        security?: string | undefined | null;
-        unselectable?: "on" | "off" | undefined | null;
-        inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | null;
-        is?: string | undefined | null;
-        'bind:innerHTML'?: string | undefined | null;
-        'bind:textContent'?: string | undefined | null;
-        'bind:innerText'?: string | undefined | null;
-        readonly 'bind:contentRect'?: DOMRectReadOnly | undefined | null;
-        readonly 'bind:contentBoxSize'?: ResizeObserverSize[] | undefined | null;
-        readonly 'bind:borderBoxSize'?: ResizeObserverSize[] | undefined | null;
-        readonly 'bind:devicePixelContentBoxSize'?: ResizeObserverSize[] | undefined | null;
-        'data-sveltekit-keepfocus'?: true | "" | "off" | undefined | null;
-        'data-sveltekit-noscroll'?: true | "" | "off" | undefined | null;
-        'data-sveltekit-preload-code'?: true | "" | "eager" | "viewport" | "hover" | "tap" | "off" | undefined | null;
-        'data-sveltekit-preload-data'?: true | "" | "hover" | "tap" | "off" | undefined | null;
-        'data-sveltekit-reload'?: true | "" | "off" | undefined | null;
-        'data-sveltekit-replacestate'?: true | "" | "off" | undefined | null;
-        'aria-activedescendant'?: string | undefined | null;
-        'aria-atomic'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | null;
-        'aria-busy'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-checked'?: boolean | "false" | "mixed" | "true" | undefined | null;
-        'aria-colcount'?: number | undefined | null;
-        'aria-colindex'?: number | undefined | null;
-        'aria-colspan'?: number | undefined | null;
-        'aria-controls'?: string | undefined | null;
-        'aria-current'?: import("svelte/elements").Booleanish | "page" | "step" | "location" | "date" | "time" | undefined | null;
-        'aria-describedby'?: string | undefined | null;
-        'aria-details'?: string | undefined | null;
-        'aria-disabled'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | null;
-        'aria-errormessage'?: string | undefined | null;
-        'aria-expanded'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-flowto'?: string | undefined | null;
-        'aria-grabbed'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-haspopup'?: import("svelte/elements").Booleanish | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | null;
-        'aria-hidden'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-invalid'?: import("svelte/elements").Booleanish | "grammar" | "spelling" | undefined | null;
-        'aria-keyshortcuts'?: string | undefined | null;
-        'aria-label'?: string | undefined | null;
-        'aria-labelledby'?: string | undefined | null;
-        'aria-level'?: number | undefined | null;
-        'aria-live'?: "off" | "assertive" | "polite" | undefined | null;
-        'aria-modal'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-multiline'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-multiselectable'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-orientation'?: "horizontal" | "vertical" | undefined | null;
-        'aria-owns'?: string | undefined | null;
-        'aria-placeholder'?: string | undefined | null;
-        'aria-posinset'?: number | undefined | null;
-        'aria-pressed'?: boolean | "false" | "mixed" | "true" | undefined | null;
-        'aria-readonly'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | null;
-        'aria-required'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-roledescription'?: string | undefined | null;
-        'aria-rowcount'?: number | undefined | null;
-        'aria-rowindex'?: number | undefined | null;
-        'aria-rowspan'?: number | undefined | null;
-        'aria-selected'?: import("svelte/elements").Booleanish | undefined | null;
-        'aria-setsize'?: number | undefined | null;
-        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined | null;
-        'aria-valuemax'?: number | undefined | null;
-        'aria-valuemin'?: number | undefined | null;
-        'aria-valuenow'?: number | undefined | null;
-        'aria-valuetext'?: string | undefined | null;
-        'on:copy'?: import("svelte/elements").ClipboardEventHandler<HTMLImageElement> | null | undefined;
-        'on:cut'?: import("svelte/elements").ClipboardEventHandler<HTMLImageElement> | null | undefined;
-        'on:paste'?: import("svelte/elements").ClipboardEventHandler<HTMLImageElement> | null | undefined;
-        'on:compositionend'?: import("svelte/elements").CompositionEventHandler<HTMLImageElement> | null | undefined;
-        'on:compositionstart'?: import("svelte/elements").CompositionEventHandler<HTMLImageElement> | null | undefined;
-        'on:compositionupdate'?: import("svelte/elements").CompositionEventHandler<HTMLImageElement> | null | undefined;
-        'on:focus'?: import("svelte/elements").FocusEventHandler<HTMLImageElement> | null | undefined;
-        'on:focusin'?: import("svelte/elements").FocusEventHandler<HTMLImageElement> | null | undefined;
-        'on:focusout'?: import("svelte/elements").FocusEventHandler<HTMLImageElement> | null | undefined;
-        'on:blur'?: import("svelte/elements").FocusEventHandler<HTMLImageElement> | null | undefined;
-        'on:change'?: import("svelte/elements").FormEventHandler<HTMLImageElement> | null | undefined;
-        'on:beforeinput'?: import("svelte/elements").EventHandler<InputEvent, HTMLImageElement> | null | undefined;
-        'on:input'?: import("svelte/elements").FormEventHandler<HTMLImageElement> | null | undefined;
-        'on:reset'?: import("svelte/elements").FormEventHandler<HTMLImageElement> | null | undefined;
-        'on:submit'?: import("svelte/elements").EventHandler<SubmitEvent, HTMLImageElement> | null | undefined;
-        'on:invalid'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:formdata'?: import("svelte/elements").EventHandler<FormDataEvent, HTMLImageElement> | null | undefined;
-        'on:load'?: import("svelte/elements").EventHandler | undefined | null;
-        'on:error'?: import("svelte/elements").EventHandler | undefined | null;
-        'on:beforetoggle'?: import("svelte/elements").ToggleEventHandler<HTMLImageElement> | null | undefined;
-        'on:toggle'?: import("svelte/elements").ToggleEventHandler<HTMLImageElement> | null | undefined;
-        'on:keydown'?: import("svelte/elements").KeyboardEventHandler<HTMLImageElement> | null | undefined;
-        'on:keypress'?: import("svelte/elements").KeyboardEventHandler<HTMLImageElement> | null | undefined;
-        'on:keyup'?: import("svelte/elements").KeyboardEventHandler<HTMLImageElement> | null | undefined;
-        'on:abort'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:canplay'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:canplaythrough'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:cuechange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:durationchange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:emptied'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:encrypted'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:ended'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:loadeddata'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:loadedmetadata'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:loadstart'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:pause'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:play'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:playing'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:progress'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:ratechange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:seeked'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:seeking'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:stalled'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:suspend'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:timeupdate'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:volumechange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:waiting'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:auxclick'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:click'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:contextmenu'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:dblclick'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:drag'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
-        'on:dragend'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
-        'on:dragenter'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
-        'on:dragexit'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
-        'on:dragleave'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
-        'on:dragover'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
-        'on:dragstart'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
-        'on:drop'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
-        'on:mousedown'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:mouseenter'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:mouseleave'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:mousemove'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:mouseout'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:mouseover'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:mouseup'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
-        'on:select'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:selectionchange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:selectstart'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:touchcancel'?: import("svelte/elements").TouchEventHandler<HTMLImageElement> | null | undefined;
-        'on:touchend'?: import("svelte/elements").TouchEventHandler<HTMLImageElement> | null | undefined;
-        'on:touchmove'?: import("svelte/elements").TouchEventHandler<HTMLImageElement> | null | undefined;
-        'on:touchstart'?: import("svelte/elements").TouchEventHandler<HTMLImageElement> | null | undefined;
-        'on:gotpointercapture'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:pointercancel'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:pointerdown'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:pointerenter'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:pointerleave'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:pointermove'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:pointerout'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:pointerover'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:pointerup'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:lostpointercapture'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
-        'on:gamepadconnected'?: import("svelte/elements").GamepadEventHandler<HTMLImageElement> | null | undefined;
-        'on:gamepaddisconnected'?: import("svelte/elements").GamepadEventHandler<HTMLImageElement> | null | undefined;
-        'on:scroll'?: import("svelte/elements").UIEventHandler<HTMLImageElement> | null | undefined;
-        'on:scrollend'?: import("svelte/elements").UIEventHandler<HTMLImageElement> | null | undefined;
-        'on:resize'?: import("svelte/elements").UIEventHandler<HTMLImageElement> | null | undefined;
-        'on:wheel'?: import("svelte/elements").WheelEventHandler<HTMLImageElement> | null | undefined;
-        'on:animationstart'?: import("svelte/elements").AnimationEventHandler<HTMLImageElement> | null | undefined;
-        'on:animationend'?: import("svelte/elements").AnimationEventHandler<HTMLImageElement> | null | undefined;
-        'on:animationiteration'?: import("svelte/elements").AnimationEventHandler<HTMLImageElement> | null | undefined;
-        'on:transitionstart'?: import("svelte/elements").TransitionEventHandler<HTMLImageElement> | null | undefined;
-        'on:transitionrun'?: import("svelte/elements").TransitionEventHandler<HTMLImageElement> | null | undefined;
-        'on:transitionend'?: import("svelte/elements").TransitionEventHandler<HTMLImageElement> | null | undefined;
-        'on:transitioncancel'?: import("svelte/elements").TransitionEventHandler<HTMLImageElement> | null | undefined;
-        'on:outrostart'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLImageElement> | null | undefined;
-        'on:outroend'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLImageElement> | null | undefined;
-        'on:introstart'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLImageElement> | null | undefined;
-        'on:introend'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLImageElement> | null | undefined;
-        'on:message'?: import("svelte/elements").MessageEventHandler<HTMLImageElement> | null | undefined;
-        'on:messageerror'?: import("svelte/elements").MessageEventHandler<HTMLImageElement> | null | undefined;
-        'on:visibilitychange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:cancel'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:close'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:fullscreenchange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        'on:fullscreenerror'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
-        "data-testid"?: string | undefined;
-        fixed?: boolean | undefined;
-        transform?: string | undefined;
-        img_el?: HTMLImageElement | undefined;
-        variant?: ("preview" | "upload") | undefined;
-        max_height?: number | undefined;
-        fullscreen?: boolean | undefined;
+    props: HTMLImgAttributes & {
+        "data-testid"?: string;
+        fixed?: boolean;
+        transform?: string;
+        img_el?: HTMLImageElement;
+        hidden?: boolean;
+        variant?: "preview" | "upload";
+        max_height?: number;
+        fullscreen?: boolean;
     };
     events: {
         load: CustomEvent<{
@@ -249,6 +22,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ImageElProps = typeof __propDef.props;
 export type ImageElEvents = typeof __propDef.events;

package/dist/shared/Slider.svelte

@@ -34,28 +34,23 @@ function update_position(x) {
   position = round((x - image_size.left) / image_size.width, 5);
 }
 function drag_start(event) {
-  if (disabled)
-    return;
+  if (disabled) return;
   active = true;
   update_position(event.x);
 }
 function drag_move(event) {
-  if (disabled)
-    return;
+  if (disabled) return;
   update_position(event.x);
 }
 function drag_end() {
-  if (disabled)
-    return;
+  if (disabled) return;
   active = false;
 }
 function update_position_from_pc(pc) {
   px = clamp(image_size.width * pc + image_size.left, 0, container_width);
 }
-$:
-  set_position(image_size.width);
-$:
-  update_position_from_pc(position);
+$: set_position(image_size.width);
+$: update_position_from_pc(position);
 onMount(() => {
   set_position(image_size.width);
   const drag_handler = drag().on("start", drag_start).on("drag", drag_move).on("end", drag_end);

package/dist/shared/Slider.svelte.d.ts

@@ -1,15 +1,15 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        position?: number | undefined;
-        disabled?: boolean | undefined;
-        slider_color?: string | undefined;
+        position?: number;
+        disabled?: boolean;
+        slider_color?: string;
         image_size?: {
             top: number;
             left: number;
             width: number;
             height: number;
-        } | undefined;
+        };
         el?: HTMLDivElement | undefined;
         parent_el?: HTMLDivElement | undefined;
     };
@@ -19,6 +19,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SliderProps = typeof __propDef.props;
 export type SliderEvents = typeof __propDef.events;

package/dist/shared/SliderPreview.svelte

@@ -5,11 +5,11 @@ import {
   Empty,
   IconButton,
   IconButtonWrapper,
-  FullscreenButton
+  FullscreenButton,
+  DownloadLink
 } from "@gradio/atoms";
 import { Image, Download, Undo, Clear } from "@gradio/icons";
 import {} from "@gradio/client";
-import { DownloadLink } from "@gradio/wasm/svelte";
 import { ZoomableImage } from "./zoom";
 import { onMount } from "svelte";
 import { tweened } from "svelte/motion";
@@ -39,17 +39,15 @@ let transform = tweened(
   }
 );
 let parent_el;
-$:
-  coords_at_viewport = get_coords_at_viewport(
-    position,
-    viewport_width,
-    image_size.width,
-    image_size.left,
-    $transform.x,
-    $transform.z
-  );
-$:
-  style = layer_images ? `clip-path: inset(0 0 0 ${coords_at_viewport * 100}%)` : "";
+$: coords_at_viewport = get_coords_at_viewport(
+  position,
+  viewport_width,
+  image_size.width,
+  image_size.left,
+  $transform.x,
+  $transform.z
+);
+$: style = layer_images ? `clip-path: inset(0 0 0 ${coords_at_viewport * 100}%)` : "";
 function get_coords_at_viewport(viewport_percent_x, viewportWidth, image_width, img_offset_x, tx, scale) {
   const px_relative_to_image = viewport_percent_x * image_width;
   const pixel_position = px_relative_to_image + img_offset_x;
@@ -62,8 +60,7 @@ let viewport_width = 0;
 let zoomable_image = null;
 let observer = null;
 function init_image(img2, slider_wrap2) {
-  if (!img2 || !slider_wrap2)
-    return;
+  if (!img2 || !slider_wrap2) return;
   zoomable_image?.destroy();
   observer?.disconnect();
   img_width = img2?.getBoundingClientRect().width || 0;
@@ -85,8 +82,7 @@ function init_image(img2, slider_wrap2) {
   observer.observe(slider_wrap2);
   observer.observe(img2);
 }
-$:
-  init_image(img, slider_wrap);
+$: init_image(img, slider_wrap);
 onMount(() => {
   return () => {
     zoomable_image?.destroy();

package/dist/shared/SliderPreview.svelte.d.ts

@@ -3,20 +3,20 @@ import { type FileData } from "@gradio/client";
 import type { I18nFormatter } from "@gradio/utils";
 declare const __propDef: {
     props: {
-        value?: [null | FileData, null | FileData] | undefined;
+        value?: [null | FileData, null | FileData];
         label?: string | undefined;
-        show_download_button?: boolean | undefined;
+        show_download_button?: boolean;
         show_label: boolean;
         i18n: I18nFormatter;
         position: number;
-        layer_images?: boolean | undefined;
-        show_single?: boolean | undefined;
+        layer_images?: boolean;
+        show_single?: boolean;
         slider_color: string;
-        show_fullscreen_button?: boolean | undefined;
-        fullscreen?: boolean | undefined;
-        el_width?: number | undefined;
+        show_fullscreen_button?: boolean;
+        fullscreen?: boolean;
+        el_width?: number;
         max_height: number;
-        interactive?: boolean | undefined;
+        interactive?: boolean;
     };
     events: {
         fullscreen: CustomEvent<boolean>;
@@ -25,6 +25,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SliderPreviewProps = typeof __propDef.props;
 export type SliderPreviewEvents = typeof __propDef.events;

package/dist/shared/SliderUpload.svelte.d.ts

@@ -4,23 +4,23 @@ import { type Client } from "@gradio/client";
 import type { FileData } from "@gradio/client";
 declare const __propDef: {
     props: {
-        value?: [FileData | null, FileData | null] | undefined;
+        value?: [FileData | null, FileData | null];
         upload: Client["upload"];
         stream_handler: Client["stream"];
         label: string;
         show_label: boolean;
         i18n: I18nFormatter;
         root: string;
-        upload_count?: number | undefined;
+        upload_count?: number;
         dragging: boolean;
         max_height: number;
-        max_file_size?: (number | null) | undefined;
+        max_file_size?: number | null;
     };
     events: {
         edit: CustomEvent<undefined>;
         clear: CustomEvent<undefined>;
         stream: CustomEvent<string | null>;
-        upload: CustomEvent<[FileData | null, FileData | null]>;
+        upload: CustomEvent<[any, any]>;
         select: CustomEvent<import("@gradio/utils").SelectData>;
         share: CustomEvent<any>;
     } & {
@@ -29,20 +29,22 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SliderUploadProps = typeof __propDef.props;
 export type SliderUploadEvents = typeof __propDef.events;
 export type SliderUploadSlots = typeof __propDef.slots;
 export default class SliderUpload extends SvelteComponent<SliderUploadProps, SliderUploadEvents, SliderUploadSlots> {
-    get value(): [FileData | null, FileData | null] | undefined;
+    get value(): [any, any] | undefined;
     /**accessor*/
-    set value(_: [FileData | null, FileData | null] | undefined);
-    get upload(): (file_data: FileData[], root_url: string, upload_id?: string, max_file_size?: number) => Promise<(FileData | null)[] | null>;
+    set value(_: [any, any] | undefined);
+    get upload(): Client;
     /**accessor*/
-    set upload(_: (file_data: FileData[], root_url: string, upload_id?: string, max_file_size?: number) => Promise<(FileData | null)[] | null>);
-    get stream_handler(): (url: URL) => EventSource;
+    set upload(_: Client);
+    get stream_handler(): Client;
     /**accessor*/
-    set stream_handler(_: (url: URL) => EventSource);
+    set stream_handler(_: Client);
     get label(): string;
     /**accessor*/
     set label(_: string);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageslider",
-  "version": "0.2.13",
+  "version": "0.3.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,13 +11,12 @@
     "@types/d3-selection": "^3.0.11",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
-    "@gradio/atoms": "^0.16.5",
-    "@gradio/icons": "^0.13.0",
-    "@gradio/statustracker": "^0.10.17",
-    "@gradio/client": "^1.17.1",
-    "@gradio/upload": "^0.16.15",
-    "@gradio/utils": "^0.10.2",
-    "@gradio/wasm": "^0.18.1"
+    "@gradio/atoms": "^0.18.0",
+    "@gradio/client": "^1.19.0",
+    "@gradio/statustracker": "^0.11.1",
+    "@gradio/icons": "^0.14.0",
+    "@gradio/upload": "^0.17.0",
+    "@gradio/utils": "^0.10.2"
   },
   "exports": {
     ".": {

package/shared/Image.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Slider from "./Slider.svelte";
 	import { createEventDispatcher, tick } from "svelte";
-	import { BlockLabel, Empty, IconButton } from "@gradio/atoms";
+	import { BlockLabel, Empty, IconButton, DownloadLink } from "@gradio/atoms";
 	import { Download } from "@gradio/icons";
 	import { Image } from "@gradio/icons";
 	import { type SelectData, type I18nFormatter } from "@gradio/utils";
@@ -9,7 +9,6 @@
 	import ImageEl from "./ImageEl.svelte";
 
 	import { Upload } from "@gradio/upload";
-	import { DownloadLink } from "@gradio/wasm/svelte";
 
 	import { type FileData, type Client } from "@gradio/client";
 

package/shared/ImageEl.svelte

@@ -13,39 +13,15 @@
 	}
 	type $$Props = Props;
 
-	import { resolve_wasm_src } from "@gradio/wasm/svelte";
-
 	export let src: HTMLImgAttributes["src"] = undefined;
 	export let fullscreen = false;
 
-	let resolved_src: typeof src;
-
 	export let fixed = false;
 	export let transform = "translate(0px, 0px) scale(1)";
 	export let img_el: HTMLImageElement | null = null;
 	export let hidden = false;
 	export let variant = "upload";
 	export let max_height = 500;
-	// The `src` prop can be updated before the Promise from `resolve_wasm_src` is resolved.
-	// In such a case, the resolved value for the old `src` has to be discarded,
-	// This variable `latest_src` is used to pick up only the value resolved for the latest `src` prop.
-	let latest_src: typeof src;
-	$: {
-		// In normal (non-Wasm) Gradio, the `<img>` element should be rendered with the passed `src` props immediately
-		// without waiting for `resolve_wasm_src()` to resolve.
-		// If it waits, a blank image is displayed until the async task finishes
-		// and it leads to undesirable flickering.
-		// So set `src` to `resolved_src` here.
-		resolved_src = src;
-
-		latest_src = src;
-		const resolving_src = src;
-		resolve_wasm_src(resolving_src).then((s) => {
-			if (latest_src === resolving_src) {
-				resolved_src = s;
-			}
-		});
-	}
 
 	const dispatch = createEventDispatcher<{
 		load: {
@@ -108,7 +84,7 @@
 
 <!-- svelte-ignore a11y-missing-attribute -->
 <img
-	src={resolved_src}
+	{src}
 	{...$$restProps}
 	class:fixed
 	style:transform

package/shared/SliderPreview.svelte

@@ -6,12 +6,12 @@
 		Empty,
 		IconButton,
 		IconButtonWrapper,
-		FullscreenButton
+		FullscreenButton,
+		DownloadLink
 	} from "@gradio/atoms";
 	import { Image, Download, Undo, Clear } from "@gradio/icons";
 	import { type FileData } from "@gradio/client";
 	import type { I18nFormatter } from "@gradio/utils";
-	import { DownloadLink } from "@gradio/wasm/svelte";
 	import { ZoomableImage } from "./zoom";
 	import { onMount } from "svelte";
 	import { tweened, type Tweened } from "svelte/motion";