@yuneta/gobj-ui 7.23.64 → 7.23.66

package/dist/gobj-ui.cjs.js

@@ -268,7 +268,8 @@ var TOOLBAR_ACTION_TYPES = [
 	"navigate",
 	"drawer",
 	"event",
-	"dropdown"
+	"dropdown",
+	"link"
 ];
 /************************************************************
 *  Decide which renderer to use for a toolbar item.
@@ -337,6 +338,7 @@ function validate_action(action, owner_id) {
 	}
 	if (action.type === "navigate" && !_is_non_empty_string(action.route)) warnings.push(`toolbar item '${id}' (action.type:navigate) requires 'route'`);
 	if (action.type === "event" && !_is_non_empty_string(action.event)) warnings.push(`toolbar item '${id}' (action.type:event) requires 'event' name`);
+	if (action.type === "link" && !_is_non_empty_string(action.url)) warnings.push(`toolbar item '${id}' (action.type:link) requires 'url'`);
 	if (action.type === "dropdown") {
 		let nested = validate_dropdown_action(action, id);
 		for (let w of nested) warnings.push(w);
@@ -1684,6 +1686,20 @@ function safe_id(s) {
 *      drawer   { type:"drawer",   op:"toggle"|"open"|"close", menu_id? }
 *      event    { type:"event",    event, kw? }
 *      dropdown { type:"dropdown", items[] }    (toolbar-only)
+*      link     { type:"link",     url, target? }
+*
+*  `link` leaves the application, so on a toolbar item and on the brand
+*  it is rendered as a real <a href> rather than a <button>:
+*  middle-click, open-in-new-tab and the url in the status bar are what
+*  make a link recognisable as one, and a button that assigns
+*  location.href has none of them.  It is also why it does not become
+*  an FSM event -- there is no state of this application to transition;
+*  the page is being left.  A target of "_blank" gets
+*  rel="noopener noreferrer" for free.
+*
+*  INSIDE A DROPDOWN it stays a <button>, deliberately: those rows are
+*  role="menuitemradio" in a menu, and a link is not a choice among
+*  options.  There the dispatcher navigates.
 *
 *  Per-item `show_on` is honoured: each rendered item is wrapped with
 *  the same Bulma-helper logic as zones.
@@ -1770,6 +1786,26 @@ function badge_node(value) {
 	];
 }
 /************************************************************
+*  The attributes that turn a toolbar item into a real link, or
+*  null when this item is not one.  Answering null is what keeps
+*  every caller's default (a <button> that dispatches an action)
+*  exactly as it was.
+************************************************************/
+function toolbar_link_attrs(it) {
+	let action = it && it.action || {};
+	if (action.type !== "link") return null;
+	if ((0, _yuneta_gobj_js.empty_string)(action.url)) {
+		(0, _yuneta_gobj_js.log_warning)(`C_YUI_SHELL: toolbar item '${it.id || "?"}' has action.type "link" without a url`);
+		return null;
+	}
+	let attrs = { href: action.url };
+	if (!(0, _yuneta_gobj_js.empty_string)(action.target)) {
+		attrs.target = action.target;
+		if (action.target === "_blank") attrs.rel = "noopener noreferrer";
+	}
+	return attrs;
+}
+/************************************************************
 *  Renderer for the default ("action") item kind.
 ************************************************************/
 function build_toolbar_action_item(gobj, it) {
@@ -1808,12 +1844,17 @@ function build_toolbar_action_item(gobj, it) {
 		btn_attrs.title = tip;
 		btn_attrs["data-i18n-title"] = tip;
 	}
+	let link = toolbar_link_attrs(it);
+	if (link) {
+		delete btn_attrs.type;
+		Object.assign(btn_attrs, link);
+	}
 	let $item = (0, _yuneta_gobj_js.createElement2)([
-		"button",
+		link ? "a" : "button",
 		btn_attrs,
 		children
 	]);
-	$item.addEventListener("click", (ev) => {
+	if (!link) $item.addEventListener("click", (ev) => {
 		ev.preventDefault();
 		handle_toolbar_action(gobj, it, $item);
 	});
@@ -1845,7 +1886,11 @@ function build_toolbar_brand_item(gobj, it) {
 		attrs["aria-haspopup"] = "menu";
 		attrs["aria-expanded"] = "false";
 	}
-	if (action_type === "") tag = "div";
+	let link = toolbar_link_attrs(it);
+	if (link) {
+		tag = "a";
+		Object.assign(attrs, link);
+	} else if (action_type === "") tag = "div";
 	else attrs.type = "button";
 	let $item = (0, _yuneta_gobj_js.createElement2)([
 		tag,
@@ -1863,7 +1908,7 @@ function build_toolbar_brand_item(gobj, it) {
 			it.wordmark
 		]]
 	]);
-	if (action_type !== "") $item.addEventListener("click", (ev) => {
+	if (action_type !== "" && !link) $item.addEventListener("click", (ev) => {
 		ev.preventDefault();
 		handle_toolbar_action(gobj, it, $item);
 	});
@@ -2035,6 +2080,12 @@ function handle_toolbar_action(gobj, item, $trigger) {
 		case "dropdown":
 			toggle_toolbar_dropdown(gobj, item, action, $trigger);
 			break;
+		case "link":
+			if (!(0, _yuneta_gobj_js.empty_string)(action.url)) {
+				if (action.target === "_blank") window.open(action.url, "_blank", "noopener,noreferrer");
+				else window.location.assign(action.url);
+			} else (0, _yuneta_gobj_js.log_warning)(`C_YUI_SHELL: toolbar item '${item.id || "?"}' has action.type "link" without a url`);
+			break;
 		default: (0, _yuneta_gobj_js.log_warning)(`C_YUI_SHELL: toolbar item '${item.id || "?"}' has no/unknown action.type`);
 	}
 }
@@ -11203,7 +11254,7 @@ function ensure_drag_canvas_patch() {
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$13 = "C_YUI_JSON_GRAPH";
-var FOLD_SWALLOWED_EVENTS = [
+var FOLD_SWALLOWED_EVENTS$1 = [
 	"pointerdown",
 	"pointerup",
 	"mousedown",
@@ -11511,7 +11562,7 @@ function build_ui$12(gobj) {
 				keep: $card ? $card.getAttribute("data-json-path") : ""
 			}, gobj);
 		};
-		for (let type of FOLD_SWALLOWED_EVENTS) $mount.addEventListener(type, priv.fold_listener, true);
+		for (let type of FOLD_SWALLOWED_EVENTS$1) $mount.addEventListener(type, priv.fold_listener, true);
 	} else (0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no canvas mount, fold handles are dead`);
 	priv.$layout_select = $container.querySelector(".JSON_GRAPH_LAYOUT");
 	priv.$find_input = $container.querySelector(".JSON_GRAPH_FIND_INPUT");
@@ -11527,7 +11578,7 @@ function destroy_ui$8(gobj) {
 	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
 	if (priv.fold_listener) {
 		let $mount = $container ? $container.querySelector("#" + priv.canvas_id) : null;
-		if ($mount) for (let type of FOLD_SWALLOWED_EVENTS) $mount.removeEventListener(type, priv.fold_listener, true);
+		if ($mount) for (let type of FOLD_SWALLOWED_EVENTS$1) $mount.removeEventListener(type, priv.fold_listener, true);
 		priv.fold_listener = null;
 	}
 	if ($container) {
@@ -12378,7 +12429,7 @@ function ac_change_layout$2(gobj, event, kw, src) {
 *  would throw away where the reader was looking.  The toolbar
 *  pair, which changes everything at once, does refit.
 ************************************************************/
-function ac_toggle_fold(gobj, event, kw, src) {
+function ac_toggle_fold$1(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let path = kw && kw.path || "";
 	if ((0, _yuneta_gobj_js.empty_string)(path)) {
@@ -12417,7 +12468,7 @@ function ac_find_nodes$3(gobj, event, kw, src) {
 /************************************************************
 *  EV_EXPAND_ALL
 ************************************************************/
-function ac_expand_all$2(gobj, event, kw, src) {
+function ac_expand_all$4(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	if (priv.collapsed.size === 0) return 0;
 	priv.collapsed.clear();
@@ -12429,7 +12480,7 @@ function ac_expand_all$2(gobj, event, kw, src) {
 /************************************************************
 *  EV_COLLAPSE_ALL — fold every card but the root.
 ************************************************************/
-function ac_collapse_all$2(gobj, event, kw, src) {
+function ac_collapse_all$4(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let json_data = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "json_data");
 	if (!json_data) return 0;
@@ -12719,7 +12770,7 @@ function create_gclass$13(gclass_name) {
 		],
 		[
 			"EV_TOGGLE_FOLD",
-			ac_toggle_fold,
+			ac_toggle_fold$1,
 			null
 		],
 		[
@@ -12729,12 +12780,12 @@ function create_gclass$13(gclass_name) {
 		],
 		[
 			"EV_EXPAND_ALL",
-			ac_expand_all$2,
+			ac_expand_all$4,
 			null
 		],
 		[
 			"EV_COLLAPSE_ALL",
-			ac_collapse_all$2,
+			ac_collapse_all$4,
 			null
 		],
 		[
@@ -13799,7 +13850,7 @@ function ac_search$2(gobj, event, kw, src) {
 /************************************************************
 *   EV_EXPAND_ALL — expand every already-loaded container
 ************************************************************/
-function ac_expand_all$1(gobj, event, kw, src) {
+function ac_expand_all$3(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	if (priv.root === null || priv.root === void 0) return 0;
 	let paths = [];
@@ -13817,7 +13868,7 @@ function ac_expand_all$1(gobj, event, kw, src) {
 /************************************************************
 *   EV_COLLAPSE_ALL
 ************************************************************/
-function ac_collapse_all$1(gobj, event, kw, src) {
+function ac_collapse_all$3(gobj, event, kw, src) {
 	gobj.priv.expanded.clear();
 	render_view$1(gobj);
 	return 0;
@@ -14002,12 +14053,12 @@ function create_gclass$12(gclass_name) {
 		],
 		[
 			"EV_EXPAND_ALL",
-			ac_expand_all$1,
+			ac_expand_all$3,
 			null
 		],
 		[
 			"EV_COLLAPSE_ALL",
-			ac_collapse_all$1,
+			ac_collapse_all$3,
 			null
 		],
 		[
@@ -19010,7 +19061,7 @@ function ac_toggle_collapse(gobj, event, kw, src) {
 /************************************************************
 *  Force every node visible (overrides threshold).
 ************************************************************/
-function ac_expand_all(gobj, event, kw, src) {
+function ac_expand_all$2(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	if (!priv.collapse_state) priv.collapse_state = {};
 	if (priv.node_by_id) for (let id of Object.keys(priv.node_by_id)) {
@@ -19023,7 +19074,7 @@ function ac_expand_all(gobj, event, kw, src) {
 /************************************************************
 *  Collapse every node that has children.
 ************************************************************/
-function ac_collapse_all(gobj, event, kw, src) {
+function ac_collapse_all$2(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	if (!priv.collapse_state) priv.collapse_state = {};
 	if (priv.node_by_id) for (let id of Object.keys(priv.node_by_id)) {
@@ -19375,12 +19426,12 @@ function create_gclass$9(gclass_name) {
 		],
 		[
 			"EV_EXPAND_ALL",
-			ac_expand_all,
+			ac_expand_all$2,
 			null
 		],
 		[
 			"EV_COLLAPSE_ALL",
-			ac_collapse_all,
+			ac_collapse_all$2,
 			null
 		],
 		[
@@ -26749,6 +26800,429 @@ function node_label(desc, record) {
 	return id;
 }
 //#endregion
+//#region src/treedb_fold_model.js
+/***********************************************************************
+*          treedb_fold_model.js
+*
+*      A treedb read as a TREE, and which part of it is on screen.
+*
+*      A treedb is a graph: a record hangs from every parent one of its
+*      fkeys names, and a parent reaches its children through a hook.
+*      Drawn whole it is a pile -- a nave with a hundred and forty
+*      devices is a row of a hundred and forty cards -- so the graph
+*      opens FOLDED, the way a JSON viewer opens: the roots, a level or
+*      two under them, and a count on every cut saying what went with it.
+*
+*      This module is the arithmetic of that, and nothing else: no G6,
+*      no DOM, no gobj. The graph engine (c_g6_nodes_tree.js) asks it
+*      what is visible and draws exactly that.
+*
+*      Vocabulary
+*
+*          node key    "topic^id" -- one record
+*          group       the children of ONE node through ONE hook,
+*                      keyed "topic^id|hook"; the roots of a topic are
+*                      a group of their own, keyed "|topic"
+*          shown       how many of a group's children are on screen:
+*                      absent means folded, a number means the first
+*                      N, in record order, a page at a time
+*
+*      Two rules that are not obvious:
+*
+*      - A node is visible when SOME visible parent shows it, or it is
+*        a shown root. A record with two parents (a device hangs from
+*        its place AND its controller) is drawn ONCE, under whichever
+*        opened first, and folding one of the two leaves it where the
+*        other one shows it. The union, never the intersection.
+*
+*      - A parent that the engine does not draw an edge to is not a
+*        parent here either: the `extended` tier (hooks and no fkeys)
+*        gets no edges in draw_link(), so its children are roots. The
+*        tree on screen and the tree in this model have to agree, or a
+*        pill counts children that no line reaches.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+var PAGE_SIZE_DEFAULT = 24;
+/************************************************************
+*  Keys
+************************************************************/
+function fold_node_key(topic_name, id) {
+	return `${topic_name}^${id}`;
+}
+function fold_group_key(node_key, hook_name) {
+	return `${node_key}|${hook_name}`;
+}
+function fold_root_group_key(topic_name) {
+	return `|${topic_name}`;
+}
+function fold_split_group_key(group_key) {
+	let i = group_key.lastIndexOf("|");
+	if (i < 0) return null;
+	return {
+		node_key: group_key.slice(0, i),
+		hook: group_key.slice(i + 1)
+	};
+}
+/************************************************************
+*  Every parent a record names, decoded, in column order.
+*
+*  Only the parents that will be DRAWN: a topic missing from
+*  `descs` (a system topic such as `__assets__`, never fetched)
+*  and an `extended` parent (no edge is drawn to one, see the
+*  header) are left out, so a child of nothing else is a root.
+************************************************************/
+function parents_of(descs, desc, record) {
+	let out = [];
+	let cols = desc.cols || [];
+	for (let i = 0; i < cols.length; i++) {
+		let col = cols[i];
+		if (!col.fkey) continue;
+		let fkeys = record[col.id];
+		if (!fkeys) continue;
+		let list = (0, _yuneta_gobj_js.is_array)(fkeys) ? fkeys : [fkeys];
+		for (let j = 0; j < list.length; j++) {
+			let ref = (0, _yuneta_gobj_js.treedb_decoder_fkey)(col, list[j]);
+			if (!ref || !ref.topic_name || !ref.hook_name) continue;
+			let parent_desc = descs[ref.topic_name];
+			if (!parent_desc) continue;
+			if (parent_desc.node_treedb_type === "extended") continue;
+			out.push({
+				node_key: fold_node_key(ref.topic_name, String(ref.id)),
+				hook: ref.hook_name,
+				fkey_name: col.id
+			});
+		}
+	}
+	return out;
+}
+/************************************************************
+*  Build the model from the topic descriptions and their records.
+*
+*      descs    {topic_name: desc}, system topics included (skipped)
+*      records  {topic_name: [record, ...]}, in the order the
+*               backend returned them -- that order is the order of
+*               the children on screen, and of the pages
+*
+*  Returns
+*      {
+*          nodes:  Map<node_key, {key, topic_name, id, record,
+*                                 parents: [{node_key, hook, fkey_name}],
+*                                 hooks: {hook: [child_key, ...]}}>
+*          groups: Map<group_key, [child_key, ...]>   (roots included)
+*          topics: [topic_name, ...]  topics with records, in desc order
+*      }
+************************************************************/
+function fold_build_model(descs, records) {
+	let nodes = /* @__PURE__ */ new Map();
+	let groups = /* @__PURE__ */ new Map();
+	let topics = [];
+	descs = (0, _yuneta_gobj_js.is_object)(descs) ? descs : {};
+	records = (0, _yuneta_gobj_js.is_object)(records) ? records : {};
+	for (let topic_name of Object.keys(descs)) {
+		if (topic_name.substring(0, 2) === "__") continue;
+		descs[topic_name];
+		let list = records[topic_name];
+		if (!(0, _yuneta_gobj_js.is_array)(list)) continue;
+		topics.push(topic_name);
+		for (let i = 0; i < list.length; i++) {
+			let record = list[i];
+			if (!(0, _yuneta_gobj_js.is_object)(record) || record.id === void 0 || record.id === null) continue;
+			let key = fold_node_key(topic_name, String(record.id));
+			nodes.set(key, {
+				key,
+				topic_name,
+				id: String(record.id),
+				record,
+				parents: [],
+				hooks: {}
+			});
+		}
+	}
+	for (let node of nodes.values()) {
+		let desc = descs[node.topic_name];
+		let parents = parents_of(descs, desc, node.record);
+		for (let p of parents) {
+			let parent = nodes.get(p.node_key);
+			if (!parent) continue;
+			node.parents.push(p);
+			if (!parent.hooks[p.hook]) parent.hooks[p.hook] = [];
+			parent.hooks[p.hook].push(node.key);
+		}
+	}
+	for (let node of nodes.values()) for (let hook of Object.keys(node.hooks)) groups.set(fold_group_key(node.key, hook), node.hooks[hook]);
+	let roots = {};
+	for (let topic_name of topics) roots[topic_name] = [];
+	for (let node of nodes.values()) if (node.parents.length === 0) roots[node.topic_name].push(node.key);
+	let reached = reach_from(nodes, [].concat(...Object.values(roots)));
+	for (let node of nodes.values()) if (!reached.has(node.key)) {
+		roots[node.topic_name].push(node.key);
+		for (let k of reach_from(nodes, [node.key])) reached.add(k);
+	}
+	for (let topic_name of topics) if (roots[topic_name].length > 0) groups.set(fold_root_group_key(topic_name), roots[topic_name]);
+	return {
+		nodes,
+		groups,
+		topics
+	};
+}
+/************************************************************
+*  Everything reachable downwards from `start`, cycles included.
+************************************************************/
+function reach_from(nodes, start) {
+	let seen = /* @__PURE__ */ new Set();
+	let queue = start.slice();
+	while (queue.length) {
+		let key = queue.shift();
+		if (seen.has(key)) continue;
+		seen.add(key);
+		let node = nodes.get(key);
+		if (!node) continue;
+		for (let hook of Object.keys(node.hooks)) for (let child of node.hooks[hook]) if (!seen.has(child)) queue.push(child);
+	}
+	return seen;
+}
+/************************************************************
+*  Fold state: which groups are open, and how far.
+************************************************************/
+function fold_new_state(page_size) {
+	return {
+		page_size: page_size > 0 ? page_size : PAGE_SIZE_DEFAULT,
+		shown: /* @__PURE__ */ new Map()
+	};
+}
+function fold_group_total(model, group_key) {
+	let list = model.groups.get(group_key);
+	return list ? list.length : 0;
+}
+function fold_group_shown(model, state, group_key) {
+	let total = fold_group_total(model, group_key);
+	let n = state.shown.get(group_key) || 0;
+	return Math.min(n, total);
+}
+function fold_is_open(state, group_key) {
+	return (state.shown.get(group_key) || 0) > 0;
+}
+function page_ceiling(state, n) {
+	let p = state.page_size;
+	return Math.ceil(n / p) * p;
+}
+/************************************************************
+*  Open a group on its first page, or close it.
+*  Returns true when it ends OPEN.
+************************************************************/
+function fold_toggle(model, state, group_key) {
+	if (fold_is_open(state, group_key)) {
+		state.shown.delete(group_key);
+		return false;
+	}
+	if (fold_group_total(model, group_key) === 0) return false;
+	state.shown.set(group_key, state.page_size);
+	return true;
+}
+/************************************************************
+*  One more page of a group. Returns how many are shown now.
+************************************************************/
+function fold_show_more(model, state, group_key) {
+	let total = fold_group_total(model, group_key);
+	let n = fold_group_shown(model, state, group_key) + state.page_size;
+	n = Math.min(n, total);
+	if (n > 0) state.shown.set(group_key, n);
+	return n;
+}
+/************************************************************
+*  Every group open on ALL its children. This is the reader
+*  asking for the whole thing; the pages are for the other way in.
+************************************************************/
+function fold_expand_all(model, state) {
+	state.shown.clear();
+	for (let [group_key, list] of model.groups) if (list.length > 0) state.shown.set(group_key, list.length);
+}
+/************************************************************
+*  The roots and nothing else -- the first page of each topic's
+*  roots, the way the graph looks before anything is opened.
+************************************************************/
+function fold_collapse_all(model, state) {
+	state.shown.clear();
+	for (let topic_name of model.topics) {
+		let key = fold_root_group_key(topic_name);
+		if (fold_group_total(model, key) > 0) state.shown.set(key, state.page_size);
+	}
+}
+/************************************************************
+*  Open the tree down to `depth` levels: the roots are level 1,
+*  their children level 2. A node reached by two paths takes the
+*  shallowest. Each group opens on its first page. `depth` of 1
+*  is the roots alone; anything below that is treated as 1.
+************************************************************/
+function fold_expand_to_depth(model, state, depth) {
+	fold_collapse_all(model, state);
+	if (!(depth > 1)) return;
+	let level = /* @__PURE__ */ new Map();
+	let queue = [];
+	for (let topic_name of model.topics) {
+		let roots = model.groups.get(fold_root_group_key(topic_name)) || [];
+		for (let key of roots) if (!level.has(key)) {
+			level.set(key, 1);
+			queue.push(key);
+		}
+	}
+	while (queue.length) {
+		let key = queue.shift();
+		let lv = level.get(key);
+		if (lv >= depth) continue;
+		let node = model.nodes.get(key);
+		if (!node) continue;
+		for (let hook of Object.keys(node.hooks)) {
+			let children = node.hooks[hook];
+			if (children.length === 0) continue;
+			state.shown.set(fold_group_key(key, hook), state.page_size);
+			for (let child of children) if (!level.has(child)) {
+				level.set(child, lv + 1);
+				queue.push(child);
+			}
+		}
+	}
+}
+/************************************************************
+*  The set of node keys on screen, from the roots down through
+*  every open group -- and only through open groups whose parent
+*  is itself on screen: a group remembered open under a folded
+*  ancestor stays remembered, not shown.
+************************************************************/
+function fold_visible_set(model, state) {
+	let visible = /* @__PURE__ */ new Set();
+	let queue = [];
+	let push_group = (group_key, children) => {
+		let n = fold_group_shown(model, state, group_key);
+		for (let i = 0; i < n; i++) {
+			let key = children[i];
+			if (!visible.has(key)) {
+				visible.add(key);
+				queue.push(key);
+			}
+		}
+	};
+	for (let topic_name of model.topics) {
+		let key = fold_root_group_key(topic_name);
+		let roots = model.groups.get(key);
+		if (roots) push_group(key, roots);
+	}
+	while (queue.length) {
+		let key = queue.shift();
+		let node = model.nodes.get(key);
+		if (!node) continue;
+		for (let hook of Object.keys(node.hooks)) push_group(fold_group_key(key, hook), node.hooks[hook]);
+	}
+	return visible;
+}
+/************************************************************
+*  The open groups that still have children off screen, with the
+*  parent that owns each -- what the "+N" chips are drawn for.
+*  Only groups whose parent is visible (or root groups).
+*
+*  Returns [{group_key, node_key, hook, shown, total, rest}]
+************************************************************/
+function fold_pending_groups(model, state, visible) {
+	let out = [];
+	for (let [group_key, list] of model.groups) {
+		let shown = fold_group_shown(model, state, group_key);
+		if (shown === 0 || shown >= list.length) continue;
+		let g = fold_split_group_key(group_key);
+		if (g.node_key && !visible.has(g.node_key)) continue;
+		out.push({
+			group_key,
+			node_key: g.node_key,
+			hook: g.hook,
+			shown,
+			total: list.length,
+			rest: list.length - shown
+		});
+	}
+	return out;
+}
+/************************************************************
+*  The pills of one card: one per hook that has children.
+*
+*  Returns [{hook, group_key, total, shown, open, child_topic}]
+*  `child_topic` is the topic of the first child, which is what
+*  the pill is coloured with (a hook can name several topics in
+*  the schema, but the children it has are what it links).
+************************************************************/
+function fold_pills_of(model, state, node_key) {
+	let node = model.nodes.get(node_key);
+	if (!node) return [];
+	let out = [];
+	for (let hook of Object.keys(node.hooks)) {
+		let children = node.hooks[hook];
+		if (children.length === 0) continue;
+		let group_key = fold_group_key(node_key, hook);
+		let first = model.nodes.get(children[0]);
+		out.push({
+			hook,
+			group_key,
+			total: children.length,
+			shown: fold_group_shown(model, state, group_key),
+			open: fold_is_open(state, group_key),
+			child_topic: first ? first.topic_name : ""
+		});
+	}
+	return out;
+}
+/************************************************************
+*  Make ONE node visible, opening the groups on a path from a
+*  root to it, and as many pages of each as it takes for the
+*  node to be inside the shown prefix. Prefers the shortest path
+*  (breadth-first upwards). Returns false if no root reaches it,
+*  which cannot happen with a model built here (see roots) but
+*  is the honest answer for a key the model does not know.
+************************************************************/
+function fold_reveal(model, state, node_key) {
+	if (!model.nodes.get(node_key)) return false;
+	let root_group_of = (key) => {
+		let rg = fold_root_group_key(model.nodes.get(key).topic_name);
+		return (model.groups.get(rg) || []).indexOf(key) >= 0 ? rg : null;
+	};
+	let via = /* @__PURE__ */ new Map();
+	let queue = [node_key];
+	via.set(node_key, null);
+	let root_key = null;
+	while (queue.length) {
+		let key = queue.shift();
+		if (root_group_of(key)) {
+			root_key = key;
+			break;
+		}
+		let n = model.nodes.get(key);
+		for (let p of n.parents) {
+			if (!model.nodes.has(p.node_key) || via.has(p.node_key)) continue;
+			via.set(p.node_key, {
+				child_key: key,
+				hook: p.hook
+			});
+			queue.push(p.node_key);
+		}
+	}
+	if (root_key === null) return false;
+	let open_up_to = (group_key, child_key) => {
+		let list = model.groups.get(group_key) || [];
+		let idx = list.indexOf(child_key);
+		if (idx < 0) return;
+		let need = page_ceiling(state, idx + 1);
+		if (need > (state.shown.get(group_key) || 0)) state.shown.set(group_key, Math.min(need, list.length));
+	};
+	open_up_to(root_group_of(root_key), root_key);
+	let key = root_key;
+	while (true) {
+		let step = via.get(key);
+		if (!step) break;
+		open_up_to(fold_group_key(key, step.hook), step.child_key);
+		key = step.child_key;
+	}
+	return true;
+}
+//#endregion
 //#region node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
@@ -53493,6 +53967,23 @@ function ensure_brush_select_owned() {
 *              record: null,       // Data of node
 *          }
 *
+*          The graph opens FOLDED, like a JSON viewer.
+*
+*          Every record of every topic is fetched, but only the ones on
+*          screen become G6 nodes: the roots, `expand_depth` levels under
+*          them, one page (`fold_page_size`) of children per hook. Each
+*          card carries a pill per hook that has children -- `▸ devices
+*          142` -- which opens or folds that hook; an open hook with more
+*          children than its page ends in a `+N` chip that opens the next
+*          page. The arithmetic lives in treedb_fold_model.js; this file
+*          reconciles the G6 data with what that model says is visible
+*          (see reconcile_fold) and lays it out again.
+*
+*          `dagre` reads LEFT TO RIGHT: the children of a node are a
+*          column beside it, the ports move to the sides with it, and
+*          the edges are horizontal beziers. `antv-dagre` keeps the
+*          top-down reading.
+*
 *          Copyright (c) 2020-2021 Niyamaka.
 *          Copyright (c) 2025-2026, ArtGins.
 *          All Rights Reserved.
@@ -53552,8 +54043,18 @@ var SELECT_RING = "rgba(59,130,246,0.95)";
 ***************************************************************/
 var _layouts = {
 	"manual": { type: "manual" },
-	"dagre": { type: "dagre" },
-	"antv-dagre": { type: "antv-dagre" },
+	"dagre": {
+		type: "dagre",
+		rankdir: "LR",
+		nodesep: 18,
+		ranksep: 110
+	},
+	"antv-dagre": {
+		type: "antv-dagre",
+		rankdir: "TB",
+		nodesep: 30,
+		ranksep: 80
+	},
 	"d3-force": {
 		type: "d3-force",
 		link: {
@@ -53601,6 +54102,8 @@ var attrs_table$4 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_LIST, "layout_names", _yuneta_gobj_js.sdata_flag_t.SDF_RD, JSON.stringify(Object.keys(_layouts)), "Available layout names (read-only, for parent to query)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "hook_port_position", 0, "bottom", "Hook port position"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "fkey_port_position", 0, "top", "Fkey port position"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_INTEGER, "expand_depth", 0, 2, "Levels open when a treedb loads: 1 = the roots alone, 2 = the roots and their children. Every open hook shows its first page"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_INTEGER, "fold_page_size", 0, 24, "Children of one hook shown per page; the `+N` chip after the page opens the next one"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "confirm_delete_node", 0, true, "Ask confirmation before deleting a node"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "confirm_unlink_edge", 0, true, "Ask confirmation before unlinking an edge"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "wide", 0, "40px", "Height of header"),
@@ -53672,7 +54175,14 @@ var PRIVATE_DATA$4 = {
 	_pending_find: null,
 	_layout_asked: "",
 	_nodes_total: 0,
-	_nodes_placed: 0
+	_nodes_placed: 0,
+	expand_depth: 2,
+	fold_page_size: 24,
+	_fold_model: null,
+	_fold_state: null,
+	_fold_listener: null,
+	_pill_sig: null,
+	_fold_busy: false
 };
 var __gclass__$4 = null;
 /******************************
@@ -53692,6 +54202,7 @@ function mt_create$4(gobj) {
 	build_ui$4(gobj);
 	register_layouts(gobj);
 	build_graph$1(gobj);
+	install_fold_listener(gobj);
 	if (typeof ResizeObserver !== "undefined" && priv.$container) {
 		let ro = new ResizeObserver(() => {
 			if (priv._resize_raf) cancelAnimationFrame(priv._resize_raf);
@@ -53731,6 +54242,7 @@ function mt_destroy$4(gobj) {
 		i18next.default.off("languageChanged", priv._on_language_changed);
 		priv._on_language_changed = null;
 	}
+	uninstall_fold_listener(gobj);
 	if (priv._on_pointerdown_focus) {
 		priv.$container.removeEventListener("pointerdown", priv._on_pointerdown_focus, true);
 		priv._on_pointerdown_focus = null;
@@ -53918,6 +54430,7 @@ function configure_events(gobj) {
 	});
 	priv._on_language_changed = () => {
 		update_toolbar(gobj);
+		repaint_more_chips(gobj);
 	};
 	i18next.default.on("languageChanged", priv._on_language_changed);
 	priv._on_pointerdown_focus = (ev) => {
@@ -54415,15 +54928,79 @@ function build_ports(gobj, desc) {
 				top_ports.push(port);
 		}
 	}
-	for (let i = 0; i < top_ports.length; i++) top_ports[i].placement = [.5, 0];
-	for (let i = 0; i < bottom_ports.length; i++) {
-		let point = getPointPosition(bottom_ports.length, i);
-		if (top_ports.length === 0) bottom_ports[i].placement = [0, .5];
-		else bottom_ports[i].placement = [point, 1];
-	}
+	place_ports(gobj, top_ports, bottom_ports);
 	return [...top_ports, ...bottom_ports];
 }
 /************************************************************
+*  Which way the graph reads. `dagre` is the left-to-right
+*  layout; everything else keeps the top-down reading, `manual`
+*  included, because the saved arrangements were made with the
+*  ports on the top and bottom edges.
+************************************************************/
+function layout_direction(gobj) {
+	return gobj.priv.layout === "dagre" ? "LR" : "TB";
+}
+function edge_type_for(gobj) {
+	return layout_direction(gobj) === "LR" ? "cubic-horizontal" : "cubic";
+}
+/************************************************************
+*  Where the ports sit, by direction: fkeys (the way in from a
+*  parent) all on one point of the leading edge, hooks (the way
+*  out to the children) spread along the trailing edge. Left and
+*  right when the graph reads left to right; top and bottom
+*  otherwise.
+************************************************************/
+function place_ports(gobj, fkey_ports, hook_ports) {
+	let lr = layout_direction(gobj) === "LR";
+	for (let i = 0; i < fkey_ports.length; i++) fkey_ports[i].placement = lr ? [0, .5] : [.5, 0];
+	for (let i = 0; i < hook_ports.length; i++) {
+		let point = getPointPosition(hook_ports.length, i);
+		if (fkey_ports.length === 0 && !lr) hook_ports[i].placement = [0, .5];
+		else if (lr) hook_ports[i].placement = [1, point];
+		else hook_ports[i].placement = [point, 1];
+	}
+}
+/************************************************************
+*  The layout changed direction: move every port to the edge
+*  the new reading needs, and give every edge the curve that
+*  goes with it. Called before the layout runs, so the lines
+*  are drawn once, in the right place.
+************************************************************/
+function apply_layout_direction(gobj) {
+	let graph = gobj.priv.graph;
+	if (!graph) return;
+	let node_updates = [];
+	for (let nd of graph.getNodeData() || []) {
+		if (!nd || !nd.data || !nd.data.desc || !nd.style || !(0, _yuneta_gobj_js.is_array)(nd.style.ports)) continue;
+		let desc = nd.data.desc;
+		let fkey_ports = [];
+		let hook_ports = [];
+		for (let port of nd.style.ports) {
+			let col = get_col_by_id(desc, port.key);
+			let copy = Object.assign({}, port);
+			if (col && col.fkey) fkey_ports.push(copy);
+			else hook_ports.push(copy);
+		}
+		place_ports(gobj, fkey_ports, hook_ports);
+		node_updates.push({
+			id: nd.id,
+			style: { ports: [...fkey_ports, ...hook_ports] }
+		});
+	}
+	let type = edge_type_for(gobj);
+	let edge_updates = [];
+	for (let ed of graph.getEdgeData() || []) if (ed && ed.type !== type) edge_updates.push({
+		id: ed.id,
+		type
+	});
+	try {
+		if (node_updates.length) graph.updateNodeData(node_updates);
+		if (edge_updates.length) graph.updateEdgeData(edge_updates);
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot turn the ports: ${e}`);
+	}
+}
+/************************************************************
 *  Create a topic node in the G6 graph
 ************************************************************/
 function create_topic_node(gobj, desc, record) {
@@ -54432,8 +55009,6 @@ function create_topic_node(gobj, desc, record) {
 	let node_name = build_node_name(gobj, desc.topic_name, record.id);
 	let xy = get_default_ne_xy(gobj);
 	let geometry = get_node_graph_props(gobj, desc.topic_name, record.id, record);
-	priv._nodes_total++;
-	if (geometry_has_position(geometry)) priv._nodes_placed++;
 	let x = (0, _yuneta_gobj_js.kw_get_int)(gobj, geometry, "x", xy, _yuneta_gobj_js.kw_flag_t.KW_CREATE);
 	let y = (0, _yuneta_gobj_js.kw_get_int)(gobj, geometry, "y", xy, _yuneta_gobj_js.kw_flag_t.KW_CREATE);
 	let ports = build_ports(gobj, desc);
@@ -54446,24 +55021,26 @@ function create_topic_node(gobj, desc, record) {
 		stroke: getStrokeColor(desc.color),
 		lineWidth: 1
 	};
+	let pills_html = pills_html_of_key(gobj, fold_node_key(desc.topic_name, String(record.id)));
+	let size = card_size_for(node_treedb_type, !!pills_html);
 	if (node_treedb_type === "child") {
 		node_graph_type = "html";
-		style.size = [116, 40];
-		style.dx = -58;
-		style.dy = -20;
+		style.size = size;
+		style.dx = -size[0] / 2;
+		style.dy = -size[1] / 2;
 		style.innerHTML = build_chip_innerHTML(desc.color, priv.theme, record.icon, node_label(desc, record), record.id);
 	} else if (node_treedb_type === "extended") {
 		node_graph_type = "html";
-		style.size = [144, 66];
-		style.dx = -72;
-		style.dy = -33;
-		style.innerHTML = build_node_innerHTML(desc.color, priv.theme, record.icon, node_label(desc, record), desc.topic_name, true, record.id);
+		style.size = size;
+		style.dx = -size[0] / 2;
+		style.dy = -size[1] / 2;
+		style.innerHTML = build_node_innerHTML(desc.color, priv.theme, record.icon, node_label(desc, record), desc.topic_name, true, record.id, false, false, false, pills_html);
 	} else {
 		node_graph_type = "html";
-		style.size = [172, 96];
-		style.dx = -86;
-		style.dy = -48;
-		style.innerHTML = build_node_innerHTML(desc.color, priv.theme, record.icon, node_label(desc, record), desc.topic_name, false, record.id);
+		style.size = size;
+		style.dx = -size[0] / 2;
+		style.dy = -size[1] / 2;
+		style.innerHTML = build_node_innerHTML(desc.color, priv.theme, record.icon, node_label(desc, record), desc.topic_name, false, record.id, false, false, false, pills_html);
 	}
 	let topic_props = priv._graph_properties[desc.topic_name];
 	let topic_defaults = (0, _yuneta_gobj_js.is_object)(topic_props) && (0, _yuneta_gobj_js.is_object)(topic_props.defaults) ? topic_props.defaults : null;
@@ -54520,8 +55097,7 @@ function create_topic_node(gobj, desc, record) {
 *  Update topic node data
 ************************************************************/
 function update_topic_node(gobj, desc, node_name, record) {
-	let priv = gobj.priv;
-	let graph = priv.graph;
+	let graph = gobj.priv.graph;
 	try {
 		let nodedata = graph.getNodeData(node_name);
 		if (!nodedata) {
@@ -54529,18 +55105,7 @@ function update_topic_node(gobj, desc, node_name, record) {
 			return;
 		}
 		nodedata.data.record = record;
-		if (desc.node_treedb_type === "child") graph.updateNodeData([{
-			id: node_name,
-			style: { innerHTML: build_chip_innerHTML(desc.color, priv.theme, record.icon, node_label(desc, record), record.id) }
-		}]);
-		else if (desc.node_treedb_type === "extended") graph.updateNodeData([{
-			id: node_name,
-			style: { innerHTML: build_node_innerHTML(desc.color, priv.theme, record.icon, node_label(desc, record), desc.topic_name, true, record.id) }
-		}]);
-		else if (desc.node_treedb_type === "hierarchical") graph.updateNodeData([{
-			id: node_name,
-			style: { innerHTML: build_node_innerHTML(desc.color, priv.theme, record.icon, node_label(desc, record), desc.topic_name, false, record.id) }
-		}]);
+		repaint_cards(gobj, /* @__PURE__ */ new Set([node_name]));
 	} catch (e) {
 		(0, _yuneta_gobj_js.log_error)(e.message);
 	}
@@ -54579,19 +55144,6 @@ function remove_local_node(gobj, topic_name, node) {
 	}
 }
 /************************************************************
-*  Create all links from records, initial load from parent
-************************************************************/
-function create_links(gobj) {
-	let priv = gobj.priv;
-	for (const [topic_name, records] of Object.entries(priv.records)) {
-		let desc = priv.descs[topic_name];
-		for (let i = 0; i < records.length; i++) {
-			let record = records[i];
-			draw_links(gobj, desc, record, true);
-		}
-	}
-}
-/************************************************************
 *  Collect all fkey references from a record as a Set.
 *
 *  Each entry is a string: "col_id\tcol_idx\tfkey_value"
@@ -54671,6 +55223,17 @@ function draw_link(gobj, child_topic, child_id, source_col, fkey, verbose) {
 		return;
 	}
 	let child_node = build_node_name(gobj, child_topic, child_id);
+	let child_cell = null;
+	try {
+		child_cell = graph.getNodeData(child_node);
+	} catch (e) {
+		child_cell = null;
+	}
+	if (!child_cell) {
+		if (verbose) (0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: child node NOT FOUND: ${child_node}`);
+		return;
+	}
+	if (get_edge_by_link(gobj, parent_topic, parent_id, hook_name, child_topic, child_id, fkey_name)) return;
 	let dark = priv.theme === "dark";
 	let is_tree = parent_topic === child_topic;
 	let saved_lineWidth = is_tree ? 2 : 1.6;
@@ -54709,7 +55272,7 @@ function draw_link(gobj, child_topic, child_id, source_col, fkey, verbose) {
 	}
 	let edge = {
 		id: build_edge_id(gobj),
-		type: "cubic",
+		type: edge_type_for(gobj),
 		source: parent_node,
 		target: child_node,
 		style: {
@@ -54840,7 +55403,10 @@ function save_geometry(gobj) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	const nodes = graph.getData().nodes;
-	for (let i = 0; i < nodes.length; i++) update_geometry(gobj, nodes[i].id);
+	for (let i = 0; i < nodes.length; i++) {
+		if (!nodes[i].data || !nodes[i].data.desc) continue;
+		update_geometry(gobj, nodes[i].id);
+	}
 	const edges = graph.getData().edges;
 	for (let i = 0; i < edges.length; i++) update_edge_geometry(gobj, edges[i].id);
 	let origin = (0, _yuneta_gobj_js.gobj_read_str_attr)((0, _yuneta_gobj_js.gobj_yuno)(), "node_uuid");
@@ -55097,38 +55663,72 @@ async function graph_fit_selection(gobj, ids) {
 ************************************************************/
 function graph_focus_topic(gobj, topic) {
 	let priv = gobj.priv;
-	let graph = priv.graph;
-	if (!graph || !priv.graph_rendered) {
+	if (!priv.graph || !priv.graph_rendered || !priv._fold_model) {
 		priv._pending_focus_topic = topic;
 		return;
 	}
-	let data = {};
-	try {
-		data = graph.getData() || {};
-	} catch (e) {
-		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: graph.getData() failed: ${e}`);
-		return;
+	let model = priv._fold_model;
+	let state = priv._fold_state;
+	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);
+		if (keys.length === 0) (0, _yuneta_gobj_js.log_warning)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: focus topic '${topic}' has no nodes`);
+		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++;
+		}
 	}
-	let nodes = (0, _yuneta_gobj_js.is_array)(data.nodes) ? data.nodes : [];
+	priv._focus_topic = topic || null;
+	reconcile_fold(gobj, {}).then(() => {
+		apply_focus_ids(gobj, keys, "focus topic");
+	});
+}
+/************************************************************
+*  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.
+************************************************************/
+function apply_focus_ids(gobj, keys, what) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	if (!graph) return;
 	let states = {};
 	for (let id of priv._focus_ids || []) states[id] = [];
 	let ids = [];
-	if (!(0, _yuneta_gobj_js.empty_string)(topic)) {
-		for (let n of nodes) if (n && n.data && n.data.topic_name === topic) ids.push(n.id);
-		if (ids.length === 0) (0, _yuneta_gobj_js.log_warning)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: focus topic '${topic}' has no nodes`);
-		for (let id of ids) states[id] = ["active"];
+	for (let key of keys) {
+		let id = node_id_of_key(gobj, key);
+		let nd = null;
+		try {
+			nd = graph.getNodeData(id);
+		} catch (e) {
+			nd = null;
+		}
+		if (nd) {
+			ids.push(id);
+			states[id] = ["active"];
+		}
 	}
 	let prev_ids = priv._focus_ids || [];
 	priv._focus_ids = ids;
-	priv._focus_topic = topic || null;
 	try {
 		if (typeof graph.setElementState === "function") graph.setElementState(states);
 		apply_node_highlight(gobj, prev_ids, ids);
-		if (ids.length && typeof graph.focusElement === "function") graph.focusElement(ids);
+		if (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)}: focus topic apply failed: ${e}`);
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: ${what} apply failed: ${e}`);
 	}
 }
+function node_id_of_key(gobj, key) {
+	let i = key.indexOf("^");
+	if (i < 0) return "";
+	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
@@ -55145,52 +55745,43 @@ function graph_focus_topic(gobj, topic) {
 ************************************************************/
 function graph_find_nodes(gobj, term) {
 	let priv = gobj.priv;
-	let graph = priv.graph;
-	if (!graph || !priv.graph_rendered) {
+	if (!priv.graph || !priv.graph_rendered || !priv._fold_model) {
 		priv._pending_find = term;
 		return 0;
 	}
-	let data = {};
-	try {
-		data = graph.getData() || {};
-	} catch (e) {
-		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: graph.getData() failed: ${e}`);
-		return 0;
-	}
-	let nodes = (0, _yuneta_gobj_js.is_array)(data.nodes) ? data.nodes : [];
-	let states = {};
-	for (let id of priv._focus_ids || []) states[id] = [];
-	let ids = [];
+	let model = priv._fold_model;
+	let state = priv._fold_state;
+	let keys = [];
 	if (!(0, _yuneta_gobj_js.empty_string)(term)) {
 		let needle = String(term).toLowerCase();
-		for (let n of nodes) {
-			if (!n || !n.data) continue;
-			let record = n.data.record || {};
+		for (let node of model.nodes.values()) {
+			let record = node.record || {};
 			let label = "";
 			try {
-				label = node_label(n.data.desc || {}, record) || "";
+				label = node_label(priv.descs[node.topic_name] || {}, record) || "";
 			} catch (e) {
 				label = "";
 			}
 			if ([
 				label,
 				record.id,
-				n.data.topic_name
-			].filter((v) => typeof v === "string").join(" ").toLowerCase().includes(needle)) ids.push(n.id);
+				node.topic_name
+			].filter((v) => typeof v === "string").join(" ").toLowerCase().includes(needle)) keys.push(node.key);
 		}
-		for (let id of ids) states[id] = ["active"];
 	}
-	let prev_ids = priv._focus_ids || [];
-	priv._focus_ids = ids;
-	priv._focus_topic = null;
-	try {
-		if (typeof graph.setElementState === "function") graph.setElementState(states);
-		apply_node_highlight(gobj, prev_ids, ids);
-		if (ids.length && typeof graph.focusElement === "function") graph.focusElement(ids);
-	} catch (e) {
-		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: find apply failed: ${e}`);
+	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++;
 	}
-	return ids.length;
+	priv._focus_topic = null;
+	reconcile_fold(gobj, {}).then(() => {
+		apply_focus_ids(gobj, keys, "find");
+	});
+	return keys.length;
 }
 async function graph_zoom_in(gobj) {
 	let graph = gobj.priv.graph;
@@ -55303,20 +55894,43 @@ var LightNode = class extends _antv_g6.Circle {
 ************************************************************/
 var ManualLayout = class extends _antv_g6.BaseLayout {
 	async execute(data, options) {
-		const { nodes = [] } = data;
-		return { nodes: nodes.map((node) => {
-			let gp = node.data.graph_props;
-			let geo = node.data.record._geometry;
+		const { nodes = [], edges = [] } = data;
+		let placed = {};
+		let out = [];
+		let chips = [];
+		for (let node of nodes) {
+			let d = node.data || {};
+			if (d.more) {
+				chips.push(node);
+				continue;
+			}
+			let gp = d.graph_props;
+			let geo = d.record ? d.record._geometry : null;
 			let x = gp && gp.x != null ? gp.x : geo && geo.x != null ? geo.x : 0;
 			let y = gp && gp.y != null ? gp.y : geo && geo.y != null ? geo.y : 0;
-			return {
+			placed[node.id] = [x, y];
+			out.push({
 				id: node.id,
 				style: {
 					x,
 					y
 				}
-			};
-		}) };
+			});
+		}
+		for (let node of chips) {
+			let edge = edges.find((e) => e.target === node.id);
+			let p = edge ? placed[edge.source] : null;
+			let x = p ? p[0] : node.style && node.style.x || 0;
+			let y = p ? p[1] + 80 : node.style && node.style.y || 0;
+			out.push({
+				id: node.id,
+				style: {
+					x,
+					y
+				}
+			});
+		}
+		return { nodes: out };
 	}
 };
 /************************************************************
@@ -56820,7 +57434,7 @@ function show_node_popover(gobj) {
 		};
 		if (node_graph_type === "hierarchical") {
 			let record = nodeData.data.record || {};
-			updateStyle.innerHTML = build_node_innerHTML(fill, priv.theme, record.icon, node_label(nodeData.data.desc, record), nodeData.data.desc.topic_name, false, record.id);
+			updateStyle.innerHTML = build_node_innerHTML(fill, priv.theme, record.icon, node_label(nodeData.data.desc, record), nodeData.data.desc.topic_name, false, record.id, false, false, false, pills_html_of(gobj, nodeData));
 		}
 		graph.updateNodeData([{
 			id: node_id,
@@ -56860,7 +57474,7 @@ function show_node_popover(gobj) {
 			};
 			if (node_graph_type === "hierarchical") {
 				let record = nodeData.data.record || {};
-				restoreStyle.innerHTML = build_node_innerHTML(origFill, priv.theme, record.icon, node_label(nodeData.data.desc, record), nodeData.data.desc.topic_name, false, record.id);
+				restoreStyle.innerHTML = build_node_innerHTML(origFill, priv.theme, record.icon, node_label(nodeData.data.desc, record), nodeData.data.desc.topic_name, false, record.id, false, false, false, pills_html_of(gobj, nodeData));
 			}
 			graph.updateNodeData([{
 				id: node_id,
@@ -57045,6 +57659,7 @@ function refresh_minimap(gobj) {
 				let nd = graph.getNodeData(id);
 				let size = nd && nd.style && nd.style.size || [120, 60];
 				let color = nd && nd.data && nd.data.desc && nd.data.desc.color || "#94a3b8";
+				if (is_more_node(nd)) color = "rgba(148, 163, 184, 0.35)";
 				return new Rect({ style: {
 					x: -size[0] / 2,
 					y: -size[1] / 2,
@@ -57067,15 +57682,15 @@ function refresh_minimap(gobj) {
 *  same three-way choice — it lived inline in the theme refresh and is
 *  shared now. Returns null for a node that carries no desc.
 ************************************************************/
-function node_innerHTML_of(nd, theme, highlight, selected, anchored) {
+function node_innerHTML_of(nd, theme, highlight, selected, anchored, pills_html) {
 	if (!nd || !nd.data || !nd.data.desc) return null;
 	let desc = nd.data.desc;
 	let record = nd.data.record || {};
 	let label = node_label(desc, record);
 	switch (desc.node_treedb_type) {
 		case "child": return build_chip_innerHTML(desc.color, theme, record.icon, label, record.id, highlight, selected, anchored);
-		case "extended": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, true, record.id, highlight, selected, anchored);
-		case "hierarchical": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, false, record.id, highlight, selected, anchored);
+		case "extended": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, true, record.id, highlight, selected, anchored, pills_html);
+		case "hierarchical": return build_node_innerHTML(desc.color, theme, record.icon, label, desc.topic_name, false, record.id, highlight, selected, anchored, pills_html);
 	}
 	return null;
 }
@@ -57096,7 +57711,13 @@ function repaint_cards(gobj, ids) {
 	let selected = new Set(priv._selected_paint_ids || []);
 	let updates = [];
 	for (let id of ids) {
-		let html = node_innerHTML_of(graph.getNodeData(id), priv.theme, focus.has(id), selected.has(id), priv.anchor_state === "on" && id === priv.anchor_id);
+		let nd;
+		try {
+			nd = graph.getNodeData(id);
+		} catch (e) {
+			continue;
+		}
+		let html = node_innerHTML_of(nd, priv.theme, focus.has(id), selected.has(id), priv.anchor_state === "on" && id === priv.anchor_id, pills_html_of(gobj, nd));
 		if (html !== null) updates.push({
 			id,
 			style: { innerHTML: html }
@@ -57132,7 +57753,9 @@ function refresh_html_nodes_theme(gobj, theme) {
 	let updates = [];
 	for (let i = 0; i < nodes.length; i++) {
 		let id = nodes[i].id;
-		let html = node_innerHTML_of(graph.getNodeData(id), theme, highlighted.has(id), selected.has(id));
+		let nd = graph.getNodeData(id);
+		let html = node_innerHTML_of(nd, theme, highlighted.has(id), selected.has(id), priv.anchor_state === "on" && id === priv.anchor_id, pills_html_of(gobj, nd));
+		if (html === null) html = more_innerHTML_of(gobj, nd, theme);
 		if (html !== null) updates.push({
 			id,
 			style: { innerHTML: html }
@@ -57247,7 +57870,7 @@ function build_chip_innerHTML(color, theme, icon, label, key, highlight, selecte
 *  colour is kept (per-topic differentiation) but softened via
 *  color-mix instead of a harsh saturated fill. Theme-aware.
 ************************************************************/
-function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key, highlight, selected, anchored) {
+function build_node_innerHTML(color, theme, icon, label, topic_name, structural, key, highlight, selected, anchored, pills_html) {
 	let title = key || label;
 	let dark = theme === "dark";
 	let surface = dark ? "#1b2230" : "#ffffff";
@@ -57281,6 +57904,12 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
         margin-top: 2px; max-width: 100%;
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
     ">${(0, _yuneta_gobj_js.escapeHtml)(topic_name)}</div>`;
+	let pills_row = "";
+	if (pills_html) pills_row = `
+    <div class="TREEDB_PILLS" style="
+        display: flex; flex-wrap: nowrap; gap: 4px; justify-content: center;
+        margin-top: 6px; max-width: 100%; overflow: hidden;
+    ">${pills_html}</div>`;
 	return `
 <div class="TREEDB_CARD" title="${(0, _yuneta_gobj_js.escapeHtml)(title)}" style="
     box-sizing: border-box;
@@ -57306,7 +57935,7 @@ function build_node_innerHTML(color, theme, icon, label, topic_name, structural,
         max-width: 100%; overflow: hidden; text-overflow: ellipsis;
         display: -webkit-box; -webkit-line-clamp: 2;
         -webkit-box-orient: vertical; word-break: break-word;
-    ">${(0, _yuneta_gobj_js.escapeHtml)(label)}</div>${sub_html}
+    ">${(0, _yuneta_gobj_js.escapeHtml)(label)}</div>${sub_html}${pills_row}
 </div>
 `;
 }
@@ -57339,7 +57968,7 @@ function execute_delete_node(gobj, nodeData) {
 function select_all_nodes(gobj) {
 	let graph = gobj.priv.graph;
 	if (!graph) return;
-	set_selection(gobj, ((graph.getData() || {}).nodes || []).map((nd) => nd.id));
+	set_selection(gobj, ((graph.getData() || {}).nodes || []).filter((nd) => nd.data && nd.data.desc).map((nd) => nd.id));
 }
 /************************************************************
 *  The nodes currently selected, as their node data.
@@ -57603,7 +58232,7 @@ function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope) {
 		};
 		if (nd.data.desc.node_treedb_type === "hierarchical") {
 			let record = nd.data.record || {};
-			updateStyle.innerHTML = build_node_innerHTML(fill, priv.theme, record.icon, node_label(nd.data.desc, record), nd.data.desc.topic_name, false, record.id);
+			updateStyle.innerHTML = build_node_innerHTML(fill, priv.theme, record.icon, node_label(nd.data.desc, record), nd.data.desc.topic_name, false, record.id, false, false, false, pills_html_of(gobj, nd));
 		}
 		updates.push({
 			id: nodes[i].id,
@@ -57679,7 +58308,7 @@ function apply_edge_properties(gobj, edge_id, lineWidth, stroke, scope) {
 function update_edge_geometry(gobj, edge_id) {
 	let priv = gobj.priv;
 	let edgeData = priv.graph.getEdgeData(edge_id);
-	if (!edgeData || !edgeData.data) return;
+	if (!edgeData || !edgeData.data || !edgeData.data.parent_topic) return;
 	let style = edgeData.style || {};
 	let lineWidth = style.lineWidth;
 	let stroke = style.stroke;
@@ -57820,7 +58449,7 @@ function copy_size_to_nodes(gobj, same_topic_only) {
 	const nodes = graph.getData().nodes;
 	for (let i = 0; i < nodes.length; i++) {
 		let nd = graph.getNodeData(nodes[i].id);
-		if (!nd || !nd.data) continue;
+		if (!nd || !nd.data || !nd.data.desc) continue;
 		if (same_topic_only && nd.data.topic_name !== source_topic) continue;
 		if (nodes[i].id === node_id) continue;
 		let updateStyle = { size: [...source_size] };
@@ -57908,6 +58537,415 @@ function copy_size_to_ports(gobj, same_topic_only) {
 	}
 }
 /***************************
+*      Folding
+***************************/
+var PILL_ROW_HEIGHT = 24;
+var MORE_CHIP_SIZE = [76, 26];
+/************************************************************
+*  The three card sizes, with room for the pill row when there
+*  is one. A chip (pure child) never has pills: it has no hooks.
+************************************************************/
+function card_size_for(node_treedb_type, has_pills) {
+	let extra = has_pills ? PILL_ROW_HEIGHT : 0;
+	switch (node_treedb_type) {
+		case "child": return [116, 40];
+		case "extended": return [144, 66 + extra];
+		default: return [172, 96 + extra];
+	}
+}
+/************************************************************
+*  The model's key of a G6 record node, or "" for anything else.
+************************************************************/
+function node_key_of(nd) {
+	if (!nd || !nd.data || !nd.data.desc || !nd.data.record) return "";
+	return fold_node_key(nd.data.desc.topic_name, String(nd.data.record.id));
+}
+function is_more_node(nd) {
+	return !!(nd && nd.data && nd.data.more);
+}
+function more_node_id(gobj, group_key) {
+	return (0, _yuneta_gobj_js.sprintf)("more-%s-%s", gobj.priv.treedb_name, group_key);
+}
+function more_edge_id(gobj, group_key) {
+	return (0, _yuneta_gobj_js.sprintf)("more-edge-%s-%s", gobj.priv.treedb_name, group_key);
+}
+/************************************************************
+*  The colours of a pill or a chip, from the topic colour it
+*  stands for -- the CHILD topic, the same colour its hook port
+*  wears, so the pill and the port say the same thing.
+************************************************************/
+function pill_colors(color, theme) {
+	let dark = theme === "dark";
+	return {
+		bg: dark ? `color-mix(in srgb, ${color} 45%, #1b2230)` : `color-mix(in srgb, ${color} 22%, #ffffff)`,
+		fg: dark ? `color-mix(in srgb, ${color} 35%, #ffffff)` : `color-mix(in srgb, ${color} 55%, #0f172a)`,
+		border: dark ? `color-mix(in srgb, ${color} 80%, #ffffff)` : color
+	};
+}
+/************************************************************
+*  One pill: `▸ devices 142` folded, `▾ devices 24/142` open on a
+*  page, `▾ devices 142` open whole. A glyph and numbers on
+*  purpose: the card is an innerHTML string where a WORD could
+*  carry no i18n key, and the hook name is a schema identifier,
+*  like the topic subtitle above it.
+************************************************************/
+function build_pill_html(pill, color, theme) {
+	let c = pill_colors(color, theme);
+	let glyph = pill.open ? "&#9662;" : "&#9656;";
+	let count = pill.open && pill.shown < pill.total ? `${pill.shown}/${pill.total}` : `${pill.total}`;
+	return `<span class="TREEDB_PILL" data-fold-group="${(0, _yuneta_gobj_js.escapeHtml)(pill.group_key)}"
+        title="${(0, _yuneta_gobj_js.escapeHtml)(pill.hook)}" style="
+        display: inline-flex; align-items: center; gap: 3px; flex: 0 1 auto;
+        height: 16px; padding: 0 6px; border-radius: 8px;
+        background: ${c.bg}; color: ${c.fg}; border: 1px solid ${c.border};
+        font-size: 10px; font-weight: 700; line-height: 1; white-space: nowrap;
+        overflow: hidden; text-overflow: ellipsis;
+        cursor: pointer; user-select: none;
+    "><span style="font-size: 9px;">${glyph}</span>${(0, _yuneta_gobj_js.escapeHtml)(pill.hook)}<span style="opacity: .75; font-weight: 600;">${count}</span></span>`;
+}
+/************************************************************
+*  The pill row of one node, as html; "" when it has nothing to
+*  fold or the model is not built yet.
+************************************************************/
+function pills_html_of_key(gobj, node_key) {
+	let priv = gobj.priv;
+	if (!priv._fold_model || !priv._fold_state || !node_key) return "";
+	let pills = fold_pills_of(priv._fold_model, priv._fold_state, node_key);
+	if (!pills.length) return "";
+	let out = [];
+	for (let pill of pills) {
+		let child_desc = priv.descs ? priv.descs[pill.child_topic] : null;
+		let color = child_desc && child_desc.color || "#94a3b8";
+		out.push(build_pill_html(pill, color, priv.theme));
+	}
+	return out.join("");
+}
+function pills_html_of(gobj, nd) {
+	return pills_html_of_key(gobj, node_key_of(nd));
+}
+function pills_signature(gobj, node_key) {
+	let priv = gobj.priv;
+	if (!priv._fold_model || !priv._fold_state) return "";
+	return fold_pills_of(priv._fold_model, priv._fold_state, node_key).map((p) => `${p.hook}:${p.open ? p.shown : "-"}/${p.total}`).join(",");
+}
+/************************************************************
+*  The `+N` chip at the end of a page: the rest of the group,
+*  in the child topic's colour, dashed like a cut. Its title is
+*  the one WORD of the folding, and it is translated at build
+*  time: the chips are rebuilt on a language change.
+************************************************************/
+function build_more_innerHTML(color, theme, rest) {
+	let c = pill_colors(color, theme);
+	return `
+<div class="TREEDB_MORE" title="${(0, _yuneta_gobj_js.escapeHtml)((0, i18next.t)("show more"))}" style="
+    box-sizing: border-box; width: 100%; height: 100%;
+    display: flex; align-items: center; justify-content: center; gap: 4px;
+    background: ${c.bg}; color: ${c.fg}; border: 1px dashed ${c.border};
+    border-radius: 13px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    font-size: 12px; font-weight: 700; line-height: 1;
+    cursor: pointer; user-select: none;
+">+${rest}<span style="font-size: 10px; opacity: .8;">&#8230;</span></div>
+`;
+}
+function more_innerHTML_of(gobj, nd, theme) {
+	if (!is_more_node(nd)) return null;
+	let priv = gobj.priv;
+	let child_desc = priv.descs ? priv.descs[nd.data.child_topic] : null;
+	return build_more_innerHTML(child_desc && child_desc.color || "#94a3b8", theme, nd.data.rest);
+}
+/************************************************************
+*  The pills live inside an `innerHTML` string, so no handler can
+*  be attached to them: the click is delegated from the container
+*  in the CAPTURE phase over four event types -- the same door the
+*  JSON graph opens for its fold handles, for the same reasons: G6
+*  binds on the html node element, a descendant, so only capture
+*  runs first; and G6 never reads the DOM `click`, it builds its
+*  own from the pointer pair, so `pointerdown`/`pointerup` are the
+*  ones that have to be cut or the card is ALSO clicked.
+************************************************************/
+var FOLD_SWALLOWED_EVENTS = [
+	"pointerdown",
+	"pointerup",
+	"mousedown",
+	"click"
+];
+function install_fold_listener(gobj) {
+	let priv = gobj.priv;
+	if (!priv.$container) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no container, the fold pills are dead`);
+		return;
+	}
+	priv._fold_listener = function(evt) {
+		let $pill = evt.target && evt.target.closest ? evt.target.closest("[data-fold-group]") : null;
+		if (!$pill) return;
+		evt.stopPropagation();
+		evt.preventDefault();
+		if (evt.type !== "click") return;
+		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_TOGGLE_FOLD", { group: $pill.getAttribute("data-fold-group") }, gobj);
+	};
+	for (let type of FOLD_SWALLOWED_EVENTS) priv.$container.addEventListener(type, priv._fold_listener, true);
+}
+function uninstall_fold_listener(gobj) {
+	let priv = gobj.priv;
+	if (priv._fold_listener && priv.$container) for (let type of FOLD_SWALLOWED_EVENTS) priv.$container.removeEventListener(type, priv._fold_listener, true);
+	priv._fold_listener = null;
+}
+/************************************************************
+*  (Re)build the tree of the records. Cheap -- one pass over the
+*  records -- so it runs again on every create/update/delete
+*  rather than being patched. The fold state survives: it is
+*  keyed by group, and a group that is gone is simply never read.
+************************************************************/
+function rebuild_fold_model(gobj) {
+	let priv = gobj.priv;
+	priv._fold_model = fold_build_model(priv.descs || {}, priv.records || {});
+	if (!priv._fold_state) priv._fold_state = fold_new_state((0, _yuneta_gobj_js.gobj_read_integer_attr)(gobj, "fold_page_size"));
+	if (!priv._pill_sig) priv._pill_sig = /* @__PURE__ */ new Map();
+}
+/************************************************************
+*  How many records there are, and how many carry a saved
+*  position -- what auto_layout decides on. Counted over the
+*  RECORDS, because the nodes on screen are a fraction of them.
+************************************************************/
+function count_placed_records(gobj) {
+	let priv = gobj.priv;
+	priv._nodes_total = 0;
+	priv._nodes_placed = 0;
+	for (const [topic_name, records] of Object.entries(priv.records || {})) {
+		if (topic_name.substring(0, 2) === "__" || !(0, _yuneta_gobj_js.is_array)(records)) continue;
+		for (let record of records) {
+			priv._nodes_total++;
+			if (geometry_has_position(get_node_graph_props(gobj, topic_name, record.id, record))) priv._nodes_placed++;
+		}
+	}
+}
+/************************************************************
+*  Make the G6 data say what the fold model says is visible.
+*
+*  Record nodes not visible any more are removed (their edges go
+*  with them), the visible ones missing are created, the links
+*  between visible nodes are drawn, the `+N` chips are placed or
+*  taken away, and every card whose pills changed is repainted.
+*  Then a draw, a layout if the set of nodes changed, and the
+*  camera: fit the whole thing on the first load, or put `keep`
+*  back where it was on screen before the change.
+*
+*  Serialised: one reconcile at a time, in order. Two pills tapped
+*  quickly would otherwise interleave their draws.
+*
+*      opts.relayout   run the layout even if no node came or went
+*      opts.fit        fit the viewport afterwards
+*      opts.keep       node id to hold still on screen
+*      opts.keep_vp    where it was ([x, y] viewport px)
+************************************************************/
+function reconcile_fold(gobj, opts) {
+	let priv = gobj.priv;
+	let run = () => reconcile_fold_now(gobj, opts || {}).catch((e) => {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: reconcile failed: ${e}`);
+	});
+	priv._fold_chain = (priv._fold_chain || Promise.resolve()).then(run, run);
+	return priv._fold_chain;
+}
+async function reconcile_fold_now(gobj, opts) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	let model = priv._fold_model;
+	let state = priv._fold_state;
+	if (!graph || !model || !state || (0, _yuneta_gobj_js.gobj_is_destroying)(gobj)) return;
+	let visible = fold_visible_set(model, state);
+	let changed = false;
+	history_pause(gobj);
+	try {
+		changed = await reconcile_fold_apply(gobj, opts, visible);
+	} finally {
+		history_resume(gobj);
+	}
+	return changed;
+}
+async function reconcile_fold_apply(gobj, opts, visible) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	let model = priv._fold_model;
+	let state = priv._fold_state;
+	let changed = false;
+	let present = /* @__PURE__ */ new Map();
+	let more_present = /* @__PURE__ */ new Map();
+	for (let nd of graph.getNodeData() || []) {
+		if (is_more_node(nd)) {
+			more_present.set(nd.data.more, nd.id);
+			continue;
+		}
+		let key = node_key_of(nd);
+		if (key) present.set(key, nd.id);
+	}
+	let to_remove = [];
+	for (let [key, id] of present) if (!visible.has(key)) to_remove.push(id);
+	if (to_remove.length) {
+		let gone = new Set(to_remove);
+		if (priv._selected_node_id && gone.has(priv._selected_node_id)) deselect_node(gobj);
+		if (priv._detail_node_id && gone.has(priv._detail_node_id)) hide_node_detail(gobj);
+		priv._focus_ids = (priv._focus_ids || []).filter((id) => !gone.has(id));
+		priv._selected_paint_ids = (priv._selected_paint_ids || []).filter((id) => !gone.has(id));
+		if (priv.anchor_state === "on" && gone.has(priv.anchor_id)) {
+			priv.anchor_id = "";
+			priv.anchor_state = "off";
+			update_toolbar(gobj);
+		}
+		for (let id of to_remove) priv._pill_sig.delete(id);
+		graph.removeNodeData(to_remove);
+		changed = true;
+	}
+	for (let key of visible) {
+		if (present.has(key)) continue;
+		let node = model.nodes.get(key);
+		let desc = priv.descs[node.topic_name];
+		if (!desc) {
+			(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no desc for ${key}`);
+			continue;
+		}
+		create_topic_node(gobj, desc, node.record);
+		priv._pill_sig.set(build_node_name(gobj, node.topic_name, node.id), pills_signature(gobj, key));
+		changed = true;
+	}
+	for (let key of visible) {
+		let node = model.nodes.get(key);
+		let desc = priv.descs[node.topic_name];
+		if (desc) draw_links(gobj, desc, node.record, false);
+	}
+	let pending = fold_pending_groups(model, state, visible);
+	let wanted = /* @__PURE__ */ new Map();
+	for (let p of pending) wanted.set(p.group_key, p);
+	let more_gone = [];
+	for (let [group_key, id] of more_present) if (!wanted.has(group_key)) more_gone.push(id);
+	if (more_gone.length) {
+		graph.removeNodeData(more_gone);
+		changed = true;
+	}
+	for (let p of pending) {
+		let first = model.nodes.get((model.groups.get(p.group_key) || [])[0]);
+		let child_topic = first ? first.topic_name : "";
+		let child_desc = priv.descs[child_topic];
+		let color = child_desc && child_desc.color || "#94a3b8";
+		let id = more_node_id(gobj, p.group_key);
+		if (more_present.has(p.group_key)) {
+			let nd = graph.getNodeData(id);
+			if (nd && nd.data.rest !== p.rest) {
+				nd.data.rest = p.rest;
+				graph.updateNodeData([{
+					id,
+					style: { innerHTML: build_more_innerHTML(color, priv.theme, p.rest) }
+				}]);
+			}
+			continue;
+		}
+		let xy = get_default_ne_xy(gobj);
+		graph.addNodeData([{
+			id,
+			type: "html",
+			style: {
+				x: xy,
+				y: xy,
+				size: [...MORE_CHIP_SIZE],
+				dx: -MORE_CHIP_SIZE[0] / 2,
+				dy: -MORE_CHIP_SIZE[1] / 2,
+				innerHTML: build_more_innerHTML(color, priv.theme, p.rest)
+			},
+			data: {
+				more: p.group_key,
+				child_topic,
+				rest: p.rest
+			}
+		}]);
+		if (p.node_key) {
+			let parent = model.nodes.get(p.node_key);
+			let dark = priv.theme === "dark";
+			graph.addEdgeData([{
+				id: more_edge_id(gobj, p.group_key),
+				type: edge_type_for(gobj),
+				source: build_node_name(gobj, parent.topic_name, parent.id),
+				target: id,
+				style: {
+					sourcePort: p.hook,
+					lineWidth: 1,
+					lineDash: [4, 3],
+					stroke: dark ? "#8b94a3" : "#94a3b8",
+					startArrow: false,
+					endArrow: false
+				},
+				data: { more: p.group_key }
+			}]);
+		}
+		changed = true;
+	}
+	let repaint = /* @__PURE__ */ new Set();
+	let resize = [];
+	for (let key of visible) {
+		let node = model.nodes.get(key);
+		let id = build_node_name(gobj, node.topic_name, node.id);
+		let sig = pills_signature(gobj, key);
+		if (priv._pill_sig.get(id) === sig) continue;
+		let had = !!priv._pill_sig.get(id);
+		priv._pill_sig.set(id, sig);
+		repaint.add(id);
+		if (had !== !!sig) {
+			let nd = graph.getNodeData(id);
+			let desc = nd && nd.data && nd.data.desc;
+			let geometry = nd && nd.data && nd.data.graph_props || {};
+			if (desc && !(0, _yuneta_gobj_js.is_array)(geometry.size)) {
+				let size = card_size_for(desc.node_treedb_type, !!sig);
+				resize.push({
+					id,
+					style: {
+						size,
+						dx: -size[0] / 2,
+						dy: -size[1] / 2
+					}
+				});
+			}
+		}
+	}
+	if (resize.length) graph.updateNodeData(resize);
+	if (repaint.size) repaint_cards(gobj, repaint);
+	try {
+		refresh_minimap(gobj);
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: refresh_minimap failed: ${e}`);
+	}
+	await graph_draw(gobj);
+	if (changed || opts.relayout) await graph_layout(gobj);
+	if (opts.fit) await graph_fit_readable(gobj);
+	else if (opts.keep && opts.keep_vp) await yui_graph_place_at(graph, opts.keep, opts.keep_vp);
+	update_resize_handles_position(gobj);
+	update_port_resize_handles_position(gobj);
+	update_edge_icon_position(gobj);
+	update_node_icon_position(gobj);
+	update_link_icon_position(gobj);
+	return changed;
+}
+/************************************************************
+*  Repaint the `+N` chips (theme or language changed).
+************************************************************/
+function repaint_more_chips(gobj) {
+	let priv = gobj.priv;
+	let graph = priv.graph;
+	if (!graph) return;
+	let updates = [];
+	for (let nd of graph.getNodeData() || []) {
+		let html = more_innerHTML_of(gobj, nd, priv.theme);
+		if (html !== null) updates.push({
+			id: nd.id,
+			style: { innerHTML: html }
+		});
+	}
+	if (updates.length) try {
+		graph.updateNodeData(updates);
+		graph.draw();
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot repaint the chips: ${e}`);
+	}
+}
+/***************************
 *      Actions
 ***************************/
 /************************************************************
@@ -57936,6 +58974,9 @@ function ac_clear_data(gobj, event, kw, src) {
 	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "records", {});
 	priv._nodes_total = 0;
 	priv._nodes_placed = 0;
+	priv._fold_model = null;
+	priv._fold_state = null;
+	priv._pill_sig = null;
 	graph_remove_plugin(gobj, "history");
 	update_history_buttons(gobj);
 	graph_clear(gobj);
@@ -57966,53 +59007,43 @@ function ac_load_data(gobj, event, kw, src) {
 		}
 		return 0;
 	}
-	let desc = priv.descs[topic_name];
+	priv.descs[topic_name];
 	priv.records[topic_name] = data;
 	priv.descs[topic_name].loaded = true;
-	for (let i = 0; i < data.length; i++) {
-		let record = data[i];
-		create_topic_node(gobj, desc, record);
-	}
-	let do_links = true;
+	let all_loaded = true;
 	for (const [topic_name, desc] of Object.entries(priv.descs)) {
 		if (topic_name.substring(0, 2) === "__") continue;
 		if (!desc.loaded) {
-			do_links = false;
+			all_loaded = false;
 			break;
 		}
 	}
-	if (do_links && priv.graph) {
+	if (all_loaded && priv.graph) {
+		rebuild_fold_model(gobj);
+		fold_expand_to_depth(priv._fold_model, priv._fold_state, (0, _yuneta_gobj_js.gobj_read_integer_attr)(gobj, "expand_depth"));
+		count_placed_records(gobj);
+		let auto_laid = false;
 		try {
-			refresh_minimap(gobj);
+			auto_laid = auto_layout(gobj);
 		} catch (e) {
-			(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: refresh_minimap failed: ${e}`);
-		}
-		graph_draw(gobj).then(() => {
-			create_links(gobj);
-			graph_draw(gobj).then(() => {
-				let auto_laid = false;
-				try {
-					auto_laid = auto_layout(gobj);
-				} catch (e) {
-					(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: auto_layout failed: ${e}`);
-				}
-				graph_layout(gobj).then(() => {
-					if (auto_laid) graph_fit_readable(gobj).catch((e) => {
-						(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot fit the graph: ${e}`);
-					});
-					sync_history_plugin(gobj);
-					if (priv._pending_focus_topic !== null) {
-						let ft = priv._pending_focus_topic;
-						priv._pending_focus_topic = null;
-						graph_focus_topic(gobj, ft);
-					}
-					if (priv._pending_find !== null) {
-						let term = priv._pending_find;
-						priv._pending_find = null;
-						publish_find_result(gobj, term, graph_find_nodes(gobj, term));
-					}
-				});
-			});
+			(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: auto_layout failed: ${e}`);
+		}
+		apply_layout_direction(gobj);
+		reconcile_fold(gobj, {
+			relayout: true,
+			fit: auto_laid
+		}).then(() => {
+			sync_history_plugin(gobj);
+			if (priv._pending_focus_topic !== null) {
+				let ft = priv._pending_focus_topic;
+				priv._pending_focus_topic = null;
+				graph_focus_topic(gobj, ft);
+			}
+			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;
@@ -58048,19 +59079,15 @@ function ac_node_created(gobj, event, kw, src) {
 		build_graph_properties(gobj);
 		return 0;
 	}
-	let desc = priv.descs[topic_name];
-	if (!desc) {
+	if (!priv.descs[topic_name]) {
 		(0, _yuneta_gobj_js.log_error)(`ac_node_created: unknown topic: ${topic_name}`);
 		return 0;
 	}
 	if (!priv.records[topic_name]) priv.records[topic_name] = [];
 	priv.records[topic_name].push(node);
-	history_pause(gobj);
-	create_topic_node(gobj, desc, node);
-	draw_links(gobj, desc, node, false);
-	graph_draw(gobj).then(() => {
-		history_resume(gobj);
-	});
+	rebuild_fold_model(gobj);
+	fold_reveal(priv._fold_model, priv._fold_state, fold_node_key(topic_name, String(node.id)));
+	reconcile_fold(gobj, {});
 	return 0;
 }
 /************************************************************
@@ -58109,8 +59136,14 @@ function ac_node_updated(gobj, event, kw, src) {
 		let [col_idx, fkey_value] = ref.split("	");
 		clear_link(gobj, topic_name, node.id, cols[parseInt(col_idx)], fkey_value, false);
 	}
-	update_topic_node(gobj, desc, node_name, node);
 	update_local_node(gobj, topic_name, node);
+	let on_screen = false;
+	try {
+		on_screen = !!graph.getNodeData(node_name);
+	} catch (e) {
+		on_screen = false;
+	}
+	if (on_screen) update_topic_node(gobj, desc, node_name, node);
 	for (let ref of new_refs) if (!old_refs.has(ref)) {
 		let [col_idx, fkey_value] = ref.split("	");
 		draw_link(gobj, topic_name, node.id, cols[parseInt(col_idx)], fkey_value, false);
@@ -58118,6 +59151,8 @@ function ac_node_updated(gobj, event, kw, src) {
 	graph_draw(gobj).then(() => {
 		history_resume(gobj);
 	});
+	rebuild_fold_model(gobj);
+	reconcile_fold(gobj, {});
 	return 0;
 }
 /************************************************************
@@ -58143,9 +59178,12 @@ function ac_node_deleted(gobj, event, kw, src) {
 	clear_links(gobj, desc, node, false);
 	remove_topic_node(gobj, node_name);
 	remove_local_node(gobj, topic_name, node);
+	if (priv._pill_sig) priv._pill_sig.delete(node_name);
 	graph_draw(gobj).then(() => {
 		history_resume(gobj);
 	});
+	rebuild_fold_model(gobj);
+	reconcile_fold(gobj, {});
 	return 0;
 }
 /************************************************************
@@ -58204,6 +59242,7 @@ function ac_theme$1(gobj, event, kw, src) {
 	});
 	refresh_html_nodes_theme(gobj, theme);
 	refresh_default_edges_theme(gobj, theme);
+	repaint_more_chips(gobj);
 	graph_draw(gobj).then(() => {
 		update_history_buttons(gobj);
 	});
@@ -58318,6 +59357,85 @@ function ac_focus_topic(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  A pill was tapped: open that hook on its first page, or fold
+*  it. The card the pill is on stays where it was on screen --
+*  the layout moves everything else around it.
+************************************************************/
+function ac_toggle_fold(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let group = kw && kw.group || "";
+	if (!priv._fold_model || !group) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: fold of '${group}' with no tree loaded`);
+		return -1;
+	}
+	let g = fold_split_group_key(group);
+	if (!g) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: bad fold group '${group}'`);
+		return -1;
+	}
+	let node_id = g.node_key ? node_id_of_key(gobj, g.node_key) : "";
+	let vp = node_id ? yui_graph_viewport_of(priv.graph, node_id) : null;
+	fold_toggle(priv._fold_model, priv._fold_state, group);
+	reconcile_fold(gobj, {
+		keep: node_id,
+		keep_vp: vp
+	});
+	return 0;
+}
+/************************************************************
+*  A `+N` chip was tapped: the next page of its group. The
+*  parent holds still; the chip itself moves down the column.
+************************************************************/
+function ac_show_more(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let group = kw && kw.group || "";
+	if (!priv._fold_model || !group) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: show more of '${group}' with no tree loaded`);
+		return -1;
+	}
+	let g = fold_split_group_key(group);
+	if (!g) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: bad fold group '${group}'`);
+		return -1;
+	}
+	let node_id = g.node_key ? node_id_of_key(gobj, g.node_key) : "";
+	let vp = node_id ? yui_graph_viewport_of(priv.graph, node_id) : null;
+	fold_show_more(priv._fold_model, priv._fold_state, group);
+	reconcile_fold(gobj, {
+		keep: node_id,
+		keep_vp: vp
+	});
+	return 0;
+}
+/************************************************************
+*  The whole treedb, every hook open on all its children. This
+*  is the reader asking for the pile on purpose; the pages are
+*  the other way in.
+************************************************************/
+function ac_expand_all$1(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (!priv._fold_model) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: expand all with no tree loaded`);
+		return -1;
+	}
+	fold_expand_all(priv._fold_model, priv._fold_state);
+	reconcile_fold(gobj, { fit: true });
+	return 0;
+}
+/************************************************************
+*  The roots alone.
+************************************************************/
+function ac_collapse_all$1(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	if (!priv._fold_model) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: collapse all with no tree loaded`);
+		return -1;
+	}
+	fold_collapse_all(priv._fold_model, priv._fold_state);
+	reconcile_fold(gobj, { fit: true });
+	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.
@@ -58348,7 +59466,9 @@ function ac_fullscreen(gobj, event, kw, src) {
 ************************************************************/
 function ac_set_layout$1(gobj, event, kw, src) {
 	gobj.priv;
-	graph_set_layout(gobj, select_layout(gobj, kw.layout)).then(() => {
+	let layout = select_layout(gobj, kw.layout);
+	apply_layout_direction(gobj);
+	graph_set_layout(gobj, layout).then(() => {
 		configure_behaviour(gobj);
 		update_toolbar(gobj);
 	});
@@ -58455,6 +59575,16 @@ function ac_node_click$2(gobj, event, kw, src) {
 	let priv = gobj.priv;
 	let graph = priv.graph;
 	let node_id = kw.evt.target.id;
+	let more_nd = null;
+	try {
+		more_nd = graph.getNodeData(node_id);
+	} catch (e) {
+		more_nd = null;
+	}
+	if (is_more_node(more_nd)) {
+		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SHOW_MORE", { group: more_nd.data.more }, gobj);
+		return 0;
+	}
 	if (priv.anchor_state === "arming") {
 		priv.anchor_id = node_id;
 		priv.anchor_state = "on";
@@ -58759,6 +59889,26 @@ function create_gclass$4(gclass_name) {
 			ac_find_nodes$1,
 			null
 		],
+		[
+			"EV_TOGGLE_FOLD",
+			ac_toggle_fold,
+			null
+		],
+		[
+			"EV_SHOW_MORE",
+			ac_show_more,
+			null
+		],
+		[
+			"EV_EXPAND_ALL",
+			ac_expand_all$1,
+			null
+		],
+		[
+			"EV_COLLAPSE_ALL",
+			ac_collapse_all$1,
+			null
+		],
 		[
 			"EV_CENTER",
 			ac_center,
@@ -58856,6 +60006,10 @@ function create_gclass$4(gclass_name) {
 		["EV_FIND_NODES", 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_TOGGLE_FOLD", 0],
+		["EV_SHOW_MORE", 0],
+		["EV_EXPAND_ALL", 0],
+		["EV_COLLAPSE_ALL", 0],
 		["EV_CENTER", 0],
 		["EV_FULLSCREEN", 0],
 		["EV_SET_LAYOUT", 0],
@@ -58913,6 +60067,8 @@ var attrs_table$3 = [
 	(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_LIST, "operation_modes", 0, "[\"reading\", \"operation\", \"writing\", \"edition\"]", "Available **permission** or behaviour modes. These operation modes are required to be accomplish by the graph handler (G6 child). TODO permissions must match treedb permissions."),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_treedb_tables", 0, false, "Include treedb tables"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_INTEGER, "expand_depth", 0, 2, "Levels of the treedb open when it loads: 1 = the roots alone, 2 = the roots and their children. Forwarded to the G6 child"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_INTEGER, "fold_page_size", 0, 24, "Children of one hook shown per page in the graph; a `+N` chip opens the next page. Forwarded to the G6 child"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "operation_mode", _yuneta_gobj_js.sdata_flag_t.SDF_PERSIST, "reading", "Current operation mode (internal behaviour or role). Changed by the user trough the gui."),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "layout", _yuneta_gobj_js.sdata_flag_t.SDF_PERSIST, "", "Current graph layout. User preference. Changed by the user through the gui."),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "gobj_remote_yuno", 0, null, "Remote Yuno to request data"),
@@ -58986,7 +60142,9 @@ function mt_create$3(gobj) {
 		layout: priv.layout,
 		with_treedb_tables: priv.with_treedb_tables,
 		hook_port_position: "bottom",
-		fkey_port_position: "top"
+		fkey_port_position: "top",
+		expand_depth: (0, _yuneta_gobj_js.gobj_read_integer_attr)(gobj, "expand_depth"),
+		fold_page_size: (0, _yuneta_gobj_js.gobj_read_integer_attr)(gobj, "fold_page_size")
 	}, gobj);
 	populate_nodes_tree_options(gobj);
 	if (priv.with_treedb_tables) {}
@@ -59244,6 +60402,7 @@ function make_toolbar(gobj) {
 				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_REFRESH_TREEDB", { evt }, gobj);
 			} }
 		],
+		...yui_graph_fold_items(gobj, (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "wide")),
 		[
 			"button",
 			{
@@ -60385,6 +61544,20 @@ function ac_find_nodes(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  The fold pair of the toolbar, forwarded to the G6 child,
+*  which owns the tree.
+************************************************************/
+function ac_expand_all(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_EXPAND_ALL", {}, gobj);
+	return 0;
+}
+function ac_collapse_all(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_COLLAPSE_ALL", {}, gobj);
+	return 0;
+}
+/************************************************************
 *  How many nodes the term matched, from the graph child. Zero with a
 *  term typed is an ANSWER and is shown; an empty box shows nothing.
 ************************************************************/
@@ -60577,6 +61750,16 @@ function create_gclass$3(gclass_name) {
 			ac_find_nodes,
 			null
 		],
+		[
+			"EV_EXPAND_ALL",
+			ac_expand_all,
+			null
+		],
+		[
+			"EV_COLLAPSE_ALL",
+			ac_collapse_all,
+			null
+		],
 		[
 			"EV_LAYOUT_AUTOSET",
 			ac_layout_autoset,
@@ -60639,6 +61822,8 @@ function create_gclass$3(gclass_name) {
 		["EV_SET_OPERATION_MODE", 0],
 		["EV_SET_FOCUS_TOPIC", 0],
 		["EV_FIND_NODES", 0],
+		["EV_EXPAND_ALL", 0],
+		["EV_COLLAPSE_ALL", 0],
 		["EV_FIND_RESULT", 0],
 		["EV_LAYOUT_AUTOSET", 0],
 		["EV_TOGGLE_LEGEND", 0],