@panneau/lists 5.0.0-alpha.16 → 5.0.0-alpha.17

package/dist/actions/fit.js

@@ -0,0 +1,197 @@
+import { c } from "react/compiler-runtime";
+import { createContext, useEffect, useLayoutEffect, useState, useSyncExternalStore } from "react";
+//#region src/actions/fit.ts
+/**
+* How the actions of rows fit (decision 0060), the same for every row of a list: `0`, every
+* action as an icon but the main one, with its label; `1`, every action as an icon; `n` from 2,
+* the last `n` actions of each row in its menu.
+*/
+var RowActionsFit = createContext(0);
+/** What the fit of a list depends on, besides its width: its items and its columns. */
+function fitContent(items, columns) {
+	return `${items.map((item) => item.id).join("\0")}\u0001${columns.map((column) => column.id).join("\0")}`;
+}
+/** Past that many actions in the menu, a row has nothing left to free. */
+var MAX_LEVEL = 12;
+/** The most of the width of its row that the actions of an item take before they crowd it. */
+var SHARE = .4;
+/**
+* From that many actions on a row, they also go to the menu to give the content room, as long as
+* `SHOWN` of them stay out of it.
+*/
+var MANY = 5;
+var SHOWN = 4;
+function measure(element) {
+	let crowding = Math.max(0, element.scrollWidth - element.clientWidth);
+	let count = 0;
+	for (const actions of element.querySelectorAll("[data-row-actions]")) {
+		count = Math.max(count, Number(actions.dataset.rowActions));
+		const box = actions.parentElement;
+		if (box !== null) crowding += Math.max(0, box.scrollWidth - box.clientWidth);
+		const first = actions.firstElementChild;
+		if (first instanceof HTMLElement) crowding += Math.max(0, actions.offsetHeight - first.offsetHeight);
+		const row = actions.closest("tr, li") ?? element;
+		crowding += Math.max(0, actions.offsetWidth - row.offsetWidth * SHARE);
+	}
+	let cut = 0;
+	for (const text of element.querySelectorAll("[data-clamp]")) cut += Math.max(0, text.scrollHeight - text.clientHeight);
+	return {
+		height: element.offsetHeight + cut,
+		crowding,
+		count
+	};
+}
+/**
+* Whether rows of `count` actions can give the content room with `level`: only when they have many
+* actions, `SHOWN` of which stay out of the menu.
+*/
+function forContent(level, count) {
+	return count >= MANY && count - level >= SHOWN;
+}
+/** Whether the next level is worth a try, after `current`. */
+function worthTrying(next, current) {
+	if (next === 1) return current.crowding > .5 || forContent(next, current.count);
+	return next <= Math.min(current.count, MAX_LEVEL) && current.count >= 2 && (current.crowding > .5 || forContent(next, current.count));
+}
+/**
+* The best of the levels tried: the actions crowd least, then the rows are shortest (when the
+* level may give the content room), then the fewest changes.
+*/
+function best(measures) {
+	let chosen = 0;
+	for (const [level, current] of measures) {
+		const kept = measures.get(chosen);
+		if (kept === void 0 || level === chosen) continue;
+		if (current.crowding < kept.crowding - .5) chosen = level;
+		else if (current.crowding <= kept.crowding + .5 && forContent(level, current.count) && current.height < kept.height - .5) chosen = level;
+	}
+	return chosen;
+}
+/**
+* The level of a list, outside React: it changes while the list commits, and React draws each
+* change at once (`useSyncExternalStore`), before the browser paints.
+*/
+var FitStore = class {
+	#level = 0;
+	#settled = false;
+	/** The measures of the levels tried. */
+	#measures = /* @__PURE__ */ new Map();
+	#content = null;
+	#listeners = /* @__PURE__ */ new Set();
+	subscribe = (listener) => {
+		this.#listeners.add(listener);
+		return () => this.#listeners.delete(listener);
+	};
+	getLevel = () => this.#level;
+	#set(level) {
+		if (level !== this.#level) {
+			this.#level = level;
+			for (const listener of this.#listeners) listener();
+		}
+	}
+	/** Starts over from the labels: true when the list has to draw them first. */
+	restart() {
+		this.#settled = false;
+		this.#measures = /* @__PURE__ */ new Map();
+		const drawn = this.#level === 0;
+		this.#set(0);
+		return !drawn;
+	}
+	/** Starts over when the content changes. */
+	setContent(content) {
+		if (content === this.#content) return false;
+		this.#content = content;
+		return this.restart();
+	}
+	/** Measures the list drawn at `drawn`, then tries the next level, or settles on the best. */
+	step(element, drawn) {
+		if (this.#settled || drawn !== this.#level) return;
+		const current = measure(element);
+		this.#measures.set(drawn, current);
+		const next = drawn + 1;
+		if (worthTrying(next, current)) this.#set(next);
+		else {
+			this.#settled = true;
+			this.#set(best(this.#measures));
+		}
+	}
+};
+/**
+* Fits the actions of the rows of a list in the room they have (decision 0060). It draws each
+* level in turn, from every action as an icon but the main one, labelled, then the main one as an
+* icon too, then a menu of two actions, three…, while the next one may help, and keeps the best:
+* where the actions crowd least (the list overflows, the actions of a row wrap or take more than
+* 40% of it), then, on rows of five actions or more, where the rows are shortest (their content
+* wraps or is cut less), then the fewest actions in the menu.
+*
+* @returns the level, and a callback ref for the element to measure: the list, which holds the
+* actions.
+*/
+function useRowActionsFit(content) {
+	const $ = c(12);
+	const [element, setElement] = useState(null);
+	const [store] = useState(_temp);
+	const level = useSyncExternalStore(store.subscribe, store.getLevel, store.getLevel);
+	let t0;
+	let t1;
+	if ($[0] !== content || $[1] !== element || $[2] !== level || $[3] !== store) {
+		t0 = () => {
+			if (element !== null && !store.setContent(content)) store.step(element, level);
+		};
+		t1 = [
+			store,
+			element,
+			content,
+			level
+		];
+		$[0] = content;
+		$[1] = element;
+		$[2] = level;
+		$[3] = store;
+		$[4] = t0;
+		$[5] = t1;
+	} else {
+		t0 = $[4];
+		t1 = $[5];
+	}
+	useLayoutEffect(t0, t1);
+	let t2;
+	let t3;
+	if ($[6] !== element || $[7] !== store) {
+		t2 = () => {
+			if (element === null || typeof ResizeObserver === "undefined") return;
+			let width = element.clientWidth;
+			const observer = new ResizeObserver(() => {
+				if (element.clientWidth !== width) {
+					width = element.clientWidth;
+					if (!store.restart()) store.step(element, 0);
+				}
+			});
+			observer.observe(element);
+			return () => observer.disconnect();
+		};
+		t3 = [store, element];
+		$[6] = element;
+		$[7] = store;
+		$[8] = t2;
+		$[9] = t3;
+	} else {
+		t2 = $[8];
+		t3 = $[9];
+	}
+	useEffect(t2, t3);
+	let t4;
+	if ($[10] !== level) {
+		t4 = [level, setElement];
+		$[10] = level;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+}
+function _temp() {
+	return new FitStore();
+}
+//#endregion
+export { RowActionsFit, fitContent, useRowActionsFit };
+
+//# sourceMappingURL=fit.js.map

package/dist/actions/fit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fit.js","names":["createContext","useEffect","useLayoutEffect","useState","useSyncExternalStore","RowActionsFit","fitContent","items","id","columns","map","item","join","column","MAX_LEVEL","SHARE","MANY","SHOWN","Measure","height","crowding","count","measure","element","HTMLElement","Math","max","scrollWidth","clientWidth","actions","querySelectorAll","Number","dataset","rowActions","box","parentElement","first","firstElementChild","offsetHeight","row","closest","offsetWidth","cut","text","scrollHeight","clientHeight","forContent","level","worthTrying","next","current","min","best","measures","ReadonlyMap","chosen","kept","get","undefined","FitStore","settled","Map","content","listeners","Set","subscribe","listener","add","delete","getLevel","set","#set","restart","drawn","setContent","step","useRowActionsFit","$","_c","setElement","store","_temp","t0","t1","t2","t3","ResizeObserver","width","observer","observe","disconnect","t4","_c"],"sources":["../../src/actions/fit.ts"],"sourcesContent":["import { createContext, useEffect, useLayoutEffect, useState, useSyncExternalStore } from 'react';\n\n/**\n * How the actions of rows fit (decision 0060), the same for every row of a list: `0`, every\n * action as an icon but the main one, with its label; `1`, every action as an icon; `n` from 2,\n * the last `n` actions of each row in its menu.\n */\nexport const RowActionsFit = createContext(0);\n\n/** What the fit of a list depends on, besides its width: its items and its columns. */\nexport function fitContent(\n    items: readonly { id: string }[],\n    columns: readonly { id: string }[],\n): string {\n    return `${items.map((item) => item.id).join('\\u0000')}\\u0001${columns.map((column) => column.id).join('\\u0000')}`;\n}\n\n/** Past that many actions in the menu, a row has nothing left to free. */\nconst MAX_LEVEL = 12;\n\n/** The most of the width of its row that the actions of an item take before they crowd it. */\nconst SHARE = 0.4;\n\n/**\n * From that many actions on a row, they also go to the menu to give the content room, as long as\n * `SHOWN` of them stay out of it.\n */\nconst MANY = 5;\nconst SHOWN = 4;\n\ninterface Measure {\n    /**\n     * The room the content lacks: the height of the list, since rows grow when their content\n     * wraps, and what the displays that clamp their text (`data-clamp`) cut off.\n     */\n    height: number;\n    /**\n     * How much the actions don't fit, in pixels: what the list and the boxes of actions overflow,\n     * the lines that actions wrap to, and what they take of their row past `SHARE`.\n     */\n    crowding: number;\n    /** The most actions a row has, in the row and its menu. */\n    count: number;\n}\n\nfunction measure(element: HTMLElement): Measure {\n    let crowding = Math.max(0, element.scrollWidth - element.clientWidth);\n    let count = 0;\n    for (const actions of element.querySelectorAll<HTMLElement>('[data-row-actions]')) {\n        count = Math.max(count, Number(actions.dataset.rowActions));\n        const box = actions.parentElement;\n        if (box !== null) {\n            crowding += Math.max(0, box.scrollWidth - box.clientWidth);\n        }\n        const first = actions.firstElementChild;\n        if (first instanceof HTMLElement) {\n            crowding += Math.max(0, actions.offsetHeight - first.offsetHeight);\n        }\n        const row = actions.closest<HTMLElement>('tr, li') ?? element;\n        crowding += Math.max(0, actions.offsetWidth - row.offsetWidth * SHARE);\n    }\n    let cut = 0;\n    for (const text of element.querySelectorAll<HTMLElement>('[data-clamp]')) {\n        cut += Math.max(0, text.scrollHeight - text.clientHeight);\n    }\n    return { height: element.offsetHeight + cut, crowding, count };\n}\n\n/**\n * Whether rows of `count` actions can give the content room with `level`: only when they have many\n * actions, `SHOWN` of which stay out of the menu.\n */\nfunction forContent(level: number, count: number): boolean {\n    return count >= MANY && count - level >= SHOWN;\n}\n\n/** Whether the next level is worth a try, after `current`. */\nfunction worthTrying(next: number, current: Measure): boolean {\n    if (next === 1) {\n        return current.crowding > 0.5 || forContent(next, current.count);\n    }\n    return (\n        next <= Math.min(current.count, MAX_LEVEL) &&\n        current.count >= 2 &&\n        (current.crowding > 0.5 || forContent(next, current.count))\n    );\n}\n\n/**\n * The best of the levels tried: the actions crowd least, then the rows are shortest (when the\n * level may give the content room), then the fewest changes.\n */\nfunction best(measures: ReadonlyMap<number, Measure>): number {\n    let chosen = 0;\n    for (const [level, current] of measures) {\n        const kept = measures.get(chosen);\n        if (kept === undefined || level === chosen) {\n            continue;\n        }\n        if (current.crowding < kept.crowding - 0.5) {\n            chosen = level;\n        } else if (\n            current.crowding <= kept.crowding + 0.5 &&\n            forContent(level, current.count) &&\n            current.height < kept.height - 0.5\n        ) {\n            chosen = level;\n        }\n    }\n    return chosen;\n}\n\n/**\n * The level of a list, outside React: it changes while the list commits, and React draws each\n * change at once (`useSyncExternalStore`), before the browser paints.\n */\nclass FitStore {\n    #level = 0;\n    #settled = false;\n    /** The measures of the levels tried. */\n    #measures = new Map<number, Measure>();\n    #content: string | null = null;\n    readonly #listeners = new Set<() => void>();\n\n    readonly subscribe = (listener: () => void): (() => void) => {\n        this.#listeners.add(listener);\n        return () => this.#listeners.delete(listener);\n    };\n\n    readonly getLevel = (): number => this.#level;\n\n    #set(level: number): void {\n        if (level !== this.#level) {\n            this.#level = level;\n            for (const listener of this.#listeners) {\n                listener();\n            }\n        }\n    }\n\n    /** Starts over from the labels: true when the list has to draw them first. */\n    restart(): boolean {\n        this.#settled = false;\n        this.#measures = new Map();\n        const drawn = this.#level === 0;\n        this.#set(0);\n        return !drawn;\n    }\n\n    /** Starts over when the content changes. */\n    setContent(content: string): boolean {\n        if (content === this.#content) {\n            return false;\n        }\n        this.#content = content;\n        return this.restart();\n    }\n\n    /** Measures the list drawn at `drawn`, then tries the next level, or settles on the best. */\n    step(element: HTMLElement, drawn: number): void {\n        if (this.#settled || drawn !== this.#level) {\n            return;\n        }\n        const current = measure(element);\n        this.#measures.set(drawn, current);\n        const next = drawn + 1;\n        if (worthTrying(next, current)) {\n            this.#set(next);\n        } else {\n            this.#settled = true;\n            this.#set(best(this.#measures));\n        }\n    }\n}\n\n/**\n * Fits the actions of the rows of a list in the room they have (decision 0060). It draws each\n * level in turn, from every action as an icon but the main one, labelled, then the main one as an\n * icon too, then a menu of two actions, three…, while the next one may help, and keeps the best:\n * where the actions crowd least (the list overflows, the actions of a row wrap or take more than\n * 40% of it), then, on rows of five actions or more, where the rows are shortest (their content\n * wraps or is cut less), then the fewest actions in the menu.\n *\n * @returns the level, and a callback ref for the element to measure: the list, which holds the\n * actions.\n */\nexport function useRowActionsFit(\n    content: string,\n): [level: number, measure: (element: HTMLElement | null) => void] {\n    const [element, setElement] = useState<HTMLElement | null>(null);\n    const [store] = useState(() => new FitStore());\n    const level = useSyncExternalStore(store.subscribe, store.getLevel, store.getLevel);\n\n    useLayoutEffect(() => {\n        if (element !== null && !store.setContent(content)) {\n            store.step(element, level);\n        }\n    }, [store, element, content, level]);\n\n    useEffect(() => {\n        // Without ResizeObserver (jsdom), the list fits once, at its first width.\n        if (element === null || typeof ResizeObserver === 'undefined') {\n            return undefined;\n        }\n        let width = element.clientWidth;\n        const observer = new ResizeObserver(() => {\n            if (element.clientWidth !== width) {\n                width = element.clientWidth;\n                if (!store.restart()) {\n                    store.step(element, 0);\n                }\n            }\n        });\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, [store, element]);\n\n    return [level, setElement];\n}\n"],"mappings":"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"}

package/dist/actions/icons.d.ts

@@ -7,4 +7,9 @@ export type ActionIcons = Readonly<Record<string, IconComponent>>;
  * names (`"send"`, loaded when it first renders), then the icon of a built-in action.
  */
 export declare function getActionIcon(action: Action, icons?: ActionIcons): IconComponent | undefined;
+/**
+ * The tone of an action in rows (decision 0060): `danger` when it destroys, a color for `show`
+ * (`info`), `edit` (`accent`) and `restore` (`success`), and `neutral` for the others.
+ */
+export declare function getActionTone(action: Action): 'neutral' | 'accent' | 'info' | 'success' | 'danger';
 //# sourceMappingURL=icons.d.ts.map

package/dist/actions/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/actions/icons.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,KAAK,aAAa,EAAgB,MAAM,aAAa,CAAC;AAE/D,2FAA2F;AAC3F,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;AAalE;;;GAGG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,SAAS,CAU5F"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/actions/icons.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,KAAK,aAAa,EAAgB,MAAM,aAAa,CAAC;AAE/D,2FAA2F;AAC3F,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;AAalE;;;GAGG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,SAAS,CAU5F;AASD;;;GAGG;AACH,wBAAgB,aAAa,CACzB,MAAM,EAAE,MAAM,GACf,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAOtD"}

package/dist/actions/icons.js

@@ -21,7 +21,21 @@ function getActionIcon(action, icons) {
 	if (action.icon !== void 0 && action.icon !== "") return getNamedIcon(action.icon);
 	return Object.hasOwn(BUILT_IN_ICONS, action.id) ? BUILT_IN_ICONS[action.id] : void 0;
 }
+/** Colors of the built-in actions in rows, as Panneau 4 had them (decision 0060). */
+var BUILT_IN_TONES = {
+	show: "info",
+	edit: "accent",
+	restore: "success"
+};
+/**
+* The tone of an action in rows (decision 0060): `danger` when it destroys, a color for `show`
+* (`info`), `edit` (`accent`) and `restore` (`success`), and `neutral` for the others.
+*/
+function getActionTone(action) {
+	if (action.destructive === true) return "danger";
+	return Object.hasOwn(BUILT_IN_TONES, action.id) ? BUILT_IN_TONES[action.id] ?? "neutral" : "neutral";
+}
 //#endregion
-export { getActionIcon };
+export { getActionIcon, getActionTone };
 
 //# sourceMappingURL=icons.js.map

package/dist/actions/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","names":["Copy","Download","Eye","LucideIcon","Pencil","RotateCcw","Trash2","Upload","Action","IconComponent","getNamedIcon","ActionIcons","Readonly","Record","BUILT_IN_ICONS","show","edit","duplicate","delete","restore","export","import","getActionIcon","action","icons","given","undefined","Object","hasOwn","id","icon"],"sources":["../../src/actions/icons.ts"],"sourcesContent":["import {\n    Copy,\n    Download,\n    Eye,\n    type LucideIcon,\n    Pencil,\n    RotateCcw,\n    Trash2,\n    Upload,\n} from 'lucide-react';\n\nimport type { Action } from '@panneau/protocol';\nimport { type IconComponent, getNamedIcon } from '@panneau/ui';\n\n/** Icons of actions by action id, for actions written in code (`{ archive: Archive }`). */\nexport type ActionIcons = Readonly<Record<string, IconComponent>>;\n\n/** Icons of the built-in actions, when they don't name one. */\nconst BUILT_IN_ICONS: Record<string, LucideIcon> = {\n    show: Eye,\n    edit: Pencil,\n    duplicate: Copy,\n    delete: Trash2,\n    restore: RotateCcw,\n    export: Download,\n    import: Upload,\n};\n\n/**\n * The icon of an action: the one given for its id in `icons`, then the Lucide icon its `icon`\n * names (`\"send\"`, loaded when it first renders), then the icon of a built-in action.\n */\nexport function getActionIcon(action: Action, icons?: ActionIcons): IconComponent | undefined {\n    const given =\n        icons !== undefined && Object.hasOwn(icons, action.id) ? icons[action.id] : undefined;\n    if (given !== undefined) {\n        return given;\n    }\n    if (action.icon !== undefined && action.icon !== '') {\n        return getNamedIcon(action.icon);\n    }\n    return Object.hasOwn(BUILT_IN_ICONS, action.id) ? BUILT_IN_ICONS[action.id] : undefined;\n}\n"],"mappings":";;;;AAkBA,IAAMc,iBAA6C;CAC/CC,MAAMb;CACNc,MAAMZ;CACNa,WAAWjB;CACXkB,QAAQZ;CACRa,SAASd;CACTe,QAAQnB;CACRoB,QAAQd;AACZ;;;;;AAMA,SAAgBe,cAAcC,QAAgBC,OAAgD;CAC1F,MAAMC,QACFD,UAAUE,KAAAA,KAAaC,OAAOC,OAAOJ,OAAOD,OAAOM,EAAE,IAAIL,MAAMD,OAAOM,MAAMH,KAAAA;CAChF,IAAID,UAAUC,KAAAA,GACV,OAAOD;CAEX,IAAIF,OAAOO,SAASJ,KAAAA,KAAaH,OAAOO,SAAS,IAC7C,OAAOpB,aAAaa,OAAOO,IAAI;CAEnC,OAAOH,OAAOC,OAAOd,gBAAgBS,OAAOM,EAAE,IAAIf,eAAeS,OAAOM,MAAMH,KAAAA;AAClF"}
+{"version":3,"file":"icons.js","names":["Copy","Download","Eye","LucideIcon","Pencil","RotateCcw","Trash2","Upload","Action","IconComponent","getNamedIcon","ActionIcons","Readonly","Record","BUILT_IN_ICONS","show","edit","duplicate","delete","restore","export","import","getActionIcon","action","icons","given","undefined","Object","hasOwn","id","icon","BUILT_IN_TONES","getActionTone","destructive"],"sources":["../../src/actions/icons.ts"],"sourcesContent":["import {\n    Copy,\n    Download,\n    Eye,\n    type LucideIcon,\n    Pencil,\n    RotateCcw,\n    Trash2,\n    Upload,\n} from 'lucide-react';\n\nimport type { Action } from '@panneau/protocol';\nimport { type IconComponent, getNamedIcon } from '@panneau/ui';\n\n/** Icons of actions by action id, for actions written in code (`{ archive: Archive }`). */\nexport type ActionIcons = Readonly<Record<string, IconComponent>>;\n\n/** Icons of the built-in actions, when they don't name one. */\nconst BUILT_IN_ICONS: Record<string, LucideIcon> = {\n    show: Eye,\n    edit: Pencil,\n    duplicate: Copy,\n    delete: Trash2,\n    restore: RotateCcw,\n    export: Download,\n    import: Upload,\n};\n\n/**\n * The icon of an action: the one given for its id in `icons`, then the Lucide icon its `icon`\n * names (`\"send\"`, loaded when it first renders), then the icon of a built-in action.\n */\nexport function getActionIcon(action: Action, icons?: ActionIcons): IconComponent | undefined {\n    const given =\n        icons !== undefined && Object.hasOwn(icons, action.id) ? icons[action.id] : undefined;\n    if (given !== undefined) {\n        return given;\n    }\n    if (action.icon !== undefined && action.icon !== '') {\n        return getNamedIcon(action.icon);\n    }\n    return Object.hasOwn(BUILT_IN_ICONS, action.id) ? BUILT_IN_ICONS[action.id] : undefined;\n}\n\n/** Colors of the built-in actions in rows, as Panneau 4 had them (decision 0060). */\nconst BUILT_IN_TONES: Record<string, 'accent' | 'info' | 'success'> = {\n    show: 'info',\n    edit: 'accent',\n    restore: 'success',\n};\n\n/**\n * The tone of an action in rows (decision 0060): `danger` when it destroys, a color for `show`\n * (`info`), `edit` (`accent`) and `restore` (`success`), and `neutral` for the others.\n */\nexport function getActionTone(\n    action: Action,\n): 'neutral' | 'accent' | 'info' | 'success' | 'danger' {\n    if (action.destructive === true) {\n        return 'danger';\n    }\n    return Object.hasOwn(BUILT_IN_TONES, action.id)\n        ? (BUILT_IN_TONES[action.id] ?? 'neutral')\n        : 'neutral';\n}\n"],"mappings":";;;;AAkBA,IAAMc,iBAA6C;CAC/CC,MAAMb;CACNc,MAAMZ;CACNa,WAAWjB;CACXkB,QAAQZ;CACRa,SAASd;CACTe,QAAQnB;CACRoB,QAAQd;AACZ;;;;;AAMA,SAAgBe,cAAcC,QAAgBC,OAAgD;CAC1F,MAAMC,QACFD,UAAUE,KAAAA,KAAaC,OAAOC,OAAOJ,OAAOD,OAAOM,EAAE,IAAIL,MAAMD,OAAOM,MAAMH,KAAAA;CAChF,IAAID,UAAUC,KAAAA,GACV,OAAOD;CAEX,IAAIF,OAAOO,SAASJ,KAAAA,KAAaH,OAAOO,SAAS,IAC7C,OAAOpB,aAAaa,OAAOO,IAAI;CAEnC,OAAOH,OAAOC,OAAOd,gBAAgBS,OAAOM,EAAE,IAAIf,eAAeS,OAAOM,MAAMH,KAAAA;AAClF;;AAGA,IAAMK,iBAAgE;CAClEhB,MAAM;CACNC,MAAM;CACNG,SAAS;AACb;;;;;AAMA,SAAgBa,cACZT,QACoD;CACpD,IAAIA,OAAOU,gBAAgB,MACvB,OAAO;CAEX,OAAON,OAAOC,OAAOG,gBAAgBR,OAAOM,EAAE,IACvCE,eAAeR,OAAOM,OAAO,YAC9B;AACV"}

package/dist/displays/Displays.css

@@ -95,7 +95,7 @@
     gap: var(--panneau-space-1) var(--panneau-space-3);
 }
 
-/* A value after a flag: a country, a phone number. */
+/* A value after a flag: a country, a region, a phone number. */
 .panneau-displays-flagged {
     display: inline-flex;
     align-items: baseline;
@@ -106,3 +106,8 @@
 .panneau-displays-flag {
     flex: 0 0 auto;
 }
+
+/* The flag of a region is an image: centered on the text, where an emoji sits on its baseline. */
+.panneau-displays-region-flag {
+    align-self: center;
+}

package/dist/displays/Displays.module.js

@@ -16,6 +16,7 @@ var tags = "panneau-displays-tags";
 var countries = "panneau-displays-countries";
 var flagged = "panneau-displays-flagged";
 var flag = "panneau-displays-flag";
+var regionFlag = "panneau-displays-region-flag";
 var Displays_module_default = {
 	empty,
 	text,
@@ -34,9 +35,10 @@ var Displays_module_default = {
 	tags,
 	countries,
 	flagged,
-	flag
+	flag,
+	regionFlag
 };
 //#endregion
-export { badges, boolean, code, color, countries, Displays_module_default as default, empty, flag, flagged, link, media, number, paletteColor, swatch, tags, text, thumbnail };
+export { badges, boolean, code, color, countries, Displays_module_default as default, empty, flag, flagged, link, media, number, paletteColor, regionFlag, swatch, tags, text, thumbnail };
 
 //# sourceMappingURL=Displays.module.js.map

package/dist/displays/Displays.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Displays.module.js","names":[],"sources":["../../src/displays/Displays.module.css"],"sourcesContent":[".empty {\n    color: var(--panneau-color-text-muted);\n}\n\n.text {\n    display: -webkit-box;\n    overflow: hidden;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow-wrap: anywhere;\n}\n\n.badges {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1);\n}\n\n.boolean {\n    display: inline-flex;\n    align-items: center;\n}\n\n.true {\n    color: var(--panneau-color-success);\n}\n\n.false {\n    color: var(--panneau-color-text-muted);\n}\n\n.number {\n    font-variant-numeric: var(--panneau-font-numeric);\n}\n\n.link {\n    color: var(--panneau-color-link);\n    overflow-wrap: anywhere;\n}\n\n.color {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    font-family: var(--panneau-font-family-mono);\n    font-size: var(--panneau-font-size-sm);\n}\n\n.paletteColor {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n}\n\n.swatch {\n    flex: none;\n    width: 1rem;\n    height: 1rem;\n    border: var(--panneau-border-width) solid var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-sm);\n}\n\n.media {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n}\n\n.thumbnail {\n    flex: none;\n    width: 2.5rem;\n    height: 2.5rem;\n    object-fit: cover;\n    background-color: var(--panneau-color-surface-sunken);\n    border-radius: var(--panneau-radius-sm);\n}\n\n.code {\n    font-family: var(--panneau-font-family-mono);\n    font-size: var(--panneau-font-size-sm);\n    white-space: nowrap;\n}\n\n.tags {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1);\n}\n\n/* Several countries. */\n.countries {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1) var(--panneau-space-3);\n}\n\n/* A value after a flag: a country, a phone number. */\n.flagged {\n    display: inline-flex;\n    align-items: baseline;\n    gap: var(--panneau-space-2);\n    min-width: 0;\n}\n\n.flag {\n    flex: 0 0 auto;\n}\n"],"mappings":""}
+{"version":3,"file":"Displays.module.js","names":[],"sources":["../../src/displays/Displays.module.css"],"sourcesContent":[".empty {\n    color: var(--panneau-color-text-muted);\n}\n\n.text {\n    display: -webkit-box;\n    overflow: hidden;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow-wrap: anywhere;\n}\n\n.badges {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1);\n}\n\n.boolean {\n    display: inline-flex;\n    align-items: center;\n}\n\n.true {\n    color: var(--panneau-color-success);\n}\n\n.false {\n    color: var(--panneau-color-text-muted);\n}\n\n.number {\n    font-variant-numeric: var(--panneau-font-numeric);\n}\n\n.link {\n    color: var(--panneau-color-link);\n    overflow-wrap: anywhere;\n}\n\n.color {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    font-family: var(--panneau-font-family-mono);\n    font-size: var(--panneau-font-size-sm);\n}\n\n.paletteColor {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n}\n\n.swatch {\n    flex: none;\n    width: 1rem;\n    height: 1rem;\n    border: var(--panneau-border-width) solid var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-sm);\n}\n\n.media {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n}\n\n.thumbnail {\n    flex: none;\n    width: 2.5rem;\n    height: 2.5rem;\n    object-fit: cover;\n    background-color: var(--panneau-color-surface-sunken);\n    border-radius: var(--panneau-radius-sm);\n}\n\n.code {\n    font-family: var(--panneau-font-family-mono);\n    font-size: var(--panneau-font-size-sm);\n    white-space: nowrap;\n}\n\n.tags {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1);\n}\n\n/* Several countries. */\n.countries {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1) var(--panneau-space-3);\n}\n\n/* A value after a flag: a country, a region, a phone number. */\n.flagged {\n    display: inline-flex;\n    align-items: baseline;\n    gap: var(--panneau-space-2);\n    min-width: 0;\n}\n\n.flag {\n    flex: 0 0 auto;\n}\n\n/* The flag of a region is an image: centered on the text, where an emoji sits on its baseline. */\n.regionFlag {\n    align-self: center;\n}\n"],"mappings":""}

