@yuneta/gobj-ui 7.23.143 → 7.23.144

package/dist/gobj-ui.es.js

@@ -1,5 +1,5 @@
 import * as gobj_js from "@yuneta/gobj-js";
-import { SDATA, SDATA_END, clean_name, createElement2, createOneHtml, create_template_record, data_type_t, debounce, delete_from_list, duplicate_objects, empty_json, empty_string, escapeHtml, event_flag_t, gclass_create, gclass_find_by_name, gclass_flag_t, getPositionRelativeToBody, gobj_bottom_gobj, gobj_change_state, gobj_command, gobj_create, gobj_create_pure_child, gobj_create_service, gobj_current_state, gobj_destroy, gobj_find_child, gobj_find_service, gobj_full_name, gobj_gclass_name, gobj_is_destroying, gobj_is_playing, gobj_is_pure_child, gobj_is_running, gobj_is_service, gobj_is_volatil, gobj_match_children, gobj_name, gobj_parent, gobj_post_event, gobj_publish_event, gobj_read_attr, gobj_read_bool_attr, gobj_read_integer_attr, gobj_read_pointer_attr, gobj_read_str_attr, gobj_save_persistent_attrs, gobj_send_event, gobj_set_trace_machine_format, gobj_short_name, gobj_start, gobj_start_tree, gobj_stop, gobj_stop_children, gobj_subscribe_event, gobj_unsubscribe_event, gobj_write_attr, gobj_write_bool_attr, gobj_write_integer_attr, gobj_write_str_attr, gobj_yuno, gobj_yuno_name, is_array, is_boolean, is_date, is_gobj, is_null, is_number, is_object, is_string, json_deep_copy, json_object_size, json_object_update, json_object_update_missing, json_size, kw_clone_by_keys, kw_flag_t, kw_get_dict, kw_get_dict_value, kw_get_int, kw_get_local_storage_value, kw_get_str, kw_has_key, kw_set_dict_value, kw_set_local_storage_value, kwid_find_one_record, kwid_get_ids, kwid_new_dict, log_error, log_warning, msg_iev_get_stack, parseBoolean, parseSVG, refresh_language, safeSrc, sdata_flag_t, set_console_log_enabled, set_log_callback, sprintf, str_in_list, template_get_field_desc, trace_msg, treedb_decoder_fkey, treedb_encoder_fkey, treedb_get_field_desc, treedb_hook_data_size } from "@yuneta/gobj-js";
+import { SDATA, SDATA_END, clean_name, createElement2, createOneHtml, create_template_record, data_type_t, debounce, delete_from_list, duplicate_objects, empty_json, empty_string, escapeHtml, event_flag_t, flat_diff, gclass_create, gclass_find_by_name, gclass_flag_t, getPositionRelativeToBody, gobj_bottom_gobj, gobj_change_state, gobj_command, gobj_create, gobj_create_pure_child, gobj_create_service, gobj_current_state, gobj_destroy, gobj_find_child, gobj_find_service, gobj_full_name, gobj_gclass_name, gobj_is_destroying, gobj_is_playing, gobj_is_pure_child, gobj_is_running, gobj_is_service, gobj_is_volatil, gobj_match_children, gobj_name, gobj_parent, gobj_post_event, gobj_publish_event, gobj_read_attr, gobj_read_bool_attr, gobj_read_integer_attr, gobj_read_pointer_attr, gobj_read_str_attr, gobj_save_persistent_attrs, gobj_send_event, gobj_set_trace_machine_format, gobj_short_name, gobj_start, gobj_start_tree, gobj_stop, gobj_stop_children, gobj_subscribe_event, gobj_unsubscribe_event, gobj_write_attr, gobj_write_bool_attr, gobj_write_integer_attr, gobj_write_str_attr, gobj_yuno, gobj_yuno_name, is_array, is_boolean, is_date, is_gobj, is_null, is_number, is_object, is_string, json2flat, json_deep_copy, json_object_size, json_object_update, json_object_update_missing, json_size, kw_clone_by_keys, kw_flag_t, kw_get_dict, kw_get_dict_value, kw_get_int, kw_get_local_storage_value, kw_get_str, kw_has_key, kw_set_dict_value, kw_set_local_storage_value, kwid_find_one_record, kwid_get_ids, kwid_new_dict, log_error, log_warning, msg_iev_get_stack, parseBoolean, parseSVG, refresh_language, safeSrc, sdata_flag_t, set_console_log_enabled, set_log_callback, sprintf, str_in_list, template_get_field_desc, trace_msg, treedb_decoder_fkey, treedb_encoder_fkey, treedb_get_field_desc, treedb_hook_data_size } from "@yuneta/gobj-js";
 import i18next, { t } from "i18next";
 import TomSelect from "tom-select";
 import { createJSONEditor } from "vanilla-jsoneditor";
@@ -7048,6 +7048,60 @@ function count_branches(value) {
 	for (let v of entries) if (has_branch(v)) n++;
 	return n;
 }
