Fix editor and consolidate file upload widget

src/lib/components/ImageUpload.svelte

@@ -33,6 +33,7 @@
 		uploaded: ComfyImageLocation[];
 		upload_error: any;
 		clear: undefined;
+		image_clicked: undefined;
 	}>();
 
  if (value) {
@@ -58,6 +59,10 @@
      dispatch("clear")
  }
 
+ function onImgClicked() {
+     dispatch("image_clicked")
+ }
+
  interface GradioUploadResponse {
      error?: string;
      files?: Array<ComfyImageLocation>;
@@ -205,6 +210,7 @@
                 <ModifyUpload on:clear={handle_clear} absolute />
                 <img src={convertComfyOutputToComfyURL(firstImage)}
                      alt={firstImage.filename}
+                     on:click={onImgClicked}
                      bind:this={imgElem}
                      bind:naturalWidth={imgWidth}
                      bind:naturalHeight={imgHeight}

src/lib/components/Modal.svelte

@@ -4,7 +4,7 @@
 
 	export let showModal; // boolean
 	export let closeOnClick = true; // boolean
-	export let showCloseButton = true; // boolean
+    export const closeDialog = _ => doClose();
 
 	let dialog; // HTMLDialogElement
 
@@ -32,19 +32,21 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <dialog
-	bind:this={dialog}
-	on:close={close}
+    bind:this={dialog}
+    on:close={close}
     on:cancel={doClose}
-	on:click|self={close}
+    on:click|self={close}
 >
-	<div on:click|stopPropagation>
-		<slot name="header" />
-		<slot />
-		<!-- svelte-ignore a11y-autofocus -->
-        {#if showCloseButton}
-            <Button variant="secondary" on:click={doClose}>Close</Button>
-        {/if}
-	</div>
+    <div on:click|stopPropagation>
+        <slot name="header" />
+        <slot />
+        <div class="button-row">
+            <slot name="buttons">
+                <!-- svelte-ignore a11y-autofocus -->
+                <Button variant="secondary" on:click={doClose}>Close</Button>
+            </slot>
+        </div>
+    </div>
 </dialog>
 
 <style>
@@ -53,6 +55,7 @@
 		border-radius: 0.2em;
 		border: none;
 		padding: 0;
+        overflow: hidden;
 	}
 	dialog::backdrop {
 		background: rgba(0, 0, 0, 0.3);
@@ -85,4 +88,10 @@
 	button {
 		display: block;
 	}
+
+ .button-row {
+     display: flex;
+     flex-direction: row;
+     gap: var(--spacing-sm);
+ }
 </style>

src/lib/components/NumberInput.svelte

@@ -0,0 +1,110 @@
+
+<script lang="ts">
+	import { BlockTitle } from "@gradio/atoms";
+	import { createEventDispatcher } from "svelte";
+
+ export let value: number = 0;
+ export let min: number = -1024
+ export let max: number = 1024
+ export let step: number = 1;
+ export let label: string = "";
+ export let disabled: boolean = false;
+ let inputValue = value;
+
+ const dispatch = createEventDispatcher<{ change: number; release: number }>();
+
+ function handle_input(e: Event) {
+     const element = e.currentTarget as HTMLInputElement;
+     let newValue = parseFloat(element.value);
+     if (isNaN(newValue)) {
+         newValue = min;
+     }
+     inputValue = Math.min(Math.max(inputValue, min), max);
+     value = inputValue;
+     dispatch("release", value);
+ }
+
+ function handle_release(e: MouseEvent) {
+     dispatch("release", value);
+ }
+
+ $: {
+     inputValue = value;
+     dispatch("change", value);
+ }
+
+ const clamp = () => {
+     value = Math.min(Math.max(value, min), max);
+     dispatch("release", value);
+ };
+</script>
+
+<div class="wrap">
+    <div class="head">
+        <label>
+            <BlockTitle>{label}</BlockTitle>
+        </label>
+        <input
+            data-testid="number-input"
+            type="number"
+            bind:value={inputValue}
+            on:input={handle_input}
+            min={min}
+            max={max}
+            on:blur={clamp}
+            {step}
+            {disabled}
+            on:pointerup={handle_release}
+        />
+    </div>
+</div>
+
+<style lang="scss">
+ .wrap {
+     display: flex;
+     flex-direction: column;
+     width: 100%;
+     height: 100%;
+ }
+
+ .head {
+     display: flex;
+
+     > label {
+         padding: 0.5rem 1.0rem;
+     }
+ }
+ input[type="number"] {
+     display: block;
+     width: 100%;
+     position: relative;
+     outline: none !important;
+     box-shadow: var(--input-shadow);
+     border: var(--input-border-width) solid var(--input-border-color);
+     border-radius: var(--input-radius);
+     background: var(--input-background-fill);
+     padding: var(--size-2) var(--size-2);
+     color: var(--body-text-color);
+     font-size: var(--input-text-size);
+     line-height: var(--line-sm);
+     text-align: center;
+ }
+ input:disabled {
+     -webkit-text-fill-color: var(--body-text-color);
+     -webkit-opacity: 1;
+     opacity: 1;
+ }
+
+ input[type="number"]:focus {
+     box-shadow: var(--input-shadow-focus);
+     border-color: var(--input-border-color-focus);
+ }
+
+ input::placeholder {
+     color: var(--input-placeholder-color);
+ }
+
+ input[disabled] {
+     cursor: not-allowed;
+ }
+</style>

src/lib/components/gradio/app/Column.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { create_classes } from "@gradio/utils";
+	import type { Styles } from "@gradio/utils";
+
+	export let scale: number = 1;
+	export let min_width: number = 0;
+	export let elem_id: string = "";
+	export let elem_classes: Array<string> = [];
+	export let visible: boolean = true;
+	export let variant: "default" | "panel" | "compact" = "default";
+	export let style: Styles = {};
+</script>
+
+<div
+	id={elem_id}
+	class={elem_classes.join(" ")}
+	class:gap={style.gap !== false}
+	class:compact={variant === "compact"}
+	class:panel={variant === "panel"}
+	class:hide={!visible}
+	style={`min-width: min(${min_width}px, 100%); flex-grow: ${scale}`}
+>
+	<slot />
+</div>
+
+<style>
+	div {
+		display: flex;
+		position: relative;
+		flex-direction: column;
+	}
+
+	div > :global(*),
+	div > :global(.form > *) {
+		width: var(--size-full);
+	}
+
+	.gap {
+		gap: var(--layout-gap);
+	}
+
+	.hide {
+		display: none;
+	}
+
+	.compact > :global(*),
+	.compact :global(.box) {
+		border-radius: 0;
+	}
+
+	.compact,
+	.panel {
+		border: solid var(--panel-border-width) var(--panel-border-color);
+		border-radius: var(--container-radius);
+		background: var(--panel-background-fill);
+		padding: var(--spacing-lg);
+	}
+</style>

src/lib/components/gradio/app/Row.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { Styles } from "@gradio/utils";
+
+	export let style: Styles = {};
+	export let elem_id: string;
+	export let elem_classes: Array<string> = [];
+	export let visible: boolean = true;
+	export let variant: "default" | "panel" | "compact" = "default";
+    export let min_width: string = "160px";
+</script>
+
+<div
+	class:compact={variant === "compact"}
+	class:panel={variant === "panel"}
+	class:unequal-height={style.equal_height === false}
+	class:stretch={style.equal_height}
+	class:hide={!visible}
+	id={elem_id}
+	class={elem_classes.join(" ")}
+    style="--row-min-width: {min_width}"
+>
+	<slot />
+</div>
+
+<style>
+	div {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--layout-gap);
+		width: var(--size-full);
+	}
+
+	.hide {
+		display: none;
+	}
+	.compact > :global(*),
+	.compact :global(.box) {
+		border-radius: 0;
+	}
+	.compact,
+	.panel {
+		border-radius: var(--container-radius);
+		background: var(--background-fill-secondary);
+		padding: var(--size-2);
+	}
+	.unequal-height {
+		align-items: flex-start;
+	}
+
+	.stretch {
+		align-items: stretch;
+	}
+
+	div > :global(*),
+	div > :global(.form > *) {
+		flex: 1 1 0%;
+		flex-wrap: wrap;
+		min-width: min(--row-min-width, 100%);
+	}
+</style>