@yuneta/gobj-ui 5.4.0 → 5.6.0

package/index.js

@@ -24,6 +24,11 @@ export { register_c_yui_uplot } from "./src/c_yui_uplot.js";
 export { register_c_yui_json_graph } from "./src/c_yui_json_graph.js";
 export { register_c_yui_json } from "./src/c_yui_json.js";
 export { register_c_yui_gobj_tree_js } from "./src/c_yui_gobj_tree_js.js";
+export {
+    register_c_yui_service_view,
+    yui_mount_service_view,
+    expose_view_container,
+} from "./src/c_yui_service_view.js";
 
 /*
  *  Declarative shell + menu navigation (new in v7.4)
@@ -41,6 +46,7 @@ export {
     yui_shell_set_translator,
     yui_shell_set_connection_state,
     yui_shell_set_toolbar_item_icon,
+    yui_shell_set_toolbar_item_badge,
     yui_shell_close_dropdown,
     yui_shell_register_event_handler,
     yui_shell_set_sub_routes,

package/package.json

@@ -1,47 +1,47 @@
 {
-    "name": "@yuneta/gobj-ui",
-    "version": "5.4.0",
-    "type": "module",
-    "main": "dist/gobj-ui.cjs.js",
-    "module": "dist/gobj-ui.es.js",
-    "exports": {
-        ".": {
-            "import": "./dist/gobj-ui.es.js",
-            "require": "./dist/gobj-ui.cjs.js"
-        },
-        "./index.js": "./index.js",
-        "./vite-plugin-yuneta-html.js": "./vite-plugin-yuneta-html.js",
-        "./src/*": "./src/*"
+  "name": "@yuneta/gobj-ui",
+  "version": "5.6.0",
+  "type": "module",
+  "main": "dist/gobj-ui.cjs.js",
+  "module": "dist/gobj-ui.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/gobj-ui.es.js",
+      "require": "./dist/gobj-ui.cjs.js"
     },
-    "files": [
-        "dist/gobj-ui.es.js",
-        "dist/gobj-ui.cjs.js",
-        "index.js",
-        "src/",
-        "vite-plugin-yuneta-html.js"
-    ],
-    "description": "Yuneta UI Library — the active line: declarative shell (C_YUI_SHELL+NAV+PAGER+WIZARD) + windows, TreeDB views, forms, charts and maps.  Consumed by wattyzer and the yunetas JS yunos (gui_agent, gui_treedb).  The frozen legacy GClass GUI stack (C_YUI_MAIN/TABS/ROUTING) lives on the v1 branch, npm dist-tag 'legacy' (consumed by estadodelaire and hidraulia).",
-    "scripts": {
-        "build": "vite build",
-        "test": "vitest run",
-        "prepublishOnly": "npm run build"
-    },
-    "devDependencies": {
-        "@rollup/plugin-terser": "^1.0.0",
-        "@vitest/coverage-v8": "^4.1.10",
-        "@yuneta/gobj-js": "^7.8.7",
-        "vite": "^8.1.5",
-        "vitest": "^4.1.10"
-    },
-    "peerDependencies": {
-        "@antv/g6": "^5.1.0",
-        "@yuneta/gobj-js": "^7.8.7",
-        "bulma": "^1.0.4",
-        "i18next": "^26.3.6",
-        "maplibre-gl": "^6.0.0",
-        "tabulator-tables": "^6.5.2",
-        "tom-select": "^2.6.2",
-        "uplot": "^1.6.32",
-        "vanilla-jsoneditor": "^3.13.0"
-    }
+    "./index.js": "./index.js",
+    "./vite-plugin-yuneta-html.js": "./vite-plugin-yuneta-html.js",
+    "./src/*": "./src/*"
+  },
+  "files": [
+    "dist/gobj-ui.es.js",
+    "dist/gobj-ui.cjs.js",
+    "index.js",
+    "src/",
+    "vite-plugin-yuneta-html.js"
+  ],
+  "description": "Yuneta UI Library — the active line: declarative shell (C_YUI_SHELL+NAV+PAGER+WIZARD) + windows, TreeDB views, forms, charts and maps.  Consumed by wattyzer and the yunetas JS yunos (gui_agent, gui_treedb).  The frozen legacy GClass GUI stack (C_YUI_MAIN/TABS/ROUTING) lives on the v1 branch, npm dist-tag 'legacy' (consumed by estadodelaire and hidraulia).",
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^1.0.0",
+    "@vitest/coverage-v8": "^4.1.10",
+    "@yuneta/gobj-js": "^7.8.7",
+    "vite": "^8.1.5",
+    "vitest": "^4.1.10"
+  },
+  "peerDependencies": {
+    "@antv/g6": "^5.1.0",
+    "@yuneta/gobj-js": "^7.8.7",
+    "bulma": "^1.0.4",
+    "i18next": "^26.3.6",
+    "maplibre-gl": "^6.0.0",
+    "tabulator-tables": "^6.5.2",
+    "tom-select": "^2.6.2",
+    "uplot": "^1.6.32",
+    "vanilla-jsoneditor": "^3.13.0"
+  }
 }

package/src/c_yui_nav.js

@@ -32,7 +32,12 @@
  *      container; build_ui re-applies them on every rebuild.
  *
  *      Each item supports:
- *          id, name, icon (CSS class or svg id), route, badge, disabled
+ *          id, name, icon (CSS class or svg id), route, disabled
+ *          (`badge` was listed here for a long time and NOTHING ever
+ *           rendered it — a menu item cannot carry a count today. The
+ *           toolbar can: `badge` on a toolbar item plus
+ *           yui_shell_set_toolbar_item_badge(). Implement it here the
+ *           day a menu entry needs one, rather than re-listing it.)
  *          class    — extra CSS class(es) on the item (tabs layout), e.g.
  *                     a per-item state colour like "yui-nav-disconnected"
  *          closable — render a trailing ✕ that emits EV_NAV_ITEM_CLOSE

package/src/c_yui_node.js

@@ -137,6 +137,7 @@ import {
     yui_shell_zone,
     yui_shell_navigate,
     yui_shell_set_sub_routes,
+    yui_shell_translate,
 } from "./c_yui_shell.js";
 
 import "./c_yui_node.css";
@@ -582,6 +583,30 @@ function walk_path(node, path)
     return {node: g, missing: segs.slice(i)};
 }
 
+/************************************************************
+ *  Translate a subtree this node just built.
+ *
+ *  A node renders its chrome WHEN YOU WALK INTO IT, long after
+ *  the host's one-shot refresh_language over the shell tree, and
+ *  its zone navs are appended into shell zones, outside this
+ *  node's own $container.  Neither pass reaches them, so without
+ *  this every strip renders its raw i18n key: `treedb`,
+ *  `central database`, `data` in lower-case English next to a
+ *  translated menu — which reads as a MISSING key and sent more
+ *  than one person looking for the wrong bug.
+ *
+ *  This is library-built DOM, so it goes through the shell's
+ *  registered translator.  What a node MOUNTS is not ours: an app
+ *  view gclass translates its own DOM.
+ ************************************************************/
+function translate_own_dom(gobj, $el)
+{
+    if(!$el) {
+        return;
+    }
+    yui_shell_translate(yui_shell_of(gobj), $el);
+}
+
 /************************************************************
  *  Destroy the C_YUI_NAV gobjs rendering this node's projection.
  ************************************************************/
