@yuneta/gobj-ui 7.23.193 → 7.23.195

package/dist/gobj-ui.cjs.js

@@ -7310,6 +7310,39 @@ function json_diff_rows(doc_a, doc_b) {
 	return rows;
 }
 //#endregion
+//#region src/form_time_value.js
+/****************************************************************************
+*          form_time_value.js
+*
+*          A treedb `time` / `now` column is an epoch in SECONDS, and a form
+*          shows it in a `datetime-local` input. These two convert between
+*          them, and they must be each other's inverse: a writable time
+*          column travels back on EVERY save of the record.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+****************************************************************************/
+/************************************************************
+*  A Date -> the value of a `datetime-local` input, in local time,
+*  WITH seconds: the input is built with `step: 1`, which is what
+*  lets it hold them. Written as "YYYY-MM-DDTHH:mm" it lost them on
+*  every save of any field (M26 of the 2026-09-21 review).
+************************************************************/
+function date_to_datetime_local(value) {
+	if (!(value instanceof Date) || isNaN(value.getTime())) return "";
+	let pad = (n) => String(n).padStart(2, "0");
+	return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}T${pad(value.getHours())}:${pad(value.getMinutes())}:${pad(value.getSeconds())}`;
+}
+/************************************************************
+*  The value of a `datetime-local` input -> epoch in seconds
+************************************************************/
+function datetime_local_to_epoch(value) {
+	if (!value) return null;
+	const date = new Date(value);
+	if (isNaN(date.getTime())) return null;
+	return Math.floor(date.getTime() / 1e3);
+}
+//#endregion
 //#region src/c_yui_form.js
 /***********************************************************************
 *          c_yui_form.js
@@ -8322,6 +8355,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 				type: inputType,
 				placeholder
 			};
+			if (inputType === "datetime-local") attrs.step = 1;
 			Object.assign(attrs, extras);
 			if (readonly) attrs.readonly = "";
 			else if (required) attrs.required = "";
@@ -9022,8 +9056,7 @@ function get_form_values(gobj, $form) {
 			case "input":
 				switch (input_type) {
 					case "datetime-local":
-						const date = new Date($input.value);
-						value = Math.floor(date.getTime() / 1e3);
+						value = datetime_local_to_epoch($input.value);
 						break;
 					default: value = getInputValue($input);
 				}
@@ -9186,10 +9219,7 @@ function set_form_values(gobj, template, $form, record) {
 			case "input":
 				switch (input_type) {
 					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 = "";
+						$input.value = date_to_datetime_local(value);
 						break;
 					case "color":
 						$input.value = convertColor(value);
@@ -25240,6 +25270,7 @@ function ac_create_record(gobj, event, kw, src) {
 	if (treedb_update_node$1(gobj, treedb_name, topic_name, record, {
 		list_dict: true,
 		create: true,
+		create_only: true,
 		autolink: true
 	}, form_write) < 0) {
 		answer_form_write(gobj, src, form_write, false);
@@ -26480,6 +26511,58 @@ function delete_impact(desc, records) {
 	return out;
 }
 //#endregion
+//#region src/table_cell_text.js
+/****************************************************************************
+*          table_cell_text.js
+*
+*          What a treedb table cell hands Tabulator.
+*
+*          Tabulator assigns a formatter's STRING result with `innerHTML`
+*          (only its own `plaintext` formatter escapes), so a record's text
+*          returned as a string is parsed as markup: `a<b and c>d` showed
+*          as `ad`, and a field holding `<img src=x onerror=...>` ran it in
+*          the operator's browser (M31 of the 2026-09-21 review). Record
+*          data goes in as a TEXT NODE, and a cell built around it as DOM,
+*          never as an HTML string with the data interpolated.
+*
+*          Pure but for the `document` it is handed, so it is tested
+*          without one.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+****************************************************************************/
+/************************************************************
+*  A value shown as text, whatever characters it holds
+************************************************************/
+function cell_text(value, doc = globalThis.document) {
+	if (value === null || value === void 0) return "";
+	return doc.createTextNode(String(value));
+}
+/************************************************************
+*  The hook cell, as a createElement2 spec: the row id is an
+*  attribute VALUE, never text spliced into markup (an id holding
+*  a `"` cut the attribute and lost the rest of the id)
+************************************************************/
+function hook_cell_spec(row_id, col_id, items, title, title_key) {
+	return [
+		"a",
+		{
+			class: "HOOK_CELL hook_cell",
+			title,
+			"data-i18n-title": title_key,
+			"aria-label": title,
+			"data-i18n-aria-label": title_key,
+			"data-row_id": String(row_id),
+			"data-col_id": String(col_id)
+		},
+		[["span", { class: "icon yi-eye" }], [
+			"u",
+			{ class: "HOOK_CELL_COUNT" },
+			`[ ${items} ]`
+		]]
+	];
+}
+//#endregion
 //#region src/c_yui_treedb_topic_with_form.js
 /***********************************************************************
 *          c_yui_treedb_topic_with_form.js
@@ -27906,18 +27989,8 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field) {
 			break;
 		case "hook":
 			let items = (0, _yuneta_gobj_js.treedb_hook_data_size)(value);
-			if (items > 0) {
-				let hook_title = String((0, i18next.t)("show linked records")).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-				value = [
-					"<a class=\"hook_cell\" ",
-					`title="${hook_title}" aria-label="${hook_title}" `,
-					`data-row_id="${row.id}" `,
-					`data-col_id="${col.id}" > `,
-					"<span style=\"\" class=\"icon yi-eye\"></span>",
-					`<span>[&nbsp;<u>${items}</u>&nbsp;]</span>`,
-					"</a>"
-				].join("");
-			} else value = "";
+			if (items > 0) value = (0, _yuneta_gobj_js.createElement2)(hook_cell_spec(row.id, col.id, items, (0, i18next.t)("show linked records"), "show linked records"));
+			else value = "";
 			break;
 		case "file":
 		case "fkey":
@@ -27943,7 +28016,7 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field) {
 					value = /* @__PURE__ */ new Date(value * 1e3);
 					const rawLocale = navigator.language;
 					const userLocale = typeof rawLocale === "string" && rawLocale && rawLocale !== "undefined" ? rawLocale : void 0;