package/dist/displays/displays.d.ts

@@ -43,8 +43,9 @@ export declare function TelDisplay({ value, field }: DisplayProps): import("reac
 /** A country, or several (`multiple`): their flags and their names in the user's locale. */
 export declare function CountryDisplay({ value }: DisplayProps): import("react").JSX.Element;
 /**
- * A region: its name in the user's locale, from its country in the item (the field's `from`) or
- * the field's settings. A region that Panneau doesn't know shows as it is.
+ * A region: its flag, when it has one, and its name in the user's locale, from its country in the
+ * item (the field's `from`) or the field's settings. A region that Panneau doesn't know shows as it
+ * is.
  */
 export declare function RegionDisplay({ value, field, item }: DisplayProps): import("react").JSX.Element;
 /**

package/dist/displays/displays.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"displays.d.ts","sourceRoot":"","sources":["../../src/displays/displays.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI3D,kGAAkG;AAClG,wBAAgB,UAAU,gCAMzB;AAWD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAczD;AAED,0BAA0B;AAC1B,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAStD;AAED,6CAA6C;AAC7C,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAQpD;AAED,4CAA4C;AAC5C,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAcrD;AAkBD,2CAA2C;AAC3C,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAOlD;AAED,sEAAsE;AACtE,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAWtD;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAiB9D;AAED,8FAA8F;AAC9F,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAOnD;AAED,4DAA4D;AAC5D,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAQlD;AAED,qDAAqD;AACrD,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAkB3D;AAED,mCAAmC;AACnC,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAUtD;AAED,iCAAiC;AACjC,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BASjD;AAED,mCAAmC;AACnC,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BASnD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAmCxD;AAkBD,4FAA4F;AAC5F,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAiBrD;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,YAAY,+BASjE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAa7D;AAED,mCAAmC;AACnC,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAUlD;AAED,yDAAyD;AACzD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAezD;AAED,gEAAgE;AAChE,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAuBnD;AAED,gDAAgD;AAChD,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAkBtD;AAED,0FAA0F;AAC1F,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAsBrD;AAID;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BA+BlD;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAwB1D;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAenD;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CA6BlE,CAAC"}
+{"version":3,"file":"displays.d.ts","sourceRoot":"","sources":["../../src/displays/displays.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI3D,kGAAkG;AAClG,wBAAgB,UAAU,gCAMzB;AAWD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAkBzD;AAED,0BAA0B;AAC1B,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAetD;AAED,6CAA6C;AAC7C,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAQpD;AAED,4CAA4C;AAC5C,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAcrD;AAkBD,2CAA2C;AAC3C,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAOlD;AAED,sEAAsE;AACtE,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAWtD;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAqB9D;AAED,8FAA8F;AAC9F,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAOnD;AAED,4DAA4D;AAC5D,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAQlD;AAED,qDAAqD;AACrD,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAkB3D;AAED,mCAAmC;AACnC,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAUtD;AAED,iCAAiC;AACjC,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BASjD;AAED,mCAAmC;AACnC,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BASnD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAmCxD;AAwBD,4FAA4F;AAC5F,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAiBrD;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,YAAY,+BAsBjE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAa7D;AAED,mCAAmC;AACnC,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAUlD;AAED,yDAAyD;AACzD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BAezD;AAED,gEAAgE;AAChE,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAuBnD;AAED,gDAAgD;AAChD,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAsBtD;AAED,0FAA0F;AAC1F,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAsBrD;AAID;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAiClD;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,YAAY,+BA0B1D;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,+BAmBnD;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CA6BlE,CAAC"}

package/dist/displays/displays.js

@@ -14,7 +14,7 @@ import { formatDateRange, getDateRangeSettings } from "@panneau/fields/daterange
 import { formatDuration, getDurationUnits } from "@panneau/fields/duration";
 import { getLinkText, isLink } from "@panneau/fields/link";
 import { formatMoney } from "@panneau/fields/money";
-import { getRegionCountry, getRegionName } from "@panneau/fields/region";
+import { RegionFlag, getRegionCountry, getRegionName } from "@panneau/fields/region";
 import { parsePhone, splitExtension } from "@panneau/fields/tel";
 //#region src/displays/displays.tsx
 /** What a cell shows without a value. Hidden from assistive technologies, which skip the cell. */
@@ -81,6 +81,7 @@ function TextDisplay(t0) {
 	if ($[8] !== text) {
 		t2 = /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: text
 		});
 		$[8] = text;
@@ -103,6 +104,7 @@ function RichTextDisplay(t0) {
 	if ($[2] !== text) {
 		t2 = text === "" ? /* @__PURE__ */ jsx(EmptyValue, {}) : /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: text
 		});
 		$[2] = text;
@@ -334,6 +336,7 @@ function DateRangeDisplay(t0) {
 	if ($[6] !== text) {
 		t3 = /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: text
 		});
 		$[6] = text;
@@ -477,48 +480,54 @@ function SelectDisplay(t0) {
 }
 /** The labels of related items. */
 function RelationDisplay(t0) {
-	const $ = c(8);
+	const $ = c(10);
 	const { value } = t0;
 	let t1;
 	let t2;
 	let t3;
+	let t4;
 	if ($[0] !== value) {
-		t3 = Symbol.for("react.early_return_sentinel");
+		t4 = Symbol.for("react.early_return_sentinel");
 		bb0: {
 			const references = toReferences(value);
 			if (references.length === 0) {
-				let t4;
-				if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-					t4 = /* @__PURE__ */ jsx(EmptyValue, {});
-					$[4] = t4;
-				} else t4 = $[4];
-				t3 = t4;
+				let t5;
+				if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+					t5 = /* @__PURE__ */ jsx(EmptyValue, {});
+					$[5] = t5;
+				} else t5 = $[5];
+				t4 = t5;
 				break bb0;
 			}
 			t1 = Displays_module_default.text;
-			t2 = references.map(_temp).join(", ");
+			t2 = "";
+			t3 = references.map(_temp).join(", ");
 		}
 		$[0] = value;
 		$[1] = t1;
 		$[2] = t2;
 		$[3] = t3;
+		$[4] = t4;
 	} else {
 		t1 = $[1];
 		t2 = $[2];
 		t3 = $[3];
+		t4 = $[4];
 	}
