@yuneta/gobj-ui 2.2.4 → 2.3.0

package/dist/gobj-ui.es.js

@@ -1,11 +1,11 @@
-import { SDATA, SDATA_END, clean_name, createElement2, createOneHtml, create_template_record, data_type_t, debounce, duplicate_objects, empty_string, escapeHtml, event_flag_t, gclass_create, gclass_flag_t, getPositionRelativeToBody, gobj_command, gobj_create, gobj_create_service, gobj_current_state, gobj_default_service, gobj_destroy, gobj_find_child, gobj_find_service, gobj_full_name, gobj_gclass_name, gobj_has_attr, gobj_is_destroying, gobj_is_playing, gobj_is_pure_child, gobj_is_running, gobj_is_service, gobj_is_volatil, gobj_match_children, gobj_name, gobj_parent, gobj_publish_event, gobj_read_attr, gobj_read_bool_attr, gobj_read_integer_attr, gobj_read_pointer_attr, gobj_read_str_attr, gobj_save_persistent_attrs, gobj_send_event, gobj_set_trace_machine_format, gobj_short_name, gobj_start, gobj_stop, gobj_stop_children, gobj_subscribe_event, gobj_unsubscribe_event, gobj_write_attr, gobj_write_bool_attr, gobj_write_integer_attr, gobj_write_str_attr, gobj_yuno, is_array, is_boolean, is_date, is_gobj, is_null, is_number, is_object, is_pure_number, is_string, json_deep_copy, json_object_size, json_object_update, json_object_update_missing, json_size, kw_clone_by_keys, kw_flag_t, kw_get_dict, kw_get_dict_value, kw_get_int, kw_get_local_storage_value, kw_get_str, kw_has_key, kw_set_dict_value, kw_set_local_storage_value, kwid_find_one_record, kwid_get_ids, kwid_new_dict, list2options, log_error, log_warning, msg_iev_get_stack, parseBoolean, parseSVG, refresh_language, safeSrc, sdata_flag_t, set_log_callback, sprintf, str_in_list, template_get_field_desc, trace_json, trace_msg, treedb_decoder_fkey, treedb_encoder_fkey, treedb_get_field_desc, treedb_hook_data_size } from "@yuneta/gobj-js";
+import { SDATA, SDATA_END, clean_name, createElement2, createOneHtml, create_template_record, data_type_t, debounce, duplicate_objects, empty_string, escapeHtml, event_flag_t, gclass_create, gclass_find_by_name, gclass_flag_t, getPositionRelativeToBody, gobj_command, gobj_create, gobj_create_pure_child, gobj_create_service, gobj_current_state, gobj_default_service, gobj_destroy, gobj_find_child, gobj_find_service, gobj_full_name, gobj_gclass_name, gobj_has_attr, gobj_is_destroying, gobj_is_playing, gobj_is_pure_child, gobj_is_running, gobj_is_service, gobj_is_volatil, gobj_match_children, gobj_name, gobj_parent, gobj_publish_event, gobj_read_attr, gobj_read_bool_attr, gobj_read_integer_attr, gobj_read_pointer_attr, gobj_read_str_attr, gobj_save_persistent_attrs, gobj_send_event, gobj_set_trace_machine_format, gobj_short_name, gobj_start, gobj_stop, gobj_stop_children, gobj_subscribe_event, gobj_unsubscribe_event, gobj_write_attr, gobj_write_bool_attr, gobj_write_integer_attr, gobj_write_str_attr, gobj_yuno, is_array, is_boolean, is_date, is_gobj, is_null, is_number, is_object, is_pure_number, is_string, json_deep_copy, json_object_size, json_object_update, json_object_update_missing, json_size, kw_clone_by_keys, kw_flag_t, kw_get_dict, kw_get_dict_value, kw_get_int, kw_get_local_storage_value, kw_get_str, kw_has_key, kw_set_dict_value, kw_set_local_storage_value, kwid_find_one_record, kwid_get_ids, kwid_new_dict, log_error, log_warning, msg_iev_get_stack, parseBoolean, parseSVG, refresh_language, safeSrc, sdata_flag_t, set_log_callback, sprintf, str_in_list, template_get_field_desc, trace_json, trace_msg, treedb_decoder_fkey, treedb_encoder_fkey, treedb_get_field_desc, treedb_hook_data_size } from "@yuneta/gobj-js";
 import i18next, { t } from "i18next";
 import TomSelect from "tom-select";
+import { JSONEditor } from "vanilla-jsoneditor";
 import { TabulatorFull } from "tabulator-tables";
 import maplibregl from "maplibre-gl";
 import uPlot from "uplot";
 import { BaseLayout, CanvasEvent, Circle, CommonEvent, DragCanvas, EdgeEvent, ExtensionCategory, Graph, HistoryEvent, NodeEvent, Toolbar, register } from "@antv/g6";
-import { JSONEditor } from "vanilla-jsoneditor";
 //#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -5394,6 +5394,10 @@ var attrs_table$11 = [
 	SDATA(data_type_t.DTP_POINTER, "template", 0, "<div>You must supply a template for form</div>", "Template for form, object -> TEMPLATE, array -> DESC"),
 	SDATA(data_type_t.DTP_JSON, "record", 0, "{}", "Data to form"),
 	SDATA(data_type_t.DTP_JSON, "placeholders", 0, "{}", "Placeholder values for form fields"),
