@yuneta/gobj-ui 7.23.86 → 7.23.87

package/README.md

@@ -850,12 +850,16 @@ both keys, either — a G6 `trigger` is a CHORD, not a list of alternatives:
 `Shortcut.match()` compares the keys held to the keys bound as a SET, so
 `['Control', 'Meta']` would mean both at once.
 
-**One glyph size for the whole row** (`7.23.86`): `YUI_GRAPH_ICON_SIZE` in
-`yui_graph_camera.js`, with a `yui_graph_icon()` that builds the `<i>`. It is
-in **`rem` and not `em`** for a reason worth keeping: in `em` the same
-`1.5em` drew 24px inside a plain button, 18px inside an `is-small` chip of
-the legend, and a labelled button left its icon at the inherited 16px — three
-sizes in two strips that are read as one thing. The legend under the toolbar
+**One glyph size for every toolbar of the library** (`7.23.86`, moved to its
+proper home in `7.23.87`): `YUI_TOOLBAR_ICON_SIZE` in `yui_toolbar.js`, with a
+`yui_toolbar_icon()` that builds the `<i>`. It is in **`rem` and not `em`**
+for a reason worth keeping: in `em` the same `1.5em` drew 24px inside a plain
+button, 18px inside an `is-small` chip of the legend, and a labelled button
+left its icon at the inherited 16px — three sizes in two strips that are read
+as one thing. It is the toolbar's size and not the graph's: the JSON viewer,
+the treedb topics row and the treedb table row take it too. The app BAR keeps
+its own, bigger glyph (`.yui-toolbar-item .icon`, 1.35rem on 44px items) —
+that is a different band, not drift. The legend under the toolbar
 follows it: topic name at `1rem`, count at `.875rem` (the one deliberate step
 down), glyphs at the shared size, and `align-items: stretch` so a chip's star
 and crosshair are as tall as its body.

package/dist/gobj-ui.cjs.js

@@ -10298,6 +10298,35 @@ function register_c_yui_uplot() {
 }
 //#endregion
 //#region src/yui_toolbar.js
