@yuneta/gobj-ui 2.5.0 → 3.0.0

package/index.js

@@ -14,14 +14,11 @@
 /*
  *  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";
@@ -70,8 +67,6 @@ export { register_c_g6_nodes_tree } from "./src/c_g6_nodes_tree.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";
@@ -79,11 +74,8 @@ export { info_traffic, setup_dev, build_dev_panel, apply_dev_traces, dev_window_
 /*
  *  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.5.0",
+    "version": "3.0.0",
     "type": "module",
     "main": "dist/gobj-ui.cjs.js",
     "module": "dist/gobj-ui.es.js",

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;
+}
+

package/src/c_yui_form.js

@@ -56,6 +56,7 @@ import TomSelect from "tom-select"; // Import Tom-Select JS
 import { createJSONEditor } from 'vanilla-jsoneditor';
 import "vanilla-jsoneditor/themes/jse-theme-dark.css";
 import "./c_yui_form.css";
+import "./tabulator.css";
 
 import "tabulator-tables/dist/css/tabulator.min.css"; // Import Tabulator CSS
 import "tabulator-tables/dist/css/tabulator_bulma.css";

package/src/c_yui_shell.css

@@ -643,3 +643,90 @@
         display: none;
     }
 }
+
+/*  Moved from c_yui_main.css (2.6.1): mobile Bulma columns edge-to-edge.
+ *  Self-contained here so every consumer gets it without the
+ *  legacy stack's stylesheet. */
+
+@media screen and (max-width: 768px) {
+    .column {
+        padding: 0 !important;
+        margin-bottom: 16px !important;
+    }
+}
+
+
+/*============================================================
+ *      Shell confirm dialogs (yui_shell_confirm_*):
+ *      icon-centric layout ported from the legacy volatil
+ *      modals (2.5.0 redesign; c_yui_main.js removed in 3.0.0).
+ *      A narrow rounded card with a tinted round icon of the
+ *      type; everything maps to Bulma vars so one rule set
+ *      follows light and dark.
+ *============================================================*/
+.modal.yui-confirm .modal-background {
+    background-color: color-mix(in srgb, var(--bulma-scheme-invert, #000) 45%, transparent);
+}
+.modal.yui-confirm .modal-card {
+    position: relative;
+    width: min(26rem, calc(100vw - 2rem));
+    border-radius: 0.75rem;
+    background: var(--bulma-scheme-main, #fff);
+    box-shadow: 0 12px 40px color-mix(in srgb, var(--bulma-scheme-invert, #000) 30%, transparent);
+    padding: 1.5rem 1.5rem 1.25rem;
+}
+.modal.yui-confirm .modal-card-body {
+    background: transparent;
+    padding: 0;
+}
+.modal.yui-confirm .modal-card-foot {
+    background: transparent;
+    border-top: none;
+    padding: 1rem 0 0;
+    justify-content: center;
+}
+.yui-confirm-icon {
+    width: 3.25rem;
+    height: 3.25rem;
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 0.75rem;
+    font-size: 1.5rem;
+    background: color-mix(in srgb, var(--yui-confirm-base, var(--bulma-info, #3e8ed0)) 15%, transparent);
+    color: var(--yui-confirm-ink, var(--bulma-info, #3e8ed0));
+}
+.modal.yui-confirm.is-info,
+.modal.yui-confirm.is-question {
+    --yui-confirm-base: var(--bulma-info, #3e8ed0);
+    --yui-confirm-ink: var(--bulma-info-on-scheme, #3e8ed0);
+}
+.modal.yui-confirm.is-success {
+    --yui-confirm-base: var(--bulma-success, #48c78e);
+    --yui-confirm-ink: var(--bulma-success-on-scheme, #257953);
+}
+.modal.yui-confirm.is-warning {
+    --yui-confirm-base: var(--bulma-warning, #ffe08a);
+    --yui-confirm-ink: var(--bulma-warning-on-scheme, #946c00);
+}
+.modal.yui-confirm.is-error {
+    --yui-confirm-base: var(--bulma-danger, #f14668);
+    --yui-confirm-ink: var(--bulma-danger-on-scheme, #cc0f35);
+}
+.yui-confirm-title {
+    font-size: 1.15rem;
+    font-weight: 600;
+    text-transform: capitalize;
+    margin-bottom: 0.25rem;
+    color: var(--bulma-text-strong, inherit);
+}
+.yui-confirm-x {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+}
+.yui-confirm-msg {
+    font-size: 1.05rem;
+    color: var(--bulma-text, inherit);
+}

package/src/c_yui_shell.js

@@ -34,6 +34,8 @@ import {
     gclass_create, log_error, log_warning,
     gobj_create, gobj_destroy,
     gobj_start, gobj_stop,
+    gobj_parent,
+    gobj_gclass_name,
     gobj_publish_event,
     gobj_send_event,
     gobj_subscribe_event,
@@ -68,6 +70,12 @@ import {
  ***************************************************************/
 const GCLASS_NAME = "C_YUI_SHELL";
 
+/*  Last shell created on the page — fallback for yui_shell_of()
+ *  when the caller is not a shell descendant (e.g. a floating
+ *  C_YUI_WINDOW parented to the app gobj).  Real apps have exactly
+ *  one shell; tests that create several get the most recent. */
+let __last_shell__ = null;
+
 /*  Zones rendered inside the base layer. */
 const ZONE_IDS = ["top", "top-sub", "left", "center", "right", "bottom-sub", "bottom"];
 
@@ -166,6 +174,8 @@ function mt_create(gobj)
         active_dropdown: null
     });
 
+    __last_shell__ = gobj;
+
     build_ui(gobj);
 }
 
@@ -318,6 +328,10 @@ function mt_destroy(gobj)
     }
     gobj_write_attr(gobj, "$container", null);
     gobj_write_attr(gobj, "priv", null);
+
+    if(__last_shell__ === gobj) {
+        __last_shell__ = null;
+    }
 }
 
 
@@ -2408,6 +2422,25 @@ function register_c_yui_shell()
  *  bottom of the file to keep the skeleton layout intact.
  ***************************************************************/
 
+/************************************************************
+ *  Resolve the shell that governs `gobj`: the nearest
+ *  C_YUI_SHELL ancestor, else the last shell created on the
+ *  page (apps have exactly one).  Null when no shell exists —
+ *  callers must degrade loudly (shell_modals logs a warning
+ *  and resolves the safe default).
+ ************************************************************/
+function yui_shell_of(gobj)
+{
+    let g = gobj;
+    while(g) {
+        if(gobj_gclass_name(g) === GCLASS_NAME) {
+            return g;
+        }
+        g = gobj_parent(g);
+    }
+    return __last_shell__;
+}
+
 /************************************************************
  *  Programmatic navigation (bypass hash).
  ************************************************************/
@@ -2552,6 +2585,7 @@ function yui_shell_close_dropdown(shell_gobj)
 
 export {
     register_c_yui_shell,
+    yui_shell_of,
     yui_shell_navigate,
     yui_shell_open_drawer,
     yui_shell_close_drawer,

package/src/c_yui_treedb_graph.js

@@ -80,7 +80,8 @@ import {
     set_submit_state,
     set_active_state,
 } from "./lib_graph.js";
-import {display_error_message} from "./c_yui_main.js";
+import {yui_shell_show_error} from "./shell_modals.js";
+import {yui_shell_of} from "./c_yui_shell.js";
 
 import {t} from "i18next";
 
@@ -941,7 +942,7 @@ function ac_mt_command_answer(gobj, event, kw, src)
              *  app-modal that wedges the whole SPA behind an empty tab. */
             show_load_error(gobj, t(comment));
         } else {
-            display_error_message("Error", t(comment));
+            yui_shell_show_error(yui_shell_of(gobj), comment, {t: t});
         }
         // HACK don't return for non-descs, pass errors when need it.
     }

package/src/c_yui_treedb_topic_with_form.css

@@ -45,3 +45,56 @@
 .toolbar_tabulator_table .control.has-icons-left {
     min-width: 0;
 }
+
+/*  Moved from c_yui_main.css (2.6.1): the responsive edit-dialog card
+ *  and the utilities this gclass tags on its DOM.
+ *  Self-contained here so every consumer gets it without the
+ *  legacy stack's stylesheet. */
+
+/* Custom class to adjust the modal width */
+.modal-card.modal-is-responsive {
+    width: 100%;
+    max-width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+    .modal-card.modal-is-responsive {
+        width: 50rem;
+        max-width: 50rem;
+    }
+}
+
+/*
+ *  Mobile (< 768px, dovetails with the desktop rule above): a
+ *  `modal-is-responsive` card (the C_YUI_TREEDB edit/delete form
+ *  popup, and any other consumer of this opt-in class) takes the
+ *  WHOLE screen instead of a centred sheet — more room to edit on a
+ *  phone.  Confirm dialogs do not carry `modal-is-responsive`, so
+ *  they stay compact.  Edge-to-edge: full size, no margin, flat
+ *  corners; the body keeps Bulma's own scroll.
+ */
+@media screen and (max-width: 767px) {
+    .modal-card.modal-is-responsive {
+        width: 100%;
+        max-width: 100%;
+        height: 100%;
+        max-height: 100%;
+        margin: 0;
+        border-radius: 0;
+    }
+    .modal-card.modal-is-responsive .modal-card-head,
+    .modal-card.modal-is-responsive .modal-card-foot {
+        border-radius: 0;
+    }
+    .modal-card.modal-is-responsive .modal-card-body {
+        flex: 1 1 auto;
+        overflow-y: auto;
+    }
+}
+
+.without-border {
+    border: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+}
+

package/src/c_yui_treedb_topic_with_form.js

@@ -57,15 +57,23 @@ import {
 } from "@yuneta/gobj-js";
 
 import {
-    get_yesnocancel,
-    get_ok,
-} from "./c_yui_main.js";
+    yui_shell_confirm_yesnocancel,
+    yui_shell_confirm_ok,
+    yui_shell_popup_layer,
+} from "./shell_modals.js";
+
+import {
+    yui_shell_of,
+    yui_shell_push_escape,
+    yui_shell_pop_escape,
+} from "./c_yui_shell.js";
 
 import {register_c_yui_form} from "./c_yui_form.js";
 
 import {t} from "i18next";
 
 import "./c_yui_treedb_topic_with_form.css";
+import "./tabulator.css";
 
 import { TabulatorFull as Tabulator } from "tabulator-tables";
 
@@ -132,17 +140,26 @@ let PRIVATE_DATA = {
     tabulator:          null,
     form:               null,   // hosted C_YUI_FORM child (while dialog open)
     $popup:             null,   // dialog DOM element
-    on_keydown:         null,   // document Escape handler (while dialog open)
+    on_keydown:         null,   // document Escape handler (no-shell fallback)
+    escape_shell:       null,   // shell whose Escape chain holds escape_handler
+    escape_handler:     null,   // close handler pushed on the shell chain
 };
 
 let __gclass__ = null;
 
-/*  Where to mount the edit/delete modal.  The legacy C_YUI_MAIN
- *  shell provided a "#popup-layer" element; the new C_YUI_SHELL does
- *  not.  Bulma `.modal` is position:fixed, so document.body is a
- *  correct universal fallback (works under any host). */
-function popup_mount_layer()
+/*  Where to mount the edit/delete modal.  Under a C_YUI_SHELL use
+ *  its popup layer (z 20): the shell confirms live on the modal
+ *  layer (z 99), so they always paint above this dialog — a
+ *  body-mounted Bulma `.modal` would cover them (the shell is a
+ *  stacking context below body-level modals).  The legacy
+ *  C_YUI_MAIN "#popup-layer" and document.body (Bulma `.modal` is
+ *  position:fixed) remain the shell-less fallbacks. */
+function popup_mount_layer(gobj)
 {
+    let $layer = yui_shell_popup_layer(yui_shell_of(gobj));
+    if($layer) {
+        return $layer;
+    }
     return document.getElementById("popup-layer") || document.body;
 }
 
@@ -200,6 +217,11 @@ function mt_stop(gobj)
  ***************************************************************/
 function mt_destroy(gobj)
 {
+    /*  A destroy with the edit dialog open (e.g. the hosted view is
+     *  rebuilt on a transport rebind) must tear the dialog down too:
+     *  it unhooks the Escape handler (shell chain or document
+     *  listener) and removes the dialog DOM. */
+    close_form_dialog(gobj);
     destroy_ui(gobj);
 }
 
@@ -1181,17 +1203,30 @@ function open_form_dialog(gobj, mode, record)
         $form_container.style.minHeight = "0";
     }
 
-    popup_mount_layer().appendChild($element);
+    popup_mount_layer(gobj).appendChild($element);
     refresh_language($element, t);
 
-    /*  Escape closes through the same unsaved-changes guard as the X. */
-    priv.on_keydown = function(evt) {
-        if(evt.key === "Escape") {
-            evt.stopPropagation();
+    /*  Escape closes through the same unsaved-changes guard as the X.
+     *  Under a shell, ride its Escape priority chain — LIFO with the
+     *  shell confirm dialogs, so Escape on an open confirm never
+     *  reaches this dialog and stacks a second one.  Without a shell
+     *  (bare unit tests) fall back to a document listener. */
+    let shell = yui_shell_of(gobj);
+    if(shell) {
+        priv.escape_shell = shell;
+        priv.escape_handler = function() {
             request_close_form_dialog(gobj);
-        }
-    };
-    document.addEventListener("keydown", priv.on_keydown);
+        };
+        yui_shell_push_escape(shell, "popup", priv.escape_handler);
+    } else {
+        priv.on_keydown = function(evt) {
+            if(evt.key === "Escape") {
+                evt.stopPropagation();
+                request_close_form_dialog(gobj);
+            }
+        };
+        document.addEventListener("keydown", priv.on_keydown);
+    }
 
     gobj_start(form);   // mt_start loads `record` into the form
 
@@ -1219,8 +1254,12 @@ function request_close_form_dialog(gobj)
         let kw = {};
         gobj_send_event(priv.form, "EV_WINDOW_TO_CLOSE", kw, gobj);
         if(kw.abort_close) {
-            get_yesnocancel(t('All changes will be lost. Are you sure?'), function(evt) {
-                if(evt === "yes") {
+            yui_shell_confirm_yesnocancel(
+                yui_shell_of(gobj),
+                'All changes will be lost. Are you sure?',
+                {t: t, yes_label: "yes", no_label: "no", cancel_label: "cancel"}
+            ).then(function(answer) {
+                if(answer === "yes") {
                     close_form_dialog(gobj);
                 }
             });
@@ -1236,6 +1275,11 @@ function request_close_form_dialog(gobj)
 function close_form_dialog(gobj)
 {
     let priv = gobj.priv;
+    if(priv.escape_handler) {
+        yui_shell_pop_escape(priv.escape_shell, priv.escape_handler);
+        priv.escape_shell = null;
+        priv.escape_handler = null;
+    }
     if(priv.on_keydown) {
         document.removeEventListener("keydown", priv.on_keydown);
         priv.on_keydown = null;
@@ -1640,7 +1684,7 @@ function show_dropdown_popup_menu(gobj, x, y, items, callback)
     /*
      *  Add to popup layer
      */
-    popup_mount_layer().appendChild($element);
+    popup_mount_layer(gobj).appendChild($element);
 
     /*
      *  Set position
@@ -1929,12 +1973,18 @@ function ac_delete_rows(gobj, event, kw, src)
          *----------------------------*/
         let rows = tabulator.getSelectedData();
         if (!rows.length) {
-            get_ok(t('please select some row'));
+            yui_shell_confirm_ok(
+                yui_shell_of(gobj), 'please select some row',
+                {t: t, ok_label: "accept"}
+            );
             return 0;
         }
 
-        get_yesnocancel(t('are you sure'), function(evt) {
-            if(evt === "yes") {
+        yui_shell_confirm_yesnocancel(
+            yui_shell_of(gobj), 'are you sure',
+            {t: t, yes_label: "yes", no_label: "no", cancel_label: "cancel"}
+        ).then(function(answer) {
+            if(answer === "yes") {
                 for(let row of rows) {
                     // TODO why don't send once EV_DELETE_RECORD(S)
                     gobj_publish_event(
@@ -1954,8 +2004,11 @@ function ac_delete_rows(gobj, event, kw, src)
          *  Delete one row
          *  {index: , row: }
          *----------------------------*/
-        get_yesnocancel(t('are you sure'), function(evt) {
-            if(evt === "yes") {
+        yui_shell_confirm_yesnocancel(
+            yui_shell_of(gobj), 'are you sure',
+            {t: t, yes_label: "yes", no_label: "no", cancel_label: "cancel"}
+        ).then(function(answer) {
+            if(answer === "yes") {
                 gobj_publish_event(
                     gobj,
                     "EV_DELETE_RECORD",
@@ -1983,7 +2036,10 @@ function ac_copy_rows(gobj, event, kw, src)
      *----------------------------*/
     let rows = tabulator.getSelectedData();
     if (!rows.length) {
-        get_ok(t('please select some row'));
+        yui_shell_confirm_ok(
+            yui_shell_of(gobj), 'please select some row',
+            {t: t, ok_label: "accept"}
+        );
         return 0;
     }
 

package/src/c_yui_treedb_topics.js

@@ -41,9 +41,8 @@ import {
     refresh_language,
 } from "@yuneta/gobj-js";
 
-import {
-    display_error_message
-} from "./c_yui_main.js";
+import {yui_shell_show_error} from "./shell_modals.js";
+import {yui_shell_of} from "./c_yui_shell.js";
 
 import {t} from "i18next";
 
@@ -819,7 +818,7 @@ function ac_mt_command_answer(gobj, event, kw, src)
              *  app-modal that wedges the whole SPA behind an empty tab. */
             show_load_error(gobj, t(comment));
         } else {
-            display_error_message("Error", t(comment));
+            yui_shell_show_error(yui_shell_of(gobj), comment, {t: t});
         }
         return 0;
     }

package/src/c_yui_window.css

@@ -0,0 +1,22 @@
+/***********************************************************************
+ *          c_yui_window.css
+ *
+ *      Styles C_YUI_WINDOW tags on its chrome.  Moved from
+ *      c_yui_main.css (2.6.1) so windows are self-contained and no
+ *      longer depend on the legacy stack's stylesheet.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+
+.strong-shadow {
+    box-shadow:
+        0 1em 2em -0.125em hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.3),
+        0 0 0 2px hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.1) !important;
+}
+
+.without-border {
+    border: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+}

package/src/c_yui_window.js

@@ -44,7 +44,10 @@ import {
 
 import {t} from "i18next";
 
-import {get_yesnocancel} from "./c_yui_main.js";
+import {yui_shell_confirm_yesnocancel} from "./shell_modals.js";
+import {yui_shell_of} from "./c_yui_shell.js";
+
+import "./c_yui_window.css";
 
 /***************************************************************
  *              Constants
@@ -672,8 +675,11 @@ function close_window(gobj)
         gobj_stop_children(gobj);
         gobj_destroy(gobj);
     } else if(kw_close.warning) {
-        get_yesnocancel(kw_close.warning, function(resp) {
-            if(resp === "yes") {
+        yui_shell_confirm_yesnocancel(
+            yui_shell_of(gobj), kw_close.warning,
+            {t: t, yes_label: "yes", no_label: "no", cancel_label: "cancel"}
+        ).then(function(answer) {
+            if(answer === "yes") {
                 if(on_close) {
                     on_close();
                 }