@@ -669,6 +694,7 @@ function render_projection(gobj, mode, $where, active_route, active_id, zones_on
         let $nav = gobj_read_attr(nav, "$container");
         if($nav) {
             $target.appendChild($nav);
+            translate_own_dom(gobj, $nav);
         }
         priv.navs.push(nav);
         i++;
@@ -716,11 +742,14 @@ function project_into_zone(gobj, render, items, active_route, active_id)
         let $nav = gobj_read_attr(nav, "$container");
         if($nav) {
             $zone.appendChild($nav);
+            translate_own_dom(gobj, $nav);
         }
         priv.zone_navs[key] = nav;
         priv.zone_sig[key] = sig;
     } else if(priv.zone_sig[key] !== sig) {
         gobj_send_event(nav, "EV_SET_ITEMS", {items: items}, gobj);
+        /*  EV_SET_ITEMS rebuilt the nav's DOM: translate it again. */
+        translate_own_dom(gobj, gobj_read_attr(nav, "$container"));
         priv.zone_sig[key] = sig;
     }
 
@@ -821,10 +850,12 @@ function render_self(gobj)
     }
 
     if(!view) {
-        priv.$body.appendChild(createElement2(
+        let $empty = createElement2(
             ["div", {class: "NODE_EMPTY", i18n: "nothing here yet"},
                 "Nothing here yet."]
-        ));
+        );
+        priv.$body.appendChild($empty);
+        translate_own_dom(gobj, $empty);
     }
 }
 
