@declarion/react 0.65.0 → 0.66.0

package/dist-lib/components/layout/TopBar.js

@@ -0,0 +1,305 @@
+import { useAuthStore as e } from "../../stores/auth.js";
+import { Icon as t } from "../primitives/Icons.js";
+import { IconBtn as n } from "../primitives/IconBtn.js";
+import { Pill as r } from "../primitives/Pill.js";
+import { Kbd as i } from "../primitives/Kbd.js";
+import { Avatar as a } from "../primitives/Avatar.js";
+import { Dropdown as ee } from "../primitives/Dropdown.js";
+import { useText as o } from "../../hooks/useText.js";
+import { useResponsiveMode as s } from "../../hooks/useResponsiveMode.js";
+import { MenuItem as c } from "../primitives/MenuItem.js";
+import { usePreferencesStore as l } from "../../stores/preferences.js";
+import { useTabStore as te } from "../../stores/tabs.js";
+import { useAuth as u } from "../../hooks/useAuth.js";
+import { useImpersonation as d } from "../../hooks/useImpersonation.js";
+import { TenantChip as f, envTone as p } from "./TenantChip.js";
+import { Breadcrumbs as m } from "../chrome/Breadcrumbs.js";
+import { pageInsetX as h } from "../../lib/page-inset.js";
+import { useRef as g, useState as _ } from "react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/components/layout/TopBar.tsx
+var x = "⌘K";
+function S({ breadcrumbs: S, onCrumbClick: ne, onOpenNav: re, navButtonRef: ie, showNavButton: C, onOpenTabs: ae, tabsButtonRef: oe, showTabsButton: w, mobileTabCount: T = 0, onCmdK: E, onToggleAI: D, aiOpen: O, onOpenProfile: k, onOpenPrefs: A, showTenantSwitcher: j = !0, showBreadcrumbs: M = !0, showThemeToggle: N = !0 } = {}) {
+	let P = o(), F = e((e) => e.user), I = s(), { activeTenant: L, tenants: R, switchTenant: z, isSwitchingTenant: se, logout: B } = u(), { isImpersonating: V, stop: H } = d(), U = l((e) => e.colorScheme), W = l((e) => e.set), [G, K] = _(!1), q = g(null), J = L?.env, ce = p(J), Y = F?.email ?? "", X = F?.display_name || Y || P("shell.user_menu.user", "User"), Z = C && I.category === "phone", Q = C && I.category !== "desktop", $ = () => {
+		W("colorScheme", U === "dark" ? "light" : "dark");
+	}, le = (e) => {
+		L?.id !== e.id && (!te.getState().tabs.some((e) => e.dirty) || window.confirm(P("shell.tenant.switch_confirm", "You have unsaved changes in one or more tabs. Switching tenant will discard them. Continue?"))) && z(e.id);
+	};
+	return /* @__PURE__ */ b("header", {
+		style: {
+			gridArea: "topbar",
+			background: "var(--surface)",
+			borderBottom: "1px solid var(--border)",
+			display: "flex",
+			alignItems: "center",
+			...h(12),
+			gap: Q ? 8 : 10,
+			zIndex: 5,
+			position: "relative",
+			minWidth: 0,
+			overflow: "hidden"
+		},
+		children: [
+			J === "production" && /* @__PURE__ */ y("span", { style: {
+				position: "absolute",
+				left: 0,
+				right: 0,
+				top: 0,
+				height: 2,
+				background: `linear-gradient(90deg, transparent, ${ce.fg}, transparent)`,
+				opacity: .35,
+				pointerEvents: "none"
+			} }),
+			C && /* @__PURE__ */ y(n, {
+				ref: ie,
+				icon: /* @__PURE__ */ y(t.menu, { size: 16 }),
+				title: P("shell.nav.open", "Open navigation"),
+				onClick: re
+			}),
+			j && /* @__PURE__ */ y("div", {
+				style: {
+					minWidth: 0,
+					maxWidth: Z ? "min(210px, 56vw)" : Q ? 230 : void 0,
+					flex: Z ? "1 1 auto" : "0 0 auto"
+				},
+				children: /* @__PURE__ */ y(f, {
+					tenant: L,
+					tenants: R,
+					onSwitch: le,
+					busy: se,
+					compact: Q,
+					locked: V,
+					lockedReason: V ? P("shell.impersonation.tenant_locked", "Exit impersonation to switch tenants") : void 0
+				})
+			}),
+			V && /* @__PURE__ */ b("span", {
+				"data-testid": "impersonation-chip",
+				style: {
+					display: "inline-flex",
+					alignItems: "center",
+					gap: 4,
+					height: 22,
+					padding: "0 8px",
+					borderRadius: 999,
+					background: "var(--impersonation-accent-soft)",
+					color: "var(--impersonation-accent-fg)",
+					fontSize: 11,
+					fontWeight: 600,
+					textTransform: "uppercase",
+					letterSpacing: "0.05em"
+				},
+				children: [
+					/* @__PURE__ */ y(t.users, { size: 11 }),
+					" ",
+					P("shell.impersonation.chip", "Impersonating")
+				]
+			}),
+			!Z && M && /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y("span", {
+				style: {
+					color: "var(--text-4)",
+					fontSize: 11
+				},
+				children: /* @__PURE__ */ y(t.right, { size: 10 })
+			}), /* @__PURE__ */ y(m, {
+				items: S ?? [],
+				onCrumbClick: ne
+			})] }),
+			/* @__PURE__ */ y("div", { style: { flex: 1 } }),
+			w && /* @__PURE__ */ y(n, {
+				ref: oe,
+				icon: /* @__PURE__ */ y(t.layers, { size: 15 }),
+				title: P("shell.tabs.open_tabs_count", "Open tabs ({count})", { count: T }),
+				onClick: ae
+			}),
+			Z ? /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(n, {
+				icon: /* @__PURE__ */ y(t.search, { size: 15 }),
+				title: P("shell.palette.search", "Search or run command"),
+				onClick: E
+			}), D && /* @__PURE__ */ y(n, {
+				icon: /* @__PURE__ */ y(t.sparkle, { size: 15 }),
+				title: P("shell.ai_assistant", "AI Assistant"),
+				onClick: D,
+				active: O
+			})] }) : /* @__PURE__ */ b(v, { children: [
+				/* @__PURE__ */ b("button", {
+					onClick: E,
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 8,
+						padding: "0 8px 0 10px",
+						height: 28,
+						background: "var(--surface-2)",
+						border: "1px solid var(--border)",
+						borderRadius: "var(--radius-md)",
+						cursor: "pointer",
+						color: "var(--text-3)",
+						fontSize: 12,
+						minWidth: 240
+					},
+					children: [
+						/* @__PURE__ */ y(t.search, { size: 13 }),
+						/* @__PURE__ */ y("span", {
+							style: {
+								flex: 1,
+								textAlign: "left"
+							},
+							children: P("shell.topbar.search_hint", "Search or run command…")
+						}),
+						/* @__PURE__ */ y(i, { children: x })
+					]
+				}),
+				/* @__PURE__ */ y(n, {
+					icon: /* @__PURE__ */ y(t.bell, { size: 15 }),
+					title: P("shell.topbar.notifications", "Notifications")
+				}),
+				N && /* @__PURE__ */ y(n, {
+					icon: y(U === "dark" ? t.sun : t.moon, { size: 15 }),
+					title: P("shell.topbar.theme", "Theme"),
+					onClick: $
+				}),
+				/* @__PURE__ */ y(n, {
+					icon: /* @__PURE__ */ y(t.sparkle, { size: 15 }),
+					title: P("shell.ai_assistant", "AI Assistant"),
+					onClick: D,
+					active: O
+				}),
+				/* @__PURE__ */ y("div", { style: {
+					width: 1,
+					height: 18,
+					background: "var(--divider)",
+					margin: "0 2px"
+				} })
+			] }),
+			/* @__PURE__ */ b("div", {
+				style: { position: "relative" },
+				children: [/* @__PURE__ */ b("button", {
+					ref: q,
+					onClick: () => K((e) => !e),
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 6,
+						padding: Q ? 0 : "0 4px 0 2px",
+						height: 28,
+						background: "transparent",
+						border: 0,
+						cursor: "pointer"
+					},
+					children: [/* @__PURE__ */ y(a, {
+						name: X,
+						size: 22
+					}), !Q && /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y("span", {
+						style: {
+							fontSize: 12,
+							color: "var(--text-2)"
+						},
+						children: Y
+					}), /* @__PURE__ */ y(t.down, {
+						size: 11,
+						style: { color: "var(--text-3)" }
+					})] })]
+				}), /* @__PURE__ */ b(ee, {
+					open: G,
+					anchor: q.current,
+					onClose: () => K(!1),
+					width: 220,
+					align: "end",
+					children: [
+						/* @__PURE__ */ b("div", {
+							style: {
+								padding: "10px 10px 8px",
+								borderBottom: "1px solid var(--divider)"
+							},
+							children: [/* @__PURE__ */ b("div", {
+								style: {
+									display: "flex",
+									gap: 8,
+									alignItems: "center"
+								},
+								children: [/* @__PURE__ */ y(a, {
+									name: X,
+									size: 28
+								}), /* @__PURE__ */ b("div", {
+									style: { minWidth: 0 },
+									children: [/* @__PURE__ */ y("div", {
+										style: {
+											fontSize: 12.5,
+											fontWeight: 600,
+											color: "var(--text)"
+										},
+										children: X
+									}), /* @__PURE__ */ y("div", {
+										style: {
+											fontSize: 11,
+											color: "var(--text-3)",
+											overflow: "hidden",
+											textOverflow: "ellipsis",
+											whiteSpace: "nowrap"
+										},
+										children: Y
+									})]
+								})]
+							}), L && /* @__PURE__ */ b("div", {
+								style: {
+									marginTop: 8,
+									display: "flex",
+									gap: 4,
+									flexWrap: "wrap"
+								},
+								children: [/* @__PURE__ */ y(r, {
+									tone: "violet",
+									size: "xs",
+									dot: !0,
+									children: L.role
+								}), /* @__PURE__ */ b(r, {
+									tone: "slate",
+									size: "xs",
+									children: [L.name, J ? ` · ${J}` : ""]
+								})]
+							})]
+						}),
+						V && /* @__PURE__ */ y(c, {
+							icon: /* @__PURE__ */ y(t.x, { size: 13 }),
+							onClick: () => {
+								K(!1), H();
+							},
+							"data-testid": "exit-impersonation-menu-item",
+							children: P("shell.impersonation.exit", "Exit impersonation")
+						}),
+						/* @__PURE__ */ y(c, {
+							icon: /* @__PURE__ */ y(t.users, { size: 13 }),
+							onClick: () => {
+								K(!1), k?.();
+							},
+							children: P("shell.user_menu.profile", "My profile")
+						}),
+						/* @__PURE__ */ y(c, {
+							icon: /* @__PURE__ */ y(t.settings, { size: 13 }),
+							onClick: () => {
+								K(!1), A?.();
+							},
+							children: P("shell.user_menu.preferences", "Preferences")
+						}),
+						N && /* @__PURE__ */ y(c, {
+							icon: /* @__PURE__ */ y(t.moon, { size: 13 }),
+							onClick: $,
+							children: P("shell.user_menu.toggle_theme", "Toggle theme")
+						}),
+						/* @__PURE__ */ y(c, { divider: !0 }),
+						/* @__PURE__ */ y(c, {
+							icon: /* @__PURE__ */ y(t.x, { size: 13 }),
+							danger: !0,
+							onClick: () => {
+								K(!1), B();
+							},
+							children: P("shell.user_menu.sign_out", "Sign out")
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { S as TopBar };

package/dist-lib/components/layout/tab-close.js

@@ -0,0 +1,24 @@
+import { tabIdsForCloseScope as e } from "../../stores/tabs.js";
+//#region src/components/layout/tab-close.ts
+function t(t, n, r, i) {
+	if (r === "current" && t.length <= 1) return null;
+	let a = e(t, n, r, i);
+	if (a.length === 0) return null;
+	let o = new Set(a), s = t.filter((e) => o.has(e.id) && e.dirty), c = new Set(s.map((e) => e.id));
+	return {
+		ids: a,
+		dirtyTabs: s,
+		cleanIds: a.filter((e) => !c.has(e))
+	};
+}
+function n(e) {
+	return e ? {
+		pathname: e.pathname,
+		search: e.search || void 0
+	} : {
+		pathname: "/",
+		replace: !0
+	};
+}
+//#endregion
+export { t as buildPendingTabClose, n as tabCloseRoute };

package/dist-lib/components/list/ColumnPicker.js

@@ -0,0 +1,112 @@
+import { Icon as e } from "../primitives/Icons.js";
+import { Btn as t } from "../primitives/Btn.js";
+import { IconBtn as n } from "../primitives/IconBtn.js";
+import { Dropdown as r } from "../primitives/Dropdown.js";
+import { useText as i } from "../../hooks/useText.js";
+import { MenuItem as a } from "../primitives/MenuItem.js";
+import { useRef as o, useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/list/ColumnPicker.tsx
+function d({ availableColumns: d, visibleColumns: f, onToggle: p, onMove: m, onReset: h, onShowAll: g, onResetWidths: _, columnLabel: v = (e) => e }) {
+	let y = i(), b = o(null), [x, S] = s(!1), C = d.filter((e) => !f.includes(e)), w = (e) => /* @__PURE__ */ l("div", {
+		style: {
+			padding: "6px 8px 4px",
+			fontSize: 10.5,
+			color: "var(--text-3)",
+			fontWeight: 600,
+			letterSpacing: "0.06em",
+			textTransform: "uppercase"
+		},
+		children: e
+	});
+	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(t, {
+		ref: b,
+		icon: /* @__PURE__ */ l(e.columns, { size: 13 }),
+		onClick: () => S((e) => !e),
+		active: x,
+		children: y("list.columns.button", "Columns")
+	}), /* @__PURE__ */ u(r, {
+		open: x,
+		anchor: b.current,
+		onClose: () => S(!1),
+		align: "end",
+		width: 240,
+		children: [
+			w(y("list.columns.visible", "Visible columns")),
+			f.map((t, r) => /* @__PURE__ */ u("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 2,
+					padding: "0 6px 0 8px"
+				},
+				children: [/* @__PURE__ */ u("button", {
+					type: "button",
+					onClick: () => p(t),
+					"aria-label": y("list.columns.hide", "Hide {column}", { column: v(t) }),
+					style: {
+						flex: 1,
+						display: "flex",
+						alignItems: "center",
+						gap: 6,
+						minWidth: 0,
+						background: "none",
+						border: 0,
+						cursor: "pointer",
+						textAlign: "left",
+						color: "var(--text)",
+						font: "inherit",
+						fontSize: 12.5,
+						padding: "4px 0"
+					},
+					children: [/* @__PURE__ */ l(e.check, { size: 12 }), /* @__PURE__ */ l("span", {
+						style: {
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap"
+						},
+						children: v(t)
+					})]
+				}), m && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(n, {
+					icon: /* @__PURE__ */ l(e.arrowUp, { size: 12 }),
+					title: y("list.columns.move_up", "Move {column} up", { column: v(t) }),
+					size: 22,
+					disabled: r === 0,
+					onClick: () => m(t, "up")
+				}), /* @__PURE__ */ l(n, {
+					icon: /* @__PURE__ */ l(e.arrowDown, { size: 12 }),
+					title: y("list.columns.move_down", "Move {column} down", { column: v(t) }),
+					size: 22,
+					disabled: r === f.length - 1,
+					onClick: () => m(t, "down")
+				})] })]
+			}, t)),
+			C.length > 0 && /* @__PURE__ */ u(c, { children: [w(y("list.columns.hidden", "Hidden columns")), C.map((e) => /* @__PURE__ */ l(a, {
+				icon: /* @__PURE__ */ l("span", { style: {
+					width: 12,
+					display: "inline-block"
+				} }),
+				onClick: () => p(e),
+				children: v(e)
+			}, e))] }),
+			/* @__PURE__ */ l(a, { divider: !0 }),
+			/* @__PURE__ */ l(a, {
+				icon: /* @__PURE__ */ l(e.refresh, { size: 12 }),
+				onClick: h,
+				children: y("list.columns.reset", "Reset columns")
+			}),
+			/* @__PURE__ */ l(a, {
+				icon: /* @__PURE__ */ l(e.eye, { size: 12 }),
+				onClick: g,
+				children: y("list.columns.show_all", "Show all")
+			}),
+			_ && /* @__PURE__ */ l(a, {
+				icon: /* @__PURE__ */ l(e.columns, { size: 12 }),
+				onClick: _,
+				children: y("list.columns.reset_widths", "Reset column widths (this device)")
+			})
+		]
+	})] });
+}
+//#endregion
+export { d as ColumnPicker };