-					value = "<span class=\"is-size-7\">" + new Intl.DateTimeFormat(userLocale, {
+					const formatter = new Intl.DateTimeFormat(userLocale, {
 						day: "numeric",
 						month: "short",
 						year: "numeric",
@@ -27951,7 +28024,12 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field) {
 						minute: "2-digit",
 						second: "2-digit",
 						hour12: true
-					}).format(value) + "</span>";
+					});
+					value = (0, _yuneta_gobj_js.createElement2)([
+						"span",
+						{ class: "is-size-7" },
+						formatter.format(value)
+					]);
 			}
 			break;
 		case "color": break;
@@ -27963,6 +28041,7 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field) {
 		(0, _yuneta_gobj_js.log_error)(`transform__treedb_value_2_table_value() unexpected object value for field '${field}' (type='${field_desc.type}', real_type='${field_desc.real_type}'): ${JSON.stringify(value)}, topic ${priv.topic_name}`);
 		value = JSON.stringify(value);
 	}
+	if (typeof value === "string" && value !== "") value = cell_text(value);
 	return value;
 }
 /************************************************************

package/dist/gobj-ui.es.js

@@ -7305,6 +7305,39 @@ function json_diff_rows(doc_a, doc_b) {
 	return rows;
 }
 //#endregion
+//#region src/form_time_value.js
+/****************************************************************************
+*          form_time_value.js
+*
+*          A treedb `time` / `now` column is an epoch in SECONDS, and a form
+*          shows it in a `datetime-local` input. These two convert between
+*          them, and they must be each other's inverse: a writable time
+*          column travels back on EVERY save of the record.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+****************************************************************************/
+/************************************************************
+*  A Date -> the value of a `datetime-local` input, in local time,
+*  WITH seconds: the input is built with `step: 1`, which is what
+*  lets it hold them. Written as "YYYY-MM-DDTHH:mm" it lost them on
+*  every save of any field (M26 of the 2026-09-21 review).
+************************************************************/
+function date_to_datetime_local(value) {
+	if (!(value instanceof Date) || isNaN(value.getTime())) return "";
+	let pad = (n) => String(n).padStart(2, "0");
+	return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}T${pad(value.getHours())}:${pad(value.getMinutes())}:${pad(value.getSeconds())}`;
+}
+/************************************************************
+*  The value of a `datetime-local` input -> epoch in seconds
+************************************************************/
+function datetime_local_to_epoch(value) {
+	if (!value) return null;
+	const date = new Date(value);
+	if (isNaN(date.getTime())) return null;
+	return Math.floor(date.getTime() / 1e3);
+}
+//#endregion
 //#region src/c_yui_form.js
 /***********************************************************************
 *          c_yui_form.js
@@ -8317,6 +8350,7 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 				type: inputType,
 				placeholder
 			};
+			if (inputType === "datetime-local") attrs.step = 1;
 			Object.assign(attrs, extras);
 			if (readonly) attrs.readonly = "";
 			else if (required) attrs.required = "";
@@ -9017,8 +9051,7 @@ function get_form_values(gobj, $form) {
 			case "input":
 				switch (input_type) {
 					case "datetime-local":
-						const date = new Date($input.value);
-						value = Math.floor(date.getTime() / 1e3);
+						value = datetime_local_to_epoch($input.value);
 						break;
 					default: value = getInputValue($input);
 				}
@@ -9181,10 +9214,7 @@ function set_form_values(gobj, template, $form, record) {
 			case "input":
 				switch (input_type) {
 					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 = "";
+						$input.value = date_to_datetime_local(value);
 						break;
 					case "color":
 						$input.value = convertColor(value);
@@ -25235,6 +25265,7 @@ function ac_create_record(gobj, event, kw, src) {
 	if (treedb_update_node$1(gobj, treedb_name, topic_name, record, {
 		list_dict: true,
 		create: true,
+		create_only: true,
 		autolink: true
 	}, form_write) < 0) {
 		answer_form_write(gobj, src, form_write, false);
@@ -26475,6 +26506,58 @@ function delete_impact(desc, records) {
 	return out;
 }
 //#endregion
+//#region src/table_cell_text.js
+/****************************************************************************
+*          table_cell_text.js
+*
+*          What a treedb table cell hands Tabulator.
+*
+*          Tabulator assigns a formatter's STRING result with `innerHTML`
+*          (only its own `plaintext` formatter escapes), so a record's text
+*          returned as a string is parsed as markup: `a<b and c>d` showed
+*          as `ad`, and a field holding `<img src=x onerror=...>` ran it in
+*          the operator's browser (M31 of the 2026-09-21 review). Record
+*          data goes in as a TEXT NODE, and a cell built around it as DOM,
+*          never as an HTML string with the data interpolated.
+*
+*          Pure but for the `document` it is handed, so it is tested
+*          without one.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+****************************************************************************/
+/************************************************************
+*  A value shown as text, whatever characters it holds
+************************************************************/
+function cell_text(value, doc = globalThis.document) {
+	if (value === null || value === void 0) return "";
+	return doc.createTextNode(String(value));
+}
+/************************************************************
+*  The hook cell, as a createElement2 spec: the row id is an
+*  attribute VALUE, never text spliced into markup (an id holding
+*  a `"` cut the attribute and lost the rest of the id)
+************************************************************/
+function hook_cell_spec(row_id, col_id, items, title, title_key) {
+	return [
+		"a",
+		{
+			class: "HOOK_CELL hook_cell",
+			title,
+			"data-i18n-title": title_key,
+			"aria-label": title,
+			"data-i18n-aria-label": title_key,
+			"data-row_id": String(row_id),
+			"data-col_id": String(col_id)
+		},
+		[["span", { class: "icon yi-eye" }], [
+			"u",
+			{ class: "HOOK_CELL_COUNT" },
+			`[ ${items} ]`
+		]]
+	];
+}
+//#endregion
 //#region src/c_yui_treedb_topic_with_form.js
 /***********************************************************************
 *          c_yui_treedb_topic_with_form.js
@@ -27901,18 +27984,8 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field) {
 			break;
 		case "hook":
 			let items = treedb_hook_data_size(value);
-			if (items > 0) {
-				let hook_title = String(t("show linked records")).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-				value = [
-					"<a class=\"hook_cell\" ",
-					`title="${hook_title}" aria-label="${hook_title}" `,
-					`data-row_id="${row.id}" `,
-					`data-col_id="${col.id}" > `,
-					"<span style=\"\" class=\"icon yi-eye\"></span>",
-					`<span>[&nbsp;<u>${items}</u>&nbsp;]</span>`,
-					"</a>"
-				].join("");
-			} else value = "";
+			if (items > 0) value = createElement2(hook_cell_spec(row.id, col.id, items, t("show linked records"), "show linked records"));
+			else value = "";
 			break;
 		case "file":
 		case "fkey":
@@ -27938,7 +28011,7 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field) {
 					value = /* @__PURE__ */ new Date(value * 1e3);
 					const rawLocale = navigator.language;
 					const userLocale = typeof rawLocale === "string" && rawLocale && rawLocale !== "undefined" ? rawLocale : void 0;
