@yuneta/gobj-ui 3.0.0 → 4.0.0

package/src/yui_dev.js

@@ -15,9 +15,10 @@ import {
     gobj_write_attr,
     gobj_create_service,
     gobj_find_service,
+    gobj_start,
     set_log_callback,
+    set_console_log_enabled,
     gobj_set_trace_machine_format,
-    trace_json,
 } from "@yuneta/gobj-js";
 
 import i18next from 'i18next';
@@ -37,6 +38,13 @@ let TRAFFIC_LOG = [];               // [{title,event,command,sig,dir,size,ts,kw,
 let TRAFFIC_COUNTS = new Map();     // signature -> occurrences (for periodic detection)
 let SEARCH_TEXT = "";               // session-only free-text filter (not persisted)
 
+/*  Running totals of framework errors/warnings seen since page load (or the
+ *  last Clear). Kept apart from TRAFFIC_LOG so the 600-entry cap can't rotate
+ *  an error out of the count — the whole point of the status-line tally is to
+ *  not lose that signal under a flood of automata/debug lines. */
+let LOG_ERR_COUNT = 0;
+let LOG_WARN_COUNT = 0;
+
 /*  Field names whose numeric value is a Unix timestamp (seconds). */
 const TRAFFIC_TS_FIELDS = {
     "__t__": 1, "__tm__": 1, "tm": 1, "t": 1,
@@ -161,6 +169,41 @@ function dev_hide_periodic()
     return dev_num("dev_hide_periodic", 0) ? true : false;
 }
 
+/*  Where dev output (traffic + all logs + automata) is routed:
+ *  "window"  → dev window only  (browser console silenced framework-wide)
+ *  "console" → browser console only  (nothing appended to the window)
+ *  "both"    → console + window  (default; unchanged from prior behaviour)
+ *  The console side of logs is gated in gobj-js (set_console_log_enabled);
+ *  the window side is gated here, in info_traffic / info_log. */
+function dev_route()
+{
+    let v = kw_get_local_storage_value("dev_output_route", "both", false);
+    return (v === "window" || v === "console") ? v : "both";
+}
+
+/*  Push the current route's console decision down to gobj-js. Called from
+ *  apply_dev_traces (startup) and whenever the Output selector changes. */
+function apply_console_route()
+{
+    set_console_log_enabled(dev_route() !== "window");
+}
+
+/*  Emit one inter-event traffic line to the browser console (routes
+ *  "console" and "both"). gobj-js only knows about framework logs, not this
+ *  traffic feed, so the console mirror is produced here. */
+function console_traffic(title, jn, direction, size)
+{
+    let event = (jn && jn.event) ? String(jn.event) : "(no event)";
+    let kw = (jn && jn.kw && typeof jn.kw === "object") ? jn.kw : jn;
+    let color = (direction === 2) ? "#16a34a" : (direction === 3) ? "#dc2626" : "#2563eb";
+    window.console.log(
+        "%c" + dir_arrow(direction) + " " + (title ? "[" + title + "] " : "") + event +
+            (size ? "  (" + size + "b)" : ""),
+        "color:" + color,
+        kw
+    );
+}
+
 function dev_muted()
 {
     let a = kw_get_local_storage_value("dev_muted_events", [], false);
@@ -182,6 +225,17 @@ function set_view(v)
     refresh_dev_chrome();
 }
 
