@yuneta/gobj-ui 7.23.0 → 7.23.2

package/README.md

@@ -439,15 +439,34 @@ the order of arrival: the viewer opens on the **tree** (`view_mode` default).
 | `tree` | *where is this value, and what is around it* | the lazy view; the only one that can drill; the default |
 | `graph` | *what shape is this* | a hosted `C_YUI_JSON_GRAPH` child (AntV/G6) |
 
-The graph carries **its own** toolbar, and since `7.22.0` that toolbar has the
-same two facilities the tree has: a **find box** (rate-limited, `EV_FIND_NODES`)
+Since `7.23.2` the schema and cell-JSON popups of `C_YUI_TREEDB_TOPIC_WITH_FORM`
+present that viewer as a floating `C_YUI_WINDOW` on a laptop — movable,
+resizable, maximisable, position remembered — and keep the modal sheet on a
+phone. A JSON document is read *while* looking at the table it came from, which
+a modal cannot allow; a phone has no room to arrange anything, so the sheet
+stays. Note the close contract: `C_YUI_WINDOW.close_window()` calls `on_close`
+and THEN destroys itself, so a host must drop its reference rather than destroy
+the window too.
+
+The graph carries **its own** toolbar, a **layout picker**
+(`EV_CHANGE_LAYOUT {layout}`: `vertical tree`, `dagre top-down`,
+`dagre left-right` — the layout and the edge type move together), and since
+`7.22.0` the same two facilities the tree has: a **find box** (rate-limited, `EV_FIND_NODES`)
 that highlights matching rows and outlines the cards they are in and says how
 many matched, and **expand-all / collapse-all** (`EV_EXPAND_ALL` /
 `EV_COLLAPSE_ALL`) that fold every card but the root, marking each cut with
 `▸ N` so the shape stays legible and you can see where the rest went. Since
 `7.23.0` each card that HAS a branch also carries its own handle in its header
-(`▾` open, `▸ N` folded, `EV_TOGGLE_FOLD {path}`); a leaf gets a spacer instead,
-because a handle that does nothing is worse than none.
+(`EV_TOGGLE_FOLD {path}`); a leaf gets a spacer of the same width instead,
+because a handle that does nothing is worse than none and the labels should
+stay on one axis.
+
+That handle is the **same filled chip the gobj tree draws** (`+N` folded, `−`
+open — see `render_toggle_html` in `c_yui_gobj_tree_js.js`), and it is a chip
+for a reason: `7.23.0` shipped it as a bare `▾` and on a phone it was
+invisible. At the zoom that fits a document on screen a glyph is a couple of
+pixels of ink; a filled chip is still a visible blob and reads as something you
+press. `+N` also carries the count of what is hidden.
 
 The handle is delegated from the canvas mount in the **capture** phase, over
 `pointerdown`/`pointerup`/`mousedown`/`click`: the card is an `innerHTML`

package/dist/gobj-ui.cjs.js