-					value = "<span class=\"is-size-7\">" + new Intl.DateTimeFormat(userLocale, {
+					const formatter = new Intl.DateTimeFormat(userLocale, {
 						day: "numeric",
 						month: "short",
 						year: "numeric",
@@ -27946,7 +28019,12 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field) {
 						minute: "2-digit",
 						second: "2-digit",
 						hour12: true
-					}).format(value) + "</span>";
+					});
+					value = createElement2([
+						"span",
+						{ class: "is-size-7" },
+						formatter.format(value)
+					]);
 			}
 			break;
 		case "color": break;
@@ -27958,6 +28036,7 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field) {
 		log_error(`transform__treedb_value_2_table_value() unexpected object value for field '${field}' (type='${field_desc.type}', real_type='${field_desc.real_type}'): ${JSON.stringify(value)}, topic ${priv.topic_name}`);
 		value = JSON.stringify(value);
 	}
+	if (typeof value === "string" && value !== "") value = cell_text(value);
 	return value;
 }
 /************************************************************

package/package.json

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

package/src/c_yui_form.js

@@ -83,6 +83,7 @@ import "tabulator-tables/dist/css/tabulator_bulma.css";
 
 import "./tabulator.css";
 import {is_time_field} from "./json_view_helpers.js";
+import {date_to_datetime_local, datetime_local_to_epoch} from "./form_time_value.js";
 import { TabulatorFull as Tabulator } from "tabulator-tables"; // Import Full Tabulator JS
 // import { Tabulator } from "tabulator-tables";  // Import light Tabulator JS
 
@@ -1247,6 +1248,12 @@ function create_form_field(
                 type: inputType,
                 placeholder: placeholder
             };
+            if(inputType === 'datetime-local') {
+                /*  A time column is an epoch in SECONDS: without `step: 1`
+                 *  the input holds minutes, and a save wrote the seconds
+                 *  away (see form_time_value.js). */
+                attrs.step = 1;
+            }
             Object.assign(attrs, extras);
 
             if(readonly) {
@@ -2321,10 +2328,7 @@ function get_form_values(gobj, $form)
             case "input":
                 switch(input_type) {
                     case "datetime-local":
-                        // Create a new Date object from the datetime-local $input value
-                        const date = new Date($input.value);
-                        // Convert the Date object to epoch time (in seconds)
-                        value = Math.floor(date.getTime() / 1000);
+                        value = datetime_local_to_epoch($input.value);
                         break;
                     default:
                         value = getInputValue($input);
@@ -2588,18 +2592,8 @@ function set_form_values(gobj, template, $form, record)
             case "input":
                 switch(input_type) {
                     case "datetime-local":
-                        /*  value is a Date (see treedb_value_2_form_value);
-                         *  a datetime-local input wants local
-                         *  "YYYY-MM-DDTHH:mm" (no seconds). */
-                        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 = "";
-                        }
+                        /*  value is a Date (see treedb_value_2_form_value)  */
+                        $input.value = date_to_datetime_local(value);
                         break;
                     case "color":
                         $input.value = convertColor(value);

package/src/c_yui_treedb_topic_with_form.js

@@ -111,6 +111,7 @@ import {delete_impact} from "./delete_impact.js";
 
 import "./c_yui_treedb_topic_with_form.css";
 import "./tabulator.css";
+import {cell_text, hook_cell_spec} from "./table_cell_text.js";
 
 import { TabulatorFull as Tabulator } from "tabulator-tables";
 
@@ -2147,20 +2148,12 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field)
             let items = treedb_hook_data_size(value);
 
             if(items > 0) {
-                /*  An HTML STRING, so the name is escaped by hand; a language
-                 *  change re-runs setColumns(), which re-runs this.  */
-                let hook_title = String(t("show linked records"))
-                    .replace(/&/g, "&").replace(/"/g, """)
-                    .replace(/</g, "&lt;").replace(/>/g, "&gt;");
-                value = [
-                    '<a class="hook_cell" ',
-                    `title="${hook_title}" aria-label="${hook_title}" `,
-                    `data-row_id="${row.id}" `,
-                    `data-col_id="${col.id}" > `,
-                    '<span style="" class="icon yi-eye"></span>',
-                    `<span>[&nbsp;<u>${items}</u>&nbsp;]</span>`,
-                    '</a>'
-                ].join('');
+                /*  DOM, not an HTML string: the row id is record data (M31
+                 *  of the 2026-09-21 review). A language change re-runs
+                 *  setColumns(), which re-runs this.  */
+                value = createElement2(hook_cell_spec(
+                    row.id, col.id, items, t("show linked records"), "show linked records"
+                ));
             } else {
                 value = "";
             }
@@ -2217,7 +2210,7 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field)
                     };
 
                     const formatter = new Intl.DateTimeFormat(userLocale, opts);
