@yuneta/gobj-ui 2.2.4 → 2.3.0

package/dist/gobj-ui.cjs.js

@@ -36,13 +36,13 @@ let i18next = require("i18next");
 i18next = __toESM(i18next, 1);
 let tom_select = require("tom-select");
 tom_select = __toESM(tom_select, 1);
+let vanilla_jsoneditor = require("vanilla-jsoneditor");
 let tabulator_tables = require("tabulator-tables");
 let maplibre_gl = require("maplibre-gl");
 maplibre_gl = __toESM(maplibre_gl, 1);
 let uplot = require("uplot");
 uplot = __toESM(uplot, 1);
 let _antv_g6 = require("@antv/g6");
-let vanilla_jsoneditor = require("vanilla-jsoneditor");
 //#region src/yui_dev.js
 /***********************************************************************
 *          ui_dev.js
@@ -5399,6 +5399,10 @@ var attrs_table$11 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "template", 0, "<div>You must supply a template for form</div>", "Template for form, object -> TEMPLATE, array -> DESC"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "record", 0, "{}", "Data to form"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "placeholders", 0, "{}", "Placeholder values for form fields"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "fkey_options", 0, "{}", "Options for fkey fields: {topic_name: [ids or {id} records]}, read at build time"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "form_mode", 0, "", "'create' (pkey editable+required) or 'update' (pkey readonly); empty = no pkey handling"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "pkey", 0, "id", "Primary key field name, used by form_mode"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "topic_name", 0, "", "Treedb topic name: labels use the i18n cascade '<topic>.<col>' -> '<col>' -> header (like table headers)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "editable", 0, false, "Default is editable, set false to readonly"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "selectable", 0, true, "Rows selectable with 'click' (BAD with editable=true)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_checkbox", 0, false, "Show a first column with checkbox to select rows"),
@@ -5520,34 +5524,35 @@ function build_ui$9(gobj) {
 	let $container = (0, _yuneta_gobj_js.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
 						},
 						[[
@@ -5557,7 +5562,7 @@ function build_ui$9(gobj) {
 						], [
 							"span",
 							{
-								class: "is-hidden-mobile",
+								class: "is-hidden-mobile pl-1 pr-1",
 								i18n: "save"
 							},
 							"save"
@@ -5570,8 +5575,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
 						},
 						[[
@@ -5581,7 +5587,7 @@ function build_ui$9(gobj) {
 						], [
 							"span",
 							{
-								class: "is-hidden-mobile",
+								class: "is-hidden-mobile pl-1 pr-1",
 								i18n: "undo"
 							},
 							"undo"
@@ -5594,8 +5600,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",
@@ -5604,7 +5611,7 @@ function build_ui$9(gobj) {
 						], [
 							"span",
 							{
-								class: "is-hidden-mobile",
+								class: "is-hidden-mobile pl-1 pr-1",
 								i18n: "clear"
 							},
 							"clear"
@@ -5618,14 +5625,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",
@@ -5634,7 +5642,7 @@ function build_ui$9(gobj) {
 					], [
 						"span",
 						{
-							class: "is-hidden-mobile",
+							class: "is-hidden-mobile pl-1 pr-1",
 							i18n: "copy"
 						},
 						"copy"
@@ -5646,8 +5654,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",
@@ -5656,7 +5665,7 @@ function build_ui$9(gobj) {
 					], [
 						"span",
 						{
-							class: "is-hidden-mobile",
+							class: "is-hidden-mobile pl-1 pr-1",
 							i18n: "paste"
 						},
 						"paste"
@@ -5670,6 +5679,7 @@ function build_ui$9(gobj) {
 		]]
 	]);
 	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "$container", $container);
+	apply_form_mode(gobj, $container.querySelector("form"));
 	(0, _yuneta_gobj_js.refresh_language)($container, i18next.t);
 	let $parent = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$parent");
 	if ($parent) $parent.appendChild($container);
@@ -5712,7 +5722,11 @@ function build_html_form(gobj, $form, prefix, template) {
 		const field_desc = (0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.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 = (0, i18next.t)(label_keys, { defaultValue: field_desc.header });
+		html_field_conf.label_i18n = (0, i18next.t)(field_desc.name, { defaultValue: NO_I18N }) !== NO_I18N ? field_desc.name : null;
 		html_field_conf.placeholder = field_desc.placeholder ? (0, i18next.t)(field_desc.placeholder) : "";
 		let placeholders = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "placeholders");
 		if (placeholders[key]) html_field_conf.placeholder = placeholders[key];
@@ -5756,7 +5770,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";
@@ -5771,7 +5785,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) {
@@ -5789,7 +5803,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";
@@ -5874,6 +5891,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 (!(0, _yuneta_gobj_js.is_object)(fkey_desc) || Object.keys(fkey_desc).length === 0) {
+		(0, _yuneta_gobj_js.log_error)((0, _yuneta_gobj_js.sprintf)("%s: fkey field '%s' without fkey mapping", (0, _yuneta_gobj_js.gobj_short_name)(gobj), field_desc.name));
+		return [];
+	}
+	let topic_name = Object.keys(fkey_desc)[0];
+	let fkey_options = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "fkey_options");
+	let list = (0, _yuneta_gobj_js.is_object)(fkey_options) ? fkey_options[topic_name] : null;
+	if (!(0, _yuneta_gobj_js.is_array)(list)) {
+		(0, _yuneta_gobj_js.log_warning)((0, _yuneta_gobj_js.sprintf)("%s: no fkey_options for topic '%s' (field '%s')", (0, _yuneta_gobj_js.gobj_short_name)(gobj), topic_name, field_desc.name));
+		return [];
+	}
+	let options = [];
+	for (let item of list) {
+		let id = (0, _yuneta_gobj_js.is_object)(item) ? item.id : item;
+		if ((0, _yuneta_gobj_js.is_string)(id) && !(0, _yuneta_gobj_js.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 (!(0, _yuneta_gobj_js.is_object)(fkey_desc) || Object.keys(fkey_desc).length === 0) {
+		(0, _yuneta_gobj_js.log_error)((0, _yuneta_gobj_js.sprintf)("%s: fkey field '%s' without fkey mapping", (0, _yuneta_gobj_js.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:
+			(0, _yuneta_gobj_js.log_error)((0, _yuneta_gobj_js.sprintf)("%s: fkey field '%s' with bad real_type '%s'", (0, _yuneta_gobj_js.gobj_short_name)(gobj), field_desc.name, field_desc.real_type));
+			return null;
+	}
+	if (!(0, _yuneta_gobj_js.is_array)(value)) value = value ? [value] : [];
+	for (let v of value) {
+		let id = (0, _yuneta_gobj_js.is_object)(v) ? v.id : v;
+		if (!(0, _yuneta_gobj_js.is_string)(id) || (0, _yuneta_gobj_js.empty_string)(id)) {
+			(0, _yuneta_gobj_js.log_error)((0, _yuneta_gobj_js.sprintf)("%s: fkey field '%s' with bad value: %s", (0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "form_mode");
+	if ((0, _yuneta_gobj_js.empty_string)(mode)) return;
+	let pkey = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "pkey");
+	let $input = $form.querySelector(`[name="${pkey}"]`);
+	if (!$input) {
+		(0, _yuneta_gobj_js.log_error)((0, _yuneta_gobj_js.sprintf)("%s: form_mode '%s' but form has no pkey field '%s'", (0, _yuneta_gobj_js.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
@@ -5904,7 +6027,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,
@@ -5926,7 +6049,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
@@ -5960,7 +6083,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
@@ -6002,7 +6125,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
@@ -6033,7 +6156,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
@@ -6064,7 +6187,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 						"label",
 						{
 							class: "label",
-							i18n: label
+							i18n: label_i18n || label
 						},
 						label
 					]]
@@ -6148,7 +6271,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
@@ -6174,7 +6297,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 === (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "pkey") ? "with-focus" : ""}`,
 				name,
 				type: inputType,
 				placeholder
@@ -6227,8 +6350,8 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 			$control.appendChild($extend);
 			break;
 		}
-		case "select":
-			$extend = (0, _yuneta_gobj_js.createElement2)([
+		case "select": {
+			let $wrapper = (0, _yuneta_gobj_js.createElement2)([
 				"div",
 				{ class: "select" },
 				[
@@ -6241,11 +6364,16 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 							i18n: option
 						},
 						option
-					])
+					]),
+					{ "change": function(evt) {
+						(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_RECORD_CHANGED", {}, gobj);
+					} }
 				]
 			]);
-			$control.appendChild($extend);
+			$control.appendChild($wrapper);
+			$extend = $wrapper.querySelector("select");
 			break;
+		}
 		case "select2":
 			$extend = (0, _yuneta_gobj_js.createElement2)([
 				"select",
@@ -6267,6 +6395,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 			$extend.tom_select = new tom_select.default($extend, {
 				allowEmptyOption: true,
 				placeholder,
+				maxItems: field_desc.type === "fkey" && field_desc.real_type === "string" ? 1 : null,
 				plugins: {
 					"clear_button": { "title": (0, i18next.t)("Remove all selected options") },
 					"no_active_items": {},
@@ -6278,17 +6407,26 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_RECORD_CHANGED", {}, gobj);
 			});
 			break;
-		case "checkbox":
-			$extend = (0, _yuneta_gobj_js.createElement2)([
+		case "checkbox": {
+			let $wrapper = (0, _yuneta_gobj_js.createElement2)([
 				"label",
 				{ class: "checkbox" },
-				["input", {
-					type: "checkbox",
-					name
-				}]
+				[
+					"input",
+					{
+						type: "checkbox",
+						name
+					},
+					"",
+					{ "change": function(evt) {
+						(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_RECORD_CHANGED", {}, gobj);
+					} }
+				]
 			]);
-			$control.appendChild($extend);
+			$control.appendChild($wrapper);
+			$extend = $wrapper.querySelector("input");
 			break;
+		}
 		case "radio":
 			$extend = (0, _yuneta_gobj_js.createOneHtml)(`
                    <label class="radio">
@@ -6301,6 +6439,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);
@@ -6308,6 +6447,18 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 			else if (required) attrs.required = "";
 			$extend = (0, _yuneta_gobj_js.createElement2)(["div", attrs]);
 			$control.appendChild($extend);
+			$extend.jsoneditor = new vanilla_jsoneditor.JSONEditor({
+				target: $extend,
+				props: {
+					readOnly: !!readonly,
+					onChange: function() {
+						(0, _yuneta_gobj_js.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": {
@@ -6703,7 +6854,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) => {
@@ -6724,7 +6875,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");
@@ -6805,9 +6956,10 @@ function get_form_values$1(gobj, $form) {
 /************************************************************
 *
 ************************************************************/
