@gradio/gallery 0.12.0 → 0.12.2

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @gradio/gallery
 
+## 0.12.2
+
+### Fixes
+
+- [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.6.1
+- @gradio/statustracker@0.7.6
+- @gradio/atoms@0.8.1
+- @gradio/icons@0.7.2
+- @gradio/client@1.5.2
+- @gradio/upload@0.12.4
+- @gradio/image@0.15.1
+- @gradio/file@0.9.4
+
+## 0.12.1
+
+### Features
+
+- [#9118](https://github.com/gradio-app/gradio/pull/9118) [`e1c404d`](https://github.com/gradio-app/gradio/commit/e1c404da1143fb52b659d03e028bdba1badf443d) - setup npm-previews of all packages.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.6.0
+- @gradio/upload@0.12.3
+- @gradio/atoms@0.8.0
+- @gradio/client@1.5.1
+- @gradio/statustracker@0.7.5
+- @gradio/icons@0.7.1
+- @gradio/image@0.15.0
+- @gradio/file@0.9.3
+
 ## 0.12.0
 
 ### Features

package/Gallery.test.ts

@@ -1,6 +1,6 @@
 import { test, describe, assert, afterEach, vi } from "vitest";
-import { cleanup, render } from "@gradio/tootils";
-import { setupi18n } from "../app/src/i18n";
+import { cleanup, render } from "@self/tootils";
+import { setupi18n } from "../core/src/i18n";
 
 import Gallery from "./Index.svelte";
 import type { LoadingStatus } from "@gradio/statustracker";

package/dist/Index.svelte

@@ -0,0 +1,105 @@
+<script context="module">export { default as BaseGallery } from "./shared/Gallery.svelte";
+</script>
+
+<script>import { Block, UploadText } from "@gradio/atoms";
+import Gallery from "./shared/Gallery.svelte";
+import { StatusTracker } from "@gradio/statustracker";
+import { createEventDispatcher } from "svelte";
+import { BaseFileUpload } from "@gradio/file";
+export let loading_status;
+export let show_label;
+export let label;
+export let root;
+export let elem_id = "";
+export let elem_classes = [];
+export let visible = true;
+export let value = null;
+export let container = true;
+export let scale = null;
+export let min_width = void 0;
+export let columns = [2];
+export let rows = void 0;
+export let height = "auto";
+export let preview;
+export let allow_preview = true;
+export let selected_index = null;
+export let object_fit = "cover";
+export let show_share_button = false;
+export let interactive;
+export let show_download_button = false;
+export let gradio;
+export let show_fullscreen_button = true;
+const dispatch = createEventDispatcher();
+$:
+  no_value = Array.isArray(value) ? value.length === 0 : !value;
+$:
+  selected_index, dispatch("prop_change", { selected_index });
+</script>
+
+<Block
+	{visible}
+	variant="solid"
+	padding={false}
+	{elem_id}
+	{elem_classes}
+	{container}
+	{scale}
+	{min_width}
+	allow_overflow={false}
+	height={typeof height === "number" ? height : undefined}
+>
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+	/>
+	{#if interactive && no_value}
+		<BaseFileUpload
+			value={null}
+			{root}
+			{label}
+			max_file_size={gradio.max_file_size}
+			file_count={"multiple"}
+			file_types={["image"]}
+			i18n={gradio.i18n}
+			upload={gradio.client.upload}
+			stream_handler={gradio.client.stream}
+			on:upload={(e) => {
+				const files = Array.isArray(e.detail) ? e.detail : [e.detail];
+				value = files.map((x) => ({ image: x, caption: null }));
+				gradio.dispatch("upload", value);
+			}}
+			on:error={({ detail }) => {
+				loading_status = loading_status || {};
+				loading_status.status = "error";
+				gradio.dispatch("error", detail);
+			}}
+		>
+			<UploadText i18n={gradio.i18n} type="gallery" />
+		</BaseFileUpload>
+	{:else}
+		<Gallery
+			on:change={() => gradio.dispatch("change", value)}
+			on:select={(e) => gradio.dispatch("select", e.detail)}
+			on:share={(e) => gradio.dispatch("share", e.detail)}
+			on:error={(e) => gradio.dispatch("error", e.detail)}
+			{label}
+			{show_label}
+			{columns}
+			{rows}
+			{height}
+			{preview}
+			{object_fit}
+			{interactive}
+			{allow_preview}
+			bind:selected_index
+			bind:value
+			{show_share_button}
+			{show_download_button}
+			i18n={gradio.i18n}
+			_fetch={gradio.client.fetch}
+			{show_fullscreen_button}
+		/>
+	{/if}
+</Block>

package/dist/Index.svelte.d.ts

@@ -0,0 +1,60 @@
+import { SvelteComponent } from "svelte";
+export { default as BaseGallery } from "./shared/Gallery.svelte";
+import type { Gradio, ShareData, SelectData } from "@gradio/utils";
+import type { LoadingStatus } from "@gradio/statustracker";
+import type { FileData } from "@gradio/client";
+declare const __propDef: {
+    props: {
+        loading_status: LoadingStatus;
+        show_label: boolean;
+        label: string;
+        root: string;
+        elem_id?: string | undefined;
+        elem_classes?: string[] | undefined;
+        visible?: boolean | undefined;
+        value?: ({
+            image: FileData;
+            caption: string | null;
+        }[] | null) | undefined;
+        container?: boolean | undefined;
+        scale?: (number | null) | undefined;
+        min_width?: number | undefined;
+        columns?: number | number[] | undefined;
+        rows?: number | number[] | undefined;
+        height?: (number | "auto") | undefined;
+        preview: boolean;
+        allow_preview?: boolean | undefined;
+        selected_index?: (number | null) | undefined;
+        object_fit?: ("contain" | "cover" | "fill" | "none" | "scale-down") | undefined;
+        show_share_button?: boolean | undefined;
+        interactive: boolean;
+        show_download_button?: boolean | undefined;
+        gradio: Gradio<{
+            change: {
+                image: FileData;
+                caption: string | null;
+            }[] | null;
+            upload: {
+                image: FileData;
+                caption: string | null;
+            }[] | null;
+            select: SelectData;
+            share: ShareData;
+            error: string;
+            prop_change: Record<string, any>;
+            clear_status: LoadingStatus;
+        }>;
+        show_fullscreen_button?: boolean | undefined;
+    };
+    events: {
+        prop_change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
+}

package/dist/shared/Gallery.svelte

@@ -0,0 +1,546 @@
+<script>import { BlockLabel, Empty, ShareButton } from "@gradio/atoms";
+import { ModifyUpload } from "@gradio/upload";
+import { Image } from "@gradio/image/shared";
+import { dequal } from "dequal";
+import { createEventDispatcher, onMount } from "svelte";
+import { tick } from "svelte";
+import {
+  Download,
+  Image as ImageIcon,
+  Maximize,
+  Minimize,
+  Clear
+} from "@gradio/icons";
+import { FileData } from "@gradio/client";
+import { format_gallery_for_sharing } from "./utils";
+import { IconButton } from "@gradio/atoms";
+export let show_label = true;
+export let label;
+export let value = null;
+export let columns = [2];
+export let rows = void 0;
+export let height = "auto";
+export let preview;
+export let allow_preview = true;
+export let object_fit = "cover";
+export let show_share_button = false;
+export let show_download_button = false;
+export let i18n;
+export let selected_index = null;
+export let interactive;
+export let _fetch;
+export let mode = "normal";
+export let show_fullscreen_button = true;
+let is_full_screen = false;
+let gallery_container;
+const dispatch = createEventDispatcher();
+let was_reset = true;
+$:
+  was_reset = value == null || value.length === 0 ? true : was_reset;
+let resolved_value = null;
+$:
+  resolved_value = value == null ? null : value.map((data) => ({
+    image: data.image,
+    caption: data.caption
+  }));
+let prev_value = value;
+if (selected_index == null && preview && value?.length) {
+  selected_index = 0;
+}
+let old_selected_index = selected_index;
+$:
+  if (!dequal(prev_value, value)) {
+    if (was_reset) {
+      selected_index = preview && value?.length ? 0 : null;
+      was_reset = false;
+    } else {
+      selected_index = selected_index != null && value != null && selected_index < value.length ? selected_index : null;
+    }
+    dispatch("change");
+    prev_value = value;
+  }
+$:
+  previous = ((selected_index ?? 0) + (resolved_value?.length ?? 0) - 1) % (resolved_value?.length ?? 0);
+$:
+  next = ((selected_index ?? 0) + 1) % (resolved_value?.length ?? 0);
+function handle_preview_click(event) {
+  const element = event.target;
+  const x = event.offsetX;
+  const width = element.offsetWidth;
+  const centerX = width / 2;
+  if (x < centerX) {
+    selected_index = previous;
+  } else {
+    selected_index = next;
+  }
+}
+function on_keydown(e) {
+  switch (e.code) {
+    case "Escape":
+      e.preventDefault();
+      selected_index = null;
+      break;
+    case "ArrowLeft":
+      e.preventDefault();
+      selected_index = previous;
+      break;
+    case "ArrowRight":
+      e.preventDefault();
+      selected_index = next;
+      break;
+    default:
+      break;
+  }
+}
+$: {
+  if (selected_index !== old_selected_index) {
+    old_selected_index = selected_index;
+    if (selected_index !== null) {
+      dispatch("select", {
+        index: selected_index,
+        value: resolved_value?.[selected_index]
+      });
+    }
+  }
+}
+$:
+  if (allow_preview) {
+    scroll_to_img(selected_index);
+  }
+let el = [];
+let container_element;
+async function scroll_to_img(index) {
+  if (typeof index !== "number")
+    return;
+  await tick();
+  if (el[index] === void 0)
+    return;
+  el[index]?.focus();
+  const { left: container_left, width: container_width } = container_element.getBoundingClientRect();
+  const { left, width } = el[index].getBoundingClientRect();
+  const relative_left = left - container_left;
+  const pos = relative_left + width / 2 - container_width / 2 + container_element.scrollLeft;
+  if (container_element && typeof container_element.scrollTo === "function") {
+    container_element.scrollTo({
+      left: pos < 0 ? 0 : pos,
+      behavior: "smooth"
+    });
+  }
+}
+let window_height = 0;
+async function download(file_url, name) {
+  let response;
+  try {
+    response = await _fetch(file_url);
+  } catch (error) {
+    if (error instanceof TypeError) {
+      window.open(file_url, "_blank", "noreferrer");
+      return;
+    }
+    throw error;
+  }
+  const blob = await response.blob();
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = name;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+$:
+  selected_image = selected_index != null && resolved_value != null ? resolved_value[selected_index] : null;
+onMount(() => {
+  document.addEventListener("fullscreenchange", () => {
+    is_full_screen = !!document.fullscreenElement;
+  });
+});
+const toggle_full_screen = async () => {
+  if (!is_full_screen) {
+    await gallery_container.requestFullscreen();
+  } else {
+    await document.exitFullscreen();
+  }
+};
+</script>
+
+<svelte:window bind:innerHeight={window_height} />
+
+{#if show_label}
+	<BlockLabel {show_label} Icon={ImageIcon} label={label || "Gallery"} />
+{/if}
+{#if value == null || resolved_value == null || resolved_value.length === 0}
+	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
+{:else}
+	<div class="gallery-container" bind:this={gallery_container}>
+		{#if selected_image && allow_preview}
+			<button
+				on:keydown={on_keydown}
+				class="preview"
+				class:minimal={mode === "minimal"}
+			>
+				<div class="icon-buttons">
+					{#if show_download_button}
+						<IconButton
+							Icon={Download}
+							label={i18n("common.download")}
+							on:click={() => {
+								const image = selected_image?.image;
+								if (image == null) {
+									return;
+								}
+								const { url, orig_name } = image;
+								if (url) {
+									download(url, orig_name ?? "image");
+								}
+							}}
+						/>
+					{/if}
+
+					{#if show_fullscreen_button && !is_full_screen}
+						<IconButton
+							Icon={is_full_screen ? Minimize : Maximize}
+							label={is_full_screen
+								? "Exit full screen"
+								: "View in full screen"}
+							on:click={toggle_full_screen}
+						/>
+					{/if}
+
+					{#if show_fullscreen_button && is_full_screen}
+						<IconButton
+							Icon={Minimize}
+							label="Exit full screen"
+							on:click={toggle_full_screen}
+						/>
+					{/if}
+
+					{#if !is_full_screen}
+						<IconButton
+							Icon={Clear}
+							label="Close"
+							on:click={() => (selected_index = null)}
+						/>
+					{/if}
+				</div>
+				<button
+					class="image-button"
+					on:click={(event) => handle_preview_click(event)}
+					style="height: calc(100% - {selected_image.caption
+						? '80px'
+						: '60px'})"
+					aria-label="detailed view of selected image"
+				>
+					<Image
+						data-testid="detailed-image"
+						src={selected_image.image.url}
+						alt={selected_image.caption || ""}
+						title={selected_image.caption || null}
+						class={selected_image.caption && "with-caption"}
+						loading="lazy"
+					/>
+				</button>
+				{#if selected_image?.caption}
+					<caption class="caption">
+						{selected_image.caption}
+					</caption>
+				{/if}
+				<div
+					bind:this={container_element}
+					class="thumbnails scroll-hide"
+					data-testid="container_el"
+				>
+					{#each resolved_value as image, i}
+						<button
+							bind:this={el[i]}
+							on:click={() => (selected_index = i)}
+							class="thumbnail-item thumbnail-small"
+							class:selected={selected_index === i && mode !== "minimal"}
+							aria-label={"Thumbnail " +
+								(i + 1) +
+								" of " +
+								resolved_value.length}
+						>
+							<Image
+								src={image.image.url}
+								title={image.caption || null}
+								data-testid={"thumbnail " + (i + 1)}
+								alt=""
+								loading="lazy"
+							/>
+						</button>
+					{/each}
+				</div>
+			</button>
+		{/if}
+
+		<div
+			class="grid-wrap"
+			class:minimal={mode === "minimal"}
+			class:fixed-height={mode !== "minimal" && (!height || height == "auto")}
+			class:hidden={is_full_screen}
+		>
+			<div
+				class="grid-container"
+				style="--grid-cols:{columns}; --grid-rows:{rows}; --object-fit: {object_fit}; height: {height};"
+				class:pt-6={show_label}
+			>
+				{#if interactive}
+					<div class="icon-button">
+						<ModifyUpload
+							{i18n}
+							absolute={false}
+							on:clear={() => (value = null)}
+						/>
+					</div>
+				{/if}
+				{#if show_share_button}
+					<div class="icon-button">
+						<ShareButton
+							{i18n}
+							on:share
+							on:error
+							value={resolved_value}
+							formatter={format_gallery_for_sharing}
+						/>
+					</div>
+				{/if}
+				{#each resolved_value as entry, i}
+					<button
+						class="thumbnail-item thumbnail-lg"
+						class:selected={selected_index === i}
+						on:click={() => (selected_index = i)}
+						aria-label={"Thumbnail " + (i + 1) + " of " + resolved_value.length}
+					>
+						<Image
+							alt={entry.caption || ""}
+							src={typeof entry.image === "string"
+								? entry.image
+								: entry.image.url}
+							loading="lazy"
+						/>
+						{#if entry.caption}
+							<div class="caption-label">
+								{entry.caption}
+							</div>
+						{/if}
+					</button>
+				{/each}
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.image-container {
+		height: 100%;
+		position: relative;
+	}
+	.image-container :global(img),
+	button {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: contain;
+		display: block;
+		border-radius: var(--radius-lg);
+	}
+
+	.preview {
+		display: flex;
+		position: absolute;
+		flex-direction: column;
+		z-index: var(--layer-2);
+		border-radius: calc(var(--block-radius) - var(--block-border-width));
+		-webkit-backdrop-filter: blur(8px);
+		backdrop-filter: blur(8px);
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+
+	.preview.minimal {
+		width: fit-content;
+		height: fit-content;
+	}
+
+	.preview::before {
+		content: "";
+		position: absolute;
+		z-index: var(--layer-below);
+		background: var(--background-fill-primary);
+		opacity: 0.9;
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+
+	.fixed-height {
+		min-height: var(--size-80);
+		max-height: 55vh;
+	}
+
+	@media (--screen-xl) {
+		.fixed-height {
+			min-height: 450px;
+		}
+	}
+
+	.image-button {
+		height: calc(100% - 60px);
+		width: 100%;
+		display: flex;
+	}
+	.image-button :global(img) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: contain;
+	}
+	.thumbnails :global(img) {
+		object-fit: cover;
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+	.preview :global(img.with-caption) {
+		height: var(--size-full);
+	}
+
+	.preview.minimal :global(img.with-caption) {
+		height: auto;
+	}
+
+	.selectable {
+		cursor: crosshair;
+	}
+
+	.caption {
+		padding: var(--size-2) var(--size-3);
+		overflow: hidden;
+		color: var(--block-label-text-color);
+		font-weight: var(--weight-semibold);
+		text-align: center;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		align-self: center;
+	}
+
+	.thumbnails {
+		display: flex;
+		position: absolute;
+		bottom: 0;
+		justify-content: center;
+		align-items: center;
+		gap: var(--spacing-lg);
+		width: var(--size-full);
+		height: var(--size-14);
+		overflow-x: scroll;
+	}
+
+	.thumbnail-item {
+		--ring-color: transparent;
+		position: relative;
+		box-shadow:
+			inset 0 0 0 1px var(--ring-color),
+			var(--shadow-drop);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--button-small-radius);
+		background: var(--background-fill-secondary);
+		aspect-ratio: var(--ratio-square);
+		width: var(--size-full);
+		height: var(--size-full);
+		overflow: clip;
+	}
+
+	.thumbnail-item:hover {
+		--ring-color: var(--color-accent);
+		border-color: var(--color-accent);
+		filter: brightness(1.1);
+	}
+
+	.thumbnail-item.selected {
+		--ring-color: var(--color-accent);
+		border-color: var(--color-accent);
+	}
+
+	.thumbnail-small {
+		flex: none;
+		transform: scale(0.9);
+		transition: 0.075s;
+		width: var(--size-9);
+		height: var(--size-9);
+	}
+
+	.thumbnail-small.selected {
+		--ring-color: var(--color-accent);
+		transform: scale(1);
+		border-color: var(--color-accent);
+	}
+
+	.thumbnail-small > img {
+		width: var(--size-full);
+		height: var(--size-full);
+		overflow: hidden;
+		object-fit: var(--object-fit);
+	}
+
+	.grid-wrap {
+		position: relative;
+		padding: var(--size-2);
+		height: var(--size-full);
+		overflow-y: scroll;
+	}
+
+	.grid-container {
+		display: grid;
+		position: relative;
+		grid-template-rows: repeat(var(--grid-rows), minmax(100px, 1fr));
+		grid-template-columns: repeat(var(--grid-cols), minmax(100px, 1fr));
+		grid-auto-rows: minmax(100px, 1fr);
+		gap: var(--spacing-lg);
+	}
+
+	.thumbnail-lg > :global(img) {
+		width: var(--size-full);
+		height: var(--size-full);
+		overflow: hidden;
+		object-fit: var(--object-fit);
+	}
+
+	.thumbnail-lg:hover .caption-label {
+		opacity: 0.5;
+	}
+
+	.caption-label {
+		position: absolute;
+		right: var(--block-label-margin);
+		bottom: var(--block-label-margin);
+		z-index: var(--layer-1);
+		border-top: 1px solid var(--border-color-primary);
+		border-left: 1px solid var(--border-color-primary);
+		border-radius: var(--block-label-radius);
+		background: var(--background-fill-secondary);
+		padding: var(--block-label-padding);
+		max-width: 80%;
+		overflow: hidden;
+		font-size: var(--block-label-text-size);
+		text-align: left;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.icon-button {
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		z-index: var(--layer-1);
+	}
+
+	.icon-buttons {
+		display: flex;
+		position: absolute;
+		right: 0;
+		gap: var(--size-1);
+		z-index: 1;
+		margin: var(--size-1);
+	}
+
+	.grid-wrap.minimal {
+		padding: 0;
+	}
+</style>

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

@@ -0,0 +1,43 @@
+import { SvelteComponent } from "svelte";
+import type { SelectData } from "@gradio/utils";
+import { FileData } from "@gradio/client";
+import type { I18nFormatter } from "@gradio/utils";
+declare const __propDef: {
+    props: {
+        show_label?: boolean | undefined;
+        label: string;
+        value?: ({
+            image: FileData;
+            caption: string | null;
+        }[] | null) | undefined;
+        columns?: number | number[] | undefined;
+        rows?: number | number[] | undefined;
+        height?: (number | "auto") | undefined;
+        preview: boolean;
+        allow_preview?: boolean | undefined;
+        object_fit?: ("contain" | "cover" | "fill" | "none" | "scale-down") | undefined;
+        show_share_button?: boolean | undefined;
+        show_download_button?: boolean | undefined;
+        i18n: I18nFormatter;
+        selected_index?: (number | null) | undefined;
+        interactive: boolean;
+        _fetch: typeof fetch;
+        mode?: ("normal" | "minimal") | undefined;
+        show_fullscreen_button?: boolean | undefined;
+    };
+    events: {
+        share: CustomEvent<import("@gradio/utils").ShareData>;
+        error: CustomEvent<string>;
+        change: CustomEvent<undefined>;
+        select: CustomEvent<SelectData>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GalleryProps = typeof __propDef.props;
+export type GalleryEvents = typeof __propDef.events;
+export type GallerySlots = typeof __propDef.slots;
+export default class Gallery extends SvelteComponent<GalleryProps, GalleryEvents, GallerySlots> {
+}
+export {};

package/dist/shared/utils.d.ts

@@ -0,0 +1,2 @@
+import type { FileData } from "@gradio/client";
+export declare function format_gallery_for_sharing(value: [FileData, string | null][] | null): Promise<string>;

package/dist/shared/utils.js

@@ -0,0 +1,13 @@
+import { uploadToHuggingFace } from "@gradio/utils";
+export async function format_gallery_for_sharing(value) {
+    if (!value)
+        return "";
+    let urls = await Promise.all(value.map(async ([image, _]) => {
+        if (image === null || !image.url)
+            return "";
+        return await uploadToHuggingFace(image.url, "url");
+    }));
+    return `<div style="display: flex; flex-wrap: wrap; gap: 16px">${urls
+        .map((url) => `<img src="${url}" style="height: 400px" />`)
+        .join("")}</div>`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/gallery",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,23 +8,39 @@
   "private": false,
   "dependencies": {
     "dequal": "^2.0.2",
-    "@gradio/atoms": "^0.7.9",
-    "@gradio/client": "^1.5.0",
-    "@gradio/image": "^0.14.0",
-    "@gradio/icons": "^0.7.0",
-    "@gradio/statustracker": "^0.7.4",
-    "@gradio/utils": "^0.5.2",
-    "@gradio/upload": "^0.12.2",
-    "@gradio/file": "^0.9.2"
+    "@gradio/atoms": "^0.8.1",
+    "@gradio/icons": "^0.7.2",
+    "@gradio/image": "^0.15.1",
+    "@gradio/statustracker": "^0.7.6",
+    "@gradio/client": "^1.5.2",
+    "@gradio/utils": "^0.6.1",
+    "@gradio/file": "^0.9.4",
+    "@gradio/upload": "^0.12.4"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.10.2"
+    "@gradio/preview": "^0.11.1"
   },
   "main": "./Index.svelte",
   "main_changeset": true,
   "exports": {
-    ".": "./Index.svelte",
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
     "./package.json": "./package.json",
-    "./base": "./shared/Gallery.svelte"
+    "./base": {
+      "gradio": "./shared/Gallery.svelte",
+      "svelte": "./dist/shared/Gallery.svelte",
+      "types": "./dist/shared/Gallery.svelte.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/gallery"
   }
 }