-                    value = '<span class="is-size-7">' + formatter.format(value) + '</span>';
+                    value = createElement2(['span', {class: 'is-size-7'}, formatter.format(value)]);
                     break;
             }
             break;
@@ -2249,6 +2242,15 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field)
         value = JSON.stringify(value);
     }
 
+    /*
+     *  A string is record data, and Tabulator would parse it as markup
+     *  (innerHTML): `a<b` lost its text, a field holding an `<img onerror>`
+     *  ran it (M31 of the 2026-09-21 review). Shown as a text node.
+     */
+    if(typeof value === "string" && value !== "") {
+        value = cell_text(value);
+    }
+
     return value;
 }
 

package/src/c_yui_treedb_topics.js

@@ -2523,9 +2523,15 @@ function ac_create_record(gobj, event, kw, src)
     let topic_name = gobj_read_attr(src, "topic_name");
     let record = kw.record;
 
+    /*  `create_only`: +New makes a NEW record. With `create` alone a taken
+     *  id was an update -- the record overwritten and, through autolink
+     *  with the selects empty, unlinked, answered "Node update!" (M28 of
+     *  the 2026-09-21 review). A backend older than the option ignores it
+     *  and keeps the old upsert.  */
     let options = {
         list_dict: true,
         create: true,
+        create_only: true,
         autolink: true
     };
 