@@ -917,6 +948,7 @@ function render_path(gobj, $where)
         let $nav = gobj_read_attr(nav, "$container");
         if($nav) {
             $where.appendChild($nav);
+            translate_own_dom(gobj, $nav);
         }
         priv.navs.push(nav);
         i++;

package/src/c_yui_service_view.js

@@ -0,0 +1,362 @@
+/***********************************************************************
+ *          c_yui_service_view.js
+ *
+ *      Mounting a view that TALKS TO A BACKEND.
+ *
+ *      THE PROBLEM
+ *      -----------
+ *      A view that asks the backend for data does it with
+ *          gobj_command(remote, "...", kw, src = itself)
+ *      and C_IEVENT_CLI routes the answer back with
+ *          gobj_find_service(gobj_name(src))
+ *      which only finds REGISTERED SERVICES.
+ *
+ *      Neither host creates one: C_YUI_SHELL mounts a route's view with
+ *      `gobj_create()` and C_YUI_NODE with `gobj_create_pure_child()`.
+ *      So a backend-talking view mounted directly never receives a single
+ *      answer — and not quietly: the ievent logs "service not found" once
+ *      per answer while the view sits empty forever.
+ *
+ *      There is a second half.  A route's `target.kw` is STATIC JSON, so
+ *      it cannot carry the live transport pointer the view needs.  It has
+ *      to be resolved at mount time and injected.
+ *
+ *      THE PIECE
+ *      ---------
+ *      Both halves had been written four separate times, in three repos,
+ *      each wrapper saying the same thing in its own header.  They are
+ *      here now, in two shapes, because the four callers are not alike:
+ *
+ *        yui_mount_service_view(host, spec) — the helper.  For a wrapper
+ *          that has its OWN extras on top (bridging url segments to the
+ *          hosted view, rebinding it when a connection drops).  Those
+ *          extras are app or route logic and do NOT belong here; the
+ *          wrapper keeps them and drops only the boilerplate.
+ *
+ *        C_YUI_SERVICE_VIEW — the gclass, for a route with NO extras:
+ *          declare it in the route/node and name the view it hosts.  It
+ *          is the helper plus a lifecycle, nothing more.
+ *
+ *      CONTRACT of the hosted gclass:
+ *        - declares the attr the transport is injected under
+ *          (`gobj_remote_yuno` by default),
+ *        - builds its `$container` in mt_create (re-exposed as the
+ *          host's, which is what the shell/node mounts),
+ *        - flags EVF_PUBLIC_EVENT on what arrives from the backend
+ *          (EV_MT_COMMAND_ANSWER and anything the remote publishes): the
+ *          ievent drops events that are not public.
+ *
+ *      NAMES: the service name must be UNIQUE per mount.  A duplicate is
+ *      not fatal and that is the danger — gobj-js logs "service ALREADY
+ *      REGISTERED. Will be UPDATED" and REBINDS the name, so the answers
+ *      of one view would land in the other.  Derive it from the route (or
+ *      from whatever else makes the mount unique: a connection id, a
+ *      workspace) and never from the gclass alone.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {
+    SDATA,
+    SDATA_END,
+    data_type_t,
+    gclass_create,
+    gclass_find_by_name,
+    log_error,
+    gobj_parent,
+    gobj_read_attr,
+    gobj_read_str_attr,
+    gobj_read_pointer_attr,
+    gobj_write_attr,
+    gobj_subscribe_event,
+    gobj_find_service,
+    gobj_create_service,
+    gobj_start,
+    gobj_stop,
+    gobj_is_running,
+    gobj_short_name,
+    is_gobj,
+    is_string,
+    empty_string,
+    createElement2,
+} from "@yuneta/gobj-js";
+
+
+/***************************************************************
+ *              Constants
+ ***************************************************************/
+const GCLASS_NAME = "C_YUI_SERVICE_VIEW";
+
+/*  What the four wrappers all did: the app's single transport, injected
+ *  under the attr every backend-talking gclass in this library declares. */
+const DEFAULT_TRANSPORT_SERVICE = "__remote_service__";
+const DEFAULT_TRANSPORT_ATTR    = "gobj_remote_yuno";
+
+
+/***************************************************************
+ *              Data
+ ***************************************************************/
+const attrs_table = [
+SDATA(data_type_t.DTP_POINTER,  "subscriber",   0,  null,   "Subscriber of output events"),
+
+SDATA(data_type_t.DTP_STRING,   "view_gclass",  0,  "",     "GClass of the hosted view (must be registered)"),
+SDATA(data_type_t.DTP_STRING,   "service_name", 0,  "",     "Service name of the hosted view — UNIQUE per mount"),
+SDATA(data_type_t.DTP_JSON,     "view_kw",      0,  null,   "kw passed to the hosted view"),
+SDATA(data_type_t.DTP_STRING,   "transport_service", 0, DEFAULT_TRANSPORT_SERVICE, "Service name of the live transport"),
+SDATA(data_type_t.DTP_STRING,   "transport_attr",    0, DEFAULT_TRANSPORT_ATTR,    "Attr of the hosted view the transport is injected under"),
+SDATA(data_type_t.DTP_POINTER,  "$container",   0,  null,   "Root HTMLElement"),
+SDATA_END()
+];
+
+let PRIVATE_DATA = {
+    view: null,
+};
+
+let __gclass__ = null;
+
+
+
+
+                    /***************************
+                     *      Public helper
+                     ***************************/
+
+
+
+
+/************************************************************
+ *  Create `spec.gclass` as a NAMED SERVICE under `host`, with the
+ *  live transport injected, and return it (null on failure, error
+ *  already logged).  The caller owns what happens next — starting
+ *  it, exposing its DOM, bridging routes into it.
+ *
+ *  spec = {
+ *      gclass,           // string, required — must be registered
+ *      name,             // string, required — service name, unique per mount
+ *      kw,               // object, optional — the view's kw
+ *      transport,        // gobj | service name | omitted:
+ *                        //   a gobj is used as-is (the caller already
+ *                        //   resolved it — e.g. per connection), a string
+ *                        //   is looked up with gobj_find_service(), and
+ *                        //   omitted means "__remote_service__".
+ *                        //   null DISABLES injection: for a hosted view
+ *                        //   that takes its transport some other way.
+ *      transport_attr    // string, optional — default "gobj_remote_yuno"
+ *  }
+ ************************************************************/
+function yui_mount_service_view(host, spec)
+{
+    if(!host || !is_gobj(host) || !spec) {
+        log_error(`${GCLASS_NAME}: yui_mount_service_view without host or spec`);
+        return null;
+    }
+
+    const gclass = spec.gclass;
+    const name   = spec.name;
+
+    if(empty_string(gclass) || empty_string(name)) {
+        log_error(
+            `${gobj_short_name(host)}: mounting a service view needs gclass and name`
+        );
+        return null;
+    }
+    if(!gclass_find_by_name(gclass)) {
+        log_error(`${gobj_short_name(host)}: gclass '${gclass}' is not registered`);
+        return null;
+    }
+
+    let kw = Object.assign({}, spec.kw || {});
+
+    /*  `undefined` means "the app's single transport"; an explicit null
+     *  means "do not inject one".  They are NOT the same, hence the
+     *  hasOwnProperty test instead of a truthiness check. */
+    let transport = Object.prototype.hasOwnProperty.call(spec, "transport")
+        ? spec.transport
+        : DEFAULT_TRANSPORT_SERVICE;
+
+    if(transport !== null) {
+        if(is_string(transport)) {
+            const service_name = transport;
+            transport = gobj_find_service(service_name);
+            if(!transport) {
+                log_error(
+                    `${gobj_short_name(host)}: transport service ` +
+                    `'${service_name}' not found`
+                );
+                return null;
+            }
+        }
+        if(!is_gobj(transport)) {
+            log_error(`${gobj_short_name(host)}: transport is not a gobj`);
+            return null;
+        }
+        kw[spec.transport_attr || DEFAULT_TRANSPORT_ATTR] = transport;
+    }
+
+    const view = gobj_create_service(name, gclass, kw, host);
+    if(!view) {
+        log_error(`${gobj_short_name(host)}: cannot create '${gclass}' as '${name}'`);
+        return null;
+    }
+    return view;
+}
+
+/************************************************************
+ *  The hosted view's $container, re-exposed as the host's — the
+ *  shell/node mounts the HOST, so without this nothing is drawn.
+ *  Never returns without setting one: an empty div beats a blank
+ *  screen with the reason only in the console.
+ ************************************************************/
+function expose_view_container(host, view)
+{
+    let $c = view ? gobj_read_attr(view, "$container") : null;
+    if(!$c) {
+        log_error(
+            `${gobj_short_name(host)}: hosted view does not expose $container ` +
+            `— check its mt_create`
+        );
+        $c = createElement2(["div", {}, ""]);
+    }
+    gobj_write_attr(host, "$container", $c);
+    return $c;
+}
+
+
+
+
+                    /***************************
+                     *      Framework Methods
+                     ***************************/
+
+
+
+
+/***************************************************************
+ *          Framework Method: Create
+ ***************************************************************/
+function mt_create(gobj)
+{
+    let priv = gobj.priv;
+
+    /*
+     *  CHILD subscription model
+     */
+    let subscriber = gobj_read_pointer_attr(gobj, "subscriber");
+    if(!subscriber) {
+        subscriber = gobj_parent(gobj);
+    }
+    gobj_subscribe_event(gobj, null, {}, subscriber);
+
+    priv.view = yui_mount_service_view(gobj, {
+        gclass:         gobj_read_str_attr(gobj, "view_gclass"),
+        name:           gobj_read_str_attr(gobj, "service_name"),
+        kw:             gobj_read_attr(gobj, "view_kw") || {},
+        transport:      gobj_read_str_attr(gobj, "transport_service"),
+        transport_attr: gobj_read_str_attr(gobj, "transport_attr")
+    });
+
+    expose_view_container(gobj, priv.view);
+}
+
+/***************************************************************
+ *          Framework Method: Start
+ *
+ *  The view starts HERE and not in mt_create, so its first
+ *  request goes out when the host shows it.
+ ***************************************************************/
+function mt_start(gobj)
+{
+    const view = gobj.priv.view;
+    if(view && !gobj_is_running(view)) {
+        gobj_start(view);
+    }
+}
+
+/***************************************************************
+ *          Framework Method: Stop
+ ***************************************************************/
+function mt_stop(gobj)
+{
+    const view = gobj.priv.view;
+    if(view && gobj_is_running(view)) {
+        gobj_stop(view);
+    }
+}
+
+/***************************************************************
+ *          Framework Method: Destroy
+ *
+ *  The view is a SERVICE created with this gobj as its parent, so
+ *  gobj_destroy cascades onto it — and deregisters its name.  Do
+ *  NOT destroy it again here.
+ ***************************************************************/
+function mt_destroy(gobj)
+{
+    let priv = gobj.priv;
+
+    priv.view = null;
+
+    const $c = gobj_read_attr(gobj, "$container");
+    if($c && $c.parentNode) {
+        $c.parentNode.removeChild($c);
+    }
+    gobj_write_attr(gobj, "$container", null);
+}
+
+
+
+
+                    /***************************
+                     *          FSM
+                     ***************************/
+
+
+
+
+const gmt = {
+    mt_create:  mt_create,
+    mt_start:   mt_start,
+    mt_stop:    mt_stop,
+    mt_destroy: mt_destroy
+};
+
+function create_gclass(gclass_name)
+{
+    if(__gclass__) {
+        log_error(`GClass ALREADY created: ${gclass_name}`);
+        return -1;
+    }
+
+    const states = [
+        ["ST_IDLE", []]
+    ];
+
+    const event_types = [];
+
+    __gclass__ = gclass_create(
+        gclass_name,
+        event_types,
+        states,
+        gmt,
+        0,
+        attrs_table,
+        PRIVATE_DATA,
+        0,
+        0,
+        0,
+        0
+    );
+
+    return __gclass__ ? 0 : -1;
+}
+
+function register_c_yui_service_view()
+{
+    return create_gclass(GCLASS_NAME);
+}
+
+export {
+    register_c_yui_service_view,
+    yui_mount_service_view,
+    expose_view_container,
+};