@@ -3518,7 +3518,7 @@ function composed_title(gobj) {
 *   Below the mobile breakpoint the window is a full-screen
 *   sheet (no float / drag / resize).
 ************************************************************/
-function is_mobile$2() {
+function is_mobile$3() {
 	return (window.innerWidth || document.documentElement.offsetWidth) <= MOBILE_MAX;
 }
 /************************************************************
@@ -3551,7 +3551,7 @@ function do_minimize(gobj) {
 ************************************************************/
 function build_ui$15(gobj) {
 	ensure_window_style();
-	let mobile = is_mobile$2();
+	let mobile = is_mobile$3();
 	let header = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "header");
 	if ((0, _yuneta_gobj_js.is_gobj)(header)) header = (0, _yuneta_gobj_js.gobj_read_attr)(header, "$container");
 	if (!header) header = build_default_header(gobj);
@@ -3889,7 +3889,7 @@ function min$1(gobj) {
 *  handlers moving
 ************************************************************/
 function mvStart(gobj, evt) {
-	if (is_mobile$2()) return;
+	if (is_mobile$3()) return;
 	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
 	let window_rect = $container.getBoundingClientRect();
 	let x = evt.screenX;
@@ -4048,7 +4048,7 @@ function do_center(gobj, x, y, width, height) {
 function handleResize(gobj) {
 	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
 	if (!$container) return;
-	if (is_mobile$2()) {
+	if (is_mobile$3()) {
 		$container.classList.add("is-mobile-sheet");
 		let vw = window.innerWidth || document.documentElement.offsetWidth;
 		let vh = window.innerHeight || document.documentElement.offsetHeight;
@@ -9479,6 +9479,56 @@ var FOLD_SWALLOWED_EVENTS = [
 	"mousedown",
 	"click"
 ];
+var LAYOUTS$1 = {
+	"json-tree": {
+		label: "vertical tree",
+		g6_layout: { type: "json-tree-layout" },
+		edge_type: "cubic-vertical"
+	},
+	"dagre-tb": {
+		label: "dagre top-down",
+		g6_layout: {
+			type: "antv-dagre",
+			rankdir: "TB",
+			nodesep: 20,
+			ranksep: 40
+		},
+		edge_type: "polyline"
+	},
+	"dagre-lr": {
+		label: "dagre left-right",
+		g6_layout: {
+			type: "antv-dagre",
+			rankdir: "LR",
+			nodesep: 20,
+			ranksep: 40
+		},
+		edge_type: "polyline"
+	}
+};
+var DEFAULT_LAYOUT = "json-tree";
+function get_layout_cfg$1(key) {
+	return LAYOUTS$1[key] || LAYOUTS$1[DEFAULT_LAYOUT];
+}
+/************************************************************
+*  A layout's label, with every key SPELLED OUT inside t().
+*
+*  Never t(LAYOUTS[key].label) nor a `data-i18n` fed from that
+*  table: the apps' validate-locales scans for t("literal"),
+*  so a key reached through a variable is a key it cannot
+*  demand — and i18next answers an undefined key with the key
+*  itself, which renders in lower-case English and never
+*  changes language.  Twice already in this component's
+*  history (7.20.0 `tree view`, and this table on its first
+*  draft).
+************************************************************/
+function layout_label(key) {
+	switch (key) {
+		case "dagre-tb": return (0, i18next.t)("dagre top-down");
+		case "dagre-lr": return (0, i18next.t)("dagre left-right");
+		default: return (0, i18next.t)("vertical tree");
+	}
+}
 /***************************************************************
 *              Data
 ***************************************************************/
@@ -9489,6 +9539,7 @@ var attrs_table$11 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$container", 0, null, "Container element"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "canvas_id", 0, "", "Canvas ID"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "wide", 0, "36px", "Height of header"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "layout", 0, "json-tree", "Layout key (see LAYOUTS)"),
 	(0, _yuneta_gobj_js.SDATA_END)()
 ];
 var PRIVATE_DATA$11 = {
@@ -9504,6 +9555,7 @@ var PRIVATE_DATA$11 = {
 	match_count: 0,
 	find_timer: null,
 	fold_listener: null,
+	$layout_select: null,
 	$find_input: null,
 	$find_result: null,
 	$find_count: null
@@ -9678,6 +9730,7 @@ function build_ui$10(gobj) {
 		};
 		for (let type of FOLD_SWALLOWED_EVENTS) $mount.addEventListener(type, priv.fold_listener, true);
 	} else (0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no canvas mount, fold handles are dead`);
+	priv.$layout_select = $container.querySelector(".JSON_GRAPH_LAYOUT");
 	priv.$find_input = $container.querySelector(".JSON_GRAPH_FIND_INPUT");
 	priv.$find_result = $container.querySelector(".JSON_GRAPH_FIND_RESULT");
 	priv.$find_count = $container.querySelector(".JSON_GRAPH_FIND_COUNT");
@@ -9835,7 +9888,42 @@ function make_toolbar$3(gobj) {
 			} }
 		]);
 	}
-	let right_items = [graph_fold_button(gobj, "EV_EXPAND_ALL", "expand all", true), graph_fold_button(gobj, "EV_COLLAPSE_ALL", "collapse all", false)];
+	let current_layout = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "layout") || DEFAULT_LAYOUT;
+	let options = Object.keys(LAYOUTS$1).map(function(key) {
+		let attrs = {
+			value: key,
+			"data-i18n": LAYOUTS$1[key].label
+		};
+		if (key === current_layout) attrs.selected = "selected";
+		return [
+			"option",
+			attrs,
+			layout_label(key)
+		];
+	});
+	let right_items = [
+		(0, _yuneta_gobj_js.createElement2)([
+			"select",
+			{
+				class: "JSON_GRAPH_LAYOUT select",
+				style: {
+					height: toolbar_wide,
+					"margin-left": "0.5em"
+				},
+				title: (0, i18next.t)("layout"),
+				"data-i18n-title": "layout",
+				"aria-label": (0, i18next.t)("layout"),
+				"data-i18n-aria-label": "layout"
+			},
+			options,
+			{ change: (evt) => {
+				evt.stopPropagation();
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_CHANGE_LAYOUT", { layout: evt.target.value }, gobj);
+			} }
+		]),
+		graph_fold_button(gobj, "EV_EXPAND_ALL", "expand all", true),
+		graph_fold_button(gobj, "EV_COLLAPSE_ALL", "collapse all", false)
+	];
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -9861,6 +9949,7 @@ function make_toolbar$3(gobj) {
 ************************************************************/
 function build_graph$3(gobj) {
 	let priv = gobj.priv;
+	let layout_cfg = get_layout_cfg$1((0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "layout"));
 	const graph = priv.graph = new _antv_g6.Graph({
 		container: priv.canvas_id,
 		animation: false,
@@ -9868,14 +9957,14 @@ function build_graph$3(gobj) {
 		zoomRange: [.1, 4],
 		node: { style: { labelPlacement: "center" } },
 		edge: {
-			type: "cubic-vertical",
+			type: layout_cfg.edge_type,
 			style: {
 				stroke: "#999",
 				lineWidth: 1,
 				endArrow: true
 			}
 		},
-		layout: { type: "json-tree-layout" },
+		layout: layout_cfg.g6_layout,
 		behaviors: ["drag-canvas", "zoom-canvas"]
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
@@ -9940,15 +10029,40 @@ function build_cell_html(key, value, type, dark, matched) {
 *  innerHTML string, so there is no other way to hang a
 *  handler on it.
 *
-*  Folded it shows the glyph AND the count of branches hidden
-*  under it; open, just the glyph.  No word, no title: a word
-*  inside this string could carry no i18n key.
-************************************************************/
-function fold_toggle_html(path, foldable, folded, branches) {
-	if (!foldable) return `<span style="width:1.1em; flex:0 0 auto;"></span>`;
-	let glyph = folded ? "&#9656;" : "&#9662;";
-	let text = folded ? `${glyph} ${branches}` : glyph;
-	return `<span data-fold-path="${(0, _yuneta_gobj_js.escapeHtml)(path)}" style="flex:0 0 auto; cursor:pointer; user-select:none; padding:0 .2em; min-width:1.1em; text-align:left;">${text}</span>`;
+*  A filled CHIP, the same one the gobj tree draws
+*  (`c_yui_gobj_tree_js.js`, render_toggle_html): background,
+*  border, radius, and `+N` / `−` rather than a triangle.  It
+*  shipped once as a bare `▾` and on a phone it was invisible —
+*  a glyph is a couple of pixels of ink at the zoom that fits a
+*  document on screen, while a filled chip stays a visible blob
+*  and reads as something you press.  `+N` also carries the
+*  count of what is hidden, which the open state does not need.
+*
+*  No `title`: it would be a word inside an innerHTML string,
+*  where it could carry no i18n key and would sit in English
+*  forever.  `+3` and `−` need no language.
+************************************************************/
+function fold_toggle_html(path, foldable, folded, branches, colors) {
+	if (!foldable) return `<span style="width:24px; flex:0 0 auto;"></span>`;
+	let label = folded ? "+" + branches : "&#8722;";
+	return `<span data-fold-path="${(0, _yuneta_gobj_js.escapeHtml)(path)}" style="
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 22px;
+        height: 16px;
+        padding: 0 5px;
+        background: ${colors.bg};
+        color: ${colors.border};
+        border: 1px solid ${colors.bg};
+        border-radius: 6px;
+        font-size: 11px;
+        font-weight: 700;
+        line-height: 1;
+        cursor: pointer;
+        user-select: none;
+    ">${label}</span>`;
 }
 /************************************************************
 *  Does this key/value pair match the find term?
@@ -10060,7 +10174,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
         display: flex;
         align-items: center;
         gap: 6px;
-    ">${fold_toggle_html(path, foldable, folded, pending_complex.length)}<span style="flex:1 1 auto; text-align:center;">${(0, _yuneta_gobj_js.escapeHtml)(label)}</span></div>
+    ">${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}<span style="flex:1 1 auto; text-align:center;">${(0, _yuneta_gobj_js.escapeHtml)(label)}</span></div>
     ${content_html}
 </div>`;
 	let node = {
@@ -10277,6 +10391,34 @@ function ac_refresh$5(gobj, event, kw, src) {
 }
 /************************************************************
 *  {theme: "dark"|"light"} — the app switched theme.
+*  EV_CHANGE_LAYOUT { layout }
+*
+*  The layout AND the edge type move together — a vertical
+*  layout with horizontal cubics draws every edge the wrong way
+*  round — and then the graph is rebuilt and refitted, because a
+*  new layout is a new shape and the old camera framed the old
+*  one.
+************************************************************/
+function ac_change_layout$1(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let key = kw && kw.layout || "";
+	if (!LAYOUTS$1[key]) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: unknown layout '${key}'`);
+		return -1;
+	}
+	if (key === (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "layout")) return 0;
+	(0, _yuneta_gobj_js.gobj_write_str_attr)(gobj, "layout", key);
+	if (priv.$layout_select && priv.$layout_select.value !== key) priv.$layout_select.value = key;
+	let cfg = get_layout_cfg$1(key);
+	if (priv.graph) priv.graph.setOptions({
+		layout: cfg.g6_layout,
+		edge: { type: cfg.edge_type }
+	});
+	refresh_json(gobj);
+	update_find_result(gobj);
+	return 0;
+}
+/************************************************************
 *  EV_TOGGLE_FOLD { path } — fold or unfold ONE card.
 *
 *  The camera does not move: folding one branch is a local
@@ -10491,6 +10633,11 @@ function create_gclass$11(gclass_name) {
 			ac_toggle_fold,
 			null
 		],
+		[
+			"EV_CHANGE_LAYOUT",
+			ac_change_layout$1,
+			null
+		],
 		[
 			"EV_EXPAND_ALL",
 			ac_expand_all$2,
@@ -10552,6 +10699,7 @@ function create_gclass$11(gclass_name) {
 		["EV_REFRESH", 0],
 		["EV_FIND_NODES", 0],
 		["EV_TOGGLE_FOLD", 0],
+		["EV_CHANGE_LAYOUT", 0],
 		["EV_EXPAND_ALL", 0],
 		["EV_COLLAPSE_ALL", 0],
 		["EV_THEME", 0],
@@ -10885,12 +11033,13 @@ function mt_start$10(gobj) {
 /***************************************************************
 *          Framework Method: Stop
 ***************************************************************/
-function mt_stop$10(gobj) {}
+function mt_stop$10(gobj) {
+	teardown_graph_child(gobj);
+}
 /***************************************************************
 *          Framework Method: Destroy
 ***************************************************************/
 function mt_destroy$10(gobj) {
-	teardown_graph_child(gobj);
 	destroy_ui$5(gobj);
 }
 /***************************
@@ -16190,7 +16339,7 @@ function treedb_delete_node$1(gobj, treedb_name, topic_name, record, options) {
 /************************************************************
 *  True on a phone-width viewport (Bulma's mobile breakpoint).
 ************************************************************/
-function is_mobile$1() {
+function is_mobile$2() {
 	return typeof window !== "undefined" && window.innerWidth <= 768;
 }
 /************************************************************
@@ -16209,7 +16358,7 @@ function open_json_viewer$1(gobj) {
 		yui_shell_show_error(yui_shell_of(gobj), "raw json viewer unavailable", { t: i18next.t });
 		return;
 	}
-	let mobile = is_mobile$1();
+	let mobile = is_mobile$2();
 	let shell = yui_shell_of(gobj);
 	let jv = (0, _yuneta_gobj_js.gobj_create_service)(`treedb-topics-json-${(0, _yuneta_gobj_js.clean_name)((0, _yuneta_gobj_js.gobj_name)(gobj))}`, "C_YUI_JSON", { subscriber: gobj }, gobj);
 	if (!jv) {
@@ -17422,10 +17571,102 @@ var PRIVATE_DATA$5 = {
 	form_modal: null,
 	schema_gobj: null,
 	schema_modal: null,
+	schema_win: null,
 	cell_json_gobj: null,
-	cell_json_modal: null
+	cell_json_modal: null,
+	cell_json_win: null
 };
 var __gclass__$5 = null;
+function is_mobile$1() {
+	return typeof window !== "undefined" && window.innerWidth <= 768;
+}
+/************************************************************
+*  Present a JSON viewer's $container.
+*
+*  On a LAPTOP a floating C_YUI_WINDOW: a JSON document is
+*  something you read WHILE looking at the table behind it —
+*  you move it, you resize it, you maximise it when the
+*  document is big.  A modal can do none of that, and it
+*  darkens exactly the rows you opened the cell from.
+*
+*  On a phone the modal sheet stays: there is no room to
+*  arrange anything, and the sheet already carries the shell's
+*  Escape / Back handling.
+*
+*  Returns {win, modal} — exactly one of them is set.
+************************************************************/
+function present_json_popup(gobj, $box, opts) {
+	let shell = yui_shell_of(gobj);
+	if (!shell) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no shell, cannot present the json`);
+		return null;
+	}
+	if (is_mobile$1()) return {
+		modal: yui_shell_show_modal(shell, $box, {
+			dialog: true,
+			logical_class: opts.logical_class + "_SHEET",
+			title_prefix: opts.title_prefix,
+			title: opts.title,
+			t: i18next.t,
+			on_close: opts.on_close
+		}),
+		win: null
+	};
+	let win = (0, _yuneta_gobj_js.gobj_create_service)(opts.name, "C_YUI_WINDOW", {
+		$parent: popup_mount_layer(gobj),
+		subscriber: null,
+		modal: false,
+		showMax: true,
+		showFooter: false,
+		resizable: true,
+		center: true,
+		auto_save_size_and_position: true,
+		width: 720,
+		height: 620,
+		logical_class: opts.logical_class + "_WINDOW",
+		title_prefix: opts.title_prefix,
+		title: opts.title,
+		icon: opts.icon,
+		body: $box,
+		manager: null,
+		on_close: function() {
+			if ((0, _yuneta_gobj_js.gobj_is_destroying)(gobj)) return;
+			opts.forget_window();
+			opts.on_close();
+		}
+	}, gobj);
+	if (!win) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot create the json window`);
+		return null;
+	}
+	(0, _yuneta_gobj_js.gobj_start)(win);
+	return {
+		win,
+		modal: null
+	};
+}
+/************************************************************
+*  Retire a presenting window: reference cleared FIRST, then
+*  stop, then destroy.
+*
+*  The order is the whole content of this function.  The ✕ of
+*  the window calls back into the teardown that calls this, so
+*  clearing the reference first is what stops the recursion.
+*  And it is STOP then destroy because the window was started
+*  on open: handing a running gobj to gobj_destroy() makes the
+*  framework rescue it and say so — "Destroying a RUNNING
+*  gobj" — which is a caller's bug, not a framework message.
+*  Same lesson `c_tranger_view.close_json_viewer` carries.
+************************************************************/
+function retire_popup_window(win) {
+	if (!win) return;
+	try {
+		if ((0, _yuneta_gobj_js.gobj_is_running)(win)) (0, _yuneta_gobj_js.gobj_stop)(win);
+		(0, _yuneta_gobj_js.gobj_destroy)(win);
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_warning)(`${GCLASS_NAME$5}: json window already gone: ${e}`);
+	}
+}
 function popup_mount_layer(gobj) {
 	let $layer = yui_shell_popup_layer(yui_shell_of(gobj));
 	if ($layer) return $layer;
@@ -18596,8 +18837,7 @@ function open_schema_dialog(gobj) {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no desc, no schema to show`);
 		return;
 	}
-	let shell = yui_shell_of(gobj);
-	if (!shell) {
+	if (!yui_shell_of(gobj)) {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no shell, cannot open the schema view`);
 		return;
 	}
@@ -18614,16 +18854,25 @@ function open_schema_dialog(gobj) {
 		teardown_schema_child(gobj);
 		return;
 	}
-	priv.schema_modal = yui_shell_show_modal(shell, $box, {
-		dialog: true,
-		logical_class: "TREEDB_SCHEMA_SHEET",
+	let presented = present_json_popup(gobj, $box, {
+		name: "schemawin_" + (0, _yuneta_gobj_js.clean_name)((0, _yuneta_gobj_js.gobj_name)(gobj)),
+		logical_class: "TREEDB_SCHEMA",
 		title_prefix: (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "topic_name"),
 		title: "schema",
-		t: i18next.t,
+		icon: "yi-table",
+		forget_window: function() {
+			priv.schema_win = null;
+		},
 		on_close: function() {
 			teardown_schema_child(gobj);
 		}
 	});
+	if (!presented) {
+		teardown_schema_child(gobj);
+		return;
+	}
+	priv.schema_modal = presented.modal;
+	priv.schema_win = presented.win;
 	(0, _yuneta_gobj_js.gobj_send_event)(json_view, "EV_SET_JSON", { json: desc }, gobj);
 }
 /************************************************************
@@ -18638,6 +18887,9 @@ function teardown_schema_child(gobj) {
 		(0, _yuneta_gobj_js.gobj_destroy)(priv.schema_gobj);
 		priv.schema_gobj = null;
 	}
+	let win = priv.schema_win;
+	priv.schema_win = null;
+	retire_popup_window(win);
 	priv.schema_modal = null;
 }
 /************************************************************
@@ -18684,8 +18936,7 @@ function open_cell_json_dialog(gobj, row_id, col_id) {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: row '${row_id}' has no col '${col_id}'`);
 		return;
 	}
-	let shell = yui_shell_of(gobj);
-	if (!shell) {
+	if (!yui_shell_of(gobj)) {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no shell, cannot open the cell json`);
 		return;
 	}
@@ -18702,16 +18953,25 @@ function open_cell_json_dialog(gobj, row_id, col_id) {
 		teardown_cell_json_child(gobj);
 		return;
 	}
-	priv.cell_json_modal = yui_shell_show_modal(shell, $box, {
-		dialog: true,
-		logical_class: "TREEDB_CELL_JSON_SHEET",
+	let presented = present_json_popup(gobj, $box, {
+		name: "cellwin_" + (0, _yuneta_gobj_js.clean_name)((0, _yuneta_gobj_js.gobj_name)(gobj)),
+		logical_class: "TREEDB_CELL_JSON",
 		title_prefix: String(row_id),
 		title: col_id,
-		t: i18next.t,
+		icon: "yi-js-square",
+		forget_window: function() {
+			priv.cell_json_win = null;
+		},
 		on_close: function() {
 			teardown_cell_json_child(gobj);
 		}
 	});
+	if (!presented) {
+		teardown_cell_json_child(gobj);
+		return;
+	}
+	priv.cell_json_modal = presented.modal;
+	priv.cell_json_win = presented.win;
 	(0, _yuneta_gobj_js.gobj_send_event)(json_view, "EV_SET_JSON", { json: value }, gobj);
 }
 /************************************************************
@@ -18726,6 +18986,9 @@ function teardown_cell_json_child(gobj) {
 		(0, _yuneta_gobj_js.gobj_destroy)(priv.cell_json_gobj);
 		priv.cell_json_gobj = null;
 	}
+	let win = priv.cell_json_win;
+	priv.cell_json_win = null;
+	retire_popup_window(win);
 	priv.cell_json_modal = null;
 }
 /************************************************************