@gradio/core 0.27.2 → 0.29.0

package/src/init.ts

@@ -12,6 +12,7 @@ import { load_component } from "virtual:component-loader";
 import type { client_return } from "@gradio/client";
 import { create_loading_status_store } from "./stores";
 import { _ } from "svelte-i18n";
+import { i18n_marker } from "./i18n";
 
 export interface UpdateTransaction {
 	id: number;
@@ -88,14 +89,13 @@ export function create_components(
 		value_change_cb = cb;
 	}
 
-	// Store current layout and root for dynamic visibility recalculation
 	let current_layout: LayoutNode;
 	let current_root: string;
 
 	function set_event_specific_args(dependencies: Dependency[]): void {
 		dependencies.forEach((dep) => {
 			dep.targets.forEach((target) => {
-				const instance = instance_map[target[0]];
+				const instance = instance_map?.[target[0]];
 				if (instance && dep.event_specific_args?.length > 0) {
 					dep.event_specific_args?.forEach((arg: string) => {
 						instance.props[arg] = dep[arg as keyof Dependency];
@@ -122,15 +122,12 @@ export function create_components(
 			fill_height: boolean;
 		};
 	}): Promise<void> {
-		// make sure the state is settled before proceeding
 		flush();
 		app = _app;
 
 		if (instance_map) {
-			// re-render in reload mode
 			components.forEach((c) => {
 				if (c.props.value == null && c.key) {
-					// If the component has a key, we preserve its value by finding a matching instance with the same key
 					const matching_instance = Object.values(instance_map).find(
 						(instance) => instance.key === c.key
 					);
@@ -149,14 +146,17 @@ export function create_components(
 		_component_map = new Map();
 		instance_map = {};
 
-		// Store current layout and root for dynamic visibility recalculation
 		current_layout = layout;
 		current_root = root;
 
 		_rootNode = {
 			id: layout.id,
 			type: "column",
-			props: { interactive: false, scale: options.fill_height ? 1 : null },
+			props: {
+				interactive: false,
+				scale: options.fill_height ? 1 : null,
+				visible: true
+			},
 			has_modes: false,
 			instance: null as unknown as ComponentMeta["instance"],
 			component: null as unknown as ComponentMeta["component"],
@@ -257,7 +257,7 @@ export function create_components(
 
 		target_map.set(_target_map);
 
-		let current_element = instance_map[layout.id];
+		let current_element = instance_map?.[layout.id];
 		let all_current_children: ComponentMeta[] = [];
 		const add_to_current_children = (component: ComponentMeta): void => {
 			all_current_children.push(component);
@@ -276,7 +276,7 @@ export function create_components(
 					(c) => c.key === component.key
 				);
 				if (component.key != null && replacement_component !== undefined) {
-					const instance = instance_map[component.id];
+					const instance = instance_map?.[component.id];
 					for (const prop in replacement_component.props) {
 						if (
 							!(
@@ -289,7 +289,7 @@ export function create_components(
 						}
 					}
 				} else {
-					delete instance_map[_id];
+					if (instance_map) delete instance_map[_id];
 					if (_component_map.has(_id)) {
 						_component_map.delete(_id);
 					}
@@ -298,17 +298,18 @@ export function create_components(
 		});
 
 		const components_to_add = new_components.concat(
-			replacement_components.filter((c) => !instance_map[c.id])
+			replacement_components.filter((c) => !instance_map?.[c.id])
 		);
 
 		components_to_add.forEach((c) => {
 			instance_map[c.id] = c;
+
 			_component_map.set(c.id, c);
 		});
 		if (current_element.parent) {
 			current_element.parent.children![
 				current_element.parent.children!.indexOf(current_element)
-			] = instance_map[layout.id];
+			] = instance_map?.[layout.id];
 		}
 
 		walk_layout(
@@ -332,7 +333,7 @@ export function create_components(
 		components: ComponentMeta[],
 		parent?: ComponentMeta
 	): Promise<ComponentMeta> {
-		const instance = instance_map[node.id];
+		const instance = instance_map?.[node.id];
 		if (!instance.component) {
 			const constructor_key = instance.component_class_id || instance.type;
 			let component_constructor = constructor_map.get(constructor_key);
@@ -379,10 +380,13 @@ export function create_components(
 			);
 		}
 
-		if (instance.type === "tabs" && !instance.props.initial_tabs) {
+		if (
+			(instance.type === "tabs" && !instance.props.initial_tabs) ||
+			(instance.type === "walkthrough" && !instance.props.initial_tabs)
+		) {
 			const tab_items_props =
 				node.children?.map((c, i) => {
-					const instance = instance_map[c.id];
+					const instance = instance_map?.[c.id];
 					instance.props.id ??= c.id;
 					return {
 						type: instance.type,
@@ -394,23 +398,29 @@ export function create_components(
 					};
 				}) || [];
 
+			const _type =
+				instance.type === "walkthrough" ? "walkthroughstep" : "tabitem";
+
 			const child_tab_items = tab_items_props.filter(
-				(child) => child.type === "tabitem"
+				(child) => child.type === _type
 			);
 
 			instance.props.initial_tabs = child_tab_items?.map((child) => ({
-				label: child.props.label,
+				label: child.props.label.includes(i18n_marker) ? "" : child.props.label,
 				id: child.props.id,
 				visible:
-					typeof child.props.visible === "boolean" ? child.props.visible : true,
+					typeof child.props.visible === "boolean" ||
+					child.props.visible === "hidden"
+						? child.props.visible
+						: true,
 				interactive: child.props.interactive,
 				order: child.props.order
 			}));
 		}
 
-		if (instance.type === "tabs") {
+		if (instance.type === "tabs" || instance.type === "walkthrough") {
 			node.children?.forEach((c, i) => {
-				const child = instance_map[c.id];
+				const child = instance_map?.[c.id];
 				child.props.order = i;
 			});
 		}
@@ -438,7 +448,6 @@ export function create_components(
 		for (const component of components_to_load) {
 			const constructor_key = component.component_class_id || component.type;
 
-			// Only load if not already loaded
 			if (!constructor_map.has(constructor_key)) {
 				const { component: loadable_component, example_components } =
 					get_component(
@@ -456,7 +465,6 @@ export function create_components(
 					}
 				}
 
-				// Load the component if it doesn't exist yet
 				if (!component.component) {
 					component.component = (await loadable_component)?.default;
 				}
@@ -476,13 +484,11 @@ export function create_components(
 	function has_visibility_changes(updates: UpdateTransaction[][]): boolean {
 		return updates.some((update_batch) =>
 			update_batch.some((update) => {
-				const instance = instance_map[update.id];
+				const instance = instance_map?.[update.id];
 				if (!instance) return false;
 
-				// Check for visibility property changes
 				if (update.prop === "visible") return true;
 
-				// Check for selected tab changes in tabs components
 				if (update.prop === "selected" && instance.type === "tabs") return true;
 
 				return false;
@@ -497,7 +503,6 @@ export function create_components(
 			? [..._component_map.values()]
 			: _components;
 
-		// Capture current visibility state before applying updates
 		if (had_visibility_changes && current_layout) {
 			previous_visible_ids = determine_visible_components(
 				current_layout,
@@ -510,7 +515,7 @@ export function create_components(
 				for (let j = 0; j < pending_updates[i].length; j++) {
 					const update = pending_updates[i][j];
 					if (!update) continue;
-					const instance = instance_map[update.id];
+					const instance = instance_map?.[update.id];
 					if (!instance) continue;
 					let new_value;
 					const old_value = instance.props[update.prop];
@@ -533,10 +538,10 @@ export function create_components(
 					}
 				}
 			}
+
 			return layout;
 		});
 
-		// After applying updates, check if we need to load new components
 		if (had_visibility_changes && current_layout && previous_visible_ids) {
 			raf(async () => {
 				const new_visible_ids = determine_visible_components(
@@ -545,17 +550,14 @@ export function create_components(
 				);
 				const newly_visible_ids = new Set<number>();
 
-				// Find components that are now visible but weren't before
 				for (const id of new_visible_ids) {
 					if (!previous_visible_ids!.has(id)) {
 						newly_visible_ids.add(id);
 					}
 				}
 
-				// Load the newly visible components
 				await load_newly_visible_components(newly_visible_ids, all_components);
 
-				// Trigger a layout update to render the newly loaded components
 				if (newly_visible_ids.size > 0) {
 					layout_store.update((layout) => layout);
 				}
@@ -898,13 +900,11 @@ function get_selected_tab_id(
 	layout: LayoutNode,
 	components: ComponentMeta[]
 ): string | number | undefined {
-	// Check if selected prop is a string or number
 	const selected = component.props.selected;
 	if (typeof selected === "string" || typeof selected === "number") {
 		return selected;
 	}
 
-	// If no tab is explicitly selected, find the first visible and interactive tab
 	if (layout.children) {
 		for (const child of layout.children) {
 			const child_component = components.find((c) => c.id === child.id);
@@ -967,27 +967,42 @@ function determine_visible_components(
 	parent_tabs_context?: { selected_tab_id?: string | number }
 ): Set<number> {
 	const visible_components: Set<number> = new Set();
+
 	const component = components.find((c) => c.id === layout.id);
 
 	if (!component) {
 		return visible_components;
 	}
 
-	// Check if the component itself is visible
 	const component_visible =
-		parent_visible &&
-		(typeof component.props.visible === "boolean"
-			? component.props.visible
-			: true);
+		component.props.visible !== false &&
+		component.props.visible !== "hidden" &&
+		parent_visible;
+
+	const should_load = component.props.visible === "hidden" || component_visible;
+
+	if (!should_load) {
+		return visible_components;
+	}
+
+	if (component.type === "tabs") {
+		const selected_tab_id = get_selected_tab_id(component, layout, components);
+		const tabs_context = { selected_tab_id };
+
+		visible_components.add(layout.id);
 
-	// Handle tab_item special case
-	if (component.type === "tabitem") {
+		const child_visible = process_children_visibility(
+			layout,
+			components,
+			tabs_context
+		);
+		child_visible.forEach((id) => visible_components.add(id));
+	} else if (component.type === "tabitem") {
 		if (
 			is_tab_item_visible(component, component_visible, parent_tabs_context)
 		) {
-			visible_components.add(component.id);
+			visible_components.add(layout.id);
 
-			// Process children if this tab item is visible
 			const child_visible = process_children_visibility(
 				layout,
 				components,
@@ -995,36 +1010,9 @@ function determine_visible_components(
 			);
 			child_visible.forEach((id) => visible_components.add(id));
 		}
-		// If tab item is not visible, none of its children should be loaded
-		return visible_components;
-	}
-
-	// Handle tabs component
-	if (component.type === "tabs") {
-		if (component_visible) {
-			visible_components.add(component.id);
-
-			// Determine which tab should be selected
-			const selected_tab_id = get_selected_tab_id(
-				component,
-				layout,
-				components
-			);
-
-			// Process children with tabs context
-			const child_visible = process_children_visibility(layout, components, {
-				selected_tab_id
-			});
-			child_visible.forEach((id) => visible_components.add(id));
-		}
-		return visible_components;
-	}
-
-	// For regular components
-	if (component_visible) {
-		visible_components.add(component.id);
+	} else {
+		visible_components.add(layout.id);
 
-		// Process children if this component is visible
 		const child_visible = process_children_visibility(
 			layout,
 			components,
@@ -1032,7 +1020,6 @@ function determine_visible_components(
 		);
 		child_visible.forEach((id) => visible_components.add(id));
 	}
-	// If component is not visible, don't process children
 
 	return visible_components;
 }
@@ -1051,13 +1038,11 @@ export function preload_visible_components(
 ): Map<ComponentMeta["type"], LoadingComponent> {
 	let constructor_map: Map<ComponentMeta["type"], LoadingComponent> = new Map();
 
-	// Determine which components should be visible
 	const visible_component_ids = determine_visible_components(
 		layout,
 		components
 	);
 
-	// Only preload visible components
 	components.forEach((c) => {
 		if (visible_component_ids.has(c.id)) {
 			const { component, example_components } = get_component(
@@ -1113,6 +1098,9 @@ export function preload_all_components(
 }
 
 function is_visible(component: ComponentMeta): boolean {
+	if (component.props.visible === "hidden") {
+		return true;
+	}
 	if (
 		typeof component.props.visible === "boolean" &&
 		component.props.visible === false

package/src/lang/ar.json

@@ -2,7 +2,7 @@
 	"_name": "العربية",
 	"3D_model": {
 		"3d_model": "نموذج ثلاثي الأبعاد",
-		"drop_to_upload": "اسقط ملف نموذج 3D (.obj، .glb، .stl، .gltf، .splat، أو .ply) هنا للتحميل"
+		"drop_to_upload": "اسقط ملف نموذج ثلاثي الأبعاد 3D (.obj، .glb، .stl، .gltf، .splat، أو .ply) هنا للتحميل"
 	},
 	"annotated_image": {
 		"annotated_image": "صورة مشروحة"
@@ -23,10 +23,10 @@
 		"drop_to_upload": "اسقط ملف صوت هنا للتحميل"
 	},
 	"blocks": {
-		"connection_can_break": "على الهاتف المحمول، يمكن أن ينقطع الاتصال إذا تم تغيير التبويب أو دخل الجهاز في وضع السكون، مما يؤدي إلى فقدان موقعك في قائمة الانتظار.",
-		"long_requests_queue": "هناك قائمة انتظار طويلة من الطلبات المعلقة. قم بتكرار هذا الفضاء للتخطي.",
-		"lost_connection": "فقد الاتصال بسبب مغادرة الصفحة. إعادة الانضمام إلى قائمة الانتظار...",
-		"waiting_for_inputs": "انتظار انتهاء تحميل الملف(ات)، يرجى إعادة المحاولة."
+		"connection_can_break": "على الهاتف المحمول، يمكن أن ينقطع الاتصال إذا تم تغيير التبويب لهذه الصفحةة أو دخل الجهاز في وضع السكون، مما يؤدي إلى فقدان موقعك في قائمة الانتظار.",
+		"long_requests_queue": "هناك قائمة انتظار طويلة من الطلبات المعلقة. قم بنسخ هذه المساحة للتخطي.",
+		"lost_connection": "تم فقدان الاتصال بسبب مغادرة الصفحة. جارٍ إعادة الانضمام إلى قائمة الانتظار...",
+		"waiting_for_inputs": "إنتظر انتهاء رفع الملف(ات)، يرجى إعادة المحاولة."
 	},
 	"checkbox": {
 		"checkbox": "خانة اختيار",
@@ -40,9 +40,9 @@
 	},
 	"common": {
 		"built_with": "بُني باستخدام",
-		"built_with_gradio": "تم الإنشاء بإستخدام Gradio",
+		"built_with_gradio": "بني بإستخدام Gradio",
 		"clear": "أمسح",
-		"download": "تحميل",
+		"download": "تنزيل",
 		"edit": "تعديل",
 		"empty": "فارغ",
 		"error": "خطأ",
@@ -58,7 +58,12 @@
 		"no_devices": "لم يتم العثور على أجهزة",
 		"language": "اللغة",
 		"display_theme": "مظهر العرض",
-		"pwa": "تطبيق ويب تقدمي"
+		"pwa": "تطبيق ويب تقدمي",
+		"record": "تسجيل",
+		"stop_recording": "إيقاف التسجيل",
+		"screen_studio": "شاشة الأستوديو",
+		"share_gradio_tab": "مشاركة تبويبة صفحة Gradio",
+		"run": "تشغيل"
 	},
 	"dataframe": {
 		"incorrect_format": "تنسيق غير صحيح، يتم دعم ملفات CSV و TSV فقط",
@@ -73,8 +78,10 @@
 		"sort_column": "فرز العمود",
 		"sort_ascending": "فرز تصاعدي",
 		"sort_descending": "فرز تنازلي",
-		"drop_to_upload": "اسقط ملفات CSV أو TSV هنا لاستيراد البيانات إلى الإطار الجدولية",
-		"clear_sort": "مسح الترتيب"
+		"drop_to_upload": "اسقط ملفات CSV أو TSV هنا لاستيراد البيانات إلى الإطر الجدولية",
+		"clear_sort": "مسح الترتيب",
+		"filter": "مرشح",
+		"clear_filter": "مسح المرشحات"
 	},
 	"dropdown": {
 		"dropdown": "قائمة منسدلة"
@@ -82,18 +89,19 @@
 	"errors": {
 		"build_error": "هناك خطأ في البناء",
 		"config_error": "هناك خطأ في التكوين",
-		"contact_page_author": "يرجى الاتصال بمؤلف الصفحة",
+		"contact_page_author": "يرجى التواصل مع مبرمج الصفحة",
 		"no_app_file": "لا يوجد ملف تطبيق",
-		"runtime_error": "هناك خطأ في وقت التشغيل",
+		"runtime_error": "هناك خطأ أثناء التشغيل",
 		"space_not_working": "المساحة لا تعمل لأن {0}",
 		"space_paused": "المساحة متوقفة مؤقتًا",
-		"use_via_api": "استخدم عبر API"
+		"use_via_api": "إستخدام عبر API",
+		"use_via_api_or_mcp": "إستخدام عبر واجهة برمجة التطبيقات API أو خادم MCP"
 	},
 	"file": {
 		"uploading": "جاري الرفع..."
 	},
 	"highlighted_text": {
-		"highlighted_text": "نص مميز"
+		"highlighted_text": "نص محدد"
 	},
 	"image": {
 		"allow_webcam_access": "يرجى السماح بالوصول إلى كاميرا الويب للتسجيل.",

package/src/lang/id.json

@@ -0,0 +1,154 @@
+{
+	"_name": "Bahasa Indonesia",
+	"3D_model": {
+		"3d_model": "Model 3D",
+		"drop_to_upload": "Letakkan file model 3D (.obj, .glb, .stl, .gltf, .splat, atau .ply) di sini untuk mengunggah"
+	},
+	"annotated_image": {
+		"annotated_image": "Gambar Beranotasi"
+	},
+	"audio": {
+		"allow_recording_access": "Mohon izinkan akses ke mikrofon untuk merekam.",
+		"audio": "Audio",
+		"record_from_microphone": "Rekam dari mikrofon",
+		"stop_recording": "Hentikan rekaman",
+		"no_device_support": "Perangkat media tidak dapat diakses. Pastikan Anda menjalankan dari sumber yang aman (https) atau localhost (atau Anda telah meneruskan sertifikat SSL yang valid ke ssl_verify), dan Anda telah mengizinkan akses browser ke perangkat Anda.",
+		"stop": "Berhenti",
+		"resume": "Lanjutkan",
+		"record": "Rekam",
+		"no_microphone": "Tidak ada mikrofon yang ditemukan",
+		"pause": "Jeda",
+		"play": "Putar",
+		"waiting": "Menunggu",
+		"drop_to_upload": "Letakkan file audio di sini untuk mengunggah"
+	},
+	"blocks": {
+		"connection_can_break": "Di perangkat seluler, koneksi dapat terputus jika tab ini tidak dalam fokus atau perangkat dalam mode tidur, sehingga Anda kehilangan posisi dalam antrian.",
+		"long_requests_queue": "Ada antrian panjang dari permintaan yang tertunda. Gandakan Ruang ini untuk melompati antrian.",
+		"lost_connection": "Koneksi terputus karena meninggalkan halaman. Bergabung kembali ke antrian...",
+		"waiting_for_inputs": "Menunggu file selesai diunggah, mohon coba lagi."
+	},
+	"checkbox": {
+		"checkbox": "Kotak centang",
+		"checkbox_group": "Grup kotak centang"
+	},
+	"code": {
+		"code": "Kode"
+	},
+	"color_picker": {
+		"color_picker": "Pemilih Warna"
+	},
+	"common": {
+		"built_with": "dibuat dengan",
+		"built_with_gradio": "Dibuat dengan Gradio",
+		"clear": "Bersihkan",
+		"download": "Unduh",
+		"edit": "Edit",
+		"empty": "Kosong",
+		"error": "Error",
+		"hosted_on": "Di-hosting di",
+		"loading": "Memuat",
+		"logo": "logo",
+		"or": "atau",
+		"remove": "Hapus",
+		"settings": "Pengaturan",
+		"share": "Bagikan",
+		"submit": "Kirim",
+		"undo": "Urungkan",
+		"no_devices": "Tidak ada perangkat yang ditemukan",
+		"language": "Bahasa",
+		"display_theme": "Tema Tampilan",
+		"pwa": "Aplikasi Web Progresif"
+	},
+	"dataframe": {
+		"incorrect_format": "Format salah, hanya file CSV dan TSV yang didukung",
+		"new_column": "Tambah kolom",
+		"new_row": "Baris baru",
+		"add_row_above": "Tambah baris di atas",
+		"add_row_below": "Tambah baris di bawah",
+		"add_column_left": "Tambah kolom ke kiri",
+		"add_column_right": "Tambah kolom ke kanan",
+		"delete_row": "Hapus baris",
+		"delete_column": "Hapus kolom",
+		"sort_column": "Urutkan kolom",
+		"sort_ascending": "Urutkan menaik",
+		"sort_descending": "Urutkan menurun",
+		"drop_to_upload": "Letakkan file CSV atau TSV di sini untuk mengimpor data ke dataframe",
+		"clear_sort": "Bersihkan pengurutan"
+	},
+	"dropdown": {
+		"dropdown": "Dropdown"
+	},
+	"errors": {
+		"build_error": "ada error saat membangun",
+		"config_error": "ada error konfigurasi",
+		"contact_page_author": "Mohon hubungi penulis halaman untuk memberitahu mereka.",
+		"no_app_file": "tidak ada file aplikasi",
+		"runtime_error": "ada error runtime",
+		"space_not_working": "\"Ruang tidak berfungsi karena\" {0}",
+		"space_paused": "ruang sedang dijeda",
+		"use_via_api": "Gunakan melalui API"
+	},
+	"file": {
+		"uploading": "Mengunggah..."
+	},
+	"highlighted_text": {
+		"highlighted_text": "Teks yang Disorot"
+	},
+	"image": {
+		"allow_webcam_access": "Mohon izinkan akses ke webcam untuk merekam.",
+		"brush_color": "Warna kuas",
+		"brush_radius": "Radius kuas",
+		"image": "Gambar",
+		"remove_image": "Hapus Gambar",
+		"select_brush_color": "Pilih warna kuas",
+		"start_drawing": "Mulai menggambar",
+		"use_brush": "Gunakan kuas",
+		"drop_to_upload": "Letakkan file gambar di sini untuk mengunggah"
+	},
+	"label": {
+		"label": "Label"
+	},
+	"login": {
+		"enable_cookies": "Jika Anda mengunjungi Ruang HuggingFace dalam mode Penyamaran, Anda harus mengaktifkan cookie pihak ketiga.",
+		"incorrect_credentials": "Kredensial salah",
+		"username": "nama pengguna",
+		"password": "kata sandi",
+		"login": "Masuk"
+	},
+	"number": {
+		"number": "Nomor"
+	},
+	"plot": {
+		"plot": "Plot"
+	},
+	"radio": {
+		"radio": "Tombol Radio"
+	},
+	"slider": {
+		"slider": "Penggeser"
+	},
+	"upload_text": {
+		"click_to_upload": "Klik untuk Mengunggah",
+		"drop_audio": "Letakkan Audio di Sini",
+		"drop_csv": "Letakkan CSV di Sini",
+		"drop_file": "Letakkan File di Sini",
+		"drop_image": "Letakkan Gambar di Sini",
+		"drop_video": "Letakkan Video di Sini",
+		"drop_gallery": "Letakkan Media di Sini",
+		"paste_clipboard": "Tempel dari Papan Klip"
+	},
+	"video": {
+		"drop_to_upload": "Letakkan file video di sini untuk mengunggah"
+	},
+	"chatbot": {
+		"edit": "Edit",
+		"retry": "Coba lagi",
+		"undo": "Urungkan",
+		"submit": "Kirim",
+		"cancel": "Batal",
+		"like": "Suka",
+		"dislike": "Tidak Suka",
+		"clear": "Bersihkan obrolan"
+	}
+}

package/src/navbar_store.ts

@@ -0,0 +1,9 @@
+import { writable } from "svelte/store";
+
+export interface NavbarConfig {
+	visible?: boolean;
+	main_page_name?: string | false;
+	value?: [string, string][] | null;
+}
+
+export const navbar_config = writable<NavbarConfig | null>(null);

package/src/stores.ts

@@ -18,6 +18,7 @@ export interface LoadingStatus {
 		unit: string | null;
 		desc: string | null;
 	}[];
+	validation_error?: string | null;
 }
 
 export type LoadingStatusCollection = Record<number, LoadingStatus>;
@@ -28,6 +29,10 @@ interface LoadingStatusStore {
 	register: (index: number, inputs: number[], outputs: number[]) => void;
 	get_status_for_fn: (i: number) => LoadingStatus["status"];
 	get_inputs_to_update: () => Map<number, string>;
+	update_component_status: (
+		index: number,
+		status: Partial<LoadingStatus>
+	) => void;
 }
 
 export function create_loading_status_store(): LoadingStatusStore {
@@ -152,8 +157,22 @@ export function create_loading_status_store(): LoadingStatusStore {
 		fn_outputs[index] = outputs;
 	}
 
+	function update_component_status(
+		index: number,
+		status: Partial<LoadingStatus>
+	): void {
+		store.update((outputs: LoadingStatusCollection) => {
+			outputs[index] = {
+				...outputs[index],
+				...status
+			};
+			return outputs;
+		});
+	}
+
 	return {
 		update,
+		update_component_status,
 		register,
 		subscribe: store.subscribe,
 		get_status_for_fn(i: number) {

package/src/stories/I18nMultiLanguageTest.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/svelte";
 import I18nMultiLanguageTestComponent from "./I18nMultiLanguageTestComponent.svelte";
 
 const meta = {
-	title: "Core/I18n Multi-Language Test",
+	// title: "Core/I18n Multi-Language Test",
 	component: I18nMultiLanguageTestComponent,
 	parameters: {
 		layout: "centered"

package/src/types.ts

@@ -8,6 +8,7 @@ interface SharedProps {
 	components?: string[];
 	server_fns?: string[];
 	interactive: boolean;
+	visible: boolean | "hidden";
 	[key: string]: unknown;
 }