@yuneta/gobj-ui 2.6.0 → 4.0.0

package/index.js

@@ -14,17 +14,15 @@
 /*
  *  Components
  */
-export { register_c_yui_main, display_volatil_modal, display_info_message, display_warning_message, display_error_message, get_yesnocancel, get_yesno, get_ok } from "./src/c_yui_main.js";
 export { register_c_yui_window } from "./src/c_yui_window.js";
 export { register_c_yui_window_manager } from "./src/c_yui_window_manager.js";
-export { register_c_yui_tabs } from "./src/c_yui_tabs.js";
 export { register_c_yui_pager } from "./src/c_yui_pager.js";
 export { register_c_yui_wizard } from "./src/c_yui_wizard.js";
 export { register_c_yui_form } from "./src/c_yui_form.js";
-export { register_c_yui_routing } from "./src/c_yui_routing.js";
 export { register_c_yui_map } from "./src/c_yui_map.js";
 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";
 
 /*
@@ -44,8 +42,19 @@ export {
     yui_shell_set_connection_state,
     yui_shell_set_toolbar_item_icon,
     yui_shell_close_dropdown,
+    yui_shell_register_event_handler,
+    yui_shell_set_sub_routes,
+    yui_shell_register_overlay,
+    yui_shell_overlay_dismissed,
+    yui_shell_unpark_route,
 } from "./src/c_yui_shell.js";
 export { register_c_yui_nav } from "./src/c_yui_nav.js";
+/*
+ *  Site map: the whole navigation surface (toolbar + account menu +
+ *  nav + dynamic tabs + view-contributed sub-routes) as a clickable,
+ *  printable tree — the app's basic documentation (ROUTING.md).
+ */
+export { yui_shell_show_route_map } from "./src/shell_route_map.js";
 export {
     yui_shell_show_info,
     yui_shell_show_warning,
@@ -62,28 +71,55 @@ export {
 export { register_c_yui_treedb_topics } from "./src/c_yui_treedb_topics.js";
 export { register_c_yui_treedb_topic_with_form } from "./src/c_yui_treedb_topic_with_form.js";
 export { register_c_yui_treedb_graph } from "./src/c_yui_treedb_graph.js";
+export { register_c_yui_treedb_schema } from "./src/c_yui_treedb_schema.js";
 export { register_c_g6_nodes_tree } from "./src/c_g6_nodes_tree.js";
 
+/*
+ *  Date navigator: granularity + arrows + calendar (C_YUI_PERIOD), on
+ *  top of the period algebra of yui_time (unit + count, so an app gets
+ *  quarters, semesters or bimesters by declaring them).
+ */
+export { register_c_yui_period } from "./src/c_yui_period.js";
+export {
+    YUI_PERIODS,
+    YUI_PERIODS_DEFAULT,
+    YUI_ROLLING,
+    safe_locale,
+    epoch_to_ms,
+    ms_to_epoch,
+    epoch_to_local_input,
+    local_input_to_epoch,
+    fmt_epoch,
+    iso_week,
+    period_spec,
+    period_start,
+    period_shift,
+    period_bounds,
+    period_bounds_epoch,
+    rolling_bounds,
+    is_current_period,
+    infer_period,
+    period_name,
+    period_label,
+} from "./src/yui_time.js";
+
 /*
  *  Libraries and utilities
  */
 export { addClasses, removeClasses, toggleClasses, removeChildElements, disableElements, enableElements, set_submit_state, set_cancel_state, set_active_state, getStrokeColor } from "./src/lib_graph.js";
 export { inject_svg_icons } from "./src/lib_icons.js";
 export { EditControl, MarkerControl } from "./src/lib_maplibre.js";
-export { themes } from "./src/themes.js";
-export { YTable, createYTable } from "./src/ytable.js";
 export { yui_toolbar } from "./src/yui_toolbar.js";
-export { attach_clear } from "./src/yui_inputs.js";
+export { yui_theme_now, yui_is_dark, yui_watch_theme } from "./src/yui_theme.js";
+export { attach_clear, refresh_clear } from "./src/yui_inputs.js";
 export { info_traffic, setup_dev, build_dev_panel, apply_dev_traces, dev_window_was_open } from "./src/yui_dev.js";
+export { setup_frontend_view } from "./src/yui_frontend_view.js";
 
 /*
  *  CSS - import these in your main entry point
  *  Example:
- *    import "gobj-ui/src/c_yui_main.css";
  *    import "gobj-ui/src/c_yui_shell.css";     // declarative shell
  *    import "gobj-ui/src/c_yui_map.css";
- *    import "gobj-ui/src/c_yui_routing.css";
- *    import "gobj-ui/src/ytable.css";
  *    import "gobj-ui/src/yui_toolbar.css";
  *    import "gobj-ui/src/lib_graph.css";
  *    import "gobj-ui/src/yui_icons.css";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yuneta/gobj-ui",
-    "version": "2.6.0",
+    "version": "4.0.0",
     "type": "module",
     "main": "dist/gobj-ui.cjs.js",
     "module": "dist/gobj-ui.es.js",
@@ -20,7 +20,7 @@
         "src/",
         "vite-plugin-yuneta-html.js"
     ],
-    "description": "Yuneta UI Library — v2 (active development) declarative shell (C_YUI_SHELL+NAV+PAGER+WIZARD) + legacy GClass GUI stack (C_YUI_MAIN/WINDOW/TABS/ROUTING + TreeDB editors + charts/maps).  Consumed by wattyzer.  The frozen legacy-only line lives on the v1 branch (consumed by estadodelaire and hidraulia).",
+    "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",
@@ -29,13 +29,13 @@
     "devDependencies": {
         "@rollup/plugin-terser": "^1.0.0",
         "@vitest/coverage-v8": "^4.1.6",
-        "@yuneta/gobj-js": "^7.7.0",
+        "@yuneta/gobj-js": "^7.8.0",
         "vite": "^8.0.10",
         "vitest": "^4.1.6"
     },
     "peerDependencies": {
         "@antv/g6": "^5.1.0",
-        "@yuneta/gobj-js": "^7.7.0",
+        "@yuneta/gobj-js": "^7.8.0",
         "bulma": "^1.0.4",
         "i18next": "^26.0.7",
         "maplibre-gl": "^5.24.0",

package/src/c_g6_nodes_tree.js

@@ -39,12 +39,12 @@ import {
     gobj_subscribe_event,
     gobj_publish_event,
     gobj_send_event,
-    gobj_find_service,
     gobj_save_persistent_attrs,
     clean_name,
     sprintf,
     is_string,
     is_array,
+    empty_string,
     is_object,
     kw_get_int,
     kw_get_str,
@@ -96,6 +96,7 @@ import i18next, {t} from "i18next";
 
 import {inject_svg_icons} from "./lib_icons.js";
 import {ensure_drag_canvas_patch} from "./g6_drag_canvas_touch.js";
+import {yui_theme_now, yui_watch_theme} from "./yui_theme.js";
 
 /***************************************************************
  *  YuiToolbar — G6 Toolbar subclass that adds per-item className
@@ -274,6 +275,9 @@ let PRIVATE_DATA = {
     _link_drag_svg:     null,       // SVG overlay for drag line
     _link_valid_hooks:  [],         // [{node_id, port_key}] compatible hook targets
     _link_saved_styles: [],         // saved port styles to restore on cancel
+    _focus_topic:       null,       // topic currently focused (EV_FOCUS_TOPIC)
+    _focus_ids:         [],         // node ids carrying the focus 'active' state
+    _pending_focus_topic: null,     // focus requested before data was loaded
 };
 
 let __gclass__ = null;
@@ -304,39 +308,20 @@ function mt_create(gobj)
     }
     gobj_subscribe_event(gobj, null, {}, subscriber);
 
-    /*  Optional legacy integration: EV_THEME from C_YUI_MAIN
-     *  (old shell).  Under the new C_YUI_SHELL there is no
-     *  __yui_main__ — look it up SILENTLY (no verbose) so its
-     *  absence is not logged as an error every mount. */
-    let __yui_main__ = gobj_find_service("__yui_main__");
-    if(__yui_main__) {
-        gobj_subscribe_event(__yui_main__, "EV_THEME", {}, gobj);
-        gobj_write_attr(gobj, "theme", gobj_read_str_attr(__yui_main__, "theme"));
-    } else {
-        /*  New C_YUI_SHELL: no __yui_main__, no EV_THEME broadcast.
-         *  Read the theme from <html data-theme> (the Bulma/wz_theme
-         *  convention) and react to changes with a MutationObserver,
-         *  re-using ac_theme via EV_THEME.  Without this priv.theme
-         *  stays "light" and the grid-line uses the light colour
-         *  (#EEEEEE) → glaring white grid on the dark canvas. */
-        let $html = document.documentElement;
-        let dt = $html.getAttribute("data-theme");
-        if(dt === "dark" || dt === "light") {
-            gobj_write_attr(gobj, "theme", dt);
-        }
-        if(typeof MutationObserver !== "undefined") {
-            let mo = new MutationObserver(() => {
-                let nt = $html.getAttribute("data-theme");
-                if(nt === "dark" || nt === "light") {
-                    gobj_send_event(gobj, "EV_THEME", {theme: nt}, gobj);
-                }
-            });
-            mo.observe($html, {
-                attributes: true, attributeFilter: ["data-theme"]
-            });
-            gobj.priv.theme_observer = mo;
-        }
-    }
+    /*  The theme is <html data-theme> (the Bulma/wz_theme convention) and
+     *  the DOM mutation IS the notification: translate it into EV_THEME so
+     *  ac_theme does the work inside the machine.  Without this priv.theme
+     *  stays "light" and the grid-line uses the light colour (#EEEEEE) →
+     *  glaring white grid on the dark canvas.
+     *
+     *  This used to be the ELSE of "did the app register a legacy
+     *  C_YUI_MAIN __yui_main__ service?", whose `theme` attr we read and
+     *  whose EV_THEME we subscribed to.  That branch was retired: nothing
+     *  ever WROTE that attr (it stayed at its "light" default for the life
+     *  of the app) and no shell published EV_THEME, so merely having such a
+     *  service swapped this working observer for a dead path. */
+    gobj_write_attr(gobj, "theme", yui_theme_now());
+    gobj.priv.theme_observer = yui_watch_theme(gobj);
 
     build_ui(gobj);
     register_layouts(gobj);
@@ -634,6 +619,15 @@ function build_graph(gobj)
                     labelFill: '#000',          // Force black; remove to let G6 dark theme control it
                     labelFontWeight: 'normal',
                 },
+                /*  Topic focus highlight (EV_FOCUS_TOPIC): an amber halo on
+                 *  every node of the focused topic. */
+                active: {
+                    lineWidth: 4,
+                    stroke: '#f0a020',
+                    halo: true,
+                    haloStroke: '#f0a020',
+                    haloLineWidth: 8,
+                },
             },
         },
 