+function set_output_route(v)
+{
+    if(v !== "window" && v !== "console" && v !== "both") {
+        v = "both";
+    }
+    kw_set_local_storage_value("dev_output_route", v);
+    apply_console_route();
+    rerender_all();
+    refresh_dev_chrome();
+}
+
 function toggle_pref(key, def)
 {
     let v = dev_num(key, def) ? 0 : 1;
@@ -353,6 +407,8 @@ function ensure_dev_style()
     background: rgba(217,119,6,0.12); color: #b45309; cursor: pointer;
 }
 .YDEV_STAT.s-out { color: #2563eb; } .YDEV_STAT.s-in { color: #059669; } .YDEV_STAT.s-err { color: #dc2626; }
+.YDEV_STAT.s-warn { color: #d97706; }
+.YDEV_STAT.is-strong { font-weight: 700; }
 .YDEV_TITLE { display: flex; align-items: baseline; gap: 8px; }
 .YDEV_TITLE_MAIN { font-weight: 700; }
 .YDEV_TITLE_SUB { opacity: 0.7; font-size: 12px; }
@@ -419,6 +475,7 @@ details.TRAFFIC_NEST > summary::-webkit-details-marker { display: none; }
 :root[data-theme="dark"] .dir-in .TRAFFIC_ARROW,  :root[data-theme="dark"] .dir-in .TRAFFIC_EVENT { color: #34d399; }
 :root[data-theme="dark"] .dir-err .TRAFFIC_ARROW, :root[data-theme="dark"] .dir-err .TRAFFIC_EVENT { color: #f87171; }
 :root[data-theme="dark"] .YDEV_STAT.s-out { color: #60a5fa; } :root[data-theme="dark"] .YDEV_STAT.s-in { color: #34d399; } :root[data-theme="dark"] .YDEV_STAT.s-err { color: #f87171; }
+:root[data-theme="dark"] .YDEV_STAT.s-warn { color: #fbbf24; }
 :root[data-theme="dark"] .TRAFFIC_VAL.t-num { color: #22d3ee; }
 :root[data-theme="dark"] .TRAFFIC_VAL.t-bool, :root[data-theme="dark"] .TRAFFIC_VAL.t-null { color: #c084fc; }
 :root[data-theme="dark"] .YDEV_CHIP.is-active { background: rgba(96,165,250,0.2); border-color: #60a5fa; color: #93c5fd; }
@@ -726,6 +783,8 @@ function clear_traffic()
 {
     TRAFFIC_LOG.length = 0;
     TRAFFIC_COUNTS.clear();
+    LOG_ERR_COUNT = 0;
+    LOG_WARN_COUNT = 0;
     let logger = document.getElementById('developer-traffic-logger');
     if(logger) {
         logger.replaceChildren();
@@ -792,7 +851,11 @@ function update_stats()
         }
     }
     $s.replaceChildren();
+    /*  Errors/warnings first — the signal you don't want to miss. Session
+     *  totals (see LOG_ERR_COUNT), bold when non-zero so they stand out. */
     let cells = [
+        [`✖ ${LOG_ERR_COUNT} err`, 's-err' + (LOG_ERR_COUNT ? ' is-strong' : '')],
+        [`▲ ${LOG_WARN_COUNT} warn`, 's-warn' + (LOG_WARN_COUNT ? ' is-strong' : '')],
         [`${shown}/${total} shown`, ''],
         [`⇢ ${out}`, 's-out'],
         [`⇠ ${inc}`, 's-in'],
@@ -834,12 +897,6 @@ function append_and_follow(logger, node)
  ************************************************************/
 function info_traffic(title, msg, direction, size)
 {
-    let logger = document.getElementById('developer-traffic-logger');
-    if(!logger) {
-        trace_json(msg);
-        return;
-    }
-
     if(!size) {
         size = 0;
     }
@@ -851,6 +908,21 @@ function info_traffic(title, msg, direction, size)
         return;
     }
 
+    let route = dev_route();
+
+    /*  Console side (routes "console" / "both"). */
+    if(route !== "window") {
+        console_traffic(title, jn, direction, size);
+    }
+
+    /*  Window side: skip when routed to the console only, or when the window
+     *  is not mounted (closed). No fallback console dump — console_traffic
+     *  above already covered every route that wants console output. */
+    let logger = document.getElementById('developer-traffic-logger');
+    if(!logger || route === "console") {
+        return;
+    }
+
     ensure_dev_style();
 
     let event = (jn && jn.event) ? String(jn.event) : "(no event)";
@@ -923,6 +995,21 @@ function info_log(level, msg, hora)
     if(__in_info_log__) {
         return;
     }
+    /*  Tally errors/warnings for the status line, always — before any routing
+     *  or window-open guard, so the count reflects the whole session even
+     *  while the window is closed or output is routed to the console. */
+    if(level === "error") {
+        LOG_ERR_COUNT++;
+    } else if(level === "warning") {
+        LOG_WARN_COUNT++;
+    }
+    /*  Routed to the console only: the line already reached the browser
+     *  console (gobj-js gate left on), so don't mirror it into the window —
+     *  but keep the status-line tally live if the window is open. */
+    if(dev_route() === "console") {
+        update_stats();
+        return;
+    }
     let logger = document.getElementById('developer-traffic-logger');
     if(!logger) {
         return;
@@ -1084,6 +1171,11 @@ function refresh_dev_chrome()
         $b.classList.toggle('is-active', $b.getAttribute('data-view') === view);
     });
 
+    let route = dev_route();
+    document.querySelectorAll('.YDEV_SEG_BTN[data-output]').forEach(($b) => {
+        $b.classList.toggle('is-active', $b.getAttribute('data-output') === route);
+    });
+
     /*  The Expand section toggles only apply to the Expanded view — show
      *  the group only there, and reflect each toggle's persisted state. */
     let $eg = document.getElementById('ydev-expand-grp');
@@ -1236,6 +1328,27 @@ function build_control_bar()
         mk_view('name', 'Name only'),
     ]];
 
+    /*  Output routing: send traffic + all logs + automata to the dev window,
+     *  the browser console, or both. */
+    let OUT_TITLES = {
+        window:  'Dev window only (browser console stays clean)',
+        console: 'Browser console only (nothing shown in this window)',
+        both:    'Dev window and browser console',
+    };
+    let mk_out = (v, label) => ['button', {
+        class: 'YDEV_SEG_BTN', 'data-output': v, type: 'button', title: OUT_TITLES[v],
+    }, label, {
+        click: (ev) => {
+            ev.stopPropagation();
+            set_output_route(v);
+        }
+    }];
+    let output_seg = ['div', {class: 'YDEV_SEG', id: 'ydev-output'}, [
+        mk_out('window', 'Window'),
+        mk_out('console', 'Console'),
+        mk_out('both', 'Both'),
+    ]];
+
     /*  Expanded-view section toggles (only meaningful in the 'full' view;
      *  the group is shown/hidden by refresh_dev_chrome). */
     let mk_expand = (key, label) => ['button', {
@@ -1312,6 +1425,7 @@ function build_control_bar()
 
     return createElement2(['div', {class: 'YDEV_BAR'}, [
         grp('Traces', [...trace_chips, simple_mach]), sep(),
+        grp('Output', [output_seg]), sep(),
         grp('View', [view_seg]), expand_grp, sep(),
         grp('Show', [...dir_chips, periodic_chip]), sep(),
         grp('Find', [search]), sep(),
@@ -1393,6 +1507,10 @@ function apply_dev_traces()
      *  automata FSM trace arrives as debug) into the monitor. info_log no-ops
      *  while the window is closed, so this is safe to leave armed. */
     set_log_callback(info_log);
+
+    /*  Honour the persisted Window / Console / Both routing at startup so a
+     *  refresh keeps the console silenced when "Window only" was chosen. */
+    apply_console_route();
 }
 
 /************************************************************
@@ -1409,7 +1527,7 @@ function setup_dev(self, show)
     if(show) {
         ensure_dev_style();
 
-        gobj_create_service(
+        let win = gobj_create_service(
             "Developer-Window",
             "C_YUI_WINDOW",
             {
@@ -1435,6 +1553,10 @@ function setup_dev(self, show)
             },
             self
         );
+        /*  c_yuno's mt_play only starts the DEFAULT service, so a service
+         *  created here is ours to start; unstarted, it shows up in every
+         *  trace line as `!!C_YUI_WINDOW^Developer-Window`. */
+        gobj_start(win);
 
         kw_set_local_storage_value("open_developer_window", 1);
 

package/src/yui_frontend_view.js

@@ -0,0 +1,106 @@
+/***********************************************************************
+ *          yui_frontend_view.js
+ *
+ *          Frontend view — the gobj tree of the own yuno in a
+ *          floating window, peer of the developer window (yui_dev.js).
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {
+    createElement2,
+    gobj_create_service,
+    gobj_create_pure_child,
+    gobj_find_service,
+    gobj_read_attr,
+    gobj_start_tree,
+    log_error,
+} from "@yuneta/gobj-js";
+
+/*  Service name of the window. The host toggles the entry by looking
+ *  it up, exactly as it does with "Developer-Window". */
+const WIN_NAME = "Frontend-View-Window";
+
+
+                    /******************************
+                     *      Public API
+                     ******************************/
+
+
+/************************************************************
+ *  Open the gobj tree (C_YUI_GOBJ_TREE_JS) inside a non-modal
+ *  C_YUI_WINDOW (title bar + maximize + close + resize), the
+ *  same shape as the developer window.
+ *
+ *  Shell-agnostic: the legacy C_YUI_MAIN shell has a
+ *  '#top-layer' stacking element; the new C_YUI_SHELL does not.
+ *  We pass that element when present, otherwise null — C_YUI_WINDOW
+ *  falls back to document.body by contract.
+ *
+ *  Returns the window gobj, or null.
+ ************************************************************/
+function setup_frontend_view(self)
+{
+    if(gobj_find_service(WIN_NAME, false)) {
+        return null;
+    }
+
+    /*  The tree is created AFTER the window, as a pure child of it, so
+     *  every teardown path (the ✕, or the host destroying the window to
+     *  toggle the entry off) takes the tree down with it. That is why
+     *  the body is this placeholder: C_YUI_WINDOW builds its UI in
+     *  mt_create, so it cannot be handed a gobj that does not exist yet. */
+    let $body = createElement2(
+        ["div", {class: "YFRONT_BODY",
+            style: "height:100%; display:flex; flex-direction:column;"}, []]
+    );
+
+    let win = gobj_create_service(
+        WIN_NAME,
+        "C_YUI_WINDOW",
+        {
+            $parent: (typeof document !== "undefined" &&
+                document.getElementById("top-layer")) || null,
+            subscriber: null,
+            modal: false,
+            showMax: true,
+            showFooter: false,
+            resizable: true,
+            center: false,
+            auto_save_size_and_position: true,
+            width: 900,
+            height: 640,
+            logical_class: "FRONTEND_VIEW_WINDOW",
+            title: "frontend view",
+            icon: "yi-hexagon-nodes",
+            body: $body,
+            /*  Opt into the dock/taskbar if the app provides one. `|| null`
+             *  because gobj_find_service returns undefined when absent, and
+             *  an undefined attr value logs "attr undefined: manager" (apps
+             *  without a window manager, e.g. wattyzer). null = no dock. */
+            manager: gobj_find_service("__window_manager__", false) || null,
+        },
+        self
+    );
+    if(!win) {
+        log_error("yui_frontend_view: cannot create the frontend-view window");
+        return null;
+    }
+
+    /*  The window is mounted by its mt_create, so $body is already live
+     *  DOM here: the tree's own mt_start (build_graph + load_tree) and its
+     *  ResizeObserver need the canvas attached to measure it. */
+    let tree = gobj_create_pure_child("frontend_view_tree", "C_YUI_GOBJ_TREE_JS", {}, win);
+    let $tree = gobj_read_attr(tree, "$container");
+    if(!$tree) {
+        log_error("yui_frontend_view: C_YUI_GOBJ_TREE_JS without $container");
+        return win;
+    }
+    $body.appendChild($tree);
+
+    gobj_start_tree(win);
+
+    return win;
+}
+
+export {setup_frontend_view};

package/src/yui_icons.css

@@ -82,6 +82,17 @@
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M256 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 160-160 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l160 0 0 160c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160 160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-160 0 0-160z'/%3E%3C/svg%3E");
 }
 
+/*  yi-plug / yi-plug-slash: hand-drawn masks (connect / disconnect).  */
+.yi-plug::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Crect x='64' y='0' width='64' height='168' rx='32'/%3E%3Crect x='256' y='0' width='64' height='168' rx='32'/%3E%3Cpath d='M32 128h320c17.7 0 32 14.3 32 32v48c0 88.4-71.6 160-160 160v112c0 17.7-14.3 32-32 32s-32-14.3-32-32V368C71.6 368 0 296.4 0 208v-48c0-17.7 14.3-32 32-32z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Crect x='64' y='0' width='64' height='168' rx='32'/%3E%3Crect x='256' y='0' width='64' height='168' rx='32'/%3E%3Cpath d='M32 128h320c17.7 0 32 14.3 32 32v48c0 88.4-71.6 160-160 160v112c0 17.7-14.3 32-32 32s-32-14.3-32-32V368C71.6 368 0 296.4 0 208v-48c0-17.7 14.3-32 32-32z'/%3E%3C/svg%3E");
+}
+
+.yi-plug-slash::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Crect x='64' y='0' width='64' height='168' rx='32'/%3E%3Crect x='256' y='0' width='64' height='168' rx='32'/%3E%3Cpath d='M32 128h320c17.7 0 32 14.3 32 32v48c0 88.4-71.6 160-160 160v112c0 17.7-14.3 32-32 32s-32-14.3-32-32V368C71.6 368 0 296.4 0 208v-48c0-17.7 14.3-32 32-32z'/%3E%3Cpath d='M10.5 81.9 53.5 46.1 373.5 430.1 330.5 465.9z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Crect x='64' y='0' width='64' height='168' rx='32'/%3E%3Crect x='256' y='0' width='64' height='168' rx='32'/%3E%3Cpath d='M32 128h320c17.7 0 32 14.3 32 32v48c0 88.4-71.6 160-160 160v112c0 17.7-14.3 32-32 32s-32-14.3-32-32V368C71.6 368 0 296.4 0 208v-48c0-17.7 14.3-32 32-32z'/%3E%3Cpath d='M10.5 81.9 53.5 46.1 373.5 430.1 330.5 465.9z'/%3E%3C/svg%3E");
+}
+
 .yi-question::before {
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M64 160c0-53 43-96 96-96s96 43 96 96c0 42.7-27.9 78.9-66.5 91.4-28.4 9.2-61.5 35.3-61.5 76.6l0 24c0 17.7 14.3 32 32 32s32-14.3 32-32l0-24c0-1.7 .6-4.1 3.5-7.3 3-3.3 7.9-6.5 13.7-8.4 64.3-20.7 110.8-81 110.8-152.3 0-88.4-71.6-160-160-160S0 71.6 0 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm96 352c22.1 0 40-17.9 40-40s-17.9-40-40-40-40 17.9-40 40 17.9 40 40 40z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M64 160c0-53 43-96 96-96s96 43 96 96c0 42.7-27.9 78.9-66.5 91.4-28.4 9.2-61.5 35.3-61.5 76.6l0 24c0 17.7 14.3 32 32 32s32-14.3 32-32l0-24c0-1.7 .6-4.1 3.5-7.3 3-3.3 7.9-6.5 13.7-8.4 64.3-20.7 110.8-81 110.8-152.3 0-88.4-71.6-160-160-160S0 71.6 0 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm96 352c22.1 0 40-17.9 40-40s-17.9-40-40-40-40 17.9-40 40 17.9 40 40 40z'/%3E%3C/svg%3E");
@@ -254,3 +265,54 @@
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zm32 224a32 32 0 1 1 -64 0 32 32 0 1 1 64 0z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zm32 224a32 32 0 1 1 -64 0 32 32 0 1 1 64 0z'/%3E%3C/svg%3E");
 }
+
+.yi-pause::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z'/%3E%3C/svg%3E");
+}
+
+.yi-play::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/%3E%3C/svg%3E");
+}
+
+.yi-download::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/svg%3E");
+}
+
+.yi-link::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/svg%3E");
+}
+
+/* --- Date navigator (C_YUI_PERIOD) --- */
+.yi-chevron-left::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E");
+}
+
+.yi-chevron-right::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
+}
+
+.yi-forward-step::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416L0 96C0 83.6 7.2 72.3 18.4 67s24.5-3.6 34.1 4.4l192 160L256 241l0-145c0-17.7 14.3-32 32-32s32 14.3 32 32l0 320c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-145-11.5 9.6-192 160z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416L0 96C0 83.6 7.2 72.3 18.4 67s24.5-3.6 34.1 4.4l192 160L256 241l0-145c0-17.7 14.3-32 32-32s32 14.3 32 32l0 320c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-145-11.5 9.6-192 160z'/%3E%3C/svg%3E");
+}
+
+.yi-calendar-days::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M128 0c17.7 0 32 14.3 32 32l0 32 128 0 0-32c0-17.7 14.3-32 32-32s32 14.3 32 32l0 32 48 0c26.5 0 48 21.5 48 48l0 48L0 160l0-48C0 85.5 21.5 64 48 64l48 0 0-32c0-17.7 14.3-32 32-32zM0 192l448 0 0 272c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 192zm64 80l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm128 0l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM64 400l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zm112 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M128 0c17.7 0 32 14.3 32 32l0 32 128 0 0-32c0-17.7 14.3-32 32-32s32 14.3 32 32l0 32 48 0c26.5 0 48 21.5 48 48l0 48L0 160l0-48C0 85.5 21.5 64 48 64l48 0 0-32c0-17.7 14.3-32 32-32zM0 192l448 0 0 272c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 192zm64 80l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm128 0l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM64 400l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zm112 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16z'/%3E%3C/svg%3E");
+}
+
+.yi-ellipsis::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E");
+}
+
+.yi-backward-step::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M267.5 440.6c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29l0-320c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4l-192 160L64 241l0-145c0-17.7-14.3-32-32-32S0 78.3 0 96L0 416c0 17.7 14.3 32 32 32s32-14.3 32-32l0-145 11.5 9.6 192 160z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M267.5 440.6c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29l0-320c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4l-192 160L64 241l0-145c0-17.7-14.3-32-32-32S0 78.3 0 96L0 416c0 17.7 14.3 32 32 32s32-14.3 32-32l0-145 11.5 9.6 192 160z'/%3E%3C/svg%3E");
+}