package/src/form_time_value.js

@@ -0,0 +1,46 @@
+/****************************************************************************
+ *          form_time_value.js
+ *
+ *          A treedb `time` / `now` column is an epoch in SECONDS, and a form
+ *          shows it in a `datetime-local` input. These two convert between
+ *          them, and they must be each other's inverse: a writable time
+ *          column travels back on EVERY save of the record.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ****************************************************************************/
+
+/************************************************************
+ *  A Date -> the value of a `datetime-local` input, in local time,
+ *  WITH seconds: the input is built with `step: 1`, which is what
+ *  lets it hold them. Written as "YYYY-MM-DDTHH:mm" it lost them on
+ *  every save of any field (M26 of the 2026-09-21 review).
+ ************************************************************/
+function date_to_datetime_local(value)
+{
+    if(!(value instanceof Date) || isNaN(value.getTime())) {
+        return "";
+    }
+    let pad = (n) => String(n).padStart(2, "0");
+    return `${value.getFullYear()}-${pad(value.getMonth() + 1)}` +
+        `-${pad(value.getDate())}T` +
+        `${pad(value.getHours())}:${pad(value.getMinutes())}` +
+        `:${pad(value.getSeconds())}`;
+}
+
+/************************************************************
+ *  The value of a `datetime-local` input -> epoch in seconds
+ ************************************************************/
+function datetime_local_to_epoch(value)
+{
+    if(!value) {
+        return null;
+    }
+    const date = new Date(value);
+    if(isNaN(date.getTime())) {
+        return null;
+    }
+    return Math.floor(date.getTime() / 1000);
+}
+
+export {date_to_datetime_local, datetime_local_to_epoch};

package/src/form_time_value.test.js