+	SDATA(data_type_t.DTP_JSON, "fkey_options", 0, "{}", "Options for fkey fields: {topic_name: [ids or {id} records]}, read at build time"),
+	SDATA(data_type_t.DTP_STRING, "form_mode", 0, "", "'create' (pkey editable+required) or 'update' (pkey readonly); empty = no pkey handling"),
+	SDATA(data_type_t.DTP_STRING, "pkey", 0, "id", "Primary key field name, used by form_mode"),
+	SDATA(data_type_t.DTP_STRING, "topic_name", 0, "", "Treedb topic name: labels use the i18n cascade '<topic>.<col>' -> '<col>' -> header (like table headers)"),
 	SDATA(data_type_t.DTP_BOOLEAN, "editable", 0, false, "Default is editable, set false to readonly"),
 	SDATA(data_type_t.DTP_BOOLEAN, "selectable", 0, true, "Rows selectable with 'click' (BAD with editable=true)"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_checkbox", 0, false, "Show a first column with checkbox to select rows"),
@@ -5515,34 +5519,35 @@ function build_ui$9(gobj) {
 	let $container = createElement2([
 		"div",
 		{
-			class: "C_YUI_FORM is-flex is-flex-direction-row overscroll-contain",
+			class: "C_YUI_FORM is-flex is-flex-direction-column overscroll-contain",
 			style: "height:100%; width:100%; box-sizing:border-box;"
 		},
 		[[
 			"div",
 			{
 				class: "yui-form is-flex-grow-1 p-2",
-				style: "overflow-y:auto; height:100%;min-height:0;"
+				style: "overflow-y:auto; min-height:0;"
 			},
 			build_form(gobj)
 		], [
 			"div",
 			{
-				class: "yui-toolbar-form ml-2 is-flex-shrink-0 is-flex is-flex-direction-column is-justify-content-space-between",
-				style: "overflow-y:auto; height:100%; max-width:90px;"
+				class: "yui-toolbar-form is-flex-shrink-0 is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center",
+				style: "width:100%; flex-wrap:wrap; row-gap:6px;"
 			},
 			[[
 				"div",
 				{
-					class: "p-1 is-flex is-flex-direction-column is-align-items-center",
-					style: "width:100%; row-gap:6px;"
+					class: "p-1 is-flex is-flex-direction-row is-align-items-center",
+					style: "column-gap:6px;"
 				},
 				[
 					[
 						"button",
 						{
-							class: "button p-1 is-flex is-flex-direction-column is-align-items-center button-save",
-							style: "width:100%;",
+							class: "button p-1 button-save",
+							title: "save",
+							"aria-label": "save",
 							disabled: true
 						},
 						[[
@@ -5552,7 +5557,7 @@ function build_ui$9(gobj) {
 						], [
 							"span",
 							{
-								class: "is-hidden-mobile",
+								class: "is-hidden-mobile pl-1 pr-1",
 								i18n: "save"
 							},
 							"save"
@@ -5565,8 +5570,9 @@ function build_ui$9(gobj) {
 					[
 						"button",
 						{
-							class: "button p-1 is-flex is-flex-direction-column is-align-items-center button-undo",
-							style: "width:100%;",
+							class: "button p-1 button-undo",
+							title: "undo",
+							"aria-label": "undo",
 							disabled: true
 						},
 						[[
@@ -5576,7 +5582,7 @@ function build_ui$9(gobj) {
 						], [
 							"span",
 							{
-								class: "is-hidden-mobile",
+								class: "is-hidden-mobile pl-1 pr-1",
 								i18n: "undo"
 							},
 							"undo"
@@ -5589,8 +5595,9 @@ function build_ui$9(gobj) {
 					[
 						"button",
 						{
-							class: "button p-1 is-flex is-flex-direction-column is-align-items-center",
-							style: "width:100%;"
+							class: "button p-1",
+							title: "clear",
+							"aria-label": "clear"
 						},
 						[[
 							"span",
@@ -5599,7 +5606,7 @@ function build_ui$9(gobj) {
 						], [
 							"span",
 							{
-								class: "is-hidden-mobile",
+								class: "is-hidden-mobile pl-1 pr-1",
 								i18n: "clear"
 							},
 							"clear"
@@ -5613,14 +5620,15 @@ function build_ui$9(gobj) {
 			], [
 				"div",
 				{
-					class: "p-1 is-flex is-flex-direction-column is-align-items-center",
-					style: "width:100%; row-gap:6px;"
+					class: "p-1 is-flex is-flex-direction-row is-align-items-center",
+					style: "column-gap:6px;"
 				},
 				[[
 					"button",
 					{
-						class: "button p-1 is-flex is-flex-direction-column is-align-items-center",
-						style: "width:100%;"
+						class: "button p-1",
+						title: "copy",
+						"aria-label": "copy"
 					},
 					[[
 						"span",
@@ -5629,7 +5637,7 @@ function build_ui$9(gobj) {
 					], [
 						"span",
 						{
-							class: "is-hidden-mobile",
+							class: "is-hidden-mobile pl-1 pr-1",
 							i18n: "copy"
 						},
 						"copy"
@@ -5641,8 +5649,9 @@ function build_ui$9(gobj) {
 				], [
 					"button",
 					{
-						class: "button p-1 is-flex is-flex-direction-column is-align-items-center",
-						style: "width:100%;"
+						class: "button p-1",
+						title: "paste",
+						"aria-label": "paste"
 					},
 					[[
 						"span",
@@ -5651,7 +5660,7 @@ function build_ui$9(gobj) {
 					], [
 						"span",
 						{
-							class: "is-hidden-mobile",
+							class: "is-hidden-mobile pl-1 pr-1",
 							i18n: "paste"
 						},
 						"paste"
@@ -5665,6 +5674,7 @@ function build_ui$9(gobj) {
 		]]
 	]);
 	gobj_write_attr(gobj, "$container", $container);
+	apply_form_mode(gobj, $container.querySelector("form"));
 	refresh_language($container, t);
 	let $parent = gobj_read_attr(gobj, "$parent");
 	if ($parent) $parent.appendChild($container);
@@ -5707,7 +5717,11 @@ function build_html_form(gobj, $form, prefix, template) {
 		const field_desc = template_get_field_desc(key, value);
 		let html_field_conf = build_form_field_conf(gobj, field_desc);
 		html_field_conf.name = field_desc.name;
-		html_field_conf.label = field_desc.header;
+		let topic_name = gobj_read_str_attr(gobj, "topic_name");
+		let label_keys = topic_name ? [topic_name + "." + field_desc.name, field_desc.name] : [field_desc.name];
+		const NO_I18N = "\0";
+		html_field_conf.label = t(label_keys, { defaultValue: field_desc.header });
+		html_field_conf.label_i18n = t(field_desc.name, { defaultValue: NO_I18N }) !== NO_I18N ? field_desc.name : null;
 		html_field_conf.placeholder = field_desc.placeholder ? t(field_desc.placeholder) : "";
 		let placeholders = gobj_read_attr(gobj, "placeholders");
 		if (placeholders[key]) html_field_conf.placeholder = placeholders[key];
@@ -5751,7 +5765,7 @@ function build_form_field_conf(gobj, field_desc) {
 	switch (field_desc.type) {
 		case "object":
 		case "dict":
-			field_conf.tag = "fieldset";
+			field_conf.tag = "jsoneditor";
 			break;
 		case "template":
 			field_conf.tag = "fieldset";
@@ -5766,7 +5780,7 @@ function build_form_field_conf(gobj, field_desc) {
 			break;
 		case "array":
 		case "list":
-			field_conf.tag = "table";
+			field_conf.tag = "jsoneditor";
 			break;
 		case "enum":
 			switch (field_desc.real_type) {
@@ -5784,7 +5798,10 @@ function build_form_field_conf(gobj, field_desc) {
 			}
 			break;
 		case "hook": break;
-		case "fkey": break;
+		case "fkey":
+			field_conf.tag = "select2";
+			field_conf.options = get_fkey_select_options(gobj, field_desc);
+			break;
 		case "image":
 		case "string":
 			field_conf.tag = "input";
@@ -5869,6 +5886,112 @@ function build_form_field_conf(gobj, field_desc) {
 	}
 	return field_conf;
 }
+/************************************************************
+*  Options for a fkey field: the ids of the parent topic's
+*  rows, taken from the `fkey_options` attr
+*  ({topic_name: [ids or {id} records]}, supplied by the host —
+*  the form never queries the backend or its parent itself).
+*  Read at build time.
+************************************************************/
+function get_fkey_select_options(gobj, field_desc) {
+	let fkey_desc = field_desc.fkey;
+	if (!is_object(fkey_desc) || Object.keys(fkey_desc).length === 0) {
+		log_error(sprintf("%s: fkey field '%s' without fkey mapping", gobj_short_name(gobj), field_desc.name));
+		return [];
+	}
+	let topic_name = Object.keys(fkey_desc)[0];
+	let fkey_options = gobj_read_attr(gobj, "fkey_options");
+	let list = is_object(fkey_options) ? fkey_options[topic_name] : null;
+	if (!is_array(list)) {
+		log_warning(sprintf("%s: no fkey_options for topic '%s' (field '%s')", gobj_short_name(gobj), topic_name, field_desc.name));
+		return [];
+	}
+	let options = [];
+	for (let item of list) {
+		let id = is_object(item) ? item.id : item;
+		if (is_string(id) && !empty_string(id)) options.push(id);
+	}
+	return options;
+}
+/************************************************************
+*  Encode the select2 value (array of ids) into fkey ref(s)
+*  "topic_name^id^hook_name", shaped by the column real type:
+*      string      -> single ref (or null if no selection)
+*      object/dict -> {ref: true, ...}
+*      array/list  -> [ref, ...]
+************************************************************/
+function build_fkey_ref$1(gobj, field_desc, value) {
+	let fkey_desc = field_desc.fkey;
+	if (!is_object(fkey_desc) || Object.keys(fkey_desc).length === 0) {
+		log_error(sprintf("%s: fkey field '%s' without fkey mapping", gobj_short_name(gobj), field_desc.name));
+		return null;
+	}
+	let topic_name = Object.keys(fkey_desc)[0];
+	let hook_name = fkey_desc[topic_name];
+	let refs;
+	switch (field_desc.real_type) {
+		case "string":
+			refs = null;
+			break;
+		case "object":
+		case "dict":
+			refs = {};
+			break;
+		case "array":
+		case "list":
+			refs = [];
+			break;
+		default:
+			log_error(sprintf("%s: fkey field '%s' with bad real_type '%s'", gobj_short_name(gobj), field_desc.name, field_desc.real_type));
+			return null;
+	}
+	if (!is_array(value)) value = value ? [value] : [];
+	for (let v of value) {
+		let id = is_object(v) ? v.id : v;
+		if (!is_string(id) || empty_string(id)) {
+			log_error(sprintf("%s: fkey field '%s' with bad value: %s", gobj_short_name(gobj), field_desc.name, JSON.stringify(v)));
+			continue;
+		}
+		let ref = topic_name + "^" + id + "^" + hook_name;
+		switch (field_desc.real_type) {
+			case "string": return ref;
+			case "object":
+			case "dict":
+				refs[ref] = true;
+				break;
+			case "array":
+			case "list":
+				refs.push(ref);
+				break;
+		}
+	}
+	return refs;
+}
+/************************************************************
+*  Apply the form mode to the pkey field:
+*      "update" -> pkey readonly, not required
+*      "create" -> pkey writable and required (readonly if rowid)
+*  Empty form_mode keeps the template-declared behaviour
+*  (backward compatible).
+************************************************************/
+function apply_form_mode(gobj, $form) {
+	let mode = gobj_read_str_attr(gobj, "form_mode");
+	if (empty_string(mode)) return;
+	let pkey = gobj_read_str_attr(gobj, "pkey");
+	let $input = $form.querySelector(`[name="${pkey}"]`);
+	if (!$input) {
+		log_error(sprintf("%s: form_mode '%s' but form has no pkey field '%s'", gobj_short_name(gobj), mode, pkey));
+		return;
+	}
+	let is_rowid = $input.field_desc && $input.field_desc.type === "rowid";
+	if (mode === "create" && !is_rowid) {
+		$input.removeAttribute("readonly");
+		$input.setAttribute("required", "");
+	} else {
+		$input.setAttribute("readonly", "readonly");
+		$input.removeAttribute("required");
+	}
+}
 /******************************************************************
 *  With html field conf builds an html element,
 *  ready to add to the form
@@ -5899,7 +6022,7 @@ function build_form_field_conf(gobj, field_desc) {
 *      default_value:
 *  }
 ******************************************************************/
-function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, name, label, placeholder, options, extras, readonly, required, hidden, default_value }) {
+function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, name, label, label_i18n, placeholder, options, extras, readonly, required, hidden, default_value }) {
 	let $element;
 	let kw_add_table_row = {
 		$row: null,
@@ -5921,7 +6044,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 								"label",
 								{
 									class: "label ",
-									i18n: label,
+									i18n: label_i18n || label,
 									for: name
 								},
 								label
@@ -5955,7 +6078,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 								"label",
 								{
 									class: "label ",
-									i18n: label,
+									i18n: label_i18n || label,
 									for: name
 								},
 								label
@@ -5997,7 +6120,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 						"label",
 						{
 							class: "label ",
-							i18n: label,
+							i18n: label_i18n || label,
 							for: name
 						},
 						label
@@ -6028,7 +6151,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 						"label",
 						{
 							class: "label ",
-							i18n: label,
+							i18n: label_i18n || label,
 							for: name
 						},
 						label
@@ -6059,7 +6182,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 						"label",
 						{
 							class: "label",
-							i18n: label
+							i18n: label_i18n || label
 						},
 						label
 					]]
@@ -6143,7 +6266,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 					"label",
 					{
 						class: "label ",
-						i18n: label,
+						i18n: label_i18n || label,
 						for: name
 					},
 					label
@@ -6169,7 +6292,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 	switch (tag) {
 		case "input": {
 			let attrs = {
-				class: `input ${name === "id" ? "with-focus" : ""}`,
+				class: `input ${name === gobj_read_str_attr(gobj, "pkey") ? "with-focus" : ""}`,
 				name,
 				type: inputType,
 				placeholder
@@ -6222,8 +6345,8 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 			$control.appendChild($extend);
 			break;
 		}
-		case "select":
-			$extend = createElement2([
+		case "select": {
+			let $wrapper = createElement2([
 				"div",
 				{ class: "select" },
 				[
@@ -6236,11 +6359,16 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 							i18n: option
 						},
 						option
-					])
+					]),
+					{ "change": function(evt) {
+						gobj_send_event(gobj, "EV_RECORD_CHANGED", {}, gobj);
+					} }
 				]
 			]);
-			$control.appendChild($extend);
+			$control.appendChild($wrapper);
+			$extend = $wrapper.querySelector("select");
 			break;
+		}
 		case "select2":
 			$extend = createElement2([
 				"select",
@@ -6262,6 +6390,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 			$extend.tom_select = new TomSelect($extend, {
 				allowEmptyOption: true,
 				placeholder,
+				maxItems: field_desc.type === "fkey" && field_desc.real_type === "string" ? 1 : null,
 				plugins: {
 					"clear_button": { "title": t("Remove all selected options") },
 					"no_active_items": {},
@@ -6273,17 +6402,26 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 				gobj_send_event(gobj, "EV_RECORD_CHANGED", {}, gobj);
 			});
 			break;
-		case "checkbox":
-			$extend = createElement2([
+		case "checkbox": {
+			let $wrapper = createElement2([
 				"label",
 				{ class: "checkbox" },
-				["input", {
-					type: "checkbox",
-					name
-				}]
+				[
+					"input",
+					{
+						type: "checkbox",
+						name
+					},
+					"",
+					{ "change": function(evt) {
+						gobj_send_event(gobj, "EV_RECORD_CHANGED", {}, gobj);
+					} }
+				]
 			]);
-			$control.appendChild($extend);
+			$control.appendChild($wrapper);
+			$extend = $wrapper.querySelector("input");
 			break;
+		}
 		case "radio":
 			$extend = createOneHtml(`
                    <label class="radio">
@@ -6296,6 +6434,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 		case "jsoneditor": {
 			let attrs = {
 				class: "jsoneditor jse-theme-dark",
+				name,
 				style: ""
 			};
 			Object.assign(attrs, extras);
@@ -6303,6 +6442,18 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 			else if (required) attrs.required = "";
 			$extend = createElement2(["div", attrs]);
 			$control.appendChild($extend);
+			$extend.jsoneditor = new JSONEditor({
+				target: $extend,
+				props: {
+					readOnly: !!readonly,
+					onChange: function() {
+						gobj_send_event(gobj, "EV_RECORD_CHANGED", {}, gobj);
+					},
+					timestampTag: function({ field, value, path }) {
+						return field === "__t__" || field === "__tm__" || field === "tm" || field === "t" || field === "time" || field === "from_t" || field === "to_t" || field === "t_input" || field === "t_output" || field === "from_tm" || field === "to_tm";
+					}
+				}
+			});
 			break;
 		}
 		case "fieldset": {
@@ -6698,7 +6849,7 @@ function template2columns(gobj, columns, template, sub_elements) {
 /************************************************************
 *
 ************************************************************/
-function validate_form$1(gobj, $form) {
+function validate_form(gobj, $form) {
 	let validated = true;
 	if (!$form.checkValidity()) validated = false;
 	$form.querySelectorAll(".yui-tabulator-table").forEach(($table) => {
@@ -6719,7 +6870,7 @@ function getInputValue($input) {
 /************************************************************
 *  Function to get input value based on its type
 ************************************************************/
-function get_form_values$1(gobj, $form) {
+function get_form_values(gobj, $form) {
 	const record = {};
 	$form.querySelectorAll(".yui-form-data-input").forEach(($input) => {
 		$input.closest(".xfield");
@@ -6800,9 +6951,10 @@ function get_form_values$1(gobj, $form) {
 /************************************************************
 *
 ************************************************************/
-function clear_data$1(gobj, $form) {
+function clear_data(gobj, $form) {
+	let pkey = gobj_read_str_attr(gobj, "pkey");
 	$form.querySelectorAll("input, select, textarea, .jsoneditor").forEach(($input) => {
-		if ($input.name !== "id") if ($input.classList.contains("jsoneditor")) {
+		if ($input.name !== pkey) if ($input.classList.contains("jsoneditor")) {
 			let jsoneditor = $input.jsoneditor;
 			if (jsoneditor) jsoneditor.set({ text: "" });
 		} else if ($input.type === "checkbox") $input.checked = false;
@@ -6821,7 +6973,7 @@ function clear_data$1(gobj, $form) {
 /************************************************************
 *
 ************************************************************/
-function clear_validation$1(gobj, $form) {
+function clear_validation(gobj, $form) {
 	$form.querySelectorAll("input").forEach(($input) => {
 		$input.classList.remove("is-danger");
 	});
@@ -6859,10 +7011,10 @@ function convertColor(color) {
 /************************************************************
 *
 ************************************************************/
-function set_form_values$1(gobj, template, $form, record) {
+function set_form_values(gobj, template, $form, record) {
 	let modified = false;
-	clear_data$1(gobj, $form);
-	if (!record || record.length === 0) record = create_template_record(template);
+	clear_data(gobj, $form);
+	if (!record || Object.keys(record).length === 0) record = create_template_record(template);
 	$form.querySelectorAll(".yui-form-data-input").forEach(($input) => {
 		let field_desc = $input.field_desc;
 		let name = $input.dataset.treedb_name;
@@ -6878,10 +7030,16 @@ function set_form_values$1(gobj, template, $form, record) {
 			modified = true;
 		}
 		value = treedb_value_2_form_value(gobj, field_desc, value);
+		if (value === void 0) value = null;
 		switch (tag) {
 			case "input":
 				switch (input_type) {
-					case "datetime-local": break;
+					case "datetime-local":
+						if (value instanceof Date && !isNaN(value.getTime())) {
+							let pad = (n) => String(n).padStart(2, "0");
+							$input.value = `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}T${pad(value.getHours())}:${pad(value.getMinutes())}`;
+						} else $input.value = "";
+						break;
 					case "color":
 						$input.value = convertColor(value);
 						break;
@@ -6908,11 +7066,11 @@ function set_form_values$1(gobj, template, $form, record) {
 				break;
 			case "jsoneditor":
 				let jsoneditor = $input.jsoneditor;
-				if (jsoneditor) jsoneditor.set(value);
+				if (jsoneditor) jsoneditor.set(value ? value : { text: "" });
 				break;
 			case "fieldset": break;
 			case "table":
-				load_tabulator_data(gobj, $input, value);
+				load_tabulator_data(gobj, $input, value ? value : []);
 				break;
 			case "coordinates":
 				if ($input.tagName !== "INPUT") $input = $input.querySelector("input");
@@ -6958,7 +7116,22 @@ function treedb_value_2_form_value(gobj, field_desc, value) {
 	let type = field_desc.type;
 	field_desc.real_type;
 	switch (type) {
-		case "fkey":
+		case "fkey": {
+			let new_value = [];
+			if (is_string(value) && !empty_string(value)) {
+				let fkey = treedb_decoder_fkey(field_desc, value);
+				if (fkey) new_value.push(fkey.id);
+			} else if (is_array(value)) for (let v of value) {
+				let fkey = treedb_decoder_fkey(field_desc, v);
+				if (fkey) new_value.push(fkey.id);
+			}
+			else if (is_object(value)) for (let v of Object.keys(value)) {
+				let fkey = treedb_decoder_fkey(field_desc, v);
+				if (fkey) new_value.push(fkey.id);
+			}
+			value = new_value;
+			break;
+		}
 		case "hook":
 		case "enum":
 		case "uuid":
@@ -6968,8 +7141,7 @@ function treedb_value_2_form_value(gobj, field_desc, value) {
 		case "url": break;
 		case "now":
 		case "time":
-			value = parseInt(value) || 0;
-			value = new Date(value);
+			value = /* @__PURE__ */ new Date((parseInt(value) || 0) * 1e3);
 			break;
 		case "date":
 		case "color":
@@ -6985,13 +7157,19 @@ function treedb_value_2_form_value(gobj, field_desc, value) {
 		case "base64": break;
 		case "string":
 		case "integer":
+		case "real":
+		case "boolean": break;
 		case "object":
 		case "dict":
+			value = { json: is_object(value) ? value : {} };
+			break;
+		case "blob":
+			value = { json: is_object(value) || is_array(value) ? value : {} };
+			break;
 		case "array":
 		case "list":
-		case "real":
-		case "boolean": break;
-		case "blob": break;
+			value = { json: is_array(value) ? value : [] };
+			break;
 		case "number": break;
 		case "coordinates":
 			let longitude = 0;
@@ -7023,7 +7201,9 @@ function form_value_2_treedb_value(gobj, field_desc, value) {
 	let type = field_desc.type;
 	let real_type = field_desc.real_type;
 	switch (type) {
-		case "fkey": break;
+		case "fkey":
+			value = build_fkey_ref$1(gobj, field_desc, value);
+			break;
 		case "hook":
 			value = null;
 			break;
@@ -7131,7 +7311,9 @@ function ac_load_record(gobj, event, kw, src) {
 	gobj_write_attr(gobj, "record", kw);
 	let $form = gobj_read_attr(gobj, "$container").querySelector("form");
 	gobj_write_bool_attr(gobj, "initialized", false);
-	set_changed_stated(gobj, set_form_values$1(gobj, gobj_read_attr(gobj, "template"), $form, kw));
+	let modified = set_form_values(gobj, gobj_read_attr(gobj, "template"), $form, kw);
+	apply_form_mode(gobj, $form);
+	set_changed_stated(gobj, modified);
 	gobj_write_bool_attr(gobj, "initialized", true);
 	return 0;
 }
@@ -7141,8 +7323,8 @@ function ac_load_record(gobj, event, kw, src) {
 ************************************************************/
 function ac_save_record(gobj, event, kw, src) {
 	let $form = gobj_read_attr(gobj, "$container").querySelector("form");
-	if (validate_form$1(gobj, $form)) {
-		gobj_publish_event(gobj, "EV_SAVE_RECORD", get_form_values$1(gobj, $form));
+	if (validate_form(gobj, $form)) {
+		gobj_publish_event(gobj, "EV_SAVE_RECORD", get_form_values(gobj, $form));
 		set_changed_stated(gobj, false);
 	} else {
 		kw.abort_close = true;
@@ -7156,7 +7338,7 @@ function ac_save_record(gobj, event, kw, src) {
 function ac_undo_record(gobj, event, kw, src) {
 	let $form = gobj_read_attr(gobj, "$container").querySelector("form");
 	gobj_write_bool_attr(gobj, "initialized", false);
-	set_form_values$1(gobj, gobj_read_attr(gobj, "template"), $form, gobj_read_attr(gobj, "record"));
+	set_form_values(gobj, gobj_read_attr(gobj, "template"), $form, gobj_read_attr(gobj, "record"));
 	set_changed_stated(gobj, false);
 	gobj_write_bool_attr(gobj, "initialized", true);
 	return 0;
@@ -7166,8 +7348,8 @@ function ac_undo_record(gobj, event, kw, src) {
 ************************************************************/
 function ac_clear_record(gobj, event, kw, src) {
 	let $form = gobj_read_attr(gobj, "$container").querySelector("form");
-	clear_validation$1(gobj, $form);
-	clear_data$1(gobj, $form);
+	clear_validation(gobj, $form);
+	clear_data(gobj, $form);
 	return 0;
 }
 /************************************************************
@@ -7212,8 +7394,8 @@ function ac_record_changed(gobj, event, kw, src) {
 ************************************************************/
 function ac_copy_record(gobj, event, kw, src) {
 	let $form = gobj_read_attr(gobj, "$container").querySelector("form");
-	if (validate_form$1(gobj, $form)) {
-		let data = { record: get_form_values$1(gobj, $form) };
+	if (validate_form(gobj, $form)) {
+		let data = { record: get_form_values(gobj, $form) };
 		navigator.clipboard.writeText(JSON.stringify(data));
 	}
 	return 0;
@@ -7226,7 +7408,7 @@ function ac_paste_record(gobj, event, kw, src) {
 	let record = kw.record;
 	if (is_object(record)) {
 		gobj_write_bool_attr(gobj, "initialized", true);
-		set_form_values$1(gobj, gobj_read_attr(gobj, "template"), $form, record);
+		set_form_values(gobj, gobj_read_attr(gobj, "template"), $form, record);
 	}
 	return 0;
 }
@@ -7372,6 +7554,7 @@ function create_gclass$11(gclass_name) {
 *          Register GClass
 ***************************************************************/
 function register_c_yui_form() {
+	if (gclass_find_by_name(GCLASS_NAME$11, false)) return 0;
 	return create_gclass$11(GCLASS_NAME$11);
 }
 //#endregion
@@ -8449,7 +8632,7 @@ function onClick(gobj, e) {
 	const map = gobj.priv.xmap;
 	const coordinates = e.features[0].geometry.coordinates.slice();
 	const properties = e.features[0].properties;
-	const gobj_service = gobj_find_service(properties.gobj_service_name, true);
+	const gobj_service = properties.gobj_service_name ? gobj_find_service(properties.gobj_service_name, false) : null;
 	if (gobj_service) {
 		let window_service_name = `window-map-${clean_name(gobj_name(gobj_service))}`;
 		let popupContent = createElement2([
@@ -11743,6 +11926,93 @@ function resolve_route(item_index, route) {
 	};
 }
 //#endregion
+//#region src/shell_section_index.js
+/***********************************************************************
+*          shell_section_index.js
+*
+*      Pure helper for C_YUI_SHELL: synthesize the stage target of a
+*      section-index landing route.
+*
+*      A level-1 menu item that declares `submenu.index` opts out of
+*      the redirect-to-default-child behaviour: its own route becomes
+*      a real resting, deep-linkable route whose view is the submenu
+*      itself rendered as a "cards" C_YUI_NAV (the shell's view
+*      contract only requires a $container by the end of mt_create,
+*      which C_YUI_NAV already satisfies).  Config:
+*
+*          "submenu": {
+*              "render": { "top-sub": "tabs" },
+*              "index":  true            — landing in stage "main"
+*              "index":  {"stage": "x"}  — landing in stage "x"
+*          }
+*
+*      Precedence: an explicit inline `target` on the item wins (this
+*      helper returns null then).  When the target is synthesized,
+*      `submenu.default` becomes inert for the section: navigate_to()
+*      only redirects to the default child while the entry has NO
+*      target.
+*
+*      Tabs and cards never coexist (DRY of navigation): while the
+*      index is on stage the shell collapses the secondary zone, and
+*      for index sections the tab strip defaults to desktop/tablet
+*      only — on mobile a "backbar" nav (← <section>) takes its place
+*      inside a child view.  See secondary_nav_renders().
+*
+*      Split out of c_yui_shell.js so it can be unit-tested without
+*      a DOM.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/************************************************************
+*  Return the synthesized target for `item`'s section route,
+*  or null when the item doesn't opt in.
+************************************************************/
+function section_index_target(menu_id, item) {
+	if (!item || !item.route || item.target) return null;
+	let sub = item.submenu;
+	if (!sub || !Array.isArray(sub.items) || !sub.index) return null;
+	return {
+		stage: (typeof sub.index === "object" ? sub.index : {}).stage || "main",
+		gclass: "C_YUI_NAV",
+		kw: {
+			menu_id: `index.${menu_id}.${item.id}`,
+			nav_label: item.name || item.id || "",
+			menu_items: sub.items,
+			layout: "cards",
+			level: "secondary"
+		}
+	};
+}
+/************************************************************
+*  Return the list of render configs for one (submenu, zone)
+*  pair.  `layout` is the raw submenu.render[zone] value
+*  (string or object).
+*
+*  Without submenu.index: the declared render, unchanged.
+*  With submenu.index (list → detail):
+*      - the declared nav defaults to show_on ">=tablet" (an
+*        explicit show_on in the render object wins);
+*      - a "backbar" nav (show_on "<tablet") is appended so a
+*        child view offers "← <section>" on mobile instead of
+*        the duplicated tab strip.  Disable with
+*        index: {backbar: false}; tune its breakpoints with
+*        index: {backbar: {show_on: "..."}}.
+************************************************************/
+function secondary_nav_renders(item, layout) {
+	let cfg = layout && typeof layout === "object" ? Object.assign({}, layout) : { layout: String(layout || "vertical") };
+	let sub = item && item.submenu || {};
+	if (!sub.index) return [cfg];
+	let index_cfg = typeof sub.index === "object" ? sub.index : {};
+	if (!cfg.show_on) cfg.show_on = ">=tablet";
+	if (index_cfg.backbar === false) return [cfg];
+	return [cfg, {
+		layout: "backbar",
+		show_on: (typeof index_cfg.backbar === "object" && index_cfg.backbar ? index_cfg.backbar : {}).show_on || "<tablet",
+		back_route: item && item.route || ""
+	}];
+}
+//#endregion
 //#region src/c_yui_shell.js
 /***********************************************************************
 *          c_yui_shell.js
@@ -11762,6 +12032,11 @@ function resolve_route(item_index, route) {
 *      $container in its stage, hide the previous one. Lifecycle per item
 *      decides when the gobj is created/destroyed.
 *
+*      A primary item with `submenu.index` gets a section-index landing:
+*      its own route mounts the submenu as a "cards" C_YUI_NAV in the
+*      stage instead of redirecting to the default child (see
+*      shell_section_index.js for the contract).
+*
 *      Hash-based 2-level routing (#/primary/secondary). No dependency on
 *      C_YUI_ROUTING.
 *
@@ -12137,12 +12412,13 @@ function build_item_index(gobj, config) {
 		let items = menu && menu.items || [];
 		for (let item of items) {
 			if (item.route) {
+				let target = item.target || section_index_target(menu_id, item);
 				let prev = priv.item_index[item.route];
-				if (!prev || !prev.target && item.target) priv.item_index[item.route] = {
+				if (!prev || !prev.target && target) priv.item_index[item.route] = {
 					item,
 					parent_item: null,
-					stage: item.target && item.target.stage || null,
-					target: item.target || null,
+					stage: target && target.stage || null,
+					target,
 					menu_id
 				};
 			}
@@ -12220,11 +12496,15 @@ function instantiate_menus(gobj, config) {
 					log_warning(`C_YUI_SHELL: submenu of '${menu_id}.${item.id}' renders in unknown zone '${zone_id}'`);
 					continue;
 				}
-				let $c = gobj_read_attr(instantiate_nav_in_zone(gobj, {
-					items: sub.items,
-					render: { [zone_id]: render_to_obj(layout) }
-				}, `secondary.${menu_id}.${item.id}`, zone_id, "secondary", item.name || ""), "$container");
-				if ($c) $c.classList.add("is-hidden");
+				let renders = secondary_nav_renders(item, render_to_obj(layout));
+				let sub_menu_id = `secondary.${menu_id}.${item.id}`;
+				for (let render_cfg of renders) {
+					let $c = gobj_read_attr(instantiate_nav_in_zone(gobj, {
+						items: sub.items,
+						render: { [zone_id]: render_cfg }
+					}, sub_menu_id, zone_id, "secondary", item.name || ""), "$container");
+					if ($c) $c.classList.add("is-hidden");
+				}
 			}
 		}
 	}
@@ -12238,9 +12518,8 @@ function instantiate_nav_in_zone(gobj, menu, menu_id, zone_id, level, nav_label)
 	let priv = gobj_read_attr(gobj, "priv");
 	let render_cfg = menu.render && (menu.render[zone_id] || menu.render["*"]) || { layout: "vertical" };
 	if (is_string(render_cfg)) render_cfg = { layout: render_cfg };
-	let nav_name = `nav_${menu_id.replace(/\./g, "_")}_${zone_id}`;
 	let layout = render_cfg.layout || "vertical";
-	let nav = gobj_create(nav_name, "C_YUI_NAV", {
+	let nav = gobj_create(`nav_${menu_id.replace(/\./g, "_")}_${zone_id}` + (layout === "backbar" ? "_backbar" : ""), "C_YUI_NAV", {
 		menu_id,
 		nav_label: nav_label || "",
 		menu_items: menu.items || [],
@@ -12249,6 +12528,8 @@ function instantiate_nav_in_zone(gobj, menu, menu_id, zone_id, level, nav_label)
 		icon_pos: render_cfg.icon_pos || default_icon_pos(zone_id),
 		show_label: render_cfg.show_label !== false,
 		level,
+		show_on: render_cfg.show_on || "",
+		back_route: render_cfg.back_route || "",
 		shell: gobj
 	}, gobj);
 	let $c = gobj_read_attr(nav, "$container");
@@ -12433,6 +12714,8 @@ function build_view_gobj(gobj, entry, route, stage) {
 	}
 	stage.el.appendChild($view);
 	gobj_start(view);
+	let priv = gobj_read_attr(gobj, "priv");
+	if (priv && typeof priv.translator === "function" && target.gclass === "C_YUI_NAV") refresh_language($view, priv.translator);
 	return view;
 }
 function safe_id(s) {
@@ -13017,7 +13300,7 @@ function update_secondary_nav_visibility(gobj, entry) {
 	let active_primary_id = entry.parent_item && entry.parent_item.id || entry.item && entry.item.id || "";
 	let target_secondary_id = `secondary.${entry.menu_id || ""}.${active_primary_id}`;
 	let active_primary = entry.parent_item || entry.item || null;
-	let has_secondary = !!(active_primary && active_primary.submenu && Array.isArray(active_primary.submenu.items) && active_primary.submenu.items.some((it) => it && it.route));
+	let has_secondary = !!!(!entry.parent_item && active_primary && active_primary.submenu && active_primary.submenu.index) && !!(active_primary && active_primary.submenu && Array.isArray(active_primary.submenu.items) && active_primary.submenu.items.some((it) => it && it.route));
 	let config = gobj_read_attr(gobj, "config") || {};
 	let zones_cfg = config.shell && config.shell.zones || {};
 	for (let z in zones_cfg) if (zones_cfg[z] && zones_cfg[z].host === "menu.secondary") {
@@ -13030,7 +13313,7 @@ function update_secondary_nav_visibility(gobj, entry) {
 		if (!nav_menu_id.startsWith("secondary.")) continue;
 		let $c = gobj_read_attr(nav, "$container");
 		if (!$c) continue;
-		if (nav_menu_id === target_secondary_id) $c.classList.remove("is-hidden");
+		if (nav_menu_id === target_secondary_id && has_secondary) $c.classList.remove("is-hidden");
 		else $c.classList.add("is-hidden");
 	}
 }
@@ -13215,6 +13498,86 @@ function yui_shell_close_dropdown(shell_gobj) {
 	close_toolbar_dropdown(shell_gobj);
 }
 //#endregion
+//#region src/nav_cards_helpers.js
+/***********************************************************************
+*          nav_cards_helpers.js
+*
+*      Pure descriptor builders for C_YUI_NAV's "cards" layout — a
+*      grid of tappable cards, one per item, used as the section-index
+*      landing of a submenu (list → detail pattern).  Split out of
+*      c_yui_nav.js so it can be unit-tested without a DOM: the
+*      functions return createElement2 node descriptors, never
+*      HTMLElements.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/************************************************************
+*  Descriptor of one card: an <a> carrying the same data-*
+*  contract as every other nav item (data-route/data-item-id/
+*  data-disabled), so C_YUI_NAV's delegated click handler and
+*  active-route highlight work unchanged.
+************************************************************/
+function card_descriptor(it, show_label) {
+	let children = [];
+	let label = it.name || "";
+	if (it.icon) children.push([
+		"span",
+		{ class: "icon is-medium" },
+		["i", {
+			class: it.icon,
+			"aria-hidden": "true"
+		}]
+	]);
+	if (show_label && label) children.push([
+		"span",
+		{
+			class: "yui-nav-label",
+			i18n: label
+		},
+		label
+	]);
+	let a_attrs = {
+		class: "yui-nav-item yui-nav-card",
+		href: it.route ? "#" + it.route : "#",
+		"data-item-id": it.id,
+		"data-route": it.route || "",
+		"data-disabled": it.disabled ? "1" : "0",
+		"aria-label": label || it.id
+	};
+	if (label) a_attrs["data-i18n-aria-label"] = label;
+	let tip = it.tooltip || it.aria_label;
+	if (tip) {
+		a_attrs.title = tip;
+		a_attrs["data-i18n-title"] = tip;
+	}
+	if (it.disabled) {
+		a_attrs["aria-disabled"] = "true";
+		a_attrs["tabindex"] = "-1";
+	}
+	return [
+		"a",
+		a_attrs,
+		children
+	];
+}
+/************************************************************
+*  Descriptor of the whole grid.  Decorative items (`header`/
+*  `divider`) are dropped, same policy as the tabs layout.
+************************************************************/
+function cards_grid_descriptor(items, show_label) {
+	let cards = [];
+	for (let it of items || []) {
+		if (!it || it.type === "header" || it.type === "divider") continue;
+		cards.push(card_descriptor(it, show_label));
+	}
+	return [
+		"div",
+		{},
+		cards
+	];
+}
+//#endregion
 //#region src/c_yui_nav.js
 /***********************************************************************
 *          c_yui_nav.js
@@ -13230,6 +13593,17 @@ function yui_shell_close_dropdown(shell_gobj) {
 *          "drawer"     — off-canvas vertical (toggled by hamburger)
 *          "submenu"    — Bulma .menu nested under a heading
 *          "accordion"  — Bulma .menu list with collapsible group
+*          "cards"      — grid of tappable cards (section-index landing;
+*                         mounted as a stage view by C_YUI_SHELL when a
+*                         primary item declares submenu.index)
+*          "backbar"    — single "← <section>" link back to the section
+*                         index; the mobile replacement of the tab strip
+*                         for submenu.index sections (the shell collapses
+*                         the secondary zone while the index is on stage)
+*
+*      The `show_on` attr (same expressions as the shell's zone
+*      `show_on`) applies breakpoint visibility classes to the nav
+*      container; build_ui re-applies them on every rebuild.
 *
 *      Each item supports:
 *          id, name, icon (CSS class or svg id), route, badge, disabled
@@ -13267,7 +13641,9 @@ var SUPPORTED_LAYOUTS = [
 	"tabs",
 	"drawer",
 	"submenu",
-	"accordion"
+	"accordion",
+	"cards",
+	"backbar"
 ];
 function is_decorative(it) {
 	return !!(it && (it.type === "header" || it.type === "divider"));
@@ -13285,6 +13661,8 @@ var attrs_table$4 = [
 	SDATA(data_type_t.DTP_STRING, "icon_pos", 0, "left", "left|right|top|bottom"),
 	SDATA(data_type_t.DTP_BOOLEAN, "show_label", 0, true, "Show item label next to/under the icon"),
 	SDATA(data_type_t.DTP_STRING, "level", 0, "primary", "primary|secondary"),
+	SDATA(data_type_t.DTP_STRING, "show_on", 0, "", "Breakpoint visibility expr (shell show_on syntax); empty = always"),
+	SDATA(data_type_t.DTP_STRING, "back_route", 0, "", "backbar layout: route of the section index the ← returns to"),
 	SDATA(data_type_t.DTP_POINTER, "shell", 0, null, "C_YUI_SHELL gobj (for navigation calls)"),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "Root HTMLElement of this nav"),
 	SDATA(data_type_t.DTP_STRING, "active_route", 0, "", "Currently active route"),
@@ -13368,11 +13746,23 @@ function build_ui$4(gobj) {
 		case "accordion":
 			$container = render_accordion(gobj, items);
 			break;
+		case "cards":
+			$container = render_cards(gobj, items);
+			break;
+		case "backbar":
+			$container = render_backbar(gobj);
+			break;
 		default: $container = render_vertical(gobj, items);
 	}
 	$container.setAttribute("data-nav-zone", zone);
 	$container.setAttribute("data-nav-layout", layout);
 	$container.classList.add("C_YUI_NAV", "yui-nav", `yui-nav-${layout}`);
+	let show_on = gobj_read_attr(gobj, "show_on") || "";
+	if (!empty_string(show_on) && show_on !== "*") {
+		let visible = breakpoints_from_expr(show_on);
+		for (let bp of BULMA_BP_ORDER) if (!visible[bp]) $container.classList.add(bulma_hidden_class(bp));
+		$container.setAttribute("data-show-on", show_on);
+	}
 	if (layout !== "drawer") {
 		$container.setAttribute("role", "navigation");
 		if (!$container.hasAttribute("aria-label")) {
@@ -13543,6 +13933,51 @@ function render_tabs(gobj, items) {
 		]
 	]);
 }
+function render_cards(gobj, items) {
+	return createElement2(cards_grid_descriptor(items, gobj_read_attr(gobj, "show_label")));
+}
+/************************************************************
+*  "backbar": a single "← <section>" link back to the section
+*  index route.  Static DOM — the active child view names itself
+*  in its own content, so the bar only carries the way back plus
+*  section context.  While the index itself is on stage the shell
+*  collapses the whole secondary zone (tabs and cards never
+*  coexist), so the bar needs no self-hiding logic.
+************************************************************/
+function render_backbar(gobj) {
+	let back_route = gobj_read_attr(gobj, "back_route") || "";
+	let label = gobj_read_attr(gobj, "nav_label") || "";
+	let label_attrs = { class: "yui-nav-label" };
+	if (label) label_attrs.i18n = label;
+	let a_attrs = {
+		class: "yui-nav-item yui-nav-back",
+		href: back_route ? "#" + back_route : "#",
+		"data-item-id": "__index__",
+		"data-route": back_route,
+		"aria-label": label || "back"
+	};
+	if (label) a_attrs["data-i18n-aria-label"] = label;
+	return createElement2([
+		"div",
+		{},
+		[
+			"a",
+			a_attrs,
+			[[
+				"span",
+				{ class: "icon is-small" },
+				["i", {
+					class: "yi-arrow-left",
+					"aria-hidden": "true"
+				}]
+			], [
+				"span",
+				label_attrs,
+				label
+			]]
+		]
+	]);
+}
 function render_drawer(gobj, items) {
 	let menu_id = gobj_read_attr(gobj, "menu_id") || "drawer";
 	let wrap = document.createElement("div");
@@ -13844,6 +14279,7 @@ function ac_route_changed(gobj, event, kw, src) {
 	gobj_write_attr(gobj, "active_route", route);
 	let $c = gobj_read_attr(gobj, "$container");
 	if (!$c) return 0;
+	if (gobj_read_attr(gobj, "layout") === "backbar") return 0;
 	$c.querySelectorAll(".is-active").forEach((n) => n.classList.remove("is-active"));
 	let id_to_mark = null;
 	if (level === "primary") {
@@ -14813,7 +15249,7 @@ function ac_treedb_node_deleted$1(gobj, event, kw, src) {
 *      record
 *  }
 ********************************************/
-function ac_create_record$1(gobj, event, kw, src) {
+function ac_create_record(gobj, event, kw, src) {
 	let treedb_name = gobj_read_str_attr(gobj, "treedb_name");
 	let topic_name = gobj_read_attr(src, "topic_name");
 	let record = kw.record;
@@ -14830,7 +15266,7 @@ function ac_create_record$1(gobj, event, kw, src) {
 *      record
 *  }
 ********************************************/
-function ac_update_record$1(gobj, event, kw, src) {
+function ac_update_record(gobj, event, kw, src) {
 	let treedb_name = gobj_read_str_attr(gobj, "treedb_name");
 	let topic_name = gobj_read_attr(src, "topic_name");
 	let record = kw.record;
@@ -14903,12 +15339,12 @@ function create_gclass$3(gclass_name) {
 		],
 		[
 			"EV_CREATE_RECORD",
-			ac_create_record$1,
+			ac_create_record,
 			null
 		],
 		[
 			"EV_UPDATE_RECORD",
-			ac_update_record$1,
+			ac_update_record,
 			null
 		],
 		[
@@ -15007,7 +15443,6 @@ var attrs_table$2 = [
 	SDATA(data_type_t.DTP_POINTER, "tabulator", 0, null, "Tabulator instance"),
 	SDATA(data_type_t.DTP_STRING, "table_id", 0, null, "Table div ID"),
 	SDATA(data_type_t.DTP_STRING, "toolbar_id", 0, null, "Toolbar ID"),
-	SDATA(data_type_t.DTP_STRING, "form_id", 0, null, "Edit form ID"),
 	SDATA(data_type_t.DTP_STRING, "popup_id", 0, null, "Edit form popup ID"),
 	SDATA_END()
 ];
@@ -15015,7 +15450,9 @@ var PRIVATE_DATA$2 = {
 	$container: null,
 	treedb_name: "",
 	topic_name: "",
-	tabulator: null
+	tabulator: null,
+	form: null,
+	$popup: null
 };
 var __gclass__$2 = null;
 function popup_mount_layer() {
@@ -15031,7 +15468,6 @@ function mt_create$2(gobj) {
 	let name = clean_name(gobj_name(gobj));
 	gobj_write_attr(gobj, "table_id", "table" + name);
 	gobj_write_attr(gobj, "toolbar_id", "toolbar" + name);
-	gobj_write_attr(gobj, "form_id", "form" + name);
 	gobj_write_attr(gobj, "popup_id", "popup" + name);
 	build_ui$2(gobj);
 	let subscriber = gobj_read_pointer_attr(gobj, "subscriber");
@@ -15048,6 +15484,7 @@ function mt_start$2(gobj) {
 *          Framework Method: Stop
 ***************************************************************/
 function mt_stop$2(gobj) {
+	close_form_dialog(gobj);
 	table__destroy(gobj);
 }
 /***************************************************************
@@ -15387,6 +15824,29 @@ function col_label(col, topic_name) {
 	return t(topic_name ? [topic_name + "." + col.id, col.id] : [col.id], { defaultValue: col.header || col.id });
 }
 /******************************************************************
+*   Column-title formatter: render the header as a span carrying
+*   `data-i18n` (the shared col id) so a live language switch —
+*   which calls refresh_language(document.body) — retranslates the
+*   Tabulator headers in place, without rebuilding the table. Only
+*   tag translatable columns; otherwise keep the schema header
+*   (refresh_language would otherwise overwrite it with the raw id).
+*   Tabulator re-runs this on redraw, so the full cascade re-applies.
+******************************************************************/
+function col_title_formatter(gobj, col) {
+	let topic_name = gobj_read_str_attr(gobj, "topic_name");
+	return function(cell, formatterParams, onRendered) {
+		let text = col_label(col, topic_name);
+		let attrs = {};
+		const NO_I18N = "\0";
+		if (t(col.id, { defaultValue: NO_I18N }) !== NO_I18N) attrs.i18n = col.id;
+		return createElement2([
+			"span",
+			attrs,
+			text
+		]);
+	};
+}
+/******************************************************************
 *   Build table with Tabulator
 *   This fn is called on start and when desc attribute is set.
 *   desc contains the description (columns) of table to create
@@ -15491,6 +15951,7 @@ function create_tabulator(gobj) {
 		}
 		let colDef = {
 			title: col_label(col, gobj_read_str_attr(gobj, "topic_name")),
+			titleFormatter: col_title_formatter(gobj, col),
 			field: col.id,
 			sorter,
 			hozAlign,
@@ -15543,7 +16004,13 @@ function create_tabulator(gobj) {
 		selectableRows: selectable,
 		footerElement: "<span class='yui-tabulator-rowcount' style='display:block;text-align:right;font-size:0.8rem;color:#6b7280;padding:0 0.6rem;'></span>"
 	});
-	let tabulator = new TabulatorFull(`#${table_id}`, tabulator_settings);
+	let $view_container = gobj_read_attr(gobj, "$container");
+	let $table_el = $view_container ? $view_container.querySelector(`#${table_id}`) : null;
+	if (!$table_el) {
+		log_error(`${gobj_short_name(gobj)}: table element '#${table_id}' not found in $container`);
+		return;
+	}
+	let tabulator = new TabulatorFull($table_el, tabulator_settings);
 	function update_rowcount() {
 		let $rc = tabulator.element && tabulator.element.querySelector(".yui-tabulator-rowcount");
 		if (!$rc) return;
@@ -15678,436 +16145,62 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field) {
 	}
 	return value;
 }
-/******************************************************************
-*   Build the topic form with bulma and select2
-******************************************************************/
-function build_topic_form(gobj) {
+/************************************************************
+*  Build the form template from desc.cols: only user-editable
+*  fields reach the form — writable cols, fkeys (linkable) and
+*  the pkey (the hosted C_YUI_FORM's form_mode drives the
+*  pkey's readonly/required state).
+************************************************************/
+function build_form_template(gobj) {
 	let desc = gobj_read_attr(gobj, "desc");
-	let $form = createElement2(["form", {
-		id: gobj_read_str_attr(gobj, "form_id"),
-		class: "box p-3",
-		novalidate: ""
-	}]);
-	for (let i = 0; i < desc.cols.length; i++) {
-		let col = desc.cols[i];
-		if (col.id.charAt(0) === "_") continue;
-		let [tag, form_input_type, options, extras] = transform__treedb_type_2_form_type(gobj, col);
-		if (!tag) continue;
-		let id = col.id;
-		let flag = col.flag;
-		let is_writable = str_in_list(flag, "writable");
-		let is_notnull = str_in_list(flag, "notnull");
-		let is_rowid = str_in_list(flag, "rowid");
-		let is_required = str_in_list(flag, "required");
-		let is_hidden = str_in_list(flag, "hidden");
-		str_in_list(flag, "persistent");
-		str_in_list(flag, "hook");
-		let is_fkey = str_in_list(flag, "fkey");
-		if (id === desc.pkey) is_writable = false;
-		if (is_fkey) is_writable = true;
-		if (!is_writable) {
-			if (id !== desc.pkey) continue;
-		}
-		if (is_hidden) continue;
-		if (is_rowid) {
-			is_writable = false;
-			is_required = false;
-			is_notnull = false;
-		}
-		let field_conf = {
-			tag,
-			inputType: form_input_type,
-			name: col.id,
-			label: col_label(col, gobj_read_str_attr(gobj, "topic_name")),
-			placeholder: "",
-			options,
-			extras,
-			readonly: !is_writable,
-			required: is_required,
-			hidden: is_hidden,
-			not_null: is_notnull,
-			is_pkey: id === desc.pkey,
-			is_rowid
-		};
-		let $field = create_html_field(field_conf);
-		$field.field_conf = field_conf;
-		$form.appendChild($field);
+	let template = [];
+	for (let col of desc.cols) {
+		if (!col.id || col.id.charAt(0) === "_") continue;
+		const field_desc = treedb_get_field_desc(col);
+		if (field_desc.is_hidden) continue;
+		if (field_desc.type === "hook") continue;
+		if (!field_desc.is_writable && field_desc.type !== "fkey" && col.id !== desc.pkey) continue;
+		template.push(col);
 	}
-	return $form;
+	return template;
 }
 /************************************************************
-*  Convert a col type from backend to frontend
-*  Return data to build the HTMLElement
-*
-*  Options format for select/select2:
-*      <option value="reading">Reading</option>
+*  Collect the linkable parent rows for every fkey col:
+*  {topic_name: rows}, asked to the topics manager (parent)
+*  with the same command the old embedded form used. Collected
+*  fresh on every dialog open, so new parent rows are always
+*  offered.
 ************************************************************/
-function transform__treedb_type_2_form_type(gobj, col) {
-	const field_desc = treedb_get_field_desc(col);
-	let tag = null;
-	let inputType = "";
-	let options = [];
-	let extras = {};
-	switch (field_desc.type) {
-		case "image":
-		case "string":
-			tag = "input";
-			inputType = "text";
-			break;
-		case "integer":
-			tag = "input";
-			extras.inputmode = "numeric";
-			break;
-		case "real":
-			tag = "input";
-			extras.inputmode = "decimal";
-			break;
-		case "rowid":
-			tag = "input";
-			inputType = "text";
-			break;
-		case "boolean":
-			tag = "checkbox";
-			break;
-		case "now":
-		case "time":
-			tag = "input";
-			inputType = "datetime-local";
-			switch (field_desc.real_type) {
-				case "string": break;
-				case "integer": break;
-			}
-			break;
-		case "color":
-			tag = "input";
-			inputType = "color";
-			switch (field_desc.real_type) {
-				case "string": break;
-				case "integer": break;
-			}
-			break;
-		case "email":
-			tag = "input";
-			inputType = "email";
-			extras.inputmode = "email";
-			break;
-		case "password":
-			tag = "input";
-			inputType = "password";
-			break;
-		case "url":
-			tag = "input";
-			inputType = "url";
-			extras.inputmode = "url";
-			break;
-		case "tel":
-			tag = "input";
-			inputType = "tel";
-			extras.inputmode = "tel";
-			break;
-		case "object":
-		case "dict":
-		case "template":
-		case "array":
-		case "list":
-		case "coordinates":
-		case "blob":
-			tag = "jsoneditor";
-			break;
-		case "enum":
-			tag = "select2";
-			switch (field_desc.real_type) {
-				case "string":
-				case "object":
-				case "dict":
-				case "array":
-				case "list":
-					options = list2options(field_desc.enum_list, "id", "id");
-					break;
-			}
-			break;
-		case "hook": break;
-		case "fkey":
-			tag = "select2";
-			switch (field_desc.real_type) {
-				case "string":
-				case "object":
-				case "dict":
-				case "array":
-				case "list":
-					options = get_fkey_options(gobj, col);
-					break;
-			}
-			break;
-	}
-	return [
-		tag,
-		inputType,
-		options,
-		extras
-	];
-}
-/******************************************************************
-*  Helper function to create different form elements
-*  Available types:
-*      - input
-*      - textarea
-*      - select
-*      - select2
-*      - checkbox
-*      - radio
-*      - jsoneditor
-*
-*  {
-*      tag: field tag,
-*      inputType: input type,
-*      name: id
-*      label: ""
-*      placeholder: "",
-*      options: [{id:"", value:""}]]
-*      extras: {}
-*      readonly: bool
-*      required: bool
-*      hidden: bool
-*      not_null: bool
-*      _col: col
-*  }
-******************************************************************/
-function create_html_field({ tag, inputType, name, label, placeholder, options, extras, readonly, required, hidden, not_null }) {
-	let base;
-	switch (tag) {
-		case "input":
-		case "textarea":
-		case "select":
-		case "select2":
-		case "checkbox":
-		case "radio":
-		case "jsoneditor":
-			base = [
-				"div",
-				{ class: "xfield field is-horizontal" },
-				[[
-					"div",
-					{ class: "field-label is-normal" },
-					[[
-						"label",
-						{
-							class: "label ",
-							i18n: label,
-							for: name
-						},
-						label
-					]]
-				], [
-					"div",
-					{ class: "field-body" },
-					[[
-						"div",
-						{ class: "field" },
-						[[
-							"div",
-							{ class: "control" },
-							[]
-						]]
-					]]
-				]]
-			];
-			break;
-		default: base = [
-			"div",
-			{ class: "control" },
-			"Unsupported element type"
-		];
-	}
-	let $element = createElement2(base);
-	let $control = $element.querySelector(".control");
-	switch (tag) {
-		case "input": {
-			let attrs = {
-				class: `input ${name === "id" ? "with-focus" : ""}`,
-				name,
-				type: inputType,
-				placeholder
-			};
-			Object.assign(attrs, extras);
-			if (readonly) attrs.readonly = "";
-			let $extend = createElement2([
-				"input",
-				attrs,
-				"",
-				{ "blur": function(evt) {
-					validate_field_on_blur(this);
-				} }
-			]);
-			$control.appendChild($extend);
-			$control.appendChild(createElement2([
-				"p",
-				{
-					class: "help is-danger",
-					style: "display:none"
-				},
-				""
-			]));
-			break;
-		}
-		case "jsoneditor": {
-			let attrs = {
-				class: "jsoneditor jse-theme-dark",
-				style: ""
-			};
-			Object.assign(attrs, extras);
-			if (readonly) attrs.readonly = "";
-			let $extend = createElement2(["div", attrs]);
-			$extend.setAttribute("name", name);
-			$control.appendChild($extend);
-			$control.appendChild(createElement2([
-				"p",
-				{
-					class: "help is-danger",
-					style: "display:none"
-				},
-				""
-			]));
-			break;
-		}
-		case "textarea": {
-			let attrs = {
-				class: "textarea",
-				name,
-				placeholder
-			};
-			Object.assign(attrs, extras);
-			if (readonly) attrs.readonly = "";
-			let $extend = createElement2([
-				"textarea",
-				attrs,
-				"",
-				{ "blur": function(evt) {
-					validate_field_on_blur(this);
-				} }
-			]);
-			$control.appendChild($extend);
-			$control.appendChild(createElement2([
-				"p",
-				{
-					class: "help is-danger",
-					style: "display:none"
-				},
-				""
-			]));
-			break;
-		}
-		case "select": {
-			let $extend = createElement2([
-				"div",
-				{ class: "select" },
-				[
-					"select",
-					{ name },
-					options.map((option) => [
-						"option",
-						{
-							value: option.id,
-							i18n: option.value
-						},
-						option.value
-					])
-				]
-			]);
-			$control.appendChild($extend);
-			$control.appendChild(createElement2([
-				"p",
-				{
-					class: "help is-danger",
-					style: "display:none"
-				},
-				""
-			]));
-			break;
-		}
-		case "select2": {
-			let $extend = createElement2([
-				"select",
-				{
-					name,
-					class: "select2-multiple",
-					multiple: "multiple",
-					style: "width: 100% !important;"
-				},
-				options.map((option) => [
-					"option",
-					{
-						value: option.id,
-						i18n: option.value
-					},
-					option.value
-				])
-			]);
-			$control.appendChild($extend);
-			$control.appendChild(createElement2([
-				"p",
-				{
-					class: "help is-danger",
-					style: "display:none"
-				},
-				""
-			]));
-			break;
-		}
-		case "checkbox": {
-			let $extend = createElement2([
-				"label",
-				{ class: "checkbox" },
-				["input", {
-					type: "checkbox",
-					name
-				}]
-			]);
-			$control.appendChild($extend);
-			$control.appendChild(createElement2([
-				"p",
-				{
-					class: "help is-danger",
-					style: "display:none"
-				},
-				""
-			]));
-			break;
-		}
-		case "radio":
-			for (const option of options) {
-				let $extend = createOneHtml(`
-                   <label class="radio">
-                      <input type="radio" name="${name}">
-                      ${t(option)}
-                    </label>
-                `);
-				$control.appendChild($extend);
-			}
-			$control.appendChild(createElement2([
-				"p",
-				{
-					class: "help is-danger",
-					style: "display:none"
-				},
-				""
-			]));
-			break;
-		default: log_error(`Unsupported element type, tag ${tag}`);
+function build_fkey_options(gobj) {
+	let desc = gobj_read_attr(gobj, "desc");
+	let fkey_options = {};
+	for (let col of desc.cols) {
+		if (treedb_get_field_desc(col).type !== "fkey" || !is_object(col.fkey)) continue;
+		let topic_name = Object.keys(col.fkey)[0];
+		if (!topic_name || fkey_options[topic_name] !== void 0) continue;
+		let webix = gobj_command(gobj_parent(gobj), "get_topic_data", { topic_name }, gobj);
+		fkey_options[topic_name] = webix && is_array(webix.data) ? webix.data : [];
 	}
-	return $element;
+	return fkey_options;
 }
-/******************************************************************
-*   Build topic form popup with bulma
-******************************************************************/
-function build_topic_modal(gobj) {
-	const $form = build_topic_form(gobj);
-	let title = t(gobj_read_str_attr(gobj, "topic_name"));
+/************************************************************
+*  Open the edit/create dialog hosting a C_YUI_FORM child.
+*  The child is created fresh on every open (schema and fkey
+*  options are read at its build time) and destroyed on close.
+*  Its EV_SAVE_RECORD (CHILD model) arrives already in treedb
+*  shape — see ac_form_save_record().
+************************************************************/
+function open_form_dialog(gobj, mode, record) {
+	close_form_dialog(gobj);
+	let priv = gobj.priv;
+	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 $element = createElement2([
 		"div",
 		{
-			id: gobj_read_str_attr(gobj, "popup_id"),
-			class: "modal"
+			id: popup_id,
+			class: "modal is-active"
 		},
 		[[
 			"div",
@@ -16116,333 +16209,120 @@ function build_topic_modal(gobj) {
 		], [
 			"div",
 			{ class: "modal-card modal-is-responsive" },
-			[
-				[
-					"header",
-					{ class: "modal-card-head p-3" },
-					[[
-						"p",
-						{
-							class: "modal-card-title",
-							style: "text-align:center;"
-						},
-						title
-					], ["button", {
+			[[
+				"header",
+				{ class: "modal-card-head p-3" },
+				[[
+					"p",
+					{
+						class: "modal-card-title",
+						style: "text-align:center;"
+					},
+					t(topic_name)
+				], [
+					"button",
+					{
 						class: "delete is-large",
 						"aria-label": "close"
-					}]]
-				],
-				[
-					"section",
-					{ class: "modal-card-body p-1" },
-					[$form]
-				],
-				[
-					"footer",
-					{ class: "modal-card-foot p-3" },
-					[[
-						"div",
-						{
-							class: "buttons",
-							style: "justify-content:center; width:100%;"
-						},
-						[
-							[
-								"button",
-								{
-									class: "button is-success px-4",
-									type: "submit"
-								},
-								[[
-									"span",
-									{ class: "icon" },
-									[["i", { class: "yi-floppy-disk" }]]
-								], [
-									"span",
-									{ i18n: "save" },
-									"save"
-								]],
-								{ click: function(evt) {
-									evt.stopPropagation();
-									evt.preventDefault();
-									let $form = $element.querySelector("form");
-									if (validate_form(gobj, $form)) {
-										let values = get_form_values($form);
-										let ret;
-										if ($form.__mode__ === "create") ret = gobj_send_event(gobj, "EV_CREATE_RECORD", values, gobj);
-										else ret = gobj_send_event(gobj, "EV_UPDATE_RECORD", values, gobj);
-										if (ret === 0) $element.classList.remove("is-active");
-									}
-								} }
-							],
-							[
-								"button",
-								{ class: "button px-4 form-close" },
-								[[
-									"span",
-									{ class: "icon" },
-									[["i", { class: "yi-xmark" }]]
-								], [
-									"span",
-									{ i18n: "cancel" },
-									"cancel"
-								]]
-							],
-							[
-								"button",
-								{ class: "button px-4" },
-								[[
-									"span",
-									{ class: "icon" },
-									[["i", { class: "yi-broom" }]]
-								], [
-									"span",
-									{ i18n: "clear" },
-									"clear"
-								]],
-								{ click: function(evt) {
-									evt.stopPropagation();
-									clear_validation(gobj, $form);
-									clear_data(gobj, $form);
-								} }
-							]
-						]
-					]]
-				]
-			]
+					},
+					"",
+					{ click: function(evt) {
+						evt.stopPropagation();
+						request_close_form_dialog(gobj);
+					} }
+				]]
+			], [
+				"section",
+				{
+					class: "modal-card-body p-2",
+					style: "display:flex; flex-direction:column;"
+				},
+				[]
+			]]
 		]],
 		{ click: function(evt) {
 			evt.stopPropagation();
 		} }
 	]);
-	$element.querySelectorAll(".modal-close, .form-close, .delete").forEach(function(element) {
-		element.addEventListener("click", function(event) {
-			event.stopPropagation();
-			$element.classList.remove("is-active");
-		});
-	});
-	refresh_language($element, t);
-	popup_mount_layer().appendChild($element);
-	$element.querySelectorAll(".jsoneditor").forEach(function(element) {
-		let font_family = "DejaVu Sans Mono, monospace";
-		element.style.setProperty("--jse-font-size-mono", "16px");
-		element.style.setProperty("--jse-font-family-mono", font_family);
-		element.jsoneditor = new JSONEditor({
-			target: element,
-			props: { timestampTag: function({ field, value, path }) {
-				return field === "__t__" || field === "__tm__" || field === "tm" || field === "from_t" || field === "to_t" || field === "t" || field === "t_input" || field === "t_output" || field === "from_tm" || field === "to_tm" || field === "time";
-			} }
-		});
-	});
-	$element.querySelectorAll(".select2-multiple").forEach((el) => {
-		if (el.tomselect) return;
-		new TomSelect(el, {
-			plugins: ["remove_button"],
-			create: false,
-			hideSelected: true,
-			closeAfterSelect: false
-		});
-	});
-	return $element;
-}
-/************************************************************
-*  Show a validation error on a field
-************************************************************/
-function show_field_error($field, message) {
-	$field.querySelectorAll("input, textarea, select").forEach((el) => {
-		el.classList.add("is-danger");
-	});
-	let $help = $field.querySelector(".help");
-	if ($help) {
-		$help.textContent = message;
-		$help.style.display = "block";
-	}
-}
-/************************************************************
-*  Clear a validation error from a field
-************************************************************/
-function clear_field_error($field) {
-	$field.querySelectorAll("input, textarea, select").forEach((el) => {
-		el.classList.remove("is-danger");
-	});
-	let $help = $field.querySelector(".help");
-	if ($help) {
-		$help.textContent = "";
-		$help.style.display = "none";
+	let $body = $element.querySelector(".modal-card-body");
+	let form = gobj_create_pure_child("form_" + clean_name(gobj_name(gobj)), "C_YUI_FORM", {
+		template: build_form_template(gobj),
+		record,
+		fkey_options: build_fkey_options(gobj),
+		form_mode: mode,
+		pkey: desc.pkey || "id",
+		topic_name,
+		editable: true,
+		$parent: $body
+	}, gobj);
+	priv.form = form;
+	priv.$popup = $element;
+	let $form_container = gobj_read_attr(form, "$container");
+	if ($form_container) {
+		$form_container.style.flex = "1 1 auto";
+		$form_container.style.minHeight = "0";
 	}
+	popup_mount_layer().appendChild($element);
+	refresh_language($element, t);
+	gobj_start(form);
+	let $with_focus = $element.querySelector(".with-focus");
+	if ($with_focus) $with_focus.focus();
 }
 /************************************************************
-*  Get the current value of a field for validation
+*  Close request from the dialog X: if the form carries
+*  unsaved changes ask first (EV_WINDOW_TO_CLOSE contract).
 ************************************************************/
-function get_field_value_for_validation($field, conf) {
-	switch (conf.tag) {
-		case "input": {
-			let $input = $field.querySelector("input");
-			if (!$input) return "";
-			if ($input.type === "checkbox") return $input.checked;
-			return $input.value;
-		}
-		case "checkbox": {
-			let $input = $field.querySelector("input[type=\"checkbox\"]");
-			if (!$input) return false;
-			return $input.checked;
-		}
-		case "textarea": {
-			let $el = $field.querySelector("textarea");
-			if (!$el) return "";
-			return $el.value;
-		}
-		case "select":
-		case "select2": {
-			let $el = $field.querySelector("select");
-			if (!$el) return "";
-			if ($el.tomselect) return $el.tomselect.getValue();
-			return $el.value;
-		}
-		case "jsoneditor": {
-			let $el = $field.querySelector(".jsoneditor");
-			if (!$el || !$el.jsoneditor) return "";
-			let val = $el.jsoneditor.get();
-			if (val.text !== void 0) return val.text;
-			return JSON.stringify(val.json);
-		}
-		case "radio": {
-			let $checked = $field.querySelector("input[type=\"radio\"]:checked");
-			if (!$checked) return "";
-			return $checked.value;
+function request_close_form_dialog(gobj) {
+	let priv = gobj.priv;
+	if (priv.form) {
+		let kw = {};
+		gobj_send_event(priv.form, "EV_WINDOW_TO_CLOSE", kw, gobj);
+		if (kw.abort_close) {
+			get_yesnocancel(t("All changes will be lost. Are you sure?"), function(evt) {
+				if (evt === "yes") close_form_dialog(gobj);
+			});
+			return;
 		}
 	}
-	return "";
+	close_form_dialog(gobj);
 }
 /************************************************************
-*  Check if a field value is empty
+*  Destroy the hosted form and remove the dialog DOM.
 ************************************************************/
-function is_field_value_empty(value) {
-	if (value === null || value === void 0 || value === "") return true;
-	if (Array.isArray(value) && value.length === 0) return true;
-	return false;
-}
-/************************************************************
-*  Determine if a field requires validation in the current mode
-************************************************************/
-function is_field_required(conf, mode) {
-	if (conf.is_pkey) return mode === "create" && !conf.is_rowid;
-	if (conf.readonly) return false;
-	return conf.required || conf.not_null;
-}
-/************************************************************
-*  Validate a single field on blur
-*  Called from input/textarea blur event handlers
-************************************************************/
-function validate_field_on_blur(element) {
-	let $field = element.closest(".xfield");
-	if (!$field || !$field.field_conf) return;
-	let conf = $field.field_conf;
-	let $form = element.closest("form");
-	if (!is_field_required(conf, $form ? $form.__mode__ : "update")) {
-		clear_field_error($field);
-		return;
+function close_form_dialog(gobj) {
+	let priv = gobj.priv;
+	if (priv.form) {
+		if (gobj_is_running(priv.form)) gobj_stop(priv.form);
+		gobj_destroy(priv.form);
+		priv.form = null;
 	}
-	if (is_field_value_empty(get_field_value_for_validation($field, conf))) show_field_error($field, t("this field is required"));
-	else clear_field_error($field);
-}
-/************************************************************
-*  Validate all required fields in the form
-*  Returns true if valid, false otherwise
-************************************************************/
-function validate_form(gobj, $form) {
-	let is_valid = true;
-	let first_invalid = null;
-	let mode = $form.__mode__ || "update";
-	$form.querySelectorAll(".xfield").forEach(($field) => {
-		let conf = $field.field_conf;
-		if (!conf) return;
-		if (!is_field_required(conf, mode)) {
-			clear_field_error($field);
-			return;
-		}
-		if (is_field_value_empty(get_field_value_for_validation($field, conf))) {
-			show_field_error($field, t("this field is required"));
-			is_valid = false;
-			if (!first_invalid) first_invalid = $field;
-		} else clear_field_error($field);
-	});
-	if (first_invalid) {
-		let $focusable = first_invalid.querySelector("input, select, textarea");
-		if ($focusable && $focusable.focus) $focusable.focus();
+	if (priv.$popup) {
+		if (priv.$popup.parentNode) priv.$popup.parentNode.removeChild(priv.$popup);
+		priv.$popup = null;
 	}
-	return is_valid;
-}
-/************************************************************
-*  Clear all validation errors from the form
-************************************************************/
-function clear_validation(gobj, $form) {
-	$form.querySelectorAll(".xfield").forEach(($field) => {
-		clear_field_error($field);
-	});
 }
 /************************************************************
-*  Before show edit/create from,
-*      set form state "update" or "create"
-*  Only the "id" field is modified,
-*      in "update" is readonly
-*      in "create" is writable
-*  Although by default the pkey (primary key) is "id",
-*      use always desc.pkey value, who knows all cases!
+*  True if the topic's pkey col carries the "rowid" flag.
 ************************************************************/
-function set_form_mode(gobj, $form, mode, index) {
+function pkey_is_rowid(gobj) {
 	let desc = gobj_read_attr(gobj, "desc");
-	let is_rowid = str_in_list(kwid_find_one_record(gobj, desc.cols, null, { "id": desc.pkey }).flag, "rowid");
-	let $id = $form.querySelector(`[name="${desc.pkey}"]`);
-	if ($id) if (mode === "update") {
-		$id.setAttribute("readonly", "readonly");
-		$id.removeAttribute("required");
-	} else if (is_rowid) {
-		$id.setAttribute("readonly", "readonly");
-		$id.removeAttribute("required");
-	} else {
-		$id.removeAttribute("readonly");
-		$id.setAttribute("required", "");
-	}
-	else log_error(sprintf("%s: form without id field ('%s')", gobj_short_name(gobj), desc.pkey));
-	if (is_rowid) mode = "create";
-	$form.__mode__ = mode;
-	$form.__index__ = index;
+	let col_pkey = kwid_find_one_record(gobj, desc.cols, null, { "id": desc.pkey });
+	if (!col_pkey) return false;
+	return str_in_list(col_pkey.flag, "rowid");
 }
 /************************************************************
 *  Show the edit "update" form of a row (record)
 *  internally called from the icon edit at Op column
 ************************************************************/
 function show_edit_form(gobj, row, index) {
-	let popup_id = gobj_read_str_attr(gobj, "popup_id");
-	let form_id = gobj_read_str_attr(gobj, "form_id");
-	let $element = document.getElementById(popup_id);
-	if (!$element) $element = build_topic_modal(gobj);
-	let $form = document.getElementById(form_id);
-	clear_validation(gobj, $form);
-	if (json_size(row) === 0 || json_size(row) === 1 && "_check_box_state_" in row) set_form_mode(gobj, $form, "create", index);
-	else set_form_mode(gobj, $form, "update", index);
-	set_form_values(gobj, $form, row);
-	$element.classList.add("is-active");
-	let $with_focus = $element.querySelector(".with-focus");
-	if ($with_focus) $with_focus.focus();
+	open_form_dialog(gobj, pkey_is_rowid(gobj) ? "create" : "update", row);
 }
 /************************************************************
 *  Show the edit "create" form to a new record
 *  internally called from the top toolbar +New button
 ************************************************************/
 function show_create_form(gobj, row) {
-	let popup_id = gobj_read_str_attr(gobj, "popup_id");
-	let form_id = gobj_read_str_attr(gobj, "form_id");
-	let $element = document.getElementById(popup_id);
-	if (!$element) $element = build_topic_modal(gobj);
-	let $form = document.getElementById(form_id);
-	clear_validation(gobj, $form);
-	set_form_mode(gobj, $form, "create", -1);
-	set_form_values(gobj, $form, row);
-	$element.classList.add("is-active");
-	let $with_focus = $element.querySelector(".with-focus");
-	if ($with_focus) $with_focus.focus();
+	open_form_dialog(gobj, "create", row);
 }
 /************************************************************
 *  Return column schema of field id
@@ -16456,174 +16336,6 @@ function get_schema_col(gobj, id) {
 	return null;
 }
 /************************************************************
-*
-************************************************************/
-function clear_data(gobj, $form) {
-	$form.querySelectorAll("input, select, textarea, .jsoneditor").forEach((input) => {
-		if (input.name !== "id") if (input.classList.contains("jsoneditor")) {
-			let jsoneditor = input.jsoneditor;
-			if (jsoneditor) jsoneditor.set({ text: "" });
-		} else if (input.type === "checkbox") input.checked = false;
-		else if (input.type === "radio") input.checked = false;
-		else if (input.type === "datetime-local") input.value = null;
-		else if (input.multiple) {
-			if (input.tomselect) input.tomselect.clear();
-		} else input.value = null;
-	});
-}
-/************************************************************
-*
-************************************************************/
-function get_form_values($form) {
-	const values = {};
-	$form.querySelectorAll("input, select, textarea, .jsoneditor").forEach((input) => {
-		if (input.classList.contains("jsoneditor")) {
-			let jsoneditor = input.jsoneditor;
-			if (jsoneditor) {
-				let name = input.getAttribute("name");
-				let value = jsoneditor.get();
-				if (value.text === void 0) values[name] = JSON.stringify(value.json, null, null);
-				else values[name] = value.text;
-			}
-		} else if (input.type === "checkbox") values[input.name] = input.checked;
-		else if (input.type === "radio") {
-			if (input.checked) values[input.name] = input.value;
-		} else if (input.type === "datetime-local") {
-			const date = new Date(input.value);
-			const epochTime = Math.floor(date.getTime() / 1e3);
-			values[input.name] = epochTime;
-		} else if (input.multiple) {
-			if (input.tomselect) values[input.name] = input.tomselect.getValue();
-		} else values[input.name] = input.value;
-	});
-	return values;
-}
-/************************************************************
-*  Convert a record column value from backend to frontend
-************************************************************/
-function epochToDateTimeLocal(epochTime) {
-	const date = /* @__PURE__ */ new Date(epochTime * 1e3);
-	const year = date.getFullYear();
-	const month = String(date.getMonth() + 1).padStart(2, "0");
-	const day = String(date.getDate()).padStart(2, "0");
-	const hours = String(date.getHours()).padStart(2, "0");
-	const minutes = String(date.getMinutes()).padStart(2, "0");
-	String(date.getSeconds()).padStart(2, "0");
-	return `${year}-${month}-${day}T${hours}:${minutes}`;
-}
-/************************************************************
-*
-************************************************************/
-function set_form_values(gobj, form, values) {
-	Object.keys(values).forEach((key) => {
-		let element = form.querySelector(`[name="${key}"]`);
-		if (element) {
-			let value = values[key];
-			let col = get_schema_col(gobj, key);
-			if (col) value = transform__treedb_value_2_form_value(gobj, col, value);
-			switch (element.type) {
-				case "select":
-					element.value = value;
-					break;
-				case "select-one":
-					element.value = value;
-					break;
-				case "select-multiple":
-					if (element.tomselect) element.tomselect.setValue(value);
-					break;
-				case "radio":
-					let radio = form.querySelector(`input[name="${key}"][value="${values[key]}"]`);
-					if (radio) radio.checked = true;
-					break;
-				case "checkbox":
-					element.checked = value;
-					break;
-				case "text":
-				case "textarea":
-				case "email":
-					element.value = value;
-					break;
-				case "datetime-local":
-					element.value = epochToDateTimeLocal(value);
-					break;
-				default:
-					if (element.classList.contains("jsoneditor")) {
-						let jsoneditor = element.jsoneditor;
-						if (jsoneditor) jsoneditor.set(value);
-						break;
-					}
-					element.value = value;
-					log_error(sprintf("%s: form type unknown: '%s'", gobj_short_name(gobj), element.type));
-					break;
-			}
-		}
-	});
-}
-/************************************************************
-*  Convert a record column value from backend
-*      to frontend form field
-************************************************************/
-function transform__treedb_value_2_form_value(gobj, col, value) {
-	const field_desc = treedb_get_field_desc(col);
-	switch (field_desc.type) {
-		case "string":
-		case "email":
-		case "tel":
-		case "url": break;
-		case "integer": break;
-		case "real": break;
-		case "boolean": break;
-		case "object":
-		case "dict":
-		case "template":
-		case "array":
-		case "list":
-		case "coordinates":
-		case "blob":
-			value = { json: value };
-			break;
-		case "enum":
-			switch (field_desc.real_type) {
-				case "string": break;
-				case "object":
-				case "dict":
-				case "array":
-				case "list": break;
-			}
-			break;
-		case "now":
-		case "time":
-			switch (field_desc.real_type) {
-				case "string":
-				case "integer":
-					value = parseInt(value) || 0;
-					value = new Date(value);
-					break;
-			}
-			break;
-		case "color":
-			switch (field_desc.real_type) {
-				case "string": break;
-				case "integer": break;
-			}
-			break;
-		case "hook": break;
-		case "fkey":
-			let new_value = [];
-			if (value) if (is_string(value)) {
-				let fkey = treedb_decoder_fkey(col, value);
-				if (fkey) new_value.push(fkey.id);
-			} else if (is_array(value)) for (let i = 0; i < value.length; i++) {
-				let fkey = treedb_decoder_fkey(col, value[i]);
-				if (fkey) new_value.push(fkey.id);
-			}
-			else log_error("fkey type unsupported: " + JSON.stringify(value));
-			value = new_value;
-			break;
-	}
-	return value;
-}
-/************************************************************
 *  Convert from frontend to backend
 *  operation: "create" "update"
 ************************************************************/
@@ -16747,18 +16459,6 @@ function transform__form_value_2_treedb_value(gobj, col, value, operation) {
 /************************************************************
 *
 ************************************************************/
-function get_fkey_options(gobj, col) {
-	for (let topic_name of Object.keys(col.fkey)) {
-		let kw = { topic_name };
-		let current_list = gobj_command(gobj_parent(gobj), "get_topic_data", kw, gobj).data;
-		return list2options(current_list, "id", "id");
-	}
-	log_error("No fkey options found" + JSON.stringify(col));
-	return null;
-}
-/************************************************************
-*
-************************************************************/
 function fkey_in_col(col, topic_name, hook_name) {
 	if (hook_name === col.fkey[topic_name]) return true;
 	return false;
@@ -17088,37 +16788,18 @@ function ac_paste_rows(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
-*  From internal Save button of "create" modal form
-************************************************************/
-function ac_create_record(gobj, event, kw, src) {
-	let new_kw = null;
-	try {
-		new_kw = transform__form_record_2_treedb_record(gobj, kw, "create");
-	} catch (e) {
-		log_warning(e);
-		throw e;
-	}
-	gobj_publish_event(gobj, "EV_CREATE_RECORD", {
-		topic_name: gobj_read_str_attr(gobj, "topic_name"),
-		record: new_kw
-	});
-	return 0;
-}
-/************************************************************
-*  From internal Save button of "update" modal form
+*  EV_SAVE_RECORD from the hosted C_YUI_FORM: kw is the
+*  record already in treedb shape (the form itself encodes
+*  fkeys, times and numbers). Route by the form's mode.
 ************************************************************/
-function ac_update_record(gobj, event, kw, src) {
-	let new_kw = null;
-	try {
-		new_kw = transform__form_record_2_treedb_record(gobj, kw, "update");
-	} catch (e) {
-		log_warning(e);
-		throw e;
-	}
-	gobj_publish_event(gobj, "EV_UPDATE_RECORD", {
+function ac_form_save_record(gobj, event, kw, src) {
+	gobj_publish_event(gobj, gobj_read_str_attr(src, "form_mode") === "create" ? "EV_CREATE_RECORD" : "EV_UPDATE_RECORD", {
 		topic_name: gobj_read_str_attr(gobj, "topic_name"),
-		record: new_kw
+		record: kw
 	});
+	setTimeout(function() {
+		close_form_dialog(gobj);
+	}, 0);
 	return 0;
 }
 /************************************************************
@@ -17248,13 +16929,8 @@ function create_gclass$2(gclass_name) {
 			null
 		],
 		[
-			"EV_CREATE_RECORD",
-			ac_create_record,
-			null
-		],
-		[
-			"EV_UPDATE_RECORD",
-			ac_update_record,
+			"EV_SAVE_RECORD",
+			ac_form_save_record,
 			null
 		],
 		[
@@ -17319,6 +16995,7 @@ function create_gclass$2(gclass_name) {
 		["EV_LOAD_NODE_UPDATED", 0],
 		["EV_NODE_DELETED", 0],
 		["EV_EDITION_MODE", 0],
+		["EV_SAVE_RECORD", 0],
 		["EV_NEW_ROW", 0],
 		["EV_DELETE_ROWS", 0],
 		["EV_COPY_ROWS", 0],
@@ -17342,6 +17019,7 @@ function create_gclass$2(gclass_name) {
 *          Register GClass
 ***************************************************************/
 function register_c_yui_treedb_topic_with_form() {
+	if (!gclass_find_by_name("C_YUI_FORM", false)) register_c_yui_form();
 	return create_gclass$2(GCLASS_NAME$2);
 }
 //#endregion