package/src/yui_inputs.css

@@ -4,8 +4,10 @@
  *      Styling for the editable-input helpers in yui_inputs.js.
  *
  *      The clear button itself is Bulma's `.delete`; here we only
- *      position it over the input's right padding and show it only
- *      while the field has content.
+ *      position it over the input's right padding and reveal it only
+ *      while the field has content AND is focused for editing — so a
+ *      form full of pre-filled fields shows the ✕ on just the field the
+ *      user is on, not on every populated one at once.
  *
  *          Copyright (c) 2026, ArtGins.
  *          All Rights Reserved.
@@ -27,6 +29,9 @@
     display: none;
     z-index: 4;
 }
-.control.has-clear .yui-input-clear.is-visible {
+/*  `.is-visible` (JS-toggled) means "has content"; the ✕ only actually
+ *  appears while the control also holds focus, so an edit form doesn't
+ *  light up an ✕ on every filled field — only on the one being edited.  */
+.control.has-clear:focus-within .yui-input-clear.is-visible {
     display: inline-block;
 }

package/src/yui_inputs.js

@@ -4,7 +4,10 @@
  *      Reusable editable-input helpers.
  *
  *      NORM: every editable text/search input gets a clear (✕) button
- *      that appears only while the field has content. `attach_clear()`
+ *      that appears only while the field has content AND is focused for
+ *      editing (`:focus-within`, see yui_inputs.css) — so a form full of
+ *      pre-filled fields shows the ✕ on the field the user is on, not on
+ *      every populated field at once. `attach_clear()`
  *      wires it onto any Bulma `.control` that wraps an `<input>`:
  *
  *          let $input = createElement2(["input", {class:"input"}, ...]);
@@ -28,6 +31,16 @@ import {createElement2} from "@yuneta/gobj-js";
 import i18next from "i18next";
 
 
+/***************************************************************
+ *  The ✕ shows only when there is something to clear AND the field
+ *  can actually be edited — a readonly/disabled input (e.g. the pkey
+ *  in "update" mode) must not offer it.
+ ***************************************************************/
+function clear_visible($input)
+{
+    return !!$input.value && !$input.readOnly && !$input.disabled;
+}
+
 /***************************************************************
  *  Add a clear (✕) button to a Bulma control wrapping an input.
  *  Returns the button element (already appended to $control).
@@ -39,21 +52,29 @@ function attach_clear($control, $input, on_clear)
     }
     $control.classList.add("has-clear");
 
+    /*  The key travels with the button: a `title` set from t() at build time
+     *  is invisible to refresh_language(), so the tooltip stayed in the old
+     *  language for the life of the input.  */
     let $btn = createElement2(["button", {
-        type:         "button",
-        class:        "delete is-medium yui-input-clear",
-        tabindex:     "-1",
-        title:        i18next.t("clear"),
-        "aria-label": i18next.t("clear")
+        type:                    "button",
+        class:                   "delete is-medium yui-input-clear",
+        tabindex:                "-1",
+        title:                   i18next.t("clear"),
+        "aria-label":            i18next.t("clear"),
+        "data-i18n-title":       "clear",
+        "data-i18n-aria-label":  "clear"
     }]);
 
     function sync()
     {
-        $btn.classList.toggle("is-visible", !!$input.value);
+        $btn.classList.toggle("is-visible", clear_visible($input));
     }
 
     $input.addEventListener("input", sync);
     $btn.addEventListener("click", () => {
+        if($input.readOnly || $input.disabled) {
+            return;
+        }
         $input.value = "";
         $input.dispatchEvent(new Event("input", {bubbles: true}));
         if(typeof on_clear === "function") {
@@ -68,4 +89,26 @@ function attach_clear($control, $input, on_clear)
     return $btn;
 }
 
-export {attach_clear};
+/***************************************************************
+ *  Re-evaluate a clear (✕) after a PROGRAMMATIC change to its input
+ *  — a value loaded into the form, or `readonly` toggled by the form
+ *  mode — neither of which fires an `input` event. No-op on inputs
+ *  that never got a clear.
+ ***************************************************************/
+function refresh_clear($input)
+{
+    if(!$input) {
+        return;
+    }
+    let $control = $input.closest(".control.has-clear");
+    if(!$control) {
+        return;
+    }
+    let $btn = $control.querySelector(".yui-input-clear");
+    if(!$btn) {
+        return;
+    }
+    $btn.classList.toggle("is-visible", clear_visible($input));
+}
+
+export {attach_clear, refresh_clear};