@yuneta/gobj-ui 7.23.15 → 7.23.17

package/dist/gobj-ui.cjs.js

@@ -10110,18 +10110,34 @@ var GROUP_COLORS = {
 };
 /***************************************************************
 *  Soft, theme-aware card palette, same visual language as the
-*  gobj-tree's role_card_style(): tinted fill + group-colour
-*  border, lifted off the near-black canvas on dark (a faint tint
-*  on the canvas colour makes the cards invisible).
+*  gobj-tree's role_card_style(): a near-neutral fill and a
+*  group-colour border.
+*
+*  The SURFACE stays out of the hue, on both themes, and that is
+*  the whole rule here.  The light card is near-white and lets
+*  saturated dark text carry the colour; the dark card is its
+*  mirror -- a near-neutral dark surface under bright text -- and
+*  the group's hue lives in the border and the header bar, which
+*  is where the light theme had always put it.
+*
+*  It shipped tinting the dark surface 30% instead, and that put
+*  green values on a green card.  Worse, `list` (a yellow tint)
+*  landed mid-luminance, a muddy olive where nothing contrasted
+*  with anything: its purple values measured 1.60:1, against 11.48
+*  for the same values on the light card.  The 12% left is enough
+*  to tell a dict card from a list one and not enough to fight the
+*  text.
 *
 *  The header bar is always the border colour, so its text flips:
 *  white on the dark-teal light bar, near-black on the brightened
-*  dark one.
+*  dark one.  The dark bar is mixed lighter than the border used
+*  to be so that near-black reads on it (6.87:1, which is what
+*  white gets on the light bar).
 ***************************************************************/
 function json_card_style(group, dark) {
 	return {
-		bg: dark ? `color-mix(in srgb, ${group.tint} 30%, #2c3542)` : group.fill,
-		border: dark ? `color-mix(in srgb, ${group.stroke} 85%, #ffffff)` : group.stroke,
+		bg: dark ? `color-mix(in srgb, ${group.tint} 12%, #1E242E)` : group.fill,
+		border: dark ? `color-mix(in srgb, ${group.stroke} 55%, #ffffff)` : group.stroke,
 		header_fg: dark ? "#12181f" : "#ffffff",
 		key: dark ? "#c9cfd8" : "#1A1A1A"
 	};
@@ -10130,11 +10146,18 @@ function json_card_style(group, dark) {
 *  A scalar's colour by type. The palette is tuned for a light
 *  card; on a dark one every one of them (dark green #006000,
 *  blue #475ED0, …) sinks into the background, so brighten it.
+*
+*  60% white and not the 45% it shipped with.  The number is a
+*  balance measured both ways: brighter reads better on the dark
+*  card (the worst type goes from 2.88:1 to 4.74:1) and washes the
+*  six types toward one pastel, and past this point red, orange
+*  and purple stop being tellable apart, which is the only reason
+*  they are coloured at all.
 ***************************************************************/
 function type_color(type, dark) {
 	let color = TYPE_COLORS[type] || (dark ? "#e8eaed" : "black");
 	if (!dark) return color;
-	return `color-mix(in srgb, ${color} 55%, #ffffff)`;
+	return `color-mix(in srgb, ${color} 40%, #ffffff)`;
 }
 /******************************
 *      Framework Methods
@@ -10431,8 +10454,9 @@ function build_graph$3(gobj) {
 *  Build cell value HTML (matching old mx_json_viewer colors)
 ************************************************************/
 function build_cell_html(key, value, type, dark, matched) {
-	let color = type_color(type, dark);
-	let key_color = json_card_style(GROUP_COLORS.dict, dark).key;
+	let on_light = matched ? false : dark;
+	let color = type_color(type, on_light);
+	let key_color = json_card_style(GROUP_COLORS.dict, on_light).key;
 	let display_value = "";
 	switch (type) {
 		case "string":
@@ -10456,7 +10480,7 @@ function build_cell_html(key, value, type, dark, matched) {
 		default: display_value = String(value);
 	}
 	let row = `<span style="color:${key_color}">• ${(0, _yuneta_gobj_js.escapeHtml)(String(key))}: </span><span style="color:${color}">${display_value}</span>`;
-	if (matched) row = `<span style="background:${dark ? "#7a5d00" : "#ffe082"}; border-radius:2px; padding:0 2px;">${row}</span>`;
+	if (matched) row = `<span style="background:#ffe082; border-radius:2px; padding:0 2px;">${row}</span>`;
 	return row;
 }
 /************************************************************
@@ -11341,6 +11365,56 @@ function json_text_dump(root, max_chars) {
 		capped: false
 	};
 }
+/************************************************************
+*   Which view a freshly mounted viewer opens on.
+*
+*   Three answers, in order of authority: what the HOST asked
+*   for, what the READER chose last time, and `fallback`.
+*
+*   The host wins because a viewer mounted to show a graph has
+*   to show one.  The memory comes next, because reopening a
+*   document in the view you just left is the whole point of
+*   remembering it.  `fallback` is the floor.
+*
+*   Anything not in `modes` is treated as unsaid, which covers
+*   an absent value, an empty one, and a stored string from an
+*   older release that named a view no longer offered.
+************************************************************/
+function pick_view_mode(asked, remembered, modes, fallback) {
+	let known = (m) => Array.isArray(modes) && modes.indexOf(m) >= 0;
+	if (known(asked)) return asked;
+	if (known(remembered)) return remembered;
+	return fallback;
+}
+/************************************************************
+*   The short label a container row carries beside its size.
+*
+*   An array of dicts that carry an `id` is a list of RECORDS,
+*   and a row that says only `2: {15}` makes you open all
+*   fifteen fields of every one of them to find out WHICH
+*   record it is.  The id is the one field that answers that,
+*   so the row says it without being opened.
+*
+*   Only a SCALAR id, and only when it is really there: an `id`
+*   that is itself a dict or a list is not a name, it is more
+*   document, and printing `[object Object]` beside the size
+*   would be worse than printing nothing.
+*
+*   Cut at `max_chars`, because this rides on a row whose job
+*   is to stay one line.
+************************************************************/
+function container_label(value, max_chars) {
+	if (value === null || typeof value !== "object" || Array.isArray(value)) return "";
+	if (!Object.prototype.hasOwnProperty.call(value, "id")) return "";
+	let id = value.id;
+	let t = typeof id;
+	if (t !== "string" && t !== "number" && t !== "boolean") return "";
+	let text = String(id).trim();
+	if (text === "") return "";
+	let cap = typeof max_chars === "number" && max_chars > 0 ? max_chars : 0;
+	if (cap && text.length > cap) return text.slice(0, cap) + "…";
+	return text;
+}
 //#endregion
 //#region src/c_yui_json.js
 /***********************************************************************
@@ -11371,7 +11445,9 @@ function json_text_dump(root, max_chars) {
 *
 *  THREE VIEWS over the same working document, chosen by the
 *  `view_mode` attr ("tree" | "text" | "graph") and switched from the
-*  toolbar.  They answer three different questions:
+*  toolbar.  The viewer opens on what the host asked for, else on the
+*  view the reader chose last (kept in localStorage), else on the tree.
+*  They answer three different questions:
 *
 *      tree    where is this value, and what is around it — the lazy
 *              view above, the only one that can drill.
@@ -11405,6 +11481,7 @@ function json_text_dump(root, max_chars) {
 var GCLASS_NAME$10 = "C_YUI_JSON";
 var MAX_RENDER_ROWS = 5e3;
 var MAX_TEXT_CHARS = 2e6;
+var MAX_LABEL_CHARS = 40;
 var VIEWS = [
 	{
 		mode: "text",
@@ -11422,6 +11499,7 @@ var VIEWS = [
 		key: "graph view"
 	}
 ];
+var VIEW_MODE_STORAGE_KEY = "yui_json_view_mode";
 /***************************************************************
 *              Data
 ***************************************************************/
@@ -11429,7 +11507,7 @@ var attrs_table$10 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "subscriber", 0, null, "Subscriber of output events"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "title", 0, "", "Optional header title (i18n key)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "json_data", 0, null, "Initial JSON to render (usually already collapsed)"),
-	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "view_mode", 0, "tree", "View: 'tree' (lazy tree), 'text' (raw dump) or 'graph'"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "view_mode", 0, "", "View: 'tree' (lazy tree), 'text' (raw dump) or 'graph'. Empty means the host does not care: the reader's last choice wins, and the tree if there is none"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$container", 0, null, "HTMLElement root, mounted by the parent"),
 	(0, _yuneta_gobj_js.SDATA_END)()
 ];
@@ -11466,6 +11544,7 @@ function mt_create$10(gobj) {
 	let json_data = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "json_data");
 	if (json_data !== null && json_data !== void 0) priv.root = (0, _yuneta_gobj_js.json_deep_copy)(json_data);
 	build_ui$9(gobj);
+	resolve_initial_view_mode(gobj);
 	apply_view_mode(gobj);
 	let subscriber = (0, _yuneta_gobj_js.gobj_read_pointer_attr)(gobj, "subscriber");
 	if (!subscriber) subscriber = (0, _yuneta_gobj_js.gobj_parent)(gobj);
@@ -11723,6 +11802,27 @@ function view_label(mode) {
 	}
 }
 /************************************************************
+*   The view the viewer OPENS on.
+*
+*   Three answers, in order of authority: what the HOST asked for, what
+*   the READER chose last time, and the tree.  The host wins because a
+*   viewer mounted to show a graph has to show one; the memory comes
+*   next, because reopening a document in the view you just left is the
+*   whole point of remembering it; the tree is the floor.
+*
+*   This is why the attr no longer declares "tree" as its default: as a
+*   default and as a host's explicit choice it was the same string, so
+*   nothing could tell "show me the tree" from "I have no opinion", and
+*   a memory that cannot see the difference has to lose to both.
+*
+*   Resolved ONCE here and written into the attr, so every later read
+*   is a plain attr read and no render touches the store.
+************************************************************/
+function resolve_initial_view_mode(gobj) {
+	let mode = pick_view_mode((0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "view_mode"), (0, _yuneta_gobj_js.kw_get_local_storage_value)(VIEW_MODE_STORAGE_KEY, "", false), VIEWS.map((v) => v.mode), "tree");
+	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "view_mode", mode);
+}
+/************************************************************
 *   The current view, normalised.  Anything unknown is the tree.
 ************************************************************/
 function current_view_mode(gobj) {
@@ -11972,7 +12072,7 @@ function push_container_rows(ctx, key, value, segments, depth, rows, key_match)
 	let searching_match = ctx.term && !key_match && subtree_matches(value, ctx.term);
 	let open = priv.expanded.has(path) || searching_match;
 	ctx.count++;
-	rows.push(toggle_row(ctx.gobj, key, size, is_object, depth, path, open));
+	rows.push(toggle_row(ctx.gobj, key, size, is_object, depth, path, open, value));
 	if (!open) return;
 	if (is_object) for (let [k, v] of Object.entries(value)) push_entry_rows(ctx, k, v, segments.concat(k), depth + 1, rows);
 	else value.forEach(function(v, i) {
@@ -12057,7 +12157,7 @@ function push_collapsed_row(ctx, value, segments, depth, key, rows) {
 /************************************************************
 *   Expandable container header row
 ************************************************************/
-function toggle_row(gobj, key, size, is_object, depth, path, open) {
+function toggle_row(gobj, key, size, is_object, depth, path, open, value) {
 	let summary = (is_object ? "{" : "[") + String(size) + (is_object ? "}" : "]");
 	let body = [];
 	if (key !== null && key !== "") {
@@ -12077,6 +12177,12 @@ function toggle_row(gobj, key, size, is_object, depth, path, open) {
 		{ class: "JSON_SUMMARY has-text-grey" },
 		summary
 	]);
+	let label = container_label(value, MAX_LABEL_CHARS);
+	if (label) body.push([
+		"span",
+		{ class: "JSON_SUMMARY_ID ml-2" },
+		label
+	]);
 	return [
 		"div",
 		{
@@ -12330,6 +12436,8 @@ function ac_copy_all(gobj, event, kw, src) {
 *   With no mode it ADVANCES to the next view in VIEWS order, which
 *   is what the two-view toggle did when the list was two long.  The
 *   toolbar buttons always name their mode.
+*
+*   Whatever lands here is REMEMBERED, so the next viewer opens on it.
 ************************************************************/
 function ac_set_view_mode(gobj, event, kw, src) {
 	let mode = kw.mode;
@@ -12340,6 +12448,7 @@ function ac_set_view_mode(gobj, event, kw, src) {
 	}
 	if (mode === current_view_mode(gobj)) return 0;
 	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "view_mode", mode);
+	(0, _yuneta_gobj_js.kw_set_local_storage_value)(VIEW_MODE_STORAGE_KEY, mode);
 	apply_view_mode(gobj);
 	render_view(gobj);
 	return 0;

package/dist/gobj-ui.es.js

@@ -10105,18 +10105,34 @@ var GROUP_COLORS = {
 };
 /***************************************************************
 *  Soft, theme-aware card palette, same visual language as the
-*  gobj-tree's role_card_style(): tinted fill + group-colour
-*  border, lifted off the near-black canvas on dark (a faint tint
-*  on the canvas colour makes the cards invisible).
+*  gobj-tree's role_card_style(): a near-neutral fill and a
+*  group-colour border.
+*
+*  The SURFACE stays out of the hue, on both themes, and that is
+*  the whole rule here.  The light card is near-white and lets
+*  saturated dark text carry the colour; the dark card is its
+*  mirror -- a near-neutral dark surface under bright text -- and
+*  the group's hue lives in the border and the header bar, which
+*  is where the light theme had always put it.
+*
+*  It shipped tinting the dark surface 30% instead, and that put
+*  green values on a green card.  Worse, `list` (a yellow tint)
+*  landed mid-luminance, a muddy olive where nothing contrasted
+*  with anything: its purple values measured 1.60:1, against 11.48
+*  for the same values on the light card.  The 12% left is enough
+*  to tell a dict card from a list one and not enough to fight the
+*  text.
 *
 *  The header bar is always the border colour, so its text flips:
 *  white on the dark-teal light bar, near-black on the brightened
-*  dark one.
+*  dark one.  The dark bar is mixed lighter than the border used
+*  to be so that near-black reads on it (6.87:1, which is what
+*  white gets on the light bar).
 ***************************************************************/
 function json_card_style(group, dark) {
 	return {
-		bg: dark ? `color-mix(in srgb, ${group.tint} 30%, #2c3542)` : group.fill,
-		border: dark ? `color-mix(in srgb, ${group.stroke} 85%, #ffffff)` : group.stroke,
+		bg: dark ? `color-mix(in srgb, ${group.tint} 12%, #1E242E)` : group.fill,
+		border: dark ? `color-mix(in srgb, ${group.stroke} 55%, #ffffff)` : group.stroke,
 		header_fg: dark ? "#12181f" : "#ffffff",
 		key: dark ? "#c9cfd8" : "#1A1A1A"
 	};
@@ -10125,11 +10141,18 @@ function json_card_style(group, dark) {
 *  A scalar's colour by type. The palette is tuned for a light
 *  card; on a dark one every one of them (dark green #006000,
 *  blue #475ED0, …) sinks into the background, so brighten it.
+*
+*  60% white and not the 45% it shipped with.  The number is a
+*  balance measured both ways: brighter reads better on the dark
+*  card (the worst type goes from 2.88:1 to 4.74:1) and washes the
+*  six types toward one pastel, and past this point red, orange
+*  and purple stop being tellable apart, which is the only reason
+*  they are coloured at all.
 ***************************************************************/
 function type_color(type, dark) {
 	let color = TYPE_COLORS[type] || (dark ? "#e8eaed" : "black");
 	if (!dark) return color;
-	return `color-mix(in srgb, ${color} 55%, #ffffff)`;
+	return `color-mix(in srgb, ${color} 40%, #ffffff)`;
 }
 /******************************
 *      Framework Methods
@@ -10426,8 +10449,9 @@ function build_graph$3(gobj) {
 *  Build cell value HTML (matching old mx_json_viewer colors)
 ************************************************************/
 function build_cell_html(key, value, type, dark, matched) {
-	let color = type_color(type, dark);
-	let key_color = json_card_style(GROUP_COLORS.dict, dark).key;
+	let on_light = matched ? false : dark;
+	let color = type_color(type, on_light);
+	let key_color = json_card_style(GROUP_COLORS.dict, on_light).key;
 	let display_value = "";
 	switch (type) {
 		case "string":
@@ -10451,7 +10475,7 @@ function build_cell_html(key, value, type, dark, matched) {
 		default: display_value = String(value);
 	}
 	let row = `<span style="color:${key_color}">• ${escapeHtml(String(key))}: </span><span style="color:${color}">${display_value}</span>`;
-	if (matched) row = `<span style="background:${dark ? "#7a5d00" : "#ffe082"}; border-radius:2px; padding:0 2px;">${row}</span>`;
+	if (matched) row = `<span style="background:#ffe082; border-radius:2px; padding:0 2px;">${row}</span>`;
 	return row;
 }
 /************************************************************
@@ -11336,6 +11360,56 @@ function json_text_dump(root, max_chars) {
 		capped: false
 	};
 }
+/************************************************************
+*   Which view a freshly mounted viewer opens on.
+*
+*   Three answers, in order of authority: what the HOST asked
+*   for, what the READER chose last time, and `fallback`.
+*
+*   The host wins because a viewer mounted to show a graph has
+*   to show one.  The memory comes next, because reopening a
+*   document in the view you just left is the whole point of
+*   remembering it.  `fallback` is the floor.
+*
+*   Anything not in `modes` is treated as unsaid, which covers
+*   an absent value, an empty one, and a stored string from an
+*   older release that named a view no longer offered.
+************************************************************/
+function pick_view_mode(asked, remembered, modes, fallback) {
+	let known = (m) => Array.isArray(modes) && modes.indexOf(m) >= 0;
+	if (known(asked)) return asked;
+	if (known(remembered)) return remembered;
+	return fallback;
+}
+/************************************************************
+*   The short label a container row carries beside its size.
+*
+*   An array of dicts that carry an `id` is a list of RECORDS,
+*   and a row that says only `2: {15}` makes you open all
+*   fifteen fields of every one of them to find out WHICH
+*   record it is.  The id is the one field that answers that,
+*   so the row says it without being opened.
+*
+*   Only a SCALAR id, and only when it is really there: an `id`
+*   that is itself a dict or a list is not a name, it is more
+*   document, and printing `[object Object]` beside the size
+*   would be worse than printing nothing.
+*
+*   Cut at `max_chars`, because this rides on a row whose job
+*   is to stay one line.
+************************************************************/
+function container_label(value, max_chars) {
+	if (value === null || typeof value !== "object" || Array.isArray(value)) return "";
+	if (!Object.prototype.hasOwnProperty.call(value, "id")) return "";
+	let id = value.id;
+	let t = typeof id;
+	if (t !== "string" && t !== "number" && t !== "boolean") return "";
+	let text = String(id).trim();
+	if (text === "") return "";
+	let cap = typeof max_chars === "number" && max_chars > 0 ? max_chars : 0;
+	if (cap && text.length > cap) return text.slice(0, cap) + "…";
+	return text;
+}
 //#endregion
 //#region src/c_yui_json.js
 /***********************************************************************
@@ -11366,7 +11440,9 @@ function json_text_dump(root, max_chars) {
 *
 *  THREE VIEWS over the same working document, chosen by the
 *  `view_mode` attr ("tree" | "text" | "graph") and switched from the
-*  toolbar.  They answer three different questions:
+*  toolbar.  The viewer opens on what the host asked for, else on the
+*  view the reader chose last (kept in localStorage), else on the tree.
+*  They answer three different questions:
 *
 *      tree    where is this value, and what is around it — the lazy
 *              view above, the only one that can drill.
@@ -11400,6 +11476,7 @@ function json_text_dump(root, max_chars) {
 var GCLASS_NAME$10 = "C_YUI_JSON";
 var MAX_RENDER_ROWS = 5e3;
 var MAX_TEXT_CHARS = 2e6;
+var MAX_LABEL_CHARS = 40;
 var VIEWS = [
 	{
 		mode: "text",
@@ -11417,6 +11494,7 @@ var VIEWS = [
 		key: "graph view"
 	}
 ];
+var VIEW_MODE_STORAGE_KEY = "yui_json_view_mode";
 /***************************************************************
 *              Data
 ***************************************************************/
@@ -11424,7 +11502,7 @@ var attrs_table$10 = [
 	SDATA(data_type_t.DTP_POINTER, "subscriber", 0, null, "Subscriber of output events"),
 	SDATA(data_type_t.DTP_STRING, "title", 0, "", "Optional header title (i18n key)"),
 	SDATA(data_type_t.DTP_JSON, "json_data", 0, null, "Initial JSON to render (usually already collapsed)"),
-	SDATA(data_type_t.DTP_STRING, "view_mode", 0, "tree", "View: 'tree' (lazy tree), 'text' (raw dump) or 'graph'"),
+	SDATA(data_type_t.DTP_STRING, "view_mode", 0, "", "View: 'tree' (lazy tree), 'text' (raw dump) or 'graph'. Empty means the host does not care: the reader's last choice wins, and the tree if there is none"),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "HTMLElement root, mounted by the parent"),
 	SDATA_END()
 ];
@@ -11461,6 +11539,7 @@ function mt_create$10(gobj) {
 	let json_data = gobj_read_attr(gobj, "json_data");
 	if (json_data !== null && json_data !== void 0) priv.root = json_deep_copy(json_data);
 	build_ui$9(gobj);
+	resolve_initial_view_mode(gobj);
 	apply_view_mode(gobj);
 	let subscriber = gobj_read_pointer_attr(gobj, "subscriber");
 	if (!subscriber) subscriber = gobj_parent(gobj);
@@ -11718,6 +11797,27 @@ function view_label(mode) {
 	}
 }
 /************************************************************
+*   The view the viewer OPENS on.
+*
+*   Three answers, in order of authority: what the HOST asked for, what
+*   the READER chose last time, and the tree.  The host wins because a
+*   viewer mounted to show a graph has to show one; the memory comes
+*   next, because reopening a document in the view you just left is the
+*   whole point of remembering it; the tree is the floor.
+*
+*   This is why the attr no longer declares "tree" as its default: as a
+*   default and as a host's explicit choice it was the same string, so
+*   nothing could tell "show me the tree" from "I have no opinion", and
+*   a memory that cannot see the difference has to lose to both.
+*
+*   Resolved ONCE here and written into the attr, so every later read
+*   is a plain attr read and no render touches the store.
+************************************************************/
+function resolve_initial_view_mode(gobj) {
+	let mode = pick_view_mode(gobj_read_str_attr(gobj, "view_mode"), kw_get_local_storage_value(VIEW_MODE_STORAGE_KEY, "", false), VIEWS.map((v) => v.mode), "tree");
+	gobj_write_attr(gobj, "view_mode", mode);
+}
+/************************************************************
 *   The current view, normalised.  Anything unknown is the tree.
 ************************************************************/
 function current_view_mode(gobj) {
@@ -11967,7 +12067,7 @@ function push_container_rows(ctx, key, value, segments, depth, rows, key_match)
 	let searching_match = ctx.term && !key_match && subtree_matches(value, ctx.term);
 	let open = priv.expanded.has(path) || searching_match;
 	ctx.count++;
-	rows.push(toggle_row(ctx.gobj, key, size, is_object, depth, path, open));
+	rows.push(toggle_row(ctx.gobj, key, size, is_object, depth, path, open, value));
 	if (!open) return;
 	if (is_object) for (let [k, v] of Object.entries(value)) push_entry_rows(ctx, k, v, segments.concat(k), depth + 1, rows);
 	else value.forEach(function(v, i) {
@@ -12052,7 +12152,7 @@ function push_collapsed_row(ctx, value, segments, depth, key, rows) {
 /************************************************************
 *   Expandable container header row
 ************************************************************/
-function toggle_row(gobj, key, size, is_object, depth, path, open) {
+function toggle_row(gobj, key, size, is_object, depth, path, open, value) {
 	let summary = (is_object ? "{" : "[") + String(size) + (is_object ? "}" : "]");
 	let body = [];
 	if (key !== null && key !== "") {
@@ -12072,6 +12172,12 @@ function toggle_row(gobj, key, size, is_object, depth, path, open) {
 		{ class: "JSON_SUMMARY has-text-grey" },
 		summary
 	]);
+	let label = container_label(value, MAX_LABEL_CHARS);
+	if (label) body.push([
+		"span",
+		{ class: "JSON_SUMMARY_ID ml-2" },
+		label
+	]);
 	return [
 		"div",
 		{
@@ -12325,6 +12431,8 @@ function ac_copy_all(gobj, event, kw, src) {
 *   With no mode it ADVANCES to the next view in VIEWS order, which
 *   is what the two-view toggle did when the list was two long.  The
 *   toolbar buttons always name their mode.
+*
+*   Whatever lands here is REMEMBERED, so the next viewer opens on it.
 ************************************************************/
 function ac_set_view_mode(gobj, event, kw, src) {
 	let mode = kw.mode;
@@ -12335,6 +12443,7 @@ function ac_set_view_mode(gobj, event, kw, src) {
 	}
 	if (mode === current_view_mode(gobj)) return 0;
 	gobj_write_attr(gobj, "view_mode", mode);
+	kw_set_local_storage_value(VIEW_MODE_STORAGE_KEY, mode);
 	apply_view_mode(gobj);
 	render_view(gobj);
 	return 0;

package/package.json

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

package/src/c_yui_json.css

@@ -172,6 +172,19 @@
 .C_YUI_JSON .JSON_TYPE_BOOLEAN { color: var(--json-boolean); }
 .C_YUI_JSON .JSON_TYPE_NULL    { color: var(--json-null); font-style: italic; }
 
+/*
+ *  The id a container row carries beside its size.  It is a VALUE, so
+ *  it takes the string colour and follows the theme with it; what sets
+ *  it apart from the values under it is the WEIGHT, not a colour of its
+ *  own -- a sixth colour in a row that already carries five would be
+ *  one more thing to decode, for a field whose whole job is to be read
+ *  at a glance while scrolling.
+ */
+.C_YUI_JSON .JSON_SUMMARY_ID {
+    color: var(--json-string);
+    font-weight: 600;
+}
+
 .C_YUI_JSON .JSON_STUB {
     color: var(--bulma-link, #3273dc);
     font-weight: 600;

package/src/c_yui_json.js

@@ -26,7 +26,9 @@
  *
  *  THREE VIEWS over the same working document, chosen by the
  *  `view_mode` attr ("tree" | "text" | "graph") and switched from the
- *  toolbar.  They answer three different questions:
+ *  toolbar.  The viewer opens on what the host asked for, else on the
+ *  view the reader chose last (kept in localStorage), else on the tree.
+ *  They answer three different questions:
  *
  *      tree    where is this value, and what is around it — the lazy
  *              view above, the only one that can drill.
@@ -82,6 +84,8 @@ import {
     json_deep_copy,
     json_object_size,
     refresh_language,
+    kw_get_local_storage_value,
+    kw_set_local_storage_value,
 } from "@yuneta/gobj-js";
 
 import {
@@ -94,6 +98,8 @@ import {
     is_time_field,
     format_epoch,
     json_text_dump,
+    pick_view_mode,
+    container_label,
 } from "./json_view_helpers.js";
 
 import {yui_toolbar} from "./yui_toolbar.js";
@@ -125,11 +131,19 @@ const MAX_RENDER_ROWS = 5000;
  */
 const MAX_TEXT_CHARS = 2000000;
 
+/*
+ *  How much of a container's id label fits beside its size.  It
+ *  rides on a row whose job is to stay one line, and an id is
+ *  usually short; the ones that are not are uuids, where the head
+ *  is what a person compares anyway.
+ */
+const MAX_LABEL_CHARS = 40;
+
 /*
  *  The three views, in switch order — this table IS the order of the
  *  buttons, and EV_SET_VIEW_MODE with no mode advances along it.
- *  Note the order is not the default: the viewer still OPENS on the
- *  tree (the `view_mode` attr default), it just sits second in the row.
+ *  Note the order is not the default: the viewer OPENS on the tree
+ *  unless something says otherwise, it just sits second in the row.
  */
 const VIEWS = [
     {mode: "text",  icon: "yi-code",          key: "text view"},
@@ -137,6 +151,16 @@ const VIEWS = [
     {mode: "graph", icon: "yi-hexagon-nodes", key: "graph view"},
 ];
 
+/*
+ *  Where the reader's last choice of view is kept.  ONE key for the
+ *  whole library and not one per host: which of the three views someone
+ *  reads JSON in is a habit of the PERSON, not a property of the
+ *  document, so the next document they open opens the way they read the
+ *  last one.  It lives in localStorage, which is per browser and per
+ *  artifact origin, and reaches nobody else.
+ */
+const VIEW_MODE_STORAGE_KEY = "yui_json_view_mode";
+
 /***************************************************************
  *              Data
  ***************************************************************/
@@ -147,7 +171,7 @@ SDATA(data_type_t.DTP_POINTER,  "subscriber",   0,  null,   "Subscriber of outpu
 /*---------------- Config ----------------*/
 SDATA(data_type_t.DTP_STRING,   "title",        0,  "",     "Optional header title (i18n key)"),
 SDATA(data_type_t.DTP_JSON,     "json_data",    0,  null,   "Initial JSON to render (usually already collapsed)"),
-SDATA(data_type_t.DTP_STRING,   "view_mode",    0,  "tree", "View: 'tree' (lazy tree), 'text' (raw dump) or 'graph'"),
+SDATA(data_type_t.DTP_STRING,   "view_mode",    0,  "",     "View: 'tree' (lazy tree), 'text' (raw dump) or 'graph'. Empty means the host does not care: the reader's last choice wins, and the tree if there is none"),
 
 /*---------------- UI ----------------*/
 SDATA(data_type_t.DTP_POINTER,  "$container",   0,  null,   "HTMLElement root, mounted by the parent"),
@@ -202,6 +226,7 @@ function mt_create(gobj)
     }
 
     build_ui(gobj);
+    resolve_initial_view_mode(gobj);
     apply_view_mode(gobj);
 
     /*
@@ -462,6 +487,34 @@ function view_label(mode)
     }
 }
 
+/************************************************************
+ *   The view the viewer OPENS on.
+ *
+ *   Three answers, in order of authority: what the HOST asked for, what
+ *   the READER chose last time, and the tree.  The host wins because a
+ *   viewer mounted to show a graph has to show one; the memory comes
+ *   next, because reopening a document in the view you just left is the
+ *   whole point of remembering it; the tree is the floor.
+ *
+ *   This is why the attr no longer declares "tree" as its default: as a
+ *   default and as a host's explicit choice it was the same string, so
+ *   nothing could tell "show me the tree" from "I have no opinion", and
+ *   a memory that cannot see the difference has to lose to both.
+ *
+ *   Resolved ONCE here and written into the attr, so every later read
+ *   is a plain attr read and no render touches the store.
+ ************************************************************/
+function resolve_initial_view_mode(gobj)
+{
+    let mode = pick_view_mode(
+        gobj_read_str_attr(gobj, "view_mode"),
+        kw_get_local_storage_value(VIEW_MODE_STORAGE_KEY, "", false),
+        VIEWS.map((v) => v.mode),
+        "tree"
+    );
+    gobj_write_attr(gobj, "view_mode", mode);
+}
+
 /************************************************************
  *   The current view, normalised.  Anything unknown is the tree.
  ************************************************************/
@@ -779,7 +832,7 @@ function push_container_rows(ctx, key, value, segments, depth, rows, key_match)
     let open = priv.expanded.has(path) || searching_match;
 
     ctx.count++;
-    rows.push(toggle_row(ctx.gobj, key, size, is_object, depth, path, open));
+    rows.push(toggle_row(ctx.gobj, key, size, is_object, depth, path, open, value));
 
     if(!open) {
         return;
@@ -853,7 +906,7 @@ function push_collapsed_row(ctx, value, segments, depth, key, rows)
 /************************************************************
  *   Expandable container header row
  ************************************************************/
-function toggle_row(gobj, key, size, is_object, depth, path, open)
+function toggle_row(gobj, key, size, is_object, depth, path, open, value)
 {
     let summary = (is_object ? "{" : "[") + String(size) + (is_object ? "}" : "]");
 
@@ -864,6 +917,21 @@ function toggle_row(gobj, key, size, is_object, depth, path, open)
     }
     body.push(['span', {class: 'JSON_SUMMARY has-text-grey'}, summary]);
 
+    /*
+     *  A dict that carries an id says WHICH one it is, right here.
+     *  Inside an array of records -- which is what a topic's nodes
+     *  are -- the row read `2: {15}` and the only way to tell record
+     *  2 from record 9 was to open both.
+     *
+     *  Shown open as well as closed: it is the row's label, and a
+     *  label that disappears when you expand makes the row jump and
+     *  costs you the name of the thing you just opened.
+     */
+    let label = container_label(value, MAX_LABEL_CHARS);
+    if(label) {
+        body.push(['span', {class: 'JSON_SUMMARY_ID ml-2'}, label]);
+    }
+
     return ['div', {class: 'JSON_ROW JSON_CONTAINER', style: row_indent(depth)}, [
         ['span', {class: 'JSON_TOGGLE' + (open ? ' is-open' : '')}, [
             ['i', {class: 'yi-chevron-right'}]
@@ -1168,6 +1236,8 @@ function ac_copy_all(gobj, event, kw, src)
  *   With no mode it ADVANCES to the next view in VIEWS order, which
  *   is what the two-view toggle did when the list was two long.  The
  *   toolbar buttons always name their mode.
+ *
+ *   Whatever lands here is REMEMBERED, so the next viewer opens on it.
  ************************************************************/
 function ac_set_view_mode(gobj, event, kw, src)
 {
@@ -1187,6 +1257,14 @@ function ac_set_view_mode(gobj, event, kw, src)
 
     gobj_write_attr(gobj, "view_mode", mode);
 
+    /*
+     *  Remembered here and not in resolve_initial_view_mode(): only a
+     *  view the READER picked is a preference.  A mode a host pinned, or
+     *  the tree we fell back to, would otherwise be written back as if
+     *  somebody had chosen it.
+     */
+    kw_set_local_storage_value(VIEW_MODE_STORAGE_KEY, mode);
+
     apply_view_mode(gobj);
     render_view(gobj);
     return 0;

package/src/c_yui_json_graph.js

@@ -221,22 +221,38 @@ const GROUP_COLORS = {
 
 /***************************************************************
  *  Soft, theme-aware card palette, same visual language as the
- *  gobj-tree's role_card_style(): tinted fill + group-colour
- *  border, lifted off the near-black canvas on dark (a faint tint
- *  on the canvas colour makes the cards invisible).
+ *  gobj-tree's role_card_style(): a near-neutral fill and a
+ *  group-colour border.
+ *
+ *  The SURFACE stays out of the hue, on both themes, and that is
+ *  the whole rule here.  The light card is near-white and lets
+ *  saturated dark text carry the colour; the dark card is its
+ *  mirror -- a near-neutral dark surface under bright text -- and
+ *  the group's hue lives in the border and the header bar, which
+ *  is where the light theme had always put it.
+ *
+ *  It shipped tinting the dark surface 30% instead, and that put
+ *  green values on a green card.  Worse, `list` (a yellow tint)
+ *  landed mid-luminance, a muddy olive where nothing contrasted
+ *  with anything: its purple values measured 1.60:1, against 11.48
+ *  for the same values on the light card.  The 12% left is enough
+ *  to tell a dict card from a list one and not enough to fight the
+ *  text.
  *
  *  The header bar is always the border colour, so its text flips:
  *  white on the dark-teal light bar, near-black on the brightened
- *  dark one.
+ *  dark one.  The dark bar is mixed lighter than the border used
+ *  to be so that near-black reads on it (6.87:1, which is what
+ *  white gets on the light bar).
  ***************************************************************/
 function json_card_style(group, dark)
 {
     return {
         bg: dark
-            ? `color-mix(in srgb, ${group.tint} 30%, #2c3542)`
+            ? `color-mix(in srgb, ${group.tint} 12%, #1E242E)`
             : group.fill,
         border: dark
-            ? `color-mix(in srgb, ${group.stroke} 85%, #ffffff)`
+            ? `color-mix(in srgb, ${group.stroke} 55%, #ffffff)`
             : group.stroke,
         header_fg: dark ? "#12181f" : "#ffffff",
         key: dark ? "#c9cfd8" : "#1A1A1A",
@@ -247,6 +263,13 @@ function json_card_style(group, dark)
  *  A scalar's colour by type. The palette is tuned for a light
  *  card; on a dark one every one of them (dark green #006000,
  *  blue #475ED0, …) sinks into the background, so brighten it.
+ *
+ *  60% white and not the 45% it shipped with.  The number is a
+ *  balance measured both ways: brighter reads better on the dark
+ *  card (the worst type goes from 2.88:1 to 4.74:1) and washes the
+ *  six types toward one pastel, and past this point red, orange
+ *  and purple stop being tellable apart, which is the only reason
+ *  they are coloured at all.
  ***************************************************************/
 function type_color(type, dark)
 {
@@ -254,7 +277,7 @@ function type_color(type, dark)
     if(!dark) {
         return color;
     }
-    return `color-mix(in srgb, ${color} 55%, #ffffff)`;
+    return `color-mix(in srgb, ${color} 40%, #ffffff)`;
 }
 
 
@@ -698,8 +721,18 @@ function build_graph(gobj)
  ************************************************************/
 function build_cell_html(key, value, type, dark, matched)
 {
-    let color = type_color(type, dark);
-    let key_color = json_card_style(GROUP_COLORS.dict, dark).key;
+    /*
+     *  A match is a LIGHT chip on BOTH themes, so what sits on it is
+     *  light-surface text -- the same flip the header bar does.
+     *
+     *  A dark chip has no room to exist: dark enough for the brightened
+     *  values to read on it is also dark enough to be invisible against
+     *  the card, and the amber it used to be (#7a5d00) ended up failing
+     *  at both ends, 2.52:1 under the text and 2.34:1 over the card.
+     */
+    let on_light = matched? false: dark;
+    let color = type_color(type, on_light);
+    let key_color = json_card_style(GROUP_COLORS.dict, on_light).key;
     let display_value = "";
 
     switch(type) {
@@ -734,7 +767,7 @@ function build_cell_html(key, value, type, dark, matched)
          *  a G6 node state: the key shape of an `html` node is a DOM
          *  element, and G6 paints no state style on it.  Setting
          *  'active' here would select correctly and show nothing. */
-        row = `<span style="background:${dark? "#7a5d00": "#ffe082"}; ` +
+        row = `<span style="background:#ffe082; ` +
               `border-radius:2px; padding:0 2px;">${row}</span>`;
     }
     return row;

package/src/json_view_helpers.js

@@ -242,3 +242,75 @@ export function json_text_dump(root, max_chars)
     }
     return {text: text, capped: false};
 }
+
+/************************************************************
+ *   Which view a freshly mounted viewer opens on.
+ *
+ *   Three answers, in order of authority: what the HOST asked
+ *   for, what the READER chose last time, and `fallback`.
+ *
+ *   The host wins because a viewer mounted to show a graph has
+ *   to show one.  The memory comes next, because reopening a
+ *   document in the view you just left is the whole point of
+ *   remembering it.  `fallback` is the floor.
+ *
+ *   Anything not in `modes` is treated as unsaid, which covers
+ *   an absent value, an empty one, and a stored string from an
+ *   older release that named a view no longer offered.
+ ************************************************************/
+export function pick_view_mode(asked, remembered, modes, fallback)
+{
+    let known = (m) => Array.isArray(modes) && modes.indexOf(m) >= 0;
+
+    if(known(asked)) {
+        return asked;
+    }
+    if(known(remembered)) {
+        return remembered;
+    }
+    return fallback;
+}
+
+/************************************************************
+ *   The short label a container row carries beside its size.
+ *
+ *   An array of dicts that carry an `id` is a list of RECORDS,
+ *   and a row that says only `2: {15}` makes you open all
+ *   fifteen fields of every one of them to find out WHICH
+ *   record it is.  The id is the one field that answers that,
+ *   so the row says it without being opened.
+ *
+ *   Only a SCALAR id, and only when it is really there: an `id`
+ *   that is itself a dict or a list is not a name, it is more
+ *   document, and printing `[object Object]` beside the size
+ *   would be worse than printing nothing.
+ *
+ *   Cut at `max_chars`, because this rides on a row whose job
+ *   is to stay one line.
+ ************************************************************/
+export function container_label(value, max_chars)
+{
+    if(value === null || typeof value !== "object" || Array.isArray(value)) {
+        return "";
+    }
+    if(!Object.prototype.hasOwnProperty.call(value, "id")) {
+        return "";
+    }
+
+    let id = value.id;
+    let t = typeof id;
+    if(t !== "string" && t !== "number" && t !== "boolean") {
+        return "";
+    }
+
+    let text = String(id).trim();
+    if(text === "") {
+        return "";
+    }
+
+    let cap = (typeof max_chars === "number" && max_chars > 0)? max_chars: 0;
+    if(cap && text.length > cap) {
+        return text.slice(0, cap) + "…";
+    }
+    return text;
+}

package/src/json_view_helpers.test.js

@@ -16,6 +16,8 @@ import {
     is_time_field,
     format_epoch,
     json_text_dump,
+    pick_view_mode,
+    container_label,
 } from "./json_view_helpers.js";
 
 
@@ -175,3 +177,69 @@ test("json_text_dump reports a document with no JSON form instead of printing no
     expect(d2.text).toBe("");
     expect(typeof d2.error).toBe("string");
 });
+
+/***************************************************************
+ *      pick_view_mode()
+ ***************************************************************/
+const MODES = ["text", "tree", "graph"];
+
+test("pick_view_mode: the tree when nothing is said", () => {
+    expect(pick_view_mode("", "", MODES, "tree")).toBe("tree");
+    expect(pick_view_mode(undefined, undefined, MODES, "tree")).toBe("tree");
+    expect(pick_view_mode(null, null, MODES, "tree")).toBe("tree");
+});
+
+test("pick_view_mode: what the reader chose last wins over the fallback", () => {
+    expect(pick_view_mode("", "graph", MODES, "tree")).toBe("graph");
+    expect(pick_view_mode("", "text", MODES, "tree")).toBe("text");
+});
+
+test("pick_view_mode: the host outranks the memory", () => {
+    expect(pick_view_mode("text", "graph", MODES, "tree")).toBe("text");
+    /*  And "tree" asked for explicitly is a choice, not a default:
+     *  it has to beat a remembered graph. */
+    expect(pick_view_mode("tree", "graph", MODES, "tree")).toBe("tree");
+});
+
+test("pick_view_mode: a mode no longer offered is treated as unsaid", () => {
+    /*  A string left in the store by an older release. */
+    expect(pick_view_mode("", "webix", MODES, "tree")).toBe("tree");
+    expect(pick_view_mode("webix", "graph", MODES, "tree")).toBe("graph");
+});
+
+test("pick_view_mode: no mode table at all still answers the fallback", () => {
+    expect(pick_view_mode("graph", "text", undefined, "tree")).toBe("tree");
+    expect(pick_view_mode("graph", "text", [], "tree")).toBe("tree");
+});
+
+/***************************************************************
+ *      container_label()
+ ***************************************************************/
+test("container_label: a dict with a scalar id is labelled by it", () => {
+    expect(container_label({id: "LAB-001-001-E-001", name: "x"}, 40))
+        .toBe("LAB-001-001-E-001");
+    expect(container_label({id: 42}, 40)).toBe("42");
+    expect(container_label({id: false}, 40)).toBe("false");
+});
+
+test("container_label: nothing to say without a scalar id", () => {
+    expect(container_label({name: "x"}, 40)).toBe("");
+    expect(container_label({}, 40)).toBe("");
+    expect(container_label({id: {a: 1}}, 40)).toBe("");
+    expect(container_label({id: [1, 2]}, 40)).toBe("");
+    expect(container_label({id: null}, 40)).toBe("");
+    expect(container_label({id: "   "}, 40)).toBe("");
+});
+
+test("container_label: an array is not a record", () => {
+    expect(container_label([{id: "a"}], 40)).toBe("");
+    expect(container_label(null, 40)).toBe("");
+    expect(container_label("id", 40)).toBe("");
+});
+
+test("container_label: cut at max_chars, and said with an ellipsis", () => {
+    let uuid = "ff14fc16-2cb2-472c-9c0a-89fa43837130";
+    expect(container_label({id: uuid}, 8)).toBe("ff14fc16…");
+    expect(container_label({id: uuid}, 0)).toBe(uuid);
+    expect(container_label({id: uuid}, undefined)).toBe(uuid);
+});

package/src/yui_toolbar.css

@@ -6,6 +6,15 @@
     width: 100%;
     height: auto;
     position: relative;
+    /*  The toolbar is often a flex item sharing its row with a pinned
+     *  control (a back link, a title). A flex item's `min-width:auto`
+     *  resolves to the CONTENT minimum, and the sections inside are
+     *  `flex-shrink:0; white-space:nowrap` — so the toolbar refuses to
+     *  shrink, the row overflows, and the scroll container never sees an
+     *  overflow of its OWN: both arrows stay hidden while the items are
+     *  clipped by an ancestor. Alone on its row nothing shrinks and the
+     *  bug hides, which is why it only shows up once integrated. */
+    min-width: 0;
 }
 
 .yui-horizontal-toolbar-container {