@yuneta/gobj-ui 2.0.0 → 2.2.3

package/index.js

@@ -1,31 +1,31 @@
 /***********************************************************************
- *          src/gobj-ui/index.js
+ *          @yuneta/gobj-ui/index.js  (v2 / main line)
  *
  *          Yuneta UI Library - Reusable GUI components.
  *
- *          VENDORED copy of @yuneta/gobj-ui, owned by wattyzer for
- *          fast in-place development.  Edit these files directly.
- *          When the work stabilizes, fold the changes back into
- *          yunetas/kernel/js/gobj-ui and restore the package dep.
+ *          Barrel re-exports for the v2 source, which lives in src/.
+ *          This is the canonical line, embedded as the yunetas submodule
+ *          kernel/js/gobj-ui and consumed by wattyzer via a file: dep.
  *
- *          Copyright (c) 2025, ArtGins.
+ *          Copyright (c) 2024-2026, ArtGins.
  *          All Rights Reserved.
  ***********************************************************************/
 
 /*
  *  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 "./c_yui_main.js";
-export { register_c_yui_window } from "./c_yui_window.js";
-export { register_c_yui_tabs } from "./c_yui_tabs.js";
-export { register_c_yui_pager } from "./c_yui_pager.js";
-export { register_c_yui_wizard } from "./c_yui_wizard.js";
-export { register_c_yui_form } from "./c_yui_form.js";
-export { register_c_yui_routing } from "./c_yui_routing.js";
-export { register_c_yui_map } from "./c_yui_map.js";
-export { register_c_yui_uplot } from "./c_yui_uplot.js";
-export { register_c_yui_json_graph } from "./c_yui_json_graph.js";
-export { register_c_yui_gobj_tree_js } from "./c_yui_gobj_tree_js.js";
+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_gobj_tree_js } from "./src/c_yui_gobj_tree_js.js";
 
 /*
  *  Declarative shell + menu navigation (new in v7.4)
@@ -44,8 +44,8 @@ export {
     yui_shell_set_connection_state,
     yui_shell_set_toolbar_item_icon,
     yui_shell_close_dropdown,
-} from "./c_yui_shell.js";
-export { register_c_yui_nav } from "./c_yui_nav.js";
+} from "./src/c_yui_shell.js";
+export { register_c_yui_nav } from "./src/c_yui_nav.js";
 export {
     yui_shell_show_info,
     yui_shell_show_warning,
@@ -54,26 +54,27 @@ export {
     yui_shell_confirm_ok,
     yui_shell_confirm_yesno,
     yui_shell_confirm_yesnocancel,
-} from "./shell_modals.js";
+} from "./src/shell_modals.js";
 
 /*
  *  TreeDB components
  */
-export { register_c_yui_treedb_topics } from "./c_yui_treedb_topics.js";
-export { register_c_yui_treedb_topic_with_form } from "./c_yui_treedb_topic_with_form.js";
-export { register_c_yui_treedb_graph } from "./c_yui_treedb_graph.js";
-export { register_c_g6_nodes_tree } from "./c_g6_nodes_tree.js";
+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_g6_nodes_tree } from "./src/c_g6_nodes_tree.js";
 
 /*
  *  Libraries and utilities
  */
