@yuneta/gobj-ui 7.23.157 → 7.23.159

package/dist/gobj-ui.cjs.js

@@ -6095,6 +6095,299 @@ function yui_tabulator_relocalize(table, t) {
 	}
 }
 //#endregion
+//#region src/yui_asset.js
+var BLOB_ATTR = "data-yui-blob";
+function ref_to_id(ref) {
+	if (!ref) return null;
+	if (typeof ref === "string") {
+		if (ref.indexOf("^") < 0) return ref;
+		const parts = ref.split("^");
+		return parts.length >= 2 && parts[1] ? parts[1] : null;
+	}
+	if (typeof ref === "object" && typeof ref.id === "string") return ref.id;
+	return null;
+}
+/***************************************************************************
+*  Every asset id a column names, in order. Always an array, possibly empty.
+***************************************************************************/
+function yui_asset_ids(ref) {
+	if (Array.isArray(ref)) return ref.map(ref_to_id).filter((id) => !!id);
+	const id = ref_to_id(ref);
+	return id ? [id] : [];
+}
+/***************************************************************************
+*  The first asset id a column names, or null.
+***************************************************************************/
+function yui_asset_id(ref) {
+	const ids = yui_asset_ids(ref);
+	return ids.length ? ids[0] : null;
+}
+/***************************************************************************
+*  Turn a `get-asset` answer into something an element can load.
+*
+*  Returns null when the answer carries neither -- which the caller must
+*  treat as "missing", never as an empty src: an <img src=""> reloads the
+*  PAGE in some browsers.
+***************************************************************************/
+function yui_asset_src(answer) {
+	if (!answer) return null;
+	if (answer.mode === "url" && answer.url) return answer.url;
+	if (answer.mode === "inline" && answer.content64) return `data:${answer.content_type || "application/octet-stream"};base64,${answer.content64}`;
+	return null;
+}
+/***************************************************************************
+*  The marker for an asset that is not there.
+*
+*  A missing image used to leave a broken box and no word about it, which
+*  is indistinguishable from a slow one and from a bug.  This says so, and
+*  it says WHICH: `detail` is data (a name, a path) and is never
+*  translated, while the label carries its i18n key so a language change
+*  re-translates it.
+***************************************************************************/
+function yui_asset_missing(detail, opts = {}) {
+	const key = opts.key || "asset not available";
+	const children = [["span", { class: "ASSET_MISSING_ICON yi-triangle-exclamation" }], [
+		"span",
+		{
+			class: "ASSET_MISSING_LABEL",
+			i18n: key
+		},
+		key
+	]];
+	if (detail) children.push([
+		"span",
+		{ class: "ASSET_MISSING_DETAIL" },
+		String(detail)
+	]);
+	const attrs = { class: `ASSET_MISSING ${opts.class || ""}`.trim() };
+	if (detail) attrs.title = String(detail);
+	else attrs["data-i18n-title"] = key;
+	return (0, _yuneta_gobj_js.createElement2)([
+		"div",
+		attrs,
+		children
+	]);
+}
+/***************************************************************************
+*  What KIND of thing a content type is, as far as showing it goes:
+*
+*      "image" | "video" | "audio"     the browser draws it in an element
+*      "pdf"                           the browser's own viewer, in a frame
+*      "other"                         nothing here can draw it: a card
+*                                      saying what it is, and a way to open
+*
+*  The content type is the one the BACKEND stored (treedb checks it
+*  against the bytes), never the extension of a name a person typed.
+***************************************************************************/
+function yui_asset_kind(content_type) {
+	const ct = String(content_type || "").toLowerCase().split(";")[0].trim();
+	if (ct.startsWith("image/")) return "image";
+	if (ct.startsWith("video/")) return "video";
+	if (ct.startsWith("audio/")) return "audio";
+	if (ct === "application/pdf") return "pdf";
+	return "other";
+}
+/***************************************************************************
+*  A `blob:` url for inline bytes, or null.
+*
+*  A frame and a new tab need a blob and not a data url: Firefox refuses to
+*  NAVIGATE to a data url (a new tab opened on one stays blank), and its
+*  PDF viewer does not run on one inside a frame.
+***************************************************************************/
+function base64_to_blob_url(content64, content_type) {
+	try {
+		const binary = atob(content64);
+		const bytes = new Uint8Array(binary.length);
+		for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+		const blob = new Blob([bytes], { type: content_type || "application/octet-stream" });
+		return URL.createObjectURL(blob);
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`cannot decode the bytes of an asset: ${e && e.message ? e.message : e}`);
+		return null;
+	}
+}
+/***************************************************************************
+*  Where a frame or a link can take an asset:
+*
+*      -> {href, blob}     `blob` true when href is a blob url THIS call
+*                          created, which the caller must mark (BLOB_ATTR)
+*                          so that yui_asset_release() revokes it
+*      -> null             nothing to open
+***************************************************************************/
+function yui_asset_href(answer) {
+	if (!answer) return null;
+	if (answer.mode === "url" && answer.url) return {
+		href: answer.url,
+		blob: false
+	};
+	if (answer.mode === "inline" && answer.content64) {
+		const href = base64_to_blob_url(answer.content64, answer.content_type);
+		return href ? {
+			href,
+			blob: true
+		} : null;
+	}
+	return null;
+}
+/***************************************************************************
+*  The answer a picked `File` would have had from the backend.
+*
+*  A file a person picked and has not saved yet is shown BEFORE it exists
+*  as an asset, so it goes through the same element as a stored one: a
+*  `url` answer whose url is a blob url over the File itself -- which
+*  reads nothing until the browser draws it.
+*
+*  `blob: true` says the url is owned: whoever drops the element revokes
+*  it with yui_asset_release().
+***************************************************************************/
+function yui_asset_file_answer(file) {
+	if (!file) return null;
+	let url;
+	try {
+		url = URL.createObjectURL(file);
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`cannot preview the picked file: ${e && e.message ? e.message : e}`);
+		return null;
+	}
+	return {
+		mode: "url",
+		url,
+		content_type: file.type || "",
+		size: file.size,
+		original_name: file.name || "",
+		blob: true
+	};
+}
+/***************************************************************************
+*  Revoke every blob url this module created under `$root`, $root included.
+*
+*  Call it on whatever element is about to be dropped: a preview being
+*  replaced, a dialog being closed. A blob url that is never revoked keeps
+*  its bytes in memory for the life of the page.
+***************************************************************************/
+function yui_asset_release($root) {
+	if (!$root || !$root.querySelectorAll) return;
+	const marked = Array.from($root.querySelectorAll(`[${BLOB_ATTR}]`));
+	if ($root.hasAttribute && $root.hasAttribute(BLOB_ATTR)) marked.push($root);
+	marked.forEach(($el) => {
+		const url = $el.getAttribute(BLOB_ATTR);
+		$el.removeAttribute(BLOB_ATTR);
+		if (url) URL.revokeObjectURL(url);
+	});
+}
+/***************************************************************************
+*  The link that opens an asset in a new tab, or null when there is
+*  nothing to open. A control: named for the eye and for a reader, both
+*  through their keys so a language change re-translates them.
+***************************************************************************/
+function yui_asset_open_link(answer, opts = {}) {
+	const target = yui_asset_href(answer);
+	if (!target) return null;
+	const key = "open in a new tab";
+	const $a = (0, _yuneta_gobj_js.createElement2)([
+		"a",
+		{
+			class: `ASSET_OPEN ${opts.class || ""}`.trim(),
+			target: "_blank",
+			rel: "noopener",
+			title: (0, i18next.t)(key),
+			"data-i18n-title": key,
+			"aria-label": (0, i18next.t)(key),
+			"data-i18n-aria-label": key
+		},
+		[["span", { class: "ASSET_OPEN_ICON yi-link" }], [
+			"span",
+			{
+				class: "ASSET_OPEN_LABEL",
+				i18n: key
+			},
+			key
+		]]
+	]);
+	$a.href = target.href;
+	if (target.blob) $a.setAttribute(BLOB_ATTR, target.href);
+	return $a;
+}
+/***************************************************************************
+*  The element for one asset.
+*
+*  The KIND comes from the content type the backend stored, not from the
+*  name a person typed: video and audio are assets too, and an <img> whose
+*  src is a film shows the broken box this module exists to remove.
+*
+*  `detail` is what the missing marker shows -- pass the original name or
+*  the source path, the thing a person can act on.
+*
+*  A PDF goes in a frame, where the browser's own viewer draws it. Any
+*  other kind gets a card: what it is, and a link to open it.
+*  TODO: draw more kinds in place (plain text, office documents); today
+*  they are only opened in a new tab, where the browser does what it can.
+***************************************************************************/
+function yui_asset_element(answer, opts = {}) {
+	const src = yui_asset_src(answer);
+	if (!src) return yui_asset_missing(opts.detail, opts);
+	const kind = yui_asset_kind(answer.content_type);
+	const cls = `ASSET_MEDIA ${opts.class || ""}`.trim();
+	if (kind === "pdf") {
+		const target = yui_asset_href(answer);
+		if (!target) return yui_asset_missing(opts.detail, opts);
+		const $frame = (0, _yuneta_gobj_js.createElement2)(["iframe", {
+			class: `${cls} ASSET_DOCUMENT`,
+			title: opts.detail || answer.content_type || ""
+		}]);
+		$frame.src = target.href;
+		if (target.blob) $frame.setAttribute(BLOB_ATTR, target.href);
+		return $frame;
+	}
+	if (kind === "other") {
+		const children = [[
+			"span",
+			{ class: "ASSET_OTHER_TYPE" },
+			String(answer.content_type || "?")
+		]];
+		if (opts.detail) children.push([
+			"span",
+			{ class: "ASSET_OTHER_DETAIL" },
+			String(opts.detail)
+		]);
+		const $card = (0, _yuneta_gobj_js.createElement2)([
+			"div",
+			{ class: `${cls} ASSET_OTHER` },
+			children
+		]);
+		const $open = yui_asset_open_link(answer);
+		if ($open) $card.appendChild($open);
+		return $card;
+	}
+	let el;
+	if (kind === "video") el = (0, _yuneta_gobj_js.createElement2)(["video", {
+		class: cls,
+		controls: "",
+		preload: "metadata"
+	}]);
+	else if (kind === "audio") el = (0, _yuneta_gobj_js.createElement2)(["audio", {
+		class: cls,
+		controls: "",
+		preload: "metadata"
+	}]);
+	else {
+		el = (0, _yuneta_gobj_js.createElement2)(["img", {
+			class: cls,
+			loading: "lazy"
+		}]);
+		el.alt = opts.alt || opts.detail || "";
+	}
+	el.src = src;
+	if (answer.blob) el.setAttribute(BLOB_ATTR, src);
+	el.onerror = () => {
+		(0, _yuneta_gobj_js.log_error)(`asset could not be loaded: ${opts.detail || src}`);
+		const $marker = yui_asset_missing(opts.detail, opts);
+		if (el.parentNode) el.parentNode.replaceChild($marker, el);
+		yui_asset_release(el);
+	};
+	return el;
+}
+//#endregion
 //#region src/yui_file_field.js
 /***********************************************************************
 *          yui_file_field.js
@@ -6331,6 +6624,10 @@ function yui_file_control(gobj, { name, value, readonly, accept, on_pick }) {
 	const $name = (0, _yuneta_gobj_js.createElement2)(["span", { class: "FILE_NAME" }]);
 	const $size = (0, _yuneta_gobj_js.createElement2)(["span", { class: "FILE_SIZE" }]);
 	const $state = (0, _yuneta_gobj_js.createElement2)(["span", { class: "FILE_STATE" }]);
+	const $preview = (0, _yuneta_gobj_js.createElement2)(["div", {
+		class: "FILE_PREVIEW",
+		hidden: ""
+	}]);
 	const $control = (0, _yuneta_gobj_js.createElement2)([
 		"div",
 		{ class: "FILE_FIELD" },
@@ -6340,11 +6637,13 @@ function yui_file_control(gobj, { name, value, readonly, accept, on_pick }) {
 			$name,
 			$size,
 			$state,
-			$clear
+			$clear,
+			$preview
 		]
 	]);
 	$control.yui_file = null;
 	$control.yui_file_value = value || "";
+	$control.yui_file_stored = null;
 	const render = () => {
 		const picked = $control.yui_file;
 		const kept = $control.yui_file_value;
@@ -6365,6 +6664,24 @@ function yui_file_control(gobj, { name, value, readonly, accept, on_pick }) {
 		}
 		$clear.hidden = readonly || !picked && !kept;
 		$pick.hidden = !!readonly;
+		yui_asset_release($preview);
+		$preview.replaceChildren();
+		let $media = null;
+		if (picked) {
+			const answer = yui_asset_file_answer(picked);
+			if (answer) $media = yui_asset_element(answer, {
+				detail: picked.name || "",
+				class: "FILE_PREVIEW_MEDIA"
+			});
+		} else if (kept) {
+			const stored = $control.yui_file_stored;
+			if (stored && stored.id === kept) $media = yui_asset_element(stored.answer, {
+				detail: stored.error || kept,
+				class: "FILE_PREVIEW_MEDIA"
+			});
+		}
+		if ($media) $preview.appendChild($media);
+		$preview.hidden = !$media;
 	};
 	if (!readonly) {
 		$pick.addEventListener("click", () => {
@@ -6393,120 +6710,6 @@ function yui_file_control(gobj, { name, value, readonly, accept, on_pick }) {
 	};
 }
 //#endregion
-//#region src/yui_asset.js
-function ref_to_id(ref) {
-	if (!ref) return null;
-	if (typeof ref === "string") {
-		if (ref.indexOf("^") < 0) return ref;
-		const parts = ref.split("^");
-		return parts.length >= 2 && parts[1] ? parts[1] : null;
-	}
-	if (typeof ref === "object" && typeof ref.id === "string") return ref.id;
-	return null;
-}
-/***************************************************************************
-*  Every asset id a column names, in order. Always an array, possibly empty.
-***************************************************************************/
-function yui_asset_ids(ref) {
-	if (Array.isArray(ref)) return ref.map(ref_to_id).filter((id) => !!id);
-	const id = ref_to_id(ref);
-	return id ? [id] : [];
-}
-/***************************************************************************
-*  The first asset id a column names, or null.
-***************************************************************************/
-function yui_asset_id(ref) {
-	const ids = yui_asset_ids(ref);
-	return ids.length ? ids[0] : null;
-}
-/***************************************************************************
-*  Turn a `get-asset` answer into something an element can load.
-*
-*  Returns null when the answer carries neither -- which the caller must
-*  treat as "missing", never as an empty src: an <img src=""> reloads the
-*  PAGE in some browsers.
-***************************************************************************/
-function yui_asset_src(answer) {
-	if (!answer) return null;
-	if (answer.mode === "url" && answer.url) return answer.url;
-	if (answer.mode === "inline" && answer.content64) return `data:${answer.content_type || "application/octet-stream"};base64,${answer.content64}`;
-	return null;
-}
-/***************************************************************************
-*  The marker for an asset that is not there.
-*
-*  A missing image used to leave a broken box and no word about it, which
-*  is indistinguishable from a slow one and from a bug.  This says so, and
-*  it says WHICH: `detail` is data (a name, a path) and is never
-*  translated, while the label carries its i18n key so a language change
-*  re-translates it.
-***************************************************************************/
-function yui_asset_missing(detail, opts = {}) {
-	const key = opts.key || "asset not available";
-	const children = [["span", { class: "ASSET_MISSING_ICON yi-triangle-exclamation" }], [
-		"span",
-		{
-			class: "ASSET_MISSING_LABEL",
-			i18n: key
-		},
-		key
-	]];
-	if (detail) children.push([
-		"span",
-		{ class: "ASSET_MISSING_DETAIL" },
-		String(detail)
-	]);
-	const attrs = { class: `ASSET_MISSING ${opts.class || ""}`.trim() };
-	if (detail) attrs.title = String(detail);
-	else attrs["data-i18n-title"] = key;
-	return (0, _yuneta_gobj_js.createElement2)([
-		"div",
-		attrs,
-		children
-	]);
-}
-/***************************************************************************
-*  The element for one asset.
-*
-*  The KIND comes from the content type the backend stored, not from the
-*  name a person typed: video and audio are assets too, and an <img> whose
-*  src is a film shows the broken box this module exists to remove.
-*
-*  `detail` is what the missing marker shows -- pass the original name or
-*  the source path, the thing a person can act on.
-***************************************************************************/
-function yui_asset_element(answer, opts = {}) {
-	const src = yui_asset_src(answer);
-	if (!src) return yui_asset_missing(opts.detail, opts);
-	const ct = (answer.content_type || "").toLowerCase();
-	const cls = `ASSET_MEDIA ${opts.class || ""}`.trim();
-	let el;
-	if (ct.startsWith("video/")) el = (0, _yuneta_gobj_js.createElement2)(["video", {
-		class: cls,
-		controls: "",
-		preload: "metadata"
-	}]);
-	else if (ct.startsWith("audio/")) el = (0, _yuneta_gobj_js.createElement2)(["audio", {
-		class: cls,
-		controls: "",
-		preload: "metadata"
-	}]);
-	else {
-		el = (0, _yuneta_gobj_js.createElement2)(["img", {
-			class: cls,
-			loading: "lazy"
-		}]);
-		el.alt = opts.alt || opts.detail || "";
-	}
-	el.src = src;
-	el.onerror = () => {
-		(0, _yuneta_gobj_js.log_error)(`asset could not be loaded: ${opts.detail || src}`);
-		const $marker = yui_asset_missing(opts.detail, opts);
-		if (el.parentNode) el.parentNode.replaceChild($marker, el);
-	};
-	return el;
-}
-//#endregion
 //#region src/yui_inputs.js
 /***************************************************************
 *  The ✕ shows only when there is something to clear AND the field
@@ -7176,6 +7379,7 @@ function mt_create$17(gobj) {
 *      and subscriptions are already deleted.
 ************************************************************/
 function mt_destroy$17(gobj) {
+	yui_asset_release((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container"));
 	destroy_ui$10(gobj);
 }
 /************************************************************
@@ -9324,6 +9528,43 @@ function ac_clear_record(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  From the host: what it fetched for the asset a `file` column
+*  names -- the `get-asset` answer, or why there is none.
+*  {
+*      name:   the column
+*      id:     the asset id the answer is for
+*      answer: the get-asset answer, or null
+*      error:  why there is no answer, when there is none
+*  }
+*
+*  Kept on the control and drawn only while the column still names
+*  THAT id: an answer landing after the person picked another file
+*  or cleared the column must not bring the old picture back.
+************************************************************/
+function ac_set_file_preview(gobj, event, kw, src) {
+	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
+	let $form = $container ? $container.querySelector("form") : null;
+	if (!$form) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no form to show the file preview in`);
+		return -1;
+	}
+	let $file = null;
+	$form.querySelectorAll(".FILE_FIELD").forEach(($el) => {
+		if ($el.dataset.treedb_name === kw.name) $file = $el;
+	});
+	if (!$file) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no file column '${kw.name}' in the form`);
+		return -1;
+	}
+	$file.yui_file_stored = {
+		id: kw.id || "",
+		answer: kw.answer || null,
+		error: kw.error || ""
+	};
+	if ($file.yui_file_render) $file.yui_file_render();
+	return 0;
+}
+/************************************************************
 *  From internal form button for new rows
 *  or from load_tabulator_data() to load data from backend
 ************************************************************/