package/dist-lib/components/list/InlineEditCell.js

@@ -0,0 +1,107 @@
+import { Icon as e } from "../primitives/Icons.js";
+import { IconBtn as t } from "../primitives/IconBtn.js";
+import { useText as n } from "../../hooks/useText.js";
+import { BoolToggle as r } from "../primitives/BoolToggle.js";
+import { Select as i, TextInput as a } from "../primitives/Fields.js";
+import { failureTitle as o } from "../../lib/failure.js";
+import { toast as s } from "../../lib/toast.js";
+import { useEffect as c, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/list/InlineEditCell.tsx
+var m = {
+	padding: "4px 6px",
+	margin: "-4px -6px",
+	borderRadius: "var(--radius-sm)",
+	cursor: "text",
+	border: "1px dashed transparent",
+	minHeight: 24,
+	display: "flex",
+	alignItems: "center",
+	gap: 4
+};
+function h({ value: h, onSave: g, type: _ = "text", options: v, trigger: y = "always", label: b, placeholder: x }) {
+	let S = n(), C = n("errors"), [w, T] = u(h), [E, D] = u(h), [O, k] = u(!1), [A, j] = u(h), M = l(null);
+	c(() => {
+		T(h), D(h), j(h);
+	}, [h]);
+	let N = () => {
+		j(E), k(!0);
+	}, P = async (e) => {
+		let t = w;
+		D(e), T(e), k(!1);
+		try {
+			await g(e);
+		} catch (e) {
+			D(t), T(t);
+			let n = o(C, e);
+			s.error(C("list.cell_unsaved", "The value could not be saved."), b ? S("list.cell.field_reason", "{field}: {reason}", {
+				field: b,
+				reason: n
+			}) : n);
+		}
+	}, F = () => {
+		j(E), k(!1);
+	}, I = () => {
+		if (A === void 0) return F();
+		P(A);
+	};
+	return O ? /* @__PURE__ */ p("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: 4
+		},
+		onKeyDown: (e) => {
+			e.key === "Enter" && I(), e.key === "Escape" && F();
+		},
+		children: [_ === "select" ? /* @__PURE__ */ f(i, {
+			value: A,
+			options: v || [],
+			onChange: (e) => {
+				j(e), P(e);
+			}
+		}) : _ === "bool" ? /* @__PURE__ */ f(r, {
+			value: A === "true",
+			onChange: (e) => {
+				let t = String(e);
+				j(t), P(t);
+			}
+		}) : /* @__PURE__ */ f(a, {
+			value: A ?? "",
+			onChange: j,
+			autoFocus: !0,
+			placeholder: x
+		}), _ !== "select" && _ !== "bool" && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(t, {
+			size: 24,
+			icon: /* @__PURE__ */ f(e.check, { size: 13 }),
+			onClick: I,
+			title: S("dialog.save", "Save")
+		}), /* @__PURE__ */ f(t, {
+			size: 24,
+			icon: /* @__PURE__ */ f(e.x, { size: 13 }),
+			onClick: F,
+			title: S("dialog.cancel", "Cancel")
+		})] })]
+	}) : /* @__PURE__ */ f("div", {
+		ref: M,
+		tabIndex: y === "enter" ? 0 : void 0,
+		onClick: y === "always" ? N : void 0,
+		onDoubleClick: y === "dblclick" ? N : void 0,
+		onKeyDown: y === "enter" ? (e) => {
+			e.key === "Enter" && N();
+		} : void 0,
+		onMouseEnter: (e) => {
+			e.currentTarget.style.borderColor = "var(--border)";
+		},
+		onMouseLeave: (e) => {
+			e.currentTarget.style.borderColor = "transparent";
+		},
+		style: m,
+		children: E ?? /* @__PURE__ */ f("span", {
+			style: { color: "var(--text-4)" },
+			children: S("list.cell.click_to_edit", "Click to edit")
+		})
+	});
+}
+//#endregion
+export { h as InlineEditCell };