@@ -2066,6 +2060,66 @@ async function graph_fitview(gobj)
     await graph.fitView();
 }
 
+/************************************************************
+ *  Focus the graph on one topic: highlight (amber 'active' state)
+ *  every node of that topic and centre the viewport on them. An
+ *  empty topic clears the highlight. If the graph is not rendered
+ *  or its data has not arrived, remember the request and replay it
+ *  once the data loads (see ac_load_data). Guarded end-to-end — a
+ *  missing G6 API or an unknown topic logs and no-ops, never throws.
+ ************************************************************/
+function graph_focus_topic(gobj, topic)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+    if(!graph || !priv.graph_rendered) {
+        priv._pending_focus_topic = topic;
+        return;
+    }
+
+    let data = {};
+    try {
+        data = graph.getData() || {};
+    } catch(e) {
+        log_error(`${gobj_short_name(gobj)}: graph.getData() failed: ${e}`);
+        return;
+    }
+    let nodes = is_array(data.nodes) ? data.nodes : [];
+
+    /*  Clear the previous focus highlight, then set the new one. */
+    let states = {};
+    for(let id of (priv._focus_ids || [])) {
+        states[id] = [];
+    }
+    let ids = [];
+    if(!empty_string(topic)) {
+        for(let n of nodes) {
+            if(n && n.data && n.data.topic_name === topic) {
+                ids.push(n.id);
+            }
+        }
+        if(ids.length === 0) {
+            log_warning(`${gobj_short_name(gobj)}: focus topic '${topic}' has no nodes`);
+        }
+        for(let id of ids) {
+            states[id] = ['active'];
+        }
+    }
+    priv._focus_ids = ids;
+    priv._focus_topic = topic || null;
+
+    try {
+        if(typeof graph.setElementState === "function") {
+            graph.setElementState(states);
+        }
+        if(ids.length && typeof graph.focusElement === "function") {
+            graph.focusElement(ids);
+        }
+    } catch(e) {
+        log_error(`${gobj_short_name(gobj)}: focus topic apply failed: ${e}`);
+    }
+}
+
 async function graph_zoom_in(gobj)
 {
     let priv = gobj.priv;
@@ -2442,7 +2496,13 @@ function create_popover_base(left, top, className, borderColor, minWidth)
         'position:absolute;' +
         'left:' + left + 'px;' +
         'top:' + top + 'px;' +
-        'background:#fff;border:1px solid ' + borderColor + ';border-radius:6px;' +
+        /*  Bulma scheme vars, not #fff: the labels inside inherit their
+         *  colour, so a hardcoded white card turned into light-on-white —
+         *  invisible — the moment the app went dark. The vars flip with
+         *  <html data-theme>, so these follow the theme with no redraw. */
+        'background:var(--bulma-scheme-main, #fff);' +
+        'color:var(--bulma-text-strong, #1A1A1A);' +
+        'border:1px solid ' + borderColor + ';border-radius:6px;' +
         'padding:12px;z-index:100;pointer-events:all;' +
         'box-shadow:0 4px 12px rgba(0,0,0,0.15);' +
         'min-width:' + minWidth + 'px;font-size:13px;';
@@ -2466,7 +2526,8 @@ function create_form_color_input(parent, value, onInput)
     input.type = 'color';
     input.value = value;
     input.style.cssText =
-        'width:100%;height:30px;padding:0;border:1px solid #d9d9d9;border-radius:4px;' +
+        'width:100%;height:30px;padding:0;' +
+        'border:1px solid var(--bulma-border-weak, #d9d9d9);border-radius:4px;' +
         'cursor:pointer;margin-bottom:10px;';
     if(onInput) {
         input.addEventListener('input', onInput);
@@ -2482,8 +2543,15 @@ function create_form_number_input(parent, value, min, max, onInput)
     input.min = String(min);
     input.max = String(max);
     input.value = value;
+    /*  Set the colours explicitly: a native control with only a border
+     *  styled falls back to the BROWSER default (white + black), which is
+     *  what kept it light inside a dark popover. The spinner arrows are
+     *  OS-drawn and follow `color-scheme` (see c_yui_shell.css), not this. */
     input.style.cssText =
-        'width:100%;padding:4px 6px;border:1px solid #d9d9d9;border-radius:4px;' +
+        'width:100%;padding:4px 6px;' +
+        'background:var(--bulma-scheme-main-bis, #fff);' +
+        'color:var(--bulma-text-strong, #333);' +
+        'border:1px solid var(--bulma-border-weak, #d9d9d9);border-radius:4px;' +
         'box-sizing:border-box;margin-bottom:10px;';
     if(onInput) {
         input.addEventListener('input', onInput);
@@ -2496,7 +2564,10 @@ function create_form_select(parent, options, marginBottom)
 {
     let select = document.createElement('select');
     select.style.cssText =
-        'width:100%;padding:4px 6px;border:1px solid #d9d9d9;border-radius:4px;' +
+        'width:100%;padding:4px 6px;' +
+        'background:var(--bulma-scheme-main-bis, #fff);' +
+        'color:var(--bulma-text-strong, #333);' +
+        'border:1px solid var(--bulma-border-weak, #d9d9d9);border-radius:4px;' +
         'box-sizing:border-box;margin-bottom:' + (marginBottom || '12px') + ';';
     for(let opt of options) {
         let o = document.createElement('option');
@@ -2509,7 +2580,9 @@ function create_form_select(parent, options, marginBottom)
 }
 
 const BTN_STYLE_CANCEL =
-    'flex:1;padding:6px;background:#fff;color:#333;border:1px solid #d9d9d9;' +
+    'flex:1;padding:6px;background:var(--bulma-scheme-main-bis, #fff);' +
+    'color:var(--bulma-text-strong, #333);' +
+    'border:1px solid var(--bulma-border-weak, #d9d9d9);' +
     'border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;';
 
 function create_form_button_row(parent, buttons)
@@ -5452,6 +5525,13 @@ function ac_load_data(gobj, event, kw, src)
                     } else {
                         graph_remove_plugin(gobj, "history");
                     }
+                    /*  Nodes exist and are positioned now: apply a focus
+                     *  requested before the data was ready (deep link). */
+                    if(priv._pending_focus_topic !== null) {
+                        let ft = priv._pending_focus_topic;
+                        priv._pending_focus_topic = null;
+                        graph_focus_topic(gobj, ft);
+                    }
                 });
             });
         });
