@yuneta/gobj-ui 2.3.1 → 2.5.0

package/dist/gobj-ui.cjs.js

@@ -1562,7 +1562,7 @@ function yui_toolbar(attrs = {}, items = []) {
 *          The tabs in a content-layer to manage sub-containers can be managed by yui_tabs.js
 *          or be integrated in each gobj.
 *
-*          Copyright (c) 2025, ArtGins.
+*          Copyright (c) 2025-2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
 /***************************************************************
@@ -2153,9 +2153,19 @@ console.log("GLOBAL callback");
 ************************************************************/
 function display_volatil_modal({ title, msg, callback, type, x_close, buttons }) {
 	const callback_ = callback;
+	let type_ = (type || "info").toLowerCase();
+	if (type_ === "danger") type_ = "error";
+	const TYPE_ICONS = {
+		"info": "yi-circle-info",
+		"question": "yi-question",
+		"success": "yi-square-check",
+		"warning": "yi-triangle-exclamation",
+		"error": "yi-circle-exclamation"
+	};
+	let icon = TYPE_ICONS[type_] || TYPE_ICONS["info"];
 	let $element = (0, _yuneta_gobj_js.createElement2)([
 		"div",
-		{ class: "modal" },
+		{ class: `modal yui-volatil is-${type_}` },
 		[[
 			"div",
 			{ class: "modal-background" },
@@ -2167,44 +2177,39 @@ function display_volatil_modal({ title, msg, callback, type, x_close, buttons })
 		]]
 	]);
 	const destroyModal = () => {
+		document.removeEventListener("keydown", on_keydown, true);
 		$element.classList.remove("is-active");
 		$element.parentNode.removeChild($element);
 	};
+	const on_keydown = (evt) => {
+		if (evt.key !== "Escape") return;
+		let $modals = document.querySelectorAll(".modal.is-active");
+		if ($modals.length && $modals[$modals.length - 1] !== $element) return;
+		evt.stopPropagation();
+		evt.preventDefault();
+		let $cancel = $element.querySelector(".cancelButton, .delete");
+		if ($cancel) $cancel.click();
+		else destroyModal();
+	};
+	document.addEventListener("keydown", on_keydown, true);
 	let $modal_card = $element.querySelector(".modal-card");
-	if (title || x_close) {
-		if (!type) type = "";
-		let background_color = "";
-		switch (type.toLowerCase()) {
-			case "info":
-				background_color = "has-background-info";
-				break;
-			case "success":
-				background_color = "has-background-success";
-				break;
-			case "warning":
-				background_color = "has-background-warning";
-				break;
-			case "error":
-			case "danger":
-				background_color = "has-background-danger";
-				break;
-		}
-		let title_ = !title ? [] : [
-			"p",
-			{ class: "modal-card-title has-text-centered" },
-			title
-		];
-		let x_close_ = !x_close ? [] : ["button", {
-			class: "delete is-large",
-			"aria-label": "close"
-		}];
-		let $header = (0, _yuneta_gobj_js.createElement2)([
-			"header",
-			{ class: `modal-card-head ${background_color} p-3` },
-			[title_, x_close_]
-		]);
-		$modal_card.appendChild($header);
-	}
+	$modal_card.appendChild((0, _yuneta_gobj_js.createElement2)([
+		"div",
+		{ class: "yui-volatil-icon" },
+		[["i", {
+			class: icon,
+			"aria-hidden": "true"
+		}]]
+	]));
+	if (title) $modal_card.appendChild((0, _yuneta_gobj_js.createElement2)([
+		"p",
+		{ class: "yui-volatil-title has-text-centered" },
+		title
+	]));
+	if (x_close) $modal_card.appendChild((0, _yuneta_gobj_js.createElement2)(["button", {
+		class: "delete yui-volatil-x",
+		"aria-label": "close"
+	}]));
 	let $section = (0, _yuneta_gobj_js.createElement2)([
 		"section",
 		{ class: "modal-card-body has-text-centered" },
@@ -2265,7 +2270,7 @@ function display_info_message(title, msg, callback) {
 		msg,
 		callback,
 		type: "info",
-		buttons: [{ content: `<button class="button is-success px-6 with-focus">${(0, i18next.t)("accept")}</button>` }]
+		buttons: [{ content: `<button class="button is-info px-6 with-focus">${(0, i18next.t)("accept")}</button>` }]
 	});
 }
 /************************************************************
@@ -2278,7 +2283,7 @@ function display_warning_message(title, msg, callback) {
 		msg,
 		callback,
 		type: "warning",
-		buttons: [{ content: `<button class="button is-success px-6 with-focus">${(0, i18next.t)("accept")}</button>` }]
+		buttons: [{ content: `<button class="button is-warning px-6 with-focus">${(0, i18next.t)("accept")}</button>` }]
 	});
 }
 /************************************************************
@@ -2291,7 +2296,7 @@ function display_error_message(title, msg, callback, without_buttons) {
 		msg,
 		callback,
 		type: "error",
-		buttons: without_buttons ? [] : [{ content: `<button class="button is-success px-6 with-focus">${(0, i18next.t)("accept")}</button>` }]
+		buttons: without_buttons ? [] : [{ content: `<button class="button is-danger px-6 with-focus">${(0, i18next.t)("accept")}</button>` }]
 	});
 }
 /************************************************************
@@ -2299,7 +2304,7 @@ function display_error_message(title, msg, callback, without_buttons) {
 ************************************************************/
 function get_yesnocancel(msg, callback) {
 	let content = `<div class="">
-        <p class="title">${(0, i18next.t)(msg)}</p>
+        <p class="yui-volatil-msg">${(0, i18next.t)(msg)}</p>
         <div class="buttons is-centered">
             <button class="button to-close is-success px-6 with-focus yesButton">${(0, i18next.t)("yes")}</button>
             <button class="button to-close is-danger px-6 noButton">${(0, i18next.t)("no")}</button>
@@ -2315,7 +2320,7 @@ function get_yesnocancel(msg, callback) {
 		title: null,
 		msg: content,
 		callback: callback_,
-		type: "info"
+		type: "question"
 	});
 }
 /************************************************************
@@ -2323,7 +2328,7 @@ function get_yesnocancel(msg, callback) {
 ************************************************************/
 function get_yesno(msg, callback) {
 	let content = `<div class="">
-        <p class="title">${msg}</p>
+        <p class="yui-volatil-msg">${msg}</p>
         <div class="buttons is-centered">
             <button class="button to-close is-success px-6 with-focus yesButton">${(0, i18next.t)("yes")}</button>
             <button class="button to-close is-danger px-6 noButton">${(0, i18next.t)("no")}</button>
@@ -2338,7 +2343,7 @@ function get_yesno(msg, callback) {
 		title: null,
 		msg: content,
 		callback: callback_,
-		type: "info"
+		type: "question"
 	});
 }
 /************************************************************
@@ -2346,7 +2351,7 @@ function get_yesno(msg, callback) {
 ************************************************************/
 function get_ok(msg, callback) {
 	let content = `<div class="">
-        <p class="title">${msg}</p>
+        <p class="yui-volatil-msg">${msg}</p>
         <div class="buttons is-centered">
             <button class="button to-close is-success px-6 with-focus yesButton">${(0, i18next.t)("accept")}</button>
         </div>
@@ -2360,7 +2365,7 @@ function get_ok(msg, callback) {
 		title: null,
 		msg: content,
 		callback: callback_,
-		type: "info"
+		type: "success"
 	});
 }
 /************************************************************
@@ -5383,7 +5388,7 @@ function register_c_yui_wizard() {
 *
 *          Form (in Window or not)
 *
-*          Copyright (c) 2024-2025, ArtGins.
+*          Copyright (c) 2024-2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
 /***************************************************************
@@ -5998,6 +6003,17 @@ function apply_form_mode(gobj, $form) {
 	}
 }
 /******************************************************************
+*  True when the app renders dark: explicit <html data-theme>, or
+*  the OS scheme when the attribute is absent ("system" theme
+*  removes it — see themes.js). Read at field-build time; the
+*  hosting dialog rebuilds the form on every open.
+******************************************************************/
+function form_is_dark_theme() {
+	let attr = document.documentElement.getAttribute("data-theme");
+	if (attr) return attr === "dark";
+	return typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+/******************************************************************
 *  With html field conf builds an html element,
 *  ready to add to the form
 *
@@ -6438,7 +6454,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 			break;
 		case "jsoneditor": {
 			let attrs = {
-				class: "jsoneditor jse-theme-dark",
+				class: "jsoneditor" + (form_is_dark_theme() ? " jse-theme-dark" : ""),
 				name,
 				style: ""
 			};
@@ -15402,7 +15418,7 @@ function register_c_yui_treedb_topics() {
 *
 *          Table of TreeDB topic with FORM for editing
 *
-*          Copyright (c) 2025, ArtGins.
+*          Copyright (c) 2025-2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
 /***************************************************************
@@ -15457,7 +15473,8 @@ var PRIVATE_DATA$2 = {
 	topic_name: "",
 	tabulator: null,
 	form: null,
-	$popup: null
+	$popup: null,
+	on_keydown: null
 };
 var __gclass__$2 = null;
 function popup_mount_layer() {
@@ -16026,6 +16043,14 @@ function create_tabulator(gobj) {
 			n = 0;
 		}
 		$rc.textContent = `${n} ${(0, i18next.t)("rows")}`;
+		let single_page = true;
+		try {
+			let max = tabulator.getPageMax();
+			single_page = max === false || max <= 1;
+		} catch (e) {
+			single_page = true;
+		}
+		tabulator.element.classList.toggle("yui-single-page", single_page);
 	}
 	tabulator._ready = false;
 	tabulator.on("tableBuilt", function() {
@@ -16201,6 +16226,13 @@ function open_form_dialog(gobj, mode, record) {
 	let desc = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "desc");
 	let popup_id = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "popup_id");
 	let topic_name = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "topic_name");
+	let pkey = desc.pkey || "id";
+	let title;
+	if (mode === "create") title = (0, i18next.t)("new") + " " + (0, i18next.t)(topic_name);
+	else {
+		let rid = record ? String(record[pkey] ?? "") : "";
+		title = (0, i18next.t)(topic_name) + ((0, _yuneta_gobj_js.empty_string)(rid) ? "" : " — " + rid);
+	}
 	let $element = (0, _yuneta_gobj_js.createElement2)([
 		"div",
 		{
@@ -16223,7 +16255,7 @@ function open_form_dialog(gobj, mode, record) {
 						class: "modal-card-title",
 						style: "text-align:center;"
 					},
-					(0, i18next.t)(topic_name)
+					title
 				], [
 					"button",
 					{
@@ -16269,8 +16301,16 @@ function open_form_dialog(gobj, mode, record) {
 	}
 	popup_mount_layer().appendChild($element);
 	(0, _yuneta_gobj_js.refresh_language)($element, i18next.t);
+	priv.on_keydown = function(evt) {
+		if (evt.key === "Escape") {
+			evt.stopPropagation();
+			request_close_form_dialog(gobj);
+		}
+	};
+	document.addEventListener("keydown", priv.on_keydown);
 	(0, _yuneta_gobj_js.gobj_start)(form);
-	let $with_focus = $element.querySelector(".with-focus");
+	let $with_focus = $element.querySelector(".with-focus:not([readonly])");
+	if (!$with_focus) $with_focus = $element.querySelector("input.input:not([readonly]), textarea, select");
 	if ($with_focus) $with_focus.focus();
 }
 /************************************************************
@@ -16296,6 +16336,10 @@ function request_close_form_dialog(gobj) {
 ************************************************************/
 function close_form_dialog(gobj) {
 	let priv = gobj.priv;
+	if (priv.on_keydown) {
+		document.removeEventListener("keydown", priv.on_keydown);
+		priv.on_keydown = null;
+	}
 	if (priv.form) {
 		if ((0, _yuneta_gobj_js.gobj_is_running)(priv.form)) (0, _yuneta_gobj_js.gobj_stop)(priv.form);
 		(0, _yuneta_gobj_js.gobj_destroy)(priv.form);

package/dist/gobj-ui.es.js

@@ -1557,7 +1557,7 @@ function yui_toolbar(attrs = {}, items = []) {
 *          The tabs in a content-layer to manage sub-containers can be managed by yui_tabs.js
 *          or be integrated in each gobj.
 *
-*          Copyright (c) 2025, ArtGins.
+*          Copyright (c) 2025-2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
 /***************************************************************
@@ -2148,9 +2148,19 @@ console.log("GLOBAL callback");
 ************************************************************/
 function display_volatil_modal({ title, msg, callback, type, x_close, buttons }) {
 	const callback_ = callback;
+	let type_ = (type || "info").toLowerCase();
+	if (type_ === "danger") type_ = "error";
+	const TYPE_ICONS = {
+		"info": "yi-circle-info",
+		"question": "yi-question",
+		"success": "yi-square-check",
+		"warning": "yi-triangle-exclamation",
+		"error": "yi-circle-exclamation"
+	};
+	let icon = TYPE_ICONS[type_] || TYPE_ICONS["info"];
 	let $element = createElement2([
 		"div",
-		{ class: "modal" },
+		{ class: `modal yui-volatil is-${type_}` },
 		[[
 			"div",
 			{ class: "modal-background" },
@@ -2162,44 +2172,39 @@ function display_volatil_modal({ title, msg, callback, type, x_close, buttons })
 		]]
 	]);
 	const destroyModal = () => {
+		document.removeEventListener("keydown", on_keydown, true);
 		$element.classList.remove("is-active");
 		$element.parentNode.removeChild($element);
 	};
+	const on_keydown = (evt) => {
+		if (evt.key !== "Escape") return;
+		let $modals = document.querySelectorAll(".modal.is-active");
+		if ($modals.length && $modals[$modals.length - 1] !== $element) return;
+		evt.stopPropagation();
+		evt.preventDefault();
+		let $cancel = $element.querySelector(".cancelButton, .delete");
+		if ($cancel) $cancel.click();
+		else destroyModal();
+	};
+	document.addEventListener("keydown", on_keydown, true);
 	let $modal_card = $element.querySelector(".modal-card");
-	if (title || x_close) {
-		if (!type) type = "";
-		let background_color = "";
-		switch (type.toLowerCase()) {
-			case "info":
-				background_color = "has-background-info";
-				break;
-			case "success":
-				background_color = "has-background-success";
-				break;
-			case "warning":
-				background_color = "has-background-warning";
-				break;
-			case "error":
-			case "danger":
-				background_color = "has-background-danger";
-				break;
-		}
-		let title_ = !title ? [] : [
-			"p",
-			{ class: "modal-card-title has-text-centered" },
-			title
-		];
-		let x_close_ = !x_close ? [] : ["button", {
-			class: "delete is-large",
-			"aria-label": "close"
-		}];
-		let $header = createElement2([
-			"header",
-			{ class: `modal-card-head ${background_color} p-3` },
-			[title_, x_close_]
-		]);
-		$modal_card.appendChild($header);
-	}
+	$modal_card.appendChild(createElement2([
+		"div",
+		{ class: "yui-volatil-icon" },
+		[["i", {
+			class: icon,
+			"aria-hidden": "true"
+		}]]
+	]));
+	if (title) $modal_card.appendChild(createElement2([
+		"p",
+		{ class: "yui-volatil-title has-text-centered" },
+		title
+	]));
+	if (x_close) $modal_card.appendChild(createElement2(["button", {
+		class: "delete yui-volatil-x",
+		"aria-label": "close"
+	}]));
 	let $section = createElement2([
 		"section",
 		{ class: "modal-card-body has-text-centered" },
@@ -2260,7 +2265,7 @@ function display_info_message(title, msg, callback) {
 		msg,
 		callback,
 		type: "info",
-		buttons: [{ content: `<button class="button is-success px-6 with-focus">${t("accept")}</button>` }]
+		buttons: [{ content: `<button class="button is-info px-6 with-focus">${t("accept")}</button>` }]
 	});
 }
 /************************************************************
@@ -2273,7 +2278,7 @@ function display_warning_message(title, msg, callback) {
 		msg,
 		callback,
 		type: "warning",
-		buttons: [{ content: `<button class="button is-success px-6 with-focus">${t("accept")}</button>` }]
+		buttons: [{ content: `<button class="button is-warning px-6 with-focus">${t("accept")}</button>` }]
 	});
 }
 /************************************************************
@@ -2286,7 +2291,7 @@ function display_error_message(title, msg, callback, without_buttons) {
 		msg,
 		callback,
 		type: "error",
-		buttons: without_buttons ? [] : [{ content: `<button class="button is-success px-6 with-focus">${t("accept")}</button>` }]
+		buttons: without_buttons ? [] : [{ content: `<button class="button is-danger px-6 with-focus">${t("accept")}</button>` }]
 	});
 }
 /************************************************************
@@ -2294,7 +2299,7 @@ function display_error_message(title, msg, callback, without_buttons) {
 ************************************************************/
 function get_yesnocancel(msg, callback) {
 	let content = `<div class="">
-        <p class="title">${t(msg)}</p>
+        <p class="yui-volatil-msg">${t(msg)}</p>
         <div class="buttons is-centered">
             <button class="button to-close is-success px-6 with-focus yesButton">${t("yes")}</button>
             <button class="button to-close is-danger px-6 noButton">${t("no")}</button>
@@ -2310,7 +2315,7 @@ function get_yesnocancel(msg, callback) {
 		title: null,
 		msg: content,
 		callback: callback_,
-		type: "info"
+		type: "question"
 	});
 }
 /************************************************************
@@ -2318,7 +2323,7 @@ function get_yesnocancel(msg, callback) {
 ************************************************************/
 function get_yesno(msg, callback) {
 	let content = `<div class="">
-        <p class="title">${msg}</p>
+        <p class="yui-volatil-msg">${msg}</p>
         <div class="buttons is-centered">
             <button class="button to-close is-success px-6 with-focus yesButton">${t("yes")}</button>
             <button class="button to-close is-danger px-6 noButton">${t("no")}</button>
@@ -2333,7 +2338,7 @@ function get_yesno(msg, callback) {
 		title: null,
 		msg: content,
 		callback: callback_,
-		type: "info"
+		type: "question"
 	});
 }
 /************************************************************
@@ -2341,7 +2346,7 @@ function get_yesno(msg, callback) {
 ************************************************************/
 function get_ok(msg, callback) {
 	let content = `<div class="">
-        <p class="title">${msg}</p>
+        <p class="yui-volatil-msg">${msg}</p>
         <div class="buttons is-centered">
             <button class="button to-close is-success px-6 with-focus yesButton">${t("accept")}</button>
         </div>
@@ -2355,7 +2360,7 @@ function get_ok(msg, callback) {
 		title: null,
 		msg: content,
 		callback: callback_,
-		type: "info"
+		type: "success"
 	});
 }
 /************************************************************
@@ -5378,7 +5383,7 @@ function register_c_yui_wizard() {
 *
 *          Form (in Window or not)
 *
-*          Copyright (c) 2024-2025, ArtGins.
+*          Copyright (c) 2024-2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
 /***************************************************************
@@ -5993,6 +5998,17 @@ function apply_form_mode(gobj, $form) {
 	}
 }
 /******************************************************************
+*  True when the app renders dark: explicit <html data-theme>, or
+*  the OS scheme when the attribute is absent ("system" theme
+*  removes it — see themes.js). Read at field-build time; the
+*  hosting dialog rebuilds the form on every open.
+******************************************************************/
+function form_is_dark_theme() {
+	let attr = document.documentElement.getAttribute("data-theme");
+	if (attr) return attr === "dark";
+	return typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+/******************************************************************
 *  With html field conf builds an html element,
 *  ready to add to the form
 *
@@ -6433,7 +6449,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 			break;
 		case "jsoneditor": {
 			let attrs = {
-				class: "jsoneditor jse-theme-dark",
+				class: "jsoneditor" + (form_is_dark_theme() ? " jse-theme-dark" : ""),
 				name,
 				style: ""
 			};
@@ -15397,7 +15413,7 @@ function register_c_yui_treedb_topics() {
 *
 *          Table of TreeDB topic with FORM for editing
 *
-*          Copyright (c) 2025, ArtGins.
+*          Copyright (c) 2025-2026, ArtGins.
 *          All Rights Reserved.
 ***********************************************************************/
 /***************************************************************
@@ -15452,7 +15468,8 @@ var PRIVATE_DATA$2 = {
 	topic_name: "",
 	tabulator: null,
 	form: null,
-	$popup: null
+	$popup: null,
+	on_keydown: null
 };
 var __gclass__$2 = null;
 function popup_mount_layer() {
@@ -16021,6 +16038,14 @@ function create_tabulator(gobj) {
 			n = 0;
 		}
 		$rc.textContent = `${n} ${t("rows")}`;
+		let single_page = true;
+		try {
+			let max = tabulator.getPageMax();
+			single_page = max === false || max <= 1;
+		} catch (e) {
+			single_page = true;
+		}
+		tabulator.element.classList.toggle("yui-single-page", single_page);
 	}
 	tabulator._ready = false;
 	tabulator.on("tableBuilt", function() {
@@ -16196,6 +16221,13 @@ function open_form_dialog(gobj, mode, record) {
 	let desc = gobj_read_attr(gobj, "desc");
 	let popup_id = gobj_read_str_attr(gobj, "popup_id");
 	let topic_name = gobj_read_str_attr(gobj, "topic_name");
+	let pkey = desc.pkey || "id";
+	let title;
+	if (mode === "create") title = t("new") + " " + t(topic_name);
+	else {
+		let rid = record ? String(record[pkey] ?? "") : "";
+		title = t(topic_name) + (empty_string(rid) ? "" : " — " + rid);
+	}
 	let $element = createElement2([
 		"div",
 		{
@@ -16218,7 +16250,7 @@ function open_form_dialog(gobj, mode, record) {
 						class: "modal-card-title",
 						style: "text-align:center;"
 					},
-					t(topic_name)
+					title
 				], [
 					"button",
 					{
@@ -16264,8 +16296,16 @@ function open_form_dialog(gobj, mode, record) {
 	}
 	popup_mount_layer().appendChild($element);
 	refresh_language($element, t);
+	priv.on_keydown = function(evt) {
+		if (evt.key === "Escape") {
+			evt.stopPropagation();
+			request_close_form_dialog(gobj);
+		}
+	};
+	document.addEventListener("keydown", priv.on_keydown);
 	gobj_start(form);
-	let $with_focus = $element.querySelector(".with-focus");
+	let $with_focus = $element.querySelector(".with-focus:not([readonly])");
+	if (!$with_focus) $with_focus = $element.querySelector("input.input:not([readonly]), textarea, select");
 	if ($with_focus) $with_focus.focus();
 }
 /************************************************************
@@ -16291,6 +16331,10 @@ function request_close_form_dialog(gobj) {
 ************************************************************/
 function close_form_dialog(gobj) {
 	let priv = gobj.priv;
+	if (priv.on_keydown) {
+		document.removeEventListener("keydown", priv.on_keydown);
+		priv.on_keydown = null;
+	}
 	if (priv.form) {
 		if (gobj_is_running(priv.form)) gobj_stop(priv.form);
 		gobj_destroy(priv.form);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yuneta/gobj-ui",
-    "version": "2.3.1",
+    "version": "2.5.0",
     "type": "module",
     "main": "dist/gobj-ui.cjs.js",
     "module": "dist/gobj-ui.es.js",

package/src/c_yui_form.css

@@ -0,0 +1,50 @@
+/***********************************************************************
+ *          c_yui_form.css
+ *
+ *      Theme integration for the third-party widgets C_YUI_FORM hosts
+ *      (tom-select, vanilla-jsoneditor) plus form-owned input states.
+ *
+ *      Everything maps to Bulma CSS vars, so a single rule set follows
+ *      light/dark automatically (explicit data-theme or system theme) —
+ *      no per-theme selectors needed.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+
+/*--- tom-select (fkey fields): ships light-only colors ---*/
+.C_YUI_FORM .ts-wrapper .ts-control {
+    background: var(--bulma-scheme-main, #fff);
+    color: var(--bulma-text, #4a4a4a);
+    border-color: var(--bulma-border, #dbdbdb);
+}
+.C_YUI_FORM .ts-control > input {
+    color: var(--bulma-text, #4a4a4a);
+}
+.C_YUI_FORM .ts-wrapper.multi .ts-control > div {
+    background: var(--bulma-background, #f2f2f2);
+    color: var(--bulma-text, #4a4a4a);
+}
+.C_YUI_FORM .ts-dropdown {
+    background: var(--bulma-scheme-main, #fff);
+    color: var(--bulma-text, #4a4a4a);
+    border-color: var(--bulma-border, #dbdbdb);
+}
+.C_YUI_FORM .ts-dropdown .option.active {
+    background: var(--bulma-link, #485fc7);
+    color: var(--bulma-link-invert, #fff);
+}
+
+/*--- vanilla-jsoneditor: align its accent with the app palette ---*/
+.C_YUI_FORM .jsoneditor {
+    --jse-theme-color: var(--bulma-link, #485fc7);
+    --jse-theme-color-highlight: var(--bulma-link, #485fc7);
+}
+
+/*--- readonly fields (e.g. the pkey in update mode) look readonly ---*/
+.C_YUI_FORM input.input[readonly] {
+    background-color: var(--bulma-background, #f5f5f5);
+    color: var(--bulma-text-weak, #7a7a7a);
+    border-color: var(--bulma-border, #dbdbdb);
+    cursor: default;
+}

package/src/c_yui_form.js

@@ -3,7 +3,7 @@
  *
  *          Form (in Window or not)
  *
- *          Copyright (c) 2024-2025, ArtGins.
+ *          Copyright (c) 2024-2026, ArtGins.
  *          All Rights Reserved.
  ***********************************************************************/
 import {
@@ -55,6 +55,7 @@ import TomSelect from "tom-select"; // Import Tom-Select JS
 
 import { createJSONEditor } from 'vanilla-jsoneditor';
 import "vanilla-jsoneditor/themes/jse-theme-dark.css";
+import "./c_yui_form.css";
 
 import "tabulator-tables/dist/css/tabulator.min.css"; // Import Tabulator CSS
 import "tabulator-tables/dist/css/tabulator_bulma.css";
@@ -835,6 +836,23 @@ function apply_form_mode(gobj, $form)
     }
 }
 
+/******************************************************************
+ *  True when the app renders dark: explicit <html data-theme>, or
+ *  the OS scheme when the attribute is absent ("system" theme
+ *  removes it — see themes.js). Read at field-build time; the
+ *  hosting dialog rebuilds the form on every open.
+ ******************************************************************/
+function form_is_dark_theme()
+{
+    let attr = document.documentElement.getAttribute("data-theme");
+    if(attr) {
+        return attr === "dark";
+    }
+    return typeof window !== "undefined" &&
+        window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
 /******************************************************************
  *  With html field conf builds an html element,
  *  ready to add to the form
@@ -1236,7 +1254,7 @@ function create_form_field(
         case "jsoneditor":
         {
             let attrs = {
-                class: 'jsoneditor jse-theme-dark',
+                class: 'jsoneditor' + (form_is_dark_theme() ? ' jse-theme-dark' : ''),
                 name: name,
                 style: ''
             };

package/src/c_yui_main.css

@@ -421,3 +421,81 @@ a.flex-horizontal-section { /* To make flex any <a> */
         color: var(--bulma-link-invert);
     }
 }
+
+/*============================================================
+ *      Volatil modals (display_volatil_modal):
+ *      get_yesnocancel / get_yesno / get_ok and the typed
+ *      info/warning/error messages. Icon-centric layout: a
+ *      narrow rounded card with a tinted round icon of the
+ *      type; everything maps to Bulma vars so one rule set
+ *      follows light and dark.
+ *============================================================*/
+.modal.yui-volatil .modal-background {
+    background-color: color-mix(in srgb, var(--bulma-scheme-invert, #000) 45%, transparent);
+}
+.modal.yui-volatil .modal-card {
+    position: relative;
+    width: min(26rem, calc(100vw - 2rem));
+    border-radius: 0.75rem;
+    background: var(--bulma-scheme-main, #fff);
+    box-shadow: 0 12px 40px color-mix(in srgb, var(--bulma-scheme-invert, #000) 30%, transparent);
+    padding: 1.5rem 1.5rem 1.25rem;
+}
+.modal.yui-volatil .modal-card-body {
+    background: transparent;
+    padding: 0;
+}
+.modal.yui-volatil .modal-card-foot {
+    background: transparent;
+    border-top: none;
+    padding: 1rem 0 0;
+}
+.yui-volatil-icon {
+    width: 3.25rem;
+    height: 3.25rem;
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 0.75rem;
+    font-size: 1.5rem;
+    background: color-mix(in srgb, var(--yui-volatil-base, var(--bulma-info, #3e8ed0)) 15%, transparent);
+    color: var(--yui-volatil-ink, var(--bulma-info, #3e8ed0));
+}
+.modal.yui-volatil.is-info,
+.modal.yui-volatil.is-question {
+    --yui-volatil-base: var(--bulma-info, #3e8ed0);
+    --yui-volatil-ink: var(--bulma-info-on-scheme, #3e8ed0);
+}
+.modal.yui-volatil.is-success {
+    --yui-volatil-base: var(--bulma-success, #48c78e);
+    --yui-volatil-ink: var(--bulma-success-on-scheme, #257953);
+}
+.modal.yui-volatil.is-warning {
+    --yui-volatil-base: var(--bulma-warning, #ffe08a);
+    --yui-volatil-ink: var(--bulma-warning-on-scheme, #946c00);
+}
+.modal.yui-volatil.is-error {
+    --yui-volatil-base: var(--bulma-danger, #f14668);
+    --yui-volatil-ink: var(--bulma-danger-on-scheme, #cc0f35);
+}
+.yui-volatil-title {
+    font-size: 1.15rem;
+    font-weight: 600;
+    text-transform: capitalize;
+    margin-bottom: 0.25rem;
+    color: var(--bulma-text-strong, inherit);
+}
+.yui-volatil-x {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+}
+.yui-volatil-msg {
+    font-size: 1.05rem;
+    color: var(--bulma-text, inherit);
+}
+.modal.yui-volatil .modal-card-body .buttons {
+    margin-top: 1.25rem;
+    margin-bottom: 0;
+}

package/src/c_yui_main.js

@@ -27,7 +27,7 @@
  *          The tabs in a content-layer to manage sub-containers can be managed by yui_tabs.js
  *          or be integrated in each gobj.
  *
- *          Copyright (c) 2025, ArtGins.
+ *          Copyright (c) 2025-2026, ArtGins.
  *          All Rights Reserved.
  ***********************************************************************/
 /* global ResizeObserver, window, document */
@@ -879,50 +879,77 @@ function display_volatil_modal(
     {title, msg, callback, type, x_close, buttons}
 ) {
     const callback_ = callback;  // ✅ Assign to a constant
+
+    /*  Normalize the type: it picks the tinted icon and the accent
+     *  color (see the .yui-volatil rules in c_yui_main.css).  */
+    let type_ = (type || "info").toLowerCase();
+    if(type_ === "danger") {
+        type_ = "error";
+    }
+    const TYPE_ICONS = {
+        "info":     "yi-circle-info",
+        "question": "yi-question",
+        "success":  "yi-square-check",
+        "warning":  "yi-triangle-exclamation",
+        "error":    "yi-circle-exclamation",
+    };
+    let icon = TYPE_ICONS[type_] || TYPE_ICONS["info"];
+
     let $element = createElement2([
-        'div', {class: 'modal'}, [
+        'div', {class: `modal yui-volatil is-${type_}`}, [
             ['div', {class: 'modal-background'}, ''],
             ['div', {class: 'modal-card'}, []]
         ]
     ]);
 
     const destroyModal = ()=> {
+        document.removeEventListener('keydown', on_keydown, true);
         $element.classList.remove('is-active');
         $element.parentNode.removeChild($element);
     };
 
-    let $modal_card = $element.querySelector('.modal-card');
-    if(title || x_close) {
-        if(!type) {
-            type = "";
+    /*  Escape = cancel. Capture phase on document, so Escape handlers
+     *  beneath the modal (e.g. the treedb edit dialog's own) don't also
+     *  fire and stack a second confirm. Only the top-most open modal
+     *  reacts; the cancel/x click path carries the callback semantics,
+     *  a buttonless modal just dismisses. */
+    const on_keydown = (evt)=> {
+        if(evt.key !== "Escape") {
+            return;
+        }
+        let $modals = document.querySelectorAll('.modal.is-active');
+        if($modals.length && $modals[$modals.length - 1] !== $element) {
+            return;
         }
-        let background_color = "";
-        switch(type.toLowerCase()) {
-            case "info":
-                background_color = 'has-background-info';
-                break;
-            case "success":
-                background_color = 'has-background-success';
-                break;
-            case "warning":
-                background_color = 'has-background-warning';
-                break;
-            case "error":
-            case "danger":
-                background_color = 'has-background-danger';
-                break;
+        evt.stopPropagation();
+        evt.preventDefault();
+        let $cancel = $element.querySelector('.cancelButton, .delete');
+        if($cancel) {
+            $cancel.click();
+        } else {
+            destroyModal();
         }
+    };
+    document.addEventListener('keydown', on_keydown, true);
 
-        let title_ = !title ? [] : ['p', {class: 'modal-card-title has-text-centered'}, title];
-        let x_close_ = !x_close ? [] : ['button', {class: 'delete is-large', 'aria-label': 'close'}];
+    let $modal_card = $element.querySelector('.modal-card');
 
-        let $header = createElement2(
-            ['header', {class: `modal-card-head ${background_color} p-3`}, [
-                title_,
-                x_close_
-            ]]
-        );
-        $modal_card.appendChild($header);
+    /*  Icon-centric layout (no colored header bar): a tinted round
+     *  icon of the type, an optional title, an optional top-right x. */
+    $modal_card.appendChild(createElement2(
+        ['div', {class: 'yui-volatil-icon'}, [
+            ['i', {class: icon, 'aria-hidden': 'true'}]
+        ]]
+    ));
+    if(title) {
+        $modal_card.appendChild(createElement2(
+            ['p', {class: 'yui-volatil-title has-text-centered'}, title]
+        ));
+    }
+    if(x_close) {
+        $modal_card.appendChild(createElement2(
+            ['button', {class: 'delete yui-volatil-x', 'aria-label': 'close'}]
+        ));
     }
 
     let $section = createElement2(
@@ -1017,7 +1044,7 @@ function display_info_message(title, msg, callback)
         type: 'info',
         buttons: [{
             content:
-            `<button class="button is-success px-6 with-focus">${t('accept')}</button>`,
+            `<button class="button is-info px-6 with-focus">${t('accept')}</button>`,
         }]
     });
 }
@@ -1037,7 +1064,7 @@ function display_warning_message(title, msg, callback)
         type: 'warning',
         buttons: [{
             content:
-                `<button class="button is-success px-6 with-focus">${t('accept')}</button>`,
+                `<button class="button is-warning px-6 with-focus">${t('accept')}</button>`,
         }]
     });
 }
@@ -1057,7 +1084,7 @@ function display_error_message(title, msg, callback, without_buttons)
         type: 'error',
         buttons: without_buttons? []: [{
             content:
-                `<button class="button is-success px-6 with-focus">${t('accept')}</button>`,
+                `<button class="button is-danger px-6 with-focus">${t('accept')}</button>`,
         }]
     });
 }
@@ -1069,7 +1096,7 @@ function get_yesnocancel(msg, callback)
 {
     let content =
         `<div class="">
-        <p class="title">${t(msg)}</p>
+        <p class="yui-volatil-msg">${t(msg)}</p>
         <div class="buttons is-centered">
             <button class="button to-close is-success px-6 with-focus yesButton">${t('yes')}</button>
             <button class="button to-close is-danger px-6 noButton">${t('no')}</button>
@@ -1091,7 +1118,7 @@ function get_yesnocancel(msg, callback)
         title: null,
         msg: content,
         callback: callback_,
-        type: 'info'
+        type: 'question'
     });
 }
 
@@ -1102,7 +1129,7 @@ function get_yesno(msg, callback)
 {
     let content =
     `<div class="">
-        <p class="title">${msg}</p>
+        <p class="yui-volatil-msg">${msg}</p>
         <div class="buttons is-centered">
             <button class="button to-close is-success px-6 with-focus yesButton">${t('yes')}</button>
             <button class="button to-close is-danger px-6 noButton">${t('no')}</button>
@@ -1123,7 +1150,7 @@ function get_yesno(msg, callback)
         title: null,
         msg: content,
         callback: callback_,
-        type: 'info'
+        type: 'question'
     });
 }
 
@@ -1134,7 +1161,7 @@ function get_ok(msg, callback)
 {
     let content =
         `<div class="">
-        <p class="title">${msg}</p>
+        <p class="yui-volatil-msg">${msg}</p>
         <div class="buttons is-centered">
             <button class="button to-close is-success px-6 with-focus yesButton">${t('accept')}</button>
         </div>
@@ -1154,7 +1181,7 @@ function get_ok(msg, callback)
         title: null,
         msg: content,
         callback: callback_,
-        type: 'info'
+        type: 'success'
     });
 }
 

package/src/c_yui_shell.css

@@ -141,16 +141,24 @@
 .yui-nav-vertical .yui-nav-label { white-space: nowrap; }
 
 /*--- icon-bar (bottom/top icon bar) ---*/
+/*  Distribute-or-scroll: items grow to share spare width but never
+ *  shrink below their content (flex: 1 0 auto); when they don't fit the
+ *  bar scrolls horizontally. justify-content must stay flex-start —
+ *  with space-around + overflow the leading items get clipped past the
+ *  left edge and become unreachable. */
 .yui-nav-iconbar {
     display: flex;
-    justify-content: space-around;
+    justify-content: flex-start;
     align-items: stretch;
     margin: 0;
     padding: 0.25rem 0;
     width: 100%;
     background: var(--bulma-scheme-main, #fff);
+    overflow-x: auto;
+    scrollbar-width: thin;
 }
-.yui-nav-iconbar .level-item { flex: 1 1 0; justify-content: center; }
+.yui-nav-iconbar .level-item { flex: 1 0 auto; justify-content: center; }
+.yui-nav-iconbar .yui-nav-label { white-space: nowrap; }
 .yui-nav-iconbar .yui-nav-item {
     display: flex;
     flex-direction: column;

package/src/c_yui_treedb_topic_with_form.css

@@ -22,3 +22,26 @@
 .tabulator .tabulator-footer .yui-tabulator-rowcount {
     line-height: 1.5;
 }
+
+/*  All rows fit in one page: the page-size selector and the
+ *  First/Prev/1/Next/Last strip are pure noise (worst on mobile) —
+ *  update_rowcount() toggles the class on every data change.  */
+.tabulator.yui-single-page .tabulator-footer .tabulator-paginator {
+    display: none;
+}
+
+/*  Toolbar wrapping discipline (mobile): the record-buttons group
+ *  must never split across lines — Bulma .buttons wraps internally,
+ *  which stacked the toolbar into 3 rows on narrow phones. Keep the
+ *  group on one line and scroll it horizontally if it overflows
+ *  (same distribute-or-scroll pattern as the nav icon-bar); the
+ *  search+refresh block then wraps as a whole, so the toolbar is
+ *  1 row when it fits and exactly 2 when it doesn't.  */
+.toolbar_tabulator_table .buttons {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+.toolbar_tabulator_table .control.has-icons-left {
+    min-width: 0;
+}

package/src/c_yui_treedb_topic_with_form.js

@@ -3,7 +3,7 @@
  *
  *          Table of TreeDB topic with FORM for editing
  *
- *          Copyright (c) 2025, ArtGins.
+ *          Copyright (c) 2025-2026, ArtGins.
  *          All Rights Reserved.
  ***********************************************************************/
 
@@ -132,6 +132,7 @@ let PRIVATE_DATA = {
     tabulator:          null,
     form:               null,   // hosted C_YUI_FORM child (while dialog open)
     $popup:             null,   // dialog DOM element
+    on_keydown:         null,   // document Escape handler (while dialog open)
 };
 
 let __gclass__ = null;
@@ -827,7 +828,9 @@ function create_tabulator(gobj)
     }
     let tabulator = new Tabulator($table_el, tabulator_settings);
 
-    /*  Keep the footer in sync with the visible (active) row count. */
+    /*  Keep the footer in sync with the visible (active) row count,
+     *  and hide the pagination chrome while everything fits in one
+     *  page (it comes back as soon as a second page exists). */
     function update_rowcount() {
         let $rc = tabulator.element &&
             tabulator.element.querySelector(".yui-tabulator-rowcount");
@@ -841,6 +844,15 @@ function create_tabulator(gobj)
             n = 0;
         }
         $rc.textContent = `${n} ${t("rows")}`;
+
+        let single_page = true;
+        try {
+            let max = tabulator.getPageMax();   // false = pagination off
+            single_page = (max === false) || max <= 1;
+        } catch(e) {
+            single_page = true;
+        }
+        tabulator.element.classList.toggle("yui-single-page", single_page);
     }
 
     tabulator._ready = false;
@@ -1103,12 +1115,23 @@ function open_form_dialog(gobj, mode, record)
     let popup_id = gobj_read_str_attr(gobj, "popup_id");
     let topic_name = gobj_read_str_attr(gobj, "topic_name");
 
+    /*  Title says what you are doing: "new <topic>" on create,
+     *  "<topic> — <pkey>" on update. */
+    let pkey = desc.pkey || "id";
+    let title;
+    if(mode === "create") {
+        title = t("new") + " " + t(topic_name);
+    } else {
+        let rid = record ? String(record[pkey] ?? "") : "";
+        title = t(topic_name) + (empty_string(rid) ? "" : " — " + rid);
+    }
+
     let $element = createElement2([
         'div', {id: popup_id, class: 'modal is-active'}, [
             ['div', {class: 'modal-background'}, ''],
             ['div', {class: 'modal-card modal-is-responsive'}, [
                 ['header', {class: 'modal-card-head p-3'}, [
-                    ['p', {class: 'modal-card-title', style: 'text-align:center;'}, t(topic_name)],
+                    ['p', {class: 'modal-card-title', style: 'text-align:center;'}, title],
                     ['button', {class: 'delete is-large', 'aria-label': 'close'}, '', {
                         click: function(evt) {
                             evt.stopPropagation();
@@ -1161,9 +1184,25 @@ function open_form_dialog(gobj, mode, record)
     popup_mount_layer().appendChild($element);
     refresh_language($element, t);
 
+    /*  Escape closes through the same unsaved-changes guard as the X. */
+    priv.on_keydown = function(evt) {
+        if(evt.key === "Escape") {
+            evt.stopPropagation();
+            request_close_form_dialog(gobj);
+        }
+    };
+    document.addEventListener("keydown", priv.on_keydown);
+
     gobj_start(form);   // mt_start loads `record` into the form
 
-    let $with_focus = $element.querySelector('.with-focus');
+    /*  Focus the pkey unless the mode made it readonly (update) —
+     *  then the first editable field. */
+    let $with_focus = $element.querySelector('.with-focus:not([readonly])');
+    if(!$with_focus) {
+        $with_focus = $element.querySelector(
+            'input.input:not([readonly]), textarea, select'
+        );
+    }
     if($with_focus) {
         $with_focus.focus();
     }
@@ -1197,6 +1236,10 @@ function request_close_form_dialog(gobj)
 function close_form_dialog(gobj)
 {
     let priv = gobj.priv;
+    if(priv.on_keydown) {
+        document.removeEventListener("keydown", priv.on_keydown);
+        priv.on_keydown = null;
+    }
     if(priv.form) {
         if(gobj_is_running(priv.form)) {
             gobj_stop(priv.form);

package/src/yui_icons.css

@@ -239,3 +239,18 @@
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
 }
+
+.yi-circle-info::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");
+}
+
+.yi-triangle-exclamation::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E");
+}
+
+.yi-circle-exclamation::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zm32 224a32 32 0 1 1 -64 0 32 32 0 1 1 64 0z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zm32 224a32 32 0 1 1 -64 0 32 32 0 1 1 64 0z'/%3E%3C/svg%3E");
+}