-	if (t3 !== Symbol.for("react.early_return_sentinel")) return t3;
-	let t4;
-	if ($[5] !== t1 || $[6] !== t2) {
-		t4 = /* @__PURE__ */ jsx("span", {
+	if (t4 !== Symbol.for("react.early_return_sentinel")) return t4;
+	let t5;
+	if ($[6] !== t1 || $[7] !== t2 || $[8] !== t3) {
+		t5 = /* @__PURE__ */ jsx("span", {
 			className: t1,
-			children: t2
+			"data-clamp": t2,
+			children: t3
 		});
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t4;
-	} else t4 = $[7];
-	return t4;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
 }
 /** A link that opens the URL. */
 function _temp(reference) {
@@ -697,6 +706,7 @@ function Country(t0) {
 		if ($[0] !== code) {
 			t1 = /* @__PURE__ */ jsx("span", {
 				className: Displays_module_default.text,
+				"data-clamp": "",
 				children: code
 			});
 			$[0] = code;
@@ -731,6 +741,7 @@ function Country(t0) {
 	if ($[9] !== t3) {
 		t4 = /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: t3
 		});
 		$[9] = t3;
@@ -798,8 +809,9 @@ function CountryDisplay(t0) {
 	return t4;
 }
 /**
-* A region: its name in the user's locale, from its country in the item (the field's `from`) or
-* the field's settings. A region that Panneau doesn't know shows as it is.
+* A region: its flag, when it has one, and its name in the user's locale, from its country in the
+* item (the field's `from`) or the field's settings. A region that Panneau doesn't know shows as it
+* is.
 */
 function _temp3(code_0) {
 	return /* @__PURE__ */ jsx(Country, { code: code_0 }, code_0);
@@ -808,7 +820,7 @@ function _temp2(code) {
 	return typeof code === "string" && code !== "";
 }
 function RegionDisplay(t0) {
-	const $ = c(10);
+	const $ = c(17);
 	const { value, field, item } = t0;
 	const intl = usePanneauIntl();
 	if (typeof value !== "string" || value === "") {
@@ -819,33 +831,67 @@ function RegionDisplay(t0) {
 		} else t1 = $[0];
 		return t1;
 	}
+	let country;
 	let t1;
-	let t2;
 	if ($[1] !== field || $[2] !== intl.locale || $[3] !== item || $[4] !== value) {
-		const country = field !== null ? getRegionCountry(field, item) : null;
-		t1 = Displays_module_default.text;
-		t2 = getRegionName(country, value, intl.locale) ?? value;
+		country = field !== null ? getRegionCountry(field, item) : null;
+		t1 = getRegionName(country, value, intl.locale);
 		$[1] = field;
 		$[2] = intl.locale;
 		$[3] = item;
 		$[4] = value;
-		$[5] = t1;
-		$[6] = t2;
+		$[5] = country;
+		$[6] = t1;
 	} else {
-		t1 = $[5];
-		t2 = $[6];
+		country = $[5];
+		t1 = $[6];
 	}
+	const name = t1;
+	if (name === null) {
+		let t2;
+		if ($[7] !== value) {
+			t2 = /* @__PURE__ */ jsx("span", {
+				className: Displays_module_default.text,
+				"data-clamp": "",
+				children: value
+			});
+			$[7] = value;
+			$[8] = t2;
+		} else t2 = $[8];
+		return t2;
+	}
+	let t2;
+	if ($[9] !== country || $[10] !== value) {
+		t2 = /* @__PURE__ */ jsx(RegionFlag, {
+			country,
+			code: value,
+			className: Displays_module_default.regionFlag
+		});
+		$[9] = country;
+		$[10] = value;
+		$[11] = t2;
+	} else t2 = $[11];
 	let t3;
-	if ($[7] !== t1 || $[8] !== t2) {
+	if ($[12] !== name) {
 		t3 = /* @__PURE__ */ jsx("span", {
-			className: t1,
-			children: t2
+			className: Displays_module_default.text,
+			"data-clamp": "",
+			children: name
 		});
-		$[7] = t1;
-		$[8] = t2;
-		$[9] = t3;
-	} else t3 = $[9];
-	return t3;
+		$[12] = name;
+		$[13] = t3;
+	} else t3 = $[13];
+	let t4;
+	if ($[14] !== t2 || $[15] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("span", {
+			className: Displays_module_default.flagged,
+			children: [t2, t3]
+		});
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	return t4;
 }
 /**
 * A duration with its units, `1 h 5 min` or `2 d 4 h`: in the unit of its field (seconds by
@@ -1038,6 +1084,7 @@ function EmbedDisplay(t0) {
 	if ($[6] !== t2) {
 		t3 = /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: t2
 		});
 		$[6] = t2;
@@ -1078,6 +1125,7 @@ function LocationDisplay(t0) {
 		if ($[1] !== address) {
 			t1 = /* @__PURE__ */ jsx("span", {
 				className: Displays_module_default.text,
+				"data-clamp": "",
 				children: address
 			});
 			$[1] = address;
@@ -1183,6 +1231,7 @@ function AddressDisplay(t0) {
 	if ($[12] !== t3) {
 		t4 = /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: t3
 		});
 		$[12] = t3;
@@ -1256,6 +1305,7 @@ function LinkDisplay(t0) {
 		if ($[7] !== text) {
 			t4 = /* @__PURE__ */ jsx("span", {
 				className: Displays_module_default.text,
+				"data-clamp": "",
 				children: text
 			});
 			$[7] = text;
@@ -1341,6 +1391,7 @@ function ColorDisplay(t0) {
 				if ($[8] !== t4) {
 					t5 = /* @__PURE__ */ jsx("span", {
 						className: Displays_module_default.text,
+						"data-clamp": "",
 						children: t4
 					});
 					$[8] = t4;
@@ -1417,6 +1468,7 @@ function MediaDisplay(t0) {
 	if ($[3] !== label) {
 		t2 = label !== "" ? /* @__PURE__ */ jsx("span", {
 			className: Displays_module_default.text,
+			"data-clamp": "",
 			children: label
 		}) : null;
 		$[3] = label;