-export { addClasses, removeClasses, toggleClasses, removeChildElements, disableElements, enableElements, set_submit_state, set_cancel_state, set_active_state, getStrokeColor } from "./lib_graph.js";
-export { inject_svg_icons } from "./lib_icons.js";
-export { EditControl, MarkerControl } from "./lib_maplibre.js";
-export { themes } from "./themes.js";
-export { YTable, createYTable } from "./ytable.js";
-export { yui_toolbar } from "./yui_toolbar.js";
-export { info_traffic, setup_dev, build_dev_panel, apply_dev_traces, dev_window_was_open } from "./yui_dev.js";
+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 { info_traffic, setup_dev, build_dev_panel, apply_dev_traces, dev_window_was_open } from "./src/yui_dev.js";
 
 /*
  *  CSS - import these in your main entry point

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yuneta/gobj-ui",
-    "version": "2.0.0",
+    "version": "2.2.3",
     "type": "module",
     "main": "dist/gobj-ui.cjs.js",
     "module": "dist/gobj-ui.es.js",
@@ -11,14 +11,13 @@
         },
         "./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",
-        "/*.js",
-        "/*.css",
+        "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).",
@@ -30,17 +29,17 @@
     "devDependencies": {
         "@rollup/plugin-terser": "^1.0.0",
         "@vitest/coverage-v8": "^4.1.6",
-        "@yuneta/gobj-js": "^7.3.4",
+        "@yuneta/gobj-js": "^7.7.0",
         "vite": "^8.0.10",
         "vitest": "^4.1.6"
     },
     "peerDependencies": {
-        "@yuneta/gobj-js": "^7.3.4",
         "@antv/g6": "^5.1.0",
+        "@yuneta/gobj-js": "^7.7.0",
         "bulma": "^1.0.4",
         "i18next": "^26.0.7",
         "maplibre-gl": "^5.24.0",
-        "tabulator-tables": "^6.4.0",
+        "tabulator-tables": "^6.5.2",
         "tom-select": "^2.6.0",
         "uplot": "^1.6.32",
         "vanilla-jsoneditor": "^0.23.0"

package/{c_g6_nodes_tree.js → src/c_g6_nodes_tree.js}

@@ -575,7 +575,12 @@ function get_default_ne_xy(gobj)
  ************************************************************/
 function build_ui(gobj)
 {
-    // Nothing to do, $container set externally
+    // $container set externally; tag it so the gclass owning this
+    // G6 canvas is identifiable in the browser Inspector.
+    let $container = gobj_read_attr(gobj, "$container");
+    if($container) {
+        $container.classList.add(GCLASS_NAME);
+    }
 }
 
 /************************************************************

package/{c_yui_form.js → src/c_yui_form.js}

@@ -284,7 +284,7 @@ function build_ui(gobj)
      *
      *----------------------------------------------*/
     let $container = createElement2(
-        ['div', {class: 'yui-form-container is-flex is-flex-direction-row overscroll-contain', style:'height:100%; width:100%; box-sizing:border-box;'}, [
+        ['div', {class: 'C_YUI_FORM is-flex is-flex-direction-row overscroll-contain', style:'height:100%; width:100%; box-sizing:border-box;'}, [
 
             /*----------------------------*
              *      Form

package/{c_yui_gobj_tree_js.js → src/c_yui_gobj_tree_js.js}

@@ -385,7 +385,7 @@ function build_ui(gobj)
     let $toolbar = make_toolbar(gobj);
 
     let $container = createElement2(
-        ['div', {class: 'gobj-tree', style: 'height:100%; display:flex; flex-direction:column; position:relative;'}, [
+        ['div', {class: 'C_YUI_GOBJ_TREE_JS', style: 'height:100%; display:flex; flex-direction:column; position:relative;'}, [
             ['div', {class: 'is-flex-grow-0 is-flex toolbar_yui_gobj_tree'}, $toolbar],
             ['div', {class: 'is-flex-grow-1', style: 'height:100%; min-height:0; overflow:hidden;'}, [
                 ['div', {id: priv.canvas_id, class: 'gobj-tree-container', style: 'height:100%; min-height:0; border: 1px solid var(--bulma-border-weak); border-radius:0.2rem;'}, [

package/{c_yui_json_graph.js → src/c_yui_json_graph.js}

@@ -221,7 +221,7 @@ function build_ui(gobj)
     let $toolbar = make_toolbar(gobj);
 
     let $container = createElement2(
-        ['div', {class: 'json-graph', style: 'height:100%; display:flex; flex-direction:column;'}, [
+        ['div', {class: 'C_YUI_JSON_GRAPH', style: 'height:100%; display:flex; flex-direction:column;'}, [
             ['div', {class: 'is-flex-grow-0 is-flex toolbar_yui_json_graph'}, $toolbar],
             ['div', {class: 'is-flex-grow-1', style: 'height:100%; min-height:0; overflow:hidden;'}, [
                 ['div', {id: priv.canvas_id, class: 'json-graph-container', style: 'height:100%; min-height:0; border: 1px solid var(--bulma-border-weak); border-radius:0.2rem;'}, [

package/{c_yui_main.js → src/c_yui_main.js}

@@ -167,8 +167,8 @@ function build_ui(gobj)
     /*----------------------------------------------*
      *  Layout Schema
      *----------------------------------------------*/
-    const $layout = createElement2(
-        ['div', {id: 'root', class: 'root'}, [
+    const $container = createElement2(
+        ['div', {id: 'root', class: 'C_YUI_MAIN root'}, [
             ['div', {id: 'top-layer', class: 'top-layer'}],
             ['div', {id: 'content-layer', class: 'content-layer is-hidden'}],
             ['div', {id: 'bottom-layer', class: 'bottom-layer'}],
@@ -178,7 +178,7 @@ function build_ui(gobj)
                 `<iframe id="iframe-publi-page" src="./${gobj_read_attr(gobj, "publi_page")}/index.html" width="100%" height="100%"></iframe>`]
         ]]
     );
-    document.body.appendChild($layout);
+    document.body.appendChild($container);
 
     const iframe = document.getElementById('iframe-publi-page');
     if(iframe) {

package/{c_yui_map.js → src/c_yui_map.js}

@@ -111,8 +111,13 @@ function mt_create(gobj)
 
     let map_settings = json_deep_copy(gobj_read_attr(gobj, "map_settings"));
 
+    let $map = gobj_read_attr(gobj, "$map");
+    if($map) {
+        /*  Tag the external mount so this gclass is identifiable in the Inspector */
+        $map.classList.add(GCLASS_NAME);
+    }
     Object.assign(map_settings, {
-        container: gobj_read_attr(gobj, "$map"),
+        container: $map,
     });
 
     /*-----------------------------*

package/{c_yui_nav.js → src/c_yui_nav.js}

@@ -15,6 +15,15 @@
  *
  *      Each item supports:
  *          id, name, icon (CSS class or svg id), route, badge, disabled
+ *          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
+ *                     instead of navigating (tabs layout)
+ *
+ *      Items can be replaced at runtime by sending EV_SET_ITEMS
+ *      {items:[...]} to the nav; the DOM is rebuilt in place and the
+ *      active highlight restored.  The app_config path is simply the
+ *      first, startup caller of the same mechanism.
  *
  *      In addition to navigable items, secondary navs accept two
  *      decorative item kinds for in-place visual grouping:
@@ -182,34 +191,90 @@ function build_ui(gobj)
     let items = gobj_read_attr(gobj, "menu_items") || [];
     let zone = gobj_read_attr(gobj, "zone") || "";
     let menu_id = gobj_read_attr(gobj, "menu_id") || "nav";
-    let $root;
+    let $container;
 
     switch(layout) {
-        case "vertical":   $root = render_vertical(gobj, items); break;
-        case "icon-bar":   $root = render_icon_bar(gobj, items); break;
-        case "tabs":       $root = render_tabs(gobj, items);     break;
-        case "drawer":     $root = render_drawer(gobj, items);   break;
-        case "submenu":    $root = render_submenu(gobj, items);  break;
-        case "accordion":  $root = render_accordion(gobj, items); break;
-        default:           $root = render_vertical(gobj, items);
-    }
-    $root.setAttribute("data-nav-zone", zone);
-    $root.setAttribute("data-nav-layout", layout);
-    $root.classList.add("yui-nav", `yui-nav-${layout}`);
+        case "vertical":   $container = render_vertical(gobj, items); break;
+        case "icon-bar":   $container = render_icon_bar(gobj, items); break;
+        case "tabs":       $container = render_tabs(gobj, items);     break;
+        case "drawer":     $container = render_drawer(gobj, items);   break;
+        case "submenu":    $container = render_submenu(gobj, items);  break;
+        case "accordion":  $container = render_accordion(gobj, items); break;
+        default:           $container = render_vertical(gobj, items);
+    }
+    $container.setAttribute("data-nav-zone", zone);
+    $container.setAttribute("data-nav-layout", layout);
+    $container.classList.add("C_YUI_NAV", "yui-nav", `yui-nav-${layout}`);
 
     /*  Accessibility: every nav root is a landmark.  For the drawer we
      *  tag the wrapper as role=dialog and the panel as role=navigation. */
     if(layout !== "drawer") {
-        $root.setAttribute("role", "navigation");
-        if(!$root.hasAttribute("aria-label")) {
+        $container.setAttribute("role", "navigation");
+        if(!$container.hasAttribute("aria-label")) {
             let label = gobj_read_attr(gobj, "nav_label") || menu_id;
-            $root.setAttribute("aria-label", label);
+            $container.setAttribute("aria-label", label);
         }
     }
 
-    wire_clicks(gobj, $root);
+    wire_clicks(gobj, $container);
+
+    gobj_write_attr(gobj, "$container", $container);
+}
+
+/************************************************************
+ *  Rebuild the nav DOM in place from the current menu_items.
+ *  Used by EV_SET_ITEMS so a nav's tabs can be changed at runtime
+ *  (the app_config path is just the first, startup caller).
+ ************************************************************/
+function rebuild(gobj)
+{
+    let $old = gobj_read_attr(gobj, "$container");
+    let priv = gobj_read_attr(gobj, "priv") || {};
+    let parent = $old ? $old.parentNode : null;
+    let next = $old ? $old.nextSibling : null;
+    let was_hidden = !!($old && $old.classList.contains("is-hidden"));
+
+    /*  Drop the old delegated click listener before discarding the node. */
+    if($old && priv.click_handler) {
+        $old.removeEventListener("click", priv.click_handler);
+    }
 
-    gobj_write_attr(gobj, "$container", $root);
+    build_ui(gobj);   /*  writes a fresh $container + wires new clicks  */
+
+    let $new = gobj_read_attr(gobj, "$container");
+    if($new && was_hidden) {
+        $new.classList.add("is-hidden");
+    }
+    if(parent && $new) {
+        parent.insertBefore($new, next);
+    }
+    if($old && $old.parentNode) {
+        $old.parentNode.removeChild($old);
+    }
+
+    apply_active_route(gobj);
+}
+
+/************************************************************
+ *  Re-apply the active-route highlight after a rebuild (the
+ *  shell only pushes EV_ROUTE_CHANGED on navigation, not on a
+ *  self-triggered items change).
+ ************************************************************/
+function apply_active_route(gobj)
+{
+    let $c = gobj_read_attr(gobj, "$container");
+    let route = gobj_read_attr(gobj, "active_route") || "";
+    if(!$c || empty_string(route)) {
+        return;
+    }
+    let $a = $c.querySelector(`a[data-route="${css_escape(route)}"]`);
+    if($a) {
+        let $li = $a.closest("li");
+        if($li) {
+            $li.classList.add("is-active");
+        }
+        $a.classList.add("is-active");
+    }
 }
 
 /************************************************************
@@ -283,6 +348,15 @@ function render_tabs(gobj, items)
         if(show_label && !empty_string(it.name)) {
             children.push(["span", {i18n: it.name}, it.name]);
         }
+        /*  Optional close affordance: a trailing ✕ that emits
+         *  EV_NAV_ITEM_CLOSE instead of navigating (caught first in
+         *  wire_clicks by its data-close-item marker). */
+        if(it.closable) {
+            children.push(["span", {class: "icon is-small yui-nav-close ml-2",
+                    "data-close-item": it.id, role: "button",
+                    "aria-label": "close", title: "close"},
+                ["i", {class: "yi-xmark", "aria-hidden":"true"}]]);
+        }
         let a_attrs = {
             href: it.route ? "#" + it.route : "#",
             "data-item-id": it.id,
@@ -293,8 +367,11 @@ function render_tabs(gobj, items)
             a_attrs.title = tip;
             a_attrs["data-i18n-title"] = tip;
         }
+        /*  Per-item state class (e.g. a "disconnected" colour) rides on
+         *  the <li>, alongside Bulma's own is-active. */
+        let li_class = empty_string(it.class) ? "" : String(it.class);
         lis.push(
-            ["li", {class: "", "data-item-id": it.id, "data-route": it.route || ""},
+            ["li", {class: li_class, "data-item-id": it.id, "data-route": it.route || ""},
                 ["a", a_attrs, children]
             ]
         );
@@ -369,7 +446,7 @@ function render_accordion(gobj, items)
     let show_label = gobj_read_attr(gobj, "show_label");
     let icon_pos = gobj_read_attr(gobj, "icon_pos");
 
-    let $root = createElement2(["aside", {class: "menu yui-nav-accordion p-2"}]);
+    let $container = createElement2(["aside", {class: "menu yui-nav-accordion p-2"}]);
     for(let it of items) {
         if(is_decorative(it)) {
             continue;   /*  primary-level decorations don't apply to accordion sections  */
@@ -392,7 +469,7 @@ function render_accordion(gobj, items)
             head_attrs.i18n = head_text;
         }
         let $hdr = createElement2(["button", head_attrs, head_text]);
-        $root.appendChild($hdr);
+        $container.appendChild($hdr);
 
         let $ul = createElement2(
             ["ul", {id: body_id,
@@ -407,9 +484,9 @@ function render_accordion(gobj, items)
                 ));
             }
         }
-        $root.appendChild($ul);
+        $container.appendChild($ul);
     }
-    return $root;
+    return $container;
 }
 
 /************************************************************
@@ -557,7 +634,7 @@ function item_iconbar(gobj, it, opts)
     ];
 }
 
-function wire_clicks(gobj, $root)
+function wire_clicks(gobj, $container)
 {
     let priv = gobj_read_attr(gobj, "priv") || {};
 
@@ -567,6 +644,22 @@ function wire_clicks(gobj, $root)
             return;
         }
 
+        /*  Close affordance (✕ on a closable tab): emit the intent and
+         *  let the shell/app remove the item; never navigate. */
+        let $close = target.closest("[data-close-item]");
+        if($close) {
+            let $routed = $close.closest("[data-route]");
+            gobj_publish_event(gobj, "EV_NAV_ITEM_CLOSE", {
+                item_id: $close.getAttribute("data-close-item") || "",
+                route:   ($routed && $routed.getAttribute("data-route")) || "",
+                menu_id: gobj_read_attr(gobj, "menu_id") || "",
+                zone:    gobj_read_attr(gobj, "zone") || ""
+            });
+            ev.preventDefault();
+            ev.stopPropagation();
+            return;
+        }
+
         /*  Drawer backdrop close.  Don't mutate the DOM directly —
          *  the shell owns the drawer state (focus-trap, escape
          *  stack) and must run its full close path.  Publish the
@@ -584,7 +677,7 @@ function wire_clicks(gobj, $root)
         /*  Accordion head toggle takes precedence over navigation: the
          *  head is a container for its sub-items, not a destination. */
         let $head = target.closest(".yui-accordion-head");
-        if($head && $root.contains($head)) {
+        if($head && $container.contains($head)) {
             let $next = $head.nextElementSibling;
             if($next && $next.classList.contains("yui-accordion-body")) {
                 let open = $next.classList.contains("is-hidden");
@@ -622,7 +715,7 @@ function wire_clicks(gobj, $root)
         });
     };
 
-    $root.addEventListener("click", handler);
+    $container.addEventListener("click", handler);
     priv.click_handler = handler;
 }
 
@@ -636,6 +729,18 @@ function wire_clicks(gobj, $root)
 
 
 
+/************************************************************
+ *  EV_SET_ITEMS — replace this nav's items and re-render in place.
+ *  This is the runtime counterpart of the startup config path:
+ *  the shell (or app, via the shell) drives dynamic navs through it.
+ ************************************************************/
+function ac_set_items(gobj, event, kw, src)
+{
+    gobj_write_attr(gobj, "menu_items", is_array(kw.items) ? kw.items : []);
+    rebuild(gobj);
+    return 0;
+}
+
 /************************************************************
  *  EV_ROUTE_CHANGED from the shell — refresh active highlight
  ************************************************************/
@@ -739,13 +844,16 @@ function create_gclass(gclass_name)
 
     const states = [
         ["ST_IDLE", [
-            ["EV_ROUTE_CHANGED", ac_route_changed, null]
+            ["EV_ROUTE_CHANGED", ac_route_changed, null],
+            ["EV_SET_ITEMS",     ac_set_items,     null]
         ]]
     ];
 
     const event_types = [
         ["EV_ROUTE_CHANGED",          0],
+        ["EV_SET_ITEMS",              0],
         ["EV_NAV_CLICKED",            event_flag_t.EVF_OUTPUT_EVENT|event_flag_t.EVF_PUBLIC_EVENT],
+        ["EV_NAV_ITEM_CLOSE",         event_flag_t.EVF_OUTPUT_EVENT|event_flag_t.EVF_PUBLIC_EVENT],
         ["EV_DRAWER_CLOSE_REQUESTED", event_flag_t.EVF_OUTPUT_EVENT|event_flag_t.EVF_PUBLIC_EVENT]
     ];
 

package/{c_yui_pager.js → src/c_yui_pager.js}

@@ -145,7 +145,7 @@ function mt_destroy(gobj)
 function build_ui(gobj)
 {
     let $container = createElement2(
-        ['div', {class: 'yui-pager', style: 'height:100%; display:flex; flex-direction:column;'}, [
+        ['div', {class: 'C_YUI_PAGER', style: 'height:100%; display:flex; flex-direction:column;'}, [
             ['div', {class: 'yui-pager-header is-flex is-align-items-center is-flex-grow-0',
                      style: 'gap:.25rem; padding:.25rem .25rem;'}, [
                 ['button', {class: 'yui-pager-back button is-white is-hidden', 'aria-label': 'back'}, [

package/{c_yui_routing.css → src/c_yui_routing.css}

@@ -1,7 +1,7 @@
 /*********************************************************
  *      Layout ui_route
  *********************************************************/
-.container-grid-2col {
+.C_YUI_ROUTING {
     display: grid;
     grid-template-columns: max-content 1fr;
     height: 100%;

package/{c_yui_routing.js → src/c_yui_routing.js}

@@ -301,7 +301,7 @@ function build_layout(gobj)
      *  Layout Schema
      *----------------------------------------------*/
     const $container = createElement2(
-        ['div', {class: 'container-grid-2col', style: ''}, [
+        ['div', {class: 'C_YUI_ROUTING', style: ''}, [
             ['div', {class: 'container-grid-2col-left'},
                 ['aside', {class: 'menu'}, [
                     ['ul', {class: 'menu-list'}, []]

package/{c_yui_shell.css → src/c_yui_shell.css}

@@ -174,6 +174,21 @@
 /*--- tabs (Bulma .tabs) ---*/
 .yui-nav-tabs .tabs ul { flex-wrap: wrap; }
 
+/*--- closable tab: trailing ✕ affordance (item.closable) ---*/
+.yui-nav-close {
+    opacity: 0.55;
+    cursor: pointer;
+    border-radius: 3px;
+}
+.yui-nav-close:hover {
+    opacity: 1;
+    background: var(--bulma-danger, #f14668);
+    color: #fff;
+}
+
+/*--- per-item state class (item.class) — generic disconnected tint ---*/
+.yui-nav-tabs .tabs li.yui-nav-disconnected a { color: var(--bulma-danger, #f14668); }
+
 /*--- stacked item (icon above label) ---*/
 .yui-nav-stacked {
     display: inline-flex;
@@ -459,3 +474,98 @@
     font: inherit;
     color: inherit;
 }
+
+/*============================================================
+ *      Adaptive dialog (yui_shell_show_modal, opts.dialog:true)
+ *
+ *      The standardized "single window / popup" chrome:
+ *        - Desktop  : a centered card, close X at the top-right.
+ *        - Mobile   : a full-screen sheet, back arrow at the top-left.
+ *      One dismiss control shows per breakpoint; both call close().
+ *      768px is the shell-wide mobile breakpoint (matches the dock).
+ *============================================================*/
+/*  Lighter backdrop than Bulma's default (0.86): a popup should dim the
+ *  page, not black it out. */
+.yui-dialog .modal-background {
+    background-color: rgba(10, 10, 10, 0.4);
+}
+.yui-dialog .yui-dialog-content {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 640px;
+    max-height: 90vh;
+    background: var(--bulma-scheme-main, #fff);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
+}
+.yui-dialog-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 0 0 auto;
+    padding: 0.5rem 0.6rem;
+    border-bottom: 1px solid var(--bulma-border-weak, #dbdbdb);
+}
+.yui-dialog-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 600;
+}
+.yui-dialog-back,
+.yui-dialog-x {
+    flex: 0 0 auto;
+    width: 2rem;
+    height: 2rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--bulma-text, currentColor);
+    cursor: pointer;
+}
+.yui-dialog-back:hover,
+.yui-dialog-x:hover {
+    background: var(--bulma-background, rgba(0, 0, 0, 0.06));
+}
+.yui-dialog-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    padding: 1rem;
+}
+
+/*  Desktop: X (right) shown, back arrow hidden. */
+.yui-dialog-back {
+    display: none;
+}
+
+/*  Mobile: full-screen sheet, back arrow (left) shown, X hidden. */
+@media (max-width: 768px) {
+    .yui-dialog .modal-content {
+        margin: 0;
+        width: 100%;
+        max-height: 100%;
+        height: 100%;
+    }
+    .yui-dialog .yui-dialog-content {
+        max-width: 100%;
+        max-height: 100%;
+        height: 100%;
+        border-radius: 0;
+        box-shadow: none;
+    }
+    .yui-dialog-back {
+        display: inline-flex;
+    }
+    .yui-dialog-x {
+        display: none;
+    }
+}