-function clear_data$1(gobj, $form) {
+function clear_data(gobj, $form) {
+	let pkey = (0, _yuneta_gobj_js.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;
@@ -6826,7 +6978,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");
 	});
@@ -6864,10 +7016,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 = (0, _yuneta_gobj_js.create_template_record)(template);
+	clear_data(gobj, $form);
+	if (!record || Object.keys(record).length === 0) record = (0, _yuneta_gobj_js.create_template_record)(template);
 	$form.querySelectorAll(".yui-form-data-input").forEach(($input) => {
 		let field_desc = $input.field_desc;
 		let name = $input.dataset.treedb_name;
@@ -6883,10 +7035,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;
@@ -6913,11 +7071,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");
@@ -6963,7 +7121,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 ((0, _yuneta_gobj_js.is_string)(value) && !(0, _yuneta_gobj_js.empty_string)(value)) {
+				let fkey = (0, _yuneta_gobj_js.treedb_decoder_fkey)(field_desc, value);
+				if (fkey) new_value.push(fkey.id);
+			} else if ((0, _yuneta_gobj_js.is_array)(value)) for (let v of value) {
+				let fkey = (0, _yuneta_gobj_js.treedb_decoder_fkey)(field_desc, v);
+				if (fkey) new_value.push(fkey.id);
+			}
+			else if ((0, _yuneta_gobj_js.is_object)(value)) for (let v of Object.keys(value)) {
+				let fkey = (0, _yuneta_gobj_js.treedb_decoder_fkey)(field_desc, v);
+				if (fkey) new_value.push(fkey.id);
+			}
+			value = new_value;
+			break;
+		}
 		case "hook":
 		case "enum":
 		case "uuid":
@@ -6973,8 +7146,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":
@@ -6990,13 +7162,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: (0, _yuneta_gobj_js.is_object)(value) ? value : {} };
+			break;
+		case "blob":
+			value = { json: (0, _yuneta_gobj_js.is_object)(value) || (0, _yuneta_gobj_js.is_array)(value) ? value : {} };
+			break;
 		case "array":
 		case "list":
-		case "real":
-		case "boolean": break;
-		case "blob": break;
+			value = { json: (0, _yuneta_gobj_js.is_array)(value) ? value : [] };
+			break;
 		case "number": break;
 		case "coordinates":
 			let longitude = 0;
@@ -7028,7 +7206,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;
@@ -7136,7 +7316,9 @@ function ac_load_record(gobj, event, kw, src) {
 	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "record", kw);
 	let $form = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container").querySelector("form");
 	(0, _yuneta_gobj_js.gobj_write_bool_attr)(gobj, "initialized", false);
-	set_changed_stated(gobj, set_form_values$1(gobj, (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "template"), $form, kw));
+	let modified = set_form_values(gobj, (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "template"), $form, kw);
+	apply_form_mode(gobj, $form);
+	set_changed_stated(gobj, modified);
 	(0, _yuneta_gobj_js.gobj_write_bool_attr)(gobj, "initialized", true);
 	return 0;
 }
