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

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

@@ -1 +1 @@
-{"version":3,"file":"RowActions.d.ts","sourceRoot":"","sources":["../../src/actions/RowActions.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAMhD,OAAO,EAAE,KAAK,WAAW,EAAiB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,eAAe;IAC5B,sEAAsE;IACtE,SAAS,EAAE,MAAM,CAAC;IAClB,0FAA0F;IAC1F,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,oCAAoC;IACpC,IAAI,EAAE,SAAS,UAAU,EAAE,CAAC;IAC5B,6DAA6D;IAC7D,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,8DAA8D;IAC9D,KAAK,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;CACnC;AAED,4DAA4D;AAC5D,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,eAAe,+BAyD9F"}
+{"version":3,"file":"RowActions.d.ts","sourceRoot":"","sources":["../../src/actions/RowActions.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAOhD,OAAO,EAAE,KAAK,WAAW,EAAiB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,eAAe;IAC5B,sEAAsE;IACtE,SAAS,EAAE,MAAM,CAAC;IAClB,4FAA4F;IAC5F,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,uFAAuF;IACvF,IAAI,EAAE,SAAS,UAAU,EAAE,CAAC;IAC5B,6DAA6D;IAC7D,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,8DAA8D;IAC9D,KAAK,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,GAAG,SAAS,CAAC;IAC1C,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CACvC;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC3B,OAAO,EAAE,SAAS,UAAU,EAAE,EAC9B,IAAI,EAAE,SAAS,UAAU,EAAE,GAC5B,UAAU,EAAE,CASd;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACvB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,EACL,KAAK,EACL,OAAc,GACjB,EAAE,eAAe,+BA0FjB"}

package/dist/actions/RowActions.js

@@ -1,105 +1,170 @@
 import { messages } from "../messages.js";
 import Actions_module_default from "./Actions.module.js";
 import { getActionIcon } from "./icons.js";
+import { RowActionsFit } from "./fit.js";
 import { ActionButton } from "./ActionButton.js";
 import { c } from "react/compiler-runtime";
 import { getActionLabel } from "@panneau/intl";
 import { IconButton, Menu, MenuItem, MenuTrigger, usePanneauIntl } from "@panneau/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Ellipsis } from "lucide-react";
+import { use } from "react";
 //#region src/actions/RowActions.tsx
-/** The actions of a row: buttons, then an overflow menu. */
+/**
+* The actions of a row in their order: those placed in `row`, then those placed in `menu`, and
+* those that destroy last. The last ones are the first to go in the menu.
+*/
+function orderRowActions(actions, menu) {
+	const all = [...actions, ...menu].filter((entry, index, list) => list.findIndex((other) => other.action.id === entry.action.id) === index);
+	return [...all.filter(({ action }) => action.destructive !== true), ...all.filter(({ action }) => action.destructive === true)];
+}
+/**
+* The actions of a row (decision 0060): their icons, in their colors, with their labels as names
+* and tooltips, but the main action, which keeps its label while the row has room; and when the
+* icons don't fit, the last ones in an overflow menu, which never holds a single action. How they fit is the same for every row of the list (`RowActionsFit`), and a
+* row keeps the place of the actions of other rows that it doesn't have, so they line up.
+*/
 function RowActions(t0) {
-	const $ = c(23);
-	const { itemLabel, actions, menu, pending, onRun, icons } = t0;
+	const $ = c(30);
+	const { itemLabel, actions, menu, pending, onRun, icons, slots, primary: t1 } = t0;
+	const primary = t1 === void 0 ? null : t1;
 	const intl = usePanneauIntl();
-	let t1;
-	if ($[0] !== actions || $[1] !== icons || $[2] !== intl || $[3] !== itemLabel || $[4] !== onRun || $[5] !== pending) {
-		let t2;
-		if ($[7] !== icons || $[8] !== intl || $[9] !== itemLabel || $[10] !== onRun || $[11] !== pending) {
-			t2 = (t3) => {
-				const { action, href } = t3;
-				return /* @__PURE__ */ jsx(ActionButton, {
-					action,
-					icons,
-					href,
-					isPending: pending === action.id,
-					isDisabled: pending !== null && pending !== action.id,
-					"aria-label": intl.formatMessage(messages.actionOnItem, {
-						action: getActionLabel(action, intl),
-						item: itemLabel
-					}),
-					onPress: () => onRun(action)
-				}, action.id);
+	const level = use(RowActionsFit);
+	let t2;
+	if ($[0] !== actions || $[1] !== icons || $[2] !== intl || $[3] !== itemLabel || $[4] !== level || $[5] !== menu || $[6] !== onRun || $[7] !== pending || $[8] !== primary || $[9] !== slots) {
+		const own = orderRowActions(actions, menu);
+		let t3;
+		if ($[11] !== slots) {
+			t3 = (t4) => {
+				const { action } = t4;
+				return slots?.some((slot) => slot.action.id === action.id) !== true;
 			};
-			$[7] = icons;
-			$[8] = intl;
-			$[9] = itemLabel;
-			$[10] = onRun;
-			$[11] = pending;
-			$[12] = t2;
-		} else t2 = $[12];
-		t1 = actions.map(t2);
+			$[11] = slots;
+			$[12] = t3;
+		} else t3 = $[12];
+		const all = [...slots ?? [], ...own.filter(t3)];
+		const find = (slot_0) => own.find((t4) => {
+			const { action: action_0 } = t4;
+			return action_0.id === slot_0.action.id;
+		});
+		const inMenu = level >= 2 && all.length >= 2 ? Math.min(level, all.length) : 0;
+		const shown = all.slice(0, all.length - inMenu);
+		const overflow = all.slice(all.length - inMenu).flatMap((slot_1) => find(slot_1) ?? []);
+		let t5;
+		if ($[13] !== intl || $[14] !== itemLabel) {
+			t5 = (action_1) => intl.formatMessage(messages.actionOnItem, {
+				action: getActionLabel(action_1, intl),
+				item: itemLabel
+			});
+			$[13] = intl;
+			$[14] = itemLabel;
+			$[15] = t5;
+		} else t5 = $[15];
+		const name = t5;
+		let t6;
+		if ($[16] !== icons || $[17] !== level || $[18] !== name || $[19] !== onRun || $[20] !== pending || $[21] !== primary) {
+			t6 = (entry) => /* @__PURE__ */ jsx(ActionButton, {
+				action: entry.action,
+				icons,
+				href: entry.href,
+				iconOnly: level >= 1 || entry.action.id !== primary,
+				isPending: pending === entry.action.id,
+				isDisabled: pending !== null && pending !== entry.action.id,
+				"aria-label": name(entry.action),
+				onPress: () => onRun(entry.action)
+			}, entry.action.id);
+			$[16] = icons;
+			$[17] = level;
+			$[18] = name;
+			$[19] = onRun;
+			$[20] = pending;
+			$[21] = primary;
+			$[22] = t6;
+		} else t6 = $[22];
+		const button = t6;
+		const placeholder = _temp;
+		let t7;
+		if ($[23] !== intl || $[24] !== itemLabel) {
+			t7 = intl.formatMessage(messages.itemActions, { item: itemLabel });
+			$[23] = intl;
+			$[24] = itemLabel;
+			$[25] = t7;
+		} else t7 = $[25];
+		const t8 = overflow.length >= 2;
+		const t9 = pending !== null && overflow.some((t10) => {
+			const { action: action_2 } = t10;
+			return action_2.id === pending;
+		});
+		let t11;
+		if ($[26] !== t7 || $[27] !== t8 || $[28] !== t9) {
+			t11 = /* @__PURE__ */ jsx(IconButton, {
+				icon: Ellipsis,
+				size: "sm",
+				appearance: "subtle",
+				label: t7,
+				showTooltip: t8,
+				isPending: t9
+			});
+			$[26] = t7;
+			$[27] = t8;
+			$[28] = t9;
+			$[29] = t11;
+		} else t11 = $[29];
+		const menuButton = t11;
+		t2 = /* @__PURE__ */ jsxs("div", {
+			className: Actions_module_default.row,
+			"data-row-actions": all.length,
+			children: [shown.map((slot_2) => {
+				const entry_0 = find(slot_2);
+				return entry_0 !== void 0 ? button(entry_0) : placeholder(slot_2.action.id, button({
+					...slot_2,
+					href: null
+				}));
+			}), overflow.length >= 2 ? /* @__PURE__ */ jsxs(MenuTrigger, { children: [menuButton, /* @__PURE__ */ jsx(Menu, {
+				placement: "bottom end",
+				onAction: (key_0) => {
+					const entry_1 = overflow.find((t12) => {
+						const { action: action_3 } = t12;
+						return action_3.id === key_0;
+					});
+					if (entry_1 !== void 0 && entry_1.href === null) onRun(entry_1.action);
+				},
+				children: overflow.map((t13) => {
+					const { action: action_4, href } = t13;
+					const icon = getActionIcon(action_4, icons);
+					return /* @__PURE__ */ jsx(MenuItem, {
+						id: action_4.id,
+						isDanger: action_4.destructive === true,
+						...icon !== void 0 ? { icon } : {},
+						...href !== null ? { href } : {},
+						children: getActionLabel(action_4, intl)
+					}, action_4.id);
+				})
+			})] }) : overflow.length === 1 && overflow[0] !== void 0 ? button(overflow[0]) : inMenu > 0 ? placeholder("menu", menuButton) : null]
+		});
 		$[0] = actions;
 		$[1] = icons;
 		$[2] = intl;
 		$[3] = itemLabel;
-		$[4] = onRun;
-		$[5] = pending;
-		$[6] = t1;
-	} else t1 = $[6];
-	let t2;
-	if ($[13] !== icons || $[14] !== intl || $[15] !== itemLabel || $[16] !== menu || $[17] !== onRun || $[18] !== pending) {
-		t2 = menu.length > 0 ? /* @__PURE__ */ jsxs(MenuTrigger, { children: [/* @__PURE__ */ jsx(IconButton, {
-			icon: Ellipsis,
-			size: "sm",
-			label: intl.formatMessage(messages.itemActions, { item: itemLabel }),
-			isPending: pending !== null && menu.some((t3) => {
-				const { action: action_0 } = t3;
-				return action_0.id === pending;
-			})
-		}), /* @__PURE__ */ jsx(Menu, {
-			placement: "bottom end",
-			onAction: (key) => {
-				const entry = menu.find((t4) => {
-					const { action: action_1 } = t4;
-					return action_1.id === key;
-				});
-				if (entry !== void 0 && entry.href === null) onRun(entry.action);
-			},
-			children: menu.map((t5) => {
-				const { action: action_2, href: href_0 } = t5;
-				const icon = getActionIcon(action_2, icons);
-				return /* @__PURE__ */ jsx(MenuItem, {
-					id: action_2.id,
-					isDanger: action_2.destructive === true,
-					...icon !== void 0 ? { icon } : {},
-					...href_0 !== null ? { href: href_0 } : {},
-					children: getActionLabel(action_2, intl)
-				}, action_2.id);
-			})
-		})] }) : null;
-		$[13] = icons;
-		$[14] = intl;
-		$[15] = itemLabel;
-		$[16] = menu;
-		$[17] = onRun;
-		$[18] = pending;
-		$[19] = t2;
-	} else t2 = $[19];
-	let t3;
-	if ($[20] !== t1 || $[21] !== t2) {
-		t3 = /* @__PURE__ */ jsxs("div", {
-			className: Actions_module_default.row,
-			children: [t1, t2]
-		});
-		$[20] = t1;
-		$[21] = t2;
-		$[22] = t3;
-	} else t3 = $[22];
-	return t3;
+		$[4] = level;
+		$[5] = menu;
+		$[6] = onRun;
+		$[7] = pending;
+		$[8] = primary;
+		$[9] = slots;
+		$[10] = t2;
+	} else t2 = $[10];
+	return t2;
+}
+function _temp(key, content) {
+	return /* @__PURE__ */ jsx("span", {
+		className: Actions_module_default.placeholder,
+		"aria-hidden": "true",
+		inert: true,
+		children: content
+	}, key);
 }
 //#endregion
-export { RowActions };
+export { RowActions, orderRowActions };
 
 //# sourceMappingURL=RowActions.js.map

package/dist/actions/RowActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowActions.js","names":["Ellipsis","ItemAction","getActionLabel","Action","IconButton","Menu","MenuItem","MenuTrigger","usePanneauIntl","messages","ActionButton","styles","ActionIcons","getActionIcon","RowActionsProps","itemLabel","actions","menu","pending","onRun","action","icons","RowActions","t0","$","_c","intl","t1","t2","t3","href","id","formatMessage","actionOnItem","item","map","length","itemActions","some","action_0","key","entry","find","t4","action_1","undefined","t5","action_2","href_0","icon","destructive","row","_c","styles"],"sources":["../../src/actions/RowActions.tsx"],"sourcesContent":["import { Ellipsis } from 'lucide-react';\n\nimport type { ItemAction } from '@panneau/core';\nimport { getActionLabel } from '@panneau/intl';\nimport type { Action } from '@panneau/protocol';\nimport { IconButton, Menu, MenuItem, MenuTrigger, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport { ActionButton } from './ActionButton';\nimport styles from './Actions.module.css';\nimport { type ActionIcons, getActionIcon } from './icons';\n\nexport interface RowActionsProps {\n    /** The label of the item, for the accessible names of its actions. */\n    itemLabel: string;\n    /** Actions shown as buttons, with their links (`getItemActions()` of `@panneau/core`). */\n    actions: readonly ItemAction[];\n    /** Actions in the overflow menu. */\n    menu: readonly ItemAction[];\n    /** Id of the action that is running on this item, if any. */\n    pending: string | null;\n    onRun: (action: Action) => void;\n    /** Icons of actions by id, over the icon the action names. */\n    icons?: ActionIcons | undefined;\n}\n\n/** The actions of a row: buttons, then an overflow menu. */\nexport function RowActions({ itemLabel, actions, menu, pending, onRun, icons }: RowActionsProps) {\n    const intl = usePanneauIntl();\n    return (\n        <div className={styles.row}>\n            {actions.map(({ action, href }) => (\n                <ActionButton\n                    key={action.id}\n                    action={action}\n                    icons={icons}\n                    href={href}\n                    isPending={pending === action.id}\n                    isDisabled={pending !== null && pending !== action.id}\n                    aria-label={intl.formatMessage(messages.actionOnItem, {\n                        action: getActionLabel(action, intl),\n                        item: itemLabel,\n                    })}\n                    onPress={() => onRun(action)}\n                />\n            ))}\n            {menu.length > 0 ? (\n                <MenuTrigger>\n                    <IconButton\n                        icon={Ellipsis}\n                        size=\"sm\"\n                        label={intl.formatMessage(messages.itemActions, { item: itemLabel })}\n                        isPending={\n                            pending !== null && menu.some(({ action }) => action.id === pending)\n                        }\n                    />\n                    <Menu\n                        placement=\"bottom end\"\n                        onAction={(key) => {\n                            const entry = menu.find(({ action }) => action.id === key);\n                            if (entry !== undefined && entry.href === null) {\n                                onRun(entry.action);\n                            }\n                        }}\n                    >\n                        {menu.map(({ action, href }) => {\n                            const icon = getActionIcon(action, icons);\n                            return (\n                                <MenuItem\n                                    key={action.id}\n                                    id={action.id}\n                                    isDanger={action.destructive === true}\n                                    {...(icon !== undefined ? { icon } : {})}\n                                    {...(href !== null ? { href } : {})}\n                                >\n                                    {getActionLabel(action, intl)}\n                                </MenuItem>\n                            );\n                        })}\n                    </Menu>\n                </MenuTrigger>\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;;AA2BA,SAAOsB,WAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAoB,MAAA,EAAAV,WAAAC,SAAAC,MAAAC,SAAAC,OAAAE,UAAAE;CACvB,MAAAG,OAAalB,eAAe;CAAE,IAAAmB;CAAA,IAAAH,EAAA,OAAAR,WAAAQ,EAAA,OAAAH,SAAAG,EAAA,OAAAE,QAAAF,EAAA,OAAAT,aAAAS,EAAA,OAAAL,SAAAK,EAAA,OAAAN,SAAA;EAAA,IAAAU;EAAA,IAAAJ,EAAA,OAAAH,SAAAG,EAAA,OAAAE,QAAAF,EAAA,OAAAT,aAAAS,EAAA,QAAAL,SAAAK,EAAA,QAAAN,SAAA;GAGTU,MAAAC,OAAA;IAAC,MAAA,EAAAT,QAAAU,SAAAD;IAAgB,OAC1B,oBAAC,cAAD;KAEYT;KACDC;KACDS;KACK,WAAAZ,YAAYE,OAAMW;KACjB,YAAAb,YAAY,QAAQA,YAAYE,OAAMW;KACtC,cAAAL,KAAIM,cAAevB,SAAQwB,cAAe;MAAAb,QAC1ClB,eAAekB,QAAQM,IAAI;MAACQ,MAC9BnB;KACV,CAAC;KACQ,eAAMI,MAAMC,MAAM;IAAC,GAVvBA,OAAMW,EAUiB;GAC9B;GACLP,EAAA,KAAAH;GAAAG,EAAA,KAAAE;GAAAF,EAAA,KAAAT;GAAAS,EAAA,MAAAL;GAAAK,EAAA,MAAAN;GAAAM,EAAA,MAAAI;EAAA,OAAAA,KAAAJ,EAAA;EAdAG,KAAAX,QAAOmB,IAAKP,EAcZ;EAACJ,EAAA,KAAAR;EAAAQ,EAAA,KAAAH;EAAAG,EAAA,KAAAE;EAAAF,EAAA,KAAAT;EAAAS,EAAA,KAAAL;EAAAK,EAAA,KAAAN;EAAAM,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,QAAAH,SAAAG,EAAA,QAAAE,QAAAF,EAAA,QAAAT,aAAAS,EAAA,QAAAP,QAAAO,EAAA,QAAAL,SAAAK,EAAA,QAAAN,SAAA;EACDU,KAAAX,KAAImB,SAAU,IACX,qBAAC,aAAD,EAAA,UAAA,CACI,oBAAC,YAAD;GACUpC,MAAAA;GACD,MAAA;GACE,OAAA0B,KAAIM,cAAevB,SAAQ4B,aAAc,EAAAH,MAAQnB,UAAU,CAAC;GAE/D,WAAAG,YAAY,QAAQD,KAAIqB,MAAMT,OAAA;IAAC,MAAA,EAAAT,QAAAmB,aAAAV;IAAU,OAAKT,SAAMW,OAAQb;GAAO,CAAA;EAAC,CAAA,GAG5E,oBAAC,MAAD;GACc,WAAA;GACA,WAAAsB,QAAA;IACN,MAAAC,QAAcxB,KAAIyB,MAAMC,OAAA;KAAC,MAAA,EAAAvB,QAAAwB,aAAAD;KAAU,OAAKvB,SAAMW,OAAQS;IAAG,CAAA;IACzD,IAAIC,UAAUI,KAAAA,KAAaJ,MAAKX,SAAU,MACtCX,MAAMsB,MAAKrB,MAAO;GACrB;GAGJH,UAAAA,KAAIkB,KAAKW,OAAA;IAAC,MAAA,EAAA1B,QAAA2B,UAAAjB,MAAAkB,WAAAF;IACP,MAAAG,OAAapC,cAAcO,UAAQC,KAAK;IAAE,OAEtC,oBAAC,UAAD;KAEQ,IAAAD,SAAMW;KACA,UAAAX,SAAM8B,gBAAiB;KAAI,GAChCD,SAASJ,KAAAA,IAAT,EAAAI,KAAiC,IAAjC,CAAiC;KAAC,GAClCnB,WAAS,OAAT,EAAAA,MAAkBA,OAAU,IAA5B,CAA4B;KAEhC5B,UAAAA,eAAekB,UAAQM,IAAI;IAPvB,GACAN,SAAMW,EADN;GAQE,CAElB;EAtBA,CAAA,CATG,EAAA,CAAA,IADf;EAmCOP,EAAA,MAAAH;EAAAG,EAAA,MAAAE;EAAAF,EAAA,MAAAT;EAAAS,EAAA,MAAAP;EAAAO,EAAA,MAAAL;EAAAK,EAAA,MAAAN;EAAAM,EAAA,MAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,QAAAG,MAAAH,EAAA,QAAAI,IAAA;EAnDZC,KAAA,qBAAA,OAAA;GAAgB,WAAAlB,uBAAMwC;GAAtB,UAAA,CACKxB,IAeAC,EAoCC;;EAAAJ,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OApDNK;AAoDM"}
+{"version":3,"file":"RowActions.js","names":["Ellipsis","ReactNode","use","ItemAction","getActionLabel","Action","IconButton","Menu","MenuItem","MenuTrigger","usePanneauIntl","messages","ActionButton","styles","RowActionsFit","ActionIcons","getActionIcon","RowActionsProps","itemLabel","actions","menu","pending","onRun","action","icons","slots","primary","orderRowActions","all","filter","entry","index","list","findIndex","other","id","destructive","RowActions","t0","$","_c","t1","undefined","intl","level","t2","own","t3","t4","some","slot","find","slot_0","action_0","inMenu","length","Math","min","shown","slice","overflow","flatMap","slot_1","t5","action_1","formatMessage","actionOnItem","item","name","t6","href","button","placeholder","_temp","t7","itemActions","t8","t9","t10","action_2","t11","menuButton","row","map","slot_2","entry_0","key_0","entry_1","t12","action_3","key","t13","action_4","icon","content","_c","styles"],"sources":["../../src/actions/RowActions.tsx"],"sourcesContent":["import { Ellipsis } from 'lucide-react';\nimport { type ReactNode, use } from 'react';\n\nimport type { ItemAction } from '@panneau/core';\nimport { getActionLabel } from '@panneau/intl';\nimport type { Action } from '@panneau/protocol';\nimport { IconButton, Menu, MenuItem, MenuTrigger, usePanneauIntl } from '@panneau/ui';\n\nimport { messages } from '../messages';\nimport { ActionButton } from './ActionButton';\nimport styles from './Actions.module.css';\nimport { RowActionsFit } from './fit';\nimport { type ActionIcons, getActionIcon } from './icons';\n\nexport interface RowActionsProps {\n    /** The label of the item, for the accessible names of its actions. */\n    itemLabel: string;\n    /** Actions placed in `row`, with their links (`selectItemActions()` of `@panneau/core`). */\n    actions: readonly ItemAction[];\n    /** Actions placed in `menu`: icons too while they fit, the first to go in the menu. */\n    menu: readonly ItemAction[];\n    /** Id of the action that is running on this item, if any. */\n    pending: string | null;\n    onRun: (action: Action) => void;\n    /** Icons of actions by id, over the icon the action names. */\n    icons?: ActionIcons | undefined;\n    /**\n     * The actions of every row of the list, in order (`orderRowActions()`): a row keeps the place\n     * of those it doesn't have, so the actions of the rows line up. Without it, its own.\n     */\n    slots?: readonly ItemAction[] | undefined;\n    /** The id of the main action of rows, which keeps its label (`show` or `edit`). */\n    primary?: string | null | undefined;\n}\n\n/**\n * The actions of a row in their order: those placed in `row`, then those placed in `menu`, and\n * those that destroy last. The last ones are the first to go in the menu.\n */\nexport function orderRowActions(\n    actions: readonly ItemAction[],\n    menu: readonly ItemAction[],\n): ItemAction[] {\n    const all = [...actions, ...menu].filter(\n        (entry, index, list) =>\n            list.findIndex((other) => other.action.id === entry.action.id) === index,\n    );\n    return [\n        ...all.filter(({ action }) => action.destructive !== true),\n        ...all.filter(({ action }) => action.destructive === true),\n    ];\n}\n\n/**\n * The actions of a row (decision 0060): their icons, in their colors, with their labels as names\n * and tooltips, but the main action, which keeps its label while the row has room; and when the\n * icons don't fit, the last ones in an overflow menu, which never holds a single action. How they fit is the same for every row of the list (`RowActionsFit`), and a\n * row keeps the place of the actions of other rows that it doesn't have, so they line up.\n */\nexport function RowActions({\n    itemLabel,\n    actions,\n    menu,\n    pending,\n    onRun,\n    icons,\n    slots,\n    primary = null,\n}: RowActionsProps) {\n    const intl = usePanneauIntl();\n    const level = use(RowActionsFit);\n    const own = orderRowActions(actions, menu);\n    const all = [\n        ...(slots ?? []),\n        ...own.filter(({ action }) => slots?.some((slot) => slot.action.id === action.id) !== true),\n    ];\n    const find = (slot: ItemAction) => own.find(({ action }) => action.id === slot.action.id);\n    const inMenu = level >= 2 && all.length >= 2 ? Math.min(level, all.length) : 0;\n    const shown = all.slice(0, all.length - inMenu);\n    const overflow = all.slice(all.length - inMenu).flatMap((slot) => find(slot) ?? []);\n    const name = (action: Action) =>\n        intl.formatMessage(messages.actionOnItem, {\n            action: getActionLabel(action, intl),\n            item: itemLabel,\n        });\n    const button = (entry: ItemAction) => (\n        <ActionButton\n            key={entry.action.id}\n            action={entry.action}\n            icons={icons}\n            href={entry.href}\n            iconOnly={level >= 1 || entry.action.id !== primary}\n            isPending={pending === entry.action.id}\n            isDisabled={pending !== null && pending !== entry.action.id}\n            aria-label={name(entry.action)}\n            onPress={() => onRun(entry.action)}\n        />\n    );\n    // The place of an action of other rows: the same button, unseen and out of reach\n    const placeholder = (key: string, content: ReactNode) => (\n        <span key={key} className={styles.placeholder} aria-hidden=\"true\" inert>\n            {content}\n        </span>\n    );\n    const menuButton = (\n        <IconButton\n            icon={Ellipsis}\n            size=\"sm\"\n            appearance=\"subtle\"\n            label={intl.formatMessage(messages.itemActions, { item: itemLabel })}\n            showTooltip={overflow.length >= 2}\n            isPending={pending !== null && overflow.some(({ action }) => action.id === pending)}\n        />\n    );\n    return (\n        <div className={styles.row} data-row-actions={all.length}>\n            {shown.map((slot) => {\n                const entry = find(slot);\n                return entry !== undefined\n                    ? button(entry)\n                    : placeholder(slot.action.id, button({ ...slot, href: null }));\n            })}\n            {overflow.length >= 2 ? (\n                <MenuTrigger>\n                    {menuButton}\n                    <Menu\n                        placement=\"bottom end\"\n                        onAction={(key) => {\n                            const entry = overflow.find(({ action }) => action.id === key);\n                            if (entry !== undefined && entry.href === null) {\n                                onRun(entry.action);\n                            }\n                        }}\n                    >\n                        {overflow.map(({ action, href }) => {\n                            const icon = getActionIcon(action, icons);\n                            return (\n                                <MenuItem\n                                    key={action.id}\n                                    id={action.id}\n                                    isDanger={action.destructive === true}\n                                    {...(icon !== undefined ? { icon } : {})}\n                                    {...(href !== null ? { href } : {})}\n                                >\n                                    {getActionLabel(action, intl)}\n                                </MenuItem>\n                            );\n                        })}\n                    </Menu>\n                </MenuTrigger>\n            ) : overflow.length === 1 && overflow[0] !== undefined ? (\n                // A single action is no menu: its button, in the menu's place\n                button(overflow[0])\n            ) : inMenu > 0 ? (\n                placeholder('menu', menuButton)\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/actions/fit.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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.
+ */
+export declare const RowActionsFit: import("react").Context<number>;
+/** What the fit of a list depends on, besides its width: its items and its columns. */
+export declare function fitContent(items: readonly {
+    id: string;
+}[], columns: readonly {
+    id: string;
+}[]): string;
+/**
+ * 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.
+ */
+export declare function useRowActionsFit(content: string): [level: number, measure: (element: HTMLElement | null) => void];
+//# sourceMappingURL=fit.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fit.d.ts","sourceRoot":"","sources":["../../src/actions/fit.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,aAAa,iCAAmB,CAAC;AAE9C,uFAAuF;AACvF,wBAAgB,UAAU,CACtB,KAAK,EAAE,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAAE,EAChC,OAAO,EAAE,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAAE,GACnC,MAAM,CAER;AAgKD;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC5B,OAAO,EAAE,MAAM,GAChB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC,CA8BjE"}

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"}