@yuneta/gobj-ui 7.23.73 → 7.23.74

package/dist/gobj-ui.cjs.js

@@ -27370,7 +27370,7 @@ function fold_reveal(model, state, node_key) {
 /***********************************************************************
 *          treedb_layout.js
 *
-*      Two layouts made for a treedb, and nothing else.
+*      Three layouts made for a treedb, and nothing else.
 *
 *      What a treedb graph IS, once it is folded (treedb_fold_model.js):
 *      a forest read left to right. A main topic is a tree (places:
@@ -27394,8 +27394,9 @@ function fold_reveal(model, state, node_key) {
 *      - the force family scatters a tree, which is the pile with
 *        physics.
 *
-*      So: a tidy tree (`tree`) and an outline (`outline`), both fed by
-*      the SAME spanning tree, chosen deterministically:
+*      So: a tidy tree (`tree`), an outline (`outline`) and a radial
+*      tree (`radial`), all three fed by the SAME spanning tree, chosen
+*      deterministically:
 *
 *      - roots are the nodes with no incoming edge, in node order;
 *      - a node belongs to the FIRST parent that reaches it in a
@@ -27418,8 +27419,13 @@ function fold_reveal(model, state, node_key) {
 *      viewer draws, and what a treedb is when read as one. Tall, but
 *      nothing is ever beside anything: the reader scrolls a list.
 *
+*      `radial`: the root in the middle and a ring per depth, each
+*      subtree owning a sector proportional to its leaves; the radius
+*      of a ring grows until its neighbours sit side by side, so
+*      nothing overlaps by construction (see `layout_radial`).
+*
 *      Pure: takes plain nodes and edges, returns positions. The G6
-*      classes in c_g6_nodes_tree.js are two thin adapters over it.
+*      classes in c_g6_nodes_tree.js are three thin adapters over it.
 *
 *          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
@@ -62175,9 +62181,9 @@ function refresh_legend(gobj) {
 			hidden ? `${entry.total}` : `${entry.visible}/${entry.total}`
 		]);
 		let body_attrs = {
-			class: "GRAPH_LEGEND_ITEM button is-small" + (focused ? " pressed_state" : "") + (is_main ? " GRAPH_LEGEND_MAIN" : ""),
+			class: "GRAPH_LEGEND_ITEM button is-small" + (focused ? " GRAPH_LEGEND_FOCUSED" : "") + (is_main ? " GRAPH_LEGEND_MAIN" : ""),
 			type: "button",
-			style: "gap:0; flex:0 0 auto;",
+			style: "gap:0; flex:0 0 auto;" + (focused ? " box-shadow: inset 0 0 0 2px var(--bulma-text, #2e333d);" : ""),
 			title: is_main ? (0, i18next.t)("main topic") : hidden ? (0, i18next.t)("show topic") : (0, i18next.t)("hide topic"),
 			"aria-label": topic_name,
 			"aria-pressed": hidden ? "false" : "true"

package/dist/gobj-ui.es.js

@@ -27365,7 +27365,7 @@ function fold_reveal(model, state, node_key) {
 /***********************************************************************
 *          treedb_layout.js
 *
-*      Two layouts made for a treedb, and nothing else.
+*      Three layouts made for a treedb, and nothing else.
 *
 *      What a treedb graph IS, once it is folded (treedb_fold_model.js):
 *      a forest read left to right. A main topic is a tree (places:
@@ -27389,8 +27389,9 @@ function fold_reveal(model, state, node_key) {
 *      - the force family scatters a tree, which is the pile with
 *        physics.
 *
-*      So: a tidy tree (`tree`) and an outline (`outline`), both fed by
-*      the SAME spanning tree, chosen deterministically:
+*      So: a tidy tree (`tree`), an outline (`outline`) and a radial
+*      tree (`radial`), all three fed by the SAME spanning tree, chosen
+*      deterministically:
 *
 *      - roots are the nodes with no incoming edge, in node order;
 *      - a node belongs to the FIRST parent that reaches it in a
@@ -27413,8 +27414,13 @@ function fold_reveal(model, state, node_key) {
 *      viewer draws, and what a treedb is when read as one. Tall, but
 *      nothing is ever beside anything: the reader scrolls a list.
 *
+*      `radial`: the root in the middle and a ring per depth, each
+*      subtree owning a sector proportional to its leaves; the radius
+*      of a ring grows until its neighbours sit side by side, so
+*      nothing overlaps by construction (see `layout_radial`).
+*
 *      Pure: takes plain nodes and edges, returns positions. The G6
-*      classes in c_g6_nodes_tree.js are two thin adapters over it.
+*      classes in c_g6_nodes_tree.js are three thin adapters over it.
 *
 *          Copyright (c) 2026, ArtGins.
 *          All Rights Reserved.
@@ -62170,9 +62176,9 @@ function refresh_legend(gobj) {
 			hidden ? `${entry.total}` : `${entry.visible}/${entry.total}`
 		]);
 		let body_attrs = {
-			class: "GRAPH_LEGEND_ITEM button is-small" + (focused ? " pressed_state" : "") + (is_main ? " GRAPH_LEGEND_MAIN" : ""),
+			class: "GRAPH_LEGEND_ITEM button is-small" + (focused ? " GRAPH_LEGEND_FOCUSED" : "") + (is_main ? " GRAPH_LEGEND_MAIN" : ""),
 			type: "button",
-			style: "gap:0; flex:0 0 auto;",
+			style: "gap:0; flex:0 0 auto;" + (focused ? " box-shadow: inset 0 0 0 2px var(--bulma-text, #2e333d);" : ""),
 			title: is_main ? t("main topic") : hidden ? t("show topic") : t("hide topic"),
 			"aria-label": topic_name,
 			"aria-pressed": hidden ? "false" : "true"

package/package.json

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

package/src/c_yui_treedb_graph.js

@@ -2348,6 +2348,18 @@ const LEGEND_GLYPH_STYLE = 'font-size:1.5em; line-height:1; color:inherit;';
 const LEGEND_NAME_STYLE  = 'font-size:1.2em; line-height:1.2;';
 const LEGEND_COUNT_STYLE = 'margin-left:.4rem; font-size:1em;';
 
+/*  The focused chip is HIGHLIGHTED, not pressed. The body of a chip is
+ *  the show/hide toggle, and that is what its `aria-pressed` says;
+ *  the focus belongs to the crosshair next to it, which is the button
+ *  that looks pressed. 7.23.73 painted the body with `pressed_state`
+ *  as well, so the eye and the screen reader read two different
+ *  states off one button -- and the count, `has-text-grey` by Bulma's
+ *  `!important`, sat grey on the near-black at 2.7:1. A ring inside
+ *  the border marks the chip without repainting anything in it.
+ *  Inset, because a chip lives in a `has-addons` group and a shadow
+ *  outside the box is clipped by its neighbours.  */
+const LEGEND_FOCUSED_STYLE = 'box-shadow: inset 0 0 0 2px var(--bulma-text, #2e333d);';
+
 function refresh_legend(gobj)
 {
     let priv = gobj.priv;
@@ -2412,10 +2424,10 @@ function refresh_legend(gobj)
          *  every chip was dead except its star.  */
         let body_attrs = {
             class: 'GRAPH_LEGEND_ITEM button is-small' +
-                   (focused? ' pressed_state' : '') +
+                   (focused? ' GRAPH_LEGEND_FOCUSED' : '') +
                    (is_main? ' GRAPH_LEGEND_MAIN' : ''),
             type: 'button',
-            style: 'gap:0; flex:0 0 auto;',
+            style: 'gap:0; flex:0 0 auto;' + (focused? ' ' + LEGEND_FOCUSED_STYLE : ''),
             title: is_main? t('main topic') : (hidden? t('show topic') : t('hide topic')),
             'aria-label': topic_name,
             'aria-pressed': hidden? 'false' : 'true',

package/src/treedb_layout.js

@@ -1,7 +1,7 @@
 /***********************************************************************
  *          treedb_layout.js
  *
- *      Two layouts made for a treedb, and nothing else.
+ *      Three layouts made for a treedb, and nothing else.
  *
  *      What a treedb graph IS, once it is folded (treedb_fold_model.js):
  *      a forest read left to right. A main topic is a tree (places:
@@ -25,8 +25,9 @@
  *      - the force family scatters a tree, which is the pile with
  *        physics.
  *
- *      So: a tidy tree (`tree`) and an outline (`outline`), both fed by
- *      the SAME spanning tree, chosen deterministically:
+ *      So: a tidy tree (`tree`), an outline (`outline`) and a radial
+ *      tree (`radial`), all three fed by the SAME spanning tree, chosen
+ *      deterministically:
  *
  *      - roots are the nodes with no incoming edge, in node order;
  *      - a node belongs to the FIRST parent that reaches it in a
@@ -49,8 +50,13 @@
  *      viewer draws, and what a treedb is when read as one. Tall, but
  *      nothing is ever beside anything: the reader scrolls a list.
  *
+ *      `radial`: the root in the middle and a ring per depth, each
+ *      subtree owning a sector proportional to its leaves; the radius
+ *      of a ring grows until its neighbours sit side by side, so
+ *      nothing overlaps by construction (see `layout_radial`).
+ *
  *      Pure: takes plain nodes and edges, returns positions. The G6
- *      classes in c_g6_nodes_tree.js are two thin adapters over it.
+ *      classes in c_g6_nodes_tree.js are three thin adapters over it.
  *
  *          Copyright (c) 2026, ArtGins.
  *          All Rights Reserved.