@@ -7146,8 +7328,8 @@ function ac_load_record(gobj, event, kw, src) {
 ************************************************************/
 function ac_save_record(gobj, event, kw, src) {
 	let $form = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container").querySelector("form");
-	if (validate_form$1(gobj, $form)) {
-		(0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_SAVE_RECORD", get_form_values$1(gobj, $form));
+	if (validate_form(gobj, $form)) {
+		(0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_SAVE_RECORD", get_form_values(gobj, $form));
 		set_changed_stated(gobj, false);
 	} else {
 		kw.abort_close = true;
@@ -7161,7 +7343,7 @@ function ac_save_record(gobj, event, kw, src) {
 function ac_undo_record(gobj, event, kw, src) {
 	let $form = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container").querySelector("form");
 	(0, _yuneta_gobj_js.gobj_write_bool_attr)(gobj, "initialized", false);
-	set_form_values$1(gobj, (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "template"), $form, (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "record"));
+	set_form_values(gobj, (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "template"), $form, (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "record"));
 	set_changed_stated(gobj, false);
 	(0, _yuneta_gobj_js.gobj_write_bool_attr)(gobj, "initialized", true);
 	return 0;
@@ -7171,8 +7353,8 @@ function ac_undo_record(gobj, event, kw, src) {
 ************************************************************/
 function ac_clear_record(gobj, event, kw, src) {
 	let $form = (0, _yuneta_gobj_js.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;
 }
 /************************************************************
@@ -7217,8 +7399,8 @@ function ac_record_changed(gobj, event, kw, src) {
 ************************************************************/
 function ac_copy_record(gobj, event, kw, src) {
 	let $form = (0, _yuneta_gobj_js.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;
@@ -7231,7 +7413,7 @@ function ac_paste_record(gobj, event, kw, src) {
 	let record = kw.record;
 	if ((0, _yuneta_gobj_js.is_object)(record)) {
 		(0, _yuneta_gobj_js.gobj_write_bool_attr)(gobj, "initialized", true);
-		set_form_values$1(gobj, (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "template"), $form, record);
+		set_form_values(gobj, (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "template"), $form, record);
 	}
 	return 0;
 }
@@ -7377,6 +7559,7 @@ function create_gclass$11(gclass_name) {
 *          Register GClass
 ***************************************************************/
 function register_c_yui_form() {
+	if ((0, _yuneta_gobj_js.gclass_find_by_name)(GCLASS_NAME$11, false)) return 0;
 	return create_gclass$11(GCLASS_NAME$11);
 }
 //#endregion
@@ -8454,7 +8637,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 = (0, _yuneta_gobj_js.gobj_find_service)(properties.gobj_service_name, true);
+	const gobj_service = properties.gobj_service_name ? (0, _yuneta_gobj_js.gobj_find_service)(properties.gobj_service_name, false) : null;
 	if (gobj_service) {
 		let window_service_name = `window-map-${(0, _yuneta_gobj_js.clean_name)((0, _yuneta_gobj_js.gobj_name)(gobj_service))}`;
 		let popupContent = (0, _yuneta_gobj_js.createElement2)([
@@ -11748,6 +11931,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
@@ -11767,6 +12037,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.
 *
@@ -12142,12 +12417,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
 				};
 			}
@@ -12225,11 +12501,15 @@ function instantiate_menus(gobj, config) {
 					(0, _yuneta_gobj_js.log_warning)(`C_YUI_SHELL: submenu of '${menu_id}.${item.id}' renders in unknown zone '${zone_id}'`);
 					continue;
 				}
-				let $c = (0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.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");
+				}
 			}
 		}
 	}
@@ -12243,9 +12523,8 @@ function instantiate_nav_in_zone(gobj, menu, menu_id, zone_id, level, nav_label)
 	let priv = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "priv");
 	let render_cfg = menu.render && (menu.render[zone_id] || menu.render["*"]) || { layout: "vertical" };
 	if ((0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.gobj_create)(nav_name, "C_YUI_NAV", {
+	let nav = (0, _yuneta_gobj_js.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 || [],
@@ -12254,6 +12533,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 = (0, _yuneta_gobj_js.gobj_read_attr)(nav, "$container");
@@ -12438,6 +12719,8 @@ function build_view_gobj(gobj, entry, route, stage) {
 	}
 	stage.el.appendChild($view);
 	(0, _yuneta_gobj_js.gobj_start)(view);
+	let priv = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "priv");
+	if (priv && typeof priv.translator === "function" && target.gclass === "C_YUI_NAV") (0, _yuneta_gobj_js.refresh_language)($view, priv.translator);
 	return view;
 }
 function safe_id(s) {
@@ -13022,7 +13305,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 = (0, _yuneta_gobj_js.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") {
@@ -13035,7 +13318,7 @@ function update_secondary_nav_visibility(gobj, entry) {
 		if (!nav_menu_id.startsWith("secondary.")) continue;
 		let $c = (0, _yuneta_gobj_js.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");
 	}
 }
@@ -13220,6 +13503,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
@@ -13235,6 +13598,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
@@ -13272,7 +13646,9 @@ var SUPPORTED_LAYOUTS = [
 	"tabs",
 	"drawer",
 	"submenu",
-	"accordion"
+	"accordion",
+	"cards",
+	"backbar"
 ];
 function is_decorative(it) {
 	return !!(it && (it.type === "header" || it.type === "divider"));
@@ -13290,6 +13666,8 @@ var attrs_table$4 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "icon_pos", 0, "left", "left|right|top|bottom"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "show_label", 0, true, "Show item label next to/under the icon"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "level", 0, "primary", "primary|secondary"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "show_on", 0, "", "Breakpoint visibility expr (shell show_on syntax); empty = always"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "back_route", 0, "", "backbar layout: route of the section index the ← returns to"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "shell", 0, null, "C_YUI_SHELL gobj (for navigation calls)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$container", 0, null, "Root HTMLElement of this nav"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "active_route", 0, "", "Currently active route"),
@@ -13373,11 +13751,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 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "show_on") || "";
+	if (!(0, _yuneta_gobj_js.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")) {
@@ -13548,6 +13938,51 @@ function render_tabs(gobj, items) {
 		]
 	]);
 }
+function render_cards(gobj, items) {
+	return (0, _yuneta_gobj_js.createElement2)(cards_grid_descriptor(items, (0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "back_route") || "";
+	let label = (0, _yuneta_gobj_js.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 (0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "menu_id") || "drawer";
 	let wrap = document.createElement("div");
@@ -13849,6 +14284,7 @@ function ac_route_changed(gobj, event, kw, src) {
 	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "active_route", route);
 	let $c = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
 	if (!$c) return 0;
+	if ((0, _yuneta_gobj_js.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") {
@@ -14818,7 +15254,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 = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "treedb_name");
 	let topic_name = (0, _yuneta_gobj_js.gobj_read_attr)(src, "topic_name");
 	let record = kw.record;
@@ -14835,7 +15271,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 = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "treedb_name");
 	let topic_name = (0, _yuneta_gobj_js.gobj_read_attr)(src, "topic_name");
 	let record = kw.record;
@@ -14908,12 +15344,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
 		],
 		[
@@ -15012,7 +15448,6 @@ var attrs_table$2 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "tabulator", 0, null, "Tabulator instance"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "table_id", 0, null, "Table div ID"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "toolbar_id", 0, null, "Toolbar ID"),
-	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "form_id", 0, null, "Edit form ID"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "popup_id", 0, null, "Edit form popup ID"),
 	(0, _yuneta_gobj_js.SDATA_END)()
 ];
@@ -15020,7 +15455,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() {
@@ -15036,7 +15473,6 @@ function mt_create$2(gobj) {
 	let name = (0, _yuneta_gobj_js.clean_name)((0, _yuneta_gobj_js.gobj_name)(gobj));
 	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "table_id", "table" + name);
 	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "toolbar_id", "toolbar" + name);
-	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "form_id", "form" + name);
 	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "popup_id", "popup" + name);
 	build_ui$2(gobj);
 	let subscriber = (0, _yuneta_gobj_js.gobj_read_pointer_attr)(gobj, "subscriber");
@@ -15053,6 +15489,7 @@ function mt_start$2(gobj) {
 *          Framework Method: Stop
 ***************************************************************/
 function mt_stop$2(gobj) {
+	close_form_dialog(gobj);
 	table__destroy(gobj);
 }
 /***************************************************************
@@ -15392,6 +15829,29 @@ function col_label(col, topic_name) {
 	return (0, i18next.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 = (0, _yuneta_gobj_js.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 ((0, i18next.t)(col.id, { defaultValue: NO_I18N }) !== NO_I18N) attrs.i18n = col.id;
+		return (0, _yuneta_gobj_js.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
@@ -15496,6 +15956,7 @@ function create_tabulator(gobj) {
 		}
 		let colDef = {
 			title: col_label(col, (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "topic_name")),
+			titleFormatter: col_title_formatter(gobj, col),
 			field: col.id,
 			sorter,
 			hozAlign,
@@ -15548,7 +16009,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 tabulator_tables.TabulatorFull(`#${table_id}`, tabulator_settings);
+	let $view_container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
+	let $table_el = $view_container ? $view_container.querySelector(`#${table_id}`) : null;
+	if (!$table_el) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: table element '#${table_id}' not found in $container`);
+		return;
+	}
+	let tabulator = new tabulator_tables.TabulatorFull($table_el, tabulator_settings);
 	function update_rowcount() {
 		let $rc = tabulator.element && tabulator.element.querySelector(".yui-tabulator-rowcount");
 		if (!$rc) return;
@@ -15683,436 +16150,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 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "desc");
-	let $form = (0, _yuneta_gobj_js.createElement2)(["form", {
-		id: (0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.str_in_list)(flag, "writable");
-		let is_notnull = (0, _yuneta_gobj_js.str_in_list)(flag, "notnull");
-		let is_rowid = (0, _yuneta_gobj_js.str_in_list)(flag, "rowid");
-		let is_required = (0, _yuneta_gobj_js.str_in_list)(flag, "required");
-		let is_hidden = (0, _yuneta_gobj_js.str_in_list)(flag, "hidden");
-		(0, _yuneta_gobj_js.str_in_list)(flag, "persistent");
-		(0, _yuneta_gobj_js.str_in_list)(flag, "hook");
-		let is_fkey = (0, _yuneta_gobj_js.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, (0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.createElement2)([
-				"input",
-				attrs,
-				"",
-				{ "blur": function(evt) {
-					validate_field_on_blur(this);
-				} }
-			]);
-			$control.appendChild($extend);
-			$control.appendChild((0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.createElement2)(["div", attrs]);
-			$extend.setAttribute("name", name);
-			$control.appendChild($extend);
-			$control.appendChild((0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.createElement2)([
-				"textarea",
-				attrs,
-				"",
-				{ "blur": function(evt) {
-					validate_field_on_blur(this);
-				} }
-			]);
-			$control.appendChild($extend);
-			$control.appendChild((0, _yuneta_gobj_js.createElement2)([
-				"p",
-				{
-					class: "help is-danger",
-					style: "display:none"
-				},
-				""
-			]));
-			break;
-		}
-		case "select": {
-			let $extend = (0, _yuneta_gobj_js.createElement2)([
-				"div",
-				{ class: "select" },
-				[
-					"select",
-					{ name },
-					options.map((option) => [
-						"option",
-						{
-							value: option.id,
-							i18n: option.value
-						},
-						option.value
-					])
-				]
-			]);
-			$control.appendChild($extend);
-			$control.appendChild((0, _yuneta_gobj_js.createElement2)([
-				"p",
-				{
-					class: "help is-danger",
-					style: "display:none"
-				},
-				""
-			]));
-			break;
-		}
-		case "select2": {
-			let $extend = (0, _yuneta_gobj_js.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((0, _yuneta_gobj_js.createElement2)([
-				"p",
-				{
-					class: "help is-danger",
-					style: "display:none"
-				},
-				""
-			]));
-			break;
-		}
-		case "checkbox": {
-			let $extend = (0, _yuneta_gobj_js.createElement2)([
-				"label",
-				{ class: "checkbox" },
-				["input", {
-					type: "checkbox",
-					name
-				}]
-			]);
-			$control.appendChild($extend);
-			$control.appendChild((0, _yuneta_gobj_js.createElement2)([
-				"p",
-				{
-					class: "help is-danger",
-					style: "display:none"
-				},
-				""
-			]));
-			break;
-		}
-		case "radio":
-			for (const option of options) {
-				let $extend = (0, _yuneta_gobj_js.createOneHtml)(`
-                   <label class="radio">
-                      <input type="radio" name="${name}">
-                      ${(0, i18next.t)(option)}
-                    </label>
-                `);
-				$control.appendChild($extend);
-			}
-			$control.appendChild((0, _yuneta_gobj_js.createElement2)([
-				"p",
-				{
-					class: "help is-danger",
-					style: "display:none"
-				},
-				""
-			]));
-			break;
-		default: (0, _yuneta_gobj_js.log_error)(`Unsupported element type, tag ${tag}`);
+function build_fkey_options(gobj) {
+	let desc = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "desc");
+	let fkey_options = {};
+	for (let col of desc.cols) {
+		if ((0, _yuneta_gobj_js.treedb_get_field_desc)(col).type !== "fkey" || !(0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.gobj_command)((0, _yuneta_gobj_js.gobj_parent)(gobj), "get_topic_data", { topic_name }, gobj);
+		fkey_options[topic_name] = webix && (0, _yuneta_gobj_js.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 = (0, i18next.t)((0, _yuneta_gobj_js.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 = (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 $element = (0, _yuneta_gobj_js.createElement2)([
 		"div",
 		{
-			id: (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "popup_id"),
-			class: "modal"
+			id: popup_id,
+			class: "modal is-active"
 		},
 		[[
 			"div",
@@ -16121,333 +16214,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;"
+					},
+					(0, i18next.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 = (0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_CREATE_RECORD", values, gobj);
-										else ret = (0, _yuneta_gobj_js.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");
-		});
-	});
-	(0, _yuneta_gobj_js.refresh_language)($element, i18next.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 vanilla_jsoneditor.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 tom_select.default(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 = (0, _yuneta_gobj_js.gobj_create_pure_child)("form_" + (0, _yuneta_gobj_js.clean_name)((0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.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);
+	(0, _yuneta_gobj_js.refresh_language)($element, i18next.t);
+	(0, _yuneta_gobj_js.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 = {};
+		(0, _yuneta_gobj_js.gobj_send_event)(priv.form, "EV_WINDOW_TO_CLOSE", kw, gobj);
+		if (kw.abort_close) {
+			get_yesnocancel((0, i18next.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 ((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);
+		priv.form = null;
 	}
-	if (is_field_value_empty(get_field_value_for_validation($field, conf))) show_field_error($field, (0, i18next.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, (0, i18next.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 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "desc");
-	let is_rowid = (0, _yuneta_gobj_js.str_in_list)((0, _yuneta_gobj_js.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 (0, _yuneta_gobj_js.log_error)((0, _yuneta_gobj_js.sprintf)("%s: form without id field ('%s')", (0, _yuneta_gobj_js.gobj_short_name)(gobj), desc.pkey));
-	if (is_rowid) mode = "create";
-	$form.__mode__ = mode;
-	$form.__index__ = index;
+	let col_pkey = (0, _yuneta_gobj_js.kwid_find_one_record)(gobj, desc.cols, null, { "id": desc.pkey });
+	if (!col_pkey) return false;
+	return (0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "popup_id");
-	let form_id = (0, _yuneta_gobj_js.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 ((0, _yuneta_gobj_js.json_size)(row) === 0 || (0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "popup_id");
-	let form_id = (0, _yuneta_gobj_js.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
@@ -16461,174 +16341,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;
-					(0, _yuneta_gobj_js.log_error)((0, _yuneta_gobj_js.sprintf)("%s: form type unknown: '%s'", (0, _yuneta_gobj_js.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 = (0, _yuneta_gobj_js.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 ((0, _yuneta_gobj_js.is_string)(value)) {
-				let fkey = (0, _yuneta_gobj_js.treedb_decoder_fkey)(col, value);
-				if (fkey) new_value.push(fkey.id);
-			} else if ((0, _yuneta_gobj_js.is_array)(value)) for (let i = 0; i < value.length; i++) {
-				let fkey = (0, _yuneta_gobj_js.treedb_decoder_fkey)(col, value[i]);
-				if (fkey) new_value.push(fkey.id);
-			}
-			else (0, _yuneta_gobj_js.log_error)("fkey type unsupported: " + JSON.stringify(value));
-			value = new_value;
-			break;
-	}
-	return value;
-}
-/************************************************************
 *  Convert from frontend to backend
 *  operation: "create" "update"
 ************************************************************/
@@ -16752,18 +16464,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 = (0, _yuneta_gobj_js.gobj_command)((0, _yuneta_gobj_js.gobj_parent)(gobj), "get_topic_data", kw, gobj).data;
-		return (0, _yuneta_gobj_js.list2options)(current_list, "id", "id");
-	}
-	(0, _yuneta_gobj_js.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;
@@ -17093,37 +16793,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) {
-		(0, _yuneta_gobj_js.log_warning)(e);
-		throw e;
-	}
-	(0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_CREATE_RECORD", {
-		topic_name: (0, _yuneta_gobj_js.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) {
-		(0, _yuneta_gobj_js.log_warning)(e);
-		throw e;
-	}
-	(0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_UPDATE_RECORD", {
+function ac_form_save_record(gobj, event, kw, src) {
+	(0, _yuneta_gobj_js.gobj_publish_event)(gobj, (0, _yuneta_gobj_js.gobj_read_str_attr)(src, "form_mode") === "create" ? "EV_CREATE_RECORD" : "EV_UPDATE_RECORD", {
 		topic_name: (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "topic_name"),
-		record: new_kw
+		record: kw
 	});
+	setTimeout(function() {
+		close_form_dialog(gobj);
+	}, 0);
 	return 0;
 }
 /************************************************************
@@ -17253,13 +16934,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
 		],
 		[
@@ -17324,6 +17000,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],
@@ -17347,6 +17024,7 @@ function create_gclass$2(gclass_name) {
 *          Register GClass
 ***************************************************************/
 function register_c_yui_treedb_topic_with_form() {
+	if (!(0, _yuneta_gobj_js.gclass_find_by_name)("C_YUI_FORM", false)) register_c_yui_form();
 	return create_gclass$2(GCLASS_NAME$2);
 }
 //#endregion