+/************************************************************
+*  What differs between two documents: one row per id of
+*  their flat form (json2flat), sorted by id in natural order,
+*  so `[2]` comes before `[10]`:
+*
+*      [{id, kind: "added"|"removed"|"changed", from?, to?}]
+*
+*  `from` is the first document's value and `to` the second's:
+*  an added row has no `from`, a removed row no `to`.
+*
+*  Two roots that are not containers of the same kind have no
+*  ids in common to compare by: they are one value each, and
+*  the row that says they differ has the empty id.
+*
+*  Throws what json2flat throws (a document too deep).
+************************************************************/
+function json_diff_rows(doc_a, doc_b) {
+	const kind_of = (v) => {
+		if (Array.isArray(v)) return "array";
+		if (v !== null && typeof v === "object") return "object";
+		return "scalar";
+	};
+	let kind_a = kind_of(doc_a);
+	if (kind_a === "scalar" || kind_a !== kind_of(doc_b)) {
+		if (JSON.stringify(doc_a) === JSON.stringify(doc_b)) return [];
+		return [{
+			id: "",
+			kind: "changed",
+			from: doc_a,
+			to: doc_b
+		}];
+	}
+	let diff = flat_diff(json2flat(doc_a), json2flat(doc_b));
+	let rows = [];
+	for (const id of Object.keys(diff.added)) rows.push({
+		id,
+		kind: "added",
+		to: diff.added[id]
+	});
+	for (const id of Object.keys(diff.removed)) rows.push({
+		id,
+		kind: "removed",
+		from: diff.removed[id]
+	});
+	for (const id of Object.keys(diff.changed)) rows.push({
+		id,
+		kind: "changed",
+		from: diff.changed[id].from,
+		to: diff.changed[id].to
+	});
+	const collator = new Intl.Collator("en", { numeric: true });
+	rows.sort((x, y) => collator.compare(x.id, y.id));
+	return rows;
+}
 //#endregion
 //#region src/c_yui_form.js
 /***********************************************************************
@@ -14773,7 +14827,8 @@ function register_c_yui_json() {
 *          c_yui_json_pad.js
 *
 *          C_YUI_JSON_PAD -- a pad to paste JSON from OUTSIDE and read it
-*          with the library's own viewer.
+*          with the library's own viewer, and a second one to compare it
+*          with.
 *
 *          The viewer (C_YUI_JSON: the lazy tree, the raw text and the
 *          graph) only ever showed what an app fetched.  A JSON that came
@@ -14782,30 +14837,63 @@ function register_c_yui_json() {
 *          at hand.  This is the blank page for it: paste, and read it the
 *          way every other document of the app is read.
 *
+*          Two documents are the other half of the job: the config that
+*          works and the one that does not, a record before and after.  The
+*          second pane is there on demand ("second json"), and "compare"
+*          puts their differences in place of the two viewers -- one row
+*          per id of the flat form (json2flat), the form a person reads
+*          when two configurations disagree.
+*
 *          DOM (UPPER_SNAKE logical classes):
 *
-*              JSON_PAD            the root
-*                JSON_PAD_BAR      the text area and its two buttons
-*                  JSON_PAD_INPUT  where the text goes
-*                  JSON_PAD_VIEW   read what is in the text area
-*                  JSON_PAD_CLEAR  empty the pad
-*                JSON_PAD_ERROR    "invalid JSON" and the parser's reason
-*                JSON_PAD_BODY     the C_YUI_JSON child
-*
-*          Every way in is an event:
-*
-*              EV_PASTE {text}   a paste ANYWHERE in the pad replaces the
-*                                document and shows it at once -- there
-*                                is one document here, not a text to edit
-*              EV_VIEW           the text area as it is (typed, or edited
-*                                after a paste); also Ctrl+Enter
-*              EV_CLEAR          back to the blank pad
-*
-*          FSM: ST_EMPTY (nothing shown) and ST_SHOWING.  EV_EXPAND_PATH,
-*          which the viewer publishes when a `__collapsed__` sentinel is
-*          opened, only exists in ST_SHOWING, and is answered with
-*          EV_SUBTREE_ERROR: a pasted document has no backend to fetch the
-*          rest from -- the source truncated it, and the pad says so.
+*              JSON_PAD                the root
+*                JSON_PAD_TOOLBAR      the notice and the two toggles
+*                  JSON_PAD_NOTICE     "json not kept": the storage refused
+*                  JSON_PAD_SECOND     show / hide the second pane
+*                  JSON_PAD_COMPARE    show / hide the differences
+*                JSON_PAD_PANES        the panes, side by side (stacked when
+*                                      the pad is narrow)
+*                  JSON_PAD_PANE       JSON_PAD_PANE_A / JSON_PAD_PANE_B
+*                    JSON_PAD_BAR      the text area and its two buttons
+*                      JSON_PAD_INPUT  where the text goes
+*                      JSON_PAD_VIEW   read what is in the text area
+*                      JSON_PAD_CLEAR  empty the pane
+*                    JSON_PAD_ERROR    "invalid JSON" and the parser's reason
+*                    JSON_PAD_BODY     the pane's C_YUI_JSON child
+*                JSON_PAD_DIFF         the differences: JSON_PAD_DIFF_SUMMARY
+*                                      and JSON_PAD_DIFF_TABLE, one
+*                                      JSON_PAD_DIFF_ROW per id
+*
+*          Every way in is an event, and a pane event names its pane
+*          (`pane`: "a" or "b"):
+*
+*              EV_PASTE {pane, text}   a paste ANYWHERE in a pane replaces
+*                                      its document and shows it at once --
+*                                      a pane holds one document, not a
+*                                      text to edit
+*              EV_VIEW {pane}          the text area as it is (typed, or
+*                                      edited after a paste); also Ctrl+Enter
+*              EV_CLEAR {pane}         back to a blank pane
+*              EV_TEXT_CHANGED {pane}  the text area was edited: keep it
+*              EV_TOGGLE_SECOND        show / hide the second pane
+*              EV_TOGGLE_DIFF          show / hide the differences
+*
+*          FSM: the states are the LAYOUT -- ST_SINGLE (one pane), ST_DUAL
+*          (two), ST_DIFF (two, with their differences in place of the
+*          viewers).  Comparing needs two panes, so EV_TOGGLE_DIFF is not
+*          defined in ST_SINGLE and its button is not on screen there.
+*          EV_EXPAND_PATH, which a viewer publishes when a `__collapsed__`
+*          sentinel is opened, is answered with EV_SUBTREE_ERROR to the
+*          viewer that asked: a pasted document has no backend to fetch the
+*          rest from -- the source truncated it, and the pad says so.  It is
+*          not defined in ST_DIFF, where no viewer is on screen.
+*
+*          What is kept: both texts and the layout, in localStorage under
+*          `storage_key` (empty: nothing is kept), written when a text is
+*          pasted, viewed, cleared or edited and when the layout changes,
+*          so the next pad opens as this one was left.  localStorage is per
+*          browser and per origin, and has a quota: a text too big for it
+*          is not kept, the toolbar says so, and the log says why.
 *
 *          Hosted by setup_json_pad() (yui_json_pad.js) in a C_YUI_WINDOW;
 *          any host can mount `$container` itself.
@@ -14817,19 +14905,52 @@ function register_c_yui_json() {
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$12 = "C_YUI_JSON_PAD";
+var PANES = ["a", "b"];
+var MODE_OF_STATE = {
+	ST_SINGLE: "single",
+	ST_DUAL: "dual",
+	ST_DIFF: "diff"
+};
+var KIND_TAG = {
+	added: () => [
+		"span",
+		{
+			class: "tag is-success is-light",
+			i18n: "added"
+		},
+		"added"
+	],
+	removed: () => [
+		"span",
+		{
+			class: "tag is-danger is-light",
+			i18n: "removed"
+		},
+		"removed"
+	],
+	changed: () => [
+		"span",
+		{
+			class: "tag is-warning is-light",
+			i18n: "changed"
+		},
+		"changed"
+	]
+};
 /***************************************************************
 *              Data
 ***************************************************************/
 var attrs_table$12 = [
 	SDATA(data_type_t.DTP_POINTER, "subscriber", 0, null, "Subscriber of output events"),
+	SDATA(data_type_t.DTP_STRING, "storage_key", 0, "yui_json_pad", "localStorage key the two texts and the layout are kept under. Empty: nothing is kept"),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "HTMLElement root, mounted by the host"),
 	SDATA_END()
 ];
 var PRIVATE_DATA$12 = {
-	$input: null,
-	$error: null,
-	$reason: null,
-	gobj_json: null
+	panes: null,
+	$compare: null,
+	$notice: null,
+	$diff: null
 };
 var __gclass__$12 = null;
 /******************************
@@ -14844,28 +14965,36 @@ function mt_create$12(gobj) {
 	if (!subscriber) subscriber = gobj_parent(gobj);
 	gobj_subscribe_event(gobj, null, {}, subscriber);
 	build_ui$11(gobj);
-	priv.gobj_json = gobj_create_pure_child("json_pad_view", "C_YUI_JSON", {}, gobj);
-	let $view = gobj_read_attr(priv.gobj_json, "$container");
-	if (!$view) {
-		log_error(`${gobj_short_name(gobj)}: C_YUI_JSON without $container`);
-		return;
+	for (const id of PANES) {
+		let pane = priv.panes[id];
+		pane.gobj_json = gobj_create_pure_child(`json_pad_view_${id}`, "C_YUI_JSON", {}, gobj);
+		let $view = pane.gobj_json ? gobj_read_attr(pane.gobj_json, "$container") : null;
+		if (!$view) {
+			log_error(`${gobj_short_name(gobj)}: C_YUI_JSON without $container`);
+			continue;
+		}
+		pane.$body.appendChild($view);
 	}
-	gobj_read_attr(gobj, "$container").querySelector(".JSON_PAD_BODY").appendChild($view);
 }
 /***************************************************************
 *          Framework Method: Start
 ***************************************************************/
 function mt_start$12(gobj) {
 	let priv = gobj.priv;
-	if (priv.gobj_json) gobj_start(priv.gobj_json);
-	if (priv.$input) priv.$input.focus();
+	for (const id of PANES) if (priv.panes[id].gobj_json) gobj_start(priv.panes[id].gobj_json);
+	restore_state(gobj);
+	priv.panes.a.$input.focus();
 }
 /***************************************************************
 *          Framework Method: Stop
 ***************************************************************/
 function mt_stop$12(gobj) {
 	let priv = gobj.priv;
-	if (priv.gobj_json && gobj_is_running(priv.gobj_json)) gobj_stop(priv.gobj_json);
+	save_state(gobj);
+	for (const id of PANES) {
+		let gobj_json = priv.panes[id].gobj_json;
+		if (gobj_json && gobj_is_running(gobj_json)) gobj_stop(gobj_json);
+	}
 }
 /***************************************************************
 *          Framework Method: Destroy
@@ -14875,37 +15004,106 @@ function mt_destroy$12(gobj) {}
 *      Local Methods
 ***************************/
 /***************************************************************
-*  The pad: the text area and its buttons, the error line, and
-*  the body the viewer is mounted in.
+*  A button of the pad: an icon, its label, and an event.
+***************************************************************/
+function pad_button(gobj, cls, icon, key, event_name, kw) {
+	return [
+		"button",
+		{
+			class: `${cls} button`,
+			type: "button",
+			title: t(key),
+			"data-i18n-title": key,
+			"aria-label": t(key),
+			"data-i18n-aria-label": key
+		},
+		[yui_toolbar_icon(icon), [
+			"span",
+			{
+				style: "padding-left:5px;",
+				i18n: key
+			},
+			key
+		]],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			gobj_send_event(gobj, event_name, { ...kw }, gobj);
+		} }
+	];
+}
+/***************************************************************
+*  The toolbar, the two panes, and the differences.
 ***************************************************************/
 function build_ui$11(gobj) {
 	let priv = gobj.priv;
-	let button = (cls, icon, key, event_name) => {
-		return [
-			"button",
+	priv.$notice = createElement2([
+		"div",
+		{
+			class: "JSON_PAD_NOTICE is-hidden has-text-danger is-size-7",
+			role: "status"
+		},
+		[[
+			"span",
 			{
-				class: `${cls} button`,
-				type: "button",
-				title: t(key),
-				"data-i18n-title": key,
-				"aria-label": t(key),
-				"data-i18n-aria-label": key
+				style: "font-weight:600;",
+				i18n: "json not kept"
 			},
-			[yui_toolbar_icon(icon), [
-				"span",
-				{
-					style: "padding-left:5px;",
-					i18n: key
-				},
-				key
-			]],
-			{ click: (evt) => {
-				evt.stopPropagation();
-				gobj_send_event(gobj, event_name, {}, gobj);
-			} }
-		];
+			"json not kept"
+		]]
+	]);
+	priv.$compare = createElement2(pad_button(gobj, "JSON_PAD_COMPARE is-hidden", "yi-right-left", "compare", "EV_TOGGLE_DIFF", {}));
+	priv.panes = {
+		a: build_pane(gobj, "a", "first json"),
+		b: build_pane(gobj, "b", "second json")
 	};
-	priv.$input = createElement2([
+	priv.panes.b.$pane.classList.add("is-hidden");
+	priv.$diff = createElement2([
+		"div",
+		{ class: "JSON_PAD_DIFF is-hidden" },
+		[]
+	]);
+	let $container = createElement2([
+		"div",
+		{ class: "C_YUI_JSON_PAD JSON_PAD" },
+		[
+			[
+				"div",
+				{ class: "JSON_PAD_TOOLBAR" },
+				[
+					priv.$notice,
+					pad_button(gobj, "JSON_PAD_SECOND", "yi-columns", "second json", "EV_TOGGLE_SECOND", {}),
+					priv.$compare
+				]
+			],
+			[
+				"div",
+				{ class: "JSON_PAD_PANES" },
+				[priv.panes.a.$pane, priv.panes.b.$pane]
+			],
+			priv.$diff
+		]
+	]);
+	gobj_write_attr(gobj, "$container", $container);
+	press_toggle(gobj, ".JSON_PAD_SECOND", false);
+	press_toggle(gobj, ".JSON_PAD_COMPARE", false);
+}
+/***************************************************************
+*  One pane: the text area and its buttons, the error line, and
+*  the body its viewer is mounted in.  `name_key` names the pane
+*  for a reader (its text area's title and aria-label).
+***************************************************************/
+function build_pane(gobj, id, name_key) {
+	let pane = {
+		$pane: null,
+		$input: null,
+		$error: null,
+		$reason: null,
+		$body: null,
+		gobj_json: null,
+		doc: null,
+		has_doc: false
+	};
+	pane.$input = createElement2([
 		"textarea",
 		{
 			class: "JSON_PAD_INPUT textarea",
@@ -14913,21 +15111,26 @@ function build_ui$11(gobj) {
 			spellcheck: "false",
 			placeholder: t("paste json here"),
 			"data-i18n-placeholder": "paste json here",
-			title: t("paste json here"),
-			"data-i18n-title": "paste json here",
-			"aria-label": t("paste json here"),
-			"data-i18n-aria-label": "paste json here",
+			title: t(name_key),
+			"data-i18n-title": name_key,
+			"aria-label": t(name_key),
+			"data-i18n-aria-label": name_key,
 			style: "font-family:monospace; resize:vertical; min-height:4.5em;"
 		},
 		"",
-		{ keydown: (evt) => {
-			if ((evt.ctrlKey || evt.metaKey) && evt.key === "Enter") {
-				evt.preventDefault();
-				gobj_send_event(gobj, "EV_VIEW", {}, gobj);
+		{
+			keydown: (evt) => {
+				if ((evt.ctrlKey || evt.metaKey) && evt.key === "Enter") {
+					evt.preventDefault();
+					gobj_send_event(gobj, "EV_VIEW", { pane: id }, gobj);
+				}
+			},
+			change: () => {
+				gobj_send_event(gobj, "EV_TEXT_CHANGED", { pane: id }, gobj);
 			}
-		} }
+		}
 	]);
-	priv.$reason = createElement2([
+	pane.$reason = createElement2([
 		"span",
 		{
 			class: "JSON_PAD_ERROR_REASON",
@@ -14935,7 +15138,7 @@ function build_ui$11(gobj) {
 		},
 		""
 	]);
-	priv.$error = createElement2([
+	pane.$error = createElement2([
 		"div",
 		{
 			class: "JSON_PAD_ERROR is-hidden has-text-danger is-size-7",
@@ -14949,14 +15152,19 @@ function build_ui$11(gobj) {
 				i18n: "invalid json"
 			},
 			"invalid json"
-		], priv.$reason]
+		], pane.$reason]
 	]);
-	let $container = createElement2([
+	pane.$body = createElement2([
 		"div",
 		{
-			class: "C_YUI_JSON_PAD JSON_PAD",
-			style: "height:100%; display:flex; flex-direction:column; gap:.5rem; padding:.5rem;"
+			class: "JSON_PAD_BODY",
+			style: "flex:1 1 auto; min-height:0; display:flex; flex-direction:column;"
 		},
+		[]
+	]);
+	pane.$pane = createElement2([
+		"div",
+		{ class: `JSON_PAD_PANE JSON_PAD_PANE_${id.toUpperCase()}` },
 		[
 			[
 				"div",
@@ -14967,40 +15175,59 @@ function build_ui$11(gobj) {
 				[[
 					"div",
 					{ style: "flex:1 1 auto; min-width:0;" },
-					[priv.$input]
+					[pane.$input]
 				], [
 					"div",
 					{ style: "flex:0 0 auto; display:flex; flex-direction:column; gap:.5rem;" },
-					[button("JSON_PAD_VIEW", "yi-eye", "view", "EV_VIEW"), button("JSON_PAD_CLEAR", "yi-broom", "clear", "EV_CLEAR")]
+					[pad_button(gobj, "JSON_PAD_VIEW", "yi-eye", "view", "EV_VIEW", { pane: id }), pad_button(gobj, "JSON_PAD_CLEAR", "yi-broom", "clear", "EV_CLEAR", { pane: id })]
 				]]
 			],
-			priv.$error,
-			[
-				"div",
-				{
-					class: "JSON_PAD_BODY",
-					style: "flex:1 1 auto; min-height:0; display:flex; flex-direction:column;"
-				},
-				[]
-			]
+			pane.$error,
+			pane.$body
 		],
 		{ paste: (evt) => {
 			let text = evt.clipboardData ? evt.clipboardData.getData("text") : "";
 			if (!text) return;
 			evt.preventDefault();
-			gobj_send_event(gobj, "EV_PASTE", { text }, gobj);
+			gobj_send_event(gobj, "EV_PASTE", {
+				pane: id,
+				text
+			}, gobj);
 		} }
 	]);
-	gobj_write_attr(gobj, "$container", $container);
+	return pane;
 }
 /***************************************************************
-*  Read `text` as JSON and show it, or say why it is not.
+*  The pane a pane event names.
 ***************************************************************/
-function show_text(gobj, text) {
+function pane_of(gobj, kw) {
 	let priv = gobj.priv;
+	let id = kw ? kw.pane : void 0;
+	if (!PANES.includes(id)) {
+		log_error(`${gobj_short_name(gobj)}: no pane '${id}'`);
+		return null;
+	}
+	return priv.panes[id];
+}
+/***************************************************************
+*  A toggle of the toolbar, pressed or not -- for the eye and
+*  for a reader.
+***************************************************************/
+function press_toggle(gobj, selector, on) {
+	let $container = gobj_read_attr(gobj, "$container");
+	set_pressed_state($container, selector, on);
+	$container.querySelectorAll(selector).forEach(($el) => {
+		$el.setAttribute("aria-pressed", on ? "true" : "false");
+	});
+}
+/***************************************************************
+*  Read `text` as JSON and show it in `pane`, or say why it is
+*  not.  A text that is not JSON leaves the last document up.
+***************************************************************/
+function show_text(gobj, pane, text) {
 	let src = String(text || "").trim();
 	if (!src) {
-		clear_pad(gobj, false);
+		clear_pane(gobj, pane, false);
 		return 0;
 	}
 	let doc;
@@ -15008,63 +15235,328 @@ function show_text(gobj, text) {
 		doc = JSON.parse(src);
 	} catch (e) {
 		log_warning(`${gobj_short_name(gobj)}: the pasted text is not JSON: ${e.message}`);
-		priv.$reason.textContent = e.message;
-		priv.$error.classList.remove("is-hidden");
+		pane.$reason.textContent = e.message;
+		pane.$error.classList.remove("is-hidden");
+		return -1;
+	}
+	pane.$error.classList.add("is-hidden");
+	pane.$reason.textContent = "";
+	pane.doc = doc;
+	pane.has_doc = true;
+	gobj_send_event(pane.gobj_json, "EV_SET_JSON", { json: doc }, gobj);
+	return 0;
+}
+/***************************************************************
+*  A blank pane again; `with_text` empties the text area too.
+***************************************************************/
+function clear_pane(gobj, pane, with_text) {
+	if (with_text) pane.$input.value = "";
+	pane.$error.classList.add("is-hidden");
+	pane.$reason.textContent = "";
+	pane.doc = null;
+	pane.has_doc = false;
+	gobj_send_event(pane.gobj_json, "EV_SET_JSON", { json: null }, gobj);
+}
+/***************************************************************
+*  A pane changed its document: the differences follow it, and
+*  the texts are kept.
+***************************************************************/
+function document_changed(gobj) {
+	if (gobj_current_state(gobj) === "ST_DIFF") render_diff(gobj);
+	save_state(gobj);
+}
+/***************************************************************
+*  Enter one of the three layouts.  The state IS the layout;
+*  this is what the screen shows for it.
+***************************************************************/
+function enter_layout(gobj, state) {
+	let priv = gobj.priv;
+	let $container = gobj_read_attr(gobj, "$container");
+	let second = state !== "ST_SINGLE";
+	let diff = state === "ST_DIFF";
+	gobj_change_state(gobj, state);
+	priv.panes.b.$pane.classList.toggle("is-hidden", !second);
+	priv.$compare.classList.toggle("is-hidden", !second);
+	press_toggle(gobj, ".JSON_PAD_SECOND", second);
+	press_toggle(gobj, ".JSON_PAD_COMPARE", diff);
+	$container.classList.toggle("is-comparing", diff);
+	for (const id of PANES) priv.panes[id].$body.classList.toggle("is-hidden", diff);
+	priv.$diff.classList.toggle("is-hidden", !diff);
+	if (diff) render_diff(gobj);
+	else for (const id of PANES) {
+		if (id === "b" && !second) continue;
+		gobj_send_event(priv.panes[id].gobj_json, "EV_REFRESH", {}, gobj);
+	}
+	save_state(gobj);
+}
+/***************************************************************
+*  The differences of the two documents, in place of the two
+*  viewers.  Only a pane that shows a document takes part: a
+*  text that is not JSON leaves its last document, as on screen.
+***************************************************************/
+function render_diff(gobj) {
+	let priv = gobj.priv;
+	let a = priv.panes.a;
+	let b = priv.panes.b;
+	priv.$diff.replaceChildren();
+	if (!a.has_doc || !b.has_doc) {
+		priv.$diff.appendChild(createElement2([
+			"p",
+			{
+				class: "JSON_PAD_DIFF_MESSAGE",
+				i18n: "compare needs two json"
+			},
+			"compare needs two json"
+		]));
+		return 0;
+	}
+	let rows;
+	try {
+		rows = json_diff_rows(a.doc, b.doc);
+	} catch (e) {
+		log_warning(`${gobj_short_name(gobj)}: cannot compare: ${e.message}`);
+		priv.$diff.appendChild(createElement2([
+			"p",
+			{ class: "JSON_PAD_DIFF_MESSAGE has-text-danger" },
+			[[
+				"span",
+				{
+					style: "font-weight:600;",
+					i18n: "cannot compare"
+				},
+				"cannot compare"
+			], [
+				"span",
+				{
+					class: "JSON_PAD_DIFF_REASON",
+					style: "margin-left:.5em; font-family:monospace;"
+				},
+				e.message
+			]]
+		]));
 		return -1;
 	}
-	priv.$error.classList.add("is-hidden");
-	priv.$reason.textContent = "";
-	gobj_send_event(priv.gobj_json, "EV_SET_JSON", { json: doc }, gobj);
-	gobj_change_state(gobj, "ST_SHOWING");
+	if (rows.length === 0) {
+		priv.$diff.appendChild(createElement2([
+			"p",
+			{
+				class: "JSON_PAD_DIFF_MESSAGE has-text-success",
+				i18n: "no differences"
+			},
+			"no differences"
+		]));
+		return 0;
+	}
+	let count = {
+		added: 0,
+		removed: 0,
+		changed: 0
+	};
+	for (const row of rows) count[row.kind]++;
+	let value_cell = (cls, row, side) => {
+		let has = Object.prototype.hasOwnProperty.call(row, side);
+		return [
+			"td",
+			{ class: cls },
+			has ? JSON.stringify(row[side]) : ""
+		];
+	};
+	priv.$diff.appendChild(createElement2([
+		"div",
+		{ class: "JSON_PAD_DIFF_SUMMARY" },
+		[
+			"removed",
+			"added",
+			"changed"
+		].map((kind) => {
+			return [
+				"span",
+				{ class: "JSON_PAD_DIFF_COUNT" },
+				[KIND_TAG[kind](), [
+					"strong",
+					{},
+					String(count[kind])
+				]]
+			];
+		})
+	]));
+	priv.$diff.appendChild(createElement2([
+		"table",
+		{ class: "JSON_PAD_DIFF_TABLE table is-fullwidth is-narrow is-hoverable" },
+		[[
+			"thead",
+			{},
+			[[
+				"tr",
+				{},
+				[
+					[
+						"th",
+						{},
+						""
+					],
+					[
+						"th",
+						{ i18n: "path" },
+						"path"
+					],
+					[
+						"th",
+						{ i18n: "first json" },
+						"first json"
+					],
+					[
+						"th",
+						{ i18n: "second json" },
+						"second json"
+					]
+				]
+			]]
+		], [
+			"tbody",
+			{},
+			rows.map((row) => {
+				return [
+					"tr",
+					{ class: `JSON_PAD_DIFF_ROW JSON_PAD_DIFF_${row.kind.toUpperCase()}` },
+					[
+						[
+							"td",
+							{},
+							[KIND_TAG[row.kind]()]
+						],
+						[
+							"td",
+							{ class: "JSON_PAD_DIFF_PATH" },
+							row.id
+						],
+						value_cell("JSON_PAD_DIFF_FROM", row, "from"),
+						value_cell("JSON_PAD_DIFF_TO", row, "to")
+					]
+				];
+			})
+		]]
+	]));
 	return 0;
 }
 /***************************************************************
-*  Back to the blank pad; `with_text` empties the text area too.
+*  Keep both texts and the layout.
 ***************************************************************/
-function clear_pad(gobj, with_text) {
+function save_state(gobj) {
 	let priv = gobj.priv;
-	if (with_text) priv.$input.value = "";
-	priv.$error.classList.add("is-hidden");
-	priv.$reason.textContent = "";
-	gobj_send_event(priv.gobj_json, "EV_SET_JSON", { json: null }, gobj);
-	gobj_change_state(gobj, "ST_EMPTY");
+	let key = gobj_read_str_attr(gobj, "storage_key");
+	if (!key) return 0;
+	let ret = kw_set_local_storage_value(key, {
+		a: priv.panes.a.$input.value,
+		b: priv.panes.b.$input.value,
+		mode: MODE_OF_STATE[gobj_current_state(gobj)] || "single"
+	});
+	priv.$notice.classList.toggle("is-hidden", ret === 0);
+	return ret;
+}
+/***************************************************************
+*  The pad as the last one was left: its texts, shown, and its
+*  layout -- through the same events a reader would send.
+***************************************************************/
+function restore_state(gobj) {
+	let priv = gobj.priv;
+	let key = gobj_read_str_attr(gobj, "storage_key");
+	if (!key) return 0;
+	let kept = kw_get_local_storage_value(key, null, false);
+	if (kept === null || kept === void 0) return 0;
+	if (typeof kept !== "object" || Array.isArray(kept)) {
+		log_warning(`${gobj_short_name(gobj)}: '${key}' in localStorage is not what the pad keeps`);
+		return -1;
+	}
+	for (const id of PANES) if (typeof kept[id] === "string") priv.panes[id].$input.value = kept[id];
+	for (const id of PANES) if (priv.panes[id].$input.value.trim()) gobj_send_event(gobj, "EV_VIEW", { pane: id }, gobj);
+	if (kept.mode === "dual" || kept.mode === "diff") gobj_send_event(gobj, "EV_TOGGLE_SECOND", {}, gobj);
+	if (kept.mode === "diff") gobj_send_event(gobj, "EV_TOGGLE_DIFF", {}, gobj);
+	return 0;
 }
 /***************************
 *      Actions
 ***************************/
 /***************************************************************
-*  A paste: it becomes the text area and the document at once.
+*  A paste: it becomes the pane's text area and its document
+*  at once.
 ***************************************************************/
 function ac_paste(gobj, event, kw, src) {
-	let priv = gobj.priv;
-	let text = kw && typeof kw.text === "string" ? kw.text : "";
-	priv.$input.value = text;
-	return show_text(gobj, text);
+	let pane = pane_of(gobj, kw);
+	if (!pane) return -1;
+	let text = typeof kw.text === "string" ? kw.text : "";
+	pane.$input.value = text;
+	let ret = show_text(gobj, pane, text);
+	document_changed(gobj);
+	return ret;
 }
 /***************************************************************
-*  The text area as it is now.
+*  The pane's text area as it is now.
 ***************************************************************/
 function ac_view(gobj, event, kw, src) {
-	let priv = gobj.priv;
-	return show_text(gobj, priv.$input.value);
+	let pane = pane_of(gobj, kw);
+	if (!pane) return -1;
+	let ret = show_text(gobj, pane, pane.$input.value);
+	document_changed(gobj);
+	return ret;
 }
 /***************************************************************
-*  The blank pad again.
+*  A blank pane again.
 ***************************************************************/
 function ac_clear(gobj, event, kw, src) {
+	let pane = pane_of(gobj, kw);
+	if (!pane) return -1;
+	clear_pane(gobj, pane, true);
+	pane.$input.focus();
+	document_changed(gobj);
+	return 0;
+}
+/***************************************************************
+*  A text area was edited and left: keep what it holds.  What
+*  is SHOWN changes only with a view, as before.
+***************************************************************/
+function ac_text_changed(gobj, event, kw, src) {
+	if (!pane_of(gobj, kw)) return -1;
+	save_state(gobj);
+	return 0;
+}
+/***************************************************************
+*  The second pane, beside the first.
+***************************************************************/
+function ac_show_second(gobj, event, kw, src) {
 	let priv = gobj.priv;
-	clear_pad(gobj, true);
-	priv.$input.focus();
+	enter_layout(gobj, "ST_DUAL");
+	priv.panes.b.$input.focus();
+	return 0;
+}
+/***************************************************************
+*  One pane again.  Its text is kept: hiding is not clearing.
+***************************************************************/
+function ac_hide_second(gobj, event, kw, src) {
+	enter_layout(gobj, "ST_SINGLE");
 	return 0;
 }
 /***************************************************************
-*  The viewer asks for a `__collapsed__` subtree.  A pasted
+*  The differences, in place of the viewers.
+***************************************************************/
+function ac_show_diff(gobj, event, kw, src) {
+	enter_layout(gobj, "ST_DIFF");
+	return 0;
+}
+/***************************************************************
+*  The viewers again.
+***************************************************************/
+function ac_hide_diff(gobj, event, kw, src) {
+	enter_layout(gobj, "ST_DUAL");
+	return 0;
+}
+/***************************************************************
+*  A viewer asks for a `__collapsed__` subtree.  A pasted
 *  document has no backend to ask for it: the SOURCE truncated
-*  it, and that is the answer.
+*  it, and that is the answer, to the viewer that asked.
 ***************************************************************/
 function ac_expand_path(gobj, event, kw, src) {
-	let priv = gobj.priv;
-	gobj_send_event(priv.gobj_json, "EV_SUBTREE_ERROR", {
+	gobj_send_event(src, "EV_SUBTREE_ERROR", {
 		path: kw && kw.path || "",
 		error: t("collapsed in the source")
 	}, gobj);
@@ -15091,45 +15583,113 @@ function create_gclass$12(gclass_name) {
 		["EV_PASTE", 0],
 		["EV_VIEW", 0],
 		["EV_CLEAR", 0],
+		["EV_TEXT_CHANGED", 0],
+		["EV_TOGGLE_SECOND", 0],
+		["EV_TOGGLE_DIFF", 0],
 		["EV_EXPAND_PATH", 0]
-	], [["ST_EMPTY", [
-		[
-			"EV_PASTE",
-			ac_paste,
-			null
-		],
-		[
-			"EV_VIEW",
-			ac_view,
-			null
-		],
-		[
-			"EV_CLEAR",
-			ac_clear,
-			null
-		]
-	]], ["ST_SHOWING", [
-		[
-			"EV_PASTE",
-			ac_paste,
-			null
-		],
-		[
-			"EV_VIEW",
-			ac_view,
-			null
-		],
-		[
-			"EV_CLEAR",
-			ac_clear,
-			null
-		],
-		[
-			"EV_EXPAND_PATH",
-			ac_expand_path,
-			null
-		]
-	]]], gmt$12, 0, attrs_table$12, PRIVATE_DATA$12, 0, 0, 0, 0);
+	], [
+		["ST_SINGLE", [
+			[
+				"EV_PASTE",
+				ac_paste,
+				null
+			],
+			[
+				"EV_VIEW",
+				ac_view,
+				null
+			],
+			[
+				"EV_CLEAR",
+				ac_clear,
+				null
+			],
+			[
+				"EV_TEXT_CHANGED",
+				ac_text_changed,
+				null
+			],
+			[
+				"EV_TOGGLE_SECOND",
+				ac_show_second,
+				null
+			],
+			[
+				"EV_EXPAND_PATH",
+				ac_expand_path,
+				null
+			]
+		]],
+		["ST_DUAL", [
+			[
+				"EV_PASTE",
+				ac_paste,
+				null
+			],
+			[
+				"EV_VIEW",
+				ac_view,
+				null
+			],
+			[
+				"EV_CLEAR",
+				ac_clear,
+				null
+			],
+			[
+				"EV_TEXT_CHANGED",
+				ac_text_changed,
+				null
+			],
+			[
+				"EV_TOGGLE_SECOND",
+				ac_hide_second,
+				null
+			],
+			[
+				"EV_TOGGLE_DIFF",
+				ac_show_diff,
+				null
+			],
+			[
+				"EV_EXPAND_PATH",
+				ac_expand_path,
+				null
+			]
+		]],
+		["ST_DIFF", [
+			[
+				"EV_PASTE",
+				ac_paste,
+				null
+			],
+			[
+				"EV_VIEW",
+				ac_view,
+				null
+			],
+			[
+				"EV_CLEAR",
+				ac_clear,
+				null
+			],
+			[
+				"EV_TEXT_CHANGED",
+				ac_text_changed,
+				null
+			],
+			[
+				"EV_TOGGLE_SECOND",
+				ac_hide_second,
+				null
+			],
+			[
+				"EV_TOGGLE_DIFF",
+				ac_hide_diff,
+				null
+			]
+		]]
+	], gmt$12, 0, attrs_table$12, PRIVATE_DATA$12, 0, 0, 0, 0);
 	if (!__gclass__$12) return -1;
 	return 0;
 }