@declarion/react 0.65.1 → 0.66.1

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

@@ -0,0 +1,263 @@
+import { textWithNodes as e } from "../../lib/language.js";
+import { Icon as t } from "../primitives/Icons.js";
+import { Btn as n } from "../primitives/Btn.js";
+import { IconBtn as r } from "../primitives/IconBtn.js";
+import { Kbd as i } from "../primitives/Kbd.js";
+import { Avatar as a } from "../primitives/Avatar.js";
+import { useText as o } from "../../hooks/useText.js";
+import { applyRowState as s, defaultFlatForSlot as c, filterLayoutForSlot as l } from "../../lib/actions.js";
+import { useActionRunner as u } from "../actions/ActionRunner.js";
+import { renderSchemaField as d } from "../file-widgets/host.js";
+import { ResponsiveActionBar as f } from "../actions/ResponsiveActionBar.js";
+import { effectiveScreenForRecord as p, variantActionCodesForRecord as m } from "../../lib/variants.js";
+import { PeekFieldCell as h } from "./PeekFieldCell.js";
+import { useUnsavedInput as g } from "../../hooks/useUnsavedInput.js";
+import { useEffect as _, useMemo as v, useRef as y, useState as b } from "react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+//#region src/components/list/QuickPeek.tsx
+var w = {
+	tab: "Tab",
+	esc: "Esc"
+};
+function T({ entity: T, entityCode: D, record: O, title: k, recordId: A, avatarName: j, fields: M, refs: N, screen: P, actions: F, screenActionLayout: I, entityActionLayout: L, executeAction: R, onClose: z, onOpen: B, onSave: V }) {
+	let H = o(), [U, W] = b({ ...O }), [G, K] = b(!1);
+	g(G);
+	let q = y(null), { run: J } = u(), Y = p(T, P, U);
+	_(() => {
+		W({ ...O }), K(!1);
+	}, [O]), _(() => {
+		q.current?.focus();
+	}, []);
+	let X = v(() => {
+		let e = Y?.action_layout ?? I ?? L ?? c(F, "quick_peek"), t = l(e, F, void 0, "quick_peek");
+		return s(H, t, F, void 0, U, [], m(T, U));
+	}, [
+		H,
+		Y?.action_layout,
+		I,
+		L,
+		F,
+		U,
+		T
+	]), Z = ({ code: e, action: t }) => {
+		J({
+			action: t,
+			title: H(t.display?.name) || e,
+			row: U,
+			execute: (n) => R(e, t, n)
+		});
+	}, Q = (e, t) => {
+		let n = {
+			...U,
+			[e]: t
+		};
+		W(n), K(!0), V?.(n);
+	}, $ = Y?.quick_peek?.width ?? 480;
+	return /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("div", {
+		onClick: z,
+		style: {
+			position: "fixed",
+			inset: 0,
+			background: "var(--scrim-lite)",
+			zIndex: 40
+		}
+	}), /* @__PURE__ */ C("aside", {
+		ref: q,
+		role: "dialog",
+		"aria-label": H("list.peek.dialog", "Quick peek"),
+		tabIndex: -1,
+		onKeyDown: (e) => {
+			e.key === "Escape" && z();
+		},
+		style: {
+			position: "fixed",
+			top: "var(--topbar-h)",
+			right: 0,
+			bottom: "var(--tabbar-h)",
+			width: $,
+			background: "var(--surface)",
+			borderLeft: "1px solid var(--border)",
+			zIndex: 41,
+			display: "flex",
+			flexDirection: "column",
+			boxShadow: "var(--shadow-lg)"
+		},
+		children: [
+			/* @__PURE__ */ C("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					padding: "12px 16px",
+					borderBottom: "1px solid var(--divider)",
+					gap: 10
+				},
+				children: [
+					/* @__PURE__ */ S(a, {
+						name: j || k,
+						size: 28
+					}),
+					/* @__PURE__ */ C("div", {
+						style: {
+							flex: 1,
+							minWidth: 0
+						},
+						children: [/* @__PURE__ */ S("div", {
+							style: {
+								fontSize: 14,
+								fontWeight: 600,
+								color: "var(--text)",
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap"
+							},
+							children: k
+						}), A && /* @__PURE__ */ S("div", {
+							className: "mono",
+							style: {
+								fontSize: 11,
+								color: "var(--text-4)"
+							},
+							children: A
+						})]
+					}),
+					/* @__PURE__ */ S(r, {
+						icon: /* @__PURE__ */ S(t.external, { size: 13 }),
+						title: G ? H("list.peek.open_in_tab_dirty", "Open in tab (keeps unsaved changes)") : H("list.peek.open_in_tab", "Open in tab"),
+						onClick: () => B(G ? U : null)
+					}),
+					/* @__PURE__ */ S(r, {
+						icon: /* @__PURE__ */ S(t.x, { size: 14 }),
+						title: H("list.peek.close", "Close"),
+						onClick: z
+					})
+				]
+			}),
+			/* @__PURE__ */ C("div", {
+				style: {
+					flex: 1,
+					overflowY: "auto",
+					padding: 14,
+					display: "flex",
+					flexDirection: "column",
+					gap: 10
+				},
+				children: [/* @__PURE__ */ C("div", {
+					style: {
+						padding: "8px 10px",
+						background: "var(--accent-soft)",
+						borderRadius: "var(--radius-md)",
+						fontSize: 11.5,
+						color: "var(--accent-text)",
+						display: "flex",
+						alignItems: "center",
+						gap: 6
+					},
+					children: [
+						/* @__PURE__ */ S(t.sparkle, { size: 12 }),
+						" ",
+						H("list.peek.hint", "Inline quick-edit — click any field to change."),
+						e(H("list.peek.keys_hint", "{tab} to move, {esc} to close."), {
+							tab: /* @__PURE__ */ S(i, { children: w.tab }),
+							esc: /* @__PURE__ */ S(i, { children: w.esc })
+						})
+					]
+				}), M.map((e) => /* @__PURE__ */ S(E, {
+					label: e.label,
+					children: e.kind === "file" ? d({
+						entity: T,
+						entityCode: D,
+						fieldName: e.key,
+						record: U,
+						mode: e.readOnly ? "display" : "edit",
+						onChange: (t) => Q(e.key, t),
+						refs: N,
+						disabled: e.readOnly,
+						t: H
+					}) : /* @__PURE__ */ S(h, {
+						field: e.field,
+						fieldName: e.key,
+						label: e.label,
+						value: U[e.key],
+						record: U,
+						refs: N,
+						readOnly: e.readOnly,
+						onCommit: (t) => Q(e.key, t)
+					})
+				}, e.key))]
+			}),
+			/* @__PURE__ */ C("div", {
+				style: {
+					display: "flex",
+					padding: "10px 14px",
+					borderTop: "1px solid var(--divider)",
+					gap: 6,
+					alignItems: "center"
+				},
+				children: [
+					G && /* @__PURE__ */ C("span", {
+						style: {
+							fontSize: 11,
+							color: "var(--warn)",
+							display: "flex",
+							alignItems: "center",
+							gap: 4
+						},
+						children: [/* @__PURE__ */ S("span", { style: {
+							width: 6,
+							height: 6,
+							borderRadius: 999,
+							background: "var(--warn)"
+						} }), H("list.peek.unsaved", "Unsaved")]
+					}),
+					/* @__PURE__ */ S("div", {
+						style: {
+							flex: 1,
+							minWidth: 0,
+							display: "flex",
+							justifyContent: "flex-end"
+						},
+						children: X.length > 0 && /* @__PURE__ */ S(f, {
+							layout: X,
+							row: U,
+							onRun: (e, t) => Z({
+								code: e,
+								action: t
+							}),
+							kind: "toolbar",
+							entityActions: F,
+							align: "trailing",
+							ariaLabel: H("list.peek.actions", "Quick peek actions")
+						})
+					}),
+					/* @__PURE__ */ S(n, {
+						kind: "primary",
+						icon: /* @__PURE__ */ S(t.edit, { size: 13 }),
+						onClick: () => B(G ? U : null),
+						children: H("list.peek.open_full", "Open full")
+					})
+				]
+			})
+		]
+	})] });
+}
+function E({ label: e, children: t }) {
+	return /* @__PURE__ */ C("div", {
+		style: {
+			display: "grid",
+			gridTemplateColumns: "120px 1fr",
+			alignItems: "center",
+			padding: "4px 0",
+			borderBottom: "1px solid var(--divider)"
+		},
+		children: [/* @__PURE__ */ S("div", {
+			style: {
+				fontSize: 11.5,
+				color: "var(--text-3)",
+				fontWeight: 500
+			},
+			children: e
+		}), /* @__PURE__ */ S("div", { children: t })]
+	});
+}
+//#endregion
+export { E as QEField, T as QuickPeek };

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