@@ -0,0 +1,23 @@
+import {describe, it, expect} from "vitest";
+import {date_to_datetime_local, datetime_local_to_epoch} from "./form_time_value.js";
+
+describe("form_time_value", () => {
+
+    it("an epoch with seconds survives a round trip through the input", () => {
+        /*  M26 of the 2026-09-21 review: the input was written without
+         *  seconds, so every save of ANY field moved a writable time
+         *  column back up to 59 s. */
+        const epoch = 1790000037;   // :37 seconds
+        const shown = date_to_datetime_local(new Date(epoch * 1000));
+        expect(datetime_local_to_epoch(shown)).toBe(epoch);
+    });
+
+    it("an empty input is null, not NaN", () => {
+        expect(datetime_local_to_epoch("")).toBe(null);
+    });
+
+    it("no date shows as an empty input", () => {
+        expect(date_to_datetime_local(null)).toBe("");
+        expect(date_to_datetime_local(new Date(NaN))).toBe("");
+    });
+});

package/src/table_cell_text.js

@@ -0,0 +1,53 @@
+/****************************************************************************
+ *          table_cell_text.js
+ *
+ *          What a treedb table cell hands Tabulator.
+ *
+ *          Tabulator assigns a formatter's STRING result with `innerHTML`
+ *          (only its own `plaintext` formatter escapes), so a record's text
+ *          returned as a string is parsed as markup: `a<b and c>d` showed
+ *          as `ad`, and a field holding `<img src=x onerror=...>` ran it in
+ *          the operator's browser (M31 of the 2026-09-21 review). Record
+ *          data goes in as a TEXT NODE, and a cell built around it as DOM,
+ *          never as an HTML string with the data interpolated.
+ *
+ *          Pure but for the `document` it is handed, so it is tested
+ *          without one.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ****************************************************************************/
+
+/************************************************************
+ *  A value shown as text, whatever characters it holds
+ ************************************************************/
+function cell_text(value, doc = globalThis.document)
+{
+    if(value === null || value === undefined) {
+        return "";
+    }
+    return doc.createTextNode(String(value));
+}
+
+/************************************************************
+ *  The hook cell, as a createElement2 spec: the row id is an
+ *  attribute VALUE, never text spliced into markup (an id holding
+ *  a `"` cut the attribute and lost the rest of the id)
+ ************************************************************/
+function hook_cell_spec(row_id, col_id, items, title, title_key)
+{
+    return ['a', {
+        class: 'HOOK_CELL hook_cell',
+        title: title,
+        'data-i18n-title': title_key,
+        'aria-label': title,
+        'data-i18n-aria-label': title_key,
+        'data-row_id': String(row_id),
+        'data-col_id': String(col_id)
+    }, [
+        ['span', {class: 'icon yi-eye'}],
+        ['u', {class: 'HOOK_CELL_COUNT'}, `[ ${items} ]`]
+    ]];
+}
+
+export {cell_text, hook_cell_spec};

package/src/table_cell_text.test.js

@@ -0,0 +1,39 @@
+import {describe, it, expect} from "vitest";
+import {cell_text, hook_cell_spec} from "./table_cell_text.js";
+
+/*  A document double: the library has no DOM test (see yui_clipboard.test.js)  */
+const doc = {
+    createTextNode: (text) => ({nodeType: 3, textContent: text})
+};
+
+describe("table_cell_text", () => {
+
+    it("record text is a text node, markup included", () => {
+        /*  M31: Tabulator puts a string through innerHTML  */
+        const node = cell_text("limit a<b and c>d", doc);
+        expect(node.nodeType).toBe(3);
+        expect(node.textContent).toBe("limit a<b and c>d");
+        expect(cell_text('<img src=x onerror=alert(1)>', doc).textContent)
+            .toBe('<img src=x onerror=alert(1)>');
+    });
+
+    it("numbers and booleans are shown as text too, nothing is empty", () => {
+        expect(cell_text(0, doc).textContent).toBe("0");
+        expect(cell_text(false, doc).textContent).toBe("false");
+        expect(cell_text(null, doc)).toBe("");
+        expect(cell_text(undefined, doc)).toBe("");
+    });
+
+    it("the hook cell carries the row id whole, quote included", () => {
+        const spec = hook_cell_spec(
+            'es"madrid', "users", 3, "ver registros enlazados", "show linked records"
+        );
+        expect(spec[0]).toBe("a");
+        expect(spec[1]["data-row_id"]).toBe('es"madrid');
+        expect(spec[1]["data-col_id"]).toBe("users");
+        expect(spec[1].title).toBe("ver registros enlazados");
+        expect(spec[1]["aria-label"]).toBe("ver registros enlazados");
+        expect(spec[1]["data-i18n-title"]).toBe("show linked records");
+        expect(spec[1]["data-i18n-aria-label"]).toBe("show linked records");
+    });
+});