@gradio/imageeditor 0.16.5 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @gradio/imageeditor
 
+## 0.17.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
+- @gradio/image@0.23.0
+
+## 0.16.6
+
+### 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
+- @gradio/image@0.22.18
+
+## 0.16.5
+
+### Dependency updates
+
+- @gradio/statustracker@0.10.18
+
+## 0.16.5
+
+### Dependency updates
+
+- @gradio/icons@0.13.1
+- @gradio/upload@0.16.16
+
 ## 0.16.5
 
 ### Dependency updates

package/Index.svelte

@@ -23,7 +23,7 @@
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
-	export let visible = true;
+	export let visible: boolean | "hidden" = true;
 	export let value: EditorData | null = {
 		background: null,
 		layers: [],

package/dist/Example.svelte.d.ts

@@ -4,12 +4,14 @@ declare const __propDef: {
     props: {
         value: EditorData;
         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

@@ -56,8 +56,7 @@ export async function get_value() {
   return blobs;
 }
 let is_dragging;
-$:
-  value && handle_change();
+$: value && handle_change();
 const is_browser = typeof window !== "undefined";
 const raf = is_browser ? window.requestAnimationFrame : (cb) => cb();
 function wait_for_next_frame() {
@@ -81,14 +80,10 @@ function handle_history_change() {
     tick().then((_) => value_is_output = false);
   }
 }
-$:
-  has_value = value?.background || value?.layers?.length || value?.composite;
-$:
-  normalised_background = value?.background ? new FileData(value.background) : null;
-$:
-  normalised_composite = value?.composite ? new FileData(value.composite) : null;
-$:
-  normalised_layers = value?.layers?.map((layer) => new FileData(layer)) || [];
+$: has_value = value?.background || value?.layers?.length || value?.composite;
+$: normalised_background = value?.background ? new FileData(value.background) : null;
+$: normalised_composite = value?.composite ? new FileData(value.composite) : null;
+$: normalised_layers = value?.layers?.map((layer) => new FileData(layer)) || [];
 </script>
 
 {#if !interactive}

package/dist/Index.svelte.d.ts

@@ -7,38 +7,38 @@ import type { LayerOptions, Transform, Source, WebcamOptions } from "./shared/ty
 import type { CommandNode } from "./shared/core/commands";
 declare const __propDef: {
     props: {
-        elem_id?: string | undefined;
-        elem_classes?: string[] | undefined;
-        visible?: boolean | undefined;
-        value?: (EditorData | null) | undefined;
+        elem_id?: string;
+        elem_classes?: string[];
+        visible?: boolean | "hidden";
+        value?: EditorData | null;
         label: string;
         show_label: boolean;
         show_download_button: boolean;
         root: string;
-        value_is_output?: boolean | undefined;
-        height?: number | undefined;
+        value_is_output?: boolean;
+        height?: number;
         width: number | undefined;
-        _selectable?: boolean | undefined;
-        container?: boolean | undefined;
-        scale?: (number | null) | undefined;
+        _selectable?: boolean;
+        container?: boolean;
+        scale?: number | null;
         min_width?: number | undefined;
         loading_status: LoadingStatus;
-        show_share_button?: boolean | undefined;
-        sources?: Source[] | undefined;
+        show_share_button?: boolean;
+        sources?: Source[];
         interactive: boolean;
         placeholder: string | undefined;
         brush: Brush;
         eraser: Eraser;
-        transforms?: Transform[] | undefined;
+        transforms?: Transform[];
         layers: LayerOptions;
-        attached_events?: string[] | undefined;
+        attached_events?: string[];
         server: {
             accept_blobs: (a: any) => void;
         };
         canvas_size: [number, number];
-        fixed_canvas?: boolean | undefined;
-        show_fullscreen_button?: boolean | undefined;
-        full_history?: (CommandNode | null) | undefined;
+        fixed_canvas?: boolean;
+        show_fullscreen_button?: boolean;
+        full_history?: CommandNode | null;
         gradio: Gradio<{
             change: never;
             error: string;
@@ -52,12 +52,12 @@ declare const __propDef: {
             share: ShareData;
             clear_status: LoadingStatus;
         }>;
-        border_region?: number | undefined;
+        border_region?: number;
         webcam_options: WebcamOptions;
         theme_mode: "dark" | "light";
-        get_value?: (() => Promise<ImageBlobs | {
+        get_value?: () => Promise<ImageBlobs | {
             id: string;
-        }>) | undefined;
+        }>;
     };
     events: {
         error: CustomEvent<any>;
@@ -65,6 +65,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;
@@ -79,9 +81,9 @@ 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);
+    set visible(_: boolean | "hidden" | undefined);
     get value(): EditorData | null | undefined;
     /**accessor*/
     set value(_: EditorData | null | undefined);

package/dist/InteractiveImageEditor.svelte

@@ -46,9 +46,7 @@ function is_not_null(o) {
 function is_file_data(o) {
   return !!o;
 }
-$:
-  if (background_image)
-    dispatch("upload");
+$: if (background_image) dispatch("upload");
 export async function get_data() {
   let blobs;
   try {
@@ -79,15 +77,13 @@ export async function get_data() {
   };
 }
 function handle_value(value) {
-  if (!editor)
-    return;
+  if (!editor) return;
   if (value == null) {
     editor.handle_remove();
     dispatch("receive_null");
   }
 }
-$:
-  handle_value({ layers, composite, background });
+$: handle_value({ layers, composite, background });
 let background_image = false;
 let can_undo;
 export let image_id = null;
@@ -97,8 +93,7 @@ function nextframe() {
 let uploading = false;
 let pending = false;
 async function handle_change(e) {
-  if (!realtime)
-    return;
+  if (!realtime) return;
   if (uploading) {
     pending = true;
     return;
@@ -149,8 +144,7 @@ async function handle_change(e) {
     handle_change(e);
   }
 }
-$:
-  [heading, paragraph] = placeholder ? inject(placeholder) : [false, false];
+$: [heading, paragraph] = placeholder ? inject(placeholder) : [false, false];
 let current_tool;
 </script>
 

package/dist/InteractiveImageEditor.svelte.d.ts

@@ -23,7 +23,7 @@ declare const __propDef: {
         root: string;
         label?: string | undefined;
         show_label: boolean;
-        changeable?: boolean | undefined;
+        changeable?: boolean;
         theme_mode: "dark" | "light";
         layers: FileData[];
         composite: FileData | null;
@@ -32,17 +32,17 @@ declare const __propDef: {
         transforms: Transform[];
         accept_blobs: (a: any) => void;
         canvas_size: [number, number];
-        fixed_canvas?: boolean | undefined;
+        fixed_canvas?: boolean;
         realtime: boolean;
         upload: Client["upload"];
         is_dragging: boolean;
         placeholder?: string | undefined;
         border_region: number;
-        full_history?: (CommandNode | null) | undefined;
+        full_history?: CommandNode | null;
         webcam_options: WebcamOptions;
-        show_download_button?: boolean | undefined;
-        get_data?: (() => Promise<ImageBlobs>) | undefined;
-        image_id?: (null | string) | undefined;
+        show_download_button?: boolean;
+        get_data?: () => Promise<ImageBlobs>;
+        image_id?: null | string;
     };
     events: {
         history: CustomEvent<any>;
@@ -56,6 +56,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type InteractiveImageEditorProps = typeof __propDef.props;
 export type InteractiveImageEditorEvents = typeof __propDef.events;

package/dist/shared/Anchor.svelte

@@ -34,8 +34,7 @@ async function handle_box_hover(i) {
 }
 let last_pos = 0;
 async function handle_box_click(i, stagger = false) {
-  if (expanded && stagger)
-    return;
+  if (expanded && stagger) return;
   const y = Math.floor(i / 3);
   const x = i % 3;
   const [initial_arrows, eventual_arrows] = get_valid_offsets({

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

@@ -1,14 +1,14 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
+    props: Record<string, never>;
     events: {
         position: CustomEvent<"center" | "left" | "right" | "top-left" | "top" | "top-right" | "bottom-left" | "bottom" | "bottom-right">;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type AnchorProps = typeof __propDef.props;
 export type AnchorEvents = typeof __propDef.events;

package/dist/shared/Controls.svelte

@@ -33,8 +33,7 @@ function handle_zoom_keydown(e) {
     handle_zoom_change(current_zoom);
   }
 }
-$:
-  formatted_zoom = Math.round(current_zoom * 100);
+$: formatted_zoom = Math.round(current_zoom * 100);
 </script>
 
 <IconButtonWrapper>

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

@@ -1,12 +1,12 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        can_save?: boolean | undefined;
-        changeable?: boolean | undefined;
-        current_zoom?: number | undefined;
+        can_save?: boolean;
+        changeable?: boolean;
+        current_zoom?: number;
         tool: string;
-        min_zoom?: boolean | undefined;
-        enable_download?: boolean | undefined;
+        min_zoom?: boolean;
+        enable_download?: boolean;
         can_undo: boolean;
         can_redo: boolean;
     };
@@ -24,6 +24,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ControlsProps = typeof __propDef.props;
 export type ControlsEvents = typeof __propDef.events;

package/dist/shared/IconButton.svelte

@@ -14,8 +14,7 @@ export let background = "var(--background-fill-primary)";
 export let offset = 0;
 export let label_position = "left";
 export let roundedness = "quite";
-$:
-  _color = highlight ? "var(--color-accent)" : color.toString();
+$: _color = highlight ? "var(--color-accent)" : color.toString();
 </script>
 
 <button

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

@@ -4,20 +4,20 @@ import type { ColorInput } from "tinycolor2";
 declare const __propDef: {
     props: {
         Icon: ComponentType;
-        label?: string | undefined;
-        show_label?: boolean | undefined;
-        pending?: boolean | undefined;
-        size?: ("small" | "large" | "medium") | undefined;
-        padded?: boolean | undefined;
-        highlight?: boolean | undefined;
-        disabled?: boolean | undefined;
-        hasPopup?: boolean | undefined;
-        color?: (string | ColorInput) | undefined;
-        transparent?: boolean | undefined;
-        background?: string | undefined;
-        offset?: number | undefined;
-        label_position?: ("left" | "right") | undefined;
-        roundedness?: ("quite" | "very") | undefined;
+        label?: string;
+        show_label?: boolean;
+        pending?: boolean;
+        size?: "small" | "large" | "medium";
+        padded?: boolean;
+        highlight?: boolean;
+        disabled?: boolean;
+        hasPopup?: boolean;
+        color?: string | ColorInput;
+        transparent?: boolean;
+        background?: string;
+        offset?: number;
+        label_position?: "left" | "right";
+        roundedness?: "quite" | "very";
     };
     events: {
         click: MouseEvent;
@@ -25,6 +25,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type IconButtonProps = typeof __propDef.props;
 export type IconButtonEvents = typeof __propDef.events;

package/dist/shared/ImageEditor.svelte

@@ -46,29 +46,25 @@ export let theme_mode;
 export let full_history = null;
 let pixi_target;
 let pixi_target_crop;
-$:
-  if (layer_options) {
-    if (check_if_should_init()) {
-      editor.set_layer_options(layer_options);
-      refresh_tools();
-    }
+$: if (layer_options) {
+  if (check_if_should_init()) {
+    editor.set_layer_options(layer_options);
+    refresh_tools();
   }
+}
 function refresh_tools() {
-  if (!editor || !ready)
-    return;
+  if (!editor || !ready) return;
   editor.set_tool(current_tool);
   editor.set_subtool(current_subtool);
 }
-$:
-  if (editor && ready && editor.layers) {
-    const current_layers = get(editor.layers);
-    if (current_layers.layers.length > 0 && !current_layers.active_layer) {
-      refresh_tools_for_layer_changes(current_layers);
-    }
+$: if (editor && ready && editor.layers) {
+  const current_layers = get(editor.layers);
+  if (current_layers.layers.length > 0 && !current_layers.active_layer) {
+    refresh_tools_for_layer_changes(current_layers);
   }
+}
 function refresh_tools_for_layer_changes(current_layers) {
-  if (!editor || !ready)
-    return;
+  if (!editor || !ready) return;
   if (current_layers.layers.length > 0 && !current_layers.active_layer) {
     editor.set_layer(current_layers.layers[0].id);
   }
@@ -87,8 +83,7 @@ function check_if_should_init() {
 }
 export let has_drawn = false;
 export async function get_blobs() {
-  if (!editor)
-    return { background: null, layers: [], composite: null };
+  if (!editor) return { background: null, layers: [], composite: null };
   if (!background_image && !has_drawn && !layers.length)
     return { background: null, layers: [], composite: null };
   const blobs = await editor.get_blobs();
@@ -100,8 +95,7 @@ export function add_image(image) {
 }
 let pending_bg;
 export async function add_image_from_url(source) {
-  if (!editor || !source || !check_if_should_init())
-    return;
+  if (!editor || !source || !check_if_should_init()) return;
   let url;
   if (typeof source === "string") {
     url = source;
@@ -126,8 +120,7 @@ export async function add_image_from_url(source) {
   }
 }
 export async function add_layers_from_url(source) {
-  if (!editor || !source.length || !check_if_should_init())
-    return;
+  if (!editor || !source.length || !check_if_should_init()) return;
   if (Array.isArray(source) && source.every((item) => item?.meta?._type === "gradio.FileData")) {
     try {
       await pending_bg;
@@ -147,8 +140,7 @@ let mounted = false;
 let min_zoom = true;
 let last_dimensions = { width: 0, height: 0 };
 async function handle_visibility_change() {
-  if (!editor || !ready || !zoom)
-    return;
+  if (!editor || !ready || !zoom) return;
   await tick();
   const is_visible = pixi_target.offsetParent !== null;
   if (is_visible) {
@@ -199,8 +191,7 @@ onMount(() => {
   };
 });
 function refresh_tools_after_history() {
-  if (!editor || !ready)
-    return;
+  if (!editor || !ready) return;
   const current_layers = get(editor.layers);
   if (current_layers.layers.length > 0 && !current_layers.active_layer) {
     editor.set_layer(current_layers.layers[0].id);
@@ -288,21 +279,17 @@ async function init_image_editor() {
   }
   refresh_tools();
 }
-$:
-  if (background == null && layers.length == 0 && composite == null && editor && ready) {
-    editor.reset_canvas();
-    zoom.set_zoom("fit");
-    handle_tool_change({ tool: "image" });
-    background_image = false;
-    has_drawn = false;
-  }
-$:
-  current_tool === "image" && current_subtool === "crop" && crop_zoom.set_zoom("fit");
+$: if (background == null && layers.length == 0 && composite == null && editor && ready) {
+  editor.reset_canvas();
+  zoom.set_zoom("fit");
+  handle_tool_change({ tool: "image" });
+  background_image = false;
+  has_drawn = false;
+}
+$: current_tool === "image" && current_subtool === "crop" && crop_zoom.set_zoom("fit");
 async function handle_files(files) {
-  if (files == null)
-    return;
-  if (!sources.includes("upload"))
-    return;
+  if (files == null) return;
+  if (!sources.includes("upload")) return;
   editor.reset_canvas();
   const _file = Array.isArray(files) ? files[0] : files;
   await editor.add_image({ image: _file });
@@ -315,8 +302,7 @@ async function handle_files(files) {
   dispatch("input");
   dispatch("change");
 }
-$:
-  background_image = can_undo && editor.command_manager.contains("AddImage");
+$: background_image = can_undo && editor.command_manager.contains("AddImage");
 function handle_tool_change({ tool }) {
   editor.set_tool(tool);
   current_tool = tool;
@@ -388,37 +374,31 @@ function update_eraser_options() {
 }
 let brush_size_visible = false;
 let brush_color_visible = false;
-$:
-  brush?.set_brush_color(
-    (() => {
-      let color_value;
-      if (selected_color === "auto") {
-        const default_color = brush_options.colors.find(
-          (color) => Array.isArray(color) ? color[0] === brush_options.default_color : color === brush_options.default_color
-        ) || brush_options.colors[0];
-        color_value = Array.isArray(default_color) ? default_color[0] : default_color;
-      } else {
-        color_value = selected_color;
-      }
-      return color_value;
-    })()
-  );
-$:
-  brush?.set_brush_size(
-    typeof selected_size === "number" ? selected_size : 25
-  );
-$:
-  brush?.set_eraser_size(
-    typeof selected_eraser_size === "number" ? selected_eraser_size : 25
-  );
-$:
-  disable_click = current_tool !== "image" || current_tool === "image" && background_image || current_tool === "image" && current_subtool === "webcam" || !sources.includes("upload");
+$: brush?.set_brush_color(
+  (() => {
+    let color_value;
+    if (selected_color === "auto") {
+      const default_color = brush_options.colors.find(
+        (color) => Array.isArray(color) ? color[0] === brush_options.default_color : color === brush_options.default_color
+      ) || brush_options.colors[0];
+      color_value = Array.isArray(default_color) ? default_color[0] : default_color;
+    } else {
+      color_value = selected_color;
+    }
+    return color_value;
+  })()
+);
+$: brush?.set_brush_size(
+  typeof selected_size === "number" ? selected_size : 25
+);
+$: brush?.set_eraser_size(
+  typeof selected_eraser_size === "number" ? selected_eraser_size : 25
+);
+$: disable_click = current_tool !== "image" || current_tool === "image" && background_image || current_tool === "image" && current_subtool === "webcam" || !sources.includes("upload");
 let current_subtool = null;
 let preview = false;
-$:
-  brush?.preview_brush(preview);
-$:
-  brush?.set_brush_opacity(selected_opacity);
+$: brush?.preview_brush(preview);
+$: brush?.set_brush_opacity(selected_opacity);
 function handle_zoom_change(zoom_level2) {
   zoom.set_zoom(zoom_level2);
 }
@@ -446,14 +426,11 @@ function handle_capture(e) {
 function handle_save() {
   dispatch("save");
 }
-$:
-  add_image_from_url(composite || background);
-$:
-  add_layers_from_url(layers);
+$: add_image_from_url(composite || background);
+$: add_layers_from_url(layers);
 async function handle_crop_confirm() {
   const { image } = await crop.get_crop_bounds();
-  if (!image)
-    return;
+  if (!image) return;
   await editor.add_image({
     image,
     resize: false

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

@@ -10,40 +10,40 @@ import type { LayerOptions, Source, Transform, WebcamOptions } from "./types";
 import { type ImageBlobs } from "./types";
 declare const __propDef: {
     props: {
-        antialias?: true | undefined;
-        changeable?: boolean | undefined;
-        sources?: Source[] | undefined;
-        transforms?: Transform[] | undefined;
+        antialias?: true;
+        changeable?: boolean;
+        sources?: Source[];
+        transforms?: Transform[];
         canvas_size: [number, number];
-        is_dragging?: boolean | undefined;
-        background_image?: boolean | undefined;
+        is_dragging?: boolean;
+        background_image?: boolean;
         brush_options: Brush;
         eraser_options: Eraser;
-        fixed_canvas?: boolean | undefined;
+        fixed_canvas?: boolean;
         root: string;
         i18n: I18nFormatter;
         upload: Client["upload"];
         composite: FileData | null;
         layers: FileData[];
         background: FileData | null;
-        border_region?: number | undefined;
+        border_region?: number;
         layer_options: LayerOptions;
         current_tool: ToolbarTool;
         webcam_options: WebcamOptions;
-        show_download_button?: boolean | undefined;
+        show_download_button?: boolean;
         theme_mode: "dark" | "light";
-        full_history?: (CommandNode | null) | undefined;
-        has_drawn?: boolean | undefined;
-        get_blobs?: (() => Promise<ImageBlobs>) | undefined;
-        add_image?: ((image: Blob | File) => void) | undefined;
-        add_image_from_url?: ((source: string | {
+        full_history?: CommandNode | null;
+        has_drawn?: boolean;
+        get_blobs?: () => Promise<ImageBlobs>;
+        add_image?: (image: Blob | File) => void;
+        add_image_from_url?: (source: string | {
             url: string;
             meta: {
                 _type: string;
             };
-        } | any) => Promise<void>) | undefined;
-        add_layers_from_url?: ((source: FileData[] | any) => Promise<void>) | undefined;
-        can_undo?: boolean | undefined;
+        } | any) => Promise<void>;
+        add_layers_from_url?: (source: FileData[] | any) => Promise<void>;
+        can_undo?: boolean;
     };
     events: {
         error: CustomEvent<string>;
@@ -60,6 +60,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ImageEditorProps = typeof __propDef.props;
 export type ImageEditorEvents = typeof __propDef.events;

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

@@ -11,9 +11,9 @@ declare const __propDef: {
                 visible: boolean;
             }[];
         }>;
-        enable_additional_layers?: boolean | undefined;
-        enable_layers?: boolean | undefined;
-        show_layers?: boolean | undefined;
+        enable_additional_layers?: boolean;
+        enable_layers?: boolean;
+        show_layers?: boolean;
     };
     events: {
         new_layer: CustomEvent<void>;
@@ -28,6 +28,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type LayersProps = typeof __propDef.props;
 export type LayersEvents = typeof __propDef.events;

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

@@ -20,6 +20,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ResizeProps = typeof __propDef.props;
 export type ResizeEvents = typeof __propDef.events;

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

@@ -11,9 +11,9 @@ declare const __propDef: {
                 visible: boolean;
             }[];
         }>;
-        enable_additional_layers?: boolean | undefined;
-        enable_layers?: boolean | undefined;
-        show_layers?: boolean | undefined;
+        enable_additional_layers?: boolean;
+        enable_layers?: boolean;
+        show_layers?: boolean;
     };
     events: {
         new_layer: CustomEvent<void>;
@@ -28,6 +28,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SecondaryToolbarProps = typeof __propDef.props;
 export type SecondaryToolbarEvents = typeof __propDef.events;

package/dist/shared/Toolbar.svelte

@@ -60,22 +60,14 @@ function handle_subtool_click(e, _subtool) {
   e.stopPropagation();
   dispatch("subtool_change", { tool, subtool: _subtool });
 }
-$:
-  show_brush_size = tool === "draw" && subtool === "size";
-$:
-  show_brush_color = tool === "draw" && subtool === "color";
-$:
-  show_eraser_size = tool === "erase" && subtool === "size";
-$:
-  can_crop = transforms.includes("crop");
-$:
-  can_resize = transforms.includes("resize");
-$:
-  can_upload = sources.includes("upload");
-$:
-  can_webcam = sources.includes("webcam");
-$:
-  can_paste = sources.includes("clipboard");
+$: show_brush_size = tool === "draw" && subtool === "size";
+$: show_brush_color = tool === "draw" && subtool === "color";
+$: show_eraser_size = tool === "erase" && subtool === "size";
+$: can_crop = transforms.includes("crop");
+$: can_resize = transforms.includes("resize");
+$: can_upload = sources.includes("upload");
+$: can_webcam = sources.includes("webcam");
+$: can_paste = sources.includes("clipboard");
 </script>
 
 <div class="toolbar-wrap">

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

@@ -5,19 +5,19 @@ import type { Source, Transform } from "./types";
 import { type Brush as BrushType, type Eraser as EraserType } from "./brush/types";
 declare const __propDef: {
     props: {
-        tool?: Tool | undefined;
-        subtool?: Subtool | undefined;
-        background?: boolean | undefined;
+        tool?: Tool;
+        subtool?: Subtool;
+        background?: boolean;
         brush_options: BrushType | false;
-        selected_size?: number | undefined;
+        selected_size?: number;
         eraser_options: EraserType;
-        selected_eraser_size?: number | undefined;
+        selected_eraser_size?: number;
         selected_color?: any;
         selected_opacity?: any;
-        preview?: boolean | undefined;
-        show_brush_color?: boolean | undefined;
-        show_brush_size?: boolean | undefined;
-        show_eraser_size?: boolean | undefined;
+        preview?: boolean;
+        show_brush_color?: boolean;
+        show_brush_size?: boolean;
+        show_eraser_size?: boolean;
         sources: Source[];
         transforms: Transform[];
     };
@@ -33,6 +33,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ToolbarProps = typeof __propDef.props;
 export type ToolbarEvents = typeof __propDef.events;

package/dist/shared/brush/BrushOptions.svelte

@@ -27,8 +27,7 @@ function handle_color_selection({
     editing_index = index;
     color_picker = true;
   }
-  if (!color)
-    return;
+  if (!color) return;
   selected_color = color;
   if (opacity !== void 0) {
     selected_opacity = opacity;
@@ -38,12 +37,10 @@ function handle_color_selection({
   }
 }
 function handle_color_change(color) {
-  if (editing_index === null)
-    return;
+  if (editing_index === null) return;
   recent_colors[editing_index] = color;
 }
-$:
-  handle_color_change(selected_color);
+$: handle_color_change(selected_color);
 let width = 0;
 let height = 0;
 function debounce(func, delay) {
@@ -66,8 +63,7 @@ function handle_close_preview() {
   preview = false;
 }
 const debounced_close_preview = debounce(handle_close_preview, 1e3);
-$:
-  selected_size, selected_color, handle_preview();
+$: selected_size, selected_color, handle_preview();
 function handle_select(color) {
   selected_color = color;
 }

package/dist/shared/brush/BrushOptions.svelte.d.ts

@@ -6,13 +6,13 @@ declare const __propDef: {
         colors: (ColorInput | ColorTuple)[];
         selected_color: any;
         color_mode?: Brush["color_mode"] | undefined;
-        recent_colors?: (ColorInput | ColorTuple)[] | undefined;
+        recent_colors?: (ColorInput | ColorTuple)[];
         selected_size: number;
         selected_opacity: number;
         show_swatch: boolean;
         show_size: boolean;
-        mode?: ("brush" | "eraser") | undefined;
-        preview?: boolean | undefined;
+        mode?: "brush" | "eraser";
+        preview?: boolean;
     };
     events: {
         click_outside: CustomEvent<void>;
@@ -20,6 +20,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type BrushOptionsProps = typeof __propDef.props;
 export type BrushOptionsEvents = typeof __propDef.events;

package/dist/shared/brush/BrushSize.svelte.d.ts

@@ -11,6 +11,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type BrushSizeProps = typeof __propDef.props;
 export type BrushSizeEvents = typeof __propDef.events;

package/dist/shared/brush/ColorField.svelte

@@ -18,10 +18,8 @@ function format_color(color2, mode) {
   }
   return tinycolor(color2).toHslString();
 }
-$:
-  color_string = format_color(color, current_mode);
-$:
-  color_string && dispatch("selected", color_string);
+$: color_string = format_color(color, current_mode);
+$: color_string && dispatch("selected", color_string);
 function request_eyedropper() {
   const eyeDropper = new EyeDropper();
   eyeDropper.open().then((result) => {

package/dist/shared/brush/ColorField.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         color: string;
-        current_mode?: ("hex" | "rgb" | "hsl") | undefined;
+        current_mode?: "hex" | "rgb" | "hsl";
     };
     events: {
         selected: CustomEvent<string>;
@@ -12,6 +12,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ColorFieldProps = typeof __propDef.props;
 export type ColorFieldEvents = typeof __propDef.events;

package/dist/shared/brush/ColorPicker.svelte

@@ -17,8 +17,7 @@ function handle_hue_down(event) {
   update_hue_from_mouse(event.clientX);
 }
 function update_hue_from_mouse(x) {
-  if (!hue_rect)
-    return;
+  if (!hue_rect) return;
   const _x = clamp(x - hue_rect.left, 0, hue_rect.width);
   hue_marker_pos = _x;
   const _hue = _x / hue_rect.width * 360;
@@ -41,8 +40,7 @@ function hsva_to_rgba(hsva) {
   return `rgba(${red * 255}, ${green * 255}, ${blue * 255}, ${hsva.a})`;
 }
 function update_color_from_mouse(x, y) {
-  if (!sl_rect)
-    return;
+  if (!sl_rect) return;
   const _x = clamp(x - sl_rect.left, 0, sl_rect.width);
   const _y = clamp(y - sl_rect.top, 0, sl_rect.height);
   sl_marker_pos = [_x, _y];
@@ -61,27 +59,19 @@ function handle_sl_down(event) {
   update_color_from_mouse(event.clientX, event.clientY);
 }
 function handle_move(event) {
-  if (sl_moving)
-    update_color_from_mouse(event.clientX, event.clientY);
-  if (hue_moving)
-    update_hue_from_mouse(event.clientX);
-  if (opacity_moving)
-    update_opacity_from_mouse(event.clientX);
+  if (sl_moving) update_color_from_mouse(event.clientX, event.clientY);
+  if (hue_moving) update_hue_from_mouse(event.clientX);
+  if (opacity_moving) update_opacity_from_mouse(event.clientX);
 }
 function handle_end() {
-  if (sl_moving)
-    sl_moving = false;
-  if (hue_moving)
-    hue_moving = false;
-  if (opacity_moving)
-    opacity_moving = false;
+  if (sl_moving) sl_moving = false;
+  if (hue_moving) hue_moving = false;
+  if (opacity_moving) opacity_moving = false;
 }
 async function update_mouse_from_color(color2) {
-  if (sl_moving || hue_moving)
-    return;
+  if (sl_moving || hue_moving) return;
   await tick();
-  if (!color2)
-    return;
+  if (!color2) return;
   if (!sl_rect) {
     sl_rect = sl_wrap.getBoundingClientRect();
   }
@@ -96,8 +86,7 @@ async function update_mouse_from_color(color2) {
   hue = hsva.h;
   hue_marker_pos = hsva.h / 360 * hue_rect.width;
 }
-$:
-  update_mouse_from_color(color);
+$: update_mouse_from_color(color);
 let sl_wrap;
 let hue_wrap;
 export let opacity = 1;
@@ -109,8 +98,7 @@ function handle_opacity_down(event) {
 }
 let opacity_rect = null;
 function update_opacity_from_mouse(x) {
-  if (!opacity_rect)
-    return;
+  if (!opacity_rect) return;
   const _x = clamp(x - opacity_rect.left, 0, opacity_rect.width);
   opacity = _x / opacity_rect.width;
 }

package/dist/shared/brush/ColorPicker.svelte.d.ts

@@ -1,13 +1,15 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        color?: string | undefined;
-        opacity?: number | undefined;
+        color?: string;
+        opacity?: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ColorPickerProps = typeof __propDef.props;
 export type ColorPickerEvents = typeof __propDef.events;

package/dist/shared/brush/ColorSwatch.svelte

@@ -9,8 +9,7 @@ export let show_empty = false;
 export let current_mode = "hex";
 export let color_picker = false;
 const dispatch = createEventDispatcher();
-$:
-  _colors = show_empty ? colors : colors.filter((c) => c);
+$: _colors = show_empty ? colors : colors.filter((c) => c);
 function get_color(color_input) {
   if (Array.isArray(color_input)) {
     return color_input[0];
@@ -36,8 +35,7 @@ function get_formatted_color(color, mode) {
 let current_index = `select-${colors.findIndex(
   (c) => get_formatted_color(c, current_mode) === get_formatted_color(selected_color, current_mode)
 )}`;
-$:
-  selected_opacity = get_opacity(selected_color);
+$: selected_opacity = get_opacity(selected_color);
 function handle_select(type, detail) {
   current_index = `${type}-${detail.index}`;
   dispatch(type, detail);

package/dist/shared/brush/ColorSwatch.svelte.d.ts

@@ -5,10 +5,10 @@ declare const __propDef: {
     props: {
         selected_color: string;
         colors: (ColorInput | ColorTuple)[];
-        user_colors?: ((ColorInput | ColorTuple)[] | null) | undefined;
-        show_empty?: boolean | undefined;
-        current_mode?: ("hex" | "rgb" | "hsl") | undefined;
-        color_picker?: boolean | undefined;
+        user_colors?: (ColorInput | ColorTuple)[] | null;
+        show_empty?: boolean;
+        current_mode?: "hex" | "rgb" | "hsl";
+        color_picker?: boolean;
     };
     events: {
         select: CustomEvent<{
@@ -25,6 +25,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ColorSwatchProps = typeof __propDef.props;
 export type ColorSwatchEvents = typeof __propDef.events;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.16.5",
+  "version": "0.17.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,14 +11,13 @@
     "pixi-filters": "^6.1.0",
     "pixi.js": "^8.7.3",
     "tinycolor2": "^1.6.0",
-    "@gradio/atoms": "^0.16.5",
-    "@gradio/client": "^1.17.1",
-    "@gradio/image": "^0.22.17",
-    "@gradio/statustracker": "^0.10.17",
-    "@gradio/upload": "^0.16.15",
+    "@gradio/atoms": "^0.18.0",
+    "@gradio/icons": "^0.14.0",
+    "@gradio/client": "^1.19.0",
+    "@gradio/image": "^0.23.0",
+    "@gradio/upload": "^0.17.0",
     "@gradio/utils": "^0.10.2",
-    "@gradio/icons": "^0.13.0",
-    "@gradio/wasm": "^0.18.1"
+    "@gradio/statustracker": "^0.11.1"
   },
   "devDependencies": {
     "@gradio/preview": "^0.14.0"