@@ -0,0 +1,156 @@
+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/ViewSwitcher.tsx
+var d = e["undo-2"], f = {
+	display: "flex",
+	alignItems: "center",
+	gap: 6,
+	height: 28,
+	padding: "0 10px",
+	background: "var(--surface)",
+	border: "1px solid var(--border)",
+	borderRadius: "var(--radius-md)",
+	cursor: "pointer",
+	fontSize: 12,
+	color: "var(--text-2)",
+	fontFamily: "inherit"
+};
+function p({ views: p, activeViewId: m, isDirty: h, onSelect: g, onSave: _, onSaveAs: v, onDiscard: y, onDelete: b, deletePending: x = !1 }) {
+	let S = i(), C = o(null), [w, T] = s(!1), E = p.find((e) => e.id === m), D = p.filter((e) => e.source === "system"), O = p.filter((e) => e.source === "personal"), k = p.filter((e) => e.source === "shared"), A = E ? S(E.name) : S("list.view.all_records", "All records"), j = (e) => /* @__PURE__ */ l("div", {
+		style: {
+			padding: "6px 8px 4px",
+			fontSize: 10,
+			color: "var(--text-3)",
+			fontWeight: 700,
+			letterSpacing: "0.08em",
+			textTransform: "uppercase"
+		},
+		children: e
+	});
+	return /* @__PURE__ */ u("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: 6
+		},
+		children: [
+			/* @__PURE__ */ u("button", {
+				ref: C,
+				type: "button",
+				onClick: () => T((e) => !e),
+				style: f,
+				children: [
+					/* @__PURE__ */ l(e.star, { size: 12 }),
+					/* @__PURE__ */ l("span", { children: A }),
+					h && /* @__PURE__ */ l("span", { style: {
+						display: "inline-block",
+						width: 6,
+						height: 6,
+						borderRadius: 999,
+						background: "var(--warn)",
+						marginLeft: 2
+					} }),
+					/* @__PURE__ */ l(e.down, { size: 11 })
+				]
+			}),
+			/* @__PURE__ */ u(r, {
+				open: w,
+				anchor: C.current,
+				onClose: () => T(!1),
+				width: 280,
+				children: [
+					/* @__PURE__ */ l(a, {
+						icon: m ? void 0 : /* @__PURE__ */ l(e.check, { size: 12 }),
+						active: !m,
+						onClick: () => {
+							g({
+								id: "",
+								name: { [S.language]: S("list.view.all_records", "All records") },
+								source: "system"
+							}), T(!1);
+						},
+						children: S("list.view.all_records", "All records")
+					}),
+					D.length > 0 && j(S("list.view.presets", "Presets")),
+					D.map((t) => /* @__PURE__ */ l(a, {
+						icon: m === t.id ? /* @__PURE__ */ l(e.check, { size: 12 }) : void 0,
+						active: m === t.id,
+						onClick: () => {
+							g(t), T(!1);
+						},
+						children: S(t.name)
+					}, t.id)),
+					O.length > 0 && j(S("list.view.mine", "My Views")),
+					O.map((t) => /* @__PURE__ */ u("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 2,
+							paddingRight: 6
+						},
+						children: [/* @__PURE__ */ l("div", {
+							style: {
+								flex: 1,
+								minWidth: 0
+							},
+							children: /* @__PURE__ */ l(a, {
+								icon: m === t.id ? /* @__PURE__ */ l(e.check, { size: 12 }) : t.is_default ? /* @__PURE__ */ l(e.star, { size: 12 }) : void 0,
+								active: m === t.id,
+								onClick: () => {
+									g(t), T(!1);
+								},
+								children: S(t.name)
+							})
+						}), b && /* @__PURE__ */ l(n, {
+							icon: /* @__PURE__ */ l(e.trash, { size: 12 }),
+							title: S("list.view.delete_action", "Delete view {name}", { name: S(t.name) }),
+							size: 22,
+							disabled: x,
+							onClick: () => {
+								b(t), T(!1);
+							}
+						})]
+					}, t.id)),
+					k.length > 0 && j(S("list.view.shared", "Shared")),
+					k.map((t) => /* @__PURE__ */ l(a, {
+						icon: m === t.id ? /* @__PURE__ */ l(e.check, { size: 12 }) : /* @__PURE__ */ l(e.globe, { size: 12 }),
+						active: m === t.id,
+						onClick: () => {
+							g(t), T(!1);
+						},
+						children: S(t.name)
+					}, t.id)),
+					v && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(a, { divider: !0 }), /* @__PURE__ */ l(a, {
+						icon: /* @__PURE__ */ l(e.plus, { size: 12 }),
+						onClick: () => {
+							v(), T(!1);
+						},
+						children: S("list.view.save_as_menu", "Save as new view…")
+					})] })
+				]
+			}),
+			h && m && /* @__PURE__ */ u(c, { children: [_ && E?.source === "personal" ? /* @__PURE__ */ l(t, {
+				icon: /* @__PURE__ */ l(e.save, { size: 12 }),
+				onClick: _,
+				children: S("list.view.save", "Save")
+			}) : v ? /* @__PURE__ */ l(t, {
+				icon: /* @__PURE__ */ l(e.plus, { size: 12 }),
+				onClick: v,
+				children: S("list.view.save_as", "Save as new")
+			}) : null, y && /* @__PURE__ */ l(t, {
+				kind: "ghost",
+				icon: /* @__PURE__ */ l(d, { size: 12 }),
+				onClick: y,
+				children: S("list.view.discard", "Discard")
+			})] })
+		]
+	});
+}
+//#endregion
+export { p as ViewSwitcher };

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

@@ -0,0 +1,14 @@
+//#region src/components/list/peekDraftStore.ts
+var e = /* @__PURE__ */ new Map();
+function t(t, n) {
+	e.set(t, n);
+}
+function n(t) {
+	let n = e.get(t);
+	return n === void 0 ? null : (e.delete(t), n);
+}
+function r(t) {
+	e.delete(t);
+}
+//#endregion
+export { r as clearPeekDraft, t as setPeekDraft, n as takePeekDraft };