@@ -5731,7 +5811,7 @@ function ac_resize(gobj, event, kw, src)
 }
 
 /************************************************************
- *  Theme change (subscribed from __yui_main__)
+ *  Theme change (<html data-theme>, via yui_watch_theme)
  ************************************************************/
 function ac_theme(gobj, event, kw, src)
 {
@@ -5791,6 +5871,12 @@ function ac_auto_fit(gobj, event, kw, src)
     return 0;
 }
 
+function ac_focus_topic(gobj, event, kw, src)
+{
+    graph_focus_topic(gobj, kw && kw.topic);
+    return 0;
+}
+
 function ac_center(gobj, event, kw, src)
 {
     graph_center(gobj);
@@ -6153,6 +6239,7 @@ function create_gclass(gclass_name)
             ["EV_ZOOM_OUT",                 ac_zoom_out,            null],
             ["EV_ZOOM_RESET",               ac_zoom_reset,          null],
             ["EV_AUTO_FIT",                 ac_auto_fit,            null],
+            ["EV_FOCUS_TOPIC",              ac_focus_topic,         null],
             ["EV_CENTER",                   ac_center,              null],
             ["EV_FULLSCREEN",               ac_fullscreen,          null],
             ["EV_SET_LAYOUT",               ac_set_layout,          null],
@@ -6195,6 +6282,7 @@ function create_gclass(gclass_name)
         ["EV_ZOOM_OUT",                 0],
         ["EV_ZOOM_RESET",               0],
         ["EV_AUTO_FIT",                 0],
+        ["EV_FOCUS_TOPIC",              0],
         ["EV_CENTER",                   0],
         ["EV_FULLSCREEN",               0],
         ["EV_SET_LAYOUT",               0],

package/src/c_yui_form.css

@@ -48,3 +48,12 @@
     border-color: var(--bulma-border, #dbdbdb);
     cursor: default;
 }
+
+/*  Moved from c_yui_main.css (2.6.1): scroll containment for the fields area.
+ *  Self-contained here so every consumer gets it without the
+ *  legacy stack's stylesheet. */
+
+.overscroll-contain {
+    overscroll-behavior: contain;
+}
+