@yuneta/gobj-ui 7.23.86 → 7.23.88

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.
@@ -1525,6 +1529,16 @@ forwards them as `EV_SET_HIDDEN_TOPICS`, `EV_SET_MAIN_TOPIC`,
 `main topic`, `highlight topic`, `loose records`, `hidden topics`; `legend`
 is no longer used.
 
+**The main topic's chip is not a disabled button** (`7.23.88`): it cannot be
+hidden, so its body is a `div` wearing the `.button` skin — bold, at full
+strength, with a gold star — and not a toggle painted at Bulma's half
+opacity, which is what made the trunk of the tree the weakest chip of the
+strip. The star takes `--bulma-warning-on-scheme` and not `--bulma-warning`:
+the raw brand gold is 1.75:1 on a light ground. The count dropped
+`has-text-grey` (3.86:1 in dark) for the chip's own colour at 80%, and the
+chips dropped `is-small`: the strip scrolls sideways, so it never had to fit
+a chip per topic on one row.
+
 **The strip is repainted on a language change** (`7.23.84`): its chips are
 drawn on `EV_LEGEND_STATE`, which arrives after a reconcile and not when the
 language changes, and a chip's title says an ACTION that depends on the

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",
@@ -61944,7 +61960,7 @@ function build_ui$3(gobj) {
 				"div",
 				{
 					class: "GRAPH_LEGEND is-flex-grow-0",
-					style: "display:flex; flex-wrap:nowrap; align-items:center; gap:.35rem; padding:.3rem .5rem; overflow-x:auto; min-height:2.2rem;"
+					style: "display:flex; flex-wrap:nowrap; align-items:center; gap:.35rem; padding:.3rem .5rem; overflow-x:auto; min-height:2.9rem;"
 				},
 				[]
 			],
