@yuneta/gobj-ui 2.6.0 → 4.0.0

package/src/shell_modals.js

@@ -41,6 +41,8 @@ import {
 import {
     yui_shell_push_escape,
     yui_shell_pop_escape,
+    yui_shell_register_overlay,
+    yui_shell_overlay_dismissed,
 } from "./c_yui_shell.js";
 
 
@@ -52,7 +54,7 @@ function notification_layer(shell)
     if(!shell) {
         return null;
     }
-    let priv = gobj_read_attr(shell, "priv");
+    let priv = shell.priv;
     return priv && priv.layers && priv.layers.notification;
 }
 
@@ -61,7 +63,7 @@ function modal_layer(shell)
     if(!shell) {
         return null;
     }
-    let priv = gobj_read_attr(shell, "priv");
+    let priv = shell.priv;
     return priv && priv.layers && priv.layers.modal;
 }
 
@@ -75,7 +77,7 @@ export function yui_shell_popup_layer(shell)
     if(!shell) {
         return null;
     }
-    let priv = gobj_read_attr(shell, "priv");
+    let priv = shell.priv;
     return (priv && priv.layers && priv.layers.popup) || null;
 }
 
@@ -119,11 +121,11 @@ function show_notification(shell, kind, message, opts)
         ? {i18n: message}
         : {};
     let $note = createElement2(
-        ["div", {class: `notification yui-notification is-${kind} is-light`,
+        ["div", {class: `TOAST notification yui-notification is-${kind} is-light`,
                  role: kind === "danger" ? "alert" : "status"},
             [
-                ["button", {class: "delete", "aria-label": "close"}],
-                ["p", p_attrs, message]
+                ["button", {class: "TOAST_CLOSE delete", "aria-label": "close"}],
+                ["p", {...p_attrs, class: "TOAST_MSG"}, message]
             ]
         ]
     );
@@ -205,6 +207,14 @@ export function yui_shell_show_modal(shell, content, opts)
      *  history.back()), so gobj-ui stays routing-agnostic. */
     let dialog = !!(opts && opts.dialog);
     let title = (opts && opts.title) || "";
+    /*  Optional DATA half of the title (a topic/service name), never
+     *  translated, shown before `title`. Same contract as C_YUI_WINDOW's
+     *  `title_prefix`, and for the same reason: composing
+     *  `${topic} · ${t("keys")}` into `title` yields a string that is not
+     *  an i18n key, so it never re-translates. Split, only the kind half
+     *  carries a key. The separator is CSS — createElement2 trims text
+     *  nodes and would eat the spaces around it. */
+    let title_prefix = (opts && opts.title_prefix) || "";
 
     /*  The external Bulma `.modal-close is-large` sits at the
      *  top-right of the viewport, outside the content box.  Callers
@@ -214,37 +224,47 @@ export function yui_shell_show_modal(shell, content, opts)
     let with_close = !(opts && opts.with_close_button === false);
     let modal_children;
     if(dialog) {
-        let header = ["div", {class: "yui-dialog-header"}, [
-            ["button", {class: "yui-dialog-back", type: "button", "aria-label": "back"},
+        let header = ["div", {class: "MODAL_HEADER yui-dialog-header"}, [
+            ["button", {class: "MODAL_BACK yui-dialog-back", type: "button", "aria-label": "back"},
                 [["i", {class: "yi-arrow-left"}]]],
-            ["span", {class: "yui-dialog-title", i18n: title}, title],
-            ["button", {class: "yui-dialog-x", type: "button", "aria-label": "close"},
+            ["span", {class: "MODAL_TITLE yui-dialog-title"},
+                (title_prefix ? [["span", {class: "MODAL_TITLE_PREFIX"}, title_prefix]] : [])
+                    .concat(title
+                        ? [["span", {class: "MODAL_TITLE_KIND", i18n: title}, title]]
+                        : [])],
+            ["button", {class: "MODAL_CLOSE yui-dialog-x", type: "button", "aria-label": "close"},
                 [["i", {class: "yi-xmark"}]]],
         ]];
-        let body = ["div", {class: "yui-dialog-body"}, inner ? [inner] : []];
+        let body = ["div", {class: "MODAL_BODY yui-dialog-body"}, inner ? [inner] : []];
         modal_children = [
-            ["div", {class: "modal-background"}],
-            ["div", {class: "modal-content yui-dialog-content"}, [header, body]]
+            ["div", {class: "MODAL_BACKDROP modal-background"}],
+            ["div", {class: "MODAL_CONTENT modal-content yui-dialog-content"}, [header, body]]
         ];
         /*  The header X replaces the external Bulma close button. */
         with_close = false;
     } else {
         modal_children = [
-            ["div", {class: "modal-background"}],
-            ["div", {class: "modal-content"},
+            ["div", {class: "MODAL_BACKDROP modal-background"}],
+            ["div", {class: "MODAL_CONTENT modal-content"},
                 inner ? [inner] : []
             ]
         ];
         if(with_close) {
             modal_children.push(
-                ["button", {class: "modal-close is-large",
+                ["button", {class: "MODAL_CLOSE modal-close is-large",
                             "aria-label": "close"}]
             );
         }
     }
 
+    /*  `opts.logical_class`: the CALLER's UPPER_SNAKE name for THIS modal
+     *  (e.g. TRANGER_KEYS_SHEET). Every modal shares the MODAL block names,
+     *  only this tells one popup from another in the Inspector or a selector. */
+    let logical = (opts && opts.logical_class) || "";
+
     let $modal = createElement2(
-        ["div", {class: "modal yui-modal" + (dialog ? " yui-dialog" : "") + " is-active",
+        ["div", {class: "MODAL" + (logical ? " " + logical : "") +
+                        " modal yui-modal" + (dialog ? " yui-dialog" : "") + " is-active",
                  role: "dialog", "aria-modal": "true"},
             modal_children
         ]
@@ -261,10 +281,13 @@ export function yui_shell_show_modal(shell, content, opts)
     maybe_apply_translator($modal, opts);
 
     let closed = false;
-    let close_fn = null;
     let release_focus = null;
+    let overlay = null;
+    let escape_handler = null;
 
-    let close = function() {
+    /*  Unconditional teardown. The returned close() maps here: a
+     *  programmatic close always closes, bypassing before_close. */
+    let do_close = function() {
         if(closed) {
             return;
         }
@@ -273,13 +296,16 @@ export function yui_shell_show_modal(shell, content, opts)
             release_focus();
             release_focus = null;
         }
-        if(close_fn) {
-            yui_shell_pop_escape(shell, close_fn);
-            close_fn = null;
+        if(escape_handler) {
+            yui_shell_pop_escape(shell, escape_handler);
+            escape_handler = null;
         }
         if($modal.parentNode) {
             $modal.parentNode.removeChild($modal);
         }
+        /*  Retire the browser-history entry (no-op when Back triggered
+         *  this close — the entry is already gone). */
+        yui_shell_overlay_dismissed(shell, overlay);
         if(opts && typeof opts.on_close === "function") {
             try {
                 opts.on_close();
@@ -288,9 +314,50 @@ export function yui_shell_show_modal(shell, content, opts)
             }
         }
     };
-    close_fn = close;
 
-    yui_shell_push_escape(shell, "modal", close);
+    /*  `opts.before_close`: a guard consulted on EVERY user-driven dismiss
+     *  (Escape, backdrop, the X / back-arrow, browser Back). Return false to
+     *  VETO — the modal stays up and the caller takes over (e.g. an
+     *  unsaved-changes prompt that calls close() itself on confirm). Return
+     *  true/undefined to let it close. Absent guard ⇒ always closes, so
+     *  existing callers are unaffected. */
+    let guarded_close = function(on_veto) {
+        if(closed) {
+            return;
+        }
+        let allow = true;
+        if(opts && typeof opts.before_close === "function") {
+            try {
+                allow = opts.before_close();
+            } catch(e) {
+                log_warning(`yui_shell_show_modal: before_close threw: ${e}`);
+                allow = true;
+            }
+        }
+        if(allow === false) {
+            if(typeof on_veto === "function") {
+                on_veto();
+            }
+            return;
+        }
+        do_close();
+    };
+    let request_close = function() {
+        guarded_close(null);
+    };
+    /*  Browser Back already consumed the history entry; if the guard vetoes,
+     *  re-arm a fresh entry so a later Back still targets this modal. */
+    let on_back = function() {
+        guarded_close(function() {
+            overlay = yui_shell_register_overlay(shell, on_back);
+        });
+    };
+
+    escape_handler = request_close;
+    yui_shell_push_escape(shell, "modal", request_close);
+    /*  Browser Back closes the top-most modal (see overlay history in
+     *  c_yui_shell.js).  Null when history integration is off. */
+    overlay = yui_shell_register_overlay(shell, on_back);
     /*  Trap on $modal (not on .modal-content) so the .modal-close
      *  button — rendered as a SIBLING of .modal-content — is
      *  reachable via Tab.  Without this, Tab/Shift+Tab can only
@@ -299,35 +366,50 @@ export function yui_shell_show_modal(shell, content, opts)
     release_focus = activate_focus_trap_on($modal);
 
     if((opts == null || opts.dismiss_on_background !== false)) {
-        $modal.querySelector(".modal-background").addEventListener("click", close);
+        $modal.querySelector(".modal-background").addEventListener("click", request_close);
     }
     let $close_btn = $modal.querySelector(".modal-close");
     if($close_btn) {
-        $close_btn.addEventListener("click", close);
+        $close_btn.addEventListener("click", request_close);
     }
     if(dialog) {
         let $back = $modal.querySelector(".yui-dialog-back");
         if($back) {
-            $back.addEventListener("click", close);
+            $back.addEventListener("click", request_close);
         }
         let $x = $modal.querySelector(".yui-dialog-x");
         if($x) {
-            $x.addEventListener("click", close);
+            $x.addEventListener("click", request_close);
         }
     }
 
-    return { close };
+    return { close: do_close };
 }
 
 
 /***************************************************************
- *              Blocking dialogs (Bulma .modal-card)
+ *              Blocking dialogs (icon-centric .modal-card)
  *
  *      build_dialog returns a Promise that resolves with the
  *      clicked button's `value`.  Escape, the close button and
  *      the dismiss action all resolve with the LAST button's value
  *      (cancel/no/ok by convention — the safe-default action).
+ *
+ *      Layout ported from the legacy volatil modals (2.5.0
+ *      redesign, removed in 3.0.0): a narrow rounded card with a
+ *      tinted round icon of the `opts.type`
+ *      (question/success/info/warning/error, `danger` aliases
+ *      error), optional capitalized title, centered message and
+ *      buttons.  Everything maps to Bulma vars (light and dark).
  ***************************************************************/
+const CONFIRM_TYPE_ICONS = {
+    "info":     "yi-circle-info",
+    "question": "yi-question",
+    "success":  "yi-square-check",
+    "warning":  "yi-triangle-exclamation",
+    "error":    "yi-circle-exclamation",
+};
+
 function build_dialog(shell, message, buttons, opts)
 {
     let $layer = modal_layer(shell);
@@ -339,16 +421,18 @@ function build_dialog(shell, message, buttons, opts)
     let title = (opts && opts.title) || "";
     let dismiss_value = buttons[buttons.length - 1].value;
 
+    let type = ((opts && opts.type) || "question").toLowerCase();
+    if(type === "danger") {
+        type = "error";
+    }
+    let icon = CONFIRM_TYPE_ICONS[type] || CONFIRM_TYPE_ICONS["question"];
+
     let $body_children = (typeof message === "string")
-        ? [["p", {i18n: message}, message]]
+        ? [["p", {class: "CONFIRM_MSG yui-confirm-msg", i18n: message}, message]]
         : [message];
 
-    let title_attrs = !empty_string(title)
-        ? {class: "modal-card-title", i18n: title}
-        : {class: "modal-card-title"};
-
     let $footer_children = buttons.map(b => {
-        let cls = "button";
+        let cls = "CONFIRM_BTN button px-5";
         if(b.kind === "primary") {
             cls += " is-link";
         } else if(b.kind === "danger") {
@@ -362,24 +446,34 @@ function build_dialog(shell, message, buttons, opts)
         return ["button", btn_attrs, b.label];
     });
 
+    let $card_children = [
+        ["div", {class: "CONFIRM_ICON yui-confirm-icon"},
+            [["i", {class: icon, "aria-hidden": "true"}]]
+        ]
+    ];
+    if(!empty_string(title)) {
+        $card_children.push(
+            ["p", {class: "CONFIRM_TITLE yui-confirm-title has-text-centered",
+                   i18n: title}, title]
+        );
+    }
+    $card_children.push(
+        ["button", {class: "CONFIRM_CLOSE delete yui-confirm-x", "aria-label": "close"}],
+        ["section", {class: "CONFIRM_BODY modal-card-body has-text-centered"},
+            $body_children],
+        ["footer", {class: "CONFIRM_FOOT modal-card-foot"}, $footer_children]
+    );
+
+    /*  Caller's own UPPER_SNAKE name for THIS confirm, same contract as
+     *  yui_shell_show_modal's `logical_class`. */
+    let logical = (opts && opts.logical_class) ? " " + opts.logical_class : "";
+
     let $modal = createElement2(
-        ["div", {class: "modal yui-modal yui-confirm is-active",
+        ["div", {class: `CONFIRM${logical} modal yui-modal yui-confirm is-active is-${type}`,
                  role: "dialog", "aria-modal": "true"},
             [
-                ["div", {class: "modal-background"}],
-                ["div", {class: "modal-card"},
-                    [
-                        ["header", {class: "modal-card-head"},
-                            [
-                                ["p", title_attrs, title],
-                                ["button", {class: "delete",
-                                            "aria-label": "close"}]
-                            ]
-                        ],
-                        ["section", {class: "modal-card-body"}, $body_children],
-                        ["footer", {class: "modal-card-foot"}, $footer_children]
-                    ]
-                ]
+                ["div", {class: "CONFIRM_BACKDROP modal-background"}],
+                ["div", {class: "CONFIRM_CARD modal-card"}, $card_children]
             ]
         ]
     );
@@ -390,6 +484,7 @@ function build_dialog(shell, message, buttons, opts)
         let resolved = false;
         let close_fn = null;
         let release_focus = null;
+        let overlay = null;
 
         let close = function(value) {
             if(resolved) {
@@ -407,11 +502,17 @@ function build_dialog(shell, message, buttons, opts)
             if($modal.parentNode) {
                 $modal.parentNode.removeChild($modal);
             }
+            /*  Retire the browser-history entry (no-op when Back
+             *  triggered this close). */
+            yui_shell_overlay_dismissed(shell, overlay);
             resolve(value);
         };
         close_fn = () => close(dismiss_value);
 
         yui_shell_push_escape(shell, "modal", close_fn);
+        /*  Browser Back dismisses the dialog with the safe-default value,
+         *  exactly like Escape. */
+        overlay = yui_shell_register_overlay(shell, close_fn);
         release_focus = activate_focus_trap_on(
             $modal.querySelector(".modal-card")
         );
@@ -419,7 +520,7 @@ function build_dialog(shell, message, buttons, opts)
         $modal.querySelector(".modal-background").addEventListener(
             "click", () => close(dismiss_value)
         );
-        $modal.querySelector(".modal-card-head .delete").addEventListener(
+        $modal.querySelector(".modal-card .delete").addEventListener(
             "click", () => close(dismiss_value)
         );
         let footer_buttons = $modal.querySelectorAll(
@@ -430,6 +531,12 @@ function build_dialog(shell, message, buttons, opts)
                 close($btn.getAttribute("data-modal-button-value"));
             });
         });
+
+        /*  Enter answers the primary action, like the volatil modals. */
+        let $primary = $modal.querySelector(".modal-card-foot button");
+        if($primary) {
+            $primary.focus();
+        }
     });
 }
 
@@ -437,6 +544,9 @@ function build_dialog(shell, message, buttons, opts)
 export function yui_shell_confirm_ok(shell, message, opts)
 {
     let label = (opts && opts.ok_label) || "OK";
+    if(!opts || !opts.type) {
+        opts = Object.assign({}, opts, {type: "success"});
+    }
     return build_dialog(shell, message, [
         {label: label, value: "ok", kind: "primary"}
     ], opts).then(() => undefined);

package/src/shell_route_map.css

@@ -0,0 +1,225 @@
+/***********************************************************************
+ *          shell_route_map.css
+ *
+ *      Styling for the site-map (route-tree) viewer in shell_route_map.js.
+ *      A monospaced, indented tree; theme-aware via Bulma variables;
+ *      and @media print rules (scoped by body.routemap-printing) so the
+ *      Print button prints only the tree.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+.ROUTEMAP_BODY {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: 0;
+}
+/*  In the resizable window, fill the window body so the tree grows/shrinks
+ *  with it (the WINDOW_BODY is is-flex-grow-1 with a definite height). */
+.yui-window-body .ROUTEMAP_BODY {
+    height: 100%;
+}
+.ROUTEMAP_SEARCH_ROW {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+.ROUTEMAP_SEARCH_CTRL {
+    max-width: 22rem;
+    flex: 1 1 auto;
+}
+.ROUTEMAP_COUNT {
+    display: inline-flex;
+    gap: 0.25rem;
+    white-space: nowrap;
+    flex: 0 0 auto;
+}
+.ROUTEMAP_COUNT_N {
+    font-weight: 600;
+}
+/*  Highlight a row that itself matches the filter. */
+.ROUTEMAP_MATCH {
+    background: var(--bulma-warning-light, #fff6d9) !important;
+}
+[data-theme="dark"] .ROUTEMAP_MATCH {
+    background: rgba(255, 221, 87, 0.20) !important;
+}
+.ROUTEMAP_MATCH .ROUTEMAP_NAME,
+.ROUTEMAP_MATCH .ROUTEMAP_ROUTE {
+    color: var(--bulma-text-strong, #363636);
+}
+[data-theme="dark"] .ROUTEMAP_MATCH .ROUTEMAP_NAME,
+[data-theme="dark"] .ROUTEMAP_MATCH .ROUTEMAP_ROUTE {
+    color: #1a1a1a;
+}
+.ROUTEMAP_TREE {
+    font-family: var(--bulma-family-monospace, monospace);
+    font-size: 0.85rem;
+    line-height: 1.5;
+    overflow: auto;
+    min-height: 6rem;
+    /*  Modal fallback: cap and scroll. In the window the rule below
+     *  makes it flex-fill instead. */
+    flex: 0 1 auto;
+    max-height: 68vh;
+    border: 1px solid var(--bulma-border-weak, #dbdbdb);
+    border-radius: 0.375rem;
+    padding: 0.75rem 1rem;
+    background: var(--bulma-scheme-main, #fff);
+}
+/*  In the window: grow to fill the remaining height (after the filter
+ *  and print row) and scroll internally. */
+.yui-window-body .ROUTEMAP_TREE {
+    flex: 1 1 auto;
+    max-height: none;
+}
+.ROUTEMAP_UL {
+    list-style: none;
+    margin: 0;
+    padding-left: 1.1rem;
+    border-left: 1px dotted var(--bulma-border, #b5b5b5);
+}
+.ROUTEMAP_ROOT {
+    padding-left: 0;
+    border-left: none;
+}
+.ROUTEMAP_LI {
+    margin: 0.05rem 0;
+}
+.ROUTEMAP_ROW {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.05rem 0.25rem;
+    border-radius: 0.25rem;
+}
+.ROUTEMAP_ICON {
+    font-size: 0.95rem;
+    color: var(--bulma-text-weak, #7a7a7a);
+}
+a.ROUTEMAP_LINK {
+    text-decoration: none;
+    color: inherit;
+}
+a.ROUTEMAP_LINK:hover {
+    background: var(--bulma-background, #f5f5f5);
+}
+a.ROUTEMAP_LINK .ROUTEMAP_NAME {
+    font-weight: 600;
+    color: var(--bulma-text, inherit);
+}
+.ROUTEMAP_NAME {
+    color: var(--bulma-text, inherit);
+}
+.ROUTEMAP_ROUTE {
+    background: transparent;
+    color: var(--bulma-link, #485fc7);
+    padding: 0;
+    font-size: 0.8rem;
+}
+/*  Implementing GClass pill (teal) — distinct from route (blue) and
+ *  event (grey). */
+.ROUTEMAP_GCLASS {
+    font-family: var(--bulma-family-monospace, monospace);
+    font-size: 0.7rem;
+    padding: 0.02rem 0.35rem;
+    border-radius: 0.25rem;
+    background: var(--bulma-link-light, #eff1fa);
+    color: var(--bulma-link-dark, #3850b7);
+    white-space: nowrap;
+}
+[data-theme="dark"] .ROUTEMAP_GCLASS {
+    background: rgba(120, 150, 255, 0.16);
+    color: #aab8ff;
+}
+
+/*  Action event badge — explicit colours (not Bulma's is-light tag) so it
+ *  stays legible in dark mode. */
+.ROUTEMAP_EVENT {
+    font-family: var(--bulma-family-monospace, monospace);
+    font-size: 0.72rem;
+    padding: 0.02rem 0.4rem;
+    border-radius: 0.25rem;
+    background: var(--bulma-background, #f0f0f0);
+    color: var(--bulma-text-strong, #363636);
+    border: 1px solid var(--bulma-border-weak, #dbdbdb);
+    white-space: nowrap;
+}
+[data-theme="dark"] .ROUTEMAP_EVENT {
+    background: rgba(255, 255, 255, 0.10);
+    color: #e6e6e6;
+    border-color: rgba(255, 255, 255, 0.20);
+}
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) .ROUTEMAP_EVENT {
+        background: rgba(255, 255, 255, 0.10);
+        color: #e6e6e6;
+        border-color: rgba(255, 255, 255, 0.20);
+    }
+}
+/*  "You are here" — the row of the route the user is currently on. */
+.ROUTEMAP_CURRENT {
+    background: var(--bulma-link-light, #eff1fa) !important;
+    outline: 1px solid var(--bulma-link, #485fc7);
+}
+[data-theme="dark"] .ROUTEMAP_CURRENT {
+    background: rgba(120, 150, 255, 0.16) !important;
+    outline-color: rgba(120, 150, 255, 0.55);
+}
+.ROUTEMAP_HERE {
+    font-size: 0.68rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    padding: 0.02rem 0.4rem;
+    border-radius: 0.25rem;
+    background: var(--bulma-link, #485fc7);
+    color: var(--bulma-link-invert, #fff);
+    white-space: nowrap;
+}
+.ROUTEMAP_STRUCT .ROUTEMAP_NAME {
+    color: var(--bulma-text-weak, #7a7a7a);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    font-size: 0.78rem;
+    font-weight: 700;
+}
+.ROUTEMAP_HINT {
+    color: var(--bulma-text-weak, #7a7a7a);
+}
+.ROUTEMAP_ACTIONS {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 0.75rem;
+}
+
+/*  Print only the tree. On print the button clones the tree into
+ *  `.routemap-print-area` (off-screen) and sets body.routemap-printing;
+ *  everything else is hidden regardless of where the window/modal lives. */
+.routemap-print-area {
+    display: none;
+}
+@media print {
+    body.routemap-printing > *:not(.routemap-print-area) {
+        display: none !important;
+    }
+    body.routemap-printing .routemap-print-area {
+        display: block !important;
+    }
+    .routemap-print-area .ROUTEMAP_TREE {
+        max-height: none;
+        border: none;
+        overflow: visible;
+        font-size: 10pt;
+    }
+    .routemap-print-area .ROUTEMAP_ROUTE,
+    .routemap-print-area .ROUTEMAP_NAME {
+        color: #000 !important;
+    }
+    .routemap-print-area .ROUTEMAP_EVENT {
+        background: transparent !important;
+        color: #000 !important;
+        border-color: #999 !important;
+    }
+}