@yuneta/gobj-ui 5.2.1 → 5.3.0

package/package.json

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

package/src/c_yui_json.css

@@ -16,6 +16,7 @@
     --json-null: #475ed0;
     --json-key: var(--bulma-text-strong, #1a1a1a);
     --json-row-hover: rgba(0, 0, 0, 0.05);
+    --json-guide: #b5b5b5;
 }
 
 :root[data-theme="dark"] .C_YUI_JSON,
@@ -26,6 +27,7 @@
     --json-null: #90a4f4;
     --json-key: var(--bulma-text-strong, #e6e6e6);
     --json-row-hover: rgba(255, 255, 255, 0.06);
+    --json-guide: #5a5a5a;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -36,6 +38,7 @@
         --json-null: #90a4f4;
         --json-key: var(--bulma-text-strong, #e6e6e6);
         --json-row-hover: rgba(255, 255, 255, 0.06);
+        --json-guide: #5a5a5a;
     }
 }
 
@@ -55,10 +58,27 @@
     align-items: flex-start;
     white-space: pre;
     padding-right: 0.5rem;
-}
-
+    /*  Depth guides.  The rows are SIBLINGS with growing padding, not
+     *  nested boxes, so there is no element to hang a border-left on:
+     *  the guides are painted as a repeating gradient across the row's
+     *  own indentation, one line per ancestor level.  The tile is
+     *  parked at the first level's column and its WIDTH is set per row
+     *  (row_indent), so a row only ever draws the levels above it.
+     *  Four characters, like every other indentation. */
+    background-image: repeating-linear-gradient(
+        to right,
+        var(--json-guide) 0 1px,
+        transparent 1px 4ch
+    );
+    background-position: 0.4ch 0;
+    background-repeat: no-repeat;
+}
+
+/*  background-COLOR, never the `background` shorthand: the shorthand
+ *  resets background-image and the depth guides vanish under the
+ *  cursor, on the one row the reader is looking at. */
 .C_YUI_JSON .JSON_ROW:hover {
-    background: var(--json-row-hover);
+    background-color: var(--json-row-hover);
 }
 
 .C_YUI_JSON .JSON_ROW_BODY {

package/src/c_yui_json.js

@@ -548,11 +548,25 @@ function leaf_row(key, value, depth)
 }
 
 /************************************************************
- *   Depth indentation (inline style keeps it CSS-framework free)
+ *   Depth indentation (inline style keeps it CSS-framework free).
+ *
+ *   FOUR characters per level, house rule: structure is read as
+ *   indentation, and it has to be the same four everywhere — this
+ *   viewer, the raw dump behind it, the site map's tree.  `ch` is
+ *   the character width of the row's own font, so the rows line up
+ *   with the monospace text they carry instead of drifting from it
+ *   at some zoom level.
  ************************************************************/
+const INDENT_CH = 4;
+const INDENT_PAD = 0.4;
+
 function row_indent(depth)
 {
-    return 'padding-left:' + (0.4 + depth * 1.1) + 'em;';
+    /*  `background-size` bounds the depth guides painted by the CSS to
+     *  this row's own indentation: one vertical line per ancestor
+     *  level, none across the content. */
+    return 'padding-left:' + (INDENT_PAD + depth * INDENT_CH) + 'ch;' +
+           'background-size:' + (depth * INDENT_CH) + 'ch 100%;';
 }
 
 /************************************************************
@@ -760,7 +774,7 @@ function ac_copy_all(gobj, event, kw, src)
     if(priv.root === null || priv.root === undefined) {
         return 0;
     }
-    let text = JSON.stringify(priv.root, null, 2);
+    let text = JSON.stringify(priv.root, null, 4);
     if(navigator.clipboard && navigator.clipboard.writeText) {
         navigator.clipboard.writeText(text).catch(function(e) {
             log_error(`${GCLASS_NAME}: clipboard write failed: ${e}`);

package/src/c_yui_nav.js

@@ -15,6 +15,13 @@
  *          "cards"      — grid of tappable cards (section-index landing;
  *                         mounted as a stage view by C_YUI_SHELL when a
  *                         primary item declares submenu.index)
+ *          "breadcrumb" — the PATH as one line ("Cards › Energy › South
+ *                         hall › Meter 3"), each crumb a link to that
+ *                         level.  Unlike every other layout its items
+ *                         are not a node's children but the trail down
+ *                         to where the user is: the second way to show
+ *                         depth, for when stacking one strip per level
+ *                         costs more vertical room than it is worth.
  *          "backbar"    — single "← <section>" link back to the section
  *                         index; the mobile replacement of the tab strip
  *                         for submenu.index sections (the shell collapses
@@ -76,7 +83,7 @@ const GCLASS_NAME = "C_YUI_NAV";
 
 const SUPPORTED_LAYOUTS = [
     "vertical", "icon-bar", "tabs", "drawer", "submenu", "accordion", "cards",
-    "backbar"
+    "backbar", "breadcrumb"
 ];
 
 /*  Decorative items have no `route` and never participate in
@@ -220,6 +227,7 @@ function build_ui(gobj)
         case "accordion":  $container = render_accordion(gobj, items); break;
         case "cards":      $container = render_cards(gobj, items);    break;
         case "backbar":    $container = render_backbar(gobj);         break;
+        case "breadcrumb": $container = render_breadcrumb(gobj, items); break;
         default:           $container = render_vertical(gobj, items);
     }
     $container.setAttribute("data-nav-zone", zone);
@@ -254,6 +262,13 @@ function build_ui(gobj)
     wire_clicks(gobj, $container);
 
     gobj_write_attr(gobj, "$container", $container);
+
+    /*  A nav can be CREATED already knowing which item is active (a
+     *  C_YUI_NODE builds its chrome for the child it is about to show).
+     *  Applying the highlight only on rebuild lost it for every such
+     *  nav — the shell never noticed because it always follows creation
+     *  with an EV_ROUTE_CHANGED. */
+    apply_active_route(gobj);
 }
 
 /************************************************************
@@ -286,8 +301,6 @@ function rebuild(gobj)
     if($old && $old.parentNode) {
         $old.parentNode.removeChild($old);
     }
-
-    apply_active_route(gobj);
 }
 
 /************************************************************
@@ -432,6 +445,53 @@ function render_cards(gobj, items)
  *  collapses the whole secondary zone (tabs and cards never
  *  coexist), so the bar needs no self-hiding logic.
  ************************************************************/