+/************************************************************
+*  ONE size for every glyph of a view's toolbar, in `rem`.
+*
+*  It lives here because it belongs to the TOOLBAR and not to
+*  any one view: it was born in the graph rows (7.23.86) and the
+*  JSON viewer beside them still drew 16px, which is the same
+*  drift one level up.
+*
+*  `rem` and not `em` is the whole lesson: `em` is measured
+*  against the button, so one declaration draws three icons --
+*  `1.5em` is 24px in a plain button, 18px in an `is-small`
+*  chip, and a labelled button that declares nothing keeps the
+*  inherited 16px. `rem` is measured against the page, so a
+*  chip deliberately shorter than a button still carries the
+*  same glyph.
+*
+*  20px against a row's 16px text: an icon-only button is
+*  legible at half its 40px height, and beside a label the
+*  glyph reads as a marker rather than as a second word. The
+*  app BAR is a different band and keeps its own, bigger size
+*  (`.yui-toolbar-item .icon`, 1.35rem on 44px items).
+************************************************************/
+var YUI_TOOLBAR_ICON_SIZE = "1.25rem";
+function yui_toolbar_icon(icon_class, extra_style) {
+	return ["i", {
+		class: icon_class,
+		style: `font-size:${YUI_TOOLBAR_ICON_SIZE}; line-height:1; color:inherit;` + (extra_style || "")
+	}];
+}
 function yui_toolbar(attrs = {}, items = []) {
 	function arrow_button(side, icon, label) {
 		return [
@@ -10560,30 +10589,6 @@ function getPointPosition(count, index, margin = .2) {
 *          All Rights Reserved.
 ***********************************************************************/
 /************************************************************
-*   ONE size for every glyph of a graph's toolbar ROW, in
-*   `rem` and not `em`.
-*
-*   In `em` the same declaration draws three different icons:
-*   `1.5em` is 24px inside a plain button, 18px inside an
-*   `is-small` one, and a labelled button left its icon at the
-*   inherited 16px -- so one row held 16px, 18px and 24px
-*   glyphs and looked like three toolbars pushed together.
-*   `rem` is measured against the page, so a chip that is
-*   deliberately shorter than a button still carries the same
-*   glyph.
-*
-*   20px against the row's 16px text: an icon-only button is
-*   legible at half its 40px height, and beside a label the
-*   glyph reads as a marker rather than as a second word.
-************************************************************/
-var YUI_GRAPH_ICON_SIZE = "1.25rem";
-function yui_graph_icon(icon_class, extra_style) {
-	return ["i", {
-		class: icon_class,
-		style: `font-size:${YUI_GRAPH_ICON_SIZE}; line-height:1; color:inherit;` + (extra_style || "")
-	}];
-}
-/************************************************************
 *   One icon button that fires `event_name`.
 ************************************************************/
 function camera_button(gobj, icon, event_name, label_key, wide, extra_style) {
@@ -10601,7 +10606,7 @@ function camera_button(gobj, icon, event_name, label_key, wide, extra_style) {
 			"aria-label": (0, i18next.t)(label_key),
 			"data-i18n-aria-label": label_key
 		},
-		yui_graph_icon(icon, extra_style),
+		yui_toolbar_icon(icon, extra_style),
 		{ click: (evt) => {
 			evt.stopPropagation();
 			(0, _yuneta_gobj_js.gobj_send_event)(gobj, event_name, { evt }, gobj);
@@ -11391,7 +11396,7 @@ var attrs_table$13 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "json_data", 0, null, "JSON data to visualize"),
 	(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, "wide", 0, "40px", "Height of header. 40px and not 36: it is what an untouched Bulma control measures, so the find box stood 4px taller than every button beside it, and it is what the third graph of the family (C_YUI_TREEDB_GRAPH) uses"),
 	(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)()
 ];
@@ -11694,7 +11699,7 @@ function make_toolbar$5(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[yui_graph_icon("yi-magnifying-glass")]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -11728,19 +11733,23 @@ function make_toolbar$5(gobj) {
 		];
 	});
 	let right_items = [(0, _yuneta_gobj_js.createElement2)([
-		"select",
+		"div",
 		{
-			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"
+			class: "select",
+			style: { "margin-left": "0.5em" }
 		},
-		options,
+		[[
+			"select",
+			{
+				class: "JSON_GRAPH_LAYOUT",
+				style: { height: toolbar_wide },
+				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);
@@ -13220,7 +13229,7 @@ function make_toolbar$4(gobj) {
 		[$search_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	left_items.push(icon_button$1(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"), icon_button$1(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"));
@@ -13270,7 +13279,7 @@ function icon_button$1(gobj, icon, event_name, label_key) {
 		[[
 			"span",
 			{ class: "icon" },
-			[["i", { class: icon }]]
+			[yui_toolbar_icon(icon)]
 		]],
 		{ click: function(evt) {
 			evt.stopPropagation();
@@ -13307,7 +13316,7 @@ function view_mode_switch$1(gobj) {
 				[[
 					"span",
 					{ class: "icon" },
-					[["i", { class: v.icon }]]
+					[yui_toolbar_icon(v.icon)]
 				]],
 				{ click: function(evt) {
 					evt.stopPropagation();
@@ -17483,7 +17492,7 @@ var attrs_table$9 = [
 	(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_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, "wide", 0, "40px", "Height of header. 40px and not 36: it is what an untouched Bulma control measures, so the find box stood 4px taller than every button beside it, and it is what the third graph of the family (C_YUI_TREEDB_GRAPH) uses"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "layout", 0, "vertical-compact", "Current layout key"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_INTEGER, "collapse_threshold", 0, 10, "Auto-collapse a node whose direct children exceed this number. 0 disables auto-collapse."),
 	(0, _yuneta_gobj_js.SDATA_END)()
@@ -18136,7 +18145,7 @@ function make_find_items(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[yui_graph_icon("yi-magnifying-glass")]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -18206,24 +18215,31 @@ function make_toolbar$1(gobj) {
 			LAYOUTS[key].label
 		]);
 	}
-	let $select = (0, _yuneta_gobj_js.createElement2)([
-		"select",
+	let $wrap = (0, _yuneta_gobj_js.createElement2)([
+		"div",
 		{
 			class: "select",
-			style: {
-				height: toolbar_wide,
-				"margin-left": "0.5em"
-			},
-			title: (0, i18next.t)("layout")
+			style: { "margin-left": "0.5em" }
 		},
-		options,
+		[[
+			"select",
+			{
+				class: "GOBJ_TREE_LAYOUT",
+				style: { height: toolbar_wide },
+				title: (0, i18next.t)("layout"),
+				"data-i18n-title": "layout",
+				"aria-label": (0, i18next.t)("layout"),
+				"data-i18n-aria-label": "layout"
+			},
+			options
+		]],
 		{ change: (evt) => {
 			let value = evt.target.value;
 			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_CHANGE_LAYOUT", { layout: value }, gobj);
 		} }
 	]);
-	priv.$layout_select = $select;
-	right_items.push($select);
+	priv.$layout_select = $wrap.querySelector("select");
+	right_items.push($wrap);
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -21373,7 +21389,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[["i", { class: "yi-arrow-left" }]]
+								[yui_toolbar_icon("yi-arrow-left")]
 							], [
 								"span",
 								{ i18n: "topics" },
@@ -21396,7 +21412,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[["i", { class: "yi-hexagon-nodes" }]]
+								[yui_toolbar_icon("yi-hexagon-nodes")]
 							], [
 								"span",
 								{ i18n: "schema" },
@@ -21417,7 +21433,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[["i", { class: "yi-cloudversify" }]]
+								[yui_toolbar_icon("yi-cloudversify")]
 							], [
 								"span",
 								{ class: "TREEDB_TOPICS_SOURCE_URL" },
@@ -21437,7 +21453,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[["i", { class: "yi-eye" }]]
+								[yui_toolbar_icon("yi-eye")]
 							], [
 								"span",
 								{ i18n: "raw json" },
@@ -24057,7 +24073,7 @@ function build_ui$5(gobj) {
 					id: ``,
 					class: "button button-edit-record mr-1"
 				},
-				[["i", { class: "yi-pen" }], [
+				[yui_toolbar_icon("yi-pen"), [
 					"span",
 					{
 						class: "is-hidden-mobile",
@@ -24080,7 +24096,7 @@ function build_ui$5(gobj) {
 						class: "button button-new-record mr-1",
 						disabled: true
 					},
-					[["i", { class: "yi-plus" }], [
+					[yui_toolbar_icon("yi-plus"), [
 						"span",
 						{
 							class: "is-hidden-mobile",
@@ -24104,7 +24120,7 @@ function build_ui$5(gobj) {
 						class: "button button-delete-record mr-1",
 						disabled: true
 					},
-					[["i", { class: "yi-trash" }], [
+					[yui_toolbar_icon("yi-trash"), [
 						"span",
 						{
 							class: "is-hidden-mobile",
@@ -24128,7 +24144,7 @@ function build_ui$5(gobj) {
 						class: "button button-copy-record mr-1",
 						disabled: true
 					},
-					[["i", { class: "yi-copy" }], [
+					[yui_toolbar_icon("yi-copy"), [
 						"span",
 						{
 							class: "is-hidden-mobile",
@@ -24152,7 +24168,7 @@ function build_ui$5(gobj) {
 						class: "button button-paste-record mr-1",
 						disabled: true
 					},
-					[["i", { class: "yi-paste" }], [
+					[yui_toolbar_icon("yi-paste"), [
 						"span",
 						{
 							class: "is-hidden-mobile",
@@ -24193,7 +24209,7 @@ function build_ui$5(gobj) {
 			}], [
 				"span",
 				{ class: "icon is-left" },
-				[["i", { class: "yi-magnifying-glass" }]]
+				[yui_toolbar_icon("yi-magnifying-glass")]
 			]]
 		]);
 		let $search_input = $search_box.querySelector(`#${search_id}`);
@@ -24211,7 +24227,7 @@ function build_ui$5(gobj) {
 				title: (0, i18next.t)("refresh"),
 				"data-i18n-title": "refresh"
 			},
-			[["i", { class: "yi-arrows-rotate" }], [
+			[yui_toolbar_icon("yi-arrows-rotate"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -24237,7 +24253,7 @@ function build_ui$5(gobj) {
 				"aria-label": (0, i18next.t)("schema"),
 				"data-i18n-aria-label": "schema"
 			},
-			[["i", { class: "yi-hexagon-nodes" }], [
+			[yui_toolbar_icon("yi-hexagon-nodes"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -24263,7 +24279,7 @@ function build_ui$5(gobj) {
 				"aria-label": (0, i18next.t)("columns"),
 				"data-i18n-aria-label": "columns"
 			},
-			[["i", { class: "yi-table" }], [
+			[yui_toolbar_icon("yi-table"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -24289,7 +24305,7 @@ function build_ui$5(gobj) {
 				"aria-label": (0, i18next.t)("export"),
 				"data-i18n-aria-label": "export"
 			},
-			[["i", { class: "yi-download" }], [
+			[yui_toolbar_icon("yi-download"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62103,7 +62119,7 @@ function node_shape_items(gobj, wide) {
 					"data-i18n-aria-label": key,
 					"aria-pressed": "false"
 				},
-				yui_graph_icon(NODE_MODE_ICONS[mode]),
+				yui_toolbar_icon(NODE_MODE_ICONS[mode]),
 				{ click: (evt) => {
 					evt.stopPropagation();
 					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_NODE_MODE", { node_mode: mode }, gobj);
@@ -62125,7 +62141,7 @@ function node_shape_items(gobj, wide) {
 			"data-i18n-aria-label": "node labels",
 			"aria-pressed": "false"
 		},
-		yui_graph_icon("yi-font"),
+		yui_toolbar_icon("yi-font"),
 		{ click: (evt) => {
 			evt.stopPropagation();
 			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
@@ -62219,7 +62235,7 @@ function make_toolbar(gobj) {
 		[
 			"button",
 			{ class: "GRAPH_REFRESH button" },
-			[yui_graph_icon("yi-arrows-rotate"), [
+			[yui_toolbar_icon("yi-arrows-rotate"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62244,7 +62260,7 @@ function make_toolbar(gobj) {
 				"data-i18n-title": "raw json",
 				"data-i18n-aria-label": "raw json"
 			},
-			[yui_graph_icon("yi-eye"), [
+			[yui_toolbar_icon("yi-eye"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62289,7 +62305,7 @@ function make_toolbar(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[yui_graph_icon("yi-magnifying-glass")]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -63258,7 +63274,7 @@ function ac_set_operation_mode(gobj, event, kw, src) {
 *  card's graph icon travels — as EV_TOPIC_SELECTED, which the host turns
 *  into the URL, so what you are looking at stays linkable.
 ************************************************************/
-var LEGEND_GLYPH_STYLE = `font-size:${YUI_GRAPH_ICON_SIZE}; line-height:1; color:inherit;`;
+var LEGEND_GLYPH_STYLE = `font-size:${YUI_TOOLBAR_ICON_SIZE}; line-height:1; color:inherit;`;
 var LEGEND_NAME_STYLE = "font-size:1rem; line-height:1.2;";
 var LEGEND_COUNT_STYLE = "margin-left:.4rem; font-size:.875rem;";
 function refresh_legend(gobj) {

package/dist/gobj-ui.es.js

@@ -10293,6 +10293,35 @@ function register_c_yui_uplot() {
 }
 //#endregion
 //#region src/yui_toolbar.js
+/************************************************************
+*  ONE size for every glyph of a view's toolbar, in `rem`.
+*
+*  It lives here because it belongs to the TOOLBAR and not to
+*  any one view: it was born in the graph rows (7.23.86) and the
+*  JSON viewer beside them still drew 16px, which is the same
+*  drift one level up.
+*
+*  `rem` and not `em` is the whole lesson: `em` is measured
+*  against the button, so one declaration draws three icons --
+*  `1.5em` is 24px in a plain button, 18px in an `is-small`
+*  chip, and a labelled button that declares nothing keeps the
+*  inherited 16px. `rem` is measured against the page, so a
+*  chip deliberately shorter than a button still carries the
+*  same glyph.
+*
+*  20px against a row's 16px text: an icon-only button is
+*  legible at half its 40px height, and beside a label the
+*  glyph reads as a marker rather than as a second word. The
+*  app BAR is a different band and keeps its own, bigger size
+*  (`.yui-toolbar-item .icon`, 1.35rem on 44px items).
+************************************************************/
+var YUI_TOOLBAR_ICON_SIZE = "1.25rem";
+function yui_toolbar_icon(icon_class, extra_style) {
+	return ["i", {
+		class: icon_class,
+		style: `font-size:${YUI_TOOLBAR_ICON_SIZE}; line-height:1; color:inherit;` + (extra_style || "")
+	}];
+}
 function yui_toolbar(attrs = {}, items = []) {
 	function arrow_button(side, icon, label) {
 		return [
@@ -10555,30 +10584,6 @@ function getPointPosition(count, index, margin = .2) {
 *          All Rights Reserved.
 ***********************************************************************/
 /************************************************************
-*   ONE size for every glyph of a graph's toolbar ROW, in
-*   `rem` and not `em`.
-*
-*   In `em` the same declaration draws three different icons:
-*   `1.5em` is 24px inside a plain button, 18px inside an
-*   `is-small` one, and a labelled button left its icon at the
-*   inherited 16px -- so one row held 16px, 18px and 24px
-*   glyphs and looked like three toolbars pushed together.
-*   `rem` is measured against the page, so a chip that is
-*   deliberately shorter than a button still carries the same
-*   glyph.
-*
-*   20px against the row's 16px text: an icon-only button is
-*   legible at half its 40px height, and beside a label the
-*   glyph reads as a marker rather than as a second word.
-************************************************************/
-var YUI_GRAPH_ICON_SIZE = "1.25rem";
-function yui_graph_icon(icon_class, extra_style) {
-	return ["i", {
-		class: icon_class,
-		style: `font-size:${YUI_GRAPH_ICON_SIZE}; line-height:1; color:inherit;` + (extra_style || "")
-	}];
-}
-/************************************************************
 *   One icon button that fires `event_name`.
 ************************************************************/
 function camera_button(gobj, icon, event_name, label_key, wide, extra_style) {
@@ -10596,7 +10601,7 @@ function camera_button(gobj, icon, event_name, label_key, wide, extra_style) {
 			"aria-label": t(label_key),
 			"data-i18n-aria-label": label_key
 		},
-		yui_graph_icon(icon, extra_style),
+		yui_toolbar_icon(icon, extra_style),
 		{ click: (evt) => {
 			evt.stopPropagation();
 			gobj_send_event(gobj, event_name, { evt }, gobj);
@@ -11386,7 +11391,7 @@ var attrs_table$13 = [
 	SDATA(data_type_t.DTP_JSON, "json_data", 0, null, "JSON data to visualize"),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "Container element"),
 	SDATA(data_type_t.DTP_STRING, "canvas_id", 0, "", "Canvas ID"),
-	SDATA(data_type_t.DTP_STRING, "wide", 0, "36px", "Height of header"),
+	SDATA(data_type_t.DTP_STRING, "wide", 0, "40px", "Height of header. 40px and not 36: it is what an untouched Bulma control measures, so the find box stood 4px taller than every button beside it, and it is what the third graph of the family (C_YUI_TREEDB_GRAPH) uses"),
 	SDATA(data_type_t.DTP_STRING, "layout", 0, "json-tree", "Layout key (see LAYOUTS)"),
 	SDATA_END()
 ];
@@ -11689,7 +11694,7 @@ function make_toolbar$5(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[yui_graph_icon("yi-magnifying-glass")]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -11723,19 +11728,23 @@ function make_toolbar$5(gobj) {
 		];
 	});
 	let right_items = [createElement2([
-		"select",
+		"div",
 		{
-			class: "JSON_GRAPH_LAYOUT select",
-			style: {
-				height: toolbar_wide,
-				"margin-left": "0.5em"
-			},
-			title: t("layout"),
-			"data-i18n-title": "layout",
-			"aria-label": t("layout"),
-			"data-i18n-aria-label": "layout"
+			class: "select",
+			style: { "margin-left": "0.5em" }
 		},
-		options,
+		[[
+			"select",
+			{
+				class: "JSON_GRAPH_LAYOUT",
+				style: { height: toolbar_wide },
+				title: t("layout"),
+				"data-i18n-title": "layout",
+				"aria-label": t("layout"),
+				"data-i18n-aria-label": "layout"
+			},
+			options
+		]],
 		{ change: (evt) => {
 			evt.stopPropagation();
 			gobj_send_event(gobj, "EV_CHANGE_LAYOUT", { layout: evt.target.value }, gobj);
@@ -13215,7 +13224,7 @@ function make_toolbar$4(gobj) {
 		[$search_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	left_items.push(icon_button$1(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"), icon_button$1(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"));
@@ -13265,7 +13274,7 @@ function icon_button$1(gobj, icon, event_name, label_key) {
 		[[
 			"span",
 			{ class: "icon" },
-			[["i", { class: icon }]]
+			[yui_toolbar_icon(icon)]
 		]],
 		{ click: function(evt) {
 			evt.stopPropagation();
@@ -13302,7 +13311,7 @@ function view_mode_switch$1(gobj) {
 				[[
 					"span",
 					{ class: "icon" },
-					[["i", { class: v.icon }]]
+					[yui_toolbar_icon(v.icon)]
 				]],
 				{ click: function(evt) {
 					evt.stopPropagation();
@@ -17478,7 +17487,7 @@ var attrs_table$9 = [
 	SDATA(data_type_t.DTP_POINTER, "subscriber", 0, null, "Subscriber of output events"),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "Container element"),
 	SDATA(data_type_t.DTP_STRING, "canvas_id", 0, "", "Canvas ID"),
-	SDATA(data_type_t.DTP_STRING, "wide", 0, "36px", "Height of header"),
+	SDATA(data_type_t.DTP_STRING, "wide", 0, "40px", "Height of header. 40px and not 36: it is what an untouched Bulma control measures, so the find box stood 4px taller than every button beside it, and it is what the third graph of the family (C_YUI_TREEDB_GRAPH) uses"),
 	SDATA(data_type_t.DTP_STRING, "layout", 0, "vertical-compact", "Current layout key"),
 	SDATA(data_type_t.DTP_INTEGER, "collapse_threshold", 0, 10, "Auto-collapse a node whose direct children exceed this number. 0 disables auto-collapse."),
 	SDATA_END()
@@ -18131,7 +18140,7 @@ function make_find_items(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[yui_graph_icon("yi-magnifying-glass")]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -18201,24 +18210,31 @@ function make_toolbar$1(gobj) {
 			LAYOUTS[key].label
 		]);
 	}
-	let $select = createElement2([
-		"select",
+	let $wrap = createElement2([
+		"div",
 		{
 			class: "select",
-			style: {
-				height: toolbar_wide,
-				"margin-left": "0.5em"
-			},
-			title: t("layout")
+			style: { "margin-left": "0.5em" }
 		},
-		options,
+		[[
+			"select",
+			{
+				class: "GOBJ_TREE_LAYOUT",
+				style: { height: toolbar_wide },
+				title: t("layout"),
+				"data-i18n-title": "layout",
+				"aria-label": t("layout"),
+				"data-i18n-aria-label": "layout"
+			},
+			options
+		]],
 		{ change: (evt) => {
 			let value = evt.target.value;
 			gobj_send_event(gobj, "EV_CHANGE_LAYOUT", { layout: value }, gobj);
 		} }
 	]);
-	priv.$layout_select = $select;
-	right_items.push($select);
+	priv.$layout_select = $wrap.querySelector("select");
+	right_items.push($wrap);
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -21368,7 +21384,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[["i", { class: "yi-arrow-left" }]]
+								[yui_toolbar_icon("yi-arrow-left")]
 							], [
 								"span",
 								{ i18n: "topics" },
@@ -21391,7 +21407,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[["i", { class: "yi-hexagon-nodes" }]]
+								[yui_toolbar_icon("yi-hexagon-nodes")]
 							], [
 								"span",
 								{ i18n: "schema" },
@@ -21412,7 +21428,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[["i", { class: "yi-cloudversify" }]]
+								[yui_toolbar_icon("yi-cloudversify")]
 							], [
 								"span",
 								{ class: "TREEDB_TOPICS_SOURCE_URL" },
@@ -21432,7 +21448,7 @@ function build_ui$6(gobj) {
 							[[
 								"span",
 								{ class: "icon" },
-								[["i", { class: "yi-eye" }]]
+								[yui_toolbar_icon("yi-eye")]
 							], [
 								"span",
 								{ i18n: "raw json" },
@@ -24052,7 +24068,7 @@ function build_ui$5(gobj) {
 					id: ``,
 					class: "button button-edit-record mr-1"
 				},
-				[["i", { class: "yi-pen" }], [
+				[yui_toolbar_icon("yi-pen"), [
 					"span",
 					{
 						class: "is-hidden-mobile",
@@ -24075,7 +24091,7 @@ function build_ui$5(gobj) {
 						class: "button button-new-record mr-1",
 						disabled: true
 					},
-					[["i", { class: "yi-plus" }], [
+					[yui_toolbar_icon("yi-plus"), [
 						"span",
 						{
 							class: "is-hidden-mobile",
@@ -24099,7 +24115,7 @@ function build_ui$5(gobj) {
 						class: "button button-delete-record mr-1",
 						disabled: true
 					},
-					[["i", { class: "yi-trash" }], [
+					[yui_toolbar_icon("yi-trash"), [
 						"span",
 						{
 							class: "is-hidden-mobile",
@@ -24123,7 +24139,7 @@ function build_ui$5(gobj) {
 						class: "button button-copy-record mr-1",
 						disabled: true
 					},
-					[["i", { class: "yi-copy" }], [
+					[yui_toolbar_icon("yi-copy"), [
 						"span",
 						{
 							class: "is-hidden-mobile",
@@ -24147,7 +24163,7 @@ function build_ui$5(gobj) {
 						class: "button button-paste-record mr-1",
 						disabled: true
 					},
-					[["i", { class: "yi-paste" }], [
+					[yui_toolbar_icon("yi-paste"), [
 						"span",
 						{
 							class: "is-hidden-mobile",
@@ -24188,7 +24204,7 @@ function build_ui$5(gobj) {
 			}], [
 				"span",
 				{ class: "icon is-left" },
-				[["i", { class: "yi-magnifying-glass" }]]
+				[yui_toolbar_icon("yi-magnifying-glass")]
 			]]
 		]);
 		let $search_input = $search_box.querySelector(`#${search_id}`);
@@ -24206,7 +24222,7 @@ function build_ui$5(gobj) {
 				title: t("refresh"),
 				"data-i18n-title": "refresh"
 			},
-			[["i", { class: "yi-arrows-rotate" }], [
+			[yui_toolbar_icon("yi-arrows-rotate"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -24232,7 +24248,7 @@ function build_ui$5(gobj) {
 				"aria-label": t("schema"),
 				"data-i18n-aria-label": "schema"
 			},
-			[["i", { class: "yi-hexagon-nodes" }], [
+			[yui_toolbar_icon("yi-hexagon-nodes"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -24258,7 +24274,7 @@ function build_ui$5(gobj) {
 				"aria-label": t("columns"),
 				"data-i18n-aria-label": "columns"
 			},
-			[["i", { class: "yi-table" }], [
+			[yui_toolbar_icon("yi-table"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -24284,7 +24300,7 @@ function build_ui$5(gobj) {
 				"aria-label": t("export"),
 				"data-i18n-aria-label": "export"
 			},
-			[["i", { class: "yi-download" }], [
+			[yui_toolbar_icon("yi-download"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62098,7 +62114,7 @@ function node_shape_items(gobj, wide) {
 					"data-i18n-aria-label": key,
 					"aria-pressed": "false"
 				},
-				yui_graph_icon(NODE_MODE_ICONS[mode]),
+				yui_toolbar_icon(NODE_MODE_ICONS[mode]),
 				{ click: (evt) => {
 					evt.stopPropagation();
 					gobj_send_event(gobj, "EV_SET_NODE_MODE", { node_mode: mode }, gobj);
@@ -62120,7 +62136,7 @@ function node_shape_items(gobj, wide) {
 			"data-i18n-aria-label": "node labels",
 			"aria-pressed": "false"
 		},
-		yui_graph_icon("yi-font"),
+		yui_toolbar_icon("yi-font"),
 		{ click: (evt) => {
 			evt.stopPropagation();
 			gobj_send_event(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
@@ -62214,7 +62230,7 @@ function make_toolbar(gobj) {
 		[
 			"button",
 			{ class: "GRAPH_REFRESH button" },
-			[yui_graph_icon("yi-arrows-rotate"), [
+			[yui_toolbar_icon("yi-arrows-rotate"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62239,7 +62255,7 @@ function make_toolbar(gobj) {
 				"data-i18n-title": "raw json",
 				"data-i18n-aria-label": "raw json"
 			},
-			[yui_graph_icon("yi-eye"), [
+			[yui_toolbar_icon("yi-eye"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62284,7 +62300,7 @@ function make_toolbar(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[yui_graph_icon("yi-magnifying-glass")]
+			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -63253,7 +63269,7 @@ function ac_set_operation_mode(gobj, event, kw, src) {
 *  card's graph icon travels — as EV_TOPIC_SELECTED, which the host turns
 *  into the URL, so what you are looking at stays linkable.
 ************************************************************/
-var LEGEND_GLYPH_STYLE = `font-size:${YUI_GRAPH_ICON_SIZE}; line-height:1; color:inherit;`;
+var LEGEND_GLYPH_STYLE = `font-size:${YUI_TOOLBAR_ICON_SIZE}; line-height:1; color:inherit;`;
 var LEGEND_NAME_STYLE = "font-size:1rem; line-height:1.2;";
 var LEGEND_COUNT_STYLE = "margin-left:.4rem; font-size:.875rem;";
 function refresh_legend(gobj) {

package/package.json

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

package/src/c_yui_gobj_tree_js.js

@@ -54,7 +54,7 @@ import {
 } from "./yui_gclass_view.js";
 import {yui_shell_of} from "./c_yui_shell.js";
 
-import {yui_toolbar} from "./yui_toolbar.js";
+import {yui_toolbar, yui_toolbar_icon} from "./yui_toolbar.js";
 import {attach_clear} from "./yui_inputs.js";
 import {
     yui_graph_camera_items,
@@ -62,7 +62,6 @@ import {
     yui_graph_update_anchor,
     yui_graph_center_on,
     yui_graph_fold_items,
-    yui_graph_icon,
     yui_graph_refresh_item,
     yui_graph_update_zoom,
 } from "./yui_graph_camera.js";
@@ -99,7 +98,7 @@ SDATA(data_type_t.DTP_POINTER,  "$container",       0,  null,   "Container eleme
 SDATA(data_type_t.DTP_STRING,   "canvas_id",        0,  "",     "Canvas ID"),
 
 /*---------------- Graph Settings ----------------*/
-SDATA(data_type_t.DTP_STRING,   "wide",             0,  "36px", "Height of header"),
+SDATA(data_type_t.DTP_STRING,   "wide",             0,  "40px", "Height of header. 40px and not 36: it is what an untouched Bulma control measures, so the find box stood 4px taller than every button beside it, and it is what the third graph of the family (C_YUI_TREEDB_GRAPH) uses"),
 SDATA(data_type_t.DTP_STRING,   "layout",           0,  "vertical-compact", "Current layout key"),
 SDATA(data_type_t.DTP_INTEGER,  "collapse_threshold", 0, 10, "Auto-collapse a node whose direct children exceed this number. 0 disables auto-collapse."),
 
@@ -907,7 +906,7 @@ function make_find_items(gobj)
                  style: 'margin-left:.5rem; margin-right:.5rem; ' +
                         'max-width:12rem; min-width:7rem;'}, [
             $find_input,
-            ['span', {class: 'icon is-left'}, [yui_graph_icon('yi-magnifying-glass')]]
+            ['span', {class: 'icon is-left'}, [yui_toolbar_icon('yi-magnifying-glass')]]
         ]]);
     attach_clear($find_control, $find_input);
 
@@ -1019,23 +1018,27 @@ function make_toolbar(gobj)
         options.push(['option', opt_attrs, LAYOUTS[key].label]);
     }
 
-    let $select = createElement2(
-        ['select', {
-                class: 'select',
-                style: {height: toolbar_wide, "margin-left": "0.5em"},
-                title: t("layout"),
-            },
-            options,
-            {
-                change: (evt) => {
-                    let value = evt.target.value;
-                    gobj_send_event(gobj, "EV_CHANGE_LAYOUT", {layout: value}, gobj);
-                }
+    /*  `.select` on the WRAPPER and not on the control: Bulma styles
+     *  `.select select`, so the class on the `<select>` itself matched
+     *  nothing and the box kept the browser's 13.3px font in a row of
+     *  16px controls.  */
+    let $wrap = createElement2(
+        ['div', {class: 'select', style: {"margin-left": "0.5em"}}, [
+            ['select', {
+                class: 'GOBJ_TREE_LAYOUT',
+                style: {height: toolbar_wide},
+                title: t("layout"), 'data-i18n-title': "layout",
+                'aria-label': t("layout"), 'data-i18n-aria-label': "layout",
+            }, options]
+        ], {
+            change: (evt) => {
+                let value = evt.target.value;
+                gobj_send_event(gobj, "EV_CHANGE_LAYOUT", {layout: value}, gobj);
             }
-        ]
+        }]
     );
-    priv.$layout_select = $select;
-    right_items.push($select);
+    priv.$layout_select = $wrap.querySelector("select");
+    right_items.push($wrap);
 
     const $toolbar = yui_toolbar({}, [
         ['div', {class: 'yui-horizontal-toolbar-section left'}, left_items],

package/src/c_yui_json.js

@@ -102,7 +102,7 @@ import {
     container_label,
 } from "./json_view_helpers.js";
 
-import {yui_toolbar} from "./yui_toolbar.js";
+import {yui_toolbar, yui_toolbar_icon} from "./yui_toolbar.js";
 import {register_c_yui_json_graph} from "./c_yui_json_graph.js";
 import {attach_clear} from "./yui_inputs.js";
 
@@ -388,7 +388,7 @@ function make_toolbar(gobj)
         ['div', {class: 'control has-icons-left JSON_SEARCH_CONTROL',
                  style: 'max-width:22em;'}, [
             $search_input,
-            ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
+            ['span', {class: 'icon is-left'}, [yui_toolbar_icon('yi-magnifying-glass')]]
         ]]);
     /*  The GLOBAL fold leads the row, ahead of the find box — the same
      *  place both graphs put theirs.  It opens the whole document; the
@@ -426,7 +426,7 @@ function icon_button(gobj, icon, event_name, label_key)
     return ['button', {class: `button ${event_name}`, style: 'width:2.5em;',
                        title: t(label_key), 'data-i18n-title': label_key,
                        'aria-label': t(label_key), 'data-i18n-aria-label': label_key}, [
-        ['span', {class: 'icon'}, [['i', {class: icon}]]]
+        ['span', {class: 'icon'}, [yui_toolbar_icon(icon)]]
     ], {
         click: function(evt) {
             evt.stopPropagation();
@@ -452,7 +452,7 @@ function view_mode_switch(gobj)
                            type: 'button', style: 'width:2.5em;',
                            title: label, 'data-i18n-title': v.key,
                            'aria-label': label, 'data-i18n-aria-label': v.key}, [
-            ['span', {class: 'icon'}, [['i', {class: v.icon}]]]
+            ['span', {class: 'icon'}, [yui_toolbar_icon(v.icon)]]
         ], {
             click: function(evt) {
                 evt.stopPropagation();

package/src/c_yui_json_graph.js

@@ -47,7 +47,7 @@ import {
     refresh_language,
 } from "@yuneta/gobj-js";
 
-import {yui_toolbar} from "./yui_toolbar.js";
+import {yui_toolbar, yui_toolbar_icon} from "./yui_toolbar.js";
 import {attach_clear} from "./yui_inputs.js";
 import {
     yui_graph_camera_items,
@@ -57,7 +57,6 @@ import {
     yui_graph_place_at,
     yui_graph_viewport_of,
     yui_graph_fold_items,
-    yui_graph_icon,
     yui_graph_refresh_item,
     yui_graph_update_zoom,
 } from "./yui_graph_camera.js";
@@ -177,7 +176,7 @@ SDATA(data_type_t.DTP_POINTER,  "$container",       0,  null,   "Container eleme
 SDATA(data_type_t.DTP_STRING,   "canvas_id",        0,  "",     "Canvas ID"),
 
 /*---------------- Graph Settings ----------------*/
-SDATA(data_type_t.DTP_STRING,   "wide",             0,  "36px", "Height of header"),
+SDATA(data_type_t.DTP_STRING,   "wide",             0,  "40px", "Height of header. 40px and not 36: it is what an untouched Bulma control measures, so the find box stood 4px taller than every button beside it, and it is what the third graph of the family (C_YUI_TREEDB_GRAPH) uses"),
 SDATA(data_type_t.DTP_STRING,   "layout",           0,  "json-tree", "Layout key (see LAYOUTS)"),
 
 SDATA_END()
@@ -586,7 +585,7 @@ function make_toolbar(gobj)
         ['div', {class: 'JSON_GRAPH_FIND control has-icons-left',
                  style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
             $find_input,
-            ['span', {class: 'icon is-left'}, [yui_graph_icon('yi-magnifying-glass')]]
+            ['span', {class: 'icon is-left'}, [yui_toolbar_icon('yi-magnifying-glass')]]
         ]]);
     attach_clear($find_control, $find_input);
 
@@ -657,13 +656,20 @@ function make_toolbar(gobj)
         return ['option', attrs, layout_label(key)];
     });
 
+    /*  Bulma's `.select` styles a WRAPPER that holds the control, not
+     *  the control: on the `<select>` itself its `.select select` rule
+     *  never matches, so the box kept the browser's own font -- 13.3px
+     *  in a row where everything else says 16 -- and none of Bulma's
+     *  chrome. The class goes where Bulma looks for it.  */
     let $layout_select = createElement2(
-        ['select', {
-            class: 'JSON_GRAPH_LAYOUT select',
-            style: {height: toolbar_wide, "margin-left": "0.5em"},
-            title: t("layout"), 'data-i18n-title': "layout",
-            'aria-label': t("layout"), 'data-i18n-aria-label': "layout"
-        }, options, {
+        ['div', {class: 'select', style: {"margin-left": "0.5em"}}, [
+            ['select', {
+                class: 'JSON_GRAPH_LAYOUT',
+                style: {height: toolbar_wide},
+                title: t("layout"), 'data-i18n-title': "layout",
+                'aria-label': t("layout"), 'data-i18n-aria-label': "layout"
+            }, options]
+        ], {
             change: (evt) => {
                 evt.stopPropagation();
                 gobj_send_event(gobj, "EV_CHANGE_LAYOUT", {layout: evt.target.value}, gobj);

package/src/c_yui_shell.css

@@ -524,6 +524,16 @@
  *      Circular badge populated by the host-registered provider
  *      via yui_shell_set_avatar_provider().
  *============================================================*/
+/*  The badge is 2rem, and the item's own 0.5rem padding put the
+ *  avatar at 48px in a row of 44px items -- the only thing in the app
+ *  bar that stood taller than the rest. The padding gives way; the
+ *  badge (which is the identity, and the hit target) does not, and the
+ *  item keeps the row's 2.75rem min-height.  */
+.yui-toolbar-item.yui-toolbar-avatar {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}
+
 .yui-toolbar-avatar .yui-avatar {
     display: inline-flex;
     align-items: center;

package/src/c_yui_treedb_graph.js

@@ -79,14 +79,11 @@ import {
     gobj_stop_children,
 } from "@yuneta/gobj-js";
 
-import {yui_toolbar} from "./yui_toolbar.js";
+
 import {attach_clear} from "./yui_inputs.js";
 import {register_c_g6_nodes_tree} from "./c_g6_nodes_tree.js";
-import {
-    yui_graph_fold_items,
-    yui_graph_icon,
-    YUI_GRAPH_ICON_SIZE,
-} from "./yui_graph_camera.js";
+import {yui_graph_fold_items} from "./yui_graph_camera.js";
+import {yui_toolbar, yui_toolbar_icon, YUI_TOOLBAR_ICON_SIZE} from "./yui_toolbar.js";
 import {
     removeChildElements,
     disableElements,
@@ -578,7 +575,7 @@ function node_shape_items(gobj, wide)
                            title: t(key), 'data-i18n-title': key,
                            'aria-label': t(key), 'data-i18n-aria-label': key,
                            'aria-pressed': 'false'},
-            yui_graph_icon(NODE_MODE_ICONS[mode]),
+            yui_toolbar_icon(NODE_MODE_ICONS[mode]),
             {
                 click: (evt) => {
                     evt.stopPropagation();
@@ -595,7 +592,7 @@ function node_shape_items(gobj, wide)
                     title: t('node labels'), 'data-i18n-title': 'node labels',
                     'aria-label': t('node labels'), 'data-i18n-aria-label': 'node labels',
                     'aria-pressed': 'false'},
-            yui_graph_icon('yi-font'),
+            yui_toolbar_icon('yi-font'),
             {
                 click: (evt) => {
                     evt.stopPropagation();
@@ -697,7 +694,7 @@ function make_toolbar(gobj)
         }],
 
         ['button', {class: 'GRAPH_REFRESH button'}, [
-            yui_graph_icon('yi-arrows-rotate'),
+            yui_toolbar_icon('yi-arrows-rotate'),
             ['span', {class: 'is-hidden-mobile', style: 'padding-left:5px;', i18n: 'refresh'}, 'refresh']
         ], {
             click: (evt) => {
@@ -722,7 +719,7 @@ function make_toolbar(gobj)
         ['button', {class: 'button ml-2 TREEDB_JSON_BTN',
                     title: t('raw json'), 'aria-label': t('raw json'),
                     'data-i18n-title': 'raw json', 'data-i18n-aria-label': 'raw json'}, [
-            yui_graph_icon('yi-eye'),
+            yui_toolbar_icon('yi-eye'),
             ['span', {class: 'is-hidden-mobile', style: 'padding-left:5px;', i18n: 'raw json'}, 'raw json']
         ], {
             click: (evt) => {
@@ -779,7 +776,7 @@ function make_toolbar(gobj)
         ['div', {class: 'GRAPH_FIND control has-icons-left',
                  style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
             $find_input,
-            ['span', {class: 'icon is-left'}, [yui_graph_icon('yi-magnifying-glass')]]
+            ['span', {class: 'icon is-left'}, [yui_toolbar_icon('yi-magnifying-glass')]]
         ]]);
     attach_clear($find_control, $find_input);
 
@@ -2468,7 +2465,7 @@ function ac_set_operation_mode(gobj, event, kw, src)
  *
  *  The count is the one deliberate step down: it is the number beside
  *  the name, not the name.  */
-const LEGEND_GLYPH_STYLE = `font-size:${YUI_GRAPH_ICON_SIZE}; line-height:1; color:inherit;`;
+const LEGEND_GLYPH_STYLE = `font-size:${YUI_TOOLBAR_ICON_SIZE}; line-height:1; color:inherit;`;
 const LEGEND_NAME_STYLE  = 'font-size:1rem; line-height:1.2;';
 const LEGEND_COUNT_STYLE = 'margin-left:.4rem; font-size:.875rem;';
 

package/src/c_yui_treedb_topic_with_form.js

@@ -91,6 +91,8 @@ import {row_matches} from "./yui_row_search.js";
 
 import {t} from "i18next";
 
+import {yui_toolbar_icon} from "./yui_toolbar.js";
+
 import {plan_treedb_writes, READONLY_FORM_TOOLBAR} from "./treedb_write_plan.js";
 import {yui_file_read, yui_files_manifest, yui_file_id_label} from "./yui_file_field.js";
 import {yui_asset_id} from "./yui_asset.js";
@@ -583,7 +585,7 @@ function build_ui(gobj)
              *  reorder this group as if they were peer actions.  */
             let $edit_button = createElement2(
                 ['button', {id: ``, class: 'button button-edit-record mr-1'}, [
-                    ['i', {class: 'yi-pen'}],
+                    yui_toolbar_icon('yi-pen'),
                     ['span',
                         {
                             class: 'is-hidden-mobile', i18n: 'edit', style: 'padding-left:5px;'
@@ -609,7 +611,7 @@ function build_ui(gobj)
             if(with_new_button) {
                 let $new_button = createElement2(
                     ['button', {id: ``, class: 'button button-new-record mr-1', disabled: true}, [
-                        ['i', {class: 'yi-plus'}],
+                        yui_toolbar_icon('yi-plus'),
                         ['span',
                             {
                                 class: 'is-hidden-mobile', i18n: 'new', style: 'padding-left:5px;'
@@ -629,7 +631,7 @@ function build_ui(gobj)
             if(with_delete_button) {
                 let $delete_button = createElement2(
                     ['button', {id: ``, class: 'button button-delete-record mr-1', disabled: true}, [
-                        ['i', {class: 'yi-trash'}],
+                        yui_toolbar_icon('yi-trash'),
                         ['span',
                             {
                                 class: 'is-hidden-mobile', i18n: 'delete', style: 'padding-left:5px;'
@@ -650,7 +652,7 @@ function build_ui(gobj)
             if(with_copy_button) {
                 let $copy_button = createElement2(
                     ['button', {id: ``, class: 'button button-copy-record mr-1', disabled: true}, [
-                        ['i', {class: 'yi-copy'}],
+                        yui_toolbar_icon('yi-copy'),
                         ['span',
                             {
                                 class: 'is-hidden-mobile', i18n: 'copy', style: 'padding-left:5px;'
@@ -671,7 +673,7 @@ function build_ui(gobj)
             if(with_paste_button) {
                 let $paste_button = createElement2(
                     ['button', {id: ``, class: 'button button-paste-record mr-1', disabled: true}, [
-                        ['i', {class: 'yi-paste'}],
+                        yui_toolbar_icon('yi-paste'),
                         ['span',
                             {
                                 class: 'is-hidden-mobile', i18n: 'paste', style: 'padding-left:5px;'
@@ -727,7 +729,7 @@ function build_ui(gobj)
                     'data-i18n-placeholder': 'search'
                 }],
                 ['span', {class: 'icon is-left'}, [
-                    ['i', {class: 'yi-magnifying-glass'}]
+                    yui_toolbar_icon('yi-magnifying-glass')
                 ]]
             ]]
         );
@@ -754,7 +756,7 @@ function build_ui(gobj)
     if(with_refresh_button) {
         let $refresh = createElement2(
             ['button', {class: 'button mr-1', title: t('refresh'), 'data-i18n-title': 'refresh'}, [
-                ['i', {class: 'yi-arrows-rotate'}],
+                yui_toolbar_icon('yi-arrows-rotate'),
                 ['span', {class: 'is-hidden-mobile', i18n: 'refresh', style: 'padding-left:5px;'}, 'refresh']
             ], {
                 'click': (event) => {
@@ -775,7 +777,7 @@ function build_ui(gobj)
             ['button', {class: 'TREEDB_TABLE_SCHEMA button mr-1',
                         title: t('schema'), 'data-i18n-title': 'schema',
                         'aria-label': t('schema'), 'data-i18n-aria-label': 'schema'}, [
-                ['i', {class: 'yi-hexagon-nodes'}],
+                yui_toolbar_icon('yi-hexagon-nodes'),
                 ['span', {class: 'is-hidden-mobile', i18n: 'schema', style: 'padding-left:5px;'}, 'schema']
             ], {
                 'click': (event) => {
@@ -796,7 +798,7 @@ function build_ui(gobj)
                         title: t('choose the columns to show'),
                         'data-i18n-title': 'choose the columns to show',
                         'aria-label': t('columns'), 'data-i18n-aria-label': 'columns'}, [
-                ['i', {class: 'yi-table'}],
+                yui_toolbar_icon('yi-table'),
                 ['span', {class: 'is-hidden-mobile', i18n: 'columns', style: 'padding-left:5px;'}, 'columns']
             ], {
                 'click': (event) => {
@@ -817,7 +819,7 @@ function build_ui(gobj)
                         title: t('download the rows loaded in this table as csv'),
                         'data-i18n-title': 'download the rows loaded in this table as csv',
                         'aria-label': t('export'), 'data-i18n-aria-label': 'export'}, [
-                ['i', {class: 'yi-download'}],
+                yui_toolbar_icon('yi-download'),
                 ['span', {class: 'is-hidden-mobile', i18n: 'export', style: 'padding-left:5px;'}, 'export']
             ], {
                 'click': (event) => {

package/src/c_yui_treedb_topics.js

@@ -60,6 +60,7 @@ import "./c_yui_treedb_topics.css";
 import {yui_shell_show_error, yui_shell_show_modal, yui_shell_popup_layer} from "./shell_modals.js";
 import {yui_shell_of, yui_shell_set_sub_routes} from "./c_yui_shell.js";
 import {nodes_answer} from "./nodes_answer.js";
+import {yui_toolbar_icon} from "./yui_toolbar.js";
 
 import {t} from "i18next";
 
@@ -273,7 +274,7 @@ function build_ui(gobj)
                     ['button', {class: 'button TREEDB_TOPICS_BACK is-hidden',
                                 title: t('topics'), 'aria-label': t('topics'),
                                 'data-i18n-title': 'topics', 'data-i18n-aria-label': 'topics'}, [
-                        ['span', {class: 'icon'}, [['i', {class: 'yi-arrow-left'}]]],
+                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-arrow-left')]],
                         ['span', {i18n: 'topics'}, 'topics']
                     ], {
                         click: (evt) => {
@@ -287,7 +288,7 @@ function build_ui(gobj)
                                 title: t('schema graph'), 'aria-label': t('schema graph'),
                                 'data-i18n-title': 'schema graph',
                                 'data-i18n-aria-label': 'schema graph'}, [
-                        ['span', {class: 'icon'}, [['i', {class: 'yi-hexagon-nodes'}]]],
+                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-hexagon-nodes')]],
                         ['span', {i18n: 'schema'}, 'schema']
                     ], {
                         click: (evt) => {
@@ -305,7 +306,7 @@ function build_ui(gobj)
                     ['div', {class: source_url?
                                 'TREEDB_TOPICS_SOURCE' : 'TREEDB_TOPICS_SOURCE is-hidden',
                              title: source_url, 'aria-label': source_url}, [
-                        ['span', {class: 'icon'}, [['i', {class: 'yi-cloudversify'}]]],
+                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-cloudversify')]],
                         ['span', {class: 'TREEDB_TOPICS_SOURCE_URL'}, source_url]
                     ]],
                     /*  Inspect the treedb's raw tranger json (whole service,
@@ -315,7 +316,7 @@ function build_ui(gobj)
                                 style: 'margin-left:auto;',
                                 title: t('raw json'), 'aria-label': t('raw json'),
                                 'data-i18n-title': 'raw json', 'data-i18n-aria-label': 'raw json'}, [
-                        ['span', {class: 'icon'}, [['i', {class: 'yi-eye'}]]],
+                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-eye')]],
                         ['span', {i18n: 'raw json'}, 'raw json']
                     ], {
                         click: (evt) => {

package/src/yui_graph_camera.js

@@ -40,37 +40,11 @@ import {createElement2, gobj_send_event} from "@yuneta/gobj-js";
 import {t} from "i18next";
 
 import {set_pressed_state} from "./lib_graph.js";
+/*  The glyph size is the TOOLBAR's, not the graph's: it is shared with
+ *  the JSON viewer and the treedb topics row, which are not graphs.  */
+import {yui_toolbar_icon} from "./yui_toolbar.js";
 
 
-/************************************************************
- *   ONE size for every glyph of a graph's toolbar ROW, in
- *   `rem` and not `em`.
- *
- *   In `em` the same declaration draws three different icons:
- *   `1.5em` is 24px inside a plain button, 18px inside an
- *   `is-small` one, and a labelled button left its icon at the
- *   inherited 16px -- so one row held 16px, 18px and 24px
- *   glyphs and looked like three toolbars pushed together.
- *   `rem` is measured against the page, so a chip that is
- *   deliberately shorter than a button still carries the same
- *   glyph.
- *
- *   20px against the row's 16px text: an icon-only button is
- *   legible at half its 40px height, and beside a label the
- *   glyph reads as a marker rather than as a second word.
- ************************************************************/
-export const YUI_GRAPH_ICON_SIZE = "1.25rem";
-
-/*  The `<i>` spec of a toolbar glyph, at that one size.  */
-export function yui_graph_icon(icon_class, extra_style)
-{
-    return ['i', {
-        class: icon_class,
-        style: `font-size:${YUI_GRAPH_ICON_SIZE}; line-height:1; color:inherit;` +
-               (extra_style || ''),
-    }];
-}
-
 /************************************************************
  *   One icon button that fires `event_name`.
  ************************************************************/
@@ -80,7 +54,7 @@ function camera_button(gobj, icon, event_name, label_key, wide, extra_style)
                        style: {height: wide, width: '2.5em'},
                        title: t(label_key), 'data-i18n-title': label_key,
                        'aria-label': t(label_key), 'data-i18n-aria-label': label_key},
-        yui_graph_icon(icon, extra_style),
+        yui_toolbar_icon(icon, extra_style),
         {
             click: (evt) => {
                 evt.stopPropagation();

package/src/yui_toolbar.js

@@ -16,6 +16,41 @@ import {
 
 import "./yui_toolbar.css"; // Must be in index.js ?
 
+
+/************************************************************
+ *  ONE size for every glyph of a view's toolbar, in `rem`.
+ *
+ *  It lives here because it belongs to the TOOLBAR and not to
+ *  any one view: it was born in the graph rows (7.23.86) and the
+ *  JSON viewer beside them still drew 16px, which is the same
+ *  drift one level up.
+ *
+ *  `rem` and not `em` is the whole lesson: `em` is measured
+ *  against the button, so one declaration draws three icons --
+ *  `1.5em` is 24px in a plain button, 18px in an `is-small`
+ *  chip, and a labelled button that declares nothing keeps the
+ *  inherited 16px. `rem` is measured against the page, so a
+ *  chip deliberately shorter than a button still carries the
+ *  same glyph.
+ *
+ *  20px against a row's 16px text: an icon-only button is
+ *  legible at half its 40px height, and beside a label the
+ *  glyph reads as a marker rather than as a second word. The
+ *  app BAR is a different band and keeps its own, bigger size
+ *  (`.yui-toolbar-item .icon`, 1.35rem on 44px items).
+ ************************************************************/
+const YUI_TOOLBAR_ICON_SIZE = "1.25rem";
+
+/*  The `<i>` spec of a toolbar glyph, at that one size.  */
+function yui_toolbar_icon(icon_class, extra_style)
+{
+    return ['i', {
+        class: icon_class,
+        style: `font-size:${YUI_TOOLBAR_ICON_SIZE}; line-height:1; color:inherit;` +
+               (extra_style || ''),
+    }];
+}
+
 function yui_toolbar(attrs={}, items = [])
 {
     /*
@@ -125,4 +160,4 @@ function yui_toolbar(attrs={}, items = [])
     return $toolbar;
 }
 
-export {yui_toolbar};
+export {yui_toolbar, yui_toolbar_icon, YUI_TOOLBAR_ICON_SIZE};