@gradio/core 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -1,4 +1,36 @@
 # @gradio/core
+
+## 1.0.2
+
+### Fixes
+
+- [#12515](https://github.com/gradio-app/gradio/pull/12515) [`0892c29`](https://github.com/gradio-app/gradio/commit/0892c297b35742ed5cabf64d0846fd36ae02ecea) - Fix plot Rendering + visibility bug.  Thanks @freddyaboulton!
+- [#12493](https://github.com/gradio-app/gradio/pull/12493) [`8a6cff6`](https://github.com/gradio-app/gradio/commit/8a6cff6738d09a6e708fc6351d806967fa82ca91) - Fix bug where cancelling an events shows an error in the UI.  Thanks @freddyaboulton!
+- [#12518](https://github.com/gradio-app/gradio/pull/12518) [`e8efab2`](https://github.com/gradio-app/gradio/commit/e8efab2cb19860146cec7946e77b34a599ad6258) - Fix Settings.  Thanks @freddyaboulton!
+- [#12491](https://github.com/gradio-app/gradio/pull/12491) [`4f6327b`](https://github.com/gradio-app/gradio/commit/4f6327be6815fc8d574b60272b02915c75359ace) - Load visible components in 6.0.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/button@0.6.0
+- @gradio/dropdown@0.10.7
+- @gradio/textbox@0.12.1
+- @gradio/tabs@0.5.3
+- @gradio/tabitem@0.6.3
+- @gradio/audio@0.21.0
+- @gradio/video@0.18.0
+- @gradio/checkbox@0.5.1
+
+## 1.0.1
+
+### Fixes
+
+- [#12416](https://github.com/gradio-app/gradio/pull/12416) [`7e867fd`](https://github.com/gradio-app/gradio/commit/7e867fde9070849fb474a08544c72f2522a9cbe9) - Fix custom components for gradio 6.  Thanks @pngwn!
+- [#12461](https://github.com/gradio-app/gradio/pull/12461) [`9a86e80`](https://github.com/gradio-app/gradio/commit/9a86e8064787029bc20b086c6f3191879f786e0f) - Fix Login Gradio 6.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/utils@0.10.4
+
 ## 1.0.0
 
 ### Features

package/dist/src/Blocks.svelte

@@ -40,7 +40,6 @@
 	import * as screen_recorder from "./screen_recorder";
 
 	import { DependencyManager } from "./dependency";
-
 	let {
 		root,
 		components,
@@ -105,27 +104,6 @@
 		}
 	});
 
-	let app_tree = new AppTree(
-		components,
-		layout,
-		dependencies,
-		{
-			root,
-			theme: theme_mode,
-			version,
-			api_prefix,
-			max_file_size,
-			autoscroll
-		},
-		app,
-		$reactive_formatter
-	);
-
-	setContext(GRADIO_ROOT, {
-		register: app_tree.register_component.bind(app_tree),
-		dispatcher: gradio_event_dispatcher
-	});
-
 	let messages: (ToastMessage & { fn_index: number })[] = $state([]);
 
 	function gradio_event_dispatcher(
@@ -138,11 +116,17 @@
 			// trigger_share(title, description);
 			// TODO: lets combine all of the into a log type with levels
 		} else if (event === "error") {
-			new_message("Error", data, -1, event, 10, true);
+			new_message("Error", data as string, -1, event, 10, true);
 		} else if (event === "warning") {
-			new_message("Warning", data, -1, event, 10, true);
+			new_message("Warning", data as string, -1, event, 10, true);
 		} else if (event === "info") {
-			new_message("Info", data, -1, event, 10, true);
+			new_message("Info", data as string, -1, event, 10, true);
+		} else if (event === "gradio_expand" || event === "gradio_tab_select") {
+			const id_ =
+				event === "gradio_expand"
+					? id
+					: (data as { component_id: number }).component_id;
+			app_tree.render_previously_invisible_children(id_);
 		} else if (event == "clear_status") {
 			app_tree.update_state(
 				id,
@@ -163,7 +147,7 @@
 			// so we need to pull out the correct id here.
 			if (event === "select" && id in app_tree.initial_tabs) {
 				// this is the id of the selected tab
-				id = data.id;
+				id = (data as { id: number }).id;
 			}
 			dep_manager.dispatch({
 				type: "event",
@@ -174,6 +158,28 @@
 		}
 	}
 
+	let app_tree = new AppTree(
+		components,
+		layout,
+		dependencies,
+		{
+			root,
+			theme: theme_mode,
+			version,
+			api_prefix,
+			max_file_size,
+			autoscroll
+		},
+		app,
+		$reactive_formatter,
+		gradio_event_dispatcher
+	);
+
+	setContext(GRADIO_ROOT, {
+		register: app_tree.register_component.bind(app_tree),
+		dispatcher: gradio_event_dispatcher
+	});
+
 	let api_calls: Payload[] = $state([]);
 	let last_api_call: Payload | null = $state(null);
 	// We need a callback to add to api_calls from the DependencyManager
@@ -239,8 +245,8 @@
 		if (!ApiDocs || !ApiRecorder) {
 			const api_docs_module = await import("./api_docs/ApiDocs.svelte");
 			const api_recorder_module = await import("./api_docs/ApiRecorder.svelte");
-			if (!ApiDocs) ApiDocs = api_docs_module.default;
-			if (!ApiRecorder) ApiRecorder = api_recorder_module.default;
+			if (!ApiDocs) ApiDocs = api_docs_module?.default;
+			if (!ApiRecorder) ApiRecorder = api_recorder_module?.default;
 		}
 	}
 
@@ -323,8 +329,10 @@
 
 	const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
 
-	const DUPLICATE_MESSAGE = $_("blocks.long_requests_queue");
-	const MOBILE_QUEUE_WARNING = $_("blocks.connection_can_break");
+	const DUPLICATE_MESSAGE = $reactive_formatter("blocks.long_requests_queue");
+	const MOBILE_QUEUE_WARNING = $reactive_formatter(
+		"blocks.connection_can_break"
+	);
 	const LOST_CONNECTION_MESSAGE =
 		"Connection to the server was lost. Attempting reconnection...";
 	const CHANGED_CONNECTION_MESSAGE =
@@ -332,7 +340,9 @@
 	const RECONNECTION_MESSAGE = "Connection re-established.";
 	const SESSION_NOT_FOUND_MESSAGE =
 		"Session not found - this is likely because the machine you were connected to has changed. <a href=''>Refresh the page</a> to continue.";
-	const WAITING_FOR_INPUTS_MESSAGE = $_("blocks.waiting_for_inputs");
+	const WAITING_FOR_INPUTS_MESSAGE = $reactive_formatter(
+		"blocks.waiting_for_inputs"
+	);
 	const SHOW_DUPLICATE_MESSAGE_ON_ETA = 15;
 	const SHOW_MOBILE_QUEUE_WARNING_ON_ETA = 10;
 	let is_mobile_device = false;
@@ -441,11 +451,11 @@
 						class="show-api"
 					>
 						{#if app.config?.mcp_server}
-							{$_("errors.use_via_api_or_mcp")}
+							{$reactive_formatter("errors.use_via_api_or_mcp")}
 						{:else}
-							{$_("errors.use_via_api")}
+							{$reactive_formatter("errors.use_via_api")}
 						{/if}
-						<img src={api_logo} alt={$_("common.logo")} />
+						<img src={api_logo} alt={$reactive_formatter("common.logo")} />
 					</button>
 				{/if}
 				{#if footer_links.includes("gradio")}
@@ -456,8 +466,8 @@
 						target="_blank"
 						rel="noreferrer"
 					>
-						{$_("common.built_with_gradio")}
-						<img src={logo} alt={$_("common.logo")} />
+						{$reactive_formatter("common.built_with_gradio")}
+						<img src={logo} alt={$reactive_formatter("common.logo")} />
 					</a>
 				{/if}
 				<button
@@ -467,8 +477,11 @@
 					}}
 					class="record"
 				>
-					{$_("common.stop_recording")}
-					<img src={record_stop} alt={$_("common.stop_recording")} />
+					{$reactive_formatter("common.stop_recording")}
+					<img
+						src={record_stop}
+						alt={$reactive_formatter("common.stop_recording")}
+					/>
 				</button>
 				<div class="divider">·</div>
 				{#if footer_links.includes("settings")}
@@ -482,8 +495,11 @@
 						}}
 						class="settings"
 					>
-						{$_("common.settings")}
-						<img src={settings_logo} alt={$_("common.settings")} />
+						{$reactive_formatter("common.settings")}
+						<img
+							src={settings_logo}
+							alt={$reactive_formatter("common.settings")}
+						/>
 					</button>
 				{/if}
 			</footer>
@@ -553,15 +569,16 @@
 					this={Settings}
 					bind:allow_zoom
 					bind:allow_video_trim
-					on:close={() => {
+					onclose={() => {
 						set_settings_visible(false);
 					}}
-					on:start_recording={() => {
+					start_recording={() => {
 						screen_recording();
 					}}
 					pwa_enabled={app.config.pwa}
 					{root}
 					{space_id}
+					i18n={$reactive_formatter}
 				/>
 			</div>
 		</div>

package/dist/src/Login.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import Form from "@gradio/form";
+	import { BaseForm } from "@gradio/form";
 	import { BaseTextbox as Textbox } from "@gradio/textbox";
 	import { BaseButton } from "@gradio/button";
-	import Column from "@gradio/column";
+	import { BaseColumn } from "@gradio/column";
 	import { Block } from "@gradio/atoms";
-	import { _ } from "svelte-i18n";
 	export let root: string;
 	export let auth_message: string | null;
 	export let app_mode: boolean;
 	export let space_id: string | null;
+	export let i18n: (s: string) => string;
 
 	let username = "";
 	let password = "";
@@ -34,23 +34,23 @@
 </script>
 
 <div class="wrap" class:min-h-screen={app_mode}>
-	<Column variant="panel" min_width={480}>
-		<h2>{$_("login.login")}</h2>
+	<BaseColumn variant="panel" min_width={480}>
+		<h2>{i18n("login.login")}</h2>
 		{#if auth_message}
 			<p class="auth">{@html auth_message}</p>
 		{/if}
 		{#if space_id}
 			<p class="auth">
-				{$_("login.enable_cookies")}
+				{i18n("login.enable_cookies")}
 			</p>
 		{/if}
 		{#if incorrect_credentials}
-			<p class="creds">{$_("login.incorrect_credentials")}</p>
+			<p class="creds">{i18n("login.incorrect_credentials")}</p>
 		{/if}
-		<Form>
+		<BaseForm>
 			<Block>
 				<Textbox
-					label={$_("login.username")}
+					label={i18n("login.username")}
 					lines={1}
 					show_label={true}
 					max_lines={1}
@@ -61,7 +61,7 @@
 
 			<Block>
 				<Textbox
-					label={$_("login.password")}
+					label={i18n("login.password")}
 					lines={1}
 					show_label={true}
 					max_lines={1}
@@ -70,12 +70,12 @@
 					bind:value={password}
 				/>
 			</Block>
-		</Form>
+		</BaseForm>
 
 		<BaseButton size="lg" variant="primary" on:click={submit}
-			>{$_("login.login")}</BaseButton
+			>{i18n("login.login")}</BaseButton
 		>
-	</Column>
+	</BaseColumn>
 </div>
 
 <style>

package/dist/src/Login.svelte.d.ts

@@ -16,6 +16,7 @@ declare const Login: $$__sveltets_2_IsomorphicComponent<{
     auth_message: string | null;
     app_mode: boolean;
     space_id: string | null;
+    i18n: (s: string) => string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/src/api_docs/Settings.svelte

@@ -7,17 +7,18 @@
 	import { language_choices, changeLocale } from "../i18n";
 	import { locale, _ } from "svelte-i18n";
 	import record from "./img/record.svg";
-	import { createEventDispatcher } from "svelte";
 
 	let {
 		root,
 		space_id,
 		pwa_enabled,
 		allow_zoom = $bindable(),
-		allow_video_trim = $bindable()
+		allow_video_trim = $bindable(),
+		onclose,
+		start_recording,
+		i18n
 	} = $props();
 
-	const dispatch = createEventDispatcher();
 	if (root === "") {
 		root = location.protocol + "//" + location.host + location.pathname;
 	}
@@ -34,6 +35,7 @@
 			url.searchParams.set("__theme", theme);
 			current_theme = theme;
 		}
+		url.searchParams.delete("view");
 		window.location.href = url.toString();
 	}
 
@@ -59,8 +61,8 @@
 		}
 	});
 
-	function handleLanguageChange(e: CustomEvent): void {
-		const new_locale = e.detail;
+	function handleLanguageChange(value: string): void {
+		const new_locale = value;
 		changeLocale(new_locale);
 	}
 
@@ -74,54 +76,51 @@
 </script>
 
 <div class="banner-wrap">
-	<SettingsBanner on:close {root} />
+	<SettingsBanner onclose={() => onclose()} {root} />
 </div>
 {#if space_id === null}
 	<!-- on Spaces, the theme is set in HF settings -->
 	<div class="banner-wrap">
-		<h2>{$_("common.display_theme")}</h2>
-		<p class="padded theme-buttons">
+		<h2>{i18n("common.display_theme")}</h2>
+		<ul class="padded theme-buttons">
 			<li
 				class="theme-button {current_theme === 'light'
 					? 'current-theme'
 					: 'inactive-theme'}"
-				on:click={() => setTheme("light")}
 			>
-				<button>☀︎ &nbsp;Light</button>
+				<button on:click={() => setTheme("light")}>☀︎ &nbsp;Light</button>
 			</li>
 			<li
 				class="theme-button {current_theme === 'dark'
 					? 'current-theme'
 					: 'inactive-theme'}"
-				on:click={() => setTheme("dark")}
 			>
-				<button>⏾ &nbsp; Dark</button>
+				<button on:click={() => setTheme("dark")}>⏾ &nbsp; Dark</button>
 			</li>
 			<li
 				class="theme-button {current_theme === 'system'
 					? 'current-theme'
 					: 'inactive-theme'}"
-				on:click={() => setTheme("system")}
 			>
-				<button>🖥︎ &nbsp;System</button>
+				<button on:click={() => setTheme("system")}>🖥︎ &nbsp;System</button>
 			</li>
-		</p>
+		</ul>
 	</div>
 {/if}
 <div class="banner-wrap">
-	<h2>{$_("common.language")}</h2>
+	<h2>{i18n("common.language")}</h2>
 	<p class="padded">
 		<Dropdown
 			label="Language"
 			choices={language_choices}
 			show_label={false}
-			value={current_locale}
-			on:change={handleLanguageChange}
+			bind:value={current_locale}
+			on_change={() => handleLanguageChange(current_locale)}
 		/>
 	</p>
 </div>
 <div class="banner-wrap">
-	<h2>{$_("common.pwa")}</h2>
+	<h2>{i18n("common.pwa")}</h2>
 	<p class="padded">
 		{#if pwa_enabled}
 			You can install this app as a Progressive Web App on your device. Visit <a
@@ -135,7 +134,7 @@
 	</p>
 </div>
 <div class="banner-wrap">
-	<h2>{$_("common.screen_studio")} <span class="beta-tag">beta</span></h2>
+	<h2>{i18n("common.screen_studio")} <span class="beta-tag">beta</span></h2>
 	<p class="padded">
 		Screen Studio allows you to record your screen and generates a video of your
 		app with automatically adding zoom in and zoom out effects as well as
@@ -164,8 +163,8 @@
 	<button
 		class="record-button"
 		on:click={() => {
-			dispatch("close");
-			dispatch("start_recording");
+			onclose?.();
+			start_recording?.();
 		}}
 	>
 		<img src={record} alt="Start Recording" />

package/dist/src/api_docs/Settings.svelte.d.ts

@@ -1,27 +1,12 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Settings: $$__sveltets_2_IsomorphicComponent<{
+declare const Settings: import("svelte").Component<{
     root: any;
     space_id: any;
     pwa_enabled: any;
     allow_zoom?: any;
     allow_video_trim?: any;
-}, {
-    close: CustomEvent<any>;
-    start_recording: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "allow_zoom" | "allow_video_trim">;
-type Settings = InstanceType<typeof Settings>;
+    onclose: any;
+    start_recording: any;
+    i18n: any;
+}, {}, "allow_zoom" | "allow_video_trim">;
+type Settings = ReturnType<typeof Settings>;
 export default Settings;

package/dist/src/api_docs/SettingsBanner.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import { _ } from "svelte-i18n";
 	import settings_logo from "./img/settings-logo.svg";
 	import Clear from "./img/clear.svelte";
 	import { setupi18n } from "../i18n";
 
-	export let root: string;
+	let { root, onclose }: { root: string; onclose?: () => void } = $props();
 
-	const dispatch = createEventDispatcher();
 	setupi18n();
 </script>
 
@@ -21,7 +19,7 @@
 	</div>
 </h2>
 
-<button on:click={() => dispatch("close")}>
+<button on:click={() => onclose?.()}>
 	<Clear />
 </button>
 

package/dist/src/api_docs/SettingsBanner.svelte.d.ts

@@ -1,22 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SettingsBanner: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     root: string;
-}, {
-    close: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SettingsBanner = InstanceType<typeof SettingsBanner>;
+    onclose?: () => void;
+};
+declare const SettingsBanner: import("svelte").Component<$$ComponentProps, {}, "">;
+type SettingsBanner = ReturnType<typeof SettingsBanner>;
 export default SettingsBanner;

package/dist/src/dependency.d.ts

@@ -2,7 +2,7 @@ import type { ComponentMeta, Dependency as IDependency, LayoutNode, Payload } fr
 import { Client, type client_return } from "@gradio/client";
 import { LoadingStatus } from "@gradio/statustracker";
 import type { ToastMessage } from "@gradio/statustracker";
-import type { StatusMessage } from "@gradio/client";
+import type { StatusMessage, LogMessage } from "@gradio/client";
 /**
  * A dependency as used by the frontend
  * This class represents a discrete dependency that can be triggered by an event
@@ -58,6 +58,10 @@ interface DispatchEvent {
     target_id?: number;
     event_data: unknown;
 }
+type UpdateStateCallback = (id: number, state: Record<string, unknown>, check_visibility?: boolean) => Promise<void>;
+type GetStateCallback = (id: number) => Promise<Record<string, unknown> | null>;
+type RerenderCallback = (components: ComponentMeta[], layout: LayoutNode) => void;
+type LogCallback = (title: string, message: string, fn_index: number, type: ToastMessage["type"], duration?: number | null, visible?: boolean) => void;
 /**
  * Manages all dependencies for an app acting as a bridge between app state and Dependencies
  * Responsible for registering dependencies and dispatching events to them
@@ -77,13 +81,13 @@ export declare class DependencyManager {
     client: Client;
     queue: Set<number>;
     add_to_api_calls: (payload: Payload) => void;
-    update_state_cb: (id: number, state: Record<string, unknown>, check_visibility?: boolean) => Promise<void>;
-    get_state_cb: (id: number) => Promise<Record<string, unknown> | null>;
-    rerender_cb: (components: ComponentMeta[], layout: LayoutNode) => void;
-    log_cb: (title: string, message: string, fn_index: number, type: ToastMessage["type"], duration?: number | null, visible?: boolean) => void;
+    update_state_cb: UpdateStateCallback;
+    get_state_cb: GetStateCallback;
+    rerender_cb: RerenderCallback;
+    log_cb: LogCallback;
     loading_stati: LoadingStatus;
     constructor(dependencies: IDependency[], client: Client, update_state_cb: (id: number, state: Record<string, unknown>, check_visibility?: boolean) => Promise<void>, get_state_cb: (id: number) => Promise<Record<string, unknown> | null>, rerender_cb: (components: ComponentMeta[], layout: LayoutNode) => void, log_cb: (title: string, message: string, fn_index: number, type: ToastMessage["type"], duration?: number | null, visible?: boolean) => void, add_to_api_calls: (payload: Payload) => void);
-    reload(dependencies: IDependency[], update_state: any, get_state: any, rerender: any, client: any): void;
+    reload(dependencies: IDependency[], update_state: UpdateStateCallback, get_state: GetStateCallback, rerender: RerenderCallback, client: Client): void;
     register_loading_stati(deps: Map<number, Dependency>): void;
     clear_loading_status(component_id: number): void;
     update_loading_stati_state(): Promise<void>;

package/dist/src/dependency.js

@@ -125,6 +125,7 @@ export class DependencyManager {
         this.update_state_cb = update_state_cb;
         this.get_state_cb = get_state_cb;
         this.rerender_cb = rerender_cb;
+        this.client = client;
         this.reload(dependencies, update_state_cb, get_state_cb, rerender_cb, client);
     }
     reload(dependencies, update_state, get_state, rerender, client) {
@@ -344,7 +345,9 @@ export class DependencyManager {
                                         return;
                                     }
                                     const _message = result?.message?.replace(MESSAGE_QUOTE_RE, (_, b) => b);
-                                    this.log_cb(result._title ?? "Error", _message, fn_index, "error", status.duration, status.visible);
+                                    this.log_cb(
+                                    //@ts-ignore
+                                    result?._title ?? "Error", _message || "", fn_index, "error", status.duration, status.visible);
                                     throw new Error("Dependency function failed");
                                 }
                                 else {
@@ -555,6 +558,14 @@ export class DependencyManager {
             const submission = this.submissions.get(id);
             if (submission) {
                 await submission.cancel();
+                this.loading_stati.update({
+                    status: "complete",
+                    fn_index: id,
+                    eta: 0,
+                    queue: false,
+                    stream_state: null
+                });
+                this.update_loading_stati_state();
                 this.submissions.delete(id);
             }
         }

package/dist/src/init.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentMeta, ProcessedComponentMeta, LayoutNode, Dependency, AppConfig, ServerFunctions } from "./types";
-import type { SharedProps } from "@gradio/utils";
+import { type SharedProps } from "@gradio/utils";
 import { Client } from "@gradio/client";
 type client_return = Awaited<ReturnType<typeof Client.connect>>;
 type set_data_type = (data: Record<string, unknown>) => void;
@@ -13,6 +13,7 @@ type Tab = {
     elem_id: string | undefined;
     scale: number | null;
     order?: number;
+    component_id: number;
 };
 export declare class AppTree {
     #private;
@@ -21,14 +22,15 @@ export declare class AppTree {
     client: client_return;
     /** the root node of the processed layout tree */
     root: ProcessedComponentMeta | undefined;
+    root_untracked: ProcessedComponentMeta;
     component_ids: number[];
     initial_tabs: Record<number, Tab[]>;
     components_to_register: Set<number>;
     ready: Promise<void>;
     ready_resolve: () => void;
     resolved: boolean;
-    constructor(components: ComponentMeta[], layout: LayoutNode, dependencies: Dependency[], config: AppConfig, app: client_return, reactive_formatter: (str: string) => string);
-    reload(components: ComponentMeta[], layout: LayoutNode, dependencies: Dependency[], config: AppConfig): void;
+    constructor(components: ComponentMeta[], layout: LayoutNode, dependencies: Dependency[], config: Omit<AppConfig, "api_url">, app: client_return, reactive_formatter: (str: string) => string, event_dispatcher: (id: number, event: string, data: unknown) => void);
+    reload(components: ComponentMeta[], layout: LayoutNode, dependencies: Dependency[], config: Omit<AppConfig, "api_url">): void;
     /**
      * Registers a component with its ID and data callbacks
      * @param id the ID of the component
@@ -59,6 +61,7 @@ export declare class AppTree {
      */
     create_node(opts: LayoutNode, component_map: Map<number, ComponentMeta>, root?: boolean, reactive_formatter?: (str: string) => string): ProcessedComponentMeta;
     rerender(components: ComponentMeta[], layout: LayoutNode): void;
+    update_visibility(node: ProcessedComponentMeta, new_state: any): Promise<void>;
     update_state(id: number, new_state: Partial<SharedProps> & Record<string, unknown>, check_visibility?: boolean): Promise<void>;
     /**
      * Gets the current state of a component by its ID
@@ -66,6 +69,7 @@ export declare class AppTree {
      * @returns the current state of the component, or null if not found
      */
     get_state(id: number): Promise<Record<string, unknown> | null>;
+    render_previously_invisible_children(id: number): Promise<void>;
 }
 /**
  * Process the server function names and return a dictionary of functions