+/************************************************************
+ *  breadcrumb: the trail to here, one line.
+ *
+ *  Bulma's own markup (nav.breadcrumb > ul > li, separators drawn by
+ *  CSS), with the SAME data-route/data-item-id contract as every
+ *  other layout — so the delegated click handler and the active
+ *  highlight work unchanged, and the last crumb marks itself through
+ *  `active_route` like a tab does.
+ ************************************************************/
+function render_breadcrumb(gobj, items)
+{
+    let show_label = gobj_read_attr(gobj, "show_label");
+    let lis = [];
+
+    for(let it of (items || [])) {
+        if(is_decorative(it)) {
+            continue;
+        }
+        let children = [];
+        if(it.icon) {
+            children.push(["span", {class: "icon is-small"},
+                ["i", {class: it.icon, "aria-hidden": "true"}]]);
+        }
+        if(show_label !== false) {
+            let label = it.name || it.id || "";
+            children.push(["span", {class: "yui-nav-label", i18n: label}, label]);
+        }
+        let a_attrs = {
+            class: "yui-nav-item yui-nav-crumb",
+            href: it.route ? "#" + it.route : "#",
+            "data-item-id": it.id,
+            "data-route": it.route || "",
+            "data-disabled": it.disabled ? "1" : "0"
+        };
+        if(it.name) {
+            a_attrs["aria-label"] = it.name;
+            a_attrs["data-i18n-aria-label"] = it.name;
+        }
+        lis.push(["li", {}, [["a", a_attrs, children]]]);
+    }
+
+    return createElement2(
+        ["nav", {class: "breadcrumb is-small", "aria-label": "breadcrumbs"},
+            [["ul", {}, lis]]]
+    );
+}
+
 function render_backbar(gobj)
 {
     let back_route = gobj_read_attr(gobj, "back_route") || "";

package/src/c_yui_node.css

@@ -0,0 +1,77 @@
+/***********************************************************************
+ *          c_yui_node.css
+ *
+ *      Layout of C_YUI_NODE — deliberately thin: the projections are
+ *      C_YUI_NAV renders and bring their own styling (cards, tabs,
+ *      backbar…), so all this file owns is the vertical stack
+ *      chrome / body and the nesting that lets a deep branch scroll.
+ *
+ *      No colours beyond Bulma variables, and no transitions (house
+ *      rule): a level change appears instantly.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+
+.NODE_VIEW {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+    width: 100%;
+}
+
+/*--- chrome: the parent's projection while a child is showing ---*/
+.NODE_CHROME {
+    flex: 0 0 auto;
+}
+.NODE_CHROME:empty {
+    display: none;
+}
+
+/*--- body: content, index projection, or the active child ---*/
+.NODE_BODY {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+.NODE_CONTENT {
+    flex: 0 0 auto;
+}
+
+/*  The index projection (a card grid, a list…) is the page when this
+ *  node is the tip: it takes the remaining height and scrolls. */
+.NODE_INDEX {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+}
+
+/*  A node whose index projection targets a ZONE (the root, painting
+ *  the rail) leaves this empty — an empty flex child would still eat
+ *  the body's height. */
+.NODE_INDEX:empty {
+    display: none;
+}
+
+/*  A node with BOTH content and children: the content keeps its
+ *  natural height and the projection sits under it. */
+.NODE_CONTENT + .NODE_INDEX {
+    border-top: 1px solid var(--bulma-border-weak, #dbdbdb);
+}
+
+/*  The active child's own NODE_VIEW nests here — min-height:0 all the
+ *  way down or an inner overflow-y never gets a bounded height. */
+.NODE_CHILD {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+.NODE_EMPTY {
+    padding: 1rem;
+    color: var(--bulma-text-weak, #7a7a7a);
+}