@@ -9517,6 +9758,11 @@ function create_gclass$17(gclass_name) {
 			ac_paste_record,
 			null
 		],
+		[
+			"EV_SET_FILE_PREVIEW",
+			ac_set_file_preview,
+			null
+		],
 		[
 			"EV_WINDOW_MOVED",
 			null,
@@ -9562,6 +9808,7 @@ function create_gclass$17(gclass_name) {
 		["EV_RECORD_CHANGED", 0],
 		["EV_COPY_RECORD", 0],
 		["EV_PASTE_RECORD", 0],
+		["EV_SET_FILE_PREVIEW", 0],
 		["EV_WINDOW_MOVED", 0],
 		["EV_WINDOW_RESIZED", 0],
 		["EV_WINDOW_TO_CLOSE", 0],
@@ -22759,6 +23006,7 @@ var attrs_table$6 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "subscriber", 0, null, "Subscriber of output events"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "gobj_remote_yuno", 0, null, "Remote yuno for data fetching"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "treedb_name", 0, null, "Remote TreeDB service name"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "assets_service", 0, "assets", "Remote service that answers `get-asset` (a C_ASSETS) for the bytes of the treedb's `file` columns: the form's preview and the table's file popup ask it. Empty: nothing is asked, and a file cell opens a marker saying the asset is not available"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "descs", 0, null, "Description of topics"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_remote_paging", 0, false, "Each topic table pulls its rows a PAGE at a time (`nodes` from/limit) instead of loading the topic whole. ⚠️ DO NOT TURN THIS ON: a partial topic BREAKS LINKING -- the link picker of a record is built from the rows the PARENT topic's table holds, which with paging is one page, so the right parent is usually not offered and an existing link the form cannot match is dropped on save. Off in every consumer until linking asks the backend instead of the sibling table"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_INTEGER, "page_size", 0, 0, "Rows per page of each topic table (the DISPLAY; the fetch is whole). 0 leaves the table's own default"),
@@ -24078,6 +24326,24 @@ function ac_mt_command_answer$2(gobj, event, kw, src) {
 		else (0, _yuneta_gobj_js.gobj_send_event)(jv, "EV_SET_JSON", { json: data }, gobj);
 		return 0;
 	}
+	if (command === "get-asset") {
+		let asset_topic = (0, _yuneta_gobj_js.kw_get_str)(gobj, kw_command, "topic_name", "", 0);
+		let req_id = (0, _yuneta_gobj_js.kw_get_str)(gobj, kw_command, "req_id", "", 0);
+		let gobj_topic_form = (0, _yuneta_gobj_js.gobj_find_child)(gobj, { __gobj_name__: `${(0, _yuneta_gobj_js.gobj_name)(gobj)}?${asset_topic}` });
+		if (!gobj_topic_form || !req_id) {
+			(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: get-asset answer for nobody: topic '${asset_topic}', req_id '${req_id}'`);
+			return 0;
+		}
+		if (result < 0) (0, _yuneta_gobj_js.gobj_send_event)(gobj_topic_form, "EV_ASSET_FAILED", {
+			req_id,
+			error: comment || "get-asset failed"
+		}, gobj);
+		else (0, _yuneta_gobj_js.gobj_send_event)(gobj_topic_form, "EV_ASSET_LOADED", {
+			req_id,
+			answer: data
+		}, gobj);
+		return 0;
+	}
 	if (result < 0) {
 		if (command === "descs") show_load_error$1(gobj, (0, i18next.t)(comment));
 		else {
@@ -24359,6 +24625,48 @@ function ac_request_page(gobj, event, kw, src) {
 	return 0;
 }
 /********************************************
+*  Event from formtable: the bytes of one asset a `file` column names,
+*  for the form's preview or the table's file popup.
+*
+*  Asked to the ASSETS service and not to the treedb: storing is the
+*  treedb's, the way out is C_ASSETS's (a signed url when a web server
+*  sits in front of the store, the bytes inline when there is none). The
+*  answer goes back down to the table that asked, by `req_id`.
+*
+*  A read: a read-only treedb still answers it.
+********************************************/
+function ac_request_asset(gobj, event, kw, src) {
+	if (!kw.req_id || !kw.asset_id) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: an asset request with no id`);
+		return -1;
+	}
+	let assets_service = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "assets_service");
+	let gobj_remote_yuno = (0, _yuneta_gobj_js.gobj_read_pointer_attr)(gobj, "gobj_remote_yuno");
+	if (!assets_service || !gobj_remote_yuno) {
+		(0, _yuneta_gobj_js.gobj_send_event)(src, "EV_ASSET_FAILED", {
+			req_id: kw.req_id,
+			error: assets_service ? "cannot reach the backend" : "no assets service"
+		}, gobj);
+		return 0;
+	}
+	let ret = (0, _yuneta_gobj_js.gobj_command)(gobj_remote_yuno, "get-asset", {
+		service: assets_service,
+		asset_id: kw.asset_id,
+		__md_command__: {
+			topic_name: kw.topic_name || (0, _yuneta_gobj_js.gobj_read_attr)(src, "topic_name"),
+			req_id: kw.req_id
+		}
+	}, gobj);
+	if (ret) {
+		(0, _yuneta_gobj_js.log_error)(ret);
+		(0, _yuneta_gobj_js.gobj_send_event)(src, "EV_ASSET_FAILED", {
+			req_id: kw.req_id,
+			error: "cannot reach the backend"
+		}, gobj);
+	}
+	return 0;
+}
+/********************************************
 *  Event from formtable: ONE field of one record, edited in place.
 *
 *  Written as a PARTIAL update and, deliberately, with NO `autolink`.
@@ -24544,6 +24852,11 @@ function create_gclass$6(gclass_name) {
 			ac_request_page,
 			null
 		],
+		[
+			"EV_REQUEST_ASSET",
+			ac_request_asset,
+			null
+		],
 		[
 			"EV_DELETE_RECORD",
 			ac_delete_record,
@@ -24624,6 +24937,7 @@ function create_gclass$6(gclass_name) {
 		["EV_UPDATE_RECORD", 0],
 		["EV_UPDATE_FIELD", 0],
 		["EV_REQUEST_PAGE", 0],
+		["EV_REQUEST_ASSET", 0],
 		["EV_DELETE_RECORD", 0],
 		["EV_RECORD_WRITTEN", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT | _yuneta_gobj_js.event_flag_t.EVF_NO_WARN_SUBS],
 		["EV_REFRESH_TOPIC", 0],
@@ -25429,7 +25743,12 @@ var PRIVATE_DATA$5 = {
 	schema_win: null,
 	cell_json_gobj: null,
 	cell_json_modal: null,
-	cell_json_win: null
+	cell_json_win: null,
+	cell_file_box: null,
+	cell_file_modal: null,
+	cell_file_win: null,
+	_pending_assets: null,
+	_asset_seq: 0
 };
 var __gclass__$5 = null;
 function is_mobile$1() {
@@ -25562,6 +25881,8 @@ function mt_stop$5(gobj) {
 	close_form_dialog(gobj);
 	close_schema_dialog(gobj);
 	close_cell_json_dialog(gobj);
+	close_cell_file_dialog(gobj);
+	drop_pending_assets(gobj);
 	table__destroy(gobj);
 }
 /***************************************************************
@@ -25571,6 +25892,8 @@ function mt_destroy$5(gobj) {
 	close_form_dialog(gobj);
 	close_schema_dialog(gobj);
 	close_cell_json_dialog(gobj);
+	close_cell_file_dialog(gobj);
+	drop_pending_assets(gobj);
 	destroy_ui$2(gobj);
 }
 /************************************************************
@@ -26215,6 +26538,20 @@ function create_tabulator(gobj) {
 				break;
 			case "file":
 				colFormatter = file_cell_formatter;
+				cellClick = function(e, cell) {
+					if (!e.target.closest(".FILE_CELL_LINK")) return;
+					e.stopPropagation();
+					let pkey = desc.pkey || "id";
+					let row_id = cell.getData()[pkey];
+					if (row_id === void 0 || row_id === null) {
+						(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: row without pkey '${pkey}', cannot open the file of '${cell.getField()}'`);
+						return;
+					}
+					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SHOW_CELL_FILE", {
+						row_id,
+						col_id: cell.getField()
+					}, gobj);
+				};
 				break;
 			case "object":
 			case "dict":
@@ -26485,13 +26822,21 @@ function table__destroy(gobj) {
 *  What a `file` column shows in a table cell: the asset it names.
 *
 *  A sha256 in full is 64 characters of noise in a column, so it is
-*  shortened and the whole of it is the tooltip. Empty is SAID, not left
-*  blank -- a blank cell and a cell whose asset failed to load look the
-*  same, and only one of them is normal.
+*  shortened and the whole of it goes to the popup the click opens. Empty
+*  is SAID, not left blank -- a blank cell and a cell whose asset failed
+*  to load look the same, and only one of them is normal.
+*
+*  The value arrives already turned into ids joined by ", "
+*  (transform__treedb_value_2_table_value), and an array column names
+*  several: the first is shown and the rest counted.
 ************************************************************/
+function file_cell_ids(value) {
+	if ((0, _yuneta_gobj_js.is_array)(value)) return yui_asset_ids(value);
+	return String(value || "").split(",").map((s) => s.trim()).filter((s) => !!s).flatMap((s) => yui_asset_ids(s));
+}
 function file_cell_formatter(cell, formatterParams, onRendered) {
-	const id = yui_asset_id(cell.getValue());
-	if (!id) return (0, _yuneta_gobj_js.createElement2)([
+	const ids = file_cell_ids(cell.getValue());
+	if (!ids.length) return (0, _yuneta_gobj_js.createElement2)([
 		"span",
 		{
 			class: "FILE_CELL is-empty",
@@ -26499,13 +26844,26 @@ function file_cell_formatter(cell, formatterParams, onRendered) {
 		},
 		"no file"
 	]);
-	return (0, _yuneta_gobj_js.createElement2)([
+	const children = [["span", { class: "FILE_CELL_ICON icon yi-eye" }], [
+		"span",
+		{ class: "FILE_CELL_ID" },
+		yui_file_id_label(ids[0])
+	]];
+	if (ids.length > 1) children.push([
 		"span",
+		{ class: "FILE_CELL_MORE" },
+		`+${ids.length - 1}`
+	]);
+	return (0, _yuneta_gobj_js.createElement2)([
+		"a",
 		{
-			class: "FILE_CELL",
-			title: id
+			class: "FILE_CELL FILE_CELL_LINK",
+			title: (0, i18next.t)("show file"),
+			"data-i18n-title": "show file",
+			"aria-label": (0, i18next.t)("show file"),
+			"data-i18n-aria-label": "show file"
 		},
-		yui_file_id_label(id)
+		children
 	]);
 }
 function icon_formatter(cell) {
@@ -26769,6 +27127,7 @@ function open_form_dialog(gobj, mode, record) {
 	});
 	(0, _yuneta_gobj_js.gobj_start)(form);
 	(0, _yuneta_gobj_js.refresh_language)($body, i18next.t);
+	request_form_previews(gobj, record);
 	let $with_focus = $body.querySelector(".with-focus:not([readonly])");
 	if (!$with_focus) $with_focus = $body.querySelector("input.input:not([readonly]), textarea, select");
 	if ($with_focus) $with_focus.focus();
@@ -27016,6 +27375,225 @@ function close_cell_json_dialog(gobj) {
 	teardown_cell_json_child(gobj);
 }
 /************************************************************
+*  Ask the host for the bytes of ONE asset.
+*
+*  Same contract as the page requests: the transport belongs to the
+*  HOST, so the request goes up as an event and the answer comes back
+*  down as one, correlated by a `req_id` the host echoes. What is parked
+*  here is WHERE the answer goes -- the form's preview of a column, or a
+*  slot of the file popup -- and the watchdog, because a request whose
+*  answer never lands would leave a "loading" on screen for ever.
+*
+*  `target` is kept here and never travels: it holds a gobj and a DOM
+*  node, and a kw is plain json.
+************************************************************/
+var ASSET_TIMEOUT_MS = 3e4;
+function request_asset(gobj, asset_id, target) {
+	let priv = gobj.priv;
+	if (!priv._pending_assets) priv._pending_assets = {};
+	let req_id = `a${++priv._asset_seq}`;
+	let timer = window.setTimeout(function() {
+		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_ASSET_FAILED", {
+			req_id,
+			error: "asset request timed out"
+		}, gobj);
+	}, ASSET_TIMEOUT_MS);
+	priv._pending_assets[req_id] = Object.assign({
+		id: asset_id,
+		timer
+	}, target);
+	(0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_REQUEST_ASSET", {
+		topic_name: (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "topic_name"),
+		req_id,
+		asset_id
+	});
+}
+/************************************************************
+*  Take a parked asset request out, however it ended. Null when
+*  it was already settled (a late answer after a timeout).
+************************************************************/
+function take_pending_asset(gobj, req_id) {
+	let priv = gobj.priv;
+	let pend = priv._pending_assets ? priv._pending_assets[req_id] : null;
+	if (!pend) return null;
+	delete priv._pending_assets[req_id];
+	if (pend.timer) window.clearTimeout(pend.timer);
+	return pend;
+}
+/************************************************************
+*  Forget every parked asset request: the view is going away,
+*  and a watchdog firing into a stopped gobj is an error for
+*  nothing.
+************************************************************/
+function drop_pending_assets(gobj) {
+	let priv = gobj.priv;
+	if (priv._pending_assets) {
+		for (const pend of Object.values(priv._pending_assets)) if (pend.timer) window.clearTimeout(pend.timer);
+	}
+	priv._pending_assets = null;
+}
+/************************************************************
+*  Ask for the asset of every `file` column the record names,
+*  for the form's preview. One per column: the form shows the
+*  asset the column keeps, which is the first it names.
+************************************************************/
+function request_form_previews(gobj, record) {
+	let priv = gobj.priv;
+	if (!record || !priv.form) return;
+	let desc = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "desc");
+	for (let col of desc.cols) {
+		if (!col.id || col.id.charAt(0) === "_") continue;
+		const field_desc = (0, _yuneta_gobj_js.treedb_get_field_desc)(col);
+		if (field_desc.type !== "file" || field_desc.is_hidden) continue;
+		let ids = file_cell_ids(record[col.id]);
+		if (!ids.length) continue;
+		request_asset(gobj, ids[0], {
+			target: "form",
+			form: priv.form,
+			col: col.id
+		});
+	}
+}
+/************************************************************
+*  Show what a `file` cell names -- every asset, when the
+*  column is an array -- in the standardized adaptive dialog.
+*
+*  Unlike the JSON cell this is NOT offline: the row holds the
+*  ids and the bytes are the backend's, so each slot opens as
+*  "loading" and one `get-asset` per id fills it.
+************************************************************/
+function open_cell_file_dialog(gobj, row_id, col_id) {
+	close_cell_file_dialog(gobj);
+	let priv = gobj.priv;
+	let tabulator = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator");
+	if (!tabulator) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no table, no file cell to show`);
+		return;
+	}
+	let row = tabulator.getRow(row_id);
+	if (!row) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: row '${row_id}' not found in the table`);
+		return;
+	}
+	let ids = file_cell_ids(row.getData()[col_id]);
+	if (!ids.length) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: row '${row_id}' col '${col_id}' names no file`);
+		return;
+	}
+	let $items = ids.map((id) => (0, _yuneta_gobj_js.createElement2)([
+		"div",
+		{ class: "CELL_FILE_ITEM" },
+		[[
+			"div",
+			{ class: "CELL_FILE_SLOT" },
+			[[
+				"span",
+				{
+					class: "CELL_FILE_LOADING",
+					i18n: "loading"
+				},
+				"loading"
+			]]
+		], [
+			"div",
+			{ class: "CELL_FILE_CAPTION" },
+			[[
+				"span",
+				{ class: "CELL_FILE_ID" },
+				id
+			]]
+		]]
+	]));
+	let $box = (0, _yuneta_gobj_js.createElement2)([
+		"div",
+		{ class: "TREEDB_CELL_FILE" },
+		$items
+	]);
+	let presented = present_json_popup(gobj, $box, {
+		name: "filewin_" + (0, _yuneta_gobj_js.clean_name)((0, _yuneta_gobj_js.gobj_name)(gobj)),
+		logical_class: "TREEDB_CELL_FILE",
+		title_prefix: String(row_id),
+		title: col_id,
+		icon: "yi-eye",
+		forget_window: function() {
+			priv.cell_file_win = null;
+		},
+		on_close: function() {
+			teardown_cell_file(gobj);
+		}
+	});
+	if (!presented) return;
+	priv.cell_file_box = $box;
+	priv.cell_file_modal = presented.modal;
+	priv.cell_file_win = presented.win;
+	ids.forEach((id, i) => {
+		request_asset(gobj, id, {
+			target: "popup",
+			box: $box,
+			slot: i
+		});
+	});
+}
+/************************************************************
+*  Fill one slot of the file popup with what came back.
+************************************************************/
+function fill_cell_file_slot(gobj, pend, answer, error) {
+	let priv = gobj.priv;
+	if (!priv.cell_file_box || priv.cell_file_box !== pend.box) return;
+	let $item = pend.box.querySelectorAll(".CELL_FILE_ITEM")[pend.slot];
+	let $slot = $item ? $item.querySelector(".CELL_FILE_SLOT") : null;
+	let $caption = $item ? $item.querySelector(".CELL_FILE_CAPTION") : null;
+	if (!$slot || !$caption) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: file popup has no slot ${pend.slot}`);
+		return;
+	}
+	yui_asset_release($slot);
+	$slot.replaceChildren(yui_asset_element(error ? null : answer, {
+		detail: error || pend.id,
+		alt: pend.id,
+		class: "CELL_FILE_MEDIA"
+	}));
+	(0, _yuneta_gobj_js.refresh_language)($slot, i18next.t);
+	if (!error && answer) {
+		let meta = [answer.content_type, yui_file_size_label(answer.size)].filter((s) => !!s).join(" · ");
+		if (meta) $caption.appendChild((0, _yuneta_gobj_js.createElement2)([
+			"span",
+			{ class: "CELL_FILE_META" },
+			meta
+		]));
+		let $open = yui_asset_open_link(answer);
+		if ($open) $caption.appendChild($open);
+	}
+}
+/************************************************************
+*  Retire the file popup. Called from its on_close -- the
+*  shell or the window has already removed the DOM. The blob
+*  urls it made are revoked; answers still in flight for it
+*  land on nobody (fill_cell_file_slot checks the box).
+************************************************************/
+function teardown_cell_file(gobj) {
+	let priv = gobj.priv;
+	yui_asset_release(priv.cell_file_box);
+	priv.cell_file_box = null;
+	let win = priv.cell_file_win;
+	priv.cell_file_win = null;
+	retire_popup_window(win);
+	priv.cell_file_modal = null;
+}
+/************************************************************
+*  Close the file popup (teardown, or a second open).
+************************************************************/
+function close_cell_file_dialog(gobj) {
+	let priv = gobj.priv;
+	if (priv.cell_file_modal) {
+		let modal = priv.cell_file_modal;
+		priv.cell_file_modal = null;
+		modal.close();
+		return;
+	}
+	teardown_cell_file(gobj);
+}
+/************************************************************
 *  True if the topic's pkey col carries the "rowid" flag.
 ************************************************************/
 function pkey_is_rowid(gobj) {
@@ -27799,6 +28377,57 @@ function ac_show_cell_json(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  Show the asset(s) one `file` cell names
+*  {
+*      row_id:
+*      col_id:
+*  }
+************************************************************/
+function ac_show_cell_file(gobj, event, kw, src) {
+	open_cell_file_dialog(gobj, kw.row_id, kw.col_id);
+	return 0;
+}
+/************************************************************
+*  Hand an asset answer -- or why there is none -- to whoever
+*  asked for it, if it is still there to take it.
+************************************************************/
+function deliver_asset(gobj, pend, answer, error) {
+	let priv = gobj.priv;
+	if (pend.target === "form") {
+		if (!priv.form || priv.form !== pend.form) return;
+		(0, _yuneta_gobj_js.gobj_send_event)(priv.form, "EV_SET_FILE_PREVIEW", {
+			name: pend.col,
+			id: pend.id,
+			answer,
+			error
+		}, gobj);
+		return;
+	}
+	fill_cell_file_slot(gobj, pend, answer, error);
+}
+/************************************************************
+*  The host answered an asset.
+*  {req_id, answer}
+************************************************************/
+function ac_asset_loaded(gobj, event, kw, src) {
+	let pend = take_pending_asset(gobj, kw.req_id);
+	if (!pend) return 0;
+	deliver_asset(gobj, pend, kw.answer || null, "");
+	return 0;
+}
+/************************************************************
+*  The host could not answer it, or nobody did in time.
+*  {req_id, error}
+************************************************************/
+function ac_asset_failed(gobj, event, kw, src) {
+	let why = kw && kw.error || "asset request failed";
+	let pend = take_pending_asset(gobj, kw.req_id);
+	(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: asset '${pend ? pend.id : kw.req_id}': ${why}`);
+	if (!pend) return 0;
+	deliver_asset(gobj, pend, null, why);
+	return 0;
+}
+/************************************************************
 *  One cell of one record changed. Publish it UP as a field write;
 *  the host owns the treedb command and its options.
 ************************************************************/
@@ -28302,6 +28931,21 @@ function create_gclass$5(gclass_name) {
 			ac_show_cell_json,
 			null
 		],
+		[
+			"EV_SHOW_CELL_FILE",
+			ac_show_cell_file,
+			null
+		],
+		[
+			"EV_ASSET_LOADED",
+			ac_asset_loaded,
+			null
+		],
+		[
+			"EV_ASSET_FAILED",
+			ac_asset_failed,
+			null
+		],
 		[
 			"EV_CHANGE_LOCALE",
 			ac_change_locale,
@@ -28402,6 +29046,10 @@ function create_gclass$5(gclass_name) {
 		["EV_UNSELECT_ROWS", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_SHOW_HOOK_DATA", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_SHOW_CELL_JSON", 0],
+		["EV_SHOW_CELL_FILE", 0],
+		["EV_ASSET_LOADED", 0],
+		["EV_ASSET_FAILED", 0],
+		["EV_REQUEST_ASSET", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_CHANGE_LOCALE", 0],
 		["EV_REFRESH", 0],
 		["EV_SHOW_SCHEMA", 0],
@@ -56720,8 +57368,9 @@ var PRIVATE_DATA$4 = {
 	_selected_paint_ids: [],
 	_pending_focus_topic: null,
 	_pending_focus_all: false,
-	_find_hidden_matches: 0,
-	_pending_find: null,
+	_find_term: "",
+	_find_current: "",
+	_find_found: null,
 	_layout_asked: "",
 	_nodes_total: 0,
 	_nodes_placed: 0,
@@ -58676,6 +59325,14 @@ function graph_focus_topic(gobj, topic, reveal_all) {
 	}
 	let model = priv._fold_model;
 	let state = priv._fold_state;
+	if ((0, _yuneta_gobj_js.empty_string)(topic) && priv._find_term) {
+		priv._focus_topic = null;
+		return;
+	}
+	if (!(0, _yuneta_gobj_js.empty_string)(topic)) {
+		priv._find_term = "";
+		priv._find_current = "";
+	}
 	let keys = [];
 	if (!(0, _yuneta_gobj_js.empty_string)(topic)) {
 		for (let node of model.nodes.values()) if (node.topic_name === topic) keys.push(node.key);
@@ -58691,17 +59348,17 @@ function graph_focus_topic(gobj, topic, reveal_all) {
 	}
 	priv._focus_topic = topic || null;
 	reconcile_fold(gobj, {}).then(() => {
-		apply_focus_ids(gobj, keys, "focus topic");
+		apply_focus_ids(gobj, keys, "focus topic", true);
 	});
 }
 /************************************************************
-*  Paint the highlight on these records (by model key) and put
-*  the first of them in the middle. Shared by the find and the
-*  topic focus, after the reconcile that brought them on screen.
-*  Keys that are still off screen are skipped: a match beyond the
-*  page a reveal opened is counted, not painted.
+*  Paint the highlight on these records (by model key) and, with
+*  `center`, put the first of them in the middle. Shared by the
+*  find and the topic focus. Keys that are not on screen are
+*  skipped: a match beyond the page a reveal opened is counted,
+*  not painted.
 ************************************************************/
-function apply_focus_ids(gobj, keys, what) {
+function apply_focus_ids(gobj, keys, what, center) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	if (!graph) return;
@@ -58726,7 +59383,7 @@ function apply_focus_ids(gobj, keys, what) {
 	try {
 		if (typeof graph.setElementState === "function") graph.setElementState(states);
 		apply_node_highlight(gobj, prev_ids, ids);
-		if (ids.length) yui_graph_center_on(graph, ids[0]);
+		if (center && ids.length) yui_graph_center_on(graph, ids[0]);
 	} catch (e) {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: ${what} apply failed: ${e}`);
 	}
@@ -58737,61 +59394,139 @@ function node_id_of_key(gobj, key) {
 	return build_node_name(gobj, key.slice(0, i), key.slice(i + 1));
 }
 /************************************************************
-*  Find the nodes whose name, id or topic contains `term`, highlight
-*  them with the same amber 'active' state the topic focus uses, and
-*  centre the viewport on them. Returns how many matched, which is the
-*  half the toolbar needs: a search that finds nothing must SAY so,
-*  because a graph that did not move is also what a graph looks like
-*  when the match is off-screen.
+*  The find box: highlight the cards ON SCREEN whose name, id or
+*  topic contains `term`, and change nothing else -- no group is
+*  opened, no layout runs, the camera does not move. The graph the
+*  reader arranged is the graph they are searching; emptying the
+*  box takes the amber off and leaves it exactly as it was.
+*
+*  It used to search the whole treedb and unfold a page of what it
+*  found, which re-laid the graph out on every keystroke and left
+*  the unfolded groups behind when the box was cleared. Opening up
+*  to a topic is the legend's focus (graph_focus_topic); this only
+*  LOOKS.
+*
+*  The term is kept and repainted after every reconcile (see
+*  reconcile_fold_now): a group opened by hand shows its matches
+*  already lit, and the count follows what is on screen.
 *
 *  It shares the highlight slot with graph_focus_topic on purpose —
-*  two amber sets at once would say nothing about either. An empty
-*  term clears it. Matching reads the node's LABEL and not only its
-*  id: on a topic keyed by rowid or by a qualified path, the id is a
-*  counter and the name a human knows is elsewhere (see node_label).
+*  two amber sets at once would say nothing about either. Matching
+*  reads the node's LABEL and not only its id: on a topic keyed by
+*  rowid or by a qualified path, the id is a counter and the name a
+*  human knows is elsewhere (see node_label).
 ************************************************************/
 function graph_find_nodes(gobj, term) {
 	let priv = gobj.priv;
-	if (!priv.graph || !priv.graph_rendered || !priv._fold_model) {
-		priv._pending_find = term;
-		return 0;
+	let next = (0, _yuneta_gobj_js.empty_string)(term) ? "" : String(term);
+	let was = priv._find_term;
+	priv._find_term = next;
+	priv._find_current = "";
+	priv._find_found = null;
+	let ready = priv.graph && priv.graph_rendered && priv._fold_model;
+	if (!next) {
+		if (was && ready && !priv._focus_topic) apply_focus_ids(gobj, [], "find", false);
+		publish_find_result(gobj);
+		return;
 	}
+	priv._focus_topic = null;
+	if (!ready) return;
+	refresh_find(gobj, fold_visible_set(priv._fold_model, priv._fold_state));
+}
+/************************************************************
+*  Repaint the find's highlight over the `visible` set and publish
+*  the count. A no-op while no term is live, so the topic focus
+*  keeps the slot.
+************************************************************/
+function refresh_find(gobj, visible) {
+	let priv = gobj.priv;
+	if (!priv._find_term) return;
+	let found = find_matches(gobj, priv._find_term, visible);
+	apply_focus_ids(gobj, found.keys, "find", false);
+	if (priv._find_current && (priv._focus_ids || []).indexOf(priv._find_current) < 0) priv._find_current = "";
+	priv._find_found = found;
+	publish_find_result(gobj);
+}
+/************************************************************
+*  The records matching `term`: the keys ON SCREEN, and how many
+*  more match that are NOT -- folded away in the fold model, or in
+*  a hidden topic. Those two are only counted: "0" alone would read
+*  as "does not exist" when it means "is not on screen".
+************************************************************/
+function find_matches(gobj, term, visible) {
+	let priv = gobj.priv;
 	let model = priv._fold_model;
-	let state = priv._fold_state;
-	let keys = [];
-	let hidden_matches = 0;
-	if (!(0, _yuneta_gobj_js.empty_string)(term)) {
-		let needle = String(term).toLowerCase();
-		let matches = (topic_name, record) => {
-			let label = "";
-			try {
-				label = node_label(priv.descs[topic_name] || {}, record) || "";
-			} catch (e) {
-				label = "";
-			}
-			return [
-				label,
-				record.id,
-				topic_name
-			].filter((v) => typeof v === "string").join(" ").toLowerCase().includes(needle);
-		};
-		for (let node of model.nodes.values()) if (matches(node.topic_name, node.record || {})) keys.push(node.key);
-		for (let topic_name of model.hidden) for (let record of priv.records[topic_name] || []) if ((0, _yuneta_gobj_js.is_object)(record) && matches(topic_name, record)) hidden_matches++;
+	let found = {
+		keys: [],
+		folded: 0,
+		hidden: 0
+	};
+	if (!model || (0, _yuneta_gobj_js.empty_string)(term)) return found;
+	let needle = String(term).toLowerCase();
+	let matches = (topic_name, record) => {
+		let label = "";
+		try {
+			label = node_label(priv.descs[topic_name] || {}, record) || "";
+		} catch (e) {
+			label = "";
+		}
+		return [
+			label,
+			record.id,
+			topic_name
+		].filter((v) => typeof v === "string").join(" ").toLowerCase().includes(needle);
+	};
+	for (let node of model.nodes.values()) if (matches(node.topic_name, node.record || {})) {
+		if (visible.has(node.key)) found.keys.push(node.key);
+		else found.folded++;
 	}
-	priv._find_hidden_matches = hidden_matches;
-	let visible = fold_visible_set(model, state);
-	let revealed = 0;
-	for (let key of keys) {
-		if (visible.has(key)) continue;
-		if (revealed >= state.page_size) break;
-		fold_reveal(model, state, key);
-		revealed++;
+	for (let topic_name of model.hidden) for (let record of priv.records[topic_name] || []) if ((0, _yuneta_gobj_js.is_object)(record) && matches(topic_name, record)) found.hidden++;
+	return found;
+}
+/************************************************************
+*  The lit cards in reading order: top to bottom, then left to
+*  right. The order Enter walks, and the one the "k/N" counts in.
+************************************************************/
+function find_order(gobj) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	let ids = (priv._focus_ids || []).slice();
+	if (!graph) return ids;
+	let pos = {};
+	for (let id of ids) {
+		let p = null;
+		try {
+			p = graph.getElementPosition(id);
+		} catch (e) {
+			p = null;
+		}
+		pos[id] = p || [0, 0];
 	}
-	priv._focus_topic = null;
-	reconcile_fold(gobj, {}).then(() => {
-		apply_focus_ids(gobj, keys, "find");
-	});
-	return keys.length;
+	ids.sort((a, b) => pos[a][1] - pos[b][1] || pos[a][0] - pos[b][0]);
+	return ids;
+}
+/************************************************************
+*  Enter in the find box: centre the next lit card (`back`: the
+*  previous one). The one camera move of the find, and the reader
+*  asks for it: the highlight alone cannot take anybody to a match
+*  that is outside the frame.
+************************************************************/
+function graph_find_step(gobj, back) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	if (!graph || !priv._find_term) return;
+	let ids = find_order(gobj);
+	if (ids.length === 0) return;
+	let i = ids.indexOf(priv._find_current);
+	if (i < 0) i = back ? ids.length - 1 : 0;
+	else i = (i + (back ? ids.length - 1 : 1)) % ids.length;
+	priv._find_current = ids[i];
+	try {
+		yui_graph_center_on(graph, ids[i]);
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: find step failed: ${e}`);
+	}
+	publish_find_result(gobj);
 }
 async function graph_zoom_in(gobj) {
 	let graph = gobj.priv.graph;
@@ -62683,6 +63418,7 @@ async function reconcile_fold_now(gobj, opts) {
 		history_resume(gobj);
 	}
 	publish_legend_state(gobj, visible);
+	refresh_find(gobj, visible);
 	return changed;
 }
 /************************************************************
@@ -63064,11 +63800,6 @@ function ac_load_data(gobj, event, kw, src) {
 				priv._pending_focus_all = false;
 				graph_focus_topic(gobj, ft, all);
 			}
-			if (priv._pending_find !== null) {
-				let term = priv._pending_find;
-				priv._pending_find = null;
-				publish_find_result(gobj, term, graph_find_nodes(gobj, term));
-			}
 		});
 	}
 	return 0;
@@ -63637,23 +64368,45 @@ function ac_node_dblclick(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
-*  Tell whoever asked how many nodes the term matched. The count is
-*  the answer to the question the box asks; without it "nothing moved"
-*  and "nothing matched" look the same.
+*  Tell whoever asked how many cards the term lit. The count is the
+*  answer to the question the box asks; without it "nothing lit" and
+*  "nothing matched" look the same.
+*
+*      matches         lit cards (on screen)
+*      folded_matches  matches folded away, not on screen
+*      hidden_matches  matches in hidden topics
+*      current         1-based place of the card Enter centred on
+*                      among the lit ones (reading order), 0 = none
 ************************************************************/
-function publish_find_result(gobj, term, matches) {
+function publish_find_result(gobj) {
+	let priv = gobj.priv;
+	let found = priv._find_found || {
+		keys: [],
+		folded: 0,
+		hidden: 0
+	};
+	let current = 0;
+	if (priv._find_term && priv._find_current) current = find_order(gobj).indexOf(priv._find_current) + 1;
 	(0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_FIND_RESULT", {
-		term,
-		matches,
-		hidden_matches: gobj.priv._find_hidden_matches || 0
+		term: priv._find_term,
+		matches: priv._find_term ? (priv._focus_ids || []).length : 0,
+		folded_matches: found.folded,
+		hidden_matches: found.hidden,
+		current
 	});
 }
 /************************************************************
 *
 ************************************************************/
 function ac_find_nodes$1(gobj, event, kw, src) {
-	let term = kw && kw.text || "";
-	publish_find_result(gobj, term, graph_find_nodes(gobj, term));
+	graph_find_nodes(gobj, kw && kw.text || "");
+	return 0;
+}
+/************************************************************
+*  Enter in the find box: {back: true} for Shift+Enter.
+************************************************************/
+function ac_find_next$1(gobj, event, kw, src) {
+	graph_find_step(gobj, !!(kw && kw.back));
 	return 0;
 }
 function ac_center(gobj, event, kw, src) {
@@ -64114,6 +64867,11 @@ function create_gclass$4(gclass_name) {
 			ac_find_nodes$1,
 			null
 		],
+		[
+			"EV_FIND_NEXT",
+			ac_find_next$1,
+			null
+		],
 		[
 			"EV_TOGGLE_FOLD",
 			ac_toggle_fold,
@@ -64269,6 +65027,7 @@ function create_gclass$4(gclass_name) {
 		["EV_ZOOM_SELECTION", 0],
 		["EV_FOCUS_TOPIC", 0],
 		["EV_FIND_NODES", 0],
+		["EV_FIND_NEXT", 0],
 		["EV_FIND_RESULT", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_LAYOUT_AUTOSET", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_CAMERA_CHANGED", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT | _yuneta_gobj_js.event_flag_t.EVF_NO_WARN_SUBS],
@@ -65061,19 +65820,34 @@ function make_toolbar(gobj) {
 			type: "text",
 			placeholder: (0, i18next.t)("search"),
 			"data-i18n-placeholder": "search",
-			"aria-label": (0, i18next.t)("search"),
-			"data-i18n-aria-label": "search"
+			title: (0, i18next.t)("find on screen"),
+			"data-i18n-title": "find on screen",
+			"aria-label": (0, i18next.t)("find on screen"),
+			"data-i18n-aria-label": "find on screen"
 		},
 		[],
-		{ input: (evt) => {
-			evt.stopPropagation();
-			let text = evt.target.value.trim();
-			if (priv.find_timer) clearTimeout(priv.find_timer);
-			priv.find_timer = setTimeout(function() {
-				priv.find_timer = null;
-				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FIND_NODES", { text }, gobj);
-			}, 250);
-		} }
+		{
+			input: (evt) => {
+				evt.stopPropagation();
+				let text = evt.target.value.trim();
+				if (priv.find_timer) clearTimeout(priv.find_timer);
+				priv.find_timer = setTimeout(function() {
+					priv.find_timer = null;
+					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FIND_NODES", { text }, gobj);
+				}, 250);
+			},
+			keydown: (evt) => {
+				if (evt.key !== "Enter" || evt.isComposing) return;
+				evt.preventDefault();
+				evt.stopPropagation();
+				if (priv.find_timer) {
+					clearTimeout(priv.find_timer);
+					priv.find_timer = null;
+					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FIND_NODES", { text: evt.target.value.trim() }, gobj);
+				}
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FIND_NEXT", { back: evt.shiftKey }, gobj);
+			}
+		}
 	]);
 	let $find_control = (0, _yuneta_gobj_js.createElement2)([
 		"div",
@@ -66402,6 +67176,14 @@ function ac_find_nodes(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  Enter in the find box: forward the step down to the graph child.
+************************************************************/
+function ac_find_next(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (priv.gobj_nodes_tree) (0, _yuneta_gobj_js.gobj_send_event)(priv.gobj_nodes_tree, "EV_FIND_NEXT", { back: !!(kw && kw.back) }, gobj);
+	return 0;
+}
+/************************************************************
 *  One press of the fold stepper (EV_EXPAND_LEVEL /
 *  EV_COLLAPSE_LEVEL): the level moves by one, is SAVED (the
 *  reader's, per treedb) and reaches the G6 child, which owns
@@ -66485,12 +67267,33 @@ function refresh_find_result(gobj) {
 		return 0;
 	}
 	let text = (0, i18next.t)("matches", { count: kw && kw.matches || 0 });
+	let current = kw && kw.current || 0;
+	if (current > 0) text = `${current}/${text}`;
+	let extra = [];
+	let folded = kw && kw.folded_matches || 0;
+	if (folded > 0) extra.push(`+${folded} ${(0, i18next.t)("not shown")}`);
 	let hidden = kw && kw.hidden_matches || 0;
-	if (hidden > 0) text += ` (+${hidden} ${(0, i18next.t)("hidden topics")})`;
+	if (hidden > 0) extra.push(`+${hidden} ${(0, i18next.t)("hidden topics")}`);
+	if (extra.length) text += ` (${extra.join(", ")})`;
 	$count.textContent = text;
 	$result.classList.remove("is-hidden");
 	return 0;
 }
+function clear_find_box(gobj) {
+	let priv = gobj.priv;
+	if (priv.find_timer) {
+		clearTimeout(priv.find_timer);
+		priv.find_timer = null;
+	}
+	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
+	let $input = $container ? $container.querySelector(".GRAPH_FIND_INPUT") : null;
+	if ($input) {
+		$input.value = "";
+		refresh_clear($input);
+	}
+	priv._find_result = null;
+	refresh_find_result(gobj);
+}
 function ac_set_focus_topic(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	priv.focus_topic = kw && kw.topic || "";
@@ -66501,6 +67304,7 @@ function ac_set_focus_topic(gobj, event, kw, src) {
 			set_legend_list_attr(gobj, "hidden_topics", "EV_SET_HIDDEN_TOPICS", hidden);
 		}
 	}
+	if (priv.focus_topic) clear_find_box(gobj);
 	if (priv.gobj_nodes_tree) (0, _yuneta_gobj_js.gobj_send_event)(priv.gobj_nodes_tree, "EV_FOCUS_TOPIC", {
 		topic: priv.focus_topic,
 		reveal: kw && kw.reveal || "page"
@@ -66678,6 +67482,11 @@ function create_gclass$3(gclass_name) {
 			ac_find_nodes,
 			null
 		],
+		[
+			"EV_FIND_NEXT",
+			ac_find_next,
+			null
+		],
 		[
 			"EV_EXPAND_LEVEL",
 			ac_fold_level_step,
@@ -66776,6 +67585,7 @@ function create_gclass$3(gclass_name) {
 		["EV_SET_OPERATION_MODE", 0],
 		["EV_SET_FOCUS_TOPIC", 0],
 		["EV_FIND_NODES", 0],
+		["EV_FIND_NEXT", 0],
 		["EV_EXPAND_LEVEL", 0],
 		["EV_COLLAPSE_LEVEL", 0],
 		["EV_SET_NODE_MODE", 0],