package/src/c_yui_shell.css

@@ -449,6 +449,53 @@
     background-color: var(--bulma-scheme-main-bis, rgba(0,0,0,0.04));
 }
 
+/*------------------------------------------------------------
+ *      Toolbar badge — the count pinned to an item's icon
+ *
+ *  Anchored to the ICON and not to the button: with its label on
+ *  (desktop) the button is wide, and a badge in its corner would
+ *  float away from the glyph it counts.
+ *
+ *  `hidden` is honoured explicitly: the element is always in the
+ *  DOM (so the runtime setter has somewhere to write) and
+ *  [hidden] loses to `display:inline-flex` without this rule.
+ *
+ *  Danger colour on purpose — a badge exists to pull the eye.  It
+ *  is its own colour pair in both schemes rather than a Bulma
+ *  helper, so it keeps its contrast when the toolbar background
+ *  changes with the theme.  No transition: house rule.
+ *------------------------------------------------------------*/
+.yui-toolbar-icon {
+    position: relative;
+    overflow: visible;
+}
+.yui-toolbar-badge {
+    position: absolute;
+    top: -0.35em;
+    right: -0.55em;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    /*  A round dot for one digit, a pill from two on. */
+    min-width: 1.15em;
+    height: 1.15em;
+    padding: 0 0.3em;
+    border-radius: 999px;
+    font-size: 0.62em;
+    font-weight: 700;
+    line-height: 1;
+    font-family: inherit;
+    background-color: var(--bulma-danger, #f14668);
+    color: var(--bulma-danger-invert, #fff);
+    /*  Separates the pill from the glyph when they overlap. */
+    box-shadow: 0 0 0 0.12em var(--bulma-scheme-main, #fff);
+    pointer-events: none;
+}
+.yui-toolbar-badge[hidden] {
+    display: none;
+}
+
 /*============================================================
  *      Toolbar — type:"brand"
  *      Logo image + wordmark text. Renders as <button> when