@yuneta/gobj-ui 7.23.142 → 7.23.144

package/index.js

@@ -23,6 +23,7 @@ export { register_c_yui_map } from "./src/c_yui_map.js";
 export { register_c_yui_uplot } from "./src/c_yui_uplot.js";
 export { register_c_yui_json_graph } from "./src/c_yui_json_graph.js";
 export { register_c_yui_json } from "./src/c_yui_json.js";
+export { register_c_yui_json_pad } from "./src/c_yui_json_pad.js";
 export { register_c_yui_gclass } from "./src/c_yui_gclass.js";
 export { register_c_yui_fsm_graph } from "./src/c_yui_fsm_graph.js";
 export { register_c_yui_gobj_tree_js } from "./src/c_yui_gobj_tree_js.js";
@@ -129,6 +130,7 @@ export { yui_theme_now, yui_is_dark, yui_watch_theme } from "./src/yui_theme.js"
 export { attach_clear, refresh_clear } from "./src/yui_inputs.js";
 export { info_traffic, setup_dev, build_dev_panel, apply_dev_traces, dev_window_was_open } from "./src/yui_dev.js";
 export { setup_frontend_view } from "./src/yui_frontend_view.js";
+export { setup_json_pad } from "./src/yui_json_pad.js";
 
 /*
  *  CSS - import these in your main entry point

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.142",
+  "version": "7.23.144",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_json_pad.css

@@ -0,0 +1,94 @@
+/***********************************************************************
+ *          c_yui_json_pad.css
+ *
+ *          Layout of C_YUI_JSON_PAD: the two panes side by side, stacked
+ *          when the PAD (not the screen) is narrow -- it lives in a window
+ *          the reader resizes.  The logical block names double as hooks.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+.JSON_PAD {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    padding: .5rem;
+    container-type: inline-size;
+}
+
+.JSON_PAD_TOOLBAR {
+    flex: 0 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: .5rem;
+}
+
+.JSON_PAD_NOTICE {
+    flex: 1 1 auto;
+}
+
+.JSON_PAD_PANES {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: row;
+    gap: .5rem;
+}
+
+.JSON_PAD_PANE {
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+}
+
+/*  Comparing: the viewers give their place to the differences, and the
+ *  panes keep only their text areas.  */
+.JSON_PAD.is-comparing .JSON_PAD_PANES {
+    flex: 0 0 auto;
+}
+
+.JSON_PAD_DIFF {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+}
+
+.JSON_PAD_DIFF_SUMMARY {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-bottom: .5rem;
+}
+
+.JSON_PAD_DIFF_COUNT {
+    display: inline-flex;
+    align-items: center;
+    gap: .35rem;
+}
+
+.JSON_PAD_DIFF_TABLE {
+    font-size: .85rem;
+}
+
+.JSON_PAD_DIFF_TABLE td.JSON_PAD_DIFF_PATH,
+.JSON_PAD_DIFF_TABLE td.JSON_PAD_DIFF_FROM,
+.JSON_PAD_DIFF_TABLE td.JSON_PAD_DIFF_TO {
+    font-family: monospace;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+
+@container (max-width: 40rem) {
+    .JSON_PAD_PANES {
+        flex-direction: column;
+    }
+    .JSON_PAD.is-comparing .JSON_PAD_PANE {
+        flex: 0 0 auto;
+    }
+}