pi-openui 0.1.2 → 0.3.0

package/src/blocks/table.ts

@@ -1,5 +1,6 @@
 import { textWidth, truncateText, type Cell, type Rect } from "../diagram/canvas.ts";
 import type { Block } from "./types.ts";
+import { frozenFor, pinBudget } from "./pan.ts";
 import { cell, fromRows, padRow, textCells } from "./util.ts";
 
 export interface TableAnchors {
@@ -10,23 +11,81 @@ export interface TableAnchors {
 
 const NUMERIC = /^[-+]?[\d.,]+\s*(%|ms|s|kb|mb|gb|tb|x)?$/i;
 
-export function tableBlock(columns: string[], rows: Array<Array<string | number>>, width: number): { block: Block; anchors: TableAnchors } {
+/**
+ * `opts.minCol` is the user's minimum column width. With it, a table that does not fit shrinks its widest columns only down to
+ * min(natural, minCol); if even that does not fit, every column takes its natural width and the block is wider than the pane (the
+ * caller scrolls it): a table that scrolls cuts nothing, whatever a cell holds. Without it (a markdown table, which has nowhere to scroll) the old rule stands: columns shrink
+ * to three characters and no further. `edges` are the left borders of the columns, so a scroll step can land on one.
+ *
+ * `opts.pin` lists the columns (indexes) that stay in place while the table scrolls; left out, nothing is pinned and the whole table
+ * scrolls. Only a table that is wider than the pane has pinned columns, and then they are drawn first, in the order they have in the
+ * table (`order` says which column is where). They take at most half the pane (`pinBudget`): they are considered in the order
+ * listed, and one that does not fit is skipped. It is never squeezed: a pinned column that lost text could not be scrolled to.
+ * `frozen` is their width with their borders, 0 when nothing is pinned.
+ */
+export interface TableBlock {
+	block: Block;
+	anchors: TableAnchors;
+	edges: number[];
+	frozen: number;
+	order: number[];
+	/** per body row and drawn column: the cell was cut to fit (it ends in an ellipsis). Only a table that fits by squeezing cuts anything. */
+	cut: boolean[][];
+	/** per drawn column: the header was cut */
+	headCut: boolean[];
+}
+
+export function tableBlock(columns: string[], rows: Array<Array<string | number>>, width: number, opts: { minCol?: number; pin?: number[] } = {}): TableBlock {
 	const n = Math.max(1, columns.length);
 	const str = (v: string | number) => String(v ?? "").replace(/\s+/g, " ").trim();
-	const data = rows.map((r) => columns.map((_, i) => str(r[i] ?? "")));
-	const heads = columns.map(str);
-	const numeric = heads.map((_, i) => data.length > 0 && data.every((r) => r[i] === "" || NUMERIC.test(r[i])));
-	const nat = heads.map((h, i) => Math.max(textWidth(h), ...data.map((r) => textWidth(r[i])), 1));
+	const data0 = rows.map((r) => columns.map((_, i) => str(r[i] ?? "")));
+	const heads0 = columns.map(str);
+	const numeric0 = heads0.map((_, i) => data0.length > 0 && data0.every((r) => r[i] === "" || NUMERIC.test(r[i])));
+	const nat = heads0.map((h, i) => Math.max(textWidth(h), ...data0.map((r) => textWidth(r[i])), 1));
 	const avail = Math.max(n, width - (3 * n + 1));
-	const w = nat.slice();
-	let sum = w.reduce((a, b) => a + b, 0);
-	while (sum > avail) {
-		let k = 0;
-		for (let i = 1; i < n; i++) if (w[i] > w[k]) k = i;
-		if (w[k] <= 3) break;
-		w[k]--;
-		sum--;
+	const sum = (a: number[]) => a.reduce((x, y) => x + y, 0);
+	const minCol = opts.minCol ?? 3;
+	const floors = nat.map((x) => Math.min(x, minCol));
+	let w = nat.slice();
+	let order = heads0.map((_, i) => i);
+	let frozen = 0;
+	if (sum(w) > avail) {
+		if (sum(floors) <= avail || opts.minCol === undefined) {
+			// shrink the widest column, one character at a time, never below its floor
+			let total = sum(w);
+			while (total > avail) {
+				let k = -1;
+				for (let i = 0; i < n; i++) if (w[i] > floors[i] && (k < 0 || w[i] > w[k])) k = i;
+				if (k < 0) break;
+				w[k]--;
+				total--;
+			}
+		} else {
+			// the floors do not fit either: every column at its natural width, the table is wider than the pane and scrolls, and what
+			// the model asked to pin is pinned if there is room for it
+			w = nat.slice();
+			const budget = pinBudget(width);
+			const chosen: number[] = [];
+			let used = 1; // the left border
+			for (const i of opts.pin ?? []) {
+				if (!Number.isInteger(i) || i < 0 || i >= n || chosen.includes(i)) continue;
+				if (used + w[i] + 3 > budget) continue; // not squeezed: text that is cut here could never be scrolled to
+				used += w[i] + 3;
+				chosen.push(i);
+			}
+			if (chosen.length && chosen.length < n) {
+				chosen.sort((a, b) => a - b);
+				order = [...chosen, ...order.filter((i) => !chosen.includes(i))];
+				frozen = used;
+			}
+		}
 	}
+	// from here on the columns are in the order they are drawn
+	const by = <T>(a: T[]): T[] => order.map((i) => a[i]);
+	const heads = by(heads0);
+	const data = data0.map(by);
+	const numeric = by(numeric0);
+	w = by(w);
 	const total = w.reduce((a, b) => a + b, 0) + 3 * n + 1;
 	const line = (l: string, m: string, r: string): Cell[] => {
 		const out: Cell[] = [cell(l, "table.border")];
@@ -66,5 +125,54 @@ export function tableBlock(columns: string[], rows: Array<Array<string | number>
 		rows: data.map((_, ri) => ({ x: 0, y: 3 + ri, w: total, h: 1 })),
 		cells: data.map((_, ri) => w.map((cw, i) => ({ x: colX[i], y: 3 + ri, w: cw, h: 1 }))),
 	};
-	return { block: fromRows(total, out.map((r) => padRow(r, total))), anchors };
+	return {
+		block: fromRows(total, out.map((r) => padRow(r, total))),
+		anchors,
+		edges: colX.map((x) => x - 2),
+		frozen,
+		order,
+		cut: data.map((r) => r.map((v, i) => textWidth(v) > w[i])),
+		headCut: heads.map((h, i) => textWidth(h) > w[i]),
+	};
+}
+
+/**
+ * How `panBlock` should scroll a table. With the first column frozen the window starts F cells after the offset, so an offset that
+ * puts a column border there is the border's position minus F (and the start, 0, stays a place to stop). Without that a step lands
+ * in the middle of a column.
+ */
+export function tablePan(t: { edges: number[]; frozen: number }, width: number): { edges: number[]; frozen: number } {
+	const F = frozenFor(t.frozen, width);
+	return { edges: F ? [0, ...t.edges.map((e) => e - F).filter((e) => e > 0)] : t.edges, frozen: t.frozen };
+}
+
+/**
+ * The columns a Table's `pin` names, as indexes: by header, the way the table draws it (spacing collapsed). Undefined when the
+ * model did not say (the first column is pinned then); a name that matches nothing is left out.
+ */
+export function pinIndexes(pin: unknown, columns: string[]): number[] | undefined {
+	if (!Array.isArray(pin)) return undefined;
+	const norm = (v: unknown) => String(v ?? "").replace(/\s+/g, " ").trim();
+	const heads = columns.map(norm);
+	return pin.map((name) => heads.indexOf(norm(name))).filter((i) => i >= 0);
+}
+
+/**
+ * The cells a table cut to fit, each with what it takes to read it whole: the anchor key a tooltip would use (`cell:3.Notes`,
+ * `col:Notes`), where it is drawn, its full text as it was written, and a short name for the hover line. For a Table and a
+ * Markdown table alike.
+ */
+export function cutCells(t: TableBlock, columns: string[], rows: Array<Array<string | number>>): Array<{ key: string; rect: Rect; full: string; label: string }> {
+	const out: Array<{ key: string; rect: Rect; full: string; label: string }> = [];
+	const head = columns.map((c) => String(c ?? ""));
+	t.headCut.forEach((cut, ci) => {
+		if (cut) out.push({ key: `col:${head[t.order[ci]]}`, rect: t.anchors.cols[ci], full: head[t.order[ci]].trim(), label: `column ${head[t.order[ci]].replace(/\s+/g, " ").trim()}` });
+	});
+	t.cut.forEach((row, ri) =>
+		row.forEach((cut, ci) => {
+			const col = t.order[ci];
+			if (cut) out.push({ key: `cell:${ri + 1}.${head[col]}`, rect: t.anchors.cells[ri][ci], full: String(rows[ri]?.[col] ?? "").trim(), label: `${head[col].replace(/\s+/g, " ").trim()}, row ${ri + 1}` });
+		}),
+	);
+	return out;
 }

package/src/blocks/types.ts

@@ -1,5 +1,6 @@
 import type { Cell, Rect } from "../diagram/canvas.ts";
 import type { El } from "../lang/library.ts";
+import type { Answers, Choice } from "./choice.ts";
 
 export interface Tip {
 	hint?: string;
@@ -9,12 +10,19 @@ export interface Tip {
 	tone?: string;
 	link?: string;
 	linkLabel?: string;
+	/** the whole text of a cell that was cut to fit the pane: the panel shows it as plain text, under whatever else the tip says */
+	full?: string;
 }
 
 export type TargetKind =
 	| "tab"
 	| "button"
+	/** one option of a Choice, or its Other row */
 	| "choice"
+	/** the Send answers button under a widget that has Choices */
+	| "send"
+	/** the Clear button next to it */
+	| "clear"
 	| "faq"
 	| "node"
 	| "copy"
@@ -27,7 +35,11 @@ export type TargetKind =
 	| "noteadd"
 	| "noteclear"
 	/** the footer chip that turns notes mode on and off */
-	| "notes";
+	| "notes"
+	/** a part of the pan bar under a block that is wider than its pane: the left arrow, the right arrow or the track */
+	| "pan"
+	/** the area of a clipped block, body and bar. Never reachable: the widget asks which one is under a wheel or a drag */
+	| "panarea";
 
 /** What a note says about the element it is attached to. All words are already cleaned for a message the user will send. */
 export interface ItemInfo {
@@ -68,6 +80,10 @@ export interface Target {
 	send?: string;
 	openUrl?: string;
 	copy?: string;
+	/** for kind "send": what it sends. The message is built from the answers as they are when it is pressed, never from a picture that may be a frame old. */
+	bar?: { choices: Choice[]; title: string };
+	/** for kind "choice": the question and which row of it this is (an option index, or its Other row) */
+	choice?: { of: Choice; index: number | "other" };
 	/** extra cells (block coordinates) that belong to the target besides its rect, e.g. the wedge of a pie slice */
 	cells?: Array<[number, number]>;
 	/** for kind "item": what a note on it is about */
@@ -77,7 +93,11 @@ export interface Target {
 	/** for kind "image": where the picture goes and how big it is, in cells */
 	image?: { key: string; cols: number; rows: number };
 	/** a diagram that may be wider than its view: focusing this target should reveal it */
-	pan?: { key: string; x: number; w: number; view: number; total: number };
+	/** `min` is where the scrolling part begins when the first columns are frozen: what is left of it is behind them */
+	pan?: { key: string; x: number; w: number; view: number; total: number; min?: number };
+	/** for kind "pan": which part of which bar this is, and what it needs to move the offset */
+	/** `left`/`right` are the fine arrows (`step` cells), `pageleft`/`pageright` the page arrows (three quarters of the pane, to a column edge) */
+	scroll?: { key: string; part: "left" | "right" | "pageleft" | "pageright" | "track"; total: number; view: number; edges?: number[]; step?: number };
 }
 
 export interface Block {
@@ -89,7 +109,12 @@ export interface Block {
 export interface WState {
 	tab: Record<string, number>;
 	faq: Record<string, boolean>;
-	picked: Record<string, string>;
+	/** what the user has staged for each Choice, by question key. Nothing is sent until Send answers. */
+	answers: Answers;
+	/** the answers have been sent: every Choice is locked */
+	sent: boolean;
+	/** sent, but pi has not said yet that it took the message (the lock is held; the bar says Sending) */
+	sending: boolean;
 	pan: Record<string, number>;
 	tip: string | null;
 	focus: string | null;
@@ -102,7 +127,7 @@ export interface WState {
 	noteSeq: number;
 }
 
-export const newState = (): WState => ({ tab: {}, faq: {}, picked: {}, pan: {}, tip: null, focus: null, hover: null, copied: null, notes: [], noteMode: false, noteSeq: 0 });
+export const newState = (): WState => ({ tab: {}, faq: {}, answers: {}, sent: false, sending: false, pan: {}, tip: null, focus: null, hover: null, copied: null, notes: [], noteMode: false, noteSeq: 0 });
 
 /** Supplied by the host when it can draw bitmaps. Without it, an Image is drawn as a labelled frame. */
 export interface ImageService {
@@ -114,6 +139,8 @@ export interface ImageService {
 
 export interface Services {
 	images?: ImageService;
+	/** the user's settings (src/pi/config.ts); the defaults when absent */
+	settings?: { tableMinCol: number; scrollStep: number };
 }
 
 export interface Ctx {

package/src/blocks/util.ts

@@ -133,6 +133,11 @@ export interface BoxOpts {
 
 /** Wrap a block in a rounded box. `inner` is placed with padX columns of padding. Returns the boxed block. */
 export function boxed(inner: Block, opts: BoxOpts): Block {
+	// A title that does not fit its border is not cut: it moves inside as a wrapped heading, above the content.
+	if (opts.title && textWidth(opts.title) > Math.max(1, inner.w + 2 * (opts.padX ?? 1) - 4 - (opts.tag ? textWidth(opts.tag) + 2 : 0))) {
+		const head = wrapText(opts.title, Math.max(1, inner.w), opts.titleRole ?? opts.role).map((r) => padRow(r, inner.w));
+		return boxed({ w: inner.w, rows: [...head, ...inner.rows], targets: shiftTargets(inner.targets, 0, head.length) }, { ...opts, title: undefined });
+	}
 	const padX = opts.padX ?? 1;
 	const w = inner.w + 2 + 2 * padX;
 	const role = opts.role;

package/src/diagram/canvas.ts

@@ -8,14 +8,21 @@ export function graphemes(s: string): string[] {
 	return seg ? Array.from(seg.segment(s), (x) => x.segment) : Array.from(s);
 }
 
-/** Whether `cp` is in the generated table of code points pi draws two cells wide (binary search over [first, last] pairs). */
+// The code points pi draws two cells wide: the generated table, which src/pi/widths.ts corrects against the running pi when the
+// extension loads (the blocks where Unicode adds emoji). Flat [first, last] pairs, ascending.
+let table: readonly number[] = WIDE;
+export function setWide(t: readonly number[]): void {
+	table = t;
+}
+
+/** Whether `cp` is in the table of code points pi draws two cells wide (binary search over [first, last] pairs). */
 function isWide(cp: number): boolean {
 	let lo = 0;
-	let hi = WIDE.length / 2 - 1;
+	let hi = table.length / 2 - 1;
 	while (lo <= hi) {
 		const mid = (lo + hi) >> 1;
-		if (cp < WIDE[mid * 2]) hi = mid - 1;
-		else if (cp > WIDE[mid * 2 + 1]) lo = mid + 1;
+		if (cp < table[mid * 2]) hi = mid - 1;
+		else if (cp > table[mid * 2 + 1]) lo = mid + 1;
 		else return true;
 	}
 	return false;

package/src/diagram/dag.ts

@@ -129,7 +129,8 @@ function attempt(norm: Norm, dir: "LR" | "TB", cap: number): DiagramResult {
 	return layeredDiagram("dag", { nodes, edges, dashReversed: true }, dir);
 }
 
-const CAPS = [28, 20, 14, 10, 8, 6];
+/** How far labels shrink to fit the pane. Below 14 characters a label is no longer a name, so past this the graph scrolls with whole labels. */
+const CAPS = [28, 20, 14];
 
 export function dag(nodesIn: unknown, edgesIn: unknown, opts: DagOptions = {}): DiagramResult {
 	return budgeted(() => dagLayout(nodesIn, edgesIn, opts));
@@ -159,8 +160,8 @@ function dagLayout(nodesIn: unknown, edgesIn: unknown, opts: DagOptions): Diagra
 		if (longest <= cap) break; // shrinking more changes nothing
 	}
 	if (!chosen) {
-		// nothing fits even with short labels: the view will pan anyway, so keep the labels readable
-		const cap = Math.min(maxLabel, 14);
+		// nothing fits even with short labels: the view will scroll, so scroll to whole labels instead of cutting them as well
+		const cap = maxLabel;
 		const tries = dirs.map((d) => attempt(norm, d, cap));
 		best = tries.reduce((a, b) => (b.width < a.width ? b : a));
 	}

package/src/diagram/erd.ts

@@ -146,7 +146,8 @@ function tableSpec(e: NormErd["entities"][number], fieldCap: number, selfRef: bo
 	};
 }
 
-const CAPS = [60, 40, 30, 22, 16];
+/** How far an entity's lines shrink to fit the pane. Below 30 characters the types and flags are dropped, so past this the diagram scrolls. */
+const CAPS = [60, 40, 30];
 
 export function erd(entitiesIn: unknown, relationsIn: unknown, opts: ErdOptions = {}): DiagramResult {
 	return budgeted(() => erdLayout(entitiesIn, relationsIn, opts));
@@ -178,7 +179,8 @@ function erdLayout(entitiesIn: unknown, relationsIn: unknown, opts: ErdOptions):
 		if (chosen) break;
 	}
 	if (!chosen) {
-		const nodes = norm.entities.map((e, i) => tableSpec(e, 30, norm.selfRefs.has(i)));
+		// it will scroll whatever the fields: keep them whole (the widest cap) rather than cut them as well
+		const nodes = norm.entities.map((e, i) => tableSpec(e, CAPS[0], norm.selfRefs.has(i)));
 		const tries = dirs.map((d) => layeredDiagram("erd", { nodes, edges, portSpacing: 4 }, d));
 		best = tries.reduce((a, b) => (b.width < a.width ? b : a));
 	}

package/src/diagram/infra.ts

@@ -402,11 +402,11 @@ function build(norm: NormInfra, dir: "LR" | "TB", caps: Caps): DiagramResult {
 	};
 }
 
+/** How far labels shrink to fit the pane. Past the last row the map scrolls with whole labels, not 8-character ones. */
 const CAPS: Caps[] = [
 	{ label: 22, detail: 26, link: 18 },
 	{ label: 16, detail: 18, link: 12 },
 	{ label: 12, detail: 12, link: 9 },
-	{ label: 8, detail: 8, link: 6 },
 ];
 
 export function infra(zonesIn: unknown, linksIn: unknown, opts: InfraOptions = {}): DiagramResult {
@@ -434,7 +434,8 @@ function infraLayout(zonesIn: unknown, linksIn: unknown, opts: InfraOptions): Di
 		if (chosen) break;
 	}
 	if (!chosen) {
-		const tries = dirs.map((d) => build(norm, d, CAPS[1]));
+		// it will scroll whatever the labels: use the whole ones (the first, widest caps) rather than cut them as well
+		const tries = dirs.map((d) => build(norm, d, CAPS[0]));
 		best = tries.reduce((a, b) => (b.width < a.width ? b : a));
 	}
 	const res = chosen ?? best!;

package/src/diagram/palette.ts

@@ -112,7 +112,7 @@ export function createPalette(t: PaletteTokens): Palette {
 				f = compose(t.accent, t.bold);
 				break;
 			case "choice":
-				f = a === "q" ? t.bold : a === "picked" ? compose(t.accent, t.bold) : undefined;
+				f = a === "q" ? t.bold : a === "picked" ? compose(t.accent, t.bold) : a === "tag" || a === "other" ? t.dim : a === "locked" ? t.dim : a === "sent" ? t.good : undefined;
 				break;
 			case "tab":
 				f = a === "on" ? t.accent : a === "label" ? compose(t.accent, t.bold) : a === "off" ? t.dim : a === "rule" ? t.muted : undefined;

package/src/diagram/wide.ts

@@ -1,4 +1,4 @@
-// Generated by scripts/width-table.ts from pi's own width function: do not edit. Run `npm run width` after pi updates.
+// Generated by scripts/width-table.ts from pi's own width function: do not edit. Run `npm run width` to refresh it (the extension corrects its emoji blocks from the running pi when it loads).
 // The code points pi draws two cells wide, as inclusive [first, last] pairs in ascending order.
 export const WIDE: readonly number[] = [
 	0x1100, 0x115e, 0x231a, 0x231b, 0x2329, 0x232a, 0x23e9, 0x23ec,
@@ -27,10 +27,9 @@ export const WIDE: readonly number[] = [
 	0x1f3e0, 0x1f3f0, 0x1f3f4, 0x1f3f4, 0x1f3f8, 0x1f43e, 0x1f440, 0x1f440,
 	0x1f442, 0x1f4fc, 0x1f4ff, 0x1f53d, 0x1f54b, 0x1f54e, 0x1f550, 0x1f567,
 	0x1f57a, 0x1f57a, 0x1f595, 0x1f596, 0x1f5a4, 0x1f5a4, 0x1f5fb, 0x1f64f,
-	0x1f680, 0x1f6c5, 0x1f6cc, 0x1f6cc, 0x1f6d0, 0x1f6d2, 0x1f6d5, 0x1f6d8,
+	0x1f680, 0x1f6c5, 0x1f6cc, 0x1f6cc, 0x1f6d0, 0x1f6d2, 0x1f6d5, 0x1f6d9,
 	0x1f6dc, 0x1f6df, 0x1f6eb, 0x1f6ec, 0x1f6f4, 0x1f6fc, 0x1f7e0, 0x1f7eb,
 	0x1f7f0, 0x1f7f0, 0x1f90c, 0x1f93a, 0x1f93c, 0x1f945, 0x1f947, 0x1f9ff,
-	0x1fa70, 0x1fa7c, 0x1fa80, 0x1fa8a, 0x1fa8e, 0x1fac6, 0x1fac8, 0x1fac8,
-	0x1facd, 0x1fadc, 0x1fadf, 0x1faea, 0x1faef, 0x1faf8, 0x20000, 0x2fffd,
-	0x30000, 0x3fffd,
+	0x1fa70, 0x1fa7c, 0x1fa80, 0x1fac6, 0x1fac8, 0x1fac8, 0x1facc, 0x1fadd,
+	0x1fadf, 0x1faeb, 0x1faef, 0x1fafa, 0x20000, 0x2fffd, 0x30000, 0x3fffd,
 ];

package/src/diagram/widefix.ts

@@ -0,0 +1,56 @@
+// Keep the committed table of two-cell characters (wide.ts), but let the running pi decide the blocks where Unicode keeps adding
+// emoji. Pure: the probe is any function from a code point to its width in columns, so nothing here needs pi.
+
+/**
+ * Where new two-cell characters appear with each Unicode release: the arrows, symbols and dingbats that got an emoji form
+ * (U+2190-2BFF) and the emoji blocks (U+1F000-1FFFF). Everything else the table covers (CJK, Hangul, fullwidth forms) is stable.
+ * About 6,800 code points: cheap to ask pi about when the extension loads.
+ */
+export const PROBE_SPANS: ReadonlyArray<readonly [number, number]> = [
+	[0x2190, 0x2bff],
+	[0x1f000, 0x1ffff],
+];
+
+/**
+ * A table (flat [first, last] pairs, ascending, merged) that is `base` outside `spans` and what `probe` says inside them.
+ * `probe` is only ever asked about code points inside the spans.
+ */
+export function healWide(base: readonly number[], probe: (cp: number) => number, spans: ReadonlyArray<readonly [number, number]> = PROBE_SPANS): number[] {
+	// the base ranges with the spans cut out of them
+	const keep: Array<[number, number]> = [];
+	for (let i = 0; i < base.length; i += 2) {
+		let pieces: Array<[number, number]> = [[base[i], base[i + 1]]];
+		for (const [s, e] of spans) {
+			const next: Array<[number, number]> = [];
+			for (const [a, b] of pieces) {
+				if (b < s || a > e) next.push([a, b]);
+				else {
+					if (a < s) next.push([a, s - 1]);
+					if (b > e) next.push([e + 1, b]);
+				}
+			}
+			pieces = next;
+		}
+		keep.push(...pieces);
+	}
+	// what the probe says about the spans
+	const asked: Array<[number, number]> = [];
+	for (const [s, e] of spans) {
+		let start = -1;
+		for (let cp = s; cp <= e; cp++) {
+			const wide = probe(cp) === 2;
+			if (wide && start < 0) start = cp;
+			else if (!wide && start >= 0) {
+				asked.push([start, cp - 1]);
+				start = -1;
+			}
+		}
+		if (start >= 0) asked.push([start, e]);
+	}
+	const out: number[] = [];
+	for (const [a, b] of [...keep, ...asked].sort((x, y) => x[0] - y[0])) {
+		if (out.length && a <= out[out.length - 1] + 1) out[out.length - 1] = Math.max(out[out.length - 1], b);
+		else out.push(a, b);
+	}
+	return out;
+}