package/dist-lib/components/list/PeekFieldCell.js

@@ -0,0 +1,143 @@
+import { Icon as e } from "../primitives/Icons.js";
+import { IconBtn as t } from "../primitives/IconBtn.js";
+import { useText as n } from "../../hooks/useText.js";
+import { renderField as r } from "../fields/index.js";
+import { useCallback as i, useEffect as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/list/PeekFieldCell.tsx
+var u = /* @__PURE__ */ new Set([
+	"enum",
+	"bool",
+	"ref"
+]);
+function d(e) {
+	let t = e.display?.widget;
+	return t && u.has(t) ? !0 : u.has(e.type);
+}
+function f({ field: u, fieldName: f, label: p, value: m, record: h, refs: g, readOnly: _, onCommit: v }) {
+	let y = n(), [b, x] = o(!1), [S, C] = o(m), w = d(u);
+	a(() => {
+		b || C(m);
+	}, [m, b]);
+	let T = i(() => {
+		_ || (C(m), x(!0));
+	}, [_, m]), E = i((e) => {
+		v(e === void 0 ? S : e), x(!1);
+	}, [v, S]), D = i(() => {
+		C(m), x(!1);
+	}, [m]), O = i((e) => {
+		if (_ || b) return;
+		let t = e.target;
+		t.closest("a") || t.closest("[data-peek-pencil=\"true\"]") || T();
+	}, [
+		_,
+		b,
+		T
+	]), k = i((e) => {
+		b ? w || (e.key === "Enter" ? (e.preventDefault(), e.stopPropagation(), E()) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), D())) : !_ && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), T());
+	}, [
+		b,
+		w,
+		_,
+		T,
+		E,
+		D
+	]), A = i((e) => {
+		w ? (C(e), E(e)) : C(e);
+	}, [w, E]), j = r({
+		field: u,
+		fieldName: f,
+		value: m,
+		mode: "display",
+		record: h,
+		refs: g,
+		t: y
+	}), M = b ? r({
+		field: u,
+		fieldName: f,
+		value: S,
+		mode: "edit",
+		onChange: A,
+		record: h,
+		refs: g,
+		t: y
+	}) : null;
+	return /* @__PURE__ */ c("div", {
+		className: "peek-field-cell",
+		"data-editing": b ? "true" : "false",
+		onClick: O,
+		onKeyDown: k,
+		onMouseEnter: (e) => {
+			_ || b || (e.currentTarget.style.borderColor = "var(--border)");
+		},
+		onMouseLeave: (e) => {
+			e.currentTarget.style.borderColor = "transparent";
+		},
+		style: {
+			position: "relative",
+			display: "flex",
+			alignItems: "center",
+			gap: 6,
+			padding: "4px 6px",
+			margin: "-4px -6px",
+			borderRadius: "var(--radius-sm)",
+			minHeight: 28,
+			cursor: _ || b ? "default" : "text",
+			border: "1px dashed transparent"
+		},
+		tabIndex: _ || b ? -1 : 0,
+		role: _ || b ? void 0 : "button",
+		"aria-label": _ || b ? void 0 : y("list.peek.edit_field", "Edit {field}", { field: p }),
+		children: b ? /* @__PURE__ */ l("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 4,
+				flex: 1,
+				minWidth: 0
+			},
+			children: [/* @__PURE__ */ c("div", {
+				style: {
+					flex: 1,
+					minWidth: 0
+				},
+				children: M
+			}), !w && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(t, {
+				size: 24,
+				icon: /* @__PURE__ */ c(e.check, { size: 13 }),
+				onClick: () => E(),
+				title: y("dialog.save", "Save")
+			}), /* @__PURE__ */ c(t, {
+				size: 24,
+				icon: /* @__PURE__ */ c(e.x, { size: 13 }),
+				onClick: D,
+				title: y("dialog.cancel", "Cancel")
+			})] })]
+		}) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("div", {
+			style: {
+				flex: 1,
+				minWidth: 0
+			},
+			children: j
+		}), !_ && /* @__PURE__ */ c("span", {
+			"data-peek-pencil": "true",
+			style: {
+				position: "absolute",
+				right: 4,
+				top: "50%",
+				transform: "translateY(-50%)"
+			},
+			className: "peek-pencil",
+			children: /* @__PURE__ */ c(t, {
+				size: 20,
+				icon: /* @__PURE__ */ c(e.edit, { size: 12 }),
+				onClick: (e) => {
+					e.stopPropagation(), T();
+				},
+				title: y("list.record.edit", "Edit")
+			})
+		})] })
+	});
+}
+//#endregion
+export { f as PeekFieldCell };