@@ -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,9 +63274,11 @@ 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;";
+var LEGEND_COUNT_STYLE = "margin-left:.4rem; font-size:.875rem; opacity:.8;";
+var LEGEND_MAIN_NAME_STYLE = "font-size:1rem; line-height:1.2; font-weight:700;";
+var LEGEND_STAR_MAIN_STYLE = LEGEND_GLYPH_STYLE + " color:var(--bulma-warning-on-scheme, var(--bulma-warning, #ffdd57));";
 function refresh_legend(gobj) {
 	let priv = gobj.priv;
 	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
@@ -63286,20 +63304,20 @@ function refresh_legend(gobj) {
 			"span",
 			{
 				class: "GRAPH_LEGEND_NAME",
-				style: LEGEND_NAME_STYLE + (hidden ? " text-decoration:line-through; opacity:.6;" : "")
+				style: (is_main ? LEGEND_MAIN_NAME_STYLE : LEGEND_NAME_STYLE) + (hidden ? " text-decoration:line-through; opacity:.6;" : "")
 			},
 			topic_name
 		], [
 			"span",
 			{
-				class: "GRAPH_LEGEND_COUNT has-text-grey",
+				class: "GRAPH_LEGEND_COUNT",
 				style: LEGEND_COUNT_STYLE
 			},
 			hidden ? `${entry.total}` : `${entry.visible}/${entry.total}`
 		]);
 		let body_key = is_main ? "main topic" : hidden ? "show topic" : "hide topic";
 		let body_attrs = {
-			class: "GRAPH_LEGEND_ITEM button is-small" + (focused ? " GRAPH_LEGEND_FOCUSED" : "") + (is_main ? " GRAPH_LEGEND_MAIN" : ""),
+			class: "GRAPH_LEGEND_ITEM button" + (focused ? " GRAPH_LEGEND_FOCUSED" : "") + (is_main ? " GRAPH_LEGEND_MAIN" : ""),
 			type: "button",
 			style: "gap:0; flex:0 0 auto;" + (focused ? " box-shadow: inset 0 0 0 2px var(--bulma-text, #2e333d);" : ""),
 			title: (0, i18next.t)(body_key),
@@ -63307,8 +63325,15 @@ function refresh_legend(gobj) {
 			"aria-label": topic_name,
 			"aria-pressed": hidden ? "false" : "true"
 		};
-		if (is_main) body_attrs.disabled = "disabled";
-		let $body = (0, _yuneta_gobj_js.createElement2)([
+		let $body;
+		if (is_main) {
+			delete body_attrs["aria-pressed"];
+			$body = (0, _yuneta_gobj_js.createElement2)([
+				"div",
+				body_attrs,
+				controls
+			]);
+		} else $body = (0, _yuneta_gobj_js.createElement2)([
 			"button",
 			body_attrs,
 			controls,
@@ -63324,9 +63349,9 @@ function refresh_legend(gobj) {
 		if (is_main && state.main_chosen) extras.push([
 			"button",
 			{
-				class: "GRAPH_LEGEND_STAR button is-small pressed_state",
+				class: "GRAPH_LEGEND_STAR button pressed_state",
 				type: "button",
-				style: "padding:0 .4rem;",
+				style: "padding:0 .5rem;",
 				title: (0, i18next.t)("main topic"),
 				"data-i18n-title": "main topic",
 				"aria-label": (0, i18next.t)("main topic"),
@@ -63335,7 +63360,7 @@ function refresh_legend(gobj) {
 			},
 			[[
 				"span",
-				{ style: LEGEND_GLYPH_STYLE },
+				{ style: LEGEND_STAR_MAIN_STYLE },
 				"★"
 			]],
 			{ click: (evt) => {
@@ -63349,23 +63374,23 @@ function refresh_legend(gobj) {
 		else if (is_main) extras.push([
 			"span",
 			{
-				class: "GRAPH_LEGEND_STAR button is-small is-static",
-				style: "padding:0 .4rem;",
+				class: "GRAPH_LEGEND_STAR button",
+				style: "padding:0 .5rem; cursor:default;",
 				title: (0, i18next.t)("main topic"),
 				"data-i18n-title": "main topic"
 			},
 			[[
 				"span",
-				{ style: LEGEND_GLYPH_STYLE },
+				{ style: LEGEND_STAR_MAIN_STYLE },
 				"★"
 			]]
 		]);
 		else if (!hidden) extras.push([
 			"button",
 			{
-				class: "GRAPH_LEGEND_STAR button is-small",
+				class: "GRAPH_LEGEND_STAR button",
 				type: "button",
-				style: "padding:0 .4rem;",
+				style: "padding:0 .5rem;",
 				title: (0, i18next.t)("main topic"),
 				"data-i18n-title": "main topic",
 				"aria-label": (0, i18next.t)("main topic"),
@@ -63387,9 +63412,9 @@ function refresh_legend(gobj) {
 		if (!hidden && entry.linked && entry.loose > 0) extras.push([
 			"button",
 			{
-				class: "GRAPH_LEGEND_LOOSE button is-small" + (entry.loose_shown ? " pressed_state" : ""),
+				class: "GRAPH_LEGEND_LOOSE button" + (entry.loose_shown ? " pressed_state" : ""),
 				type: "button",
-				style: "padding:0 .45rem;",
+				style: "padding:0 .55rem;",
 				title: (0, i18next.t)("loose records"),
 				"data-i18n-title": "loose records",
 				"aria-label": (0, i18next.t)("loose records"),
@@ -63408,9 +63433,9 @@ function refresh_legend(gobj) {
 		if (!hidden) extras.push([
 			"button",
 			{
-				class: "GRAPH_LEGEND_FOCUS button is-small" + (focused ? " pressed_state" : ""),
+				class: "GRAPH_LEGEND_FOCUS button" + (focused ? " pressed_state" : ""),
 				type: "button",
-				style: "padding:0 .4rem;",
+				style: "padding:0 .5rem;",
 				title: (0, i18next.t)("highlight topic"),
 				"data-i18n-title": "highlight topic",
 				"aria-label": (0, i18next.t)("highlight topic"),